對話框是一種重要的交互方式，主要用于完成信息傳遞。對話框很常見，但并不見得每一個設(shè)計師都可以百分百地弄明白對話框這個概念

對話框是一種重要的交互方式，主要用于完成信息傳遞。對話框很常見，但并不見得每一個設(shè)計師都可以百分百地弄明白對話框這個概念。這篇文章是對「對話框」的一個簡單梳理和總結(jié)，希望可以解決大家心中的一些疑惑。

01

了解對話框

1、對話框定義

對話框是疊加在應(yīng)用主窗口上的彈出式的窗口。對話框以對話的方式讓用戶參與進(jìn)來，在對話中它給出消息或要求輸入。

當(dāng)用戶完成消息的閱讀或者作出選擇后，可以取消或者接受該對話框，之后，這個對話框便消失了，把應(yīng)用的主窗口交還給用戶。

關(guān)于對話框的概念，以下是百度百科的解釋：

對話框越來越廣泛地被應(yīng)用于軟件、網(wǎng)頁、以及移動設(shè)備中。它可以保留用戶當(dāng)前進(jìn)程的情況下，指引用戶完成一個特定的操作 。

2、對話框分類

按照對話框的交互方式，可將其分為「模態(tài)[1]對話框」和「非模態(tài)對話框」。我們可以把他們看作是兩個小家族，模態(tài)家族的人比較強(qiáng)硬，而非模態(tài)家族的人相對溫柔一點(diǎn)。兩個家族的主要區(qū)別：是否強(qiáng)制用戶對其進(jìn)行回應(yīng)。

模態(tài)對話框：是位于瀏覽器的主頁面核心區(qū)域，需要用戶對它做出相應(yīng)交互，模態(tài)才會消失。而對話框會因?yàn)樽陨淼奈潭取⑼Ａ魰r間、信息量承載多少被劃分為多種對話框類型進(jìn)行區(qū)分，常見的對話框分別為：普通對話框、內(nèi)嵌表單對話框、分步表單對話框、文件選擇對話框、復(fù)雜信息展示對話框。

△ 何時使用模態(tài)對話框

1）在重要的警告時使用，避免出現(xiàn)嚴(yán)重問題、或修正已出現(xiàn)的問題。

例如：用戶錄入信息后未保存就要關(guān)閉時，彈出模態(tài)對話框提示用戶保存。

2）在需要用戶輸入信息或進(jìn)行某操作，才能繼續(xù)當(dāng)前流程的時候使用。

例如：在使用Canva資源網(wǎng)站時，點(diǎn)擊“上傳”會彈出模態(tài)化的登錄/注冊窗口，引導(dǎo)登錄/注冊后使用。

3）用來將復(fù)雜流程拆分成簡單步驟。

例如：Teambition-分步驟的模態(tài)對話框式創(chuàng)建項(xiàng)目。

4）用來獲取信息，該信息可大大減輕用戶的后續(xù)操作/精力。

例如：在轉(zhuǎn)賬場景中，如果先復(fù)制一個賬號，打開手機(jī)銀行APP（以招商銀行或平安口袋銀行為例），系統(tǒng)會通過模式對話框詢問用戶是否向這個賬號轉(zhuǎn)賬，這樣的設(shè)計做到了預(yù)判用戶行為，節(jié)省用戶后面的操作成本。

非模態(tài)對話框：與模態(tài)完全相反，它更加溫和，不會強(qiáng)制打斷用戶正在進(jìn)行的現(xiàn)有流程，對用戶的干擾比較小。通常這類對話框只會在屏幕上短暫停留，幾秒就會消失，也因此用戶容易忽略它們的存在。因此非模態(tài)對話框不適合展示重要信息、不能承載大量文案，常見的類型有：通知提醒、全局提示、警告提示、氣泡卡片、文字提示。

△ 何時使用非模態(tài)對話框

1）在獲取與當(dāng)前流程不必要信息的時候使用。

例如：平安口袋銀行和平安數(shù)字口袋采用氣泡卡片展示更多功能或引導(dǎo)用戶登錄。

2）不打斷重要流程中使用。

例如：在平安口袋銀行APP中購買理財時，如果遇到疑問的話，不會彈出框提示讓客戶咨詢投顧，而且采用氣泡框形式提示，不打斷用戶購買。

簡單來說，兩者的優(yōu)缺點(diǎn)見下表：

02

對話框常見應(yīng)用場景

從前面講到的定義來看，對話框最主要的目的是：傳遞信息。那么從目標(biāo)導(dǎo)向的角度來看對話框，對話框要傳遞的信息的常見應(yīng)用場景主要有以下五種：

1、屬性對話框

屬性對話框是向用戶呈現(xiàn)或讓用戶改變所選對象的屬性或者設(shè)置。一般來說，在屬性對話框中，用戶可以修改當(dāng)前的選擇，也可以設(shè)置應(yīng)用程序的全局屬性。該對話框適用于非頻繁操作和或僅需要設(shè)置一次的屬性，屬性對話框常見在一些設(shè)置、詳情中。

例如：Windows 11系統(tǒng)的設(shè)置界面，可設(shè)置系統(tǒng)的全局屬性。

2、功能對話框

功能對話框通常從菜單中打開，是最常見的模態(tài)對話框，只控制單一功能，如打印、文件上傳/導(dǎo)入、插入對象或拼寫檢查。該對話框不僅允許用戶啟動一個動作，而且也允許用戶設(shè)置動作的細(xì)節(jié)，屬于模態(tài)對話框。

例如：瀏覽器的打印功能，會彈出模態(tài)化的打印窗口，用戶可設(shè)置打印的細(xì)節(jié)。

例如：飛書的文檔導(dǎo)入功能，使用模態(tài)化對話框，引導(dǎo)用戶選擇文件類型或進(jìn)行批量導(dǎo)入操作。

3、進(jìn)度對話框

進(jìn)度對話框是由應(yīng)用程序啟動的，而不是由用戶請求而啟動的。它們向用戶表明當(dāng)前應(yīng)用正在忙于某些內(nèi)部功能，其他功能的處理能力可能會降低。

每個進(jìn)度對話框都應(yīng)該向用戶清晰地展現(xiàn)如下信息：

• 一個耗時的進(jìn)程正在進(jìn)行
• 現(xiàn)在一切正常
• 該進(jìn)行還有多長時間才能完成
• 還有多少事情或項(xiàng)目沒有做完
• 用戶如何才能取消該操作，或重獲控制權(quán)

例如：使用Axure軟件導(dǎo)出html文件時的進(jìn)度提示，既提醒用戶當(dāng)前Axure正在運(yùn)行，又告知用戶當(dāng)前文件導(dǎo)出進(jìn)度。

例如：使用Sketch軟件導(dǎo)出文件時的進(jìn)度提示

4、通知對話框

通知對話框?qū)⒁恍┲匾畔蟾娼o用戶。來源可以是一些觸發(fā)的事件，也可以是其他用戶的通知。

常見的有通知中心對話框，處理完成某個操作的告知等等。

例如：花瓣的通知提醒

例如：脈脈的隱私政策閱讀提示和汽車之家的開啟通知提示，均采用模態(tài)對話框方式。

5、公告對話框

公告對話框，和進(jìn)度對話框一樣，由應(yīng)用程序直接啟動，不是由用戶請求發(fā)起的。公告對話框有三種：錯誤、警告、確認(rèn)。

這種對話框通常不會要求用戶填寫什么，只會詢問你“真的要進(jìn)行嗎？”或者告訴你一件事情。所以在這種對話框上，一般只會有只有[取消]和[確認(rèn)]，或者[OK]。

屬性、功能、進(jìn)度對話框，是用戶主動請求的--它們?yōu)橛脩舴?wù)。但是，應(yīng)用程序發(fā)起的公告對話框--它們?yōu)閼?yīng)用程序服務(wù)，常常會犧牲用戶利益。由于公告對話框比較常見且常常犧牲用戶利益，那么我們怎么把這些討厭且無用的公告對話框直接鏟除掉，換成更加友好、能給用戶帶來真正幫助的交互方式呢？接下來我們來一起看看怎么讓公告對話框“名聲鵲起”。

03

怎么讓公告對話框“名聲鵲起”

我們可以從應(yīng)用本身和對話框本身著手提供友好的交互方式，減少公告對話框的出現(xiàn)頻率。

1、應(yīng)用方面

解決用戶錯誤的方法不是指責(zé)用戶，讓用戶再認(rèn)真一些，或者給他們更多的指導(dǎo)練習(xí)，而應(yīng)該優(yōu)化應(yīng)用設(shè)計，讓犯錯變得困難。

讓應(yīng)用變“聰明”，減少用戶犯錯

• 使用有界控件。比如驗(yàn)證碼輸入框、數(shù)字鍵盤等

示例：登錄藍(lán)湖時的短信驗(yàn)證碼輸入框

示例：轉(zhuǎn)賬時輸入金額的數(shù)字鍵盤，金額大小的位數(shù)提示；平安口袋銀行的身份證號專屬鍵盤。

• 
  提高可見性，用戶可自主糾錯

示例：輸錯密碼是一個很難避免的錯誤場景，語雀密碼登錄支持可見密碼，一來是考慮安全問題，二來在用戶輸錯的場景下可以打開眼睛，即可見密碼，減少出現(xiàn)錯誤頻率。

• 
  具備預(yù)判思維，在容易出錯的地方提供更方便的功能

示例：在支付寶聊天窗輸入一串?dāng)?shù)字，支付寶發(fā)現(xiàn)這個問題后，提供了識別后直接轉(zhuǎn)賬的功能，預(yù)判了用戶的慣性，減少錯誤發(fā)生。

Zoom - 拉會前預(yù)設(shè)值在加入會議室的界面，提前選擇是否在進(jìn)入會議房間后“不自動連接語音”和“保持?jǐn)z像頭關(guān)閉”，有效避免忘記閉麥或者忘記關(guān)攝像頭就直接加入了線上會議的意外尷尬。

讓操作可“復(fù)原”，提供撤銷功能。

在很多破壞性的操作都會二次進(jìn)行提醒，讓用戶確認(rèn)操作，比如說刪除操作。在刪除之前都會詢問用戶“你真的要刪除嗎？”想一想……你在看到這些提示的時候，是不是眼疾手快地按下那個「確認(rèn)」按鈕？

這種對話框在沒有容錯處理時，非常容易被我們這種無腦按「確認(rèn)」的用戶釀成大錯。比如我“手賤”只是試試這個刪除，然后就把某個表幾千條辛苦寫了一個月的數(shù)據(jù)刪掉了，由此可見系統(tǒng)的容錯處理有多么重要。

示例：Windows系統(tǒng)在早期的時候，刪除文件時會讓用戶進(jìn)行二次確認(rèn)，但這是完全沒必要的，因?yàn)閯h除文件不是真正的刪除，還會在回收站里面。

Mac系統(tǒng)：在回收站刪除文件將是永久性刪除，此時的確認(rèn)對話框才是對用戶有用的。

2、對話框設(shè)計方面

從對話框本身的設(shè)計優(yōu)化出發(fā)，我們可以對話框的使用場景和文案方面著手進(jìn)行優(yōu)化設(shè)計。

對話框使用場景

其實(shí)什么時候使用對話框、是否使用取決于你要給用戶展示的信息是否重要。

例如你在手機(jī)上買了一張電影票，支付失敗的結(jié)果如果用toast展示就會容易被用戶忽視。那么等到用戶到了電影院才發(fā)現(xiàn)自己購買失敗，那么用戶極有可能當(dāng)場卸載你的產(chǎn)品。

模態(tài)彈框會打斷用戶當(dāng)前操作流程，所以「使用對話框要克制」。總原則是：能在界面展示就不用彈框，能用非模態(tài)彈框的就不要用模態(tài)彈框?？傊匾男畔?yōu)先考慮使用對話框。

具體的使用原則有：

• 彈框使用盡量克制。
• 文字需要精簡，使用行為召喚動詞。
• 注意區(qū)分復(fù)雜任務(wù)和輕量任務(wù)，選擇對應(yīng)的彈框類型。
• 反饋要及時。
• 可使用引導(dǎo)幫助選擇。

清晰且友好的文案

如果非要使用對話框，那么請使用友好尊重用戶的方式。當(dāng)我們說到人與人之間的交流時，語言是重要的媒介，而用戶與產(chǎn)品之間同樣如此。

在設(shè)計過程中應(yīng)始終努力設(shè)計出有效的提示性文案，但是, 一定是有比沒有要好嗎？個人認(rèn)為也是不必要的，糟糕的提示性文案甚至?xí)茐漠a(chǎn)品中最好的用戶體驗(yàn)。例如以下幾種情況：

• 含糊不清
• 過于啰嗦
• 無意義，產(chǎn)生誤導(dǎo)
• 無同理心

因此糟糕的提示文案設(shè)計會誤導(dǎo)用戶在產(chǎn)品中采取不必要的操作, 從而使他們感到生氣和困惑，甚至可能會破壞品牌對用戶的忠誠度，產(chǎn)生本末倒置的結(jié)果， 也給用戶帶來不佳體驗(yàn)。

所以，語言是使產(chǎn)品更加人性化的主要因素。產(chǎn)品的文案則充當(dāng)了語言的角色，它可以使用戶參與其中，影響他們的情緒，并把這種人機(jī)的功能性關(guān)系轉(zhuǎn)化成人類的個人情感體驗(yàn)。而這種用戶的情感體驗(yàn)才能夠真正的彰顯品牌個性，從而與其他產(chǎn)品區(qū)分開來。

△ 錯誤提示設(shè)計三步法

• 盡可能準(zhǔn)確地描述問題和哪里出錯了，簡明易懂。
• 提出建設(shè)性意見，解決問題，保持流程前進(jìn)不中斷。如果此時問題還不能解決，告訴用戶可以做些什么來幫助他們，以及他們可以向誰求助。
• 不要責(zé)怪他們，禮貌的對待用戶，在報錯中加入情感。

總結(jié)：

對話框可以成為幫助用戶完成目標(biāo)的有用助手，而不是讓他們在每一步操守挫敗的可怕絆腳石。通過保持對話框的可管理性，并且只有在他們的功能真的屬于另一個房間的情況下才調(diào)用他們，你將很好地維持用戶的工作流狀態(tài)，保證他們會成功完成任務(wù)，并且滿懷感激。

作者：DESIGN阿志來源：站酷網(wǎng)

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司。

本文主要闡述我們是怎樣通過創(chuàng)新來打造一款具有科技感知多元玩法的百度好運(yùn)中國年活動。

前言

每當(dāng)臨近春節(jié)時，互聯(lián)網(wǎng)大廠的新年福利活動都會相擁而至，大家在各種活動中紅包拿到手軟。此時，百度APP的「好運(yùn)中國年」系列活動也如期與大家見面，毫不吝嗇的把“好運(yùn)”傳遞給每個用戶。

2019年至今，「好運(yùn)中國年」已進(jìn)行了五年，每年都會在品牌和玩法體驗(yàn)上進(jìn)行探索與創(chuàng)新，今年進(jìn)行了更深入的打磨，給用戶一種“新”體驗(yàn)。在設(shè)計理念上，通過具有科技感和年俗氣息的視覺創(chuàng)新，打造一場百度獨(dú)有的“科技廟會”；活動玩法方面，較以往也更加豐富，包括了百度經(jīng)典集卡玩法和多種紅包玩法，給用戶多元有趣的活動體驗(yàn)。今年春節(jié)的活動周期比往年更長，近一個月的好運(yùn)中國年讓用戶樂此不疲。

打造好玩好逛的科技廟會

活動初期，我們從產(chǎn)品、用戶、社會三個角度進(jìn)行分析，確定活動的設(shè)計目標(biāo)。

百度APP是百度在移動搜索方向的核心產(chǎn)品，代表了百度先進(jìn)的搜索技術(shù)能力，具備很強(qiáng)的科技屬性。今年團(tuán)隊(duì)設(shè)計的重點(diǎn)目標(biāo)就是將活動與產(chǎn)品屬性相結(jié)合，因此今年開始嘗試打造「科技感」春節(jié)活動；好的活動體驗(yàn)可以加深用戶對活動的記憶，為了讓用戶對「好運(yùn)中國年」印象深刻，我們結(jié)合多種玩法營造科技廟會的氛圍；而這么多的活動需要一個“集合體”來承載，“它”既要多元又要契合團(tuán)隊(duì)探索的有社會價值的年俗工藝，因此選用了“廟會”這個形式來承載。

經(jīng)過分析，最終確定以好玩好逛的“科技廟會”作為本次活動的設(shè)計理念，給用戶“新”的體驗(yàn)感受。

來場對“科技廟會”的探索

“科技廟會”是什么樣子呢？通過將詞拆解的方法，以“科技”和“廟會”為關(guān)鍵詞進(jìn)行思維發(fā)散，想象以什么樣的視覺來呈現(xiàn)今年的春節(jié)活動。

探索過程中嘗試AI繪畫，用新的科技手段輔助尋找靈感。

定調(diào)

經(jīng)探索，廟會的圖像特征越來越清晰，它是一場熱鬧的具有多元文化載體的文化現(xiàn)象，擁有像舞獅/臺戲/商鋪/古樓/燈籠/風(fēng)竹等事物，是民間藝術(shù)的結(jié)合體，描繪了老百姓新年期間的市井生活。

「科技感」則是一種視覺感知，既可以通過點(diǎn)、線、抽象圖形進(jìn)行感受，是粒子、發(fā)光體、光環(huán)、全息；又可以通過機(jī)器人、移動設(shè)備、全息屏幕等具象物體體現(xiàn)，是圖形元素間的動態(tài)穿插或是一種變化發(fā)展的趨勢。

我們將射線、光環(huán)、粒子、全息圖像、速度感圖形等元素植入具有人文特征的廟會中，切入“科技廟會”主題風(fēng)格，進(jìn)而確定視覺調(diào)性。

最終通過KV將探索的“科技廟會”視覺調(diào)性展示出來。打造出的視覺情緒是新奇熱鬧的，整體營造一場充滿科技氛圍的春節(jié)集市。以兔子形象IP為故事主體，講述一個“兔年春節(jié)逛科技廟會”的世界觀。通過“兔子舞獅”、“古鎮(zhèn)建筑”、“商品小攤”等元素來體現(xiàn)廟會，道路上的全息路標(biāo)、遠(yuǎn)處向上延伸的科技立光、城市建筑上的懸浮光圈來增加科技感。

定義“科技特色”的品牌體系

從確定設(shè)計理念開始，今年「好運(yùn)中國年」的品牌設(shè)計就被貼上了“不一樣”的標(biāo)簽。有別于往年的關(guān)鍵點(diǎn)是，需要在字體、圖形和IP上充分體現(xiàn)今年“不一樣”的“科技感”。

品牌字體

首先把“科技感”植入品牌字體中，形成獨(dú)特的字體風(fēng)格。“科技”體現(xiàn)的是一種發(fā)展與進(jìn)步、速度與前進(jìn)，代表了“硬”實(shí)力，我們把這種氣質(zhì)體現(xiàn)在今年的品牌字體中。與去年較圓潤的字體相比，今年的字體更為硬朗，在此基礎(chǔ)上字的斜度統(tǒng)一為12度，起落筆則用“尖角”延伸，整套字體現(xiàn)出科技創(chuàng)新帶來的活力激發(fā)。

品牌圖形

輔助圖形是品牌的重要記憶點(diǎn)之一，能夠強(qiáng)化品牌特征，提升用戶對品牌的認(rèn)知。今年的輔助圖形保留了去年的基礎(chǔ)形，不一樣的是增加了「科技感」特色的圖形元素，結(jié)合點(diǎn)、線、以及方格符號元素，進(jìn)一步烘托科技氛圍，在延續(xù)去年視覺感受的基礎(chǔ)上增添了新的概念。

UI組件也注入科技感，在紅包、btn、輔助入口等組件中增加科技感點(diǎn)線元素的點(diǎn)綴，信息載體使用半透明效果的異形面板，指引箭頭則運(yùn)用馬賽克表現(xiàn)形式。將這些UI組件進(jìn)行復(fù)用，科技?xì)赓|(zhì)貫穿到各活動中，確保在不同玩法上呈現(xiàn)統(tǒng)一的視覺感受。

品牌IP

今年的活動IP形象更具親和力和辨識度。在兔子形象的設(shè)定過程中我們嘗試多種頭身比例，最終選用的比例為2:1，大頭形象在面部特征和表情上能夠體現(xiàn)更多細(xì)節(jié)，使整體更具親和力，同時也可以讓科技感的全息眼鏡顯得更為突出。IP貫穿活動始末，起到統(tǒng)一活動主題調(diào)性、強(qiáng)化引導(dǎo)，增加新年氛圍和親和力的作用。

舊瓶裝新酒：經(jīng)典重塑，打造多元好玩的集卡活動

集卡是百度歷年春節(jié)的經(jīng)典玩法，是用戶最喜愛的玩法之一，也是「好運(yùn)中國年」系列活動中在線時間最長的活動，無論在視覺還是玩法上都要更加豐富多元。

[一] 玩法升級，傳承創(chuàng)新

過去兩年中，活動采用雙層卡玩法，集齊「好」「運(yùn)」「中」「國」「年」基礎(chǔ)卡后合成高級卡，集齊高級卡后獎勵會翻倍。然而通過洞察研究發(fā)現(xiàn)，用戶在高級卡階段容易失去熱情、感到無聊，由此發(fā)現(xiàn)高級卡階段的活動體驗(yàn)仍有改善空間，因此嘗試在今年進(jìn)行了“新”的玩法體驗(yàn)創(chuàng)新。

今年團(tuán)隊(duì)在傳統(tǒng)集卡玩法上探索變化，傳承經(jīng)典的同時，提出“新”的集卡闖關(guān)玩法。用戶集齊「好」「運(yùn)」「中」「國」「年」基礎(chǔ)卡后，開啟新的階段，合成高級卡獲得新春祝福語圖鑒，通關(guān)全套祝福語圖鑒獲得終極獎勵，同時整體降低集卡難度，讓用戶更容易玩下去。

[二] 傳統(tǒng)工藝，氛圍拉滿

“新酒”還體現(xiàn)在工藝的多樣上，與去年單一的年畫工藝相比，今年的集卡高級卡場景中展示了四種工藝，汲取了廟會中出現(xiàn)的民俗文化和民間藝術(shù)品-剪紙、燈籠、爆竹、團(tuán)扇。通過科技感的全息影像將每個場景串聯(lián)，打造了一種科技廟會的感知。四個場景從家到國，層層遞進(jìn)，各場景結(jié)構(gòu)源于品牌logo的熊掌元素，向用戶傳遞著年俗文化、透傳品牌，宣揚(yáng)科技興國的理念。

燈籠

說到春節(jié)，家家戶戶都會準(zhǔn)備各式各樣的燈籠來期盼闔家團(tuán)圓。

因此活動中選擇燈籠做為構(gòu)建高級卡場景一的主元素，同時也是文字的主承載物，每個燈籠呈現(xiàn)不同的造型，「團(tuán)」字的兔子造型和場景中的兔子IP，來呼應(yīng)兔年生肖。通過地臺上的廟會建筑和糖葫蘆等元素的結(jié)合營造出廟會年俗氛圍。

卡片則采用了較高挑的燈籠輪廓做為基礎(chǔ)造型，強(qiáng)化卡片屬性，也能夠更好的承載文字和品牌的透傳。

剪紙

剪紙藝術(shù)作為高級卡第二個場景的視覺呈現(xiàn)，帶領(lǐng)用戶感受其豐富內(nèi)涵，感受設(shè)計對民俗生活的理解、對生活之美的追求。

場景中高級卡下端增加了以全息影像方式展現(xiàn)的廟會場景，同樣營造出科技廟會的氛圍。

爆竹

隨著春節(jié)的腳步越來越近，人們最期待的便是新年的第一聲爆竹，中國的爆竹文化，蘊(yùn)含著華夏兒女的精神寄寓，表達(dá)著所有民族的共同期盼。近年來，隨著大眾環(huán)保意識的加強(qiáng)，爆竹聲已離我們逐漸遠(yuǎn)去。因此，“爆竹”元素做為第三關(guān)高級卡的主元素，目的是為用戶營造久違的爆竹帶春聲，配合一席冬雪，向用戶描繪大自然對大地和人類的厚愛。

團(tuán)扇

團(tuán)扇是中國傳統(tǒng)工藝品及藝術(shù)品，有著深厚的文化底蘊(yùn)。同樣寓意著吉祥如意。結(jié)合卡面文字，第四個高級卡主元素被設(shè)定為團(tuán)扇。其外觀分別為圓形、花瓣形、芭蕉式等。通過設(shè)計手法展現(xiàn)團(tuán)扇的刺繡工藝，細(xì)致到邊角和裝飾。而場景層則通過掐絲琺瑯的形式向用戶展現(xiàn)了祖國的大好河山。卡的后面還點(diǎn)綴了具有科技屬性的衛(wèi)星元素，預(yù)示著未來科技的蓬勃發(fā)展。

[三] 科技廟會，獨(dú)具特色

集卡是好運(yùn)中國年系列活動中最先與大家見面的，為了讓用戶了解陸續(xù)開啟的更多活動，我們在集卡活動頁下方開辟了一個活動聚合專區(qū)，在設(shè)計上將傳統(tǒng)與科技融合，打造了一個豐富又獨(dú)具特色的廟會場景。前期提煉的科技元素轉(zhuǎn)化為環(huán)繞道路的彩色全息路標(biāo)，行駛中的百度無人車，LED光感的廟會建筑等，與各活動入口共同打造一個科技感十足的廟會街道。

親朋共團(tuán)圓：疫情后我們第一次團(tuán)聚

在過去新冠疫情肆虐的三年中，大家與親人朋友團(tuán)聚的機(jī)會變得格外珍貴。在后疫情時代的第一個新年，活動從除夕到元宵節(jié)，逐步開啟多個紅包福利活動，與去年相比，在玩法上更多樣，增加了3個邀好友和2個紅包雨活動，為用戶與親朋創(chuàng)造了豐富多樣的線上互動場景。

除夕和元宵節(jié)是春節(jié)的首尾時刻，通過紅包雨游戲?yàn)橛脩舭l(fā)放福利。在除夕夜，特別開設(shè)了多個時段的大額紅包玩法，用戶與家人一起守歲搶紅包、迎接新年到來。

團(tuán)圓紅包、新春大紅包、開工領(lǐng)紅包，是春節(jié)系列活動中的3個各不相同的邀好友活動，我們通過差異化的設(shè)計形態(tài)，向用戶呈現(xiàn)豐富多樣的紅包福利。

在春節(jié)假期到來前，團(tuán)圓紅包活動的互動方式主打線上分享，提前為用戶創(chuàng)造與家人線上聯(lián)系領(lǐng)福利的場景。

而在春節(jié)假期后期推出的掃碼領(lǐng)紅包活動中，迎合朋友見面聚會場景，設(shè)計上強(qiáng)化掃碼互動方式，便于線下面對面拉好友參與。

開工領(lǐng)現(xiàn)金是今年百度春節(jié)新增的特殊玩法，貼合新年后開工利是的現(xiàn)代習(xí)俗，吸引用戶向身邊的同事朋友分享這份好彩頭。

年俗文化鏈通全局

當(dāng)然這些活動的視覺也少不了科技和年俗文化的碰撞，將這些細(xì)節(jié)元素貫穿在各個活動中給用戶更加統(tǒng)一完整的沉浸體驗(yàn)，如此多的年俗物件，是在去年活動中沒出現(xiàn)過的。

傾聽用戶聲音，點(diǎn)滴之中打磨更好的細(xì)節(jié)體驗(yàn)

今年的“新”體驗(yàn)也體現(xiàn)在我們的細(xì)節(jié)打磨上。秉承用戶體驗(yàn)至上的原則，從去年春節(jié)活動開始，團(tuán)隊(duì)嘗試通過投放問卷了解用戶參與活動的感受，在今年為用戶打造了更好的細(xì)節(jié)體驗(yàn)。

通過細(xì)致入微的設(shè)計思考、克制的細(xì)節(jié)處理，打磨出「更簡單」、「更生活」、「更生動」的體驗(yàn)。在今年的體驗(yàn)反饋中，獲得了很多用戶的稱贊。

[更生活]

更生活體現(xiàn)在高級卡的場景設(shè)計上，將燈籠的點(diǎn)亮態(tài)和未點(diǎn)亮態(tài)通過顏色和質(zhì)感進(jìn)行區(qū)分，通過集卡逐一點(diǎn)亮燈籠，制造小的驚喜點(diǎn)，寓意照亮全家人的平安與幸福。

[更簡單]

為了讓活動更易于上手，我們將主頁和彈窗中的主按鈕文字放大，提高主按鈕的視覺層級，這種設(shè)計讓白發(fā)人群也可輕松參與到活動中。

同樣的，掃碼活動中二維碼的展示也進(jìn)行了放大處理，節(jié)省了點(diǎn)擊再放大的步驟，更便于識別和用戶之間的面對面分享。

[更生動]

在紅包雨活動中，為了保證用戶的游戲體驗(yàn)，使用了二維游戲引擎，增強(qiáng)動畫流暢度。同時在多種道具上增加了點(diǎn)擊實(shí)時反饋，強(qiáng)化道具的生命力。

在開工領(lǐng)紅包活動中使用動作捕捉數(shù)據(jù)，讓人物的動作更真實(shí)，更靈活。同時設(shè)計了金幣的碰撞反饋，提升用戶的點(diǎn)擊感和爽感。給用戶更好的游戲感體驗(yàn)。

作者：百度MEUX來源：站酷網(wǎng)

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司

本次圖示化的信息來源是：
交互設(shè)計沉思錄-頂尖設(shè)計專家Jon Kolko的經(jīng)驗(yàn)與心得（第2版）_[美]Jon Kolko著，方舟譯

今天帶來的是《交互設(shè)計沉思錄》第一部分的第二章「管理復(fù)雜性」。

主要講述的是交互設(shè)計師是如何理解&組織所獲取到的數(shù)字、文字?jǐn)?shù)據(jù)。

通過這些步驟&方法能夠幫助交互設(shè)計師更加清楚信息間的關(guān)系，建立很強(qiáng)的心智圖景。

其間也穿插了很多職能相關(guān)部分的對比，如「交互設(shè)計師與信息架構(gòu)師」「交互設(shè)計師與界面設(shè)計師」「交互設(shè)計師與電子工程師」。

01、前言

莫奈是一款主要服務(wù)京東內(nèi)部用戶的數(shù)據(jù)可視化平臺，它以容器的形式將京東城市各種與智慧城市建設(shè)及運(yùn)營相關(guān)的能力聚合，并以可視化的形式面向客戶呈現(xiàn)。

作為京東莫奈的設(shè)計負(fù)責(zé)人，過去三年一直負(fù)責(zé)莫奈可視化平臺的用戶體驗(yàn)設(shè)計工作，由于本人日常設(shè)計主要以智慧城市、數(shù)據(jù)可視化大屏為主，所以我即是莫奈的設(shè)計負(fù)責(zé)人也是莫奈的深度使用者或者說專家用戶。在長期使用莫奈的過程中，本人梳理了大量與視覺、體驗(yàn)相關(guān)的問題，這些問題，部分在產(chǎn)品日常迭代中得到了優(yōu)化，但是也有相當(dāng)一部分解決起來具有一定的難度和成本；與此同時，作為用戶體驗(yàn)設(shè)計師，我日常與業(yè)務(wù)方、客戶方以及用戶接觸緊密，所以在與大量用戶溝通后，也從用戶側(cè)收集了不少使用體驗(yàn)相關(guān)的問題。我對以上兩個渠道的問題整體梳理匯總，并與產(chǎn)品側(cè)討論溝通后，大家認(rèn)為這些問題比較嚴(yán)重的影響了用戶使用莫奈的效率，降低了莫奈對業(yè)務(wù)側(cè)賦能的質(zhì)量，提高了客戶使用莫奈的成本。所以我們必須規(guī)劃出一個產(chǎn)品迭代的周期，針對莫奈體驗(yàn)問題，進(jìn)行一次密集的優(yōu)化和革新，這便是本次莫奈體驗(yàn)升級改版的基礎(chǔ)背景和原因。

本篇文章寫作的主要目的，是想將本人在這次改版設(shè)計中用到的一些方法、流程和經(jīng)驗(yàn)與大家做次交流和分享，希望能為同行在類似的改版設(shè)計中提供一定的借鑒和參考。

02、體驗(yàn)升級流程

實(shí)際上，在梳理出整個體驗(yàn)升級流程之前，通過與產(chǎn)品負(fù)責(zé)人的多次溝通，我們事實(shí)上已經(jīng)對體驗(yàn)升級這個需求達(dá)成了共識，而流程圖解決的是做什么、怎么做的問題。

下圖展示的這套體驗(yàn)升級流程較為通用，大多數(shù)產(chǎn)品的體驗(yàn)升級都可參考下面的流程執(zhí)行。

這套流程的主要作用有兩個，一是通過它可以更直觀的跟產(chǎn)品負(fù)責(zé)人、開發(fā)負(fù)責(zé)人等關(guān)鍵角色溝通，讓大家對體驗(yàn)升級這件事兒有整體且全面的了解，方便大家評估工時、預(yù)估成本和安排排期；另一方面也能夠使我自己的工作推進(jìn)的更加有節(jié)奏有條理，避免工作內(nèi)容長時間停滯在某一個環(huán)節(jié)而影響整體進(jìn)度。

03、改版背景及產(chǎn)品簡介

基于STAR法則，背景概況部分向大家介紹莫奈體驗(yàn)升級的必要性。在企業(yè)中，想要推動一個需求順利執(zhí)行，那一定是需求上下游以及相關(guān)方的利益都得到了體現(xiàn)和滿足。莫奈此次升級，從體驗(yàn)設(shè)計師角度來講，我們作為用戶的代言人，在了解到用戶大量反饋和建議后，有責(zé)任將用戶的聲音轉(zhuǎn)化為需求，并推進(jìn)落地為產(chǎn)品的一部分；從產(chǎn)品團(tuán)隊(duì)來講，莫奈想要不斷發(fā)展，持續(xù)為客戶和業(yè)務(wù)方帶來顯著的效率提升、明顯的成本下降，也必須對過去老舊的產(chǎn)品架構(gòu)做一次深度的革新和優(yōu)化；從前端工程師、研發(fā)同學(xué)的角度看，以往不合理的底層代碼設(shè)計，使產(chǎn)品在性能、穩(wěn)定性等方面留有大量隱患，因此在日常迭代工作之外，研發(fā)同學(xué)總要消耗部分精力去維護(hù)那部分不穩(wěn)定的存在，從而導(dǎo)致研發(fā)同學(xué)人效比低、開發(fā)體驗(yàn)差；從上級Leader來看，公司的核心經(jīng)營理念是“成本、效率、體驗(yàn)”，但成本的降低、效率的提升、體驗(yàn)的優(yōu)化都依賴于強(qiáng)悍的技術(shù)和優(yōu)秀的產(chǎn)品，而莫奈此次體驗(yàn)升級正是踐行公司核心理念的有效嘗試，綜上，此次體驗(yàn)升級于多方有益，符合部門整體利益，所以大家很快達(dá)成共識。

04、莫奈典型用戶場景梳理

通常我們說用戶體驗(yàn)時，用戶是一個群體的概念，而這個群體如上圖所示，可以被進(jìn)一步細(xì)分為多種角色，理想情況是每一類角色的體驗(yàn)都被滿足，但現(xiàn)實(shí)執(zhí)行中我們必須要有策略和取舍。所以要想產(chǎn)品有好的體驗(yàn)，首先我們要知道用戶群體中不同角色對產(chǎn)品的使用情況如何，并找到對產(chǎn)品依賴度強(qiáng)使用頻次高的那部分用戶和場景，然后針對他們以及他們使用的場景做高優(yōu)先級的優(yōu)化。

從莫奈典型用戶使用場景可以歸納出：

首先，莫奈的主要使用者為各個項(xiàng)目的產(chǎn)品經(jīng)理及開發(fā)工程師，其中設(shè)計師也有相當(dāng)大的使用強(qiáng)度，這三類用戶他們直接使用莫奈，并把莫奈作為解決數(shù)據(jù)可視化場景構(gòu)建相關(guān)需求的主要工具和方案，所以，以上三類用戶，我們將其稱之為莫奈的核心用戶。核心用戶使用莫奈產(chǎn)出的作品，經(jīng)由上下游同事傳達(dá)和部署給業(yè)務(wù)方及客戶后，莫奈的商業(yè)價值便得以體現(xiàn)。

其次，每類用戶使用莫奈不同功能模塊的頻次不同。從使用場景中我們也發(fā)現(xiàn)，莫奈的使用具有上下游的關(guān)聯(lián)性，核心用戶處于流程的下游，中上游的用戶雖不是核心用戶，但他們因?yàn)楦咏蛻艉蜆I(yè)務(wù)，往往具有比核心用戶更高的決策權(quán)。因此我們優(yōu)先讓核心用戶體驗(yàn)提升并不意味著放棄上游的體驗(yàn)，而是資源有限的情況下我們的工作必須有取舍有重點(diǎn)。實(shí)際上我們是通過建立核心用戶的聲量和口碑來向上游用戶傳達(dá)莫奈的價值和特色，通過核心用戶使用莫奈交付的結(jié)果來證明莫奈的可靠。與此同時，我們也通過對內(nèi)外的宣講和培訓(xùn)，持續(xù)接收上游用戶的反饋，并在迭代中持續(xù)優(yōu)化。

05、體驗(yàn)痛點(diǎn)分析-用戶調(diào)研

知道了核心用戶是誰，那么核心用戶的體驗(yàn)痛點(diǎn)是什么呢？

雖然在日常的交流溝通中我們已經(jīng)獲取了不少用戶反饋、收集了相當(dāng)?shù)膯栴}建議，但作為體驗(yàn)升級的系統(tǒng)性工作，為了更全面的了解用戶體驗(yàn)痛點(diǎn)，我們還是設(shè)計了一次完整的用戶調(diào)研活動。本次調(diào)研主要采用線上問卷調(diào)研、線下訪談+用戶行為觀察的方式進(jìn)行。線上問卷采用京東良研問卷系統(tǒng)，除了面向核心用戶推送，我們還面向莫奈主流用戶及邊緣用戶推送了問卷內(nèi)容，因此，問卷調(diào)研整體覆蓋較為全面。線下訪談除了邀請部分核心用戶，我們也從問卷系統(tǒng)中篩選了部分反饋問題多且愿意參加線下訪談的用戶參與。線上線下均包含內(nèi)外部用戶，以期獲得更加客觀真實(shí)的反饋。

用戶調(diào)研的核心目標(biāo)是充分收集用戶反饋，并將反饋結(jié)果量化及系統(tǒng)化，量化后的結(jié)果可做為設(shè)計側(cè)推動產(chǎn)品執(zhí)行體驗(yàn)優(yōu)化的關(guān)鍵依據(jù)，也可以作為后續(xù)驗(yàn)證優(yōu)化結(jié)果的對照項(xiàng)。

06、體驗(yàn)痛點(diǎn)分析-問卷設(shè)計

本次問卷設(shè)計我們參考了PSSUQ整體可用性量表，并結(jié)合本次調(diào)研目標(biāo)做了部分調(diào)整。

PSSUQ整體可用性量表可以從系統(tǒng)易用性、信息質(zhì)量、界面質(zhì)量三個方面將體驗(yàn)結(jié)果量化，然后通過與行業(yè)基本經(jīng)驗(yàn)值比較，既可以知道用戶對莫奈在以上三項(xiàng)的滿意度，也可對莫奈當(dāng)前整體體驗(yàn)結(jié)果有一個全局的概況性評價。同時根據(jù)三個方向的評分也可以更細(xì)致的指導(dǎo)后續(xù)的設(shè)計優(yōu)化方向，為設(shè)計決策提供更多科學(xué)可信的依據(jù)。

PSSUQ整體可用性量表作為一個通用模版，其內(nèi)容比較固定，為避免多次打擾用戶，提升問卷調(diào)研效率，我在PSSUQ的基礎(chǔ)上添加了少量關(guān)鍵信息甄別、用戶反饋積極性識別類問題，從而使問卷內(nèi)容更加符合本次調(diào)研目標(biāo)。

07、體驗(yàn)痛點(diǎn)分析-問卷調(diào)研

問卷設(shè)計好之后，接下來就是問卷發(fā)放以及結(jié)果分析了。

PSSUQ量表內(nèi)每個問題均有8個選項(xiàng)，【1-7】是對該項(xiàng)描述的認(rèn)可程度，得分越低代表用戶對該項(xiàng)描述越認(rèn)可；【NA】代表用戶對該項(xiàng)描述無法評價。本次調(diào)研通過京東良研發(fā)放線上問卷100份，共收到有效問卷反饋87份（大于PSSUQ所需的最少樣本數(shù)量：20），說明問卷結(jié)果具有較好的可信度，其結(jié)果值得進(jìn)一步研究。

通過整理和統(tǒng)計問卷數(shù)據(jù)，可以得出以下結(jié)論：

1、內(nèi)外部用戶在系統(tǒng)易用性、信息質(zhì)量、界面質(zhì)量三個維度對莫奈均不滿意

2、對比行業(yè)經(jīng)驗(yàn)值（均值），莫奈系統(tǒng)總體體驗(yàn)質(zhì)量與行業(yè)同類產(chǎn)品存在明顯差距

3、莫奈用戶群體整體積極性較高，具有較強(qiáng)的溝通及反饋意愿

整體評分結(jié)果與日常同相關(guān)同學(xué)的溝通結(jié)果一致，以上評分結(jié)果也反映出此次體驗(yàn)升級的緊迫性，作為由設(shè)計驅(qū)動的改版設(shè)計，設(shè)計側(cè)面臨較大壓力。

08、體驗(yàn)痛點(diǎn)分析-親和圖

在設(shè)計問卷的環(huán)節(jié)我也提到過我們的問卷在PSSUQ量表的基礎(chǔ)上針對本次調(diào)研目標(biāo)做了部分調(diào)整和優(yōu)化，而線上問卷最后兩個選項(xiàng)以問答題的形式向被調(diào)研用戶提供了對莫奈各方面建議的反饋渠道，通過問答項(xiàng)我們收集到用戶反饋的各類問題80多條，我們采用親和圖對這些反饋?zhàn)稣恚H和圖顧名思義，它可以使具有類似特征和關(guān)聯(lián)屬性的問題更加臨近，從而將零散的問題被歸類，方便從雜亂的問題中找到規(guī)律，并通過比較不同類型問題的占比，更直觀的了解用戶反饋的問題主要集中在那些方向。

如下圖所示，產(chǎn)品的反應(yīng)速度及穩(wěn)定性、模板和組件豐富度是用戶反饋問題最集中的兩項(xiàng)，前者影響用戶最基礎(chǔ)的使用體驗(yàn)，后者決定產(chǎn)品能多大程度上便捷的服務(wù)用戶。良好的穩(wěn)定性和反應(yīng)速度可以讓用戶專注于任務(wù)本身，而使用模板能最快速的產(chǎn)出作品，降低新手的使用門檻，豐富的組件能夠滿足用戶在各類復(fù)雜場景下的業(yè)務(wù)需求，減少組件二開成本，提高交付效率。針對這兩個大的問題點(diǎn)，首先，對于那些能夠在當(dāng)前產(chǎn)品日常迭代中優(yōu)化的點(diǎn)，我整理后會以需求的方式向產(chǎn)品團(tuán)隊(duì)提出，并在日常迭代中逐步優(yōu)化；然后，對于那些需要“傷筋動骨”做底層優(yōu)化以及長期運(yùn)營沉淀才能有效改善的問題，我們會進(jìn)一步向用戶收集和完善相關(guān)信息，并將相關(guān)問題梳理到本次改版任務(wù)中，做系統(tǒng)的解決和處理。

09、體驗(yàn)痛點(diǎn)分析-線下用戶訪談

在【05、體驗(yàn)痛點(diǎn)分析-用戶調(diào)研部分】已經(jīng)介紹了本次參與訪談的用戶來源，但在實(shí)際執(zhí)行時，我們也邀請了部分在線上問卷反饋中描述模糊不清、難以理解，需要面對面交流或者演示才能理解的問題的用戶。

訪談先通過與用戶簡短的溝通了解用戶的崗位/職業(yè)以及使用莫奈的主要場景、頻次、設(shè)備等，然后通過給用戶設(shè)置一到兩個簡單的任務(wù)，觀察用戶在完成任務(wù)過程中的行為、表情、語氣等，以了解莫奈在一些典型使用場景下的易用性及可用性。比如，對于視覺設(shè)計師：請在畫布中添加一個條形圖，并將條形圖的顏色修改為綠色、激活縱軸輔助線、修改輔助線為虛線樣式....; 對于開發(fā)工程師：請在畫布中添加一個環(huán)形圖，并使用json為環(huán)形圖添加一組動態(tài)數(shù)據(jù)....。之后，在用戶完成基礎(chǔ)任務(wù)后，我們還會針對用戶關(guān)心的問題進(jìn)行更細(xì)致的溝通，了解用戶更細(xì)致的反饋。對于用戶反饋的問題，我們整理后會在公司內(nèi)部的需求及研發(fā)管理系統(tǒng)“行云”中以需求的方式提交給產(chǎn)品團(tuán)隊(duì)并同步添加反饋問題的用戶為該需求的關(guān)注者，后續(xù)，當(dāng)該需求的狀態(tài)有任何更新時，問題反饋者都能及時收到更新。如此，受訪者反饋的問題從需求提交到需求最終提測驗(yàn)收，都能在線跟蹤并閉環(huán)。這樣做既是我們團(tuán)隊(duì)的責(zé)任，也可以增進(jìn)用戶對莫奈的信任，并期望活躍用戶后續(xù)能繼續(xù)為莫奈提供建議和反饋。

10、體驗(yàn)問題匯總-用戶體驗(yàn)金子塔

通過線上問卷調(diào)研及線下訪談，我們已充分了解了用戶心聲，接下來我們通過用戶體驗(yàn)5要素模型，將各類問題進(jìn)一步歸納并按照產(chǎn)品建設(shè)的上下游協(xié)作關(guān)系，把每一個具體的問題匯總給對應(yīng)的角色，并由對應(yīng)的角色產(chǎn)出具體的解決方案，然后通過線下會議同步各自方案并對方案進(jìn)行評審和溝通，由此，關(guān)于體驗(yàn)升級的所有事項(xiàng)及具體任務(wù)便可周密安排，之后便是資源投入、推進(jìn)升級工作具體執(zhí)行。

用戶體驗(yàn)5要素模型，從產(chǎn)品的戰(zhàn)略層出發(fā)，層層遞進(jìn)直到表現(xiàn)層，把影響用戶體驗(yàn)最根本的因素分層并可視化，借助這一模型可以讓大家對“用戶體驗(yàn)”這個概念有更好的理解，并能促成大家在更大的層面上達(dá)成共識。以往談到用戶體驗(yàn)，大家首先想到的是界面是否好看、交互是否流暢，然而一些對用戶體驗(yàn)也有著重要影響但“不可見、不直觀”的因素卻往往被忽視，尤其對開發(fā)側(cè)同學(xué)更是如此，他們鮮有意識到產(chǎn)品的目標(biāo)、內(nèi)容以及性能等這類的因素，也是構(gòu)成用戶體驗(yàn)的重要部分。對于莫奈這樣一款長期維護(hù)持續(xù)迭代的產(chǎn)品來說，好的用戶體驗(yàn)并不能以“畢其功于一役”的方式來實(shí)現(xiàn)，而是要通過持續(xù)不斷的改進(jìn)和優(yōu)化才能持續(xù)滿足并提升用戶體驗(yàn)，所以借助用戶體驗(yàn)5要素等模型，我們引導(dǎo)產(chǎn)品及研發(fā)團(tuán)隊(duì)更好的理解用戶體驗(yàn)，這樣不僅能幫助設(shè)計師在本次體驗(yàn)升級改版工作中與大家高效協(xié)作，也非常益于之后日常產(chǎn)品迭代的溝通與協(xié)作。

11、體驗(yàn)問題匯總-體驗(yàn)升級方向

上一步，我們通過用戶體驗(yàn)金字塔將體驗(yàn)問題匯總并劃分給了不同的角色，之后各個負(fù)責(zé)人產(chǎn)出解決方案并與大家評審和溝通，而體驗(yàn)升級方向正是基于大家對各類方案一致溝通后達(dá)成的共識和結(jié)果，體驗(yàn)升級方向以設(shè)計為主導(dǎo)，同時兼顧產(chǎn)品和研發(fā)的部分目標(biāo)，我們用5個短句將五個升級方向概括，每個方向盡量解決一個維度的問題，比如“界面視覺質(zhì)量提升”解決表現(xiàn)層的問題、“信息層級優(yōu)化”解決框架層的問題。體驗(yàn)升級方向作為對體驗(yàn)升級結(jié)果的導(dǎo)向，將指導(dǎo)后續(xù)設(shè)計動作的展開。

12、策略制定-設(shè)計目標(biāo)確定

基于體驗(yàn)升級方向，接下來就要制定具體的設(shè)計策略，來實(shí)現(xiàn)體驗(yàn)升級方向中要達(dá)成的結(jié)果。設(shè)計策略制定第一步先確定設(shè)計目標(biāo)，我們將設(shè)計目標(biāo)拆解為三個方向，每個方向通過兩個關(guān)鍵詞定義。設(shè)計目標(biāo)主要分為視角與交互兩個方向，同時兼顧產(chǎn)品側(cè)“易拓展、易維護(hù)”的需求。實(shí)際設(shè)計中，視覺與交互并非獨(dú)自分開進(jìn)行，在設(shè)計開始的階段，需要先定義設(shè)計風(fēng)格等基礎(chǔ)設(shè)計要素，之后視覺便可在此基礎(chǔ)之上全面展開，此時視覺設(shè)計要考慮交互的效果，交互設(shè)計也需要斟酌設(shè)計的展現(xiàn)。

13、設(shè)計執(zhí)行-視覺風(fēng)格定義

對于設(shè)計目標(biāo)中關(guān)鍵詞所代表的那些抽象概念，每個人的認(rèn)知可能都不一樣，但是搜索引擎和大數(shù)據(jù)推薦的算法，可以告訴我們普通大眾對那些關(guān)鍵詞所表現(xiàn)出來的意象是如何認(rèn)知的，之后我們便可從符合大家普遍認(rèn)知的視覺素材中，提取出符合關(guān)鍵詞所表達(dá)出的意象的設(shè)計要素，之后通過在設(shè)計中應(yīng)用這些設(shè)計要素，就能把關(guān)鍵詞定義的抽象的設(shè)計概念轉(zhuǎn)化為具象的認(rèn)知，我把這個過程稱之為“抽象概念的可視化”。而“情緒版”是我完成上述工作的主要工具。

我們使用搜索引擎以及AI推薦的關(guān)聯(lián)算法，針對“科技和高效”這兩個視覺目標(biāo)的關(guān)鍵詞收集了海量的音視頻設(shè)計素材，把這些素材集合在一個畫布上形成“情緒版”，然后通過歸納這些素材共有的特點(diǎn)/要素，就能將體現(xiàn)“科技、高效”這兩個概念的所有設(shè)計要素剝離出來，并通過簡潔的文字加以描述和歸納。此后，我們通過在視覺設(shè)計執(zhí)行的過程中應(yīng)用這些設(shè)計要素，通過合理的搭配和組織，將這些設(shè)計要素融入到莫奈新的設(shè)計語言，如此，產(chǎn)品最終便可在視覺上呈現(xiàn)出與視覺目標(biāo)關(guān)鍵詞定義的一致的視覺和心理感受。

14、視覺風(fēng)格定義中的7要素

基于情緒版提煉出的設(shè)計要素其實(shí)已經(jīng)足夠具體，但是如何將這些要素應(yīng)用在設(shè)計中，我們還需要進(jìn)一步歸納。我個人一直以來習(xí)慣從形、色、字、質(zhì)、構(gòu)、動、音7個維度分析一個設(shè)計作品的設(shè)計風(fēng)格，就如同人體是由肌肉、骨骼構(gòu)成的一樣，以上7個維度也是構(gòu)成一個設(shè)計作品的“經(jīng)、骨、肉”。所以，我認(rèn)為對于一個設(shè)計作品，尤其是UI設(shè)計作品，以上7個維度基本能夠完全概況它的風(fēng)格，所以當(dāng)我要為自己的產(chǎn)品做風(fēng)格設(shè)定時，我也是從這7個維度出發(fā)來為每個維度定義具體的風(fēng)格和策略。

這種細(xì)分維度然后定義風(fēng)格的方式有多種優(yōu)勢，其中最明顯的是它能夠?qū)⑽覀冿L(fēng)格定義的設(shè)計工作條理化，避免反復(fù)嘗試和摸索造成的大量返工和思緒混亂，比如，如果我對質(zhì)感的定義有偏差，不符合情緒版中提取出來的設(shè)計要素的特點(diǎn)，這時候我只需要對“質(zhì)感”這個維度的風(fēng)格進(jìn)行優(yōu)化和調(diào)整，而不需要推翻整個7要素重新再來。這種設(shè)計方式讓我的設(shè)計更加理性，也讓后續(xù)設(shè)計執(zhí)行的工作更加的有條理和舒適，從設(shè)計風(fēng)格落地的角度來講，這種方式我個人認(rèn)為是最能夠忠于情緒版所歸納出的設(shè)計感受的方法。

15、視覺改版：造形演繹

對于產(chǎn)品界面的造形設(shè)計，一方面依照情緒版中提取的設(shè)計要素“透視、空間感、異構(gòu)造形”來考慮，另一方面我也結(jié)合莫奈的產(chǎn)品Logo做了適當(dāng)?shù)某橄蠛脱堇[；兩者結(jié)合最終確定了當(dāng)前莫奈的造形設(shè)計。

首先，產(chǎn)品左側(cè)主導(dǎo)航采用了具有一定透視角度的異形設(shè)計；產(chǎn)品頂部標(biāo)題區(qū)域也采用了相同的設(shè)計思路：左側(cè)為品牌Logo設(shè)計了一個容器，Logo在其中容納放置；Logo右側(cè)收起的區(qū)域預(yù)留了常用公告、跑馬燈的設(shè)計，方便產(chǎn)品把日常重要信息同步給用戶；最右側(cè)呈現(xiàn)用戶個人中心、空間管理、使用幫助等菜單項(xiàng)。

對于這種異形的設(shè)計，用戶是否能夠接受，在設(shè)計開始時我存在一定的疑慮，因此在設(shè)計初稿定稿后我們邀請了部分用戶做了測試，大部分用戶認(rèn)為新的設(shè)計有創(chuàng)意具有鮮明的特點(diǎn)，也有部分用戶認(rèn)為透視的設(shè)計看著較為怪異，尤其是左側(cè)主導(dǎo)航的文字在添加透視效果后識別性存在一定的問題。因此針對用戶反饋我優(yōu)化了透視的角度，從多個透視數(shù)值中選擇了一個即能展示透視的設(shè)計效果、又不至于透視過大導(dǎo)致文本圖標(biāo)等變形嚴(yán)重而不易識別的角度，其次，我還配合開發(fā)同學(xué)對導(dǎo)航透視文本和圖標(biāo)的渲染做了一些優(yōu)化，從而使其具有更好的識別性和清晰度。在以上兩項(xiàng)優(yōu)化完成后，新的用戶測試表明大家對該設(shè)計的滿意度有很好的提升。

16、視覺改版：色彩搭配

莫奈在改版之前就已經(jīng)有自己的品牌色，新的色彩升級圍繞“科技與高效”兩個關(guān)鍵詞，結(jié)合情緒版提取的設(shè)計要素，將原有品牌色做了細(xì)微的調(diào)整。首先藍(lán)色飽和度增加，綠色調(diào)整色相使其偏向藍(lán)色的一端并增加亮度。如此，當(dāng)兩個顏色搭配使用時，藍(lán)色作為主色調(diào)體現(xiàn)科技、可靠的視覺和心理感受；綠色作為點(diǎn)綴色和強(qiáng)調(diào)色，體現(xiàn)活力、高效與創(chuàng)新。藍(lán)綠對比強(qiáng)烈，具有很好的場景適應(yīng)性和品牌特色。

17、視覺改版：字體選取

字體作為UI界面中最常見的元素以及作為信息呈現(xiàn)的主要載體，字體的使用對產(chǎn)品的易用性和視覺表現(xiàn)有著非常重要的影響。結(jié)合體驗(yàn)升級方向中定義的“增強(qiáng)品牌特色”的目標(biāo)以及情緒版中提取的非襯線的設(shè)計要素，對于字體的設(shè)計風(fēng)格，我將其歸納為"定制化、品牌性和非襯線"。

為了實(shí)現(xiàn)字體風(fēng)格的設(shè)計目標(biāo)，我選取了兩款京東品牌的定制字體“京東朗正體”及“京東正黑體”。京東朗正體經(jīng)過多次迭代，目前具有豐富的字重和獨(dú)特的品牌特色，將該字體用于莫奈的品牌Logo，可以很好的體現(xiàn)京東的品牌特色并體現(xiàn)出與其它產(chǎn)品差異化的字體設(shè)計。京東正黑體主要用于莫奈產(chǎn)品中的數(shù)字、拼音、英語、數(shù)值符號四個場景，該字體也是京東金融APP的系統(tǒng)數(shù)字字體，其最大的特點(diǎn)是等寬、簡潔、緊湊具有很好的識別性與易讀性，并且該字體有較小的字符寬度，所以當(dāng)其用于大屏編輯器時，能夠在相同的空間下容納比其它字體更多的字符，而這個特點(diǎn)對于“寸土寸金”的屬性面板尤為重要。此外，該字體在作為數(shù)字字體使用時，其小數(shù)點(diǎn)、千分符等也具有很強(qiáng)的特色，具有不錯的辨識度與個性。

而產(chǎn)品中的中文字體Mac與Windows系統(tǒng)有不同的方案。在Windows下，由于系統(tǒng)自帶的微軟雅黑當(dāng)字號小于14pt時，字符在水平方向上存在明顯“參差不齊”的現(xiàn)象，加之該字體很少更新，沒有針對當(dāng)前高像素密度、高分辨率的屏幕特點(diǎn)做相關(guān)的適配優(yōu)化，所以在高分屏下，其字體邊緣會有明顯的鋸齒。之前在用戶調(diào)研中，有用戶反饋?zhàn)煮w模糊不清、識別困難也是上述原因造成，所以Windows系統(tǒng)下莫奈界面字體選取了思源黑體，思源黑體是Adobe與Google聯(lián)合開發(fā)的開源字體，其字重豐富、字形簡潔、現(xiàn)代，能夠很好的適應(yīng)PC與移動端的顯示，也能適應(yīng)當(dāng)前已漸趨主流的高分屏，所以使用該字體能夠給用戶帶來不錯的信息呈現(xiàn)。除此之外，思源黑體的字形特點(diǎn)與MacOS系統(tǒng)下的蘋方字體相似，因而使用思源黑體在一定程度上也能夠保證用戶在不同平臺使用莫奈時體驗(yàn)的一致性。

18、視覺改版：質(zhì)感表現(xiàn)

質(zhì)感的呈現(xiàn)主要通過色彩、透明度的變化、毛玻璃效果的模擬來實(shí)現(xiàn)，色彩與透明度的變化搭配毛玻璃效果使用，可以呈現(xiàn)科技、輕盈的質(zhì)感。

19、視覺改版：結(jié)構(gòu)設(shè)計

結(jié)構(gòu)設(shè)計主要目標(biāo)是組件化及原子化，莫奈最核心頁面是大屏場景編輯器，該頁面承載著可視化大屏由0到1構(gòu)建所需的大多數(shù)功能，也是莫奈產(chǎn)品日常迭代維護(hù)投入資源和成本最集中的模塊。以往編輯器的界面設(shè)計雖然也有不錯的設(shè)計規(guī)范，但是并沒有按照原子化、組件化的思路來考慮各類組件組合使用時的搭配問題，因此基于以往的設(shè)計規(guī)范，大屏編輯器頁面的產(chǎn)品需求總是需要UI產(chǎn)出設(shè)計稿研發(fā)才能開發(fā)，且由于沒有系統(tǒng)的梳理過編輯器頁面各種組件的類型，所以部分組件在同一頁面的不同位置存在不同的形態(tài)；還有一些組件，在具體頁面中的使用并不符合該組件的功能和用途，存在錯用亂用的情形，由此造成編輯器的界面設(shè)計、開發(fā)和維護(hù)都具有較高的成本。

新的改版設(shè)計，在設(shè)計之初就聯(lián)合產(chǎn)品對編輯器內(nèi)的各個模塊所包含的各類組件進(jìn)行了梳理，通過將各個模塊的組件羅列出來，然后重新梳理組合、去重、合并之后，我們就可以知道當(dāng)前編輯器界面總共有哪些類型的組件，以及每類組件用在何處，而組件原子化后也通過間距規(guī)范、使用場景示例等方式解決了如何用的問題。

原子化的組件，精簡了組件的數(shù)量，同時每個組件也針對自身功能和用途的特點(diǎn)進(jìn)行了優(yōu)化，在此過程中也考慮了組件搭配、組合使用的適配和呈現(xiàn)問題。比如，針對顏色選擇組件，我們默認(rèn)以十六進(jìn)制展示顏色色值，并在色值后以百分比顯示該顏色的透明度，我們還在色值后面增加了色值預(yù)覽的小色塊，這樣的設(shè)計兼顧了開發(fā)與設(shè)計同學(xué)使用莫奈的場景。對于開發(fā)同學(xué)，他們在代碼中習(xí)慣使用十六進(jìn)制色值，而設(shè)計師更習(xí)慣于RGBA或HSLA的調(diào)色模式，因此，雖然十六進(jìn)制的色值也能包含透明度信息，但我們依然在顏色后面增加了百分比及小色塊，已幫助設(shè)計同學(xué)確認(rèn)顏色的正確性，此外我們還通過色彩顯示模式切換、自動輸入校正等手段，確保不管用戶輸入的顏色采用何種方式，最終屬性欄都是按照用戶設(shè)置的模式以統(tǒng)一的格式呈現(xiàn)。而諸如此類優(yōu)化，在本次體驗(yàn)升級中不勝枚舉。

20、視覺改版：動效設(shè)計

莫奈的動效設(shè)計主要有兩類，一類是用于頁面視覺效果營造的氛圍類點(diǎn)綴動效，另一類是用于功能及信息傳遞的交互類動效。兩類動效都通過“節(jié)奏感、輕盈”的設(shè)計風(fēng)格，傳遞科技、高效的視覺感受。

在本次動效交付中，為了保證動效的清晰度與流暢感、并減少動效的體積和提升動效加載速度，動效文件均采用Json代碼的形式交付前端，該類動效由瀏覽器在網(wǎng)頁端實(shí)時渲染，具有矢量動畫的特點(diǎn)，能適應(yīng)多種設(shè)備及屏幕分辨率，具有優(yōu)秀的前端呈現(xiàn)效果。

首頁科技感流光氛圍動效

頁面及大屏加載Loading動畫

21、設(shè)計執(zhí)行-典型頁面效果

產(chǎn)品登錄頁

產(chǎn)品首頁-我的可視化頁面

我的可視化頁面改版前后對比

大屏模板頁面

可視化場景編輯器頁面

可視化場景編輯器頁面改版前后對比

產(chǎn)品主要ICON設(shè)計

22、交互優(yōu)化：圖表屬性配置優(yōu)化

針對視覺層面設(shè)計優(yōu)化后，接下來針對莫奈典型的用戶使用場景以及之前線上問卷、線下訪談中用戶反饋問題比較集中的一些場景進(jìn)行交互層面的優(yōu)化，我們交互優(yōu)化的目標(biāo)是“簡單、流暢”。

首先進(jìn)行交互優(yōu)化的是各類圖表的屬性及配置項(xiàng)設(shè)置相關(guān)的交互優(yōu)化。莫奈作為一款可視化場景搭建平臺，為用戶提供了各類型的圖表，每個圖表均具有“樣式、數(shù)據(jù)、交互”三大類配置屬性，這三大屬性，從圖表看起來是什么樣、圖表展現(xiàn)了什么數(shù)據(jù)、圖表可以與用戶進(jìn)行那些互動三個維度解決了圖表在數(shù)據(jù)可視化呈現(xiàn)中最基礎(chǔ)的需求。由于圖表在數(shù)據(jù)可視化呈現(xiàn)中頻繁使用，所以與圖表配置相關(guān)的操作自然也是相當(dāng)高頻和常用。當(dāng)前版本下，圖表配置項(xiàng)主要問題有兩個：一個是圖表配置項(xiàng)層級過深，用戶需多次點(diǎn)擊才能對某一內(nèi)容進(jìn)行修改；第二是批量對多個圖表的相同屬性進(jìn)行修改在當(dāng)前版本不可用，導(dǎo)致用戶圖表配置成本高。針對用戶最關(guān)心最影響體驗(yàn)的兩個交互問題，我的優(yōu)化方案如下。

優(yōu)化圖表配置項(xiàng)層級過深，用戶需要多次點(diǎn)擊才能對某一個內(nèi)容進(jìn)行修改的問題

要解決問題，首先要知道問題從何而來。經(jīng)過深入與產(chǎn)品、研發(fā)同學(xué)及部分用戶訪談溝通后，我發(fā)現(xiàn)當(dāng)前導(dǎo)致圖表配置項(xiàng)層級過深主要有兩個原因，分別是產(chǎn)品規(guī)劃與設(shè)計展現(xiàn)。

具體來講，產(chǎn)品層面有三個問題：

01、產(chǎn)品對于當(dāng)前圖表配置項(xiàng)的結(jié)構(gòu)梳理是以程序的邏輯來呈現(xiàn)，而非以用戶的視角來歸納。舉個栗子，在當(dāng)前版本如果用戶要修改柱狀圖某個柱子的顏色，操作路勁如下：樣式>數(shù)據(jù)系列>系列名稱>形狀設(shè)置>顏色設(shè)置。而這一路徑為何如此設(shè)計？因?yàn)轭伾@個屬性的后端代碼就是這樣的結(jié)構(gòu)。這一路勁把用戶最易理解、最直觀的屬性名放到了路勁的末位，而在它之前呈現(xiàn)的內(nèi)容、名詞其實(shí)都有一定的理解難度，尤其對于新手更是如此！用戶想要更改顏色，Ta首先需要知道什么是數(shù)據(jù)系列、其次還要了解形狀設(shè)置可能包含哪些屬性等，正因具有一定的門檻且不直觀，所以用戶初次進(jìn)行上述設(shè)置時往往需要在樣式一級菜單下點(diǎn)擊多個屬性、反復(fù)嘗試確認(rèn)，才能最終完成顏色修改的設(shè)置，這樣一個使用的流程自然會給用戶“層級過深”的感受

02、圖表配置結(jié)構(gòu)存在冗余、不夠精簡。還是上面那個栗子，用戶修改顏色需要觸達(dá)第5級。但是這種細(xì)致的分層分級的結(jié)構(gòu)設(shè)計是必要的么？答案是并不是！因?yàn)橹挥杏脩絷P(guān)注的才是有用的，產(chǎn)品應(yīng)該提供用戶想要的內(nèi)容而不是強(qiáng)塞給用戶產(chǎn)品具有的所有的功能，所以我們沒有必要把圖表在后端具有的所有屬性都羅列出來，適當(dāng)?shù)膶ε渲庙?xiàng)做些精簡，合并一些同類的屬性、然后通過“更多”按鈕隱藏一些對圖表呈現(xiàn)無關(guān)緊要的內(nèi)容，如此，圖表配置項(xiàng)便能瘦身，用戶使用起來也更輕松。

03、圖表配置項(xiàng)的各個屬性，在屬性列表的排序沒有遵循用戶使用的頻次和習(xí)慣。排列在前面的屬性并非用戶最常用的那些，因此用戶要在列表中從上而下的“翻找”，這種使用過程中的頓挫感，一方面影響了用戶使用產(chǎn)品的效率，另一方面也加深了用戶“層級過深”的感受。

知道了問題從何而來，那么解決問題便也變的簡單。首先，我們聯(lián)合產(chǎn)品經(jīng)理，對莫奈已有的60多個各類圖表組件，逐個進(jìn)行了配置項(xiàng)的梳理，當(dāng)所有圖表的配置項(xiàng)都以思維導(dǎo)圖的形式呈現(xiàn)時，他們的共同點(diǎn)、同類項(xiàng)便一目了然。此時，之前存在的“圖表配置結(jié)構(gòu)存在冗余、不夠精簡”的問題便可解決。而對于先前存在的01與03問題點(diǎn)，在上述梳理工作完成后有了一定的優(yōu)化和改善空間，但仍然存在一些不確定的因素影響設(shè)計和產(chǎn)品的決策。比如、“屬性列表中，哪些屬性是用戶最常用的”，類似這樣的問題我們通過訪談幾個用戶并不能得到可靠的結(jié)論，對此，一方面我們通過為配置項(xiàng)區(qū)域增加數(shù)據(jù)埋點(diǎn)，分析用戶對各個配置項(xiàng)使用的頻次來為后續(xù)的持續(xù)優(yōu)化提供決策支持，另一方面我們也參考、調(diào)研了同類產(chǎn)品中一些用戶量較大、設(shè)計質(zhì)量較高的產(chǎn)品來進(jìn)行當(dāng)前有限的優(yōu)化。

配置項(xiàng)層級過深的另一個原因，是屬性配置列表的結(jié)構(gòu)及布局設(shè)計存在“深層級、空間利用率底”的特點(diǎn)。

如下圖，左側(cè)圖片示意了舊版莫奈的配置列表設(shè)計結(jié)構(gòu)?？梢钥吹脚f版設(shè)計完全采用樹結(jié)構(gòu)的形式將各項(xiàng)自上而下排列，并且采用每級向右縮進(jìn)一個字符的形式來做層級的區(qū)分，舊版的設(shè)計基準(zhǔn)尺寸為1440PX，屬性配置欄本身較窄，而逐級縮進(jìn)的策略更是導(dǎo)致信息展示困難；其次，樹狀的結(jié)構(gòu)在展開層級較多時，部分一級屬性會被擠到一屏之外，用戶需要頻繁滾動鼠標(biāo)滾輪才能看全信息，綜上，舊的設(shè)計策略也給了用戶“層級深”的直觀感受和交互體驗(yàn)。

新版設(shè)計首先增加了配置屬性欄的寬度，讓其能夠在橫向上展示更多信息；其次，新版設(shè)計，將提煉后的一級屬性標(biāo)簽固定在屬性配置列表左側(cè)。相較于之前，這樣的設(shè)計始終能夠讓用戶清晰的看到所有一級屬性，用戶可以隨時在各類屬性中切換，并且右側(cè)屬性內(nèi)容的滾動也不會影響一級屬性的位置，如此就給了用戶很好的全局觀和使用的便利性與確定性。最后，新版設(shè)計采用分隔線與色塊結(jié)合的方式來表達(dá)屬性列表內(nèi)的層級關(guān)系，去掉逐級縮進(jìn)后，配置列表在視覺上更加整齊一致、且空間利用率也有了進(jìn)一步的提升。

優(yōu)化“批量對多個圖表的相同屬性進(jìn)行修改在當(dāng)前版本不可用，導(dǎo)致用戶圖表配置成本高”的交互問題

在數(shù)據(jù)可視化場景搭建過程中，用戶對多個圖表的相同屬性進(jìn)行統(tǒng)一修改、一次性調(diào)整的需求非常迫切和剛需。比如當(dāng)前可視化大屏中有N個圖表，此時，用戶想要將其中6個圖表的橫軸顏色調(diào)整為相同的綠色，在用戶的視角下，此時的操作應(yīng)該是先選中6個想要調(diào)整的圖表，然后找到橫軸顏色設(shè)置項(xiàng)，之后統(tǒng)一調(diào)整色彩。但莫奈當(dāng)前的版本，如果用戶按照上述流程操作，看到的將是下圖左側(cè)的示例：圖表多選之后，對齊、坐標(biāo)等基礎(chǔ)項(xiàng)仍然可用，而與屬性相關(guān)的其它設(shè)置并沒有被聚合并呈現(xiàn)，在此情況下，用戶想要完成最初的目標(biāo)就只能6個圖表逐個依次調(diào)整！顯然，這樣的操作并不符合用戶預(yù)期，它使用戶的操作效率大大降低。

上述問題是一個體驗(yàn)相關(guān)的問題，同時也是一個強(qiáng)技術(shù)相關(guān)的問題，我們想要讓多個圖表的同類項(xiàng)聚合顯示，首先要能在底層對各個圖表的配置項(xiàng)有十分清晰的梳理，好在我們解決第一個問題：“配置項(xiàng)層級過深”時，已經(jīng)完成了對60多個圖表的細(xì)致分析，有了這項(xiàng)工作的基礎(chǔ)，當(dāng)前面臨的問題便不那么棘手。如右側(cè)示例：當(dāng)用戶多選圖表時，圖表的同類項(xiàng)會被聚合，并以用戶視角的理解，將屬性類別進(jìn)行分類，這樣的分類打破了傳統(tǒng)的按照圖表固有屬性排列的慣例，而是把圖表固有屬性整合歸納到用戶易于理解的類目下，如此，用戶多選圖表之后便能夠便捷的對圖表的各類屬性進(jìn)行統(tǒng)一的調(diào)整和修改，而這樣的操作是符合用戶習(xí)慣和預(yù)期的。

22、新建大屏交互流程優(yōu)化

新建大屏作為創(chuàng)建數(shù)據(jù)可視化場景的第一步，它的易用與否直接給了用戶最直觀的對莫奈的第一感受。對于新建大屏的交互優(yōu)化主要有三個方面：創(chuàng)建流程、模板預(yù)覽與模板展示。

創(chuàng)建流程優(yōu)化：首先，舊版的創(chuàng)建流程：新建可視化>選擇模板>大屏命名>創(chuàng)建成功。 這一流程中“大屏命名”是沒有必要的，因?yàn)橛脩粼谛陆梢暬笃習(xí)r可能存在多種需求的可能性，也許用戶只是想看看創(chuàng)建完成后內(nèi)部編輯器是什么樣，或許用戶有實(shí)際項(xiàng)目，但當(dāng)前項(xiàng)目名稱也并未確認(rèn)，所以在此時添加一個不可跳過的步驟著實(shí)讓人不爽，況且大屏創(chuàng)建成功之后在多個位置有多種方式都能便捷的修改大屏名稱，因此，更快速的進(jìn)入編輯器開始設(shè)計創(chuàng)作才是用戶創(chuàng)建可視化最根本的目標(biāo)，所以，拿掉“命名流程”，顯然可以讓整個交互的過程更加流暢。

模板預(yù)覽與模板展示優(yōu)化：原有的設(shè)計，當(dāng)用戶點(diǎn)擊創(chuàng)建大屏按鈕后，會在頁面底部拉起一個小的抽屜，抽屜內(nèi)包含一個空白模板以及有限多個其它內(nèi)容模板，而在如此狹小的區(qū)域展示這么多內(nèi)容，不管是從交互效率還是視覺效果上看，都顯得格外的拘謹(jǐn)和難受。新的設(shè)計首先是全屏鋪開，盡可能充分的利用頁面空間。

在模板展示及預(yù)覽方面，我設(shè)計了列表展示與縮略圖分布展示兩種方式，并添加了分類標(biāo)簽和搜索按鈕，此外還聯(lián)合產(chǎn)品增加了模板收藏功能，這樣用戶可以把自己喜歡的、常用的模板收藏，方便之后更快速的使用

模板預(yù)覽方面，在兩種布局模式下，用戶鼠標(biāo)滑過模板縮略圖時，模板均會以較大的視圖動態(tài)呈現(xiàn)模板內(nèi)容。在列表模式下，模板預(yù)覽窗口固定在頁面右側(cè)區(qū)域；縮略圖分布的模式下，預(yù)覽窗口根據(jù)鼠標(biāo)指針的位置激活。當(dāng)用戶選中某個模板時，點(diǎn)擊底部創(chuàng)建按鈕即刻進(jìn)入大屏編輯器界面，此時用戶便可基于模板內(nèi)容進(jìn)一步完成自己的定制化設(shè)計。

23、全局搜索交互優(yōu)化

如今移動端各類產(chǎn)品已經(jīng)給用戶養(yǎng)成了算法推薦+自主搜索的產(chǎn)品使用習(xí)慣，這種習(xí)慣當(dāng)前也逐步從移動端往PC端轉(zhuǎn)化。搜索能從海量信息中最快速的找到用戶關(guān)心的內(nèi)容，因而提高搜索功能的易用性，能明顯提高用戶使用莫奈的效率。

以往的搜索功能按照不同模塊和場景分布在不同位置，用戶需要先找到對應(yīng)模塊才能進(jìn)行搜索，降低了搜索的便捷性和易用性。新的設(shè)計在保留之前搜索能力的基礎(chǔ)上，新增全局搜索，用戶在一個位置即可完成對組件（優(yōu)先展示當(dāng)前畫板內(nèi)組件）、屬性、幫助等內(nèi)容的搜索和查找，進(jìn)一步提升搜索的效率。

24、圖層管理交互優(yōu)化

一個數(shù)據(jù)可視化場景，通常是由N個數(shù)據(jù)圖表與其它數(shù)據(jù)要素一起構(gòu)成的多個頁面來呈現(xiàn)和展示的。這些頁面內(nèi)包含大量的元素，而對這些元素的管理主要通過大屏編輯器頁面左側(cè)的圖層管理面板來實(shí)現(xiàn)。一般我們對圖層管理的手段主要有三種：命名、分組和查找。

給組件命名是一個耗時且麻煩的行為，我們在做用戶調(diào)研時發(fā)現(xiàn)，大部分用戶都沒有給組件規(guī)范命名的習(xí)慣，大多數(shù)情況下，組件在圖層面板列表內(nèi)都是以默認(rèn)名稱或者默認(rèn)名稱+1、2、3的形式存在。這導(dǎo)致了當(dāng)頁面組件較多時，通過組件命名來查找組件其實(shí)相當(dāng)困難，所以自動生成縮略圖的形式相比讓用戶耗費(fèi)大量時間為圖層命名更能改善用戶體驗(yàn)。縮略圖以快照方式保存當(dāng)前組件最新狀態(tài)截圖，從而幫助用戶更快速的將圖層組件與頁面上的內(nèi)容對應(yīng)起來。

新的設(shè)計，圖層成組后也取消了縮進(jìn)字符的效果，我采用給成組對象設(shè)計更明顯的分組示意圖標(biāo)以及為組內(nèi)列表添加深色色塊的方式，完成了成組對象與列表內(nèi)其他要素區(qū)分的需求，新的設(shè)計使成組對象更易查找和識別。

此外，我們還增加了對圖層列表的搜索功能，幫助用戶快速定位名稱已知的設(shè)計元素。

25、經(jīng)驗(yàn)總結(jié)

此次體驗(yàn)升級是設(shè)計主導(dǎo)推動，產(chǎn)品與研發(fā)緊密配合的結(jié)果。體驗(yàn)設(shè)計師作為最接近用戶的群體，是產(chǎn)品與用戶溝通的橋梁。時刻關(guān)注用戶心聲，并能將用戶細(xì)碎的吐槽和各類反饋轉(zhuǎn)化為體驗(yàn)痛點(diǎn)、制定對應(yīng)的優(yōu)化策略是體驗(yàn)設(shè)計師的基本功。而對于設(shè)計和產(chǎn)品本身是否熱愛，也是設(shè)計能否不斷精進(jìn)、體驗(yàn)是否能夠不斷提升的關(guān)鍵。好的設(shè)計不僅服務(wù)了產(chǎn)品、幫助了用戶、同時也成就了設(shè)計師本身。

