iT邦幫忙

鐵人檔案

2018 iT 邦幫忙鐵人賽
回列表
Modern Web

如何在前端開發流程中加入使用者經驗設計 - 以線上相簿為例 系列

鐵人鍊成 | 共 30 篇文章 | 22 人訂閱 訂閱系列文
DAY 1

前端工程師需不需要會UX?

當然可以不用,如果你的團隊裡有非常靠得住的設計師或 UX 研究員,你的工作只需要依照他們給的規格和靜態圖來開發就好了。 然而事情有時並不能盡如己意,我們不能選擇...

2017-12-04 ‧ 由 yowlonglee 分享
DAY 2

User Stories

使用者為什麼要用你的產品呢?當然是他想完成某件事情,他不一定需要知道背後運作的原理。好比說人類一直有在夜間照明的需求,所以就有電燈的發明,從一開始的鎢絲燈泡進化...

2017-12-05 ‧ 由 yowlonglee 分享
DAY 3

Functional Map

知道了使用者需求,我們就可以開始設計功能,有幾個工具能幫助我們,今天介紹第一種 Functional Map。 其實 functional map 也就是一個心...

2017-12-06 ‧ 由 yowlonglee 分享
DAY 4

Flow Chart & UI Flow

前面 functional map 在做發散思考,這裡的二個工具則是用來做功能的組織及收斂思考。 Flow chart 是流程圖,通常由SA製作,不過各位工程師...

2017-12-07 ‧ 由 yowlonglee 分享
DAY 5

Wireframe

前面三個階段是在確定產品的功能,一旦產品的核心不會有太大變動之後,就可以開始做畫面設計,這邊也是有三個階段- wireframing, mockup, prot...

2017-12-08 ‧ 由 yowlonglee 分享
DAY 6

Mockup

Wireframe 只能算是畫面設計過程中的草稿,最後拍版定案的畫面會做成高精細度的圖交到前端工程師手中,這種圖就是 mockup,前端工程師就會依照 mock...

2017-12-09 ‧ 由 yowlonglee 分享
DAY 7

Prototype

UX 設計最後一項產出物是原型 prototype。它和 mockup 都是交付給客戶的東西,目的在測試及驗證,二者一定會經過反覆修正,不可能一次到位。 Pro...

2017-12-10 ‧ 由 yowlonglee 分享
DAY 8

ES6

功能、畫面和操作方式和客戶確定後,終於要進入開發階段了!聽說現在 React 正夯,這個線上相簿的功能不會太複雜,客戶也沒有限制使用的技術,我們就拿 React...

2017-12-11 ‧ 由 yowlonglee 分享
DAY 9

ES6 (2)

template strings ES6 開始 JavaScript 也有和其他程式語言一樣的 template 功能。以前組成字串要用 + 號來結合變數和字串...

2017-12-12 ‧ 由 yowlonglee 分享
DAY 10

ES6 (3)

Promise 我們在做線上相簿需要向資料庫要資料,以往的做法會使用XMLHttpRequest,或者jQuery 的.ajax()功能,在ES6中新增了一個原...

2017-12-13 ‧ 由 yowlonglee 分享