最近有些高中、研究所老同學、朋友們看到我在六角學院,也會問到如何轉行 UI、前端,很高興你們來詢問,如果對於此領域有興趣的朋友都可以來聊聊。
在此我推薦一些資訊,可以協助你們(或大家)從網頁設計慢慢轉行到 UI、網頁設計師。不過首先,平面設計的觀念到這個領域不一定受用,有許多邏輯性的概念是不同的。如:單位尺寸、色彩、字體字型、資訊流觀念都還是要重新學習,許多東西簡化了,也有許多複雜化了,可以先花點時間從文件下手,將會少走冤枉路(當作睡前讀本也是不錯),不囉唆,先列出內容給大家參考:
Google Material Design(UI、網頁設計師)
由 Google 所推出的設計規範,也是近幾年 UI 規範的經典,雖然主要是介紹 Andriod 的設計介面(新的文件涵蓋內容更廣泛),但裡面許多觀念是非常直得學習的,而這些概念套用在 Web 很受用的,如色彩配置介紹了主色與次要色:
- 在畫面上的比重
- 透過次要色強調重要內容的方法
- 與互動之間的關係等等
圖片來自於 Material Design 官網
另外,我也很喜歡它介紹到關於圖層的部分,透過陰影的強弱來表示圖層之間的關係。陰影越強、代表兩個圖層的關係越弱(像是距離越遠)。
影片來自於 Material Design 官網,完整說明
這也是持續在更新的文件,很建議直接觀看官方所提供的英文版本。我過去也有翻譯 Material Design,不過注意,官方更新太快,所以許多內容已不適用。
Bootstrap 文件(網頁設計師)
Bootstrap 是網頁開發的現成框架,裡面許多元件都可以直接拿來用,如果打算進入 Web 開發領域的話,這份文件很值得閱讀,主要原因如下:
非常優秀的格線
圖片來自於 Bootstrap 官網
無論是平面設計或是網頁設計,都會有格線在做支撐,確保我們的畫面具有一定穩定性,這份文件有提到在網頁設計中的格線設計,不過如果覺得 Bootstrap 的文件太難懂,也可以參考:https://960.gs/。
元件設計適合 Web 運用
可以避免繪製畫面的時候,天馬行空的介面讓開發者難以執行,至少這些元件具有一定的規則,能夠確保它的可行性。
我們翻譯的繁體中文文件:http://bootstrap.hexschool.com/
工具使用(UI、網頁設計師)
工具上推薦使用 Sketch 或 Adobe XD,不建議使用熟悉的 Illustrator 及 Photoshop,因為後者在設計上比較偏向印刷使用,許多參數並無法呈現給開發者運用,這也會常常造成設計師與開發者溝通上的障礙,如果堅持使用,則有許多技術上需要克服。
平面轉 UI 會有經歷一些過程,首先應該 “先確保設計能被執行”,這也是大多設計師進入時會遇到的問題。一開始可能會先把平面設計的觀念帶過來如:色彩使用 CMYK、文字尺寸設定 pt、輸出解析度選擇 300dpi…等等,再經過一些練習後,還是會有執行上的問題,工程師無法諒解設計稿的錯誤,此時就能透過 “設計規範” 學習正確的觀念。
進階的 UI 設計師,能夠在工程師執行前就先預期結果,比如:流程動向、產品概念是否正確、資訊呈現是否符合預期…。而這個階段除了上述的基礎要打得穩外,更著要是實戰經驗的累積。
以上,也很歡迎同學們一起來討論 UI、網頁設計喔。