MIUI for Pad 为 7 英寸或更大尺寸平板电脑设计，针对性的优化了产品的交互和设计体验。我们通过这篇文档，介绍我们设计 MIUI for Pad 的理念和方法，并对三方 App 设计提供建议。

关于读者

本文档面向的读者是有一定移动产品设计经验的 PM ，着重介绍 Pad 类设备的特性，以及和手机产品设计的不同之处，通过 MIUI for Pad 的设计案例帮助三方开发者改进自己的Pad版应用。

如果您并没有从事过移动产品设计，建议您先阅读 Google 官方的 Android Design 设计文档和 iOS Human Interface Guideline，本文档在撰写时也参考了它们。

尊重 Android Design

MIUI 是 Android 生态圈的一部分，如果您的设计是符合 Android Design 设计方法的，在 MIUI for Pad 上 表现也会很棒！

推荐阅读：http://developer.android.com/design

用户如何使用 Pad 类产品

主要典型场景：

• 下班回到家，窝在沙发上，拿着Pad看电影、刷微博、玩游戏。
• 会议室里面，把 Pad 放在桌上做会议记录、演示 PPT、做快速的方案交流。
• 外出游玩，用 Pad 查看地图、处理照片并分享。

Pad 的硬件特性：

• 更大的屏幕，可以展示更多的内容，交互空间更大，可以处理复杂的任务。
• 更强大的计算能力和续航时间，可以完成复杂的运算，并支持长时间的使用。
• 尺寸、重量比手机大，使用者更倾向于在一个稳定的状态下使用，比如坐着或着站定。

小米 Pad 屏幕配置参数

• 屏幕分辨率：2048*1536（请注意比例是 4:3）
• 屏幕尺寸：7.9 英寸
• 像素密度：320dpi（xhdpi）

交互设计建议

设备方向

• 因为 Pad 设备的硬件形态设计是双轴对称的，当用户启动您的应用时，会希望无需旋转设备就可以使用，因此强烈建议您的应用支持四方向布局，您也可以利用横屏/竖屏合理的展示不同的内容，满足用户的需求
• 同时，我们也建议在 App 启动时先检查设备方向，并按照设备的方向正确展示您的应用。保证启动的时候* 您的 App 是在正确方向的。
• 如果您的应用仅支持横屏或者竖屏，也建议您支持在2 个方向（垂直/水平）上布局。
• 在用户旋转屏幕的时候，您可能需要对应用进行重新布局，Android Design 中提到 Android 原生支持 4 种重新布局方式：Stretch/compress、Stack、Expand/collapse、Show/hide。从我们的实践看，建议您考虑采用 Stretch/compress 和 Show/hide 两种方式，尽量减少旋转时结构的变化，可以让应用有更好的一致性，避免用户旋转后迷失。

弹窗

• 用户在使用 Pad 设备时，通常是双手左右握持，或者一手握持另一手点击，因此如果您的应用设计中存在弹窗操作，应该出现在屏幕中央，以方便用户点击。

两种常见的结构模型

Pad 的大屏幕让设计师有了更多发挥的空间，您可以利用这块屏幕做很多事情。 这里介绍两个比较常用的布局方式，也是 MIUI 系统应用设计中用到的。

导航-内容（ Tab 导航结构）

• 索引-内容（两栏式结构）

小米应用商店：导航-内容（ Tab 导航结构）

Tab 导航式结构是一种经典的布局方式，适合内容运营驱动的商店类产品。

• 导航栏放置在页面顶端，Tab 居左，支持横划切换，符合 Android 交互习惯。
• 我们建议最多不超过 5 个 Tab ，过多的 Tab 会导致产品更复杂，布局拥挤，用户也难以识别和点击。
• 在方向旋转时，不应该增加或减少 Tab 的数量。保持产品的一致性。
• 导航栏最右侧建议放置全局操作，在多级浏览的情况下仍然可以快速使用。
• 二级页面的 Tab 位于顶栏居中位置，仍然支持横滑切换。如下图

MIUI 文件管理器：索引-内容（两栏式结构）

两栏式结构分为左、右两栏，属于父子结构，左侧是内容索引（父级），右侧是具体内容展示（子级），我们在便签，联系人，设置、文件管理器中采用了这个结构。

• 左栏应采用固定尺寸，无论横屏/竖屏，都保持同一个宽度，这样有助于保持界面稳定，如果采用 Google 的 Stretch/compress 方式设计，Google 会做宽度的同比缩放，也是一种可接受的设计。
• 左栏宽度应该小于右栏，如果左栏尺寸过大，会给用户父子结构颠倒的错觉，影响体验。
• 左栏的操作可以控制右栏的展示内容，比如在文件管理器左栏选一个类型，右栏就展示出来。但是右栏不应该能控制左栏的展示。
• 尽量避免在左栏和右栏同时出现层级导航，可能会让用户迷失位置。