小米應用商店：MIUI forPad交互建議

本文檔介紹了MIUI for Pad應用交互操作指南，您可通過閱讀本文檔，對相關內容有所了解。

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

關于讀者：本文檔面向的讀者是有一定移動產品設計經驗的PM，著重介紹Pad類設備的特性，以及和手機產品設計的不同之處，通過MIUI for Pad的設計案例幫助三方開發(fā)者改進自己的Pad版應用。如果您并沒有從事過移動產品設計，建議您先閱讀Google官方的Android Design設計文檔和iOS Human Interface Guideline，本文檔在撰寫時也參考了它們。

一、尊重Android Design

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

二、用戶如何使用Pad類產品

1、主要典型場景：

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

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

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

2、Pad的硬件特性：

1）、更大的屏幕，可以展示更多的內容，交互空間更大，可以處理復雜的任務。

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

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

3、小米Pad屏幕配置參數

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

2）、屏幕尺寸：7.9英寸

3）、像素密度：320dpi（xhdpi）

三、交互設計建議

1、設備方向

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

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

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

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

2、彈窗

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

四、兩種常見的結構模型

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

1、導航-內容（Tab導航結構）

2、索引-內容（兩欄式結構）

1）、小米應用商店：導航-內容（Tab導航結構）

Tab導航式結構是一種經典的布局方式，適合內容運營驅動的商店類產品。

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

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

·在方向旋轉時，不應該增加或減少Tab的數量。保持產品的一致性。

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

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

2）、MIUI文件管理器：索引-內容（兩欄式結構）

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

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

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

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

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

以上為MIUI for Pad應用交互操作指南。