編輯導(dǎo)語：產(chǎn)品設(shè)計(jì)上的許多細(xì)節(jié)都有可能影響到用戶的產(chǎn)品使用體驗(yàn)，進(jìn)而影響到產(chǎn)品的打開率以及留存率等。這就要求產(chǎn)品設(shè)計(jì)師在交互體驗(yàn)層上結(jié)合一定小技巧，以提升用戶體驗(yàn)。本篇文章里，作者結(jié)合案例，總結(jié)了一些UI技巧，一起來看看吧。

對于很多設(shè)計(jì)師來講在設(shè)計(jì)界面過程中往往會(huì)忽略掉很多的細(xì)節(jié)，比如卡片的排版、文字的排版、各種狀態(tài)的反饋等等，特別是剛?cè)胄械脑O(shè)計(jì)師在做頁面時(shí)往往是直接拿到競品的頁面搬運(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)，作為初級設(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)。

一、快捷交互

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

1. 左側(cè)為什么錯(cuò)？？

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

2. 建議正確做法～~

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

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

二、提升交互路徑

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

1. 左側(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í)間。

2. 建議正確做法～～

當(dāng)一個(gè)頁面內(nèi)出現(xiàn)多個(gè)相同模塊或者一個(gè)模塊出現(xiàn)多個(gè)熱區(qū)入口時(shí)，按鈕點(diǎn)擊區(qū)域有限，我們設(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)茲定律、拇指定律。

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

三、問題前置

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

1. 左側(cè)為什么錯(cuò)？？

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

2. 建議正確做法～～

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

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

四、提升可讀性

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

1. 左側(cè)為什么錯(cuò)？？

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

2. 建議正確做法～～

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

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

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

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

1. 左側(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ì)對用戶造成錯(cuò)誤的理解。

2. 建議正確做法～～

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

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

六、注意飽和度

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

1. 左側(cè)為什么錯(cuò)？？

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

2. 建議正確做法～～

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

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

七、禁止特殊字體

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

1. 左側(cè)為什么錯(cuò)？？

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

2. 建議正確做法～～

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

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

八、按鈕也要有層級

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

1. 左側(cè)為什么錯(cuò)？？

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

2. 建議正確做法～～

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

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

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

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

1. 左側(cè)為什么錯(cuò)？？

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

2. 建議正確做法～～

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

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

十、利用對比

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

1. 左側(cè)為什么錯(cuò)？？

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

2. 建議正確做法～～

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

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

十一、圖文疊加

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

1. 左側(cè)為什么錯(cuò)？？

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

2. 建議正確做法～～

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

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

十二、注意遮罩透明

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

1. 左側(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)，并且視覺上層級更加混亂。

2. 建議正確做法～～

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

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

作者：愛吃貓的魚；公眾號(hào)：防脫發(fā)藥水

本文由 @愛吃貓的魚 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Pexels，基于CC0協(xié)議

蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan

在日常場景中，畫面平衡是潛在的一個(gè)重要影響因素，合理且有吸引力的視覺平衡設(shè)計(jì)，可以讓用戶更加舒心地接受并停留在使用頁面或者相應(yīng)場景中。那么，視覺平衡究竟應(yīng)該如何做好？本篇文章里，作者針對視覺平衡這件事兒進(jìn)行了分析總結(jié)，一起來看一下。

畫面平衡是一個(gè)很基本的設(shè)計(jì)理念，但很多朋友在平時(shí)的作品中容易忽視這個(gè)點(diǎn)。彩云在星球中幫不少朋友看過作品集，發(fā)現(xiàn)最多的問題之一就是畫面平衡沒做好，我覺得只要把這個(gè)基本問題解決了，作品就能提升一個(gè)檔次。

用戶本能地會(huì)對不平衡的設(shè)計(jì)感到厭煩，如何在畫面中創(chuàng)造一個(gè)有吸引力的平衡？是本篇文章要分享的內(nèi)容。

Illustration: Outcrowd

平衡是一個(gè)作品中最重要的元素之一。平衡中的對稱關(guān)系能夠創(chuàng)造平衡與和諧，這種平衡狀態(tài)直觀上能夠讓用戶感到舒適。

人體是垂直對稱的，我們的視覺接收也與之相對應(yīng)。我們喜歡物體在垂直軸上保持平衡，直覺上總是傾向于平衡一種力量與另一種力量。

Illustration: Outcrowd

在設(shè)計(jì)環(huán)境中，平衡是基于元素的視覺重量，而視覺重量是用戶對圖像的注意力范圍。如果畫面是平衡的，用戶會(huì)下意識(shí)地感到舒適。畫面平衡被認(rèn)為是其元素在視覺上的比例安排。

如何讓一個(gè)頁面看起來平衡？

一、對稱（靜態(tài)）平衡

最常見的平衡例子就是使用對稱。

在潛意識(shí)層面上，對稱的視覺能讓人愉悅，能讓畫面看起來和諧有條理。對稱的平衡是通過在水平或垂直的中軸兩側(cè)均勻放置元素來創(chuàng)造的。也就是說，畫面中間假想線的兩邊實(shí)際上是彼此的鏡像。有些人認(rèn)為對稱的平衡是無聊和可預(yù)測的，但它經(jīng)受住了時(shí)間的考驗(yàn)，到現(xiàn)在仍然是在頁面上創(chuàng)造舒適和穩(wěn)健感覺的最好方法之一。

Illustration: Outcrowd

二、不對稱（動(dòng)態(tài)）平衡

兩側(cè)重量不相同的元素構(gòu)成具有不對稱平衡。

動(dòng)態(tài)平衡通常會(huì)比靜態(tài)平衡更有設(shè)計(jì)感，讓畫面不至于呆板。在缺乏平衡的情況下，我們的目光會(huì)條件反射性地開始尋找平衡點(diǎn)，這是一個(gè)很好的機(jī)會(huì)，可以將注意力吸引到頁面上可能還沒被注意到的部分。頁面重點(diǎn)就應(yīng)該放在這里——抓住用戶的注意力，就像產(chǎn)品的生命線一樣。

Landing page — Asian Cuisine

比如一般這樣去“配重”的元素會(huì)是一個(gè)按鈕或者標(biāo)題。

重要信息（或者是行動(dòng)按鈕）就是我們需要去配重的價(jià)值元素。

不對稱的現(xiàn)象越嚴(yán)重，用戶就越想找出其中的原因（檢查配重）。人們本能地比平時(shí)更仔細(xì)地研究這樣的畫面。然而，這里需要注意分寸，過于古怪的構(gòu)圖并不總是能被很好的感知。

三、徑向平衡

Illustration: Outcrowd

平衡中的另一種類型，特點(diǎn)是視覺元素從一個(gè)共同的中心點(diǎn)放射出來。徑向平衡在設(shè)計(jì)中不常用。它的優(yōu)點(diǎn)是，注意力很容易找到并保持一個(gè)焦點(diǎn)——恰好就在它的中心，這通常是構(gòu)圖中最引人注目的部分。

四、馬賽克平衡

這是一種平衡中的混亂，就像 Jackson Pollock的畫作一樣。這樣的組成沒有突出的焦點(diǎn)，所有的元素都有同樣的視覺重量。沒有層次，乍一看，畫面就像視覺噪音，但所有元素又相互匹配，形成一個(gè)連貫的整體。

（彩云注：這是一種比較高階的設(shè)計(jì)平衡處理手法，用的好可以讓畫面非常具有設(shè)計(jì)感，但把握不好的話，就會(huì)非常凌亂。所以，我們平時(shí)能看到很多大師的作品看似一些簡單圖形的使用，但就是好看，輪到自己設(shè)計(jì)的時(shí)候就會(huì)發(fā)現(xiàn)，越簡單的設(shè)計(jì)似乎越難設(shè)計(jì)好。）

Illustration: Outcrowd

五、視覺平衡的秘密？

當(dāng)談到構(gòu)圖中的重量平衡時(shí)，他們經(jīng)常將其與物理世界中的重量進(jìn)行比較：重力、杠桿、重量和支點(diǎn)。我們的大腦和眼睛感知平衡的方式非常類似于力學(xué)定律。我們很容易把一幅畫想象成一個(gè)在某一點(diǎn)上平衡的平面，就像一個(gè)天平。如果我們在圖像的邊緣添加一個(gè)元素，它就會(huì)失去平衡，有必要修復(fù)它。元素是否是一組色調(diào)、顏色還是點(diǎn)并不重要，目標(biāo)是找到圖像的視覺“重心”，即圖像的重心。

不幸的是，沒有精確的方法來確定一個(gè)物體的視覺質(zhì)量。一般來說，設(shè)計(jì)師依賴于他們的直覺。不過，下面這些有用的觀察可能會(huì)有所幫助：

1）大小

大的物體總是更重。

2）形狀

不規(guī)則形狀比規(guī)則形狀的元素輕。

3）顏色

暖色比冷色重。

4）色調(diào)

深色物體比淺色物體重。

5）圖案

帶有圖案的元素顯得更重。

6）3D

帶有紋理貼圖的元素顯得更重。

7）位置

物體離中心越遠(yuǎn)，其視覺重量越大。

8）方向

垂直元素比水平元素更重。

9）密度

許多小元素可以抵消一個(gè)大元素。

10）內(nèi)部復(fù)雜性

物體內(nèi)部越復(fù)雜，視覺重量更大。

11）填充空間關(guān)系

正形空間比負(fù)形空間更重。

12）對重量的感知

照片中的啞鈴看起來會(huì)比一只鋼筆更重。

六、總結(jié)

當(dāng)使用對稱時(shí)，作品看起來可以更加的專業(yè)和有科學(xué)性。其中，靜態(tài)對稱的作品顯得更加有專業(yè)精神和嚴(yán)肅的；而動(dòng)態(tài)對稱的設(shè)計(jì)方法則能吸引用戶的興趣，表達(dá)出個(gè)性和創(chuàng)造力，能讓用戶集中注意力。

在界面設(shè)計(jì)中，好看且和諧的配圖會(huì)讓用戶潛意識(shí)里更容易接受、或者更愿意停留于當(dāng)前頁面，那么，如何才能把配圖做好，讓界面看起來更加高級和耐看？本篇文章里，作者總結(jié)了10個(gè)優(yōu)化UI配圖的小方法，一起來看一下。

“配圖用的好，作品差不了”，UI中配圖的好壞直接影響到界面的品質(zhì)感。它非常重要但卻經(jīng)常容易被忽視，要想把配圖做好其實(shí)也是有規(guī)律可循的，今天的文章就將總結(jié)配圖使用的10個(gè)優(yōu)秀方法，相信看完一定會(huì)有所收獲。之前我也寫過另一篇如何選好配圖的文章《如何選到設(shè)計(jì)感強(qiáng)的配圖，我總結(jié)了這7個(gè)實(shí)用方法》，同時(shí)也分享了很多超高質(zhì)量的圖片素材資源和網(wǎng)站，千萬別錯(cuò)過。

在欣賞了Behance上數(shù)百個(gè)高質(zhì)量的項(xiàng)目和眾多Dribbble優(yōu)質(zhì)作品后，我總結(jié)出了一套可以將圖片與UI結(jié)合提升設(shè)計(jì)感的方法，可以讓你的作品立即看起來更加專業(yè)。

本文的靈感來源于我剛開始做UI時(shí)所遇到的困難。和許多其他設(shè)計(jì)師一樣，當(dāng)我在Dribbble和Behance上瀏覽別人的作品獲得靈感時(shí)，面對這些海量作品時(shí)常會(huì)感到迷失和不知所措。就像透過萬花筒看到各種花哨的圖案一樣，當(dāng)把萬花筒挪開的時(shí)候這些圖案就消失了，幸福的感覺是短暫的。當(dāng)我自己開始設(shè)計(jì)作品時(shí)，我仍然不知道該怎么做。

隨著時(shí)間的推移，我意識(shí)到我并沒有從日常的作品欣賞和搜集中思考和學(xué)習(xí)，就只是漫無目的地欣賞了其他設(shè)計(jì)師的作品。

漸漸地我發(fā)現(xiàn)了一種欣賞其他設(shè)計(jì)師作品的好方法，我會(huì)有意識(shí)地去總結(jié)記錄下他們使用的想法和技巧，然后應(yīng)用到我的日常工作。在本文中，我很想分享一些其他設(shè)計(jì)師用來處理配圖的方法，這些方法可以使作品看起來更加專業(yè)。

一、使用圖片作為背景

（彩云說：這里的圖片選擇要突出核心內(nèi)容且一定要高質(zhì)量，不要選擇雜亂無章或與主題無關(guān)的低質(zhì)量圖片。）

二、將圖片于背景進(jìn)行融合

（彩云說：結(jié)合頁面表達(dá)需要，選擇合適的配圖并做融合或出界的設(shè)計(jì)，會(huì)讓畫面極具吸引力和強(qiáng)烈的設(shè)計(jì)感。）

三、將高質(zhì)量的圖片緊密的放在一起，不留任何間距

（彩云注：當(dāng)畫面主要以高質(zhì)量圖片吸引用戶注意時(shí)，盡可能的利用更大展示面積，這樣會(huì)顯得更加高級和有視覺沖擊力。）

四、在圖片下方添加色塊

（彩云注：這里的色塊要注意跟圖片的主色調(diào)保持相近，可以直接吸圖片上的顏色然后找找鄰近色就好了，色環(huán)上30°區(qū)間內(nèi)的顏色就比較和諧。）

五、在圖片下方/上方增加圖案或形狀

（彩云注：這里的形狀建議不要太過于復(fù)雜，用一些基本圖形就可以，比如圓點(diǎn)、方塊矩形之類的，增強(qiáng)畫面的形式感。）

六、在圖片下方或上方增加文字、圖案或不規(guī)則形狀

（彩云注：這里的文字、圖案或不規(guī)則形狀跟上面的技巧類似，都是起到裝飾的作用，但文字的話有時(shí)候還要注意識(shí)別性，比如文字比較緊湊的時(shí)候。圖案或形狀更多的是起到視覺引導(dǎo)的作用。）

七、將圖片剪切到文字或形狀中

（彩云注：這個(gè)很好理解，就是以文字或形狀作為遮罩，增加畫面的設(shè)計(jì)感，文字盡量選擇粗體。）

八、在圖片周圍增加一個(gè)非常窄的邊距

（彩云注：這個(gè)技巧可能跟第3條有些沖突，其實(shí)這2個(gè)方法都是可以的，要根據(jù)頁面具體的排版情況靈活使用。）

八、在圖片上增加顏色層

（彩云注：這個(gè)技巧也比較容易理解，一般會(huì)選擇飽和度較高的顏色應(yīng)用在充滿活力的頁面上，增加畫面的沖擊力。）

九、在彩色疊加到圖片中的一部分上

（彩云注：這個(gè)技巧跟上面的有些類似，只不過是以小面積疊加的形式，顏色一般選擇品牌色或主題色，與背景盡量有較大反差會(huì)更加容易出彩。）

十、將圖片剪切成其他形狀

（彩云注：這個(gè)方法有一點(diǎn)需要注意的就是剪切的形狀不要過于復(fù)雜，一般用基礎(chǔ)圖形就好。）

以上，就是我總結(jié)的一些可以用來操作UI圖片的實(shí)用方法，這些方法可以使得作品變得更加有視覺感也更加專業(yè)。

為我投票

設(shè)計(jì)是通過美感和邏輯來提升用戶體驗(yàn)，提高企業(yè)滿意度。本文探討美感設(shè)計(jì)在用戶體驗(yàn)中的作用，從五個(gè)維度分別論述美感設(shè)計(jì)的重要性，一起來看看吧。

設(shè)計(jì)是通過邏輯和美感來解決人們的問題，滿足他們的愿望。本文將探討美感在用戶體驗(yàn)設(shè)計(jì)中的作用，以此提高用戶和企業(yè)的滿意度。

一、為什么美感對設(shè)計(jì)很重要

數(shù)字產(chǎn)品的成功與否，除了其功能性能以外，美感也扮演了至關(guān)重要的角色。在競爭日益激烈的市場，用戶的選擇不僅僅局限于功能是否滿足需求，審美愉悅和情感需求也成為了影響購買決策的關(guān)鍵因素。因此，設(shè)計(jì)對于產(chǎn)品的成功至關(guān)重要。

隨著需求層次的提高，人們的選擇越來越多樣化和理性化。教育和收入水平的提高，使他們開始思考超越功能的問題。此外，用戶更加注重產(chǎn)品的美感和和諧性，因此美學(xué)在其選擇中扮演著越來越重要的角色。

馬斯洛金字塔，展示需求層次

美感在用戶體驗(yàn)設(shè)計(jì)中發(fā)揮以下作用：

• 使設(shè)計(jì)變得情感化，更符合人性；
• 保持?jǐn)?shù)字事物與現(xiàn)實(shí)世界的聯(lián)系；
• 支持使用感官；
• 滿足審美需求；
• 以一種風(fēng)格將不同的事物結(jié)合在一起；
• 讓產(chǎn)品在競爭中脫穎而出。

創(chuàng)新農(nóng)業(yè)服務(wù)FarmSense的網(wǎng)站設(shè)計(jì)

美學(xué)是將設(shè)計(jì)的過去、現(xiàn)在和未來連接在一起的重要橋梁。當(dāng)今的布局和圖形基于世界文化數(shù)百年來積累的豐富遺產(chǎn)?，F(xiàn)代設(shè)計(jì)師和藝術(shù)家通過各種趨勢和創(chuàng)新對其進(jìn)行改造，創(chuàng)造出一個(gè)新的文化歷史圈子，展示了歷代最杰出藝術(shù)家的杰作。這正是藝術(shù)和審美在設(shè)計(jì)中所發(fā)揮的作用。我們不是要重新發(fā)明輪子，而是要讓它變得更現(xiàn)代化，以解決當(dāng)下的問題。

二、審美-可用性效應(yīng)

美學(xué)可用性效應(yīng)是指用戶更傾向于認(rèn)為外觀吸引人的產(chǎn)品更加實(shí)用。即使實(shí)際上這些產(chǎn)品并沒有更加有效或高效。這種現(xiàn)象被用戶體驗(yàn)設(shè)計(jì)大師 Nielsen Norman Group 視為一種重要原因，因?yàn)?strong>既有吸引力又實(shí)用的界面才能真正提供良好的用戶體驗(yàn)，而不僅僅是功能性 UI。

在1995年，日立設(shè)計(jì)中心進(jìn)行了一項(xiàng)研究，研究人員Masaaki Kurosu和Kaori Kashimura探究了人機(jī)交互實(shí)踐中的美學(xué)吸引力和易用性。該研究測試了252名研究參與者對26種ATM用戶界面的易用性和美學(xué)吸引力進(jìn)行評分。結(jié)果分析表明，審美情趣評級與感知易用性之間的相關(guān)性高于審美情趣評級與實(shí)際易用性之間的相關(guān)性。因此，該研究得出結(jié)論，無論用戶試圖評估系統(tǒng)的功能，任何界面的美感都會(huì)對用戶產(chǎn)生強(qiáng)烈的影響。

在 UX 設(shè)計(jì)中，美感是一個(gè)關(guān)鍵因素，它對用戶體驗(yàn)?zāi)繕?biāo)有著深遠(yuǎn)的影響。UX 設(shè)計(jì)通常包括四個(gè)核心方面：外觀吸引力和視覺和諧、可用性、可訪問性和效用性。這些方面綜合起來，使得產(chǎn)品具有吸引人的外觀、易于操作、適用于不同能力和設(shè)備、能夠解決問題以及讓用戶感到愉悅。

Flower Store 應(yīng)用程序指導(dǎo)用戶完成訂購個(gè)性化花束的過程

三、業(yè)務(wù)目標(biāo)

然而，對于那些開始推出新產(chǎn)品或改進(jìn)知名產(chǎn)品的公司來說，他們也必須從不同的角度考慮。他們需要思考各種財(cái)務(wù)、轉(zhuǎn)換、銷售和所有其他業(yè)務(wù)運(yùn)營方面的因素。

設(shè)計(jì)美學(xué)是否會(huì)對他們的商業(yè)目標(biāo)產(chǎn)生影響呢？當(dāng)然會(huì)。色彩理論和心理學(xué)、屏幕上的和諧、易讀的文本內(nèi)容以及吸引人的圖像不僅對于滿足用戶需求非常重要，而且對于銷售和讓企業(yè)獲得滿意度也至關(guān)重要。

四、用戶體驗(yàn)美學(xué)的元素

不同的元素可以融入用戶界面并構(gòu)建其美感，其中包括：

• 排版
• 布局
• 照片
• 插圖
• 3D圖形
• 動(dòng)畫
• 視頻
• 人物

這些要素一起形成了交互美學(xué)，對于積極的用戶體驗(yàn)有著直接的影響。另外，建議我們將過長的句子分解為短句，以減少重復(fù)，并提供改進(jìn)建議。

加密博客設(shè)計(jì)使用有限的調(diào)色板使其看起來嚴(yán)肅但不沉悶，并呼應(yīng)大報(bào)的傳統(tǒng)布局以設(shè)置印刷媒體遷移到數(shù)字世界的強(qiáng)烈美感。

五、一致性

在 UX 和業(yè)務(wù)的交叉點(diǎn)上，一致性是實(shí)現(xiàn)美學(xué)和可用性效果的核心。Jacob Nielsen 曾指出：“一致性是最強(qiáng)大的可用性原則之一，因?yàn)楫?dāng)事物表現(xiàn)始終一致時(shí)，用戶不必?fù)?dān)心會(huì)發(fā)生什么。”因此，為了實(shí)現(xiàn)一致性，必須確保整個(gè)產(chǎn)品中的界面元素和交互方式始終保持一致，并遵循統(tǒng)一的設(shè)計(jì)準(zhǔn)則。

事實(shí)上，它比交互更進(jìn)一步。它還有助于建立強(qiáng)大的品牌。標(biāo)志和品牌項(xiàng)目、網(wǎng)站、應(yīng)用程序、電子郵件和社交網(wǎng)絡(luò)——產(chǎn)品與用戶的每一個(gè)接觸點(diǎn)都應(yīng)該遵循一個(gè)總體理念和一套價(jià)值觀，并以一致和完整的風(fēng)格包裝。

金融科技服務(wù) Crezco的身份設(shè)計(jì)采用一致的方法，使品牌能夠通過各種溝通渠道建立有吸引力、值得信賴和穩(wěn)固的形象。

在全球范圍內(nèi)，所有設(shè)計(jì)解決方案都需要回答一個(gè)關(guān)鍵問題——為什么？Simon Sinek，一位領(lǐng)袖力專家曾說過：“人們購買的不是你做的事情，而是你為什么這樣做。”你所做的只是證明你的信念，這是產(chǎn)品和服務(wù)保持一致和鼓舞人心的原因。從“為什么”開始做出的決策將決定如何與用戶交流，無論通信方式是什么。因此，您需要明確您所溝通的內(nèi)容，無論與品牌的聯(lián)系是什么。這樣可以建立信任，使品牌更加強(qiáng)大，這正是美學(xué)在用戶體驗(yàn)中發(fā)揮作用的地方。此外，您應(yīng)該簡化長句，減少重復(fù)，并提供改進(jìn)建議以提高文本的清晰度和簡潔性。

六、總結(jié)

