做UI/UX設計的同學幾乎每天都要和切換類組件打交道，但很多人總會在開關、復選框、單選按鈕之間踩坑——要么用錯場景，要么給用戶造成認知混淆，甚至引發操作失誤。
蘋果HIG (人機界面指南) 里明確把開關、復選框、單選按鈕這三類，都歸為「切換開關」組件。它們的核心共性是讓用戶在對立的狀態間做選擇，通過差異化的視覺形態清晰區分選中/未選中的狀態。
開關是用來瞬間切換單個功能/設置的開啟/關閉狀態的組件，一次只能控制一個設置的開關，工作邏輯和我們家里的物理電燈開關完全一致，能讓用戶一眼看清當前的生效狀態。
開關的結構非常簡潔，核心分為3個部分：
如果要添加輔助圖標，必須選表意清晰、強二元對立的樣式，千萬別用含義模糊、沒有明確正反屬性的圖標（比如月亮、編輯圖標），用戶沒法一眼對應開/關狀態。
開關的核心交互邏輯是操作后立即生效，不需要用戶額外點擊確認按鈕，切換狀態時，可配合手柄尺寸的微動效強化操作反饋。
開關必須和描述控制功能的標簽搭配使用，標簽要簡潔直白，不要把文字放到開關內部。這樣會壓縮視覺空間，還會破壞組件通用性，增加用戶識別成本。
復選框的核心定位，是支持用戶對一組關聯選項，做單項或多項的選中/取消操作。
記住一個核心原則：當用戶可以在一個列表里選擇多個選項時就用復選框，不用開關或單選按鈕。單選按鈕的語義是「請選其中一個」，而復選框的語義是「可以選多個，也可以全不選」，二者的底層邏輯不同。
復選框的結構清晰，核心就是選擇容器+選中狀態圖標，通過勾選/未勾選的視覺差異，直觀傳遞用戶的選擇結果。
如果選項列表較長，建議添加「全選父復選框」提升操作效率，它的交互邏輯有明確的行業規范：
處理一組有關聯的多選項時優先用復選框，而非一堆獨立的開關。
一方面，復選框能天然傳遞「選項之間互相關聯」的語義，另一方面，它比開關占用的視覺空間更小，頁面會更整潔有序。
單選按鈕的核心是互斥單選。在一組選項里，用戶有且只能選擇一個，選中新選項后之前選中的選項會自動取消。
它的語義非常明確：這一組選項里，「你必須、只能選一個」和復選框的「可多選、可全不選」形成了清晰的邊界。
單選按鈕的結構核心是選中/未選中的狀態圖標+對應的選項標簽。行業通用的視覺規范是：用實心圓點表示選中，空心圓圈表示未選中，保證用戶的視覺識別度。
不能打破互斥單選的核心邏輯，更不能讓單選按鈕出現布局重疊，否則會完全顛覆用戶的固有認知，造成操作混亂。
如果選項數量較多、屏幕空間有限，可用下拉菜單替代單選按鈕。
但要注意：下拉菜單需要用戶多一步點擊展開的操作，會增加交互成本，也沒法讓用戶一眼看到全量選項，降低認知效率。因此選項較少時，優先用單選按鈕。
單選按鈕優先垂直排列，不建議水平排列。
垂直排列時每個選項的圖標和標簽對應關系更清晰，用戶不會看錯；水平排列不僅容易讓頁面擁擠、可讀性下降，還會破壞布局一致性，在響應式適配中也更容易出問題。
前面講了每個組件的細節，這里給大家整理了最簡使用規則，設計時直接對照即可。
開關、復選框、單選按鈕，都是設計里最基礎、最常用的組件。設計時要先看場景、定語義，再選對應的組件，而不是憑感覺、看顏值隨便亂用。
當然，我們也會看到一些特殊的設計案例，比如iOS在深色模式的選擇里，用了圓形復選框，和我們今天說的常規用法不一樣。這種情況，要么是為了整個系統的設計語言統一，要么是有特殊的產品考量，不建議盲目照搬。對于設計師來說，先搞懂這些基礎組件的用法、可用性底層邏輯，才是做好設計的根基！
轉載自 優設網
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
大家一定經常聽說 UI 設計師需要具備產品思維，但又不知道產品思維具體是什么，尤其是很多同學只把產品思維當成是產品經理做需求的能力。
蘭亭妙微UI設計公司：今天我們的主題就是分享產品思維的具體思考方式和應用
產品思維一句話總結，就是——通過規劃產品形式來解決產品問題的思考模式。
這里我們先明確 “產品問題” 是什么，它是一個非常寬泛的概念，可以說所有產品相關的問題都可以是產品問題，包括但不局限于功能、交互、體驗、視覺、技術、服務等領域。
在產品的研發和運營過程中，產品團隊總會發現和積累出各式各樣的問題，比如功能太簡陋不能滿足用戶需求、交互太復雜用戶用不懂、邏輯太復雜技術實現不出來等等。這些問題當然需要被解決，而解決的方式有兩種，一種就是直接使用相關領域的 “技術方案” 解決，另一種就是提供新的 “產品方案” 來解決。
這里技術方案是泛指，指產品以外的其它類崗位使用自身專業技能來解決問題的方案。比如用戶覺得頁面信息混亂，設計師通過布局、尺寸、間距、色彩的視覺調整，就能解決這個問題。或者某些交互設計需要非常復雜的編程方案，前端自己通過鉆研技術，來實現這個效果。
比如下面這些就是純粹的視覺優化方案：
產品方案則是指通過制定或調整產品的功能、服務、表現形式，來解決相關的問題。比如上面覺得信息混亂，不再是改設計，而是直接優化和增減字段信息。交互設計開發起來太難，那就直接調整產品功能，分拆交互步驟降低開發難度。
比如下面這個就是對產品的形式做出了一定的調整：
兩種方案各有優劣，但在真實項目中，產品是先于設計和開發的，好的產品方案不僅能提高產品的實際表現，同時還可以大大降低技術實現的成本。所以在解決問題時，團隊必然會傾向先使用產品思維來創建產品方案，然后再去實施。
總結起來，產品方案就是涉及對產品本身的調整方案。原則上，這種方案是由產品經理提供，設計師只要跟著產品的要求去做設計就好了。
但在真實項目中，產品不可能考慮到所有問題，尤其是和體驗、交互、視覺高度相關的部分。
每當我們每做界面或功能時，碰到所有和產品有關的問題，都需要反饋給產品經理再等它做決策，那么他必然是處理不過來的，項目肯定也做不下去。所以設計師需要在自己力所能及的范圍里，盡量自己去解決這些問題，提高項目整體運轉的效率和質量。
尤其在一些對視覺要求不是特別嚴苛的環境中，UI設計的成果往往“能看”就夠了，領導或者面試官對設計價值的定義就不會在視覺上，往往會聚焦在產品方案上。就是因為設計師自己有產品思維具備解決產品問題的能力時，可以極大的填補產品經理層面的空缺，還可以提高產品質量和研發效率。
但是，產品方案不是只提供解決方案就行了，還需要合理、有效，所以就要綜合各方面的制約與影響，才能輸出優質的結果，這就是一個非常綜合性的分析過程，我很難用簡單的語言進行歸納和總結。
所以，下面就通過前面的案例，來展示產品思維的具體思考過程
在原有兩步路路線詳情頁中，頂部的大圖和信息區域是我重點調整的區域之一。
之所以重點關注，不僅僅是因為它 “不好看”，而是這個大圖的缺陷很多。作為瀏覽用戶，圖片的關注度不是沒有但絕對不是重點，往往只是草草快速瀏覽一遍就夠了，但現在的輪播形式就沒辦法高效看完相關圖例，且占據的篇幅又過大，擠占下方的其它關鍵信息點。
當然也有同學可能會覺得看圖怎么會不重要，你們看小紅書找旅游地不就是被圖吸引然后再點擊進入做出選擇的嘛？
不排除這種情況是存在的，但這不是小紅書，這是一個比較硬核的徒步社區，不是給用戶看大圖就有問題，而是在發布用戶這一側，硬核優質的分享者（是去走或跑幾十公里不是到打卡點自拍）大多不具備那種拍“美照”的能力，最終呈現的路線圖景多數就是隨手一拍的質量，瀏覽用戶壓根沒必要仔細欣賞。
再進一步考慮，有很多經典線路本身景色就不是特別好，尤其是偏越野跑的線路往往雜亂又逼仄，照片帶來的作用更多是一種對路線的概括（功能性），而不是作為吸引人的美照。在這個限制下面，大篇幅展示封面就不會獲得常規以圖片為導向的應用的結果。
這些就是針對問題的分析，而這里面既有體驗的問題，也有產品的問題，甚至還有運營的問題，但具體去區分它們沒有意義，只要它們不是純粹的視覺問題我們都可以統一歸納為它們是產品問題。
基于這些問題去思考解決方案時，就可以問自己一個簡單的問題，是不是只做視覺調整，如優化布局、更改尺寸、添加投影、增加圓角之類操作就能解決。如果不能，那就要涉及到對產品形式的調整了，也就是涉及功能、信息的改動。
這里我們先看改完之后的結果：
為了減少圖片的面積和提高觀看效率，我選擇縮小圖片并做成左右滑動的列表，把發布用戶信息做到上面，合理利用空間且突出收藏、分享等操作。但光改這個依舊只是一個簡單的視覺調整，缺乏深度和細節，沒有什么解釋的空間。
所以再往深一點挖掘，一屏只能展示一張圖多一點，理由不是圖片比例的問題，而是因為用戶發布路線最小可以添加的封面圖只有一張。如果只有一張，那么右側留空顯然是不能接受的，這樣的方案也就做不了。而且只展示圖片實在是有點不夠看。
我會再想到鏈家之類看房軟件的頂部區域，除了展示攝影圖以外，還會添加固定的房型圖，應用了多種圖片類型。而在兩步路中，如果發布路線，除了封面圖外，路線圖本身肯定也是能直接生成圖片的，可以生成類似跑步軟件的那種路徑圖。
頂部圖片也可以不止有用戶自己拍的攝影圖，還可以添加路線生成圖，同時這張圖因為是靜態的，就可以在生成過程中添加一些數據信息或標注內容等，和下方可交互的地圖路線展示區分開來。并且在下方區域添加一個類似電商中 “商品圖/視頻” 切換的標簽快速選擇。
甚至再仔細想想，當我進入路線詳情頁時其實更關注的是路線本身，第一張圖直接放路線圖而不是放在最后，可能對相當一部分用戶來說也是更實用的做法。但這么做就有點激進，需要給出初步設計以后再套一些真實內容做出頁面看效果，這就是內部評審或用戶測試要做的事情了。
到這里這個模塊基本解釋的就差不多了，而我們為了優化它已經做出了一些超出視覺設計外的變更，且需要考慮盡可能多的細節，照顧到方方面面，這就是產品思維應用的過程。
再往下的路線模塊改動也同理，我就不多做展開，你們可以自己深入解構一下：
設計過程中對產品思維的應用，不是成為產品經理構思新的功能需求，而是維持原先目標的不變的情況下，給出新的、更完整、更合理的產品方案。
而產品方案當然不是你們想怎么輸出就怎么輸出，這些方案還需要再后續經過團隊的評審（我要驗牌），也就是說服其他人同意你的設計方案。而光看圖肯定不夠，所以要進行解釋說明，從一開始的問題分析出發，到如何完成這個結果的考慮過程。
在這個場景中只看設計圖效果是最沒價值的，如果你能說服團隊通過，那這套方案就是好方案，如果不行，那不管你想的如何天花亂墜還是視覺做得多花里胡哨都沒用。所以方案構建邏輯性是非常重要的，因為沒有邏輯就沒有說服力。
產品思維本身就是一種比較抽象的思維，提升這種底層思維能力需要通過自己大量的積累。我們后續還會陸續做一些相關的案例分享（這應該才是最有用的）。
同時，面對真實工作場景里產品思維很多時候會淪為一種過稿的武器，是一種職場“詭辯”的技術，畢竟上線有沒有用無所謂，領導、客戶覺得好，才是真的好……
轉載自優設網
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
jankspace精準概括這類痛點：產品對外宣傳全鏈路無縫自動化，實際使用卻要在賬號、支付、文件、權限間反復跳轉，消耗用戶耐心卻毫無體驗增益，屬于設計失誤帶來的無效負擔。消費心理學宜家效應佐證：用戶親手投入步驟完成事物后，會自發抬高產品價值；動手參與的沉沒成本，最終轉化為情感與記憶沉淀。
| 摩擦分類 | 用戶體感 | 典型場景 | 設計決策 |
|---|---|---|---|
| 壞摩擦 | 被迫填坑、煩躁流失 | 重復登錄、錯亂跳轉、無效排隊 | 全盤刪除優化 |
| 交易必要摩擦 | 安全感確認 | 支付二次核驗、隱私授權 | 精簡話術、保留必要步驟 |
| 儀式型好摩擦 | 沉浸場景、充滿期待 | 開箱、線下試穿、集章打卡 | 結構化設計，配套情緒回報 |
| 記憶型好摩擦 | 愿意投入時間、加深印象 | 長內容觀看、線下展覽動線、手作 DIY | 設計體驗峰值 |
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
留存邊界：極小眾精細化定制場景，配置向導保留兜底入口，不作為主流操作路徑。
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
列表頁就是以展示列表 List 為主的頁面，所以我們需要先理解列表是什么。
列表源自編程術語，是一種數據結構，即按照線性順序排列的數據項集合（有限序列）。說人話，就是按照一定順序展示數據的形式。
我們再用UI設計的角度來理解它，可以把它分為 “列” 和 “表” 兩個部分。我們先理解表，表就是“表格”的意思，這也是計算機中存儲數據最基礎的形式（關系型），我們在頁面中看見的多數內容都以這種形式記錄。
列則是動詞 “排列” 的意思，用一定的邏輯、方法、順序將表格排列出來。這種排列是要經過設計和調整的，不會和原來的表格完全一致。
也就是說，列表設計是種對表格的轉換，是種對數據的可視化呈現形式。
之所以要強調這個，就是因為想要做好列表設計就離不開對數據的理解，一個專業的列表設計不是做一個好看整齊的重復性組件，而是將數據表格清晰有效的反映出來。
數據表格對列表的影響包含下面幾個要素：
1. 屬性字段的影響
屬性字段就是列表內要放的具體信息點，也就是數據表格中的表頭。比如一個商品列表中，要放商品圖片、商品名、品牌標簽、節日標簽、營銷標簽、銷售量、好評率、價格、原價……每個獨立的信息就是一個字段。
而一個真實的項目列表內，往往會包含非常多的字段，所以開始設計前要先搞清楚數量和明細，以及它們各自的含義。一方面是設計中不能有字段的缺失，另一方面是字段中包含對應的權重、分類，是設計前必須要確定的信息。
比如下面的列表內容，就包含了大量的字段信息，而這些字段既有權重的強弱，也有分類的整理，是經過設計師的專業分析和設計的結果。
2. 屬性值的影響
屬性值就是每個屬性具體放什么內容，有什么限制。比如商品名，肯定是放商品名稱的文本，但文本一般是什么樣的，最長支持多少字，這些就是屬性值的基本信息。
屬性值在開發環境中只能是文本（字符串），但在設計中這個值就不一定只是文本，可能還是圖片、圖標、符號等內容，中間會有轉化過程。比如用戶列表中，用戶有不同的 VIP 等級，數據中記錄的等級肯定是文本性質的，而展示出來卻可能是專屬的黃金、白銀、青銅圖標。
屬性值的認識同樣非常重要，決定了列表的設計是否準確，符合產品的規劃。
3. 字段狀態的影響
最后字段的狀態，就是字段展示的邏輯，簡單解釋起來就是字段什么情況下出現，什么時候隱藏，出現的時候顯示什么內容這三個問題。
比如美團的列表中，有美團商家列表中，運輸標簽有美團快送、專送、全城送、商家自配等不同類型，而下方的配送時間也在樣式上會有差異，這就是對字段狀態的表達。
而越是復雜的列表，包含的字段狀態差異就越大，往往會直接影響列表的樣式，所以設計過程中就要體現盡可能多的樣式狀態，也就是設計它的不同變體，確保在各種場景中它們能正確顯示。
想要設計好列表，就要面對上面提到的三個問題。優秀的列表不止是一種視覺結果，而是一種能兼容相關數據展示的容器規則。
接著我們來理解列表頁的主要框架和布局形式，入門它的基本設計要點。
首先列表頁不是只有列表一種組件，多數還會包含對列表數據進行搜索、篩選、排序的組件。
除此之外，部分重要的列表頁還可能在頂部放運營模塊，用來展示一些熱門推薦內容或單純作為廣告位。
運營內容放頂部且篇幅較小是因為頁面形式的限制，不能在頂部放太多內容讓列表被頂到第二屏去。所以目前的設計為了更好的塞入內容，就會選擇在列表中插入其它數據，比如純運營廣告，也可能是內容推薦，或者是模塊入口等。
總結起來，列表頁的主要框架就是頂部搜索欄、特殊模塊、篩選排序欄、列表區域的組合。
而最關鍵的列表區域，可以使用不同的列表來展示信息，我們可以簡單分成“單列”和“多列”兩個布局大類。下面我們就分別對這兩個分類類型做個解析。
1. 單列列表
單列列表就是一行只有一個數據對象的列表形式。而單列列表模式中還區分兩種類型的列表，一種是引導型，一種是展示型。
引導型就是引導用戶點擊進入查看詳情，比如商品列表、酒店列表，是為了讓我們在列表中找到感興趣的內容點擊進入詳情頁面。
而展示型，就是直接在列表中展示主要信息，讓用戶直接順著列表的順序查看主要的內容，而不是進入到詳情頁查看。最有代表性的展示型列表，就是朋友圈這類動態列表了。
單列列表對單個數據對象的展示空間較大，但是單屏瀏覽數據量就會減少，適用于數據對象字段較多的場景。
2. 多列列表
多列列表就是一行會展示多個數據對象的列表形式。通常移動端的多列列表只有兩列，在少數情況下才會出現三列。而兩列模式中，也包含兩種布局形式，一種是等高展示，一種是瀑布流。
等高展示就是列表內數據對象的高度是保持一致的，每個數據對象的尺寸統一左右對齊，適用于字段類型、內容相對統一變化小的場景。
而瀑布流，則是數據對象高度不一致的多列布局形式，相對更靈活適用面更廣，適合字段類型、內容變化較大，不同數據對象的差異極大的場景。
轉載自優設網
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
我想這是很多新手設計師都有過的感受，明明懂了很多設計知識，但到真正設計的時候還是會出現迷茫或者沒思路的情況。
造成這種情況的主要原因是，雖然我們每天看了大量的設計文章或者技法，但沒有第一時間應用到設計實踐中。
換句話說就是，我們每天看的設計內容可能跟我們實際做的工作需求不夠搭邊，這樣就很容易造成拿到一個新需求后沒有想法，感覺之前看了很多設計圖或者文章都沒派上用場，不得不重新找競品找參考才能展開設計。
就像學了一節新課程，如果沒有第一時間做配套的練習題，等過了一周再做練習題發現根本不會做，因為之前學的課程早都忘得差不多了。
北京蘭亭妙微UI設計公司：下面展開講講如何避免這種情況，建立自己的設計成長體系。
對于設計技法vs設計原理的問題，我覺得對于設計師來說同等重要，但具體要結合你現在的工作情況找到一個側重點。
舉個例子，比如當前的工作偏UI視覺多一點，需要常做一些運營活動圖，那么日常就可以多側重練練技法，多做視覺練習；如果當前的工作偏向純UI，那么就可以多重視設計理論，多思考產品規劃、交互流程、用戶使用體驗等等這些產品交互相關的知識，用理論支撐起我們的設計方案。
這樣既能保證我們能很好地勝任當前的工作，還能讓我們在持續的工作中不斷有進步有提高。
對于平面能力差的問題，我覺得平面設計能力是基礎。可能很多同學在大學時有過這種體驗，無論你的專業是視傳、數媒、產設，甚至攝影，都需要經歷平面設計這一關。排版、手繪、字體、后期合成等等這些平面能力需要我們不斷練習實踐。
現在AI繪畫工具的出圖效果都不錯，大家可以好好利用起來輔助出圖，補齊UI設計師在平面設計上的短板。
總的來說，平面能力要多練習多積累，日常工作中還是建議靈活運用“AI+設計”的形式，也能打造出好的效果圖，沒必要為了某個視覺效果死磕PS而浪費太多工作時間。
針對看了很多設計但做需求還是沒想法，以及到底怎么學UI、建立自己的設計體系這些情況，我結合自己的經歷總結一下，希望能對你有幫助：
首先還是多積累，多看好的設計，審美需要一直提高。比如每天早上我都會拿出半小時的固定時間去Pinterest或者花瓣里去看各種各樣的設計圖。
需要注意的是，這里的看也分為兩個方向：一個是日常看圖，一個是專項看圖。
其次，每天看的圖很多，就需要把圖都整理一下，這個時候就需要建立一個系統性的設計素材庫。
拿花瓣舉個例子，在花瓣里可以創建各種各樣的分組。
比如APP是一個大的分組，在這個APP的分組里面可以建各種各樣的畫板，像APP-首頁、APP-導航欄、APP-標簽設計等等；再比如網頁設計是一個大的分組，我可以在網頁設計底下創建網站首頁設計、網站登錄頁設計這些畫板。
這樣整理的好處一個是讓我們每天看的圖更加清晰有條理；另一個是有了分組/畫板后，接到新的設計需求后就可以直接定位到某個分組里，看看我們之前創建的畫板里有沒有類似的一些參考圖，省去了從0~1再重新找參考圖的這種過程。
而且看到自己采集的參考圖突然派上了用場的過程，對于設計師來說特別棒！這說明我們每天看的內容有價值，不只是在收藏夾里吃灰。
比如要設計一個UI標簽，我們可能需要反復去創建的素材畫板里看各種各樣的標簽設計，這樣不止一次地反復看收集的素材，看的多了之后我們就對這些素材圖特別熟悉，這樣就不怕后面的設計再沒思路。
現在每天網絡上都有特別多的零碎信息，所以這種清晰的整理是一個特別有效的成長方法。經過這種「先整理再回看再設計」反復練習的過程，會有一個更清晰的設計體系和工作流，設計能力肯定會有一個質的提升。
轉載自優設網
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
通過制造視覺元素的差異—— 讓 “不一樣” 的元素從周圍環境中凸顯出來，自然成為視覺焦點。
引導用戶注意力優先落在關鍵信息或操作點上，這就是對比原則，我們可以通過形狀的對比讓卡片突出，增加視覺表現力：
在一些視覺頁面中，也可以用異形容器增加視覺表現力，可以結合主題設計容器，例如下方就是一個以紙質火車票造型作為卡片背景的例子：
也可以結合內容設計容器，例如頁面的內容是感謝用戶，就可以從感謝信或者信紙的角度設計容器：
在設計中，想要為卡片或頁面增加形式感，豐富背景是直接且高效的方式，可以從顏色、底紋、裝飾元素這三個核心維度展開，讓背景不再單調，為整體設計加分：
1. 優化顏色增加背景的形式感
可將背景的無彩色（如黑白、灰度色）替換為帶有明確色相的有彩色（如柔和的薄荷綠、清新的天藍、低飽和的珊瑚橙等）
借助 “無彩色與有彩色” 的屬性差異，讓卡片與周圍的淺灰背景或普通卡片形成直觀色彩對比，快速從整體布局中跳脫出來：
也可以將卡片的單一純色設計，升級為多種顏色的漸變效果 —— 通過這種漸變色，讓卡片與周圍的背景、其他組件形成鮮明對比
從而快速從整體布局中凸顯出來，成為視覺焦點，快速抓住用戶注意力：
2. 給背景增加底紋
在背景中增加底紋（如低透明度的幾何紋理、輕微的肌理質感等），不僅可以強化視覺層次，還可以向用戶傳遞頁面的風格氛圍，增強記憶點。
例如科技類產品用細線條網格底紋增強科技感，古風類產品可以用紙張等營造復古的氛圍感：
下面列舉了一些常見的底紋元素，可搭配圖層的混合模式、不透明度使用：
3. 在背景上增加裝飾
可以根據頁面/活動添加合適的裝飾元素，裝飾可以是圖形、文字等與頁面相關的元素。
裝飾元素主要是為了平衡界面視覺，優化整體協調性：當界面存在 “大面積空白” 或 “元素分布不均” 時，裝飾元素可起到 “視覺平衡” 作用。
這里的文字不僅是卡片標題，也可以是活動標題或者頁簽導航，那么文字的設計感可以怎么加呢？我們可以從圖形裝飾、線條裝飾、文字裝飾、背景裝飾四個方面給文字添加設計感：
1. 圖形裝飾
將圖形放在標題空白處增加標題的設計感：
也可以用來填補標題的空白區域，平衡視覺：
用圖形代替文字的某一個筆畫，傳遞產品的氛圍：
2. 線條裝飾
用簡單的線條突出標題，輔助信息分層，突出重點信息，降低認知成本：
3. 文字裝飾
用風格獨特的字體寫一句英文作為標題的裝飾：
另一種方法是將文字放大起到裝飾作用：
4. 背景裝飾
在標題后面增加背景，不僅可以保證標題的可讀性，還能讓標題抓住用戶的眼球，進一步強化視覺表現力：
盡管上面的案例分別展示了不同的提升形式感的方法，但在實際設計中，不必局限于單一形式。
將多種手法靈活組合（比如為卡片搭配有彩色背景的同時，疊加輕量底紋并點綴細節裝飾），更能放大視覺表現力，讓界面擺脫單調感，呈現出更豐富的層次與質感。
如果這篇內容對你有啟發，或是你有其他提升形式感的實用思路，歡迎在評論區分享交流，一起探索更多設計可能性～
轉載：優設
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
一般用戶在登錄后臺管理系統后，后臺首頁就成為了用戶與產品交互的第一個頁面，這某種程度上也凸顯了這一頁面的重要性。那么，后臺管理系統的首頁設計可以遵循哪些策略？本文作者結合實戰項目發表了他的想法，一起來看看吧。
很久沒有更新文章了，一方面文章選題困難，公眾號的閱讀量真是有點慘不忍睹，寫作的動力有所下降。另一方面工作確實比較忙，時間精力有限，最近參加了多個工作項目一直在加班。
今天總結下項目過程中，關于后臺管理系統首頁設計引發的一些思考。
主要的內容包括：
后臺首頁是用戶登錄后，與產品交互的第一個頁面，信息內容非常重要，作用也非常明顯。一方面可以幫助用戶宏觀了解系統的整體運行狀態，洞察業務問題。另一方面可以幫助用戶快速處理業務問題，不需要到專門的功能頁面操作，縮短用戶的操作路徑。
后臺首頁需要依托整個產品的功能體系，根據用戶角色的職能、權限、業務范圍，提取關鍵的用戶關心的業務功能點搭建頁面內容。所以一般是在業務功能完成之后再進行首頁設計。這就要求產品經理能夠從全局視角理解用戶和場景，才能做出有效的設計方案。
另外首頁不屬于具體的業務領域，所以一般不會安排固定的產品經理，而是由產品經理兼任。如果產品設計沒有整體規劃，首頁就容易被忽略，成為「三不管」地帶。
根據以往的設計經驗，我總結了以下四點：
首頁設計要求產品經理對用戶角色的分類、業務職能有比較深入的了解，否則產品設計就可能變成內容堆砌。
通常后臺系統需要面向管理層和執行層兩類用戶，他們對于信息需求存在比較大的差異。管理層更關注宏觀層面的統計信息，方便了解業務動態，從而制定工作決策等，所以各類可視化圖表就成為首頁重要的內容組成。
對于執行層用戶，主要是完成具體的工作任務，所以更加關注明細數據。除此之外，適當地增加一些統計數據，可以更全面了解系統狀態，也便于對上匯報，減少人工統計的工作量。
B 端產品了解用戶和場景并不容易，如果只靠“猜測”做設計，就會發現首頁設計有很多種可能，怎么做似乎都對，怎么做似乎都不對。而且參與的人越多，想法也會越多。
所以在項目中，需要盡可能地收集用戶場景信息加以分析完成設計，即使存在一部分“猜測”信息，也需要能夠自圓其說，才能更好的推進產品設計落地。
對于小的業務系統，單獨的一個頁面就可以涵蓋所有的業務信息，內容也會比較清晰簡單。
對于比較大的業務系統，首頁包含的消息會比較多，例如阿里云、騰訊云等產品，一個頁面內容無法承載所有的信息。因此需要根據場景/主題拆分首頁內容，便于用戶有目標地快速查看信息。比如阿里云采用的是資源管理、安全管理、成本管理等主題去劃分首頁內容。
1）串聯內容，縮短路徑
某些場景下，首頁要滿足用戶快速處理業務工作的需求，例如待辦事項，審批操作等，通過明細列表的展示，結合抽屜等詳情信息展示，用戶可以在首頁直接處理工作任務，無需進入到功能頁面。
「常用功能」也是首頁的常見組件，類似操作系統桌面的快捷方式一樣。可以將一些二級甚至三級功能作為常用功能放在首頁中，用戶不需要通過菜單逐級點擊，即可進入功能頁面，對縮短用戶操作路徑也有很大幫助。
2）高頻常用功能信息聚合
首頁的價值在于幫助用戶簡單、高效的認知系統，是高頻常用功能的信息聚合。因此需要盡量減少花哨、不實用、看似高大上的功能，或者改變展示形式，保證重要信息的優先展示。
有些 B 端產品的門檻比較高，為了降低認知成本，于是有人希望在首頁中增加系統介紹、系統架構圖的形式來展示產品的功能流程，在產品演示是可以更好的讓用戶理解產品功能。
這些本來應該是在 PPT 中展示的信息，卻要放到首頁中展示。看似酷炫的一張圖，實際上在應用階段對用戶的工作沒有任何幫助。因為用戶根本不關心你的系統架構是什么，需要的是產品幫助他解決工作中的問題，帶來的效率提升。
即使用戶需要了解這些信息，也不是每天打開首頁就要一眼看到，可以采用其他的呈現方式。比如用戶引導，或者與業務信息關聯，既可以呈現出業務流程，也可以展示業務信息，又或者首頁增加入口、引導在幫助中心查看。
B 端產品業務功能是面向用戶角色的，同一角色的用戶具有相同的工作任務。但是首頁則有所不同，同一類角色的不同用戶，關注點也不完全相同。尤其是業務系統內容較多時，首頁內容可定制就成為了滿足不同用戶信息需求的方式。
當然系統的定制化并不是讓用戶從零定制，而是在系統初始內容基礎上，重新組織頁面內容、調整頁面布局等。否則定制化反而會帶給用戶更差的體驗。
在項目設計中，就碰到了這個問題。有同事認為首頁應該簡單點，避免過多的信息量增加用戶的學習成本。
當然這個問題需要根據產品定位具體分析。不過總的來說，我個人認為首頁應該豐富一些。
首頁是信息聚合頁面，天然就會有較多的信息內容，用戶需要通過信息傳遞了解系統的狀態和變化，人為的過濾掉內容后會影響信息的全面性。
其次用戶有信息選擇權，通過一定時間的摸索，可以形成自己的信息查看軌跡，或者個性化定制首頁內容過濾掉工作中冗余的信息。
而且B 端產品經過多年的發展，單從布局和表現形式上看，首頁已經有比較成熟的設計模式了，大多數企業用戶也形成了統一的認知和習慣。卡片風格是首頁最常見的展現形式，卡片可以讓頁面分割更加清晰，方便信息讀取，有助于弱化信息量帶來的復雜感。即使不采用卡片分割， 可以通過間距、標題等引導用戶視線，劃分頁面內容。
簡單總結下：
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
vivo小游戲的改版揭示了輕量化產品的設計本質——從點擊量到用戶時長的指標躍遷。本文深度拆解其首頁分發邏輯重構與去低幼化視覺升級，揭秘如何通過動態專題矩陣、情感化設計和品牌色系統，同時實現商業價值提升與品牌心智進化。
小游戲業務的核心特點是“輕量化啟動，依賴時長變現”。
在產品形態方面，“點擊即玩”是重要特征，其試錯成本極低，用戶可快速、反復嘗試多款游戲，使用時長比點擊更能代表深入程度。在營收方面，對于依賴廣告變現的游戲，時長直接影響廣告曝光次數；對于內購游戲，時長則意味著付費窗口期的延長。“停留”比“點擊”更能創造商業價值。
依據以上兩個原因，小游戲業務成功的關鍵指標并非傳統的分發效率（點擊量），而是用戶游戲總時長。這是小游戲設計改版的第一個核心目標。
<圖：業務目標>
除此之外，在存量競爭時代，設計不僅僅是“做得好用”，更需要“做得準確”——準確理解業務，準確洞察用戶，準確傳遞品牌心智。
“小游戲”，在很多用戶的印象中，往往是“休閑、輕松、可愛，甚至樣式上帶點低幼感”的存在，這造就了其固有的用戶心智。
實際上，【vivo小游戲】希望服務的用戶是豐富、全面的，所以矛盾便浮出水面——亟待扭轉“低幼感知”，這就是小游戲設計改版的第二個主要目標。
在以上兩個背景之下，本次改版目標如下：
目標一（來自業務目標）：提升游戲時長，讓分發更精準，幫助用戶“玩進去，愿意留下”。
目標二（來自用戶心智）：去除低幼感知，重塑“年輕、放松、品質”的產品形象。
<圖：本次設計改版的兩個目標>
這不僅僅是一次界面優化，更是一次以設計驅動產品品牌升級的系統性設計。下文將從三個維度，分享我們的設計推導與落地過程。
重構首頁分發邏輯，使其服務于“提升時長”的目標。對首頁三大核心模塊——“用戶愛玩”、“平臺推薦”、“隨機游戲”——進行了數據洞察和體驗重塑。
<圖：首頁改版的三個重要模塊>
數據顯示，“最近愛玩”模塊貢獻了極高的總游戲時長。這證明，用戶主動沉淀的偏好列表，是游戲啟動的最強驅動力。
新的洞察隨之而來：絕大多數的用戶，其“最近愛玩”的游戲只有1-2款。舊版首頁將4款游戲“平鋪”外顯，反而稀釋了用戶的注意力，導致分發的目標不清晰。
針對這一現象，我們的A/B Test結論是：滿足需求，比增加曝光更重要。新版設計強化了“用戶愛玩”的模塊心智，使其成為用戶返回時的“第一眼”核心，讓用戶能最快回到那個“TA真正想玩的游戲”，而不是在多個似是而非的選擇中猶豫，從而直接鎖定并延長核心游戲時長。
<圖：左圖為老方案，右圖為新方案>
“平臺推薦”是發現新游戲的主陣地。我們放棄了“一招鮮”的模式，轉而構建了一套專題矩陣，針對不同游戲和用戶意圖，設計差異化的推薦理由：小編推薦專題：從“系統”到“有溫度的個體”建立了“安利官”角色，把真實的小編推向用戶。用真人頭像、親切口吻和官方認證，打造“有溫度、有信任感”的真人推薦。情感化與專業性的結合，極大地拉近了與用戶的距離。
<圖：小編推薦>
<圖：小編推薦>
場景化專題：從“游戲是什么”到“我此刻需要什么”將游戲分發融入用戶生活場景。例如，“早上好：提神醒腦”、“下午好：堅強摸魚人”、“晚上好：放松一下”。通過時間、情緒、狀態的匹配，讓游戲推薦更具說服力和即時價值。
<圖：場景化推薦>
高品質專題：從“文字說”到“視覺證明”針對精品或內購游戲，我們用更大尺寸的卡片、更具沉浸感的圖文或視頻預覽，來直觀呈現游戲的“品質感”，將“高質量”這一抽象概念具體化。
<圖：左圖為老方案，右圖為新方案>
玩法專題：用IP強化“類別識別”在“男生愛玩”、“掛機輕松玩”等玩法標簽下，將專題內最具代表性的頭部游戲IP（如“太空行動”、“一波超人”）進行視覺放大，強化用戶對專題游戲類型的“一眼識別”。
<圖：玩法專題>
魅力信息前置：從“默默無名”到“熱度可見”將“XX萬人在玩”這類強吸引力信息，從傳統的文字區剝離，設計為高識別度的半透明標簽，與游戲Icon強綁定。通過調整色彩、字重，使其在不遮擋Icon主視覺的同時，成為輔助用戶決策的“魅力因子”，有效提升了點擊意愿。
我們注意到，有相當一部分用戶是在首頁“逛了好幾屏”后仍未找到目標，此時我們猜想“隨機一下”可能是他們留下的最后機會。
強化了其“提供一次驚喜、一種可能性”的心智，為探索型用戶保留了一個“輕量級出口”，這背后是對用戶分層和場景的細致體察。
<圖：隨機玩>
設計思考：分發設計的精髓在于“對癥下藥”。我們不再追求統一的曝光策略，而是將首頁視為一個動態的、有層次的決策場。“用戶愛玩”是確定性滿足，“平臺推薦”是引導性探索，“隨機游戲”是可能性兜底。
設計的價值在于，為每一種用戶路徑，都鋪就了最合適的體驗軌道，最終合力指向“停留與探索”的核心目標。
“去低幼化”不僅是風格的轉換，更是品牌心智的重塑。為此，我們建立了一套完整的研究與執行方法。
“低幼”是一個感性評價。為了找到解法，我們首先要將其“可視化”。
對比了市面上的兒童教育產品，并結合對自身舊版設計的審視，提煉出三個維度的“低幼”視覺特征：
這三點，共同構成了我們需要打破的舊有特征。
<圖：關于低幼感知來源的研究>
有了要規避的視覺特征，同時，要確立新方向。結合產品特性和目標用戶，我們定義了vivo秒玩小游戲應有的產品調性：
<圖：從情緒板到色彩定義>
色彩體系重構
定義品牌色：我們摒棄了“大雜燴”式的色彩，定義了“活力黃”與“輕松綠”作為品牌主色，分別承載“生命力、有趣”與“放松、自然”的情緒。并嚴格設定了60%背景色、30%白色卡片、10%品牌色的色彩使用比例，建立清晰的視覺層次。
<圖：品牌色>
分層處理原則：
<圖：分層處理原則>
注入“情緒價值”：
<圖：“海島”微動效>
<圖：隨機玩>
傳承品牌基因：我們沒有割裂歷史，而是巧妙延續了品牌核心符號“閃電”。
新版設計中，“閃電”圖形以“斜切線”的形式，融入魅力信息標簽、專題卡片頭圖等細節，在去低幼的同時，保留了用戶對品牌的核心認知，完成了視覺語言的平滑演進。
<圖：老版本頁面示例>
<圖：新版本頁面示例>
設計思考：去低幼化不等于“高冷化”或“同質化”。我們的解法是建立系統性的設計語言。它不是對某個元素的修修補補，而是從底層色彩邏輯、視覺層次、情感傳達、品牌符號多個維度進行的一體化重構，最終在視覺上完成了從“兒童樂園”到“年輕人休閑客廳”的轉變。
回顧整個項目，這不僅僅是一次界面優化。我們將其視作一個通過設計系統性地解決商業和品牌問題的范本。復盤整個過程，我們有幾點深刻的心得，這幾條心得從我們剛剛入行到目前都適用，感受愈發深刻：
1、理解產品是在做什么：設計必須服務于商業本質。深刻理解“小游戲靠時長盈利”這一核心，才讓我們敢于將“提升分發效率”的慣性思維，轉向“提升用戶停留與沉浸”的差異路徑，這是所有設計決策的“北極星”。
2、抓住重點：資源永遠是有限的。通過數據分析，我們精準地識別出“最近愛玩”模塊是提升大盤時長的關鍵。集中優勢資源，在關鍵模塊上做深做透，才能帶來數據層面的最大回報。
3、以用戶需求為導向：用戶的核心需求是“找到我想玩/可能愛玩的游戲”，而不是“看到更多游戲”。設計要做的，是提供“理由”和“路徑”，幫助用戶高效決策，而不是制造“信息過載”。對“最近愛玩”模塊的聚焦，正是這一思維的體現。
4、任何時候都不要忘記有趣。在追求“去低幼化”的過程中，我們并沒有走向另一個極端——“嚴肅與無趣”。相反，我們將“放松”、“驚喜”、“有趣”這些屬于游戲產品的核心情感價值，通過動態效果、場景化文案、情感化設計重新注入體驗。
我們交付的不僅是一個“更好看、更好用”的首頁，更是一個“更清晰、更高級、更具吸引力”的vivo小游戲品牌。
注：插圖中全部實例均為設計稿，非線上截圖。游戲icon、名稱、在玩人數等基礎信息非線上信息。
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
作為一個 B 端設計師，我們究竟要如何理解組件？
當接觸到一個新組件時，通常會陷入到迷茫。一方面是組件過于的熟悉，我們在日常的工作當中會頻繁接觸到大量的組件內容（畢竟是組件設計師...）另一方面則是新的組件不斷涌入，我們作為設計師一時之間不知道如何進行分析，今天我們就來聊聊 B 端設計師與組件之間的“愛恨情仇”。
先來簡單說說什么是組件？
我認為組件就是組成用戶界面的基本元素，也是前端在開發過程當中，抽象出來可以復用的模塊。對于定義大家不必過于糾結，最主要還是要了解其使用，比如在下方頁面當中，會包含有哪一些組件？
A. 輸入框 開關 上傳 按鈕 文本提示
B. 輸入框 開關 上傳 按鈕 氣泡卡片
C. 輸入框 開關 圖片預覽 按鈕 文本提示
這就是我們要了解關于一個組件的判斷流程，我認為會有三步：形式、交互、場景。
其實我們在去辨別新一個組件的時候，會優先關注組件的「樣子」，進而來進行辨別。
比如下方的兩個組件，我們其實很快速就能判斷出一個是 單選框，一個是多選框。因為在我們潛意識當中單選為圓形、多選則為方形，因此對于一個組件的第一印象則會和它的形式相關。
但很多時候，隨著業務的變化，我們也會給組件更多含義。比如在下方三個新建按鈕當中，因為他們的形式不同，所對應的含義也并不相同。
通過形式上，我們可以理解為：
再舉一個例子，比如在這三個選擇組件當中，正是由于其組件形式的變化，導致它們在使用上也會存在較大差別~
當然，正是因為它們樣子的改變，組件的使用含義也會產生變化。
知道它的樣子還不夠，我們還要了解它究竟應該如何操作，因此就需要明確對應的交互狀態。
比如同樣給到大家兩個組件，請你去辨別這兩個組件分別是什么？
其實我們很難進行細致的辨認，因為這兩個組件在形式上基本相同。但我們一旦將其動起來，你就會發現不同，左側的是一個按鈕，而右側則為鏈接。
其實我們在辨別交互狀態時，通常會存在兩種辨別維度：常規交互與業務交互。
常規交互是指在網頁端當中的基礎交互，比如 Hover、點擊，這種情況大多數設計師經常接觸，因此我們就不花太多時間放在這上面。
第二種交互類型是業務交互，它主要出現在特定的頁面上。比如在圖表中的下鉆、過濾、聯動、縮放等等；在表格就會有 凍結、拖拽、選中 等交互，這些內容都是我們在涉及特定頁面時需要關注的。
所以我們再去理解一個組件的時候，也需要去考慮這個組件所關聯的交互狀態，這樣才能夠對于這個組件有個更為全面的認識。
作用對比則是去思考這個組件與其他作用類似的組件之間究竟會存在什么差別？
因為每一個組件都會有它存在的意義，我們可以通過橫向單維度的對比，了解到這個組件它所對應的特點。
這個我們來舉一個完整的例子，帶大家感受一下~
舉一個例子
比如最近在行業當中，出現一種新的組件叫做：螞蟻線
剛開始在騰訊云的官網看到了螞蟻線，但其實我對他真的一無所知。于是乎，我開始了組件調研。
從形式開始，你會發現“螞蟻線”是位于文本下方，通過虛線的方式呈現。
通過這種形式，我們能夠拓展一些其他的類似樣式。
比如在飛書當中，當你寫一個錯別字的時候，飛書會提供默認的下劃線提示你修改錯誤。但這個下劃線是一個實線，并且會以黃色作為標注，這就是形式上的差異。
其次，在交互上，在整個頁面中，當你將鼠標懸停在虛線上時，這個提示會告訴你這里有信息可以進行預覽。通過這樣，我們就能大致明白“螞蟻線”的含義：它出現在文本下方，使用虛線的方式提示用戶這里有更多的信息。用戶通過將鼠標懸停在虛線區域的文本上，便可以查看更多內容。
最后，在對組件進行對比時，思考與“螞蟻線”具有相同作用的組件，我想到有兩個：Tooltips和Popover。并簡單整理它們在日常頁面的使用，一共會包含三種相同的情況下的交互形式。同時，明確分析緯度以信息凸顯程度進行對比，進而能夠將這三個組件進行區分。
并且在頁面中，交互的形式也會有所不同。因此我們簡單整理，會有三種相對應的對比方式。并明確它們，以信息干擾程度作為標準，來進行單維度的劃分。進而就能得到“螞蟻線”組件的一個整體的用途。
關于組件，確實由于時間有限，給大家分享到這里。
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
藍藍設計的小編 http://www.payeee.cn
