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

相关推荐

  • 2015年新起来的APP新贵们,进来瞅瞅都是什么APP在“火”!

    一时兴起,统计2015年以来新发布的,或是从2015年开始快速崛起的,日活稳定在20万+的APP,一共找到了16款。以下数据为粗暴的估算,不准确很正常,不准确憋找我! ┃视频类 熊猫TV,视频直播平台,CEO王思聪,200万量…

    2016-04-08
  • Axure RP入门第七篇——中继器来实现聊天室效果

    产品经理入门:Axure RP入门第七篇——中继器来实现聊天室效果

    2018-03-24
  • 【交互设计面试经验】2015年1月20日-交互设计师面试问题分享

    面试时间 2015年1月20日 阿西导读: 今天起我们给交互设计行业的朋友们开一个福利栏目:交互设计师面试分享我们在分类里叫交互设计面试,无论你是新手交互还是UI转UE 或是PM转UE又或者PM兼职UE。 不论怎样你都需要知…

    2015-01-21
  • 符合用户直觉的设计,才能更快地获得用户信任

    UI和交互设计中常常会强调某项设计需要足够的“直觉性”,但是直觉性的设计说来容易,实现却往往差强人意。但是不得不承认,它是目前交互和UI设计的刚需。想象一下,如果桌面上反过来一颗球让你去转动控制,感觉应该比鼠标运作顺畅些。我们原本认为这是个好点子……可是我以前从未观潮这种触感的细节。当孩子们操作鼠标和遥控杆的时候,会不自觉地低头看输入装置……后来有人想到,如果操作时运动肌肉群范围较大,也许他们可以不必低头。我们做了一个大型轨迹球装置,让他们可以用手臂甚至肩膀牵动来操作,这样就把问题解决了。我们先是观察什么样的操作方式比较合乎自然,然后提出想法,再进行测试。心智模型指一个人对于事物运作的思维过程,即一个人对于周遭世界的理解。心智模型的基础是不完整的显示、过去的经验甚至直觉感知。它有助于形成人的动作和行为,影响人在复杂情况下的关注点,并确定人们如何着手解决问题。

    2017-05-15
  • Axure案例-联想输入提示,Axure中继器的使用

    点击右面下载:axure-case-https://www.iamue.com 不多说了,源文件分享,使用Axure打开编辑可以查看原理。 日安 转载的童鞋带上:木卫艾欧网-交互学堂》 Axure案例-联想输入提示,Axure中继器的使用 

    IxD案例 2015-02-04
  • 【总结】阿里UED内部资料 ▏优秀的交互设计师这样养成

    一直以来,交互设计师都是一个受到广泛质疑的岗位,很多人不了解交互设计师的价值,更直接的说,我们大多数的交互设计师没有表现出足够的、令人信服的专业度。 大约五年前选择了这个职业,一路走来,质疑过、探讨过…

    2015-12-04
  • 产品原型和交互设计的区别

     产品经理根据需求来规划产品原型,但是产品原型往往比较粗糙,可能只包含了核心功能描述或者模块划分。我们之前问过很多朋友产品经理的原型和交互设计师的原型相比有何异同,得到的结果简单来说,前者更加笼统且…

    2015-02-03
  • 以开发的视角做设计:开发眼中的设计稿长什么样?

    面对完全不一样的媒介,设计师们会有不一样的目标,也会使用不一样的手法进行设计。 比如说一名 UI 设计师与平面设计师的最大区别,大概就是在于 UI 设计师能够以开发的视角来做设计。

    2017-05-01
  • 用户体验的十大原则

    设计师并没有创造体验,他们只是创造体验的媒介,两者之间非常不一样。因为体验是主观的,所以它并不能按照实物产品的方式被设计出来。然而,这并不意味着我们不能设计用户赖以体验我们产品或服务的框架。如果这个框架是足够坚固的,那好的体验就会接踵而至。

    2017-05-28
  • 交互设计-网站页面视差效果(Axure RP 7.0 源码下载)

    很多(想)学习Axure的朋友,都是伸手党,这是一条不争的事实,直接拿过来省事又省时;
    能真正学会并驾驭这款软件的毕竟是少数(其他软件也一样,这似乎是一条无法打破的规律),不过金乌老师还是希望想使用这款工具帮你应付差事(实现梦想)的小伙伴儿们加油,自学是很辛苦的,只有经历了挫败、枯燥、郁闷的适应期才能真正适应并喜欢上自学这种方法,不积跬步无以至千里。

    IxD案例 2015-01-05