这篇译文来自Invision团队免费提供的系列课程:设计师如何与开发者合作。之前的译文请查看:
设计是如何与开发者合作(二):从哪里开始?需要询问开发者的问题
设计师如何与开发者合作(三):加强团队协作:需要询问开发者的问题2
一致性对用户和开发者都很重要
设计既是艺术与科学的结合体。你在这两方面都很擅长的话,你创造的产品就会更为优秀。
有很多办法提升你在艺术方面的技能。今天我们要谈论的是如何提高网页设计的科学性。
维基百科将科学定义为“调查现象,获取新知识或者纠正整合已存在知识的结合体”。同时“用术语描科学,它是一种基于经验或者可测量的数据,受到具体的推理原则的约束的调查方法”
从“科学地设计网页”这个角度来说,我们需要经常询问这个问题:为什么要反对已经被公认为有效的原则?
这样听起来很难理解,让我举例说明一下。
开发UI时,你需要根据你所属的产品的生态系统下的一些基本规则来做出设计决策。这些规则可以基于已经建立的通用法则或产品在开发过程中的最佳实践方法来建立。或者你可以作为架构师来构建它们。
比如,在UI设计中,图标往往有其约定俗成的含义。比如下面这组图标,你一看就知道是什么意思。
你所做的任何设计决策,都应该像你选择使用何种icon时那样,根据现在已经存在的某种联系来决定。
你的产品生态系统中可能有许许多多的规则或原则。某种特定的颜色在产品中代表什么意思?是否有自定义图标库?在某些行为发生后需要设计什么动画?这些都是你需要为你的产品设定的规则。
交给你一个挑战:努力为你的产品创定规则。
在你设计的时候,不断地交叉检查这些规则。并且对你之前设计的内容进行规则检查,看看有什么不一致的地方。
不断问自己一个问题“我为什么要这样做?”
比如:
-为什么我使用双箭头来表示下一张幻灯片?我有没有在某些地方改用了单箭头?这些行为一致吗?
-为什么这个控件的边框描边是10px?我有没有在别的空间上使用不同的描边数值?我需要两种不同的数值吗?还是说我最好统一一下?
-为什么这个副标题我用的是17px?我有没有在类似的地方用18px?我真的需要拥有17px和18px两种规格吗?
-为什么在类似的情况下,我这里的间隔设为10px,那里的间隔却设成了20px?我有一个关于元素间隔的规则吗?
-为什么我的这个侧边栏的背景用了灰色遮罩?在类似的情况下,我用的是一样的遮罩吗?
记住:不断问自己为什么。
程序员是非常注重逻辑的。如果你给他们的交付物违反了某些规则(不关你是有意还是无意的),他们要么会给你打电话,要么会编写本不必要的代码。这两种情况都是在浪费时间。
你也许会想,如果我要不断质疑自己做的东西,那我会丧失想象力并且最终打断我的设计过程。
这并不会让你束手束脚,相反,它可以帮助你找出可以适用于某一类情况的元素的最好方式。
同时要记住,你不应该尝试一次定义所有的规则。
事实上,这并没有改变你的设计过程。如果你的工作流程是在ps中先设计好一个主页,再根据它设定内页的外观,那是没什么问题的。
当你急需工作的时候,你需要开始比较,你现在的工作是否和之前的页面的元素相一致?问上面我列出的那些问题或类似的问题。这可以让你的设计自动地帮你制定规则。
你不需要一开始就知道你想要每个段落都有一个20px的下边距,但是当你发现这种设置在多个条件下都能呈现很好的效果时,那就把它变成规则。现在你已经知道有这么一条规则了,带着它审视所有的页面,确保它们都遵循了这个规则。并且在以后的类似情境下使用这个规则。
看到了吗?设计并不难。
利用设计规范(Style guide)来组织你的设计
设计规范可以帮助你方便地使用规则。有许多不同的办法制定设计规范.但不管怎么说,它们都至少包含颜色,字体,控件等将在整个设计过程中重复使用的元素。
我通常会深入挖掘设计规范,多写一些元素的简要说明。这可以帮助我回答“我为什么要在这里使用这个特殊元素呢”。并且保持一致性。
设计规范也可以运用于设计软件中。在sketch中,你可以为元素创建范例并重复使用。
编码中有个词叫DRY(Don't Repeat Yourself),意思是不要重复你自己。用到这里也是合适的。你已经创建好了你想要的侧边栏样式,背景,颜色,边框,阴影,文字都已经完美了,为什么还要以后再设置一次呢?你只要将这些信息简化为一个符号或对象样式,储存下来,以后就可以重复用了。
搞清楚你的规则并重复使用他们,这将大大加快你的设计过程。
规则与一致性带来的好处
在本节中,我们一直在谈论科学和逻辑背后的设计。这些东西本质上是为了保持代码的简洁清晰和帮助开发者减小工作量。从长远来看,这些工作最终会帮助提升用于体验。
不管我们是否意识到这一点,作为人类,我们总是习惯于对系统和一致性作出回应。
对用户而言,一个规则严谨并且一致性强的网站会比一个结构随意的网站体验更好。用户虽然意识不到这些规则和一致性的存在,但是他们会不自觉地受到影响。
你也听说过客户想要一个“专业”且“干净”的设计吧?这正是规则与一致性能够带来的感受。
在设计过程中时刻想着规则——它们是为开发而设计的基石之一。没有什么能比规则更能同时提升用户体验与基础代码了。在下个项目中努力尝试这样做,你会得到很大的成长。
小结
-让你的设计更有逻辑
-定义一组你所使用的的元素和模式的规则,并在整个网站的设计中贯穿他们。
-当你在设计过程中定义这些规则时,记得回过头来看看之前已完成的页面有没有符合新的规则。
-不断问自己:“为什么我这样设计?”从而避免在相似的情境下使用两种不同的设计
-创建设计规范来组织你的规则。
-从心里认同,在一致性上花费的苦功最终会提升整个用户体验和代码库。