LCCNET 聯成電腦

菜鳥救星

m_nav_line m_nav_line

HOT影片

m_nav_line m_nav_line

聯成電腦設計好文分享:換條路走(下)-如何自學UI設計

icon_fb icon_twitter icon_google LINE it!
article_main_img

Photo by Tyler Franta on Unsplash

文、Lin Simon

 

 

 

承接上一篇「換條路走:從平面設計到介面設計」,既然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,做好元件管理非常重要,可以省下不少塗塗改改的時間。

 

 

📣 小工商:如果你還不知道Sketch這個設計工具,可以參考我所開設的線上課程,介紹影片會稍微提到UI的基礎概念以及這個軟體的優勢。

 

 

 

 

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

 

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

 

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

 

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

 

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

 

文章轉載自「Medium」,已取得作者授權同意,原文為:換條路走(下):如何自學UI設計​

 

 

 

 

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

A

本網站使用相關網站技術以確保使用者獲得最佳體驗,通過使用我們的網站,您確認並同意本網站的隱私權政策。欲了解詳情,請參閱 隱私權政策