【致:準備入行成為UIUX設計的你】

UI/UX 設計師入門嘅準備功夫?

香港提供相關資格及學歷的大專院校:

  • PolyU Design: Communication Design (BA)
  • PolyU Design: Interactive Media (BA)
  • School of Creative Media (Bsc)
  • HKDI創意媒體(網頁及手機應用程式設計)高級文憑
  • HKDI創意媒體(互動媒體)高級文憑
  • HKDI 視覺傳意高級文憑
  • IVE 多媒體創作高級文憑(流動媒體)

logo
當然,以上只是簡單提及了幾個香港現有提供相關知識的課程,如有缺漏,歡迎補充。 除了在大專院校可以學到相關知識外,其實UIUX也是可以自修的。 只要你具備以下的條件,你也可以成為UIUX 設計師。

...

平面設計與UI設計不可或缺

UI設計和平面設計一樣,都是需要以下基本要求,美感及design sense。

    • 顏色:基本原理(對比色、暖色系和冷色系等),色彩心理學

color

    • 排版:UI 的版面設計和排版一樣,都有Flexbox, Gird 可排。當中亦包括: Hierarchy, spaceing, column etc.

6-column-grid-for-iphone-300x225
Grid

    • 字型:選擇或設計合適的字型,確保文字可讀性。 當中包括: display type, text type , serif, san serif etc.

font

    • 擁有基本美學知識及培養美感:先認識不同的藝術風格,例如:Kitsch, Art deco 等。參考有關設計的書籍和多看不同設計師的作品,思考為何要使用這種設計風格、排版及分析哪個位做得好與不好。

artdeco

    • 一致性:設計風格要保持一致性,才不會看上去很雜亂、東一忽西忽。

style

...

除了需要設計的基本要求,也需要具備以下的UI/UX 基礎知識及設計流程。

Design Concept: APP 的主要目的, 用戶如何使用等。

    • User Journey 使用者旅程圖: 將使用者與某件產品或服務進行互動時的體驗分階段呈現出來,讓旅程中的每一個時刻都可接受個別評估和改善。

UserJourney
https://vide.tw/7758/

    • Wireframe: Wireframe 是一種低保真度的設計原型,在去除所有視覺設計細節之下,進行頁面結構、功能、內容規劃。

https://blog.akanelee.me/posts/159788-what-is-wireframe/ wireframe

    • Stylish: 決定APP的設計,顏色,Typeface, Fonts size, spacing & button 的設計。這樣可以有助你的團隊更清楚及更易統一。現在,Sketch 也有類似的plug-in,大家可以Google找找看。

stylish

    • Mockup: Mockup 也是靜態的,不會動、不能被操作。

mockup
1)https://designtongue.me/%E8%A8%AD%E8%A8%88%E5%B8%AB%E5%BF%85%E6%87%82-wireframe-prototype-%E7%9A%84%E4%B8%8D%E5%90%8C/
2) https://blog.akanelee.me/posts/276909-beginners-of-prototype/

    • Prototype 擬真來呈現最終使用者介面的方法。運用原型的目的即是模擬使用者與介面之間的互動,例如某按鈕按下後會出現的操作方式與呈現等。簡單來說,就是模擬一個產品完整的體驗。

proto
https://designtongue.me/%E8%A8%AD%E8%A8%88%E5%B8%AB%E5%BF%85%E6%87%82-wireframe-prototype-%E7%9A%84%E4%B8%8D%E5%90%8C/

    • User Testing: 找一些試用者試用你的APP及指出需要改善、不流暢的地方。

User Test

...

更新自己的資料庫除了擁有基本的知識外,也要多看別人的作品,書本及有關UIUX的文章更新自己的資料庫。

以下網站都十分有參考價值,也有不少熱心的UIUX設計師綜合了一些有用的網話,大家可以參考一下。除了欣賞別人的好處,也要思考別人為什麼要使用這款設計style, layout等。
https://medium.com/@minaliou/%E6%84%BC%E5%85%A5-%E5%A6%82%E4%BD%95%E6%88%90%E7%82%BA%E4%B8%80%E5%80%8B-ui-designer-45b8fabeb22f

...

UIUX 工具:

自學工具也是十分重要,大家可以在YouTube及Google也很容易找到教學。

Sketch : 非常輕用又易容學的介面設計軟體。 也比photoshop,AI等更方便,也不會有「甩link」的情況發生,共同協作時十分方便。

Figma : 與Sketch十分相似,但比sketch多了「實時協作」,還有「版本控制」,「矢量網絡」,全平台適配等的特性。如果你曾經使用過Sketch,那麼上手Figma幾乎沒有難度。
https://www.figma.com/

Balsamiq : 能夠協助你快速繪畫wireframe及提供不同原型的工具。也支援Windows平台、Mac OS,還是Linux都能使用。這個軟件使你更容易和你的客人溝通了解你的想法。
https://free.com.tw/balsamiq-mockups/

Adobe XD : 整體功能的完備度還沒有像 Sketch 齊全,像剝弱版的sketch。

Marvel App : 線上製作 Prototype 工具,能輕鬆建立互動demo的工具。
https://medium.com/ucdtw/prototype-tools-marvel-protoio-8e0bc3fccd36

Invision App : Prototyping 工具 查看更多有關Prototyping 工具選擇與心得:
https://medium.com/@king40105/prototyping-%E5%B7%A5%E5%85%B7%E9%81%B8%E6%93%87%E8%88%87%E5%BF%83%E5%BE%97-b9e5cf44b412

...

有關UIUX一些小問題:

Q: 有人提出,成為UI設計師要懂得coding嗎?
A: 我認為不需要完全懂得,但基本的CSS, Html 等也要具備,讓你更容易和Developer溝通。

如果你還是學生,趁還有時間找到幾份intern試一試UIUX是不是適合你未來的工作吧!