UI设计实践优化

设计规范
设计规范主要是指对配色、字体、元素间距、控件尺寸、页面布局等可复用设计规则的提炼和约束，用于指导后续的设计工作，在web开发中则对前端开发也有着重要的作用，对产品的视觉、交互尤为重要。

设计规范要坚持逐步完善，在产品中持续推行，让团队能切实意识到规范的重要性及必要性。

设计规范对团队合作很重要，主要体现在降低沟通成本、提高设计效率、保持产品或品牌风格一致、便于开发人员更为准确地还原样式、组件开发。

设计规范最好在整套UI基本成型后再进行较为合理，过早进行可能会影响创意地发挥，导致精力更多地关注在设计规范上，进而顾此失彼，得不偿失。同时设计规范地持续性要求在对设计文稿不断进行归纳、微调和后续补充后，也应反馈到设计规范上，这样形成一个完整地“输出->反馈“机制。

设计规范内容大体包括色彩、视觉、控件、排版、文字等方面地内容，同时在不同媒体之间也存在一定的差异：

PC UI
多尺寸布局适配和响应适配，主要体现在布局变化的临界点和栅格设计。目前常见PC分辨率：

1920 x 1080
1440 x 900
1280 x 800
1024 x 640(早期小屏笔电)
鉴于流式布局，只需关注屏宽。

规范关注点：安全区域、布局结构、悬停效果、交互动效、文本字体与排版。

App UI(主要指原生App)
1. 适配屏幕尺寸，一般需要指明2x或3x。
2. 点击区域，应避免点击区域过小(iOS点击区域不能小于88px)。
3. Android开发中的特殊切图需要对普通画布进行扩大，并将最外围一圈像素置纯黑。
4. 鉴于移动端指动操作，应考虑手势效果。

H5 UI(主要指移动web端)
1. 有别于原生，而近原生，样式尽量与原生控件风格一致。[该点已更个性多样化]
2. 考虑多尺寸布局适配和响应适配，布局变化临界点、栅格布局。
3. 手势操作避免与浏览器本身冲突，减少手势操作，无悬停效果。