設(shè)計(jì)不僅要解決功能問題，還要考慮美感與情感需求。在數(shù)字產(chǎn)品市場競爭激烈的今天，美感對于產(chǎn)品的成功非常重要。人們的需求也逐漸提高，開始關(guān)注產(chǎn)品的美感和和諧性。美感在用戶體驗(yàn)設(shè)計(jì)中的作用包括：使設(shè)計(jì)情感化，保持?jǐn)?shù)字產(chǎn)品與現(xiàn)實(shí)世界的聯(lián)系，支持使用感官，滿足審美需求，以風(fēng)格將不同事物結(jié)合在一起，讓產(chǎn)品在競爭中脫穎而出。用戶更傾向于認(rèn)為外觀吸引人的產(chǎn)品更加實(shí)用，這也是良好用戶體驗(yàn)的重要原因。

在頁面中，我們時(shí)常會(huì)被各種絢麗的色彩所吸引。本文介紹了透明度系統(tǒng)的優(yōu)勢，并以實(shí)際例子展示其在解決設(shè)計(jì)問題、提高細(xì)節(jié)表現(xiàn)和可讀性方面的應(yīng)用。讓我們一起看下去吧。

打開絢麗紛繁的頁面，我們時(shí)常會(huì)被各種各樣的色彩所吸引。但是，除了鮮艷奪目的顏色外，你可曾留意過那些看似平凡無奇的中性顏色？這些中性顏色在UI設(shè)計(jì)中扮演著不可或缺的角色，而其中的透明度系統(tǒng)更是隱藏著無限的魅力。今天，我們就要一起揭開透明度系統(tǒng)的神秘面紗，探索其在UI規(guī)范中的重要性和作用。

或許你曾聽過“Less is more”這句名言，透明度系統(tǒng)恰好就是這個(gè)理念的最佳體現(xiàn)。通過微妙的不透明程度調(diào)整，中性顏色的透明度不僅能提升整體界面的平衡感和視覺品質(zhì)，還能增加元素之間的層次感和空間感。想象一下，通過透明度的微妙運(yùn)用，你的設(shè)計(jì)將呈現(xiàn)出一種舒適且現(xiàn)代感的風(fēng)格。是不是感覺很神奇？同時(shí)這個(gè)方法還是谷歌設(shè)計(jì)規(guī)范中的推崇之一哦！

做了8年產(chǎn)品經(jīng)理后，我是這么看產(chǎn)品經(jīng)理的

我個(gè)人是從非常初級的產(chǎn)品經(jīng)理做起，再到負(fù)責(zé)一個(gè)大產(chǎn)品的項(xiàng)目管理，現(xiàn)在有幸跳出了日?；A(chǔ)的工作更多的去看產(chǎn)品的PMF，product strategy...

查看詳情 >

在設(shè)計(jì)規(guī)范中，我們通常會(huì)根據(jù)文字的重要性將其分為重要、常規(guī)和輔助三個(gè)層級，然后為它們定義不同的顏色。但是，有時(shí)候使用定義好的顏色在特定情況下會(huì)出現(xiàn)識(shí)別不清晰、與背景搭配不美觀的問題。這就是透明度應(yīng)用的典型場景。下面先說下使用透明度的優(yōu)勢：

• 提升設(shè)計(jì)的細(xì)節(jié)表現(xiàn)：通過給文字和設(shè)計(jì)元素設(shè)置透明度，可以使其與背景更融合，提升細(xì)節(jié)的呈現(xiàn)效果，使作品更富有層次感。
• 提高可讀性：透明度的設(shè)置可以在不損害背景色的前提下，增強(qiáng)文字的對比度，使其更易讀，提供更好的用戶體驗(yàn)。
• 增加視覺美感：透明度的運(yùn)用可以使設(shè)計(jì)更具美感和藝術(shù)性，讓作品更具吸引力。

接下來讓我們首先看看純色文字定義經(jīng)常遇到的問題吧。當(dāng)設(shè)定文字與一些顏色元素搭配時(shí)，就可能出現(xiàn)一些尷尬的情況。

比如，下圖中相同顏色的文字在品牌色背景上，識(shí)別度低，視覺上也不是很和諧。

接下來，我們對文字顏色進(jìn)行一些小小的改變，通過降低不透明度來解決這個(gè)問題。

效果立竿見影！降低不透明度后，文字識(shí)別問題迎刃而解，細(xì)節(jié)也變得更加清晰，文字顏色還與背景色融為一體，看起來更為和諧。

其實(shí)，不僅僅是文字，我們還可以用這個(gè)方法來改善其他元素的設(shè)計(jì)，比如表格的分割線。讓我們來看一個(gè)例子。

通常，我們使用較淺的顏色來填充分割線，在遇到有彩色背景的情況下，分割線可能會(huì)“隱身”。在下圖中，同樣顏色的分割線在帶有懸停效果的表格上就“隱身”了。

接下來，讓我們同樣的方法來改善這個(gè)問題。

效果如下圖所示。左邊的分割線展示出比表格本身顏色更深的藍(lán)色，整體顏值得到了提升。這也展示了設(shè)計(jì)師在細(xì)節(jié)把控上的魅力。

那么這個(gè)方法如何應(yīng)用到實(shí)際工作中呢？讓我們來介紹一下具體步驟。

首先，我們需要考慮文字的使用場景，大致分為淺色背景、深色背景和彩色背景。我們需要根據(jù)實(shí)際項(xiàng)目情況來確定使用場景。一般我們會(huì)在設(shè)定色階時(shí)也會(huì)根據(jù)實(shí)際項(xiàng)目設(shè)定一個(gè)深色和淺色的透明度階梯，例如：設(shè)定顏色#000000，依次設(shè)置透明度為90%、80%…20%、10%序列。當(dāng)然這個(gè)序列可以分為有序序列和無序序列，85%、56%等等

接下來下面是對深色背景和淺色背景下文字顏色的定義，具體操作如下：對于淺色背景，我們將文字分為三個(gè)層級：重要、次要和輔助。針對這三個(gè)層級，文字顏色填充為#000000，并設(shè)置序列中對應(yīng)的不同不透明度。具體來說，重要文字的不透明度設(shè)為90%，次要文字為60%，輔助文字為40%。在深色背景下，相同的操作也可以應(yīng)用，只是將文字顏色設(shè)置為#FFFFFF（白色）。在彩色背景下，我們會(huì)根據(jù)具體情況選擇使用深色背景或淺色背景下的文字顏色，并根據(jù)需要進(jìn)行透明度的調(diào)整。

最后，為了確保文字在不同背景下的清晰度和可讀性，我們需要進(jìn)行對比度測試。可以使用對比度測試工具，來驗(yàn)證所定義的透明度是否符合設(shè)計(jì)規(guī)范。（https://www.siegemedia.com/contrast-ratio）

但是，請記住，設(shè)計(jì)并不僅止于設(shè)計(jì)稿。最終需要前端同學(xué)來實(shí)現(xiàn)，而不是所有前端同學(xué)都熟悉并愿意使用透明度的系統(tǒng)。這時(shí)，我們可以運(yùn)用我們的魅力和專業(yè)知識(shí)來說服他們。我們可以引用谷歌的Material Design官方文檔，證明透明度的可行性和簡便性。我們可以解釋這種設(shè)置透明度的方法不僅簡單，而且可以提高工作效率，同時(shí)還能增加用戶的視覺體驗(yàn)。

通過使用透明度解決設(shè)計(jì)問題，我們可以使文字和設(shè)計(jì)元素更融合、提升細(xì)節(jié)表現(xiàn)，并提高用戶體驗(yàn)。透明度的設(shè)置靈活多樣，能夠適應(yīng)不同項(xiàng)目、不同場景的需求，讓我們的作品在視覺的世界中獨(dú)樹一幟。

在UI設(shè)計(jì)中，中性顏色透明度是一個(gè)非常重要的設(shè)計(jì)工具，它可以提升界面的平衡感、視覺品質(zhì)，增加元素之間的層次感和空間感，以及創(chuàng)造舒適且現(xiàn)代感的設(shè)計(jì)風(fēng)格。通過合理選擇透明度級別，并在不同元素的應(yīng)用中靈活運(yùn)用，我們可以創(chuàng)造出令人愉悅和吸引人的界面。

鼓勵(lì)設(shè)計(jì)師們在UI設(shè)計(jì)中靈活運(yùn)用中性顏色透明度，并探索出獨(dú)特的設(shè)計(jì)風(fēng)格。根據(jù)不同的設(shè)計(jì)目標(biāo)和色彩搭配，選擇合適的透明度級別，并結(jié)合其他設(shè)計(jì)元素，為用戶呈現(xiàn)出現(xiàn)代且優(yōu)雅的界面。當(dāng)然，這個(gè)方法并非一勞永逸，希望在實(shí)際工作中留意并找到適合自己和項(xiàng)目的方法。讓我們的設(shè)計(jì)在色彩的世界中綻放光芒吧！

對于設(shè)計(jì)同學(xué)來說，很多基礎(chǔ)知識(shí)可能看起來很簡單，容易被忽視。但隨著設(shè)計(jì)經(jīng)驗(yàn)越來越多，更建議大家牢固系統(tǒng)地掌握這些基礎(chǔ)知識(shí)。在本篇文章中作者給大家系統(tǒng)性地講解了界面設(shè)計(jì)進(jìn)階過程中需要搞懂的基本設(shè)計(jì)要素。一起來看吧。

當(dāng)下大多數(shù)界面設(shè)計(jì)類軟件都是以矢量圖的方式工作。通過調(diào)整參數(shù)來定義圖形的大小，并且在不降低質(zhì)量的情況下對圖形進(jìn)行拉伸和放大。

在進(jìn)行界面設(shè)計(jì)時(shí)，我們需要生成出各種尺寸的矩形、圓形等對象，規(guī)定這些對象的尺寸和樣式，并對這些對象進(jìn)行移動(dòng)，將它們放到合適的位置上。

很多基礎(chǔ)知識(shí)可能看起來很簡單，容易被忽視。但隨著設(shè)計(jì)經(jīng)驗(yàn)越來越多，更建議大家牢固系統(tǒng)地掌握這些基礎(chǔ)知識(shí)，厚積薄發(fā)才能越走越遠(yuǎn)！

一、盒子模型

盒子模型是在設(shè)計(jì)和開發(fā)中定義數(shù)字接口最基本的方法。我們所做的大多數(shù)設(shè)計(jì)都是根據(jù)盒子模型進(jìn)行，因此了解盒子模型對界面設(shè)計(jì)來說非常重要。

盒子模型由四個(gè)主要元素組成：

內(nèi)容 (content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)。

內(nèi)邊距(padding)是內(nèi)容和邊框線之間的空間，如下圖灰色區(qū)域。內(nèi)邊距的范圍越廣，內(nèi)容的安全區(qū)域就越大。

外邊距(margin)是盒子與其他元素之間的空白區(qū)域，如下圖藍(lán)色區(qū)域。外邊距保證了盒子與盒子之間有足夠的間距。

二、尺寸

寬度(width)和高度(height)是定義對象大小的參數(shù)。在二維空間上，寬度代表橫軸上的比例，高度代表縱軸上的比例。

一定比例的寬和高構(gòu)成的矩形是容納對象的最小矩形框。如果對象本身是不規(guī)則的形狀，在設(shè)計(jì)時(shí)我們需要根據(jù)對象的尺寸制定一個(gè)規(guī)則的矩形框，方便交付開發(fā)。

三、角度

角度定義了對象順時(shí)針旋轉(zhuǎn)的方向，默認(rèn)為0°。另外旋轉(zhuǎn)也可以是負(fù)數(shù)，比如-15°旋轉(zhuǎn)與345°旋轉(zhuǎn)的角度是相同的。

如果我們想要一個(gè)統(tǒng)一的界面，最好不要手動(dòng)旋轉(zhuǎn)對象，而是通過輸入度數(shù)來旋轉(zhuǎn)，這樣會(huì)比手動(dòng)旋轉(zhuǎn)更精確。

旋轉(zhuǎn)對圓形來說是特殊的存在，因?yàn)橐粋€(gè)圓形無論旋轉(zhuǎn)到哪個(gè)角度看都是一樣的。

四、圓角半徑

邊框半徑數(shù)值越大，這個(gè)形狀的圓角度數(shù)就越大。例如一個(gè)矩形，既能一次性設(shè)置四個(gè)點(diǎn)的圓角半徑，也可以單獨(dú)設(shè)置某個(gè)點(diǎn)的圓角半徑。

正常來說，設(shè)置圓角的圖形看起來比直角圖形更友好。界面設(shè)計(jì)中，相同的圖形最好能保持一樣的的圓角度數(shù)，這樣界面看起來會(huì)更統(tǒng)一。

另外一個(gè)圖形是否需要圓角，要根據(jù)產(chǎn)品風(fēng)格靈活選擇，確保與當(dāng)前使用場景相匹配。例如某個(gè)產(chǎn)品的logo或主視覺使用了不同半徑的圓角，在界面中我們也可以使用不同半徑的圓角按鈕，保持風(fēng)格統(tǒng)一。

一旦我們決定了用某種樣式的圓角按鈕，那么界面中的其他按鈕也應(yīng)該保持一致。

五、填充

填充是指對對象內(nèi)容的操作，填充的可以是一種顏色，也可以是一張圖片。

針對不同對象，我們需要差異化定義每個(gè)對象的填充效果，保證這些對象簡單易懂，清晰可見。

在設(shè)計(jì)過程中，可以對同一個(gè)對象組合使用多種填充效果。例如一個(gè)正方形頭像，首先填充一張照片，在照片的基礎(chǔ)上再添加各種顏色效果，能讓頭像的設(shè)計(jì)與界面更匹配。

六、描邊

如果說填充強(qiáng)調(diào)對象內(nèi)部，那么描邊就是對對象外部邊框的操作。

描邊分為內(nèi)部邊框、居中邊框和外部邊框三種樣式，其中只有內(nèi)部邊框不會(huì)在視覺上使對象變大。

例如下圖是一個(gè)60px大小的正方形，有2px的描邊。從左起分別是內(nèi)邊框、居中邊框、外邊框的描邊效果。因?yàn)閮?nèi)邊框是在正方形內(nèi)部描邊，所以視覺上看這個(gè)正方形仍是60px大小。

居中邊框是指正方形的外部和內(nèi)部各占1px，那么采用居中邊框的正方形尺寸變成了62×62。

同理，外部邊框是指正方形的外部多了2px，采用外部邊框的正方形尺寸變成了64×64。

對于不同的對象，我們可以設(shè)定不同寬度的描邊，描邊的樣式可以是虛線、實(shí)線、純色、漸變色等多種樣式。

目前大多數(shù)設(shè)計(jì)軟件支持修改描邊的端點(diǎn)和節(jié)點(diǎn)。端點(diǎn)樣式包括方頭、平頭和圓頭，節(jié)點(diǎn)樣式包括斜接連接、圓角連接、斜角連接。

七、陰影

陰影是UI設(shè)計(jì)中最常用的效果，根據(jù)對象的X軸、Y軸的偏移程度、模糊程度、擴(kuò)展程度、顏色和不透明度等屬性構(gòu)成。

通過設(shè)置模糊能讓陰影的面積擴(kuò)散擴(kuò)得更大，顏色由深變淺。一般來說陰影的不透明度低于40%時(shí)，呈現(xiàn)的效果比較好。

當(dāng)陰影的擴(kuò)展程度為負(fù)數(shù)時(shí)，陰影看起來會(huì)更自然。對比上下兩個(gè)圖例也能看出來，擴(kuò)展程度為負(fù)時(shí)陰影看起來更柔和。

使用陰影有助于劃分界面的層次結(jié)構(gòu)！在設(shè)計(jì)中，讓陰影看起來自然柔和不生硬是界面美觀與否的關(guān)鍵因素之一。

首先要避免純黑色陰影，純黑對比太強(qiáng)會(huì)影響視覺效果，建議使用基礎(chǔ)色調(diào)派生的顏色作為陰影顏色。

例如基礎(chǔ)色是綠色，可以使用飽和度、亮度較低的深綠色作為陰影顏色。陰影顏色確定后，再給陰影足夠大的模糊數(shù)值，最終會(huì)得到了一個(gè)不錯(cuò)的陰影效果。

顏色太深、太生硬的陰影和按鈕顏色對比太大，設(shè)計(jì)時(shí)應(yīng)盡可能調(diào)整陰影的顏色、透明度等參數(shù)，避免生成這種效果；把黑色陰影調(diào)整成同色系的深色陰影，陰影的效果看起來就會(huì)更自然、更柔和；再把陰影的擴(kuò)展程度調(diào)成負(fù)數(shù)，就能消除陰影的外展，讓陰影看起來更真實(shí)。

內(nèi)陰影

內(nèi)陰影在UI設(shè)計(jì)中相對少見，內(nèi)陰影和上面所講的陰影有相同的參數(shù)設(shè)置，只不過內(nèi)陰影是在圖形內(nèi)部起效果。

內(nèi)陰影無法像外陰影那樣展現(xiàn)圖層之間的深度和層級關(guān)系，只對圖形內(nèi)部起作用。如果內(nèi)陰影使用太多，可能會(huì)混淆圖層間的層級關(guān)系，讓界面關(guān)系看起來不明確。

八、模糊

1. 高斯模糊

高斯模糊是最常用的設(shè)計(jì)效果，呈現(xiàn)出從中心向四周均勻擴(kuò)散的模糊效果。高斯模糊由半徑控制，半徑數(shù)值越大，模糊效果越明顯。

高斯模糊常用在界面之間的過渡或者用來模糊背景突出景深效果。

高斯模糊還可以作為陰影效果，放在對象下面使用。例如新建一個(gè)橢圓做成模糊效果，放在對象下面，就能快速呈現(xiàn)出一個(gè)帶有陰影的效果。

2. 背景模糊

蘋果在操作系統(tǒng)中經(jīng)常使用背景模糊，呈現(xiàn)出背景很模糊的玻璃效果。

背景模糊主要針對圖層覆蓋的內(nèi)容起作用，比如新建一個(gè)矩形調(diào)整透明度，做成背景模糊效果，那么該圖層覆蓋的區(qū)域會(huì)變模糊，圖層沒有覆蓋的區(qū)域保持不變。

3. 動(dòng)感模糊

動(dòng)感模糊由模糊數(shù)值和角度兩個(gè)參數(shù)控制，用來模擬對象在不同角度上的移動(dòng)效果。

4. 縮放模糊

當(dāng)對象由內(nèi)到外變得模糊時(shí)，就會(huì)發(fā)生縮放模糊。這種模糊效果在界面設(shè)計(jì)中用得較少。

縮放模糊由模糊數(shù)值和原點(diǎn)兩個(gè)參數(shù)控制。在縮放模糊中可以隨機(jī)設(shè)置模糊原點(diǎn)，通過移動(dòng)原點(diǎn)獲得一些有趣的圖形效果。

最后

以上是界面設(shè)計(jì)進(jìn)階過程中需要搞懂的基本設(shè)計(jì)要素，希望通過本次系統(tǒng)性的講解，能更進(jìn)一步提升設(shè)計(jì)精細(xì)度！

如果你想設(shè)計(jì)出卓越，高效和流暢的用戶界面，就請參考Ben Shneiderman的“界面設(shè)計(jì)的八大黃金法則” 。蘋果，谷歌和微軟設(shè)計(jì)的產(chǎn)品都反映了Shneiderman的法則，這些行業(yè)巨頭制定的用戶界面指南都包含Shneiderman黃金法則中的特征，而這些公司的熱門界面設(shè)計(jì)則是法則的視覺體現(xiàn)。本文將告訴你如何整合8大黃金法則來改進(jìn)你的工作。

界面設(shè)計(jì)的八大黃金法則

Ben Shneiderman（生于1947年8月21日）是美國馬里蘭大學(xué)人機(jī)交互實(shí)驗(yàn)室的計(jì)算機(jī)科學(xué)家和教授。他的工作可以媲美Don Norman和Jakob Nielsen。Shneiderman在其熱門書“設(shè)計(jì)用戶界面：有效的人機(jī)交互策略（Designing the User Interface: Strategies for Effective Human-Computer Interaction）”中介紹了界面設(shè)計(jì)的八個(gè)黃金法則：

一致性

當(dāng)你在設(shè)計(jì)類似的功能和操作時(shí)，可以利用熟悉的圖標(biāo)，顏色，菜單的層次結(jié)構(gòu)，行為召喚，用戶流程圖來實(shí)現(xiàn)一致性。規(guī)范信息表現(xiàn)的方式可以減少用戶認(rèn)知負(fù)擔(dān)，用戶體驗(yàn)易懂流暢。一致性通過幫助用戶快速熟悉產(chǎn)品的數(shù)字化環(huán)境從而更輕松地實(shí)現(xiàn)其目標(biāo)。

常用用戶使用快捷操作

隨著使用次數(shù)的增加，用戶需要有更快的完成任務(wù)的方法。例如，Windows和Mac為用戶提供了用于復(fù)制和粘貼的鍵盤快捷方式，隨著用戶更有經(jīng)驗(yàn)，他們可以更快速，輕松地瀏覽和操作用戶界面。

提供有用信息的反饋

用戶每完成一個(gè)操作，需要系統(tǒng)給出反饋，然后用戶才能感知并進(jìn)入下一步操作。反饋有很多類型，例如聲音提示，觸摸感，語言提示，以及各種類型的組合。對于用戶的每一個(gè)動(dòng)作，應(yīng)該在合理的時(shí)間內(nèi)提供適當(dāng)?shù)?，人性化的反饋。如設(shè)計(jì)多頁問卷時(shí)應(yīng)該告訴用戶進(jìn)行到哪個(gè)步驟，要保證讓用戶在盡量少受干擾的情況下得到最有價(jià)值的信息。

作者/版權(quán)持有人：Google，Inc.    版權(quán)條款和許可：合理使用

Windows Media Player設(shè)計(jì)師應(yīng)該牢記Ben Shneiderman的第三個(gè)黃金法則：提供有用信息的反饋。體驗(yàn)不佳的錯(cuò)誤消息通常會(huì)只顯示錯(cuò)誤代碼，對用戶來說這毫無意義。作為一名好的設(shè)計(jì)師，你應(yīng)該始終給用戶以可讀和有意義的反饋。

設(shè)計(jì)流程需要設(shè)計(jì)一個(gè)完結(jié)

不要讓你的用戶猜來猜去，告訴他們其操作會(huì)引導(dǎo)他們到哪個(gè)步驟。例如，用戶在完成在線購買后看到“謝謝購買”消息提示和支付憑證后會(huì)感到滿足和安心。

提供簡潔的錯(cuò)誤操作的解決方案

用戶不喜歡被告知其操作錯(cuò)誤。設(shè)計(jì)時(shí)應(yīng)該盡量考慮如何減少用戶犯錯(cuò)誤的機(jī)會(huì)，但如果用戶操作時(shí)發(fā)生不可避免的錯(cuò)誤，不能只報(bào)錯(cuò)而不提供解決方案，請確保為用戶提供簡單，直觀的分步說明，以引導(dǎo)他們輕松快速地解決問題。例如，用戶在填寫在線表單時(shí)忘記填寫某個(gè)輸入框時(shí)，可以標(biāo)記這個(gè)輸入框以提醒用戶。

允許撤銷操作

設(shè)計(jì)人員應(yīng)為用戶提供明顯的方式來讓用戶恢復(fù)之前的操作，無論是單次動(dòng)作，數(shù)據(jù)輸入還是整個(gè)動(dòng)作序列后都應(yīng)允許進(jìn)行返回操作，正如Shneiderman在他的書中所說：

“這個(gè)功能減輕了焦慮，因?yàn)橛脩糁兰幢悴僮魇д`，之前的操作也可以被撤銷，鼓勵(lì)用戶去大膽放手探索。”

給用戶掌控感

設(shè)計(jì)時(shí)應(yīng)考慮如何讓用戶主動(dòng)去使用，而不是被動(dòng)接受，要讓用戶感覺他們對數(shù)字空間中一系列操作了如指掌，在設(shè)計(jì)時(shí)按照他們預(yù)期的方式來獲得他們的信任。

減少短時(shí)記憶負(fù)擔(dān) 

人的記憶力是有限的，我們的短時(shí)記憶每次最多只能記住五個(gè)東西。因此，界面設(shè)計(jì)應(yīng)當(dāng)盡可能簡潔，保持適當(dāng)?shù)男畔哟谓Y(jié)構(gòu)，讓用戶去再認(rèn)信息而不是去回憶。再認(rèn)信息總是比回憶更容易，因?yàn)樵僬J(rèn)通過感知線索讓相關(guān)信息重現(xiàn)。例如，我們經(jīng)常發(fā)現(xiàn)選擇題比簡答題更容易，因?yàn)檫x擇題只需要我們對正確答案再認(rèn)，而不是從我們的記憶中提取。被彭博商業(yè)周刊稱為“世界上最具影響力的設(shè)計(jì)師之一”的Jakob Nielsen發(fā)明了幾種可用性研究方法，包括啟發(fā)式評估。信息再認(rèn)而非回憶就是Nielsen界面設(shè)計(jì)10種可用性啟發(fā)式原則之一。

了解蘋果的設(shè)計(jì)如何整合Shneiderman的8大黃金法則

蘋果整合Shneiderman的八項(xiàng)黃金法設(shè)計(jì)出成功的產(chǎn)品，他們從Mac到移動(dòng)設(shè)備設(shè)計(jì)都取得了巨大的成功，他們以產(chǎn)品設(shè)計(jì)的一致性，直觀而美麗為榮。蘋果的iOS人機(jī)界面指南也告訴我們他們的設(shè)計(jì)團(tuán)隊(duì)如何應(yīng)用Shneiderman的設(shè)計(jì)原則。

1. 一致性

“一致性”和“感知的穩(wěn)定性”在Mac OS的設(shè)計(jì)中體現(xiàn)得淋漓盡致。不管是80年代的版本，還是現(xiàn)在的版本，Mac OS菜單欄設(shè)計(jì)都包含一致的圖形元素。

作者/版權(quán)持有人：StockSnap.io    版權(quán)條款和許可：CC0

作者/版權(quán)持有人：StockSnap.io    版權(quán)條款和許可證：CC0

隨著時(shí)間的推移，Mac OS的外觀有很大變化，Mac OS菜單欄設(shè)計(jì)都保持一致。

2. 快捷操作

如前所述，Mac允許用戶使用各種鍵盤快捷鍵，使用頻率高的包括復(fù)制和粘貼（Command-X和Command-V）以及截圖（Command-Shift-3）。

作者/版權(quán)持有人：StockSnap.io    版權(quán)條款和許可證：CC0

Mac允許用戶鍵盤快捷方式操作實(shí)現(xiàn)通常需要鼠標(biāo)、觸控板或其他輸入設(shè)備才能完成的操作。

3. 有用信息反饋

當(dāng)用戶點(diǎn)擊Mac桌面上的文件時(shí)，該文件會(huì)“突出顯示”，這是視覺反饋的一個(gè)很好的示例。另外，當(dāng)用戶拖動(dòng)桌面上的文件夾時(shí)，他們可以看到在按住鼠標(biāo)時(shí)，文件夾顯示被移動(dòng)的狀態(tài)。

作者/版權(quán)持有人：Euphemia Wong    版權(quán)條款和許可：合理使用

作者/版權(quán)持有人：Euphemia Wong    版權(quán)條款和許可：合理使用

4.  操作流程的設(shè)計(jì)

當(dāng)用戶將軟件安裝到Mac OS時(shí)，提示信息的屏幕顯示用戶當(dāng)前的安裝步驟。

作者/版權(quán)持有人：Google，Inc.    版權(quán)條款和許可：合理使用

5.  錯(cuò)誤操作的解決方案

在軟件安裝過程中，如果發(fā)生錯(cuò)誤，用戶將收到友好的提示信息。提供復(fù)雜的解決方案，或用戶難以理解的解決方案，或只報(bào)錯(cuò)不提供解決方案，都是極大影響用戶體驗(yàn)，使用戶沮喪的關(guān)鍵原因。根據(jù)錯(cuò)誤操作的嚴(yán)重程度，區(qū)分何時(shí)使用小的，不會(huì)影響用戶操作的提醒，以及何時(shí)使用大的，侵入式提醒。但當(dāng)錯(cuò)誤操作發(fā)生時(shí)，請謹(jǐn)慎選擇正確的語氣和正確的語言提醒用戶操作錯(cuò)誤。

作者/版權(quán)持有人：Google，Inc.    版權(quán)條款和許可：合理使用

Mac OS通過顯示一個(gè)溫和的提示消息向用戶解釋出現(xiàn)了什么錯(cuò)誤操作及其原因。另外，解釋這是由于自己的安全偏好選擇，進(jìn)一步向用戶保證，告訴他們一切在掌控范圍內(nèi)。

作者/版權(quán)持有人：Manutencaonet Blogspot     版權(quán)條款和許可：CC BY 3.0

Windows系統(tǒng)中這個(gè)非常不友好的提示信息使用“fatal（后果嚴(yán)重的）”和“terminated（被終止）”字樣。這樣的負(fù)面的，不友好的言語肯定會(huì)嚇倒大多數(shù)用戶！

6. 允許撤銷操作

當(dāng)用戶在安裝過程中提供信息時(shí)發(fā)生錯(cuò)誤，允許他們重新回到上一步，而不必重新開始。

作者/版權(quán)持有人：Euphemia Wong    版權(quán)條款和許可：合理使用

7. 給用戶掌控感

讓用戶有權(quán)選擇是繼續(xù)運(yùn)行程序還是退出程序，Mac的活動(dòng)監(jiān)視器允許用戶在程序意外崩潰時(shí)“強(qiáng)制退出”。

作者/版權(quán)持有人：Euphemia Wong    版權(quán)條款和許可：合理使用

8. 減少短時(shí)記憶負(fù)荷

由于人類短時(shí)記憶每次只能記住5個(gè)東西，所以蘋果iPhone屏幕底部的主菜單區(qū)域中只能放置4個(gè)及以下的應(yīng)用程序圖標(biāo)，這個(gè)設(shè)計(jì)不僅涉及對記憶負(fù)荷的考慮，還考慮了不同版本一致性問題。

作者/版權(quán)持有人：Brian Voo    版權(quán)條款和許可：合理使用

工作表：如何將Shneiderman的8項(xiàng)黃金法則應(yīng)用于你的界面設(shè)計(jì)

作為設(shè)計(jì)師，你的工作是創(chuàng)建直觀，精美和流暢的用戶界面設(shè)計(jì)，讓用戶感到輕松和滿意。下面這個(gè)工作表可以幫你把上述這些規(guī)則應(yīng)用于你的設(shè)計(jì)中。

譯者：oftodesign

原文作者：Euphemia Wong（The Interaction Design Foundation用戶體驗(yàn)研究員，設(shè)計(jì)師）

本文由 @oftodesign 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan

編輯導(dǎo)語：前幾篇文章中，我們已經(jīng)了解到了許多關(guān)于界面設(shè)計(jì)的相關(guān)知識(shí)。今天這篇文章讓我們回歸一下界面設(shè)計(jì)本身，談一談其設(shè)計(jì)原則與標(biāo)準(zhǔn)，希望對你有幫助。

前面介紹了5種基本的界面形式，如果從構(gòu)成界面的要素（構(gòu)件）層面看，實(shí)際上所有的界面都是一樣的，因?yàn)樗鼈兌际怯赏瑯拥目丶?gòu)成的，只是控件的位置不同而已。

因此就有必要對界面的布置進(jìn)行統(tǒng)一的標(biāo)準(zhǔn)化，建立了界面布置的標(biāo)準(zhǔn)后設(shè)計(jì)效率會(huì)提升、同時(shí)也為界面設(shè)計(jì)資料的復(fù)用奠定了基礎(chǔ)。

界面設(shè)計(jì)的標(biāo)準(zhǔn)化非常重要，因?yàn)榻缑媸怯脩粽J(rèn)知系統(tǒng)的窗口，這個(gè)標(biāo)準(zhǔn)實(shí)際上是構(gòu)建“人-機(jī)-人”工作環(huán)境的標(biāo)準(zhǔn)之一，標(biāo)準(zhǔn)化的界面形式也可以減少用戶的認(rèn)知負(fù)擔(dān)和培訓(xùn)成本。

這里給出一些界面設(shè)計(jì)上的基本原則和標(biāo)準(zhǔn)供作參考，按照從整體到局部的順序，重點(diǎn)提出以下的幾個(gè)界面設(shè)計(jì)時(shí)的原則與標(biāo)準(zhǔn)（不限于此）：

• 界面布局對原則
• 子窗體設(shè)置的原則
• 字段控件的標(biāo)準(zhǔn)
• 美工設(shè)計(jì)的原則

這些原則/標(biāo)準(zhǔn)根據(jù)界面的使用場景不同、設(shè)計(jì)師的設(shè)計(jì)理念的不同等都會(huì)有所不同，需要根據(jù)具體情況具體分析設(shè)計(jì)，這些原則和標(biāo)準(zhǔn)僅供參考。

一、界面布局的原則

1. 整體布局

界面的布局是用戶理解業(yè)務(wù)功能的重要手段，布局一定要以“業(yè)務(wù)導(dǎo)向”，布局的規(guī)范化、規(guī)律化可以培養(yǎng)用戶逐漸地走向“無師自通”的方向，如：

1. 同類界面的布局要統(tǒng)一，卡式、主細(xì)表、樹形等同樣格式要風(fēng)格一致；
2. 重要信息放在界面的核心位置，如：左上方位置，次要信息放在其它位置。關(guān)于界面重要信息的擺放位置請參看前面的博文；
3. 界面上近似內(nèi)容要放在相近處，如：加框以示區(qū)別、或拉大與其它內(nèi)容區(qū)域的距離；
4. 重視用戶界面友好性，易于操作、易于查看，比如：常用按鈕在鼠標(biāo)移動(dòng)最短的地方配置。工具欄的左端配置界面操作開始的功能按鈕、右端配置界面操作結(jié)束功能按鈕等；
5. 界面橫向一次的顯示信息量（標(biāo)題個(gè)數(shù)）多少，要以完成一次操作不用或是少用橫向滾動(dòng)條為標(biāo)準(zhǔn)（縱向滾動(dòng)條不限），因?yàn)轭l繁使用橫向滾動(dòng)條會(huì)使得用戶看到了左端的信息看就不到右端、造成看了右端又忘了左端信息的現(xiàn)象。

圖1 布局原則

如圖1所示，細(xì)表區(qū)的標(biāo)題設(shè)置過多（A～J），致使大約有40%的信息在處在窗口外，用戶不使用橫向滾動(dòng)條就看不到。

如果這是一個(gè)頻繁操作的動(dòng)作，那么工作效率就會(huì)低下，這就是所謂的應(yīng)用體驗(yàn)設(shè)計(jì)的不好，這種設(shè)計(jì)會(huì)極大地造成用戶滿意度的下降。解決的方法可以考慮采用分頁表達(dá)的形式。

注：對具有自適應(yīng)功能的界面也存在同樣的原則，由于列數(shù)過多界面自適應(yīng)后的字體太小看不清楚，為了看清楚必須要放大字體，結(jié)果還是要頻繁地使用橫向滾動(dòng)條，所以適當(dāng)減少列數(shù)是最有效的解決方法。

2. 局部尺寸

要約定好界面上基本的控件距離、尺寸，參見圖2，比如：

• 窗口與控件之間的距離；
• 控件之間的間距，包括縱向的行間距、橫向的字段框間距等；
• 控件的高度；
• 使用文字的字號(hào)大小等。

圖2 界面設(shè)計(jì)標(biāo)準(zhǔn)的制定

二、子窗體設(shè)置原則

以組件的主界面為第一層界面，子窗體的層數(shù)最好控制在3層以內(nèi)，也就是連續(xù)打開三個(gè)界面為限，參見圖3：

• 從菜單第一次打開的為主界面（父）
• 從主界面打開的第二層為子界面（子）
• 從子界面打開的第三層為子界面的子界面（孫）等

圖3 子窗體的層數(shù)示意圖

如果內(nèi)容實(shí)在是比較多，最終彈出的子窗體要超過3層時(shí)，可以考慮另外再設(shè)置一個(gè)組件來分擔(dān)處理的內(nèi)容，不然子界面彈出過多，就會(huì)造成界面的混亂，會(huì)降低用戶的操作效率。

三、字段控件的標(biāo)準(zhǔn)

字段控件的表達(dá)格式根據(jù)內(nèi)容不同而不同，字段控件由兩個(gè)部分構(gòu)成：標(biāo)題欄和輸入框，參見圖4：

圖4 字段控件的長度與數(shù)據(jù)位置

1. 標(biāo)題欄的長度

標(biāo)題的字?jǐn)?shù)不要太多，因?yàn)闃?biāo)題長到如同一句話時(shí)就不容易記憶了，最佳字?jǐn)?shù)在2～6個(gè)字之間（易于記憶與稱呼的長度）；另外標(biāo)題中的文字位置可以參考：有背景框時(shí)居中，沒有時(shí)居左或居右，圖4中的標(biāo)題欄有背景色，所以采用了文字居中的形式。

注：這里的”標(biāo)題欄名稱“指的是”字段名稱“，不是4個(gè)業(yè)務(wù)功能中的”表單名稱“，后者可以按照實(shí)際的名稱寫，多少字都可以，不必要設(shè)置字?jǐn)?shù)。

2. 輸入框的長度

輸入框的字段長度是不一定的，建議輸入框的長度與字?jǐn)?shù)相匹配不必統(tǒng)一，如圖4（a）的式樣，因?yàn)槿绻y(tǒng)一長度就一定會(huì)以字?jǐn)?shù)最多的字段為準(zhǔn)，那么字?jǐn)?shù)少的字段也用長輸入框就不容易讀取，而且輸入框的長度一樣時(shí)字段之間的辨識(shí)度就會(huì)降低，尋找某個(gè)字段的時(shí)間會(huì)增加。

比如：圖4（b）樣式的“工程月數(shù)”字段只有2個(gè)單位的長度，如果采用和具有30個(gè)單位長度的“項(xiàng)目名稱”一樣長的輸入框時(shí)，則“工程月數(shù)”就會(huì)因?yàn)闃?biāo)題與數(shù)據(jù)的距離太遠(yuǎn)而不容易讀?。床粶?zhǔn)）。

相比較而言，圖4（a）樣式中的“座機(jī)號(hào)碼”、“郵政編號(hào)”、”工程月數(shù)“的輸入框長度比較短，就比較容易尋找和識(shí)別。

3. 數(shù)據(jù)的位置

輸入框內(nèi)數(shù)據(jù)的位置，根據(jù)內(nèi)容不同而不同，參見圖4（a）：

• ①文字型數(shù)據(jù)：靠框的左端布置，如：名稱、說明文；
• ②③數(shù)值型數(shù)據(jù)（長度固定）：居中布置，由于編號(hào)類數(shù)據(jù)長度是一定的，所以居中容易讀取，如：電話號(hào)碼，郵政編號(hào)、材料編號(hào)，這樣做也容易與“文字類”和“數(shù)值類”數(shù)據(jù)進(jìn)行區(qū)分；
• ④⑤數(shù)值型數(shù)據(jù)（長度非標(biāo)）：靠框的右端布置，如：金額、數(shù)量、長度。

四、顏色與裝飾的原則

這里介紹的界面設(shè)計(jì)中雖然不涉及到美工的內(nèi)容，但是也希望作為設(shè)計(jì)師具有一些美學(xué)的意識(shí)，因?yàn)樽罱K用戶的滿意度是個(gè)綜合的指標(biāo)，這個(gè)指標(biāo)至少包括了下述內(nèi)容：

• 業(yè)務(wù)正確：來自于業(yè)務(wù)設(shè)計(jì)（需求分析、架構(gòu)、功能、數(shù)據(jù)等）的成果，信息的分區(qū)等；
• 易操作性：來自于功能應(yīng)用設(shè)計(jì)的成果（界面、控件），推送機(jī)制等；
• 性能良好：來自于技術(shù)開發(fā)測試等的成果；
• 美觀易讀：來自于UI、美工設(shè)計(jì)等。

因?yàn)槠髽I(yè)管理系統(tǒng)不是宣傳用的網(wǎng)站、電商平臺(tái)，界面風(fēng)格要具有以下的特點(diǎn)（僅供參考）：

• 界面的整體要做到簡潔、明了，界面上的各種要素（控件）的擺放位置、顏色、是否使用3D形式都要思考，輔助的功能不要喧賓奪主；
• 使用淡雅的色彩作為基調(diào)原色，不要大面積地使用原色，容易造成眼睛的疲勞；
• 要給用戶以安靜的感受，不要用有炫酷和跳躍感的要素去分散用戶的注意力（電商平臺(tái)的界面希望不斷地帶給用戶新的發(fā)現(xiàn)、驚喜）。

五、小結(jié)

隨著計(jì)算機(jī)技術(shù)的發(fā)展，計(jì)算機(jī)的使用領(lǐng)域和用途越來越廣泛，界面風(fēng)格也隨之更加多樣化。

比如：互聯(lián)網(wǎng)風(fēng)格頁面、物聯(lián)網(wǎng)的界面，硬件技術(shù)的進(jìn)步也影響界面風(fēng)格的變化；比如：智能手機(jī)端、平板電腦端等，它們的設(shè)計(jì)內(nèi)容、風(fēng)格都有所不同，但是上述的基本理念、原則等還是適用的。

本文由 @李鴻君 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議

蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan

在當(dāng)今設(shè)計(jì)行業(yè)，設(shè)計(jì)師不僅需要具備專業(yè)技能，更要與業(yè)務(wù)目標(biāo)緊密結(jié)合，以提升設(shè)計(jì)的實(shí)際效用。本文探討了如何通過設(shè)計(jì)洞見來識(shí)別客戶需求，進(jìn)而優(yōu)化設(shè)計(jì)過程。

好的設(shè)計(jì)師不僅僅要有專業(yè)能力，更重要的是與產(chǎn)品達(dá)到同頻，最終更好賦能業(yè)務(wù)指標(biāo)達(dá)成。

目前設(shè)計(jì)行業(yè)的現(xiàn)狀，大部分設(shè)計(jì)師還停留在設(shè)計(jì)思維的角度，存在一些和業(yè)務(wù)格格不入的情況，只關(guān)注好不好看，做一個(gè)交互原型的美化者…

自己做了很多，但是與實(shí)際脫節(jié)。出了很多個(gè)方案，產(chǎn)品（或運(yùn)營/商務(wù)伙伴）覺得沒什么變化；打磨了很多細(xì)節(jié)和創(chuàng)新點(diǎn)，產(chǎn)品卻只想快速上線……

設(shè)計(jì)師自己的工作被各種“非專業(yè)”的指導(dǎo)意見干擾；而其他職崗伙伴眼里，我們的付出，卻變成了一種“設(shè)計(jì)師的自High”。

究其原因，還是把以用戶思維去進(jìn)行設(shè)計(jì)。

想要改變這樣的狀態(tài)，最核心的是思維轉(zhuǎn)變，從技能導(dǎo)向的思考方式變?yōu)閮r(jià)值導(dǎo)向的思考方式。

本文主要從講述，如何通過方法，在項(xiàng)目進(jìn)入期獲得有效設(shè)計(jì)洞見，提高設(shè)計(jì)效用，帶來客戶價(jià)值（用戶價(jià)值）。

一、什么是設(shè)計(jì)洞見？

先舉一個(gè)例子：如何做一個(gè)新款剃須刀產(chǎn)品？

飛利浦這些大公司，給出的答案是 更好的刀頭，更貼合面部，更安全和更容易清洗，一個(gè)黑灰塑料材質(zhì)、工業(yè)風(fēng)格的“更好用”的剃須刀確實(shí)誕生了。

但是有一個(gè)很有意思的公司，給出了另一份答案：極簡造型、合金材質(zhì)、超 mini 尺寸和豐富配色，最重要的是：

于是 2019 年，這個(gè)疫情開始的時(shí)間，這家剃須刀橫空出世。

這款產(chǎn)品獲得成功的原因，本質(zhì)上就是產(chǎn)品的設(shè)計(jì)者帶著更高、更廣的視角，洞見了“剃須刀不僅是一個(gè)工具，它更可以成為一種禮物”這個(gè)更深層次的客戶需求，打破現(xiàn)有市場概念，獲得成功。

 

——如果說，設(shè)計(jì)洞察是發(fā)現(xiàn)和理解問題的能力，是設(shè)計(jì)師在研究和解決問題時(shí)所產(chǎn)生的觀察力和創(chuàng)造力。那么設(shè)計(jì)洞見可以幫助設(shè)計(jì)師更好地識(shí)別問題、提出創(chuàng)新解決方案，并為設(shè)計(jì)師提供思考問題和做出決策的指導(dǎo)。

Brown.Tim在《設(shè)計(jì)思考改造世界》中說：”未來的設(shè)計(jì)師將扮演科技的詮釋者（洞見能力）,人性的引領(lǐng)者（觀察能力）,感性的創(chuàng)造者與品位的營造者（同理心）的角色”。

通過設(shè)計(jì)洞見，可以讓我們看更高、想更全， 與業(yè)務(wù)貼合更緊密，讓設(shè)計(jì)得到認(rèn)可，產(chǎn)生業(yè)務(wù)共鳴，賦予用戶/客戶價(jià)值，才能讓設(shè)計(jì)變的更有價(jià)值。

二、如何獲得設(shè)計(jì)洞見？

接下來我們將通過一一探索獲得洞見的三個(gè)階段。

第一階段：設(shè)計(jì)洞察

洞察階段的核心，是獲得現(xiàn)象背后的動(dòng)因。是一個(gè)獲得信息與問題的階段

產(chǎn)品的設(shè)計(jì)產(chǎn)出是一個(gè)抽象到具象化的過程，在設(shè)計(jì)和迭代的過程中，會(huì)經(jīng)歷非常多的流程。而大多數(shù)的設(shè)計(jì)洞見有效過去在更前置的節(jié)點(diǎn)，才能產(chǎn)生更有效的價(jià)值。

所以我們首先做的是：“提升設(shè)計(jì)的主動(dòng)性”，在項(xiàng)目的進(jìn)入期最大化實(shí)現(xiàn)設(shè)計(jì)洞見的價(jià)值。

項(xiàng)目進(jìn)入期通常會(huì)有一個(gè)通病，即問題泛化，無法具象。在一個(gè)比較“泛”的問題下，挖掘目的/目標(biāo)，找到問題最簡單的辦法就是“調(diào)查分析”：了解行業(yè)生態(tài)與業(yè)務(wù)背景，確定或推測自身產(chǎn)品的發(fā)展方向，分析定位與關(guān)注指向-Pointer（即當(dāng)下會(huì)產(chǎn)生哪些具有指向性的任務(wù)方向）。

這個(gè)階段，我們的主要目的是通過最初始的源頭數(shù)據(jù)，正確的了解業(yè)務(wù)或者項(xiàng)目的背景，避免因信息傳遞所產(chǎn)生的認(rèn)知誤差，以免發(fā)生“指向”偏差。而要做到這一點(diǎn)，洞察就不能僅僅停留在表面的觀察，詢問，記錄和數(shù)據(jù)分析，而要隨時(shí)通過聯(lián)想和反思來回歸本質(zhì)——客戶（用戶）和場景。調(diào)查中獲得的數(shù)據(jù)只有放在合適的情境中才能獲得準(zhǔn)確的解讀。

1）知識(shí)準(zhǔn)備

了解各種市場調(diào)研的方法與過程，對調(diào)研方法進(jìn)行分類。

如下圖所示，（戴力農(nóng)《設(shè)計(jì)調(diào)研》）橫軸區(qū)分了該方法得到的數(shù)據(jù)是客觀的（人們的行為）還是主觀的（人們的目標(biāo)和觀點(diǎn)），縱軸區(qū)分了該方法的類型是定性的還是定量的。

2）選擇正確的調(diào)研辦法

不同的產(chǎn)品生命周期，對應(yīng)不同的調(diào)研方法，根據(jù)產(chǎn)品的不同時(shí)期選擇合適屬性的調(diào)研辦法。

互聯(lián)網(wǎng)設(shè)計(jì)師的常規(guī)調(diào)研手法，受困于資源，多是在桌面進(jìn)行。我們通過二手資料研究、競品和線上走查獲得問題，進(jìn)行虛擬對象的研究，極易發(fā)生偏差。

拓新場景和成長初期，通常資源緊張且缺乏具象客戶，很難進(jìn)行大樣本調(diào)研數(shù)據(jù)挖掘。對于設(shè)計(jì)師來說，在了解業(yè)務(wù)信息，對稱業(yè)務(wù)方向時(shí)可以依賴其他職崗提供的資料進(jìn)行研究；但是對于設(shè)計(jì)息息相關(guān)的關(guān)鍵點(diǎn)，建議還是通過自己實(shí)地考察、焦點(diǎn)實(shí)驗(yàn)去獲取真實(shí)的體驗(yàn)信息。

成長后期與成熟期，關(guān)鍵在于保證和提高產(chǎn)品質(zhì)量，縮短與頭部產(chǎn)品之間的差距，實(shí)現(xiàn)產(chǎn)品的高增長 。大樣本的用戶與競品調(diào)研可以幫助我們更可觀的看到真實(shí)的客戶需求。再輸入到我們的日常桌面研究中去。

3）掌握信息收集、數(shù)據(jù)統(tǒng)計(jì)分析方面的知識(shí)

4）了解調(diào)研的流程

確定調(diào)研目標(biāo) → 制定調(diào)研計(jì)劃 → 準(zhǔn)備調(diào)研材料&環(huán)境 → 邀請調(diào)研對象&執(zhí)行調(diào)研過程 → 分析整理信息與數(shù)據(jù) → 輸出調(diào)研結(jié)果。

調(diào)研的實(shí)際操作流程在數(shù)據(jù)采集和調(diào)研分析方法中已經(jīng)涉及的比較多了，也有很多好的執(zhí)行案例可供我們學(xué)習(xí)與參考。

得到大量信息，進(jìn)行吸收、理解和處理后，我們將收獲大量的問題。接下來就是如何解決問題。

第二階段：定位價(jià)值

定位價(jià)值是洞見的關(guān)鍵階段，是能給業(yè)務(wù)帶來價(jià)值的核心，是可以改變客戶（用戶）習(xí)慣和行為的關(guān)鍵博弈。

那么如何定位價(jià)值呢？

1）問題整合，提煉與確認(rèn)指向

將調(diào)研獲得的問題進(jìn)行歸納與整理，如簡單的 Card Sorting ，確認(rèn)所有問題的核心指向（Pointer）。

接下來就需要不停的切換指向，并深入每個(gè)關(guān)鍵 key 下進(jìn)一步拆解，確定你收獲的是否是一個(gè)真正且重要的 Pointer。

EG海底撈▽

餐廳高峰期經(jīng)常人滿為患，排隊(duì)體驗(yàn)差。常規(guī)餐廳的做法：約束更快的出餐、收臺(tái)，拆分更多的餐位，引導(dǎo)拼桌服務(wù)等等等等..短期可能會(huì)帶來改變，但是達(dá)到一個(gè)極限點(diǎn)以后，就很難再提升了。

類似的場景還有曾經(jīng)的外賣小哥：30 分鐘以內(nèi)還能更快嗎？答案是：很難。

那怎么讓客人愿意多等待一點(diǎn)，或者不覺得“等待完全是無價(jià)值無意義的”？

海底撈選擇在你排隊(duì)等待的時(shí)候，提供免費(fèi)美甲、護(hù)手、零食等等各種周到服務(wù)，讓客人等待的過程中不至于無事可做。獲得了認(rèn)可，贏得了口碑。

如果你留心觀察，你會(huì)發(fā)現(xiàn)海底撈的標(biāo)志也是用了一個(gè)打招呼的氣泡Hi，來強(qiáng)調(diào)服務(wù)為先的品牌定位，解決的是情感需求中的「過程體驗(yàn)」。

2）PDS（問題-檢測-研究）調(diào)查分析

PSD 調(diào)查分析的核心思想，是調(diào)查客戶（用戶）與預(yù)期（行為/認(rèn)知）的偏差，或不滿與問題來發(fā)現(xiàn)洞見。

EG BBDO反煙推廣 ▽

BBDO 的英國公司層接到過這樣一個(gè)推廣任務(wù)：是讓年輕人，特別是十幾歲的小女孩兒戒煙。

其實(shí)這個(gè)問題特別棘手。一方面，吸煙是一個(gè)生理上癮的事情，要戒掉很困難；另一方面，吸煙最大的問題是有害健康，但是對于年輕人來說在這個(gè)角度的感觸不深，很難起到效果。用常態(tài)的思考模式似乎很難找到正確的解決方案，但是借助洞見以后就不一樣了。

通過了解更多事實(shí)，看目標(biāo)群體關(guān)注什么，哪些問題對我們要實(shí)現(xiàn)的目標(biāo)有影響。在這個(gè)案例里，BBDO的做法是派了一個(gè)年輕的女助理在購物區(qū)找了一家咖啡館，連著5天坐在那里聽那里的女孩兒在聊些什么。

結(jié)果這5天內(nèi)她就發(fā)現(xiàn)，這些十幾歲的女生大部分聊的是買衣服、做頭發(fā)、選什么樣的指甲油和減肥藥，怎么整容等等。當(dāng)女助理把這些內(nèi)容列在自己的本子上的時(shí)候，洞見就自己呼之欲出了：原來對于這些無所事事，十幾歲的年輕女孩而言，沒有什么比她們看起來漂亮更重要了。

因此，你不需要告訴她吸煙可能縮短壽命，你只要告訴她一件事情：“吸煙會(huì)讓你變得難看”，就足夠讓她戒煙了。

所以，想要獲得洞見，就去調(diào)研目標(biāo)群體真正關(guān)注的事情。當(dāng)你通過調(diào)研發(fā)現(xiàn)真正的問題時(shí)，洞見往往就會(huì)產(chǎn)生。

3）規(guī)避技能導(dǎo)向

設(shè)計(jì)的職崗角色是單薄的。我們一定要帶著指針與方案，多職崗評估價(jià)值與可執(zhí)行度，這是一個(gè)設(shè)計(jì)前期任務(wù)的過程。它的輸出可能為設(shè)計(jì)Demo、簡單的筆記、方案的列表，或者是一個(gè)說明效果的故事版……不一定具備完整的落地性，但是可以讓伙伴更好的理解你的觀點(diǎn)。

第三階段：系統(tǒng)輸出

設(shè)計(jì)的解決方案要從起心動(dòng)念、貫穿至產(chǎn)、研、運(yùn)營甚至上市宣傳的全路徑方案。

在分析階段我們通過“3步走”的視角思維，明確了任務(wù)重點(diǎn)同時(shí)幫助我們明確不同指針的優(yōu)先級。

設(shè)計(jì)師要考慮的維度不僅僅在用戶體驗(yàn)層面，更應(yīng)在執(zhí)行時(shí)候要考慮業(yè)務(wù)的實(shí)際需求，考慮上下游不同職能的工作內(nèi)容，始終保持全局與系統(tǒng)的思維，要從客戶價(jià)值出發(fā)，回落到企業(yè)成本中去。

通過設(shè)計(jì)洞見，從更本質(zhì)的層面去洞悉問題，重新定義和設(shè)計(jì)任務(wù)。

與業(yè)務(wù)產(chǎn)生共鳴才是好的設(shè)計(jì)。

讓你的設(shè)計(jì)方案保持在更高、更廣、更全局的維度。真正融入和助力業(yè)務(wù)，提升設(shè)計(jì)的效用。讓“提升體驗(yàn)”這件事真正落地。

改變我們看世界的方式，亦改變世界看待我們的方式。

如何讓您的產(chǎn)品詳情頁脫穎而出，并顯著提高轉(zhuǎn)化率，是每位產(chǎn)品經(jīng)理和設(shè)計(jì)師都必須面對的重要挑戰(zhàn)。本文深入探討了詳情頁提升轉(zhuǎn)化率的多種技巧和策略，希望可以幫到大家。

最近半年有策劃不少詳情頁，然后就想總結(jié)一些詳情頁相關(guān)的內(nèi)容。

其實(shí)產(chǎn)品詳情頁的設(shè)計(jì)原則只有一個(gè)，那就是迎合目標(biāo)消費(fèi)者的需求。那么一個(gè)好的產(chǎn)品詳情頁都應(yīng)該包含什么內(nèi)容呢？

一、首屏，吸引主視覺

核心目標(biāo)：用視覺+文案快速傳遞產(chǎn)品核心價(jià)值。3秒內(nèi)讓消費(fèi)者“一見鐘情”。

是的，請務(wù)必在5秒內(nèi)讓消費(fèi)者“一見鐘情”，若無法在5秒內(nèi)抓住眼球，客戶可能會(huì)關(guān)閉這個(gè)頁面。

內(nèi)容方向：

1.產(chǎn)品核心賣點(diǎn)（加上產(chǎn)品外觀，科技感）

2.使用場景化展示（如模特穿戴、產(chǎn)品使用動(dòng)態(tài)）

3.品牌 LOGO / 標(biāo)語（弱化但可識(shí)別）

設(shè)計(jì)公式：

1.主標(biāo)題=1. 一句話展示出產(chǎn)品的核心賣點(diǎn)/核心宣傳點(diǎn)；2.或者產(chǎn)品名稱，3.或者情緒價(jià)值（如減壓、陪伴）+功能關(guān)鍵詞（如“AI監(jiān)測”）；

 

2.副標(biāo)題=1. 產(chǎn)品名稱+使用場景；2. 或者核心賣點(diǎn)/核心宣傳點(diǎn)

3.ICON(非必選，有則添加)=信任背書（如“FDA認(rèn)證”）；或產(chǎn)品特色；或核心成分（總之就是消費(fèi)最關(guān)心的點(diǎn)）。

布局要點(diǎn)：

產(chǎn)品圖占據(jù)版面1/2以上，文字占據(jù)版面1/8左右，以圖吸睛，輔以少量文字說明，版面適當(dāng)留白，保證畫面簡潔明了。

優(yōu)秀案例參考：

Dreametech 品牌新品發(fā)布的產(chǎn)品第一張Banner：

產(chǎn)品名字+產(chǎn)品核心宣傳點(diǎn)“Rise up, clean beneath” +多個(gè)獎(jiǎng)項(xiàng)背書效果的Icon。

整個(gè)設(shè)計(jì)非常簡潔和科技感，沒有多余的元素，使得產(chǎn)品成為視覺焦點(diǎn)。

圖片來源：dreametech 僅供學(xué)習(xí)用

Anker品牌產(chǎn)品名字+產(chǎn)品核心賣點(diǎn)+應(yīng)用場景。

圖片來源：Anker 僅供學(xué)習(xí)用

二、痛點(diǎn)展示

核心目標(biāo)：制造“痛感共鳴”，讓消費(fèi)者驚呼“這就是我！并激發(fā)“我需要解決它”的欲望。

人性本懶惰，大多數(shù)人不愿改變，除非感到足夠“痛”。

想讓顧客為你付費(fèi)，關(guān)鍵在于讓潛在客戶真切感受到他們面臨的問題有多嚴(yán)重，若不解決，后果將不堪設(shè)想。

一旦激發(fā)他們的情感反應(yīng)，改變的念頭便油然而生。

因此，第二張Banner要精準(zhǔn)擊中用戶痛點(diǎn)，羅列消費(fèi)者常遇的問題及根源，呈現(xiàn)能引發(fā)共鳴的畫面。

布局要點(diǎn)：

通過圖文結(jié)合的方式，描述消費(fèi)者的痛點(diǎn)，如展示消費(fèi)者在生活中遇到的各種問題。

三類痛點(diǎn)挖掘法：

1. 環(huán)境痛點(diǎn)（如“冬季取暖成本高”→塔式取暖器）
2. 行為痛點(diǎn)（如“化妝易脫妝”→定妝散粉）
3. 產(chǎn)品痛點(diǎn)（如“傳統(tǒng)菜刀收納架易積水”→透氣設(shè)計(jì)收納架）

優(yōu)秀案例參考：

Petlibro品牌在Smart Fountain(給貓智能喂水相關(guān)的產(chǎn)品)產(chǎn)品詳情頁的痛點(diǎn)描述海報(bào)中，突出了貓咪因缺水而面臨的健康風(fēng)險(xiǎn)，通過具體數(shù)據(jù)強(qiáng)調(diào)了脫水對貓咪的危害。

如“9百萬+貓患有貓下泌尿道疾病”和“1百萬+貓患有慢性腎病”，這些龐大的數(shù)字能夠直觀地展示問題的嚴(yán)重性，讓養(yǎng)貓人士意識(shí)到這些健康問題并不是個(gè)別現(xiàn)象，而是普遍存在的問題。

輔助貓?jiān)谕纯嘀械恼掌?，能夠激發(fā)養(yǎng)貓人士的情感共鳴。養(yǎng)貓人士可能會(huì)更加注意自己寵物的水分?jǐn)z入，從而想要主動(dòng)采取預(yù)防措施。就會(huì)繼續(xù)網(wǎng)下瀏覽網(wǎng)頁試圖尋找解決方案。

圖片來源：furbo 僅供學(xué)習(xí)用

三、產(chǎn)品差異化優(yōu)勢

核心目標(biāo)：突出差異化，用“人無我有”建立競爭壁壘，讓消費(fèi)者覺得“非你不可”。(這個(gè)部分可以用1-3 張圖）

上面的一張海報(bào)提到核心痛點(diǎn)，當(dāng)一個(gè)人意識(shí)到了問題的存在，產(chǎn)生了共鳴情緒，那么他最需要的是什么？迫不及待需要解決方案。

因此從第三張海報(bào)開始接下來的幾張海報(bào)都可以呈現(xiàn)如何幫助他們解決問題或?qū)崿F(xiàn)需求。

并且關(guān)于如何解決問題，實(shí)現(xiàn)起來還無比容易，再加上眾多保障，讓你可以0風(fēng)險(xiǎn)購買使用。

這樣用戶就會(huì)想要躍躍一試，成交的意愿就會(huì)很強(qiáng)。

因此大家有沒有注意到，截至目前，沒有一張海報(bào)是多余的，每一張都有它的用處，并且前后是有邏輯性的。

那么在這個(gè)板塊的海報(bào)中，用什么打動(dòng)客戶？

前面提到我們需突出“突出產(chǎn)品差異化”優(yōu)勢，也就是在同類目產(chǎn)品中的優(yōu)勢，“人無我有，人有我優(yōu)，同時(shí)能解決用戶問題”的點(diǎn)。

比如用戶關(guān)注續(xù)航，競品續(xù)航3天，而你的產(chǎn)品可以續(xù)航7天甚至使用了太陽能可以無限續(xù)航。比如全球第一款XXXX產(chǎn)品等。

優(yōu)秀案例參考：

Reolink攝像頭搭載Wi-Fi 6技術(shù)，實(shí)現(xiàn)超快傳輸、低延遲和高穩(wěn)定性。將家庭安全提升到一個(gè)新的水平。

圖片來源：reolink 僅供學(xué)習(xí)用

dreametech品牌20,000Pa優(yōu)勢并告訴用戶這款掃地機(jī)器人能夠產(chǎn)生強(qiáng)大的吸力，幾乎可以吸入任何類型的污垢和灰塵，無論是隱藏在地毯深處的灰塵，還是卡在瓷磚縫隙中的污垢。

圖片來源：dreametech 僅供學(xué)習(xí)用

四、功能拆解

核心目標(biāo)：回答用戶“這對我有什么好處？”從“功能”到“利益”的轉(zhuǎn)化。（建議 3-5 個(gè)核心功能）

也就是因?yàn)槟惝a(chǎn)品的優(yōu)點(diǎn)給消費(fèi)者帶來的好處或者利益?？梢允钱a(chǎn)品成分的優(yōu)勢或者功效的優(yōu)勢。

消費(fèi)者更愿為“解決問題”買單，而非單純的功能。我們可以將功能轉(zhuǎn)換成用戶能夠理解并幫助消費(fèi)者解決需求的點(diǎn)，幫助用戶更好地理解產(chǎn)品，并產(chǎn)生購買的可能。

內(nèi)容方向：

技術(shù)參數(shù)（如材質(zhì)、尺寸、續(xù)航）

創(chuàng)新設(shè)計(jì)（如隱藏式按鍵、防水結(jié)構(gòu)）

用戶利益點(diǎn)（如 “輕便易攜帶”“安全防摔”）

優(yōu)秀案例參考：

Dreametech 將功能清晰轉(zhuǎn)化為利益點(diǎn)”Charge Faster, Clean Longer”。

“5500mAh 大電池” 對應(yīng) “單次清潔時(shí)間長達(dá) 220 分鐘”，讓用戶明白確實(shí)續(xù)航更長、清潔范圍更大，減少頻繁充電。

“吸力高達(dá) 2000Pa” 轉(zhuǎn)化為清潔力強(qiáng)，能深度清潔；“充電快 30%” 則體現(xiàn)節(jié)省時(shí)間。用簡潔語言和數(shù)據(jù)，直觀呈現(xiàn)產(chǎn)品給用戶帶來的便利。

圖片來源：dreametech 僅供學(xué)習(xí)用

也可以用其中一張圖整合所有想傳達(dá)的核心功能，比如下面dreametech和Anker的海報(bào)。

圖片來源：dreametech和anker 僅供學(xué)習(xí)用

五、產(chǎn)品細(xì)節(jié)圖

核心目標(biāo)：細(xì)節(jié)決定轉(zhuǎn)化率，用細(xì)節(jié)增強(qiáng)真實(shí)感，降低決策成本。

這個(gè)板塊可以放大產(chǎn)品細(xì)節(jié)，展示產(chǎn)品的材質(zhì)、做工等屬性信息，用視覺+文案雙重沖擊的方式，有效傳遞產(chǎn)品賣點(diǎn)。

優(yōu)秀案例參考：

依舊是dreametech 品牌的掃地機(jī)。文案 “Double the Brushes, Double the Results” 采用押韻的手法，朗朗上口，不僅點(diǎn)明雙刷設(shè)計(jì)，還暗示清潔效果加倍，極具吸引力。

畫面選取掃地機(jī)工作時(shí)的特寫鏡頭，著重展示雙刷旋轉(zhuǎn)卷起灰塵垃圾的細(xì)節(jié)，真實(shí)還原清掃場景。讓消費(fèi)者能直觀感受到產(chǎn)品的強(qiáng)大清潔力。

還可以用跟競品對比的細(xì)節(jié)展示圖，以及產(chǎn)品使用前VS使用后的細(xì)節(jié)展示。有對比才更突出優(yōu)勢和產(chǎn)品效果。

圖片來源：dreametech 僅供學(xué)習(xí)用

六、用戶證言，信任背書

核心目標(biāo)：用權(quán)威和真實(shí)擊破最后一道防線，消除懷疑，讓消費(fèi)者覺得“選擇你零風(fēng)險(xiǎn)”從而激發(fā)購買欲望。

內(nèi)容方向:

• 消費(fèi)者實(shí)測/證言（如“1000名志愿者實(shí)測效果對比”。這里有一個(gè)數(shù)據(jù)可以分享一下，平均而言，顧客在購買東西之前大約會(huì)閱讀10條客戶評論，當(dāng)然，低成本不需要太多理性思考的產(chǎn)品除外）
• 實(shí)驗(yàn)室數(shù)據(jù)（如“SGS認(rèn)證無毒材質(zhì)”）
• 檢測報(bào)告
• 對比測試
• 明星、權(quán)威專家背書
• 媒體背書如（如“《Forbes》推薦最佳庭院產(chǎn)品”）
• 獎(jiǎng)項(xiàng)&專利

圖片來源：dreametech 僅供學(xué)習(xí)用

圖片來源：luffy-wear 僅供學(xué)習(xí)用

七、使用指南/場景拓展

核心目標(biāo)：越瑣碎，越真實(shí)，預(yù)判所有可能的疑問，減少客服壓力。

尤其是美國消費(fèi)者習(xí)慣自助購物，詳盡的信息能降低退貨率。因此此部分的設(shè)計(jì)需清晰的展示產(chǎn)品的基本信息。

內(nèi)容方向：

• 包裝清單（如“內(nèi)含主機(jī)+充電線+保修卡”）
• 使用說明&使用禁忌（如“步驟分解圖”“多場景應(yīng)用圖”“孕婦慎用”“FAQ” “產(chǎn)品規(guī)格參數(shù)” ）
• 售后政策（如“90天無理由退換”）。

圖片來源：furbo 僅供學(xué)習(xí)用

圖片來源：dreametech 僅供學(xué)習(xí)用

八、品牌介紹

核心目標(biāo)：給產(chǎn)品一個(gè)“靈魂溢價(jià)”，從“賣貨”到“賣價(jià)值觀”，綁定長期用戶。

我們可以將品牌理念傳達(dá)給消費(fèi)者，使產(chǎn)品更有厚度，賦予產(chǎn)品更多情緒價(jià)值，帶動(dòng)消費(fèi)者購買。

Sprout Social數(shù)據(jù)調(diào)研顯示：美國Z世代用戶中，62%的消費(fèi)者愿意為具有社會(huì)責(zé)任的品牌支付溢價(jià)。那么為什么不展示這個(gè)板塊讓你的消費(fèi)者看到企業(yè)有愛心的一面？

內(nèi)容方向：

• 創(chuàng)始人IP（如“創(chuàng)業(yè)初心”）；
• 社會(huì)使命（如“每筆訂單捐贈(zèng)1美元給流浪動(dòng)物”）；

優(yōu)秀案例參考：

furbo品牌產(chǎn)品詳情頁最后一張海報(bào)提到“One Furbo = $1 to Help Rescued Pets”。展現(xiàn)了Furbo關(guān)心動(dòng)物福利，強(qiáng)調(diào)品牌的社會(huì)責(zé)任感。

每購買一臺(tái)Furbo，消費(fèi)者不僅能享受高品質(zhì)產(chǎn)品，還能幫助救助動(dòng)物，激勵(lì)更多人做出購買決策。這種情感連接讓顧客感受到參與有意義事業(yè)的價(jià)值，提升品牌忠誠度。

同時(shí)，F(xiàn)urbo展示透明度和責(zé)任感，增強(qiáng)消費(fèi)者的信任。通過這樣的方式，F(xiàn)urbo有效促進(jìn)品牌與消費(fèi)者之間的聯(lián)系，推動(dòng)銷售增長。

圖片來源：furbo 僅供學(xué)習(xí)用