對(duì)于很多設(shè)計(jì)師來講在設(shè)計(jì)界面過程中往往會(huì)忽略掉很多的細(xì)節(jié)，比如卡片的排版、文字的排版、各種狀態(tài)的反饋等等，特別是剛?cè)胄械脑O(shè)計(jì)師在做頁面時(shí)往往是直接拿到競(jìng)品的頁面搬運(yùn)到自己產(chǎn)品上，這種做法理論上不會(huì)讓自己的頁面出錯(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ì)，但是一定要了解別人為什么這么做。
接下來將分享12個(gè)設(shè)計(jì)上的小技巧，大部分在日常設(shè)計(jì)中都會(huì)遇到，了解到這些設(shè)計(jì)細(xì)節(jié)，可以讓我們的界面更加高效、易用、美觀提升用戶體驗(yàn)。

目錄

一、快捷交互

二、提升交互路徑

三、問題前置

四、提升可讀性

五、點(diǎn)擊引導(dǎo)

六、注意飽和度

七、禁止特殊字體

八、按鈕也要有層級(jí)

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

十、利用對(duì)比

十一、圖文疊加

十二、注意遮罩透明

一、快捷交互

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

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

建議正確做法～～
我們可以在類似的消息場(chǎng)景或者其他列表形式的場(chǎng)景中，添加一些交互手勢(shì)，隨著手機(jī)系統(tǒng)的更新，用戶的操作習(xí)慣已經(jīng)被各大產(chǎn)品培養(yǎng)的非常成熟，并不用擔(dān)心用戶無法操作的情況，增加手勢(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è)，這樣并沒有什么問題，用戶點(diǎn)擊卡片區(qū)域任何位置都能夠完成下一步操作，如果出現(xiàn)一個(gè)模塊內(nèi)存在多個(gè)熱區(qū)入口，而用戶想要到達(dá)目標(biāo)必須通過按鈕點(diǎn)擊才能進(jìn)入，那么左圖中的排版位置就會(huì)提升用戶的操作時(shí)間。

建議正確做法～～
當(dāng)一個(gè)頁面內(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)閲鴥?nèi)使用右手的人數(shù)遠(yuǎn)遠(yuǎn)大于左手用戶，所以我們需要滿足大部分的體驗(yàn)，合理利用拇指定律。
相關(guān)定律：費(fèi)茲定律、拇指定律

實(shí)際產(chǎn)品中的運(yùn)用

三、問題前置

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

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

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

實(shí)際產(chǎn)品中的運(yùn)用

四、提升可讀性

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

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

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

實(shí)際產(chǎn)品中的運(yùn)用

五、點(diǎn)擊引導(dǎo)

我們?cè)谧鱿到y(tǒng)功能模塊時(shí)需要注意添加功能點(diǎn)擊引導(dǎo)，用戶對(duì)此類消息模塊認(rèn)知上會(huì)默認(rèn)不可點(diǎn)擊，因此需要我們加以引導(dǎo)。

左側(cè)為什么錯(cuò)？？
我們常見的消息模塊內(nèi)容為兩種，一種是互動(dòng)類消息即用戶與用戶，另一種時(shí)是系統(tǒng)消息即產(chǎn)品推送的內(nèi)容，前者基于用戶習(xí)慣而言用戶已經(jīng)沒有使用成本默認(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í)從視覺上看，并不具備點(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ì)比白色背景上更加亮，這跟人的視覺感官有很大的關(guān)系，因此我們?cè)谧龊谏姹緯r(shí)需要注意是否調(diào)整飽和度。

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

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

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

七、禁止特殊字體

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

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

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

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

八、按鈕也要有層級(jí)

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

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

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

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

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

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

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

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

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

十、利用對(duì)比

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

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

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

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

十一、圖文疊加

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

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

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

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

十二、注意遮罩透明

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

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

建議正確做法～～
右圖中案例我把透明度調(diào)整到了37%，我們此時(shí)再看彈窗很容易就忽略頁面內(nèi)容，因?yàn)榛疑礁撸趽醵仍礁?，用戶跳脫感就越?qiáng)，這樣我們可以讓用戶專注彈窗內(nèi)容，同時(shí)視覺結(jié)構(gòu)上也區(qū)分很明顯。

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

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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è)什么欄目？

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

二、為什么會(huì)寫這個(gè)專題？

我在2022年轉(zhuǎn)型到知識(shí)付費(fèi)以后，認(rèn)識(shí)了太多的設(shè)計(jì)師朋友，也建立了自己的社群。其中讓我印象最深的有這么一類用戶群體，他們很早就在大學(xué)期間為了學(xué)習(xí)UI設(shè)計(jì)，花了很多錢報(bào)了各種培訓(xùn)班，但最后的結(jié)果卻不如人意。很多培訓(xùn)班太注重于軟件技能的操作，而忽略UI設(shè)計(jì)其實(shí)是一門學(xué)科，如果學(xué)生知其然不知其所以然，那么即便學(xué)會(huì)了Sketch、Figma這些工具，他們也不知道學(xué)了UI設(shè)計(jì)到底能有什么用，未來又該如何去規(guī)劃自己的職業(yè)生涯。
這些朋友里面，留給我印象最深的，是一個(gè)剛畢業(yè)的女孩。她給我說，貸了兩次款，畢業(yè)后還是不知道UI設(shè)計(jì)到底能干啥，現(xiàn)在勉強(qiáng)找到一份設(shè)計(jì)的工作，每個(gè)月還要還著貸款走。我當(dāng)時(shí)把這個(gè)朋友免費(fèi)邀請(qǐng)到我的私董會(huì)星球了，讓她去看我講的書、錄的課程，期望能給她帶來一絲溫暖和希望。
其次在我最早開始建立社群的時(shí)候，有一個(gè)探友在站酷看到我的產(chǎn)品拆解以后，跑來加我，然后給我說：“我一直質(zhì)疑培訓(xùn)班老師的講課內(nèi)容，因?yàn)槲矣X得設(shè)計(jì)這門職業(yè)，如果只學(xué)會(huì)軟件，那是不夠的，肯定需要學(xué)習(xí)一些設(shè)計(jì)原則和理論。所以當(dāng)我看了你的產(chǎn)品拆解以后，我很受啟發(fā)，我覺得學(xué)會(huì)這些設(shè)計(jì)理論特別重要?！?br /> 這些真實(shí)的故事，讓我印象深刻，也讓我開始反思，造成這種現(xiàn)象的原因是什么。所以這個(gè)專題的內(nèi)容，在很久之前就藏在我的心里了。我想去做一個(gè)UI設(shè)計(jì)的知識(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è)出來的應(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)容，如果你覺得有價(jià)值，可關(guān)注我們獲取全部?jī)?nèi)容。

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

目前我把這個(gè)專欄拆分為四塊內(nèi)容，分別是認(rèn)識(shí)UI、就業(yè)前景、學(xué)習(xí)方法和如何求職四個(gè)章節(jié)。
第一章是認(rèn)識(shí)UI，我會(huì)從設(shè)計(jì)的目的、UI設(shè)計(jì)的定義和分類開始讓初學(xué)者對(duì)UI設(shè)計(jì)有一個(gè)初步的了解。（這個(gè)部分的內(nèi)容也許適用于80%的UI設(shè)計(jì)師，雖然很多設(shè)計(jì)師已經(jīng)從業(yè)了多年，但對(duì)UI設(shè)計(jì)還是一知半解。）
第二章是就業(yè)前景，通過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í)樹和能力晉升模型，只有知道最終要去哪里，自己當(dāng)前又在哪里，應(yīng)該如何努力，他們才能像玩游戲一樣，每天對(duì)知識(shí)的汲取都充滿動(dòng)力。
第四章是如何求職，通過拆解企業(yè)對(duì)UI設(shè)計(jì)師的招聘需求，抽絲剝繭地讓初學(xué)者理解求職的本質(zhì)和方法。

四、初擬目錄

這是初步擬定的目錄，非最終交付目錄。其次這份專欄我將會(huì)篩選30個(gè)左右的問答免費(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à)值？
國內(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ì)師越來越多，還能選擇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ì)師是不是過了30歲就會(huì)過氣？
技術(shù)崗位未來是否一定要朝著管理崗發(fā)展嗎？
一二三線城市的環(huán)境對(duì)UI設(shè)計(jì)師就業(yè)和成長(zhǎng)有影響嗎
談不上對(duì)UI設(shè)計(jì)特別熱愛，但覺得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ì)的常見方法
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ì)需要買蘋果電腦嗎？
用Photoshop可以設(shè)計(jì)UI嗎？
UI設(shè)計(jì)需要看什么設(shè)計(jì)書籍？
有哪些免費(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ì)師是不是就沒前途？
創(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ì)師的求職有沒有影響，如何規(guī)避？
沒有工作經(jīng)驗(yàn)怎么辦，能找到工作嗎？
一直找不到工作怎么辦，是不是應(yīng)該放棄UI設(shè)計(jì)？

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

設(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ì)師？作為此次專題的開篇內(nèi)容，我們?cè)谶@個(gè)章節(jié)將會(huì)抽絲剝繭向大家介紹UI設(shè)計(jì)的由來、定義、分類和價(jià)值，幫助大家快速對(duì)UI設(shè)計(jì)這門學(xué)科有一個(gè)宏觀的了解。

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

我們先看百度百科對(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ì)劃是過程安排”，通常是指有目標(biāo)和計(jì)劃的創(chuàng)作行為及活動(dòng)。
著名的美國設(shè)計(jì)理論學(xué)家維克多·帕帕奈克認(rèn)為，設(shè)計(jì)是為構(gòu)建有意義的秩序而付出的有意識(shí)的、直覺上的努力。他認(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ì)全流程解析》- 董尚昊

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

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

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

我們看看維基百科對(duì)藝術(shù)的介紹。藝術(shù)是指憑借想象力、經(jīng)驗(yàn)等綜合人為因素的融合與平衡，以創(chuàng)作隱含美學(xué)的器物、環(huán)境、影像、動(dòng)作或聲音的表達(dá)模式。而百度百科則對(duì)藝術(shù)沒有明確的定義。藝術(shù)是一種社會(huì)現(xiàn)象、社會(huì)事物，屬上層建筑中的社會(huì)意識(shí)形態(tài)，其次也指向各種技術(shù)活動(dòng)，比如畫、雕刻、建筑等活動(dòng)。
藝術(shù)的目的可以分為無動(dòng)機(jī)的及有動(dòng)機(jī)的兩類。無動(dòng)機(jī)的藝術(shù)是指那些本來就是人類不可或缺一部分的藝術(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ù)說到底是個(gè)人意愿對(duì)社會(huì)的一種表達(dá)，其起源帶有非常個(gè)人化的性質(zhì)，所以只有藝術(shù)家自己才知道其作品的來源。而設(shè)計(jì)，則基本上不是一種自我表達(dá)，它源于社會(huì)。設(shè)計(jì)的實(shí)質(zhì)在于發(fā)現(xiàn)一個(gè)很多人都遇到的問題，然后試著去解決的過程。
簡(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ù)，而是要通過設(shè)計(jì)滿足甲方的需求。
參考文獻(xiàn)：
維基百科-藝術(shù)
《設(shè)計(jì)中的設(shè)計(jì)》- 原研哉

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

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

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

從用戶人群劃分，像淘寶、美團(tuán)這樣以個(gè)人消費(fèi)者（Customer）使用為主的產(chǎn)品，稱為C端產(chǎn)品，屬于最常見的UI設(shè)計(jì)，稱為C端UI設(shè)計(jì)；而像有贊、微盟這樣的以服務(wù)企業(yè)（Bussiness）的產(chǎn)品，稱為B端產(chǎn)品，這就是B端設(shè)計(jì)師的由來，目前市場(chǎng)對(duì)B端UI設(shè)計(jì)師的需求比較大。
從使用設(shè)備劃分，從事電腦端設(shè)計(jì)的稱為WUI（Web User Interface），也就是網(wǎng)頁設(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）則是通過語音交互的界面設(shè)計(jì)，比如小度、天貓精靈。
從行業(yè)劃分，UI設(shè)計(jì)師可以分為不同行業(yè)的設(shè)計(jì)師，比如從事醫(yī)療產(chǎn)品的UI設(shè)計(jì)師，從事人工智能的UI設(shè)計(jì)師。
簡(jiǎn)單總結(jié)，未來隨著各種智能設(shè)備、人工智能、AR的發(fā)展，將會(huì)誕生出更多細(xì)分行業(yè)的UI設(shè)計(jì)師，不管是現(xiàn)在最火爆的B端設(shè)計(jì)師，還是車載設(shè)計(jì)師，未來面對(duì)日新月異的科技發(fā)展，只有理解UI設(shè)計(jì)的本質(zhì)和方法，才能應(yīng)付越來越多的不確定性。

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)容了，來講解 B 端設(shè)計(jì)規(guī)范和組件庫的分享。這幾年網(wǎng)上出了不少類似的分享，雖然都寫得很全，都還是覺得不夠滿意，缺了一點(diǎn)點(diǎn)細(xì)節(jié)。
所以我自己出一版，希望能幫助你們一次性解決這些問題。

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

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

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

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

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

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

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

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

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

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

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

任何成熟的 B 端項(xiàng)目都應(yīng)該具備自己的設(shè)計(jì)規(guī)范和組件庫，雖然有很多小團(tuán)隊(duì)在前期推進(jìn)項(xiàng)目時(shí)，因?yàn)楦鞣N問題沒有搭建或落地設(shè)計(jì)規(guī)范，但并不代表他們?cè)谡腥说臅r(shí)候沒有要求。

項(xiàng)目規(guī)范是一個(gè)典型的 “項(xiàng)目團(tuán)隊(duì)可以沒有，但你不能不會(huì)” 的基本招聘要求。

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

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

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

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

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

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

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

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

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

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

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

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

2.1 和規(guī)范有關(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ì)軟件提供了越來越多的功能，用來支持設(shè)計(jì)規(guī)范的實(shí)踐，且這些功能可以相互交叉、重疊、組合，導(dǎo)致很多人在前期學(xué)習(xí)中會(huì)被軟件功能繞暈，導(dǎo)致很多人沒有理解這些功能意義和價(jià)值，更不知道如何在項(xiàng)目中具體實(shí)踐。

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

2.1.1 樣式功能

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

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

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

2.1.2 響應(yīng)式功能

響應(yīng)式功能是讓圖層隨上級(jí)編組尺寸變動(dòng)而自適應(yīng)的功能，方便我們?cè)谛薷慕M件的大小時(shí)不用重新調(diào)節(jié)里面的元素細(xì)節(jié)。

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

或者頁面右下角懸浮按鈕，也可以通過響應(yīng)式設(shè)置始終處于頁面底部，這樣我們?cè)谠黾禹撁娓叨鹊臅r(shí)候不用重新設(shè)置該元素的 Y 軸位置。

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

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

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

自動(dòng)布局可以極大的提升設(shè)計(jì)效率，正因?yàn)樽詣?dòng)布局的出現(xiàn)，才讓項(xiàng)目組件庫可以真正被運(yùn)用和落地實(shí)踐起來。

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

2.1.4 組件功能

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

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

在組件應(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ān)的狀態(tài)。

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

2.2 樣式功能

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

比如，填充色中使用了兩種色彩相近的色彩和不同透明度，我們就可以使用中文命名來區(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ù)圖層類型來記錄的，比如矩形和字體，會(huì)記錄該圖層下所有樣式屬性的參數(shù)，且該記錄只能應(yīng)用在同類的圖層上（而 XD 只能記錄色彩和字體樣式…）。

這種做法雖然理解起來容易，但是會(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ǔ)視覺規(guī)范內(nèi)容，將規(guī)范中的配色、字體、投影、模糊等參數(shù)整理進(jìn)樣式表中，方便我們后續(xù)的快速調(diào)用和統(tǒng)一修改。

2.3 響應(yīng)式功能

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

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

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

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

間距固定的意思，就是圖層基于父級(jí)畫板的某間距數(shù)值是固定的，不管畫布尺寸怎么變動(dòng)，圖層和畫布的對(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ì)隨畫布的尺寸變動(dòng)修改自身的寬高來滿足。

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

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

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

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

所以，將一個(gè)畫板中的元素響應(yīng)方式設(shè)置好，可以節(jié)省我們很多時(shí)間，不用再因?yàn)楦讣爻叽缧薷亩粋€(gè)圖層一個(gè)圖層修改下級(jí)元素的尺寸和位置。

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

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

2.4 自動(dòng)布局功能

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如果子圖層沒有設(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è)置中的 “間距固定”。

2.4.2 依序排列布局

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

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

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

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

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

依序排列的優(yōu)勢(shì)，除了把現(xiàn)有的子圖層快速布局以外，還可以用拖拽、鍵盤調(diào)整元素順序?；蛘邚耐獠客蟿?dòng)某個(gè)圖層到該區(qū)域中，就可以插入序列，成為下級(jí)圖層之一。

2.4.3 混合布局模式

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

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

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

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

首先從頂部標(biāo)題欄開始，我們隨意創(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ū)域出來，設(shè)置好對(duì)應(yīng)的參數(shù)和填充一點(diǎn)文本即可。

而底部操作欄，則在一開始做好兩個(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ì)話框整體的寬度，或者輸入多行的文本，都無法達(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)的寬度出來，就可以作為后續(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í)布局從一開始就做成響應(yīng)式的編組行不行？

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

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

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

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

2.5 組件功能

2.5.1 組件的使用邏輯

有了前面響應(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ù)制、引用出來的副本叫做 “實(shí)例組件”。它們具有明確的從屬關(guān)系。

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

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

以上就是組件使用的最基本邏輯，更進(jìn)一步，組件作為一個(gè)編組，所包含的下級(jí)圖層的邏輯都會(huì)被保留下來，例如樣式設(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)布局外，組件也可以包含組件。我們前面說過，按原子核的結(jié)構(gòu)來講，一個(gè)復(fù)雜的組件是由若干基礎(chǔ)元素和控件組合而成。比如上方這個(gè)案例，就由多個(gè)模塊、文本區(qū)域和按鈕組成。

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

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

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

2.5.2 組件的文件管理

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

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

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

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

頁面 Page / 畫板 Frame / 組件 Compoent

如果我們?cè)诓煌撁婧筒煌嫲逯袆?chuàng)建引用組件，那么該面板的目錄一定是特別混亂無序的。所以為了創(chuàng)建出符合正常分類使用習(xí)慣的組件目錄，就要做出調(diào)整。

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

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

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

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

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

2.5.3 組件中的變體功能

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

為了在項(xiàng)目中可以使用組件的不同狀態(tài)，就需要我們?cè)诿舷鹿Ψ?，比如?

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

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

所以，從 Figma 開始推出了變體 Variants 功能，來更好地應(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)建出變體效果。

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

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

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

這個(gè)功能可以很方便的切換組件的不同狀態(tài)，但如果它僅僅支持到這一步，那確實(shí)和使用命名編組的方法沒有本質(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)的按鈕出來。

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

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

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

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

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

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

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

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

如果我們?cè)谏实闹抵兄皇褂?”是，否“、”yes，no“、”開，關(guān)“ 等反義詞，那么副本變體選項(xiàng)中就會(huì)啟用開關(guān)按鈕，來替代原本的下拉菜單，提升操作的效率。

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

雖然變體功能看起來非常強(qiáng)大，但它并不能適用所有場(chǎng)景，因?yàn)樾薷钠饋碛绊懙囊剡^多。它更適用于基礎(chǔ)的控件和組件類型。如果針對(duì)復(fù)雜組件，尤其是包含多層組件嵌套的場(chǎng)景，往往使用命名的方式會(huì)比使用變體更有效率，這就需要大家自己在項(xiàng)目中積累經(jīng)驗(yàn)做判斷。

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

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

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

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

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

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

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司

                

借此機(jī)會(huì)和大家交流一下項(xiàng)目背后的思考，共同進(jìn)步！

我將從以下幾個(gè)方面進(jìn)行講解：

01 對(duì)于理念的思考

02 關(guān)于風(fēng)格的思考

03 關(guān)于背景的思考

04 關(guān)于材質(zhì)的思考

01 關(guān)于理念的思考-源自生活的靈感來源

對(duì)于本次設(shè)計(jì)，需求方是沒有給主題限制的，那作為設(shè)計(jì)師的我就從自身現(xiàn)階段的生活去發(fā)現(xiàn)主題、尋找靈感。 從深圳到成都創(chuàng)業(yè)，將近一年的時(shí)間，我發(fā)現(xiàn)成都的天氣總是陰沉沉的：

充足的陽光變得非常稀缺，對(duì)于成都人來說，如果有陽光的時(shí)候，都會(huì)去外面坐坐，曬曬太陽！ 這一年，“光”對(duì)我說是一種期盼的事物：

基于這個(gè)生活細(xì)節(jié)，我就把主題定成了“追光空間”而我對(duì)于“追光空間”的理解就是：光感、純凈、靈動(dòng)

后面的執(zhí)行也是基于這個(gè)理念進(jìn)行思考創(chuàng)新的！

02 關(guān)于風(fēng)格的思考-找到未被發(fā)現(xiàn)的切入點(diǎn)

有了主題，就可以基于主題去思考設(shè)計(jì)風(fēng)格了。

其實(shí)主題圖標(biāo)的設(shè)計(jì)其實(shí)已經(jīng)有很多年頭了，尤其是“app”這個(gè)概念流行開始，各大安卓手機(jī)品牌就有了自己的主題商店，用戶可以根據(jù)喜好下載自己喜歡的主題圖標(biāo)。 我們?cè)诰W(wǎng)上搜索主題圖標(biāo)，可以看到很多作品，其中不乏有非常優(yōu)秀的主題作品，但是當(dāng)觀察的量到達(dá)一定程度后，會(huì)發(fā)現(xiàn)市面上的主題圖標(biāo)風(fēng)格還是比較相似，大部分還都是屬于二維圖標(biāo)（下圖源自網(wǎng)絡(luò)）：

即使是一些質(zhì)感很強(qiáng)的圖標(biāo)，很多也是鼠繪出來的，也不算是3D風(fēng)格（下圖源自7years）：

包括我們?nèi)ツ杲o小米做的幾套主題，也都是偏2維風(fēng)格的

基于這樣的現(xiàn)象，我們是否可以嘗試將3d風(fēng)格與主題圖標(biāo)進(jìn)行融合呢？雖然不能說是第一個(gè)這么做的，但至少在市面上出現(xiàn)的這種結(jié)合還是相對(duì)較少，所以也可以算是一種小的創(chuàng)新。

在構(gòu)想風(fēng)格的時(shí)候，我的底層邏輯就是找到未被發(fā)現(xiàn)的切入點(diǎn)，如何理解呢？

如果是3d風(fēng)格與電商活動(dòng)結(jié)合，已經(jīng)相對(duì)常見了（下圖源自網(wǎng)絡(luò)）：

如果是3d風(fēng)格與游戲視覺結(jié)合，也經(jīng)常會(huì)看到（下圖源自網(wǎng)絡(luò)）：

但是如果是3d風(fēng)格與主題圖標(biāo)結(jié)合并且落地使用，那還是相對(duì)比較少的，這就是我在思考風(fēng)格時(shí)候的一點(diǎn)心得：

希望可以給同行們一點(diǎn)啟發(fā)，拋磚引玉，希望市面上可以看到更多的3d風(fēng)格的主題圖標(biāo)！

03 關(guān)于背景的思考-基礎(chǔ)形的美感釋放

這次的主題和以往不一樣，我們每做一個(gè)圖標(biāo)需要延展4個(gè)尺寸：

有一些寬的、有一些高的，如果我們只放一個(gè)圖標(biāo)，那么會(huì)比較空曠，不夠飽滿，所以我們必須在背景上加一些圖案或者紋理，使整體更加飽滿精致。

背景紋理怎么做呢？我們希望它有細(xì)節(jié)但又不能過于搶眼，于是把目光鎖定在了基礎(chǔ)形狀上面，比如方形、圓形、三角形等等：

鎖定基礎(chǔ)形之后，就需要在基礎(chǔ)形之上融入更多的設(shè)計(jì)思考，比如風(fēng)格的結(jié)合，因?yàn)檎w是3d風(fēng)格，所以背景也可以是3d化的基礎(chǔ)形白膜：

除此之外，我們需要將圖形進(jìn)行構(gòu)成設(shè)計(jì)，以不同的節(jié)奏和位置使其產(chǎn)生不同的美感，把基礎(chǔ)美多維度的釋放出來，比如矩形的基礎(chǔ)元素進(jìn)行構(gòu)成設(shè)計(jì)：

這樣，就可以做出不同的背景圖案，以此來解決需求目標(biāo)。

設(shè)計(jì)師一定不要輕視基礎(chǔ)，不管是技法層面還是審美層面，往往優(yōu)秀的設(shè)計(jì)都是無數(shù)個(gè)“基礎(chǔ)”堆出來的，先掌握基礎(chǔ)，才能用“基礎(chǔ)”釋放更大的能量！

04 關(guān)于材質(zhì)的思考-日光下的玻璃質(zhì)感結(jié)合

其實(shí)本次的材質(zhì)，也不算難，沒有用到特殊材質(zhì)，主要有兩個(gè)關(guān)鍵點(diǎn)可以分享交流！

關(guān)于燈光

燈光我們使用的是日光燈，從軟件操作層面沒有任何技術(shù)含量，但是對(duì)于基礎(chǔ)審美會(huì)有一定的門檻，尤其是對(duì)于明暗交界線、光影對(duì)比的理解！

燈光的不同位置和大小會(huì)導(dǎo)致光影質(zhì)感的不同：

燈光曝光：

質(zhì)感太平:

物體與背景區(qū)分度不夠:

同樣的物體，不同的燈光角度和大小就會(huì)有不同的質(zhì)量等級(jí)：

只有這種基礎(chǔ)審美達(dá)標(biāo)后，我們才能繼續(xù)往后延伸。

關(guān)于材質(zhì)

對(duì)于材質(zhì)，最初我們嘗試用最簡(jiǎn)單的漫射材質(zhì)，但是發(fā)現(xiàn)缺少光澤度和細(xì)節(jié)，于是又嘗試在外部加一層玻璃材質(zhì)，形成一圈透明質(zhì)感和細(xì)節(jié)：

后面大部分的圖標(biāo)都采用這種形式進(jìn)行延展！

以上就是這次項(xiàng)目背后的一些思考

共勉！

作者：小腦府設(shè)計(jì)團(tuán)隊(duì)
鏈接：https://www.zcool.com.cn/article/ZMTUxMzkzMg==.html
來源：站酷

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司

                           

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)，感嘆優(yōu)秀的產(chǎn)品帶給我們的尖叫，但我們或許從未思考過，糟糕的用戶體驗(yàn)設(shè)計(jì)也會(huì)給用戶帶來很大的傷害。這個(gè)產(chǎn)品體驗(yàn)欄目的靈感來自于喬納森·沙利亞特的《設(shè)計(jì)的陷阱：用戶體驗(yàn)設(shè)計(jì)案例透析》這本書。在本書的介紹里，有這么一句話——設(shè)計(jì)能殺人、使人憤怒、使人傷心。讀到這句話的時(shí)候，讓人驚愕，讓人不可思議，但這就是事實(shí)，這就是糟糕的用戶體驗(yàn)設(shè)計(jì)會(huì)導(dǎo)致的后果。「體驗(yàn)陷阱」的第一期，就讓我們來看看那些被忽視的文章編輯器對(duì)用戶體驗(yàn)的影響有多糟糕。

一、什么是文章編輯器？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、思考總結(jié)

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

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司

                          

微信鍵盤發(fā)布啦！擁有12億用戶的移動(dòng)端巨無霸微信發(fā)布微信鍵盤了！就在本周一，預(yù)熱近兩年的微信鍵盤終于發(fā)布，這款微信之父張小龍口中的——不搜集任何隱私的輸入法工具，總算揭開了他的神秘面紗。廖爾摩斯第一時(shí)間全面體驗(yàn)了微信鍵盤，通過三天的使用，我也成了微信鍵盤的腦殘粉，這篇接近3600字的拆解，將會(huì)告訴你，這個(gè)地主家的小兒子，為什么又帥有才！

一、產(chǎn)品拆解

作為一款工具類產(chǎn)品，需要更注重產(chǎn)品的用戶使用體驗(yàn)，所以此次產(chǎn)品拆解主要基于尼爾森十大可用性原則和常見的設(shè)計(jì)基礎(chǔ)理論，比如格式塔原則、費(fèi)茨定律等。我將會(huì)分為基礎(chǔ)功能、個(gè)性化功能和個(gè)人隱私三個(gè)部分進(jìn)行拆解。

1. 基礎(chǔ)功能
1.1 鍵盤管理
鍵盤是輸入法最基礎(chǔ)的功能，根據(jù)每個(gè)用戶不同的操作習(xí)慣，微信鍵盤為用戶提供六種類型的鍵盤，分別是九宮格、全鍵盤、筆畫鍵盤、手寫鍵盤、五筆鍵盤和雙拼鍵盤。在五筆鍵盤和雙拼鍵盤中，還為用戶提供了多種偏好設(shè)置，比如86五筆方案、98五筆方案等。

設(shè)計(jì)思考
相比行業(yè)頭部老大哥搜狗輸入法，微信鍵盤的類型相對(duì)還比較單薄，比如像搜狗輸入法還支持生僻字鍵盤、拍照轉(zhuǎn)文字等特色功能，不過作為一個(gè)V1.0.0版本，這也遵循了如今產(chǎn)品設(shè)計(jì)的主流設(shè)計(jì)模式，小步快跑，快速迭代。
1.2 鍵盤輸入框
「輸入框」是用戶實(shí)際操作和使用的功能，這是最基礎(chǔ)、最重要的功能。微信鍵盤的輸入框界面風(fēng)格非常簡(jiǎn)潔，和IOS默認(rèn)鍵盤風(fēng)格相近，目前僅有一款默認(rèn)皮膚。

1.2.1 長(zhǎng)按技巧
長(zhǎng)按「拼音鍵」，可選擇更多相關(guān)字符，比如數(shù)字、大小寫等。其中長(zhǎng)按「JKL」拼音鍵，可切換至「單手模式」；長(zhǎng)按「中英文」鍵，可切換至「手寫模式」，非常方便。

1.2.2 智能刪除復(fù)原
這個(gè)小技巧使用起來特別方便，在我們刪除一段文字的時(shí)候，經(jīng)常會(huì)出現(xiàn)誤刪的情況，微信鍵盤設(shè)計(jì)了一個(gè)非常巧妙的功能，按住「刪除鍵」左拉可以刪除文字，往右則可以把刪除的文字復(fù)原，提高了產(chǎn)品體驗(yàn)的容錯(cuò)性。

1.2.3 上滑輸入數(shù)字符號(hào)
這個(gè)功能需要在系統(tǒng)設(shè)置開啟，在鍵盤輸入的時(shí)候，只需要上滑「拼音鍵」，就能直接把拼音鍵對(duì)應(yīng)的數(shù)字拖到輸入框，節(jié)省切換數(shù)字鍵盤的操作步驟。

1.2.4 特殊符號(hào)
「特殊符號(hào)」不僅包含了常見的10種類型，橫排26鍵的設(shè)計(jì)更能讓用戶直觀地找到自己需要的字符，使用起來體驗(yàn)非常友好。相比搜狗輸入法超過20種的符號(hào)類型，微信鍵盤簡(jiǎn)潔的設(shè)計(jì)為用戶提供了更高效的選擇，帶來了更友好的體驗(yàn)。

設(shè)計(jì)思考
少即是多。相比搜狗輸入法的大而全，在特殊符號(hào)這個(gè)細(xì)節(jié)的設(shè)計(jì)，微信鍵盤讓我愛不釋手。首先應(yīng)用了7±2效應(yīng)，在用戶的短期記憶里，降低記憶負(fù)荷。其次也應(yīng)用了席克定律，減少用戶的選擇，降低消耗的時(shí)間成本，從而提升用戶體驗(yàn)。
1.3 偏好設(shè)置
1.3.1 語音轉(zhuǎn)文字
從識(shí)別語言觀看，微信鍵盤支持普通話、粵語、英語、四川話和上海話，筆者親自體驗(yàn)一番，發(fā)現(xiàn)識(shí)別準(zhǔn)確率還挺高的（貴陽話，和四川話接近，超過80%準(zhǔn)確率）。

