104學習精靈

毒舌好朋友

毒舌好朋友
公開教室關注者 41 人
關注教室
Kinny

產品設計師

2022/04/18

[嚼舌]產品設計師進化論3-UIUX設計師如何成為產品設計師
上一篇講到了UI/UX設計師與產品設計師的不同之處,但若現在你已經是一位UI/UX設計師了,要學習哪些技能才足以擔任起產品設計師的工作呢?以下節錄四大必備硬技能,快來看看~
1.使用者中心設計
產品使用與介面設計息息相關,不能用自己的思維去設計,要去了解如何從使用者的角度出發來進行規劃與思考並引導產品、系統、服務的設計與開發。一個標準的流程大致包含定義使用的情境、定義產品需求、設計解決方案、以及評估設計成果,另外再加上前期使用者需求調查和後續的使用者滿意度評估。
白話一點來說,一個功能要開發前,要去了解這個功能對使用者是否有價值,能真正解決他們的痛點嗎?在產品服務中什麼情境、又是基於何種考量去使用這個功能?再者,設計出來的解決方案是如何讓使用者看到並且使用達到預期目的?最後,如何得到驗證,評估的標準為何,使用者實際使用後的感受為何?
2,資訊架構與操作流程設計
如何將眾多的功能適時的分類、配置,並保留未來的功能擴充性,就很仰賴資訊架構的能力。例如一個app經過需求盤點後大致有6項大功能、9項子功能,那首頁應該怎麼設計?功能相近的功能是否應該放在一起,還是依據使用流程來配置?如果未來繼續加功能,目前的架構是否可以滿足等等。
操作流程是指在首頁賦予任何的任務,都可以經過操作後抵達目的頁;包含功能的可逆性(取消、返回、刪除),以及各種的極端值、錯誤狀態。設計第ㄧ個版本後,可以再思考是否有更短路徑、或更方便操作的動線,以此優化、迭代。
3.數據驅動設計
產品開發大多是帶者假設、然後上線要獲取驗證的過程,我們無法百分百保證新功能就是使用者心中所希望的、使用者會按照我們預想中的流程去操作;所以上線後必須要隨時觀測使用情況的數據,並以此為基準去解讀數據、洞察問題、提出假設、進行設計解決方案、再經過上線驗證。
常見的數據分析工具是GA (google analytics),市面上也有很多關於此工具的教學;一般來說主要觀測的是頁面流量、留存率、跳出率、點擊率、某功能的轉換率、頁面使用排名與流程、使用者裝置佔比、其他使用行為洞察等等。產品設計師們不一定要自己「會看」,也可以詢問PM你想知道的數據,再由PM提供給你;若你真的很好奇但是不好意思一直問PM,還是建議請PM幫你開通使用權限,自己玩玩看會發現更多有趣的現象喔!
4.統整需求與提案、說服能力
最後一點但認為是非常重要的一點,單靠產品設計師一人是無法將專案推上線的!必須跟產品企劃(PM)一起獲得決策者們的認同,可能還需獲得行銷單位、廣告單位、前、後端工程單位的支持,產品才有可能順利進行開發。
所以設計師必須將自己的發現整理成他人可以看得懂的內容、將設計方案呈現的讓人一眼就明白、或是透過prototype讓大家更好理解整個操作流程;簡報也盡可能納入有說服力的內容,例如搜集使用者的聲音、進行原型測試、或是整理內部單位相似的需求、大環境或競業的分析與趨勢、前一版本的使用數據與解讀...只要可以「佐證」你的設計,都可以整理進你的提案中,成為一個很好的推力。
以上,4大必備硬技能介紹到這兒,下篇聊聊軟實力~~
延伸閱讀:
[嚼舌]產品設計師進化論1-平面設計師如何成為UIUX設計師
[嚼舌]產品設計師進化論2-UI/UX設計師與產品設計師差別
6 0 854 3
Kinny

產品設計師

2022/04/08

[嚼舌]產品設計師進化論2-UI/UX設計師與產品設計師差別
若你是UI/UX設計師,看到有些公司徵「產品設計師」的職缺,適合投遞嗎?
UI/UX設計師與產品設計師的工作有什麼不同?以下為您解答。
在過去的十年當中,介面設計領域經歷了一些進化,而承擔這些相關職能的稱謂,也隨著時間推移發生了一系列的調整。現今常聽到的UX設計師、UI設計師和產品設計師,這些工作角色之間有什麼區別?
1.UX / 體驗設計師:
就是專門針對體驗進行設計的角色。理論上體驗設計師是做用戶研究和制定體驗方案,並從使用者的心態和角度思考設計;主要關心的是產品「用起來感覺怎麼樣」。
工作內容可能有撰寫各種產品使用場景和建構互動模式。利如參與各種測試和觀察使用者做了什麼(例如可用性研究、眼球追蹤、A/B測試,訪談問卷等等),以及針對介面、互動面去做優化與建議(Prototype)並且透過線框圖(Wireframe)找到產品的使用邏輯。
2.UI / 介面設計師:
核心職能就是根據老闆、產品PM的需求,提供介面的視覺方案。並輸出相關的設計規範、設計說明、設計切圖;主要關心的是產品「看起來怎麼樣」。
工作內容可能需要從抽象的需求轉化為可視化的wireframe;或拿到上游需求方(產品PM或UX設計師)已經畫好的wireframe、UI flow進行視覺的設計與規劃,例如整體色系的選擇,或是icon、圖片、文字等其他元素或組件的樣式設計。若是稍具規模的產品或專案,可能還需要設計具有一致性的視覺規範(Style Guide)。
3.PD / 產品設計師:
如果你在10年前,頭頂上的職稱是「產品設計師」(Product Designer)的話,那麼你很有可能是負責設計實體產品的外觀的設計師或者工業設計師。但是在 2015年前後,由於 SaaS(軟件即服務)類產品的流行,我們注意到「產品設計師」這一職稱還是應用到這類產品當中負責與使用者互動的設計師頭上(看起來像是設計師和產品經理的某種程度上的融合)。
定義、探索、構思、驗證
自從2017年阿里巴巴提出了設計全鏈路的概念後,全鏈路/產品設計師ㄧ詞慢慢的被廣泛的運用。產品設計師實際上指的是可以深度參與產品功能走向與規劃中,比起某一段用戶旅程或某一功能的互動,更在意的是整個產品從前期需求探索、功能規劃、視覺呈現到上線前的測試、上線後的數據觀測與迭代優化等全程參與的過程。在不同使用場景、並以人為中心(Human-centered design)的前提下,實現產品的平衡性(商業決策與用戶需求的平衡點、公司內部各利益相關單位的平衡點、產品內各功能的配置與使用的平衡點)。
小結:
正如同你所看到的,產品設計師像是UI+UX設計師的聯集、同時又對產品開發有更廣以及更深的探索。UI/UX設計師會在工作中尋求實現產品使用的完整性(視覺、互動);而產品設計師則會隨著時間推移,深入研究產品的升級進化之道。
當然,上面提到的職稱與工作內容,隨著每家公司的所賦予的定義肯定是有例外的,因為它們並不會完全符合所有的環境。但是希望這篇文章可以初步解釋這三者之間的差異性。
延伸閱讀:
[嚼舌]產品設計師進化論1-平面設計師如何成為UIUX設計師
[嚼舌]產品設計師進化論3-UIUX設計師如何成為產品設計師
5 0 973 6
Kinny

產品設計師

2022/03/30

[嚼舌]產品設計師進化論1-平面設計師如何成為UIUX設計師
常常有平面設計師/視覺設計師,工作了一陣子之後覺得遇到瓶頸想換跑道、或看到UI/UX設計師的起薪較優渥,想要轉職但是不知怎麼開始,也不清楚要學些什麼,也許這篇文章是一個不錯的啟蒙。
在學習成為介面設計師之前,先了解這兩者實質上的差異,最大差別就是載體的轉換與動態交互的不同。
基本上都需要視覺傳達的基礎,非常仰賴字型、用色、排版、以及其他「美的形式原理」例如平衡、對比、協調等來塑形。平面設計多用於實體印刷品或網頁中等靜態溝通文宣;而介面設計是從靜態的視覺宣傳物一躍而成可以點擊、頁面切換、著重體驗與流程的交互行為。
若你現在是平面設計師,想成為UI/UX設計師卻不知道如何開始,可以參考以下五個脈絡,照著做一遍就很有感:
1.了解、熟悉雙平台元件規範、基礎交互原則
此階段為基本功,有點像是平面設計要學基本設計、CMYK等印刷基本知識,不知道這些知識就沒辦法做好成品。iOS與android分別都有提供基本的規範,從字級、字體、元件大小、樣式、互動行為等都有準則可供參考,是屬於偏生硬但是必須紮實打好基礎的必要知識。
雙平台官方也有釋出參考內容:
android
iOS
2.大量瀏覽設計案例
這邊案例包含線上一些設計作品網站以及實際使用各類產品的經驗;線上平台例如behance、dribbble、pinterest等等;或者你可以到app store去下載新上架、熱門排行榜上的app來實際體驗。將覺得有參考價值的畫面收藏或截圖下來;並盡可能的分類,例如「首頁」、「個人中心頁」、「登入流程」等等,作為後續靈感及複習的來源。
此步驟建議為一個持續性的學習動作;必須要持續不斷地維持瀏覽優秀作品的習慣;你會逐漸發現開始能夠比較案例的優劣,也可以慢慢的發現自己偏好某一種呈現形式,這有助於未來塑形你的個人設計風格。
3.實際臨摹與練習
接著開始大量的臨摹!廣義上來說,到這步才是真正開始學習設計,也是讓1、2點作用開始充分發揮的時候。一開始你可以先選定一個喜歡的主題或產品,例如常用的網站或app,嘗試進行幾個主要頁面的改版,試著用自己的想法去改變現版可以更好的地方,例如更適合的配色、按鈕的比例、改變元件的位置或樣式等等。
過程中一定會覺得很卡,做什麼都不確定,然後就再去觀察別人的作品怎麼做,慢慢修正自己的畫面,就這樣不斷地試做試做再試做,直到熟悉畫面的元件佈局以及有初步製作時的感覺與概念為止。
4.軟體的應用與熟悉
把軟體的熟悉寫在這麼後面的步驟,是想要表達用什麼工具不是太重要;如果會用Adobe系列的軟體,去學習其他介面設計軟體不是一件很困難的事。重點是你作品最終的呈現、你的視覺美感,而不是你用了什麼工具產出的。
目前業界以使用sketch和figma為主流,但在操作流程上差異不會太大;也不要太擔心選錯軟體,若學了sketch後再配合公司使用figma轉換也不會太困難喔(反過來也是) 。
5.讓同業的前輩給予建議
自己是察覺不到問題的。找個對此領域有涉略的前輩(設計師/企劃/研究員/產品經理都可),請他們幫看作品有沒有很明顯的違和感,或是可以加強的地方,持續精進,成品會越來越完整與成熟。
以上,是總結五個大致上的流程,每個人學習的方法其實不盡相同,若本身有其他習慣的方式,也不用硬套用本文建議喔!祝大家學習愉快。
延伸閱讀:
[嚼舌]產品設計師進化論2-UI/UX設計師與產品設計師差別
[嚼舌]產品設計師進化論3-UIUX設計師如何成為產品設計師
7 0 899 6
Kinny

產品設計師

2022/03/28

[密舌]提到沈浸式體驗,Netflix總是不會令你失望
來自Parks Associates的研究表明,Netflix的用戶平均已經訂閱了50個月以上,網路上已有很多文章講述Netflix成功的用戶體驗策略,例如個人化的首頁、跳過片頭的按鈕、自動跳轉下一集等等,目的就是要上你「上癮」,今天聊一下最近對於改版的發現。
一進到Netflix後背景會自動播放預告片,影片上方的海報圖層原本像是腰帶貫穿螢幕(圖1),改成畫面更簡潔全螢幕設計(圖2);改版後把簡介、播放按鈕隱藏起來,首頁呈現了一個乾淨的視覺層次。
預告片上方的海報圖層將作用中的選單獨立於左側,中間大留白,而在最右側出現接下來的海報選項;除了表達了操作的直覺性之外,這樣播放預告片時是不是更有臨場感了呢?歡迎一起留言討論你對Netflix的看法 : )
3 0 275 2
Kinny

產品設計師

2022/02/22

[毒舌]開發產品時,請把「我們」縮到最小
雖然很想將優秀的品牌精神發揚光大,但使用者只覺得關我屁事
案例是pinkoi app「我的帳戶」頁;關於我或會員中心等內容頁面,顧名思義就是放跟使用者個人直接相關的功能或操作;使用者可以在此頁瀏覽他「最需要知道的資訊」;將產品精神放在使用者的名稱與頭像下方會有什麼問題?由於過去使用社群、社交等產品相關的操作經驗,使用者直覺會認為這段文字是描述「我」的內容,若跟「我」無關,只會覺得莫名其妙。
使用者來使用你的產品是帶有「目的性」的,他想透過你的產品去解決他的問題或達到某種目的,絕對不是優先以「認識你們」為主要的目標;所以在資訊架構上,「產品精神」絕對不是佔篇幅最大、或最容易被看到的資訊。
品牌精神當然可以放,一般來說會在此頁有一個「關於團隊」、「關於產品」的入口,留給有興趣的人找得到即可;再次強調產品是設計給使用者用的、介面是給使用者操作的,在規劃與設計產品時,請去中心思想化,把你們優秀的團隊放到使用者之後。
這一段比較像是應聘pinkoi時可以說的話。
6 0 272 0
Kinny

產品設計師

2022/02/09

[毒舌]過度強調重點,反而會看不到重點
整理不斷膨脹的慾望,讓交互設計回歸到單純傳達的本質
案例是1111人力銀行中的按鈕,點進會員中心就可以目睹到這顆按鈕是真實存在的!一起來數數設計師在這顆按鈕上花了多少心思吧:
1.隱喻照片的相機圖示
2.標紅字重點
3.暗示可以點的手指圖示
4.意義不明的兩顆星星
5.最後不忘幫按鈕加上一條底線更凸顯
這顆按鈕似乎被寄予了很大的厚望,所以肩負了很多元素;但也因為太華麗了已經不像一顆按鈕,所以又加上了手指可以點擊的符號....告訴大家「這邊可以點喔!」;不過設計師是不是誤會了什麼呀?overdesign的按鈕除了讓產品失焦(更重要的功能被模糊),也會讓產品控件的調性變得沒有一制性( Consistency);此外,更重要的是,這樣並不好看。
若想讓使用者注意你的按鈕,有一些比較符合控件通用規範的做法:
1.顏色:白底+白按鈕難免容易被忽略,幫這顆按鈕上個底色吧
2.尺寸:適度的放大面積,讓他成為不可忽視的元素
3.留白:移除分心,與周圍的物件保持適當距離更容易聚焦喔
4.文案:不要小看文字的煽動力,打中痛點比什麼裝飾都有用
6 0 263 0
Kinny

產品設計師

2022/02/08

[毒舌]了解使用者的意圖,就知道CTA文案怎麼下
使用者中心設計不是口號,你的TA想做什麼才是重點
使用者的意圖是註冊,就給他看到註冊,DONE!
你希望他先註冊,那就寫註冊,DONE!
案例是Lalamove/啦啦快送APP的初始畫面,如果你是第一次使用的用戶,請問應該要點哪一顆按鈕呢?很顯然不是「已經有帳號了」,可是另一個是「開始使用」耶?我還沒註冊怎麼開始使用啊,然後職業病的設計師開始腦補的想說:「有些APP會讓使用者先體驗使用基本功能,然後再引導你註冊。」
只好帶著疑惑給他點下去,然後就跳轉到了註冊頁面.....
設計師的意圖是想白話的引導使用者去點擊這顆按鈕,以產品的角度來說,我們的確希望使用者「開始使用本產品」;但也許是互聯網產品的遺毒吧!我們被訓練成看到這種類登入畫面,都要找「註冊或登入」。這時「開發者的意圖」與「使用者的意圖」之間產生了一個落差,而這個落差,就是會造成使用上的遲疑與困惑。
6 0 560 1
關於教室
學習反例避免踩坑
用批評取代鼓勵
毒舌是進步的原動力
擁有一個毒舌好朋友,真好!
學習發起人
Kinny
產品設計師
87 回答 18 分享 1 教室
發起人簡介
商業設計背景出身,視覺底扎實;有8年網路產品設計與規劃的經驗,在深圳工作3年。目前在網路科技服務公司擔任產品設計主管;帶領9位設計師,橫跨B、C兩端多條產品線;與產品設計師們持續學習,提升SEO與產品行銷內容知識,做個在網路時代洪流中逆流而上的一條小魚。 ...更多