MIUI for Pad 三方應用交互建議

MIUI for Pad 為 7 英寸或更大尺寸平板電腦設計，針對性的優(yōu)化了產(chǎn)品的交互和設計體驗。我們通過這篇文檔，介紹我們設計 MIUI for Pad 的理念和方法，并對三方 App 設計提供建議。

關于讀者

本文檔面向的讀者是有一定移動產(chǎn)品設計經(jīng)驗的 PM ，著重介紹 Pad 類設備的特性，以及和手機產(chǎn)品設計的不同之處，通過 MIUI for Pad 的設計案例幫助三方開發(fā)者改進自己的Pad版應用。

如果您并沒有從事過移動產(chǎn)品設計，建議您先閱讀 Google 官方的 Android Design 設計文檔和 iOS Human Interface Guideline，本文檔在撰寫時也參考了它們。

尊重 Android Design

MIUI 是 Android 生態(tài)圈的一部分，如果您的設計是符合 Android Design 設計方法的，在 MIUI for Pad 上 表現(xiàn)也會很棒！

推薦閱讀：http://developer.android.com/design

用戶如何使用 Pad 類產(chǎn)品

主要典型場景：

• 下班回到家，窩在沙發(fā)上，拿著Pad看電影、刷微博、玩游戲。

• 會議室里面，把 Pad 放在桌上做會議記錄、演示 PPT、做快速的方案交流。

• 外出游玩，用 Pad 查看地圖、處理照片并分享。

Pad 的硬件特性：

• 更大的屏幕，可以展示更多的內(nèi)容，交互空間更大，可以處理復雜的任務。

• 更強大的計算能力和續(xù)航時間，可以完成復雜的運算，并支持長時間的使用。

• 尺寸、重量比手機大，使用者更傾向于在一個穩(wěn)定的狀態(tài)下使用，比如坐著或著站定。

小米 Pad 屏幕配置參數(shù)

• 屏幕分辨率：2048*1536（請注意比例是 4:3）

• 屏幕尺寸：7.9 英寸

• 像素密度：320dpi（xhdpi）

交互設計建議

設備方向

• 因為 Pad 設備的硬件形態(tài)設計是雙軸對稱的，當用戶啟動您的應用時，會希望無需旋轉設備就可以使用，因此強烈建議您的應用支持四方向布局，您也可以利用橫屏/豎屏合理的展示不同的內(nèi)容，滿足用戶的需求

• 同時，我們也建議在 App 啟動時先檢查設備方向，并按照設備的方向正確展示您的應用。保證啟動的時候* 您的 App 是在正確方向的。

• 如果您的應用僅支持橫屏或者豎屏，也建議您支持在2 個方向（垂直/水平）上布局。

• 在用戶旋轉屏幕的時候，您可能需要對應用進行重新布局，Android Design 中提到 Android 原生支持 4 種重新布局方式：Stretch/compress、Stack、Expand/collapse、Show/hide。從我們的實踐看，建議您考慮采用 Stretch/compress 和 Show/hide 兩種方式，盡量減少旋轉時結構的變化，可以讓應用有更好的一致性，避免用戶旋轉后迷失。

彈窗

• 用戶在使用 Pad 設備時，通常是雙手左右握持，或者一手握持另一手點擊，因此如果您的應用設計中存在彈窗操作，應該出現(xiàn)在屏幕中央，以方便用戶點擊。

兩種常見的結構模型

• Pad 的大屏幕讓設計師有了更多發(fā)揮的空間，您可以利用這塊屏幕做很多事情。\n這里介紹兩個比較常用的布局方式，也是 MIUI 系統(tǒng)應用設計中用到的。

• 導航-內(nèi)容（ Tab 導航結構）

• 索引-內(nèi)容（兩欄式結構）

小米應用商店：導航-內(nèi)容（ Tab 導航結構）

Tab 導航式結構是一種經(jīng)典的布局方式，適合內(nèi)容運營驅動的商店類產(chǎn)品。

• 導航欄放置在頁面頂端，Tab 居左，支持橫劃切換，符合 Android 交互習慣。

• 我們建議最多不超過 5 個 Tab ，過多的 Tab 會導致產(chǎn)品更復雜，布局擁擠，用戶也難以識別和點擊。

• 在方向旋轉時，不應該增加或減少 Tab 的數(shù)量。保持產(chǎn)品的一致性。

• 導航欄最右側建議放置全局操作，在多級瀏覽的情況下仍然可以快速使用。

• 二級頁面的 Tab 位于頂欄居中位置，仍然支持橫滑切換。如下圖

MIUI 文件管理器：索引-內(nèi)容（兩欄式結構）

兩欄式結構分為左、右兩欄，屬于父子結構，左側是內(nèi)容索引（父級），右側是具體內(nèi)容展示（子級），我們在便簽，聯(lián)系人，設置、文件管理器中采用了這個結構。

• 左欄應采用固定尺寸，無論橫屏/豎屏，都保持同一個寬度，這樣有助于保持界面穩(wěn)定，如果采用 Google 的  Stretch/compress 方式設計，Google 會做寬度的同比縮放，也是一種可接受的設計。

• 左欄寬度應該小于右欄，如果左欄尺寸過大，會給用戶父子結構顛倒的錯覺，影響體驗。

• 左欄的操作可以控制右欄的展示內(nèi)容，比如在文件管理器左欄選一個類型，右欄就展示出來。但是右欄不應該能控制左欄的展示。

• 盡量避免在左欄和右欄同時出現(xiàn)層級導航，可能會讓用戶迷失位置。