UI界面设计指南.pptxVIP

前期 壹 熟悉 业务 需求 理解 风格 定位 用户 消费者？ 业务员？ 管理者？ 特性 表单多？ 图片多？ 基调 严肃？活泼？ 商务？简约？ 贰 优化信息层级 简化交互步骤，使用户以尽量 少的步骤完成任务。 交互 借鉴 根据产品特性，参考已有 的优秀交互方式。 用一个树形结构来理解什 么是信息层级： 链接的层数被称为深度（z 轴），最底层页面包含的 页面总数被称为链接的广 度（x轴）。纵向（y轴） 很多情况下都只有一层， 放的多都是一些消息提醒 和快捷方式。 广度： 以淘宝为例，最 底层页面就是他 的首页，包含的 页面综述非常丰 富，可以看到从 广度来讲覆盖面 是非常大的。 深度： 从鞋包配饰，到 女鞋，到单鞋， 到单鞋的各种类 型。 区别 叁 PC Web端 VS. 移动/手机端 信息层 级结构 操作 方式 交互 方式 信息层级结构 PC Web端： 更注重深广度的平衡。 手机端： 由于设备限制，广度减 弱，信息深度更为明显。 但这将成为过去时，随 着垂直滚动在移动端的 推广，某些APP广度大 大提升，深度相对减弱。 PC上我们可以 用面包屑路径 或者各种导航 清晰的表现出 层级结构，让 用户不在复杂 的层级机构中 迷路。 而在移动设备 上显示区域有 限，没有足够 的地方用来放 这样的路径， 更多时候只能 用back。 减少结构层级、精简交互步骤的方法（移动端） 并列 快