UX = User Experience
User Interface ≠ User Experience
UI : what people use to interact with the product.
UX : how they feel while they do.
根據這篇「Sketching For Better Mobile Experiences」談到針對手機介面草稿設計過程的下列兩項重點，值得大家注意：
- 廣泛設想各種介面草圖 (DIVERGENT SKETCHING)Start sketching different versions of a single key screen or parts of it. Your goal is twofold: to generate a lot of different ideas, and to explore and evaluate them — at the same time. The more ideas you come up with, the more options you will have to choose from later on. Once you have sketched multiple versions of a screen, pick the one that best solves the problem.
- 訂出介面操作流程 (CREATING UI FLOWS)Your flow would then no longer be linear; different branches would show different outcomes. But try to limit the number of branches in a single UI flow.
上述草圖就是用來溝通的線框圖Wireframe (什麼是 Wireframe ?)，是一種低保真度的設計原型，在去除所有視覺設計細節之下，進行頁面結構、功能、內容規劃。Wireframe 製作成本低，容易被修改、繪製快速，在開發初期是溝通和發想的重要步驟，節省時間和人力成本，又可防止開發中期發現缺漏或不合用導致全盤重來。
附帶一提，如果有手繪完成整個APP所有介面的設計草圖了，你還可以將這些手繪草圖變成在手機上做模擬操作示範喔，只要用POP(Prototyping On Paper)這個App或Marvel這個平台，做出各個草圖頁面的串連流程就能做操作展示之用。
可是手繪草圖不易修改，也不方便以線上分享方式做溝通，這時候可以考慮用Cacoo平台(免費帳號可設計25 sheets)的Wireframe繪製工具，選擇平台上既有圖案圖庫的iPhone、iPad、Android等類別之介面元件圖，以拖曳方式將元件圖組合起來，就算是不太會畫圖的人都可以很快做出Wireframe。
另外，也可以考慮使用moqups平台來畫Wireframe (免費帳號可設計 2 projects (limited to 300 objects) ＆ 5MB of storage)。這類工具蠻多的，有興趣可進一步參考「製作 Wireframe 設計圖的免費工具整理」的介紹...
若你不喜歡用線框圖來呈現介面設計概念，另一種可以做的方式就是做個打樣(Mockup)，Mockup介於網站線框圖(Wireframe)及原型(Prototype)之間，具備中高的擬真性(middle to high fidelity)，主要的目的是提供完整、實際的視覺設計，包含圖形、排版、以及網頁上大大大小的元素等的視覺表現。(參閱「以使用者為中心的設計方法2－WIREFRAME, MOCKUP AND PROTOTYPE」)
在設計APP方面最為推薦的打樣工具，應該就是Fluid UI這個平台了，很容易就能做出手機APP介面設計及串連全部頁面流程(免費帳號可設計 1 project 10 pages)，編輯功能要先安裝Chrome外掛套件。而通常做出打樣介面就是為了跟客戶(或設計團隊)溝通，所以Fluid UI還能像範例進行線上Demo。
另一個Mokk.me也是很簡單就能弄出單頁打樣，其模擬介面完全就是陽春版的iPhone風格，也可以線上分享Demo，所以如果沒有要串連頁面流程，Mokk.me是個最快就能上手的工具。這類工具也是蠻多的(只是有不少都是僅有數天免費試用的付費使用平台或下載軟體)，有興趣可進一步參考「20款優秀的App原型和線框圖設計工具」的介紹...
最後，如果自己要做出怎樣的操作介面都還沒想法，那就是多多觀摩既有的APP設計，下列可以多多參考：
- Mobile Patterns
- Mobile Tuxedo
- Android Pttrns
- Beautiful APP UI Design in Pinterest
- Android UI Design - Patterns
- 像個設計師一樣設計你的 APP 介面
最後的最後(怎麼沒完沒了啊)，APP設計風格在2014年的Google I/O大會發表Android 5.0之後，又有了新的方向，稱之為「質感設計(Material Design)」設計語言，介面風格變得平面化、看起來也更清爽簡單。Material Design的兩大目的，第一、創造一種設計語言，融合先進技術與設計經典準則。第二、支援跨平台且不同螢幕大小裝置的設計風格，並提供一流的輸入體驗。
看來，前端工程師又得要展開新一波的設計風格調整了...
- Google 拿出了能與蘋果一高下的設計準則：Material Design
- Material Design 引領的設計趨勢
- Material Design介紹與實務
- What is material? (Google) (中文翻譯版)
- 幾款 Material Design 介面設計 Android app 推薦
- 14 款 Material Design 介面設計 Android App 嘗鮮推薦
- 推薦幾個Material Design Apps
- Material Design in Pinterest
- 15 Cool Material Design Examples
- Material Design UI Android Template App
- Google Material Design: Everything You Need to Know
- ThemeForest Templates tagged as Material Design
- ENABLED'S STORE
- 10 HTML5 Mobile Web Templates
- 7 Material Design Web UI Frameworks
- 10+ Best Responsive Material Design HTML5 Templates in 2015
- Material Design Blog
- MyAppTemplates.com
- Material Design Resources
要開發Material Design風格的網頁，直接引用下列框架最方便...
- Materialize CSS
Carnegie Mellon University的學生開發出來的框架，個人認為是實現Material Design的首選。(下載框架檔案並將這個範例(jsfiddle) (jsbin)套用看看) - Bootstrap Material Design
熟悉 Bootstrap又想套用 Material Design 的話，可以參考看看這個。
