為移動而設計 第二部分:交互設計

6 評論 29887 瀏覽 11 收藏 8 分鐘

lulu導語: ?因為移動設備獨有的一些特點,針對移動設備打造正確的交互十分重要。本文為優秀的交互設計譯文,主要從人體工程學、手勢、切換、導航、內容、表單的幾個方面對移動端的交互設計進行了研究。

歡迎來到《為移動而設計 第2章:交互設計》,如果你是從中途加入我們的,這里有些背景資料:《為移動而設計 第1章:信息架構》,在第1章中,展示了設計師在面臨為移動,主要是移動環境而設計的過程中面臨的主要挑戰:從瀏覽環境到行為和心情。因為這些差異影響著用戶,我認為對我們而言,從調研到最終開發完一個產品,在設計過程中考慮這些十分重要。

第1部分包含了在移動環境中對信息架構的探究。這會對余下的設計流程打下了良好基礎。但是,在進入這一章前,有一點很重要,那就是明確移動和平板交互同桌面網站的區別。

交互設計

如今大部分移動設備都采用觸摸屏,這對我們而言機遇和約束并存。我們使用手機不僅是查看內容,也和里面的程序進行交互。這就使得設計師要考慮人體工程學、手勢、切換以及有移動專屬的交互模式。

1

人體工程學

為移動人體工程學設計要求我們關注于設備屏幕和觸摸屏的實用問題。例如,用戶握住設備和觸摸屏幕的方式,會影響到用戶點擊屏幕某一部分的難易度。

點擊區域,或者“用戶觸摸激活某些功能的屏幕區域”要求給用戶精確點擊的足夠空間。平均指尖尺寸為1-2厘米寬,大概相當于標準屏幕44px到57px,高分辨率(“retina”)屏幕88px到114px??紤]到觸摸屏的特性,諾基亞、蘋果和微軟都建議了稍微有些不同的尺寸。

然而考慮到點擊區域時,并沒有硬性規定。我們無需尋找各種標準答案,僅需考慮用戶需要通過點擊屏幕獲得什么,某個任務有多重要,以及他們需要多短的時間完成這個任務,然后根據具體情況進行設計。

手勢

觸摸屏的特有功能使得手勢成為移動交互的一個重要組成部分。所有主要的觸摸操作系統都支持手勢操作,包括Google的Android、蘋果的iOS和微軟的Windows 8。
下面的表格做了簡要介紹:
2

此外,“標準和模式”已經出現在基于觸摸屏設備上的手勢開發中了。設計師應該能經常擴展手勢的邊界范圍來適配他們的應用。

切換

切換是一種使應用在不同狀態間平滑過渡的交互方式,它能夠給用戶講故事,或重新定義一種基于手勢的隱喻。更進一步地說,切換能幫助用戶進行回想,并能防止其迷失。
基本切換包括:
3

這些僅僅是冰山一角,還有一整套可選的切換方案。最好的選擇就是那些能幫助我們增加交互一致性的切換方式。

常用模式

就像在第1部分提到的,比起桌面電腦,移動設備給予設計師更小的空間添加菜單和導航。結合環境因素——例如可憐的瀏覽環境和限制條件——對于我們而言,讓用戶很好的領會到我們的內容架構是件很困難的事兒。

但是,以下常用交互模式對此發出了挑戰。其中最有價值的方案被用于提升導航、內容選擇、登錄/退出和填寫表單的體驗。

主導航

主導航可以可視化地展示我們網站(或應用)的信息架構。這里有一些可選的方案:

4

選擇內容

點擊鏈接激活內容來進行跳轉,可以使用戶方便快速地用一只手選擇內容。如果做得好的話,該交互也能提升用戶參與度。

5

登錄

輸入用戶名、郵箱和密碼對某些應用而言十分關鍵。對于設計師而言,我們需要確保其流程盡可能順利。

6

使用表單

在移動設備上填寫表單是件很困難的事兒,尤其是對于那些專為桌面網站設計的,缺乏移動版的表單。通過嘗試“常用移動設計方案”來推動這一流程,并在移動設備上考慮使用這些方案,讓填寫表單變得更便捷。

7

下一步

標準和指南提供了創新的土壤。當我在我的諾基亞5110上玩貪吃蛇時,我從沒想過我會有一天有機會為移動端設計和塑造工具。今天的解決方案造就了明天的標準和指南。

針對移動設備打造正確的交互十分重要。但要想創造真正出色的體驗,網站或應用的真實外表需要靈感、魅力和努力。在第3部分,我將講述布局和視覺設計如何為信息架構和交互提供支持,最終創造一個完整的沉浸式體驗。

 

譯者大神@s2dongman_產品盒子 ? 來源:互聯網er的早讀課

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 受教了~

    來自福建 回復
  2. 分析的不錯

    來自江蘇 回復
    1. 我也覺得,, 這個是一系列的,還有下一部分一會轉載

      來自北京 回復