UI设计的一些规范
时间：2023-09-11 07:54:01 | 来源：网站运营
时间：2023-09-11 07:54:01 来源：网站运营
UI设计的一些规范：UI设计界面都是为了呈现信息，强化功能而存在
我连规范都弄不好……
开始找iOS的设计组件
琢磨什么规范是怎样的
状态栏的话系统默认的就不说了
这里介绍了导航栏，标签栏，设置列表和普通列表的规范
导航栏
状态栏高40px
导航栏高88px
标签栏98px这个是常识……
Page title和back文字大小是34px
Page title居中
图标的大小
以返回为例，宽25，高42
以加号为例，宽高都是35px
我把返回旋转45度，宽高为29.698，约等于30px
所以这个图标的绘制大小对我来说还不太确定
但有书上说导航的图标绘制是44*44大
切图为了所有图标切图统一尺寸切54*54
来看一下图标的定位
我量到的图标边缘距离屏幕边缘为20px
导航栏内容高度居中在88px高度上
导航栏如上图时，灰色栏高度58PX，
文字
http://apple.com大小为36pt
以“刷新”的图标为例
高度30px，宽度25.949px
以“更多”图标为例
宽度是30px，高度23px
这两个图标宽高的最大值是30px，
所以他们绘制范围大小在30px的正方形内
切图可以切54*54
灰色栏与屏幕边缘的距离为18PX
图标与灰色栏的边缘距离为20px
导航栏是搜索栏时，搜索栏高度是56px
字体Search为28pt大小
搜索栏与屏幕边缘为16px
搜索图标宽为25.771，高为25.646
这个是不规则图形，量了一下图标与搜索框上下的距离都是15px
可以推测出这个图形是26px范围里绘制的
搜索另一种形态字体Search和上图一样为28pt，颜色8e8e93，背景搜索颜色为f2f2f8
Cancel字体大小为34pt
字体光标宽度4，高度37
Cancel距离搜索框30px，距离屏幕边缘36px
搜索栏与屏幕边缘为13px，这个数有点不对劲啊，一般都是双数倍的
光标与搜索框边缘相距20px
标签栏
标签栏高度通常为98px
这个为100px……特殊情况……
当然也不是死规定，可以灵活运用的
上图文字大小为20px
颜色828282
书上说22px也可以，很多种规范啦，开始不用死守规定，但确定了就要一直沿用
图标大小绘制范围
以圆为例子是50*50px
不规则图形如星星，宽54px高52px
正方形绘制大小为48*48
这里不同图形绘制的物理大小不一样是为了视觉上的大小一致
同样的宽高，圆形和正方形比较，正方形看起来比较大一点，
不规则的图形和圆比较，圆看起来比较大
为了纠正视觉上的不一致，会使用不同物理大小来平衡
这里我简单介绍了一下
还有不懂的可以看这篇文章
“没掌握图标的绘制规范之前，别说自己会画图标了”
http://www.uisdc.com/icon-design-rules图标的切图统一为54*54
所以不要超过54px的正方形绘制区域
也有例外
上图最右边的图标宽度为62
这种情况比较特殊
特殊情况特殊对待……哈哈
图标分布：
iOS标签栏里不是按750宽平均分配的
那怎么确定位置呢？
我又测了图标与图标的距离
一个图标切图为54px
有5个标签的话
那么图标与图标的距离大致为98px
这样就搞清楚图标之间怎样定位的了
先从中间图标开始定位
相隔98px一个图标，文字居中对齐
按图标切图大小54px来固定大小
来讨论图标上下的距离，从上到下
图标与导航栏顶部距离12px
图标与文字距离14px
文字与导航栏底部距离6px
上图图标的线段粗细为2pt
颜色是929292
另一个组件
像这样的标签栏，高度是52px，宽度为734px那么左右距离屏幕边缘为8px
内容平均分布，字体大小为28pt
设置列表
在设置页面
彩色部分icon大小为58*58，圆角为10pt
字体大小为34pt
图标距离屏幕边缘为30px
箭头距离屏幕边缘为32px
图标与字体的距离为35px
分割线高度为1pt，宽632长
632这个数字引起我的注意
算了一下是750-30-58-30=632
字体定位：
字体在设置栏中是偏上的
一栏高度加上分割线为90pt
列表
列表页
发现文字间距都是35pt
箭头高度与文字相同
分割线750-30=720
文字颜色最深是000000，到右边文字颜色是828282
箭头颜色和分割线颜色相同d2d4d8
文字颜色总结一下：
最深为黑色000000，次级828282，文字在灰色背景上做提示时8e8e93
我在这里量出大概的范围，为了以后作图时
心里有数，并不一定要按这个标准
想起以前作图的时候完全没有规范，都是按感觉来
所以才找不到工作啊，摔
在线咨询
