如何设计优秀的网页让用户有参与感

qiangyu945

qiangyu945

2016-02-16 21:10

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的如何设计优秀的网页让用户有参与感,手机电脑控们准备好了吗?一起看过来吧!

参与感一词最近很火,也是打动用户一个非常有效的表现手法,今天阿里的同学从这个角度聊聊如何设计网页,利用空间法则、抽象法则和换角度法则给用户更多的愉悦感和融入感,非常有料的一篇教程,来涨姿势吧。

遇到的问题

在设计运营类需求时,我们采用的比较常规的设计形式是先设计一个漂亮的头图然后再将信息内容进行排版填充,当遇到页面中的文字元素比较繁冗时,大量内容的堆砌不仅很容易让用户浏览时产生疲劳,而且设计师在这个过程中也会容易陷入在传统框框里无法突破,在设计时感到枯燥乏味、越做越无趣。平时采集设计灵感时我们会注意到现在很多优秀的运营设计已经不仅仅局限于常规的形式,而是越来越注重整体画面给用户带来的更多愉悦感及融入感。怎样突破常规,让页面在形式及情感上更吸引用户是我们设计师值得思考的问题。

什么样的设计形式能更有趣、更容易打动用户?运营设计主要表现手法之一就是通过制造情景来渲染主题气氛。对情景的理解一层指场景、环境;氛围有了,那试试再增加一些情绪上的感染和共鸣把,情景的另一层就是指人物,情节,景物唤起人的情绪和内心境界。制造情景体验一方面是把页面信息放置到贴近生活的真实环境中,让画面符合主题并且非常直观,另一方面能引导用户展开想象,唤起某种记忆,让用户有身临其境的感受。

用户不仅作为一个看客,还能以第一人物的视角参与到画面中,让用户迅速置身场景中,带动情绪,引发用户兴趣去完成后续操作。这里总结出一些打造情景体验的具体方法及例子帮助大家去设计更有意思的运营页面:

空间法则

空间感的渲染能让人更有身临其境的感觉,这种方式主要根据主题模拟真实场景,再通过整体透视的构图使画面呈现立体空间感,增加画面冲击力强,一下子吸引把用户代入到氛围中。我们来看几个例子:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/pmsj/)

如何设计优秀的网页让用户有参与感,PS教程,图老师教程网

如何设计优秀的网页让用户有参与感,PS教程,图老师教程网

以上的例子都通过空间打造增加画面代入感,画面的气氛和现实生活中的场景极其相似,用户很容易被吸引到气氛中。需要注意的是这种立体场景的搭建对素材及整体层次的控制力要求比较高,在设计的时候需要先搭建大的画面关系,再往里头添细节和内容,同时也要注意不要让场景抢了内容的视觉焦点,在适当的时候还需要做些减法。

抽象法则

不同于上面提到的逼真空间搭建方法,这种设计方式虽然也是选取现实存在的对象,但是需要提炼一个可以将内容信息巧妙的融合串联的承载容器构建出主体轮廓,然后再将内容填充到轮廓里面。这种形式能够让用户一眼就能了解到一些信息,同时又能贴合主题很好地传达情景氛围,让页面生动更有趣味性,特别适合一些节日主题的运营页面。

如何设计优秀的网页让用户有参与感,PS教程,图老师教程网

如何设计优秀的网页让用户有参与感,PS教程,图老师教程网

把内容放到盒子里或者一封情书中,顿时就产生了亲切感,抽象的主题通过实体显性化地表达出来,第一眼就能明白主题。这种方法需要选取合适的现实元素并对其高度概括,注意将形状尽量精简强调,避免太具象,适当地舍弃一些繁琐的、不必要的元素,以免影响阅读的内容。

换角度原则

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/pmsj/)

除了还原真实场景,角度的不同也会呈现不一样的形式和感受,千篇一律的规则视角会难免让页面显得单调平庸。不妨试试模拟真实生活中的视角,我们来看几个例子:

如何设计优秀的网页让用户有参与感,PS教程,图老师教程网

如何设计优秀的网页让用户有参与感,PS教程,图老师教程网

这些例子往往是我们生活中很熟悉的情景却容易被忽略,工作中俯视看到正在写作的区域,对页面的倾斜还原最真实的状态;吃饭时关注自己盘子中食物的角度,亲切的视觉感受令人置身其中,感染力非常强。同样的元素主题往往变换一下画面视角的方式能巧妙的打破常规构图的呆板并不落俗套,让页面轻松活跃。同时真实的场景一下次拉近了和用户的距离,也很容易和用户内心产生共鸣。不过变换角度可能不太适合文字正常阅读,要注意文字排版保证流量的舒适性。

局部突出法则

我们常常看到很多电影海报的设计中会截取某部分的方式作为的重心集中表现,最大化也是最突出,以小见大来引起注意,同时犹抱琵琶半遮面的方式制造更多悬念,引起观众兴趣及思考。具体运用在运营设计中又是怎么做的呢?我们来看几个例子来体会其中的设计思路。

如何设计优秀的网页让用户有参与感,PS教程,图老师教程网

如何设计优秀的网页让用户有参与感,PS教程,图老师教程网

以上的例子都是通过截取局部来吸引眼球,这种某个局部特征被放大强调的方式推翻我们常规的视觉习惯从而让感情集中强化,视觉充满神秘感瞬间抓住了用户的眼球,页面的目的也就达到了。这种方法可以多从电影、摄影中借鉴手法,通过特殊的视角打造出精彩的画面。

小结

制造页面中情景体验主要通过还原现实场景再加以艺术化的表达来增强页面的整体气氛,让用户不用去阅读文字就能很快明白这是个跟主题相关的页面,代入感极强,能比较直观获取信息;同时拟物具象的方式也减少了用户认知成本,亲和的设计形式在情感上给用户更多情共鸣。当然这种方式需要设计师日常要注意观察生活中的细节,多联想与各场景相关的事物,不一定需要靠素材的堆积也能打造出动人的页面一击击中用户。

运营设计现在越来越注重个性、趣味性以及视觉冲击力,页面的形式和技巧也是多种多样,以上总结的方法希望能帮助大家在设计遭遇瓶颈时找寻一些解决思路。设计师需要时刻灵活创新汲取灵感,才能够避免按习惯性的思维去设计,不断创造出新的视觉表现。当然还有更重要的是运用方法多多进行实践转化成自己的东西,才能得到能力上的有更大地提高。

展开更多 50%)
分享

猜你喜欢

如何设计优秀的网页让用户有参与感

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
如何设计优秀的网页让用户有参与感

网页设计如何让用户视觉更舒服

网页设计 设计 平面设计
网页设计如何让用户视觉更舒服

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

网页设计风格 2017现代感网页设计

网页设计 设计
网页设计风格 2017现代感网页设计

如何设计优秀的网页404错误页面

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
如何设计优秀的网页404错误页面

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

网页设计的层次感如何体现

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网页设计的层次感如何体现

优秀的水平网页设计欣赏

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
优秀的水平网页设计欣赏

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

35款设计独特的名片欣赏

35款设计独特的名片欣赏

浅谈艺术与设计有那些根本的区别

浅谈艺术与设计有那些根本的区别
下拉加载更多内容 ↓