視覺走查一般分為形、色、字、構、質五大模塊，而本文也將結合這幾點講講視覺走查的注意事項。

設計評審不通過？經常讓你改稿？

我們日常在做設計的時候往往會不由自主的套用以往的經驗，自己沉浸在自己的小世界里，導致方案過于主觀或者理想化，與目標不相符。這就會出現評審不通過、效果不完善的情況，因此我們需要依據一定的規則進行自檢。

設計走查

我們都去醫院體檢過，前臺會給我們一個體檢表，我們根據體檢表上的項目去一一檢查并記錄結果最后匯總。而設計走查就類似于給方案做一次體檢，根據一定的設計標準和規則對設計方案從頭到尾進行一次問題的發現與總結，便于修改和迭代。

如何進行設計走查？

確定走查角色

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

視覺走查一般分為形、色、字、構、質五大模塊。

制定設計標準

當我們確定“體檢表”的各個項目之后，我們如何知道這個項目達標不達標呢？

因此我們需要有一定的標準來確定這個項目的標準，如果達到標準了，則通過，如果未達標則說明需要調整。

（一）視覺走查——形

1. 圖片

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

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

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

2. 標簽

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

3. 按鈕

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

（二）視覺走查——色

1. 層級合理

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

2. 統一規范

統一規范顧名思義，在顏色使用方面規范要統一。比如下圖，如果將藍色作為文字鏈接，那么在一般情況下，所有的文字鏈接都應該用藍色，當然，如果因為背景色導致藍色識別度不高，這種情況下需要酌情調整。

3. 數量適中

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

（三）視覺走查——字

1. 層級合理

不同的字號、不同的字重代表了不同的層級，眾所周知，字號越大、字重越重，層級越高，因此需要合理運用，例如下圖輔助小字選擇Semibold，主標題卻使用Light，明顯的不合理。

2. 行高舒適

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

3. 數量適中

除了字號字重以外，可能還會有多種字體，頁面中字體數量一般不會超過兩種，一種為常規文字字體(一般為系統字體)，一種為數字字體。因為中文文字非常多，字體包非常大，所以不建議嵌入第三方中文字體包，數字字體一般會將多余的英文字體、符號等去掉以精簡字體包。

（四）視覺走查——構

此處的構為頁面結構，主要分為層級和間距兩大部分：

1. 層級合理

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

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

商品圖是最直觀最能吸引用戶的地方，因此商品圖優先級肯定是最高的，然后我們就需要確定賣點和標題哪個優先級高呢？用戶什么時候需要看文字？

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

還剩一個價格，用戶在什么情況下看價格呢？

當然是知道這個商品之后才會去看價格，因此我們排出了優先級：商品圖>商品名稱>賣點>價格。但是在大多數情況下，用戶是可以通過商品圖識別商品的，因此用戶會立馬去看價格，因此在這種情況下優先級是：商品圖>價格>商品名稱>賣點。

注：此處僅推論，并非實際調研結果，正常優先級排序需要進行一定的調研。

2. 間距合理

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

注：此處為舉例，實際間距需要根據頁面內容來進行規范和調整。

格式塔原理——接近性

格式塔原理——相似性

格式塔原理——連續性

格式塔原理——封閉性

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

格式塔原理——共同命運

（五）視覺走查——質

質則強調頁面整體的感覺是否合理：

1. 風格合理統一

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

2. 調性合理統一

調性合理統一主要是指頁面整體感覺，例如產品是奢侈品，要做高端大氣上檔次一點，結果頁面中促銷氛圍濃重，這是不合理的，在這個部分主要是看情緒板的制作和使用是否統一，如果情緒板完成之后并沒有實際使用，那么多多少少會有一點問題的。

三、確定優先級

當我們找到不達標的對象之后，我們通過四象限法則來對這些對象進行優先級排序，根據優先級排序來確定優化順序：

總結

1. 確定走查對象
2. 制定走查標準
3. 進行設計走查
4. 排列優先級
5. 修改優化

部分圖片來自網絡，侵刪。

作者：何必復雜；公眾號：何必復雜（UXSimple）

本文由 @何必復雜 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議