作為全球最火爆的體育賽事，世界杯由于其獨有的稀缺性，被外界譽為四年一次的足球盛宴。根據國際足聯主席因凡蒂諾預測，2022年的卡塔爾世界杯賽事將會吸引到全球超過五十億人觀看，這一人數占全球總人數的比重超過60%。
以往球迷們觀看世界杯，更多是通過電視或者央視頻、優酷這種傳統的互聯網視頻平臺，而在2022年這個冬天，抖音花費10億巨資，成為了國內首個獲得世界杯直播版權的短視頻平臺。作為擁有6億日活的抖音，將會如何跨界設計世界杯專題，讓億萬球迷能在抖音享受四年一次的足球盛宴，本期設計大偵探，就來全面拆解抖音世界杯專題。
一、欄目入口
抖音世界杯的入口在抖音頭部一級導航欄最左邊，和周邊、關注、商城以及推薦并列。世界杯的欄目首頁從上至下主要分為5個部分，分別是輪播（當日熱門賽事以及活動）、金剛區（包含賽程、積分榜、有獎預測和我的主隊入口）、比賽直播（當日賽事）、名嘴聊球（簽約足球大咖）、賽事熱點（熱點頭條資訊）、熱門球星（入駐足球巨星）、世界杯好物（周邊商城和抖音生活服務）、重磅熱播（抖音自制節目）、大家都在拍（平臺用戶自創視頻）和視頻信息流（世界杯專題相關視頻）。
二、內容策劃
抖音在內容策劃方面，幾乎把前央視解說團隊都邀請過來了，比如黃健翔、段暄、劉建宏這些家喻戶曉的的足球主持人，都在抖音單獨負責至少一款足球綜藝欄目。除了解說團隊，抖音還邀請了眾多跨界娛樂綜藝大咖，為球迷一口氣送上8個原創足球綜藝節目。從這個版塊可以看出，抖音對此次世界杯的重視度之高，就像卡塔爾為了舉辦世界杯投資2200億美元一樣，劣勢可以用金錢彌補。
1. 內容專題
1.1 觀賽指南
「觀賽指南」是指在一場比賽開打之前，各方媒體對這場比賽進行的賽事分析和預測。足球這項運動，由于充滿了競技性，一場焦點比賽，從賽前到比賽，再到比賽后，都充滿了無數話題。而觀賽指南，可以為球迷提供完整的比賽情報和指南，為比賽做預熱。
1.1.1 分組解析
「分組解析」是針對世界杯的8個小組（世界杯有32支參賽球隊，分為8個小組，每個小組4支球隊，前兩名可以晉級到淘汰賽）進行出線形勢分析。作為四年舉辦一次的比賽，對于每支球隊來說，都是非常寶貴的機會，所以關于小組的出線分析也往往是世界杯的熱門話題之一。從內容設計看，抖音的分組解析包含了專家預測（名嘴大咖）、小組賽程、歷史數據（歷史對戰記錄）、熱門球員（小組熱門球星）和熱門動態（相關的足球資訊）五個內容。
1.1.2 賽程解讀
「賽程解讀」就是針對單場比賽進行解讀，包含比賽前瞻（專業的足球分析）、專家點評（世界杯專家團，含金量高）、網友熱議（精選網友的高質量分析）、近5場戰績、球隊名單、球員PK（核心球員）、積分榜以及相關的最新足球資訊。從這個欄目的內容策劃看，由于缺少足彩競彩和有深度的內容，顯得中規中矩，稍顯嚴謹，欠缺互動。
1.2 比賽日報
「比賽日報」就是根據每天結束的比賽生成當天所有比賽的戰報，這個頁面包含了直播回放、圖文戰報、視頻集錦、賽況詳情、技術統計和積分榜等內容，球迷也可以切換不同的比賽查看當場比賽詳細的戰報。
1.2.1 直播回放
「直播回放」對于體育賽事來說非常重要，比如像深夜場的比賽，大部分球迷都很難熬夜觀看，這個時候只能通過直播回放來觀看比賽。抖音的「直播回放」提供了全場錄播回放、全場集錦（分長集錦和短集錦）、球星集錦和精彩時刻集錦，可以滿足不同用戶的觀看需求。
1.3 熱議話題
當一場比賽結束以后，話題討論的熱度將會達到最高值，比如阿根廷輸給沙特的比賽，全網球迷都在心疼梅西。抖音在「熱議話題」的內容設計上，不僅有獨立的圖文專題頁還有白巖松的「白說世界杯」短視頻欄目，給球迷帶來全方位的內容解讀。
2. 視頻節目
2.1 DOU來世界杯
「DOU來世界杯」是抖音官方自制的視頻節目，這個節目合計29期，每天更新1期，內容非常豐富，包含比賽復盤、每日看點、球星球隊故事和賽事預測等。從欄目定位看，這個欄目直接對標曾經央視體育最知名的《天下足球》欄目，更是邀請了主持多年《天下足球》的主持人段暄親自負責，這不僅可以確保內容質量，還可以幫助抖音贏取眾多80、90后球迷的好感（國內80%的80、90后球迷都是看著《天下足球》長大的），既賣專業，也賣情懷，一舉兩得。
2.2 宏哥侃球
「宏哥侃球」是資深體育解說員劉建宏獨家打造的足球直播綜藝，合計12期。劉建宏和段暄一樣，是央視體育另一個王牌節目《足球之夜》的制片人和主持人，甚至是第一位獲得“金話筒獎”的體育節目主持人。從內容定位看，這個欄目主要以劉建宏通過邀約足球名宿和名人明星聊天的形式，為球迷帶來不同角度的比賽解讀和話題討論。從嘉賓陣容看，不僅邀請了李明、徐亮、徐云龍這些足球大咖，還邀請了蘇醒、姜昆、樊登、大能、隔壁老樊等跨界名人，可謂群星熠熠。
2.3 黃健翔談
「黃健翔談」是前央視主持人黃健翔的個人脫口秀節目，合計24期。從內容定位看，這個欄目主要是黃健翔針對每日比賽進行看點分析，講述隊伍、球員之間的淵源與故事，專業性較強，差異化低。
2.4 依然范志毅
「依然范志毅」是前國足名宿范志毅打造的直播節目。從內容定位看，這個欄目集合了脫口秀、電競PK、國際球星挑戰等娛樂內容，其次還會邀請02年世界杯國足的眾多足球大咖一起聊球。范志毅作為前國足名宿，不僅知名度高，近年來在社交媒體平臺也以獨特的“范式辣評”成為了眾多網友崇拜的偶像，話題熱度非常高。
2.5 懂球大會
「懂球大會」是以段暄、黃健翔和劉建宏為常駐嘉賓，搭配各路懂球大咖賽前或賽后連線的足球直播節目。從內容定位看，這個節目主打前央視解說鐵三角的賣點，再邀請其他足球嘉賓圍繞每期的熱門話題以直播火熱開“吵”的形式為球迷們打造一款直播時代的另類足球節目。
2.6 黃家足球班
「黃家足球班」 是黃健翔聯手德云社打造的直播節目，合計12期。從內容定位看，這個節目把足球的專業性稀釋，加入了相聲的元素，從而拓寬用戶人群，讓大眾都能看得懂，看得進去，感受到足球的樂趣。
2.7 大咖侃球
「大咖侃球」由抖音官方出品。從內容定位看，這個節目主要以邀請體育、文化、財經、商業等領域的名人大咖，圍繞世界杯開展泛人文社會熱點話題討的論，旨在打造一個專業又具有趣味性、互動性的世界杯抖音脫口秀。不過這個節目話題寬度太廣，目標用戶不精準。
2.8 Hi！足球少年
「Hi！足球少年」是世界杯官方贊助商海信獨家打造的一款足球少年選秀節目，通過節目選拔足球熱忱最突出的4名少年奔赴卡塔爾。這個節目邀請了李明、米盧等國足退役名將，還有柳巖、梁漢文這些娛樂明星，從嘉賓陣容看，這個節目以娛樂選秀為主，目前8期節目已全部更新結束。
三、比賽數據
歷時29天的世界杯，將會進行64場比賽，最終決出冠軍、MVP和金靴獎等。隨著互聯網泛娛樂的發展，相比過往大家主要通過電視觀看比賽這樣靜態的形式，現在的足球比賽不僅擁有豐富的直播形式，而且每個平臺都有自己獨特的看球文化。
1. 直播間
抖音的比賽直播間，功能非常豐富，主要包含六個內容，分別是直播、聊天、陣容、賽況、看點和預測。
①「直播」就像視頻彈幕一樣，大家可以暢所欲言的一邊看球一邊聊天。在底部的聊天窗口，點擊「分享」后，不僅可以保存本場比賽即時生成的精彩瞬間，還能邀請好友一起觀看比賽直播，互動非常強。
②「聊天」這個功能，充分利用了抖音的社交屬性，通過邀請好有，可以像建立群組一樣快速創建一個直播聊天群，非常便捷。這個功能就像一個VIP包廂，為用戶提供了一個相對私密的空間，滿足不同用戶的需求。
③「陣容」是指當場比賽的出場人員統計，包含首發陣容、球員統計和替補球員等信息，點擊球員頭像以后，可查看球員當場比賽的數據，包含進球、射門、傳球成功率等，非常全面。
④「賽況」是指當場比賽的詳細戰況，包含各種技術統計，比如控球率、射門數、傳球成功率等。
⑤「看點」就是把一場比賽的精彩時刻快速生成GIF，不僅可以作為當場比賽的賽況回放，也降低了用戶傳播的行動成本，吸引用戶分享傳播。
⑥「預測」就是競彩，球迷可以通過金幣預測當場比賽的勝平負、兩隊總進球數以及其他話題。
1.1 播放器
「播放器」的功能非常豐富，除了彈幕、倍速、視頻畫質和電視投屏這樣的常見功能，抖音還支持多種類型的解說和視角方式。比如同一場比賽可以切換不同的主持人（央視主持人、退役運動員還有粵語主持），還支持球星、無障礙字幕、現場原聲、戰術機位、場館全景等四種視角方式，觀看體驗非常豐富。
2. 數據
作為一項體育運動，比賽數據的統計分析至關重要。球迷需要查詢世界杯的詳細賽程、積分榜、射手榜、球隊和球員的詳細數據。
2.1 賽程
「賽程」主要為球迷提供世界杯的詳細比賽賽程，用戶可以直接預約比賽直播。當球迷預約后，抖音會一鍵生成比賽海報吸引用戶傳播，設計得非常巧妙。其次抖音的設計團隊非常用心，相比其他產品的「賽程」欄目，他們會用一句簡短的話來描述每場比賽的結果或前瞻，讓「賽程」這個冰冷的欄目加入了溫度。
2.2 積分榜
「積分榜」主要為球迷們提供8個小組的積分排行詳細，包含勝平負場次、進失球數和小組積分。
2.3 晉級圖
「晉級圖」主要為淘汰賽服務，當小組賽結束以后，每個小組的前兩名會進入淘汰賽，球迷可以通過這個圖俯瞰世界杯的晉級明細路徑。
2.4 射手榜
「射手榜」主要針對球員個人，統計的數據非常全面，包含進球、助攻、射正、關鍵傳球、紅牌、黃牌等數據。
2.4.1 球員主頁
「球員主頁」就是足球運動員的詳情落地頁，主要包含六個部分，分別是基礎資料（姓名、年齡、身高、體重、位置、身價、效力俱樂部等）、精彩集錦、球員單場表現、球員累計數據、球員賽程和球員百科。
2.5 球隊榜
「球隊榜」和「射手榜」一樣，包含進球、助攻、射正、關鍵傳球、紅牌、黃牌等數據。
2.5.1 球隊主頁
「球隊主頁」就是參賽球隊的詳情落地頁，主要包含六個部分，分別是基礎資料（世界排名、總身價、平均年齡、歷屆最佳成績等）、精彩集錦、球隊單場表現、球隊累計數據、球隊賽程、熱門球星、球隊陣容、歷史數據和球隊百科。
3、互動
從2014年開始，世界杯就成了一個全民狂歡的盛宴，可謂全民參與，全民娛樂。由于受政策限制，抖音沒有足彩版塊，而是通過虛擬金幣的形式設計了有獎預測和世界杯樂園、足球答人等游戲。其次為了鼓勵用戶參與到世界杯的盛宴中，抖音還設計了一套世界杯特效，提升用戶的參與度。
3.1 有獎預測
「有獎預測」其實就是足球競彩。足球競彩作為支撐足球運動發展的重要支柱，也是全民世界杯的主要動力之一。由于國家政策等原因，抖音使用了虛擬的金球幣用來作為競彩的籌碼，增加娛樂性。
①「有獎預測」的頁面設計比較簡單，頭部為用戶的錢包（金幣和紅包數量），主視覺為當前比賽的對陣雙方，右上角是活動規則和預測記錄，右下角是賺金錢幣和預測榜。預測的內容主要是比賽的勝平負、總進球數以及其他根據當前比賽設計的競彩內容，比如梅西會不會進球，比賽會不會出現頭球等。
②整個預測頁面的內容，相對而言比較簡單，主要以提升用戶參與度和用戶拉新為目的。當用戶確認預測后，抖音設計了一個用戶拉新的功能，只要邀請好友助力就可以獲得10萬金幣，如果是一個新用戶，則可以獲得3倍獎勵。
3.1.1 錢包
「錢包」的內容主要分為三塊，頭部是數據板，包含金球幣數量、現金金額（金球幣可以兌換成現金，提現到自己的銀行卡）、獎品數量、優惠券數量和抖音成就（類似勛章）；中間是「金球幣抽獎」，用戶可以使用金球幣進行抽獎，獎品包含足球、優惠券等周邊商品；底部是「公益版塊」，用戶可以使用金球幣購買足球等方式助力貧困地區的鄉村學校捐建足球場。
3.1.2 預測榜
抖音統計了全站預測榜的球迷，分為全國榜、本地榜和朋友榜。榜單的設計，能增加球迷的攀比心理，提升用戶活躍度。
3.1.3 金幣游戲
3.1.3.1 世界杯樂園
「世界杯樂園」是一款足球游戲，玩法比較簡單，用戶通過體力可以讓角色不斷前進獲取福利。而用戶獲取體力的方式需要做任務、看比賽以及邀請好友。
3.1.3.2 足球答人
「足球答人」是一款問答競技類型足球游戲。這款游戲設計得非常有創意，三人隨機組隊，通過答題的形式模擬足球比賽在線PK。第一個回答正確的用戶會有模擬進球的畫面，吸引球迷搶答，其次模擬世界杯的賽制，勝利后可以晉級下一輪，最終決出冠軍，非常有趣。
3.2 我的主隊
每個球迷都有自己喜歡的球隊，這支球隊就稱為「主隊」，比如一個喜歡阿根廷的球迷就會把阿根廷看作自己的主隊。這種帶有鮮明愛恨的元素，也是足球這項運動的魅力之一。用戶進入「我的主隊」以后，需要設置自己的主隊，選定后，將會展示主隊的賽況、比賽數據和視頻集錦。用戶如果更換主隊，還需要消耗金幣，可見抖音產品團隊對球迷的研究足夠透徹。通過建立「主隊」，不僅可以增加用戶的黏度，還能建立關系鏈接，提升用戶的留存率。
3.3 世界杯好物
3.3.1 燃情好物
「燃情好物」就是向球迷銷售世界杯相關的周邊商品，比如世界杯吉祥物、鑰匙扣、手辦、紀念品等物品。
3.3.2 吃喝玩樂
世界杯獨有的文化就是喝著啤酒看比賽，所以「吃喝玩樂」這個版塊接入了抖音的「生活服務」，球迷可以在抖音購買夜宵、小吃、奶茶等，非常方便。
3.4 大家都在拍
為了鼓勵用戶參與到世界杯的狂歡中，抖音為世界杯專門設計了一套視頻特效，用戶可以選擇喜歡的特效錄制，提升用戶參與度。
四、總結思考
1.商業層
作為一個短視頻平臺，抖音為什么舍得花費巨資打造世界杯欄目，通過此次對抖音世界杯專題的拆解，我認為這是一次對針對80、90后群體的二次拉新和激活。從抖音重金邀請前央視主持人陣容看，抖音正在嘗試通過世界杯這樣能激發球迷情懷的載體把那些邊緣用戶重新拉回來?！窪OU來世界杯」不僅直接對標央視體育曾經最知名的《天下足球》欄目，甚至連主持人都不變，既賣內容，更賣情懷。像筆者這樣以前每周只會打開幾次抖音的用戶，通過此次世界杯的直播，變成了日均使用超過6個小時的重度用戶，這在以前簡直不敢想象。
當然，和四年前的優酷等互聯網視頻平臺面臨的情況一樣，當世界杯硝煙散完以后，抖音又如何通過高質量的內容留住這部分用戶群體，是一個問題。
2. 內容層
在過去，多數用戶對抖音的印象是一個內容質量低劣、靠娛樂搞笑博眼球的短視頻平臺，但從此次世界杯的內容策劃看，抖音不僅誠意十足，一口氣推出8檔原創足球直播節目，更是邀請了眾多體育名嘴、知名運動員和跨界嘉賓輸出高質量的內容。這對廣大球迷來說，實在太過癮了，已經很久沒有這樣的足球盛宴。而且相比過去傳統的圖文時代，加入了短視頻傳播媒介的世界杯，給了億萬球迷全新的看球體驗，切換不同的解說風格、直播視角，在抖音直播間邀上幾個好友，就可以一邊聊天，一邊看球，這樣的看球體驗，太爽了。
3. 體驗層
抖音產品設計團隊對世界杯專題的設計，無論是視覺、交互還是產品體驗，都非常用心。比如在「賽程」頁面，通過一句簡短的賽況描述，不僅豐富了設計形式，還傳遞了設計的溫度（其他的體育產品相比，「賽程」頁面更像一個冰冷的機器，除了播報數據，沒有任何情感）。還有像「足球答人」這樣的游戲，完全以模擬世界杯晉級賽制的形式設計，在我首次試玩的時候，就開始為了“進球”進行“搶答”，最終拿下比賽冠軍。這樣讓用戶尖叫的設計，真的讓人愛不釋手。
參考文獻：
當抖音進軍世界杯，TikTok挖了NBA墻角
終于，我們都能在抖音看世界杯直播了
“抖”來世界杯：流量盛筵，意義幾何？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在上篇我們對小鵝通后臺設計的拆解結構和內容進行了簡單的概述，并且把「初始設置」和「添加內容」兩個部分已經拆解完，接下來我們將繼續拆解「裝修店鋪」和「店鋪推廣」兩個版塊，這兩個內容將會讓我們了解到到小鵝通后臺的強大和靈活性。
3. 裝修店鋪
店鋪的裝修至關重要，因為這決定了用戶對我的知識店鋪第一印象。所以在我把商品上架以后，我就開始來研究店鋪的裝修了。當我找到「店鋪」，發現這個欄目包含了五個內容，分別是終端渠道、頁面管理、專區管理、商品管理和基礎工具。
3.1 終端渠道
小鵝通的終端支持移動端H5店鋪、小程序店鋪、電腦端店鋪、APP和多終端。從適用設備場景來看，幾乎覆蓋了所有主流的學習場景。
3.1.1 移動端店鋪
「移動端店鋪」就是指H5網頁店鋪，這是最常見的終端形式，上線快、無需審核、靈活方便，成本最低。
3.1.1.1 店鋪主頁
「店鋪主頁」是指店鋪的首頁，這是整個店鋪權重最高的頁面，是用戶看到店鋪的第一印象?！傅赇佒黜摗沟难b修支持兩種，第一種是按系統默認的框架進行搭建裝修，第二種是自定義主頁，跳轉至「微頁面」以后，可以建立空白頁面和選擇其他免費的模版（微頁面接下來會詳解）。
a. 店鋪裝修
小鵝通的「店鋪裝修」支持可視化的設計裝修。左側是工具區，包含基礎組件（輪播圖、搜索、公告等）、商品組件（知識商品、書架、直播等）、助學工具（圈子、問答、打卡等）、營銷組件（優惠券、積分商城、拼團等）和在線客服等其他組件；中間是可視化的頁面編輯區域，管理員可以在頁面進行編輯、刪除、拖動；右側是功能屬性設置區，可以對頁面和組件進行細節設置，實現管理員想要的設計效果。當你編輯好以后，可以在右上角點擊保存并預覽，實時查看你的裝修效果，非常方便。
細節偵查：
小鵝通的店鋪裝修功能非常強大，幾乎所有常見的內容都設計成了組件，這樣極大降低商家的裝修成本，也提升了整個系統的設計維護效率。
3.1.1.2 個人中心
「個人中心」就是用戶中心界面，運營者可以在這個欄目設置需要展示的內容，比如超級會員、我的訂單、學習工具等。
3.1.1.3 店鋪導航
「店鋪導航」是指客戶端的一級菜單，支持運營者修改菜單名稱、更換圖標和增加刪除。
3.1.1.4 店鋪風格
「營銷配色」是指對商鋪進行店鋪主色和營銷配色的設置，系統提供了多種配色方案，運營者可一鍵切換。美中不足的是，不支持自定義顏色色值。
3.1.2 小程序店鋪
「小程序店鋪」是移動端店鋪的升級版，小程序相比H5，用戶體驗友好很多，相比APP，又不需要下載，這是一種非常受用戶歡迎的客戶端。但小程序需要由微信官方審核，對于很多知識付費的商家來說，往往缺少官方所要求的資質，所以很多商家是無法上架小程序的。
首次使用小程序店鋪，需要對小程序進行授權或創建。小程序店鋪的裝修流程和移動端店鋪相似。需要注意的是，小程序的發布不僅需要補充企業和法人信息，上傳小程序所需要的資質，還需要微信官方審核通過后才能上線使用。
迭代建議：
從小鵝通的小程序體驗來看，這是一個直接使用H5系統封裝的小程序。這樣的技術成本確實比較低，上線時間也比較快，但用戶體驗一般，沒有發揮出小程序的優勢。小鵝通可以參考一下有贊的小程序體驗，從而真正幫助商家的用戶獲取開心、愉悅的用戶體驗。
3.1.3 電腦端店鋪
電腦端店鋪是指對PC端店鋪的裝修設計，對于有電腦端用戶使用的商家來說，電腦端也非常重要。
3.1.3.1 電腦店鋪
①「店鋪導航」是指運營者可以對店鋪的導航進行設置，包括店鋪 Logo，導航欄背景以及導航欄的增刪；
②「電腦端設置」包含電腦端域名設置、課程類TDK設置、微頁面TDK設置等內容，小鵝通的電腦端支持綁定獨立域名，這個對于商家的品牌運營非常有幫助；
③「頁腳設置」是指運營者可以對底部的頁腳進行內容設置，包括導航名稱、版權信息等；
④「懸浮窗」就是網站的漂浮窗口，一般放在線客服、聯系電話等圖標，為用戶提供及時的咨詢服務；
⑤「個性化設置」是支持運營者設置店鋪的默認語言，有中文和英文兩種語言。
3.1.3.2 頁面管理
「頁面管理」是對店鋪頁面的裝修管理。電腦端的店鋪同樣支持在線裝修，左側為常見的功能組件（包含輪播圖、圖文導航、知識商品、直播、富文本等），中間為可視化區域，右側為屬性設置（包含頁面設置和組件設置），運營者可對組件進行細節設置，并隨時可以瀏覽裝修的效果。
迭代建議
在電腦端的裝修頁面，小鵝通的后臺沒有實現響應式設計，所以導致小屏電腦體驗起來不太友好，比如需要橫向拖動頁面才能看清楚全部內容。我認為可以加一個操作提示，提醒用戶需要使用1920*1080以上分辨率的電腦進行設計，這就遵循了尼爾森十大原則的防錯原則，用戶體驗會更好。
3.1.3.3 店鋪風格
店鋪風格就是指對電腦端的店鋪進行品牌色設置，一鍵換膚，還可以同步H5店鋪的配色，保持統一性。
3.1.4 小鵝通APP
小鵝通支持APP客戶端，不過從目前的頁面內容來看，APP客戶端僅支持對店鋪、課程推送、課程緩存和課程投屏的設置，暫無像移動端店鋪的個性化裝修等功能。其次由于沒有體驗權限，我們就不過多講解。
3.1.5 多終端引導
「多終端引導」是幫助商家引導學員去對應的學習終端，替代原來依賴人工引導的方式，這個功能可以有效提高引導的效率，解決學員總是找不到店鋪入口的痛點，從而降低商家的運營成本。需要注意的是，這個功能只支持在「課程支付成功頁面」和「課程詳情頁」開啟。
3.2 頁面管理
「微頁面」可以理解為小鵝通店鋪裝修的最小單位，一個店鋪可以看作是由無數個微頁面構成，而一個微頁面，又可以通過商家自主添加組件來設計裝修。微頁面的使用場景非常廣泛，比如商家需要設計一個促銷頁、活動頁，這個時候就可以使用到微頁面，通過組件的搭配，就能完成自己想要的效果。
3.2.1頁面管理
「頁面管理」就是針對系統創建的微頁面進行管理，包括新建、編輯、分享和刪除等。
3.2.2 分組管理
「分組管理」就是指可以建立分組來管理微頁面，比如新建一個醫療產品的分組，可以把和醫療相關的微頁面都合并成組批量管理（此功能僅支持旗艦版才能體驗，所以缺少配圖）。
3.2.3 模板庫
「模板庫」是指官方為商家提供的免費設計模板，商家可以直接應用模版，在模版的基礎上進行二次創作，提高工作效率（此功能僅支持旗艦版才能體驗，所以缺少配圖）。
3.3 專區管理
「專區」就是專題頁，和微頁面相比，它相對獨立，比如商家可以建立某個主題的學習專區，方便用戶針對性學習。小鵝通幫助文檔對「專區」的使用場景官方設計了兩個，一個是商家在和不同的品牌方合作時，以為品牌方設置專屬的宣傳專區。另一個是如果商家想為用戶提供沉浸式的學習場景，那么建立一個專區就可以實現這個需求，可以有效減少其他內容對用戶的干擾。從使用場景看出，專區是一個可以幫助商家加強品牌推廣，提升運營效率的功能，比微頁面更靈活。
3.3.1 專區詳情頁
①「內容設置」就是指專區的主頁，這個頁面可以通過建立微頁面來進行設計裝修；
②「品牌設置」是可以開啟專區的頂部導航，還可以在頁腳導航設置專區的名稱、導航狀態以及頁腳Logo；
③「權限設置」是針對專區的訪問權限做限制，比如可以指定用戶、加密，以及公開訪問。
3.3.2 數據統計
「數據統計」欄目，為商家提供了轉化漏斗、轉化趨勢和轉化明細三個內容，通過多維度的數據分析，為商家精細化運營提供決策依據。
迭代建議：
著名的格式塔原理里有一個接近性原則，就是指把相似的功能、產品合并分類，這樣可以讓界面功能清晰易懂。專區和微頁面的功能其實就非常相近，完全可以和微頁面合并，同時歸類到頁面管理分組，這樣可以有效提高管理員的操作效率。畢竟面對一個功能如此繁雜的SAAS產品，用戶的操作成本真的太高了。
3.4 商品管理
商品管理主要針對店鋪的詳情頁裝修和商品分組，屬于比較基礎的功能。
3.4.1 詳情頁裝修
詳情頁是店鋪權重非常高的頁面，它對用戶的付費轉化起到了很大的作用。
3.4.1.1 新建模版
①點擊新建模版，就進入了詳情頁裝修的界面。左側為可視化區域，右側為功能設置。從左側TAB可以看出，支持對圖文、專欄、訓練營Pro和實物商品四個詳情頁的設置；右側為詳情頁的信息設置，包含基礎信息、詳情頁裝修和高級設置三個內容。
②在「詳情頁裝修」，可以開啟銷售彈幕（制造促銷氛圍）、店鋪信息，還可以設置付費商品按鈕文案等；
③在「高級設置」，可以設置銷量達到某個數量才進行展示，對于新店鋪或新商家非常利好；
④「自定義菜單」則為運營者提供手動設置詳情頁TAB菜單的功能，比如目錄、課堂互動、評論都可以選擇開啟或關閉。
設計思考：
從小鵝通的店鋪詳情頁裝修來看，這個系統的所有頁面就像一個積木一樣，全部由組件組裝。比如詳情頁的銷售彈幕，店鋪信息、購買文案，再到詳情頁的TAB菜單，目錄、課堂互動和評論等，這些內容都是一個獨立的組件，支持商家隨時開啟和關閉，非常方便。
3.4.1.2 關聯商品
「詳情頁模版」建立成功以后，返回到列表頁，這個時候需要對詳情頁關聯商品，詳情頁才能投入使用。
3.4.2 商品分組
「商品分組」就是可以建立不同的分組，對商品進行歸類、實現高效地的管理，也方便用戶在前端更便捷地找到所需商品。在商品分組的排序頁面里，有一個非常友好小功能，那就是在對商品排序的時候，只需要輸入數值，就能實現商品排序，非常不錯的操作體驗。
3.5 基礎工具
3.5.1 素材中心
「素材中心」就是系統會把運營者在店鋪日常運營上傳的圖片、音頻、視頻等資料都儲存在云端，這樣可以實現對文件資源統一、高效的管理。這個功能或許不起眼，但是在運營者運營的過程中非常方便，可以提高工作效率。
3.5.2 圖片設計
小鵝通接入了「創可貼」圖片在線設計工具，支持用戶在小鵝通后臺就能在線設計圖片，非常方便。創可貼這個在線設計工具功能非常強大，不僅有大量優質的設計模版，還有各種素材、文字、背景和工具，這極大降低了運營者在店鋪運營中的設計制作成本，幫助運營者可以更高效地降低運營成本。
3.5.3 版權保護
3.5.3.1 內容保護
①「防錄屏跑馬燈」就是為了防止用戶悄悄錄制課程，商家在開啟跑馬燈以后，屏幕就會以跑馬燈的形式把用戶的賬戶名和ID展示出來，這樣可以有效降低課程偷錄的損失。管理員可以對跑馬燈的顏色、字體大小、透明度進行設置，還可以開啟版權聲明。
②除了防錄屏跑馬燈，小鵝通還支持開啟水印保護、文字防復制、終端限制和域名限制，可以看出在內容保護這塊，小鵝通幾乎把商家需要的功能都設計了，極大降低了商家內容被侵權的風險。
3.5.3.2 投訴指引
「投訴指引」是小鵝通為做商家整理的各大平臺投訴指南，包括小鵝通生態、微信公眾號、B站、抖音、知乎等各大媒體平臺，目的是打造一個良性、健康的平臺秩序。
設計思考
從這三個基礎工具的設計可以看出，一款Saas產品的成功，一定是把商家運營的所有環節和場景都考慮進去。比如小鵝通鏈接了創可貼在線圖片設計工具以后，不僅可以極大降低商家的店鋪運營的門檻，還能省去很多人力成本。其次在對商家版權的內容保護上，小鵝通可謂花盡了心思，防錄屏、水印、防復制還有終端和域名限制，這些功能都能為商家的原創內容保駕護航，從而打造一個健康的知識生態環境。
3.6 體驗小結
在體驗完小鵝通的店鋪裝修版塊以后，我對SaaS產品的設計肅然起敬。為了實現產品的標準化，幾乎把整個產品的頁面、功能都全部組件化了，最終設計開發了一個可視化、智能化、傻瓜式的在線裝修功能。這樣的設計不僅讓整個產品極度標準化，維護成本低，更重要的是，節省了商家的裝修成本和時間，讓他們更快速地上手。
其次從其他功能的設計也可以看出，一款Saas產品的成功，一定是把商家運營的所有環節和場景都考慮進去。比如小鵝通鏈接了創可貼在線圖片設計工具以后，不僅可以極大降低商家的店鋪運營的門檻，還能省去很多人力成本。甚至在對商家版權的內容保護上，小鵝通可謂花盡了心思，防錄屏、水印、防復制還有終端和域名限制，這些功能都能為商家的原創內容保駕護航，從而打造一個健康的知識生態環境。
4. 店鋪推廣
當我把店鋪裝修好以后，基礎工作就準備就緒了，接下來，我需要的就是開始推廣和運營我的知識店鋪，讓我的粉絲們開始來到店鋪學習。
4.1 直播
直播是現在最流行、最重要的傳播方式，對于一個運營者來說，直播運營太重要了，它是一個引流、激活、留存和變現的重要手段。
4.1.1 通用設置
在建立「直播」之前，我們來先看看「通用設置」，這樣可利于快速上手「直播」功能。「通用設置」包含「全局設置」和「默認設置」兩個部分。
①在「全局設置」，管理員可以開啟超低延時設置（降低直播延遲時間）、消息氣泡（用戶進入后界面有提示）、全屏互動、隱私保護等功能，還可以設置嚴禁詞（可設定直播評論區的嚴禁詞）、水印、打賞金額等。
②在「默認設置」，管理員可以開啟觀看人次（直播觀看人數）、在線人數、防錄屏跑馬燈（打開后可有效防止錄屏）、評論審核、直播熱度、點贊、打賞、回放設置（可設置直播是否開啟回放和視頻播放倍速等）等功能。
4.1.2 新建直播
小鵝通的「新建直播」包含基本信息、商品信息和上架設置三個部分。
①小鵝通的直播分為視頻直播、錄播直播和語音直播三種類型，其次還支持橫屏直播（適用于企業/PPT宣講等場景）和豎屏直播（適用于泛娛樂化教學、帶貨等場景），類型可謂非常豐富。接下來，運營者需要設置直播基礎信息，比如直播標題、開始時間、封面圖，還可以設置直播暖場圖、宣傳封面、詳情頁介紹等。
③「商品信息」和「上架信息」就像「內容」版塊的視頻、音頻產品一樣，可以對直播設置免費、付費、加密和指定學員專享，這個版塊可以理解為小鵝通商品新建的一個通用模塊，后面我們不再贅述。
④小鵝通的直播還支持批量創建，「批量直播」的流程相比單個直播流程操作路徑更短，選擇好設備類型以后，就可以進入批量直播的流程，系統支持批量命名、上傳封面圖以及功能設置，非常方便。
4.1.3 直播管理
當你建立一場直播以后，在「直播管理」就可以開始管理你的直播。「直播管理」的功能非常強大，為商家提供了直播詳情、直播數據、講師設置和APP推送等功能。
4.1.3.1 開播設置
「開播設置」包含了三種形式，邀請老師開播、自己開播和第三方推流到直播間。
①「邀請老師開播」就是指直播建立后，可以直接向老師發送開播邀請，「開播信息鏈接」也是從這里復制；
②「自己開播」這個功能，需要根據不同的場景來使用。比如老師是通過電腦直播，還需要下載小鵝通的PC端直播軟件，才能進行直播。如果是移動端，則需要使用鵝直播小程序或APP使用；
③「第三方推流到直播間」是指商家在其他平臺直播時，可以將直播畫面推流到小鵝通直播間，小鵝通直播間將同步展示直播畫面。第三方包含像OBS直播、快手直播和芯象直播助手等軟件，小鵝通官方也給出了完整的下載和使用指導。這個功能對商家來說，可以將第三方直播推流到店鋪，既能實現外部引流，也能為學員提供更豐富的內容。
4.1.3.2 直播間設置
「直播間設置」包含課程設置、互動設置、防盜設置、評論設置和直播間裝修四塊內容。
①「課程設置」主要指添加講師和助教，可以通過手機和微信兩種形式邀請；
②「互動設置」是指商家可以設置老師和學員在直播間的互動交流，比如直播帶貨配置（可添加指定商品實現用戶在直播間購買）、優惠券配置（可贈送店鋪優惠券）、打賞開關（用戶可對直播打賞）、簽到開關（老師可查看已簽到學員）、抽獎開關（老師可進行設置抽獎，提升直播間氛圍和用戶活躍度）、邀請達人榜開關（直播間顯示邀請達人榜，給與上榜的用戶獎勵，吸引用戶分享）等功能。
③「防盜設置」打開后，可以開啟防錄屏跑馬燈，降低直播被偷錄風險；「評論設置」可以開啟評論審核，對用戶發表的評論也可以選擇隱藏；「直播間裝修」主要是指商家可以上傳背景圖填補講師在使用連麥或課件時的畫面留白。
4.1.3.3 運營設置
「運營設置」包含私域引流、下一場直播預告、圈子引流、招募推廣員設置、信息刺激、CRM分配、通知設置和直播間信息設置8塊內容。
①「圈子引流」是指在直播中展示圈子的入口，通過領資料、看回放等形式把用戶引流到圈子，持續用內容活躍用戶；
②「招募推廣員設置」是可以運營者可以在直播間招募推廣員，幫助商家進行分銷推廣，這個功能我們會在下面詳細講解；
③「通知設置」可以設置開課提醒，包括短信預約通知、服務號預約通知等，提升用戶觸達率；
④「直播間信息設置」可以設置直播間的公告、觀看人次、在線人數和直播熱度。
4.1.3.4 回放設置
「回放設置」是指運營者可以開啟直播的回放權限，還可以設置回放的有效期，以及倍速播放。
4.1.3.5 轉播設置
「轉播設置」是指可同時轉播到第三方平臺，比如視頻號、快手等，還可以轉播給小鵝通其他店鋪，比如你的直播內容質量非常優秀，可以轉播至其他小鵝通商家，從而為你分享傳播。
4.1.3.6 拉流設置
「拉流」就像采集，商家可以把其他第三方優秀的直播內容拉流到自己的店鋪?！咐髦辈ァ惯€支持批量創建、無需監管的特點，通過拉流，可以豐富店鋪內容，快速擴大店鋪影響力，提高用戶活躍度。
4.1.3.7 直播間用戶
「直播間用戶」是指對當場觀看直播的用戶進行的數據統計，比如直播間停留時長、累計觀看時長、直播觀看時長等，還支持商家對用戶貼標簽和發送店鋪私信，實現下一步的激活轉化。
4.1.3.8 數據分析
「數據分析」是指對當場直播進行全面的數據分析，主要包含直播數據和交易數據兩個部分。
①「直播數據」包含流量觀看、直播互動和直播帶貨三個內容。在這個版塊，可以看到直播全時段的數據，比如直播間訪客數、回放觀看人數、在線人數趨勢圖、打賞金額，以及帶貨商品點擊次數、成交人數、總成交金額等數據。
②「交易數據」主要是指付費直播銷售情況的數據分析，包含售前訪客數、訪問量以及最終支付人數、支付轉化率，還有訪問-成交數數據趨勢圖等。
4.1.4 體驗小結
從「直播」這個版塊可以看出，一個我們平常沒有太過在意的直播界面，其實在系統的后臺設計了如此多功能。從「開播形式」的三個場景選擇到「直播回放」是否允許用戶設置倍數，從「直播間設置」開啟用戶打賞到「圈子引流」設置資料包吸引用戶加入圈子，最后再到一場直播結束后全面、專業、多維度的數據分析，小鵝通的直播功能真的做得太完善了。如果不親自體驗，我根本沒法想到一個直播需要考慮設計這么多功能，拉流、轉播、招募推廣員，這簡直把用戶需要的功能需求都提前設計和規劃好了，對一個運營者來說，對店鋪和用戶的運營效率提升太有幫助了。
4.2 營銷
「直播」功能熟悉以后，接下來我要開始熟悉營銷工具了，這些是店鋪運營的必備武器。小鵝通的營銷工具分為分銷推廣、拉新引流、付費轉化和促進復購四大類，對一個新手商家來說，可以根據自己的需求去尋找對應的工具。
4.2.1 分銷推廣
「分銷」是一個知識店鋪推廣的重要功能，商家不僅可以鏈接各種渠道和代理商，還可以讓利給用戶刺激傳播拉新，實現裂變增長。小鵝通的「分銷推廣」不僅有面向代理機構的「訂貨商」，還有針對個人分銷的「推廣員」，滿足了分銷場景的各種需求。
4.2.1.1 推廣員
「推廣員」主要針對個體用戶，比如店鋪的學員、粉絲、店鋪員工等，可以理解為C端用戶分銷。商家在開通「推廣員」以后，可以實現人人分銷的功能，推廣員只要分享商品的鏈接、海報圖等，只要有新用戶下單購買，都可以獲得收益。
4.2.1.1.1 推廣員管理
「推廣員管理」是為商家提供對店鋪推廣員的個人信息、審核申請管理，比如推廣員的申請審核、資料編輯、推廣員招募等。
a. 推廣員詳情頁
從這個頁面可以查詢到一個推廣員的詳細信息，包括個人信息、客戶列表、邀請推廣員列表、推廣員成交數量。
b. 招募規則
①「招募規則」是針對推廣員招募的規則進行設置。推廣員招募分為兩種模式，分別是篩選優質推廣員和人人推廣模式，前者需要設置門檻，后者不需要任何門檻。
②當運營者選擇「篩選優質推廣員」模式以后，需要對推廣員的加入條件進行設置，比如加入條件、申請信息、招募審核等。
c. 推廣商品/工具
①「推廣商品/工具」包含推廣商品、推廣優惠券、推廣邀請碼和推廣微頁面四個內容。
②「推廣商品」是指運營者可以添加指定商品進行推廣，并可以設置獨立的商品傭金的分配比例，非常靈活。
③「推廣優惠券」是指運營者可以為推廣員建立獨立的優惠券，幫助推廣員更高效進行商品推廣，提升業績；「推廣邀請碼」和「推廣優惠券」功能相似，我們不再贅述。
④「推廣微頁面」是指設置推廣員招募的頁面，通過建立一個專屬的微頁面，可以實現推廣頁的定制化設計。
d. 分傭結算設置
「分傭結算設置」是對推廣員獎勵發放方式的設置，系統支持交易完成后立即發放、交易完成后XX天再進行發放，還可以設置推廣員自購分傭，刺激推廣員消費。
e. 等級設置
「等級設置」是指運營者對推廣員等級規則的設置，包括推廣員的商品傭金比例、邀請人獎勵比例等。
4.2.1.1.2 客戶關系
①「客戶關系」包含客戶查詢、客戶綁定設置和客戶跟進設置三個內容。
②「客戶查詢」為商家提供客戶信息的統計查詢，比如客戶手機號、綁定推廣員、消費記錄等。
③「客戶綁定設置」為商家提供客戶綁定有效期和搶客設置，這個功能可以刺激推廣員不斷拓客，也可以有效保護初始推廣員的權益，避免客戶被其他推廣員搶走；
④「客戶跟進設置」是一個非常強大的功能，通過和企微CRM的鏈接，可以實現推廣員綁定的客戶自動分配給CRM銷售跟進，從商機線索到激活付費，形成了銷售閉環。
4.2.1.1.3 推廣業績
「推廣業績」提供查看所有分銷推廣員的推廣記錄和業績統計，從而獲取精準的數據分析，支撐運營決策。
4.2.1.1.4 推廣員端
①「推廣員端」是指推廣員在前端使用的客戶端，包含了推廣中心、推廣海報、推廣通知和商品展示四個部分。
②「推廣中心」為商家提供推廣員名稱設置、通知公告和引導加群功能。其中「引導加群」是為商家把推廣員引流至自己的私域社群，方便統一管理。
③「推廣海報」提供了推廣店鋪海報和邀請推廣員海報兩個功能，不僅支持客戶設計海報自定義上傳，系統也提供了精美的海報模版，賦能商家跟高效的推廣拉新。
④「推廣通知」是為推廣員提供微信端的通知設置，推廣員綁定后，可第一時間接收消息通知，比如審核結果、訂單消費等。
⑤「商品展示」可以把推廣傭金展示在詳情頁頁面，通過高頻曝光有效刺激用戶傳播分享，也可以根據推廣員招募規則申請。
4.2.1.2 訂貨商
和「推廣員」相比，「訂貨商」面向的人群是一些具有銷售團隊的企業機構、代理商等，可以稱為B端渠道分銷。代理商通過向商家批量進貨，然后分配給自己的員工進行向終端客戶銷售，最后由商家進行商品交付，代理商自主管理員工、獨立結算員工業績。
a. 訂貨商管理
「訂貨商管理」包含「訂貨商列表」和「審核列表」，主要為商家提供對訂貨商用戶的資料查詢、管理和審核。
b. 商品管理
「商品管理」是為商家提供訂貨商在前端批發商品的管理，商家在后臺添加店鋪的商品后，訂貨商在前端就能進行推廣。
c. 客戶管理
「客戶管理」是為商家提供對訂貨商銷售成交客戶的信息管理，通過這個功能可以查看客戶的詳細信息、所屬的訂貨商、關系狀態等。
d. 業績管理
①「業績管理」包含「業績訂單」和「提現記錄」兩個內容。
②「業績訂單」是為商家提供對訂貨商推廣產生的訂單管理，運營者可查看訂單的詳細信息，包括訂單號、下單時間、實付金額等。
③「提現記錄」是為商家提供對訂貨商提現申請的記錄管理，當訂貨商在前端發起提現申請以后，運營者可以從這個欄目查看提現申請，確認提現申請后，需運營者對訂貨商手動打款，打款成功后可標記已打款。
e. 設置
①「設置」包含規則設置、招募頁和海報定自定義三個內容。
②「規則設置」主要幫助商家對訂貨商的招募、綁定和等級規則進行設置。在「招募規則」，運營者可設置訂貨商加入的方式，支持自主加入（加入后無推薦人）和推薦加入（加入后有推薦人），還可以開啟訂貨商資料申請，申請資料運營者可自由配置；在「綁定規則」，可設置訂貨商和商家綁定的有效期，超出有效期后，訂貨商綁定的客戶下單，收益將自動劃入店鋪，不計入訂貨商收益；在「等級規則」，可以對訂貨商的等級名稱、規則和權益進行設置，打造完善健全的分銷體系。
③「招募頁」主要提供訂貨商招募詳情頁的設計和編輯，「海報自定義」可以對招募海報進行自定義配置，提升招募效率。
4.2.1.3 裂變海報
「裂變海報」是一個為商家提供接力式裂變傳播的營銷功能，通過精美的海報設計和豐厚的傭金獎勵，吸引用戶為商家分享推廣，促進銷量提升同時可快速吸粉引流。
4.2.1.3.1 新建流程
①在「商品信息」，需要添加分享裂變的商品，參與裂變海報的課程將不產生推廣員傭金。
②在「活動設置」，系統不僅支持自定義背景圖，還為運營者提供了多張精美的海報宣傳圖；對用戶獎勵的設置，不僅可以自由設置獎勵比例，還可以設置「交易完成后發放」和「交易完成XX天后發放」兩種形式。
細節偵查
小鵝通的分銷功能適用于所有行業和產品，在我過去的工作中就遇見了無數客戶想通過分銷進行裂變，而小鵝通的分銷功能的設計，不管是前端還是后臺的業務設計流程，都值得大家深度體驗學習，以此作為一個標準的流程設計參考。
4.2.2 拉新引流
「拉新引流」可以幫助商家拓展新用戶，小鵝通為商家設計了三個功能，分別是邀請碼、漲粉神器和請好友看。
4.2.2.1 邀請碼
「邀請碼」是一款能夠實現贈送給他人，邀請對方免費學習講師的付費內容商品的功能。當商家推出一門新課程的時候，就可以設置邀請碼邀請學員體驗，「邀請碼」既可以作為福利權益，也可以作為引流的手段。
①「邀請碼」的創建非常簡單，需要注意的是，邀請碼需要設置數量、有效時間和指定使用商品，其次也可以開啟「信息采集」功能，幫助運營者采集用戶的信息，提升促進轉化。
②「邀請碼」成功建立以后，可進行群發，也可以復制鏈接分享給指定的學員，還可以對邀請碼作廢以及查看使用記錄。
4.2.2.2 漲粉神器
「漲粉神器」是一款為商家公眾號漲粉的營銷工具，商家通過贈送課程的形式吸引用戶為公眾號傳播拉新，當新關注用戶達到商家指定要求以后，用戶可以免費獲得課程?！笣q粉神器」僅支持專業版、旗艦版使用，免費試用版不支持，從官方幫助文檔看，「漲粉神器」的操作流程主要是通過配置專屬海報，吸引學員下載分享，最終完成公眾號漲粉目標。
體驗陷阱
為了體驗這個功能，我嘗試授權公眾號進行綁定，但系統顯示我的公眾號已經授權綁定過，需要解綁后重新配置。但根據官網幫助文檔解決方案始終找不到「重新授權」和「解除授權」的入口，讓我白白花了很多時間。
4.2.2.3 請好友看
「請好友看」是一款支持學員購買專欄/會員課程后，分享課程內某一期的課程內容給好友體驗的功能，主要幫助商家促進課程的傳播和推廣，讓更多的學員了解和體驗課程。比如當學員購買了商家的付費專欄，覺得內容不錯，這個時候如果商家設置了「請好友看」，學員就可以一鍵分享給好友，邀請好友領取免費閱讀名額，最終幫助商家拉新增購。
①「請好友看」支持設置課程分享數量、課程領取人數和單個用戶領取上限，為運營者根據專欄課程內容提供更精細的運營方式。
②「邀請好友」只支持專欄或會員欄目，這個功能的本質其實是免費試看，所以不適用單個商品課程。
4.2.3 付費轉化
「付費轉化」主要幫助商家增加營銷手段，激活用戶消費，提升付費轉化率。小鵝通設計了七個功能，其中優惠券和拼團的功能非常完善，可以滿足商家各種不同場景的營銷需求。
4.2.3.1 優惠券
「優惠券」是一款通過商家讓利，從而讓用戶在購買課程時享受優惠的營銷工具，有效幫助商家刺激用戶購買，提升付費轉化率。比如刺激新用戶首次轉化贈送新人優惠券，吸引用戶購買店鋪高價課程贈送優惠券等。
4.2.3.1.1 優惠券類型
小鵝通設計了「通用優惠券」、「專屬優惠券」和「員工優惠券」三種類型。「通用優惠券」是面向所有用戶，所有人都可以領取，無門檻限制；「專屬優惠券」是為特定用戶群體設置的優惠券，比如大學生、新注冊用戶等；「員工優惠券」是結合企微能力賦能員工一鍵發券，可防止社群發券轉發泄漏，不過目前系統顯示正在開發。
4.2.3.1.2 新建優惠券
以「通用優惠券」創建流程為例，優惠券的創建包含三個部分，分別是基本信息、領用規則和個性設置。
①在「基本信息」，可以選擇優惠券的類型（支持滿減優惠和折扣優惠兩種類型，還可以設置領取門檻，比如消費滿多少元才能使用），還可以設置疊加使用（和其他優惠券一起疊加使用）、發行量（優惠券數量）、適用商品（可以支持全部商品、指定某類商品和不可用商品）和使用時間（可以設置用戶領取后失效時間，進一步提升轉化率）。
②在「領用規則」，可以設置用戶領取次數的限制（可限制每人限領多少張）、開啟信息采集（自動讀取領取優惠券用戶信息）、分享設置和添加使用說明等。
③在「個性設置」，運營者甚至可以設置優惠券剩余的數量，刺激吸引學員領取消費。
4.2.3.1.3 優惠券管理
在「優惠券」創建以后，系統為商家提供了定向發放、查看數據統計、編輯、停止和推廣等功能。
①「定向發放」提供多維度條件篩選特定用戶，并在用戶進入店鋪時自動發放優惠券，有效提高店鋪的付費轉化與復購率，發放對象支持付費用戶（可設置指定消費某個商品，精準到極致）、用戶群體和指定用戶。
②「數據統計」提供優惠券使用的精準數據統計，包括用券總成交額、優惠總金額、費效比（優惠總金額/用券總成交額）、客單價、領券總用戶數等數據，幫助運營者可以及時調整運營方案，獲取更好的運營效果。
細節偵查
優惠券是一個特別常見的功能，和「直播」一樣，用戶在前端領取流程非常簡單，領取就能消費。但在拆解完「優惠券」的后臺，你會發現一個小小的優惠券包含了非常多的功能點。小鵝通不僅設計了多種類型滿足多種營銷場景，還設計了定向發放、數據統計等功能，幫助商家提升運營效率。
4.2.3.2 優惠碼
「優惠碼」是一種是基于優惠券的玩法拓展，以二維碼的形式作為展示形式，支持在支付結算環節場景進行兌換，它具有優惠券的屬性，天然支持轉贈，易于傳播，具有拉新作用，是靈活性更強的付費轉化工具。它主要用于跨界/跨平臺引流，把線下或其他平臺的客戶引導到店鋪內使用優惠碼完成付費轉化，比如商家在抖音可以設置抖音專屬優惠碼，用戶領取消費后，商家可以在后臺查詢不同渠道的用戶使用優惠碼消費記錄，從而獲取更精細化的運營策略。
①「優惠碼」的創建支持專屬碼和通用碼兩種類型，專屬碼就是一個碼只用一次，通用碼可以多次使用；其次還可以設置用戶使用次數，分享權限等。
②「優惠碼」生成后，通過「效果數據」可以查看優惠碼的詳細數據，包括總成交額、總優惠額、領取人數等，還可以增加庫存、查看優惠碼的使用記錄和用碼商品，為商家提供精準的運營分析。
4.2.3.3 有價優惠券
「有價優惠券」是把優惠券當作一個商品來進行銷售，這樣可以以預售的形式促進店鋪轉化。比如商家在雙十一店鋪大促之前就創建「有價優惠券」，用戶可以提前購買，從而實現為活動宣傳預熱，提升付費轉化率。
4.2.3.4 拼團
拼團分為三種，普通拼團，邀新拼團和階梯拼團?！钙胀ㄆ磮F」是指用戶下單開團以后，可以邀請好友拼團購買；「邀新拼團」是指開團后，用戶必須邀請新用戶才能參團購買，這個主要用于新用戶拓展的場景；「階梯拼團」則是隨著拼團人數越多，價格越低，用低價刺激用戶高效裂變。
4.2.3.4.1 新建拼團
拼團的創建包含兩個部分，分別是基礎設置和更多設置。
①在「基礎設置」，可以設置拼團的參團人數，成團的時限（比如設置1日，用戶開團后，就需要在1日內成團，否則拼團失?。?。
②在「更多設置」，可以開啟購買彈幕（增加促銷氛圍）、在線湊團（優先顯示未成團的團，提升成團率）、團長價（開團的團長有優惠）、活動預熱等功能。其中「模擬成團」可滿足商家某個拼團購買人數不夠，系統可自動以“匿名”買家湊單的場景，「超員成團」可滿足當拼團人數超過限定人數也同時可以購買的場景，功能非常靈活豐富。
4.2.3.4.2 拼團管理
拼團開啟后，商家可以對拼團進行編輯、推廣、復制和查看數據統計。在拼團詳情頁面，可查看拼團的訪客數、付費用戶數、支付訂單數、成交金額和拼團明細，為商家提供更多數字化的管理，提升運營效率。
4.2.3.5 秒殺
「秒殺」是一個為商家提供對某款商品限時秒殺價出售的營銷工具，作為一個常見的促銷功能，小鵝通的「秒殺」支持開啟活動預熱功能，可以提前吸引用戶關注活動。其次還支持秒殺預約，用戶只要關注商家公眾號，就能收到活動秒殺的提醒，非常方便。
4.2.3.6 限時折扣
「限時折扣」是一個為商家在某段時間內以指定折扣購買商品的營銷工具，小鵝通的「限時折扣」支持添加多個商品，可進行批量設置折扣以及減價，非常方便。
4.2.3.7 滿包郵
「滿包郵」是一個針對實物商品購買贈送包郵服務的工具，操作流程比較簡單，選定好指定實物商品以后就可以添加使用。
4.2.4 促進復購
為了提升用戶的復購率，小鵝通為商家設計了四個小工具，分別是兌換碼、商品推薦、彈窗廣告和支付有禮。
4.2.4.1 兌換碼
「兌換碼」是一個常見的營銷功能，是由一串數字或字母組合，在用戶領取兌換碼以后，可以在店鋪兌換指定的商品和優惠券。和「優惠碼」相似，商家可以在多個場景中以福利形式向用戶贈送和售賣，最終為店鋪引流。
①「兌換碼」的創建流程很簡單，在「基礎信息」設定庫存（兌換碼數量），選擇活動時間（可設置某個時間段或長期有效），設置每個用戶領取的數量，接下來設置用戶可兌換的商品和優惠券就完成，其次還支持開啟用戶信息采集功能（開啟后可以搜集領取兌換碼用戶的數據信息），為商家提供更多銷售線索。
②兌換碼創建以后，通過「碼庫」可以查看每一個兌換碼的使用情況，包括兌換時間、兌換人、作廢和添加庫存。
4.2.4.2 商品推薦
「商品推薦」是一個可以幫助商家提升指定商品曝光率的工具，當商家添加推薦商品以后，該商品將會出現在前端商品詳情頁的「相關推薦」分類，從而增加商品訪問量和提升轉化率。
4.2.4.3 彈窗廣告
「彈窗廣告」是一個可以幫助商家添加自定義彈窗廣告的工具。它的操作流程很簡單，但功能很豐富。在用戶點擊「新建彈窗廣告」以后，可以上傳彈窗圖的廣告樣式，選擇需要跳轉的頁面（可跳轉指定商品、商品分組、微頁面和助學工具），還可以選擇投放的頁面（包含首頁以及其他欄目頁和微頁面），甚至可以選擇需要投放的人群（比如新手用戶組、VIP會員用戶組等），還可以設置廣告出現的頻次（支持首次訪問出現和每隔多少天出現1次）。當彈窗廣告建立后，商家還可以查看彈窗廣告的曝光次數、打開次數和打開率，獲取非常精準的數據統計，優化廣告運營方案。
4.2.4.4 支付有禮
「支付有禮」是一個商家在用戶購買商品以后贈送優惠權益的營銷工具，它可以有效提升用戶的復購率，比如商家設定了購買商品后贈送兌換碼或優惠券，用戶在指定的時間內消費就能獲取優惠。
「支付有禮」的創建流程和其他促銷工具相似，商家可以選擇適用人群（指定某個用戶群體享有）、消費方式（指定消費某個商品或某一類商品），最后選擇贈送的權益，包含優惠券、優惠碼和兌換碼，即可創建成功。
4.2.5 體驗小結
如果用兩個詞描述小鵝通的營銷工具的特點，我覺得這兩個詞分別是——極致和絲滑。
「極致」是指小鵝通對營銷工具的不斷創新，比如優惠券和拼團。首先把「優惠券」拆分為三種類型，滿足不同用戶的需求，其次還設計了「優惠碼」和「有價優惠券」，為商家考慮了更豐富的跨平臺和促銷預售場景?！钙磮F」也是如此，不僅提供常見的拼團模式，還設計了「邀新拼團」和「階梯拼團」，對于商家來說，營銷手段越豐富，就越能提升用戶的激活率和復購率。
「絲滑」是指這些營銷工具的靈活性。比如像「彈窗廣告」這樣的功能，不僅可以上傳你設計好的廣告圖片，跳轉你指定的商品或頁面，還可以選擇可以投放的人群、彈窗廣告出現的頻次，這樣傻瓜式的操作設置，對商家來說，實在太方便了。相比定制化的系統開發，極大節省了大量的人力成本，讓商家享受一個優秀后臺系統的便捷和愉悅體驗。
感謝閱讀，小鵝通的產品拆解第二部分就到這里，下一篇我們將會繼續拆解小鵝通后臺！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
一個SaaS產品的后臺是如何設計的？作為知識付費行業的頭部SaaS服務商，從2016年誕生不到7年時間，小鵝通注冊客戶數已經超過160萬，終端訪問用戶人數超過7.8億，毫無疑問成為了國內知識付費規模最大的SaaS產品。
為什么拆解小鵝通的后臺？這是因為后臺設計往往被多數產品、開發甚至老板忽略，他們甚至認為后臺不需要設計，更不需要考慮用戶體驗，能把功能實現就可以交付。但我的觀點恰巧相反，我認為一個SaaS產品設計最大的挑戰和關鍵正是后臺。它決定了運營者的工作效率和操作體驗，即便你的功能再強大，如果用戶不會用、不愿意使用，那么用戶也不會續費，而續費，正如《SaaS創業路線圖》作者吳昊在他書中的觀點——SaaS的本質，就是續費。設計大偵探的第一個B端產品拆解，選擇了工作量最大、最繁雜的后臺，閱讀時間長，非常乏味，但如果你認真啃完，你對SaaS產品、后臺設計、B端設計不會再陌生。都說良藥苦口，這碗藥，廖爾摩斯先干為敬。
一、導讀
1. 內容結構
小鵝通的后臺拆解包含四個部分，分別為導讀、產品畫像、設計拆解和總結，內容篇幅超過4萬字，閱讀時間較長，所以拆分為4篇文章發布，建議收藏閱讀。
2. 適讀人群
第一類，產品經理/UI/交互設計師，通過對小鵝通后臺產品的深度拆解，跳出執行層，培養后臺設計的全局觀，從功能價值、應用場景、業務流程和用戶體驗多維度去學習和思考一個頭部SaaS產品的后臺如何設計。
第二類，SaaS產品及知識付費從業者，獲取一份專業、完整、有深度價值的SaaS競品設計參考。
3. 分析模型
第一，增長模型。由戴夫·麥克盧爾提出，包含用戶獲取、用戶激活、用戶留存、獲取收入、用戶推薦，分別對應用戶生命周期中的5個重要環節，主要用于分析產品的功能價值。
第二，尼爾森十大原則。尼爾森十大可用性原則是界面設計中最基礎、最重要的設計原則，任何產品的設計，都可以通過這十個原則進行指導設計，這個原則主要用于診斷后臺設計的用戶體驗。
第三，其他設計基礎理論，包括費茨定律、格式塔原則、席克定律等，主要用于判斷后臺設計的易用性。
4. 拆解步驟
SaaS產品的后臺的設計不僅復雜，而且很多功能如果不親自體驗根本沒法理解，所以針對小鵝通后臺的拆解，我分為以下三個步驟進行
第一，親自上手實操體驗操作。對每一個功能版塊進行了全面的實操體驗，弄清楚了才開始拆解，絕非走馬觀花。
第二，結合官方幫助文檔創作。在體驗小鵝通產品的時候，有很多功能必須結合幫助文檔才能理解，甚至由于權限和內容問題，部分功能沒法體驗，只能靠官網介紹來理解。針對每一個功能，嚴格按照「功能介紹-功能價值-使用場景-頁面內容-核心功能-操作流程」的結構去描述，旨在讓產品設計師看懂這個功能設計的價值和細節。
第三，深入思考產品設計細節。在拆解完每一個功能，我都會加入自己的思考，主要分為細節偵查（值得我們學習的細節）、迭代建議（個人認為可以優化的地方）、設計思考（某個功能帶給我的啟發）、體驗陷阱（用戶體驗糟糕地方）和體驗小結（針對某個功能版塊進行全面總結），如果你瀏覽的是騰訊文檔，非常歡迎你可以以添加批注的形式和我一起討論。
5. 閱讀建議
由于內容篇幅太長，強烈建議你可以申請小鵝通免費試用賬號一邊閱讀一邊體驗，這樣對整個后臺的設計才更深有體會。
二、產品畫像
1. 產品簡介
小鵝通是知識產品與用戶服務的數字化工具，包含知識店鋪、企業直播、企業培訓、企微助手等多款產品，可以為有線上經營、商業變現、私域運營、用戶服務等需求的企業，提供一站式技術服務，助力企業完成數字化升級。根據官方數據顯示，截止到2023年2月，小鵝通注冊客戶數已經超過160萬，終端訪問用戶人數超過7.8億，是目前國內知識付費客戶數量最多、規模最大的SaaS產品。
2. 用戶角色
用戶角色是指使用操作小鵝通后臺的用戶，主要分為運營者和店鋪銷售。
2.1 運營者
店鋪的運營者主要負責店鋪裝修、商品管理、用戶運營、數據分析、活動策劃、拉新引流等工作內容，是小鵝通后臺主要使用的用戶群體。
2.2 店鋪銷售
店鋪銷售會通過企業微信和CRM工具使用小鵝通，不過他們主要通過企業微信的小鵝通應用進行工作，很少涉及后臺操作。
3. 信息結構
從信息結構看，小鵝通后臺主要包括店鋪、圈子、直播、內容、商品、營銷、交易、用戶、CRM、企微、數據、應用、設置和服務14大版塊（感謝探友@miki對小鵝通后臺信息結構的梳理）。
三、設計拆解
小鵝通的后臺非常龐大，包括了店鋪、圈子、直播、內容、商品、營銷、交易、用戶等14大版塊，其中每一個版塊又包含若干功能，體驗起來非常繁雜，很容易陷入焦慮感。所以我按照一個知識店鋪從0到1裝修、添加內容、店鋪推廣和運營的步驟把小鵝通的后臺拆分為8個服務，然后再對每個版塊的內容進行詳細拆解。
1. 初始設置
當我從官網開通小鵝通的知識店鋪以后，進入到管理后臺，面對如此繁雜的功能，我想做的第一件事，就是對我的店鋪進行基礎設置，我得讓用戶知道這個店鋪叫什么名字。
1.1. 店鋪設置
「店鋪設置」為商家提供了店鋪的基本信息設置，比如店鋪信息、品牌形象、用戶賬號設置等。
①「店鋪信息」提供店鋪名稱、店鋪管理員和主營類目的設置，非?；A。
②「用戶賬號設置」 提供在使用系統過程中的各種登錄偏好設置，比如登錄設備限制，可自定義學員使用同一賬號在同一時間不同瀏覽器上同時登陸的情況
③「引導設置」提供了引導用戶關注公眾號、加入社群、收藏店鋪、添加客服和添加手機號等功能，對新用戶的首次訪問至關重要。
④「功能配置」支持用戶對商品銷量、播放量/瀏覽量、評論審核、嚴禁詞、視頻播放器、商品評價、買家申請售后等功能進行設置，可以看出系統非常完整和靈活。
迭代建議
用戶的短期記憶一般不會超過5秒，所以在體驗「設置」這個欄目的時候，我就發現小鵝通的功能太過繁雜，這對新手商家的入門有很高的學習成本。這個欄目的內容其實可以拆分為基礎設置、高級設置這樣的階梯式內容，有助于緩解新手用戶的焦慮。
1.2. 員工管理
「員工管理」是為商家提供新建員工、運營角色管理、員工權限設置的功能，這個欄目主要幫助商家管理自己的運營團隊。
1.3. 角色管理
「角色管理」包含了系統默認的多個角色，比如高級管理員、普通管理員、財務、老師、課程顧問、教務專員、銷售員等，并且可以對每個角色進行權限設置，另外系統也支持商家新增自定義角色，滿足商家各種運營需求。
1.4. 操作日志
「操作日志」記錄了整個系統管理員的登錄和操作內容記錄，日志系統作為一個后臺系統必不可少的模塊，它可以記錄下系統所產生的所有行為，這有助于商家對系統運行監管，并且可實時監控員工在系統中的敏感操作，加強員工培訓和管理。
1.5. 消息推送
「消息推送」是商家建立外部觸發最好的方式，這個版塊主要為商家提供各種場景的消息推送設置，小鵝通支持服務號代發、短信通知和APP推送通知三種類型。
1.6. 體驗小結
在對「設置」模塊的實操體驗中，感受到小鵝通的功能非常強大，甚至功能多得有點讓人透不過氣，這對新手商家來說，會產生很多的焦慮和壓力，我迫切需要一份最基礎、最簡潔的新手引導指南。這也突然讓我想起了當我申請小鵝通體驗賬號時，客服專員向我多次提及給我做新手操作培訓，但我都婉拒了，也許對于一個頭部SaaS產品來說，客服專員的培訓是客戶體驗過程中必不可少的一個環節，但是我認為好的設計，其實不需要太多的學習成本。
2. 添加內容
當我把店鋪的基礎信息設置好以后，接下來，就需要為我的知識店鋪準備上架的內容了。我找到了「內容」這個模塊，發現小鵝通支持的內容形式非常多，從視頻、音頻到圖文專欄，把常見的內容形式都涵蓋了。
2.1. 內容
「內容」版塊包含內容類型和互動工具兩個部分，商家可以在「內容類型」選擇自己要發布的形式發布內容，而「互動工具」則是幫助商家課程運營和學生管理的工具。
2.1.1. 內容類型
小鵝通支持視頻、音頻、圖文、電子書、AI互動課、專欄、訓練營和會員7種類型，幾乎覆蓋了常見的內容形式。
2.1.1.1. 視頻
「視頻」是最常見的內容形式之一，商家可以把錄制好的課程視頻上傳到這個欄目，就可以開始向學員銷售。
2.1.1.1.1. 新建視頻
「視頻」包含基本信息、課程內容、所屬組合課、商品信息和狀態設置五個部分。
①在「基本信息」，商家需要填入商品名稱等基本信息；
②在「課程內容」，管理員可對視頻的播放進行設置（比如課程未學完禁止拖動進度條和倍速播放等），還可以對內容設置保護（禁止文字防復制和開啟防錄屏跑馬燈）。
③「所屬組合課」是提供商品和其他內容（專欄、會員和訓練營）關聯，比如新添加的商品屬于某個付費專欄，那么就可以關聯，提升效率。
④在「商品信息」，可以設置商品的售賣方式，支持免費、付費、加密和指定學員。針對付費視頻，還可以支持片段試看，提升付費轉化。
⑤「狀態設置」是指在添加完商品后，商家可選擇立即上架、定時上架或暫不上架，比如商家在準備某個促銷活動的時候，可以提前編輯商品，設置定時發布即可。
2.1.1.1.2. 視頻管理
①「視頻」添加成功后，在「視頻」欄目頁，可以查看商品的詳情，對商品進行編輯，分享、下架、復制和刪除等。
②「分享」是指商家可以把商品的鏈接、二維碼等信息直接復制分享給好友，同時也起到了預覽的作用，這是一個公用的組件，在其他商品和版塊同樣適用。
2.1.1.1.3. 視頻詳情頁
「視頻詳情頁」主要分為課程設置、運營設置、學員列表和數據分析四塊內容。
①「課程設置」就是對課程的相關信息進行設置，相當于對內容進行二次編輯。
②「運營設置」從四個解為一個通用的表單；「CRM分配」是指可以把瀏覽課程的學員自動分配給企業的CRM銷售人員；「私域引流」是指可以引導用戶掃碼加群，提高課程服務質量和商家對學員的運營能力。
③在「學員列表」，可以查看當前購買商品的所有學員信息，包括購買時間、學習進度等信息，系統也支持商家手動添加可學習課程的學員。
④在「數據分析」欄目，可以查看商品的「學習效果」和「交易數據」，比如商品的訂閱人數、學習人數、完課率、學習趨勢圖等，通過這個欄目，可以幫助商家對用戶的學習進行深入的分析，提升運營效率。
設計思考
在初次添加店鋪內容的時候，對很多功能板塊都不熟悉，比如CRM分配、超級會員等，雖然能感受到小鵝通系統的強大，但對于剛入手的商家，則會產生很深的焦慮，不知道這些功能如何設置和使用，也無法感受到這些功能對店鋪運營的幫助。
2.1.1.2. 音頻
「音頻」也是一種常見的內容形式，可以設計講書、廣播等產品，用戶可以在地鐵、公交等場景收聽。「音頻」的新建流程、商品管理功能和「視頻」相似，我們不再贅述。
2.1.1.3. 圖文
「圖文」也是一種常見的內容形式，可以為學員提供付費閱讀等類型產品，「圖文」的新建流程、商品管理功能和「視頻」相似，我們不再贅述。
迭代建議
付費閱讀其實是知識創作者非常喜歡的方式，小鵝通雖然設計了這個功能，但前端的界面設計并沒有根據圖文內容傳播的特點設計，所以用戶體驗并不理想，顯得非常雞肋。
2.1.1.4. 電子書
「電子書」對于出版社等用戶群體，是一個剛需功能。在上傳電子書文件以后，系統可以自動解析書籍章節，輕松完成電子書在線管理和售賣。其次在店鋪前端，用戶可在手機端閱讀，支持區域觸摸翻頁、章節試讀、劃線、書簽、更換背景等功能，閱讀體驗非常友好?！鸽娮訒沟男陆鞒?、商品管理功能和「視頻」相似，我們不再贅述。
2.1.1.5. AI互動課
隨著近兩年AI技術的發展，小鵝通也加入了AI互動課的內容形式。商家可以利用AI互動形式的課程內容，搭建具有沉浸式場景的課程學習形式，實現個性化、趣味性、強互動的授課形式，不過搭建成本相對較高，更適合于有特定需求的客戶。
2.1.1.5.1. 新建流程
①「AI互動課」的新建流程分為三個步驟，分別是填寫基本信息、制作課程內容和填寫售賣信息。
②在「基本信息」，商家需要輸入課程名稱和詳情頁等信息。
③進入「課程內容」以后，左側提供了內容組件（文字、圖片、音頻和視頻）、題目組件（單選題、多選題、不定項、判斷題和填空題）和其他組件（章節標題和附件），商家可以根據自己的需求加入組件進行設計。
④商家在填寫售賣信息以后，就可以進行上架銷售。
2.1.1.6. 專欄
2.1.1.6.1. 專欄
「專欄」可以將多個單品課程打包成系列課銷售，比如常見的付費專欄、連載小說、有聲讀物等?！笇凇菇⒑螅M入詳情頁，可以在「目錄管理」添加專欄商品，還可以對專欄的商品設置排序和設置試看。其他功能和「視頻」相似，我們不再贅述。
2.1.1.6.2. 大專欄
「大專欄」就是「專欄」的父級，可以將多個專欄進行打包，組合成專項學習專題，打造學員深度系統學習方案。
2.1.1.7. 訓練營
「訓練營」相比「課程」，是一個動態的服務。商家根據某個學習主題，集中式、計劃式、督學式地學習。「訓練營」也是一種常見的引流手段，通過打卡、簽到、學習，可以快速幫助商家進行傳播拉新。
2.1.1.7.1. 新建訓練營
①商家建立訓練營以后，需要建立營期才能開始招生。
②營期的建立分為營期基礎信息、營期課程和售賣信息三個步驟。在「營期基礎信息」，需要設置開課信息，包括招生時間和開課時間；其次支持設置三種目錄解鎖模式，自由模式（無門檻自由學習）、闖關模式（完成任務才能繼續學習）和日期解鎖（每天只能學習一定數量的課程）。
③在「營期課程」，商家需要添加訓練營的學習任務，可以加入店鋪的課程內容，還可添加打卡、考試等助學工具，增強督學效果，提升用戶活躍度。
2.1.1.8. 會員
「會員」是商家可以打包特定商品內容（包括專欄和商品）進行銷售，它的功能流程和「專欄」功能相似，在建立「會員」后，進入詳情頁的目錄管理才能添加課程商品。這個功能可以幫助商家聚集一定量級的忠實粉絲，實現店鋪的穩定收入。
設計討論
不知道是不是語義的問題，我對「會員」這個功能有很多不理解，首先感覺和「專欄」很相似，其次和「超級會員」也有點傻傻分不清楚，所以在體驗的過程中，花了很多時間去學習研究。
2.1.1.9. 體驗小結
從小鵝通支持的7種內容形式來看，它幾乎覆蓋了所有的知識付費內容，視頻、音頻、電子書、專欄，甚至還有AI互動課。這足以滿足各種知識用戶人群的內容要求，不管你是銷售錄播課、音頻課還是文字專欄，小鵝通真正的實現了——一分鐘擁有自己的知識店鋪。
2.1.2. 互動工具
「互動工具」包含了打卡、考試、練習、作業本、題庫、證書、表單、活動管理、隨堂檢測、測試活動和付費問答11種工具。
2.1.2.1. 打卡
「打卡」是一個提升用戶活躍度的運營工具，通過持續的打卡輸出，不僅可以幫助學員養成一些比較好的行為習慣，還可以幫助商家提升用戶付費轉化?！复蚩ā狗譃槿諝v打卡、作業打卡和闖關打卡三種形式。
2.1.2.1.1. 日歷打卡
「日歷打卡」是以“天”為單位的打卡模式，學員需要每天在有效時段內提交打卡內容，比如每日英語學習打卡、早睡打卡等。
a. 新建流程
①「日歷打卡」的建立有兩個步驟，分別是設置打卡信息和打卡介紹設置。在「設置打卡信息」，分為基本信息、打卡規則和其他設置三個內容?！富拘畔ⅰ箍梢栽O置打卡的起止日期、打卡時段、提醒方式、每日打卡次數、可補打卡次數、參與條件和打卡規則等；「打卡規則」主要是設置用戶打卡的內容類型和范本；「其他設置」可以幫助商家關聯超級會員和指定商品文件。
②在「打卡介紹設置」步驟，需要添加打卡的封面圖和詳情頁介紹，完成后打卡建立添加成功。
細節偵查
如果不是親自新建一次「打卡」，你根本無法理解一個小小的「打卡」功能竟然會如此復雜，包含的場景和功能竟然會有這么多。
b. 打卡詳情頁
「打卡」建立以后，可以進入打卡的詳情頁，主要分為日記管理、任務管理、學員管理、分組管理、助教管理、激勵設置、運營設置和數據分析8塊內容。
①「日記管理」主要指用戶在前端的日記打卡，老師可以根據學員的日記進行評論、置頂、加精和刪除，還支持批量導出日記。
②「任務管理」是指給學員布置學習任務，幫助學員更好地學習。
③「學員管理」主要提供對打卡用戶的管理，比如查看學生打卡詳細資料和暫停打卡等。
④「分組管理」支持老師對打卡的學員進行分組，提高管理效率。
⑤「助教管理」支持老師添加助教，助教可以對學生打卡進行點評、刪除和精選等操作。
⑥「激勵設置」是指為了鼓勵學生堅持打卡，老師可以設置證書、返學費和積分這樣的形式來吸引學生參與（證書和積分我們在下面會單獨講解）?！阜祵W費」是一個打卡活動中常見的營銷方式，學員完成指定的任務就可以拿到打卡費用的返現，這樣不僅可以篩選精準用戶，也可以提高用戶的打卡積極性。
⑦「運營配置」主要包含配置日簽和邀請卡兩個部分?！溉蘸灐故且环N吸引用戶傳播的手段，通過個性化和精美的日簽設計，不僅可以體現活動特色，還能激發學員的收藏欲望，最終吸引用戶主動傳播，拉新引流?！秆埧ā挂仓饕菫榱思ぐl學生傳播引流，不僅設計了精美的邀請卡片，還支持老師自定義設計，以及直接引流自私域社群。
⑧「數據分析」是對整個打卡的數據進行全面的分析統計，包括當天打卡人數、打卡次數、新增學員、點贊數、評論數、加精數等等，通過精準的數據分析，可以為商家運營方案提供支撐。
2.1.2.1.2. 作業打卡
「作業打卡」是以布置“作業”的形式打卡，這種打卡方式可以加強教學質量的檢驗，讓學生產生完成作業的緊迫感，督促學生進行學習。
2.1.2.1.3. 闖關打卡
「闖關打卡」是以“關卡”作為單位的打卡模式，這種打卡形式由于自身具備游戲的挑戰性，所以能夠有效刺激學生為了拿到更好的成績而努力打卡，從而提升用戶參與度和積極性。
2.1.2.2. 考試
「考試」是用來檢測用戶學習效果的學習工具，商家可以通過考試情況得到學習效果反饋，可根據考試反饋進行后續課程優化。
2.1.2.2.1. 新建考試
「考試」的建立分為三個步驟，分別是設置考試信息、選擇試卷和發布。
①「設置考試信息」又分為基本信息、信息采集、考試設置、題目分值和結果設置五個內容?！富拘畔ⅰ剐枰钊肟荚嚨幕拘畔?，選擇需要關聯的課程；在「考試設置」，老師可設置參考考試的時間、考試時長、考試次數等；在「結果設置」，可以選擇考試完就展示成績、題目和答案。
②在「選擇試卷」步驟，可以創建新試卷，也可以從試卷庫中選擇已設置好的試卷，其次還可以設置考試通過分數的成績。
③添加試卷以后，管理員可選擇立即發布、定時發布以及開啟微信服務號通知，幫助學生可及時獲取考試的消息通知。
2.1.2.2.2. 考試管理
在學生開始考試以后，后臺會生成考試數據，商家可查看考試的詳細情況，包括批閱、統計分析、老師管理、設置證書等。
2.1.2.3. 練習
「練習」滿足了商家售賣已有題庫題目，為學員提供自主刷題練習工具的需求，而通過反復練習，可以提高學員學習效果，有助于提升用戶的活躍度和留存率。
2.1.2.3.1. 新建練習
「練習」的建立包含基本信息、練習設置、商品信息、私域引流和信息采集五個步驟。
①在「練習設置」，管理員需要關聯題庫，設置答題的出題順序（包含隨機和按順序），題目數量和考試難度；
②「商品信息」可以設置「練習」是否付費，或需要參與關聯課程才能學習；「私域引流」和「信息采集」是公共組件，我們在上文已經解讀過，不再重復。
2.1.2.3.2. 練習管理
學生開始練習以后，后臺可查看學員的練習數據，包括練習參與人數、每道題目的正確率等，這些數據可以幫助商家及時調整運營方案，或針對性對學生進行講解授課。
2.1.2.4. 作業本
「作業本」主要幫助老師和學員在課程后續實現互動和答疑，不僅可以加強學生對知識的學習，幫助老師了解學員學習的狀態，更能提升用戶活躍度。
2.1.2.4.1. 新建流程
①管理員需要先建立一個「作業本」，這個流程比較簡單，輸入名稱以后，選擇關聯課程，還支持關聯「圈子」（一個用戶運營的重要功能），老師布置的作業會在課堂互動和作業動態顯示。
②「作業本」建立以后，管理員可以布置「作業」?！缸鳂I」分為手動布置（新建）和題庫布置（從現有的題庫中直接選擇）?！甘謩硬贾谩剐枰斎胱鳂I名稱和作業內容，支持上傳圖片和音頻，填寫完成后，作業創建成功。
2.1.2.5. 題庫
「題庫」需要配合作業、考試和練習場景使用，為這些工具提供數據支撐。
2.1.2.5.1. 題庫
①「題庫」支持添加單選題、多選題、不定項選擇題、判斷題、填空題、問答題和材料題等多種類型。添加也非常簡單，管理員選擇好題目類型以后，填入內容就能新建成功。
②「批量導入」是為管理員提供批量輸入題目的工具，按照系統提供的輸入范例格式，系統可以一鍵識別出題目，輕松錄入。
③「Excel導入」也是一種常見的導入形式，不過需要按照系統標準的批量導入模版，才能實現批量導入。
2.1.2.5.2. 試卷庫
①「試卷庫」是題庫中題目的組合，可以看作是「題庫」的父級。管理員可按照自己的需要把題目手動或自動組合成試卷，在考試、作業等場景中就能及時調用，提升工作效率。
②「試卷庫」的新建流程包括設置試卷信息和組卷兩個步驟。在填寫完試卷基礎信息以后，在「組卷」步驟，可以選擇「手動選題」和「系統抽題」?！甘謩舆x題」就是管理員從題庫中逐一手動選擇，準確率較高，而「系統抽題」則是系統根據管理員的題型設置隨機抽題，具有隨機性。
2.1.2.6. 證書
「證書」可以為學生帶來成就感，激勵學生堅持完成任務，當學員通過考試、完成作業以后，管理員可以向學員頒發證書，最終提升用戶活躍度。
①「證書」的建立包含基本信息、發放規則、證書樣式、證書信息、發證信息和證書分享六個內容。
②在「基本信息」，管理員可選擇證書類型，包括考試證書、打卡證書、圈子證書等，另外，證書需要關聯對應的考試。
③在「證書樣式」，系統提供了數十種系統樣式，管理員可根據自己的偏好和品牌VI選擇，其次也支持自定義樣式，上傳設計好的背景圖片即可生成。
④在「證書信息」，管理員可以編輯證書標題、獲獎文案等，還可以加入鼓勵文案，吸引用戶傳播分享。
⑤在「發證信息」，可加入發證日期、證書編號和發證印章等，突出真實性。
⑥在「證書分享」，可以添加分享語和二維碼，通過學生的分享，為商家拉新引流。
2.1.2.7. 表單
「表單」是運營者用于發起問卷調研，自定義收集用戶信息的社群功能。它可以幫助商家收集用戶需求和反饋信息，通過對用戶的調研分析，進一步設計和優化運營策略，從而為用戶提供更精準的服務
2.1.2.7.1. 新建流程
「表單」的建立分為三個步驟，分別是編輯表單、表單設置和表單發布。
①「編輯表單」分為三塊內容，左邊是組件和外觀，管理員需要從這里選擇內容，比如單選、文本框等?！附M件」包含基礎組件（單選、多選、下拉菜單、文本框等）、描述分割（文本描述、圖片、分隔欄）和個人信息（姓名、性別、年齡等），「外觀」可以設置表單底色、標題、選項內容字體大小和顏色。選中內容以后，中間為表單編輯區域，可以實現可視化編輯，包括調整順序、刪除等。右側可以設置表單的字段和邏輯，包含基礎設置、選項設置、邏輯顯示規則等。
②在「表單設置」，可以設置用戶提交的次數、回收方式（支持定量、定時回收）、微信分享信息和私域引流。
③在最后一步「表單發布」，需要關聯對應的內容，比如相關視頻、課程、專欄、圈子、訓練營等內容，關聯成功后，表單就可以發布。
2.1.2.8. 活動管理
在店鋪的運營中，舉辦線下活動必不可少，「活動管理」就是為了解決這個場景而設計。管理員可以使用「活動管理」功能組織線下活動，一站式完成線上發布活動信息、用戶報名、收集報名用戶信息、管理報名情況、現場簽到等流程。
2.1.2.8.1. 發布活動
「活動」的發布包含基本信息、票務設置、座位設置、報名信息設置和私域引流六個部分。
①在「基本信息」，管理員需要填入活動的名稱、地點、時間、關聯的課程等信息；②在「票務設置」，可以添加免費票和收費票，設置票種的展示規則等；③「座位設置」部分，還可以開啟自動排座，活動座位由系統自行分配；④在「報名信息設置」，管理員可以根據自己的需求靈活配置用戶報名的信息，非常方便；⑤「私域引流」可以幫助管理員在活動報名前后將潛在用戶引流至商家的私域流量池。
2.1.2.8.2. 名單管理
活動建立成功后，商家就可以發布活動，「名單管理」就是活動報名的詳細數據，包含報名管理和簽到管理。
a. 報名管理
「報名管理」主要包含了所有活動報名的數據管理，比如待審核、報名成功等，管理員可以在這個欄目查看報名用戶的詳細信息。
b. 簽到管理
「簽到管理」有兩種形式，一種是用戶自行掃碼簽到，系統會生成活動的二維碼，管理員向用戶展示掃碼即可；另一種是商家主動掃碼核銷，工作人員進入票券核銷頁面以后，就可以對報名的用戶進行掃碼核銷。
2.1.2.9. 隨堂檢測
「隨堂檢測」是一個協助老師校驗學生學習質量的輔助工具，它不僅可以提升學生對課堂知識的學習和鞏固，還能有效防止學員掛機學習，提升學習效率。
2.1.2.10. 測試互動
「測試互動」是一個通過設置輕量級的在線趣味測試，刺激用戶活躍的社群玩法。運營者可根據用戶特性設計測試題目，激發用戶好奇心，活躍已沉淀的粉絲，增強學習過程的互動樂趣，同時可以設置根據測試結果給用戶推薦課程。
2.1.2.10.1. 新建流程
「測試互動」的新建包含了設置測試信息、添加題目和結果頁設置三個步驟。
①在「設置測試信息」，運營者輸入測試名稱、簡介和設置有效時間；
②在「添加題目」步驟，需要加入測試活動的題目，支持單選和多選；
③在「結果頁」設置，需要設置測評結果，并可以向用戶推薦指定的課程，進行付費轉化。
2.1.2.11. 付費問答
「付費問答」是一個為商家增加變現的工具，學生付費向老師提問，獲取一對一答疑?！父顿M問答」需要先創建一個問答專區才能開啟，有點像建立一個問答專欄。當用戶在前端購買問答服務以后，運營者可以在手動邀請答主進行答疑。其次這個功能也設計得很完善，還支持設置用戶圍觀價格和圍觀分成。
2.1.2.12. 體驗小結
在體驗完這11個互動工具以后，我開始感受到小鵝通這個工具的魅力。從引流到激活、從留存到傳播，這11個工具幾乎能滿足一個知識店鋪運營多維度的需求。而讓我最驚嘆的是小鵝通產品的設計細節，比如一個普通的打卡功能，如果只是從前端體驗看，你根本無法想象這些小功能的后臺設置其實有這么復雜。而小鵝通為了降低商家的運營成本，幾乎支持每一個功能版塊自定義，給我最大震撼的就是「證書」這個功能，不僅提供多種證書設計樣式，連證書內容的每一個字段，都可以在后臺自行輸入，無需任何加工，實在是太方便了。
2.2. 商品
「商品」主要指實物商品和服務類商品的發布和管理，如果商家有周邊商品，可以通過實物商品來上架，服務類商品則是指虛擬服務，比如1V1咨詢、設計指導這樣的虛擬服務?！干唐贰箼谀康墓δ鼙容^簡單，我們就不過多贅述，大家可以親自體驗。
感謝閱讀，小鵝通的產品拆解第一部分就到這里，下一篇我們將會繼續拆解小鵝通后臺！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
通知是許多產品中不可或缺的一部分，它用于傳遞產品的一些新的信息狀態，幫助用戶能夠及時收到信息。
本文將討論五種類型的 UI 通知，以及何時以及如何使用它們的基本規則。
通知是產品能夠與用戶及時同步信息變化，及時發送重要通知，例如產品更新、信息提醒、互動提醒、新消息通知等。
消息通知是為產品賦能，為用戶提供幫助，便于快速獲取對應的通知信息，例如產品更新、信息提醒、互動提醒、新消息通知等，在 App 和網頁應用中最常見的信息交換方式則是消息通知。
消息作為一種信息交換方式，抽象其過程，即為“在達到某一觸發條件下，由發送方發送消息給到接收方，接收方可針對此條消息提供反饋”。
基礎的通知模塊通常有標題、內容、入口、徽標、識別圖標五個元素構成
標題區域：用戶傳遞消息的核心區域，整個通知的信息都是圍繞標題進行，一般標題以簡短精煉為主，讓用戶在最短時間了解到關鍵信息。
內容區域：主要描述更加詳細的通知內容，當然這里的內容也不建議超過2行，并且不要重復標題中內容
操作區域：通知分為可點擊類和不可點擊類，當通知模塊需要用戶點擊時，視覺上應該更加具象，如按鈕、箭頭，不要讓用戶產生思考。
圖標圖片：有意義的圖像可以強化通知的內容，例如，如果你將收到的消息通知用戶，你可以包含發件人的頭像。
通知的模式根據不同的場景也會有不同類型，接下來將一一講解這5種通知類型，以及使用場景。
徽標是一個小的填充橢圓形，可以出現在應用程序圖標上并指示未看到的更新。徽標可以有一個數字，用于通知用戶未讀通知的數量。用戶檢查更新后，徽章會從應用程序圖標中消失，并在新通知到達時再次出現。
感知：它可以對用戶產生積極的影響，在某些情況下，用戶可以將徽章視為有價值的獎勵，例如，徽章會通知用戶他們在社交網絡上收到新的點贊、評論，Nir Eyal曾在他的書“Hooked”中描述了這種心理效應。
視覺：紅色作為警惕色，用戶看到后會更具有點擊欲望，相對產品的一些數據指標會有對應的提升
需要用戶采取額外的行動，徽章本身不是通知，這是通知的警報，它只是說明了用戶有新更新的事實，用戶必須單擊或點擊帶有徽章的圖標才能看到實際消息，紅色為強干擾元素，對一些具有強迫癥的用戶很不友好，在體驗上會有一定的影響
一般用戶消息的通知，例如系統通知、社交中的點贊、評論、回復等內容
推送通知是出現在移動設備的鎖屏上并引起很多關注的通知。
很難讓用戶忽略該推送通知，如果用戶不進行處理，會長時間浮動在手機上
由于系統上app很多，會導致用戶對該類的通知處于麻木狀態，推送通知的效果不是很強
如果過度使用，頻繁的推送通知，即使它們很有價值，也可能會惹惱用戶
推送通知適用于重要且時間敏感的更新（即用戶設置的日歷提醒或警報、航班延誤或已交付訂單的更新），在您發送推送通知之前，您需要確保您將與用戶共享的信息是有價值的和時效性的，否則，最好使用其他類型的通知。
a、不要使用推送通知來提示用戶對應用進行評分
b、不建議將推送通知用于促銷或廣告
c、不要使用推送通知來鼓勵用戶返回應用，例如“好久沒見到你了，是否想念了呢”通知不會為用戶提供太多價值，需要向用戶明確說明他們應該返回應用程序的目的
d、允許用戶更改通知行為
用戶會收到一封電子郵件，其中包含有關更新的詳細信息，不過這類通知目前在國外的一些網站使用頻率比較高，根據習慣來講，國外更多的還是習慣用郵件的方式作為重要信息的交流方式，相比之下國內使用郵件來傳遞信息的頻率略低
給用戶更多的控制權，由用戶決定是否要訂閱電子郵件，如果電子郵件標題足夠好，用戶可能無需閱讀電子郵件就可以理解上下文。
周期長，國內用戶可能幾個月甚至1年都看不了一次郵件，此外，電子郵件可能會在用戶收件箱中丟失（即轉到垃圾郵件文件夾）
它需要切換上下文，當應用程序發送需要用戶操作的電子郵件通知時，用戶必須切換到電子郵件應用程序才能完成操作，這可能不是很方便，尤其是當您與移動設備上的應用程序交互時。
需要安全性時，想要使用電子郵件通知有兩個原因，首先，出于安全目的，你可能希望將電子郵件用作單獨的通道（即，當用戶嘗試登錄服務時，應用程序會發送一封電子郵件，其中包含有關新登錄嘗試的通知）。4.Toast通知
Toast 屬于一種及時性通知，當用戶進行操作時，及時給出反饋，通常在移動端顯示在界面的上、中、下三個位置，而web端通常顯示在頂部區域，toast持續一定時間后會自動消失，對用戶的打擾較小
Toast 是與當前頁面的內容強關聯，用戶無需離開當前頁面就能看到反饋消息
不會中斷用戶操作，出現時間短，對操作上無影響
丟失信息的風險，用戶注意力不集中時，會出現漏掉關鍵性信息的情況
Toast 是一種操作狀態，例如，消息發送時可以在消息發送成功時顯示toast“發送成功”
不要使用 toast 來提示與當前用戶操作無關的信息
不要將 toast 用于錯誤消息，由于 toast 會在短時間內消失，因此某些用戶可能無法閱讀錯誤消息
全屏覆蓋/模態窗口是出現在應用內容頂部并要求用戶做出決定的對話框窗口，這種類型的通知會在所有應用功能出現時禁用它們并保留在屏幕上，直到用戶完成所需的操作。
用戶在訪問應用程序時將 100% 看到通知，無法避免此通知。
它會阻礙用戶當前的操作，迫使用戶操作通知相關的內容
全屏覆蓋/模式窗口應僅用于需要用戶操作的最關鍵的系統更新，例如，它可能是阻止應用程序正常運行的錯誤或需要特定用戶決策的關鍵信息。
詢問用戶是否想接收特定類型的信息，當用戶明確選擇接收某些類型的通知時，說明他們的意愿更強，比產品強制傳輸消息效果較好
一些流氓軟件會發送一些系統通知，用戶無反饋后，還是會重復發送，特別是一些短信push，建議用戶沒有回復時，也不要發送后續通知，大部分人的本性是不愿意被脅迫做一些事。
不要在通知中包含敏感信息，例如一些文化特殊性、地域的特殊性等，防止出現觸及別人痛處的一些文字語言
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
雙鉆模型是設計師在創作過程中可以循環復用的系統，他不僅可以在我們設計界面時運用到，在一些數據提升優化等方面同樣適用，雙鉆模型可以使設計更加理性，它能夠在我們做項目時思維更加具有邏輯性，我們設計過程中更多的方法還是遇到問題，直接輸出解決方案，而該模型可以讓我們的思考過程更加具象化、合理化，他與常規的思考方式不同，該模型更加注重問題的本質，全流程圍繞問題去解決問題，并且在大的項目上能夠提升團隊效率，與其他模型不同，該模型的適用場景更加廣泛。
雙鉆模型是由2005年英國設計委員會正式公布并進行驗證，但是在之前BDC就提到過雙鉆模型，而我們現在看到的模型是通過改良后進行使用的，不過這不重要，我們只需要了解它的用處價值以及如何使用就行了。
我們看下圖中，雙鉆模型主要為4個大階段，發現期、定義期、發展期、交付期。左邊的鉆石我們可以理解為發散思維階段，我們為一個沒有目標的項目去腦爆出想法或者問題，其次選擇出正確的方向，右邊的鉆石我們可以理解為從正確的方向中抽取正確的事情，最后把正確的事情完成。
發現期我們理解為是探索期，該階段主要是發散思維和收集資料，研究問題的本質，把我們能想到與該問題具有關聯性的信息全部列出來。
質疑：對一切信息的質疑，簡單理解就是我們需要多問自己為什么，需求的合理性、用戶流程是否合理、為誰而做、會在什么場景使用、會遇到什么問題等等，把所有能想到的不合理事情列舉出來，這個小階段我們可以理解為是探索和發掘問題。
研究：針對問題去做對應的調研，如不知道用戶使用場景，我們通過用戶調研可以得到結果，需要做什么研究調研可以根據需求遇到的具體問題去使用不同的研究方法，例如一些訪談、競品分析、數據分析等等。
該階段主要是把發現期的問題收攏聚焦，即基于發現期的調研分析、問題洞察形成結論，尋找可以突破的機會點，例如我們在發現期發現的問題是用戶的目標是什么，影響用戶目標的點可能有哪些，那么在定義階段就需要針對我們提出的這些假想進行聚焦，用戶是怎么完成目標，通過什么場景完成目標等等，篩選問題時一定要綜合評估，尋找可行性。
該階段是已經開始要開始進行落地了，第一第二階段是找到正確方向，而現在則是用正確的方法去做正確的事情，我們要把聚焦的問題具象化，構思我們能夠想到的方案，比如設計前期探索定義的是年輕、輕盈，在該階段我們就需要根據關鍵詞去考慮如何進行設計，這個階段是一個不斷生產和推翻的流程，一直重復，直到找到能夠落地的方案。
這個階段就顧名思義比較簡單了，根據發展期確定的方案，最后進行實際的落地，并且是可實施、可執行的，通過團隊項目流程推動上線，最終展現給用戶。
以上便是雙鉆模型的定義，先舉個通俗的例子大家理解下模型，例如節假日我們想去旅游，a）我們去什么地方？參觀古都？自駕游？游樂園？這個就是發現期，我們把想去的想玩的全部列出來，b）經過篩選我們絕定去游樂園，這個就是大的方向，c）我們要去哪個游樂園？歡樂谷？方特大世界？這個階段就是發展期，我們要找到能去的地方，d）最后，怎么去？開車？跟團？玩多久？等等，這個就是交付期，可落地的。
當然這個案例是結合生活方便大家理解，在實際項目中它的用處不止如此。
網上也有很多雙鉆模型的案例，但大多都是偏向理論，并且案例也跟設計無關聯，我從設計角度單刀直入的引入雙鉆模型，很簡單，很粗暴～～
例如我們要做一個唱歌產品的改版，站在設計師的角度我們需要去定義他的基本風格和基本色彩規范等等，但是總不能上來就去做設計吧，我們要知道我們產品的群體是誰？具體的用戶屬性是什么樣的？有什么樣特征呢？等等。這個階段就是“雙鉆模型”的第一個階段，發現期。
發現期就是要發散思維，比如我們”唱歌“產品的用戶群體是年輕群體，用戶特征是18-25歲的在校大學生，用戶使用場景大多是宿舍、教室等校園環境，我們就需要去根據這些信息去進行設計思維發散，例如什么的風格符合這類群體，先把關鍵詞舉例出來，如年輕、活力、青春、潮流、二次元...，依據這些關鍵詞做一些飛機稿，不斷進行探索。
當然不止這一個思路，我們也可以通過競品分析的方法去擴展思路，如比較潮流的RAPAPP、二次元較重的B站，在比如現在的劇本殺相關的app等等，分析他們的設計風格和表現方式，嘗試融合出飛機稿。
小結：第一步的核心就是發散思維，把要做的產品背景信息全部羅列出來，通過橫向縱向的方式去散發關鍵詞，最后做出對不同風格的設計，進行探索。
像前面說的，該階段就是把發現期散發的想法往回收一收，畢竟那么多想法哪一個才是我們需要的，我們需要在這個階段去篩選出來。
我們按照年輕、二次元、潮流、國潮這些關鍵詞出了一些飛機稿，我們需要去收攏起來看看那些可以與產品特性和用戶屬性真正具有關聯性，假設用戶群體雖然是18-25歲的學生，但是我們通過訪談和其他調研方式發現這類群體中喜歡二次元歌曲的群體偏少，而潮流、國潮等關鍵詞更符合這類群體定位，并且也能夠跟產品的主打方向匹配上，那么就可以剔除二次元相關的飛機稿了。
該階段最好能收縮到同一個維度2-3個方案便于我們去進行驗證，假設我們通過后續調研發現，國潮與潮酷用戶群體喜好占比差不多，但是潮酷是產品未來的方向，我們就可以嘗試剔除國潮，但在潮酷這個范圍內可能還會存在多種飛機稿，這是我們就需要進一步篩選，比如通過延展性，宣傳性，用戶認知度以及用戶的審美特性等等多維度去篩選，最終保持少量的方案。
到了這個階段我們應該比較熟悉了，嘗試把上述的方案繼續收攏聚焦，提取出一個可行性方案展開后續的設計，具體怎么篩選，同樣可以繼續使用橫向和縱向維度進行對比，如潮酷風格方案還剩下2個，我們就可以通過用戶調研、競品分析去嘗試衡量優劣勢。
交付期其實就是我們設計側工作全部完成了，流程已經進入到了開發，我們把完整的設計稿、切圖等素材交付開發，同時還需要橫向輸出設計規范供團隊后續使用。
雙鉆模型用途非常廣泛，如數據方面、產品方面、設計方面甚至管理方面都可以使用到，在不同的領域使用的方法都類似，區別就是使用的深入如何，像本篇以純設計維度出發去使用雙鉆模型，使用的方式偏向單維度。
若以提升數據或優化用戶體驗為目標使用雙鉆模型，那么每一個階段的思維散發會變得更加廣泛，每條結果交叉的情況也非常多。
再次提醒，本篇只以設計維度出發教大家使用雙鉆模型
該模型是講述用戶使用產品的感受，它包含五個維度：有效（Effective）、效率（Efficient）、吸引（Engaging）、容錯（Error tolerant）、易學（Easy to learn），我們看每個維度的英文解釋，會發現首字母都是E開頭，所以被稱為5E體驗設計模型。
5E 模型在整個體驗設計流程中可用性非常強，它可以幫助我們的團隊更具有創造力和理性的分布式領導模型，它可以讓復雜的設計簡單化，可以幫助產品構建一個具有標準性的體驗框架，我們無論做簡單還是復雜的設計時都可以依據這5個維度進行體驗評估。
不知道大家有沒有發現，我們經常講的產品可用性或者易用性，其實跟5E模型很像，5E模型的五個維度其實就是產品可用性的基礎，當一個產品不滿足其中一條的時候，那這個產品就不存在所謂的可用性，接下來我們對這五個維度進行解析。
顧名思義，有效指的就是產品功能的有效性，產品是否能夠為用戶帶來價值，是否能夠幫助用戶完成目標，如果不能幫助用戶完成目標，那么就不存在產品有效性，就像我們買筷子是為了吃飯、買開瓶器是為開蓋、買車是為了代步.....如果筷子只給我們一只，開瓶器無法開啟瓶蓋，車子沒有輪子跑不起來，那這個產品就是殘缺的最基礎的可用性都未達到。
字面意思指我們在保證精準度的前提下保證完成事項的效率，準確度越高速度越慢，這個的衡量通常指產品與競品相比同一個任務流程效率的高低，以及出錯的頻率，假如我們刷抖音刷10個視頻需要1分鐘，而影響時間的因素是單個視頻的內容是否足夠吸引，亦或者網速是否夠快。
這個就比較好理解，就是界面是否能夠吸引用戶，能夠讓用戶愉快的使用我們的頁面，當然不止視覺上的，人的感知包括視覺、嗅覺、觸覺、味覺，一個優秀的界面是不僅僅只有視覺，它還可以通過視覺的感知引起用戶的遐想，例如一個美食的產品，我們把首頁做的更加紅火、火爆可能就會引起用戶遐想起辣、熱等感知。
容錯我們可以理解為是一個防錯機制，或者說是容錯率，當用戶在操作某一個功能時，容易發生錯誤，我們就需要讓產品幫助用戶及時更正錯誤，例如自動修復，在比如打王者榮耀時我們選擇陣容都會經常說容錯率，這里就是指5個英雄，2個打團時可能優勢不是那么大，但是另外3個的容錯率非常高能把劣勢補救回來，而產品的容錯就相當于這3個英雄，負責把用戶可能出現的錯誤操作給補救回來。
易學和產品如何支持初次使用和更深度的學習相關。一個產品可以使用一次，或一會兒，或一天。它可以完成一個容易的或復雜的任務，用戶可能是一個專家或新手。但每一次使用，界面必須能夠記憶或重新學習，而且使用一段時間后能夠發掘更多的功能，通常產品的易學性體現在用戶的操作效率。
有效性就像他定義的那樣，存在即合理，存在差異的是準確性，基本每個產品都必須具備有效性，例如地圖軟件，我要做公交車，能夠通過該功能查看離我最近的一輛公交還有多久到，這個功能的存在就是為了便于我們乘坐公交，防止無效等待，而差異上就是公交到站的時間可能因為某種原因不夠準確，這個就是有效上的差異因素。
如何讓用戶體驗更好，效率是其中任何重要的一個點，部分的產品的存在就是為了“讓人變懶”，例如外賣、打車、購物等等，以聊天為例1v1聊天時消息能否及時的傳輸，群聊時同時加載n條消息，而我們能夠第一時間看到信息，在新聞資訊的軟件中，怎么保證用戶閱讀的效率，同樣的產品怎么排版才能夠符合用戶閱讀習慣，提高效率，大多行業的產品想要做到好的體驗，效率是不可缺失的。
一個產品通過不同的視覺表現或者音樂效果能夠加強用戶在感知層的認知，不同的群體，不同的階段，所展示的風格不同，像下圖中的金融產品，使用紅色為主色傳遞的感覺是積極向上的感知，因為在國內股票和基金里紅色代表漲，在看閱讀產品和教育產品，都根據產品特性和用戶群體來設定風格，試想一下，一個閱讀的軟件做成卡通風格，那會不會嚴重影響閱讀呢。
上面所說，容錯更像自動修復或者幫助用戶解決錯誤操作問題，在系統上我們可能會經?？吹?，例如電腦崩潰時像MAC系統會詢問是否重啟，而Windows崩潰時會直接藍屏幫用戶自動重啟。
在產品中也會有相關的功能，例如聊天頁面中，我們因為網絡因素發送失敗會進行紅點提示，包括一些內容加載失敗會提示重新加載等等。
易學應用場景非常之多，我們在做產品時大多都是優先考慮用戶使用是否有阻礙，這個概念還是比較成熟的，當然產品功能有些時候也避免不了復雜化，這時我們可以用新手引導進行解決，但是還是需要提醒大家，在設計頁面的時候一定一定要優先遵循識別性和認知性，其次再去考慮創意，例如一個分享圖標，把它設計的不像一個分享，設計感是有了，但是可用性無了。
為什么分享這兩個模型呢，這兩個我理解是體驗設計的基礎，雙鉆模型讓我們從0-1一步一步解決問題，而5E模型是在我們解決問題的過程中時刻提醒我們不要偏移基礎的體驗，就像開車一樣，雙鉆模型就像是一個地圖的起點與終點，5E模型就像在行駛這段過程中的超速提醒、危險駕駛提醒等。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
對于很多設計師來講在設計界面過程中往往會忽略掉很多的細節，比如卡片的排版、文字的排版、各種狀態的反饋等等，特別是剛入行的設計師在做頁面時往往是直接拿到競品的頁面搬運到自己產品上，這種做法理論上不會讓自己的頁面出錯，但是很多人往往忽略了一點，就是別人這么設計的目標是什么，是否會匹配自己的設計目標，如果不了解這些貿然的去搬運設計，那么時間久了會養成一個不好的習慣，需要設計師去進行設計時可能就會遇到很多難點，作為初級設計師或者剛入行的設計師，前期可以去進行搬運設計，但是一定要了解別人為什么這么做。
接下來將分享12個設計上的小技巧，大部分在日常設計中都會遇到，了解到這些設計細節，可以讓我們的界面更加高效、易用、美觀提升用戶體驗。
一、快捷交互
二、提升交互路徑
三、問題前置
四、提升可讀性
五、點擊引導
六、注意飽和度
七、禁止特殊字體
八、按鈕也要有層級
九、圖標保持一致
十、利用對比
十一、圖文疊加
十二、注意遮罩透明
我在做界面時可以時常利用交互手勢去幫助用戶提升操作效率，避免繁雜小操作步驟
左側為什么錯？？
左圖中針對單條消息的操作匯聚到了icon內，對于用戶理解成本比較高，當用戶想要去刪除或者屏蔽消息時需要通過聚合入口才能完成操作，大大的提升了用戶操作成本。
建議正確做法～～
我們可以在類似的消息場景或者其他列表形式的場景中，添加一些交互手勢，隨著手機系統的更新，用戶的操作習慣已經被各大產品培養的非常成熟，并不用擔心用戶無法操作的情況，增加手勢有弊端也有優勢，右圖中手勢增加了用戶首次使用的學習成本，但是降低了高頻功能的操作成本，這個理論上是可以接
受的。
實際產品中的運用
利用拇指定律把關鍵的操作入口元素等，放置右側提升用戶操作效率。
左側為什么錯？？
左圖中把按鈕放置了模塊左下側，這樣是不利于用戶進行操作，當然如果整個模塊的熱區都是同一個，這樣并沒有什么問題，用戶點擊卡片區域任何位置都能夠完成下一步操作，如果出現一個模塊內存在多個熱區入口，而用戶想要到達目標必須通過按鈕點擊才能進入，那么左圖中的排版位置就會提升用戶的操作時間。
建議正確做法～～
當一個頁面內出現多個相同模塊或者一個模塊出現多個熱區入口時，按鈕點擊區域有限，我們設計時就可以利用拇指定律進行排版，如右圖中布局，將按鈕放置右側可以便于用戶在右手操作時快速到達目標，因為國內使用右手的人數遠遠大于左手用戶，所以我們需要滿足大部分的體驗，合理利用拇指定律。
相關定律：費茲定律、拇指定律
實際產品中的運用
對于我們來講很多東西是簡單的，但是不乏會有一些用戶是陌生的，對于他們來講可能會有填寫成本。
左側為什么錯？？
左圖中理論上并不是錯，我們經常設計表單時都會用的提示話術，但是我們需要考慮更多維度的東西，對于我們來講填寫這種表單非常簡單，例如個別用戶，可能會臨時忘了郵箱格式，又或者輸入手機號時多填了一位數等等情況，用戶錯誤一次操作步驟就會多一步，反之就是降低使用產品時的體驗。
建議正確做法～～
如右圖中，我們設計時可以更改提示的話術，幫助用戶把問題前置，當用戶看到提示郵箱時就會按照格式去填寫，通過把手機號的位數拆分，讓用戶更好的記憶數字，這樣無論對產品還是用戶都沒有任何損失，反而能降低錯誤頻率。
實際產品中的運用
無論是頁面還是模塊，用戶在閱讀時是已掃讀的方式進行瀏覽，我們需要保證頁面的文字元素具備一定的規律，以此來提升閱讀效率。
左側為什么錯？？
左圖中可以看到，文字與輸入框放在同一列進行展示，這樣一方面不利于后續的文字擴展，通常這種表單填寫的頁面，在頁面中都是具有很大的空間位置，這樣排布會造成視覺上的不規律和擁擠，降低了篩選效率，當然如果是模塊區域很小的情況下，可以適當的進行使用。
建議正確做法～～
右圖中我們把文字與輸入區域上下排布，雖然文字長短不一，但依據對齊原則在豎列情況看是具備對齊規律的，有效的提升信息篩選效率。
實際產品中的運用
我們在做系統功能模塊時需要注意添加功能點擊引導，用戶對此類消息模塊認知上會默認不可點擊，因此需要我們加以引導。
左側為什么錯？？
我們常見的消息模塊內容為兩種，一種是互動類消息即用戶與用戶，另一種時是系統消息即產品推送的內容，前者基于用戶習慣而言用戶已經沒有使用成本默認是可以進行點擊交互，后者因為部分產品會把系統消息作為展示的形式給用戶，但是有些產品的系統消息卻是可以點擊交互，這就導致了用戶認知上出現了混亂，左圖中像系統通知功能通知其實從視覺上看，并不具備點擊欲望，因此可能會對用戶造成錯誤的理解。
建議正確做法～～
當我們在設計時需要注意，若消息列表中存在系統類消息并且可以進行交互，在設計時可以添加向箭頭、紅點提示等方式告知用戶可以點擊，如果該功能有數據指標，這種方式也同樣能賦能產品指標。
實際產品中的案例
目前市場上產品幾乎都有深色版本，我們在設計時深色版本的顏色時需要注意飽和度的高低，同樣的飽和度在黑色背景上會比白色背景上更加亮，這跟人的視覺感官有很大的關系，因此我們在做黑色版本時需要注意是否調整飽和度。
左側為什么錯？？
在黑色背景中使用過高的飽和度會刺激眼睛，很多深色版本都是從白色模式通過反向顏色直接調整，而彩色元素會直接運用到深色中，那么就會造成一個問題，因為我們習慣在白色模式下看顏色，忽然切換到黑色中看彩色刺激程度非常高“就像黑夜中忽然打開手電筒”，對眼睛的傷害很高。
建議正確做法～～
我們在設計深色版本時可以根據產品主色降低飽和度，包括圖標等元素，以此來緩沖對用戶視覺感官的刺激，目前很多大廠的處理方式是直接在彩色元素上添加一層黑色透明遮罩進行處理，這樣無需在添加更多的顏色規范。
實際產品中的案例
在設計模塊或者頁面時不建議使用特殊字體來突出文字層級，這樣會導致視覺不統一，以及開發成本增加。
左側為什么錯？？
左圖中灰色字使用了特殊字體，看起來雖然好看，但在實際開發中會導致開發成本增加，我們產品一般使用的是系統字體，若使用特殊字體需要讓開發同學添加對應字體包，這樣會導致我們的產品包的內存過大，除非產品中默認一直使用該特殊字體，這樣才有使用的價值。
建議正確做法～～
一般系統字體就能夠滿足我們的設計需求，在UI設計中我們可以通過不同的字體粗細來調整文字層級，這樣能夠保證視覺更加統一，減少產品包大小。
實際產品中的案例
在設計時需要注意多個入口在同一位置時，需要把它們進行層級劃分，避免影響用戶決策
左側為什么錯？？
圖中可以看到，兩個面性按鈕非常明顯的在模塊中，當用戶在瀏覽頁面中很容易出現困惑，到底需要點擊哪個才能購買預定，因為兩個都是面性無法快速進行定位入口，這樣不僅影響用戶決策效率，還會影響產品點擊率。
建議正確做法～～
建議設計類似模塊中時，無論是pc還是移動端都需要對入口進行結構劃分，這樣能夠使用戶在瀏覽頁面時快速定位到入口，提升決策效率，做體驗是解決用戶的思考時間。
實際產品中的案例
在UI設計中使用圖標時，要保持一致性，確保他們共有相同的視覺風格，相同的重量，填充和描邊。不要混搭。
左側為什么錯？？
可以看到左圖中的圖標并不統一，線性里面摻雜著面性點綴，這在UI設計中嚴重違背了一致性的原則，會導致我們的頁面不夠嚴謹專業。
建議正確做法～～
在設計圖標時，首先要保證圖標風格一致，其次在這個基礎上保證圖標的描邊粗細、視覺占比重量、顏色等，不要出現混搭風格。
實際產品中的案例
在設計頁面模塊時，可以多利對比度的方式來體現設計的表現力，鮮明直接的色值能夠直接表達事物的性質以及特點，通過對比，也能夠更加清晰的強調設計中的重點，這樣給用戶的印象會更深刻，同樣會給產品帶來一定的趣味性。
左側為什么錯？？
左圖中單看視覺也沒問題，只是在表現上圖標與背景融入到一塊了，導致視覺表現力較差，在設計中如果符合產品風格的前提下，我們可以避免這種方式，這種方式雖然具有視覺效果但不夠強，對用戶的記憶點不夠深刻。
建議正確做法～～
設計到類似的模塊時我們可以利用對比的關系，以此突出視覺元素，通過顏色焦點引導用戶關注，強化用戶印象同時還能增加頁面的視覺表現力和氛圍感。
實際產品中的案例
在設計圖文疊加的卡片或者頁面時，我們需要注意不同明度的圖片上，文字識別是否有阻礙，一般情況會通過遮罩方式避免這個情況。
左側為什么錯？？
左圖中在深色圖片下字體的可讀性是沒有問題的，但當出現文字底部區域的圖片相對復雜時便會影響識別，第二種情況當圖片明度過高時文字同樣無法識別，試想一下，一張白色調性的圖片上放文字，那基本無法看清，嚴重影響閱讀體驗。
建議正確做法～～
在界面設計時如果遇到類似的卡片，建議在文字區域添加漸變遮罩的方式，以此保證文字的識別度，或者添加純黑色透明遮罩進行處理，這樣可以兼容不同環境的圖片與文字的重疊，保證基本的閱讀體驗。
實際產品中的案例
UI設計中經常會遇到彈窗，彈窗是需要配合頁面遮罩來讓用戶進行專注操作，不同的遮罩透明度所帶來的專注度也不同。
左側為什么錯？？
左圖中我們看到，遮罩的透明度過低，我案例設置的是17%，此時彈窗內容與頁面內容結構上區分并不是很明顯，一般彈窗是用來讓用戶跳脫頁面內容，從而瀏覽彈窗內容，轉變用戶目標，當彈窗無法聚焦時便很難達到目標，并且視覺上層級更加混亂。
建議正確做法～～
右圖中案例我把透明度調整到了37%，我們此時再看彈窗很容易就忽略頁面內容，因為灰色越高，遮擋度越高，用戶跳脫感就越強，這樣我們可以讓用戶專注彈窗內容，同時視覺結構上也區分很明顯。
實際產品中的案例
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
UI新手設計學習100問，顧名思義，主要是通過100個常見問題解決初學者在學習UI設計初期的困惑，比如什么是UI設計？設計的目的是什么？UI設計需要學會什么必備技能？UI設計又有什么常見的學習方法等等。
為什么用問答的形式？這是受一個朋友的創作啟發，讓我確定了以這種形式來創作，這樣更易于大家理解和學習。另外這個欄目的內容，我也將會盡自己最大的精力，從百度百科、維基百科以及國內外的設計書籍中一邊查一邊寫，努力制作成一本UI設計新手學習的知識手冊，解決新手初學者的種種困惑，給他們提供一個學習的知識樹和進度條。
這個欄目會有多少字，多長更新完？我已經完成了第一章大部分內容，目前已經撰寫了約5000字，平均每個問題800字，以我目前創作內容的篇幅看，這份專欄應該在10萬字左右，相當于一本300頁左右的實體書籍。至于完結時間，除了需要參考百度百科和維基百科，還要翻閱各種設計書籍和查找資料，我個人預計時間3個月，不過如果大家喜歡，我就會加快腳步！
我在2022年轉型到知識付費以后，認識了太多的設計師朋友，也建立了自己的社群。其中讓我印象最深的有這么一類用戶群體，他們很早就在大學期間為了學習UI設計，花了很多錢報了各種培訓班，但最后的結果卻不如人意。很多培訓班太注重于軟件技能的操作，而忽略UI設計其實是一門學科，如果學生知其然不知其所以然，那么即便學會了Sketch、Figma這些工具，他們也不知道學了UI設計到底能有什么用，未來又該如何去規劃自己的職業生涯。
這些朋友里面，留給我印象最深的，是一個剛畢業的女孩。她給我說，貸了兩次款，畢業后還是不知道UI設計到底能干啥，現在勉強找到一份設計的工作，每個月還要還著貸款走。我當時把這個朋友免費邀請到我的私董會星球了，讓她去看我講的書、錄的課程，期望能給她帶來一絲溫暖和希望。
其次在我最早開始建立社群的時候，有一個探友在站酷看到我的產品拆解以后，跑來加我，然后給我說：“我一直質疑培訓班老師的講課內容，因為我覺得設計這門職業，如果只學會軟件，那是不夠的，肯定需要學習一些設計原則和理論。所以當我看了你的產品拆解以后，我很受啟發，我覺得學會這些設計理論特別重要?！?br />
這些真實的故事，讓我印象深刻，也讓我開始反思，造成這種現象的原因是什么。所以這個專題的內容，在很久之前就藏在我的心里了。我想去做一個UI設計的知識樹，給那些準備學習UI設計以及正在從業的設計師們提供一個清晰、可視化的學習體系，從而幫助他們從一個宏觀、系統的角度去勘察這個行業，發展趨勢是什么、是否值得入行，從0到1又需要哪些步驟。
這個專題，主要為這幾類朋友而創作。第一，正在上學，準備想學習UI設計的大學生；第二，剛畢業準備報班學習UI設計，或已經從培訓班剛畢業出來的應屆生。第三，雖然已經從事UI設計三五年，但對UI設計還是一知半解，混混霍霍做設計的職場設計師。
最后，這個專題是我的第一個付費內容，我將會免費分享30個內容，如果你覺得有價值，可關注我們獲取全部內容。
目前我把這個專欄拆分為四塊內容，分別是認識UI、就業前景、學習方法和如何求職四個章節。
第一章是認識UI，我會從設計的目的、UI設計的定義和分類開始讓初學者對UI設計有一個初步的了解。（這個部分的內容也許適用于80%的UI設計師，雖然很多設計師已經從業了多年，但對UI設計還是一知半解。）
第二章是就業前景，通過UI設計當前的工作內容、薪資收入和職業發展等維度告訴初學者UI設計的就業趨勢，降低就業選擇風險。
第三章是學習方法，我想給初學者提供一個學習知識樹和能力晉升模型，只有知道最終要去哪里，自己當前又在哪里，應該如何努力，他們才能像玩游戲一樣，每天對知識的汲取都充滿動力。
第四章是如何求職，通過拆解企業對UI設計師的招聘需求，抽絲剝繭地讓初學者理解求職的本質和方法。
這是初步擬定的目錄，非最終交付目錄。其次這份專欄我將會篩選30個左右的問答免費給大家分享試看。
1. 認識UI
什么是設計？（已完結）
設計的目的是什么？（已完結）
設計和藝術的區別？（已完結）
UI設計是什么？（已完結）
UI設計有什么分類？（已完結）
UI和UE、UX的區別？（已完結）
UI設計和平面設計的區別（已完結）
UI設計和電商設計有什么區別？（已完結）
UI設計有什么價值？
國內UI設計的發展歷程
2. 就業前景
UI設計師現在的就業前景怎么樣？
哪些公司和行業需要招聘UI設計師？
UI設計師飽和了嗎，還值得選擇嗎？
失業的UI設計師越來越多，還能選擇UI設計嗎？
UI設計師的工作流程是怎樣的？
UI設計師主要負責什么工作內容?
新手UI設計師的薪資收入一般在哪個水平？
UI設計師的薪資收入晉升模型
UI設計師會經常加班嗎？
UI設計師的工作壓力大嗎？
UI設計師職業發展路線圖是怎樣的？
UI設計師是不是過了30歲就會過氣？
技術崗位未來是否一定要朝著管理崗發展嗎？
一二三線城市的環境對UI設計師就業和成長有影響嗎
談不上對UI設計特別熱愛，但覺得UI設計工資高，可以選擇這個行業嗎？
學會UI設計可以創業或做自由設計師嗎？
3. 如何學習
UI設計師需要學習什么內容？
UI設計師需要掌握哪些必備技能？
UI設計學習的步驟是什么？
需要多久才能成為一個優秀的設計師?
除了設計，UI設計師還需要培養什么職業技能？
學習UI設計的常見方法
UI設計可以自學嗎？
自學UI設計有什么難點和挑戰？
審美能力不好，可以學好UI設計嗎？
UI設計需要學習什么軟件?
學會軟件一般需要多長時間？
UI設計需要買蘋果電腦嗎？
用Photoshop可以設計UI嗎？
UI設計需要看什么設計書籍？
有哪些免費學習的教程網站？
錄播課程和設計培訓班有什么區別？
有那些物美價廉的付費課程推薦？
選擇設計培訓班需要注意什么？
培訓班學完以后就能成為UI設計師了嗎？
培訓班對找工作有幫助嗎？
UI設計師需要美術相關專業嗎
什么樣的專業更適合UI設計？
學歷對UI設計師的學習有影響嗎？
設計臨摹對新手UI設計師有什么幫助？
設計臨摹有什么技巧和方法？
設計臨摹的作品可以加入個人作品集嗎？
一名好的UI設計師應該具備什么素質？
優秀的設計師都有什么好的設計習慣？
4. 如何求職
企業招聘UI設計師的流程是什么？
企業招聘UI設計師主要考核標準是什么？
企業愿意招聘新手UI設計師嗎？
新手UI設計師應該選擇什么樣的企業？
去不了大廠，新手設計師是不是就沒前途？
創業團隊、小公司值得新手UI設計師去嗎?
UI設計師的求職流程是什么？
UI設計師求職需要準備什么資料？
簡歷設計對UI設計師重要嗎？
如何設計一份優秀的作品集？
新手UI設計師有什么求職技巧？
學歷低對UI設計師的求職有沒有影響，如何規避？
沒有工作經驗怎么辦，能找到工作嗎？
一直找不到工作怎么辦，是不是應該放棄UI設計？
設計是什么？為什么需要設計？UI設計這個行業又是怎么誕生的？UI設計師的工作內容具體是什么？非科班畢業的大學生適合從事設計行業嗎？這個行業需要學習多久才能成為一名優秀設計師？作為此次專題的開篇內容，我們在這個章節將會抽絲剝繭向大家介紹UI設計的由來、定義、分類和價值，幫助大家快速對UI設計這門學科有一個宏觀的了解。
我們先看百度百科對設計的定義。設計，是指設計師有目標、有計劃地進行技術性的創作與創意活動。維基百科認為，所謂設計，即“設想和計劃，設想是目的，計劃是過程安排”，通常是指有目標和計劃的創作行為及活動。
著名的美國設計理論學家維克多·帕帕奈克認為，設計是為構建有意義的秩序而付出的有意識的、直覺上的努力。他認為設計有兩個步驟。第一步：理解用戶的期望、需要、動機，并理解業務、技術和行業上的需求與限制。第二步：將這些知道的東西轉化為對產品的規劃（或者產品本身），使產品的形式、內容和行為變得有用、能用、令人向往，并且在經濟和技術上可行。
簡單總結一下，設計是有目的的，有計劃的、滿足用戶的期望的行為。比如企業需要設計一個官網進行對外宣傳，網站的設計就屬于有目的、有計劃的工作，而宣傳則是企業的核心需求。
為什么我們需要先了解“設計”的概念？這是因為UI設計只是設計的一個細分領域，設計的種類非常多，設計在許多領域都有應用，涉及的方面也比較廣泛。只有初步了解這個宏觀的大概念，我們才能更清晰地看清楚UI設計的本質，從而為我們的學習進行指導。
參考文獻：
百度百科-設計
維基百科-設計
《步步為贏：交互設計全流程解析》- 董尚昊
我們先看世界上第一所完全為發展設計教育而建立的學院包豪斯對于設計的三個基本觀點。
①設計是藝術與技術的新統一；②設計的目的是人而不是產品；③設計必須遵循自然與客觀的法則來進行。
包豪斯提出“以解決問題為中心”的設計理念。他們認為設計是為了解決問題，不論是設計一個水壺，還是一款手機應用軟件，設計師都是在為他人服務，在幫使用者解決問題。這個設計理念深深地影響了設計界。設計是理性和感性的結合，并以解決問題、滿足人們的需要為目的。
中國現代設計和現代設計教育的重要奠基人之一、美國設計教育最高學府——美國藝術中心設計學院教授王受之在他的著作《世界現代設計史》中寫過這樣一句話：“設計是為他人服務的活動。”
日本當代國際級平面設計大師藝術總監原研哉在《設計中的設計》一書中也有類似的表達：“設計的實質在于發現很多人都遇到的問題然后試著去解決的過程?！?br />
綜上所述，設計的目的是用設計方案來滿足用戶的需要，而不是單純產出設計師認為美觀的方案。這是設計過程中最重要的指導原則之一。如果不理解設計的本質，我們在以后的商業設計中就很容易陷入一個怪圈，我覺得這個界面這樣設計得非常好看，但客戶卻讓我去臨摹另外一個我認為很普通的產品界面，客戶覺得那個才是他想要的。
參考文獻：
《步步為贏：交互設計全流程解析》- 董尚昊
我們看看維基百科對藝術的介紹。藝術是指憑借想象力、經驗等綜合人為因素的融合與平衡，以創作隱含美學的器物、環境、影像、動作或聲音的表達模式。而百度百科則對藝術沒有明確的定義。藝術是一種社會現象、社會事物，屬上層建筑中的社會意識形態，其次也指向各種技術活動，比如畫、雕刻、建筑等活動。
藝術的目的可以分為無動機的及有動機的兩類。無動機的藝術是指那些本來就是人類不可或缺一部分的藝術，這類的藝術超越個人，或是不是為某一特定目的所創作。有動機的藝術是指那些因為特定目的產生的藝術?？赡苁菫榱苏蔚淖兏?、表達特定的感情、陳述個人心理，或是作為一個交流的工具。
原研哉在《設計中的設計》對設計和藝術也發表了自己的看法。
藝術說到底是個人意愿對社會的一種表達，其起源帶有非常個人化的性質，所以只有藝術家自己才知道其作品的來源。而設計，則基本上不是一種自我表達，它源于社會。設計的實質在于發現一個很多人都遇到的問題，然后試著去解決的過程。
簡單總結，設計和藝術有很多重疊的部分，兩者最本質的區別是設計的本質是滿足需要，包含更多的商業述求，而藝術的目的是表達藝術家對世界的看法，不受外界的約束。為什么要弄懂這兩者的區別，這是因為在商業設計中或許不會給你有太多充足的時間去完成完美的稿子，而是要以甲方或企業的設計目標為主、商業設計，不是藝術，而是要通過設計滿足甲方的需求。
參考文獻：
維基百科-藝術
《設計中的設計》- 原研哉
由前UI設計屬于近代興起的設計分類，這是隨著科技的快速發展才催生出來的新興行業。目前對于UI設計的定義，目前國內有兩種流派。
第一種，UI設計包含界面設計（Graphical User Interface，簡稱GUI）、交互設計（Interaction Design，簡稱IxD）和用戶體驗設計（User Experience Design，簡稱UX）。
我們先看百度百科對UI設計的定義描述。UI是User Interface(用戶界面)的簡稱，是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。UI是一個廣義的概念，可以通過以下三個層面來理解UI的概念。
首先，UI是指人與信息交互的媒介，它是信息產品的功能載體和典型特征。比如以視覺為主體的界面，強調的是視覺元素的組織和呈現，包含圖形、圖標、色彩、字體等，這就是我們常說的視覺表現層，用戶從視覺就可以直接感知的部分。在這一層面，UI就是用戶界面，也是國內普遍對UI設計的認知。
其次，UI是指信息的采集與反饋、輸入與輸出，這是基于界面而產生的人與產品之間的交互行為。在這一層面，Ul可以理解為User Interaction，即用戶交互，需要通過界面對功能的隱喻和引導用戶來完成對應的操作。因此，UI不僅要有精美的視覺表現，也要有方便快捷的操作，以符合用戶的認知和行為習慣。
最后，UI的高級形態可以理解為User Invisible（中文：看不見的）。對用戶而言，在這一層面UI是“不可見的”，這并非是指視覺上的不可見，而是讓用戶在界面之下與系統自然地交互，沉浸在他們喜歡的內容和操作中，忘記了界面的存在。其實這就是用戶體驗，不僅僅是界面，而是以用戶為中心進行界面結構、行為、視覺層面的設計。
從百科的對UI設計的定義可以看出，UI設計包含了界面設計、交互設計和用戶體驗設計，這也是國內眾多UI設計書籍中的對UI設計的定義。比如在《術與道：移動應用UI設計必修課》、《視界·無界：寫給UI設計師的設計書》、《UI設計精品必修課》等國內設計書籍都有類似的觀點。甚至有這么一個很流行的比喻：如果把一款軟件產品比作一個美女的話，視覺就是一個美女的化妝和打扮，交互就是一個美女的五官位置及骨骼體態，用戶體驗就是美女是否善解人意、功能貼心、易用好用等。
第二種，UI設計、交互設計和用戶體驗設計是獨立的學科，他們雖然有很多重疊部分，但交互設計和用戶體驗設計不屬于UI設計，甚至UI設計等同于界面設計。
在Joel Marsh的《用戶體驗設計：100堂入門課》這本書中，作者舉了個例子：“UI和UX（用戶體驗設計）是兩種不同的工作。如果有的公司有‘UI/UX’這一職稱，那說明這家公司根本不了解什么是UX，或者他們想花一份錢就讓人做兩份工作。要當心?！?br />
在《這才是用戶體驗設計：人人都看得懂的產品設計書》里，作者認為界面設計包括信息層和呈現層。UI設計的范圍比界面設計要小得多，通常僅關注虛擬產品的信息呈現，而且較少涉及藝術向的視覺設計。信息層則由交互設計師負責，待界面上要呈現的信息架構和具體信息明確后，UI設計師才開始設計工作。其次UX設計師主要關注上層設計，而UI的工作非常細，比如如按鈕、字體的設計。
這種觀點也是目前國內多數企業和設計師對UI設計的定義，UI設計就主要是負責界面設計的工作，尤其指移動端產品界面，比如APP、智能設備等。
結合以上兩種流派對UI設計的定義，我認為，從視覺層面，UI設計可以定義為用戶界面設計，不管是web端、移動端還是其他智能設備，凡是涉及到用戶界面的設計，都可以歸納為UI設計；從交互層面，UI設計還需要思考界面對功能的隱喻和引導，從而幫助用戶完成對應的操作；從體驗層面，UI設計需要從視覺、色彩、行為和交互等方面為用戶提供優秀的體驗，讓用戶可以和系統自然地交互，沉浸在他們系統操作中。
總之，一名優秀的UI設計師，絕非只是畫好圖標、完成界面設計這樣的基礎工作，而是從整個產品的用戶體驗出發，從視覺到實際操作，為用戶提供最友好的使用體驗。理解這個概念，我們才能確立真正的學習目標和職業定位，朝著一名優秀的UI設計師而努力。
參考文獻：
百度百科-UI設計
《術與道：移動應用UI設計必修課》- 余振華
《視界·無界：寫給UI設計師的設計書》- 王涵
《UI設計精品必修課》- 常麗 李才應
《用戶體驗設計：100堂入門課》- Joel Marsh
《這才是用戶體驗設計：人人都看得懂的產品設計書》- 李磊
從用戶人群劃分，像淘寶、美團這樣以個人消費者（Customer）使用為主的產品，稱為C端產品，屬于最常見的UI設計，稱為C端UI設計；而像有贊、微盟這樣的以服務企業（Bussiness）的產品，稱為B端產品，這就是B端設計師的由來，目前市場對B端UI設計師的需求比較大。
從使用設備劃分，從事電腦端設計的稱為WUI（Web User Interface），也就是網頁設計師，從事移動端設計的稱為GUI（Web User Interface，圖形處理設計師），是我們普遍理解的UI設計師。
從設計對象劃分，UI設計可以分為電腦界面、APP界面、平板、智能手表、車載導航設備、智能電視界面、可穿戴設備界面、醫療及各種數碼機床等自動化控制界面和微型嵌入式設備界面等類型。
從交互方式劃分，UI設計可以分為GUI和VUI，GUI就是我們上文提到的圖形處理設計師，而VUI（Voice User Interface）則是通過語音交互的界面設計，比如小度、天貓精靈。
從行業劃分，UI設計師可以分為不同行業的設計師，比如從事醫療產品的UI設計師，從事人工智能的UI設計師。
簡單總結，未來隨著各種智能設備、人工智能、AR的發展，將會誕生出更多細分行業的UI設計師，不管是現在最火爆的B端設計師，還是車載設計師，未來面對日新月異的科技發展，只有理解UI設計的本質和方法，才能應付越來越多的不確定性。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
這是一篇醞釀了比較久的內容了，來講解 B 端設計規范和組件庫的分享。這幾年網上出了不少類似的分享，雖然都寫得很全，都還是覺得不夠滿意，缺了一點點細節。
所以我自己出一版，希望能幫助你們一次性解決這些問題。
B 端項目設計中，設計規范和組件庫是一個繞不過去的檻。作為專業的 B 端設計師，必須有自己完成設計規范和組件庫的能力。
所以，首先我們要先理清楚什么是設計規范和組件庫。
設計規范是項目設計中要遵守的要求、細節、準則，規定了諸如色彩、字體、柵格、間距、圓角等要素的規則，這些內容都是可以在大量設計元素中應用的細節。
換句話說，設計規范就是提取在項目中會廣泛使用的要素，并進行統一制定的過程，防止設計師在設計過程中隨意發揮，導致項目統一性的崩壞。
組件庫，是通過梳理項目中應用到的按鈕、開關、滑塊、日歷、下拉菜單等控件、組件的設計樣式、狀態、交互規則，再將它們統一復用到項目的不同頁面中去。
嚴格意義上來說也是設計規范的一部分，是基礎規范的進一步延伸，但還是單拎出來講。因為組件庫的應用不僅僅是設計統一性的問題，還融合了 ”組件化“ 的編程思路在里面。
組件化：將復雜系統拆分成不同功能獨立的模塊并重組的過程，且每個模塊包含對應的狀態和屬性。
對于程序員來說，一個項目就是若干功能模塊的合集，往往是先開發這些功能模塊，再搭建對應的完整頁面，而不是看一個頁面開發一個頁面。
所以制定完善的組件庫，除了提升設計質量外，還可以很好的提升開發效率，推進項目進度。
設計規范和組件庫的搭建，就是一個由下至上的設計鏈路，通過對細節的制定來實現最終的項目表現層?？梢越柚鷱V為流傳的分子原理來理解：
任何成熟的 B 端項目都應該具備自己的設計規范和組件庫，雖然有很多小團隊在前期推進項目時，因為各種問題沒有搭建或落地設計規范，但并不代表他們在招人的時候沒有要求。
在今天搭建 B 端項目規范時，新手還有一個普遍的問題：
項目規范和開源框架的規范有什么區別，如果選了一套開源框架做設計，設計師不就不用做規范了？
初級設計師會這么想并不奇怪，因為以 AntDesign 為首的開源框架做的實在是太完善了，不僅囊括了整套的 Web 色彩系統，還有各類常用的、不常用的交互組件。
它們不僅僅提供了相關的設計源文件，也給開發提供了對應的代碼和接口，方便程序員應用。看起來我們只要拼拼組件就可以和開發無縫銜接了……
這顯然是不可能的，正是因為開源框架太全面，可以產生無數種可能，我們才更應該整理自己的項目規范。就像我前面已經提到過的，設計規范是種 ”限制“，而不僅僅是設計風格的簡單沉淀。
比如，不管你選了哪套開源框架，它提供了多少種色彩，你的項目都應該有自己的項目主色，適當的輔助色彩，而不可能把它的整套配色都應用進去。所以，即使顏色沒有跳出原有色彩系統，也要篩選出你用到的顏色進行記錄。
再比如，開源框架的很多控件，都提供了好幾種樣式和方案，并不是讓你全部都用進去，而是選擇自己覺得合適的。所以你每個控件中選擇的方案，也需要做記錄，統一后續的頁面設計。
前面只是記錄選擇，都還比較簡單，而最關鍵的問題在于，開源框架的組件不可能完美符合項目的全部需求。必然要在原有的基礎上作出大量細節的優化，或者創建出新的業務組件出來，所以設計師還是要把這些內容整理出來。
開源框架，就是給我們提供了一個比較全面的設計范圍，讓我們站在別人的肩膀上做選擇，提高設計規范的制作效率，而并不是讓我們直接躺平，復制黏貼就可以了。
同時，設計規范和組件需要在軟件中進行運用，我們也同樣不能直接使用官方提供給我們的組件庫展開自己的項目設計，要根據自己項目的規范獨立進行搭建和使用。
下面，我們就要根據設計規范的內容，來講解如何結合并使用即時設計、Figma 的相關功能。
之所以 UI 設計軟件能取代 PS 獨立發展，就是因為 UI 設計中包含大量需要復用和批量修改的功能。而這些功能和設計規范有非常大的聯系，也是 UI 設計中項目規范能被落地實踐的重要保障。
但因為 Figam 和即時等次時代 UI 設計軟件提供了越來越多的功能，用來支持設計規范的實踐，且這些功能可以相互交叉、重疊、組合，導致很多人在前期學習中會被軟件功能繞暈，導致很多人沒有理解這些功能意義和價值，更不知道如何在項目中具體實踐。
所以，我們先將這些功能整體理解一遍，再逐一來對它們的使用規則和應用場景進行拓展。
樣式功能是用來記錄圖層樣式設置的功能。簡單點理解，就是記錄圖層右側的屬性設置的功能。正常我們選擇一個基礎圖層，軟件右側的屬性面板會將圖層樣式拆解成若干的類別，包括填充、描邊、字體、陰影、模糊。
而樣式功能，就是幫助設計師對不同的樣式類別進行記錄和復用的過程，它會直接將該分類內的相關參數值記錄下來，并進行命名，方便后續的調用。
響應式功能是讓圖層隨上級編組尺寸變動而自適應的功能，方便我們在修改組件的大小時不用重新調節里面的元素細節。
例如設計一個卡片，可以通過響應式的設置，讓頭部的元素左右對齊，下方的文本區域自動拓展，保持卡片的內間距不變。
或者頁面右下角懸浮按鈕，也可以通過響應式設置始終處于頁面底部，這樣我們在增加頁面高度的時候不用重新設置該元素的 Y 軸位置。
自動布局功能，是通過前端布局思路來設置元素布局方法自動排版功能，是 Figma 開發的最重要的功能，也是讓 Sketch 不再成為 B 端設計首選的核心因素。
它的主要功能如根據內容自動完成尺寸變更，并列排版和順序的變更等。
自動布局可以極大的提升設計效率，正因為自動布局的出現，才讓項目組件庫可以真正被運用和落地實踐起來。
組件功能在不同軟件有不同的叫法，如 Symbol、Component、Kits 等，主要是將指定的圖層或編組生成一個新的編組單位（類似智能對象），在后續設計中進行復用。
例如設計一個按鈕、開關，我們只要將它們生成為組件，就可以在后續設計中快速從組件庫里拖拽到設計頁面中，不用重新畫一遍，并且支持批量修改。
在組件應用中，生成的第一個組件也叫父級組件，其它調用它的組件都是它的子組件，這是一個非常清晰的從屬關系。如果我們修改父級組件的內容，所有子組件都會被統一修改。
組件的應用除了這種最基礎的應用以外，還包含了很多特殊的功能，如將低級組件合并成一個高級組件的嵌套，或者 Figma 前兩年發布的變體（Vriants），可以將一個組件的不同狀態聚合到一起，通過屬性面板來切換相關的狀態。
組件功能是 UI 類軟件最復雜的功能，它不僅本身設置很豐富，同時也可以結合樣式、響應、自動布局，讓本來死板的組件變得更靈活可控，應對復雜的設計環境。
在軟件中，記錄樣式就是在對應的屬性面板上 “創建” 并 “命名”，就將對應設置數據轉化成一個指定名稱的記錄，方便我們記憶和調用。
比如，填充色中使用了兩種色彩相近的色彩和不同透明度，我們就可以使用中文命名來區分，其中 #2B6DCF 80% 叫 輔助色，#2B93CF 90% 叫 主色。
創建完成的填充色記錄，就會在對應的屬性樣式列表中出現，之后就可以在對應圖層的屬性中關聯該記錄了。
之后，所有關聯到該記錄的圖層屬性，都可以快速應用該記錄內的參數。如果我們在樣式的列表中修改該記錄的數值，那么所有關聯到該記錄的圖層就會一起被修改。
一定要牢記，目前的主流 UI 工具中，樣式是根據不同屬性類型記錄的。比如一個字體圖層，它的填充、字體、描邊、投影，是可以創建不同的樣式記錄的，各不影響。
而軟件 Sketch 的樣式邏輯，則是根據圖層類型來記錄的，比如矩形和字體，會記錄該圖層下所有樣式屬性的參數，且該記錄只能應用在同類的圖層上（而 XD 只能記錄色彩和字體樣式…）。
這種做法雖然理解起來容易，但是會導致樣式數量大幅度增加。尤其是在字體上，變動填充、描邊都要設置一個新的樣式，這在實際項目中的靈活性是非常差的。
而即時設計、Figma 則不考慮圖層類型，只關注屬性類型。類似前端的樣式表中 “類（Class）” 的應用，每個類有不同的樣式參數，只要定義了類的命名和屬性、參數，那么不同 Div （即圖層）就可以自由組合這些樣式記錄了。
比如色彩 color、陰影 shadow、描邊 board 各定義了1、2、3 三種樣式類，那么就可以像下方案例中自由組合：
<Div Class = “ color2 shadow1 board3 ”> </div>
<Div Class = “ color1 shadow3 board2 ”> </div>
所以，樣式功能可以幫助我們在前期快速搭建基礎視覺規范內容，將規范中的配色、字體、投影、模糊等參數整理進樣式表中，方便我們后續的快速調用和統一修改。
響應式是我們前面做過很多期分享的課題了，基于 BootStrap 的完整響應式功能確實非常強大，可以通過柵格布局來實現豐富的響應方式。
雖然 UI 軟件中也提供了 ”響應式“ 這樣的功能，但它可以實現的效果非常有限。用一句話概括就是：
“圖層基于父級畫板 Frame 的匹配邏輯”
比如我們先創建一個畫板，然后再置入相關的圖層，那么這些圖層就可以啟用響應式規則。包含間距固定、居中對齊、等比縮放這三種響應規則。
間距固定的意思，就是圖層基于父級畫板的某間距數值是固定的，不管畫布尺寸怎么變動，圖層和畫布的對應間距都是保持一致的。比如常規的某一方向間距固定。
比如在模塊上的標題欄，就可以將欄目設置成一個 Frame，然后標題相關元素左間距對齊，更多圖標右間距對齊，之后變更標題欄的寬，圖層的對齊關系就是不變的。
而設置左右、上下間距同時對齊，則是圖層會隨畫布的尺寸變動修改自身的寬高來滿足。
居中模式則是圖層根據畫布的大小進垂直、水平方向的對齊，忽略間距數值。
最后一個縮放的設置，用起來和兩側間距對齊很接近，也是放大縮小畫布圖層會跟著一起變動，但它響應的邏輯是依據比例，而不是間距。這個設置在實際項目中很難派上用場。
過往的設計軟件中，父集尺寸變更，下級元素只能機械的執行縮放效果。而響應式設置就是避免這種僵硬的效果，向真實的網頁適配方式看齊。
同時，這種父集對齊的邏輯是可以進行嵌套使用的，比如剛才的標題欄，可以將這個畫板再置入到整個卡片畫板之下，并對 “標題欄畫板” 創建頂部對齊，左右間距對齊，那么該畫板本身的尺寸不管怎么變動，頭部標題欄頂部位置固定，寬度間距和父集統一，標題欄下方的元素也會左右對齊。
所以，將一個畫板中的元素響應方式設置好，可以節省我們很多時間，不用再因為父集元素尺寸修改而一個圖層一個圖層修改下級元素的尺寸和位置。
在后續生成組件前，我們就要優先完成畫板下方的響應設置，這樣就能確保該組件支持靈活的調節和布局。比如用上方的卡片，就可以快速搭建一個表盤頁面的基本框架，我們要做的就是拖拽畫板到一個合適的尺寸即可，無需調節下級圖層。
但需要注意的事，即時設計和 Figma 觸發響應式的設置是元素需要處于畫板 Frame 之下，而不是編組 Group 中， Sketch、XD 因為沒有 Frame 的概念，所以使用編組就可以應用響應式設置，這個區別一定要牢記。 同時，響應式雖然可以完成很多高效的適配，但是它的局限性是無法打破的，例如無法實現 3 列以上的卡片列表等間距放大，或者隨寬度增加生成新列下方卡片補位。
自動布局 Autolayout 作為一個自動排版功能，使用場景包含兩類，父子級響應和依序排列。它們有各自的生成條件。
首先需要一個矩形圖層作為背景，并將其它下級圖層置入到矩形背景中去，全選后點擊 “自動布局“ 按鈕即可生成父子級響應。如果圖層沒有完全置入矩形中或沒有相交，那么就會生成一個依序排列的自動布局出來。
創建自動布局會生成一個新的 “特殊編組”，用來收納下級圖層，它在圖層列表中會有新的圖標。
父子級響應布局中，背景的矩形圖層會被自動移除，樣式被繼承到自動布局的編組上，針對該編組層的屬性設置，就等同于原先的背景矩形設置（和畫板 Frame 圖層邏輯一樣）。
這類布局最常應用于按鈕控件上，可以讓按鈕的寬度隨文本寬度變化。
但光靠創建這個效果顯然是無法完整解釋自動布局的，我們就必須從前端的邏輯，來理解這種包含父子層級的元素如何實現自動布局。
首先就是前端環境中，很多控件、組件本身的尺寸是無法直接寫死的，它們是隨內容自動調節的。而自動布局右側的設置面板中的田字格一欄，旁邊會有寬度和高度設置，默認都是 “自動 Auto”，這就是說它們會隨內容寬高進行響應。
比如上方的按鈕，它實現的邏輯就是：
按鈕寬 = 元素內容寬 + 左右間距
按鈕高 = 元素內容高 + 上下間距
這種情況是父層級基于子層級的響應，應用于無法確定父級圖形尺寸的場景，如按鈕、標簽、單元格、瀑布卡片等。
但前端中的不確定性并不是只有這一種，還可以反過來，子圖層大小不確定，需要它們去響應父級圖層的尺寸變更。
比如一些文本卡片，會應用在不同的頁面中，且根據應用的場景會有寬高的調節，所以需要下級的文本區域可以跟隨上級尺寸響應。
我們就需要把父級布局設置成 “固定寬/高”。還要選中子圖層，在它的自動布局選項中選擇 “自適應”，來滿足這個相反的需求。
如果子圖層沒有設置自適應，那么它就不會直接隨著父級圖層變更自己的尺寸。但還是有針對子元素的響應設置 —— 對齊模式。
在父級布局設置中，有一個網點模塊，可以設置下級圖層的對齊模式。當下級圖層不處于自適應模式時，則對齊可以修改下級元素的對齊方向，即前面響應式設置中的 “間距固定”。
前面我們演示的案例都只有一個子圖層，如果出現多個子圖層的話，自動布局也可以幫我們進行調節，除對齊外還包含子圖層排列方式、分布方式，而這就是依序排列的布局模式。
排列方式就是多個子圖層橫排還是豎排的設置。
分布方式，則是這些子圖層布局的位置怎么定，默認包含固定間距和自適應兩種。
固定間距即子元素排列的間距保持一致，在右側的輸入框中可以設置間距數值，也可以結合對齊模式來設置整體的對齊方向。
而自適應，則是在父級區域內進行等分，這個等分的邏輯比較特別，需要左右各有一個子圖層靠到頭，新增的圖層在這個基礎上進行 “等間距分布”。
依序排列的優勢，除了把現有的子圖層快速布局以外，還可以用拖拽、鍵盤調整元素順序?；蛘邚耐獠客蟿幽硞€圖層到該區域中，就可以插入序列，成為下級圖層之一。
前面兩種布局模式，可以解決各種 UI 設計中的細節設置問題，理解起來也并不難，只要自己去操作一下就能學會。而真正讓人頭疼的，是自動布局可以相互嵌套，并混合這兩種模式，在復雜的頁面設計場景和組件模塊中靈活應用。
下面我們通過一個模態對話框 Modal Dialog 案例來進行說明。這個對話框會包含3種不同的寬度規格，且對話內容不確定，可能會字數很多包含很多行的高度。
想要用自動布局實現一個滿足需求的對話框，我的建議是先學會拆分里面的下級模塊，通過完成下級模塊的設置后再進行最終的合并調節。
在這個對話框中， 包含三個模塊，頂部標題欄、中間內容區域，底部操作欄。
首先從頂部標題欄開始，我們隨意創建個 280px * 44px 的矩形，然后再置入標題和圖標到矩形中。之后全選它們創建成自動布局，然后設置父層級內間距，且改成寬度固定、分布自適應，就可以獲得一個可以隨意修改寬度的標題欄了。
然后就是內容區域，本質上就是一個文本區域，所以我們拖拽一個文本區域出來，設置好對應的參數和填充一點文本即可。
而底部操作欄，則在一開始做好兩個按鈕（可以使用自動布局做）和背景以后，就可以進行合并，只是父級元素上的設置要改成固定寬度和右對齊，并設置布局間距（按鈕間距）。
這三個模塊完成以后，我們再選中它們進行自動布局合并，把它們設置成豎排模式，再添加背景色和排列間距，就可以實現出一個正常的對話框效果。
到這一步，如果我們修改對話框整體的寬度，或者輸入多行的文本，都無法達到預期的效果，所以還要在這個基礎上進一步的調整。
首先是寬度適應，我們要先將最上級的自動布局改成 “固定寬度”，然后將下級圖層都改為 “自適應”，這樣我們增加組件的寬，下方布局就會立即響應，且推導到更下級的圖層中。
為了滿足文字寬度隨父級響應，高度影響父級高度，就要將頂部的自動布局改成 “高度適配”，再將下級的文本改成 “寬度自適應”、“自動高度”，然后，我們就可以隨意拖動這個自動布局的寬，和添加任意的文本內容了。
完成這個基本的版本以后，我們再根據項目需要的三個寬度，直接將它復制成 3 份，每份直接設置對應的寬度出來，就可以作為后續的 “原始組件” 在項目中進行快速引用了。
在這個案例中，我們前后嵌套了若干層的自動布局，每層自動布局的上下級會有各自的響應關系，需要我們逐一進行確認。并且，細心的同學應該也發現，這里面有很多設置似乎和前面的響應式設置非常類似，那把一些下級布局從一開始就做成響應式的編組行不行？
答案是可以的…… 響應式設置和自動布局，本質上都是為了節省我們操作時間而設計的功能，我們要從實際設計的對象出發，選擇合理的功能來實現最終的效果。而不是只能使用自動布局，或者只能使用響應式。
也不要因為了解了響應式包含了非常強大的自適應功能，而認為項目中任何組件、頁面，都要全由它們組成。在需要頻繁優化頁面內容、調整設計需求的項目里，過度嵌套的自動布局會讓設計文件的 “熵” 值無限增加，會產生更多復雜的、沒有效率的問題。
相信引用過 Ant、TDesign 等組件庫文件進行設計的同學應該都深有體會……
至于怎么用才好，沒有標準的答案，就需要未來大家自己去積累相關經驗了。
有了前面響應式和自動布局的認識，我們就要進入到組件功能的具體應用上了。
組件的創建，首先要選中對應的設計元素，可以是單個圖層，也可以是編組、自動布局層，然后點擊生成組件按鈕就可以創建出一個 “原始” 組件。
在即時設計中，這個組件叫 “引用組件”，從該組件復制、引用出來的副本叫做 “實例組件”。它們具有明確的從屬關系。
在這個關系中，引用組件是完全可編輯修改的，只要修改它就可以統一修改關聯的所有副本樣式。
但由引用組件創建出來的副本，卻不能任意編輯，我們不能修改它下級圖層的尺寸、位置、順序。但是，副本的編組大小、圖層色彩、文字內容往往會有很多特殊的調節需求，所以目前主流的 UI 軟件都支持了副本組件的尺寸修改、色彩編輯和文本內容編輯，讓組件的使用更靈活。
以上就是組件使用的最基本邏輯，更進一步，組件作為一個編組，所包含的下級圖層的邏輯都會被保留下來，例如樣式設置、響應式設置、自動布局邏輯。如果一個編組原本就已經創建好了這些規則，那么當它被創建成組件，不管是引用組件還是副本，都會繼承這些設置。
比如上一小節中的通知彈窗案例，設置好自動布局再創建成引用組件以后，生成的副本就可以靈活的進行調整和修改文本內容。
除了樣式、響應、自動布局外，組件也可以包含組件。我們前面說過，按原子核的結構來講，一個復雜的組件是由若干基礎元素和控件組合而成。比如上方這個案例，就由多個模塊、文本區域和按鈕組成。
如果我們提前將按鈕、圖標等創建成引用組件，那么最終整個大的編組再創建成引用組件也是沒有問題的，原來的組件格式并沒有被抹消。
但有個細節值得注意，就是一個引用組件下方包含的組件只能是 —— 副本。如果剛才我們將按鈕創建成引用組件，那么上級編組再創建的引用組件就會自動將這些按鈕轉換成副本，并在畫布周圍生成新的引用組件。
所以這個順序也預示了，組件的嵌套是由下而上的，我們需要先創建低級的引用組件，再用它的副本逐步去組合更復雜的引用組件。這在后面的章節會進一步做出說明。
創建引用組件，除了在畫布中它的描邊色彩不一樣，圖層中的圖標改變了以外，還會出現在一個新的位置中 —— 組件管理面板。
任何創建的組件都會被生成到左側的組件欄目面板中，只要從那里拖拽就可以置入當前畫布中，方便我們調用和查看。
看起來雖然很簡單，但是需要我們管理的細節卻很多。首先就是這個列表是一個包含層級關系的樹樁結構目錄，是允許我們對組件的層級進行結構自定義的。
當我們創建一個引用組件的時候，如果它處于一個畫板中，那么創建后它會在組件面板中保留該組件的默認文件路徑：
頁面 Page / 畫板 Frame / 組件 Compoent
如果我們在不同頁面和不同畫板中創建引用組件，那么該面板的目錄一定是特別混亂無序的。所以為了創建出符合正常分類使用習慣的組件目錄，就要做出調整。
首先就是建議在項目文件中創建一個獨立的頁面 Page 用來存放引用組件，任何新增的引用組件我們都需要將它置入到該頁面中。且不要將引用組件直接置入到畫板中，這樣它就不會生產包含畫板的層級出來。
然后，我們就可以在文件命名中，使用正斜杠 Slash 符號 “/” 作為層級劃分依據。比如下面的案例，包含相同上級結構的組件會被聚合到一個目錄層級中：
這種命名結構帶來的另一個好處，就是處于同一個目錄層級下的組件，在屬性面板中可以進行快速的切換。尤其是一些相近的組件要做替換不用再在樹樁列表中重新找一遍，直接通過下拉菜單替換即可。
使用命名方式來梳理組件列表，完成有邏輯性、清晰的組件目錄，可以極大地提升組件的利用率和效率。但命名必然不是一邊創建組件一邊憑感覺命名的，而是一開始就要在外部完成的，例如通過思維導圖的方式制定出結構大綱，才能保證最終效果符合預期。
組件的應用中，除了不同組件的引用外，過去最讓我們頭痛的就是同一個組件的不同狀態。比如一個簡單的按鈕，就包含非常多的類型，默認、懸浮、按壓、點過、禁用、讀取等等。
為了在項目中可以使用組件的不同狀態，就需要我們在命名上下功夫，比如：
就是用前面提到的右側下拉菜單，來完成同一組件的不同狀態切換。理論上這么實現是沒有問題的，但在實踐過程中，不僅組件列表的數量要大大增加，且下拉菜單第一步只改狀態顯得非常局促……
所以，從 Figma 開始推出了變體 Variants 功能，來更好地應對同一組件不同狀態的高效應用。目前該功能已經在線上 UI 設計軟件中普及。
在即時設計中，只要創建了引用組件，那么選中它后右側就會有 “變體” 一欄，點擊它就可以針對該組件創建出變體效果。
變體中原來的組件一分為二，并不是完全生成出一個全新的組件，而是在這個組件的概念下創建了一個新的狀態出來，在組件列表面板中沒有生成任何新的內容。
但是當我們再添加一個該組件的副本以后，就會發現它的右側多了一個條目和下拉菜單，通過這個下拉菜單就可以切換剛才變體內的不同組件。
比如我們在變體內選中兩個組件，在右側變體的下拉菜單中可以點擊修改命名，將它們分別改成 “默認” 和 “選中”，再修改對應的樣式。然后再應用同一個副本，就可以看見下拉菜單的內容也替換成了“默認” 和 “選中”，通過選擇不同的文字，就可以切換成對應的組件樣式。
這個功能可以很方便的切換組件的不同狀態，但如果它僅僅支持到這一步，那確實和使用命名編組的方法沒有本質區別。真正讓變體產生價值的，就在于同一組件的多屬性、多狀態支持。
還用按鈕舉例，比如一個按鈕包含 3 種樣式：純文字、純圖標和文字加圖標，再包含 3 種狀態：默認、懸浮、點擊，還有淺色和深色模式……
也就意味著，按鈕包含樣式、狀態、色彩三種屬性，每個屬性中的值可以相互結合，那么總共就要設計出 18 個對應的按鈕出來。
如果我們使用變體每個樣式命名一個名字，那么下拉菜單有12個選項選起來也是很頭疼的。所以，變體允許我們自定義組件屬性和值，幫助我們更好的歸類和選擇組件樣式。
所以，在變體面板中，我們可以在更多選項中選擇添加分類就添加對應的屬性內容，添加出 3 個分類后，通過雙擊修改它們的名字為 ”樣式“、”狀態“、”色彩“。
有了屬性，變體下方的組件命名就會根本變更。如下圖所示，默認一次顯示屬性值，雙擊則可以查看對應的屬性名和值。
即變體的基本命名語法為 —— 屬性1 = 對應類型, 屬性2 = 對應類型, 屬性3 = 對應類型。
我們就可以通過這種語法方式完成對上方按鈕的統一命名，如：
然后，將這些組件統一添加到同一個變體下，之后創建的副本，就可以在右側變體面板中進行多維度的選項操作了。
具體的變體設置，分類、值的設置，可以自己在軟件中摸索，我就不演示了。這里再額外提一個功能，就是對值的設置上，還可以應用 “布爾” 的規則，即選項中只包含 “是” 或 ’否“。
如果我們在色彩的值中只使用 ”是，否“、”yes，no“、”開，關“ 等反義詞，那么副本變體選項中就會啟用開關按鈕，來替代原本的下拉菜單，提升操作的效率。
變體的使用可以很好的減少組件面板中組件的數量，提升組件狀態切換的效率。如果一個組件創建變態后被嵌套在另一個組件之下，那么這個復合組件也可以快速修改下級組件的變體類型。
雖然變體功能看起來非常強大，但它并不能適用所有場景，因為修改起來影響的要素過多。它更適用于基礎的控件和組件類型。如果針對復雜組件，尤其是包含多層組件嵌套的場景，往往使用命名的方式會比使用變體更有效率，這就需要大家自己在項目中積累經驗做判斷。
通過前面的功能，就可以完成組件庫的對應設置了，你可以在這個項目文件中調用這些組件完成項目。
但實際項目中，組件庫的使用可不能被局限在一個項目文件里，我們往往會創建很多個項目文件，來設計不同的流程、版本、模塊。于是，這些不同的文件都需要調用同一個樣式和組件庫。
所以，要讓包含規范的文件能被其它文件引用，就需要我們在組件面板中，點擊設計庫按鈕，在彈窗中點擊 ”發布“，將它創建成一個設計資源庫。這樣，我們在別的文件中再次打開這個面板，就可以看到這個資源的開關，點擊開關后，該文件就能調用里面的樣式和組件了。
在項目中，需要先新建團隊并邀請相關成員，然后再創建設計資源庫，那么其他設計師才可以引用該資源來完成相關頁面的設計。
至于每次原文件更新并落實到引用的其它文件這些細節操作，就需要大家自己去實踐了。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
度咔是百度短視頻生態首款面向泛知識創作者的視頻剪輯工具，致力于降低泛知識類作者的創作門檻，助力生產優質的作品。
隨著產品的功能迭代，體驗的逐步更新，產品依勢也需要打造更好的運營氛圍和品牌印象來建立用戶口碑、提升轉化。對此，設計側針對度咔產品進行了全面的思考和分析，通過重新定義度咔運營視覺語言，明確產品調性，幫助用戶更新品牌認知。
一、品牌框架搭建
產品的運營視覺不只是單純的畫面展示，其背后都有更加明確的設計理念和手段，但運營視覺語言并不是千篇一律的，首先需要明確自身定位，突出產品獨特性。
設計初期，我們針對同類型產品與用戶類型進行了大量分析，在用戶人群劃分上度咔更具有針對性，目標用戶是口播自媒體、知識類創作者。但不像專業剪輯軟件門檻那么高，度咔更多的是通過特色產品功能幫助作者去降低剪輯門檻，業務主要通過征稿和教程的運營活動來提升用戶認知，帶動日活。
由此，我們梳理出度咔的品牌框架圖。以度咔「專為口播自媒體打造的剪輯工具」產品定位作為切入點，依據其自身定位和度咔區別于同類產品的特色功能，我們提煉出“便捷”、“智能”、“專業”產品核心關鍵詞。
二、定義度咔運營視覺語言
在前期創意階段，我們通過大量的競品調研、創意發散、概念嫁接等創意手段，找到時下大字為主導的版式創意。簡潔明確的版式結構，適當的畫面留白，使各元素在版面中形成具有條理清晰、富有節奏的視覺關系。這種邏輯方式，為運營視覺的高效、科學、嚴謹性提供了極大的便捷，同時也對應了度咔便捷、智能、專業的品牌感知。
對品牌定位、業務訴求、產品功能進行整合后，我們搭建以構成、配色、元素為主的視覺語言框架。
與時下大字為主導的版式創意相結合，建立以大字排版，強構成感為主的視覺語言基調。通過大量的風格測試不斷完善視覺基調并投入到項目中，同時規范運營功能排版，搭建元素庫，通過設計手法，達到專業與簡潔的平衡，統一的視覺基調和品牌色強化用戶對品牌認知。
1、重塑視覺基調：
1）統一風格
度咔以往的運營視覺趨于參差，導致整體視覺有較為強烈的割裂感，煥新后的視覺變得更加直率簡約，以簡潔的視覺風格保證內容傳遞的高效性。拋棄了諸多裝飾元素，取而代之的是硬網格，保持視覺整體和諧統一感，同時也傳遞出度咔便捷、智能、專業的產品調性。
我們對運營頁面進行了布局重構，采用白色底的背景突出文字信息，使得內容信息傳達更加明確，突出核心內容。在各類場景中，我們通過品牌色彩、圖形、符號的滲透，強化度咔品牌印記。
2）主題延展
根據業務訴求，保持主題性征稿活動的特色——在強化功能點的運營活動中采用3D元素和彌散漸變背景，如夏日主題將度咔符號與泳圈做3D創意結合，增添活動氛圍感。
2、品牌色煥新：
1）建立度咔品牌色應用規范。增強品牌識別性和記憶點。
首先搜集符合產品調性的顏色情緒版，選取整體偏明亮，識別度高的新品牌藍色。對比原來偏紫的品牌藍，現在升級后的藍色更顯專業智能，且更具有電子意味。
在一個科學有效的色彩系統里，往往包含至少兩種色彩：主色+輔助色，兩者互相搭配組合成產品體系的整體色彩感受，減少用戶在產品體驗中對反復出現的主色的視覺疲勞。
我們將藍色賦予了統一的品牌認知感受，并且將藍色加入到橙色里，生成了度咔特有的藍橙色系。橙色在度咔的色彩系統中起著至關重要的作用，為產品帶來積極，活力的感受，同時深黑和灰色創造結構、表達邊界、建立信息層次。
以基礎征稿活動為主的頁面使用度咔標準藍；在需要強主題和活動氛圍的頁面加入輕量的彌散漸變色彩。
3、提升效率：
1）元素庫搭建
建立度咔元素庫，規范化運營活動主視覺圖形原創性和創意性，沉淀設計資產。
由于后期運營活動多處用到3D元素，對3D的質感進行了規范統一。輕量化的3D風格更加注重極簡主義理性美學。
考慮到運營頁面的通用性，避免3D材質的喧賓奪主，材質風格以簡單通用為主，顏色以品牌色為基礎，采用光感通透的玻璃材質，加入環境光感。明朗，透傳度咔的品牌氣質。
四、總結
本次通過度咔運營視覺語言的搭建，無論從產品本身還是設計側，在數據和效率上都有明顯的提升。而設計作為和用戶最近的一方，在平衡各方訴求后呈現給用戶一個全新專業感十足的產品，進一步向用戶傳達品牌感知，助力創作者發現更多美好。
感謝閱讀，以上內容均由百度MEUX團隊原創設計，以及百度MEUX版權所有，轉載請注明出處，違者必究，謝謝您的合作。申請轉載授權后臺回復【轉載】。也歡迎加入MEUX,視覺/交互/運營設計師，可投簡歷至MEUX@BAIDU.COM (注明信息獲取來源如：站酷）
關于我們：
MEUX,百度移動生態用戶體驗設計中心，負責百度移動生態體系的用戶/商業產品的全鏈路體驗設計。服務的產品包括百度APP、百度搜索、百度百科、百度貼吧、百度商業產品等。MEUX以「簡單極致」為設計理念，創造極致用戶體驗的同時賦能商業，推動設計行業的價值和影響力，讓生活因設計而更美好。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
借此機會和大家交流一下項目背后的思考，共同進步！
我將從以下幾個方面進行講解：
01 對于理念的思考
02 關于風格的思考
03 關于背景的思考
04 關于材質的思考
對于本次設計，需求方是沒有給主題限制的，那作為設計師的我就從自身現階段的生活去發現主題、尋找靈感。 從深圳到成都創業，將近一年的時間，我發現成都的天氣總是陰沉沉的：
充足的陽光變得非常稀缺，對于成都人來說，如果有陽光的時候，都會去外面坐坐，曬曬太陽！ 這一年，“光”對我說是一種期盼的事物：
基于這個生活細節，我就把主題定成了“追光空間”而我對于“追光空間”的理解就是：光感、純凈、靈動
后面的執行也是基于這個理念進行思考創新的！
有了主題，就可以基于主題去思考設計風格了。
其實主題圖標的設計其實已經有很多年頭了，尤其是“app”這個概念流行開始，各大安卓手機品牌就有了自己的主題商店，用戶可以根據喜好下載自己喜歡的主題圖標。 我們在網上搜索主題圖標，可以看到很多作品，其中不乏有非常優秀的主題作品，但是當觀察的量到達一定程度后，會發現市面上的主題圖標風格還是比較相似，大部分還都是屬于二維圖標（下圖源自網絡）：
即使是一些質感很強的圖標，很多也是鼠繪出來的，也不算是3D風格（下圖源自7years）：
包括我們去年給小米做的幾套主題，也都是偏2維風格的
基于這樣的現象，我們是否可以嘗試將3d風格與主題圖標進行融合呢？雖然不能說是第一個這么做的，但至少在市面上出現的這種結合還是相對較少，所以也可以算是一種小的創新。
在構想風格的時候，我的底層邏輯就是找到未被發現的切入點，如何理解呢？
如果是3d風格與電商活動結合，已經相對常見了（下圖源自網絡）：
如果是3d風格與游戲視覺結合，也經常會看到（下圖源自網絡）：
但是如果是3d風格與主題圖標結合并且落地使用，那還是相對比較少的，這就是我在思考風格時候的一點心得：
希望可以給同行們一點啟發，拋磚引玉，希望市面上可以看到更多的3d風格的主題圖標！
這次的主題和以往不一樣，我們每做一個圖標需要延展4個尺寸：
有一些寬的、有一些高的，如果我們只放一個圖標，那么會比較空曠，不夠飽滿，所以我們必須在背景上加一些圖案或者紋理，使整體更加飽滿精致。
背景紋理怎么做呢？我們希望它有細節但又不能過于搶眼，于是把目光鎖定在了基礎形狀上面，比如方形、圓形、三角形等等：
鎖定基礎形之后，就需要在基礎形之上融入更多的設計思考，比如風格的結合，因為整體是3d風格，所以背景也可以是3d化的基礎形白膜：
除此之外，我們需要將圖形進行構成設計，以不同的節奏和位置使其產生不同的美感，把基礎美多維度的釋放出來，比如矩形的基礎元素進行構成設計：
這樣，就可以做出不同的背景圖案，以此來解決需求目標。
設計師一定不要輕視基礎，不管是技法層面還是審美層面，往往優秀的設計都是無數個“基礎”堆出來的，先掌握基礎，才能用“基礎”釋放更大的能量！
其實本次的材質，也不算難，沒有用到特殊材質，主要有兩個關鍵點可以分享交流！
關于燈光
燈光我們使用的是日光燈，從軟件操作層面沒有任何技術含量，但是對于基礎審美會有一定的門檻，尤其是對于明暗交界線、光影對比的理解！
燈光的不同位置和大小會導致光影質感的不同：
燈光曝光：
質感太平:
物體與背景區分度不夠:
同樣的物體，不同的燈光角度和大小就會有不同的質量等級：
只有這種基礎審美達標后，我們才能繼續往后延伸。
關于材質
對于材質，最初我們嘗試用最簡單的漫射材質，但是發現缺少光澤度和細節，于是又嘗試在外部加一層玻璃材質，形成一圈透明質感和細節：
后面大部分的圖標都采用這種形式進行延展！
以上就是這次項目背后的一些思考
共勉！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn