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

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

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

如果你也想要提高一下自己的「生產效率」,可以看看。

文字

交互稿是什麼?

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

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

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

但是對于頁面標題和资讯標題這些,比較重要的文字內容,我還是會確保一開始就比較準確,否則容易影響判斷。

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

不過,這種方式僅限于項目初期,而且是團隊內部審稿。

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

圖片

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

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

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

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

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

配色

交互稿一般不用彩色,原因我也分析過︰交互方案該畫到什麼程度?灰度區間里,我們肉眼能夠識別記憶的顏色不多,最後你會發現,來來回回就那麼幾個。

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

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

組件

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

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

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

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

總結

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

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

歡迎關注作者的微信公眾號︰「體驗進階」

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

點贊 8
收藏 12
繼續閱讀相關资讯

發表評論 已發布 3

還可以輸入 800 個字
 
 
載入中....
3 收藏