header_v1.7.40

双11购物APP都有什么布局?

14天前发布

原创文章 / UI / 观点
licky_雅 原创,如需商业用途或转载请与licky_雅联系,谢谢配合。

UI与交互设计的关系,利用交互原型的形式分析双11购物APP的布局


在站酷发表的第一篇关于设计的文章,希望对想做UI设计或入门不久的童鞋们有帮助,也希望同行可以多交流共同进步~~



近年来,UI设计的需求增加,也越来越多人进入这个行业,竞争越来越大,UI设计入门门槛低?明明这样比较好看,但是为什么就是不通过总改稿?让我们重新来认识UI设计,交互设计与UI设计的关系,以及双11活动中APP里面会运用到哪些产品展示模块,这些模块为什么适合用在这些场景。


| 什么是UI设计


随着互联网的快速发展,现在有很多提供给UI设计师的平台,很多刚入门或入门不久的UI设计师,会去模仿一些视觉效果很好,但实际的APP上面却很少看到那些布局的界面呢?


我查了下百度百科定义,UI可以让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。应用的领域有软件,游戏开发,网页设计制作,主要工具有Ps、Ai、Axure、Ae、Html、css等...以上,其实我们不难发现,UI设计师需要懂产品、懂交互、擅长视觉设计和了解代码



看到这,不管你方不方,反正我是很方,唯有努力学习,才能脱颖而出。


二 | 与交互设计的关系


为什么UI设计师要懂交互呢?广义的UI设计包含交互和界面视觉两个部分,简单来说交互设计:让产品更加地可用和易用,UI设计是让产品美观、有自己的风格、细节,以至更加好用。

那交互设计做些什么呢?需求分析、用研报告、竞品分析、流程图、交互原型图、演示文稿、交互规范、可用性测试报告。看起来就很厉害的样子,可是我们每天上班、加班,没有那么多时间学习或了解。



不了解交互的我们会遇到什么问题呢?

1、产品给到文档时,不理解具体需求或者跟产品沟通很难达到一致;

2、设计界面的时候,盲目追求美观,忽略了可用性和用户体验,造成产品上线后不好用;

3、造成开发退稿改稿,工作不开心且效率低下。


我们了解交互设计有什么好处?

1、制作低保真交互原型稿,可以减少跟项目上游的沟通成本;

2、由于制作高保真设计稿的时间相对比较长,故低保真交互原型可以快速地让领导或者需求方看到产品是否可用,进而能快速地进行修改和定稿,从而提升工作效率;

3、下游开发的技术,也可以根据交互稿和规范进行开发,提高开发效率。


以上,交互设计是整个项目开发流程是否能高质量高效率完成的前提条件。而UI设计的最终目的是使产品好看又好用。


三 | 双11竞品界面布局解析


为什么我们要做竞品分析?

BAT等大公司有专业的交互设计师,已经经过需求分析、用户调研、产出交互规范、可用性测试等等一系列专业的工作;也有很多公司是没有专业的交互设计师的,上游只有产品,这个时候,我们根据公司的具体情况进行需求分析,用研报告、交互规范、可用性测试等等都不太现实,毕竟时间精力专业有限,那么竞品分析对UI设计师来说,挺重要且是可以做到的,为什么是这样的布局?为什么按钮放在这里等等。


设计来源于生活,比如我们去商场,是不是有楼层划分,哪些店铺打折,有多少折扣和优惠,网上商城也是类似的,只是他的展示和可能性更多。最近研究了今年几个比较大的商城APP双11的UI界面,总结了一些东西,通过交互原型的方式分享如下:


undefined

01~引导页,这个是当我们新一次打开APP的时候,会弹出一个页面有产品的宣传,可以点击购买按钮进入,或者选择点击跳过直接浏览首页。这个位置好比商场门口大大的广告海报,我还没进入商场就能先看到这个产品的广告了,是经常用来推广活动的页面,能让用户第一时间就看到。页面设计包含的元素有:logo、跳过按钮、产品展示、购买或进入按钮




02~APP商城首页的双11入口及布局,总结出4种首页的布局呈现如下:   

  

   

   


这4种布局都有共同特点

1)在第一屏就展示出来,且摆放的位置都是比较靠上,颜色画面凸显的区域,会让用户的视觉一下子被这些吸引到;

2)随着页面的滑动,在搜索栏部分会悬浮在页面顶部,在这里放双11的入口,用户可以不受页面长度影响,快速地点击进入双11活动页面。

3)双11模块颜色优先级是最高的,打开这个页面首先看到这个地方;且动态吸睛,有活动氛围,颜色一般喜庆活泼,又突出。


03~弹窗:强制用户关注活动,并提供入口让用户选择点击查看活动页面,此时一定要有关闭按钮(位置可以右上角或者内容区下方),让用户可以选择不看,就好比顾客在商场逛着,突然有个推销员过来推销东西,你可以选择拒绝推销,而不是强买强卖。这也是活动常见的宣传手段,可能有时候会觉得很烦,但确实起到了一定的宣传作用。页面设计包含元素:黑色透明背景、展示内容、购买或进入按钮、关闭按钮


所有促销活动的目的就是卖产品,双11购物节的重头戏当然是产品的展示,虽然手机屏幕不大,但是各大购物APP都是想尽办法,合理且很好地展示自家或商家的产品,让大家剁手买买买!!!!!下面对4个常用的活动页面布局进行分析。


01~横向菜单栏切换,如下图:

    

      


这三种布局的特点:

1)当页面滑动超过一屏时,置顶搜索的模块,可以让用户随时进行搜索,不受页面长度的影响;

2)适用于有多个分类产品数量多的模块

(需要注意的是:分类如超过一行时,最后一个显示要做切断,表示下面还有其他分类。)

3)分类的文字不宜太多,每个分类的字数尽量相同;选中有选中状态,点击后下面的内容也相应切换,可以用手左右滑动菜单栏查看分类;

4)展示产品的图文结构,可以根据需求一行最多显示4个产品,具体情况具体分析,大致就是这几个元素,整个区域都要是可以点击的。

根据上面原型图的对比可以看出:一行显示的图文越多,那么显示的图片越小,可看到的字数越少,单个页面可以看到的商品数量越多;相反,一行显示的图文越少,那么显示的图片越大,可看到的字数越多,单个页面可以看到的商品数量越少


02~竖向菜单栏切换,如下图:


  


这种布局的特点:

1)置顶搜索模块,可以让用户随时进行搜索,不受页面长度的影响;

2)适用于有多个分类,但产品展示个数不一致,有多有少的情况;

3)菜单的文字不宜太多,每个菜单的字数应相同;打开默认选中第一个;可以上下滑动;选中有选中状态,菜单选中后,切换到的右边内容区域的最顶部。

需要注意的是:当选中最后一个分类,右边内容的最底部要与展示区域最底端对齐显示,这样避免页面有大面积留白。如下图:



到这里,我们可能会有一个疑问,为什么这种情况不可以用横向菜单栏?看看下图:



这样布局,内容区产品展示太少,下面一大片空白,就好像你在商场看到一排货架上,只有几个商品,太浪费空间了;再说有强迫的UI设计师是怎么都看不过去的。


03~Tab键切换,如下图

这种布局的特点:

1)适合分类不宜太多,可以让用户一眼就看完共有几组分类;

2)适合内容长短不一,展示区域不能过长;

3)适合时间轴类型的排放,让用户一屏就能直观的看到哪个时间节点有什么商品折扣等等;

4)展示内容区域的样式可以根据需求自定义。

需要注意的是:样式二还有底部悬浮按钮,不管用户在该页面浏览到哪,都能看到这个按钮和点击;

两组按钮状态是有区别的,一个按钮是比较突出,引导用户进行点击,另一个按钮则是条件判断或者让用户可以选择,比较佛系的,故需要有颜色或者设计上的差异


04~单个菜单滑动模块,如下图:



这种布局的特点:

1)适合专题活动页面较长,产品要展示的模块适中,且展示的产品数量刚好满足左右各滑动一次;(当然你可以选择多滑动几次,但切忌滑动太多次)

2)展示内容区域的样式可以根据需求自定义,产品展示最好一行3个多,不超过3行,避免每个产品展示区域太小,不够展示产品内容,且手指不好点击。


以上的所有布局,不管是卖点还是优惠力度,亦或是价格,都必须是突出的,就好比你在逛商场,大部分人往往是被大大的打折,或者低价格所诱惑。


双11购物APP的界面布局分享完了,是不是觉得对怎么布局一下子清晰了很多?当然还有很多常规的模块,也可以试试这样分析,而且这些模块不一定局限在双11活动,可以根据需求和场景来进行应用。最后,如果你觉得这篇文章对你有帮助,就点个赞吧!


2

    文章信息

    • 文章标签

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功