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