宣传型网页交互设计总结

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

▊ 什么是宣传页

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

用户如何浏览宣传页

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

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

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

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

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

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

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

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

3. 页面的基本布局

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

4. 确保信息的易读性

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

5. 设计动效

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,539评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,911评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,337评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,723评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,795评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,762评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,742评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,508评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,954评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,104评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,736评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2 352

推荐阅读更多精彩内容