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

接下來將分享12個設(shè)計上的小技巧，大部分在日常設(shè)計中都會遇到，了解到這些設(shè)計細節(jié)，可以讓我們的界面更加高效、易用、美觀提升用戶體驗。

 

目錄

一、快捷交互

二、提升交互路徑

三、問題前置

四、提升可讀性

五、點擊引導(dǎ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ū)入口，而用戶想要到達目標必須通過按鈕點擊才能進入，那么左圖中的排版位置就會提升用戶的操作時間。

建議正確做法～～
當(dāng)一個頁面內(nèi)出現(xiàn)多個相同模塊或者一個模塊出現(xiàn)多個熱區(qū)入口時，按鈕點擊區(qū)域有限，我們設(shè)計時就可以利用拇指定律進行排版，如右圖中布局，將按鈕放置右側(cè)可以便于用戶在右手操作時快速到達目標，因為國內(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ù)的文字擴展，通常這種表單填寫的頁面，在頁面中都是具有很大的空間位置，這樣排布會造成視覺上的不規(guī)律和擁擠，降低了篩選效率，當(dāng)然如果是模塊區(qū)域很小的情況下，可以適當(dāng)?shù)倪M行使用。

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

 

 

 

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

 

 

 

 

 

 

五、點擊引導(dǎo)

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

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

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

 

 

 

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

 

 

 

 

 

 

 

六、注意飽和度

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

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

建議正確做法～～
我們在設(shè)計深色版本時可以根據(jù)產(chǎn)品主色降低飽和度，包括圖標等元素，以此來緩沖對用戶視覺感官的刺激，目前很多大廠的處理方式是直接在彩色元素上添加一層黑色透明遮罩進行處理，這樣無需在添加更多的顏色規(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)品中默認一直使用該特殊字體，這樣才有使用的價值。

建議正確做法～～
一般系統(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)品中的案例

 

 

 

 

 

 

 

 

九、圖標保持一致

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

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

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

 

 

 

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

 

 

 

 

 

 

 

 

十、利用對比

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

左側(cè)為什么錯？？
左圖中單看視覺也沒問題，只是在表現(xiàn)上圖標與背景融入到一塊了，導(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)性的圖片上放文字，那基本無法看清，嚴重影響閱讀體驗。

建議正確做法～～
在界面設(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)變用戶目標，當(dāng)彈窗無法聚焦時便很難達到目標，并且視覺上層級更加混亂。

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

 

 

 

 

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