设计师如何与开发者合作(四):一致性(Consistency)的重要性

这篇译文来自Invision团队免费提供的系列课程:设计师如何与开发者合作。之前的译文请查看:

设计师如何与开发者合作(一):什么是为开发而设计?

设计是如何与开发者合作(二):从哪里开始?需要询问开发者的问题

设计师如何与开发者合作(三):加强团队协作:需要询问开发者的问题2

一致性对用户和开发者都很重要

设计既是艺术与科学的结合体。你在这两方面都很擅长的话,你创造的产品就会更为优秀。

有很多办法提升你在艺术方面的技能。今天我们要谈论的是如何提高网页设计的科学性。

维基百科将科学定义为“调查现象,获取新知识或者纠正整合已存在知识的结合体”。同时“用术语描科学,它是一种基于经验或者可测量的数据,受到具体的推理原则的约束的调查方法”

从“科学地设计网页”这个角度来说,我们需要经常询问这个问题:为什么要反对已经被公认为有效的原则?

这样听起来很难理解,让我举例说明一下。

开发UI时,你需要根据你所属的产品的生态系统下的一些基本规则来做出设计决策。这些规则可以基于已经建立的通用法则或产品在开发过程中的最佳实践方法来建立。或者你可以作为架构师来构建它们。

比如,在UI设计中,图标往往有其约定俗成的含义。比如下面这组图标,你一看就知道是什么意思。

就算我不标注,你也知道它们是什么意思吧?

你所做的任何设计决策,都应该像你选择使用何种icon时那样,根据现在已经存在的某种联系来决定。

你的产品生态系统中可能有许许多多的规则或原则。某种特定的颜色在产品中代表什么意思?是否有自定义图标库?在某些行为发生后需要设计什么动画?这些都是你需要为你的产品设定的规则。

交给你一个挑战:努力为你的产品创定规则。

在你设计的时候,不断地交叉检查这些规则。并且对你之前设计的内容进行规则检查,看看有什么不一致的地方。

不断问自己一个问题“我为什么要这样做?”

比如:

-为什么我使用双箭头来表示下一张幻灯片?我有没有在某些地方改用了单箭头?这些行为一致吗?

-为什么这个控件的边框描边是10px?我有没有在别的空间上使用不同的描边数值?我需要两种不同的数值吗?还是说我最好统一一下?

-为什么这个副标题我用的是17px?我有没有在类似的地方用18px?我真的需要拥有17px和18px两种规格吗?

-为什么在类似的情况下,我这里的间隔设为10px,那里的间隔却设成了20px?我有一个关于元素间隔的规则吗?

-为什么我的这个侧边栏的背景用了灰色遮罩?在类似的情况下,我用的是一样的遮罩吗?

记住:不断问自己为什么。

程序员是非常注重逻辑的。如果你给他们的交付物违反了某些规则(不关你是有意还是无意的),他们要么会给你打电话,要么会编写本不必要的代码。这两种情况都是在浪费时间。


设定规则,但不意味着你要变成机器人

你也许会想,如果我要不断质疑自己做的东西,那我会丧失想象力并且最终打断我的设计过程。

这并不会让你束手束脚,相反,它可以帮助你找出可以适用于某一类情况的元素的最好方式。

同时要记住,你不应该尝试一次定义所有的规则。

事实上,这并没有改变你的设计过程。如果你的工作流程是在ps中先设计好一个主页,再根据它设定内页的外观,那是没什么问题的。

当你急需工作的时候,你需要开始比较,你现在的工作是否和之前的页面的元素相一致?问上面我列出的那些问题或类似的问题。这可以让你的设计自动地帮你制定规则。

你不需要一开始就知道你想要每个段落都有一个20px的下边距,但是当你发现这种设置在多个条件下都能呈现很好的效果时,那就把它变成规则。现在你已经知道有这么一条规则了,带着它审视所有的页面,确保它们都遵循了这个规则。并且在以后的类似情境下使用这个规则。

看到了吗?设计并不难。

利用设计规范(Style guide)来组织你的设计

设计规范可以帮助你方便地使用规则。有许多不同的办法制定设计规范.但不管怎么说,它们都至少包含颜色,字体,控件等将在整个设计过程中重复使用的元素。

我通常会深入挖掘设计规范,多写一些元素的简要说明。这可以帮助我回答“我为什么要在这里使用这个特殊元素呢”。并且保持一致性。

对元素添加描述文字有助于明确使用情境

设计规范也可以运用于设计软件中。在sketch中,你可以为元素创建范例并重复使用。

编码中有个词叫DRY(Don't Repeat Yourself),意思是不要重复你自己。用到这里也是合适的。你已经创建好了你想要的侧边栏样式,背景,颜色,边框,阴影,文字都已经完美了,为什么还要以后再设置一次呢?你只要将这些信息简化为一个符号或对象样式,储存下来,以后就可以重复用了。

搞清楚你的规则并重复使用他们,这将大大加快你的设计过程。

规则与一致性带来的好处

在本节中,我们一直在谈论科学和逻辑背后的设计。这些东西本质上是为了保持代码的简洁清晰和帮助开发者减小工作量。从长远来看,这些工作最终会帮助提升用于体验。

不管我们是否意识到这一点,作为人类,我们总是习惯于对系统和一致性作出回应。

对用户而言,一个规则严谨并且一致性强的网站会比一个结构随意的网站体验更好。用户虽然意识不到这些规则和一致性的存在,但是他们会不自觉地受到影响。

你也听说过客户想要一个“专业”且“干净”的设计吧?这正是规则与一致性能够带来的感受。

在设计过程中时刻想着规则——它们是为开发而设计的基石之一。没有什么能比规则更能同时提升用户体验与基础代码了。在下个项目中努力尝试这样做,你会得到很大的成长。

小结

-让你的设计更有逻辑

-定义一组你所使用的的元素和模式的规则,并在整个网站的设计中贯穿他们。

-当你在设计过程中定义这些规则时,记得回过头来看看之前已完成的页面有没有符合新的规则。

-不断问自己:“为什么我这样设计?”从而避免在相似的情境下使用两种不同的设计

-创建设计规范来组织你的规则。

-从心里认同,在一致性上花费的苦功最终会提升整个用户体验和代码库。

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

推荐阅读更多精彩内容