鐵人檔案
以技術開發為主的前端工程師，如何在開發流程中，加入使用者經驗設計的工作項目，然後以 React 開發一個線上相簿。希望透過這個分享，讓工程師有基本的 UX 能力，能在開發前就介入產品設計，避免在過程中亡羊補牢，導致產品最終像是個拼湊起來的結果，增加開發的成功率。並且以一個 ES6 新手記錄 React 心得。
當然可以不用，如果你的團隊裡有非常靠得住的設計師或 UX 研究員，你的工作只需要依照他們給的規格和靜態圖來開發就好了。 然而事情有時並不能盡如己意，我們不能選擇...
使用者為什麼要用你的產品呢？當然是他想完成某件事情，他不一定需要知道背後運作的原理。好比說人類一直有在夜間照明的需求，所以就有電燈的發明，從一開始的鎢絲燈泡進化...
知道了使用者需求，我們就可以開始設計功能，有幾個工具能幫助我們，今天介紹第一種 Functional Map。 其實 functional map 也就是一個心...
前面 functional map 在做發散思考，這裡的二個工具則是用來做功能的組織及收斂思考。 Flow chart 是流程圖，通常由SA製作，不過各位工程師...
前面三個階段是在確定產品的功能，一旦產品的核心不會有太大變動之後，就可以開始做畫面設計，這邊也是有三個階段- wireframing, mockup, prot...
Wireframe 只能算是畫面設計過程中的草稿，最後拍版定案的畫面會做成高精細度的圖交到前端工程師手中，這種圖就是 mockup，前端工程師就會依照 mock...
UX 設計最後一項產出物是原型 prototype。它和 mockup 都是交付給客戶的東西，目的在測試及驗證，二者一定會經過反覆修正，不可能一次到位。 Pro...
功能、畫面和操作方式和客戶確定後，終於要進入開發階段了！聽說現在 React 正夯，這個線上相簿的功能不會太複雜，客戶也沒有限制使用的技術，我們就拿 React...
template strings ES6 開始 JavaScript 也有和其他程式語言一樣的 template 功能。以前組成字串要用 ＋ 號來結合變數和字串...
Promise 我們在做線上相簿需要向資料庫要資料，以往的做法會使用XMLHttpRequest，或者jQuery 的.ajax()功能，在ES6中新增了一個原...
