产品首页设计10步走

作者： 点击量： 2016-01-06 13:39:18

无论是PC端还是移动端都会有首页，但是后台往往是不不需要的首页的。为什么？因为前端面对的是不了解你的用户，所以需要首页把你最想告诉的用户的东西给展示出来。而后台不同，使用的人本身就是对你的平台了解。即使是第三方服务的后台，也是信任你才使用的平台。所以前端偏重展示和简洁为主，后台偏重逻辑和使用度。当你负责一个产品线的时候，做前端页面更注重的是UI设计的排版和布局，前端工程师切图和炫酷的效果；而后台页面更注重后台工程师的逻辑、数据调用。

而web端页面展示复杂，我们以用户体验五要素（战略层、范围层、结构层、框架层、表现层）和简约至上四策略（删除、组织、影藏、转移）作为产品设计指导思想。设计的web首页的时候，我们要展示简洁大方也要思考周密，但有时候真的会有遗漏怎么办？那我们可以从以下十步去完成设计，不会有遗漏。

一、产品整体布局

整体布局显示从我们的业务出发：

首先思考我们的用户是谁？进入首页，首屏展示一定是要告诉用户我们是干什么的？那些首页分类的导航起到就是告诉用户我们是干什么的。
然后从第二屏开始，告诉用户为什么要选择我们？然后告诉用户我们是怎么解决这些问题的。
从用户角度出发：

首次进入首页看见的所有产品和服务的大类目。这些是我需要的吗？
然后开始浏览首页下滑，找到买这个服务和商品信任的理由和价格是不是优惠。
整体布局思考从WHO，WHAT，WHY，HOW的层面进行分解，简单说就是3W1H法则。

二、用户需求确认

特别电商和O2O产品在web端首页的商品分类很重要；在web端首页展示产品分类够不够直达用户心理很重要；好的产品分类可以让用户导流。所以设计产品分类时，一定是按合理的用户认知进行排列。这里分类就牵涉到用户需求。

我们在确认了用户画像后，建立了用户用例。这个时候用户需求已经确认；比如用户用例把用户整体购买流程和顺序完全模拟出来。

怎么确认这些需求？

流量品的需求路径。
流量品的路径周边盈利品类目展示。
盈利品的需求路径。
确认这些后，不仅业务也是从用户需求出发了；相近的需求安排，可以不按常规安排也是了解用户需求很重要的。

从点击分类，进入列表页，再进入商品详情页，再点击购买。这一套需求路径需要站在用户角度，我们往往太局限于业务角度。

三、竞品设计分析

竞品分析有时候在我们看来可能是抄袭；但是借用乔布斯话说，这就是借鉴了。但是竞品分析依旧重要，我们必须时刻关注对手的动向。

在页面布局时，其实你会发现产品思考点越来越重合，因为业务重合性的关系。设计层面却是不同的，是基于自身业务展示的。

这里需要思考的是，对手上的这个块页面需求点是哪块？对手又上了哪些业务？他的下一阶段产品目标是什么？然后再思考我们是不是可以上这个页面？

最后，在产品设计可以采取不一样的展示风格，不一样的展示风格基于用户层面去思考。哪怕小小的设计展示不同，也是打动用户的关键。

比如：

web端你鼠标下滑动时，你的顶部工具栏是吸顶式导航，就能很好吸引用户注册你网站。
如果在阅读网页时，你加入了小小返回首页功能，用户就更能进入沉浸式阅读。
在移动端设计时，哪怕你返回有一个向右滑动手势比没有好很多，技术上只是多了十几行代码。

四、功能模块确认

从3W1H和竞品分析确认后，我们功能模式其实大致都可以确认：首屏的全部分类展示和banner图展示；顶部的吸顶式工具栏；第二屏展示热门服务，热门服务的吸引点在于告诉我们产品的优势；展示运营活动和信任的用户展示。后面是SEO页面和常用页面底部。每个功能模块确认都是从产品设计和业务逻辑进行支撑，最后通过QA的测试用例进行模拟测试。

功能模块确认需求注意的是：

展示的功能是否直观。
展示的功能是不是表达清楚，用户了解。
展示的功能是不是容易操作理解。
展示的功能上下衔接是不是合理。

五、布局排版简洁

web端布局排版越来越简洁了，从90年代那种弹窗漫天飞，到00年代页面布局小而杂乱。现在web端页面展示也继承了移动端一样的特性，简洁大方。

web端页面设计也经历了3个时代变更。在排版合理基础上，简洁并不是意味着简单。我们要避免简洁并不仅是简单的误区，而是要用简单的语句和图片解释清楚我们是干什么的。

页面整体呈现出统一性。上下视觉保持一致性，不要使得页面分散用户的注意力；每个往下滑动的页面都是需要层层吸引用户的。

文字图片整体简洁和色调一致性容易让用户进入沉浸式浏览和思维中。

六、交互设计考量

交互设计上考量一定是简单交互为主，交互设计逻辑性是关键。如果有位很好的交互设计师，他一定帮助你从用户心理进行设计。当然我们产品经理也一定是这方面的高手。

《乌合之众》和《引爆点》是二本不错从心理层面解析用户的书籍，交互从展示页面到点击后展示页面都是层层相扣的。在首页设计上，一定是简洁和吸引用户点击下去的想法，文字和图片是吸引的关键点。

文字从用户心理角度去思考，因为文字更具有想象空间，所以适合用户心理角度思考。
图片从业务展示角度思考。图片设计从业务角度思考，用户喜欢更专业的，因为他们相信专业就是放心的商品和服务。
而在运营模块和banner，主题活动展示就不同了，需要一些炫酷的设计和复杂展示，这里一定是和web端首页设计不同的，它们需要炫酷的设计吸引用户，不需要迭代。

七、内容容易理解

产品设计上，我们往往忽视文字展示重要性。其实哪怕在五年后的产品，文字依旧是很重要的单位。无论是图片还是视频都是基于文字的。

如何做到内容的可理解性呢？

用户理解的语句。比如大量网络流行语和二次元年轻化的语句。
内容阅读无重合的独特性。比如你这里有，我这里也有。但是我们内容解释更简单短小精悍，更容易理解，那么用户就来我们这里了。
最重要的文字进行重点突出。用户在碎片化场景下阅读内容越来越多，把重点展示出来，用户就可以快速了解，可以快速做后续用户行为。

八、站外引流思考

web端与M端最大不同点就是SEO需要在web端进行展示，因为首页大部分都是作为落地页进行展示。首页是最能解释清楚我们的产品是做什么的页面，也是用户体验和打开几率最高的页面。

SEO我们需要建立相关链接、相关服务、相关服务的问题解答、网站地图、相关服务的分支：城市、服务商入口、网站自身的招聘、关于我们都是SEO建立关键点。

然后思考站外每一个流量入口落地页在哪里。需要多少关键词落地在首页的。

每一个站外进来的用户，都是不一样的；针对不一样的用户，我们尽量展示他们需要的内容。在数据PV和UV统计下，根据二八原则，如果能留住那80%的用户进入沉浸式阅读已经不容易了。

九、整体逻辑架构

web端首页页面前后逻辑是否可以让用户进行沉浸式浏览时关键，哪怕是一个小小的功能和不是主打的商品和服务，只要能打动用户就是成功的。做好更个数据埋点分析，更好支撑我们的产品迭代和更好的升级。

整体逻辑就是每一个点击后的页面都是符合用户心理和正常逻辑的，后续的每一个列表页和商品详情页都是可以进行相互关联的，在用户不知不觉中就进入沉浸式浏览的状态了。

做到页面关联性强。
页面展示结构合理。
整体框架和逻辑符合用户浏览角度。

十、总结梳理定稿

最后把所有的业务逻辑和用户行为进行总结展开和思维维度回收。留下思考中合理的，和现阶段先完成的需求的，建立需求管理池，安排优先级。然后把总结核心的需求功能的梳理和思考，把所有步骤进行思维回收总结。

接下去就去找技术吧，进行需求评审，开发周期。然后进行项目排期。

总结：

产品整体布局：3W1H法则。
用户需求确认：流量品和盈利品的思考。
竞品设计分析：不同点是不是适用于我们产品。
功能模块确认：功能模块的合理性。
布局排版简洁：简洁并不是简单。
交互设计考量：文字从用户角度，图片从业务角度。
内容容易理解：重要内容的突出。
站外引流思考：完善的SEO落地页。
整体逻辑架构：页面的关联性。
总结梳理定稿：思维维度展开的再回收。
web端首页设计已经进入了一个全新的时代，我们的思维要更为符合时代潮流才不能被淘汰。web端设计也让在移动端产品设计上留下不少思考点。二者用户承接性、业务区别性、展示不同的简洁性…产品设计思考永远不会停止。

选购指南:
本公司主要为山东地区的商业、企业单位及个人提供各类定制开发服务，如：软件定制开发、APP定制开发、微信定制开发以及P5业务支撑平台等整体的信息化解决方案，能够满足各种大中小型商业、企业及个人的需要。

如需了解本公司的详细业务情况，敬请访问本公司官方网站：http://www.simpro.cn。

公司名称：山东森普信息技术有限公司

公司地址：济南市高新区齐鲁软件园C座3楼

公司网址：http://www.simpro.cn

业务ＱＱ：176099777

联系电话：400-677-0389