設計好文分享：換條路走(下)－如何自學UI設計

berylgobby

文、Lin Simon

Photo by Tyler Franta on Unsplash




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


作者簡介｜Simon
是一名 UX 設計師，目前正在東京的外商工作，喜歡分享觀點與交流並試著從小事開始創造價值。創辦了AAPD - As A Product Designer，關注於UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等等，希望分享產品設計師所需要的各種資訊，並且致力在平台上創造更多的交流與互動望，降低每位設計師成長的過程中所遇到的阻礙。




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

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

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


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

1. 完全沒接觸過設計

2. 碰過一點設計或是在相關產業和設計師一起工作過

3. 設計相關背景

---

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



至於要怎麼開始呢？

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


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


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


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


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


▍除此之外，你還可以做什麼呢？►我想觀看全文。




痞客邦Blog：http://lccnetvip.pixnet.net/blog
FB粉絲團：https://www.facebook.com/lccnetzone
菜鳥救星：https://www.facebook.com/greensn0w