站长广告网

 找回密码
 我要注册

QQ登录

只需一步,快速开始

站长广告网 首页 设计学院 网页设计 查看内容

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

2016-4-11 11:22|来源:人人都是产品经理|浏览:3579 人次| 0人参与

摘要: 看到传播很热的微信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

       本文发布于站长广告网,本文链接:
文章还不错,分享到:
12下一页

   站长广告网(www.zhanad.com)版权及免责声明」
    ① 本站文章来源注明为“站长广告网”的所有文字及图片均为本站原创,版权属于本站所有。其他网络媒体或个人转载使用文字及图片的,应在授权范围内使用,转载请注明“作者、出处链接”
    ② 本站转载自其他媒体的文字及图片,仅出于传递信息之目的,不代表本站官方声音或证实其内容的真实性。如其他网络媒体媒体或个人转载,必须保留本网注明的版权标注,并自负版权等法律责任。
    ③ 欢迎通过官方QQ:10382819、邮件ceo#zhanad.com(#改为@)、微博@站长广告网 与我们就文章内容交流、声明或侵删。[本文编辑/信息员 

相关分类

联系我们 素材下载
返回顶部