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

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

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

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

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

其实,规范首页设计上配色清爽、排版简洁、内容上分类清晰,甚得我心(相比于IBM庞大的结构复杂的没汉化的设计规范,真的是业界良心);

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

废话就像头皮屑,消灭它用海飞丝!给链接: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


信息提示的面板


图07:Msg页面案例




Article


文本/文章内容的示例

图08:Article页面案例

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

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

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

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

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

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

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


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

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

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

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


Actionsheet


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

图10:Actionsheet页面案例




icons


图标的设计规范

图11:icons页面案例

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



Panel


面板的设计规范

图12:panel页面案例


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

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



Tab


Tab的设计规范

图12:Tab页面案例


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


SearchBar


搜索框的设计规范

图12:searchbar页面案例


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,400评论 25 707
  • //比如我们可以这样调用下: //也可以转换成 ”年月日”的格式 //将指定的日期转换为"年月日"的格式 //将 ...
    Bay丶阅读 928评论 0 0
  • 献给我所有的故友:已经故去的和健在的 2015.10.12作于成都 黄昏的城降落在这街道 最后的居民,最后的 昏聩...
    铃鼓先生阅读 250评论 0 1
  • 参加30天,每天写500字的活动,有看过几个群友写的总结,总的来说,体现了收货非常大。每个人的感觉真的大不同,我发...
    柚米阅读 205评论 0 0