在當(dāng)今時(shí)代，現(xiàn)代 UI 用戶交互體驗(yàn)設(shè)計(jì)具有極為重要的地位。它絕非僅僅局限于單向的視覺(jué)設(shè)計(jì)，也不是單純地圍繞用戶的可用性進(jìn)行研究設(shè)計(jì)。實(shí)際上，如今的 UI 用戶交互體驗(yàn)設(shè)計(jì)已經(jīng)對(duì)視覺(jué)與可用性操作提出了更高層次的混合化要求。
對(duì)于現(xiàn)代的 UI 設(shè)計(jì)而言，我們需要從多個(gè)角度進(jìn)行更進(jìn)一步的深入解讀。這不僅涉及心理學(xué)方面，去探究用戶的心理需求和行為模式，以便更好地滿足他們的期望；還涵蓋視覺(jué)設(shè)計(jì)領(lǐng)域，通過(guò)精心打造的視覺(jué)元素，吸引用戶的注意力并傳達(dá)有效的信息；同時(shí)也不能忽視交互設(shè)計(jì)，確保用戶在與界面進(jìn)行互動(dòng)時(shí)能夠獲得流暢、便捷的體驗(yàn)。
而將視覺(jué)思維理論應(yīng)用于新一代的 UI 交互設(shè)計(jì)，則具有重大的意義。通過(guò)這種方式，用戶能夠憑借敏銳的視覺(jué)，靈敏地捕捉到屏幕上的信息軌跡。大腦可以快速地從不同抽象平面水平上獲取意象，實(shí)現(xiàn)表象形態(tài)感知與抽象思維的緊密連接。這樣一來(lái)，用戶便能夠高效地獲取有效的視覺(jué)信息，從而提升整體的交互體驗(yàn)。無(wú)論是在工作場(chǎng)景中還是在日常生活中，一個(gè)優(yōu)秀的 UI 交互設(shè)計(jì)都能夠?yàn)橛脩魩?lái)極大的便利和愉悅感。
今天我們先介紹下理論知識(shí)，然后將產(chǎn)品設(shè)計(jì)案例結(jié)合（視覺(jué)思維分析模式的具體應(yīng)用方法）來(lái)告訴大家怎么應(yīng)用，希望可以幫助到大家。
我相信格式塔心理學(xué)大家都聽過(guò)，主流對(duì)于格式塔心理學(xué)的觀點(diǎn)是：格式塔心理學(xué)強(qiáng)調(diào)經(jīng)驗(yàn)和行為的整體性，認(rèn)為整體不等于部分之和，意識(shí)不等于感覺(jué)元素的集合，行為不等于反射弧的循環(huán)。它主張心理現(xiàn)象最基本的特征是在意識(shí)經(jīng)驗(yàn)中所顯現(xiàn)的結(jié)構(gòu)性或整體性，反對(duì)構(gòu)造主義心理學(xué)把心理現(xiàn)象分析為簡(jiǎn)單的元素，認(rèn)為心理現(xiàn)象是一個(gè)整體，一種有組織的完整結(jié)構(gòu)。
在知覺(jué)過(guò)程中，距離相近的物體容易被知覺(jué)為一個(gè)整體。例如，在一張紙上分布著一些點(diǎn)，距離較近的點(diǎn)更容易被看作一組。
具有相似特征的物體容易被知覺(jué)為一個(gè)整體。比如，顏色、形狀、大小等相似的圖形更容易被組合在一起進(jìn)行認(rèn)知。
在知覺(jué)過(guò)程中，人們傾向于將具有連續(xù)性的物體知覺(jué)為一個(gè)整體。例如，一條曲線即使中間有部分被遮擋，人們也會(huì)傾向于將其看作是連續(xù)的整體。
人們傾向于將不完整的圖形知覺(jué)為完整的圖形，即通過(guò)心理上的補(bǔ)充使圖形達(dá)到閉合。比如，一個(gè)有缺口的圓形，人們往往會(huì)自動(dòng)腦補(bǔ)出完整的圓形。
對(duì)設(shè)計(jì)領(lǐng)域的影響
以上是大家所了解對(duì)的，而對(duì)于設(shè)計(jì)于界面設(shè)計(jì)、圖形設(shè)計(jì)、用戶體驗(yàn)設(shè)計(jì)都有影響：
-
界面設(shè)計(jì)：在網(wǎng)頁(yè)設(shè)計(jì)和移動(dòng)應(yīng)用界面設(shè)計(jì)中，格式塔心理學(xué)的原則被廣泛應(yīng)用。例如，通過(guò)合理布局元素，利用接近性和相似性原則將相關(guān)的內(nèi)容組合在一起，使用戶能夠更快速地理解和操作界面。顏色的相似性可以用來(lái)區(qū)分不同的功能模塊，提高界面的可讀性和易用性。
-
圖形設(shè)計(jì)：設(shè)計(jì)師常常運(yùn)用閉合性原則創(chuàng)造簡(jiǎn)潔而富有吸引力的圖形。利用連續(xù)性原則可以引導(dǎo)用戶的視線，創(chuàng)造出動(dòng)態(tài)和富有節(jié)奏感的設(shè)計(jì)作品。
-
用戶體驗(yàn)設(shè)計(jì)：格式塔心理學(xué)有助于設(shè)計(jì)師理解用戶如何感知和理解復(fù)雜的信息環(huán)境。通過(guò)創(chuàng)造整體的、有組織的設(shè)計(jì)，可以提高用戶的滿意度和使用效率，減少認(rèn)知負(fù)擔(dān)。
魯?shù)婪?阿恩海姆的格式塔心理學(xué)理論中提出了四種 “力” 的概念，GUI 設(shè)計(jì)師對(duì)其在界面中的角色進(jìn)行了深入闡釋。
第一種力是由視覺(jué)對(duì)象的外在形狀和構(gòu)造所生成的力。
它雖有強(qiáng)度但沒(méi)有特定方向，就像界面中各個(gè)元素緊密結(jié)合，形成一個(gè)有機(jī)的整體。各個(gè)組件相互呼應(yīng)，共同營(yíng)造出和諧統(tǒng)一的視覺(jué)氛圍，增強(qiáng)了用戶對(duì)界面的整體認(rèn)知。
第三種力是在視覺(jué)對(duì)象中知覺(jué)到的有方向性的張力。
其載體具有一定的 “動(dòng)力”，表現(xiàn)為具有方向標(biāo)識(shí)性意識(shí)的標(biāo)識(shí)及層級(jí)關(guān)系。比如，清晰的導(dǎo)航箭頭或色彩漸變，引導(dǎo)用戶在界面中進(jìn)行有序的瀏覽和操作，確保用戶不會(huì)迷失方向。
第四種力主要是指視覺(jué)式樣本身及其組合所形成的視覺(jué)沖擊力。
在界面中，涵蓋引導(dǎo)性的動(dòng)態(tài)效果可以吸引用戶的注意力，激發(fā)用戶的探索欲望。例如，微妙的動(dòng)畫效果或交互反饋，為用戶帶來(lái)更加生動(dòng)的體驗(yàn)。
這四種力是 GUI 設(shè)計(jì)中討論視知覺(jué)的核心內(nèi)容。
它們是形狀、顏色和運(yùn)動(dòng)的固有屬性，并非觀賞者憑借記憶中的想象強(qiáng)加給知覺(jué)對(duì)象的。阿恩海姆將格式塔心理美學(xué)視為一種
“視知覺(jué)形式完形理論”
。
在 UI 設(shè)計(jì)中，以格式塔心理美學(xué)為指導(dǎo)，視覺(jué)上的 “完形” 形式生成機(jī)制發(fā)揮作用。用戶在設(shè)計(jì)師精心構(gòu)建的色彩圖形語(yǔ)言引導(dǎo)下，無(wú)意識(shí)地進(jìn)行目的性的視知覺(jué)形式達(dá)成。這種方式為無(wú)縫接入交互提供了卓越的解決方案。
在 UI 設(shè)計(jì)中運(yùn)用格式塔心理學(xué)，為人機(jī)互動(dòng)形式的形成和建構(gòu)提供動(dòng)力機(jī)制引導(dǎo)，讓我們對(duì)格式塔心理美學(xué)有了全新的理解。它不僅提升了界面的美觀度，更重要的是增強(qiáng)了用戶體驗(yàn)，使界面更加直觀、易用。通過(guò)合理運(yùn)用格式塔心理學(xué)的原理，設(shè)計(jì)師可以創(chuàng)造出更具吸引力和功能性的 UI 設(shè)計(jì)，為用戶帶來(lái)更加愉悅的交互體驗(yàn)。
人類對(duì)于藝術(shù)的感知與生俱來(lái)，積極主動(dòng)。對(duì)于現(xiàn)代優(yōu)秀交互設(shè)計(jì)師而言，掌握并了解人類視覺(jué)的基本原理是必備素養(yǎng)之一。視覺(jué)思維與人類的生理和心理因素緊密相連。
這與我們的感官系統(tǒng)及其特性息息相關(guān)。人類的視覺(jué)系統(tǒng)猶如一條完整的視覺(jué)分析鏈，涵蓋了眼球、大腦皮層以及它們之間的視覺(jué)傳導(dǎo)路徑。
視覺(jué)大腦皮層位于大腦后端，圍繞枕葉的距狀裂周圍分布。其中，V1 區(qū)和 V2 區(qū)主要負(fù)責(zé)一系列特征處理，V4 區(qū)承擔(dān)圖案模式處理工作，而前腦葉和中腦則負(fù)責(zé)高層注意力的控制。信息由皮層 V1 通過(guò)兩條線路進(jìn)行輸送。第一條路線為背側(cè)流，即位置通道，從 V1 傳輸至 V2，再進(jìn)入 V5，最后抵達(dá)頂下小葉，此段主要處理視覺(jué)的空間位置信息以及相關(guān)的運(yùn)動(dòng)和控制部分。第二條線路為內(nèi)容通道，從 V1 到 V2 和 V4，最后進(jìn)入下顳葉，用于物體的識(shí)別和長(zhǎng)期記憶。
視覺(jué)思維與人類的現(xiàn)有生存條件以及以往的生活經(jīng)驗(yàn)緊密相關(guān)。生理與心理因素相互作用，形成了獨(dú)特的視覺(jué)思維特性。
多年來(lái)，藝術(shù)、設(shè)計(jì)心理學(xué)家在對(duì)人腦及其視覺(jué)生理機(jī)制的研究上取得了顯著進(jìn)展。在視覺(jué)藝術(shù)作品中，一系列色彩、圖形和空間關(guān)系的呈現(xiàn)，都是視覺(jué)藝術(shù)家經(jīng)過(guò)反復(fù)斟酌的結(jié)果。他們思考著哪種顏色和圖形會(huì)更加醒目，如何合理組織空間，以及在何種情況下應(yīng)該用圖像代替文字來(lái)表達(dá)概念。這樣經(jīng)過(guò)深思熟慮的作品，能夠有效規(guī)避人類視覺(jué)的弱點(diǎn)，充分激發(fā)用戶對(duì)主體的能動(dòng)性和創(chuàng)造性認(rèn)識(shí)，讓觀賞者和使用者獲得愉悅的視覺(jué)體驗(yàn)。這種主動(dòng)的視覺(jué)感知能夠更好地傳達(dá)作品所要表達(dá)的思想與內(nèi)涵。
如果設(shè)計(jì)師能夠深入了解并分析用戶的視覺(jué)系統(tǒng)和心理，就能設(shè)計(jì)出更符合目標(biāo)用戶需求的 UI 交互產(chǎn)品。例如，通過(guò)對(duì)用戶視覺(jué)注意力的研究，設(shè)計(jì)師可以在界面中合理布局關(guān)鍵元素，使其更容易被用戶察覺(jué)。同時(shí)，根據(jù)用戶的色彩偏好和心理預(yù)期，選擇合適的色彩方案，營(yíng)造出舒適的視覺(jué)氛圍。此外，設(shè)計(jì)師還可以利用用戶對(duì)圖形的認(rèn)知習(xí)慣，設(shè)計(jì)簡(jiǎn)潔明了的圖標(biāo)和界面元素，提高用戶的操作效率。總之，對(duì)視覺(jué)思維的深入理解和運(yùn)用，將為 UI 設(shè)計(jì)帶來(lái)更多的創(chuàng)新和突破。
人類的感知系統(tǒng)豐富多彩，主要分為聽覺(jué)、味覺(jué)、視覺(jué)、觸覺(jué)、嗅覺(jué)這五大類別。其中，令人驚嘆的是，高達(dá) 90% 的感知竟然來(lái)源于視覺(jué)系統(tǒng)。這一特性使得界面產(chǎn)品的設(shè)計(jì)緊緊圍繞著用戶利用視覺(jué)刺激思維以及人機(jī)交互細(xì)處理模式來(lái)實(shí)現(xiàn)人機(jī)互動(dòng)，進(jìn)而達(dá)成傳遞或獲取信息的目標(biāo)。
比如當(dāng)下流行的各類手機(jī) APP，以其精美的界面設(shè)計(jì)吸引著用戶。當(dāng)我們打開一款音樂(lè)播放軟件，絢麗的色彩搭配、簡(jiǎn)潔明了的圖標(biāo)布局，瞬間抓住我們的眼球，讓我們能夠快速找到自己想聽的歌曲。這就是視覺(jué)設(shè)計(jì)在人機(jī)交互中的重要作用，通過(guò)視覺(jué)刺激引導(dǎo)用戶進(jìn)行操作。
在這個(gè)過(guò)程中，我們常常能聽到界面產(chǎn)品的開發(fā)人員發(fā)出這樣的抱怨：“我們討厭交互設(shè)計(jì)。” 而交互設(shè)計(jì)師則會(huì)堅(jiān)定地表示：“我們不需要圖形。” 然而，視覺(jué)設(shè)計(jì)師卻往往對(duì)來(lái)自各方面的意見持相反態(tài)度，顯得一廂情愿。
但事實(shí)上，視覺(jué)設(shè)計(jì)絕非孤立的存在，它是在 UI 設(shè)計(jì)中可用性和交互設(shè)計(jì)研究的綜合體現(xiàn)。例如一些知名的電商平臺(tái)，其界面設(shè)計(jì)既考慮了用戶的操作便捷性，又通過(guò)精美的商品圖片展示和富有創(chuàng)意的頁(yè)面布局，滿足用戶的視覺(jué)需求。用戶在瀏覽商品時(shí)，流暢的交互體驗(yàn)和美觀的視覺(jué)效果相輔相成，提升了用戶的購(gòu)物體驗(yàn)。
視覺(jué)思維，宛如一座神奇的橋梁，將感知與思維、藝術(shù)與科學(xué)緊密地結(jié)合在一起。它能夠?qū)⑷祟惐灸艿囊曈X(jué)感知、圖形設(shè)計(jì)以及視覺(jué)可視化巧妙地聯(lián)系起來(lái)。在滿足使用功能設(shè)計(jì)的基礎(chǔ)上，現(xiàn)代 GUI 設(shè)計(jì)已然成為一種輔助交互的強(qiáng)大力量，它不僅能滿足用戶的感知需求，還能迎合審美需求以及自我實(shí)現(xiàn)需求，成為功能性十足的視覺(jué)設(shè)計(jì)杰作。它就像一顆璀璨的明珠，在數(shù)字世界中散發(fā)著獨(dú)特的魅力，為用戶帶來(lái)前所未有的體驗(yàn)。
在 UI 交互體驗(yàn)設(shè)計(jì)中，我們確實(shí)應(yīng)當(dāng)將這樣的交互設(shè)計(jì)視作用戶對(duì)品牌的認(rèn)知工具和用于信息傳遞的重要渠道。
從處理平面圖像的角度來(lái)看，人類的大腦具有強(qiáng)大的能力，能夠在一定程度上通過(guò)思維進(jìn)行心智圖像的建立。想象一下，當(dāng)我們?cè)谀X海中構(gòu)思一幅美麗的風(fēng)景或者一個(gè)復(fù)雜的場(chǎng)景時(shí)，各種元素在思維的畫布上逐漸清晰起來(lái)。然而，當(dāng)這些圖像被紙張、熒幕等媒介物表現(xiàn)出來(lái)時(shí)，情況又發(fā)生了變化。我們能夠把網(wǎng)頁(yè)、圖標(biāo)、信息圖表等可視化指令經(jīng)過(guò)視覺(jué)思維的處理過(guò)程，快速地解決問(wèn)題。比如，當(dāng)我們?yōu)g覽一個(gè)設(shè)計(jì)精美的網(wǎng)頁(yè)時(shí)，清晰的布局、醒目的圖標(biāo)和直觀的信息圖表能夠迅速引導(dǎo)我們找到所需的內(nèi)容，讓我們?cè)诙虝r(shí)間內(nèi)獲取關(guān)鍵信息。
而在 UI 交互體驗(yàn)設(shè)計(jì)中，“視覺(jué)思維” 手段更是發(fā)揮著獨(dú)特的作用。它能夠幫助用戶提前整理視覺(jué)引導(dǎo)任務(wù)，為用戶的交互之旅提供清晰的方向。不同的用戶有著不同的需求和偏好，“視覺(jué)思維” 可以根據(jù)這些差異增加視覺(jué)注意力的多樣性。對(duì)于喜歡簡(jiǎn)潔風(fēng)格的用戶，簡(jiǎn)潔明了的界面設(shè)計(jì)和少量但突出的視覺(jué)元素能夠吸引他們的注意力；而對(duì)于追求豐富體驗(yàn)的用戶，多彩的色彩搭配和動(dòng)態(tài)的視覺(jué)效果則更能滿足他們的需求。這樣的差異化設(shè)計(jì)使得不同類型的用戶都能在交互過(guò)程中找到滿足自己需求的視覺(jué)引導(dǎo)。
同時(shí)，“視覺(jué)思維” 能使人類本能的認(rèn)知線索在視覺(jué)圖形語(yǔ)言處理中直接快速切換。在用戶潛意識(shí)的情況下，利用用戶自身的視覺(jué)引導(dǎo)去完成交互任務(wù)，大大縮短思考的時(shí)間。例如，在一款游戲應(yīng)用中，巧妙的色彩變化和圖形動(dòng)畫可以在用戶不經(jīng)意間引導(dǎo)他們進(jìn)行操作，讓他們?cè)谙硎苡螒虻倪^(guò)程中自然地完成各種交互任務(wù)，而不會(huì)感到繁瑣和困惑。
總之，在 UI 交互體驗(yàn)設(shè)計(jì)中，“視覺(jué)思維” 以其獨(dú)特的優(yōu)勢(shì)成為了連接用戶與品牌、實(shí)現(xiàn)信息高效傳遞的關(guān)鍵手段。通過(guò)差異化的設(shè)計(jì)和巧妙的視覺(jué)引導(dǎo)，它為用戶帶來(lái)了更加便捷、愉悅的交互體驗(yàn)。
蘋果的 iOS 系統(tǒng)以其簡(jiǎn)潔、美觀的界面設(shè)計(jì)而聞名。圖標(biāo)設(shè)計(jì)簡(jiǎn)潔直觀，色彩搭配和諧，能夠讓用戶一眼就識(shí)別出不同的應(yīng)用功能。例如，相機(jī)圖標(biāo)是一個(gè)逼真的相機(jī)造型，讓人一看就知道其功能。在交互過(guò)程中，動(dòng)畫效果流暢自然，如打開應(yīng)用時(shí)的漸顯效果、關(guān)閉應(yīng)用時(shí)的收縮效果等，這些動(dòng)畫不僅增加了視覺(jué)吸引力，還為用戶提供了操作反饋，引導(dǎo)用戶的視覺(jué)注意力，讓用戶在操作過(guò)程中更加流暢和舒適。
二、Airbnb
Airbnb 的界面設(shè)計(jì)充滿了故事性和吸引力。在首頁(yè)，精美的圖片展示了各種獨(dú)特的房源，吸引用戶的目光。圖片的選擇和排版都經(jīng)過(guò)精心設(shè)計(jì)，能夠讓用戶快速了解房源的特色。在搜索結(jié)果頁(yè)面，清晰的布局和簡(jiǎn)潔的信息展示讓用戶能夠輕松比較不同房源的價(jià)格、位置等關(guān)鍵信息。同時(shí)，地圖視圖的交互設(shè)計(jì)也非常出色，用戶可以通過(guò)拖動(dòng)地圖直觀地查看不同地區(qū)的房源分布，這種視覺(jué)引導(dǎo)方式大大提高了用戶的搜索效率。
三、微信
微信的界面簡(jiǎn)潔易用，圖標(biāo)和文字的搭配恰到好處。綠色的主色調(diào)給人一種清新、舒適的感覺(jué)。在聊天界面中，不同類型的消息有不同的顯示方式，如文字、圖片、語(yǔ)音等，讓用戶能夠快速區(qū)分。朋友圈的設(shè)計(jì)也充分運(yùn)用了視覺(jué)思維，用戶可以通過(guò)圖片、視頻等多種形式分享自己的生活，點(diǎn)贊和評(píng)論的互動(dòng)方式也通過(guò)視覺(jué)效果進(jìn)行了明確的提示，增加了用戶之間的互動(dòng)和交流。
為了更好地體現(xiàn)用戶交互性能，我們確實(shí)需要在整個(gè)用戶交互體驗(yàn)設(shè)計(jì)過(guò)程之中引入視覺(jué)思維分析模式來(lái)規(guī)范指導(dǎo)設(shè)計(jì)。這一模式就如同一位智慧的導(dǎo)航者，引領(lǐng)著設(shè)計(jì)的方向，確保每一個(gè)環(huán)節(jié)都能最大程度地滿足用戶的需求和期望。
對(duì)整個(gè)設(shè)計(jì)過(guò)程中一系列層級(jí)結(jié)構(gòu)進(jìn)行視覺(jué)歸納，是一項(xiàng)至關(guān)重要的任務(wù)。
從 UI 設(shè)計(jì)過(guò)程中最初的方案構(gòu)架開始，就如同搭建一座宏偉建筑的基石，需要深思熟慮。設(shè)計(jì)師要以視覺(jué)思維為導(dǎo)向，考慮如何讓方案構(gòu)架既具有創(chuàng)新性又符合用戶的使用習(xí)慣。草圖階段，則是將創(chuàng)意初步呈現(xiàn)在紙上的過(guò)程，此時(shí)要充分發(fā)揮視覺(jué)思維的作用，捕捉那些瞬間的靈感，用簡(jiǎn)潔而有力的線條勾勒出未來(lái)產(chǎn)品的輪廓。
動(dòng)態(tài) layout 的設(shè)計(jì)更是離不開視覺(jué)思維，它要讓頁(yè)面的布局在動(dòng)態(tài)變化中保持流暢和自然，給用戶帶來(lái)舒適的視覺(jué)感受。而后期特效的安排，則如同為產(chǎn)品披上一件華麗的外衣，需要恰到好處地運(yùn)用，既不能過(guò)于耀眼而分散用戶的注意力，也不能過(guò)于平淡而無(wú)法引起用戶的興趣。
例如，如何使整個(gè)方案更符合目標(biāo)用戶的色彩定位，這是一個(gè)需要深入思考的問(wèn)題。
不同的用戶群體對(duì)色彩有著不同的偏好和情感反應(yīng)。設(shè)計(jì)師要通過(guò)對(duì)目標(biāo)用戶的調(diào)研和分析，了解他們的文化背景、年齡層次、性別差異等因素，從而確定最適合的色彩方案。比如，對(duì)于年輕的用戶群體，可能更傾向于鮮艷、活潑的色彩；而對(duì)于商務(wù)用戶，則可能更喜歡穩(wěn)重、大氣的色彩。通過(guò)精準(zhǔn)的色彩定位，能夠讓用戶在第一時(shí)間對(duì)產(chǎn)品產(chǎn)生好感。
如何讓復(fù)雜的層級(jí)關(guān)系在視覺(jué)上顯示得更為簡(jiǎn)單且明朗化，也是視覺(jué)思維分析的要點(diǎn)之一。
結(jié)合設(shè)計(jì)認(rèn)知心理學(xué)總結(jié)出一套適合當(dāng)前項(xiàng)目的用戶交互體驗(yàn)設(shè)計(jì)的視覺(jué)規(guī)范，是實(shí)現(xiàn)優(yōu)秀設(shè)計(jì)的關(guān)鍵。設(shè)計(jì)認(rèn)知心理學(xué)研究人類在設(shè)計(jì)過(guò)程中的認(rèn)知和心理活動(dòng)，它可以為設(shè)計(jì)師提供寶貴的理論支持。設(shè)計(jì)師可以借鑒設(shè)計(jì)認(rèn)知心理學(xué)的研究成果，制定出符合用戶認(rèn)知習(xí)慣的視覺(jué)規(guī)范。比如，遵循簡(jiǎn)潔性原則，避免過(guò)多的視覺(jué)干擾；運(yùn)用一致性原則，讓用戶在不同的頁(yè)面和功能模塊中都能保持一致的視覺(jué)體驗(yàn)；注重可讀性原則，確保文字和圖標(biāo)易于識(shí)別和理解。通過(guò)建立一套科學(xué)合理的視覺(jué)規(guī)范，能夠提高設(shè)計(jì)的效率和質(zhì)量，為用戶帶來(lái)更加出色的交互體驗(yàn)。
下面介紹下我在過(guò)往項(xiàng)目中的實(shí)際案例，看看如何處理復(fù)雜的視覺(jué)層級(jí)
盒馬店倉(cāng)揀貨是門店倉(cāng)儲(chǔ)作業(yè)中的一個(gè)重要環(huán)節(jié)，員工需要用到PDA實(shí)時(shí)接收倉(cāng)儲(chǔ)系統(tǒng)分配的揀貨任務(wù)，并為揀貨員提供清晰的任務(wù)指引，包括商品的位置、數(shù)量等信息，它就像一個(gè)智能導(dǎo)航儀，指引揀貨員快速找到目標(biāo)商品，PDA中就需要進(jìn)行界面設(shè)計(jì)，保證揀貨員能高效的完成任務(wù)，但是實(shí)際倉(cāng)的環(huán)境是極其復(fù)雜的，往往店倉(cāng)環(huán)境較為昏暗且存在溫差，同時(shí)揀貨員往往是邊走邊揀貨，整體過(guò)程是非常緊張和匆忙的，這就對(duì)視覺(jué)識(shí)別效率要求非常高。
1.接收訂單：當(dāng)顧客在盒馬 APP 上下單后，訂單信息會(huì)同步傳輸?shù)介T店的倉(cāng)儲(chǔ)系統(tǒng)。
2.揀貨任務(wù)分配：倉(cāng)儲(chǔ)系統(tǒng)根據(jù)訂單內(nèi)容，將揀貨任務(wù)分配給相應(yīng)的揀貨員，并將任務(wù)信息發(fā)送到揀貨員手中的 PDA（掌上電腦）設(shè)備上。例如，某顧客下單購(gòu)買了蘋果、牛奶和面包，系統(tǒng)就會(huì)指示揀貨員去相應(yīng)的區(qū)域揀取這些商品。
3.商品揀選：揀貨員根據(jù) PDA 上的指示，前往指定的貨架區(qū)域。通過(guò) PDA 掃描貨架上商品的條形碼或二維碼，確認(rèn)商品信息無(wú)誤后，將商品揀選出來(lái)放入揀貨籃或推車中。在揀貨過(guò)程中，揀貨員需要嚴(yán)格按照商品的數(shù)量和規(guī)格進(jìn)行揀選，避免出現(xiàn)錯(cuò)揀、漏揀的情況。
4.復(fù)核與打包：揀貨完成后，揀貨員將揀選好的商品送到復(fù)核區(qū)，由復(fù)核人員對(duì)商品進(jìn)行再次核對(duì)，確保商品的種類、數(shù)量、質(zhì)量等與訂單一致。復(fù)核無(wú)誤后，根據(jù)商品的特性和訂單要求進(jìn)行打包，例如，對(duì)于生鮮商品需要使用特殊的包裝材料和方式，以保證商品的新鮮度和品質(zhì)1。
5.出貨：打包完成的商品被放置在出貨區(qū)，等待配送人員前來(lái)取貨，進(jìn)行后續(xù)的配送環(huán)節(jié)，確保商品能夠及時(shí)、準(zhǔn)確地送達(dá)顧客手中。
在這個(gè)過(guò)程中我們可以發(fā)現(xiàn)從“行為、感受、環(huán)境、設(shè)備”幾個(gè)維度來(lái)看，我們需要關(guān)注的點(diǎn)是非常多的，如下面所示我們需從效率和步驟感入手，保證界面清晰無(wú)障礙的基礎(chǔ)上對(duì)小小的屏幕進(jìn)行占比的優(yōu)化，同時(shí)加入情感化和溫度感，這是最理想的設(shè)計(jì)目標(biāo)。
設(shè)計(jì)前需關(guān)注的內(nèi)容
對(duì)目標(biāo)用戶群體進(jìn)行深入調(diào)研，了解他們的年齡、性別、職業(yè)、文化背景等基本信息。
這些因素會(huì)影響用戶對(duì)色彩、圖形、布局等視覺(jué)元素的偏好。分析用戶的視覺(jué)感知優(yōu)勢(shì)和弱勢(shì)。例如，對(duì)于老年用戶，可能需要更大的字體和更鮮明的色彩對(duì)比；對(duì)于視力受損的用戶，可能需要高對(duì)比度的界面和清晰的圖標(biāo)。通過(guò)用戶訪談、問(wèn)卷調(diào)查、觀察等方法，收集用戶對(duì)現(xiàn)有產(chǎn)品或類似產(chǎn)品的視覺(jué)反饋，了解他們的喜好和不滿之處，為后續(xù)設(shè)計(jì)提供依據(jù)。
色彩定位根據(jù)目標(biāo)用戶群體的特點(diǎn)和產(chǎn)品的定位，確定合適的色彩方案。
色彩可以傳達(dá)不同的情感和氛圍，如藍(lán)色通常給人沉穩(wěn)、可靠的感覺(jué)，紅色則充滿活力和激情?？紤]色彩的對(duì)比度和可讀性。高對(duì)比度的色彩組合可以提高文字和圖標(biāo)的清晰度，便于用戶閱讀和識(shí)別。同時(shí)，要確保色彩在不同的設(shè)備和環(huán)境下都能保持良好的顯示效果。
設(shè)計(jì)規(guī)劃階段（視覺(jué)層研究）
方案構(gòu)架運(yùn)用視覺(jué)思維，從整體上規(guī)劃產(chǎn)品的架構(gòu)和布局?？紤]用戶的使用流程和場(chǎng)景，將功能模塊進(jìn)行合理的分組和排列，使界面簡(jiǎn)潔明了，易于導(dǎo)航。確定主要的視覺(jué)焦點(diǎn)和引導(dǎo)路徑。通過(guò)大小、顏色、位置等方式突出關(guān)鍵信息和重要操作，引導(dǎo)用戶的注意力，提高交互效率。
功能色視覺(jué)研究保證視覺(jué)可讀性和清晰性
特效應(yīng)用謹(jǐn)慎地選擇和應(yīng)用特效，如陰影、漸變、發(fā)光等。特效可以增強(qiáng)界面的視覺(jué)吸引力，但過(guò)多或不當(dāng)?shù)氖褂每赡軙?huì)導(dǎo)致視覺(jué)混亂和性能問(wèn)題?？紤]特效對(duì)用戶操作的引導(dǎo)作用。例如，使用特效來(lái)突出可點(diǎn)擊的區(qū)域或提示重要信息，可以提高用戶的交互體驗(yàn)。
-
用戶測(cè)試邀請(qǐng)目標(biāo)用戶進(jìn)行用戶測(cè)試，觀察他們?cè)谑褂卯a(chǎn)品過(guò)程中的視覺(jué)反應(yīng)和行為。注意用戶對(duì)不同視覺(jué)元素的關(guān)注程度、理解程度和操作效率。收集用戶的反饋意見，了解他們對(duì)界面設(shè)計(jì)的滿意度和改進(jìn)建議。根據(jù)用戶的反饋，及時(shí)調(diào)整和優(yōu)化設(shè)計(jì)。
-
數(shù)據(jù)分析利用數(shù)據(jù)分析工具，收集用戶在使用產(chǎn)品過(guò)程中的行為數(shù)據(jù)，如點(diǎn)擊次數(shù)、停留時(shí)間、頁(yè)面跳轉(zhuǎn)路徑等。通過(guò)分析這些數(shù)據(jù)，可以了解用戶的視覺(jué)注意力分布和交互習(xí)慣，為進(jìn)一步優(yōu)化設(shè)計(jì)提供依據(jù)。
對(duì)設(shè)計(jì)組件進(jìn)行沉淀和歸納，同時(shí)定義好設(shè)計(jì)樣板間。
-
組件識(shí)別，需要對(duì)已有的設(shè)計(jì)項(xiàng)目進(jìn)行全面梳理，識(shí)別出其中重復(fù)出現(xiàn)的元素和模塊。這些元素可以包括按鈕、輸入框、圖標(biāo)、導(dǎo)航欄、卡片等。例如，在一個(gè)電商網(wǎng)站的設(shè)計(jì)中，商品展示卡片、購(gòu)物車按鈕、搜索框等都是常見的組件。同時(shí)，也要關(guān)注不同項(xiàng)目中具有相似功能或外觀的元素，它們可能經(jīng)過(guò)適當(dāng)調(diào)整后可以歸納為同一類組件。比如，不同頁(yè)面的提示信息框，雖然在內(nèi)容和位置上有所不同，但在風(fēng)格和交互方式上可能具有共性。
-
規(guī)范制定對(duì)識(shí)別出的組件進(jìn)行規(guī)范制定，包括尺寸、顏色、字體、間距等方面的統(tǒng)一規(guī)定。例如，確定按鈕的標(biāo)準(zhǔn)尺寸、顏色搭配和文字樣式，確保在不同的頁(yè)面和場(chǎng)景中都能保持一致的外觀和交互效果。制定組件的使用規(guī)范，明確在什么情況下應(yīng)該使用哪種組件，以及如何進(jìn)行組合和布局。例如，規(guī)定導(dǎo)航欄的位置和結(jié)構(gòu)，以及不同級(jí)別頁(yè)面的導(dǎo)航方式。
-
分類整理將規(guī)范后的組件進(jìn)行分類整理，建立一個(gè)清晰的組件庫(kù)?？梢园凑展δ堋㈩愋突蚴褂脠?chǎng)景進(jìn)行分類，方便設(shè)計(jì)師在后續(xù)的設(shè)計(jì)中快速查找和使用。比如，將組件分為界面組件（如按鈕、輸入框等）、交互組件（如彈窗、下拉菜單等）、布局組件（如網(wǎng)格系統(tǒng)、分欄布局等）。
-
持續(xù)更新隨著設(shè)計(jì)項(xiàng)目的不斷進(jìn)行，新的組件可能會(huì)不斷出現(xiàn)，舊的組件也可能需要進(jìn)行優(yōu)化和調(diào)整。因此，需要建立一個(gè)持續(xù)更新的機(jī)制，定期對(duì)組件庫(kù)進(jìn)行審查和更新，確保組件庫(kù)始終保持活力和實(shí)用性。
在現(xiàn)代的 UI 設(shè)計(jì)中，往往存在著眾多的功能模塊和信息層級(jí)。如果處理不當(dāng)，就會(huì)讓用戶感到混亂和困惑。設(shè)計(jì)師可以運(yùn)用視覺(jué)層次、分組、對(duì)比等手法，將復(fù)雜的層級(jí)關(guān)系進(jìn)行梳理和簡(jiǎn)化。例如，通過(guò)不同的字體大小、顏色深淺、圖標(biāo)形狀等方式來(lái)區(qū)分不同的層級(jí)，讓用戶能夠輕松地理解和操作。
如何保證特效的使用恰到好處，不會(huì)引起用戶的使用誤解，同樣需要設(shè)計(jì)師的精心考量。特效可以為產(chǎn)品增添趣味性和吸引力，但如果使用不當(dāng)，就會(huì)適得其反。設(shè)計(jì)師要根據(jù)產(chǎn)品的特點(diǎn)和用戶的需求，合理地選擇特效的類型和強(qiáng)度。比如，在一些需要強(qiáng)調(diào)操作反饋的地方，可以使用適度的動(dòng)畫特效，讓用戶清楚地知道自己的操作是否成功；而在一些重要的信息展示區(qū)域，則要避免使用過(guò)于花哨的特效，以免干擾用戶的閱讀。
設(shè)計(jì)師不僅需要對(duì)人類視覺(jué)系統(tǒng)有一定的了解，同時(shí)也需要對(duì)目標(biāo)用戶視覺(jué)感知的優(yōu)勢(shì)和弱勢(shì)進(jìn)行分析和歸納。人類的視覺(jué)系統(tǒng)是一個(gè)復(fù)雜而神奇的系統(tǒng)，它有著自己的特點(diǎn)和規(guī)律。設(shè)計(jì)師要了解人類視覺(jué)的注意力機(jī)制、色彩感知、空間感知等方面的知識(shí)，以便更好地運(yùn)用視覺(jué)元素進(jìn)行設(shè)計(jì)。同時(shí)，不同的目標(biāo)用戶群體在視覺(jué)感知方面也存在著差異。比如，老年人可能對(duì)色彩的對(duì)比度要求更高，而視力有障礙的用戶則需要更加清晰的文字和圖標(biāo)。設(shè)計(jì)師要通過(guò)對(duì)目標(biāo)用戶的視覺(jué)感知優(yōu)勢(shì)和弱勢(shì)進(jìn)行分析，制定出相應(yīng)的設(shè)計(jì)策略，確保產(chǎn)品能夠滿足不同用戶的需求。
