Dashboard的含義
Dashboard在B端設計的工作中是一個繞不開的話題，在此我根據自己工作中實際的一些經驗總結給大家歸納出一篇更符合工作場景中Web端的Dashboard設計內容。
Dashboard的中文直譯是儀表盤，最初與dashboard相關在界面出現的是蘋果電腦系統Mac OS X v10.4 Tiger操作系統中的應用程序，用作稱為“widget”的小型應用程序之運行基礎。
2013年Stephen Few寫的《Information Dashboard Design》中指出“儀表盤是為了實現某些特定目標而對重要信息進行的視覺傳達，對一屏上的內容進行組織呈現使人一瞥便能掌握其所傳達的信息。簡單點來說就是：為用戶提供全局概覽，讓用戶快速掌握工作進展及進入工作狀態并可以訪問最重要的數據，功能和控件。
Dashboard設計案例
以下是Dashboard常見4點設計不是很好的案例，現在帶大家一個個看下怎么才是更為合理。
案例一：右邊Dashboard上的信息做了層級的區分，相對左邊更加直觀。
案例二：左邊Dashboard顏色偏熒光色，色彩語言相對右邊不適合長期工作使用。
案例三：設計方案時沒有采用格柵格化解決適配對不齊等等問題
案例四：dashboard模塊之間間距沒有呼吸感。
B端設計中，設計師要實時了解哪些是重要內容以及核心數據。Dashboard可以直接傳遞出：“業務整體狀況如何？有哪些關鍵指標？各指標的運行情況分別如何？哪些指標出現異常？需要用戶做些什么？”。由此可知，B端Dashboard產品中大多數都以看為主，輔以功能控制。主要分為監控操作、分析處理兩大場景。當業務較為復雜時，可以用戰略概覽場景提供快速入口。
1.監控操作：
使用戶可以一目了然地檢查其狀態，提供關鍵指標實時監測并且告知異常狀態。更重視實時觀看狀態。
2.分析處理：
通過數據圖表，配合控件進行不同維度的數據分析。以數據為中心，并顯示盡可能多的相關數據視圖。
數據性Dashboard。數據概覽可視化展示為主。幫助用戶提供較為直觀數據維度，更好分析決策。
綜合性Dashboard，既有提供數據全局概覽可視化，同時也能快速在頁面進行操作完成工作。國內B端產品最常出現的Dashboard功能模式。本篇文章也是著重介紹如何完成這個類型需求
3.戰略概覽：
在復雜的業務中，可以呈現業務分散的重點信息，用戶可以通過提供入口快速跳轉至相關模塊。
B端設計過程中每多了解一個維度分析就更有利于下一步Dashboard框架搭建。因此在對Dashboard有了一些簡單了解之后，我們再來了解下用戶場景。例如：用戶是財務人員審批商戶充值申請。工作人員進入dashboard之后先是進行充值打款申請。那么設計時可以考慮在Dashboard中加入常用功能：充值。并且需要給到相應充值數據概覽：賬戶余額。每個B端產品都有自己特定工作場景。因此從用戶、場景和任務這三方面考慮，可以做到幫助設計師更清晰設計dashboard布局以及設計自查。
因此以上這些信息都是需要在設計Dashboard時弄清楚的內容。
信息處理
當弄清楚需要呈現信息內容后，需要進一步對信息做處理。從用戶的角度，舉個例子在FMS財務系統記賬中，財務需要查看季度報表。那么數據的單位以默認季度呈現會更為符合使用用戶需求，準確且高效。具體可以從以下四個維度來做進一步處理：覆蓋范圍、時間跨度、粒度、個性定制。一般核心指標不超過7個，確定核心指標的聯系及優先級。
合理的信息結構能夠幫助用戶高效閱讀，理解內容。如何將信息碎片有邏輯地組合在一起，合理呈現和布局，選擇使用什么結構視內容而定。
舉個例子：
對于管理者的角色來說使用Dashboard的訴求是：及時把控業務情況
信息處理內容：
1.掌握重要業務數據：經營數據，訂單數據，客戶數據；
2.了解員工工作進度；
3.處理急需解決的工作任務。
對于執行者的角色來說使用Dashboard的訴求是：高效完成工作任務
信息處理內容：
1.急需解決的工作任務：待發貨訂單，待退款，待跟進客戶
2.了解自己的工作進度
3.經常使用的功能：發布商品，添加客戶，開單
4.查看重要通知公告：公司發布的公告
Dashboard表現結構常見兩種類型：卡片型、流程型。
卡片型
最常見就是卡片型。即將有相關聯的內容進行分組呈現，讓Dashboard內容歸類而不雜亂無章。
流程型
內容相互之間具有一定的邏輯關系，如地理位置關系、數字包含關系、對象父子關系等，這種結構可以讓對象之間的邏輯關系十分直觀。很直觀的呈現了資源對象之間的相互關系。
國內B端產品一般是由以下這幾個部分組成的。全局導航、數據概覽、待辦事項、常用功能、任務進展、平臺推送、數據圖表。下面帶大家仔細看下具體每個部分具體如何設計。
1.全局導航
在B端Dashboard中，全局導航一般由三個部分組成。平臺LOGO、功能入口導航、快捷功能導航。
1.1平臺LOGO
一般這里都會放LOGO，對于一些壁壘標準化B端服務，這里通常是給好標準規則，后臺自動配不同客戶的LOGO。因此要考慮到區域的色彩是否適用各種不同LOGO。如果是OA或是定制化B端服務，那么就可以直接定制設計。
1.2功能入口導航
就是菜單導航，在B端Dashboard一般都是在側邊。建議最多不要超過9個，遵循7±2原則。盡量將同類型歸類，好好利用下二級分類。另外入口不要太深，用戶容易找不到入口。盡量設計優化合并來減少用戶使用負擔。
在國內B端產品中，最常就是將功能入口導航放在側邊。適用于更專注功能和快速操作的系統
優點：
拓展性，一級導航的數目可以展示更多；
層級清晰，一二三級導航都可以流暢展示；
操作效率高，用戶在操作和瀏覽中可以快速定位和切換當前位置。
缺點：
視覺動線左右折回，比頂部導航更易疲勞，
內容區的排版空間更小，需要考慮適配問題。
在國內B端結構比較龐大的后臺中,通常會將功能入口導航設計為混合模式?；旌夏Ｊ骄褪菍⒐δ苋肟诜譃轫敳颗c側邊兩邊都有。這是因為側邊模式已經無法層級擴展性已經無法很好的滿足產品架構了。
優點：
層級拓展性強，可達四、五級導航。
缺點：
操作難度上升、視覺動線更復雜。
還有一種模式：頂部模式，這種模式在國外產品中較多，在國內的B端產品中較為少應用。原因之一是起初最早的國內B端產品就采用這種排版模式，在國內形成了一種用戶操作習慣。國外最常見的B端頂部導航：saleforces、hubspot、zoho。
優點：
沉浸感比側邊以及混合都要強，幾乎不會對于用戶的閱讀行為有干擾，因為Web也有頂部瀏覽器菜單。
缺點：
一級導航欄的欄數及字段內容受限嚴重。國內B端產品會有很多快捷功能就更不利用采用這種模式
1.3快捷功能導航
一般包含：消息通知、賬號信息、幫助中心、設置。在國內B端產品中基本上都是在右上角
在B端Dashboard中，數據概覽通常都是選取最關注的數據指標來展示，而不是全部數據；選取最關注的時間段，而非全部時間段。
構成：數據名稱+數字
這個模塊在設計表現上最重要就是信息層級的設計處理。如何能夠讓用戶一眼就看到最關注的數據內容指標。設計時注意突出數據才是關鍵。設計時關鍵數字上就要字號大一點，甚至可以采用特殊的數字字體，例如DIN系列，來加強對比。
待辦事項模塊通常是應用在執行角色的Dashboard中。節省工作人員尋找任務的時間，避免遺漏任務。
構成：待辦事項名稱+數字+可點擊跳轉的鏈接
待辦事項的展示方式可以是數據可視化也可以是數據概覽。但是有一點，數據必須是要能夠點擊的，因為待辦事項就是要有入口去操作。同時也可以把待辦事項平鋪出來，平鋪幾個可以根據具體情況定。如果待辦樣式本身很多的情況下，可以采用tap切換的樣式全部展示出來。
用戶高頻操作快捷入口，點擊跳轉相應操作頁面。這個模塊每個b端產品都不一樣，需要仔細反復斟酌是否是用戶需要的高頻功能。
用戶當前最關心的任務，常用進度條或者時間軸的形式表示。
平臺用來觸達企業的信息，一般有產品更新動態，學習培訓，客服，廣告推送，活動消息（這個一般比較常出現在平臺類的b端產品中）
卡片式數據圖表可以拆分成圖表+輔助兩種組成部分
7.1圖表
B端設計師需要準確通過圖表來表達出用戶需要的維度信息。
7.1.1折線圖
隨時間（連續內容）而變化的連續數據，適合表現趨勢。Y 軸刻度值選擇要合理，以數據波動要最大化的顯示
7.1.2面積圖
面積圖和折線圖比較類似，針對只有單個數據類型有面積區域的表達效果比折線圖好。數據類型盡量不要超過2個，有2個數據類型時，注意調整面積區域的透明度以及色系保持統一
7.1.3柱狀圖
通常用來統計累積疊加數據，數據之間能夠非常清晰直觀對比。柱狀圖的單位寬度不要是固定值，單位寬度之間間距在不同分辨率屏幕下的對比要合理。不用大圓角元素，不夠嚴謹，太活潑。最多使用兩種顏色，一種默認，一種hover或tap，保持界面統一性
7.1.4扇形圖
有共同的上一級層級作為統計總合，數據之間平級且有占比。數據必須是正整數，至少兩個以上數據，且用不同顏色表示
7.1.5環形圖
與扇形圖很相似，但是比扇形圖更加直觀瀏覽且不被搶視覺。避免過于太細太粗，控制好留白呼吸感
以上是常用的圖形圖表，絕不是全部。有興趣的同學可以到以下兩個網站可以利用碎片化時間擴展學習
EChart：
https://echarts.apache.org/examples/zh/index.html
AntV:
https://antv.gitee.io/zh](https://antv.gitee.io/zh
7.2輔助元素
卡片型圖表的第二部分也就是輔助元素。輔助元素里面還有很多細節元素組成：標題、軸、提示信息、標簽、氣泡信息、功能（篩選、導出、保存）。當然在實際設計中，會根據場景去修飾刪減一些元素，以此來減少冗余信息，幫助用戶快速達成目標，在最少的時間內獲取更多的信息。
7.2.1標題
標題是區分卡片信息，迅速讓用戶了解卡片圖表的重要元素。通常需要斟酌嚴謹不重復，簡潔概括。
7.2.2軸
軸上最重要的內容就是單位，將每個數據在同一軸上都是維持同種基準。便于進行數據測量。
7.2.2.1軸的細節
現在知道了軸由哪幾部分構成，那么接著了解細節
軸線
軸線細節一般只考慮是否顯示，在有網格線的情況下，可以考慮隱藏x/y軸線。通常顯示數據的軸作為隱藏，突出視覺重點，減少不必要的線條。
軸刻度
軸刻度是軸線上的間距不宜過密，確保信息可讀性以及呼吸感，根據 7±2 法則，在可見的卡片內盡量保持這個規則，可以利用抽樣顯示的手段來優化軸標簽重疊的問題，這種一般是在連續性內容上可以使用。若軸上單位信息確實過多，雖然是連續性內容例如展示30天單位，由于本身卡片信息不是過于最重要層級，設計在相對狹小空間尺寸中，那么建議考慮在軸線上安排滾動條，并將重看單位放置前位。設計特別注意點，將滾動條設計作為輔助元素不宜搶視覺。
網格線
網格線是用來輔助圖表數據直觀對比的，增加數據更快速的閱讀性。舉個例子：數據展示軸線在左邊。那么離左邊最近的數據圖形可能不需要網格線就能立即對應到相應數字。但是越靠近右邊的數據圖形就相對比左邊的數據圖形就比較難一眼識別。因此網格線也擔任了刻度尺的功能。在設計網格線時要注意網格線更多是輔助的角色。表現類型可以選擇虛線或是實線。但是要把握好顏色選用不搶視覺重點又能看到。
7.2.3提示信息
以對照的方式來理解可視化對象的項目歸類信息，總結圖形形狀和文本組成內容。
7.2.4標簽
在圖表中，標簽是對當前的一組數據進行的內容標注。根據不同的圖表類型選擇使用。
7.2.5氣泡信息
當標簽默認不顯示，氣泡信息一般是鼠標tap或者hover時，顯示該位置的數據。在簡潔的頁面中，也能讓用戶直觀看到信息對應數據結果
7.2.6功能
這個模塊涉及的內容偏多，在表單頁面更常出現，以后有機會可以單獨說。一般常用功能如篩選、導出、保存?？梢宰層脩艨刂坪陀押玫捏w驗
確定B端產品的設計風格
首先tob的產品dashboard說到底還是給使用用戶所使用，也就是“人”。所以通常情況下dashboard除了傳遞出用戶想要的數據信息，還要傳遞服務于人。此外最重要的是B端設計師需要理解項目背景。例如某個財務應用平臺不屬于科技未來感，而是突出一種安全，高效，具有客戶親和力的商業產品特性。那么關鍵詞：服務、輕松、高效、親和、精致。那么一個干凈、相對輕量、統一的Dashboard UI界面就提煉出來。
色彩
常說色彩是一種情緒版，在Dashboard設計中，色彩也是映射關鍵詞的非常重要一個環節
字體
B端產品一般都是以數據為主要信息源，針對一些關鍵信息指標時，可以采用特殊的數字字體。由于本身數字字體包內存不大，所以也方便調用。例如DIN系列等等
設計稿尺寸
本篇內容都是針對pc端內容，具體移動端以后有機會會分享。大多數B端設計師都知道以1440x900設計，但是在工作中會以埋點數據了解到事實上真實場景還是以1920x1080的尺寸為多數。畢竟時代不一樣了。以1440做設計主要還是考慮從上下兼容的角度的。B端與C端不同，C端往往照顧大多數的用戶群體或是主要消費力群體。但是B端一般不會放棄任何一個用戶，哪怕定制化。這個在C端是不太現實的。因此適配對于B端產品來說也是尤為重要。
設計原則
上面的內容更多是闡述每個部分的內容，實際工作中設計Dashboard時不一定按照那個順序進行，因此在此再強調下設計Dashboard的設計順序以及原則。要先弄清楚目標用戶以及使用場景，確定好關鍵的大約7個核心指標。將用戶整個流程梳理流暢之后，再開始考慮Dashboard設計執行。
同時在設計執行上也要特別注意幾個點：
1.突出核心指標（7個左右）
2.信息層級區分
3.減少用戶選擇，盡可能默認給到用戶需要的數據維度
4.界面簡潔嚴謹
5.避免過多顏色與不統一
6.數據維度正確圖表選擇
設計的注意事項以及建議
1.tob的設計師要了解業務所處的周期在什么樣的階段。在探索期建議dashboard的設計應用于市面上現成的組件進行搭建，以便與研發團隊一起為業務助力。更好更快的發展。
2.在tob的dashboard設計中，設計師要特別注意數據表現的落地效果
3.當dashboard只在設計層面改版，并且改版內容過大時，推薦保留舊版入口，提前進行埋點用戶以便應對用戶對于大版本適應緩解焦慮。如果有新功能或功能調整要及時加入一些引導設計，以便減少用戶的學習成本。關于引導設計的內容歡迎參考我的上一篇文章：《B端必看的引導設計（一）》
4.允許用戶定制和共享dashboard，雖然不適用于所有的B端產品，如果類似于團隊協作中多種角色共用一套的dashboard平臺，可以考慮引入這個功能。幾組定制模塊可以滿足于不同角色的用戶需求，并且能夠增加dashboard的使用率
5.dashboard關鍵信息數據盡量設計在一屏以內，作為數據可視化，內容快速瀏覽獲知全局，并且完成任務是比較重要的。
6. 突出統計數據的變化并對異常情況作出反應
7.數字設置不一定要設置為右對齊，但是單位是金額，那么要將金額設置為右對齊，為了使用用戶識別方便，快速比較。
8.設計完Dashboard一定要自查一遍，是否真的符合工作人員的使用場景。有沒有理解不準確的地方。
為什么b端設計師要懂得Dashboard，在很多b端業務場景中，有個特點，設計師常常會接到大量數據展示要求。如果設計師對dashboard缺乏認知，就有很大的可能性會造成信息雜亂，并且在Dashboard的界面中充斥著一些無關緊要的指標，這就是失去了Dashboard存在的意義。另一方面在b端產品中，Dashboard往往是以首頁的形式出現的,是非常重要的。
文章來源：站酷 作者：一九互七
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
當我們設計師輸出了精美的設計稿，然后附帶了一個流暢的手勢動畫，交付給開發的時候，也期待著開發大佬搞出和自己預期一樣體驗流暢。但是等到實際體驗的時候，卻發現有一種說不出的鬧心。
“這個感覺不好按...”
“劃起來咋這么費勁呢？”
“怎么感覺動畫怪怪的?！?
當你正準備和開發一通友好探討的時候，這個時候開發向你發起了一系列靈魂拷問：
“你這個左滑的手勢，劃多少才算觸發？劃多快才算觸發？如果劃了一半劃回去算不算觸發？如果我先點擊后滑動算不算觸發？松手之后的動畫是多快的速度？什么速度曲線？要不要回彈效果？回彈阻尼系數是多少？”
這個時候你發現，自己提出的設計需求根本太天真了。
剛才的問題真實原因是，在做很多手勢識別或者一些我們看起來日常的效果，其實是蘊含了很多復雜邏輯的。
這些復雜邏輯原本被封裝在操作系統內，在系統內時可以隨時調用。但是一旦脫離了操作系統，那手勢的處理邏輯就會比較簡陋，導致最終的體驗不佳。
那這個時候也許你會想問，我們怎么會脫離操作系統呢？我們的手機不都是iOS和Android的嗎？不都是操作系統嗎？其實這里指的操作系統，是指操作系統的原生組件。這類組件只有在原生開發中才能被調用。
如今，很多App都使用前端語言來開發內部頁面(HTML/CSS/JS)。隨著Web混合開發，Flutter等跨端技術棧的出現，越來越多的團隊開始擁抱這樣的跨平臺技術棧。在節約了開發成本的同時，隨之而來的就是，在日常開發過程中，離純原生組件越來越遙遠。
在這樣的背景下，研發團隊的體驗設計師需要自己來研究用戶行為，手勢、組件和動效，實現原生組件類似的復雜邏輯，才能最大程度的接近甚至超越原生組件的體驗。
其實使用各個技術框架，也是有內置一些接口的。例如一些事件監聽器 / 動效曲線等。這也是騰訊文檔之前一直在使用的，但是會遇到一些問題。總結下來，主要有以下幾個問題：
無法精確操作：用戶的操作和操作反饋被自己的手指擋住，無法完成精確操作。
手勢識別誤觸：同一熱區支持了多個手勢，可是用戶的實操時的手勢動作又沒那么標準，導致用戶誤觸其他手勢。
手勢觸發費力：滑動費勁，需要滑動很長距離才能觸發預期的動作。
動畫不流暢：各個技術框架自帶的動畫曲線和插值器，良莠不齊，體驗不統一且不夠流暢。
對于原生組件，我們習以為常的系統控件和手勢設計，里面蘊含的智慧遠比我想象的更多。
舉個簡單的例子：iOS系統的首頁，它可以支持橫豎各個方向的滑動，并且在觸發一個方向的手勢之后，就無法再觸發其他手勢了。
但是其實有個問題，手指和平時演示的不太一樣。
就是手指貼合上屏幕的時候，手指與屏幕的貼合面，并不是均勻向四周擴散的，而是向下的擴散更大一些。對于觸摸中心點，在觸摸的過程中，就會有向下的一個偏移。
如果直接識別，這個偏移直接被識別為向下滑動，那就會無法觸發左右滑動的手勢。
例如在iOS內的手勢識別，有一個專門的接口來做識別：PanGestureRecognizer，這個接口會在10px內先判定手指移動的方向和距離，再對具體觸發的手勢來做定義。例如下圖，雖然剛開始手指位置有些許下移，但是最終還是可以左滑判定成功。
所以你會發現，如果在iOS桌面上輕微的向左右滑動(10pt內)，桌面是不會有任何響應的。就是因為在10pt內，系統還無法確認手勢的方向。
另外，系統還自帶了很多手勢反饋操作，包括回彈效果，甩出效果。里面的小邏輯設計需要非常精準。并且對于滑動的手勢還帶了回彈效果，看起來非常爽。
騰訊文檔是基于Web / Flutter的應用，并且接管了很多原生系統的能力，包括排版能力、光標選區能力，拖動能力等。因此，很多基于Native開發能很簡單解決的問題，在Web下就要重新打磨一套我們日常習以為常卻邏輯復雜的組件。
由于騰訊文檔是基于Web的的應用，接管了很多原生系統的能力，所以不能使用系統的Gesture Recognizer，也不能使用系統的選區光標能力。
如果是簡單的使用前端的操作監聽器，那會要求用戶使用極其標準的手勢操作才能觸發，否則就會觸發失敗。因此需要設計更精準且適應性的規則，來包容用戶不那么標準的實操手勢。需要幫助用戶在粗糙的實操手勢下，猜測用戶原圖，并精準完成的操作。
可能你以為手勢操作并不常用，其實并不是的。
一個單擊，一個雙擊，其實本質上都是手勢。
不過，很多人可能會認為，按說這些操作都有原生的監聽器，不需要再去定義。但是其實如果不做一些進階定義，就會出現操作不靈敏的問題。例如下面這個問題。
在很多安卓手機上，或者是我們自己的騰訊文檔里，時常遇到一個問題：就是原本以為雙擊文本區域可以選中文字，可是卻發現這個雙擊成了一個玄學事件。雙擊有時生效而有時不生效。
理想的雙擊大概是這樣的，是需要2次有效的Tap事件：
這個Bug讓我們來定位一下。讓我們還原一下事情的經過：
哦！原來是因為雙擊的其中一稍微偏移了一下，拖動到了光標，導致系統判定是一次Tap一次Drag的行為，這樣就沒有辦法觸發雙擊行為了。
解決方法也很簡單。把10px偏移距離內的滑動行為都判定為點擊行為就可以了。從這里看，我們其實需要做的是，規范“點擊”這個手勢的定義。
因為原來的系統自帶定義，容易造成誤操作，而且手指貼上屏幕的時候，都會產生輕微位移，或者一不小心滑動了頁面，或者不小心拖動了光標，導致手勢識別的不靈敏。
原定義：“點擊并在500ms內在原處松手”。
需重新定義為：“點擊并在在500ms內，在10px以內處松手”。
另外，文檔移動端也定義了一系列更進階的手勢的操作，在這樣對手勢的進階定義后，操作可以被更精準和智能的判斷。這些定義被寫在了設計規范中，包括了單擊 / 雙擊 / 長按 / 拖拽
騰訊文檔的整個文本編輯區域都是使用Canvas實現的，由前端自主控制渲染。因此，選區光標就無法直接使用系統能力，需要設計師來設計一套選區光標，并且支持系統的各種選區光標的手勢。
由于騰訊文檔的光標選區是非?；A基礎的編輯組件。這個組件在一般的產品中，都是直接復用的系統組件，但是在騰訊文檔中，就需要重新去考慮光標組件。
首先有個需求，光標是可以在文本中快速拖動的。
經常會遇到拖動。無論是光標拖動，還是長按選中，我們都希望能清楚的看到光標的位置，所以我們在用戶拖動光標和選區的時候，使被拖動的組件放大1.5倍，使用戶可以看到拖動效果。
這就夠了嗎？不夠的。
如果用戶想要精準的控制光標，首先要讓用戶完整的看到光標。用戶在拖動光標的時候，手指經常會不自覺的向下移動。這是為了讓自己看清光標，這個時候，我們不應該把這個移動當做是把光標向下移動一行，光標本身不應該跟隨向下，應該只在同一行，并且只響應左右移動。
但是當我向下拖更多距離的時候，光標就應該一直保持在手的上方，以確保用戶可以精確操作。
同樣，我們定義了長按后可以拖動選擇的手勢。在拖動的過程中，允許用戶向下偏移一定的區域，來看清選區的具體邊界位置。
手機端的光標選區，一個我們日常習以為常的光標，里面竟然有那么多小細節在里面，才能讓光標變得好用。
當一個滑動手勢被觸發時，我應該如何判斷這個手勢已經被觸發了呢？這個判斷并非簡單的橫劃豎劃，而是針對的不同的場景，去做特殊的處理的。
案例1：向下滑動手勢
例如說，一個非常簡單的手勢，半屏向下滑動關閉。我們通常來說我們的日常體驗，會是一個對距離的判斷，當手指拖動容器超過一定的距離，然后松手，就可以觸發手勢。
但是僅僅判斷距離是不夠的。因為手勢是對現實世界的映射。很多時候用戶希望滑動很短的距離，把東西“甩”出去。
如果僅僅判斷距離，那就很難“甩”出去。這時候就還需要判定用戶手指在離屏時的速度了。最后能達成一個比較輕松就能觸發手勢的結果。
案例2：左右切換相機
這是騰訊文檔的文檔掃描頁面。上半屏是大面積的取景畫面，底部是文檔類型的選擇。
因為取景頁面可以點擊對焦和測光，因此輕微的滑動不應該導致整個取景頁面或者底部Tab的滑動，應當是當整個頁面檢測到一個比較大的滑動動作之后，才自動移動切換。
但是如果需要離手才能觸發，如果用戶劃動的速度比較慢，整個體驗也會隨之變得過于拖沓。所以這里還加了一條邏輯：當手指滑動速度的加速度急劇減小時，不用松手也可以觸發手勢。這樣的體驗感會覺得流暢很多。
在騰訊文檔中，點擊、滑動、懸浮、長按等手勢操作貫穿用戶的使用過程，動畫效果是所有交互操作的視覺反饋，也許它沒有那么的「高逼格」，但它卻是這臺精密儀器運轉不可缺少的“潤滑劑”，流暢愉悅的動效能夠讓體驗更美好。
但是由于騰訊文檔起初是基于web混合開發，后面又加入了Flutter框架，這就導致多個平臺、框架的動效邏輯混在一起，在這個背景下，設計師們就需要從多方面重新梳理并定義動畫的基礎規則。
自然流暢是騰訊文檔內所有動效運行的基礎原則。
由于騰訊文檔是基于Web、flutter等多框架混合開發的應用，動畫曲線又都是基于各自框架自帶的貝塞爾曲線（cubic-bezier），這就經常導致一些同類型的手勢操作，最后所呈現的動畫效果卻相差很多。并且原生的動畫曲線，在實際使用上并沒有達到很好的效果，只是能夠比沒有動畫要強上一些。因此，確定一套統一、自然并且適合騰訊文檔的動畫曲線，是設計師優先要解決的問題。
為此我們根據動畫使用的場景，定義了四種標準曲線。同時輸出給開發同學，作為標準可調用的曲線。
緩動曲線應用的場景最為廣泛，也是騰訊文檔的默認曲線。相對于傳統web端或者flutter框架內的默認曲線，騰訊文檔的緩動曲線開始時會比較迅速，這樣能給用戶及時反饋、高效運行的感受；在運動快結束的階段，為了避免快速反饋帶來急躁的負面感受，曲線會更加平緩，進而使正在運動的元素吸引用戶的注意力，并讓用戶能夠有一定的思考時間，保證動畫的合理性。
即減速曲線。運動元素在開始階段時位移變化會很大，但是后面會越來越小。緩出曲線前期快速運動，不需要過多讓用戶留意，在結束的時候逐漸減慢速度，讓用戶關注到其新的狀態，用戶就可以提前切入到定位尋找的階段，等動畫停止后就可以立即進行操作。這種類型的曲線通常是用在元素進入界面時使用。
彈性曲線是一種基于阻尼彈性振蕩的原理實現的復雜曲線，阻尼比決定了曲線具體動畫感受，根絕阻尼比的不同，彈性曲線可以分為三種，分別是欠阻尼運動、臨界阻尼運動及過阻尼運動。在騰訊文檔中，通常只會使用到欠阻尼運動及臨界阻尼運動。
彈性曲線卻并不適合在所有的使用場景中，因為這種運動一般情況會需要相對多一些的時間來完成整個運動過程，讓整個過程變得過于拖沓。同時過于活潑的彈性動畫也會過分的吸引用戶注意力，打斷主進程的操作，影響效率。
時長是元素移動所需的時間，在創建自然流暢的動畫中起著重要作用。如果動畫太慢，會使用戶感到卡頓和厭煩；但是如果速度太快，就會給人緊張急迫的感覺。因此動畫的持續時間應該給與用戶充分的反應時間，同時又不用過久等待為標準。
在移動端上，我們設定動畫的持續時間在300-400ms。而在web端上，我們設定動畫的持續時間在200-300ms內。具體的運動時長視具體動畫而定，時長并不一成不變。
曲線是動效的靈魂，有時候你覺得平凡的動畫，或許只需要簡單地撥動那條運動曲線，就可以讓這個動畫瞬間變得充滿靈氣。盡管曲線可以解決大部分動效問題，但在動畫的實際落地中，還是有一些問題，是它無法解決的。這就會涉及到動畫更底層的渲染及邏輯。比如說在web端，前端動畫卡頓與否其實是和動畫本身實現性能有關系的，瀏覽器的屏幕刷新率都可能被代碼拖慢。這也是騰訊文檔在初期并沒有在web端增加太多動畫的原因，過多的動畫效果其實意味著需要更多的性能資源傾斜到動畫上。
在動畫上除了希望提供自然流暢的積極體驗，我們也希望繼續深入，“讓工具褪去冷冰的外殼，走進與智能隔空對話的新世界”。讓體驗更有情感，讓用戶更愉悅。
在待辦事項上，優化前每當用戶點擊完成一項事項時，完成動畫僅僅是機械的從未完成向完成圖標的替換，反饋效果非常“高效”的完成了它的任務，但是這樣就足夠了么？不一定，當一項事項被列為待辦時，就證明這件事對于用戶來說是重要的。在現實中，當重要的事情完成時，我們都是歡欣的，就像心里在放煙花，完成待辦時候的動畫理應如此，讓用戶在完成的那一刻體驗到“煙花”的綻放。
但是總有一些產品，或者是通用性的考慮，或者是一些歷史原因，或者是一些成本考量，走上了非原生開發的路，這樣的產品在未經打磨的情況下直接一把梭搞出來，的確會顯得卡頓，或者難用。
這其中不僅需要工程師一點一滴的性能優化，這也對體驗設計師對細節的把控提出了更高的要求。只有對用戶的行為處處關照，才能無限接近最極致的體驗。
文章來源：站酷 作者：騰訊ISUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
招行估計是考慮到沒有配置現任經理的詳情，又不想浪費標題右側的空間，才作此設計。
其他相關：這部分包含的基金公司、基金檔案、交易規則屬于并列關系，理應出現的分割線卻沒有體現，雖不影響投資者使用但反映出UI組件規范缺乏一定邏輯性。
交易規則：在購買時間點缺少了T日（交易日）收盤時間（15:00前）提示和周歷提示。頁面空間是富余的，完全可以將信息曝光提高投資者的時間感知度，而不是跳轉二級頁面才能了解詳情。
功能模塊十分豐富，cover了關于一只基金的所有直接和間接描述。直接的包含了概況、行情、歷史回測、持倉、經理介紹等內容，間接的包含了問答、討論、資訊、公告等內容。
在產品的廣度與深度方面，天天基金選擇了把廣度拉寬，將很多二級內容拍平，嵌入到一級頁面中，可以說非常適合經驗型投資者，但隨之而來的劣勢也十分明顯 - 頁面過長。
非常直觀，天天的基金頁面長度是招行（或螞蟻）的兩倍不止。
有了上面招行基金詳情頁的大致結構做支撐，這里就不把天天基金的頁面逐個模塊拆解分析了，我們挑一些有意思的來說。
基金概況：跟隨漲跌變化的紅/綠頁頭，這是天天最具標志性的設計之一，個人對此保留意見，這么大面積綠色在過去的一周，實在是令人焦慮。
凈值行情/歷史數據：天天基金在凈值模塊單列出了“單位凈值”和“累計凈值”的走勢圖，還直接標明了不同時段區間內的最高最低值。（“累計凈值”是基金自成立之日起至今的凈值表現，“單位凈值”是基金運作期間扣除分紅和份額拆分影響之后的凈值表現。）
聽說這是區分老基民和新人小白最直接的一道坎，當然作為一個UX設計師，我也就摻這一句，畢竟資格還遠遠夠不上老基民。
非常貼心的一點是，天天在這添加了定投該產品的收益可視化。根據歷史收益率回測和不同定投算法，進行一段時間內的收益率估算。與此類似設計的產品還有漲樂財富通。
特色數據：這也是經驗投資者非常重視的三個指標。波動率反映收益率波動的程度，越小越好；夏普比率指基金每承受一點風險能夠獲得多少超額收益，越高越好；最大回撤指基金凈值從最高到最低的降幅，越小越好。
基金持倉：這又是一個老基民的福利專區。上面分析過招行基金持倉tab的優勢，而天天直接把帶有重倉股盤中行情的持倉列表、資產/行業分布餅圖直接嵌入到一級頁面里，雖然默認只顯示前五只重倉股，但對于了解相關板塊行情也很有幫助。
這一模塊的二級頁面也支持投資者切換時間去觀察基金經理每一季度的調倉風格。其實我個人更傾向于直接把十大重倉股行情全都放進來，默認折疊需要時展開。畢竟調倉不是個高頻動作，我不會需要頻繁地跳進二級頁面去觀察調倉。
基金經理：作為后臺烹飪的cook，這塊的簡介過于“簡潔”了。其實次一級的經理詳情頁里有非常詳實的背景概述和任期間業績回報評估，完全可以精選一些標簽化的內容在一級模塊里完善包裝。
社交化：然后比較有意思的就是“社區”概念。天天基金上每只基金都分別有兩個“bar”，一個問答吧一個貼吧，貼吧包含了問答吧。
這里能體現出天天對于細分場景的重視。貼吧里的話題天南海北，吐槽的、圍觀的、提問的、表態的、發小作文的、曬收益/虧損的，啥都有。
天天的產品經理還是為提問用戶單獨開辟了一片凈土，讓內容的傳播與觸達更加高效。
回到UI層面，天天基金頁面的文本內容在邏輯結構上比較復雜，但視覺上沒有將不同層級的對比度拉開，導致文本信息過于平均，不利于重點信息的快速檢索。
財富號視頻：視頻可以展開和收起。產品還給它配置了觀看人次，側面為該基金公司和旗下基金產品做熱度營銷。
基金概況：除了基金相關的基本信息以外，模塊內展示了晨星評級和關注人氣。既有客觀權威評估體系，也有用戶層的氛圍烘托，通過兩層信任力建設占領用戶心智。
信任力背書：“支付寶金選”是由支付寶理財智庫、中國證券報聯合推出的一套理財產品評估體系，背后有一些專家KOL背書。能夠篩選出部分歷史業績表現優異、基金經理業績突出的產品。
相比于前幾個信任力的營造，這一點的重要性和優先級遠遠勝出。因此在視覺層面也用黑金配色體現出權威性和尊享感。
能夠很明顯地察覺到互金平臺和金融機構在產品包裝上的玩法不同：互金平臺傾向于權威背書和人氣營銷，金融機構傾向于指標構建和數據展示。
行情/數據：這一模塊增加了一個可以手動關閉的tag，是關于“風險回報比率”的描述，一個聽上去類似“夏普比率”的指標。優勢在于螞蟻直接量化轉譯了指標的結果——“好于同類98%基金”，省去了投資者分析指標的過程。
基金經理介紹：關于這部分，雖然在基金經理介紹的二級詳情頁里，天天基金比螞蟻財富要詳實得多，但一級模塊里螞蟻的人物包裝還是更到位?！敖鹋＊劦弥鳌焙蛯W歷/從業背景簡述能直觀地提高產品在用戶側的信任力。
持倉行情：這可以說是該頁面視覺創新的重頭戲。螞蟻財富由于相關個股數據缺失，并不能像招行和天天基金那樣橫向比對每個季度基金經理的調倉動作，對于經驗投資者研判這只基金來說，少了一個觀察維度。
而視覺層面的創新則顯得十分取巧，原本枯燥的個股行情列表被轉譯為可視化的矩陣，矩形的大小和底色能直接映射該股票的持倉占比和實時行情。并且橫向滑動的組件也支持在不跳轉的情況下完整顯示10只重倉股。
對于持有或長期關注這只基金的用戶而言，除非你要分析調倉，否則是不需要頻繁進入二級頁面查看持倉明細的。
以及細致到小數點后兩位的持倉占比，意義也不大，了解大致的配比關系即可。螞蟻這個可視化組件在帶來新穎視覺觀感的同時，也解決了這一問題。
對于產品而言，信息架構往往是最容易有爭議的部分。而金融產品的信息深度和業務復雜度尤為明顯，與之俱來的必然是各平臺在架構策略上百花齊放。
文章來源：站酷 作者：loven
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
運動對數字產品的用戶體驗產生了深遠的影響，但是，如果界面元素沒有表現出基本的運動設計原理，則可用性會受到損害。在用戶界面的上下文中，動作不僅僅是視覺裝飾。它是一種強大的力量，可增強產品參與度并擴展設計交流的范圍。
我們的世界是運動之一。即使在靜止的瞬間，葉子也會發抖，肺部也會擴張。在數字產品設計領域，運動似乎是第二自然，這是對日常工作的擴展，可以毫不費力地加以利用。
從理論上講，使UI元素移動很容易。在預定路徑上定義點，然后軟件對間隙進行補間。實際上，它不是那樣工作的。工具和技術是必不可少的，但它們是從原理中獲取力量的。如果要提高數字產品的可用性，就必須以適用于無數用例的不變行為規則為基礎。
運動設計的起源
運動設計與UX的結合相對較新，但其根源是迪士尼。迪斯尼原理是為了講故事而提煉出身體運動的基本定律。它們使繪制的角色能夠移動和表情，但不能充分滿足現代用戶界面對交互運動的需求。
當代設計師試圖彌合這一差距。更具說明性的示例之一是動畫設計的十項原則，這是迪士尼動畫專家Jorge R. Canedo Estrada的改編作品。
在建立運動中用戶體驗的原則時，可以從以下幾點入手
A. 從UI動畫中區分運動設計
B. 闡明運動如何幫助可用性
C. 解開核心運動行為的內部運作方式
運動不僅僅是裝飾
動作設計不是UI動畫的代名詞。這一點很關鍵，因為UI動畫幾乎總是被當作一種經過深思熟慮的外觀，而與UX沒有任何關系（除了增加魅力）。動作不是裝飾，而是行為，行為只能幫助或阻礙用戶體驗。
兩種互動類型：實時與非實時
運動設計涉及兩個基本交互：實時和非實時。
當用戶在屏幕上操作UI元素時，實時交互可提供即時反饋。換句話說，動作行為會立即響應用戶輸入。
用戶輸入后會發生非實時交互，這意味著用戶必須短暫暫停并觀察所產生的運動行為，然后才能繼續。
實時交互：運動行為會立即響應用戶輸入。
非實時交互：交互后，用戶必須短暫等待并觀察動作行為。
運動支持可用性
運動設計必須以四種不同的方式支持可用性。
A. 期望：當用戶與UI元素交互時，他們期望看到哪些運動行為？運動是否符合預期或引起混亂？
B. 連續性：交互是否在整個用戶體驗中產生一致的運動行為？
C. 敘述：交互及其觸發的動作行為是否與滿足用戶意圖的事件的邏輯進程相關聯？
D. 關系： UI元素的空間，美學和層次屬性如何相互關聯并影響用戶的決策？運動如何影響存在的各種元素關系？
數字產品的12種運動設計原理
1.緩和
緩和模仿現實對象隨時間加速和減速的方式。它適用于所有顯示運動的UI元素。
放松的反面是線性運動。顯示線性運動的UI元素立即從固定速度變為全速，從全速變為固定。這種行為在物理世界中不存在，并且對于用戶而言似乎停滯不前。
UI卡和相應的椅子移動很快，但是由于緩和，它們可以平穩且受控地停下來。
2.偏移和延遲
當多個UI元素同時且快速移動時，用戶傾向于將它們組合在一起，而忽略了每個元素可能具有其自身功能的可能性。
偏移和延遲會在同時移動的UI元素之間創建層次結構，并傳達它們是相關的但又不同的信息。元素的時序，速度和間距不是完全同步，而是交錯排列，從而產生微妙的“一個接一個”的效果。
當用戶在屏幕之間漫游時，偏移和延遲表明存在多個交互選項。
這個加密貨幣應用程序一次引入了多個UI元素。它們的到來有些交錯，以通知用戶這些元素是相關的，但又是截然不同的。
3.父子元素關聯
父子元素關聯將一個UI元素的屬性鏈接到其他UI元素的屬性。當父元素中的屬性更改時，子元素的鏈接屬性也會更改。所有元素屬性可以相互鏈接。
例如，父元素的位置可以綁定到子元素的比例。當父元素移動時，子元素的大小會增加或減小。
父子元素關聯會在UI元素之間創建關系，建立層次結構，并允許多個元素立即與用戶進行通信。因此，關聯在實時交互中使用時影響最大。
藍色滑塊的位置控制背景遮罩的不透明度，燈泡周圍的發光效果的散布以及光強度標度的數值。
4.轉型
當一個UI元素變成另一個UI元素時，將發生轉換。例如，下載按鈕將轉換為進度條，該進度條將轉換為完成圖標。
從UX的角度來看，轉換是一種向用戶顯示其相對于目標的狀態（系統狀態的可見性）的有效方法。當UI元素之間的進度鏈接到帶有開始和結束的過程（例如，下載文件）時，這特別有用。
轉換表示下載的開始，中間和完成。
5.數據變化
在數字界面中，數據表示（數字，基于文本或圖形的表示）豐富，出現在從銀行應用程序到個人日歷到電子商務站點的產品中。由于這些表示形式與實際存在的數據集相關聯，因此它們可能會發生變化。
值的變化傳達了數據表示的動態性質，并告知用戶數據是交互式的，并且可能會受到一定程度的影響。當沒有動靜地引入值時，用戶參與數據的意愿降低。
動態引入值以向用戶顯示他們有能力影響數據。
6.遮罩
遮罩是UI元素各部分的戰略性揭示和隱藏。通過更改元素外圍的形狀和比例，遮罩會發出信號，表示實用性發生了變化，同時允許元素本身保持可識別性。因此，理想的選擇是諸如照片和插圖之類的詳細視覺效果。
從可用性的角度來看，設計人員可以實施屏蔽以向用戶顯示他們正在通過一系列交互進行中。
遮罩用于從圖像捕獲到上傳到在線店面中的過渡。
7.疊加
在2D空間中，沒有深度，UI元素只能沿X軸或Y軸移動。疊加會在UI的2D空間中產生前景色/背景色的錯覺。通過模擬深度，覆蓋可以根據用戶需要隱藏和顯示元素。
使用重疊時，信息層次結構是一個重要的考慮因素。例如，用戶在做筆記應用程序中應該首先看到的是他們的筆記列表。然后，可以使用滑動來公開每個消息的輔助選項，例如刪除或存檔。
重疊式運動可讓用戶快速歸檔或刪除此記事應用中的條目。
8.克隆
克隆是一種運動行為，其中一個UI元素拆分為其他元素。這是突出顯示重要信息或交互選項的聰明方法。
當UI元素在界面中實現時，它們需要一個清晰的起點來鏈接到屏幕上已經存在的元素。如果元素只是無處不在而突然爆發或消失，則用戶將缺乏進行自信交互所需要的上下文。
用戶可以放心地單擊彩色圓圈，因為它們顯然源自“添加注釋”圖標。
9.模糊
想象磨砂玻璃門。它需要交互才能打開，但是可以（在某種程度上）辨別另一端正在等待什么。
它為用戶提供了一個界面，該界面要求進行交互，同時顯示要跟隨的屏幕提示。導航菜單，密碼屏幕和文件夾/文件窗口是常見的示例。
模糊處理為用戶提供了重要的互動方式，同時讓他們保持產品敘事的方向。
10.視差
當兩個（或多個）UI元素同時移動但速度不同時，將顯示視差。在此，目的是建立層次結構。
A. 交互式元素移動速度更快，并顯示在前景中。
B. 非交互式元素的移動速度變慢并退回到背景。
視差引導用戶使用交互式UI元素，同時允許非交互式元素保留在屏幕上并保持設計統一性。
使用視差時，最重要的交互式元素移動最快，而非交互式元素移動較慢并退回到背景。
11.維度
維度使UI元素似乎具有多個交互方面，就像物理世界中的對象一樣。通過使元素看起來像是可折疊的，可翻轉的，浮動的或具有逼真的深度屬性而實現的。
作為一種敘事設備，維度意味著UI元素的不同側面被鏈接在一起，并實現了無縫的屏幕過渡。
維度意味著2D UI元素具有多個交互方面，就像物理世界中的對象一樣。
12.變焦
滾動和縮放允許用戶在空間上“遍歷” UI元素或增加其比例以顯示更多細節。
A. 滾動：滾動視角發生在用戶的角度更接近（或遠離）UI元素時。想象一下，一個拿著照相機的人走到一朵花前要近距離拍攝。
B. 縮放：使用縮放時，用戶的視點和UI元素保持固定，但是該元素在用戶屏幕內的大小增加（或減小）?，F在，假設該人保持姿勢并使用相機的變焦功能使花朵顯得更大。
滾動：用戶的視點似乎越來越接近背景圖像。
縮放：用戶的視角不會更接近圖像。而是圖像的比例會增加。
運動就是溝通
互動體驗的需求運動在其所有的輕快和微妙的形式。當堅持運動設計原則時，即使最基本的UI元素也成為人類交流的復雜媒介。當這些原理被忽略時，運動就體現了自然界所沒有的特征。
運動設計與數字產品UX之間的關系正在迅速成熟。原則上的運動方法可以防止過度依賴趨勢，工具和技術的短暫使用。更好的是，它跨越了2D屏幕上元素的抽象運動與3D世界中運動感知之間的鴻溝。
文章來源：站酷 作者：DuiaDesign
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
表單已經存在了很長一段時間，自誕生以來極大地簡化了起草申訴和各種法律訴狀的任務。隨著信息與處理技術的進步，收集數據的手段也在不斷發展，而印刷表單已存在多年，我們可以從其設計中學到一些技巧。
用戶可以在文本欄內輸入信息，它們通常以表單和對話框的形式出現。文本字段組件的設計應為交互提供清晰的功能支持，使字段在布局中易識別、易填充和可訪問。
以下是組成文本欄的關鍵要素：
容器：可交互的輸入區域；
輸入框：在文本欄中輸入文字；
提示：告訴用戶給出的表單字段是什么信息；
占位符：是所需信息的描述或示例，用戶輸入正確信息內容后被替換；
幫助程序或驗證文本（可選）：單獨出現或以驗證消息的形式出現；
頭部圖標（可選）：描述文本字段的輸入類型；
尾部圖標（可選）：輸入文本的附加控件，例如清除，隱藏/顯示等。
它們大多數都是相對基礎的文本字段類型，被修改成了處理特定類型的信息，例如信用卡號。以下是我創建的UI中最常用的一些輸入類型示例：
為收集的數據提供幫助規避錯誤，讓用戶可以正確的輸入信息，從而使過程簡單高效。
文本欄的狀態可以通過視覺提示來實現，輸入信息時的狀態有以下幾種：未激活、懸停、禁用、激活，驗證、錯誤。所有狀態應清楚地被區分開，并在整個表單和應用中保持一致，簡潔明了，不要誤導用戶。
通常標簽定位有三種：頂部、左側和右側對齊。最適合的樣式將取決于表單的大小、主要目標、組件庫和要為其設計的平臺，但它們都有各自優點和缺點。
谷歌的“材料設計”指南中，普遍使用的下劃線輸入并不是最佳選擇。有趣的是，在一項研究結果中發現用戶更喜歡帶圓角的輸入框。
當用戶不熟悉所請求的數據時，這是一個不錯的選擇。
優點：易于標簽伸縮，充分利用垂直空間；
缺點：標簽與對應的文本欄，距離過元，增加用戶閱讀的時間成本。
與左對齊標簽相比，完成時間快了將近兩倍。
優點：標簽和輸入欄靠近，限制了眼睛移動的次數，從而縮短了完成時間；
缺點：難以快速瀏覽表單并理解所需的所有信息。
在移動設備上效果很好，因為它們不需要太多的水平空間。
優點：用戶可以快讀瀏覽輸入標簽和輸入文本；
缺點：需要更多垂直空間。
表單中的所有文本欄，若設置相同長度確實會顯得非常美觀，但實際在操作上，卻很難完成。
占位符文本消失會給用戶制造緊張感，而去掉標簽，用戶則無法在提交表單前檢查他們提供的信息。如果在設計時需要極簡的表單，可以使用“材料設計”的浮動標簽法。表單內的占位符文本還會使用戶感到困惑，最好在字段外使用提示文本。
使用自動完成功能，填寫時會幫助填寫及查詢。一般在輸入時可以看到，對查詢內容按Enter或右箭頭鍵就完成了填寫；
使用Auto-Suggest搜索關關鍵字和短語時，下拉列表會顯示多個建議；
預填充字段會經常使用智能默認值，比如通過IP或地理位置，就能檢測獲取到用戶所在的國家和城市，或是根據常見的場景，自己定義默認情況下的內容。需要注意的是，電子商務是一個例外，請勿預先設置與購買相關的任何偏好，比如尺寸或顏色；
還有一種應用情境，自動完成功能可以幫助用戶做出正確決定或避免錯誤，比如用戶轉帳時看到賬戶余額等，請一定要提供該信息。
指的是用戶輸入信息后，可以實時檢查輸入內容的有效性，而不是等用戶提交表單時一次性檢查。正確應用，降低信息出錯率：
在輸入內容的文字欄下方顯示驗證消息；
不要突然蹦出嚴重警告，填寫的消息錯誤時，應告訴用戶如何解決，而非責怪。
消除視覺及認知負擔，使界面看起來更加簡潔。
不要將全名和日期之類的文本分成多個字段；
不要多次詢問相同的信息。
逐步公開，提供必要提示即可，幫助用戶管理復雜信息。
根據用戶回答，條件邏輯允許在表單中自動顯示、隱藏字段和跳過頁面。這種方法不僅可以減少字段數，而且可以使填寫過程更像對話，也更具個性化。
簡化表單的最有效方法，其中之一則是為相關字段進行分組。格式塔心理學里有許多種分組原則，使項目有關聯性：接近性、相似性，連續性、閉合性和連通性。在界面中，如果將數十個非結構化字段分組為幾個可管理的集合，將顯著提高表單的可用性。
一欄布局能為用戶創建一個清晰的完成路徑；使用多列表單布局，會導致用戶跳過實際需要輸入的字段，將數據填寫到其他位置，這會迫使用戶停止甚至放棄填寫。
有時，即使刪除了所有不必要的內容后，某些表單還是很龐大。將大型任務分解為一系列的小任務反倒容易得多，也能激勵用戶堅持到最后。
顯示步驟，直觀地告訴用戶實際進度，這能提高用戶滿意度并激勵他們繼續前進；
不要細化表單，太多的步驟非常啰嗦，只會惹惱用戶；
對關鍵信息進行總結以減輕用戶焦慮，在最后設置復查步驟，幫助用戶檢查。
如果表單足夠大，可以分成多個步驟，那么就應該有一個單獨的、重點明確的界面來專門處理它。在導航中用其他鏈接會破壞正常流程，導致邏輯混亂，而且在小型彈出窗口中也不建議使用多步驟表單。
Android或iOS提供了幾種不同的鍵盤類型，每種類型的鍵盤都旨在方便不同類型的輸入。為了簡化數據輸入，在編輯文本字段時顯示的鍵盤應適合該字段中的內容類型，同時也要注意鍵盤出現的位置。將文本字段放在上方區域，避免滾動展示。
允許密碼取消隱藏來代替多次密碼輸入，這對于生成密碼的應用程序也更有效；
隨時顯示密碼要求，并顯示用戶滿足了哪些條件，方便查看進度；
使用強度表鼓勵用戶創建更強更安全的密碼。
文章來源：站酷 作者：UX辭典
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
排版將文字從單純的文本轉換為巧妙的交流方式。字體和類型設計可以說出這么多–從突出的粗體字體到精致的襯線字體。從傳統的永恒變化到全新的技術。
字體在現代文化和商業中的突出地位受到包豪斯藝術運動的影響。赫伯特·拜耳（Herbert Bayer）是包豪斯（Bauhaus）的學生，并通過采用還原性極簡主義的原則在版式設計上留下了杰出的印記。
數字圖形媒體和設計師本身的爆炸式增長催生了各種各樣令人驚奇的想法和進化。有些想法只是一時的流行，而另一些則是可以保留的趨勢。我們重點介紹了2021年最流行的字體趨勢。
1. 襯線字體
襯線字體當然是永恒的–因此，當以新的現代方式使用它們時，它們會重新出現在趨勢圖上。通過將細長和粗體元素并置，我們看到古典襯線字體作為一種持續的趨勢重新回到設計中。尤其是受到美容和DTC品牌的推崇，該款式具有柔和的美感，可以在許多行業中使用。
我們的示例顯示了帶有泥土色的苗條襯線字體的優雅搭配，從而柔和了整體氛圍。
Neubel本身是一家字體鑄造廠，使用柔和而優雅的顏色托盤并將文本覆蓋在對比鮮明的藝術品上，以大膽地表達自己的觀點。
設計公司Autumn展示了視覺層次結構的強大功能以及自信的版式和簡單的形狀。
2.輪廓字體
輪廓字體在2020年出現了很多的創意，我們希望在2021年會看到更多。透明字體在與粗體，填充字體并排顯示時，更加強大。
我們的示例表明，輪廓傾向于在網頁設計中占據中心位置。Heetch在相同顏色的純色襯線字體上方使用藍紫色輪廓字體，以表現出對比效果。
Aldo在“走進愛情”廣告系列中使用了當年Pantone顏色的陰影。廣告系列以自信和表達為中心，明亮的黃色將那種感覺放在了中心。輪廓字體是使粗體黃色發光的絕佳選擇。日本設計師Ukyo Masuda憑借中性灰色調色板為該群體錦上添花，盡管如此，它還是通過創意的輪廓字體而栩栩如生。
3.進化的野獸派
如果您希望營造視覺張力并擺脫標準網頁設計的束縛，那么野獸派字體與現代野獸派元素相結合就可以完成工作。野獸派字體的清晰，原始，略顯復古的設計經過了現代化改造，成為我們所謂的“進化的野獸派”。在經過改進的版本中，苛刻的元素被軟化并與各種調色板和形狀結合在一起。
我們的示例顯示了進化的野獸派的不同變體和組合。內森·泰勒（Nathan Taylor）使用了大量實驗元素和互動性。整個設計是野獸派的，不僅僅是字體。這是對更加野蠻的野蠻主義的一個很好的展示，但是現代的元素使這種感覺更加精致和進化。
4.文本與其他元素的分層
通過有意地分層排列文本和圖像，可以使得整個頁面更有空間感。這種組合使焦點很清楚。它允許用戶在滾動之前暫停一秒鐘并全部接收信息。
這些示例是最有趣的。登錄Mammut貝加爾湖頁面后，您即會感受到電影般的震撼力。圖像的運動和貝加爾湖文字與人類交織在一起，使您感覺自己像是體驗的一部分。
德國品牌代理公司MJND的層次結構要簡單得多，但是層次感仍然很突出。對于那些使用文本和圖像的人來說，這種設計更容易上手。
Owlsome Studio使字體更加突出，并在其后面分層顯示較小的正方形圖像。這是其他兩個示例的替代方案，但是由于它打破了網絡的現狀，因此可能以自己的方式產生影響。
5.文字圖像融合
比文本分層更進一步的是文本與圖像相互融合，而兩者是密不可分的。這給圖像帶來真正的優質感，并引起您的注意。它們不再是文本和圖像層的組合，而是變成一個整體。
我們喜歡這種格式允許的創意表達，并提供無盡的組合。Satellite414使用透明的輪廓文字，這些文字實際上成為照片的一部分。它是動態，現代和新鮮的。
Kieran Baybutt中文字完全取代了圖像。這使得文本部分與典型鏡頭一樣重要。Craig Reynolds中圖像和文本滑入和滑出組合，將它們合并在一起，從而使用戶注意到它們。
6.新迷幻效果
全新迷幻氛圍是對時髦色彩的復古回歸，融合了現代感。它借鑒了過去的迷幻設計。
從1960年代到1970年代的劇烈社會動蕩帶來了新藝術和設計的變革。迷幻的影響在那個時代就很明顯了，今天我們看到了一種新的潮流。韋斯·威爾遜（Wes Wilson）是那個時代的重要設計師，他創造了一種新字體，成為該地區的象征-著名的迷幻設計。
Victor Moscoso為他的印刷沉重設計帶來了鮮艷的色彩，這些色彩影響了示例中所見的現代霓虹色調色板。
宙斯·瓊斯（Zeus Jones）是我們所看到的趨勢的完美典范–光譜中各種鮮艷的色彩，以夢幻般的方式與斜體字體結合在一起，并為流動的漸變帶來了清晰的通信效果。
查理·勒·麥格南（Charlie Le Maignan）為我們提供了一種有趣的復古字體，可在頁面上擴展和折疊。此外，在Showreel部分，我們看到了一段令人迷惑的文字彩虹，讓人聯想起1970年代的專輯和那些酸酸的歌曲。
圣馬丁代理公司在令人眼花scene亂的場景中為我們帶來歡樂和情感的熔巖燈。字體與背景配合得很好–簡單性與無窮復雜的色彩并置。
7.粗體現代襯線字體
到2021年，這并不是一個全新的概念，現代的襯線字體處理技術隨著新外觀的發展而不斷變化。
一個新的變化是，我們看到粗體襯線字體完全占據了屏幕。在許多情況下，文本是整體設計，而粗體的現代襯線字體則可解決問題。
樣條線使用黑底紅字表示強烈的陳述，并使用完全大寫的文字來增強效果。對于試圖喚起技能，信心和權威的公司，這種組合效果很好。
Orto保持簡單，但將宏偉提升到另一個層次。超大，明亮的字體只會迫使您注意并進一步深入。
8.賽博朋克風格
也許最分裂的想法之一是計算機朋克和汽具美學。計算機，視頻游戲和1980年代流行美學的模糊組合以某種怪異，令人著迷的組合在一起。
80年代是數字游戲和新的計算機浪潮的開始。賽博朋克和汽具設計是80年代復古設計的變體。隨著計算機和AI的發展，我們可能會看到印刷術和美學的新融合。
Next Big Thing Academy顯然具有對未來的關注。雖然這里的字體選擇不是什么極端的選擇，但總體上符合復古主義的未來美學。
浮標也不使用任何大膽創新的字體，但是圖像與字體的整體配對符合這種趨勢。
文章來源：站酷 作者：DuiaDesign
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
排版將文字從單純的文本轉換為巧妙的交流方式。字體和類型設計可以說出這么多–從突出的粗體字體到精致的襯線字體。從傳統的永恒變化到全新的技術。
字體在現代文化和商業中的突出地位受到包豪斯藝術運動的影響。赫伯特·拜耳（Herbert Bayer）是包豪斯（Bauhaus）的學生，并通過采用還原性極簡主義的原則在版式設計上留下了杰出的印記。
數字圖形媒體和設計師本身的爆炸式增長催生了各種各樣令人驚奇的想法和進化。有些想法只是一時的流行，而另一些則是可以保留的趨勢。我們重點介紹了2021年最流行的字體趨勢。
1. 襯線字體
襯線字體當然是永恒的–因此，當以新的現代方式使用它們時，它們會重新出現在趨勢圖上。通過將細長和粗體元素并置，我們看到古典襯線字體作為一種持續的趨勢重新回到設計中。尤其是受到美容和DTC品牌的推崇，該款式具有柔和的美感，可以在許多行業中使用。
我們的示例顯示了帶有泥土色的苗條襯線字體的優雅搭配，從而柔和了整體氛圍。
Neubel本身是一家字體鑄造廠，使用柔和而優雅的顏色托盤并將文本覆蓋在對比鮮明的藝術品上，以大膽地表達自己的觀點。
設計公司Autumn展示了視覺層次結構的強大功能以及自信的版式和簡單的形狀。
2.輪廓字體
輪廓字體在2020年出現了很多的創意，我們希望在2021年會看到更多。透明字體在與粗體，填充字體并排顯示時，更加強大。
我們的示例表明，輪廓傾向于在網頁設計中占據中心位置。Heetch在相同顏色的純色襯線字體上方使用藍紫色輪廓字體，以表現出對比效果。
Aldo在“走進愛情”廣告系列中使用了當年Pantone顏色的陰影。廣告系列以自信和表達為中心，明亮的黃色將那種感覺放在了中心。輪廓字體是使粗體黃色發光的絕佳選擇。日本設計師Ukyo Masuda憑借中性灰色調色板為該群體錦上添花，盡管如此，它還是通過創意的輪廓字體而栩栩如生。
3.進化的野獸派
如果您希望營造視覺張力并擺脫標準網頁設計的束縛，那么野獸派字體與現代野獸派元素相結合就可以完成工作。野獸派字體的清晰，原始，略顯復古的設計經過了現代化改造，成為我們所謂的“進化的野獸派”。在經過改進的版本中，苛刻的元素被軟化并與各種調色板和形狀結合在一起。
我們的示例顯示了進化的野獸派的不同變體和組合。內森·泰勒（Nathan Taylor）使用了大量實驗元素和互動性。整個設計是野獸派的，不僅僅是字體。這是對更加野蠻的野蠻主義的一個很好的展示，但是現代的元素使這種感覺更加精致和進化。
4.文本與其他元素的分層
通過有意地分層排列文本和圖像，可以使得整個頁面更有空間感。這種組合使焦點很清楚。它允許用戶在滾動之前暫停一秒鐘并全部接收信息。
這些示例是最有趣的。登錄Mammut貝加爾湖頁面后，您即會感受到電影般的震撼力。圖像的運動和貝加爾湖文字與人類交織在一起，使您感覺自己像是體驗的一部分。
德國品牌代理公司MJND的層次結構要簡單得多，但是層次感仍然很突出。對于那些使用文本和圖像的人來說，這種設計更容易上手。
Owlsome Studio使字體更加突出，并在其后面分層顯示較小的正方形圖像。這是其他兩個示例的替代方案，但是由于它打破了網絡的現狀，因此可能以自己的方式產生影響。
5.文字圖像融合
比文本分層更進一步的是文本與圖像相互融合，而兩者是密不可分的。這給圖像帶來真正的優質感，并引起您的注意。它們不再是文本和圖像層的組合，而是變成一個整體。
我們喜歡這種格式允許的創意表達，并提供無盡的組合。Satellite414使用透明的輪廓文字，這些文字實際上成為照片的一部分。它是動態，現代和新鮮的。
Kieran Baybutt中文字完全取代了圖像。這使得文本部分與典型鏡頭一樣重要。Craig Reynolds中圖像和文本滑入和滑出組合，將它們合并在一起，從而使用戶注意到它們。
6.新迷幻效果
全新迷幻氛圍是對時髦色彩的復古回歸，融合了現代感。它借鑒了過去的迷幻設計。
從1960年代到1970年代的劇烈社會動蕩帶來了新藝術和設計的變革。迷幻的影響在那個時代就很明顯了，今天我們看到了一種新的潮流。韋斯·威爾遜（Wes Wilson）是那個時代的重要設計師，他創造了一種新字體，成為該地區的象征-著名的迷幻設計。
Victor Moscoso為他的印刷沉重設計帶來了鮮艷的色彩，這些色彩影響了示例中所見的現代霓虹色調色板。
宙斯·瓊斯（Zeus Jones）是我們所看到的趨勢的完美典范–光譜中各種鮮艷的色彩，以夢幻般的方式與斜體字體結合在一起，并為流動的漸變帶來了清晰的通信效果。
查理·勒·麥格南（Charlie Le Maignan）為我們提供了一種有趣的復古字體，可在頁面上擴展和折疊。此外，在Showreel部分，我們看到了一段令人迷惑的文字彩虹，讓人聯想起1970年代的專輯和那些酸酸的歌曲。
圣馬丁代理公司在令人眼花scene亂的場景中為我們帶來歡樂和情感的熔巖燈。字體與背景配合得很好–簡單性與無窮復雜的色彩并置。
7.粗體現代襯線字體
到2021年，這并不是一個全新的概念，現代的襯線字體處理技術隨著新外觀的發展而不斷變化。
一個新的變化是，我們看到粗體襯線字體完全占據了屏幕。在許多情況下，文本是整體設計，而粗體的現代襯線字體則可解決問題。
樣條線使用黑底紅字表示強烈的陳述，并使用完全大寫的文字來增強效果。對于試圖喚起技能，信心和權威的公司，這種組合效果很好。
Orto保持簡單，但將宏偉提升到另一個層次。超大，明亮的字體只會迫使您注意并進一步深入。
8.賽博朋克風格
也許最分裂的想法之一是計算機朋克和汽具美學。計算機，視頻游戲和1980年代流行美學的模糊組合以某種怪異，令人著迷的組合在一起。
80年代是數字游戲和新的計算機浪潮的開始。賽博朋克和汽具設計是80年代復古設計的變體。隨著計算機和AI的發展，我們可能會看到印刷術和美學的新融合。
Next Big Thing Academy顯然具有對未來的關注。雖然這里的字體選擇不是什么極端的選擇，但總體上符合復古主義的未來美學。
浮標也不使用任何大膽創新的字體，但是圖像與字體的整體配對符合這種趨勢。
文章來源：站酷 作者：Ballen成名
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在百度百科的定義中，阻力是物體在流體中相對運動所產生與運動方向相反的力。自然界中存在許多類型的阻力，比如空氣阻力、水流阻力，各種各樣的生物因此進化出相應的身體特征去減少阻力。如下圖所示，擁有流線型外形的海豚掌握獨特的減少湍流摩擦阻力的游泳方法，這使其游速在某些條件下可以達到每小時 70-100km，遠超現代潛艇的航速。
人類為了擺脫自然界設計的阻力，做了許許多多的努力。采用纖維模仿鯊魚皮膚結構的鯊魚皮泳衣能夠降低 30% 的水阻，提高人類游泳速度。汽車的流線型設計減小渦旋作用或避免渦旋的形成大大地減低了空氣對其的阻力。
在人類社會，人為設計的阻力也無時無刻不在。為了公共安全設立的安檢、為了交通安全而嚴格控制不同區域的最高車速、為了社會安定而設立的法律，諸如此類的阻力都無時無刻規范著人類的行為。
類似地，對于互聯網產品，用戶在使用時也會被刻意地或非刻意地設計出的阻力所影響，這些阻力會阻礙用戶完成目標。
在認知心理學中，我們接受外部世界的刺激之后做出反應的過程中，涉及到我們如何感知、學習、推理、記憶，以及如何把意圖轉化為行為。人類數十萬年的進化過程中，對于感知、學習、推理、記憶的神經結構已經初步進化形成，大多數的人保持著相似的認知能力和認知缺陷。用戶在使用產品時感受到的阻力往往來自于設計師未能充分了解用戶的認知能力，從而設計出容易導致用戶犯下認知性錯誤的產品。以下常見的人類的認知特點影響了我們感知和獲取信息的過程。
對于一件新事物，我們感知它的方式通常受到三個因素影響：過往的經驗、周圍的環境、當下的目標。我們通過過往的經驗將已知概念套用在新事物上，幫助我們理解。一旦產品界面中與用戶的經驗預期相悖，就會產生阻力。
面對一個我們從未使用過的機器設備時，我們很少愿意耐心閱讀完它的說明書再去使用它，而是自信滿滿的希望通過簡單的擺弄和熟悉就能夠了解它的使用方法?！饵c石成金：訪客至上的Web和移動可用性設計秘笈》一書中的第一條可用性原則就是“Don't let me think（不要讓我思考）”，作者認為設計者在設計一個界面時，最好能夠做到讓界面清晰易懂、一目了然，讓用戶能夠不必過多的思考就能夠使用它，幫助用戶跨越思考過程，讓用戶能夠輕松做出復雜的決策，減少認知壓力。
我們可能都經歷過心流狀態，當我們在極度專注地做某件事時完全沉浸其中并且非常高效，但如果意外地被打擾，會讓我們很煩躁。
有關任務執行的研究文獻中就曾經提到過：中斷會導致錯誤，而且人們容易遺忘之前的位置或狀態。當一個任務打斷了另外一個，重新啟動需要的時間會讓每個任務都變慢。
打擾我們的事情可能是工作時突然的一聲噪聲，也可能是在使用軟件時冗余的彈窗、過多的頁面跳轉、無意的誤操作等等。界面中過多的干擾會打斷用戶的心流，造成用戶的使用阻力。
認知負荷理論（Cognitive Load Theory）是在 20 世紀 80 年代由澳大利亞教育學家 J.Sweller 提出，由于對人類學習認知和教學指導提供了新的理論框架，該理論在教育領域成為重要的心理學指導理論，在交互設計領域也存在著借鑒意義，理論的主要內容如下：
認知負荷是指外部信息進入個體短期記憶后中后所需要的注意力資源和記憶容量，被分類為內在認知負荷、外部認知負荷以及相關認知負荷（如下圖）。當任務需要消耗的注意力和記憶容量超出學習者的極限時，就會導致認知超負荷，超出的部分將不會被學習者有效獲取。
不同的呈現形式形成的外部認知負荷是不同的，一般來說，文字>圖式>視聽。因此，為了避免認知超負荷給用戶帶來的使用阻力，我們應該設法簡化信息來降低內在認知負荷，通過更合理的信息可視化形式和信息架構構建降低外部認知負荷。
如下圖，基于上述的用戶的認知能力分析，合理的降低阻力，能夠讓用戶在使用產品時效率更高，成本更低。在提高交互效率方面我們可以通過減少操作步驟、提高傳達效率、減少頁面跳轉來達到目的。在降低交互成本方面，我們可以通過降低操作難度、減少用戶思考來實現,同時通過降低認知負荷減少用戶的認知負擔。阻力并不是越小越好，在某些場景下，我們需要增加阻力和提高用戶的使用成本，進而提升用戶體驗或達成產品目標。通過提高防錯能力、提供安全感和營造儀式感來優化體驗。通過篩選用戶和內容把控社區生態。通過功能引導和歧視性策略來迎合商業目的。
類似于一個倒金字塔結構，交互流程中的每一個步驟都伴隨著流失。通過以下減少操作步驟的方法，可以降低用戶行為路徑中的阻力。
不同的控件有著不同的應用場景，控件的選用不當會形成多余的操作步驟。我們需要深入了解每個控件的屬性和應用場景才能夠做到靈活運用。
舉一個例子，在微信的朋友圈發布頁中編輯內容后點擊取消后，彈出警告框顯示“不保留”和“保留”按鈕，但是考慮到用戶可能會誤操作點擊取消按鈕的場景，此處應增加一個按鈕讓用戶回到編輯狀態，否則不管用戶選擇哪個選項都會退出發布頁重新進入，從而使用戶多了一步操作。下廚房的發布頁就考慮到了這個問題，使用了默認有返回操作的上拉菜單控件作為提示方式，即使在誤操作場景下也不會增加操作步驟。
控件方面這里就不展開講了，大家可以通過閱讀 iOS 人機交互指南和安卓 Material Design 規范來深入學習。
任務都存在其復雜性，當我們無法簡化它時，可以考慮將復雜性移交給系統，使其代替用戶操作。
比如我們可以利用用戶已經在產品中填寫過的信息來幫助用戶填寫相關信息。例如通過身份證號碼自動識別出用戶的生日和性別，自動為用戶填充。
預判用戶行為分為兩種方式，第一種是在用戶操作前，預判可能發生的用戶行為，以建議的形式為用戶提供選擇，縮短用戶行為路徑。
比如拍攝照片后，打開微信聊天頁面，微信會以氣泡的形式詢問用戶是否要發送圖片，如下圖。
第二種是由于用戶的認知錯誤進行了非目標操作時，系統提前識別引導用戶進入正確的流程并完成任務。
比如支付寶聊天界面中，很多用戶誤以為可以直接通過輸入框輸入金額數后點擊發送就可以轉賬，但實際上只會發出一條消息。支付寶貼心地在用戶輸入數字后外顯轉賬功能，從而避免了用戶的錯誤操作，如下圖。
不合理的信息架構和流程設計會增加用戶的操作步驟。比如最新 iOS13 的信息應用，將 iOS12 原有的使用分段控件整合信息的方式改為了 iOS13 的列表形式，導致從一級頁面（A）進入到二級頁面（B或C）后，如果想切換信息列表還需要返回到一級頁面再次選擇，增加了一步操作。iOS13 的這種改動可能考慮到用戶切換信息列表的頻率沒有那么高，希望用戶專注于當前的信息列表，但是我這樣的用戶經常查看過濾信息列表，擔心是否有重要信息被屏蔽，多出的一步操作還是給我帶來不小的使用阻力。
淘寶訂單模塊的做法就比較合理，從一級頁面（A）進入二級的任何頁面（B 或 C）后，二級頁面可以在標簽欄互相切換，而不需要退回一級頁面再次選擇二級頁面，從而節省了一步操作。
快捷方式有跳轉類和功能類兩種，跳轉類的快捷方式可以幫助用戶快速觸達或回退到某個頁面。
比如我們可以通過長按 iOS 應用圖標調出功能的快捷方式使用，減少中間的操作步驟。淘寶可以在大多數頁面通過快捷方式快速回退到首頁。
功能類的快捷方式提供給用戶更快捷的方式完成復雜或較多的任務，比如嗶哩嗶哩的一鍵三連。被蘋果收購的應用快捷指令可以自定義系統以及第三方應用的復雜任務，并且在下次一鍵即可完成。
米哈里·契克森米哈賴在《心流：最佳體驗心理學》中將“最佳體驗”定義為：當我們在做某些事情時，那種全神貫注、投入忘我的狀態。這種狀態下，我們身心合一，甚至感覺不到時間的存在，技術水平也會達到頂峰，在這件事情完成之后我們會有一種充滿能量和非常滿足的感受。然而，周圍突然的干擾或環境刺激都有可能打破心流體驗。
用戶在使用軟件產品時很少有心流體驗，因為過多的頁面的跳轉和刷新會中斷用戶心流，冗余的頁面層級會增加用戶的理解成本和操作成本。針對這個問題，我們可以提高單個頁面的動態容量，在不跳轉頁面的前提下使用戶完成任務，為用戶創造在視覺感受層面上的心流體驗，下面是一些方法舉例。
覆蓋層是出現并覆蓋在原頁面上層的一個彈出窗口，可以由用戶觸發或系統自動觸發，在網頁端和移動端都有著廣泛應用。我們通?？梢詫⑵溆糜谳斎雰热荨⒏郊有畔?、子頁面信息外顯、顯示操作指令等。
模態覆蓋層一般由點擊觸發，通常出現后會伴隨亮盒效果，使用戶聚焦于覆蓋層上的任務，用戶操作完畢后才可以進行覆蓋層外的其他操作。模態覆蓋層的大小不固定，它可以是一個小型的顯示警示信息的彈窗，也可能是一個篇幅很大的信息介紹，在保持上下文的情況下展示更多信息，避免了用戶迷失在各種頁面跳轉中。
如下圖，behance的首頁點擊一個作品后，會在當前頁面上生成一個模態覆蓋層供用戶瀏覽詳細的作品內容，而不是跳轉到新的頁面。在設計師瀏覽單個作品的場景中，一般只需要 1-3 分鐘的瀏覽后就會關閉頁面，模態覆蓋層的方式使得打開和關閉的操作更加流暢，提高了設計師的瀏覽效率。
模態覆蓋層在移動端同樣也有著應用。如果前后兩個頁面存在較強的關聯性，為了避免用戶產生明顯的割裂感，一般適合采用模態覆蓋層的方式展示新頁面。如下圖，知乎使用模態覆蓋層展示評論。
詳情覆蓋層在網頁端通過光標移入觸發，觸發后不需要刷新頁面既可顯示附加信息。如下圖Boss直聘中光標移入某條招聘介紹時，會觸發詳情覆蓋層展示出次級頁面的詳細崗位信息，避免了跳轉新頁面。
嵌入層類似于抽屜，需要的時候將其展開，不需要的時候將其收起。與模態層不同之處在于，展開后也不會遮蓋頁面的其他信息和影響其他操作。嵌入層的主要的應用場景有：拓展內容、展示下級內容。
如下圖，微博的發現頁面的功能圖標可以通過嵌入層進行拓展從而展示更多功能。
Xmind的嵌入層展示了格式的下級內容，可以在保持能夠繼續編輯腦圖的前提下進行格式設置。
對于內容豐富的頁面，希望用戶能夠通過盡可能少的跳轉就能夠觸達。我們可以將列表導航、宮格導航修改為標簽導航或分頁的形式。
把某些操作難度大耗費成本高的操作使用新技術解決，比如人臉識別和 OCR 技術可以降低信息輸入成本，不但幫助用戶使用較少的時間完成任務，也降低了用戶的犯錯幾率和使用阻力。
手勢的優化也是降低操作難度的可行方法，優化的方式有增加多手勢操作和加大熱區。比如在 App Store 首頁進入應用推薦頁后，針對不同使用場景的用戶提供了三種退出的方式，大大降低了操作難度。
舉一個反例，得到的書籍詳情頁中，查看詳情的按鈕熱區只存在于文字上，但是用戶的使用習慣會誤認為整塊區域都可以點擊，因此每次點擊多次失敗后才理解熱區的正確位置，如果將熱區擴大到整個區域就可以降低操作的難度。
想要了解更多交互手勢知識可以拓展閱讀： 交互手勢的容錯性和邏輯性
用戶的每一次思考都伴隨著流失的風險。有時用戶對于我們提供的選擇不是很了解，會糾結和疑惑不同選擇之間的區別，最終可能導致放棄選擇進而流失。我們需要做的是為用戶提供默認選擇，同時允許用戶切換到其他選擇，以此來減少思考，降低使用阻力。
以手機淘寶查看相似寶貝功能改版為例，在舊版中，長按淘寶某個商品會出現「找相似」和「找同款」的按鈕選項，點擊后會跳轉到對應頁面。在新版中，長按淘寶某個商品會直接跳轉到「相似寶貝」頁面展示商品，同時可以通過分段控件切換為「同款寶貝」。我猜測的改版原因是，由于舊版的第二步給用戶的兩個選項讓用戶過多思考，導致第二步的流失率過高，很多用戶沒能體驗到「相似寶貝」和「同款寶貝」功能的的特色。改版后直接將更高頻的「相似寶貝」的商品頁展示給用戶，同時也很方便地去切換到「同款寶貝」，這種交互形式的變化讓用戶無需思考就可以迅速體驗到功能的特色、并在熟悉后下次會繼續使用。
我們通過過往的經驗將已知概念套用在新事物上，幫助我們理解。一旦交互界面中與用戶的經驗預期相悖，就會產生阻力。
上文提到過，我們習慣于從過去獲得的經驗中獲得對于當下問題的解決方案。甚至對于重復出現的問題，我們已經形成了條件反射和肌肉記憶去解決它們而不是再次思考。因此，當設計缺乏一致性時，不但會導致我們已經形成的條件反射和肌肉記憶失效，還會更容易導致錯誤的發生。此時我們不得不從條件反射的無意識操作轉換為消耗注意力的緩慢操作，從而形成阻力。為了避免這些阻力，我們需要確保按鍵的一致性、交互文案的一致性、交互手勢的一致性。
如下圖，警告框的按鈕位置一旦第一次用戶經過使用熟悉后，之后用戶會進行無意識地快速操作，此時如果某個警告框缺乏一致性就會導致錯誤的發生。
內在負荷是任務中包含的信息和用戶固有的認知結構產生交互作品而形成的負荷。體現在界面中的信息就是文案的設計了，它也是產品設計中重要的一環。悖于用戶認知結構的文案設計會帶給用戶理解上的阻力。一份合格的文案設計需要做到簡潔易懂、重點突出、無歧義性和保持一致。
如果能夠做到簡潔，就不要冗余。確保每一個字都有其存在的意義。大部分用戶會對冗余的大段文字產生畏難情緒，從而放棄閱讀。詞匯的選擇要符合用戶人群的認知范圍，不應該使用用戶難以理解的各種黑話和行話。在此基礎上，如果能夠通過形象生動的修辭手法幫助用戶快速理解，就更勝一籌了，比如針對垃圾分類，一些網友發明的快速記憶方法就是一個很不錯的例子，如下圖。
一段文案中可能有些是重點內容，有些是解釋內容，并不是所有內容都需要讓用戶閱讀并理解。大部分情況下只需要突出重點內容告知用戶，能夠引導用戶下一步行動就足夠了，至于其他解釋性或者不重要的內容弱化即可。
針對前兩條規則，我們以 12306 以及飛豬的學生票和成人票的選擇彈窗作為案例進行對比。如下圖所示，每一次購買火車票的過程中，當我遇到 12306 的這個彈窗，都會讓我用不少時間去進行理解和思考。首先在個人看來，“溫馨提示”在任何彈窗上都是占用空間沒有實際意義的存在，如果沒有標題，直接展示正文即可；其次，正文的內容重點信息不突出，其中有一個句子“請憑購票時所使用的有效身份證件原件和附有學生火車票優惠卡的有效學生證原件換票乘車?！边^于長和復雜，很考驗用戶的短期記憶和耐心；最后，按鈕文字沒有提供操作路徑，用戶想知道如何操作需要先閱讀完上面的文案。
飛豬的案例就避免了 12306 所存在的問題，做到了簡潔易懂和重點突出，如下圖。
表意清晰指的是文案傳達的含義明確、不含糊、不存在歧義。下圖是一款社交軟件的警告框文案，文案的歧義讓用戶疑惑“取消”按鈕是取消約會還是取消本次操作。經過修改后歧義性就消失了。
同一個軟件系統中，表達相同概念的用詞一致。模塊中的相似文案，語法表達方式一致。上文提到我們人類很少愿意思考的特點，一旦一個軟件系統出現表示同一個概念，但是名稱不一樣的詞語，我們大腦就不得不開始被迫思考：“這個詞語和之前那個很接近但是有些不一樣，它們是同一個東西嗎？”這個思考過程從而形成了不小的阻力?！墩J知與設計》一書中提到一條規則：“同一個名稱，就是同一個東西；不同的名稱，就是不同的東西?！币虼?，一致性是撰寫交互文案的一條重要原則。
當信息的內在負荷不能再進行降低時，通過改變信息的呈現方式、結構設計和邏輯安排來將復雜信息可視化，降低外在負荷，使信息更容易被用戶接受和理解。這里涉及到信息可視化這個課題，這里就不做展開了。
阻力并不是越小越好，在某些場景下，我們需要提高阻力提高用戶的使用成本達成某些目的。
類似于馬路上的減速帶，在車輛進入需要低速行駛區域時進行阻礙。我們通常在用戶容易犯錯的操作前設定一定的阻力，減緩用戶的操作的節奏，達到防錯的目的。如下圖，在藍湖中如果要刪除一個項目，就需要先輸入項目的名稱后才能成功刪除，通過增加阻力提高了防錯能力。
針對涉及到用戶隱私的敏感操作，通過設計特定的交互流程讓用戶體驗到安全感，比如通過增加指紋、面部識別等操作降低用戶對于危險和風險的擔憂，增加用戶的確定感和可控感。
生活中大部分的時刻都是單調乏味的，我們需要使用各種儀式點綴它。與此類似，在用戶的操作行為路徑里增加一些不必要的過程，也能成為用戶體驗旅程中的點睛之筆。
就像多年前堅果手機一代的包裝，設計師別具匠心的將包裝設計為一次充滿著童趣的體驗，雖然拆包裝的過程時間增加，但是給予用戶似曾相識的場景是不可替代的。
看似使用起來費力的微信搖一搖，可以加強用戶的參與感和儀式感，就仿佛融合著一種占卜未知世界的神秘體驗，這種感覺是點擊無法給予的。當初支付寶基于 LBS 和 AR 技術推出了 AR 實景紅包，眾多用戶不惜跨越“千山萬水”收集線索圖去尋找紅包，并樂此不疲。盡管增加了操作成本和使用阻力，但是這些富于互動性和趣味性的體驗帶給用戶的儀式感也是不可多得的。
用戶的屬性和其產生的內容質量對于產品的社區生態建設有很大的影響。對于社區的認同感越高的核心用戶越多，內容質量就越高，進而社區對潛在用戶的吸引力就越大。一旦一些修養低或居心不良的用戶大量涌入社區，就會同時帶來大量的負面內容，造成對其他用戶的干擾，甚至導致他們大量流失。因此，為了讓一個產品的社區生態能夠健康發展，我們需要采取一些篩選方法來設置阻力，以此來篩選出對平臺有益的用戶和內容。
很多產品在冷啟動階段，為了避免垃圾用戶和提高社區質量，會設立邀請制來控制用戶來源，然后根據現有用戶的使用反饋進行可控的優化迭代。這種方式可以有效地降低初期的運營成本，保持服務器穩定，甚至可以制造一種供不應求的感覺，獲得更多的討論度。
網絡騙局在社交類產品屢見不鮮，婚戀類產品更是重災區。很多推行高端婚戀或高端社交的產品為了保證用戶質量，不僅嚴防死守，還會設立價格門檻，不付費直接無法使用，這在現今已經廣泛推行的基礎服務免費、增值服務收費的收費模式中很少見，但是確實有效地進行了用戶篩選。
通過設置測試題將用戶分成不同的群體，進行具有針對性的權限設置。比如 B 站轉正時需要完成具有社區特色的晉級考試，需要花費的時間成本比較高，通過這種方式篩選出真正認同 B 站社區文化的優質用戶，給予這些用戶更多在社區中互動的權限，從而也大量減少了低質量用戶的負面行為。
上述的三種用戶篩選方法是否適用，需要考慮的產品屬性。不同維度的篩選用戶的方法還有很多，這里只是簡單舉例。
不同的內容形式對于社區的價值是不一樣，我們可以通過一定的方式引導用戶生產對于社區建設更有利的內容。比如微信發布朋友圈時并沒有直接給用戶提供純文字信息的輸入方式，如果用戶想要發布純文字內容，需要長按發布按鈕才能進入相應界面。原因是微信官方認為相對于純文字內容，附有圖片的內容對于其他用戶更具有吸引力，通過阻礙用戶使用純文字發布、鼓勵用戶使用配圖發布使得整體的朋友圈社區的內容能夠吸引用戶瀏覽更長的時間，從而也可以使朋友圈廣告得到更多的曝光。
有時產品的商業目標和用戶目標存在一定沖突時，損失一定的用戶體驗滿足商業目標是不得不進行的選擇，這需要我們進行合理的平衡。
為了迎合商業目標，我們有時需要針對一些功能設置一定操作阻力將其進行弱化，然后引導用戶去使用我們希望其使用的一些特定功能。這類阻力設計最為常見，比如通過強化按鈕對比進行功能的引導，如下圖。
歧視性策略常見的的應用方式就是通過 VIP 制度或等級制度將用戶進行身份區分，針對身份等級低的用戶設置使用阻力，以便于引導其投入更多精力和資源，或者通過此方式給予高等級用戶優越感，刺激其進行分享炫耀。
16 年發布的支付寶生活圈就是一個很好的案例，芝麻信用 750 分以上才可以使用的歧視性策略非常簡單粗暴。很多達標的土豪用戶在朋友圈炫耀生活圈的截圖，等待朋友們的膜拜點贊。互聯網產品中，每增加一個動作，用戶都會呈幾何級流失，但是支付寶的歧視性策略給了用戶巨大的動力完成了截圖、保存、打開微信、分享照片等一系列動作，幫助支付寶生活圈實現了刷屏傳播的效果。
雖然讓用戶暢通無阻地使用產品是我們的目標，但是有時還需要我們合理地限制。不同的使用場景和商業目的共同影響著設計策略。在如今互聯網產品越來越趨于存量競爭的態勢下，我們更多的工作開始專注于產品的優化。希望本文能夠提供相應的思路，助力你在產品優化探索中找到可行的切入點。
文章來源：站酷 作者：Ballen成名
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
QQ主題自2013年誕生，至今7年時間，保持了整個營收的Top3的成績，受到了廣大用戶的喜愛。隨著QQ數年來版本的迭代，我們也漸漸傾聽到了一些用戶對主題的反饋，為了給用戶帶來更好的體驗，我們決定對QQ主題從上游到下游進行一次全面的優化。
我們對QQ主題進行了兩輪用戶體驗反饋和調研，發現：目前的外網主題存在機型適配效果差、素材制作質量差、缺少全局美化等體驗問題；而同時，用戶調研的結果表明我們的用戶希望體驗到更好更高品質更全面個性化的主題。
基于現網產品問題和用戶調研結果，對優化方向進行了歸納分類,最終確定QQ主題體驗升級的項目設計目標：增加主題覆蓋范圍 ，提升主題的美化質量 ，提升主題的可用性。
為了達成上面的三個目標，一開始我們根據QQ主題的實現邏輯制定了初步的優化方案：通過新增素材增加主題覆蓋范圍，通過修改舊素材提升主題可用性和質量。
但在進行執行評審的時候，我們意識到，這樣的方案雖然可行，但落地成本非常的巨大，需要每個主題包內新增兩端共1800多張切圖，花耗多家cp公司至少四個月的時間和人力。
我們不得不推倒開始的方案，開始思考：是否有更好的解決方案？
在對主題制作流程、客戶端呈現邏輯、日常運營維護工作等問題進行深入的溯源挖掘后發現：QQ主題目前實現個性化的方案是后臺下發素材包替換本地客戶端資源實現個性化。而這就導致了素材包本身是固定的內容，只能被動的接受版本更新帶來的種種問題。
在這樣的情況下，即使我們按照一開始的方案執行落地，多個版本后我們仍需大量的人力去進行維護和更新才能保證用戶的體驗。
所以，我們必須打破舊方案帶來的弊端，要讓素材活起來。
在綜合設計思維，開發思維，運營思維去思考問題后，我們提出了一個嶄新的實現方案：終端染色（使用Color-filter,對png進行染色的技術）+分色映射（將資源與色值進行映射，用一套有限色板去管理無限資源的概念）。
在這套新的個性化實現方案支持下，設計師簡單的對色板進行配色，就能夠對QQ客戶端的全局顏色進行變化。而當版本更新發生資源變更時，僅需維護通用的線上映射關系，資源即可自動適配到應有的顏色。
針對主題方案的變革新方案，分別從優點、變化、難點3個維度進行綜合評估：
- 優點：
（1） 整體學習，制作，運營，維護的成本降低
（2） 美化范圍變大，下載資源變小，用戶體驗得到改善
（3） 效率得到優化，難度降低，設計師有更多時間提升主題質量
- 變化：
（1） CP學習新的制作方式
（2） 產品運營省去了過往定期維護素材的工作
（3） 設計師在版本迭代時候進行新資源的分色映射關系
（4） 開發人員進行統一的分色映射表維護管理
- 缺點：
（1） 方案工作量大，多達120+的界面檢驗，上千個客戶端資源，大量的代碼需要修改。
（2） 方案執行難度大，包括如何用有限的色板兼容更多的設計需求，資源如何在不同場景得到更有效的復用，設計與開發未來如何進行映射表的對接，以及版本的上下兼容。
設計師提出“終端染色+分色映射”的新方案后，通過積極拉動會議，向主題業務相關的多角色進行新舊方案的優劣討論，方案得到一致認同后，多方聯動形成項目組。
其次進行可行性評估，與開發結對緊密協作，共同討論難點攻克新方案落地要點。
最后基于前期可行性評估，以及難點預研，項目組規劃出階段性的落地方案。
方案的落地主要為三部分工作： 梳理標記->歸納轉化->編譯覆蓋。
梳理標記：
前端開發逐個查找界面的資源和代碼并標記，交付給設計師進行資源色值的規劃
歸納轉化：
設計師根據ui的配色規則以及個性場景需要，進行ui色板的構建及資源的顏色映射分配。
在這一過程使用騰訊文檔進行設計語言與開發代碼的轉化。
編譯覆蓋：
修改代碼，讓資源支持個性化需要的染色和素材替換、錄入分色映射的騰訊文檔并進行實機的染色編譯并和設計師共同檢驗效果。
而在上述工作中，設計師的任務難點就在于色板的設計和染色規則的構建。
首先設計師根據QQ的ui規范，建立初步的色板；下一步，創建界面demo，模擬資源與色板的映射關系；然后替換多個不同的色板檢驗主題染色后多場景下的效果，再對色板和染色規則進行反復的調整；最后在效果符合預期的時候，再輸出色板和染色規則并最終在真機上進行驗證。
QQ舊主題：僅覆蓋6個界面、素材包內涵400+切圖、日常需要花費巨大成本維護1000多套主題。
主題新方案落地后：覆蓋范圍從6個界面擴展到60+界面、素材切圖降低至48張、600多個資源得到梳理優化、60+個舊主題存在的可用性問題得到解決、維護成本得到大大降低。
主題新方案落地后，考慮到舊主題制作時間長，難度大，設計費用高的問題，產品側希望設計師能配合新的染色方案去優化主題制作、上架、驗收的流程。
根據舊流程里各個角色反饋的問題點，第2階段的目標可提煉為：提升制作效率、打包效率、驗收效率?？紤]到舊流程中效率低、出錯率高的步驟大多是人工操作部分，我們計劃設計一個智能化的主題編輯器來實現工業化的主題生產。
以提升效率為目標，首先深入制作流程勘察，挖掘制作流程的關鍵核心點，并提煉關鍵觸點、痛點問題；基于各個觸點關鍵問題，逐一給出解決方案，并全局的回顧整個流程，從全局去統領優化方案；繼而以落地為導向，明確問題解決的優先級，穩步前進規劃方案落地。在解決方案中，本地編譯體驗已實現，其他能力落地優先級如下：
- 首先解決智能切圖和智能配色，優先級最高
- 其次解決規范優化和多界面預覽，優先級居中
- 最后是直連后臺，運營做審核，優先級最低
傳統的主題制作中往往最費時間和最易出錯的就是切圖，在這里我們使用了雙重保險。
保險1:編輯器將內置一套智能化的切圖合成處理方案，設計師僅需上傳極少量的必須切圖。編輯器還會對上傳的切圖會進行命名、尺寸、格式的檢測。
保險2:官方設計師預設主題的PSD/SKETCH設計模板,附帶切圖命名尺寸格式等，畫完后一鍵即可導出全套切圖資源。
新主題的染色規則中，色板存在21個顏色需要配色。對CP來說，即使有設計規范進行學習，也存在著出錯的可能。為了讓制作通過率達到最高，我們計劃通過編輯器內置的智能配色，將復雜的配色操作簡化為2步操作，達到快速穩定地輸出合格的配色的效果。
新主題色板中，顏色可分為主色系和背景色系，兩大色系下的色值再各有不同的色值要求。
從設計師的理想角度來看，如果只進行主色和背景色的選擇，即可輸出實現21個顏色的話，無疑效率和通過率都會得到大大提升。
為了實現理想效果，我們設計了一套方案：
在選擇主色、背景色后，首先對它們進行一個檢測，在這里我們引入了WCAG2.0的標準，檢測主色元素在背景色元素上的顯示是否符合大眾的閱讀要求。其次我們再把QQ設計規范中，對21個顏色的不同微小要求，通過HSB顏色模型轉換為數據化的代碼條件并內置在編輯器中。
這樣，CP選擇的兩個顏色，通過顏色檢測、顏色模型轉換、預設條件的微調，就變成了符合我們視覺層級規范要求和可用性要求的21個顏色。
在實現了智能切圖、智能配色、導入設計稿、在線預覽、結構化打包、手機實際預覽等能力后，編輯器的能力基本得到滿足，我們接下來對編輯器進行框架設計，在多方案權衡后，最終采用了元素作導航，右邊區域保持全局預覽的交互框架，并設計了編輯器的ui界面。
使用編輯器前：從制作到上架需要約4周時間，每月上架主題平均為12個。
接入編輯器后：僅需一天即可完成素材的制作到上架，并且得益于制作難度的降低，可制作主題的CP得到了擴充，目前每月上架主題穩定在2000+個。
在完成了主題效果優化、主題制作優化后，我們把注意力放在了制作上架之后的流程-適配維護。
舊的主題適配維護涉及到cp/設計師/運營/開發四個角色的大量人力成本。
而新主題優化后，僅需要設計師&開發工程師兩位角色進行低成本的操作。
但在實際工作中，版本中的不同更新都是由不同的設計師&開發負責的，適配工作往往很難執行。所以為了保證適配的效果，除了在產品的工作流程中增加適配規定外，我們還希望能幫助到不同業務方降低適配的成本。
新適配流程中，設計師其實僅僅需要根據染色規則對新增資源去定映射關系，而實際映射的寫入是開發操作的。那如果兩個角色的工作能合并，并且省去學習新適配規則以及溝通的成本呢？
從幫助開發去理解分色染色的層面，我們把資源元素和顏色進行了場景化的匹配應對，并且把規則關系整理成了目錄，搭建了Q-Element適配規范網站；開發同學在進行適配時候僅需根據設計稿的新增部分，尋找對應目錄下的規則關系，即可對元素進行適配。
優化前：主題的版本適配需要設計開發產品的多方配合，花費數天時間去完成適配。
優化后：僅需開發1個小時的時間即可完成適配和驗證。
通過3個階段的努力，QQ主題美化初步完成了主題效果、主題制化、主題維護成本的三大優化。上線半年后，目前QQ新主題已經達到1萬八千個，并且借助QQ美化平臺完成了外部創作人、QQ、QQ用戶三者之間的生態搭建，正源源不斷的提供給用戶更多更好的個性化主題。我們也會進一步努力，由QQ主題開始對個性化進行新一輪的優化，帶給用戶更好的體驗。
最后，廣大設計師的機會來了！如果您擅長插畫或者動畫，點此鏈接https://ycg.qq.com/qcc，報名參與我們的原創空間和QQ美化平臺項目。按照頁面引導提交作品審核，經原創館審核后，就可以獲得創作權限。 您的原創作品將被QQ及QQ空間數億用戶付費使用，并獲得相應比例分成。
文章來源：站酷 作者：騰訊ISUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
針對不同的受眾我們會做不一樣的設計，今天是針對兒童進行的產品設計思路的內容分享，面對兒童產品，我們需要從心理生理上的區別分析，進而推動內容、交互、視覺、動畫等設計，一起來了解下吧～
“小山上的風，沒有一個人知道，沒有一個人能告訴我；風從什么地方來，風到什么地方去?！?
英國的詩人米爾恩在給孩子的詩歌《小山上的風》里如是寫道。
在不同的年紀，這個世界帶給我們的觸動和感知都是不一樣的。那么當我們為兒童進行設計時，該如何去呈現呢？讓我們一起來探討下吧。
近年來，兒童產品的市場是比較火熱的，由于兒童的生長變化較快，他們在心理和生理上都與我們成人有較大不同，對于外界的信號，他們更喜歡得到視覺和聽覺上的反饋。并且常常能夠從挑戰和沖突中獲得快樂，他們不在意結果，目的性較弱，還有著非常強烈的好奇心，無法預見其行為會引發的后果，其模仿能力的強弱隨著年齡成長呈曲線狀呈現。當我們在設計時，應將兒童的這些特性考慮進去。
任務旅程的設計
在某種程度上，兒童產品的客戶形態有些類似我們的 ToB/G 產品的客戶。使用產品的一線用戶，并非最終具有購買權的客戶。孩子的父母是兒童類產品最終具有購買權的客戶，他們對早期教育、智力投資、內容是否健康積極等等都有較高要求。
因此我們在內容的設計上應更加的多元化，將任務完成后的數據量化體現，使父母便于了解孩子情況，同時也可以從側面激勵用戶后續的付費行為。任務旅程有多種類型，在兒童品類的設計上，我們通常采用下面這 4 種任務類型去設計。
好的設計可以減少認知負擔， 可以最大限度地減少理解功能交互所消耗的智力資源。在年幼的孩童時期，他們的記憶容量比成人小，我們需要關注到這一點，怎樣的信息容量，交互層級和人機互動才能讓他們更好的理解和認知產品界面。
比如 LG 有一款面向低齡兒童的手表，表盤上只有一個按鈕和出聲孔，并且在噪雜環境下，還考慮到家長的心情，非常貼心的設計了 10 秒自動接聽的人機交互方式。
△ 圖片來源 | 文章作者&Roobo 設計團隊
通常，我們成年人對交互體驗，產品易用性都抱有較高的期望，我們期望產品能為我們帶來效率的提升、便捷的操作、強烈的視覺沖擊力等等。但是，兒童與成人在人機交互的互動上卻有著天壤之別。當產品功能無法正常運行時，孩子們并不會像成年人一樣感到失望。當設計不如他們所希望的那樣時，雖然也會暫時感到沮喪，但他們在自己生命旅程的學習嘗試中，也習慣了那些常常無法正常進行的任務。隨著成長經驗的增加，他們會逐漸熟悉了解世界的運行規則。
△ 圖片來源 | 文章作者&Roobo 設計團隊
有研究表明，在對 120 名學前兒童(3—6歲)進行了12種顏色和12種圖形的辨認實驗中顯示，實驗刺激用速示器分三種速度(0.01秒、0.05秒、0.1秒)呈現。結果表明：呈現速度對辨認正確率有著明顯的影響。3-6歲兒童對顏色和圖形的辨認能力均隨年齡增長而逐步提高。學前兒童對顏色的辨別，在三種呈現速度條件下，均對黃、紅、綠三色的辨認正確率為最高。
圖標 icon 的設計上，簡約、塊面化、造型避免抽象，例如 3 歲+的孩童已經可以理解向前、向后的箭頭，有研究顯示，在短時段內，兒童對圖形的辨認在不同呈現速度條件下出現優勢與劣勢圖形之分。優勢圖形的正確辨認率百分比較高，而劣勢圖形則較低。
現在市場上有很多兒童品類的硬件，深受家長和孩子的喜愛，在軟硬件的結合上，我們要善加運用，例如硬件自帶的攝像頭、觸摸屏、聲控等等。當硬件與產品內容相結合，可以碰撞出更加多種多樣令人振奮的新的交互方式。
△ 圖片來源 | 文章作者&Roobo 設計團隊
在任務旅程中，內容合理優質的動畫，廣受家長及兒童的歡迎，但是動畫頻繁變換的畫面容易引起視覺疲勞，大多數動畫片每 6 秒會變換一次畫面轉場，超出了幼兒視覺神經的承受能力。在兒童不同的年齡段，注意力集中程度都是有所不同的，皮亞杰理論研究顯示 3-4 歲的兒童注意力集中的平均時長為 10 分鐘，4-6 歲兒童注意力集中平均時長則可達 15 分鐘。在我們為孩子們設計他們喜愛的動畫時，要充分考慮到這些因素。運營類動畫一般控制在 1 分半之內是較為合理的。
市場上很多 AI 兒童伴讀機器人，是可以自動推送產品內容的，考慮到兒童的健康使用，推送動畫的播放時間要善加利用，并減少觀看所需的步驟，在家長端也需要設計對應控制內容的開關，并將音量的控制開關放在顯眼易點的位置。
文章來源：優設網 作者：JellyDesign
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn