设计规范沉思

      说在前面的话,UI设计是需要去实践,去尝试,去做出东西的职业。只有真正去做了,才会发现问题,才能将理论切实的运用。因为它涉及太多内容了,所以一开始是不可能思考的面面俱到的,做得多了,将它们变作一种本能思考,才是最好的办法。

      我的第一个虚拟app名叫酒友,做的第一个界面就是它的主页。当时花了很多的时间去思考,也体验了很多酒类app去借鉴,设计出来之后自我感觉良好,但在陆陆续续把其他界面补全之后才发现,设计生涯第一个界面真的是最丑的。

      关于设计规范,我按照自己的理解把它分为两种。一种是系统的总体设计规范,比如苹果的IOS系统就有自己的设计规范。一种是单独产品的设计规范,是设计师在设计某一产品时需要去确定的只应用于该款产品的设计规范,或者换句话说是确定这款产品的总体风格。这一节主要谈一谈第二种。

      设计规范包括了许多细节,一些是在用户体验时能直观感受到的,而一些不能。但它们都是为了一个目标而存在,那就是保证一致性,简单说就是保持风格统一。

      我们先来说说主色的选择。就拿我的酒友来说,这款app旨在为爱酒人士提供一个可以自发组织线下品酒交流聚会的平台,算是一款交友app。但我一开始就把它定位为用户体量小但身价更高的产品,其注册需要进行资格考评,并有已注册的会员提供的邀请码。这样做的目的是保证该app的用户都是真正的爱酒人士。所以为这样一款app设计UI时,它的主色选择我第一个想到的是紫色,高贵而神秘。当时也有考虑过选用绿色,但绿色和酒类的偏红色调有点相冲,所以便舍弃了。

      请注意,这里主色的选择是由产品定位决定的,并不是由产品性质决定的。这个其实都可以,比如同样是交友类的产品,微信主色为绿色,而QQ主色却是蓝色;电商类的产品,当当依然选绿色为主色,而淘宝选择橙红为主色。我个人认为主色的选择是灵活的,没有一个固定的套路(说不定就是公司老大拍脑门确定的),只要选择的颜色不会亮瞎用户的双眼,也不会完全的让用户产生体验上的错觉(比如天气app整个大红主色是要闹啥?),就基本没什么问题。

      主色确定以后,要根据主色进行配色,挑选辅助色,点缀色等。相信大家都有过这种体会:有时打开一个游戏,会感觉它的画面看上去很舒服,很和谐。这很大一部分要归功于配色。而杀马特之所以给人很low的感觉,也是它的颜色搭配太冲,太不和谐。其实现在有很多配色的书籍,如果实在不懂配色,可以拿书籍做参考。我认为配色的能力算是审美能力的一部分,它是可以逐渐锻炼上去的,多去留意身边的配色之美。当在某些照片、图片中见到一些让我们感到很舒服的配色时,截图保存,再到PS里用吸管吸一吸,查看一下,再记录下来,这样当我们下次进行配色时就可以拿来进行参考。而要真正去学习配色,我感觉还是有一定难度的,可能还要看天赋。从最简单的色彩组成,到一些色彩心理学,知识点很多。

      颜色暂且说到这里。在设计规范中,除去颜色是可以比较直观的在第一时间影响用户的体验之外,还有一个,那就是间距大小和间隔方式。在间距中,又以边距最为重要。如果一款产品的每个界面,都采用不同大小的边距,那后果是很致命的。在之前的章节中也说过,用户在体验时,需要保持一致性。一致性是较大的一个概念,不仅仅体现在边距统一上。但单就边距统一来说,它可以保证用户在使用产品时,基本不会产生:“我刚刚用的是同一个产品吗?”的疑问。如果边距不统一,在切换界面时,尤其是一些产品会要求频繁的切换时,会让用户在视觉上产生错乱,相信我,这种不一致性很影响用户体验。

      各内容的间距大小、每个界面中不同类区域的间隔方式的不同,同样会影响一致性,道理和上段所说是一样的。所以在制定设计规范时,请明确边距大小和主要的间隔方式,间距的大小有时无法在最一开始就确定,那么在后期也要进行统一。

      在谈到边距那一段,可能有的读者会注意到,我有用到一个词:基本(它可以保证用户在使用产品时,基本不会产生:“我刚刚用的是同一个产品吗?”的疑问)。为什么是基本?因为还有其他影响因素。比如各类互动元件的样式。在同一款app中,我们尽量把所有按钮的样式进行统一(如长宽比、圆角大小等)。一般来说,按钮(默认未触碰状态)的设计有两种:一为颜色填充整个按钮,提示文字基本都是白色(类似面性图标);二为线框版的按钮,提示文字用主色或其他配色(类似线性图标)。那么在设计处于同一状态的各个按钮时,请尽量确保它们属于相同的类型。下两图均选自豆瓣app。

按钮控件(偏面性)


按钮控件(偏线性)

      同时,文字的字号大小和选色也是需要统一的。首先,字号的大小可能同样无法在前期完全确定(因为不可能在所有界面中只有一个大小的字号),但也要尽量去确定。在《简约至上-交互设计四策略》中,有一个策略是“组织”,我觉得它同样适用于字号大小的确定。在前期规划时,明确页面中不同内容的优先级,即进行优先级的分类(也就是组织)。

      比如,在一个呈现文章列表的页面,其中的文字优先级大体可以这么分:导航栏标题文字>文章标题文字>内容摘要文字>作者ID文字。在分好优先级后,并不是按照这个优先级依次降低字号大小。试想当优先级排序太多时,这种依次降低字号大小的做法必然导致过大的最高优先级(或者过小的最低优先级,这种更糟糕),所以必须考虑文字选色的因素再进行字号大小的调整。先通过优先级的排序大体确定字号上下限(一般20px以下的字就很不好看了),然后确定中间的一些字号。

      我个人认为所有界面有3-4个不同大小的字号就可以了,如果3-4个字号无法满足优先级排序(或者同一优先级下需要再次划分先后),那就要通过颜色的改变细分优先级。通常低优先级的字可以改为深灰色(#999999)或浅黑色(#666666)。总而言之,在确保文字字号和选色的整体一致性下,保证内容传达的优先级。

      关于设计规范我想说的大概就这么多,写的有点乱了。下一节聊一聊主页设计时的感悟。

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

推荐阅读更多精彩内容

  • 使用sketch最重要的一点是设计好控件的规范。 为做好设计规范需要对色彩进行编号,比如:color_a”_1,c...
    youyeath阅读 26,160评论 2 237
  • iOS 9设计规范 中文版 完整版译者注:本文译自苹果官方人机界面指南 iOS Human Interface G...
    海宁Hennie阅读 13,283评论 2 60
  • 一个女孩身处阁楼之中,每天望着远处的夕阳。夕阳穿过阁楼的窗户,整个房间洒满了金粉,只可惜这层金粉是暗金色的。女孩...
    hi简小一阅读 365评论 0 0
  • 外地人为什么要来到上海这个繁华的大都市中?因为这里的社会治安好于其他的城市,晚上走在五彩缤纷的霓虹灯下,不会...
    hesiting阅读 333评论 2 2
  • 作为一个人要有足够强大的内心才能去接受生命中带给你的不堪和痛苦,这是小时候妈妈常和我说起的一句话,那时候...
    原来是Catherine阅读 453评论 1 2