awesome_mobile_app_designs

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

進行 app 設計,有許多要考量的要素,如:較小的螢幕、更短的專注時間(對使用者)等。在理想的狀態下,我們當然希望設計出讓新用戶能輕易操作的介面,並減少無趣或挫折的體驗。那如何打造完美的 app 呢?我們將在文章內提供7點建議,讓你學習如何用正確的觀念與方法,來設計移動裝置介面若你想要更深入的了解移動裝置介面設計,我們補充免費的電子書資源:Mobile UI Patterns 與 Interaction Design Best Practices

 

1. 互動設計的準則總是管用!

雖然 app 的介面數量與設計的頁面空間較網頁少,但不代表互動設計的準則就無法應用。

根據此篇文章(Five Pillars of Interaction Design)所提到的,要有好的 app 互動體驗需注意下述五點:

  • 目標導向設計(Goal-driven Design):設計過程中,絕對希望產品能滿足目標使用者的需求,而人物誌(persona)這個方法可以避免你在開發過程中偏離目標使用者的需求。透過研究或訪談目標使用者,我們可以將他們的虛擬角色創建出來(包含背景、目標與需求等),團隊就能依據 persona 的資訊進行設計或修改使用流程等,以滿足他們的需求。
  • 使用性(Usability):若用戶無法輕易的使用你的 app,那他們也不會想從 app store 中下載。良好的使用性能讓產品"好用",在競爭的市場中,這已經是最基本的要素了。
  • 預設用途與指意(Affordance & Signifier):預設用途與功能的 “自我解釋" 相關,指意則暗示或提示有何預設用途。舉個例子,文字下方有藍色底線,意味著具超連結的功能。使用正確的"指意"可讓使用者不須思考就能知道介面元件代表的功能。
  • 可學習性:大家肯定希望使用者能直覺的操作產品,這也就是為什麼我們在文章後段提到,建議開發團隊可以使用合適的介面模板。藉由使用者相當熟悉的介面模板,讓他們更快地適應新 app。
  • 回饋與反應時間:系統的回饋可以讓使用者知道任務完成與否?回饋的型態也許是簡單的 “嗶”一聲,也可以是複雜些的跳出視窗(modal window)等。不管如何,請確保回饋方式是友善的、具人性的以及合適的反應時間區間(可參考 Nielsen Norman Group 提出的 timing guidelines)。Andrew Maier 也特別在 這篇文章中 提到:上述五個設計準則為打造好設計的基礎,在著手進行任何互動設計前都應該了解它。

 

2. 了解你的使用者

app 設計 所要考量的地方不單只有螢幕大小。Maier 指出:使用者類型、操作情境或體驗等因素會構成介面設計上最基本的約束。所以,要打造以目標為導向的 app 介面首要的任務就是了解你的使用者

 

在 Guide to UX Design Process and Documentation 一文中提到,想要了解你的使用者,有三個基礎的策略與方法:

  • 人物誌(Persona): 人物誌即是透過觀察與研究使用者的行為,來建立目標族群之虛擬角色。這些虛擬的角色可以協助你判斷哪些要素可驅使用戶使用你的產品或服務。
  • 使用者情境圖(User Scenario): 使用者情境圖最主要的表示內容,就是人物誌中的虛擬角色如何進行思考與行動,你可藉由情境圖來發掘問題並產生洞見。此外,也可以讓你設計出最適合使用者的 UI,並滿足他們的需求。
  • 體驗地圖(Experience map): 體驗地圖上會呈現所有使用者與服務發生互動的時刻與情況,開發團隊就能針對它進行探討。譬如:你可以將使用者操作 app 的所有互動點,以步驟的方式呈現於體驗地圖上,如此一來,你就能針對使用者在進行某步驟下的情緒或情境探討。

 

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

Google Venture的 Braden Kowitz 曾經說過:應該要把 startup 的教條"儘早上線並時常更新"替換成"更早學到並時常學習"。對我來說,用這樣的觀念,讓我敞開心胸學習 startup 過程中的所有事物,而使用者研究與如何得到洞見則是 startup 中最核心的任務

 

綜上所述,若能在適當的流程中進行使用者測試是最好。若沒有資源做完整的使用性測試,你也可以透過線上服務來進行的使用性測試,如 UserTesting。藉此,你可以釐清使用者如何使用你的產品,並發現使用者行為的差異,從中得到更適合使用者的洞見。最後,我們建議在一次使用性測試中,至少有五位使用者參加。若還想要了解更多,推薦閱讀使用性測試專家(Jeff Sauros) 提供的 移動裝置 app 使用性測試建議

 

3. 了解使用者的操作流程,並安排內容

設計與研究是可以同步進行的。例如,透過你所認知或學習到的資訊,快速的把使用者進行此項任務或功能的流程展開。接著,在定義正確的介面流程前,建立一個簡單的原型(prototype),而這個原型不需要太過花俏或複雜,甚至可隨手畫於紙上。藉此,你可以清楚的瞭解使用者進行此任務的流程與產品內容、操作行為間的關係。

 

如果你打算把整個操作流程展開,也許可考慮用"文字描述"的方式,把各頁面的功能、跳轉流程順序與內容……等安排好,而不是馬上繪製 wireframe。 Jessica Downey 曾經提到此方法,有興趣的讀者可延伸閱讀。而這樣的方式可快速呈現 app 的概念,以及讓人輕易的理解每個頁面之間的關係。

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

自動存款  關閉

[設定  自動存款]

選擇存款頻率

[一個月一次][一個月兩次]

[每隔一週][每週]

存款

一個月一次

[選擇日期]

設定金額

[輸入金額]

[設定  自動存款]

 

在繪製草圖或製作原型前,"寫下"產品流程可協助探索最重要的部分 – 內容,而非視覺。而這樣以內容為主的流程呈現方式,更能讓你精準的估計 app 需要多少頁面。接著下一步,你可以開始繪製流程上每一頁的草圖(在這範例中,你需要建立四個畫面草圖)。而這階段,可以視時間或技術等因素,以不同的方式來製作原型,例如:繪製在紙上的原型或使用數位工具,如 UXPin

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

 

4. 以使用者熟悉的模式來設計,加強產品的使用性

移動裝置的設計受到不同裝置的差異而有所影響,例如 大拇指的觸控區手機方向(垂直或水平)與手勢 等。我們可藉由觀察受歡迎的 app 介面,與了解 一般的行動裝置操作模式 來學習如何設計,例如下圖側邊欄所滑出的導航列。如此,你所設計的介面就能讓使用者感覺相當熟悉,因而提高使用性。(更多內容可參考 Treehouse 的 Blog

Image Source: UXPin, via Lyft

Image Source: UXPin, via Lyft

 

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

這本電子書(Mobile UI Design Patterns)中提到,移動裝置的互動設計模式大致上分為兩類:

  • 手勢:觸控裝置的互動方式大多藉由手勢,如點擊、滑動、雙擊、雙指放大縮小等,而這些手勢對於如今的使用者來說,再自然不過。建議參考 Luke Wroblewski 提出的 常見操作手勢指南,使用大家熟悉的方式才能讓你的設計更直覺。
  • 動態效果:動態效果可以協助使用者理解流程的脈絡,而需要特別注意的是在一些動態元素上會有一些小差異,例如:" 消失(vanish) " 代表關閉或刪除;而 " 滑出(slide out of sight) " 是暫時隱藏,待會還能呼叫出來的意思。此外,動態效果往往結合手勢動作,可以更加強使用者的操作體驗。
Image Source: “Android UI Design — Touchscreen Gestures,” hsigmond, Creative Commons 3.0

Image Source: “Android UI Design — Touchscreen Gestures,” hsigmond, Creative Commons 3.0

 

參考移動裝置的互動模式可以協助你選出最適合的 UI 元件,例如,先排除不同系統的規範,對使用者來說,導航的按鈕放在下方比放上方 更易於以大拇指操作(ios 的設計方式)。

Image source: UXPin, via Yelp iOS app

Image source: UXPin, via Yelp iOS app

 

Yelp 是一款在互動設計上表現得非常直覺的 app,它有簡潔的介面,按鈕的大小與配置也能恰到好處,按鈕的意旨也能與使用者認知一致。此外,它使用了許多常見的移動裝置介面模板元素,例如工具列等。

此外,保持 app 內的文字簡單易懂也相當重要,以下我們對此有一些建議:

  • 用語明確讓使用者覺得自己可以順利的操作到最後(能預期下一步)。
  • 行動裝置用戶通常比較沒耐性,所以必須確保最重要的資訊能在開頭就出現,例如表單上使用 “ Full Name ”  來取代 “ Name (full) ”。
  • 每個頁面的措辭方式與風格須具一致性

 

參考 capptivate 與 Use Your Interface 的精美介面範例,再融合適當的手勢、動態效果、文字等,將更容易打造出獨特並受歡迎的 app。

 

5. 請記住使用者是用手指操作,而非滑鼠

手指無法如滑鼠般進行精準的操作,所以設計行動裝置 app 時,需考量讓手勢操作更友善的互動方式。例如,在介面上規畫足夠的空間,讓使用者可輕鬆的使用手指操作。相反的,若按鈕尺寸過小或彼此間距太過接近,造成使用者不能精準點擊,則可能讓使用者產生挫折感而放棄使用。

針對此議題,我們提供兩個建議:

  • 考量使用者操作行動裝置的方式:Josh Clark 曾經提出,使用者大多使用三種方式來操作手機:1)單手搭配一大拇指、2)雙手搭配一手指、3)雙手搭配兩個大拇指。同樣的,平板族群也有不同的方式來操作,但大部分都會握住邊緣。
  • 考量極端手指尺寸: 若考量手指較大的使用者,建議指尖尺寸的區域能在 45-57 pixels 之間 ,這比大部分的準則建議還要大,像是 Apple 建議的 44 pixels

 

