移動設備設計第二步:交互設計
移動設備設計第二步:交互設計-移動閱讀二維碼

本文提供了大量移動設計的優秀案例,并詳細的闡述設計的原因;移動設計與傳統桌面設計思路有何差別。

我的第一個手機是Nokia 5110(1988年買的),它的功能非常少,所以我只用它來打打電話、玩玩貪食蛇。但是隨著廠商不斷的技術革新,傳統手機使用方式被完全顛覆了?,F在我們都在使用大尺寸的觸屏手機,并且出現了“應用商店”的新型平臺。設計師也受益于這個時代,所以盡快掌握移動設計模式也成了我們的責任和義務。

歡迎閱讀《移動設備設計第二步:交互設計》,正如你所見,系列文章的第二篇。為了方便您的閱讀,我在這里會交代一些《移動設備設計第一步:信息架構》的背景。第一篇文章中指出:設計師在移動設計面臨的挑戰主要有:觀察使用環境、用戶行為和情緒。因為這些差異會很大程度上影響我們的設計思路和研究過程,最終將會導致產品的形態。

第一篇文章討論了如何在移動環境下進行信息架構探索。做好第一點將會為接下來的設計流程打下良好的基礎。在繼續討論交互理論前,非常有必要先讓大家了解一下,移動設備的交互理念與桌面設備究竟有何差別。

“設計”交互

現今,絕大多數移動設備使用觸摸屏,這對我們來說有好有壞。我們不僅可以使用設備來瀏覽內容,并且還可以與之交互。這就要求設計師考慮人體工程學,不停地模擬用戶握持和操作手勢,最終才能得出可用的交互模式。

移動設備設計第二步:交互設計

人體工程學

人體工程學在移動設備中最需要注意的就是屏幕尺寸。用戶握持的姿勢、觸摸的手勢都影響著用戶所能觸及到的區域。

點擊區域需要足夠大的面積,大到讓用戶非常自信不會點錯最佳。手指尖通常1到2厘米寬,標準分辨率的屏幕大概44px到57px之間,在retina高分屏上大概88px到114px。諾基亞、蘋果、微軟等根據使用屏幕的不同推薦策略也不相同。

當然對觸摸面積沒有硬性規定,尋找標準不是目的,為用戶考慮,怎么樣設計才能盡快完成他們的任務,就應該怎么設計。

手勢操作

移動設備的屏幕可謂寸土寸金,如何能通過手勢實現不同的功能很值得研究。下面列舉目前主流三大系統的基本操作模式。

列表如下:
移動設備設計第二步:交互設計

此外,觸屏設備的系統標準和操作模式也正處于不斷發展之中,設計師要不斷研究新的操作方式以適用于APP。

過渡轉場

轉場為了使不同界面切換更加平滑順暢,或暗示給用戶一種新的可用手勢操作方式。一般而言,轉場在APP中給用戶指引方向,防止用戶“迷路”。

基本的轉場如下:
移動設備設計第二步:交互設計

以上僅列舉少部分,還有非常多的轉場效果我們可以選擇。最佳選擇標準是引入該轉場可以促進交互的一致性。

常見的模式

正如第一部分所說,相比桌面電腦,移動設備給設計師放置導航菜單空間更小。結合環境因素,例如惡劣的閱讀條件使人分心。這就很難設計一種好的內容結構去讓用戶專注與內容。

 

然而,有幾種常見的交互模式迎接了這個挑戰。如何改進導航、內容選擇、登陸/登出、表格顯示的展現形式是我們所需要學習的重點。

主導航

主要(或核心)導航用視覺方式展現了我們網站或APP的信息架構。以下有一些需要考慮的地方:

星巴克響應網站展開式菜單 展開式菜單(Expanding Menu)
移動設備設計第二步:交互設計 許多移動和響應式網站使用這種展開式菜單作為導航。 一般菜單的圖標在頁面頭部,點擊圖標就會展開菜單列表。適用于: 響應式網站。注意: 過多的菜單項目會使本就擁擠的屏幕看起來更加糟糕。
FACEBOOK側滑式菜單 側滑菜單(Side menu)
移動設備設計第二步:交互設計 一些APP和網站都使用側滑菜單。點擊左上角的菜單圖標,屏幕邊緣就會滑出一塊專門的菜單區域。菜單以列表(可帶分類)的形式展現,并且還可以向下滾動查看更多。適用于:選項數目龐大的菜單。它創建一個單獨的菜單區域,而不占用用戶瀏覽內容的空間。注意:必須確保它不與其它交互模式沖突,否則用戶會產生迷茫的感覺。
亞馬遜選項卡菜單 選項卡菜單(Tabbed Menu)
移動設備設計第二步:交互設計 在APP的頂部或底部顯示常駐的選項卡,用戶可以通過點擊切換選項。適用于:選項數目非常少的菜單,由屏幕寬度決定。注意: 需要考慮Android和windows phone 8 屏幕底部虛擬按鍵互相干擾的問題。
領英儀表板菜單 輻射狀菜單(星型拓撲Hub and spoke menu)
移動設備設計第二步:交互設計 一個集中的主頁屏幕提供菜單可供用戶選擇。點擊菜單選項后會進入它自己的內部導航模式。用戶可以通過點擊返回鏈接或按鈕回到主頁。適用于:直觀反映了程序的功能。注意:對于輻射狀菜單,如果用戶希望在不同功能之間切換,主屏幕這個必經之路會使用戶沮喪。

內容選擇形式

如果你的設計可以很輕松的讓用戶單手操作,這點就會讓你的產品增加不少轉化率。

 

BBC新聞 點擊(Press to move forward)
移動設備設計第二步:交互設計 選擇分類,查看相關文章,然后再選擇與本篇內容相關的文章,這就是漸進式導航的精髓。適用于:內容主導型的網站。注意:跳轉多次頁面之后用可能會不知道當前所處位置。
應用商店 滾動效果(Coverflow)
移動設備設計第二步:交互設計 用戶可以水平滾動預覽項目,點擊可以進入。Win8的Metro風格程序也是如此。適用于:選項數目龐大的菜單。它創建一個單獨的菜單區域,而不占用用戶瀏覽內容的空間。注意:必須確保它不與其它交互模式沖突,否則用戶會產生迷茫的感覺。
iOS蘋果地圖 翻頁效果(Flip over / Peel back)
移動設備設計第二步:交互設計 如果你想進一步了解正在瀏覽的內容,或你正要進行的設置,那么翻頁效果是很好的選擇。適用于:兩個相關的內容,比如進行設置或查看信息詳情。注意:會讓你的交互方式過于復雜,用戶也容易對導航結構感到困惑。

登陸和注冊

登陸和注冊對于APP必不可少,所以我們應該盡可能把過程設計的簡單方便。

 

Instagram 自動登陸
移動設備設計第二步:交互設計 用戶信息首次登陸就自動保存在APP內,以后打開APP會自動登陸,并更新主頁最新消息。這也是在許多社交APP最常見的模式,例如:Facebook、Instagram、Twitter。適用于:必須登陸才能進入主頁查看信息,但對安全要求不是很高。注意:只適用于對信息安全要求不高的APP。
Gmail 保存賬號和密碼
移動設備設計第二步:交互設計 和電腦網頁一樣,移動APP也可以采用這種設計,保存用戶的賬號和密碼等登錄信息,以便于用戶快速登錄。適用于:需要登錄的手機版網頁。注意:盡量減少登錄的步驟。
Paypal 簡單數字密碼
移動設備設計第二步:交互設計 不需要輸入冗長的詳細登錄信息,直接輸入一次簡單密碼,簡化登錄步驟,Paypal就是如此。適用于:需要記住登錄信息,但又必須保證安全的APP。注意:需要注意APP安全級別(后臺運行呼出之后仍需要密碼)。

填寫表單

據統計,用戶安裝的APP中,竟有26%只被打開過一次。辛苦制作了一款APP,好不容易被人下載安裝,剛一打開,繁瑣的注冊表單讓用戶不得不放棄。人人都討厭在移動設備上填寫表單,特別是根本沒針對移動設備優化過的電腦版網頁。

 

亞馬遜允許查看個人詳細信息和歷史訂單 保存用戶信息
移動設備設計第二步:交互設計 保存用戶的的登錄信息可以節省時間、減少成本,讓你的應用和網站更易于使用。交互設計師Luke Wroblewski曾對于注冊表單給出過三點建議:一、最好不要在App首屏出現注冊界面;二、先體驗,后注冊;三、因為注冊界面繁瑣,所以更要優化。適用于:需要用戶添加個人信息的網站或應用,比如在購物過程中填寫個人資料。。注意:給予適當的安全性。
Gmail 正確的鍵盤類型
移動設備設計第二步:交互設計 在不同的情況顯示與之對應的鍵盤類型能簡化操作,例如輸入電話號碼時,默認彈出的是數字鍵盤,輸入密碼時顯示全鍵盤。適用于:任何表單。注意:無。
Paypal 進度提示
移動設備設計第二步:交互設計 在電腦網頁中顯示進度提示條非常好,他能告訴用戶當前的進度,完成了多少,還剩多少。在移動設備中這樣設計同樣很棒,但由于屏幕大小和比例不同,需要考慮進度條的位置和顯示方式。適用于:購物表單或長表單。注意:不要讓它占據太多空間,不然可能會阻礙用戶快速訪問其他內容。

下一步

設計標準和指南給我們提供了創新的空間。當我手拿諾基亞5110玩貪食蛇時,從未想過我能有機會為手機設計交互界面。而今天我們找到的解決問題的方法,將會成為未來設計的標準和指南。

交互是移動設備不可或缺的重要部分。但是打造體驗絕佳、界面生動的移動應用或網站,美妙絕倫的視覺設計也必不可少。

原文:uxbooth
翻譯:王笑
譯文地址:wangder

本文鏈接:http://www.casaleticia.com/mobile-design-interaction-design.html
本文標簽: , , , ,