助你衝高下載量的七大app 設計思維！

我們將在文章內提供7點建議，讓你學習如何用正確的觀念與方法，來設計移動裝置介面。

若你想要更深入的了解移動裝置介面設計，我們補充免費的電子書資源：Mobile UI ... Skiptocontent 助你衝高下載量的七大app設計思維！ APP,UI/UX,翻譯文章 121月,2016 Wilson 進行app設計，有許多要考量的要素，如：較小的螢幕、更短的專注時間（對使用者）等。

在理想的狀態下，我們當然希望設計出讓新用戶能輕易操作的介面，並減少無趣或挫折的體驗。

那如何打造完美的app呢？我們將在文章內提供７點建議，讓你學習如何用正確的觀念與方法，來設計移動裝置介面。

若你想要更深入的了解移動裝置介面設計，我們補充免費的電子書資源：MobileUIPatterns與InteractionDesignBestPractices。

Photocredit:OmarJordanFawahl,CreativeCommons2.0   1.互動設計的準則總是管用！ 雖然app的介面數量與設計的頁面空間較網頁少，但不代表互動設計的準則就無法應用。

根據此篇文章（FivePillarsofInteractionDesign）所提到的，要有好的app互動體驗需注意下述五點： 目標導向設計（Goal-drivenDesign）：設計過程中，絕對希望產品能滿足目標使用者的需求，而人物誌（persona）這個方法可以避免你在開發過程中偏離目標使用者的需求。

透過研究或訪談目標使用者，我們可以將他們的虛擬角色創建出來（包含背景、目標與需求等），團隊就能依據persona的資訊進行設計或修改使用流程等，以滿足他們的需求。

使用性（Usability）：若用戶無法輕易的使用你的app，那他們也不會想從appstore中下載。

良好的使用性能讓產品＂好用＂，在競爭的市場中，這已經是最基本的要素了。

預設用途與指意（Affordance&Signifier）：預設用途與功能的“自我解釋”相關，指意則暗示或提示有何預設用途。

舉個例子，文字下方有藍色底線，意味著具超連結的功能。

使用正確的＂指意＂可讓使用者不須思考就能知道介面元件代表的功能。

可學習性：大家肯定希望使用者能直覺的操作產品，這也就是為什麼我們在文章後段提到，建議開發團隊可以使用合適的介面模板。

藉由使用者相當熟悉的介面模板，讓他們更快地適應新app。

回饋與反應時間：系統的回饋可以讓使用者知道任務完成與否？回饋的型態也許是簡單的“嗶”一聲，也可以是複雜些的跳出視窗（modalwindow）等。

不管如何，請確保回饋方式是友善的、具人性的以及合適的反應時間區間（可參考NielsenNormanGroup提出的timingguidelines）。

AndrewMaier也特別在這篇文章中提到：上述五個設計準則為打造好設計的基礎，在著手進行任何互動設計前都應該了解它。

  2.了解你的使用者 app設計所要考量的地方不單只有螢幕大小。

Maier指出：使用者類型、操作情境或體驗等因素會構成介面設計上最基本的約束。

所以，要打造以目標為導向的app介面首要的任務就是了解你的使用者。

PhotoCredit:KārlisDambrāns,CreativeCommons2.0   在GuidetoUXDesignProcessandDocumentation一文中提到，想要了解你的使用者，有三個基礎的策略與方法： 人物誌（Persona）:人物誌即是透過觀察與研究使用者的行為，來建立目標族群之虛擬角色。

這些虛擬的角色可以協助你判斷哪些要素可驅使用戶使用你的產品或服務。

使用者情境圖（UserScenario）:使用者情境圖最主要的表示內容，就是人物誌中的虛擬角色如何進行思考與行動，你可藉由情境圖來發掘問題並產生洞見。

此外，也可以讓你設計出最適合使用者的UI，並滿足他們的需求。

體驗地圖（Experiencemap）:體驗地圖上會呈現所有使用者與服務發生互動的時刻與情況，開發團隊就能針對它進行探討。

譬如：你可以將使用者操作app的所有互動點，以步驟的方式呈現於體驗地圖上，如此一來，你就能針對使用者在進行某步驟下的情緒或情境探討。

  執行以上的流程有助於你節省設計初期時，煩惱如何了解使用者的時間。

GoogleVenture的BradenKowitz曾經說過：應該要把startup的教條＂儘早上線並時常更新＂替換成＂更早學到並時常學習＂。

對我來說，用這樣的觀念，讓我敞開心胸學習startup過程中的所有事物，而使用者研究與如何得到洞見則是startup中最核心的任務。

  綜上所述，若能在適當的流程中進行使用者測試是最好。

若沒有資源做完整的使用性測試，你也可以透過線上服務來進行的使用性測試，如UserTesting。

藉此，你可以釐清使用者如何使用你的產品，並發現使用者行為的差異，從中得到更適合使用者的洞見。

最後，我們建議在一次使用性測試中，至少有五位使用者參加。

若還想要了解更多，推薦閱讀使用性測試專家（JeffSauros）提供的移動裝置app使用性測試建議。

  3.了解使用者的操作流程，並安排內容 設計與研究是可以同步進行的。

例如，透過你所認知或學習到的資訊，快速的把使用者進行此項任務或功能的流程展開。

接著，在定義正確的介面流程前，建立一個簡單的原型（prototype），而這個原型不需要太過花俏或複雜，甚至可隨手畫於紙上。

藉此，你可以清楚的瞭解使用者進行此任務的流程與產品內容、操作行為間的關係。

PhotoCredit:RodolpheCourtier,CreativeCommons2.0   如果你打算把整個操作流程展開，也許可考慮用＂文字描述＂的方式，把各頁面的功能、跳轉流程順序與內容……等安排好，而不是馬上繪製wireframe。

JessicaDowney曾經提到此方法，有興趣的讀者可延伸閱讀。

而這樣的方式可快速呈現app的概念，以及讓人輕易的理解每個頁面之間的關係。

讓我們試著建立一個關於銀行app，情境是使用者希望開啟自動存款的功能。

自動存款關閉 [設定自動存款] 選擇存款頻率 [一個月一次][一個月兩次] [每隔一週][每週] 存款 一個月一次 [選擇日期] 設定金額 [輸入金額] [設定自動存款]   在繪製草圖或製作原型前，＂寫下＂產品流程可協助探索最重要的部分–內容，而非視覺。

而這樣以內容為主的流程呈現方式，更能讓你精準的估計app需要多少頁面。

接著下一步，你可以開始繪製流程上每一頁的草圖（在這範例中，你需要建立四個畫面草圖）。

而這階段，可以視時間或技術等因素，以不同的方式來製作原型，例如：繪製在紙上的原型或使用數位工具，如UXPin。

最後做個總結，“文字”是表達、呈現產品流程最快的方式，用來探索不同頁面間的架構關係；而接下來繪製的草圖，則可呈現流程中各頁面的細節；最後串起的原型可讓你進行使用者測試，釐清並發現產品的相關問題。

  4.以使用者熟悉的模式來設計，加強產品的使用性 移動裝置的設計受到不同裝置的差異而有所影響，例如大拇指的觸控區、手機方向（垂直或水平）與手勢等。

我們可藉由觀察受歡迎的app介面，與了解一般的行動裝置操作模式來學習如何設計，例如下圖側邊欄所滑出的導航列。

如此，你所設計的介面就能讓使用者感覺相當熟悉，因而提高使用性。

（更多內容可參考Treehouse的Blog） ImageSource:UXPin,viaLyft   但千萬別誤會！我們並不是建議你直接複製別人的設計，而是認為這些常見的UI模板（或其中的元素）已有良好的使用性，使用它既省時便利，又不會讓使用者增加學習成本，當然也可結合更多的創意！如此一來，你可以確保你的產品符合使用者的期待，同時也不會因為跟其他產品過於類似而顯得無聊。

這本電子書（MobileUIDesignPatterns）中提到，移動裝置的互動設計模式大致上分為兩類： 手勢：觸控裝置的互動方式大多藉由手勢，如點擊、滑動、雙擊、雙指放大縮小等，而這些手勢對於如今的使用者來說，再自然不過。

建議參考LukeWroblewski提出的常見操作手勢指南，使用大家熟悉的方式才能讓你的設計更直覺。

動態效果：動態效果可以協助使用者理解流程的脈絡，而需要特別注意的是在一些動態元素上會有一些小差異，例如：”消失（vanish）”代表關閉或刪除；而”滑出（slideoutofsight）”是暫時隱藏，待會還能呼叫出來的意思。

此外，動態效果往往結合手勢動作，可以更加強使用者的操作體驗。

ImageSource:“AndroidUIDesign—TouchscreenGestures,”hsigmond,CreativeCommons3.0   參考移動裝置的互動模式可以協助你選出最適合的UI元件，例如，先排除不同系統的規範，對使用者來說，導航的按鈕放在下方比放上方更易於以大拇指操作（ios的設計方式）。

Imagesource:UXPin,viaYelpiOSapp   Yelp是一款在互動設計上表現得非常直覺的app，它有簡潔的介面，按鈕的大小與配置也能恰到好處，按鈕的意旨也能與使用者認知一致。

此外，它使用了許多常見的移動裝置介面模板元素，例如工具列等。

此外，保持app內的文字簡單易懂也相當重要，以下我們對此有一些建議： 用語明確讓使用者覺得自己可以順利的操作到最後（能預期下一步）。

行動裝置用戶通常比較沒耐性，所以必須確保最重要的資訊能在開頭就出現，例如表單上使用“FullName”來取代“Name(full)”。

每個頁面的措辭方式與風格須具一致性   參考capptivate與UseYourInterface的精美介面範例，再融合適當的手勢、動態效果、文字等，將更容易打造出獨特並受歡迎的app。

  5.請記住使用者是用手指操作，而非滑鼠 手指無法如滑鼠般進行精準的操作，所以設計行動裝置app時，需考量讓手勢操作更友善的互動方式。

例如，在介面上規畫足夠的空間，讓使用者可輕鬆的使用手指操作。

相反的，若按鈕尺寸過小或彼此間距太過接近，造成使用者不能精準點擊，則可能讓使用者產生挫折感而放棄使用。

針對此議題，我們提供兩個建議： 考量使用者操作行動裝置的方式：JoshClark曾經提出，使用者大多使用三種方式來操作手機：1）單手搭配一大拇指、2）雙手搭配一手指、3）雙手搭配兩個大拇指。

同樣的，平板族群也有不同的方式來操作，但大部分都會握住邊緣。

考量極端手指尺寸：若考量手指較大的使用者，建議指尖尺寸的區域能在45-57pixels之間，這比大部分的準則建議還要大，像是Apple建議的44pixels。

  上述的44-pixel準則不一定永遠都適用。

StevenHoober提醒大家不要設計一個過大的按鈕，因為這樣會導致使用者認為它不是一個可執行的動作。

最後，還是建議大家在設計app時，能考量人們手指如何與行動裝置互動的相關議題。

  6.不要減低運用漸層與陰影的設計手法 自從蘋果完全拋棄擬物化的設計風格後，扁平化設計就一統軟體介面設計的風格，但這並不代表陰影與漸層的設計手法沒搞頭。

相對的，它們反而漸漸地又被設計師使用。

例如Google提出的設計語言–MaterialDesign，若讀者有興趣，可以參考這篇文章：MaterialDesign與扁平設計的差異。

PhotoCredit:UXPin,viaAmazoniOSapp   根據ErikD.Kennedy的文章指出，陰影可以幫助大腦理解介面的層級或功能，這大概也是過去擬物風格常被使用的主因吧。

所以，當我們在思考按鈕、開關等視覺線索（visualcues）時，不妨考慮陰影這個元素特徵吧！此外，Erik也提到，如同現實中的物件下方與表面上都會有陰影，因此當陰影應用於介面元件上，人們也會覺得相當自然、無違和感。

ImageSource:UXPin,viaDoordashIOSapp   陰影與漸層的應用讓使用者容易與現實物理現象做出連結，而自然地學會UI上的操作或前後關係。

你可以透過陰影與漸層創造出具有內凹（inset）/外凸（outset）的3D按鈕或輸入欄位等。

Erik將常見使用這些手法的元件歸納如下： 內凹元件： 輸入欄位（Inputfields） 按壓狀態下的按鈕（Pressedbuttons） 滑動軌道，如控制音量大小元件下的長條滑軌（Slidertrack） 未被選擇的radiobuttons（Unselectedradiobuttons） Checkbox 外凸元件： 未按壓狀態的按鈕（Unpressedbuttons） 滑軌上的按鈕（Sliderbuttons） 下拉選單上的元件（Dropdowncontrols） 已選擇的radiobuttons（Selectedradiobuttons） 跳出視窗（Popups） 扁平化設計趨勢的現今與未來一文中提到，使用混和型扁平化設計（semi-flatdesign：使用部分擬真元素，如陰影等），可更容易表達元件的內凹或凸起感。

此外，你的app介面也可保持現代風格，同時具有擬真效果的視覺提示。

  7.化繁為簡 儘管過去認為使用者點擊超過３次就會離開的迷失已經被推翻，但這套說法在設計時還是必須被考量。

因為這可驅使你徹底的思考，哪些東西才是頁面上或流程中必要的。

理想中，使用者完成任務的步驟越少越好。

Yahoo的CEO（MarissaMayer）曾經向設計師提出“兩次點擊”的準則，她說如果使用某款app，而無法在兩次點擊內做到你想做的事情，那就該重新設計了。

如同她所解釋的： “Yahoo的Flickrapp透過這個準則，達到了不錯的成效，使用者可以在兩個步驟內完成許多任務，例如：拍照、瀏覽畫面與相簿、查看社團、設定通知…等。

” 所以，試著減少使用者操作過程中的負擔吧！使用者越是不需思考，你的app就可能更容易成功。

  免費的移動裝置設計資源（英文） MobileBookofTrends（免費電子書）–156pagesillustrating12mobiletrendsthatarequicklyturningintotimelessbestpractices. MobileUIPatterns（免費電子書）–46UIpatternsfromtopcompaniesareanalyzedinaproblem/solutionformatacross100pages. 20UIDesignPhotoshopTutorialsThatWillComeinHandy（出自HongKiat’s網站） UIDesignTutorialstoCreateAmazingWebandMobileUIElements（出自DesignJunction） InteractionDesignBestPractices:Words,Visuals,Space（免費電子書）–總共有七個章節，描述預設用途（affordances）、留白空間、尺寸與距離、視覺一致性、認知負載等主題。

InteractionDesignBestPractices:Time&Behavior（免費電子書）–sixchaptersexplaininghowtoreducefriction,designfortime,createdelightthroughanimations,affectuserdecisions&behavior,andmore. DesigningforiOS（出自蘋果開發者網站） iOS8WireframingKit–Quicklymockupdesignideaswith90handcraftedlo-fielementsforPhotoshop&Sketch.SupportsiPhone5s,6,6Plus. iOS8UIKit–90+detailedUIelementsforPhotoshop,Illustrator,andSketch.SupportsiPhone5s,6,6Plus. ComprehensiveiOSguidelinesandcheatsheet（出自IvoMynttinen） AndroidDeveloper’sUIGuidelines AndroidDeveloper’sUIBestPractices AndroidInspired–收集AndroidandiOS的設計案例   本文章已獲得作者授權，翻譯自：7tipstocreateawesomemobileappdesignsbyJerryCao，原文出處TNWNews Imagecredit:Shutterstock   本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。

其他人也看了這些... 電子商務網站介面設計寶典(一) 開發網站不可不知：2015~16年的網頁設計趨勢 設計師必懂(一)–Wireframe與Prototype的不同 製作404錯誤頁面的小撇步 為什麼介面設計中，使用者的個人頭像大多是圓形的？ 微互動將是2016年APP的設計新趨勢 訂閱設計大舌頭 隨時關注第一手UX、UI、科技、設計新知 電子郵件 訂閱 Wilson 以設計思維解決問題，並創造獨特的使用者體驗。

全部文章 Facebook LinkedIn Telegram Twitter 上一篇設計師精實創業談–天下武功，唯快不破 下一篇設計師愛用的社群、部落格結果大公開 最新文章 Clubhouse為什麼熱門？從UIUX的角度淺談（一） 2021-02-08/ 0Comments 手機拿法也會影響介面設計–淺談拇指法則 2020-02-06/ 0Comments Supr.Link最安全的縮網址服務 2020-01-13/ 0Comments 開發流程優化人人有責：設計也能營運？ 2019-07-06/ 0Comments 台灣社會創新發展趨勢(本場次全程QA)–MIX2019Day1 2019-05-14/ 0Comments 數位金融–MIX2019Day1 2019-05-14/ 0Comments UI/UX 教學文章 心得分享 電子商務 體驗文 0 ×