對于界面來講，我們設(shè)計師過于關(guān)注設(shè)計的美觀度，而忽略了圖片和文字的內(nèi)容的真實性。而界面內(nèi)容的真實性相當(dāng)關(guān)鍵，這往往關(guān)乎自己的設(shè)計最終能不能高還原度地呈現(xiàn)。

很棗很棗之前，有個新聞。有人娶了一個韓國老婆，因為生的孩子太丑，丈夫把老婆告上法庭，還贏了官司。

是不是似曾相識？我們很多設(shè)計師在出視覺稿的時候，設(shè)計稿狂拽炫酷屌炸天，但最后上線以后的效果，都不好意思說這是自己做的。

我們下面通過幾個栗子，感受一下保持界面真實性有多重要：

第一個栗子

這是一個猜你喜歡的新界面設(shè)計

這是上線以后的樣子：

上線以后的界面閃瞎設(shè)計師眼，圖片質(zhì)量比起設(shè)計稿差很多。

因為沒有預(yù)料到賣家上傳圖片的質(zhì)量，因此采用了較大尺寸的框架來承載賣家圖片，這反而暴露了本身圖片的缺點（有亂七八糟的膏藥）。在無法規(guī)范賣家圖片的情況下，最好使用別的框架去承載圖片。

這是優(yōu)化后的樣子：

第二個栗子

這是一個內(nèi)容模塊的設(shè)計：

上線以后長這樣：

一行根本放不下標(biāo)題，用戶根本看不懂在說什么。同時，由于作者的名稱很長，造成下面的信息重疊在了一起。而設(shè)計師顯然沒有考慮實際情況，只為內(nèi)容的標(biāo)題留了一行的空間，將作者、頭像、點贊、閱讀數(shù)也水平展示在一行內(nèi)。

如果按照實際內(nèi)容，利用橫向列表式的排布，文章標(biāo)題、作者頭像和點贊閱讀等信息都可以更好地展示。

這是優(yōu)化后的樣子：

第三個栗子

需要制定一個表單信息填寫的規(guī)范，主要填寫信息有用戶的名字和證件號，于是設(shè)計稿如圖：

拿這個規(guī)范去和機票業(yè)務(wù)方對，根本行不通。因為國際機票需要的信息如下：

發(fā)現(xiàn)沒，因為在設(shè)計時只知道有用戶的姓名，而且僅用了“乘機人”代表用戶名，忽略了國際機票是需要用戶的姓/名分開來寫，以及需要護照號，而不是身份證號的。雖然優(yōu)化后的界面更簡潔，但是不滿足實際應(yīng)用的。

這是優(yōu)化后的規(guī)范：

第四個栗子

設(shè)計師設(shè)計了一套頻道入口的模板，如下：

這套模板上線以后，發(fā)現(xiàn)有的模板應(yīng)用效果如下：

因為設(shè)計師只用了一套背景圖，所以沒有考慮到替換其他背景圖時的展示效果，有的文字根本看不清楚。如果多嘗試幾張圖片，為圖片增加半透明黑色涂層，真實效果就會好很多：

最后是幾條建議

1｜在設(shè)計前需要考察現(xiàn)狀

考察內(nèi)容包括界面都有哪些信息（照片、文字、用戶名、用戶頭像等），每種信息的質(zhì)量（照片分辨率、照片質(zhì)量、文字長度、文字質(zhì)量）等

2｜盡量使用實際圖片進行設(shè)計

在設(shè)計時使用的圖片需要和線上實際的圖片（賣家上傳的圖片、用戶上傳的圖片、運營編輯的圖片）等一致。例如商家可能會在圖片上貼一些牛皮鮮，這樣我們可以通過設(shè)計將牛皮鮮遮起來；如果圖片分辨率暫時不能保證，那就盡量避免使用太大的圖片展示區(qū)域，以免實際效果會模糊。

3｜避免重復(fù)使用圖片素材

如果通篇使用同一類型的素材（明暗、顏色種類等），比如白色元素在深色圖片上展示效果很好，但是一旦圖片是淺色，效果就會很差。這些問題在豐富性高的圖片中會更容易發(fā)現(xiàn)。

4｜保證文字內(nèi)容和線上的文字內(nèi)容一致

別再用Loren這樣無意義的文字了，拿真實的內(nèi)容填滿你的界面，不僅方便你找到更好的形式去優(yōu)化你的界面，更可以避免一些基礎(chǔ)錯誤。

5｜考慮文字的長度，制定文字規(guī)則

在規(guī)定字號的時候，首先去看你要規(guī)定的這段文字在大多數(shù)情況下有多少個字，這樣能幫助你合理設(shè)計字號以及文字換行規(guī)則。

6｜界面上下文關(guān)系保持一致

例如你要做一個親子主題的頁面，但是界面里出現(xiàn)了跳傘攀巖蹦極等刺激瘋狂的活動，光在評審的時候就會讓大家難以理解。

其他一些需要保持一致的情況，需要大家在工作中自己體會

作者：Sugar，（微信alibabadesigner）阿里高級設(shè)計師

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