用戶界面設(shè)計(jì)原則

“設(shè)計(jì)絕不是簡(jiǎn)單的拼合,排列甚至編輯;設(shè)計(jì)是通過闡明,簡(jiǎn)化、明確、修飾,使之莊嚴(yán),有說服性,甚至帶一點(diǎn)趣味性,來賦予其價(jià)值及意義。”——保羅·蘭德(Paul Rand)

1.“明確”應(yīng)該放在設(shè)計(jì)的首要位置

對(duì)任何界面而言,“明確”是首要的也是最重要的一點(diǎn)。人們必須能夠辨別出它是什么,才能有效地使用你設(shè)計(jì)出來的界面。設(shè)計(jì)師們?cè)谠O(shè)計(jì)的時(shí)候,要去關(guān)心人們?yōu)楹螘?huì)使用這個(gè)應(yīng)用,去了解什么樣的界面是能幫助他們與之互動(dòng)的,去預(yù)測(cè)人們?cè)谑褂脮r(shí)的行為并能

夠成功地反饋給他們。這樣做了之后,界面中再出現(xiàn)的需要推理的地方以及延時(shí)反應(yīng)都是可以被容忍的,但是絕對(duì)不能出現(xiàn)讓用戶困惑的地方。明確的界面能夠給使用者進(jìn)一步操作的信心。一個(gè)應(yīng)用就算它有一百?gòu)堩?yè)面,但是每一頁(yè)都是清晰明確的,它也遠(yuǎn)勝于只有

一頁(yè)卻不知所云的應(yīng)用。

2.界面是為了交互而存在

界面的存在是為了讓人和我們的世界產(chǎn)生互動(dòng)。它可以幫助人們厘清,明白,使用,展示相互之間的關(guān)系,他能夠把我們聚集在一起可以將我們隔開,實(shí)現(xiàn)我們的價(jià)值并為我們服務(wù)。界面設(shè)計(jì)不是藝術(shù)設(shè)計(jì)。界面設(shè)計(jì)也不是用來標(biāo)榜設(shè)計(jì)師的個(gè)人。界面的功用和效果

是可以被測(cè)量的。但是它們不是功利性的。優(yōu)秀的界面不但能夠讓我們做事有效率,還能夠激發(fā)、喚起和加強(qiáng)我們與這個(gè)世界的聯(lián)系。

3.不惜一切代價(jià)吸引用戶注意

我們生活在一個(gè)容易被打擾的世界。我們很難在一個(gè)不被干擾的環(huán)境中靜下心來閱讀。用戶注意力是非常寶貴的。所以,不要在應(yīng)用的周圍丟一些容易令人分心的東西……

要把設(shè)計(jì)這個(gè)畫面最初的目的時(shí)刻放在首位。如果用戶正在閱讀,那先讓他們專心的讀完之后再?gòu)棾鰪V告(如果一定要放廣告的話)。尊重用戶的注意力,不僅僅會(huì)讓用戶感到高興,你本身的設(shè)計(jì)也會(huì)收獲好結(jié)果。如果在界面設(shè)計(jì)中,用戶使用是首要目標(biāo)的話,那么

尊重用戶的注意力是先決條件。要不惜一切代價(jià)保護(hù)它。

4.讓用戶掌控一切

人們會(huì)在自己能掌控的環(huán)境中感覺最舒心,最放松。設(shè)計(jì)草率的軟件應(yīng)用不但剝奪了這種舒適性,還會(huì)迫使人們面對(duì)毫無預(yù)期的互動(dòng),困惑的流程和意外的結(jié)果。通過定期的梳理系統(tǒng)狀態(tài),描述因果關(guān)系(如果你這個(gè)做了,就會(huì)被體現(xiàn)出來),并且在每一步操作都給

出提示,讓用戶感覺每一步操作都在他的掌控中。不要擔(dān)心說,這不是“顯而易見”的嗎?因?yàn)槭澜缟蠌膩頉]有顯而易見的事情。

5.直觀操作是最好的

好的界面是無意識(shí)的,就像我們?cè)趯?shí)際生活中直接操作的感覺一樣。這并不是那么容易實(shí)現(xiàn)的,并且隨著元素和資訊的不斷增加,這就變得更難,所以我們?cè)O(shè)計(jì)界面來幫助我們?nèi)ズ退鼈兓?dòng)。要想在畫面上添加一個(gè)不必要的東西是非常簡(jiǎn)單,例如,加個(gè)華麗的按鈕,

鑲邊,圖形,選項(xiàng),偏好,窗口,附件和其它一些冗余的東西。以至于我們一頭扎進(jìn)處理界面元素細(xì)節(jié)的怪圈中而忽視了最重要的事情。取而代之的,你應(yīng)該抓住直觀操作這個(gè)最初的目標(biāo)……界面設(shè)計(jì)要盡可能的簡(jiǎn)潔,更多的可識(shí)別的慣用自然手勢(shì)。理想情況下,界

面會(huì)變得非常細(xì)微,用戶在會(huì)有直觀操作的感覺。

6.一個(gè)頁(yè)面一個(gè)主要操作

我們?cè)O(shè)計(jì)的每一個(gè)畫面,都應(yīng)給用戶提供有實(shí)際意義的單一操作。這一點(diǎn),令界面更快上手、易于操作,如果有需要的話,新增或擴(kuò)充也更簡(jiǎn)易。如果一個(gè)畫面上有兩個(gè)或兩個(gè)以上的主要操作,瞬間就會(huì)讓用戶感到困惑。就像寫文章要有單一的以及強(qiáng)有力的論點(diǎn)一樣

,界面設(shè)計(jì)中的單個(gè)畫面,也都應(yīng)該有單一且明確的操作,這是它存在的理由。

7.讓次要操作在次要位置

畫面在包含一個(gè)主要?jiǎng)幼鞯耐瑫r(shí),可以有多個(gè)次要?jiǎng)幼鳎M量不要讓它們喧賓奪主!就像你寫一篇文章的目的,是為了讓人可以閱讀可以了解,而不是為了人們能夠把它轉(zhuǎn)載在社交網(wǎng)絡(luò)上……讓次要得動(dòng)作放在次要的位置,削減它們的視覺沖擊力,或是在主要?jiǎng)幼?/p>

完成后再顯示它們。

8.提供自然而然的下一步操作

很少有交互是故意被放在最后的,所以要為用戶精心設(shè)計(jì)交互的下一步操作。你要預(yù)期用戶下一步的交互是怎樣的,并且通過設(shè)計(jì)將其實(shí)現(xiàn)。就像我們的日常談話,要為深入交談開一個(gè)好頭。當(dāng)用戶已經(jīng)完成要做的操作后,別讓它們不知所措的停留在那……提供自然

而然的下一步,幫助他們完成操作。

9.界面外觀遵循用戶行為

人總是對(duì)符合期望的行為最感舒適。當(dāng)某人或某件事的行為始終按照我們所期望的那樣去進(jìn)行時(shí),我們會(huì)感覺到和他們之間的關(guān)系不錯(cuò)。因此,設(shè)計(jì)出來的元素,看起來,應(yīng)該像它們本身特征一樣。在具體操作中,這意味著,用戶只要看到這個(gè)界面元素,就應(yīng)該能猜

測(cè)出這個(gè)元素是做什么的。如果看起來是個(gè)按鈕,它就應(yīng)該有按鈕的功能,不要在基本的交互問題上耍小聰明……把你的創(chuàng)造力留到更高層次的需求上吧。

10.前后一致的重要性

遵循上一規(guī)則,畫面中,視覺元素的外觀不應(yīng)該是一樣的,除非他們的功能相近。如果是功能相同或相近的元素,那么它們外觀就應(yīng)該是類似的,反之,如果元素各自的功能不同,那么它們的外觀也應(yīng)該不同。為了保持一致性,新手設(shè)計(jì)師通常在會(huì)把相同的視覺處理

(重用代碼) 方式用在,應(yīng)該用不同的視覺處理方式的元素上。

11.強(qiáng)烈的視覺層次會(huì)讓效果更好

強(qiáng)烈的視覺層次會(huì)讓畫面有清晰的瀏覽次序。也就是說,當(dāng)用戶每次都用相同的順序?yàn)g覽同樣的東西,微小的視覺層次令使用者不知道哪里才是需要注意的重點(diǎn),最后只會(huì)讓用戶感到困惑和混亂。在不斷變化的設(shè)計(jì)環(huán)境中,保持強(qiáng)烈的視覺層次是很困難的,因?yàn)樗?/p>

元素視覺上的重量是相對(duì)的:當(dāng)所有文字都是粗體,那就沒有所謂的"粗體"了。如果要在畫面中添加一個(gè)視覺強(qiáng)烈的元素時(shí),設(shè)計(jì)者應(yīng)該要重新調(diào)整頁(yè)面上所有元素的重量分配,來達(dá)到強(qiáng)烈視覺層次的效果。大多數(shù)人都不會(huì)注意到視覺重量這一點(diǎn),但它其實(shí)是強(qiáng)化(

弱化)設(shè)計(jì)的最簡(jiǎn)單的方法。

12.巧妙的布局減輕用戶認(rèn)知負(fù)擔(dān)

正如約翰 前田(John Maeda)在他《Simplicity》書中所說的,恰當(dāng)?shù)鼐幣女嬅嫔系脑啬軌蛞陨僖姸啵瑤椭烁涌焖俸?jiǎn)單地理解你設(shè)計(jì)的界面,因?yàn)槟阋呀?jīng)用你的設(shè)計(jì)清楚的說明了她們彼此之間的關(guān)系。用方位和方向上的編排可以自然地將相同的元素聯(lián)系在

一起。通過對(duì)內(nèi)容的巧妙編排,可以減輕用戶的認(rèn)知負(fù)擔(dān),他們不再需要花時(shí)間去思考元素之間的關(guān)聯(lián),因?yàn)槟阋呀?jīng)做好了。不要迫使用戶去思考……用你的設(shè)計(jì)直接呈現(xiàn)給他們看。

13.重點(diǎn)不要總是用顏色來強(qiáng)調(diào)

物體的色彩會(huì)隨光線改變而改變。艷陽高照下與夕陽西下時(shí),同一棵樹,也會(huì)呈現(xiàn)不同的景象。在自然世界中,色彩很容易受環(huán)境影響而改變,所以在設(shè)計(jì)時(shí),色彩不應(yīng)該占很大的比重。作為輔助,我們可以用高亮的顏色,吸引注意力,但這不是區(qū)別這些的唯一方法

。在長(zhǎng)篇閱讀或是長(zhǎng)時(shí)間對(duì)著電腦屏幕的情況下,可以使用柔和的背景,降低亮度,當(dāng)然也可用活潑亮麗的色彩當(dāng)背景,但是要確保適合你的讀者。

14.逐步說明

只在畫面中顯示必要的信息。如果用戶需要作出決定,只要展現(xiàn)足夠的信息供其選擇,然后他們會(huì)到下一頁(yè)去尋找更多的細(xì)節(jié)。避免一次呈現(xiàn)或解釋全部的信息,如果可以的話,將選擇放在后面的畫面展示。這會(huì)使你的界面交互更加清晰。

15.內(nèi)置幫助

在理想的界面設(shè)計(jì)中,「幫助」選項(xiàng)是沒有必要,因?yàn)榻缑娌僮魇怯幸龑?dǎo)性的。「幫助」的下一步,實(shí)際上是,內(nèi)嵌在上下文中的“幫助”,只有在用戶確實(shí)需要的時(shí)候才顯示,平常應(yīng)該是隱藏的狀態(tài)。讓用戶自己去尋求幫助,。重要的是你要保證用戶可以順暢的使

用你的界面。

16.重要時(shí)刻:初始狀態(tài)

第一次使用界面的體驗(yàn)是非常重要的,而這卻常常被設(shè)計(jì)師忽略。為了讓用戶更快的上手,最好在設(shè)計(jì)的時(shí)候保持初始狀態(tài),也就是還沒開始使用過的狀態(tài)。這個(gè)狀態(tài)不是一張空白的畫布……它應(yīng)該要提供一個(gè)方向和指引,令用戶迅速進(jìn)入狀況。在初始狀態(tài)下的互動(dòng)

過程中可能會(huì)存在一些摩擦,一旦用戶了解了規(guī)則,那將會(huì)有很高的機(jī)會(huì)獲得成功。

17.好的設(shè)計(jì)是隱形的

好的設(shè)計(jì)有一個(gè)奇怪的特性,它通常是會(huì)被用戶忽略的。其中的一個(gè)原因是,一這個(gè)設(shè)計(jì)非常的成功,以至于用戶完全專注在他想要達(dá)到的目標(biāo),而不是這個(gè)界面……當(dāng)用戶順利的完成目的,他們會(huì)感到很滿意,并不需要反映任何問題。作為一名設(shè)計(jì)師,這樣會(huì)很困

難……因?yàn)槲覀兒苌偈盏秸娴幕貞?yīng),我們很少知道哪些設(shè)計(jì)是好的。但是優(yōu)秀的設(shè)計(jì)師是滿足于設(shè)計(jì)出好用的界面……并且他們知道滿意的使用者通常是沉默的。

18.從其他設(shè)計(jì)領(lǐng)域下手

視覺,平面設(shè)計(jì),排版,文案,信息架構(gòu)和視覺設(shè)計(jì)……所有這些學(xué)科都是界面設(shè)計(jì)的一部分。他們都是可以被涉獵和研究的。不要企圖跟他們劃分界線,或看不起其他的領(lǐng)域:從學(xué)到學(xué)到很多知識(shí)可以幫助你的工作推動(dòng)你成長(zhǎng),還可以從看似無關(guān)的學(xué)科學(xué)起,接觸

你不熟悉的領(lǐng)域……我們能從出版、編程、書本裝訂 、滑板、消防,空手道中學(xué)到哪些知識(shí)呢?

19.界面的存在是為了被使用

在大多數(shù)設(shè)計(jì)領(lǐng)域,有用戶使用就是界面設(shè)計(jì)的成功。就像是一個(gè)漂亮椅子,雖然漂亮,但坐起來不舒服,用戶就不會(huì)選擇它,它就是一個(gè)失敗的設(shè)計(jì)。因此界面的存在就為了盡可能多的創(chuàng)造好用的環(huán)境讓用戶使用,就像你設(shè)計(jì)了一個(gè)好用的工藝品。設(shè)計(jì)師設(shè)計(jì)作品

如果僅僅是拿來滿足自己的虛榮心,那是遠(yuǎn)遠(yuǎn)不夠的:它必須要被使用!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,321評(píng)論 6 543
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,559評(píng)論 3 429
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,442評(píng)論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,835評(píng)論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,581評(píng)論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,922評(píng)論 1 328
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,931評(píng)論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 43,096評(píng)論 0 290
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,639評(píng)論 1 336
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,374評(píng)論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,591評(píng)論 1 374
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,104評(píng)論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,789評(píng)論 3 349
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,196評(píng)論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,524評(píng)論 1 295
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 52,322評(píng)論 3 400
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,554評(píng)論 2 379

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