一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
訂閱我們
一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
訂閱我們
沒有結果
檢視所有結果
一塊設計 | apo design - 設計共筆部落格
沒有結果
檢視所有結果
Home UI / UX 設計

您可能知道的 UX|基礎應用篇

in UI / UX 設計
by sanmu
2 月 17,2021
2 min read

大家好! 新年快樂!! 快樂的長假結束了,各位的年節過得如何呢? 接續上次的基礎介紹篇,這次來分享一下基礎應用~! 分享內容是這幾年自己摸索 + 找資料看書後,覺得比較能在有限時間與人力內的應用,適合獨立作業的 UI 設計師使用的簡單 UX 研究方法。如有不足或錯漏處,歡迎指正討論( 但不要罵我 (༎ຶ⌑༎ຶ) 玻璃仔承受不住重擊 )。

下面開始正文分享!

介面設計中,常會因應需求為專案調整不同的設計方針,然而需求百百種,如何抓住目標客群的主要需求與使用習慣,讓產品介面能切中要點達到優秀產品的標準線,單靠設計師空想效果是有限的,此時 UX 的研究方法能幫助我們,讓我們快速抓住要點,檢驗自己的設計是否有不合宜或需要調整的地方,接下來就順著設計流程來 一一 介紹!

1.了解你的目標使用者 / 製作使用者旅程地圖 ( User Journey Map )

這個步驟中,我們需要先釐清產品使用的主要族群,以此深入分析這個族群的特點與使用習慣。比如使用者主要為中高齡者,產品需要盡量和舊有的產品使用邏輯相近,減少再次學習造成的壓力和負擔。而青少年族群則可以在現有基礎下做更多變化,因為他們的適應性與學習力彈性相對要大一些。而這些年齡段的使用者,又可以分別分為不同族群:

比如 50-70 歲的銀髮族、20-40 之間的上班族、新手爸媽、中年主婦主夫、有流行需求但沒有太多零用錢的國高中生等等,因為生活習慣與經歷不同,他們對產品的需求與審美偏好也會有所相差,因此做好事前調查是非常重要的一環。

但是,從零開始,一對一的對使用者進行採訪,不只非常耗費人力資源,也會擠壓到後續設計開發的時間,因此比起自己調查,我覺得直接向業主採訪,或去搜尋競業的社群平台查看他們的追隨者、研究競業者們產品中的異同,會是更快速且節省成本的方式。

這個階段可以由 PM、企劃、設計師共同進行,在取得共識後,為目標使用者建立一個明確的模型形象( 使用者人物誌 ),並以這個人物誌的性格、需求、習慣為參考,為其描述從產生需求、與產品產生互動到最終結果的過程中,產生的問題與痛點,以此找出需求與設計目標( 即為使用者旅程地圖 )。

2.建立結構化腳本( scenario )

結構化腳本,它所描述的是一個「 理想的網站應有狀態 」。它的具體內容是,使用者從知道、接受服務到完成服務後的確認或反饋管道,一系列流程中可能遇到的事件,為滿足 [ 慾望 ] 進行的行為,與產品交互產生的 [ 操作 ] ,可能產生的感受或獲益。 我們會在這個過程中詳細的為我們的產品描述,在每個步驟中,我們預期產生的反饋,與整體網站想要達到的目標、理想情境。

當然因為有些( 大部分 )專案很趕的情況下,這個步驟能夠被允許占用一次會議時間的機會實在不多,因此通常都是由設計師製作 Wireframe 的時候邊做邊想,隨手記錄在草稿紙或記事本上。雖然實際做出來討論的機會不多,不過個人認為這是非常實用的思維模式,不只是在線框稿( Wireframe )繪製階段,在後續原型製作時,持續的帶入人物誌模型思考,反覆檢視腳本中所描述的網站預期目標,也能幫助發現設計的各種問題或挖掘出新的方向。

3.線框圖( Wireframe )

線框圖( Wireframe )是進入視覺設計階段的第一個步驟。摒除複雜的視覺美感問題,這個階段主要考慮每個步驟的功能區分布、操作流程,由於不必考慮美觀設計問題,我們可以快速的做出成品,並藉由原型工具( 特別推薦 Xd 或者 Figma ),讓其他人實際模擬操作一次,看不熟悉這個介面的人,是否能如你預想的那樣,順利的完成步驟,如果不行,就繼續調整,直到流程順暢。推薦除了同事也可以找一些非介面設計相關的親友操作看看( 比如兄弟姊妹或爸媽 )也許能找到我們發現不了的盲點!

4.視覺稿( Mockup )/ 原型( Prototype ) 製作

線框圖架構確認無誤後,我們就可以開始加入視覺元素,此階段依然需要 UX 的幫助,根據不同的使用者偏好與產品調性,我們需要採取不同的設計策略。比如銀行網站設計得像 PXhom● 購物節活動網站,充滿華麗裝飾和繽紛的色塊,就明顯並不適合,不只視覺感受違和,也會對操作與功能辨識造成障礙。

在視覺稿完成後,確認風格方向 ok,接下來就要進行原型的製作。Prototype 是利用工具,實現按鈕與頁面的串接,在進入 coding 階段前進行功能流程的體驗測試。這個階段裡,我們可以檢視加入視覺後的產品介面有無衍生其他問題,功能辨識、體驗感受是否與一開始的設定出現偏差,以便在進入最終程式開發階段前能及時修改。順帶一提,關於 Prototype 工具 一塊設計專欄中 Lauren 寫了兩篇關於 Xd 和 Figma 的介紹與比較,非常值得一看!

後記

上述的簡略版設計流程,除了在建立人物誌時需要與團隊一同進行達成共識外,基本上都可以由個人為主,協尋外援以最精簡的時間達成,不需要高昂的時間人力成本,雖說效用必不可能與擁有嚴謹完整 UX 流程的團隊媲美,但在人力時間有限的情況下不無小補。

除上述提到的方法,常用的 UX 研究方法還有 卡片分類法、專家評估、眼球追蹤、實地考察等等。

卡片分類法能藉由使用者對單詞卡片進行的分類,幫助團隊快速驗證資訊架構是否正確。專家評估則是藉助熟習 UI 架構的專家( 可能是你的同事或主管或顧問 )瀏覽原型後根據自身專業經驗,進行易用性評估,相較於需要尋找受測者進行上機操作測試,追蹤視線,並進行事後採訪的眼球追蹤,更加便捷省時。

UX 研究方法除了這些還有很多,整體來說,並沒有固定的流程和一定要進行的步驟,一切行為的最終目的,都是為了幫助專案團隊找到目標群眾真正的痛點和設計方向,找到解決問題的最佳配方。希望這篇分享能給你一點小小的幫助,也歡迎留言告訴我你的看法,讓我們共同討論成長!

新年快樂!祝大家身體健康,事事順利,下篇見!

系列前篇 │ 您可能知道的 UX|基礎介紹篇

Tags: UX
ShareShareShare
sanmu

sanmu

上一篇文章

淺談 服務型態網站 與 形象網站 的區別

下一篇文章

📬 一塊設計有電子報囉!🎉

相關文章

使用者經驗訪談,我所學到、獲得的。

使用者訪談,我所學到、獲得的。

by Debby
12 月 07,2022

這篇文章將分享我在接觸訪談前後,發現工作上的差異。 算是整理自己在這期間在實務上學習到的心得紀錄。(?)

《塑思考》那些執行設計以外的選項

《塑思考》那些執行設計以外的選項

by Niki
10 月 26,2022

起初留意到這本書的原因是書腰寫著「不做設計」「不改設計」,內心疑惑著究竟該如何做到呢? 然而《塑思考》內容並非如此,日本極具份量的設計師佐藤卓對於設計有另一番詮...

接案設計師的常見盲點

接案設計師的常見盲點

by Shuan Wen
7 月 06,2022

踏入全職接案滿三年了,加上前面兩年待在接案公司的經驗,五年來也經手近百個專案了吧! 儘管接觸了各樣的專案,每次執行時還是避免不了一些錯誤,加上幾次和待在產品公司...

Back to List

一塊特別企劃

一塊特別企劃|設計師問與答
連結至一塊設計 facebook 專頁

標籤

Adobe Xd (3) B2B (1) COVID19 (1) designer (2) design tool (3) Figma (4) functional map (1) HTML (2) illustrator (1) UI (26) UX (18) web design (1) Wordpress (2) 字體 (7) 無障礙網站 (5) 產品設計 (2) 筆記 (4) 經驗分享 (26) 網頁設計 (20) 設計師問答 (1) 設計選書 (2) 課程心得 (1) 講座 (2) 購物流程 (1) 週年企劃 (5) 遠端工作 (2) 電子報 (1) 靈感 (4)
一塊設計 a piece of design

聯絡我們

任何合作或問題請洽:
info@apodesign.tw

  • 服務條款
  • 隱私權政策

Follow us

Copyright © 2020 apodesign.tw All Rights Reserved.

沒有結果
檢視所有結果
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書