本次圖示化的信息來源是：
交互設(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)部分的對比，如「交互設(shè)計(jì)師與信息架構(gòu)師」「交互設(shè)計(jì)師與界面設(shè)計(jì)師」「交互設(shè)計(jì)師與電子工程師」。

01、前言

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

作為京東莫奈的設(shè)計(jì)負(fù)責(zé)人，過去三年一直負(fù)責(zé)莫奈可視化平臺的用戶體驗(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)的問題。我對以上兩個(gè)渠道的問題整體梳理匯總，并與產(chǎn)品側(cè)討論溝通后，大家認(rèn)為這些問題比較嚴(yán)重的影響了用戶使用莫奈的效率，降低了莫奈對業(yè)務(wù)側(cè)賦能的質(zhì)量，提高了客戶使用莫奈的成本。所以我們必須規(guī)劃出一個(gè)產(chǎn)品迭代的周期，針對莫奈體驗(yàn)問題，進(jìn)行一次密集的優(yōu)化和革新，這便是本次莫奈體驗(yàn)升級改版的基礎(chǔ)背景和原因。

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

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

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

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

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

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

基于STAR法則，背景概況部分向大家介紹莫奈體驗(yàn)升級的必要性。在企業(yè)中，想要推動一個(gè)需求順利執(zhí)行，那一定是需求上下游以及相關(guān)方的利益都得到了體現(xiàn)和滿足。莫奈此次升級，從體驗(yàn)設(shè)計(jì)師角度來講，我們作為用戶的代言人，在了解到用戶大量反饋和建議后，有責(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è)計(jì)，使產(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)時(shí)，用戶是一個(gè)群體的概念，而這個(gè)群體如上圖所示，可以被進(jìn)一步細(xì)分為多種角色，理想情況是每一類角色的體驗(yàn)都被滿足，但現(xiàn)實(shí)執(zhí)行中我們必須要有策略和取舍。所以要想產(chǎn)品有好的體驗(yàn)，首先我們要知道用戶群體中不同角色對產(chǎn)品的使用情況如何，并找到對產(chǎn)品依賴度強(qiáng)使用頻次高的那部分用戶和場景，然后針對他們以及他們使用的場景做高優(yōu)先級的優(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í)，我們也通過對內(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è)計(jì)了一次完整的用戶調(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è)計(jì)側(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è)計(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)值比較，既可以知道用戶對莫奈在以上三項(xiàng)的滿意度，也可對莫奈當(dāng)前整體體驗(yàn)結(jié)果有一個(gè)全局的概況性評價(jià)。同時(shí)根據(jù)三個(gè)方向的評分也可以更細(xì)致的指導(dǎo)后續(xù)的設(shè)計(jì)優(yōu)化方向，為設(shè)計(jì)決策提供更多科學(xué)可信的依據(jù)。

PSSUQ整體可用性量表作為一個(gè)通用模版，其內(nèi)容比較固定，為避免多次打擾用戶，提升問卷調(diào)研效率，我在PSSUQ的基礎(chǔ)上添加了少量關(guān)鍵信息甄別、用戶反饋積極性識別類問題，從而使問卷內(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】是對該項(xiàng)描述的認(rèn)可程度，得分越低代表用戶對該項(xiàng)描述越認(rèn)可；【NA】代表用戶對該項(xià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è)維度對莫奈均不滿意

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è)計(jì)驅(qū)動的改版設(shè)計(jì)，設(shè)計(jì)側(cè)面臨較大壓力。

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

在設(shè)計(jì)問卷的環(huán)節(jié)我也提到過我們的問卷在PSSUQ量表的基礎(chǔ)上針對本次調(diào)研目標(biāo)做了部分調(diào)整和優(yōu)化，而線上問卷最后兩個(gè)選項(xiàng)以問答題的形式向被調(diào)研用戶提供了對莫奈各方面建議的反饋渠道，通過問答項(xiàng)我們收集到用戶反饋的各類問題80多條，我們采用親和圖對這些反饋?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ù)需求，減少組件二開成本，提高交付效率。針對這兩個(gè)大的問題點(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í)行時(shí)，我們也邀請了部分在線上問卷反饋中描述模糊不清、難以理解，需要面對面交流或者演示才能理解的問題的用戶。

訪談先通過與用戶簡短的溝通了解用戶的崗位/職業(yè)以及使用莫奈的主要場景、頻次、設(shè)備等，然后通過給用戶設(shè)置一到兩個(gè)簡單的任務(wù)，觀察用戶在完成任務(wù)過程中的行為、表情、語氣等，以了解莫奈在一些典型使用場景下的易用性及可用性。比如，對于視覺設(shè)計(jì)師：請?jiān)诋嫴贾刑砑右粋€(gè)條形圖，并將條形圖的顏色修改為綠色、激活縱軸輔助線、修改輔助線為虛線樣式....; 對于開發(fā)工程師：請?jiān)诋嫴贾刑砑右粋€(gè)環(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)有任何更新時(shí)，問題反饋者都能及時(shí)收到更新。如此，受訪者反饋的問題從需求提交到需求最終提測驗(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)系，把每一個(gè)具體的問題匯總給對應(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)”這個(gè)概念有更好的理解，并能促成大家在更大的層面上達(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è)計(jì)師在本次體驗(yàn)升級改版工作中與大家高效協(xié)作，也非常益于之后日常產(chǎn)品迭代的溝通與協(xié)作。

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

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

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

基于體驗(yàn)升級方向，接下來就要制定具體的設(shè)計(jì)策略，來實(shí)現(xiàn)體驗(yàn)升級方向中要達(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)格定義

