UI视觉对App用户体验的导向性作用

原创文章 分类: 行业资讯 版权:
1217 6 5 2
2018-06-12
7.7
编辑推荐

“好用第一,好看第二”,UI视觉是对用户体验起到导向性的作用,而不是决定性的作用。


UI视觉对App用户体验的导向性作用

作者:larry

摘要:“简约至上,别让我思考”是用户对app的习惯性体验,因为思考需要时间,需要选择,从而引发用户反复比对。互联网时代,用户获得的信息量成幂级数增加,因此会产生焦虑感,不愿意花太多时间去学习一个app,“简单易用”才“值得信赖”,用户体验复杂的app产品已不可持续;用户对app的体验,首先是以UI视觉化去判断好不好看,但是正真决定用户是否喜欢一个app,是这个app是否好用起决定性因素,所以说:“好用第一,好看第二”,UI视觉是对用户体验起到导向性的作用,而不是决定性的作用。

关键词:UI视觉  用户体验   导向性

 

        UI视觉对app用户体验起到关键导向性作用,引导用户线性体验流程,提升app的可用性操作。

        我们很少听到用户说这个app设计得好不好看,更多的是听到这个app好不好用、我喜欢这款app之类的话;其实用户关注一款app时,会判断它是否是我需要的类型,是消费类还是内容类的?是娱乐类的还是工具类的?我们以消费类的大润发优鲜app为例,用户从应用市场推广或别人推荐下载app,第一次起动,会有一个起动页(下图一)和欢迎页(下图二、三、四),这些页面是纯视觉化的,向用户传达这个app的一些品牌、广告、功能信息。

 Image title

     

Image title

        上图红色虚线部分的“跳过”是可操作的交互按钮,这个UI效果是带透明度的,大多用户在浏览这些页面时,会潜意识的选择跳过,弱化“跳过”按钮,可以让用户选择滑动欢迎页,浏览其内容,红框内的3个小圆点提示当前页面,在这里,UI效果对用户体验起到的导向性作用是让用户关注欢迎页。


         用户进入app首页时,app会根据用户所在位置进行定位,如果用户所在地区不在app服务范围内,app会提示不在当前服务区,这时需要用户手动定位(如下图),用户会选择是重新定位还是放弃使用app。Image title

 

 如果用户所在位置为app服务区,用户就可以正常浏览app的内容了(如下图)。

 

 Image title

 

        App广告区域会有多个轮播的banner, UI会规定banner的大小,图文版式规范(字体大小、字体颜色、图片位置),使banner的视觉风格一致性,轮播点提示当前状态的banner。

        广告区域的UI视觉规范对用户体验起到的导向性作用是统一视觉规范,增加视觉舒适感。

        用户喜欢简单易用,值得信赖、适应性强的产品,app有很多模块和功能,如果都一一罗列在首页,那么首页的内容就会很多,会造成用户选择困难的结果,所以正确的做法是要用隐藏的办法,把一些模块移到别的页面,首页保留icon链接入口(如下图),这样做UI视觉起到的导向性作用是让用户分流,选择点击自己关注的版块进行浏览。

Image title


下拉loading动画(下图),起到下拉更新页面的导向行作用。

Image title



Image title

        红色箭头处搜索框,透明的视觉设计形式、点击会跳转到搜索页,放大镜和文字提示起到提示可以关键字搜索的导向性作用。


        app首页内容一般控制在8屏左右,当用户滑动屏幕时,越往下的内容关注度和点击率越低,设计简单的体验意味着要追求极端的目标。如何在首页留住用户,是一个很复杂的课题,主要分为从内容运营或根据用户浏览习惯大数据推荐两大模式。首页的UI视觉决定用户停留关注的时间,如果UI视觉很凌乱,用户就会产生焦虑感,到处都是让人分心的东西,用户就会关掉app。版块清晰、UI视觉简洁、产品图片精美、文案简练明了是app首页聚焦用户的关键要素,UI视觉要控制好版块的衔接、图片区域大小比例、间隔留白、线条划分、文字大小和颜色、icon样式。App前三屏是用户关注度最高的,把高曝光的产品尽量安排在前三屏。大润发优鲜app前三屏的内容有“轮播banner”、“类目icon”、“尖货地带”、“店长优选”、“主题推选”

Image title

第一屏

       “尖货地带”是销售量较大的商品,这里的产品是通过大数据推荐的,“尖货地带”底图是突出版块划分的视觉效果,右边的“更多”是为了查看更多商品推荐而设置,起到跳转的导向性作用。


Image title

第二屏

       “店长甄选”是经过运营精选的产品,以轮播的形式展示,内容以店长话诉推荐体现,投影、遮罩效果和轮播点的应用,起到向左滑动可浏览更多推选内容, “店长甄选”的“更多”按钮是起到跳转浏览提示的导向性作用。

    “优鲜厨房”、“大润发秘制”、“追洋货”、“夏天来啦”是主题推荐,淡雅底色的应用,起到强调主题的导向性作用。


Image title

第三屏


       “品类推荐”是经过精心挑选的产品,有“时令水果”、“鲜嫩蔬菜”、“低温乳品”、“肉禽蛋类”、“水产海鲜”、“休闲零食”、“酒水饮料”、“粮油干货”、“个人洗护”、“奶粉辅食”、“精致烘焙”、  “家清纸品”模块,每个模块的布局是类别banner+6小图,类别区块用和类别属性接近的色彩做底色,这样设计可以起到符合色彩心理学的导向性作用。


        对于新用户来说,停留在首页的浏览时间相对来说比老用户长,这是因为新用户会花较多的时间去了解app的版块内容和活动信息,以“逛”的形式居多,老用户以有目的性购物的居多。对于一个app来说,首页的UI视觉效果是至关重要的,决定app的风格走向,给用户的导向性作用是很显著的;要想app视觉效果统一,需要制定UI规范,UI视觉、UI规范相辅相成,UI规范控制整个app元素的统一性,UI视觉控制app的风格统一性。UI规范对app色彩、文字、icon、控件、图文组合、卡片、弹窗都有严格的要求,UI设计师在设计app UI时,严格遵守UI规范,才能保证app风格的一致性,才能控制好UI视觉对App用户体验的导向性作用。

  

        对于电商来说,首页的设计基本原则是能够增加销售机会,把产品卖出去,大润发优鲜的app是针对门店3公里范围内的消费群体,针对性较强,以生鲜、烘焙吸引流量,刺激其它产品销售,UI设计师对首页的风格设计要让3公里内的消费群体产生归属感,体现“掌上大润发,1小时送到家”的核心理念,UI视觉要通过大块的留白、匠气的字体、纤细的线条等视觉手段,营造出相应的设计氛围和格调。

       

        分类页(下图分类页)起到筛选搜索的导向性作用,但这里的搜索与首页的搜索框存在区别,因为分类页的搜索带有不确定性,但却是让用户直接进入商品页面的一种较好的交互形式,通过一级文字类目、二级图文结合类目的设计形式组合,让分类页更直观、让用户目的性搜索指向性更强,这样设计起到引导用户发生购买行为的导向性作用。

Image title



Image title

二级分类列表底部“上拉切换至下一分类”的交互,起到预示的导向性作用。


        购物车(下图购物车)当用户浏览app页面找到想买的商品后,并不是买一个支付一个,而是把想买的商品一次性集中购买,这符合用户去超市购物去到收银台统一支付的心理,另外用户看上某些商品,不一定马上选择支付,或者过了些时间,又不想购买,这时购物车也起到不断提醒用户要付款的导向性作用。


Image title


        模块化设计是app UI设计的常用的设计形式,由于app的设计界面要适配各种手机终端屏幕,所以我们不需要直接定义每个模块的具体宽度,因为这个宽度会被拉伸,高度也随之等比拉伸,我们一般按照比例来定义每个模块的宽度,按照屏幕宽度分成一个个豆腐块,可按1/5、1/4、1/3、1/2、1/1的比例划分,这样设计的好处是可以形成统一规格的模块化管理,页面不会过于凌乱,对用户起到模块清晰、信息规范标准化的视觉导向性作用。

Image title

Image title





      由此,我们得出结论,UI视觉对app用户体验具有提示用户、引导用户操作app的导向性作用,同时以视觉体验向用户传达app的格调、亲和力,增加用户对app的粘性、提升用户选购产品的意向。


参考文献:

01、Giles Colborne(著)  李松峰 秦绪文(译)

书名:简约至上—交互式设计四策略    

出版社:人民邮电出版社


02、Steve Krug(著)  蒋芳(译)

书名:点石成金  

出版社:机械工业出版社


YFUX

有范UED,归零设计思维模式

1粉丝/19关注

YFUX

YFUX

有范UED,归零设计思维模式

扫描二维码
去手机端查看海报

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN