前段時間我在京東買到壞芒果了，要申請售后。作為一個界面設計師我居然點錯了按鈕。Excuse me？我眼睛是不是不太行了？

找了幾個人問，有的說不會誤點，有的說頁面確實有迷惑。但他們都是帶著我提出的問題去看頁面，不是真實場景下用戶的反饋。這里的“問題”是基于我這個用戶認知下的，實際上有沒有問題得看京東這個頁面的用戶行為數據。

那就以我這個用戶的角度，從設計層分析一下到底為什么會點錯吧。初步認為，問題主要在于點線面關系，包括字號大小、顏色、視覺層級、組合等。

說到這個想起了幾年前的一個項目。當時我們用字號和顏色都很謹慎，但產品說我們字號太多，大小不一顯得整個頁面很亂。我們核對了之后發現字號也不多呀。后來才明白“字號多”只是他們的感受，即使字號少，顏色、層級和組合多的話，也會造成視覺上的“字號多”。

發現問題：用戶出錯在哪里

A：我每次都點擊橫線上“請您描述問題并上傳收到商品照片”這句話填內容，然后發現這里不是給我填內容的

B：我不知道退款要填多少東西，什么是一定要填的

C：提交的時候出錯了，說是沒寫描述，又要回頭去寫

用戶只會告訴你遇到的問題和使用感受，畢竟他們也不知道哪里出了錯。所以對于用戶提出的問題，我們得先發散，再歸因。

分析問題：先發散，再歸因

1. 發散問題

以問題為中心進行放射性發散，連接相關點，組成問題的圖譜。盡可能提出更多的疑問點，從多方面考慮，找出關聯性較大的因素。

問題 1：漏填

為什么不給出必填提示呢？

不同的申請原因，注釋分別是什么？

全部的申請原因都要寫描述嗎，存在可以不寫的情況嗎（比如七天無理由）？

全部的申請原因都要上傳憑證嗎？

如果申請原因不同，填寫描述的提示會不同嗎？

說明一下，剛開始出現問題的頁面是優鮮賠，我還沒截圖已經進行完賠付了，所以分析用的是退貨界面的選項，內容大致一樣，樣式也一樣。

分析之后發現：

1）必填提示很重要。

除了質量問題外，其他所有原因都需要填寫描述文字，不然就無法提交?；谶@一點，我認為給予必填提示*號是很重要的，淘寶的退貨頁面也會有必填提示。

2）選項之間可能有交叉或者重復，分類不明。

比如七天無理由一定要寫理由；大小/顏色/型號不合適沒寫明需要寄回附件贈品；其他問題務必上傳有效憑證，但在提交時不約束這個條件。

這些問題其實是產品層面要解決的問題。第一個問題好解決，增加必填條件約束就可以。第二個問題相對麻煩一點，需要對售后原因重新進行分析和歸類，重新寫規則。由于第二個問題對解決本次問題的價值不大，不用花心思在這上面。

問題 2：誤點

為什么橫線上更像是可以輸入文字呢？跟字號顏色有沒有關系？

怎么體現申請原因和描述問題的從屬關系呢？

注釋的內容可以直接放在描述文字輸入框內嗎？怎么結合？

頁面的框架存在問題嗎？卡片和分割線的規范是什么？

這種左右選項結構的組件形式是影響因素嗎？

分析之后發現：

1）頁面的框架不規范，各卡片之間的距離沒有一致，層級也有問題。

一般來說，出現卡片距離不一致有幾種情況：設計師特意設計；開發實現頁面的代碼問題。但從這個頁面上來說不太需要設計不一樣的卡片間距。如果項目時間允許，在設計走查的時候發現問題一定要提出讓開發解決。

2）文字的顏色讓人分不清主次從屬。

這一點在下面有更詳細的分析，先不在這討論。

2. 收攏歸因

經過對頁面的觀察和分析，我們可以把問題聚焦在以下幾個點上。

3. 競品分析大法

找到原因之后，比較有效快捷的方法就是進行競品分析，看看別人怎么做。根據上面聚焦到的四個問題點，我們帶著目的去做競品分析。

觀察淘寶和京東，我們可以發現：

1）淘寶有必填提示，京東沒有；

2）淘寶的輸入框比背景色淺，京東的輸入框和背景色一致；

3）淘寶的描述作為補充項另起一個模塊，京東的描述和申請原因在同一模塊。

最后一點關于字體的，分析項比較多：

通過上圖，我們可以發現，淘寶的顏色層級有 3 級，而京東的顏色層級有 6 級。將兩個界面中的組件元素用色塊來表示，淘寶有明確的視覺引導，而京東由于標題與注釋顏色比較接近、標題與選項對比相差太大、模塊缺乏統一性，造成了主次不清晰的問題。

我們再次看看京東的界面。從視覺體現上來說，選項使用了最深的黑色，確實能夠吸引用戶的目光，讓用戶知道哪里要選，但卻弱化了標題和補充項的視覺。在退貨退款頁面，用戶是帶著目的去操作的，他們需要完整走完流程，完成申請，因此需要填什么類型的信息、怎么順利完成流程就很重要。就像你到銀行柜臺辦理轉賬的時候，你會希望銀行能夠按順序告訴你每一步要做什么吧：取號、去單據區填單、到柜臺辦理。如果你一進去保安叫你準備好身份證、轉賬的相關信息，到了柜臺發現還要填單，是不是體驗感很差呢？

解決問題：低成本有效解決

經過一輪競品分析后，我們得出了相應的解決方案：

1）統一頁面結構

卡片間距保持一致；輸入框顏色略淺于背景色。

2）文字視覺關系調整

文字顏色精簡到 3 種；標題顏色與選項顏色一致，用字體粗細區分；申請原因的注釋與輸入框提示語結合。

3）準確引導操作

給予必填提示。

這是調整前后的對比圖：

從整體的視覺上來看，設計規范是與原本幾乎保持一致的，更多的是細節的調整。但是我們的目的不是把界面做得多好看，而是低成本有效地解決問題，也就是要綜合考慮時間成本和開發成本。

文末，想說說我看到的一些現狀。遇到問題的時候，有的設計師會無意識改掉原型字段、增刪功能、改變運營方案...如果不改，他們就覺得自己做不了或者做不好設計稿。以前我也會有同樣的問題，原因有可能是不夠理解產品結構、思維受限、沒有考慮時間成本和開發成本...現在除非邏輯有誤、狀態有缺失，我才會跟產品商量原型的問題。一般都盡量從設計層面解決問題。

網上很多改版的作品，會從產品層面、運營層面去分析，這點是挺好的，多思考才有多種方法。但是不代表平時做設計的時候我們要改掉產品和運營的內容（除非有特殊情況），這些需要和相關的同事商量評估。

有時候能用最低成本從設計層面解決問題，也是一種能力。

歡迎關注作者微信公眾號：「牙線y2x」