宣传型网页交互设计总结

最近在回顾自己之前做过的项目时，发现其中涉及到宣传页的版本竟然高达六个，于是便对这种页面的设计方法做了一下小结，以下分三个方面进行阐述。

▊ 什么是宣传页

宣传型页是指以产品或企业的展示为主的网页，目的是让访问者了解产品的功能、公司的概况等。对于产品人员，其功能是吸引用户购买、注册或进一步了解；对于用户，这类页面没有购物或资讯网站有那么强的功能性，它更像是大街上被递过来的传单或马路边的广告牌，只要匆匆中撇上几眼就行。虽然这种宣传页也会大体介绍产品的功能，但它并不能被当成产品的使用说明书或New features description，因此应该避免过于详细地介绍产品的功能和特点。

▊ 用户如何浏览宣传页

如我们所知，大部分时候用户以扫视而非阅读的方式浏览网页。对于宣传页，用户的停留时间只会更短，这就要求页面具有更好的易读性、更强的吸引力、以快速抓住用户的眼球。

当页面不能满足期待时，大部分用户会离开。用户没有必须仔细了解你的逻辑或故事的理由，那些试图通过添加文字信息来丰富页面的行为往往适得其反。

相对于繁长复杂的叙述，用户更喜欢短平快的表达。他们希望最好随便瞟两眼就能知道页面在讲什么，然后再决定自己要不要进一步了解。

▊ 宣传页设计中交互设计师做什么？

1. 明确宣传页的主要功能

一般这种重视觉轻交互的页面，放在小公司视觉就直接做了，只有一些分工比较明确的大公司才需要交互设计这个环节。比较常见的情形是，网站近期要上一个产品或功能，需求人员想让设计师们做个页面供运营推广，于是扔一篇Word文档过来，说：就按这上面写的进行设计，卖点要醒目，风格要大气。这时如果直接按照Word文档开展设计，很可能会过分关注细节而忽视全局。因此接到需求后有必要对文档之外的东西进行沟通，了解清楚以下问题：这个页面主要给什么人看的，是供应商还是采购商，是老板还是采购员？他们会通过什么渠道进入这个页面，移动端还是PC端？页面是以品牌推广还是销售增量为目的？如果以品牌推广为目的，采用什么样的方式才能更好地传递品牌特性？如果以销售增量为目的，什么样的信息和展示方式才最能激起用户的兴趣？清楚地了解这些问题或许不会让页面更好看，但却能避免在设计过程中由于误解需求人员的意图而造成的方案修改。

2. 收集、精简、梳理素材

大多数时候，需求或运营人员所给的设计素材都是不完整的，这就需要在交互设计前期收集、精简、梳理素材。经验不足的设计师往往容易被上游所提供的素材所束缚，不敢对文案进行大幅度的精简，不能在结构或创意上跳出上游所提供的方案。但设计最重要的环节就是剔除没用的信息，留下有用的信息。对上游所提供的素材，设计师首先应对其目的表示认同，但完全可以探索更有效的表现方式。比如需求人员或许会想在产品的每个优势点后面增加一个案例，用来增加产品的说服力。但其实他们更想表达的是客户对该产品认同感很高，至于每个优势是否必须有相关案例辅助则并不重要。理解需求人员的核心目的，对素材进行重新整理，是开始画线框图的第一步。

3. 页面的基本布局

页面的基本布局决定了信息是以什么样的顺序和位置呈现给用户的。交付给视觉设计师的低保真原型，应该定义页面的一些基本特征。比如，哪些信息应该放在首屏，重要的操作放在什么位置，页面的风格应该是怎样的等等。此外，信息的组合和展示方式也需要交互设计师进行仔细地考虑：如果是图片，希望视觉设计师用什么样的图片素材？ 如果是图片和文字的组合，是希望用户先看到文字还是图片？如果有多张图片，图片直接铺开还是采用轮播的方式？如果交互设计师只是交付一个随意拼凑起来的页面，视觉设计师很可能会完全无约束地做，最终产出视觉稿就可能和需求或客户想要的差别很大。

4. 确保信息的易读性

易于阅历和理解的信息，其视觉上的吸引力才是有意义的。设计师的关注点不应只放在布局、色彩等视觉元素上，还应该对内容本身进行仔细考虑。比如，Banner上面的文字有没有准确地传达出？如果要放一大段文字在页面上，能不能考虑给文字加一个标题？如果是图表，采用什么样的方式能使数据更易于阅读？在信息易读性与页面视觉效果之间，永远将优先级留给前者。

5. 设计动效

在宣传页中加入合适的动画有助于信息的传达，也更能引起用户的注意。虽然多数情况下动效都是前端工程师直接加的，但如果交互对动效没有任何要求，完全凭前端的意愿去做，那一方面会让前端无从入手，另一方面也增加了效果的不确定性。因此，可以先用动效制作工具做个demo，如果合适、有必要，再交给前端会更妥当。