从微信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

相关推荐

  • 总结七大设计原则,打造高素质的UI界面

    虽然好设计的原则是老生常谈,但是我们还是要经常总结,结合自己的设计,三省吾身。

    2017-05-11
  • 别逗了,真正的“用户体验”并不如你们所想

    什么是用户体验?如何评价用户体验的好坏? 在知乎上,俞军说:“我理解的用户体验,是让用户付出最小成本满足需求”。这其实仅仅是在讲“易用性”(usability)。另有位叫做Allen Zhang的大牛说:“个人对用户体验的目标…

    2015-10-10
  • Axure RP 8 入门手册 – 第6章(三)

    第8节检视功能-元件属性Alice.:小楼大大好!小楼大大帅!我有些小困惑,想请你帮我指点下。可以吗?小楼:你诚实直白的我无法拒绝。Alice.:嘻嘻!我的问题有点多哦。小楼:来嘛!Alice.:我想做个密码输入框,就是输入文字时只能看到圆点那种。帅帅的小楼老师,这个怎么实现呢?小楼:这个是文本框的类型,看来你对这个元件的属性不太了解呀!我给你详细讲解吧!在检视功能的属性面板中有每个元件的属性设置,不同元件的属性会有差别。这里我对各类元...

    2018-04-22
  • 无限滚动翻页的优点和缺点

    一张图告诉你无限滚动翻页的优点和缺点 什么是无限滚动翻页?你一定不会陌生。实在不清楚,刷一下微博就知道了。想不想知道你的网站适不适合使用无限滚动翻页,看看这篇文章应该会很有帮助! 无限滚动翻页是现在讨…

    2015-01-21
  • 一个更适合产品迭代的卡片创意法

    本文是由58UXD的交互小组的工作总结文章,交互设计师常常需要进行迭代设计,为此,他们琢磨试验出一个更适合产品迭代的卡片创意法。收到消息通知→打开消息通知→查看消息→回复/其它操作接收(告知用户有消息需要了解)→阅读(了解更多消息详情)→反应行为

    2017-05-01
  • 交互设计流程是怎样的?

    其实这个问题也是我的学生最爱问的问题,不论国籍。先说下我的背景吧。我是国内软件工程本科+美国UW HCDE master,现在在硅谷做用户体验设计并且教用户体验课程。之所以强调自己的背景,是因为我看到的大家给出的见…

    2016-10-25
  • 交互设计与用户体验分析实例——外卖产品

    题外话:作为一名交互设计师,平时闲下来特别喜欢分析市场上的一些具有代表性产品的交互设计。同样,作为一名资深的吃货,毋庸置疑,当然先给大家分析几款“外卖”的交互设计。

    2016-10-26
  • 王者荣耀 安卓用户体验服礼包第二波 疯狂放送中

    王者荣耀武则天夺宝多少必出?在游戏中武则天是通过夺宝才能获得的,属于稀有英雄。不过武则天也确实强大,今天小编就为大家带来武则天的解析攻略,告诉大家武则天怎么才能获得,武则天的实战技巧有哪些,快一起来看看吧!武则天详解攻略:1、获取途径:抽奖这个是靠运气,但是抽取次数越多中奖概率会越大,根据土豪玩家反映,夺宝100次左右能获得英雄,100次到200次获得稀有英雄概率很大,所以一般在200次以内就可以抽到武则天。2、技能介绍:【女帝辉光】武...

    2018-04-09
  • Axure RP 8 入门手册 – 第7章

    第7章母版管理第1节母版简介第2节添加/编辑/删除第3节添加母版到页面中第4节从页面中移除母版第5节拖放行为第6节自定义触发事件第7章母版管理第1节母版简介圆儿:小楼欧巴!小楼:圆圆好!圆儿:老师,我就一个圆!小楼:可是我喜欢两个圆啊!圆儿:老师…你正经一点儿好不好嘛!小楼:呃……你想问什么?圆儿:我想问,在做很多个页面的时候,如果每个页面中都有相同的内容,有没有办法不用每个页面都做一次?当然,我知道能够复制粘贴,但是,如果将来再发生改...

    2018-04-25
  • 教你4步挖掘设计灵感,30分钟打造出一款圣诞节Banner!~

    憋不出灵感就如难产一般,蓝瘦,香菇/(ㄒoㄒ)/~~

    2017-05-14