2023-3-2 博博
莫奈是一款主要服務(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ì)中提供一定的借鑒和參考。
實(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)度。
基于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í)。
通常我們說用戶體驗(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)使用頻次高的那部分用戶和場(chǎng)景，然后針對(duì)他們以及他們使用的場(chǎng)景做高優(yōu)先級(jí)的優(yōu)化。
從莫奈典型用戶使用場(chǎng)景可以歸納出：
首先，莫奈的主要使用者為各個(gè)項(xiàng)目的產(chǎn)品經(jīng)理及開發(fā)工程師，其中設(shè)計(jì)師也有相當(dāng)大的使用強(qiáng)度，這三類用戶他們直接使用莫奈，并把莫奈作為解決數(shù)據(jù)可視化場(chǎng)景構(gòu)建相關(guān)需求的主要工具和方案，所以，以上三類用戶，我們將其稱之為莫奈的核心用戶。核心用戶使用莫奈產(chǎn)出的作品，經(jīng)由上下游同事傳達(dá)和部署給業(yè)務(wù)方及客戶后，莫奈的商業(yè)價(jià)值便得以體現(xiàn)。
其次，每類用戶使用莫奈不同功能模塊的頻次不同。從使用場(chǎng)景中我們也發(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)化。
知道了核心用戶是誰，那么核心用戶的體驗(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)。
本次問卷設(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)。
問卷設(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è)面臨較大壓力。
在設(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ù)雜場(chǎng)景下的業(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)的解決和處理。
在【05、體驗(yàn)痛點(diǎn)分析-用戶調(diào)研部分】已經(jīng)介紹了本次參與訪談的用戶來源，但在實(shí)際執(zhí)行時(shí)，我們也邀請(qǐng)了部分在線上問卷反饋中描述模糊不清、難以理解，需要面對(duì)面交流或者演示才能理解的問題的用戶。
訪談先通過與用戶簡短的溝通了解用戶的崗位/職業(yè)以及使用莫奈的主要場(chǎng)景、頻次、設(shè)備等，然后通過給用戶設(shè)置一到兩個(gè)簡單的任務(wù)，觀察用戶在完成任務(wù)過程中的行為、表情、語氣等，以了解莫奈在一些典型使用場(chǎng)景下的易用性及可用性。比如，對(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ù)為莫奈提供建議和反饋。
通過線上問卷調(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é)作。
上一步，我們通過用戶體驗(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)作的展開。
基于體驗(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)。
對(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)鍵詞定義的一致的視覺和心理感受。
基于情緒版提煉出的設(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ì)感受的方法。
對(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ì)的滿意度有很好的提升。
莫奈在改版之前就已經(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)烈，具有很好的場(chǎng)景適應(yīng)性和品牌特色。
字體作為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è)場(chǎng)景，該字體也是京東金融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)的一致性。
質(zhì)感的呈現(xiàn)主要通過色彩、透明度的變化、毛玻璃效果的模擬來實(shí)現(xiàn)，色彩與透明度的變化搭配毛玻璃效果使用，可以呈現(xiàn)科技、輕盈的質(zhì)感。
結(jié)構(gòu)設(shè)計(jì)主要目標(biāo)是組件化及原子化，莫奈最核心頁面是大屏場(chǎng)景編輯器，該頁面承載著可視化大屏由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ī)范、使用場(chǎng)景示例等方式解決了如何用的問題。
原子化的組件，精簡了組件的數(shù)量，同時(shí)每個(gè)組件也針對(duì)自身功能和用途的特點(diǎn)進(jìn)行了優(yōu)化，在此過程中也考慮了組件搭配、組合使用的適配和呈現(xiàn)問題。比如，針對(duì)顏色選擇組件，我們默認(rèn)以十六進(jìn)制展示顏色色值，并在色值后以百分比顯示該顏色的透明度，我們還在色值后面增加了色值預(yù)覽的小色塊，這樣的設(shè)計(jì)兼顧了開發(fā)與設(shè)計(jì)同學(xué)使用莫奈的場(chǎng)景。對(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í)中不勝枚舉。
莫奈的動(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)畫
針對(duì)視覺層面設(shè)計(jì)優(yōu)化后，接下來針對(duì)莫奈典型的用戶使用場(chǎng)景以及之前線上問卷、線下訪談中用戶反饋問題比較集中的一些場(chǎng)景進(jìn)行交互層面的優(yōu)化，我們交互優(yōu)化的目標(biāo)是“簡單、流暢”。
首先進(jìn)行交互優(yōu)化的是各類圖表的屬性及配置項(xiàng)設(shè)置相關(guān)的交互優(yōu)化。莫奈作為一款可視化場(chǎng)景搭建平臺(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)化方案如下。
要解決問題，首先要知道問題從何而來。經(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)一步的提升。
在數(shù)據(jù)可視化場(chǎng)景搭建過程中，用戶對(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ù)期的。
新建大屏作為創(chuàng)建數(shù)據(jù)可視化場(chǎng)景的第一步，它的易用與否直接給了用戶最直觀的對(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ì)。
如今移動(dòng)端各類產(chǎn)品已經(jīng)給用戶養(yǎng)成了算法推薦+自主搜索的產(chǎn)品使用習(xí)慣，這種習(xí)慣當(dāng)前也逐步從移動(dòng)端往PC端轉(zhuǎn)化。搜索能從海量信息中最快速的找到用戶關(guān)心的內(nèi)容，因而提高搜索功能的易用性，能明顯提高用戶使用莫奈的效率。
以往的搜索功能按照不同模塊和場(chǎng)景分布在不同位置，用戶需要先找到對(duì)應(yīng)模塊才能進(jìn)行搜索，降低了搜索的便捷性和易用性。新的設(shè)計(jì)在保留之前搜索能力的基礎(chǔ)上，新增全局搜索，用戶在一個(gè)位置即可完成對(duì)組件（優(yōu)先展示當(dāng)前畫板內(nèi)組件）、屬性、幫助等內(nèi)容的搜索和查找，進(jìn)一步提升搜索的效率。
一個(gè)數(shù)據(jù)可視化場(chǎng)景，通常是由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)?？s略圖以快照方式保存當(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ì)元素。
此次體驗(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ì)身邊的同事、職場(chǎng)中的合作伙伴有相似的同理心和換位思考的意識(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ā)，本人便倍感榮幸、開心至極！ 期望大家能夠與我有更多交流，么么噠~~
作者：BYMD 來源：站酷網(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.bouu.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ì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn