設(shè)計(jì)中的一致性會(huì)在無形之中使你的設(shè)計(jì)效果更加優(yōu)秀获枝，也更易于用戶使用。它為用戶提供了足夠的空間去按著你要要的方式來體驗(yàn)?zāi)愕脑O(shè)計(jì)逢唤。

對(duì)于一致性來說，在某些些情況下涤浇，要理解并實(shí)踐它幾乎是無需傷腦的事情鳖藕，而在其他情況下，理解起來可能會(huì)有點(diǎn)復(fù)雜只锭。簡(jiǎn)單來說著恩，一致性是交互設(shè)計(jì)中的一種基本規(guī)范，它涉及到一份設(shè)計(jì)中的所有元素蜻展，它能夠用在一場(chǎng)活動(dòng)方案的策劃中页滚，也能夠用在獨(dú)立品牌的設(shè)計(jì)中，總之就是要?jiǎng)?chuàng)建出一個(gè)可用性高而又統(tǒng)一協(xié)調(diào)的產(chǎn)品铺呵。下面的這些例子我們要特別注意裹驰，因?yàn)槊恳粋€(gè)品牌在一致性和可用性設(shè)計(jì)方面都是佼佼者。

1片挂、主色幻林、次色以及整體的色調(diào)

為何關(guān)于如何創(chuàng)建一個(gè)優(yōu)秀的調(diào)色板有如此多的資料？這是因?yàn)轭伾軌蜃鳛閭鬟f品牌效應(yīng)的關(guān)鍵視覺因素之一音念。

一個(gè)特殊的顏色標(biāo)識(shí)符可以快速的告訴用戶你是誰沪饺。想想這個(gè)世界中的那些大品牌——Coca-Cola， Facebook闷愤，T-Mobile 整葡，它們無一不具有獨(dú)特的品牌色。如果沒有這些顏色讥脐，你還能認(rèn)出他們嗎遭居？

另外啼器，使用好顏色也可以幫助用戶在使用你的網(wǎng)站過程中始終知道他們是不是在正確的位置。試想如果每個(gè)點(diǎn)擊動(dòng)作都把你帶向一個(gè)使用新色調(diào)的頁(yè)面俱萍，你還會(huì)疑惑自己究竟是不是在正確的地方嗎端壳？

為了創(chuàng)建一個(gè)非常棒的調(diào)色板，你應(yīng)該先挑選出一個(gè)主要色枪蘑，然后使用色彩理論添加一到兩個(gè)次要色损谦。再針對(duì)每種顏色設(shè)定一組樣式和使用規(guī)則，在之后的設(shè)計(jì)中堅(jiān)持使用這些規(guī)則便能保證你在色彩上的一致性岳颇。

2照捡、字體大小、間距和位置

如同顏色應(yīng)該是基于一定樣式規(guī)則的調(diào)色板话侧，字體也是需要設(shè)定規(guī)則的栗精，而且思路也是一樣的。

（1）選擇一個(gè)主要字體和大小掂摔。

（2）選擇次要字體和大小术羔。

相比于顏色來說，字體的設(shè)置規(guī)則可能會(huì)稍微復(fù)雜一些乙漓。 對(duì)于 web 端的樣式風(fēng)格來說级历，你應(yīng)該使用 CSS 來設(shè)置元素的大小，間距和位置叭披，以便每個(gè)標(biāo)簽（如h1寥殖，h2，h3涩蜘，body等）調(diào)用正確的屬性值嚼贡。

在一個(gè)相對(duì)固定的位置顯示的字體，如導(dǎo)航中中的字體同诫，應(yīng)該始終保持一致性粤策。如果每個(gè)導(dǎo)航元素都采用不相同的字體，用戶將會(huì)感到相當(dāng)?shù)睦Щ笪蠼选＿@種一致性規(guī)則應(yīng)該貫穿整個(gè)網(wǎng)站叮盘，所有相似的項(xiàng)目中應(yīng)該使用相同的字體形式。

3霹俺、元素的尺寸大小和關(guān)系

你設(shè)計(jì)的界面元素尺寸有多大柔吼？所有的按鈕都是一樣大嗎？標(biāo)題和圖片大小又是如何丙唧？

元素的大小應(yīng)該由其風(fēng)格決定愈魏，同一元素尺寸大小應(yīng)該保持一致。

元素使用一致的尺寸大小，并且不同元素間的關(guān)系也保持一致培漏，便能幫助用戶理解你在設(shè)計(jì)上所使用的一致性模式溪厘，并創(chuàng)建出一個(gè)流暢的視覺觀感，達(dá)到一種和諧而平衡的效果北苟。

4桩匪、間距留白

跟元素的尺寸大小同等重要的還有元素間的留白打瘪。沒有什么比一個(gè)元素看起來毫無任何組織和規(guī)則能更分散人們的注意力——比如一些照片重疊而其他的則互相之間留有大量的間距友鼻。

創(chuàng)建并堅(jiān)持于一種通用的留白規(guī)則的最好方法是使用柵格系統(tǒng)，該系統(tǒng)中那些無形的線條將幫助你決定在哪里放置以及如何放置一個(gè)元素闺骚，從而使得每一個(gè)像文本彩扔、按鈕、圖片這樣的獨(dú)立元素都能夠表現(xiàn)的十分協(xié)調(diào)僻爽。

在你考慮留白設(shè)計(jì)時(shí)虫碉，一定不能忘了去檢查在垂直和水平方向上的一致性。既要留意那些相似元素的關(guān)系也不要疏忽那些不同元素間的關(guān)系胸梆。

5敦捧、跨媒介的視覺效果

品牌的視覺效果，比如平面圖和插畫碰镜，都應(yīng)該兼容于不同媒介兢卵。無論你的設(shè)計(jì)是面向一個(gè)網(wǎng)站或者宣傳手冊(cè)，廣告牌或社會(huì)化媒體绪颖，品牌的視覺效果都不應(yīng)該隨媒介的變化而改變秽荤。?

這通常涉及到要使用一組通用的圖片處理方式。有些品牌對(duì)于如何正確的傳達(dá)視覺效果會(huì)有一些明確的細(xì)則——比如色彩疊加或者水印效果以及圖片長(zhǎng)寬比設(shè)置等等柠横。不管你要設(shè)計(jì)的樣式究竟如何窃款，都要牢記的一點(diǎn)就是不管將來把它放在哪個(gè)媒介上，它都應(yīng)該正常的傳達(dá)出應(yīng)有的效果才對(duì)牍氛。

為了最有效的做好這項(xiàng)工作晨继，你最好創(chuàng)建一個(gè)可視化的圖像集，收集大量的高質(zhì)量搬俊，高分辨率的圖像以方便你的重復(fù)使用紊扬。

6、工作自然的用戶模式

你的設(shè)計(jì)應(yīng)該跟現(xiàn)有類似的設(shè)計(jì)按著相同的方式發(fā)揮作用悠抹，并遵循那些公認(rèn)的用戶模式珠月。設(shè)計(jì)師們往往想要做些違背事物自然規(guī)律、與眾不同的事情楔敌，你千萬不要掉入這個(gè)陷阱啤挎。

如果一個(gè)網(wǎng)站或者應(yīng)用程序亦或是任何印制元素能按著用戶期待的方式工作，那么他們之間便能輕而易舉的產(chǎn)生交互。這因?yàn)閭€(gè)時(shí)候庆聘，用戶本身清楚的知道自己要做什么以及該如何達(dá)到目標(biāo)胜臊，而設(shè)計(jì)本身則變?yōu)橐恢粺o形之中指引用戶方向的手（其實(shí)這也正應(yīng)該是一個(gè)設(shè)計(jì)師的真實(shí)目標(biāo)才對(duì)）。

這里有四種類型被普遍接受的設(shè)計(jì)模式值得我們來思考:

（1）內(nèi)容模式：設(shè)計(jì)樣式和內(nèi)容的情感語氣以及你的品牌伙判。

（2）標(biāo)記模式：在設(shè)計(jì)整個(gè)網(wǎng)站頁(yè)面時(shí)象对，你需要用到的 HTML 和 CSS 。

（3）設(shè)計(jì)模式：每一個(gè)元素的外觀和所有相關(guān)的風(fēng)格宴抚。

（4）用戶模式：用戶如何與設(shè)計(jì)元素勒魔，如按鈕、菜單或圖標(biāo)產(chǎn)生交互菇曲。

7冠绢、一致的界面元素

雖說這不是粘性導(dǎo)航，但是思路相似常潮。

對(duì)于你的網(wǎng)站來講弟胀，其中的每一個(gè)交互動(dòng)作和界面元素應(yīng)該以同樣的方式工作。

（1）鏈接直接在當(dāng)前標(biāo)簽頁(yè)打開或在新的標(biāo)簽頁(yè)中打開（為每個(gè)鏈接選擇一個(gè)相同的打開方式）喊式。

（2）按鈕自始至終采用相同的顏色孵户。

（3）導(dǎo)航位置固定且選項(xiàng)不變。

（4）頁(yè)腳和側(cè)邊欄應(yīng)持有一個(gè)特定的位置和大小(不應(yīng)使頁(yè)腳在一個(gè)頁(yè)面上巨大而在另一個(gè)頁(yè)面很胁砹簟）夏哭。

（5）所有圖標(biāo)易于識(shí)別，且其指向符合用戶的預(yù)期贸诚。

（6）可點(diǎn)擊的元素應(yīng)該總是可點(diǎn)擊的（如有鏈接的圖片）方庭。

上班列出的這幾項(xiàng)展示了所有你在考慮用戶粘性和網(wǎng)站可用性時(shí)需注意的一些細(xì)節(jié)。一定要記住酱固，如果你允許一個(gè)元素能執(zhí)行一個(gè)動(dòng)作械念，元素本身的樣式和交互動(dòng)作就應(yīng)該是統(tǒng)一的。

結(jié)論

設(shè)計(jì)上的一致性能夠創(chuàng)造出符合用戶心理模型的產(chǎn)品結(jié)構(gòu)运悲。它也能創(chuàng)建一個(gè)有助于提升產(chǎn)品可用性龄减，用戶能夠理解并愿意與之交互的框架。

對(duì)每個(gè)項(xiàng)目來講班眯，一致性開始于一些列的規(guī)則和樣式指南希停。即使你是單兵作戰(zhàn)，也一定要先創(chuàng)建出一套規(guī)則署隘，指出在設(shè)計(jì)中該如何使用顏色宠能、字體、尺寸磁餐、間距违崇、界面元素以及交互動(dòng)作等等。這種做法將會(huì)加快你的設(shè)計(jì)進(jìn)程并讓你設(shè)計(jì)出更具可用性的好設(shè)計(jì)。

譯自：https://designshack.net/articles/graphics/7-tips-for-designing-consistency

如果喜歡我的文章羞延，請(qǐng)點(diǎn)個(gè)??渣淳；如果有任何意見或看法，請(qǐng)留下您的評(píng)論伴箩。更歡迎各位持續(xù)的關(guān)注入愧，謝謝！