上述的 44-pixel 準則不一定永遠都適用。Steven Hoober 提醒大家不要設計一個過大的按鈕,因為這樣會導致使用者認為它不是一個可執行的動作。最後,還是建議大家在設計 app 時,能考量人們手指如何與行動裝置互動的相關議題。

 

6. 不要減低運用漸層與陰影的設計手法

自從蘋果完全拋棄擬物化的設計風格後,扁平化設計就一統軟體介面設計的風格,但這並不代表陰影與漸層的設計手法沒搞頭。相對的,它們反而漸漸地又被設計師使用。例如 Google 提出的設計語言 – Material Design,若讀者有興趣,可以參考這篇文章:Material Design 與扁平設計的差異

 

根據 Erik D. Kennedy 的 文章指出,陰影可以幫助大腦理解介面的層級或功能,這大概也是過去擬物風格常被使用的主因吧。所以,當我們在思考按鈕、開關等視覺線索(visual cues)時,不妨考慮陰影這個元素特徵吧!此外,Erik 也提到,如同現實中的物件下方與表面上都會有陰影,因此當陰影應用於介面元件上,人們也會覺得相當自然、無違和感。

Image Source: UXPin, via Doordash IOS app

Image Source: UXPin, via Doordash IOS app

 

陰影與漸層的應用讓使用者容易與現實物理現象做出連結,而自然地學會 UI 上的操作或前後關係。你可以透過陰影與漸層創造出具有內凹(inset)/外凸(outset)的 3D 按鈕或輸入欄位等。Erik 將常見使用這些手法的元件 歸納如下:

內凹元件:

  • 輸入欄位(Input fields)
  • 按壓狀態下的按鈕(Pressed buttons)
  • 滑動軌道,如控制音量大小元件下的長條滑軌(Slider track)
  • 未被選擇的 radio buttons(Unselected radio buttons)
  • Checkbox

外凸元件:

  • 未按壓狀態的按鈕(Unpressed buttons)
  • 滑軌上的按鈕(Slider buttons)
  • 下拉選單上的元件(Dropdown controls)
  • 已選擇的 radio buttons(Selected radio buttons)
  • 跳出視窗(Popups)

扁平化設計趨勢的現今與未來一文中提到,使用混和型扁平化設計(semi-flat design:使用部分擬真元素,如陰影等),可更容易表達元件的內凹或凸起感。此外,你的 app 介面也可保持現代風格,同時具有擬真效果的視覺提示。

 

7. 化繁為簡

儘管過去認為使用者點擊超過3次就會離開的迷失已經被推翻,但這套說法在設計時還是必須被考量。因為這可驅使你徹底的思考,哪些東西才是頁面上或流程中必要的。理想中,使用者完成任務的步驟越少越好。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

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

如果你也喜歡我們的文章,請 Follow 我們的 Facebook 專頁,每天都會分享許多精選文章!

分享此文: