小米應(yīng)用商店：MIUI forPad交互建議

本文檔介紹了MIUI for Pad應(yīng)用交互操作指南，您可通過閱讀本文檔，對相關(guān)內(nèi)容有所了解。

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

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

一、尊重Android Design

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

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

1、主要典型場景：

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

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

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

2、Pad的硬件特性：

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

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

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

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

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

2）、屏幕尺寸：7.9英寸

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

三、交互設(shè)計(jì)建議

1、設(shè)備方向

1）、因?yàn)镻ad設(shè)備的硬件形態(tài)設(shè)計(jì)是雙軸對稱的，當(dāng)用戶啟動您的應(yīng)用時，會希望無需旋轉(zhuǎn)設(shè)備就可以使用，因此強(qiáng)烈建議您的應(yīng)用支持四方向布局，您也可以利用橫屏/豎屏合理的展示不同的內(nèi)容，滿足用戶的需求

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

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

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

2、彈窗

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

四、兩種常見的結(jié)構(gòu)模型

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

1、導(dǎo)航-內(nèi)容（Tab導(dǎo)航結(jié)構(gòu)）

2、索引-內(nèi)容（兩欄式結(jié)構(gòu)）

1）、小米應(yīng)用商店：導(dǎo)航-內(nèi)容（Tab導(dǎo)航結(jié)構(gòu)）

Tab導(dǎo)航式結(jié)構(gòu)是一種經(jīng)典的布局方式，適合內(nèi)容運(yùn)營驅(qū)動的商店類產(chǎn)品。

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

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

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

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

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

2）、MIUI文件管理器：索引-內(nèi)容（兩欄式結(jié)構(gòu)）

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

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

·左欄寬度應(yīng)該小于右欄，如果左欄尺寸過大，會給用戶父子結(jié)構(gòu)顛倒的錯覺，影響體驗(yàn)。

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

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

以上為MIUI for Pad應(yīng)用交互操作指南。