国产日产亚洲系列最新美使用方法,国产av无码综合一区

首頁

172024-10

跨平臺手機(jī)界面設(shè)計(jì)怎么做

在當(dāng)今數(shù)字化的時(shí)代，手機(jī)應(yīng)用的使用場景日益豐富，用戶對于在不同平臺上都能獲得一致且優(yōu)質(zhì)的體驗(yàn)有著越來越高的期望。因此，跨平臺手機(jī)界面設(shè)計(jì)成為了開發(fā)者和設(shè)計(jì)師們面臨的重要挑戰(zhàn)。

要做好跨平臺手機(jī)界面設(shè)計(jì)，首先需要深入理解不同平臺的特點(diǎn)和用戶習(xí)慣。比如，iOS 系統(tǒng)和 Android 系統(tǒng)在操作邏輯、界面風(fēng)格和交互方式上都存在一定的差異。iOS 通常強(qiáng)調(diào)簡潔、直觀和流暢的交互，而 Android 則更具開放性和多樣性。

保持一致性是關(guān)鍵。這包括視覺元素的一致性，如顏色、字體、圖標(biāo)等，讓用戶在不同平臺上都能迅速識別和熟悉應(yīng)用的品牌形象。同時(shí)，功能和操作流程也應(yīng)盡可能保持一致，減少用戶在切換平臺時(shí)的學(xué)習(xí)成本。

響應(yīng)式布局是跨平臺設(shè)計(jì)的核心技術(shù)之一。根據(jù)不同設(shè)備的屏幕尺寸和分辨率，自動調(diào)整界面元素的布局和大小，確保內(nèi)容的可讀性和可用性。例如，在小屏幕設(shè)備上，可以采用簡潔的單列布局，而在大屏幕設(shè)備上，則可以展示更多的信息和功能。

為了實(shí)現(xiàn)高效的跨平臺開發(fā)，選擇合適的框架和工具也非常重要。諸如 React Native、Flutter 等框架，能夠幫助開發(fā)者快速構(gòu)建跨平臺應(yīng)用，同時(shí)保持良好的性能和用戶體驗(yàn)。

優(yōu)化性能也是不容忽視的一點(diǎn)。不同平臺的硬件性能和網(wǎng)絡(luò)環(huán)境有所不同，需要針對這些差異進(jìn)行優(yōu)化，確保應(yīng)用在各種設(shè)備上都能流暢運(yùn)行，加載速度快，不出現(xiàn)卡頓和延遲。

此外，進(jìn)行充分的用戶測試是必不可少的環(huán)節(jié)。收集不同平臺用戶的反饋和意見，及時(shí)發(fā)現(xiàn)并解決可能存在的問題，不斷優(yōu)化和改進(jìn)界面設(shè)計(jì)。

一個(gè)成功的跨平臺手機(jī)界面設(shè)計(jì)案例是某知名的社交媒體應(yīng)用。它在 iOS 和 Android 平臺上都保持了統(tǒng)一的品牌風(fēng)格，同時(shí)根據(jù)不同平臺的特點(diǎn)進(jìn)行了細(xì)微的調(diào)整，如導(dǎo)航欄的位置和操作方式。通過響應(yīng)式布局，無論是在大屏幕的平板電腦還是小屏幕的手機(jī)上，都能提供出色的用戶體驗(yàn)。

據(jù)相關(guān)數(shù)據(jù)顯示，采用優(yōu)秀跨平臺設(shè)計(jì)的應(yīng)用，其用戶活躍度和留存率都明顯高于僅針對單一平臺優(yōu)化的應(yīng)用。

總之，跨平臺手機(jī)界面設(shè)計(jì)需要綜合考慮多個(gè)因素，包括平臺特點(diǎn)、一致性、響應(yīng)式布局、性能優(yōu)化和用戶測試等。只有精心設(shè)計(jì)和不斷優(yōu)化，才能滿足用戶在不同平臺上的需求，提升應(yīng)用的競爭力和用戶滿意度。在未來，隨著技術(shù)的不斷發(fā)展和新平臺的出現(xiàn)，跨平臺設(shè)計(jì)將繼續(xù)面臨新的挑戰(zhàn)和機(jī)遇，需要我們不斷探索和創(chuàng)新。

評論(0) 瀏覽(410)

172024-10

無障礙設(shè)計(jì)原則在手機(jī)界面中的應(yīng)用

藍(lán)藍(lán)設(shè)計(jì)的小編

在當(dāng)今數(shù)字化的時(shí)代，手機(jī)已經(jīng)成為人們生活中不可或缺的工具。然而，對于一些特殊群體，如視障者、聽障者、老年人以及身體功能有障礙的人群，使用手機(jī)可能會面臨諸多挑戰(zhàn)。這時(shí)，無障礙設(shè)計(jì)原則在手機(jī)界面中的應(yīng)用就顯得尤為重要。

無障礙設(shè)計(jì)原則的核心是確保所有人，無論其身體狀況如何，都能夠平等、方便地使用產(chǎn)品和服務(wù)。在手機(jī)界面設(shè)計(jì)中，這意味著要從多個(gè)方面進(jìn)行考慮和優(yōu)化。

首先，對于視障者來說，屏幕朗讀功能是至關(guān)重要的。通過語音輔助，手機(jī)能夠?qū)⑵聊簧系奈淖?、圖標(biāo)和操作提示轉(zhuǎn)化為聲音，幫助他們獲取信息。同時(shí)，高對比度的色彩搭配也能讓視障者更清晰地分辨界面元素。例如，使用黑白對比強(qiáng)烈的配色，或者為重要的按鈕和文字提供醒目的顏色標(biāo)識。

對于聽障者，可視化的提示和震動反饋則是關(guān)鍵。當(dāng)有來電、短信或其他通知時(shí)，除了聲音提示，強(qiáng)烈的視覺閃爍和明顯的震動能夠確保他們及時(shí)察覺。

對于老年人和操作不靈活的人群，大字體和簡潔明了的界面布局能極大地提高可用性。增大圖標(biāo)和按鈕的尺寸，減少操作步驟，提供清晰易懂的圖標(biāo)和文字說明，都能讓他們更輕松地使用手機(jī)。

此外，無障礙設(shè)計(jì)還應(yīng)考慮到認(rèn)知障礙人群的需求。避免復(fù)雜的操作流程和難以理解的術(shù)語，采用直觀、易懂的設(shè)計(jì)語言，降低使用門檻。

許多手機(jī)廠商已經(jīng)開始重視無障礙設(shè)計(jì)，并取得了顯著的成果。比如，蘋果的 VoiceOver 功能，讓視障用戶能夠通過觸摸和滑動來操作手機(jī)，獲取各種信息。

據(jù)統(tǒng)計(jì)，全球有超過 10 億的人口存在某種形式的殘疾，而無障礙設(shè)計(jì)能夠讓這部分人群更好地融入數(shù)字社會，享受科技帶來的便利。

一個(gè)成功的無障礙手機(jī)界面設(shè)計(jì)案例是某款專門為老年人開發(fā)的手機(jī)應(yīng)用。它的界面簡潔大方，字體超大，圖標(biāo)清晰，并且提供了詳細(xì)的操作指南和語音提示。老年人可以輕松地?fù)艽螂娫?、發(fā)送短信、查看天氣等，極大地提高了他們的生活質(zhì)量。

總之，無障礙設(shè)計(jì)原則在手機(jī)界面中的應(yīng)用不僅是一種社會責(zé)任，也是提升產(chǎn)品包容性和用戶滿意度的重要途徑。通過關(guān)注特殊群體的需求，我們能夠打造出更加人性化、溫暖且具有廣泛適用性的手機(jī)界面，讓科技真正惠及每一個(gè)人。在未來，隨著技術(shù)的不斷發(fā)展和社會意識的提高，相信無障礙設(shè)計(jì)將在手機(jī)領(lǐng)域發(fā)揮更大的作用，為更多的人創(chuàng)造更美好的數(shù)字生活體驗(yàn)。

評論(0) 瀏覽(381)

172024-10

手機(jī)界面設(shè)計(jì)風(fēng)格演變

藍(lán)藍(lán)設(shè)計(jì)的小編

在科技日新月異的今天，手機(jī)已經(jīng)成為我們生活中不可或缺的一部分，而手機(jī)界面設(shè)計(jì)風(fēng)格也經(jīng)歷了一系列引人注目的演變。

評論(0) 瀏覽(337)

172024-10

打動用戶的關(guān)鍵：用戶體驗(yàn)地圖實(shí)戰(zhàn)攻略

ui設(shè)計(jì)分享達(dá)人

一、什么是用戶體驗(yàn)地圖？

二、為什么使用用戶體驗(yàn)地圖？

三、什么情況使用用戶體驗(yàn)地圖？

四、用戶體驗(yàn)地圖的組成？

五、用戶體驗(yàn)地圖的制作流程

六、用戶體驗(yàn)地圖案例展示

七、用戶體驗(yàn)地圖總結(jié)

一、什么是用戶體驗(yàn)地圖？

打動用戶的關(guān)鍵：用戶體驗(yàn)地圖實(shí)戰(zhàn)攻略

用戶體驗(yàn)地圖（User Experience Map）是一種用于可視化展示用戶在與產(chǎn)品或服務(wù)互動過程中所經(jīng)歷的各個(gè)接觸點(diǎn)和體驗(yàn)的工具。它幫助團(tuán)隊(duì)深入了解用戶的行為、情感和痛點(diǎn)，從而優(yōu)化用戶體驗(yàn)。

用戶體驗(yàn)地圖（User Experience Map）是產(chǎn)品設(shè)計(jì)前期——用戶研究中很重要的一部分，視角化和圖表的方式，從用戶的角度來表現(xiàn)其和產(chǎn)品/組織/服務(wù)交互的過程，是連續(xù)的視覺時(shí)間和完整故事的多個(gè)互動點(diǎn)。

簡單來說，在用戶定義角色，搭配行為研究、表格調(diào)查和競品分析等數(shù)據(jù)下，構(gòu)思出這個(gè)角色在某個(gè)角色故事下要完成特定目標(biāo)，以反應(yīng)用戶使用某個(gè)特定產(chǎn)品的真實(shí)特性，有助于我們評估現(xiàn)狀、找出用戶真正的痛點(diǎn)，與優(yōu)化整體的體驗(yàn)流程（創(chuàng)造和諧的互動）。

二、為什么使用用戶體驗(yàn)地圖？

使用用戶體驗(yàn)地圖（User Experience Map）在項(xiàng)目中有很多重要的原因，能夠給團(tuán)隊(duì)帶來顯著的價(jià)值，例如：

1、全面理解用戶旅程

可視化用戶體驗(yàn)：用戶體驗(yàn)地圖通過圖形化的方式展示用戶在使用產(chǎn)品或服務(wù)過程中的所有步驟和接觸點(diǎn)，使團(tuán)隊(duì)能夠直觀地看到用戶的整個(gè)旅程。

識別關(guān)鍵時(shí)刻：幫助團(tuán)隊(duì)識別用戶旅程中的關(guān)鍵觸點(diǎn)和情感波動，理解用戶在不同階段的需求和行為。

2、發(fā)現(xiàn)用戶痛點(diǎn)和改進(jìn)機(jī)會

識別痛點(diǎn)：用戶體驗(yàn)地圖能夠揭示用戶在使用過程中的痛點(diǎn)和挑戰(zhàn)，使團(tuán)隊(duì)可以針對這些問題制定解決方案。

挖掘改進(jìn)機(jī)會：通過分析用戶行為和情感波動，團(tuán)隊(duì)可以找到提升用戶體驗(yàn)的機(jī)會，從而優(yōu)化產(chǎn)品或服務(wù)。

3. 增強(qiáng)團(tuán)隊(duì)協(xié)作和溝通

統(tǒng)一理解：用戶體驗(yàn)地圖作為一種直觀的溝通工具，使跨職能團(tuán)隊(duì)（如產(chǎn)品經(jīng)理、設(shè)計(jì)師、開發(fā)人員和市場團(tuán)隊(duì)）能夠共享對用戶體驗(yàn)的統(tǒng)一理解。

促進(jìn)協(xié)作：通過共同創(chuàng)建和討論用戶體驗(yàn)地圖，團(tuán)隊(duì)成員可以更好地協(xié)作，提出建設(shè)性的意見和建議。

4. 驅(qū)動以用戶為中心的設(shè)計(jì)

以用戶為中心：用戶體驗(yàn)地圖強(qiáng)調(diào)從用戶的角度出發(fā)，關(guān)注用戶的需求、情感和行為，推動以用戶為中心的設(shè)計(jì)和開發(fā)。

提升用戶滿意度：通過優(yōu)化用戶旅程中的各個(gè)觸點(diǎn)和體驗(yàn)，團(tuán)隊(duì)可以提升用戶滿意度和忠誠度。

5. 支持決策制定

數(shù)據(jù)驅(qū)動決策：用戶體驗(yàn)地圖基于用戶研究和數(shù)據(jù)分析，為決策提供可靠的依據(jù)，減少主觀判斷和猜測。

優(yōu)先級管理：通過識別用戶體驗(yàn)中的關(guān)鍵問題和機(jī)會，團(tuán)隊(duì)可以更好地確定優(yōu)先級，集中資源解決最重要的問題。

6. 提高用戶體驗(yàn)設(shè)計(jì)的效率和效果

明確目標(biāo)和方向：用戶體驗(yàn)地圖幫助團(tuán)隊(duì)明確設(shè)計(jì)目標(biāo)和方向，減少反復(fù)修改和溝通成本，提高設(shè)計(jì)效率。

驗(yàn)證設(shè)計(jì)假設(shè)：通過用戶體驗(yàn)地圖，團(tuán)隊(duì)可以驗(yàn)證設(shè)計(jì)假設(shè)和概念，確保設(shè)計(jì)方案符合用戶需求和期望。

三、什么情況使用用戶體驗(yàn)地圖？

用戶體驗(yàn)地圖（User Experience Map）在多種情況下都可以使用，能夠幫助團(tuán)隊(duì)更好地理解和優(yōu)化用戶體驗(yàn)。例如：

1.產(chǎn)品或服務(wù)的初期開發(fā)階段

定義產(chǎn)品概念：在開發(fā)新產(chǎn)品或服務(wù)時(shí)，用戶體驗(yàn)地圖幫助團(tuán)隊(duì)理解用戶需求和期望，確保產(chǎn)品設(shè)計(jì)符合用戶需求。

設(shè)計(jì)用戶旅程：通過用戶體驗(yàn)地圖，團(tuán)隊(duì)可以詳細(xì)規(guī)劃用戶與產(chǎn)品互動的每個(gè)步驟和觸點(diǎn)，確保用戶旅程流暢且無障礙。

示例：

一家創(chuàng)業(yè)公司在開發(fā)一款新的移動應(yīng)用時(shí)，通過用戶體驗(yàn)地圖了解目標(biāo)用戶的需求和使用習(xí)慣，從而設(shè)計(jì)出更符合用戶期望的產(chǎn)品。

2.現(xiàn)有產(chǎn)品或服務(wù)的優(yōu)化

識別和解決問題：當(dāng)現(xiàn)有產(chǎn)品或服務(wù)存在用戶體驗(yàn)問題時(shí)，用戶體驗(yàn)地圖幫助團(tuán)隊(duì)識別痛點(diǎn)并制定改進(jìn)措施。

提升用戶滿意度：通過分析用戶在不同接觸點(diǎn)的情感和行為，團(tuán)隊(duì)可以找到提升用戶滿意度和忠誠度的機(jī)會。

示例：

一家電商平臺通過用戶體驗(yàn)地圖發(fā)現(xiàn)用戶在結(jié)賬環(huán)節(jié)遇到的困難，優(yōu)化了結(jié)賬流程，顯著提高了用戶滿意度和轉(zhuǎn)化率。

3.跨職能團(tuán)隊(duì)的協(xié)作和溝通

建立共同理解：在涉及多個(gè)部門的項(xiàng)目中，用戶體驗(yàn)地圖幫助不同團(tuán)隊(duì)（如產(chǎn)品、設(shè)計(jì)、開發(fā)、市場）建立對用戶體驗(yàn)的共同理解。

促進(jìn)協(xié)作：通過可視化的用戶旅程，團(tuán)隊(duì)成員可以更有效地討論和協(xié)作，提出有建設(shè)性的改進(jìn)建議。

示例：

一家大型企業(yè)在推出一項(xiàng)新服務(wù)時(shí)，通過用戶體驗(yàn)地圖讓產(chǎn)品經(jīng)理、設(shè)計(jì)師和市場團(tuán)隊(duì)共同參與，確保各團(tuán)隊(duì)對用戶體驗(yàn)的理解一致，從而提高協(xié)作效率。

4.用戶研究和測試階段

記錄用戶反饋：在用戶研究和測試階段，用戶體驗(yàn)地圖幫助記錄和分析用戶反饋，發(fā)現(xiàn)用戶在使用產(chǎn)品過程中的實(shí)際體驗(yàn)。

驗(yàn)證設(shè)計(jì)假設(shè)：通過用戶體驗(yàn)地圖，團(tuán)隊(duì)可以驗(yàn)證設(shè)計(jì)假設(shè)，確保設(shè)計(jì)方案符合用戶需求和期望。

示例：

一家金融科技公司在測試新功能時(shí)，通過用戶體驗(yàn)地圖記錄用戶的使用體驗(yàn)和反饋，優(yōu)化了功能設(shè)計(jì)。

5.制定產(chǎn)品戰(zhàn)略和路線圖

戰(zhàn)略規(guī)劃：用戶體驗(yàn)地圖幫助團(tuán)隊(duì)從用戶角度出發(fā)，制定產(chǎn)品戰(zhàn)略和發(fā)展路線圖，確保產(chǎn)品的發(fā)展方向符合用戶需求。

優(yōu)先級管理：通過識別用戶體驗(yàn)中的關(guān)鍵問題和機(jī)會，團(tuán)隊(duì)可以更好地確定改進(jìn)措施的優(yōu)先級。

示例：

一家健康科技公司在制定未來兩年的產(chǎn)品發(fā)展計(jì)劃時(shí)，通過用戶體驗(yàn)地圖分析用戶需求和市場趨勢，確定了重點(diǎn)開發(fā)的功能和服務(wù)。

6.營銷和客戶支持

提升客戶支持效率：用戶體驗(yàn)地圖幫助識別用戶在尋求支持時(shí)的痛點(diǎn)，優(yōu)化客戶支持流程，提高用戶滿意度。

優(yōu)化營銷策略：通過了解用戶在不同階段的情感和行為，團(tuán)隊(duì)可以制定更有針對性的營銷策略，提升用戶轉(zhuǎn)化率。

示例：

一家SaaS公司通過用戶體驗(yàn)地圖發(fā)現(xiàn)用戶在使用過程中遇到的常見問題，優(yōu)化了客戶支持流程，并根據(jù)用戶行為調(diào)整了營銷策略，提高了客戶留存率。

四、用戶體驗(yàn)地圖的組成？

組成用戶體驗(yàn)地圖（User Experience Map）可以分為八個(gè)部分，分別是：用戶角色（Persona）、場景（Scenario）、階段（Stages）、觸點(diǎn)（Touchpoints）、用戶行為（Actions）、用戶情感（Emotions）、痛點(diǎn)（Pain Points）、機(jī)會（Opportunities）；組成部分整合到一張用戶體驗(yàn)地圖上，團(tuán)隊(duì)可以直觀地看到用戶旅程中的所有關(guān)鍵要素。幫助團(tuán)隊(duì)全面理解用戶在整個(gè)體驗(yàn)過程中的行為、情感和痛點(diǎn)，從而制定更有效的優(yōu)化策略，提升用戶滿意度。下面我們詳細(xì)說明這八個(gè)部分：

1. 用戶角色（Persona）

定義：用戶角色是目標(biāo)用戶的詳細(xì)描述，包括人口統(tǒng)計(jì)信息、行為模式、需求和痛點(diǎn)。

目的：幫助團(tuán)隊(duì)聚焦特定用戶群體的需求和體驗(yàn)，使設(shè)計(jì)和決策更有針對性。

示例：

年齡：25-35歲

職業(yè)：城市白領(lǐng)

興趣愛好：網(wǎng)上購物

需求和痛點(diǎn)：需要便捷快速的購物體驗(yàn)，不喜歡復(fù)雜的結(jié)賬流程

2. 場景（Scenario）

定義：場景是用戶在某一特定情境下與產(chǎn)品或服務(wù)互動的全過程描述。

目的：幫助團(tuán)隊(duì)了解用戶的具體使用情境和目標(biāo)，確保設(shè)計(jì)滿足實(shí)際使用需求。

示例：用戶在下班回家的路上，通過移動應(yīng)用購買晚餐所需的食材。

3. 階段（Stages）

定義：用戶旅程的不同階段，從開始到結(jié)束，包括用戶在每個(gè)階段的主要活動和目標(biāo)。

目的：展示用戶旅程的整體結(jié)構(gòu)，幫助團(tuán)隊(duì)識別每個(gè)階段的關(guān)鍵活動和目標(biāo)。

示例：

發(fā)現(xiàn)（Discovery）、考慮（Consideration）、決策（Decision）、使用（Usage）、回訪（Return）

4. 觸點(diǎn)（Touchpoints）

定義：用戶在每個(gè)階段與產(chǎn)品或服務(wù)的具體接觸點(diǎn)，如網(wǎng)站、客服、實(shí)體店等。

目的：識別用戶與品牌互動的關(guān)鍵時(shí)刻，確保每個(gè)接觸點(diǎn)的體驗(yàn)都得到優(yōu)化。

示例：網(wǎng)站首頁、產(chǎn)品頁面、購物車、結(jié)賬頁面、客服

5. 用戶行為（Actions）

定義：用戶在每個(gè)觸點(diǎn)上的具體行為，如瀏覽網(wǎng)頁、咨詢客服、購買產(chǎn)品等。

目的：展示用戶的具體操作過程，幫助團(tuán)隊(duì)理解用戶的實(shí)際使用方式。

示例：瀏覽產(chǎn)品、加入購物車、填寫訂單信息、支付、聯(lián)系客服

6. 用戶情感（Emotions）

定義：用戶在每個(gè)觸點(diǎn)上的情感體驗(yàn)，包括積極和消極的情感波動。

目的：幫助團(tuán)隊(duì)理解用戶的滿意度和痛點(diǎn)，確保在關(guān)鍵時(shí)刻提供積極的體驗(yàn)。

示例：

興奮（瀏覽產(chǎn)品時(shí)）、猶豫（選擇支付方式時(shí)）、沮喪（遇到支付問題時(shí)）、滿意（收到產(chǎn)品時(shí)）

7. 痛點(diǎn)（Pain Points）

定義：用戶在整個(gè)體驗(yàn)過程中遇到的困難和挑戰(zhàn)。

目的：識別和解決用戶體驗(yàn)中的問題，提升用戶滿意度。

示例：

結(jié)賬頁面加載慢、支付方式選擇不便、客服響應(yīng)慢

8. 機(jī)會（Opportunities）

定義：基于用戶行為、情感和痛點(diǎn)，識別出改善用戶體驗(yàn)的潛在機(jī)會。

目的：為團(tuán)隊(duì)提供改進(jìn)用戶體驗(yàn)的方向和具體措施，推動持續(xù)優(yōu)化。

示例：

優(yōu)化結(jié)賬頁面性能、增加支付方式、提升客服響應(yīng)速度

五、用戶體驗(yàn)地圖的制作流程

制作一份完整的用戶體驗(yàn)地圖（User Experience Map）需要多個(gè)步驟，使用的方法也有很多，不用擔(dān)心，下面我們進(jìn)行詳細(xì)步驟拆解：

1.定義目標(biāo)

目的：明確制作用戶體驗(yàn)地圖的目標(biāo)和用途，比如改善特定功能的用戶體驗(yàn)、優(yōu)化整體用戶旅程等。

示例：

一家電商平臺希望通過用戶體驗(yàn)地圖識別用戶在結(jié)賬過程中的痛點(diǎn)，并制定改進(jìn)措施。

2.收集用戶數(shù)據(jù)

方法：

用戶訪談：直接與用戶對話，了解他們的需求、行為和情感。

問卷調(diào)查：通過問卷收集大規(guī)模用戶數(shù)據(jù)。

用戶觀察：觀察用戶在實(shí)際使用產(chǎn)品或服務(wù)時(shí)的行為和反應(yīng)。

可用性測試：測試用戶在特定任務(wù)中的表現(xiàn)，發(fā)現(xiàn)使用障礙和痛點(diǎn)。

數(shù)據(jù)分析：分析網(wǎng)站或應(yīng)用的使用數(shù)據(jù)，了解用戶行為模式。

示例：

電商平臺通過用戶訪談和問卷調(diào)查收集用戶在結(jié)賬過程中的體驗(yàn)和反饋。

3.定義用戶角色（Persona）

步驟：

基于收集的數(shù)據(jù)，定義主要的用戶角色，描述其特征、需求和痛點(diǎn)。

示例：

用戶角色A：25-35歲，城市白領(lǐng)，喜歡網(wǎng)上購物，重視便捷和快速的購物體驗(yàn)。

4.描繪用戶旅程

步驟：

劃分用戶旅程的不同階段，從開始到結(jié)束，包括用戶在每個(gè)階段的主要活動和目標(biāo)。

示例：

發(fā)現(xiàn)階段：用戶在網(wǎng)上搜索和瀏覽商品。

考慮階段：用戶比較不同商品的特點(diǎn)和價(jià)格。

決策階段：用戶決定購買某件商品。

使用階段：用戶完成購買并等待商品送達(dá)。

回訪階段：用戶收到商品后可能會再次訪問網(wǎng)站。

5.識別觸點(diǎn)和用戶行為

步驟：列出用戶在每個(gè)階段的具體觸點(diǎn)和行為，展示用戶的操作過程。

示例：

觸點(diǎn)：網(wǎng)站首頁、產(chǎn)品頁面、購物車、結(jié)賬頁面、客服。

用戶行為：瀏覽產(chǎn)品、加入購物車、填寫訂單信息、支付、聯(lián)系客服。

6.記錄用戶情感

步驟：描述用戶在每個(gè)觸點(diǎn)上的情感體驗(yàn)，包括積極和消極的情感波動。

示例：

用戶在瀏覽產(chǎn)品時(shí)感到興奮，但在結(jié)賬時(shí)因頁面加載慢而感到沮喪。

7.識別痛點(diǎn)和機(jī)會

步驟：基于用戶行為和情感，識別用戶在每個(gè)階段的痛點(diǎn)，并找出改善用戶體驗(yàn)的機(jī)會。

示例：

痛點(diǎn)：結(jié)賬頁面加載慢、支付方式選擇不便、客服響應(yīng)慢。

機(jī)會：優(yōu)化結(jié)賬頁面性能、增加支付方式、提升客服響應(yīng)速度。

8.創(chuàng)建可視化地圖

步驟：將所有信息整合到一張可視化的用戶體驗(yàn)地圖上，使團(tuán)隊(duì)能夠直觀地了解用戶的完整體驗(yàn)過程。

工具：

手繪草圖：用紙和筆繪制用戶體驗(yàn)地圖。

數(shù)字工具：使用工具如Miro、Lucidchart、UXPressia等創(chuàng)建數(shù)字用戶體驗(yàn)地圖。

9.討論和驗(yàn)證

步驟：

與團(tuán)隊(duì)成員共同討論用戶體驗(yàn)地圖，驗(yàn)證其準(zhǔn)確性和全面性。

基于討論結(jié)果進(jìn)行必要的修改和調(diào)整。

示例：

團(tuán)隊(duì)成員共同審查用戶體驗(yàn)地圖，確認(rèn)所有觸點(diǎn)和用戶行為是否準(zhǔn)確，討論發(fā)現(xiàn)的痛點(diǎn)和改進(jìn)機(jī)會。

10.制定改進(jìn)措施

步驟：根據(jù)用戶體驗(yàn)地圖識別的痛點(diǎn)和機(jī)會，制定具體的改進(jìn)措施和實(shí)施計(jì)劃。

示例：

優(yōu)化結(jié)賬頁面加載速度，增加多種支付方式，提升客服響應(yīng)效率。

11.實(shí)施和跟蹤改進(jìn)

步驟：實(shí)施制定的改進(jìn)措施，并持續(xù)跟蹤用戶反饋和數(shù)據(jù)，評估改進(jìn)效果。

示例：

電商平臺實(shí)施優(yōu)化結(jié)賬頁面的改進(jìn)措施，并通過用戶反饋和數(shù)據(jù)分析評估效果，確保用戶體驗(yàn)得到提升。

六、用戶體驗(yàn)地圖案例展示

通過上面的介紹，相信你已經(jīng)對用戶體驗(yàn)地圖（User Experience Map）有了一定了解，是不是已經(jīng)想自己動手開始制作了，下面我們看幾個(gè)案例：

案例 1：電商平臺優(yōu)化

背景：一家電商平臺希望通過用戶體驗(yàn)地圖識別用戶在結(jié)賬過程中的痛點(diǎn)，并制定改進(jìn)措施，以提升用戶滿意度和轉(zhuǎn)化率。

用戶角色（Persona）

姓名：張女士

年齡：30歲

職業(yè)：城市白領(lǐng)

興趣：喜歡網(wǎng)上購物

需求：需要便捷快速的購物體驗(yàn)

痛點(diǎn)：不喜歡復(fù)雜的結(jié)賬流程

觸點(diǎn)和用戶行為

1. 發(fā)現(xiàn)（Discovery）：通過搜索引擎和社交媒體廣告發(fā)現(xiàn)平臺

2. 考慮（Consideration）：瀏覽產(chǎn)品詳情，查看用戶評論

3. 決策（Decision）：將商品加入購物車

4. 購買（Purchase）：填寫訂單信息并支付

5. 回訪（Return）：查看訂單狀態(tài)，聯(lián)系客戶服務(wù)

用戶情感

發(fā)現(xiàn)：興奮和好奇

考慮：謹(jǐn)慎和比較

決策：確定和期待

購買：焦慮和滿足

回訪：滿意和信任

痛點(diǎn)和機(jī)會

痛點(diǎn)：結(jié)賬頁面加載慢，支付方式選擇不便，客服響應(yīng)慢

機(jī)會：優(yōu)化結(jié)賬頁面性能，增加支付方式，提升客服響應(yīng)速度

案例 2：健身App優(yōu)化

背景：一家健身App希望提高用戶的使用頻率和忠誠度。

用戶角色（Persona）

姓名：李先生

年齡：25歲

職業(yè)：程序員

興趣：健身

需求：需要個(gè)性化的健身計(jì)劃

痛點(diǎn)：課程選擇不夠個(gè)性化，計(jì)劃制定過程復(fù)雜

觸點(diǎn)和用戶行為

1. 發(fā)現(xiàn)（Discovery）：通過朋友推薦和廣告發(fā)現(xiàn)App下載并安裝App

2. 考慮（Consideration）：瀏覽課程詳情，查看評價(jià)

3. 決策（Decision）：選擇并購買課程

4. 使用（Usage）：開始使用課程進(jìn)行鍛煉

5. 回訪（Return）：查看鍛煉記錄，調(diào)整計(jì)劃

用戶情感

發(fā)現(xiàn)：好奇和期待

考慮：審慎和比較

決策：確定和信心

使用：滿足和成就

回訪：滿意和忠誠

痛點(diǎn)和機(jī)會

痛點(diǎn)：課程選擇不夠個(gè)性化，計(jì)劃制定復(fù)雜

機(jī)會：增加個(gè)性化推薦功能，簡化計(jì)劃制定過程

案例 3：銀行在線服務(wù)優(yōu)化

背景：一家銀行希望優(yōu)化其在線服務(wù)平臺，以提高用戶的操作體驗(yàn)和滿意度。

用戶角色（Persona）

姓名：王女士

年齡：45歲

職業(yè)：教師

興趣：理財(cái)

需求：需要簡單易用的在線銀行服務(wù)

痛點(diǎn)：在線服務(wù)平臺操作復(fù)雜，轉(zhuǎn)賬流程繁瑣

觸點(diǎn)和用戶行為

1. 發(fā)現(xiàn)（Discovery）：訪問銀行官網(wǎng)，注冊賬戶

2. 考慮（Consideration）：瀏覽平臺功能和用戶評價(jià)

3. 決策（Decision）：決定使用在線服務(wù)

4. 使用（Usage）：進(jìn)行賬戶管理和轉(zhuǎn)賬操作

5. 回訪（Return）：查看交易記錄，繼續(xù)使用服務(wù)

用戶情感

發(fā)現(xiàn)：好奇和懷疑

考慮：審慎和信任

決策：確定和信心

使用：滿足和便捷

回訪：滿意和忠誠

痛點(diǎn)和機(jī)會

痛點(diǎn)：操作復(fù)雜，轉(zhuǎn)賬流程繁瑣

機(jī)會：簡化操作流程，優(yōu)化用戶界面設(shè)計(jì)

七、用戶體驗(yàn)地圖的總結(jié)

用戶體驗(yàn)地圖（User Experience Map）作為一種強(qiáng)大的工具，在理解和優(yōu)化用戶體驗(yàn)方面具有顯著優(yōu)勢。然而，制作和維護(hù)用戶體驗(yàn)地圖也存在資源密集、復(fù)雜性和動態(tài)變化等挑戰(zhàn)。團(tuán)隊(duì)在使用用戶體驗(yàn)地圖時(shí)，需要平衡其優(yōu)劣勢，合理分配資源，確保地圖的準(zhǔn)確性和實(shí)用性，從而真正提升用戶體驗(yàn)和產(chǎn)品成功率。

優(yōu)勢

1. 全景視角

優(yōu)點(diǎn)：用戶體驗(yàn)地圖提供了用戶體驗(yàn)的全景視角，涵蓋了用戶與產(chǎn)品或服務(wù)互動的各個(gè)階段。這種全景視角有助于團(tuán)隊(duì)全面了解用戶旅程中的各個(gè)觸點(diǎn)和行為。

案例：電商平臺可以通過用戶體驗(yàn)地圖了解用戶從瀏覽商品到完成購買的全過程，識別出所有關(guān)鍵的用戶觸點(diǎn)。

2. 用戶共情

優(yōu)點(diǎn)：通過記錄用戶在每個(gè)階段的情感體驗(yàn)，團(tuán)隊(duì)可以更好地理解用戶的需求和痛點(diǎn)，增強(qiáng)用戶共情。

案例：健身App可以通過用戶體驗(yàn)地圖了解用戶在制定和執(zhí)行健身計(jì)劃時(shí)的情感變化，從而設(shè)計(jì)出更具吸引力的個(gè)性化健身計(jì)劃。

3. 識別痛點(diǎn)

優(yōu)點(diǎn)：用戶體驗(yàn)地圖有助于識別用戶在使用產(chǎn)品或服務(wù)過程中的痛點(diǎn)和障礙，幫助團(tuán)隊(duì)找到改進(jìn)的機(jī)會。

案例：銀行在線服務(wù)平臺可以通過用戶體驗(yàn)地圖識別出用戶在進(jìn)行轉(zhuǎn)賬操作時(shí)遇到的困難，進(jìn)而優(yōu)化轉(zhuǎn)賬流程。

4. 跨團(tuán)隊(duì)協(xié)作

優(yōu)點(diǎn)：用戶體驗(yàn)地圖作為一個(gè)可視化工具，可以促進(jìn)跨團(tuán)隊(duì)協(xié)作，使不同部門（如產(chǎn)品、設(shè)計(jì)、開發(fā)和市場）能夠共同參與討論和改進(jìn)用戶體驗(yàn)。

案例：電商平臺可以通過用戶體驗(yàn)地圖匯集市場、設(shè)計(jì)和技術(shù)團(tuán)隊(duì)的意見，共同制定優(yōu)化措施。

5. 數(shù)據(jù)驅(qū)動決策

優(yōu)點(diǎn)：用戶體驗(yàn)地圖基于用戶研究和數(shù)據(jù)分析，使決策更加數(shù)據(jù)驅(qū)動，有助于制定科學(xué)合理的改進(jìn)策略。

案例：健身App可以通過用戶體驗(yàn)地圖中的用戶數(shù)據(jù)分析，調(diào)整課程推薦策略，提高用戶滿意度和使用頻率。

劣勢

1. 資源密集

缺點(diǎn)：制作用戶體驗(yàn)地圖需要大量的時(shí)間和資源，包括用戶研究、數(shù)據(jù)分析和團(tuán)隊(duì)協(xié)作。

案例：中小型企業(yè)可能難以投入足夠的資源來全面制作和維護(hù)用戶體驗(yàn)地圖。

2. 復(fù)雜性

缺點(diǎn)：用戶體驗(yàn)地圖可能變得非常復(fù)雜，特別是當(dāng)用戶旅程涉及多個(gè)觸點(diǎn)和渠道時(shí)，可能難以全面和準(zhǔn)確地記錄所有細(xì)節(jié)。

案例：大型電商平臺的用戶旅程可能涉及網(wǎng)站、移動應(yīng)用、社交媒體等多個(gè)渠道，制作一個(gè)全面的用戶體驗(yàn)地圖可能需要大量的精力。

3. 動態(tài)變化

缺點(diǎn)：用戶行為和市場環(huán)境是動態(tài)變化的，用戶體驗(yàn)地圖需要不斷更新和維護(hù)，以保持其有效性和準(zhǔn)確性。

案例：健身App的用戶需求和市場趨勢可能隨時(shí)變化，需要定期更新用戶體驗(yàn)地圖以保持相關(guān)性。

4. 主觀偏差

缺點(diǎn)：盡管用戶體驗(yàn)地圖基于用戶數(shù)據(jù)和研究，但在數(shù)據(jù)解讀和情感記錄上可能存在主觀偏差，影響決策的準(zhǔn)確性。

案例：銀行在線服務(wù)平臺在記錄用戶情感時(shí)，可能會受到研究者的主觀影響，從而無法完全準(zhǔn)確地反映用戶真實(shí)感受。

5. 過于理想化

缺點(diǎn)：用戶體驗(yàn)地圖有時(shí)可能過于理想化，忽略了現(xiàn)實(shí)中存在的限制和障礙，導(dǎo)致制定的改進(jìn)措施難以實(shí)施。

案例：電商平臺在識別改進(jìn)機(jī)會時(shí)，可能忽略了技術(shù)實(shí)現(xiàn)上的困難，導(dǎo)致優(yōu)化方案無法落地。

參考文獻(xiàn)：

https://medium.com/@michaeljiager/user-experience-maps-6184f4044e48

https://liviayang-ms.medium.com/%E4%B8%80%E5%88%86%E9%90%98%E8%AE%93%E4%BD%A0%E4%BA%86%E8%A7%A3%E7%94%A8%E6%88%B6%E9%AB%94%E9%A9%97%E6%AD%B7%E7%A8%8B%E5%9C%96-user-experience-map-e28a1b8817c0https://uxmastery.com/how-to-create-a-customer-journey-map/https://medium.com/art-marketing/incorporating-customer-and-user-experience-data-into-holistic-journey-maps-502ae12072ac

https://uxplanet.org/empathy-map-user-persona-and-user-flow-5299ada245c8https://medium.com/@myskill.id/persona-user-journey-map-ebd84c15ae2f?

作者：CANAAN8
鏈接：https://www.zcool.com.cn/article/ZMTYzMDA4MA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

藍(lán)藍(lán)設(shè)計(jì)(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。

評論(0) 瀏覽(639)

172024-10

Web端設(shè)計(jì)語言庫——數(shù)據(jù)可視化

ui設(shè)計(jì)分享達(dá)人

一、可視化原則

數(shù)據(jù)可視化是把相對復(fù)雜、抽象的數(shù)據(jù)通過可視化手段，表達(dá)數(shù)據(jù)內(nèi)在的信息和規(guī)律，促進(jìn)數(shù)據(jù)信息的傳播和應(yīng)用。

Dreawer Design 團(tuán)隊(duì)總結(jié)了以下四個(gè)可視化原則，供設(shè)計(jì)者參考及使用：

1. 準(zhǔn)確

數(shù)據(jù)圖表需精準(zhǔn)、如實(shí)地反應(yīng)數(shù)據(jù)信息的變化特征。

2. 清晰

讓設(shè)計(jì)服務(wù)于數(shù)據(jù)內(nèi)容，給用戶以最為清晰、明確、迅捷的數(shù)據(jù)展示。用戶看到可視化圖表時(shí)，應(yīng)能在 5 秒內(nèi)了解到它的用途，而不是花幾分鐘都不能理解各個(gè)數(shù)據(jù)的含義。

3. 簡單

可視化結(jié)果應(yīng)該是一看就懂，不需要思考和過度理解，因而選定圖表時(shí)要理性，避免為了視覺上的效果而選擇一些對用戶不太友好的圖形。

下面為圖標(biāo)類型與認(rèn)知成本對比：

4. 美觀

優(yōu)秀的數(shù)據(jù)可視化界面，會有一套非常嚴(yán)謹(jǐn)一致的版面。這里的一致性需要考慮到布局、結(jié)構(gòu)和內(nèi)容。

二、圖表解構(gòu)

1. 構(gòu)成元素

我們從標(biāo)題、坐標(biāo)軸、圖例、標(biāo)簽、提示信息、數(shù)據(jù)圖形這 6 個(gè)大類，對數(shù)據(jù)圖表進(jìn)行進(jìn)一步元素拆解及闡述。設(shè)計(jì)過程中，需遵循可視化原則來精簡數(shù)據(jù)圖表，讓用戶快速獲取圖表中的關(guān)鍵信息，完成任務(wù)。

圖表構(gòu)成 6 大類，元素細(xì)分：

1. 標(biāo)題：圖表標(biāo)題；

2. 坐標(biāo)軸：X/Y軸線、刻度線、網(wǎng)格線、X/Y軸標(biāo)題、X/Y軸標(biāo)簽；

3. 標(biāo)簽：數(shù)據(jù)點(diǎn)、引導(dǎo)線、（文本）數(shù)據(jù)值；

4. 提示信息；

5. 圖例；

6. 數(shù)據(jù)圖形：線、矩形、扇形、環(huán)形等。

下面為數(shù)據(jù)圖表的基本構(gòu)成元素示例（為了便于觀察，某些字母做了大寫處理）：

除了以上的常規(guī)元素，還有常用于餅圖、環(huán)形圖中的“引導(dǎo)線”：

2. 標(biāo)題

標(biāo)題是概括圖表主題的說明文字，一個(gè)明確、精簡的標(biāo)題可以迅速讓讀者理解圖表要表達(dá)的內(nèi)容。

2.1 位置

一般位于數(shù)據(jù)圖表卡片的左上方。

2.2 使用建議

標(biāo)題需言簡意賅、符合圖表主題；盡量控制在 20 個(gè)字以內(nèi)，標(biāo)題寬度盡量不要超過卡片寬度。

2.3超長處理

當(dāng)標(biāo)題超過長出卡片寬度時(shí)，省略標(biāo)題中間的文字，保住首尾，如“我是...標(biāo)題”。

3. 坐標(biāo)軸

3.1 坐標(biāo)系

坐標(biāo)軸包含在坐標(biāo)系的概念里，因此，我們需要先了解坐標(biāo)系。坐標(biāo)系是能夠使每個(gè)數(shù)組在維度空間內(nèi)找到映射關(guān)系的定位系統(tǒng)，更偏向數(shù)學(xué)/物理概念。

數(shù)據(jù)可視化中，最常用的二維坐標(biāo)系有兩種：

笛卡爾坐標(biāo)系：即直角坐標(biāo)系，是由相互垂直的兩條軸線構(gòu)成。常用于柱狀圖、條形圖、折線圖、面積圖等。

極坐標(biāo)系：由極點(diǎn)、極軸組成，坐標(biāo)系內(nèi)任何一個(gè)點(diǎn)都可以用極徑 r 和夾角 θ（逆時(shí)針為正）表示。常用于餅圖、圓環(huán)圖、雷達(dá)圖等。

補(bǔ)充說明：

1. 坐標(biāo)軸由定義域軸（X 軸）和值域軸（Y 軸）組成。條形圖中，定義域軸為 Y 軸，值域軸為 X 軸。

2. X軸為水平方向的橫軸，Y 軸為垂直方向的豎軸。以下主要針對笛卡爾坐標(biāo)系的坐標(biāo)軸構(gòu)成進(jìn)行分析：

3.2 坐標(biāo)軸

定義：坐標(biāo)軸指二維空間中統(tǒng)計(jì)圖表中的軸，是坐標(biāo)系的構(gòu)成部分，它用來定義坐標(biāo)系中數(shù)據(jù)在方向和值之間的映射關(guān)系。

構(gòu)成元素細(xì)分：X/Y 軸線、刻度線、網(wǎng)格線、X/Y 軸標(biāo)題、X/Y 軸標(biāo)簽。

3.3 軸類型

根據(jù)對應(yīng)變量是連續(xù)數(shù)據(jù)還是離散數(shù)據(jù)，可以把坐標(biāo)軸分為：分類軸、時(shí)間軸、連續(xù)軸三大類。

3.4 X/Y 軸線

顏色層級：X/Y軸線要比網(wǎng)格線層級高、顏色深，這樣能讓圖表有主次區(qū)分。

使用建議：有網(wǎng)格線時(shí)，柱狀圖/折線圖會隱藏 Y 軸線，條形圖則是隱藏 X 軸線，以達(dá)到信息降噪、突出重點(diǎn)的目的。

3.5 刻度線

軸刻度線是軸線上的小線段，用于指示數(shù)值標(biāo)簽在坐標(biāo)軸上的具體位置。軸刻度線有 3 種放置方式：置內(nèi)、置中（即交叉方式）、置外。

位置建議：刻度線置中/置內(nèi)時(shí)，可能會和網(wǎng)格線、數(shù)據(jù)圖形重疊，所以建議將刻度線置于數(shù)值坐標(biāo)軸外側(cè)，以呈現(xiàn)最佳顯示效果。

顯示建議：

折線圖：刻度線、X/Y 軸標(biāo)簽、數(shù)據(jù)點(diǎn)需要保持在同一垂直線上；

柱狀圖/條形圖：由于單個(gè)柱子有很強(qiáng)的對應(yīng)關(guān)系，此時(shí)可以隱藏刻度線；

3.6 網(wǎng)格線

定義：網(wǎng)格線是用來輔助圖表優(yōu)化映射關(guān)系的，我們需要弱化網(wǎng)格線的視覺效果，來增加數(shù)據(jù)的可閱讀性。

作用：1. 延伸數(shù)值刻度至可視化對象中，以便觀察數(shù)據(jù)值的大?。?. 增加可視化對象之間的對比觀察度。

使用建議 1 ：使用網(wǎng)格線時(shí)，需遵從主次原則，以軸線為主、網(wǎng)格線為輔；樣式上可采用實(shí)線或虛線；避免顏色過重、使用純黑/純白色。

使用建議 2 ：網(wǎng)格線一般跟隨值域軸的位置單向顯示，柱狀圖、折線圖等采用水平網(wǎng)格，條形圖采用垂直網(wǎng)格。

3.7 X/Y 軸標(biāo)題

軸標(biāo)題主要用于說明坐標(biāo)軸數(shù)據(jù)組的含義，也可理解為“軸單位”。當(dāng)可視化圖表標(biāo)題、圖例、軸標(biāo)簽等已能充分表達(dá)數(shù)據(jù)含義時(shí)，可隱藏軸標(biāo)題。

這樣處理體現(xiàn)了奧卡姆剃刀定律：如無必要，勿增實(shí)體。

3.8 X/Y 軸標(biāo)簽

軸標(biāo)簽是對當(dāng)前某一組數(shù)據(jù)的內(nèi)容標(biāo)注，用于提高數(shù)據(jù)的可讀性。

以下從 X 軸標(biāo)簽、Y軸標(biāo)簽兩方面進(jìn)行分析：

a. X 軸標(biāo)簽

X 軸標(biāo)簽的設(shè)計(jì)重點(diǎn)在顯示規(guī)則上。卡片寬度過窄、標(biāo)簽過多、名稱過長時(shí)，X 軸標(biāo)簽便會出現(xiàn)顯示問題（如標(biāo)簽重疊等）。

為了解決顯示問題，我們從連續(xù)/時(shí)間軸標(biāo)簽（數(shù)值類）、分類軸標(biāo)簽（文本類）兩方面進(jìn)行分析：

連續(xù)/時(shí)間軸標(biāo)簽

顯示規(guī)則：建議等分抽樣顯示、旋轉(zhuǎn)；不尾部省略。

建議等分抽樣：連續(xù)/時(shí)間軸，通常由一組等差數(shù)列組成，具有規(guī)律性，缺失的數(shù)據(jù)用戶會在腦海中自動補(bǔ)全。所以建議用等分抽樣來避免標(biāo)簽的重疊問題。

注意：等分抽樣盡量保留首尾數(shù)據(jù)標(biāo)簽；隨機(jī)抽樣沒有規(guī)律，會影響用戶的判斷及辨認(rèn)，不建議采取隨機(jī)抽樣顯示。

連續(xù)/時(shí)間軸標(biāo)簽是由“關(guān)鍵數(shù)值”組成的標(biāo)注點(diǎn)，一般都明確精簡，尾部省略會影響用戶對關(guān)鍵數(shù)值的辨認(rèn)。

為了保證標(biāo)簽的辨識度，我們可以將標(biāo)簽旋轉(zhuǎn) 45°、 90° 。極端情況下（圖表寬度極窄），可以同時(shí)進(jìn)行旋轉(zhuǎn)+抽樣。

分類軸標(biāo)簽

顯示規(guī)則：建議旋轉(zhuǎn)顯示；不建議抽樣顯示。

分類軸由幾個(gè)離散數(shù)據(jù)標(biāo)簽組成，標(biāo)簽之間獨(dú)立存在，無緊密邏輯關(guān)系，用戶無法自動補(bǔ)全缺失信息。因此，不能采取抽樣顯示，應(yīng)盡量展示全部標(biāo)簽的全部文本。

若標(biāo)簽橫向展示空間不夠（文字重疊），我們可以將標(biāo)簽旋轉(zhuǎn) 45°、 90° 來達(dá)到預(yù)期顯示效果。若通過旋轉(zhuǎn)無法滿足需求，可使用條形圖，將分類軸放在Y軸。

旋轉(zhuǎn)方向說明：通常情況下，用戶的閱讀視線為從左至右、從上到下。因此，標(biāo)簽順時(shí)針旋轉(zhuǎn) 45° 更符合用戶的瀏覽習(xí)慣。

b. Y 軸標(biāo)簽

Y 軸標(biāo)簽的設(shè)計(jì)重點(diǎn)在標(biāo)簽數(shù)量、取值范圍和數(shù)據(jù)格式上。標(biāo)簽顯示區(qū)域一般根據(jù)最長標(biāo)簽寬度進(jìn)行自適應(yīng)縮放。

軸標(biāo)簽的數(shù)量

使用建議：根據(jù)米勒定律（7±2 法則），Y 軸標(biāo)簽數(shù)量應(yīng)控制在 5-9 個(gè)的范圍內(nèi)；Web頁面中，Y 軸常用標(biāo)簽數(shù)為：6 或 7（含標(biāo)簽0）。

軸標(biāo)簽的數(shù)量越多，橫向網(wǎng)格線就會越多。過多的軸標(biāo)簽及網(wǎng)格線會造成元素冗余，違背了清晰、準(zhǔn)確的可視化原則，也不利于圖表信息的表達(dá)及閱讀。

對齊方式：右對齊

軸標(biāo)簽的取值范圍

基準(zhǔn)線： Y 軸標(biāo)簽取值應(yīng)從 0 基線開始，以反映數(shù)據(jù)的真實(shí)性。如果展示被截?cái)嗟?Y 軸數(shù)據(jù)，會導(dǎo)致用戶做出錯(cuò)誤的判斷。

軸標(biāo)簽的數(shù)據(jù)格式

使用建議 1：標(biāo)簽保留的小數(shù)位數(shù)保持統(tǒng)一。

4. 數(shù)據(jù)標(biāo)簽

數(shù)據(jù)標(biāo)簽是對數(shù)據(jù)點(diǎn)對應(yīng)數(shù)值的標(biāo)注，用于直接觀察每個(gè)數(shù)據(jù)點(diǎn)的具體數(shù)值。

若圖表主要是用來看趨勢變化、占比大小等，則不需要顯示數(shù)據(jù)標(biāo)簽。若想精確了解每組數(shù)據(jù)的具體數(shù)值，則可以顯示數(shù)據(jù)標(biāo)簽。

4.1 位置

數(shù)據(jù)標(biāo)簽位于數(shù)據(jù)點(diǎn)的上方。

4.2 顯示規(guī)則

在不同類型的圖表中，數(shù)據(jù)標(biāo)簽的顯示規(guī)則不同。我們可以根據(jù)數(shù)據(jù)圖形、數(shù)據(jù)值的特性，選擇合適的顯示方式，提高圖表的準(zhǔn)確性。

a. 柱狀圖

基礎(chǔ)柱狀圖

：數(shù)據(jù)標(biāo)簽可顯示在數(shù)據(jù)圖形內(nèi)部、外部。

數(shù)據(jù)標(biāo)簽在圖形內(nèi)部的顯示規(guī)則：正常情況下，橫向顯示；數(shù)據(jù)標(biāo)簽超長時(shí)，旋轉(zhuǎn) 90°；圖形高度 < 數(shù)據(jù)標(biāo)簽高度時(shí)，不顯示數(shù)據(jù)標(biāo)簽。

分組柱狀圖

：數(shù)據(jù)標(biāo)簽可顯示在數(shù)據(jù)圖形內(nèi)部、外部。顯示在內(nèi)部的數(shù)據(jù)標(biāo)簽顯示寬度不夠時(shí)，解決方案同上。

堆疊柱狀圖

：數(shù)據(jù)標(biāo)簽顯示在數(shù)據(jù)圖形內(nèi)部。

b. 條形圖

數(shù)據(jù)標(biāo)簽在圖形內(nèi)部的顯示規(guī)則：正常情況下，橫向顯示；圖形寬度 < 數(shù)據(jù)標(biāo)簽高度時(shí)，不顯示數(shù)據(jù)標(biāo)簽；條形圖高度需 >= 數(shù)據(jù)標(biāo)簽高度。

基礎(chǔ)、分組條形圖的數(shù)據(jù)標(biāo)簽也可以顯示在圖形外部：

c. 折線圖

數(shù)據(jù)標(biāo)簽顯示在數(shù)據(jù)點(diǎn)的上方。

圖表寬度過窄，數(shù)據(jù)點(diǎn)多且密時(shí)，相鄰的數(shù)據(jù)標(biāo)簽會出現(xiàn)重疊的問題。此時(shí)，我們會采用抽樣的方式顯示數(shù)據(jù)標(biāo)簽。鼠標(biāo)懸停數(shù)據(jù)點(diǎn)，顯示隱藏的數(shù)據(jù)標(biāo)簽。

d. 餅圖、環(huán)形圖

數(shù)據(jù)標(biāo)簽顯示在圖形內(nèi)部、外部均可。

由于扇形有角度，且形狀相對不規(guī)則，對數(shù)據(jù)標(biāo)簽的文本長度包容度較低，環(huán)形更是如此。所以，當(dāng)扇/環(huán)形分割過多、面積較小時(shí)，建議將數(shù)據(jù)標(biāo)簽顯示在圖形外部。

當(dāng)然，我們也可以內(nèi)外部結(jié)合使用：

e. 數(shù)據(jù)標(biāo)簽顏色

數(shù)據(jù)標(biāo)簽顯示在圖形內(nèi)部時(shí)，圖形為背景，數(shù)據(jù)標(biāo)簽為前景。此時(shí)，數(shù)據(jù)圖形作為背景色，會影響到數(shù)據(jù)標(biāo)簽的顯色度及易讀性。

為了確保良好的可讀性，我們通過對圖形顏色 HS 值的判斷，來決定文字的顏色。這樣對比度就在可控范圍內(nèi)，不會出現(xiàn)可讀性低的問題。

由于篇幅問題，剩余內(nèi)容接下一篇文章展示

作者：布魯星人
鏈接：https://www.zcool.com.cn/article/ZMTYzNzI0NA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

評論(0) 瀏覽(360)

172024-10

從對話到嵌入：多元場景AI形態(tài)淺析

ui設(shè)計(jì)分享達(dá)人

前言

當(dāng)我們一次次被AI技術(shù)帶來的變革所驚艷，當(dāng)ChatGPT一次次宣布其能力已經(jīng)突破了人類的想象，你是否注意到現(xiàn)有產(chǎn)品與AI融合的新趨勢？值得注意的是，新技術(shù)的出現(xiàn)也一定帶來了新的交互體驗(yàn)。本文將以多種產(chǎn)品場景為例，梳理PC端多種主流的AI融合形態(tài)，希望能給大家?guī)韱l(fā)。

多元場景下的主流AI形態(tài)

目前主流AI產(chǎn)品有如下3種主要形態(tài)，分別為沉浸式的AI智能體(Agent)、伴隨式的AI副駕駛(Co-pilot)、嵌入式的AI場景化嵌入(Embedding)。這3種形態(tài)在能力、界面、操作體驗(yàn)和適用場景都上存在顯著差異。

一、沉浸式形態(tài)

AI智能體(Agent)—功能強(qiáng)大的AI伙伴

一個(gè)富有主動性的獨(dú)立伙伴，輸出的結(jié)果不完全依賴用戶的輸入，啟動AI問詢后有2種主流的形態(tài)：

①「對話智能體」以對話流的形式展示信息，用戶通過在當(dāng)前語境下進(jìn)行追問獲取最終結(jié)果；

②「目標(biāo)智能體」用戶輸入指令后，一次性給予用戶“靠譜”的結(jié)果，配有側(cè)邊欄可進(jìn)行多種輔助操作。

1.對話智能體示例—Gemini

以谷歌Gemini產(chǎn)品為例，其作為對話流的智能體，為滿足搜索場景，具有以下特征：

1）冷啟頁P(yáng)rompt形象化

相較于2023年初Gemini冷啟時(shí)的樣式，最近改版中冷啟的Prompt卡片變得形象化，當(dāng)然我們也在其他Agent產(chǎn)品中觀察到了這一變化。

2）多模態(tài)內(nèi)容

理解用戶的文字意圖，依據(jù)要求自主生成多模態(tài)卡片是對話智能體的主要特征之一，該功能可以極大地豐富AI反饋的多樣性，并能提高信息傳達(dá)的效率。

3）信息索引的顯示

信息索引的展示是提升AI回答權(quán)威性和透明度的關(guān)鍵因素。然而，直接在閱讀內(nèi)容中嵌入索引標(biāo)簽，可能在某些情況下影響用戶的閱讀連貫性。以Gemini為例，當(dāng)前的設(shè)計(jì)允許用戶在卡片下方手動啟用索引信息，這種靈活性平衡了信息的可信度和閱讀體驗(yàn)，適合多數(shù)日常場景。

當(dāng)然，從設(shè)計(jì)角度考慮，某些情況下默認(rèn)收起索引并非最佳選擇。在用戶高度依賴信息準(zhǔn)確性的場景中，如金融或醫(yī)學(xué)領(lǐng)域，索引的可見性將會直接影響信任感。對于深入研究或延展閱讀需求較高的用戶，即時(shí)查看索引能更高效地獲取信息來源。

與之類似，在涉及多方信息傳播的業(yè)務(wù)分發(fā)場景，清晰可見的索引有助于減少誤解，提高效率。在這些情況下，索引的默認(rèn)展開不僅強(qiáng)化了內(nèi)容的可靠性，也更好地支持了用戶的深入需求。

2.目標(biāo)智能體示例—Perplexity

Perplexity作為最近廣受好評的AI搜索工具，相較于Gemini，它更注重給予用戶最精準(zhǔn)的答案?；赗AG技術(shù)的Perplexity為用戶提供了一種新的“確定性”，而鑒于這種特征，Perplexity擁有雙面板的形態(tài)，可以對當(dāng)前確定性的信息進(jìn)行深化處理。

1 ）輸入即結(jié)果

相較于Gemini等對話智能體產(chǎn)品，AI Agent用戶需要反復(fù)追問結(jié)果，而在體驗(yàn)Perplexity時(shí)的無對話場景感，更傾向于一次性給予用戶“靠譜”的答案。

2）側(cè)分欄—信息補(bǔ)充

因?yàn)镻erplexity一次就可以給予用戶最“準(zhǔn)確”的信息，用戶可能沒有追問的必要，但可能會有對于當(dāng)前問答進(jìn)行深度搜索的需求，這時(shí)會有右側(cè)GUI分欄的出現(xiàn)，以便用戶進(jìn)行輔助搜索。

3.思考：給予用戶最佳答案的AI形態(tài)

在使用體驗(yàn)上，Gemini與Perplexity雖然走向兩個(gè)不同的流派，但目的都是為了給用戶呈現(xiàn)最佳的搜索結(jié)果。Gemini就像一位富有想象力的對話者，用戶在對話中通過不斷地追問來獲得最佳的結(jié)果，而Perplexity更像一個(gè)AI版的知乎，它堅(jiān)持“用戶不會犯錯(cuò)”原則，冷靜客觀地為用戶提供最精準(zhǔn)的答案。

二、伴隨式形態(tài)

AI副駕駛(Copilot)—被動性的AI助手

這種形態(tài)下的AI更多扮演“副駕駛”的角色，為用戶提供建議和幫助，依賴用戶精準(zhǔn)的指令對當(dāng)前內(nèi)容窗口進(jìn)行操作，一般以側(cè)邊欄形式展示，目前的Office文檔類產(chǎn)品多采用此類形態(tài)。

1.AI副駕駛產(chǎn)品示例-Office

在近年的開發(fā)者大會中，微軟提到最多的詞就是“Copilot”，力推將AI技術(shù)快速融入到旗下應(yīng)用中。其中，Office軟件就融入了AI副駕駛的理念，該形態(tài)下的AI主要為用戶提供產(chǎn)品的創(chuàng)作輔助、信息的查詢總結(jié)等功能。

1）當(dāng)前場景下的AI助手

AI的能力默認(rèn)被限定在當(dāng)前場景下，滿足用戶問詢、信息檢索、創(chuàng)作輔助等操作。

2）被動性AI助手

Copilot無法自動執(zhí)行操作去修改當(dāng)前頁面內(nèi)容，需要用戶確認(rèn)后才可執(zhí)行，用戶執(zhí)行操作后會在側(cè)邊欄內(nèi)顯示操作記錄與撤銷操作的入口。

3）輔助Prompt

由于AI副駕駛的特性，常常需要準(zhǔn)確的Prompt才能執(zhí)行符合預(yù)期的操作，這對大部分用戶來說門檻較高，因此在使用時(shí)需要及時(shí)給予用戶合理的聯(lián)想Prompt，輔助用戶決策。

2.思考：提高用戶工作效率的AI助手

作為被動性AI助手，用戶即使不使用也不會影響其在整體頁面中的操作，AI更多承擔(dān)的是提升用戶工作效率過程中的輔助角色。

三、嵌入式形態(tài)

AI場景化嵌入(Embedding)

嵌入式AI主要聚焦特定場景的AI輔助，如AI即時(shí)性地生成對當(dāng)前評論的回復(fù)，此類交互無固定形態(tài)，AI會在用戶進(jìn)行高頻重要操作時(shí)即時(shí)觸發(fā)。

在多元化場景中，嵌入式AI的設(shè)計(jì)相較于前兩類更加靈活和輕量，通常以LGUI(輕量化用戶界面)為核心，強(qiáng)調(diào)用戶與AI之間的無縫銜接與高效互動。

與對話式或結(jié)構(gòu)化阿拉丁模式相比，嵌入式AI的設(shè)計(jì)思路更加通暢，摒棄了復(fù)雜的交互流程，更注重場景中的引導(dǎo)性和即時(shí)反饋，幫助用戶在合適的時(shí)機(jī)獲取所需信息。

1.嵌入式AI示例—One Drive

以微軟One Drive為例，嵌入式AI不僅會在用戶整理文件時(shí)提供智能建議，還能在用戶分享文件時(shí)根據(jù)歷史記錄和內(nèi)容精準(zhǔn)推薦分享對象。這種場景化的嵌入，展現(xiàn)了如何通過LGUI設(shè)計(jì)最大化提高效率，而非依賴傳統(tǒng)對話或復(fù)雜交互。

場景一: 文件整理AI建議

在AI為相關(guān)文件創(chuàng)建新文件夾的情境中，執(zhí)行完成后，它會主動詢問用戶是否需要將其他可能相關(guān)的文件一并移入到新建的文件夾中，以幫助用戶進(jìn)一步整理文件。AI能夠基于文件內(nèi)容的上下文，敏銳地判斷出哪些文件可能屬于同一類別，進(jìn)而為用戶提供便捷的一鍵整理服務(wù)。

場景二: 智能分享建議

當(dāng)用戶準(zhǔn)備在One Drive中分享文件時(shí)，AI助手會根據(jù)文件內(nèi)容和用戶的歷史分享記錄，預(yù)測出最可能需要分享的對象名單，為用戶精準(zhǔn)推薦受眾人員。智能分享建議可以極大地節(jié)省用戶挑選分享對象的時(shí)間。

基于上述2個(gè)例子，我們可以對嵌入式AI有進(jìn)一步的思考：

合理的嵌入式AI操作只在用戶進(jìn)行重要操作時(shí)被“激活”，能夠在當(dāng)前場景下即時(shí)給予用戶建議；

嵌入式AI一般情況下點(diǎn)擊大于錄入，方便用戶快速做出決定；

設(shè)計(jì)此類交互時(shí)，需要深度理解用戶使用場景，AI的喚起不應(yīng)干擾用戶對于主流程的操作體驗(yàn)。

2.思考：效率導(dǎo)向的AI嵌入設(shè)計(jì)

對于普通設(shè)計(jì)師來說，容易在純對話交互和結(jié)構(gòu)化設(shè)計(jì)兩端搖擺，可能忽視了效率也是設(shè)計(jì)的重要原則。嵌入式AI的設(shè)計(jì)啟示在于“什么合適用什么”，既不過度依賴復(fù)雜的對話式設(shè)計(jì)，也不拘泥于結(jié)構(gòu)化方案。關(guān)鍵在于聚焦場景需求，以最簡便和有效的方式幫助用戶完成任務(wù)。因此，在嵌入式AI的設(shè)計(jì)中，保持界面的簡潔與流暢，同時(shí)結(jié)合輕量化的LGUI原則，才是提升用戶體驗(yàn)的關(guān)鍵。最終目標(biāo)始終是“效率”，無論采用何種形式，選擇最適合當(dāng)前場景的交互模式才是設(shè)計(jì)的核心。

未來的AI設(shè)計(jì)

多樣化形態(tài)下的平衡與共生

隨著AI技術(shù)的迅速發(fā)展，各種AI形態(tài)在不同場景中不斷涌現(xiàn)，如上述討論的沉浸式、伴隨式、嵌入式等設(shè)計(jì)形態(tài)。無論是主動性強(qiáng)的智能體、輔助型的副駕駛，還是輕量化的嵌入式方案，每一種設(shè)計(jì)都展現(xiàn)出其獨(dú)特的價(jià)值。

然而，在這些多樣化的形態(tài)背后，我們?nèi)孕杌貧w一個(gè)核心問題：什么樣的AI設(shè)計(jì)才是理想的？

首先，沒有一種AI形態(tài)能夠完美適用所有場景，真正成功的AI設(shè)計(jì)應(yīng)始終圍繞需求展開。在效率為先的原則下，設(shè)計(jì)師需要深刻理解用戶在不同情境下的核心需求，并選擇最適合的交互形態(tài)。復(fù)雜的對話式和高度結(jié)構(gòu)化的設(shè)計(jì)并非萬能，嵌入式AI的靈活性和輕量化設(shè)計(jì)則為平衡提供了啟發(fā)—服務(wù)于效率與體驗(yàn)，簡化不必要的交互，專注于解決用戶的實(shí)際問題。

其次，AI設(shè)計(jì)的多樣性并不意味著割裂，而是指向共生與融合。未來，AI技術(shù)將進(jìn)一步打破不同形態(tài)之間的界限，形成更加靈活、動態(tài)的交互模式。這種融合不僅依賴更智能的技術(shù)，還要求設(shè)計(jì)師在實(shí)際應(yīng)用中敏銳捕捉用戶需求，提供真正有價(jià)值的解決方案。

最后，設(shè)計(jì)的核心原則是以用戶為中心，強(qiáng)調(diào)合適性，而非追求炫技。無論是大型智能體的復(fù)雜場景處理，還是嵌入式AI的場景化介入，優(yōu)秀的設(shè)計(jì)應(yīng)始終聚焦用戶需求，在不同場景中找到最優(yōu)平衡點(diǎn)。隨著技術(shù)的進(jìn)化，設(shè)計(jì)師需要更加專注于如何將AI技術(shù)自然、無縫地融入用戶的工作與生活，使每一次交互都變得更加高效和愉快。

在未來，AI的形態(tài)將會更加多元，但不變的仍是設(shè)計(jì)師對效率、用戶價(jià)值和場景適配的持續(xù)探索。希望設(shè)計(jì)師在面對AI設(shè)計(jì)時(shí)，始終尋求既符合用戶需求又能提升效率的最佳方案。

作者：百度MEUX
鏈接：https://www.zcool.com.cn/article/ZMTYzMzkxNg==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

評論(0) 瀏覽(551)

172024-10

用戶體驗(yàn)一致性思考

ui設(shè)計(jì)分享達(dá)人

前言

在團(tuán)隊(duì)內(nèi)部，我們已確立了一套設(shè)計(jì)規(guī)范，在日常項(xiàng)目中使用設(shè)計(jì)規(guī)范輸出變的高效、統(tǒng)一。然而，在實(shí)際操作中，不可避免地會遇到一些特殊情況：某些客戶提出的個(gè)性化需求并不完全契合既定的設(shè)計(jì)規(guī)范,這些促使我們不得不在保持設(shè)計(jì)一致性的基礎(chǔ)上進(jìn)行靈活調(diào)整。因此，深入反思并優(yōu)化一致性原則的應(yīng)用策略顯得尤為重要。我們需要探索如何在堅(jiān)守設(shè)計(jì)規(guī)范核心精神的同時(shí)，靈活應(yīng)對多變的需求，確保設(shè)計(jì)既保持統(tǒng)一和諧，又能滿足特定場景下的獨(dú)特需求，從而實(shí)現(xiàn)用戶體驗(yàn)與品牌價(jià)值的雙重提升。

在UI/UX設(shè)計(jì)中，雅各布·尼爾森的十條可用性原則中，一致性（Consistency and standards）位列第四。這一原則強(qiáng)調(diào)在界面和交互設(shè)計(jì)上需要遵循既定的規(guī)則，無論是在應(yīng)用內(nèi)部還是跨平臺之間。

背后的心理學(xué)原理——重復(fù)定律，強(qiáng)調(diào)了信息重復(fù)對于鞏固記憶的重要性。正如赫爾曼·艾賓浩斯通過“遺忘曲線”所揭示的，信息的有效保留離不開重復(fù)接觸。一致性的應(yīng)用正是這一原理的生動實(shí)踐，通過不斷重復(fù)統(tǒng)一的設(shè)計(jì)元素與模式，強(qiáng)化用戶對產(chǎn)品的認(rèn)知與記憶，從而提升整體的用戶滿意度與忠誠度。

艾賓浩斯遺忘曲線

用戶側(cè)

1、用戶學(xué)習(xí)曲線：

一致的UI/UX設(shè)計(jì)可以降低用戶的學(xué)習(xí)曲線。當(dāng)用戶在應(yīng)用程序或網(wǎng)站中遇到一致的元素、布局和交互方式時(shí)，他們可以快速理解并準(zhǔn)確預(yù)測如何與界面進(jìn)行交互。這減少了用戶的混淆和困惑，提高了他們的效率和滿意度。

2、提升可用性：

一致性使用戶界面更加易于使用。當(dāng)用戶在不同的頁面或功能之間找到相似的設(shè)計(jì)元素和交互模式時(shí)，他們可以輕松地將已有的知識和經(jīng)驗(yàn)應(yīng)用于新的情境中。這種一致性幫助用戶快速完成任務(wù)，減少錯(cuò)誤和迷失，提供更好的導(dǎo)航和流暢的體驗(yàn)。

3、品牌認(rèn)可度：

一致的UI/UX設(shè)計(jì)有助于樹立品牌形象和增強(qiáng)品牌認(rèn)可度。通過在不同的渠道和平臺上保持一致的設(shè)計(jì)元素、標(biāo)識和視覺風(fēng)格，品牌可以建立起獨(dú)特而可識別的形象。用戶在不同的觸點(diǎn)上都能感受到品牌的一致性，從而增加品牌的信任和忠誠度。

4、用戶滿意度：

一致性直接影響用戶的滿意度。當(dāng)用戶在使用應(yīng)用程序或網(wǎng)站時(shí)感受到一致的設(shè)計(jì)和交互方式時(shí)，他們會感到更加舒適和自信。一致性傳遞了專業(yè)和質(zhì)量的信號，讓用戶感到被關(guān)注和重視。這種積極的用戶體驗(yàn)有助于提升用戶滿意度，并促使他們持續(xù)使用和推薦你的產(chǎn)品或服務(wù)。

產(chǎn)研側(cè)

1. 降低設(shè)計(jì)成本，提高開發(fā)效率

無論是設(shè)計(jì)還是開發(fā)，復(fù)用已有的組件資源，保持界面的一致性可以有效地減少設(shè)計(jì)的投入，避免不必要的設(shè)計(jì)分歧點(diǎn)。

而在開發(fā)階段，可以避免重復(fù)造輪子，提高開發(fā)的效率，保證落地效果，也可以減少上線前設(shè)計(jì)走查、測試的工作量。

2. 形成一致的設(shè)計(jì)風(fēng)格

根據(jù)原子設(shè)計(jì)理論，通過原子組件的一致性，可以構(gòu)建出統(tǒng)一的界面框架、布局，形成統(tǒng)一風(fēng)格和用戶交互認(rèn)知，從而更好地保證用戶體驗(yàn)質(zhì)量。

色彩

色彩作為一種兼具物理屬性與感官享受的復(fù)雜現(xiàn)象，其本質(zhì)在于光波在人體視網(wǎng)膜上的特定波長被反射或吸收后，所引發(fā)的視覺感知結(jié)果。在設(shè)計(jì)領(lǐng)域，色彩的選擇與運(yùn)用不僅是視覺藝術(shù)的展現(xiàn)，更是品牌身份與個(gè)性的直接體現(xiàn)。諸如餓了么標(biāo)志性的藍(lán)色、美團(tuán)鮮明的黃色、以及京東熱情的紅色等，這些品牌專屬色彩不僅構(gòu)成了品牌識別系統(tǒng)的重要組成部分，還通過其高度的一致性，在視覺層面上構(gòu)建起強(qiáng)烈的品牌認(rèn)知，營造出統(tǒng)一和諧的視覺體驗(yàn)。

