4個畫交互稿的偷懶方法，別讓老板看到！

我最開始做交互時，都是老老實實按照 UI 規(guī)范畫圖，甚至截圖參考尺寸。畫出來的東西，基本上除了沒有顏色、描述說明多一些之外，和 UI 稿沒有什么區(qū)別。

多年之后，我慢慢學會了一些省力技巧。畫圖速度大大加快的同時，稿件質(zhì)量也看著反而更好了，總而言之就是把時間花在更有效率的地方。可惜做設(shè)計不是按稿件計費，我這偷懶方法只能用來摸一摸魚，對升職漲薪?jīng)]有啥直接幫助。

如果你也想要提高一下自己的「生產(chǎn)效率」，可以看看。

文字

交互稿是什么？

其實就是一個用電腦畫的草圖，本身沒有什么用，主要是給下一步視覺設(shè)計提供參考。交互稿注定了要被改來改去，因為改手繪稿和線框圖都看不出效果，改視覺稿又成本太高。

我在早期的時候，為了追求效果，一開始就用真實文字內(nèi)容，耗去不少時間的同時。然而這樣的真實內(nèi)容剛貼上去，可能又會面臨改方案，剛剛收集的內(nèi)容可能就要撤了。所以我后來學聰明了，在定稿之前不會太在意內(nèi)容的真實性。例如先填用戶名可能就先填“用戶名”、觀看量統(tǒng)一寫“100”、描述用“XXX”填充……

但是對于頁面標題和文章標題這些，比較重要的文字內(nèi)容，我還是會確保一開始就比較準確，否則容易影響判斷。

不過，這種方式僅限于項目初期，而且是團隊內(nèi)部審稿。

隨著源文件越來越多，這些文案會慢慢積累起來，不用很麻煩就能找到真實內(nèi)容替代。而且到了外部審稿，不論麻煩與否我會在定稿前把信息換成真實的，總不能讓領(lǐng)導或客戶看“XXX”吧。

圖片

我以前有段時間，收集了一大堆用戶頭像和封面圖，畫稿子時隨機貼上。有時太趕，一邊討論一邊畫完了，圖還沒貼上，但是大家已經(jīng)達成一致。于是我就干脆不貼圖了，反正接下來視覺設(shè)計師也要貼自己的圖。

后來我發(fā)現(xiàn)，頭像和小封面這種占地不大的圖，貼不貼真的無所謂。大家一直都是合作做同一款產(chǎn)品，這點小差異影響不了判斷。反而貼圖的話，如果圖片沒選好還容易出現(xiàn)理解偏差。例如圖片和背景色太相似容易產(chǎn)生誤解……

但是對于背景或者詳情圖這種大圖，我還是會老老實實選一個既合適又好看的，因為對感官判斷印象比較大。

配色

交互稿一般不用彩色，原因我也分析過：交互方案該畫到什么程度？灰度區(qū)間里，我們?nèi)庋勰軌蜃R別記憶的顏色不多，最后你會發(fā)現(xiàn)，來來回回就那么幾個。

把這幾個顏色保存在色板里，就再也不用為選顏色而做任何糾結(jié)了。

組件

交互稿畫多了，我發(fā)現(xiàn)大部分頁面，都會被這些常見的組件填充：例如頁簽、標題欄、表單、按鈕、用戶列表……雖然視覺上，經(jīng)常調(diào)整一下尺寸、間距、圓角等，但這些對交互又沒啥影響。

交互稿，并沒有必要完全按照設(shè)計規(guī)范上的尺寸來做，因為沒有人會拿著尺子去量，看得最仔細的視覺設(shè)計時，也只是參考一下布局和規(guī)則。所以慢慢地，我就能整理出一套交互稿專用組件來，把交互工作真正搞成了“拼組件”。

雖然我也到網(wǎng)上下載過別人的組件，但感覺還是自己做一套組件比較好，如果這都懶得做那就別想做好設(shè)計了……所以就不分享我自己的組件庫了～

總結(jié)

這些“偷懶”方法，能幫我節(jié)省很多時間，但這些時間原本就不是設(shè)計師的核心價值所在。

而不是花費大量時間在找真實內(nèi)容和圖片填充上、思考怎么給草稿配色、糾結(jié)圓角和間距幾個像素的差別上。然而真正難的地方，是調(diào)研分析、用戶理解、解決問題……這些就不容易“偷懶”了。

歡迎關(guān)注作者的微信公眾號：「體驗進階」