中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

“設計”交互

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

人體工程學

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

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

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

手勢操作

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

列表如下：

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

過渡轉場

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

基本的轉場如下：

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

常見的模式

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

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

主導航

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

展開式菜單（Expanding Menu）

許多移動和響應式網站使用這種展開式菜單作為導航。 一般菜單的圖標在頁面頭部，點擊圖標就會展開菜單列表。

適用于: 響應式網站。

注意: 過多的菜單項目會使本就擁擠的屏幕看起來更加糟糕。

星巴克響應網站展開式菜單

側滑菜單（Side menu）

一些APP和網站都使用側滑菜單。點擊左上角的菜單圖標，屏幕邊緣就會滑出一塊專門的菜單區域。菜單以列表（可帶分類）的形式展現，并且還可以向下滾動查看更多。

適用于：選項數目龐大的菜單。它創建一個單獨的菜單區域，而不占用用戶瀏覽內容的空間。

注意：必須確保它不與其它交互模式沖突，否則用戶會產生迷茫的感覺。

Facebook 側滑式菜單

選項卡菜單（Tabbed Menu）

在APP的頂部或底部顯示常駐的選項卡，用戶可以通過點擊切換選項。

適用于：選項數目非常少的菜單，由屏幕寬度決定。

注意: 需要考慮Android和windows phone 8 屏幕底部虛擬按鍵互相干擾的問題。

亞馬遜選項卡菜單

輻射狀菜單（星型拓撲Hub and spoke menu）

一個集中的主頁屏幕提供菜單可供用戶選擇。點擊菜單選項后會進入它自己的內部導航模式。用戶可以通過點擊返回鏈接或按鈕回到主頁。

適用于：直觀反映了程序的功能。

注意：對于輻射狀菜單，如果用戶希望在不同功能之間切換，主屏幕這個必經之路會使用戶沮喪。

領英儀表板菜單

內容選擇形式

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

點擊（Press to move forward）

選擇分類，查看相關文章，然后再選擇與本篇內容相關的文章，這就是漸進式導航的精髓。

適用于：內容主導型的網站。

注意：跳轉多次頁面之后用可能會不知道當前所處位置。

BBC新聞

滾動效果（Coverflow）

用戶可以水平滾動預覽項目，點擊可以進入。Win8的Metro風格程序也是如此。

適用于：選項數目龐大的菜單。它創建一個單獨的菜單區域，而不占用用戶瀏覽內容的空間。

注意：必須確保它不與其它交互模式沖突，否則用戶會產生迷茫的感覺。

應用商店

翻頁效果（Flip over / Peel back）

如果你想進一步了解正在瀏覽的內容，或你正要進行的設置，那么翻頁效果是很好的選擇。

適用于：兩個相關的內容，比如進行設置或查看信息詳情。

注意：會讓你的交互方式過于復雜，用戶也容易對導航結構感到困惑。

iOS蘋果地圖

登陸和注冊

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

自動登陸

用戶信息首次登陸就自動保存在APP內，以后打開APP會自動登陸，并更新主頁最新消息。這也是在許多社交APP最常見的模式，例如：Facebook、Instagram、Twitter。

適用于：必須登陸才能進入主頁查看信息，但對安全要求不是很高。

注意：只適用于對信息安全要求不高的APP。

Instagram

保存賬號和密碼

和電腦網頁一樣，移動APP也可以采用這種設計，保存用戶的賬號和密碼等登錄信息，以便于用戶快速登錄。

適用于：需要登錄的手機版網頁。

注意：盡量減少登錄的步驟。

Gmail

簡單數字密碼

不需要輸入冗長的詳細登錄信息，直接輸入一次簡單密碼，簡化登錄步驟，Paypal就是如此。

適用于：需要記住登錄信息，但又必須保證安全的APP。

注意：需要注意APP安全級別（后臺運行呼出之后仍需要密碼）。

Paypal

填寫表單

保存用戶信息

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

保存用戶的的登錄信息可以節省時間、減少成本，讓你的應用和網站更易于使用。

交互設計師Luke Wroblewski曾對于注冊表單給出過三點建議：一、最好不要在App首屏出現注冊界面；二、先體驗，后注冊；三、因為注冊界面繁瑣，所以更要優化。

適用于：需要用戶添加個人信息的網站或應用，比如在購物過程中填寫個人資料。

注意：給予適當的安全性。

亞馬遜允許查看個人詳細信息和歷史訂單

正確的鍵盤類型

在不同的情況顯示與之對應的鍵盤類型能簡化操作，例如輸入電話號碼時，默認彈出的是數字鍵盤，輸入密碼時顯示全鍵盤。

適用于：任何表單。

注意：無。

Gmail

進度提示

在電腦網頁中顯示進度提示條非常好，他能告訴用戶當前的進度，完成了多少，還剩多少。在移動設備中這樣設計同樣很棒，但由于屏幕大小和比例不同，需要考慮進度條的位置和顯示方式。適用于：購物表單或長表單。注意：不要讓它占據太多空間，不然可能會阻礙用戶快速訪問其他內容。

有創意的進度條也能緩解用戶的焦慮感呦：

Paypal

下一步

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

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

原文地址：uxbooth

譯文地址：wangder

譯者：王笑Nothing