你了解這5項最常用的交互模式嗎?

4 評論 140711 瀏覽 9 收藏 7 分鐘

 

我將為大家概括性地介紹5種流行移動應用中常見的界面設計模式以供大家在自己的項目中參考。這些設計模式有助于大家提高設計的可用性,讓界面變得更加直觀。文章將側重介紹能夠幫助大家進行下列各方面設計的模式:

  1. 社交分享
  2. 通知
  3. 彈窗
  4. 內容更新
  5. 用戶互動(滑動、點擊等)

一、社交登陸

在這個社交網絡盛行的時代,我們是不是真的還需要用這種陳舊的方式提交個人資料?社交登陸這一設計模式完全可以讓用戶輕松快捷的登陸,從而取代注冊、填寫表單之類的麻煩工作。

交互小科普!你了解這5項最常用的交互模式嗎?

用戶可以直接登陸自己的社交網絡賬號(Facebook、Twitter或者Google等),無需另外創建一個以后不太可能繼續使用的賬戶,這樣可以大大提高注冊效率。除此之外,這一設計模式還有下列好處:

  • 使用現有社交網絡賬號登陸用戶就不用再多記一套用戶名密碼了。
  • 用戶無需被迫在自己剛剛下載還不熟悉如何使用的應用中輸入信息,從而簡化注冊流程。
  • 讓用戶通過現有社交網絡賬號注冊也許能讓你獲得一些有關他們的基本資料。這樣你就能更加有效的根據用戶的實際需求調整應用。

注:在國內這一設計演變成了:您可以使用QQ/微博合作帳號登錄,然后給你綁定,繼續回到注冊界面 ?– –

二、通知

通知功能可突出顯示近期的活動和操作。我們每天要接觸大量的信息,但百忙之中卻沒有時間(或者不愿意把時間)花費在手機上。我們都喜歡在盡可能短的 時間內完成要做的事,然后馬上知道是否有新的活動或者情況能夠引起自己的關注。因此,對于通知設計模式的透徹理解和妥當實施非常重要。

交互小科普!你了解這5項最常用的交互模式嗎?

很多知名公司的移動應用采用了下列幾種不同的方法實施其通知設計:

  • LinkedIn在有更新內容的標簽上放置標有數字的徽標。
  • Twitter則在時間軸圖標頂部放置一個小點指示有新活動。
  • Facebook使用一個會在應用內垂下的彈出條幅顯示新鮮事推送中的新內容通知。

你可以模仿一下你最喜歡的解決辦法,試試這個辦法是否適合于你和你的用戶。

三、彈窗和層疊窗口

彈窗(也叫層疊窗口)是一種常用于互聯網廣告的方法。彈窗會在不創建新窗口的情況下遮蓋住主要內容,無法使用攔阻軟件進行攔截,因此用戶非看不可。 一般來說這種情況很讓用戶討厭,但在有些情況下,彈窗打斷用戶的使用反而能給用戶帶來幫助。例如,用戶可能會希望在不丟失當前用戶界面的情況下查看某些信 息。

交互小科普!你了解這5項最常用的交互模式嗎?

下面是一些彈窗設計模式幫助解決問題的案例:

  • 在用戶在應用中執行特定操作或達到特定時點時彈出并顯示與特定操作或場景相關的信息/控制方法。
  • 應用中原來的內容或場景仍然在背景中顯示,但彈窗可以讓用戶選擇是否要了解接下來要出現的內容。
  • 彈窗可以吸引用戶的注意力并在必要時提供重要通知。在使用完成后,用戶可以點擊或滑動屏關閉彈窗返回先前活動狀態。

四、下拉刷新

在習慣了使用Facebook、Twitter或Google等社交網站后,我們都會很自然的使用下拉手勢進行內容更新。第一個使用這個設計模式的公司是Apple,在此之后這一設計就廣為流行開來了。

交互小科普!你了解這5項最常用的交互模式嗎?

當用戶需要顯示一列非靜態,但不能自動刷新的內容時,就可以適用下拉刷新模式。下拉刷新時,屏幕會滾動到頂部,刷新完成后新內容將從頂部開始顯示。 這種設計模式可以節約空間(不需要使用按鈕)而且簡單易懂。這種方式還不僅局限于更新內容,其還可以用于在一系列短信、圖片或資料更新中加載早先的內容。

五、用戶交互(滑動、點擊等)

除了下拉刷新手勢外,滑動也是智能手機上最為常用的手勢之一。很多應用都允許用戶在文章上左右滑動來了解詳細信息或執行其他操作。與依賴于點擊鼠標的傳統web應用相比,這一方法充滿創新意義。

交互小科普!你了解這5項最常用的交互模式嗎?

在Android和iOS上有大量采用了滑動、點擊及其他特定用戶交互方式的移動應用,你可以在自己的項目過程中予以參考。每個應用對于自己的用戶 來說都有不同的意義和價值。你應當在畫線框圖的過程中做好規劃再投入設計或開發流程。在測試過程中花點時間思考用戶的反饋、建議和批評。

結束語

在本文中,我們一起看了5種移動端應用界面的設計模式,希望能給你帶來靈感。

 

原文地址:sitepoint

譯文地址:http://uec.nq.com/works/136

譯者:蔣燦

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 標題都有錯別字,叫我如何相信你說的內容

    log in:登錄
    landingpage:著陸頁

    錄≠陸

    來自中國 回復
  2. 這5中交互方式在移動端用的太廣泛了。。

    來自上海 回復
  3. good,學習了。社交登錄的部分,包括web端有僅綁定也有直接可登錄的,但是在移動端,繁雜的注冊流程略煩

    來自北京 回復