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