近日在短視頻上有關「高德 AR 導航」的相關視頻成為爆款，得到了廣大用戶的歡迎和點贊，下面就和大家一起分享，高德 AR 導航從無到有的體驗設計原則和背后思考。
△ 高德 AR 導航效果
各大公司入局 AR 現實增強領域，現實增強技術也逐漸趨于成熟，隨著對 AR 應用領域深入探索，圖像識別數據的積累以及 AR 導航體驗探索變得非常重要。高德地圖基于大量的地理信息數據和精準的導航能力，AR 實景導航正式發布，讓駕駛員能夠身臨其境的感受增強現實帶來的駕駛樂趣，那么在復雜的環境中又如何把握體驗設計？與界面設計又有什么不同？一直是我們在思考的課題。
我們先從用戶反饋、競品分析、AR 導航載體、安全性、環境感知、設計語言 6 個層面切入分析，把探索的方案落地到 AR 引擎中實驗，再到高德地圖車機版上線驗證，最后服務于高德 ToB 車企出貨，帶來實際收益。
作為設計師，習慣了用屏幕的二維空間去思考信息效率的最大化，但是把體驗和設計放在三維空間中，會受到環境、光線、安全性、場景、人、車、路等相互影響。
1. 環境影響設計
環境的變化影響分為自然環境、道路環境、駕駛環境三類，不同的天氣、道路等級、駕駛因素都會對駕駛員的感受、反應、狀態產生影響，所以在 AR 的空間體驗設計中，這些影響需要充分考慮其中。
當考慮完環境因素后，還應該去真實的駕駛情景中分析信息呈現的權重，比如車輛在行駛中前方移動的物體一定比車輛靜止時看到移動物體的權重要高，那么在設計上，需要明確信息層級和顯示時機及策略，讓駕駛員在行駛中能夠快速獲取，且正常駕駛不受其影響。
2. 空間體驗設計
AR 空間體驗設計最大的難點在于：在界面設計中，我們只關注信息層級、顏色、大小、動態等，都是在二維平面中去思考信息效率的最大化，但是在 AR 的三維空間中，除上述我們還需關注安全性、空間性、以及如果讓駕駛員快速獲取增強信息來輔助他進行平穩駕駛。從下圖比較看，在界面中告訴我前方有什么路況信息遠遠不如直接看的效率快。
AR 導航的視域不僅要考慮水平、垂直視野中的布局，劃定舒適區域，還要考慮距離對于信息呈現的感受。
經過以上對于布局的規劃，我們可以得到以下布局關系。
3. 顏色及視覺權重
在顏色的選取上，讓整體的配色符合真實世界的認知，在我國道路交通中對于顏色界定，路牌中的藍綠色為不會立即影響駕駛者行為的信息，紅色、橙色、黃色用戶告知駕駛員暫時性和永久性的危險，所以我們可以得出以下顏色體系。
在 AR 導航設計中，最大的不同在于，你所有的設計都需要跟據實現后的策略+真實環境路測去反復調整，檢驗設計邏輯是否符合駕駛員的真實感知，經過了大量路測及實驗才能敲定。
1. 案例分析
我們嘗試用一個案例展開來訴說實際的道路環境遠比紙面上的分析要復雜的多。
在司機正常駕駛中，既為用戶提供了紅綠燈檢測，又給用戶提供了車道線提示，單獨看紅綠燈識別及車道線提醒都沒有問題，但在十字路口場景可以發現，紅綠燈和車道線重合，帶來了信息疊壓的問題，經過分析發現：
針對上述的紅綠燈和車道線重合問題，可以從兩個層面分析解決。
所以迅速采取了方案 2 的方式，讓紅綠燈和車道線差異策略時段顯示，規避了該問題，上述問題為簡單舉例，在實際現實空間場景時，需要注意的是現實物體識別是否遮擋駕駛視線或者和 AR 常駐信息重疊。
△ 壓線效果
△ 場景服務卡片
△ 斑馬線提醒及行人預警
我們試想下，如果在轉彎情況下，我們展示了很多行人 ADAS（預警系統）提醒，是否影響了正常駕駛？在每個元素出現和消失的時候，需要充分的考慮到它對其他元素的影響，是否符合 AR 空間設計體系和權重策略，差異化顯示為更優解。
△ 標注：本篇文章內容效果在后續版本中陸續上線
抖音、快手、snapchat 等國內外社交平臺上的 AR 濾鏡應用大多簡單有趣，比如給你的臉上實時畫個妝，拍邊時四周漂浮一些可愛的小動物，非常符合現代人的使用心態。但是 AR 在地圖中的應用（如步行導航、駕車導航) , 也應該考慮如何利用 AR 的特性讓地圖中的數據清晰易懂、與人的互動也變得更輕松隨意。
常規使用導航時，隨著地圖放大，可以看到更多的道路細節（車道數量，路邊停車位，斑馬線，交通事故等）。但是開車時需要時刻和真實世界做對應。受限于屏幕大小，這些信息的展示總是有限的。當我們用上了 AR，這些信息就能直接展示在真實世界中的相應位置，不用費力去尋找。傳統地圖的方式也將被顛覆。
案例分析 1：放在道路上的虛擬路障
利用 AR 視覺效果進行更逼真的強警示作用，而不是導航路線上的一個簡單標記。
案例分析 2：AR 導航商圈透出
開車到陌生城市時，結合 AR 地理位置標記，能清楚的知道所在商圈的信息。
2. AR 在出行領域的更多應用
隨著城市建設路網越來越復雜，AR 在旅游景區的導覽，多種交通工具混合出行的場景都能更好的發揮出價值。這也是今后我們探索的方向
文章來源：優設 作者：AlibabaDesign
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
移動互聯網的迅速崛起，讓移動網頁，移動客戶端越來越重要，客戶端的頁面設計也是一門很大的學問。科技迅速發展的今手機屏幕的尺寸越來越放大化，但卻始終 很有限，因此，在APP的界面設計中，精簡是一貫的準則。這里所說的精簡并不是內容上盡可能的少量，而是要注重重點的表達。在視覺上也要遵循用戶的視覺邏 輯，用戶看著順眼了，才會真正的喜歡。
接下來為大家分享六款精美的app UI設計案例：
藍藍設計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設計公司，公司對UI設計的追求一向很高，致力于為卓越的國內外企業提供卓越的手機 ui設計、軟件界面設計、網站設計，用戶研究、交互設計等服務。
--手機appUI設計--
更多精彩文章：
招行估計是考慮到沒有配置現任經理的詳情，又不想浪費標題右側的空間，才作此設計。
其他相關：這部分包含的基金公司、基金檔案、交易規則屬于并列關系，理應出現的分割線卻沒有體現，雖不影響投資者使用但反映出UI組件規范缺乏一定邏輯性。
交易規則：在購買時間點缺少了T日（交易日）收盤時間（15:00前）提示和周歷提示。頁面空間是富余的，完全可以將信息曝光提高投資者的時間感知度，而不是跳轉二級頁面才能了解詳情。
功能模塊十分豐富，cover了關于一只基金的所有直接和間接描述。直接的包含了概況、行情、歷史回測、持倉、經理介紹等內容，間接的包含了問答、討論、資訊、公告等內容。
在產品的廣度與深度方面，天天基金選擇了把廣度拉寬，將很多二級內容拍平，嵌入到一級頁面中，可以說非常適合經驗型投資者，但隨之而來的劣勢也十分明顯 - 頁面過長。
非常直觀，天天的基金頁面長度是招行（或螞蟻）的兩倍不止。
有了上面招行基金詳情頁的大致結構做支撐，這里就不把天天基金的頁面逐個模塊拆解分析了，我們挑一些有意思的來說。
基金概況：跟隨漲跌變化的紅/綠頁頭，這是天天最具標志性的設計之一，個人對此保留意見，這么大面積綠色在過去的一周，實在是令人焦慮。
凈值行情/歷史數據：天天基金在凈值模塊單列出了“單位凈值”和“累計凈值”的走勢圖，還直接標明了不同時段區間內的最高最低值。（“累計凈值”是基金自成立之日起至今的凈值表現，“單位凈值”是基金運作期間扣除分紅和份額拆分影響之后的凈值表現。）
聽說這是區分老基民和新人小白最直接的一道坎，當然作為一個UX設計師，我也就摻這一句，畢竟資格還遠遠夠不上老基民。
非常貼心的一點是，天天在這添加了定投該產品的收益可視化。根據歷史收益率回測和不同定投算法，進行一段時間內的收益率估算。與此類似設計的產品還有漲樂財富通。
特色數據：這也是經驗投資者非常重視的三個指標。波動率反映收益率波動的程度，越小越好；夏普比率指基金每承受一點風險能夠獲得多少超額收益，越高越好；最大回撤指基金凈值從最高到最低的降幅，越小越好。
基金持倉：這又是一個老基民的福利專區。上面分析過招行基金持倉tab的優勢，而天天直接把帶有重倉股盤中行情的持倉列表、資產/行業分布餅圖直接嵌入到一級頁面里，雖然默認只顯示前五只重倉股，但對于了解相關板塊行情也很有幫助。
這一模塊的二級頁面也支持投資者切換時間去觀察基金經理每一季度的調倉風格。其實我個人更傾向于直接把十大重倉股行情全都放進來，默認折疊需要時展開。畢竟調倉不是個高頻動作，我不會需要頻繁地跳進二級頁面去觀察調倉。
基金經理：作為后臺烹飪的cook，這塊的簡介過于“簡潔”了。其實次一級的經理詳情頁里有非常詳實的背景概述和任期間業績回報評估，完全可以精選一些標簽化的內容在一級模塊里完善包裝。
社交化：然后比較有意思的就是“社區”概念。天天基金上每只基金都分別有兩個“bar”，一個問答吧一個貼吧，貼吧包含了問答吧。
這里能體現出天天對于細分場景的重視。貼吧里的話題天南海北，吐槽的、圍觀的、提問的、表態的、發小作文的、曬收益/虧損的，啥都有。
天天的產品經理還是為提問用戶單獨開辟了一片凈土，讓內容的傳播與觸達更加高效。
回到UI層面，天天基金頁面的文本內容在邏輯結構上比較復雜，但視覺上沒有將不同層級的對比度拉開，導致文本信息過于平均，不利于重點信息的快速檢索。
財富號視頻：視頻可以展開和收起。產品還給它配置了觀看人次，側面為該基金公司和旗下基金產品做熱度營銷。
基金概況：除了基金相關的基本信息以外，模塊內展示了晨星評級和關注人氣。既有客觀權威評估體系，也有用戶層的氛圍烘托，通過兩層信任力建設占領用戶心智。
信任力背書：“支付寶金選”是由支付寶理財智庫、中國證券報聯合推出的一套理財產品評估體系，背后有一些專家KOL背書。能夠篩選出部分歷史業績表現優異、基金經理業績突出的產品。
相比于前幾個信任力的營造，這一點的重要性和優先級遠遠勝出。因此在視覺層面也用黑金配色體現出權威性和尊享感。
能夠很明顯地察覺到互金平臺和金融機構在產品包裝上的玩法不同：互金平臺傾向于權威背書和人氣營銷，金融機構傾向于指標構建和數據展示。
行情/數據：這一模塊增加了一個可以手動關閉的tag，是關于“風險回報比率”的描述，一個聽上去類似“夏普比率”的指標。優勢在于螞蟻直接量化轉譯了指標的結果——“好于同類98%基金”，省去了投資者分析指標的過程。
基金經理介紹：關于這部分，雖然在基金經理介紹的二級詳情頁里，天天基金比螞蟻財富要詳實得多，但一級模塊里螞蟻的人物包裝還是更到位。“金牛獎得主”和學歷/從業背景簡述能直觀地提高產品在用戶側的信任力。
持倉行情：這可以說是該頁面視覺創新的重頭戲。螞蟻財富由于相關個股數據缺失，并不能像招行和天天基金那樣橫向比對每個季度基金經理的調倉動作，對于經驗投資者研判這只基金來說，少了一個觀察維度。
而視覺層面的創新則顯得十分取巧，原本枯燥的個股行情列表被轉譯為可視化的矩陣，矩形的大小和底色能直接映射該股票的持倉占比和實時行情。并且橫向滑動的組件也支持在不跳轉的情況下完整顯示10只重倉股。
對于持有或長期關注這只基金的用戶而言，除非你要分析調倉，否則是不需要頻繁進入二級頁面查看持倉明細的。
以及細致到小數點后兩位的持倉占比，意義也不大，了解大致的配比關系即可。螞蟻這個可視化組件在帶來新穎視覺觀感的同時，也解決了這一問題。
對于產品而言，信息架構往往是最容易有爭議的部分。而金融產品的信息深度和業務復雜度尤為明顯，與之俱來的必然是各平臺在架構策略上百花齊放。
文章來源：站酷 作者：loven
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
前陣子回老家的時候，在老人家里看到這樣一個機器，這個機器的功能主要為家庭教育、視頻通話與監控等等。
如果這幾個主要功能入口屏幕占比能更大些、界面中的菜單導航層級能再簡化些...也不至于連我自己想找到一個能跟親人通話的入口都比較困難，更別說老人了。
當然了，這個機器最后只被家里的老人當成，一個只會定點報時的“擺設”。
除了把字號放大，適老化設計還需要做什么？以下分享京東直播在適老化設計上的幾點探索。
強化對比——看清信息
直到近幾年才知道，家里的長輩喜歡發微信語音，其實是因為老花眼打字不方便。
在適老化設計中，需要注意界面中的信息與背景的對比度，是否足以讓老年人清楚識別，這涉及到對色域跨度的調整。
我們通過 H（色相）S（飽和度）B（明度）的數值來劃分色域。如下圖，在統一H值的情況下，規定了10個標準的S、B值，從而形成一個色帶。所以我們在前后景的顏色選擇上，需要滿足跨度至少為5 ，才能讓老齡用戶清晰地識別到前景信息。
比如在京東直播的老年版界面中，不僅加深了原標準版中的淺灰色文字信息，同時對一些暗文設計也進行了調整，如搜索框暗文“點擊搜索主播名/商品”等內容，提升暗文明度以確保與其背景間的色域跨度大于5。
所以在適老化設計中，需要讓界面中的信息與其背景間的色域跨度至少為5，才能足以讓老年人看清信息。
傳達共識——看懂內容
90前的人想要表示“打電話”，會用手比出6的姿勢貼在耳邊；而現在的00后，會用手掌當作手機的樣子貼在耳邊來表示…
在讓老年人能夠看清界面中的信息之后，我們的設計還需要有更清晰的表意信息，讓他們能夠看懂。其中的關鍵在于，這些信息是否能夠“傳達共識”。
無法傳達共識的設計，就像00后的小孩突然擺出用手掌貼在耳邊的姿勢，家里的老人看了可能也無法領會到，這表示的是“打電話”的意思。
在設計中想要”傳達共識”，需要盡量避免圖形icon的單獨出現，用純文字或圖+文的形式表達。不過除了給圖標加上文字，其實我們在圖標本身的設計上也可以進行適當調整。
比如同樣表達“話費充值”，是用手機還是座機，哪個更能讓那個年代的長輩理解？哪些事物是那個年代慣用的，哪些事物是在那之后才誕生的？哪些是我們日常生活中就存在的東西，哪些又是專屬于互聯網世界的產物呢？
所以在適老化設計中，除了幫界面里的所有圖標加上文字以外，在圖標的設計上也可以結合年代、群體環境的因素，讓圖形表現的是老齡年代慣用的、日常生活中固有的內容，讓老年人也能輕松領會到，這表示的是什么。
聯系認知——找到點擊區
就算沒使用過手機的人，在生活中看到凸起的事物也會忍不住按一按；但如果他們看到的是一個圓圈，就不太可能有這種反應了。
在適老化界面中，需要代入更多能夠聯系生活經驗的認知錨點，幫助老年人順利在界面中找到點擊區域。其實不妨回想一下，即使是現在熟練使用手機的我們，也是從當時iOS4的擬物化界面，開始慢慢地培養心智，才能到如今就算看到一個線框、甚至只有純文字，也能輕松分辨出哪里是可點擊的按鈕。
而當下的老人，也正像當時一開始接觸智能手機的我們，需要在界面中找到與自己生活經驗的對照，才能利用熟悉的事物作為認知錨點，幫助自己理解聯系上一些陌生的概念。
比如將界面中可點擊的區域強化投影或高光，幫助老人們聯系起生活中對凹凸的認知試著去點一點。除此之外，我們還需要把一些會對點擊認知產生干擾的內容進行弱化。
比如在標準版的京東直播中，存在像紅包雨、獎券這種運營標簽，其樣式看起來與按鈕很像，但實際為不可點區域，所以在老年版界面中弱化了這些標簽，將他們與所在的列表內容作為一個整體背景，讓視覺重心聚焦在可點擊的按鈕上。
所以在適老化設計中，除了需要對可點擊區域強化投影以聯系認知，也需要將一些不可點擊的干擾項進行弱化，保證視覺重心最終落在可點擊區域上。
行為指引——完成點擊
美國新澤西北部一家電影院做了一個潛意識實驗：在電影中每隔5秒就插入0.03秒的字幕，寫著“吃爆米花”和“喝可樂”，雖然人的肉眼無法捕捉到0.03秒出現的事物但它們可以堆積成潛意識，隨后當天影院的可樂銷量增加15%，而爆米花則增加了58%。
在適老化設計中，我們還可以運用潛意識作為界面中的隱形向導，幫助老年人順利完成目標行為。
比如在按鈕的文案中包含行為動作、結果去向的內容，像“點擊領券”中的“點擊”——對當下需要完成的動作描述，“領券”——動作完成后的結果去向，讓每個一眼晃過的引導效果堆積，成為界面中的隱形向導，幫助老年人了解如何完成操作。
像在京東直播的老年版界面中，也同樣設計了這些隱形向導。比如在列表上加入“點擊進入直播間”的按鈕，引導老年人順利了解到“我當下可以進行點擊”以及“我點擊后可以進入直播間”的信息。
除了對按鈕文案的調整，我們還可以為一些非明確的可點擊區域加上行為指引。比如在主播力薦中，每個商品圖片都可點擊看對應的主播講解，因此為每個商品加上帶明確行為意圖的點擊按鈕，避免讓人以為這只是一些展示圖而并不知道這其實都是可以點擊的。
所以在適老化設計中，可以在按鈕文案中加入行為動作、結果去向的內容，同時對一些非明確的可點擊區域加上行為按鈕，發揮潛意識的隱形引導作用，幫助老年人順利地完成目標行為。
以上僅展示階段性成果，設計方式、設計理念等，我們的探索遠沒有結束，期待下一次分享中與你們的交流。
文章來源：站酷 作者：SDL藝術實驗室
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
移動互聯網的迅速崛起，讓移動網頁，移動客戶端越來越重要，客戶端的頁面設計也是一門很大的學問?？萍佳杆侔l展的今手機屏幕的尺寸越來越放大化，但卻始終 很有限，因此，在APP的界面設計中，精簡是一貫的準則。這里所說的精簡并不是內容上盡可能的少量，而是要注重重點的表達。在視覺上也要遵循用戶的視覺邏 輯，用戶看著順眼了，才會真正的喜歡。
如果這幾個主要功能入口屏幕占比能更大些、界面中的菜單導航層級能再簡化些...也不至于連我自己想找到一個能跟親人通話的入口都比較困難，更別說老人了。
接下來為大家分享精美的app UI設計案例：
藍藍設計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設計公司，公司對UI設計的追求一向很高，致力于為卓越的國內外企業提供卓越的手機 ui設計、軟件界面設計、網站設計，用戶研究、交互設計等服務。
--手機appUI設計--
越來越多的產品引入會員系統，如何做好一個會員系統，是當下設計師需要解答的一個命題。
會員的本質是建立用戶分層，便于形成用戶的差異化營銷，通過這種差異化的營銷達到以下四種目的：
提高用戶留存率（增加用戶粘性）；
提升用戶價值；
得到會費收益；
建立流量橋梁；
目的：篩選出高價值用戶（高留存+消費力強），精細化運營
手段：收會員費，建立用戶層之間的壁壘
結果：用戶自發分層，愿意掏錢的那批人成為會員用戶
原則：給會員用戶提供卓越的服務，給普通用戶提供好用的服務（反例：某網盤限速機制，約等于強賣會員，嚴重傷害普通用戶的使用體驗）
價格優勢：會員專享低價（電商產品有會員專享價、外賣產品有會員紅包）
資源優勢：增值內容（影視、音樂版權）
體驗優勢：更好的服務（更快響應、專屬客服、無廣告等）
心理優勢：身份認同（尊貴感標識，與普通用戶形成差異。對社交、游戲尤其關鍵）
短期價值：通過收取會員費，提高營收
長期價值：增加用戶粘性、鞏固并提升市場占比
體驗角度：更好的服務、專屬福利
心理層面：身份認同、沉沒成本（已經花了會員費，越多使用越合算，不然就虧了）
UI界面設計環節，一般的會員體系會涉及到的界面、視覺元素有：
會員觸點/前置曝光
會員中心
會員身份等級
所有將用戶引導至會員中心頁面的入口都可以算作會員觸點，觸點越多，用戶被引入會員中心的可能性越大。但觸點也不是越多越好，過多觸點會引起用戶反感，將觸點置于合適位置，能更自然高效地提高轉化率。
2.1.1 個人中心：露出會員板塊，通常是視覺強調中心。
個人中心是曝光率較高的頁面，其中整合了許多重要和必要功能入口。利用個人中心頁面，可以很好增加會員信息的曝光。該方式也是最常見且最通用的觸點形式，不局限于產品類型。
2.1.2 內容卡點：體驗完免費部分之后，會員內容收費，觸點卡于兩者之間。
增加用戶沉沒成本：用戶已經在早期投入大量時間和精力閱讀免費內容；
利用用戶好奇心：有前文做鋪墊，用戶行至卡點處，對剩余內容的好奇遠超過一般內容；
需求明確（制造問題）：用戶開會員就是為了解決剩余內容無法觀看這一具體問題，用戶總是傾向于解決問題而不是在原有基礎上提高要求。
2.1.3 會員專區：建立專享感，將會員內容與普通內容進行區隔。
將付費內容集中在一個區塊內，制造差異化，不論是內容質量或者商品價位，本質都是讓用戶形成會員價值很高的感覺。
2.1.4 會員頻道
常見于電商產品，同樣是起到區分內容，建立壁壘的作用。
2.1.5 底部提示
使用較為輕量的底部提示，引導用戶關注會員信息。該視覺樣式還常被用作登錄提醒。
2.1.6 小banner
見縫插針式的視覺提示，占用流量最大的首頁空間，此時文案的利益刺激尤其重要。
2.1.7 會員專頁
使用一個底部tab的權重來承載會員相關信息，可見會員體系的重要性。
會員中心是展示會員權益，以吸引用戶開通會員的頁面。是用戶全面了解會員相關信息的窗口，氛圍營造、權益展示、行動點突出，是設計會員中心需要考慮的要點。
2.2.1 會員中心的常見頁面結構
不同產品有不同的會員中心布局，有差異性也有共性。
氛圍感、套餐選擇（多套餐情況）、行動點、會員權益，是多數會員中心頁面共有的模塊，模塊之間位置并不固定。
本質上越重要的模塊，應該被分配越醒目的視覺表達方式。通過調整位置、面積、視覺對比度等，都可以調整不同模塊之間的權重，達到產品想要呈現的優先級效果。
2.2.2 會員中心_氛圍感
打造氛圍感的方式多樣，常見的有以下幾種方式：
2.2.3 會員中心_套餐選擇
部分產品不存在套餐選擇，只有一種套餐，如盒馬。在用戶體系中，將用戶分為兩層，用戶會員與非用戶會員。部分產品在會員中又進一步分類，推出了多種會員套餐。
常見套餐以時間區分，如包月會員、季度會員、包年會員、連續包年會員等。除此之外，也有以權限范圍為區分，如百度網盤的會員VIP和超級會員SVIP，超級會員享受更多特權。還有垂類會員，如視頻產品中單獨開辟出體育分類，對應設立專門的體育VIP卡。
上方案例中的套餐選擇均以卡片的樣式展示，除了該種方式，還有可以以列表形式展示。
列表形式的好處在于，套餐在垂直方向鋪開，延展性強，當套餐數量改變時，不會影響展示效率，而卡片式的展示形式會造成部分套餐被擠出屏幕，用戶需要左右滑動才能瀏覽全部，交互成本略高。同時，卡片式套餐需要點擊選中套餐，再點擊行動點，才能觸發支付，而列表式模型，直接點擊對應套餐項上的按鈕即可呼出支付，交互更加簡潔。
多套餐模型下，產品往往會重點突出一到兩項套餐，從商業層面講，通常希望用戶選擇價格更高的套餐，從體驗層面講，將附加值最高的套餐用角標突出，輔助用戶決策。
2.2.4 會員中心_行動點
行動點是一個頁面中最醒目的元素，往往是由按鈕充當。按鈕的點擊數據也可以直接反映頁面的設計是否合理。對于會員中心頁面來說，提升關鍵性按鈕點擊，往往是改版的目標和方向。
最常見的行動點布局方式有4種：
購買按鈕常駐于底部工具欄
購買按鈕緊鄰套餐選擇模塊，位于頁面中部
頁面同時有多個購買按鈕
界面始終存在一個購買按鈕
符合一般操作習慣，關鍵行動點常駐于頁面底部，已經被普遍接受。
購買按鈕緊鄰套餐選擇模塊，從操作的角度上來說，更加合理，套餐選擇完畢之后，購買按鈕含義類似“確定”，兩個步驟緊密相關，符合格式塔的遠近親疏原則。同時，頁面中心相比于頁面底部更加容易視覺聚焦，用戶能更加容易注意到。這也解釋了，為什么居中的對話框常用于警示，需要引起用戶高度關注，而底部半彈窗往往承載不那么關鍵的內容，一般承載無破壞性的操作。
購買按鈕意味著支付入口，頭部卡片上增加支付入口，不妨通過數據觀察，測試不同位置的點擊效果如何。
隨著頁面上劃，界面中第一個行動點（頁面中部）被推出視圖，此時底部工具欄浮出，保證頁面不管在何位置，始終可見至少一個行動點，讓用戶隨時可以進行支付。
2.2.5 會員中心_權益
會員權益是決定用戶是否購買會員的重要因素。有些權益相當實在，如會員折扣、專屬紅包等，而有些權益的誘惑力相對較弱，不同的權益強度決定了不同的視覺呈現方式。
會員權益細節介紹
會員權益從交互上，可分為兩類，可點擊和不可點擊。不可點擊的權益往往在會員中心頁面是以宮格圖標的形式呈現。而可點擊的權益，往往內容詳實，需要更多的空間來解釋和說明權益的具體內容。
從視覺形式上，也可以分為兩類：
彈窗呈現
子頁面呈現
除了購買會員之外，部分產品引入了“身份等級”的概念來將用戶進行分層。劃分的維度可以是用戶的活躍度、裂變能力等，可以依此，設計一系列的會員任務。會員身份等級機制利用了用戶的攀比、自我實現等心理，進一步增加用戶與產品之間的粘性。
會員身份等級一般集中在4-7個之間，其中梯度理論上呈遞增趨勢。作為設計師，需要將低等級到高等級這種“越來越高端”的氛圍烘托出來。不同類型的產品有自己的特色和局限，金融類產品在整體視覺屬性上趨于穩定內斂，而娛樂性強的產品則在視覺上限制較少。
隨著梯度的增加，設計難度也在增加，如何在不同等級之間拉開合適的視覺感知差距，是一個難點。如上圖中的“黑金會員”和“黑金PLUS會員”在視覺上比較雷同，差異較小。當靜態視覺發揮空間有限時，可以考慮加入動態元素，增加區分。
徽章系統
與會員等級的本質一樣，徽章系統將用戶分層，制造不同的用戶群，擁有更多、更高級徽章的用戶對于產品來說，自然是價值更高的用戶，這類用戶是產品需要重點關注的對象。他們是產品的深度體驗者，他們的意見反饋相比于普通用戶更加準確和反映問題。
隨著產品本身的日漸成熟，越來越多的產品選擇加入會員體系。會員體系無論對產品的短期或者長期利益都至關重要，從短期來講，直接增加營收，從長期規劃來講，對于增加用戶粘性、提高市場份額也有著重要意義。作為設計師，如何把用戶對于會員期待的“價值感”、“尊享感”用體驗的形式呈現出來，至關重要。
會員體系涉及到的相關設計細節很多，小到一個會員標簽，大到一級頁面，其中的設計細節更是不勝枚舉。將龐大的概念不斷拆解為一個個細小的可控的模塊，加以分析和總結，始終是沉淀設計經驗的方法之一。高大上的觀念理論，需要一個個見微知著的細節支撐。
文章來源：站酷 作者：doo_W
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
工作中我們常常會聽到或在撰寫交互說明時提到“從底部向上出現彈層”、“出現浮層”、展示“對話框”、彈出“彈框”、“出現對話框”諸如此類的話術。我相信大家對“浮層、彈層、彈框、對話框……”等稱呼常常也會感到困惑。到底什么時候應該稱呼為“對話框，什么時候稱呼彈框”，此類相似的組件又是如何分類的，應該如何應用、如何設計。
恰好筆者近期在設計彈出層組件，本篇文章將結合自己的實戰經歷，自己對彈出層組件的理解和設計經驗分享給大家，希望幫助大家對彈出層組件有更清晰的認知和理解。
首先我們看一下彈出層組件的定義：當觸發某項操作時，在頁面上方展示的彈出層容器，容器內可展示文本、按鈕、列表、標簽、表單項等內容，英文名稱定義為 Popup。
△ 彈出層組件的構成
根據彈出位置的不同，我們又可以將 Popup 組件細分為如下 5 種樣式。
△彈出層組件的 5 種樣式
看到彈出層組件的樣式，想必大家已經聯想到日常用的比較多的組件了，比如“Alert 確認框，picker 選擇器、基于場景的篩選組件”等。彈出層組件是十分基礎的組件，基于該組件我們可以開發通用性組件以及場景組件。從“形式”角度來看，“浮層、彈層、彈框、對話框……”本質上都是彈出層。
“浮層、彈層、彈框”是泛指的稱呼，兩大官方平臺也都根據自身的規范對相關組件進行命名。Material Design 和 iOS 官方規范中的彈出層組件如下圖所示，并且筆者從“功能”角度出發整理了組件之間的對應關系。后文會詳述每種組件的定義及應用。
△MD 和 iOS 規范中的彈出層組件
在詳述組件之前，還需要向大家傳達一個概念“模態”，即平時我們常說的“模態彈框”（彈框可理解為是彈出層的一種樣式）。并非有一種組件的分類被稱作是“模態彈框”，而是當彈框采用了“模態”的設計手法時，我們將其簡稱為“模態彈窗”。
iOS 官方定義為：
“Modality is a design technique that presents content in a temporary mode that’s separate from the user’s previous current context and requires an explicit action to exit. Presenting content modally can:
Help people focus on a self-contained task or set of closely related options
Ensure that people receive and, if necessary, act on critical information”
翻譯過來即：模態是一種設計手法，它使用一種臨時性的模式將用戶之前看到的內容與當前看到的內容進行區分，并且需要通過明確的操作才能退出該模式。模態呈現的內容可以：
幫助用戶專注于一個獨立的任務或一組緊密相關的選項，確保用戶收到關鍵信息，并在必要時采取行動
由此可見，彈層是否為模態彈層可以根據具體的使用場景進行定義。在 iOS 官方中定義的模態彈層通常包括：Alerts, Activity Views ,Share sheets, and Action Sheets .iOS 13 及后續的系統中將 Fullsreen 也作為模態彈層進行使用。MD 中的 Dialogs 組件均為模態，而 sheets 組件不采用模態設計手法。
警示型彈框均采用從頁面中間進行彈層的方式，MD 和 iOS 中組件的樣式略有不同，但其使用場景和功能相同。都是在重要信息提示、需要用戶確認的操作、以及破壞性操作之前進行提示，警示型彈窗會中斷用戶的任務流程，影響用戶體驗，因此需注意其使用頻率。
△警示型彈框 Alert Dialog
使用場景：通常在系統級信息的提示，例如權限的獲取、系統通知，需要明確告知用戶的信息，以及破壞性操作前使用。
△警示型彈框應用
根據用戶在彈層中需要完成的任務內容和任務數量，又可分為簡單型和復雜型彈層。
簡單型彈層
常用于在彈層中展示內容，需要用戶進行選擇的場景，該場景通常只需要用戶完成一種任務，比如通過點擊的方式，完成信息的選擇或分享。在 iOS 中采用從底部向上彈層的方式，而安卓平臺多使用在頁面中間彈層的方式。
彈層中是否存在操作按鈕可根據實際應用場景去確定。通常選擇項條目較少或內容簡單易于識別時，可不需要「確認」按鈕。而在選擇項條目較多時或需要用戶作短暫的思考才能確認選項時，可增加「確認」按鈕，允許用戶有修改選項的機會。
△簡單型任務彈層的組件樣式
△簡單型任務彈層的組件樣式
彈層中信息的呈現方式又可分為“列表”和“網格”兩種，大多種場景下，均可使用列表展示內容，更加符合用戶從上到下的閱讀習慣；而在分享場景下多通過網格的方式將分享渠道展示出來，增加屏顯的內容，同時提高用戶查看信息的效率，具體樣式可參考上圖。
使用場景：簡單型彈層多用在信息的篩選、排序和信息確認的場景下使用。且在目前市面上的絕大多數應用中，除原生的安卓應用外，大部分應用都采用從底部向上彈層和從頂部向下彈層的方式。
△簡單型任務彈層的應用
復雜型彈層
復雜型彈層中通常承載的信息量更豐富，包含多種組件，需要用戶完成一系列的任務。
涉及到信息篩選時，通常采用側邊彈層組件進行展示，且彈層上的信息僅支持垂直滾動查看，不支持水平滾動查看，且通常采用“非模態”的手法，方便用戶快速取消當前彈層。在 iOS 中并無“Sheets:side”組件，但是在 iOS 系統中，很多 APP 應用在復雜的篩選場景下也都采用側邊彈層的方式。
全屏彈層會將當前頁面中的全部信息遮擋，更方便用戶聚焦于當前需要完成的任務，避免用戶的注意力被分散。通常采用模態的設計手法，僅當用戶觸發確認、取消或關閉操作時，彈層才會消失。一般全屏彈層中需要包含標題、操作按鈕、內容區域。用戶在全屏彈層中需要完成多個任務，因此內容區域中也會包含多個組件。例如“按鈕、輸入框、標簽、開關、列表、日期選擇”等。
△復雜型任務彈層的組件樣式
使用場景：通常用于完成復雜任務的表單信息填寫、內容篩選、搜索和內容展示。
△復雜型任務彈層的應用
需要單獨說明氣泡框組件
在 iOS 的官方定義中，氣泡框組件應用于 iPad 應用程序，在 iPhone 應用程序中，通過以全屏模態視圖而非彈出框形式顯示信息，來利用所有可用的屏幕空間。但是，組件被定義后并不是一成不變的，而是隨實際場景進行應用的。例如，在手機端，氣泡框組件更多被用于簡單信息的展示與選擇。
△Popovers 氣泡框的應用
小結：
筆者按照使用場景、信息的復雜度、功能的相似度等，將彈出層組件歸納為兩大類“警示型和任務型”，并且枚舉了常用的 MD（安卓系統遵循的規范）和 iOS 兩大規范中定義的彈出層組件，方便讀者對彈出層組件有更清晰的了解。需要說明的是，由于業務場景是復雜的、多樣的，各位設計師也需要結合實際的業務場景和設計目標，靈活的使用組件。
△彈出層組件的類型與使用場景
1. 設計目的
首先需要理解我們為什么要設計組件，組件最終設計的目標是什么，筆者從“設計側和技術側”兩方面談談自己的理解。
設計側：規范的組件設計，對內有利于全公司的設計師對組件的使用有統一的認知，明確組件的使用場景，避免誤用和錯用組件，并且方便新人設計師快速學習和上手，提高設計效率。對外也有利于保證設計上線后的一致性和規范性，方便用戶對本公司產品建立統一的心理認知。
技術側：通用的基礎組件，具有可復用性，能夠減少重復開發，大大提高開發效率。
組件設計的最終目標可歸納為保持設計的統一性，提升用戶體驗，同時提高設計和開發的效率。因此，組件設計是非常有必要的，那么到底如何從 0-1 開始設計組件呢，下面我們來看組件設計的詳細思路。
2. 設計思路
其實組件設計的基本思路是通用的，不僅適用于彈出層組件，還適用于其他基礎組件的設計。通常我們會從組件的定義、用法、構成、種類、行為與狀態五個方面進行組件的設計。
△組件設計的思路
回歸到本文所講的移動端彈出層組件，組件設計時需要考慮其“通用性和可復用性”?；诖嗽瓌t，將彈出層組件進行拆解，如下圖所示。它包括：
△彈出層組件的拆解
從上圖中可看出，本文第一部分提出的 Popup 組件是最基本的彈出層組件，基于該組件可進行任何彈層組件的開發。因此，在彈層組件設計時將 Popup 組件抽離出來作為最基礎的組件進行開發， 還可以進一步開發通用的彈層組件和高頻使用的場景組件。由于上文中已講 Popoup 組件的構成與樣式，且由于該組件相對來講比較簡單，因此不過多贅述。下面以通用組件“Picker 選擇器”和篩選場景下的高頻組件“篩選器 Filter”為例進行說明。
1. Picker 選擇器
定義：用于從一組預設數據中進行選擇的控件。
用法：
構成：標題、按鈕、內容（當前選項和其他選項）
△Picker 選擇器組件的構成
種類：根據選項間是否存在級聯關系可將其分為 2 類，普通選擇和級聯選擇。
△Picker 選擇器組件的分類
行為與狀態：狀態，給出單列選項和多列選項的常態頁面以及選項被禁用的狀態頁面。行為，需要定義完整的組件交互邏輯，從入口->彈層出現->選項查看->選擇目標選項->彈層消失的完整邏輯進行說明。
△Picker 選擇器組件的狀態
△Picker 選擇器組件的交互流程與行為說明
當完成以上全部內容的撰寫時，可對本組件開發出的效果進行說明。例如：
2. Filter 篩選器
Filter 組件是基于公司移動端產品均存在的高頻“篩選”場景而總結的場景（業務）組件，其設計思路和上方描述的通用組件的設計思路相同，筆者此處只強調 2 個重點注意事項。
場景組件在設計時遵循“加法”邏輯，從而提升組件的復用率。組件內容分區塊進行封裝，從而增加組件的靈活性。
△篩選器組件
在上圖所示的篩選場景中，單類目和多類目篩選若均為高頻的使用場景，那么單類目和多類目篩選組件均可以抽離成組件并進行開發，且多類目篩選可基于單類目篩選組件進行開發。但是多類目篩選組件是無法覆蓋單類目篩選組件的，組件開發不同于設計稿，設計稿可將多個類目刪除掉只剩余單個類目，但是組件的代碼邏輯不遵循此刪除邏輯。在原有組件的代碼上修改的開發成本要高于重新開發組件。因此，如果要修改多類目篩選組件的邏輯，不如重新開發出單類目篩選的組件。這也是需要我們牢記的，組件設計需要從“原子組件到復雜組件”，遵循由“簡單到復雜”的加法邏輯。
而在組件開發時通過“goup”的形式進行封裝，可使組件更加靈活。例如，當業務場景是需要通過“輸入框”組件輸入篩選條件，只要將 Group 中的內容改為“輸入框組件”，即只需修改該 group 下的代碼即可，篩選器組件的其他邏輯仍然可復用，這就提高了組件的通用性和復用率。
當然，Filter 組件還需要考慮很多設計細節，例如類目名稱是否顯示為當前篩選項名稱、重置的邏輯是什么、確認篩選后頁面信息會如何變化、篩選項支持單選還是多選等等。復雜的場景組件通常是由多個原子組件組合而成，因此組件的邏輯也更為復雜，組件設計的整體流程和交互細節也應考慮的更加全面。
文章來源：優設網 作者：土撥鼠
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
這個項目在2019年立項，在2020年完成，項目進行中又幾番變動，萬幸最終還是完成了！
非常感謝團隊中的小伙伴給予的幫助，能夠與你們一起共事非常幸運！
------------------------------------------------------------------
*本次輸出非100%與最終上線稿件相同，有部分設計因開發成本與項目預算原因未能實現！
*部分商品圖片來源于網絡，僅作為展示與交流使用！
------------------------------------------------------------------
轉自：站酷
作者：火龍果_pitaya
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
移動互聯網的迅速崛起，讓移動網頁，移動客戶端越來越重要，客戶端的頁面設計也是一門很大的學問。科技迅速發展的今手機屏幕的尺寸越來越放大化，但卻始終 很有限，因此，在APP的界面設計中，精簡是一貫的準則。這里所說的精簡并不是內容上盡可能的少量，而是要注重重點的表達。在視覺上也要遵循用戶的視覺邏 輯，用戶看著順眼了，才會真正的喜歡。
接下來為大家分享精美的app UI設計案例：
藍藍設計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設計公司，公司對UI設計的追求一向很高，致力于為卓越的國內外企業提供卓越的手機 ui設計、軟件界面設計、網站設計，用戶研究、交互設計等服務。
--手機appUI設計--
簡單地講，分類就是按照種類、等級或性質分別歸類。
某種事物無論是按什么分類，只要是屬于同一種分類，就一定有一個共同的屬性，而這個屬性就是分類的依據。
假如手機是指“移動便攜性的通訊設備”，那么小米手機、華為手機、蘋果手機等，雖然系統不同、性能配置不同、外觀設計不同，但是都可以歸類到手機，因為它們都具備“移動便攜性的通訊設備”這一共同屬性。
再舉個很簡單的例子，蘋果、梨子、芒果都可以劃分為水果，因為他們具備“多汁且主要味覺為甜味和酸味，可食用”的屬性（定義來自百度百科），這些屬性是歸屬于這個分類的必要條件?；谶@個分類，我們比較容易判斷得出，生菜不是水果，因為雖然具備可食用性，但是不具備“多汁且主要味覺為甜味和酸味”。
分類可以把雜亂的事物變得規整，把凌亂的信息按照某些維度劃分，使事物更加清晰。
前兩年風風火火的垃圾分類，就是一個例子。生活中所有物品廢棄后都可以成為垃圾，如果不進行垃圾分類，處理成本高且污染環境。而垃圾分類，就是將垃圾按一定規定或標準將垃圾分類儲存、投放和搬運。
既然分類是按照某種方式進行組織，那我們需要明確了解，分類方式必須讓用戶易于理解。所以，分類本身是否合理，很大程度上取決于人們能否容易理解分類。
“簡單的組織模式具有清晰的界限——是非分明。這樣，用戶才能明確知道到哪里去找自己想要的東西。因此，要多找一些用戶，詢問他們的分類標準。如果眾口不一，或者根本就難以回答，你就有麻煩了?！?
垃圾分類很火還有一個原因，因為用戶經常不知道什么物品屬于什么垃圾，這就對垃圾分類產生很大的阻力，網上一時間有了很多識別物品垃圾分類的產品功能。
我之前使用三星手機，每次想要在設置里面尋找某功能，都很讓人煩躁，因為手機設置里定義的某功能的分類方式，與我們的認知并不一致，這就會造成尋找時及其低效的情況，同時也會引起強烈不滿，這意味著，如果你忘了某事物的具體名稱，而分類方式與心理模型所認知的分類方式不一致，你就極難找到。（不過三星很有意思的一點是，盡管在設置的分類項里找不到，但是往往能在設置項下方的推薦查找處找到相應功能，這就很魔幻。）
分類本身就是將混亂的事物進行歸類，這帶來一個很明顯優點，就是便于用戶查找，只要用戶明確某事物屬于哪一分類，便能相對輕松地找到。
比如我們想要尋找某款好用的修圖軟件，但是不知道具體名稱，想要在應用商店的眾多應用里，尋找某款應用，比較常用的方式就是搜索或者分類。
分類可以將應用按不同用途進行劃分，比如視頻、拍攝、工具、社交等。通過這些分類，可以很大程度上縮小我們的尋找范圍，這就是分類的高效性。
分類還有隱藏屬性，就是對比性。許多用戶使用分類時，也會喜歡進行對比。
還是以修圖軟件為例子，你想要某款修圖軟件，于是你通過分類，找到了一批修圖軟件，而你本身并不知道什么軟件好。分類將相同屬性的軟件聚合到一起，一定程度上可以幫助你基于某種維度進行對比，正好可以讓你更輕松地對比哪款軟件更適合你。
分類是否合理，還需要看分類本身是否足夠全面。理論上，我們通過分類劃分事物，則分類需要可以將這些食物完全囊括。如果分類本身無法囊括這些事物，就會造成用戶尋找時的盲區，證明這種分類方式本身不合理。
假如用戶去逛淘寶，想要找某物品，但是翻了很多分類，仍然找不到，這時大概率就不會再通過分類進行尋找了，而這種糟糕的體驗，也會讓用戶對這個產品的分類變得很失望。
剛才說到，同一分類是圍繞同一個屬性的。但是，同一個事物，本身可以有很多種分類方式。而我們需要保證的是，事物在同一分類里的具有唯一性。
一首歌，如果按照語言體系維度進行劃分，一般可以劃分為華語、英語、日語等。還可以按照流派維度來劃分，一般可以劃分為電子、輕音樂、搖滾、說唱等。
我們對事物的認識方式是立體的，事物可以被按照不同維度進行不同分類也就不足為怪了。同一個事物，甚至同一個人，是可以有多種分類方式的。
說完分類的許多屬性，我們聊聊在互聯網產品中，用戶會在什么場景下使用分類？我們又該如何設計分類功能？
首先，用戶會在什么場景下使用分類？從產品層面，分類是便于人們查找某事物的一種方式，因為相對比較清晰、高效。
這里有個很關鍵的點，就是“查找”。也就是說，分類的使用場景，偏向于人們有相對明確的目的。用戶的行為路徑是有主動的查找需求。
互聯網產品，查找某事物，最常見的方式是搜索，瀏覽，分類。而這幾種方式都有不同點，分類側重于“屬性”區分。
大部分用戶使用分類時，行為特點是相對主動的。此時用戶未必有十分明確的目標，但大致知道想要什么。比如你想和朋友聚餐，不知道具體吃什么，這時候你打開了大眾點評，你只知道要吃中餐，這時你可以在中餐的分類里去找適合你的店。
用戶的目標如果十分清晰，則更適合直接搜索，因為這比起分類查找的路徑更短也更高效。
總結一下，我們要設計分類功能，需要從用戶的角度來觀察分類這件事情。：
· 用戶主要的行為模式：人找內容。
· 有目標但不夠明確。
我們需要先了解分類的細分層級，分類的層級大部分不超過 4 層，但會因不同產品的定義不同而有所區別。
一般來說，第一層是顆粒度相對較大的，接下來會層層在上一層的基礎上細化。
以京東的分類為例：
第一層：奢侈品，箱包，手機等；
第二層：手機包含：熱門品牌、手機類型、運營商、手機配件；
第三層：熱門品牌包含：蘋果、華為、OPPO、VIVO、小米等；
第四層：蘋果手機包含：iPhone 12、iPhone 11等；
最少的層級是兩層，比如垃圾分類：
第一層：可回收垃圾、干垃圾、濕垃圾、有害垃圾；
第二層：具體的垃圾物品。
就體驗層面而言，建議分類層級避免超過 3、4 層，盡管本身可能會提升細分度，便于用戶查找。但由于分類方式本身必須與用戶的理解相契合，如果太多層分類，用戶需要思考目標內容在哪一分類。經過幾層判斷后，才能找到目標內容，這對于用戶的理解成本是比較高的。
此外，太多層級不利于用戶在不夠熟悉分類方式時快速了解某分類下的具體事物。如果用戶對分類的劃分方式理解錯誤，就需要返回繼續查找，效率低、使用門檻高。
當然也不能盲目追求盡可能短的分類層級。兩個層級可能無法滿足查找需求，因為內容量龐大，所以還需要更多的過濾，需要依據產品類型而定。
由于目前許多產品都發展到相對成熟的狀態，所以設計分類功能時，一般不需要對分類方式再進行劃分，主要原因是相同類型的產品，分類方式大同小異。用戶的理解習慣上，對于某事物的分類也有基本的認知。現在設計分類功能，主要是對頁面交互及視覺層級進行重新設計和調整。
我們會梳理常見的分類交互框架，從分類入口、頁面布局等層面可以看到產品中分類功能的定位強弱。這里列舉的分類形式，會根據產品的主功能進行闡述。比如電商類就是商品分類、旅游類就是地點分類等。
以京東 App 為例，京東把分類功能作為一個主要的頁面模塊。分類 tab 占據了 App 的第 2 個底部 tab。
使用京東的用戶，購買的目的性相對較強，京東主打的就是自營正品和快遞速度，商品與淘寶相比會少很多，但依然很全。用戶習慣上，“逛”的屬性沒有淘寶那么強。首頁以功能區+信息流為主，偏向于商品分發+逛信息流，而分類功能則主要滿足相對明確目的用戶需求。
京東分類頁左側為一級分類，右側為二、三級分類。側邊導航將分類豎排的最大優點是能夠充分利用屏幕空間，提升分類類型的展示效率。適用于分類類型多、分類層級多的場景。右側頁面信息靈活性較高，可以配置運營位，如放置運營 Banner ，且支持左右滑動 Banner 。下方一般放置二、三級分類。
右側頁面滑動時，頂部有輔助查找二、三級分類的導航分類標簽，便于用戶快速查找：
切換一級分類：這種框架切換分類的方式主要有兩種：1、點擊左側導航欄進行切換；2、向上滑動右側頁面進行切換。用戶習慣上，第 1 種方式會更高效，而第 2 種切換方式會更自然，更符合手勢操作。
以【推薦分類】為例，右側【常用分類、專場推薦、熱門分類】都是歸屬于【推薦分類】的。為了便于用戶更好區分頁面分類層級，頁面向上滑動時，通常會設計繼續上拉切換的提示。目的是提醒用戶，該部分已經滑動到底了，繼續上滑會切換到下一部分，明確區分不同分類。
上滑的另外一種模式，以宜家為例，宜家聚焦于家居用品，分類類目沒有大型電商 App 那么多。左側是一級導航【燈具照明、裝飾品等】，右側分類標題與左側導航一一對應，并且分類之間無明確的頁面分隔區分，所以滑動時無需設計切換到下一部分的提示。
以上講的，右側頁面均是二、三級分類入口，并不是具體的。分類層級或類型少的情況下，右側可以嘗試放置具體內容，比如華為應用市場的處理形式。
需要注意：
1、左側導航占據了屏幕縱向的固定位置，從而縮減了頁面寬度。
2、由于層級多，左右側均是分類入口，用戶無法在頁面直接看到具體商品/內容。在電商產品上，用戶容易區分不同分類類目下是什么商品。但可能在某些 App 上，用戶未必清晰所要尋找的內容在哪一分類類目下，可能造成用戶流失。
3、如果沒有具體的內容呈現，對于內容、商品等分發效率也存在影響。
頂部導航型的優點是將多級分類與具體內容結合在一個頁面，可通過點擊或者滑動切換不同分類，將觸達具體內容的路徑盡可能減少，提升具體內容的曝光。
以掌閱 App 為例：最高層為一級分類，可滑動。第二層是二級分類，更精準分類挑選。第三層導航偏向于篩選。第四層為具體內容，用戶無需通過頁面跳轉就能查看。這種設計特點很明顯：內容曝光 > 分類效率。由于一級分類不多，可以通過左右滑動查看，避免浪費頁面空間。二級分類類型多，采用折疊的形式將分類收起，點擊可以展開更多二級分類。
顯而易見的，多層分類在頂部排列，視覺效果并不佳。默認狀態下，占用頁面頂部的空間。這種結構，在設計時為了能夠節省頁面空間，二、三級導航會伴隨用戶向上滑動的手勢折疊，提升內容的曝光效率。用戶在滑動場景下，會更聚焦于頁面具體內容而非導航，所以折疊的設計比較巧妙。
這種設計由于具體內容曝光的效率高，受到許多產品的青睞，適合于資訊類、內容類等產品。比如微博首頁，微博側重于內容的主動推薦，所以將分類弱化為一行導航欄，頁面主體為具體內容推薦。用戶瀏覽的內容有相對固定的傾向，比如會喜歡看綜藝、社會、美妝等內容，并沒有很強的尋找不同分類的訴求。
若用戶想要設置常用的分類頻道，可點擊【+】展開，查看常用頻道。由于頻道比較多，而橫滑 Tab 左右滑動的效率較低，所以微博選擇了展示部分常用頻道。如果用戶想查看更多頻道，還能在展開的頁面里進行配置。這種設計為分類功能的設計帶來了更多自定義性。
知乎的處理邏輯與微博一致：
淘寶的分類相比于一般電商類的產品，會比較特別，常見的電商類產品的分類模式和上面介紹的京東 App 比較相似。但淘寶已經往全面信息流化的方向發展，為了推動用戶在淘寶中“逛街”，甚至連分類都已經往信息流化的方向發展。
淘寶的分類功能正在弱化，不像京東、蘇寧占據著底部第 2 個 tab 的位置，而是在首屏功能區的最后一位。點擊后，也不再是常規的側邊導航，而是強化商品外顯。
淘寶分類頁除了上方的一、二級分類，下方都是商品推薦，向上滑動就是瀑布流，增強商品而弱化分類效率。
如果用戶想看其他分類，可以通過左右滑動切換。如果希望查看更多分類，需點開旁邊的”更多“按鈕，通過”更多“按鈕進入的頁面，側重于高效展示分類。淘寶有信心這么做，一部分原因可能基于對算法推薦的信心，我發現不同手機看到的分類順序并不一致。
以 B 站為例，B 站的分區頁面的設計形式為展示番劇、國劇、放映等所有一級導航，而將細分層級隱藏到下一級頁面。
這種設計方式適合一級分類類型很多，且重點在于高效呈現這些分類類型的場景。二級頁面聚焦于具體的內容，可以避免將一、二級分類堆疊在一個頁面，滿足用戶對查找分類的效率的要求，避免過載的信息量使頁面變得復雜。但顯而易見的，這種結構不利于用戶在當前頁面直接看到下一層級內容。
App store 整體邏輯與 B 站一致，區別在于排列方式為列表型排列。
vivo 應用商店也是聚焦型分類，但是會把二級分類呈現出來，與側邊導航型分類很相似，區別在于這里是整列表滑動。
前面講到，分類是具有多種維度的。以“好好住”為例，有居室、面積、風格、預算、特色等維度。
上面“好好住”的幾個維度之間，沒有上下層級之分，均屬于同一層級，所以層級是并列而非遞進的，這種情況更適合采用篩選的處理形式。同樣的，由于頂部篩選類型多，占據過多的頁面空間，當頁面上滑后，篩選可折疊以節省頁面空間，同時更聚焦與具體內容。
設計分類功能，要先明確分類的維度，以及用戶是否容易理解，避免造成與用戶認知習慣相沖突從而影響功能使用的情況。
整體上，通過分類功能找目標內容的路徑應該避免太長，因為這會影響到內容曝光效率及用戶對分類之下的具體內容的感知。
分類本身是一種信息組織與呈現方式，設計時需要對產品信息本身有足夠理解，才能有針對性地思考交互框架。分類功能的交互框架多樣，每種都有優點和缺點，需要根據產品定位及訴求（優先展示分類，還是優先展示具體內容）采用適合的交互形式。
需要注意的是，有的產品的主功能甚至沒有很明確的分類，比如淘票票，定位是買電影票，而人們看的電影具有很強的時效性，能不能看到電影幾乎完全取決于電影何時上映，重點更側重于向用戶推薦最近的電影。
以上分析了分類功能、羅列了比較常見的分類功能設計形式，希望能幫助到各位。
文章來源：站酷 作者：熱風_
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn