一、導讀
1. 內容結構
小紅書的產品拆解包含七個部分，分別是導讀、產品畫像、內容服務、社區服務、企業服務和、思考總結和寫在后面的話，內容篇幅13582字，閱讀時間最少30分鐘。
2. 適讀人群
產品拆解是一種專業、深度的創作形式，所以比較適合于以下幾類用戶閱讀學習：
● C端社交平臺產品設計師：通過對小紅書完整的產品拆解，了解小紅書的產品設計體系和細節，有助于更好理解自己所在公司的產品設計，其次可以全方位提升產品分析、競品分析能力。
● 希望提升產品思維的UI/UX設計師：通過從產品層到體驗層的拆解，幫助你跳出設計執行層理解一個功能設計背后的價值和意義，提升產品設計思維。
● 準備跳槽到小紅書的互聯網從業者：如果你有準備去小紅書求職，這份產品拆解報告可以幫助你提前了解小紅書的產品細節和體系。
● 內容社區平臺從業者及創業者：收獲一份專業、完整、有價值的競品分析參考。
3. 分析模型
產品拆解是以反向推導的形式去拆解一個產品的設計策略和思路，所以我們采用了以下分析模型和設計理論做支撐：
● AARRR模型（又稱為海盜模型）：由戴夫·麥克盧爾提出，包含用戶獲取、用戶激活、用戶留存、獲取收入、用戶推薦，分別對應用戶生命周期中的5個重要環節，主要用于拆分和分析產品的功能價值。
● 尼爾森十大可用性原則：尼爾森十大可用性原則是界面設計中最基礎、最重要的設計原則，任何產品的設計，都可以通過這十個原則進行指導設計。
● 設計基礎理論：包括常見的格式塔原理、費茨定律、巴甫洛夫反應、7±2效應、席克定律等常見理論，用于診斷小紅書的交互及界面設計。
4. 閱讀建議
在閱讀本篇拆解的時候，建議一邊體驗小紅書APP，一邊閱讀產品拆解報告，其次可預約我們的產品拆解解讀直播，收獲會更大。
二、產品畫像
在拆解小紅書APP之前，我們需要從以下8個維度去提煉小紅書的產品畫像，這樣才能理解小紅書的產品設計邏輯。
1. 行業發展
小紅書所在的行業屬于互聯網媒體內容社區，是一個生活方式類內容社區，同時小紅書結合了電商和社交媒體打造了新型的商業模式，是社交電商的開拓者和領先者。我們從艾瑞咨詢的《中國互聯網媒體內容社區模式發展研究報告》和《2019中國社交電商行業研究》兩份報告中獲取到以下數據：
● 隨著內容社區的變現模式多元化發展，互聯網媒體的商業變現空間越來越大。艾瑞咨詢預計在2022年，中國網絡廣告市場規模將突破1.2萬億元，網絡購物市場交易規模在2022年將會達到13.9萬億元。
● 傳統電商的紅利已盡，已經進入行業衰退期，用戶增速已持續放緩至20%甚至更低水平。而社交電商正在蓬勃發展，成為移動端最主要的流量入口，使用頻次高、粘性強，流量價值極其豐富，行業交易規模在2021年就達到28646.3億元。
綜上所述，小紅書所在的行業具有廣闊的發展前景和潛力，而小紅書作為國內最大的生活方式平臺和社交電商領先者，還有極大的空間去挖掘。其次隨著AIGC（AI Generated Content，是指利用人工智能技術來生成內容）時代來臨，對過去以UGC為主的小紅書內容創作平臺來說，是新的機遇也是挑戰。
2. 競爭形勢
在《中國互聯網媒體內容社區模式發展研究報告》一文中，艾瑞咨詢梳理了互聯網媒體內容社區生態圖譜。從圖譜看出，小紅書作為生活方式類內容社區，并無直接競爭對手，但存在諸多潛在競爭對手，包括文娛類的微博、豆瓣、抖音、B站，還有消費類「什么值得買」，知識類內容社區知乎，旅行類內容社區馬蜂窩、飛豬等。
從易觀千帆數據觀察，小紅書相比其他間接競爭對手，除了抖音以月活躍用戶人數7.4億超出小紅書3倍以外，小紅書月活人數超2億排名第二，領先排名第三1.7億的嗶哩嗶哩，其他社區月活人數距離小紅書有一定差距。
不過就在年初，社交巨無霸微信的微信公眾號已經推出小紅書式的筆記傳播形式，降低創作門檻，吸引大眾用戶UGC，這對于小紅書來說，將會是一個潛在的挑戰。
3. 產品介紹
小紅書是一款集購物、分享、社交于一體的手機APP。它的主要功能是幫助用戶分享生活中的美好瞬間和購物心得，同時也為用戶提供了一種社交平臺。作為一個年輕人的生活方式平臺，小紅書以“Inspire Lives 分享和發現世界的精彩”為使命，用戶可以通過短視頻、圖文等形式記錄生活點滴，分享生活方式，并基于興趣形成互動。
4. 商業模式
基于對小紅書的深入調研，再結合艾瑞咨詢《中國互聯網媒體內容社區模式發展研究報告》，我們對小紅書的商業模式進行了推導。
4.1 客戶細分
● C端：年輕用戶群體，以女性居多，生活在一二線城市，希望發現和購買優質商品，喜歡分享自己的購物心得和生活經驗，有較高的月支配消費能力。
● B端：中高端品牌，品質高、信譽好，期望通過小紅書獲取種子用戶、快速打造爆款以及和年輕用戶建立溝通的企業。
拓展閱讀
根據艾瑞咨詢的《中國互聯網媒體內容社區模式發展研究報告》，挖掘到內容社區已經步入成熟階段，由B、C兩端朝著營銷線、商品線、平臺線和內容線衍生出多元商業模式。這個信息有助于接下來理解小紅書的產品體系。
4.2 價值主張
標記我的生活
4.3 渠道通路
作為中國最大的生活方式分享社區，小紅書用戶基數大，用戶忠誠度高，主要依靠用戶口碑分享，以及常規的廣告、搜索引擎等渠道進行推廣和維護品牌形象。
4.4 客戶關系
面對社區博主和行業KOL，通過創作中心、蒲公英等平臺為博主鏈接優質廣告資源；面對企業客戶，通過商家課堂等方式指導開店培育。
4.5 收入來源
根據《2021年小紅書內容營銷數據洞察白皮書》報告顯示，2021年小紅書的收入主要由廣告和電商兩部分組成，二者的份額占比分別為80%和20%。
4.6 核心資源
小紅書是中國最大的生活方式分享社區，用戶基數大，忠誠度高，2021年已經成功登陸港股市場，有充足的資金優勢。
4.7 關鍵業務
面向C端，小紅書主要提供筆記發布、購物、直播等核心功能；面向B端，提供蒲公英、薯條、聚光平臺等業務。
4.8 重要合作伙伴
● 各行業頭部KOL及MCN機構，為平臺提供高質內容，官方同時提供流量傾斜和扶持；
● 企業客戶，負責小紅書電商自營平臺的生產鏈供給以及其他內容合作。
4.9 成本結構
作為一個互聯網科技公司，小紅書的成本結構主要來自產品的研發投入和人力成本。
5. 用戶畫像
結合易觀千帆小紅書APP數據，我們對小紅書終端使用用戶人群提煉了以下用戶特征：
● 從用戶性別看，以女性居多，占比72.25%，男性占比27.75%；
● 從年齡分布看，24歲以下用戶人群最多，占比42.48%，其次為31-35歲，占比29.53%，24-30歲用戶人群占比15.83%；
● 從用戶消費能力看，中等消費者占比36.75%，中高消費者占比36.21%，合計超過70%，購買能力很強（官方數據為月支配可消費費用超過4000元）；
● 從地域分布看，新一線城市用戶最多，占比22.17%，其次為三線城市，占比20.93%，二線城市占比19.28%，其中廣州市最多，其次為北京和上海。
6. 信息結構
通過對小紅書APP的信息結構梳理，可以看出小紅書的功能結構比較簡單，菜單欄包含了首頁、視頻、發布、消息和用戶中心五個欄目。
● 首頁：以千人千面的信息流推薦為主，其中推薦、購物和直播權重最高，也是小紅書的核心功能。
● 視頻：提供沉浸式的短視頻筆記體驗，用戶可以不斷上拉下滑觀看視頻筆記；
● 發布：提供拍照、相冊、模版和直播發布功能，是用戶發布筆記的入口；
● 消息：提供系統公告以及消息通知，用戶聊天的窗口；
● 用戶中心：用戶的個人主頁，包含筆記、收藏和個人資料等功能。
7. 產品迭代記錄
根據七麥數據資料，小紅書的APP首個版本發布于2013年12月05日，截止到2023年4月3日，APP版本已經更新至V7.82版本，近一年版本更新次數為98次，迭代頻率非常高。從十年前的「全世界的好東西」到今天的「標記我的生活」，小紅書迎來自己的十周歲生日。
以下為小紅書版本重要迭代記錄：
● 2014年8月，發布V2.0版本，上線「商城」功能，支持用戶在小紅書下單購買；
● 2015年11月，發布V4.0版本，產品全新升級，首頁根據用戶興趣智能化推薦；
● 2017年9月，發布V5.1版本，產品全新升級，加入閃拍、小視頻等功能；
● 2018年5月，發布V5.16.1版本，加入「附近」功能，可發現身邊有意思的筆記和用戶；
● 2019年5月，發布V6.0版本，產品全新升級；
● 2021年7月，發布V7.0版本，產品全新升級。
8. 產品生命周期
根據易觀千帆數據顯示，截止到2023年1月，小紅書APP月活躍用戶人數超過2.1億，注冊用戶在2019年就超過3億（來自官網），公司在2021年成功登陸港股市場。從以上資料數據看出，我們可以推導出小紅書APP已經進入產品生命周期的成熟期，當下以及未來將會聚焦于商業變現和用戶留存。
9. 小結
通過以上數據信息，我們可以看出，作為一個誕生于2013年的移動互聯網元老，小紅書從最初旨在打造一個海外購物社交平臺到如今成為億萬年輕人的生活方式社交平臺，他們的用戶非常年輕，以90后居多，月活躍用戶超過2億，它已經成為國內最大的生活方式分享平臺和社交電商平臺。
三、內容服務
「內容服務」是根據AARRR模型拆分，這個版塊的功能主要是實現用戶留存，包含首頁、視頻、筆記發布、消息、創作中心和專業號等功能。
1. 首頁
作為中國最大的生活方式分享社區，小紅書以UGC用戶生產內容模式為主，內容包含圖文、短視頻、語音等多種傳播形式，覆蓋了美妝、潮流、美食、科技、旅行、汽車、職場等眾多行業。
1.1 發現
「發現」作為小紅書的默認首頁，平臺根據用戶的興趣、標簽、瀏覽偏好內容進行個性化推薦（從產品迭代記錄查詢到小紅書早在2015年就開啟了千人千面的個性化推薦）。從TAB欄可以看出小紅書的內容覆蓋了美食、科技、旅行、汽車、職場等眾多行業，同時支持用戶根據自己興趣偏好自定義編輯。
1.1.1 內容推薦邏輯
在研究小紅書「發現-推薦」推薦邏輯時候，筆者有點捉摸不透。因為每一次刷新推薦的內容排序其實并不是單純的以點贊、發布時間、收藏數為準，更像是隨機展示，所以特意查詢了關于小紅書內容推薦邏輯的文章。
筆者找到了人人都是產品經理專欄作家江流的《小紅書的內容營銷邏輯》這篇文章，作者經過大量的測試，推導了小紅書的內容推薦營銷邏輯：
● 「發現-推薦」頁占據了小紅書80%的流量；
● 小紅書內容推薦的邏輯主要是三個：高打開率，高互動率，高搜索打開率。
體驗陷阱
當我發現平臺給我推薦我討厭的內容時候，我沒找到屏蔽按鈕，最后嘗試長按圖片才彈出屏蔽彈窗。這個設計對新手不友好，違反尼爾森十大原則的人性化幫助原則，沒有提供清晰的提示，增加了學習成本。
1.2 關注
「關注」是為用戶提供自己關注好友的動態展示，內容設計比較簡單。不過我對這個欄目的推薦機制感到不解，當我刷新頁面的時候，內容并不是根據時間先后順序展示，而是沒有規律的隨機展示。
1.3 本地
「本地」是根據用戶所在位置讀取附近用戶的筆記，這個功能上線于2018年V5.16.1版本，它的價值是幫助用戶發現身邊有意思的筆記和用戶，從而建立關系鏈接，提升用戶留存率。
設計思考
作為一個生活方式平臺，「本地」的內容太單薄，如果能把內容分類，比如按景區、美食、出行等來設計，可以極大提升小紅書在本地生活場景中的打開頻次。來小紅書，不僅可以標記你的生活方式，還可以發現身邊更多有趣的生活方式。
1.4 搜索
「搜索」是小紅書流量分發的重要入口（占20%），不僅為用戶提供實時的社區熱門話題，更是小紅書的商業服務中的重要場景（提供搜索信息流、專區、火焰話題和搜索菜單等推廣方式）。
1.4.1 引導頁
「引導頁」由歷史記錄、猜你想搜和搜索發現組成，這個頁面主要承擔流量分發以及展示社區熱門話題，設計得比較簡單。
迭代建議
可參考QQ音樂的搜索引導頁，根據話題內容設計排行榜，把引導頁做得更豐富，提升用戶使用時長。
1.4.2 結果頁
「結果頁」提供四個維度的內容展示，分別是全部（包含最新、最熱）、用戶、商品和篩選（筆記類型，視頻和圖文）。其次根據搜索關鍵詞加入二級分類，比如搜索UI設計，二級分類有APP界面、高級感、作品集和素材相關聯標簽。
設計思考
在深入體驗搜索功能以后，我對平臺對搜索關鍵詞的算法機制不太理解。比如排名第一的并不是點贊最高的，也不是發布時間最早的，甚至會出現低點贊、發布時間很早的筆記。對此，深表疑惑。
2. 視頻
「視頻」是一級欄目，位于菜單欄第二個位置，進入后向用戶提供沉浸式的閱讀體驗，可以不斷上滑刷新視頻。短視頻是當下最流行的傳播方式，對提升用戶使用產品時長有非常大的幫助。
2.1 詳情頁
底部展示作者信息，可一鍵關注，提供喜歡、收藏、分享和評論功能。其次當博主關聯粉絲群，還支持用戶快速入群，幫助博主引流。
3. 筆記發布
「筆記發布」作為小紅書社區最重要、最高頻的功能，向用戶提供了圖文和視頻兩種發布類型。為了降低用戶學習成本，提升產品的核心增長指標，小紅書提供了非常豐富、精美的設計模版，用戶一鍵使用，更換素材即可發布漂亮、精致、酷炫的筆記。
3.1 拍照
「拍照」是小紅書最基礎的筆記形式，主要通過拍照搭配音樂、文字的形式傳播，門檻低、操作簡單，是社區的主要內容。
3.1.1 發布流程
3.1.1.1 拍照
● 需要用戶拍照，不支持讀取手機相片（如果想要加入本地圖片，需切換到「相冊」）。
● 頭部提供比例切換（3:4和1:1）、閃光燈、翻轉、濾鏡（提供日常、春夏、秋日等類型）、美顏（支持磨皮、臉型、眼睛、鼻子等）。
● 底部提供默認、黑白相機、摩登、小宇宙和灰色拍立得五種模式，滿足各種特效拍照需求。
3.1.1.2 裝飾
● 頭部提供加入音樂功能，音樂庫包含歐美、運動、日韓等各種主流音樂類型。
● 底部提供圖文模版、視頻模版、商品（加入種草場景）、文字、帖子、濾鏡和調節功能，用戶可根據自己偏好加入裝飾元素。
3.1.1.3 發布
● 圖片加工裝飾好以后，用戶需要輸入筆記的標題、介紹。
● 用戶可以加入標簽（這是小紅書平臺內容檢索的重要元素，一般用戶會加入多個標簽）、商品和互動組件（包含PK組件和投票組件兩種類型，主要用于提升用戶活躍度）。
● 用戶可加入發布地點，在高級選項可選擇關聯直播預告和群聊。
● 一切準備就緒后，用戶可選擇保存草稿和立即發布。
3.1.2 筆記詳情頁
● 筆記詳情頁的權重非常高，不過頁面內容也比較簡單。頭部展示用戶信息，可一鍵關注，右上角可點擊分享筆記。
● 筆記內容由圖片（視頻）+標題+文字內容+標簽構成，其他用戶可對筆記進行評論、點贊和收藏。
迭代建議
小紅書的筆記分享形式太過簡單，可參考QQ音樂的分享功能，設計豐富、精致的個性化模版，比如音樂卡片、視頻卡片等，刺激用戶進行分享，幫助平臺拉新引流。
3.2 拍視頻
「視頻」的發布流程和「拍照」相似，其次小紅書也提供了基礎的視頻剪輯功能，幫助用戶制作更優質的視頻，以及避免用戶流失到其他視頻剪輯軟件（微信視頻號就不支持視頻剪輯，這導致用戶會使用剪映這些第三方軟件）。
3.3 相冊
「相冊」和「拍照」的區別就是為用戶提供從本地上傳圖片，兩者的功能和流程一樣。
迭代建議
建議把「相冊」和「拍照」兩個功能合并，減少操作路勁，降低用戶操作成本。
3.4 模版
「模版」分為視頻和圖文，用戶可選擇好自己喜歡的模版進行直接編輯發布。
4. 記錄日常
「記錄日常」的入口在首頁左上角，主要為用戶提供語音、打卡、日簽等形式的動態發布。這個版塊的功能價值在拆解完以后，筆者認為更多是滿足Z時代年輕用戶群體的興趣偏好，比如為情侶量身定制的咻咻，還有語音筆記等。其次這個版塊的筆記發布形式行動成本比較低，更能吸引用戶參與發帖，是激活新用戶以及長尾用戶的絕佳方式。
4.1 咻咻
「咻咻」是一個專門為年輕情侶用戶量身定制的功能，通過綁定TA的小紅書號，情侶之間就能及時分享有趣的筆記霸屏對方的屏幕。這個功能看上去設計得很有趣，和QQ音樂類產品的「一起聽」相似，增強了即時的社交聊天元素，增加用戶時間和頻次。
體驗陷阱
這個功能看上去很時髦，但是在體驗下來以后發現很雞肋。當我給另一個小紅書賬號發送咻咻的時候，系統沒有任何提示，消息中心也沒有。最后只能前往「咻咻」找到右上角的那個TA，我才發現原來消息推送到這里了。這樣的提醒設計，太失敗了。
4.2 語音
「語音」是向用戶提供語音筆記的功能，用戶可以錄制一段自己的想說的話，選擇封面以后，輸入心情記錄，就可以發布。這個功能對于Z時代的用戶群體來說非常受歡迎，極大提升用戶使用時間，筆者體驗了上百條語音筆記，發現用戶主要通過語音筆記哼唱歌曲，是一種全新的聽覺體驗。
迭代建議
在「語音」詳情頁，我嘗試上滑瀏覽下一條，但最后發現需要左右滑動才能切換，這個設計和用戶習慣不一致，建議改進。其次在查看用戶「表態」內容時，語音就暫停了，影響聽覺體驗。
4.3 日簽
「日簽」就是以發布筆記的形式進行簽到，用戶可以選擇心情，上傳背景圖片（系統會自動生成精美的圖片），然后輸入心情就可以發布。小紅書還為用戶提供「漂流瓶」功能，用戶可以選擇筆記塞入漂流瓶后，接收到漂流瓶的用戶可以給與回應。
4.4 打卡
「打卡」和「日簽」相似，主要提升用戶使用產品的頻次和時間，小紅書為用戶提供各種主題的打卡，比如護膚打卡、練字打卡、考研打卡等，用戶選擇對應的主題，上傳圖片以后，就可以發布。
4.5 文字
「文字」的功能非常簡單，用戶只需輸入文字，然后選擇背景風格，就可以生成文字筆記。
4.6 拍攝
「拍攝」的功能也非常簡單，用戶拍攝一段視頻，就可以生成筆記，和一級菜單的「視頻筆記」不同，在這個欄目支持上傳本地圖片，體驗更佳。
5. 消息
「消息」主要向用戶提供私信、群聊功能，其次可實時查詢筆記的點贊、收藏、關注動態以及官方通知公告。
5.1 群聊
小紅書支持博主建立自己的粉絲群，功能比較基礎，主要幫助用戶沉淀自己的粉絲，提升用戶留存率。
6. 創作中心
作為一個以UGC用戶生產內容的平臺，創作中心主要為創作者提供創作指導，這個版塊包含數據中心、創作服務、創作學院和筆記靈感四個部分。
6.1 數據中心
「數據中心」為創作者提供賬號概覽、筆記分析和粉絲數據三個維度的數據統計分析。創作者可以查看近30日的詳細數據分析，比如觀看人數、觀看總時長、觀眾來源、單篇筆記詳細數據以及粉絲畫像等內容。這些數據可以幫助創作者及時調整運營策略，創作更受用戶喜歡和關注的內容。
6.2 創作服務
「創作服務」是為創作者提供更豐富的平臺服務和推廣，包含創作權益、作者能力和內容變現三塊內容。平臺提供筆記周報、筆記置頂、創建合輯、薯條推廣、內容合作等功能，為創作者提供創作工具以及內容變現等服務。
6.3 創作學院
「創作學院」為創作者提供了小紅書內容創作和內容運營的各種主題課程，比如選題取材、粉絲運營等內容，這些課程都是免費的，創作者只要投入時間精力，都能有所回報。
6.4 筆記靈感
「筆記靈感」為創作者提供了小紅書熱門筆記的選題參考，比如時尚、戶外、春日等主題，通過這些爆款筆記，能給創作者提供更清晰、精準的創作靈感，從而為社區輸出高質量內容筆記。
7. 專業號
小紅書的專業號是面向更專業的知識創作者，為他們提供更專業的內容、服務和功能，幫助他們獲得更多的曝光度、關注度，以及通過豐富的數據分析提供運營支持。
7.1 數據中心
相比「創作中心」，專業號的「數據中心」提供了更專業完善的數據分析，比如數據維度，可按根據交易、引導和互動去查看，還有筆記觀眾分析，提供了更詳細的用戶特征，包含年齡分布、城市、用戶興趣等，以及個人主頁和店鋪的數據統計分析。
7.2 互動工具
「互動工具」包含店鋪管理（小紅書支持用戶開通店鋪銷售商品，可以理解為淘寶用戶的淘寶店）、直播互動、抽獎工具和主頁裝修等功能，主要為創作者提供個人店鋪裝修和直播兩個場景的互動營銷。從功能體驗看，這些工具設計得還比較單薄，還有很大優化空間。
7.3 筆記工具
「筆記工具」包含發布商品筆記、商品筆記創作、商品筆記靈感和商品筆記熱榜四個功能。所謂商品筆記就是已經開通店鋪的用戶可以直接在筆記加入自己的商品，從而實現引流轉化。這個版塊主要為用戶提供商品筆記的創作數據分析和社區熱門話題參考，幫助用戶創作出優秀的種草筆記。
7.4 推廣工具
「推廣工具」包含薯條推廣、內容合作和直播選品。
● 薯條廣告主要為用戶提供商品筆記的付費推廣（花錢購買筆記流量券，讓更多用戶閱讀）；
● 內容合作是小紅書面向專業用戶打造的蒲公英平臺，通過招募優質博主，給與內容變現指導和助推，幫助用戶在小紅書實現可觀的收益；
● 直播選品是為用戶提供直播帶貨功能，用戶可以加入適合的商品在直播間進行銷售，最后獲取返傭。
7.5 熱門課程
「熱門課程」提供了小紅書賬號定位、筆記創作、商鋪運營等內容的教程，幫助用戶快速熟悉小紅書的平臺內容推薦極致以及用戶習慣偏好等。
8. 小結
從內容服務版塊的設計拆解，我們可以看出：
● 小紅書作為一個生活方式分享社區平臺，所覆蓋的內容已經包含了汽車、職場、影視、文化、科技、體育、母嬰等行業。這說明小紅書的用戶群體逐漸多元化發展，這點從用戶畫像的數據也可以看出，小紅書的男性用戶已經快逼近30%，未來小紅書的用戶規模還有很大空間。
● 小紅書的筆記形式已經越來越豐富，除了最傳統的圖文，未來短視頻或許是社區更流行的內容形式（目前「視頻」欄目已經調整為菜單欄第二位，權重非常高）。其次也為年輕用戶提供了時髦、流行、制作成本更低的咻咻、語音筆記發布功能，極大提升了用戶參與度。
● 在產品設計方面，個人認為小紅書還有很多優化的空間，目前整個APP的產品內容不夠豐富，幾乎沒有創新點。
四、社區服務
「社區服務」是根據AARRR模型拆分，這個版塊的功能主要是實現商業變現，包含首購物、直播和小紅卡會員。
1. 購物
作為社交電商的先驅和領軍者之一，「購物」是小紅書在C端變現的最重要方式。雖然被「視頻」頂替了菜單欄的位置，但在「購物」頻道，可以看到小紅書的電商玩法，真是獨特又有趣。
1.1 潮流買手店
「潮流買手店」是為用戶提供當下最流行的潮流服飾銷售，在這個頻道可以看到眾多的國內外知名潮牌最新的產品。頁面內容設計得比較簡單，為用戶提供了潮流趨勢、新品發售和品牌專區的內容，用戶可直接下單。
1.2 新趨勢
「新趨勢」是向用戶種草「正在流行的東西」，它的內容結構是平臺根據不同的主題結合社區筆記和商品來生成，比如海邊度假穿搭，平臺會把社區優質的筆記收錄，然后再關聯相關的商品，通過特定的場景和主題向用戶種草。相比傳統電商，這正是社交電商的魅力。
1.3 福利社
「福利社」小紅書官方直營的高端電商品牌，上線于2014年12月，旨在為用戶提供全世界的好東西，目前已經有超過20000+美妝商品。這個頻道主要包含新品日歷、先鋒品牌、熱門品牌和熱門分類四塊內容，其次它的視覺風格設計得非常精致，讓人有強烈的購買欲望。
1.4 小綠洲
「小綠洲」的定位是一站式購買戶外好物，旨在打造一個匯聚泛戶外生活方式穿搭、裝備用品的買手平臺。從頻道內容看，包含露營、都市運動、滑板和滑雪四個大類，在每個類目可查看相應類目的商品分類、促銷商品、品牌精選等內容。
1.5 寶藏好店
「寶藏好店」是向用戶推薦小紅書平臺的寶藏店鋪，內容包含每日精選、生活玩家、美護大賞等欄目。
1.6 獨特設計
「獨特設計」這個頻道，是由小紅書官方以及業內優秀設計師、社區優質作者和時尚行業專家共同評審出來的獨特設計商品。用戶人群定位高端，滿足那些想要高品質、高審美的用戶群體的需求——在小紅書，找到全世界的好東西。
2. 直播
直播是當下最流行、最重要的運營手段。小紅書的直播版塊，設計了眾多豐富的互動、營銷工具，極大提升播主的運營效率。
2.1 發布直播
播主在點擊「發布」后，在底部切換到「直播」即可開啟。
● 在頭部，用戶需要選擇直播方式，目前小紅書提供視頻、語音、手游和電腦（通過電腦直播）四種直播方式，然后填入基礎的直播信息比如直播主題、介紹，和上傳封面等。
● 在底部，用戶可以選擇美化、翻轉等效果，還可以添加帶貨商品、設置禮物打賞等功能。
2.2 直播間
2.2.1 互動支持
小紅書為播主提供了PK、投票、直播預告、連麥、小紙條等多種互動工具：
● PK：支持禮物PK和人氣PK兩種模式，播主可選擇隨機匹配和邀請指定主播，這個功能有助于提升直播的趣味性，播主連麥PK可相互提升用戶的活躍度。
● 投票：播主可實時發起投票，增強和粉絲之間的互動，提升用戶活躍度。
● 群推送：當播主發起直播后，可以一鍵把直播推送到小紅書的粉絲群，直接觸達用戶。
● 發紅包：播主購買紅包后，可設置關注播主才能領取來快速漲粉。
● 抽獎：播主可設置比如關注主播、分享直播、加入粉絲團等參與條件，通過抽獎的形式提升直播間的用戶活躍度。
2.2.2 直播工具
直播工具包含了數據看板、直播送禮、抽獎等重要功能：
● 信息卡：播主可創建直播公告、推薦商品和模特信息三個卡片，幫助進入直播間的用戶快速了解播主，提升用戶觀看時長。
● 數據看板：通過這個頻道，可以查看當前直播間的詳細數據，包括觀看人數、新增粉絲數、流量來源、送禮排行等，有效幫助播主提升運營效率。
2.2.3 商品管理
商品管理包含了直播閃拍，限時秒殺，直播優惠券等功能，賦能播主直播帶貨。
● 直播閃拍：這個功能非常方便，播主可以拍照就能上傳商品，操作簡單，行動成本低可以快速幫助播主提升銷售轉化率。
● 限時秒殺：用戶可創建限時秒殺商品，通過直播講解吸引用戶購買。
● 直播優惠券：播主可在直播期間快速創建優惠券，提升銷售轉化率。
● 預告推送：播主可插入下一場直播預告，讓用戶提前預約。
細節偵查：
直播閃拍這個功能很亮眼，只需隨便拍照一張，就能快速上架商品，這對直播間的銷售轉化有非常大的幫助。正如福格模型的行動公式，主要行動成本足夠低，行動頻次就能增加。
2.3 直播中心
「直播中心」類似于創作中心，包含數據分析、開播獎勵和主播課程等內容，主要幫助播主提升直播頻次和運營效率。其次對于粉絲基礎比較少的博主，還可以完成每日開播任務領取平臺獎勵，提升直播曝光。
3. 小紅卡會員
「小紅卡會員」是小紅書為用戶設計的會員專屬權益服務，定價199元每年，主要享受會員專享價、無門檻包郵、限時購提前搶、專屬客服等權益。從這個版塊的內容看，小紅卡會員設計得比較簡單，權益不夠豐富，吸引力較低。
4. 小結
從社區服務版塊的設計拆解，我們可以看出：
● 小紅書在C端的變現方式比較單一。我覺得可以再豐富一點，除了傳統的社交電商，是否可以再可以參考騰訊系的產品設計一些個性化功能，增強產品的變現方式。
● 直播功能設計得非常用心。筆者過去主要通過微信的視頻號直播，在拆解完小紅書以后，我只能感慨小紅書直播的功能非常完善和人性化，特別在提升直播博主銷售轉化率的功能設計上，體驗非常友好。
● 小紅卡會員可以重新設計。從目前的會員權益來看，這個功能設計得毫無亮點，不過由于沒有真實數據參考，僅代表我的一家之言。
五、企業服務
「企業服務」是根據格式塔原則拆分，這個版塊的功能主要是小紅書面向企業B端的商業服務，包含商家店鋪和品牌營銷兩塊內容。作為國內最大的生活方式平臺，根據《小紅書商業化營銷通案》報告，小紅書不僅月活超2億，而且用戶群體月均可支配消費支出4.1K，超過81%的用戶在小紅書瀏覽完內容以后產生了購買欲望。所以小紅書是好產品長出來的絕佳土壤，也成了商家品牌營銷的必爭之地。
1. 商家店鋪
小紅書的店鋪面向個人和企業招募，用戶只需要按照條件申請都能通過。這就像十年前人人都可以擁有一個淘寶店一樣，通過輸出有趣的筆記就可以進行種草轉化。
1.1 店鋪管理
1.1.1 PC管理后臺
小紅書的商鋪管理平臺主要幫助商家實現對店鋪的管理和通過數據分析提供運營支撐，主要包含以下重要功能：
● 商品：主要為商家提供商品的上下架功能，其次還提供商品一鍵搬家、組合商品銷售等功能。
● 數據：這個頻道內容設計得很豐富，提供店鋪流量、商品、筆記、直播和店鋪等內容的數據分析，通過多維度的數據，幫助商家提升店鋪運營效率。
● 筆記：提供商業筆記的管理、創作和創作靈感，幫助商家創作更好的種草筆記。
● 營銷：提供小紅書官方運營活動的報名以及多種店鋪營銷工具；
● 用戶：這個頻道為商家提供更精準的用戶運營計劃，通過專業完善的數據洞察店鋪的用戶行為，提升銷售轉化率。
1.1.2 APP客戶端
為了給商家提供更友好運營管理體驗，小紅書也為商家單獨開發了小紅書商家版。通過APP就可以實現對店鋪的數據化管理，非常友好。
1.2 商家課堂
「商家課堂」是為小紅書商家提供的一站式學習平臺，目的是幫助商家快速、系統學習小紅書店鋪運營，提升店鋪運營效率。
1.2.1 成長地圖
小紅書商家成長地圖提供了一站式課程體系，包括新手必學、成長進階和瓶頸突破三塊內容。其次這個欄目有一個非常亮眼的功能，那就是支持商家設計系統學習計劃，可設置系統提醒時間和學習頻次，非常友好。
1.2.2 課程中心
「課程中心」相比成長地圖，提供了更詳細、完整的直播以及錄播課程內容學習，比如開店入駐、店鋪基礎、財務結算這些偏店鋪管理操作的技能學習。從這個頻道可以看出，小紅書商家店鋪運營方面，投入了很大的精力，打造了非常專業、完善的學習系統。
迭代建議
小紅書在商家運營指導投入的精力超出我的想象，個人覺得小紅書可以參考像知識付費SaaS服務商小鵝通的訓練營模式，把店鋪運營學習打造成一個動態的學習課程，這樣不僅可以加深和用戶的鏈接，為商家提供專業、有價值的課程，還能拓展商業變現的方式。
1.2.3 服務市場
「服務市場」是小紅書為商家遴選的第三方優秀合作伙伴，包含商品管理、訂單管理、企業管理、直播管理和內容管理五大類，幫助商家更智能化運營店鋪，提升效率，比如有提供商品批量搬家上架的服務智淘分銷應用，可以一鍵將1688商品上貨到小紅書店鋪等。
2. 品牌營銷
小紅書商業產品體系非常豐富，有負責內容生產的蒲公英平臺，有負責流量+轉化的聚光平臺、薯條和品牌廣告。本文不過多分析，如有興趣可閱讀《小紅書商業化營銷通案》報告。
2.1 蒲公英
「蒲公英」是小紅書官方優質創作者商業服務平臺，它覆蓋海量博主和多種匹配能力，提供定制、招募、共創多種內容合作模式，全方位滿足品牌的內容營銷訴求。根據官網最新數據，目前已有累計10w+創作者、65000+海外企業商戶入駐。我們可以簡單理解為蒲公英是小紅書初級的品牌營銷平臺，只要你的的粉絲好過1000，你都能申請入駐，通過發布優秀筆記種草賺錢。
2.2 薯條推廣
「薯條」是小紅書為內容創作者和企業商家打造的自助式投放產品，可以有效地幫助內容創作者擴大內容影響力，也能幫助企業商家通過更靈活高效的推廣方式提升營銷效率。也就是當博主或商家發布筆記以后，可以選擇薯條推廣進行筆記推廣，它主要包含內容加熱和營銷推廣兩種形式。
2.3 聚光平臺
「聚光平臺」是小紅書營銷全新上線的一站式廣告投放平臺，能夠滿足廣告主以“產品種草、商品銷量、客資收集、直播推廣、搶占賽道”為目標的多樣化營銷訴求。聚光平臺主要為企業客戶使用，通過小紅書全站營銷的多種組合場景，幫助企業提升廣告投放回報率，高效觸達用戶。從官方文檔介紹，聚光平臺支持信息流、CPC點擊等多種形式，靈活高效。
3. 小結
從企業服務版塊的設計拆解，我們可以看出：
● 小紅書未來在B端的業務線會越來越深，也許很快人人都會擁有一個小紅書店鋪，一邊標記生活方式，一邊向客戶種草。
● 小紅書為企業客戶提供的品牌營銷體系非常完善，不僅有蒲公英、薯條、聚光等平臺，還獨創IDEA方法論，從洞察機會、定義策略、擊穿品類賽道再到沉淀品牌資產，都利用平臺自身強大的用戶資源滿足客戶的需求。
● 如果只是體驗APP，我們無法獲知小紅書真正核心的產品體系，所以當我們升維去拆解一個產品的時候，我們的收獲就會更大。
六、思考總結
通過以上部分對小紅書的全面體驗和拆解，我們可以看出，小紅書作為國內最大的生活方式平臺和社交電商開拓者，產品設計其實也有諸多問題，以下為我梳理的產品設計總結和建議：
1. 商業層
小紅書在C端的變現業務太單薄，僅有購物、直播打賞和小紅卡會員，可以嘗試增加合理的變現手段，不僅能為平臺增加收入，也能為用戶提供個性化的服務。當然從企業服務的拆解看，他們為企業客戶提供覆蓋內容生產、流量+轉化的商業產品體系已經足夠豐富，他們不缺盈利手段。其次我更喜歡小紅書過去的產品Slogan——發現全世界的好東西，這個口號簡單、直接、朗朗上口，聽一次就記得住。
2. 產品層
雖然已經發展十年，近一年產品迭代版本次數高達98次（在我拆解過的產品中最高，12306平均年迭代次數為3次），但我認為小紅書APP的內容設計不夠創新，也不夠豐富。我在「內容服務」版塊提了很多迭代建議，比如首頁的「本地」頻道可以把內容再拆分得細致一些，讓用戶能找到更精準的內容。還有筆記的分享功能，只提供一張朋友圈長圖海報生成方式，太淺陋了，不夠細致。
3. 體驗層
如果從一個普通用戶去體驗，小紅書APP產品體驗非常流暢，操作簡單、學習成本低，這和社區內產品交互流程本身比較簡單有關，幾乎沒有涉及復雜的業務流程。但從一個小紅書博主的角度去體驗，我發現小紅書的創作平臺規劃非常亂。比如創作者中心、專業號中心、商家入駐中心、商家店鋪管理以及直播中心這些產品，邊界不清晰，入口也不明顯，需要反復來回查找才能找到入口（我甚至每個平臺的網址都單獨收藏，才能快速訪問，否則我會在官網迷失很久）。
作者：設計大偵探 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
作者：SFUP_DESIGN 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
為回饋新老用戶、持續提升業務增長、打造品牌影響力，開展年終回饋活動；本次活動通過拉新、促活、轉化等方式實現用戶和業務的增長。
基于兔年和送福的節日習俗，采用了“福兔迎新”主題，并結合業務目標，構建活動玩法。
在頁面交互上，需建立統一框架承載豐富的玩法，也要保證易用性和擴展性。
為保證主頁進出游戲的體驗流暢，采用了統一的結構框架。頂部標題固定，中間模塊下移，露出游戲區域，再利用過渡動效，保證無縫轉場的自然流暢。
3.1 標題 &圖形設計
在標題設計中，將“兔”耳造型融入字體設計中，與主視覺相呼應，營造濃郁的兔年氛圍。傾斜8度的字體，展現出我們對新年蓬勃向上的精神追求和快速高效的業務增長速度。統一圓角處理和圓點元素延續了順豐logo的設計，更好地提升了親和力。
簡潔的符號往往可以傳達強有力的情感，所以選取了兔年元素和中國傳統紋飾融入到此次活動的代幣設計中。這些符號也延續使用在活動頁的其他設計和頁面裝飾上。
3.2 IP形象設計
“福兔”作為本次活動的IP卡通形象，將貫穿于活動各場景。小游戲中福兔作為重要角色，親切可愛的造型配上鮮活豐富的表情不僅能引起用戶共鳴，流暢輕松的動作還能極大提升用戶的操作體驗，增強活動趣味性和互動性。
福兔的造型設計從以下幾方面去結合順豐品牌元素：
· 強調品牌標志：帶有順豐logo的杜邦紙袋延展設計為福兔的斜挎包
· 從細節入手：福兔的圓形腮紅與順豐快遞員IP形象的腮紅設計呼應，同時也與順豐logo紅色圓點一脈相承。
我們為福兔設計了小游戲中的多種狀態動畫，用豐富多變的表情，可愛的肢體語言，融入到小游戲中，增強游戲過程趣味性和可玩性，提升沉浸感。
與開發協作在動效上使用了spine骨骼動畫，通過控制骨骼，可以快速輸出各種動作，減少了動畫體積，提升頁面加載速度。
“福兔跳跳”小游戲，通過躲避“鞭炮”障礙物，跳躍收集“福氣值”、“獎勵金”。同時設置難度不同的關卡，以提高游戲的挑戰性和可玩性。
3.3 場景設計
主頁場景跟隨節日以提升感知，通過換膚減少視覺疲勞。隨著節日變化，色彩和營銷氛圍感也隨之增強。
為了增強游戲氛圍、新鮮感，提高游戲體驗。小游戲與主頁同步進行換膚，前進時街景也會呈現節日特色建筑、裝飾。
為了突出用戶的品牌感知，在背景街道設計中，盡可能融入了較多順豐元素，快遞箱、貨車、LOGO等等。
3.4 其他
多玩法設計
小游戲玩法，符合大眾群體的偏好；獎勵金、配對搶免單有效提升用戶留存，激勵用戶持續參與活動；兌獎、沖榜玩法回饋高價值用戶，豐厚獎品打造活動口碑。
引導設計
在活動的不同觸點對用戶進行引導與轉化。
年終活動是一年中業務搶收的重要節點?；顒由暇€后，整體上活動的訪問量、參與率及留存率，均表現不俗，達到預期目標。未來我們會繼續在運營活動的創新上探索更多有趣好玩的方向，豐富用戶體驗，挖掘創新玩法。
我們下個活動再見～
作者：SFUP_DESIGN 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
前言
作為設計師的你，是否也遇到過這樣的問題：
1.負責的業務線產品邏輯復雜難懂，產品自己想不清楚需求，導致項目難以有效推進；
2.設計方案拍板的人太多，一人一個想法，溝通成本高，還總是返工；
3.設計優化找不到頭緒，不知道是否匹配產品目標等等…
本文將從what、why、how三方面帶你一起解讀設計共創的方法論模型，并以實際案例為指導，分享設計共創五步法；感受在設計過程中，通過與其他核心角色一起共創，從明確共同目標、共同決策、共創設計、共同評價，到最終共享設計成果過程。
一起來赴一場創新共贏的設計盛宴吧！
What-什么是設計共創
共創行為由來已久
共創模式并非現代社會的新生事物，其萌芽可追溯至人類文明早期，比如中國最早的詩歌總集《詩經》、古希臘的《荷馬史詩·伊利亞特》等耳熟能詳的文學作品，都是在民間大眾共創基礎上再由作者整理完成的；還有《永樂大典》、《四庫全書》等大型文化工程著作，都是集體協作的結晶。共創行為在人類文化發展史的各個階段，我們都可見其蹤影。
設計共創的定義
1.名詞定義
網上較少關于設計共創方法的完整介紹和明確定義，只有一些相關資料是對于該方法的理解。
如：“Co-designis a design-led process that uses creative participatory methods. There is noone-size-fits-all approach nor a set of check- lists to follow. Instead, thereare a series of patterns and principles that can be applied in different wayswith different people. Co- designers make decisions, not just suggestions”(Burkett, 2012).
“協同設計是一個通過使用創造性和參與性的方法進行設計的過程。在這個過程中，沒有一種放之四海而皆準的方法。但是，有一系列的模式和原則可以與不同的人以不同的方式進行應用。協同設計是為了做出決策，而不僅僅是建議”
2.筆者對設計共創的理解
經過在實際工作中的不斷實踐和應用，用一句話來總結我對設計共創的理解：“邀請核心角色參與設計關鍵過程，共識問題和目標、了解設計思考過程并共同決策、共識評價標準并共享設計成果”
Why-為什么要使用設計共創
設計共創的價值
設計共創有以下三個重要價值
1.打破能力邊界：個人能力是有限的，通過卷入其他核心角色的參與，發揮各個角色優勢，實現資源的優勢整合，有效打破個人能力的邊界。
2.豐富視角維度：設計是一個不斷平衡的過程，了解并兼容更多信息才能使方案更加完備，然而設計的單一視角往往是具有局限性，設計共創可以幫我我們從多視角思考問題，有效規避風險。
3.拓展價值廣度：項目的價值如果僅僅從設計角度進行評估會顯得單薄，難以獲得其他角色的認可。通過多角色共建評估標準拓展價值廣度，最終實現價值共享。
什么類型的項目適合進行設計共創
實際工作中我們通常會從項目的相對設計成本和相對設計價值兩個維度來評估項目類型。設計價值相對較高，又具有一定設計成本的項目，比較適合進行設計共創。例如一些業務邏輯復雜的改版項目、從0-1的前瞻探索項目、設計多方決策的橫向項目等。
對設計成本、設計價值的理解
相對設計成本通常由業務復雜度、需求是否明確、溝通成本量決定；而對相對設計價值的評估則需要從用戶、業務、設計三個視角進行評估。
設計共創流程 VS 常規設計流程
對比我們常規的設計流程，設計角色通常作為一個需求的把關者出現，重點參與需求確認后的設計相關環節，最終從設計單一視角進行項目復盤。在項目從需求到上線的整個過程中作為被動者的角色，斷點式的參與，缺少控制權。
而設計共創流程要求我們在項目的各個環節深度參與共同決策，變被動為主動，從共創視角全流程掌握項目細節，提高對業務的理解和判斷。
How-如何開展設計共創
以《百度保障體驗優化項目》為例
注：百度保障項目主要服務于百度網民權益保障計劃，這是百度聯合國家司法部、消協推出的首個搜索引擎網民權益保障體系，其目的是為了更好的保障網民的合法權益，當用戶在百度進行搜索、購物等行為時，遭到釣魚、欺詐、假冒官網并造成經濟損失時，可以享有一定額度的保障金，屬于百度APP的特色功能。
從項目的相對設計成本、相對設計價值來看，百度保障體驗優化是一個設計成本&價值相對較高的項目，比較適合進行設計共創：
1.相對設計成本高
①業務復雜：百度保障是一個涉及BC雙端用戶的產品，流程復雜，設計側處于剛接手的階段，對業務邏輯不熟悉。
②需求不明確：百度保障業務屬于百度特色功能，起步晚且少有可參考的行業競品，常常是一句話的改版需求。
③溝通成本高：產品團隊新調整，一線產品同學經驗不足，缺少成熟的合作流程，總是頻繁改需求。
2.相對設計價值高
①用戶體驗差：保障業務體量雖小，面對的用戶卻都屬于高危用戶，然而之前的功能沒有經過設計介入，用戶體驗極差。
②業務重點：影響百度口碑，是產品側的重點優化對象。③設計視角：改版需求設計發揮空間大，產品給予高度配合。
《設計共創五步法》
接下來將結合《百度保障體驗優化項目》說明設計共創的實踐路徑。
第一步：業務理解
1.項目背景摸底
產品最初的需求只有一句話“保障官網目前體驗很差，很久沒有優化過了，需要設計團隊幫忙整體改版”，并在此基礎上提出一些非常稀碎的優化點，缺乏關聯性和整體性。
設計側開始通過定性、定量多種形式對業務進行摸底，明確整體的業務邏輯以及保障官網所處的位置，并通過用戶反饋和用戶數據分析問題，明確用戶的真實訴求。
2.理解業務價值
通過業務摸底，設計側將對業務價值、業務邏輯的整體理解梳理出來，并與產品確認達成共識。
百度保障業務有三個重要的環節：保障官網、申請保障、保單管理。通過這三個環節建立起用戶端和商家端之間的聯系。其中，百度保障官網起著非常重要的信息傳達、用戶保障認知建立的作用。
3.現狀問題分析
百度保障官網作為重要的保障認知傳達陣地，存在框架層級混亂、信息簡陋缺乏針對性、傳達效率低等問題。
第二步：共識目標
通過多角色溝通，我們將官網改版的核心目標確認為“如何從BC雙視角重塑官網信息強化保障認知，讓官網內容更易理解”。
在共識目標的過程中，設計側可以先基于共識的業務價值和問題定一個初版目標，然后拉其他核心角色一起討論，避免無目的低效率溝通，在基本共識點的基礎上更容易達成一致。
第三步：設計共創
基于共識目標，設計側組織開展多角色腦暴進行設計方向共創和方案細節共創。
1.設計方向腦暴共創
①共創前-充分準備有效的腦暴和共創過程需要組織者具備清晰的思路和明確的引導。在腦暴前我進行了詳細的腦暴議程安排，并通過郵件和工作群的方式同步給參會同學，要求所有參會同學會議前完成閱讀，保證信息同步。
②共創中-把控節奏
共創過程中為了保障腦暴的質量，我會要求全部參會同學關閉電腦聚焦在討論的目標上，明確問題和目標→各自思考并用標簽記錄想法→共同討論并在大白板上進行整理分析→得出共識結論。
以C用戶官網優化視角來舉例
我們在共識官網想要為C用戶營造的感知是讓他們能【了解保障作用，建立信任感，知道如何申保】之后。從使用場景、用戶訴求、訴求滿足依次進行腦暴共創：
1.核心場景：通過對業務的理解發散討論用戶什么場景下會來到保障官網，大家一起共識了兩個核心場景。
2.用戶訴求：基于核心場景，將自己帶入用戶，想象進入保障官網的自己核心訴求是什么？每個人寫下自己的想法，然后貼標簽找共性，共識核心訴求。
3.訴求滿足：共識訴求后，我們轉變視角，思考作為產品設計師我們可以通過提供哪些內容來滿足用戶的訴求。同樣的，每個人寫下自己的想法后貼標簽找共性，此次的內容對于官網信息的呈現已經起到很大的決定性作用，再此基礎上，我們一起投票決定信息的優先級完成頁面內容的基本布局并形成共識結論。
③共創后-記錄共識共創后，最重要就是及時記錄共識結論并同步到所有相關成員進行確認，這樣不僅可以幫助我們理清思路，更能夠很好的減少后續結論變動的風險，降低溝通成本。
2.方案細節共創
①決策框架層方案以官網中BC用戶信息的強弱關系為依據，進行框架結構的多方案發散，并通過制作demo的方式完成不同方案的原型效果。
拉關鍵角色進行體驗并投票。大家一致認為【方案3：強化C弱化B】的效果更符合我們的優化目標。
在框架方案3的基礎上，進行方案細化。對比線上原方案，框架層有兩個核心優化點：
1.層級優化：由原層級關系不清晰的5個頁面，減少后一個C用戶首頁+B商家二級頁，重點突出層級簡單。
2.提高屏效：將原來的雙底bar合并，提高頁面展示屏效。
②共識信息表現層方案
在信息層基于腦暴共創結論對內容信息進行了重構，完成官網認知的搭建，主要有以下3個優化點：
1.內容更豐滿：根據腦暴結論C用戶首頁增加9個內容模塊，B商家頁增加4個內容模塊，建立保障立體認知。
2.內容更聚焦：將C用戶頁作為首頁，去掉原首頁，B商家頁作為二級頁面，強化C視角更好的滿足核心用戶訴求。
3.信息更真實：C首屏信息通過展示申保&認保的規模數據突出保障的安全感，B商家頁通過輪播申保動態&增加真實案例方式營造真實感。
完成方案后拉關鍵角色對齊共識，調整優化細節，明確最終效果。
第四步：指標拆解
在指標拆解方面，根據HEART+GSM體驗度量模型，完成定性+定量驗證指標的分析。
簡單來說，就是將HEART模型中的體驗標準依次縱向排列，將GSM體驗度量模型作為分析工具，依次對HEART模型中各個維度從目標（goal）、信號（signal）、度量指標（metric）進行分析。
以留存率（retention）為例，我們的目標是希望用戶愿意多來官網了解信息，不斷強化保障認知，那么用戶所表現出來的行為信號是多次訪問保障官網，對應的度量指標可以拆解為活躍用戶量、次日/三日/七日留存等等。
完成設計側指標拆解后，與產品進行討論，從產品視角給予補充完善，雙方達成共識后，一起完成定性評估問卷和打點規則細化。
第五步：落地驗證
上線后持續觀察用戶數據，對比上線前后的定性+定量指標，定性評估及定量數據指標均得到明顯提升。
其他思考
設計共創循環流程
官網優化只是保障體驗的一個環節，我們以點入局，拉開了保障體驗全流程整優化的帷幕。
在完成申保前-保障官網的整體優化改版后并獲得極大成功后，我們趁熱打鐵，通過用戶體驗地圖的方式完成保障中、后全流程的設計機會點分析，明確申保中、后設計目標并完成具體設計提案，與產品共識后分期推動落地，與官網優化一樣，通過設計共創和嚴謹論證最終上線后的數據效果均表現正向，符合預期。
從保障全流程優化的案例我們不難發現，設計共創是一個循環過程，它始于我們對業務的初步理解，終于一個循環后對業務的理解加深而進行進一步的循環，從而形成一個良性循環，幫助我們不斷深入業務，助力業務體驗不斷優化提升。
及時進行項目復盤總結
在項目關鍵節點及時進行項目復盤，不僅可以讓所有參與項目的同學有獲得感和價值感，更加認可設計共創的成果，形成正向循環。同時也能擴大設計的影響力，獲得合作團隊老板的高度認可和贊許，達成雙贏目標。
作者：百度MEUX 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
Hi，我是彩云。用戶頭像是我們在做UI時經常會用到的設計元素，但想要設計好它也是有很多需要注意的細節知識的，今天這篇文章將深入到頭像設計的方方面面，不同的事件、狀態、操作、配色等等一系列UI設計的最佳實踐。這篇文章準備了很多實例，或許可以給你一些啟發。
近年來，我幾乎每天都在瀏覽數以萬計的UI組件、界面、不同的網站和app，研究它們的結構、布局和配色方式。我的目標是創建一個全面的UI指南，設計應用及其組件、模板等。
今天這部分講的就是關于用戶頭像的UI組件探索。用戶頭像是一個組件元素，用戶通過它來標識自己。
基本上有以下三種類型可以用來代表用戶頭像
空狀態
名字的首字母
用戶照片或者圖片
根據具體使用場景的不同，你可以使用多樣化的顏色和尺寸:
1）為了更好的識別，不同用戶配色可以多樣化一些
2）頁眉、導航欄中一般用24-40dp寬度為主
3）40-48dp的頭像大小通常用在內容塊或列表中
4）如果你想在更大的頁面中使用頭像，比如個人中心、設置中心等時，推薦使用56+dp
當我們想通過用戶頭像通知某事或演示某種操作時，可以使用額外的UI元素；
1）指示燈標識用戶是在線還是不在線
2）通過帶有編號的標簽通知提供信息
3）可以在用戶頭像上增加額外的圖標提供用戶行為操作
顯示用戶狀態的最常見做法是在頭像的右下角放置一個多色控件
1）綠色的代表在線，灰色代表不在線
2）填充圖形代表用戶在線狀態，而空心形態用戶不在線的狀態（并且是可以操作的）
根據不同優先級以及為了吸引用戶的注意力，可以修改頭像的標簽樣式
1）對于高優先級的提示，可以使用高亮的底色+反白的文字
2）對于其他情況，使用淺色背景，形式上做一些弱化
當頭像帶有操作功能時，通常使用圓形按鈕或嵌套圖標等組件來顯示即將進行的操作。
1）將圖標更改為符合用戶期望的結果
2）顏色的使用要合理，需要強調事件或動作的含義
單邊文本
當需要添加額外信息時，次要標題可以和頭像一起使用。此功能在應用欄、列表、表格中非常常用。
1）較大的標題用于表示用戶的名稱
2）額外信息的文字是可選的（例如：狀態、職業、上次訪問、關注者數量等）
底部文本
對于整頁，可以使用更大的頭像，并將文本放在底部。這是應用內的常見模式，例如社交、個人資料、設置等。
事件
為了進一步表明新用戶的事件，可以在頭像周圍添加一個描邊。還可以添加一個帶有標記的計數器，這也將具有更強的設計提醒作用。
進度
使用一個描邊線作為用戶成就的進度，仍然非常流行和方便。
選擇
對于所選狀態，用戶最可靠的確認方法之一是確認圖標和描邊的組合。
以下是所選狀態的典型變體的外觀：
帶一個按鈕
當頭像被分組時，額外的行動按鈕可以是一個可靠的選擇，讓用戶從那里知道某個操作。例如，“加號”按鈕將我們帶到一系列交互相關的選項（添加、編輯、排序等），這些選項可以對分組的頭像執行。
標記
數字標記是展示隊列中剩余用戶數量的一個很好的解決方案。
帶有懸浮狀態的標記
一個標記最常見的模式之一，當它被懸停時可以顯示用戶的附加信息，作為信息交互的擴展。
具有懸停狀態的頭像
當堆疊組中的頭像懸停時，顯示用戶全名的最佳方式是使用懸停組件。
頁面模板
在應用或網站中使用頭像的最流行的方式是在頭部嵌入一個小的用戶圖片，或者在配置文件/設置部分嵌入較大的頭像。此時，用戶可以對圖片進行編輯操作。
以上就是我所整理的關于頭像知識的所有內容，希望看完這篇文章你可以更加全面的設計更好的頭像。
作者：彩云Sky 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
Hi，我是彩云。畫面平衡是一個很基本的設計理念，但很多朋友在平時的作品中容易忽視這個點。彩云在星球中幫不少朋友看過作品集，發現最多的問題之一就是畫面平衡沒做好，我覺得只要把這個基本問題解決了，作品就能提升一個檔次。
用戶本能地會對不平衡的設計感到厭煩，如何在畫面中創造一個有吸引力的平衡？是本篇文章要分享的內容。
Illustration: Outcrowd
平衡是一個作品中最重要的元素之一。平衡中的對稱關系能夠創造平衡與和諧，這種平衡狀態直觀上能夠讓用戶感到舒適。
人體是垂直對稱的，我們的視覺接收也與之相對應。我們喜歡物體在垂直軸上保持平衡，直覺上總是傾向于平衡一種力量與另一種力量。
Illustration: Outcrowd
在設計環境中，平衡是基于元素的視覺重量，而視覺重量是用戶對圖像的注意力范圍。如果畫面是平衡的，用戶會下意識地感到舒適。畫面平衡被認為是其元素在視覺上的比例安排。
如何讓一個頁面看起來平衡？
最常見的平衡例子就是使用對稱。
在潛意識層面上，對稱的視覺能讓人愉悅，能讓畫面看起來和諧有條理。對稱的平衡是通過在水平或垂直的中軸兩側均勻放置元素來創造的。也就是說，畫面中間假想線的兩邊實際上是彼此的鏡像。有些人認為對稱的平衡是無聊和可預測的，但它經受住了時間的考驗，到現在仍然是在頁面上創造舒適和穩健感覺的最好方法之一。
Illustration: Outcrowd
兩側重量不相同的元素構成具有不對稱平衡。
動態平衡通常會比靜態平衡更有設計感，讓畫面不至于呆板。在缺乏平衡的情況下，我們的目光會條件反射性地開始尋找平衡點，這是一個很好的機會，可以將注意力吸引到頁面上可能還沒被注意到的部分。頁面重點就應該放在這里——抓住用戶的注意力，就像產品的生命線一樣。
Landing page — Asian Cuisine
比如一般這樣去“配重”的元素會是一個按鈕或者標題。
重要信息（或者是行動按鈕）就是我們需要去配重的價值元素。
不對稱的現象越嚴重，用戶就越想找出其中的原因（檢查配重）。人們本能地比平時更仔細地研究這樣的畫面。然而，這里需要注意分寸，過于古怪的構圖并不總是能被很好的感知。
Illustration: Outcrowd
平衡中的另一種類型，特點是視覺元素從一個共同的中心點放射出來。徑向平衡在設計中不常用。它的優點是，注意力很容易找到并保持一個焦點——恰好就在它的中心，這通常是構圖中最引人注目的部分。
這是一種平衡中的混亂，就像 Jackson Pollock的畫作一樣。這樣的組成沒有突出的焦點，所有的元素都有同樣的視覺重量。沒有層次，乍一看，畫面就像視覺噪音，但所有元素又相互匹配，形成一個連貫的整體。
（彩云注：這是一種比較高階的設計平衡處理手法，用的好可以讓畫面非常具有設計感，但把握不好的話，就會非常凌亂。所以，我們平時能看到很多大師的作品看似一些簡單圖形的使用，但就是好看，輪到自己設計的時候就會發現，越簡單的設計似乎越難設計好。）
Illustration: Outcrowd
當談到構圖中的重量平衡時，他們經常將其與物理世界中的重量進行比較：重力、杠桿、重量和支點。我們的大腦和眼睛感知平衡的方式非常類似于力學定律。我們很容易把一幅畫想象成一個在某一點上平衡的平面，就像一個天平。如果我們在圖像的邊緣添加一個元素，它就會失去平衡，有必要修復它。元素是否是一組色調、顏色還是點并不重要，目標是找到圖像的視覺“重心”，即圖像的重心。
不幸的是，沒有精確的方法來確定一個物體的視覺質量。一般來說，設計師依賴于他們的直覺。不過，下面這些有用的觀察可能會有所幫助:
大小
大的物體總是更重
形狀
不規則形狀比規則形狀的元素輕
顏色
暖色比冷色重
色調
深色物體比淺色物體重
圖案
帶有圖案的元素顯得更重
3D
帶有紋理貼圖的元素顯得更重
內部復雜性
物體內部越復雜，視覺重量更大
填充空間關系
正形空間比負形空間更重
對重量的感知
照片中的啞鈴看起來會比一只鋼筆更重
當使用對稱時，作品看起來可以更加的專業和有科學性。其中，靜態對稱的作品顯得更加有專業精神和嚴肅的；而動態對稱的設計方法則能吸引用戶的興趣，表達出個性和創造力，能讓用戶集中注意力。
作者：彩云Sky 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
圖標是任何設計系統不可或缺的一部分。使用圖標的主要原因是幫助用戶快速理解想法，實現快速導航，解決語言障礙，最終提升用戶體驗。
圖標作為一種設計工具，在UI/UX和平面設計師中最受歡迎。這些微小的設計元素對每個人來說都是簡單易懂的，這些特征賦予了它們通用數字語言的地位。
在這篇文章中，我整理了10個簡單又重要的技巧幫你設計出更專業的圖標。
最小的圖標大小通常是12 x 12px。以這個尺寸為基礎，行業標準中大多數其他尺寸只是通過將之前的尺寸翻倍而產生的。
重要提示：當你設計圖標時，重要的是要按100%顯示的比例去設計，使圖標完美像素并放大像素塊查看準確性。
完美像素圖標在屏幕上能呈現尖銳和清晰的線條和形狀。如今，高分辨率顯示器和視網膜顯示器正變得越來越好，所以在不久的將來，對像素完美圖標的需求可能會減少。但就目前而言，讓你的圖標具有可伸縮性、響應性和適配更多設備是非常重要的。
1) 像素網格對齊.
使直線部分完全清晰，并增加曲線和邊角的清晰度。（彩云注：盡可能的使線條實心）
2)完美角度
有角度的線更模糊。創建圖標的最佳角度是45°，因為形成一個角的像素彼此對稱。
3)邊緣清晰
直線必須占據其邊緣上最暗的4個像素。這樣線的邊緣看起來更清晰。
為了讓圖標看起來整潔一致，重要的是要記住線條寬度和間隙大小。這條規則我認為是必須遵循的:所有線條的寬度都是相同的。
理想情況下，線寬和間隙大小也應該相等。
然而，有時候你必須打破這個規則。當你需要解釋我們在日常生活中面對的一個具有非對稱模式的物體時，它就會發生。比如條形碼這個例子來說，我故意使圖標內的線寬和間隙大小不均勻，以表示條碼的特征。
在UI設計中，對象(包括圖標)的角半徑定義了項目的外觀和感覺。當我們說到一個集合中的多個對象時，規則很簡單：在正方形和圓角之間進行選擇，并對所有的圖標應用相同的屬性。
為什么它如此重要?一致性是UI/UX設計的關鍵原則。一個可用和用戶友好的設計總是提供一致的體驗。在下面的例子中，你可以看到打破這個原則是如何影響視覺感知的。
在電腦上看起來完美對齊和平衡的東西，在你的眼睛看來可能并不一樣。
當我們把大小相等的正方形和圓放在一起時，我們會有一種不對勁的感覺，圓似乎比正方形小。為了使我們的形狀在尺寸上看起來相同，我們應該使圓更大(或減少正方形的尺寸)。
這個原則也適用于圖標的設計和使用。有些圖標的一側可能較重。試著調整它們一兩個點，直到整體對齊看起來正確。在下面的例子中，你可以看到突出顯示的圖標看起來很大，盡管它與其他部分的大小相同。為了平衡這個集合，我們需要通過縮小圖標的大小來調整突出顯示的圖標。
（彩云注：這個原則很多人應該都知道，但我發現也是在整套圖標的設計中最容易出現的問題，當把圖標匯總在一起的時候，這個問題尤其需要重視。）
我們經常在設計軟件中使用中心對齊，這種方法沒有錯。但當涉及到細節時，比如圖標設計，我們需要相信自己的眼睛，打破數學法則，以增強元素的平衡。
讓我們以播放按鈕作為展示。這個例子很簡單，但非常能說明問題，因為形狀越不對稱，需要改進的缺陷就越明顯。
我打賭你已經猜到我們指的是KISS原則。這一原則背后的思想是，大多數系統在保持簡單的情況下工作得最好。用戶越容易理解某樣東西并與之互動，它就越具有通用性。
（彩云注：KISS原則是“Keep It Stupid Simple”或者“Keep It Simple, Stupid”的縮寫。篇幅有限，彩云幫大家找了一篇參考文獻https://www.jianshu.com/p/7d58b96d0185#comments ，感興趣的可以去學習下。）
它如何適用于圖標設計?
1）別使用文字
文本和圖標的綁定減少了圖標的通用性。此外，小尺寸的文本是可讀性很差。如果一定要文本作為支持元素，使用工具提示和圖標旁邊的標簽。
2）不要過度設計
不必要的復雜性阻礙了合理的表達，應該避免。過載的設計會將用戶體驗變成一場噩夢。
3）避免不必要的元素
只要確保每個圖標在整體環境中是可理解和清晰的就行。（彩云注：比如已經是在郵件客戶端中，就不需要再額外增加表示郵件的圖標部分）
重要提示：在圖標設計中合理地使用KISS原則，也不要把事情做得太簡單，否則會影響功能。一個優秀的圖標應清晰易懂。
圖標規范框架通常是指組合在一起的圓形、正方形、縱向和橫向矩形。它們創建了一個框架來設計圖標。但是，這個規則非常靈活，只是作為參考，方便圖標的設計在視覺上平衡。所以，如果你覺得你的圖標不完全匹配這個框框，但看起來完全正確——相信你的眼睛！
框架是設計的“容器”?？蚣芤幏读艘粋€統一的范圍來設計圖標，這背后有一些原因：
1) 大小
由于其幾何形狀，所有圖標都具有不同的高度和寬度。為了在我們的設計中統一圖標尺寸，我們應該將它們放置在大小始終相同的框架中。
2)輸出
框架內的圖標與視覺中心對齊，這經常被開發人員忽略，因為他們經常根據實際的中心來調整圖標，而沒有注意到差異。這就是為什么用框架輸出圖標是至關重要的，當你按這個框架輸出圖標時，能保證視覺設計時想要的視覺中心。
3)效率
如果使用Figma，可以通過創建組件來節省時間?？梢允褂脤嵗焖俚貙⒁粋€圖標替換為另一個圖標。
如果你要打算做圖標資源庫的話。要想到當設計師在庫中搜索圖標時，會遇到哪些挑戰?他們的痛點是什么?他們的需求是什么?要回答這些問題，請設身處地為用戶著想。
1）不要讓用戶思考
例如，如果他們不知道自己想要找到哪種花卉圖標，那么就讓他們看到一系列選擇:鮮花項鏈，室內花卉，植物商店等。
2）展示關聯圖標
例如，如果用戶想在相同的主題或類別中找到圖標，他們可以快速地檢查包含這個特定圖標的完整集合。
3）使用標簽
用戶可能很難找到合適的詞進行搜索，或者可能希望看到所有類似的補充選項，從中選擇最合適的。例如，當一個圖標的實際名稱是“蘭花花瓣”，你仍然可以找到它與以下關鍵詞: #蘭花#花瓣#花瓣#花#裝飾#花#植物#花園#開花#植物#自然#熱帶#樹枝#美麗#植物#美麗#自然#葉子#優雅#浪漫
最終應該導出SVG或PNG格式？這是一個關鍵問題。讓我們來比較一下格式:
我個人的選擇是使用SVG圖標，因為它可以節省很多時間。但是，一定要小心縮小復雜的形狀，并記住舊的瀏覽器可能不支持SVG格式。
到這里你應該已經學會了這10個圖標設計要點，在你的圖標設計中使用這些規則，相信會讓你的圖標變得更加專業！
彩云注：圖標設計是一個設計師的基礎能力，在彩云看過的無數份作品集中最普遍的問題也就是圖標設計。今天這篇文章雖然非?；A，但千萬別小看它，用這10條技巧重新審視自己的圖標作品，相信會有新的收獲！
作者：彩云Sky 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
Hi，我是彩云。界面是用戶在與任何產品、APP或平臺交互時看到的內容，用戶體驗就是建立在堅實的界面設計基礎之上的。所以，如果你想要在UI設計上提升能力，應該多去思考界面設計背后的原因。
今天會跟大家分享一些被廣泛運用的界面設計規則，它們能快速使得你的界面設計更干凈、高效。
用更容易讓用戶理解（說人話）的引導文案，提升使用體驗。
（彩云注：下面2個案例中，左側的“購物車”和“庫存2”太過于術語化，右側的“僅剩2”和“加入購物車”更加貼近用戶的日常理解。大家平時工作的時候，也一定要注意界面中的文案，尤其是說明文字，控件文字等等，這個點經常容易被忽略。）
良好的對齊方式，可以增強內容的可讀性，讓用戶的視線更容易掃描。
（彩云注：左側的“之”字形視動線比較難閱讀，且不夠專業；右側的垂直對齊增強了可讀性，也讓設計看起來更加統一，能夠快速的提升設計細節。）
使用圖標、動畫作為標簽，有助于更輕松地理解內容，它使界面看起來更加理性和豐富，能瞬間抓住用戶的眼球。
（彩云注：左側的導航相較于右邊，很難第一時間準確識別它的意思，增加圖標后不僅更快看清，視覺上也更加美觀。）
大段的長句會讓內容變得難以閱讀。
為了獲得好的體驗和UI，應該注意拆分內容，并使用項目符號突出關鍵點，利用拆分好的內容塊讓用戶更快抓住重點。特別是在“功能說明和條款條件”或任何聲明時，提煉要點有助于提升用戶體驗，這樣也不至于讓用戶直接忽略。
（彩云注：左側的大段文字我想應該沒多少人會去閱讀，右邊的至少還能在短時間內快速看看幾個關鍵詞。）
進度條幫助用戶追蹤流程，它也能使查看上下步驟更加容易。線上購物，表單填寫，申請流程等場景使用這種格式能很好的簡化流程。
（彩云注：左邊的表單UI不方便跟蹤進度和流程，右邊的表單把進度放在頂部能幫助用戶清楚的知道流程進度。）
錯誤提示一定要明確，易于理解，方便用戶進行下一步的操作。如果用戶不理解界面上出現的錯誤，用戶就會感到很失望，可能會放棄接下來的流程。在UI設計時，在正確的地方用通俗的語言說明問題，以避免歧義，這一點非常重要。
（彩云注：我常常遇到各種出錯，但出現的提示太過于術語化，也沒有提示在正確的地方讓我非常苦惱。）
從菲茨定律（Fitt's Law）中我們應該知道，目標區域的距離和外觀與所采取的行動成正比。因此，為了將注意力集中在轉化按鈕上，按鈕應該準確放置在合理位置上。此外，按鈕的大小應該易于點擊，避免用戶因嘗試點擊時不方便而流失。
（彩云注：左側的按鈕不在正確的決策位置以及按鈕太小，右側的按鈕簡潔明了并且符合用戶的心理預期，能夠讓用戶更快決策并點擊。）
顏色是UI中不可缺少的部分，它能影響用戶使用應用時的情緒。正確地使用顏色將使UI看起來更加豐富合理。
（彩云注：左側的藍色按鈕顏色并不符合用戶對于刪除的心理預期，右側的紅色按鈕對用戶的心理預期有危險和警告，用紅色代表刪除能夠讓用戶集中注意力關注這一特殊的操作。）
用單列展示內容，能更好地幫助用戶掃描。當你的應用和網站上要展示大量信息時，將所有信息垂直對齊時，能更好的保持用戶關注度。
用戶準備登錄或注冊你平臺的時候，把所有可用的社交媒體登錄盡量放在首位。這將避免用戶填寫表格時付出額外的認知負擔和時間消耗而流失。首先使用社交媒體賬號，能很好地增加點擊率。
在用戶做選擇的時候，需要清晰地告訴用戶選中的到底是哪一個選項。模棱兩可的顏色會增加用戶的認知負擔。更少的顏色和清晰的選中狀態能讓用戶獲得更好的體驗。
（彩云注：左側的問題在于選中狀態不清晰且選項的顏色過于豐富，右側的選中狀態清晰且選項顏色只有2種，選中和非選中，體驗會更好。）
如果想給信息分組，使用留白是最好的方式。加條線作為分組符號會在界面中增加了一個額外元素，空白能讓UI看起來更加干凈和優雅。用線分組的情況適用于類似Twitter、Medium之類的重內容平臺等場景。
保持設計的一致性，能夠降低功能復雜度并讓用戶更快決策，一致性設計讓用戶更快熟悉操作而不需要太多思考。
（彩云注：左側的選項圓角不一致，會讓用戶思考為什么這里會有不同，而右側的一致性選項設計，能讓用戶忽略內容外的干擾。）
14. 搜索中的占位符要用好
在搜索輸入欄添加適當的占位符，提示用戶可以在平臺上搜索和找到的內容，這樣可以提供用戶參考并帶來更好的用戶體驗。
高飽和度的顏色能形成強烈的對比。在暗黑模式下使用高飽和度會很刺眼，給用戶很不好的體驗。暗黑模式一般在晚上使用，因此對設計師來說，需要做的是讓整個配色相對柔和，讓用戶感到放松?；诖?，在設計的時候應該將飽和度限制在200-500之間。
(彩云注：這里的200-500彩云去查了不少資料，但沒有找到最好的答案，這里引用的是Material Design中的顏色規范，感興趣的同學可以自行查找)
在同一個界面，最理想的狀態是只有一個最主要的關鍵按鈕和緊跟著的次要按鈕。這是因為如果一個界面上有太多這種行動按鈕（CTA）按鈕，會讓關鍵操作淹沒在這些按鈕中，讓用戶不知所措。
17. 簡化不必要的動詞
沒必要在菜單上增加動詞和短語，用最少的信息寫清楚功能就足夠讓用戶理解了。所以，在菜單設計上要盡量避免增加無關緊要的詞，這樣才不會影響用戶體驗。
你可能注意到，很少有表單的字體大小不平衡，字體之間的類別盡量少一些看起來會更加平衡。在決定字體大小時，盡量規范字號的標準。比如標題（16px），副標題（12px），正文（10px），說明文字（8px），這些尺寸都是以2為倍數的。
盡管我知道要做好圖標一致性，但在實際工作中依然經常犯錯。很多設計師經常用不同風格的圖標混在一起，這樣會讓整個UI界面的設計顯得很不成熟。圖標是為了讓用戶更有效率地理解事物。在使用圖標的時候一定要注意圖標的一致性，尤其是一些是一些風格細節。
這里也跟大家分享2個我自己常用的figma圖標庫：
1)Unicorn (https://www.figma.com/community/file/931512007012650048)
2)Basil Icons (https://www.figma.com/community/file/931906394678748246)
通常情況下，我們會認為一個顏色在深色模式和亮色模式下是用的同一個顏色值，但這其實是錯誤的。一個顏色在亮色模式下看起來非常漂亮，但在深色模式看可能就太暗了，反之亦然。解決這個問題最好辦法是使用2套不同飽和度的顏色。
App的新手引導決定了用戶第一次體驗產品時的感受。在設計的時候，試著公開需要哪些具體步驟，增加”跳過“和前后移動查看的能力對新用戶來說非常重要。
許多網站和App都是用圖片驅動的，但在圖片上直接增加文字內容有時候會被淹沒掉。在圖片上增加一個疊加層可以提升內容的可讀性。
23. 信息部分露出
對于一些大屏設備來說，像筆記本電腦，平板電腦和智能電視，它們都有非常多閑置的空間。對于這些閑置的空間來說，盡量通過設計告訴它底部還有更多內容。這對UI和UX方面都有好處，因為空間的使用方式能夠讓用戶清晰的知道所有內容。
為了讓用戶聚焦閱讀，應盡量避免使用大段的長/寬行。保持短句和簡潔能夠增加內容的可讀性。
（彩云注：這點用在你的作品集里也是很合適的，有些人經常使用大段的文字內容來描述，很可能直接勸退面試官）
Z字形原理，也就是大眾所熟知的”古騰堡原理“，它描述了當人們看到一個均勻分布元素的設計時，眼睛的總體運動情況。通過這個原理我們知道，用戶在內容上的視線是沿著Z字形來閱讀的，所以遵循這一原理設計你想要核心表達的內容。
擴大點擊區域，維護像按鈕、單選、多選等控件的響應尺寸，如果你設計的點擊區域太小會讓用戶點擊困難，造成流失。
避免使用花俏和俗氣的圖標，它們會讓整個設計顯得非常不成熟，同時也是很難理解的。用上更簡單的圖標形式，會讓界面更高級。
（彩云注：當然越簡單的圖標其實想畫出彩會更難，另外也需要區分不同的場景，像一些運營類的圖標可能會為了活動氛圍做的相對風格化一些。）
選錯文案，會讓人們對于任務缺乏興趣，根據上下文使用更合適的詞組。
輕敲和點擊有時候很累人，可能不如使用滑動、拖拽等手勢操作，這些操作會讓界面更簡潔并且也能順利地完成既定任務。
在探索酒店、目的地甚至是閱讀任何文章時，用戶經常都需要點擊卡片。為了使得探索更加吸引人注目和干脆，避免使用長文本導致的滾動。相反，可以加一個閱讀更多的按鈕方便想看全所有內容的用戶。
”鄰近的物體往往被視為是同一組內容“。有時候為了把內容區分開的更清晰，嘗試用線對相關內容進行分組。
（彩云注：其實有留白和不同顏色做區分也是可以的，建議根據自己的設計風格和具體內容來定）
在設計控件時，如果可以用圖形可視化的地方就優先嘗試把控件圖形化，除了非常需要很精確的設置參數。對于價格范圍這種，很容易將它可視化為滑塊控件。
對一些人來說容易理解的東西，對某些人來說可能不是。因此，最好使用示例占位符來解釋輸入字段，這可以防止用戶在填寫內容時出錯。
根據”系列位置效應“，心理傾向于記住列表的第一項和最后一項，而不是中間項。因此，在任何App中設計導航時，根據應用的上下文保持最左和最右的選項。例如instagram，最左邊是”首頁“，而最右邊是”用戶“。
（彩云注：這是一個心理學上的理論，人們對于一系列的材料更容易記住開頭的內容，也叫做首因效應或者首位效應；更容易記住末尾的內容，就叫近因效應。）
在設計任何體驗時，點擊次數都是非常重要的指標。統計用戶需要點擊多少次才能完成他的目標，額外的點擊會減慢整個操作過程。簡化過程，自然體驗就會更好，所以盡可能的減少點擊次數。
（彩云注：下面的案例，增加可點擊符號也可以減少用戶思考的時間。）
為了使內容突出，沒有必要使用多種字體類型，包括加粗、改色等等。只在最需要的位置使用增強的的文字層次結構、字體重量，同時只使用一種字體足以吸引用戶對內容的注意力。
留白在設計中非常重要，太少或者沒有留白會使得設計非?；靵y。明智地使用留白可以明確地強調內容。
根據多爾蒂閾值(Doherty Threshold)這個理論：”系統需要在 400ms 內對使用者的操作做出響應，這樣才能夠讓使用者保持專注，并提高生產效率?！啊Ｒ虼?，我們可以使用動畫、圖像甚至文本來保持用戶的注意力。（彩云注：給用戶的提示可以先快速加載信息框架，讓用戶有事可做，而不是什么都看不到）
作者：彩云Sky 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
Hi，我是彩云。設計趨勢年年在變，設計技能也在不斷更新，但回到本源，底層的理論知識是不會變的。我自己幾乎每年還會翻看一些講設計基礎的書，比如《寫給大家看的設計書》之類的，會發現這些原理每次看都會有新的收獲。隨著工作年數增加，對底層知識的價值認識也越來越深刻，不知道你會不會有這種感覺？
在Medium上看到一位工作超過17年的國外設計leader寫的一篇關于設計原理的文章，講設計如何變得有效？總結得很好。
當沒有認知緊張時，用戶心流才會發生。當一個設計有效時，你才能體驗到認知上的輕松。如果沒有，你的“心流狀態”就會中斷(稍后會詳細討論)，讓我們陷入認知緊張，于是“設計失敗了”。
當基本設計原則被忽略時，這種情況很容易發生，導致設計無法“整合”。這些基本原則包括：平衡性、一致性和視覺層次、負空間、接近性、對比、統一、一致性、配色方案和排版層次等方面。（彩云注：很多人看到這些以為自己都懂，但實際設計時犯錯最多的也是這些問題）
從神經科學的角度來說，當一個設計起作用時，我們會“感受到它”。其影響立竿見影。它發生在潛意識里，在一瞬間完成，是人的本能反應。我們不需要把它放在顯微鏡下分析它。
優秀設計以簡潔和優雅而引人注目。喬納森·伊夫(Jonathan Ive)和迪特爾·拉姆斯(Dieter Rams)都可以算作這種設計思想的擁躉。
人們常說，優秀設計背后的工藝是無形的。然而，這不是隨機發生的。不管人們是否注意到，設計的背后是遵循著大量而嚴格的原理去執行的。偉大的設計師不會在畫板上隨意地將各種元素組合在一起，這是有方法的。
為什么有些設計具有美的感受，而有些卻沒有
相反地，當一項設計被認為“有些地方不對勁”時，人們就會下意識地覺得這個設計是有問題的。這樣的結果會給品牌或產品帶來不好的影響。當一個高端或奢侈品品牌受到高度關注時，這種影響尤其有害。這就是為什么你永遠不會遇到設計不完美的香奈兒(Chanel)商店的原因。
“你對一件事的第一印象會建立起你隨后的觀念，如果一家公司在你看來不專業，你可能會認為他們做的其他事情都不專業?！狣aniel Kahneman，普林斯頓大學心理學教授。
這不是一個精心制作的設計，會導致認知緊張。你會在這個網站上預訂你的行程嗎?
我們都同意上面是糟糕的設計，就像建在沙子上的房子，一個忽視基本設計原則的設計將會崩潰。潛意識里，它會立即被認為是破碎的，無論是視覺上、精神上和情感上。
人類的大腦是懶惰的、有偏見的，喜歡走捷徑。Daniel Kahneman稱之為“低維思維”。當人們看到某種設計時，它的“美學完整性”、視覺感知和神經科學之間存在著相互關聯。
當一個設計是合理的，換句話說，它是令人愉快的、有效的，我們會迅速、直觀的判斷它是合理的。我們的心率降低，多巴胺水平增加，會有一種幸福和平靜的感覺。這就像我們聽到舒緩的音樂，會沉浸在一種每時每刻的“心流狀態” 中?！霸谶@種狀態下，人們會專注于一項活動，其他一切似乎都不重要”——來自于一個心理學概念，由 Mihaly Csikszentmihalyi在他的暢銷書《心流:最佳體驗的心理學》中寫道。
你更愿意住進哪個房間？
蘋果的人機界面指南（Apple’s Human Interface Guidelines）幾十年來一直在談論“美學完整性”。它也可以被稱為“設計完整性”或“審美凝聚力”。
蘋果對美學完整性的定義是“當一個設計的外觀和行為與其功能完美匹配時”（彩云注：我的理解就是所見即所得，符合用戶的心理預期）。換句話說，設計的構成是產品的一個組成部分。我們將研究決定設計組合成敗的設計原則——更多的是關于 UI，而不是關于 UX。
美學完整性不僅僅是關于設計有多好看。它指的是具有明顯連貫性的設計：有效的結構和布局，是什么讓它產生效果。換句話說，它的元素在視覺層次、對齊、間距、平衡、對稱、重復、比例、強調、接近、對比、統一、一致性、配色、排版、負空間等方面都有出色的運用，這里僅舉幾個例子。
這與“黃金比例”無關，黃金分割不能解決問題。斐波那契數列螺旋沒那么玄乎，給設計師帶不來驚人的設計。
設計師們在安吉麗娜·朱莉或蒙娜麗莎的臉上畫出金色螺旋形時驚呼道：”果然是”黃金比例“（彩云注：但事實上有點故弄玄虛了）。當然，自然界中確實有神圣幾何學(黃金比例，又稱斐波那契螺旋，是基于此)，但依賴“黃金螺旋”作為設計原則是一種謬論，它已被多次暴露在其赤裸裸的荒謬中。
這是我的洗衣機，上面疊加了斐波那契螺旋。
“審美的完整性”不是沒道理的。這個概念是基于基本的設計原則，是有成就的設計師實踐他們的藝術作品的經驗總結。
讓我們來看看一些設計原則，以及它們為什么會使得你的設計更能更加有效。通常情況下，真正優秀的設計會結合這些設計原則。
我們將探討以下這些最底層的設計原理：
視覺感知的基本規則對任何視覺設計都是至關重要的，因為它們指導著如何盡可能快地傳達信息。視覺層次是設計中信息的結構和優先級。它決定了人們接受和處理信息的順序，因為它以一種視覺方式引導他們。
視覺層次感重在打造視覺優先級。通過巧妙地使用顏色、形狀、大小、間距、比例和方向，創造性地使用決定層次的視覺元素來傳達構圖的意義、概念和情緒。
核心關注點是什么，你希望用戶首先注意到或開始閱讀的設計中最重要的元素是什么？我們想讓它成為焦點，然后其他部分的設計從這里展開。
一個具有良好視覺層次的網站會引導用戶關注重要的部分
視覺層次對于每一種視覺設計都是至關重要的，無論是需要引導訪客眼球的首頁還是移動端UI的導航入口。用戶對每個元素的理解取決于組合中的其他元素及其上下文。
建立視覺層次的一些技術是:位置、大小和比例、顏色和對比、間距和親密性、負空間、紋理、引導線和高度。在一個元素周圍使用豐富的負空間可以使它看起來更有意義。使用引導線可以創造移動，就像一個人的眼睛在設計上移動一樣。排版的層次結構也扮演著重要的角色，通過不同的大小和權重，我們可以讓更重要的文本元素脫穎而出并建立秩序。
加分技巧
沒有視覺層次的網站沒有明顯的興趣點。
設計中的對齊和間距通過空間上的連接傳達出一種秩序和組織感，這兩個原則都在設計背后發揮重要價值。設計師早期學到的基本知識之一是在網格上編排設計，然后對齊和分隔這些元素。
左對齊、居中對齊、右對齊都沒錯，但你必須對齊，否則當元素沒有對齊時，設計就會給人崩潰的感覺。它給人一種不安的感覺。
沒對齊的話，眼睛看著很難受
網格有很多不同的類型:列網格、基線網格、模塊網格、層次網格、像素網格等。不同設計使用不同網格，但最基本的是設計元素的對齊和間距。（彩云注：關于網格方面的知識，彩云以前也寫過不少，感興趣的也可以在公眾號的歷史發文中翻翻看）比如：
(Illustration courtesy UX Engineer)
網格可以被打破。一個死板的構圖可能會在視覺上無趣，除非一個元素從網格中脫穎而出。錯位或“打破網格”是賦予元素更多視覺權重的一個機會。當在設計中設置視覺層次結構時，它可以用來強調某些東西。
有時打破網格可以創造強調和移動
設計上有兩種平衡:對稱和不對稱。所有的構成元素：排版、顏色、圖像、形狀、圖案、留白等，都具有一定的視覺重量。有些元素很重，很吸引眼球，而有些元素很輕，感覺不那么重要。
這些元素的放置方式能夠在對稱設計中創造出一種平等的順序感，或者一種稍微偏離平衡能夠創造出一種不對稱的設計。無論對稱還是不對稱，我們的大腦都被某種平衡感所吸引，因為它創造了和諧、秩序和美學上令人愉悅的結果。
多重原則:平衡、對齊和對稱在網站上發揮作用
“對比”指的是使設計中不同的元素更容易區別開。強烈的對比可以在設計中強調一個區域，而微弱的對比可以弱化它，創造一個視覺層次。對比在設計中也扮演著重要的角色。對比不足會使文字特別難以閱讀，尤其是對視力有障礙的人來說。
在左邊的設計中，一些文字和背景之間的對比不夠。
Web內容可訪問性指南 (WCAG)呼吁“文本的視覺呈現應該有至少4.5:1的對比度”，除了大規模文本，它應該有至少3:1的對比度。因此，設計師需要確保內容保持舒適易讀。（彩云注：具體可用性配色工具，彩云之前的文章中有分享過，現在這種可用性顏色已經越來越被重視了，你也要用起來啊）,之前寫的文章，推薦大家可以看看：
《以前我經常為配色發愁，自從知道這3個配色神器后，配色變得容易多了！》
其他UI元素(如各種顯示器和設備上的卡片、按鈕、文字和圖標)之間的適當對比也是必須的。如果UI元素之間沒有明顯的區分度，設計就容易產生混亂。
在格式塔原理中，對稱和秩序的法則也被稱為pr?gnanz，德語單詞“好身材”的意思。這個原理說的是，大腦會以盡可能簡單的方式感知模糊的形狀，這都是為了節省大腦能量。
我們傾向于尋找一切事物的對稱性。幾項研究發現，面部對稱能提高人們對人臉吸引力的評價(盡管完全對稱的臉其實并不一定那么有吸引力)。該理論認為，這種偏好與選擇DNA最好的伴侶的進化優勢。
對稱在自然界中也無處不在?？纯匆恢缓欢浠?，或者一只海星。
對稱
同樣的原理也適用于數字領域，平衡對稱的設計更令人愉悅。
對稱性在應用中發揮作用。Uber Eats、Booking.com和Behance。
重復是一致性的近親，是優秀可用性的標志。在設計中利用重復是件好事，因為我們的大腦總是在尋找模式、相似性和一致性。為什么?因為重復相同性質的元素需要更少的認知努力。
我們更容易識別重復的模式，而不是每次看到新模式都要重新校準大腦。正如前面提到的，大腦作為一種生存機制是懶惰的，模式識別和認知捷徑意味著有意識地處理視覺信息所需的能量更少。
例如，重復元素的形狀和大小、填充、留白、類型和顏色，也有助于更對稱、更好地平衡，做出美觀的設計。
The Athletic這個軟件就是用重復元素做設計的好例子
奇數法則意思是說，在設計作品中奇數元素比偶數元素更有趣。偶數元素在圖像中產生了對稱，這可能會顯得過于正式和不自然。比如，在一行中排列三個或五個卡片會比2個或4個效果更好，作品會更加讓用戶感到舒服和自然。
Iskos Design 就是用的奇數原則做的網頁設計
三分法構圖（也被稱之為黃金網格規則），在畫面中以水平和豎直方向分成3x3的網格和4個交叉點。這個規則能很好的協助設計師將最重要的元素放在網格的交叉點上，這樣可以很容易的設計出滿意的構圖。
為什么會這樣？因為三分法構圖創造了類似斐波那契數列(黃金比例)那種不對稱的美，產生了更有吸引力的構圖。
你希望用戶關注哪些地方？高級設計師非常擅長引導用戶的視覺焦點，這種引導可以通過可見和不可見的引導線來完成。這些線條在構圖中也可以打造一種動感，也能為畫面增添視覺沖擊力。
達到這種效果通常用特定的形狀和線條，或者是它們的組合形成難以察覺的引導線來實現。利用透視、顏色、對比度和正負空間同樣可以幫助達到這種想要的效果。
從左到右的不易察覺的曲線將用戶的視線引導到頁面文字上
大小（scale）是設計中一個元素與另一個元素的相對大小。元素通過大小不同創建視覺層次，其中最大的元素首先會吸引用戶的注意力，因此看起來是最重要的。常規的設計策略就是將最重要的元素做成最大的，然后逐級遞減。
比例(Proportion)不同于大小，類似但有區別。比例原則是指一個整體設計中各部分的尺寸關系。設計中的元素可以有各種大小，但它們之間的大小差異，整體來看就是比例。
熟練地使用大小和比例是實現設計統一的關鍵。當一些元素的大小過大或過小，或者比例失調時，設計組合就會失去統一性。這種錯誤可能發生在排版和其他元素上。例如，標題與子標題和正文相比顯得過大。當設計元素失衡時，設計就會“感覺不平衡”。
大小和比例都沒做好時(左圖)，看起來處理的比較細致了，但依然沒有做到很好，在大小上正文和標題分不清(右圖)
強調原則用于使設計的某些元素突出(使用對比、接近、比例、留白等)或不突出，即弱化強調(例如在頁面底部有一個幾乎看不見的“小字”)。強調是層級之母，因為沒有強調就沒有層級。
與其他一些設計原則一樣，“強調”是用來引導人們關注設計，并強調需要重點關注的第一、第二和第三點。首頁面和電商轉化頁面在99%的情況下都使用這種原則。
使用這個原則，在購物網站上強調了標語和產品，轉化效果非常好
統一是指設計元素如何很好地結合在一起，形成“視覺凝聚力”。它指的是設計中的連貫性，讓人們覺得所有部分都是一起的。每個元素都應該具有清晰的視覺關系，以幫助傳達清晰、簡潔的信息。整體性好的設計比整體性差的設計更有條理，質量也更高。
運用統一的配色，重復、平衡和對稱之類的原則將有助于在設計中形成一種和諧感，也就是一致性。設計中良好的一致性就好比歌曲中一首歌被和諧地唱出來，形成一個完美的整體。
一致的顏色、重復的圖案、平衡和對稱在蒂芙尼的網站上創造了一種統一的感覺。
格式塔的接近原則讓設計師將同類型的相關元素進行分組。把它們分開得更遠，元素就顯得越不相關，它們之間的關系就會減弱。一般來說，人們會認為遠離的元素是不相關的。
不應該讓用戶在設計中分辨哪些元素是相互關聯的，正如美國郵政服務的例子所顯示的那樣，缺乏對鄰近性的關注會導致直接的認知緊張，損害用戶體驗。
接近原則沒做好的案例。由于字段標簽離它們下面的字段更近，人們可能會搞混。
下面是一個鄰近性原則做的好的案例，我們可以看到相關元素是如何通過鄰近性關聯起來的(分組的元素用紫色表示)
一個把接近原則用好的網頁設計案例
一致性原則使數字產品的使用更加可預測，符合用戶的期望。設計中的一致性可以培養熟悉度，它可以提高用戶體驗、可用性和用戶使用效率。另一方面，不一致的設計將產生更多的認知負荷/腦力勞動，并導致困惑和挫折。這就相當于在用戶的路徑上設置障礙。讓用戶的心流嘎然而止!
做好一致性可以增強“審美凝聚力”。“我們都知道，當我們使用應用時，應用的導航位置如果經常變化，或者像“加入購物車”這樣的主按鈕在不同屏幕上從紅色變成綠色，這是多么令人沮喪。
除了視覺一致性和易用性，品牌一致性在產品設計中也發揮著重要作用。如果沒有一致的元素呈現，如排版、配色和圖案，高質量的品牌體驗將無法傳遞。
在用戶體驗方面，一致性意味著在設計中使用相似的UI元素來完成相似的任務，即在整個產品中擁有相似的功能和行為。因為可用性是一種評估用戶界面易用性的質量屬性，所以一致性對用戶體驗的可用性有很大的貢獻。
一致性是通過使用相同的配色、排版、間距、模式和交互來實現的。
色彩心理學也不容忽視。色彩承載著意義和情感，可以向人的潛意識傳遞信息。在品牌方面，人們對顏色做了大量的心理學研究，因為在人們與品牌進行任何互動之前，顏色會讓他們產生一種本能的反應。例如，藍色通常被認為是可靠的、安全的和平靜的，想想銀行；而紅色是刺激的，被認為是增加人們的心率，想想飲料包裝。
一個極簡主義的暗色主題設計傳達了一個特定的品牌氣質，并使用了少量的顏色。
排版在設計中扮演著非常重要的角色，它的重要性再怎么強調都不為過。在構圖中，字體樣式對人們感知設計的影響比任何其他元素都大，可能除了顏色。
因為我們的大腦以閃電般的速度運轉，一個字體會對一個設計產生影響，以至于它可能在不到一眨眼的時間內改變用戶的印象。與顏色一樣，字體甚至會影響我們的情緒，資深設計師可以通過字體傳達情緒和風格。通過選擇合適的字體，我們可以傳達出穩定、優雅、舒適、可靠、有力等信息。
排版層次結構可以快速建立視覺層次結構，并且通常在其中扮演重要角色。因此，在設計中經常使用不同的字體和字體大小來表示層次結構，例如標題、副標題、正文和引用。
“除了確保文本清晰易讀，排版可以幫助你理清信息層次，傳達重要內容，并表達你的品牌?！?——蘋果的人機界面指南
蘭博基尼的網站巧妙地使用了排版風格和比例來賦予其設計力量
Claude Debussy 曾說過，“音樂是音符之間的空間“。同樣的觀點也適用于設計，元素之間的負空間給予設計強調、平衡和統一。
元素周圍適當的負空間將焦點集中在元素本身。它強調了內容，并提供了必要的喘息空間，以確保布局不顯得雜亂。沒有了呼吸空間，人腦就不太可能掃描興趣點，更容易感到困惑。
蘋果官網提供了一個利用負空間創造強烈焦點的杰出例子。
人們已經開始期待所有平臺和設備上的優化、無阻礙的用戶體驗。理解設計原則及其交互方式對所有設計師來說都是至關重要的。使用專業技能設計它們是創造具有視覺吸引力的功能性設計的關鍵。我們不要忘記，美學的完整性會嚴重影響用戶體驗。
基于原則的設計是設計師在感覺有點迷失或用盡創意時可以依賴的黃金標準方法。在沒有理解和實現設計原則的情況下，也可能實現可接受的設計。然而，這可能需要大量的嘗試和錯誤才能創造出看起來不錯的內容，并創造出最佳的用戶體驗。
產品的美學質量與它的實用性密不可分，因為我們每天使用的產品影響著我們和我們的幸福?！钡挥芯闹谱鞯奈锲凡艜利悺！?Dieter Rams(迪特爾·拉姆斯)
當我們不關注由設計原則驅動的設計質量時，我們可能會忽視品牌質量及其所代表的一切。當某些東西設計不好時，品牌就會受到傷害，產品也會受到影響。這就是為什么偉大的設計師在他們的工作中極其嚴謹， 他們知道“你永遠不會有第二次機會給人留下良好的第一印象?！?/strong>
設計的細節成就了設計本身?！?查爾斯 伊姆斯（Charles Eames）
作者：彩云Sky 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
卡片是一個UI組件，包含了某一個內容的信息和操作?？ㄆ梢园鞣N元素，但它們都應該屬于同一個主題。
這樣做的目的是為了避免冗長的文字，并呈現更多的內容。即使從設計的角度來看，用戶可能不熟悉卡片的概念，但他們馬上就知道如何使用它們，因為它們與實體卡片是一樣的。（彩云注：這個就是用戶心理學中隱喻的運用）
卡片之所以流行，是因為它們能更好的把控內容。卡片是模塊化的，所以不同的內容可以堆疊在一起，而不需要注意它們的差異。
卡片通過強制內容適應卡片邊界和卡片布局上的限制來聚焦內容。設計師喜歡通過卡片混排大量內容，而無需擔心設計會變得雜亂無章。
卡片可以將內容分解成易于理解的小塊，以便用戶與之互動。通過給內容一個容器，卡片向用戶表明內容是真實和感性的。
卡片 UI 設計流行的原因還有很多：
直觀：卡片在界面中看起來與現實世界中的卡片相同，它們對用戶來說似乎很常見。在卡片成為移動和網絡應用中的流行元素之前，它們在現實生活中無處不在：名片、棒球卡、便簽?？ㄆ砹艘环N有益的視覺類比，它允許我們的大腦直觀地將卡片與其所代表的內容聯系起來，就像在現實生活中一樣。
易于閱讀：卡片不占用太多空間，并敦促設計師優先考慮其內容。不同的是，每張卡片都變成了易于閱讀的內容?？ㄆ層脩舾菀渍业剿麄兏信d趣的內容。
有吸引力且對用戶更友好：基于卡片的設計通常非常依賴視覺效果（尤其是圖片）；就信息架構而言，視覺層次會更加清晰。使用圖片有助于使基于卡片的設計比不在卡片中排列的相同內容對用戶更具吸引力。
有利于響應式設計：卡片是矩形的，可以平滑地調整大小，以適應不同屏幕的水平和垂直正面，這意味著用戶可以在所有設備上獲得統一的體驗。
便于分享：卡片可以鼓勵用戶在社交媒體上分享內容，因為它允許用戶只分享特定的內容，而不是整個頁面。
什么時候應用卡片設計？
這通常是當你有:
基于搜索的界面: 卡片能通過模塊的內容快速顯示合適的內容，這使得用戶可以深入了解自己的興趣?；诳ㄆ脑O計是一種非常適合呈現這類內容的方式。
信息瀏覽：當用戶瀏覽信息時，卡片的兼容性更好。
任務管理：當可以將流程中的單個任務作為卡片進行說明時， 可以輕松組織卡片以獲取任務列表。任務管理應用在使用卡片式界面為用戶創建儀表板方面做得很好，其中每張卡片代表一個單獨的任務。
類似項目：卡片最適合于異構項目的集合（當并非所有內容都是相同的基本類型時）。
可視化分析: 儀表板通常在同一頁上同時顯示各種內容樣本。在這種情況下，卡片類比可以幫助在不同物品之間創造出更明顯的差異，其中每張卡片可以適應不同的角色。
卡片的布局可以不同，以支持它們包含的內容類別。下面的組件通?？梢栽诙喾N卡片樣式中找到。
(1)富媒體: 卡片可以包含縮略圖，以顯示圖片，插圖，頭像，Logo，圖標或圖形。
(2) 標題: 標題文本可以包含相冊或文章的名稱或標題。
(3) 描述: 支持文本，如文章摘要或簡短的描述。
(4) 行動按鈕: 卡片可以包含用于操作的按鈕。
(5) 副標題: 副標題文本可以包含詳細介紹，如文章的署名或標記的位置。
(6) 圖標: 卡片可以包含操作圖標。
有一些小的技巧可以快速提高卡片設計細節。
1. 使用相關主題的圖片
圖片是卡片設計的主角，你需要一個高級的圖片來吸引用戶對每張卡片的注意。不僅是圖像，卡片還可以包含插圖、帶有淺色背景框的圖標或任何其他類型的富媒體，但需要與內容主題相關。
2. 增加視覺層次
卡片內的層次結構有助于引導用戶對重要信息的閱讀。將主要內容放在卡片的頂部，并使用排版來強化主要內容。使用空白和對比來分隔需要更多視覺分隔的內容區域。（彩云注：視覺層級對于信息表達至關重要?。?nbsp;
3. 限制內容長度
一張卡片應該只包含重要的信息，并提出一個相關的觀點，以獲取額外的細節，而不是完整的細節本身。當我們試圖在一張卡片中放入太多內容時，卡片可能會變得很冗長，并失去與卡片類比的實際聯系，因為它不再像一張卡片了。
4. 避免嵌入鏈接
不要包含內聯鏈接，卡片應該自己鏈接。嵌入文字鏈接會讓用戶誤操作。
5. 區分操作主次
包含不同操作的卡片應該在視覺上形成對比。在下面的例子中，我通過使用一種較輕的色調而不是主要的按鈕風格來降低后續操作的視覺強度。
6. 去掉分割線
對于新手設計師來說，用分割線來區分內容是一種常見的方式，以此定義不同的組。這些邊框會造成不必要的視覺干擾，從而影響內容。
APP中的卡片并不是純粹的擬物概念，但通常情況下，使用一致的類比和物理原理能幫助用戶理解界面并分析內容中的視覺層次。在卡片的情況下，你可以做幾件事:
1. 使用圓角
在形態上與真實世界的卡片進行視覺對比。圓角更有效，因為它們讓我們的眼睛容易跟隨視覺動線，“因為它更適合頭部和眼睛的自然運動”。
2. 增加一個輕微的外邊框或者投影
增加一條淡淡的描邊框或者增加一個淡淡的投影都是很好的做法。陰影在界面中創造了一個層次，這有助于我們區分UI元素。
然而，在設計中添加陰影并不像聽起來那么簡單。有時候設計師會過分強化投影效果，讓原本看起來不錯的設計看起來很廉價。避免使用純黑色的陰影。
3.注意字體和留白
重要的是要讓每一張卡片都能被人看到、閱讀和理解。在每個塊周圍添加大量的空白，讓用戶有時間處理并進行視覺重置，有精力看完一張卡再到下一張。
選擇簡單和基本的字體，因為基本的排版最大限度地提高了可讀性，并有助于瀏覽。
讓我們看看一些真實項目中的卡片設計案例：
信息流中的卡片設計
保持信息流卡片簡單是很重要的。它們應該有一個一致的、重復的結構，但是使用不同的圖片和字體大小來代表卡片中最重要的和最不重要的元素，以使讀卡片的人更容易理解它們。
由Diseno Constructivo和Webpixels設計
他們突出特色圖片和標題作為最突出的元素，這能幫助用戶決定文章或發布的內容是否適合他們。
電商卡片設計
產品卡片是一個很重要的東西，它可以幫助你將訪問者轉化為客戶。一張優秀的產品卡片應該能夠吸引人們的注意，激發人們獲得產品的欲望，激勵人們購買，并在搜索結果中得到高效推廣。
由Webpixels設計
產品的名稱應該放在最顯眼的地方，這樣參觀者就會立刻明白他來對地方了。一個好的配圖能告訴顧客勝過千言萬語，所以你需要一個高質量的產品配圖來設計完美的產品卡片。
如果產品有特價，不僅要在價格欄中注明促銷價格，還要注明常規價格，以及客戶可以節省多少錢。
個人中心卡片設計
簡介卡已經成為一個應用或網站中的功能模板。隨著個人品牌變得比以往任何時候都重要，卡片設計在這里也能發揮重要作用。
由Neelesh Chaudhary設計
就像每一張卡片一樣，配置文件卡片也是一個UI組件，它包含了對它所代表的內容至關重要的信息。為了達到你的目標，你要向其他人推銷你自己。
確保只包括必要的信息(例如，照片，名字，職業)，讓你的“關于”頁面有剩余的細節來完善你的個人資料。
儀表盤卡片設計
儀表板的設計可以有很大的不同。但是所有的儀表盤都是用卡片做的。根據儀表板的類型，每張卡片可能包括概要信息、通知、快速鏈接或導航設計元素、關鍵數據、圖表和數據表。確保你為每個元素使用了正確類型的卡片。
由Simmmple設計
儀表盤卡設計允許用戶決定他們想要關注哪些數據。易于理解的UI，允許用戶精確地控制哪些數據需要在儀表板的前端做好。
只包括最相關的信息，為用戶使用方便。當你的數據集在一起看更容易理解時，找到在一張卡片上顯示它們的方法。但是要小心，不要讓用戶感到困惑。
日常計劃卡片設計
看板任務卡似乎是一件非常簡單的事情——拿一張便簽，寫下你需要做什么，然后把它貼在墻上。這些卡片必須包含需要行動的單位數量。它們還可能包含各種各樣的其他信息，清楚地傳達了必須做什么。
由Neelesh Chaudhary設計
卡片上包含的信息包括任務的名稱和重要的細節，如任務的類型和誰擁有它?？窗蹇ǚ旁跔顟B類別下。最基本的狀態類別是“計劃要做”、“正在進行中”和“完成”，但是狀態可能因項目而異。
卡片結構最適用于添加或刪除任務這樣的小改變，而不是改變像你的總體目標這樣的大想法。
有幾種方法可以使卡片設計更加有效。通過最初定義和觀察卡片，我們可以更好地了解跨行業的這種設計模式。這也讓我們能夠推測用戶希望在這些卡片上采取什么行動。卡片在提供許多不同種類內容摘要的環境中尤其有效，而不是簡單地作為內容列表的現代替代品。
演出項目可分為【有座項目】和【無座項目】兩種類型，有座項目又可分為【選座售賣項目】和【非選座售賣項目】。
大部分話劇、音樂劇、舞蹈芭蕾項目都是選座售賣項目?？蛻魜淼截堁劭蛻舳酥羞x擇想看的項目，選定座位并下單，最后檢票入場觀演，完成閉環。其中選座體驗是客戶轉化重要的一環，影響客戶決策。
為了提升用戶體驗，提升數據轉化，我們對貓眼目前選座體驗進行走查，探討問題原因，找到產品痛點和機會點，為產品優化做準備。
貓眼客戶端選座體驗問題：
1.自營項目無法直接選座，無論場館大小必須先選擇區域再選擇座位
如下圖，無法選擇圖中的座位，點擊座位跳轉到對應區域的座位圖，需要再次點擊選擇。
2.無法根據場館座位分布全局選座
如下圖，選擇A區后僅能查看到A區座位，無法看到其他區域座位和舞臺。
3.場館分區圖風格樣式不統一
如下圖，繪制精細程度不一，風格樣式不一。
這些問題產生的原因：
問題1：產品結構規劃上將場館分為區域和座位兩個層級，未根據場館規模分級別展示，例如大型場館先選區域再選擇座位，小型場館直接選擇座位。
問題2：B端后臺性能問題阻礙了客戶端全局查看選座。
問題3：區域圖依靠B端后臺上傳，沒有統一的繪制標準約束，故客戶端的樣式不統一。
通過以上原因可以看出客戶端選座體驗很大程度上取決于B端后臺的配置，所以要從B端配置入手，從根源上解決體驗問題。
本次研究目的
研究對象
我們通過產品研究和用戶訪談形式，結合業務需求，對產品功能進行審視走查，希望能挖掘出產品痛點和機會點。
B端場館圖繪制及座位配置的主要用戶是運維人員，所以我們對運維人員進行了深度訪談，主要目的：
1.了解用戶使用貓眼B端的操作行為和痛點；
2.觀察用戶使用相似產品【城市售票網B端系統】的行為和痛點。
演出項目座位配置業務流程
商務與場館洽談好合作后，會提交添加/修改場館座位模板的郵件給到運維人員，由運維人員在B端后臺中進行創建和修改。商務可在B端后臺創建項目關聯到對應場館配置票價等。
在這條業務流程中，涉及到B端選座配置的部分：
1.創建/維護場館分區模板；
2.創建有座項目、關聯對應場館、配置票價、配置預留。
一、創建/維護場館分區模板
創建場館分區模板主要分為兩個步驟：
創建場館分區：包含兩個主要頁面和一個彈窗，承載創建分區圖和設置分區信息功能。創建分區支持上傳底圖、SVG圖，編輯器繪制。
創建分區座位：包含一個主要彈窗，承載畫座位、座位編號、移動座位、統計座位等功能。
1. 創建分區體驗痛點
1.1 使用SVG編輯器繪制場館分區圖操作不便
嵌入式畫圖工具僅能繪制較為簡單的圖形，門檻高且繪制成果不理想，對于復雜場館無法滿足繪制需求，無法與演出業務很好的結合。
1.2 運維使用第三方工具，繪制風格差異大
由于畫圖工具繪制不理想，運維人員自學AI、Coreldraw等繪制后上傳到后臺系統。人和工具的不同導致座位圖風格差異較大。
1.3 項目變動維護不便
項目調整需通過第三方繪制工具修改或重新繪制導出后上傳到后臺，修改流程長且重復操作過多。
2. 創建座位體驗痛點
2.1 畫座方式不支持繪制傾斜、曲度、錯位的座位
固定的座位方格坐標對坐標，自由度差，無法自定義座位角度和排布形式。無法精準還原場館座位分布。
2.2 不支持自定義舞臺方向和位置
舞臺位置方向固定，無法滿足多個舞臺、座位包圍舞臺配置。
2.3 繪制座位交互操作單一
僅支持鼠標在方格內拖動繪制，效率低，增刪改操作麻煩。
2.4 交互流程不通順
編號、移動等功能先切換功能再選擇座位的順序不符合用戶行為，符合用戶操作的順序是先選擇座位再點擊對應操作配置。
座位編號、移動、統計功能不適合tab形式，交互組件使用不當。
2.5 交互界面表達有誤
座位編號分為排編號和列編號兩種方式，選擇一種并填寫配置參數。系統界面中兩種方式都有*（必填）容易引起誤導。
2.6 刪除編號語義不明確
選擇座位后點擊刪除編號按鈕后座位和編號都被刪除，按鈕語義與實際意思不符。并且誤刪除座位還會增加重新繪制工作量。
3. 產品結構體驗痛點
3.1 分區形狀與座位分布關聯度低
分區的大致形狀應由分區座位的排布所決定，而產品中分區形狀與分區座位形狀并無直接的關聯，導致用戶在選座時產生較大的割裂感。
3.2 不支持直接選座
為了讓客戶更直觀的掌握場館座位分布，運維人員繪制時會盡可能還原，但客戶選擇時還要進入分區后才能選擇座位，且僅能查看到一個分區的座位，不能全局選座。
4. 框架和容器動線體驗痛點
4.1 分區配置位置分散，操作效率低
分區繪制與信息配置分散在兩個頁面和1個彈窗中，頁面布局分散，動線復雜多變。
4.2 座位配置比重弱
座位配置權重高且操作復雜，不適合使用彈窗承載，位置層級太深。
5. 產品與業務關聯體驗痛點
5.1 座位配置功能單一，缺少輔助操作
繪制座位圖是一項龐大的工程，系統內大型場館的座位達到4-9萬個，例如鳥巢、梅賽德斯奔馳文化中心。繪制大型場館需要花費3-4天時間，座位分布復雜的場館需要花費更長時間。目前系統僅有單一拖動方格的繪制方式，缺少提升繪制效率的輔助工具，例如撤回、復制座位、多種對齊/翻轉方式等。
6. 體驗優點
6.1 繪制場館分區圖時支持導入SVG
方便繪制大型復雜的場館。
6.2 系統穩定
復雜的場館繪制時間長且操作復雜，系統未產生過崩潰或其他終止情況。
二、配置票價和預留
配置票價和預留主要分為三個步驟：
選定場館分區：確認場館并選擇場館內分區
配置票價：選擇座位配置票價。
配置預留：選擇座位配置預留。
1. 框架和容器動線體驗痛點
1.1 頁面結構相似，內容重復
票價和預留頁面重復度高，都包含分區預覽、選座情況、分區座位圖模塊。
2. 交互細節體驗痛點
2.1 同樣功能不同頁面交互和視覺不一致
兩個頁面都包含分區預覽模塊，但交互視覺差別較大，交互視覺操作不統一。
2.2 內容表達不清晰
設置預留操作中，“對象”文案語義表述不清晰、“貓眼”和“釋放”不屬于同一層級且語義表達不清楚；新增預留標記按鈕位置有誤，應該放置在自定義預留下方，而不是與“對象“平級。
2.3 設置預留后無法查看座位編號
設置預留后，座位編號被預留標簽替換，從而看不到座位編號，影響識別。
3. 產品功能體驗痛點
3.1 不支持導出票務方案圖
在項目洽談后、正式開票前，報批時需要提供給主辦和公安票務方案圖，供主辦審核，目前需要運維自行制作不支持導出。
一、維護場館分區模板
1. 產品結構
與貓眼B端后臺相同，城市售票網在繪制場館分區圖時也是分為兩個步驟，先配置區域再配置座位。
區域配置：支持上傳底圖并通過繪制工具畫出區域形狀，繪制完成后可直接配置區域信息。
座位配置：通過繪座工具畫出區域座位，選座工具和配置工具進行輔助繪制。
2. 產品布局
2.1 區域與座位配置結構清晰，頁面布局規整；
2.2 區域和座位配置兩步銜接緊密，操作動線流暢。
3. 區域配置功能分析
優點：
1）支持上傳底圖及調整比例；
2）繪制工具易用性較高；
3）繪制風格統一；
4）分區配置動線流暢。
痛點：
1）不支持上傳SVG圖；
2）繪制POH(區域)的工具少，僅鋼筆工具；
根據產品定義，繪制座位分區使用區域工具，繪制舞臺、樓梯、出入口等場館輔助設施使用形狀工具。根據業務實際情況，區域繪制為主，形狀繪制為輔。然而區域繪制工具僅有一個鋼筆工具，Shape(形狀)繪制工具有三個，主次顛倒。
3）區域和形狀繪制工具容易混淆。
左側工具欄中兩類繪制工具未明確分開，非熟練人員操作時會誤用兩種工具。
4. 座位配置功能分析
4.1 創建座位
優點：
1）工具繪制靈活自由；
2）支持旋轉座位。
痛點：
1）需要熟悉繪制工具交互操作，有一定的上手門檻；
2）單個座位工具、路徑繪制工具在繪制結束需要鼠標雙擊，在無指導的情況下用戶很難發現。交互操作缺少說明文字或圖片解釋。
4.2 選擇座位
優點：
1）多種輔助工具提升繪制效率；
2）支持區域內復制黏貼座位。
痛點：
1）僅能在區域內復制黏貼座位，不具備區域之間座位復制或復制區域的能力。
對稱布局是場館中常見的一種布局形式，繪制好一個區域座位后復制并翻轉就可以快速畫完另一個區域。
如下圖所示，當前在G區域編輯座位，雖然可以復制G區的座位黏貼，但僅在G區能看到，無法復制到C區圖層內。
2）不支持設置弧度座位。
如下圖所示場館無法在系統內完全還原。
4.3 座位編號
優點：
1）編號方式支持字母、數字、字母數字結合形式，符合多種場景需求。
痛點：
1）編號受限于繪制時的分組；
繪制座位需要根據座位編號邏輯繪制分組，不可以一次性全部繪制完后分開編號。
若第一次繪制有遺漏座位，第二次補充后，無法整體編號。
2）無法取消編號。
編號僅能修改，不能刪除
5. 產品視圖分析
5.1 編輯座位視角
缺點：
1）僅支持在預覽功能時查看創建的全部座位。繪制某一區域座位時無法看到其他區域座位，缺少全局參考。
二、配置票價和預留
1. 產品布局
優點：
1）票檔和預留配置與場館座位配置結構相似，布局和操作統一，易于理解。
2）票價和防漲配置在一個頁面內完成，簡單清晰。
2. 票價及預留配置功能分析
痛點：
1）設置預留后無法查看到座位編號
如下圖中A標記的座位是預留座位，無法查看座位編號
2）預留模式下，選中已設置票檔、未設置預留的座位時，無法區分票檔
如下圖選中狀態下1-6號座位無法區分票檔A/B
3. 總結
城市售票網B端系統的在繪制場館圖上靈活度自由度高，界面布局規整，動線清晰，產品功能適用于多元復雜場景，不過需要用戶具有一定的繪圖基礎或熟悉成本。
通過以上分析，我們總結出貓眼B端系統后續的優化方向，框架和容器動線上需要提高用戶瀏覽和操作效率，頁面進行歸類整合，布局樣式統一；繪制環境上需要為用戶提供靈活自由的區域座位繪制工具，配備高效的選座和輔助工具。
一、整體布局
1）打破現有的分區與座位不平衡布局模式，梳理動線
二、功能
1. 場館分區設置
1）提供與業務關聯度高的、易用的分區繪制工具；
2）支持多種類型分區，例如舞臺區、座位區、舞池區等；
3）提高分區與座位繪制還原度；
4）確立場館規模分級，客戶端根據級別展示座位層級或直接進入分區層級。
2. 場館座位設置
1）提供易用度高的座位繪制工具或座位添加方式；
2）支持靈活選座，靈活編號；
3）支持調整座位角度、弧度、間距參數；
4）提供提升繪制效率的輔助工具；
5）支持跨區復制座位或復制區域功能；
6）提升座位配置頁面權重，完善座位配置界面。
3. 配置票價和預留
1）整合票價和預留頁面；
2）修正界面交互視覺問題；
3）支持設置預留后查看座位號；
4）增加導出票務方案圖功能。
這次研究我們從業務、產品功能、用戶三方面對選座配座模塊進行走查，抓住產品痛點，為后續改造指明了方向；對同類型產品的選座配座解決方案進行分析，幫助我們獲得新思路。
隨著沉浸式劇場、互動型劇場等新型演出的發展，場館座位布局不再是單一的座位正對舞臺，多個舞臺、座位多角度圍繞舞臺的布局形式不斷出現，今后還會有更多新型座位布局出現。設計適用于多種業務場景、頁面動線清晰、繪制功能好用的后臺工具不僅能提升運維人員的操作效率，也能提升客戶端用戶選座體驗和購票轉化，從而提升產品的市場競爭力。隨著演出行業的逐步復蘇，大量選座項目上線，改造選座模塊是我們工作重中之重。
藍藍設計的小編 http://www.syprn.cn