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

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

01

了解對(duì)話框

1、對(duì)話框定義

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

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

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

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

2、對(duì)話框分類

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

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

△ 何時(shí)使用模態(tài)對(duì)話框

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

02

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

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

1、屬性對(duì)話框

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

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

2、功能對(duì)話框

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

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

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

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

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

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

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

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

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

4、通知對(duì)話框

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

常見的有通知中心對(duì)話框，處理完成某個(gè)操作的告知等等。

例如：花瓣的通知提醒

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

5、公告對(duì)話框

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

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

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

03

怎么讓公告對(duì)話框“名聲鵲起”

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

1、應(yīng)用方面

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

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

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

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

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

• 
  提高可見性，用戶可自主糾錯(cuò)

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

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

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

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

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

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

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

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

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

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

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

對(duì)話框使用場景

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

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

模態(tài)彈框會(huì)打斷用戶當(dāng)前操作流程，所以「使用對(duì)話框要克制」?？傇瓌t是：能在界面展示就不用彈框，能用非模態(tài)彈框的就不要用模態(tài)彈框?？傊?，重要的信息優(yōu)先考慮使用對(duì)話框。

具體的使用原則有：

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

清晰且友好的文案

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

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

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

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

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

△ 錯(cuò)誤提示設(shè)計(jì)三步法

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

總結(jié)：

對(duì)話框可以成為幫助用戶完成目標(biāo)的有用助手，而不是讓他們?cè)诿恳徊讲偈卮鞌〉目膳陆O腳石。通過保持對(duì)話框的可管理性，并且只有在他們的功能真的屬于另一個(gè)房間的情況下才調(diào)用他們，你將很好地維持用戶的工作流狀態(tài)，保證他們會(huì)成功完成任務(wù)，并且滿懷感激。

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

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

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

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

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

前言

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

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

打造好玩好逛的科技廟會(huì)

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

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

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

來場對(duì)“科技廟會(huì)”的探索

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

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

定調(diào)

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

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

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

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

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

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

品牌字體

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

品牌圖形

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

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

品牌IP

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

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

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

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

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

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

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

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

燈籠

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

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

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

剪紙

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

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

爆竹

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

團(tuán)扇

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

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

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

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

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

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

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

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

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

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

年俗文化鏈通全局

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

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

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

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

[更生活]

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

[更簡單]

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

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

[更生動(dòng)]

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

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

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

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

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

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

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

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

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

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

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

01、前言

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

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

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

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

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

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

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

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

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

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

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

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

首先，莫奈的主要使用者為各個(gè)項(xiàng)目的產(chǎn)品經(jīng)理及開發(fā)工程師，其中設(shè)計(jì)師也有相當(dāng)大的使用強(qiáng)度，這三類用戶他們直接使用莫奈，并把莫奈作為解決數(shù)據(jù)可視化場景構(gòu)建相關(guān)需求的主要工具和方案，所以，以上三類用戶，我們將其稱之為莫奈的核心用戶。核心用戶使用莫奈產(chǎn)出的作品，經(jīng)由上下游同事傳達(dá)和部署給業(yè)務(wù)方及客戶后，莫奈的商業(yè)價(jià)值便得以體現(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à)值和特色，通過核心用戶使用莫奈交付的結(jié)果來證明莫奈的可靠。與此同時(shí)，我們也通過對(duì)內(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)升級(jí)的系統(tǒng)性工作，為了更全面的了解用戶體驗(yàn)痛點(diǎn)，我們還是設(shè)計(jì)了一次完整的用戶調(diào)研活動(dòng)。本次調(diào)研主要采用線上問卷調(diào)研、線下訪談+用戶行為觀察的方式進(jìn)行。線上問卷采用京東良研問卷系統(tǒng)，除了面向核心用戶推送，我們還面向莫奈主流用戶及邊緣用戶推送了問卷內(nèi)容，因此，問卷調(diào)研整體覆蓋較為全面。線下訪談除了邀請(qǐng)部分核心用戶，我們也從問卷系統(tǒng)中篩選了部分反饋問題多且愿意參加線下訪談的用戶參與。線上線下均包含內(nèi)外部用戶，以期獲得更加客觀真實(shí)的反饋。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在設(shè)計(jì)問卷的環(huán)節(jié)我也提到過我們的問卷在PSSUQ量表的基礎(chǔ)上針對(duì)本次調(diào)研目標(biāo)做了部分調(diào)整和優(yōu)化，而線上問卷最后兩個(gè)選項(xiàng)以問答題的形式向被調(diào)研用戶提供了對(duì)莫奈各方面建議的反饋渠道，通過問答項(xiàng)我們收集到用戶反饋的各類問題80多條，我們采用親和圖對(duì)這些反饋?zhàn)稣?，親和圖顧名思義，它可以使具有類似特征和關(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ù)需求，減少組件二開成本，提高交付效率。針對(duì)這兩個(gè)大的問題點(diǎn)，首先，對(duì)于那些能夠在當(dāng)前產(chǎn)品日常迭代中優(yōu)化的點(diǎn)，我整理后會(huì)以需求的方式向產(chǎn)品團(tuán)隊(duì)提出，并在日常迭代中逐步優(yōu)化；然后，對(duì)于那些需要“傷筋動(dòng)骨”做底層優(yōu)化以及長期運(yùn)營沉淀才能有效改善的問題，我們會(huì)進(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í)行時(shí)，我們也邀請(qǐng)了部分在線上問卷反饋中描述模糊不清、難以理解，需要面對(duì)面交流或者演示才能理解的問題的用戶。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

15、視覺改版：造形演繹

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

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

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

16、視覺改版：色彩搭配

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

17、視覺改版：字體選取

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

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

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

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

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

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

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

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

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

20、視覺改版：動(dòng)效設(shè)計(jì)

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

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

首頁科技感流光氛圍動(dòng)效

頁面及大屏加載Loading動(dòng)畫

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

產(chǎn)品登錄頁

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

我的可視化頁面改版前后對(duì)比

大屏模板頁面

可視化場景編輯器頁面

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

新建大屏作為創(chuàng)建數(shù)據(jù)可視化場景的第一步，它的易用與否直接給了用戶最直觀的對(duì)莫奈的第一感受。對(duì)于新建大屏的交互優(yōu)化主要有三個(gè)方面：創(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í)添加一個(gè)不可跳過的步驟著實(shí)讓人不爽，況且大屏創(chuàng)建成功之后在多個(gè)位置有多種方式都能便捷的修改大屏名稱，因此，更快速的進(jìn)入編輯器開始設(shè)計(jì)創(chuàng)作才是用戶創(chuàng)建可視化最根本的目標(biāo)，所以，拿掉“命名流程”，顯然可以讓整個(gè)交互的過程更加流暢。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

視覺的形成

感受光（電磁波）

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

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

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

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

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

識(shí)別物體

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

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

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

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

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

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

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

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

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

視覺疲勞/傷害

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

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

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

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

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

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

視角范圍

1. 水平方向

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

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

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

2. 垂直方向

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

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

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

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

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

聽覺的形成

感知范圍

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

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

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

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

響度

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

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

對(duì)音色的辨識(shí)和記憶

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

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

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

辨別方向

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

粗糙的聲音

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

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

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

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

聚焦效應(yīng)

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

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

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

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

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

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

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

觸覺的形成

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

作用

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

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

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

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

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

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

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

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

頭部/頸椎

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

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

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

腰部/腰椎

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

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

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

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

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

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

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

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

手指/手掌

1. 拇指動(dòng)作幅度

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

2. 其他手指動(dòng)作幅度

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

3. 手指觸控

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

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

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

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

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

4. 手指擊鍵

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

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

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

5. 單手操作

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

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

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

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

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

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

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

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