色彩的一致性策略在品牌塑造中發(fā)揮著不可估量的作用，它能夠有效增強(qiáng)品牌的記憶度與辨識度，深化品牌形象在消費(fèi)者心中的烙印，進(jìn)而提升產(chǎn)品的市場吸引力和用戶忠誠度。同時(shí)，這種策略還促進(jìn)了設(shè)計(jì)元素間的和諧共存，包括按鈕、圖標(biāo)、字體、標(biāo)簽、背景、以及關(guān)鍵視覺元素如Banner等，均能在統(tǒng)一的色彩體系下實(shí)現(xiàn)視覺上的連貫與流暢，極大地提升了產(chǎn)品的可用性、無障礙性，以及用戶在使用過程中的整體滿意度與交互體驗(yàn)。

字體

字體作為設(shè)計(jì)中不可或缺的核心要素，其獨(dú)特性在于能夠精準(zhǔn)地塑造文字的視覺形象，涵蓋形狀、尺寸、粗細(xì)、字間距等多維度特征。這些特征共同構(gòu)建了一種獨(dú)特的文字風(fēng)格，不僅承載著信息的傳遞功能，更在無形中引導(dǎo)著用戶的視覺流程，影響著信息的接收與理解深度。因此，在設(shè)計(jì)過程中，合理選擇與應(yīng)用字體顯得尤為關(guān)鍵。

字體類型的多樣性，如有襯線字體與無襯線字體的對比，不僅體現(xiàn)了風(fēng)格上的差異，還隱含了不同的閱讀體驗(yàn)與情感表達(dá)。字體的粗細(xì)變化（如細(xì)體、常規(guī)、粗體等）更是能夠強(qiáng)調(diào)文本的重要性層級，增強(qiáng)信息的層次感與可讀性。此外，字重的調(diào)整也是塑造視覺焦點(diǎn)、引導(dǎo)視線流動的有效手段，對于提升設(shè)計(jì)的整體美觀度和信息傳達(dá)效率具有不可小覷的作用。

然而，在實(shí)際的開發(fā)與實(shí)現(xiàn)過程中，若不加節(jié)制地使用多種字體，不僅會顯著增加頁面的加載時(shí)間，影響用戶體驗(yàn)的流暢性，還可能因風(fēng)格不統(tǒng)一而導(dǎo)致頁面顯得雜亂無章，破壞整體設(shè)計(jì)的和諧感。因此，制定一套統(tǒng)一、規(guī)范的字體使用策略顯得尤為重要。這不僅有助于提升開發(fā)效率，減少后期更新迭代的復(fù)雜度，還能有效避免資源浪費(fèi)，確保設(shè)計(jì)作品在視覺上的一致性與專業(yè)性。

圖標(biāo)

圖標(biāo)作為用戶界面設(shè)計(jì)中至關(guān)重要的元素，風(fēng)格直接影響到用戶的使用體驗(yàn)與對產(chǎn)品的整體印象。圖標(biāo)以其簡潔、直觀且富有表現(xiàn)力的特點(diǎn)，在快速傳達(dá)信息、引導(dǎo)用戶操作方面發(fā)揮著不可替代的作用。在設(shè)計(jì)中，圖標(biāo)的設(shè)計(jì)與應(yīng)用更是需要精心考量，以確保其既能夠準(zhǔn)確傳達(dá)信息，又能夠與整體設(shè)計(jì)風(fēng)格保持一致，從而營造出專業(yè)、和諧且易于使用的界面環(huán)境。

設(shè)計(jì)中視覺上保持統(tǒng)一包括圖標(biāo)的大小、形狀、色彩以及設(shè)計(jì)風(fēng)格等多個(gè)方面，能夠增強(qiáng)用戶的認(rèn)知連貫性，降低學(xué)習(xí)成本，提升使用效率。相反，如果圖標(biāo)風(fēng)格混雜，不僅會讓界面顯得雜亂無章，還會給用戶帶來困惑和不安，進(jìn)而影響其對產(chǎn)品專業(yè)性和安全性的信任。

按鈕

按鈕設(shè)計(jì)應(yīng)統(tǒng)一于項(xiàng)目風(fēng)格，無論是圓形、矩形、圓角矩形還是特定形狀，保持一致性是關(guān)鍵。統(tǒng)一的按鈕樣式不僅彰顯專業(yè)性，還能增強(qiáng)用戶信任，確保體驗(yàn)連貫。過多變化的按鈕樣式會擾亂用戶界面，降低操作直觀性，甚至讓用戶誤以為自己已離開應(yīng)用環(huán)境。因此，精心設(shè)計(jì)的統(tǒng)一按鈕樣式對提升用戶體驗(yàn)至關(guān)重要。

排版

設(shè)計(jì)中的排版一致性對于構(gòu)建高效、用戶友好的界面至關(guān)重要。一致的排版不僅能夠讓用戶快速適應(yīng)和理解界面的整體結(jié)構(gòu)，大幅降低學(xué)習(xí)成本，還能在用戶心中激發(fā)強(qiáng)烈的歸屬感和安全感。這種熟悉感使得內(nèi)容更加易讀，用戶能夠自然地依照既定的視覺動線流暢地瀏覽頁面，迅速定位并獲取所需信息，從而顯著提升信息獲取的效率。因此，在設(shè)計(jì)過程中，注重并維護(hù)排版的一致性，是提升用戶體驗(yàn)和界面有效性的重要策略之一。

操作流程的一致性

標(biāo)準(zhǔn)化流程

：確保用戶在執(zhí)行相似任務(wù)時(shí)，如購買商品、搜索信息或提交表單等，能夠遵循相同的操作流程。這有助于用戶快速適應(yīng)并高效完成任務(wù)。

邏輯清晰

：操作流程的每一步都應(yīng)符合用戶的認(rèn)知習(xí)慣和行為邏輯，避免讓用戶感到困惑或不知所措。

交互元素的一致性

按鈕和控件

：確保按鈕、輸入框、下拉菜單等交互元素的樣式、位置和操作方式在整個(gè)應(yīng)用或網(wǎng)站中保持一致。例如，所有按鈕都應(yīng)具有相同的視覺風(fēng)格和觸發(fā)機(jī)制。

導(dǎo)航和菜單

：導(dǎo)航欄和菜單的設(shè)計(jì)也應(yīng)保持一致，使用戶能夠輕松地在不同頁面或功能之間切換。

反饋機(jī)制的一致性

操作反饋

：當(dāng)用戶執(zhí)行某個(gè)操作時(shí)，應(yīng)用或網(wǎng)站應(yīng)提供一致且及時(shí)的反饋，如加載動畫、成功提示或錯(cuò)誤消息等。這有助于用戶了解操作結(jié)果并采取相應(yīng)的行動。

狀態(tài)提示

：對于長時(shí)間運(yùn)行的操作或需要用戶等待的場景，應(yīng)提供明確的狀態(tài)提示（如進(jìn)度條），以減輕用戶的不確定感和焦慮感。

在任何維度上，一致性不應(yīng)成為設(shè)計(jì)的唯一導(dǎo)向。設(shè)計(jì)，這一融合了藝術(shù)與科學(xué)的復(fù)雜領(lǐng)域，要求我們在用戶體驗(yàn)的細(xì)膩雕琢、功能需求的精準(zhǔn)滿足、美學(xué)價(jià)值的深刻體現(xiàn)及技術(shù)可行性的嚴(yán)格考量間游走。

“一致性”作為設(shè)計(jì)策略，其核心使命在于優(yōu)化用戶路徑，降低認(rèn)知門檻，確保用戶在多元界面中穿梭時(shí)仍能感受到連貫與和諧。當(dāng)我們在與設(shè)計(jì)團(tuán)隊(duì)（包括工程師、產(chǎn)品經(jīng)理等）溝通時(shí)，僅僅提及“一致性”可能并不足以說明其必要性和價(jià)值。我們需要更深入地闡述為什么需要保持一致性，以及它如何具體幫助減少用戶困惑、提高用戶滿意度和忠誠度。

同時(shí)，我們應(yīng)清醒認(rèn)識到，“一致性”并不是萬能的。在某些情況下，為了追求極致的用戶體驗(yàn)或解決特定的設(shè)計(jì)問題，可能需要打破傳統(tǒng)的一致性規(guī)則。因此，設(shè)計(jì)師需要在保持一致性和創(chuàng)新之間找到平衡點(diǎn)，根據(jù)具體情況靈活調(diào)整設(shè)計(jì)方案。

實(shí)際落地執(zhí)行時(shí)，要根據(jù)產(chǎn)品定位、用戶場景，結(jié)合業(yè)務(wù)功能來確定設(shè)計(jì)方案，不能為了一致而一致。

當(dāng)我們遇到一致性問題時(shí)，還是需要從以下3個(gè)方面深入思考，做出準(zhǔn)確合理的設(shè)計(jì)決策。

真實(shí)項(xiàng)目

在SaaS產(chǎn)品設(shè)計(jì)中，特別是面向B/G端（企業(yè)用戶）時(shí)，滿足不同用戶角色（如普通用戶與高權(quán)限領(lǐng)導(dǎo)）的需求是至關(guān)重要的。

管理端布局設(shè)計(jì)

普通簡潔明了

：為普通用戶設(shè)計(jì)的管理界面應(yīng)簡潔直觀，聚焦于日常操作，如數(shù)據(jù)查看、統(tǒng)計(jì)和下載。

功能分區(qū)

：通過清晰的導(dǎo)航欄或側(cè)邊欄將功能區(qū)域劃分開，如“數(shù)據(jù)概覽”、“報(bào)表下載”、“任務(wù)管理”等，便于用戶快速定位所需功能。

操作便捷

：確保常用操作（如搜索、篩選、排序）易于觸達(dá)，減少用戶點(diǎn)擊次數(shù)和頁面跳轉(zhuǎn)。

首頁版心定寬設(shè)計(jì)

固定寬度

：為首頁設(shè)定一個(gè)合適的固定寬度（如1200px、1440px等），以保證內(nèi)容在大多數(shù)屏幕上都能保持一致的閱讀體驗(yàn)。

信息模塊化

：將首頁內(nèi)容劃分為多個(gè)卡片，每個(gè)卡片承載一個(gè)獨(dú)立的信息單元（如數(shù)據(jù)報(bào)表、通知公告、項(xiàng)目進(jìn)展等）。

視覺層次

：通過顏色、大小、陰影等設(shè)計(jì)元素區(qū)分卡片的重要性，引導(dǎo)用戶視線，提高信息獲取效率。

交互性

：為卡片添加交互元素，如點(diǎn)擊展開、滑動查看更多等，增加用戶參與度和頁面活躍度。

位置差異性分析

根據(jù)「認(rèn)知負(fù)荷>視覺負(fù)荷>動作負(fù)荷」理論，在頁面中我們首先要讓用戶能夠找到按鈕，然后完成操作。

相對于彈窗，頁面的空間更大，邊界感偏弱，用戶的視覺重心更容易停留在左側(cè)表單內(nèi)容區(qū)域。所以按鈕應(yīng)該緊隨搜索條件，便于用戶快速發(fā)現(xiàn)按鈕。

區(qū)域用戶已經(jīng)形成下意識操作習(xí)慣,雖然區(qū)別于規(guī)范,只能打破,遵循客戶需求

一致性是規(guī)則

“一致性”作為規(guī)則或手段，服務(wù)于提升用戶體驗(yàn)的原則。規(guī)則與原則一致時(shí)，促進(jìn)業(yè)務(wù)共識與用戶價(jià)值；沖突時(shí)，原則優(yōu)先。用戶體驗(yàn)原則指導(dǎo)下的一致性，要超越表面控件統(tǒng)一，更在于產(chǎn)品決策與價(jià)值取向的一致。必要時(shí)，為更好的用戶體驗(yàn)，可在規(guī)則上讓步以實(shí)現(xiàn)原則統(tǒng)一。打破規(guī)則需慎重權(quán)衡，確保用戶便利足以彌補(bǔ)理解成本，需長期全局考量。規(guī)則非僵化教條，而是引導(dǎo)我們謹(jǐn)慎創(chuàng)新的框架。

一致性的底線

無論從哪個(gè)角度，一致性存在的必要性都是毋庸置疑的。

對于關(guān)鍵的設(shè)計(jì)元素，如專有名詞和顏色體系，保持一致性至關(guān)重要。這不僅有助于維護(hù)品牌形象，還能減少用戶的困惑。

特定設(shè)計(jì)語言在特定場景下的變體應(yīng)用，雖然可能帶來一定的視覺新鮮感或針對性優(yōu)化，但往往需要謹(jǐn)慎評估其潛在風(fēng)險(xiǎn)。一旦變體打破了整體設(shè)計(jì)的一致性，可能會破壞用戶對品牌的熟悉感和信任感，甚至引發(fā)誤解。因此，在追求設(shè)計(jì)創(chuàng)新的同時(shí)，必須確保這種創(chuàng)新是基于一致性的原則之上，以維持品牌的整體性和用戶的良好體驗(yàn)。

擁抱復(fù)雜性

一致性確實(shí)不應(yīng)成為設(shè)計(jì)師的避風(fēng)港或限制創(chuàng)新的枷鎖，而應(yīng)是基于對業(yè)務(wù)深刻理解和多樣化設(shè)計(jì)能力之上的價(jià)值選擇。設(shè)計(jì)師的核心任務(wù)始終是滿足用戶的多樣化需求和偏好，這需要他們細(xì)致入微地觀察、理解并解決每個(gè)用戶的獨(dú)特問題。

在追求一致性的同時(shí)，設(shè)計(jì)師應(yīng)保持“第一性思考”的能力，即回歸問題的本質(zhì)，從用戶需求出發(fā)進(jìn)行創(chuàng)新設(shè)計(jì)。多樣性頁面的產(chǎn)出，不僅體現(xiàn)了設(shè)計(jì)師的創(chuàng)造力和靈活性，也是提升用戶體驗(yàn)、增強(qiáng)產(chǎn)品吸引力的關(guān)鍵。

一致性與創(chuàng)新設(shè)計(jì)并非相互排斥，而是相輔相成的關(guān)系。真正的一致性不應(yīng)導(dǎo)致單調(diào)或拒絕創(chuàng)新，而應(yīng)是在遵循品牌或產(chǎn)品核心價(jià)值的前提下，鼓勵(lì)設(shè)計(jì)師在細(xì)節(jié)和體驗(yàn)上不斷探索和突破。當(dāng)設(shè)計(jì)師感到被既定規(guī)則束縛時(shí)，應(yīng)勇于質(zhì)疑并重新評估當(dāng)前的規(guī)范，確保所謂的“一致性”不是刻板的偽命題，而是真正符合用戶需求和品牌發(fā)展的價(jià)值導(dǎo)向。

因此，設(shè)計(jì)師應(yīng)時(shí)刻保持開放的心態(tài)和敏銳的洞察力，不斷探索和嘗試新的設(shè)計(jì)方法和理念，以更加靈活和創(chuàng)新的方式實(shí)現(xiàn)一致性與用戶需求的完美融合。

重要的設(shè)計(jì)原則

「一致性」作為設(shè)計(jì)領(lǐng)域中的一項(xiàng)基礎(chǔ)性原則，其重要性不言而喻。它不僅為設(shè)計(jì)過程提供了穩(wěn)固的基石，還顯著促進(jìn)了開發(fā)效率與產(chǎn)品體驗(yàn)的全面升級。在設(shè)計(jì)實(shí)踐中，一致性確保了界面元素的統(tǒng)一性和連貫性，使得用戶能夠迅速熟悉并掌握產(chǎn)品的使用方式，降低了學(xué)習(xí)成本，增強(qiáng)了操作的直觀性和便捷性。

靈活變通使用

一致性原則并非一成不變的強(qiáng)制規(guī)定，而是需要根據(jù)產(chǎn)品的具體定位和市場環(huán)境進(jìn)行靈活變通的應(yīng)用。不同的產(chǎn)品可能面向不同的用戶群體，擁有獨(dú)特的品牌調(diào)性和功能需求，因此在追求一致性的同時(shí)，也需充分考慮這些因素，確保設(shè)計(jì)既符合品牌特色，又能滿足用戶的實(shí)際需求。

提升用戶體驗(yàn)是價(jià)值所在

一致性的真正價(jià)值在于其能夠顯著提升用戶體驗(yàn)。通過遵循用戶的認(rèn)知和習(xí)慣，設(shè)計(jì)師能夠創(chuàng)造出更加自然、流暢的操作流程，使用戶在享受產(chǎn)品功能的同時(shí)，也能感受到品牌所傳遞的舒適與和諧。因此，在追求設(shè)計(jì)一致性的過程中，我們始終應(yīng)以人為本，將用戶的體驗(yàn)和感受放在首位。建設(shè)有兼容性和長期價(jià)值的的一致性框架，在一致性中做到有用戶價(jià)值的設(shè)計(jì)，是設(shè)計(jì)師應(yīng)該不斷探索的命題。

作者：cheny米魚
鏈接：https://www.zcool.com.cn/article/ZMTYzNTAzNg==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

評論(0) 瀏覽(420)

172024-10

打動人心的直覺設(shè)計(jì)

ui設(shè)計(jì)分享達(dá)人

前言

之所以對“直覺設(shè)計(jì)”產(chǎn)生興趣還要源于我們每次的設(shè)計(jì)評審，在跟其他設(shè)計(jì)師還有我們的業(yè)務(wù)方溝通時(shí)，大家常常會問到的且令人印象深刻的問題是：

“用戶怎么知道點(diǎn)哪里？”、“這符合用戶直覺嗎？”

類似的靈魂拷問涉及到用戶使用工具產(chǎn)品行為流程的每一步操作。作為設(shè)計(jì)師大家有時(shí)也會心生質(zhì)疑，“這么明顯用戶注意不到嗎？這么簡單用戶不可能不會操作吧...”。

但是隨著我們的”新手體驗(yàn)官活動“的逐步進(jìn)行，當(dāng)親自站在用戶面前觀察用戶是如何操作和理解工具時(shí)，我們漸漸意識到小白用戶

接觸-認(rèn)知-使用工具

的每一環(huán)都是至關(guān)重要的，即便是一個(gè)交互細(xì)節(jié)的設(shè)計(jì)都有可能帶來認(rèn)知和操作層面受阻，從而勸退用戶。

因此，我們想去了解什么樣的設(shè)計(jì)是符合用戶直覺的，是易用的，同時(shí)也想去了解主流3D建模軟件的核心建模邏輯（SU、Revit為代表）--于是開始了“直覺設(shè)計(jì)”的研究以及“建模課程”的學(xué)習(xí)。

1、什么是直覺設(shè)計(jì)？

首先來看什么是直覺設(shè)計(jì)，直覺設(shè)計(jì)是指用戶無需進(jìn)行有意識的思考就可以立即理解并知道如何去使用產(chǎn)品。國外有不少的用戶研究機(jī)構(gòu)也專門定義過直覺設(shè)計(jì)：

“在特定任務(wù)的背景下，技術(shù)系統(tǒng)可以直觀地使用，而特定用戶能夠有效地交互，而不是有意識地使用先前的知識。”– 用戶界面的直觀使用 (IUUI) 研究小組。一個(gè)由跨學(xué)科研究人員組成的團(tuán)隊(duì)，致力于探索如何定義直觀的使用和界面。

為了方便大家更好的理解直覺設(shè)計(jì)，我們先來看幾個(gè)例子：

案例1-玩具收納：小朋友在玩完玩具以后，把玩具擺的到處都是，如果發(fā)號施令告訴小朋友“去把玩具收拾起來”，小朋友通常不會去收拾。如果將收納設(shè)計(jì)成為一種小游戲，小朋友會自然而然的參與其中并且會覺得非常有趣。

案例2-公共環(huán)境衛(wèi)生：保持小便池的清潔，張貼告示語“注意保持清潔”大多是沒有用的。荷蘭的設(shè)計(jì)師在公共的男士小便池里設(shè)計(jì)了一個(gè)“蒼蠅”，利用人們的嫌惡心理會發(fā)現(xiàn)小便時(shí)會不由自主的對準(zhǔn)中心的位置，從而減少尿液四濺，維護(hù)公共環(huán)境衛(wèi)生。

案例3-公共設(shè)施：設(shè)有傳感器和揚(yáng)聲器的臺階，人們只要踩上去就能聽到音樂聲，從而達(dá)到鼓勵(lì)人們爬樓梯的目標(biāo)。

案例4-工業(yè)產(chǎn)品設(shè)計(jì)：很多耳熟能詳?shù)墓I(yè)產(chǎn)品中也運(yùn)用了直覺設(shè)計(jì)，例如深澤直人的CD播放器，Apple的Vision OS系統(tǒng)等等。

案例5-游戲設(shè)計(jì)：游戲中非常多的運(yùn)用了直覺設(shè)計(jì)，比如超級馬里奧，塞爾達(dá)，想必大家都深有感受。

通過上述案例我們發(fā)現(xiàn)其實(shí)直覺設(shè)計(jì)傳達(dá)出來是信息包含兩方面：用戶看到就能夠理解是什么，且能夠不由自主地產(chǎn)生行動。

看到這里，大家可能會好奇為什么會產(chǎn)生這種”直覺設(shè)計(jì)“？接下來讓我們一起來看看直覺設(shè)計(jì)是如何產(chǎn)生的。

2、直覺設(shè)計(jì)如何產(chǎn)生？

人的直覺設(shè)計(jì)是怎么來的？是天生的嗎？帶著這樣的疑惑，我們閱讀了相關(guān)書籍和文章。

先天視覺和經(jīng)驗(yàn)直覺

先天直覺，也可以說是”本我“，是最原始的”心理現(xiàn)實(shí)“，在個(gè)體從外部世界獲得經(jīng)驗(yàn)之前就存在的內(nèi)部世界，不需要經(jīng)過學(xué)習(xí)或訓(xùn)練。比如嬰兒時(shí)期的特征，希望立刻得到滿足、躲避痛苦、強(qiáng)大的求生意愿等。

經(jīng)驗(yàn)直覺，巴普洛夫的實(shí)驗(yàn)想必大家都知道。有機(jī)體能夠把已有的經(jīng)驗(yàn)遷移到新的學(xué)習(xí)環(huán)境中去，從而擴(kuò)大學(xué)習(xí)范圍。

先天直覺一般對應(yīng)于人類的第一信號系統(tǒng)，是建立在人的直接感覺上的，通過人的感覺（視覺、聽覺、觸覺等）而進(jìn)行的一種思維活動；經(jīng)驗(yàn)直覺（邏輯性直覺直覺）思維雖然利用了人類的感性認(rèn)識（感覺、知覺、表象等）形式，但它絕不是僅僅停留在這一步上，而是超越了邏輯思維形式達(dá)到了更高一個(gè)層次上的思維。

從表面上看，邏輯性直覺的結(jié)果是以直觀的形式表現(xiàn)出來的，實(shí)際上它已經(jīng)在頭腦中進(jìn)行了邏輯程序的高度壓縮，迅速地越過了“理性認(rèn)識階段”，是簡縮了整個(gè)邏輯思維過程的一種思維形式。

所以，邏輯性直覺既源于感性認(rèn)識，又高于感性認(rèn)識，是一種常常能在極短的時(shí)間內(nèi)完成，并能夠?qū)栴}迅速作出回答的一種無意識的、躍進(jìn)式的直覺形式。

構(gòu)建直覺，現(xiàn)有研究指出，分析加工和直覺加工兩者可能處于不斷的相互轉(zhuǎn)換之中。一方面，分析加工可以通過熟練化形成經(jīng)驗(yàn)圖式，從而減少認(rèn)知資源的消耗，并由此轉(zhuǎn)化為直覺加工；另一方面，當(dāng)直覺加工無法通過已有經(jīng)驗(yàn)解決新的問題情境時(shí)，又需要調(diào)動更多的認(rèn)知資源并轉(zhuǎn)向分析加工，直到形成新的經(jīng)驗(yàn)圖式。

先天直覺大家都容易理解，接下來我們重點(diǎn)看一下經(jīng)驗(yàn)直覺是如何產(chǎn)生的？

經(jīng)驗(yàn)直覺的產(chǎn)生與人生存的環(huán)境密切相關(guān)，所以這里包含兩個(gè)關(guān)鍵點(diǎn)：物理世界（環(huán)境）和生活環(huán)境。

來自物理環(huán)境的經(jīng)驗(yàn)

物理環(huán)境主要包括我們生存的自然環(huán)境，以及我們與物理環(huán)境的互動所形成的感官運(yùn)動。人類在嬰兒時(shí)期就開始體驗(yàn)和實(shí)驗(yàn)物理環(huán)境。這種體驗(yàn)建立在我們第一次拿著一個(gè)物體、第一次把它扔到地板上、第一次學(xué)會爬到我們最喜歡的玩具等時(shí)學(xué)到的基本感覺運(yùn)動技能上。我們對物理世界的體驗(yàn)它已成為日常生活的一部分。經(jīng)過物理環(huán)境互動所形成的直覺是跨越國界、且不會被遺忘的。

來自文化環(huán)境的經(jīng)驗(yàn)

通俗的講指社會文化環(huán)境。它包括人類通過其獲得的知識和技術(shù)開發(fā)的所有物質(zhì)文化元素。例如，房屋、村莊、城鎮(zhèn)、公路和鐵路網(wǎng)絡(luò)、交通方式、工業(yè)單位、田野、醫(yī)院、體育場館、娛樂設(shè)施、市場、港口以及日常和特殊用途的物品。除此之外還包括價(jià)值觀念、道德信仰、語言、符號、審美觀念、風(fēng)俗習(xí)慣等各種規(guī)范。

例如播放圖標(biāo)“?”是許多文化中的人們在年輕時(shí)學(xué)習(xí)符號的一個(gè)很好的例子。在任何可以使用媒體播放器的文化中，人們都知道 ? 圖標(biāo)的含義。它的直觀性幾乎與物理世界中的對象行為一致。

因此，在媒體播放器中，人們理所當(dāng)然的希望可以延續(xù)“?”符號的含義。來自文化環(huán)境的知識也可以變得很直觀，但是由于沒有來自物理世界的持續(xù)提醒之后，很容易被遺忘。

因此在提供直覺設(shè)計(jì)時(shí)，應(yīng)盡量符合用戶從物理世界中獲得的經(jīng)驗(yàn)與技能。但如果我們的用戶群體是具有相同文化背景下的人群，符合文化環(huán)境的知識與經(jīng)驗(yàn)也可以作為直觀設(shè)計(jì)的決策依據(jù)。

3、為什么要符合直覺設(shè)計(jì)？

給用戶留下良好的第一印象，助力產(chǎn)品贏得并且留下用戶。

當(dāng)我們開始使用某款產(chǎn)品時(shí)，用戶往往在幾秒內(nèi)就會產(chǎn)生第一印象并且往往會保持不變，少則幾分鐘多則十幾分鐘用戶就可感受到產(chǎn)品的價(jià)值。

渥太華卡雷頓大學(xué)的Gitte·Lindgaard和她的研究小組發(fā)現(xiàn)：人類對事物的初始印象在50毫秒內(nèi)就會形成。研究小組準(zhǔn)備了一批要么極易入眼要么混亂不堪的網(wǎng)頁，讓一批志愿者在快速變換中投票。雖然這些網(wǎng)頁以50毫秒每張的速度一閃而過，但是研究發(fā)現(xiàn)他們的評價(jià)與長時(shí)間觀察后的結(jié)果基本無異。

這就說明了用戶的第一印象非常明確且重要，幫助用戶判斷出這是否是一個(gè)設(shè)計(jì)合理的網(wǎng)站。如果用戶停留時(shí)間再長一點(diǎn)，那么用戶足以判斷出網(wǎng)站上的信息是否是滿足自己需要的信息，從而影響用戶是否繼續(xù)停留下來去使用該網(wǎng)站。

更容易讓用戶達(dá)到心流狀態(tài)、沉浸式的使用產(chǎn)品，并且持續(xù)吸引用戶使用產(chǎn)品。

符合用戶直覺的、熟悉的操作模式，作為用戶直觀使用的基礎(chǔ)，更容易產(chǎn)生積極的審美評價(jià)。相反，如果用戶的認(rèn)知流暢性受阻，則不太會產(chǎn)生正面積極的評價(jià)。簡潔有力的設(shè)計(jì)會促使用戶再次使用產(chǎn)品，是保持產(chǎn)品吸引力的最佳方式。

4、如何使設(shè)計(jì)符合用戶直覺？

因?yàn)楣ぷ髦猩婕暗?D建模軟件的設(shè)計(jì)，所以這部分將結(jié)合3D建模軟件來探討。

如果您接觸過3D建模軟件，一定用過SU、Rhino吧，我們在使用后不久，就能清晰的感受到它們的核心邏輯，比如SU的推拉，Rhino的曲面建模等，進(jìn)而能夠舉一反三的學(xué)會相關(guān)功能，使軟件的學(xué)習(xí)變得更簡單更直覺。那么怎樣的功能設(shè)計(jì)才能打造出軟件的核心邏輯，讓其在使用時(shí)更加符合用戶的直覺？

為了得到以上問題的答案，我們進(jìn)行了SU和Revit這兩款建筑領(lǐng)域主流軟件的使用，感受兩款軟件在直覺設(shè)計(jì)方面的表現(xiàn)，進(jìn)而找到了一些設(shè)計(jì)原則指導(dǎo)我們在實(shí)際業(yè)務(wù)中應(yīng)用。

充分了解你的用戶

每個(gè)人在自己生活的世界里，都會形成自己的一些認(rèn)知，這個(gè)前面也已經(jīng)介紹過。所以要充分了解用戶的知識、技能、經(jīng)驗(yàn)，盡可能減少用戶當(dāng)前具備知識與完成目標(biāo)所需具備的知識之間的Gap。當(dāng)用戶已具備的知識和完成目標(biāo)需要的知識之間的差距越小，越符合用戶的直覺，越容易實(shí)現(xiàn)目標(biāo)。

SU和Revit都是充分了解自己的用戶，基于用戶群體的知識、技能、經(jīng)驗(yàn)等特點(diǎn)，去打造自己軟件的核心邏輯，符合目標(biāo)用戶群體的使用直覺。

▽

SU的Slogan 是“3D for Everyone“，人人可用。他的用戶群體非常廣泛，所以它是一個(gè)業(yè)務(wù)屬性較弱的工具，界面設(shè)計(jì)和操作使用上更簡單，普適性和靈活性更強(qiáng)。使用面作為基本單元建模，推拉面成體，推推拉拉就可以快速完成建模。對于小白來說很容易上手。

Revit

▽

Revit的用戶主要是專業(yè)的建筑師，場景聚焦在建筑相關(guān)領(lǐng)域，所以它是一個(gè)業(yè)務(wù)屬性較強(qiáng)的工具，將更多的業(yè)務(wù)場景包含在里面。比如標(biāo)高、工作平面以及模塊化的構(gòu)件等，這樣的設(shè)定對于建筑背景的用戶來說，可以更符合他們的已有認(rèn)知。

將從物理世界和文化環(huán)

前面反復(fù)提到過過，用戶總是利用她在物理和文化環(huán)境中的經(jīng)驗(yàn)來了解她通過界面可以采取哪些行動。因此我們需要熟知用戶已有的這些經(jīng)驗(yàn)，并考慮到設(shè)計(jì)中。

通過聯(lián)想或類比，將物理世界的經(jīng)驗(yàn)運(yùn)用到數(shù)字產(chǎn)品設(shè)計(jì)中，使得全新的事物變得熟悉。

▽

SU的圖標(biāo)非常直觀好懂，比如畫筆、橡皮擦、油漆桶、量尺、放大鏡、材質(zhì)刷、垃圾桶等等，圖標(biāo)的語意和其在物理世界的功能是相符的，哪怕是第一次接觸建模軟件的人，只看圖標(biāo)也能大概猜出對應(yīng)的功能。

Revit

▽

Revit將物理世界中房子映射到設(shè)計(jì)中。比如像墻、門、窗、柱、屋頂?shù)?，這是作為一個(gè)房子基本組成結(jié)構(gòu)，對于建筑師來言，非常熟悉。所以在軟件設(shè)計(jì)中，功能也是基于這種具象的構(gòu)件分類的，在用戶使用之前，內(nèi)心已經(jīng)有了房子的認(rèn)知，從而也能在產(chǎn)品中找到對應(yīng)的功能，理解成本很低。

結(jié)合用戶在已有的文化環(huán)境中獲得的認(rèn)知與經(jīng)驗(yàn)：比如在類似產(chǎn)品中或你的產(chǎn)品所教給他的一些知識、經(jīng)驗(yàn)，并保持這些經(jīng)驗(yàn)的一致性。

▽

很好的匹配用戶已經(jīng)存在的認(rèn)知。提及SU就會想到它的推拉交互，推拉面成體。一方面它底層的點(diǎn)線面邏輯是我們學(xué)習(xí)數(shù)學(xué)或繪畫最基礎(chǔ)的知識，幾乎人人都知道；另一方面推拉的操作也是和我們已有的推敲形體的過程體驗(yàn)是一致的，我們在繪制草圖時(shí)，會在紙上勾勾畫畫，涂涂抹抹，這跟在SU上推推拉拉有異曲同工之妙，我們使在用它時(shí)能夠享受手繪一般的樂趣，很難忘記這個(gè)操作。

Revit

▽

同為Autodesk公司產(chǎn)品，Revit的用戶與Autocad有著大量的重疊，因此在交互上也延用了不少CAD的固有邏輯，將用戶在CAD獲得的認(rèn)知與經(jīng)驗(yàn)沿用在這里。與AutoCAD一樣，Revit快捷鍵

也

是該命令英文單詞的第1個(gè)或前面2個(gè)字母，這使得用戶無需再學(xué)習(xí)。

以及為了讓用戶切換軟件成本最小，Revit中還支持一個(gè)指令可以設(shè)置多個(gè)快捷鍵，這樣可以兼容喜歡自定義快捷鍵的高階用戶的習(xí)慣。例如在AutoCAD里習(xí)慣用Ctrl+1 呼出屬性面板，而如果按 Revit 快捷鍵的邏輯則應(yīng)該是"屬性"英文取用 PP，對于已熟悉AutoCAD操作的用戶來說，這么高頻的指令改變會造成極大的不適應(yīng)，默認(rèn)兼容多個(gè)快捷鍵就是非常優(yōu)雅的解法。

用戶認(rèn)知和行為要足夠簡單

關(guān)于1+1=？，大家看到后會自然而然的想到答案；28×4=？，稍加思索也能給出答案；那么3927÷23=？，看到這個(gè)問題，可能幾乎沒有人想要解開了。有些問題無意識的解開了，有些問題看到就想放棄解答。由此可見改變?nèi)藗冃袨榉绞降耐ǔＪ悄芊褡銐蚝唵魏腿菀祝?dāng)眼前的問題復(fù)雜時(shí)，人們不會試圖解決它。

▽

吸附非常的自然。當(dāng)我想移動到某個(gè)位置的時(shí)候，很自然將鼠標(biāo)靠近目標(biāo)對象，就會幫我精準(zhǔn)的吸附到對應(yīng)的位置

補(bǔ)面非常簡單。當(dāng)形體發(fā)生破面的時(shí)候，自然的想要繪制線去補(bǔ)全，當(dāng)我沿著要補(bǔ)全的路徑繪制兩個(gè)點(diǎn)的時(shí)候，整個(gè)面被補(bǔ)好了。

5、實(shí)戰(zhàn)：應(yīng)用最佳設(shè)計(jì)原則

將我們在建模軟件中學(xué)習(xí)到的有助于直覺設(shè)計(jì)的內(nèi)容進(jìn)行總結(jié)，得出幾條原則，并將這些設(shè)計(jì)原則應(yīng)用到實(shí)踐當(dāng)中，指導(dǎo)我們進(jìn)行設(shè)計(jì)。

心理學(xué)中也提到，人的大腦處理不同的信息時(shí)所消耗的腦力資源是不同的，他們的排序是認(rèn)知>視覺>行動。用戶花費(fèi)的腦力資源要多于點(diǎn)擊按鈕或移動鼠標(biāo)時(shí)（動作負(fù)荷）。所以我們在設(shè)計(jì)的時(shí)候，首先要從認(rèn)知上降低用戶的認(rèn)知負(fù)擔(dān)，其次在行為上確保操作絲滑順暢。

認(rèn)知上，降低認(rèn)知負(fù)擔(dān)

提升信息的識別性。

比如位置、信息分組的邏輯、顏色、比例等的使用等。作為別墅設(shè)計(jì)軟件，在進(jìn)行功能分類時(shí)，要以用戶使用的流程、場景，識別的效率等為依據(jù)進(jìn)行合理分組。

提高和用戶已有認(rèn)知的匹配。

作為別墅設(shè)計(jì)軟件，設(shè)計(jì)要與用戶已有的對別墅對房子的認(rèn)知相匹配。比如檐口線、浮雕、墻裙等構(gòu)件，人們在現(xiàn)實(shí)中的房子中都會見到，只是不熟知這些叫法。因此我們采用建造一個(gè)真實(shí)小房子的做法，當(dāng)用戶點(diǎn)擊某個(gè)構(gòu)件，對應(yīng)的構(gòu)件就會在房子上高亮，用戶瞬間就會明白，哦原來是它，跟已有的認(rèn)知匹配上了，會有一種恍然大悟的感覺。同時(shí)也讓用戶大概知道這個(gè)構(gòu)件位于房子的哪個(gè)位置，對后續(xù)的操作有預(yù)期，知道要擺在哪個(gè)位置。

保持醫(yī)學(xué)認(rèn)知的一致性。

任何產(chǎn)品都很難做到匹配用戶已有的所有認(rèn)知，總會有一些內(nèi)容是需要重新學(xué)習(xí)獲得的，那么就要保證我們教給他的這些認(rèn)知邏輯始終一致，讓用戶能做到舉一反三。作為別墅設(shè)計(jì)軟件，用戶要完成一個(gè)完整房子的建造，需要用到20+的構(gòu)件模塊，我們希望用戶學(xué)會使用一個(gè)構(gòu)件之后，就不需要再學(xué)習(xí)，能觸類旁通的使用同類構(gòu)件。因此歸納出通用操作流程，找到相對統(tǒng)一的方式，串聯(lián)起我們用戶的心智。

行為上，讓操作絲滑順暢

提供場景化的行為設(shè)計(jì)，并將操作聚焦在手邊。

在我們的別墅設(shè)計(jì)軟件中，當(dāng)用戶要修改老虎窗和飄窗的時(shí)候，如果看到這個(gè)窗戶的樣式不是自己想要的，可能會想去繪制。按照我們現(xiàn)有的流程，用戶要先去左側(cè)面板找到自由繪窗入口，然后再選擇要在哪個(gè)面上繪制，操作流程是有點(diǎn)繞的。后面我們就想，用戶要修改這個(gè)窗子的時(shí)候，直覺上會去點(diǎn)擊它，那么在選中這個(gè)對象的時(shí)候，在手邊提供自由繪窗的入口，讓他能夠快速的綁定這個(gè)對象去繪制窗戶，操作上順暢了很多。

一次只聚焦做一件事情，減少其他干擾。

我們現(xiàn)在的大部分操作，都是是激活命令后，左側(cè)面板還在。觀察到很多新用戶在激活了功能后，不知道下一步需要干什么。因?yàn)榻缑嫔闲枰P(guān)注的事情太多了。所以，我們嘗試用戶在激活功能后，將當(dāng)前步驟中不需要他關(guān)注的面板隱藏，聚焦到他當(dāng)前需要做的事情上面去。

操作要足夠簡單，簡單到不需要有太多思考，是一個(gè)自然而然的行為。

以下介紹的是我們的照片還原功能，對于外墻漆、門窗等用戶，他們可以現(xiàn)場拍好房子照片，導(dǎo)入后基于照片還原出別墅方案，再進(jìn)行后續(xù)的外立面和門窗設(shè)計(jì)。最初，我們需要用戶手動擺放兩組消逝線去確定透視角度、然后調(diào)整比例尺、在尺子上選取點(diǎn)劃分樓層、拖拽點(diǎn)調(diào)整邊界、通過輸入開間數(shù)量確定開間。整個(gè)過程比較復(fù)雜，也涉及很多專業(yè)的概念，用戶不知道該如何操作。

后面優(yōu)化后，我們結(jié)合算法識別出照片中的房子，默認(rèn)給一個(gè)box,用戶通過拖動box上的角點(diǎn)和邊線去調(diào)整整個(gè)形體。因?yàn)橛脩魧ox的概念是熟悉的，拖拽box去擬合背后的照片就變得容易的多。樓層和開間的劃分也采用這種切豆腐塊的方式，用戶一下一下去切就好。不用再去輸入數(shù)字，想象會是什么樣子。而比例尺只需要用戶輸入他想要的1樓的高度即可確定。優(yōu)化后，生成方案的轉(zhuǎn)化率提升了將近20%。

6、小結(jié)

直覺設(shè)計(jì)需要用戶看到產(chǎn)品時(shí)產(chǎn)生一種熟悉感，但是這種熟悉感判斷起來并不簡單，其中一部分人熟悉并不代表所有人都熟悉。所以設(shè)計(jì)師需要充分了解他們的用戶，了解產(chǎn)品的市場，并充分獲取用戶熟悉內(nèi)容的信息才有助于作出符合直覺設(shè)計(jì)的決策。

做出符合直覺的設(shè)計(jì)是困難的，需要充分考慮用戶在物理世界和文化環(huán)境中獲得的知識和經(jīng)驗(yàn)，并將其應(yīng)用到具體的設(shè)計(jì)實(shí)踐中，也就是用戶的心智模型和產(chǎn)品概念模型達(dá)到基本吻合甚至去塑造與產(chǎn)品概念模型一致的用戶心智模型。

蘋果公司創(chuàng)始人兼前首席執(zhí)行官史蒂夫·喬布斯解釋說：“我們設(shè)計(jì)中最重要的是，必須讓事情直觀明顯。

建議每一位設(shè)計(jì)師同學(xué)也多去感受和認(rèn)識自己的知道，尤其是首次打開某個(gè)網(wǎng)站時(shí)，要更加關(guān)注自己的視覺動線和心理感受、無意識產(chǎn)生的操作行為等。同時(shí)也不要讓競品變成你的直覺，始終去思索有沒有體驗(yàn)更加友好、創(chuàng)新的交互方式。

當(dāng)然，連續(xù)的直覺操作也可能會讓用戶覺得疲倦，可以適時(shí)考慮引入驚喜設(shè)計(jì)，為用戶打造Amazing的感受。

去認(rèn)識和感受自己的直覺
不要讓競品的設(shè)計(jì)變成你的直覺
連續(xù)的直覺設(shè)計(jì)也可能也可能會給用戶帶來疲勞和厭倦，需要考慮在適當(dāng)?shù)臅r(shí)候給用戶進(jìn)喜設(shè)計(jì)。

本文在以下書籍和文章中予以引用，同時(shí)也推薦大家閱讀，想必大家對直覺設(shè)計(jì)會有更加深刻的認(rèn)知和理解。

注意：文中數(shù)據(jù)皆為演示數(shù)據(jù)，非業(yè)務(wù)真實(shí)數(shù)據(jù)

參考書籍：

《創(chuàng)意選擇》
《福格行為模型》
《一目了然-Web軟件顯性設(shè)計(jì)之路》
《峰值體驗(yàn)-影響用戶決策的關(guān)鍵時(shí)刻》
《任天堂的體驗(yàn)設(shè)計(jì)-創(chuàng)造不知不覺打動人心的體驗(yàn)》
《玄機(jī)設(shè)計(jì)學(xué)：改變?nèi)藗冃袨榈膭?chuàng)意構(gòu)思法》

參考文章：

Intuitive UX design an approach beyond usability
https://uxdesign.cc/the-power-of-intuition-designing-beyond-usability-2899cb37f98a
https://www.interaction-design.org/literature/topics/intuitive-design
Intuitive Web Design: How to Make Your Website Intuitive to Use

作者：藍(lán)胖、瑤一

作者：群核科技MCUX
鏈接：https://www.zcool.com.cn/article/ZMTYyNTkwMA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

評論(0) 瀏覽(334)

首頁

跨平臺手機(jī)界面設(shè)計(jì)怎么做

動效設(shè)計(jì)在手機(jī)界面設(shè)計(jì)中的作用

無障礙設(shè)計(jì)原則在手機(jī)界面中的應(yīng)用

手機(jī)界面設(shè)計(jì)風(fēng)格演變

打動用戶的關(guān)鍵：用戶體驗(yàn)地圖實(shí)戰(zhàn)攻略

清晰展現(xiàn)關(guān)鍵信息，助力高效決策——數(shù)據(jù)圖表

Web端設(shè)計(jì)語言庫——數(shù)據(jù)可視化

從對話到嵌入：多元場景AI形態(tài)淺析

用戶體驗(yàn)一致性思考

打動人心的直覺設(shè)計(jì)

分類

日歷

鏈接

個(gè)人資料

存檔