2023-3-2 博博
莫奈是一款主要服務(wù)京東內(nèi)部用戶的數(shù)據(jù)可視化平臺，它以容器的形式將京東城市各種與智慧城市建設(shè)及運營相關(guān)的能力聚合，并以可視化的形式面向客戶呈現(xiàn)。
作為京東莫奈的設(shè)計負(fù)責(zé)人，過去三年一直負(fù)責(zé)莫奈可視化平臺的用戶體驗設(shè)計工作，由于本人日常設(shè)計主要以智慧城市、數(shù)據(jù)可視化大屏為主，所以我即是莫奈的設(shè)計負(fù)責(zé)人也是莫奈的深度使用者或者說專家用戶。在長期使用莫奈的過程中，本人梳理了大量與視覺、體驗相關(guān)的問題，這些問題，部分在產(chǎn)品日常迭代中得到了優(yōu)化，但是也有相當(dāng)一部分解決起來具有一定的難度和成本；與此同時，作為用戶體驗設(shè)計師，我日常與業(yè)務(wù)方、客戶方以及用戶接觸緊密，所以在與大量用戶溝通后，也從用戶側(cè)收集了不少使用體驗相關(guān)的問題。我對以上兩個渠道的問題整體梳理匯總，并與產(chǎn)品側(cè)討論溝通后，大家認(rèn)為這些問題比較嚴(yán)重的影響了用戶使用莫奈的效率，降低了莫奈對業(yè)務(wù)側(cè)賦能的質(zhì)量，提高了客戶使用莫奈的成本。所以我們必須規(guī)劃出一個產(chǎn)品迭代的周期，針對莫奈體驗問題，進行一次密集的優(yōu)化和革新，這便是本次莫奈體驗升級改版的基礎(chǔ)背景和原因。
本篇文章寫作的主要目的，是想將本人在這次改版設(shè)計中用到的一些方法、流程和經(jīng)驗與大家做次交流和分享，希望能為同行在類似的改版設(shè)計中提供一定的借鑒和參考。
實際上，在梳理出整個體驗升級流程之前，通過與產(chǎn)品負(fù)責(zé)人的多次溝通，我們事實上已經(jīng)對體驗升級這個需求達成了共識，而流程圖解決的是做什么、怎么做的問題。
下圖展示的這套體驗升級流程較為通用，大多數(shù)產(chǎn)品的體驗升級都可參考下面的流程執(zhí)行。
這套流程的主要作用有兩個，一是通過它可以更直觀的跟產(chǎn)品負(fù)責(zé)人、開發(fā)負(fù)責(zé)人等關(guān)鍵角色溝通，讓大家對體驗升級這件事兒有整體且全面的了解，方便大家評估工時、預(yù)估成本和安排排期；另一方面也能夠使我自己的工作推進的更加有節(jié)奏有條理，避免工作內(nèi)容長時間停滯在某一個環(huán)節(jié)而影響整體進度。
基于STAR法則，背景概況部分向大家介紹莫奈體驗升級的必要性。在企業(yè)中，想要推動一個需求順利執(zhí)行，那一定是需求上下游以及相關(guān)方的利益都得到了體現(xiàn)和滿足。莫奈此次升級，從體驗設(shè)計師角度來講，我們作為用戶的代言人，在了解到用戶大量反饋和建議后，有責(zé)任將用戶的聲音轉(zhuǎn)化為需求，并推進落地為產(chǎn)品的一部分；從產(chǎn)品團隊來講，莫奈想要不斷發(fā)展，持續(xù)為客戶和業(yè)務(wù)方帶來顯著的效率提升、明顯的成本下降，也必須對過去老舊的產(chǎn)品架構(gòu)做一次深度的革新和優(yōu)化；從前端工程師、研發(fā)同學(xué)的角度看，以往不合理的底層代碼設(shè)計，使產(chǎn)品在性能、穩(wěn)定性等方面留有大量隱患，因此在日常迭代工作之外，研發(fā)同學(xué)總要消耗部分精力去維護那部分不穩(wěn)定的存在，從而導(dǎo)致研發(fā)同學(xué)人效比低、開發(fā)體驗差；從上級Leader來看，公司的核心經(jīng)營理念是“成本、效率、體驗”，但成本的降低、效率的提升、體驗的優(yōu)化都依賴于強悍的技術(shù)和優(yōu)秀的產(chǎn)品，而莫奈此次體驗升級正是踐行公司核心理念的有效嘗試，綜上，此次體驗升級于多方有益，符合部門整體利益，所以大家很快達成共識。
通常我們說用戶體驗時，用戶是一個群體的概念，而這個群體如上圖所示，可以被進一步細分為多種角色，理想情況是每一類角色的體驗都被滿足，但現(xiàn)實執(zhí)行中我們必須要有策略和取舍。所以要想產(chǎn)品有好的體驗，首先我們要知道用戶群體中不同角色對產(chǎn)品的使用情況如何，并找到對產(chǎn)品依賴度強使用頻次高的那部分用戶和場景，然后針對他們以及他們使用的場景做高優(yōu)先級的優(yōu)化。
從莫奈典型用戶使用場景可以歸納出：
首先，莫奈的主要使用者為各個項目的產(chǎn)品經(jīng)理及開發(fā)工程師，其中設(shè)計師也有相當(dāng)大的使用強度，這三類用戶他們直接使用莫奈，并把莫奈作為解決數(shù)據(jù)可視化場景構(gòu)建相關(guān)需求的主要工具和方案，所以，以上三類用戶，我們將其稱之為莫奈的核心用戶。核心用戶使用莫奈產(chǎn)出的作品，經(jīng)由上下游同事傳達和部署給業(yè)務(wù)方及客戶后，莫奈的商業(yè)價值便得以體現(xiàn)。
其次，每類用戶使用莫奈不同功能模塊的頻次不同。從使用場景中我們也發(fā)現(xiàn)，莫奈的使用具有上下游的關(guān)聯(lián)性，核心用戶處于流程的下游，中上游的用戶雖不是核心用戶，但他們因為更接近客戶和業(yè)務(wù)，往往具有比核心用戶更高的決策權(quán)。因此我們優(yōu)先讓核心用戶體驗提升并不意味著放棄上游的體驗，而是資源有限的情況下我們的工作必須有取舍有重點。實際上我們是通過建立核心用戶的聲量和口碑來向上游用戶傳達莫奈的價值和特色，通過核心用戶使用莫奈交付的結(jié)果來證明莫奈的可靠。與此同時，我們也通過對內(nèi)外的宣講和培訓(xùn)，持續(xù)接收上游用戶的反饋，并在迭代中持續(xù)優(yōu)化。
知道了核心用戶是誰，那么核心用戶的體驗痛點是什么呢？
雖然在日常的交流溝通中我們已經(jīng)獲取了不少用戶反饋、收集了相當(dāng)?shù)膯栴}建議，但作為體驗升級的系統(tǒng)性工作，為了更全面的了解用戶體驗痛點，我們還是設(shè)計了一次完整的用戶調(diào)研活動。本次調(diào)研主要采用線上問卷調(diào)研、線下訪談+用戶行為觀察的方式進行。線上問卷采用京東良研問卷系統(tǒng)，除了面向核心用戶推送，我們還面向莫奈主流用戶及邊緣用戶推送了問卷內(nèi)容，因此，問卷調(diào)研整體覆蓋較為全面。線下訪談除了邀請部分核心用戶，我們也從問卷系統(tǒng)中篩選了部分反饋問題多且愿意參加線下訪談的用戶參與。線上線下均包含內(nèi)外部用戶，以期獲得更加客觀真實的反饋。
用戶調(diào)研的核心目標(biāo)是充分收集用戶反饋，并將反饋結(jié)果量化及系統(tǒng)化，量化后的結(jié)果可做為設(shè)計側(cè)推動產(chǎn)品執(zhí)行體驗優(yōu)化的關(guān)鍵依據(jù)，也可以作為后續(xù)驗證優(yōu)化結(jié)果的對照項。
本次問卷設(shè)計我們參考了PSSUQ整體可用性量表，并結(jié)合本次調(diào)研目標(biāo)做了部分調(diào)整。
PSSUQ整體可用性量表可以從系統(tǒng)易用性、信息質(zhì)量、界面質(zhì)量三個方面將體驗結(jié)果量化，然后通過與行業(yè)基本經(jīng)驗值比較，既可以知道用戶對莫奈在以上三項的滿意度，也可對莫奈當(dāng)前整體體驗結(jié)果有一個全局的概況性評價。同時根據(jù)三個方向的評分也可以更細致的指導(dǎo)后續(xù)的設(shè)計優(yōu)化方向，為設(shè)計決策提供更多科學(xué)可信的依據(jù)。
PSSUQ整體可用性量表作為一個通用模版，其內(nèi)容比較固定，為避免多次打擾用戶，提升問卷調(diào)研效率，我在PSSUQ的基礎(chǔ)上添加了少量關(guān)鍵信息甄別、用戶反饋積極性識別類問題，從而使問卷內(nèi)容更加符合本次調(diào)研目標(biāo)。
問卷設(shè)計好之后，接下來就是問卷發(fā)放以及結(jié)果分析了。
PSSUQ量表內(nèi)每個問題均有8個選項，【1-7】是對該項描述的認(rèn)可程度，得分越低代表用戶對該項描述越認(rèn)可；【NA】代表用戶對該項描述無法評價。本次調(diào)研通過京東良研發(fā)放線上問卷100份，共收到有效問卷反饋87份（大于PSSUQ所需的最少樣本數(shù)量：20），說明問卷結(jié)果具有較好的可信度，其結(jié)果值得進一步研究。
通過整理和統(tǒng)計問卷數(shù)據(jù)，可以得出以下結(jié)論：
1、內(nèi)外部用戶在系統(tǒng)易用性、信息質(zhì)量、界面質(zhì)量三個維度對莫奈均不滿意
2、對比行業(yè)經(jīng)驗值（均值），莫奈系統(tǒng)總體體驗質(zhì)量與行業(yè)同類產(chǎn)品存在明顯差距
3、莫奈用戶群體整體積極性較高，具有較強的溝通及反饋意愿
整體評分結(jié)果與日常同相關(guān)同學(xué)的溝通結(jié)果一致，以上評分結(jié)果也反映出此次體驗升級的緊迫性，作為由設(shè)計驅(qū)動的改版設(shè)計，設(shè)計側(cè)面臨較大壓力。
在設(shè)計問卷的環(huán)節(jié)我也提到過我們的問卷在PSSUQ量表的基礎(chǔ)上針對本次調(diào)研目標(biāo)做了部分調(diào)整和優(yōu)化，而線上問卷最后兩個選項以問答題的形式向被調(diào)研用戶提供了對莫奈各方面建議的反饋渠道，通過問答項我們收集到用戶反饋的各類問題80多條，我們采用親和圖對這些反饋做整理，親和圖顧名思義，它可以使具有類似特征和關(guān)聯(lián)屬性的問題更加臨近，從而將零散的問題被歸類，方便從雜亂的問題中找到規(guī)律，并通過比較不同類型問題的占比，更直觀的了解用戶反饋的問題主要集中在那些方向。
如下圖所示，產(chǎn)品的反應(yīng)速度及穩(wěn)定性、模板和組件豐富度是用戶反饋問題最集中的兩項，前者影響用戶最基礎(chǔ)的使用體驗，后者決定產(chǎn)品能多大程度上便捷的服務(wù)用戶。良好的穩(wěn)定性和反應(yīng)速度可以讓用戶專注于任務(wù)本身，而使用模板能最快速的產(chǎn)出作品，降低新手的使用門檻，豐富的組件能夠滿足用戶在各類復(fù)雜場景下的業(yè)務(wù)需求，減少組件二開成本，提高交付效率。針對這兩個大的問題點，首先，對于那些能夠在當(dāng)前產(chǎn)品日常迭代中優(yōu)化的點，我整理后會以需求的方式向產(chǎn)品團隊提出，并在日常迭代中逐步優(yōu)化；然后，對于那些需要“傷筋動骨”做底層優(yōu)化以及長期運營沉淀才能有效改善的問題，我們會進一步向用戶收集和完善相關(guān)信息，并將相關(guān)問題梳理到本次改版任務(wù)中，做系統(tǒng)的解決和處理。
在【05、體驗痛點分析-用戶調(diào)研部分】已經(jīng)介紹了本次參與訪談的用戶來源，但在實際執(zhí)行時，我們也邀請了部分在線上問卷反饋中描述模糊不清、難以理解，需要面對面交流或者演示才能理解的問題的用戶。
訪談先通過與用戶簡短的溝通了解用戶的崗位/職業(yè)以及使用莫奈的主要場景、頻次、設(shè)備等，然后通過給用戶設(shè)置一到兩個簡單的任務(wù)，觀察用戶在完成任務(wù)過程中的行為、表情、語氣等，以了解莫奈在一些典型使用場景下的易用性及可用性。比如，對于視覺設(shè)計師：請在畫布中添加一個條形圖，并將條形圖的顏色修改為綠色、激活縱軸輔助線、修改輔助線為虛線樣式....; 對于開發(fā)工程師：請在畫布中添加一個環(huán)形圖，并使用json為環(huán)形圖添加一組動態(tài)數(shù)據(jù)....。之后，在用戶完成基礎(chǔ)任務(wù)后，我們還會針對用戶關(guān)心的問題進行更細致的溝通，了解用戶更細致的反饋。對于用戶反饋的問題，我們整理后會在公司內(nèi)部的需求及研發(fā)管理系統(tǒng)“行云”中以需求的方式提交給產(chǎn)品團隊并同步添加反饋問題的用戶為該需求的關(guān)注者，后續(xù)，當(dāng)該需求的狀態(tài)有任何更新時，問題反饋者都能及時收到更新。如此，受訪者反饋的問題從需求提交到需求最終提測驗收，都能在線跟蹤并閉環(huán)。這樣做既是我們團隊的責(zé)任，也可以增進用戶對莫奈的信任，并期望活躍用戶后續(xù)能繼續(xù)為莫奈提供建議和反饋。
通過線上問卷調(diào)研及線下訪談，我們已充分了解了用戶心聲，接下來我們通過用戶體驗5要素模型，將各類問題進一步歸納并按照產(chǎn)品建設(shè)的上下游協(xié)作關(guān)系，把每一個具體的問題匯總給對應(yīng)的角色，并由對應(yīng)的角色產(chǎn)出具體的解決方案，然后通過線下會議同步各自方案并對方案進行評審和溝通，由此，關(guān)于體驗升級的所有事項及具體任務(wù)便可周密安排，之后便是資源投入、推進升級工作具體執(zhí)行。
用戶體驗5要素模型，從產(chǎn)品的戰(zhàn)略層出發(fā)，層層遞進直到表現(xiàn)層，把影響用戶體驗最根本的因素分層并可視化，借助這一模型可以讓大家對“用戶體驗”這個概念有更好的理解，并能促成大家在更大的層面上達成共識。以往談到用戶體驗，大家首先想到的是界面是否好看、交互是否流暢，然而一些對用戶體驗也有著重要影響但“不可見、不直觀”的因素卻往往被忽視，尤其對開發(fā)側(cè)同學(xué)更是如此，他們鮮有意識到產(chǎn)品的目標(biāo)、內(nèi)容以及性能等這類的因素，也是構(gòu)成用戶體驗的重要部分。對于莫奈這樣一款長期維護持續(xù)迭代的產(chǎn)品來說，好的用戶體驗并不能以“畢其功于一役”的方式來實現(xiàn)，而是要通過持續(xù)不斷的改進和優(yōu)化才能持續(xù)滿足并提升用戶體驗，所以借助用戶體驗5要素等模型，我們引導(dǎo)產(chǎn)品及研發(fā)團隊更好的理解用戶體驗，這樣不僅能幫助設(shè)計師在本次體驗升級改版工作中與大家高效協(xié)作，也非常益于之后日常產(chǎn)品迭代的溝通與協(xié)作。
上一步，我們通過用戶體驗金字塔將體驗問題匯總并劃分給了不同的角色，之后各個負(fù)責(zé)人產(chǎn)出解決方案并與大家評審和溝通，而體驗升級方向正是基于大家對各類方案一致溝通后達成的共識和結(jié)果，體驗升級方向以設(shè)計為主導(dǎo)，同時兼顧產(chǎn)品和研發(fā)的部分目標(biāo)，我們用5個短句將五個升級方向概括，每個方向盡量解決一個維度的問題，比如“界面視覺質(zhì)量提升”解決表現(xiàn)層的問題、“信息層級優(yōu)化”解決框架層的問題。體驗升級方向作為對體驗升級結(jié)果的導(dǎo)向，將指導(dǎo)后續(xù)設(shè)計動作的展開。
基于體驗升級方向，接下來就要制定具體的設(shè)計策略，來實現(xiàn)體驗升級方向中要達成的結(jié)果。設(shè)計策略制定第一步先確定設(shè)計目標(biāo)，我們將設(shè)計目標(biāo)拆解為三個方向，每個方向通過兩個關(guān)鍵詞定義。設(shè)計目標(biāo)主要分為視角與交互兩個方向，同時兼顧產(chǎn)品側(cè)“易拓展、易維護”的需求。實際設(shè)計中，視覺與交互并非獨自分開進行，在設(shè)計開始的階段，需要先定義設(shè)計風(fēng)格等基礎(chǔ)設(shè)計要素，之后視覺便可在此基礎(chǔ)之上全面展開，此時視覺設(shè)計要考慮交互的效果，交互設(shè)計也需要斟酌設(shè)計的展現(xiàn)。
對于設(shè)計目標(biāo)中關(guān)鍵詞所代表的那些抽象概念，每個人的認(rèn)知可能都不一樣，但是搜索引擎和大數(shù)據(jù)推薦的算法，可以告訴我們普通大眾對那些關(guān)鍵詞所表現(xiàn)出來的意象是如何認(rèn)知的，之后我們便可從符合大家普遍認(rèn)知的視覺素材中，提取出符合關(guān)鍵詞所表達出的意象的設(shè)計要素，之后通過在設(shè)計中應(yīng)用這些設(shè)計要素，就能把關(guān)鍵詞定義的抽象的設(shè)計概念轉(zhuǎn)化為具象的認(rèn)知，我把這個過程稱之為“抽象概念的可視化”。而“情緒版”是我完成上述工作的主要工具。
我們使用搜索引擎以及AI推薦的關(guān)聯(lián)算法，針對“科技和高效”這兩個視覺目標(biāo)的關(guān)鍵詞收集了海量的音視頻設(shè)計素材，把這些素材集合在一個畫布上形成“情緒版”，然后通過歸納這些素材共有的特點/要素，就能將體現(xiàn)“科技、高效”這兩個概念的所有設(shè)計要素剝離出來，并通過簡潔的文字加以描述和歸納。此后，我們通過在視覺設(shè)計執(zhí)行的過程中應(yīng)用這些設(shè)計要素，通過合理的搭配和組織，將這些設(shè)計要素融入到莫奈新的設(shè)計語言，如此，產(chǎn)品最終便可在視覺上呈現(xiàn)出與視覺目標(biāo)關(guān)鍵詞定義的一致的視覺和心理感受。
基于情緒版提煉出的設(shè)計要素其實已經(jīng)足夠具體，但是如何將這些要素應(yīng)用在設(shè)計中，我們還需要進一步歸納。我個人一直以來習(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)格和策略。
這種細分維度然后定義風(fēng)格的方式有多種優(yōu)勢，其中最明顯的是它能夠?qū)⑽覀冿L(fēng)格定義的設(shè)計工作條理化，避免反復(fù)嘗試和摸索造成的大量返工和思緒混亂，比如，如果我對質(zhì)感的定義有偏差，不符合情緒版中提取出來的設(shè)計要素的特點，這時候我只需要對“質(zhì)感”這個維度的風(fēng)格進行優(yōu)化和調(diào)整，而不需要推翻整個7要素重新再來。這種設(shè)計方式讓我的設(shè)計更加理性，也讓后續(xù)設(shè)計執(zhí)行的工作更加的有條理和舒適，從設(shè)計風(fēng)格落地的角度來講，這種方式我個人認(rèn)為是最能夠忠于情緒版所歸納出的設(shè)計感受的方法。
對于產(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)用戶個人中心、空間管理、使用幫助等菜單項。
對于這種異形的設(shè)計，用戶是否能夠接受，在設(shè)計開始時我存在一定的疑慮，因此在設(shè)計初稿定稿后我們邀請了部分用戶做了測試，大部分用戶認(rèn)為新的設(shè)計有創(chuàng)意具有鮮明的特點，也有部分用戶認(rèn)為透視的設(shè)計看著較為怪異，尤其是左側(cè)主導(dǎo)航的文字在添加透視效果后識別性存在一定的問題。因此針對用戶反饋我優(yōu)化了透視的角度，從多個透視數(shù)值中選擇了一個即能展示透視的設(shè)計效果、又不至于透視過大導(dǎo)致文本圖標(biāo)等變形嚴(yán)重而不易識別的角度，其次，我還配合開發(fā)同學(xué)對導(dǎo)航透視文本和圖標(biāo)的渲染做了一些優(yōu)化，從而使其具有更好的識別性和清晰度。在以上兩項優(yōu)化完成后，新的用戶測試表明大家對該設(shè)計的滿意度有很好的提升。
莫奈在改版之前就已經(jīng)有自己的品牌色，新的色彩升級圍繞“科技與高效”兩個關(guān)鍵詞，結(jié)合情緒版提取的設(shè)計要素，將原有品牌色做了細微的調(diào)整。首先藍色飽和度增加，綠色調(diào)整色相使其偏向藍色的一端并增加亮度。如此，當(dāng)兩個顏色搭配使用時，藍色作為主色調(diào)體現(xiàn)科技、可靠的視覺和心理感受；綠色作為點綴色和強調(diào)色，體現(xiàn)活力、高效與創(chuàng)新。藍綠對比強烈，具有很好的場景適應(yīng)性和品牌特色。
字體作為UI界面中最常見的元素以及作為信息呈現(xiàn)的主要載體，字體的使用對產(chǎn)品的易用性和視覺表現(xiàn)有著非常重要的影響。結(jié)合體驗升級方向中定義的“增強品牌特色”的目標(biāo)以及情緒版中提取的非襯線的設(shè)計要素，對于字體的設(shè)計風(fēng)格，我將其歸納為"定制化、品牌性和非襯線"。
為了實現(xiàn)字體風(fēng)格的設(shè)計目標(biāo)，我選取了兩款京東品牌的定制字體“京東朗正體”及“京東正黑體”。京東朗正體經(jīng)過多次迭代，目前具有豐富的字重和獨特的品牌特色，將該字體用于莫奈的品牌Logo，可以很好的體現(xiàn)京東的品牌特色并體現(xiàn)出與其它產(chǎn)品差異化的字體設(shè)計。京東正黑體主要用于莫奈產(chǎn)品中的數(shù)字、拼音、英語、數(shù)值符號四個場景，該字體也是京東金融APP的系統(tǒng)數(shù)字字體，其最大的特點是等寬、簡潔、緊湊具有很好的識別性與易讀性，并且該字體有較小的字符寬度，所以當(dāng)其用于大屏編輯器時，能夠在相同的空間下容納比其它字體更多的字符，而這個特點對于“寸土寸金”的屬性面板尤為重要。此外，該字體在作為數(shù)字字體使用時，其小數(shù)點、千分符等也具有很強的特色，具有不錯的辨識度與個性。
而產(chǎn)品中的中文字體Mac與Windows系統(tǒng)有不同的方案。在Windows下，由于系統(tǒng)自帶的微軟雅黑當(dāng)字號小于14pt時，字符在水平方向上存在明顯“參差不齊”的現(xiàn)象，加之該字體很少更新，沒有針對當(dāng)前高像素密度、高分辨率的屏幕特點做相關(guān)的適配優(yōu)化，所以在高分屏下，其字體邊緣會有明顯的鋸齒。之前在用戶調(diào)研中，有用戶反饋字體模糊不清、識別困難也是上述原因造成，所以Windows系統(tǒng)下莫奈界面字體選取了思源黑體，思源黑體是Adobe與Google聯(lián)合開發(fā)的開源字體，其字重豐富、字形簡潔、現(xiàn)代，能夠很好的適應(yīng)PC與移動端的顯示，也能適應(yīng)當(dāng)前已漸趨主流的高分屏，所以使用該字體能夠給用戶帶來不錯的信息呈現(xiàn)。除此之外，思源黑體的字形特點與MacOS系統(tǒng)下的蘋方字體相似，因而使用思源黑體在一定程度上也能夠保證用戶在不同平臺使用莫奈時體驗的一致性。
質(zhì)感的呈現(xiàn)主要通過色彩、透明度的變化、毛玻璃效果的模擬來實現(xiàn)，色彩與透明度的變化搭配毛玻璃效果使用，可以呈現(xiàn)科技、輕盈的質(zhì)感。
結(jié)構(gòu)設(shè)計主要目標(biāo)是組件化及原子化，莫奈最核心頁面是大屏場景編輯器，該頁面承載著可視化大屏由0到1構(gòu)建所需的大多數(shù)功能，也是莫奈產(chǎn)品日常迭代維護投入資源和成本最集中的模塊。以往編輯器的界面設(shè)計雖然也有不錯的設(shè)計規(guī)范，但是并沒有按照原子化、組件化的思路來考慮各類組件組合使用時的搭配問題，因此基于以往的設(shè)計規(guī)范，大屏編輯器頁面的產(chǎn)品需求總是需要UI產(chǎn)出設(shè)計稿研發(fā)才能開發(fā)，且由于沒有系統(tǒng)的梳理過編輯器頁面各種組件的類型，所以部分組件在同一頁面的不同位置存在不同的形態(tài)；還有一些組件，在具體頁面中的使用并不符合該組件的功能和用途，存在錯用亂用的情形，由此造成編輯器的界面設(shè)計、開發(fā)和維護都具有較高的成本。
新的改版設(shè)計，在設(shè)計之初就聯(lián)合產(chǎn)品對編輯器內(nèi)的各個模塊所包含的各類組件進行了梳理，通過將各個模塊的組件羅列出來，然后重新梳理組合、去重、合并之后，我們就可以知道當(dāng)前編輯器界面總共有哪些類型的組件，以及每類組件用在何處，而組件原子化后也通過間距規(guī)范、使用場景示例等方式解決了如何用的問題。
原子化的組件，精簡了組件的數(shù)量，同時每個組件也針對自身功能和用途的特點進行了優(yōu)化，在此過程中也考慮了組件搭配、組合使用的適配和呈現(xiàn)問題。比如，針對顏色選擇組件，我們默認(rèn)以十六進制展示顏色色值，并在色值后以百分比顯示該顏色的透明度，我們還在色值后面增加了色值預(yù)覽的小色塊，這樣的設(shè)計兼顧了開發(fā)與設(shè)計同學(xué)使用莫奈的場景。對于開發(fā)同學(xué)，他們在代碼中習(xí)慣使用十六進制色值，而設(shè)計師更習(xí)慣于RGBA或HSLA的調(diào)色模式，因此，雖然十六進制的色值也能包含透明度信息，但我們依然在顏色后面增加了百分比及小色塊，已幫助設(shè)計同學(xué)確認(rèn)顏色的正確性，此外我們還通過色彩顯示模式切換、自動輸入校正等手段，確保不管用戶輸入的顏色采用何種方式，最終屬性欄都是按照用戶設(shè)置的模式以統(tǒng)一的格式呈現(xiàn)。而諸如此類優(yōu)化，在本次體驗升級中不勝枚舉。
莫奈的動效設(shè)計主要有兩類，一類是用于頁面視覺效果營造的氛圍類點綴動效，另一類是用于功能及信息傳遞的交互類動效。兩類動效都通過“節(jié)奏感、輕盈”的設(shè)計風(fēng)格，傳遞科技、高效的視覺感受。
在本次動效交付中，為了保證動效的清晰度與流暢感、并減少動效的體積和提升動效加載速度，動效文件均采用Json代碼的形式交付前端，該類動效由瀏覽器在網(wǎng)頁端實時渲染，具有矢量動畫的特點，能適應(yīng)多種設(shè)備及屏幕分辨率，具有優(yōu)秀的前端呈現(xiàn)效果。
首頁科技感流光氛圍動效
頁面及大屏加載Loading動畫
針對視覺層面設(shè)計優(yōu)化后，接下來針對莫奈典型的用戶使用場景以及之前線上問卷、線下訪談中用戶反饋問題比較集中的一些場景進行交互層面的優(yōu)化，我們交互優(yōu)化的目標(biāo)是“簡單、流暢”。
首先進行交互優(yōu)化的是各類圖表的屬性及配置項設(shè)置相關(guān)的交互優(yōu)化。莫奈作為一款可視化場景搭建平臺，為用戶提供了各類型的圖表，每個圖表均具有“樣式、數(shù)據(jù)、交互”三大類配置屬性，這三大屬性，從圖表看起來是什么樣、圖表展現(xiàn)了什么數(shù)據(jù)、圖表可以與用戶進行那些互動三個維度解決了圖表在數(shù)據(jù)可視化呈現(xiàn)中最基礎(chǔ)的需求。由于圖表在數(shù)據(jù)可視化呈現(xiàn)中頻繁使用，所以與圖表配置相關(guān)的操作自然也是相當(dāng)高頻和常用。當(dāng)前版本下，圖表配置項主要問題有兩個：一個是圖表配置項層級過深，用戶需多次點擊才能對某一內(nèi)容進行修改；第二是批量對多個圖表的相同屬性進行修改在當(dāng)前版本不可用，導(dǎo)致用戶圖表配置成本高。針對用戶最關(guān)心最影響體驗的兩個交互問題，我的優(yōu)化方案如下。
要解決問題，首先要知道問題從何而來。經(jīng)過深入與產(chǎn)品、研發(fā)同學(xué)及部分用戶訪談溝通后，我發(fā)現(xiàn)當(dāng)前導(dǎo)致圖表配置項層級過深主要有兩個原因，分別是產(chǎn)品規(guī)劃與設(shè)計展現(xiàn)。
具體來講，產(chǎn)品層面有三個問題：
01、產(chǎn)品對于當(dāng)前圖表配置項的結(jié)構(gòu)梳理是以程序的邏輯來呈現(xiàn)，而非以用戶的視角來歸納。舉個栗子，在當(dāng)前版本如果用戶要修改柱狀圖某個柱子的顏色，操作路勁如下：樣式>數(shù)據(jù)系列>系列名稱>形狀設(shè)置>顏色設(shè)置。而這一路徑為何如此設(shè)計？因為顏色這個屬性的后端代碼就是這樣的結(jié)構(gòu)。這一路勁把用戶最易理解、最直觀的屬性名放到了路勁的末位，而在它之前呈現(xiàn)的內(nèi)容、名詞其實都有一定的理解難度，尤其對于新手更是如此！用戶想要更改顏色，Ta首先需要知道什么是數(shù)據(jù)系列、其次還要了解形狀設(shè)置可能包含哪些屬性等，正因具有一定的門檻且不直觀，所以用戶初次進行上述設(shè)置時往往需要在樣式一級菜單下點擊多個屬性、反復(fù)嘗試確認(rèn)，才能最終完成顏色修改的設(shè)置，這樣一個使用的流程自然會給用戶“層級過深”的感受
02、圖表配置結(jié)構(gòu)存在冗余、不夠精簡。還是上面那個栗子，用戶修改顏色需要觸達第5級。但是這種細致的分層分級的結(jié)構(gòu)設(shè)計是必要的么？答案是并不是！因為只有用戶關(guān)注的才是有用的，產(chǎn)品應(yīng)該提供用戶想要的內(nèi)容而不是強塞給用戶產(chǎn)品具有的所有的功能，所以我們沒有必要把圖表在后端具有的所有屬性都羅列出來，適當(dāng)?shù)膶ε渲庙椬鲂┚啠喜⒁恍┩惖膶傩浴⑷缓笸ㄟ^“更多”按鈕隱藏一些對圖表呈現(xiàn)無關(guān)緊要的內(nèi)容，如此，圖表配置項便能瘦身，用戶使用起來也更輕松。
03、圖表配置項的各個屬性，在屬性列表的排序沒有遵循用戶使用的頻次和習(xí)慣。排列在前面的屬性并非用戶最常用的那些，因此用戶要在列表中從上而下的“翻找”，這種使用過程中的頓挫感，一方面影響了用戶使用產(chǎn)品的效率，另一方面也加深了用戶“層級過深”的感受。
知道了問題從何而來，那么解決問題便也變的簡單。首先，我們聯(lián)合產(chǎn)品經(jīng)理，對莫奈已有的60多個各類圖表組件，逐個進行了配置項的梳理，當(dāng)所有圖表的配置項都以思維導(dǎo)圖的形式呈現(xiàn)時，他們的共同點、同類項便一目了然。此時，之前存在的“圖表配置結(jié)構(gòu)存在冗余、不夠精簡”的問題便可解決。而對于先前存在的01與03問題點，在上述梳理工作完成后有了一定的優(yōu)化和改善空間，但仍然存在一些不確定的因素影響設(shè)計和產(chǎn)品的決策。比如、“屬性列表中，哪些屬性是用戶最常用的”，類似這樣的問題我們通過訪談幾個用戶并不能得到可靠的結(jié)論，對此，一方面我們通過為配置項區(qū)域增加數(shù)據(jù)埋點，分析用戶對各個配置項使用的頻次來為后續(xù)的持續(xù)優(yōu)化提供決策支持，另一方面我們也參考、調(diào)研了同類產(chǎn)品中一些用戶量較大、設(shè)計質(zhì)量較高的產(chǎn)品來進行當(dāng)前有限的優(yōu)化。
配置項層級過深的另一個原因，是屬性配置列表的結(jié)構(gòu)及布局設(shè)計存在“深層級、空間利用率底”的特點。
如下圖，左側(cè)圖片示意了舊版莫奈的配置列表設(shè)計結(jié)構(gòu)。可以看到舊版設(shè)計完全采用樹結(jié)構(gòu)的形式將各項自上而下排列，并且采用每級向右縮進一個字符的形式來做層級的區(qū)分，舊版的設(shè)計基準(zhǔn)尺寸為1440PX，屬性配置欄本身較窄，而逐級縮進的策略更是導(dǎo)致信息展示困難；其次，樹狀的結(jié)構(gòu)在展開層級較多時，部分一級屬性會被擠到一屏之外，用戶需要頻繁滾動鼠標(biāo)滾輪才能看全信息，綜上，舊的設(shè)計策略也給了用戶“層級深”的直觀感受和交互體驗。
新版設(shè)計首先增加了配置屬性欄的寬度，讓其能夠在橫向上展示更多信息；其次，新版設(shè)計，將提煉后的一級屬性標(biāo)簽固定在屬性配置列表左側(cè)。相較于之前，這樣的設(shè)計始終能夠讓用戶清晰的看到所有一級屬性，用戶可以隨時在各類屬性中切換，并且右側(cè)屬性內(nèi)容的滾動也不會影響一級屬性的位置，如此就給了用戶很好的全局觀和使用的便利性與確定性。最后，新版設(shè)計采用分隔線與色塊結(jié)合的方式來表達屬性列表內(nèi)的層級關(guān)系，去掉逐級縮進后，配置列表在視覺上更加整齊一致、且空間利用率也有了進一步的提升。
在數(shù)據(jù)可視化場景搭建過程中，用戶對多個圖表的相同屬性進行統(tǒng)一修改、一次性調(diào)整的需求非常迫切和剛需。比如當(dāng)前可視化大屏中有N個圖表，此時，用戶想要將其中6個圖表的橫軸顏色調(diào)整為相同的綠色，在用戶的視角下，此時的操作應(yīng)該是先選中6個想要調(diào)整的圖表，然后找到橫軸顏色設(shè)置項，之后統(tǒng)一調(diào)整色彩。但莫奈當(dāng)前的版本，如果用戶按照上述流程操作，看到的將是下圖左側(cè)的示例：圖表多選之后，對齊、坐標(biāo)等基礎(chǔ)項仍然可用，而與屬性相關(guān)的其它設(shè)置并沒有被聚合并呈現(xiàn)，在此情況下，用戶想要完成最初的目標(biāo)就只能6個圖表逐個依次調(diào)整！顯然，這樣的操作并不符合用戶預(yù)期，它使用戶的操作效率大大降低。
上述問題是一個體驗相關(guān)的問題，同時也是一個強技術(shù)相關(guān)的問題，我們想要讓多個圖表的同類項聚合顯示，首先要能在底層對各個圖表的配置項有十分清晰的梳理，好在我們解決第一個問題：“配置項層級過深”時，已經(jīng)完成了對60多個圖表的細致分析，有了這項工作的基礎(chǔ)，當(dāng)前面臨的問題便不那么棘手。如右側(cè)示例：當(dāng)用戶多選圖表時，圖表的同類項會被聚合，并以用戶視角的理解，將屬性類別進行分類，這樣的分類打破了傳統(tǒng)的按照圖表固有屬性排列的慣例，而是把圖表固有屬性整合歸納到用戶易于理解的類目下，如此，用戶多選圖表之后便能夠便捷的對圖表的各類屬性進行統(tǒng)一的調(diào)整和修改，而這樣的操作是符合用戶習(xí)慣和預(yù)期的。
新建大屏作為創(chuàng)建數(shù)據(jù)可視化場景的第一步，它的易用與否直接給了用戶最直觀的對莫奈的第一感受。對于新建大屏的交互優(yōu)化主要有三個方面：創(chuàng)建流程、模板預(yù)覽與模板展示。
創(chuàng)建流程優(yōu)化：首先，舊版的創(chuàng)建流程：新建可視化>選擇模板>大屏命名>創(chuàng)建成功。 這一流程中“大屏命名”是沒有必要的，因為用戶在新建可視化大屏?xí)r可能存在多種需求的可能性，也許用戶只是想看看創(chuàng)建完成后內(nèi)部編輯器是什么樣，或許用戶有實際項目，但當(dāng)前項目名稱也并未確認(rèn)，所以在此時添加一個不可跳過的步驟著實讓人不爽，況且大屏創(chuàng)建成功之后在多個位置有多種方式都能便捷的修改大屏名稱，因此，更快速的進入編輯器開始設(shè)計創(chuàng)作才是用戶創(chuàng)建可視化最根本的目標(biāo)，所以，拿掉“命名流程”，顯然可以讓整個交互的過程更加流暢。
模板預(yù)覽與模板展示優(yōu)化：原有的設(shè)計，當(dāng)用戶點擊創(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)用戶選中某個模板時，點擊底部創(chuàng)建按鈕即刻進入大屏編輯器界面，此時用戶便可基于模板內(nèi)容進一步完成自己的定制化設(shè)計。
如今移動端各類產(chǎn)品已經(jīng)給用戶養(yǎng)成了算法推薦+自主搜索的產(chǎn)品使用習(xí)慣，這種習(xí)慣當(dāng)前也逐步從移動端往PC端轉(zhuǎn)化。搜索能從海量信息中最快速的找到用戶關(guān)心的內(nèi)容，因而提高搜索功能的易用性，能明顯提高用戶使用莫奈的效率。
以往的搜索功能按照不同模塊和場景分布在不同位置，用戶需要先找到對應(yīng)模塊才能進行搜索，降低了搜索的便捷性和易用性。新的設(shè)計在保留之前搜索能力的基礎(chǔ)上，新增全局搜索，用戶在一個位置即可完成對組件（優(yōu)先展示當(dāng)前畫板內(nèi)組件）、屬性、幫助等內(nèi)容的搜索和查找，進一步提升搜索的效率。
一個數(shù)據(jù)可視化場景，通常是由N個數(shù)據(jù)圖表與其它數(shù)據(jù)要素一起構(gòu)成的多個頁面來呈現(xiàn)和展示的。這些頁面內(nèi)包含大量的元素，而對這些元素的管理主要通過大屏編輯器頁面左側(cè)的圖層管理面板來實現(xiàn)。一般我們對圖層管理的手段主要有三種：命名、分組和查找。
給組件命名是一個耗時且麻煩的行為，我們在做用戶調(diào)研時發(fā)現(xiàn)，大部分用戶都沒有給組件規(guī)范命名的習(xí)慣，大多數(shù)情況下，組件在圖層面板列表內(nèi)都是以默認(rèn)名稱或者默認(rèn)名稱+1、2、3的形式存在。這導(dǎo)致了當(dāng)頁面組件較多時，通過組件命名來查找組件其實相當(dāng)困難，所以自動生成縮略圖的形式相比讓用戶耗費大量時間為圖層命名更能改善用戶體驗。縮略圖以快照方式保存當(dāng)前組件最新狀態(tài)截圖，從而幫助用戶更快速的將圖層組件與頁面上的內(nèi)容對應(yīng)起來。
新的設(shè)計，圖層成組后也取消了縮進字符的效果，我采用給成組對象設(shè)計更明顯的分組示意圖標(biāo)以及為組內(nèi)列表添加深色色塊的方式，完成了成組對象與列表內(nèi)其他要素區(qū)分的需求，新的設(shè)計使成組對象更易查找和識別。
此外，我們還增加了對圖層列表的搜索功能，幫助用戶快速定位名稱已知的設(shè)計元素。
此次體驗升級是設(shè)計主導(dǎo)推動，產(chǎn)品與研發(fā)緊密配合的結(jié)果。體驗設(shè)計師作為最接近用戶的群體，是產(chǎn)品與用戶溝通的橋梁。時刻關(guān)注用戶心聲，并能將用戶細碎的吐槽和各類反饋轉(zhuǎn)化為體驗痛點、制定對應(yīng)的優(yōu)化策略是體驗設(shè)計師的基本功。而對于設(shè)計和產(chǎn)品本身是否熱愛，也是設(shè)計能否不斷精進、體驗是否能夠不斷提升的關(guān)鍵。好的設(shè)計不僅服務(wù)了產(chǎn)品、幫助了用戶、同時也成就了設(shè)計師本身。
本人為莫奈提供設(shè)計支持的三年多時間，在沒有KPI要求和外部壓力的情況下，通過公司內(nèi)部需求管理系統(tǒng)“行云”，為莫奈提交231個體驗優(yōu)化建議；以線下線上的形式面向莫奈產(chǎn)品及研發(fā)團隊進行了20多次專業(yè)分享。正是日常這些積極主動且持續(xù)的努力，使我本人與莫奈產(chǎn)品團隊建立了非常友好緊密的聯(lián)系，這也為推動本次體驗升級改版提供了巨大的助力。我認(rèn)為作為體驗設(shè)計師，我們不僅要對用戶有同理心，為用戶創(chuàng)造愉悅舒適的感受，同時也要對身邊的同事、職場中的合作伙伴有相似的同理心和換位思考的意識，體驗關(guān)乎人、環(huán)境與生活，嘗試在生活中磨煉自己創(chuàng)造好的體驗的能力，并將其應(yīng)用到體驗設(shè)計師的職業(yè)工作中，我相信，倘若如此實踐，必能在職業(yè)和生活中都獲得有不錯的成就。
好的產(chǎn)品，必然是持續(xù)關(guān)注用戶訴求，不斷迭代發(fā)展的產(chǎn)品，好的體驗設(shè)計也必然是陪伴產(chǎn)品不斷優(yōu)化、持續(xù)精進的設(shè)計，復(fù)盤的意義不僅是沉淀過去的經(jīng)驗，更是為未來更好的體驗蓄能。
此次分享如能為大家?guī)砟桥乱稽c點的啟發(fā)，本人便倍感榮幸、開心至極！ 期望大家能夠與我有更多交流，么么噠~~
作者：BYMD 來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.73404.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍藍設(shè)計的小編 http://www.73404.com.cn