如何设计网页才能让用户有“参与感”?

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

  遇到的问题

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

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

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

  空间法则

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


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

  抽象法则

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


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

  换角度原则

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


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

  局部突出法则

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


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

  小结

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

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

时间: 2024-08-29 11:55:14

如何设计网页才能让用户有“参与感”?的相关文章

以用户为中心的设计:网页确认框的用户体验设计

文章描述:以用户为中心的设计:网页确认框的用户体验设计. 确认框,顾名思义,对关键的用户行为进行确认,比如"询问是否删除","告知已删除".根据网上的观察,发现有的网站对确认框的设计缺乏合理性.本文谈谈自己的思考. 类别 根据触发目的,确认框分为两类:询问和告知. 询问 转推的确认框 询问,类似 Javascript 里的 confirm(),即:是否去做? 告知 Flickr 的告知 告知,类似 Javascript 里的 alert(),即:做的状态. 必要性

让你的网站受大众欢迎 设计网页的用户体验设计

在一般设计网页的时候,你必须要注意几个问题,第一就是你必须要规避你自己的喜好,你要知道你喜欢的东西并不一定谁都喜欢,比如网页构成色彩,你喜欢大红大绿,并且你的网页充斥着这样的颜色,那么你一定会丢失掉很多你的潜在客户,原因很简单... 站在浏览者的角度考虑,你是喜欢漫天广告的网页,还是有更多实质内容的网页? 显而易见,你一定是选择后者,这是人之常情,这就是最简单的用户体验(User-Experience,简称UE),也是最直接影响你的网页浏览度的因素.很多时候,用户体验直接影响到你的网站是否成功.

用户体验设计:网页中的确定和取消按钮

网页制作Webjx文章简介:我们常常在执行一个动作时,会被要求确认一下,这时候往往给出两个按钮,"确定"和"取消"."取消"按钮往往不会单独出现,而是与"确定","保存"之类的操作同时出现. "取消"(cancel,stop)和"撤消"(undo),看起来很像是同一回事,用起来似乎也差不多.但是两者在使用上还是有些差别,体验上也略有不同. 一. 取消键与撤消键 我们常

什么样的空状态设计才能留住用户?

  空状态,或称零数据状态,很多时候不太招设计师的待见.我们基本都是在主要流程界面的设计工作完成之后才会回过头来考虑完善一下,因为从表现上来看,空状态给人的感觉就是临时性的,有些微不足道.不要被空状态的名字所迷惑,实际上,这个状态在引导性.愉悦性和保留用户等方面的潜质对于产品体验在细节当中的成败有着不可忽视的作用. 空状态通常会在初次使用.完成或清空内容.软件出错等情境下出现.从产品体验的角度来,空状态大体可以由以下三类情况触发: 产品初体验 成功完成目标任务 出错.失败 你的App在这三类情况

网页申请表单用户体验设计简述

设计|网页 对于网页设计师,制作申请表单是经常遇到的工作,如何使用户在使用你设计的表单时遇到不必要的"障碍",本文提供了一些建议: "输入框表单元素应该合理分布,以便于使你的大脑可以处理表单框架和与之相关的页面区域"选自文章<HTML: the Definitive Guide> 工作中可能会遇到的问题,我们通过如下图示分析一下"标签"和"表单"的关系: 一般会应用到的视觉元素: 对于上面提到的"左对齐方

网页版块的用户体验设计:用户并不做最佳选择

文章描述:用户体验(User Experience,简称UE)是用户在使用产品过程中建立起来的一种纯主观感受. 用户体验(User Experience,简称UE)是用户在使用产品过程中建立起来的一种纯主观感受.在基于Web的产品设计中,UE是一个相对较新的概念.Donald Norman博士提出了"用户体验"一词,他是一个认知科学的研究人员,首次提出了在互联网领域以用户为中心设计的重要性(用户的需求决定产品如何设计). Donald Norman 用户体验很重要,最大的理由是:它对你

ZakerCEO李森和谈设计:不只为用户考虑

Zaker创始人.CEO李森和, 认为设计是"敲门砖",且不只为用户考虑2010年12月,有一款叫做"Zaker"的阅读应用第一次出现在iPad上:时至今日,它已拥有900多万用户,逐渐被智能机用户熟知.Zaker较为人称道的一点是界面设计,在我们的采访中,Zaker创始人.CEO李森和给出了 诸多设计细节的解释:比如为什么是左右翻页,为什么采用频道订阅.但没有"文件夹"的整理方式,聚合频道中权重各有不同.但没有强调"推荐算法"

设计网页总结的10个小技巧

下面是我在设计网页时得出的一些技巧,希望对您有所帮助. 1.尽可能的使用路径和形状图层. 这样你可以在后面想修改时,可以从容的修改.   2.图层样式,是你的好朋友. 双击图层,你可以对它进行各种效果:渐变,阴影,色彩重叠.这样做可以更容易的修改.比如一个 客户说:"这个可以改为蓝色的吗?" 3.在文字图层上使用尖锐的文字. 因为这样更能容易让用户看的清楚.当字体小于12象素时,尽可能的使用尖锐字体.如果字休很小时,就设置文字的属性为无.如下图:   4.在选择字体时,尽可能的使用&q

Javascript设计网页中的下拉菜单

javascript|菜单|设计|网页|下拉 在网页制作时,为了更好地组织信息,使显示的信息分类明确.层次清晰,网页制作者往往费尽心机.常用的方法有用树型结构显示信息,用表格进行网页布局,用框架(frame)组织页面等等.但对于习惯了Windows操作系统的用户来说,利用菜单操作可以算是最自然的方法了.下面我们就来看一下怎样在网页中设计下拉式菜单. 下拉式菜单由若干个显示在窗口顶部的主菜单条和各个菜单条下面的子菜单组成.每个子菜单往往还包含几个子菜单项.通常,只有菜单条显示在窗口中,并且当鼠标指