首页 > 建站资源 > 网站运营 > 想学微信的界面设计?来看看WeUI的暴力美学吧!

想学微信的界面设计?来看看WeUI的暴力美学吧!

时间:2016-04-11    来源:人人都是产品经理

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

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

目的:看到传播很热的微信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中进行操作时,应当尽量在这些细节中感觉到统一和谐,有良好的用户体验是我们最终的追求。

相关推荐
20大UI设计原则 设计师必备宝典
APP应用设计教程:设计元素的应用条件
设计完美的界面排版10个要点分享
让UI设计显得更简约的小技巧分享
细说用户体验设计背后的“黑暗模式”
遵循用户需求的设计:最美APP的9条闪光定律
微软发布Windows 8.1更新 针对鼠标键盘用户
企鹅进化论 细数那些年我们一起用过的QQ
用户界面设计教程:UI设计六要素分享
谷歌将推新设计语言 统一安卓用户界面设计
今日最佳设计:人像即按钮 社交应用新趋势
细节决定成败!提高用户登录体验的5个细节
百设网:专注于应用界面设计的作品交易网站
好看好用?UI设计师不可不学的易用性原则
如何给Android产品设计一款合适的图标?
分享设计:Froont打造网站设计界的Github
2014年八个最棒UI设计灵感:你最中意哪个?
Web APP与原生APP有哪些交互设计区别?
想让界面优雅易读?聊聊移动端字体7个准则
天天喊着学UI 你知道安卓和iOS的区别吗?
连按钮都设计不好 你还指望用户点击?
分享为SOUNDWAVE设计WATCH应用的五个技巧
这是个看脸的世界 即便你是APP也是如此
再见METRO!WINDOWS 10通用应用设计趋势分析
以微信网易为例:新闻型产品列表设计分析
超实用干货!视觉设计师的五项技能修炼方法
百度官方出品!2015-2016交互体验趋势
界面设计:从减少点击次数到降低使用负荷
简约至上:教你打造用户喜爱的产品设计风格
用户为王!关于征询授权、注册及加载等待的体验优化
APP产品设计:让用户看见 才是王道!
简约之道:极简风格界面设计的起源与发展
nice 启示录: 看移动 App 的产品设计和运营策略
超实用干货!深聊时下最热门应用的11种设计模式
网站策划:如何使简单的想法更简单?
被小米青睐的“UI 中国”,还想围绕界面交互设计师做点什

精彩推荐

热门教程