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

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

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

确定走查角色

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

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

制定設計标準

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

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

（一）視覺走查——形

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協議

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!