App 設計：我該從哪開始?
[感謝微軟學生大使、清華大學計量財務金融學系賴虹安同學，協助翻譯原發佈於 Building Apps for Windows 部落格中的文章：Getting Started With App Design]
在軟體產業裡，我們總是常常聽到設計者和程式開發者在溝通上有代溝，因次希望能藉由本篇文章，介紹大家一些設計 App 的小撇步，幫助大家設計出更吸引人、比別人更成功的 App，同時也能減少工程師和設計者之間的隔閡！
淺顯易懂的設計 Demystifying Design
就跟工程師一樣，「設計」也是需要藉由不停的練習，才能將自身的技能結合想傳達的資訊，完美的傳遞給使用者。一些基本的技能包括：
- 排版 Typography
- 色彩學 Color Theory
- 視覺平衡 Visual Balance
- 圖像研究 Iconography
- 導航列設計 Navigation
- 設計素描 Sketching
當你學會並且時常練習這些基礎功後，你將會發覺許多以往你可能忽略的色彩美學或排版技巧，甚至，你更有可能藉此知道往後該如何修正自己的 App，讓現有的作品擁有更美觀的視覺呈現。
讓我們開始吧！Getting Started！
設計，絕不能等程式開發完的最後一刻才開始動工。做為一個 App 開發者，你可能已經發現 App 的功能和其設計息息相關。舉例來說，一旦你在功能選單放入太多項目，有些重要的功能常常在最後看起來已沒那麼重要；你也有可能發現，在設計完 App 的主視覺、編寫程式後，自己像是擁有兩個 App 而非一個。然而，設計者們卻有不少能力能解決上述這些狀況。
- 這個 App 的重點是什麼？
在開始著手設計前，請先記得了解自己的 App 的用途為何、你希望 App 使用者能夠如何使用。如果你是一個偏好視覺走向的開發者，那麼就想像這裡有一個完全空白的畫布，並且思考你要放什麼內容進去；如果你喜好利用語言、文字來表達，那麼建議你採用清單條列式來呈現。若你不屬於上述二者，那麼就先把所有你覺得你用的到的功能、希望的色彩和選單都先放上去。
接下來的重頭戲便是「簡化」。雖然這可能讓人心煩，尤其是在當你把所有心血都放上去後，但是現代 App 設計最重要也是唯一的大準則便是：化繁為簡。太多的重點和功能會混淆使用者，過多的畫面則會讓使用者難以瀏覽及記住剛剛瀏覽過的項目在哪，所以請開始動手「簡化」吧！
你可以畫一條線刪掉那些其實你並不需要的功能，然後再畫一條線，刪掉那些你覺得你需要但是其實並不適合其他清單上的項目；在反覆此步驟後，你就會發現你已經將你的 App 簡化成它最單純的樣子囉！
- 了解你的消費者
現在你需要了解你的 App 究竟是為誰而設計。
你的 App 是為孩童或是成人而設計？是為繁忙的專業人士還是賦閒在家的人所設計？這個 App 是用來做為科技知識突破所用還是給那些需要協助的人們所用？釐清這些問題將幫助你構思出整體外觀、給人的感覺以及排版設計。舉例來說，繁忙的專業人士沒有太多時間閱讀過多的文字，然而針對那些較少接觸科技的人來說，他們需要較多提示及線索來使用 App；此外，比起仿舊風，孩童大多較喜歡明亮的顏色設計。
了解你的目標消費者後，起身去和他們聊天吧！不要覺得這個舉動很多此一舉，一旦你付出越多了解你的消費者，往後設計app時你將更得心應手。在和他們談話時，可以徵求他們的同意後，錄下談話時的影片並且觀察他們、詢問他們相關問題，從中發現他們希望從你的 App 中得到什麼樣的幫助或便利。
- 靈感啟發
記得主動找尋靈感！無論是蒐集照片、字體、名言佳句、文章、或是任何和你的 App 及消費者相關的設計，甚至是那些你驚鴻一瞥的小事物，把這些材料都拿來當作你設計及程式開發的靈感來源吧！當然，你得在原創作者同意下再把這些元素加入你的 App 裡。此外，你可以觀察其他已開發的同性質 App，同時思考是否有哪些地方是你可以做為借鏡，改善自己的 App。
同樣重要的是，別忘記繪製草稿！把握所有機會，拿起筆或是蠟筆在紙上畫下 App 的設計草圖，這同時也是幫助你的「設計腦」永保靈活的一項練習。將你所有草圖都保存在安全的地方，並在開發 App 進入尾聲時將當初的草圖們都拿出來溫習，你會很開心能看見這個 App 一路的蛻變。
- 原型開發
不論是畫草圖 (sketch) 還是線框稿 (wireframe)，根據消費者給你的意見回饋建構出各種不同的畫面設計，並且，想像消費者在執行任務時所會採用的流程。你可以使用任何對你有利的方法建構原型，假設對你而言在 Visual Studio 或 Blend 上做介面設計是較快速的，那麼就使用這些工具吧！但務必注意，在這個階段你不需要太專業的軟體或是具備非常頂尖的繪畫能力，使用記事本或是繪圖板就可以了。更棒的是，你可以直接在便利貼上設計你的 App，如此一來你就可以更輕易的移動畫面元件來看不同的排列組合所呈現出來的樣貌，你甚至可以在發現排列組合的結果不是你所期望後，輕鬆地把它們放回去。
如果你不確定該從何處下手，建議你可以先看看那些和你的 App 類似的作品並且發現是否有適合你的 App 的設計流程。
現在，試試看移動畫面上的元件，如果你原本是從上方導覽 (top navigation) 開始，那你可以改試著將導覽從左邊開始；如果你原本設計的介面是擁有大型的文字頁首 (header)，那你可以嘗試將他移到畫面的底端；按鈕 (buttons) 和內容儀表板 (content panels) 也可以隨意的移至其他地方；將文字和按鈕分離或是將連結 (links) 和文字分開；透過這些更動，你會在最後找到最適合這個 App 的設計。
- 鼓起你的勇氣
現在去找一些測試者 (至少5人)，請他們在看過你的原型 (prototype) 後給予你意見，在此強調，這種易用性測試 (usability testing) 或市場調查 (market research) 比起一般的問答測驗 (QA testing) 來的好。
如果你找不到任何人願意協助你，那麼就試著想像自己是第一次使用這個 App，並思考這個 App給你的第一印象會是什麼？當你看著它是否就能夠猜出它的功能是什麼？是否就能了解下一步該怎麼做？
如果上述問題有任何答案是讓你不滿意的，那就再次拿起你的便利貼，重新尋找最佳的設計方法。先前那些你用來構思草圖的便利貼及付出的時間與心力都需要善加保存與紀錄，這些將協助你找到最終的完美解答。
大功告成 Wrapping Up
在每一步驟開始前審慎思考 App的設計會幫助你判斷程式開發與介面設計相對應的優先順序。按照本篇文章的引導，你將可以更早發現問題並解決，同時避免往後可能面臨之一切重大錯誤。
若想獲得更多資訊，歡迎瀏覽「Plan Your Universal Windows Platform (UWP) App」。