文、Lin Simon

article_main_img

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.基本的美感 (平面設計師可跳過: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,做好元件管理非常重要,可以省下不少塗塗改改的時間。

 

除此之外還能夠做甚麼呢?想轉換跑道的朋友,來看看作者分享的心路歷程吧!👉 我想觀看全文

 

 

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

arrow
arrow

    聯成電腦 發表在 痞客邦 留言(0) 人氣()