2025-3-25 杰睿
大腦在處理和組織看到的信息時(shí)會(huì)使用一套快捷方法，了解這些方法是設(shè)計(jì)成功的關(guān)鍵要素。本文介紹了十一條有效的設(shè)計(jì)準(zhǔn)則，用形象的圖解幫助讀者更好地理解設(shè)計(jì)準(zhǔn)則在設(shè)計(jì)工作中的運(yùn)用，幫助你利用這些方法更快捷地開(kāi)展設(shè)計(jì)。適合關(guān)注產(chǎn)品設(shè)計(jì)的小伙伴閱讀。
感知力是大腦將不同的信息連接和組織成一個(gè)連貫整體的機(jī)制。例如我們將相似的對(duì)象分組并連接起來(lái)，能夠輕松地區(qū)分出不屬于該組的對(duì)象。
大腦在處理和組織看到的信息時(shí)會(huì)使用一套快捷方法，了解這些方法是設(shè)計(jì)成功的關(guān)鍵要素。
在UI設(shè)計(jì)時(shí)，我們應(yīng)該有意識(shí)地運(yùn)用感知力，用足夠的事實(shí)來(lái)驗(yàn)證設(shè)計(jì)，有依有據(jù)地解釋為什么這個(gè)圖形元素要這樣設(shè)計(jì)？背后的原因是什么？
提升感知力有助于清晰地解釋設(shè)計(jì)方案，避免常見(jiàn)的設(shè)計(jì)錯(cuò)誤，引導(dǎo)我們將設(shè)計(jì)做得更好、更容易理解！
彼此靠近的元素會(huì)被自動(dòng)理解為一組。把它們的位置放得更遠(yuǎn)，會(huì)給人一種這些元素是完全獨(dú)立的個(gè)體的印象。
在UI設(shè)計(jì)中，可以利用鄰近原則將相似的界面元素組合在一起，把控總體布局。
鄰近規(guī)則適用于主導(dǎo)航、卡片、按鈕、內(nèi)容和圖標(biāo)等。我們還可以使用適當(dāng)?shù)牧舭讓⒉煌脑剡M(jìn)一步分開(kāi)，創(chuàng)建一個(gè)層級(jí)更清晰的界面結(jié)構(gòu)，以此來(lái)幫助用戶(hù)瀏覽和理解不同類(lèi)型的信息。
鄰近原則是直接影響界面可用性的基本規(guī)則之一。如果隨意控制元素的位置和間距，有可能會(huì)讓整個(gè)產(chǎn)品變得混亂和難以理解。
視覺(jué)上相似的元素會(huì)被視為同一組，視覺(jué)上不同的元素，大腦會(huì)下意識(shí)將其視為單獨(dú)的元素。
利用相似性可以來(lái)定義界面的特征，例如顏色、形狀、尺寸、紋理或空間位置等。最容易區(qū)分的是顏色相似，其次是尺寸和形狀相似。
如果一個(gè)元素和界面中其他的元素都不同，無(wú)法融入到其他元素組中，那么這個(gè)元素就會(huì)變得非常顯眼。
我們可以利用這種差異化的效果來(lái)突出一些具有引導(dǎo)性或者功能性的元素，例如登錄按鈕或者加入購(gòu)物車(chē)按鈕等。
一組不相連的元素組合在一起，我們會(huì)下意識(shí)地自動(dòng)補(bǔ)充這些元素之間的空白，得到一個(gè)完整的、可識(shí)別的形狀。
閉合原則有多種不同的用法。例如一個(gè)虛線(xiàn)箭頭，我們會(huì)填補(bǔ)空白并把這些點(diǎn)連接在一起，得到一條完整的線(xiàn)段。
閉合原則還有助于識(shí)別抽象的圖標(biāo)形狀并賦予更多的含義。在圖標(biāo)設(shè)計(jì)中，為了避免信息過(guò)載，大多數(shù)圖標(biāo)的設(shè)計(jì)都很簡(jiǎn)潔，更方便用戶(hù)理解。
運(yùn)用閉合原則的經(jīng)典案例包括用不同虛線(xiàn)構(gòu)成的IBM標(biāo)志、利用正負(fù)形空間組合而成的WWF熊貓標(biāo)志。
UI界面中的元素一旦有對(duì)稱(chēng)性，就會(huì)產(chǎn)生秩序感，我們很快就能看到并理解這種形式。
我們天生喜歡對(duì)稱(chēng)的物體。對(duì)稱(chēng)排列的元素在視覺(jué)上更令人舒服，也更美觀。
可能有人覺(jué)得對(duì)稱(chēng)設(shè)計(jì)過(guò)于呆板，這種想法在平面廣告或視覺(jué)設(shè)計(jì)中可能正確，但在UI設(shè)計(jì)中對(duì)稱(chēng)布局是相當(dāng)重要且實(shí)用的界面排版形式。
對(duì)稱(chēng)布局讓設(shè)計(jì)更容易理解，也更友好，缺乏對(duì)稱(chēng)會(huì)導(dǎo)致界面混亂，不知道該關(guān)注哪個(gè)元素。當(dāng)然，如果想讓某個(gè)模塊突出展示，也可以嘗試打破對(duì)稱(chēng)性，這樣不對(duì)稱(chēng)的元素就能在界面中脫穎而出。
界面中沿著同一條線(xiàn)對(duì)齊的元素會(huì)被認(rèn)為屬于同一組。
在瀏覽界面時(shí)，視線(xiàn)會(huì)第一時(shí)間尋找最順暢的視覺(jué)動(dòng)線(xiàn)。這也解釋了為什么在使用連續(xù)性原則時(shí)，需要確保直線(xiàn)(或曲線(xiàn))是均勻和可預(yù)測(cè)的。
線(xiàn)條越均勻，生成的形狀越容易被用戶(hù)正確識(shí)別。
連續(xù)性有助于界面保持上下垂直滾動(dòng)時(shí)的節(jié)奏，相似的內(nèi)容應(yīng)始終保持對(duì)齊。如果某個(gè)元素打破了這種連續(xù)性，我們的瀏覽節(jié)奏會(huì)被打亂，瀏覽速度也會(huì)變慢。
當(dāng)下的UI設(shè)計(jì)中，流行帶有圓角的卡片和按鈕效果。其中的一個(gè)原因是我們對(duì)于直角的處理速度稍慢，視線(xiàn)需要停頓并旋轉(zhuǎn)90度，而更圓滑的導(dǎo)角效果能幫助我們的視線(xiàn)更快地轉(zhuǎn)換。
按相同方向、以相同速度運(yùn)動(dòng)的元素被認(rèn)為是一組。
在設(shè)計(jì)輪播、下拉列表、過(guò)渡動(dòng)畫(huà)等場(chǎng)景時(shí)，共同命運(yùn)原則會(huì)很有幫助。例如我們的視線(xiàn)既跟隨輪播圖水平移動(dòng)，還跟隨下拉列表向下展開(kāi)。
根據(jù)?？硕桑晒┑倪x擇數(shù)量應(yīng)該有限制。有太多東西可供選擇可能會(huì)導(dǎo)致用戶(hù)迷失方向，做出判斷的時(shí)間加長(zhǎng)，甚至?xí)械綁毫Α?/p>
米勒定律提到，大腦處理信息的能力與認(rèn)知負(fù)荷有直接的關(guān)系。我們大腦一次能處理的信息量大約是7個(gè)對(duì)象。對(duì)象數(shù)量越多，處理它們所需的時(shí)間就越長(zhǎng)。
在設(shè)計(jì)時(shí)，盡量不要超過(guò)七個(gè)選項(xiàng)，為了獲得最好的體驗(yàn)，應(yīng)盡量將選項(xiàng)保持在4-5個(gè)。這意味著需要控制主導(dǎo)航數(shù)量、按鈕數(shù)量、下拉選項(xiàng)和輪播圖數(shù)量等。
當(dāng)需要用戶(hù)做選擇時(shí)，最好能突出顯示最受歡迎或最推薦的選項(xiàng)，幫助用戶(hù)更快做出決策。
我們能夠本能地區(qū)分界面中的圖形元素和背景。
界面由不同類(lèi)型和樣式的圖層組成，每個(gè)圖層都有不同的層次結(jié)構(gòu)。
為了避免層次結(jié)構(gòu)混淆，我們需要清楚地定義界面的所有元素。背景不需要設(shè)計(jì)設(shè)計(jì)的太花哨，有可能會(huì)搶奪用戶(hù)對(duì)主要內(nèi)容的注意力。
輔助內(nèi)容和功能不需要太明顯，并且需要與主要內(nèi)容在設(shè)計(jì)上做出區(qū)分。
可以使用對(duì)比關(guān)系、位置關(guān)系和陰影等方法幫助用戶(hù)區(qū)分內(nèi)容和背景。
用戶(hù)通常認(rèn)為具有視覺(jué)吸引力(美觀)的產(chǎn)品更實(shí)用。
根據(jù)這個(gè)原則，流行、對(duì)稱(chēng)、美觀的界面會(huì)對(duì)用戶(hù)產(chǎn)生更積極的影響。如果視覺(jué)效果給人足夠好的第一印象，用戶(hù)可能會(huì)忽略一些可用性問(wèn)題。
審美可用性的基礎(chǔ)在于具有一定的可用性，之后才會(huì)起作用。如果產(chǎn)品本身的功能就很糟糕，那么再美觀的界面也無(wú)濟(jì)于事。
高質(zhì)量、美觀的界面有助于建立用戶(hù)信任。相反一個(gè)看起來(lái)混亂的設(shè)計(jì)會(huì)讓用戶(hù)感到不靠譜。即使用戶(hù)不能確切說(shuō)出界面視覺(jué)的問(wèn)題，但他們也會(huì)覺(jué)得這個(gè)產(chǎn)品有風(fēng)險(xiǎn)或者不正規(guī)。
高質(zhì)量的UI設(shè)計(jì)對(duì)于銀行類(lèi)、金融類(lèi)和醫(yī)療類(lèi)產(chǎn)品來(lái)說(shuō)尤為重要，尤其是在需要用戶(hù)提供個(gè)人信息或涉及交易的使用場(chǎng)景中。
我們最容易記住一組當(dāng)中的第一個(gè)和最后一個(gè)元素。
將最重要的內(nèi)容或元素放在每組的第一個(gè)或最后一個(gè)，吸引用戶(hù)注意力，方便高頻操作。而次要的內(nèi)容操作頻率相對(duì)較低，則放到中間位置。
例如在構(gòu)建導(dǎo)航、下拉列表等場(chǎng)景中，將重要的操作放到首位。
在一組看起來(lái)相似的元素中，我們總是會(huì)記住與其余元素不匹配的那個(gè)元素。
在UI設(shè)計(jì)中，隔離效應(yīng)意味著將界面中重要的內(nèi)容或關(guān)鍵的操作在視覺(jué)上與眾不同。
最典型案例是界面中的CTA(號(hào)召性用語(yǔ))按鈕。通過(guò)改變CTA按鈕的顏色、尺寸等，與界面中的其他按鈕區(qū)分開(kāi)來(lái)，第一時(shí)間引起用戶(hù)的注意。
專(zhuān)欄作家
作者：Clippp，每周精選設(shè)計(jì)文章，專(zhuān)注分享關(guān)于產(chǎn)品、交互、UI視覺(jué)上的設(shè)計(jì)思考。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash，基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gerard.com.cn