想学微信的界面设计，来看看WeUI的暴力美学

产品设计微信界面设计微信运营微信设计

写在开头，以表明动机、甩掉一切可能需要承担的责任。

目的：看到传播很热的微信WeUI，应该说是一种比较简单暴力的表现形式，但落实到设计者进行学习和实操时，具体数值应该会更有参考性；

过程：部分数据来自CSS样式，部分数据来自截图后PS测量。

成果：数据中类似色值本身并不具有参考价值，但是动态变化方法值得参考。

其实，规范首页设计上配色清爽、排版简洁、内容上分类清晰，甚得我心（相比于IBM庞大的结构复杂的没汉化的设计规范，真的是业界良心）；

每个类别内的交互做得很直观，测试过程真是痛并快乐着；

微信WeUI设计规范查看链接：WeUI

接下来的内容是对WeUI中列举到的控件的一些理解，除了微信中的实例也会提及这些控件的通用用法；主要包括Button、Cell 、 Toast 、 Dialog 、Progress 、 Msg 、 Article、 Actionsheet、Icons、 Panel、 Tab、 Searchbar。

Button

一般情况，我们认为按钮有三态Normal（正常）、Pressed/Highlighted（按下）、Disabled（不可）。

产品设计微信界面设计微信运营微信设计

图01：WeUI-BUTTON整理

表01：WeUI-BUTTON内容整理

百分数代表不透明度

- 表示无变化

线框类的button Pressed状态下仅在描边上加响应黑透蒙版

另外，我们知道表单中常用有RadioButton(单选)/CheckBox(复选框)控件，但是这两个控件在iOS控件库中是不存在的，且在移动端我们更多地会把这类需求设计成按钮平铺的形式（面积更大更易识别，如充话费时选择额度按钮），这个时候按钮就可能会出现Focused(选中)状态。微信中没有发现相关案例，但在表格中写明。

在规范中，配色方案的确定通常都是比较纠结的过程，而为了简化配色方案及为了更有通用性，我们常用的方法就是：调整透明度；

具体的做法比如表格中纯色类的按钮边界是在纯色基础上叠加20%的#000000（不用靠感觉去吸色-调一个深色了），这种方法简单有效、理性；

再比如pressed状态，无论是什么背景的色值，通过叠加蒙版的方式都可以得到一个有效的明显的统一的反馈。

另外针对灰度等级的设定也可以使用调整透明度的方法，确定多个不同层级的色值；

Cell

解释为单元格，会不会更易被认知？

设计规范的初衷是为了让更多的工作人员迅速认知产品提高开发效率，并且不同的工作人员能在规范约束下做出交互、视觉等方面能保持整体和谐统一的设计；

比如：

图中标识的两边留白的统一（即栅格系统）；

不同文本内容选取的控件的一致性；

Pressed状态通常在背景上加10%透明蒙版等细节；

产品设计微信界面设计微信运营微信设计

图02：Cell列表整理

图03：Cell中的常用控件

操作列表（ActionSheet）

数字键盘（Keyboard）

选择器（Picker）

时间日期选择器（Date Picker）

Toast

临时的弹框用来表示一些提示信息，通常在3s±时间消失；

图04：Toast整理

Dialog

在iOS标准UI控件中也叫警告框（Alert）

图05：Dialog整理

应当尽量遵守：弹框内容须包含标题，有时候会包含正文；包含一个或多个按钮;避免出现不必要的警告框（对话框）。

另外弹框的形式一般情况下可以设计成居中弹框或者是底部的弹框，底部的弹框似乎是随着大屏手机的普及应需而生，现在也被越来越广泛得使用；

在iOS人机界面指南的控件篇章中，居底弹框是在Actionsheet（操作列表）中的例子，而居中弹框是Alert（警告框）的例子，因此个人觉得，当需要用户进行功能性的操作时用局底弹框，而提示性信息并需要用户确认时可用居中（如上图微信中的案例）；

无论如何，保持用户沉浸在我们的APP中进行操作时，应当尽量在这些细节中感觉到统一和谐，有良好的用户体验是我们最终的追求。

Progress

产品设计微信界面设计微信运营微信设计

图06：Progress整理

Msg

信息提示的面板

产品设计微信界面设计微信运营微信设计

图07：Msg页面案例

Article

文本内容的规范

想学微信的界面设计，来看看WeUI的暴力美学

图08：Article页面案例

通常，阅读类的应用会对内容的排版进行额外的调整，如网易新闻。在这里说一些常见的通用的文字处理方式：

要考虑文字的响应式变化，如在大屏手机和小屏手机中的单行文字显示数量变化引起的布局上的变化；

不同页面导航栏的文字使用相同字号，一般为17pt；

确保文字的可读性，最小字号不小于11pt(dp)；

通常情况下，应用整体使用单一字体（后面附不同OS下文字使用规范）；

1.5-1.8倍的行距是比较适宜的文本内容行距；如微信案例中为1.6倍（倍数是指在字号的基础上）；

文本总是使用常规(regular)或中等(medium)，一般不使用轻(Light)或者加粗(Bold);