藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
前言
15年開(kāi)始，紅包大戰(zhàn)占據(jù)了春節(jié)營(yíng)銷的重要位置，各家互聯(lián)網(wǎng)平臺(tái)紛紛“發(fā)錢(qián)”搶占用戶，紅包總額曾在2021年一度達(dá)到120億元的峰值。不過(guò)近兩年開(kāi)始，過(guò)往簡(jiǎn)單粗放的紅包大戰(zhàn)逐漸失去熱度。平臺(tái)不再追求短時(shí)間用戶增長(zhǎng)，這次春節(jié)活動(dòng)就是百度FEED年底以運(yùn)營(yíng)手段打造的內(nèi)容營(yíng)銷活動(dòng)。設(shè)計(jì)團(tuán)隊(duì)以“有福氣 趣新春”為主題提出了內(nèi)容場(chǎng)景化的營(yíng)銷策略，整體圍繞如何把“內(nèi)容做的有趣”來(lái)分享設(shè)計(jì)思路。
一、心智建立內(nèi)容護(hù)城河
1、心智占領(lǐng)：
提到內(nèi)容營(yíng)銷，先不說(shuō)老掉牙的腦白金、可口可樂(lè)。我們先說(shuō)說(shuō)產(chǎn)品和用戶的關(guān)系。我們通過(guò)各大平臺(tái)的定位，提供了信任背書(shū)，但產(chǎn)品只是流量的承載地，最終讓目標(biāo)用戶到達(dá)目的地的還是我們的品牌、內(nèi)容、形象。所以我們?cè)谧鰞?nèi)容營(yíng)銷活動(dòng)的時(shí)候，究竟應(yīng)該怎么做？
2、你的產(chǎn)品容易記住么？
海的味道你知道，是波力海苔。提到藍(lán)瓶的鈣，腦海會(huì)浮現(xiàn)產(chǎn)品的藍(lán)色包裝。說(shuō)到這里，我們就明白了，內(nèi)容營(yíng)銷的核心是圖形和口號(hào)。營(yíng)銷活動(dòng)的核心是品牌符號(hào)和Slogan。
品牌符號(hào)拆解
以春節(jié)項(xiàng)目舉例，提取中國(guó)傳統(tǒng)團(tuán)扇形，象征著大團(tuán)圓。引申為家家戶戶的心愿，全家團(tuán)圓、福氣滿滿。以FEED產(chǎn)品愿景「看更多有趣有用的內(nèi)容」為使,結(jié)合「新年要有福氣」的新年祝福，推出品牌Slogan【有福氣·趣新春】的活動(dòng)理念，開(kāi)啟活動(dòng)篇章。
有了主要的符號(hào)傳達(dá)，其它輔助元素的提取從桂花造型和錢(qián)幣上做了簡(jiǎn)化，寓意吉祥富貴財(cái)源滾滾，應(yīng)用在頁(yè)面細(xì)節(jié)裝飾中。
用顏色表達(dá)個(gè)性
提起品牌符號(hào)，我們首先想到的可能是 Logo，但有些時(shí)候色彩卻是第一印象。春節(jié)是中國(guó)傳統(tǒng)文化的傳承。因此嘗試從中國(guó)傳統(tǒng)色彩體系中象征“福氣、福來(lái)、富貴”的海棠紅作為會(huì)場(chǎng)主顏色。
為了更好的區(qū)分內(nèi)容場(chǎng)景以及增加色彩豐富度，受到“一年四季輪回”的啟發(fā)，延伸品牌輔助色。一年的圓滿在于四季的圓滿，在色彩表現(xiàn)上，從春到人間萬(wàn)物鮮到春雪滿空；對(duì)應(yīng)綠、紅、黃、藍(lán)給人煥然新生的視覺(jué)感受。
用字體豐富品牌基因
字體，不僅可以指代文字內(nèi)容含義和字形美學(xué)價(jià)值，還能透過(guò)字體設(shè)計(jì)的初衷洞察到品牌濃縮其中的理念和哲學(xué)。利用彎曲讓作品動(dòng)感有張力。利用圓角處理增加趣味性，呼應(yīng)“有趣”的品牌理念。用傾斜的樣式營(yíng)造出視覺(jué)張力，形成視覺(jué)焦點(diǎn)。
3、洞察產(chǎn)品的「生命力」
定形象-品牌基因的獨(dú)特形象
角色、品牌、用戶必須是一個(gè)標(biāo)簽，清晰可見(jiàn)。以IP角色與用戶互動(dòng)溝通，建立信任關(guān)系，擁有獨(dú)立人格和魅力。通過(guò)更具人格化的形象，使品牌變得更溫暖。本次活動(dòng)的主IP，在設(shè)定上采用FEED字母演變不同性格IP角色，作為不同維度的形象代表，豐富B/C端的內(nèi)容場(chǎng)景。
情感鏈接-圍繞人設(shè)講故事
如何通過(guò)「IP角色」讓用戶對(duì)產(chǎn)品產(chǎn)生情感呢？首先賦予他們性格，他們分別是福氣、財(cái)富、快樂(lè)和有趣的化身。為用戶帶來(lái)財(cái)、富、樂(lè)、趣是他們的責(zé)任。IP的人格化能很好的與用戶建立品牌好感度。同時(shí)「持續(xù)曝光+情感鏈接」的品牌策略，在活動(dòng)中貫穿內(nèi)容場(chǎng)景、物料推廣、分享轉(zhuǎn)發(fā)等，反復(fù)強(qiáng)調(diào)品牌。
二、你的差異點(diǎn)是什么？
1、化繁為簡(jiǎn)，強(qiáng)化內(nèi)容
由于春節(jié)活動(dòng)周期長(zhǎng)、內(nèi)容多的特點(diǎn)，使得頁(yè)面呈現(xiàn)龐大復(fù)雜，會(huì)造成用戶的理解成本影響留存，因此把內(nèi)容有效呈現(xiàn)、提升屏效、優(yōu)化體驗(yàn)路徑是交互的重點(diǎn)。我們通過(guò)“框架分層”“減少活動(dòng)步長(zhǎng)”對(duì)所有活動(dòng)進(jìn)行了框架升級(jí)。提升活動(dòng)易用性，讓用戶快速參與活動(dòng)。在設(shè)計(jì)表達(dá)上簡(jiǎn)化頭圖背景，讓用戶聚焦場(chǎng)景，引入內(nèi)容。
2、創(chuàng)意場(chǎng)景，引爆內(nèi)容
洞察設(shè)計(jì)策略
百度FEED不同于其他矩陣，我們的產(chǎn)品內(nèi)核是“內(nèi)容”；作為春節(jié)活動(dòng)，濃濃的“年味”是活動(dòng)外核。如果只去介紹我們自己產(chǎn)品的功能、種種好處，這種干巴巴的內(nèi)容無(wú)法在這個(gè)時(shí)代獲得關(guān)注和認(rèn)同，因?yàn)闊o(wú)法與用戶建立切身聯(lián)系。所以在不同層次的內(nèi)容上，我們可以通過(guò)故事化、場(chǎng)景化來(lái)把內(nèi)容做的更有趣，最終實(shí)現(xiàn)業(yè)務(wù)互動(dòng)轉(zhuǎn)化提升。
年俗互動(dòng)-故事型敘述 增強(qiáng)產(chǎn)品代入感
抓住用戶情緒洞察，采用年俗的理念打造場(chǎng)景，營(yíng)造用戶代入感。在視覺(jué)表現(xiàn)上，根據(jù)時(shí)間推移，場(chǎng)景也隨之變化；以回家團(tuán)圓吃年夜飯、到走親訪友云拜年、看煙花賞燈會(huì)，實(shí)現(xiàn)了場(chǎng)景從年三十到十五的視覺(jué)呈現(xiàn)，釋放出情緒共感的疊加效應(yīng)。引發(fā)用戶“過(guò)年”的心理共鳴。
場(chǎng)景設(shè)定
場(chǎng)景一：花樣團(tuán)圓飯。圍繞“三十吃餃子”的年俗為主要點(diǎn)切入，通過(guò)具象的關(guān)鍵詞構(gòu)思場(chǎng)景，結(jié)合品牌符號(hào)，融入中國(guó)風(fēng)建筑表達(dá)“家”，并將餃子、房子、人的比例重構(gòu)，增加畫(huà)面沖擊力，在配色上摒棄大面積的紅黃配色，加入蔻梢綠和淡曙紅作為輔色，為整體添加了一絲春天的氣息。
場(chǎng)景二：神評(píng)云拜年，發(fā)評(píng)送好禮。圍繞“云拜年”的年俗為主要點(diǎn)切入，過(guò)年的時(shí)候拜年是人們辭舊迎新、互相表達(dá)祝愿的一種方式。創(chuàng)意表達(dá)上，除了沿襲以往“登門(mén)”的拜年方式外，在畫(huà)面表現(xiàn)上加入代表新興禮儀“云拜年”的概念，讓視覺(jué)吸引眼球，同時(shí)又很接地氣。
場(chǎng)景三：猜燈謎送吉祥。以元宵賞燈會(huì)的年俗為切入點(diǎn)，夜色旖旎，花燈璀璨，在一片流光溢彩之下，鬧元宵、賞花燈、迎新春。"玉兔東升、鯤鵬萬(wàn)里”，用最美好的祝福為用戶開(kāi)啟新年新篇章。
人文互動(dòng)-內(nèi)容聯(lián)想 強(qiáng)化產(chǎn)品特點(diǎn)
我們?yōu)槭裁匆研〗M內(nèi)容關(guān)聯(lián)到人文上？我們需要給產(chǎn)品定義一個(gè)標(biāo)簽，讓內(nèi)容進(jìn)入一個(gè)優(yōu)勢(shì)的心智賽道，用設(shè)計(jì)手段具像化演繹出來(lái)，讓目標(biāo)用戶最快對(duì)號(hào)入座，提升產(chǎn)品的認(rèn)知效率。而人文包羅萬(wàn)象，與小組內(nèi)容分類不謀而合。
內(nèi)容聯(lián)想
在視覺(jué)表現(xiàn)上，圍繞“小組發(fā)布內(nèi)容”的類比聯(lián)想，場(chǎng)景選取攝影、養(yǎng)花、命理、詩(shī)詞、鄉(xiāng)村等七大不同人文場(chǎng)景，著力刻畫(huà)“小組內(nèi)容”強(qiáng)關(guān)聯(lián)的人文元素，以此映射產(chǎn)品的特點(diǎn)，激發(fā)用戶參與意愿。借助想象放大或夸張內(nèi)容特征，更鮮明的強(qiáng)調(diào)內(nèi)容本質(zhì)。
3、豐富體驗(yàn)
為了維護(hù)用戶粘性，讓用戶每天都來(lái)“玩”。加入2級(jí)活動(dòng)，用“獎(jiǎng)勵(lì)”“成就”“抽簽”形成驅(qū)動(dòng)用戶雷達(dá)地圖，多維度持續(xù)牽引，增強(qiáng)互動(dòng)體驗(yàn)。
如何讓用戶玩下去？
【抽簽活動(dòng)-新年福氣簽】
活動(dòng)玩法：用戶每天進(jìn)入活動(dòng)可抽福氣簽，隨機(jī)發(fā)放簽文以及紅包獎(jiǎng)勵(lì)，中獎(jiǎng)+祝福的滿足感驅(qū)動(dòng)用戶回流。
洞察&創(chuàng)意
新的一年，人們對(duì)美好生活都有向往和期盼，“討彩頭”是每位用戶對(duì)生活的新追求。在活動(dòng)的設(shè)計(jì)上要吉祥滿滿，自帶好彩頭。用福袋作為容器承載簽文，以抽幸運(yùn)球、得獎(jiǎng)勵(lì)贏福氣作為情感驅(qū)動(dòng)，刺激用戶玩下去。
在簽文設(shè)定上用團(tuán)扇的品牌符號(hào)作為基礎(chǔ)形狀，加持“祥云”“吉祥話”讓活動(dòng)不止驚喜，更是平臺(tái)對(duì)用戶的祝愿。
如何讓用戶“回來(lái)”玩？
【激勵(lì)玩法-我的成就】
洞察&創(chuàng)意
在成就玩法中，勛章作為精神激勵(lì)直接授予用戶，提升用戶在活動(dòng)內(nèi)的成就感和價(jià)值。另一方面，勛章也作為主活動(dòng)物質(zhì)激勵(lì)的間接載體，用戶通過(guò)解鎖勛章來(lái)獲得終極大獎(jiǎng)。從設(shè)計(jì)角度，采用三維立體視覺(jué)風(fēng)格，結(jié)合IP形象，使勛章更年輕有趣，讓用戶形成記憶點(diǎn)。強(qiáng)化視覺(jué)沖擊，滿足用戶的成就感和榮譽(yù)感，刺激用戶回流和分享。
驚喜彩蛋，拉升互動(dòng)體驗(yàn)
除了視效的打磨外，營(yíng)造“驚喜感”是在體驗(yàn)中非常重要的一環(huán)。無(wú)論是抽獎(jiǎng)還是成就，除了在視覺(jué)上有抽獎(jiǎng)的儀式感。在活動(dòng)中增加互動(dòng)彩蛋，用戶在投票以及點(diǎn)贊后會(huì)有對(duì)應(yīng)的動(dòng)效，讓整體體驗(yàn)更加細(xì)膩。
精彩視頻，點(diǎn)擊可看
結(jié)語(yǔ)
總結(jié)一下本篇文章關(guān)于內(nèi)容場(chǎng)景化營(yíng)銷的設(shè)計(jì)要點(diǎn)：
心智占領(lǐng)：前置化思考品牌打法，從品牌符號(hào)、Slogan、色彩基因、字體設(shè)計(jì)到IP的設(shè)定，全鏈路反復(fù)強(qiáng)調(diào)品牌。
設(shè)計(jì)創(chuàng)意：用故事性、場(chǎng)景化演繹設(shè)計(jì)創(chuàng)意，差異化視覺(jué)呈現(xiàn)。
互動(dòng)體驗(yàn)：用“驚喜感”拉升互動(dòng)體驗(yàn)。
希望以上的設(shè)計(jì)思考，可以給大家一些啟發(fā)。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
。
WWDC22 全球開(kāi)發(fā)者大會(huì)結(jié)束，有太多小眾產(chǎn)品脫穎而出。無(wú)形中有一股巨大的力量，在慢慢崛起，那便是來(lái)自世界各地的小型開(kāi)發(fā)團(tuán)隊(duì)和獨(dú)立開(kāi)發(fā)者。他們的產(chǎn)品小而美，小到僅靠一個(gè)功能撐起產(chǎn)品，美到完全忘記這是工具產(chǎn)品。那么具體都有哪些產(chǎn)品細(xì)節(jié)，不妨聽(tīng)我細(xì)細(xì)道來(lái)～
其中，我精挑細(xì)選出一個(gè)海外和三個(gè)國(guó)區(qū)優(yōu)秀產(chǎn)品進(jìn)行產(chǎn)品設(shè)計(jì)細(xì)節(jié)分析，一探小眾產(chǎn)品究竟好在哪里！
（專注面條 - 輕松重獲專注力）2022年Apple設(shè)計(jì)大獎(jiǎng)入圍名單之一
（謎底時(shí)鐘 - 讓時(shí)間看得見(jiàn)）2022年Apple設(shè)計(jì)大獎(jiǎng)入圍名單之一
（Waterllama - 開(kāi)啟喝水時(shí)間）2022年Apple設(shè)計(jì)大獎(jiǎng)入圍名單之一
（OffScreen - 自律番茄鐘，不做手機(jī)控）Apple Store精品推薦64次
排名不分先后，從以上幾款產(chǎn)品logo中可以看出產(chǎn)品之間設(shè)計(jì)風(fēng)格基本不一樣，不存在借鑒抄襲，各自都在細(xì)分領(lǐng)域深耕播種。
也正是因?yàn)殚_(kāi)發(fā)者的敬業(yè)、精益、專注、創(chuàng)新的“工匠精神”，才能讓產(chǎn)品突出重圍，優(yōu)秀的呈現(xiàn)在用戶面前使用。
Slogan：專注，可以做出一碗好面條。
你以為這只是讓人做泡面的App！那就錯(cuò)了。這是用“煮一碗好面條是需要時(shí)間的”為理念，讓用戶專注工作，類似番茄工作法。
有趣的是，這款效率工具被插畫(huà)元素完美包裹起來(lái)，一點(diǎn)感受不到工具給人帶來(lái)的疏遠(yuǎn)感。相反，極具趣味性的畫(huà)面讓工具使用起來(lái)也充滿樂(lè)趣充滿愛(ài)。
正因這上乘的設(shè)計(jì)質(zhì)感，《專注面條》曾數(shù)次登上 App Store 推薦頁(yè)，至今收獲 7000+ 個(gè)評(píng)價(jià)、4.9 的評(píng)分。
想象一下你正在烹飪一碗面條。
在烹飪時(shí)間結(jié)束前．不要試圖拿起你的手機(jī)，這樣會(huì)讓水蒸汽流失，面條就不好吃了。日后，你可以使用專注面條完成你希望專注的任何事情。
它把工作比喻成煮面，煮面要專心，把控火候，合適時(shí)間放入主料和調(diào)料；工作同樣要專心，遵循自己的方法論，把每個(gè)步驟和流程都執(zhí)行到位。工作完成了，一碗面也就煮好了。
專注力在哪里，效率就在哪里。
「專注面條」希望輔助你以一種詼諧有趣的方式，重獲這個(gè)時(shí)代最稀缺的專注力。放下你的手機(jī)，煮一碗面，我們一起對(duì)抗手機(jī)成癮！
時(shí)間一到，你的面條就做好了，你也完成了一次有意義的專注。
打破常規(guī)，不用系統(tǒng)默認(rèn)蘋(píng)方字體，而是選擇手寫(xiě)體風(fēng)格的「素材集市康康體」字體（文末領(lǐng)取可商用字體包）作為通篇文字載體。
這也是為統(tǒng)一界面風(fēng)格做的一個(gè)優(yōu)化嘗試。
不得不說(shuō)，這個(gè)選擇是非常適合的。（體量較小的產(chǎn)品可以適當(dāng)選用設(shè)計(jì)字體，一旦產(chǎn)品功能做多做大還是乖乖用默認(rèn)字體規(guī)范靠譜些）。
打開(kāi)App，你能明顯看到簡(jiǎn)潔的手繪風(fēng)格元素，使整個(gè)產(chǎn)品透?jìng)鞒銮逍驴蓯?ài)的一面。這也是Alex作者受到女兒?jiǎn)l(fā)，畢竟小孩子總有天馬行空的想象，但大人們卻很難跳脫現(xiàn)實(shí)產(chǎn)生有趣想法。
App界面極其簡(jiǎn)潔，只有黑白灰三種顏色，搭配手繪風(fēng)格的設(shè)計(jì)元素，使產(chǎn)品整體清新脫俗，與眾不同。
圖標(biāo)設(shè)計(jì)脫離設(shè)計(jì)規(guī)范，采用更加符合產(chǎn)品氣質(zhì)的手繪風(fēng)格，這樣使得界面統(tǒng)一性極高，氛圍感十足。
這也間接告訴設(shè)計(jì)師們圖標(biāo)設(shè)計(jì)上一定要跟著產(chǎn)品形態(tài)去做設(shè)計(jì)，而不要一味以第三方規(guī)范為唯一衡量標(biāo)準(zhǔn)來(lái)設(shè)計(jì)，結(jié)果就是同質(zhì)化泛濫。
計(jì)時(shí)是產(chǎn)品核心功能，點(diǎn)擊首頁(yè)左上角專注時(shí)長(zhǎng)，會(huì)出現(xiàn)不同的煮面方案。
可設(shè)置5分鐘-180分鐘之內(nèi)任意時(shí)長(zhǎng)的專注時(shí)間，同時(shí)為5、10、15、20、25、30、35、40、45、50、55、60、180分鐘，這13個(gè)時(shí)間段繪制了專屬面條配方。你不用手機(jī)的時(shí)間越長(zhǎng)，你煮的泡面配料就越豪華越高級(jí)。設(shè)計(jì)元素也越豐富。當(dāng)你碰到手機(jī)，就會(huì)震動(dòng)十閃光。
面條設(shè)計(jì)方案與功能的完美呈現(xiàn)是產(chǎn)品最吸引人的地方。
根據(jù)累積的專注時(shí)長(zhǎng)還可以獲得相應(yīng)的稱號(hào)，配合幸苦工作后汗水落下動(dòng)畫(huà)，很是生動(dòng)有趣。
不僅如此，專注面條還特意為女性男性做了兩套插圖設(shè)計(jì)方案，充分考慮不同群體的使用體驗(yàn)，僅僅是效率型產(chǎn)品就做到如此細(xì)節(jié)，不好才怪。
這也是除了故事卡片第二種用總時(shí)長(zhǎng)配圖來(lái)增加產(chǎn)品使用黏性產(chǎn)生記憶點(diǎn)的設(shè)計(jì)之處。
1.永久買(mǎi)斷制
【專注面條】一次買(mǎi)斷制，面條價(jià)格￥18。購(gòu)買(mǎi)后產(chǎn)品內(nèi)的功能都可使用。但“故事卡片”需要鑰匙來(lái)解鎖，￥6.00=鑰匙*6，不想付費(fèi)那就乖乖完成計(jì)時(shí)任務(wù)來(lái)隨機(jī)獲得故事卡片。
作為一個(gè)功能單一的產(chǎn)品，賣(mài)點(diǎn)在哪里？核心競(jìng)爭(zhēng)力在哪里？依碳水Sir來(lái)看付費(fèi)用戶大多在為品牌理念買(mǎi)單。
就是產(chǎn)品自身的品牌調(diào)性，區(qū)別于市面上任何一款產(chǎn)品，不隨波逐流，用全新的面條理念代替時(shí)間，并且有其鮮明的手繪風(fēng)格和插圖元素，即使被抄襲也只能抄到“外殼”，內(nèi)在的東西是偷不走的。
2.購(gòu)買(mǎi)鑰匙
專注完成后，靠概率獲得鑰匙，用來(lái)解鎖故事卡片以及 “腦洞大開(kāi)” 的結(jié)局作為獎(jiǎng)勵(lì)。緩解你專注后的緊張感，增加趣味互動(dòng)性，同時(shí)為下一次專注做好準(zhǔn)備。
故事中皮諾曹、烏鴉喝水、長(zhǎng)發(fā)公主等雖然都是我們耳熟能詳?shù)耐?，但作者?Alex ）給他們加上了一些彩蛋。譬如在《猴子撈月》的卡片里，解謎前三個(gè)猴子看到河流中有一個(gè)圓圈，當(dāng)我們找到面條的位置時(shí)，會(huì)發(fā)現(xiàn)猴子們看到的不過(guò)是一個(gè)香菇都大為震驚，畫(huà)面里充滿奇妙的想象力。
當(dāng)用戶看到未解鎖的故事會(huì)出于好奇點(diǎn)進(jìn)去，這時(shí)就需要鑰匙來(lái)解鎖，畢竟不是靠專注獲得的卡片就要用別的辦法（購(gòu)買(mǎi)鑰匙）打開(kāi)，這就是第二個(gè)商業(yè)轉(zhuǎn)化點(diǎn)。
目前已有的27張故事卡片，每一個(gè)都與面條結(jié)合進(jìn)行故事綁定，讓用戶在效率軟件中也能感受到游戲的樂(lè)趣，把故事卡片當(dāng)成解鎖過(guò)關(guān)元素，引發(fā)用戶對(duì)故事卡片更多的渴望。這也是通過(guò)獎(jiǎng)勵(lì)機(jī)制提高用戶參與感進(jìn)而提高使用黏性以及提升付費(fèi)轉(zhuǎn)化的一種方式。
一個(gè)動(dòng)作，一堆腦洞，組成了一個(gè)能量滿滿的 app。
6 月 1 日，蘋(píng)果發(fā)布了 2022 年度設(shè)計(jì)大獎(jiǎng)入圍名單，在「創(chuàng)新思維」類別中出現(xiàn)了中國(guó)區(qū)《專注面條》的身影，雖然止步于決賽圈，但我覺(jué)得這并不是結(jié)束，而是全新的開(kāi)始。
優(yōu)秀的產(chǎn)品總有其相似之處，也有其不同。要想做一款好的小眾產(chǎn)品，除了把產(chǎn)品本身所解決的用戶痛點(diǎn)做好做精外，植入產(chǎn)品理念，與用戶產(chǎn)品某種關(guān)聯(lián)。
就如它把專注計(jì)時(shí)比作烹飪時(shí)間，當(dāng)完成專注，你將獲得一碗香噴噴的泡面一樣，給用戶感受并不是冷冰冰的機(jī)器“?！钡母嬖V用戶專注結(jié)束，而是通過(guò)巧妙的設(shè)計(jì)與用戶之間產(chǎn)生真實(shí)聯(lián)系，這或許就是成功的秘密。
借用「專注面條」Slogan說(shuō)的：專注，可以做出一碗好面條。
各位設(shè)計(jì)師們不妨學(xué)習(xí)一下背后的思考。
謎底時(shí)鐘是一款設(shè)計(jì)精美的時(shí)鐘應(yīng)用。
Slogan：陪伴你學(xué)習(xí)、工作與生活。
你沒(méi)看錯(cuò)！它僅有時(shí)間和計(jì)時(shí)功能。
作為一款時(shí)鐘App，UI設(shè)計(jì)有什么不同，才被入選2022 蘋(píng)果設(shè)計(jì)大獎(jiǎng)！成為中國(guó)開(kāi)發(fā)者之光！我們一起來(lái)看看。
第一次下載，就會(huì)啟動(dòng)引導(dǎo)流程，切換頁(yè)面時(shí)配合錯(cuò)幀動(dòng)畫(huà)，使設(shè)計(jì)細(xì)節(jié)更加突出明顯，強(qiáng)化品牌調(diào)性。產(chǎn)品中的引導(dǎo)頁(yè)都可以嘗試這種表現(xiàn)形式。
進(jìn)入首頁(yè)，展示文字+動(dòng)效的引導(dǎo)流程，統(tǒng)一的表現(xiàn)形式，讓使用者更容易理解。首頁(yè)交互引導(dǎo)，讓用戶對(duì)產(chǎn)品隱藏的交互功能得到二次記憶，具有增強(qiáng)產(chǎn)品記憶的作用。
2-1.設(shè)計(jì)元素
品牌風(fēng)格設(shè)計(jì)很前沿，采用2020年大火的新擬態(tài)設(shè)計(jì)風(fēng)格，也能看出設(shè)計(jì)表現(xiàn)緊跟市場(chǎng)潮流走，是一款個(gè)性且年輕的App。
整體使用下來(lái)，印象最深的就是模塊列表、圖標(biāo)的微質(zhì)感設(shè)計(jì)，以及彈窗布局的規(guī)范化設(shè)計(jì)，還有部分組件采用毛玻璃設(shè)計(jì)手法等。
值得注意的是，產(chǎn)品對(duì)iOS原生組件進(jìn)行大量重新設(shè)計(jì)，結(jié)合新擬態(tài)風(fēng)格繪制了一套更符合產(chǎn)品調(diào)性的組件出來(lái)。讓人使用一次就記憶猶新。
2-2.核心力-交互感知
我分別羅列出計(jì)時(shí)切換器、計(jì)時(shí)完成動(dòng)效、時(shí)間選擇器、鬧鐘動(dòng)效、刪除交互、浮窗切換交互這六個(gè)來(lái)簡(jiǎn)單談?wù)効捶āＲ韵聨讉€(gè)動(dòng)效交互基本涵蓋市面上的多半產(chǎn)品的基礎(chǔ)功能，之所以展示出來(lái)，是因?yàn)椤钢i底時(shí)鐘」在原有的基礎(chǔ)組件上大膽創(chuàng)新，摒棄原生組件。
這樣做對(duì)于功能簡(jiǎn)單的產(chǎn)品來(lái)說(shuō)絕對(duì)是錦上添花有助于產(chǎn)品形成記憶點(diǎn)的設(shè)計(jì)細(xì)節(jié)。這也從側(cè)面反映出市面上的部分產(chǎn)品，只注重功能堆疊而完全忽視原生組件還可以二次設(shè)計(jì)的方向。
什么是好的交互，操作時(shí)無(wú)感知是一種，操作時(shí)有記憶點(diǎn)也是一種。顯然「謎底時(shí)鐘」是后者。要知道優(yōu)秀的交互自成一派，把單一的功能做到極致，你的產(chǎn)品就不會(huì)差到哪里。
時(shí)鐘就是要長(zhǎng)時(shí)間靜默展示，除了極簡(jiǎn)、擬物、科技、馬賽克、霓光、積木、微質(zhì)感、電子屏、睡眠屏、卡通風(fēng)、各類鐘表材質(zhì)等等19種風(fēng)格高顏值時(shí)鐘外，霓光時(shí)鐘具有不一樣的功能。
當(dāng)你早晨使用它文案“早安晨之美”中午“午安好心情”下午“飲啖茶食個(gè)包”，除了文案變化，圖標(biāo)也跟隨名稱而變，又一個(gè)用美食來(lái)拉近與用戶距離的設(shè)計(jì)細(xì)節(jié)。
不僅如此，在低電量情況下，霓光效果不顯示，底部會(huì)持續(xù)閃爍電量不足的指示燈，告訴用戶手機(jī)沒(méi)電信號(hào)，請(qǐng)及時(shí)充電。當(dāng)用戶插上電源，霓光時(shí)鐘會(huì)重新啟動(dòng)亮光模式，給予用戶通電感知。
雖然很小的設(shè)計(jì)點(diǎn)，但誰(shuí)又能想到時(shí)鐘與電量不足產(chǎn)生聯(lián)系。看來(lái)開(kāi)發(fā)者對(duì)時(shí)鐘的創(chuàng)意聯(lián)想是豐富多彩的。
無(wú)意間觸碰手機(jī)時(shí)發(fā)現(xiàn)積木零星掉落下幾個(gè)，在好奇的驅(qū)使下又晃動(dòng)了一下手機(jī)，所有積木都掉落下來(lái)了。
具有數(shù)字屬性的積木依然不斷變換數(shù)字，并且配合手機(jī)陀螺儀可以模擬現(xiàn)實(shí)空間進(jìn)行移動(dòng)，交互玩法趣味十足，讓我忍不住多玩了幾次。
這種用到iOS系統(tǒng)功能做的大膽嘗試，有時(shí)會(huì)給產(chǎn)品帶來(lái)意想不到的好處，各位總監(jiān)們不妨試試。
采用終身會(huì)員與月會(huì)員模式，月會(huì)員很好理解，為了產(chǎn)品能持續(xù)做下去，而推出的付費(fèi)模式，目的是能持續(xù)有營(yíng)收。終身會(huì)員是一個(gè)很有意思的模式。
據(jù)了解，產(chǎn)品前期功能相對(duì)單一時(shí)，推出的一種買(mǎi)斷制，但隨著新功能不斷增加，原有￥25定價(jià)相比較低，早期買(mǎi)斷的用戶獲利更大，為了商業(yè)與產(chǎn)品平衡，使其具備良性發(fā)展空間，于是又推出月會(huì)員模式。
這也牽扯到另一點(diǎn)，凡是未上線新功能都可以輕松決定是否開(kāi)發(fā)上線，一但功能上線，想要取消或抹掉功能，就沒(méi)那么輕松簡(jiǎn)單了。這也是早期App都一次買(mǎi)斷，后期改為訂閱模式也必須有終身買(mǎi)斷的內(nèi)購(gòu)入口。
如果我們是“匠人”就會(huì)把 App 當(dāng)藝術(shù)品，雖然只有也僅有一種功能，但只要花費(fèi)了大量的時(shí)間去想創(chuàng)意，去做到設(shè)計(jì)、交互的完美融合，甚至一遍一遍地優(yōu)化各種細(xì)節(jié)部分，埋設(shè)彩蛋，最后的最后呈現(xiàn)出來(lái)讓自己滿意。那么它就很可能成為一款小而美的產(chǎn)品。
烏克蘭開(kāi)發(fā)團(tuán)隊(duì)出品。讓喝水變成一件快樂(lè)輕松的活動(dòng)。僅有的喝水記錄功能，卻用大量動(dòng)物角色來(lái)獎(jiǎng)勵(lì)喝水后的你，讓你欲罷不能。保持水分保持快樂(lè)！從截圖中不難看出，該App內(nèi)置大量動(dòng)物插圖，通過(guò)喝水來(lái)解鎖小動(dòng)物，解鎖前僅展示動(dòng)物輪廓，讓用戶產(chǎn)生好奇從而保持喝水好習(xí)慣，這個(gè)概念很好，產(chǎn)品很棒，那我們一起來(lái)看看吧。
產(chǎn)品中icon展示較少，更多是用小插畫(huà)來(lái)代替，頁(yè)面中大量的banner以及動(dòng)物卡片，豐富產(chǎn)品的同時(shí)營(yíng)造一種輕松的感覺(jué)。并沒(méi)有很多圖標(biāo)干擾用戶操作。與水相關(guān)的插圖用動(dòng)效來(lái)承載，讓簡(jiǎn)單的元素變得趣味橫生，很是新穎。除了普通的水以為，Waterllama還為各種飲料酒水做了全套icon，共計(jì)48+之多，可見(jiàn)產(chǎn)品對(duì)于水的核心功能做足了努力，才有如此多的類型與選擇供用戶記錄。
無(wú)論您是想休息一下咖啡因，還是想通過(guò)果汁和冰沙來(lái)增強(qiáng)免疫系統(tǒng) - 選擇任何挑戰(zhàn)，盡情享受吧！
遠(yuǎn)離含糖飲料和酒精，或者在 10 天內(nèi)只喝水補(bǔ)充水分?？纯茨愕倪M(jìn)展如何，別忘了與朋友分享你的結(jié)果。
Waterllama 應(yīng)用程序中已有超過(guò) 45 個(gè)可愛(ài)的動(dòng)物角色，我把解鎖與隱藏的都羅列到上放品牌元素中，可以看下總有一款是你的菜。你也可以使用隨機(jī)模式，讓每一天都變得不同。當(dāng)天喝水目標(biāo)達(dá)成就會(huì)解鎖一個(gè)動(dòng)物，精美的插圖讓人賞心悅目，期待第二天繼續(xù)喝水打卡挑戰(zhàn)。
首頁(yè)下方的動(dòng)物挑戰(zhàn)卡片，交互形式采用App Store卡片點(diǎn)擊交互，無(wú)論是轉(zhuǎn)場(chǎng)過(guò)度，還是下拉放大主體都給畫(huà)面賦予趣味性操作體驗(yàn)。一邊體驗(yàn)交互細(xì)節(jié)，一邊了解喝水的各種好處，娛樂(lè)加學(xué)習(xí)兩不誤，很是輕松。
內(nèi)購(gòu)頁(yè)面采用icon輪播的動(dòng)效展示，優(yōu)點(diǎn)是在一小塊區(qū)域通過(guò)消失漸現(xiàn)可以展示所有內(nèi)容，使內(nèi)購(gòu)頁(yè)面干凈清爽能更好的閱讀頁(yè)面信息。按鈕通過(guò)循環(huán)放大，引導(dǎo)用戶進(jìn)行付費(fèi)操作，雖然很刻意，但絲毫沒(méi)有感受到強(qiáng)制性選擇。
當(dāng)產(chǎn)品想要在內(nèi)購(gòu)頁(yè)強(qiáng)化品牌背書(shū)，給到用戶可靠穩(wěn)定感，可以選出具有代表性的優(yōu)質(zhì)評(píng)價(jià)，展示在內(nèi)購(gòu)頁(yè)下方，通過(guò)左右切換查看更多評(píng)價(jià)。
每年￥28，終身買(mǎi)斷制￥48.00。兩個(gè)價(jià)格是利用價(jià)格差來(lái)制造價(jià)格錨點(diǎn)，引導(dǎo)用戶購(gòu)買(mǎi)終身會(huì)員，這對(duì)用戶來(lái)說(shuō)最實(shí)惠劃算的方案，同時(shí)也是產(chǎn)品所希望的。大量的終身用戶長(zhǎng)時(shí)間使用產(chǎn)品，成為核心用戶群體，助力產(chǎn)品越做越好。
現(xiàn)在不難看出，優(yōu)秀的產(chǎn)品往往更關(guān)注細(xì)節(jié)表現(xiàn)，用動(dòng)態(tài)展示內(nèi)容，讓玩法更具趣味性，頁(yè)面簡(jiǎn)約而不簡(jiǎn)單。并不是頁(yè)面元素越多越好，相反把簡(jiǎn)單的功能做到極致就會(huì)帶來(lái)正向有價(jià)值的反饋。
這款產(chǎn)品雖然沒(méi)出現(xiàn)在WWDC22上，但與「謎底時(shí)鐘」是同一家公司。無(wú)論設(shè)計(jì)或功能使用都相媲美。
手機(jī)已成為人人必備的物品，內(nèi)置的各種App占有著人們的生活，手機(jī)依賴已成為這個(gè)時(shí)代普遍的一種現(xiàn)象。雖然人們都知道長(zhǎng)時(shí)間看手機(jī)不好，下意識(shí)的克制看手機(jī)行為，以為這樣脫離手機(jī)依賴患者這個(gè)稱號(hào)。往往碎片化看手機(jī)，一天下來(lái)使用手機(jī)的時(shí)長(zhǎng)不降反增?！窸ffScreen」通過(guò)細(xì)分時(shí)間屬性為用戶直觀呈現(xiàn)各種場(chǎng)景下使用手機(jī)的詳細(xì)數(shù)據(jù)，通過(guò)數(shù)據(jù)展示以及專注時(shí)間，防止用戶沉迷手機(jī)無(wú)法自拔。
「OffScreen」背景色使用極其大膽。
淺色模式下采用暖橘色作為品牌主色調(diào)，暗色模式下采用海藍(lán)色作為主色調(diào)，相比Apple設(shè)計(jì)規(guī)范中的顏色，這種帶有傾向性的色彩更容易營(yíng)造一種產(chǎn)品氛圍，強(qiáng)化產(chǎn)品感知度。
圖標(biāo)方面，具有操作屬性的圖標(biāo)采用線性（相對(duì)好理解），具有展示屬性的圖標(biāo)采用面性風(fēng)格（設(shè)計(jì)表現(xiàn)更強(qiáng)且有文字描述相對(duì)好理解）。
引導(dǎo)流程專場(chǎng)用了大量位移、漸變效果，使原本單調(diào)的靜態(tài)頁(yè)賦予生動(dòng)表現(xiàn)力。吸引用戶眼球，達(dá)到品牌傳播效果。
動(dòng)效貼合操作效果，用戶還沒(méi)使用就能一眼明白產(chǎn)品如何使用，這就是引導(dǎo)動(dòng)效的好處。
當(dāng)你專注番茄鐘時(shí)，只需在番茄上滑動(dòng)標(biāo)尺選擇準(zhǔn)確時(shí)間，就能開(kāi)始專注。
當(dāng)完成專注會(huì)提供統(tǒng)計(jì)數(shù)據(jù)，并且有彩帶飄落效果，營(yíng)造打卡勝利的儀式感，強(qiáng)化產(chǎn)品感知，為用戶下一次專注做準(zhǔn)備。
內(nèi)購(gòu)頁(yè)采用依次呈現(xiàn)的交互方式，頭圖是一個(gè)人在看手機(jī)，采用線性風(fēng)格手法，這種形式區(qū)別于其他產(chǎn)品，會(huì)給人以眼前一亮的感覺(jué)，加深用戶對(duì)產(chǎn)品的記憶。
付費(fèi)按鈕吸附與頁(yè)面底部，根據(jù)菲茨定律，起始于目標(biāo)位置越近，到達(dá)目位置的時(shí)間就會(huì)越短，從而用戶更容易點(diǎn)擊。
一次買(mǎi)斷制，￥30.00解鎖終身會(huì)員。
作為一款時(shí)間統(tǒng)計(jì)、番茄鐘、專注時(shí)間與一身的產(chǎn)品，對(duì)于時(shí)間管理有強(qiáng)需求的用戶來(lái)說(shuō)價(jià)格還算不錯(cuò)。流暢的交互呈現(xiàn)以及有趣的配圖描述，間接感受到Off Screen產(chǎn)品的細(xì)膩之處，用戶為此買(mǎi)單也不是說(shuō)。
OffScreen的成功在于能把單一的屏幕使用時(shí)間進(jìn)行多維度分析呈現(xiàn)，就說(shuō)“呆呆的看”與“邊走邊看”這兩項(xiàng)數(shù)據(jù)，就是調(diào)用系統(tǒng)運(yùn)動(dòng)數(shù)據(jù)來(lái)判斷使用屏幕的場(chǎng)景。
況且每項(xiàng)數(shù)據(jù)都支持時(shí)間軸可視化圖表的方式呈現(xiàn)，細(xì)節(jié)之處方見(jiàn)專業(yè)，這也是好產(chǎn)品所要具有的垂直領(lǐng)域?qū)I(yè)度。
想要產(chǎn)品脫穎而出，一定要嘗試將軟件與硬件結(jié)合，可以是陀螺儀、眼動(dòng)追蹤、閃光燈等等，總之系統(tǒng)推出新的功能，就盡量把它用到產(chǎn)品里去。
不僅如此，看以上幾個(gè)產(chǎn)品，截圖模塊內(nèi)容都頂滿了，說(shuō)明App想要展示的細(xì)節(jié)還有很多，從側(cè)面也能看到開(kāi)發(fā)者們不留一塊“空白”的用心。
大廠產(chǎn)品固然很好，做法更符合大眾市場(chǎng)符合消費(fèi)者需求，隨著不斷新增功能，產(chǎn)品變得越來(lái)越普適大眾，無(wú)產(chǎn)品獨(dú)特風(fēng)格可言。因?yàn)楸澈笥旋嫶蟮膯T工要養(yǎng)活。
相反小團(tuán)隊(duì)獨(dú)立開(kāi)發(fā)者們沒(méi)有太多顧慮，一心想把一個(gè)點(diǎn)做好做緊致，哪怕只是計(jì)時(shí)，也要做的自己滿意為止，才會(huì)交卷，時(shí)代在變，匠人之心從未改變。值得致敬這些開(kāi)發(fā)者們。
跳脫大廠的產(chǎn)品，來(lái)看看獨(dú)立開(kāi)發(fā)者和小型開(kāi)發(fā)團(tuán)隊(duì)，一人即團(tuán)隊(duì)，遇到各類問(wèn)題都要獨(dú)自進(jìn)行解決，可想而知工作量會(huì)有多大。
他們的產(chǎn)品或許沒(méi)有龐大的生態(tài)體系來(lái)滿足大眾用戶使用需求，但App Store十余年的發(fā)展，建立起細(xì)顆粒的開(kāi)發(fā)環(huán)境，正是這種良性生態(tài)，讓那些有光的開(kāi)發(fā)者，隨心所欲讓心中的想法變成現(xiàn)實(shí)，讓夜里的小路燈照亮了整片街道。
就連開(kāi)發(fā)者們都這么拼搏，作為設(shè)計(jì)師的我們哪還有抱怨之說(shuō)，這么多好的產(chǎn)品擺在眼前，真是難得的學(xué)習(xí)機(jī)會(huì)，習(xí)他人之處，補(bǔ)自我之短。一起加油一起進(jìn)步。
設(shè)計(jì)師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺(jué)，還有好的體驗(yàn)流程。不要讓用戶思考，這是每個(gè)設(shè)計(jì)師所追求的。 認(rèn)真記錄產(chǎn)品細(xì)節(jié)，了解背后的思考，也是不斷提升自己邏輯思維和表達(dá)能力的一種方式。
本期產(chǎn)品細(xì)節(jié)分析結(jié)束，點(diǎn)擊原文鏈接查看更多，我們下期再見(jiàn)！
作者：碳水Sir；公眾號(hào)：草蓉三石
本文由 @碳水Sir 原創(chuàng)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
一個(gè)SaaS產(chǎn)品的后臺(tái)是如何設(shè)計(jì)的？作為知識(shí)付費(fèi)行業(yè)的頭部SaaS服務(wù)商，從2016年誕生不到7年時(shí)間，小鵝通注冊(cè)客戶數(shù)已經(jīng)超過(guò)160萬(wàn)，終端訪問(wèn)用戶人數(shù)超過(guò)7.8億，毫無(wú)疑問(wèn)成為了國(guó)內(nèi)知識(shí)付費(fèi)規(guī)模最大的SaaS產(chǎn)品。
為什么拆解小鵝通的后臺(tái)？這是因?yàn)楹笈_(tái)設(shè)計(jì)往往被多數(shù)產(chǎn)品、開(kāi)發(fā)甚至老板忽略，他們甚至認(rèn)為后臺(tái)不需要設(shè)計(jì)，更不需要考慮用戶體驗(yàn)，能把功能實(shí)現(xiàn)就可以交付。但我的觀點(diǎn)恰巧相反，我認(rèn)為一個(gè)SaaS產(chǎn)品設(shè)計(jì)最大的挑戰(zhàn)和關(guān)鍵正是后臺(tái)。它決定了運(yùn)營(yíng)者的工作效率和操作體驗(yàn)，即便你的功能再?gòu)?qiáng)大，如果用戶不會(huì)用、不愿意使用，那么用戶也不會(huì)續(xù)費(fèi)，而續(xù)費(fèi)，正如《SaaS創(chuàng)業(yè)路線圖》作者吳昊在他書(shū)中的觀點(diǎn)——SaaS的本質(zhì)，就是續(xù)費(fèi)。設(shè)計(jì)大偵探的第一個(gè)B端產(chǎn)品拆解，選擇了工作量最大、最繁雜的后臺(tái)，閱讀時(shí)間長(zhǎng)，非常乏味，但如果你認(rèn)真啃完，你對(duì)SaaS產(chǎn)品、后臺(tái)設(shè)計(jì)、B端設(shè)計(jì)不會(huì)再陌生。都說(shuō)良藥苦口，這碗藥，廖爾摩斯先干為敬。
一、導(dǎo)讀
1. 內(nèi)容結(jié)構(gòu)
小鵝通的后臺(tái)拆解包含四個(gè)部分，分別為導(dǎo)讀、產(chǎn)品畫(huà)像、設(shè)計(jì)拆解和總結(jié)，內(nèi)容篇幅超過(guò)4萬(wàn)字，閱讀時(shí)間較長(zhǎng)，所以拆分為4篇文章發(fā)布，建議收藏閱讀。
2. 適讀人群
第一類，產(chǎn)品經(jīng)理/UI/交互設(shè)計(jì)師，通過(guò)對(duì)小鵝通后臺(tái)產(chǎn)品的深度拆解，跳出執(zhí)行層，培養(yǎng)后臺(tái)設(shè)計(jì)的全局觀，從功能價(jià)值、應(yīng)用場(chǎng)景、業(yè)務(wù)流程和用戶體驗(yàn)多維度去學(xué)習(xí)和思考一個(gè)頭部SaaS產(chǎn)品的后臺(tái)如何設(shè)計(jì)。
第二類，SaaS產(chǎn)品及知識(shí)付費(fèi)從業(yè)者，獲取一份專業(yè)、完整、有深度價(jià)值的SaaS競(jìng)品設(shè)計(jì)參考。
3. 分析模型
第一，增長(zhǎng)模型。由戴夫·麥克盧爾提出，包含用戶獲取、用戶激活、用戶留存、獲取收入、用戶推薦，分別對(duì)應(yīng)用戶生命周期中的5個(gè)重要環(huán)節(jié)，主要用于分析產(chǎn)品的功能價(jià)值。
第二，尼爾森十大原則。尼爾森十大可用性原則是界面設(shè)計(jì)中最基礎(chǔ)、最重要的設(shè)計(jì)原則，任何產(chǎn)品的設(shè)計(jì)，都可以通過(guò)這十個(gè)原則進(jìn)行指導(dǎo)設(shè)計(jì)，這個(gè)原則主要用于診斷后臺(tái)設(shè)計(jì)的用戶體驗(yàn)。
第三，其他設(shè)計(jì)基礎(chǔ)理論，包括費(fèi)茨定律、格式塔原則、席克定律等，主要用于判斷后臺(tái)設(shè)計(jì)的易用性。
4. 拆解步驟
SaaS產(chǎn)品的后臺(tái)的設(shè)計(jì)不僅復(fù)雜，而且很多功能如果不親自體驗(yàn)根本沒(méi)法理解，所以針對(duì)小鵝通后臺(tái)的拆解，我分為以下三個(gè)步驟進(jìn)行
第一，親自上手實(shí)操體驗(yàn)操作。對(duì)每一個(gè)功能版塊進(jìn)行了全面的實(shí)操體驗(yàn)，弄清楚了才開(kāi)始拆解，絕非走馬觀花。
第二，結(jié)合官方幫助文檔創(chuàng)作。在體驗(yàn)小鵝通產(chǎn)品的時(shí)候，有很多功能必須結(jié)合幫助文檔才能理解，甚至由于權(quán)限和內(nèi)容問(wèn)題，部分功能沒(méi)法體驗(yàn)，只能靠官網(wǎng)介紹來(lái)理解。針對(duì)每一個(gè)功能，嚴(yán)格按照「功能介紹-功能價(jià)值-使用場(chǎng)景-頁(yè)面內(nèi)容-核心功能-操作流程」的結(jié)構(gòu)去描述，旨在讓產(chǎn)品設(shè)計(jì)師看懂這個(gè)功能設(shè)計(jì)的價(jià)值和細(xì)節(jié)。
第三，深入思考產(chǎn)品設(shè)計(jì)細(xì)節(jié)。在拆解完每一個(gè)功能，我都會(huì)加入自己的思考，主要分為細(xì)節(jié)偵查（值得我們學(xué)習(xí)的細(xì)節(jié)）、迭代建議（個(gè)人認(rèn)為可以優(yōu)化的地方）、設(shè)計(jì)思考（某個(gè)功能帶給我的啟發(fā)）、體驗(yàn)陷阱（用戶體驗(yàn)糟糕地方）和體驗(yàn)小結(jié)（針對(duì)某個(gè)功能版塊進(jìn)行全面總結(jié)），如果你瀏覽的是騰訊文檔，非常歡迎你可以以添加批注的形式和我一起討論。
5. 閱讀建議
由于內(nèi)容篇幅太長(zhǎng)，強(qiáng)烈建議你可以申請(qǐng)小鵝通免費(fèi)試用賬號(hào)一邊閱讀一邊體驗(yàn)，這樣對(duì)整個(gè)后臺(tái)的設(shè)計(jì)才更深有體會(huì)。
二、產(chǎn)品畫(huà)像
1. 產(chǎn)品簡(jiǎn)介
小鵝通是知識(shí)產(chǎn)品與用戶服務(wù)的數(shù)字化工具，包含知識(shí)店鋪、企業(yè)直播、企業(yè)培訓(xùn)、企微助手等多款產(chǎn)品，可以為有線上經(jīng)營(yíng)、商業(yè)變現(xiàn)、私域運(yùn)營(yíng)、用戶服務(wù)等需求的企業(yè)，提供一站式技術(shù)服務(wù)，助力企業(yè)完成數(shù)字化升級(jí)。根據(jù)官方數(shù)據(jù)顯示，截止到2023年2月，小鵝通注冊(cè)客戶數(shù)已經(jīng)超過(guò)160萬(wàn)，終端訪問(wèn)用戶人數(shù)超過(guò)7.8億，是目前國(guó)內(nèi)知識(shí)付費(fèi)客戶數(shù)量最多、規(guī)模最大的SaaS產(chǎn)品。
2. 用戶角色
用戶角色是指使用操作小鵝通后臺(tái)的用戶，主要分為運(yùn)營(yíng)者和店鋪銷售。
2.1 運(yùn)營(yíng)者
店鋪的運(yùn)營(yíng)者主要負(fù)責(zé)店鋪裝修、商品管理、用戶運(yùn)營(yíng)、數(shù)據(jù)分析、活動(dòng)策劃、拉新引流等工作內(nèi)容，是小鵝通后臺(tái)主要使用的用戶群體。
2.2 店鋪銷售
店鋪銷售會(huì)通過(guò)企業(yè)微信和CRM工具使用小鵝通，不過(guò)他們主要通過(guò)企業(yè)微信的小鵝通應(yīng)用進(jìn)行工作，很少涉及后臺(tái)操作。
3. 信息結(jié)構(gòu)
從信息結(jié)構(gòu)看，小鵝通后臺(tái)主要包括店鋪、圈子、直播、內(nèi)容、商品、營(yíng)銷、交易、用戶、CRM、企微、數(shù)據(jù)、應(yīng)用、設(shè)置和服務(wù)14大版塊（感謝探友@miki對(duì)小鵝通后臺(tái)信息結(jié)構(gòu)的梳理）。
三、設(shè)計(jì)拆解
小鵝通的后臺(tái)非常龐大，包括了店鋪、圈子、直播、內(nèi)容、商品、營(yíng)銷、交易、用戶等14大版塊，其中每一個(gè)版塊又包含若干功能，體驗(yàn)起來(lái)非常繁雜，很容易陷入焦慮感。所以我按照一個(gè)知識(shí)店鋪從0到1裝修、添加內(nèi)容、店鋪推廣和運(yùn)營(yíng)的步驟把小鵝通的后臺(tái)拆分為8個(gè)服務(wù)，然后再對(duì)每個(gè)版塊的內(nèi)容進(jìn)行詳細(xì)拆解。
1. 初始設(shè)置
當(dāng)我從官網(wǎng)開(kāi)通小鵝通的知識(shí)店鋪以后，進(jìn)入到管理后臺(tái)，面對(duì)如此繁雜的功能，我想做的第一件事，就是對(duì)我的店鋪進(jìn)行基礎(chǔ)設(shè)置，我得讓用戶知道這個(gè)店鋪叫什么名字。
1.1. 店鋪設(shè)置
「店鋪設(shè)置」為商家提供了店鋪的基本信息設(shè)置，比如店鋪信息、品牌形象、用戶賬號(hào)設(shè)置等。
①「店鋪信息」提供店鋪名稱、店鋪管理員和主營(yíng)類目的設(shè)置，非?；A(chǔ)。
②「用戶賬號(hào)設(shè)置」 提供在使用系統(tǒng)過(guò)程中的各種登錄偏好設(shè)置，比如登錄設(shè)備限制，可自定義學(xué)員使用同一賬號(hào)在同一時(shí)間不同瀏覽器上同時(shí)登陸的情況
③「引導(dǎo)設(shè)置」提供了引導(dǎo)用戶關(guān)注公眾號(hào)、加入社群、收藏店鋪、添加客服和添加手機(jī)號(hào)等功能，對(duì)新用戶的首次訪問(wèn)至關(guān)重要。
④「功能配置」支持用戶對(duì)商品銷量、播放量/瀏覽量、評(píng)論審核、嚴(yán)禁詞、視頻播放器、商品評(píng)價(jià)、買(mǎi)家申請(qǐng)售后等功能進(jìn)行設(shè)置，可以看出系統(tǒng)非常完整和靈活。
迭代建議
用戶的短期記憶一般不會(huì)超過(guò)5秒，所以在體驗(yàn)「設(shè)置」這個(gè)欄目的時(shí)候，我就發(fā)現(xiàn)小鵝通的功能太過(guò)繁雜，這對(duì)新手商家的入門(mén)有很高的學(xué)習(xí)成本。這個(gè)欄目的內(nèi)容其實(shí)可以拆分為基礎(chǔ)設(shè)置、高級(jí)設(shè)置這樣的階梯式內(nèi)容，有助于緩解新手用戶的焦慮。
1.2. 員工管理
「員工管理」是為商家提供新建員工、運(yùn)營(yíng)角色管理、員工權(quán)限設(shè)置的功能，這個(gè)欄目主要幫助商家管理自己的運(yùn)營(yíng)團(tuán)隊(duì)。
1.3. 角色管理
「角色管理」包含了系統(tǒng)默認(rèn)的多個(gè)角色，比如高級(jí)管理員、普通管理員、財(cái)務(wù)、老師、課程顧問(wèn)、教務(wù)專員、銷售員等，并且可以對(duì)每個(gè)角色進(jìn)行權(quán)限設(shè)置，另外系統(tǒng)也支持商家新增自定義角色，滿足商家各種運(yùn)營(yíng)需求。
1.4. 操作日志
「操作日志」記錄了整個(gè)系統(tǒng)管理員的登錄和操作內(nèi)容記錄，日志系統(tǒng)作為一個(gè)后臺(tái)系統(tǒng)必不可少的模塊，它可以記錄下系統(tǒng)所產(chǎn)生的所有行為，這有助于商家對(duì)系統(tǒng)運(yùn)行監(jiān)管，并且可實(shí)時(shí)監(jiān)控員工在系統(tǒng)中的敏感操作，加強(qiáng)員工培訓(xùn)和管理。
1.5. 消息推送
「消息推送」是商家建立外部觸發(fā)最好的方式，這個(gè)版塊主要為商家提供各種場(chǎng)景的消息推送設(shè)置，小鵝通支持服務(wù)號(hào)代發(fā)、短信通知和APP推送通知三種類型。
1.6. 體驗(yàn)小結(jié)
在對(duì)「設(shè)置」模塊的實(shí)操體驗(yàn)中，感受到小鵝通的功能非常強(qiáng)大，甚至功能多得有點(diǎn)讓人透不過(guò)氣，這對(duì)新手商家來(lái)說(shuō)，會(huì)產(chǎn)生很多的焦慮和壓力，我迫切需要一份最基礎(chǔ)、最簡(jiǎn)潔的新手引導(dǎo)指南。這也突然讓我想起了當(dāng)我申請(qǐng)小鵝通體驗(yàn)賬號(hào)時(shí)，客服專員向我多次提及給我做新手操作培訓(xùn)，但我都婉拒了，也許對(duì)于一個(gè)頭部SaaS產(chǎn)品來(lái)說(shuō)，客服專員的培訓(xùn)是客戶體驗(yàn)過(guò)程中必不可少的一個(gè)環(huán)節(jié)，但是我認(rèn)為好的設(shè)計(jì)，其實(shí)不需要太多的學(xué)習(xí)成本。
2. 添加內(nèi)容
當(dāng)我把店鋪的基礎(chǔ)信息設(shè)置好以后，接下來(lái)，就需要為我的知識(shí)店鋪準(zhǔn)備上架的內(nèi)容了。我找到了「內(nèi)容」這個(gè)模塊，發(fā)現(xiàn)小鵝通支持的內(nèi)容形式非常多，從視頻、音頻到圖文專欄，把常見(jiàn)的內(nèi)容形式都涵蓋了。
2.1. 內(nèi)容
「內(nèi)容」版塊包含內(nèi)容類型和互動(dòng)工具兩個(gè)部分，商家可以在「內(nèi)容類型」選擇自己要發(fā)布的形式發(fā)布內(nèi)容，而「互動(dòng)工具」則是幫助商家課程運(yùn)營(yíng)和學(xué)生管理的工具。
2.1.1. 內(nèi)容類型
小鵝通支持視頻、音頻、圖文、電子書(shū)、AI互動(dòng)課、專欄、訓(xùn)練營(yíng)和會(huì)員7種類型，幾乎覆蓋了常見(jiàn)的內(nèi)容形式。
2.1.1.1. 視頻
「視頻」是最常見(jiàn)的內(nèi)容形式之一，商家可以把錄制好的課程視頻上傳到這個(gè)欄目，就可以開(kāi)始向?qū)W員銷售。
2.1.1.1.1. 新建視頻
「視頻」包含基本信息、課程內(nèi)容、所屬組合課、商品信息和狀態(tài)設(shè)置五個(gè)部分。
①在「基本信息」，商家需要填入商品名稱等基本信息；
②在「課程內(nèi)容」，管理員可對(duì)視頻的播放進(jìn)行設(shè)置（比如課程未學(xué)完禁止拖動(dòng)進(jìn)度條和倍速播放等），還可以對(duì)內(nèi)容設(shè)置保護(hù)（禁止文字防復(fù)制和開(kāi)啟防錄屏跑馬燈）。
③「所屬組合課」是提供商品和其他內(nèi)容（專欄、會(huì)員和訓(xùn)練營(yíng)）關(guān)聯(lián)，比如新添加的商品屬于某個(gè)付費(fèi)專欄，那么就可以關(guān)聯(lián)，提升效率。
④在「商品信息」，可以設(shè)置商品的售賣(mài)方式，支持免費(fèi)、付費(fèi)、加密和指定學(xué)員。針對(duì)付費(fèi)視頻，還可以支持片段試看，提升付費(fèi)轉(zhuǎn)化。
⑤「狀態(tài)設(shè)置」是指在添加完商品后，商家可選擇立即上架、定時(shí)上架或暫不上架，比如商家在準(zhǔn)備某個(gè)促銷活動(dòng)的時(shí)候，可以提前編輯商品，設(shè)置定時(shí)發(fā)布即可。
2.1.1.1.2. 視頻管理
①「視頻」添加成功后，在「視頻」欄目頁(yè)，可以查看商品的詳情，對(duì)商品進(jìn)行編輯，分享、下架、復(fù)制和刪除等。
②「分享」是指商家可以把商品的鏈接、二維碼等信息直接復(fù)制分享給好友，同時(shí)也起到了預(yù)覽的作用，這是一個(gè)公用的組件，在其他商品和版塊同樣適用。
2.1.1.1.3. 視頻詳情頁(yè)
「視頻詳情頁(yè)」主要分為課程設(shè)置、運(yùn)營(yíng)設(shè)置、學(xué)員列表和數(shù)據(jù)分析四塊內(nèi)容。
①「課程設(shè)置」就是對(duì)課程的相關(guān)信息進(jìn)行設(shè)置，相當(dāng)于對(duì)內(nèi)容進(jìn)行二次編輯。
②「運(yùn)營(yíng)設(shè)置」從四個(gè)解為一個(gè)通用的表單；「CRM分配」是指可以把瀏覽課程的學(xué)員自動(dòng)分配給企業(yè)的CRM銷售人員；「私域引流」是指可以引導(dǎo)用戶掃碼加群，提高課程服務(wù)質(zhì)量和商家對(duì)學(xué)員的運(yùn)營(yíng)能力。
③在「學(xué)員列表」，可以查看當(dāng)前購(gòu)買(mǎi)商品的所有學(xué)員信息，包括購(gòu)買(mǎi)時(shí)間、學(xué)習(xí)進(jìn)度等信息，系統(tǒng)也支持商家手動(dòng)添加可學(xué)習(xí)課程的學(xué)員。
④在「數(shù)據(jù)分析」欄目，可以查看商品的「學(xué)習(xí)效果」和「交易數(shù)據(jù)」，比如商品的訂閱人數(shù)、學(xué)習(xí)人數(shù)、完課率、學(xué)習(xí)趨勢(shì)圖等，通過(guò)這個(gè)欄目，可以幫助商家對(duì)用戶的學(xué)習(xí)進(jìn)行深入的分析，提升運(yùn)營(yíng)效率。
設(shè)計(jì)思考
在初次添加店鋪內(nèi)容的時(shí)候，對(duì)很多功能板塊都不熟悉，比如CRM分配、超級(jí)會(huì)員等，雖然能感受到小鵝通系統(tǒng)的強(qiáng)大，但對(duì)于剛?cè)胧值纳碳遥瑒t會(huì)產(chǎn)生很深的焦慮，不知道這些功能如何設(shè)置和使用，也無(wú)法感受到這些功能對(duì)店鋪運(yùn)營(yíng)的幫助。
2.1.1.2. 音頻
「音頻」也是一種常見(jiàn)的內(nèi)容形式，可以設(shè)計(jì)講書(shū)、廣播等產(chǎn)品，用戶可以在地鐵、公交等場(chǎng)景收聽(tīng)?！敢纛l」的新建流程、商品管理功能和「視頻」相似，我們不再贅述。
2.1.1.3. 圖文
「圖文」也是一種常見(jiàn)的內(nèi)容形式，可以為學(xué)員提供付費(fèi)閱讀等類型產(chǎn)品，「圖文」的新建流程、商品管理功能和「視頻」相似，我們不再贅述。
迭代建議
付費(fèi)閱讀其實(shí)是知識(shí)創(chuàng)作者非常喜歡的方式，小鵝通雖然設(shè)計(jì)了這個(gè)功能，但前端的界面設(shè)計(jì)并沒(méi)有根據(jù)圖文內(nèi)容傳播的特點(diǎn)設(shè)計(jì)，所以用戶體驗(yàn)并不理想，顯得非常雞肋。
2.1.1.4. 電子書(shū)
「電子書(shū)」對(duì)于出版社等用戶群體，是一個(gè)剛需功能。在上傳電子書(shū)文件以后，系統(tǒng)可以自動(dòng)解析書(shū)籍章節(jié)，輕松完成電子書(shū)在線管理和售賣(mài)。其次在店鋪前端，用戶可在手機(jī)端閱讀，支持區(qū)域觸摸翻頁(yè)、章節(jié)試讀、劃線、書(shū)簽、更換背景等功能，閱讀體驗(yàn)非常友好?！鸽娮訒?shū)」的新建流程、商品管理功能和「視頻」相似，我們不再贅述。
2.1.1.5. AI互動(dòng)課
隨著近兩年AI技術(shù)的發(fā)展，小鵝通也加入了AI互動(dòng)課的內(nèi)容形式。商家可以利用AI互動(dòng)形式的課程內(nèi)容，搭建具有沉浸式場(chǎng)景的課程學(xué)習(xí)形式，實(shí)現(xiàn)個(gè)性化、趣味性、強(qiáng)互動(dòng)的授課形式，不過(guò)搭建成本相對(duì)較高，更適合于有特定需求的客戶。
2.1.1.5.1. 新建流程
①「AI互動(dòng)課」的新建流程分為三個(gè)步驟，分別是填寫(xiě)基本信息、制作課程內(nèi)容和填寫(xiě)售賣(mài)信息。
②在「基本信息」，商家需要輸入課程名稱和詳情頁(yè)等信息。
③進(jìn)入「課程內(nèi)容」以后，左側(cè)提供了內(nèi)容組件（文字、圖片、音頻和視頻）、題目組件（單選題、多選題、不定項(xiàng)、判斷題和填空題）和其他組件（章節(jié)標(biāo)題和附件），商家可以根據(jù)自己的需求加入組件進(jìn)行設(shè)計(jì)。
④商家在填寫(xiě)售賣(mài)信息以后，就可以進(jìn)行上架銷售。
2.1.1.6. 專欄
2.1.1.6.1. 專欄
「專欄」可以將多個(gè)單品課程打包成系列課銷售，比如常見(jiàn)的付費(fèi)專欄、連載小說(shuō)、有聲讀物等?！笇凇菇⒑?，進(jìn)入詳情頁(yè)，可以在「目錄管理」添加專欄商品，還可以對(duì)專欄的商品設(shè)置排序和設(shè)置試看。其他功能和「視頻」相似，我們不再贅述。
2.1.1.6.2. 大專欄
「大專欄」就是「專欄」的父級(jí)，可以將多個(gè)專欄進(jìn)行打包，組合成專項(xiàng)學(xué)習(xí)專題，打造學(xué)員深度系統(tǒng)學(xué)習(xí)方案。
2.1.1.7. 訓(xùn)練營(yíng)
「訓(xùn)練營(yíng)」相比「課程」，是一個(gè)動(dòng)態(tài)的服務(wù)。商家根據(jù)某個(gè)學(xué)習(xí)主題，集中式、計(jì)劃式、督學(xué)式地學(xué)習(xí)。「訓(xùn)練營(yíng)」也是一種常見(jiàn)的引流手段，通過(guò)打卡、簽到、學(xué)習(xí)，可以快速幫助商家進(jìn)行傳播拉新。
2.1.1.7.1. 新建訓(xùn)練營(yíng)
①商家建立訓(xùn)練營(yíng)以后，需要建立營(yíng)期才能開(kāi)始招生。
②營(yíng)期的建立分為營(yíng)期基礎(chǔ)信息、營(yíng)期課程和售賣(mài)信息三個(gè)步驟。在「營(yíng)期基礎(chǔ)信息」，需要設(shè)置開(kāi)課信息，包括招生時(shí)間和開(kāi)課時(shí)間；其次支持設(shè)置三種目錄解鎖模式，自由模式（無(wú)門(mén)檻自由學(xué)習(xí)）、闖關(guān)模式（完成任務(wù)才能繼續(xù)學(xué)習(xí)）和日期解鎖（每天只能學(xué)習(xí)一定數(shù)量的課程）。
③在「營(yíng)期課程」，商家需要添加訓(xùn)練營(yíng)的學(xué)習(xí)任務(wù)，可以加入店鋪的課程內(nèi)容，還可添加打卡、考試等助學(xué)工具，增強(qiáng)督學(xué)效果，提升用戶活躍度。
2.1.1.8. 會(huì)員
「會(huì)員」是商家可以打包特定商品內(nèi)容（包括專欄和商品）進(jìn)行銷售，它的功能流程和「專欄」功能相似，在建立「會(huì)員」后，進(jìn)入詳情頁(yè)的目錄管理才能添加課程商品。這個(gè)功能可以幫助商家聚集一定量級(jí)的忠實(shí)粉絲，實(shí)現(xiàn)店鋪的穩(wěn)定收入。
設(shè)計(jì)討論
不知道是不是語(yǔ)義的問(wèn)題，我對(duì)「會(huì)員」這個(gè)功能有很多不理解，首先感覺(jué)和「專欄」很相似，其次和「超級(jí)會(huì)員」也有點(diǎn)傻傻分不清楚，所以在體驗(yàn)的過(guò)程中，花了很多時(shí)間去學(xué)習(xí)研究。
2.1.1.9. 體驗(yàn)小結(jié)
從小鵝通支持的7種內(nèi)容形式來(lái)看，它幾乎覆蓋了所有的知識(shí)付費(fèi)內(nèi)容，視頻、音頻、電子書(shū)、專欄，甚至還有AI互動(dòng)課。這足以滿足各種知識(shí)用戶人群的內(nèi)容要求，不管你是銷售錄播課、音頻課還是文字專欄，小鵝通真正的實(shí)現(xiàn)了——一分鐘擁有自己的知識(shí)店鋪。
2.1.2. 互動(dòng)工具
「互動(dòng)工具」包含了打卡、考試、練習(xí)、作業(yè)本、題庫(kù)、證書(shū)、表單、活動(dòng)管理、隨堂檢測(cè)、測(cè)試活動(dòng)和付費(fèi)問(wèn)答11種工具。
2.1.2.1. 打卡
「打卡」是一個(gè)提升用戶活躍度的運(yùn)營(yíng)工具，通過(guò)持續(xù)的打卡輸出，不僅可以幫助學(xué)員養(yǎng)成一些比較好的行為習(xí)慣，還可以幫助商家提升用戶付費(fèi)轉(zhuǎn)化。「打卡」分為日歷打卡、作業(yè)打卡和闖關(guān)打卡三種形式。
2.1.2.1.1. 日歷打卡
「日歷打卡」是以“天”為單位的打卡模式，學(xué)員需要每天在有效時(shí)段內(nèi)提交打卡內(nèi)容，比如每日英語(yǔ)學(xué)習(xí)打卡、早睡打卡等。
a. 新建流程
①「日歷打卡」的建立有兩個(gè)步驟，分別是設(shè)置打卡信息和打卡介紹設(shè)置。在「設(shè)置打卡信息」，分為基本信息、打卡規(guī)則和其他設(shè)置三個(gè)內(nèi)容?！富拘畔ⅰ箍梢栽O(shè)置打卡的起止日期、打卡時(shí)段、提醒方式、每日打卡次數(shù)、可補(bǔ)打卡次數(shù)、參與條件和打卡規(guī)則等；「打卡規(guī)則」主要是設(shè)置用戶打卡的內(nèi)容類型和范本；「其他設(shè)置」可以幫助商家關(guān)聯(lián)超級(jí)會(huì)員和指定商品文件。
②在「打卡介紹設(shè)置」步驟，需要添加打卡的封面圖和詳情頁(yè)介紹，完成后打卡建立添加成功。
細(xì)節(jié)偵查
如果不是親自新建一次「打卡」，你根本無(wú)法理解一個(gè)小小的「打卡」功能竟然會(huì)如此復(fù)雜，包含的場(chǎng)景和功能竟然會(huì)有這么多。
b. 打卡詳情頁(yè)
「打卡」建立以后，可以進(jìn)入打卡的詳情頁(yè)，主要分為日記管理、任務(wù)管理、學(xué)員管理、分組管理、助教管理、激勵(lì)設(shè)置、運(yùn)營(yíng)設(shè)置和數(shù)據(jù)分析8塊內(nèi)容。
①「日記管理」主要指用戶在前端的日記打卡，老師可以根據(jù)學(xué)員的日記進(jìn)行評(píng)論、置頂、加精和刪除，還支持批量導(dǎo)出日記。
②「任務(wù)管理」是指給學(xué)員布置學(xué)習(xí)任務(wù)，幫助學(xué)員更好地學(xué)習(xí)。
③「學(xué)員管理」主要提供對(duì)打卡用戶的管理，比如查看學(xué)生打卡詳細(xì)資料和暫停打卡等。
④「分組管理」支持老師對(duì)打卡的學(xué)員進(jìn)行分組，提高管理效率。
⑤「助教管理」支持老師添加助教，助教可以對(duì)學(xué)生打卡進(jìn)行點(diǎn)評(píng)、刪除和精選等操作。
⑥「激勵(lì)設(shè)置」是指為了鼓勵(lì)學(xué)生堅(jiān)持打卡，老師可以設(shè)置證書(shū)、返學(xué)費(fèi)和積分這樣的形式來(lái)吸引學(xué)生參與（證書(shū)和積分我們?cè)谙旅鏁?huì)單獨(dú)講解）。「返學(xué)費(fèi)」是一個(gè)打卡活動(dòng)中常見(jiàn)的營(yíng)銷方式，學(xué)員完成指定的任務(wù)就可以拿到打卡費(fèi)用的返現(xiàn)，這樣不僅可以篩選精準(zhǔn)用戶，也可以提高用戶的打卡積極性。
⑦「運(yùn)營(yíng)配置」主要包含配置日簽和邀請(qǐng)卡兩個(gè)部分?！溉蘸灐故且环N吸引用戶傳播的手段，通過(guò)個(gè)性化和精美的日簽設(shè)計(jì)，不僅可以體現(xiàn)活動(dòng)特色，還能激發(fā)學(xué)員的收藏欲望，最終吸引用戶主動(dòng)傳播，拉新引流?！秆?qǐng)卡」也主要是為了激發(fā)學(xué)生傳播引流，不僅設(shè)計(jì)了精美的邀請(qǐng)卡片，還支持老師自定義設(shè)計(jì)，以及直接引流自私域社群。
⑧「數(shù)據(jù)分析」是對(duì)整個(gè)打卡的數(shù)據(jù)進(jìn)行全面的分析統(tǒng)計(jì)，包括當(dāng)天打卡人數(shù)、打卡次數(shù)、新增學(xué)員、點(diǎn)贊數(shù)、評(píng)論數(shù)、加精數(shù)等等，通過(guò)精準(zhǔn)的數(shù)據(jù)分析，可以為商家運(yùn)營(yíng)方案提供支撐。
2.1.2.1.2. 作業(yè)打卡
「作業(yè)打卡」是以布置“作業(yè)”的形式打卡，這種打卡方式可以加強(qiáng)教學(xué)質(zhì)量的檢驗(yàn)，讓學(xué)生產(chǎn)生完成作業(yè)的緊迫感，督促學(xué)生進(jìn)行學(xué)習(xí)。
2.1.2.1.3. 闖關(guān)打卡
「闖關(guān)打卡」是以“關(guān)卡”作為單位的打卡模式，這種打卡形式由于自身具備游戲的挑戰(zhàn)性，所以能夠有效刺激學(xué)生為了拿到更好的成績(jī)而努力打卡，從而提升用戶參與度和積極性。
2.1.2.2. 考試
「考試」是用來(lái)檢測(cè)用戶學(xué)習(xí)效果的學(xué)習(xí)工具，商家可以通過(guò)考試情況得到學(xué)習(xí)效果反饋，可根據(jù)考試反饋進(jìn)行后續(xù)課程優(yōu)化。
2.1.2.2.1. 新建考試
「考試」的建立分為三個(gè)步驟，分別是設(shè)置考試信息、選擇試卷和發(fā)布。
①「設(shè)置考試信息」又分為基本信息、信息采集、考試設(shè)置、題目分值和結(jié)果設(shè)置五個(gè)內(nèi)容?！富拘畔ⅰ剐枰钊肟荚嚨幕拘畔?，選擇需要關(guān)聯(lián)的課程；在「考試設(shè)置」，老師可設(shè)置參考考試的時(shí)間、考試時(shí)長(zhǎng)、考試次數(shù)等；在「結(jié)果設(shè)置」，可以選擇考試完就展示成績(jī)、題目和答案。
②在「選擇試卷」步驟，可以創(chuàng)建新試卷，也可以從試卷庫(kù)中選擇已設(shè)置好的試卷，其次還可以設(shè)置考試通過(guò)分?jǐn)?shù)的成績(jī)。
③添加試卷以后，管理員可選擇立即發(fā)布、定時(shí)發(fā)布以及開(kāi)啟微信服務(wù)號(hào)通知，幫助學(xué)生可及時(shí)獲取考試的消息通知。
2.1.2.2.2. 考試管理
在學(xué)生開(kāi)始考試以后，后臺(tái)會(huì)生成考試數(shù)據(jù)，商家可查看考試的詳細(xì)情況，包括批閱、統(tǒng)計(jì)分析、老師管理、設(shè)置證書(shū)等。
2.1.2.3. 練習(xí)
「練習(xí)」?jié)M足了商家售賣(mài)已有題庫(kù)題目，為學(xué)員提供自主刷題練習(xí)工具的需求，而通過(guò)反復(fù)練習(xí)，可以提高學(xué)員學(xué)習(xí)效果，有助于提升用戶的活躍度和留存率。
2.1.2.3.1. 新建練習(xí)
「練習(xí)」的建立包含基本信息、練習(xí)設(shè)置、商品信息、私域引流和信息采集五個(gè)步驟。
①在「練習(xí)設(shè)置」，管理員需要關(guān)聯(lián)題庫(kù)，設(shè)置答題的出題順序（包含隨機(jī)和按順序），題目數(shù)量和考試難度；
②「商品信息」可以設(shè)置「練習(xí)」是否付費(fèi)，或需要參與關(guān)聯(lián)課程才能學(xué)習(xí)；「私域引流」和「信息采集」是公共組件，我們?cè)谏衔囊呀?jīng)解讀過(guò)，不再重復(fù)。
2.1.2.3.2. 練習(xí)管理
學(xué)生開(kāi)始練習(xí)以后，后臺(tái)可查看學(xué)員的練習(xí)數(shù)據(jù)，包括練習(xí)參與人數(shù)、每道題目的正確率等，這些數(shù)據(jù)可以幫助商家及時(shí)調(diào)整運(yùn)營(yíng)方案，或針對(duì)性對(duì)學(xué)生進(jìn)行講解授課。
2.1.2.4. 作業(yè)本
「作業(yè)本」主要幫助老師和學(xué)員在課程后續(xù)實(shí)現(xiàn)互動(dòng)和答疑，不僅可以加強(qiáng)學(xué)生對(duì)知識(shí)的學(xué)習(xí)，幫助老師了解學(xué)員學(xué)習(xí)的狀態(tài)，更能提升用戶活躍度。
2.1.2.4.1. 新建流程
①管理員需要先建立一個(gè)「作業(yè)本」，這個(gè)流程比較簡(jiǎn)單，輸入名稱以后，選擇關(guān)聯(lián)課程，還支持關(guān)聯(lián)「圈子」（一個(gè)用戶運(yùn)營(yíng)的重要功能），老師布置的作業(yè)會(huì)在課堂互動(dòng)和作業(yè)動(dòng)態(tài)顯示。
②「作業(yè)本」建立以后，管理員可以布置「作業(yè)」?！缸鳂I(yè)」分為手動(dòng)布置（新建）和題庫(kù)布置（從現(xiàn)有的題庫(kù)中直接選擇）?！甘謩?dòng)布置」需要輸入作業(yè)名稱和作業(yè)內(nèi)容，支持上傳圖片和音頻，填寫(xiě)完成后，作業(yè)創(chuàng)建成功。
2.1.2.5. 題庫(kù)
「題庫(kù)」需要配合作業(yè)、考試和練習(xí)場(chǎng)景使用，為這些工具提供數(shù)據(jù)支撐。
2.1.2.5.1. 題庫(kù)
①「題庫(kù)」支持添加單選題、多選題、不定項(xiàng)選擇題、判斷題、填空題、問(wèn)答題和材料題等多種類型。添加也非常簡(jiǎn)單，管理員選擇好題目類型以后，填入內(nèi)容就能新建成功。
②「批量導(dǎo)入」是為管理員提供批量輸入題目的工具，按照系統(tǒng)提供的輸入范例格式，系統(tǒng)可以一鍵識(shí)別出題目，輕松錄入。
③「Excel導(dǎo)入」也是一種常見(jiàn)的導(dǎo)入形式，不過(guò)需要按照系統(tǒng)標(biāo)準(zhǔn)的批量導(dǎo)入模版，才能實(shí)現(xiàn)批量導(dǎo)入。
2.1.2.5.2. 試卷庫(kù)
①「試卷庫(kù)」是題庫(kù)中題目的組合，可以看作是「題庫(kù)」的父級(jí)。管理員可按照自己的需要把題目手動(dòng)或自動(dòng)組合成試卷，在考試、作業(yè)等場(chǎng)景中就能及時(shí)調(diào)用，提升工作效率。
②「試卷庫(kù)」的新建流程包括設(shè)置試卷信息和組卷兩個(gè)步驟。在填寫(xiě)完試卷基礎(chǔ)信息以后，在「組卷」步驟，可以選擇「手動(dòng)選題」和「系統(tǒng)抽題」。「手動(dòng)選題」就是管理員從題庫(kù)中逐一手動(dòng)選擇，準(zhǔn)確率較高，而「系統(tǒng)抽題」則是系統(tǒng)根據(jù)管理員的題型設(shè)置隨機(jī)抽題，具有隨機(jī)性。
2.1.2.6. 證書(shū)
「證書(shū)」可以為學(xué)生帶來(lái)成就感，激勵(lì)學(xué)生堅(jiān)持完成任務(wù)，當(dāng)學(xué)員通過(guò)考試、完成作業(yè)以后，管理員可以向?qū)W員頒發(fā)證書(shū)，最終提升用戶活躍度。
①「證書(shū)」的建立包含基本信息、發(fā)放規(guī)則、證書(shū)樣式、證書(shū)信息、發(fā)證信息和證書(shū)分享六個(gè)內(nèi)容。
②在「基本信息」，管理員可選擇證書(shū)類型，包括考試證書(shū)、打卡證書(shū)、圈子證書(shū)等，另外，證書(shū)需要關(guān)聯(lián)對(duì)應(yīng)的考試。
③在「證書(shū)樣式」，系統(tǒng)提供了數(shù)十種系統(tǒng)樣式，管理員可根據(jù)自己的偏好和品牌VI選擇，其次也支持自定義樣式，上傳設(shè)計(jì)好的背景圖片即可生成。
④在「證書(shū)信息」，管理員可以編輯證書(shū)標(biāo)題、獲獎(jiǎng)文案等，還可以加入鼓勵(lì)文案，吸引用戶傳播分享。
⑤在「發(fā)證信息」，可加入發(fā)證日期、證書(shū)編號(hào)和發(fā)證印章等，突出真實(shí)性。
⑥在「證書(shū)分享」，可以添加分享語(yǔ)和二維碼，通過(guò)學(xué)生的分享，為商家拉新引流。
2.1.2.7. 表單
「表單」是運(yùn)營(yíng)者用于發(fā)起問(wèn)卷調(diào)研，自定義收集用戶信息的社群功能。它可以幫助商家收集用戶需求和反饋信息，通過(guò)對(duì)用戶的調(diào)研分析，進(jìn)一步設(shè)計(jì)和優(yōu)化運(yùn)營(yíng)策略，從而為用戶提供更精準(zhǔn)的服務(wù)
2.1.2.7.1. 新建流程
「表單」的建立分為三個(gè)步驟，分別是編輯表單、表單設(shè)置和表單發(fā)布。
①「編輯表單」分為三塊內(nèi)容，左邊是組件和外觀，管理員需要從這里選擇內(nèi)容，比如單選、文本框等?！附M件」包含基礎(chǔ)組件（單選、多選、下拉菜單、文本框等）、描述分割（文本描述、圖片、分隔欄）和個(gè)人信息（姓名、性別、年齡等），「外觀」可以設(shè)置表單底色、標(biāo)題、選項(xiàng)內(nèi)容字體大小和顏色。選中內(nèi)容以后，中間為表單編輯區(qū)域，可以實(shí)現(xiàn)可視化編輯，包括調(diào)整順序、刪除等。右側(cè)可以設(shè)置表單的字段和邏輯，包含基礎(chǔ)設(shè)置、選項(xiàng)設(shè)置、邏輯顯示規(guī)則等。
②在「表單設(shè)置」，可以設(shè)置用戶提交的次數(shù)、回收方式（支持定量、定時(shí)回收）、微信分享信息和私域引流。
③在最后一步「表單發(fā)布」，需要關(guān)聯(lián)對(duì)應(yīng)的內(nèi)容，比如相關(guān)視頻、課程、專欄、圈子、訓(xùn)練營(yíng)等內(nèi)容，關(guān)聯(lián)成功后，表單就可以發(fā)布。
2.1.2.8. 活動(dòng)管理
在店鋪的運(yùn)營(yíng)中，舉辦線下活動(dòng)必不可少，「活動(dòng)管理」就是為了解決這個(gè)場(chǎng)景而設(shè)計(jì)。管理員可以使用「活動(dòng)管理」功能組織線下活動(dòng)，一站式完成線上發(fā)布活動(dòng)信息、用戶報(bào)名、收集報(bào)名用戶信息、管理報(bào)名情況、現(xiàn)場(chǎng)簽到等流程。
2.1.2.8.1. 發(fā)布活動(dòng)
「活動(dòng)」的發(fā)布包含基本信息、票務(wù)設(shè)置、座位設(shè)置、報(bào)名信息設(shè)置和私域引流六個(gè)部分。
①在「基本信息」，管理員需要填入活動(dòng)的名稱、地點(diǎn)、時(shí)間、關(guān)聯(lián)的課程等信息；②在「票務(wù)設(shè)置」，可以添加免費(fèi)票和收費(fèi)票，設(shè)置票種的展示規(guī)則等；③「座位設(shè)置」部分，還可以開(kāi)啟自動(dòng)排座，活動(dòng)座位由系統(tǒng)自行分配；④在「報(bào)名信息設(shè)置」，管理員可以根據(jù)自己的需求靈活配置用戶報(bào)名的信息，非常方便；⑤「私域引流」可以幫助管理員在活動(dòng)報(bào)名前后將潛在用戶引流至商家的私域流量池。
2.1.2.8.2. 名單管理
活動(dòng)建立成功后，商家就可以發(fā)布活動(dòng)，「名單管理」就是活動(dòng)報(bào)名的詳細(xì)數(shù)據(jù)，包含報(bào)名管理和簽到管理。
a. 報(bào)名管理
「報(bào)名管理」主要包含了所有活動(dòng)報(bào)名的數(shù)據(jù)管理，比如待審核、報(bào)名成功等，管理員可以在這個(gè)欄目查看報(bào)名用戶的詳細(xì)信息。
b. 簽到管理
「簽到管理」有兩種形式，一種是用戶自行掃碼簽到，系統(tǒng)會(huì)生成活動(dòng)的二維碼，管理員向用戶展示掃碼即可；另一種是商家主動(dòng)掃碼核銷，工作人員進(jìn)入票券核銷頁(yè)面以后，就可以對(duì)報(bào)名的用戶進(jìn)行掃碼核銷。
2.1.2.9. 隨堂檢測(cè)
「隨堂檢測(cè)」是一個(gè)協(xié)助老師校驗(yàn)學(xué)生學(xué)習(xí)質(zhì)量的輔助工具，它不僅可以提升學(xué)生對(duì)課堂知識(shí)的學(xué)習(xí)和鞏固，還能有效防止學(xué)員掛機(jī)學(xué)習(xí)，提升學(xué)習(xí)效率。
2.1.2.10. 測(cè)試互動(dòng)
「測(cè)試互動(dòng)」是一個(gè)通過(guò)設(shè)置輕量級(jí)的在線趣味測(cè)試，刺激用戶活躍的社群玩法。運(yùn)營(yíng)者可根據(jù)用戶特性設(shè)計(jì)測(cè)試題目，激發(fā)用戶好奇心，活躍已沉淀的粉絲，增強(qiáng)學(xué)習(xí)過(guò)程的互動(dòng)樂(lè)趣，同時(shí)可以設(shè)置根據(jù)測(cè)試結(jié)果給用戶推薦課程。
2.1.2.10.1. 新建流程
「測(cè)試互動(dòng)」的新建包含了設(shè)置測(cè)試信息、添加題目和結(jié)果頁(yè)設(shè)置三個(gè)步驟。
①在「設(shè)置測(cè)試信息」，運(yùn)營(yíng)者輸入測(cè)試名稱、簡(jiǎn)介和設(shè)置有效時(shí)間；
②在「添加題目」步驟，需要加入測(cè)試活動(dòng)的題目，支持單選和多選；
③在「結(jié)果頁(yè)」設(shè)置，需要設(shè)置測(cè)評(píng)結(jié)果，并可以向用戶推薦指定的課程，進(jìn)行付費(fèi)轉(zhuǎn)化。
2.1.2.11. 付費(fèi)問(wèn)答
「付費(fèi)問(wèn)答」是一個(gè)為商家增加變現(xiàn)的工具，學(xué)生付費(fèi)向老師提問(wèn)，獲取一對(duì)一答疑。「付費(fèi)問(wèn)答」需要先創(chuàng)建一個(gè)問(wèn)答專區(qū)才能開(kāi)啟，有點(diǎn)像建立一個(gè)問(wèn)答專欄。當(dāng)用戶在前端購(gòu)買(mǎi)問(wèn)答服務(wù)以后，運(yùn)營(yíng)者可以在手動(dòng)邀請(qǐng)答主進(jìn)行答疑。其次這個(gè)功能也設(shè)計(jì)得很完善，還支持設(shè)置用戶圍觀價(jià)格和圍觀分成。
2.1.2.12. 體驗(yàn)小結(jié)
在體驗(yàn)完這11個(gè)互動(dòng)工具以后，我開(kāi)始感受到小鵝通這個(gè)工具的魅力。從引流到激活、從留存到傳播，這11個(gè)工具幾乎能滿足一個(gè)知識(shí)店鋪運(yùn)營(yíng)多維度的需求。而讓我最驚嘆的是小鵝通產(chǎn)品的設(shè)計(jì)細(xì)節(jié)，比如一個(gè)普通的打卡功能，如果只是從前端體驗(yàn)看，你根本無(wú)法想象這些小功能的后臺(tái)設(shè)置其實(shí)有這么復(fù)雜。而小鵝通為了降低商家的運(yùn)營(yíng)成本，幾乎支持每一個(gè)功能版塊自定義，給我最大震撼的就是「證書(shū)」這個(gè)功能，不僅提供多種證書(shū)設(shè)計(jì)樣式，連證書(shū)內(nèi)容的每一個(gè)字段，都可以在后臺(tái)自行輸入，無(wú)需任何加工，實(shí)在是太方便了。
2.2. 商品
「商品」主要指實(shí)物商品和服務(wù)類商品的發(fā)布和管理，如果商家有周邊商品，可以通過(guò)實(shí)物商品來(lái)上架，服務(wù)類商品則是指虛擬服務(wù)，比如1V1咨詢、設(shè)計(jì)指導(dǎo)這樣的虛擬服務(wù)?！干唐贰箼谀康墓δ鼙容^簡(jiǎn)單，我們就不過(guò)多贅述，大家可以親自體驗(yàn)。
感謝閱讀，小鵝通的產(chǎn)品拆解第一部分就到這里，下一篇我們將會(huì)繼續(xù)拆解小鵝通后臺(tái)！
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
通知是許多產(chǎn)品中不可或缺的一部分，它用于傳遞產(chǎn)品的一些新的信息狀態(tài)，幫助用戶能夠及時(shí)收到信息。
本文將討論五種類型的 UI 通知，以及何時(shí)以及如何使用它們的基本規(guī)則。
通知是產(chǎn)品能夠與用戶及時(shí)同步信息變化，及時(shí)發(fā)送重要通知，例如產(chǎn)品更新、信息提醒、互動(dòng)提醒、新消息通知等。
消息通知是為產(chǎn)品賦能，為用戶提供幫助，便于快速獲取對(duì)應(yīng)的通知信息，例如產(chǎn)品更新、信息提醒、互動(dòng)提醒、新消息通知等，在 App 和網(wǎng)頁(yè)應(yīng)用中最常見(jiàn)的信息交換方式則是消息通知。
消息作為一種信息交換方式，抽象其過(guò)程，即為“在達(dá)到某一觸發(fā)條件下，由發(fā)送方發(fā)送消息給到接收方，接收方可針對(duì)此條消息提供反饋”。
基礎(chǔ)的通知模塊通常有標(biāo)題、內(nèi)容、入口、徽標(biāo)、識(shí)別圖標(biāo)五個(gè)元素構(gòu)成
標(biāo)題區(qū)域：用戶傳遞消息的核心區(qū)域，整個(gè)通知的信息都是圍繞標(biāo)題進(jìn)行，一般標(biāo)題以簡(jiǎn)短精煉為主，讓用戶在最短時(shí)間了解到關(guān)鍵信息。
內(nèi)容區(qū)域：主要描述更加詳細(xì)的通知內(nèi)容，當(dāng)然這里的內(nèi)容也不建議超過(guò)2行，并且不要重復(fù)標(biāo)題中內(nèi)容
操作區(qū)域：通知分為可點(diǎn)擊類和不可點(diǎn)擊類，當(dāng)通知模塊需要用戶點(diǎn)擊時(shí)，視覺(jué)上應(yīng)該更加具象，如按鈕、箭頭，不要讓用戶產(chǎn)生思考。
圖標(biāo)圖片：有意義的圖像可以強(qiáng)化通知的內(nèi)容，例如，如果你將收到的消息通知用戶，你可以包含發(fā)件人的頭像。
通知的模式根據(jù)不同的場(chǎng)景也會(huì)有不同類型，接下來(lái)將一一講解這5種通知類型，以及使用場(chǎng)景。
徽標(biāo)是一個(gè)小的填充橢圓形，可以出現(xiàn)在應(yīng)用程序圖標(biāo)上并指示未看到的更新?；諛?biāo)可以有一個(gè)數(shù)字，用于通知用戶未讀通知的數(shù)量。用戶檢查更新后，徽章會(huì)從應(yīng)用程序圖標(biāo)中消失，并在新通知到達(dá)時(shí)再次出現(xiàn)。
感知：它可以對(duì)用戶產(chǎn)生積極的影響，在某些情況下，用戶可以將徽章視為有價(jià)值的獎(jiǎng)勵(lì)，例如，徽章會(huì)通知用戶他們?cè)谏缃痪W(wǎng)絡(luò)上收到新的點(diǎn)贊、評(píng)論，Nir Eyal曾在他的書(shū)“Hooked”中描述了這種心理效應(yīng)。
視覺(jué)：紅色作為警惕色，用戶看到后會(huì)更具有點(diǎn)擊欲望，相對(duì)產(chǎn)品的一些數(shù)據(jù)指標(biāo)會(huì)有對(duì)應(yīng)的提升
需要用戶采取額外的行動(dòng)，徽章本身不是通知，這是通知的警報(bào)，它只是說(shuō)明了用戶有新更新的事實(shí)，用戶必須單擊或點(diǎn)擊帶有徽章的圖標(biāo)才能看到實(shí)際消息，紅色為強(qiáng)干擾元素，對(duì)一些具有強(qiáng)迫癥的用戶很不友好，在體驗(yàn)上會(huì)有一定的影響
一般用戶消息的通知，例如系統(tǒng)通知、社交中的點(diǎn)贊、評(píng)論、回復(fù)等內(nèi)容
推送通知是出現(xiàn)在移動(dòng)設(shè)備的鎖屏上并引起很多關(guān)注的通知。
很難讓用戶忽略該推送通知，如果用戶不進(jìn)行處理，會(huì)長(zhǎng)時(shí)間浮動(dòng)在手機(jī)上
由于系統(tǒng)上app很多，會(huì)導(dǎo)致用戶對(duì)該類的通知處于麻木狀態(tài)，推送通知的效果不是很強(qiáng)
如果過(guò)度使用，頻繁的推送通知，即使它們很有價(jià)值，也可能會(huì)惹惱用戶
推送通知適用于重要且時(shí)間敏感的更新（即用戶設(shè)置的日歷提醒或警報(bào)、航班延誤或已交付訂單的更新），在您發(fā)送推送通知之前，您需要確保您將與用戶共享的信息是有價(jià)值的和時(shí)效性的，否則，最好使用其他類型的通知。
a、不要使用推送通知來(lái)提示用戶對(duì)應(yīng)用進(jìn)行評(píng)分
b、不建議將推送通知用于促銷或廣告
c、不要使用推送通知來(lái)鼓勵(lì)用戶返回應(yīng)用，例如“好久沒(méi)見(jiàn)到你了，是否想念了呢”通知不會(huì)為用戶提供太多價(jià)值，需要向用戶明確說(shuō)明他們應(yīng)該返回應(yīng)用程序的目的
d、允許用戶更改通知行為
用戶會(huì)收到一封電子郵件，其中包含有關(guān)更新的詳細(xì)信息，不過(guò)這類通知目前在國(guó)外的一些網(wǎng)站使用頻率比較高，根據(jù)習(xí)慣來(lái)講，國(guó)外更多的還是習(xí)慣用郵件的方式作為重要信息的交流方式，相比之下國(guó)內(nèi)使用郵件來(lái)傳遞信息的頻率略低
給用戶更多的控制權(quán)，由用戶決定是否要訂閱電子郵件，如果電子郵件標(biāo)題足夠好，用戶可能無(wú)需閱讀電子郵件就可以理解上下文。
周期長(zhǎng)，國(guó)內(nèi)用戶可能幾個(gè)月甚至1年都看不了一次郵件，此外，電子郵件可能會(huì)在用戶收件箱中丟失（即轉(zhuǎn)到垃圾郵件文件夾）
它需要切換上下文，當(dāng)應(yīng)用程序發(fā)送需要用戶操作的電子郵件通知時(shí)，用戶必須切換到電子郵件應(yīng)用程序才能完成操作，這可能不是很方便，尤其是當(dāng)您與移動(dòng)設(shè)備上的應(yīng)用程序交互時(shí)。
需要安全性時(shí)，想要使用電子郵件通知有兩個(gè)原因，首先，出于安全目的，你可能希望將電子郵件用作單獨(dú)的通道（即，當(dāng)用戶嘗試登錄服務(wù)時(shí)，應(yīng)用程序會(huì)發(fā)送一封電子郵件，其中包含有關(guān)新登錄嘗試的通知）。4.Toast通知
Toast 屬于一種及時(shí)性通知，當(dāng)用戶進(jìn)行操作時(shí)，及時(shí)給出反饋，通常在移動(dòng)端顯示在界面的上、中、下三個(gè)位置，而web端通常顯示在頂部區(qū)域，toast持續(xù)一定時(shí)間后會(huì)自動(dòng)消失，對(duì)用戶的打擾較小
Toast 是與當(dāng)前頁(yè)面的內(nèi)容強(qiáng)關(guān)聯(lián)，用戶無(wú)需離開(kāi)當(dāng)前頁(yè)面就能看到反饋消息
不會(huì)中斷用戶操作，出現(xiàn)時(shí)間短，對(duì)操作上無(wú)影響
丟失信息的風(fēng)險(xiǎn)，用戶注意力不集中時(shí)，會(huì)出現(xiàn)漏掉關(guān)鍵性信息的情況
Toast 是一種操作狀態(tài)，例如，消息發(fā)送時(shí)可以在消息發(fā)送成功時(shí)顯示toast“發(fā)送成功”
不要使用 toast 來(lái)提示與當(dāng)前用戶操作無(wú)關(guān)的信息
不要將 toast 用于錯(cuò)誤消息，由于 toast 會(huì)在短時(shí)間內(nèi)消失，因此某些用戶可能無(wú)法閱讀錯(cuò)誤消息
全屏覆蓋/模態(tài)窗口是出現(xiàn)在應(yīng)用內(nèi)容頂部并要求用戶做出決定的對(duì)話框窗口，這種類型的通知會(huì)在所有應(yīng)用功能出現(xiàn)時(shí)禁用它們并保留在屏幕上，直到用戶完成所需的操作。
用戶在訪問(wèn)應(yīng)用程序時(shí)將 100% 看到通知，無(wú)法避免此通知。
它會(huì)阻礙用戶當(dāng)前的操作，迫使用戶操作通知相關(guān)的內(nèi)容
全屏覆蓋/模式窗口應(yīng)僅用于需要用戶操作的最關(guān)鍵的系統(tǒng)更新，例如，它可能是阻止應(yīng)用程序正常運(yùn)行的錯(cuò)誤或需要特定用戶決策的關(guān)鍵信息。
詢問(wèn)用戶是否想接收特定類型的信息，當(dāng)用戶明確選擇接收某些類型的通知時(shí)，說(shuō)明他們的意愿更強(qiáng)，比產(chǎn)品強(qiáng)制傳輸消息效果較好
一些流氓軟件會(huì)發(fā)送一些系統(tǒng)通知，用戶無(wú)反饋后，還是會(huì)重復(fù)發(fā)送，特別是一些短信push，建議用戶沒(méi)有回復(fù)時(shí)，也不要發(fā)送后續(xù)通知，大部分人的本性是不愿意被脅迫做一些事。
不要在通知中包含敏感信息，例如一些文化特殊性、地域的特殊性等，防止出現(xiàn)觸及別人痛處的一些文字語(yǔ)言
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
雙鉆模型是設(shè)計(jì)師在創(chuàng)作過(guò)程中可以循環(huán)復(fù)用的系統(tǒng)，他不僅可以在我們?cè)O(shè)計(jì)界面時(shí)運(yùn)用到，在一些數(shù)據(jù)提升優(yōu)化等方面同樣適用，雙鉆模型可以使設(shè)計(jì)更加理性，它能夠在我們做項(xiàng)目時(shí)思維更加具有邏輯性，我們?cè)O(shè)計(jì)過(guò)程中更多的方法還是遇到問(wèn)題，直接輸出解決方案，而該模型可以讓我們的思考過(guò)程更加具象化、合理化，他與常規(guī)的思考方式不同，該模型更加注重問(wèn)題的本質(zhì)，全流程圍繞問(wèn)題去解決問(wèn)題，并且在大的項(xiàng)目上能夠提升團(tuán)隊(duì)效率，與其他模型不同，該模型的適用場(chǎng)景更加廣泛。
雙鉆模型是由2005年英國(guó)設(shè)計(jì)委員會(huì)正式公布并進(jìn)行驗(yàn)證，但是在之前BDC就提到過(guò)雙鉆模型，而我們現(xiàn)在看到的模型是通過(guò)改良后進(jìn)行使用的，不過(guò)這不重要，我們只需要了解它的用處價(jià)值以及如何使用就行了。
我們看下圖中，雙鉆模型主要為4個(gè)大階段，發(fā)現(xiàn)期、定義期、發(fā)展期、交付期。左邊的鉆石我們可以理解為發(fā)散思維階段，我們?yōu)橐粋€(gè)沒(méi)有目標(biāo)的項(xiàng)目去腦爆出想法或者問(wèn)題，其次選擇出正確的方向，右邊的鉆石我們可以理解為從正確的方向中抽取正確的事情，最后把正確的事情完成。
發(fā)現(xiàn)期我們理解為是探索期，該階段主要是發(fā)散思維和收集資料，研究問(wèn)題的本質(zhì)，把我們能想到與該問(wèn)題具有關(guān)聯(lián)性的信息全部列出來(lái)。
質(zhì)疑：對(duì)一切信息的質(zhì)疑，簡(jiǎn)單理解就是我們需要多問(wèn)自己為什么，需求的合理性、用戶流程是否合理、為誰(shuí)而做、會(huì)在什么場(chǎng)景使用、會(huì)遇到什么問(wèn)題等等，把所有能想到的不合理事情列舉出來(lái)，這個(gè)小階段我們可以理解為是探索和發(fā)掘問(wèn)題。
研究：針對(duì)問(wèn)題去做對(duì)應(yīng)的調(diào)研，如不知道用戶使用場(chǎng)景，我們通過(guò)用戶調(diào)研可以得到結(jié)果，需要做什么研究調(diào)研可以根據(jù)需求遇到的具體問(wèn)題去使用不同的研究方法，例如一些訪談、競(jìng)品分析、數(shù)據(jù)分析等等。
該階段主要是把發(fā)現(xiàn)期的問(wèn)題收攏聚焦，即基于發(fā)現(xiàn)期的調(diào)研分析、問(wèn)題洞察形成結(jié)論，尋找可以突破的機(jī)會(huì)點(diǎn)，例如我們?cè)诎l(fā)現(xiàn)期發(fā)現(xiàn)的問(wèn)題是用戶的目標(biāo)是什么，影響用戶目標(biāo)的點(diǎn)可能有哪些，那么在定義階段就需要針對(duì)我們提出的這些假想進(jìn)行聚焦，用戶是怎么完成目標(biāo)，通過(guò)什么場(chǎng)景完成目標(biāo)等等，篩選問(wèn)題時(shí)一定要綜合評(píng)估，尋找可行性。
該階段是已經(jīng)開(kāi)始要開(kāi)始進(jìn)行落地了，第一第二階段是找到正確方向，而現(xiàn)在則是用正確的方法去做正確的事情，我們要把聚焦的問(wèn)題具象化，構(gòu)思我們能夠想到的方案，比如設(shè)計(jì)前期探索定義的是年輕、輕盈，在該階段我們就需要根據(jù)關(guān)鍵詞去考慮如何進(jìn)行設(shè)計(jì)，這個(gè)階段是一個(gè)不斷生產(chǎn)和推翻的流程，一直重復(fù)，直到找到能夠落地的方案。
這個(gè)階段就顧名思義比較簡(jiǎn)單了，根據(jù)發(fā)展期確定的方案，最后進(jìn)行實(shí)際的落地，并且是可實(shí)施、可執(zhí)行的，通過(guò)團(tuán)隊(duì)項(xiàng)目流程推動(dòng)上線，最終展現(xiàn)給用戶。
以上便是雙鉆模型的定義，先舉個(gè)通俗的例子大家理解下模型，例如節(jié)假日我們想去旅游，a）我們?nèi)ナ裁吹胤?？參觀古都？自駕游？游樂(lè)園？這個(gè)就是發(fā)現(xiàn)期，我們把想去的想玩的全部列出來(lái)，b）經(jīng)過(guò)篩選我們絕定去游樂(lè)園，這個(gè)就是大的方向，c）我們要去哪個(gè)游樂(lè)園？歡樂(lè)谷？方特大世界？這個(gè)階段就是發(fā)展期，我們要找到能去的地方，d）最后，怎么去？開(kāi)車？跟團(tuán)？玩多久？等等，這個(gè)就是交付期，可落地的。
當(dāng)然這個(gè)案例是結(jié)合生活方便大家理解，在實(shí)際項(xiàng)目中它的用處不止如此。
網(wǎng)上也有很多雙鉆模型的案例，但大多都是偏向理論，并且案例也跟設(shè)計(jì)無(wú)關(guān)聯(lián)，我從設(shè)計(jì)角度單刀直入的引入雙鉆模型，很簡(jiǎn)單，很粗暴～～
例如我們要做一個(gè)唱歌產(chǎn)品的改版，站在設(shè)計(jì)師的角度我們需要去定義他的基本風(fēng)格和基本色彩規(guī)范等等，但是總不能上來(lái)就去做設(shè)計(jì)吧，我們要知道我們產(chǎn)品的群體是誰(shuí)？具體的用戶屬性是什么樣的？有什么樣特征呢？等等。這個(gè)階段就是“雙鉆模型”的第一個(gè)階段，發(fā)現(xiàn)期。
發(fā)現(xiàn)期就是要發(fā)散思維，比如我們”唱歌“產(chǎn)品的用戶群體是年輕群體，用戶特征是18-25歲的在校大學(xué)生，用戶使用場(chǎng)景大多是宿舍、教室等校園環(huán)境，我們就需要去根據(jù)這些信息去進(jìn)行設(shè)計(jì)思維發(fā)散，例如什么的風(fēng)格符合這類群體，先把關(guān)鍵詞舉例出來(lái)，如年輕、活力、青春、潮流、二次元...，依據(jù)這些關(guān)鍵詞做一些飛機(jī)稿，不斷進(jìn)行探索。
當(dāng)然不止這一個(gè)思路，我們也可以通過(guò)競(jìng)品分析的方法去擴(kuò)展思路，如比較潮流的RAPAPP、二次元較重的B站，在比如現(xiàn)在的劇本殺相關(guān)的app等等，分析他們的設(shè)計(jì)風(fēng)格和表現(xiàn)方式，嘗試融合出飛機(jī)稿。
小結(jié)：第一步的核心就是發(fā)散思維，把要做的產(chǎn)品背景信息全部羅列出來(lái)，通過(guò)橫向縱向的方式去散發(fā)關(guān)鍵詞，最后做出對(duì)不同風(fēng)格的設(shè)計(jì)，進(jìn)行探索。
像前面說(shuō)的，該階段就是把發(fā)現(xiàn)期散發(fā)的想法往回收一收，畢竟那么多想法哪一個(gè)才是我們需要的，我們需要在這個(gè)階段去篩選出來(lái)。
我們按照年輕、二次元、潮流、國(guó)潮這些關(guān)鍵詞出了一些飛機(jī)稿，我們需要去收攏起來(lái)看看那些可以與產(chǎn)品特性和用戶屬性真正具有關(guān)聯(lián)性，假設(shè)用戶群體雖然是18-25歲的學(xué)生，但是我們通過(guò)訪談和其他調(diào)研方式發(fā)現(xiàn)這類群體中喜歡二次元歌曲的群體偏少，而潮流、國(guó)潮等關(guān)鍵詞更符合這類群體定位，并且也能夠跟產(chǎn)品的主打方向匹配上，那么就可以剔除二次元相關(guān)的飛機(jī)稿了。
該階段最好能收縮到同一個(gè)維度2-3個(gè)方案便于我們?nèi)ミM(jìn)行驗(yàn)證，假設(shè)我們通過(guò)后續(xù)調(diào)研發(fā)現(xiàn)，國(guó)潮與潮酷用戶群體喜好占比差不多，但是潮酷是產(chǎn)品未來(lái)的方向，我們就可以嘗試剔除國(guó)潮，但在潮酷這個(gè)范圍內(nèi)可能還會(huì)存在多種飛機(jī)稿，這是我們就需要進(jìn)一步篩選，比如通過(guò)延展性，宣傳性，用戶認(rèn)知度以及用戶的審美特性等等多維度去篩選，最終保持少量的方案。
到了這個(gè)階段我們應(yīng)該比較熟悉了，嘗試把上述的方案繼續(xù)收攏聚焦，提取出一個(gè)可行性方案展開(kāi)后續(xù)的設(shè)計(jì)，具體怎么篩選，同樣可以繼續(xù)使用橫向和縱向維度進(jìn)行對(duì)比，如潮酷風(fēng)格方案還剩下2個(gè)，我們就可以通過(guò)用戶調(diào)研、競(jìng)品分析去嘗試衡量?jī)?yōu)劣勢(shì)。
交付期其實(shí)就是我們?cè)O(shè)計(jì)側(cè)工作全部完成了，流程已經(jīng)進(jìn)入到了開(kāi)發(fā)，我們把完整的設(shè)計(jì)稿、切圖等素材交付開(kāi)發(fā)，同時(shí)還需要橫向輸出設(shè)計(jì)規(guī)范供團(tuán)隊(duì)后續(xù)使用。
雙鉆模型用途非常廣泛，如數(shù)據(jù)方面、產(chǎn)品方面、設(shè)計(jì)方面甚至管理方面都可以使用到，在不同的領(lǐng)域使用的方法都類似，區(qū)別就是使用的深入如何，像本篇以純?cè)O(shè)計(jì)維度出發(fā)去使用雙鉆模型，使用的方式偏向單維度。
若以提升數(shù)據(jù)或優(yōu)化用戶體驗(yàn)為目標(biāo)使用雙鉆模型，那么每一個(gè)階段的思維散發(fā)會(huì)變得更加廣泛，每條結(jié)果交叉的情況也非常多。
再次提醒，本篇只以設(shè)計(jì)維度出發(fā)教大家使用雙鉆模型
該模型是講述用戶使用產(chǎn)品的感受，它包含五個(gè)維度：有效（Effective）、效率（Efficient）、吸引（Engaging）、容錯(cuò)（Error tolerant）、易學(xué)（Easy to learn），我們看每個(gè)維度的英文解釋，會(huì)發(fā)現(xiàn)首字母都是E開(kāi)頭，所以被稱為5E體驗(yàn)設(shè)計(jì)模型。
5E 模型在整個(gè)體驗(yàn)設(shè)計(jì)流程中可用性非常強(qiáng)，它可以幫助我們的團(tuán)隊(duì)更具有創(chuàng)造力和理性的分布式領(lǐng)導(dǎo)模型，它可以讓復(fù)雜的設(shè)計(jì)簡(jiǎn)單化，可以幫助產(chǎn)品構(gòu)建一個(gè)具有標(biāo)準(zhǔn)性的體驗(yàn)框架，我們無(wú)論做簡(jiǎn)單還是復(fù)雜的設(shè)計(jì)時(shí)都可以依據(jù)這5個(gè)維度進(jìn)行體驗(yàn)評(píng)估。
不知道大家有沒(méi)有發(fā)現(xiàn)，我們經(jīng)常講的產(chǎn)品可用性或者易用性，其實(shí)跟5E模型很像，5E模型的五個(gè)維度其實(shí)就是產(chǎn)品可用性的基礎(chǔ)，當(dāng)一個(gè)產(chǎn)品不滿足其中一條的時(shí)候，那這個(gè)產(chǎn)品就不存在所謂的可用性，接下來(lái)我們對(duì)這五個(gè)維度進(jìn)行解析。
顧名思義，有效指的就是產(chǎn)品功能的有效性，產(chǎn)品是否能夠?yàn)橛脩魩?lái)價(jià)值，是否能夠幫助用戶完成目標(biāo)，如果不能幫助用戶完成目標(biāo)，那么就不存在產(chǎn)品有效性，就像我們買(mǎi)筷子是為了吃飯、買(mǎi)開(kāi)瓶器是為開(kāi)蓋、買(mǎi)車是為了代步.....如果筷子只給我們一只，開(kāi)瓶器無(wú)法開(kāi)啟瓶蓋，車子沒(méi)有輪子跑不起來(lái)，那這個(gè)產(chǎn)品就是殘缺的最基礎(chǔ)的可用性都未達(dá)到。
字面意思指我們?cè)诒ＷC精準(zhǔn)度的前提下保證完成事項(xiàng)的效率，準(zhǔn)確度越高速度越慢，這個(gè)的衡量通常指產(chǎn)品與競(jìng)品相比同一個(gè)任務(wù)流程效率的高低，以及出錯(cuò)的頻率，假如我們刷抖音刷10個(gè)視頻需要1分鐘，而影響時(shí)間的因素是單個(gè)視頻的內(nèi)容是否足夠吸引，亦或者網(wǎng)速是否夠快。
這個(gè)就比較好理解，就是界面是否能夠吸引用戶，能夠讓用戶愉快的使用我們的頁(yè)面，當(dāng)然不止視覺(jué)上的，人的感知包括視覺(jué)、嗅覺(jué)、觸覺(jué)、味覺(jué)，一個(gè)優(yōu)秀的界面是不僅僅只有視覺(jué)，它還可以通過(guò)視覺(jué)的感知引起用戶的遐想，例如一個(gè)美食的產(chǎn)品，我們把首頁(yè)做的更加紅火、火爆可能就會(huì)引起用戶遐想起辣、熱等感知。
容錯(cuò)我們可以理解為是一個(gè)防錯(cuò)機(jī)制，或者說(shuō)是容錯(cuò)率，當(dāng)用戶在操作某一個(gè)功能時(shí)，容易發(fā)生錯(cuò)誤，我們就需要讓產(chǎn)品幫助用戶及時(shí)更正錯(cuò)誤，例如自動(dòng)修復(fù)，在比如打王者榮耀時(shí)我們選擇陣容都會(huì)經(jīng)常說(shuō)容錯(cuò)率，這里就是指5個(gè)英雄，2個(gè)打團(tuán)時(shí)可能優(yōu)勢(shì)不是那么大，但是另外3個(gè)的容錯(cuò)率非常高能把劣勢(shì)補(bǔ)救回來(lái)，而產(chǎn)品的容錯(cuò)就相當(dāng)于這3個(gè)英雄，負(fù)責(zé)把用戶可能出現(xiàn)的錯(cuò)誤操作給補(bǔ)救回來(lái)。
易學(xué)和產(chǎn)品如何支持初次使用和更深度的學(xué)習(xí)相關(guān)。一個(gè)產(chǎn)品可以使用一次，或一會(huì)兒，或一天。它可以完成一個(gè)容易的或復(fù)雜的任務(wù)，用戶可能是一個(gè)專家或新手。但每一次使用，界面必須能夠記憶或重新學(xué)習(xí)，而且使用一段時(shí)間后能夠發(fā)掘更多的功能，通常產(chǎn)品的易學(xué)性體現(xiàn)在用戶的操作效率。
有效性就像他定義的那樣，存在即合理，存在差異的是準(zhǔn)確性，基本每個(gè)產(chǎn)品都必須具備有效性，例如地圖軟件，我要做公交車，能夠通過(guò)該功能查看離我最近的一輛公交還有多久到，這個(gè)功能的存在就是為了便于我們乘坐公交，防止無(wú)效等待，而差異上就是公交到站的時(shí)間可能因?yàn)槟撤N原因不夠準(zhǔn)確，這個(gè)就是有效上的差異因素。
如何讓用戶體驗(yàn)更好，效率是其中任何重要的一個(gè)點(diǎn)，部分的產(chǎn)品的存在就是為了“讓人變懶”，例如外賣(mài)、打車、購(gòu)物等等，以聊天為例1v1聊天時(shí)消息能否及時(shí)的傳輸，群聊時(shí)同時(shí)加載n條消息，而我們能夠第一時(shí)間看到信息，在新聞資訊的軟件中，怎么保證用戶閱讀的效率，同樣的產(chǎn)品怎么排版才能夠符合用戶閱讀習(xí)慣，提高效率，大多行業(yè)的產(chǎn)品想要做到好的體驗(yàn)，效率是不可缺失的。
一個(gè)產(chǎn)品通過(guò)不同的視覺(jué)表現(xiàn)或者音樂(lè)效果能夠加強(qiáng)用戶在感知層的認(rèn)知，不同的群體，不同的階段，所展示的風(fēng)格不同，像下圖中的金融產(chǎn)品，使用紅色為主色傳遞的感覺(jué)是積極向上的感知，因?yàn)樵趪?guó)內(nèi)股票和基金里紅色代表漲，在看閱讀產(chǎn)品和教育產(chǎn)品，都根據(jù)產(chǎn)品特性和用戶群體來(lái)設(shè)定風(fēng)格，試想一下，一個(gè)閱讀的軟件做成卡通風(fēng)格，那會(huì)不會(huì)嚴(yán)重影響閱讀呢。
上面所說(shuō)，容錯(cuò)更像自動(dòng)修復(fù)或者幫助用戶解決錯(cuò)誤操作問(wèn)題，在系統(tǒng)上我們可能會(huì)經(jīng)?？吹剑珉娔X崩潰時(shí)像MAC系統(tǒng)會(huì)詢問(wèn)是否重啟，而Windows崩潰時(shí)會(huì)直接藍(lán)屏幫用戶自動(dòng)重啟。
在產(chǎn)品中也會(huì)有相關(guān)的功能，例如聊天頁(yè)面中，我們因?yàn)榫W(wǎng)絡(luò)因素發(fā)送失敗會(huì)進(jìn)行紅點(diǎn)提示，包括一些內(nèi)容加載失敗會(huì)提示重新加載等等。
易學(xué)應(yīng)用場(chǎng)景非常之多，我們?cè)谧霎a(chǎn)品時(shí)大多都是優(yōu)先考慮用戶使用是否有阻礙，這個(gè)概念還是比較成熟的，當(dāng)然產(chǎn)品功能有些時(shí)候也避免不了復(fù)雜化，這時(shí)我們可以用新手引導(dǎo)進(jìn)行解決，但是還是需要提醒大家，在設(shè)計(jì)頁(yè)面的時(shí)候一定一定要優(yōu)先遵循識(shí)別性和認(rèn)知性，其次再去考慮創(chuàng)意，例如一個(gè)分享圖標(biāo)，把它設(shè)計(jì)的不像一個(gè)分享，設(shè)計(jì)感是有了，但是可用性無(wú)了。
為什么分享這兩個(gè)模型呢，這兩個(gè)我理解是體驗(yàn)設(shè)計(jì)的基礎(chǔ)，雙鉆模型讓我們從0-1一步一步解決問(wèn)題，而5E模型是在我們解決問(wèn)題的過(guò)程中時(shí)刻提醒我們不要偏移基礎(chǔ)的體驗(yàn)，就像開(kāi)車一樣，雙鉆模型就像是一個(gè)地圖的起點(diǎn)與終點(diǎn)，5E模型就像在行駛這段過(guò)程中的超速提醒、危險(xiǎn)駕駛提醒等。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
對(duì)于很多設(shè)計(jì)師來(lái)講在設(shè)計(jì)界面過(guò)程中往往會(huì)忽略掉很多的細(xì)節(jié)，比如卡片的排版、文字的排版、各種狀態(tài)的反饋等等，特別是剛?cè)胄械脑O(shè)計(jì)師在做頁(yè)面時(shí)往往是直接拿到競(jìng)品的頁(yè)面搬運(yùn)到自己產(chǎn)品上，這種做法理論上不會(huì)讓自己的頁(yè)面出錯(cuò)，但是很多人往往忽略了一點(diǎn)，就是別人這么設(shè)計(jì)的目標(biāo)是什么，是否會(huì)匹配自己的設(shè)計(jì)目標(biāo)，如果不了解這些貿(mào)然的去搬運(yùn)設(shè)計(jì)，那么時(shí)間久了會(huì)養(yǎng)成一個(gè)不好的習(xí)慣，需要設(shè)計(jì)師去進(jìn)行設(shè)計(jì)時(shí)可能就會(huì)遇到很多難點(diǎn)，作為初級(jí)設(shè)計(jì)師或者剛?cè)胄械脑O(shè)計(jì)師，前期可以去進(jìn)行搬運(yùn)設(shè)計(jì)，但是一定要了解別人為什么這么做。
接下來(lái)將分享12個(gè)設(shè)計(jì)上的小技巧，大部分在日常設(shè)計(jì)中都會(huì)遇到，了解到這些設(shè)計(jì)細(xì)節(jié)，可以讓我們的界面更加高效、易用、美觀提升用戶體驗(yàn)。
一、快捷交互
二、提升交互路徑
三、問(wèn)題前置
四、提升可讀性
五、點(diǎn)擊引導(dǎo)
六、注意飽和度
七、禁止特殊字體
八、按鈕也要有層級(jí)
九、圖標(biāo)保持一致
十、利用對(duì)比
十一、圖文疊加
十二、注意遮罩透明
我在做界面時(shí)可以時(shí)常利用交互手勢(shì)去幫助用戶提升操作效率，避免繁雜小操作步驟
左側(cè)為什么錯(cuò)？？
左圖中針對(duì)單條消息的操作匯聚到了icon內(nèi)，對(duì)于用戶理解成本比較高，當(dāng)用戶想要去刪除或者屏蔽消息時(shí)需要通過(guò)聚合入口才能完成操作，大大的提升了用戶操作成本。
建議正確做法～～
我們可以在類似的消息場(chǎng)景或者其他列表形式的場(chǎng)景中，添加一些交互手勢(shì)，隨著手機(jī)系統(tǒng)的更新，用戶的操作習(xí)慣已經(jīng)被各大產(chǎn)品培養(yǎng)的非常成熟，并不用擔(dān)心用戶無(wú)法操作的情況，增加手勢(shì)有弊端也有優(yōu)勢(shì)，右圖中手勢(shì)增加了用戶首次使用的學(xué)習(xí)成本，但是降低了高頻功能的操作成本，這個(gè)理論上是可以接
受的。
實(shí)際產(chǎn)品中的運(yùn)用
利用拇指定律把關(guān)鍵的操作入口元素等，放置右側(cè)提升用戶操作效率。
左側(cè)為什么錯(cuò)？？
左圖中把按鈕放置了模塊左下側(cè)，這樣是不利于用戶進(jìn)行操作，當(dāng)然如果整個(gè)模塊的熱區(qū)都是同一個(gè)，這樣并沒(méi)有什么問(wèn)題，用戶點(diǎn)擊卡片區(qū)域任何位置都能夠完成下一步操作，如果出現(xiàn)一個(gè)模塊內(nèi)存在多個(gè)熱區(qū)入口，而用戶想要到達(dá)目標(biāo)必須通過(guò)按鈕點(diǎn)擊才能進(jìn)入，那么左圖中的排版位置就會(huì)提升用戶的操作時(shí)間。
建議正確做法～～
當(dāng)一個(gè)頁(yè)面內(nèi)出現(xiàn)多個(gè)相同模塊或者一個(gè)模塊出現(xiàn)多個(gè)熱區(qū)入口時(shí)，按鈕點(diǎn)擊區(qū)域有限，我們?cè)O(shè)計(jì)時(shí)就可以利用拇指定律進(jìn)行排版，如右圖中布局，將按鈕放置右側(cè)可以便于用戶在右手操作時(shí)快速到達(dá)目標(biāo)，因?yàn)閲?guó)內(nèi)使用右手的人數(shù)遠(yuǎn)遠(yuǎn)大于左手用戶，所以我們需要滿足大部分的體驗(yàn)，合理利用拇指定律。
相關(guān)定律：費(fèi)茲定律、拇指定律
實(shí)際產(chǎn)品中的運(yùn)用
對(duì)于我們來(lái)講很多東西是簡(jiǎn)單的，但是不乏會(huì)有一些用戶是陌生的，對(duì)于他們來(lái)講可能會(huì)有填寫(xiě)成本。
左側(cè)為什么錯(cuò)？？
左圖中理論上并不是錯(cuò)，我們經(jīng)常設(shè)計(jì)表單時(shí)都會(huì)用的提示話術(shù)，但是我們需要考慮更多維度的東西，對(duì)于我們來(lái)講填寫(xiě)這種表單非常簡(jiǎn)單，例如個(gè)別用戶，可能會(huì)臨時(shí)忘了郵箱格式，又或者輸入手機(jī)號(hào)時(shí)多填了一位數(shù)等等情況，用戶錯(cuò)誤一次操作步驟就會(huì)多一步，反之就是降低使用產(chǎn)品時(shí)的體驗(yàn)。
建議正確做法～～
如右圖中，我們?cè)O(shè)計(jì)時(shí)可以更改提示的話術(shù)，幫助用戶把問(wèn)題前置，當(dāng)用戶看到提示郵箱時(shí)就會(huì)按照格式去填寫(xiě)，通過(guò)把手機(jī)號(hào)的位數(shù)拆分，讓用戶更好的記憶數(shù)字，這樣無(wú)論對(duì)產(chǎn)品還是用戶都沒(méi)有任何損失，反而能降低錯(cuò)誤頻率。
實(shí)際產(chǎn)品中的運(yùn)用
無(wú)論是頁(yè)面還是模塊，用戶在閱讀時(shí)是已掃讀的方式進(jìn)行瀏覽，我們需要保證頁(yè)面的文字元素具備一定的規(guī)律，以此來(lái)提升閱讀效率。
左側(cè)為什么錯(cuò)？？
左圖中可以看到，文字與輸入框放在同一列進(jìn)行展示，這樣一方面不利于后續(xù)的文字?jǐn)U展，通常這種表單填寫(xiě)的頁(yè)面，在頁(yè)面中都是具有很大的空間位置，這樣排布會(huì)造成視覺(jué)上的不規(guī)律和擁擠，降低了篩選效率，當(dāng)然如果是模塊區(qū)域很小的情況下，可以適當(dāng)?shù)倪M(jìn)行使用。
建議正確做法～～
右圖中我們把文字與輸入?yún)^(qū)域上下排布，雖然文字長(zhǎng)短不一，但依據(jù)對(duì)齊原則在豎列情況看是具備對(duì)齊規(guī)律的，有效的提升信息篩選效率。
實(shí)際產(chǎn)品中的運(yùn)用
我們?cè)谧鱿到y(tǒng)功能模塊時(shí)需要注意添加功能點(diǎn)擊引導(dǎo)，用戶對(duì)此類消息模塊認(rèn)知上會(huì)默認(rèn)不可點(diǎn)擊，因此需要我們加以引導(dǎo)。
左側(cè)為什么錯(cuò)？？
我們常見(jiàn)的消息模塊內(nèi)容為兩種，一種是互動(dòng)類消息即用戶與用戶，另一種時(shí)是系統(tǒng)消息即產(chǎn)品推送的內(nèi)容，前者基于用戶習(xí)慣而言用戶已經(jīng)沒(méi)有使用成本默認(rèn)是可以進(jìn)行點(diǎn)擊交互，后者因?yàn)椴糠之a(chǎn)品會(huì)把系統(tǒng)消息作為展示的形式給用戶，但是有些產(chǎn)品的系統(tǒng)消息卻是可以點(diǎn)擊交互，這就導(dǎo)致了用戶認(rèn)知上出現(xiàn)了混亂，左圖中像系統(tǒng)通知功能通知其實(shí)從視覺(jué)上看，并不具備點(diǎn)擊欲望，因此可能會(huì)對(duì)用戶造成錯(cuò)誤的理解。
建議正確做法～～
當(dāng)我們?cè)谠O(shè)計(jì)時(shí)需要注意，若消息列表中存在系統(tǒng)類消息并且可以進(jìn)行交互，在設(shè)計(jì)時(shí)可以添加向箭頭、紅點(diǎn)提示等方式告知用戶可以點(diǎn)擊，如果該功能有數(shù)據(jù)指標(biāo)，這種方式也同樣能賦能產(chǎn)品指標(biāo)。
實(shí)際產(chǎn)品中的案例
目前市場(chǎng)上產(chǎn)品幾乎都有深色版本，我們?cè)谠O(shè)計(jì)時(shí)深色版本的顏色時(shí)需要注意飽和度的高低，同樣的飽和度在黑色背景上會(huì)比白色背景上更加亮，這跟人的視覺(jué)感官有很大的關(guān)系，因此我們?cè)谧龊谏姹緯r(shí)需要注意是否調(diào)整飽和度。
左側(cè)為什么錯(cuò)？？
在黑色背景中使用過(guò)高的飽和度會(huì)刺激眼睛，很多深色版本都是從白色模式通過(guò)反向顏色直接調(diào)整，而彩色元素會(huì)直接運(yùn)用到深色中，那么就會(huì)造成一個(gè)問(wèn)題，因?yàn)槲覀兞?xí)慣在白色模式下看顏色，忽然切換到黑色中看彩色刺激程度非常高“就像黑夜中忽然打開(kāi)手電筒”，對(duì)眼睛的傷害很高。
建議正確做法～～
我們?cè)谠O(shè)計(jì)深色版本時(shí)可以根據(jù)產(chǎn)品主色降低飽和度，包括圖標(biāo)等元素，以此來(lái)緩沖對(duì)用戶視覺(jué)感官的刺激，目前很多大廠的處理方式是直接在彩色元素上添加一層黑色透明遮罩進(jìn)行處理，這樣無(wú)需在添加更多的顏色規(guī)范。
實(shí)際產(chǎn)品中的案例
在設(shè)計(jì)模塊或者頁(yè)面時(shí)不建議使用特殊字體來(lái)突出文字層級(jí)，這樣會(huì)導(dǎo)致視覺(jué)不統(tǒng)一，以及開(kāi)發(fā)成本增加。
左側(cè)為什么錯(cuò)？？
左圖中灰色字使用了特殊字體，看起來(lái)雖然好看，但在實(shí)際開(kāi)發(fā)中會(huì)導(dǎo)致開(kāi)發(fā)成本增加，我們產(chǎn)品一般使用的是系統(tǒng)字體，若使用特殊字體需要讓開(kāi)發(fā)同學(xué)添加對(duì)應(yīng)字體包，這樣會(huì)導(dǎo)致我們的產(chǎn)品包的內(nèi)存過(guò)大，除非產(chǎn)品中默認(rèn)一直使用該特殊字體，這樣才有使用的價(jià)值。
建議正確做法～～
一般系統(tǒng)字體就能夠滿足我們的設(shè)計(jì)需求，在UI設(shè)計(jì)中我們可以通過(guò)不同的字體粗細(xì)來(lái)調(diào)整文字層級(jí)，這樣能夠保證視覺(jué)更加統(tǒng)一，減少產(chǎn)品包大小。
實(shí)際產(chǎn)品中的案例
在設(shè)計(jì)時(shí)需要注意多個(gè)入口在同一位置時(shí)，需要把它們進(jìn)行層級(jí)劃分，避免影響用戶決策
左側(cè)為什么錯(cuò)？？
圖中可以看到，兩個(gè)面性按鈕非常明顯的在模塊中，當(dāng)用戶在瀏覽頁(yè)面中很容易出現(xiàn)困惑，到底需要點(diǎn)擊哪個(gè)才能購(gòu)買(mǎi)預(yù)定，因?yàn)閮蓚€(gè)都是面性無(wú)法快速進(jìn)行定位入口，這樣不僅影響用戶決策效率，還會(huì)影響產(chǎn)品點(diǎn)擊率。
建議正確做法～～
建議設(shè)計(jì)類似模塊中時(shí)，無(wú)論是pc還是移動(dòng)端都需要對(duì)入口進(jìn)行結(jié)構(gòu)劃分，這樣能夠使用戶在瀏覽頁(yè)面時(shí)快速定位到入口，提升決策效率，做體驗(yàn)是解決用戶的思考時(shí)間。
實(shí)際產(chǎn)品中的案例
在UI設(shè)計(jì)中使用圖標(biāo)時(shí)，要保持一致性，確保他們共有相同的視覺(jué)風(fēng)格，相同的重量，填充和描邊。不要混搭。
左側(cè)為什么錯(cuò)？？
可以看到左圖中的圖標(biāo)并不統(tǒng)一，線性里面摻雜著面性點(diǎn)綴，這在UI設(shè)計(jì)中嚴(yán)重違背了一致性的原則，會(huì)導(dǎo)致我們的頁(yè)面不夠嚴(yán)謹(jǐn)專業(yè)。
建議正確做法～～
在設(shè)計(jì)圖標(biāo)時(shí)，首先要保證圖標(biāo)風(fēng)格一致，其次在這個(gè)基礎(chǔ)上保證圖標(biāo)的描邊粗細(xì)、視覺(jué)占比重量、顏色等，不要出現(xiàn)混搭風(fēng)格。
實(shí)際產(chǎn)品中的案例
在設(shè)計(jì)頁(yè)面模塊時(shí)，可以多利對(duì)比度的方式來(lái)體現(xiàn)設(shè)計(jì)的表現(xiàn)力，鮮明直接的色值能夠直接表達(dá)事物的性質(zhì)以及特點(diǎn)，通過(guò)對(duì)比，也能夠更加清晰的強(qiáng)調(diào)設(shè)計(jì)中的重點(diǎn)，這樣給用戶的印象會(huì)更深刻，同樣會(huì)給產(chǎn)品帶來(lái)一定的趣味性。
左側(cè)為什么錯(cuò)？？
左圖中單看視覺(jué)也沒(méi)問(wèn)題，只是在表現(xiàn)上圖標(biāo)與背景融入到一塊了，導(dǎo)致視覺(jué)表現(xiàn)力較差，在設(shè)計(jì)中如果符合產(chǎn)品風(fēng)格的前提下，我們可以避免這種方式，這種方式雖然具有視覺(jué)效果但不夠強(qiáng)，對(duì)用戶的記憶點(diǎn)不夠深刻。
建議正確做法～～
設(shè)計(jì)到類似的模塊時(shí)我們可以利用對(duì)比的關(guān)系，以此突出視覺(jué)元素，通過(guò)顏色焦點(diǎn)引導(dǎo)用戶關(guān)注，強(qiáng)化用戶印象同時(shí)還能增加頁(yè)面的視覺(jué)表現(xiàn)力和氛圍感。
實(shí)際產(chǎn)品中的案例
在設(shè)計(jì)圖文疊加的卡片或者頁(yè)面時(shí)，我們需要注意不同明度的圖片上，文字識(shí)別是否有阻礙，一般情況會(huì)通過(guò)遮罩方式避免這個(gè)情況。
左側(cè)為什么錯(cuò)？？
左圖中在深色圖片下字體的可讀性是沒(méi)有問(wèn)題的，但當(dāng)出現(xiàn)文字底部區(qū)域的圖片相對(duì)復(fù)雜時(shí)便會(huì)影響識(shí)別，第二種情況當(dāng)圖片明度過(guò)高時(shí)文字同樣無(wú)法識(shí)別，試想一下，一張白色調(diào)性的圖片上放文字，那基本無(wú)法看清，嚴(yán)重影響閱讀體驗(yàn)。
建議正確做法～～
在界面設(shè)計(jì)時(shí)如果遇到類似的卡片，建議在文字區(qū)域添加漸變遮罩的方式，以此保證文字的識(shí)別度，或者添加純黑色透明遮罩進(jìn)行處理，這樣可以兼容不同環(huán)境的圖片與文字的重疊，保證基本的閱讀體驗(yàn)。
實(shí)際產(chǎn)品中的案例
UI設(shè)計(jì)中經(jīng)常會(huì)遇到彈窗，彈窗是需要配合頁(yè)面遮罩來(lái)讓用戶進(jìn)行專注操作，不同的遮罩透明度所帶來(lái)的專注度也不同。
左側(cè)為什么錯(cuò)？？
左圖中我們看到，遮罩的透明度過(guò)低，我案例設(shè)置的是17%，此時(shí)彈窗內(nèi)容與頁(yè)面內(nèi)容結(jié)構(gòu)上區(qū)分并不是很明顯，一般彈窗是用來(lái)讓用戶跳脫頁(yè)面內(nèi)容，從而瀏覽彈窗內(nèi)容，轉(zhuǎn)變用戶目標(biāo)，當(dāng)彈窗無(wú)法聚焦時(shí)便很難達(dá)到目標(biāo)，并且視覺(jué)上層級(jí)更加混亂。
建議正確做法～～
右圖中案例我把透明度調(diào)整到了37%，我們此時(shí)再看彈窗很容易就忽略頁(yè)面內(nèi)容，因?yàn)榛疑礁撸趽醵仍礁?，用戶跳脫感就越?qiáng)，這樣我們可以讓用戶專注彈窗內(nèi)容，同時(shí)視覺(jué)結(jié)構(gòu)上也區(qū)分很明顯。
實(shí)際產(chǎn)品中的案例
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
UI新手設(shè)計(jì)學(xué)習(xí)100問(wèn)，顧名思義，主要是通過(guò)100個(gè)常見(jiàn)問(wèn)題解決初學(xué)者在學(xué)習(xí)UI設(shè)計(jì)初期的困惑，比如什么是UI設(shè)計(jì)？設(shè)計(jì)的目的是什么？UI設(shè)計(jì)需要學(xué)會(huì)什么必備技能？UI設(shè)計(jì)又有什么常見(jiàn)的學(xué)習(xí)方法等等。
為什么用問(wèn)答的形式？這是受一個(gè)朋友的創(chuàng)作啟發(fā)，讓我確定了以這種形式來(lái)創(chuàng)作，這樣更易于大家理解和學(xué)習(xí)。另外這個(gè)欄目的內(nèi)容，我也將會(huì)盡自己最大的精力，從百度百科、維基百科以及國(guó)內(nèi)外的設(shè)計(jì)書(shū)籍中一邊查一邊寫(xiě)，努力制作成一本UI設(shè)計(jì)新手學(xué)習(xí)的知識(shí)手冊(cè)，解決新手初學(xué)者的種種困惑，給他們提供一個(gè)學(xué)習(xí)的知識(shí)樹(shù)和進(jìn)度條。
這個(gè)欄目會(huì)有多少字，多長(zhǎng)更新完？我已經(jīng)完成了第一章大部分內(nèi)容，目前已經(jīng)撰寫(xiě)了約5000字，平均每個(gè)問(wèn)題800字，以我目前創(chuàng)作內(nèi)容的篇幅看，這份專欄應(yīng)該在10萬(wàn)字左右，相當(dāng)于一本300頁(yè)左右的實(shí)體書(shū)籍。至于完結(jié)時(shí)間，除了需要參考百度百科和維基百科，還要翻閱各種設(shè)計(jì)書(shū)籍和查找資料，我個(gè)人預(yù)計(jì)時(shí)間3個(gè)月，不過(guò)如果大家喜歡，我就會(huì)加快腳步！
我在2022年轉(zhuǎn)型到知識(shí)付費(fèi)以后，認(rèn)識(shí)了太多的設(shè)計(jì)師朋友，也建立了自己的社群。其中讓我印象最深的有這么一類用戶群體，他們很早就在大學(xué)期間為了學(xué)習(xí)UI設(shè)計(jì)，花了很多錢(qián)報(bào)了各種培訓(xùn)班，但最后的結(jié)果卻不如人意。很多培訓(xùn)班太注重于軟件技能的操作，而忽略UI設(shè)計(jì)其實(shí)是一門(mén)學(xué)科，如果學(xué)生知其然不知其所以然，那么即便學(xué)會(huì)了Sketch、Figma這些工具，他們也不知道學(xué)了UI設(shè)計(jì)到底能有什么用，未來(lái)又該如何去規(guī)劃自己的職業(yè)生涯。
這些朋友里面，留給我印象最深的，是一個(gè)剛畢業(yè)的女孩。她給我說(shuō)，貸了兩次款，畢業(yè)后還是不知道UI設(shè)計(jì)到底能干啥，現(xiàn)在勉強(qiáng)找到一份設(shè)計(jì)的工作，每個(gè)月還要還著貸款走。我當(dāng)時(shí)把這個(gè)朋友免費(fèi)邀請(qǐng)到我的私董會(huì)星球了，讓她去看我講的書(shū)、錄的課程，期望能給她帶來(lái)一絲溫暖和希望。
其次在我最早開(kāi)始建立社群的時(shí)候，有一個(gè)探友在站酷看到我的產(chǎn)品拆解以后，跑來(lái)加我，然后給我說(shuō)：“我一直質(zhì)疑培訓(xùn)班老師的講課內(nèi)容，因?yàn)槲矣X(jué)得設(shè)計(jì)這門(mén)職業(yè)，如果只學(xué)會(huì)軟件，那是不夠的，肯定需要學(xué)習(xí)一些設(shè)計(jì)原則和理論。所以當(dāng)我看了你的產(chǎn)品拆解以后，我很受啟發(fā)，我覺(jué)得學(xué)會(huì)這些設(shè)計(jì)理論特別重要?！?br />
這些真實(shí)的故事，讓我印象深刻，也讓我開(kāi)始反思，造成這種現(xiàn)象的原因是什么。所以這個(gè)專題的內(nèi)容，在很久之前就藏在我的心里了。我想去做一個(gè)UI設(shè)計(jì)的知識(shí)樹(shù)，給那些準(zhǔn)備學(xué)習(xí)UI設(shè)計(jì)以及正在從業(yè)的設(shè)計(jì)師們提供一個(gè)清晰、可視化的學(xué)習(xí)體系，從而幫助他們從一個(gè)宏觀、系統(tǒng)的角度去勘察這個(gè)行業(yè)，發(fā)展趨勢(shì)是什么、是否值得入行，從0到1又需要哪些步驟。
這個(gè)專題，主要為這幾類朋友而創(chuàng)作。第一，正在上學(xué)，準(zhǔn)備想學(xué)習(xí)UI設(shè)計(jì)的大學(xué)生；第二，剛畢業(yè)準(zhǔn)備報(bào)班學(xué)習(xí)UI設(shè)計(jì)，或已經(jīng)從培訓(xùn)班剛畢業(yè)出來(lái)的應(yīng)屆生。第三，雖然已經(jīng)從事UI設(shè)計(jì)三五年，但對(duì)UI設(shè)計(jì)還是一知半解，混混霍霍做設(shè)計(jì)的職場(chǎng)設(shè)計(jì)師。
最后，這個(gè)專題是我的第一個(gè)付費(fèi)內(nèi)容，我將會(huì)免費(fèi)分享30個(gè)內(nèi)容，如果你覺(jué)得有價(jià)值，可關(guān)注我們獲取全部?jī)?nèi)容。
目前我把這個(gè)專欄拆分為四塊內(nèi)容，分別是認(rèn)識(shí)UI、就業(yè)前景、學(xué)習(xí)方法和如何求職四個(gè)章節(jié)。
第一章是認(rèn)識(shí)UI，我會(huì)從設(shè)計(jì)的目的、UI設(shè)計(jì)的定義和分類開(kāi)始讓初學(xué)者對(duì)UI設(shè)計(jì)有一個(gè)初步的了解。（這個(gè)部分的內(nèi)容也許適用于80%的UI設(shè)計(jì)師，雖然很多設(shè)計(jì)師已經(jīng)從業(yè)了多年，但對(duì)UI設(shè)計(jì)還是一知半解。）
第二章是就業(yè)前景，通過(guò)UI設(shè)計(jì)當(dāng)前的工作內(nèi)容、薪資收入和職業(yè)發(fā)展等維度告訴初學(xué)者UI設(shè)計(jì)的就業(yè)趨勢(shì)，降低就業(yè)選擇風(fēng)險(xiǎn)。
第三章是學(xué)習(xí)方法，我想給初學(xué)者提供一個(gè)學(xué)習(xí)知識(shí)樹(shù)和能力晉升模型，只有知道最終要去哪里，自己當(dāng)前又在哪里，應(yīng)該如何努力，他們才能像玩游戲一樣，每天對(duì)知識(shí)的汲取都充滿動(dòng)力。
第四章是如何求職，通過(guò)拆解企業(yè)對(duì)UI設(shè)計(jì)師的招聘需求，抽絲剝繭地讓初學(xué)者理解求職的本質(zhì)和方法。
這是初步擬定的目錄，非最終交付目錄。其次這份專欄我將會(huì)篩選30個(gè)左右的問(wèn)答免費(fèi)給大家分享試看。
1. 認(rèn)識(shí)UI
什么是設(shè)計(jì)？（已完結(jié)）
設(shè)計(jì)的目的是什么？（已完結(jié)）
設(shè)計(jì)和藝術(shù)的區(qū)別？（已完結(jié)）
UI設(shè)計(jì)是什么？（已完結(jié)）
UI設(shè)計(jì)有什么分類？（已完結(jié)）
UI和UE、UX的區(qū)別？（已完結(jié)）
UI設(shè)計(jì)和平面設(shè)計(jì)的區(qū)別（已完結(jié)）
UI設(shè)計(jì)和電商設(shè)計(jì)有什么區(qū)別？（已完結(jié)）
UI設(shè)計(jì)有什么價(jià)值？
國(guó)內(nèi)UI設(shè)計(jì)的發(fā)展歷程
2. 就業(yè)前景
UI設(shè)計(jì)師現(xiàn)在的就業(yè)前景怎么樣？
哪些公司和行業(yè)需要招聘UI設(shè)計(jì)師？
UI設(shè)計(jì)師飽和了嗎，還值得選擇嗎？
失業(yè)的UI設(shè)計(jì)師越來(lái)越多，還能選擇UI設(shè)計(jì)嗎？
UI設(shè)計(jì)師的工作流程是怎樣的？
UI設(shè)計(jì)師主要負(fù)責(zé)什么工作內(nèi)容?
新手UI設(shè)計(jì)師的薪資收入一般在哪個(gè)水平？
UI設(shè)計(jì)師的薪資收入晉升模型
UI設(shè)計(jì)師會(huì)經(jīng)常加班嗎？
UI設(shè)計(jì)師的工作壓力大嗎？
UI設(shè)計(jì)師職業(yè)發(fā)展路線圖是怎樣的？
UI設(shè)計(jì)師是不是過(guò)了30歲就會(huì)過(guò)氣？
技術(shù)崗位未來(lái)是否一定要朝著管理崗發(fā)展嗎？
一二三線城市的環(huán)境對(duì)UI設(shè)計(jì)師就業(yè)和成長(zhǎng)有影響嗎
談不上對(duì)UI設(shè)計(jì)特別熱愛(ài)，但覺(jué)得UI設(shè)計(jì)工資高，可以選擇這個(gè)行業(yè)嗎？
學(xué)會(huì)UI設(shè)計(jì)可以創(chuàng)業(yè)或做自由設(shè)計(jì)師嗎？
3. 如何學(xué)習(xí)
UI設(shè)計(jì)師需要學(xué)習(xí)什么內(nèi)容？
UI設(shè)計(jì)師需要掌握哪些必備技能？
UI設(shè)計(jì)學(xué)習(xí)的步驟是什么？
需要多久才能成為一個(gè)優(yōu)秀的設(shè)計(jì)師?
除了設(shè)計(jì)，UI設(shè)計(jì)師還需要培養(yǎng)什么職業(yè)技能？
學(xué)習(xí)UI設(shè)計(jì)的常見(jiàn)方法
UI設(shè)計(jì)可以自學(xué)嗎？
自學(xué)UI設(shè)計(jì)有什么難點(diǎn)和挑戰(zhàn)？
審美能力不好，可以學(xué)好UI設(shè)計(jì)嗎？
UI設(shè)計(jì)需要學(xué)習(xí)什么軟件?
學(xué)會(huì)軟件一般需要多長(zhǎng)時(shí)間？
UI設(shè)計(jì)需要買(mǎi)蘋(píng)果電腦嗎？
用Photoshop可以設(shè)計(jì)UI嗎？
UI設(shè)計(jì)需要看什么設(shè)計(jì)書(shū)籍？
有哪些免費(fèi)學(xué)習(xí)的教程網(wǎng)站？
錄播課程和設(shè)計(jì)培訓(xùn)班有什么區(qū)別？
有那些物美價(jià)廉的付費(fèi)課程推薦？
選擇設(shè)計(jì)培訓(xùn)班需要注意什么？
培訓(xùn)班學(xué)完以后就能成為UI設(shè)計(jì)師了嗎？
培訓(xùn)班對(duì)找工作有幫助嗎？
UI設(shè)計(jì)師需要美術(shù)相關(guān)專業(yè)嗎
什么樣的專業(yè)更適合UI設(shè)計(jì)？
學(xué)歷對(duì)UI設(shè)計(jì)師的學(xué)習(xí)有影響嗎？
設(shè)計(jì)臨摹對(duì)新手UI設(shè)計(jì)師有什么幫助？
設(shè)計(jì)臨摹有什么技巧和方法？
設(shè)計(jì)臨摹的作品可以加入個(gè)人作品集嗎？
一名好的UI設(shè)計(jì)師應(yīng)該具備什么素質(zhì)？
優(yōu)秀的設(shè)計(jì)師都有什么好的設(shè)計(jì)習(xí)慣？
4. 如何求職
企業(yè)招聘UI設(shè)計(jì)師的流程是什么？
企業(yè)招聘UI設(shè)計(jì)師主要考核標(biāo)準(zhǔn)是什么？
企業(yè)愿意招聘新手UI設(shè)計(jì)師嗎？
新手UI設(shè)計(jì)師應(yīng)該選擇什么樣的企業(yè)？
去不了大廠，新手設(shè)計(jì)師是不是就沒(méi)前途？
創(chuàng)業(yè)團(tuán)隊(duì)、小公司值得新手UI設(shè)計(jì)師去嗎?
UI設(shè)計(jì)師的求職流程是什么？
UI設(shè)計(jì)師求職需要準(zhǔn)備什么資料？
簡(jiǎn)歷設(shè)計(jì)對(duì)UI設(shè)計(jì)師重要嗎？
如何設(shè)計(jì)一份優(yōu)秀的作品集？
新手UI設(shè)計(jì)師有什么求職技巧？
學(xué)歷低對(duì)UI設(shè)計(jì)師的求職有沒(méi)有影響，如何規(guī)避？
沒(méi)有工作經(jīng)驗(yàn)怎么辦，能找到工作嗎？
一直找不到工作怎么辦，是不是應(yīng)該放棄UI設(shè)計(jì)？
設(shè)計(jì)是什么？為什么需要設(shè)計(jì)？UI設(shè)計(jì)這個(gè)行業(yè)又是怎么誕生的？UI設(shè)計(jì)師的工作內(nèi)容具體是什么？非科班畢業(yè)的大學(xué)生適合從事設(shè)計(jì)行業(yè)嗎？這個(gè)行業(yè)需要學(xué)習(xí)多久才能成為一名優(yōu)秀設(shè)計(jì)師？作為此次專題的開(kāi)篇內(nèi)容，我們?cè)谶@個(gè)章節(jié)將會(huì)抽絲剝繭向大家介紹UI設(shè)計(jì)的由來(lái)、定義、分類和價(jià)值，幫助大家快速對(duì)UI設(shè)計(jì)這門(mén)學(xué)科有一個(gè)宏觀的了解。
我們先看百度百科對(duì)設(shè)計(jì)的定義。設(shè)計(jì)，是指設(shè)計(jì)師有目標(biāo)、有計(jì)劃地進(jìn)行技術(shù)性的創(chuàng)作與創(chuàng)意活動(dòng)。維基百科認(rèn)為，所謂設(shè)計(jì)，即“設(shè)想和計(jì)劃，設(shè)想是目的，計(jì)劃是過(guò)程安排”，通常是指有目標(biāo)和計(jì)劃的創(chuàng)作行為及活動(dòng)。
著名的美國(guó)設(shè)計(jì)理論學(xué)家維克多·帕帕奈克認(rèn)為，設(shè)計(jì)是為構(gòu)建有意義的秩序而付出的有意識(shí)的、直覺(jué)上的努力。他認(rèn)為設(shè)計(jì)有兩個(gè)步驟。第一步：理解用戶的期望、需要、動(dòng)機(jī)，并理解業(yè)務(wù)、技術(shù)和行業(yè)上的需求與限制。第二步：將這些知道的東西轉(zhuǎn)化為對(duì)產(chǎn)品的規(guī)劃（或者產(chǎn)品本身），使產(chǎn)品的形式、內(nèi)容和行為變得有用、能用、令人向往，并且在經(jīng)濟(jì)和技術(shù)上可行。
簡(jiǎn)單總結(jié)一下，設(shè)計(jì)是有目的的，有計(jì)劃的、滿足用戶的期望的行為。比如企業(yè)需要設(shè)計(jì)一個(gè)官網(wǎng)進(jìn)行對(duì)外宣傳，網(wǎng)站的設(shè)計(jì)就屬于有目的、有計(jì)劃的工作，而宣傳則是企業(yè)的核心需求。
為什么我們需要先了解“設(shè)計(jì)”的概念？這是因?yàn)閁I設(shè)計(jì)只是設(shè)計(jì)的一個(gè)細(xì)分領(lǐng)域，設(shè)計(jì)的種類非常多，設(shè)計(jì)在許多領(lǐng)域都有應(yīng)用，涉及的方面也比較廣泛。只有初步了解這個(gè)宏觀的大概念，我們才能更清晰地看清楚UI設(shè)計(jì)的本質(zhì)，從而為我們的學(xué)習(xí)進(jìn)行指導(dǎo)。
參考文獻(xiàn)：
百度百科-設(shè)計(jì)
維基百科-設(shè)計(jì)
《步步為贏：交互設(shè)計(jì)全流程解析》- 董尚昊
我們先看世界上第一所完全為發(fā)展設(shè)計(jì)教育而建立的學(xué)院包豪斯對(duì)于設(shè)計(jì)的三個(gè)基本觀點(diǎn)。
①設(shè)計(jì)是藝術(shù)與技術(shù)的新統(tǒng)一；②設(shè)計(jì)的目的是人而不是產(chǎn)品；③設(shè)計(jì)必須遵循自然與客觀的法則來(lái)進(jìn)行。
包豪斯提出“以解決問(wèn)題為中心”的設(shè)計(jì)理念。他們認(rèn)為設(shè)計(jì)是為了解決問(wèn)題，不論是設(shè)計(jì)一個(gè)水壺，還是一款手機(jī)應(yīng)用軟件，設(shè)計(jì)師都是在為他人服務(wù)，在幫使用者解決問(wèn)題。這個(gè)設(shè)計(jì)理念深深地影響了設(shè)計(jì)界。設(shè)計(jì)是理性和感性的結(jié)合，并以解決問(wèn)題、滿足人們的需要為目的。
中國(guó)現(xiàn)代設(shè)計(jì)和現(xiàn)代設(shè)計(jì)教育的重要奠基人之一、美國(guó)設(shè)計(jì)教育最高學(xué)府——美國(guó)藝術(shù)中心設(shè)計(jì)學(xué)院教授王受之在他的著作《世界現(xiàn)代設(shè)計(jì)史》中寫(xiě)過(guò)這樣一句話：“設(shè)計(jì)是為他人服務(wù)的活動(dòng)?！?br />
日本當(dāng)代國(guó)際級(jí)平面設(shè)計(jì)大師藝術(shù)總監(jiān)原研哉在《設(shè)計(jì)中的設(shè)計(jì)》一書(shū)中也有類似的表達(dá)：“設(shè)計(jì)的實(shí)質(zhì)在于發(fā)現(xiàn)很多人都遇到的問(wèn)題然后試著去解決的過(guò)程。”
綜上所述，設(shè)計(jì)的目的是用設(shè)計(jì)方案來(lái)滿足用戶的需要，而不是單純產(chǎn)出設(shè)計(jì)師認(rèn)為美觀的方案。這是設(shè)計(jì)過(guò)程中最重要的指導(dǎo)原則之一。如果不理解設(shè)計(jì)的本質(zhì)，我們?cè)谝院蟮纳虡I(yè)設(shè)計(jì)中就很容易陷入一個(gè)怪圈，我覺(jué)得這個(gè)界面這樣設(shè)計(jì)得非常好看，但客戶卻讓我去臨摹另外一個(gè)我認(rèn)為很普通的產(chǎn)品界面，客戶覺(jué)得那個(gè)才是他想要的。
參考文獻(xiàn)：
《步步為贏：交互設(shè)計(jì)全流程解析》- 董尚昊
我們看看維基百科對(duì)藝術(shù)的介紹。藝術(shù)是指憑借想象力、經(jīng)驗(yàn)等綜合人為因素的融合與平衡，以創(chuàng)作隱含美學(xué)的器物、環(huán)境、影像、動(dòng)作或聲音的表達(dá)模式。而百度百科則對(duì)藝術(shù)沒(méi)有明確的定義。藝術(shù)是一種社會(huì)現(xiàn)象、社會(huì)事物，屬上層建筑中的社會(huì)意識(shí)形態(tài)，其次也指向各種技術(shù)活動(dòng)，比如畫(huà)、雕刻、建筑等活動(dòng)。
藝術(shù)的目的可以分為無(wú)動(dòng)機(jī)的及有動(dòng)機(jī)的兩類。無(wú)動(dòng)機(jī)的藝術(shù)是指那些本來(lái)就是人類不可或缺一部分的藝術(shù)，這類的藝術(shù)超越個(gè)人，或是不是為某一特定目的所創(chuàng)作。有動(dòng)機(jī)的藝術(shù)是指那些因?yàn)樘囟康漠a(chǎn)生的藝術(shù)?？赡苁菫榱苏蔚淖兏铩⒈磉_(dá)特定的感情、陳述個(gè)人心理，或是作為一個(gè)交流的工具。
原研哉在《設(shè)計(jì)中的設(shè)計(jì)》對(duì)設(shè)計(jì)和藝術(shù)也發(fā)表了自己的看法。
藝術(shù)說(shuō)到底是個(gè)人意愿對(duì)社會(huì)的一種表達(dá)，其起源帶有非常個(gè)人化的性質(zhì)，所以只有藝術(shù)家自己才知道其作品的來(lái)源。而設(shè)計(jì)，則基本上不是一種自我表達(dá)，它源于社會(huì)。設(shè)計(jì)的實(shí)質(zhì)在于發(fā)現(xiàn)一個(gè)很多人都遇到的問(wèn)題，然后試著去解決的過(guò)程。
簡(jiǎn)單總結(jié)，設(shè)計(jì)和藝術(shù)有很多重疊的部分，兩者最本質(zhì)的區(qū)別是設(shè)計(jì)的本質(zhì)是滿足需要，包含更多的商業(yè)述求，而藝術(shù)的目的是表達(dá)藝術(shù)家對(duì)世界的看法，不受外界的約束。為什么要弄懂這兩者的區(qū)別，這是因?yàn)樵谏虡I(yè)設(shè)計(jì)中或許不會(huì)給你有太多充足的時(shí)間去完成完美的稿子，而是要以甲方或企業(yè)的設(shè)計(jì)目標(biāo)為主、商業(yè)設(shè)計(jì)，不是藝術(shù)，而是要通過(guò)設(shè)計(jì)滿足甲方的需求。
參考文獻(xiàn)：
維基百科-藝術(shù)
《設(shè)計(jì)中的設(shè)計(jì)》- 原研哉
由前UI設(shè)計(jì)屬于近代興起的設(shè)計(jì)分類，這是隨著科技的快速發(fā)展才催生出來(lái)的新興行業(yè)。目前對(duì)于UI設(shè)計(jì)的定義，目前國(guó)內(nèi)有兩種流派。
第一種，UI設(shè)計(jì)包含界面設(shè)計(jì)（Graphical User Interface，簡(jiǎn)稱GUI）、交互設(shè)計(jì)（Interaction Design，簡(jiǎn)稱IxD）和用戶體驗(yàn)設(shè)計(jì)（User Experience Design，簡(jiǎn)稱UX）。
我們先看百度百科對(duì)UI設(shè)計(jì)的定義描述。UI是User Interface(用戶界面)的簡(jiǎn)稱，是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。UI是一個(gè)廣義的概念，可以通過(guò)以下三個(gè)層面來(lái)理解UI的概念。
首先，UI是指人與信息交互的媒介，它是信息產(chǎn)品的功能載體和典型特征。比如以視覺(jué)為主體的界面，強(qiáng)調(diào)的是視覺(jué)元素的組織和呈現(xiàn)，包含圖形、圖標(biāo)、色彩、字體等，這就是我們常說(shuō)的視覺(jué)表現(xiàn)層，用戶從視覺(jué)就可以直接感知的部分。在這一層面，UI就是用戶界面，也是國(guó)內(nèi)普遍對(duì)UI設(shè)計(jì)的認(rèn)知。
其次，UI是指信息的采集與反饋、輸入與輸出，這是基于界面而產(chǎn)生的人與產(chǎn)品之間的交互行為。在這一層面，Ul可以理解為User Interaction，即用戶交互，需要通過(guò)界面對(duì)功能的隱喻和引導(dǎo)用戶來(lái)完成對(duì)應(yīng)的操作。因此，UI不僅要有精美的視覺(jué)表現(xiàn)，也要有方便快捷的操作，以符合用戶的認(rèn)知和行為習(xí)慣。
最后，UI的高級(jí)形態(tài)可以理解為User Invisible（中文：看不見(jiàn)的）。對(duì)用戶而言，在這一層面UI是“不可見(jiàn)的”，這并非是指視覺(jué)上的不可見(jiàn)，而是讓用戶在界面之下與系統(tǒng)自然地交互，沉浸在他們喜歡的內(nèi)容和操作中，忘記了界面的存在。其實(shí)這就是用戶體驗(yàn)，不僅僅是界面，而是以用戶為中心進(jìn)行界面結(jié)構(gòu)、行為、視覺(jué)層面的設(shè)計(jì)。
從百科的對(duì)UI設(shè)計(jì)的定義可以看出，UI設(shè)計(jì)包含了界面設(shè)計(jì)、交互設(shè)計(jì)和用戶體驗(yàn)設(shè)計(jì)，這也是國(guó)內(nèi)眾多UI設(shè)計(jì)書(shū)籍中的對(duì)UI設(shè)計(jì)的定義。比如在《術(shù)與道：移動(dòng)應(yīng)用UI設(shè)計(jì)必修課》、《視界·無(wú)界：寫(xiě)給UI設(shè)計(jì)師的設(shè)計(jì)書(shū)》、《UI設(shè)計(jì)精品必修課》等國(guó)內(nèi)設(shè)計(jì)書(shū)籍都有類似的觀點(diǎn)。甚至有這么一個(gè)很流行的比喻：如果把一款軟件產(chǎn)品比作一個(gè)美女的話，視覺(jué)就是一個(gè)美女的化妝和打扮，交互就是一個(gè)美女的五官位置及骨骼體態(tài)，用戶體驗(yàn)就是美女是否善解人意、功能貼心、易用好用等。
第二種，UI設(shè)計(jì)、交互設(shè)計(jì)和用戶體驗(yàn)設(shè)計(jì)是獨(dú)立的學(xué)科，他們雖然有很多重疊部分，但交互設(shè)計(jì)和用戶體驗(yàn)設(shè)計(jì)不屬于UI設(shè)計(jì)，甚至UI設(shè)計(jì)等同于界面設(shè)計(jì)。
在Joel Marsh的《用戶體驗(yàn)設(shè)計(jì)：100堂入門(mén)課》這本書(shū)中，作者舉了個(gè)例子：“UI和UX（用戶體驗(yàn)設(shè)計(jì)）是兩種不同的工作。如果有的公司有‘UI/UX’這一職稱，那說(shuō)明這家公司根本不了解什么是UX，或者他們想花一份錢(qián)就讓人做兩份工作。要當(dāng)心?！?br />
在《這才是用戶體驗(yàn)設(shè)計(jì)：人人都看得懂的產(chǎn)品設(shè)計(jì)書(shū)》里，作者認(rèn)為界面設(shè)計(jì)包括信息層和呈現(xiàn)層。UI設(shè)計(jì)的范圍比界面設(shè)計(jì)要小得多，通常僅關(guān)注虛擬產(chǎn)品的信息呈現(xiàn)，而且較少涉及藝術(shù)向的視覺(jué)設(shè)計(jì)。信息層則由交互設(shè)計(jì)師負(fù)責(zé)，待界面上要呈現(xiàn)的信息架構(gòu)和具體信息明確后，UI設(shè)計(jì)師才開(kāi)始設(shè)計(jì)工作。其次UX設(shè)計(jì)師主要關(guān)注上層設(shè)計(jì)，而UI的工作非常細(xì)，比如如按鈕、字體的設(shè)計(jì)。
這種觀點(diǎn)也是目前國(guó)內(nèi)多數(shù)企業(yè)和設(shè)計(jì)師對(duì)UI設(shè)計(jì)的定義，UI設(shè)計(jì)就主要是負(fù)責(zé)界面設(shè)計(jì)的工作，尤其指移動(dòng)端產(chǎn)品界面，比如APP、智能設(shè)備等。
結(jié)合以上兩種流派對(duì)UI設(shè)計(jì)的定義，我認(rèn)為，從視覺(jué)層面，UI設(shè)計(jì)可以定義為用戶界面設(shè)計(jì)，不管是web端、移動(dòng)端還是其他智能設(shè)備，凡是涉及到用戶界面的設(shè)計(jì)，都可以歸納為UI設(shè)計(jì)；從交互層面，UI設(shè)計(jì)還需要思考界面對(duì)功能的隱喻和引導(dǎo)，從而幫助用戶完成對(duì)應(yīng)的操作；從體驗(yàn)層面，UI設(shè)計(jì)需要從視覺(jué)、色彩、行為和交互等方面為用戶提供優(yōu)秀的體驗(yàn)，讓用戶可以和系統(tǒng)自然地交互，沉浸在他們系統(tǒng)操作中。
總之，一名優(yōu)秀的UI設(shè)計(jì)師，絕非只是畫(huà)好圖標(biāo)、完成界面設(shè)計(jì)這樣的基礎(chǔ)工作，而是從整個(gè)產(chǎn)品的用戶體驗(yàn)出發(fā)，從視覺(jué)到實(shí)際操作，為用戶提供最友好的使用體驗(yàn)。理解這個(gè)概念，我們才能確立真正的學(xué)習(xí)目標(biāo)和職業(yè)定位，朝著一名優(yōu)秀的UI設(shè)計(jì)師而努力。
參考文獻(xiàn)：
百度百科-UI設(shè)計(jì)
《術(shù)與道：移動(dòng)應(yīng)用UI設(shè)計(jì)必修課》- 余振華
《視界·無(wú)界：寫(xiě)給UI設(shè)計(jì)師的設(shè)計(jì)書(shū)》- 王涵
《UI設(shè)計(jì)精品必修課》- 常麗 李才應(yīng)
《用戶體驗(yàn)設(shè)計(jì)：100堂入門(mén)課》- Joel Marsh
《這才是用戶體驗(yàn)設(shè)計(jì)：人人都看得懂的產(chǎn)品設(shè)計(jì)書(shū)》- 李磊
從用戶人群劃分，像淘寶、美團(tuán)這樣以個(gè)人消費(fèi)者（Customer）使用為主的產(chǎn)品，稱為C端產(chǎn)品，屬于最常見(jiàn)的UI設(shè)計(jì)，稱為C端UI設(shè)計(jì)；而像有贊、微盟這樣的以服務(wù)企業(yè)（Bussiness）的產(chǎn)品，稱為B端產(chǎn)品，這就是B端設(shè)計(jì)師的由來(lái)，目前市場(chǎng)對(duì)B端UI設(shè)計(jì)師的需求比較大。
從使用設(shè)備劃分，從事電腦端設(shè)計(jì)的稱為WUI（Web User Interface），也就是網(wǎng)頁(yè)設(shè)計(jì)師，從事移動(dòng)端設(shè)計(jì)的稱為GUI（Web User Interface，圖形處理設(shè)計(jì)師），是我們普遍理解的UI設(shè)計(jì)師。
從設(shè)計(jì)對(duì)象劃分，UI設(shè)計(jì)可以分為電腦界面、APP界面、平板、智能手表、車載導(dǎo)航設(shè)備、智能電視界面、可穿戴設(shè)備界面、醫(yī)療及各種數(shù)碼機(jī)床等自動(dòng)化控制界面和微型嵌入式設(shè)備界面等類型。
從交互方式劃分，UI設(shè)計(jì)可以分為GUI和VUI，GUI就是我們上文提到的圖形處理設(shè)計(jì)師，而VUI（Voice User Interface）則是通過(guò)語(yǔ)音交互的界面設(shè)計(jì)，比如小度、天貓精靈。
從行業(yè)劃分，UI設(shè)計(jì)師可以分為不同行業(yè)的設(shè)計(jì)師，比如從事醫(yī)療產(chǎn)品的UI設(shè)計(jì)師，從事人工智能的UI設(shè)計(jì)師。
簡(jiǎn)單總結(jié)，未來(lái)隨著各種智能設(shè)備、人工智能、AR的發(fā)展，將會(huì)誕生出更多細(xì)分行業(yè)的UI設(shè)計(jì)師，不管是現(xiàn)在最火爆的B端設(shè)計(jì)師，還是車載設(shè)計(jì)師，未來(lái)面對(duì)日新月異的科技發(fā)展，只有理解UI設(shè)計(jì)的本質(zhì)和方法，才能應(yīng)付越來(lái)越多的不確定性。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
這是一篇醞釀了比較久的內(nèi)容了，來(lái)講解 B 端設(shè)計(jì)規(guī)范和組件庫(kù)的分享。這幾年網(wǎng)上出了不少類似的分享，雖然都寫(xiě)得很全，都還是覺(jué)得不夠滿意，缺了一點(diǎn)點(diǎn)細(xì)節(jié)。
所以我自己出一版，希望能幫助你們一次性解決這些問(wèn)題。
B 端項(xiàng)目設(shè)計(jì)中，設(shè)計(jì)規(guī)范和組件庫(kù)是一個(gè)繞不過(guò)去的檻。作為專業(yè)的 B 端設(shè)計(jì)師，必須有自己完成設(shè)計(jì)規(guī)范和組件庫(kù)的能力。
所以，首先我們要先理清楚什么是設(shè)計(jì)規(guī)范和組件庫(kù)。
設(shè)計(jì)規(guī)范是項(xiàng)目設(shè)計(jì)中要遵守的要求、細(xì)節(jié)、準(zhǔn)則，規(guī)定了諸如色彩、字體、柵格、間距、圓角等要素的規(guī)則，這些內(nèi)容都是可以在大量設(shè)計(jì)元素中應(yīng)用的細(xì)節(jié)。
換句話說(shuō)，設(shè)計(jì)規(guī)范就是提取在項(xiàng)目中會(huì)廣泛使用的要素，并進(jìn)行統(tǒng)一制定的過(guò)程，防止設(shè)計(jì)師在設(shè)計(jì)過(guò)程中隨意發(fā)揮，導(dǎo)致項(xiàng)目統(tǒng)一性的崩壞。
組件庫(kù)，是通過(guò)梳理項(xiàng)目中應(yīng)用到的按鈕、開(kāi)關(guān)、滑塊、日歷、下拉菜單等控件、組件的設(shè)計(jì)樣式、狀態(tài)、交互規(guī)則，再將它們統(tǒng)一復(fù)用到項(xiàng)目的不同頁(yè)面中去。
嚴(yán)格意義上來(lái)說(shuō)也是設(shè)計(jì)規(guī)范的一部分，是基礎(chǔ)規(guī)范的進(jìn)一步延伸，但還是單拎出來(lái)講。因?yàn)榻M件庫(kù)的應(yīng)用不僅僅是設(shè)計(jì)統(tǒng)一性的問(wèn)題，還融合了 ”組件化“ 的編程思路在里面。
組件化：將復(fù)雜系統(tǒng)拆分成不同功能獨(dú)立的模塊并重組的過(guò)程，且每個(gè)模塊包含對(duì)應(yīng)的狀態(tài)和屬性。
對(duì)于程序員來(lái)說(shuō)，一個(gè)項(xiàng)目就是若干功能模塊的合集，往往是先開(kāi)發(fā)這些功能模塊，再搭建對(duì)應(yīng)的完整頁(yè)面，而不是看一個(gè)頁(yè)面開(kāi)發(fā)一個(gè)頁(yè)面。
所以制定完善的組件庫(kù)，除了提升設(shè)計(jì)質(zhì)量外，還可以很好的提升開(kāi)發(fā)效率，推進(jìn)項(xiàng)目進(jìn)度。
設(shè)計(jì)規(guī)范和組件庫(kù)的搭建，就是一個(gè)由下至上的設(shè)計(jì)鏈路，通過(guò)對(duì)細(xì)節(jié)的制定來(lái)實(shí)現(xiàn)最終的項(xiàng)目表現(xiàn)層。可以借助廣為流傳的分子原理來(lái)理解：
任何成熟的 B 端項(xiàng)目都應(yīng)該具備自己的設(shè)計(jì)規(guī)范和組件庫(kù)，雖然有很多小團(tuán)隊(duì)在前期推進(jìn)項(xiàng)目時(shí)，因?yàn)楦鞣N問(wèn)題沒(méi)有搭建或落地設(shè)計(jì)規(guī)范，但并不代表他們?cè)谡腥说臅r(shí)候沒(méi)有要求。
在今天搭建 B 端項(xiàng)目規(guī)范時(shí)，新手還有一個(gè)普遍的問(wèn)題：
項(xiàng)目規(guī)范和開(kāi)源框架的規(guī)范有什么區(qū)別，如果選了一套開(kāi)源框架做設(shè)計(jì)，設(shè)計(jì)師不就不用做規(guī)范了？
初級(jí)設(shè)計(jì)師會(huì)這么想并不奇怪，因?yàn)橐?AntDesign 為首的開(kāi)源框架做的實(shí)在是太完善了，不僅囊括了整套的 Web 色彩系統(tǒng)，還有各類常用的、不常用的交互組件。
它們不僅僅提供了相關(guān)的設(shè)計(jì)源文件，也給開(kāi)發(fā)提供了對(duì)應(yīng)的代碼和接口，方便程序員應(yīng)用?？雌饋?lái)我們只要拼拼組件就可以和開(kāi)發(fā)無(wú)縫銜接了……
這顯然是不可能的，正是因?yàn)殚_(kāi)源框架太全面，可以產(chǎn)生無(wú)數(shù)種可能，我們才更應(yīng)該整理自己的項(xiàng)目規(guī)范。就像我前面已經(jīng)提到過(guò)的，設(shè)計(jì)規(guī)范是種 ”限制“，而不僅僅是設(shè)計(jì)風(fēng)格的簡(jiǎn)單沉淀。
比如，不管你選了哪套開(kāi)源框架，它提供了多少種色彩，你的項(xiàng)目都應(yīng)該有自己的項(xiàng)目主色，適當(dāng)?shù)妮o助色彩，而不可能把它的整套配色都應(yīng)用進(jìn)去。所以，即使顏色沒(méi)有跳出原有色彩系統(tǒng)，也要篩選出你用到的顏色進(jìn)行記錄。
再比如，開(kāi)源框架的很多控件，都提供了好幾種樣式和方案，并不是讓你全部都用進(jìn)去，而是選擇自己覺(jué)得合適的。所以你每個(gè)控件中選擇的方案，也需要做記錄，統(tǒng)一后續(xù)的頁(yè)面設(shè)計(jì)。
前面只是記錄選擇，都還比較簡(jiǎn)單，而最關(guān)鍵的問(wèn)題在于，開(kāi)源框架的組件不可能完美符合項(xiàng)目的全部需求。必然要在原有的基礎(chǔ)上作出大量細(xì)節(jié)的優(yōu)化，或者創(chuàng)建出新的業(yè)務(wù)組件出來(lái)，所以設(shè)計(jì)師還是要把這些內(nèi)容整理出來(lái)。
開(kāi)源框架，就是給我們提供了一個(gè)比較全面的設(shè)計(jì)范圍，讓我們站在別人的肩膀上做選擇，提高設(shè)計(jì)規(guī)范的制作效率，而并不是讓我們直接躺平，復(fù)制黏貼就可以了。
同時(shí)，設(shè)計(jì)規(guī)范和組件需要在軟件中進(jìn)行運(yùn)用，我們也同樣不能直接使用官方提供給我們的組件庫(kù)展開(kāi)自己的項(xiàng)目設(shè)計(jì)，要根據(jù)自己項(xiàng)目的規(guī)范獨(dú)立進(jìn)行搭建和使用。
下面，我們就要根據(jù)設(shè)計(jì)規(guī)范的內(nèi)容，來(lái)講解如何結(jié)合并使用即時(shí)設(shè)計(jì)、Figma 的相關(guān)功能。
之所以 UI 設(shè)計(jì)軟件能取代 PS 獨(dú)立發(fā)展，就是因?yàn)?UI 設(shè)計(jì)中包含大量需要復(fù)用和批量修改的功能。而這些功能和設(shè)計(jì)規(guī)范有非常大的聯(lián)系，也是 UI 設(shè)計(jì)中項(xiàng)目規(guī)范能被落地實(shí)踐的重要保障。
但因?yàn)?Figam 和即時(shí)等次時(shí)代 UI 設(shè)計(jì)軟件提供了越來(lái)越多的功能，用來(lái)支持設(shè)計(jì)規(guī)范的實(shí)踐，且這些功能可以相互交叉、重疊、組合，導(dǎo)致很多人在前期學(xué)習(xí)中會(huì)被軟件功能繞暈，導(dǎo)致很多人沒(méi)有理解這些功能意義和價(jià)值，更不知道如何在項(xiàng)目中具體實(shí)踐。
所以，我們先將這些功能整體理解一遍，再逐一來(lái)對(duì)它們的使用規(guī)則和應(yīng)用場(chǎng)景進(jìn)行拓展。
樣式功能是用來(lái)記錄圖層樣式設(shè)置的功能。簡(jiǎn)單點(diǎn)理解，就是記錄圖層右側(cè)的屬性設(shè)置的功能。正常我們選擇一個(gè)基礎(chǔ)圖層，軟件右側(cè)的屬性面板會(huì)將圖層樣式拆解成若干的類別，包括填充、描邊、字體、陰影、模糊。
而樣式功能，就是幫助設(shè)計(jì)師對(duì)不同的樣式類別進(jìn)行記錄和復(fù)用的過(guò)程，它會(huì)直接將該分類內(nèi)的相關(guān)參數(shù)值記錄下來(lái)，并進(jìn)行命名，方便后續(xù)的調(diào)用。
響應(yīng)式功能是讓圖層隨上級(jí)編組尺寸變動(dòng)而自適應(yīng)的功能，方便我們?cè)谛薷慕M件的大小時(shí)不用重新調(diào)節(jié)里面的元素細(xì)節(jié)。
例如設(shè)計(jì)一個(gè)卡片，可以通過(guò)響應(yīng)式的設(shè)置，讓頭部的元素左右對(duì)齊，下方的文本區(qū)域自動(dòng)拓展，保持卡片的內(nèi)間距不變。
或者頁(yè)面右下角懸浮按鈕，也可以通過(guò)響應(yīng)式設(shè)置始終處于頁(yè)面底部，這樣我們?cè)谠黾禹?yè)面高度的時(shí)候不用重新設(shè)置該元素的 Y 軸位置。
自動(dòng)布局功能，是通過(guò)前端布局思路來(lái)設(shè)置元素布局方法自動(dòng)排版功能，是 Figma 開(kāi)發(fā)的最重要的功能，也是讓 Sketch 不再成為 B 端設(shè)計(jì)首選的核心因素。
它的主要功能如根據(jù)內(nèi)容自動(dòng)完成尺寸變更，并列排版和順序的變更等。
自動(dòng)布局可以極大的提升設(shè)計(jì)效率，正因?yàn)樽詣?dòng)布局的出現(xiàn)，才讓項(xiàng)目組件庫(kù)可以真正被運(yùn)用和落地實(shí)踐起來(lái)。
組件功能在不同軟件有不同的叫法，如 Symbol、Component、Kits 等，主要是將指定的圖層或編組生成一個(gè)新的編組單位（類似智能對(duì)象），在后續(xù)設(shè)計(jì)中進(jìn)行復(fù)用。
例如設(shè)計(jì)一個(gè)按鈕、開(kāi)關(guān)，我們只要將它們生成為組件，就可以在后續(xù)設(shè)計(jì)中快速?gòu)慕M件庫(kù)里拖拽到設(shè)計(jì)頁(yè)面中，不用重新畫(huà)一遍，并且支持批量修改。
在組件應(yīng)用中，生成的第一個(gè)組件也叫父級(jí)組件，其它調(diào)用它的組件都是它的子組件，這是一個(gè)非常清晰的從屬關(guān)系。如果我們修改父級(jí)組件的內(nèi)容，所有子組件都會(huì)被統(tǒng)一修改。
組件的應(yīng)用除了這種最基礎(chǔ)的應(yīng)用以外，還包含了很多特殊的功能，如將低級(jí)組件合并成一個(gè)高級(jí)組件的嵌套，或者 Figma 前兩年發(fā)布的變體（Vriants），可以將一個(gè)組件的不同狀態(tài)聚合到一起，通過(guò)屬性面板來(lái)切換相關(guān)的狀態(tài)。
組件功能是 UI 類軟件最復(fù)雜的功能，它不僅本身設(shè)置很豐富，同時(shí)也可以結(jié)合樣式、響應(yīng)、自動(dòng)布局，讓本來(lái)死板的組件變得更靈活可控，應(yīng)對(duì)復(fù)雜的設(shè)計(jì)環(huán)境。
在軟件中，記錄樣式就是在對(duì)應(yīng)的屬性面板上 “創(chuàng)建” 并 “命名”，就將對(duì)應(yīng)設(shè)置數(shù)據(jù)轉(zhuǎn)化成一個(gè)指定名稱的記錄，方便我們記憶和調(diào)用。
比如，填充色中使用了兩種色彩相近的色彩和不同透明度，我們就可以使用中文命名來(lái)區(qū)分，其中 #2B6DCF 80% 叫 輔助色，#2B93CF 90% 叫 主色。
創(chuàng)建完成的填充色記錄，就會(huì)在對(duì)應(yīng)的屬性樣式列表中出現(xiàn)，之后就可以在對(duì)應(yīng)圖層的屬性中關(guān)聯(lián)該記錄了。
之后，所有關(guān)聯(lián)到該記錄的圖層屬性，都可以快速應(yīng)用該記錄內(nèi)的參數(shù)。如果我們?cè)跇邮降牧斜碇行薷脑撚涗浀臄?shù)值，那么所有關(guān)聯(lián)到該記錄的圖層就會(huì)一起被修改。
一定要牢記，目前的主流 UI 工具中，樣式是根據(jù)不同屬性類型記錄的。比如一個(gè)字體圖層，它的填充、字體、描邊、投影，是可以創(chuàng)建不同的樣式記錄的，各不影響。
而軟件 Sketch 的樣式邏輯，則是根據(jù)圖層類型來(lái)記錄的，比如矩形和字體，會(huì)記錄該圖層下所有樣式屬性的參數(shù)，且該記錄只能應(yīng)用在同類的圖層上（而 XD 只能記錄色彩和字體樣式…）。
這種做法雖然理解起來(lái)容易，但是會(huì)導(dǎo)致樣式數(shù)量大幅度增加。尤其是在字體上，變動(dòng)填充、描邊都要設(shè)置一個(gè)新的樣式，這在實(shí)際項(xiàng)目中的靈活性是非常差的。
而即時(shí)設(shè)計(jì)、Figma 則不考慮圖層類型，只關(guān)注屬性類型。類似前端的樣式表中 “類（Class）” 的應(yīng)用，每個(gè)類有不同的樣式參數(shù)，只要定義了類的命名和屬性、參數(shù)，那么不同 Div （即圖層）就可以自由組合這些樣式記錄了。
比如色彩 color、陰影 shadow、描邊 board 各定義了1、2、3 三種樣式類，那么就可以像下方案例中自由組合：
<Div Class = “ color2 shadow1 board3 ”> </div>
<Div Class = “ color1 shadow3 board2 ”> </div>
所以，樣式功能可以幫助我們?cè)谇捌诳焖俅罱ɑA(chǔ)視覺(jué)規(guī)范內(nèi)容，將規(guī)范中的配色、字體、投影、模糊等參數(shù)整理進(jìn)樣式表中，方便我們后續(xù)的快速調(diào)用和統(tǒng)一修改。
響應(yīng)式是我們前面做過(guò)很多期分享的課題了，基于 BootStrap 的完整響應(yīng)式功能確實(shí)非常強(qiáng)大，可以通過(guò)柵格布局來(lái)實(shí)現(xiàn)豐富的響應(yīng)方式。
雖然 UI 軟件中也提供了 ”響應(yīng)式“ 這樣的功能，但它可以實(shí)現(xiàn)的效果非常有限。用一句話概括就是：
“圖層基于父級(jí)畫(huà)板 Frame 的匹配邏輯”
比如我們先創(chuàng)建一個(gè)畫(huà)板，然后再置入相關(guān)的圖層，那么這些圖層就可以啟用響應(yīng)式規(guī)則。包含間距固定、居中對(duì)齊、等比縮放這三種響應(yīng)規(guī)則。
間距固定的意思，就是圖層基于父級(jí)畫(huà)板的某間距數(shù)值是固定的，不管畫(huà)布尺寸怎么變動(dòng)，圖層和畫(huà)布的對(duì)應(yīng)間距都是保持一致的。比如常規(guī)的某一方向間距固定。
比如在模塊上的標(biāo)題欄，就可以將欄目設(shè)置成一個(gè) Frame，然后標(biāo)題相關(guān)元素左間距對(duì)齊，更多圖標(biāo)右間距對(duì)齊，之后變更標(biāo)題欄的寬，圖層的對(duì)齊關(guān)系就是不變的。
而設(shè)置左右、上下間距同時(shí)對(duì)齊，則是圖層會(huì)隨畫(huà)布的尺寸變動(dòng)修改自身的寬高來(lái)滿足。
居中模式則是圖層根據(jù)畫(huà)布的大小進(jìn)垂直、水平方向的對(duì)齊，忽略間距數(shù)值。
最后一個(gè)縮放的設(shè)置，用起來(lái)和兩側(cè)間距對(duì)齊很接近，也是放大縮小畫(huà)布圖層會(huì)跟著一起變動(dòng)，但它響應(yīng)的邏輯是依據(jù)比例，而不是間距。這個(gè)設(shè)置在實(shí)際項(xiàng)目中很難派上用場(chǎng)。
過(guò)往的設(shè)計(jì)軟件中，父集尺寸變更，下級(jí)元素只能機(jī)械的執(zhí)行縮放效果。而響應(yīng)式設(shè)置就是避免這種僵硬的效果，向真實(shí)的網(wǎng)頁(yè)適配方式看齊。
同時(shí)，這種父集對(duì)齊的邏輯是可以進(jìn)行嵌套使用的，比如剛才的標(biāo)題欄，可以將這個(gè)畫(huà)板再置入到整個(gè)卡片畫(huà)板之下，并對(duì) “標(biāo)題欄畫(huà)板” 創(chuàng)建頂部對(duì)齊，左右間距對(duì)齊，那么該畫(huà)板本身的尺寸不管怎么變動(dòng)，頭部標(biāo)題欄頂部位置固定，寬度間距和父集統(tǒng)一，標(biāo)題欄下方的元素也會(huì)左右對(duì)齊。
所以，將一個(gè)畫(huà)板中的元素響應(yīng)方式設(shè)置好，可以節(jié)省我們很多時(shí)間，不用再因?yàn)楦讣爻叽缧薷亩粋€(gè)圖層一個(gè)圖層修改下級(jí)元素的尺寸和位置。
在后續(xù)生成組件前，我們就要優(yōu)先完成畫(huà)板下方的響應(yīng)設(shè)置，這樣就能確保該組件支持靈活的調(diào)節(jié)和布局。比如用上方的卡片，就可以快速搭建一個(gè)表盤(pán)頁(yè)面的基本框架，我們要做的就是拖拽畫(huà)板到一個(gè)合適的尺寸即可，無(wú)需調(diào)節(jié)下級(jí)圖層。
但需要注意的事，即時(shí)設(shè)計(jì)和 Figma 觸發(fā)響應(yīng)式的設(shè)置是元素需要處于畫(huà)板 Frame 之下，而不是編組 Group 中， Sketch、XD 因?yàn)闆](méi)有 Frame 的概念，所以使用編組就可以應(yīng)用響應(yīng)式設(shè)置，這個(gè)區(qū)別一定要牢記。 同時(shí)，響應(yīng)式雖然可以完成很多高效的適配，但是它的局限性是無(wú)法打破的，例如無(wú)法實(shí)現(xiàn) 3 列以上的卡片列表等間距放大，或者隨寬度增加生成新列下方卡片補(bǔ)位。
自動(dòng)布局 Autolayout 作為一個(gè)自動(dòng)排版功能，使用場(chǎng)景包含兩類，父子級(jí)響應(yīng)和依序排列。它們有各自的生成條件。
首先需要一個(gè)矩形圖層作為背景，并將其它下級(jí)圖層置入到矩形背景中去，全選后點(diǎn)擊 “自動(dòng)布局“ 按鈕即可生成父子級(jí)響應(yīng)。如果圖層沒(méi)有完全置入矩形中或沒(méi)有相交，那么就會(huì)生成一個(gè)依序排列的自動(dòng)布局出來(lái)。
創(chuàng)建自動(dòng)布局會(huì)生成一個(gè)新的 “特殊編組”，用來(lái)收納下級(jí)圖層，它在圖層列表中會(huì)有新的圖標(biāo)。
父子級(jí)響應(yīng)布局中，背景的矩形圖層會(huì)被自動(dòng)移除，樣式被繼承到自動(dòng)布局的編組上，針對(duì)該編組層的屬性設(shè)置，就等同于原先的背景矩形設(shè)置（和畫(huà)板 Frame 圖層邏輯一樣）。
這類布局最常應(yīng)用于按鈕控件上，可以讓按鈕的寬度隨文本寬度變化。
但光靠創(chuàng)建這個(gè)效果顯然是無(wú)法完整解釋自動(dòng)布局的，我們就必須從前端的邏輯，來(lái)理解這種包含父子層級(jí)的元素如何實(shí)現(xiàn)自動(dòng)布局。
首先就是前端環(huán)境中，很多控件、組件本身的尺寸是無(wú)法直接寫(xiě)死的，它們是隨內(nèi)容自動(dòng)調(diào)節(jié)的。而自動(dòng)布局右側(cè)的設(shè)置面板中的田字格一欄，旁邊會(huì)有寬度和高度設(shè)置，默認(rèn)都是 “自動(dòng) Auto”，這就是說(shuō)它們會(huì)隨內(nèi)容寬高進(jìn)行響應(yīng)。
比如上方的按鈕，它實(shí)現(xiàn)的邏輯就是：
按鈕寬 = 元素內(nèi)容寬 + 左右間距
按鈕高 = 元素內(nèi)容高 + 上下間距
這種情況是父層級(jí)基于子層級(jí)的響應(yīng)，應(yīng)用于無(wú)法確定父級(jí)圖形尺寸的場(chǎng)景，如按鈕、標(biāo)簽、單元格、瀑布卡片等。
但前端中的不確定性并不是只有這一種，還可以反過(guò)來(lái)，子圖層大小不確定，需要它們?nèi)ロ憫?yīng)父級(jí)圖層的尺寸變更。
比如一些文本卡片，會(huì)應(yīng)用在不同的頁(yè)面中，且根據(jù)應(yīng)用的場(chǎng)景會(huì)有寬高的調(diào)節(jié)，所以需要下級(jí)的文本區(qū)域可以跟隨上級(jí)尺寸響應(yīng)。
我們就需要把父級(jí)布局設(shè)置成 “固定寬/高”。還要選中子圖層，在它的自動(dòng)布局選項(xiàng)中選擇 “自適應(yīng)”，來(lái)滿足這個(gè)相反的需求。
如果子圖層沒(méi)有設(shè)置自適應(yīng)，那么它就不會(huì)直接隨著父級(jí)圖層變更自己的尺寸。但還是有針對(duì)子元素的響應(yīng)設(shè)置 —— 對(duì)齊模式。
在父級(jí)布局設(shè)置中，有一個(gè)網(wǎng)點(diǎn)模塊，可以設(shè)置下級(jí)圖層的對(duì)齊模式。當(dāng)下級(jí)圖層不處于自適應(yīng)模式時(shí)，則對(duì)齊可以修改下級(jí)元素的對(duì)齊方向，即前面響應(yīng)式設(shè)置中的 “間距固定”。
前面我們演示的案例都只有一個(gè)子圖層，如果出現(xiàn)多個(gè)子圖層的話，自動(dòng)布局也可以幫我們進(jìn)行調(diào)節(jié)，除對(duì)齊外還包含子圖層排列方式、分布方式，而這就是依序排列的布局模式。
排列方式就是多個(gè)子圖層橫排還是豎排的設(shè)置。
分布方式，則是這些子圖層布局的位置怎么定，默認(rèn)包含固定間距和自適應(yīng)兩種。
固定間距即子元素排列的間距保持一致，在右側(cè)的輸入框中可以設(shè)置間距數(shù)值，也可以結(jié)合對(duì)齊模式來(lái)設(shè)置整體的對(duì)齊方向。
而自適應(yīng)，則是在父級(jí)區(qū)域內(nèi)進(jìn)行等分，這個(gè)等分的邏輯比較特別，需要左右各有一個(gè)子圖層靠到頭，新增的圖層在這個(gè)基礎(chǔ)上進(jìn)行 “等間距分布”。
依序排列的優(yōu)勢(shì)，除了把現(xiàn)有的子圖層快速布局以外，還可以用拖拽、鍵盤(pán)調(diào)整元素順序?；蛘邚耐獠客蟿?dòng)某個(gè)圖層到該區(qū)域中，就可以插入序列，成為下級(jí)圖層之一。
前面兩種布局模式，可以解決各種 UI 設(shè)計(jì)中的細(xì)節(jié)設(shè)置問(wèn)題，理解起來(lái)也并不難，只要自己去操作一下就能學(xué)會(huì)。而真正讓人頭疼的，是自動(dòng)布局可以相互嵌套，并混合這兩種模式，在復(fù)雜的頁(yè)面設(shè)計(jì)場(chǎng)景和組件模塊中靈活應(yīng)用。
下面我們通過(guò)一個(gè)模態(tài)對(duì)話框 Modal Dialog 案例來(lái)進(jìn)行說(shuō)明。這個(gè)對(duì)話框會(huì)包含3種不同的寬度規(guī)格，且對(duì)話內(nèi)容不確定，可能會(huì)字?jǐn)?shù)很多包含很多行的高度。
想要用自動(dòng)布局實(shí)現(xiàn)一個(gè)滿足需求的對(duì)話框，我的建議是先學(xué)會(huì)拆分里面的下級(jí)模塊，通過(guò)完成下級(jí)模塊的設(shè)置后再進(jìn)行最終的合并調(diào)節(jié)。
在這個(gè)對(duì)話框中， 包含三個(gè)模塊，頂部標(biāo)題欄、中間內(nèi)容區(qū)域，底部操作欄。
首先從頂部標(biāo)題欄開(kāi)始，我們隨意創(chuàng)建個(gè) 280px * 44px 的矩形，然后再置入標(biāo)題和圖標(biāo)到矩形中。之后全選它們創(chuàng)建成自動(dòng)布局，然后設(shè)置父層級(jí)內(nèi)間距，且改成寬度固定、分布自適應(yīng)，就可以獲得一個(gè)可以隨意修改寬度的標(biāo)題欄了。
然后就是內(nèi)容區(qū)域，本質(zhì)上就是一個(gè)文本區(qū)域，所以我們拖拽一個(gè)文本區(qū)域出來(lái)，設(shè)置好對(duì)應(yīng)的參數(shù)和填充一點(diǎn)文本即可。
而底部操作欄，則在一開(kāi)始做好兩個(gè)按鈕（可以使用自動(dòng)布局做）和背景以后，就可以進(jìn)行合并，只是父級(jí)元素上的設(shè)置要改成固定寬度和右對(duì)齊，并設(shè)置布局間距（按鈕間距）。
這三個(gè)模塊完成以后，我們?cè)龠x中它們進(jìn)行自動(dòng)布局合并，把它們?cè)O(shè)置成豎排模式，再添加背景色和排列間距，就可以實(shí)現(xiàn)出一個(gè)正常的對(duì)話框效果。
到這一步，如果我們修改對(duì)話框整體的寬度，或者輸入多行的文本，都無(wú)法達(dá)到預(yù)期的效果，所以還要在這個(gè)基礎(chǔ)上進(jìn)一步的調(diào)整。
首先是寬度適應(yīng)，我們要先將最上級(jí)的自動(dòng)布局改成 “固定寬度”，然后將下級(jí)圖層都改為 “自適應(yīng)”，這樣我們?cè)黾咏M件的寬，下方布局就會(huì)立即響應(yīng)，且推導(dǎo)到更下級(jí)的圖層中。
為了滿足文字寬度隨父級(jí)響應(yīng)，高度影響父級(jí)高度，就要將頂部的自動(dòng)布局改成 “高度適配”，再將下級(jí)的文本改成 “寬度自適應(yīng)”、“自動(dòng)高度”，然后，我們就可以隨意拖動(dòng)這個(gè)自動(dòng)布局的寬，和添加任意的文本內(nèi)容了。
完成這個(gè)基本的版本以后，我們?cè)俑鶕?jù)項(xiàng)目需要的三個(gè)寬度，直接將它復(fù)制成 3 份，每份直接設(shè)置對(duì)應(yīng)的寬度出來(lái)，就可以作為后續(xù)的 “原始組件” 在項(xiàng)目中進(jìn)行快速引用了。
在這個(gè)案例中，我們前后嵌套了若干層的自動(dòng)布局，每層自動(dòng)布局的上下級(jí)會(huì)有各自的響應(yīng)關(guān)系，需要我們逐一進(jìn)行確認(rèn)。并且，細(xì)心的同學(xué)應(yīng)該也發(fā)現(xiàn)，這里面有很多設(shè)置似乎和前面的響應(yīng)式設(shè)置非常類似，那把一些下級(jí)布局從一開(kāi)始就做成響應(yīng)式的編組行不行？
答案是可以的…… 響應(yīng)式設(shè)置和自動(dòng)布局，本質(zhì)上都是為了節(jié)省我們操作時(shí)間而設(shè)計(jì)的功能，我們要從實(shí)際設(shè)計(jì)的對(duì)象出發(fā)，選擇合理的功能來(lái)實(shí)現(xiàn)最終的效果。而不是只能使用自動(dòng)布局，或者只能使用響應(yīng)式。
也不要因?yàn)榱私饬隧憫?yīng)式包含了非常強(qiáng)大的自適應(yīng)功能，而認(rèn)為項(xiàng)目中任何組件、頁(yè)面，都要全由它們組成。在需要頻繁優(yōu)化頁(yè)面內(nèi)容、調(diào)整設(shè)計(jì)需求的項(xiàng)目里，過(guò)度嵌套的自動(dòng)布局會(huì)讓設(shè)計(jì)文件的 “熵” 值無(wú)限增加，會(huì)產(chǎn)生更多復(fù)雜的、沒(méi)有效率的問(wèn)題。
相信引用過(guò) Ant、TDesign 等組件庫(kù)文件進(jìn)行設(shè)計(jì)的同學(xué)應(yīng)該都深有體會(huì)……
至于怎么用才好，沒(méi)有標(biāo)準(zhǔn)的答案，就需要未來(lái)大家自己去積累相關(guān)經(jīng)驗(yàn)了。
有了前面響應(yīng)式和自動(dòng)布局的認(rèn)識(shí)，我們就要進(jìn)入到組件功能的具體應(yīng)用上了。
組件的創(chuàng)建，首先要選中對(duì)應(yīng)的設(shè)計(jì)元素，可以是單個(gè)圖層，也可以是編組、自動(dòng)布局層，然后點(diǎn)擊生成組件按鈕就可以創(chuàng)建出一個(gè) “原始” 組件。
在即時(shí)設(shè)計(jì)中，這個(gè)組件叫 “引用組件”，從該組件復(fù)制、引用出來(lái)的副本叫做 “實(shí)例組件”。它們具有明確的從屬關(guān)系。
在這個(gè)關(guān)系中，引用組件是完全可編輯修改的，只要修改它就可以統(tǒng)一修改關(guān)聯(lián)的所有副本樣式。
但由引用組件創(chuàng)建出來(lái)的副本，卻不能任意編輯，我們不能修改它下級(jí)圖層的尺寸、位置、順序。但是，副本的編組大小、圖層色彩、文字內(nèi)容往往會(huì)有很多特殊的調(diào)節(jié)需求，所以目前主流的 UI 軟件都支持了副本組件的尺寸修改、色彩編輯和文本內(nèi)容編輯，讓組件的使用更靈活。
以上就是組件使用的最基本邏輯，更進(jìn)一步，組件作為一個(gè)編組，所包含的下級(jí)圖層的邏輯都會(huì)被保留下來(lái)，例如樣式設(shè)置、響應(yīng)式設(shè)置、自動(dòng)布局邏輯。如果一個(gè)編組原本就已經(jīng)創(chuàng)建好了這些規(guī)則，那么當(dāng)它被創(chuàng)建成組件，不管是引用組件還是副本，都會(huì)繼承這些設(shè)置。
比如上一小節(jié)中的通知彈窗案例，設(shè)置好自動(dòng)布局再創(chuàng)建成引用組件以后，生成的副本就可以靈活的進(jìn)行調(diào)整和修改文本內(nèi)容。
除了樣式、響應(yīng)、自動(dòng)布局外，組件也可以包含組件。我們前面說(shuō)過(guò)，按原子核的結(jié)構(gòu)來(lái)講，一個(gè)復(fù)雜的組件是由若干基礎(chǔ)元素和控件組合而成。比如上方這個(gè)案例，就由多個(gè)模塊、文本區(qū)域和按鈕組成。
如果我們提前將按鈕、圖標(biāo)等創(chuàng)建成引用組件，那么最終整個(gè)大的編組再創(chuàng)建成引用組件也是沒(méi)有問(wèn)題的，原來(lái)的組件格式并沒(méi)有被抹消。
但有個(gè)細(xì)節(jié)值得注意，就是一個(gè)引用組件下方包含的組件只能是 —— 副本。如果剛才我們將按鈕創(chuàng)建成引用組件，那么上級(jí)編組再創(chuàng)建的引用組件就會(huì)自動(dòng)將這些按鈕轉(zhuǎn)換成副本，并在畫(huà)布周圍生成新的引用組件。
所以這個(gè)順序也預(yù)示了，組件的嵌套是由下而上的，我們需要先創(chuàng)建低級(jí)的引用組件，再用它的副本逐步去組合更復(fù)雜的引用組件。這在后面的章節(jié)會(huì)進(jìn)一步做出說(shuō)明。
創(chuàng)建引用組件，除了在畫(huà)布中它的描邊色彩不一樣，圖層中的圖標(biāo)改變了以外，還會(huì)出現(xiàn)在一個(gè)新的位置中 —— 組件管理面板。
任何創(chuàng)建的組件都會(huì)被生成到左側(cè)的組件欄目面板中，只要從那里拖拽就可以置入當(dāng)前畫(huà)布中，方便我們調(diào)用和查看。
看起來(lái)雖然很簡(jiǎn)單，但是需要我們管理的細(xì)節(jié)卻很多。首先就是這個(gè)列表是一個(gè)包含層級(jí)關(guān)系的樹(shù)樁結(jié)構(gòu)目錄，是允許我們對(duì)組件的層級(jí)進(jìn)行結(jié)構(gòu)自定義的。
當(dāng)我們創(chuàng)建一個(gè)引用組件的時(shí)候，如果它處于一個(gè)畫(huà)板中，那么創(chuàng)建后它會(huì)在組件面板中保留該組件的默認(rèn)文件路徑：
頁(yè)面 Page / 畫(huà)板 Frame / 組件 Compoent
如果我們?cè)诓煌?yè)面和不同畫(huà)板中創(chuàng)建引用組件，那么該面板的目錄一定是特別混亂無(wú)序的。所以為了創(chuàng)建出符合正常分類使用習(xí)慣的組件目錄，就要做出調(diào)整。
首先就是建議在項(xiàng)目文件中創(chuàng)建一個(gè)獨(dú)立的頁(yè)面 Page 用來(lái)存放引用組件，任何新增的引用組件我們都需要將它置入到該頁(yè)面中。且不要將引用組件直接置入到畫(huà)板中，這樣它就不會(huì)生產(chǎn)包含畫(huà)板的層級(jí)出來(lái)。
然后，我們就可以在文件命名中，使用正斜杠 Slash 符號(hào) “/” 作為層級(jí)劃分依據(jù)。比如下面的案例，包含相同上級(jí)結(jié)構(gòu)的組件會(huì)被聚合到一個(gè)目錄層級(jí)中：
這種命名結(jié)構(gòu)帶來(lái)的另一個(gè)好處，就是處于同一個(gè)目錄層級(jí)下的組件，在屬性面板中可以進(jìn)行快速的切換。尤其是一些相近的組件要做替換不用再在樹(shù)樁列表中重新找一遍，直接通過(guò)下拉菜單替換即可。
使用命名方式來(lái)梳理組件列表，完成有邏輯性、清晰的組件目錄，可以極大地提升組件的利用率和效率。但命名必然不是一邊創(chuàng)建組件一邊憑感覺(jué)命名的，而是一開(kāi)始就要在外部完成的，例如通過(guò)思維導(dǎo)圖的方式制定出結(jié)構(gòu)大綱，才能保證最終效果符合預(yù)期。
組件的應(yīng)用中，除了不同組件的引用外，過(guò)去最讓我們頭痛的就是同一個(gè)組件的不同狀態(tài)。比如一個(gè)簡(jiǎn)單的按鈕，就包含非常多的類型，默認(rèn)、懸浮、按壓、點(diǎn)過(guò)、禁用、讀取等等。
為了在項(xiàng)目中可以使用組件的不同狀態(tài)，就需要我們?cè)诿舷鹿Ψ?，比如?
就是用前面提到的右側(cè)下拉菜單，來(lái)完成同一組件的不同狀態(tài)切換。理論上這么實(shí)現(xiàn)是沒(méi)有問(wèn)題的，但在實(shí)踐過(guò)程中，不僅組件列表的數(shù)量要大大增加，且下拉菜單第一步只改狀態(tài)顯得非常局促……
所以，從 Figma 開(kāi)始推出了變體 Variants 功能，來(lái)更好地應(yīng)對(duì)同一組件不同狀態(tài)的高效應(yīng)用。目前該功能已經(jīng)在線上 UI 設(shè)計(jì)軟件中普及。
在即時(shí)設(shè)計(jì)中，只要?jiǎng)?chuàng)建了引用組件，那么選中它后右側(cè)就會(huì)有 “變體” 一欄，點(diǎn)擊它就可以針對(duì)該組件創(chuàng)建出變體效果。
變體中原來(lái)的組件一分為二，并不是完全生成出一個(gè)全新的組件，而是在這個(gè)組件的概念下創(chuàng)建了一個(gè)新的狀態(tài)出來(lái)，在組件列表面板中沒(méi)有生成任何新的內(nèi)容。
但是當(dāng)我們?cè)偬砑右粋€(gè)該組件的副本以后，就會(huì)發(fā)現(xiàn)它的右側(cè)多了一個(gè)條目和下拉菜單，通過(guò)這個(gè)下拉菜單就可以切換剛才變體內(nèi)的不同組件。
比如我們?cè)谧凅w內(nèi)選中兩個(gè)組件，在右側(cè)變體的下拉菜單中可以點(diǎn)擊修改命名，將它們分別改成 “默認(rèn)” 和 “選中”，再修改對(duì)應(yīng)的樣式。然后再應(yīng)用同一個(gè)副本，就可以看見(jiàn)下拉菜單的內(nèi)容也替換成了“默認(rèn)” 和 “選中”，通過(guò)選擇不同的文字，就可以切換成對(duì)應(yīng)的組件樣式。
這個(gè)功能可以很方便的切換組件的不同狀態(tài)，但如果它僅僅支持到這一步，那確實(shí)和使用命名編組的方法沒(méi)有本質(zhì)區(qū)別。真正讓變體產(chǎn)生價(jià)值的，就在于同一組件的多屬性、多狀態(tài)支持。
還用按鈕舉例，比如一個(gè)按鈕包含 3 種樣式：純文字、純圖標(biāo)和文字加圖標(biāo)，再包含 3 種狀態(tài)：默認(rèn)、懸浮、點(diǎn)擊，還有淺色和深色模式……
也就意味著，按鈕包含樣式、狀態(tài)、色彩三種屬性，每個(gè)屬性中的值可以相互結(jié)合，那么總共就要設(shè)計(jì)出 18 個(gè)對(duì)應(yīng)的按鈕出來(lái)。
如果我們使用變體每個(gè)樣式命名一個(gè)名字，那么下拉菜單有12個(gè)選項(xiàng)選起來(lái)也是很頭疼的。所以，變體允許我們自定義組件屬性和值，幫助我們更好的歸類和選擇組件樣式。
所以，在變體面板中，我們可以在更多選項(xiàng)中選擇添加分類就添加對(duì)應(yīng)的屬性內(nèi)容，添加出 3 個(gè)分類后，通過(guò)雙擊修改它們的名字為 ”樣式“、”狀態(tài)“、”色彩“。
有了屬性，變體下方的組件命名就會(huì)根本變更。如下圖所示，默認(rèn)一次顯示屬性值，雙擊則可以查看對(duì)應(yīng)的屬性名和值。
即變體的基本命名語(yǔ)法為 —— 屬性1 = 對(duì)應(yīng)類型, 屬性2 = 對(duì)應(yīng)類型, 屬性3 = 對(duì)應(yīng)類型。
我們就可以通過(guò)這種語(yǔ)法方式完成對(duì)上方按鈕的統(tǒng)一命名，如：
然后，將這些組件統(tǒng)一添加到同一個(gè)變體下，之后創(chuàng)建的副本，就可以在右側(cè)變體面板中進(jìn)行多維度的選項(xiàng)操作了。
具體的變體設(shè)置，分類、值的設(shè)置，可以自己在軟件中摸索，我就不演示了。這里再額外提一個(gè)功能，就是對(duì)值的設(shè)置上，還可以應(yīng)用 “布爾” 的規(guī)則，即選項(xiàng)中只包含 “是” 或 ’否“。
如果我們?cè)谏实闹抵兄皇褂?”是，否“、”yes，no“、”開(kāi)，關(guān)“ 等反義詞，那么副本變體選項(xiàng)中就會(huì)啟用開(kāi)關(guān)按鈕，來(lái)替代原本的下拉菜單，提升操作的效率。
變體的使用可以很好的減少組件面板中組件的數(shù)量，提升組件狀態(tài)切換的效率。如果一個(gè)組件創(chuàng)建變態(tài)后被嵌套在另一個(gè)組件之下，那么這個(gè)復(fù)合組件也可以快速修改下級(jí)組件的變體類型。
雖然變體功能看起來(lái)非常強(qiáng)大，但它并不能適用所有場(chǎng)景，因?yàn)樾薷钠饋?lái)影響的要素過(guò)多。它更適用于基礎(chǔ)的控件和組件類型。如果針對(duì)復(fù)雜組件，尤其是包含多層組件嵌套的場(chǎng)景，往往使用命名的方式會(huì)比使用變體更有效率，這就需要大家自己在項(xiàng)目中積累經(jīng)驗(yàn)做判斷。
通過(guò)前面的功能，就可以完成組件庫(kù)的對(duì)應(yīng)設(shè)置了，你可以在這個(gè)項(xiàng)目文件中調(diào)用這些組件完成項(xiàng)目。
但實(shí)際項(xiàng)目中，組件庫(kù)的使用可不能被局限在一個(gè)項(xiàng)目文件里，我們往往會(huì)創(chuàng)建很多個(gè)項(xiàng)目文件，來(lái)設(shè)計(jì)不同的流程、版本、模塊。于是，這些不同的文件都需要調(diào)用同一個(gè)樣式和組件庫(kù)。
所以，要讓包含規(guī)范的文件能被其它文件引用，就需要我們?cè)诮M件面板中，點(diǎn)擊設(shè)計(jì)庫(kù)按鈕，在彈窗中點(diǎn)擊 ”發(fā)布“，將它創(chuàng)建成一個(gè)設(shè)計(jì)資源庫(kù)。這樣，我們?cè)趧e的文件中再次打開(kāi)這個(gè)面板，就可以看到這個(gè)資源的開(kāi)關(guān)，點(diǎn)擊開(kāi)關(guān)后，該文件就能調(diào)用里面的樣式和組件了。
在項(xiàng)目中，需要先新建團(tuán)隊(duì)并邀請(qǐng)相關(guān)成員，然后再創(chuàng)建設(shè)計(jì)資源庫(kù)，那么其他設(shè)計(jì)師才可以引用該資源來(lái)完成相關(guān)頁(yè)面的設(shè)計(jì)。
至于每次原文件更新并落實(shí)到引用的其它文件這些細(xì)節(jié)操作，就需要大家自己去實(shí)踐了。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
導(dǎo)語(yǔ)
近年三維表現(xiàn)已經(jīng)越來(lái)越多的融入到各種商業(yè)設(shè)計(jì)當(dāng)中，在電商、品牌、UI、影視等各個(gè)領(lǐng)域都有廣泛的運(yùn)用。其中一個(gè)關(guān)鍵因素是C4D這款軟件的出現(xiàn)，大大降低了3D設(shè)計(jì)的學(xué)習(xí)門(mén)檻。
C4D相對(duì)于專業(yè)性更強(qiáng)、功能較為復(fù)雜的3DMax、Maya、ZBrush等軟件，界面更加簡(jiǎn)潔友好，對(duì)于沒(méi)有接觸過(guò)3D的的小白，學(xué)習(xí)成本更低。配合Octane、Redshift等渲染器，可以很快做出強(qiáng)視覺(jué)表現(xiàn)力的效果。憑借這種操作友好、易出效果的特性，C4D很快成為了近年最流行的3D設(shè)計(jì)軟件之一。
本文結(jié)合作者自身的經(jīng)驗(yàn)整理了一波自學(xué)的思路和技巧，希望能在大家學(xué)習(xí)C4D的過(guò)程中有所幫助。
前言
相信很多沒(méi)有三維設(shè)計(jì)基礎(chǔ)的小白，剛接觸到C4D時(shí)會(huì)有無(wú)從下手的感覺(jué)，面對(duì)各種形形色色的命令菜單和工具面板，內(nèi)心是這樣的：
其實(shí)大可不必?fù)?dān)心，不同方向的設(shè)計(jì)師可以有不同的側(cè)重點(diǎn)，只要掌握自身職業(yè)需要的模塊，并不需要學(xué)會(huì)所有的功能。追求大而全反而難度大效率低，容易產(chǎn)生挫敗感從而被勸退。
所以這里建議的C4D學(xué)習(xí)思路是：結(jié)合自身的職業(yè)方向，先明確要學(xué)習(xí)的側(cè)重點(diǎn)，集中精力突破，然后再根據(jù)新的需要逐步學(xué)習(xí)更多即可。
學(xué)習(xí)過(guò)程則大體上分為入門(mén)、上手、實(shí)戰(zhàn)三個(gè)階段。
Part 1. 入門(mén)
1.1 明確學(xué)習(xí)方向
C4D大體可以分為建模、渲染、角色、動(dòng)畫(huà)、運(yùn)動(dòng)圖形、動(dòng)力學(xué)這幾個(gè)模塊，每個(gè)模塊都可以看成是獨(dú)立的知識(shí)體系，往下又有更具體的細(xì)分。真要全面仔細(xì)鉆研的話，需要投入很多的時(shí)間精力，這也是讓很多初學(xué)者無(wú)從下手甚至望而卻步的原因。
所以除了建模和渲染是繞不開(kāi)的基本模塊，我們可以將另外幾個(gè)看成是比較具有針對(duì)性的模塊，具體需要著重學(xué)習(xí)哪一部分，則需要先明確最適合自己的學(xué)習(xí)方向：
比如你是電商設(shè)計(jì)師，平時(shí)的工作內(nèi)容主要是制作各種產(chǎn)品高大上的渲染圖以及推廣視頻，那除了基本的建模與渲染，還可以著重學(xué)習(xí)運(yùn)動(dòng)圖形，做出各種酷炫的商業(yè)廣告視頻；
如果你是IP設(shè)計(jì)師，則需著重學(xué)習(xí)角色模塊，在完成靜態(tài)角色的建模渲染后，綁骨骼刷權(quán)重也是必須掌握的知識(shí)點(diǎn)，才能做出豐富的動(dòng)作和表情，讓角色生動(dòng)起來(lái)；
總之，不同職業(yè)方向，甚至項(xiàng)目的不同時(shí)期，都有不同的學(xué)習(xí)側(cè)重點(diǎn)，這里需要每個(gè)人自己去判斷。
建模和渲染則是最常用的兩個(gè)模塊，無(wú)需有職業(yè)方向的針對(duì)性，都應(yīng)該在前期優(yōu)先學(xué)習(xí)，并且做到基本掌握甚至熟練運(yùn)用。
常規(guī)的步驟是先學(xué)習(xí)建模，再學(xué)習(xí)渲染；不過(guò)建模比較枯燥，渲染則是最出效果也是最提升學(xué)習(xí)信心的環(huán)節(jié)，我認(rèn)為根據(jù)個(gè)人喜好，先學(xué)渲染再學(xué)建模，反而是更推薦的學(xué)習(xí)順序。
1.2 選擇學(xué)習(xí)資源
選擇學(xué)習(xí)資源方面，目前網(wǎng)絡(luò)的免費(fèi)教程十分豐富，依靠教程的學(xué)習(xí)足以讓你初期快速的上手，新手在選擇教程方面盡量以體系較為完整，演示時(shí)軟件版本較好的原則，如英文水平較好建議去外網(wǎng)看看各路大神的教程，原汁原味的學(xué)習(xí)；另外考慮到外網(wǎng)資源的機(jī)翻和獲取難度的原因，這里主要推薦一些國(guó)內(nèi)網(wǎng)絡(luò)能獲取自學(xué)資源：
建模
建模方面在學(xué)習(xí)階段主要注重C4D的工具使用和基礎(chǔ)技巧，這里推薦幾個(gè)免費(fèi)教程。
1、https://www.bilibili.com/video/BV1Cb411T7Dc?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276
2、https://www.bilibili.com/video/BV1PZ4y1s7vm?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276
渲染
渲染以O(shè)C渲染器為例，這是現(xiàn)網(wǎng)能找到比較完整的免費(fèi)教程，學(xué)習(xí)后可以直接上手出圖。
1、https://www.bilibili.com/video/BV1ur4y1T72V?p=39&vd_source=018f00780190d4b9c79b5abbdb3be276
2、https://www.bilibili.com/video/BV1f4411V7qh?p=1&vd_source=018f00780190d4b9c79b5abbdb3be276
動(dòng)力學(xué)
動(dòng)力學(xué)可以由淺入深，從基礎(chǔ)的常用動(dòng)態(tài)手法及運(yùn)動(dòng)原理開(kāi)始入手，以小實(shí)例練習(xí)的方式慢慢轉(zhuǎn)向大場(chǎng)景的動(dòng)態(tài)設(shè)計(jì)學(xué)習(xí)。
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
更多綜合性實(shí)戰(zhàn)教程
各大網(wǎng)站都能找到不少實(shí)戰(zhàn)案例的教程，根據(jù)需要可以找到更多。
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 軟硬件配置相關(guān)
打團(tuán)下副本之前，還得先準(zhǔn)備一下裝備；這里簡(jiǎn)單對(duì)于萌新學(xué)習(xí)前的軟硬件要求做一些說(shuō)明和推薦。
渲染器選擇
C4D目前可選主流的渲染器有octane、阿諾德、Redshift、vray、自帶渲染器（不推薦）。主流渲染器各有優(yōu)缺點(diǎn)，綜合下來(lái)筆者推薦萌新選擇OC渲染器，原因是學(xué)習(xí)資源多，學(xué)習(xí)難度低，渲染效果優(yōu)、渲染速度快等優(yōu)點(diǎn)。
以下是各渲染器的對(duì)比，萌新們可權(quán)衡自身的情況進(jìn)行選擇：
電腦配置
在PC電腦方面，以筆者正版OC4.0渲染器為例，顯卡選擇N卡，型號(hào)以20系列以上最好，顯存4G以上（有經(jīng)費(fèi)的可以入手今年的40系列顯卡）；其他配置看自己的經(jīng)濟(jì)情況而定，如CPU方面單核性能越強(qiáng)對(duì)于渲染效率和c4d默認(rèn)渲染器的加速越快，內(nèi)存推薦64G以上，另外在電源上如果已經(jīng)配備了20系列以上的顯卡建議選擇900W以上的，除了顯卡和CPU這兩個(gè)核心硬件其他的配置主要看個(gè)人情況而定，對(duì)電腦不懂的優(yōu)先看電商平臺(tái)的整機(jī)方案，主要以顯卡和cpu為參考依據(jù)，其他的配置可浮動(dòng)選擇。
在蘋(píng)果電腦方面，筆者并不推薦以3d工作為主的設(shè)計(jì)師選擇蘋(píng)果電腦，主要原因是主流渲染器的選擇較少，另外C4D插件各方面的支持也遠(yuǎn)不如PC方便和豐富（如有特殊原因，可以優(yōu)先選擇M1芯片的電腦或者配備N卡獨(dú)顯的蘋(píng)果電腦）。
軟件版本
C4D軟件版本推薦使用最新版本或者R23以上版本，隨著廠商的更新?lián)Q代，有些以前只有插件能完成的功能慢慢完善在新版本上，新版本帶來(lái)的便捷功能可提高萌新的出圖效率并免去舊版本沒(méi)有兼顧的功能導(dǎo)致的學(xué)習(xí)成本浪費(fèi)問(wèn)題。
另外在OC渲染器上的版本問(wèn)題盡量以當(dāng)前版本能兼容的最新OC為主，當(dāng)然，需要你的顯卡需要和OC版本是匹配的情況下。
1.4 好記性不如爛筆頭
收藏和觀看的教程多了，容易看了后面的忘記前面的，或者沒(méi)有實(shí)際上手印象不深。這里我嘗試過(guò)最好用的方法可以總結(jié)為一句話，就是俗話說(shuō)的“好記性不如爛筆頭”。
對(duì)于一些關(guān)鍵的知識(shí)點(diǎn)，或者很有用的上手練習(xí)案例，可以在自己學(xué)習(xí)或者練習(xí)后，將關(guān)鍵步驟以在線筆記的形式自己整理一遍。
這樣做有兩個(gè)好處，一是能大大加深你對(duì)知識(shí)點(diǎn)的印象，不易遺忘；二是即使真的隔了很長(zhǎng)時(shí)間有所遺忘，只要調(diào)出對(duì)應(yīng)的文字筆記，就能很快重新想起對(duì)應(yīng)知識(shí)點(diǎn)，比起重新翻出視頻教程，邊拖進(jìn)度條檢索再看一遍，效率高得多。
比如我之前在學(xué)習(xí)渲染體積光效果（丁達(dá)爾效應(yīng)）時(shí)，總是掌握的不扎實(shí)，學(xué)過(guò)就忘，下回再用到時(shí)，基本相當(dāng)于又要翻出視頻教程再看一遍，效率很低。但是將關(guān)鍵知識(shí)點(diǎn)整理成筆記后，不單對(duì)這個(gè)知識(shí)點(diǎn)記得很牢，甚至能在不重新翻看筆記和教程的條件下，熟練的以教程中提到的三種不同方式做出體積光。
筆記鏈接：https://note.youdao.com/s/Lwt42DsG
以下是我整理的部分筆記庫(kù)，感覺(jué)在筆記庫(kù)里的知識(shí)點(diǎn)才算是比較掌握了的。
1.5 多搜集優(yōu)秀案例
除了掌握工具，多看優(yōu)秀案例以提升自己的設(shè)計(jì)思維和審美也很重要，只有看的優(yōu)秀案例夠多夠好，將自己的設(shè)計(jì)眼光、審美水平、思考方式向大神們的靠攏，才能做出好的作品。
這里推薦幾個(gè)我覺(jué)得的很贊的3D類網(wǎng)站：
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 熟能生巧多練習(xí)
上手階段，充分的動(dòng)手練習(xí)是必不可少的。
這里的練習(xí)也分為兩種，一種是跟隨教程案例做出一樣的效果，一種則是結(jié)合自己感興趣的題材設(shè)定一個(gè)主題或場(chǎng)景，將學(xué)習(xí)的知識(shí)點(diǎn)融會(huì)貫通，在自己的命題作品里實(shí)際應(yīng)用起來(lái)。兩種練習(xí)的方式也是相輔相成，在積累足夠多的教程案例練習(xí)后，更推薦按照自己的想法來(lái)創(chuàng)作。
比如我會(huì)將自己感興趣的漫畫(huà)題材，在C4D里作為一個(gè)場(chǎng)景練習(xí)，融合進(jìn)平時(shí)學(xué)的一些知識(shí)點(diǎn)。
《頭文字D》場(chǎng)景
《海賊王》場(chǎng)景
因?yàn)橛玫氖亲约焊信d趣的內(nèi)容練習(xí)，所以做起來(lái)也上手很快，知識(shí)點(diǎn)也記得很牢，推薦大家可以試試。
2.2 善用插件提效率
1.Forester-植物生成插件
輕松生成各種類型的植物和部分巖石，各項(xiàng)小參數(shù)的調(diào)整方便個(gè)性化的調(diào)整，另外有便捷的動(dòng)力系統(tǒng)可以輕松制作風(fēng)吹植物的效果，結(jié)合OC渲染器的克隆功能搭建大場(chǎng)景非常輕松，適合在做動(dòng)態(tài)設(shè)計(jì)的時(shí)候快速生成搭建場(chǎng)景。
2.QuadRemesher-四邊面重拓補(bǔ)
有時(shí)候我們工作中會(huì)遇到三角面模型，對(duì)于新手來(lái)說(shuō)轉(zhuǎn)換成四角面模型可以選擇這款插件輕松轉(zhuǎn)換成你想要的四角面而且還有便捷的參數(shù)可以調(diào)整。
3.PolyCircle-挖洞插件及Nitro4D NitroCap-封洞插件
在日常建模的工作中經(jīng)常需要給模型開(kāi)洞及封洞的操作，雖然靠布線調(diào)整也可以實(shí)現(xiàn)，但是插件的效率更便捷，所以推薦這兩款插件分別對(duì)應(yīng)的模型開(kāi)洞及模型封洞的功能，另外注意在C4D軟件R26之前都是必備的插件，但如果你軟件版本是R26以上版本，那么自帶整合了這樣的工具，不需要額外安裝插件了。
4.CodeVonc Proc3durale-鏤空腐蝕溶洞效果插件
這是一款風(fēng)格化的效果插件，可以配合噪波制造出獨(dú)一無(wú)二的風(fēng)化、鏤空、分解動(dòng)畫(huà)、甚至是流體動(dòng)畫(huà)的效果，在產(chǎn)品設(shè)計(jì)及品牌動(dòng)態(tài)視頻中運(yùn)用廣泛。
（圖來(lái)源于網(wǎng)絡(luò)侵刪）
5.TerraformFX-地形插件
這塊地形插件，可以讓你輕易搭建自然環(huán)境，制作次時(shí)代的虛幻場(chǎng)景，操作簡(jiǎn)單，可以在Cinema 4D 中生成、動(dòng)畫(huà)和逼真的地形。在幾秒鐘內(nèi)創(chuàng)建非常詳細(xì)的山脈、峽谷和沙漠。直觀的非破壞性工作流程可以輕松創(chuàng)建和自定義地形。
（圖來(lái)源于網(wǎng)絡(luò)侵刪）
Part 3. 實(shí)戰(zhàn)
在入門(mén)的學(xué)習(xí)和上手的練習(xí)之后，相信很多人都會(huì)對(duì)C4D有了初步的掌握。這時(shí)更重要的當(dāng)然是將這些學(xué)到的知識(shí)點(diǎn)運(yùn)用到實(shí)際項(xiàng)目當(dāng)中，這樣的實(shí)戰(zhàn)操作才能讓你的知識(shí)體系更有針對(duì)性，并且實(shí)際項(xiàng)目命題固定、要求更高，完成后的提升才會(huì)更大。
這里分享幾個(gè)在完成基礎(chǔ)的學(xué)習(xí)與練習(xí)后，我們用C4D做的實(shí)際項(xiàng)目。
3.1 QQ小游戲-春節(jié)會(huì)場(chǎng)
小游戲會(huì)場(chǎng)是從QQ春節(jié)活動(dòng)的主會(huì)場(chǎng)進(jìn)入，通過(guò)限時(shí)抽獎(jiǎng)以及游戲任務(wù)等形式，引導(dǎo)用戶參與活動(dòng)，從而提升業(yè)務(wù)增長(zhǎng)和助力品牌傳播。
在前期設(shè)計(jì)推導(dǎo)階段，我提煉了三個(gè)設(shè)計(jì)關(guān)鍵詞，并對(duì)應(yīng)發(fā)散出一些相關(guān)元素：
一是游戲：這是凸顯平臺(tái)特色和趣味性的元素；
二是福利：這是強(qiáng)化用戶參與活動(dòng)的動(dòng)機(jī)；
三是春節(jié)：春節(jié)活動(dòng)不可少的是體現(xiàn)節(jié)日氛圍的元素；
根據(jù)這些元素畫(huà)了三個(gè)方向的概念草圖，分別以游戲機(jī)、扭蛋機(jī)、街機(jī)作為主要載體。
最終我們選擇了通過(guò)破窗的形式將Q猛虎結(jié)合進(jìn)場(chǎng)景中的方向一，展示游戲和奪寶元素，讓用戶感知福利的同時(shí)，也體現(xiàn)小游戲平臺(tái)的特色和趣味性。
創(chuàng)意上是參照超級(jí)瑪麗這種經(jīng)典的橫版過(guò)關(guān)形式，也將中國(guó)傳統(tǒng)建筑中的紅墻金瓦、松樹(shù)、福袋這些元素融入在了畫(huà)面中。
游戲機(jī)場(chǎng)景及其他主要元素建模
場(chǎng)景白模及空間構(gòu)成設(shè)定
角色及福袋動(dòng)態(tài)的制作，這里主要用到了角色及動(dòng)力學(xué)模塊相關(guān)的一些知識(shí)點(diǎn)。
渲染完成后的主視覺(jué)，Q猛虎在游戲機(jī)上往前奔跑，不斷獲得福袋并蹦出金幣、紅包實(shí)際UI中的應(yīng)用效果
實(shí)際UI中的應(yīng)用效果
另外將主視覺(jué)中的“松樹(shù)”，延展成了松、竹、梅、蘭這四種具有傳統(tǒng)中國(guó)風(fēng)的植物，作為輔助元素運(yùn)用到頁(yè)面中，保持整體調(diào)性的統(tǒng)一。
部分主要頁(yè)面總覽
3.2 QQ紅包-節(jié)日封皮
節(jié)日紅包封皮是傳遞用戶關(guān)懷的重要手段，作為QQ紅包的一部分，我們希望讓用戶有更新穎的感知和更深刻的共鳴。
相對(duì)于常規(guī)的插畫(huà)手繪風(fēng)格，我們希望嘗試用3D的方式做一些新的探索。
在構(gòu)思中秋節(jié)的紅包封皮時(shí)，首先圍繞“中秋”進(jìn)行關(guān)鍵詞發(fā)散
再選取其中桂樹(shù)、玉兔、明月等這幾個(gè)適合構(gòu)建場(chǎng)景的元素，構(gòu)建成一個(gè)立體化的場(chǎng)景
將一些元素抽象化，結(jié)合3D手法，加入更有意境的表達(dá)
最終完成的效果，整體也是塑造一個(gè)比較有中國(guó)風(fēng)和意境的場(chǎng)景
新年封皮也是用同樣的方式完成，像剛才中秋的桂花樹(shù)一樣，這里也將錦鯉也做了一些抽象化的表達(dá)，比如魚(yú)的眼睛是寶石質(zhì)感，魚(yú)的身體是黃金質(zhì)感，傳遞一種新年好運(yùn)、財(cái)運(yùn)連連的感覺(jué)。
最終完成的效果，QQ和banyQ坐在錦鯉背上，手上拿著銅錢(qián)串在吊錦鯉，寓意新年大吉大利、錦鯉附體。
新版封皮的使用量對(duì)比舊版有了較大提升，可以看出用戶對(duì)新版封皮的喜愛(ài)程度還是很高的，目前的節(jié)日封皮也是按照新風(fēng)格持續(xù)延展中。
Part 4. 結(jié)語(yǔ)
以上就是本文的全部?jī)?nèi)容，希望能幫助大家在學(xué)習(xí)C4D的過(guò)程中有所幫助，總結(jié)下來(lái)就是多看多練多運(yùn)用。對(duì)文中提到的插件感興趣的朋友，也可以通過(guò)附上的鏈接去官網(wǎng)了解更多詳細(xì)介紹。若是大家有更好的學(xué)習(xí)建議，也歡迎在評(píng)論區(qū)留言一起討論。
作者：騰訊ISUX
鏈接：https://www.zcool.com.cn/article/ZMTUxNDU4MA==.html
來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn
