收收UIUX的沙龍

編輯嚴選
UI / UX 專有名詞 和 工作流程

收收UIUX
收收UIUX
2021/01/28閱讀時間約 5 分鐘
最近收到了一封學生的信，詢問在職場中設計流程是什麼？想在公司建立一套基本的制度，且附帶圖片如下：
圖片來源：網路
這張圖片應該許多人都看過，裡頭有很多專業的名詞，以及像金字一樣往上堆疊的順序，在討論工作流程前，我們一樣先來了解每個詞彙代表什麼、以及它存在的目的是什麼。
  1. User Story ：使用者需求 / 用戶故事。
    使用目的：透過故事的描述方法，帶出使用者的目的與需求，進而發想產品需要設計的功能。在每一個描述上，都以最小單元來呈現，也就是盡量拆分的越精細越好。
    使用方法：可以透過以下公式來描述。
    ex：身為＿＿＿＿，我想要_________，以便於我可以達成＿＿＿＿＿＿＿＿。
    ex：身為一個使用者，我想要折價券能依照日期新舊排列順序，以便於我可以將快到期的折價券優先用掉。
  2. Functional Map：功能架構規劃。
    使用目的：將產品所需要的功能做分類，並且列出功能之間的主次順序，以便設計時，能夠俯瞰產品會有哪些功能需要設計。
    使用方法：可以使用Coggle軟體，以心智圖方式，將功能做延伸與分類。
  3. Flow Chart：流程圖。
    使用目的：針對某一個功能，畫出開始到結束的整體流程，以及需要的判斷條件。(在此時並不需要畫出介面圖，流程僅需要用文字描述即可。)
    使用方法：可以使用Draw.io軟體，將流程圖與判斷時間點畫出來。
  4. UI Flow：介面流程。
    在這裡，許多人會問那跟User Flow有什麼不同？網路上查詢的資料也都不盡相同。而我自己的定義是：
    UI Flow ：有頁面圖的流程。
    User Flow：以文字來形容的流程。
    使用目的：畫出頁面之間的操作動線。
    使用方法：可以用Wireframe將畫面以線條方式，來做視覺上的連結，表示跳頁的順序。
  5. Wireframe：畫面線框稿。
    使用目的：畫出低保真度的原型設計，在沒有任何視覺設計 (顏色、排版) 的狀態下，確認每一頁的元件構成是否完整，以及能否達到目標功能。
    使用方法：利用設計軟體，將每個畫面必有的元件與架構畫出來。
  6. Mockup：視覺設計稿。
    使用目的：設計師必須依照Wireframe的畫面架構，進行視覺設計、畫面特效、版面形式呈現等，以增強產品質感與使用體驗。
    使用方法：利用設計軟體，例如：Sketch、Figma、Adobe XD，依照產品Design Guideline產出視覺。

  7. Prototype：動態原型。
    使用目的：確認畫面之間的連接是否正確、功能達成目標、操作體驗，以便在進入開發前可以找出問題點。
    使用方法：利用軟體，將畫面上的元件，以動態方式來做點擊跳頁、或是模擬動畫呈現，協助使用者能更深體驗產品。
終於描述完一大堆名詞了～先喘口氣。
接下來，你可能還是會有疑問：我都知道了這些名詞的意思了，那麼實際的工作流程是什麼呢？
以我在業界的經驗來說，並沒有制式的SOP流程，有時候會因為時程很短、或是緊急bug需要修復，會快速討論快速產出，並不會每個流程都會跑過。
但若在一般產品開發流程，我認為會有以下步驟：
  1. 定義需求（需求可能是從：關係利益者、數據研究、使用者訪談、User Story歸納而來）
  2. IA (資訊架構)
  3. Flow Chart
  4. Wireframe
  5. Mockup + Spec(標記)
這好像跟一開始的圖差別很大，而且少了很多項目。其實在每個產業、公司的工作流程都不盡相同，以上是我在業界及接案過程中，歸納出的結論。也就是必須最少要有以上五個步驟，才能確保產品在討論、規劃、設計時，能夠足夠嚴謹，符合開發目標，並與各部門同步資訊。
而其他的項目，若有時間，你也可以試試看把它做出來。每個步驟堆疊的目的都是：「洞察真實需求、縝密規劃設計、功能實質落地。」因此沒有必須一定要走完哪一個步驟，有時侯一個bug出現，可能就要直接畫出wireframe確認是否這樣能解決？PM或是RD確認OK後，就出立刻畫出Mockup，快速寫上Spec，交稿！
若你正在思考，要如何在公司建立完整的設計流程，不妨先確認看看各部門在過去是如何溝通與解決問題的，然後從中思考哪裡可以改善，把適當的設計步驟納入組織內跑跑看，如果能提升工作效率、減少溝通落差、加速開發時間，那麼就是值得做的。
但千萬記住，計畫永遠趕不上變化，一定要學習「在什麼時候，要做什麼才是對的事」，固執與講究完美，是很難跟上快速變化的市場哦！
我是Lisa，收收UI / UX 和 Taiwan UI / UX人生設計學創辦人，曾任職平面設計師、網頁前端工程師，最後轉職到自己喜歡職位 - UI / UX Designer，目前也是一位講師，致力於零基礎教學，與協助想轉職的人。
目前有開設零基礎的Photoshop、illustrator課程，歡迎一起來增加職場技能樹！
為什麼會看到廣告
收收UIUX的沙龍
106會員
17內容數
前往沙龍
前往沙龍
留言0
查看全部
發表第一個留言支持創作者！