喂，你設計稿的文案和圖片都真實嗎？

01-29

我猜，大部分設計師/產品經理的設計稿是長這樣的：

（不能用自家產品設計稿，只好借競品了......）

左邊是設計的一個搜索結果頁，展現了商品坑位（圖片標題價格）、篩選等功能模塊。

右邊是商品詳情，是左邊點擊了某個商品後跳轉的頁面。

其實作為一份高保真設計稿，乍一眼看是沒什麼問題的。

那麼，這稿子有什麼問題？

首先......搜索關鍵詞寫的是雅詩蘭黛，但是下面出的商品卻是費列羅的巧克力；
其次......篩選項沒有具體的內容，文案寫的是「篩選項一」、「屬性」等等替代詞；
然後......搜索出來的坑位每個商品都是一樣的，同樣的圖、同樣的標題還有同樣的價格；
最後......商品詳情頁的圖和搜索完全不一樣，價格也不一樣，標題也不一樣......

所以，問題就出在，這份設計稿里的所有數據、圖片、文案都不是真實的。

大家可能會說，設計稿只要說清楚尺寸、間距和組件里分別放什麼不就行了嗎？

難道開發或運營同學真會以為雅詩蘭黛搜出來費列羅嗎？

PRD 里肯定寫了清楚的業務邏輯，比如欄位怎麼定的、跳轉什麼信息要同步過去，設計稿主要只是示意吧？

如果設計師每次都要把所有信息都改成真實的，那豈不是要「浪費」很多時間？

大家都很忙的好不好。

其實吧......第一次我被要求把設計稿里所有內容都做成真實的時候，也覺得這是浪費時間。產品經理沒事幹了嗎要糾結這些可有可無的細節？況且我就算用了線上的數據，最後數據也會變啊。

不過經歷了幾次「折磨」之後，我才慢慢理解了這麼做的意義。繼續拿文章開頭的那張圖來舉例：

不真實的文案會給人以誤導。

篩選項為什麼有得有向下箭頭有的沒有？篩選項真的是針對商品屬性嗎，還是會有促銷優惠的篩選信息？篩選項一二三之間是否有聯繫？

也許你的注釋可以幫助使用設計稿的人理解邏輯，但作為第一個映入眼帘的視覺界面卻沒有傳達出合理的信息，非常容易給人誤解，讓人迷惑。也許最後你寫的備註和圖片上的還不一樣，開發同學就更要罵娘了——這到底哪個是對的？

圖片可能沒有你想像得那麼好。

都是白底圖當然美如畫了，要想在商品圖片上打個「熱銷」或者「新品」都非常容易。

但是，如果你家平台賣的商品的圖片不都是平台自己產出的，或者沒有嚴格的圖片規範，可能最終上線之後的效果就是這樣的......

F*uk…..看這醉人的配色，看這迷亂的構圖，在圖片上加任何標籤估計都會失去作用了。

所以，不真實的圖片不僅會誤導別人，同樣會麻痹了設計師自己。

業務邏輯表達混淆。

如果說連續四個坑位放的都是同一個商品還不至於讓人誤解，那有時候商品、銷量和價格的混亂排序就會導致一些問題了。

為什麼費列羅排在德芙前面？是否有什麼特殊的排序邏輯？

為什麼銷量少的排在銷量多的前面？是不是有廣告業務？

為什麼商品詳情頁和搜索的圖片不一樣？是不是有需求替換圖片？

反正吧......你的設計稿有多少個不真實，就會讓看的人腦袋轉多少個彎。

類似的錯誤還可以列舉出很多：

圖片放的手機，後面店鋪寫的是 Zara 官方旗艦店；

賣的是小米，下面品牌介紹寫的是耐克；

1000塊錢的東西寫85折優惠，優惠後的價格卻是699；

明明已經結束的 Apple 發布會，為什麼頁面上寫的還是直播？

商品是冰箱，為什麼屬性裡面有適合什麼樣的皮膚......

太多了。

說真的，我被這事兒折騰了好幾個晚上，所以我理解把所有內容全部 Check 一遍的成本有多高。

尤其好幾次我出完方案已經精疲力盡了，卻還要讓我校對內容，那心情真是...瞬間原地爆炸。

但是現在如果別人拿一分稿子給我看，裡面的內容是不真實、不合理的，我還是會覺得閱讀成本很高。

明明設計稿是最直觀、最明顯的信息傳遞，明明第一眼看到的就是這些稿子，有什麼理由不把內容做成真實的呢？

沒時間嗎？前面省下來的時間總是要還的。

不是你還，就是別人替你還，如果來找你辯駁幾句，就大家加倍還......

最後，良心建議大家在以下情況儘可能去檢查一遍設計稿的內容：

1、你的設計稿要拿給外部人員看。比如彙報給甲方、品牌方、合作對象等。
2、你的設計稿要拿給大老闆看。大老闆這麼忙，千萬不要給自己留坑，把時間浪費在細節上，導致方案通不過。
3、不是十萬火急。來得及，就儘可能做細緻一點，方便別人最終也會方便到自己。

養成良好的設計習慣，是進階的第一步。