我準備了20張設計圖解，幫助你掌握實用的UI/UX設計準則

Sponsor

感知力是大腦將不同的信息連接和組織成一個連貫整體的機制。例如我們將相似的對象分組并連接起來，能夠輕松地區分出不屬于該組的對象。

大腦在處理和組織看到的信息時會使用一套快捷方法，了解這些方法是設計成功的關鍵要素。

在UI設計時，我們應該有意識地運用感知力，用足夠的事實來驗證設計，有依有據地解釋為什么這個圖形元素要這樣設計？背后的原因是什么？

提升感知力有助于清晰地解釋設計方案，避免常見的設計錯誤，引導我們將設計做得更好、更容易理解！

??鄰近原則

彼此靠近的元素會被自動理解為一組。把它們的位置放得更遠，會給人一種這些元素是完全獨立的個體的印象。

在UI設計中，可以利用鄰近原則將相似的界面元素組合在一起，把控總體布局。

鄰近規則適用于主導航、卡片、按鈕、內容和圖標等。我們還可以使用適當的留白將不同的元素進一步分開，創建一個層級更清晰的界面結構，以此來幫助用戶瀏覽和理解不同類型的信息。

鄰近原則是直接影響界面可用性的基本規則之一。如果隨意控制元素的位置和間距，有可能會讓整個產品變得混亂和難以理解。

??相似原則

視覺上相似的元素會被視為同一組，視覺上不同的元素，大腦會下意識將其視為單獨的元素。

利用相似性可以來定義界面的特征，例如顏色、形狀、尺寸、紋理或空間位置等。最容易區分的是顏色相似，其次是尺寸和形狀相似。

如果一個元素和界面中其他的元素都不同，無法融入到其他元素組中，那么這個元素就會變得非常顯眼。

我們可以利用這種差異化的效果來突出一些具有引導性或者功能性的元素，例如登錄按鈕或者加入購物車按鈕等。

??閉合原則

一組不相連的元素組合在一起，我們會下意識地自動補充這些元素之間的空白，得到一個完整的、可識別的形狀。

閉合原則有多種不同的用法。例如一個虛線箭頭，我們會填補空白并把這些點連接在一起，得到一條完整的線段。

閉合原則還有助于識別抽象的圖標形狀并賦予更多的含義。在圖標設計中，為了避免信息過載，大多數圖標的設計都很簡潔，更方便用戶理解。

運用閉合原則的經典案例包括用不同虛線構成的IBM標志、利用正負形空間組合而成的WWF熊貓標志。

??對稱原則

UI界面中的元素一旦有對稱性，就會產生秩序感，我們很快就能看到并理解這種形式。

我們天生喜歡對稱的物體。對稱排列的元素在視覺上更令人舒服，也更美觀。

可能有人覺得對稱設計過于呆板，這種想法在平面廣告或視覺設計中可能正確，但在UI設計中對稱布局是相當重要且實用的界面排版形式。

對稱布局讓設計更容易理解，也更友好，缺乏對稱會導致界面混亂，不知道該關注哪個元素。當然，如果想讓某個模塊突出展示，也可以嘗試打破對稱性，這樣不對稱的元素就能在界面中脫穎而出。

??連續性原則

界面中沿著同一條線對齊的元素會被認為屬于同一組。

在瀏覽界面時，視線會第一時間尋找最順暢的視覺動線。這也解釋了為什么在使用連續性原則時，需要確保直線(或曲線)是均勻和可預測的。

線條越均勻，生成的形狀越容易被用戶正確識別。

連續性有助于界面保持上下垂直滾動時的節奏，相似的內容應始終保持對齊。如果某個元素打破了這種連續性，我們的瀏覽節奏會被打亂，瀏覽速度也會變慢。

當下的UI設計中，流行帶有圓角的卡片和按鈕效果。其中的一個原因是我們對于直角的處理速度稍慢，視線需要停頓并旋轉90度，而更圓滑的導角效果能幫助我們的視線更快地轉換。

??共同命運原則

按相同方向、以相同速度運動的元素被認為是一組。

在設計輪播、下拉列表、過渡動畫等場景時，共同命運原則會很有幫助。例如我們的視線既跟隨輪播圖水平移動，還跟隨下拉列表向下展開。

???？硕?米勒定律

?？硕桑嚎晒┻x擇的選項越多越復雜，就越難做出選擇。

米勒定律：我們的大腦在同一時間只能處理大約7±2個對象。

根據?？硕?，可供的選擇數量應該有限制。有太多東西可供選擇可能會導致用戶迷失方向，做出判斷的時間加長，甚至會感到壓力。

米勒定律提到，大腦處理信息的能力與認知負荷有直接的關系。我們大腦一次能處理的信息量大約是7個對象。對象數量越多，處理它們所需的時間就越長。

在設計時，盡量不要超過七個選項，為了獲得最好的體驗，應盡量將選項保持在4-5個。這意味著需要控制主導航數量、按鈕數量、下拉選項和輪播圖數量等。

當需要用戶做選擇時，最好能突出顯示最受歡迎或最推薦的選項，幫助用戶更快做出決策。

??前景/背景

我們能夠本能地區分界面中的圖形元素和背景。

界面由不同類型和樣式的圖層組成，每個圖層都有不同的層次結構。

為了避免層次結構混淆，我們需要清楚地定義界面的所有元素。背景不需要設計設計的太花哨，有可能會搶奪用戶對主要內容的注意力。

輔助內容和功能不需要太明顯，并且需要與主要內容在設計上做出區分。

可以使用對比關系、位置關系和陰影等方法幫助用戶區分內容和背景。

??審美可用性效應

用戶通常認為具有視覺吸引力(美觀)的產品更實用。

根據這個原則，流行、對稱、美觀的界面會對用戶產生更積極的影響。如果視覺效果給人足夠好的第一印象，用戶可能會忽略一些可用性問題。

審美可用性的基礎在于具有一定的可用性，之后才會起作用。如果產品本身的功能就很糟糕，那么再美觀的界面也無濟于事。

高質量、美觀的界面有助于建立用戶信任。相反一個看起來混亂的設計會讓用戶感到不靠譜。即使用戶不能確切說出界面視覺的問題，但他們也會覺得這個產品有風險或者不正規。

高質量的UI設計對于銀行類、金融類和醫療類產品來說尤為重要，尤其是在需要用戶提供個人信息或涉及交易的使用場景中。

??串行位置效應

我們最容易記住一組當中的第一個和最后一個元素。

將最重要的內容或元素放在每組的第一個或最后一個，吸引用戶注意力，方便高頻操作。而次要的內容操作頻率相對較低，則放到中間位置。

例如在構建導航、下拉列表等場景中，將重要的操作放到首位。

??隔離效應

在一組看起來相似的元素中，我們總是會記住與其余元素不匹配的那個元素。

在UI設計中，隔離效應意味著將界面中重要的內容或關鍵的操作在視覺上與眾不同。

最典型案例是界面中的CTA(號召性用語)按鈕。通過改變CTA按鈕的顏色、尺寸等，與界面中的其他按鈕區分開來，第一時間引起用戶的注意。

最后

以上是11條在UI/UX設計中都經常用到的「設計準則」，希望利用這些圖解能夠幫你一次性搞懂這些晦澀難懂的設計理論，助力設計成長！

作者：?Clippp
來源：Clip設計夾（公眾號）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。