今天給大家詳細的分析一下移動端選擇器。
一.什么是選擇器
選擇器是一個輸入字段， 用戶必須在其中選擇一個（或多個）選項，這與文本字段中用戶可以自由使用的輸入區不同。選擇器具有各種不同的形狀和形式。下拉菜單，復選框，切換按鈕，滑塊等都是不同類型的選擇器，但它們看起來彼此并不相似。這些類型的選擇器之間的主要功能差異是用戶可以選擇的選項數量：一個或多個。
二.選擇器的類別
-單選選擇器
-多選選擇器
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、控件狀態
選擇控件在操作過程中必須更改其狀態/外觀，要明確讓用戶知道是否能選中，是否被選中?？丶顟B一般分為三種：未選中、選中、禁用。
未選中
選擇器的開始狀態，向用戶表明，可對該選擇控件進行操作。
選中
用戶操作選取狀態，選擇控件處于被選中的狀態。
禁用
一般情況會為灰色顯示，用戶將無法與選項進行交互。
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 模型?？v觀這些模型和實踐，大多是主觀數據和客觀數據的結合。
我們團隊也曾提出過 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 新接手某款產品時，也希望能通過可用性測試的方式來快速了解產品問題。回歸到“兩章一分”的初心——幫助產品發現體驗問題，因此，我們拓展了方法的執行階段，不再局限于測試或驗證階段，只要場景適合，都可以用。
產品簡介
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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
用戶畫像作為一種設計工具，可以很好得幫助設計師跳出“為自己設計”的慣性思維，聚焦目標用戶，發現核心價值，賦能產品。
在產品研發過程中，產品、設計、研發等人員經常會提到“我們要為目標用戶設計”、“我們的用戶是誰”等字眼，可見找準目標用戶在產研過程中至關重要。用戶畫像作為一種設計工具，可以很好得幫助設計師跳出“為自己設計”的慣性思維，聚焦目標用戶，發現核心價值，賦能產品，在互聯網各類型產品中有廣泛的應用。
本文將介紹用戶畫像概念、價值以及如何從0到1構建用戶畫像，希望閱讀后能讓大家了解用戶畫像相關理論，并有助于后續對用戶畫像的深度學習。
目前業界常使用的用戶畫像概念有2種，一種是User persona，一種User portrait，也有翻譯為User profile。
第一種用戶畫像，即User persona，根據Alan Cooper的《About Face》，是基于產品對真實世界的觀察，抽象出來的具有代表性的虛擬用戶模型，有時也被稱為綜合的用戶原型（Composite User Archetype）。這個概念最早由Alan Cooper在《The Inmates are Running the Asylum》（軟件創新之路）一書中提出，后續在多處書籍進行了不停的完善。
這個畫像主要特征如下：
1、描述一個用戶畫像包括角色描述和用戶目標
這里角色描述是指如名稱、年齡、位置、收入、職業等，這類角色描述主要是為了使用戶畫像更豐富、真實，具象；重點關注的是用戶動機，用戶目標是其動機。
2、可以代表相似的用戶群體或類型，也可以代表個體
User persona是抽象的、虛擬的，代表一個典型的用戶群體；雖然也可以代表個體，但個體并不是實際獨立的個人，而是從實際觀察研究中綜合而來。
3、須針對具體情境-具體產品的行為和目標
User persona研究的是用戶在具體情境下對產品的使用，關注其在一定范圍內的行為、態度、能力、動機等。即使同一個角色，在不同產品下的動機也是有差異的，一般來說不輕易在不同產品間復用，需要考慮不同類產品的切入場景。
第二種用戶畫像，即User portrait，是指用戶信息標簽化，通過收集用戶多維度的信息數據（如人口統計屬性、社會屬性、行為偏好、消費習慣等），并對其進行統計、分析，從而抽象出的用戶信息全貌，相比user persona，它更側重于數據挖掘、標簽體系搭建。
這類畫像主要特征如下：
1、真實性：集合了每個個體的真實信息，如既有人口統計屬性等靜態信息，也有用戶行為的動態信息。
2、時效性：用戶動態信息并非一層不變，可以實時追蹤其變化。
3、覆蓋度廣：既能監測到用戶感興趣的內容，也可以看到其不感興趣的內容，維度眾多，顆粒度粗細均有。
以下是這2類用戶畫像的簡要差異對比：
本文重點介紹第一種用戶畫像（user persona），至于如何創建數據畫像標簽及應用，會在后面的文章中介紹到，此處不再贅述。
用戶畫像作為一種設計工具，其作用貫穿產品生命周期的前中后。結合設計工作的幾個階段，畫像的價值主要有：
1、設計前：幫助確立產品定位、目標
2、設計中：幫助確立設計目標、設計策略與準則
3、設計后：促進其他工作，如市場推廣、運營活動、銷售規劃
整體來說，用戶畫像（user persona）多采用定性的研究方法來進行角色劃分，主要可采用的資料來源有：人種學研究、情境調查、觀察法、訪談法、桌面研究等，具體實行時會根據業務情況稍作調整。
本文結合酷家樂-快搭、贏客2條業務線經驗，梳理了從0到1構建畫像的流程與方法，如下圖所示：
Step1：確立目標與畫像維度
明確業務目標與用戶角色，不同的角色與目標在收集信息時有所差異，進而影響到最終得到的畫像結果。因此在做畫像之前，需要考慮清楚畫像目的。明確目標后，就可以結合目標與角色，制定出畫像信息維度。
此處有2個注意點：
1、通用信息有哪些？2、如何篩選出目標用戶？
針對第一點，通用信息維度可以結合用戶畫像的構成要素，自身業務情況有選擇性的摘取。這里需要注意，to C和to B類的信息維度會有些許差異，比如to C屬性產品會關注用戶的性別、年齡、家庭情況、愛好習慣等，而to B類則不太關注這些，它們會更側重用戶的工作能力、工作內容、使用工作等等。
用戶畫像構成要素匯總：
針對第二點，由于是創建用戶畫像，我們需要盡可能覆蓋不同用戶。那找誰進行研究呢？這里介紹2個小tips。
Tips1：用戶篩選條件
尋找與業務緊密相關的產品、運營，一起討論確定用戶類型，在討論中我們會定義符合條件的用戶，得出一張用戶篩選條件表，進而根據這張表邀約用戶。
Tips2：工作職能篩選
針對一些to B類崗位職能劃分清楚的產品，可以基于工作職能尋找用戶。實操中需要結合實際情況，看是否需要區分管理崗與普通執行崗。
以快搭智能設計業務線為例，在用戶畫像項目中
業務目標：整體全面的了解用戶特征、產品認知、使用場景與痛點
目標用戶：考慮目標是希望先對快搭工具側使用用戶有個全面、整體的認知，問卷法中D端&B端用戶有訪問&開通過快搭行為都算，而在深入挖掘場景與痛點時，結合問卷的反饋，D端和B端重點尋找活躍用戶，并細分了用戶身份類型。
這2者結合，最終梳理出快搭的用戶畫像維度。
Step2：確立調研方法
確立畫像信息維度后，需要結合用戶、時間精力、經費等因素，選擇合適的調研方法以實現信息收集。常用的調研方法有3種：
定性研究：如訪談法、二手資料研究
定量研究：如問卷調研、數據分析
定性+定量：上面2種方法的結合。
每種方法如何選擇？可以從調研方法的差異性、產品所處生命周期，再結合實際時間精力、經費等情況酌情選擇。
1、調研方法的差異性
定量和定性是一個相對的概念，定量法著重了解“是什么”，即發現用戶做了什么，挖掘事實信息。而定性方法著重了解“為什么”，即挖掘用戶行為背后的原因，從而理解現象。
2、與產品生命周期對應的調研方法
新生期：這個時期產品尚未定型，目標用戶也在市場探索中，可以嘗試通過訪談法，找專家用戶或競對產品的用戶，重點挖掘TA們使用產品的場景，核心痛點是什么，以便進行MVP版本的驗證。
成長期：這時產品已經進入用戶快速增長時期，隨著體量的變大，用戶會出現分層，暴露的問題也會越來越多，可以嘗試通過定量法進行用戶分層，再輔助定性了解每類用戶，針對性解決問題。
成熟期：用戶體量趨于平穩，產品一方面需要維穩，持續滿足現有用戶的需求，提升產品體驗；另一方面需要嘗試突破，找到細分市場，以挖掘新的增長點。可以嘗試先定性挖掘藍海，再定量進行驗證。
衰退期：定性了解原因，調整產品。
以快搭智能設計業務線為例，綜合了目的、產品周期、調研方法、時間精力等因素，采用了數據+問卷+電話訪談三種方法結合。
Step3：制定計劃與數據收集
在明確目標與方法后，需要對整個研究進行細化，制定具體詳實的執行計劃并落地，把控整體節奏以收集有效的信息。
例如，若使用問卷法，則需要進行問卷設計——被訪者選取——問卷投放——問卷回收。若使用訪談法，則需要準備訪談前中后的相關資料。采用不同方法，執行環節需要注意事項有所不同，可以針對性查閱相關方法的工具書、文章，此處不再贅述。
Step4：分析資料，角色聚類
第三步驟收集整理到有效信息后，需要識別關鍵的行為變量，將調研到的用戶與行為變量進行一一對應，并識別差異化行為模式。
在尋找可能導致用戶間行為差異變量時，結合以往經驗，筆者總結了一下可供參考的維度。
以行為變量為依據進行用戶對應時，不必追求絕對的精準，只要相對能映射清楚即可。梳理完后，觀察可發現某些用戶群體聚集在幾個行為變量上，它們構成了一個顯著的行為模式，由此聚類出某個角色類型。依此類推，可以發現幾個不同的行為模式。為保證全面，映射完最好遍歷一下，檢查是否有用戶或變量的遺漏。
以快搭為例，用戶在使用智能設計工具時，行為變量可細分為：職業類型、專業技能水平、使用方式、看重因素等等，一一對應后聚類出幾大類角色類型，比如其中一類追求速度，看重整體效果；另一類，重過程，講究細節。
除了上述方法外，針對to B類的企業級產品，當用戶的職能屬性很強時，可以將企業職能作為劃分角色類型的依據。這時，只要針對每類角色抽樣出典型樣本，保證完整性，進行調研即可。
Step5：綜合特征，產出畫像
完成角色聚類后，梳理每類角色的行為、目標、痛點等維度特征，形成畫像的基本框架，并對每個角色進行屬性信息、場景等詳細描述，讓畫像更加豐滿、真實。
此時需要注意：
1、雖然網上有提供很多畫像模板，但只是參考示例，大家需要根據自己收集到的信息，制作屬于自己業務的畫像；
2、最好為每個畫像貼上一張符合角色特征和所處環境的照片，傳遞更加情感化的信息，帶入感更強。
3、確立畫像優先級。根據Alan Cooper的建議，一個產品最好不要超過3個用戶角色，在得出畫像后，需要結合覆蓋人群基數大小、收益潛力、競爭優勢、業務規劃等維度去評估重要程度，定義好主要角色、次要角色、補充角色等
4、用戶畫像作為一種設計工具，不是一層不變的，需要隨著時間推移不斷進行迭代，在產品積累了一定用戶量時，可以使用定量法進行驗證，補充優化更多維度信息。
以快搭為例，某類角色-銷售型導購畫像如下：
Step6：結合產品，畫像落地
用戶畫像只有落地，助力產品設計，才能體現其價值，否則就是空中樓閣。
在創建完畫像后，可以組織分享畫像結果，讓團隊內成員對服務的用戶達成共識，進而探討產品的新機會點或改進點，逐步落地到產品設計、推廣營銷中。用戶畫像在設計前中后如何應用，后續有文章進一步詳解，本文不再贅述。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
可以說，每個項目因合作方式，人員習慣，落地形式的不同，所形成的規范是有區別的。所以，設計規范更應該是針對項目來說的，除非是問你Android或iOS這種已經廣泛適用的平臺級規范。不然是很難有標準答案的，回答更應該是一種思路的描述，比如你會如何定義一套規范、解決了哪些問題以及如何驗證這套規范真的助力了產品的體驗提升。
Don't make me think。大家都知道，好用得產品都是盡可能的減少用戶思考，不斷去貼近用戶的使用習慣。比如在iOS系統里想返回上一個頁面時，你會熟悉的去左上角找返回操作，但如果把返回操作放在右上角就會很不習慣；再比如對國內用戶來說，他們習慣正確按鈕用綠色，錯誤按鈕用紅色，如果你非要反過來制造所謂的差異化，用戶就會感到困惑，誤操作的概率也可能會大量增加。
其實網上很多設計規范，原理之類的文章，源頭都來自于這些大廠規范，想獲得一手信息，最好是自己去這些網站多看看。
這也就是我為什么不寫具體規范數值的原因，因為網上的資料實在是太多太詳細了，寫一些重復的知識實在是沒多少價值。學知識的路上一定不要什么都等別人喂給自己，需要更多的主動性，這樣才能提升自己的學習能力和解決問題的能力。
2）針對自己要做的模塊，有針對性的找市面上大廠的應用作為參考，直接截圖標注，自己總結規律印象會更加深刻。
我開始做UI的時候就這樣學習的，不知道字體該用多大，間距用多大，顏色怎么用，就直接去找相類似的界面截圖參考，量它們的尺寸，吸它們的顏色，然后就這樣一步步的把規范經驗積累起來了。
比如從QQ的動態tab頁面中，我們可以借鑒到很多信息，比如列表的高度，列表左側的圖標尺寸和圓角，間隔線高度和配色，右側的箭頭大小和配色，列表文字的字號和配色，用戶頭像大小和結合的樣式，圖標與文字的間距等等。這些借鑒并非是抄襲，要你做的跟這個界面一模一樣，只是參考這里面的某幾個屬性然后結合自己的產品綜合運用，減少出錯。
發現了嗎？一個優秀的界面設計，上面的任何信息其實都可以拿來參考，就看你會不會用了。
文章來源：彩云譯設計 作者：彩云
藍藍設計( 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-不斷優化的設計規范，根據公司的節奏，有些產品目前比較迫切的是需要界面統一性、交互統一性。基礎做完以后，進而考慮產品固定風格。這種比較適合小團隊協作?？梢噪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 光影
▼
【太陽與陰影】是一種永恒而無性別的色彩組合，描述著我們周圍的原始之美。灰和亮麗黃為大地色系注入更多的希望和力量，將今年的雙色年度色的特殊韻味發揮到。
除了這五組配色之外，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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1. 圓角
不同的圓角，所帶來的氣質是不同的。圓角很小，視覺印象是硬朗，高冷，具有攻擊性的，多用于嚴肅、高端、沖突感強烈的設計中；而更大的圓角給人的感覺是有親和力，柔軟，安全的，多用于兒童產品、娛樂性強的設計中。
在設計的時候，根據自己的產品屬性選擇氣質相符的圓角設計很有必要。
△ 常見的卡片弧度形式有4類：直接、小圓角、大圓角、特殊圓角
我一般喜歡用4的倍數來設置圓角，比如圓角大小為4px、8px、12px之類的。要注意的是，圓角越大，可用面積會越小，需要根據實際場景進行平衡，以視覺上舒服為宜。
2. 比例
卡片的比例，我習慣遵循一些美感規律，比如黃金比例（1.618），白銀比例（1.414），青銅比例（1.732），正方形之類的比例。當然，實際設計需求中的比例，還是要結合內容的多少具體分析。
我的經驗是，當比較接近這些美感比例其中之一時，就直接優化到這個比例。比如做了一個卡片，寬高比是1.5，比較接近于黃金比例，我就干脆讓它等于黃金比例。
3. 異型
除了正常的卡片樣式，還可以做一些異型的卡片設計。異型卡片具有較強的形式感和視覺沖擊力，所以會比較多的用在游戲或者運營相關的界面中，吸引用戶的注意力。缺點是批量化設計成本略高且因為過于風格化而不夠耐看。
1. 顏色
卡片的顏色搭配可以使用純色和漸變色。這些顏色與文字之間的對比要符合界面對比度標準（ https://contrast-grid.eightshapes.com/，這個網站可以直接查到可用性數值，只要不是DNP就是可以用的配色），以免影響內容本身的閱讀。如果拿不準的話，可以多用一些白色，比較不容易出錯。
純色卡片設計會讓界面顯得冷靜高級，但對配色的要求相對較高，用不好的話會顯得單調，沉悶。如果你堅持要用這種卡片配色的話，建議搭配一些圖形紋理，會更容易把控，還能提升畫面細節。
△ 純色卡片設計
漸變色的卡片設計目前較為常見，層次細節更加豐富，畫面也顯得更活潑一些。
△ 漸變色卡片設計https://dribbble.com/shots/12284120-Wallet-Design-App
有些朋友經常因為配色不好而發愁，其實是需要多去找一些參考來看的，實在擔心配色不好，直接去吸優秀的配色方案也是OK的，但要注意搭配合理。
教大家一個方法，去dribbble上搜color或直接打開 → https://dribbble.com/search/color這個鏈接，就可以看到非常多的優秀配色方案了。
2. 圖案
卡片的設計還可以結合輔助圖形，以圖案的形式與卡片進行結合。這些輔助圖形可以來源于品牌符號的延伸，讓品牌有更多的露出機會。
也可以是運用一些簡單的圖形，提升卡片的設計細節，以下是一些還不錯的設計案例。這些卡片上的圖形都有借鑒參考的價值，自己平時有時間的話，也可以多做一些作為圖形的儲備。強烈建議收藏，真的可以很有用。
△ 來源：https://dribbble.com/shots/10513966-Gradient-Bank-cards
△ 來源：https://dribbble.com/shots/10498737-Dark-Bank-Application-Design
△ 來源：https://dribbble.com/shots/11313260-Finance-App-Exploration
△ 來源：https://www.behance.net/gallery/84029601/100-Financial-Virtual-Design-Cards-PSD-XD
這里彩云給大家找了非常多的卡片設計形式，可以從中參考學習配色和紋理造型。
3. 圖片、視頻
卡片背景也可以用圖片和視頻的形式進行設計，圖片和視頻的選擇一般會偏暗色，以不影響內容閱讀為準。
△ 來源：https://dribbble.com/shots/5717917-Travel-Article-Application
1. 文字
卡片上的文字不要太長，我的經驗是橫向不要超過42字（關于這個字數，有資料可以查，感興趣的可以找找看），縱向不要超過5行。過多的文本不建議使用卡片形式。
其實這張卡片的設計中，我也用到了黃金比例來指導自己的設計，方便快速確定文字比例關系。
2. 間距（網格法）
卡片上的文字間距最好有一定的規律，這里可以按網格法來規劃，比如8px網格，10px網格等等。網格的使用其實可以很靈活，比如我這里的卡片其實就用到了8px網格，各間距就會用8的倍數來做。大小比例就盡量用黃金比例來處理，這樣做目的一方面是為了讓界面有秩序，另一方面是提升決策效率。秩序產生美，而效率讓你早點下班。
3. 減少線框
卡片中盡量減少線框，多用留白來進行內容劃分。
4. 層次清晰
卡片中的內容層級要做好，標題和內容之間的差異要明顯。這里的層次主要是通過對比拉開的，做好對比的關鍵就是對比效果要強烈，決不能模棱兩可。
比如下圖中左邊的案例只是在文字的字號上有一定的對比，但字號間相差不大，效果不明顯，就會讓人第一時間不知道看哪。而右側的案例則用了加粗，大字號，大留白等，讓畫面有了強烈的對比，從而產生更好的信息層級。
5. 內容出界
只在卡片的框框里做設計，有時候未免顯得太呆板，破開卡片的邊界可以讓卡片本身更具形式感。如果被人說你的設計沒啥亮點，那內容出界的設計就是一個很好的提升設計亮點的手法。
△ 彩云曾經做的一張banner就是運用了出界的手法
△ 來源：dribbble。界面上的天氣圖標也用了出界的手法，讓畫面顯得更有亮點
1. 光感
卡片中的光感細節能提升設計的質感。下面這張圖是我最近做的一張會員卡的背景設計，大家對比下，在卡片頂部加了1px高光線和斜面反光的細節前后的質感區別。
這個小細節，我經常會用到，執行簡單又容易出效果。
2. 投影
投影的細節，不要過重，但又要能與背景分離開。有2個小技巧：
3. 3D效果
3D卡片的設計，因為不便于內容編排和閱讀，所以帶透視的卡片在實際UI中并不太常用。但在作品集包裝和運營頁面中，則可以帶來比較好的視覺沖擊力，可以嘗試運用。
△ 圖片來自：Cradle
以上就是今天彩云關于卡片設計的一些經驗總結，卡片設計的應用已經如此廣泛，我們有必要利用它來提升自己的界面設計細節。
轉自：優設網
藍藍設計( 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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一覺醒來，2020 年潘通年度色就這么發布了。
這款被命名為為「經典藍」（Classic Blue）的色彩沉穩耐看，雋永優雅，按照潘通官方的說法，「經典藍」仿佛暮色四合時的天空，寧神靜心，讓人駐足。「經典藍」是一種穩固可靠的色彩，給人確信感，撫慰著每一個期待穩定者的心靈。
為什么會選擇這樣一種藍色，潘通色彩研究所的執行董事 Leatrice Eiseman 在潘通官網上，予以詳細的解釋。
「我們生活在一個亟需信念和信任的時代。潘通 19-4052 經典藍 ，這種色彩正是自信和恒久的外化體現，這種堅實可靠的藍色調，更能與人產生深層的共鳴，令人心安。一望無際的藍色能夠喚起人類對于廣袤無垠夜空的無限遐想，經典藍鼓勵著我們透過顯而易見的事實，拓展思維，放飛想象。
經典藍敦促著我們更加深入地思考，開闊視野，進行更加深入的交流?！?
——Leatrice Eiseman 潘通色彩研究所執行董事
從色彩心理學的角度上來看，藍色色相本身有著信任、信念的含義，也是的色相。在此之前，潘通曾經多次選擇藍色作為年度色， 2000 年的時候選擇天藍色（Cerulean），在 2005 年的時候則選擇了藍綠色（Blue Turquoise），2008 年的年度色叫鳶尾藍（Blue Iris），2016 年的年度色則是靜謐藍（Serenity）。
相比于這4種藍色，「經典藍」更為沉靜穩重，沒有一點攻擊性，也不顯得沉重，輕松而易于互動。
「經典藍」無疑是一個略顯保守，但是非常貼合當下語境的色彩。它充滿了確信感，讓人覺得安全，屏蔽了焦慮。同 2019 年充滿前進感的「活力珊瑚橙」相比，「經典藍」更加內斂和篤定，悄無聲息地增加每一個的信心。
除了發布這一年度色彩之外，潘通色彩研究所還專門制定了5套配色方案，這些配色方案應該會在接下來的 2020 年，得到更加廣泛的應用。
沉思
這是一套舒緩的配色方案，涼爽的藍色調和同樣柔和的暖色組合到一起，給人以沉靜的感覺。
呼吸
這套名為呼吸的配色方案當中，加入了更為經典的黑白色，選擇了對比更加強烈、更加富有活力的搭配方式。這樣的色彩搭配更容易喚起觀者的幸福感，讓你的設計更加具有田園牧歌的氣息。
沙漠暮色
「經典藍」的靈感來源之一就是夜幕降臨時的天空。而這套名為沙漠暮色的配色方案，就與此相關。充滿金屬質感的潘通色更能夠凸顯「沙漠」的閃亮質感，而恰為對比色的「經典藍」讓這套配色方案優雅無比。
異域風情
這套配色方案比起之前的配色更加豐富，更顯混搭，仿佛加入了天然的調味料。這種健康而自我的色彩搭配方式，讓人仿佛身在異域，不同于此地的文化，迥異與此時的感覺，獨特卻令人著迷。
非傳統
打破常規的桎梏，選擇異乎尋常的色彩搭配，而足夠傳統的「經典藍」恰恰構成了這種搭配方式當中，作為基礎的底色。這套配色方案指向時尚，突破規則，如同小品，有趣而俏皮。
為了更加方便線上的設計師來使用這些配色方案，優設的小編從官方提供的這些配色方案當中，精心挑選了 9 套適合進行數字設計的配色方案，并且標注上了相應的 HEX 值便于精準取色，請盡情取用：
文章來源：優設網 推薦：陳子木
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
| 圖片源自Dribble @Bhavna Kashyap
短時記憶又稱感覺記憶，保存時間短暫，如果信息得不到及時復述，大概只能保持15-20秒鐘，對用戶而言反復復述數據是很痛苦的一件事，所以對比表單和折線圖，用戶從折線圖中記住起起落落比記住確切的數字要容易的多。
儀表盤提供了關鍵數據的概覽信息，這樣可以直觀展示數據，減少信息短時記憶的負載。如果用戶需要有關特定數據集的詳細信息，可以選擇向下鉆取，得到更多的關聯信息。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn