移動互聯網的迅速崛起，讓移動網頁，移動客戶端越來越重要，客戶端的頁面設計也是一門很大的學問。科技迅速發展的今手機屏幕的尺寸越來越放大化，但卻始終 很有限，因此，在APP的界面設計中，精簡是一貫的準則。這里所說的精簡并不是內容上盡可能的少量，而是要注重重點的表達。在視覺上也要遵循用戶的視覺邏 輯，用戶看著順眼了，才會真正的喜歡。
接下來為大家分享六款精美的app UI設計案例：
--手機appUI設計--
更多精彩文章：
移動互聯網的迅速崛起，讓移動網頁，移動客戶端越來越重要，客戶端的頁面設計也是一門很大的學問?？萍佳杆侔l展的今手機屏幕的尺寸越來越放大化，但卻始終 很有限，因此，在APP的界面設計中，精簡是一貫的準則。這里所說的精簡并不是內容上盡可能的少量，而是要注重重點的表達。在視覺上也要遵循用戶的視覺邏 輯，用戶看著順眼了，才會真正的喜歡。
接下來為大家分享六款精美的app UI設計案例：
藍藍設計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設計公司，公司對UI設計的追求一向很高，致力于為卓越的國內外企業提供卓越的手機 ui設計、軟件界面設計、網站設計，用戶研究、交互設計等服務。
--手機appUI設計--
更多精彩文章：
近日在短視頻上有關「高德 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%基金”，省去了投資者分析指標的過程。
基金經理介紹：關于這部分，雖然在基金經理介紹的二級詳情頁里，天天基金比螞蟻財富要詳實得多，但一級模塊里螞蟻的人物包裝還是更到位?！敖鹋＊劦弥鳌焙蛯W歷/從業背景簡述能直觀地提高產品在用戶側的信任力。
持倉行情：這可以說是該頁面視覺創新的重頭戲。螞蟻財富由于相關個股數據缺失，并不能像招行和天天基金那樣橫向比對每個季度基金經理的調倉動作，對于經驗投資者研判這只基金來說，少了一個觀察維度。
而視覺層面的創新則顯得十分取巧，原本枯燥的個股行情列表被轉譯為可視化的矩陣，矩形的大小和底色能直接映射該股票的持倉占比和實時行情。并且橫向滑動的組件也支持在不跳轉的情況下完整顯示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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn