今天給大家詳細的分析一下移動端選擇器。
一.什么是選擇器
選擇器是一個輸入字段， 用戶必須在其中選擇一個（或多個）選項，這與文本字段中用戶可以自由使用的輸入區不同。選擇器具有各種不同的形狀和形式。下拉菜單，復選框，切換按鈕，滑塊等都是不同類型的選擇器，但它們看起來彼此并不相似。這些類型的選擇器之間的主要功能差異是用戶可以選擇的選項數量：一個或多個。
二.選擇器的類別
-單選選擇器
-多選選擇器
1.單選選擇器
單選選擇器按效果又可以分為：點擊選擇器、滑動選擇器、多聯動選擇器、開關選擇器、可搜索效果的選擇器、地圖選擇器。
特點：同一時間只能選擇一個選項，當你已經選擇完一項后，準備選取另一項，那么后選的一項會立刻使先選的一項被取消選擇。
1-1點擊選擇器
點擊選擇器可分為兩種狀態，狀態一為立即觸發，當你點擊后會立即跳到下一步操作；狀態二為再次確認觸發，當選中某項時，不會立即觸發操作，而是需要再點擊別的觸發類組件（如保存按鈕）后，再執行操作。
-立即觸發式：
特點：直接進入，并沒有再次確認的按鈕，可以讓你快速到達想要的目的。
建議：雖然目的能快速達到，不過也很可能會造成誤操作，所以在設定這類選擇器時要多考慮手指的觸碰區域以及每個選擇元素的距離，同時正因為是直接跳轉，所以應當加入一些操作提示。
舉例：汽車之家在用戶選擇二手車時就會出現此選擇器，當我在汽車之家想要選擇二手車時，它會彈出立即觸發式選擇器控件，我們在控件上可以看到有7個圓形選項，分別為：汽車之家誠信聯盟、準新車、奧迪、奔馳、寶馬、三廂轎車、分期購車，當我點擊“奧迪”選項時就會立即跳轉選擇后的頁面，為了讓用戶知道自己選擇后的狀態，在跳轉頁面時還會彈出非模態彈窗的文字提示“共找到1943輛車”。
-再次確認觸發式：
特點：這是最為常見的選擇器類型，當所在選項選上，除了選擇另一個選項之外，便沒法取消選中狀態。（選且只能選擇一個選項）
建議：在設定此類選擇器時我們應該從產品的角度去考慮是否給用戶一個默認選項，甚至是否考慮給出一個重置按鈕。
舉例：我剛注冊小紅書時，在小紅書填寫信息頁面中，它的默認選項是“男”，我點擊“女”，則會自動取消掉“男”，它們兩者并不能同時存在，并且只有我點擊下一步按鈕時才會正式確認我選擇完成。
1-2滑動選擇器
特點：滑動選擇器是將需要選中的內容滑動至中部，然后點擊確認按鈕確認選中后返回選中內容。大多數運用在選擇時間或地址上。
建議：滑動選擇器的展示區域有限，部分選項會被隱藏，最好是當用戶對所有選項都比較熟悉、有預期的時候，才使用它。為了保證手機屏幕觸控精度，以免發生誤觸，滾輪選擇器建議控制在5列以內。
舉例：在小紅書填寫年齡信息時，我們只需用手指在區域內滑動即可選擇想要的選項。
1-3多聯動選擇器
特點：多聯動選擇器是由兩個或兩個以上的中繼器制作而成，第一個中繼器選擇后，一般會對第二個中繼器進行篩選，不過因為顯示的區域有限，所以當你要切換時，還只能挨個切換，效率低下。
建議：可以通過數據以及功能來減少選擇時間，例如在選擇地區時，根據當前GPS定位地理位置，定位相關省級信息及名稱，減少滑動操作。
舉例：如下，當我選擇了內蒙古自治區，那么2級內容就應該篩選掉內蒙古以外的城市，比較適用于省份-城市或者品牌-產品這種類似的選擇，當然下面第一張多聯動選擇器也結合了滑動選擇器。
多聯動選擇器展示的方式非常多，不僅可以用滑動形式展示，還可以用點擊、平鋪列表等形式展示。
在左圖選擇城市時，我們必須要先選擇省份，再選擇城市，最后才能選擇縣；
右圖則沒有先后順序，不過當你首先選擇顏色時，如果沒有相同尺碼的衣服，缺貨的尺碼則不會被選中，先選擇尺碼也是相同道理。
1-4切換開關選擇器
特點：切換開關選擇器有且只有兩種選項，用來在開和關兩種狀態之間切換。開關屬于觸發類組件，撥動開關時，它所指揮的某個操作會立即生效，常見的使用就是授權。開關的默認狀態并不都是關閉的，還要從產品本身的設定上來決策。
建議：如果某開關的功能是用戶經常使用的狀態，那么可以在默認狀態下打開開關，不過需要注意的是在某些特殊的開關按鈕需要打開時，必須要提前告知用戶。
舉例：當我打開UC瀏覽器的設置時，它的輔助功能就使用了切換開關選擇器，切換的開關只需要點擊即可。
1-5可搜索選擇器
特點：可搜索選擇器一般用于選擇項較多時，特別是對于電商購物類的APP搜索選擇器是必不可少的，搜索選擇器會根據用戶輸入的內容，對中繼器進行模糊的搜索，讓用戶快速找到并選擇內容。
建議：在搜索區域輸入文字時，可給予用戶更多的文字提示以及以及引導類信息。
舉例：小紅書在搜索時就會出現數字化的信息提示，這樣能夠很好的引導用戶進入到想要的搜索結果：筆記或者商品頁面。
1-6地圖選擇器
特點：作為最特別的選擇器，它的功能是復雜的，它的操作方式也是多樣化的，地圖選擇器的操作可點擊、可拖拽、可放大縮小等等，它多用于生活類APP。
建議：可以在選擇器中加入更多趣味、互動、可感知的設計，如加入過節元素、車輛行駛路徑、熱門區域、甚至選取后手機的震動等。
舉例：
打車類APP必用的地圖選擇器，滴滴出行的用戶可以實時看到車輛信息，可以采用點擊、拖拽、放大等操作來選取上車地點，選取后還有文字信息提示，讓用戶確認操作是否正確。
貝殼APP則用地圖選擇器來讓用戶選擇二手房，同時也采用了聯動式的效果，第一步是查看區域，可以明確看到區域的售房套數，點擊選擇區域后我們可以看到每個路段的房子套數，點擊路段后就可以看到每個樓盤的套數以及均價，直到點擊樓盤就會彈出詳細信息框。這樣有助于用戶在選擇二手房時從大數據分析二手房的情況，有更好的對比性與選擇性。
2.多選選擇器
當單選選擇器不能滿足用戶需要時，這時我們就可以采用多選選擇器，一般常用的多選選擇器都是采用點擊的方式，當然也有滑動類型的多選選擇器。
2-1點擊多選選擇器
特點：當用戶想要選擇多個類別的情況下，我們就可以用點擊多選選擇器來展示提供給用戶選擇，通過屏幕點擊選中或取消選中該選項，它不會立即觸發操作，需要再點擊別的觸發類組件（如保存按鈕）后，再執行操作。
建議：從用戶的角度來講盡量不要強制用戶選擇數量或者默認全部數量；多選項時觸碰區域不能太小，以免造成誤操作。
舉例：小紅書在選擇感興趣的內容時就采用了點擊多選選擇器，不過在選擇興趣時它就強制用戶至少關注4個興趣，而對于單興趣或者少興趣的用戶來講，這無疑會造成用戶體驗的不佳，被逼再次從中選擇次要的興趣。
2-2滑動多選選擇器
特別注明：從用戶的角度來看，它可以選擇多個區域段的內容，所以我把它分為多選選擇器中。
特點：當系統給出的選項不在自己的選擇區間時，可以很好的自定義選擇區間，把定義權限交在用戶手里。同樣，它需要再點擊別的觸發類組件（如保存按鈕）后，再執行操作。
建議：在用戶滑動操作期間要有明確的操作提示，讓用戶時刻感知目前處于的狀態；滑動區域盡量不要超過100刻度，如果刻度距離太小，用戶在滑動時也很難精準的選擇范圍。
舉例：在汽車之家APP中，當我要選擇汽車價格范圍時就會出現此選擇器，我們可以用手指滑動來選取它的價格區間，相對于上半部分的單選價格拓展性更強，用戶可以自行選擇上半部分的單選選擇器，也可以選擇滑動多選選擇器，給予用戶更多的選擇。
三、選擇器的十大應用要點
1、簡單易懂
標題易懂：
在選擇器中標題一定要簡單明了，很快的讓用戶知道他在為什么做選擇（如：當你關注某烹飪的APP后，它會讓你勾選喜歡的菜譜，你的標題就可以用“選擇菜譜”四個字，簡單明了）
文字標簽易懂：
一般使用短語而不是句子，也并不需要用標點符號來結尾。（如：當選擇想要的菜譜時，菜譜后的文字不需要加入標點符號）
選取狀態易懂：
用戶能夠明確感知什么是選中狀態，什么是未選中狀態，什么是禁用狀態。（如：選中狀態為高亮顯示，未選中為普通顯示，禁用狀態為灰度顯示）
反饋提示易懂：
當你在選擇中遇到選項限制或是否需要確認操作時，反饋提示一定要一目了然。（如：當你選擇某衣服時，S碼不能選擇，則會用灰度顯示的文字代替，甚至可以用中橫線劃過文字，明確告訴用戶不能選擇）
2、基本排序
從邏輯順序：
邏輯排序能讓用戶很快很準的找到自己需要的選項，特別是對于選擇地址/時間/個數等常規的選項時，可以按照字母/遠近/大小來進行排序。例如下面在選擇地址時，就是按照A-Z字母排序，這樣可以大大節省用戶選擇的時間。
從產品利益角度排列順序：
當然為了產品自身的利益也可以自己優化排序方式，選項的順序可以說服用戶進行選擇，用戶可能因為第一個選項在列表中的位置而選擇了第一個選項；可以輔助用戶，也可以讓用戶向著產品所希望的方向傾斜。例如你在選擇菜譜時，產品為了讓用戶選擇更加優質的菜譜，就會把用戶評價高的菜譜放在前列；當然商家也會這么做，例如你要去買某款商品，商家會在選項中把熱門、優質的產品放在最上方，讓你優先選擇。
從用戶體驗排列順序：
從用戶角度來說哪些對用戶體驗好，那么就把它排在前面。例如汽車之家在進行車輛類別的排序中就把用戶量最多的轎車排在第一位，而把用戶量最少的輕客放在了最后一位；同樣它在汽車品牌選擇中，單獨列出了熱門品牌把它放在前列，讓用戶進行快速選擇。
3、一致性
視覺布局一致：
每個元素之間的對齊、元素與元素之間的間距、按鈕不同狀態的視覺體現。一般情況下移動端更傾向于左對齊，這樣有利于快速讀取選擇內容，可以提高用戶的瀏覽效率并減少錯誤。
圖片/插畫風格統一：
在圖文結合的選擇器中，我們一定要保證圖片（插畫）的優質以及風格的統一。
4、合理運用默認選項
默認選項是選擇器的開始狀態。在不同的選擇器中有不同的默認方式。
默認未選中：
這是最常見的一種狀態，特別是對于選擇年齡、生日這些個人隱私信息，系統也沒有辦法進行默認選擇。
默認選中其中一個選項：
要想默認其中一項，必須考慮兩點因素，因素一：你想要潛意識的像用戶傳達信息，在單選選擇器中默認選擇一項后，就可以潛意識的向用戶傳遞信息必須要在這組單選項之中選擇一個。因素二就是產品的傾向，例如此產品的性別9成都是女性，那么建議默認選項為女性。
默認選中全部：
其實默認選中全部在用戶體驗上來講真的不是那么的友好，例如微博這個選擇器界面，剛進這個界面時已經全部勾選中，并且當你沒注意習慣性的點擊下面的按鈕時會生立即效，沒有返回的余地。（吐槽：有些APP甚至沒有一鍵取消功能，要一個個的點擊取消...）這也是為了產品犧牲掉了部分用戶體驗吧！
5、給用戶更多選擇
單選選擇器的更多選擇：
如果用戶不想做出選擇，那么應該提供一個中立選項，為用戶提供一個明確的方向，中立選項比勉強選擇要好。例如在選擇行業領域時，以上并沒有你所處的領域或你不確定你的領域，你就可以選擇“不限”或“其他”。
多選選擇器的更多選擇：
在多選選擇器中，如果不能把控到用戶的準確選項區間，那么可以考慮滑動多選選擇器，讓用戶有更多的選擇區間，不管是汽車之家還是懂車帝在選擇車輛價格上兩者都是采用的相同方式。
6、控件狀態
選擇控件在操作過程中必須更改其狀態/外觀，要明確讓用戶知道是否能選中，是否被選中。控件狀態一般分為三種：未選中、選中、禁用。
未選中
選擇器的開始狀態，向用戶表明，可對該選擇控件進行操作。
選中
用戶操作選取狀態，選擇控件處于被選中的狀態。
禁用
一般情況會為灰色顯示，用戶將無法與選項進行交互。
7、操作提示
指的是用戶在操作中讓用戶得到相應的反饋，用戶根據這些反饋可以判斷當前狀態以及操作后狀態。在選擇器中，操作提示一般用輔助文案提示及非模態彈窗提示。
輔助文案提示（選擇前與選擇中）：
輔助文案指的是在選擇控件主體之外另外放置一些文案信息來充當說明，例如下面是地區選擇，我在選擇不同層級的區域時，它的上方會出現輔助提示文案，讓你明確的知道你上一層級選擇的是什么。
同樣，當我在選擇價格區間時，滑動選擇器的左上方一樣有文字類的提示：
非模態彈窗提示（選擇后）：
非模態彈窗一般出現在用戶操作完的跳轉頁面中，為了讓用戶感知所選的選項在頁面的狀態，如下，非模態彈窗告知用戶一共有7輛車符合標準。
當然除了非模態彈窗外，還有模態彈窗，但是用戶體驗極差，目前很少使用，所以就不列出來了。
8、合理使用操作區域
擴大點擊區域：
在選取按鈕類的操作時，容易出現點擊不到或誤操作的現象，我們可以通過擴大點擊區的交互區域來提高易用性，例如下圖，雖然按鈕在左邊，但是可以把橫向區域都列為可點擊區域。
當然我們也可以從設計的角度來擴大視覺范圍，從而也提高了點擊范圍，這樣的處理不僅提升了視覺層面，還提升了交互體驗。（圖文結合方式）
注意交互間距：
在元素與元素之間一定要有合理的交互間距，不然很容易出現誤選的情況。
合理利用有效區域：
在選項較多的選擇器中，我們可以利用好選擇主體控件之外的區域，例如在選擇城市/品牌時，我們可以做A-Z index式字母交互區，幫助用戶快速找到想要的選項。
9、趣味性
讓用戶選擇本來就是一件枯燥乏味的事情，如果讓這件事變得有趣那么會極大的提升用戶體驗。
從文本層面：
例如當用戶填寫性別信息時，你給予用戶的文字信息并不是“男”/“女”，而是“帥氣的boy”與“酷酷的girl”，這樣會讓用戶覺得這是一件比較有趣的事情，而不是被動選擇。（注：這樣的取名一定要符合產品的特性）
從視覺層面：
加入可玩兒性的選項，例如汽車之家的頭像切換，可以選擇自己喜歡的頭像。（頭像并不是強制選擇的，如果不進行操作則是默認選項）
從交互層面：
讓用戶去享受選擇。例如Soul的星球首頁就做的非常棒，在未選擇狀態他的人物會360度圍繞著轉動，當然你也可以快速拖拽，或者放大縮小，可玩兒性十足，并且在內部設定了最匹配/新人的高亮顯示，協助用戶去選擇。
10、合理使用選擇器
不同的產品在使用選擇器時都各有不同，因為每個選擇器都有他的利弊，而真正要怎么去選擇還要根據產品本身來定。
那么我就拿目前市面上最常見的5個地址選擇器的類型來分析一下利弊：
1/多聯動選擇器（平鋪式）
貨車幫采用的是多聯動平鋪式選擇器，它最大的特點就是能夠一眼就看清楚所有地址，不過地址多時需要花時間去找，只是當你經常使用此功能時便會形成記憶，再此搜索的時候就能形成記憶點擊，效率很高，并且在操作外還有路徑提示，不僅可以幫助你記住層級選項，還可以實時返回路徑進行重新選擇。
手勢操作：點－點－點
2/多聯動選擇器（列表跳轉式）
閑魚采用的是多聯動列表跳轉式選擇器，這個選擇器最大的缺陷就是選擇三級之后用戶可能會忘了上一級的內容，那么就又要切換到上一級，閑魚采用它的原因是因為它只有二級聯動，不存在遺忘現象，不過這樣列表式的選擇效率并沒有平鋪的效率高，人眼習慣掃視橫向內容，所以橫向的內容獲取往往要比縱向的多，在地址選擇器上我個人是不太建議采用多聯動列表跳轉式，因為并不也不直觀。
手勢操作：滑－點－點
3/多聯動選擇器（列表式）
轉轉采用的是多聯動列表式選擇器，它的優點是可以根據右側字母來找城市，數據偏大也能夠很快的查找。不過如果在層級的選項中出現錯誤，同樣就要切換到上一級，并且在操作中沒有輔助信息提示。
手勢操作：滑/點－滑/點
4/多聯動選擇器（下滑式）
安居客采用的是多聯動下滑式選擇器，這種形式的選擇器不會遮擋后面的主要內容信息，在選擇完地址之后能立即看到地址的篩選結果。優點是能快速選擇多級地址，并且層級分明，擴展性較強可以做成地址多選。缺點是不適合3個層級以上的地址選擇。
手勢操作：點－滑/點－點
5/地圖選擇器
美團外賣采用的是地圖選擇器，這個選擇器一般用在需要精準定位的生活類APP中，它的優點就是能夠快速精準定位，并且自動錄取定位信息，它的缺點也顯而易見，不能含帶層級并且對范圍也有約束。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
互聯網下半場，所有的比拼都在產品體驗；然而“體驗”是一個非常抽象的詞，我們怎么把一個抽象的概念拆解成可落地執行的策略，作用到企業中后臺產品上，怎么衡量策略的有效性，這一直是我們團隊面臨的重大課題。
業界關于體驗度量的經驗
目前關于“體驗度量”比較成熟的理論模型當屬 Google 的 HEART 模型，另外還有 ISO 9126 軟件質量模型和Davis 的 TAM 技術接受模型。后人在此基礎上進行了很多實踐，譬如 SAP 的用戶體驗問卷（UEQ）、Oracle 的客戶體驗價值公式（CX）等。公司內部各個 BU 也在不斷的嘗試和探索，譬如新零售技術團隊的 TES 模型。技術團隊研發效能的 DEVA 模型，國際 UED 語音設計的 HII 模型，阿里云的 QoUE 模型。縱觀這些模型和實踐，大多是主觀數據和客觀數據的結合。
我們團隊也曾提出過 TECH 、PTECH 模型，但由于模型的操作門檻較高、對埋點數據有不少要求，難以推廣到各條業務線。痛定思痛后，我們決定重新回歸業務，回歸“體驗度量”的初心，去繁從簡，提高通用性。
企業中后臺產品的特點
企業級中后臺產品最大的特點是任務性質非常明確；用戶使用這類產品通常是為了解決某個確定的問題點，期待用新的解決方式降本增效。
桌面研究也表明：可用性問題是軟件行業的普遍問題：在英國，一般商用計算機用戶只有30%-40%的有效生產率；軟件缺陷中，48%是可用性問題。
正是基于上述原因，我們嘗試提出了“兩章一分”的標準，分別從設計驗收、可用性測試、易用度分數等三個維度對產品體驗進行體檢和把關。
什么是「兩章一分」
1. 設計驗收章
“設計驗收章”主要有 3 個維度：產品還原度、任務流程跑通率、單頁面加載時間。
產品還原度：指技術同學的最終產出與設計稿之間的差異；
匯總人工智能線、技術風險線等 5 個產品近 1 年的可用性測試結果。除功能、性能問題外，高頻體驗問題主要集中在“幫助引導”、“操作反饋”、“任務流程”、“概念術語”、“功能入口”這 5 個方面。同時，結合之前項目沉淀的設計經驗和設計工具，我們最終將“產品還原度”的子維度定為“信息導航”、“幫助引導”、“操作反饋”、“文案名詞”；每個子維度用 2-3 句描述來進行評分。
任務流程跑通率：驗收確認能跑通的主干任務流程數，在所有主干任務流程數中的占比；舉個例子，設計稿中枚舉了 10 條主干任務流程，驗收發現其中 9 條已跑通，那么任務流程跑通率就是 9/10*100%=90%。
單頁面加載時間：接入雨燕性能指標數據的產品看“首次有效渲染時長 fmp”這個指標；未接入的產品直接主觀判斷，超過 3 秒的視為不合格。
2. 可用性測試章
“可用性測試章”也在驗收階段執行，同樣有三個參評維度：最終完成率、人均求助次數和高阻礙頁面。
我們沒有考慮將可用性測試的常用指標——操作時長作為參評維度，主要原因是企業中后臺產品類型多、使用場景復雜程度各自不同：用語雀創建企業空間只需要 5 分鐘；用云鳳蝶搭建一個后臺頁面可能需要 60 分鐘，用 sofa stack 創建并發布一個應用可能需要 2-3 個小時……難以確定可以作為標準的具體操作時長。
3. 易用度分數
“易用度分數”標準為 5.5 分。
「兩章一分」的實踐
截至 2020 年 9 月，已有 58 個 產品實踐過“兩章一分”系列方法，基本覆蓋平臺設計團隊支撐的重點項目及 UV 超過 100 的產品。詳細數據如下圖：
完整體驗“兩章一分”的 18 個產品，僅可用性測試就幫助發現 364 個問題，平均每個產品發現 20 個問題；其中，“九州2.0 發布部署”發現問題數多達 53 個。
設計驗收：共創式驗收
企業中后臺產品生產階段中，由于一般沒有專門的測試同學，因此設計驗收都是由設計師或 PD 單獨執行，沒有作為必選環節，有時候甚至會因為開發周期緊張而直接略過；既沒有方法論，又缺乏儀式感。
“兩章一分”的實踐中，我們首次踐行“共創式驗收”，以項目組會議的方式，邀請各個角色共同參與到驗收環節中：如果產品沒有什么技術門檻，那么各個角色分別獨立操作核心流程；如果產品有一定的技術門檻，則由技術同學操作核心流程，同時共享屏幕，其他同學從旁觀察。操作完畢后，項目組內共同討論發現的體驗問題，并將問題落地到 Aone 中進行排期管理落地。
可用性測試：引入“技術支持”+圈定測試人數+ 線上測試降成本
企業中后臺產品通常有一定的技術門檻，以 SOFAstack的測試任務為例：
使用 sofaboot 技術棧，創建 “hello world” 應用，通過“經典版”發布部署模式發布成功。
測試過程中經常會出現一些涉及到底層技術系統的問題，非設計同學能解決，因此我們建議做企業中后臺產品的可用性測試時，需要配備至少一名技術支持同學，以備不時之需。
Jakob Nielsen 在 2000年提出測試 5 人就能發現 85%的可用性問題；結合我們的實際業務場景：有些產品真實客戶非常難找；前期“共創式驗收”已跑通核心主干流程；因此我們將測試人數限制為 3 人。
我們開始實操案例時，恰逢疫情期間，于是就引入了線上遠程測試的方式；后續實踐下來，發現遠程測試能在觀察、分析階段顯著降低執行成本。
通過釘釘或阿里郎發起視頻會議，邀請參加測試和觀察的同學入會，請測試用戶共享操作屏幕，主持人錄屏捕捉用戶操作軌跡，PD、技術等項目組成員從旁觀察。測試結束后，使用語音轉文本工具，快速將音頻轉成文字。這種模式最大的好處有兩點：
執行階段的多樣化
最開始提出“兩章一分”的時候，我們原本希望這套標準能被作為判斷產品體驗是否好用，能否上線的標準之一；但實際并未推動成功。這里面有很多原因，其中一個非常實際的問題是很多產品需要調用線上數據庫才能跑通核心流程，在測試階段沒法跑通；這就導致在測試階段做可用性測試無法真實還原用戶場景。
此外，設計師或 PD 新接手某款產品時，也希望能通過可用性測試的方式來快速了解產品問題?；貧w到“兩章一分”的初心——幫助產品發現體驗問題，因此，我們拓展了方法的執行階段，不再局限于測試或驗證階段，只要場景適合，都可以用。
產品簡介
LinkE 研發運維中心是云通未來 Serverless 戰場的重要產品；業務方希望用該產品來整合研發同學日常高頻使用的研發、運維、中間件平臺，大幅減少平臺割裂和跳轉，提供沉浸式的產品體驗。
目前該產品還處于 0-1 建設的階段。
實踐過程
結果用戶在任務 2 遇到高阻礙頁面，導致可用性測試結果為“不通過”，任務 2 的易用度分為僅 4.4 分，顯著低于 5.5 分的參考標準；最終發現 30+ 問題點，并推動 PD 思考產品邏輯設置是否合理。
實踐效果
在實踐過程中，我們發現企業中后臺產品的典型場景大致可以分為 4 個場景；不同場景面臨的設計項目有所偏重；不同設計項目在體驗度量方面的切入點也有所不同。譬如：云鳳蝶是一個典型的沉浸式畫布頁面，所有操作幾乎都是通過編輯器屬性面板來調整，那么如何來評估編輯器的效率呢？通過一系列實踐和思考，我們提出可以通過“高頻屬性查找、配置的步驟數和時間”、“設置相同組件屬性的耗時變化”等指標進行衡量。以下是我們根據不同典型場景、設計項目提出的體驗度量切入點。
「兩章一分」的未來
經過 S1 長達幾個月的探索：我們制定了“兩章一分”的標準；對 30+ 產品進行了易用度分數的測試，捕捉分數基線；提煉實操方法技巧，并賦能給各位設計師；聯合設計師和業務方跑通近 20 個案例。不管是問題發現數量，還是設計師、業務方的主觀反饋，都讓我們堅定“兩章一分”在企業中后臺產品體驗優化中是一個相對有效的模式。為此，S2 我們打算繼續深化。
我們團隊當前支持的企業中后臺產品以 0-1 階段產品為主，PD 通常缺少用戶意識和體驗優化手段，這就導致了設計稿還原度較差、產品上手門檻較高。針對這一現狀，我們嘗試性地提出了“兩章一分”這個評價標準，從設計驗收、可用性測試、易用度分數 3 個維度來評價產品當前的體驗現狀。
通過 S1 50+ 產品的實操，我們一邊不斷完善評價標準和實操經驗，一邊總結體驗度量經驗；共幫助 18 個產品發現 364 個產品，并在 link 、sofa 等重點產品線中落地到業務生產環節中，在業務方層面收到良好反饋。
在這過程中，我們總結了適合不同場景、不同設計項目的體驗度量切入點，驗證了這種方式在當前企業中后臺產品中確實有效。后續我們將嘗試細化標準，閉環案例，對內對外發聲等方式，更好地推動體驗思維在企業中后臺產品生根發芽；同時，也期待能跟對這塊感興趣的同行朋友們多多交流。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
你覺得設計系統重要嗎？那目前手里的設計系統是在靈活運用？還是落灰、擺設？你對設計系統理解有多深？它在你的設計中有多大的用處？節省時間、減少出錯率、視覺一致性還是僅僅覺得就應該有個規范？那怎么避免設計系統帶來了統一和便利，但同時失去了變化和新鮮感？
設計系統是今年來熱門的話題之一，想要帶來良好的用戶體驗，設計系統就是其中重要的一環，那它和設計規范、設計模式、設計語言、設計原則有什么關系？
設計系統用一套連貫組織、相互關聯的模式和共享實踐以達到數字產品的目的。簡單的說就是一系列可重用的組件和它們的使用指導文檔，在制作這些組件的過程中會考慮到公司的設計理論和品牌化(顏色，文案，字體等等)，所以它們也通常包括在設計系統里。設計系統為公司的各種產品提供了基石和指導。是一種動態的，是需要維護與改進的。
設計模式是一種經常性，可重復使用的解決方案，可用于解決設計問題，我們經常會說解決整個方案我們要運用什么樣的設計模式。
設計語言是把設計作為一種“溝通的方式”，用于在特定的場景中進行內容與信息的傳遞。設計語言可以理解為由品牌基因+設計規范+多場景應用三大要素組成的一套設計應用規范系統。
設計原則可以理解為設計語言中的語法，是構建設計語言系統的起點，用于傳達品牌主張或設計理念，它將指引業務設計執行的方向。
比如Airbnb的設計原則可以簡單歸納為幾點：
設計規范對于設計師來說并不陌生，日常工作中也經常使用。圍繞在某種風格或者大型設計項目下形成可視化、數據化的標準，針對相對獨立的體系建立的統一遵守條款。統一的設計規范不僅有利于設計師提升效率，同樣可以幫助產品、開發、運營、測試等相關人員對產品的體驗有更好的認知。
我曾經加入一個設計團隊，看到平臺風格不統一，當時很自豪很堅定的制定了一套平臺設計規范，從色彩體系、文字體系、icon體系、botton體系以及其他的一些UIKIT體系，還有交互方面。當時一心想著有這個規范寶典在手，平臺統一性指日可待，沒想到這個規范就成了我自己的規范，僅僅是我在自嗨。
為什么已經建立設計規范了，還是沒能解決平臺統一的問題？這里延伸出另一個問題，為什么其他設計成員不用？協作不起來？是它不夠好？我嚴格按照標準來，為什么推不起來？
那要追溯到設計體系的目的是什么？它的意義何在？
1-建立統一的設計文化體系
2-保證多團隊成員共同參與的項目視覺一致性
3-提升品牌調性
4-節省與研發人員的溝通成本
5-將元素組件化，提升設計師和程序員的工作效率
6-可以幫助設計人員有針對性地對視覺元素進行優化和迭代。
7-在用戶層方面，對某產品的體驗一致性得到落實
8-減少設計出錯率
……
整體可以歸納為
規范定義的基礎是圍繞某種風格或者設計文化。對內統一，一個品牌的設計風格，是要有別于同類競品的，比如阿里云、騰訊云，他們各自都有自己的品牌調性。在對外上兩個品牌是做到了對外區分，一眼可以識別出來。他們有各自規定的一套設計語言、設計規范。這樣才能在協作上達到對內統一。我們都不希望在阿里云的網站，各個頁面的設計差異明顯，像跳轉到其他平臺。而這些針對用戶層一致性都是非常重要的體驗。
多個設計成員協同一個產品，迭代與更改規范都能更快的同步?？梢栽囍胂笠幌乱粋€幾十人的設計團隊，如果沒有統一設計規范，那網站會變成什么樣子。
在UI還原中，設計需要經常與前端進行溝通“這里這里這樣做，那里那里這樣做”，對于每一塊的設計，前端都會詢問你，這樣大大增加了溝通的成本，把時間花在了無效的事情上。
設計規范統一后，減少了無效溝通，可以更專注創新方向，比如：要改變預先設定的一個輔助色，無論是設計還是開發，修改組件的顏色，全局使用到這個組件的地方都會改動，大大節省了設計時間。
做品牌的時候需要制定一整套VI規范手冊，那平臺同樣也需要統一的品牌感。建立統一的文化體系可以讓用戶無論處在哪個頁面都會有熟悉感、掌握感。統一的元素、視覺風格、交互方式，更加突出該品牌應有的調性。無論你在聽網易云音樂還是QQ音樂，看到界面都可以立馬識別出這是哪個app。
你能分出哪個是網易云播放界面，哪個是QQ音樂播放界面嗎？
設計經常碰到設計完后需要修改一個點，然后就要找出設計稿中所有相同的地方進行修改，這樣很容易漏，統一規范后只需要修改組件即可。盡可能的避免錯誤的出現。
設計規范的意義這么強大，對網站及品牌有至關重要的作用，那為什么還會出現沒有應用起來的情況呢？
很多設計師會說：“設計不就應該是變化多端的嗎？就是要表現創新力呀？制定了設計規范是不是就失去了變化和新鮮感？那設計還有什么意義？開發都可以做設計的事情了?！?
這里就要看對設計規范理解的深度—設計規范是分層次的，平臺規范歸根結底是為了確保產品的易用性，是為了減少用戶的學習成本
底層基礎元素也可以說是全局樣式，比如色彩規定、文字大小、icon線/面、botton體系等一些基礎的元素，給用戶一種統一的視覺形象，在跨界面、跨端、跨系統間有熟悉感，從而潛移默化地進行品牌的滲透。
對組合自由度較低的基礎組件做精簡的樣式變化限定，對組合自由度較高的復合組件減少過于局限的限定條件，考慮各種拓展的可能性。組件在制定過程中要考慮多種狀態，多種可能。
設計規范是需要迭代的，而不是我只要制作出來就放那了，就像女生買衣服，去年的衣服已經配不上今年的我，嘻嘻
~~希望我每天都有新衣服穿，做夢中～
設計體系最大的重要性毋庸置疑就是規范節省人力，設計師可以更多的時間去發揮創造性。
很多設計師覺得統一了規范，那我的創造性從哪發揮，界面都長的差不多。在設計中，設計目的是解決商業或用戶的問題，并不僅僅是為了有創意而引入新的樣式或交互方式。
有了設計體系，統一了整體品牌風格，不用把精力花費在比如調整間距、對齊元素等瑣碎的事情上，更多的回去關注更全局的設計策略。
它僅僅是設計軟件上可復用的組件，所以可由設計師獨立完成，這種想法是錯誤的，是需要來自不同角色支持和參與的，這里包括前端、品牌、動態設計、 用戶研究等。
有時候會想只要完成了規范就大功告成了，其實不然，對待設計規范就像對待產品一樣，是需要維護和改進的，包括兩個方面：一種是對內部使用的開發以及同事，一種是對用戶的，應該定期收集用戶以及同事的反饋，確保及時更新迭代。
1-提高設計開發效率，最顯而易見的好處就是，組件庫的可復用性。
比如像表格、彈窗、顏色等。一些基礎的組件只需要做一次。
2-確保設計一致性，為用戶提供連貫一致的用戶體驗，設計的一致性讓用戶能縮短的學習使用產品的周期，讓他們能夠預見他們的操作所帶來的改變。
網站統一的視覺規范、交互體驗，會讓用戶產生一種掌控感。
3-設計系統促進了公司內部的合作和交流，一個成功的設計系統是需要跨功能團隊參與，設計系統因此促進了公司內部不同職位的合作和交流，這種文化的建立也會幫助公司更有效地推出新的產品或服務。
已經了解了規范的目的/意義，那該怎么去著手呢？
在制定規范前期，不應該是一個人規定這個規范，設計團隊的成員應積極參與，前期先把規范的基調定好，人人都參與進來了，規范也就能更好的運營，當時我就是一個人定了規范，只是單純把規范發給其他設計人員，他們沒有參與，自然不會使用規范，對里面的設計元素沒有加深理解。
這個主導人建議讓全隊專業能力最強的人輔助產品戰略分析進行。有全局把控能力，這樣能把紕漏降到。
大家一般說的設計規范是界面的視覺規范，從UI的定義，User Interface—用戶界面，用戶與界面之間的交互關系，可以歸納規范其實可以包含兩大類，一類是視覺規范，一類是交互規范。
視覺規范可以給用戶傳達統一的品牌形象，確保視覺一致性。后期的設計元素須復合規范的原則。
交互規范可以減少用戶的學習成本，讓用戶有歸屬感。交互規范在制定的過程中，需要寫好交互規則與條件，不然后期維護會混亂。像蓋房子一樣，地基都沒打穩的話，整個樓都是偏的。
那在使用規范時，一定要遵循規范里的要求進行應用，否則會亂套，不僅起不到統一的品牌風格，反倒會給人一種一團糟、完全不專業的感覺。體驗好是一個產品的競爭力。
節點和公司的進度搭邊，看當前的產品是應該先獨立風格還是先統一基礎規范。
1-固定的設計風格規范，比如：google的“扁平”，微軟的“磁貼”，可以全局使用，并且時間保持的相對長久。這些設計風格在前期就完成了獨立與其他風格的區分。后期再進行拓展。這種比較適規模比較大的團隊，定好基調，不會走偏。
2-不斷優化的設計規范，根據公司的節奏，有些產品目前比較迫切的是需要界面統一性、交互統一性?；A做完以后，進而考慮產品固定風格。這種比較適合小團隊協作?？梢噪S時調整。
利用粒子構成的原理與三維解構，一個組件被科學的三維解析后由粒子再構成，理論上幾乎能夠滿足所有的UI樣式需求。這樣所有組件構成元素都可變，高度靈活
建立單個元素——設立簡單組件——構成復雜組件——形成模板——最后組成頁面。
并不是每個時刻都能夠直接使用完整的組件，元素是我們工具庫必不可少的部分，它可以更大的方便你修改組件，再造組件以及特殊的排版，方便拖拉拽。
規范組件命名，方便查找、方便協作。
一鍵導出/同步組件到Sketch模板。
標注方面，目前我們團隊使用的是藍湖私有化。
一般情況下，公司有不同的產品線，且都需要長期的開發與迭代。
公司中，越來越多的設計師加入，設計風格需要統一。
設計體系里面包含了設計語言、設計規范，需要與前端、品牌、動態設計、 用戶研究等溝通，還是需要迭代優化的，這是非常繁瑣耗時的項目，初期會非常的艱難，當設計師開始做組件時，也是非常耗時的工作，需要考慮不同場景下的使用情況以及設計的延展性，都需要投入大量的設計人力。
聊了這么多，大家對設計系統有了一定了解，建立好設計系統可以事半功倍，以此提升效率才能提升UED價值。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天早上，權威色彩機構 Pantone 公布了2021年度雙流行色：灰+亮麗黃。
這是繼2016年水晶粉+寧靜藍之后，第二次推出組合年度色，寓意光明，傳遞力量與希望。
灰+亮麗黃這兩個獨立的色彩，聯手打造出夢寐以求的色彩組合，像是自然風化的巖石上浮起的日出，帶來了一種更深層的體貼和踏實感，同時也表現了對未來充滿希望的樂觀精神。
這正是經歷過艱難的2020年后，世界所需要的。
PANTONE 17-5104 Ultimate Gray是海灘上的鵝卵石和自然元素的顏色，其風化的外觀彰顯了經得起時間考驗的能力，象征著堅實而可靠，體現了恒久不渝的感覺。
PANTONE 13-0647 Illuminating則是充滿活力的明亮歡快黃色，是充滿陽光的溫暖黃色陰影。
灰與亮麗黃的雙流行色組合，突顯不同的元素如何互相支持，寓意著陽光和友善，凝聚了更深程度的體貼感。
這個色彩組合實用又穩固，溫暖又樂觀，為我們帶來韌性和希望。
Jil Sander Pre-Fall 2021
當人們期望尋求能量來強化自己，克服持續的不確定感時，堅實可靠而又熱情洋溢的色調，恰好能夠滿足我們對生命力的追求。
在過去幾年里，潘通的選擇充滿了社會意義，被看作是對全球情緒的捕捉。
而在經歷了記憶中最黯淡的一年之后，2021年的組合色旨在以堅韌的精神基底傳遞積極和幸福即將到來的訊息，給人們帶來希望，讓人感到一切都將變得更加光明。
Prada 2021SS
持久耐看的灰和生動活潑的亮麗黃，聯手表達出我們所需要的堅韌的正向態度。
這種力量與正向的結合，是一種結合了洞察力、創新和直覺，以及對智慧和經驗尊重的顏色。
它啟發了重生的能力，推動我們前進，邁向新的思考方式與新觀念，最能代表 Pantone 2021年度代表色的精神。
針對這組雙流行色，Pantone 還推出了5種不同的官方配色系列，表現灰和亮麗黃的多功能性，以幫助大家更好地理解和應用。
AVIARY 鳥舍
▼
【鳥舍】是生動活潑，令人愉悅的色彩組合，有著異想天開的獨特性和極強的爆發力。
持久耐看的灰帶來屬于大自然基本元素的顏色，溫暖樂觀、充滿活力的亮麗黃為色彩組合注入更多能量，高雅的云端舞者白則為系列注入戲劇感。
ENLIGHTENMENT 啟蒙
▼
【啟蒙】是一個面對未來、年輕的色彩故事，喚起一個催眠的空間，將我們的心靈延伸到另一個界域，激發出我們重新開始想象的渴望。
灰與亮麗黃的配比，融合了智慧、經驗以及我們想要前進，邁向新的思考方式與發掘新的深刻見解的渴望。
與此同時，銀金屬色的鉛水晶則增添一絲閃爍的月夜光澤。
INTRIGUE 魅惑
▼
【魅惑】是一個迷人的色彩百匯，擁抱各種影響因素的大融合。一方面流露奇特又強烈的個人主義風格，同時又顯示一種大眾化的吸引力。
其四季皆宜的持久性，在加入穩定可靠的 P灰與象征陽光的亮麗黃之后被突顯出來。
ORBITAL 軌道
▼
【軌道】反映了探索星際旅行的狂熱，是在令人著迷的外太空星系中發現的閃爍著金屬色調的調色板，能讓人聯想到遙遠的星系。
SUN AND SHADOW 光影
▼
【太陽與陰影】是一種永恒而無性別的色彩組合，描述著我們周圍的原始之美?；液土聋慄S為大地色系注入更多的希望和力量，將今年的雙色年度色的特殊韻味發揮到。
除了這五組配色之外，Pantone 還推出了一系列灰+亮麗黃的色彩營銷案例。
色彩營銷案例
可以預見，在接下來的一年里，我們會更多地看到這些色彩，因為它們意味著對時代精神的內在定義，傳達著消費者的期望與態度。
現在，咱們就先來康康這組能夠引起全球共鳴色彩的無限可能吧！
時尚領域
Agatha Ruiz de la 2021SS
Prada 2021SS
Alice + Olivia 2021SS
友善、愉悅又樂觀的亮麗黃，是一種年輕個性的色彩，明媚肆意，預示著陽光燦爛的一天即將到來，讓人忍不住想要親近。
把亮麗黃帶入服飾中，可以給整個造型增加一種明亮感。
Alexander Mcqeen 2021SS
Brandon Maxwell 2021SS
灰有著洗凈鉛華的淡然與不爭，它游離于所有顏色的邊緣，卻能與任何色彩作搭配。彰顯著低調內斂的品質感和恰到好處的高級感。
Prada 2021SS
將灰與亮麗黃相結合，給低調耐看的灰加入一些明亮感，可以帶來一種另類吸引力，傳達出陽光與力量的訊息。
除了服飾之外，灰和亮麗黃還經常出現在圍巾、鞋履、包袋、披肩等配飾上，產生一種奪目的搭配效果。
美妝領域
灰與亮麗黃是熱色調與冷色調的混搭，運用在美妝領域可以營造戲劇化的風格。
家居裝飾領域
灰與亮麗黃的組合，非常適合用來為家里任意一個房間的氣氛定調，增添一絲陽光與正面的氣息。
黃色往往作為家具家居上的提亮高光色，而灰色則會被設計成基底色，常出現在水泥家具或地板中的顏色。
將亮麗黃與灰并用在桌布、床單及家飾品包括枕頭與桌上擺飾會帶來生機與活力。
以灰做為扎實的基礎，襯托吸引注意、強化直覺、活潑的亮麗黃，是位于家中或商業空間的任何辦公室最理想的色彩組合，點亮通往開放心靈，尋找追求知識的欲望、原創力及豐富智謀的路徑。
把大門涂上亮麗黃色，并在外側加工時用上穩固可靠的灰，可以傳達著溫暖歡迎的訊息。
包裝設計領域
將擁有最高可見度與反光度的亮麗黃搭配堅韌的灰，不論出現在何處都能引起注目。
結合友善的亮麗黃與默默令人安心的灰，應用在裝置設計上，為可靠、智慧與經驗的扎實基礎，注入一股活力。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
| 圖片源自Dribble @Bhavna Kashyap
短時記憶又稱感覺記憶，保存時間短暫，如果信息得不到及時復述，大概只能保持15-20秒鐘，對用戶而言反復復述數據是很痛苦的一件事，所以對比表單和折線圖，用戶從折線圖中記住起起落落比記住確切的數字要容易的多。
儀表盤提供了關鍵數據的概覽信息，這樣可以直觀展示數據，減少信息短時記憶的負載。如果用戶需要有關特定數據集的詳細信息，可以選擇向下鉆取，得到更多的關聯信息。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
你覺得設計系統重要嗎？你了解設計系統嗎？讓我們一起來深度解析下設計系統，預計閱讀時間為15分鐘
你覺得設計系統重要嗎？那目前手里的設計系統是在靈活運用？還是落灰、擺設？你對設計系統理解有多深？它在你的設計中有多大的用處？節省時間、減少出錯率、視覺一致性還是僅僅覺得就應該有個規范？那怎么避免設計系統帶來了統一和便利，但同時失去了變化和新鮮感？
設計系統是今年來熱門的話題之一，想要帶來良好的用戶體驗，設計系統就是其中重要的一環，那它和設計規范、設計模式、設計語言、設計原則有什么關系？
設計系統用一套連貫組織、相互關聯的模式和共享實踐以達到數字產品的目的。簡單的說就是一系列可重用的組件和它們的使用指導文檔，在制作這些組件的過程中會考慮到公司的設計理論和品牌化(顏色，文案，字體等等)，所以它們也通常包括在設計系統里。設計系統為公司的各種產品提供了基石和指導。是一種動態的，是需要維護與改進的。
設計模式是一種經常性，可重復使用的解決方案，可用于解決設計問題，我們經常會說解決整個方案我們要運用什么樣的設計模式。
設計語言是把設計作為一種“溝通的方式”，用于在特定的場景中進行內容與信息的傳遞。設計語言可以理解為由品牌基因+設計規范+多場景應用三大要素組成的一套設計應用規范系統。
設計原則可以理解為設計語言中的語法，是構建設計語言系統的起點，用于傳達品牌主張或設計理念，它將指引業務設計執行的方向。
比如Airbnb的設計原則可以簡單歸納為幾點：
設計規范對于設計師來說并不陌生，日常工作中也經常使用。圍繞在某種風格或者大型設計項目下形成可視化、數據化的標準，針對相對獨立的體系建立的統一遵守條款。統一的設計規范不僅有利于設計師提升效率，同樣可以幫助產品、開發、運營、測試等相關人員對產品的體驗有更好的認知。
我曾經加入一個設計團隊，看到平臺風格不統一，當時很自豪很堅定的制定了一套平臺設計規范，從色彩體系、文字體系、icon體系、botton體系以及其他的一些UIKIT體系，還有交互方面。當時一心想著有這個規范寶典在手，平臺統一性指日可待，沒想到這個規范就成了我自己的規范，僅僅是我在自嗨。
為什么已經建立設計規范了，還是沒能解決平臺統一的問題？這里延伸出另一個問題，為什么其他設計成員不用？協作不起來？是它不夠好？我嚴格按照標準來，為什么推不起來？
那要追溯到設計體系的目的是什么？它的意義何在？
1-建立統一的設計文化體系
2-保證多團隊成員共同參與的項目視覺一致性
3-提升品牌調性
4-節省與研發人員的溝通成本
5-將元素組件化，提升設計師和程序員的工作效率
6-可以幫助設計人員有針對性地對視覺元素進行優化和迭代。
7-在用戶層方面，對某產品的體驗一致性得到落實
8-減少設計出錯率
……
整體可以歸納為
規范定義的基礎是圍繞某種風格或者設計文化。對內統一，一個品牌的設計風格，是要有別于同類競品的，比如阿里云、騰訊云，他們各自都有自己的品牌調性。在對外上兩個品牌是做到了對外區分，一眼可以識別出來。他們有各自規定的一套設計語言、設計規范。這樣才能在協作上達到對內統一。我們都不希望在阿里云的網站，各個頁面的設計差異明顯，像跳轉到其他平臺。而這些針對用戶層一致性都是非常重要的體驗。
多個設計成員協同一個產品，迭代與更改規范都能更快的同步?？梢栽囍胂笠幌乱粋€幾十人的設計團隊，如果沒有統一設計規范，那網站會變成什么樣子。
在UI還原中，設計需要經常與前端進行溝通“這里這里這樣做，那里那里這樣做”，對于每一塊的設計，前端都會詢問你，這樣大大增加了溝通的成本，把時間花在了無效的事情上。
設計規范統一后，減少了無效溝通，可以更專注創新方向，比如：要改變預先設定的一個輔助色，無論是設計還是開發，修改組件的顏色，全局使用到這個組件的地方都會改動，大大節省了設計時間。
做品牌的時候需要制定一整套VI規范手冊，那平臺同樣也需要統一的品牌感。建立統一的文化體系可以讓用戶無論處在哪個頁面都會有熟悉感、掌握感。統一的元素、視覺風格、交互方式，更加突出該品牌應有的調性。無論你在聽網易云音樂還是QQ音樂，看到界面都可以立馬識別出這是哪個app。
你能分出哪個是網易云播放界面，哪個是QQ音樂播放界面嗎？
設計經常碰到設計完后需要修改一個點，然后就要找出設計稿中所有相同的地方進行修改，這樣很容易漏，統一規范后只需要修改組件即可。盡可能的避免錯誤的出現。
設計規范的意義這么強大，對網站及品牌有至關重要的作用，那為什么還會出現沒有應用起來的情況呢？
很多設計師會說：“設計不就應該是變化多端的嗎？就是要表現創新力呀？制定了設計規范是不是就失去了變化和新鮮感？那設計還有什么意義？開發都可以做設計的事情了?！?
這里就要看對設計規范理解的深度—設計規范是分層次的，平臺規范歸根結底是為了確保產品的易用性，是為了減少用戶的學習成本
底層基礎元素也可以說是全局樣式，比如色彩規定、文字大小、icon線/面、botton體系等一些基礎的元素，給用戶一種統一的視覺形象，在跨界面、跨端、跨系統間有熟悉感，從而潛移默化地進行品牌的滲透。
對組合自由度較低的基礎組件做精簡的樣式變化限定，對組合自由度較高的復合組件減少過于局限的限定條件，考慮各種拓展的可能性。組件在制定過程中要考慮多種狀態，多種可能。
設計規范是需要迭代的，而不是我只要制作出來就放那了，就像女生買衣服，去年的衣服已經配不上今年的我，嘻嘻
~~希望我每天都有新衣服穿，做夢中～
設計體系最大的重要性毋庸置疑就是規范節省人力，設計師可以更多的時間去發揮創造性。
很多設計師覺得統一了規范，那我的創造性從哪發揮，界面都長的差不多。在設計中，設計目的是解決商業或用戶的問題，并不僅僅是為了有創意而引入新的樣式或交互方式。
有了設計體系，統一了整體品牌風格，不用把精力花費在比如調整間距、對齊元素等瑣碎的事情上，更多的回去關注更全局的設計策略。
它僅僅是設計軟件上可復用的組件，所以可由設計師獨立完成，這種想法是錯誤的，是需要來自不同角色支持和參與的，這里包括前端、品牌、動態設計、 用戶研究等。
有時候會想只要完成了規范就大功告成了，其實不然，對待設計規范就像對待產品一樣，是需要維護和改進的，包括兩個方面：一種是對內部使用的開發以及同事，一種是對用戶的，應該定期收集用戶以及同事的反饋，確保及時更新迭代。
1-提高設計開發效率，最顯而易見的好處就是，組件庫的可復用性。
比如像表格、彈窗、顏色等。一些基礎的組件只需要做一次。
2-確保設計一致性，為用戶提供連貫一致的用戶體驗，設計的一致性讓用戶能縮短的學習使用產品的周期，讓他們能夠預見他們的操作所帶來的改變。
網站統一的視覺規范、交互體驗，會讓用戶產生一種掌控感。
3-設計系統促進了公司內部的合作和交流，一個成功的設計系統是需要跨功能團隊參與，設計系統因此促進了公司內部不同職位的合作和交流，這種文化的建立也會幫助公司更有效地推出新的產品或服務。
已經了解了規范的目的/意義，那該怎么去著手呢？
在制定規范前期，不應該是一個人規定這個規范，設計團隊的成員應積極參與，前期先把規范的基調定好，人人都參與進來了，規范也就能更好的運營，當時我就是一個人定了規范，只是單純把規范發給其他設計人員，他們沒有參與，自然不會使用規范，對里面的設計元素沒有加深理解。
這個主導人建議讓全隊專業能力最強的人輔助產品戰略分析進行。有全局把控能力，這樣能把紕漏降到。
大家一般說的設計規范是界面的視覺規范，從UI的定義，User Interface—用戶界面，用戶與界面之間的交互關系，可以歸納規范其實可以包含兩大類，一類是視覺規范，一類是交互規范。
視覺規范可以給用戶傳達統一的品牌形象，確保視覺一致性。后期的設計元素須復合規范的原則。
交互規范可以減少用戶的學習成本，讓用戶有歸屬感。交互規范在制定的過程中，需要寫好交互規則與條件，不然后期維護會混亂。像蓋房子一樣，地基都沒打穩的話，整個樓都是偏的。
那在使用規范時，一定要遵循規范里的要求進行應用，否則會亂套，不僅起不到統一的品牌風格，反倒會給人一種一團糟、完全不專業的感覺。體驗好是一個產品的競爭力。
節點和公司的進度搭邊，看當前的產品是應該先獨立風格還是先統一基礎規范。
1-固定的設計風格規范，比如：google的“扁平”，微軟的“磁貼”，可以全局使用，并且時間保持的相對長久。這些設計風格在前期就完成了獨立與其他風格的區分。后期再進行拓展。這種比較適規模比較大的團隊，定好基調，不會走偏。
2-不斷優化的設計規范，根據公司的節奏，有些產品目前比較迫切的是需要界面統一性、交互統一性。基礎做完以后，進而考慮產品固定風格。這種比較適合小團隊協作。可以隨時調整。
利用粒子構成的原理與三維解構，一個組件被科學的三維解析后由粒子再構成，理論上幾乎能夠滿足所有的UI樣式需求。這樣所有組件構成元素都可變，高度靈活
建立單個元素——設立簡單組件——構成復雜組件——形成模板——最后組成頁面。
并不是每個時刻都能夠直接使用完整的組件，元素是我們工具庫必不可少的部分，它可以更大的方便你修改組件，再造組件以及特殊的排版，方便拖拉拽。
規范組件命名，方便查找、方便協作。
一鍵導出/同步組件到Sketch模板。
標注方面，目前我們團隊使用的是藍湖私有化。
一般情況下，公司有不同的產品線，且都需要長期的開發與迭代。
公司中，越來越多的設計師加入，設計風格需要統一。
設計體系里面包含了設計語言、設計規范，需要與前端、品牌、動態設計、 用戶研究等溝通，還是需要迭代優化的，這是非常繁瑣耗時的項目，初期會非常的艱難，當設計師開始做組件時，也是非常耗時的工作，需要考慮不同場景下的使用情況以及設計的延展性，都需要投入大量的設計人力。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
距離iPhone 12系列發售已經有段時間。
之所以沒第一時間撰文，是因為 iPhone 12 mini 和 iPhone 12 Pro Max 要在11月13日才正式發售。
而在此之前，即便是Apple線下店也沒有樣機。
保險起見，我等接觸到 Mini 和 Max 真機后，開始著手撰文。
一周前完成了文字部分，本周終于完成了幾十張配圖，這才和大家見面。
為了方便新同學更好的了解本文內容，我會簡單提及一些關于適配的必要信息。
并附上往期內容的鏈接，方便延展翻閱。
本文約3200字，分以下六個部分：
在網絡上搜索手機界面適配的相關內容。常會看到文中提及以下幾個參數：比如屏幕分辨率（物理分辨率）、屏幕尺寸、PPI數值…
其實，在處理常見手機界面適配時，設計師只要關注以下3個基本參數：渲染像素（Pixel）、邏輯像素（Point）、 倍率（Scale）
渲染像素（Pixel）可以理解為是手機截屏時所得到的圖片尺寸，單位是px；
邏輯像素（Point）可以理解為是程序員在用代碼繪制頁面時所用的尺寸，也被叫做“1倍圖尺寸”。比如Sketch中對應的機型尺寸
對應的就是手機的邏輯像素尺寸。
倍率（Scale）因為邏輯像素和渲染像素存在著一定的比例關系，這種比例通常被稱為倍率，比如切圖后綴的@2x、@3x對應的就是倍率的數值。
值得一提的是，倍率不一定是整數，比如三星GALAXY J2（540×960），倍率是@1.5x；
華為M3 Life 8.0”（1920×1200）的倍率則是@2.25x
適配方式主要有兩種：
1. 倍率適配
主要應用在邏輯像素相同，但倍率不同的設備。
比如iPhone 11適配到 iPhone 11 Pro Max
兩個適配的邏輯像素都是 414 x 896pt，但倍率不同，前者是@2x、后者是@3x。
2. 邏輯像素適配
這種適配方式應用在兩個倍率相同，但邏輯像素不同的設備，
比如iPhone 11 到iPhone 8：
兩個設備的倍率都是@2x，邏輯像素則分別是：414 x 896pt 和 375 x 667pt。
如果兩個設備的倍率和邏輯像素都不相同，比如iPhone 8 到 iPhone 11 Pro Max
那通常會先進行邏輯像素適配，再進行倍率適配。
由于倍率適配相對簡單，只需要考慮分割線和切圖這兩個因素。
因此，設計師通常說的手機適配、尺寸適配常指邏輯像素適配。
所以搞清楚iPhone有哪幾種邏輯像素，就成了iPhone適配和驗收的關鍵。
在今年10月份發布的iPhone 12系列共有四部機型。
在談新設備前，我們先簡單回顧截止iPhone 11系列時，iPhone的幾款主流機型及其對應的參數：
通過圖表可知，在iPhone 12發布前，市面上的iPhone共有6種不同的分辨率需要完成適配。
那么iPhone 12又帶來哪些變化呢？
從官方給出的屏幕數據可知，四款設備的物理像素如下：
由圖可知，今年iPhone共新增了3種全新的屏幕尺寸。（其中iPhone 12和iPhone 12 Pro的物理分辨率相同，故合并看待）
但在設計層面，iPhone 12系列四款手機，只為設計師增加了1170×2532、1284×2778 兩種新的設計尺寸。
畫重點：目前有一些文章，錯把iPhone 12 mini的屏幕參數1080×2340當做最終的繪圖尺寸，認為12 mini的邏輯像素為360x780pt 。
事實上iPhone 12 mini采用了iPhone X一樣的渲染像素，即1125 x 2436px，對應的邏輯像素是375x812pt。
為了解釋這個問題，得從大家比較熟悉的iPhone Plus系列手機說起。
在前文提到，手機界面適配時，設計師只要關注：渲染像素（Pixel）、邏輯像素（Point） 以及倍率（Scale）這三個基本參數。
而其中的渲染像素通常會和屏幕的物理像素保持一致，比如常見iPhone 8、iPhone XS、iPhone 11 Pro都是如此。
這也導致大家很容易把物理像素和渲染像素混為一談。
但既然說了是“通常會保持一致”，就總會有例外。
比如iPhone Plus系列，官方給出的屏幕參數（物理像素）是1080×1920，但渲染像素卻是1242×2208。
所以設計師在針對Plus系列做圖的時候，就得按照1242×2208進行輸出。
而新款iPhone 12 mini的情況和Plus系列一樣：
官方給出的物理像素尺寸是1080×2340 ，但拿到設備真機后，通過測量可知12 mini采用的渲染像素是1125×2436，這和iPhone X的渲染像素保持一致。
在明確這一點后，我們再看下iPhone 12系列設備的參數：
如果我們只看邏輯像素，加上iPhone 12系列，目前iPhone 共有7種尺寸。
這些尺寸都需要設計師留心，并完成相關機型的驗收走查。
不過，到這里還沒完?？紤]到iPhone存在“標準”和“放大”兩種模式的視圖。
還需要將放大模式的尺寸考慮在內。
目前各個設備的放大模式對應的適配三要素分別如下：
其中320x693pt是全新的尺寸，出現在12 mini、12、12 Pro這三款設備中。
由此，在把放大模式納入適配考量范圍后，iPhone的邏輯像素共統計出8種尺寸。
如果將其中最小尺寸和最大尺寸比較寬高的話，寬度相差了108pt、高度相差了358pt
對于那些橫滑需要外露一部分的頁面，需要重新設計尺寸或調整局部的適配方案。
這對于一些單屏顯示的頁面而言，也是件麻煩事。
先思考一個問題，在下面幾個尺寸的iPhone中，你覺得哪一種尺寸的iPhone在市面上占比最高？
在 iPhone 12發布之前，在iPhone這幾種屏幕尺寸中，你覺得哪一種iPhone的市場占有率最大？
我相信絕大多數設計師，都會下意識覺得750×1334這個尺寸的機型占比最多。畢竟在過去很多年里，大家都是用這個尺寸在做圖。
那實際情況究竟如何呢？
我們先看下阿里友盟今年05月01日的數據：
PS：數據公司按設備的物理分辨率進行統計，而非渲染像素。所以這里的1920×1080對應的是Plus系列手機。
今年五月，國內iPhone占比最高的機型是Plus系列。而設計師鐘愛的750×1334 和 1125×2436分別排在第二和第三。
其中排在第三的1125×2436（對應@2x的設計尺寸是750×1624）和前兩者的占比仍有較大的差距。
那是不是隨著時間的推移，1125×2436的機型占比會逐漸增大，并逐漸占據第一呢？
如果你也有同樣的想法，恐怕又得失望了。
翻看5月份的iPhone增量數據，會發現一個有意思的情況：
在增量中，828×1792（對應iPhone 11）增速以51.9%遙遙領先第二名的1125×2436。
下面，看下的11月統計的iPhone存量數據：
828×1792已經從占比第四名上升到了第三名，
再看11月份的增量數據：
828×1792的增速不減反增，從5月份的51.9%增加到了最近的63.8%
如果不考慮的iPhone 12系列，828×1792有望接替Plus系列，成為市場占比最大的iPhone尺寸。
在828×1792的設備飛速增長的同時，1125×2436這個尺寸的設備增速卻在不斷下降。已經從5月份的27.8%降到了現在的10.2%
過去設計師常用的設計師尺寸是750×1334，但隨著iPhone進入全面屏時代，如果再把750×1334作為設計的基準尺寸顯然已經不合時宜。
而目前常用的750×1624尺寸對應的機型（對應1125×2436在@2x下的尺寸）無論在存量市場中的占比，還是增量市場中的占比都少的可憐。
而新發售的iPhone 12系列中，也只有12 mini采用了1125×2436作為渲染像素的尺寸。而其余三款，采用全新的渲染像素和邏輯像素。
很難想象1125×2436這個尺寸的設備，還能和過去的750×1334尺寸一樣，成為iPhone主流的分辨率尺寸……
設計基準尺寸的選擇，除了要看設備的占有率，還要兼顧適配的成本。比如，當有大中小三種尺寸的設備需要設計時，優選中間尺寸作為基準尺寸。
以中間尺寸為基準，無論是適配到小尺寸、還是適配到大尺寸，界面的調整幅度都是最小的，偏差不會太大。
反之，如果選擇小或大作為基準，或許頁面適配到中間尺寸時感覺還行，但適配到另一側相對極端的尺寸時，則容易出問題。
界面設計師所用的繪圖基準尺寸并非一成不變。回看過去：
設計師用的基準尺寸已經從最初的640×960、變成640×1136、再到750×1334，以及現在的750×1624，已經變化了4次。設計師幾乎每隔兩年就會隨著新iPhone的發布調整一次設計尺寸。如今隨著iPhone 12的發布，加上750×1624對應機型在市場中占比的低迷，我們可以重新思考在iPhone眾多尺寸中，哪一款更適合作為設計的基準尺寸。
這里先不考慮設計師對尺寸的慣性依賴，只思考適配兼容性和市場占有率這兩方面。適配兼容性，按照“大中小”優選中間尺寸這一原則。我們可以很容易的在目前8種iPhone的尺寸（指邏輯像素）中選出位于中間的尺寸：
分別是 375x812pt 以及390x844pt，前者對應1125x2436px ，后者則對應1170x2532px，如果進一步將其轉換成大家熟悉的@2x尺寸，則分別對應：750×1624和780×1688
在市場占有率層面，隨著Apple逐漸停售之前的設備，新款iPhone的分辨率占領市場只是時間問題。而在新設備中，只有iPhone 12 mini這一款設備采用大家熟悉的1125x2436px（375x812pt，對應@2x下尺寸750x1624px）。如果按照此前的經驗推算，iPhone 12（1170×2532）接替iPhone 11（828×1792）成為最熱賣且占比最高的設備只是時間問題。
截止iPhone 12發布為止，顯然 390x844pt （對應@2x下尺寸780x1688px）更適合作為今后的設計基準尺寸。
文章來源：優設 作者：海邊來的設計師
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
復雜應用大多情況下是偏專業和B端的一些UI界面，它們大多出現在桌面端使用環境，并且終端用戶類型多樣，涉及流程、鏈條、業務也大多呈現出多變復雜的特征。這篇文章，來自UX設計領域的存在NNGroup，作者為凱特·卡普蘭。
我們之前將「復雜應用」界定為特定專業領域當中，需要經過廣泛培訓之后使用的，有著非結構化目標、非線性工作流程的任何應用程序。這個概念可能聽起來有點抽象，不過這么說你可能會 更容易理解：從科學研究到專業人員，諸如金融分析師，它們常用的那些專業軟件應用。這類應用通常有著這些特點：
盡管不同的復雜應用之間差異很大，但是他們的共同點是，專業的從業人員對于這類工具有著極強的依賴性。
考慮到設計師和開發者在面對這類工具的時候的挑戰，我梳理總結了 8 個復雜應用的設計原則和指南。
很多研究表明，對于復雜的應用和工具，用戶更加青睞可以立刻上手開始使用而不受它復雜度影響的那類工具。
與大量的教程、文檔、幫助和設置說明相比，能夠立刻開始的任務和項目，對于用戶有著莫大的吸引力。這種現象被稱為「活躍用戶悖論」。
雖然在專業領域當中，倚靠摸索和試錯學習是不恰當也不安全的，但是一定程度的邊做邊學是必須的，因為不可能在培訓和手冊當中涵蓋所有的使用場景。
所以，在設計的時候應該提供「跳過教程」的直接上手的偏好設置，同時進行相應的安全性設置，避免新手的莽撞操作導致損失。比如可以限制這個階段的用戶執行長流程多任務的操作，讓控制面板實時顯示操作結果或者預覽結果，這樣用戶無需執行全部操作就可以知道大概的結果。
在 Salesforce 控制面板當中，就可以實時預覽面板編輯的效果。
絕大多數用戶都不是進階的專家級用戶，他們在絕大多數時候會使用基礎但是效率沒那么高的操作和執行方案。很多用戶形成習慣之后，通常不會主動做出改變，而這在日積月累之后導致大量的時間浪費，效率低下。
值得一提的是，這個時候依賴冗長的文檔和教程其實很難達成效果，更合理的方式是結合用戶所處的上下文環境，通過界面工具提示的方式，適時地告知用戶「有更方便的方法」。
通常，可以使用懸停提示，或者是彈出式工具提示來實現這一功能。
ArcMap 是一款地理信息系統類工具，它通常會通過上下文環境下的信息引導，來幫助用戶了解技巧。
復雜的應用程序，通常會有很多功能是分散的而非線性的，不同的功能組合起來可以實現特定的功能。在這類工具當中，用戶日?？赡芤膊皇呛艽_切知道最終的目標是什么，而需要通過數據分析來逐步推進，同時，在知道確切目標的情況下，也應該可以遵循不同的路徑靈活地達成目標。
設計師這些應用的時候，設計師應該避免使用固定、唯一、 僵化的實現路徑，迫使用戶必循嚴格按照某一固定路徑來做事情。一方面，允許用戶跳過某個步驟，或者回滾到更早的路徑，另一方面，允許用戶遵循不同的方式和路徑來達成目標。
比如萬事達卡的自助服務就可以通過交互式的圖表來引導用戶完成不同的任務。
復雜的任務，通常意味著它需要很多步驟，不同的環節，而在實際的應用場景中，某個分析步驟耗費幾個小時甚至幾天，都是有可能的。在高度復雜的現實生活中，某個步驟可能會換人接手，可能會因為硬件、 網絡等問題而暫停甚至丟失，這也意味著「可追溯性」是很重要的。
所以，在這樣的復雜應用當中，應該允許用戶在使用過程中，可以便捷清晰地記錄、保存、 導出內容和記錄，允許用戶中斷，中斷后可以恢復特定的任務。在任務進行過程中可以進行注釋、保存相關的說明。
在決策建模軟件TreeAge 當中，用戶可以在分析和建模過程中進行開放式的注釋，可以后續在底部快速訪問這些筆記。
復雜的應用通常還會面臨一個狀況，就是工具本身的不足，用戶需要在多個工作空間上使用工具和內容的時候，它需要具備切換的功能。對于不具備的功能，應用程序應該允許使用第三方的應用來作為補充。
比如當軟件不支持某個操作的時候，應該允許用戶從線上的其他數據庫中獲取并導出數據來使用，可以依托外部文檔作為支持，允許用戶在應用中做注釋和評論。
減輕工作負擔的一個要點，是盡量使用通用的API、接口和標準，盡量兼容行業標準軟件，比如 Excel、Powerpoint ，盡量使用標準格式，等等。
微軟的商業分析軟件 PowerBI 就提供了標準化的導出和復制功能，非常方便
復雜應用通常旨在保持泛用性。使用場景多樣，多種不同的功能，一家汽車生產廠家，可能會和蜜蜂養殖機構采用同樣的工具和軟件來監測機器故障。但是，這種泛用性的另外一面，就是混亂性。復雜的應用可能會同時兼顧到基礎型的小白用戶和進階型的專家用戶，而后者用到的功能很小概率會被基礎用戶用到。
所以，設計者需要在不降低功能性的情況下，基于應用場景、 用戶需求來進行簡化和優化，在保持功能完整易用的前提之下，降低復雜度和混亂度。
分階段和層級展現就是一種降低混亂度但是不影響功能性的一種常見策略。當用戶進行到特定任務、特定階段、特等級別之后，再呈現特定功能，是有效的設計方法。
即使降低了混亂度，在復雜應用當中，信息量可能依然是過載的。通常，對于這種情況可以通過區分信息層級的主次來進行快速的區分，不過，從交互上來說，這可能依然不夠。
對于諸如控制面板一樣的界面，用戶可能需要時刻查看面板上的信息，需要了解次級信息但是又不能離開界面，這就體現出主次信息之間的過渡呈現的重要性了。
一般而言，使用類似與懸停顯示的方式，能夠比較柔和地將次級信息呈現出來，允許用戶查看詳細的定量數據。下面這個案例當中就是，懸停顯示更多次級信息。
復雜應用通常在界面上包含由大量的信息，而這個時候關鍵性的數據如果不在視覺上做突出顯示，會被用戶錯過。通過視覺區分、提示警報的方式，讓用戶及時注意到，才有可能規避可能存在的問題。
值得注意的是，讓關鍵信息和元素凸顯的方式，并不一定非得是使用鮮艷的色彩和較粗的字體，簡單的放大呈現，使用圖形化的元素輔助提示，或者是提供足夠的留白都可以達到目的，就像下面的案例一樣：
復雜的應用多種多樣，支持的服務和功能也千差萬別，但是無論如何呈現，此類復雜應用的設計都是非常挑戰設計師的設計功底的，需要設計師了解業務，了解用戶，并且能夠通過設計更好地提供服務。
文章來源：優設 作者：Kate Kaplan
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
隨著網購成為了人們購買東西的第一選擇，各大平臺的競爭也逐漸轉移到了提升用戶體驗感的身上。不管購買什么東西，最終都要經歷下單這一流程。一個合理的下單流程，往往可以讓消費者體驗流暢，從而提升對平臺的好感度，進而愿意長期的使用。
這是個非常值得研究的內容，最近我在優化商城下單流程的過程中，遇到了許多問題，通過不斷地探究，也對整個模塊有了更深刻的理解，希望通過總結能給大家帶來一些啟發。
下面將從目標的提出，結合案例的解說，并最終推到出結論的方式講解。
作為漏斗模型的最終收口的購買步驟，是購買轉化的關鍵。
但往往有些產品由于對流程沒有系統深刻的理解，會有很多迷惑的操作，使得下單的流程相當混亂。我也曾經經歷過類似的購物情景，經過一輪謎之操作后，我終于下完單了，但過后會擔心剛才買的東西有沒出錯。
關于流程的優化我們遵循的原則是：先讓流程合理了，再提高用戶每步操作的效率。
怎么理解合理，必須解決以下兩個問題，整個下單流程涉及到哪些步驟？步驟之間有什么邏輯關系？
我們需要洞悉到流程之間是如何串連，信息是如何層層遞進并最終達成目的。因為只有每環節解決了對應的問題，流轉到下一環節才能更省心。才能避免信息的反復確認，影響操作的效率甚至引發出錯。
可以拆分成三個維度考量，第一是頁面布局的重點突出的提效，第二是信息展示直觀的提效；第三是交互操作簡化的提效。清晰的頁面信息傳達能讓用戶清楚并了解自己的操作結果，并快速做出決策。
下單流程按需要提交的信息進行拆分，一般下單需要先確定商品（一切影響商品價格的因素的確定，如規格）；其次是訂單信息的確認（不影響商品價格，是訂單層面信息的確認，如收貨人，備注等），而后是訂單支付，支付方式的確認。
最后是訂單進度的跟蹤。這里列出的每一步前提都是上一步內容的確定。只有這樣才能做到環環相扣，并且信息流轉。
你是否遇到過在逛商城時看到某個服務，想購買時，進入的詳情頁卻沒有價格，然后需要你點擊咨詢客服，打開了一個咨詢窗口
賣東西不標價，你賣個寂寞嗎？
作為用戶的我難免會有浪費老子時間的負面情緒出來，撇開一些特殊情況說，一個詳情最重要的兩個要素是商品信息和商品價格。因為了解商品的目的是購買，購買的決策需要價格的支撐。
這是一對不可分離的組合，沒有價格的商品陳列和沒有目標指向的價格都是沒有意義的。
那么總結一下：商品詳情必備的兩個信息：
滿足了必備元素展示后，我們還要考慮元素的放置位置，首先是突出重要的元素，其次是瀏覽順序符合用戶場景。這樣才能真正做到提高下單效率，我們來看看下面這個例子:
京東的商品詳情作為購物電商商品詳情的代表來說一下，可以看到視覺瀏覽路徑是非常流暢的，明確的實覺引導和操作指引，先看價格，再選規格，而后點擊購買。
權大師的商品詳情雖然頁面中這重要元素都非常醒目，但它卻沒有讓用戶的決策提效，我猜測費用總計為什么放在這個位置，是希望用戶直觀看到選擇不同的服務項目對應的收費的變化。
可是也忽略了金額作為重要的元素，當用戶進入詳情需要第一樣看到，導致瀏覽路徑有點繞圈圈。
攜程的詳情可以說是權大師的一個優化，同樣的考慮，頭部不僅展示了重要的價格和商品信息，給到用戶購買的預期。在規格選擇后，預定按鈕旁邊還展示商品的總價。減少用戶來回查看金額的不便。
在購物中，選擇商品或者服務的規格是一個常見的操作流程，選擇規格的目的有：
以上幾個選項，根據不同的業務會有不一樣的描述，不過可以概括兩個內容，一是影響能不能買，二是能買的話不同規格的選擇怎么影響商品價格。
圖像化選項，比如顏色外形等規格有圖像的描述就更加直觀。如果換成文字的話，用戶的生活經驗會影響對文字解讀的結果。
數值化選項，這樣不需要選中再查看總價來判斷金額的變動情況。很方便地不同選項的價格，方便對比然后選擇。
通常門票或者酒店的規格選擇會用上面這種方式展示，同樣的道理，把不同項目的價格列出來，讓項目之間的對比更直觀。
下圖的例子中參考身高這一項規格說一下，身高的規格本來就是有規律的，比如從矮到高，或者從高到矮。
如果我選擇紅色規格衣服，身高規格最后兩項灰掉了，這時就算我不看具體身高規格是多少，也大概知道紅色衣服身高最高的規格沒貨了。
這時，我想找一個有170cm身高的衣服，我就會不斷切換顏色規格，用視線的余光去看什么時候170cm的規格亮起來。規格的展示通過位置和內容的支撐，能讓用戶更快速找到變化的差異。
不影響商品價格，是訂單層面信息的確認，如收貨人、備注等。
第一步說的是商品信息的確認，這一步是訂單信息的確認，這兩個維度怎么理解呢？
舉個例子：比如你到商場買東西，你首選是挑選好要買的商品放到購物籃里，再到結算臺支付。
這時候你是有個比較清晰購物列表在腦海中的，因為在挑選時候已經經過判斷，我拿了一個薄荷味的牙膏，還拿了一個潘婷的洗發水。現在只需要把這些給到收銀員，她再確認一次就可以了。
但試想如果在你的結算的時候，有個小孩把你購物籃的東西攪亂了，放了一些別的商品或者拿走了其中的一些商品，你在收銀臺這里就會變得十分混亂。我又得重新確認一下自己要買的東西是什么。
訂單的確認是建立在商品的確認上的，而且步驟之間本來就存在了遞進的關系。先確認能不能買，再考慮能買的話收貨人等訂單的信息。在這一步，確認的信息盡量不影響商品的單價。
淘寶這個例子的話，訂單確認的頁面需要確認收貨人信息、數量、配送方式、運費險等，這幾個元素都不影響商品單價的，都是訂單層面的信息確認。這就符合前面所說的，頁面信息層層遞進，減少相同信息反復確認的原則。
飛豬買門票這個流程中，從詳情頁到規格選擇到訂單確認，門票類型始終可以選擇，到最后填寫訂單了，還是可以選擇不同的票種。
這操作有點迷惑，前面都告訴我了當前選擇了成人票，到最后還告訴我，你還可以選擇要一張學生票噢。最后確認下單信息要把商品信息再確認一次，這就是影響下單效率的表現。
支付的確認也有兩個重要的元素，金額和支付方式的選擇。
但也有的商城也會做成下面右圖，在訂單確認頁面把支付方式也一并選擇了。
表面上簡化了步驟，但由于不同步驟確認的突出的信息是不一樣的，如果我選擇支付，那在支付前我必定會關注金額。所以右圖這樣就沒法讓突出重要信息，需要費勁地找一下金額是多少。
訂單的詳情頁里包含的信息有：商品的信息、訂單的信息、支付的信息、訂單進度的信息。這個環節，訂單的進度信息無疑是重點。
對信息展示優先級排序為：訂單進度信息 > 商品信息 > 支付信息 > 訂單信息，淘寶的訂單詳情按重要程度自上而下排列：
有的商城甚至會把一些權重低的信息收起來，如訂單信息、支付信息。想查看時候可以點擊查看更多信息，這樣做的好處是能讓界面整體更清爽，降低頁面的復雜程度，那么對重點信息的抓取就更快速了。
對訂單辦理的進度展示優化，我認為淘寶可以說是個經典的案例：
以上改動都是讓訂單進度掌控的體感更加豐滿的過程：
以上進度展示的關鍵點可以概括為：當前進度、整體流程、完成的預期。有了以上三點，用戶對于整個進度的才能有一個清晰的把握。
在訂單流程設計各環節中，如果我們明白每一步的操作的目的，提煉出關鍵點。那在優化中就能更加得心應手。如果發現本文有什么邏輯的錯誤，歡迎大家指正，一起進步。
下面附上本文的知識目錄：
文章來源：人人都是產品經理 作者：小圈學產品
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
