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

作者:风口上的猪毛    编辑:小露

本文已经获得作者授权发布,转载请注明出处。

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

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

过程:部分数据来自css样式,部分数据来自截图后ps测量。

应用:数据中类似色值本身并不具有参考价值,但是动态变化方法值得参考。

其实,规范首页设计上配色清爽、排版简洁、内容上分类清晰,甚得我心(相

比于IBM庞大的结构复杂的没汉化的设计规范,真的是业界良心);

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

废话就像头皮屑,消灭它用海飞丝!给链接:WeUI

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


Button

一般情况,我们认为移动端的按钮有三态Normal(正常)、Pressed/Highlighted(按下)、Disabled(不可用)。

1459834104-1266-vSuL3ics7NnochrnmfINqial0kSA

 

图01:WeUI-BUTTON整理

 

1459834104-5634-RqwpTqDgqdOyn1qKkRp581sv2uFg

 

表01:WeUI-BUTTON内容整理

 

* 百分数代表不透明度

* – 表示无变化

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

 

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

 

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

 

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

 

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

 

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

 


 

Cell

 

解释为单元格,会不会更易被认知?

 

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

 

比如:

 

图中标识的 两边留白的统一(即栅格系统);

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

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

 

1459834104-4318-ibHibKcfMQEicria9gS7pERVjuKw

 

图02:Cell列表整理

 

1459834104-3130-d8GACmmdWR7uib2WMOj0zh0SUOMQ

图03:Cell中的常用控件

* ① 操作列表(ActionSheet)

* ② 数字键盘(Keyboard)

* ③ 选择器(Picker)

* ④ 时间日期选择器(Date Picker)

 

 


 

Toast

 

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

 

1459834107-2164-qe7kr3hEnbw9qjuuEGAPbsba9FDQ

 

图04:Toast整理

 


Dialog

 

对话框,在iOS标准UI控件中 也叫警告框(Alert)

 

1459834107-5779-XVPp6YSY2xZQWP6AwMJsJ6x5VEhQ

 

图05:Dialog整理

 

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

 

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

 

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

 

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

 

 


Progress

 

进度条的示范

 

1459834107-3901-bVkqZGzLzOJnHeIvgfIz7PJ8VIpA

图06:Progress整理

 


 

Msg

 

信息提示的面板

 

1459834106-8716-aCshg0N6Q1qt7kg54pA5z976ibvg

图07:Msg页面案例

 

 


Article

 

文本/文章内容的示例

1459834107-7183-mcoc7GZ1lLWibgu3j25yibU5pmzQ

 

图08:Article页面案例

 

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

 

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

②不同页面导航栏的文字使用相同字号,一般为17pt;

③确保文字的可读性,最小字号不小于11pt(dp);

④通常情况下,应用整体使用单一字体(后面附不同OS下文字使用规范);

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

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

 

1459834109-5785-bbOz4q1whkSXbibTp7oiceOO8ndA

图09:不同OS下的文字使用规范

 

当你在你的app中使用San Francisco时,iOS会自动在适当的时机在文本模式和展示模式中切换(无需额外标注);

用photoshop或者sketch生成设计稿时,调整Text/Display,并将渲染模式设为Mac 更接近实现效果;

iOS会根据字号大小,自动调整字间距。

 


Actionsheet

 

操作列表的规范,在Toast中已提及

 

1459834109-8805-eOTUVIb3oNWRVfeiaYCRxFA7rLew

图10:Actionsheet页面案例

 

 


icons

 

图标的设计规范

1459834109-9758-fCodLzrjtDgIGC25OEMUHeCxPpFQ

图11:icons页面案例

 

图标的设计是在UI设计中比较能体现界面风格的细节,icon的设计属于理性和感性比较交错的部分。对于细节要敢于创新也要舍得取舍。体量感的控制,风格的统一,视错觉下的调整……

 

 


Panel

 

面板的设计规范

 

1459834110-8221-vPzOcNhPx7bX1AdYoO3AV7fJQaqw

图12:panel页面案例

 

个人觉得WeUI中出现的pannel这部分可能有点多余,这应该和Cell部分一样,属于表单系列;只不过这里的表单是平时我们比较常见的部分(图文组合);

在这种图文组合中,如果能用上亲密性、对比、重复、对齐这几个原则,那一定会是一个标准舒适的界面。

 

 


Tab

 

Tab的设计规范

 

1459834111-1531-JvjBhOgsVaUia7bqicJ0V9GzNqgQ

图13:Tab页面案例

 

我们知道Tab的高度一般取49pt,相对应的tab中icon的大小一般控制在25pt内;

 


SearchBar

 

搜索框的设计规范

1459834111-4391-rHmZM4kbkHvaoe6FXU2Iuo7rtibg

图14:searchbar页面案例

 

文末,感谢开发小伙伴的技术支持

 

– 文章结束 –


本文版权归原作者所有

转载请注明原作者及出处授权发布,原文链接在标题下方!

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/13820/

(0)
iouedioued
上一篇 2016-04-04
下一篇 2016-04-06

相关推荐

  • 淘宝天猫个性化推荐技术演进史

    小编说:个性化推荐技术直面用户,可以说是站在最前线的那个。如今,从用户打开手机淘宝客户端(简称“手淘”)或是手机天猫客户端(简称“猫客”)的那一刻起,个性化推荐技术就已经启动,为你我带来一场个性化的购物…

    2017-05-09
  • 用好的交互设计来管理复杂-“个人中心”

    “复杂是世界的一部分,但它不应该令人困惑,好的设计能够帮助我们驯服复杂,不是让事物变得简单(如果复杂是符合需求的),而是去管理复杂”。复杂是可以被管理的,但要做到这一点,我们都必须做好自己该做的那部分工作。

    2017-05-19
  • 用写文章的思路设计banner

    工作中接触了一些banner设计的工作,借着本次整理思路的机会顺便和大家分享下,不周之处欢迎沟通指正。

    2017-05-24
  • 提高交互技能点,一些常见移动端交互方法

    “在PC上常出现的下拉菜单,在移动端上都是用什么交互来实现的”,将最近项目里碰到的情况总结一下。

    2017-05-30
  • Smartisan OS v3.1.0 功能列表(M1 / M1L),创新交互设计“One Step”与“Big Bang”变革安卓阵营。

    本次更新主要增加了两大重磅功能“One Step”与“Big Bang”,前者将常用的点击与分享操作放置于边栏,快捷切换与分享,快人岂止一步;后者可以将大面积按压下的文字区域,智能拆成字和词,你可以自由选择与搭配,同时…

    2016-10-19
  • 关于2017年设计趋势的13个预言

    在未来,当对微小细节的关注渗入用户体验设计的每一寸土壤;当对像素级完美的追求成为设计的基本要求;当将简单便捷的设计理念融入用户的日常生活,那么我们就能够帮助用户体验全新的生活。 在2016这一年,全世界笃信…

    交互专题 2017-08-07
  • 设计师保持画草图是个不错的习惯

    一名优秀的设计师的经验之谈。 我从不敢放眼将来长远的看过去若干年,也许正是这个原因才让自己对很多事情不那么在意。其实我是个很安心于能让自己安心的事物的人,只是这样的事物随着时间的推移而越来越少;自己所…

    2015-05-19
  • 2018年04月04招聘岗位

    招聘服务员工资底薪2500加提成收银员2700元加提成招聘电话:8663888,15750516333 13948455099促销员20名,要求:年龄20-40岁,时间15-20天,底薪(80一120),提成+提成工资多劳多得!加微信15849572346了解工作内容,今日下午3点面试掌上明珠全体员工欢迎你的到来!招聘电话:158495723468876688内蒙古泽强医药有限公司招聘职位及岗位需求:一、人力资源专员具体要求:1、年龄2...

    2018-04-08
  • 优秀的移动端UI,应当如何用微交互打磨细节?

    你的UI和交互设计中的每一个元素都是至关重要的,一个又一个细节设计让你的产品最终脱颖而出,而真正让人难忘的产品,靠的是这一个个精致到位的细节堆出来的。

    2017-05-19
  • 别让这五种错误毁了你的交互设计

    交互设计从来不易。它需要对用户行为进行深入分析的同时,还要进行细致的计划。尽管新的交互设计不断出现,但并未使它变得更容易一些。如何才能创建令用户满意的使用体验?如果你对交互设计中常见的错误有所警惕的话,无疑就会尽量避开这些错误,从而实现更完善的UX体验。

    2017-06-02