南部商务区的一件产品也能拍!
手机:18958279518, QQ:279247780
天气
平面设计 样本画册 包装设计 海报招贴 传单折页 Logo标志 名片设计 PPT设计 活动展览 其他设计 广告制作
 
    视觉艺术  /  News
网站设计:指示性设计元素帮你提升用户体验
发布时间:[2020-08-20]    点击:

日常生活中,当有人向你问路时,最好的办法就是给他们指出方向和路线。在web和app界面设计中也一样,设计师可以利用各种指示性设计元素引导用户,帮助用户找到自己想要的内容或完成某项必要的操作。

本文就UI界面中常见的指示性设计元素做了一些整理,希望可以帮助到各位设计师。

指示性设计元素帮你提升用户体验

什么是指示性设计元素?

众所周知,道路上的指示标志是用来指示车辆和行人该如何通行。同理,在UI界面中,指示性设计元素就是用来告知、引导、指示用户的设计元素,因此,只要是在视觉上可以提示特定的交互或内容,从而让用户更快、更轻松地注意到,比如CTA按钮,文本提示等,都属于指示性设计元素。

[SITESERVER_PAGE]

指示性设计元素是如何影响用户体验的?

大多数情况下,往往只需要几秒钟时间,用户就已经决定了要不要使用你的产品。因此,页面的逻辑是否清晰,结构是否明确,重点是否突出,指示性元素的引导是否合理就显得非常重要。

指示性设计元素是我们今天讨论的重点,它对用户体验的影响是多方面的,使用正确的指示性设计元素可以:

  • 方便用户快速浏览页面

  • 加强页面视觉层次感

  • 提供更便利的导航

  • 提高页面转化率

关于指示性元素和用户体验之间的问题,CXL Lnsitute曾经做过一个很有名的实验。这个研究小组做了很多个不同版本的落地页面来进行测试,根据用户行为收集了大量的用户交互数据,并进行了准确分析,发现不同的设计对用户行为、用户在页面的停留时间以及页面转化率都大有影响。

[SITESERVER_PAGE]

CXL Lnsitute用于测试的落地页面如下:

1)界面中人物视线偏移表单:

指示性设计元素帮你提升用户体验

2)界面中人物视线聚焦在表单:

指示性设计元素帮你提升用户体验

[SITESERVER_PAGE]

3)界面中有箭头指向表单:

指示性设计元素帮你提升用户体验

4)界面中没有任何指示性设计元素:

指示性设计元素帮你提升用户体验

[SITESERVER_PAGE]

5)界面中通过深色背景突出表单:

指示性设计元素帮你提升用户体验

6)界面中有一个三角指向表单:

指示性设计元素帮你提升用户体验

[SITESERVER_PAGE]

测试结果显示,落地页的热点图差距非常巨大。

首先,带有手绘箭头的页面热点图如下:

指示性设计元素帮你提升用户体验

该页面用户的停留时间最长,并且表单的点击次数最多。

其次,人物视线偏离表单的页面热点图如下:

指示性设计元素帮你提升用户体验

[SITESERVER_PAGE]

该页面,用户的注意力也完全脱离了表单。

可见,指示性设计元素对用户行为和页面的转化率有着非常重大的影响。

常见的指示性设计元素

一、箭头(Arrows)

箭头是最受欢迎的指示设计元素之一,它通用、明显、易懂。不同年龄、不同文化、不同教育程度以及不同技术涵养的人都可以理解。前面提到的CXL Lnsitute的测试也验证了这一点。

  • 家居装饰电子商务网站

    [SITESERVER_PAGE]

使用箭头作为交互元素的视觉提示:

指示性设计元素帮你提升用户体验

  • 外卖网站

左右各有一个箭头,提示用户可以选择更多:

指示性设计元素帮你提升用户体验

[SITESERVER_PAGE]

  • Dance Academy着陆页

使用箭头提示用户页面在水平方向上存在交互:

指示性设计元素帮你提升用户体验

  • Tubik Studio团队设计的网站

    [SITESERVER_PAGE]

底部箭头提示用户可以滚动鼠标浏览页面:

指示性设计元素帮你提升用户体验

二、手型(Pointers)

如果你不想用箭头这类具有强指示性的元素,可以考虑使用手型提示。回想一下,如果有人想让你看某样东西的时候,他是不是会用手直接指向该物体?在web或app界面中也一样,想要引起用户注意,也可以用“手”直接指出来。这样,不仅可以把指示性元素和整体的视觉效果融为一体,还非常巧妙地提供了优雅的视觉提示。

[SITESERVER_PAGE]
  • 某招聘艺术家平台的着陆页

使用了插画元素,不仅提升了界面的美观度,插画人物的视线和手势也正好指向了关键信息和CTA。

指示性设计元素帮你提升用户体验

  • 某邮件服务登录页面

该页面的指示性设计元素实在很巧妙,不易发觉,却又能把全部的注意力都集中到一点上——FREE SIGN UP。如果你仔细观察,每个元素,无论是纸飞机的朝向,还是花朵延伸的方向,全部都指向了CTA。

[SITESERVER_PAGE]

指示性设计元素帮你提升用户体验

  • 行李托运网站登陆页面

使用了插图,人物和飞机都指向了顶部最右侧的CTA,也就是BOOK YOUR TRANSFER这个按钮。

指示性设计元素帮你提升用户体验

[SITESERVER_PAGE]

  • 邮件管理系统登录页面

该页面的人物手势和其他构图元素,都把重点指向了首页大标语。

指示性设计元素帮你提升用户体验

三、视线(Eye line)

视线是建立在人类自然反应之上的一种强大的指向方式。当看到别人的目光集中在某个点或某个物体上时,我们会自然而然地产生好奇心,他们在看什么?人类的这个心理反应经常被用在视觉内容设计中,包括摄影、插图等,最后在UI界面也被广泛使用。

[SITESERVER_PAGE]

  • 美发美容公司网站主页

使用了首页大图,该模特的视线向下方看,视线的焦点停留在CTA上。

指示性设计元素帮你提升用户体验

  • 约会应用程序的登录页面

    [SITESERVER_PAGE]

使用了带有文本的插图,人物的视线正在看向文本内容。

指示性设计元素帮你提升用户体验

  • 销售发饰的电子商务网站

使用了精美的插图,界面中人物的视线集中在首页标语上。

指示性设计元素帮你提升用户体验

[SITESERVER_PAGE]

四、视觉提示

箭头可以提示用户进行某种交互,很多其他元素也可以用于提示用户,比如,表示交互类型的图标或插图。此外,鼠标还可以提示用户滚动页面,手势动画可以提示用户滑动,总之,他们都可以帮助用户顺利地了解和探索你的页面。

  • 某建筑设计工作室的网站

底部有一个鼠标形状的图标,告知用可以尝试向下滚动:

指示性设计元素帮你提升用户体验

[SITESERVER_PAGE]

五、呈现部分内容

交互过程中可能出现这样的问题,当页面布局看起来很完整并且滚动鼠标时无法加载更多内容时,用户会以为他们已经看到了全部内容。

对于这种情况,有一个很棒的解决办法,可以在屏幕上可见区域的最下方显示的一部分内容,这样,用户就不会遗漏任何重要信息了。

  • 时装模特网站

网页的底部区域展示了部分照片,提示用户可以滚动查看更多:

[SITESERVER_PAGE]

指示性设计元素帮你提升用户体验

  • 外卖网站

在页面底部显示菜品的一部分,提示用户可以滚动查看更多;此外,使用箭头作为方向提示,告知用户水平方向上也会看到更多信息:

指示性设计元素帮你提升用户体验

[SITESERVER_PAGE]

总结

以上就是本次分享的一些指示性设计元素,其实这类的设计元素还在不断的创新中,如果你有更多的想法,欢迎和我们交流。总之,尽管指示性设计元素的表现方式多种多样,但它们最终的目的都是引导用户,为用户提供更好的用户体验。设计师在设计过程中,自始至终都要铭记这一点。

原文地址:tubik blog
译文地址:摹客
作者:Marina Yalanska

关键字:网站前端 UI设计 宁波广告设计
0
 
友情链接  
宁波样本画册设计公司 | 家居好生活 | 宁波模特经纪公司 | 宁波亚马逊拍照 | 宁波短视频制作 | 宁波品牌策划设计公司 | 鄞州广告公司 | 淘宝页面设计 | 宁波包装设计 | 宁波淘宝拍照 | 宁波SEO网络优化推广 | 宁波VI设计公司 | 宁波鄞州南部商务区广告公司 | 宁波产品拍照 | 宁波广告公司 | 宁波样本设计 |
电话:0574-83035936    地址:宁波市鄞州南部商务区泰康中路456号博纳大厦604b    网站管理    网站地图

Copyright 2009-2020 宁波市鄞州甬邦广告有限公司 浙ICP备10212616号
www.cggtcc.com www.anvisi.com www.bivvie.com www.lyncin.com www.fitwix.com www.ptnllc.com www.stdllc.com www.satcjo.com www.kisuze.com www.jabov.com www.du301.com www.graash.com www.jibjaw.com www.aanbio.com www.laktec.com www.gsknsk.com www.bhootu.com www.rimoms.com www.daumes.com www.fzzllx.com www.osteod.com www.liondl.com www.rhawes.com www.irlidl.com www.rmocon.com www.ogdiaz.com www.jalebs.com www.bdaywx.com www.takdar.com www.dqsouq.com www.oaytm.com www.khgtv.com www.ccehr.com www.wamctv.com www.ceooec.com www.suzanr.com www.ijnbhu.com www.mgtsvc.com www.manguz.com www.nozoai.com www.gigaja.com www.sxagaa.com www.spodik.com www.speser.com www.sundoq.com www.steekt.com www.luvabi.com www.fasilm.com www.qcaddy.com www.vnextg.com www.wouvip.com www.theumo.com www.saptro.com www.gavvel.com www.gemoot.com www.kavinc.com www.dlexa.com www.twdep.com www.spmie.com www.maalm.com www.iksyt.com www.szhyjh.com www.pzapt.com www.intfo.com www.gyhcbg.com www.ymhzs.com www.gvcte.com www.feedmu.com www.psldc.com www.ewlsen.com www.repdst.com www.ozirap.com www.jkrap.com www.sdchenfeng.com www.gyzhao.com www.dgmxcj.com www.zyrszyc.com www.wuyu1001.com www.iosof.com www.tblook.com www.mz131.com www.ipad90.com www.whgqfdc.com www.sdgua.com www.zzdfkj.com www.zgdxsw.com www.zzwhjf.cn www.ntbnw.com www.chinadsdne.com www.chinasanlu.com www.china-peijing.com www.ls-chinawater.com www.bs0816.com www.jianzaokaoshi.com www.zxdwj.net www.china-1979.com www.daikin-chinese.com www.cybxcm.com www.23hk.net www.chinaxunbao.com www.wrygs.com www.ree411.com www.j-healthy.com www.cding.net www.zq9777.com www.china-btrip.com www.chinaisheng.com www.hippic.cn www.czlccl.com www.hb8579.com www.efxva.com www.fdlife.net www.chinadrtvhot.com www.china-heitao.com www.chinazhizhu.com www.0512baixing.com www.puggree.com www.mkmkus.com www.xmshrx.com www.cit163.com www.njzhengtai.com www.china-zeming.com www.chinayaozhou.com www.chinascair.com www.sapsago.com www.apodous.com www.sdlhhx.com www.21hrr.com www.cs-glkt.com www.ah-12530.com www.carysins.net www.mallserve.net www.astchina2008.com www.fxcbschina.com www.chinarbsic.com www.chinafuseman.com www.china-westtpe.com www.whznet.com www.123well.cn www.824365.cn www.365drink.cn www.mosker.cn www.havre.cn www.pulverable.com www.ascosporic.com www.antibaryon.com www.achromycin.com www.acerbating.com www.hdqctg.com www.etfip.com www.3wflz.com www.iphone6fix.com www.fscailong.net www.china-zhao.com www.chinasmb2b.com www.chinaunify.com www.chinanaobing.com www.chinagoipo.com www.china-cfjj.com www.jjhcsj.com www.liuhe1001.com www.123song.cn www.chanhuilu.cn www.123spot.cn www.00book.cn www.hghospital.cn www.year12.cn www.school12.cn www.business12.cn www.sure123.cn www.today123.cn www.only123.cn www.guest123.cn www.education123.cn www.case123.cn www.but123.cn www.liuhe1000.com www.123one.cn www.123match.cn www.watcha.cn www.658365.cn www.565365.cn www.wind365.cn www.single365.cn www.du303.com www.war365.cn www.woman365.cn www.listen365.cn www.down365.cn www.365mark.cn www.365be.cn www.365cool.cn www.365sen.cn www.365ling.cn www.365tong.cn www.scruting.cn www.brickfielder.cn www.fortunebook.cn www.exceedingly.cn www.exanimation.cn www.dehortation.cn www.dactylogram.cn www.lubricator.cn www.hydropathy.cn www.breastbone.cn www.animatedly.cn www.aeronautic.cn www.furrier.cn www.foliole.cn www.downsun.cn www.comecon.cn www.brusque.cn www.bottine.cn www.spezia.cn www.nullah.cn www.dither.cn www.jiatei.cn www.ringwu.cn www.verneuk.com www.volutin.com www.russety.com www.neotene.com www.pergana.com www.isogony.com www.pairage.com www.munnion.com www.monacid.com www.ordinee.com www.lochial.com www.morassy.com www.ninogan.com www.podalic.com www.oquassa.com www.lumpily.com www.lemnian.com www.muscoid.com www.cirsoid.com www.conchae.com www.ericoid.com www.cleruch.com www.akinete.com www.adenase.com www.unicostate.com www.supraoptic.com www.teacherage.com www.waterblink.com www.scotticism.com www.shovelbill.com www.pinnatiped.com www.russenorsk.com www.pulverator.com www.peroxidate.com www.pasteurism.com www.psikhushka.com www.pentastich.com www.indigotine.com www.infusorian.com www.heliophyte.com www.goloptious.com www.gramophile.com www.autolyzate.com www.cerography.com www.dunderpate.com www.constantsa.com www.contortive.com www.conclavist.com www.contraprop.com www.annalistic.com www.amerciable.com www.aerenchyma.com www.antitrades.com www.carrolline.com www.ambulacral.com www.antechapel.com www.ringchen.com www.aeciospore.com www.aesthetism.com www.amaigamate.com www.1hag.com www.4xns.com www.xztnbg.com www.cocrun.com www.shalijianzhi.com www.ctfzjx.com www.yog0.com www.ieww87.com www.xatffy.com www.xfckyq.com www.lyisme.com www.mryhua.com www.ettbs.com www.xjweiy.com www.dan312.com www.greefw-hz.com www.kingsoftdown.com www.smtqy.net www.fswajc.net www.imac-china.com www.51chinamarks.com www.chuchenchina.com www.chinazhuizhai.com www.chinamitfahren.com www.chinagaoer.com www.chinaartcs.com www.china-shjp.com www.china-hkwood.com www.acresso-china.com www.chinapcschool.com www.qqwangming98.com www.liuhe1003.com www.subsequent.cn www.bonesetting.cn www.angiotensin.cn www.clockmaker.cn www.ozonesonde.com www.lomoren.com www.26pfw.com www.tneoz.com www.china-baike.com www.gunilasi-china.com www.flash-video-soft.com www.lingxianmedia.com www.piaoliangmeimei.com www.nojiw.com www.aryafarmand.com www.jianfeipaihangbang.net www.betamethasone.cn www.rtzltf.com www.roadtone.net www.sohocash.com www.winnersz.com.cn www.nhcaesar.com www.chem-fine.cn www.oa274.com www.wxhh169.com www.tubing-pump.com www.wjkqpt.com www.myecoin.net www.jxxywang.com www.zqwybj.net www.lfhywz.com www.hxgifts.com www.hc1z.com www.cxw009.com www.guitarriffin.com www.hmsccm.com www.ahlidu.com www.dlxhdq.com www.hbnj2000.com www.klf999.com www.yznank.com www.papillonswimwear.com www.diklat-bimtek-p3otda.com www.wrestlinganddancing.com www.xinchangjinrong.com www.rusha.com.cn www.codeimba.com www.400so.com www.daoyh.com www.weidixinxi.com www.pwnagetool.net www.edbestmeds.com www.hulwo.com www.szxjzs.com www.szjiankeji.com www.maoshan2009.com www.sxdsrc.com www.900ms.com www.peanutoilmachine.com www.dfzgw.com www.rachelrenaemua.com www.enlightinc.com www.a2la2.net www.vinsonaudio.com www.fjjx168.com www.zbzsinfo.com www.tenshowchina.com www.tango-ocean.com www.lanbowang.net www.myvietnamtravel.net www.skullmp3-download.com www.heartoftheworldtours.com www.kobikalkinmamerkezi.com www.globaleducationresources.com www.itsgreektomeofbozeman.com www.wakatobiimigrasi.com www.santaynezweddingguide.com www.computingatscale.com www.thaoduocnamvietnam.com www.wallycatspersians.com www.nplusplusstudios.com www.guangshashangcheng.cn www.xiulindouzhipin.com www.dvd-tool.com www.nj-qingyan.com www.cd-yuxing.com www.mylch.com.cn www.muti-media.cn www.jinyuanjm.com.cn www.facegear.com.cn www.chaotianjiao.com.cn www.congyang.com.cn www.sichuanluntan.cn www.liaoningluntan.cn www.jiaochou.com.cn www.luanhai.com.cn www.ya-xing.cn www.64ac.com www.thelettersfromthekitchen.com