Sketch
學習 Framer 系列來到第二章，本篇的教學，將著重在如何把 Sketch 裡面的檔案匯入到 Framer ，所以還沒有接觸過 Sketch 的朋友可以先花點時間弄懂它：）。
Sketch 是近年來每個 UI UX 設計師必學軟體之一，因為直覺又精簡的操作，受到大家的喜愛。
教學文章
在這邊與大家分享各式各樣的設計教學，包含 prototype 的製作、css、sketch 等 …
設計師 學習 Framer 第一章：前言與觀念
大約去年年中，我開始把 Framer 這套原型製作工具，導入 UI / UX 設計流程中。最主要是它能實現高擬真度，且可運用 Coding 做出許多設計變化（彈性大）。不過，也因為需要一些 Coding 的基礎知識，導致許多設計師不敢接觸，個人覺得有點可惜。所以在 ” 設計師 學習 Framer ” 這系列裡，我將會從設計師的角度跟大家分享一些學習心得，然後盡可能的把 Coding 這部分降到最低，以利大家學習。
初探 Google 提出的設計敏捷方法（Design Sprint Method）
設計敏捷方法 （Design Sprint Method）是由 Google 提出，且於內部實踐並受到歡迎。它的概念基礎來自於其他已經在產業界應用的方法，例如敏捷開發（Agile）、設計思考（Design Thinking）與革新遊戲法（gamestorming）。這個方法試圖讓每個設計團隊都能輕易的導入，且能於 2~5 天內解決設計挑戰或測試設計原型。
本文介紹的內容整理於 Google 在 2015 年公開的電子工具書 – “Design Sprint Methods“，這本書簡述這個方法中的角色、功效、時間、工具與流程等項目，不過 Google 也指出他們的目的，並非要求大家一定得按表操課，而是鼓勵或激勵新創或任何規模公司的設計團隊，能發展出更有趣、多產且能適應的變通方法。好吧！廢話不多說，以下就讓大舌頭來導讀吧～
Sketch 初心者在設計 UI 前要做的五件事！
就像廚師大展廚藝前要備菜一樣，產品設計師在做設計前，也應該把需要的材料都準備好，設計才會順利快速。Sketch 是現在 UI 設計師最喜愛的繪圖軟體之一，在開始繪製畫面與展開工作流程前，進入”可持續設計”的狀態是很重要的。在此，設計師 Jon Moore 分享給讀者 5 個 Sketch 繪製前要做的事情，協助你進入這個狀態裡：
虛擬實境體驗當道，設計師需要知道的 VR 互動方式
VR (虛擬實境 Virtual Reality) 與 AR (擴增實境 Augmented Reality) 發展已久，但近期的應用與風潮才逐漸發燒，其互動設計也未定型，本文帶來現今多款 VR 的互動方式，對於即將或已經著手設計的 VR 設計師應該有所幫助。AR 在互動設計發展史是一個重要的里程碑，發展中每一項里程碑都源自技術和人性的碰撞。從最初的紙帶打孔，發展到鍵盤與滑鼠，及現在進行式的觸控、語音識別，及已經成熟的 3D 手勢、眼動識別等。甚至，未來還會實現腦波控制與意念識別。每一次的技術革新及產品升級，都會帶來人機互動方式的變化。但不管怎麼樣，最核心的還是要符合人體的自然動作，讓人們以最舒適的方式獲取資訊。
產品訪談時，別問使用者的感覺是真的嗎？
UX 一路走來，學習使用者 訪談 的過程從見山是山、見山不是山、慢慢走回了見山還是山。先講結論，其實直接詢問使用者的『感覺』是可以的，甚至可以透過這種方式挖掘更深層使用者心中的想法，但這種做法在學術界被認為不夠嚴謹，且同時使用者訪談的新手常會因這麼做而犯許多錯誤，所以建議在學習 訪談 的初期避免這種做法。
這個議題我將分成三個部分來進行闡述：
一、為何別詢問使用者『感覺』的理由
二、專注於使用者做了什麼，而非想什麼
三、突破傳統學術，其實你可以問使用者怎麼想
Continue reading
UX 4: Feature Prioritization
關於 UX，筆者之前有寫過：1) UX 1: UX Design Process & User Research, 2) UX 2: Competitive Analysis & Persona, 3) UX 3: Define Problem & Ideating 等文章，建議先看過前面的，再看這篇會有比較清楚的脈絡。
Feature，顧名思義大家都知道，舉常用的產品 “相機” 為例子，相機上面有很多功能，但我相信大部份的消費者買來之後，最後還是都用智能模式居多，其他大部份的 Features 都沒有用到；這說明了一個法則，就是之前很紅的 80/20 原則，用戶 80% 的時間都花在 20% 的特定功能上，當然相機還有更多值得發掘的功能，但可能僅會被少數的人使用。
UX 3: Define Problem & Ideating
我這邊是承接之前寫的
建議先看完前面兩篇，對於整體流程會更清楚。
UX 2: Competitive Analysis & Persona
這篇是延續之前所寫的 UX Process & User Research 的文章，做完 User Research 之後所要做的步驟包含 Competitive Analysis, Affinity Map 和 Persona。
UX 1: UX Design Process & User Research
UX Design Process
UX 代表的是 User Experience（用戶體驗），主要著重於了解用戶如何和產品或工具互動的過程，基本上，UX 就是盡可能讓整體的流程和體驗更加愉悅。
不同的公司或是不同的流程在做 UX 的時候，可能會有些許的不同，但是整體都還是會參照這個流程： 1) 從用戶研究 (User Research) 開始 2) 根據研究來做出東西 3) 測試所做的東西 4) 重複 (Repeat)。 Continue reading
使用 sketch 改善網頁前端與設計的標註與合作方式
本篇文章轉載自 使用 sketch 改善網頁前端與設計的標註與合作方式，已獲得作者 patw 的授權轉載。文章主要是以開發人員（RD）的角度切入，介紹團隊開發產品時，所常遇到的總總問題與痛點（UI 設計 的標註、協作、溝通 …），並透過不同軟體間的搭配來改善開發流程所遇到的痛點，這些 UI 設計 工具包含了繪製 UI 的 sketch，輔助標註 UI 設計 所有元件尺寸的 Zeplin，實現頁面之間互動的 inVision，文章中會針對這些軟體做進一步的介紹，讓我們一起來看看吧！
前言
身為一名網站前端工程師，關於「工程師與設計師如何進行合作，進而能完成更好的作品」一直是個讓我感興趣的議題。當然這個議題範圍相當廣泛，從規格規範、工作流程、彼此的換位思考，到各式能提昇效率的工具等等。
去年認識了幾位網頁設計領域相關的朋友，在工作之餘的分享小聚中，得知「Sketch app」這個好用的應用程式，它似乎能改善工程師與設計師合作時遇到的許多痛點。今年才來介紹 Sketch 是有些 Lag，不過還是紀錄一下我的試用過程吧。
After Effect 轉 svg 動畫 – 神奇的 bodymovin 插件
在製作網頁的過程中，以往遇到太複雜的動畫時我不會用 css 處理，而是直接轉成 gif 檔，但 gif 檔實在是超級大，如今在螢幕尺寸百家爭鳴的生態之下，更需準備多組大小才能讓動畫看起來銳利。對於這話題，Ivan Wei 寫過一篇文章 “Android — 讓 apk 裡的切圖容量減少95%的好方法” 非常詳細的介紹如何運用 svg 處理圖樣 icon，現在我們面對 svg 動畫 而言又有甚麼方案呢？ Continue reading