从微信WeUI设计规范,解读移动界面设计.pdfVIP

从微信WeU I设计规范 ，解读移动界面设计 写在开头 ，以表明动机、甩掉一切可能需要 担的责任。 说明一下目的 ：看到传播很热的微信WeUI ，应该说是一种比较简单暴力的表现形式 ，但落实到设 计者进行学习和实操时 ，具体数值应该会更有参考性 ； 说明一下过程 ：部分数据来自CSS样式 ，部分数据来自截图后PS测量。 说明一下成果 ：数据中类似色值本身并不具有参考价值 ，但是动态变化方法值得参考。 其实 ，规范首页设计上配色清爽、排版简洁、内容上分类清晰 ，甚得我心 （相比于IBM庞大的结构 复杂的没汉化的设计规范 ，真的是业界良心 ）； 每个类别内的交互做得很直观 ，测试过程真是痛并快乐着 ； 微信WeUI设计规范查看链接 ：WeUI 接下来的内容是对WeUI中列举到的控件的一些理解 ，除了微信中的实例 也会提及这些控件的通用 用法 ；主要包括But t o n、Cell 、 Toast 、 Dialog 、Progress 、 Msg 、 A rt icle、 A ct io nsheet 、 Ico ns、 Panel、 Tab、 Searchbar。 Butto n 一般情况 ，我们认为按钮有三态No rmal(正常)、Pressed Highlight ed(按下)、Disabled(不可用)。 图01 ：WeUI- BUT T O N整理 表01 ：WeUI- BUT T O N内容整理 百分数代表不透明度 – 表示无变化 线框类的but t o n Pressed状态下仅在描边上加响应黑透蒙版 另外 ，我们知道表单中常用有Radio But t o n(单选) CheckBox(复选框)控件 ，但是这两个控件在iO S 控件库中是不存在的 ，且在移动端我们更多地会把这类需求设计成按钮平铺的形式 （面积更大更易 识别 ，如充话费时选择额度按钮 ），这个时候按钮就可能会出现Focused(选中)状态。微信中没有 发现相关案例 ，但在表格中写明。 在规范中 ，配色方案的确定通常都是比较纠结的过程 ，而为了简化配色方案及为了更有通用性 ，我 们常用的方法就是 ：调整透明度 ； 具体的做法比如表格中纯色类的按钮边界 是在纯色基础上叠加20%的# 000000 （不用靠感觉去吸色 -调一个深色了 ），这种方法简单有效、理性 ； 再比如pressed状态 ，无论是什么背景的色值 ，通过叠加蒙版的方式都可以得到一个有效的明显的 统一的反馈。 另外针对灰度等级的设定也可以使用调整透明度的方法 ，确定多个不同层级的色值 ； Cell 解释为单元格 ，会不会更易被认知 ？ 设计规范的初衷是为了让更多的工作人员迅速认知产品提高开发效率 ，并且不同的工作人员能在规 范约束下做出交互、视觉等方面能保持整体和谐统一的设计 ； 比如 ： 图中标识的 两边留白的统一 （即栅格系统 ）； 不同文本内容选取的控件的一致性 ； Pressed状态 通常在背景上加10%透明蒙版等细节 ； 图02 ：Cell列表整理 图03 ：Cell中的常用控件 1. 操作列表 （A ct io nSheet ） 2. 数字键盘 （Keyboard ） 3. 选择器 （Picker ） 4 . 时间日期选择器 （Dat e Picker ） Toast 临时的弹框用来表示一些提示信息 ，通常在3s± 时间消失 ； 图04 ：Toast整理 Dialog 在iO S标准UI控件中 也叫警告框 （A lert ） 图05 ：Dialog整理 应当尽量遵守 ：弹框内容须包含标题 ，有时候会包含正文 ；包含一个或多个按钮;避免出现 不必要的警告框 （对话框 ）。 另外弹框的形式一般情况下可以设计成居中弹框或者是底部的弹框 ，底部的弹框似乎是随着大屏手 机的普及应需而生 ，现在也被越来越广泛得使用 ； 在iO S人机界面指南的控件篇章中 ，居底弹框是在A ct io nsheet （操作列表 ）中的例子 ，而居中弹框 是A lert （警告框 ）的例子 ，因此个人觉得 ，当需要用户进行功能性的操作时用局底弹框 ，而提示性 信息并需要用户确认时可用居中