進行 app 設計，有許多要考量的要素，如：較小的螢幕、更短的專注時間（對使用者）等。在理想的狀態下，我們當然希望設計出讓新用戶能輕易操作的介面，並減少無趣或挫折的體驗。那如何打造完美的 app 呢？我們將在文章內提供７點建議，讓你學習如何用正確的觀念與方法，來設計移動裝置介面。若你想要更深入的了解移動裝置介面設計，我們補充免費的電子書資源：Mobile UI Patterns 與 Interaction Design Best Practices。
雖然 app 的介面數量與設計的頁面空間較網頁少，但不代表互動設計的準則就無法應用。
根據此篇文章（Five Pillars of Interaction Design）所提到的，要有好的 app 互動體驗需注意下述五點：
app 設計 所要考量的地方不單只有螢幕大小。Maier 指出：使用者類型、操作情境或體驗等因素會構成介面設計上最基本的約束。所以，要打造以目標為導向的 app 介面首要的任務就是了解你的使用者。
在 Guide to UX Design Process and Documentation 一文中提到，想要了解你的使用者，有三個基礎的策略與方法：
執行以上的流程有助於你節省設計初期時，煩惱如何了解使用者的時間。
Google Venture的 Braden Kowitz 曾經說過：應該要把 startup 的教條＂儘早上線並時常更新＂替換成＂更早學到並時常學習＂。對我來說，用這樣的觀念，讓我敞開心胸學習 startup 過程中的所有事物，而使用者研究與如何得到洞見則是 startup 中最核心的任務。
綜上所述，若能在適當的流程中進行使用者測試是最好。若沒有資源做完整的使用性測試，你也可以透過線上服務來進行的使用性測試，如 UserTesting。藉此，你可以釐清使用者如何使用你的產品，並發現使用者行為的差異，從中得到更適合使用者的洞見。最後，我們建議在一次使用性測試中，至少有五位使用者參加。若還想要了解更多，推薦閱讀使用性測試專家（Jeff Sauros） 提供的 移動裝置 app 使用性測試建議。
設計與研究是可以同步進行的。例如，透過你所認知或學習到的資訊，快速的把使用者進行此項任務或功能的流程展開。接著，在定義正確的介面流程前，建立一個簡單的原型（prototype），而這個原型不需要太過花俏或複雜，甚至可隨手畫於紙上。藉此，你可以清楚的瞭解使用者進行此任務的流程與產品內容、操作行為間的關係。
如果你打算把整個操作流程展開，也許可考慮用＂文字描述＂的方式，把各頁面的功能、跳轉流程順序與內容……等安排好，而不是馬上繪製 wireframe。 Jessica Downey 曾經提到此方法，有興趣的讀者可延伸閱讀。而這樣的方式可快速呈現 app 的概念，以及讓人輕易的理解每個頁面之間的關係。
讓我們試著建立一個關於銀行 app，情境是使用者希望開啟自動存款的功能。
自動存款 關閉
[設定 自動存款]
選擇存款頻率
[一個月一次][一個月兩次]
[每隔一週][每週]
存款
一個月一次
[選擇日期]
設定金額
[輸入金額]
[設定 自動存款]
在繪製草圖或製作原型前，＂寫下＂產品流程可協助探索最重要的部分 – 內容，而非視覺。而這樣以內容為主的流程呈現方式，更能讓你精準的估計 app 需要多少頁面。接著下一步，你可以開始繪製流程上每一頁的草圖（在這範例中，你需要建立四個畫面草圖）。而這階段，可以視時間或技術等因素，以不同的方式來製作原型，例如：繪製在紙上的原型或使用數位工具，如 UXPin。
最後做個總結，“文字” 是表達、呈現產品流程最快的方式，用來探索不同頁面間的架構關係；而接下來繪製的草圖，則可呈現流程中各頁面的細節；最後串起的原型可讓你進行使用者測試，釐清並發現產品的相關問題。
移動裝置的設計受到不同裝置的差異而有所影響，例如 大拇指的觸控區、手機方向（垂直或水平）與手勢 等。我們可藉由觀察受歡迎的 app 介面，與了解 一般的行動裝置操作模式 來學習如何設計，例如下圖側邊欄所滑出的導航列。如此，你所設計的介面就能讓使用者感覺相當熟悉，因而提高使用性。（更多內容可參考 Treehouse 的 Blog）
但千萬別誤會！我們並不是建議你直接複製別人的設計，而是認為這些常見的 UI 模板（或其中的元素）已有良好的使用性，使用它既省時便利，又不會讓使用者增加學習成本，當然也可結合更多的創意！如此一來，你可以確保你的產品符合使用者的期待，同時也不會因為跟其他產品過於類似而顯得無聊。
這本電子書（Mobile UI Design Patterns）中提到，移動裝置的互動設計模式大致上分為兩類：
參考移動裝置的互動模式可以協助你選出最適合的 UI 元件，例如，先排除不同系統的規範，對使用者來說，導航的按鈕放在下方比放上方 更易於以大拇指操作（ios 的設計方式）。
Yelp 是一款在互動設計上表現得非常直覺的 app，它有簡潔的介面，按鈕的大小與配置也能恰到好處，按鈕的意旨也能與使用者認知一致。此外，它使用了許多常見的移動裝置介面模板元素，例如工具列等。
此外，保持 app 內的文字簡單易懂也相當重要，以下我們對此有一些建議：
參考 capptivate 與 Use Your Interface 的精美介面範例，再融合適當的手勢、動態效果、文字等，將更容易打造出獨特並受歡迎的 app。
手指無法如滑鼠般進行精準的操作，所以設計行動裝置 app 時，需考量讓手勢操作更友善的互動方式。例如，在介面上規畫足夠的空間，讓使用者可輕鬆的使用手指操作。相反的，若按鈕尺寸過小或彼此間距太過接近，造成使用者不能精準點擊，則可能讓使用者產生挫折感而放棄使用。
針對此議題，我們提供兩個建議：
上述的 44-pixel 準則不一定永遠都適用。Steven Hoober 提醒大家不要設計一個過大的按鈕，因為這樣會導致使用者認為它不是一個可執行的動作。最後，還是建議大家在設計 app 時，能考量人們手指如何與行動裝置互動的相關議題。
自從蘋果完全拋棄擬物化的設計風格後，扁平化設計就一統軟體介面設計的風格，但這並不代表陰影與漸層的設計手法沒搞頭。相對的，它們反而漸漸地又被設計師使用。例如 Google 提出的設計語言 – Material Design，若讀者有興趣，可以參考這篇文章：Material Design 與扁平設計的差異。
根據 Erik D. Kennedy 的 文章指出，陰影可以幫助大腦理解介面的層級或功能，這大概也是過去擬物風格常被使用的主因吧。所以，當我們在思考按鈕、開關等視覺線索（visual cues）時，不妨考慮陰影這個元素特徵吧！此外，Erik 也提到，如同現實中的物件下方與表面上都會有陰影，因此當陰影應用於介面元件上，人們也會覺得相當自然、無違和感。
陰影與漸層的應用讓使用者容易與現實物理現象做出連結，而自然地學會 UI 上的操作或前後關係。你可以透過陰影與漸層創造出具有內凹（inset）/外凸（outset）的 3D 按鈕或輸入欄位等。Erik 將常見使用這些手法的元件 歸納如下：
內凹元件：
外凸元件：
扁平化設計趨勢的現今與未來一文中提到，使用混和型扁平化設計（semi-flat design：使用部分擬真元素，如陰影等），可更容易表達元件的內凹或凸起感。此外，你的 app 介面也可保持現代風格，同時具有擬真效果的視覺提示。
儘管過去認為使用者點擊超過３次就會離開的迷失已經被推翻，但這套說法在設計時還是必須被考量。因為這可驅使你徹底的思考，哪些東西才是頁面上或流程中必要的。理想中，使用者完成任務的步驟越少越好。Yahoo 的 CEO（Marissa Mayer）曾經向設計師提出 “兩次點擊” 的準則，她說如果使用某款 app，而無法在兩次點擊內做到你想做的事情，那就該重新設計了。
如同她所解釋的：
“ Yahoo 的 Flickr app 透過這個準則，達到了不錯的成效，使用者可以在兩個步驟內完成許多任務，例如：拍照、瀏覽畫面與相簿、查看社團、設定通知 … 等。 ”
所以，試著減少使用者操作過程中的負擔吧！使用者越是不需思考，你的 app 就可能更容易成功。
本文章已獲得作者授權，翻譯自：7 tips to create awesome mobile app designs by Jerry Cao ，原文出處 TNW News
Image credit: Shutterstock
本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。
