Material Design/ios设计规范如何完美落地

目前比较流行的规范是Google的Material Design和Apple的ios设计规范。相信很多人在产品落地的过程中也参考了这两个大平台的设计规范,但却依然发现很难落地到自己的产品上,我们这里就规范与落地的内容做一些探讨。

首先我们来说下Material Design/ios设计规范是如何落地到产品上的,这里我整理了一个结构图用于讲解:

这个图来源于我们平常工作中的产品设计落地的流程,产品设计落地过程中可以分为两块,一块是产品层,一块是设计层如下:

产品设计落地过程

我们将产品层的流程与设计层的流程梳理清晰之后,可以清晰的了解到我们制定的规范是到了哪个环节,然后便可以在Material Design或Apple的ios设计规范中挑选出我们需要内容,进行合适产品自身的优化设计。

接下来我们研究个例子,看看大家熟知的产品-Airbnb。它在2016年初摒弃了ios设计规范,投向了Material design。

Airbnb界面截图

我们按照之前梳理的逻辑来分析一次,按规范落地结构图从上至下的分析:

1.首先分析产品的理念:

Google对Airbnb的设计理念的评价原话是这样的:

“One of Google’s Ten things we know to be true is “Fast is better than slow.” Airbnb clearly relates to this philosophy, and acts on it by showing respect for their users’ time. Essential tasks are satisfied through precise design, routing users clearly and briskly from sign in, to browsing, to booking a reservation. By neatly segmenting larger goals into smaller steps, Airbnb is able to sidestep the appearance of complexity, making the overall experience feel comfortable.”

简单的说就是产品要清晰高效的让用户达到目的,所以我们接下来将Airbnb的设计理念定义为“清晰高效”。(这并不是Airbnb的官方定义,仅作为示例用于讲解)


2.梳理产品功能

这里大致列举Airbnb的产品的主要功能:房源列表,按地理位置、入住时间、入住人数、评价等条件筛选房源、房源详情、预定房源、付费、评价。

根据这些功能,我们就可以提取出功能中常用的控件与模态视图,例如房源列表、时间选择器、人数输入框等。


3.根据规范进行合适的调整。

如时间控件,airbnb在material design的基础上,按照清晰高效的设计理念做出了调整。如下:

Airbnb延续了自己产品的设计理念,采用了更大的内容来提升用户选择日期的效率,也采用了更大的字体将信息清晰的呈现给用户。同时在关闭日历选择控件的操作上,保持了与返回按钮相同的位置,与APP内返回操作都在左上角的认知设计保持了良好的一致性。

在月份翻页操作上,Airbnb也追随了高效清晰的设计理念,将点击的操作改为了上下滑动屏幕的操作,更好的适配了移动端的操作习惯,将日期前后更清晰的连接起来。

在确定按钮的设计上依旧体现了高效清晰的设计理念,将按钮做的更大更易点击。

在选择控件上也做了对应的调整,将控件视觉设计的更大、文字更加明显,突出选择结果的呈现,在开关按钮上也做了更清晰的反馈。如下:

---------------------------------------

最后做些总结:

规范落地的流程和方法大致如上所述,其中整理出设计理念非常重要,需要清晰的了解用户需求后才可以准确得出。

后续的界面布局与控件设计都可以根据设计理念对Material Design / ios基本的规范进行优化设计,设计出更合适本身产品的界面与控件,最终就可以总结成一整套合适自己产品的设计规范。

以上仅列举了规范如何落地到产品的方法与流程,若有更多疑惑或建议,欢迎探讨。

谢谢读到这里 :)

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

推荐阅读更多精彩内容