小記:主題設計基本步驟

主題設計想必是絕大多數剛入門UI設計的同學都會接觸到的吧,在我剛開始接觸UI設計,就是從接觸主題開始,當時我畫圖標還是處在沒有設計流程方法支持,而全憑感覺來的,這種想到哪做到哪就會很容易出現做著做著風格不一致了,所以我當時畫的圖標都是零零散散,因為我自己明白自己沒法做到統一,我就將精力放在技法和質感材質的練習上,這也給自己這幾年挖了一個大坑,總是慢潮流半拍,直到現在UI設計中涉及的技法基本困擾不到我了,我才開始試著跳出技法這個坑,開始關注思考一些別的東西。包括界面設計也是今年才突然想到,如何從解決人的問題的角度來設計一個產品才是我作為設計師自然而然應該思考的路子,但是我現在看到設計兩個字第一想到的還是視覺層面,這就是我潛意識中的短板,沒有具有一個更高階的目光。

主題說起來可以說很簡單,但也可以說很難,這要看個人製作主題時偏向於趣味性多一點,還是哲學層面的多一點。趣味性多一點無疑是比較容易學的,關於哲學等某些思想流派的設計,那就比較難了,難得是你對該思想文化的了解如何,有一點誤差都有可能被人家看出你的膚淺哈哈哈。

切入主題!主題主題,首先主題一定是有一個主題在裡面。我的本科畢業論文寫的是《手機系統主題設計中的故事性研究》。以下是我論文中摘出來的一些片段:

隨著移動互聯網的高速發展,以及移動設備硬體技術上的成熟和提高,手機已經融入到人們生活中並成為生活中難以割捨的一部分。優秀的主題設計師往往會用一個動人的故事來賦予其主題以更深層次的內涵,通過故事性的嵌入使得優秀的主題設計會帶給用戶更加完美的用戶體驗,進一步推動手機從一個冷冰冰的科技產品轉變為更具「人性」的工具。

「故事性」一詞最常見的是用於文學、電影和戲劇中的術語,它的本意指的是貫穿在文學、電影和戲劇中的故事情節,它們會對觀看作品的觀眾起到一定的情感支配作用。本文將「故事性」引入到主題設計作品中,主要是針對隱藏在視覺作品背後的設計師們的獨特設計理念。

......

2.2手機主題設計的敘事類型

藝術來源於生活,藝術家在創作藝術作品的時候,往往會根據自己的生活經驗進行取材,找到靈感。而手機主題設計師也會根據生活經驗來進行相關的主題設計,根據主題市場的調研了解,可以歸納為以下三類題材:1. 以經典影視動畫作品的敘述;2.特定群體的審美表達;3.個體經歷情感敘述。

以上這些說實話,我是很反感這些搞學術歸納的,這些看起來很專業的文章在真實工作中絕大多數並無卵用,寫這些的人絕大多數是在琢磨如何搞好學術而不是如何搞好設計,所以要搞好設計,前期看文章都不如每天逛設計網站看優秀設計師作品,我們設計師要做沖在第一線讓別人去總結歸納的人。當然以上是從我個人初級設計師角度來說。

我上篇說了這篇很短,確實很短,但卻比長篇大論的論文好用。

舉例子,以鄙人最後一次以趣味性為主的偏擬物的主題設計《夜章》為例,我的製作過程是這樣的:

1、定主題:比如《夜章》這個主題,做這個主我先定了個節日萬聖節,那麼我的主題就會由萬聖節展開去設計。

2、聯想:自己想和百度谷歌相關關鍵詞,會得到如下的圖片信息

3、moodboard:製作屬於自己的moodboard,記住屬於自己的,所以自己懂就好。夜章這個主題我是沒有做moodboard,我覺得自己有把握不歪路子,說到底是懶。。。能做最好都做一下,很簡單的PPT,寫下設計的風格關鍵詞+找來的圖片案例、顏色設定+找來的顏色圖片、形狀材質設定+找來相關材質圖片。

元素要統一,比如最簡單的光從左邊打過來,我所有圖標高光一致,投影方向一致。

4、草圖:開始草圖的繪製,我的草圖是這樣的。。。

認真點的同學,例如以前在校時候的我是這樣畫草圖的:

紙上的草圖其實在轉成PS繪製的時候,很多地方有可能會有較大調整,反正王合適的效果去調整就可以。

5、PS或者任何你能駕馭的工具:軟體繪製!這個可以去看我的專欄第一篇,圖標繪製技法小筆記分享 - yongdian - 知乎專欄

6、視覺包裝:這個我沒好好研究過,而且這次的主題設計我沒想要發在專業的設計網站,所以沒好好排排版,大家在一開始如果一頭霧水,可以看看站酷上優秀的作品獲獎者怎麼做的!

以下是我繪製的圖標展示,有人會說識別性差了點,這個還是老話,主題設計中有很多設定的分享,如果以趣味性為主,勢必會犧牲很多識別性,如果真的能做到兼顧,那再好不過,但是除了幾個經典的圖標,想必絕大多數圖標會比較困難

有空記一下插畫速寫——針管筆的使用技法,一共有九種繪製技法,因為針管筆的攜帶使用方便,所以我近一年用針管筆畫了不少速寫,已經有點愛上這工具了。

另外也很想玩下版刻,今年會嘗試下,立下flag,不拖延。


推薦閱讀:

設計乾貨 | 牆裂推薦的設計師靈感、素材庫神器——Eagle
公開課 | 你的職業設計生涯從學會這節課開始
聽說設計師要會C4D,你有什麼想說的?
Sketch 自動布局插件介紹
4步完成APP的LOGO設計方法。

TAG:用户界面设计 | UI设计入门 | UI设计师 |