We're sunsetting PodQuest on 2025-07-28. Thank you for your support!
Export Podcast Subscriptions
cover of episode S4EP3 - 掌握成為資深設計師的硬實力 —揭密提升設計實力的訓練指南!

S4EP3 - 掌握成為資深設計師的硬實力 —揭密提升設計實力的訓練指南!

2024/3/17
logo of podcast No Shortcuts - 沒有快捷鍵

No Shortcuts - 沒有快捷鍵

AI Deep Dive AI Chapters Transcript
People
A
Annie
D
David
波士顿大学电气和计算机工程系教授,专注于澄清5G技术与COVID-19之间的误信息。
S
Simon
Topics
Simon 结合自身经历,阐述了资深设计师对设计细节的注重程度,以及如何通过观察优秀App和刻意练习来提升设计能力。他强调了在项目初期充分了解客户需求的重要性,以及与客户和团队成员有效沟通的重要性。 Annie 分享了早期职业生涯中遇到的不合理客户需求和预算大幅缩减的经历,并强调了阅读 Material Design 和 HIG 指南,学习规范的元件使用对新手设计师的重要性。她还分享了通过模仿优秀App的设计、参与Daily UI Challenge等练习来提升设计能力的经验。 David 则从成本角度分析了开发产品的价格,并分享了客户用尺测量设计稿间距、打印设计稿审查等奇葩经历。他强调了图层命名、间距规范、响应式设计等细节对设计品质和与工程师沟通的重要性,并建议设计师学习一些基本的代码知识,以便更好地与工程师沟通协作。他还分享了如何通过不断审视和更新自己的作品集来提升设计能力,以及如何通过收集信息、了解不同职能人员的立场来做出更合理的设计决策。 Simon 认为资深设计师更注重设计细节,例如线条、间距和阴影,并分享了如何通过模仿优秀App的设计、刻意练习等方式提升设计能力。他还强调了与客户和团队成员有效沟通的重要性,以及在项目初期充分了解客户需求的重要性。 Annie 强调了阅读设计规范(Material Design 和 HIG)以及通过练习来提升设计能力的重要性。她分享了自身经历,说明了新手设计师常犯的错误是元件误用,并建议新手设计师多练习,多观察优秀App的设计。 David 则从成本角度分析了开发产品的价格,并分享了客户用尺测量设计稿间距、打印设计稿审查等奇葩经历。他强调了图层命名、间距规范、响应式设计等细节对设计品质和与工程师沟通的重要性,并建议设计师学习一些基本的代码知识,以便更好地与工程师沟通协作。他还分享了如何通过不断审视和更新自己的作品集来提升设计能力,以及如何通过收集信息、了解不同职能人员的立场来做出更合理的设计决策。

Deep Dive

Chapters
從不合理的客戶需求到低於成本的預算,資深設計師們分享他們在職場上遇到的各種荒誕經歷,以及如何應對這些挑戰。
  • 不合理的客戶需求:天馬行空的需求、低預算、短時間內完成複雜任務等。
  • 職場困境:與客戶溝通的挑戰、加班、不合理的預算等。
  • 經驗分享:資深設計師分享他們在職場上遇到的各種挑戰和應對方法。

Shownotes Transcript

就是可能新手的時候覺得整個畫面看起來舒服順然後好看這樣 ok 但我現在就會很 care 一些小細節我都會開始越來越要求因為我覺得常常這些小東西你沒有去注意到的時候其實會影響蠻大的

大家好,欢迎收听 No Show Cup 没有快捷键我是主持人 Simon 我是 Annie 我是大卫好,我们今天要聊设计师的硬实力在聊这个主题之前呢最近有没有发生一些职场的鬼故事或是以前发生的也可以老实说啦,出国工作之后没有什么鬼故事我觉得好像鬼故事都在台湾的职场发生的好好讲一个好了啦刚开始做 UYUX 的时候在一个小小的接案公司老板本身的背景是设计师啦

但他后来就整个变业务或商人就因为他接案嘛设计师通常都会参与那个跟客户开会的会议那因为当时我是一个很菜的菜鸟啦非常的新手就算在什么新位子到什么事情是合理什么事情是不合理的吧每次开会的时候就是这样客户就说我要这个这个这个这个那个那个反正就要很多东西需求很多

然後我聽說怎麼可能而且我知道我是要做那個設計的人然後我就覺得不太可能這個需求就是天馬行空譬如說他就說我要用這一套模板就他敢上網買一個 50 塊美金 1500 塊模板的後台那種 dashboard 那種然後就說那你用這模板當作你的基礎然後我要做什麼電商的 ABCDE 的功能就是整個是很大的很複雜的東西然後又要再可能一兩個月內就要完成而且工程師好像只有一個就他們自己的這樣

所以你就觉得说这根本就不可能然后老板都这样知道吗老板就会说 OK 啊没问题没问题我们都做到然后这个我们回去再讨论 OK 然后我就一直想我在会议室嘛我就会说可是可是然后老板就会说 Simon 先不要我来我来我来然后他来就是他就会说都可以都可以我们都做到

反正下场根本就做不到,然后我就加班加得要死因为已经时代久远了,七八年前的事情所以我只记得说最后可能不欢而散,反正就胎死腹中,大概就是这个结局这是我早就从第一天第一次会议之后就预料到了但只是就不信邪,最后就变这样所以这当时遇过很多次了,后来我就知道说有一个好的,不管是皮验或是老板

就是真的不能为了为了要把案子接下来然后就什么都要因为他这样好像后来也没有赚到钱吧就是可能赚的就是那种工钱这样然后设计师其实就非常的哀怨就是做得要死这样所以这是我当时很新手阶段的时候遇到蛮多这种状况

还是老板会跟你说就是我们要看的不是钱是跟这一位业主有更多未来可能合作的先打好关系对先打好关系会不会的确他是前期要累积客户他是会这样讲然后一方面也会用这种你现在才刚开始就当做练手累积作品这种东西可是你看这个他要的内容其实我那时候身为新手我很怕因为觉得

那怎麼做 我又不會做 因為沒有做過啊然後又有什麼後台資料庫串接然後也沒有人可以問就是一個一年經驗的設計師要 hold 著全部東西還叫我去用模板

然后我就整个傻眼这样对就模板下来下来那时候还是 sketch 的时代对所以那模板是好像品质也不是很好对反正它指定要那一套这样子就很鬼故事对我其实还蛮有分享因为我觉得我有一个跟 Simon 非常类似的故事但是我觉得这个这个可能真的不能剪进去我之前就是有就是需要跟知名的硬体厂去接洽他们的一些活动

然后呢本来他们给我们的预算是 40 万就不只是网站设计就包括活动啊网站设计然后什么的 40 万 40 万其实已经我觉得已经有点紧了就是已经有点就是对有点需要谈了但是我们的就是 PM 就是算老板啦这个老板呢就觉得说

不行因为对方是一个大厂所以你应该要继续就是把这个需求接下来那之后才会有源源不绝的案子这样子对对对就才会有 A 联络 C 联络 B 这样子然后结果后来就我就离开了这个在我离开之前开了最后一场会议的时候他们对方说想要把 40 万砍到剩 20 万

然后我就离开了嘛然后结果后来我就回去 Catch Up 后面的近况他们说后来又从 20 万砍到 10 万不能结了吧这根本没赚头啊没有就是还是结了还是为了我们未来长久的发展性还是结了这样子还好不是你做的对还是还好不是我做因为我会怕诶 10 万我会怕诶 10 万我可能没拿到什么钱呢

給大家科普一下如果以前做那種平面設計做什麼 LOGO 或什麼做什麼名片海報當然單價比較低不過因為如果做開發產品我覺得

看你要做什么程度但动辄就是 50 100 150 起跳是比较合理因为你还要一个团队会有 P.A 有设计师有工程师然后可能还有其他的角色不一定那你公司又要有利润的话你还要付一些办公室什么有的没的成本然后看到底要做多久如果你做三个月可能你光成本就三四十万了对啊所以如果没有来个一百万基本上公司

应该是亏钱的所以这个商业思维的话就是大家简单计算一下拨拨手指你就知道公司接哪一种案子是比较赚钱的对大家不要拿自己的户头来衡量就是选很多哇一百万好多这样没有没有没错我分享一个好了刚突然想到一个就我大概七八年前

的故事跟我一样年代久远年代久远的故事就是有一次我要提一个设计提案然后那个会议是打里面有非常多的厉害关系人包含一些老板总经理什么都大咖然后呢我要去介绍我的 APP 的页面这样然后我就把 markup 放在手机里在老板旁边拿给他看说老板你看这样这样这样然后结果呢他就慢悠悠的从他的铅笔盒打开拿出了一把尺

然後開始在我的手機上就開始這樣量說你這個字跟圖有對齊嗎我說有有有這樣他開始量下一段這個字跟這個字中間有隔幾公分嗎這樣幾公分喔還不是 pixel 要拿尺啊幾公分我就一段一段解釋說這邊隔幾公分這邊多少多少有沒有對齊這樣好然後就

那他也算蠻有審美的他會管你對齊那還不錯還有段落跟段落中間有沒有夠高的高度閱讀性那還不錯除了公分我比較不能接受這根本就不是現行的那如果他掏出來的尺上面標註的是 pixel 呢不可能啊不能用這種標法

因为根本就不同单位那要说硬要换算什么就是以一比一就是二点不知道几公分是英寸对对对几寸几寸我还有听过那种

反正我有一个朋友他就是做顾问然后他就接传产的案子是大公司的传产然后就是那种老板要什么公司数位化转型那种反正他提案也是跟你很像他要把他那个网站全部印出来然后贴在会议室的墙壁上印出来的我也遇过对我说这印出来跟你实际上用根本就不一样我遇过印出来然后跟我说你这个颜色跟画面怎么不一样哦

不知道怎么解释代表这个产业还需要多教育或者说还要变得更成熟还有很多进步空间对当然我们就在努力当中那我觉得我们今天可以跳入主题了就是硬实力对那先预告一下我们下一集会聊软实力但所以这两集的内容我觉得会是蛮有相关因为设计师本来就同时具备软硬实力嘛这是大家都知道只是说以常见的现象就是

相对来讲比较新手设计师会更着重在硬实力 80%硬实力 20%软实力但如果你越来越资深的话开始变成 50%软实力 50%硬实力甚至如果变主管的话软实力就 80%硬实力就 20%我觉得感觉比较像这样的状况但我觉得可能我们听众蛮多也都是想要进来这个领域或是刚开始所以我觉得我们可以先聊所谓设计师的硬实力有哪些怎么样定义

我会觉得如果是想到硬实力最直接先想到的是你设计师的产出跟设计品质就是这是最会先想到的然后我自己会遇过一些例子就是比如说他的设计风格会不符合这个产品的主题比如说我就是看过一个要设计一个珠宝网站那他的调性应该是可能很时尚的

很高級很高貴這樣那它的用色可能是一個時尚金這樣但它給我的配色竟然是一個就是偏黃的咖啡色然後看起來就整個頁面掉掉就變得怪怪的變大變金

对不起我讲出一些不好意思讲那么白抱歉我忽然讲出来就不是时尚精然后整个页面就会变得怪怪的就我觉得这是最基本的能力然后可能你再更往上的时候你就会开始注重你的画面的成熟度和谐你的元件怎么运用等等然后像是你的研究做的扎不扎实我觉得这都是属于设计品质设计产出的一个部分

嗯 我覺得 echo 一下就是原件的運用這件事情就是原件的運用其實聽起來可能很基本可是我覺得還蠻常在就是比較新手的設計師的頁面上面會看到就是原件被誤用或者是說啊 講到就是可能 JD 很多人都會在上面寫說可能要首讀就是 material design 或是 HIG 嘛就是很多人會這樣講可是大家可能不太懂是什麼意思但我覺得這句話真的其實寫得非常好

因为会常常看到就是原件就是可能随便加了一个奇怪的阴影啊或者是说其实这个原件根本不该被用在这里或是它根本不符合就是现在的人的操作行为那你可能只是觉得说这样很好看或是说这样子很特别但是其实它会违反了就是这个人的使用行为那其实就是一个使用者体验会蛮不好的事情然后所以我就还蛮建议就是虽然说

可能很多很杂但是就是这两份 guideline 还是可以就是稍微的阅读一下毕竟这是 Google 跟 Apple 透过就是大数据就是做过非常多使用者研究然后去归类出的一份 guideline 然后是我觉得是非常值得参考的刚那个 Annie 讲到这两份规范但大公司出的品质保证当然也有很多

其他公司会出他们自己的所谓 Design System 的 Guideline 就设计系统啦那他们当然会每个公司或产品有自己的所谓设计语言他怎么去定义他的风格也好或者说他的一些元件的使用场景但我觉得就像你 Annie 讲的其实是有一些共识因为现代人在使用这些手机他其实就常常是跨装置跨载体跨系统譬如说我手机是

Google 但我的电脑是 Mac 对不对我觉得最近几年尤其是他们设计这些手法会越来越接近相对来讲啦譬如说你的 Tab Projecting 在最下面道行在最下面因为离手指比较近嘛这最基本的概念或是你的返回键不一定要点左上角那个箭头你可以手指靠近荧幕边界往右滑就会到上一页就这种已经是现代人必备不过长按会有些功能

这种手势的东西其实都很熟悉那在设计的时候就会去考虑到这些就是你有没有这个基本的概念这个东西甚至都不用特别去学你平常自己在用手机你有没有在观察手机怎么用还是你就是无脑用透过观察或分析你大概就会有一些 sense 就是所谓的这种敏锐度吧或直觉然后我自己看到很多人误用元件我可以 echo 刚刚 Annie 讲的我举个例好了

像一些所謂的 input,輸入的元件,有可能是一個欄位或者是所謂的 radio button,像一個圓圓的那種或是 checkbox,我什麼時候要用 radio button,什麼時候要用 checkbox 最簡單講就是 radio button 就是單選,checkbox 是複選還有一個 drop down menu,就是下拉選單,什麼時候要用可能有個基本的概念說三個以上在用,因為兩個用 drop down 就

多此一舉你就不如直接 Radio button 因為 Job done 也是單選也可以複選看你設計到多複雜甚至要不要搜尋在裡面像這種就是你會有一個基本概念之後在針對你的當時設計的時候要解決的問題你可能會選擇適合的元件

那这个就是都要很大量的算是练习或是经验对啊所以我觉得这个的确是蛮重要的那 Junior 的时候你们有透过什么方式练习吗还是就直接被垫一垫之后就我会了这样我有印象蛮深刻的是我抓了几个常用的 App 就是 Uber Eats 然后跟那时候好像做 Instagram 就是这些比较常见的大公司的 App 去做 Redesign 或者是我直接照着它刻一遍

靈魔對靈魔去了解它的架構是怎麼樣然後怎麼樣去做譬如說它圖片的切換啊或者是圖片它要進一步編輯的時候他們大部分都會怎麼做所以我在還小的時候做過蠻多這類型的事情還有就是我剛

踏入這行大家很流行的那個 Daily UI Challenge 我也做過大家都做過你有做過嗎大衛有有做過但你有做完嗎我其實做完第七天第七天就放棄了大概三天

有有我好像做久一點點但是對就是大家都有一個必經的過程那時候還蠻流我解釋一下如果大家不是我們這個年代就 Daily UI Challenge 那時候我也忘了其實我不知道誰發起的反正就是它有個網站對不對然後你可以去就是 Sign Up 就是給它你的信箱然後它就會每天寄一道題目給你譬如說今天設計一個什麼

登录注册然后大家都起手都是登录注册然后是什么设定业还是什么购物网接账什么之类的那大家可以根据这个主题自己去延伸虽然后面不是那么流行好像是因为开始有一些风声开始出来就说啊那个就只是在练视觉漂亮根本就没有逻辑可言啊

我大概同意一半因为的确他那个题目就没有太多细节他没有让你有太多限制也好或是设定的情境也不够多所以你就自己发想但是我觉得也是对新手来讲

很好練習吧因為彈性蠻大你就可以多去嘗試這樣子當時就是比較多像這樣的做法然後我自己我也做過那種瘋狂截圖的練習我做兩件事一個是我在一個 APP 裡面把它某一條 user flow 譬如說就是結帳好了我就把這整個結帳結起來就很細就每按一下截一次這樣我就可以完全的理解因為有時候其實我沒有太習慣了就無腦按啊因為我覺得做得讓你

譬如說下單結帳很順代表他其實做得還不錯那也是我們身為設計師就不會注意到他怎麼設計所以你可能就是叫所謂的刻意練習吧那是第一個那另外一個那時候我還遇到一個事情就是我要設計那個剛剛講 TabBar 下面那種導航的 App 上面的 IconIcon 聽起來很簡單但是你會發現怎麼有很多 App 的 Icon 是以線條為主或是有些是實心的

那到底點了之後變死星還是換顏色還是怎麼樣就是眾說紛紜嘛就很多做法好像都可以那我記得那時候我就截了五六十個 app 的就只截那個下面那個 TabBar 然後我就哦原來這個 pattern 大概是這樣然後也順便定義一下分類一下 ok 這種類型的產品適合這個然後這種類型產品適合那種風格然後也查很多資料就說哦可能線條的閱讀性比較高

等等之类的然后甚至要不要 icon 下面要不要文字有个 label 因为很多公司的产品可能不是这么大众的不像 Facebook 就什么一个首页一个房子朋友一个枕头但有些是相对比较复杂对不对那你如果没有个 label 下面那个

自然就没办法解释那个功能是什么所以我就那时候做了很多这种练习那我就自己有一个遇到什么情境我大概用什么做法我自己是就是会练习讲讲看我喜欢或是不喜欢这个产品或是这个页面的原因比如说刚刚讲的那个结账流程好了我就会试着说说看我自己觉得很顺的地方在哪里

或是我自己卡關的地方在哪裡這樣我下次遇到一樣的流程的時候我就知道說我哪一個步驟要注意這樣練習說出來

这面试也很好用就因为你常会被问你有没有喜欢哪个 APP 什么产品或者是你为什么要这样设计对其实这是每天都要做的那你早做晚做你就先做练习你以后就会用到我先回到一个比较前面的问题就是我刚刚最前面有提到你在新手或是资深这支架接换转变的过程你对于软硬实力的分配会不一样那你们自己觉得说你现在变得比较有经验相对比较资深

对于硬实力这件事情定义上有没有什么变化我早期就觉得 OK 硬实力就是图画的好看以前啊我觉得我会更注重一些细节就是可能新手的时候觉得整个画面看起来舒服顺然后好看这样 OK 但我现在就会很 care 一些比如说线条啊间距啊阴影这些就是这些小细节我都会开始越来越要求

然後在看別人的 markup 的時候我也會很注意這些事情因為我覺得常常這些小東西你沒有去注意到的時候其實會影響蠻大的因為像比如說剛剛有提到陰影的使用就是你陰影做超大跟做超小那感覺真的差超多新手因為我們在做課程嘛新手真的遇到超多陰影都用的非常的我這樣講會不會傷害到一些人

就有进步空间啦抱歉对有进步空间就最常见就是阴影会超黑对对对黑就算了还很他那个 spread 就是那个扩散很大然后就会觉得整个已经喧宾夺主了就他的那个 UI 上面资讯基本上看不到我只看到那一坨黑黑的东西

当然它没有标准但是因为像 material design 它很好它就是有详细解释阴影的意义因为 material design 它的原理就是它要模仿真实世界这些 material 就是材质的意思对不对那它有一盏灯从上面看你光源在哪照下来一张纸然后那个纸的阴影当然就会在譬如说你左上角照下来光它阴影就会在右下角那如果那个纸

拿的高一点那阴影就会比较扩散比较柔和像这种概念它会让你的 UI 有一点层次然后因为界面是平的所以你如果今天很多层东西叠在上面一个按钮放在上面你还是要大概知道这个表单跟背景哪个是前面哪个是后面

虽然可以有时候平的也 OK 但是我觉得如果你的设计里面是有带阴影的话你这个就会考虑进去我自己会觉得另外一个很重要的是间距因为我看很多 Junior 在做 Markup 的时候他们的间距都是随心所欲的

小數點 9.268 怎樣你有沒有用過小數點小數點或者是就是可能左右不對稱啊什麼上下不對稱然後可能他的也置中也不是置中就是很隨便放上去的感覺然後你一看他的你就這裡怎麼歪一邊就類似這種情形然後可是其實對工程師來說看到這種超困難

你到底是要我靠左边还是靠右边那两边间距为什么不一样就常常看到这种情形你现在习惯用什么方法就找到一套自己的间距的我自己会有比较习惯使用因为像比如说大公司他们可能就会说四的倍数啊八的倍数啊这样然后可能我之前自己也有用过五的倍数就五十数这样就是我自己会比较习惯这两种所以我现在只要做就会用这两种规则这样我

我自己也是 4 的倍數派的而且我非常 picky 就是我看自己的話還看別人的就是看到沒有定義好因為其實現在 Figma 也可以設就是 variable 你可以自己去設就是就是小的間距是 4 然後中間就是 8 之類的所以我就乾脆直接用那個了啊你這樣就不會搞混說就是我沒有設好這樣子

改作业的那种小老师去那边挑点的有没有用 auto layout 有没有设定的建议去这样而且我非常我不知道会不会攻击到太多听众但我真的非常讨厌看到 frame345678 那你会命名是不是我会命名我每一个图层都一定要命名图层吗每一个图层喔对你看得到每一个我都要命名我发现直升设计师比较不会命名因为很忙对

你在说我很闲吗对啊很闲才没有啦我觉得命名是这样啦我不知道这一集会不会聊太深因为我觉得做 UI 跟做平面设计不太一样因为以前用那个 Photoshop 你们应该 Photoshop 时代有有有他没有我没有用过有可能小画家都用过好不好

对就是 Photoshop 的时候你当然会叠很多层但那个图层的意义不在于所谓要逻辑它只是你东西要盖在这上面盖在下面但因为 UI 的话图层它比较多是真的有一些逻辑存在然后你要比较好去检查你的原件的结构应该这样讲我觉得新手比较常见的问题就是他们用一些以前设计的习惯或是以前如果是用早期用 Sketch 的时候就是群组嘛 Group

这个东西两个想要一起移动我就给它包起来就是这个再包起来就是最后变一大包就是很多包很多层但有些层因为他没有很理性的去思考说到底这两个物件之间的关系有没有需要包起来就是我就包起来对它全部就会选在一起然后最后导致那个一层一层就非常乱然后当然你也不可能去命名因为那个很费时间对然后也是

就会变成那个 friend 什么舅舅六七八之类的这种事情但其实我还蛮建议就是你在包 friend 的时候可以去想一下工程师是怎么开发的就是他们的那个 diff 对对 diff 是怎么分的那这样子你在跟工程师合作的话会更顺利一点点然后可以去想说他在 responsive 时候他长大了要怎么长

所以你会自然而然的把它包在同一个 frame 里面为什么现在设计工具 Figma 这么红就大家都用它当然是因为有一些它的优势可能是线上的协作的功能或者是特别厉害的设计上的功能就是什么 auto layout 什么 variable variant 之类的那另外一个是它非常的相对来讲比较工程师 friendly 工程师友善因为它那些功能的设计其实是很符合设计师要跟工程师沟通的时候

比较好去沟通甚至你用 Auto Layout 之后基本上你会定义好然后甚至你用 Variable 你可以设定说因为工程师在写扣他不会说这个是 4,这个是 8,这个是多少他其实会先写个名字说什么 Spacing SM, Spacing MD, Median

然后就是说在定义说 spacing SN 叫做 4spacing median 叫做 8 所以他们是有一种所谓语义化的概念对那他就会跟你沟通说这个帮我改成 median 8sorry spacing median 他也不用讲数字你们沟通的语言不再是一些数字你们以前有经历过要那个吗自己在那边标设计稿

EVision 現在可以講你沒用過 EVision 嗎我有我有我還用過 Photoshop 畫 UI 呢那你比我資深 我沒有我剛加入的時候是 Sketch 不好意思我沒有用過 Photoshop 畫 UI 那我沒用過

你有用過怎麼弄啊你可以分享一下我用過啊最開始最開始的時候大概是 201 好算了想不起來幾年了就是一開始是用 Photoshop 或者是那個 illustrator 會有遇到剛剛你講的狀況就是他們圖層跟圖層之間只是誰要壓在上面的問題而已

就比較沒有那種成績啊群組這種概念就是誰壓誰而已然後那時候切 icon 那個還要切三倍然後三倍如果糊糊的話還要把它放大然後把那個毛邊修掉

天哪好老喔我真的没有遇过这个种我都直接输 SVG 没有那时候还不能用 SVG 每个 icon 都要切三倍这样然后命名命到死其实可是我现在还是会标要不要只是现在方便很多输出的过程方便很多因为其实工程师他们我据他们的使用者体验他们说其实有时候很难对到他要的那个间距所以他就会希望你标一下还是因为只是他懒惰而已啊

攻擊到我沒有攻擊到你的聽眾你要教他使用 Figma 怎麼看間距按一下 option

好温柔我觉得要标的情境是这样就是虽然 Figma 现在你就打开 DevMall 或是就是检查这些建具就 OK 但因为我们刚刚提到我们在做的是数位产品它是一个 responsive 就是响应式对你今天设计稿是静态可是它这个设计稿会不会用在就看那个使用者到底用什么装置打开嘛

那你就要去標說這個東西它其實不是一個固定的數 寬度它是一個百分比比如說你這個是我可能左右是固定 24px 但中間我就不管中間就看你到底螢幕多寬我就會無限延伸就是你可以寫 100% width 就百分之百寬度或者是你這個是要佔百分之八十的寬度其實寫程式很彈性有些工程師可能是用所謂的

Grease System 就是 12 格的那种栅栏系统那我说我要占这个整个宽度 12 格里面我要占 3 格你也可以这样跟他讲就其实很多写法百分比啊占几格啊或者是你要写死固定的也可以可是好像通常不建议啦因为那是那就没有 responsive 了对

所以这个就是可能是新手会比较他就很困惑因为我之前在一些社群就常看到有些同学就会问到底那个一开始设计稿到底要开 1200 还是 1440 还是 19201920

对啊你们有什么建议吗我会去看使用者都用什么哎呦 职业设计师对就看一下你看一下你使用者都用什么啊因为大不一样搞不好你的产品很长青就是大家都是用那个很大的桌机在看的那就可能跟我们不太一样嘛对不对所以可以先去后台看一下就你们使用者大概都用手机都用什么样的 size 啊然后那个桌机都用什么 size 这样子

我自己是就是如果是這個產品是已經有數據的有使用者可以使用這種方法但如果你是一個完全沒有從零開始沒有數據可以看沒有使用者可以參考的話我自己會從 1440 開始啦我不會從 1920 因為我覺得 1440 是一個進可攻退可守的寬度就是你要拉大也可以你要縮小也可以但如果你從 1920 開始你要調到小的寬度的時候你會比較麻煩所以我會從 1440 開始

我覺得我也差不多是 1440 這個也可以普一下因為我怕大家不知道我們在到底講什麼就是

1920 其实就所谓的桌机这种电脑大萤幕的尺寸然后 1400 比较偏笔电的尺寸所以当然就进可攻退可守不会说如果你用 1920 你可能会变成说你设计都在中间它左右会很白除非你做的设计是那种所谓后台 dashboard 它是那种会无线延伸的那当然就可以用 1920 那跟手机有点像大家以前也会在那边争论说

到底要用 iPhone SE 還是 iPhone X 現在已經 iPhone 幾 我已經不知道了反正就一直在變以前會用 375 現在好像會流行 390414 我看到有人在用你看我們都背起來了這是資深設計師的一個我覺得就是一個中間的那種最保守的我如果已經很會用工具 我 V 個馬大師我就什麼功能都會

那可是他如果不会写扣的话会不会影响到他的设计师的发挥好像也没有什么标准答案看你们有没有什么想法我的话其实我还是会建议要了解一些基本的概念你有吗我觉得我有我真的有去学过我觉得我去学过我就是要怎么写虽然说写了一塌糊涂但是至少

比较好沟通但如果你不要硬学也可以就是你在跟工程师工作的过程中我觉得是会开始吸收到一点知识的就是随着你的经验累积你是会开始了解一些东西的

但我觉得不一定要自己一定要会写啦我觉得会写很 hardcore 那之后如果你跟后段要投入到逻辑那你也要一起会写嘛就是我觉得不用到这么全能没关系我自己是又要开始遥想当年 RWDA 才刚出来还没有现在那么盛行的那个年代就

身为设计师就是要先了解这个在干嘛嘛然后所以当时就是我有用公司的补助去学这件事情虽然那时候觉得为什么我要学这个可是现在想起来就是你学了之后然后包含 HTML CSS 这几个概念在你跟工程师沟通的时候都帮助很

我觉得设计师不用从零开始写我觉得这个太 hardcore 可是你了解那个概念的时候当工程师跟你说这个为什么做不到那你可能怎么做会更好的时候就是你可以马上的理解他说为什么他这边有难处那你可以怎么样修正然后让他更好做事就是所以我觉得懂这个概念是很好是加分的

其实说到底就是帮助沟通互相理解就比如说如果工程师他也懂 Figma 或者设计师在设计的时候到底在想什么通常很少我很少遇到工程师真的懂设计师到底为什么要这样设计当然因为我们可能在做比较前期的东西所以不见得什么事情都可以讲得很清楚那工程相对来讲目的性比较明确就是是这样就这样没有邪对就是 bug 对所以

所以如果设计师可以给一些比较具体我要什么样的数值也好这个东西运作的方式是怎么样你不用让我再通灵啦就是其实工程师会不喜欢就是会他自己去脑补说这个东西设计稿没写那到底是怎样要么就我去问设计师要么我就自己用我的想法做这个东西有风险就是

如果设计师比较踩或是他不太管那就做出来就让他去了但是如果设计师也有自己的想法那到时候又要说为什么这变成这样你怎么没跟我讨论你又没讲你又没讲对啊你又没说对所以我觉得这个就是一个也是有点牵扯到合作的问题这个我们可以软实力的那一集我们再好好的聊那但是我自己的观点就是像 Annie 讲的差不多你可以学一些超级超级基本至少了解刚刚我们有讲个中华名词叫 Deep

对 diff 就是好难解释啊它其实就是容器嘛因为其实你看整个网页它就是很多所以网页设计有一个词叫 box model 就是一个盒子就是所有东西都是一个盒子所以你要了解这个盒子它的摆放的逻辑跟它可以做到什么程度这是蛮重要就是一些 CSS 的概念这样对我之前自己也是有写 coding 甚至我写到走火路模我还有自己在做那个 live coding 但是没有到什么写 java script 就是我

Live coding 切版这样好几年前还有办这个活动卡住了然后就看有没有谁那个观众会解答之类的对我还干过这种事情对所以我觉得我对于写 code 这件事情就不排斥然后

也会觉得说这个东西蛮有成就感的因为你会自己设计再把它写出来怎么讲啊就是像你如果做菜好了你如果只是会切菜跟备料你没有把它煮出来你会觉得好像没有掌控权但如果你会写扣你就会有自然可以判断它好吃不好吃是为什么不然你可能就永远都不知道好那这个还可以延伸讲一个部分就是刚大卫前面有提到关于

设计师要怎么做设计决策就是说你到底为什么要决定把你的设计做成这个样子然后拿出去给别人看那这个东西对于新手来讲是一个很大的门槛我觉得以前你会觉得我这东西我无法判断是好或不好啊

对那这个东西有没有什么方法让大家会觉得说我比较能够建立自信知道说 OK 我至少做到这个程度代表他还 OK 甚至你可以比较能够讲出自己的这个理由对你们之前有经历过这种转换的过程吗从比较没自信到最后会觉得我大概知道我在做什么这样其实我觉得 Simon 已经讲到那个点就是你要知道自己在做什么

就會比較有自信然後我覺得以比較 Newbie 的設計師來講比較容易會犯的一個錯誤是照單全熟就是我需求來了那我就是全部就看一看然後那我就開始做那我覺得可以如果有時間的話可以先停下來想一下就是

一直问一下为什么就是我为什么要做这个需求当然不是说就是为什么要做我不要做是这个需求是为了谁做的然后想要解决什么样的问题那是不是有更好的方法可以做到这件事情或者是说可以衡量一下自己手边有多少资源可以做

我有沒有研究的資源那我有多少時間可以做這件事情我有多少的可能跟團隊配合有多少的人就是這些都是你可以去善用然後會這些東西會取決於你要怎麼樣呈現你的設計所以其實我覺得

可以多問問題就是不要一股腦的先直接 dive 到做事情就可以先想一下自己為什麼要做這件事情那個你講得很好耶就是你要先充分了解這個需求的來源然後為什麼會有這個需求那你才會更好地可以去判斷說你要做什麼事情

然後我自己有一個習慣是我譬如說我設計了一個頁面或是一個功能等等那我可能會在每一個步驟的時候去想說我如果不這樣做的話還有什麼其他的方法或者是譬如說如果是工程師他來看這個頁面他可能會提出什麼樣的問題

就是多想一点如果是别人来做这个操作别的职能的人要开发他可能会问什么他可能会想什么就是我在做页面的时候会先想到这些事情那再下一步我可能去别的团队成员沟通或者是我跟工程师沟通的时候我可能已经先想到这个了那我可能已经先帮他解决了就是所以这样后续的流程会更顺然后我自己会蛮推荐说尽量跟工程师们当好朋友

就是你在提案前然后设计已经出来的时候你可以先拿去问问看他你觉得这个可行性怎么样那你可能会用什么方式去开发那我会不会改一个方式你会更好做等等就是多跟他们讲这些东西那你真的去提案的时候你的那个完成度跟可行性会很高那工程师也会 support 你这样子两位果然是资产设计师问问题是一个很关键的事情

通常新手也不太敢問反而覺得職稱設計師都會比較敢問就不恥下問這樣就問一些很基礎問題也 OK 我在國外工作也是這樣大家都會說 No stupid question 雖然大家講是這樣講啦可是你自己也不可能就是說你所有事情都問你問之前你會大概去判斷一下說

哪些东西是你在现有的团队的文件啊或者是大家沟通中就知道然后你问的时候是带着目的去问的就像刚刚 Annie 提到的就是你问的目的是为了让你更了解这个可能专案的脉络或是它现在的限制然后你这样做设计的时候可以更精准就直接先避掉一些你可能做出来是根本就不可行的东西因为我们在提这个提案的时候啊

你绝对不会说这个很好看那大家请坐这样不会因为我跟 PM 聊过了那 PM 说这个商业目标是 ABC 我也跟工程师聊过工程师说这个限制是 ABC 所以我基于这个 ABCDE 不同人的不同面向的一些回馈所以我现在设计提案是 ABC 然后这 ABC 又分为这最理想这个可能没这么理想但做得比较快这个就是没有这么理想但我明天就可以做完

会有一个选择给老板选对会有 option 然后每个都有都有 porsche and cons 就是优缺点那你自己会有一个自己的所谓的最推荐的那个然后你这个最推荐又可以说最推荐的这个版本虽然是最简单可能没那么好但如果做得好的话我们可以快速的赶快进展到最理想的版本这样听起来不就哇超级有说服力提案变很完整

就基本上你就會已經讓人覺得說你真的是面面俱到新手就不知道我就問問題又是這個可以聊一集到底要怎麼問在什麼階段問要問誰

然后到底要一对一还是要一对多反正这个就是软实力等一下可能有机会聊到对但我觉得这就是你收集越多情报跟资讯或是其实不只是收情报因为这些人他有他的偏好我工程师我就要快快做我要简单做那个 PM 就是我要准时上线对不对你每个人的立场都不一样把他们立场跟资讯全部收集完之后

然后我提的东西是有点超出他们能承受的范围就那么一点点一点点就有点 pushpush 一点点那这样就会是一个我觉得是 sweet spot 就是你可能也达到你设计的目的然后他们有勉强可以接受对不会很痛苦这样这已经讲到那个了 design strategy 所以我觉得这个的确会很需要累积就是设计的角度那我觉得我们也

不要就是停在这边就说大家不要怎么样不要怎样我们应该给一些就是可以做什么样的练习培养这些刚刚我们提到有美感或者说怎么样跟不同的职能好好的合作或者说你提的设计的品质会比较好这件事情就不知道你们有没有什么自己平常会做的练习我觉得应该还蛮多人会想说当设计师是不是一定要很

有美感或是对美特别的敏感这样子因为做产品设计师其实我觉得更看重的是他的使用者体验就是我们可能会在乎间距在乎阴影在乎圆角在乎线条之有没有一致性但我觉得他

中规矩都是为了使用者体验好这件事情然后可以试着去了解为什么这个东西背后是对使用者体验有差异的例如说间距好了就为什么不是设 9.648 可能是要保持 4 8 16 24 这样的距离那可能是在你阅读体验上会大大的提升然后我们可以把相近的东西放在一起让使用者方便知道说 A 跟 A 之一 A 之二它们是一起的那 B 跟 B 之一 B 之二这样是一起的

就是去了解它背后的脉络我觉得会更有助于你在排版的呈现上会是一个具有美感然后并且并重使用者体验的一个呈现然后包含像是阴影刚刚三妹有提到嘛阴影它其实不是

单纯想为了它浮上来它是有阶层式的它是你的每一个 layer 的高度不一样它会导致它阴影的呈现是不一样的或者是圆角啊为什么要用圆角那我用直角不行吗他们都有一个原因跟逻辑我觉得可以先从这个背后开始了解然后要怎么从背后开始了解呢去读 Design GuideDesign Guide 都会说写很清楚对那因为他写英文的所以英文也要练一下嗯

美感的養成我覺得剛剛已經講滿完整的我想講另外一個面向的就是我覺得可以每個階段就不斷的更新跟審視你自己的作品集就是你可以每過一段時間就回頭看看你以前的作品然後你就會知道以前自己哪裡做得不夠好然後或者是我現在再做一次的話我可能哪裡可以做得更好

你就會發現你的作品集可以不斷的被更新不斷的被修整然後不管你是用不同的工具也好或者是呈現方式也好但是還有一個是你如何說你這個作品的邏輯就是你可以不斷的修正它然後讓你的作品集越來越完整我覺得這個蠻有助於幫助我在審視我每一階段的硬實力的呈現大衛講得很好

这个也是我们平常可能会忽略到的练习一直往回看其实有时候也会做嘛类似那种团队也会做一些回顾会议之类的对那就是去反思说之前哪些东西是可以在未来避免掉或者是再更改进的对那我觉得这个是一个蛮重要的指标就是怎么样知道自己有没有进步如果你去看你三个月做的东西是一坨

B 的话那它就有可能是你真的进步了因为你就觉得原来我那时候 level 在这所以我现在 level 我看是我可以明确点出哪些是有问题的那就代表你的思维也好你在判断什么那个设计的角度又更上一层楼这样对所以我觉得这还蛮好的

好,那我们今天真的聊蛮多应该知道我们讲的设计历史不只是在讲工具还有很多设计品质啊沟通这些都我觉得都还算在这个范围里面这个东西这个议题可能我们在这整期的节目中也会陆续的可能提到因为都算是设计师的核心能力之一好,快捷键二选一就每集都有这个题目嘛对,那这次的题目是

你会想要成为那种一直去挑战自己然后一直去换不同的产业去试试看还是你是想要一个专注的领域就可能永远都是做比如说金融或是永远都做旅游产业这种的设计师我可能会选就是挑战自己然后换产业领域这个选项因为我自己自身的经历是我之前在媒体业待了七到八年然后从去年开始就是换了一个产业领域这样

然后我自己的感觉是为什么我会在媒体业待那么久我觉得其实这样讲会不会攻击到前公司其实我自己对于媒体产业没有非常高度的兴趣可是我觉得我花了这几年的时间我已经算是了解这个产业了然后我觉得我可以往其他的产业去学习然后因为我现在换了一个产业我等于这个产业领域的所有的知识我都从头学过

然后虽然就是刚开始会有点辛苦因为毕竟完全转换一个领域嘛但是你真的上手之后你会觉得其实你换一个领域换一个想法其实是很有趣的事情

你会接触到很多不一样的东西但我觉得这个不断转换产业领域的时间也是不能过短你不能够什么三个月换一个这样子我会觉得你可能还不够充分的了解这个领域的知识这样我的话应该是我会选另外一个选项就是在特定的领域工作然后原因是因为我觉得我自己就我了解我自己是一个喜好非常分明的

所以做一个我没有兴趣的领域会让我觉得非常痛苦就像我就是前几年待在区块链的时候我

到出京路京啊我整个人人生都要毁了这样所以然后后来我到现在的预定平台就是我在到预定平台之前其实我有对自己许了一个愿望就是我希望下一份工作是我自己有在用然后我喜欢的产品所以我就到了现在这间公司嘛然后我在做产品的时候就会觉得

异常的快乐就是因为我也是其中一个使用者然后我会觉得自己真的有在对这个领域做改变的感觉然后所以以至于我下一份工作我可能如果有要找下一份工作的话我可能也会找相同领域的东西然后那个 domain know-how 我自己觉得也会比较有信心

那我蛮有趣的你们两个是不一样的想法但我觉得其实也没有说是一定要极端我觉得有可能就在中间因为我觉得我自己会比较像是我不一定要同个领域但是我要就像刚刚 Annie 讲到我喜欢做 2C 的就是大众面向的东西

平民百姓都要用的东西这是我最喜欢做所以我之前做的是求职平台嘛然后现在做的是算是工具类型的就大家都普罗大通都会用包含我自己也会用的所以我觉得做起来特别有成就感像我现在在用的工具就是我们公司所有人都在用那你设计出来就是公司的人会先帮你

测试过一轮他们日常就会用然后就会觉得这哪里不好然后怎么样对我来讲成就感还蛮大的一个部分当然如果你换领域的话因为我觉得设计师这个角色很多技能都是共通的在以工作本质来讲就是差别就在于所谓的 Domain Knowledge 就是你懂不懂这个产业的东西但这个是可以补起来的就透过在那个产业多累积一点经验对所以我觉得好像大家也可以多去尝试

不同的产业但就像大卫讲的不要太短啦大概一年吧六个月除非你真的觉得像区块链这样超痛苦根本就太艰深了今天攻击区块链对但有人喜欢啊对啊所以我觉得要找到自己喜欢的比较重要好 OK 那我们今天真的聊得非常精彩好那我们就差不多到这边我们下一集再见拜拜拜拜拜拜

我们之前要做易用性测试的时候就是那是针对搜寻去做然后那时候我们就是搜寻的时候会在那个输入框里面去跳就是跑马灯会跳就譬如说按摩哎 完了

足球棒球羽毛球就是提醒使用者说你可以叔叔看这些关键字那可能可以找到一些特别的东西然后那时候在测试嘛所以就是 QA 会用测试站然后但是我们可能就 QA 不知道我们在进行医用性测试就是开测试站给使用者测试的时候上面就跑出一些什么防枪的东西你知道什么什么打手枪啊然后什么什么鬼的啊无套什么什么的

然後工程師打的是不是對 然後我就趕快收回來說不好意思我再檢查一下設定