2022-5-17 ui設計分享達人
B 端產品主要是 Web 端產品，空間大、操作多，內容相對復雜。需要通過頁面布局或者視覺設計表達出明確的邏輯關系，從設計角度降低用戶的學習成本。而用戶有固定的認知規(guī)律。格式塔原理揭示了人類視覺的認知是整體的：我們的視覺系統(tǒng)自動對視覺輸入構建結構，并在神經(jīng)系統(tǒng)層面上感知形狀、圖形和物體，而不是只看到互不相連的邊、線和區(qū)域。
格式塔主要包括 7 個基本原則：
今天我們就來總結下，格式塔原理在 B 端產品中是如何應用的？
我們先看 2 張截圖，分別是不同分辨率下的界面效果。
可以明顯的感覺到高分辨率下，菜單列間距離較大，菜單的歸屬關系很清晰。而低分辨率下，菜單間的距離變小，特別是后面兩列的菜單會給人混在一起的感覺。這就是格式塔原理中的接近性原則，距離近的關聯(lián)親密，距離遠的就各自獨立分組。
當我們想要傳達給用戶層級關系時，就需要善于利用接近性原則。例如表格上方的功能按鈕，通常我們將高頻、核心操作放置在左側，低頻、輔助功能放置在右側。通過增大元素間的距離，達到功能分區(qū)的目的。
相似性原則是通過顏色、尺寸、圖形等方面的共同屬性，實現(xiàn)信息的分組或者高可讀性。
例如在可視化圖表中，不同范圍值的指標采用不同的背景色。通過背景色的差異，將同一范圍內的數(shù)據(jù)形成視覺關聯(lián)，提高用戶對信息的識別效率。
通過圖形尺寸的相似性也可以構建內容分區(qū)。例如阿里云、騰訊云控制臺的首頁，都采用了雙列設計，左側主要以高頻的業(yè)務功能信息為主，右側是輔助運營信息。兩列尺寸寬度有明顯差異，用戶會將相同寬度的卡片歸為一組。這樣有助于用戶理解兩類卡片的內容差異，并有效地突出業(yè)務信息。
IBM、蘋果的 Logo 設計，無論是“用刀砍過”，還是被“偷咬了一口”，用戶仍然可以識別出完整圖形。這就是視覺閉合性原則的一種表現(xiàn)方式。
在 UI 設計中，則會通過對齊方式，形成虛擬空間。例如下圖中阿里云通過明顯的背景色、陰影等手法形成有形的內容空間。而微信公眾號則是平鋪背景色，內容區(qū)借助標題、卡片對齊形成視覺閉合空間，最終將頁面劃分為左側導航菜單和內容區(qū)兩個空間。視覺表現(xiàn)上更輕量化。
另外閉合性是需要元素之間相互輔助的，單獨的元素無法構建出閉合空間。以下圖為例，雖然四個小的卡片做了間距分割，但是由于界面整體上是橫向分割的。我們會將 4 個卡片看作是整體元素去理解和認知。
用戶更習慣于從左到右的橫掃閱讀，因此連續(xù)性主要體現(xiàn)在橫向空間中。
下圖中，雖然左側的標簽文字與右側的內容信息有較為明顯的間距，高度尺寸差距也比較大。但是用戶不會將內容看作是 4 個獨立的個體，而是理解為兩組信息。
在某些場景中，如果信息平均分布，不會產生連續(xù)性的視覺感知。
例如下圖指標監(jiān)控中，指標都是采用小卡片，間距、尺寸較為統(tǒng)一。這種情況下用戶就很難對信息分組處理。在我看來這些指標只是一個個的視覺散點，沒有明確的視覺重點。用戶無法感知到內在的邏輯性。用戶想要找到某個指標時，需要逐個檢索，花費的成本更高。
通過上述很多圖片，我們可以看出頁面元素基本都是橫平豎直，中規(guī)中矩的元素和分割方式?；蛟S有些單調乏味，但是勝在簡單，不會帶來額外的視覺噪點。
特別是 B 端產品，基本看不到異形的存在，甚至全圓角矩形都很少見到。即使有異形，也只是作為視覺表現(xiàn)元素存在于內容中，而不會作為空間的劃分邊界。
主體與背景原則最典型的應用就是蒙版彈窗。通過拉大主體與背景的差異性，凸顯彈窗信息。
當我們需要著重表現(xiàn)內容時，同樣適用于主體與背景原則。例如登錄界面的設計，會通過差異化的背景、陰影等方式，帶給用戶清晰的視覺層級，適當凸顯輸入框的主體地位。
而 B 端內容區(qū)是核心空間，基本都是采用純白背景，與頁面背景形成對比，從而占據(jù)信息的主體地位。
共同命運原則聽起來有點玄學，指的是相同運動特征的元素會被認為是同一組或者是具有相關性的內容。運動的元素在 B 端產品中應用很少，我沒有找到合適的案例解釋這個原理。
在移動端產品中有些應用案例。比如 iOS 系統(tǒng)中，桌面布局編輯態(tài)下抖動的圖標，可以與靜態(tài)不可編輯的內容形成隔離效果，視覺引導性更強。同樣今日頭條頻道編輯時，也采用了抖動效果。
雖然 B 端產品沒有 C 端色彩豐富，表現(xiàn)力上沒那么炫酷。但是兩者對信息傳達的要求是一樣的，要求和諧、有序、層次分明，輔助傳達內在的業(yè)務層信息。靈活地運用格式塔原理將對產品的體驗提升會有很大的幫助。
格式塔原理不僅限于視覺表現(xiàn)，產品經(jīng)理或交互設計師在原型設計時，也要重視格式塔原理，輔助設計方案表達，提高團隊間的協(xié)作效率。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務