原文:Medium點擊這里
標(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)格指南資源:
聲音和語調(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)造一致性瓣喊,這樣可以增強可用性和帶來更多喜悅坡慌。