鳳凰新聞 APP 在 2020 年上半年完成了 Dark Mode 適配，本文主要從規范、設計和實現的角度對整個項目的落地過程進行復盤。
1. 背景色
iOS 平臺在深色模式下的背景色展示是動態的，分為基礎、升起（例如，彈出框或半浮層）。如下圖中 iOS 系統的兩個界面，相同樣式的組件在基礎層與升起層顯示的是不同的兩組顏色。
從 iOS14 的色彩規范中可以發現隨著界面高度的升起，系統定義的三級背景色也同步進行了一級上升。
iOS 通過這種背景色統一升級的處理方式來達到多任務窗口疊加的視覺隔離效果，但相對的開發成本也較高。
再來看看 Android 平臺深色模式下不同層級間背景色的顯示規律。
Android 把頁面分為從“0dp”到“24dp”的 10 個不同高度的顯示層級，通過在同一背景色上疊加不同透明度的白色來區分顯示層級。相對于 iOS 的整體背景色升級，Android 的背景色分級邏輯則更加的簡單易用。
2. 文字色
iOS 的規范中定義了 4 個等級的文字色，一級文字色為黑白純色，二到四級文字色為色相偏藍的半透明色，通過降低同一顏色的不透明度數值來進行分級。
Android 的文字色分為 3 個等級，與 iOS 的共同點是都用了半透明顏色，也都采用了降低不透明度的方式來進行分級。不同點是 Android 文字色使用的黑色與白色，沒有添加色相。
使用帶有透明度的字色能夠避免相同字色與背景色相融的問題。以 Android 為例，三級文字色與 10 種背景色疊加后都具有較高的識別度。
iOS 則通過一套半透明字色可以適應基礎與升起兩種不同背景色的使用場景。
3. WCAG
iOS 人機界面準則和 Material design 在深色模式的建議中，都提到了文字信息需滿足 WCAG 無障礙閱讀的 AA 標準。
WCAG 全稱為 Web 內容無障礙指南，其中包含分為可感知性、可操作性、可理解性、可兼容性四項原則的相關建議，這些建議可使網站內容更容易訪問。WCAG 從高到低分別是 AAA、AA、A 三個等級。其中 AA 要求文字與背景對比度不小于 4.5:1。
感興趣的朋友可以通過下面鏈接進行深入了解： https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
也可以通過下面的色彩對比計算器進行對比度檢驗（下圖為翻譯后展示）https://www.msfw.com/Services/ContrastRatioCalculator
這里我拿 iOS 在深色模式下的主次兩級字色與基礎、升起背景色做了一下對比度檢驗，得到的結果均滿足 WCAG 無障礙閱讀的 AA 標準。這里再給大家推薦一個可以同時對多個顏色進行對比度檢驗的網站 https://hexnaw.com
4. 彩色
iOS 人機界面準則的彩色方案中給出了 9 種顏色。如下圖所示的深淺配色方案以 RGB 與 HSB 兩種屬性進行對比。
https://baike.baidu.com/item/HSB
圖中左側以 RGB 屬性展示的各項參數差值較大，沒有明顯的規律性；右側以 HSB 屬性展示的各項參數差值較小，其中靛青與紫色 HS 數值相同，僅有 B 的數值有所差異，但整體來看依然沒有一個完整的規律。
相較 iOS 系統彩色方案的單獨訂制，Android 系統的配色方案則是一整套漸變梯度由“50-900”的色彩庫。
在 Android 的色彩工具中還可以自定義配色方案，在色板中選取一個主題色，對應梯度值為 500，通過一套算法來自動獲取其他梯度的輔助色。
為了在深色主題中提供更大的靈活性和可用性，Android 官方建議在深色主題中使用較淺的色調（200-50），而不使用默認的主題顏色（飽和色調范圍為 900-500）。
總結來看兩大平臺在深色模式的適配上都各有所長，在整體的視覺體驗上 iOS 更加鮮亮突出，Android 則更加柔和舒適。
iOS 更加注重細節體驗，在整體的色彩規范中的很多顏色都是單獨定義的，這也印證了 iOS 13 發布后蘋果官方向用戶所表達的“屏幕上的每個元素都經過精心設計”這一理念。而 Android 的色彩規范中無論從背景色、文字色還是彩色都遵循著一個梯度規律。
深色模式改版設計的前期工作除了調研兩大平臺的指導規范外，我們還對已上線深色模式的競品 app 進行了調研，調研的主要目標是背景色、文字色的色相與亮度展示效果。（以下截圖時間為 2020 年 2 月份）
騰訊新聞，主背景無色相，次級背景無色相，一級文字無色相亮度較高，次級文字無色相亮度極低。文字與背景對比度高，主要信息比較突出。
網易新聞，主背景色相偏藍，次級背景色相偏藍，一級文字無色相亮度較高，次級文字無色相亮度極低。文字與背景對比度高，主要信息比較突出。
鳳凰新聞，主背景無色相，次級背景無色相，一級文字無色相亮度偏低，次級文字無色相亮度極低。文字與背景對比度低，主要信息不夠突出。
以 3 個 APP 首頁來對比，可以明顯的感覺到鳳凰新聞首頁的信息展示不夠突出，在日間場景下體驗極差。
深色模式并不是簡單的把整個界面反色了那么簡單，還是要考慮到所有用戶的需求。鳳凰新聞作為資訊類 app 用戶在夜間使用的場景也有一定的占比。深色模式的改版不僅要在日間滿足使用需求，還要保證夜間的視覺刺激相對柔和。所以，在設計配色方案時就不能使用對比度極高的純黑色背景與純白色文字，只能在各種灰色中搭配出最優方案。
經過多稿背景色與文字色的搭配嘗試后，最終確定了下圖中所框選的配色方案。這個方案整體背景色與二三四級文字色在色相上略微偏藍，相較于無色相背景更具有活力，在視覺體驗上信息層級的區分也更加明確。
在各種方案嘗試設計的過程中對顏色的色相、飽和度、亮度的選取都是隨機的，目的是在短時間內進行快速試錯來確定配色方向。
本次改版的目標中還需要重新構建色彩規范，所以還需要對這稿配色的選用進行細致的打磨，在色彩對應的 HSB 參數中進行細微的調整使整套配色方案有律可循。
最終方案在四級背景的色相與飽和度方面進行了統一，對亮度的遞增梯度統一為 5。對比初選方案在視覺上變動也很微弱，卻使色彩分級規律一目了然。那么依照此方式也可以對文字色與彩色也進行了一輪打磨。
對于文字色在深色模式優化調整的基礎上也對淺色模式下的文字色進行了調整，使深淺模式下兩套字色更具有規律性。
在文字色的使用上鳳凰新聞沒有參照兩大平臺規則使用帶透明度的顏色，主要原因是從自身實際出發，考慮到端內的文字色使用場景部分是用于半透明背景色上的，如果文字色與背景色均帶有透明度，疊加后的體驗會很差。
鳳凰新聞的功能圖標以線性為主，通常搭配文字一起使用，所以對圖標顏色的定義與文字色是保持一致的。
在彩色的規范梳理中淺色模式下保持不變，僅對深色模式下顏色的亮度進行了調整，使深淺色模式下顏色的亮度對比有了統一的規則。
當然我們還需要對新的背景色與一二級文字色進行檢驗，看看是否滿足 WCAG 無障礙閱讀的 AA 標準，也就是常規尺寸文本對比度高于 4.5 : 1。
下圖就是鳳凰新聞客戶端的新版色彩規范，在規范中除了上述的主要的通用顏色外也有部分是單獨定義的顏色，這些顏色多用于獨立或特定的場景下。
在完成色彩規范的重構后，重新輸出界面樣稿與舊版進行對比。
通過設計稿對比老版夜間模式與新版深色模式，能夠直觀的感受到新版在信息瀏覽上體驗更好。
1. 色值替換
在著手進行色值替換時，iOS 開發小哥反饋給我鳳凰新聞全端跟色值有關的代碼有 2000+條，如下圖中是日夜間對應的這條代碼樣式。
如此多的色值代碼多數是相同色值在不同場景中重復使用，但彼此卻又完全無關聯，還有很多是日積月累的舊色值未被刪除。如逐條替換費時費力效率極低，后期的維護也極其麻煩。
為了提高適配效率以及便于后期維護，使得之后的色值替換可以達到全局響應的目的。由設計師與開發人員共同建立一個色值對照表。
此表中設計命名主要基于色彩規范，用于設計師團隊間的溝通協作。工程命名由開發人員提供，主要用于設計師與開發人員的在設計走查中進行高效的溝通協作。
以鳳凰新聞 iOS 端為例，優化后的色值代碼庫如下圖，由原來的 2000 多條色值代碼變成了 30 多條色值代碼「宏」。
在 iOS 開發工具 Xcode 的可視化文件夾中看起來就更加直觀了。
之后的色值使用開發人員只需要調用代碼庫中相應的「宏」即可，后續版本迭代中如有對通用色值的調整只需修改相應的「宏」代碼即可完成全端替換。
以這種方式快速完成首輪色值替換后很多頁面的色值會出現錯誤，需要 UI 設計師持續的進行走查反饋，再由開發人員根據反饋進行修改校正。
以 iOS 端為例在深色模式色值走查過程中設計師分批次以 PDF 格式反饋給開發人員的，開發人員在修改反饋問題的同時設計師也在進行下一批問題的整理，這樣同步進行的效率會更高。
2. 切圖替換
切圖替換場景相對比較多，同樣延用色值走查的協作方式，設計師分批修改開發同步進行替換。開發小哥提供切圖的方式就是直接扔過來一個全端切圖包，需要設計師修改切圖顏色后以原命名重新發回去。當打開切圖包后頓感一陣頭大，切圖總數有近千張之多。
雖然切圖很多但其中有一部分是已經無用的老切圖，在替換的過程中也對端內切圖重新進行了一輪梳理，刪除了很多無用和重復的切圖，同時也對鳳凰新聞 app 的體積進行了瘦身。
在切圖的替換過程中比較費時的是對同一切圖存在多張的情況進行整理，梳理出該切圖的所有使用場景然后反饋給開發人員進行統一調用，之后如再次修改即可完成全局替換。
除 icon 外還需要對默認圖與缺省圖進行替換。
3. 特殊適配
鳳凰新聞客戶端需要進行特殊適配的場景主要是圖集與小視頻界面，這兩個界面僅有一套色值與 icon，界面中的元素需要單獨處理，在切換深色模式后避免出現錯誤。
4. 界面展示
Dark Mode 適配是一項費時費力的巨大工程，也是探索和優化用戶體驗的全新挑戰。本文主要描述了鳳凰新聞 APP 在 Dark Mode 適配中的一整套心路歷程，從規范、設計以及實現的角度對整個項目進行復盤總結。
文章來源：優設 作者：鳳凰網設計中心
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
優惠券是我們電商中最常見的活躍用戶的一種方式，簡單的設計就能帶來巨大的客流量。雖然小小的一張優惠券并不會占用太多的版面，也不會浪費太多的色彩去裝飾，但想要知道優惠券的種類、特點，還需要我們認真剖析，仔細揣摩。
今天就和大家分享一下關于優惠券設計的那些事兒～
通常在活動、促銷、甩賣等場景中，我們最常用到的手段無疑是優惠券了，為什么被眾多設計師和商家所喜愛，也是源于它的這幾大優點。
1. 提升用戶活躍度：
人們總是對 “降價”、“打折” 這樣的字眼充滿了興趣，用戶也習慣于在了解到商品的價格及優惠力度后再決定購買，所以有優惠的商品才更具有吸引力。
2. 增加產品曝光量：
用戶一券在手，總是讓人忍不住翻看可以使用的商品，這無形中增加了平臺商品的曝光量。同時好的優惠券會在用戶的口口相傳中得到推廣，這對平臺、商家和產品來說，都是一個很好的展現自己口碑的機會。
3. 刺激用戶的潛在購買需求：
當用戶的購買行為背后沒有充分的購買動機，交易就會輕易的受到其他因素的影響而中斷。優惠券的出現滿足了用戶 “賺到” 的心理，用戶就愿意為潛在的購物需求買單。
4. 提升用戶的購買力：
用戶的購買力和收入水平成正比，和商品價格呈反比，當價格受到優惠時，用戶的購買力也可以得到相應改善。
體驗券
一般針對新品或測試產品向用戶免費發放的體驗券，意在吸引用戶的關注，傾聽用戶的意見，有時體驗券也會以邀請碼的形式出現。
△ 體驗券（圖片來源：京東智聯云官網）
代金券（又稱現金券）
一般使用門檻較低，不會有金額、數量等方面的要求，可以直接使用，若購買商品不夠券面金額，通常情況下是不退還差額的，如：新人大禮包、無門檻紅包和員工福利等。
滿減券
通常會有訂購數量、訂單總價、產品種類等方面的要求，滿足條件的訂單才可享受滿減，如：生活繳費商品滿 ￥100 減 ￥2 優惠券。
打折券
打折券是直接對商品進行打折，一般商品較貴，購買的用戶較少，或者用戶訂購量大會采用此類型優惠券，如：8.8 折優惠券等。
單品券為購買單一商品時使用的優惠券；
系列產品券為購買某種特定系列產品時所使用的優惠券，用戶只需要購買指定系列的產品就可以享用這張優惠券，如：購買無線寶 WiFi5 系列產品優惠券等；
品類券為購買某一類商品時使用的優惠券，如：購買清潔類、醫藥類、生鮮類等優惠券；
品牌券為購買某一品牌商品時使用的優惠券，如：購買華為、京東云等品牌產品所用的優惠券。
店鋪優惠券則是店鋪自行發放的，如：關注有禮、抽獎、新老顧客回饋等；
平臺優惠券是由平臺直接發放給用戶的優惠券，針對的目標群體范圍較廣，如：購物津貼、百億補貼等；
政企消費券成本由政府、企業和平臺共同承擔，意在提升某些地區消費者的消費能力和消費水平，如：北京消費券等。
說到拉新，我們總會遇到一些一點誠意都沒有的優惠券，例如：勞斯萊斯 “5 元代金券”。實際上這也是一種吸引用戶關注的方法，成為了人們口口相傳的調侃。
下面是 “京東智聯云官網活動” 拉新引流的新人禮包，我們可以看到 “新人千元大禮包” 字樣，新用戶在完成注冊任務之后就可以領取相應優惠券。
通常情況下，我們使用 “代金券” 進行拉新。代金券的價值相當于同等金額的現金，購物時直接使用，一般不會有過于苛刻的門檻，用戶使用起來方便，所以對新用戶的吸引力極大。在設計時我們需要注意以下幾點：
設計目標 – 吸引新用戶；刺激用戶的購買需求；使其真正成為我們的用戶。
任務模塊 – 除了優惠券本身外，設計時還應該注意各任務模塊的銜接與規劃，如：用戶登錄、注冊、用戶的信息填寫等。
門檻值設定 – 門檻值設置較小的優惠券才具有較強的吸引力。對于新用戶來說，用戶不需要購買太多商品，也不用局限于某個商品的使用。對于設計師而言，需要考慮門檻值和商品成本之間的關系。
面額設定 – 優惠券面額的設定可以很好的反應我們吸引消費者所付出的成本，控制獲客成本也是拉新過程中的重要環節，設計師應該清楚了解用戶喜好，剖析哪種互動方式可以在降低成本的同時擴大優惠券和商品的吸引力。
時間設定 – 這里可以強調優惠券使用時間的展示，方便用戶在有效期內即時使用，避免浪費。
當然，每一種優惠券都有 “促活” 的屬性，不管是優惠還是打折無不吸引著消費者的注意。例如：每年的 “京東 618” 和 “京東智聯云 11.11 大促（下圖）” 都是采用了各種優惠券來吸引用戶完成交易的。
促活一般是電商發展的關鍵時期，設計上會呈現出：短期內讓利、時間短促、宣傳、優惠券種類不限等特點。
小結：
其實優惠券的作用還有很多，它還可以解決用戶存留等問題。由于篇幅有限這里就不過多展開，期待小伙伴們一起思考和挖掘。
收益預估：設計前預先判斷本次活動的成交量，計算每單的收益大小以及總收益。
使用范圍：根據活動的目的，確定使用范圍（ “平臺”、“品類”、“品牌”、“店鋪” 等）。
使用門檻：每種優惠券都有相應的使用門檻，這是保證商家不會虧損的重要環節。
領取上限：設置領取上限，一方面根據商品庫存的多少，盡可能照顧到更多有需要的用戶；另一方面也可以表明優惠并不是那么輕易就會得到，增加優惠券的吸引力。
使用有效期：如果優惠券的使用期過長或沒有有效期，那就和降價沒有什么區別了。
通?；顒咏Y束后設計師要對本次設計進行復查，通過調研判斷優惠券對用戶的吸引力。一方面從定量的維度考量，我們要對用戶的瀏覽量、領取量、使用率、實際下單量和用戶參與程度進行觀測；另一方面從定性的維度分析用戶的實際感受，用戶在體驗完成后是否愿意再次光臨或推薦給親友，也是我們需要考查的方面。
文章來源：優設 作者：JellyDesign
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
01 本期講什么？
工作中我們經常會接到一些信息卡片的設計需求，在早期很長一段時間里都困擾著我。和大多數剛入門的小白一樣，當接觸到這類需求的時候，下意識就是打開自己的的Eagle，找合適的參考，去借鑒排版布局。但是其實最后只知道參考這樣做好看，對于作者的設計思路并不清楚。后面我嘗試去總結其中的規律，也得出了自己的一些設計思路。
讓我們先看下各類App中，一些比較不錯的信息卡片長什么樣：
圖片
圖標
文字
標簽
按鈕
布局
圖片理解很簡單，就是該卡片想表達的信息主體，可以是商品、風景、插畫等，PGC內容圖片通常由運營把控，UGC內容為用戶自行上傳。雖然上線后實際上傳的圖片，對于設計來說沒有太多關系，但在設計稿中還是需要嚴格控制圖片質量。（一定程度上也能提高過稿率）
圖片挑選需要注意如下：
高清無碼
主體突出且簡潔
配圖與文字信息相關聯
多圖片情況下，視線保持同一水平線或同一角度
圖標的出現有以下幾類：品牌特定logo、特殊字段圖形化（如性別、定位、點贊、VIP、關閉等等，將字段圖形化后可以減少該組件內的文本信息，方便設計排版的同時提升整體閱讀體驗）、氛圍點綴（主要在于豐富卡片，提升設計感來吸引用戶注意）
圖標設計需要注意如下：
清晰度：品牌圖標避免過小，導致難以分辨。
識別度：字段圖形化后一定需要確保擁有足夠的識別度，盡量在大眾認知范圍內。比如“+”可以代表添加和關注、“x”代表關閉，“大拇指”和“愛心”代表點贊、“皇冠”代表VIP等等。
風格一致：氛圍點綴圖標在配色上，需要保證與產品調性一致，或在色彩情緒上，與該模塊傳遞的感受一致。還有一些細節，比如線性圖標描邊粗細，圓頭還是方頭端點，這類盡量保持一致（當然也可根據情況演變新的風格，但注意風格種類不宜過多）
文字信息處理需要注意如下：
對比：需明確頁面信息權重，突出重點，便于有效傳遞信息。移動端常見對比方式：特殊字體對比、字號差對比、色彩對比、修飾元素（點線面）點綴對比。重點需要注意，避免在一個卡片中，采用過多不同大小字號和顏色去表現信息層級，盡量使層級精簡與規范。
對齊：保證卡片內信息之間存在某種視覺聯系，信息結構清晰。對齊方式分類：左對齊（符合左到右的閱讀習慣，閱讀體驗最佳）、右對齊（閱讀類文本比較少見，一般是為了將分好組的信息填充卡片四角）、居中對齊（居中傳遞嚴肅、正式感，在移動端中較少見，適合信息較少的情況下使用）
親密性：將信息通過留白、分割線、色塊等方式來成組劃分，避免信息散亂。
標簽處理需要注意如下：
視覺層級：一個卡片內可能出現不同類型的標簽，比如同時有活動通知、優惠信息、產品關鍵詞，這個時候就需要了解各類信息重要層級，正確選擇標簽形式（異型、色塊、描邊），幫助用戶快速抓住產品重點。
極限場景：標簽內字段不宜過長，需要考慮最大寬度，進行合理布局。（牽扯到屏效比）
呼吸感：合理定義標簽內部文字與底板的上下左右間距，避免擁擠。
設計感：標簽多數是帶有活動屬性，在設計手法上可以嘗試破型設計，還可以嘗試加入一些小圖標、紋理，一方面營造活動氛圍，提升產品品質感。一方面圖標具有一定語義，可輔助用戶識別。（適合單個特殊標簽添加，而不是一類標簽，因為多個一樣的標簽配上圖標同時展示太亂）
對比度：在色塊標簽中需要重點注意，通常色塊標簽又分以下3類：有彩色底板+白色文字、帶不透明度的有色彩底板+有彩色文字、消色底板+消色文字，在挑選顏色時需注意文字與底板對比足夠清晰，減少閱讀障礙。
按鈕和標簽在處理上很相似，可參照標簽。
信息布局需要注意如下：
拓展性：卡片中字段的長短對布局的影響較大，字段較長且多的情況下需要的占用的空間更多，所以常見是上下布局。
屏效比：上述拓展性與屏效比的關聯緊密，在卡片中，為了保證一行文字最大顯示，通常文字都是單獨一行，避免左右存在元素占用文字橫向空間。但單獨一行就意味著增加了卡片高度，雖然單個卡片內文字顯示多了，但整個一屏中展示內容變少。為了便于理解上面這段話，這里我們可以看到淘寶這個案例，淘寶的推薦卡片中信息很多，在遇到文案很長的情況下，為了平衡上面講的這個問題，使用到了如下較少見的布局方式。
合理性：在列表式左右布局中，是選擇左文右圖，還是左圖右文。這需要看產品類型，在新聞資訊類產品中常見是左文右圖，而在美食、電商類產品中是左圖右文。再有在信息布局上也應符合人眼左到右，上到下的閱讀習慣。
明確產品類型
明確應用場景
了解目標用戶
劃分信息權重
同類信息歸組
增強信息對比
設計細節表現
確定最終布局
1【 明確產品類型 】
產品類型不同主要對布局產生影響。
以文字為主的產品，比如前面講到的新聞資訊類，通常采用左文右圖的布局。
原因：新聞資訊類，吸引用戶產生點擊的并不是因為圖片，而是具體的標題，通過標題用戶才能了解更多關于該卡片的信息。而美食、電商類產品則相反，這類產品圖片比文字更吸引人。
2【 明確應用場景 】
卡片式：在卡片式中圖片是設計的重中之重。這是因為人是視覺動物，在卡片式設計中使用高質量的圖片能瞬間抓住用戶的眼球?？ㄆ皆O計實現了圖文的完美結合，能給用戶呈現良好的視覺效果。
應用場景：
圖片為主，需要利用圖片給用戶帶來良好的視覺沖擊，提升瀏覽過程中的趣味性，從而吸引用戶長時間瀏覽。
適合隨機推薦的內容，不適合進行查找。
豐富內容展示，適合元素較多情況，可以讓各種形式的元素保持井然有序。
列表式：信息集合一般是簡單的圖文組合（小圖+標題）或純文本信息。由于列表垂直排列每一行內容，相對卡片式，在同樣大的屏幕中可以展示更多內容，可供用戶閱讀信息更多，新聞類和數據類應用更青睞于這種設計。
信息直白，用戶無需點擊查看，即能盡可能了解內容信息，適合快速查找。
文本重要程度高于圖片，需要靠標題吸引用戶點擊。
小屏幕應用場景。
目標受眾的屬性，對信息權重的劃分影響很大，比如對價格敏感的用戶，優惠信息的視覺層級就需要抬高。為了便于理解下面的案例，這里我定義的就是對價格敏感性用戶。
4【 劃分信息層級 】
定義了目標用戶后，將卡片內所有元素羅列出來，并借助四象限分析的方法，對各個元素的權重進行劃分。
5【 同類信息分組 】
將同類信息分組，便于后面確定元素之間的親密性關系。
6【 增強信息對比 】
前面我們借助四象限，將信息重要程度進行了劃分。接下來對元素之間親密性和對比進行處理，設計用戶瀏覽視線，在該過程中對案例中的元素進行如下處理：
圖片：這里圖片及比例保持不變
圖標：將原版會員圖標+字段的方式更改為圖標，原因有兩個：1、會員圖標+字段的方式占用了較多的橫向空間，導致標題字段信息展示減少，同時還導致用戶在閱讀完標題后，閱讀下一行內容時視覺錯行嚴重（會員圖標+字段過長導致）。2、由于會員圖標代表會員內容，這是絕大對數產品對用戶有過的教育，所以這里重設了會員圖標并單獨展示。
字體：對標題字體進行加粗，（16pt，Medium），價格字體加大加粗（24pt，Medium），劃線價加粗（12pt，Medium），按鈕文字&活動標簽文字（14pt，Medium）精簡其他輔助信息層級（12pt，Regular）
標簽：優惠信息標簽由0.5pt改為1pt，提升視覺層級?；顒訕撕灋樯珘K降低不透明度+有彩色文字。
按鈕：由于標簽為描邊樣式，為了拉開差異，突出按鈕，所以將按鈕改為實心色塊。
做完上面這些后，可能大部分人覺得到這就可以了，但其實我們還可以再增加設計細節，這也是你與其他設計師拉開差距的地方。
7【 設計細節表現 】
由于案例不同，增加細節的方式不同，所以需要具體案例具體分析。在本次案例中，我通過新增圖標設計以達到豐富卡片細節的作用。在活動標簽中新增小喇叭圖標，來增強活動氛圍、增強信息視覺上的互動性、增強代入感。在按鈕中新增時鐘圖標，配合預約文案，讓用戶預知操作后可能的結果，并且提升按鈕視覺層級、提升點擊欲望。
8【 確定最終布局 】
在布局中主要考慮兩個點：
1、合理性&拓展性
由于該卡片的應用場景為推薦列表，所以這里保持原有的上下布局，遵從人眼閱讀習慣。
2、屏效比
借助這個方式，使圖文內容過渡順暢，閱讀體驗更佳。
盡可能減少了標簽對產品圖的遮擋。
壓縮卡片高度，最終達到提升屏效的目的。
Q1: 3張設計稿中活動標簽為什么進行修改？
答：稿1到稿2，活動標簽樣式修改，位置調整，對應不同的用戶，對于價格敏感性用戶，顯然稿2更能刺激他們點擊。稿2到稿3，對標簽樣式再次進行加強。稿3到稿4，考慮該應用場景是在推薦列表中，為了避免出現多個同類型活動的卡片，導致過亂，所以修改了設計樣式。
Q2:在稿3到稿4中優惠標簽這一排內容，和預約按鈕這一排內容，上下調整的原因是什么？
答：1、將文字區域看做一塊完整的矩形區域，稿3整體看起來更完整，而稿2像是右下缺了一個角。2、在信息閱讀順序設計上，稿3的處理是優先讓用戶看到優惠相關信息，更加迎合價格敏感性用戶的需求。
Q3:你認為最終稿還有優化空間嗎？
答：這個案例，是我截圖與我司相關App的。我認為如果可以，還需要再了解目標用戶畫像，了解用戶真正在意的信息是那些，這些都會對最終方案產生影響，也只有知道這些才能得出最合適的哪個方案。這里我定義的是對價格敏感的用戶，基于這類用戶來說，我認為最終方案是合適的。
文章來源：站酷 作者：幺零三
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近，微信的升級迭代又一次吸引了用戶的目光。蘋果用戶“扔炸彈、放煙花”玩得不亦樂乎，安卓用戶只能默默在一旁等更新。但是也有用戶吐槽，每次更新都上線一些不痛不癢的功能，真正的需求并沒有被滿足。微信走過了十年，伴隨它的爭議只增不減。
互聯網沖浪三件套：蘋果發布會、特斯拉降價、微信版本更新。
微信8.0上線，滿屏的炸彈表情炸了，微信聊天也炸了，還掛上了微博熱搜。身邊的朋友開啟了微信大檢查，在新版微信里探險，就為了找到更新的幾個功能，督促張小龍微信公開課到底交出了多少作業。
歷代微信大版本更新，從來不缺關注。
跳一跳上線時熱情燒了一個月，幾個表情包上線還有人專門發個朋友圈。微信7.0當年的開屏動畫“因你看見，所以存在”，8個字的解讀被抬到哲學高度、人文主義，還有張小龍也沒想到的主義，這次微信8.0開屏動畫一樣不缺解讀。對于視頻號、下拉菜單等功能介紹，也有媒體一本老不正經地整整一篇上手說明書。
放眼國內，大概從來沒有一個APP能夠享受這樣的國民級待遇，網友也越來越懂微信版本更新的節奏：隱秘之中帶著復雜，復雜之中帶著試探。
誰叫它是超10億用戶的國民級APP。
張小龍說過，每天有1億人在教他做微信。
這次微信版本更新同樣不是凱旋。在很多網友在炸彈、禮花中樂此不疲，提前感受過年，另一邊則是質疑和反感。有網友就明顯不為“動態表情”、“狀態”等新功能買單。以“炸彈”表情為例，在捕捉網友情感表達更強烈這點上，微信反射弧太長了，網友們的表情包已經領先好幾年。
即使不說與蘋果的iMessage的表情似曾相識，單單就高度撞臉QQ表情就讓人疑惑：QQ什么時候和微信合并了？在這些網友心中，表情是微信簡潔輕快風格的外皮，表情風格大改意味著微信淪陷。更多用戶則吐槽，微信為什么專門更新這些不痛不癢的更新，超200M文件傳輸限制、朋友圈評論隱私等功能就視而不見？
盡管微信十年之際，微信官方和一些媒體都依然定調：克制，但在網友心中，微信則從“安靜的美男子”變得“油膩”。
不可否認，微信越來越臃腫了，像個300斤的胖子。朋友圈、小程序、視頻號……這些功能先后上線，微信用戶的好感逐漸下線。早在2014年微信揮起分享限制大棒、功能臃腫開始冒頭時，就有用戶嘗試逃離微信，選擇Line等社交工具，然而由于社交關系鏈難以同步遷移，最終不了了之。
“天下苦微信久矣”，但網友們更苦于沒有找到合適的替代品，只能一直將就著用著，不少網友拒絕更新，甚至吹起了懷念老版本微信的風潮，探討回到微信舊版本已經成了一個大類。
對此，微信官方也不是不知道，2015年、2019年就先后強制網友更新版本，否則無法正常使用，其中2019年安卓手機上強制更新的還是微信7.0這樣的大版本，手法上還是從前3Q大戰里的那個少年。
除了自家兄弟QQ外，微信已經成為國內社交軟件的唯一，為何還要頂著被罵，不斷添加功能以及被網友視為無關緊要的更新？
其首要目的在于，防御其他社交平臺的進攻，穩住流量大本營。社交是騰訊的命，而微信的王座并不是鐵鑄的。
一方面，00后橫空出世，獨特的社交習慣已經讓馬化騰陷入深深的擔憂。為了吸引這批新用戶，近年來市場上已經誕生一批社交產品，2019年初三英戰呂布下，更出現了微信被“圍剿”的聲音。應對挑戰，騰訊在2018年-2020年馬不停蹄地上線了10多款社交APP，視頻社交、半熟人社交、興趣社交等等，但在市場少有水花。得不到的永遠在騷動，自然這種焦慮就很大程度轉化成對微信改造。
馬化騰的一段講話就例證，道出了焦慮的同時也說明微信不斷更新、日益臃腫的原因：
“越來越看不懂年輕人的喜好，這是自己最大的擔憂。而且用戶的需求和喜好瞬息萬變，95后、00后人群的需求是什么？我們每天都在研究。包括微信，沒有人保證一個東西是永久不變的，因為人性就是要不斷更新，可能你什么錯都沒有，最后就是錯在自己太老了?！?
另一方面，微信還面臨勁敵抖音的流量爭奪戰。頭條系已經被視為騰訊系最大勁敵，在最核心的用戶時長爭奪上，騰訊系在萎縮，而頭條系不斷增長，其中抖音作為拳頭產品·“殺時間”利器，貢獻最大。據抖音官方數據顯示，目前其國內月活已破5億，增長迅猛。
總共24個小時的用戶時長，使用抖音的時長增長，等于使用騰訊產品減少，更何況抖音上線多閃聊天已經繞開騰訊分享限制大棒，殺入微信的社交腹地。兵臨城下，看著扶不起的微視們，騰訊只能繼續借道微信版本更新，加碼微信視頻號。
物理學有一個觀點：極其巨大的物體會坍塌成黑洞。當下越來越臃腫的微信也正向著巨大超級APP前進，坍塌與否，也須警惕。
2009年，谷歌退出國內大陸市場，至此國內市場僅有搜狗搜索、360搜索，幾乎沒有對手的百度一騎絕塵，市值一路高漲，到2011年超越騰訊成為BAT一哥。但其后是進入長期的業務停滯，甚至錯過移動互聯網浪潮，被解讀為戰略迷失。
目前，微信官宣用戶達12.5億人，國內用戶約10億，占據八成，國內網民滲透率接近100%。可以說，微信獨占國內市場，Facebook、Instagram等全球社交巨頭未進入大陸市場，給了微信得天獨厚的優勢。
然而，也正是這種優勢，或讓微信面臨戰略迷失。
微信改變了國內用戶使用習慣，也被國內用戶使用習慣改變，其結果便是在海外市場水土不服，甚至在文化接近的日韓、東南亞地區都難以取代Line。
微信問世之初，視覺元素、交互設計、表情包功能常常被拿來和Line對比。迭代至今，Line仍然保持的通訊屬性，主打“萌新”和“溝通”功能，而微信在各類功能的疊加后，定位越來越模糊，在拓展海外市場難以給人留下深刻印象，在國內的版本更新也伴隨著不理解和吐槽。
微信的功能更新越來越四平八穩，也越來越沒有記憶點。而在這個時代，對一款產品而言，沒有記憶點是致命的。
文章來源：人人都是產品經理 作者：霧科技
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
選擇器是一個輸入字段， 用戶必須在其中選擇一個（或多個）選項，這與文本字段中用戶可以自由使用的輸入區不同。選擇器具有各種不同的形狀和形式。下拉菜單，復選框，切換按鈕，滑塊等都是不同類型的選擇器，但它們看起來彼此并不相似。這些類型的選擇器之間的主要功能差異是用戶可以選擇的選項數量：一個或多個。
單選選擇器按效果又可以分為：點擊選擇器、滑動選擇器、多聯動選擇器、開關選擇器、可搜索效果的選擇器、地圖選擇器。
特點：同一時間只能選擇一個選項，當你已經選擇完一項后，準備選取另一項，那么后選的一項會立刻使先選的一項被取消選擇。
點擊選擇器
點擊選擇器可分為兩種狀態，狀態一為立即觸發，當你點擊后會立即跳到下一步操作；狀態二為再次確認觸發，當選中某項時，不會立即觸發操作，而是需要再點擊別的觸發類組件（如保存按鈕）后，再執行操作。
特點：直接進入，并沒有再次確認的按鈕，可以讓你快速到達想要的目的。
建議：雖然目的能快速達到，不過也很可能會造成誤操作，所以在設定這類選擇器時要多考慮手指的觸碰區域以及每個選擇元素的距離，同時正因為是直接跳轉，所以應當加入一些操作提示。
舉例：汽車之家在用戶選擇二手車時就會出現此選擇器，當我在汽車之家想要選擇二手車時，它會彈出立即觸發式選擇器控件，我們在控件上可以看到有7個圓形選項，分別為：汽車之家誠信聯盟、準新車、奧迪、奔馳、寶馬、三廂轎車、分期購車，當我點擊“奧迪”選項時就會立即跳轉選擇后的頁面，為了讓用戶知道自己選擇后的狀態，在跳轉頁面時還會彈出非模態彈窗的文字提示“共找到1943輛車”。
特點：這是最為常見的選擇器類型，當所在選項選上，除了選擇另一個選項之外，便沒法取消選中狀態。（選且只能選擇一個選項）
建議：在設定此類選擇器時我們應該從產品的角度去考慮是否給用戶一個默認選項，甚至是否考慮給出一個重置按鈕。
舉例：我剛注冊小紅書時，在小紅書填寫信息頁面中，它的默認選項是“男”，我點擊“女”，則會自動取消掉“男”，它們兩者并不能同時存在，并且只有我點擊下一步按鈕時才會正式確認我選擇完成。
滑動選擇器
特點：滑動選擇器是將需要選中的內容滑動至中部，然后點擊確認按鈕確認選中后返回選中內容。大多數運用在選擇時間或地址上。
建議：滑動選擇器的展示區域有限，部分選項會被隱藏，最好是當用戶對所有選項都比較熟悉、有預期的時候，才使用它。為了保證手機屏幕觸控精度，以免發生誤觸，滾輪選擇器建議控制在5列以內。
舉例：在小紅書填寫年齡信息時，我們只需用手指在區域內滑動即可選擇想要的選項。
多聯動選擇器
特點：多聯動選擇器是由兩個或兩個以上的中繼器制作而成，第一個中繼器選擇后，一般會對第二個中繼器進行篩選，不過因為顯示的區域有限，所以當你要切換時，還只能挨個切換，效率低下。
建議：可以通過數據以及功能來減少選擇時間，例如在選擇地區時，根據當前GPS定位地理位置，定位相關省級信息及名稱，減少滑動操作。
舉例：如下，當我選擇了內蒙古自治區，那么2級內容就應該篩選掉內蒙古以外的城市，比較適用于省份-城市或者品牌-產品這種類似的選擇，當然下面第一張多聯動選擇器也結合了滑動選擇器。
△ 選擇城市時，我們必須要先選擇省份，再選擇城市，最后才能選擇縣；
多聯動選擇器展示的方式非常多，不僅可以用滑動形式展示，還可以用點擊、平鋪列表等形式展示。
上圖則沒有先后順序，不過當你首先選擇顏色時，如果沒有相同尺碼的衣服，缺貨的尺碼則不會被選中，先選擇尺碼也是相同道理。
切換開關選擇器
特點：切換開關選擇器有且只有兩種選項，用來在開和關兩種狀態之間切換。開關屬于觸發類組件，撥動開關時，它所指揮的某個操作會立即生效，常見的使用就是授權。開關的默認狀態并不都是關閉的，還要從產品本身的設定上來決策。
建議：如果某開關的功能是用戶經常使用的狀態，那么可以在默認狀態下打開開關，不過需要注意的是在某些特殊的開關按鈕需要打開時，必須要提前告知用戶。
舉例：當我打開UC瀏覽器的設置時，它的輔助功能就使用了切換開關選擇器，切換的開關只需要點擊即可。
可搜索選擇器
特點：可搜索選擇器一般用于選擇項較多時，特別是對于電商購物類的APP搜索選擇器是必不可少的，搜索選擇器會根據用戶輸入的內容，對中繼器進行模糊的搜索，讓用戶快速找到并選擇內容。
建議：在搜索區域輸入文字時，可給予用戶更多的文字提示以及以及引導類信息。
舉例：小紅書在搜索時就會出現數字化的信息提示，這樣能夠很好的引導用戶進入到想要的搜索結果：筆記或者商品頁面。
地圖選擇器
特點：作為最特別的選擇器，它的功能是復雜的，它的操作方式也是多樣化的，地圖選擇器的操作可點擊、可拖拽、可放大縮小等等，它多用于生活類APP。
建議：可以在選擇器中加入更多趣味、互動、可感知的設計，如加入過節元素、車輛行駛路徑、熱門區域、甚至選取后手機的震動等。
舉例：打車類APP必用的地圖選擇器，滴滴出行的用戶可以實時看到車輛信息，可以采用點擊、拖拽、放大等操作來選取上車地點，選取后還有文字信息提示，讓用戶確認操作是否正確。
貝殼APP則用地圖選擇器來讓用戶選擇二手房，同時也采用了聯動式的效果，第一步是查看區域，可以明確看到區域的售房套數，點擊選擇區域后我們可以看到每個路段的房子套數，點擊路段后就可以看到每個樓盤的套數以及均價，直到點擊樓盤就會彈出詳細信息框。這樣有助于用戶在選擇二手房時從大數據分析二手房的情況，有更好的對比性與選擇性。
當單選選擇器不能滿足用戶需要時，這時我們就可以采用多選選擇器，一般常用的多選選擇器都是采用點擊的方式，當然也有滑動類型的多選選擇器。
點擊多選選擇器
特點：當用戶想要選擇多個類別的情況下，我們就可以用點擊多選選擇器來展示提供給用戶選擇，通過屏幕點擊選中或取消選中該選項，它不會立即觸發操作，需要再點擊別的觸發類組件（如保存按鈕）后，再執行操作。
建議：從用戶的角度來講盡量不要強制用戶選擇數量或者默認全部數量；多選項時觸碰區域不能太小，以免造成誤操作。
舉例：小紅書在選擇感興趣的內容時就采用了點擊多選選擇器，不過在選擇興趣時它就強制用戶至少關注4個興趣，而對于單興趣或者少興趣的用戶來講，這無疑會造成用戶體驗的不佳，被逼再次從中選擇次要的興趣。
滑動多選選擇器
特別注明：從用戶的角度來看，它可以選擇多個區域段的內容，所以我把它分為多選選擇器中。
特點：當系統給出的選項不在自己的選擇區間時，可以很好的自定義選擇區間，把定義權限交在用戶手里。同樣，它需要再點擊別的觸發類組件（如保存按鈕）后，再執行操作。
建議：在用戶滑動操作期間要有明確的操作提示，讓用戶時刻感知目前處于的狀態；滑動區域盡量不要超過100刻度，如果刻度距離太小，用戶在滑動時也很難精準的選擇范圍。
舉例：在汽車之家APP中，當我要選擇汽車價格范圍時就會出現此選擇器，我們可以用手指滑動來選取它的價格區間，相對于上半部分的單選價格拓展性更強，用戶可以自行選擇上半部分的單選選擇器，也可以選擇滑動多選選擇器，給予用戶更多的選擇。
標題易懂：
在選擇器中標題一定要簡單明了，很快的讓用戶知道他在為什么做選擇（如：當你關注某烹飪的APP后，它會讓你勾選喜歡的菜譜，你的標題就可以用“選擇菜譜”四個字，簡單明了）
文字標簽易懂：
一般使用短語而不是句子，也并不需要用標點符號來結尾。（如：當選擇想要的菜譜時，菜譜后的文字不需要加入標點符號）
選取狀態易懂：
用戶能夠明確感知什么是選中狀態，什么是未選中狀態，什么是禁用狀態。（如：選中狀態為高亮顯示，未選中為普通顯示，禁用狀態為灰度顯示）
反饋提示易懂：
當你在選擇中遇到選項限制或是否需要確認操作時，反饋提示一定要一目了然。（如：當你選擇某衣服時，S碼不能選擇，則會用灰度顯示的文字代替，甚至可以用中橫線劃過文字，明確告訴用戶不能選擇）
從邏輯順序：
邏輯排序能讓用戶很快很準的找到自己需要的選項，特別是對于選擇地址/時間/個數等常規的選項時，可以按照字母/遠近/大小來進行排序。例如下面在選擇地址時，就是按照A-Z字母排序，這樣可以大大節省用戶選擇的時間。
從產品利益角度排列順序：
當然為了產品自身的利益也可以自己優化排序方式，選項的順序可以說服用戶進行選擇，用戶可能因為第一個選項在列表中的位置而選擇了第一個選項；可以輔助用戶，也可以讓用戶向著產品所希望的方向傾斜。例如你在選擇菜譜時，產品為了讓用戶選擇更加優質的菜譜，就會把用戶評價高的菜譜放在前列；當然商家也會這么做，例如你要去買某款商品，商家會在選項中把熱門、優質的產品放在最上方，讓你優先選擇。
從用戶體驗排列順序：
從用戶角度來說哪些對用戶體驗好，那么就把它排在前面。例如汽車之家在進行車輛類別的排序中就把用戶量最多的轎車排在第一位，而把用戶量最少的輕客放在了最后一位；同樣它在汽車品牌選擇中，單獨列出了熱門品牌把它放在前列，讓用戶進行快速選擇。
視覺布局一致：
每個元素之間的對齊、元素與元素之間的間距、按鈕不同狀態的視覺體現。一般情況下移動端更傾向于左對齊，這樣有利于快速讀取選擇內容，可以提高用戶的瀏覽效率并減少錯誤。
圖片/插畫風格統一：
在圖文結合的選擇器中，我們一定要保證圖片（插畫）的優質以及風格的統一。
默認選項是選擇器的開始狀態。在不同的選擇器中有不同的默認方式。
默認未選中：
這是最常見的一種狀態，特別是對于選擇年齡、生日這些個人隱私信息，系統也沒有辦法進行默認選擇。
默認選中其中一個選項：
要想默認其中一項，必須考慮兩點因素，因素一：你想要潛意識的像用戶傳達信息，在單選選擇器中默認選擇一項后，就可以潛意識的向用戶傳遞信息必須要在這組單選項之中選擇一個。因素二就是產品的傾向，例如此產品的性別9成都是女性，那么建議默認選項為女性。
默認選中全部：
其實默認選中全部在用戶體驗上來講真的不是那么的友好，例如微博這個選擇器界面，剛進這個界面時已經全部勾選中，并且當你沒注意習慣性的點擊下面的按鈕時會生立即生效，沒有返回的余地。（吐槽：有些APP甚至沒有一鍵取消功能，要一個個的點擊取消…）這也是為了產品犧牲掉了部分用戶體驗吧！
單選選擇器的更多選擇：
如果用戶不想做出選擇，那么應該提供一個中立選項，為用戶提供一個明確的方向，中立選項比勉強選擇要好。例如在選擇行業領域時，以上并沒有你所處的領域或你不確定你的領域，你就可以選擇“不限”或“其他”。
多選選擇器的更多選擇：
在多選選擇器中，如果不能把控到用戶的準確選項區間，那么可以考慮滑動多選選擇器，讓用戶有更多的選擇區間，不管是汽車之家還是懂車帝在選擇車輛價格上兩者都是采用的相同方式。
選擇控件在操作過程中必須更改其狀態/外觀，要明確讓用戶知道是否能選中，是否被選中?？丶顟B一般分為三種：未選中、選中、禁用。
未選中
選擇器的開始狀態，向用戶表明，可對該選擇控件進行操作。
選中
用戶操作選取狀態，選擇控件處于被選中的狀態。
禁用
一般情況會為灰色顯示，用戶將無法與選項進行交互。
指的是用戶在操作中讓用戶得到相應的反饋，用戶根據這些反饋可以判斷當前狀態以及操作后狀態。在選擇器中，操作提示一般用輔助文案提示及非模態彈窗提示。
輔助文案提示（選擇前與選擇中）：
輔助文案指的是在選擇控件主體之外另外放置一些文案信息來充當說明，例如下面是地區選擇，我在選擇不同層級的區域時，它的上方會出現輔助提示文案，讓你明確的知道你上一層級選擇的是什么。
同樣，當我在選擇價格區間時，滑動選擇器的左上方一樣有文字類的提示：
非模態彈窗提示（選擇后）：
非模態彈窗一般出現在用戶操作完的跳轉頁面中，為了讓用戶感知所選的選項在頁面的狀態，如下，非模態彈窗告知用戶一共有7輛車符合標準。
當然除了非模態彈窗外，還有模態彈窗，但是用戶體驗極差，目前很少使用，所以就不列出來了。
擴大點擊區域：
在選取按鈕類的操作時，容易出現點擊不到或誤操作的現象，我們可以通過擴大點擊區的交互區域來提高易用性，例如下圖，雖然按鈕在左邊，但是可以把橫向區域都列為可點擊區域。
當然我們也可以從設計的角度來擴大視覺范圍，從而也提高了點擊范圍，這樣的處理不僅提升了視覺層面，還提升了交互體驗。（圖文結合方式）
注意交互間距：
在元素與元素之間一定要有合理的交互間距，不然很容易出現誤選的情況。
合理利用有效區域：
在選項較多的選擇器中，我們可以利用好選擇主體控件之外的區域，例如在選擇城市/品牌時，我們可以做A-Z index式字母交互區，幫助用戶快速找到想要的選項。
讓用戶選擇本來就是一件枯燥乏味的事情，如果讓這件事變得有趣那么會極大的提升用戶體驗。
從文本層面：
例如當用戶填寫性別信息時，你給予用戶的文字信息并不是“男”/“女”，而是“帥氣的boy”與“酷酷的girl”，這樣會讓用戶覺得這是一件比較有趣的事情，而不是被動選擇。（注：這樣的取名一定要符合產品的特性）
從視覺層面：
加入可玩兒性的選項，例如汽車之家的頭像切換，可以選擇自己喜歡的頭像。（頭像并不是強制選擇的，如果不進行操作則是默認選項）
從交互層面：
讓用戶去享受選擇。例如Soul的星球首頁就做的非常棒，在未選擇狀態他的人物會360度圍繞著轉動，當然你也可以快速拖拽，或者放大縮小，可玩兒性十足，并且在內部設定了最匹配/新人的高亮顯示，協助用戶去選擇。
不同的產品在使用選擇器時都各有不同，因為每個選擇器都有它的利弊，而真正要怎么去選擇還要根據產品本身來定。
那么我就拿目前市面上最常見的5個地址選擇器的類型來分析一下利弊：
多聯動選擇器（平鋪式）
貨車幫采用的是多聯動平鋪式選擇器，它最大的特點就是能夠一眼就看清楚所有地址，不過地址多時需要花時間去找，只是當你經常使用此功能時便會形成記憶，再此搜索的時候就能形成記憶點擊，效率很高，并且在操作外還有路徑提示，不僅可以幫助你記住層級選項，還可以實時返回路徑進行重新選擇。
手勢操作：點－點－點
多聯動選擇器（列表跳轉式）
閑魚采用的是多聯動列表跳轉式選擇器，這個選擇器最大的缺陷就是選擇三級之后用戶可能會忘了上一級的內容，那么就又要切換到上一級，閑魚采用它的原因是因為它只有二級聯動，不存在遺忘現象，不過這樣列表式的選擇效率并沒有平鋪的效率高，人眼習慣掃視橫向內容，所以橫向的內容獲取往往要比縱向的多，在地址選擇器上我個人是不太建議采用多聯動列表跳轉式，因為并不也不直觀。
手勢操作：滑－點－點
多聯動選擇器（列表式）
轉轉采用的是多聯動列表式選擇器，它的優點是可以根據右側字母來找城市，數據偏大也能夠很快的查找。不過如果在層級的選項中出現錯誤，同樣就要切換到上一級，并且在操作中沒有輔助信息提示。
手勢操作：滑/點－滑/點
多聯動選擇器（下滑式）
安居客采用的是多聯動下滑式選擇器，這種形式的選擇器不會遮擋后面的主要內容信息，在選擇完地址之后能立即看到地址的篩選結果。優點是能快速選擇多級地址，并且層級分明，擴展性較強可以做成地址多選。缺點是不適合3個層級以上的地址選擇。
手勢操作：點－滑/點－點
地圖選擇器
美團外賣采用的是地圖選擇器，這個選擇器一般用在需要精準定位的生活類APP中，它的優點就是能夠快速精準定位，并且自動錄取定位信息，它的缺點也顯而易見，不能含帶層級并且對范圍也有約束。
文章來源：優設 作者：黑獅力
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2020 年，新冠疫情席卷全球，后疫情時代的需求也促使設計師們不斷提出更有意義的醫療解決方案。作者梳理了醫療保健類 APP 的類型，從產品的研究、功能特性、導航、顏色等角度提出了針對醫療保健 APP 的一系列設計建議，簡單直觀的界面、便捷的功能，以及積極的情感，才能使用戶接受并喜歡原本 “令人生畏” 的醫療產品。
△ Justas Galaburda 繪制的插畫
在移動應用市場中，的應用類別是 “游戲”，而 “健康與健身” 類勉強躋身前十名。2020 年是十分艱難的一年，但也創造了很多機會，例如，移動應用市場中醫療行業的產品大熱，受到多方關注，這類產品直接影響人們的健康行為，可以使人們的生活更加輕松愉快。
為此，大批創業人士開始關注醫療這一領域。首先，你需要制作一個功能強大的 APP，因為如果一款產品不能交付使用的話，它就一文不值。但是，這種功能必須通過設計能力來呈現。一個好的醫療保健 APP 設計，應突出其最重要的細節，引導用戶進行操作，并提出下一步建議，從而產生必要的行動。APP 本身可以成為有效的潛在客戶開發工具和公司的主要產品。對于一個健康或醫學相關的產品來說，用戶界面或用戶體驗設計尤為重要。
△ George Frigo 設計的呼吸檢測 APP
本文將探討一些醫療保建 APP 設計的成功案例和經驗，這對設計師和企業來說都很有幫助。
值得注意的是，“醫療保健類 APP” 是一個綜合性概念，涵蓋了許多與健康和醫學相關的數字產品。
醫療保健 APP 類型很多，包括但不限于：
這似乎是一個相當寬泛的主題（例如，卡路里計數 APP 和醫學教育解決方案相差甚遠，卻都屬于這個領域）。但是，有一些通用的設計方案，可以提高任何一款 mHealth APP 的易用性。（ mHealth（Mobile Health，移動醫療或移動健康）：通過移動設備提供與醫療相關的服務，例如，通過 PDA、移動電話和衛星通信來提供醫療信息和醫療服務等。）
△Victor Nikitin 的醫療類 APP
一款 APP，即使它不是企業的主要產品，也可能具有巨大的價值。例如，用于醫療工作的配套 APP，能夠為客戶提供信息和服務，從而減輕員工的負擔。如果一款醫療保健類 APP 是企業的主要產品（例如，健身或冥想 APP），因為沒有硬核的業務場景支持，會有很大的風險。有時，這類 APP 設計中的不足會導致用戶完全放棄使用它。
為了避免這種情況，我們來看看設計醫療保健 APP 的 12 個要點，以及它們如何幫助設計師們設計出更具針對性、更直觀、更的 APP。
△ Anatoly 設計的 Healthcare APP
1. 研究 – 成功的第一步
在制作 APP 界面原型之前，你需要了解產品的目標受眾是誰，他們的地理分布、社會人口特征以及心理特征是什么。因為沒有一種產品可以滿足所有人的需求。用戶的興趣和能力決定了他們如何與 APP 進行交互。因此，回答以下問題將對你有所幫助：
一般來說，患者和醫生都會使用醫療保健類 APP（假設我們將生活方式類 APP 的用戶也視為患者）。這兩類用戶在功能和 UI 設計方面有不同的需求。
醫務人員通常需要快速找到一些數據項，例如 EHR / EMR、藥物規格、診斷和治療建議、參考材料等。但是，患者希望能與盡可能少的信息進行交互，且這些信息應該簡單易懂。因為這類用戶中有很多是老年人，或是存在某些障礙的人。
只有在進行適當的用戶研究，并得出相應結論后，設計師才可以著手進行醫療保健類 APP 的設計。
△ Chahua 設計的健康管理 APP
2. 每一個案例都簡潔明了
對于一般人來說，醫學是一門復雜的學科。所以在設計醫療保健類 APP 時，請盡可能地讓它們保持簡單，這有助于讓用戶平靜下來，并保持專注。
“復雜性是你的敵人。很多傻瓜都可以讓事情變復雜，而讓事情變簡單是很困難的。” — 理查德·布蘭森
為了讓醫療類 APP 看起來很重要并給人留下深刻印象，而將其界面做得過于詳細，是沒有意義的。即使該產品是為醫務人員設計的，也最好 讓界面和邏輯易于理解。
△ lgor Savelev 設計的醫療類 APP
在設計醫療保健類 APP 的用戶界面時，請提供有意義的用戶引導，并 使界面直觀易懂。否則，用戶可能會在觸達該應用核心內容之前就對其體驗感到沮喪。
如果該 APP 清晰明了，醫生及患者雙方都更容易接受。這樣一來，用戶易于學習上手。即使它是針對醫療的解決方案，人們也不會感到不習慣。
為幫助用戶在比較舒適的節奏下了解產品功能，請使用漸進呈現的原則，逐步為用戶提供指示。從新手指引開始，將應用程序中的每個操作分成可管理的小模塊，每次僅提供一個指引。（漸進呈現（progressive disclosure）：每次只展示用戶當前需要的信息，引導人們平緩地由簡單狀態進入復雜狀態。例如將原本復雜的邏輯隱藏起來，通過更易于認知的界面形式幫助人們輕松完成最為基礎的任務。）
另外，采用被動輸入、自動輸入、調整鍵盤和動態驗證字段的方式，能夠限制用戶必須輸入的信息量。
所有醫療信息必須由受過相關教育且具備專業知識的專家提供。否則，內容要么不完整，要么包含錯誤，對于醫療產品來說是不可接受的。
△ yurig 為醫生設計的醫療類 APP
3. 功能和特性
醫療保健類 APP 的 功能及特性取決于其用途和目標受眾。例如，醫療中心 APP 需為用戶提供個人帳戶，在該帳戶中，用戶可查看其就診記錄、就診建議以及預約情況。如果沒有安全加密的視頻會議和通訊功能，遠程醫療 APP 將毫無意義。畢竟醫療類 APP 依賴的是可靠且有用的通知。
主頁承載著一個 APP 的主要功能。請試著回答這個問題：用戶為什么使用你的 APP？或與之類似的 APP 呢？如果用戶訪問 APP 是為了記錄或接收某些信息，或是聯系醫生，查看他們的進程等，那么這個功能應該位于 APP 的主頁。
重要的是，正如前文所提到的，避免一次性出現太多功能，從而造成混亂。不可否認的是，這種情況經常發生在老版本的 APP 上。這些 APP 常常不斷添加新功能，偏離焦點，以至于只有專家用戶才能理解它。
（專家用戶（super-users）：專家用戶在生活中愿意給予企業反饋，主動做口碑，或是積極分享、點贊等，這些無法以價錢衡量，卻能在品牌價值傳遞、產品創新、營銷推廣等經營各環節，為企業帶來實質貢獻。）
根據帕累托原理（二八法則），80％ 的用戶傾向于使用不超過 20％ 的功能。因此，務必確認哪些功能對用戶來說是最重要的。
（帕累托原理（ Pareto’s principle）：也稱二八法則。在任何特定群體中，重要的因子通常只占少數，因此控制具有重要性的少數因子，即可控制全局。）
△ Manoj Dalvadi 設計的 Medicine APP
4. 便于探索與享受的導航
清晰的導航結構是一個有效的醫療保健類 APP 的必要條件，也是醫療保健類 APP 用戶界面設計的基礎。沒有清晰的導航，APP 是不會被廣泛使用的。完善的導航意味著率和易用性，這對用戶來說是十分有價值的。醫療專業人士需要的是能夠快速開展工作的應用，因為他們花費了太多時間在處理電子健康檔案（EHR）上。一項由斯坦福醫學院展開的調查發現，醫生花費在每個病人身上的時間，有 62% 是用于處理電子健康檔案。如果針對醫務人員的 APP 不夠簡潔，那 APP 便失去了使用價值。同樣的，對于患者來說，他們也不會喜歡混亂的導航，即使當前的任務不是很重要。
重要的信息應放在明顯的位置，并在必要時提供詳情。根據 3 次點擊原則，系統應保證用戶在 3 次點擊之內，找到所需信息。
為了使 APP 導航結構清晰，可采用標準的 APP 導航組件，如漢堡菜單、標簽欄或抽屜式導航等。
△ Alex Samofalov 設計的醫療類 APP
一般來說，APP 的顏色選擇取決于目標受眾以及該 APP 的主題。
醫療保健類 APP 設計通常采用中性色調，尤其是冷色調的藍色和綠色，背景一般為 白色。設計師這樣做是為了達到以下效果：利用柔和的色彩和醫療保健行業的聯系，緩解用戶焦慮并增加可信度。因此，在醫療保健類 APP 的用戶界面中，亮紅色或黃色是很少見的。
△ Adam Soko?owski 設計的醫療類 APP — Pharmagy
但是，考慮到醫療類軟件的多功能性，顏色選擇并沒有特別的限制。主要思路是，這類 APP 的整體外觀應營造積極的印象，不應引起焦慮、恐懼或其他不良情緒。
例如，深色的健身 APP 看起來優雅且有品味：
△ Saepul Rohman 的 UI 設計—健康及鍛煉類 APP
而亮色為 APP 增添了許多活力：
△ Michal Parulski 設計的移動健身 APP
APP 的個性化定制是近年來最顯著的設計趨勢之一。特定的功能與特定的用戶模式相適應，并且系統會暗示用戶下一步可執行的操作，以免被用戶忽略。
這些技術的目標是，幫助用戶更快地利用 APP 解決問題。因此，有必要識別和分析用戶模式，并跟進他們的變化。
正如每個人都有著不同的健康狀況，用戶希望他們所使用的 APP 也能提供同樣獨特的體驗。除此之外，在非醫療保健行業，也有 33％ 的用戶會因個性化程度不足而卸載應用程序。
在設計醫療保健類 APP 時，可以使用許多自定義選項，如顏色主題、個性化通知、交互元素，以及利用 AI 定制個性化推薦等。
△ Jawad 設計的在線咨詢 APP
無障礙的 UI 設計對任何 APP 來說都很重要，對于醫療類 APP 尤為重要。
移動醫療解決方案針對的是不同年齡，具有不同視覺和聽覺能力、身體和心理特征的用戶。因此，醫療保健類 APP 主要功能的設計，應保證每個潛在用戶都能訪問。請考慮可能存在的限制，并努力克服它們的負面影響。例如，有暈動癥的人不會喜歡過多的動效。
但這并不意味著一個醫療保健類 APP 的界面中只能有兩種顏色，也并非所有文本字號都要非常大，但這確實意味著設計師將面臨一些挑戰。對于醫療保健類 APP 來說，其中的挑戰也許相對多一些。無障礙設計能帶來更多的機會，而不是負擔。試著從瀏覽 W3C 網頁中關于無障礙指南的內容開始，嘗試使用色盲模擬器，如下圖這種。
無需多言，試試移動端無障礙設計的常用方式：將主要元素的尺寸控制一個拇指大小的區域中、添加將視圖改為水平模式的選項，以及放大文本的選項等。
△ keithar 的對比度分析儀和色盲模擬器
醫學不僅復雜，而且通常令人生畏，即使涉及的醫學內容不多。一個比較聰明的辦法是使 APP 看起來與醫學毫不相干。這將消除用戶因刻板印象而產生的壓力，并使體驗更加愉悅。
除了使用柔和的顏色，還可以在用戶使用 APP 的不同階段 推送鼓舞人心的消息、有趣的圖片、歡快的語音或其他元素。醫療保健類 APP 用戶界面中的圖像和圖標，應始終帶給用戶積極、愉悅的情緒，并 營造一種無痛感和安全感。
△ Mahdieh Khalili 設計的冠狀病毒 APP
當產品已具備現成的網站，企業方甚至設計師為了降低制作成本，可能會想從產品的網頁版中 “借鑒” 一些解決方案直接應用在移動端設計中，這很可能導致用戶拒絕使用 APP。
用戶與移動設備間的交互不同于與電腦間的交互。移動設備的屏幕比顯示器屏幕或筆記本屏幕小。此外，用戶與移動設備交互的方式不同于在電腦上進行的操作。在移動設備上，我們做任何事情都依賴手指的移動，不愿意輸入冗長的文本，但同時希望系統能更快地工作。
一般來說，盡管 APP 中的導航也很重要，但對于移動設備而言，更需關注的是交互設計。在大多數情況下，人們喜歡使用網站來獲取信息，使用 APP 來完成任務。此外，APP 還集成了智能手機的功能，如加速度傳感器和攝像頭，這也是導致 APP 的用戶界面設計與 Web 版有所不同的原因。
△ Grace Saraswati 設計的健康健身類 APP
視覺吸引力與功能性之間的平衡是非常重要的。醫療保健類 APP 必須便捷，且不能分散用戶對內容的注意力。
圖形元素，包括動畫，應始終以滿足使用目的為前提，來考慮是否需要，如數據輸入，以及說明用戶與系統間的微交互等。不能僅僅因為它看起來不錯而添加。不要過度使用漸變和陰影，要將用戶注意力集中在主要信息上。字體也只需選擇一種，可以通過改變字號和其他特征（如斜體、粗體）來做區分。
使用簡單的配色方案可以更清晰地傳達品牌信息，并創造更好的導航效果。
△ Dibbendo Pranto 的健康及活動追蹤交互設計
你可能會在某些點上考慮，是否要借鑒一些競爭對手的成功案例。好吧，如果這有用的話……一方面，抄襲其他產品是不明智的，因為 它們的設計可能并不完善。你采納的可能是競爭對手的錯誤決策，以至于阻礙 APP 的未來發展。
另一方面，你應該先對其他應用進行分析，對競品進行研究。應該參考用戶以前使用其他 APP 的經歷，并進行借鑒，從而降低用戶的學習成本。添加太多創意會使 APP 顯得很煩人，用戶需要花大量時間去習慣并學習操作。為此，可以參考蘋果制定的人機交互指南（Human Interface Guidelines ）和谷歌制定的材料設計指南（ Material Design）。
“用戶大部分時間是花在別人家的網站上?！?— 雅各布定律
（雅各布定律：用戶在其他千千萬萬個網站中積累經驗，學會如何使用網站，當一個網站跟其他網站一致時，用戶會立刻知道該如何操作，但如果違反了雅各布定律，用戶會毫不猶豫地離開。）
必須根據品牌、服務和產品細節來進行設計。例如，健身類 APP 與醫學計算器有著很大區別。設計必須完全符合目標受眾的要求、APP 的功能細節及主題場景等。
△ Martyna Zielińska 的醫療提醒 APP
最后，重要的是要記住，每個設計師都有自己的觀點，認為這個或那個決定是合理或有效的。他們可能會對 APP 架構和導航的一致性，嚴謹的設計解決方案，以及產品的實用價值深信不疑，以至于忘記了測試。通過不斷的實踐，設計師提高了自己的共情能力，可以更好地理解用戶需求。但事實上，直覺和經驗帶來的潛在陷阱也會給應用帶來負面影響。
只有在分析用戶與 APP 界面交互的相關數據后，才能得出相對準確的結論。測試有助于及時獲得反饋，覆蓋 APP 中的所有行為場景，并檢查交互模式。
用戶的積極參與是成功的關鍵。相關測試受眾的年齡、職業、地理位置、性別、文化和宗教背景等要盡可能接近目標受眾，越接近越好。盡可能多地讓他們使用 APP 的主要功能并收集反饋。
△ Alex Samofalov 設計的患者卡片 APP
設計所關注的并不僅僅是顏色和字體，而是創造價值和解決業務問題的能力。健康是一個敏感且具有挑戰性的問題，需要特別注意。設計師們一直努力地在醫療類 APP 極高的安全性及可用性要求與界面美觀性之間取得平衡。
經過深思熟慮的醫療保健用戶體驗和 UI 設計是一種極好的工具，它能憑借簡單直觀的界面、便捷的功能以及它所帶來的積極情感等，吸引用戶參與體驗。
文章來源：優設網 作者：TCC翻譯情報局
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