對于設(shè)計(jì)目標(biāo)中關(guān)鍵詞所代表的那些抽象概念，每個(gè)人的認(rèn)知可能都不一樣，但是搜索引擎和大數(shù)據(jù)推薦的算法，可以告訴我們普通大眾對那些關(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)算法，針對“科技和高效”這兩個(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)、動、音7個(gè)維度分析一個(gè)設(shè)計(jì)作品的設(shè)計(jì)風(fēng)格，就如同人體是由肌肉、骨骼構(gòu)成的一樣，以上7個(gè)維度也是構(gòu)成一個(gè)設(shè)計(jì)作品的“經(jīng)、骨、肉”。所以，我認(rèn)為對于一個(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)勢，其中最明顯的是它能夠?qū)⑽覀冿L(fēng)格定義的設(shè)計(jì)工作條理化，避免反復(fù)嘗試和摸索造成的大量返工和思緒混亂，比如，如果我對質(zhì)感的定義有偏差，不符合情緒版中提取出來的設(shè)計(jì)要素的特點(diǎn)，這時(shí)候我只需要對“質(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、視覺改版：造形演繹

對于產(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)。

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

16、視覺改版：色彩搭配

莫奈在改版之前就已經(jīng)有自己的品牌色，新的色彩升級圍繞“科技與高效”兩個(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)綠對比強(qiáng)烈，具有很好的場景適應(yīng)性和品牌特色。

17、視覺改版：字體選取

字體作為UI界面中最常見的元素以及作為信息呈現(xiàn)的主要載體，字體的使用對產(chǎn)品的易用性和視覺表現(xiàn)有著非常重要的影響。結(jié)合體驗(yàn)升級方向中定義的“增強(qiáng)品牌特色”的目標(biāo)以及情緒版中提取的非襯線的設(shè)計(jì)要素，對于字體的設(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ù)值符號四個(gè)場景，該字體也是京東金融APP的系統(tǒng)數(shù)字字體，其最大的特點(diǎn)是等寬、簡潔、緊湊具有很好的識別性與易讀性，并且該字體有較小的字符寬度，所以當(dāng)其用于大屏編輯器時(shí)，能夠在相同的空間下容納比其它字體更多的字符，而這個(gè)特點(diǎn)對于“寸土寸金”的屬性面板尤為重要。此外，該字體在作為數(shù)字字體使用時(shí)，其小數(shù)點(diǎn)、千分符等也具有很強(qiáng)的特色，具有不錯(cuò)的辨識度與個(gè)性。

而產(chǎn)品中的中文字體Mac與Windows系統(tǒng)有不同的方案。在Windows下，由于系統(tǒng)自帶的微軟雅黑當(dāng)字號小于14pt時(shí)，字符在水平方向上存在明顯“參差不齊”的現(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)前已漸趨主流的高分屏，所以使用該字體能夠給用戶帶來不錯(cuò)的信息呈現(xiàn)。除此之外，思源黑體的字形特點(diǎn)與MacOS系統(tǒng)下的蘋方字體相似，因而使用思源黑體在一定程度上也能夠保證用戶在不同平臺使用莫奈時(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)品對編輯器內(nèi)的各個(gè)模塊所包含的各類組件進(jìn)行了梳理，通過將各個(gè)模塊的組件羅列出來，然后重新梳理組合、去重、合并之后，我們就可以知道當(dāng)前編輯器界面總共有哪些類型的組件，以及每類組件用在何處，而組件原子化后也通過間距規(guī)范、使用場景示例等方式解決了如何用的問題。

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

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

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

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

首頁科技感流光氛圍動效

頁面及大屏加載Loading動畫

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

產(chǎn)品登錄頁

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

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

大屏模板頁面

可視化場景編輯器頁面

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

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

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

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

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

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

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

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

01、產(chǎn)品對于當(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í)都有一定的理解難度，尤其對于新手更是如此！用戶想要更改顏色，Ta首先需要知道什么是數(shù)據(jù)系列、其次還要了解形狀設(shè)置可能包含哪些屬性等，正因具有一定的門檻且不直觀，所以用戶初次進(jìn)行上述設(shè)置時(shí)往往需要在樣式一級菜單下點(diǎn)擊多個(gè)屬性、反復(fù)嘗試確認(rèn)，才能最終完成顏色修改的設(shè)置，這樣一個(gè)使用的流程自然會給用戶“層級過深”的感受

02、圖表配置結(jié)構(gòu)存在冗余、不夠精簡。還是上面那個(gè)栗子，用戶修改顏色需要觸達(dá)第5級。但是這種細(xì)致的分層分級的結(jié)構(gòu)設(shè)計(jì)是必要的么？答案是并不是！因?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)的各個(gè)屬性，在屬性列表的排序沒有遵循用戶使用的頻次和習(xí)慣。排列在前面的屬性并非用戶最常用的那些，因此用戶要在列表中從上而下的“翻找”，這種使用過程中的頓挫感，一方面影響了用戶使用產(chǎn)品的效率，另一方面也加深了用戶“層級過深”的感受。

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

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

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

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

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

在數(shù)據(jù)可視化場景搭建過程中，用戶對多個(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è)的示例：圖表多選之后，對齊、坐標(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)聚合顯示，首先要能在底層對各個(gè)圖表的配置項(xiàng)有十分清晰的梳理，好在我們解決第一個(gè)問題：“配置項(xiàng)層級過深”時(shí)，已經(jīng)完成了對60多個(gè)圖表的細(xì)致分析，有了這項(xiàng)工作的基礎(chǔ)，當(dāng)前面臨的問題便不那么棘手。如右側(cè)示例：當(dāng)用戶多選圖表時(shí)，圖表的同類項(xiàng)會被聚合，并以用戶視角的理解，將屬性類別進(jìn)行分類，這樣的分類打破了傳統(tǒng)的按照圖表固有屬性排列的慣例，而是把圖表固有屬性整合歸納到用戶易于理解的類目下，如此，用戶多選圖表之后便能夠便捷的對圖表的各類屬性進(jìn)行統(tǒng)一的調(diào)整和修改，而這樣的操作是符合用戶習(xí)慣和預(yù)期的。

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

新建大屏作為創(chuàng)建數(shù)據(jù)可視化場景的第一步，它的易用與否直接給了用戶最直觀的對莫奈的第一感受。對于新建大屏的交互優(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)建大屏按鈕后，會在頁面底部拉起一個(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í)，模板均會以較大的視圖動態(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)化

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

以往的搜索功能按照不同模塊和場景分布在不同位置，用戶需要先找到對應(yīng)模塊才能進(jìn)行搜索，降低了搜索的便捷性和易用性。新的設(shè)計(jì)在保留之前搜索能力的基礎(chǔ)上，新增全局搜索，用戶在一個(gè)位置即可完成對組件（優(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)包含大量的元素，而對這些元素的管理主要通過大屏編輯器頁面左側(cè)的圖層管理面板來實(shí)現(xiàn)。一般我們對圖層管理的手段主要有三種：命名、分組和查找。

給組件命名是一個(gè)耗時(shí)且麻煩的行為，我們在做用戶調(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)困難，所以自動生成縮略圖的形式相比讓用戶耗費(fèi)大量時(shí)間為圖層命名更能改善用戶體驗(yàn)。縮略圖以快照方式保存當(dāng)前組件最新狀態(tài)截圖，從而幫助用戶更快速的將圖層組件與頁面上的內(nèi)容對應(yīng)起來。

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

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

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

此次體驗(yàn)升級是設(shè)計(jì)主導(dǎo)推動，產(chǎn)品與研發(fā)緊密配合的結(jié)果。體驗(yàn)設(shè)計(jì)師作為最接近用戶的群體，是產(chǎn)品與用戶溝通的橋梁。時(shí)刻關(guān)注用戶心聲，并能將用戶細(xì)碎的吐槽和各類反饋轉(zhuǎn)化為體驗(yàn)痛點(diǎn)、制定對應(yīng)的優(yōu)化策略是體驗(yàn)設(shè)計(jì)師的基本功。而對于設(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è)分享。正是日常這些積極主動且持續(xù)的努力，使我本人與莫奈產(chǎn)品團(tuán)隊(duì)建立了非常友好緊密的聯(lián)系，這也為推動本次體驗(yàn)升級改版提供了巨大的助力。我認(rèn)為作為體驗(yàn)設(shè)計(jì)師，我們不僅要對用戶有同理心，為用戶創(chuà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ā)，本人便倍感榮幸、開心至極！ 期望大家能夠與我有更多交流，么么噠~~

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

隨著技術(shù)及經(jīng)濟(jì)的發(fā)展，人們對計(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ā)生接觸、交流、互動等，然后用戶會形成主觀上的體會、感受。這里的「 機(jī)器 」泛指各種「 產(chǎn)品 」，類比諾曼所說的，即物理界面、虛擬界面、系統(tǒng)、硬件等。
因此，好的「 用戶體驗(yàn) 」是基于好的交互設(shè)計(jì)。而對交互設(shè)計(jì)「 好/壞 」的影響因素，涉及到人、產(chǎn)品、使用環(huán)境這三者，也就是人機(jī)工程的內(nèi)容。
概括一下百科對「 人機(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ī)能特性。主要有人體各部位的尺寸、重量、面積、活動、相互關(guān)系等，眼耳鼻舌身對應(yī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)中對人機(jī)交互產(chǎn)生影響的主要有眼、耳、身（皮膚）對應(yīng)的：視覺、聽覺、觸覺，以及四肢、頸椎的尺寸、受力情況和活動幅度等。下文將對這四部分的基礎(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ù)值存在微小差異），對應(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)境光線暗時(shí)起作用，用來區(qū)分黑白。研究數(shù)據(jù)表明視桿細(xì)胞對光譜中波長為507nm的「 青綠色 」部分最敏感，對極弱的光刺激敏感。

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

識別物體

正常情況下，瞳孔會根據(jù)環(huán)境中的光量來調(diào)整大小。當(dāng)有光線較強(qiáng)時(shí)，瞳孔會收縮變窄；當(dāng)光線很暗時(shí)，瞳孔會膨脹來讓更多的光進(jìn)入眼球。
可以把這個(gè)理解為一個(gè)保護(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)。

下面提到兩個(gè)實(shí)驗(yàn)，其中「 正對比極性 」，指在淺色背景上顯示深色字體文本，就是對應(yīng)我們界面設(shè)計(jì)中的「 淺色模式 」；而「 負(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)勢」的研究表明：夜間，深色模式下閱讀小字體文本比淺色模式下閱讀要困難得多。 而人們對文本的識別，「淺色模式」下比在「深色模式「要快，白天比晚上更快。

對上面兩個(gè)實(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)研究表明，長時(shí)間處于「淺色模式」下可能會導(dǎo)致近視。其表現(xiàn)為，閱讀「淺色模式」下的文本時(shí)，脈絡(luò)膜（跟近視有關(guān)的一層膜）會明顯變薄；而閱讀「深色模式」下的文本時(shí)，這層膜明顯變厚。

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

那通過適當(dāng)?shù)脑O(shè)計(jì)，是否有可能找到這兩者之間的最優(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)品，并且常常被錯(cuò)誤使用。

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

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

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

視角范圍

1. 水平方向

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

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

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

2. 垂直方向

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

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

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

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

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

聽覺的形成

感知范圍

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

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

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

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

響度

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

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

對音色的辨識和記憶

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

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

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

辨別方向

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

粗糙的聲音

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

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

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

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

聚焦效應(yīng)

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

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

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

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

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

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

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

觸覺的形成

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

作用

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

同時(shí)也具有表達(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ǔ)充。
如在觸控屏上用虛擬鍵盤輸入文字時(shí)，通過按鍵的「 振動反饋 」，讓用戶清晰及時(shí)地了解到自己已經(jīng)成功按下了某一個(gè)按鍵。相關(guān)研究的結(jié)果也表明：虛擬鍵盤加入振動反饋后，是可以提升用戶輸入時(shí)的準(zhǔn)確度。

而一些特定場景下，「 觸覺反饋 」可以很好的替代視覺和聽覺反饋。
比如駕駛汽車時(shí)，駕駛員需要將大部分的注意力放在道路環(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)頸部前傾時(shí)，頸椎承受的壓力逐漸增大：
前傾0°時(shí)，為頭部重量，約為4.5-5kg；
前傾15°時(shí)，承受壓力約為12kg；
前傾30°時(shí)，承受壓力約為18kg；
前傾45°時(shí)，承受壓力約為22kg；
前傾60°時(shí)，承受壓力約為27kg。

結(jié)合前面我們講過的人眼轉(zhuǎn)動的舒適角度和視野范圍，可以為一些物品的設(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°，小腿和地面垂直放置對腿部最好的，屈膝小于90°時(shí)，長時(shí)間保持會影響下肢的血液循環(huán)。

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

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

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

打字時(shí)，手肘彎曲接近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é)屈曲時(shí)約為90°，遠(yuǎn)節(jié)指間關(guān)節(jié)屈曲時(shí)約為60-90°。 

3. 手指觸控

在使用手機(jī)等數(shù)字界面時(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í)，在某些瞬間，多數(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)行操作時(shí)，一般以四個(gè)手指和手掌為依托，用大拇指操作為主，而成年人拇指長度約為6-10cm。

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

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

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

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

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(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ì)公司

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

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(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ì)公司

智能感知交互

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

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

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

那么從這兩個(gè)案例中，大家可以發(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ī)交互的新時(shí)代。

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

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

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

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

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

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

02 智能感知交互模型

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

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

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

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

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

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

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

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

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

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

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

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

簡單來說就是基于一定的規(guī)則產(chǎn)生，舉個(gè)例子，比如我們規(guī)定用戶與設(shè)備之間的距離為0~40cm為近距離，，工人每小時(shí)生產(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ù)測和判斷。比如淘寶上對男女的劃分，他通過你買的商品去判斷你是男生還是女生，你的興趣愛好是什么

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

2.1 行為干預(yù)

簡單來說就是我感知到當(dāng)前的行為是異常、錯(cuò)誤的，會做出主動預(yù)警進(jìn)行干預(yù)。舉個(gè)例子，比如圖中的場景，通過攝像頭的圖像識別檢測到工人的操作不規(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è)計(jì)表達(dá)影響因子模型。簡單來說，就是我已經(jīng)決策完成，那么我怎么去做決策和輸出，受那些變量因子影響呢

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

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

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

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

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

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

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

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

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

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

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

這塊沙琪瑪出生在一個(gè)非常傳統(tǒng)的食品供應(yīng)鏈公司，她從出生出來到被運(yùn)送到客戶手中，會經(jīng)過4個(gè)空間，12個(gè)節(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é)賬時(shí)只要將多件商品投送到結(jié)賬框中，就可以一次性識別多個(gè)商品完成結(jié)賬，這就是RFID的優(yōu)勢，他可以完成一對多的批量識別，并且具有更大的識別范圍，識別過程中不需要設(shè)備和條碼直接對視。

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

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

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

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

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

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

怎樣選擇合適的感官通道

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

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

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

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

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

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

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

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

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

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

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

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

清晰的視覺表達(dá)

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

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

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

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

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

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

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

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

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

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

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

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(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ì)公司

眾所周知，「用戶體驗(yàn)五要素」出自Jesse James Garrett 的《用戶體驗(yàn)要素》一書：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。
產(chǎn)品設(shè)計(jì)者和開發(fā)者的角度可以對應(yīng)理解為：為什么做、做到什么程度、這些東西如何組成、規(guī)劃用戶操作行為、如何呈現(xiàn)這些東西。

「Live Activities設(shè)計(jì)規(guī)范」由蘋果出品，原文為英文，上一篇已翻譯https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了個(gè)人對其內(nèi)容的敘述方式存在一點(diǎn)意見。為了更好的記住&理解「Live Activities設(shè)計(jì)規(guī)范」，使用比較熟悉的「用戶體驗(yàn)五要素」對內(nèi)容進(jìn)行整理。

1. 戰(zhàn)略層——為什么做

原文提供的Live Activity定義如下：
“A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.”
“Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. ”

從原文可以提煉出Live Activity顯示特點(diǎn)：

1. 內(nèi)容是頻繁更新的、有進(jìn)度/狀態(tài)顯示的、用戶關(guān)心的。

2. 內(nèi)容的信息量是一眼就能看完的程度。

但上述仍是表象，并非實(shí)質(zhì)，接下來思考這幾個(gè)問題：

1. 為什么顯示的是進(jìn)度/狀態(tài)頻繁更新的內(nèi)容？

2. 為什么要強(qiáng)調(diào)用戶關(guān)心的？

3. 為什么信息量是一眼就能看完的程度？

沒有Live Activity時(shí)，頻繁更新主要靠push推送。但push容易被其他APP的push覆蓋，且隨著各種APP的頻繁使用，用戶獲取關(guān)鍵信息的效率和通過push打開APP的次數(shù)反而在下降。

進(jìn)度/狀態(tài)頻繁更新的內(nèi)容，說明每個(gè)狀態(tài)存在的時(shí)間短，如果被覆蓋/忽略，同一狀態(tài)就不再復(fù)現(xiàn)，用戶所關(guān)心的，或APP所希望用戶關(guān)心的，就看不到了。比如：什么時(shí)候取外賣、待付款、上傳成功等等。

當(dāng)下我們所處的時(shí)代是信息泛濫的時(shí)代，需要對信息作精簡，但用戶的操作是可以多條線進(jìn)行的，比如比如邊看劇邊吃飯、上班摸魚/等外賣、比如聽音樂的時(shí)候?qū)懽鳌?

信息內(nèi)容和量是官網(wǎng)一直在強(qiáng)調(diào)的，需要精簡，只展示用戶需要的，基本達(dá)到一眼看完的程度，目的就是知道變化的是什么，當(dāng)前狀態(tài)是什么。

分析了這么多，大膽推測一下Live Activity的設(shè)計(jì)初衷是：快&準(zhǔn)確&輕。而終極目的是打動用戶，形成好體驗(yàn)，進(jìn)而推動口碑和銷售；為各APP提供新的通知形式，互惠互利。當(dāng)然Live Activity在一定程度上也彌補(bǔ)了硬件上的缺憾。

2. 范圍層——做到什么程度

關(guān)于這個(gè)層次相當(dāng)于規(guī)定功能范圍&信息邊界限制，就是什么要，什么不能要。這部分的信息官網(wǎng)給出許多，在此將其分類梳理如下，為避免大家不好查找官網(wǎng)/譯文對應(yīng)出處，在句未已標(biāo)注。

1）硬性限制

1. 僅iPhone支持，iPadOS、macOS、tvOS或watchOS不支持。（源自：平臺注意事項(xiàng)）

2. 非iPhone14的僅針對iOS16有鎖屏Live Activity展示。（源自：什么是Live Activity-鎖屏）

3. 支持用戶手動清除鎖屏狀態(tài)下的Live Activity。（源自：實(shí)際操作）

4. 支持用戶直接關(guān)閉對應(yīng)APP的Live Activity。（源自：最佳實(shí)踐方式第3/c條）

5. 支持Live Activity自動開始&結(jié)束。（源自：最佳實(shí)踐方式第6/f條）

6. 限制跟蹤活動/狀態(tài)時(shí)長不超過8小時(shí)。（源自：最佳實(shí)踐方式第1/a條）

7. 限制活動/進(jìn)程結(jié)束后展示時(shí)長不超過4小時(shí)。（源自：最佳實(shí)踐方式第8/h條）

8. 支持更改背景顏色&不透明度。（源自：設(shè)計(jì)有用的Live Activity第5/e條）

9. 限制內(nèi)容布局。（源自：設(shè)計(jì)有用的Live Activity第5/e條）

10. 限制不同設(shè)備的展示尺寸。（源自：規(guī)范）

2）非硬性限制

1. 避免在Live Activity中顯示敏感信息。（源自：最佳實(shí)踐方式第4/d條）

2. 避免在Live Activity中顯示廣告和促銷活動。（源自：最佳實(shí)踐方式第5/e條）

3. 只提供正在進(jìn)行的任務(wù)/事件的關(guān)鍵摘要。（源自：最佳實(shí)踐方式第2/b條）

4. 在任務(wù)/活動結(jié)束前，給用戶提供關(guān)閉Live Activity按鈕。（源自：最佳實(shí)踐方式第6/f條）

5. 點(diǎn)擊Live Activity直接定位到對應(yīng)頁面，無需用戶二次導(dǎo)航。（源自：最佳實(shí)踐方式第7/g條）

6. 考慮在活動結(jié)束后，鎖屏上在合理時(shí)段后自動刪除Live Activity。（源自：最佳實(shí)踐方式第8/g條）

3. 結(jié)構(gòu)層——這些東西如何組成？

（個(gè)人猜測）由于是提供一個(gè)展示區(qū)域，且展示區(qū)域有限，所以對于層級架構(gòu)，一級展示什么，二級展示什么，各階段展示什么，這些都沒有做明確規(guī)定&建議。各家APP可以根據(jù)自身實(shí)際情況進(jìn)行設(shè)計(jì)。

4. 框架層——規(guī)劃用戶操作行為

通過Live Activity的展示形式，可以總結(jié)為2點(diǎn)：吸引、查看（摘要&詳情）。

1）吸引

1. 一般是在原深感攝像頭兩側(cè)展示（電話會直接展示擴(kuò)展型），分為緊湊型和最小化。

2. 緊湊型在僅有一個(gè)活動/事件的時(shí)候展示，雖被原深感攝像頭分割兩端，但僅作為一條信息展示，為了視覺上的統(tǒng)一，這里的顏色不支持開發(fā)設(shè)置，使用的是系統(tǒng)默認(rèn)色值。

3. 最小化在存在多個(gè)活動的時(shí)候展現(xiàn)，左側(cè)和原深感攝像頭粘連，右側(cè)獨(dú)立成島。

4. 不管是緊湊型，還是最小化，都可以通過點(diǎn)擊原深感攝像頭區(qū)域，進(jìn)入APP內(nèi)頁，或者長按喚出擴(kuò)展型。

2）查看

1. 進(jìn)入內(nèi)頁的查看基本就是各家顯神通了，這里主要講擴(kuò)展型和鎖屏。

2. 原則上是不支持在擴(kuò)展型和鎖屏做復(fù)雜操作的，基本點(diǎn)擊是進(jìn)入APP。

3. 擴(kuò)展型是用戶長按緊湊型/最小化喚起的展示區(qū)域，內(nèi)容是可以自定義的，當(dāng)然官方也給了相應(yīng)的建議，具體如下。內(nèi)容信息種類多的可以采用這種信息左中右排布，底部預(yù)留大按鈕。內(nèi)容信息少的可以采用左內(nèi)容右操作的方式。

4. 根據(jù)一致性原則，鎖屏展示的布局框架應(yīng)該與擴(kuò)展型差不多，同樣可以點(diǎn)擊打開APP。只是在鎖屏狀態(tài)如果有多個(gè)任務(wù)同時(shí)進(jìn)行，是會全部展示的，所以要注意品牌的傳遞，避免用戶混淆服務(wù)方。

5. 表現(xiàn)層——如何呈現(xiàn)這些東西

對于如何呈現(xiàn)這些東西，蘋果還是寫了很多建議，確保視覺上的一致性和美觀。

1）顏色

1. 緊湊型狀態(tài)下，為了保證兩側(cè)信息的連貫，除了語句閱讀連貫，還需要在圖形和顏色上具有一致性，視覺上連貫。

2. 鎖屏狀態(tài)下的背景是可以自定義顏色、圖像、不透明度的，當(dāng)然文字的色值和不透明度也是可以定義的。這就涉及到兩者間的對比度對信息閱讀的影響。

3. 設(shè)計(jì)師不僅要考慮最佳狀態(tài)，還有深色&淺色模式下的，以及不同環(huán)境光、設(shè)備亮度下的顯示。還有一點(diǎn)很容易忽視的，就是在用戶自定義的墻紙下顯示的效果。不僅要注意信息獲取，還需要考慮美感問題。

2）間距布局

1. 緊湊型和擴(kuò)展型之間的布局要保持一致，兩者間的變化過渡效果是可以預(yù)測的。

2. 一般來說，擴(kuò)展型和鎖屏狀態(tài)下的信息間標(biāo)準(zhǔn)間距是20pt。

3. 在某些情況下，例如圖形和按鈕，您可能需要使用更緊湊的邊距，以避免擠滿邊緣或形成混亂的外觀。

3）圓角

1. 內(nèi)容和Live Activity邊緣之間的邊距需要保持一致，請遵循SwiftUI規(guī)則。

1內(nèi)容和Live Activity邊緣之間的邊距需要保持一致，，發(fā)現(xiàn)以圓角邊界為測距點(diǎn)得到的間距關(guān)系較為舒適。即：圓形/大致為圓形的圖形保持上下，3. 以及左側(cè)或者右側(cè)間距一致即可；方形/大致為方形的圖形保持圓角邊界與容器圓角邊界垂直對齊即可。同一位置的多個(gè)圖形圓角需要相對統(tǒng)一，才能確保間距的一致性。

4）尺寸

需要適應(yīng)不同機(jī)型的尺寸。具體的尺寸規(guī)范如下。

a. 靈動島

動態(tài)島使用44個(gè)點(diǎn)的角半徑，其圓角形狀與原深感攝像頭相匹配。

b. Live Activity大小

下表中列出的所有值均以pt為單位。
ps：左側(cè)為寬度，右側(cè)為高度。

以上就是整理分析的全部。

在整理分析過程中加強(qiáng)了對「用戶體驗(yàn)5要素」各個(gè)層劃分的理解，也對Live Activity在各個(gè)層次上的要求更加明確。

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

作者：Viola_1241     來源：站酷

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(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ì)公司