WWDC22 全球開發(fā)者大會結(jié)束，有太多小眾產(chǎn)品脫穎而出。無形中有一股巨大的力量，在慢慢崛起，那便是來自世界各地的小型開發(fā)團隊和獨立開發(fā)者。他們的產(chǎn)品小而美，小到僅靠一個功能撐起產(chǎn)品，美到完全忘記這是工具產(chǎn)品。那么具體都有哪些產(chǎn)品細節(jié)，不妨聽我細細道來～

其中，我精挑細選出一個海外和三個國區(qū)優(yōu)秀產(chǎn)品進行產(chǎn)品設(shè)計細節(jié)分析，一探小眾產(chǎn)品究竟好在哪里！

（專注面條 - 輕松重獲專注力）2022年Apple設(shè)計大獎入圍名單之一
（謎底時鐘 - 讓時間看得見）2022年Apple設(shè)計大獎入圍名單之一
（Waterllama - 開啟喝水時間）2022年Apple設(shè)計大獎入圍名單之一
（OffScreen - 自律番茄鐘，不做手機控）Apple Store精品推薦64次

排名不分先后，從以上幾款產(chǎn)品logo中可以看出產(chǎn)品之間設(shè)計風(fēng)格基本不一樣，不存在借鑒抄襲，各自都在細分領(lǐng)域深耕播種。

也正是因為開發(fā)者的敬業(yè)、精益、專注、創(chuàng)新的“工匠精神”，才能讓產(chǎn)品突出重圍，優(yōu)秀的呈現(xiàn)在用戶面前使用。

一、專注面條

Slogan：專注，可以做出一碗好面條。

你以為這只是讓人做泡面的App！那就錯了。這是用“煮一碗好面條是需要時間的”為理念，讓用戶專注工作，類似番茄工作法。

有趣的是，這款效率工具被插畫元素完美包裹起來，一點感受不到工具給人帶來的疏遠感。相反，極具趣味性的畫面讓工具使用起來也充滿樂趣充滿愛。

正因這上乘的設(shè)計質(zhì)感，《專注面條》曾數(shù)次登上 App Store 推薦頁，至今收獲 7000+ 個評價、4.9 的評分。

1.核心理念

想象一下你正在烹飪一碗面條。

在烹飪時間結(jié)束前．不要試圖拿起你的手機，這樣會讓水蒸汽流失，面條就不好吃了。日后，你可以使用專注面條完成你希望專注的任何事情。

它把工作比喻成煮面，煮面要專心，把控火候，合適時間放入主料和調(diào)料；工作同樣要專心，遵循自己的方法論，把每個步驟和流程都執(zhí)行到位。工作完成了，一碗面也就煮好了。

專注力在哪里，效率就在哪里。

「專注面條」希望輔助你以一種詼諧有趣的方式，重獲這個時代最稀缺的專注力。放下你的手機，煮一碗面，我們一起對抗手機成癮！

時間一到，你的面條就做好了，你也完成了一次有意義的專注。

2.品牌元素

打破常規(guī)，不用系統(tǒng)默認(rèn)蘋方字體，而是選擇手寫體風(fēng)格的「素材集市康康體」字體（文末領(lǐng)取可商用字體包）作為通篇文字載體。

這也是為統(tǒng)一界面風(fēng)格做的一個優(yōu)化嘗試。

不得不說，這個選擇是非常適合的。（體量較小的產(chǎn)品可以適當(dāng)選用設(shè)計字體，一旦產(chǎn)品功能做多做大還是乖乖用默認(rèn)字體規(guī)范靠譜些）。

打開App，你能明顯看到簡潔的手繪風(fēng)格元素，使整個產(chǎn)品透傳出清新可愛的一面。這也是Alex作者受到女兒啟發(fā)，畢竟小孩子總有天馬行空的想象，但大人們卻很難跳脫現(xiàn)實產(chǎn)生有趣想法。

App界面極其簡潔，只有黑白灰三種顏色，搭配手繪風(fēng)格的設(shè)計元素，使產(chǎn)品整體清新脫俗，與眾不同。

圖標(biāo)設(shè)計脫離設(shè)計規(guī)范，采用更加符合產(chǎn)品氣質(zhì)的手繪風(fēng)格，這樣使得界面統(tǒng)一性極高，氛圍感十足。

這也間接告訴設(shè)計師們圖標(biāo)設(shè)計上一定要跟著產(chǎn)品形態(tài)去做設(shè)計，而不要一味以第三方規(guī)范為唯一衡量標(biāo)準(zhǔn)來設(shè)計，結(jié)果就是同質(zhì)化泛濫。

3.專注時長-插圖設(shè)計

計時是產(chǎn)品核心功能，點擊首頁左上角專注時長，會出現(xiàn)不同的煮面方案。

可設(shè)置5分鐘-180分鐘之內(nèi)任意時長的專注時間，同時為5、10、15、20、25、30、35、40、45、50、55、60、180分鐘，這13個時間段繪制了專屬面條配方。你不用手機的時間越長，你煮的泡面配料就越豪華越高級。設(shè)計元素也越豐富。當(dāng)你碰到手機，就會震動十閃光。

面條設(shè)計方案與功能的完美呈現(xiàn)是產(chǎn)品最吸引人的地方。

4.設(shè)計細節(jié)

根據(jù)累積的專注時長還可以獲得相應(yīng)的稱號，配合幸苦工作后汗水落下動畫，很是生動有趣。

不僅如此，專注面條還特意為女性男性做了兩套插圖設(shè)計方案，充分考慮不同群體的使用體驗，僅僅是效率型產(chǎn)品就做到如此細節(jié)，不好才怪。

這也是除了故事卡片第二種用總時長配圖來增加產(chǎn)品使用黏性產(chǎn)生記憶點的設(shè)計之處。

5.商業(yè)模式-永久買斷與付費項目

1.永久買斷制

【專注面條】一次買斷制，面條價格￥18。購買后產(chǎn)品內(nèi)的功能都可使用。但“故事卡片”需要鑰匙來解鎖，￥6.00=鑰匙*6，不想付費那就乖乖完成計時任務(wù)來隨機獲得故事卡片。

作為一個功能單一的產(chǎn)品，賣點在哪里？核心競爭力在哪里？依碳水Sir來看付費用戶大多在為品牌理念買單。

就是產(chǎn)品自身的品牌調(diào)性，區(qū)別于市面上任何一款產(chǎn)品，不隨波逐流，用全新的面條理念代替時間，并且有其鮮明的手繪風(fēng)格和插圖元素，即使被抄襲也只能抄到“外殼”，內(nèi)在的東西是偷不走的。

2.購買鑰匙

專注完成后，靠概率獲得鑰匙，用來解鎖故事卡片以及 “腦洞大開” 的結(jié)局作為獎勵。緩解你專注后的緊張感，增加趣味互動性，同時為下一次專注做好準(zhǔn)備。

故事中皮諾曹、烏鴉喝水、長發(fā)公主等雖然都是我們耳熟能詳?shù)耐挘髡撸?Alex ）給他們加上了一些彩蛋。譬如在《猴子撈月》的卡片里，解謎前三個猴子看到河流中有一個圓圈，當(dāng)我們找到面條的位置時，會發(fā)現(xiàn)猴子們看到的不過是一個香菇都大為震驚，畫面里充滿奇妙的想象力。

當(dāng)用戶看到未解鎖的故事會出于好奇點進去，這時就需要鑰匙來解鎖，畢竟不是靠專注獲得的卡片就要用別的辦法（購買鑰匙）打開，這就是第二個商業(yè)轉(zhuǎn)化點。

目前已有的27張故事卡片，每一個都與面條結(jié)合進行故事綁定，讓用戶在效率軟件中也能感受到游戲的樂趣，把故事卡片當(dāng)成解鎖過關(guān)元素，引發(fā)用戶對故事卡片更多的渴望。這也是通過獎勵機制提高用戶參與感進而提高使用黏性以及提升付費轉(zhuǎn)化的一種方式。

一個動作，一堆腦洞，組成了一個能量滿滿的 app。

6 月 1 日，蘋果發(fā)布了 2022 年度設(shè)計大獎入圍名單，在「創(chuàng)新思維」類別中出現(xiàn)了中國區(qū)《專注面條》的身影，雖然止步于決賽圈，但我覺得這并不是結(jié)束，而是全新的開始。

優(yōu)秀的產(chǎn)品總有其相似之處，也有其不同。要想做一款好的小眾產(chǎn)品，除了把產(chǎn)品本身所解決的用戶痛點做好做精外，植入產(chǎn)品理念，與用戶產(chǎn)品某種關(guān)聯(lián)。

就如它把專注計時比作烹飪時間，當(dāng)完成專注，你將獲得一碗香噴噴的泡面一樣，給用戶感受并不是冷冰冰的機器“?！钡母嬖V用戶專注結(jié)束，而是通過巧妙的設(shè)計與用戶之間產(chǎn)生真實聯(lián)系，這或許就是成功的秘密。

借用「專注面條」Slogan說的：專注，可以做出一碗好面條。

各位設(shè)計師們不妨學(xué)習(xí)一下背后的思考。

二、謎底時鐘 - 讓時間看得見

謎底時鐘是一款設(shè)計精美的時鐘應(yīng)用。

Slogan：陪伴你學(xué)習(xí)、工作與生活。

你沒看錯！它僅有時間和計時功能。

作為一款時鐘App，UI設(shè)計有什么不同，才被入選2022 蘋果設(shè)計大獎！成為中國開發(fā)者之光！我們一起來看看。

1.首次引導(dǎo)

第一次下載，就會啟動引導(dǎo)流程，切換頁面時配合錯幀動畫，使設(shè)計細節(jié)更加突出明顯，強化品牌調(diào)性。產(chǎn)品中的引導(dǎo)頁都可以嘗試這種表現(xiàn)形式。

進入首頁，展示文字+動效的引導(dǎo)流程，統(tǒng)一的表現(xiàn)形式，讓使用者更容易理解。首頁交互引導(dǎo)，讓用戶對產(chǎn)品隱藏的交互功能得到二次記憶，具有增強產(chǎn)品記憶的作用。

2.品牌元素

2-1.設(shè)計元素

品牌風(fēng)格設(shè)計很前沿，采用2020年大火的新擬態(tài)設(shè)計風(fēng)格，也能看出設(shè)計表現(xiàn)緊跟市場潮流走，是一款個性且年輕的App。

整體使用下來，印象最深的就是模塊列表、圖標(biāo)的微質(zhì)感設(shè)計，以及彈窗布局的規(guī)范化設(shè)計，還有部分組件采用毛玻璃設(shè)計手法等。

值得注意的是，產(chǎn)品對iOS原生組件進行大量重新設(shè)計，結(jié)合新擬態(tài)風(fēng)格繪制了一套更符合產(chǎn)品調(diào)性的組件出來。讓人使用一次就記憶猶新。

2-2.核心力-交互感知

我分別羅列出計時切換器、計時完成動效、時間選擇器、鬧鐘動效、刪除交互、浮窗切換交互這六個來簡單談?wù)効捶āＲ韵聨讉€動效交互基本涵蓋市面上的多半產(chǎn)品的基礎(chǔ)功能，之所以展示出來，是因為「謎底時鐘」在原有的基礎(chǔ)組件上大膽創(chuàng)新，摒棄原生組件。

這樣做對于功能簡單的產(chǎn)品來說絕對是錦上添花有助于產(chǎn)品形成記憶點的設(shè)計細節(jié)。這也從側(cè)面反映出市面上的部分產(chǎn)品，只注重功能堆疊而完全忽視原生組件還可以二次設(shè)計的方向。

什么是好的交互，操作時無感知是一種，操作時有記憶點也是一種。顯然「謎底時鐘」是后者。要知道優(yōu)秀的交互自成一派，把單一的功能做到極致，你的產(chǎn)品就不會差到哪里。

3.彩蛋-圖標(biāo)變化與提醒

時鐘就是要長時間靜默展示，除了極簡、擬物、科技、馬賽克、霓光、積木、微質(zhì)感、電子屏、睡眠屏、卡通風(fēng)、各類鐘表材質(zhì)等等19種風(fēng)格高顏值時鐘外，霓光時鐘具有不一樣的功能。

當(dāng)你早晨使用它文案“早安晨之美”中午“午安好心情”下午“飲啖茶食個包”，除了文案變化，圖標(biāo)也跟隨名稱而變，又一個用美食來拉近與用戶距離的設(shè)計細節(jié)。

不僅如此，在低電量情況下，霓光效果不顯示，底部會持續(xù)閃爍電量不足的指示燈，告訴用戶手機沒電信號，請及時充電。當(dāng)用戶插上電源，霓光時鐘會重新啟動亮光模式，給予用戶通電感知。

雖然很小的設(shè)計點，但誰又能想到時鐘與電量不足產(chǎn)生聯(lián)系。看來開發(fā)者對時鐘的創(chuàng)意聯(lián)想是豐富多彩的。

4.彩蛋-積木時鐘墜落

無意間觸碰手機時發(fā)現(xiàn)積木零星掉落下幾個，在好奇的驅(qū)使下又晃動了一下手機，所有積木都掉落下來了。

具有數(shù)字屬性的積木依然不斷變換數(shù)字，并且配合手機陀螺儀可以模擬現(xiàn)實空間進行移動，交互玩法趣味十足，讓我忍不住多玩了幾次。

這種用到iOS系統(tǒng)功能做的大膽嘗試，有時會給產(chǎn)品帶來意想不到的好處，各位總監(jiān)們不妨試試。

5.商業(yè)模式-細節(jié)之處

采用終身會員與月會員模式，月會員很好理解，為了產(chǎn)品能持續(xù)做下去，而推出的付費模式，目的是能持續(xù)有營收。終身會員是一個很有意思的模式。

據(jù)了解，產(chǎn)品前期功能相對單一時，推出的一種買斷制，但隨著新功能不斷增加，原有￥25定價相比較低，早期買斷的用戶獲利更大，為了商業(yè)與產(chǎn)品平衡，使其具備良性發(fā)展空間，于是又推出月會員模式。

這也牽扯到另一點，凡是未上線新功能都可以輕松決定是否開發(fā)上線，一但功能上線，想要取消或抹掉功能，就沒那么輕松簡單了。這也是早期App都一次買斷，后期改為訂閱模式也必須有終身買斷的內(nèi)購入口。

如果我們是“匠人”就會把 App 當(dāng)藝術(shù)品，雖然只有也僅有一種功能，但只要花費了大量的時間去想創(chuàng)意，去做到設(shè)計、交互的完美融合，甚至一遍一遍地優(yōu)化各種細節(jié)部分，埋設(shè)彩蛋，最后的最后呈現(xiàn)出來讓自己滿意。那么它就很可能成為一款小而美的產(chǎn)品。

三、Waterllama

烏克蘭開發(fā)團隊出品。讓喝水變成一件快樂輕松的活動。僅有的喝水記錄功能，卻用大量動物角色來獎勵喝水后的你，讓你欲罷不能。保持水分保持快樂！從截圖中不難看出，該App內(nèi)置大量動物插圖，通過喝水來解鎖小動物，解鎖前僅展示動物輪廓，讓用戶產(chǎn)生好奇從而保持喝水好習(xí)慣，這個概念很好，產(chǎn)品很棒，那我們一起來看看吧。

1.品牌元素

產(chǎn)品中icon展示較少，更多是用小插畫來代替，頁面中大量的banner以及動物卡片，豐富產(chǎn)品的同時營造一種輕松的感覺。并沒有很多圖標(biāo)干擾用戶操作。與水相關(guān)的插圖用動效來承載，讓簡單的元素變得趣味橫生，很是新穎。除了普通的水以為，Waterllama還為各種飲料酒水做了全套icon，共計48+之多，可見產(chǎn)品對于水的核心功能做足了努力，才有如此多的類型與選擇供用戶記錄。

2.核心功能

無論您是想休息一下咖啡因，還是想通過果汁和冰沙來增強免疫系統(tǒng) - 選擇任何挑戰(zhàn)，盡情享受吧！
遠離含糖飲料和酒精，或者在 10 天內(nèi)只喝水補充水分?？纯茨愕倪M展如何，別忘了與朋友分享你的結(jié)果。
Waterllama 應(yīng)用程序中已有超過 45 個可愛的動物角色，我把解鎖與隱藏的都羅列到上放品牌元素中，可以看下總有一款是你的菜。你也可以使用隨機模式，讓每一天都變得不同。當(dāng)天喝水目標(biāo)達成就會解鎖一個動物，精美的插圖讓人賞心悅目，期待第二天繼續(xù)喝水打卡挑戰(zhàn)。

3.交互手法

首頁下方的動物挑戰(zhàn)卡片，交互形式采用App Store卡片點擊交互，無論是轉(zhuǎn)場過度，還是下拉放大主體都給畫面賦予趣味性操作體驗。一邊體驗交互細節(jié)，一邊了解喝水的各種好處，娛樂加學(xué)習(xí)兩不誤，很是輕松。

4.商業(yè)模式-細節(jié)之處

內(nèi)購頁面采用icon輪播的動效展示，優(yōu)點是在一小塊區(qū)域通過消失漸現(xiàn)可以展示所有內(nèi)容，使內(nèi)購頁面干凈清爽能更好的閱讀頁面信息。按鈕通過循環(huán)放大，引導(dǎo)用戶進行付費操作，雖然很刻意，但絲毫沒有感受到強制性選擇。
當(dāng)產(chǎn)品想要在內(nèi)購頁強化品牌背書，給到用戶可靠穩(wěn)定感，可以選出具有代表性的優(yōu)質(zhì)評價，展示在內(nèi)購頁下方，通過左右切換查看更多評價。
每年￥28，終身買斷制￥48.00。兩個價格是利用價格差來制造價格錨點，引導(dǎo)用戶購買終身會員，這對用戶來說最實惠劃算的方案，同時也是產(chǎn)品所希望的。大量的終身用戶長時間使用產(chǎn)品，成為核心用戶群體，助力產(chǎn)品越做越好。

現(xiàn)在不難看出，優(yōu)秀的產(chǎn)品往往更關(guān)注細節(jié)表現(xiàn)，用動態(tài)展示內(nèi)容，讓玩法更具趣味性，頁面簡約而不簡單。并不是頁面元素越多越好，相反把簡單的功能做到極致就會帶來正向有價值的反饋。

四、OffScreen - 自律番茄鐘，不做手機控

這款產(chǎn)品雖然沒出現(xiàn)在WWDC22上，但與「謎底時鐘」是同一家公司。無論設(shè)計或功能使用都相媲美。
手機已成為人人必備的物品，內(nèi)置的各種App占有著人們的生活，手機依賴已成為這個時代普遍的一種現(xiàn)象。雖然人們都知道長時間看手機不好，下意識的克制看手機行為，以為這樣脫離手機依賴患者這個稱號。往往碎片化看手機，一天下來使用手機的時長不降反增?！窸ffScreen」通過細分時間屬性為用戶直觀呈現(xiàn)各種場景下使用手機的詳細數(shù)據(jù)，通過數(shù)據(jù)展示以及專注時間，防止用戶沉迷手機無法自拔。

1.品牌元素

「OffScreen」背景色使用極其大膽。

淺色模式下采用暖橘色作為品牌主色調(diào)，暗色模式下采用海藍色作為主色調(diào)，相比Apple設(shè)計規(guī)范中的顏色，這種帶有傾向性的色彩更容易營造一種產(chǎn)品氛圍，強化產(chǎn)品感知度。

圖標(biāo)方面，具有操作屬性的圖標(biāo)采用線性（相對好理解），具有展示屬性的圖標(biāo)采用面性風(fēng)格（設(shè)計表現(xiàn)更強且有文字描述相對好理解）。

2.動效表達1

引導(dǎo)流程專場用了大量位移、漸變效果，使原本單調(diào)的靜態(tài)頁賦予生動表現(xiàn)力。吸引用戶眼球，達到品牌傳播效果。

3.動效表達2

動效貼合操作效果，用戶還沒使用就能一眼明白產(chǎn)品如何使用，這就是引導(dǎo)動效的好處。

當(dāng)你專注番茄鐘時，只需在番茄上滑動標(biāo)尺選擇準(zhǔn)確時間，就能開始專注。

當(dāng)完成專注會提供統(tǒng)計數(shù)據(jù)，并且有彩帶飄落效果，營造打卡勝利的儀式感，強化產(chǎn)品感知，為用戶下一次專注做準(zhǔn)備。

4.商業(yè)模式-細節(jié)之處

內(nèi)購頁采用依次呈現(xiàn)的交互方式，頭圖是一個人在看手機，采用線性風(fēng)格手法，這種形式區(qū)別于其他產(chǎn)品，會給人以眼前一亮的感覺，加深用戶對產(chǎn)品的記憶。

付費按鈕吸附與頁面底部，根據(jù)菲茨定律，起始于目標(biāo)位置越近，到達目位置的時間就會越短，從而用戶更容易點擊。

一次買斷制，￥30.00解鎖終身會員。

作為一款時間統(tǒng)計、番茄鐘、專注時間與一身的產(chǎn)品，對于時間管理有強需求的用戶來說價格還算不錯。流暢的交互呈現(xiàn)以及有趣的配圖描述，間接感受到Off Screen產(chǎn)品的細膩之處，用戶為此買單也不是說。

OffScreen的成功在于能把單一的屏幕使用時間進行多維度分析呈現(xiàn)，就說“呆呆的看”與“邊走邊看”這兩項數(shù)據(jù)，就是調(diào)用系統(tǒng)運動數(shù)據(jù)來判斷使用屏幕的場景。

況且每項數(shù)據(jù)都支持時間軸可視化圖表的方式呈現(xiàn)，細節(jié)之處方見專業(yè)，這也是好產(chǎn)品所要具有的垂直領(lǐng)域?qū)I(yè)度。

五、產(chǎn)品總結(jié)

想要產(chǎn)品脫穎而出，一定要嘗試將軟件與硬件結(jié)合，可以是陀螺儀、眼動追蹤、閃光燈等等，總之系統(tǒng)推出新的功能，就盡量把它用到產(chǎn)品里去。

不僅如此，看以上幾個產(chǎn)品，截圖模塊內(nèi)容都頂滿了，說明App想要展示的細節(jié)還有很多，從側(cè)面也能看到開發(fā)者們不留一塊“空白”的用心。

大廠產(chǎn)品固然很好，做法更符合大眾市場符合消費者需求，隨著不斷新增功能，產(chǎn)品變得越來越普適大眾，無產(chǎn)品獨特風(fēng)格可言。因為背后有龐大的員工要養(yǎng)活。

相反小團隊獨立開發(fā)者們沒有太多顧慮，一心想把一個點做好做緊致，哪怕只是計時，也要做的自己滿意為止，才會交卷，時代在變，匠人之心從未改變。值得致敬這些開發(fā)者們。

跳脫大廠的產(chǎn)品，來看看獨立開發(fā)者和小型開發(fā)團隊，一人即團隊，遇到各類問題都要獨自進行解決，可想而知工作量會有多大。

他們的產(chǎn)品或許沒有龐大的生態(tài)體系來滿足大眾用戶使用需求，但App Store十余年的發(fā)展，建立起細顆粒的開發(fā)環(huán)境，正是這種良性生態(tài)，讓那些有光的開發(fā)者，隨心所欲讓心中的想法變成現(xiàn)實，讓夜里的小路燈照亮了整片街道。

就連開發(fā)者們都這么拼搏，作為設(shè)計師的我們哪還有抱怨之說，這么多好的產(chǎn)品擺在眼前，真是難得的學(xué)習(xí)機會，習(xí)他人之處，補自我之短。一起加油一起進步。

六、結(jié)語

設(shè)計師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺，還有好的體驗流程。不要讓用戶思考，這是每個設(shè)計師所追求的。 認(rèn)真記錄產(chǎn)品細節(jié)，了解背后的思考，也是不斷提升自己邏輯思維和表達能力的一種方式。

本期產(chǎn)品細節(jié)分析結(jié)束，點擊原文鏈接查看更多，我們下期再見！

作者：碳水Sir；公眾號：草蓉三石

本文由 @碳水Sir 原創(chuàng)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。

作者：碳水sir
鏈接：https://www.zcool.com.cn/article/ZMTQwODQ3Mg==.html
來源：站酷

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

                       

一個SaaS產(chǎn)品的后臺是如何設(shè)計的？作為知識付費行業(yè)的頭部SaaS服務(wù)商，從2016年誕生不到7年時間，小鵝通注冊客戶數(shù)已經(jīng)超過160萬，終端訪問用戶人數(shù)超過7.8億，毫無疑問成為了國內(nèi)知識付費規(guī)模最大的SaaS產(chǎn)品。
為什么拆解小鵝通的后臺？這是因為后臺設(shè)計往往被多數(shù)產(chǎn)品、開發(fā)甚至老板忽略，他們甚至認(rèn)為后臺不需要設(shè)計，更不需要考慮用戶體驗，能把功能實現(xiàn)就可以交付。但我的觀點恰巧相反，我認(rèn)為一個SaaS產(chǎn)品設(shè)計最大的挑戰(zhàn)和關(guān)鍵正是后臺。它決定了運營者的工作效率和操作體驗，即便你的功能再強大，如果用戶不會用、不愿意使用，那么用戶也不會續(xù)費，而續(xù)費，正如《SaaS創(chuàng)業(yè)路線圖》作者吳昊在他書中的觀點——SaaS的本質(zhì)，就是續(xù)費。設(shè)計大偵探的第一個B端產(chǎn)品拆解，選擇了工作量最大、最繁雜的后臺，閱讀時間長，非常乏味，但如果你認(rèn)真啃完，你對SaaS產(chǎn)品、后臺設(shè)計、B端設(shè)計不會再陌生。都說良藥苦口，這碗藥，廖爾摩斯先干為敬。
一、導(dǎo)讀
1. 內(nèi)容結(jié)構(gòu)
小鵝通的后臺拆解包含四個部分，分別為導(dǎo)讀、產(chǎn)品畫像、設(shè)計拆解和總結(jié)，內(nèi)容篇幅超過4萬字，閱讀時間較長，所以拆分為4篇文章發(fā)布，建議收藏閱讀。

2. 適讀人群
第一類，產(chǎn)品經(jīng)理/UI/交互設(shè)計師，通過對小鵝通后臺產(chǎn)品的深度拆解，跳出執(zhí)行層，培養(yǎng)后臺設(shè)計的全局觀，從功能價值、應(yīng)用場景、業(yè)務(wù)流程和用戶體驗多維度去學(xué)習(xí)和思考一個頭部SaaS產(chǎn)品的后臺如何設(shè)計。
第二類，SaaS產(chǎn)品及知識付費從業(yè)者，獲取一份專業(yè)、完整、有深度價值的SaaS競品設(shè)計參考。

3. 分析模型
第一，增長模型。由戴夫·麥克盧爾提出，包含用戶獲取、用戶激活、用戶留存、獲取收入、用戶推薦，分別對應(yīng)用戶生命周期中的5個重要環(huán)節(jié)，主要用于分析產(chǎn)品的功能價值。
第二，尼爾森十大原則。尼爾森十大可用性原則是界面設(shè)計中最基礎(chǔ)、最重要的設(shè)計原則，任何產(chǎn)品的設(shè)計，都可以通過這十個原則進行指導(dǎo)設(shè)計，這個原則主要用于診斷后臺設(shè)計的用戶體驗。
第三，其他設(shè)計基礎(chǔ)理論，包括費茨定律、格式塔原則、席克定律等，主要用于判斷后臺設(shè)計的易用性。

4. 拆解步驟
SaaS產(chǎn)品的后臺的設(shè)計不僅復(fù)雜，而且很多功能如果不親自體驗根本沒法理解，所以針對小鵝通后臺的拆解，我分為以下三個步驟進行
第一，親自上手實操體驗操作。對每一個功能版塊進行了全面的實操體驗，弄清楚了才開始拆解，絕非走馬觀花。
第二，結(jié)合官方幫助文檔創(chuàng)作。在體驗小鵝通產(chǎn)品的時候，有很多功能必須結(jié)合幫助文檔才能理解，甚至由于權(quán)限和內(nèi)容問題，部分功能沒法體驗，只能靠官網(wǎng)介紹來理解。針對每一個功能，嚴(yán)格按照「功能介紹-功能價值-使用場景-頁面內(nèi)容-核心功能-操作流程」的結(jié)構(gòu)去描述，旨在讓產(chǎn)品設(shè)計師看懂這個功能設(shè)計的價值和細節(jié)。
第三，深入思考產(chǎn)品設(shè)計細節(jié)。在拆解完每一個功能，我都會加入自己的思考，主要分為細節(jié)偵查（值得我們學(xué)習(xí)的細節(jié)）、迭代建議（個人認(rèn)為可以優(yōu)化的地方）、設(shè)計思考（某個功能帶給我的啟發(fā)）、體驗陷阱（用戶體驗糟糕地方）和體驗小結(jié)（針對某個功能版塊進行全面總結(jié)），如果你瀏覽的是騰訊文檔，非常歡迎你可以以添加批注的形式和我一起討論。

5. 閱讀建議
由于內(nèi)容篇幅太長，強烈建議你可以申請小鵝通免費試用賬號一邊閱讀一邊體驗，這樣對整個后臺的設(shè)計才更深有體會。
二、產(chǎn)品畫像
1. 產(chǎn)品簡介
小鵝通是知識產(chǎn)品與用戶服務(wù)的數(shù)字化工具，包含知識店鋪、企業(yè)直播、企業(yè)培訓(xùn)、企微助手等多款產(chǎn)品，可以為有線上經(jīng)營、商業(yè)變現(xiàn)、私域運營、用戶服務(wù)等需求的企業(yè)，提供一站式技術(shù)服務(wù)，助力企業(yè)完成數(shù)字化升級。根據(jù)官方數(shù)據(jù)顯示，截止到2023年2月，小鵝通注冊客戶數(shù)已經(jīng)超過160萬，終端訪問用戶人數(shù)超過7.8億，是目前國內(nèi)知識付費客戶數(shù)量最多、規(guī)模最大的SaaS產(chǎn)品。

2. 用戶角色
用戶角色是指使用操作小鵝通后臺的用戶，主要分為運營者和店鋪銷售。
2.1 運營者
店鋪的運營者主要負責(zé)店鋪裝修、商品管理、用戶運營、數(shù)據(jù)分析、活動策劃、拉新引流等工作內(nèi)容，是小鵝通后臺主要使用的用戶群體。
2.2 店鋪銷售
店鋪銷售會通過企業(yè)微信和CRM工具使用小鵝通，不過他們主要通過企業(yè)微信的小鵝通應(yīng)用進行工作，很少涉及后臺操作。

3. 信息結(jié)構(gòu)
從信息結(jié)構(gòu)看，小鵝通后臺主要包括店鋪、圈子、直播、內(nèi)容、商品、營銷、交易、用戶、CRM、企微、數(shù)據(jù)、應(yīng)用、設(shè)置和服務(wù)14大版塊（感謝探友@miki對小鵝通后臺信息結(jié)構(gòu)的梳理）。

三、設(shè)計拆解
小鵝通的后臺非常龐大，包括了店鋪、圈子、直播、內(nèi)容、商品、營銷、交易、用戶等14大版塊，其中每一個版塊又包含若干功能，體驗起來非常繁雜，很容易陷入焦慮感。所以我按照一個知識店鋪從0到1裝修、添加內(nèi)容、店鋪推廣和運營的步驟把小鵝通的后臺拆分為8個服務(wù)，然后再對每個版塊的內(nèi)容進行詳細拆解。

1. 初始設(shè)置
當(dāng)我從官網(wǎng)開通小鵝通的知識店鋪以后，進入到管理后臺，面對如此繁雜的功能，我想做的第一件事，就是對我的店鋪進行基礎(chǔ)設(shè)置，我得讓用戶知道這個店鋪叫什么名字。
1.1. 店鋪設(shè)置
「店鋪設(shè)置」為商家提供了店鋪的基本信息設(shè)置，比如店鋪信息、品牌形象、用戶賬號設(shè)置等。
①「店鋪信息」提供店鋪名稱、店鋪管理員和主營類目的設(shè)置，非?；A(chǔ)。
②「用戶賬號設(shè)置」 提供在使用系統(tǒng)過程中的各種登錄偏好設(shè)置，比如登錄設(shè)備限制，可自定義學(xué)員使用同一賬號在同一時間不同瀏覽器上同時登陸的情況
③「引導(dǎo)設(shè)置」提供了引導(dǎo)用戶關(guān)注公眾號、加入社群、收藏店鋪、添加客服和添加手機號等功能，對新用戶的首次訪問至關(guān)重要。
④「功能配置」支持用戶對商品銷量、播放量/瀏覽量、評論審核、嚴(yán)禁詞、視頻播放器、商品評價、買家申請售后等功能進行設(shè)置，可以看出系統(tǒng)非常完整和靈活。

迭代建議
用戶的短期記憶一般不會超過5秒，所以在體驗「設(shè)置」這個欄目的時候，我就發(fā)現(xiàn)小鵝通的功能太過繁雜，這對新手商家的入門有很高的學(xué)習(xí)成本。這個欄目的內(nèi)容其實可以拆分為基礎(chǔ)設(shè)置、高級設(shè)置這樣的階梯式內(nèi)容，有助于緩解新手用戶的焦慮。
1.2. 員工管理
「員工管理」是為商家提供新建員工、運營角色管理、員工權(quán)限設(shè)置的功能，這個欄目主要幫助商家管理自己的運營團隊。

1.3. 角色管理
「角色管理」包含了系統(tǒng)默認(rèn)的多個角色，比如高級管理員、普通管理員、財務(wù)、老師、課程顧問、教務(wù)專員、銷售員等，并且可以對每個角色進行權(quán)限設(shè)置，另外系統(tǒng)也支持商家新增自定義角色，滿足商家各種運營需求。

1.4. 操作日志
「操作日志」記錄了整個系統(tǒng)管理員的登錄和操作內(nèi)容記錄，日志系統(tǒng)作為一個后臺系統(tǒng)必不可少的模塊，它可以記錄下系統(tǒng)所產(chǎn)生的所有行為，這有助于商家對系統(tǒng)運行監(jiān)管，并且可實時監(jiān)控員工在系統(tǒng)中的敏感操作，加強員工培訓(xùn)和管理。

1.5. 消息推送
「消息推送」是商家建立外部觸發(fā)最好的方式，這個版塊主要為商家提供各種場景的消息推送設(shè)置，小鵝通支持服務(wù)號代發(fā)、短信通知和APP推送通知三種類型。

1.6. 體驗小結(jié)
在對「設(shè)置」模塊的實操體驗中，感受到小鵝通的功能非常強大，甚至功能多得有點讓人透不過氣，這對新手商家來說，會產(chǎn)生很多的焦慮和壓力，我迫切需要一份最基礎(chǔ)、最簡潔的新手引導(dǎo)指南。這也突然讓我想起了當(dāng)我申請小鵝通體驗賬號時，客服專員向我多次提及給我做新手操作培訓(xùn)，但我都婉拒了，也許對于一個頭部SaaS產(chǎn)品來說，客服專員的培訓(xùn)是客戶體驗過程中必不可少的一個環(huán)節(jié)，但是我認(rèn)為好的設(shè)計，其實不需要太多的學(xué)習(xí)成本。

2. 添加內(nèi)容
當(dāng)我把店鋪的基礎(chǔ)信息設(shè)置好以后，接下來，就需要為我的知識店鋪準(zhǔn)備上架的內(nèi)容了。我找到了「內(nèi)容」這個模塊，發(fā)現(xiàn)小鵝通支持的內(nèi)容形式非常多，從視頻、音頻到圖文專欄，把常見的內(nèi)容形式都涵蓋了。
2.1. 內(nèi)容
「內(nèi)容」版塊包含內(nèi)容類型和互動工具兩個部分，商家可以在「內(nèi)容類型」選擇自己要發(fā)布的形式發(fā)布內(nèi)容，而「互動工具」則是幫助商家課程運營和學(xué)生管理的工具。
2.1.1. 內(nèi)容類型
小鵝通支持視頻、音頻、圖文、電子書、AI互動課、專欄、訓(xùn)練營和會員7種類型，幾乎覆蓋了常見的內(nèi)容形式。
2.1.1.1. 視頻
「視頻」是最常見的內(nèi)容形式之一，商家可以把錄制好的課程視頻上傳到這個欄目，就可以開始向?qū)W員銷售。

2.1.1.1.1. 新建視頻
「視頻」包含基本信息、課程內(nèi)容、所屬組合課、商品信息和狀態(tài)設(shè)置五個部分。
①在「基本信息」，商家需要填入商品名稱等基本信息；
②在「課程內(nèi)容」，管理員可對視頻的播放進行設(shè)置（比如課程未學(xué)完禁止拖動進度條和倍速播放等），還可以對內(nèi)容設(shè)置保護（禁止文字防復(fù)制和開啟防錄屏跑馬燈）。
③「所屬組合課」是提供商品和其他內(nèi)容（專欄、會員和訓(xùn)練營）關(guān)聯(lián)，比如新添加的商品屬于某個付費專欄，那么就可以關(guān)聯(lián)，提升效率。
④在「商品信息」，可以設(shè)置商品的售賣方式，支持免費、付費、加密和指定學(xué)員。針對付費視頻，還可以支持片段試看，提升付費轉(zhuǎn)化。
⑤「狀態(tài)設(shè)置」是指在添加完商品后，商家可選擇立即上架、定時上架或暫不上架，比如商家在準(zhǔn)備某個促銷活動的時候，可以提前編輯商品，設(shè)置定時發(fā)布即可。

2.1.1.1.2. 視頻管理
①「視頻」添加成功后，在「視頻」欄目頁，可以查看商品的詳情，對商品進行編輯，分享、下架、復(fù)制和刪除等。
②「分享」是指商家可以把商品的鏈接、二維碼等信息直接復(fù)制分享給好友，同時也起到了預(yù)覽的作用，這是一個公用的組件，在其他商品和版塊同樣適用。

2.1.1.1.3. 視頻詳情頁
「視頻詳情頁」主要分為課程設(shè)置、運營設(shè)置、學(xué)員列表和數(shù)據(jù)分析四塊內(nèi)容。
①「課程設(shè)置」就是對課程的相關(guān)信息進行設(shè)置，相當(dāng)于對內(nèi)容進行二次編輯。
②「運營設(shè)置」從四個解為一個通用的表單；「CRM分配」是指可以把瀏覽課程的學(xué)員自動分配給企業(yè)的CRM銷售人員；「私域引流」是指可以引導(dǎo)用戶掃碼加群，提高課程服務(wù)質(zhì)量和商家對學(xué)員的運營能力。

③在「學(xué)員列表」，可以查看當(dāng)前購買商品的所有學(xué)員信息，包括購買時間、學(xué)習(xí)進度等信息，系統(tǒng)也支持商家手動添加可學(xué)習(xí)課程的學(xué)員。

④在「數(shù)據(jù)分析」欄目，可以查看商品的「學(xué)習(xí)效果」和「交易數(shù)據(jù)」，比如商品的訂閱人數(shù)、學(xué)習(xí)人數(shù)、完課率、學(xué)習(xí)趨勢圖等，通過這個欄目，可以幫助商家對用戶的學(xué)習(xí)進行深入的分析，提升運營效率。

設(shè)計思考
在初次添加店鋪內(nèi)容的時候，對很多功能板塊都不熟悉，比如CRM分配、超級會員等，雖然能感受到小鵝通系統(tǒng)的強大，但對于剛?cè)胧值纳碳?，則會產(chǎn)生很深的焦慮，不知道這些功能如何設(shè)置和使用，也無法感受到這些功能對店鋪運營的幫助。
2.1.1.2. 音頻
「音頻」也是一種常見的內(nèi)容形式，可以設(shè)計講書、廣播等產(chǎn)品，用戶可以在地鐵、公交等場景收聽。「音頻」的新建流程、商品管理功能和「視頻」相似，我們不再贅述。

2.1.1.3. 圖文
「圖文」也是一種常見的內(nèi)容形式，可以為學(xué)員提供付費閱讀等類型產(chǎn)品，「圖文」的新建流程、商品管理功能和「視頻」相似，我們不再贅述。

迭代建議
付費閱讀其實是知識創(chuàng)作者非常喜歡的方式，小鵝通雖然設(shè)計了這個功能，但前端的界面設(shè)計并沒有根據(jù)圖文內(nèi)容傳播的特點設(shè)計，所以用戶體驗并不理想，顯得非常雞肋。
2.1.1.4. 電子書
「電子書」對于出版社等用戶群體，是一個剛需功能。在上傳電子書文件以后，系統(tǒng)可以自動解析書籍章節(jié)，輕松完成電子書在線管理和售賣。其次在店鋪前端，用戶可在手機端閱讀，支持區(qū)域觸摸翻頁、章節(jié)試讀、劃線、書簽、更換背景等功能，閱讀體驗非常友好。「電子書」的新建流程、商品管理功能和「視頻」相似，我們不再贅述。

2.1.1.5. AI互動課
隨著近兩年AI技術(shù)的發(fā)展，小鵝通也加入了AI互動課的內(nèi)容形式。商家可以利用AI互動形式的課程內(nèi)容，搭建具有沉浸式場景的課程學(xué)習(xí)形式，實現(xiàn)個性化、趣味性、強互動的授課形式，不過搭建成本相對較高，更適合于有特定需求的客戶。

2.1.1.5.1. 新建流程
①「AI互動課」的新建流程分為三個步驟，分別是填寫基本信息、制作課程內(nèi)容和填寫售賣信息。
②在「基本信息」，商家需要輸入課程名稱和詳情頁等信息。
③進入「課程內(nèi)容」以后，左側(cè)提供了內(nèi)容組件（文字、圖片、音頻和視頻）、題目組件（單選題、多選題、不定項、判斷題和填空題）和其他組件（章節(jié)標(biāo)題和附件），商家可以根據(jù)自己的需求加入組件進行設(shè)計。
④商家在填寫售賣信息以后，就可以進行上架銷售。

2.1.1.6. 專欄
2.1.1.6.1. 專欄
「專欄」可以將多個單品課程打包成系列課銷售，比如常見的付費專欄、連載小說、有聲讀物等?！笇凇菇⒑?，進入詳情頁，可以在「目錄管理」添加專欄商品，還可以對專欄的商品設(shè)置排序和設(shè)置試看。其他功能和「視頻」相似，我們不再贅述。

2.1.1.6.2. 大專欄
「大專欄」就是「專欄」的父級，可以將多個專欄進行打包，組合成專項學(xué)習(xí)專題，打造學(xué)員深度系統(tǒng)學(xué)習(xí)方案。

2.1.1.7. 訓(xùn)練營
「訓(xùn)練營」相比「課程」，是一個動態(tài)的服務(wù)。商家根據(jù)某個學(xué)習(xí)主題，集中式、計劃式、督學(xué)式地學(xué)習(xí)?！赣?xùn)練營」也是一種常見的引流手段，通過打卡、簽到、學(xué)習(xí)，可以快速幫助商家進行傳播拉新。

2.1.1.7.1. 新建訓(xùn)練營
①商家建立訓(xùn)練營以后，需要建立營期才能開始招生。
②營期的建立分為營期基礎(chǔ)信息、營期課程和售賣信息三個步驟。在「營期基礎(chǔ)信息」，需要設(shè)置開課信息，包括招生時間和開課時間；其次支持設(shè)置三種目錄解鎖模式，自由模式（無門檻自由學(xué)習(xí)）、闖關(guān)模式（完成任務(wù)才能繼續(xù)學(xué)習(xí)）和日期解鎖（每天只能學(xué)習(xí)一定數(shù)量的課程）。

③在「營期課程」，商家需要添加訓(xùn)練營的學(xué)習(xí)任務(wù)，可以加入店鋪的課程內(nèi)容，還可添加打卡、考試等助學(xué)工具，增強督學(xué)效果，提升用戶活躍度。

2.1.1.8. 會員
「會員」是商家可以打包特定商品內(nèi)容（包括專欄和商品）進行銷售，它的功能流程和「專欄」功能相似，在建立「會員」后，進入詳情頁的目錄管理才能添加課程商品。這個功能可以幫助商家聚集一定量級的忠實粉絲，實現(xiàn)店鋪的穩(wěn)定收入。

設(shè)計討論
不知道是不是語義的問題，我對「會員」這個功能有很多不理解，首先感覺和「專欄」很相似，其次和「超級會員」也有點傻傻分不清楚，所以在體驗的過程中，花了很多時間去學(xué)習(xí)研究。
2.1.1.9. 體驗小結(jié)
從小鵝通支持的7種內(nèi)容形式來看，它幾乎覆蓋了所有的知識付費內(nèi)容，視頻、音頻、電子書、專欄，甚至還有AI互動課。這足以滿足各種知識用戶人群的內(nèi)容要求，不管你是銷售錄播課、音頻課還是文字專欄，小鵝通真正的實現(xiàn)了——一分鐘擁有自己的知識店鋪。
2.1.2. 互動工具
「互動工具」包含了打卡、考試、練習(xí)、作業(yè)本、題庫、證書、表單、活動管理、隨堂檢測、測試活動和付費問答11種工具。
2.1.2.1. 打卡
「打卡」是一個提升用戶活躍度的運營工具，通過持續(xù)的打卡輸出，不僅可以幫助學(xué)員養(yǎng)成一些比較好的行為習(xí)慣，還可以幫助商家提升用戶付費轉(zhuǎn)化?！复蚩ā狗譃槿諝v打卡、作業(yè)打卡和闖關(guān)打卡三種形式。

2.1.2.1.1. 日歷打卡
「日歷打卡」是以“天”為單位的打卡模式，學(xué)員需要每天在有效時段內(nèi)提交打卡內(nèi)容，比如每日英語學(xué)習(xí)打卡、早睡打卡等。
a. 新建流程
①「日歷打卡」的建立有兩個步驟，分別是設(shè)置打卡信息和打卡介紹設(shè)置。在「設(shè)置打卡信息」，分為基本信息、打卡規(guī)則和其他設(shè)置三個內(nèi)容。「基本信息」可以設(shè)置打卡的起止日期、打卡時段、提醒方式、每日打卡次數(shù)、可補打卡次數(shù)、參與條件和打卡規(guī)則等；「打卡規(guī)則」主要是設(shè)置用戶打卡的內(nèi)容類型和范本；「其他設(shè)置」可以幫助商家關(guān)聯(lián)超級會員和指定商品文件。
②在「打卡介紹設(shè)置」步驟，需要添加打卡的封面圖和詳情頁介紹，完成后打卡建立添加成功。

細節(jié)偵查
如果不是親自新建一次「打卡」，你根本無法理解一個小小的「打卡」功能竟然會如此復(fù)雜，包含的場景和功能竟然會有這么多。
b. 打卡詳情頁
「打卡」建立以后，可以進入打卡的詳情頁，主要分為日記管理、任務(wù)管理、學(xué)員管理、分組管理、助教管理、激勵設(shè)置、運營設(shè)置和數(shù)據(jù)分析8塊內(nèi)容。
①「日記管理」主要指用戶在前端的日記打卡，老師可以根據(jù)學(xué)員的日記進行評論、置頂、加精和刪除，還支持批量導(dǎo)出日記。

②「任務(wù)管理」是指給學(xué)員布置學(xué)習(xí)任務(wù)，幫助學(xué)員更好地學(xué)習(xí)。

③「學(xué)員管理」主要提供對打卡用戶的管理，比如查看學(xué)生打卡詳細資料和暫停打卡等。
④「分組管理」支持老師對打卡的學(xué)員進行分組，提高管理效率。
⑤「助教管理」支持老師添加助教，助教可以對學(xué)生打卡進行點評、刪除和精選等操作。

⑥「激勵設(shè)置」是指為了鼓勵學(xué)生堅持打卡，老師可以設(shè)置證書、返學(xué)費和積分這樣的形式來吸引學(xué)生參與（證書和積分我們在下面會單獨講解）?！阜祵W(xué)費」是一個打卡活動中常見的營銷方式，學(xué)員完成指定的任務(wù)就可以拿到打卡費用的返現(xiàn)，這樣不僅可以篩選精準(zhǔn)用戶，也可以提高用戶的打卡積極性。

⑦「運營配置」主要包含配置日簽和邀請卡兩個部分?！溉蘸灐故且环N吸引用戶傳播的手段，通過個性化和精美的日簽設(shè)計，不僅可以體現(xiàn)活動特色，還能激發(fā)學(xué)員的收藏欲望，最終吸引用戶主動傳播，拉新引流?！秆埧ā挂仓饕菫榱思ぐl(fā)學(xué)生傳播引流，不僅設(shè)計了精美的邀請卡片，還支持老師自定義設(shè)計，以及直接引流自私域社群。

⑧「數(shù)據(jù)分析」是對整個打卡的數(shù)據(jù)進行全面的分析統(tǒng)計，包括當(dāng)天打卡人數(shù)、打卡次數(shù)、新增學(xué)員、點贊數(shù)、評論數(shù)、加精數(shù)等等，通過精準(zhǔn)的數(shù)據(jù)分析，可以為商家運營方案提供支撐。

2.1.2.1.2. 作業(yè)打卡
「作業(yè)打卡」是以布置“作業(yè)”的形式打卡，這種打卡方式可以加強教學(xué)質(zhì)量的檢驗，讓學(xué)生產(chǎn)生完成作業(yè)的緊迫感，督促學(xué)生進行學(xué)習(xí)。
2.1.2.1.3. 闖關(guān)打卡
「闖關(guān)打卡」是以“關(guān)卡”作為單位的打卡模式，這種打卡形式由于自身具備游戲的挑戰(zhàn)性，所以能夠有效刺激學(xué)生為了拿到更好的成績而努力打卡，從而提升用戶參與度和積極性。
2.1.2.2. 考試
「考試」是用來檢測用戶學(xué)習(xí)效果的學(xué)習(xí)工具，商家可以通過考試情況得到學(xué)習(xí)效果反饋，可根據(jù)考試反饋進行后續(xù)課程優(yōu)化。

2.1.2.2.1. 新建考試
「考試」的建立分為三個步驟，分別是設(shè)置考試信息、選擇試卷和發(fā)布。
①「設(shè)置考試信息」又分為基本信息、信息采集、考試設(shè)置、題目分值和結(jié)果設(shè)置五個內(nèi)容?！富拘畔ⅰ剐枰钊肟荚嚨幕拘畔?，選擇需要關(guān)聯(lián)的課程；在「考試設(shè)置」，老師可設(shè)置參考考試的時間、考試時長、考試次數(shù)等；在「結(jié)果設(shè)置」，可以選擇考試完就展示成績、題目和答案。
②在「選擇試卷」步驟，可以創(chuàng)建新試卷，也可以從試卷庫中選擇已設(shè)置好的試卷，其次還可以設(shè)置考試通過分?jǐn)?shù)的成績。
③添加試卷以后，管理員可選擇立即發(fā)布、定時發(fā)布以及開啟微信服務(wù)號通知，幫助學(xué)生可及時獲取考試的消息通知。

2.1.2.2.2. 考試管理
在學(xué)生開始考試以后，后臺會生成考試數(shù)據(jù)，商家可查看考試的詳細情況，包括批閱、統(tǒng)計分析、老師管理、設(shè)置證書等。

2.1.2.3. 練習(xí)
「練習(xí)」?jié)M足了商家售賣已有題庫題目，為學(xué)員提供自主刷題練習(xí)工具的需求，而通過反復(fù)練習(xí)，可以提高學(xué)員學(xué)習(xí)效果，有助于提升用戶的活躍度和留存率。

2.1.2.3.1. 新建練習(xí)
「練習(xí)」的建立包含基本信息、練習(xí)設(shè)置、商品信息、私域引流和信息采集五個步驟。
①在「練習(xí)設(shè)置」，管理員需要關(guān)聯(lián)題庫，設(shè)置答題的出題順序（包含隨機和按順序），題目數(shù)量和考試難度；
②「商品信息」可以設(shè)置「練習(xí)」是否付費，或需要參與關(guān)聯(lián)課程才能學(xué)習(xí)；「私域引流」和「信息采集」是公共組件，我們在上文已經(jīng)解讀過，不再重復(fù)。

2.1.2.3.2. 練習(xí)管理
學(xué)生開始練習(xí)以后，后臺可查看學(xué)員的練習(xí)數(shù)據(jù)，包括練習(xí)參與人數(shù)、每道題目的正確率等，這些數(shù)據(jù)可以幫助商家及時調(diào)整運營方案，或針對性對學(xué)生進行講解授課。

2.1.2.4. 作業(yè)本
「作業(yè)本」主要幫助老師和學(xué)員在課程后續(xù)實現(xiàn)互動和答疑，不僅可以加強學(xué)生對知識的學(xué)習(xí)，幫助老師了解學(xué)員學(xué)習(xí)的狀態(tài)，更能提升用戶活躍度。

2.1.2.4.1. 新建流程
①管理員需要先建立一個「作業(yè)本」，這個流程比較簡單，輸入名稱以后，選擇關(guān)聯(lián)課程，還支持關(guān)聯(lián)「圈子」（一個用戶運營的重要功能），老師布置的作業(yè)會在課堂互動和作業(yè)動態(tài)顯示。

②「作業(yè)本」建立以后，管理員可以布置「作業(yè)」?！缸鳂I(yè)」分為手動布置（新建）和題庫布置（從現(xiàn)有的題庫中直接選擇）?！甘謩硬贾谩剐枰斎胱鳂I(yè)名稱和作業(yè)內(nèi)容，支持上傳圖片和音頻，填寫完成后，作業(yè)創(chuàng)建成功。

2.1.2.5. 題庫
「題庫」需要配合作業(yè)、考試和練習(xí)場景使用，為這些工具提供數(shù)據(jù)支撐。

2.1.2.5.1. 題庫
①「題庫」支持添加單選題、多選題、不定項選擇題、判斷題、填空題、問答題和材料題等多種類型。添加也非常簡單，管理員選擇好題目類型以后，填入內(nèi)容就能新建成功。
②「批量導(dǎo)入」是為管理員提供批量輸入題目的工具，按照系統(tǒng)提供的輸入范例格式，系統(tǒng)可以一鍵識別出題目，輕松錄入。
③「Excel導(dǎo)入」也是一種常見的導(dǎo)入形式，不過需要按照系統(tǒng)標(biāo)準(zhǔn)的批量導(dǎo)入模版，才能實現(xiàn)批量導(dǎo)入。

2.1.2.5.2. 試卷庫
①「試卷庫」是題庫中題目的組合，可以看作是「題庫」的父級。管理員可按照自己的需要把題目手動或自動組合成試卷，在考試、作業(yè)等場景中就能及時調(diào)用，提升工作效率。
②「試卷庫」的新建流程包括設(shè)置試卷信息和組卷兩個步驟。在填寫完試卷基礎(chǔ)信息以后，在「組卷」步驟，可以選擇「手動選題」和「系統(tǒng)抽題」?！甘謩舆x題」就是管理員從題庫中逐一手動選擇，準(zhǔn)確率較高，而「系統(tǒng)抽題」則是系統(tǒng)根據(jù)管理員的題型設(shè)置隨機抽題，具有隨機性。

2.1.2.6. 證書
「證書」可以為學(xué)生帶來成就感，激勵學(xué)生堅持完成任務(wù)，當(dāng)學(xué)員通過考試、完成作業(yè)以后，管理員可以向?qū)W員頒發(fā)證書，最終提升用戶活躍度。

①「證書」的建立包含基本信息、發(fā)放規(guī)則、證書樣式、證書信息、發(fā)證信息和證書分享六個內(nèi)容。
②在「基本信息」，管理員可選擇證書類型，包括考試證書、打卡證書、圈子證書等，另外，證書需要關(guān)聯(lián)對應(yīng)的考試。
③在「證書樣式」，系統(tǒng)提供了數(shù)十種系統(tǒng)樣式，管理員可根據(jù)自己的偏好和品牌VI選擇，其次也支持自定義樣式，上傳設(shè)計好的背景圖片即可生成。
④在「證書信息」，管理員可以編輯證書標(biāo)題、獲獎文案等，還可以加入鼓勵文案，吸引用戶傳播分享。
⑤在「發(fā)證信息」，可加入發(fā)證日期、證書編號和發(fā)證印章等，突出真實性。
⑥在「證書分享」，可以添加分享語和二維碼，通過學(xué)生的分享，為商家拉新引流。

2.1.2.7. 表單
「表單」是運營者用于發(fā)起問卷調(diào)研，自定義收集用戶信息的社群功能。它可以幫助商家收集用戶需求和反饋信息，通過對用戶的調(diào)研分析，進一步設(shè)計和優(yōu)化運營策略，從而為用戶提供更精準(zhǔn)的服務(wù)

2.1.2.7.1. 新建流程
「表單」的建立分為三個步驟，分別是編輯表單、表單設(shè)置和表單發(fā)布。
①「編輯表單」分為三塊內(nèi)容，左邊是組件和外觀，管理員需要從這里選擇內(nèi)容，比如單選、文本框等。「組件」包含基礎(chǔ)組件（單選、多選、下拉菜單、文本框等）、描述分割（文本描述、圖片、分隔欄）和個人信息（姓名、性別、年齡等），「外觀」可以設(shè)置表單底色、標(biāo)題、選項內(nèi)容字體大小和顏色。選中內(nèi)容以后，中間為表單編輯區(qū)域，可以實現(xiàn)可視化編輯，包括調(diào)整順序、刪除等。右側(cè)可以設(shè)置表單的字段和邏輯，包含基礎(chǔ)設(shè)置、選項設(shè)置、邏輯顯示規(guī)則等。
②在「表單設(shè)置」，可以設(shè)置用戶提交的次數(shù)、回收方式（支持定量、定時回收）、微信分享信息和私域引流。
③在最后一步「表單發(fā)布」，需要關(guān)聯(lián)對應(yīng)的內(nèi)容，比如相關(guān)視頻、課程、專欄、圈子、訓(xùn)練營等內(nèi)容，關(guān)聯(lián)成功后，表單就可以發(fā)布。

2.1.2.8. 活動管理
在店鋪的運營中，舉辦線下活動必不可少，「活動管理」就是為了解決這個場景而設(shè)計。管理員可以使用「活動管理」功能組織線下活動，一站式完成線上發(fā)布活動信息、用戶報名、收集報名用戶信息、管理報名情況、現(xiàn)場簽到等流程。

2.1.2.8.1. 發(fā)布活動
「活動」的發(fā)布包含基本信息、票務(wù)設(shè)置、座位設(shè)置、報名信息設(shè)置和私域引流六個部分。
①在「基本信息」，管理員需要填入活動的名稱、地點、時間、關(guān)聯(lián)的課程等信息；②在「票務(wù)設(shè)置」，可以添加免費票和收費票，設(shè)置票種的展示規(guī)則等；③「座位設(shè)置」部分，還可以開啟自動排座，活動座位由系統(tǒng)自行分配；④在「報名信息設(shè)置」，管理員可以根據(jù)自己的需求靈活配置用戶報名的信息，非常方便；⑤「私域引流」可以幫助管理員在活動報名前后將潛在用戶引流至商家的私域流量池。

2.1.2.8.2. 名單管理
活動建立成功后，商家就可以發(fā)布活動，「名單管理」就是活動報名的詳細數(shù)據(jù)，包含報名管理和簽到管理。

a. 報名管理
「報名管理」主要包含了所有活動報名的數(shù)據(jù)管理，比如待審核、報名成功等，管理員可以在這個欄目查看報名用戶的詳細信息。
b. 簽到管理
「簽到管理」有兩種形式，一種是用戶自行掃碼簽到，系統(tǒng)會生成活動的二維碼，管理員向用戶展示掃碼即可；另一種是商家主動掃碼核銷，工作人員進入票券核銷頁面以后，就可以對報名的用戶進行掃碼核銷。
2.1.2.9. 隨堂檢測
「隨堂檢測」是一個協(xié)助老師校驗學(xué)生學(xué)習(xí)質(zhì)量的輔助工具，它不僅可以提升學(xué)生對課堂知識的學(xué)習(xí)和鞏固，還能有效防止學(xué)員掛機學(xué)習(xí)，提升學(xué)習(xí)效率。

2.1.2.10. 測試互動
「測試互動」是一個通過設(shè)置輕量級的在線趣味測試，刺激用戶活躍的社群玩法。運營者可根據(jù)用戶特性設(shè)計測試題目，激發(fā)用戶好奇心，活躍已沉淀的粉絲，增強學(xué)習(xí)過程的互動樂趣，同時可以設(shè)置根據(jù)測試結(jié)果給用戶推薦課程。

2.1.2.10.1. 新建流程
「測試互動」的新建包含了設(shè)置測試信息、添加題目和結(jié)果頁設(shè)置三個步驟。
①在「設(shè)置測試信息」，運營者輸入測試名稱、簡介和設(shè)置有效時間；
②在「添加題目」步驟，需要加入測試活動的題目，支持單選和多選；
③在「結(jié)果頁」設(shè)置，需要設(shè)置測評結(jié)果，并可以向用戶推薦指定的課程，進行付費轉(zhuǎn)化。

2.1.2.11. 付費問答
「付費問答」是一個為商家增加變現(xiàn)的工具，學(xué)生付費向老師提問，獲取一對一答疑?！父顿M問答」需要先創(chuàng)建一個問答專區(qū)才能開啟，有點像建立一個問答專欄。當(dāng)用戶在前端購買問答服務(wù)以后，運營者可以在手動邀請答主進行答疑。其次這個功能也設(shè)計得很完善，還支持設(shè)置用戶圍觀價格和圍觀分成。

2.1.2.12. 體驗小結(jié)
在體驗完這11個互動工具以后，我開始感受到小鵝通這個工具的魅力。從引流到激活、從留存到傳播，這11個工具幾乎能滿足一個知識店鋪運營多維度的需求。而讓我最驚嘆的是小鵝通產(chǎn)品的設(shè)計細節(jié)，比如一個普通的打卡功能，如果只是從前端體驗看，你根本無法想象這些小功能的后臺設(shè)置其實有這么復(fù)雜。而小鵝通為了降低商家的運營成本，幾乎支持每一個功能版塊自定義，給我最大震撼的就是「證書」這個功能，不僅提供多種證書設(shè)計樣式，連證書內(nèi)容的每一個字段，都可以在后臺自行輸入，無需任何加工，實在是太方便了。
2.2. 商品
「商品」主要指實物商品和服務(wù)類商品的發(fā)布和管理，如果商家有周邊商品，可以通過實物商品來上架，服務(wù)類商品則是指虛擬服務(wù)，比如1V1咨詢、設(shè)計指導(dǎo)這樣的虛擬服務(wù)?！干唐贰箼谀康墓δ鼙容^簡單，我們就不過多贅述，大家可以親自體驗。

感謝閱讀，小鵝通的產(chǎn)品拆解第一部分就到這里，下一篇我們將會繼續(xù)拆解小鵝通后臺！

作者：設(shè)計大偵探
鏈接：https://www.zcool.com.cn/article/ZMTUxODA1Ng==.html
來源：站酷

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

                         

通知是許多產(chǎn)品中不可或缺的一部分，它用于傳遞產(chǎn)品的一些新的信息狀態(tài)，幫助用戶能夠及時收到信息。
本文將討論五種類型的 UI 通知，以及何時以及如何使用它們的基本規(guī)則。

一、什么是通知？

通知是產(chǎn)品能夠與用戶及時同步信息變化，及時發(fā)送重要通知，例如產(chǎn)品更新、信息提醒、互動提醒、新消息通知等。
消息通知是為產(chǎn)品賦能，為用戶提供幫助，便于快速獲取對應(yīng)的通知信息，例如產(chǎn)品更新、信息提醒、互動提醒、新消息通知等，在 App 和網(wǎng)頁應(yīng)用中最常見的信息交換方式則是消息通知。
消息作為一種信息交換方式，抽象其過程，即為“在達到某一觸發(fā)條件下，由發(fā)送方發(fā)送消息給到接收方，接收方可針對此條消息提供反饋”。

二、通知的組成

基礎(chǔ)的通知模塊通常有標(biāo)題、內(nèi)容、入口、徽標(biāo)、識別圖標(biāo)五個元素構(gòu)成

標(biāo)題區(qū)域：用戶傳遞消息的核心區(qū)域，整個通知的信息都是圍繞標(biāo)題進行，一般標(biāo)題以簡短精煉為主，讓用戶在最短時間了解到關(guān)鍵信息。
內(nèi)容區(qū)域：主要描述更加詳細的通知內(nèi)容，當(dāng)然這里的內(nèi)容也不建議超過2行，并且不要重復(fù)標(biāo)題中內(nèi)容
操作區(qū)域：通知分為可點擊類和不可點擊類，當(dāng)通知模塊需要用戶點擊時，視覺上應(yīng)該更加具象，如按鈕、箭頭，不要讓用戶產(chǎn)生思考。
圖標(biāo)圖片：有意義的圖像可以強化通知的內(nèi)容，例如，如果你將收到的消息通知用戶，你可以包含發(fā)件人的頭像。

三、通知的類型

通知的模式根據(jù)不同的場景也會有不同類型，接下來將一一講解這5種通知類型，以及使用場景。

1. 徽標(biāo)通知

徽標(biāo)是一個小的填充橢圓形，可以出現(xiàn)在應(yīng)用程序圖標(biāo)上并指示未看到的更新。徽標(biāo)可以有一個數(shù)字，用于通知用戶未讀通知的數(shù)量。用戶檢查更新后，徽章會從應(yīng)用程序圖標(biāo)中消失，并在新通知到達時再次出現(xiàn)。

優(yōu)點

感知：它可以對用戶產(chǎn)生積極的影響，在某些情況下，用戶可以將徽章視為有價值的獎勵，例如，徽章會通知用戶他們在社交網(wǎng)絡(luò)上收到新的點贊、評論，Nir Eyal曾在他的書“Hooked”中描述了這種心理效應(yīng)。

視覺：紅色作為警惕色，用戶看到后會更具有點擊欲望，相對產(chǎn)品的一些數(shù)據(jù)指標(biāo)會有對應(yīng)的提升

缺點

需要用戶采取額外的行動，徽章本身不是通知，這是通知的警報，它只是說明了用戶有新更新的事實，用戶必須單擊或點擊帶有徽章的圖標(biāo)才能看到實際消息，紅色為強干擾元素，對一些具有強迫癥的用戶很不友好，在體驗上會有一定的影響

何時使用

一般用戶消息的通知，例如系統(tǒng)通知、社交中的點贊、評論、回復(fù)等內(nèi)容

2.推送通知

推送通知是出現(xiàn)在移動設(shè)備的鎖屏上并引起很多關(guān)注的通知。

優(yōu)點

很難讓用戶忽略該推送通知，如果用戶不進行處理，會長時間浮動在手機上

缺點

由于系統(tǒng)上app很多，會導(dǎo)致用戶對該類的通知處于麻木狀態(tài)，推送通知的效果不是很強
如果過度使用，頻繁的推送通知，即使它們很有價值，也可能會惹惱用戶

何時使用

推送通知適用于重要且時間敏感的更新（即用戶設(shè)置的日歷提醒或警報、航班延誤或已交付訂單的更新），在您發(fā)送推送通知之前，您需要確保您將與用戶共享的信息是有價值的和時效性的，否則，最好使用其他類型的通知。

建議

a、不要使用推送通知來提示用戶對應(yīng)用進行評分
b、不建議將推送通知用于促銷或廣告
c、不要使用推送通知來鼓勵用戶返回應(yīng)用，例如“好久沒見到你了，是否想念了呢”通知不會為用戶提供太多價值，需要向用戶明確說明他們應(yīng)該返回應(yīng)用程序的目的
d、允許用戶更改通知行為

3. 電子郵件通知

用戶會收到一封電子郵件，其中包含有關(guān)更新的詳細信息，不過這類通知目前在國外的一些網(wǎng)站使用頻率比較高，根據(jù)習(xí)慣來講，國外更多的還是習(xí)慣用郵件的方式作為重要信息的交流方式，相比之下國內(nèi)使用郵件來傳遞信息的頻率略低

優(yōu)點

給用戶更多的控制權(quán)，由用戶決定是否要訂閱電子郵件，如果電子郵件標(biāo)題足夠好，用戶可能無需閱讀電子郵件就可以理解上下文。

缺點

周期長，國內(nèi)用戶可能幾個月甚至1年都看不了一次郵件，此外，電子郵件可能會在用戶收件箱中丟失（即轉(zhuǎn)到垃圾郵件文件夾）
它需要切換上下文，當(dāng)應(yīng)用程序發(fā)送需要用戶操作的電子郵件通知時，用戶必須切換到電子郵件應(yīng)用程序才能完成操作，這可能不是很方便，尤其是當(dāng)您與移動設(shè)備上的應(yīng)用程序交互時。

何時使用

需要安全性時，想要使用電子郵件通知有兩個原因，首先，出于安全目的，你可能希望將電子郵件用作單獨的通道（即，當(dāng)用戶嘗試登錄服務(wù)時，應(yīng)用程序會發(fā)送一封電子郵件，其中包含有關(guān)新登錄嘗試的通知）。4.Toast通知

4.Toast通知

Toast 屬于一種及時性通知，當(dāng)用戶進行操作時，及時給出反饋，通常在移動端顯示在界面的上、中、下三個位置，而web端通常顯示在頂部區(qū)域，toast持續(xù)一定時間后會自動消失，對用戶的打擾較小

優(yōu)點

Toast 是與當(dāng)前頁面的內(nèi)容強關(guān)聯(lián)，用戶無需離開當(dāng)前頁面就能看到反饋消息
不會中斷用戶操作，出現(xiàn)時間短，對操作上無影響

缺點

丟失信息的風(fēng)險，用戶注意力不集中時，會出現(xiàn)漏掉關(guān)鍵性信息的情況

何時使用

Toast 是一種操作狀態(tài)，例如，消息發(fā)送時可以在消息發(fā)送成功時顯示toast“發(fā)送成功”

建議

不要使用 toast 來提示與當(dāng)前用戶操作無關(guān)的信息
不要將 toast 用于錯誤消息，由于 toast 會在短時間內(nèi)消失，因此某些用戶可能無法閱讀錯誤消息

5.全屏覆蓋/模態(tài)窗口

全屏覆蓋/模態(tài)窗口是出現(xiàn)在應(yīng)用內(nèi)容頂部并要求用戶做出決定的對話框窗口，這種類型的通知會在所有應(yīng)用功能出現(xiàn)時禁用它們并保留在屏幕上，直到用戶完成所需的操作。

優(yōu)點

用戶在訪問應(yīng)用程序時將 100% 看到通知，無法避免此通知。

缺點

它會阻礙用戶當(dāng)前的操作，迫使用戶操作通知相關(guān)的內(nèi)容

何時使用

全屏覆蓋/模式窗口應(yīng)僅用于需要用戶操作的最關(guān)鍵的系統(tǒng)更新，例如，它可能是阻止應(yīng)用程序正常運行的錯誤或需要特定用戶決策的關(guān)鍵信息。

四、總結(jié)

1.給用戶選擇

詢問用戶是否想接收特定類型的信息，當(dāng)用戶明確選擇接收某些類型的通知時，說明他們的意愿更強，比產(chǎn)品強制傳輸消息效果較好

2.減少重復(fù)通知

一些流氓軟件會發(fā)送一些系統(tǒng)通知，用戶無反饋后，還是會重復(fù)發(fā)送，特別是一些短信push，建議用戶沒有回復(fù)時，也不要發(fā)送后續(xù)通知，大部分人的本性是不愿意被脅迫做一些事。

3. 避免敏感信息

不要在通知中包含敏感信息，例如一些文化特殊性、地域的特殊性等，防止出現(xiàn)觸及別人痛處的一些文字語言

作者：愛吃貓的魚___
鏈接：https://www.zcool.com.cn/article/ZMTQ3MDE0NA==.html
來源：站酷

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

                       

一、雙鉆模型

它的作用是什么

雙鉆模型是設(shè)計師在創(chuàng)作過程中可以循環(huán)復(fù)用的系統(tǒng)，他不僅可以在我們設(shè)計界面時運用到，在一些數(shù)據(jù)提升優(yōu)化等方面同樣適用，雙鉆模型可以使設(shè)計更加理性，它能夠在我們做項目時思維更加具有邏輯性，我們設(shè)計過程中更多的方法還是遇到問題，直接輸出解決方案，而該模型可以讓我們的思考過程更加具象化、合理化，他與常規(guī)的思考方式不同，該模型更加注重問題的本質(zhì)，全流程圍繞問題去解決問題，并且在大的項目上能夠提升團隊效率，與其他模型不同，該模型的適用場景更加廣泛。

什么是雙鉆模型

雙鉆模型是由2005年英國設(shè)計委員會正式公布并進行驗證，但是在之前BDC就提到過雙鉆模型，而我們現(xiàn)在看到的模型是通過改良后進行使用的，不過這不重要，我們只需要了解它的用處價值以及如何使用就行了。
我們看下圖中，雙鉆模型主要為4個大階段，發(fā)現(xiàn)期、定義期、發(fā)展期、交付期。左邊的鉆石我們可以理解為發(fā)散思維階段，我們?yōu)橐粋€沒有目標(biāo)的項目去腦爆出想法或者問題，其次選擇出正確的方向，右邊的鉆石我們可以理解為從正確的方向中抽取正確的事情，最后把正確的事情完成。

a、發(fā)現(xiàn)期

發(fā)現(xiàn)期我們理解為是探索期，該階段主要是發(fā)散思維和收集資料，研究問題的本質(zhì)，把我們能想到與該問題具有關(guān)聯(lián)性的信息全部列出來。

質(zhì)疑：對一切信息的質(zhì)疑，簡單理解就是我們需要多問自己為什么，需求的合理性、用戶流程是否合理、為誰而做、會在什么場景使用、會遇到什么問題等等，把所有能想到的不合理事情列舉出來，這個小階段我們可以理解為是探索和發(fā)掘問題。
研究：針對問題去做對應(yīng)的調(diào)研，如不知道用戶使用場景，我們通過用戶調(diào)研可以得到結(jié)果，需要做什么研究調(diào)研可以根據(jù)需求遇到的具體問題去使用不同的研究方法，例如一些訪談、競品分析、數(shù)據(jù)分析等等。

b、定義期

該階段主要是把發(fā)現(xiàn)期的問題收攏聚焦，即基于發(fā)現(xiàn)期的調(diào)研分析、問題洞察形成結(jié)論，尋找可以突破的機會點，例如我們在發(fā)現(xiàn)期發(fā)現(xiàn)的問題是用戶的目標(biāo)是什么，影響用戶目標(biāo)的點可能有哪些，那么在定義階段就需要針對我們提出的這些假想進行聚焦，用戶是怎么完成目標(biāo)，通過什么場景完成目標(biāo)等等，篩選問題時一定要綜合評估，尋找可行性。

c、發(fā)展期

該階段是已經(jīng)開始要開始進行落地了，第一第二階段是找到正確方向，而現(xiàn)在則是用正確的方法去做正確的事情，我們要把聚焦的問題具象化，構(gòu)思我們能夠想到的方案，比如設(shè)計前期探索定義的是年輕、輕盈，在該階段我們就需要根據(jù)關(guān)鍵詞去考慮如何進行設(shè)計，這個階段是一個不斷生產(chǎn)和推翻的流程，一直重復(fù)，直到找到能夠落地的方案。

d、交付期

這個階段就顧名思義比較簡單了，根據(jù)發(fā)展期確定的方案，最后進行實際的落地，并且是可實施、可執(zhí)行的，通過團隊項目流程推動上線，最終展現(xiàn)給用戶。

以上便是雙鉆模型的定義，先舉個通俗的例子大家理解下模型，例如節(jié)假日我們想去旅游，a）我們?nèi)ナ裁吹胤剑繀⒂^古都？自駕游？游樂園？這個就是發(fā)現(xiàn)期，我們把想去的想玩的全部列出來，b）經(jīng)過篩選我們絕定去游樂園，這個就是大的方向，c）我們要去哪個游樂園？歡樂谷？方特大世界？這個階段就是發(fā)展期，我們要找到能去的地方，d）最后，怎么去？開車？跟團？玩多久？等等，這個就是交付期，可落地的。
當(dāng)然這個案例是結(jié)合生活方便大家理解，在實際項目中它的用處不止如此。

該如何使用它

網(wǎng)上也有很多雙鉆模型的案例，但大多都是偏向理論，并且案例也跟設(shè)計無關(guān)聯(lián)，我從設(shè)計角度單刀直入的引入雙鉆模型，很簡單，很粗暴～～

例如我們要做一個唱歌產(chǎn)品的改版，站在設(shè)計師的角度我們需要去定義他的基本風(fēng)格和基本色彩規(guī)范等等，但是總不能上來就去做設(shè)計吧，我們要知道我們產(chǎn)品的群體是誰？具體的用戶屬性是什么樣的？有什么樣特征呢？等等。這個階段就是“雙鉆模型”的第一個階段，發(fā)現(xiàn)期。

發(fā)現(xiàn)期怎么做

發(fā)現(xiàn)期就是要發(fā)散思維，比如我們”唱歌“產(chǎn)品的用戶群體是年輕群體，用戶特征是18-25歲的在校大學(xué)生，用戶使用場景大多是宿舍、教室等校園環(huán)境，我們就需要去根據(jù)這些信息去進行設(shè)計思維發(fā)散，例如什么的風(fēng)格符合這類群體，先把關(guān)鍵詞舉例出來，如年輕、活力、青春、潮流、二次元...，依據(jù)這些關(guān)鍵詞做一些飛機稿，不斷進行探索。

當(dāng)然不止這一個思路，我們也可以通過競品分析的方法去擴展思路，如比較潮流的RAPAPP、二次元較重的B站，在比如現(xiàn)在的劇本殺相關(guān)的app等等，分析他們的設(shè)計風(fēng)格和表現(xiàn)方式，嘗試融合出飛機稿。

小結(jié)：第一步的核心就是發(fā)散思維，把要做的產(chǎn)品背景信息全部羅列出來，通過橫向縱向的方式去散發(fā)關(guān)鍵詞，最后做出對不同風(fēng)格的設(shè)計，進行探索。

定義期怎么做

像前面說的，該階段就是把發(fā)現(xiàn)期散發(fā)的想法往回收一收，畢竟那么多想法哪一個才是我們需要的，我們需要在這個階段去篩選出來。

我們按照年輕、二次元、潮流、國潮這些關(guān)鍵詞出了一些飛機稿，我們需要去收攏起來看看那些可以與產(chǎn)品特性和用戶屬性真正具有關(guān)聯(lián)性，假設(shè)用戶群體雖然是18-25歲的學(xué)生，但是我們通過訪談和其他調(diào)研方式發(fā)現(xiàn)這類群體中喜歡二次元歌曲的群體偏少，而潮流、國潮等關(guān)鍵詞更符合這類群體定位，并且也能夠跟產(chǎn)品的主打方向匹配上，那么就可以剔除二次元相關(guān)的飛機稿了。

該階段最好能收縮到同一個維度2-3個方案便于我們?nèi)ミM行驗證，假設(shè)我們通過后續(xù)調(diào)研發(fā)現(xiàn)，國潮與潮酷用戶群體喜好占比差不多，但是潮酷是產(chǎn)品未來的方向，我們就可以嘗試剔除國潮，但在潮酷這個范圍內(nèi)可能還會存在多種飛機稿，這是我們就需要進一步篩選，比如通過延展性，宣傳性，用戶認(rèn)知度以及用戶的審美特性等等多維度去篩選，最終保持少量的方案。

發(fā)展期怎么做

到了這個階段我們應(yīng)該比較熟悉了，嘗試把上述的方案繼續(xù)收攏聚焦，提取出一個可行性方案展開后續(xù)的設(shè)計，具體怎么篩選，同樣可以繼續(xù)使用橫向和縱向維度進行對比，如潮酷風(fēng)格方案還剩下2個，我們就可以通過用戶調(diào)研、競品分析去嘗試衡量優(yōu)劣勢。

交付期怎么做

交付期其實就是我們設(shè)計側(cè)工作全部完成了，流程已經(jīng)進入到了開發(fā)，我們把完整的設(shè)計稿、切圖等素材交付開發(fā)，同時還需要橫向輸出設(shè)計規(guī)范供團隊后續(xù)使用。

總結(jié)

雙鉆模型用途非常廣泛，如數(shù)據(jù)方面、產(chǎn)品方面、設(shè)計方面甚至管理方面都可以使用到，在不同的領(lǐng)域使用的方法都類似，區(qū)別就是使用的深入如何，像本篇以純設(shè)計維度出發(fā)去使用雙鉆模型，使用的方式偏向單維度。
若以提升數(shù)據(jù)或優(yōu)化用戶體驗為目標(biāo)使用雙鉆模型，那么每一個階段的思維散發(fā)會變得更加廣泛，每條結(jié)果交叉的情況也非常多。
再次提醒，本篇只以設(shè)計維度出發(fā)教大家使用雙鉆模型

二、5E體驗設(shè)計模型

什么是5E體驗設(shè)計模型

該模型是講述用戶使用產(chǎn)品的感受，它包含五個維度：有效（Effective）、效率（Efficient）、吸引（Engaging）、容錯（Error tolerant）、易學(xué)（Easy to learn），我們看每個維度的英文解釋，會發(fā)現(xiàn)首字母都是E開頭，所以被稱為5E體驗設(shè)計模型。

5E 模型在整個體驗設(shè)計流程中可用性非常強，它可以幫助我們的團隊更具有創(chuàng)造力和理性的分布式領(lǐng)導(dǎo)模型，它可以讓復(fù)雜的設(shè)計簡單化，可以幫助產(chǎn)品構(gòu)建一個具有標(biāo)準(zhǔn)性的體驗框架，我們無論做簡單還是復(fù)雜的設(shè)計時都可以依據(jù)這5個維度進行體驗評估。

不知道大家有沒有發(fā)現(xiàn)，我們經(jīng)常講的產(chǎn)品可用性或者易用性，其實跟5E模型很像，5E模型的五個維度其實就是產(chǎn)品可用性的基礎(chǔ)，當(dāng)一個產(chǎn)品不滿足其中一條的時候，那這個產(chǎn)品就不存在所謂的可用性，接下來我們對這五個維度進行解析。

有效（Effective）

顧名思義，有效指的就是產(chǎn)品功能的有效性，產(chǎn)品是否能夠為用戶帶來價值，是否能夠幫助用戶完成目標(biāo)，如果不能幫助用戶完成目標(biāo)，那么就不存在產(chǎn)品有效性，就像我們買筷子是為了吃飯、買開瓶器是為開蓋、買車是為了代步.....如果筷子只給我們一只，開瓶器無法開啟瓶蓋，車子沒有輪子跑不起來，那這個產(chǎn)品就是殘缺的最基礎(chǔ)的可用性都未達到。

效率（Efficient）

字面意思指我們在保證精準(zhǔn)度的前提下保證完成事項的效率，準(zhǔn)確度越高速度越慢，這個的衡量通常指產(chǎn)品與競品相比同一個任務(wù)流程效率的高低，以及出錯的頻率，假如我們刷抖音刷10個視頻需要1分鐘，而影響時間的因素是單個視頻的內(nèi)容是否足夠吸引，亦或者網(wǎng)速是否夠快。

吸引（Engaging）

這個就比較好理解，就是界面是否能夠吸引用戶，能夠讓用戶愉快的使用我們的頁面，當(dāng)然不止視覺上的，人的感知包括視覺、嗅覺、觸覺、味覺，一個優(yōu)秀的界面是不僅僅只有視覺，它還可以通過視覺的感知引起用戶的遐想，例如一個美食的產(chǎn)品，我們把首頁做的更加紅火、火爆可能就會引起用戶遐想起辣、熱等感知。

容錯（Error tolerant）

容錯我們可以理解為是一個防錯機制，或者說是容錯率，當(dāng)用戶在操作某一個功能時，容易發(fā)生錯誤，我們就需要讓產(chǎn)品幫助用戶及時更正錯誤，例如自動修復(fù)，在比如打王者榮耀時我們選擇陣容都會經(jīng)常說容錯率，這里就是指5個英雄，2個打團時可能優(yōu)勢不是那么大，但是另外3個的容錯率非常高能把劣勢補救回來，而產(chǎn)品的容錯就相當(dāng)于這3個英雄，負責(zé)把用戶可能出現(xiàn)的錯誤操作給補救回來。

易學(xué)（Easy to learn）

易學(xué)和產(chǎn)品如何支持初次使用和更深度的學(xué)習(xí)相關(guān)。一個產(chǎn)品可以使用一次，或一會兒，或一天。它可以完成一個容易的或復(fù)雜的任務(wù)，用戶可能是一個專家或新手。但每一次使用，界面必須能夠記憶或重新學(xué)習(xí)，而且使用一段時間后能夠發(fā)掘更多的功能，通常產(chǎn)品的易學(xué)性體現(xiàn)在用戶的操作效率。

在產(chǎn)品設(shè)計中的應(yīng)用

有效（Effective）

有效性就像他定義的那樣，存在即合理，存在差異的是準(zhǔn)確性，基本每個產(chǎn)品都必須具備有效性，例如地圖軟件，我要做公交車，能夠通過該功能查看離我最近的一輛公交還有多久到，這個功能的存在就是為了便于我們乘坐公交，防止無效等待，而差異上就是公交到站的時間可能因為某種原因不夠準(zhǔn)確，這個就是有效上的差異因素。

效率（Efficient）

如何讓用戶體驗更好，效率是其中任何重要的一個點，部分的產(chǎn)品的存在就是為了“讓人變懶”，例如外賣、打車、購物等等，以聊天為例1v1聊天時消息能否及時的傳輸，群聊時同時加載n條消息，而我們能夠第一時間看到信息，在新聞資訊的軟件中，怎么保證用戶閱讀的效率，同樣的產(chǎn)品怎么排版才能夠符合用戶閱讀習(xí)慣，提高效率，大多行業(yè)的產(chǎn)品想要做到好的體驗，效率是不可缺失的。

吸引（Engaging）

一個產(chǎn)品通過不同的視覺表現(xiàn)或者音樂效果能夠加強用戶在感知層的認(rèn)知，不同的群體，不同的階段，所展示的風(fēng)格不同，像下圖中的金融產(chǎn)品，使用紅色為主色傳遞的感覺是積極向上的感知，因為在國內(nèi)股票和基金里紅色代表漲，在看閱讀產(chǎn)品和教育產(chǎn)品，都根據(jù)產(chǎn)品特性和用戶群體來設(shè)定風(fēng)格，試想一下，一個閱讀的軟件做成卡通風(fēng)格，那會不會嚴(yán)重影響閱讀呢。

容錯（Error tolerant）

上面所說，容錯更像自動修復(fù)或者幫助用戶解決錯誤操作問題，在系統(tǒng)上我們可能會經(jīng)?？吹剑珉娔X崩潰時像MAC系統(tǒng)會詢問是否重啟，而Windows崩潰時會直接藍屏幫用戶自動重啟。

在產(chǎn)品中也會有相關(guān)的功能，例如聊天頁面中，我們因為網(wǎng)絡(luò)因素發(fā)送失敗會進行紅點提示，包括一些內(nèi)容加載失敗會提示重新加載等等。

易學(xué)（Easy to learn）

易學(xué)應(yīng)用場景非常之多，我們在做產(chǎn)品時大多都是優(yōu)先考慮用戶使用是否有阻礙，這個概念還是比較成熟的，當(dāng)然產(chǎn)品功能有些時候也避免不了復(fù)雜化，這時我們可以用新手引導(dǎo)進行解決，但是還是需要提醒大家，在設(shè)計頁面的時候一定一定要優(yōu)先遵循識別性和認(rèn)知性，其次再去考慮創(chuàng)意，例如一個分享圖標(biāo)，把它設(shè)計的不像一個分享，設(shè)計感是有了，但是可用性無了。

總結(jié)

為什么分享這兩個模型呢，這兩個我理解是體驗設(shè)計的基礎(chǔ)，雙鉆模型讓我們從0-1一步一步解決問題，而5E模型是在我們解決問題的過程中時刻提醒我們不要偏移基礎(chǔ)的體驗，就像開車一樣，雙鉆模型就像是一個地圖的起點與終點，5E模型就像在行駛這段過程中的超速提醒、危險駕駛提醒等。

作者：愛吃貓的魚___
鏈接：https://www.zcool.com.cn/article/ZMTQ0OTAzMg==.html
來源：站酷
       

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

                 

對于很多設(shè)計師來講在設(shè)計界面過程中往往會忽略掉很多的細節(jié)，比如卡片的排版、文字的排版、各種狀態(tài)的反饋等等，特別是剛?cè)胄械脑O(shè)計師在做頁面時往往是直接拿到競品的頁面搬運到自己產(chǎn)品上，這種做法理論上不會讓自己的頁面出錯，但是很多人往往忽略了一點，就是別人這么設(shè)計的目標(biāo)是什么，是否會匹配自己的設(shè)計目標(biāo)，如果不了解這些貿(mào)然的去搬運設(shè)計，那么時間久了會養(yǎng)成一個不好的習(xí)慣，需要設(shè)計師去進行設(shè)計時可能就會遇到很多難點，作為初級設(shè)計師或者剛?cè)胄械脑O(shè)計師，前期可以去進行搬運設(shè)計，但是一定要了解別人為什么這么做。
接下來將分享12個設(shè)計上的小技巧，大部分在日常設(shè)計中都會遇到，了解到這些設(shè)計細節(jié)，可以讓我們的界面更加高效、易用、美觀提升用戶體驗。

目錄

一、快捷交互

二、提升交互路徑

三、問題前置

四、提升可讀性

五、點擊引導(dǎo)

六、注意飽和度

七、禁止特殊字體

八、按鈕也要有層級

九、圖標(biāo)保持一致

十、利用對比

十一、圖文疊加

十二、注意遮罩透明

一、快捷交互

我在做界面時可以時常利用交互手勢去幫助用戶提升操作效率，避免繁雜小操作步驟

左側(cè)為什么錯？？
左圖中針對單條消息的操作匯聚到了icon內(nèi)，對于用戶理解成本比較高，當(dāng)用戶想要去刪除或者屏蔽消息時需要通過聚合入口才能完成操作，大大的提升了用戶操作成本。

建議正確做法～～
我們可以在類似的消息場景或者其他列表形式的場景中，添加一些交互手勢，隨著手機系統(tǒng)的更新，用戶的操作習(xí)慣已經(jīng)被各大產(chǎn)品培養(yǎng)的非常成熟，并不用擔(dān)心用戶無法操作的情況，增加手勢有弊端也有優(yōu)勢，右圖中手勢增加了用戶首次使用的學(xué)習(xí)成本，但是降低了高頻功能的操作成本，這個理論上是可以接
受的。

實際產(chǎn)品中的運用

二、提升交互路徑

利用拇指定律把關(guān)鍵的操作入口元素等，放置右側(cè)提升用戶操作效率。

左側(cè)為什么錯？？
左圖中把按鈕放置了模塊左下側(cè)，這樣是不利于用戶進行操作，當(dāng)然如果整個模塊的熱區(qū)都是同一個，這樣并沒有什么問題，用戶點擊卡片區(qū)域任何位置都能夠完成下一步操作，如果出現(xiàn)一個模塊內(nèi)存在多個熱區(qū)入口，而用戶想要到達目標(biāo)必須通過按鈕點擊才能進入，那么左圖中的排版位置就會提升用戶的操作時間。

建議正確做法～～
當(dāng)一個頁面內(nèi)出現(xiàn)多個相同模塊或者一個模塊出現(xiàn)多個熱區(qū)入口時，按鈕點擊區(qū)域有限，我們設(shè)計時就可以利用拇指定律進行排版，如右圖中布局，將按鈕放置右側(cè)可以便于用戶在右手操作時快速到達目標(biāo)，因為國內(nèi)使用右手的人數(shù)遠遠大于左手用戶，所以我們需要滿足大部分的體驗，合理利用拇指定律。
相關(guān)定律：費茲定律、拇指定律

實際產(chǎn)品中的運用

三、問題前置

對于我們來講很多東西是簡單的，但是不乏會有一些用戶是陌生的，對于他們來講可能會有填寫成本。

左側(cè)為什么錯？？
左圖中理論上并不是錯，我們經(jīng)常設(shè)計表單時都會用的提示話術(shù)，但是我們需要考慮更多維度的東西，對于我們來講填寫這種表單非常簡單，例如個別用戶，可能會臨時忘了郵箱格式，又或者輸入手機號時多填了一位數(shù)等等情況，用戶錯誤一次操作步驟就會多一步，反之就是降低使用產(chǎn)品時的體驗。

建議正確做法～～
如右圖中，我們設(shè)計時可以更改提示的話術(shù)，幫助用戶把問題前置，當(dāng)用戶看到提示郵箱時就會按照格式去填寫，通過把手機號的位數(shù)拆分，讓用戶更好的記憶數(shù)字，這樣無論對產(chǎn)品還是用戶都沒有任何損失，反而能降低錯誤頻率。

實際產(chǎn)品中的運用

四、提升可讀性

無論是頁面還是模塊，用戶在閱讀時是已掃讀的方式進行瀏覽，我們需要保證頁面的文字元素具備一定的規(guī)律，以此來提升閱讀效率。

左側(cè)為什么錯？？
左圖中可以看到，文字與輸入框放在同一列進行展示，這樣一方面不利于后續(xù)的文字?jǐn)U展，通常這種表單填寫的頁面，在頁面中都是具有很大的空間位置，這樣排布會造成視覺上的不規(guī)律和擁擠，降低了篩選效率，當(dāng)然如果是模塊區(qū)域很小的情況下，可以適當(dāng)?shù)倪M行使用。

建議正確做法～～
右圖中我們把文字與輸入?yún)^(qū)域上下排布，雖然文字長短不一，但依據(jù)對齊原則在豎列情況看是具備對齊規(guī)律的，有效的提升信息篩選效率。

實際產(chǎn)品中的運用

五、點擊引導(dǎo)

我們在做系統(tǒng)功能模塊時需要注意添加功能點擊引導(dǎo)，用戶對此類消息模塊認(rèn)知上會默認(rèn)不可點擊，因此需要我們加以引導(dǎo)。

左側(cè)為什么錯？？
我們常見的消息模塊內(nèi)容為兩種，一種是互動類消息即用戶與用戶，另一種時是系統(tǒng)消息即產(chǎn)品推送的內(nèi)容，前者基于用戶習(xí)慣而言用戶已經(jīng)沒有使用成本默認(rèn)是可以進行點擊交互，后者因為部分產(chǎn)品會把系統(tǒng)消息作為展示的形式給用戶，但是有些產(chǎn)品的系統(tǒng)消息卻是可以點擊交互，這就導(dǎo)致了用戶認(rèn)知上出現(xiàn)了混亂，左圖中像系統(tǒng)通知功能通知其實從視覺上看，并不具備點擊欲望，因此可能會對用戶造成錯誤的理解。

建議正確做法～～
當(dāng)我們在設(shè)計時需要注意，若消息列表中存在系統(tǒng)類消息并且可以進行交互，在設(shè)計時可以添加向箭頭、紅點提示等方式告知用戶可以點擊，如果該功能有數(shù)據(jù)指標(biāo)，這種方式也同樣能賦能產(chǎn)品指標(biāo)。

實際產(chǎn)品中的案例

六、注意飽和度

目前市場上產(chǎn)品幾乎都有深色版本，我們在設(shè)計時深色版本的顏色時需要注意飽和度的高低，同樣的飽和度在黑色背景上會比白色背景上更加亮，這跟人的視覺感官有很大的關(guān)系，因此我們在做黑色版本時需要注意是否調(diào)整飽和度。

左側(cè)為什么錯？？
在黑色背景中使用過高的飽和度會刺激眼睛，很多深色版本都是從白色模式通過反向顏色直接調(diào)整，而彩色元素會直接運用到深色中，那么就會造成一個問題，因為我們習(xí)慣在白色模式下看顏色，忽然切換到黑色中看彩色刺激程度非常高“就像黑夜中忽然打開手電筒”，對眼睛的傷害很高。

建議正確做法～～
我們在設(shè)計深色版本時可以根據(jù)產(chǎn)品主色降低飽和度，包括圖標(biāo)等元素，以此來緩沖對用戶視覺感官的刺激，目前很多大廠的處理方式是直接在彩色元素上添加一層黑色透明遮罩進行處理，這樣無需在添加更多的顏色規(guī)范。

實際產(chǎn)品中的案例

七、禁止特殊字體

在設(shè)計模塊或者頁面時不建議使用特殊字體來突出文字層級，這樣會導(dǎo)致視覺不統(tǒng)一，以及開發(fā)成本增加。

左側(cè)為什么錯？？
左圖中灰色字使用了特殊字體，看起來雖然好看，但在實際開發(fā)中會導(dǎo)致開發(fā)成本增加，我們產(chǎn)品一般使用的是系統(tǒng)字體，若使用特殊字體需要讓開發(fā)同學(xué)添加對應(yīng)字體包，這樣會導(dǎo)致我們的產(chǎn)品包的內(nèi)存過大，除非產(chǎn)品中默認(rèn)一直使用該特殊字體，這樣才有使用的價值。

建議正確做法～～
一般系統(tǒng)字體就能夠滿足我們的設(shè)計需求，在UI設(shè)計中我們可以通過不同的字體粗細來調(diào)整文字層級，這樣能夠保證視覺更加統(tǒng)一，減少產(chǎn)品包大小。

實際產(chǎn)品中的案例

八、按鈕也要有層級

在設(shè)計時需要注意多個入口在同一位置時，需要把它們進行層級劃分，避免影響用戶決策

左側(cè)為什么錯？？
圖中可以看到，兩個面性按鈕非常明顯的在模塊中，當(dāng)用戶在瀏覽頁面中很容易出現(xiàn)困惑，到底需要點擊哪個才能購買預(yù)定，因為兩個都是面性無法快速進行定位入口，這樣不僅影響用戶決策效率，還會影響產(chǎn)品點擊率。

建議正確做法～～
建議設(shè)計類似模塊中時，無論是pc還是移動端都需要對入口進行結(jié)構(gòu)劃分，這樣能夠使用戶在瀏覽頁面時快速定位到入口，提升決策效率，做體驗是解決用戶的思考時間。

實際產(chǎn)品中的案例

九、圖標(biāo)保持一致

在UI設(shè)計中使用圖標(biāo)時，要保持一致性，確保他們共有相同的視覺風(fēng)格，相同的重量，填充和描邊。不要混搭。

左側(cè)為什么錯？？
可以看到左圖中的圖標(biāo)并不統(tǒng)一，線性里面摻雜著面性點綴，這在UI設(shè)計中嚴(yán)重違背了一致性的原則，會導(dǎo)致我們的頁面不夠嚴(yán)謹(jǐn)專業(yè)。

建議正確做法～～
在設(shè)計圖標(biāo)時，首先要保證圖標(biāo)風(fēng)格一致，其次在這個基礎(chǔ)上保證圖標(biāo)的描邊粗細、視覺占比重量、顏色等，不要出現(xiàn)混搭風(fēng)格。

實際產(chǎn)品中的案例

十、利用對比

在設(shè)計頁面模塊時，可以多利對比度的方式來體現(xiàn)設(shè)計的表現(xiàn)力，鮮明直接的色值能夠直接表達事物的性質(zhì)以及特點，通過對比，也能夠更加清晰的強調(diào)設(shè)計中的重點，這樣給用戶的印象會更深刻，同樣會給產(chǎn)品帶來一定的趣味性。

左側(cè)為什么錯？？
左圖中單看視覺也沒問題，只是在表現(xiàn)上圖標(biāo)與背景融入到一塊了，導(dǎo)致視覺表現(xiàn)力較差，在設(shè)計中如果符合產(chǎn)品風(fēng)格的前提下，我們可以避免這種方式，這種方式雖然具有視覺效果但不夠強，對用戶的記憶點不夠深刻。

建議正確做法～～
設(shè)計到類似的模塊時我們可以利用對比的關(guān)系，以此突出視覺元素，通過顏色焦點引導(dǎo)用戶關(guān)注，強化用戶印象同時還能增加頁面的視覺表現(xiàn)力和氛圍感。

實際產(chǎn)品中的案例

十一、圖文疊加

在設(shè)計圖文疊加的卡片或者頁面時，我們需要注意不同明度的圖片上，文字識別是否有阻礙，一般情況會通過遮罩方式避免這個情況。

左側(cè)為什么錯？？
左圖中在深色圖片下字體的可讀性是沒有問題的，但當(dāng)出現(xiàn)文字底部區(qū)域的圖片相對復(fù)雜時便會影響識別，第二種情況當(dāng)圖片明度過高時文字同樣無法識別，試想一下，一張白色調(diào)性的圖片上放文字，那基本無法看清，嚴(yán)重影響閱讀體驗。

建議正確做法～～
在界面設(shè)計時如果遇到類似的卡片，建議在文字區(qū)域添加漸變遮罩的方式，以此保證文字的識別度，或者添加純黑色透明遮罩進行處理，這樣可以兼容不同環(huán)境的圖片與文字的重疊，保證基本的閱讀體驗。

實際產(chǎn)品中的案例

十二、注意遮罩透明

UI設(shè)計中經(jīng)常會遇到彈窗，彈窗是需要配合頁面遮罩來讓用戶進行專注操作，不同的遮罩透明度所帶來的專注度也不同。

左側(cè)為什么錯？？
左圖中我們看到，遮罩的透明度過低，我案例設(shè)置的是17%，此時彈窗內(nèi)容與頁面內(nèi)容結(jié)構(gòu)上區(qū)分并不是很明顯，一般彈窗是用來讓用戶跳脫頁面內(nèi)容，從而瀏覽彈窗內(nèi)容，轉(zhuǎn)變用戶目標(biāo)，當(dāng)彈窗無法聚焦時便很難達到目標(biāo)，并且視覺上層級更加混亂。

建議正確做法～～
右圖中案例我把透明度調(diào)整到了37%，我們此時再看彈窗很容易就忽略頁面內(nèi)容，因為灰色越高，遮擋度越高，用戶跳脫感就越強，這樣我們可以讓用戶專注彈窗內(nèi)容，同時視覺結(jié)構(gòu)上也區(qū)分很明顯。

實際產(chǎn)品中的案例

作者：愛吃貓的魚___
鏈接：https://www.zcool.com.cn/article/ZMTQzNTQ3Mg==.html
來源：站酷

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

                

一、這是一個什么欄目？

UI新手設(shè)計學(xué)習(xí)100問，顧名思義，主要是通過100個常見問題解決初學(xué)者在學(xué)習(xí)UI設(shè)計初期的困惑，比如什么是UI設(shè)計？設(shè)計的目的是什么？UI設(shè)計需要學(xué)會什么必備技能？UI設(shè)計又有什么常見的學(xué)習(xí)方法等等。
為什么用問答的形式？這是受一個朋友的創(chuàng)作啟發(fā)，讓我確定了以這種形式來創(chuàng)作，這樣更易于大家理解和學(xué)習(xí)。另外這個欄目的內(nèi)容，我也將會盡自己最大的精力，從百度百科、維基百科以及國內(nèi)外的設(shè)計書籍中一邊查一邊寫，努力制作成一本UI設(shè)計新手學(xué)習(xí)的知識手冊，解決新手初學(xué)者的種種困惑，給他們提供一個學(xué)習(xí)的知識樹和進度條。
這個欄目會有多少字，多長更新完？我已經(jīng)完成了第一章大部分內(nèi)容，目前已經(jīng)撰寫了約5000字，平均每個問題800字，以我目前創(chuàng)作內(nèi)容的篇幅看，這份專欄應(yīng)該在10萬字左右，相當(dāng)于一本300頁左右的實體書籍。至于完結(jié)時間，除了需要參考百度百科和維基百科，還要翻閱各種設(shè)計書籍和查找資料，我個人預(yù)計時間3個月，不過如果大家喜歡，我就會加快腳步！

二、為什么會寫這個專題？

我在2022年轉(zhuǎn)型到知識付費以后，認(rèn)識了太多的設(shè)計師朋友，也建立了自己的社群。其中讓我印象最深的有這么一類用戶群體，他們很早就在大學(xué)期間為了學(xué)習(xí)UI設(shè)計，花了很多錢報了各種培訓(xùn)班，但最后的結(jié)果卻不如人意。很多培訓(xùn)班太注重于軟件技能的操作，而忽略UI設(shè)計其實是一門學(xué)科，如果學(xué)生知其然不知其所以然，那么即便學(xué)會了Sketch、Figma這些工具，他們也不知道學(xué)了UI設(shè)計到底能有什么用，未來又該如何去規(guī)劃自己的職業(yè)生涯。
這些朋友里面，留給我印象最深的，是一個剛畢業(yè)的女孩。她給我說，貸了兩次款，畢業(yè)后還是不知道UI設(shè)計到底能干啥，現(xiàn)在勉強找到一份設(shè)計的工作，每個月還要還著貸款走。我當(dāng)時把這個朋友免費邀請到我的私董會星球了，讓她去看我講的書、錄的課程，期望能給她帶來一絲溫暖和希望。
其次在我最早開始建立社群的時候，有一個探友在站酷看到我的產(chǎn)品拆解以后，跑來加我，然后給我說：“我一直質(zhì)疑培訓(xùn)班老師的講課內(nèi)容，因為我覺得設(shè)計這門職業(yè)，如果只學(xué)會軟件，那是不夠的，肯定需要學(xué)習(xí)一些設(shè)計原則和理論。所以當(dāng)我看了你的產(chǎn)品拆解以后，我很受啟發(fā)，我覺得學(xué)會這些設(shè)計理論特別重要?！?br /> 這些真實的故事，讓我印象深刻，也讓我開始反思，造成這種現(xiàn)象的原因是什么。所以這個專題的內(nèi)容，在很久之前就藏在我的心里了。我想去做一個UI設(shè)計的知識樹，給那些準(zhǔn)備學(xué)習(xí)UI設(shè)計以及正在從業(yè)的設(shè)計師們提供一個清晰、可視化的學(xué)習(xí)體系，從而幫助他們從一個宏觀、系統(tǒng)的角度去勘察這個行業(yè)，發(fā)展趨勢是什么、是否值得入行，從0到1又需要哪些步驟。
這個專題，主要為這幾類朋友而創(chuàng)作。第一，正在上學(xué)，準(zhǔn)備想學(xué)習(xí)UI設(shè)計的大學(xué)生；第二，剛畢業(yè)準(zhǔn)備報班學(xué)習(xí)UI設(shè)計，或已經(jīng)從培訓(xùn)班剛畢業(yè)出來的應(yīng)屆生。第三，雖然已經(jīng)從事UI設(shè)計三五年，但對UI設(shè)計還是一知半解，混混霍霍做設(shè)計的職場設(shè)計師。
最后，這個專題是我的第一個付費內(nèi)容，我將會免費分享30個內(nèi)容，如果你覺得有價值，可關(guān)注我們獲取全部內(nèi)容。

三、內(nèi)容結(jié)構(gòu)

目前我把這個專欄拆分為四塊內(nèi)容，分別是認(rèn)識UI、就業(yè)前景、學(xué)習(xí)方法和如何求職四個章節(jié)。
第一章是認(rèn)識UI，我會從設(shè)計的目的、UI設(shè)計的定義和分類開始讓初學(xué)者對UI設(shè)計有一個初步的了解。（這個部分的內(nèi)容也許適用于80%的UI設(shè)計師，雖然很多設(shè)計師已經(jīng)從業(yè)了多年，但對UI設(shè)計還是一知半解。）
第二章是就業(yè)前景，通過UI設(shè)計當(dāng)前的工作內(nèi)容、薪資收入和職業(yè)發(fā)展等維度告訴初學(xué)者UI設(shè)計的就業(yè)趨勢，降低就業(yè)選擇風(fēng)險。
第三章是學(xué)習(xí)方法，我想給初學(xué)者提供一個學(xué)習(xí)知識樹和能力晉升模型，只有知道最終要去哪里，自己當(dāng)前又在哪里，應(yīng)該如何努力，他們才能像玩游戲一樣，每天對知識的汲取都充滿動力。
第四章是如何求職，通過拆解企業(yè)對UI設(shè)計師的招聘需求，抽絲剝繭地讓初學(xué)者理解求職的本質(zhì)和方法。

四、初擬目錄

這是初步擬定的目錄，非最終交付目錄。其次這份專欄我將會篩選30個左右的問答免費給大家分享試看。
1. 認(rèn)識UI
什么是設(shè)計？（已完結(jié)）
設(shè)計的目的是什么？（已完結(jié)）
設(shè)計和藝術(shù)的區(qū)別？（已完結(jié)）
UI設(shè)計是什么？（已完結(jié)）
UI設(shè)計有什么分類？（已完結(jié)）
UI和UE、UX的區(qū)別？（已完結(jié)）
UI設(shè)計和平面設(shè)計的區(qū)別（已完結(jié)）
UI設(shè)計和電商設(shè)計有什么區(qū)別？（已完結(jié)）
UI設(shè)計有什么價值？
國內(nèi)UI設(shè)計的發(fā)展歷程
2. 就業(yè)前景
UI設(shè)計師現(xiàn)在的就業(yè)前景怎么樣？
哪些公司和行業(yè)需要招聘UI設(shè)計師？
UI設(shè)計師飽和了嗎，還值得選擇嗎？
失業(yè)的UI設(shè)計師越來越多，還能選擇UI設(shè)計嗎？
UI設(shè)計師的工作流程是怎樣的？
UI設(shè)計師主要負責(zé)什么工作內(nèi)容?
新手UI設(shè)計師的薪資收入一般在哪個水平？
UI設(shè)計師的薪資收入晉升模型
UI設(shè)計師會經(jīng)常加班嗎？
UI設(shè)計師的工作壓力大嗎？
UI設(shè)計師職業(yè)發(fā)展路線圖是怎樣的？
UI設(shè)計師是不是過了30歲就會過氣？
技術(shù)崗位未來是否一定要朝著管理崗發(fā)展嗎？
一二三線城市的環(huán)境對UI設(shè)計師就業(yè)和成長有影響嗎
談不上對UI設(shè)計特別熱愛，但覺得UI設(shè)計工資高，可以選擇這個行業(yè)嗎？
學(xué)會UI設(shè)計可以創(chuàng)業(yè)或做自由設(shè)計師嗎？
3. 如何學(xué)習(xí)
UI設(shè)計師需要學(xué)習(xí)什么內(nèi)容？
UI設(shè)計師需要掌握哪些必備技能？
UI設(shè)計學(xué)習(xí)的步驟是什么？
需要多久才能成為一個優(yōu)秀的設(shè)計師?
除了設(shè)計，UI設(shè)計師還需要培養(yǎng)什么職業(yè)技能？
學(xué)習(xí)UI設(shè)計的常見方法
UI設(shè)計可以自學(xué)嗎？
自學(xué)UI設(shè)計有什么難點和挑戰(zhàn)？
審美能力不好，可以學(xué)好UI設(shè)計嗎？
UI設(shè)計需要學(xué)習(xí)什么軟件?
學(xué)會軟件一般需要多長時間？
UI設(shè)計需要買蘋果電腦嗎？
用Photoshop可以設(shè)計UI嗎？
UI設(shè)計需要看什么設(shè)計書籍？
有哪些免費學(xué)習(xí)的教程網(wǎng)站？
錄播課程和設(shè)計培訓(xùn)班有什么區(qū)別？
有那些物美價廉的付費課程推薦？
選擇設(shè)計培訓(xùn)班需要注意什么？
培訓(xùn)班學(xué)完以后就能成為UI設(shè)計師了嗎？
培訓(xùn)班對找工作有幫助嗎？
UI設(shè)計師需要美術(shù)相關(guān)專業(yè)嗎
什么樣的專業(yè)更適合UI設(shè)計？
學(xué)歷對UI設(shè)計師的學(xué)習(xí)有影響嗎？
設(shè)計臨摹對新手UI設(shè)計師有什么幫助？
設(shè)計臨摹有什么技巧和方法？
設(shè)計臨摹的作品可以加入個人作品集嗎？
一名好的UI設(shè)計師應(yīng)該具備什么素質(zhì)？
優(yōu)秀的設(shè)計師都有什么好的設(shè)計習(xí)慣？
4. 如何求職
企業(yè)招聘UI設(shè)計師的流程是什么？
企業(yè)招聘UI設(shè)計師主要考核標(biāo)準(zhǔn)是什么？
企業(yè)愿意招聘新手UI設(shè)計師嗎？
新手UI設(shè)計師應(yīng)該選擇什么樣的企業(yè)？
去不了大廠，新手設(shè)計師是不是就沒前途？
創(chuàng)業(yè)團隊、小公司值得新手UI設(shè)計師去嗎?
UI設(shè)計師的求職流程是什么？
UI設(shè)計師求職需要準(zhǔn)備什么資料？
簡歷設(shè)計對UI設(shè)計師重要嗎？
如何設(shè)計一份優(yōu)秀的作品集？
新手UI設(shè)計師有什么求職技巧？
學(xué)歷低對UI設(shè)計師的求職有沒有影響，如何規(guī)避？
沒有工作經(jīng)驗怎么辦，能找到工作嗎？
一直找不到工作怎么辦，是不是應(yīng)該放棄UI設(shè)計？

五、第一篇 認(rèn)識UI（Q1-Q5）

設(shè)計是什么？為什么需要設(shè)計？UI設(shè)計這個行業(yè)又是怎么誕生的？UI設(shè)計師的工作內(nèi)容具體是什么？非科班畢業(yè)的大學(xué)生適合從事設(shè)計行業(yè)嗎？這個行業(yè)需要學(xué)習(xí)多久才能成為一名優(yōu)秀設(shè)計師？作為此次專題的開篇內(nèi)容，我們在這個章節(jié)將會抽絲剝繭向大家介紹UI設(shè)計的由來、定義、分類和價值，幫助大家快速對UI設(shè)計這門學(xué)科有一個宏觀的了解。

Q1. 什么是設(shè)計？

我們先看百度百科對設(shè)計的定義。設(shè)計，是指設(shè)計師有目標(biāo)、有計劃地進行技術(shù)性的創(chuàng)作與創(chuàng)意活動。維基百科認(rèn)為，所謂設(shè)計，即“設(shè)想和計劃，設(shè)想是目的，計劃是過程安排”，通常是指有目標(biāo)和計劃的創(chuàng)作行為及活動。
著名的美國設(shè)計理論學(xué)家維克多·帕帕奈克認(rèn)為，設(shè)計是為構(gòu)建有意義的秩序而付出的有意識的、直覺上的努力。他認(rèn)為設(shè)計有兩個步驟。第一步：理解用戶的期望、需要、動機，并理解業(yè)務(wù)、技術(shù)和行業(yè)上的需求與限制。第二步：將這些知道的東西轉(zhuǎn)化為對產(chǎn)品的規(guī)劃（或者產(chǎn)品本身），使產(chǎn)品的形式、內(nèi)容和行為變得有用、能用、令人向往，并且在經(jīng)濟和技術(shù)上可行。
簡單總結(jié)一下，設(shè)計是有目的的，有計劃的、滿足用戶的期望的行為。比如企業(yè)需要設(shè)計一個官網(wǎng)進行對外宣傳，網(wǎng)站的設(shè)計就屬于有目的、有計劃的工作，而宣傳則是企業(yè)的核心需求。
為什么我們需要先了解“設(shè)計”的概念？這是因為UI設(shè)計只是設(shè)計的一個細分領(lǐng)域，設(shè)計的種類非常多，設(shè)計在許多領(lǐng)域都有應(yīng)用，涉及的方面也比較廣泛。只有初步了解這個宏觀的大概念，我們才能更清晰地看清楚UI設(shè)計的本質(zhì)，從而為我們的學(xué)習(xí)進行指導(dǎo)。
參考文獻：
百度百科-設(shè)計
維基百科-設(shè)計
《步步為贏：交互設(shè)計全流程解析》- 董尚昊

Q2. 設(shè)計的目的是什么？

我們先看世界上第一所完全為發(fā)展設(shè)計教育而建立的學(xué)院包豪斯對于設(shè)計的三個基本觀點。
①設(shè)計是藝術(shù)與技術(shù)的新統(tǒng)一；②設(shè)計的目的是人而不是產(chǎn)品；③設(shè)計必須遵循自然與客觀的法則來進行。
包豪斯提出“以解決問題為中心”的設(shè)計理念。他們認(rèn)為設(shè)計是為了解決問題，不論是設(shè)計一個水壺，還是一款手機應(yīng)用軟件，設(shè)計師都是在為他人服務(wù)，在幫使用者解決問題。這個設(shè)計理念深深地影響了設(shè)計界。設(shè)計是理性和感性的結(jié)合，并以解決問題、滿足人們的需要為目的。
中國現(xiàn)代設(shè)計和現(xiàn)代設(shè)計教育的重要奠基人之一、美國設(shè)計教育最高學(xué)府——美國藝術(shù)中心設(shè)計學(xué)院教授王受之在他的著作《世界現(xiàn)代設(shè)計史》中寫過這樣一句話：“設(shè)計是為他人服務(wù)的活動?！?br /> 日本當(dāng)代國際級平面設(shè)計大師藝術(shù)總監(jiān)原研哉在《設(shè)計中的設(shè)計》一書中也有類似的表達：“設(shè)計的實質(zhì)在于發(fā)現(xiàn)很多人都遇到的問題然后試著去解決的過程。”
綜上所述，設(shè)計的目的是用設(shè)計方案來滿足用戶的需要，而不是單純產(chǎn)出設(shè)計師認(rèn)為美觀的方案。這是設(shè)計過程中最重要的指導(dǎo)原則之一。如果不理解設(shè)計的本質(zhì)，我們在以后的商業(yè)設(shè)計中就很容易陷入一個怪圈，我覺得這個界面這樣設(shè)計得非常好看，但客戶卻讓我去臨摹另外一個我認(rèn)為很普通的產(chǎn)品界面，客戶覺得那個才是他想要的。
參考文獻：
《步步為贏：交互設(shè)計全流程解析》- 董尚昊

Q3. 設(shè)計和藝術(shù)的區(qū)別？

我們看看維基百科對藝術(shù)的介紹。藝術(shù)是指憑借想象力、經(jīng)驗等綜合人為因素的融合與平衡，以創(chuàng)作隱含美學(xué)的器物、環(huán)境、影像、動作或聲音的表達模式。而百度百科則對藝術(shù)沒有明確的定義。藝術(shù)是一種社會現(xiàn)象、社會事物，屬上層建筑中的社會意識形態(tài)，其次也指向各種技術(shù)活動，比如畫、雕刻、建筑等活動。
藝術(shù)的目的可以分為無動機的及有動機的兩類。無動機的藝術(shù)是指那些本來就是人類不可或缺一部分的藝術(shù)，這類的藝術(shù)超越個人，或是不是為某一特定目的所創(chuàng)作。有動機的藝術(shù)是指那些因為特定目的產(chǎn)生的藝術(shù)?？赡苁菫榱苏蔚淖兏?、表達特定的感情、陳述個人心理，或是作為一個交流的工具。
原研哉在《設(shè)計中的設(shè)計》對設(shè)計和藝術(shù)也發(fā)表了自己的看法。
藝術(shù)說到底是個人意愿對社會的一種表達，其起源帶有非常個人化的性質(zhì)，所以只有藝術(shù)家自己才知道其作品的來源。而設(shè)計，則基本上不是一種自我表達，它源于社會。設(shè)計的實質(zhì)在于發(fā)現(xiàn)一個很多人都遇到的問題，然后試著去解決的過程。
簡單總結(jié)，設(shè)計和藝術(shù)有很多重疊的部分，兩者最本質(zhì)的區(qū)別是設(shè)計的本質(zhì)是滿足需要，包含更多的商業(yè)述求，而藝術(shù)的目的是表達藝術(shù)家對世界的看法，不受外界的約束。為什么要弄懂這兩者的區(qū)別，這是因為在商業(yè)設(shè)計中或許不會給你有太多充足的時間去完成完美的稿子，而是要以甲方或企業(yè)的設(shè)計目標(biāo)為主、商業(yè)設(shè)計，不是藝術(shù)，而是要通過設(shè)計滿足甲方的需求。
參考文獻：
維基百科-藝術(shù)
《設(shè)計中的設(shè)計》- 原研哉

Q4. UI設(shè)計是什么？

由前UI設(shè)計屬于近代興起的設(shè)計分類，這是隨著科技的快速發(fā)展才催生出來的新興行業(yè)。目前對于UI設(shè)計的定義，目前國內(nèi)有兩種流派。
第一種，UI設(shè)計包含界面設(shè)計（Graphical User Interface，簡稱GUI）、交互設(shè)計（Interaction Design，簡稱IxD）和用戶體驗設(shè)計（User Experience Design，簡稱UX）。
我們先看百度百科對UI設(shè)計的定義描述。UI是User Interface(用戶界面)的簡稱，是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。UI是一個廣義的概念，可以通過以下三個層面來理解UI的概念。
首先，UI是指人與信息交互的媒介，它是信息產(chǎn)品的功能載體和典型特征。比如以視覺為主體的界面，強調(diào)的是視覺元素的組織和呈現(xiàn)，包含圖形、圖標(biāo)、色彩、字體等，這就是我們常說的視覺表現(xiàn)層，用戶從視覺就可以直接感知的部分。在這一層面，UI就是用戶界面，也是國內(nèi)普遍對UI設(shè)計的認(rèn)知。
其次，UI是指信息的采集與反饋、輸入與輸出，這是基于界面而產(chǎn)生的人與產(chǎn)品之間的交互行為。在這一層面，Ul可以理解為User Interaction，即用戶交互，需要通過界面對功能的隱喻和引導(dǎo)用戶來完成對應(yīng)的操作。因此，UI不僅要有精美的視覺表現(xiàn)，也要有方便快捷的操作，以符合用戶的認(rèn)知和行為習(xí)慣。
最后，UI的高級形態(tài)可以理解為User Invisible（中文：看不見的）。對用戶而言，在這一層面UI是“不可見的”，這并非是指視覺上的不可見，而是讓用戶在界面之下與系統(tǒng)自然地交互，沉浸在他們喜歡的內(nèi)容和操作中，忘記了界面的存在。其實這就是用戶體驗，不僅僅是界面，而是以用戶為中心進行界面結(jié)構(gòu)、行為、視覺層面的設(shè)計。
從百科的對UI設(shè)計的定義可以看出，UI設(shè)計包含了界面設(shè)計、交互設(shè)計和用戶體驗設(shè)計，這也是國內(nèi)眾多UI設(shè)計書籍中的對UI設(shè)計的定義。比如在《術(shù)與道：移動應(yīng)用UI設(shè)計必修課》、《視界·無界：寫給UI設(shè)計師的設(shè)計書》、《UI設(shè)計精品必修課》等國內(nèi)設(shè)計書籍都有類似的觀點。甚至有這么一個很流行的比喻：如果把一款軟件產(chǎn)品比作一個美女的話，視覺就是一個美女的化妝和打扮，交互就是一個美女的五官位置及骨骼體態(tài)，用戶體驗就是美女是否善解人意、功能貼心、易用好用等。
第二種，UI設(shè)計、交互設(shè)計和用戶體驗設(shè)計是獨立的學(xué)科，他們雖然有很多重疊部分，但交互設(shè)計和用戶體驗設(shè)計不屬于UI設(shè)計，甚至UI設(shè)計等同于界面設(shè)計。
在Joel Marsh的《用戶體驗設(shè)計：100堂入門課》這本書中，作者舉了個例子：“UI和UX（用戶體驗設(shè)計）是兩種不同的工作。如果有的公司有‘UI/UX’這一職稱，那說明這家公司根本不了解什么是UX，或者他們想花一份錢就讓人做兩份工作。要當(dāng)心。”
在《這才是用戶體驗設(shè)計：人人都看得懂的產(chǎn)品設(shè)計書》里，作者認(rèn)為界面設(shè)計包括信息層和呈現(xiàn)層。UI設(shè)計的范圍比界面設(shè)計要小得多，通常僅關(guān)注虛擬產(chǎn)品的信息呈現(xiàn)，而且較少涉及藝術(shù)向的視覺設(shè)計。信息層則由交互設(shè)計師負責(zé)，待界面上要呈現(xiàn)的信息架構(gòu)和具體信息明確后，UI設(shè)計師才開始設(shè)計工作。其次UX設(shè)計師主要關(guān)注上層設(shè)計，而UI的工作非常細，比如如按鈕、字體的設(shè)計。
這種觀點也是目前國內(nèi)多數(shù)企業(yè)和設(shè)計師對UI設(shè)計的定義，UI設(shè)計就主要是負責(zé)界面設(shè)計的工作，尤其指移動端產(chǎn)品界面，比如APP、智能設(shè)備等。
結(jié)合以上兩種流派對UI設(shè)計的定義，我認(rèn)為，從視覺層面，UI設(shè)計可以定義為用戶界面設(shè)計，不管是web端、移動端還是其他智能設(shè)備，凡是涉及到用戶界面的設(shè)計，都可以歸納為UI設(shè)計；從交互層面，UI設(shè)計還需要思考界面對功能的隱喻和引導(dǎo)，從而幫助用戶完成對應(yīng)的操作；從體驗層面，UI設(shè)計需要從視覺、色彩、行為和交互等方面為用戶提供優(yōu)秀的體驗，讓用戶可以和系統(tǒng)自然地交互，沉浸在他們系統(tǒng)操作中。
總之，一名優(yōu)秀的UI設(shè)計師，絕非只是畫好圖標(biāo)、完成界面設(shè)計這樣的基礎(chǔ)工作，而是從整個產(chǎn)品的用戶體驗出發(fā)，從視覺到實際操作，為用戶提供最友好的使用體驗。理解這個概念，我們才能確立真正的學(xué)習(xí)目標(biāo)和職業(yè)定位，朝著一名優(yōu)秀的UI設(shè)計師而努力。

參考文獻：
百度百科-UI設(shè)計
《術(shù)與道：移動應(yīng)用UI設(shè)計必修課》- 余振華
《視界·無界：寫給UI設(shè)計師的設(shè)計書》- 王涵
《UI設(shè)計精品必修課》- 常麗 李才應(yīng)
《用戶體驗設(shè)計：100堂入門課》- Joel Marsh
《這才是用戶體驗設(shè)計：人人都看得懂的產(chǎn)品設(shè)計書》- 李磊

Q5. UI設(shè)計有什么分類？

從用戶人群劃分，像淘寶、美團這樣以個人消費者（Customer）使用為主的產(chǎn)品，稱為C端產(chǎn)品，屬于最常見的UI設(shè)計，稱為C端UI設(shè)計；而像有贊、微盟這樣的以服務(wù)企業(yè)（Bussiness）的產(chǎn)品，稱為B端產(chǎn)品，這就是B端設(shè)計師的由來，目前市場對B端UI設(shè)計師的需求比較大。
從使用設(shè)備劃分，從事電腦端設(shè)計的稱為WUI（Web User Interface），也就是網(wǎng)頁設(shè)計師，從事移動端設(shè)計的稱為GUI（Web User Interface，圖形處理設(shè)計師），是我們普遍理解的UI設(shè)計師。
從設(shè)計對象劃分，UI設(shè)計可以分為電腦界面、APP界面、平板、智能手表、車載導(dǎo)航設(shè)備、智能電視界面、可穿戴設(shè)備界面、醫(yī)療及各種數(shù)碼機床等自動化控制界面和微型嵌入式設(shè)備界面等類型。
從交互方式劃分，UI設(shè)計可以分為GUI和VUI，GUI就是我們上文提到的圖形處理設(shè)計師，而VUI（Voice User Interface）則是通過語音交互的界面設(shè)計，比如小度、天貓精靈。
從行業(yè)劃分，UI設(shè)計師可以分為不同行業(yè)的設(shè)計師，比如從事醫(yī)療產(chǎn)品的UI設(shè)計師，從事人工智能的UI設(shè)計師。
簡單總結(jié)，未來隨著各種智能設(shè)備、人工智能、AR的發(fā)展，將會誕生出更多細分行業(yè)的UI設(shè)計師，不管是現(xiàn)在最火爆的B端設(shè)計師，還是車載設(shè)計師，未來面對日新月異的科技發(fā)展，只有理解UI設(shè)計的本質(zhì)和方法，才能應(yīng)付越來越多的不確定性。

作者：設(shè)計大偵探
鏈接：https://www.zcool.com.cn/article/ZMTUwMjgwMA==.html
來源：站酷

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

                         

這是一篇醞釀了比較久的內(nèi)容了，來講解 B 端設(shè)計規(guī)范和組件庫的分享。這幾年網(wǎng)上出了不少類似的分享，雖然都寫得很全，都還是覺得不夠滿意，缺了一點點細節(jié)。
所以我自己出一版，希望能幫助你們一次性解決這些問題。

1.1 設(shè)計規(guī)范和組件庫

B 端項目設(shè)計中，設(shè)計規(guī)范和組件庫是一個繞不過去的檻。作為專業(yè)的 B 端設(shè)計師，必須有自己完成設(shè)計規(guī)范和組件庫的能力。

所以，首先我們要先理清楚什么是設(shè)計規(guī)范和組件庫。

設(shè)計規(guī)范是項目設(shè)計中要遵守的要求、細節(jié)、準(zhǔn)則，規(guī)定了諸如色彩、字體、柵格、間距、圓角等要素的規(guī)則，這些內(nèi)容都是可以在大量設(shè)計元素中應(yīng)用的細節(jié)。

換句話說，設(shè)計規(guī)范就是提取在項目中會廣泛使用的要素，并進行統(tǒng)一制定的過程，防止設(shè)計師在設(shè)計過程中隨意發(fā)揮，導(dǎo)致項目統(tǒng)一性的崩壞。

組件庫，是通過梳理項目中應(yīng)用到的按鈕、開關(guān)、滑塊、日歷、下拉菜單等控件、組件的設(shè)計樣式、狀態(tài)、交互規(guī)則，再將它們統(tǒng)一復(fù)用到項目的不同頁面中去。

嚴(yán)格意義上來說也是設(shè)計規(guī)范的一部分，是基礎(chǔ)規(guī)范的進一步延伸，但還是單拎出來講。因為組件庫的應(yīng)用不僅僅是設(shè)計統(tǒng)一性的問題，還融合了 ”組件化“ 的編程思路在里面。

組件化：將復(fù)雜系統(tǒng)拆分成不同功能獨立的模塊并重組的過程，且每個模塊包含對應(yīng)的狀態(tài)和屬性。

對于程序員來說，一個項目就是若干功能模塊的合集，往往是先開發(fā)這些功能模塊，再搭建對應(yīng)的完整頁面，而不是看一個頁面開發(fā)一個頁面。

所以制定完善的組件庫，除了提升設(shè)計質(zhì)量外，還可以很好的提升開發(fā)效率，推進項目進度。

設(shè)計規(guī)范和組件庫的搭建，就是一個由下至上的設(shè)計鏈路，通過對細節(jié)的制定來實現(xiàn)最終的項目表現(xiàn)層?？梢越柚鷱V為流傳的分子原理來理解：

任何成熟的 B 端項目都應(yīng)該具備自己的設(shè)計規(guī)范和組件庫，雖然有很多小團隊在前期推進項目時，因為各種問題沒有搭建或落地設(shè)計規(guī)范，但并不代表他們在招人的時候沒有要求。

項目規(guī)范是一個典型的 “項目團隊可以沒有，但你不能不會” 的基本招聘要求。

1.2 開源組件庫和項目規(guī)范

在今天搭建 B 端項目規(guī)范時，新手還有一個普遍的問題：

項目規(guī)范和開源框架的規(guī)范有什么區(qū)別，如果選了一套開源框架做設(shè)計，設(shè)計師不就不用做規(guī)范了？

初級設(shè)計師會這么想并不奇怪，因為以 AntDesign 為首的開源框架做的實在是太完善了，不僅囊括了整套的 Web 色彩系統(tǒng)，還有各類常用的、不常用的交互組件。

它們不僅僅提供了相關(guān)的設(shè)計源文件，也給開發(fā)提供了對應(yīng)的代碼和接口，方便程序員應(yīng)用?？雌饋砦覀冎灰雌唇M件就可以和開發(fā)無縫銜接了……

這顯然是不可能的，正是因為開源框架太全面，可以產(chǎn)生無數(shù)種可能，我們才更應(yīng)該整理自己的項目規(guī)范。就像我前面已經(jīng)提到過的，設(shè)計規(guī)范是種 ”限制“，而不僅僅是設(shè)計風(fēng)格的簡單沉淀。

比如，不管你選了哪套開源框架，它提供了多少種色彩，你的項目都應(yīng)該有自己的項目主色，適當(dāng)?shù)妮o助色彩，而不可能把它的整套配色都應(yīng)用進去。所以，即使顏色沒有跳出原有色彩系統(tǒng)，也要篩選出你用到的顏色進行記錄。

再比如，開源框架的很多控件，都提供了好幾種樣式和方案，并不是讓你全部都用進去，而是選擇自己覺得合適的。所以你每個控件中選擇的方案，也需要做記錄，統(tǒng)一后續(xù)的頁面設(shè)計。

前面只是記錄選擇，都還比較簡單，而最關(guān)鍵的問題在于，開源框架的組件不可能完美符合項目的全部需求。必然要在原有的基礎(chǔ)上作出大量細節(jié)的優(yōu)化，或者創(chuàng)建出新的業(yè)務(wù)組件出來，所以設(shè)計師還是要把這些內(nèi)容整理出來。

開源框架，就是給我們提供了一個比較全面的設(shè)計范圍，讓我們站在別人的肩膀上做選擇，提高設(shè)計規(guī)范的制作效率，而并不是讓我們直接躺平，復(fù)制黏貼就可以了。

同時，設(shè)計規(guī)范和組件需要在軟件中進行運用，我們也同樣不能直接使用官方提供給我們的組件庫展開自己的項目設(shè)計，要根據(jù)自己項目的規(guī)范獨立進行搭建和使用。

下面，我們就要根據(jù)設(shè)計規(guī)范的內(nèi)容，來講解如何結(jié)合并使用即時設(shè)計、Figma 的相關(guān)功能。

2.1 和規(guī)范有關(guān)的功能解析

之所以 UI 設(shè)計軟件能取代 PS 獨立發(fā)展，就是因為 UI 設(shè)計中包含大量需要復(fù)用和批量修改的功能。而這些功能和設(shè)計規(guī)范有非常大的聯(lián)系，也是 UI 設(shè)計中項目規(guī)范能被落地實踐的重要保障。

但因為 Figam 和即時等次時代 UI 設(shè)計軟件提供了越來越多的功能，用來支持設(shè)計規(guī)范的實踐，且這些功能可以相互交叉、重疊、組合，導(dǎo)致很多人在前期學(xué)習(xí)中會被軟件功能繞暈，導(dǎo)致很多人沒有理解這些功能意義和價值，更不知道如何在項目中具體實踐。

所以，我們先將這些功能整體理解一遍，再逐一來對它們的使用規(guī)則和應(yīng)用場景進行拓展。

2.1.1 樣式功能

樣式功能是用來記錄圖層樣式設(shè)置的功能。簡單點理解，就是記錄圖層右側(cè)的屬性設(shè)置的功能。正常我們選擇一個基礎(chǔ)圖層，軟件右側(cè)的屬性面板會將圖層樣式拆解成若干的類別，包括填充、描邊、字體、陰影、模糊。

而樣式功能，就是幫助設(shè)計師對不同的樣式類別進行記錄和復(fù)用的過程，它會直接將該分類內(nèi)的相關(guān)參數(shù)值記錄下來，并進行命名，方便后續(xù)的調(diào)用。

而每個樣式分類獨立生成記錄的好處，就是可以為了方便讓設(shè)計師自由進行樣式的組合。比如填充制定了紅、藍、綠三種，投影制定了深、淺兩種，使用者可以自由搭配這些選項。

2.1.2 響應(yīng)式功能

響應(yīng)式功能是讓圖層隨上級編組尺寸變動而自適應(yīng)的功能，方便我們在修改組件的大小時不用重新調(diào)節(jié)里面的元素細節(jié)。

例如設(shè)計一個卡片，可以通過響應(yīng)式的設(shè)置，讓頭部的元素左右對齊，下方的文本區(qū)域自動拓展，保持卡片的內(nèi)間距不變。

或者頁面右下角懸浮按鈕，也可以通過響應(yīng)式設(shè)置始終處于頁面底部，這樣我們在增加頁面高度的時候不用重新設(shè)置該元素的 Y 軸位置。

軟件中的響應(yīng)式并不等同于廣義的網(wǎng)頁響應(yīng)式技術(shù)，它不能實現(xiàn)完整的柵格布局和流體響應(yīng)，只能幫助我們來解決一些最基本的響應(yīng)需求，這在后面的章節(jié)中再具體介紹。
2.1.3 自動布局功能

自動布局功能，是通過前端布局思路來設(shè)置元素布局方法自動排版功能，是 Figma 開發(fā)的最重要的功能，也是讓 Sketch 不再成為 B 端設(shè)計首選的核心因素。

它的主要功能如根據(jù)內(nèi)容自動完成尺寸變更，并列排版和順序的變更等。

自動布局可以極大的提升設(shè)計效率，正因為自動布局的出現(xiàn)，才讓項目組件庫可以真正被運用和落地實踐起來。

掌握自動布局是 UI 設(shè)計類軟件的靈魂，后面我們會解釋它的具體功能和應(yīng)用方法，然后再進入組件的具體使用環(huán)節(jié)，分析對應(yīng)的實際應(yīng)用場景。避免你們無法分清自動布局和組件的功能。

2.1.4 組件功能

組件功能在不同軟件有不同的叫法，如 Symbol、Component、Kits 等，主要是將指定的圖層或編組生成一個新的編組單位（類似智能對象），在后續(xù)設(shè)計中進行復(fù)用。

例如設(shè)計一個按鈕、開關(guān)，我們只要將它們生成為組件，就可以在后續(xù)設(shè)計中快速從組件庫里拖拽到設(shè)計頁面中，不用重新畫一遍，并且支持批量修改。

在組件應(yīng)用中，生成的第一個組件也叫父級組件，其它調(diào)用它的組件都是它的子組件，這是一個非常清晰的從屬關(guān)系。如果我們修改父級組件的內(nèi)容，所有子組件都會被統(tǒng)一修改。

組件的應(yīng)用除了這種最基礎(chǔ)的應(yīng)用以外，還包含了很多特殊的功能，如將低級組件合并成一個高級組件的嵌套，或者 Figma 前兩年發(fā)布的變體（Vriants），可以將一個組件的不同狀態(tài)聚合到一起，通過屬性面板來切換相關(guān)的狀態(tài)。

組件功能是 UI 類軟件最復(fù)雜的功能，它不僅本身設(shè)置很豐富，同時也可以結(jié)合樣式、響應(yīng)、自動布局，讓本來死板的組件變得更靈活可控，應(yīng)對復(fù)雜的設(shè)計環(huán)境。

2.2 樣式功能

在軟件中，記錄樣式就是在對應(yīng)的屬性面板上 “創(chuàng)建” 并 “命名”，就將對應(yīng)設(shè)置數(shù)據(jù)轉(zhuǎn)化成一個指定名稱的記錄，方便我們記憶和調(diào)用。

比如，填充色中使用了兩種色彩相近的色彩和不同透明度，我們就可以使用中文命名來區(qū)分，其中 #2B6DCF 80% 叫 輔助色，#2B93CF 90% 叫 主色。

創(chuàng)建完成的填充色記錄，就會在對應(yīng)的屬性樣式列表中出現(xiàn)，之后就可以在對應(yīng)圖層的屬性中關(guān)聯(lián)該記錄了。

之后，所有關(guān)聯(lián)到該記錄的圖層屬性，都可以快速應(yīng)用該記錄內(nèi)的參數(shù)。如果我們在樣式的列表中修改該記錄的數(shù)值，那么所有關(guān)聯(lián)到該記錄的圖層就會一起被修改。

一定要牢記，目前的主流 UI 工具中，樣式是根據(jù)不同屬性類型記錄的。比如一個字體圖層，它的填充、字體、描邊、投影，是可以創(chuàng)建不同的樣式記錄的，各不影響。

而軟件 Sketch 的樣式邏輯，則是根據(jù)圖層類型來記錄的，比如矩形和字體，會記錄該圖層下所有樣式屬性的參數(shù)，且該記錄只能應(yīng)用在同類的圖層上（而 XD 只能記錄色彩和字體樣式…）。

這種做法雖然理解起來容易，但是會導(dǎo)致樣式數(shù)量大幅度增加。尤其是在字體上，變動填充、描邊都要設(shè)置一個新的樣式，這在實際項目中的靈活性是非常差的。

而即時設(shè)計、Figma 則不考慮圖層類型，只關(guān)注屬性類型。類似前端的樣式表中 “類（Class）” 的應(yīng)用，每個類有不同的樣式參數(shù)，只要定義了類的命名和屬性、參數(shù)，那么不同 Div （即圖層）就可以自由組合這些樣式記錄了。

比如色彩 color、陰影 shadow、描邊 board 各定義了1、2、3 三種樣式類，那么就可以像下方案例中自由組合：

<Div Class = “ color2 shadow1 board3 ”> </div>

<Div Class = “ color1 shadow3 board2 ”> </div>

所以，樣式功能可以幫助我們在前期快速搭建基礎(chǔ)視覺規(guī)范內(nèi)容，將規(guī)范中的配色、字體、投影、模糊等參數(shù)整理進樣式表中，方便我們后續(xù)的快速調(diào)用和統(tǒng)一修改。

2.3 響應(yīng)式功能

響應(yīng)式是我們前面做過很多期分享的課題了，基于 BootStrap 的完整響應(yīng)式功能確實非常強大，可以通過柵格布局來實現(xiàn)豐富的響應(yīng)方式。

雖然 UI 軟件中也提供了 ”響應(yīng)式“ 這樣的功能，但它可以實現(xiàn)的效果非常有限。用一句話概括就是：

“圖層基于父級畫板 Frame 的匹配邏輯”

比如我們先創(chuàng)建一個畫板，然后再置入相關(guān)的圖層，那么這些圖層就可以啟用響應(yīng)式規(guī)則。包含間距固定、居中對齊、等比縮放這三種響應(yīng)規(guī)則。

間距固定的意思，就是圖層基于父級畫板的某間距數(shù)值是固定的，不管畫布尺寸怎么變動，圖層和畫布的對應(yīng)間距都是保持一致的。比如常規(guī)的某一方向間距固定。

比如在模塊上的標(biāo)題欄，就可以將欄目設(shè)置成一個 Frame，然后標(biāo)題相關(guān)元素左間距對齊，更多圖標(biāo)右間距對齊，之后變更標(biāo)題欄的寬，圖層的對齊關(guān)系就是不變的。

而設(shè)置左右、上下間距同時對齊，則是圖層會隨畫布的尺寸變動修改自身的寬高來滿足。

居中模式則是圖層根據(jù)畫布的大小進垂直、水平方向的對齊，忽略間距數(shù)值。

最后一個縮放的設(shè)置，用起來和兩側(cè)間距對齊很接近，也是放大縮小畫布圖層會跟著一起變動，但它響應(yīng)的邏輯是依據(jù)比例，而不是間距。這個設(shè)置在實際項目中很難派上用場。

過往的設(shè)計軟件中，父集尺寸變更，下級元素只能機械的執(zhí)行縮放效果。而響應(yīng)式設(shè)置就是避免這種僵硬的效果，向真實的網(wǎng)頁適配方式看齊。

同時，這種父集對齊的邏輯是可以進行嵌套使用的，比如剛才的標(biāo)題欄，可以將這個畫板再置入到整個卡片畫板之下，并對 “標(biāo)題欄畫板” 創(chuàng)建頂部對齊，左右間距對齊，那么該畫板本身的尺寸不管怎么變動，頭部標(biāo)題欄頂部位置固定，寬度間距和父集統(tǒng)一，標(biāo)題欄下方的元素也會左右對齊。

所以，將一個畫板中的元素響應(yīng)方式設(shè)置好，可以節(jié)省我們很多時間，不用再因為父集元素尺寸修改而一個圖層一個圖層修改下級元素的尺寸和位置。

在后續(xù)生成組件前，我們就要優(yōu)先完成畫板下方的響應(yīng)設(shè)置，這樣就能確保該組件支持靈活的調(diào)節(jié)和布局。比如用上方的卡片，就可以快速搭建一個表盤頁面的基本框架，我們要做的就是拖拽畫板到一個合適的尺寸即可，無需調(diào)節(jié)下級圖層。

但需要注意的事，即時設(shè)計和 Figma 觸發(fā)響應(yīng)式的設(shè)置是元素需要處于畫板 Frame 之下，而不是編組 Group 中， Sketch、XD 因為沒有 Frame 的概念，所以使用編組就可以應(yīng)用響應(yīng)式設(shè)置，這個區(qū)別一定要牢記。 同時，響應(yīng)式雖然可以完成很多高效的適配，但是它的局限性是無法打破的，例如無法實現(xiàn) 3 列以上的卡片列表等間距放大，或者隨寬度增加生成新列下方卡片補位。

2.4 自動布局功能

自動布局 Autolayout 作為一個自動排版功能，使用場景包含兩類，父子級響應(yīng)和依序排列。它們有各自的生成條件。

首先需要一個矩形圖層作為背景，并將其它下級圖層置入到矩形背景中去，全選后點擊 “自動布局“ 按鈕即可生成父子級響應(yīng)。如果圖層沒有完全置入矩形中或沒有相交，那么就會生成一個依序排列的自動布局出來。

創(chuàng)建自動布局會生成一個新的 “特殊編組”，用來收納下級圖層，它在圖層列表中會有新的圖標(biāo)。

2.4.1 父子級響應(yīng)布局

父子級響應(yīng)布局中，背景的矩形圖層會被自動移除，樣式被繼承到自動布局的編組上，針對該編組層的屬性設(shè)置，就等同于原先的背景矩形設(shè)置（和畫板 Frame 圖層邏輯一樣）。

這類布局最常應(yīng)用于按鈕控件上，可以讓按鈕的寬度隨文本寬度變化。

但光靠創(chuàng)建這個效果顯然是無法完整解釋自動布局的，我們就必須從前端的邏輯，來理解這種包含父子層級的元素如何實現(xiàn)自動布局。

首先就是前端環(huán)境中，很多控件、組件本身的尺寸是無法直接寫死的，它們是隨內(nèi)容自動調(diào)節(jié)的。而自動布局右側(cè)的設(shè)置面板中的田字格一欄，旁邊會有寬度和高度設(shè)置，默認(rèn)都是 “自動 Auto”，這就是說它們會隨內(nèi)容寬高進行響應(yīng)。

比如上方的按鈕，它實現(xiàn)的邏輯就是：

按鈕寬 = 元素內(nèi)容寬 + 左右間距

按鈕高 = 元素內(nèi)容高 + 上下間距

這種情況是父層級基于子層級的響應(yīng)，應(yīng)用于無法確定父級圖形尺寸的場景，如按鈕、標(biāo)簽、單元格、瀑布卡片等。

但前端中的不確定性并不是只有這一種，還可以反過來，子圖層大小不確定，需要它們?nèi)ロ憫?yīng)父級圖層的尺寸變更。

比如一些文本卡片，會應(yīng)用在不同的頁面中，且根據(jù)應(yīng)用的場景會有寬高的調(diào)節(jié)，所以需要下級的文本區(qū)域可以跟隨上級尺寸響應(yīng)。

我們就需要把父級布局設(shè)置成 “固定寬/高”。還要選中子圖層，在它的自動布局選項中選擇 “自適應(yīng)”，來滿足這個相反的需求。

如果子圖層沒有設(shè)置自適應(yīng)，那么它就不會直接隨著父級圖層變更自己的尺寸。但還是有針對子元素的響應(yīng)設(shè)置 —— 對齊模式。

在父級布局設(shè)置中，有一個網(wǎng)點模塊，可以設(shè)置下級圖層的對齊模式。當(dāng)下級圖層不處于自適應(yīng)模式時，則對齊可以修改下級元素的對齊方向，即前面響應(yīng)式設(shè)置中的 “間距固定”。

2.4.2 依序排列布局

前面我們演示的案例都只有一個子圖層，如果出現(xiàn)多個子圖層的話，自動布局也可以幫我們進行調(diào)節(jié)，除對齊外還包含子圖層排列方式、分布方式，而這就是依序排列的布局模式。

排列方式就是多個子圖層橫排還是豎排的設(shè)置。

分布方式，則是這些子圖層布局的位置怎么定，默認(rèn)包含固定間距和自適應(yīng)兩種。

固定間距即子元素排列的間距保持一致，在右側(cè)的輸入框中可以設(shè)置間距數(shù)值，也可以結(jié)合對齊模式來設(shè)置整體的對齊方向。

而自適應(yīng)，則是在父級區(qū)域內(nèi)進行等分，這個等分的邏輯比較特別，需要左右各有一個子圖層靠到頭，新增的圖層在這個基礎(chǔ)上進行 “等間距分布”。

依序排列的優(yōu)勢，除了把現(xiàn)有的子圖層快速布局以外，還可以用拖拽、鍵盤調(diào)整元素順序。或者從外部拖動某個圖層到該區(qū)域中，就可以插入序列，成為下級圖層之一。

2.4.3 混合布局模式

前面兩種布局模式，可以解決各種 UI 設(shè)計中的細節(jié)設(shè)置問題，理解起來也并不難，只要自己去操作一下就能學(xué)會。而真正讓人頭疼的，是自動布局可以相互嵌套，并混合這兩種模式，在復(fù)雜的頁面設(shè)計場景和組件模塊中靈活應(yīng)用。

下面我們通過一個模態(tài)對話框 Modal Dialog 案例來進行說明。這個對話框會包含3種不同的寬度規(guī)格，且對話內(nèi)容不確定，可能會字?jǐn)?shù)很多包含很多行的高度。

想要用自動布局實現(xiàn)一個滿足需求的對話框，我的建議是先學(xué)會拆分里面的下級模塊，通過完成下級模塊的設(shè)置后再進行最終的合并調(diào)節(jié)。

在這個對話框中， 包含三個模塊，頂部標(biāo)題欄、中間內(nèi)容區(qū)域，底部操作欄。

首先從頂部標(biāo)題欄開始，我們隨意創(chuàng)建個 280px * 44px 的矩形，然后再置入標(biāo)題和圖標(biāo)到矩形中。之后全選它們創(chuàng)建成自動布局，然后設(shè)置父層級內(nèi)間距，且改成寬度固定、分布自適應(yīng)，就可以獲得一個可以隨意修改寬度的標(biāo)題欄了。

然后就是內(nèi)容區(qū)域，本質(zhì)上就是一個文本區(qū)域，所以我們拖拽一個文本區(qū)域出來，設(shè)置好對應(yīng)的參數(shù)和填充一點文本即可。

而底部操作欄，則在一開始做好兩個按鈕（可以使用自動布局做）和背景以后，就可以進行合并，只是父級元素上的設(shè)置要改成固定寬度和右對齊，并設(shè)置布局間距（按鈕間距）。

這三個模塊完成以后，我們再選中它們進行自動布局合并，把它們設(shè)置成豎排模式，再添加背景色和排列間距，就可以實現(xiàn)出一個正常的對話框效果。

到這一步，如果我們修改對話框整體的寬度，或者輸入多行的文本，都無法達到預(yù)期的效果，所以還要在這個基礎(chǔ)上進一步的調(diào)整。

首先是寬度適應(yīng)，我們要先將最上級的自動布局改成 “固定寬度”，然后將下級圖層都改為 “自適應(yīng)”，這樣我們增加組件的寬，下方布局就會立即響應(yīng)，且推導(dǎo)到更下級的圖層中。

為了滿足文字寬度隨父級響應(yīng)，高度影響父級高度，就要將頂部的自動布局改成 “高度適配”，再將下級的文本改成 “寬度自適應(yīng)”、“自動高度”，然后，我們就可以隨意拖動這個自動布局的寬，和添加任意的文本內(nèi)容了。

完成這個基本的版本以后，我們再根據(jù)項目需要的三個寬度，直接將它復(fù)制成 3 份，每份直接設(shè)置對應(yīng)的寬度出來，就可以作為后續(xù)的 “原始組件” 在項目中進行快速引用了。

在這個案例中，我們前后嵌套了若干層的自動布局，每層自動布局的上下級會有各自的響應(yīng)關(guān)系，需要我們逐一進行確認(rèn)。并且，細心的同學(xué)應(yīng)該也發(fā)現(xiàn)，這里面有很多設(shè)置似乎和前面的響應(yīng)式設(shè)置非常類似，那把一些下級布局從一開始就做成響應(yīng)式的編組行不行？

答案是可以的…… 響應(yīng)式設(shè)置和自動布局，本質(zhì)上都是為了節(jié)省我們操作時間而設(shè)計的功能，我們要從實際設(shè)計的對象出發(fā)，選擇合理的功能來實現(xiàn)最終的效果。而不是只能使用自動布局，或者只能使用響應(yīng)式。

也不要因為了解了響應(yīng)式包含了非常強大的自適應(yīng)功能，而認(rèn)為項目中任何組件、頁面，都要全由它們組成。在需要頻繁優(yōu)化頁面內(nèi)容、調(diào)整設(shè)計需求的項目里，過度嵌套的自動布局會讓設(shè)計文件的 “熵” 值無限增加，會產(chǎn)生更多復(fù)雜的、沒有效率的問題。

相信引用過 Ant、TDesign 等組件庫文件進行設(shè)計的同學(xué)應(yīng)該都深有體會……

至于怎么用才好，沒有標(biāo)準(zhǔn)的答案，就需要未來大家自己去積累相關(guān)經(jīng)驗了。

2.5 組件功能

2.5.1 組件的使用邏輯

有了前面響應(yīng)式和自動布局的認(rèn)識，我們就要進入到組件功能的具體應(yīng)用上了。

組件的創(chuàng)建，首先要選中對應(yīng)的設(shè)計元素，可以是單個圖層，也可以是編組、自動布局層，然后點擊生成組件按鈕就可以創(chuàng)建出一個 “原始” 組件。

在即時設(shè)計中，這個組件叫 “引用組件”，從該組件復(fù)制、引用出來的副本叫做 “實例組件”。它們具有明確的從屬關(guān)系。

在這個關(guān)系中，引用組件是完全可編輯修改的，只要修改它就可以統(tǒng)一修改關(guān)聯(lián)的所有副本樣式。

但由引用組件創(chuàng)建出來的副本，卻不能任意編輯，我們不能修改它下級圖層的尺寸、位置、順序。但是，副本的編組大小、圖層色彩、文字內(nèi)容往往會有很多特殊的調(diào)節(jié)需求，所以目前主流的 UI 軟件都支持了副本組件的尺寸修改、色彩編輯和文本內(nèi)容編輯，讓組件的使用更靈活。

以上就是組件使用的最基本邏輯，更進一步，組件作為一個編組，所包含的下級圖層的邏輯都會被保留下來，例如樣式設(shè)置、響應(yīng)式設(shè)置、自動布局邏輯。如果一個編組原本就已經(jīng)創(chuàng)建好了這些規(guī)則，那么當(dāng)它被創(chuàng)建成組件，不管是引用組件還是副本，都會繼承這些設(shè)置。

比如上一小節(jié)中的通知彈窗案例，設(shè)置好自動布局再創(chuàng)建成引用組件以后，生成的副本就可以靈活的進行調(diào)整和修改文本內(nèi)容。

除了樣式、響應(yīng)、自動布局外，組件也可以包含組件。我們前面說過，按原子核的結(jié)構(gòu)來講，一個復(fù)雜的組件是由若干基礎(chǔ)元素和控件組合而成。比如上方這個案例，就由多個模塊、文本區(qū)域和按鈕組成。

如果我們提前將按鈕、圖標(biāo)等創(chuàng)建成引用組件，那么最終整個大的編組再創(chuàng)建成引用組件也是沒有問題的，原來的組件格式并沒有被抹消。

但有個細節(jié)值得注意，就是一個引用組件下方包含的組件只能是 —— 副本。如果剛才我們將按鈕創(chuàng)建成引用組件，那么上級編組再創(chuàng)建的引用組件就會自動將這些按鈕轉(zhuǎn)換成副本，并在畫布周圍生成新的引用組件。

所以這個順序也預(yù)示了，組件的嵌套是由下而上的，我們需要先創(chuàng)建低級的引用組件，再用它的副本逐步去組合更復(fù)雜的引用組件。這在后面的章節(jié)會進一步做出說明。

2.5.2 組件的文件管理

創(chuàng)建引用組件，除了在畫布中它的描邊色彩不一樣，圖層中的圖標(biāo)改變了以外，還會出現(xiàn)在一個新的位置中 —— 組件管理面板。

任何創(chuàng)建的組件都會被生成到左側(cè)的組件欄目面板中，只要從那里拖拽就可以置入當(dāng)前畫布中，方便我們調(diào)用和查看。

看起來雖然很簡單，但是需要我們管理的細節(jié)卻很多。首先就是這個列表是一個包含層級關(guān)系的樹樁結(jié)構(gòu)目錄，是允許我們對組件的層級進行結(jié)構(gòu)自定義的。

當(dāng)我們創(chuàng)建一個引用組件的時候，如果它處于一個畫板中，那么創(chuàng)建后它會在組件面板中保留該組件的默認(rèn)文件路徑：

頁面 Page / 畫板 Frame / 組件 Compoent

如果我們在不同頁面和不同畫板中創(chuàng)建引用組件，那么該面板的目錄一定是特別混亂無序的。所以為了創(chuàng)建出符合正常分類使用習(xí)慣的組件目錄，就要做出調(diào)整。

首先就是建議在項目文件中創(chuàng)建一個獨立的頁面 Page 用來存放引用組件，任何新增的引用組件我們都需要將它置入到該頁面中。且不要將引用組件直接置入到畫板中，這樣它就不會生產(chǎn)包含畫板的層級出來。

然后，我們就可以在文件命名中，使用正斜杠 Slash 符號 “/” 作為層級劃分依據(jù)。比如下面的案例，包含相同上級結(jié)構(gòu)的組件會被聚合到一個目錄層級中：

• 數(shù)據(jù)錄入/上傳/亮色/拖拽上傳
• 數(shù)據(jù)錄入/上傳/亮色/上傳中
• 數(shù)據(jù)錄入/上傳/亮色/上傳成功
• 數(shù)據(jù)錄入/上傳/亮色/上傳失敗
• 數(shù)據(jù)錄入/上傳/亮色/上傳成功懸停
• 數(shù)據(jù)錄入/上傳/亮色/上傳失敗懸停

這種命名結(jié)構(gòu)帶來的另一個好處，就是處于同一個目錄層級下的組件，在屬性面板中可以進行快速的切換。尤其是一些相近的組件要做替換不用再在樹樁列表中重新找一遍，直接通過下拉菜單替換即可。

使用命名方式來梳理組件列表，完成有邏輯性、清晰的組件目錄，可以極大地提升組件的利用率和效率。但命名必然不是一邊創(chuàng)建組件一邊憑感覺命名的，而是一開始就要在外部完成的，例如通過思維導(dǎo)圖的方式制定出結(jié)構(gòu)大綱，才能保證最終效果符合預(yù)期。

2.5.3 組件中的變體功能

組件的應(yīng)用中，除了不同組件的引用外，過去最讓我們頭痛的就是同一個組件的不同狀態(tài)。比如一個簡單的按鈕，就包含非常多的類型，默認(rèn)、懸浮、按壓、點過、禁用、讀取等等。

為了在項目中可以使用組件的不同狀態(tài)，就需要我們在命名上下功夫，比如：

• 控件 / 基礎(chǔ) / 按鈕-大 / 默
• 控件 / 基礎(chǔ) / 按鈕-大 / 懸浮
• 控件 / 基礎(chǔ) / 按鈕-大 / 點擊
• 控件 / 基礎(chǔ) / 按鈕-大 / 禁用

就是用前面提到的右側(cè)下拉菜單，來完成同一組件的不同狀態(tài)切換。理論上這么實現(xiàn)是沒有問題的，但在實踐過程中，不僅組件列表的數(shù)量要大大增加，且下拉菜單第一步只改狀態(tài)顯得非常局促……

所以，從 Figma 開始推出了變體 Variants 功能，來更好地應(yīng)對同一組件不同狀態(tài)的高效應(yīng)用。目前該功能已經(jīng)在線上 UI 設(shè)計軟件中普及。

在即時設(shè)計中，只要創(chuàng)建了引用組件，那么選中它后右側(cè)就會有 “變體” 一欄，點擊它就可以針對該組件創(chuàng)建出變體效果。

變體中原來的組件一分為二，并不是完全生成出一個全新的組件，而是在這個組件的概念下創(chuàng)建了一個新的狀態(tài)出來，在組件列表面板中沒有生成任何新的內(nèi)容。

但是當(dāng)我們再添加一個該組件的副本以后，就會發(fā)現(xiàn)它的右側(cè)多了一個條目和下拉菜單，通過這個下拉菜單就可以切換剛才變體內(nèi)的不同組件。

比如我們在變體內(nèi)選中兩個組件，在右側(cè)變體的下拉菜單中可以點擊修改命名，將它們分別改成 “默認(rèn)” 和 “選中”，再修改對應(yīng)的樣式。然后再應(yīng)用同一個副本，就可以看見下拉菜單的內(nèi)容也替換成了“默認(rèn)” 和 “選中”，通過選擇不同的文字，就可以切換成對應(yīng)的組件樣式。

這個功能可以很方便的切換組件的不同狀態(tài)，但如果它僅僅支持到這一步，那確實和使用命名編組的方法沒有本質(zhì)區(qū)別。真正讓變體產(chǎn)生價值的，就在于同一組件的多屬性、多狀態(tài)支持。

還用按鈕舉例，比如一個按鈕包含 3 種樣式：純文字、純圖標(biāo)和文字加圖標(biāo)，再包含 3 種狀態(tài)：默認(rèn)、懸浮、點擊，還有淺色和深色模式……

也就意味著，按鈕包含樣式、狀態(tài)、色彩三種屬性，每個屬性中的值可以相互結(jié)合，那么總共就要設(shè)計出 18 個對應(yīng)的按鈕出來。

如果我們使用變體每個樣式命名一個名字，那么下拉菜單有12個選項選起來也是很頭疼的。所以，變體允許我們自定義組件屬性和值，幫助我們更好的歸類和選擇組件樣式。

所以，在變體面板中，我們可以在更多選項中選擇添加分類就添加對應(yīng)的屬性內(nèi)容，添加出 3 個分類后，通過雙擊修改它們的名字為 ”樣式“、”狀態(tài)“、”色彩“。

有了屬性，變體下方的組件命名就會根本變更。如下圖所示，默認(rèn)一次顯示屬性值，雙擊則可以查看對應(yīng)的屬性名和值。

即變體的基本命名語法為 —— 屬性1 = 對應(yīng)類型, 屬性2 = 對應(yīng)類型, 屬性3 = 對應(yīng)類型。

我們就可以通過這種語法方式完成對上方按鈕的統(tǒng)一命名，如：

• 樣式 = 圖標(biāo), 狀態(tài) = 默認(rèn), 色彩 = 淺色
• 樣式 = 圖標(biāo), 狀態(tài) = 懸浮, 色彩 = 淺色
• 樣式 = 圖標(biāo), 狀態(tài) = 點擊, 色彩 = 淺色
• 樣式 = 文字, 狀態(tài) = 默認(rèn), 色彩 = 淺色
• 樣式 = 文字, 狀態(tài) = 懸浮, 色彩 = 淺色
• ……

然后，將這些組件統(tǒng)一添加到同一個變體下，之后創(chuàng)建的副本，就可以在右側(cè)變體面板中進行多維度的選項操作了。

具體的變體設(shè)置，分類、值的設(shè)置，可以自己在軟件中摸索，我就不演示了。這里再額外提一個功能，就是對值的設(shè)置上，還可以應(yīng)用 “布爾” 的規(guī)則，即選項中只包含 “是” 或 ’否“。

如果我們在色彩的值中只使用 ”是，否“、”yes，no“、”開，關(guān)“ 等反義詞，那么副本變體選項中就會啟用開關(guān)按鈕，來替代原本的下拉菜單，提升操作的效率。

變體的使用可以很好的減少組件面板中組件的數(shù)量，提升組件狀態(tài)切換的效率。如果一個組件創(chuàng)建變態(tài)后被嵌套在另一個組件之下，那么這個復(fù)合組件也可以快速修改下級組件的變體類型。

雖然變體功能看起來非常強大，但它并不能適用所有場景，因為修改起來影響的要素過多。它更適用于基礎(chǔ)的控件和組件類型。如果針對復(fù)雜組件，尤其是包含多層組件嵌套的場景，往往使用命名的方式會比使用變體更有效率，這就需要大家自己在項目中積累經(jīng)驗做判斷。

2.5.4 組件的發(fā)布和共享

通過前面的功能，就可以完成組件庫的對應(yīng)設(shè)置了，你可以在這個項目文件中調(diào)用這些組件完成項目。

但實際項目中，組件庫的使用可不能被局限在一個項目文件里，我們往往會創(chuàng)建很多個項目文件，來設(shè)計不同的流程、版本、模塊。于是，這些不同的文件都需要調(diào)用同一個樣式和組件庫。

所以，要讓包含規(guī)范的文件能被其它文件引用，就需要我們在組件面板中，點擊設(shè)計庫按鈕，在彈窗中點擊 ”發(fā)布“，將它創(chuàng)建成一個設(shè)計資源庫。這樣，我們在別的文件中再次打開這個面板，就可以看到這個資源的開關(guān)，點擊開關(guān)后，該文件就能調(diào)用里面的樣式和組件了。

在項目中，需要先新建團隊并邀請相關(guān)成員，然后再創(chuàng)建設(shè)計資源庫，那么其他設(shè)計師才可以引用該資源來完成相關(guān)頁面的設(shè)計。

至于每次原文件更新并落實到引用的其它文件這些細節(jié)操作，就需要大家自己去實踐了。

作者：酸梅干超人
鏈接：https://www.zcool.com.cn/article/ZMTUwODcxMg==.html
來源：站酷
 

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

                

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

我們都在研究好的設(shè)計，感嘆優(yōu)秀的產(chǎn)品帶給我們的尖叫，但我們或許從未思考過，糟糕的用戶體驗設(shè)計也會給用戶帶來很大的傷害。這個產(chǎn)品體驗欄目的靈感來自于喬納森·沙利亞特的《設(shè)計的陷阱：用戶體驗設(shè)計案例透析》這本書。在本書的介紹里，有這么一句話——設(shè)計能殺人、使人憤怒、使人傷心。讀到這句話的時候，讓人驚愕，讓人不可思議，但這就是事實，這就是糟糕的用戶體驗設(shè)計會導(dǎo)致的后果。「體驗陷阱」的第一期，就讓我們來看看那些被忽視的文章編輯器對用戶體驗的影響有多糟糕。

一、什么是文章編輯器？

文章編輯器是一個產(chǎn)品最基礎(chǔ)的構(gòu)成部分，不管是前臺還是后臺，編輯器都是一個非?；A(chǔ)的功能。比如一個產(chǎn)品需要發(fā)布新的資訊內(nèi)容，在后臺就一定需要有一個文章編輯器才能實現(xiàn)這個功能。
文章編輯器在各大網(wǎng)站、APP產(chǎn)品里都非常常見，特別對于以內(nèi)容生產(chǎn)為主的社區(qū)、平臺，比如像站酷網(wǎng)、人人都是產(chǎn)品經(jīng)理、知乎、頭條、網(wǎng)易這些平臺，文章編輯器是一個非常基礎(chǔ)又必不可少的功能。

二、我們理想中的文章編輯器？

1. 有用性
文章編輯器要能實現(xiàn)內(nèi)容的發(fā)布，當(dāng)用戶從本地或在線文檔（比如騰訊文檔、飛書、石墨等）復(fù)制內(nèi)容進去時候，可以輕松實現(xiàn)二次編輯，比如插入圖片、調(diào)整標(biāo)題樣式等。
2. 易用性
編輯器的界面、功能，要能滿足多數(shù)用戶的期望，比如支持多張圖片上傳、第三方音頻/視頻鏈接，以及整個操作過程中使用起來愉悅、友好。
3. 容錯性
當(dāng)用戶出現(xiàn)操作錯誤的時候，系統(tǒng)能夠及時給用戶提示，比如圖片上傳進度、圖片尺寸大小限制、必填項勾選等等。容錯性對用戶體驗的影響特別大，如果用戶在使用過程中不清楚哪個地方犯錯不能繼續(xù)操作，用戶對系統(tǒng)就會陷入焦慮。

三、實際產(chǎn)品設(shè)計中的編輯器

1. 站酷
站酷網(wǎng)是全國最大的設(shè)計師平臺，吸引了國內(nèi)眾多優(yōu)秀的設(shè)計師和設(shè)計知識創(chuàng)作者，但是他們的文章編輯器，體驗下來卻非常糟糕。接下來讓我們來看看這個糟糕的文章編輯器，給用戶帶來了多大的體驗傷害。
當(dāng)我開開心心地把一篇在騰訊文檔寫好的內(nèi)容復(fù)制到站酷編輯器的時候，在對標(biāo)題進行格式調(diào)整的時候，全局樣式竟然會同步更改，比如想把「標(biāo)題」更改為「標(biāo)題1」的樣式，整篇文章就會一起更新，這讓人摸不著頭腦。不過我沒放棄，經(jīng)過多番嘗試，才發(fā)現(xiàn)需要在標(biāo)題上下各加一個Enter，這樣才能設(shè)置成功（我是一個BUG解決天才）。

當(dāng)文章篇幅撐過編輯器的默認(rèn)高度以后，這個時候就會出現(xiàn)一個非常糟糕的體驗，你找不到編輯器的工具欄。比如你想上傳圖片或者修改內(nèi)容，你都不知道工具欄去哪里了，這個時候用戶徹底迷失，變得異常焦躁。解決這個問題的唯一辦法是——把編輯器全屏。

創(chuàng)過第一關(guān)以后，全屏的編輯器又出現(xiàn)一個非常糟糕的體驗。那就是當(dāng)你去調(diào)整某一段文字的時候，比如加一個換行，這個時候編輯器的光標(biāo)就會像幽靈一樣跑到底部，你只能重新找到剛才的原位置，你以為是眼花再試一次之后，光標(biāo)再次出現(xiàn)在底部，簡直讓你懷疑人生。

當(dāng)你從頭部開始上傳圖片的時候，和調(diào)整字段一樣，光標(biāo)又會像幽靈一樣跑到底部，這個時候，你還得去找之前的位置，才能繼續(xù)上傳。不過經(jīng)過多番的嘗試，我又破解了站酷編輯器的設(shè)計密碼，原來可以從底部開始倒著傳圖片，那該死的光標(biāo)，就不會跑到底部去了，這個秘訣讓我提升了很高的效率，我真感慨自己的的智商：）

從站酷的編輯器可以看出，他們違反了尼爾森十大原則的系統(tǒng)性可見原則和防錯原則。第一，在用戶的內(nèi)容高度超出編輯器默認(rèn)高度以后，編輯器的工具欄消失不見，這其實是一個功能BUG，不但沒有修復(fù)也沒有提示用戶使用全屏操作，用戶徹底迷失；第二，在用戶調(diào)整內(nèi)容換行的時候，光標(biāo)會像幽靈一樣跳到底部，這也屬于功能的BUG，沒有修復(fù)也沒有系統(tǒng)提示，最后導(dǎo)致用戶在內(nèi)容發(fā)布階段就變得垂頭喪氣，最終浪費了無數(shù)寶貴的時間。
拓展閱讀：
尼爾森十大可用性原則第一條，系統(tǒng)可見性原則，保持界面的狀態(tài)可見，變化可見，內(nèi)容可見。讓用戶知道發(fā)生了什么，在適當(dāng)?shù)臅r間內(nèi)做出適當(dāng)?shù)姆答仭?
尼爾森十大可用性原則第五條，防錯原則，比出現(xiàn)錯誤信息才提示更好的，是通過更用心的設(shè)計來防止這類問題發(fā)生。在用戶選擇動作發(fā)生之前，就要防止用戶混淆或者錯誤選擇。對產(chǎn)品進行不同的操作、重組或特別安排，防止用戶出錯。
2. UI中國
UI中國的文章編輯器，雖然不支持從騰訊文檔、飛書文檔直接復(fù)制過去的格式，但編輯器設(shè)計得非常清爽，給用戶的第一印象非常好。但是，就在用戶開開心心準(zhǔn)備發(fā)布一篇精心準(zhǔn)備的文章時候，噩夢來了。
UI中國的服務(wù)器非常不穩(wěn)定，所以當(dāng)用戶上傳圖片的時候，圖片的加載進度特別慢。其實慢一點也能接受，但是當(dāng)進度條達到100%以后，圖片始終還是無法載入，有時候需要等幾秒，有時候等10幾秒最后換回來的一串錯誤代碼——Error during file upload。這個時候用戶還有耐心，也許就是服務(wù)器偶然發(fā)生故障，于是再次重新上傳，但收到的還是同樣的結(jié)果。

為了解決這個問題，我以為是圖片的尺寸或大小出現(xiàn)了問題，但經(jīng)過查閱，并無任何問題，完全是官方的尺寸規(guī)范以內(nèi)。最后通過數(shù)次的嘗試，我總算摸到一點點規(guī)律，當(dāng)一張圖片反復(fù)上傳出現(xiàn)亂碼的時候，那就先去傳其他的圖片，最后再返回上傳這張圖片，運氣好的時候就解決了，運氣不好的話，你就休息一下再來上傳。我只能感慨自己實在太聰明了。
從UI中國的編輯器可以看出，他們和站酷一樣，違反了尼爾森十大原則的第五條原則，防錯原則。在用戶上傳圖片出現(xiàn)錯誤以后，并沒有給用戶及時的中文提示（99%的設(shè)計師看不懂Error during file upload這串英文代碼，毫無意義），導(dǎo)致用戶在使用過程中產(chǎn)生焦躁、憤怒的情緒，浪費了無數(shù)寶貴的時間。
3. 微信公眾號
微信公眾號是知識創(chuàng)作者最常用的工具了，但事實上對于新手來說，它的設(shè)計非常不友好。我還想起當(dāng)我第一次操作公眾號發(fā)布文章的時候，當(dāng)我把內(nèi)容都編輯好以后，我找不到「發(fā)布」的按鈕。我很難理解「群發(fā)」的功能，特別是當(dāng)我在下拉列表發(fā)現(xiàn)竟然還藏著一個「發(fā)布」按鈕，我以為那就是發(fā)布。但當(dāng)我開開心心準(zhǔn)備分享我的推文時候，我在自己的公眾號卻怎么也找不到這篇文章。

最后我只能重新編輯一次，但問題還是沒有解決。群發(fā)到底是什么意思？當(dāng)我點擊以后「群發(fā)」以后，又出現(xiàn)了群發(fā)、定時群發(fā)和分組群發(fā)的按鈕，我實在難以理解這幾個按鈕有什么不同，我現(xiàn)在又應(yīng)該選擇什么。我猶豫不定，害怕犯錯，又不知道如何解決，最后只能求助朋友。

微信公眾號在「發(fā)布文章」這個環(huán)節(jié)的設(shè)計，完全違背了交互心理學(xué)上的席克定律，給用戶太多、不清晰的選擇，增加了用戶的學(xué)習(xí)和消耗成本，對于公眾號新手來說，簡直就是一次噩夢。其次也違背了尼爾森十大原則的第十條，人性化幫助原則，沒有給新手解釋清楚「群發(fā)」和「發(fā)布」的區(qū)別，也沒有對核心功能做出對應(yīng)的文字解釋，讓用戶在操作的過程中產(chǎn)生數(shù)次焦躁，最終只能求助于他人。
拓展閱讀：
席克定律是指人的信息傳遞時間與刺激的平均信息量之間呈線性關(guān)系。簡單一點我們可以理解為：人面臨越多的選擇，所要消耗的時間成本越高。
尼爾森十大原則第十條，人性化幫助原則，幫助性提示最好的方式是：①無需提示；②一次性提示；③常駐提示；④幫助文檔。
4. 脈脈
脈脈作為擁有1.1億用戶的職場社交獨角獸，為用戶提供的專欄編輯器，用戶體驗差到讓人絕望。
脈脈使用的編輯器，屬于十年前最早一批的編輯器，不管是功能還是樣式，都非常掉身價，和他們的品牌調(diào)性不匹配。它們不支持從騰訊文檔、飛書復(fù)制過去的文章（Markdown格式），所以我每次都需要調(diào)整格式才能和源文檔格式一致，極大增加了編輯成本。這也是我最后放棄脈脈更新的原因，他們流失了一個內(nèi)容創(chuàng)作者。

在用戶上傳圖片以后，他們沒有做自適應(yīng)配置，整個編輯器無法看到圖片的完整內(nèi)容，用戶根本不知道自己上傳的圖片是否正確。更糟糕的是，當(dāng)你想等比例調(diào)整圖片的大小，圖片就完全扭曲，讓用戶進一步崩潰。

點擊上傳圖片以后，還需要用戶點擊「上傳」，才能真正實現(xiàn)圖片上傳，增加了用戶的操作步驟。其次已上傳的圖片不能取消選中，如果想要取消當(dāng)前圖片，只能再次上傳一次圖片。
最糟糕的是，文章竟然不支持自動或手動保存，想象一下當(dāng)你花費了1個小時好不容易編輯好的文章，最后因為不小心關(guān)閉瀏覽器導(dǎo)致文章丟失了，這就是使人憤怒的設(shè)計，這幾乎把用戶使用的欲望徹底剿滅了，永遠不會再回來。
脈脈的編輯器設(shè)計，嚴(yán)重違反了尼爾森十大原則中的多條原則，比如撤銷重做原則、防錯原則、容錯原則等，可以說是非常糟糕的設(shè)計，這樣的編輯器幾乎可以毀滅任何一個內(nèi)容創(chuàng)作者的心情。
拓展閱讀：
尼爾森十大可用性原則第三條，撤銷重做原則，給用戶更多自主操作權(quán)，當(dāng)用戶在使用產(chǎn)品過程中產(chǎn)生錯誤的操作時，應(yīng)提供更多的解決方案，例如撤銷或重做等功能。
尼爾森十大可用性原則第九條，容錯原則，幫助用戶從錯誤中恢復(fù)，將損失降到最低。如果無法自動挽回，則提供詳盡的說明文字和指導(dǎo)方向，而非代碼如404等。
5. 135編輯器
135編輯器作為國內(nèi)最大的編輯器頭部產(chǎn)品，他們幾乎把編輯器可能有的功能都設(shè)計了，比如導(dǎo)入文章、語音合成、模版、一鍵排版等等。但是這個功能如此豐富的編輯器給新用戶的體驗則留下糟糕的印象。
135編輯器的功能非常強大，這就像一個2003年半的Word辦公軟件，一眼望去，都是數(shù)不清的功能。這樣的設(shè)計導(dǎo)致了新手不知道如何開始，他們的按鈕權(quán)重幾乎都一樣，比如新建、關(guān)閉、導(dǎo)入、微信復(fù)制等等，沒有重點突出核心功能。

人在操作軟件時候的記憶屬于短期記憶，一般只會保留5-7秒，這便是心理學(xué)上最出名的7±2效應(yīng)。在新手首次使用該軟件的時候，面對幾十上百個的功能，根本不知道如何下手。用戶需要學(xué)習(xí)的成本非常高，甚至當(dāng)你編輯好文章以后，你都不知道如何把文章同步到微信公眾號，因為「微信復(fù)制」這個按鈕沒有重點突出，從字面意思也無法獲取真正的意思。這也違背了人類運動的預(yù)測模型費茨定律，如果你想小孩子也簡單輕松的能關(guān)掉房屋的開關(guān)，那么你的開關(guān)就應(yīng)該大一點，明顯一點。

其次過度商業(yè)化把這款編輯器的用戶體驗毀滅了，幾乎80%的功能都需要加入VIP會員，然后你需要反復(fù)關(guān)閉窗口，操作路徑變得又長又繁瑣。試問，一個新用戶在使用一款陌生的編輯器的時候，需要關(guān)閉幾十次廣告，你覺得他還有耐心去使用嗎？

拓展閱讀：
7±2效應(yīng)就是指人的短期記憶容量在7±2的數(shù)量之間浮動，也就是說，用戶最多同時處理5～9個信息。
費茨定律是人類運動的預(yù)測模型，主要用于人機交互和人體工程學(xué)。該定律預(yù)測光標(biāo)或手指從一個起始位置移動到最終目標(biāo)所需的時間（T）由兩個參數(shù)決定，即光標(biāo)或手指到目標(biāo)的距離（D）和目標(biāo)的大?。╓）。
6. 國內(nèi)某知名CMS系統(tǒng)
這是一個國內(nèi)非常出名的開源CMS系統(tǒng)，目前已停止更新維護，不過國內(nèi)的企業(yè)網(wǎng)站估計有50%都是基于這個系統(tǒng)搭建。做過外包設(shè)計的朋友都知道，經(jīng)常會聽見客戶說系統(tǒng)難用，那么為什么難用，我們先來看看這些商業(yè)項目中管理后臺的編輯器有多糟糕。
點擊添加內(nèi)容后，直接跳轉(zhuǎn)到一個新窗口，這個新窗口還把當(dāng)前屏幕都遮住了，這不得不讓用戶需要把這個窗口縮小才能復(fù)制內(nèi)容。這個設(shè)計最讓人頭疼的是當(dāng)你的桌面應(yīng)用打開過多時候，你根本不知道這個內(nèi)容窗口在哪里，讓人感到無比焦躁。

編輯器的的樣式、功能就幾乎可以忽略不計了，因為這畢竟是一款開源的系統(tǒng)，而且官方都已經(jīng)停止更新了。如果你從騰訊、飛書文檔直接復(fù)制內(nèi)容進去，文本格式就是錯亂的，這和脈脈一樣，這幾乎需要在編輯器里重新調(diào)整格式才行，這嚴(yán)重提升了用戶的使用成本。這對于很多兼職為公司負責(zé)更新網(wǎng)站的用戶來說，簡直就是一場災(zāi)難。過去有太多次用戶對編輯器的問題提出了很多次，包括不懂使用、增加功能等，總之，這些開源系統(tǒng)的編輯器，對很多用戶來說就是一場噩夢。

四、思考總結(jié)

通過數(shù)款大廠產(chǎn)品的體驗總結(jié)，我們發(fā)現(xiàn)，對于文章編輯器這個非?；A(chǔ)但又必不可少的功能，其實帶給用戶的體驗非常糟糕。類似的糟糕體驗，其實還數(shù)不勝數(shù)，我們這一期就不再展開。最后我們對此次的體驗陷阱做一個簡單的總結(jié)。
我認(rèn)為，造成如此糟糕的編輯器體驗的原因有兩個，第一個，大部分的產(chǎn)品團隊完全不重視編輯器這個功能。在很多產(chǎn)品、設(shè)計，包含程序工程師看來，這就是一個非?；A(chǔ)簡單的功能，所以他們對編輯器非常輕視，也許開發(fā)出來的產(chǎn)品團隊自己都沒有親身測試發(fā)布過，才會導(dǎo)致有如此多明顯、讓人憤怒的BUG。然而他們根本不知道這樣的設(shè)計對用戶的實際體驗影響有多么糟糕。
第二個，產(chǎn)品團隊完全沒有遵循最基礎(chǔ)的設(shè)計原則意識。國內(nèi)大部分產(chǎn)品設(shè)計師對設(shè)計基礎(chǔ)原則、理論都非常忽視，甚至覺得這些純理論的指導(dǎo)原則毫無意義。這也是設(shè)計這門學(xué)科在國內(nèi)發(fā)展的真實寫照，但我們從這些體驗陷阱可以看出，一個沒有遵循設(shè)計基礎(chǔ)原則的產(chǎn)品，體驗下來，是多么的糟糕，多么的讓人絕望。

作者：設(shè)計大偵探
 來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司