iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 15
2
自我挑戰組

UI 設計入門:SEO 尬網路行銷系列 第 15

【Day 15】鐵人賽 15 天回顧

進行 UI 設計入門學習第 15 天,慢慢的可以透過結構性思維去觀察事情。
以下重點回顧感受較深刻的章節:

【Day 01】什麼是 UI 設計

  • 使用者介面,目的是要使用者與其互動時,能順利完成任務
  • 為了統一設計調性、提升工作效率與優化細節體驗,須遵守設計規範 ( 溝通的語言 )

【Day 02】設計流程 (一):IA 資訊架構

我覺得學問超深的一章 ~"~ ,一直參考獸群之心的分享

  • 目的是如何將複雜繁瑣的資料,變成簡單明瞭、建構清晰的地圖,讓使用者可以更有效的獲得需要的資料,滿足搜尋的意圖
  • 使用者故事與使用者故事對照的使用 ( 探求要解決的問題,接著分析解決問題的流程和思考相對應會產生的資訊 )
  • 在思考 "使用者"、"內容"、"情境" 三大要素時,可以將自己帶入三種角色,"使用者"、"資訊提供者" 和 "資訊系統",去分類資訊,討論考量的點是什麼

【Day 03】設計流程 (二):Functional Map 功能地圖

  • 透過使用者故事 ( User Story ),歸納出功能地圖 ( Functional Map ),將使用者需求變成功能規格圖表的方法
  • 歸納整合出功能架構,清晰呈現整體規格樣貌

【Day 04】設計流程 (三):Logic Flow 操作邏輯流程

  • Flow Chart 使用了特定圖形符號來表示解決問題的步驟和程序,可以用來檢驗使用者操作時,可能發生的所有功能狀態
  • UI Flow 指的是頁面之間的操作流程。知道使用者怎麼操作一項功能後,才能去規劃動線

【Day 05】設計流程 (四):Wireframe 線框圖稿

  • Wireframe 是一個以低擬真度來呈現產品設計想法的方式,在開發流程中,依 UI Flow,將頁面進行完整的規劃安排,呈現產品頁面上的主要資訊、架構與排版與使用者如何與產品互動
  • 避免視覺設計的干擾,專注在流程、功能面;資訊架構面;使用者體驗與使用性
  • 專案中涉入程度不高的利害關係人 ( 如客戶或非技術領域的主管等 ),在觀看線框稿的時候,可能在心中會產生疑問或混淆

【Day 07】設計流程:繪製 Mockup 設計精稿之前 ( 網格系統+原子設計 )

  • 設計精稿 ( Mockup ) 或稱視覺精稿,根據確定好的 Wireframe,進行視覺設計上的配色、版面調整、動畫特效等,強調使用者體驗產品功能部分。是以達到最佳產品功能為目標的視覺呈現。
  • 網格系統是網頁設計裡最重要的觀念,它給予設計師在排版上的邏輯準則
  • 原子設計的好處:邏輯清楚、步驟明確的設計架構,可以讓專案團隊成員與利害關係人,看到階段性成果

原子設計:常用元件

  • 要去了解元件的屬性:功能是什麼? 有哪些種類、代表的情境呢? 有哪些樣式或元素、在視覺上的用途是? 建議的排版與想達成的效果? 最重要的是有哪些狀態? ( 結合前面的 UI Flow )
  • 網頁效能的影響
  • 通用設計 ( Accessibility ) 的概念

原子設計:分子

  • 要去了解它的功能為何、使用情境是什麼? 接著了解它有哪些種類、可以透過那些元件做排版去達成目的
  • C.R.A.P 是從平面設計延伸出來的設計準則,運用於介面設計的視覺與動線,進而達到優化使用者體驗的效果。

上一篇
【Day 14】原子設計:分子 ( 表單、CRAP優化界面準則 )
下一篇
【Day 16】原子設計:組織 ( 頁首、頁尾 )
系列文
UI 設計入門:SEO 尬網路行銷30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言