視覺走查一般分為形、色、字、構(gòu)、質(zhì)五大模塊，而本文也將結(jié)合這幾點(diǎn)講講視覺走查的注意事項(xiàng)。

設(shè)計(jì)評(píng)審不通過？經(jīng)常讓你改稿？

我們?nèi)粘Ｔ谧鲈O(shè)計(jì)的時(shí)候往往會(huì)不由自主的套用以往的經(jīng)驗(yàn)，自己沉浸在自己的小世界里，導(dǎo)致方案過于主觀或者理想化，與目標(biāo)不相符。這就會(huì)出現(xiàn)評(píng)審不通過、效果不完善的情況，因此我們需要依據(jù)一定的規(guī)則進(jìn)行自檢。

設(shè)計(jì)走查

我們都去醫(yī)院體檢過，前臺(tái)會(huì)給我們一個(gè)體檢表，我們根據(jù)體檢表上的項(xiàng)目去一一檢查并記錄結(jié)果最后匯總。而設(shè)計(jì)走查就類似于給方案做一次體檢，根據(jù)一定的設(shè)計(jì)標(biāo)準(zhǔn)和規(guī)則對(duì)設(shè)計(jì)方案從頭到尾進(jìn)行一次問題的發(fā)現(xiàn)與總結(jié)，便于修改和迭代。

如何進(jìn)行設(shè)計(jì)走查？

確定走查角色

設(shè)計(jì)走查作為設(shè)計(jì)方案的檢查方式，那么我們也需要有一張“體檢表”來確定檢查的做項(xiàng)目，一般情況下，設(shè)計(jì)走查分為交互走查和視覺走查，本文介紹視覺走查方式，交互走查將在后面的文章中介紹。

視覺走查一般分為形、色、字、構(gòu)、質(zhì)五大模塊。

制定設(shè)計(jì)標(biāo)準(zhǔn)

當(dāng)我們確定“體檢表”的各個(gè)項(xiàng)目之后，我們?nèi)绾沃肋@個(gè)項(xiàng)目達(dá)標(biāo)不達(dá)標(biāo)呢？

因此我們需要有一定的標(biāo)準(zhǔn)來確定這個(gè)項(xiàng)目的標(biāo)準(zhǔn)，如果達(dá)到標(biāo)準(zhǔn)了，則通過，如果未達(dá)標(biāo)則說明需要調(diào)整。

（一）視覺走查——形

1. 圖片

由于圖片一般情況下我們都是留坑位給運(yùn)營上傳，UGC類APP圖片是用戶上傳，因此要保證圖片尺寸、比例合理且統(tǒng)一。例如同為商品圖坑位，如果都是1:1的，那么應(yīng)該都是1:1的。

而具體商品圖是什么比例需要根據(jù)實(shí)際情況來定，例如馬蜂窩這類旅游攻略類，用戶一般是手機(jī)拍照上傳，因此比例多為4:3或者1.382:1；像電商類APP，商品的主圖一般都是方圖。

下圖是常用圖片比例以及占比：

2. 標(biāo)簽

標(biāo)簽按層級(jí)由低到高大致可分為純文字標(biāo)簽、線框標(biāo)簽、淺色標(biāo)簽、純色/漸變標(biāo)簽，檢查中需要注意標(biāo)簽使用是否統(tǒng)一，例如促銷、賣點(diǎn)這類標(biāo)簽一般比較多，所以可以用線框標(biāo)簽，而自營、旗艦店等官方屬性體現(xiàn)正品心智的層級(jí)較高，出現(xiàn)頻次可能也相對(duì)較少，因此使用純色/漸變標(biāo)簽。在這種情況下，需要確定顏色是否具有統(tǒng)一性。

3. 按鈕

按鈕按層級(jí)由低到高大致可分為文字按鈕、線框按鈕、淺色按鈕、純色/漸變按鈕，我們也需要注意按鈕使用是否統(tǒng)一規(guī)范，比如取消按鈕統(tǒng)一都是線框按鈕，而你突然變成純色/漸變按鈕，那肯定是不合理的。

（二）視覺走查——色

1. 層級(jí)合理

在上面這個(gè)模塊中，一眼就能分辨出來價(jià)格的層級(jí)是最高的，其次是上方的標(biāo)題部分，最低的是中間的小字部分。不同的顏色代表了不同的層級(jí)，頁面中層級(jí)要清晰、合理，通俗點(diǎn)說顏色越不顯眼，層級(jí)越低。什么樣的顏色不顯眼：根據(jù)背景色而定，下圖中，text1與背景顏色相近，不易于區(qū)分，不顯眼，層級(jí)低；text2與背景色有一定差異，易于區(qū)分，因此顯眼，層級(jí)高。

2. 統(tǒng)一規(guī)范

統(tǒng)一規(guī)范顧名思義，在顏色使用方面規(guī)范要統(tǒng)一。比如下圖，如果將藍(lán)色作為文字鏈接，那么在一般情況下，所有的文字鏈接都應(yīng)該用藍(lán)色，當(dāng)然，如果因?yàn)楸尘吧珜?dǎo)致藍(lán)色識(shí)別度不高，這種情況下需要酌情調(diào)整。

3. 數(shù)量適中

顏色太多會(huì)使人眼花繚亂，因此需要控制顏色使用數(shù)量，一般情況下，除了黑白灰以外，頁面中顏色不宜超過3種，這需要根據(jù)頁面復(fù)雜度酌情而定，但如果出現(xiàn)多種顏色，需要說明理由，并且保持所有頁面顏色使用統(tǒng)一。

（三）視覺走查——字

1. 層級(jí)合理

不同的字號(hào)、不同的字重代表了不同的層級(jí)，眾所周知，字號(hào)越大、字重越重，層級(jí)越高，因此需要合理運(yùn)用，例如下圖輔助小字選擇Semibold，主標(biāo)題卻使用Light，明顯的不合理。

2. 行高舒適

單行文本一般行高與字號(hào)相同，而多行文本的行高，一般是字號(hào)的1.618倍(取整、取偶)，行高過高，頁面內(nèi)容太散，不利于閱讀，行高過低，內(nèi)容過于緊湊，也不利于閱讀，1.618為黃金比例，間距適中，便于閱讀。

3. 數(shù)量適中

除了字號(hào)字重以外，可能還會(huì)有多種字體，頁面中字體數(shù)量一般不會(huì)超過兩種，一種為常規(guī)文字字體(一般為系統(tǒng)字體)，一種為數(shù)字字體。因?yàn)橹形奈淖址浅６啵煮w包非常大，所以不建議嵌入第三方中文字體包，數(shù)字字體一般會(huì)將多余的英文字體、符號(hào)等去掉以精簡字體包。

（四）視覺走查——構(gòu)

此處的構(gòu)為頁面結(jié)構(gòu)，主要分為層級(jí)和間距兩大部分：

1. 層級(jí)合理

不同的模塊、不同的內(nèi)容有著不同的層級(jí)，不同的頁面也有著不同的目的，層級(jí)合理意味著這個(gè)頁面的層級(jí)排列合理。那么如何理解呢？我們來看下圖：

這是一些商品信息，在商品列表頁展示，在這個(gè)頁面我們希望能夠快速命中用戶偏好的商品以使得用戶能夠進(jìn)入到商品詳情頁完成轉(zhuǎn)化。商品信息有商品圖、價(jià)格、賣點(diǎn)、商品名稱，那么如何排列優(yōu)先級(jí)呢？

商品圖是最直觀最能吸引用戶的地方，因此商品圖優(yōu)先級(jí)肯定是最高的，然后我們就需要確定賣點(diǎn)和標(biāo)題哪個(gè)優(yōu)先級(jí)高呢？用戶什么時(shí)候需要看文字？

當(dāng)然是圖片無法識(shí)別、用戶不太能確定這是什么商品的時(shí)候，這種情況下，我們最先要做的肯定是幫助用戶去識(shí)別商品，其次才是展示賣點(diǎn)，如果不能識(shí)別出商品是什么，展示賣點(diǎn)的意義是什么呢？

還剩一個(gè)價(jià)格，用戶在什么情況下看價(jià)格呢？

當(dāng)然是知道這個(gè)商品之后才會(huì)去看價(jià)格，因此我們排出了優(yōu)先級(jí)：商品圖>商品名稱>賣點(diǎn)>價(jià)格。但是在大多數(shù)情況下，用戶是可以通過商品圖識(shí)別商品的，因此用戶會(huì)立馬去看價(jià)格，因此在這種情況下優(yōu)先級(jí)是：商品圖>價(jià)格>商品名稱>賣點(diǎn)。

注：此處僅推論，并非實(shí)際調(diào)研結(jié)果，正常優(yōu)先級(jí)排序需要進(jìn)行一定的調(diào)研。

2. 間距合理

間距方面我們需要充分利用格式塔原理來制定一定的規(guī)范，來保證內(nèi)容之間的間距統(tǒng)一合理，例如主標(biāo)題和副標(biāo)題，這兩部分內(nèi)容是對(duì)商品的描述，因此為一組，我們把兩者間距定為6pt，而商品圖跟標(biāo)題也屬于一組內(nèi)容，我們把兩者間距定為9pt，商品與商品之間也是一組內(nèi)容，我們可以統(tǒng)一把兩者間距定為12pt。

注：此處為舉例，實(shí)際間距需要根據(jù)頁面內(nèi)容來進(jìn)行規(guī)范和調(diào)整。

格式塔原理——接近性

格式塔原理——相似性

格式塔原理——連續(xù)性

格式塔原理——封閉性

格式塔原理——主體/背景

格式塔原理——共同命運(yùn)

（五）視覺走查——質(zhì)

質(zhì)則強(qiáng)調(diào)頁面整體的感覺是否合理：

1. 風(fēng)格合理統(tǒng)一

風(fēng)格合理統(tǒng)一主要是指頁面整體都是同一風(fēng)格的，無論是icon還是按鈕還是整體，例如icon是扁平的，那么按鈕就不能是寫實(shí)的。

2. 調(diào)性合理統(tǒng)一

調(diào)性合理統(tǒng)一主要是指頁面整體感覺，例如產(chǎn)品是奢侈品，要做高端大氣上檔次一點(diǎn)，結(jié)果頁面中促銷氛圍濃重，這是不合理的，在這個(gè)部分主要是看情緒板的制作和使用是否統(tǒng)一，如果情緒板完成之后并沒有實(shí)際使用，那么多多少少會(huì)有一點(diǎn)問題的。

三、確定優(yōu)先級(jí)

當(dāng)我們找到不達(dá)標(biāo)的對(duì)象之后，我們通過四象限法則來對(duì)這些對(duì)象進(jìn)行優(yōu)先級(jí)排序，根據(jù)優(yōu)先級(jí)排序來確定優(yōu)化順序：

總結(jié)

1. 確定走查對(duì)象
2. 制定走查標(biāo)準(zhǔn)
3. 進(jìn)行設(shè)計(jì)走查
4. 排列優(yōu)先級(jí)
5. 修改優(yōu)化

部分圖片來自網(wǎng)絡(luò)，侵刪。

作者：何必復(fù)雜；公眾號(hào)：何必復(fù)雜（UXSimple）

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

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