B 端產(chǎn)品主要是 Web 端產(chǎn)品，空間大、操作多，內(nèi)容相對(duì)復(fù)雜。需要通過(guò)頁(yè)面布局或者視覺設(shè)計(jì)表達(dá)出明確的邏輯關(guān)系，從設(shè)計(jì)角度降低用戶的學(xué)習(xí)成本。而用戶有固定的認(rèn)知規(guī)律。格式塔原理揭示了人類視覺的認(rèn)知是整體的：我們的視覺系統(tǒng)自動(dòng)對(duì)視覺輸入構(gòu)建結(jié)構(gòu)，并在神經(jīng)系統(tǒng)層面上感知形狀、圖形和物體，而不是只看到互不相連的邊、線和區(qū)域。

格式塔主要包括 7 個(gè)基本原則：

今天我們就來(lái)總結(jié)下，格式塔原理在 B 端產(chǎn)品中是如何應(yīng)用的？

接近性原則

我們先看 2 張截圖，分別是不同分辨率下的界面效果。

可以明顯的感覺到高分辨率下，菜單列間距離較大，菜單的歸屬關(guān)系很清晰。而低分辨率下，菜單間的距離變小，特別是后面兩列的菜單會(huì)給人混在一起的感覺。這就是格式塔原理中的接近性原則，距離近的關(guān)聯(lián)親密，距離遠(yuǎn)的就各自獨(dú)立分組。

當(dāng)我們想要傳達(dá)給用戶層級(jí)關(guān)系時(shí)，就需要善于利用接近性原則。例如表格上方的功能按鈕，通常我們將高頻、核心操作放置在左側(cè)，低頻、輔助功能放置在右側(cè)。通過(guò)增大元素間的距離，達(dá)到功能分區(qū)的目的。

相似性原則

相似性原則是通過(guò)顏色、尺寸、圖形等方面的共同屬性，實(shí)現(xiàn)信息的分組或者高可讀性。

例如在可視化圖表中，不同范圍值的指標(biāo)采用不同的背景色。通過(guò)背景色的差異，將同一范圍內(nèi)的數(shù)據(jù)形成視覺關(guān)聯(lián)，提高用戶對(duì)信息的識(shí)別效率。

通過(guò)圖形尺寸的相似性也可以構(gòu)建內(nèi)容分區(qū)。例如阿里云、騰訊云控制臺(tái)的首頁(yè)，都采用了雙列設(shè)計(jì)，左側(cè)主要以高頻的業(yè)務(wù)功能信息為主，右側(cè)是輔助運(yùn)營(yíng)信息。兩列尺寸寬度有明顯差異，用戶會(huì)將相同寬度的卡片歸為一組。這樣有助于用戶理解兩類卡片的內(nèi)容差異，并有效地突出業(yè)務(wù)信息。

閉合性原則

IBM、蘋果的 Logo 設(shè)計(jì)，無(wú)論是“用刀砍過(guò)”，還是被“偷咬了一口”，用戶仍然可以識(shí)別出完整圖形。這就是視覺閉合性原則的一種表現(xiàn)方式。

在 UI 設(shè)計(jì)中，則會(huì)通過(guò)對(duì)齊方式，形成虛擬空間。例如下圖中阿里云通過(guò)明顯的背景色、陰影等手法形成有形的內(nèi)容空間。而微信公眾號(hào)則是平鋪背景色，內(nèi)容區(qū)借助標(biāo)題、卡片對(duì)齊形成視覺閉合空間，最終將頁(yè)面劃分為左側(cè)導(dǎo)航菜單和內(nèi)容區(qū)兩個(gè)空間。視覺表現(xiàn)上更輕量化。

另外閉合性是需要元素之間相互輔助的，單獨(dú)的元素?zé)o法構(gòu)建出閉合空間。以下圖為例，雖然四個(gè)小的卡片做了間距分割，但是由于界面整體上是橫向分割的。我們會(huì)將 4 個(gè)卡片看作是整體元素去理解和認(rèn)知。

連續(xù)性原則

用戶更習(xí)慣于從左到右的橫掃閱讀，因此連續(xù)性主要體現(xiàn)在橫向空間中。

下圖中，雖然左側(cè)的標(biāo)簽文字與右側(cè)的內(nèi)容信息有較為明顯的間距，高度尺寸差距也比較大。但是用戶不會(huì)將內(nèi)容看作是 4 個(gè)獨(dú)立的個(gè)體，而是理解為兩組信息。

在某些場(chǎng)景中，如果信息平均分布，不會(huì)產(chǎn)生連續(xù)性的視覺感知。

例如下圖指標(biāo)監(jiān)控中，指標(biāo)都是采用小卡片，間距、尺寸較為統(tǒng)一。這種情況下用戶就很難對(duì)信息分組處理。在我看來(lái)這些指標(biāo)只是一個(gè)個(gè)的視覺散點(diǎn)，沒有明確的視覺重點(diǎn)。用戶無(wú)法感知到內(nèi)在的邏輯性。用戶想要找到某個(gè)指標(biāo)時(shí)，需要逐個(gè)檢索，花費(fèi)的成本更高。

簡(jiǎn)單對(duì)稱原則

通過(guò)上述很多圖片，我們可以看出頁(yè)面元素基本都是橫平豎直，中規(guī)中矩的元素和分割方式?；蛟S有些單調(diào)乏味，但是勝在簡(jiǎn)單，不會(huì)帶來(lái)額外的視覺噪點(diǎn)。

特別是 B 端產(chǎn)品，基本看不到異形的存在，甚至全圓角矩形都很少見到。即使有異形，也只是作為視覺表現(xiàn)元素存在于內(nèi)容中，而不會(huì)作為空間的劃分邊界。

主體與背景原則

主體與背景原則最典型的應(yīng)用就是蒙版彈窗。通過(guò)拉大主體與背景的差異性，凸顯彈窗信息。

當(dāng)我們需要著重表現(xiàn)內(nèi)容時(shí)，同樣適用于主體與背景原則。例如登錄界面的設(shè)計(jì)，會(huì)通過(guò)差異化的背景、陰影等方式，帶給用戶清晰的視覺層級(jí)，適當(dāng)凸顯輸入框的主體地位。

而 B 端內(nèi)容區(qū)是核心空間，基本都是采用純白背景，與頁(yè)面背景形成對(duì)比，從而占據(jù)信息的主體地位。

共同命運(yùn)原則

共同命運(yùn)原則聽起來(lái)有點(diǎn)玄學(xué)，指的是相同運(yùn)動(dòng)特征的元素會(huì)被認(rèn)為是同一組或者是具有相關(guān)性的內(nèi)容。運(yùn)動(dòng)的元素在 B 端產(chǎn)品中應(yīng)用很少，我沒有找到合適的案例解釋這個(gè)原理。

在移動(dòng)端產(chǎn)品中有些應(yīng)用案例。比如 iOS 系統(tǒng)中，桌面布局編輯態(tài)下抖動(dòng)的圖標(biāo)，可以與靜態(tài)不可編輯的內(nèi)容形成隔離效果，視覺引導(dǎo)性更強(qiáng)。同樣今日頭條頻道編輯時(shí)，也采用了抖動(dòng)效果。

總結(jié)

雖然 B 端產(chǎn)品沒有 C 端色彩豐富，表現(xiàn)力上沒那么炫酷。但是兩者對(duì)信息傳達(dá)的要求是一樣的，要求和諧、有序、層次分明，輔助傳達(dá)內(nèi)在的業(yè)務(wù)層信息。靈活地運(yùn)用格式塔原理將對(duì)產(chǎn)品的體驗(yàn)提升會(huì)有很大的幫助。

格式塔原理不僅限于視覺表現(xiàn)，產(chǎn)品經(jīng)理或交互設(shè)計(jì)師在原型設(shè)計(jì)時(shí)，也要重視格式塔原理，輔助設(shè)計(jì)方案表達(dá)，提高團(tuán)隊(duì)間的協(xié)作效率。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)