WWDC22 全球開發者大會結束，有太多小眾產品脫穎而出。無形中有一股巨大的力量，在慢慢崛起，那便是來自世界各地的小型開發團隊和獨立開發者。他們的產品小而美，小到僅靠一個功能撐起產品，美到完全忘記這是工具產品。那么具體都有哪些產品細節，不妨聽我細細道來～
其中，我精挑細選出一個海外和三個國區優秀產品進行產品設計細節分析，一探小眾產品究竟好在哪里！
（專注面條 - 輕松重獲專注力）2022年Apple設計大獎入圍名單之一
（謎底時鐘 - 讓時間看得見）2022年Apple設計大獎入圍名單之一
（Waterllama - 開啟喝水時間）2022年Apple設計大獎入圍名單之一
（OffScreen - 自律番茄鐘，不做手機控）Apple Store精品推薦64次
排名不分先后，從以上幾款產品logo中可以看出產品之間設計風格基本不一樣，不存在借鑒抄襲，各自都在細分領域深耕播種。
也正是因為開發者的敬業、精益、專注、創新的“工匠精神”，才能讓產品突出重圍，優秀的呈現在用戶面前使用。
Slogan：專注，可以做出一碗好面條。
你以為這只是讓人做泡面的App！那就錯了。這是用“煮一碗好面條是需要時間的”為理念，讓用戶專注工作，類似番茄工作法。
有趣的是，這款效率工具被插畫元素完美包裹起來，一點感受不到工具給人帶來的疏遠感。相反，極具趣味性的畫面讓工具使用起來也充滿樂趣充滿愛。
正因這上乘的設計質感，《專注面條》曾數次登上 App Store 推薦頁，至今收獲 7000+ 個評價、4.9 的評分。
想象一下你正在烹飪一碗面條。
在烹飪時間結束前．不要試圖拿起你的手機，這樣會讓水蒸汽流失，面條就不好吃了。日后，你可以使用專注面條完成你希望專注的任何事情。
它把工作比喻成煮面，煮面要專心，把控火候，合適時間放入主料和調料；工作同樣要專心，遵循自己的方法論，把每個步驟和流程都執行到位。工作完成了，一碗面也就煮好了。
專注力在哪里，效率就在哪里。
「專注面條」希望輔助你以一種詼諧有趣的方式，重獲這個時代最稀缺的專注力。放下你的手機，煮一碗面，我們一起對抗手機成癮！
時間一到，你的面條就做好了，你也完成了一次有意義的專注。
打破常規，不用系統默認蘋方字體，而是選擇手寫體風格的「素材集市康康體」字體（文末領取可商用字體包）作為通篇文字載體。
這也是為統一界面風格做的一個優化嘗試。
不得不說，這個選擇是非常適合的。（體量較小的產品可以適當選用設計字體，一旦產品功能做多做大還是乖乖用默認字體規范靠譜些）。
打開App，你能明顯看到簡潔的手繪風格元素，使整個產品透傳出清新可愛的一面。這也是Alex作者受到女兒啟發，畢竟小孩子總有天馬行空的想象，但大人們卻很難跳脫現實產生有趣想法。
App界面極其簡潔，只有黑白灰三種顏色，搭配手繪風格的設計元素，使產品整體清新脫俗，與眾不同。
圖標設計脫離設計規范，采用更加符合產品氣質的手繪風格，這樣使得界面統一性極高，氛圍感十足。
這也間接告訴設計師們圖標設計上一定要跟著產品形態去做設計，而不要一味以第三方規范為唯一衡量標準來設計，結果就是同質化泛濫。
計時是產品核心功能，點擊首頁左上角專注時長，會出現不同的煮面方案。
可設置5分鐘-180分鐘之內任意時長的專注時間，同時為5、10、15、20、25、30、35、40、45、50、55、60、180分鐘，這13個時間段繪制了專屬面條配方。你不用手機的時間越長，你煮的泡面配料就越豪華越高級。設計元素也越豐富。當你碰到手機，就會震動十閃光。
面條設計方案與功能的完美呈現是產品最吸引人的地方。
根據累積的專注時長還可以獲得相應的稱號，配合幸苦工作后汗水落下動畫，很是生動有趣。
不僅如此，專注面條還特意為女性男性做了兩套插圖設計方案，充分考慮不同群體的使用體驗，僅僅是效率型產品就做到如此細節，不好才怪。
這也是除了故事卡片第二種用總時長配圖來增加產品使用黏性產生記憶點的設計之處。
1.永久買斷制
【專注面條】一次買斷制，面條價格￥18。購買后產品內的功能都可使用。但“故事卡片”需要鑰匙來解鎖，￥6.00=鑰匙*6，不想付費那就乖乖完成計時任務來隨機獲得故事卡片。
作為一個功能單一的產品，賣點在哪里？核心競爭力在哪里？依碳水Sir來看付費用戶大多在為品牌理念買單。
就是產品自身的品牌調性，區別于市面上任何一款產品，不隨波逐流，用全新的面條理念代替時間，并且有其鮮明的手繪風格和插圖元素，即使被抄襲也只能抄到“外殼”，內在的東西是偷不走的。
2.購買鑰匙
專注完成后，靠概率獲得鑰匙，用來解鎖故事卡片以及 “腦洞大開” 的結局作為獎勵。緩解你專注后的緊張感，增加趣味互動性，同時為下一次專注做好準備。
故事中皮諾曹、烏鴉喝水、長發公主等雖然都是我們耳熟能詳的童話，但作者（ Alex ）給他們加上了一些彩蛋。譬如在《猴子撈月》的卡片里，解謎前三個猴子看到河流中有一個圓圈，當我們找到面條的位置時，會發現猴子們看到的不過是一個香菇都大為震驚，畫面里充滿奇妙的想象力。
當用戶看到未解鎖的故事會出于好奇點進去，這時就需要鑰匙來解鎖，畢竟不是靠專注獲得的卡片就要用別的辦法（購買鑰匙）打開，這就是第二個商業轉化點。
目前已有的27張故事卡片，每一個都與面條結合進行故事綁定，讓用戶在效率軟件中也能感受到游戲的樂趣，把故事卡片當成解鎖過關元素，引發用戶對故事卡片更多的渴望。這也是通過獎勵機制提高用戶參與感進而提高使用黏性以及提升付費轉化的一種方式。
一個動作，一堆腦洞，組成了一個能量滿滿的 app。
6 月 1 日，蘋果發布了 2022 年度設計大獎入圍名單，在「創新思維」類別中出現了中國區《專注面條》的身影，雖然止步于決賽圈，但我覺得這并不是結束，而是全新的開始。
優秀的產品總有其相似之處，也有其不同。要想做一款好的小眾產品，除了把產品本身所解決的用戶痛點做好做精外，植入產品理念，與用戶產品某種關聯。
就如它把專注計時比作烹飪時間，當完成專注，你將獲得一碗香噴噴的泡面一樣，給用戶感受并不是冷冰冰的機器“?！钡母嬖V用戶專注結束，而是通過巧妙的設計與用戶之間產生真實聯系，這或許就是成功的秘密。
借用「專注面條」Slogan說的：專注，可以做出一碗好面條。
各位設計師們不妨學習一下背后的思考。
謎底時鐘是一款設計精美的時鐘應用。
Slogan：陪伴你學習、工作與生活。
你沒看錯！它僅有時間和計時功能。
作為一款時鐘App，UI設計有什么不同，才被入選2022 蘋果設計大獎！成為中國開發者之光！我們一起來看看。
第一次下載，就會啟動引導流程，切換頁面時配合錯幀動畫，使設計細節更加突出明顯，強化品牌調性。產品中的引導頁都可以嘗試這種表現形式。
進入首頁，展示文字+動效的引導流程，統一的表現形式，讓使用者更容易理解。首頁交互引導，讓用戶對產品隱藏的交互功能得到二次記憶，具有增強產品記憶的作用。
2-1.設計元素
品牌風格設計很前沿，采用2020年大火的新擬態設計風格，也能看出設計表現緊跟市場潮流走，是一款個性且年輕的App。
整體使用下來，印象最深的就是模塊列表、圖標的微質感設計，以及彈窗布局的規范化設計，還有部分組件采用毛玻璃設計手法等。
值得注意的是，產品對iOS原生組件進行大量重新設計，結合新擬態風格繪制了一套更符合產品調性的組件出來。讓人使用一次就記憶猶新。
2-2.核心力-交互感知
我分別羅列出計時切換器、計時完成動效、時間選擇器、鬧鐘動效、刪除交互、浮窗切換交互這六個來簡單談談看法。以下幾個動效交互基本涵蓋市面上的多半產品的基礎功能，之所以展示出來，是因為「謎底時鐘」在原有的基礎組件上大膽創新，摒棄原生組件。
這樣做對于功能簡單的產品來說絕對是錦上添花有助于產品形成記憶點的設計細節。這也從側面反映出市面上的部分產品，只注重功能堆疊而完全忽視原生組件還可以二次設計的方向。
什么是好的交互，操作時無感知是一種，操作時有記憶點也是一種。顯然「謎底時鐘」是后者。要知道優秀的交互自成一派，把單一的功能做到極致，你的產品就不會差到哪里。
時鐘就是要長時間靜默展示，除了極簡、擬物、科技、馬賽克、霓光、積木、微質感、電子屏、睡眠屏、卡通風、各類鐘表材質等等19種風格高顏值時鐘外，霓光時鐘具有不一樣的功能。
當你早晨使用它文案“早安晨之美”中午“午安好心情”下午“飲啖茶食個包”，除了文案變化，圖標也跟隨名稱而變，又一個用美食來拉近與用戶距離的設計細節。
不僅如此，在低電量情況下，霓光效果不顯示，底部會持續閃爍電量不足的指示燈，告訴用戶手機沒電信號，請及時充電。當用戶插上電源，霓光時鐘會重新啟動亮光模式，給予用戶通電感知。
雖然很小的設計點，但誰又能想到時鐘與電量不足產生聯系?？磥黹_發者對時鐘的創意聯想是豐富多彩的。
無意間觸碰手機時發現積木零星掉落下幾個，在好奇的驅使下又晃動了一下手機，所有積木都掉落下來了。
具有數字屬性的積木依然不斷變換數字，并且配合手機陀螺儀可以模擬現實空間進行移動，交互玩法趣味十足，讓我忍不住多玩了幾次。
這種用到iOS系統功能做的大膽嘗試，有時會給產品帶來意想不到的好處，各位總監們不妨試試。
采用終身會員與月會員模式，月會員很好理解，為了產品能持續做下去，而推出的付費模式，目的是能持續有營收。終身會員是一個很有意思的模式。
據了解，產品前期功能相對單一時，推出的一種買斷制，但隨著新功能不斷增加，原有￥25定價相比較低，早期買斷的用戶獲利更大，為了商業與產品平衡，使其具備良性發展空間，于是又推出月會員模式。
這也牽扯到另一點，凡是未上線新功能都可以輕松決定是否開發上線，一但功能上線，想要取消或抹掉功能，就沒那么輕松簡單了。這也是早期App都一次買斷，后期改為訂閱模式也必須有終身買斷的內購入口。
如果我們是“匠人”就會把 App 當藝術品，雖然只有也僅有一種功能，但只要花費了大量的時間去想創意，去做到設計、交互的完美融合，甚至一遍一遍地優化各種細節部分，埋設彩蛋，最后的最后呈現出來讓自己滿意。那么它就很可能成為一款小而美的產品。
烏克蘭開發團隊出品。讓喝水變成一件快樂輕松的活動。僅有的喝水記錄功能，卻用大量動物角色來獎勵喝水后的你，讓你欲罷不能。保持水分保持快樂！從截圖中不難看出，該App內置大量動物插圖，通過喝水來解鎖小動物，解鎖前僅展示動物輪廓，讓用戶產生好奇從而保持喝水好習慣，這個概念很好，產品很棒，那我們一起來看看吧。
產品中icon展示較少，更多是用小插畫來代替，頁面中大量的banner以及動物卡片，豐富產品的同時營造一種輕松的感覺。并沒有很多圖標干擾用戶操作。與水相關的插圖用動效來承載，讓簡單的元素變得趣味橫生，很是新穎。除了普通的水以為，Waterllama還為各種飲料酒水做了全套icon，共計48+之多，可見產品對于水的核心功能做足了努力，才有如此多的類型與選擇供用戶記錄。
無論您是想休息一下咖啡因，還是想通過果汁和冰沙來增強免疫系統 - 選擇任何挑戰，盡情享受吧！
遠離含糖飲料和酒精，或者在 10 天內只喝水補充水分?？纯茨愕倪M展如何，別忘了與朋友分享你的結果。
Waterllama 應用程序中已有超過 45 個可愛的動物角色，我把解鎖與隱藏的都羅列到上放品牌元素中，可以看下總有一款是你的菜。你也可以使用隨機模式，讓每一天都變得不同。當天喝水目標達成就會解鎖一個動物，精美的插圖讓人賞心悅目，期待第二天繼續喝水打卡挑戰。
首頁下方的動物挑戰卡片，交互形式采用App Store卡片點擊交互，無論是轉場過度，還是下拉放大主體都給畫面賦予趣味性操作體驗。一邊體驗交互細節，一邊了解喝水的各種好處，娛樂加學習兩不誤，很是輕松。
內購頁面采用icon輪播的動效展示，優點是在一小塊區域通過消失漸現可以展示所有內容，使內購頁面干凈清爽能更好的閱讀頁面信息。按鈕通過循環放大，引導用戶進行付費操作，雖然很刻意，但絲毫沒有感受到強制性選擇。
當產品想要在內購頁強化品牌背書，給到用戶可靠穩定感，可以選出具有代表性的優質評價，展示在內購頁下方，通過左右切換查看更多評價。
每年￥28，終身買斷制￥48.00。兩個價格是利用價格差來制造價格錨點，引導用戶購買終身會員，這對用戶來說最實惠劃算的方案，同時也是產品所希望的。大量的終身用戶長時間使用產品，成為核心用戶群體，助力產品越做越好。
現在不難看出，優秀的產品往往更關注細節表現，用動態展示內容，讓玩法更具趣味性，頁面簡約而不簡單。并不是頁面元素越多越好，相反把簡單的功能做到極致就會帶來正向有價值的反饋。
這款產品雖然沒出現在WWDC22上，但與「謎底時鐘」是同一家公司。無論設計或功能使用都相媲美。
手機已成為人人必備的物品，內置的各種App占有著人們的生活，手機依賴已成為這個時代普遍的一種現象。雖然人們都知道長時間看手機不好，下意識的克制看手機行為，以為這樣脫離手機依賴患者這個稱號。往往碎片化看手機，一天下來使用手機的時長不降反增。「OffScreen」通過細分時間屬性為用戶直觀呈現各種場景下使用手機的詳細數據，通過數據展示以及專注時間，防止用戶沉迷手機無法自拔。
「OffScreen」背景色使用極其大膽。
淺色模式下采用暖橘色作為品牌主色調，暗色模式下采用海藍色作為主色調，相比Apple設計規范中的顏色，這種帶有傾向性的色彩更容易營造一種產品氛圍，強化產品感知度。
圖標方面，具有操作屬性的圖標采用線性（相對好理解），具有展示屬性的圖標采用面性風格（設計表現更強且有文字描述相對好理解）。
引導流程專場用了大量位移、漸變效果，使原本單調的靜態頁賦予生動表現力。吸引用戶眼球，達到品牌傳播效果。
動效貼合操作效果，用戶還沒使用就能一眼明白產品如何使用，這就是引導動效的好處。
當你專注番茄鐘時，只需在番茄上滑動標尺選擇準確時間，就能開始專注。
當完成專注會提供統計數據，并且有彩帶飄落效果，營造打卡勝利的儀式感，強化產品感知，為用戶下一次專注做準備。
內購頁采用依次呈現的交互方式，頭圖是一個人在看手機，采用線性風格手法，這種形式區別于其他產品，會給人以眼前一亮的感覺，加深用戶對產品的記憶。
付費按鈕吸附與頁面底部，根據菲茨定律，起始于目標位置越近，到達目位置的時間就會越短，從而用戶更容易點擊。
一次買斷制，￥30.00解鎖終身會員。
作為一款時間統計、番茄鐘、專注時間與一身的產品，對于時間管理有強需求的用戶來說價格還算不錯。流暢的交互呈現以及有趣的配圖描述，間接感受到Off Screen產品的細膩之處，用戶為此買單也不是說。
OffScreen的成功在于能把單一的屏幕使用時間進行多維度分析呈現，就說“呆呆的看”與“邊走邊看”這兩項數據，就是調用系統運動數據來判斷使用屏幕的場景。
況且每項數據都支持時間軸可視化圖表的方式呈現，細節之處方見專業，這也是好產品所要具有的垂直領域專業度。
想要產品脫穎而出，一定要嘗試將軟件與硬件結合，可以是陀螺儀、眼動追蹤、閃光燈等等，總之系統推出新的功能，就盡量把它用到產品里去。
不僅如此，看以上幾個產品，截圖模塊內容都頂滿了，說明App想要展示的細節還有很多，從側面也能看到開發者們不留一塊“空白”的用心。
大廠產品固然很好，做法更符合大眾市場符合消費者需求，隨著不斷新增功能，產品變得越來越普適大眾，無產品獨特風格可言。因為背后有龐大的員工要養活。
相反小團隊獨立開發者們沒有太多顧慮，一心想把一個點做好做緊致，哪怕只是計時，也要做的自己滿意為止，才會交卷，時代在變，匠人之心從未改變。值得致敬這些開發者們。
跳脫大廠的產品，來看看獨立開發者和小型開發團隊，一人即團隊，遇到各類問題都要獨自進行解決，可想而知工作量會有多大。
他們的產品或許沒有龐大的生態體系來滿足大眾用戶使用需求，但App Store十余年的發展，建立起細顆粒的開發環境，正是這種良性生態，讓那些有光的開發者，隨心所欲讓心中的想法變成現實，讓夜里的小路燈照亮了整片街道。
就連開發者們都這么拼搏，作為設計師的我們哪還有抱怨之說，這么多好的產品擺在眼前，真是難得的學習機會，習他人之處，補自我之短。一起加油一起進步。
設計師要有發現美的眼睛。美不僅是視覺，還有好的體驗流程。不要讓用戶思考，這是每個設計師所追求的。 認真記錄產品細節，了解背后的思考，也是不斷提升自己邏輯思維和表達能力的一種方式。
本期產品細節分析結束，點擊原文鏈接查看更多，我們下期再見！
作者：碳水Sir；公眾號：草蓉三石
本文由 @碳水Sir 原創發布。未經許可，禁止轉載。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( 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. 店鋪設置
「店鋪設置」為商家提供了店鋪的基本信息設置，比如店鋪信息、品牌形象、用戶賬號設置等。
①「店鋪信息」提供店鋪名稱、店鋪管理員和主營類目的設置，非常基礎。
②「用戶賬號設置」 提供在使用系統過程中的各種登錄偏好設置，比如登錄設備限制，可自定義學員使用同一賬號在同一時間不同瀏覽器上同時登陸的情況
③「引導設置」提供了引導用戶關注公眾號、加入社群、收藏店鋪、添加客服和添加手機號等功能，對新用戶的首次訪問至關重要。
④「功能配置」支持用戶對商品銷量、播放量/瀏覽量、評論審核、嚴禁詞、視頻播放器、商品評價、買家申請售后等功能進行設置，可以看出系統非常完整和靈活。
迭代建議
用戶的短期記憶一般不會超過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. 音頻
「音頻」也是一種常見的內容形式，可以設計講書、廣播等產品，用戶可以在地鐵、公交等場景收聽?！敢纛l」的新建流程、商品管理功能和「視頻」相似，我們不再贅述。
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. 專欄
「專欄」可以將多個單品課程打包成系列課銷售，比如常見的付費專欄、連載小說、有聲讀物等。「專欄」建立后，進入詳情頁，可以在「目錄管理」添加專欄商品，還可以對專欄的商品設置排序和設置試看。其他功能和「視頻」相似，我們不再贅述。
2.1.1.6.2. 大專欄
「大專欄」就是「專欄」的父級，可以將多個專欄進行打包，組合成專項學習專題，打造學員深度系統學習方案。
2.1.1.7. 訓練營
「訓練營」相比「課程」，是一個動態的服務。商家根據某個學習主題，集中式、計劃式、督學式地學習?！赣柧殸I」也是一種常見的引流手段，通過打卡、簽到、學習，可以快速幫助商家進行傳播拉新。
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. 新建流程
①「日歷打卡」的建立有兩個步驟，分別是設置打卡信息和打卡介紹設置。在「設置打卡信息」，分為基本信息、打卡規則和其他設置三個內容。「基本信息」可以設置打卡的起止日期、打卡時段、提醒方式、每日打卡次數、可補打卡次數、參與條件和打卡規則等；「打卡規則」主要是設置用戶打卡的內容類型和范本；「其他設置」可以幫助商家關聯超級會員和指定商品文件。
②在「打卡介紹設置」步驟，需要添加打卡的封面圖和詳情頁介紹，完成后打卡建立添加成功。
細節偵查
如果不是親自新建一次「打卡」，你根本無法理解一個小小的「打卡」功能竟然會如此復雜，包含的場景和功能竟然會有這么多。
b. 打卡詳情頁
「打卡」建立以后，可以進入打卡的詳情頁，主要分為日記管理、任務管理、學員管理、分組管理、助教管理、激勵設置、運營設置和數據分析8塊內容。
①「日記管理」主要指用戶在前端的日記打卡，老師可以根據學員的日記進行評論、置頂、加精和刪除，還支持批量導出日記。
②「任務管理」是指給學員布置學習任務，幫助學員更好地學習。
③「學員管理」主要提供對打卡用戶的管理，比如查看學生打卡詳細資料和暫停打卡等。
④「分組管理」支持老師對打卡的學員進行分組，提高管理效率。
⑤「助教管理」支持老師添加助教，助教可以對學生打卡進行點評、刪除和精選等操作。
⑥「激勵設置」是指為了鼓勵學生堅持打卡，老師可以設置證書、返學費和積分這樣的形式來吸引學生參與（證書和積分我們在下面會單獨講解）。「返學費」是一個打卡活動中常見的營銷方式，學員完成指定的任務就可以拿到打卡費用的返現，這樣不僅可以篩選精準用戶，也可以提高用戶的打卡積極性。
⑦「運營配置」主要包含配置日簽和邀請卡兩個部分。「日簽」是一種吸引用戶傳播的手段，通過個性化和精美的日簽設計，不僅可以體現活動特色，還能激發學員的收藏欲望，最終吸引用戶主動傳播，拉新引流?！秆埧ā挂仓饕菫榱思ぐ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. 試卷庫
①「試卷庫」是題庫中題目的組合，可以看作是「題庫」的父級。管理員可按照自己的需要把題目手動或自動組合成試卷，在考試、作業等場景中就能及時調用，提升工作效率。
②「試卷庫」的新建流程包括設置試卷信息和組卷兩個步驟。在填寫完試卷基礎信息以后，在「組卷」步驟，可以選擇「手動選題」和「系統抽題」。「手動選題」就是管理員從題庫中逐一手動選擇，準確率較高，而「系統抽題」則是系統根據管理員的題型設置隨機抽題，具有隨機性。
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設計到底能干啥，現在勉強找到一份設計的工作，每個月還要還著貸款走。我當時把這個朋友免費邀請到我的私董會星球了，讓她去看我講的書、錄的課程，期望能給她帶來一絲溫暖和希望。
其次在我最早開始建立社群的時候，有一個探友在站酷看到我的產品拆解以后，跑來加我，然后給我說：“我一直質疑培訓班老師的講課內容，因為我覺得設計這門職業，如果只學會軟件，那是不夠的，肯定需要學習一些設計原則和理論。所以當我看了你的產品拆解以后，我很受啟發，我覺得學會這些設計理論特別重要。”
這些真實的故事，讓我印象深刻，也讓我開始反思，造成這種現象的原因是什么。所以這個專題的內容，在很久之前就藏在我的心里了。我想去做一個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咨詢、用戶體驗公司、軟件界面設計公司
導語
近年三維表現已經越來越多的融入到各種商業設計當中，在電商、品牌、UI、影視等各個領域都有廣泛的運用。其中一個關鍵因素是C4D這款軟件的出現，大大降低了3D設計的學習門檻。
C4D相對于專業性更強、功能較為復雜的3DMax、Maya、ZBrush等軟件，界面更加簡潔友好，對于沒有接觸過3D的的小白，學習成本更低。配合Octane、Redshift等渲染器，可以很快做出強視覺表現力的效果。憑借這種操作友好、易出效果的特性，C4D很快成為了近年最流行的3D設計軟件之一。
本文結合作者自身的經驗整理了一波自學的思路和技巧，希望能在大家學習C4D的過程中有所幫助。
前言
相信很多沒有三維設計基礎的小白，剛接觸到C4D時會有無從下手的感覺，面對各種形形色色的命令菜單和工具面板，內心是這樣的：
其實大可不必擔心，不同方向的設計師可以有不同的側重點，只要掌握自身職業需要的模塊，并不需要學會所有的功能。追求大而全反而難度大效率低，容易產生挫敗感從而被勸退。
所以這里建議的C4D學習思路是：結合自身的職業方向，先明確要學習的側重點，集中精力突破，然后再根據新的需要逐步學習更多即可。
學習過程則大體上分為入門、上手、實戰三個階段。
Part 1. 入門
1.1 明確學習方向
C4D大體可以分為建模、渲染、角色、動畫、運動圖形、動力學這幾個模塊，每個模塊都可以看成是獨立的知識體系，往下又有更具體的細分。真要全面仔細鉆研的話，需要投入很多的時間精力，這也是讓很多初學者無從下手甚至望而卻步的原因。
所以除了建模和渲染是繞不開的基本模塊，我們可以將另外幾個看成是比較具有針對性的模塊，具體需要著重學習哪一部分，則需要先明確最適合自己的學習方向：
比如你是電商設計師，平時的工作內容主要是制作各種產品高大上的渲染圖以及推廣視頻，那除了基本的建模與渲染，還可以著重學習運動圖形，做出各種酷炫的商業廣告視頻；
如果你是IP設計師，則需著重學習角色模塊，在完成靜態角色的建模渲染后，綁骨骼刷權重也是必須掌握的知識點，才能做出豐富的動作和表情，讓角色生動起來；
總之，不同職業方向，甚至項目的不同時期，都有不同的學習側重點，這里需要每個人自己去判斷。
建模和渲染則是最常用的兩個模塊，無需有職業方向的針對性，都應該在前期優先學習，并且做到基本掌握甚至熟練運用。
常規的步驟是先學習建模，再學習渲染；不過建模比較枯燥，渲染則是最出效果也是最提升學習信心的環節，我認為根據個人喜好，先學渲染再學建模，反而是更推薦的學習順序。
1.2 選擇學習資源
選擇學習資源方面，目前網絡的免費教程十分豐富，依靠教程的學習足以讓你初期快速的上手，新手在選擇教程方面盡量以體系較為完整，演示時軟件版本較好的原則，如英文水平較好建議去外網看看各路大神的教程，原汁原味的學習；另外考慮到外網資源的機翻和獲取難度的原因，這里主要推薦一些國內網絡能獲取自學資源：
建模
建模方面在學習階段主要注重C4D的工具使用和基礎技巧，這里推薦幾個免費教程。
1、https://www.bilibili.com/video/BV1Cb411T7Dc?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276
2、https://www.bilibili.com/video/BV1PZ4y1s7vm?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276
渲染
渲染以OC渲染器為例，這是現網能找到比較完整的免費教程，學習后可以直接上手出圖。
1、https://www.bilibili.com/video/BV1ur4y1T72V?p=39&vd_source=018f00780190d4b9c79b5abbdb3be276
2、https://www.bilibili.com/video/BV1f4411V7qh?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276
動力學
動力學可以由淺入深，從基礎的常用動態手法及運動原理開始入手，以小實例練習的方式慢慢轉向大場景的動態設計學習。
1、https://www.bilibili.com/video/BV17f4y127uv/?spm_id_from=333.788.recommend_more_video.1&vd_source=018f00780190d4b9c79b5abbdb3be276
2、https://www.bilibili.com/video/BV1ZA411w7qC/?spm_id_from=333.337.search-card.all.click&vd_source=018f00780190d4b9c79b5abbdb3be276
更多綜合性實戰教程
各大網站都能找到不少實戰案例的教程，根據需要可以找到更多。
1.https://www.bilibili.com/video/BV177411P7d1?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276
2.https://www.bilibili.com/video/BV1AY4y1G7Nc?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276
1.3 軟硬件配置相關
打團下副本之前，還得先準備一下裝備；這里簡單對于萌新學習前的軟硬件要求做一些說明和推薦。
渲染器選擇
C4D目前可選主流的渲染器有octane、阿諾德、Redshift、vray、自帶渲染器（不推薦）。主流渲染器各有優缺點，綜合下來筆者推薦萌新選擇OC渲染器，原因是學習資源多，學習難度低，渲染效果優、渲染速度快等優點。
以下是各渲染器的對比，萌新們可權衡自身的情況進行選擇：
電腦配置
在PC電腦方面，以筆者正版OC4.0渲染器為例，顯卡選擇N卡，型號以20系列以上最好，顯存4G以上（有經費的可以入手今年的40系列顯卡）；其他配置看自己的經濟情況而定，如CPU方面單核性能越強對于渲染效率和c4d默認渲染器的加速越快，內存推薦64G以上，另外在電源上如果已經配備了20系列以上的顯卡建議選擇900W以上的，除了顯卡和CPU這兩個核心硬件其他的配置主要看個人情況而定，對電腦不懂的優先看電商平臺的整機方案，主要以顯卡和cpu為參考依據，其他的配置可浮動選擇。
在蘋果電腦方面，筆者并不推薦以3d工作為主的設計師選擇蘋果電腦，主要原因是主流渲染器的選擇較少，另外C4D插件各方面的支持也遠不如PC方便和豐富（如有特殊原因，可以優先選擇M1芯片的電腦或者配備N卡獨顯的蘋果電腦）。
軟件版本
C4D軟件版本推薦使用最新版本或者R23以上版本，隨著廠商的更新換代，有些以前只有插件能完成的功能慢慢完善在新版本上，新版本帶來的便捷功能可提高萌新的出圖效率并免去舊版本沒有兼顧的功能導致的學習成本浪費問題。
另外在OC渲染器上的版本問題盡量以當前版本能兼容的最新OC為主，當然，需要你的顯卡需要和OC版本是匹配的情況下。
1.4 好記性不如爛筆頭
收藏和觀看的教程多了，容易看了后面的忘記前面的，或者沒有實際上手印象不深。這里我嘗試過最好用的方法可以總結為一句話，就是俗話說的“好記性不如爛筆頭”。
對于一些關鍵的知識點，或者很有用的上手練習案例，可以在自己學習或者練習后，將關鍵步驟以在線筆記的形式自己整理一遍。
這樣做有兩個好處，一是能大大加深你對知識點的印象，不易遺忘；二是即使真的隔了很長時間有所遺忘，只要調出對應的文字筆記，就能很快重新想起對應知識點，比起重新翻出視頻教程，邊拖進度條檢索再看一遍，效率高得多。
比如我之前在學習渲染體積光效果（丁達爾效應）時，總是掌握的不扎實，學過就忘，下回再用到時，基本相當于又要翻出視頻教程再看一遍，效率很低。但是將關鍵知識點整理成筆記后，不單對這個知識點記得很牢，甚至能在不重新翻看筆記和教程的條件下，熟練的以教程中提到的三種不同方式做出體積光。
筆記鏈接：https://note.youdao.com/s/Lwt42DsG
以下是我整理的部分筆記庫，感覺在筆記庫里的知識點才算是比較掌握了的。
1.5 多搜集優秀案例
除了掌握工具，多看優秀案例以提升自己的設計思維和審美也很重要，只有看的優秀案例夠多夠好，將自己的設計眼光、審美水平、思考方式向大神們的靠攏，才能做出好的作品。
這里推薦幾個我覺得的很贊的3D類網站：
Artstation：http://www.artstation.com；
Sketchfab：https://sketchfab.com/feed；
Behance 3D：https://www.behance.net/galleries/3d-art；
Dribbble 3D：https://dribbble.com/search/3d；
Part 2. 上手
2.1 熟能生巧多練習
上手階段，充分的動手練習是必不可少的。
這里的練習也分為兩種，一種是跟隨教程案例做出一樣的效果，一種則是結合自己感興趣的題材設定一個主題或場景，將學習的知識點融會貫通，在自己的命題作品里實際應用起來。兩種練習的方式也是相輔相成，在積累足夠多的教程案例練習后，更推薦按照自己的想法來創作。
比如我會將自己感興趣的漫畫題材，在C4D里作為一個場景練習，融合進平時學的一些知識點。
《頭文字D》場景
《海賊王》場景
因為用的是自己感興趣的內容練習，所以做起來也上手很快，知識點也記得很牢，推薦大家可以試試。
2.2 善用插件提效率
1.Forester-植物生成插件
輕松生成各種類型的植物和部分巖石，各項小參數的調整方便個性化的調整，另外有便捷的動力系統可以輕松制作風吹植物的效果，結合OC渲染器的克隆功能搭建大場景非常輕松，適合在做動態設計的時候快速生成搭建場景。
2.QuadRemesher-四邊面重拓補
有時候我們工作中會遇到三角面模型，對于新手來說轉換成四角面模型可以選擇這款插件輕松轉換成你想要的四角面而且還有便捷的參數可以調整。
3.PolyCircle-挖洞插件及Nitro4D NitroCap-封洞插件
在日常建模的工作中經常需要給模型開洞及封洞的操作，雖然靠布線調整也可以實現，但是插件的效率更便捷，所以推薦這兩款插件分別對應的模型開洞及模型封洞的功能，另外注意在C4D軟件R26之前都是必備的插件，但如果你軟件版本是R26以上版本，那么自帶整合了這樣的工具，不需要額外安裝插件了。
4.CodeVonc Proc3durale-鏤空腐蝕溶洞效果插件
這是一款風格化的效果插件，可以配合噪波制造出獨一無二的風化、鏤空、分解動畫、甚至是流體動畫的效果，在產品設計及品牌動態視頻中運用廣泛。
（圖來源于網絡侵刪）
5.TerraformFX-地形插件
這塊地形插件，可以讓你輕易搭建自然環境，制作次時代的虛幻場景，操作簡單，可以在Cinema 4D 中生成、動畫和逼真的地形。在幾秒鐘內創建非常詳細的山脈、峽谷和沙漠。直觀的非破壞性工作流程可以輕松創建和自定義地形。
（圖來源于網絡侵刪）
Part 3. 實戰
在入門的學習和上手的練習之后，相信很多人都會對C4D有了初步的掌握。這時更重要的當然是將這些學到的知識點運用到實際項目當中，這樣的實戰操作才能讓你的知識體系更有針對性，并且實際項目命題固定、要求更高，完成后的提升才會更大。
這里分享幾個在完成基礎的學習與練習后，我們用C4D做的實際項目。
3.1 QQ小游戲-春節會場
小游戲會場是從QQ春節活動的主會場進入，通過限時抽獎以及游戲任務等形式，引導用戶參與活動，從而提升業務增長和助力品牌傳播。
在前期設計推導階段，我提煉了三個設計關鍵詞，并對應發散出一些相關元素：
一是游戲：這是凸顯平臺特色和趣味性的元素；
二是福利：這是強化用戶參與活動的動機；
三是春節：春節活動不可少的是體現節日氛圍的元素；
根據這些元素畫了三個方向的概念草圖，分別以游戲機、扭蛋機、街機作為主要載體。
最終我們選擇了通過破窗的形式將Q猛虎結合進場景中的方向一，展示游戲和奪寶元素，讓用戶感知福利的同時，也體現小游戲平臺的特色和趣味性。
創意上是參照超級瑪麗這種經典的橫版過關形式，也將中國傳統建筑中的紅墻金瓦、松樹、福袋這些元素融入在了畫面中。
游戲機場景及其他主要元素建模
場景白模及空間構成設定
角色及福袋動態的制作，這里主要用到了角色及動力學模塊相關的一些知識點。
渲染完成后的主視覺，Q猛虎在游戲機上往前奔跑，不斷獲得福袋并蹦出金幣、紅包實際UI中的應用效果
實際UI中的應用效果
另外將主視覺中的“松樹”，延展成了松、竹、梅、蘭這四種具有傳統中國風的植物，作為輔助元素運用到頁面中，保持整體調性的統一。
部分主要頁面總覽
3.2 QQ紅包-節日封皮
節日紅包封皮是傳遞用戶關懷的重要手段，作為QQ紅包的一部分，我們希望讓用戶有更新穎的感知和更深刻的共鳴。
相對于常規的插畫手繪風格，我們希望嘗試用3D的方式做一些新的探索。
在構思中秋節的紅包封皮時，首先圍繞“中秋”進行關鍵詞發散
再選取其中桂樹、玉兔、明月等這幾個適合構建場景的元素，構建成一個立體化的場景
將一些元素抽象化，結合3D手法，加入更有意境的表達
最終完成的效果，整體也是塑造一個比較有中國風和意境的場景
新年封皮也是用同樣的方式完成，像剛才中秋的桂花樹一樣，這里也將錦鯉也做了一些抽象化的表達，比如魚的眼睛是寶石質感，魚的身體是黃金質感，傳遞一種新年好運、財運連連的感覺。
最終完成的效果，QQ和banyQ坐在錦鯉背上，手上拿著銅錢串在吊錦鯉，寓意新年大吉大利、錦鯉附體。
新版封皮的使用量對比舊版有了較大提升，可以看出用戶對新版封皮的喜愛程度還是很高的，目前的節日封皮也是按照新風格持續延展中。
Part 4. 結語
以上就是本文的全部內容，希望能幫助大家在學習C4D的過程中有所幫助，總結下來就是多看多練多運用。對文中提到的插件感興趣的朋友，也可以通過附上的鏈接去官網了解更多詳細介紹。若是大家有更好的學習建議，也歡迎在評論區留言一起討論。
作者：騰訊ISUX
鏈接：https://www.zcool.com.cn/article/ZMTUxNDU4MA==.html
來源：站酷
我們都在研究好的設計，感嘆優秀的產品帶給我們的尖叫，但我們或許從未思考過，糟糕的用戶體驗設計也會給用戶帶來很大的傷害。這個產品體驗欄目的靈感來自于喬納森·沙利亞特的《設計的陷阱：用戶體驗設計案例透析》這本書。在本書的介紹里，有這么一句話——設計能殺人、使人憤怒、使人傷心。讀到這句話的時候，讓人驚愕，讓人不可思議，但這就是事實，這就是糟糕的用戶體驗設計會導致的后果?！阁w驗陷阱」的第一期，就讓我們來看看那些被忽視的文章編輯器對用戶體驗的影響有多糟糕。
文章編輯器是一個產品最基礎的構成部分，不管是前臺還是后臺，編輯器都是一個非?；A的功能。比如一個產品需要發布新的資訊內容，在后臺就一定需要有一個文章編輯器才能實現這個功能。
文章編輯器在各大網站、APP產品里都非常常見，特別對于以內容生產為主的社區、平臺，比如像站酷網、人人都是產品經理、知乎、頭條、網易這些平臺，文章編輯器是一個非?；A又必不可少的功能。
1. 有用性
文章編輯器要能實現內容的發布，當用戶從本地或在線文檔（比如騰訊文檔、飛書、石墨等）復制內容進去時候，可以輕松實現二次編輯，比如插入圖片、調整標題樣式等。
2. 易用性
編輯器的界面、功能，要能滿足多數用戶的期望，比如支持多張圖片上傳、第三方音頻/視頻鏈接，以及整個操作過程中使用起來愉悅、友好。
3. 容錯性
當用戶出現操作錯誤的時候，系統能夠及時給用戶提示，比如圖片上傳進度、圖片尺寸大小限制、必填項勾選等等。容錯性對用戶體驗的影響特別大，如果用戶在使用過程中不清楚哪個地方犯錯不能繼續操作，用戶對系統就會陷入焦慮。
1. 站酷
站酷網是全國最大的設計師平臺，吸引了國內眾多優秀的設計師和設計知識創作者，但是他們的文章編輯器，體驗下來卻非常糟糕。接下來讓我們來看看這個糟糕的文章編輯器，給用戶帶來了多大的體驗傷害。
當我開開心心地把一篇在騰訊文檔寫好的內容復制到站酷編輯器的時候，在對標題進行格式調整的時候，全局樣式竟然會同步更改，比如想把「標題」更改為「標題1」的樣式，整篇文章就會一起更新，這讓人摸不著頭腦。不過我沒放棄，經過多番嘗試，才發現需要在標題上下各加一個Enter，這樣才能設置成功（我是一個BUG解決天才）。
當文章篇幅撐過編輯器的默認高度以后，這個時候就會出現一個非常糟糕的體驗，你找不到編輯器的工具欄。比如你想上傳圖片或者修改內容，你都不知道工具欄去哪里了，這個時候用戶徹底迷失，變得異常焦躁。解決這個問題的唯一辦法是——把編輯器全屏。
創過第一關以后，全屏的編輯器又出現一個非常糟糕的體驗。那就是當你去調整某一段文字的時候，比如加一個換行，這個時候編輯器的光標就會像幽靈一樣跑到底部，你只能重新找到剛才的原位置，你以為是眼花再試一次之后，光標再次出現在底部，簡直讓你懷疑人生。
當你從頭部開始上傳圖片的時候，和調整字段一樣，光標又會像幽靈一樣跑到底部，這個時候，你還得去找之前的位置，才能繼續上傳。不過經過多番的嘗試，我又破解了站酷編輯器的設計密碼，原來可以從底部開始倒著傳圖片，那該死的光標，就不會跑到底部去了，這個秘訣讓我提升了很高的效率，我真感慨自己的的智商：）
從站酷的編輯器可以看出，他們違反了尼爾森十大原則的系統性可見原則和防錯原則。第一，在用戶的內容高度超出編輯器默認高度以后，編輯器的工具欄消失不見，這其實是一個功能BUG，不但沒有修復也沒有提示用戶使用全屏操作，用戶徹底迷失；第二，在用戶調整內容換行的時候，光標會像幽靈一樣跳到底部，這也屬于功能的BUG，沒有修復也沒有系統提示，最后導致用戶在內容發布階段就變得垂頭喪氣，最終浪費了無數寶貴的時間。
拓展閱讀：
尼爾森十大可用性原則第一條，系統可見性原則，保持界面的狀態可見，變化可見，內容可見。讓用戶知道發生了什么，在適當的時間內做出適當的反饋。
尼爾森十大可用性原則第五條，防錯原則，比出現錯誤信息才提示更好的，是通過更用心的設計來防止這類問題發生。在用戶選擇動作發生之前，就要防止用戶混淆或者錯誤選擇。對產品進行不同的操作、重組或特別安排，防止用戶出錯。
2. UI中國
UI中國的文章編輯器，雖然不支持從騰訊文檔、飛書文檔直接復制過去的格式，但編輯器設計得非常清爽，給用戶的第一印象非常好。但是，就在用戶開開心心準備發布一篇精心準備的文章時候，噩夢來了。
UI中國的服務器非常不穩定，所以當用戶上傳圖片的時候，圖片的加載進度特別慢。其實慢一點也能接受，但是當進度條達到100%以后，圖片始終還是無法載入，有時候需要等幾秒，有時候等10幾秒最后換回來的一串錯誤代碼——Error during file upload。這個時候用戶還有耐心，也許就是服務器偶然發生故障，于是再次重新上傳，但收到的還是同樣的結果。
為了解決這個問題，我以為是圖片的尺寸或大小出現了問題，但經過查閱，并無任何問題，完全是官方的尺寸規范以內。最后通過數次的嘗試，我總算摸到一點點規律，當一張圖片反復上傳出現亂碼的時候，那就先去傳其他的圖片，最后再返回上傳這張圖片，運氣好的時候就解決了，運氣不好的話，你就休息一下再來上傳。我只能感慨自己實在太聰明了。
從UI中國的編輯器可以看出，他們和站酷一樣，違反了尼爾森十大原則的第五條原則，防錯原則。在用戶上傳圖片出現錯誤以后，并沒有給用戶及時的中文提示（99%的設計師看不懂Error during file upload這串英文代碼，毫無意義），導致用戶在使用過程中產生焦躁、憤怒的情緒，浪費了無數寶貴的時間。
3. 微信公眾號
微信公眾號是知識創作者最常用的工具了，但事實上對于新手來說，它的設計非常不友好。我還想起當我第一次操作公眾號發布文章的時候，當我把內容都編輯好以后，我找不到「發布」的按鈕。我很難理解「群發」的功能，特別是當我在下拉列表發現竟然還藏著一個「發布」按鈕，我以為那就是發布。但當我開開心心準備分享我的推文時候，我在自己的公眾號卻怎么也找不到這篇文章。
最后我只能重新編輯一次，但問題還是沒有解決。群發到底是什么意思？當我點擊以后「群發」以后，又出現了群發、定時群發和分組群發的按鈕，我實在難以理解這幾個按鈕有什么不同，我現在又應該選擇什么。我猶豫不定，害怕犯錯，又不知道如何解決，最后只能求助朋友。
微信公眾號在「發布文章」這個環節的設計，完全違背了交互心理學上的席克定律，給用戶太多、不清晰的選擇，增加了用戶的學習和消耗成本，對于公眾號新手來說，簡直就是一次噩夢。其次也違背了尼爾森十大原則的第十條，人性化幫助原則，沒有給新手解釋清楚「群發」和「發布」的區別，也沒有對核心功能做出對應的文字解釋，讓用戶在操作的過程中產生數次焦躁，最終只能求助于他人。
拓展閱讀：
席克定律是指人的信息傳遞時間與刺激的平均信息量之間呈線性關系。簡單一點我們可以理解為：人面臨越多的選擇，所要消耗的時間成本越高。
尼爾森十大原則第十條，人性化幫助原則，幫助性提示最好的方式是：①無需提示；②一次性提示；③常駐提示；④幫助文檔。
4. 脈脈
脈脈作為擁有1.1億用戶的職場社交獨角獸，為用戶提供的專欄編輯器，用戶體驗差到讓人絕望。
脈脈使用的編輯器，屬于十年前最早一批的編輯器，不管是功能還是樣式，都非常掉身價，和他們的品牌調性不匹配。它們不支持從騰訊文檔、飛書復制過去的文章（Markdown格式），所以我每次都需要調整格式才能和源文檔格式一致，極大增加了編輯成本。這也是我最后放棄脈脈更新的原因，他們流失了一個內容創作者。
在用戶上傳圖片以后，他們沒有做自適應配置，整個編輯器無法看到圖片的完整內容，用戶根本不知道自己上傳的圖片是否正確。更糟糕的是，當你想等比例調整圖片的大小，圖片就完全扭曲，讓用戶進一步崩潰。
點擊上傳圖片以后，還需要用戶點擊「上傳」，才能真正實現圖片上傳，增加了用戶的操作步驟。其次已上傳的圖片不能取消選中，如果想要取消當前圖片，只能再次上傳一次圖片。
最糟糕的是，文章竟然不支持自動或手動保存，想象一下當你花費了1個小時好不容易編輯好的文章，最后因為不小心關閉瀏覽器導致文章丟失了，這就是使人憤怒的設計，這幾乎把用戶使用的欲望徹底剿滅了，永遠不會再回來。
脈脈的編輯器設計，嚴重違反了尼爾森十大原則中的多條原則，比如撤銷重做原則、防錯原則、容錯原則等，可以說是非常糟糕的設計，這樣的編輯器幾乎可以毀滅任何一個內容創作者的心情。
拓展閱讀：
尼爾森十大可用性原則第三條，撤銷重做原則，給用戶更多自主操作權，當用戶在使用產品過程中產生錯誤的操作時，應提供更多的解決方案，例如撤銷或重做等功能。
尼爾森十大可用性原則第九條，容錯原則，幫助用戶從錯誤中恢復，將損失降到最低。如果無法自動挽回，則提供詳盡的說明文字和指導方向，而非代碼如404等。
5. 135編輯器
135編輯器作為國內最大的編輯器頭部產品，他們幾乎把編輯器可能有的功能都設計了，比如導入文章、語音合成、模版、一鍵排版等等。但是這個功能如此豐富的編輯器給新用戶的體驗則留下糟糕的印象。
135編輯器的功能非常強大，這就像一個2003年半的Word辦公軟件，一眼望去，都是數不清的功能。這樣的設計導致了新手不知道如何開始，他們的按鈕權重幾乎都一樣，比如新建、關閉、導入、微信復制等等，沒有重點突出核心功能。
人在操作軟件時候的記憶屬于短期記憶，一般只會保留5-7秒，這便是心理學上最出名的7±2效應。在新手首次使用該軟件的時候，面對幾十上百個的功能，根本不知道如何下手。用戶需要學習的成本非常高，甚至當你編輯好文章以后，你都不知道如何把文章同步到微信公眾號，因為「微信復制」這個按鈕沒有重點突出，從字面意思也無法獲取真正的意思。這也違背了人類運動的預測模型費茨定律，如果你想小孩子也簡單輕松的能關掉房屋的開關，那么你的開關就應該大一點，明顯一點。
其次過度商業化把這款編輯器的用戶體驗毀滅了，幾乎80%的功能都需要加入VIP會員，然后你需要反復關閉窗口，操作路徑變得又長又繁瑣。試問，一個新用戶在使用一款陌生的編輯器的時候，需要關閉幾十次廣告，你覺得他還有耐心去使用嗎？
拓展閱讀：
7±2效應就是指人的短期記憶容量在7±2的數量之間浮動，也就是說，用戶最多同時處理5～9個信息。
費茨定律是人類運動的預測模型，主要用于人機交互和人體工程學。該定律預測光標或手指從一個起始位置移動到最終目標所需的時間（T）由兩個參數決定，即光標或手指到目標的距離（D）和目標的大?。╓）。
6. 國內某知名CMS系統
這是一個國內非常出名的開源CMS系統，目前已停止更新維護，不過國內的企業網站估計有50%都是基于這個系統搭建。做過外包設計的朋友都知道，經常會聽見客戶說系統難用，那么為什么難用，我們先來看看這些商業項目中管理后臺的編輯器有多糟糕。
點擊添加內容后，直接跳轉到一個新窗口，這個新窗口還把當前屏幕都遮住了，這不得不讓用戶需要把這個窗口縮小才能復制內容。這個設計最讓人頭疼的是當你的桌面應用打開過多時候，你根本不知道這個內容窗口在哪里，讓人感到無比焦躁。
編輯器的的樣式、功能就幾乎可以忽略不計了，因為這畢竟是一款開源的系統，而且官方都已經停止更新了。如果你從騰訊、飛書文檔直接復制內容進去，文本格式就是錯亂的，這和脈脈一樣，這幾乎需要在編輯器里重新調整格式才行，這嚴重提升了用戶的使用成本。這對于很多兼職為公司負責更新網站的用戶來說，簡直就是一場災難。過去有太多次用戶對編輯器的問題提出了很多次，包括不懂使用、增加功能等，總之，這些開源系統的編輯器，對很多用戶來說就是一場噩夢。
通過數款大廠產品的體驗總結，我們發現，對于文章編輯器這個非?；A但又必不可少的功能，其實帶給用戶的體驗非常糟糕。類似的糟糕體驗，其實還數不勝數，我們這一期就不再展開。最后我們對此次的體驗陷阱做一個簡單的總結。
我認為，造成如此糟糕的編輯器體驗的原因有兩個，第一個，大部分的產品團隊完全不重視編輯器這個功能。在很多產品、設計，包含程序工程師看來，這就是一個非常基礎簡單的功能，所以他們對編輯器非常輕視，也許開發出來的產品團隊自己都沒有親身測試發布過，才會導致有如此多明顯、讓人憤怒的BUG。然而他們根本不知道這樣的設計對用戶的實際體驗影響有多么糟糕。
第二個，產品團隊完全沒有遵循最基礎的設計原則意識。國內大部分產品設計師對設計基礎原則、理論都非常忽視，甚至覺得這些純理論的指導原則毫無意義。這也是設計這門學科在國內發展的真實寫照，但我們從這些體驗陷阱可以看出，一個沒有遵循設計基礎原則的產品，體驗下來，是多么的糟糕，多么的讓人絕望。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
你有想過你的孩子一邊喝六個核桃，一邊聽樊登讀書嗎？如果沒有，這是因為你不知道樊登讀書的銷售場景有多豐富，他們和六個核桃就設計了一個聯名套餐，售價429元。
你有想過你的辦公場地可以加入一個讀書角，讓員工每天讀書學習嗎？如果沒有，這是因為你不知道樊登讀書有一個服務叫數字閱讀空間，它可以讓你的員工一鍵掃碼即可閱讀學習。
你有想過樊登讀書2023年會解讀什么書嗎？如果你想知道，你可以購買他的「未來書單」，他都為你設計好了，不僅有52本實體書，還會給你一份未來書單專屬認證的學員徽章。
如果不去拆解樊登讀書，你根本不知道這個產品可以把讀書這個原本枯燥乏味的學習形式變得這么有創意，絕對超出你的想象。
樊登，作為前央視的主持人，在2013年創辦了樊登讀書會以后，發展不到10年，APP會員數已經突破了6000萬，年營收超過10億，全國線下樊登讀書運營中心超過2000家，成為了知識付費行業的一個獨角獸。這樣一個讀書產品，到底有什么魅力，能讓用戶對它如此著迷，樊登又是如何找到他的書中黃金屋，本期設計大偵探，為大家帶來樊登讀書的產品拆解，讓我們一看究竟。
一、導讀
1. 內容結構
全文11158字，分為六個部分，分別是導讀、產品畫像、讀書服務、內容服務、會員服務和設計總結，你可以通過下面的思維導圖對本文內容結構有全面的了解。
2. 適合人群
第一類，UI/交互設計師，可以跳出執行層，去思考樊登讀書的產品設計策略，提升產品分析能力；
第二類，產品經理/運營，通過全面的產品設計拆解、策略推導，獲取產品設計參考；
第三類，知識付費行業從業者，通過對樊登讀書的全面拆解，獲取競品設計參考。
3. 分析模型
我們主要運用三種模型對產品的功能、設計進行拆解，由于沒有權威的官方數據，所以我們更多以推導的形式去思考樊登讀書為什么這樣設計。
第一個，增長模型。由戴夫·麥克盧爾提出，包含用戶獲取、用戶激活、用戶留存、獲取收入、用戶推薦，分別對應用戶生命周期中的5個重要環節，主要用于分析產品的功能價值。
第二個，上癮模型。由尼爾·法埃爾提出，通過對上千種習慣類產品的調研，總結出一款產品如果要讓用戶習慣、上癮，可以按照觸發、行動、多變的酬賞和投入四個步驟去設計，主要用于分析產品的功能價值和推導產品的策略設計。
第三個，社會心理學。主要結合西奧迪尼的社會心理學《影響力》六大說服力原則——互惠、承諾和一致、社會認同、喜好、權威和稀缺，去推導產品設計的用戶心理設計，主要用于推導產品的策略設計。
二、產品畫像
在本節，我們將會通過樊登讀書官網、百度百科、易觀千帆和七麥數據等資料網站，讓大家對樊登讀書有一個初步的了解。
1. 產品介紹
樊登讀書成立于2013年，是前央視主持人樊登創辦的知識付費品牌。樊登讀書APP是一款為用戶提供書籍精華解讀（非電子書）、精品課程教授、社群學習等知識服務的軟件，致力于為3億國人養成閱讀習慣。根據樊登讀書2022年三季度的社會責任報告顯示，樊登讀書目前會員數突破6000萬，音視頻累計播放超45億人次，用戶收聽總時長超8.1億小時，是知識付費行業的頭部品牌。
2. 商業模式
樊登讀書以讀書點亮生活為價值主張，旨在幫助3億國人養成閱讀習慣，目標用戶群體有C端大眾消費者以及B端企業客戶。樊登讀書作為一個知識付費平臺，吸引了眾多知識創作者加入，主要為用戶提供內容生產、出版合作、線上電商和線下書店四塊業務，其次通過線下加盟代理的模式，目前在全國已經建立超過2000家城市運營中心。樊登讀書的盈利模式非常豐富，除了最基礎的會員VIP服務，還有課程、訓練營、聽書和電商等增值服務，年營收在2021年就超過10個億。
3. 用戶畫像
樊登讀書的用戶群體男女比例均衡，女性占比54.67%，男性占比45.33%；年齡以24-30歲居多，占比40.21%，其次為31-35歲，占比26.36%；樊登讀書的用戶消費能力較強，中等以上消費者占比71.09%；用戶以三線城市最多占比23.20%，一線城市僅占8.93%，其中廣東省最多，山東和河南省位居前三。
4. 信息結構
樊登讀書的菜單欄主要分為「首頁」、「樊登講書」、「免費視頻」和「我的」四個一級欄目?！甘醉摗挂訲AB切換的形式向用戶展示不同的子欄目內容，非常夯實；「樊登講書」是范登讀書的王牌欄目，可以收聽樊登每年講解的52本書；「免費視頻」是一個短視頻欄目，主要截取樊登講書視頻的精華內容，通過沉浸式的體驗，提升用戶使用產品時長；「我的」就是用戶中心，主要儲存用戶的讀書數據，可以查看歷史讀書記錄、訂單和購買歷史等內容。
5. 重要迭代記錄
樊登讀書的首個APP版本發布于2015年2月16日，截止到10月28日，APP版本已經更新至V5.56.0版本，平均1年更新次數為33次。
版本迭代重要記錄
2015年12月，發布V3.0.1版本，Slogan為「成功人士有聲閱讀神器」；
2017年8月，發布V3.9.0版本，Slogan升級為「幫助3億國人養成閱讀習慣的學習型社區」；
2018年4月，發布V3.9.16版本，品牌形象全新升級，加入知識課程等內容；
2018年7月，發布V3.9.22版本，樊登讀書會更名為樊登讀書；
2018年10月，發布V3.9.26版本，Slogan升級為「讀書點亮生活」；
2020年5月，非凡精讀館公測上線，為用戶帶來更多專家解讀書籍；
2021年7月，發布V5.18.0版本，上線李蕾慢讀欄目；
6. 產品生命周期
根據易觀千帆數據顯示，截止到2022年7月，樊登讀書月活躍用戶人數115.94萬，注冊用戶超過6000萬，年營收早在2021年就超過10億。明年即將年滿十歲的樊登讀書，目前處于產品生命周期的成熟期，當下聚焦于商業變現和用戶增長。
7. 競爭圖譜
和聽書類APP相比，樊登讀書月活躍用戶人數排名第19，喜馬拉雅1.3億月活躍用戶人數全網第一；和讀書類APP相比，樊登讀書排名第四，起點讀書月活躍用戶人數1762.70萬全網第一。
三、讀書服務
「讀書服務」是樊登讀書最核心的服務，是實現商業變現最重要的方式。從講書人去拆分，樊登讀書設計了樊登講書（火車頭）、李蕾講經典（前央視主持人，自帶流量和曝光度）和非凡精讀（匯聚各行業精英大咖）三個版塊。從知識學習的場景拆分，樊登讀書設計了「課程」和「書城」兩大版塊，如今的樊登讀書，已經成為一個非常豐富的知識付費學習平臺，不僅有各種知識付費、職業培訓課程，還有訓練營、系統課，以及有聲書和實體書銷售等業務，內容非常夯實。從用戶群體去拆分，樊登讀書還設計了企業共讀營、線下翻轉課堂和數字閱讀空間這些面向企業的讀書服務，把讀書賦能給企業，為他們提供提供綜合性的讀書解決方案，以建立學習型組織為目標。
1. 個人IP
樊登讀書以「樊登」這個超級IP作為火車頭，每年講解52本書為底層服務內容，現在加入了「非凡精讀」和「李蕾講經典」兩個內容欄目。這兩個欄目，不僅可以豐富平臺的內容，還可以彌補樊登一年只講52本書的數量缺陷，從而滿足更多用戶的需求。
1.1 樊登講書
「樊登講書」是樊登讀書的王牌欄目，是吸引用戶收聽和付費的主要內容。樊登以每年為用戶講解52本書和提煉45分鐘書籍精華為賣點，幫助那些沒有時間讀書、讀不懂書的人培養閱讀習慣。從內容分類看，「樊登講書」主要分為心靈、個人成長、親子家庭、人文歷史、商業財經、社科新知、健康生活和作者光臨9個欄目。其中親子家庭是最熱門的內容之一，育兒的書籍是樊登最吸引用戶的內容，樊登還擁有育兒專家的頭銜。
1.1.1 講書詳情頁
①「講書」有三種傳播形式，默認為音頻，其次還有視頻和文稿，非常豐富，用戶可以在頭部自由切換。每一本書就像一個產品、一個主題，除了收聽講書內容，還支持下載音頻和思維導圖，其次還加入了增值服務，比如實體書購買和訓練營（根據這本書的主題設計）。
②講書詳情介紹分為解讀時間軸、評論話題、薦語、你將獲得、作者簡介和精彩選段六個部分。這里的內容結構設計得非常好，「解讀時間軸」是把講書的內容拆分，讓用戶快速獲取講書的結構；「評論話題」是為了增加用戶互動，以評論領禮品的形式提升用戶活躍度；「薦語」和「你將獲得」，是為了吸引用戶閱讀，讓用戶知道這本書對自己有什么幫助；「精彩選段」把這本書的一些名言警句以圖片海報的形式設計出來，吸引用戶分享傳播。
③「文稿」的設計體驗特別好，和其他音頻產品相比，樊登讀書的文稿像是參考了微信讀書這樣的閱讀產品。用戶可以劃線，可以發表想法，劃線最終會生成筆記儲存在用戶中心，還可以把劃線的內容生成海報分享，為平臺拉新引流。
1.2 李蕾講經典
李蕾是前央視主持人，2021年加入樊登讀書。圍繞「李蕾」這個個人IP，樊登讀書設計了「李蕾講經典」欄目，每年為用戶解讀52部經典名著，包含世界名著、國風經典、名人傳記和中國現代經典。在商業變現的設計形式方面，樊登讀書把「李蕾講經典」作為一個獨立的欄目，用戶需要單獨購買VIP會員才能收聽。
1.3 非凡精讀
「非凡精讀」是樊登攜手80+各領域大咖為用戶深度解讀好書，樊登讀書作為一個讀書平臺，鏈接了其他優質領域的大咖，為用戶提供更豐富的內容。
非凡精讀的欄目首頁分為金剛區（鎮館之寶、聽書指南、好書共讀和全部書籍）、本周新書、最近在讀、為你推薦、今日限免、精選書單、非凡主講人和口碑好書八個部分，書籍類型包含個人成長、家庭經營、心靈療愈、人文經典等內容，其次「非凡精讀」的內容也需要用戶單獨購買VIP會員才能收聽。
2. 課程
樊登讀書充分利用知識付費的消費場景，吸引了眾多知識付費KOL加入平臺，為用戶提供豐富的知識付費課程。根據官方數據統計，目前平臺已經有198門課程，包含個人成長、親子家庭、人文歷史、商業財經、社科新知、聲音劇、有聲書、新父母和樊登專區9個欄目。
課程欄目首頁的設計，主要包含金剛區、熱銷課程、課程合集、限免節目、最近在學和專屬為你推薦六個內容。在銷售方式上，課程是以單個付費的形式銷售，定價在100-300元之間。
2.1 樊登課程
樊登不僅講書，還設計了很多的課程，比如樊登講《論語》、可復制的領導力這些以代表作設計出來的課程。樊登課程的欄目首頁包含了精選好課、限免試聽、熱銷周邊和學習園地四個內容。
2.2 技能培訓
樊登讀書還吸引了眾多職場知識創作者的加入，為用戶提供職場技能培訓課程，比如7天求職實戰訓練營、個人IP打造課、0基礎抖音商業化實操課等，課程形式有錄播課也有系統課，定價也不便宜。
2.3 訓練營
相比課程和講書，訓練營是一個動態的系統課程服務，是解決用戶學習的最后一公里。當用戶聽完書以后，事實上只是勾起了用戶的學習興趣，如果要想把知識吃透，還需要深入學習?！赣柧殸I」就是為了解決這樣的痛點而設計的，不僅可以幫助用戶解決學以致用的痛點還增加了新的變現形式。其次訓練營的內容形式非常豐富，不僅包含常見的打卡返現活動，還有系統班、私教課，變現能力非常強。
2.3.1 打卡返現
「打卡返現」是訓練營比較常見的一個活動形式，活動規則是用戶需要繳納保證金才能參與學習打卡，如果全勤，可以退回保證金，反之保證金將會被扣除。這個服務，對于用戶的活躍度提升有很大的幫助，其次以全勤退還保證金為噱頭，但事實上能拿回保證金的用戶很少。
2.3.2 小課程
「小課程」是指培訓時間在3-7天左右的訓練營，比如7天《焦慮自救手冊》行動營（199元）、3天《分享閱讀》線上啟動營（9.9元）。這類小課程是樊登讀書訓練營的核心內容，屬于短頻快的業務，商業變現能力極強。
2.3.3 系統課
「系統課」是指培訓時間在15天以上的訓練營，比如21天《爆款視頻號》訓練營（售價1980元）、家庭教育實戰講師認證營（售價8980元）這樣的課程。系統課是屬于高利潤產品，定價均在1500元以上。
2.4 新父母
「新父母」是樊登讀書聯合「新教育研究院」共同發起的欄目，用戶人群是30-45歲這個用戶群體，旨在通過正確的教育理念幫助傳統的父母找到全新的教育方法，和孩子建立和諧、健康的親子關系。整個欄目首頁主要分為入門必修、父母進階和副業變現三個內容。「入門必修」為父母提供了新父母五門必修大課，售價590元；「父母進階」是實戰特訓營，通過直播授課、小班實操教學，幫助父母快速掌握育兒難題，售價898元；「副業變現」是系統課，通過31天的系統學習，幫助有意向在親子育兒領域發展副業的父母通過專業的培訓成長為一名實戰講師，售價8980元。
2.5 知識副業
樊登讀書提供7種形式的知識副業，分別是樊登小店、知識主播、知識顧問、翻轉師、社群運營官、溝通力講師和兼職客服。其中翻轉師、社群運營官和溝通力講師這三個需要付費報名學習的崗位，目標人群以自由講師、教師、企業培訓者為主，為樊登讀書源源不斷補充講師資源。
2.5.1 樊登小店
樊登小店就是樊登讀書入門級的分銷商，用戶可以零成本申請加入。每個用戶都可以擁有自己的一個小書店，可以通過建立自己的社群或朋友圈進行書籍分享，用戶下單后，出版社直接發貨，店主賺取銷售提成。
2.5.2 知識主播
知識主播就是負責樊登讀書的電商直播，通過直播帶貨，實現副業收入。知識主播可以免費報名，分為兼職主播和全職主播。
2.5.3 知識顧問
知識顧問就是為用戶解決知識困惑的咨詢師，本質是樊登讀書的銷售。用戶可免費報名，樊登讀書提供系統的專業培訓。
2.5.4 翻轉師
翻轉師是樊登讀書·雨知教育的核心服務，課程體系分為六大板塊，目標人群是自由講師、教師、企業培訓者等，最終幫助他們成為樊登讀書的授課講師、知識主播和知識顧問。翻轉師是付費的系統培訓，定價5686元。
2.5.5 社群運營官
社群運營官屬于一個付費的系統培訓，定價3980元。這個服務主要針對在校學生、全職寶媽、自由職業和朝九晚五的上班族，通過21天的系統培訓學習，掌握社群運營的知識和技巧，其次也有機會成為樊登讀書簽約的樊登讀書運營官。
2.5.6 溝通力講師
溝通力講師也是付費服務，價格沒有公開。溝通力講師主要是通過學習樊登的《可復制的溝通力》課程，最終有機會成為樊登讀書溝通力團隊的簽約講師機會。
2.5.7 兼職客服
兼職客服就是主要幫助樊登讀書處理客服的工作，只要用戶有時間，都可以報名申請參與。
3. 書城
3.1 有聲書
「有聲書」包含了樊登專區、情感家庭、心靈療愈、小說文藝等內容，為用戶提供更多的聽書選擇，不過相比喜馬拉雅、微信聽書這樣以開通VIP會員付費收聽的模式，樊登的有聲書直接以單本書籍售價，而且單價不低，均價在19-39元之間。
3.2 心選商城
「心選商城」是樊登讀書官方為用戶提供的一個在線購買實體書和周邊產品的平臺，從書籍數量看，內容包含了兒童科普、兒童繪本、職場進階、心靈治愈、人文社科等類型，非常夯實；從商品類型看，除了書籍，心選商城還支持各種周邊、聯名商品的購買。和傳統的書城相比，心選商城的內容設計非常創新。
3.2.1 三本好書
「三本好書」的本質是一個組合套裝，但是樊登讀書用書單的形式來設計，不僅增加了銷售量，還為用戶設計了充足的購買理由。在「三本好書」的介紹里，文案是這樣的描述——多讀一本書，解決更多生活中的問題；多讀一本書，收獲更多的歸屬感、幸福感；多讀一本書，更深度拓展和提升思維認知，可謂情懷滿滿，讓用戶產生了強烈的購買欲望。
3.2.2 樊登未來書單
「樊登未來書單」定價2199元，屬于高利潤產品，它主要有三個賣點，第一，每月會把當月樊登即將解讀的4本書籍提前郵寄給用戶，讓用戶可以搶先讀；第二，贈送樊登專屬證書、52本書的思維導圖實體卡片、1本專屬定制未來書單禮記和微信專屬社群，不僅擁有精美的實物禮品，還能享受專屬社群，突出尊貴感；第三，以選書、讀書、用書和“寫”書四個環節的服務幫助用戶每周讀透一本書、實現跨越式增長為賣點，為「未來書單」增加了「學習」屬性，從而讓用戶感覺自己買的不是書單，而是成長。
4. 企業服務
4.1 企業讀書
「企業讀書」面對的是企業用戶，以讀書學習為切入點，幫助企業員工建立讀書習慣，協助企業打造學習型組織。「企業讀書」是一個綜合性的讀書解決方案，由內容、工具和服務構成。在內容端，為企業提供樊登讀書超過800+優質內容，還可以為企業量身定制書單；在工具端，為企業員工提供一個滿足多場景學習的高效工具，企業還可以通過PC管理端查看企業員工的讀書數據，實現數字化管理；在服務端，為企業提供專家團隊1V1支持服務，賦能企業組織線下活動，最終幫助企業員工建立閱讀習慣。
4.1.1 企業共讀營
「企業共讀營」是通過優質書單和共讀工具，讓員工在21天社群的督促和專家指導下，一起共讀，通過聽、學、教、練和評五個步驟幫助員工學習讀書，打造全流程的閉環訓練場景，旨在幫助員工養成讀書的習慣，為組織營造讀書氛圍。
4.1.2 線下翻轉課堂
「線下翻轉課堂」是由專業引導師帶領學員共同解構一本書，幫助學員理清邏輯結構、重點知識，深化實際場景應用，在交流互動中營造良好的讀書氛圍?！妇€下翻轉課堂」就像一次企業員工拓展活動，以讀書溝通為主題，充分調動員工的學習熱情，增強團隊學習氛圍，豐富企業員工生活。
4.1.3 數字閱讀空間
「數字閱讀空間」就是在企業辦公場地可利用的空間里面，通過硬件設備作為載體，將圖片、文字、音視頻等內容置入，讓員工掃碼就可以收聽，同時通過這樣的設計，為企業打造閱讀的氛圍。
4.2 開放平臺
樊登讀書已經把讀書做成了標準化的產品，支持接入網頁、小程序、APP、車載等終端，打造了一個通過接入樊登讀書API就可以實現合作的第三方開放平臺。目前樊登讀書有針對教育、銀行、出行等行業設計了解決方案，創意驚人。
5. 總結
從讀書服務我們可以看出，樊登讀書是一個非常有創意和變現能力超強的產品。不管是面對C端大眾消費者，還是面對B端企業用戶，他都可以把「讀書」賦能到到不同的場景和主題中。比如「新父母」這樣的欄目，就是抓住了眾多傳統的父母對孩子教育沒有正確方式的痛點，讓用戶看著就難受、看著就羞愧、看著就恨不得立馬開通會員學習。
其次樊登的商業變現形式設計，非常有層次感。以「新父母」這個服務為例，首先為你推薦基礎課程，如果用戶的自律性不夠或者無法理解，它又設計了訓練營，二次變現。更厲害的是，它為讀書賦予了“副業變現”這個屬性，然后通過8980元的系統課，幫助那些全職或想做副業賺錢的媽媽用戶群體進行系統培訓，層層推進。這樣的設計方式，甚至在企業端也復制了一套，變現能力驚人。
四、內容服務
「內容服務」是幫助產品實現用戶留存和激活的關鍵方式。樊登讀書如今已經把「免費視頻」作為APP的一級欄目，通過1-2分鐘的精華片段播放，可以有效提升新用戶的激活率，最終成為付費用戶；其次樊登讀書還有精彩豐富的線下線下活動。
1. 免費視頻
「免費視頻」是一個短視頻欄目，內容主要從樊登講書的視頻提煉出精華片段剪輯成1-2分鐘的短視頻。這個欄目設計得非常好，第一，把一個長達45分鐘的讀書視頻拆分出來以后，不僅可以降低閱讀成本，還增加了碎片化閱讀的形式，降低用戶讀書的時間成本，可以極大提升用戶的讀書時間；第二，一個免費視頻對新用戶來說，就是一次免費試聽，通過對精華內容的提煉，對用戶的激活有非常大的幫助；第三，免費視頻同時可以作為高質的短視頻素材，分發到抖音、視頻號、小紅書和知乎等平臺，幫助平臺傳播引流。
2. 活動
樊登讀書的「活動』是用戶運營的主要方式之一，活動分為線下活動和線上活動兩種形式。樊登讀書的活動主題非常豐富，不僅可以直接分享平臺的熱門書籍，比如《非暴力溝通》、《職場焦慮》、《陪孩子終身成長》等，還可以結合樊登自己創作的系列書籍為主題，比如《可復制的職場溝通力》等，內容的邊際成本非常低，可不斷復制。樊登讀書在全國擁有2000多家城市運營中心，每一次活動，其實就是一次分享傳播和新用戶激活，另外樊登讀書的活動不是免費參加，很多活動都需要付費報名參與，變現能力非常強。
2.1. 沐光公益
沐光公益是樊登讀書創立的公益品牌，主要為落后的偏遠山區孩子們建立愛心圖書室，幫助孩子們建立閱讀習慣。他的捐贈規則是當用戶捐贈的光束足夠多，樊登讀書就會為欠發達地區捐贈一座“沐光書屋”。用戶可以通過兩種方式為山區的孩子們進行捐贈，第一種是在樊登讀書APP每聽完一本書就會產生一束光；第二種就是通過在樊登讀書的直播間購買書籍，捐獻一束光。這樣的活動設計，結合了公益，更容易打動用戶，重新讓用戶更愿意多讀書，提升用戶活躍度。
3. 眼界
「眼界」是由上?？苿摻逃头亲x書聯合打造的一個內容欄目，從2022年9月15日到2023年1月31日，每周更新一期專題內容，目前已更新六期。從這個欄目可以看出，樊登讀書不僅僅是一個聽書產品，而是成為一個有深度的教育學習平臺。未來類似這樣高質量的欄目相信會越來越多，這會對品牌的宣傳、公信力以及用戶的留存起到非常大的幫助。
4. 發現
「發現」這個版塊，藏得比較深，在「用戶中心」的「常用工具」。但這個版塊的內容非常夯實，它就是一個社區，有熱點新聞、視頻、文章、活動、書友等十余個欄目。從內容設計看，這個欄目有很多想象空間，比如目前內容的生產形式是以媒體號發布，用戶還可以關注，未來樊登打造自己的讀書社區嗎？由于資料有限，并不知道未來這個欄目會怎樣定位和規劃。
5. 總結
從內容服務的拆解，我們可以看出樊登讀書的未來發展空間非常大。首先短視頻的設計會極大提升用戶使用產品的時間，讓產品有更多的可能性。其次通過「發現」這個版塊的設計推導，也許未來樊登讀書會朝著一個讀書社區發展。
五、會員服務
「會員服務」是樊登讀書實現用戶留存和傳播拉新的重要方式。樊登讀書的會員服務非常豐富，而且有很多創新點。樊登讀書設計了四種VIP會員卡，分別是樊登講書、非凡精讀、李蕾講經典和心選黑卡，享受不同的會員權益服務；在用戶運營方面，為用戶提供專業完善的學習分析工具，記錄用戶的學習時長，其次還有每日簽到、成長福利和小書童服務；在用戶福利方面，還為用戶設計了禮品卡、聯合福利、聽書卡和車主福利；最后為了吸引用戶分享推廣，還設計了邀請好友和組隊讀書兩種方式。
1. VIP會員卡
1.1 樊登講書
樊登講書的VIP會員售價388元一年，擁有內容（可收聽樊登講書欄目所有內容）、功能（支持音頻、視頻和文稿）、服務（專屬書童服務）、折扣（購買課程享受折扣）和親友（1人購買多人免費聽）五大特權。
其次樊登讀書還設計了一個多聽多送卡的會員升級服務，售價488元，鼓勵已付費的會員進行會員升級。升級以后可贈送下一年的樊登講書年卡，每周聽1本書可贈送7天VIP時間，不限時間積累，贈滿1年即可獲得下一年VIP。
1.2 非凡精讀
非凡精讀會員定價388元一年，購買后可以暢聽非凡精讀800+本優質書籍資源，服務內容主要是每周更新3本好書、5張14天樊登講書親友卡和每月發放價值超300元的學習福袋。
1.3 李蕾讀經典
李蕾講經典定價也是388元一年，購買后可以暢聽李蕾講經典的所有內容，還擁有5張李蕾講經典親友卡以及400+分鐘配套朗讀節目。
1.4 心選黑卡
心選黑卡是心選商城的會員VIP，定價99元一年，購買后，可以享受最低9.2折的購物折扣，還擁有專屬的黑卡月券和社群。
2. 用戶運營
2.1 成長福利
樊登讀書根據用戶每天讀書的時間記錄詳細的讀書數據，包括累計學習天數、累計學習時長等，這里的交互體驗設計得非常友好，用戶可以直接滑動日歷查看過去半年的讀書時間，非常方便。
2.1.1 勛章
勛章分為五大類，分別是小試牛刀（門檻低，用戶通過完善資料、評論和分享即可獲得）、學無止境（門檻略高，根據學習時間來頒發勛章）、推薦達人（鼓勵用戶分享拉新）、讀書小隊（根據書單任務設計）和限量勛章（根據用戶忠誠度設計，分為相伴1周年、2周年和3周年等），可以看出設計得非常用心。
2.2 學習歷史
「學習歷史」就是用戶學習數據看板，樊登讀書會把用戶每周的學習數據都記錄下來，包括當周學習時長，歷史學習時長等，其次還提供測試、筆記、想法、下載記錄和閱讀記錄等功能。
2.2.1 學習數據
「學習數據」的統計維度非常細，為用戶生成今日、本周以及歷史學習時長記錄，根據用戶的閱讀習慣生成「聽書偏好指數」。其次還設計了一個影響指數，也就是如果用戶分享給好友以后，「學習數據」也會統計好友的讀書時長，生成用戶的影響聽書時長，設計得特別有創意。
2.2.2 測試
當用戶聽完一本書，為了幫助用戶更好的理解這本書的知識，樊登讀書設計了一個測試答題的環節。用戶答完題以后，不僅可以查看答案解析，還可以生成朋友圈海報分享，傳播拉新。
2.3 每日簽到
用戶可以通過每日簽到領取積分，以7天為一個周期，連續簽到積分加倍，積分可以在商品購買時候進行抵扣。在任務中心，樊登讀書設計了不同的小任務，以極低的行動成本鼓勵用戶進行分享、讀書和評論從而贏取積分。
2.4 小書童
小書童的設計非常巧妙，它并不是一個智能AI客服，而是讓用戶添加企業微信客服，這其實是把用戶留存和銷售場景移植到微信上，從而實現用戶激活和復購。
3. 用戶福利
3.1 禮品卡
「禮品卡」是一種線上的虛擬VIP卡，用戶可以購買贈送給好友，售價388元，其實就是樊登講書的VIP。樊登讀書把禮品卡設計成了一種裂變形式，官方會給用戶贈送限時的禮品卡（一般為7天），好友領取以后，用戶還可以獲得3天的VIP時長，傳播拉新能力非常強。
3.2 聯合福利
「聯合福利」就是樊登讀書通過學習的場景鏈接了其他第三方品牌，以聯名的形式向用戶推出聯合服務?？梢哉f，樊登讀書把讀書學習和場景的鏈接，發揮到了極致，比如六個核桃×樊登讀書聯名套裝，你可能想不到還有這樣的套餐，一邊喝六個核桃，一邊聽樊登讀書。
3.3 領聽書卡
「領聽書卡」這個用戶權益主要是回饋教師和醫護這兩個行業的用戶群體。樊登讀書設計得特別巧妙，如果你是這兩類用戶，你可以填入個人信息進行申請；如果你不是，你可以分享給你的老師或朋友（職業為教師和醫護），這樣的設計簡直讓用戶很難有抵抗力，讓用戶主動為產品拉新。而且聽書卡只有1個月的福利，免費試聽結束后極大可能轉化為付費會員。
3.4 車主福利
「車主福利」也是一個樊登讀書和其他行業完美鏈接的活動形式，樊登讀書通過和一些汽車品牌進行深度合作，直接以車載應用的形式載入到汽車設備，用戶在駕車的時候可以直接收聽樊登讀書的內容，多場景提升用戶黏度，讓用戶隨時隨地都能收聽。
4. 用戶推廣
4.1 邀請好友
「邀請好友」的設計特別簡單，但是海報的文案非常打動人，通過很多名言警句和熱門書籍生成的海報，直接轉發給好友或發布在朋友圈，有新用戶注冊付費以后，老用戶則可以領取聽書時長。
4.2 組隊讀書
「組隊讀書」的活動規則很簡單，所有人都可以發起組隊，三人成組開始聽書，完成任務以后可以獲取積分。這個活動對用戶的拉新和提升活躍度有很大幫助，老用戶為了獲取更多的積分，邀請到越多的新用戶，組隊獎勵就會翻倍。
5. 總結
從會員服務的拆解我們可以看出，樊登讀書的用戶運營和營銷形式設計得非常豐富。為了增加用戶的投入成本，他們設計了非常專業完善的學習統計工具，通過勛章、測試、每日簽到形式鼓勵用戶每天聽書、學習。其次還引導用戶添加「小書童」，通過1V1、高頻的鏈接，和用戶建立關系，實現激活和復購。在營銷形式方面，以領書卡為例，如果你是老師，你可以直接領取，而如果你不是老師，那你可以分享給你的老師，這樣的拉新方式，非常值得學習。
六、設計總結
1. 極致的單點突破
樊登讀書可謂是一個單點突破的典型案例。樊登在《講好一本書》中分享過他的創業歷程。最初用戶就是不想讀、沒時間看、讀不懂，他們愿意給樊登交錢讓他讀給他們聽。所以樊登從成立樊登讀書開始，就以每年52本經典好書為主要賣點，解決用戶沒時間讀書、讀不懂書這個痛點，單點突破，最終打造了樊登這個超級火車頭，把講書這件事，做到極致，才有了今天超過6000萬會員的樊登讀書會。
2. 天馬行空的創意
樊登讀書在內容層的設計可謂天馬行空。它不僅把讀書設計了一個標準化的產品，支持消費者隨時收聽、學習。而且升級成了一個塊芯片，可以即插即用，比如讀書開放平臺，支持多設備、多場景的對接，讓樊登讀書和其他行業進行更深入的鏈接。甚至一個普通心選商城，樊登讀書都能設計出三個書單、未來書單這樣的創意服務。
3. 豐富的變現形式
樊登的商業變現形式實在太豐富了，就像齊天大圣的72變，在任何環節，都能讓用戶為知識掏腰包。你可能想象不到你的孩子可以一邊喝六個黑桃一邊聽樊登讀書，又或者你的全職太太正在通過樊登讀書的系統訓練營正在學習如何通過副業變現，甚至當你聽完《焦慮自救手冊》手足無措的時候，你發現原來還有王丹老師為你設計了一個走出焦慮的行動營。
作者：設計大偵探
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn