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