1.3.2 聲音和觸感
「聲音和觸感」指的是用戶使用鍵盤按鍵的聲音和觸感。這里有一個(gè)非常貼心的設(shè)計(jì)，當(dāng)用戶手機(jī)靜音的時(shí)候，打開聲音開關(guān)按鈕會(huì)提醒用戶當(dāng)前處于靜音模式，無法聽到按鍵聲音。這就是尼爾森十大原則的防錯(cuò)原則，在用戶出現(xiàn)操作錯(cuò)誤之前，通過設(shè)計(jì)提示提前避免，你可以想象如果沒有這樣的提示語，如果你的手機(jī)不小心靜音了，你就會(huì)懊惱為啥鍵盤沒有聲音，這個(gè)軟件是不是出問題了（筆者親身經(jīng)歷）。

1.3.3 顯示設(shè)置
微信鍵盤支持用戶可設(shè)置鍵盤候選字的大小，這里也有一個(gè)非常貼心的設(shè)計(jì)，當(dāng)用戶調(diào)整字體大小以后，如果想要恢復(fù)默認(rèn)大小，只需要把滑動(dòng)組件拖動(dòng)到已經(jīng)標(biāo)記的默認(rèn)起點(diǎn)就可以了，這應(yīng)用了尼爾森十大原則的易取原則，用戶無需記住默認(rèn)大小設(shè)置，如果想恢復(fù)，拖動(dòng)標(biāo)記的起點(diǎn)即可。

1.3.4 模糊拼音及其他
「模糊拼音」主要針對(duì)拼音基礎(chǔ)欠缺的用戶，提供模糊的拼音設(shè)置，從而提高輸入效率。其次微信鍵盤還提供「首字母自動(dòng)大小寫」、「雙擊空格輸入句號(hào)」和「智能添加空格」等偏好設(shè)置，用戶可根據(jù)自己的操作習(xí)慣進(jìn)行設(shè)置，獲取更便捷的體驗(yàn)。

2. 個(gè)性化功能
個(gè)性化功能主要指微信鍵盤最特色的「拼寫Plus」功能，這也是微信鍵盤發(fā)布以后給用戶最大的驚喜。
2.1 智能推薦
「智能推薦」是微信結(jié)合自己強(qiáng)大的生態(tài)設(shè)計(jì)的一個(gè)功能，在用戶輸入文字的時(shí)候，系統(tǒng)會(huì)自動(dòng)判斷文字的類型，比如輸入一本書的名字，系統(tǒng)就會(huì)提示是否需要向好友發(fā)送這本書籍。從內(nèi)容類型看，包含了音樂、視頻、讀書、小程序、視頻號(hào)和公眾號(hào)。這個(gè)功能在用戶的聊天場(chǎng)景中，實(shí)在太方便了，比如作者過去要給好友分享自己的公眾號(hào)，還需要去公眾號(hào)搜索、轉(zhuǎn)發(fā)，如今只需要輸入「設(shè)計(jì)大偵探」的名字，就可以向好友直接發(fā)送，減少了數(shù)步操作路徑，極大提升了溝通效率。

2.2 表情推薦
表情是微信聊天場(chǎng)景中必不可少的一個(gè)元素，甚至有很多用戶特別喜歡收藏表情，它可以用于各種聊天場(chǎng)景，活躍聊天的氛圍。微信鍵盤的表情推薦，通過用戶輸入的詞語，可以自動(dòng)識(shí)別可能需要發(fā)送的表情，無需用戶收藏，就可以為用戶自動(dòng)生成。這個(gè)功能非常贊，特別像筆者這樣從不收藏表情的用戶，當(dāng)突然需要輸入一個(gè)表情活躍一下氣氛的時(shí)候，我只需要輸入一個(gè)「大家好」，微信鍵盤就能為我提供數(shù)十種表情，滿足我的需求。

2.3 智能拼寫
「智能拼寫」是指當(dāng)用戶輸入某個(gè)詞語時(shí)候，系統(tǒng)為用戶精準(zhǔn)匹配候選詞，提高輸入效率。筆者嘗試了輸入「梅西」，幾乎可以根據(jù)智能匹配輸入一段完整的文字。而微信生態(tài)更為恐怖的是，它會(huì)自動(dòng)結(jié)合當(dāng)前的話題標(biāo)簽，用戶可直接跳轉(zhuǎn)至話題的視頻號(hào)動(dòng)態(tài)，一鍵查看更多信息，讓用戶徹徹底底對(duì)微信生態(tài)的服務(wù)上癮。

2.4 拼寫檢查
「拼寫檢查」是指系統(tǒng)會(huì)根據(jù)用戶在輸入文字的時(shí)候及時(shí)發(fā)現(xiàn)錯(cuò)別字，一鍵精準(zhǔn)改錯(cuò)。這個(gè)功能設(shè)計(jì)得非常貼心，能讓用戶及時(shí)看到書寫錯(cuò)誤，降低因錯(cuò)別字帶來的煩惱。

2.5 常用語
過去在微信聊天的時(shí)候，為了提高輸入效率，我會(huì)把很多反復(fù)發(fā)送的文字復(fù)制到備忘錄或微信收藏，這能提升我一定的溝通效率。但相比微信鍵盤的常用語功能，我以后就會(huì)直接放棄之前的兩個(gè)形式了。這個(gè)功能實(shí)在太方便了，比如每一次粉絲添加我的時(shí)候，我都會(huì)需要介紹一下我們公眾號(hào)的內(nèi)容，現(xiàn)在我只需要輸入前3個(gè)字，這段話就可以直接出來了，極大提升我的溝通效率。

2.6 單手模式
「單手模式」是指用戶可根據(jù)自己的慣用手或場(chǎng)景設(shè)置輸入模式，前面我有提到過，長(zhǎng)按「JKL」拼音鍵，可切換至單手模式。

2.7 手寫找字
「手寫找字」是一個(gè)支持同時(shí)手寫多字的輸入模式，這個(gè)功能對(duì)于我們父輩一代的用戶特別適用，他們多數(shù)人還未習(xí)慣用拼音拼寫，更喜歡用手寫的形式去輸入，而支持寫多字的模式可以極大提升拼寫效率。

2.8 小結(jié)
什么是以場(chǎng)景為中心的設(shè)計(jì)，微信鍵盤的設(shè)計(jì)團(tuán)隊(duì)告訴我們，這就是以場(chǎng)景為中心的設(shè)計(jì)。過去設(shè)計(jì)者總是在思考如何去定義人們使用的系統(tǒng)和應(yīng)用程序，而“以場(chǎng)景為中心”的概念，則強(qiáng)調(diào)要以人的需求為中心，系統(tǒng)和應(yīng)用程序要去幫助人們滿足他們的需求?？纯次⑿沛I盤設(shè)計(jì)團(tuán)隊(duì)結(jié)合如此多真實(shí)場(chǎng)景的設(shè)計(jì)，可見設(shè)計(jì)師真的需要具備場(chǎng)景思維，才能設(shè)計(jì)出讓用戶尖叫的體驗(yàn)。
3. 個(gè)人隱私
3.1 清空個(gè)人詞典
微信鍵盤提供了「清空個(gè)人詞典」的功能，這有點(diǎn)不可思議。不過微信鍵盤的創(chuàng)立之初，微信之父張小龍就說過，微信將上線屬于自己的專屬輸入法，其目的并不是為了搶奪輸入法市場(chǎng)，而是為了更好的保護(hù)用戶的隱私。不過該功能大家要謹(jǐn)慎使用，一旦清空，你所累積的個(gè)人詞匯就會(huì)清空，將會(huì)影響你的輸入體驗(yàn)。

3.2 幫助反饋
針對(duì)微信鍵盤使用的技巧和常見問題，微信鍵盤也設(shè)計(jì)了幫助反饋文檔，為用戶解決使用過程中的困惑。很多產(chǎn)品設(shè)計(jì)師或許覺得這樣的模塊可有可無，但這其實(shí)這就是尼爾森十大原則的人性化幫助原則，通過幫助文檔為用戶解決軟件使用困惑。

3.3 隱私與權(quán)限
“我們非常重視你的隱私安全。我們謹(jǐn)遵最小、必要原則，僅依《微信鍵盤隱私政策》獲取你使用微信鍵盤的功能所需的你的信息，不會(huì)額外獲得你的其他信息”。這是隱私與權(quán)限頁面的一句話，足以見得微信鍵盤的定位如上文所言，只做一款單純的輸入法軟件，不侵犯用戶的隱私。

二、設(shè)計(jì)總結(jié)

作為一個(gè)才上線發(fā)布V1.0.0版本的輸入法產(chǎn)品，微信鍵盤真的給了我太大的驚喜。
從產(chǎn)品的易用性來看，無論是交互，還是界面，都嚴(yán)格遵循了尼爾森十大原則的標(biāo)準(zhǔn)。這個(gè)產(chǎn)品設(shè)計(jì)中最基礎(chǔ)的設(shè)計(jì)理論模型，事實(shí)上，太多的工具類產(chǎn)品都沒有遵循它的設(shè)計(jì)原則，我們常常說一款工具難用、不好用、設(shè)計(jì)不好，就是這些操作細(xì)節(jié)沒有考慮進(jìn)去。而微信鍵盤，在我目前的使用操作過程中，暫時(shí)沒有，易用性非常高。
從產(chǎn)品的創(chuàng)新性來看，微信鍵盤不僅滿足了一個(gè)鍵盤輸入工具的基礎(chǔ)功能，而且結(jié)合了自身強(qiáng)大的生態(tài)環(huán)境設(shè)計(jì)了「拼寫Plus」這樣非常創(chuàng)新的功能。它幫助我實(shí)實(shí)在在地提升溝通效率，比如一鍵推送我的公眾號(hào)、和粉絲溝通的常用語等等，甚至破天荒的可以直接在聊天輸入框分享我喜歡的歌曲、書籍、電影、視頻號(hào)等，換做以前真的不敢想象原來這些功能可以通過一個(gè)輸入法軟件實(shí)現(xiàn)。
我已經(jīng)徹底成為微信鍵盤的腦殘粉了，即便某狗的輸入法顯示我已累計(jì)輸入超過4百萬字，但微信鍵盤給我使用的尖叫感，真的讓我不可思議，就像那洶涌的潮水，一波又一波襲來，讓我尖叫！

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。                           

// 前言

良好的互動(dòng)氛圍是社區(qū)產(chǎn)品的核心，貼吧作為一款近二十歲的社區(qū)產(chǎn)品，設(shè)計(jì)師秉承年輕包容的產(chǎn)品理念，始終在探索屬于貼吧的特色互動(dòng)形態(tài)，在這過程中，希望通過互動(dòng)系統(tǒng)設(shè)計(jì)方法，升級(jí)貼吧互動(dòng)體驗(yàn)，培養(yǎng)用戶心智，形成良性互動(dòng)鏈路，最終提升用戶活躍。

一、探索互動(dòng)系統(tǒng)的設(shè)計(jì)方法

較為簡(jiǎn)單的互動(dòng)形態(tài)為作者生產(chǎn)內(nèi)容，瀏覽者為喜歡的內(nèi)容點(diǎn)贊、回復(fù)，甚至私信創(chuàng)作者，這些互動(dòng)行為會(huì)激勵(lì)創(chuàng)作者繼續(xù)生產(chǎn)內(nèi)容。

基于以上互動(dòng)形態(tài)我們搭建了循環(huán)互動(dòng)系統(tǒng)，創(chuàng)作者為瀏覽者供給內(nèi)容后，我們需要在互動(dòng)環(huán)節(jié)引導(dǎo)互動(dòng)行為發(fā)生，在觸達(dá)環(huán)節(jié)優(yōu)化互動(dòng)信息觸達(dá)，在反饋環(huán)節(jié)引導(dǎo)參與互動(dòng)反饋，從而形成正向循環(huán)。結(jié)合實(shí)際的項(xiàng)目經(jīng)驗(yàn)我們發(fā)現(xiàn)互動(dòng)系統(tǒng)運(yùn)轉(zhuǎn)離不開“信息更易懂”、“路徑更順暢”、“玩法有驚喜”這三個(gè)要素。

二、尋找貼吧互動(dòng)設(shè)計(jì)機(jī)會(huì)點(diǎn)

貼吧的角色是由創(chuàng)作者—樓主、瀏覽者—吧友組成，良好的產(chǎn)品運(yùn)轉(zhuǎn)模式為：創(chuàng)作者向?yàn)g覽者生產(chǎn)供給內(nèi)容，瀏覽者對(duì)其互動(dòng)激勵(lì)。但貼吧多年來互動(dòng)鏈路中斷，導(dǎo)致從互動(dòng)到供給無法形成正向循環(huán)。

1.特色場(chǎng)景洞察問題

貼吧的場(chǎng)景及形態(tài)廣泛，與其他產(chǎn)品有所不同，具有內(nèi)容形式多樣、瀏覽場(chǎng)景獨(dú)特、互動(dòng)類型廣泛、回復(fù)邏輯精細(xì)、互動(dòng)玩法多元等特點(diǎn)，通過走查上述特色場(chǎng)景發(fā)現(xiàn)諸如鏈路中斷、功能缺失、結(jié)構(gòu)混亂、內(nèi)容丟失等問題。

2.下探設(shè)計(jì)機(jī)會(huì)點(diǎn)

基于以上問題的共性，我們可以從中總結(jié)出核心體驗(yàn)斷點(diǎn)：

a.看不懂：回復(fù)列表內(nèi)容結(jié)構(gòu)不合理、收藏后看不懂更新的樓層內(nèi)容；

b.看不到：Push通路不穩(wěn)定無法觸達(dá)用戶、大多用戶關(guān)閉推送push；

c.沒意思：贊、回復(fù)等互動(dòng)方式老舊，刷貼、簽到行為重復(fù)，沒有特別的玩法。

下面會(huì)使用上述總結(jié)的互動(dòng)系統(tǒng)設(shè)計(jì)方法，對(duì)貼吧現(xiàn)存問題進(jìn)行體驗(yàn)升級(jí)，提高用戶的互動(dòng)積極性。

三、 互動(dòng)系統(tǒng)設(shè)計(jì)方法應(yīng)用舉例

1.信息更易懂

貼吧的回復(fù)場(chǎng)景多，邏輯復(fù)雜，創(chuàng)作者與瀏覽者在看到對(duì)方的回復(fù)后，內(nèi)容展示需要易讀易懂，彼此才會(huì)有意愿回復(fù)反饋。

a.查看列表—優(yōu)化結(jié)構(gòu)

查看評(píng)論列表的舊體驗(yàn)存在回復(fù)對(duì)象錯(cuò)亂、內(nèi)容缺失的問題，新體驗(yàn)根據(jù)語境自由展現(xiàn)原貼、樓層、樓中樓三層結(jié)構(gòu)，承接上下文關(guān)系，降低用戶理解成本，并將其復(fù)用在查看點(diǎn)贊、查看@ 等場(chǎng)景中。

b.查看詳情—精準(zhǔn)定位

點(diǎn)擊列表頁后的精準(zhǔn)定位也是易懂的關(guān)鍵，我們對(duì)內(nèi)容被折疊、定位不準(zhǔn)舊體驗(yàn)問題進(jìn)行優(yōu)化，新體驗(yàn)?zāi)J(rèn)展開原貼及樓層內(nèi)容，細(xì)化點(diǎn)擊貼子、樓層、樓中樓后的定位邏輯，幫助用戶精準(zhǔn)看到想看到的內(nèi)容。

c.繼續(xù)消費(fèi)—延長(zhǎng)步長(zhǎng)

用戶從回復(fù)列表進(jìn)入查看詳情頁后，舊體驗(yàn)只展示當(dāng)前的評(píng)論樓層，看不到上下文內(nèi)容。新體驗(yàn)在定位樓層前后增加樓層內(nèi)容，同時(shí)通過“查看之前樓層”和“加載之后樓層”方式繼續(xù)瀏覽，延長(zhǎng)步長(zhǎng)。

2.路徑更順暢

產(chǎn)品的推送Push向用戶推送感興趣的信息，需要穩(wěn)定的觸達(dá)用戶且有意愿打開，才能達(dá)到召回用戶目的。

a.打開推送開關(guān)—場(chǎng)景引導(dǎo)

舊體驗(yàn)引導(dǎo)開啟push場(chǎng)景缺失，方式過于生硬，新體驗(yàn)選取貼吧高頻互動(dòng)場(chǎng)景，在用戶簽到后、回復(fù)后、發(fā)布后選擇合適形態(tài)展現(xiàn)引導(dǎo)，提高推送通知打開率。

b.展示推送—有吸引力

舊體驗(yàn)互動(dòng)push內(nèi)容表述凌亂，新體驗(yàn)將push內(nèi)容結(jié)構(gòu)化，以“用戶昵稱+動(dòng)作+互動(dòng)對(duì)象”的結(jié)構(gòu)展示推送內(nèi)容，并強(qiáng)化互動(dòng)用戶的頭像，適當(dāng)展示互動(dòng)詳情，吸引用戶點(diǎn)擊。

3.玩法有驚喜

貼吧點(diǎn)贊、回復(fù)等互動(dòng)方式存在多年，缺乏新穎性，用戶互動(dòng)心智疲軟，急需通過輕量、有趣的創(chuàng)新玩法，刺激瀏覽者互動(dòng)。

a.新增動(dòng)態(tài)表情

結(jié)合貼吧元素，補(bǔ)充單擊、長(zhǎng)按、雙擊的遞進(jìn)互動(dòng)點(diǎn)贊方式，給予用戶感官刺激，提升點(diǎn)贊爽感。

結(jié)合時(shí)效性運(yùn)營(yíng)活動(dòng)，增加高考、勞動(dòng)節(jié)、618活動(dòng)點(diǎn)贊，營(yíng)造驚喜感。

首次私信提供貼吧IP表情，助力用戶關(guān)系破冰。后續(xù)私信增加開香檳、丟炮竹以及丟炮竹炸滑稽雙向互動(dòng)玩法，持續(xù)提升用戶互動(dòng)意愿。

b.新增潮流表態(tài)

虛擬形式是近幾年受用戶喜愛的潮流表態(tài)玩法，探索虛擬形輕互動(dòng)方式，互動(dòng)后通過私信觸達(dá)，并沉淀社交貨幣資產(chǎn)，進(jìn)而引導(dǎo)雙向互動(dòng)。

// 小結(jié)

文本搭建的“信息更易懂”、“路徑更順暢”、“玩法有驚喜”互動(dòng)系統(tǒng)設(shè)計(jì)方法，已將其運(yùn)用在貼吧的特色互動(dòng)體驗(yàn)升級(jí)中，并取得正向數(shù)據(jù)和用戶反饋，希望該項(xiàng)目的設(shè)計(jì)方法及經(jīng)驗(yàn)?zāi)転榇蠹姨峁﹨⒖肌?

作者：百度MEUX
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)公司

。