設(shè)計原則:一致性

原文:Medium點擊這里

作者:Anton Nikolov

標(biāo)注:2017.04.08 - 6 min read

譯者:Lisa - lisapeng1996@gmail.com 侵刪

設(shè)計原則:一致性

最著名并且最脆弱的設(shè)計原則

一致性是生活中和設(shè)計中最重要的原則崖飘。沒有它我們根本更好的進行工作。即使是最困難的問題,如果你堅持每天攻克它,那么這么問題也將被解決岳枷。

一致性是我們總是喜歡違反的一條設(shè)計原則。我也非常慚愧那樣做了并且不以此為驕傲。在我們跟隨創(chuàng)意和藝術(shù)的時候酣胀,我們常常很輕易地就違反了這個設(shè)計原則奈附。

在設(shè)計領(lǐng)域全度,關(guān)于一致性的話題是巨大的。我會盡我所能在重要的要點將它總結(jié)一下斥滤。這樣我們就能學(xué)習(xí)到如何運用一致性将鸵,并且如何把它運用到我們的設(shè)計中而不違反它。

設(shè)計中一致性是什么

一致性是設(shè)計DNA的一個分子佑颇。一致性設(shè)計是直觀的設(shè)計。它非常的有作用并且能讓世界變得更美好。

長話短說咐低,當(dāng)相似的元素有一致性的外表和相似的功能時夷狰,它的可用性和易學(xué)性會增強。當(dāng)一致性運用到你的設(shè)計中時茬贵,人們將會將知識運用到新的環(huán)境并且能夠快速輕易地學(xué)習(xí)新知識簿透。這樣他們能夠聚焦在執(zhí)行任務(wù),并且不用每次變換環(huán)境的時候都要學(xué)習(xí)產(chǎn)品UI是怎么工作的解藻。

我們?nèi)祟愒跐撘庾R里就喜歡一致性了老充!我們的身體一直在渴求著一致性平衡,所以我們才會變的健康舆逃。我們需要感受那些一致的事物讓我們感覺到安全可靠蚂维。

一致性的好處

用戶能夠更快學(xué)習(xí)怎么使用你的設(shè)計。想象路狮,一些你設(shè)計中一致的元素是字母表中的字母虫啥。一旦,用戶學(xué)會了字母表奄妨,他就能在你的產(chǎn)品中去任何地方涂籽,并且可以在無阻的和你的界面進行交流。

有一個不一致的表面就像是用不同的語言和用戶進行交流砸抛。只有那些高級用戶才能夠完成它們的任務(wù)评雌。要讓它變得簡單并且具有一致性。

一致性能夠消除迷惑直焙!當(dāng)用戶覺得迷惑時景东,下一步將會受阻。我們不想讓我們親愛的用戶那樣覺得奔誓,不是嗎斤吐?

一致性能夠解決時間和金錢!一致性設(shè)計能夠被預(yù)先定義的組件頻繁的使用。這讓設(shè)計師和利益相關(guān)者能夠不用花時間爭論和措,快速的進行決策庄呈。這將會節(jié)省我們將用在構(gòu)建產(chǎn)品的時間并且會有顯著的進步效果。

一致性的四種表現(xiàn)形式

讓我們看一看一致性的四種表現(xiàn)形式派阱,它們在設(shè)計的過程中都需要被格外注意诬留。

視覺一致性

相似的元素是以相同的方式被理解的元素,它會構(gòu)成視覺一致性贫母。它增加了產(chǎn)品的易學(xué)性文兑。字體,大小颁独,按鈕彩届,標(biāo)簽,和相似的元素將會使產(chǎn)品保持視覺一致性誓酒。

功能一致性

相似的控制方式使以相同方式進行操作的控制樟蠕,它會構(gòu)成功能的一致性。它增加了產(chǎn)品的可預(yù)測性靠柑。可預(yù)測性將會讓用戶感覺到安全可靠寨辩。例如,在任務(wù)流中返回的操作應(yīng)該在整個產(chǎn)品中保持一致歼冰。

內(nèi)部一致性

這是你的產(chǎn)品設(shè)計中視覺和功能一致性的集合靡狞。它增加了產(chǎn)品的可用性和易學(xué)性。甚至只要你保持內(nèi)部一致性隔嫡,即使你介紹新功能/頁面甸怕,用戶都能很容易的使用它們。

外部一致性

這種類型的一致性當(dāng)在幾個系統(tǒng)/產(chǎn)品時有設(shè)計一致性才會體現(xiàn)腮恩。這樣梢杭,用戶對一個產(chǎn)品的了解就能夠重復(fù)使用在另一個產(chǎn)品上。是的秸滴,這將會幫助減少很多阻力武契,并且能夠呈現(xiàn)出優(yōu)秀的用戶體驗。

外部一致性的優(yōu)秀案例有Adobe產(chǎn)品的用戶界面荡含。一旦你知道Photoshop時如何使用的咒唆,那么在使用Illustrator和其它產(chǎn)品時就會重復(fù)使用相同的知識。

完成這四種類型的一致性能夠幫助你的產(chǎn)品擁有更強的可用性和更多滿意的用戶释液。

如何變得一致

變得一致的本質(zhì)是能夠很多次重復(fù)使用相同的交互模式或者元素全释,在這基礎(chǔ)上 還能夠幫助用戶完成任務(wù)。

視覺

排版误债,顏色恨溜,留白符衔,柵格找前,大小和位置糟袁。這些元素都需要在一個主要地方被定義然后在你設(shè)計的過程中運用到系統(tǒng)中去。

定義完善的視覺體系躺盛,最重要的視覺元素要比次重要的視覺元素更著重強調(diào)项戴。在整個產(chǎn)品中要使用相同的顏色板。內(nèi)邊距和外邊距需要在相似的元素中保持一致槽惫,比如按鈕周叮,卡片等等。所有元素都要在一定柵格中變得有序界斜,你需要讓所有組件都以一種友好優(yōu)雅的方式呈現(xiàn)仿耽。

擁有一個一致的視覺能夠讓用戶更快的了解系統(tǒng)并且有一個流暢的體驗。你的設(shè)計在使用一致性視覺時也能收獲很好的風(fēng)水各薇。:)

這里有一些很好的設(shè)計風(fēng)格指南資源:

styleguides.io/examples.html

聲音和語調(diào)

你在用戶流中使用的語言和語調(diào)將會影響你的用戶理解你的產(chǎn)品项贺。保持聲音語調(diào)具有一致性,那么就好像只有一個聲音在對用戶說話峭判。我們不想讓他們聽到各種聲音开缎,不是嗎?

如果你想在你的產(chǎn)品設(shè)計中保持一種有趣友好的聲音林螃,那么在所有的錯誤和失敗提示時也用保持這種風(fēng)格奕删。MailChimp就是使用同一種聲音語調(diào)的優(yōu)秀案例。

用相似的模式

那些用我們產(chǎn)品的人可能在以前曾經(jīng)用過類似的產(chǎn)品了疗认。這意味著他們可能已經(jīng)體驗和學(xué)習(xí)過其他的設(shè)計完残,并且知道使用它們的模式了。

我們應(yīng)該利用這個優(yōu)勢横漏,并且把與這相似的模式運用到我們的設(shè)計中去谨设。這樣用戶過程能夠變得更順利,用戶將不用停下來思考“額绊茧,我該如何使用它铝宵?”,他們將能夠直接使用它华畏。

下面是兩個很好的資源鹏秋,它們總結(jié)了很多模式:

移動模式網(wǎng)站? - ?給設(shè)計師和開發(fā)者提供的iOS和安卓屏幕截圖庫

設(shè)計模式網(wǎng)站? - ?它在軟件設(shè)計中有很強的實用性,能提供常遇問題的解決方法庫

彎曲一致性亡笑,但不要打破它

你可能辯解一致性可能會讓用戶覺得厭煩侣夷。如果我們總是希望事物變得一致,那么將不會有創(chuàng)新仑乌。

我們首先需要學(xué)習(xí)它的規(guī)則百拓,然后才能改變它們琴锭。是的,是改變而不是打破衙传!打破一致性意味著打破設(shè)計和用戶體驗决帖。

這對于用戶和機構(gòu)都是一個痛點。設(shè)計的進展將變得遲鈍下來蓖捶。當(dāng)人們花費很多時間在會議室討論什么顏色最適合那個按鈕時地回,大量的錢在消耗掉。每個人都失去了寶貴的時間來做一些早就應(yīng)該做出的決定俊鱼。

設(shè)計者應(yīng)該盡可能的保護和構(gòu)建一致性刻像。

保持事物一致意味著改變將會變得遲鈍。然而并闲,我們需要我們的產(chǎn)品變得可好玩更令人喜悅细睡。我們需要它進化成一個更好的版本。

所以帝火,當(dāng)我們保持一致性時溜徙,該去什么地方創(chuàng)新,運用變化呢购公?

這個秘密就藏在你對用戶的理解中萌京。你所有的設(shè)計都應(yīng)該來自于那個理解。只有你在應(yīng)對用戶需求時宏浩,你才能對已有的一致性設(shè)計做調(diào)整知残。做那些微小的改變將使你的產(chǎn)品進化成更好的版本并且保持一致性。

最后的思考

使你的設(shè)計和你的用戶期望一致比庄。要像了解你的伙伴一樣了解你的用戶求妹。你需要看穿他們的眼睛,讀懂他們的心佳窑。成為他們當(dāng)中的一員制恍。

將一致性和設(shè)計的基礎(chǔ)結(jié)合起來,比如視覺體系神凑,排版净神,可用性模式等等。記住溉委,小改變是好的鹃唯,但是大改變不一定更好!

通過減少不必要的驚喜來創(chuàng)造一致性瓣喊,這樣可以增強可用性和帶來更多喜悅坡慌。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市藻三,隨后出現(xiàn)的幾起案子洪橘,更是在濱河造成了極大的恐慌跪者,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,723評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件熄求,死亡現(xiàn)場離奇詭異渣玲,居然都是意外死亡,警方通過查閱死者的電腦和手機抡四,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,485評論 2 382
  • 文/潘曉璐 我一進店門柜蜈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人指巡,你說我怎么就攤上這事×タ澹” “怎么了藻雪?”我有些...
    開封第一講書人閱讀 152,998評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長狸吞。 經(jīng)常有香客問我勉耀,道長,這世上最難降的妖魔是什么蹋偏? 我笑而不...
    開封第一講書人閱讀 55,323評論 1 279
  • 正文 為了忘掉前任便斥,我火速辦了婚禮,結(jié)果婚禮上威始,老公的妹妹穿的比我還像新娘枢纠。我一直安慰自己,他們只是感情好黎棠,可當(dāng)我...
    茶點故事閱讀 64,355評論 5 374
  • 文/花漫 我一把揭開白布晋渺。 她就那樣靜靜地躺著,像睡著了一般脓斩。 火紅的嫁衣襯著肌膚如雪木西。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,079評論 1 285
  • 那天随静,我揣著相機與錄音八千,去河邊找鬼。 笑死燎猛,一個胖子當(dāng)著我的面吹牛恋捆,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播扛门,決...
    沈念sama閱讀 38,389評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼鸠信,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了论寨?” 一聲冷哼從身側(cè)響起星立,我...
    開封第一講書人閱讀 37,019評論 0 259
  • 序言:老撾萬榮一對情侶失蹤爽茴,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后绰垂,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體室奏,經(jīng)...
    沈念sama閱讀 43,519評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,971評論 2 325
  • 正文 我和宋清朗相戀三年劲装,在試婚紗的時候發(fā)現(xiàn)自己被綠了胧沫。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,100評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡占业,死狀恐怖绒怨,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情谦疾,我是刑警寧澤南蹂,帶...
    沈念sama閱讀 33,738評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站念恍,受9級特大地震影響六剥,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜峰伙,卻給世界環(huán)境...
    茶點故事閱讀 39,293評論 3 307
  • 文/蒙蒙 一疗疟、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧瞳氓,春花似錦策彤、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,289評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至恋沃,卻和暖如春必搞,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背囊咏。 一陣腳步聲響...
    開封第一講書人閱讀 31,517評論 1 262
  • 我被黑心中介騙來泰國打工恕洲, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人梅割。 一個月前我還...
    沈念sama閱讀 45,547評論 2 354
  • 正文 我出身青樓霜第,卻偏偏與公主長得像,于是被迫代替她去往敵國和親户辞。 傳聞我的和親對象是個殘疾皇子泌类,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,834評論 2 345

推薦閱讀更多精彩內(nèi)容