講座筆記|學校裡沒教的 UI 設計課
深入淺出介面設計講座

UI,userinterface,介面,使用者介面

自從我深入了解 UI 設計後想成為 UI 設計師,請問我應該從何開始?

成為 UI 設計師後,其實我收到許多這樣的問題,不管是同屆畢業的同學、目前還在就讀大學的學弟妹或已經出社會一段時間的大學長姐,大家的問題其實都是出自同一個出發點,就是「不知道該從何開始?」。

我想成為 UI 設計師,但我不知道應該從何開始?是應該先培養自己的美感、多做案例分析,或是一頭栽進 DailyUI 開始做一百份設計稿?

這邊 Chris 想先請大家不要緊張,每個人剛開始起步的時候都是手足無措的,就算是魯夫也沒有事先就當過海賊王啊!

即便如此,每個人一生中都還是應該要遇到屬於他的紅髮傑克來指點迷津。

UI,userinterface,介面,使用者介面
講座主題:【深入淺出介面設計-那些學校裏面沒有開的課程】
實驗遊戲展-重組遊戲 DNA 活動講座
主講人|Fourdesire 共同創辦人與設計總監張閔傑
講座地點|府中15新北市動畫故事館
主持人|策展人 李俊逸
講者介紹|張閔傑
介面與視覺設計師、Fourdesire 共同創辦人與設計總監,擅長從設計與視覺的角度規劃並詮釋產品。
參與並帶領團隊完成《植物保姆》《walkr》《記帳城市》《植物保姆2》等專案,完成從無到有的設計過程。
過程中包含品牌、介面、行銷等各種不同產品切入點的設計。
(以上文字資訊取自accupass售票活動頁面)

講座前言|如何成為一個持續成長的設計師?

1.觀察

多去觀察身邊的東西與正在發生的事情,深入思考這個東西為什麼長這樣?是否受到什麼因素影響? (當地文化、政策等無形的東西)。

而我們應該如何透過設計的力量讓這些被看見的問題變得更好?

UI,userinterface,介面,使用者介面

案例分享|台北生活景觀改造計畫-台電變電箱美化 before

UI,userinterface,介面,使用者介面

案例分享|台北生活景觀改造計畫-台電變電箱美化 after

吸收靈感的網站、藝術家的交流平台

這邊介紹一些可以吸收許多設計靈感的網站與平台,即便我們身在台灣,我們也可以透過這些平台來去吸收各種不同領域的設計新知。

UI,userinterface,介面,使用者介面

Behance:收錄的內容非常廣,從 App、網頁設計、插畫等都有。也因為與 Adobe CC 系列可以做連結上傳, 也成為許多設計師上傳作品的選擇。

Pinterest:可以順暢的釘選、蒐集並分類圖片。也因為所釘選的圖較多是設計師所選,圖片的品質也較高。

CGSociety 與 artstation:有許多場景設定、概念美術等等作品,也會有一些 3D 模組。適合想從事概念美術的人上來吸收新知。

Dribble:UI設計師的愛逛網站,因為是採邀請制,網頁中的作品品質都非常高。

sketchfab:可上傳 3D 模組,也可直接在網頁中 360 度翻轉模組檢視。

FWAAwwwards:定期蒐集優秀的網站設計案例,甚至會舉辦投票讓網友票選出最佳作品。

2.實踐

在學習軟體的時候建議以透過實例學習功能。

以實例去切入軟體的使用,比起一個功能一個功能去學習使用還要來得有效率。

UI,userinterface,介面,使用者介面

教你如何用漸層工具畫夕陽

UI,userinterface,介面,使用者介面

漸層網格工具做香蕉

3.思考

設計是解決問題的一個過程,每個設計背後都會有一個固定去遵循的脈絡,我們應該要透過思考去仔細深入的了解,是什麼樣的思維方式或條件讓這個設計作品變成這樣?

UI,userinterface,介面,使用者介面
UI,userinterface,介面,使用者介面

海報與海報設計背後的網格系統

UI,userinterface,介面,使用者介面

Icon 的漸層色應用-考慮到光的方向與天空等等所形塑的空間感

透過不斷地觀察、思考與實踐,就能讓自己慢慢知道應該要如何把自己的作品變得更好。

UI,userinterface,介面,使用者介面

不斷的思考 → 觀察 → 實踐

而在瀏覽作品時,也可以將喜歡的作品先儲存起來(推薦 pinterest 的插件,非常的方便),過一段時間再回來看自己收藏過的作品時,將會有不同的發現(可能是美感提升了、也可能是與過去的口味不同了)。

講座中場|什麼是介面設計?

一、什麼是 UI (User Interface)?

UI(User Interface)中文稱為使用者介面,以產品的角度來看,就是使用者實際接觸產品的部分,他們操作使用者介面的選單或指令,來運用背後的程式。

實務開發上則包含外觀、前端和互動設計等範疇。

(節錄自inside)

UI,userinterface,介面,使用者介面

智慧型手機介面

介面是使用者跟裝置互動的方式,也是視覺設計與互動設計的結合。
UI design is a combination of interaction and visual design.
-Dan saffer

UI 設計並不只是只需要去安排好視覺上的物件 (比如說按鈕、顏色等等),使用者互動後所會出現的互動反饋 (比如點擊後按鈕會變色) 也是 UI 設計裡面很重要的一個考量。

二、UI 設計裡面的專有名詞

1.預設用途 (affordance)

預設用途是物體的屬性和操作者能否使用、如何使用這個物體的相對關係。

UI,userinterface,介面,使用者介面

以圖中的門把為例,因為只有一面能拉開,所以只有拉開的一面有設置可拉動的門把。

UI,userinterface,介面,使用者介面

按鈕設計凸起來的感覺,讓人覺得能夠點擊。

UI,userinterface,介面,使用者介面

滑動並解鎖的提示

2.拇指區

隨著手機大小與每個人的手掌差異,steven hoober 在《手機介面設計》中研究指出了拇指區。

UI,userinterface,介面,使用者介面
UI,userinterface,介面,使用者介面

圖源

3.從平面/多媒體設計的角度去思考介面設計

(1) 結合排版系統的概念

可以利用「文字排印系統」的概念在 UI 設計上,許多使用者瀏覽網頁的方式其實是和閱讀紙本書籍的習慣是共通的,比如習慣由左往右閱讀等等。

UI,userinterface,介面,使用者介面

網格設計系統

(2) 讓視覺效果簡單明確

Apple TV 上的電影海報其實是有一定的規範,為了讓使用者能夠一眼看到電影的標題,他們選擇捨去所有演員名單、獎項等等資訊,讓整個介面能更一目瞭然。

UI,userinterface,介面,使用者介面
UI,userinterface,介面,使用者介面

「購買」的按鈕在網頁上通常會使用鮮明的顏色,目的是為了讓使用者馬上看到

UI,userinterface,介面,使用者介面

2018 年萬安演習的海報,能一眼就看到時間與日期。

(3) 一次只講(做)一件事情

一個畫面上只維持一個任務,像是Uber在登入時只需要填入手機號碼即可登入叫車,預設的情境是使用者在叫車時可能是比較需要當下立即執行的動作,於是開發團隊便將登入手續縮減至最簡單,方便使用者在初次登入時只要輸入幾項資訊便能叫車。

而ios系統的鬧鐘功能與計時器功能,主要的按鈕也有所不同。

鬧鐘功能預設貪睡時間,而計時器主要的按鈕則是停止。這些都是考慮到使用者在當下最需要的功能需求,而去做設計的。

UI,userinterface,介面,使用者介面
UI,userinterface,介面,使用者介面

ios 的計時器與鬧鐘的按鈕功能,根據使用者可能較需要的需求所做出的差異。 via

講座終場|我對介面設計有興趣,該怎麼準備比較好?

1.挖掘興趣

所有事情都可以去嘗試,尤其是從來沒有想/試過的

因為介面設計牽涉的範圍非常廣,建議可以多方去嘗試自己可能有興趣的事物。

包含心理學、工業設計等等都會是 UI 設計的範疇,一方面可以拓展自己的視野,一方面也能夠從許多不同的專業角度切入去思考 UI 設計。

大學生也可以利用旁聽、跨校選修等等方式來增廣見聞。

2.打磨基礎

利用觀察→實踐→思考的循環,幫自己打好設計的基礎。

3.開放你的領域

多接觸各種不同領域的專業,並多去聆聽其他人的想法

UI 設計其實是非常需要去聆聽使用者回饋,才能著手進行修改的專業。所以在大學這段期間,不妨多去聽聽其他領域、其他科系同學的想法,幫助自己建立同理心的思維模式。

4.別怕,大方地投履歷

被拒絕也沒關係,客氣的詢問對方原因。

大方地詢問實習機會,面試後被拒絕也不要氣餒,可以客氣有禮貌地詢問對方自己有沒有什麼地方可以再做改進?

投履歷的時候要注意的是,履歷上也盡量不要呈現能力量表之類的資訊(例如 AI 能力 90 分、XD 能力 78 分),因為沒有相對的評分標準,對人資來說其實也是一頭霧水。

UI,userinterface,介面,使用者介面

沒有相對比較標準的能力量表

即使這個講座,本意是給大學生或社會新鮮人,提供他們成為 UI 設計師路上的一些小建議。

但我認為這個講座的內容也非常適合想要轉職 UI 設計師、或已經成功成為 UI 設計師的你們,這場講座可以幫助你看清楚一些事情、一些或許可以再努力看看的方向。

加入書籤 (0)
關閉Please login

No account yet? Register

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *