UI设计之原型规范篇
我刚入行的时候，领导给一个需求之后，我就开始做高保真界面了，当时觉得原型设计太浪费时间了，还不如直接做高保真界面。后面发现如果一旦出现返工，那就是整个项目重新设计，往往浪费了更多的时间精力，从而出现了加不完的班，熬不完的夜...
入行越久，发现UI设计不仅仅是画几个界面那么简单，自己不断的学习，总结，想着将自己的工作经验总结成文章发布出来，一来是为了记录自己的成长过程，二来是为了遇到更多的学习交流机会，毕竟一个人的能力是有限的，需要抱团取暖才行。
做界面，或者说做任何事，都需要有规范才行，俗话说“不以规矩，无成方圆”
一、做UI，需要遵循什么样的规范呢？
01、为何要遵循规范
规范是由设计升华而来。简单来说规范是设计界的前辈们通过不断的实践总结而来的经验。当我们遵循了这些规范，界面不说特别好看，但是一定会规整，规整的东西会让人心情愉悦。就像我们看到货架上的商品陈列的整整齐齐，心里会感到很舒服，如果商品摆放的歪七扭八，像摆地摊那样，就会有种廉价感。
从视觉角度来说，能让我们的产品在视觉呈现和元素定义的过程中都有可遵循的标准，保证日后产品迭代可以延续产品所传递的思想跟价值，最大限度的保证了产品的一致性。
02、UI要遵循哪些规范
1、操作系统规范
系统平台的规范可以让新手少走弯路，遵循规范的前提可以让界面不出大问题。
iOS三大设计原则
- 视觉层：清晰
在整个系统中，文字清晰可读，图标表意明确，装饰精巧，减少用户学习成本，避免过度设计
设计要点：颜色
保证色彩在任何情况下都可以辨识。如果文字是白色，那就要保证文字在背景上清晰可见，设计要点就是背景的明度要稍微暗一点。
- 交互层：遵从
让用户知道从哪来，到哪去。比如下面的视频中，一层一层点进去，一层一层退出来，让用户始终知道自己当前所处位置。
- 结构层：深度
赋予界面Z轴空间，视觉更立体。从视觉层级而言：白色>灰色>黑色
例如：灰色底上白色卡片，白色视觉层级更高；当白色卡片加投影之后，比没加投影的层级更高。下图中左边的更合理，原因是，当去色之后，蓝色的明度比灰色背景更深，所以蓝色应该在最底部。
注意点：尽量不要在白色底上托白色卡片，给白色卡片加投影属于强行抬高层级。非必要情况下不要使用这种方式。
2、屏幕尺寸规范
我们做设计的时候最关心的就是建多大画布，建什么尺寸的画布比较好。通常来说，在sketch中作图，我们选择375*812pt这个画布尺寸，这也是iPhone11 pro 的逻辑尺寸，PS做图的话建议用750*1334来做图，因为这样更好适配。
这里会提到几个概念，什么是像素，什么是逻辑像素。
像素（px）：像素可以理解为一颗颗发光格子，iPhone8有（750*1334）颗发光格子，750*1334即我们说的分辨率，同样的面积下像素格子越多，分辨率越高，看的越清晰。像素密度（ppi）：即每英寸屏幕所拥有的像素数，像素密度越大，显示的画面细节更丰富。当然像素密度越高越耗电。
逻辑像素（pt/dp）：逻辑像素是适配机型前我们设计稿中的单位。做设计稿时一律用pt作为单位，当导出对应倍数的设计稿之后，才可以以px为单位衡量。
下面附一张屏幕尺寸图表
二、原型设计怎样才能更规整
原型设计是为了让用户更直观的评估产品设计，避免将错误带到最终的产品中去。这个过程需要产品经理根据构思设计产品的大概草图。
原型设计分为：低保真原型（产品经理）/中保真原型（交互设计师）/高保真原型（UI设计师）
下面我们拿中保真原型来说，原型设计的基础视觉规范
一张原型设计的整体结构：顶部44pt是放置电池条的位置，即状态栏。往下44pt区域，即导航栏。底部34pt区域，是放置虚拟home的位置，即原点指示器。往上49pt，是标签栏（tab bar）区域。剩余的中间区域是内容区域（content view）。
中保真原型基础视觉规范
1、图片元素需要给特殊的标注，可以在色块上加图片的icon，也可以直接文字说明
2、原型图模块背景或元素一般采用黑白灰色值，能点击的按钮用深灰色，表示可以点击
3、页面中凸显的信息用深色，如文字或按钮
4、遵循软栅格。定义软栅格，常用的软栅格3/4/5/6（1倍图），软栅格单位只能选择一个。栅格越小，内容越紧凑。假如选择最小软栅格为4pt，那所有的间距都应被4整除，文字除外
软栅格单位定义好之后，间距优先遵循，这样界面会看起来很规整。下篇文章将分享怎样优化原型，让产品更合理。
文章被以下专栏收录
