設計做到極致注重的就是對于細節的把控力，大廠的設計師之所以比較優秀，就是他們具備很好的細節把控力。想要提高產品設計的能力，發現設計細節和思考設計深入的能力至關重要。
最近在體驗產品的時候，發現了一些設計細節做得比較好的優秀案例，分享給大家學習一下。
分享目錄
一、Banner 輪播轉場的品牌化
二、情感化的彈窗設計
三、最小化顯示提高空間利用率
四、動態化的設置引導
五、沉浸式的活動氛圍設計
六、人性化的提示設置
七、動態感知的溫度設計
八、無處不在的廣告位開發
九、主題化的圖標設計
十、新穎的卡片式設計
一、Banner 輪播轉場的品牌化
立足于品牌做設計，才能強化自身產品的差異化。如何在更多設計場景中融入品牌基因，是設計師需要深入思考的關鍵。
最近在使用騰訊視頻 APP 時，發現首頁 Banner 圖在輪播的轉場過程中，以品牌 LOGO 造型作為轉場過度。一個小小的細節強化了用戶對于品牌的記憶度，也體現出專屬的設計差異。
二、情感化的彈窗設計
通過彈窗設計可以提高用戶操作效率，也是傳播信息（活動/廣告）最直觀的形式。但是體驗多了用戶便會開始排斥，提高彈窗的情感化設計變得尤為重要，降低用戶的排斥感才能提高彈窗的作用。
很多娛樂影視等 APP 都會有“青少年模式”彈窗提示，抖音將彈窗視覺表達融入了精美的國風插畫。也通過針對性的內容作為設置的引導，提高了用戶對“青少年模式”的深入理解，增強了體驗的積極性。
插畫的形式在彈窗設計中表現比較突出，比如嘀嗒出行 APP 將“推送通知”的彈窗設計運用插畫增強情感化表達。相較于生硬的表達方式用戶更能接受，通過營銷的文案引導用戶授權，提高了產品的感官體驗。
三、最小化顯示提高空間利用率
對于工具型產品不同用戶的操作焦點不同，更多定制化的體驗才能提高用戶的操作效率。
釘釘 APP 在協作欄目中，默認展示的各類工具可以進行收起，實現最小化顯示。用戶可以根據使用習慣和操作方式選擇收起/展開，提高了當前空間的利用率，自定義的功能設計可以提高用戶的操作體驗。
四、動態化的設置引導
為了提高用戶隱私權益，手機系統針對產品調用權限進行了阻力設計，需要用戶的授權操作。提高用戶的各類功能授權就需要設計師探索，降低用戶的排斥感和提高授權的利好政策才能獲得授權。
抖音在引導用戶開啟通知權限的設計中，采用了動態畫面的表達來強調開啟通知的利好政策，以此來攻破用戶的心理防備。相較于生硬的彈窗提示，動態的表達和引導性的文案更能拉近與用戶的距離感。
五、沉浸式的活動氛圍設計
沉浸式的體驗可以帶給用戶更好的場景感，提高用戶的參與度。在活動的設計中，不斷向游戲化和沉浸式方向加強體驗，提高活動的趣味性和強化用戶參與的積極性。
騰訊視頻在情人節的互動活動設計中，就將搶紅包的活動融入到當前的界面中，紅包雨鋪滿整個屏幕，以趣味性的形式滿足用戶心理。不隔斷與界面之間的聯系，降低活動對用戶的干擾，進而提高活動氛圍感和參與度。
六、人性化的提示設置
短視頻近些年改變了大家的生活方式和娛樂形式，也有用戶容易過度依賴進而影響休息質量。
抖音作為短視頻領域的頭部產品之一，在增強用戶體驗的同時也要起到良性的引導作用。當用戶刷短視頻一定時間后會彈窗提示休息，而提示時間用戶可以根據自己的實際情況進行設置，靈活的設置可以讓用戶合理分配時間。健康使用的引導可以讓用戶感受到產品的溫度，提高用戶體驗的認可度。
七、動態感知的溫度設計
天氣預報是用戶關注度較高的信息，對于溫度的感知可以讓我們出行更容易把控。在產品中顯示天氣情況也是一種情感化的升級，可以帶給用戶更有溫度的體驗。
利用餓了么 APP 點餐之后，首頁會顯示配送情況和當前的天氣溫度，背景以動態的天氣畫面增強視覺感知。也希望用戶可以根據天氣情況對外賣員多一份理解，加強人與人之間的寬容心，帶給用戶更強的情感化體驗。
最近在使用愛奇藝 APP 時，發現左上角的品牌位置也結合了天氣情況，結合頂部視覺區域的流體漸變，新增的天氣預報和品牌 LOGO 完美的通過動效過度。整個設計表達流暢自然，感官體驗也是非常值得學習的。
八、無處不在的廣告位開發
廣告是眾多產品實現流量變現的方式之一，廣告位的開發也是見縫插針，如何在僅有的空間增加更多廣告位，產品設計師也在不斷探索。
最近在使用騰訊視頻 APP 時，進入到個人中心時會默認有個下拉廣告。這個見縫插針的廣告位新增，對于設計師來說讓我感受到了廣告的無處不在，不過對于用戶來說是否會心生排斥感得通過數據去驗證。但是作為產品設計師這也是一個啟發，將有限的空間進行深度開發，還不會影響已有的結構布局，這也是一個啟發性的案例。
九、主題化的圖標設計
圖標是產品中不可或缺的存在，圖標設計的研究也是設計師需要重點對待的技能范圍。精美的圖標不僅可以提高產品的感官體驗，也能吸引用戶的關注度，進而提高業務模塊的點擊欲。
最近在使用順豐速運小程序時，寄快遞欄目的各業務入口圖標設計非常引人注目，結合主題化的圖標設計突出了活動傳播力度。對于工具型產品而言，強化氛圍感可以打破用戶原有的認知，不僅可以突出活動主題，也能強化用戶對產品的視覺感知。
十、新穎的卡片式設計
卡片式設計已經流行好幾年了，目前依然是非常普及的 UI 設計趨勢之一。如何進一步強化卡片式設計的創新度，我們需要不斷的嘗試和總結。
嘩哩嘩哩 APP 的創作中心設計也許是一個不錯的啟發，卡片內部右上角的視覺強化使得原本普通的表達變得更有視覺感。突出的設計也成功的吸引了 UP 主的注意力，強化了該入口的點擊欲。這樣的設計表達在保留卡片式設計的基礎上，也是一種新穎的視覺表現，可以作為突出業務入口的表現方式進行探索。
作者：黑馬青年 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
眾所周知，「用戶體驗五要素」出自Jesse James Garrett 的《用戶體驗要素》一書：戰略層、范圍層、結構層、框架層、表現層。
產品設計者和開發者的角度可以對應理解為：為什么做、做到什么程度、這些東西如何組成、規劃用戶操作行為、如何呈現這些東西。
「Live Activities設計規范」由蘋果出品，原文為英文，上一篇已翻譯https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了個人對其內容的敘述方式存在一點意見。為了更好的記住&理解「Live Activities設計規范」，使用比較熟悉的「用戶體驗五要素」對內容進行整理。
原文提供的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顯示特點：
1. 內容是頻繁更新的、有進度/狀態顯示的、用戶關心的。
2. 內容的信息量是一眼就能看完的程度。
但上述仍是表象，并非實質，接下來思考這幾個問題：
1. 為什么顯示的是進度/狀態頻繁更新的內容？
2. 為什么要強調用戶關心的？
3. 為什么信息量是一眼就能看完的程度？
沒有Live Activity時，頻繁更新主要靠push推送。但push容易被其他APP的push覆蓋，且隨著各種APP的頻繁使用，用戶獲取關鍵信息的效率和通過push打開APP的次數反而在下降。
進度/狀態頻繁更新的內容，說明每個狀態存在的時間短，如果被覆蓋/忽略，同一狀態就不再復現，用戶所關心的，或APP所希望用戶關心的，就看不到了。比如：什么時候取外賣、待付款、上傳成功等等。
當下我們所處的時代是信息泛濫的時代，需要對信息作精簡，但用戶的操作是可以多條線進行的，比如比如邊看劇邊吃飯、上班摸魚/等外賣、比如聽音樂的時候寫作。
信息內容和量是官網一直在強調的，需要精簡，只展示用戶需要的，基本達到一眼看完的程度，目的就是知道變化的是什么，當前狀態是什么。
分析了這么多，大膽推測一下Live Activity的設計初衷是：快&準確&輕。而終極目的是打動用戶，形成好體驗，進而推動口碑和銷售；為各APP提供新的通知形式，互惠互利。當然Live Activity在一定程度上也彌補了硬件上的缺憾。
關于這個層次相當于規定功能范圍&信息邊界限制，就是什么要，什么不能要。這部分的信息官網給出許多，在此將其分類梳理如下，為避免大家不好查找官網/譯文對應出處，在句未已標注。
1. 僅iPhone支持，iPadOS、macOS、tvOS或watchOS不支持。（源自：平臺注意事項）
2. 非iPhone14的僅針對iOS16有鎖屏Live Activity展示。（源自：什么是Live Activity-鎖屏）
3. 支持用戶手動清除鎖屏狀態下的Live Activity。（源自：實際操作）
4. 支持用戶直接關閉對應APP的Live Activity。（源自：最佳實踐方式第3/c條）
5. 支持Live Activity自動開始&結束。（源自：最佳實踐方式第6/f條）
6. 限制跟蹤活動/狀態時長不超過8小時。（源自：最佳實踐方式第1/a條）
7. 限制活動/進程結束后展示時長不超過4小時。（源自：最佳實踐方式第8/h條）
8. 支持更改背景顏色&不透明度。（源自：設計有用的Live Activity第5/e條）
9. 限制內容布局。（源自：設計有用的Live Activity第5/e條）
10. 限制不同設備的展示尺寸。（源自：規范）
1. 避免在Live Activity中顯示敏感信息。（源自：最佳實踐方式第4/d條）
2. 避免在Live Activity中顯示廣告和促銷活動。（源自：最佳實踐方式第5/e條）
3. 只提供正在進行的任務/事件的關鍵摘要。（源自：最佳實踐方式第2/b條）
4. 在任務/活動結束前，給用戶提供關閉Live Activity按鈕。（源自：最佳實踐方式第6/f條）
5. 點擊Live Activity直接定位到對應頁面，無需用戶二次導航。（源自：最佳實踐方式第7/g條）
6. 考慮在活動結束后，鎖屏上在合理時段后自動刪除Live Activity。（源自：最佳實踐方式第8/g條）
（個人猜測）由于是提供一個展示區域，且展示區域有限，所以對于層級架構，一級展示什么，二級展示什么，各階段展示什么，這些都沒有做明確規定&建議。各家APP可以根據自身實際情況進行設計。
通過Live Activity的展示形式，可以總結為2點：吸引、查看（摘要&詳情）。
1. 一般是在原深感攝像頭兩側展示（電話會直接展示擴展型），分為緊湊型和最小化。
2. 緊湊型在僅有一個活動/事件的時候展示，雖被原深感攝像頭分割兩端，但僅作為一條信息展示，為了視覺上的統一，這里的顏色不支持開發設置，使用的是系統默認色值。
3. 最小化在存在多個活動的時候展現，左側和原深感攝像頭粘連，右側獨立成島。
4. 不管是緊湊型，還是最小化，都可以通過點擊原深感攝像頭區域，進入APP內頁，或者長按喚出擴展型。
1. 進入內頁的查看基本就是各家顯神通了，這里主要講擴展型和鎖屏。
2. 原則上是不支持在擴展型和鎖屏做復雜操作的，基本點擊是進入APP。
3. 擴展型是用戶長按緊湊型/最小化喚起的展示區域，內容是可以自定義的，當然官方也給了相應的建議，具體如下。內容信息種類多的可以采用這種信息左中右排布，底部預留大按鈕。內容信息少的可以采用左內容右操作的方式。
4. 根據一致性原則，鎖屏展示的布局框架應該與擴展型差不多，同樣可以點擊打開APP。只是在鎖屏狀態如果有多個任務同時進行，是會全部展示的，所以要注意品牌的傳遞，避免用戶混淆服務方。
對于如何呈現這些東西，蘋果還是寫了很多建議，確保視覺上的一致性和美觀。
1. 緊湊型狀態下，為了保證兩側信息的連貫，除了語句閱讀連貫，還需要在圖形和顏色上具有一致性，視覺上連貫。
2. 鎖屏狀態下的背景是可以自定義顏色、圖像、不透明度的，當然文字的色值和不透明度也是可以定義的。這就涉及到兩者間的對比度對信息閱讀的影響。
3. 設計師不僅要考慮最佳狀態，還有深色&淺色模式下的，以及不同環境光、設備亮度下的顯示。還有一點很容易忽視的，就是在用戶自定義的墻紙下顯示的效果。不僅要注意信息獲取，還需要考慮美感問題。
1. 緊湊型和擴展型之間的布局要保持一致，兩者間的變化過渡效果是可以預測的。
2. 一般來說，擴展型和鎖屏狀態下的信息間標準間距是20pt。
3. 在某些情況下，例如圖形和按鈕，您可能需要使用更緊湊的邊距，以避免擠滿邊緣或形成混亂的外觀。
1. 內容和Live Activity邊緣之間的邊距需要保持一致，請遵循SwiftUI規則。
1內容和Live Activity邊緣之間的邊距需要保持一致，，發現以圓角邊界為測距點得到的間距關系較為舒適。即：圓形/大致為圓形的圖形保持上下，3. 以及左側或者右側間距一致即可；方形/大致為方形的圖形保持圓角邊界與容器圓角邊界垂直對齊即可。同一位置的多個圖形圓角需要相對統一，才能確保間距的一致性。
需要適應不同機型的尺寸。具體的尺寸規范如下。
動態島使用44個點的角半徑，其圓角形狀與原深感攝像頭相匹配。
下表中列出的所有值均以pt為單位。
ps：左側為寬度，右側為高度。
以上就是整理分析的全部。
在整理分析過程中加強了對「用戶體驗5要素」各個層劃分的理解，也對Live Activity在各個層次上的要求更加明確。
企業級B端產品具有行業壁壘高、業務復雜、服務角色多等特點，在大型迭代項目中，如何做好設計協同，把握設計一致性和還原度常常讓很多設計團隊感覺無從下手，找不到切入點。在長期的項目實踐中我們發現，做好設計規范能規范可以幫助個人、團隊以及整個企業提高效率和產出質量，保障用戶體驗統一。
那么，我們該如何做好體驗標準化，保障基礎體驗一致性？下面將和大家分享我們公司在構建設計規范的實踐案例。
以我們設計團隊為例，隨著業務不斷擴大，定制化需求不斷增加，大型迭代項目做不好設計和開發協同，導致出現“體驗一致性差”“設計效率低”“還原度不可控”等問題。如何有效解決這些問題呢？可以通過構建設計規范，以保證一致性，實現工作提效。
從不同角度出發，構建設計規范都能發揮積極的作用。
對企業來說：有利于實現產品經理、設計和研發的輸出一致。設計側主動建立產品設計規范，很大程度上是為了做好設計管控，實現原型、設計稿到線上頁面統一的設計語言，從根本上提升設計質量和還原度，提高用戶滿意度。
對個人來說：當多個設計師共同協作同一項目時，由于設計理解不一致等原因，容易出現設計控件使用混亂等問題。若有詳細的設計規范作為引導，有利于實現產品各個模塊間的一致性。組件化的工具也能減少機械重復性的工作，讓設計師將更多精力投入到用戶研究和提升用戶體驗上。
產品有不同發展階段，設計規范同樣也有，不同階段下的產品目標和規范需要覆蓋的內容都不盡相同。我們要既要避免做多，保證投入產出比最大化；同時也要構建一個合理的規范迭代思路。
該階段的產品核心目標是「驗證產品或商業模型」，業務需求都是小步快跑、頻繁迭代。產品處于從0到1的野蠻生長狀態，存在著“先滿足功能，再優化體驗”的情況，導致該階段的產品體驗往往不太過關。
搭建目的：通過定義原則，梳理關鍵頁面和流程，搭建基本的規范框架。既讓團隊對產品有統一的設計價值觀和認知判斷；從頁面到流程，又能對應設計參照標準；同時業務可以在規定的框架下發展，不僅讓產品體驗的根基牢固，而且不會限制功能設計自由。
搭建范圍：「全局說明」「頁面布局」「通用流程」
該階段的產品基本形態已穩定，也形成了初步的模型結構。后續迭代是在現有結構的基礎上，進行增加或優化功能。雖然探索期定義了產品原則、布局和流程，但探索期產品的自由生長，會導致不少設計細節不一致，從而影響了產品整體的體驗和效率。
搭建目的：通過回溯整理過往設計，沉淀優化成完整的交互規范。再根據規范統一產品體驗，進一步優化流程和效率， 讓整個產品體驗達到相對穩定的狀態。
搭建范圍：「全局說明」「頁面布局」「通用流程」「基礎組件」「業務組件」
好的設計規范有很多優秀的例子，例如Google、Apple、Microsoft這些引領全球設計風尚的公司，設計規范已經上升為設計語言，指導旗下所有產品的設計。國內做的優秀的案例，比如Ant Design，Element，arco.design等，像這類的產品已經實現了端到端的體驗一致，把交互、前端和視覺的事情一并解決了，是值得學習的典范。這些優秀的設計規范都包含以下幾個特點：靈活性，可擴展性，系統性和標準性。
一般團隊內部構建的設計規范都源于某一產品或者業務，因為主要是團隊內部成員使用，追求的是投入產出比最大化。所以可在行業通用設計規范的基礎上，適度參考行業設計規范，能復用的直接參考，同時專注于業務本身，具有業務特性的再集合業務綜合考慮，使整個規范制定效率更高，科學性、指導性更強。
設計規范的執行和推動主要分為四大步驟：
類型梳理：分析業務場景，整理和歸類組件，評估具體組件優先級和迭代計劃；
全局說明：統一布局，色板，字體，常用樣式，規范設計語言；
抽象設計：將設計共性抽象出來，構建組件通用方案；
效果驗證：通過定性/定量數據追蹤效果，分析原因，迭代改進；
收集現有設計頁面，分析業務場景，再參考行業通用規范的定義，整理和歸類組件，可以先羅列完整，再根據產品實際業務需要進行增刪改。
全局說明：明確影響整站各個模塊、各個頁面設計的原則和規范，指導我們后續各種規范的定義和設計。包括統一布局，色板，字體，樣式等設計規則。
基礎組件：可參考行業通用規范中的基礎組件分類和組成，因為大部分基礎組件都具有一定的通用性，站在巨人的肩膀上更高效。這里我們根據實際情況，將基礎組件分為導航，通用，數據展示，數據錄入，反饋5個大模塊，每個模塊下再細分各小類，構成基礎組件的類目。
業務組件：根據業務需求，可以定義屬于自己的業務組件，這也是區別于其他通用行業組件庫的一個核心部分。
因為在大體量產品設計中，每個模塊都由不同的同學負責，這樣全局產品的把握就會降低，需要去補充全局規范說明去維持產品全局通用部分的一致性。包括布局，色彩規范，字體，樣式等；
抽象設計是設計規范中最核心，工作量最大，難度最高的一個環節。我們可以將它拆解成幾個部分，先做出基礎組件，再基于基礎組件和業務需求抽象設計業務組件，最后抽象成頁面模板。
基礎組件
組件庫的搭建，就一定要提到原子思維。道爾頓原子論認為，物質世界的最小單位是原子，原子是單一的，獨立的，不可被分割的，在化學變化中保持著穩定的狀態。這個原子理論同樣適用于設計系統中。
其中，最小單位設計元素就是基礎組件。我們在做設計系統的時候希望當你改動任何一個原子，你有自信其他所有依賴于這個原子的部件全部自動更新。只有滿足了這一點，設計系統設想中的效率、解放生產力才會真正實現。例如，在sketch中，分享樣式和嵌套符號的使用。
業務組件
在構建完基礎組件后，可以根據業務需求，將使用頻率較高的組件進行評估，抽象成業務組件。
一般業務組件可分成兩大類：
一類是由多個基礎組件組成的帶有業務需求復合組件，如：復合標簽，快捷時間選擇器等；
另一類是針對特定業務場景的業務組件：如地圖，站點等；
頁面模版
在完成基礎組件和業務組件的構建后，我們可以根據全局說明，利用組件搭建頁面模板。頁面模版不僅能有效的提升組件的使用效率，也能提供很好的組件使用示范效應，加強設計說明和組件之間的結合。
組件質量評估：從物理到行為層，包括樣式、組件、框架、組件交互 共4個維度。通過一致性評分衡量標準化覆蓋的好壞。
系統應用層面的評價：
系統是否幫助業務提效；
當業務不能直接應用系統，能否靈活改動；
系統是否幫助業務變得更有競爭力、更創新；
迭代機制
當我們完成設計規范的整體構建后，對于新需求，通過評估復用性、通用性和優先級，低級別的走定制設計完成交付。高級別的通過抽象設計、內審、沉淀到組件庫中。
機制提效
在完成設計規范的構建后，我們可以聯合產品經理和前端工程師，幫助每個環節的人員快速搭建產出物，推動上下游機制提效。
例如，我們會基于設計規范，為產品經理提供符合設計規范的Axure元件庫，產品經理使用元件庫，可以快速搭建原型，產出prd，與設計師、開發的溝通也更加順暢。簡單的修改可以跳過設計師出圖這一步驟，直接和開發溝通，極大加快前期的節奏。甚至通過借助元件庫，產品經理可以搭建出高保真原型，用于直接和用戶確認或者給客戶進行demo的演示。
基于設計規范，推動研發實現組件代碼化，通過設計標準化可以達到研發工業化。通過定義標準規范，提高流程、組件的復用率，開發側就可以制定相應組件，形成前端腳手架，方便后期迭代的組件化使用，有效地避免不必要的分歧點和重復造輪子，同時減少上線前設計走查、測試的工作量，保證落地效果，提升生產力。
以上就是我們在構建自己的企業設計規范的流程，最后，給大家展示一下，我們目前的企業設計規范和部分應用情況。
如何讓自己的產品在保證基本的可用性和易用性的同時，還能讓界面看起來柔和、更富有親和力？一個產品能留住用戶的雖然是內容本身的質量與吸引力，但一個小小的細節卻能夠阻止用戶的流失，成為內容轉化的最后一道防線，讓人眼前一亮，值得借鑒。
體驗目錄：
01. 【剪映】化繁為簡，突破性的C端深度編輯交互界面！
02.【剪映】組合操作，簡化界面跳轉的“批量編輯”
03.【必剪】軌道按鈕文案自適應滑動跟隨
04.【剪映/IOS】首頁新增（試試看）教程專區板塊，快速入門軟件
05.【剪映】“剪同款”功能，讓用戶快速出片
06.【剪映】上滑升起列表，讓用戶查看選擇更加直觀
07.【剪映】不同類型的模塊，分區展示
08.【剪映】選中特效后，自動播放（特效預覽效果）
09.【剪映】濾鏡功能“單行瀏覽”的原因以及必要性
產品體驗：
在此前，用戶想要對視頻進行剪輯操作，用戶大多都需要使用電腦的Ae、Pr等剪輯軟件，此類軟件體量大，操作門檻高，而且需要有電腦的存在，在人手一臺智能手機的今天，剪映等專業剪輯APP的出現，填補了用戶需要在手機上進行視頻剪輯的需求空白。
剪映的UI交互界面，既保留了Ae、Pr等專業剪輯軟件的界面特點（畫面軌道，音頻軌道），也大大的降低了剪輯軟件的操作門檻。
剪映的UI交互精明之處在于，它將專業剪輯軟件的復雜，位置隱蔽，但又常用的剪輯操作。「整合」成為底部一個個顯眼的功能圖標，并且用極為精簡易懂的文案，對功能進行了一個充分的描述。這一舉動，大大降低了用戶對剪輯軟件復雜功能的理解門檻，用一種整合式的思維，提供功能給用戶合成使用。這簡單易懂的交互體驗，也大大提高了用戶的黏度，忠誠度。讓小白用戶接觸了剪映后，再也無法回到Ae、Pr了。
交互思考：
在AI人工智能浪潮下，一切機器輔助，機器完成，需要人效的地方越來越少，在這大背景下，我們軟件的用戶只會變得越來越懶。
在新時代的背景下，我們UI、交互設計師，需要一種寶貴的「化繁為簡」能力，在不影響最終呈現效果的前提下，將一個軟件的交互體驗，文案、功能理解，以及功能使用操作做得越簡單，用戶的黏度，忠誠度就會越高。
一個工具類APP何為「好用」？也許就是像剪上映一樣，“化繁為簡，成效依然”
產品體驗：
在剪映中，識別字幕的交互邏輯，是自動識別所有視頻片段的語音，并且插入時間線中，識別字幕是【批量進入時間軸】的。所以想統一進行編輯，得一個個反復選中，然后逐一檢查，這種累人的交互體驗，讓用戶用了第一次就不會想用第二次。
剪映推出了「批量編輯」交互功能。
語音識別后，用戶點擊其中一個識別字幕，底部第一個功能就是「批量剪輯」功能，點擊后，可以一鍵編輯全體的識別字幕內容，減少了用戶調整識別字幕是的操作交互時間，增加了用戶操作效率
設計思考：
在產品的功能交互設計中，不妨使用剪映的「整合思維」，將一些重復性高，標簽統一，可統一操作的元素整合在一個功能中統一編輯，減少用戶的操作切換與跳轉，增加用戶的交互體驗與操作效率
產品體驗：
在必剪中隨著用戶左右移動，軌道按鈕的文案也會跟隨移動，讓用戶無論滑動到何處，什么位置，都能清晰的知道軌道的應用名稱，而不會出現混淆的情況。最大程度上，減輕了用戶的理解成本
設計思考：
當我們的圖標，功能板塊，或者某些重要信息，被用戶左右、上下滑動導致超出屏幕展示區域，用戶想回頭找到這些元素，就得重新滑動到對應位置，走一趟“回頭路操作” 。這對用戶來說其實是不便捷的，對交互設計來說，是不聰明的
我們可以利用【必剪】的文字跟隨交互，來舉一反三，讓一些重要的功能，信息區域，隨著用戶的滑動而自適應跟隨，最大限度地保證用戶他不錯過這些重要的功能、信息。
產品體驗：
在用戶（特別是大齡用戶），在初次使用【剪映】這種有一定入門難度的APP的時候，其實都是感到陌生的，新手指引雖然能一定程度解決此問題，但是新手引導只能在第一次打開APP時展示，而且新手指引有非常強的局限性，它只能告訴能這功能要怎么用，而無法告訴你這功能的使用場景。
所以在首頁中新增一個軟件使用技巧、教程專區，可以讓有需要的用戶第一時間觀看課程，入門軟件，而且課程用戶可反復觀看，不像新手指引般一次性展示。
這種交互體驗，大大減輕了用戶入門軟件的難度。
設計思考：
在我們設計的產品是一個工具型軟件，且有一定入門、使用難度的時候，不妨參考一下【剪映】的首頁+軟件使用教程 的交互思維。
用最低成本教會用戶如何使用這個軟件，而且展示位置是每次打開APP時都會看到的首頁，不用擔心一些粗心的用戶錯過。
產品體驗：
在剪映Tap欄中，有一個 “剪同款” 功能，選中對應的視頻模版后，填入自己相冊的素材，聽過自動剪輯，特效覆蓋，自動填充文字、BGM等一系列操作，支持用戶一鍵快速成片。
設計思考：
在流量為王的時代，內容輸出效率就代表了一切，剪映的 “剪同款” 功能，就是讓用戶的內容輸出效率大大提高，將輸出內容的過程簡單化，無腦化，用戶無需再去想用什么創意，視頻用什么BGM，以及視頻特效如何制作，這些都由APP的模版設計師幫你搞定，用戶需要做的，就是提供出自己的素材即可。
這給予了我們產品設計師一個啟發，在我們設計產品時，是否也能關注一下，急需內容輸出，但內容輸出困難的領域呢？也能把一些可自動化實現的步驟（如特效，BGM，字幕等等），交給系統，用戶只需參與拍攝或提供一小部分素材，即可生成一條優質的內容。解決用戶輸出內容痛點，從而留存用戶數量，從而實現用戶量變現。
產品體驗：
在剪映APP中，一些展示選擇列表的功能中，用戶上滑，列表都會隨之升起，讓用戶可以更直觀的查看選中其中內容，大大增加視覺傳達效率。
讓用戶不會被窗口高度限制，更高效地瀏覽、選用列表中的元素，增加產品功能成效效率
設計思考：
當我們的瀏覽窗口，因UI布局高度受限時，設計師可以通過【窗口隨著滑動響應移動】的交互方式，使得界面UI交互更多變幻，更為靈活。
產品體驗：
在剪輯APP中，難免會有許多種類不同，作用各樣的模塊，但是剪輯軌道UI展示的空間有限，如果沒有分區思維，那么整個剪輯軌道將會變得雜亂不堪，用戶用久了看到各種軌道模塊，也會疲勞過載
而剪映提供的UI解決方案也非常值得參考，將各種不同種類的效果軌道模塊，分區展示，在用戶點擊【特效】前，剪輯軌道不展示所有的【特效模塊】，在用戶點擊【特效】功能后，才展示對應的【特效模塊】軌道
設計思考：
在我們面對多種不同類型，但是作用相同對象的作用對象時，利用交互思維，在UI界面上進行視覺分類很重要，否則你整個APP的操作界面將會雜亂無章。
剪映給了我們一個很好的參考，就是將不同種類的對象 【分區展示，分區管理，分區操作】，最大限度的保證交互界面的簡潔舒適，且分類也能讓用戶更好的“點對點”進行操作，節省尋找對應操作對象的時間，所以，分類思維 是目前作為交互設計師的一項必不可少的技能了。
產品體驗：
在剪映APP中，當用戶選中特效，系統會自動播放【特效預覽效果】，且自動暫停（如特效時長3s，那么系統播放完3s特效效果后會自動暫停，不會繼續播放）
用戶可以直接了當地查看特效與畫面融合的效果，而不用選中后，再點擊播放預覽效果，覺得效果不滿意，還得反復切換。這種交互方式，大大節省了用戶的選擇模版時間，讓其成為（選擇+預覽=選中） 的高效交互流程
設計思考：
在我們設計一些需要實時預覽的功能時，我們不妨參考一下剪映的（選擇+預覽=選中）的高效交互流程，讓用戶免去反復操作預覽，重復選擇的無效交互，提升用戶在工具型APP的內容輸出效率
產品體驗：
當用戶在剪映中喚起濾鏡功能列表時，難免會感到驚訝，以及提出疑問：“為什么剪映要用單行瀏覽這種低效的交互方式？”
但是只要你仔細思考，并付出實踐你就會明白，剪映在濾鏡列表中，使用單行瀏覽的原因。
因為用戶對濾鏡的選擇，是出于此濾鏡的畫面效果，所以展示濾鏡效果時，濾鏡效果圖的比例大小是否清晰顯得尤為重要，所以，剪映犧牲了一些瀏覽效率，但是大大保證了用戶對此濾鏡的瀏覽精讀。
另外，濾鏡列表不同于特效列表，具有大量重復圖片填充。濾鏡幾乎每張填充的圖片都是有所不同的，所以使用多行列表式排列，在多種不同顏色，不同風格的圖片填充下，畫面會變得雜亂不堪
設計思考：
當我們遇到，填充圖片風格各異、或者注重展示畫面的列表設計時，可以參考剪映，犧牲一下瀏覽效率，保證瀏覽舒適度，精讀的設計方式，來防止我們設計的列表在視覺交互上顯得雜亂無章
作者：堅行 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
設計過程被描述為多個階段，每個階段都包含不同的活動來完成該階段，它沒有統一的標準流程，每個公司和設計師都有自己的流程版本。
盡管存在多個流程，但一般流程和階段類似于以下內容:
了解問題：初步了解問題。觀察、采訪和傾聽用戶。
定義問題：解釋和定義要解決的問題。
構思：通過頭腦風暴產生盡可能多的想法。
原型設計：構建原型并與其他人分享（ 再次縮小解決方案空間，為實驗階段 ）。
測試：測試可能的解決方案、實施、改進或重新設計。
傳統的問題解決采取有條不紊而又科學的形式。該過程從一個問題開始，定義要采取的步驟以及達到解決方案的工具或方法。
設計思維是一種創造性的策略，可以產生創造性的未來結果和/或創造性的問題解決方式，它應該被認為是一種以解決方案為中心的思維策略。
它通常被描述為一種創造性、主觀和感性的對許多大型組織的分析邏輯（ 布朗，2008 年 ），或作為分析和創造性推理模式的組合（ 鄧恩 & 馬丁，2006 年；利特卡，2015 年 ）。
設計思維來源于常規問題解決方法，常規問題解法是設計思維的基礎。
從解決問題到設計思維，Liedtka (2013)
結果發現，設計思維實際上也是一個解決問題的過程，而不僅僅是一個創新過程（ 利特卡，2013）
一個例子是，豐田采用設計思維從頭開始分析其西海岸的一個客戶聯絡中心，在重新設計過程中，組建了一個由一線呼叫代表、軟件工程師、業務主管和變革代理組成的跨職能團隊，這一舉動最終改變了客戶和員工的服務中心體驗。
我們每天都會遇到問題，但是當我們解決同樣的問題時，它們就成了例行公事（ 似乎已經忘記它們是問題了 ），我們甚至都沒有意識到正在解決這些問題。例如，我的辦公室在 30 分鐘路程之外，該怎么到達那里？開車、坐火車或巴士到目的地；除非車子輪胎被刺破，否則你就需要弄清楚如何到達辦公室。
1990 年代，IDEO 的 David Kelley 和 Tim Brown 與 Roger Martin 共同創造了特定術語：“設計思維”，并將多年來醞釀的方法和想法封裝成一個統一的概念。
設計思維是以人為中心、開放式、基于問題的方法論。這種方法最初是為了改變工程教育中的教學方式，而工程師處理和解決問題的方式有其設計思維的基礎。
設計思維一詞可以追溯到 1987 年 Peter Rowe 的著作：“設計思維?！?他描述工程師和建筑師處理問題的方法有很大不同。
90 年代初，認知科學家 Don Norman 加入 Apple 團隊，擔任他們的用戶體驗架構師，這使他成為第一個在職位中包含 UX 的人。他提出了“用戶體驗設計”這個術語，因為他想“涵蓋人們對系統體驗的所有方面，包括工業設計、圖形、界面、物理交互和手冊?！?從那時起，這些領域中的每一個都將用戶體驗，擴展到了自己的專業領域。
設計思維在解決“棘手問題”時特別有用。
棘手問題的特征
“棘手問題”一詞是由設計理論家 Horst Rittel 在 1972 年創造的，用來描述本質上非常模糊 \ 特別棘手的問題。棘手問題，有很多未知因素，沒有確定的解決方案。問題或解決方案可能與另一個棘手的問題有關，因此這是一個需要設計思維的持續過程。貧困、饑餓和氣候變化是一些現代的棘手問題。
設計主題的范圍是普遍的，因為 設計思維可以應用于人類經驗的任何領域。
它可以用于：
符號和視覺傳達：這包括平面設計的傳統工作，如排版和廣告、書籍和雜志制作、科學插圖、攝影、電影、電視和計算機顯示。
材料：這包括對日常用品的形式和視覺外觀的傳統關注 —— 服裝、家用物品、工具、儀器、機械和車輛。
人類活動和組織性服務：包括對物流的傳統管理關注，結合物質資源、工具和人類低效的序列和時間表，以達到特定的目標。
復雜的系統或環境：生活、工作、娛樂和學習。這包括系統工程、建筑和城市規劃的傳統關注點，或復雜整體部分的功能分析及其隨后在層次結構中的集成。
設計思維起源于設計師的培訓和專業實踐，但這些原則可以被每個人實踐并擴展到每個活動領域。（布朗，2013 年）
在企業中，設計過程可以為企業環境中的問題解決帶來創新思維。它還可以用于醫療保健，通過向護士、醫生和管理人員教授設計思維技術，我們可以激勵相關從業者貢獻新的想法。
不管是什么設計，理解和研究問題是必不可少的，因為我們能夠從其出發，從而進行以用戶為中心的設計。
設計思維的最早階段是搞懂你能帶來的情感價值。設計思維方法迫使你停留在提問與質疑階段，而不是準確定義出問題后進入下一階段。我們都有過快進入解決方案模式的傾向，所以設計思維方法迫使你真實地存在于這個不清楚、有時還非常混亂的時刻，從而使你對要解決的問題產生更好的理解。（利特克，2013）
傳統的問題解決涉及提出一個解決方案，但設計思維首先使我們發散，試圖為問題生成各種可能的替代解決方案。然后讓我們進行收斂性思維，縮小多種可能性，找到單一的最佳解決方案。
根據利特卡和奧美 (2011) 的說法，設計思維的全部意義在于學習一種新的、系統的解決問題的方法。正如我們思考創造力一樣，即使是設計思維也可以通過實踐來教授和改進。
設計過程從來都不是線性的，它由多次失敗和迭代組成（布朗，2018）。
首先，設計師試圖將問題與過去的類似案例聯系起來。如果這種方法不能提供任何解決方案，下一步就是使用知識和創造力作為一種實驗思維形式來產生新的想法。使用決策矩陣對這些想法進行評估，從而會產生被進一步分析和測試的解決方案。如果成功，它將被實施。如果不成功，則需要重新表述問題，并重復該過程。這是一個迭代過程，即循環方法。
這一持續不斷的重新再設計過程，源于和客戶親密接觸的洞察。
學習設計思維不僅僅意味著學習一套新的工具。它還意味著：學習收集和分析大量數據；學習挖掘對象可能的形態而不是自主認為他是什么；學習管理不確定感，以及與許多新的伙伴合作（ 利特卡和奧美，2011）。你可以進行的研究類型分為三類：生成性研究、評估性研究和驗證性研究。
一種常見的表述 —— 實際上是設計思維的另一種視角 —— 即設計師應該預料到會“很快失敗或經常失敗”（布朗，2009）。
當過程早期發生故障時，例如被拒絕的原型，實質上它可以為有效解決方案提供關鍵見解。這種觀點與傳統的先形成理論，再檢驗正誤的方式相矛盾。
Airbnb、Braun 和百事可樂等多元化公司都在 采用設計思維并將其作為核心戰略。例如，IBM 為全球旗下的 44 個設計工作室聘請了 1600 名設計師，并且正在培訓數以萬計的設計師員工建立深度創新能力 ( O'Keefe, 2017 )
設計思維為我們解決問題添加了以人為本的元素。當我們試圖通過牢記人們的想法來解決問題，并使用基于直接觀察乃至訪談的研究時，我們便會捕捉到與消費者需求一致的意外見解和創新。
它有助于將成功的產品更快地推向市場，最終節省企業資金。
IBM 的健康和人類服務組織的設計思維實踐，通過有效使用設計和設計思維幫助企業將缺陷數量減少了 50% 以上。這種更高效的工作流程導致計算出的 ROI 超過 300%。
由于復雜的問題從來不能被所有人完全理解，因此在嘗試設計解決方案時，處理歧義和多個并發的思路方向的能力是至關重要的素質。
設計思維通過綜合和歸納思維，幫助實現質的飛躍。它允許通過解構來測試約束，并允許通過多樣性思維和批評思維，來擁抱和探索歧義。
消費者通常不知道他們有什么問題需要解決，或者他們無法用語言表達出來。只有經過仔細觀察，設計者才能根據真實消費者行為中看到的東西來識別問題，而不是簡單地根據對消費者的想法來確定問題。這有助于定義模棱兩可的問題，并找到解決方案。
該方法鼓勵“跳出框架思考”（“瘋狂的想法”）；它蔑視顯而易見的事物并采用更具實驗性的方法。
在早期的流程階段鼓勵大膽的想法，以產生創造性的解決方案。使用它是為了讓設計師可以嘗試開發新的不受約束的思維方式，或對常見問題的創新解覺方法。
根據大多數設計學院的說法，具備特定特質的人能夠更好地發揮設計思維的作用。
同理心：從多個角度想象世界 —— 同事、甲方客戶、實際使用者和消費者的角度。要成為更好的同理心，必須傾聽和觀察他人的行為，注意并獲得洞察力。
綜合思維：重要的是不僅要有分析能力，而且要能夠提出新穎的解決方案，還要憑直覺。
樂觀：除非你相信有解決方案，否則在遇到挑戰且解決方案遇到瓶頸時，你可能會放棄。
實驗主義：重大創新并非來自漸進式調整。設計思想家以創造性的方式提出問題并探索限制因素，并朝著全新的方向發展。
協作：產品、服務和體驗日益復雜，因此必須擁有一支具有不同背景的團隊，以幫助從多個角度看待問題。
當我們想到一個問題的多種解決方案時，對我們解決問題會非常有幫助，因此“功能固定性”阻止了我們以新穎的方式使用舊工具解決新問題。想要擺脫功能固定，首先是要讓人們可以使用“改造后的衣架進入上鎖的汽車”。這也是盜賊第一次可以用信用卡撬開簡單的彈簧門鎖。
為了幫助設計師利用文科和技術理論，整合多個領域的知識以找到創新的解決方案，我們采用設計思維來獲得洞察力。該方法側重于可視化和操作，因而幫助我們更容易地了解實際解法，而不僅僅是理論模型。
第一批美國公司在 2000 年代初期開始實施設計思維，這一概念引起了德國投資者 Hasso Plattner 的興趣，他于 2006 年資助創建了兩所設計學校（d.schools），其中一所位于波茨坦大學（德國），另一所位于美國斯坦福大學。由于兩所學校都成功地為大型組織提供了高管設計思維培訓，因此該研究重點關注這些國家，以尋找早期實施者。
設計思維通常涉及希望參與整個設計和開發過程的龐大利益相關者團隊。
觀點、才能和經驗的多樣性被認為是注入新思維的部分重要來源。多樣性確保通過融合不同的觀點、技能和知識來產生創意（卡振思，2018 年；薩梅和德拉赫-扎哈維，2013 年）。設計思維的協作方法和工具可幫助團隊以積極的方式利用他們的差異。
決策是平等的，因為每個成員的意見都被征求和使用（卡爾格倫等，2016）。
當 IDEO 去 Apple 展示他們的鼠標時，它不是什么花哨的設備，而是一個用膠帶粘起來的原型。
低保真原型制作起來既快速又便宜（ 想想幾分鐘和幾分錢 ），但可以從用戶和同事那里得到有用的反饋，這符合快速驗證、廉價試錯的原則。為每個想法投入盡可能少的資源意味著前期投入的時間和金錢更少。此外，將多個原型帶到現場進行測試為用戶提供了比較的基礎參考，同時也有助于揭示某些需求。
為了創新，設計思維意識到認知和行動對創新過程很重要。認知包括接受度、樂觀和創造性的信心（ 凱莉 & 凱莉，2013；鄭，2018），而行動包括快速原型設計、旅程地圖和假設浮現（ 假設浮現：assumption surfacing，這是一種評估技術，涉及寫出潛在的假設和反假設。）（ 卡爾格倫等，2016；利特卡，2015）
如果領導層不歡迎風險、模棱兩可和風格的改變，實施起來就會變得更加困難。它會被管理者“質疑”其具體指標
沃爾特斯 ( 2011 ) 聲稱，由于設計思維的模糊性，它與組織文化相沖突。
據受訪者稱，在日常業務中使用設計思維之所以不會是最優選項， 因為它是資源密集型的，增加了工作量。（ 麗莎等，2016）
在醫療保健等規避風險的行業和公司中，“經常和早點失敗”的方法被認為是非常困難的。
許多設計師反對設計思維這一觀點，設計思維不僅關乎一個過程，而且關乎改變思維過程并提高人們可能提出的解決方案的創造力。
“設計思維”的推廣已被大型全球公司用來增加業務。不過，在更廣泛的設計世界中，我甚至會說“設計思維”的過度宣傳導致了所提供設計質量的下降?！?Yasushi Kusume
弗吉尼亞理工大學科學、技術和社會助理教授 Lee Vinsel 在《設計思維運動是荒謬的》中寫道，“歸根結底，設計思維與設計無關。這與文科無關。這與任何有意義的創新無關。如果這意味著重大的社會變革，那肯定不是關于“社會創新”。這是關于商業化的?！?
觀察人們的行為以及他們如何與環境互動，可以為你提供有關人們想法和感受的線索。
你可能認為你知道問題所在，但只有通過觀察才能了解消費者真正需要什么。
宜家派設計師到人們家中，觀測他們的互動行為來了解他們的需求。這將使設計者能夠推斷這些經歷的無形含義，以發現洞察。這些洞察提供創新解決方案的構思方向。而事實上，最好的解決方案來自于對人類行為的最佳洞察。
Good Kitchen 是一家為老年人和體弱者提供膳食的社會服務機構。起初的問題似乎是設計不當的膳食菜單。然后設計思維揭示了無數問題，所有問題都源于服務本身的性質。因此，經由對服務進行了徹底改革的之后，最終提高了客戶和員工的滿意度（利特卡，2014）
作者：用盡晴天來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
對話框是一種重要的交互方式，主要用于完成信息傳遞。對話框很常見，但并不見得每一個設計師都可以百分百地弄明白對話框這個概念。這篇文章是對「對話框」的一個簡單梳理和總結，希望可以解決大家心中的一些疑惑。
01
了解對話框
對話框是疊加在應用主窗口上的彈出式的窗口。對話框以對話的方式讓用戶參與進來，在對話中它給出消息或要求輸入。
當用戶完成消息的閱讀或者作出選擇后，可以取消或者接受該對話框，之后，這個對話框便消失了，把應用的主窗口交還給用戶。
關于對話框的概念，以下是百度百科的解釋：
對話框越來越廣泛地被應用于軟件、網頁、以及移動設備中。它可以保留用戶當前進程的情況下，指引用戶完成一個特定的操作 。
按照對話框的交互方式，可將其分為「模態[1]對話框」和「非模態對話框」。我們可以把他們看作是兩個小家族，模態家族的人比較強硬，而非模態家族的人相對溫柔一點。兩個家族的主要區別：是否強制用戶對其進行回應。
模態對話框：是位于瀏覽器的主頁面核心區域，需要用戶對它做出相應交互，模態才會消失。而對話框會因為自身的吸引程度、停留時間、信息量承載多少被劃分為多種對話框類型進行區分，常見的對話框分別為：普通對話框、內嵌表單對話框、分步表單對話框、文件選擇對話框、復雜信息展示對話框。
△ 何時使用模態對話框
1）在重要的警告時使用，避免出現嚴重問題、或修正已出現的問題。
例如：用戶錄入信息后未保存就要關閉時，彈出模態對話框提示用戶保存。
2）在需要用戶輸入信息或進行某操作，才能繼續當前流程的時候使用。
例如：在使用Canva資源網站時，點擊“上傳”會彈出模態化的登錄/注冊窗口，引導登錄/注冊后使用。
3）用來將復雜流程拆分成簡單步驟。
例如：Teambition-分步驟的模態對話框式創建項目。
4）用來獲取信息，該信息可大大減輕用戶的后續操作/精力。
例如：在轉賬場景中，如果先復制一個賬號，打開手機銀行APP（以招商銀行或平安口袋銀行為例），系統會通過模式對話框詢問用戶是否向這個賬號轉賬，這樣的設計做到了預判用戶行為，節省用戶后面的操作成本。
非模態對話框：與模態完全相反，它更加溫和，不會強制打斷用戶正在進行的現有流程，對用戶的干擾比較小。通常這類對話框只會在屏幕上短暫停留，幾秒就會消失，也因此用戶容易忽略它們的存在。因此非模態對話框不適合展示重要信息、不能承載大量文案，常見的類型有：通知提醒、全局提示、警告提示、氣泡卡片、文字提示。
△ 何時使用非模態對話框
1）在獲取與當前流程不必要信息的時候使用。
例如：平安口袋銀行和平安數字口袋采用氣泡卡片展示更多功能或引導用戶登錄。
2）不打斷重要流程中使用。
例如：在平安口袋銀行APP中購買理財時，如果遇到疑問的話，不會彈出框提示讓客戶咨詢投顧，而且采用氣泡框形式提示，不打斷用戶購買。
簡單來說，兩者的優缺點見下表：
02
從前面講到的定義來看，對話框最主要的目的是：傳遞信息。那么從目標導向的角度來看對話框，對話框要傳遞的信息的常見應用場景主要有以下五種：
屬性對話框是向用戶呈現或讓用戶改變所選對象的屬性或者設置。一般來說，在屬性對話框中，用戶可以修改當前的選擇，也可以設置應用程序的全局屬性。該對話框適用于非頻繁操作和或僅需要設置一次的屬性，屬性對話框常見在一些設置、詳情中。
例如：Windows 11系統的設置界面，可設置系統的全局屬性。
功能對話框通常從菜單中打開，是最常見的模態對話框，只控制單一功能，如打印、文件上傳/導入、插入對象或拼寫檢查。該對話框不僅允許用戶啟動一個動作，而且也允許用戶設置動作的細節，屬于模態對話框。
例如：瀏覽器的打印功能，會彈出模態化的打印窗口，用戶可設置打印的細節。
例如：飛書的文檔導入功能，使用模態化對話框，引導用戶選擇文件類型或進行批量導入操作。
進度對話框是由應用程序啟動的，而不是由用戶請求而啟動的。它們向用戶表明當前應用正在忙于某些內部功能，其他功能的處理能力可能會降低。
每個進度對話框都應該向用戶清晰地展現如下信息：
例如：使用Axure軟件導出html文件時的進度提示，既提醒用戶當前Axure正在運行，又告知用戶當前文件導出進度。
例如：使用Sketch軟件導出文件時的進度提示
通知對話框將一些重要信息報告給用戶。來源可以是一些觸發的事件，也可以是其他用戶的通知。
常見的有通知中心對話框，處理完成某個操作的告知等等。
例如：花瓣的通知提醒
例如：脈脈的隱私政策閱讀提示和汽車之家的開啟通知提示，均采用模態對話框方式。
公告對話框，和進度對話框一樣，由應用程序直接啟動，不是由用戶請求發起的。公告對話框有三種：錯誤、警告、確認。
這種對話框通常不會要求用戶填寫什么，只會詢問你“真的要進行嗎？”或者告訴你一件事情。所以在這種對話框上，一般只會有只有[取消]和[確認]，或者[OK]。
屬性、功能、進度對話框，是用戶主動請求的--它們為用戶服務。但是，應用程序發起的公告對話框--它們為應用程序服務，常常會犧牲用戶利益。由于公告對話框比較常見且常常犧牲用戶利益，那么我們怎么把這些討厭且無用的公告對話框直接鏟除掉，換成更加友好、能給用戶帶來真正幫助的交互方式呢？接下來我們來一起看看怎么讓公告對話框“名聲鵲起”。
03
我們可以從應用本身和對話框本身著手提供友好的交互方式，減少公告對話框的出現頻率。
解決用戶錯誤的方法不是指責用戶，讓用戶再認真一些，或者給他們更多的指導練習，而應該優化應用設計，讓犯錯變得困難。
示例：登錄藍湖時的短信驗證碼輸入框
示例：轉賬時輸入金額的數字鍵盤，金額大小的位數提示；平安口袋銀行的身份證號專屬鍵盤。
示例：輸錯密碼是一個很難避免的錯誤場景，語雀密碼登錄支持可見密碼，一來是考慮安全問題，二來在用戶輸錯的場景下可以打開眼睛，即可見密碼，減少出現錯誤頻率。
示例：在支付寶聊天窗輸入一串數字，支付寶發現這個問題后，提供了識別后直接轉賬的功能，預判了用戶的慣性，減少錯誤發生。
Zoom - 拉會前預設值在加入會議室的界面，提前選擇是否在進入會議房間后“不自動連接語音”和“保持攝像頭關閉”，有效避免忘記閉麥或者忘記關攝像頭就直接加入了線上會議的意外尷尬。
在很多破壞性的操作都會二次進行提醒，讓用戶確認操作，比如說刪除操作。在刪除之前都會詢問用戶“你真的要刪除嗎？”想一想……你在看到這些提示的時候，是不是眼疾手快地按下那個「確認」按鈕？
這種對話框在沒有容錯處理時，非常容易被我們這種無腦按「確認」的用戶釀成大錯。比如我“手賤”只是試試這個刪除，然后就把某個表幾千條辛苦寫了一個月的數據刪掉了，由此可見系統的容錯處理有多么重要。
示例：Windows系統在早期的時候，刪除文件時會讓用戶進行二次確認，但這是完全沒必要的，因為刪除文件不是真正的刪除，還會在回收站里面。
Mac系統：在回收站刪除文件將是永久性刪除，此時的確認對話框才是對用戶有用的。
從對話框本身的設計優化出發，我們可以對話框的使用場景和文案方面著手進行優化設計。
其實什么時候使用對話框、是否使用取決于你要給用戶展示的信息是否重要。
例如你在手機上買了一張電影票，支付失敗的結果如果用toast展示就會容易被用戶忽視。那么等到用戶到了電影院才發現自己購買失敗，那么用戶極有可能當場卸載你的產品。
模態彈框會打斷用戶當前操作流程，所以「使用對話框要克制」。總原則是：能在界面展示就不用彈框，能用非模態彈框的就不要用模態彈框?？傊匾男畔炏瓤紤]使用對話框。
具體的使用原則有：
如果非要使用對話框，那么請使用友好尊重用戶的方式。當我們說到人與人之間的交流時，語言是重要的媒介，而用戶與產品之間同樣如此。
在設計過程中應始終努力設計出有效的提示性文案，但是, 一定是有比沒有要好嗎？個人認為也是不必要的，糟糕的提示性文案甚至會破壞產品中最好的用戶體驗。例如以下幾種情況：
因此糟糕的提示文案設計會誤導用戶在產品中采取不必要的操作, 從而使他們感到生氣和困惑，甚至可能會破壞品牌對用戶的忠誠度，產生本末倒置的結果， 也給用戶帶來不佳體驗。
所以，語言是使產品更加人性化的主要因素。產品的文案則充當了語言的角色，它可以使用戶參與其中，影響他們的情緒，并把這種人機的功能性關系轉化成人類的個人情感體驗。而這種用戶的情感體驗才能夠真正的彰顯品牌個性，從而與其他產品區分開來。
△ 錯誤提示設計三步法
總結：
對話框可以成為幫助用戶完成目標的有用助手，而不是讓他們在每一步操守挫敗的可怕絆腳石。通過保持對話框的可管理性，并且只有在他們的功能真的屬于另一個房間的情況下才調用他們，你將很好地維持用戶的工作流狀態，保證他們會成功完成任務，并且滿懷感激。
前言
每當臨近春節時，互聯網大廠的新年福利活動都會相擁而至，大家在各種活動中紅包拿到手軟。此時，百度APP的「好運中國年」系列活動也如期與大家見面，毫不吝嗇的把“好運”傳遞給每個用戶。
2019年至今，「好運中國年」已進行了五年，每年都會在品牌和玩法體驗上進行探索與創新，今年進行了更深入的打磨，給用戶一種“新”體驗。在設計理念上，通過具有科技感和年俗氣息的視覺創新，打造一場百度獨有的“科技廟會”；活動玩法方面，較以往也更加豐富，包括了百度經典集卡玩法和多種紅包玩法，給用戶多元有趣的活動體驗。今年春節的活動周期比往年更長，近一個月的好運中國年讓用戶樂此不疲。
打造好玩好逛的科技廟會
活動初期，我們從產品、用戶、社會三個角度進行分析，確定活動的設計目標。
百度APP是百度在移動搜索方向的核心產品，代表了百度先進的搜索技術能力，具備很強的科技屬性。今年團隊設計的重點目標就是將活動與產品屬性相結合，因此今年開始嘗試打造「科技感」春節活動；好的活動體驗可以加深用戶對活動的記憶，為了讓用戶對「好運中國年」印象深刻，我們結合多種玩法營造科技廟會的氛圍；而這么多的活動需要一個“集合體”來承載，“它”既要多元又要契合團隊探索的有社會價值的年俗工藝，因此選用了“廟會”這個形式來承載。
經過分析，最終確定以好玩好逛的“科技廟會”作為本次活動的設計理念，給用戶“新”的體驗感受。
來場對“科技廟會”的探索
“科技廟會”是什么樣子呢？通過將詞拆解的方法，以“科技”和“廟會”為關鍵詞進行思維發散，想象以什么樣的視覺來呈現今年的春節活動。
探索過程中嘗試AI繪畫，用新的科技手段輔助尋找靈感。
定調
經探索，廟會的圖像特征越來越清晰，它是一場熱鬧的具有多元文化載體的文化現象，擁有像舞獅/臺戲/商鋪/古樓/燈籠/風竹等事物，是民間藝術的結合體，描繪了老百姓新年期間的市井生活。
「科技感」則是一種視覺感知，既可以通過點、線、抽象圖形進行感受，是粒子、發光體、光環、全息；又可以通過機器人、移動設備、全息屏幕等具象物體體現，是圖形元素間的動態穿插或是一種變化發展的趨勢。
我們將射線、光環、粒子、全息圖像、速度感圖形等元素植入具有人文特征的廟會中，切入“科技廟會”主題風格，進而確定視覺調性。
最終通過KV將探索的“科技廟會”視覺調性展示出來。打造出的視覺情緒是新奇熱鬧的，整體營造一場充滿科技氛圍的春節集市。以兔子形象IP為故事主體，講述一個“兔年春節逛科技廟會”的世界觀。通過“兔子舞獅”、“古鎮建筑”、“商品小攤”等元素來體現廟會，道路上的全息路標、遠處向上延伸的科技立光、城市建筑上的懸浮光圈來增加科技感。
定義“科技特色”的品牌體系
從確定設計理念開始，今年「好運中國年」的品牌設計就被貼上了“不一樣”的標簽。有別于往年的關鍵點是，需要在字體、圖形和IP上充分體現今年“不一樣”的“科技感”。
品牌字體
首先把“科技感”植入品牌字體中，形成獨特的字體風格。“科技”體現的是一種發展與進步、速度與前進，代表了“硬”實力，我們把這種氣質體現在今年的品牌字體中。與去年較圓潤的字體相比，今年的字體更為硬朗，在此基礎上字的斜度統一為12度，起落筆則用“尖角”延伸，整套字體現出科技創新帶來的活力激發。
品牌圖形
輔助圖形是品牌的重要記憶點之一，能夠強化品牌特征，提升用戶對品牌的認知。今年的輔助圖形保留了去年的基礎形，不一樣的是增加了「科技感」特色的圖形元素，結合點、線、以及方格符號元素，進一步烘托科技氛圍，在延續去年視覺感受的基礎上增添了新的概念。
UI組件也注入科技感，在紅包、btn、輔助入口等組件中增加科技感點線元素的點綴，信息載體使用半透明效果的異形面板，指引箭頭則運用馬賽克表現形式。將這些UI組件進行復用，科技氣質貫穿到各活動中，確保在不同玩法上呈現統一的視覺感受。
品牌IP
今年的活動IP形象更具親和力和辨識度。在兔子形象的設定過程中我們嘗試多種頭身比例，最終選用的比例為2:1，大頭形象在面部特征和表情上能夠體現更多細節，使整體更具親和力，同時也可以讓科技感的全息眼鏡顯得更為突出。IP貫穿活動始末，起到統一活動主題調性、強化引導，增加新年氛圍和親和力的作用。
舊瓶裝新酒：經典重塑，打造多元好玩的集卡活動
集卡是百度歷年春節的經典玩法，是用戶最喜愛的玩法之一，也是「好運中國年」系列活動中在線時間最長的活動，無論在視覺還是玩法上都要更加豐富多元。
[一] 玩法升級，傳承創新
過去兩年中，活動采用雙層卡玩法，集齊「好」「運」「中」「國」「年」基礎卡后合成高級卡，集齊高級卡后獎勵會翻倍。然而通過洞察研究發現，用戶在高級卡階段容易失去熱情、感到無聊，由此發現高級卡階段的活動體驗仍有改善空間，因此嘗試在今年進行了“新”的玩法體驗創新。
今年團隊在傳統集卡玩法上探索變化，傳承經典的同時，提出“新”的集卡闖關玩法。用戶集齊「好」「運」「中」「國」「年」基礎卡后，開啟新的階段，合成高級卡獲得新春祝福語圖鑒，通關全套祝福語圖鑒獲得終極獎勵，同時整體降低集卡難度，讓用戶更容易玩下去。
[二] 傳統工藝，氛圍拉滿
“新酒”還體現在工藝的多樣上，與去年單一的年畫工藝相比，今年的集卡高級卡場景中展示了四種工藝，汲取了廟會中出現的民俗文化和民間藝術品-剪紙、燈籠、爆竹、團扇。通過科技感的全息影像將每個場景串聯，打造了一種科技廟會的感知。四個場景從家到國，層層遞進，各場景結構源于品牌logo的熊掌元素，向用戶傳遞著年俗文化、透傳品牌，宣揚科技興國的理念。
燈籠
說到春節，家家戶戶都會準備各式各樣的燈籠來期盼闔家團圓。
因此活動中選擇燈籠做為構建高級卡場景一的主元素，同時也是文字的主承載物，每個燈籠呈現不同的造型，「團」字的兔子造型和場景中的兔子IP，來呼應兔年生肖。通過地臺上的廟會建筑和糖葫蘆等元素的結合營造出廟會年俗氛圍。
卡片則采用了較高挑的燈籠輪廓做為基礎造型，強化卡片屬性，也能夠更好的承載文字和品牌的透傳。
剪紙
剪紙藝術作為高級卡第二個場景的視覺呈現，帶領用戶感受其豐富內涵，感受設計對民俗生活的理解、對生活之美的追求。
場景中高級卡下端增加了以全息影像方式展現的廟會場景，同樣營造出科技廟會的氛圍。
爆竹
隨著春節的腳步越來越近，人們最期待的便是新年的第一聲爆竹，中國的爆竹文化，蘊含著華夏兒女的精神寄寓，表達著所有民族的共同期盼。近年來，隨著大眾環保意識的加強，爆竹聲已離我們逐漸遠去。因此，“爆竹”元素做為第三關高級卡的主元素，目的是為用戶營造久違的爆竹帶春聲，配合一席冬雪，向用戶描繪大自然對大地和人類的厚愛。
團扇
團扇是中國傳統工藝品及藝術品，有著深厚的文化底蘊。同樣寓意著吉祥如意。結合卡面文字，第四個高級卡主元素被設定為團扇。其外觀分別為圓形、花瓣形、芭蕉式等。通過設計手法展現團扇的刺繡工藝，細致到邊角和裝飾。而場景層則通過掐絲琺瑯的形式向用戶展現了祖國的大好河山。卡的后面還點綴了具有科技屬性的衛星元素，預示著未來科技的蓬勃發展。
[三] 科技廟會，獨具特色
集卡是好運中國年系列活動中最先與大家見面的，為了讓用戶了解陸續開啟的更多活動，我們在集卡活動頁下方開辟了一個活動聚合專區，在設計上將傳統與科技融合，打造了一個豐富又獨具特色的廟會場景。前期提煉的科技元素轉化為環繞道路的彩色全息路標，行駛中的百度無人車，LED光感的廟會建筑等，與各活動入口共同打造一個科技感十足的廟會街道。
親朋共團圓：疫情后我們第一次團聚
在過去新冠疫情肆虐的三年中，大家與親人朋友團聚的機會變得格外珍貴。在后疫情時代的第一個新年，活動從除夕到元宵節，逐步開啟多個紅包福利活動，與去年相比，在玩法上更多樣，增加了3個邀好友和2個紅包雨活動，為用戶與親朋創造了豐富多樣的線上互動場景。
除夕和元宵節是春節的首尾時刻，通過紅包雨游戲為用戶發放福利。在除夕夜，特別開設了多個時段的大額紅包玩法，用戶與家人一起守歲搶紅包、迎接新年到來。
團圓紅包、新春大紅包、開工領紅包，是春節系列活動中的3個各不相同的邀好友活動，我們通過差異化的設計形態，向用戶呈現豐富多樣的紅包福利。
在春節假期到來前，團圓紅包活動的互動方式主打線上分享，提前為用戶創造與家人線上聯系領福利的場景。
而在春節假期后期推出的掃碼領紅包活動中，迎合朋友見面聚會場景，設計上強化掃碼互動方式，便于線下面對面拉好友參與。
開工領現金是今年百度春節新增的特殊玩法，貼合新年后開工利是的現代習俗，吸引用戶向身邊的同事朋友分享這份好彩頭。
年俗文化鏈通全局
當然這些活動的視覺也少不了科技和年俗文化的碰撞，將這些細節元素貫穿在各個活動中給用戶更加統一完整的沉浸體驗，如此多的年俗物件，是在去年活動中沒出現過的。
傾聽用戶聲音，點滴之中打磨更好的細節體驗
今年的“新”體驗也體現在我們的細節打磨上。秉承用戶體驗至上的原則，從去年春節活動開始，團隊嘗試通過投放問卷了解用戶參與活動的感受，在今年為用戶打造了更好的細節體驗。
通過細致入微的設計思考、克制的細節處理，打磨出「更簡單」、「更生活」、「更生動」的體驗。在今年的體驗反饋中，獲得了很多用戶的稱贊。
[更生活]
更生活體現在高級卡的場景設計上，將燈籠的點亮態和未點亮態通過顏色和質感進行區分，通過集卡逐一點亮燈籠，制造小的驚喜點，寓意照亮全家人的平安與幸福。
[更簡單]
為了讓活動更易于上手，我們將主頁和彈窗中的主按鈕文字放大，提高主按鈕的視覺層級，這種設計讓白發人群也可輕松參與到活動中。
同樣的，掃碼活動中二維碼的展示也進行了放大處理，節省了點擊再放大的步驟，更便于識別和用戶之間的面對面分享。
[更生動]
在紅包雨活動中，為了保證用戶的游戲體驗，使用了二維游戲引擎，增強動畫流暢度。同時在多種道具上增加了點擊實時反饋，強化道具的生命力。
在開工領紅包活動中使用動作捕捉數據，讓人物的動作更真實，更靈活。同時設計了金幣的碰撞反饋，提升用戶的點擊感和爽感。給用戶更好的游戲感體驗。
今天帶來的是《交互設計沉思錄》第一部分的第二章「管理復雜性」。
主要講述的是交互設計師是如何理解&組織所獲取到的數字、文字數據。
通過這些步驟&方法能夠幫助交互設計師更加清楚信息間的關系，建立很強的心智圖景。
其間也穿插了很多職能相關部分的對比，如「交互設計師與信息架構師」「交互設計師與界面設計師」「交互設計師與電子工程師」。
作者：Viola_1241 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
莫奈是一款主要服務京東內部用戶的數據可視化平臺，它以容器的形式將京東城市各種與智慧城市建設及運營相關的能力聚合，并以可視化的形式面向客戶呈現。
作為京東莫奈的設計負責人，過去三年一直負責莫奈可視化平臺的用戶體驗設計工作，由于本人日常設計主要以智慧城市、數據可視化大屏為主，所以我即是莫奈的設計負責人也是莫奈的深度使用者或者說專家用戶。在長期使用莫奈的過程中，本人梳理了大量與視覺、體驗相關的問題，這些問題，部分在產品日常迭代中得到了優化，但是也有相當一部分解決起來具有一定的難度和成本；與此同時，作為用戶體驗設計師，我日常與業務方、客戶方以及用戶接觸緊密，所以在與大量用戶溝通后，也從用戶側收集了不少使用體驗相關的問題。我對以上兩個渠道的問題整體梳理匯總，并與產品側討論溝通后，大家認為這些問題比較嚴重的影響了用戶使用莫奈的效率，降低了莫奈對業務側賦能的質量，提高了客戶使用莫奈的成本。所以我們必須規劃出一個產品迭代的周期，針對莫奈體驗問題，進行一次密集的優化和革新，這便是本次莫奈體驗升級改版的基礎背景和原因。
本篇文章寫作的主要目的，是想將本人在這次改版設計中用到的一些方法、流程和經驗與大家做次交流和分享，希望能為同行在類似的改版設計中提供一定的借鑒和參考。
實際上，在梳理出整個體驗升級流程之前，通過與產品負責人的多次溝通，我們事實上已經對體驗升級這個需求達成了共識，而流程圖解決的是做什么、怎么做的問題。
下圖展示的這套體驗升級流程較為通用，大多數產品的體驗升級都可參考下面的流程執行。
這套流程的主要作用有兩個，一是通過它可以更直觀的跟產品負責人、開發負責人等關鍵角色溝通，讓大家對體驗升級這件事兒有整體且全面的了解，方便大家評估工時、預估成本和安排排期；另一方面也能夠使我自己的工作推進的更加有節奏有條理，避免工作內容長時間停滯在某一個環節而影響整體進度。
基于STAR法則，背景概況部分向大家介紹莫奈體驗升級的必要性。在企業中，想要推動一個需求順利執行，那一定是需求上下游以及相關方的利益都得到了體現和滿足。莫奈此次升級，從體驗設計師角度來講，我們作為用戶的代言人，在了解到用戶大量反饋和建議后，有責任將用戶的聲音轉化為需求，并推進落地為產品的一部分；從產品團隊來講，莫奈想要不斷發展，持續為客戶和業務方帶來顯著的效率提升、明顯的成本下降，也必須對過去老舊的產品架構做一次深度的革新和優化；從前端工程師、研發同學的角度看，以往不合理的底層代碼設計，使產品在性能、穩定性等方面留有大量隱患，因此在日常迭代工作之外，研發同學總要消耗部分精力去維護那部分不穩定的存在，從而導致研發同學人效比低、開發體驗差；從上級Leader來看，公司的核心經營理念是“成本、效率、體驗”，但成本的降低、效率的提升、體驗的優化都依賴于強悍的技術和優秀的產品，而莫奈此次體驗升級正是踐行公司核心理念的有效嘗試，綜上，此次體驗升級于多方有益，符合部門整體利益，所以大家很快達成共識。
通常我們說用戶體驗時，用戶是一個群體的概念，而這個群體如上圖所示，可以被進一步細分為多種角色，理想情況是每一類角色的體驗都被滿足，但現實執行中我們必須要有策略和取舍。所以要想產品有好的體驗，首先我們要知道用戶群體中不同角色對產品的使用情況如何，并找到對產品依賴度強使用頻次高的那部分用戶和場景，然后針對他們以及他們使用的場景做高優先級的優化。
從莫奈典型用戶使用場景可以歸納出：
首先，莫奈的主要使用者為各個項目的產品經理及開發工程師，其中設計師也有相當大的使用強度，這三類用戶他們直接使用莫奈，并把莫奈作為解決數據可視化場景構建相關需求的主要工具和方案，所以，以上三類用戶，我們將其稱之為莫奈的核心用戶。核心用戶使用莫奈產出的作品，經由上下游同事傳達和部署給業務方及客戶后，莫奈的商業價值便得以體現。
其次，每類用戶使用莫奈不同功能模塊的頻次不同。從使用場景中我們也發現，莫奈的使用具有上下游的關聯性，核心用戶處于流程的下游，中上游的用戶雖不是核心用戶，但他們因為更接近客戶和業務，往往具有比核心用戶更高的決策權。因此我們優先讓核心用戶體驗提升并不意味著放棄上游的體驗，而是資源有限的情況下我們的工作必須有取舍有重點。實際上我們是通過建立核心用戶的聲量和口碑來向上游用戶傳達莫奈的價值和特色，通過核心用戶使用莫奈交付的結果來證明莫奈的可靠。與此同時，我們也通過對內外的宣講和培訓，持續接收上游用戶的反饋，并在迭代中持續優化。
知道了核心用戶是誰，那么核心用戶的體驗痛點是什么呢？
雖然在日常的交流溝通中我們已經獲取了不少用戶反饋、收集了相當的問題建議，但作為體驗升級的系統性工作，為了更全面的了解用戶體驗痛點，我們還是設計了一次完整的用戶調研活動。本次調研主要采用線上問卷調研、線下訪談+用戶行為觀察的方式進行。線上問卷采用京東良研問卷系統，除了面向核心用戶推送，我們還面向莫奈主流用戶及邊緣用戶推送了問卷內容，因此，問卷調研整體覆蓋較為全面。線下訪談除了邀請部分核心用戶，我們也從問卷系統中篩選了部分反饋問題多且愿意參加線下訪談的用戶參與。線上線下均包含內外部用戶，以期獲得更加客觀真實的反饋。
用戶調研的核心目標是充分收集用戶反饋，并將反饋結果量化及系統化，量化后的結果可做為設計側推動產品執行體驗優化的關鍵依據，也可以作為后續驗證優化結果的對照項。
本次問卷設計我們參考了PSSUQ整體可用性量表，并結合本次調研目標做了部分調整。
PSSUQ整體可用性量表可以從系統易用性、信息質量、界面質量三個方面將體驗結果量化，然后通過與行業基本經驗值比較，既可以知道用戶對莫奈在以上三項的滿意度，也可對莫奈當前整體體驗結果有一個全局的概況性評價。同時根據三個方向的評分也可以更細致的指導后續的設計優化方向，為設計決策提供更多科學可信的依據。
PSSUQ整體可用性量表作為一個通用模版，其內容比較固定，為避免多次打擾用戶，提升問卷調研效率，我在PSSUQ的基礎上添加了少量關鍵信息甄別、用戶反饋積極性識別類問題，從而使問卷內容更加符合本次調研目標。
問卷設計好之后，接下來就是問卷發放以及結果分析了。
PSSUQ量表內每個問題均有8個選項，【1-7】是對該項描述的認可程度，得分越低代表用戶對該項描述越認可；【NA】代表用戶對該項描述無法評價。本次調研通過京東良研發放線上問卷100份，共收到有效問卷反饋87份（大于PSSUQ所需的最少樣本數量：20），說明問卷結果具有較好的可信度，其結果值得進一步研究。
通過整理和統計問卷數據，可以得出以下結論：
1、內外部用戶在系統易用性、信息質量、界面質量三個維度對莫奈均不滿意
2、對比行業經驗值（均值），莫奈系統總體體驗質量與行業同類產品存在明顯差距
3、莫奈用戶群體整體積極性較高，具有較強的溝通及反饋意愿
整體評分結果與日常同相關同學的溝通結果一致，以上評分結果也反映出此次體驗升級的緊迫性，作為由設計驅動的改版設計，設計側面臨較大壓力。
在設計問卷的環節我也提到過我們的問卷在PSSUQ量表的基礎上針對本次調研目標做了部分調整和優化，而線上問卷最后兩個選項以問答題的形式向被調研用戶提供了對莫奈各方面建議的反饋渠道，通過問答項我們收集到用戶反饋的各類問題80多條，我們采用親和圖對這些反饋做整理，親和圖顧名思義，它可以使具有類似特征和關聯屬性的問題更加臨近，從而將零散的問題被歸類，方便從雜亂的問題中找到規律，并通過比較不同類型問題的占比，更直觀的了解用戶反饋的問題主要集中在那些方向。
如下圖所示，產品的反應速度及穩定性、模板和組件豐富度是用戶反饋問題最集中的兩項，前者影響用戶最基礎的使用體驗，后者決定產品能多大程度上便捷的服務用戶。良好的穩定性和反應速度可以讓用戶專注于任務本身，而使用模板能最快速的產出作品，降低新手的使用門檻，豐富的組件能夠滿足用戶在各類復雜場景下的業務需求，減少組件二開成本，提高交付效率。針對這兩個大的問題點，首先，對于那些能夠在當前產品日常迭代中優化的點，我整理后會以需求的方式向產品團隊提出，并在日常迭代中逐步優化；然后，對于那些需要“傷筋動骨”做底層優化以及長期運營沉淀才能有效改善的問題，我們會進一步向用戶收集和完善相關信息，并將相關問題梳理到本次改版任務中，做系統的解決和處理。
在【05、體驗痛點分析-用戶調研部分】已經介紹了本次參與訪談的用戶來源，但在實際執行時，我們也邀請了部分在線上問卷反饋中描述模糊不清、難以理解，需要面對面交流或者演示才能理解的問題的用戶。
訪談先通過與用戶簡短的溝通了解用戶的崗位/職業以及使用莫奈的主要場景、頻次、設備等，然后通過給用戶設置一到兩個簡單的任務，觀察用戶在完成任務過程中的行為、表情、語氣等，以了解莫奈在一些典型使用場景下的易用性及可用性。比如，對于視覺設計師：請在畫布中添加一個條形圖，并將條形圖的顏色修改為綠色、激活縱軸輔助線、修改輔助線為虛線樣式....; 對于開發工程師：請在畫布中添加一個環形圖，并使用json為環形圖添加一組動態數據....。之后，在用戶完成基礎任務后，我們還會針對用戶關心的問題進行更細致的溝通，了解用戶更細致的反饋。對于用戶反饋的問題，我們整理后會在公司內部的需求及研發管理系統“行云”中以需求的方式提交給產品團隊并同步添加反饋問題的用戶為該需求的關注者，后續，當該需求的狀態有任何更新時，問題反饋者都能及時收到更新。如此，受訪者反饋的問題從需求提交到需求最終提測驗收，都能在線跟蹤并閉環。這樣做既是我們團隊的責任，也可以增進用戶對莫奈的信任，并期望活躍用戶后續能繼續為莫奈提供建議和反饋。
通過線上問卷調研及線下訪談，我們已充分了解了用戶心聲，接下來我們通過用戶體驗5要素模型，將各類問題進一步歸納并按照產品建設的上下游協作關系，把每一個具體的問題匯總給對應的角色，并由對應的角色產出具體的解決方案，然后通過線下會議同步各自方案并對方案進行評審和溝通，由此，關于體驗升級的所有事項及具體任務便可周密安排，之后便是資源投入、推進升級工作具體執行。
用戶體驗5要素模型，從產品的戰略層出發，層層遞進直到表現層，把影響用戶體驗最根本的因素分層并可視化，借助這一模型可以讓大家對“用戶體驗”這個概念有更好的理解，并能促成大家在更大的層面上達成共識。以往談到用戶體驗，大家首先想到的是界面是否好看、交互是否流暢，然而一些對用戶體驗也有著重要影響但“不可見、不直觀”的因素卻往往被忽視，尤其對開發側同學更是如此，他們鮮有意識到產品的目標、內容以及性能等這類的因素，也是構成用戶體驗的重要部分。對于莫奈這樣一款長期維護持續迭代的產品來說，好的用戶體驗并不能以“畢其功于一役”的方式來實現，而是要通過持續不斷的改進和優化才能持續滿足并提升用戶體驗，所以借助用戶體驗5要素等模型，我們引導產品及研發團隊更好的理解用戶體驗，這樣不僅能幫助設計師在本次體驗升級改版工作中與大家高效協作，也非常益于之后日常產品迭代的溝通與協作。
上一步，我們通過用戶體驗金字塔將體驗問題匯總并劃分給了不同的角色，之后各個負責人產出解決方案并與大家評審和溝通，而體驗升級方向正是基于大家對各類方案一致溝通后達成的共識和結果，體驗升級方向以設計為主導，同時兼顧產品和研發的部分目標，我們用5個短句將五個升級方向概括，每個方向盡量解決一個維度的問題，比如“界面視覺質量提升”解決表現層的問題、“信息層級優化”解決框架層的問題。體驗升級方向作為對體驗升級結果的導向，將指導后續設計動作的展開。
基于體驗升級方向，接下來就要制定具體的設計策略，來實現體驗升級方向中要達成的結果。設計策略制定第一步先確定設計目標，我們將設計目標拆解為三個方向，每個方向通過兩個關鍵詞定義。設計目標主要分為視角與交互兩個方向，同時兼顧產品側“易拓展、易維護”的需求。實際設計中，視覺與交互并非獨自分開進行，在設計開始的階段，需要先定義設計風格等基礎設計要素，之后視覺便可在此基礎之上全面展開，此時視覺設計要考慮交互的效果，交互設計也需要斟酌設計的展現。
對于設計目標中關鍵詞所代表的那些抽象概念，每個人的認知可能都不一樣，但是搜索引擎和大數據推薦的算法，可以告訴我們普通大眾對那些關鍵詞所表現出來的意象是如何認知的，之后我們便可從符合大家普遍認知的視覺素材中，提取出符合關鍵詞所表達出的意象的設計要素，之后通過在設計中應用這些設計要素，就能把關鍵詞定義的抽象的設計概念轉化為具象的認知，我把這個過程稱之為“抽象概念的可視化”。而“情緒版”是我完成上述工作的主要工具。
我們使用搜索引擎以及AI推薦的關聯算法，針對“科技和高效”這兩個視覺目標的關鍵詞收集了海量的音視頻設計素材，把這些素材集合在一個畫布上形成“情緒版”，然后通過歸納這些素材共有的特點/要素，就能將體現“科技、高效”這兩個概念的所有設計要素剝離出來，并通過簡潔的文字加以描述和歸納。此后，我們通過在視覺設計執行的過程中應用這些設計要素，通過合理的搭配和組織，將這些設計要素融入到莫奈新的設計語言，如此，產品最終便可在視覺上呈現出與視覺目標關鍵詞定義的一致的視覺和心理感受。
基于情緒版提煉出的設計要素其實已經足夠具體，但是如何將這些要素應用在設計中，我們還需要進一步歸納。我個人一直以來習慣從形、色、字、質、構、動、音7個維度分析一個設計作品的設計風格，就如同人體是由肌肉、骨骼構成的一樣，以上7個維度也是構成一個設計作品的“經、骨、肉”。所以，我認為對于一個設計作品，尤其是UI設計作品，以上7個維度基本能夠完全概況它的風格，所以當我要為自己的產品做風格設定時，我也是從這7個維度出發來為每個維度定義具體的風格和策略。
這種細分維度然后定義風格的方式有多種優勢，其中最明顯的是它能夠將我們風格定義的設計工作條理化，避免反復嘗試和摸索造成的大量返工和思緒混亂，比如，如果我對質感的定義有偏差，不符合情緒版中提取出來的設計要素的特點，這時候我只需要對“質感”這個維度的風格進行優化和調整，而不需要推翻整個7要素重新再來。這種設計方式讓我的設計更加理性，也讓后續設計執行的工作更加的有條理和舒適，從設計風格落地的角度來講，這種方式我個人認為是最能夠忠于情緒版所歸納出的設計感受的方法。
對于產品界面的造形設計，一方面依照情緒版中提取的設計要素“透視、空間感、異構造形”來考慮，另一方面我也結合莫奈的產品Logo做了適當的抽象和演繹；兩者結合最終確定了當前莫奈的造形設計。
首先，產品左側主導航采用了具有一定透視角度的異形設計；產品頂部標題區域也采用了相同的設計思路：左側為品牌Logo設計了一個容器，Logo在其中容納放置；Logo右側收起的區域預留了常用公告、跑馬燈的設計，方便產品把日常重要信息同步給用戶；最右側呈現用戶個人中心、空間管理、使用幫助等菜單項。
對于這種異形的設計，用戶是否能夠接受，在設計開始時我存在一定的疑慮，因此在設計初稿定稿后我們邀請了部分用戶做了測試，大部分用戶認為新的設計有創意具有鮮明的特點，也有部分用戶認為透視的設計看著較為怪異，尤其是左側主導航的文字在添加透視效果后識別性存在一定的問題。因此針對用戶反饋我優化了透視的角度，從多個透視數值中選擇了一個即能展示透視的設計效果、又不至于透視過大導致文本圖標等變形嚴重而不易識別的角度，其次，我還配合開發同學對導航透視文本和圖標的渲染做了一些優化，從而使其具有更好的識別性和清晰度。在以上兩項優化完成后，新的用戶測試表明大家對該設計的滿意度有很好的提升。
莫奈在改版之前就已經有自己的品牌色，新的色彩升級圍繞“科技與高效”兩個關鍵詞，結合情緒版提取的設計要素，將原有品牌色做了細微的調整。首先藍色飽和度增加，綠色調整色相使其偏向藍色的一端并增加亮度。如此，當兩個顏色搭配使用時，藍色作為主色調體現科技、可靠的視覺和心理感受；綠色作為點綴色和強調色，體現活力、高效與創新。藍綠對比強烈，具有很好的場景適應性和品牌特色。
字體作為UI界面中最常見的元素以及作為信息呈現的主要載體，字體的使用對產品的易用性和視覺表現有著非常重要的影響。結合體驗升級方向中定義的“增強品牌特色”的目標以及情緒版中提取的非襯線的設計要素，對于字體的設計風格，我將其歸納為"定制化、品牌性和非襯線"。
為了實現字體風格的設計目標，我選取了兩款京東品牌的定制字體“京東朗正體”及“京東正黑體”。京東朗正體經過多次迭代，目前具有豐富的字重和獨特的品牌特色，將該字體用于莫奈的品牌Logo，可以很好的體現京東的品牌特色并體現出與其它產品差異化的字體設計。京東正黑體主要用于莫奈產品中的數字、拼音、英語、數值符號四個場景，該字體也是京東金融APP的系統數字字體，其最大的特點是等寬、簡潔、緊湊具有很好的識別性與易讀性，并且該字體有較小的字符寬度，所以當其用于大屏編輯器時，能夠在相同的空間下容納比其它字體更多的字符，而這個特點對于“寸土寸金”的屬性面板尤為重要。此外，該字體在作為數字字體使用時，其小數點、千分符等也具有很強的特色，具有不錯的辨識度與個性。
而產品中的中文字體Mac與Windows系統有不同的方案。在Windows下，由于系統自帶的微軟雅黑當字號小于14pt時，字符在水平方向上存在明顯“參差不齊”的現象，加之該字體很少更新，沒有針對當前高像素密度、高分辨率的屏幕特點做相關的適配優化，所以在高分屏下，其字體邊緣會有明顯的鋸齒。之前在用戶調研中，有用戶反饋字體模糊不清、識別困難也是上述原因造成，所以Windows系統下莫奈界面字體選取了思源黑體，思源黑體是Adobe與Google聯合開發的開源字體，其字重豐富、字形簡潔、現代，能夠很好的適應PC與移動端的顯示，也能適應當前已漸趨主流的高分屏，所以使用該字體能夠給用戶帶來不錯的信息呈現。除此之外，思源黑體的字形特點與MacOS系統下的蘋方字體相似，因而使用思源黑體在一定程度上也能夠保證用戶在不同平臺使用莫奈時體驗的一致性。
質感的呈現主要通過色彩、透明度的變化、毛玻璃效果的模擬來實現，色彩與透明度的變化搭配毛玻璃效果使用，可以呈現科技、輕盈的質感。
結構設計主要目標是組件化及原子化，莫奈最核心頁面是大屏場景編輯器，該頁面承載著可視化大屏由0到1構建所需的大多數功能，也是莫奈產品日常迭代維護投入資源和成本最集中的模塊。以往編輯器的界面設計雖然也有不錯的設計規范，但是并沒有按照原子化、組件化的思路來考慮各類組件組合使用時的搭配問題，因此基于以往的設計規范，大屏編輯器頁面的產品需求總是需要UI產出設計稿研發才能開發，且由于沒有系統的梳理過編輯器頁面各種組件的類型，所以部分組件在同一頁面的不同位置存在不同的形態；還有一些組件，在具體頁面中的使用并不符合該組件的功能和用途，存在錯用亂用的情形，由此造成編輯器的界面設計、開發和維護都具有較高的成本。
新的改版設計，在設計之初就聯合產品對編輯器內的各個模塊所包含的各類組件進行了梳理，通過將各個模塊的組件羅列出來，然后重新梳理組合、去重、合并之后，我們就可以知道當前編輯器界面總共有哪些類型的組件，以及每類組件用在何處，而組件原子化后也通過間距規范、使用場景示例等方式解決了如何用的問題。
原子化的組件，精簡了組件的數量，同時每個組件也針對自身功能和用途的特點進行了優化，在此過程中也考慮了組件搭配、組合使用的適配和呈現問題。比如，針對顏色選擇組件，我們默認以十六進制展示顏色色值，并在色值后以百分比顯示該顏色的透明度，我們還在色值后面增加了色值預覽的小色塊，這樣的設計兼顧了開發與設計同學使用莫奈的場景。對于開發同學，他們在代碼中習慣使用十六進制色值，而設計師更習慣于RGBA或HSLA的調色模式，因此，雖然十六進制的色值也能包含透明度信息，但我們依然在顏色后面增加了百分比及小色塊，已幫助設計同學確認顏色的正確性，此外我們還通過色彩顯示模式切換、自動輸入校正等手段，確保不管用戶輸入的顏色采用何種方式，最終屬性欄都是按照用戶設置的模式以統一的格式呈現。而諸如此類優化，在本次體驗升級中不勝枚舉。
莫奈的動效設計主要有兩類，一類是用于頁面視覺效果營造的氛圍類點綴動效，另一類是用于功能及信息傳遞的交互類動效。兩類動效都通過“節奏感、輕盈”的設計風格，傳遞科技、高效的視覺感受。
在本次動效交付中，為了保證動效的清晰度與流暢感、并減少動效的體積和提升動效加載速度，動效文件均采用Json代碼的形式交付前端，該類動效由瀏覽器在網頁端實時渲染，具有矢量動畫的特點，能適應多種設備及屏幕分辨率，具有優秀的前端呈現效果。
首頁科技感流光氛圍動效
頁面及大屏加載Loading動畫
針對視覺層面設計優化后，接下來針對莫奈典型的用戶使用場景以及之前線上問卷、線下訪談中用戶反饋問題比較集中的一些場景進行交互層面的優化，我們交互優化的目標是“簡單、流暢”。
首先進行交互優化的是各類圖表的屬性及配置項設置相關的交互優化。莫奈作為一款可視化場景搭建平臺，為用戶提供了各類型的圖表，每個圖表均具有“樣式、數據、交互”三大類配置屬性，這三大屬性，從圖表看起來是什么樣、圖表展現了什么數據、圖表可以與用戶進行那些互動三個維度解決了圖表在數據可視化呈現中最基礎的需求。由于圖表在數據可視化呈現中頻繁使用，所以與圖表配置相關的操作自然也是相當高頻和常用。當前版本下，圖表配置項主要問題有兩個：一個是圖表配置項層級過深，用戶需多次點擊才能對某一內容進行修改；第二是批量對多個圖表的相同屬性進行修改在當前版本不可用，導致用戶圖表配置成本高。針對用戶最關心最影響體驗的兩個交互問題，我的優化方案如下。
要解決問題，首先要知道問題從何而來。經過深入與產品、研發同學及部分用戶訪談溝通后，我發現當前導致圖表配置項層級過深主要有兩個原因，分別是產品規劃與設計展現。
具體來講，產品層面有三個問題：
01、產品對于當前圖表配置項的結構梳理是以程序的邏輯來呈現，而非以用戶的視角來歸納。舉個栗子，在當前版本如果用戶要修改柱狀圖某個柱子的顏色，操作路勁如下：樣式>數據系列>系列名稱>形狀設置>顏色設置。而這一路徑為何如此設計？因為顏色這個屬性的后端代碼就是這樣的結構。這一路勁把用戶最易理解、最直觀的屬性名放到了路勁的末位，而在它之前呈現的內容、名詞其實都有一定的理解難度，尤其對于新手更是如此！用戶想要更改顏色，Ta首先需要知道什么是數據系列、其次還要了解形狀設置可能包含哪些屬性等，正因具有一定的門檻且不直觀，所以用戶初次進行上述設置時往往需要在樣式一級菜單下點擊多個屬性、反復嘗試確認，才能最終完成顏色修改的設置，這樣一個使用的流程自然會給用戶“層級過深”的感受
02、圖表配置結構存在冗余、不夠精簡。還是上面那個栗子，用戶修改顏色需要觸達第5級。但是這種細致的分層分級的結構設計是必要的么？答案是并不是！因為只有用戶關注的才是有用的，產品應該提供用戶想要的內容而不是強塞給用戶產品具有的所有的功能，所以我們沒有必要把圖表在后端具有的所有屬性都羅列出來，適當的對配置項做些精簡，合并一些同類的屬性、然后通過“更多”按鈕隱藏一些對圖表呈現無關緊要的內容，如此，圖表配置項便能瘦身，用戶使用起來也更輕松。
03、圖表配置項的各個屬性，在屬性列表的排序沒有遵循用戶使用的頻次和習慣。排列在前面的屬性并非用戶最常用的那些，因此用戶要在列表中從上而下的“翻找”，這種使用過程中的頓挫感，一方面影響了用戶使用產品的效率，另一方面也加深了用戶“層級過深”的感受。
知道了問題從何而來，那么解決問題便也變的簡單。首先，我們聯合產品經理，對莫奈已有的60多個各類圖表組件，逐個進行了配置項的梳理，當所有圖表的配置項都以思維導圖的形式呈現時，他們的共同點、同類項便一目了然。此時，之前存在的“圖表配置結構存在冗余、不夠精簡”的問題便可解決。而對于先前存在的01與03問題點，在上述梳理工作完成后有了一定的優化和改善空間，但仍然存在一些不確定的因素影響設計和產品的決策。比如、“屬性列表中，哪些屬性是用戶最常用的”，類似這樣的問題我們通過訪談幾個用戶并不能得到可靠的結論，對此，一方面我們通過為配置項區域增加數據埋點，分析用戶對各個配置項使用的頻次來為后續的持續優化提供決策支持，另一方面我們也參考、調研了同類產品中一些用戶量較大、設計質量較高的產品來進行當前有限的優化。
配置項層級過深的另一個原因，是屬性配置列表的結構及布局設計存在“深層級、空間利用率底”的特點。
如下圖，左側圖片示意了舊版莫奈的配置列表設計結構?？梢钥吹脚f版設計完全采用樹結構的形式將各項自上而下排列，并且采用每級向右縮進一個字符的形式來做層級的區分，舊版的設計基準尺寸為1440PX，屬性配置欄本身較窄，而逐級縮進的策略更是導致信息展示困難；其次，樹狀的結構在展開層級較多時，部分一級屬性會被擠到一屏之外，用戶需要頻繁滾動鼠標滾輪才能看全信息，綜上，舊的設計策略也給了用戶“層級深”的直觀感受和交互體驗。
新版設計首先增加了配置屬性欄的寬度，讓其能夠在橫向上展示更多信息；其次，新版設計，將提煉后的一級屬性標簽固定在屬性配置列表左側。相較于之前，這樣的設計始終能夠讓用戶清晰的看到所有一級屬性，用戶可以隨時在各類屬性中切換，并且右側屬性內容的滾動也不會影響一級屬性的位置，如此就給了用戶很好的全局觀和使用的便利性與確定性。最后，新版設計采用分隔線與色塊結合的方式來表達屬性列表內的層級關系，去掉逐級縮進后，配置列表在視覺上更加整齊一致、且空間利用率也有了進一步的提升。
在數據可視化場景搭建過程中，用戶對多個圖表的相同屬性進行統一修改、一次性調整的需求非常迫切和剛需。比如當前可視化大屏中有N個圖表，此時，用戶想要將其中6個圖表的橫軸顏色調整為相同的綠色，在用戶的視角下，此時的操作應該是先選中6個想要調整的圖表，然后找到橫軸顏色設置項，之后統一調整色彩。但莫奈當前的版本，如果用戶按照上述流程操作，看到的將是下圖左側的示例：圖表多選之后，對齊、坐標等基礎項仍然可用，而與屬性相關的其它設置并沒有被聚合并呈現，在此情況下，用戶想要完成最初的目標就只能6個圖表逐個依次調整！顯然，這樣的操作并不符合用戶預期，它使用戶的操作效率大大降低。
上述問題是一個體驗相關的問題，同時也是一個強技術相關的問題，我們想要讓多個圖表的同類項聚合顯示，首先要能在底層對各個圖表的配置項有十分清晰的梳理，好在我們解決第一個問題：“配置項層級過深”時，已經完成了對60多個圖表的細致分析，有了這項工作的基礎，當前面臨的問題便不那么棘手。如右側示例：當用戶多選圖表時，圖表的同類項會被聚合，并以用戶視角的理解，將屬性類別進行分類，這樣的分類打破了傳統的按照圖表固有屬性排列的慣例，而是把圖表固有屬性整合歸納到用戶易于理解的類目下，如此，用戶多選圖表之后便能夠便捷的對圖表的各類屬性進行統一的調整和修改，而這樣的操作是符合用戶習慣和預期的。
新建大屏作為創建數據可視化場景的第一步，它的易用與否直接給了用戶最直觀的對莫奈的第一感受。對于新建大屏的交互優化主要有三個方面：創建流程、模板預覽與模板展示。
創建流程優化：首先，舊版的創建流程：新建可視化>選擇模板>大屏命名>創建成功。 這一流程中“大屏命名”是沒有必要的，因為用戶在新建可視化大屏時可能存在多種需求的可能性，也許用戶只是想看看創建完成后內部編輯器是什么樣，或許用戶有實際項目，但當前項目名稱也并未確認，所以在此時添加一個不可跳過的步驟著實讓人不爽，況且大屏創建成功之后在多個位置有多種方式都能便捷的修改大屏名稱，因此，更快速的進入編輯器開始設計創作才是用戶創建可視化最根本的目標，所以，拿掉“命名流程”，顯然可以讓整個交互的過程更加流暢。
模板預覽與模板展示優化：原有的設計，當用戶點擊創建大屏按鈕后，會在頁面底部拉起一個小的抽屜，抽屜內包含一個空白模板以及有限多個其它內容模板，而在如此狹小的區域展示這么多內容，不管是從交互效率還是視覺效果上看，都顯得格外的拘謹和難受。新的設計首先是全屏鋪開，盡可能充分的利用頁面空間。
在模板展示及預覽方面，我設計了列表展示與縮略圖分布展示兩種方式，并添加了分類標簽和搜索按鈕，此外還聯合產品增加了模板收藏功能，這樣用戶可以把自己喜歡的、常用的模板收藏，方便之后更快速的使用
模板預覽方面，在兩種布局模式下，用戶鼠標滑過模板縮略圖時，模板均會以較大的視圖動態呈現模板內容。在列表模式下，模板預覽窗口固定在頁面右側區域；縮略圖分布的模式下，預覽窗口根據鼠標指針的位置激活。當用戶選中某個模板時，點擊底部創建按鈕即刻進入大屏編輯器界面，此時用戶便可基于模板內容進一步完成自己的定制化設計。
如今移動端各類產品已經給用戶養成了算法推薦+自主搜索的產品使用習慣，這種習慣當前也逐步從移動端往PC端轉化。搜索能從海量信息中最快速的找到用戶關心的內容，因而提高搜索功能的易用性，能明顯提高用戶使用莫奈的效率。
以往的搜索功能按照不同模塊和場景分布在不同位置，用戶需要先找到對應模塊才能進行搜索，降低了搜索的便捷性和易用性。新的設計在保留之前搜索能力的基礎上，新增全局搜索，用戶在一個位置即可完成對組件（優先展示當前畫板內組件）、屬性、幫助等內容的搜索和查找，進一步提升搜索的效率。
一個數據可視化場景，通常是由N個數據圖表與其它數據要素一起構成的多個頁面來呈現和展示的。這些頁面內包含大量的元素，而對這些元素的管理主要通過大屏編輯器頁面左側的圖層管理面板來實現。一般我們對圖層管理的手段主要有三種：命名、分組和查找。
給組件命名是一個耗時且麻煩的行為，我們在做用戶調研時發現，大部分用戶都沒有給組件規范命名的習慣，大多數情況下，組件在圖層面板列表內都是以默認名稱或者默認名稱+1、2、3的形式存在。這導致了當頁面組件較多時，通過組件命名來查找組件其實相當困難，所以自動生成縮略圖的形式相比讓用戶耗費大量時間為圖層命名更能改善用戶體驗。縮略圖以快照方式保存當前組件最新狀態截圖，從而幫助用戶更快速的將圖層組件與頁面上的內容對應起來。
新的設計，圖層成組后也取消了縮進字符的效果，我采用給成組對象設計更明顯的分組示意圖標以及為組內列表添加深色色塊的方式，完成了成組對象與列表內其他要素區分的需求，新的設計使成組對象更易查找和識別。
此外，我們還增加了對圖層列表的搜索功能，幫助用戶快速定位名稱已知的設計元素。
此次體驗升級是設計主導推動，產品與研發緊密配合的結果。體驗設計師作為最接近用戶的群體，是產品與用戶溝通的橋梁。時刻關注用戶心聲，并能將用戶細碎的吐槽和各類反饋轉化為體驗痛點、制定對應的優化策略是體驗設計師的基本功。而對于設計和產品本身是否熱愛，也是設計能否不斷精進、體驗是否能夠不斷提升的關鍵。好的設計不僅服務了產品、幫助了用戶、同時也成就了設計師本身。
本人為莫奈提供設計支持的三年多時間，在沒有KPI要求和外部壓力的情況下，通過公司內部需求管理系統“行云”，為莫奈提交231個體驗優化建議；以線下線上的形式面向莫奈產品及研發團隊進行了20多次專業分享。正是日常這些積極主動且持續的努力，使我本人與莫奈產品團隊建立了非常友好緊密的聯系，這也為推動本次體驗升級改版提供了巨大的助力。我認為作為體驗設計師，我們不僅要對用戶有同理心，為用戶創造愉悅舒適的感受，同時也要對身邊的同事、職場中的合作伙伴有相似的同理心和換位思考的意識，體驗關乎人、環境與生活，嘗試在生活中磨煉自己創造好的體驗的能力，并將其應用到體驗設計師的職業工作中，我相信，倘若如此實踐，必能在職業和生活中都獲得有不錯的成就。
好的產品，必然是持續關注用戶訴求，不斷迭代發展的產品，好的體驗設計也必然是陪伴產品不斷優化、持續精進的設計，復盤的意義不僅是沉淀過去的經驗，更是為未來更好的體驗蓄能。
此次分享如能為大家帶來那怕一點點的啟發，本人便倍感榮幸、開心至極！ 期望大家能夠與我有更多交流，么么噠~~
作者：BYMD 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
隨著技術及經濟的發展，人們對計算機系統、機器等的要求，從單純的「 可以用 」逐漸變為想要「 更好用、容易用、用得舒服 」等更加豐富的使用體驗，也就是常聽到的好的「 用戶體驗 」。
「 用戶體驗（User Experience ）」這個概念，最早由唐納德·諾曼（Donald Arthur Norman）提出，他希望用這個詞，來涵蓋個人使用系統時的體驗、各個方面的體驗 ，包括工業設計圖形、交互界面、物理交互，以及與人的交互。
而「 用戶體驗 」產生的基礎，是「 用戶使用了機器 」，即人跟機器有發生接觸、交流、互動等，然后用戶會形成主觀上的體會、感受。這里的「 機器 」泛指各種「 產品 」，類比諾曼所說的，即物理界面、虛擬界面、系統、硬件等。
因此，好的「 用戶體驗 」是基于好的交互設計。而對交互設計「 好/壞 」的影響因素，涉及到人、產品、使用環境這三者，也就是人機工程的內容。
概括一下百科對「 人機工程學 」的解釋：
將 「 使用物的人 」和 「 設計的物 」以及 「 人與物共處的環境 」作為一個系統來研究（人-機-環境系統）。在人、機、環境這三個要素 本身特性 的基礎上，科學地利用三個要素間的 有機聯系，來尋求系統的 最佳參數。
其中關于人的「 本身特性 」包括人體結構和機能特性。主要有人體各部位的尺寸、重量、面積、活動、相互關系等，眼耳鼻舌身對應的視、聽、嗅、味、觸覺，以及動作習慣和認知。這部分大愚認為可以把「 結構特性 」當作人的硬件，具有一定的普遍/通用性；而「 認知 」則是人的軟件，個體間存在一定差異。
然后，就到了這篇文章的主要內容，人的「 結構特性 」部分。
注：下文中提及的人體結構特征是基于大部分人的情況描述，內容也是圍繞人機交互有關的方面，不是人體結構特征的全面介紹。
人體結構中對人機交互產生影響的主要有眼、耳、身（皮膚）對應的：視覺、聽覺、觸覺，以及四肢、頸椎的尺寸、受力情況和活動幅度等。下文將對這四部分的基礎內容進行整理，還有聊聊一些交互、體驗設計上的應用。
人與周圍環境發生聯系的感覺通道，最重要的就是「 視覺 」，約占80%的信息是通過視覺來獲得。因此「 視覺顯示 」是人機交互系統中用的最廣泛的一種形式。
人眼正常感受光譜的波長約在400nm-780nm之間（大概這個范圍，網上相關資料關于這個數值存在微小差異），對應的色相是紫色-深紅色，也就是常說的彩虹色。
而負責感受光的細胞是視錐細胞和視桿細胞。
視錐細胞，約占95%，復雜感受強光及有顏色（彩色）的視覺，在環境光線亮時起作用，用來區分色彩。研究數據表明視錐細胞對光譜中波長為555nm的「 黃綠色 」部分最敏感。
視桿細胞 ，約占5%，復雜感受弱光及沒有顏色（黑白）的視覺，在環境光線暗時起作用，用來區分黑白。研究數據表明視桿細胞對光譜中波長為507nm的「 青綠色 」部分最敏感，對極弱的光刺激敏感。
如果涉及一些特定的工作環境（昏暗）的應用設計時，就可以考慮下此時作用細胞的特性，進行合理的設計設置。
正常情況下，瞳孔會根據環境中的光量來調整大小。當有光線較強時，瞳孔會收縮變窄；當光線很暗時，瞳孔會膨脹來讓更多的光進入眼球。
可以把這個理解為一個保護機制，在強光下，通過收縮來減少光對眼睛的高強度刺激；而弱光下，對感光細胞刺激不足，為了不讓眼睛過分費力地去尋找目標和識別目標而引起視覺疲勞，所以瞳孔會放大，讓更多的光進入。
而接收光的刺激，看到物體后，是否可以準確獲取信息（看清物體、識別文本、圖像等）則跟視敏度相關。
視敏度 ，就是眼睛能分辨物體細微結構的能力，也就是看清物體的能力。相關實驗數據表明，增強亮度可以提高視敏度。也就是說，亮度越強，人眼對物體的識別能力就越強。
下面提到兩個實驗，其中「 正對比極性 」，指在淺色背景上顯示深色字體文本，就是對應我們界面設計中的「 淺色模式 」；而「 負對比極性 」，指在深色背景上顯示淺色字體文本，即「 深色/暗黑模式 」。
實驗1. 德國杜塞爾多夫精神病研究所的Cosima Piepenbrock等相關人員，對「對比極性對視敏度和校對的影響」的研究結果表明：人眼在「淺色模式」下的視敏度要優于「暗黑模式」下，字體越小，淺色模式的優勢就更明顯。
實驗2. Agelab實驗室的喬納森·多布雷斯（Jonathan Dobres）等相關人員，對「 環境光照條件（模擬白天/夜間）是否影響正對比度極性的優勢」的研究表明：夜間，深色模式下閱讀小字體文本比淺色模式下閱讀要困難得多。 而人們對文本的識別，「淺色模式」下比在「深色模式「要快，白天比晚上更快。
對上面兩個實驗可以用環境光的強弱對視敏度的影響來理解：為方便理解，可以假設我們的界面尺寸足夠大，大到覆蓋我們視野范圍，那就可以將淺色模式中的淺色背景類比為白天（環境光度亮），深色模式中的深色類比為夜間（環境光度弱），而屏幕內的文本、信息，就是我們要識別的物體。亮度越強，人眼對物體的識別能力（視敏度）就越強。
從上面的實驗來看，無論在白天或夜間環境下，「 淺色模式 」都要比「 深色模式 」更好用。
但根據德國蒂賓根大學的Andrea Aleman等相關人員的一項研究表明，長時間處于「淺色模式」下可能會導致近視。其表現為，閱讀「淺色模式」下的文本時，脈絡膜（跟近視有關的一層膜）會明顯變??；而閱讀「深色模式」下的文本時，這層膜明顯變厚。
可以理解為長時間處于「淺色模式」下，意味著視敏度的持續維持在較高狀態，就像人在長時間高強度工作下可能會導致健康受損一樣，眼睛同樣也可能會受到損傷。因此相對長期來說，「深色模式」則是更友好的一種形式。
那通過適當的設計，是否有可能找到這兩者之間的最優解呢？
注視區域光照不足、光線過強、光線分布不均勻、光源閃爍、眩光、反光、目標過小、目標不穩定等，都會造成眼睛超負荷工作，導致視覺疲勞。
光照不足，對應界面交互，可以指屏幕亮度過低，也可以理解為內容和深色背景間的對比度不足。
光線過強，則是屏幕亮度過高，也可以理解為內容和淺色背景間的對比度不足。還有大面積高明度色彩的使用。而像汽車遠光燈，也是常見的一種光線過強的產品，并且常常被錯誤使用。
閃爍，會對眼睛造成很大的負荷。在高亮度下，眼睛除了視敏度會增強外，對閃爍的感知也會增強。這方面涉及的產品設計，如顯示器的刷新頻率，要到達某一程度，人眼才感覺不到屏幕的閃爍。
目標過小，在可識別及相同環境下，目標過小，識別所需的時間越長，也就是更費眼。像界面中的元素，文本字號、圖標等，都需要有舒服的可讀性。
反光，跟工業產品設計的關系比較密，反光是很容易引起視覺疲勞的和視力傷害。但生活中好像處處有反光，高樓大廈連片的鏡面窗戶/墻、我們正在看的電腦屏幕、手機屏幕、公交車廣告牌的保護罩、汽車的后視鏡等等，都會在某些瞬間讓你覺得眼睛受到了億點傷害，這也是很常見的一種光污染。
水平方向上，雙眼視野角度通?？蛇_到120°視角。其中「 有效視域 」為30°，即人眼能立刻看清物體的存在和動作軌跡的范圍。其余部分稱為誘導視野，也就常說的「 余光 」。
而眼動（頭部不動）「 舒適轉動區 」通常為60°。
如果以眼睛距離屏幕40cm為例，水平最佳視野寬度大概就是21.6cm，在72dpi下，約為600px。在進行文本寬度設定時，可以以此作為依據，來設計內容的顯示寬度。
垂直方向上，視野角度通?？蛇_到135°視角，「 有效視域 」為30°，「 舒適轉動區 」為55°。
關于「 最佳視角范圍 」及「 眼動舒適區 」的應用，在汽車領域的HMI設計和一些較為復雜的交互活動中有比較多的體現。
聽覺對信息傳遞的感知僅次于視覺，同視覺一樣，利用以前的經驗來解釋輸入。
相比視覺，聽覺更容易引起注意，且反應速度快，可以捕捉各個方向的信息，不受照明條件限制。
人類聽覺系統對聲音的解釋可幫助設計人機交互界面中的語音界面，而對有能力缺陷的人，如視障人士來說，「 聽覺（語音交互） 」更是一種替代視覺顯示的重要形式。
聲音有三個要素：音調（頻率）、響度（振幅）、音色（材質）。
人類可以聽到的聲音頻率范圍為20Hz-20kHz，正常情況下人耳可分辨出約 40多萬種 不同的聲音。
對語音的辨認頻率范圍為260Hz-5600Hz。正常情況下，人類語言的頻率在：500Hz-3000Hz之間。
感受性、識別性最高的頻率范圍在1000Hz-4000Hz，低于500Hz，或高于5000Hz時，要達到一定響度才能被聽到。
0－20dB，幾乎感覺不到
20－40dB，相當于低聲說話，輕柔的響聲
40－60dB，正常談話的聲音
60－70dB，會感到吵鬧、長時間會損害神經細胞
超過70dB，讓人感覺煩躁，無法集中注意力
85-90dB，短時間內影響人的聽力，破壞神經細胞
超過90dB，聽力受損
超過140dB時，引起的是痛覺，而不是聽覺，會完全損害聽力（歐盟界定的導致聽力完全損害的最高臨界點）
人耳對各種音色的分辨能力非常強，對經常聽到的音色也具有很強的記憶力。
比如在同一頻段同時演奏不同的樂器，人耳依然可以分辨出有哪些樂器在進行演奏，也能識別出不同動物的叫聲。
而對于熟悉的人，比如對父母兄弟姐妹等，經常只通過說話的聲音，就能知道是誰；通過腳步聲，也可以辨認出來是誰來了等等。
除了對聲音的「 音調、響度、音色 」這三個要素的感知之外，人耳還能辨別出聽到的聲音是「 從哪里/哪個方向傳來的 」，也就是聲源方位感。
瑞士的神經科學家通過研究發現：粗糙的聲音（上限約為130 Hz）激活了大腦某些特別的區域。
當重復的聲音被認為是刺耳的、無法忍受的時候（特別是在40-80Hz之間），會引起持續的反應，刺激杏仁核、海馬體和腦島，特別是跟突出、厭惡和疼痛相關的區域，而正因為有這些區域參與聲音的處理，才會使這類聲音會讓人感覺到難以忍受。
這也是警報聲的應用原理，通過快速重復的頻率來引起人們的注意。再結合聲音傳播不受光照、方向、角度等影響的特性，來提高警報聲被人耳檢測到的概率。
其他讓人感到煩躁、難受的聲音，如汽車喇叭聲、尖叫聲、嬰兒哭聲等等通常也是在這一頻段。
視覺上的三維圖效果，是眼睛先呈「 散焦狀態 」，視焦點前后位移產生層次感，從而看到三維平面圖畫的立體效果。
而人耳的聽覺跟視覺相反，可以從眾多的聲音中「 聚焦到某一點 」上，也就是聽覺的「 聚焦效應 」。
比如我們聽交響樂時，大腦皮層可以抑制其它樂器的演奏聲，把精力和聽力集中到其中的一種樂器聲音上。還有在公交地鐵上，我們同樣可以集中精力聽廣播報站的聲音，而忽略車上的其他喧鬧聲。
這個特性也讓語音交互的場景擁有更多的可能性。
觸覺屬于動覺交流領域，即通過身體的運動/動作來交流。
跟視覺、聽覺的感知相比，「 觸覺 」最大不同是它的非局部性（全身皮膚），以人體為介質，對皮膚、肌肉的感受器進行刺激，能夠 敏感、強烈和更迅速 的被用戶感知，及時傳遞信息。也 不易受環境影響，無論環境吵雜，或是光線不佳，對其體驗效果的影響都不大。
但「 觸覺 」傳遞的信息遠少于視覺和聽覺，通常作為視覺和聽覺反饋的補充。而對有能力缺陷的人，如聽障、視障人士來說，「 觸覺交互 」的應用則是一種很重要的形式。
同時也是用戶體驗過程中重要因素之一，會直接影響用戶對產品的情感體驗與交流。在工業產品設計中感受較多，如日常工作生活中常見的家居用品、鼠標、鍵盤、手機等的外形設計、材質觸感等。
人類的皮膚表面散布著觸點，一般指腹最多（人類手指的觸覺敏感度是前臂的10倍），其次是頭部，最少的是背部和小腿。觸點的大小不盡相同，分布不規則。
通過對冷、熱、尖銳物體的判斷，讓身體及時遠離危險和傷害，可以對人體起到保護作用。
同時也具有表達情感，辨別情緒的功能。有說法認為「觸覺」可能是用來傳達人的情感的最佳途徑，就像「 擁抱 」和「 安慰的文字/語言 」，體現的情感強度就很不一樣。
借助Haptics技術，通過作用力、振動等「 觸覺反饋 」，可以起到傳遞信息的作用。但想通過「 觸覺體驗 」來傳達恰當的、有用的信息，需要先理解人類是如何詮釋不同的「觸覺體驗」的。
比如想要通過「 振動感知 」來傳遞有用的信息，需要先了解怎樣的振動頻率、強度、節奏可以讓使用者意識到其代表的是什么意思：成功、失敗還是其他呢？這涉及到「 認知 」方面的內容。
通常情況下，「 觸覺反饋 」是作為視覺、聽覺反饋的一種補充。
如在觸控屏上用虛擬鍵盤輸入文字時，通過按鍵的「 振動反饋 」，讓用戶清晰及時地了解到自己已經成功按下了某一個按鍵。相關研究的結果也表明：虛擬鍵盤加入振動反饋后，是可以提升用戶輸入時的準確度。
而一些特定場景下，「 觸覺反饋 」可以很好的替代視覺和聽覺反饋。
比如駕駛汽車時，駕駛員需要將大部分的注意力放在道路環境上，那么通過「 觸覺反饋 」，將部分操作結果傳遞給駕駛員，這一可以在一定程度上減輕駕駛員在視覺和聽覺上的負擔。
人類的動作通常分為三類：先天、模仿、訓練得來的。
由于肢體的結構特點，「 先天 」和「 模仿 」的動作，通常存在一定的局限性。
頸椎前屈幅度35-45°，后伸35-45°，左右側屈各45°，左右旋轉各60-80°。
當頸部前傾時，頸椎承受的壓力逐漸增大：
前傾0°時，為頭部重量，約為4.5-5kg；
前傾15°時，承受壓力約為12kg；
前傾30°時，承受壓力約為18kg；
前傾45°時，承受壓力約為22kg；
前傾60°時，承受壓力約為27kg。
結合前面我們講過的人眼轉動的舒適角度和視野范圍，可以為一些物品的設計提供參考。
直立，腰伸直自然體位時，腰部可前屈90°、后伸30°、左右側屈各20-30°、左右旋轉各30°。
人體平（仰）臥位時，腰椎承受的壓力最小。
膝關節屈膝角度可達120-150°（小腿后部和股后部相貼）。人坐立時，膝關節彎曲90°，小腿和地面垂直放置對腿部最好的，屈膝小于90°時，長時間保持會影響下肢的血液循環。
伸直時一般為0°，有過伸狀態5-10°。膝關節屈曲時，有輕微的內旋和外旋運動，約為10°。
肘關節彎曲角度可達140°、過伸角度為0-10°、旋前80-90°、旋后80°-90°。
打字時，手肘彎曲接近90°（水平放置）是最放松的。
掌側可以外展約70°，指間關節屈曲約90°，掌拇關節屈曲約20-50°。
和手腕連接處的腕掌關節，能夠進行較大程度的屈伸，收展，完成對掌運動。這是拇指特有的，是拇指骨外展，屈和旋內運動的總和，使拇指尖能跟其他的手指和掌面接觸。
掌指關節屈曲約60-90°，近節指間關節屈曲時約為90°，遠節指間關節屈曲時約為60-90°。
在使用手機等數字界面時，用「 食指 」和「 拇指 」進行觸控是比較自然和常見的行為。
根據麻省理工對人類觸覺的實驗，食指、拇指的寬度和觸控區域有以下數據：
食指平均寬度約16~20mm、指腹觸摸區域尺寸約10~14mm、指尖觸摸區域尺寸約8~10mm。
拇指平均寬度約25mm、指腹觸摸區域尺寸約12~16mm、指尖觸摸區域尺寸約10~12mm。
觸控控件的最小尺寸要大于觸摸的最小尺寸?？丶^小，一方面會增大準確觸控的難度，另一方面手指會造成遮擋，導致用戶無法明確是否已經正確觸摸了相應的控件。
（手指觸控這部分本來放在上面關于觸覺的內容里，后面想了下，「觸覺」更多的是指「反饋信息」層面的作用，所以還會歸在肢體動作、范圍里比較合適。）
用鍵盤打字時，在某些瞬間，多數手指只是放在鍵位上，沒有擊鍵行為，因此鍵盤按鍵的驅動力需要大于手指重量產生的力，才足以支撐手指。
ANSI 1988 年建議鍵盤擊鍵的理想壓力應該在0.5N-0.6N之間，一般0.25N-1.5N的壓力都是可以接受的。
而對于一些特殊的設備按鍵，比如工業鍵盤類的，則需要更大的按鍵驅動力，因為這類產品的工作環境和活動相對復雜，需要更謹慎的操作。
單手對手機等觸屏設備進行操作時，一般以四個手指和手掌為依托，用大拇指操作為主，而成年人拇指長度約為6-10cm。
數據表明，一般成年男性，單手全屏操控的屏幕尺寸最大約為4.5英寸，而成年女性，單手操控的極限約為4.0英寸。超過這個尺寸，單手進行全屏操控會有一定困難。
而目前主流的智能手機基本在5英寸以上，根據拇指關節的活動幅度，單手操作時在手掌位置不動的情況下，拇指觸及的區域只是很局限的一部分：
以上就是體驗設計中涉及人體結構特性的內容部分。
感謝閱讀，期待交流。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn