104學習精靈
網頁UIUX
網頁UIUX
關注
邀請朋友 
Facebook
Twitter
Line
複製連結
Hi~ 歡迎分享學習資源，有學習問題可匿名向Giver發問！
我要分享
我要提問
網頁UIUX 學習推薦
全部
影片
文章
[嚼舌]產品設計師進化論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設計師如何成為產品設計師
4
0
1012 3
拍手
留言
分享
Line
複製連結
收藏
[嚼舌]產品設計師進化論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設計師如何成為產品設計師
3
0
693 6
拍手
留言
分享
Line
複製連結
收藏
[密舌]提到沈浸式體驗，Netflix總是不會令你失望
來自Parks Associates的研究表明，Netflix的用戶平均已經訂閱了50個月以上，網路上已有很多文章講述Netflix成功的用戶體驗策略，例如個人化的首頁、跳過片頭的按鈕、自動跳轉下一集等等，目的就是要上你「上癮」，今天聊一下最近對於改版的發現。
一進到Netflix後背景會自動播放預告片，影片上方的海報圖層原本像是腰帶貫穿螢幕(圖1)，改成畫面更簡潔全螢幕設計(圖2)；改版後把簡介、播放按鈕隱藏起來，首頁呈現了一個乾淨的視覺層次。
預告片上方的海報圖層將作用中的選單獨立於左側，中間大留白，而在最右側出現接下來的海報選項；除了表達了操作的直覺性之外，這樣播放預告片時是不是更有臨場感了呢？歡迎一起留言討論你對Netflix的看法 : )
2
0
645 1
拍手
留言
分享
Line
複製連結
收藏
[毒舌]過度強調重點，反而會看不到重點
整理不斷膨脹的慾望，讓交互設計回歸到單純傳達的本質
案例是1111人力銀行中的按鈕，點進會員中心就可以目睹到這顆按鈕是真實存在的！一起來數數設計師在這顆按鈕上花了多少心思吧：
1.隱喻照片的相機圖示
2.標紅字重點
3.暗示可以點的手指圖示
4.意義不明的兩顆星星
5.最後不忘幫按鈕加上一條底線更凸顯
這顆按鈕似乎被寄予了很大的厚望，所以肩負了很多元素；但也因為太華麗了已經不像一顆按鈕，所以又加上了手指可以點擊的符號....告訴大家「這邊可以點喔！」；不過設計師是不是誤會了什麼呀？overdesign的按鈕除了讓產品失焦(更重要的功能被模糊)，也會讓產品控件的調性變得沒有一制性( Consistency)；此外，更重要的是，這樣並不好看。
若想讓使用者注意你的按鈕，有一些比較符合控件通用規範的做法：
1.顏色：白底＋白按鈕難免容易被忽略，幫這顆按鈕上個底色吧
2.尺寸：適度的放大面積，讓他成為不可忽視的元素
3.留白：移除分心，與周圍的物件保持適當距離更容易聚焦喔
4.文案：不要小看文字的煽動力，打中痛點比什麼裝飾都有用
5
0
889 0
拍手
留言
分享
Line
複製連結
收藏
[毒舌]了解使用者的意圖，就知道CTA文案怎麼下
使用者中心設計不是口號，你的TA想做什麼才是重點
使用者的意圖是註冊，就給他看到註冊，DONE！
你希望他先註冊，那就寫註冊，DONE！
案例是Lalamove/啦啦快送APP的初始畫面，如果你是第一次使用的用戶，請問應該要點哪一顆按鈕呢？很顯然不是「已經有帳號了」，可是另一個是「開始使用」耶？我還沒註冊怎麼開始使用啊，然後職業病的設計師開始腦補的想說：「有些APP會讓使用者先體驗使用基本功能，然後再引導你註冊。」
只好帶著疑惑給他點下去，然後就跳轉到了註冊頁面.....
設計師的意圖是想白話的引導使用者去點擊這顆按鈕，以產品的角度來說，我們的確希望使用者「開始使用本產品」；但也許是互聯網產品的遺毒吧！我們被訓練成看到這種類登入畫面，都要找「註冊或登入」。這時「開發者的意圖」與「使用者的意圖」之間產生了一個落差，而這個落差，就是會造成使用上的遲疑與困惑。
6
0
409 0
拍手
留言
分享
Line
複製連結
收藏
你可能感興趣的教室