換條路走(下):如何自學UI設計

關於找到職涯的下一步

產品設計
工作經驗

Simon Lin

Lead Product Designer@Canva

閱讀 7 分鐘

2016年10月5日

承接上一篇「換條路走:從平面設計到介面設計」,既然UI設計是目前最熱門的職業之一,這次就來和大家聊聊如何自學UI設計, 以及該如何跨出第一步 (以下為個人經驗,僅供參考)。

我先假設各位都是想要轉行或是剛畢業的人,想要進入UI設計的領域但可能還不知其所以,所以我們可以先瞭解一下UI設計師的職責範疇,最簡單來說就是:產出完整的介面設計稿然後交給工程師做開發。

UI設計師不會是最後把產品變出來的那個人,我們只能確保產品的樣子不會歪歪斜斜、有正確的頁面流程、不會讓user找不到那顆最重要的按鈕。

當然實際工作內容依據產業或公司屬性的不同而有所變化,有些UI設計師只要專注在視覺呈現,有些必須負責前期的流程規劃到視覺稿甚至互動原型,這和資源或團隊都有關係,所以我們就以UI設計師最需要的基本能力開始講起。

你有可能是以下三種類型的人:

  1. 完全沒接觸過設計
  2. 碰過一點設計或是在相關產業和設計師一起工作過
  3. 設計相關背景

我想說的是,有沒有學過設計,對於學習曲線來說可能會有一點不同,但其實影響不大(我也認識許多非設計背景的UI設計師),差別只在於對視覺上的敏銳度可能較低一點,所以要多花一點時間培養所謂的「設計眼」,觀念上和工作流程都是必須重新學習的。

至於要怎麼開始呢?

就像錘子科技的視覺設計總監羅子雄在TED的演講「如何成為一名優秀的設計師」中所提到的一樣,學習設計的過程不外三件事:看、做、想,這邊我也借用他的觀點,學UI其實也是一樣的道理,所以若要達到一個入門就業的水準,需要具備什麼樣的條件呢?

1.基本的美感 (平面設計師可跳過:P)

雖然上一篇提到介面設計更重視的是「使用體驗」,但我相信大部分的人應該都會在意第一眼的視覺印象,一個不好看的介面基本上也很難在一開始引起使用者的興趣,這邊指的「不好看」是在配色的協調或是閱讀性的編排上讓使用者感到不適,而美感的養成需要長時間的訓練,初期的的建議可以在設計平台上(DribbbleBehancePinterest)看「大量」優秀設計師的作品,甚至先從模仿開始,慢慢的去拆解這些作品背後的設計邏輯,也可以參加像是DaliyUI這樣的挑戰磨練自己,之後有機會再寫一篇分享「美感是如何練成的」。

2.理解設計規範(Guidelines)

與其說是規範,應該說是設計語言。在做UI時,根據不同平台有其適合的設計語言,例如iOS系統的人機介面指南(Human Interface Guidelines),Andriod系統有Google所發佈的Material Design,做網頁也要了解基本的網格系統和響應式網頁等等,理解這些設計語言可以幫助我們在平台上建立一致的使用體驗,也可以幫助我們在開發端的溝通上更加順暢,所以這就像練功的基本功一樣,必須熟悉了解。

3.動手實作

今天如果你要開一間咖啡廳,至少要會做咖啡吧?了解設計規範之後,再來就是動手做,一開始可以先從手邊有的介面來做練習,模仿刻出一個一模一樣的介面,甚至可以用一些原型(prototype)工具把你的設計稿串起來。你也需要了解各種裝置及解析度設計時的差異、如何匯出檔案交付工程師等等,過程中大量的爬文是少不了的,自學的過程中常常因為沒人交流所以無法驗證自己的流程是否正確,不過我相信這些都是可以在未來靠經驗彌補的,一開始方法錯了沒關係(被RD罵幾次就懂了XD),重要的是花時間實作練習。

4. 提高工作效率

拜科技所賜,UI設計工具越來越多,大部分的工具提供了基本的功能,但要有效率的工作就不是那麼容易的事情,熟練工具的快捷鍵是基本功,接著是活用工具以及思考怎麼優化自己的流程,UI設計常常是牽一髮動全身的事情,當你設計了好幾十個頁面,這時突然要改一個按鈕的顏色或是字體怎麼辦?一個一個改實在太傷神了,如果有用Sketch的朋友,請愛用 Symbol 和 Share Style,做好元件管理非常重要,可以省下不少塗塗改改的時間。

除此之外你還可以做什麼?

下載App store排行榜上的App或是你覺得好用的App,認真思考這些App的交互流程是如何編排,也可以截圖下來研究,一個好的UI/UX設計其實是會讓你感受不到它的存在的,你可以很快找到你需要的「內容」和「目的地」,持續的做這件事,覺得不好用的App就刪掉,認真記錄這些App的優缺點避免自己犯相同的錯誤,同時也能讓自己的思路更加清晰。

當然,你也可以做一些「假專案」,把你心中的點子實際做成一組介面,有時間的話可以從架構開始思考,沒時間的話直接做視覺吧,把腦海中想像的畫面做出來,說不定哪天遇到一個工程師就能真正把這個點子實現了呢!如果沒什麼想法,Re-design也是個好選擇,市場上有不少UI設計不良的App,尤其公家單位的XD,如果可以把他們Re-design變成一個好用又好看的產品,應該會滿有成就感的吧?

最後,找工作前可能還是需要準備一些UI作品,這邊要提醒一點的是,作品集重質不重量,不需要很多,不要放太多跟UI設計無關的東西,最好是有一兩個比較完整的作品,有辦法清楚闡述你的設計理念,最好表現出你對UI設計無比的熱情,當你具備基本觀念加上一些作品展示,相信你應該已經可以出門找UI設計相關工作了,當你正式踏入UI設計產業,需要精進的就不只是眼睛看得到的東西了,而是更關心使用者如何在你的介面中自在的遊走了。

以上是自己小小的心得,希望可以幫助到一些想轉換跑道的朋友:D

2021 熱門線上課程

想成為 UI/UX 產品設計師嗎?歡迎加入 Figma 實戰課程一起學習成長!

我開設的實戰課程將透過扎實的理論基礎和實作練習,幫助設計師快速掌握求職所需的技能並找到職涯的下一步。

👀 想收到最新文章通知以及產品設計、UI/UX 相關資訊嗎?

我將與你分享我關注的資訊、喜歡的文章、設計資源和工具等內容,歡迎訂閱!
感謝訂閱 🙏,期待之後與你分享更多訊息!
糟糕!系統在送出訊息的過程中好像出了錯,請試著重新傳送你的訊息,謝謝!