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

作者：larry

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

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

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

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

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

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

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

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

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

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

下拉loading动画（下图），起到下拉更新页面的导向行作用。

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

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

第一屏

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

第二屏

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

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

第三屏

       “品类推荐”是经过精心挑选的产品，有“时令水果”、“鲜嫩蔬菜”、“低温乳品”、“肉禽蛋类”、“水产海鲜”、“休闲零食”、“酒水饮料”、“粮油干货”、“个人洗护”、“奶粉辅食”、“精致烘焙”、  “家清纸品”模块，每个模块的布局是类别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视觉要通过大块的留白、匠气的字体、纤细的线条等视觉手段，营造出相应的设计氛围和格调。

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

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

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

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

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

参考文献：

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

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

出版社：人民邮电出版社

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

书名：点石成金  

出版社：机械工业出版社