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.teruid.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.teruid.com