UI

沒有設計背景都可以做 UI 設計 ? 三個提升 UI 能力的方法!

沒有設計背景都可以做 UI 設計 ? 三個提升 UI 能力的方法!
沒有設計背景都可以做 UI 設計 ? 三個提升 UI 能力的方法!
In: UI
本篇原文(標題:如何提升 UI 設計能力?實務篇)刊登於女人迷設計實驗室 PHD Lab,由女人迷網站設計師 Merci 所著並授權轉載。

此篇文章適合:想轉行做 UI 設計 ,但 UI 經驗少、想累積/ 提升 UI 能力的設計師。如果你已經累積了許多 UI 實戰經驗,也很歡迎你與我們分享。

會有這篇,是因為有人請教我如何提升 UI 設計能力。提問者在學校有一點點使用者研究經驗,想要提升更多 UI 實戰經驗、累積作品集。這裏不談 UI/ UX 設計師的職涯發展與工作景況,只聚焦於 UI 設計。

他的痛點有:

  • 看過網路上的教學文或相關書籍等資源,還是不太知道怎麼下手
  • 不是設計背景,身邊沒有有相關經驗的人可以請教、回饋
  • 因為沒有足夠經驗,目前較難直接進入 UIUX 職場環境,無法得到職場前輩的回饋

我也不是設計背景,曾經遇到跟他一樣的問題,當時甚至沒有現在這麼豐富的教學資源。此次梳理我摸索過來的經驗,希望可以幫助一些想提升 UI 能力、但不知如何起步的設計師。

我的背景

我大學是美術系西畫組背景,就是拿著畫筆畫油畫,畢業展必須要展出油畫作品的藝術系學生。雖然對於設計有興趣所以旁修設計組的課,但唯一與 UI 有沾上邊的大概是網頁設計課,不過網頁設計教的是用 dreamweaver 刻出一個網頁 (瞬間暴露年齡)。

現在的環境,免費的 UI 教學資源真的非常多,也有許多付費教學資源,校園裡也有 UI 設計課,而我當時是如何從完全不懂設計的藝術系學生,到成為一個 UI 設計師?

設計師 Anu 經驗談說:實際累積作品,沒錯!但要如何提升 UI 能力,累積好作品呢?

我的學習方式:研讀吸收、實地練習、回饋分析,不斷循環

我認為要累積好作品,「研讀吸收、實作、回饋分析」這三步缺一不可。

如果你選擇付費課程學習,通常這三個部分都有在課程規劃裡,能夠系統性的循序漸進學習。若有預算,其實可以投資自己上課。

如果你想自學,以下是我過往的經驗,希望寫得足夠具體,能夠鼓勵一些不知道怎麼進行的人,踏出第一步:

一、 研讀吸收:建立專業知識素養

重點在於建立所有跟設計、UI 有關的專業知識素養,因應想要增進的 UI 能力,要看的資源都不同。

因爲網路上有很多人整理資源了,我推薦這一篇「如何成為一個 UI Designer?」,裡面真的是超級精華!但如果你問 App/ Web UI 設計的基本,進入實作前,建議下列名詞與原則一定要理解透徹。

  • 設計 App:google material design/ iOS human interface guidelines
  • 設計網頁:RWD (Responsive Web Design)、breaking points 原則與概念

二、 實地練習:從做中學熟悉工具、真正產出

看完下一步,就是捲起袖子實作了。空有好素養與濃厚知識,做不出好 UI 的話只是紙上談兵。這裡也不談各種技術軟體,UI 設計可以從學會 sketch 開始,再搭配學習使用 prototype 工具。

職場上直接面對案子就是很好的實作,如果沒有機會怎麼辦?就是自己創造囉!

這裡僅列兩個方向:

  1. 依據 daily UI 100 主題直接跟著每日主題實際刻 UI:優點有不用憑空想題目、可以觀摩很多其他設計師的作品、累積多元 UI 作品,缺點是若每天主題設計單一畫面,較難累積整套系統概念。
  2. UI-demo

  3. 找市面上你有興趣的上線產品,嘗試 redesign 一整套:優點是可以練習設計系統,缺點是門檻比較高 (需同時具備 UX 研究、規劃能力)、要產出完整的一套作品花時較長。

如果以上兩個方向,對某些人來說仍然困難 (打開 sketch 來腦袋就是一片空白),那麼就從「模仿」開始!模仿不是為了抄襲,而是在學習過程中觀察好的 UI 設計案例、拆解它的規則:哪裡好、為什麼好,吸收成為自己的基本專業素養,先有基本框架,你未來才有可能打破他。

三、 回饋分析:思考如何可以更好?

實作完有產出還沒結束,若想成長、突破盲點,就要分析你的產出「哪裡好,哪裡可以更好」。

怎麼分析呢?

  1. 從專業設計知識去分析:例如易讀性、易辨性、UI 上建議最小的按鈕大小等經驗法則,就會牽涉到 UI 排版上的字體大小、顏色使用等等,當你了解越多,你就有辦法分析一個 UI 作品的好與不好。
  2. 多方具體對照分析:有兩種方式, 第一是「不同版本對照」:例如 daily UI,網路上有很多人一起做同樣主題,做完後,可以與其他人的作品對照,看看與自己的作品有甚麼差異。第二是「不同人回饋」的對照:請教有經驗設計師的回饋,或是到設計師社群邀請大家提供建議!可以討論的社群有很多,我自己推薦: UI Club (FB 社團)Taiwan UIUX designer (FB 社團)
  3. 進行簡易 UX 調查,直接找使用者測試回饋:UI 設計是引導使用者完成最重要的任務,去看你的設計,是否能讓使用者達成你的預設任務,你就會理解目前 UI 設計上,哪裡讓使用者困惑,哪裡使用者很清楚。

總結

以上是個不間斷的循環,不只是我個人,也是女人迷設計實驗室 phd lab 會運用到的學習方式,設計師持續研讀分享不同的知識、工作產出後邀請不同的設計師彼此回饋,做中學、學中覺,幫助彼此更好。

最後,女人迷目前的設計師剛好也全都不是設計背景呢!因為我們有不同的成長背景,學習成為設計師的心路歷程與學習路徑不完全相同 (當然有些也有異曲同工之妙),歡迎你多方閱讀,最後找到最適合你的方法。

謝謝有耐心看到這裡的你,謝謝想要透過設計讓世界更美好的你。

我們一起努力:)

本篇原文(標題:如何提升 UI 設計能力?實務篇)刊登於女人迷設計實驗室 PHD Lab,由女人迷網站設計師 Merci 所著並授權轉載。
作者簡介:女人迷設計實驗室 Womany PHD Lab,我們是打造女人迷產品的設計實驗室,PHD = People Happy Design!讓我們一起設計讓人快樂的服務和作品,用設計改變世界!女人迷是臺灣第一家以性別觀點為主軸的網路媒體社群,關注女人全方位議題,從職場發展、旅行玩樂、時尚彩妝、生活風格到愛性情慾,堅持走心、給力,連結世界多元觀點!
作者
AppCoda 編輯團隊
此文章為客座或轉載文章,由作者授權刊登,AppCoda編輯團隊編輯。有關文章詳情,請參考文首或文末的簡介。
評論
更多來自 AppCoda 中文版
利用 EarlGrey 做 UI Test 強化你的 UI 測試流程
UI

利用 EarlGrey 做 UI Test 強化你的 UI 測試流程

在軟體的開發過程中,我們一定會需要測試我們做出來的東西是不是運作正常。以手機開發為例,我們通常都是咻咻咻地寫好一堆程式之後,把它丟到手機或模擬器上面執行,然後東點一點西點一點,看看是不是一切都運作正常。這樣的流程雖然運作正常,但是卻非常花時間,而且很容易漏掉該測試的項目。如果要簡化這個流程,你就會需要電腦來幫你做自動化測試 (Test Automation)。 自動化測試有分很多類型,目前大家最常使用的分類法是用 Mike Cohn 所提出來的測試金字塔 (Test
很好! 你已成功註冊。
歡迎回來! 你已成功登入。
你已成功訂閱 AppCoda 中文版 電子報。
你的連結已失效。
成功! 請檢查你的電子郵件以獲取用於登入的連結。
好! 你的付費資料已更新。
你的付費方式並未更新。