提问解答如何优雅的设计APP页面？

注：页面框架设计只是整个产品设计中的一环，不要把眼界局限在这一环，也不要只站需求、只站在交互、只站在视觉上思考题目，从多个角度看题目，你才会学会成长。

小密圈被封了一段时间后终于重见天日了，这篇文章就往返答小密圈里的一个提问：如何设计一个APP页面。

看到这种提问，心里一样平常是抗拒的，由于产品设计是一个体系工程，单独拧出来其中一个流程来讲，都是割裂的，但在现实中又必须割裂出来，由于只有割裂出每个流程，把每个流程都想通想透，才能组成完备的产品设计的知识系统。那怎么来权衡团体和局部，体系和部件，也是一门大学问。

一、明确页面设计在整个产品设计中的位置

互联网产品设计的流程大致是：产品定位——需求分析——信息架构设计——流程设计——页面框架设计——设计说明——输出设计文档。可以看到页面设计是处于整个流程的后期，所曩昔期必须去和产品经理或者用研人员反复沟通，明确产品定位、明确需求、了解营业流程，然后再梳理信息架构、产品的导航情势、义务流程和页面流。

不管产品经理照旧交互或UI，都要去了解这些，并反复沟通，这是基础。所有的设计离开了用户和需求都是耍流氓。

其实这也是我在曩昔文章中反复强调的，只要你从事的是产品设计的工作（目前涉及到的分工重要有产品经理、交互设计师、视觉设计师），都要从产品设计团体去思考题目，产品经理不要只想着需求，交互也不能只想着体验，视觉也不能仅仅思考美不美观，这种眼界的提拔搜索引擎优化排名，会直接影响到设计方案。

假如你已经建立了整个产品设计的知识系统，这只是第一步，下一步你还有考虑产品运营，考虑商务、考虑资本，这些都是必要设计师去了解的。周末和同伙聊天的时候，他打了个很好的比喻，把公司比作一小我，那么不同的职位就相称于每小我的感官和外在，产品相称于一小我的大脑，视觉相称于一小我的衣品，商务相称于一小我的沟通能力…

你假如只了解人的一个部分，就永久没办法理解这小我。

我目前就在深耕产品设计的基础上，在学习产品运营的知识。

二、确定页面目的和目标

明确了页面设计的上游的流程九寨沟酒店住宿，接下来要做的，是确定页面的目的和目标。

目的和目标是两个概念，目的是你为什么要设计这个页面，目标是设计这个页面想要达成什么。例如，电商的商品详情页目的是介绍商品、帮助用户进行购买决策，目标就是进步用户下单的转化率。

京东&淘宝

作为同样的商品详情页面，不同的目的和目标，直接影响到设计情势。例如京东是自营商品，用户一次性购买的越多，其客单价会更高、运营成本也会更低，所以它的商品详情页的重要目标是进步加入购物车的转化率。而淘宝作为一个平台，单独购买一件商品和一次性购买多件商品都很紧张，所以它的加入购物车和立即购买的优先级是划一紧张的。

记住：明确页面目的和目标，这是你设计一个页面的引导思想。

三、确定页面的来源和行止

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

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

返回上一级

分享&购买

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

在考虑页面的行止的时候，一样平常有二级页面的情势和一时框的情势，一时框又有模态和非模态的区别。例如淘宝的立即购买就用了模态一时框，而没有采用二级页面，这能削减用户在完成一个义务时的跳转步骤，进步转化率。

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

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

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

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

②优先级最高的放在用户第一眼能看到的位置（页面的第一屏）。例如将商品图片、题目、价格放在第一屏的位置新疆人事考试中心网，评论则放在第二屏的位置；

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

五、考虑技术的局限性

上次在做阅读APP的时候（pad平台），必要在E-Ink屏上的阅读页面增长竖屏模式，这种模式会更利于用户进行阅读的，类似于kindle的阅读体验。但是由于下屏没有做G-senser，所以是不支撑竖屏的，只好摒弃。假如我实现不去了解这点网络营销培训，做出来的方案只是虚耗时间。

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

我本身就有在做设计之前和相干技术沟通想法的风俗，真的帮助很大。

照旧文章前面的那句话，页面框架设计只是整个产品设计中的一环。不要把眼界局限在这一环，也不要只站需求、只站在交互、只站在视觉上思考题目，如许你永久是个美工，而不是一个设计师。设计师是一个能用设计语言提供体系性解决方案的人，而不是简单画图的人。

题图来自 Pexels ，基于 CC0 协议

关于作者

邹志楠，微信公众号：邹志楠，用户体验设计师，专注于互联网产品设计。

• 上一篇：营销型网站建设的特点与适用范围
• 下一篇：最佳商城网站建设的9个快捷技巧