页面框架设计是整个产品设计中的其中一环,设计师不要把眼界局限在这一环,也不要只站在需求、交互、视觉上思考问题,应该从多个角度看问题,你才会学会成长。
1、明确页面设计的位置
互联网产品设计的流程大致是:产品定位——需求分析——信息架构设计——流程设计——页面框架设计——设计说明——输出设计文档。可以看到页面设计是处于整个流程的后期,所以前期必须去和产品经理或者用研人员反复沟通,明确产品定位、明确需求、了解业务流程,然后再梳理信息架构、产品的导航形式、任务流程和页面流。只要你从事的是产品设计的工作,都要从产品设计整体去思考问题,产品经理不要只想着需求,交互也不能只想着体验,视觉也不能仅仅思考美不美观,这种眼界的提升,会直接影响到设计方案。如果你已经建立了整个产品设计的知识体系,这只是第一步,下一步你还有考虑产品运营,考虑商务、考虑资本,这些都是需要设计师去了解的。周末和朋友聊天的时候,他打了个很好的比喻,把公司比作一个人,那么不同的职位就相当于每个人的感官和外在,产品相当于一个人的大脑,视觉相当于一个人的衣品,商务相当于一个人的沟通能力…
2、确定页面目的和目标
明确了页面设计的上游的流程,接下来要做的,是确定页面的目的和目标。
目的和目标是两个概念,目的是你为什么要设计这个页面,目标是设计这个页面想要达成什么。例如,电商的商品详情页目的是介绍商品、帮助用户进行购买决策,目标就是提高用户下单的转化率。
3、确定页面的来源和去处
任何单独的页面都只是用户完成某个任务的其中一环,这个页面从哪来?能去哪?影响着页面的导航设计、以及工具栏上按钮的摆放。在考虑页面的去处的时候,一般有二级页面的形式和临时框的形式,临时框又有模态和非模态的区别。例如淘宝的立即购买就用了模态临时框,而没有采用二级页面,这能减少用户在完成一个任务时的跳转步骤,提高转化率。
4、确定页面内容和优先级
经过前面三个步骤,页面框架基本成型,现在就要往这个框架填充内容。根据信息架构设计,基本会确定这个页面需要包含哪些内容。其次就要确定页面信息的优先级,确定优先级的判定依据就是第一步所说的当前页面的目的和目标,以及在做需求分析的时候,公司价值和用户价值两个价值维度的考量。而优先级对设计的影响有一下几点:
①用对比的手法,明确信息层级,优先级越高信息表现越突出。例如上图格和销量字段的对比;
②优先级低的要弱化、甚至是隐藏或删除。客服、店铺和收藏的按钮相对于加入购物车和立即购买,很弱,消息、帮助、我要反馈则更弱,所以被收起在右上角更多的icon中。
③优先级最高的放在用户第一眼能看到的位置(页面的第一屏)。例如将商品图片、标题、价格放在第一屏的位置,评论则放在第二屏的位置;
5、考虑技术的局限性
不管是交互还是视觉,总是会想到一些创新好玩的设计形式,每当这个时候一定要去和相关技术人员沟通,确保设计方案的可行性。此外还要考虑项目周期,如果上线时间紧迫,其实是不允许设计师把设计形式做得很重的,只需要出一个简单的保底方案即可。页面框架设计只是整个产品设计中的一环。不要把眼界局限在这一环,也不要只站需求、只站在交互、只站在视觉上思考问题,这样你永远是个美工,而不是一个设计师。设计师是一个能用设计语言提供系统性解决方案的人,而不是简单画图的人。