〖Untitled 未命名#1〗如何成為 UI 設計師?(下集)feat.街口支付資深 UI 設計師 Rei

欸對了 Rei 自己是用 iPhone
嗎對我自己是使用 Apple 的Xs MAX
啦哦 欸滿新的噢裏面沒有去呢我覺得很重據我可靠消息指出知名金融支付公司內部開發的時候好像是以滿注重 iOS 使用者的體驗對因為我們老闆是使用
iOS哈 這可以講嗎對 其實就是因為老闆他在看這些這些產品的時候他一定會用他手機去看嘛哦比較方便但就是我們會針對 iOS
可能在設計的時候會比較多細節會顧慮到但也不是說 Android 沒有顧慮到Android 其實跟
iOS 滿像的就是我們設計起來其實整體的細節都顧慮到瞭解 哦只是剛好老闆拿的是那個手機所以我也跟老闆拿一樣的手機這樣我比較好設計那個尺寸是一樣的對這樣我比較不會他為什麼一直在 size
跟他看到的不一樣這樣他會開始覺得是 size 錯還是畫太小 畫太大這樣滿聰明的耶那公司應該所有設計師都要跟老闆拿一樣的手機盡量啦
但是我們有有測試團隊嘛 他們有不同 size 的尺寸嗯那設計的話會以每次老闆要看的會以老闆的手機尺寸為標準但是這也是個一個設計小提醒拉就是如果說你們今天的需求會過到老闆
或過到客戶你要一定要先瞭解他們他們的客戶或老闆拿了什麼手機啊不然他看到的設計跟你設計稿有落差的時候他會覺得誒 為什麼當時的設計稿跟我最終產品是不一樣的那你就要去解釋瞭解瞭解那在一般我們在設計 iOS App
的時候是會按照 Apple他們官方出的 Guideline 來做設計嘛通常我們會遵循所謂的
ㄜ 官方的一個 Guideline 嘛因為畢竟大部分的時候所有的設計還是以官方的手機的一個體驗為主所以我們當然會以盡量去追尋他們
Guideline瞭解瞭解我們現在觀眾我猜應該蠻多都是剛踏入 UI/UX 領域的朋友那 Rei
這邊可以請 Rei 來帶大家看一下一般設計師會怎麼樣來看我們這個Apple iOS
的 Guideline 嗎OK基本上設計師這份 Guideline就是官方提供的
Guideline 他其實寫的很完整那基本上你可以把整個官方的 Guideline 叫Human
Interface Guidelines視為他們的一個設計語言那基本上我們往下滑我們會看到所謂的 Design Principle那往上看一下這些細節他第一個講的就是美感(Aesthetic
Integrity)然後基本上所以我講的 UI 設計師必須要 就是我看的標準
就是第一個我就是需要他有一個最簡單的美感那其他後面的東西仔細看 Consistency 一致性噢下面的直接可以直接操作就直覺、回饋或是隱喻、User Control這些東西其實都是後面我們可以去控制的事情我可以去訓練一個設計師他的設計符合這些設計的一個規範的一個一個一個規則那但是美感這件事情就是我一開始會先要求的我會希望他有一定的美感一個設計師他自己架的網站那這邊它會有一個簡易版其實介面設計你最主要還是你要知道他怎麼畫那有時候那麼多細節你可能需要花比較長的時間去吸收那些所謂的「精神性的內容」那真正怎麼畫的話我覺得這份文件就寫的很詳細的往下滑我們就可以看到他會跟你講
噢 解像度有哪些畫面我們要選擇哪些解像度來畫其實一開始就跟你講是用哪些 Artboard就是我們講的畫板來畫然後再往下滑我們會看到一些噢簡單介紹什麼是 px
或是 pt 這些單位的東西但這都是 for
iOS 因為這是 iOS 的一個規範嘛然後再往下滑的話
慢慢地他就會開始跟你講說要出然後再往下的話就會給你提到怎麼畫元件、元件的 size再往下有沒有 這些 App
的佈局有沒有 status barnavagation bar,
layout, 它的 margin 怎麽抓整個畫面的
size 多高都會講的很詳細然後再往下就是講他的 app icon
的畫法app icon 就是指說今天我的 icon
顯示在我的手機上 我要出哪些尺寸給工程師吼這樣一路上看下來然後到下面會有個 UI elements我直接點
UI elements厚status bar 然後你把你的滑鼠移上去
啊你就看到原來它大概多高多寬哦這邊都會很詳細的跟你說明那你其實就可以照着這樣子規範去你的介面 哦所以介面設計師首先就是瞭解你這些產品它的一些元件的尺寸怎麼去做出來讓工程師可以看到這些東西所以一開始要瞭解規範的地方是在這邊除了精神性的東西啦精神性的東西就是你要把這些東西銘記在心你今天的操作是不是符合直覺阿是不是有足夠的回饋噢 這件事就是你在做產品的時候必須同時在顧慮到的事情瞭解誒 我想到我那次
你記得我們第一次見面是我從台中來台北找你是吧 對在街口樓下那時候是在台中我們家 Monospace想要發起一個Daily UI
的挑戰計劃然後那時候發現上網爬文的時候就發現其實 Rei 已經早在 2015
年吧就已經發起過一樣的活動企劃因為那時候一股熱血啊那時其實候我也很忙那我不知道為什麼就是 阿想說還那麼多設計師的朋友然後剛好國外有人在做 Daily UI
的活動然後剛好又有個現成的題目的一個一個一個一個算是個網站吧就會丟題目給你嘛那就發起了一個這樣子的活動了其實過程就是大概一百天的題目嘛那其實我也是花了很多時間也撐得很辛苦啊就是每天抓一個題目然後我下班馬上就要去想這個題目在上班的時候就偷想你今天畫什麼東西然後每天都要發文對因為其實畫到後面有一點點枯竭就是你不知道要怎麼去做這個題目也有時候題目的範圍很廣所以你很難去收斂這個題目所以到最後我也才大概畫出 80 幾題吧有沒有完全完成拉因為有些像是什麼連續八十幾天嗎應該說間間斷斷 有時候我一天就做五個因為你真的沒有時間因為要上班嘛你
你想想這些東西去花時間然後有時候也會卡關就是有時候在視覺裏表現不到你要表現的一些特徵的時候你就會卡在那邊所以不是也不是說每天都真的有辦法去做成一個完整的 UI那累積起來大概是八十幾個啦那現在看我現在回頭再看這些作品但我覺得還是就是以我現在的標準來看我覺得還有很多地方都需要做調整所以你看美感就是會順着時間一直提升所以這也是在 Daily UI
裏面我發現到這個很有趣的點我們這邊有保留那時候大概幾年前 五年前嗎Rei 挑戰 Daily
UI 的一個作品集我有找到這網頁 ㄏㄏ噢對現在看我也覺得 有很多地方算
黑歷史也不是說黑歷史啦就是我現在看我覺得很多地方可以可以可以再改善啦而且這是比較舊的愈上面的作品會比較它就是從第一天開始然後一直到跳號就是我沒有挑戰到然後然後基本愈往上會發現作品是愈偏視覺就是它比較少是真實的 UI哼對於我覺得後面其實 UI 其實就是滿侷限了所以我就開始挑戰一些視覺的東西然後去調色然後配出一些比較美的顏色
這樣子瞭解 所以 Daily UI其實是比較偏向是軟件的熟稔度然後跟視覺上的一些美感操作對就是你可以選擇說你要讓你的軟件操作更熟練那你不知道怎麼練習呢就從
Daily UI 開始如果說你想挑戰是你對於介面的規範什麼的那你就可以從規範下去設計你的 Daily
UI 的作品哇五年了耶五年前的看自己五年前 UI 作品應該滿
滿恥的噢對啊滿恥的 就覺得怎麼會這樣 XD但有些顏色我覺得還不錯啦現在看是覺得還可以代表說那時候是真的有練習到一些顏色 配色的技巧瞭解瞭解對啊2015年然後今天那次是算台灣的第一次然後我在2018年那時候線上挑戰好像也幾百個人參加吧好像是
2018 的時候然後這算是第二我那個算第二次吧所以聽說最近 Rei 有想要再重新再發起一個挑戰嗎在
2020 年的今天誒我們直接切換到臉書社團的介面好像講會比較清楚一點點是直接搜尋 UI Club
就可以加入了嘛都本來叫 Daily UI後來改名叫 UI
Club因為後來比較少 Daily UI 嘛所以我想說在這個把它轉成叫
UI Club 那延續這其實大家如果說有看過 Fight
Club (鬥陣俱樂部) 的話應該知道就延續那種 Club
的那種精神你說包含整個標準字的感覺是你最喜歡的電影嗎算是一部我滿喜歡的 滿經典的一部電影瞭解瞭解 哦然後就是進入社團之後是大概一次多久 po
一次貼文呀其實我現在大概禮拜每個禮拜日 跟禮拜四會 po 文啦週日跟週四一週兩次
po 文這樣子因為怕大家支持不住哈好啦 時間差不多了今天非常感謝 Rei
來參加我們這個 unknown(未命名)還沒取名字的節目那其實我自己也是沒有主持過的經驗然後也是第一次做這樣的節目那就是還請 Rei 跟觀眾們就是多多包涵那有空的話可以在影片下面留言說一些想法或是說下次希望聽到什麼樣的主題跟我說好那
我要回家上字幕去惹大家下次見啦 掰掰噢 謝謝 ㄏㄏ阿~錄完了(傳說對決
)貂蟬:荊棘的冰花將盛開在戰⋯冰屎尼~沒魔沒魔沒魔噢太電了吧好沒電了 我就到這 ㄏㄏ中離