本人為莫奈提供設(shè)計支持的三年多時間，在沒有KPI要求和外部壓力的情況下，通過公司內(nèi)部需求管理系統(tǒng)“行云”，為莫奈提交231個體驗(yàn)優(yōu)化建議；以線下線上的形式面向莫奈產(chǎn)品及研發(fā)團(tuán)隊(duì)進(jìn)行了20多次專業(yè)分享。正是日常這些積極主動且持續(xù)的努力，使我本人與莫奈產(chǎn)品團(tuán)隊(duì)建立了非常友好緊密的聯(lián)系，這也為推動本次體驗(yàn)升級改版提供了巨大的助力。我認(rèn)為作為體驗(yàn)設(shè)計師，我們不僅要對用戶有同理心，為用戶創(chuàng)造愉悅舒適的感受，同時也要對身邊的同事、職場中的合作伙伴有相似的同理心和換位思考的意識，體驗(yàn)關(guān)乎人、環(huán)境與生活，嘗試在生活中磨煉自己創(chuàng)造好的體驗(yàn)的能力，并將其應(yīng)用到體驗(yàn)設(shè)計師的職業(yè)工作中，我相信，倘若如此實(shí)踐，必能在職業(yè)和生活中都獲得有不錯的成就。

好的產(chǎn)品，必然是持續(xù)關(guān)注用戶訴求，不斷迭代發(fā)展的產(chǎn)品，好的體驗(yàn)設(shè)計也必然是陪伴產(chǎn)品不斷優(yōu)化、持續(xù)精進(jìn)的設(shè)計，復(fù)盤的意義不僅是沉淀過去的經(jīng)驗(yàn)，更是為未來更好的體驗(yàn)蓄能。

此次分享如能為大家?guī)砟桥乱稽c(diǎn)點(diǎn)的啟發(fā)，本人便倍感榮幸、開心至極！ 期望大家能夠與我有更多交流，么么噠~~

關(guān)于用戶體驗(yàn)

隨著技術(shù)及經(jīng)濟(jì)的發(fā)展，人們對計算機(jī)系統(tǒng)、機(jī)器等的要求，從單純的「 可以用 」逐漸變?yōu)橄胍?nbsp;更好用、容易用、用得舒服 」等更加豐富的使用體驗(yàn)，也就是常聽到的好的「 用戶體驗(yàn) 」。
「 用戶體驗(yàn)（User Experience ）」這個概念，最早由唐納德·諾曼（Donald Arthur Norman）提出，他希望用這個詞，來涵蓋個人使用系統(tǒng)時的體驗(yàn)、各個方面的體驗(yàn) ，包括工業(yè)設(shè)計圖形、交互界面、物理交互，以及與人的交互。

而「 用戶體驗(yàn) 」產(chǎn)生的基礎(chǔ)，是「 用戶使用了機(jī)器 」，即人跟機(jī)器有發(fā)生接觸、交流、互動等，然后用戶會形成主觀上的體會、感受。這里的「 機(jī)器 」泛指各種「 產(chǎn)品 」，類比諾曼所說的，即物理界面、虛擬界面、系統(tǒng)、硬件等。
因此，好的「 用戶體驗(yàn) 」是基于好的交互設(shè)計。而對交互設(shè)計「 好/壞 」的影響因素，涉及到人、產(chǎn)品、使用環(huán)境這三者，也就是人機(jī)工程的內(nèi)容。
概括一下百科對「 人機(jī)工程學(xué) 」的解釋：

將 「 使用物的人 」和 「 設(shè)計的物 」以及 「 人與物共處的環(huán)境 」作為一個系統(tǒng)來研究（人-機(jī)-環(huán)境系統(tǒng)）。在人、機(jī)、環(huán)境這三個要素 本身特性 的基礎(chǔ)上，科學(xué)地利用三個要素間的 有機(jī)聯(lián)系，來尋求系統(tǒng)的 最佳參數(shù)。 

其中關(guān)于人的「 本身特性 」包括人體結(jié)構(gòu)和機(jī)能特性。主要有人體各部位的尺寸、重量、面積、活動、相互關(guān)系等，眼耳鼻舌身對應(yīng)的視、聽、嗅、味、觸覺，以及動作習(xí)慣和認(rèn)知。這部分大愚認(rèn)為可以把「 結(jié)構(gòu)特性 」當(dāng)作人的硬件，具有一定的普遍/通用性；而「 認(rèn)知 」則是人的軟件，個體間存在一定差異。

然后，就到了這篇文章的主要內(nèi)容，人的「 結(jié)構(gòu)特性 」部分。

注：下文中提及的人體結(jié)構(gòu)特征是基于大部分人的情況描述，內(nèi)容也是圍繞人機(jī)交互有關(guān)的方面，不是人體結(jié)構(gòu)特征的全面介紹。

人體結(jié)構(gòu)特性

人體結(jié)構(gòu)中對人機(jī)交互產(chǎn)生影響的主要有眼、耳、身（皮膚）對應(yīng)的：視覺、聽覺、觸覺，以及四肢、頸椎的尺寸、受力情況和活動幅度等。下文將對這四部分的基礎(chǔ)內(nèi)容進(jìn)行整理，還有聊聊一些交互、體驗(yàn)設(shè)計上的應(yīng)用。

人與周圍環(huán)境發(fā)生聯(lián)系的感覺通道，最重要的就是「 視覺 」，約占80%的信息是通過視覺來獲得。因此「 視覺顯示 」是人機(jī)交互系統(tǒng)中用的最廣泛的一種形式。

視覺的形成

感受光（電磁波）

人眼正常感受光譜的波長約在400nm-780nm之間（大概這個范圍，網(wǎng)上相關(guān)資料關(guān)于這個數(shù)值存在微小差異），對應(yīng)的色相是紫色-深紅色，也就是常說的彩虹色。

而負(fù)責(zé)感受光的細(xì)胞是視錐細(xì)胞和視桿細(xì)胞。

視錐細(xì)胞，約占95%，復(fù)雜感受強(qiáng)光及有顏色（彩色）的視覺，在環(huán)境光線亮?xí)r起作用，用來區(qū)分色彩。研究數(shù)據(jù)表明視錐細(xì)胞對光譜中波長為555nm的「 黃綠色 」部分最敏感。

視桿細(xì)胞 ，約占5%，復(fù)雜感受弱光及沒有顏色（黑白）的視覺，在環(huán)境光線暗時起作用，用來區(qū)分黑白。研究數(shù)據(jù)表明視桿細(xì)胞對光譜中波長為507nm的「 青綠色 」部分最敏感，對極弱的光刺激敏感。

如果涉及一些特定的工作環(huán)境（昏暗）的應(yīng)用設(shè)計時，就可以考慮下此時作用細(xì)胞的特性，進(jìn)行合理的設(shè)計設(shè)置。

識別物體

正常情況下，瞳孔會根據(jù)環(huán)境中的光量來調(diào)整大小。當(dāng)有光線較強(qiáng)時，瞳孔會收縮變窄；當(dāng)光線很暗時，瞳孔會膨脹來讓更多的光進(jìn)入眼球。
可以把這個理解為一個保護(hù)機(jī)制，在強(qiáng)光下，通過收縮來減少光對眼睛的高強(qiáng)度刺激；而弱光下，對感光細(xì)胞刺激不足，為了不讓眼睛過分費(fèi)力地去尋找目標(biāo)和識別目標(biāo)而引起視覺疲勞，所以瞳孔會放大，讓更多的光進(jìn)入。
而接收光的刺激，看到物體后，是否可以準(zhǔn)確獲取信息（看清物體、識別文本、圖像等）則跟視敏度相關(guān)。

視敏度 ，就是眼睛能分辨物體細(xì)微結(jié)構(gòu)的能力，也就是看清物體的能力。相關(guān)實(shí)驗(yàn)數(shù)據(jù)表明，增強(qiáng)亮度可以提高視敏度。也就是說，亮度越強(qiáng)，人眼對物體的識別能力就越強(qiáng)。

下面提到兩個實(shí)驗(yàn)，其中「 正對比極性 」，指在淺色背景上顯示深色字體文本，就是對應(yīng)我們界面設(shè)計中的「 淺色模式 」；而「 負(fù)對比極性 」，指在深色背景上顯示淺色字體文本，即「 深色/暗黑模式 」。

實(shí)驗(yàn)1. 德國杜塞爾多夫精神病研究所的Cosima Piepenbrock等相關(guān)人員，對「對比極性對視敏度和校對的影響」的研究結(jié)果表明：人眼在「淺色模式」下的視敏度要優(yōu)于「暗黑模式」下，字體越小，淺色模式的優(yōu)勢就更明顯。 
實(shí)驗(yàn)2. Agelab實(shí)驗(yàn)室的喬納森·多布雷斯（Jonathan Dobres）等相關(guān)人員，對「 環(huán)境光照條件（模擬白天/夜間）是否影響正對比度極性的優(yōu)勢」的研究表明：夜間，深色模式下閱讀小字體文本比淺色模式下閱讀要困難得多。 而人們對文本的識別，「淺色模式」下比在「深色模式「要快，白天比晚上更快。

對上面兩個實(shí)驗(yàn)可以用環(huán)境光的強(qiáng)弱對視敏度的影響來理解：為方便理解，可以假設(shè)我們的界面尺寸足夠大，大到覆蓋我們視野范圍，那就可以將淺色模式中的淺色背景類比為白天（環(huán)境光度亮），深色模式中的深色類比為夜間（環(huán)境光度弱），而屏幕內(nèi)的文本、信息，就是我們要識別的物體。亮度越強(qiáng)，人眼對物體的識別能力（視敏度）就越強(qiáng)。

從上面的實(shí)驗(yàn)來看，無論在白天或夜間環(huán)境下，「 淺色模式 」都要比「 深色模式 」更好用。

但根據(jù)德國蒂賓根大學(xué)的Andrea Aleman等相關(guān)人員的一項(xiàng)研究表明，長時間處于「淺色模式」下可能會導(dǎo)致近視。其表現(xiàn)為，閱讀「淺色模式」下的文本時，脈絡(luò)膜（跟近視有關(guān)的一層膜）會明顯變薄；而閱讀「深色模式」下的文本時，這層膜明顯變厚。

可以理解為長時間處于「淺色模式」下，意味著視敏度的持續(xù)維持在較高狀態(tài)，就像人在長時間高強(qiáng)度工作下可能會導(dǎo)致健康受損一樣，眼睛同樣也可能會受到損傷。因此相對長期來說，「深色模式」則是更友好的一種形式。

那通過適當(dāng)?shù)脑O(shè)計，是否有可能找到這兩者之間的最優(yōu)解呢？

視覺疲勞/傷害

注視區(qū)域光照不足、光線過強(qiáng)、光線分布不均勻、光源閃爍、眩光、反光、目標(biāo)過小、目標(biāo)不穩(wěn)定等，都會造成眼睛超負(fù)荷工作，導(dǎo)致視覺疲勞。

光照不足，對應(yīng)界面交互，可以指屏幕亮度過低，也可以理解為內(nèi)容和深色背景間的對比度不足。

光線過強(qiáng)，則是屏幕亮度過高，也可以理解為內(nèi)容和淺色背景間的對比度不足。還有大面積高明度色彩的使用。而像汽車遠(yuǎn)光燈，也是常見的一種光線過強(qiáng)的產(chǎn)品，并且常常被錯誤使用。

閃爍，會對眼睛造成很大的負(fù)荷。在高亮度下，眼睛除了視敏度會增強(qiáng)外，對閃爍的感知也會增強(qiáng)。這方面涉及的產(chǎn)品設(shè)計，如顯示器的刷新頻率，要到達(dá)某一程度，人眼才感覺不到屏幕的閃爍。

目標(biāo)過小，在可識別及相同環(huán)境下，目標(biāo)過小，識別所需的時間越長，也就是更費(fèi)眼。像界面中的元素，文本字號、圖標(biāo)等，都需要有舒服的可讀性。

反光，跟工業(yè)產(chǎn)品設(shè)計的關(guān)系比較密，反光是很容易引起視覺疲勞的和視力傷害。但生活中好像處處有反光，高樓大廈連片的鏡面窗戶/墻、我們正在看的電腦屏幕、手機(jī)屏幕、公交車廣告牌的保護(hù)罩、汽車的后視鏡等等，都會在某些瞬間讓你覺得眼睛受到了億點(diǎn)傷害，這也是很常見的一種光污染。

視角范圍

1. 水平方向

水平方向上，雙眼視野角度通?？蛇_(dá)到120°視角。其中「 有效視域 」為30°，即人眼能立刻看清物體的存在和動作軌跡的范圍。其余部分稱為誘導(dǎo)視野，也就常說的「 余光 」。

而眼動（頭部不動）「 舒適轉(zhuǎn)動區(qū) 」通常為60°。

如果以眼睛距離屏幕40cm為例，水平最佳視野寬度大概就是21.6cm，在72dpi下，約為600px。在進(jìn)行文本寬度設(shè)定時，可以以此作為依據(jù)，來設(shè)計內(nèi)容的顯示寬度。

2. 垂直方向

垂直方向上，視野角度通?？蛇_(dá)到135°視角，「 有效視域 」為30°，「 舒適轉(zhuǎn)動區(qū) 」為55°。

關(guān)于「 最佳視角范圍 」及「 眼動舒適區(qū) 」的應(yīng)用，在汽車領(lǐng)域的HMI設(shè)計和一些較為復(fù)雜的交互活動中有比較多的體現(xiàn)。

聽覺對信息傳遞的感知僅次于視覺，同視覺一樣，利用以前的經(jīng)驗(yàn)來解釋輸入。

相比視覺，聽覺更容易引起注意，且反應(yīng)速度快，可以捕捉各個方向的信息，不受照明條件限制。

人類聽覺系統(tǒng)對聲音的解釋可幫助設(shè)計人機(jī)交互界面中的語音界面，而對有能力缺陷的人，如視障人士來說，「 聽覺（語音交互） 」更是一種替代視覺顯示的重要形式。

聽覺的形成

感知范圍

聲音有三個要素：音調(diào)（頻率）、響度（振幅）、音色（材質(zhì)）。

人類可以聽到的聲音頻率范圍為20Hz-20kHz，正常情況下人耳可分辨出約 40多萬種 不同的聲音。

對語音的辨認(rèn)頻率范圍為260Hz-5600Hz。正常情況下，人類語言的頻率在：500Hz-3000Hz之間。

感受性、識別性最高的頻率范圍在1000Hz-4000Hz，低于500Hz，或高于5000Hz時，要達(dá)到一定響度才能被聽到。

響度

0－20dB，幾乎感覺不到
20－40dB，相當(dāng)于低聲說話，輕柔的響聲
40－60dB，正常談話的聲音
60－70dB，會感到吵鬧、長時間會損害神經(jīng)細(xì)胞
超過70dB，讓人感覺煩躁，無法集中注意力
85-90dB，短時間內(nèi)影響人的聽力，破壞神經(jīng)細(xì)胞
超過90dB，聽力受損

超過140dB時，引起的是痛覺，而不是聽覺，會完全損害聽力（歐盟界定的導(dǎo)致聽力完全損害的最高臨界點(diǎn)）

對音色的辨識和記憶

人耳對各種音色的分辨能力非常強(qiáng)，對經(jīng)常聽到的音色也具有很強(qiáng)的記憶力。

比如在同一頻段同時演奏不同的樂器，人耳依然可以分辨出有哪些樂器在進(jìn)行演奏，也能識別出不同動物的叫聲。

而對于熟悉的人，比如對父母兄弟姐妹等，經(jīng)常只通過說話的聲音，就能知道是誰；通過腳步聲，也可以辨認(rèn)出來是誰來了等等。

辨別方向

除了對聲音的「 音調(diào)、響度、音色 」這三個要素的感知之外，人耳還能辨別出聽到的聲音是「 從哪里/哪個方向傳來的 」，也就是聲源方位感。

粗糙的聲音

瑞士的神經(jīng)科學(xué)家通過研究發(fā)現(xiàn)：粗糙的聲音（上限約為130 Hz）激活了大腦某些特別的區(qū)域。

當(dāng)重復(fù)的聲音被認(rèn)為是刺耳的、無法忍受的時候（特別是在40-80Hz之間），會引起持續(xù)的反應(yīng)，刺激杏仁核、海馬體和腦島，特別是跟突出、厭惡和疼痛相關(guān)的區(qū)域，而正因?yàn)橛羞@些區(qū)域參與聲音的處理，才會使這類聲音會讓人感覺到難以忍受。

這也是警報聲的應(yīng)用原理，通過快速重復(fù)的頻率來引起人們的注意。再結(jié)合聲音傳播不受光照、方向、角度等影響的特性，來提高警報聲被人耳檢測到的概率。

其他讓人感到煩躁、難受的聲音，如汽車?yán)嚷?、尖叫聲、嬰兒哭聲等等通常也是在這一頻段。

聚焦效應(yīng)

視覺上的三維圖效果，是眼睛先呈「 散焦?fàn)顟B(tài) 」，視焦點(diǎn)前后位移產(chǎn)生層次感，從而看到三維平面圖畫的立體效果。

而人耳的聽覺跟視覺相反，可以從眾多的聲音中「 聚焦到某一點(diǎn) 」上，也就是聽覺的「 聚焦效應(yīng) 」。
比如我們聽交響樂時，大腦皮層可以抑制其它樂器的演奏聲，把精力和聽力集中到其中的一種樂器聲音上。還有在公交地鐵上，我們同樣可以集中精力聽廣播報站的聲音，而忽略車上的其他喧鬧聲。

這個特性也讓語音交互的場景擁有更多的可能性。

觸覺屬于動覺交流領(lǐng)域，即通過身體的運(yùn)動/動作來交流。

跟視覺、聽覺的感知相比，「 觸覺 」最大不同是它的非局部性（全身皮膚），以人體為介質(zhì)，對皮膚、肌肉的感受器進(jìn)行刺激，能夠 敏感、強(qiáng)烈和更迅速 的被用戶感知，及時傳遞信息。也 不易受環(huán)境影響，無論環(huán)境吵雜，或是光線不佳，對其體驗(yàn)效果的影響都不大。

但「 觸覺 」傳遞的信息遠(yuǎn)少于視覺和聽覺，通常作為視覺和聽覺反饋的補(bǔ)充。而對有能力缺陷的人，如聽障、視障人士來說，「 觸覺交互 」的應(yīng)用則是一種很重要的形式。

同時也是用戶體驗(yàn)過程中重要因素之一，會直接影響用戶對產(chǎn)品的情感體驗(yàn)與交流。在工業(yè)產(chǎn)品設(shè)計中感受較多，如日常工作生活中常見的家居用品、鼠標(biāo)、鍵盤、手機(jī)等的外形設(shè)計、材質(zhì)觸感等。

觸覺的形成

人類的皮膚表面散布著觸點(diǎn)，一般指腹最多（人類手指的觸覺敏感度是前臂的10倍），其次是頭部，最少的是背部和小腿。觸點(diǎn)的大小不盡相同，分布不規(guī)則。

作用

通過對冷、熱、尖銳物體的判斷，讓身體及時遠(yuǎn)離危險和傷害，可以對人體起到保護(hù)作用。

同時也具有表達(dá)情感，辨別情緒的功能。有說法認(rèn)為「觸覺」可能是用來傳達(dá)人的情感的最佳途徑，就像「 擁抱 」和「 安慰的文字/語言 」，體現(xiàn)的情感強(qiáng)度就很不一樣。

觸覺反饋-觸覺學(xué)（Haptics）

借助Haptics技術(shù)，通過作用力、振動等「 觸覺反饋 」，可以起到傳遞信息的作用。但想通過「 觸覺體驗(yàn) 」來傳達(dá)恰當(dāng)?shù)?、有用的信息，需要先理解人類是如何詮釋不同的「觸覺體驗(yàn)」的。

比如想要通過「 振動感知 」來傳遞有用的信息，需要先了解怎樣的振動頻率、強(qiáng)度、節(jié)奏可以讓使用者意識到其代表的是什么意思：成功、失敗還是其他呢？這涉及到「 認(rèn)知 」方面的內(nèi)容。
通常情況下，「 觸覺反饋 」是作為視覺、聽覺反饋的一種補(bǔ)充。
如在觸控屏上用虛擬鍵盤輸入文字時，通過按鍵的「 振動反饋 」，讓用戶清晰及時地了解到自己已經(jīng)成功按下了某一個按鍵。相關(guān)研究的結(jié)果也表明：虛擬鍵盤加入振動反饋后，是可以提升用戶輸入時的準(zhǔn)確度。

而一些特定場景下，「 觸覺反饋 」可以很好的替代視覺和聽覺反饋。
比如駕駛汽車時，駕駛員需要將大部分的注意力放在道路環(huán)境上，那么通過「 觸覺反饋 」，將部分操作結(jié)果傳遞給駕駛員，這一可以在一定程度上減輕駕駛員在視覺和聽覺上的負(fù)擔(dān)。

人類的動作通常分為三類：先天、模仿、訓(xùn)練得來的。

由于肢體的結(jié)構(gòu)特點(diǎn)，「 先天 」和「 模仿 」的動作，通常存在一定的局限性。

頭部/頸椎

頸椎前屈幅度35-45°，后伸35-45°，左右側(cè)屈各45°，左右旋轉(zhuǎn)各60-80°。

當(dāng)頸部前傾時，頸椎承受的壓力逐漸增大：
前傾0°時，為頭部重量，約為4.5-5kg；
前傾15°時，承受壓力約為12kg；
前傾30°時，承受壓力約為18kg；
前傾45°時，承受壓力約為22kg；
前傾60°時，承受壓力約為27kg。

結(jié)合前面我們講過的人眼轉(zhuǎn)動的舒適角度和視野范圍，可以為一些物品的設(shè)計提供參考。

腰部/腰椎

直立，腰伸直自然體位時，腰部可前屈90°、后伸30°、左右側(cè)屈各20-30°、左右旋轉(zhuǎn)各30°。

人體平（仰）臥位時，腰椎承受的壓力最小。

腿部/膝關(guān)節(jié)

膝關(guān)節(jié)屈膝角度可達(dá)120-150°（小腿后部和股后部相貼）。人坐立時，膝關(guān)節(jié)彎曲90°，小腿和地面垂直放置對腿部最好的，屈膝小于90°時，長時間保持會影響下肢的血液循環(huán)。

伸直時一般為0°，有過伸狀態(tài)5-10°。膝關(guān)節(jié)屈曲時，有輕微的內(nèi)旋和外旋運(yùn)動，約為10°。

手臂/肘關(guān)節(jié)

肘關(guān)節(jié)彎曲角度可達(dá)140°、過伸角度為0-10°、旋前80-90°、旋后80°-90°。

打字時，手肘彎曲接近90°（水平放置）是最放松的。

手指/手掌

1. 拇指動作幅度

掌側(cè)可以外展約70°，指間關(guān)節(jié)屈曲約90°，掌拇關(guān)節(jié)屈曲約20-50°。
和手腕連接處的腕掌關(guān)節(jié)，能夠進(jìn)行較大程度的屈伸，收展，完成對掌運(yùn)動。這是拇指特有的，是拇指骨外展，屈和旋內(nèi)運(yùn)動的總和，使拇指尖能跟其他的手指和掌面接觸。

2. 其他手指動作幅度

掌指關(guān)節(jié)屈曲約60-90°，近節(jié)指間關(guān)節(jié)屈曲時約為90°，遠(yuǎn)節(jié)指間關(guān)節(jié)屈曲時約為60-90°。 

3. 手指觸控

在使用手機(jī)等數(shù)字界面時，用「 食指 」和「 拇指 」進(jìn)行觸控是比較自然和常見的行為。

根據(jù)麻省理工對人類觸覺的實(shí)驗(yàn)，食指、拇指的寬度和觸控區(qū)域有以下數(shù)據(jù)：

食指平均寬度約16~20mm、指腹觸摸區(qū)域尺寸約10~14mm、指尖觸摸區(qū)域尺寸約8~10mm。
拇指平均寬度約25mm、指腹觸摸區(qū)域尺寸約12~16mm、指尖觸摸區(qū)域尺寸約10~12mm。

觸控控件的最小尺寸要大于觸摸的最小尺寸?？丶^小，一方面會增大準(zhǔn)確觸控的難度，另一方面手指會造成遮擋，導(dǎo)致用戶無法明確是否已經(jīng)正確觸摸了相應(yīng)的控件。

（手指觸控這部分本來放在上面關(guān)于觸覺的內(nèi)容里，后面想了下，「觸覺」更多的是指「反饋信息」層面的作用，所以還會歸在肢體動作、范圍里比較合適。）

4. 手指擊鍵

用鍵盤打字時，在某些瞬間，多數(shù)手指只是放在鍵位上，沒有擊鍵行為，因此鍵盤按鍵的驅(qū)動力需要大于手指重量產(chǎn)生的力，才足以支撐手指。

ANSI 1988 年建議鍵盤擊鍵的理想壓力應(yīng)該在0.5N-0.6N之間，一般0.25N-1.5N的壓力都是可以接受的。

而對于一些特殊的設(shè)備按鍵，比如工業(yè)鍵盤類的，則需要更大的按鍵驅(qū)動力，因?yàn)檫@類產(chǎn)品的工作環(huán)境和活動相對復(fù)雜，需要更謹(jǐn)慎的操作。

5. 單手操作

單手對手機(jī)等觸屏設(shè)備進(jìn)行操作時，一般以四個手指和手掌為依托，用大拇指操作為主，而成年人拇指長度約為6-10cm。

數(shù)據(jù)表明，一般成年男性，單手全屏操控的屏幕尺寸最大約為4.5英寸，而成年女性，單手操控的極限約為4.0英寸。超過這個尺寸，單手進(jìn)行全屏操控會有一定困難。

而目前主流的智能手機(jī)基本在5英寸以上，根據(jù)拇指關(guān)節(jié)的活動幅度，單手操作時在手掌位置不動的情況下，拇指觸及的區(qū)域只是很局限的一部分：

以上就是體驗(yàn)設(shè)計中涉及人體結(jié)構(gòu)特性的內(nèi)容部分。
感謝閱讀，期待交流。

作者：大魚小魚蝦米
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司

作者：齊天大碩
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司

智能感知交互

注：閱讀此文章大約需要30分鐘

先給大家看兩個案例：大家都很熟悉的，自動感應(yīng)測溫，不需要人為操控

第二個案例則是nest智能恒溫器，比起傳統(tǒng)的需要人為的去手動觸發(fā)調(diào)節(jié)溫度，他能夠?qū)崟r感知家里的溫度，基于不同的場景與客戶習(xí)慣去調(diào)節(jié)溫度，比起傳統(tǒng)模式便捷了不少

那么從這兩個案例中，大家可以發(fā)現(xiàn)，傳統(tǒng)人機(jī)交互與下一代人機(jī)交互是有著本質(zhì)區(qū)別的，傳統(tǒng)人機(jī)交互一直以來都是輸入輸出的被動交互邏輯，什么是被動交互呢，就是必須有用戶向機(jī)器發(fā)送指令，機(jī)器接收指令，執(zhí)行后將結(jié)果反饋給用戶。而新的交互模式，則是用戶不需要做任何指令輸入，機(jī)器自動感知當(dāng)前的場景，來理解你的意圖是什么，來去主動幫你完成任務(wù)。那么這是如何實(shí)現(xiàn)的呢，主要是依靠傳感器，算法等實(shí)現(xiàn)的。這也說明了我們的生活開始下一代人機(jī)交互的新時代。

這也就是今天的主題，那么今天，我會詳細(xì)講解，把這個課題講透。包括什么是智能感知交互，他的底層框架模型是怎樣的，以及結(jié)合案例是講解他是如何落地使用的，

01 智能感知交互背景及定義

回顧整個人機(jī)交互的發(fā)展史，經(jīng)過了不同的階段，從命令行界面，也就是通過手柄，遙控等進(jìn)行交互，再然后是圖形用戶界面，也就是觸摸屏等交互，再到語音交互，圖像識別等等

人們對于人機(jī)交互也從依賴于人去手動觸發(fā)，再到趨于自然和本能，隨著技術(shù)的發(fā)展，我們也迎來的技能感知交互的新時代

在這里也對智能感知交互做了初步定義：是以人為中心，基于傳感器、大數(shù)據(jù)及AI技術(shù)，自動感知用戶情景，理解用戶意圖，主動響應(yīng)用戶需求，真正提升人機(jī)交互效率

那么智能感知交互也有幾個特征，更加的趨于自然，輸入輸出方式更加無感知，智能

02 智能感知交互模型

接下來是最核心的重點(diǎn)，智能感知交互的框架是怎么樣的，他的底層邏輯是怎樣運(yùn)行的，這也是整套理論知識的基石和核心。

智能感知交互模型主要分為三層：

① 感知層，也就是對當(dāng)前用戶的情景，進(jìn)行一個全方位的識別；

② 決策層，也就是我感知后，怎么去做決策，就像人的大腦一樣；

③ 表達(dá)層，也就是具體的交互執(zhí)行，例如界面，音效，光效等等。

那么以剛開頭的無接觸測溫門為例，在感知層主要通過紅外傳感器去感知人的體溫，在決策層則是當(dāng)遇到發(fā)燒的顧客則需要進(jìn)行干預(yù)，在表達(dá)層，則會通過音效、光效做出主動的預(yù)警的設(shè)計表達(dá)。

那么我們接下來詳細(xì)的看下整個框架模型，那么，感知層又細(xì)分為三大模塊：

第一塊為【用戶感知】，第二塊為【場景感知】，第三塊為【行為感知】。 那我這里給他串聯(lián)起來，簡單來說就是感知用戶是誰，在什么楊的場景下，做了什么樣的行為。那么決策層則細(xì)分為兩大塊，也就是無感知之后怎么做決策，理解用戶的意圖是什么，。那么第二則是做出決策后怎么去做設(shè)計表達(dá)和輸出呢，受到那些變量因素的影響，這是由設(shè)計表達(dá)影響因子模型決定的。那么最后一層則是正式做出設(shè)計表達(dá)，目前表達(dá)的介質(zhì)主要有界面、聲音、光效、觸覺、動作等。那么這張圖是一個大框架，接下來我會詳細(xì)的剖析每一層

先講第一層，感知層，就是感知技術(shù)，這里在進(jìn)一步細(xì)分為三個板塊，用戶感知，場景感知，行為感知，用戶感知為，用戶性別、地域、年齡等等特征，場景感知則是什么時間、什么地點(diǎn)，當(dāng)前環(huán)境、溫度等等，行為感知則是去感知，你用了什么工具，對什么對象，做了什么操作行為等等。針對不同的業(yè)務(wù)會有不同的針對感知，例如開頭案例中的體溫測量，他對溫度這一屬性重點(diǎn)感知。大家這里也能想到，世間萬物都可感知，為了方便后續(xù)的統(tǒng)計和分析，需要進(jìn)行加工處理，需要將當(dāng)前的感知線上化和數(shù)據(jù)化，同時會將這些數(shù)據(jù)進(jìn)行標(biāo)簽化的處理，那么如何去處理這些數(shù)據(jù)呢，這里主要分成三類：

1.1 統(tǒng)計類數(shù)據(jù)

簡單來說就是從傳感器或者線上平臺等渠道直接獲取的數(shù)據(jù)。舉個例子，比如說登錄網(wǎng)站，那么我們可以獲取用戶ID，從溫度傳感器，我們可以直接獲得溫度。這些都是統(tǒng)計類數(shù)據(jù)

1.2 規(guī)則類數(shù)據(jù)

簡單來說就是基于一定的規(guī)則產(chǎn)生，舉個例子，比如我們規(guī)定用戶與設(shè)備之間的距離為0~40cm為近距離，，工人每小時生產(chǎn)產(chǎn)品80件定義為熟練工，這些都定義為規(guī)則類數(shù)據(jù)

1.3 機(jī)器學(xué)習(xí)類數(shù)據(jù)

他是通過機(jī)器學(xué)習(xí)挖掘產(chǎn)生，根據(jù)相關(guān)屬性進(jìn)行預(yù)測和判斷。比如淘寶上對男女的劃分，他通過你買的商品去判斷你是男生還是女生，你的興趣愛好是什么

那么接下來我們講決策層,那么剛剛我也介紹了整個框架模型，決策層主要有兩部分，現(xiàn)在講述第一部分，也就是整體框架中紅色圈住部分，針對【意圖識別決策模型】進(jìn)行剖析。簡單來說就是我感知之后去理解用戶的訴求是什么，這里也抽象為四大類決策方向:行為干預(yù)、推送建議、意圖預(yù)判、自動決策

2.1 行為干預(yù)

簡單來說就是我感知到當(dāng)前的行為是異常、錯誤的，會做出主動預(yù)警進(jìn)行干預(yù)。舉個例子，比如圖中的場景，通過攝像頭的圖像識別檢測到工人的操作不規(guī)范，會通過光效和音效的預(yù)警來進(jìn)行行為干預(yù)

2.2 推送建議

是基于你的愛好去推送不同的內(nèi)容

2.3 意圖預(yù)判

感知之后去預(yù)判，你接下來會做什么。比如上圖，當(dāng)系統(tǒng)之前感知到用戶粘貼了地址和電話信息，那么系統(tǒng)就預(yù)判你是不是要寄快遞

2.4 自動決策

比如陀螺儀識別用戶將設(shè)備傾斜了多少度，將屏幕做自動關(guān)屏

那么前面講述的是決策層的第一大板塊，那么現(xiàn)在講第二板塊，也就是設(shè)計表達(dá)影響因子模型。簡單來說，就是我已經(jīng)決策完成，那么我怎么去做決策和輸出，受那些變量因子影響呢

那么這里也抽象為三大類變量因子，用戶感官因子，環(huán)境因子，設(shè)備因子。

比如在【用戶感官因子】上，會去分析，用戶當(dāng)前的認(rèn)知負(fù)荷是什么樣的，如果當(dāng)前是在黑暗的情況下，用戶的視覺負(fù)荷比較大的話，那么設(shè)計表達(dá)是不是就應(yīng)該以聽覺和觸覺為主。同時我們還會去分析用戶是運(yùn)動狀態(tài)還是靜止?fàn)顟B(tài)，如果是運(yùn)動狀態(tài)那么在設(shè)計的時候是不是需要考慮，字體是不是需要更大，方便用戶獲取信息等等案例。

【環(huán)境因子】就是環(huán)境光線的強(qiáng)弱，噪聲的大小等等，比如設(shè)計的時候，是在室外，光線比較強(qiáng)的環(huán)境，那么設(shè)計的界面對比度是不是就得更強(qiáng)。

【設(shè)備因子】就是傳統(tǒng)設(shè)計當(dāng)中，他的輸入通道是物理按鍵，還是觸屏，還是語音，手勢這些，以及輸出通道，有沒有喇叭，指示燈等等。這些都會影響我們采用怎樣的方式去進(jìn)行設(shè)計表達(dá)。

那么第三層就是我們最熟悉的表達(dá)層，也就是具體的交互執(zhí)行。常用的表達(dá)方式主要有界面，音效，光效，觸覺，動作這幾類，這些大家都很熟悉，這里就不做詳細(xì)的講解。

那智能感知交互依賴的技術(shù)和條件也是比較多的，所以他是分企業(yè)分階段發(fā)展的。那么這里主要分為5個等級。從無智能到完全智能，那么目前呢主要處在中間C2這個條件智能的階段中。簡單來說就是機(jī)器自動感知部分情景，再加上人的輔助輸入，讓系統(tǒng)完成任務(wù)。

03 智能感知設(shè)計應(yīng)用

那么前面說這些都是偏理論偏框架類的，那么下面我會結(jié)合案例具體講解智能感知交互是怎樣去落地使用的

那么當(dāng)有了模型框架后怎樣應(yīng)用呢，首先，離不開設(shè)計流程，和傳統(tǒng)設(shè)計流程類似，智能感知交互的設(shè)計流程也為：【發(fā)現(xiàn)一個機(jī)會點(diǎn)，制定對應(yīng)的設(shè)計策略，然后定義具體的設(shè)計表達(dá)，持續(xù)監(jiān)測進(jìn)行迭代和優(yōu)化。】這樣構(gòu)成，那么大家就會想了，那我們的不同之處在哪呢？這其實(shí)離不開設(shè)計對于技術(shù)的洞察力，我們設(shè)計對于技術(shù)的了解和應(yīng)用其實(shí)貫穿在全流程中。

比如說，在我們在做UED設(shè)計中，發(fā)現(xiàn)痛點(diǎn)時，我們可以通過問卷調(diào)研，訪談?wù){(diào)研獲得用戶的主觀數(shù)據(jù)，也可以通過埋點(diǎn)檢測獲得用戶的行為數(shù)據(jù)，而我們在優(yōu)化的時候，除了從設(shè)計側(cè)出發(fā)的體驗(yàn)優(yōu)化，那是不是可以不給自己設(shè)立邊界，比如從技術(shù)出發(fā)，讓算法自身不斷學(xué)習(xí)，讓準(zhǔn)確率有所提升。帶著這樣的不同，我來舉一個案例。

案例介紹：一塊沙琪瑪?shù)囊簧?

這塊沙琪瑪出生在一個非常傳統(tǒng)的食品供應(yīng)鏈公司，她從出生出來到被運(yùn)送到客戶手中，會經(jīng)過4個空間，12個節(jié)點(diǎn)。而在這層層的校驗(yàn)中，當(dāng)我們想知道沙琪瑪?shù)馁|(zhì)量，生產(chǎn)日期，和他的位置，需要的是員工的手動介入和對于條形碼的掃描，

但我想更精細(xì)化的知道沙琪瑪具體的信息來進(jìn)行更好的數(shù)字化管理，那就變得非常困難。所以我們在想，怎么可以讓對沙琪瑪?shù)墓芾恚兊酶斆饕恍┠?，那改變這傳統(tǒng)模式的機(jī)會，就來自于識別技術(shù)的發(fā)展。

那么現(xiàn)在已經(jīng)運(yùn)用起來這樣的技術(shù)了，一些商場的衣服和商品上都會有RFID標(biāo)簽，比如優(yōu)衣庫，在進(jìn)行結(jié)賬時只要將多件商品投送到結(jié)賬框中，就可以一次性識別多個商品完成結(jié)賬，這就是RFID的優(yōu)勢，他可以完成一對多的批量識別，并且具有更大的識別范圍，識別過程中不需要設(shè)備和條碼直接對視。

那我們就要想了，如果每個沙琪瑪都有一個RFID碼，那我們是不是就可以批量無感知的識別他們了呢。帶著這樣的技術(shù)優(yōu)勢，我們來回顧整個操作流程，我們發(fā)現(xiàn)，在圍繞沙琪瑪?shù)囊粚右粚有ｒ?yàn)中，已我剛剛提到的【行為干預(yù)、意圖預(yù)測、自動決策和推送建議】四個角度來找到更智能的優(yōu)化點(diǎn)，比如說，當(dāng)沙琪瑪從車間生產(chǎn)出來，即將被打包的時候，我們?nèi)绻l(fā)現(xiàn)了一個異常，可以怎么處理呢，大家覺得~~~~我們是不是可以進(jìn)行一個行為干預(yù)，來將這個異常及時的告知給用戶，又或者，我們可以進(jìn)行一個自動決策 ，我們通過自動化設(shè)備，來吧出現(xiàn)異常的商品進(jìn)行自動剔除。

那由于整個鏈路太長，所以我現(xiàn)在呢，以沙琪瑪離開倉庫的最后一個校驗(yàn)環(huán)節(jié)為例，來做展開

這個時候，用戶拖著托盤，來到月臺，準(zhǔn)備將沙琪瑪裝上卡車，這個時候，如果沙琪瑪上錯了車，那我們就非常難以將他追溯回來了。所以這個時候，用戶的意圖是非常清晰的，那就是及時的阻止這個異常的商品流出倉庫。但我們知道了，那下一步呢，就是讓機(jī)器也知道這一個意圖，其實(shí)在這個場景下非常簡單，無非是，某人在某場景下做出了某個行為，而這個場景下我們可以通過員工的賬號ID來獲取的員工的身份，

我們也可以通過設(shè)備上在運(yùn)行的秘鑰來獲得當(dāng)前的實(shí)操場景是什么，

還能通過RFID的天線，他所識別到的信號逐漸增強(qiáng)，來發(fā)現(xiàn)，啊確實(shí)有一個用戶，在拖著商品逐漸靠近，那以上這三個條件，就可以觸發(fā)我們對于托盤上的貨物的識別來判斷，他上的車是不是對的呢，數(shù)量是不是準(zhǔn)確呢，一旦發(fā)現(xiàn)異常，我們就需要將信號及時的傳給用戶

那下面問題就來了，我們該怎么表現(xiàn)這個異常，剛才也提到，我們設(shè)計的表達(dá)是多種多樣的，有界面內(nèi)的，界面外的，環(huán)境空間的。而用戶接收的渠道卻非常的單一，無非是，視覺、聽覺、觸覺、甚至以后可能會有嗅覺。

怎樣選擇合適的感官通道

所以我們在定義一個合適的表達(dá)方案的時候，就需要考慮到當(dāng)下用戶、環(huán)境、設(shè)備的影響因素，那在我們的場景中，我們應(yīng)該怎樣選擇一個合適的感官通道來傳遞這個異常信號呢

這就需要我們清晰的了解，在這個場景下，每一個感官通道被占用的情況，這樣我們才能選擇其中占據(jù)優(yōu)勢的那些來做出我們的設(shè)計表達(dá)

為此，我們總結(jié)過往一些學(xué)術(shù)研究，來將用戶、環(huán)境、設(shè)備他具體的影響程度進(jìn)行數(shù)值化。比如對于用戶的限制，我們采用VACP的工作負(fù)荷模型來量化用戶的各個通道上認(rèn)知資源被占用的程度。而對于用戶自身的能力限制，我們通過劍橋大學(xué)提出的一個無障礙公式，來計算用戶自身能力限制的程度，同樣，我們綜合國內(nèi)一些常見的標(biāo)準(zhǔn)，來將環(huán)境因素，例如，亮度、噪聲、和設(shè)備自身的表達(dá)能力進(jìn)行等級的劃分。那大家就要好奇了，那要數(shù)值化，那數(shù)值化靠譜嗎，我們怎么做這個數(shù)值化呢？

那我以VACP工作負(fù)荷模型來做一個簡單的展開，他起源與1984年，對于飛行員在駕駛飛機(jī)的一個觀察和研究。研究者將他劃分為視覺、聽覺、認(rèn)知、運(yùn)動四個維度。同時呢，對于不同難度系數(shù)的任務(wù)，劃分了不同對資源程度占用不同的等級，這樣，我們就可以像查閱字典一樣，來根據(jù)我們需要的任務(wù)表現(xiàn)，找到這個通道上對應(yīng)具體的占用程度

回到我們剛才的場景，當(dāng)用戶拖著托盤靠近的時候，他需要時刻注意眼前的道路，避免和其他物品碰撞，這個時候，視覺上他對物體的追蹤和跟隨，這個時候呢，在視覺上通道上他會有77%的占用情況

而聽覺上，雖然他不需要聲音來辨別道路，但在這個過程中，有可能有小組長會叫他說，唉，你過來以下，那這樣我們就需要做一個聲音的辨認(rèn)，那在聽覺通道上，可能會有14%的占用程度

而在月臺上，時刻會有運(yùn)輸與發(fā)動機(jī)的聲音，這個大約在70分貝的噪聲，會給用戶在聽覺上有個二級的干擾作用

綜合來看，首先，我們對用戶在觸覺上的反饋通道就被阻斷了，因?yàn)樵O(shè)備端離用戶實(shí)在太遠(yuǎn)了，無法進(jìn)行一個觸覺上的反饋，

而剩下的視覺通道已經(jīng)被高度占用了，他的有效性是較為有限的。而在聽覺上，雖然他的占用程度沒這么高，但他收到了環(huán)境噪聲的二級干擾，所以我們單一的通過視覺或者聽覺都不足以達(dá)到一個有效的反饋?zhàn)饔谩?

好在現(xiàn)在用戶的認(rèn)知還是比較充沛的，所以呢，我們可以通過視覺、聽覺、認(rèn)知三個通道上的整合，來做一個比較有效的反饋。

也就是，當(dāng)用戶靠近時，首先，她會在聽覺上聽到蜂鳴器的報警，

然后呢，他的注意力就被抓到了燈光的閃爍模式上。，他從他的記憶中記得的燈光的三種閃爍模式上，辨識到了這個閃爍意味著說：這個閃爍，標(biāo)識著我現(xiàn)在拉得沙琪瑪品類有問題，那我要好好的檢查一下。那我們的反饋呢，就成功的達(dá)成了

清晰的視覺表達(dá)

那除了剛剛提到的，多感官的反饋，我們在對于界面的設(shè)計上，也考慮到了多因素的影響

那第一個就是大家相當(dāng)熟悉的視覺距離，在我們的生活場景中，，有手持設(shè)備的近視距，也有推動設(shè)備的中視距，還有推動大型設(shè)備上走向通道門的，遠(yuǎn)達(dá)130厘米的遠(yuǎn)視距

那面對這樣不同的視覺距離，和用戶靜態(tài)或者動態(tài)的移動狀態(tài)，我們推導(dǎo)了計算文字高度和文字字號的公式，

然后計算這樣的視覺距離和運(yùn)動速度的不同，來對關(guān)鍵信息做突出化的展示，保證用戶在看到關(guān)鍵信息時他的清晰度。那大家可以想想，除了視覺的距離以外，還有什么因素會影響到視覺的表達(dá)呢，

那就是環(huán)境的亮度。在我們的場景內(nèi)，盡管有部分都是在室內(nèi)發(fā)生，但也有部分是在室外發(fā)生，就比如我們舉的沙琪瑪?shù)睦?，他是在月臺發(fā)生的場景，那這個時候，就需要我們在色彩的設(shè)計上，去考慮到環(huán)境亮度的影響，

我們基于 W3C,對于色彩對比度的分析，然后定義了我們的配色方案，在對于室外的環(huán)境，我們會采用色彩對比度較高的配色方案，而到了室內(nèi)呢，我們會動態(tài)的將色彩對比度降低，避免用戶長時間注視對比度高的界面，造成視覺疲勞

那既然有設(shè)計方案，那自然就有效果評估，

我們將智能感知設(shè)計的評估，分為主觀和客觀兩個部分，主觀就是大家比較熟悉的，比如我們感知的這個情景是否準(zhǔn)確，能不能夠幫助用戶提高效率呢，整個感受是不是愉悅的，是不是有效的，那么這一塊我們是通過李克特5點(diǎn)量表問卷，和SAM問卷來進(jìn)行度量，另外一部分則是客觀部分，這一部分我們通過對于算法模型的評估指標(biāo)來進(jìn)行度量，比如他的準(zhǔn)確率，召回率，精準(zhǔn)率來評估他的算法是否可以不斷學(xué)習(xí)和進(jìn)步。

思考：如何將智能感知更多的應(yīng)用到產(chǎn)品設(shè)計中？

那智能感知交互的分享就到這里，這里我衍生一下，從剛才的案例中，主要都是實(shí)操類的，那么我們是不是可以做個衍生，將智能感知設(shè)計的思路方法也延用到產(chǎn)品設(shè)計中呢，比如現(xiàn)在的抖音，頭條，他們?nèi)シ治鑫覀兊南埠?，主動的替我們進(jìn)行篩選，于是在使用產(chǎn)品的時候，我們可以說是被動的看內(nèi)容，被動的看到商品被吸引然后下單。那么B端產(chǎn)品也可以以此類推，傳統(tǒng)模式下，是人登錄后臺，主動去找任務(wù)，那么在這里，我們是否可以換個思路，任務(wù)主動來找人，通過感知到用戶的身份，我們來主動檢測，他所關(guān)注的任務(wù)的進(jìn)度，并且在這個任務(wù)落后的時候，主動發(fā)出預(yù)警和提示，真正的提升用戶的管理效率。

作者：咖喱先森
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司