保姆级UI设计流程

最近时常熬夜追剧。繁花终于大结局了。

今天这篇文章想要讲讲UI的工作流程和设计规范，希望对新进坑同学有帮助。

：获取原型 产品经理给到你原型图，不要盲目设计，分析项目功能逻辑、特性、面向人群、项目的定位。

：竞品分析们对市面上同类型一个品进行分析和对比，包括设计风格、配色、排版、功能样式等等，了解其优劣势，做到取长补短，至少要在设计上卷赢它。

：制定界面设计规范，以iphone界面尺寸为例:界面:750px1624px、状态栏:750×88px、航栏:750×88px、菜单栏:750×98px、指示器:750x68px。

顶部功能图标 48乘以48px 底部菜单栏图标，有文字的情况—48乘以48px，无文字情况64乘以64。

顶部标题和大标题：36px，特殊情况除外， 小标题和部分正文：32px， 正文：28px， 底部栏菜单栏文字和部分小标签24px。

正常#333333 辅助#99999，未输入提示#cccccc。

还有就是

，做好这些就可以复用。

7

状态栏：40px 导航栏88px 标签栏98px。 导航栏图标：44乘以44px  标签栏图标尺寸75乘以75px ，48乘以48，也有一些特殊例子。导航栏文字34-36px 标签栏文字20px 内容区域文字，20px 24px，26px30px，32px 34px，搜索栏高度58px。

卡片式风格就是UI设计运用了卡片的特征，将要展现的内容放在一个卡片容器类，增加内容的独立性，让模块划分关系，常用做法是采用浅灰的背景+白色卡片的方式。

拿下面内容举例子：如下图，背景用了饱和度比较低的灰色，卡片容器适当的给了些圆角，使得界面更精致圆融。

相比于传统的UI设计风格去除了背景色块和分割线，以间距去划分模块，因为去除分割线，留白更多，呼吸感更强，更干净，更清爽。

交付，切图，iOS:现在通常是输出2套，以@2x、@3X 为后缀，也就是2倍图、3倍图；有的前端也可能只要一套2倍图就够了。

Android:现在通常是输出3套，xhdpi (超清，对应IOS的2倍图)、Xxhdpi (超超清，对应IOS的3倍图)、Xxxhdpi (超超超清)，安卓切图不需要将倍数加到切图命名内，而是每种尺寸单独建立一个文件夹

：png透明底或者svg矢量图 mastgo可以直接导出图标。

：有的前端脾气好，可以容忍你随意命名，但是最好减少对方工作量，还是用英文加下划线加数字命名。

标注颜色，图标尺寸，以及各个组件之间的间距，如果是用mastgo无需标注，开发可以用标注模式直接看尺寸。