UI界面设计指南.pptxVIP

前期壹熟悉业务需求理解风格定位

用户消费者？业务员？管理者？特性表单多？图片多？基调严肃？活泼？商务？简约？

贰优化信息层级简化交互步骤，使用户以尽量少的步骤完成任务。交互 借鉴 根据产品特性，参考已有 的优秀交互方式。

用一个树形结构来理解什么是信息层级：链接的层数被称为深度〔z轴〕，最底层页面包含的页面总数被称为链接的广度〔x轴〕。纵向〔y轴〕很多情况下都只有一层，放的多都是一些消息提醒和快捷方式。

广度：以淘宝为例，最底层页面就是他的首页，包含的页面综述非常丰富，可以看到从广度来讲覆盖面是非常大的。

深度：从鞋包配饰，到女鞋，到单鞋，到单鞋的各种类型。

区别叁PCWeb端VS.移动/端信息层级结构操作方式交互方式

信息层级结构PCWeb端：更注重深广度的平衡。端：由于设备限制，广度减弱，信息深度更为明显。但这将成为过去时，随着垂直滚动在移动端的推广，某些APP广度大大提升，深度相对减弱。

PC上我们可以用面包屑路径或者各种导航清晰的表现出层级结构，让用户不在复杂的层级机构中迷路。

而在移动设备上显示区域有限，没有足够的地方用来放这样的路径，更多时候只能用back。

减少结构层级、精简交互步骤的方法〔移动端〕并列快捷方式显示关键信息减少点按

并列将并列的信息显示在同一个界面中，减少页面的跳转。最典型的例子就是Win8，在同一个界面中就能展示出天气／邮件等