MIUI for Pad 三方應(yīng)用交互建議

MIUI for Pad 三方應(yīng)用交互建議

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

關(guān)于讀者

本文檔面向的讀者是有一定移動(dòng)產(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)用。

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

尊重 Android Design

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

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

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

主要典型場景：

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

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

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

Pad 的硬件特性：

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

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

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

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

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

• 屏幕尺寸：7.9 英寸

• 像素密度：320dpi（xhdpi）

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

設(shè)備方向

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

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

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

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

彈窗

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

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

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

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

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

小米應(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ū)動(dòng)的商店類產(chǎn)品。

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

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

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

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

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

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

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

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

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

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

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