提问解答：如何优雅的设计APP页面？(2)

三、确定页面的来源和去处

任何单独的页面都只是用户完成某个任务的其中一环，这个页面从哪来？能去哪？影响着页面的导航设计、以及工具栏上按钮的摆放。

为了延续性，继续拿淘宝详情页来举例。

返回上一级

分享&购买

返回页面按照设计规范，基本会放在标题栏的左侧，也有一些小众APP考虑到单手操作放在页面底部，其它如分享和更多一般会放在标题栏的右侧。另外针对当前页面的一些操作会放在工具栏上，例如淘宝的客服、店铺、收藏、加入购物车、立即购买；例如资讯类APP的留言、点赞、收藏等。

在考虑页面的去处的时候，一般有二级页面的形式和临时框的形式，临时框又有模态和非模态的区别。例如淘宝的立即购买就用了模态临时框，而没有采用二级页面，这能减少用户在完成一个任务时的跳转步骤，提高转化率。

四、确定页面内容和优先级

经过前面三个步骤，页面框架基本成型，现在就要往这个框架填充内容。根据信息架构设计，基本会确定这个页面需要包含哪些内容（关于信息架构设计，可以参考《90%的设计师都不知道的信息架构知识》）。

其次就要确定页面信息的优先级，确定优先级的判定依据就是第一步所说的当前页面的目的和目标，以及在做需求分析的时候，公司价值和用户价值两个价值维度的考量。而优先级对设计的影响有一下几点：

①用对比的手法，明确信息层级，优先级越高信息表现越突出。例如上图格和销量字段的对比；

②优先级最高的放在用户第一眼能看到的位置（页面的第一屏）。例如将商品图片、标题、价格放在第一屏的位置，评论则放在第二屏的位置；

③优先级低的要弱化、甚至是隐藏或删除。客服、店铺和收藏的按钮相对于加入购物车和立即购买，很弱，消息、帮助、我要反馈则更弱，所以被收起在右上角更多的icon中。

五、考虑技术的局限性

上次在做阅读APP的时候（pad平台），需要在E-Ink屏上的阅读页面增加竖屏模式，这种模式会更利于用户进行阅读的，类似于kindle的阅读体验。但是因为下屏没有做G-senser，所以是不支持竖屏的，只好放弃。如果我实现不去了解这点，做出来的方案只是浪费时间。

现实做设计的过程中还有很多类似的例子，不管是交互还是视觉，总是会想到一些创新好玩的设计形式，每当这个时候一定要去和相关技术人员沟通，确保设计方案的可行性。此外还要考虑项目周期，如果上线时间紧迫，其实是不允许设计师把设计形式做得很重的，只需要出一个简单的保底方案即可。

我自己就有在做设计之前和相关技术沟通想法的习惯，真的帮助很大。

（编辑：ASP站长网）