广州总部电话:020-85564311
广州总部电话:020-85564311

广州网站建设-小程序商城开发-广州小程序开发-企业微信开发公司-网站建设高端品牌-优网科技

19年
互联网应用服务商
请输入搜索关键词
小米商城产品站UI改版,高端化升级【高级篇】
发布日期:2024-10-17 10:55:34
浏览次数:438
来源:交互设计学堂

前言 


电商产品最重要的两个板块,一是首页,负责流量分发;二是产品站,也叫产品详情页,负责销售转化;这两个板块基本串联着整个产品,设计的好坏,直接影响购物体验和转化。


前阵子跟大家分享了小米商城首页设计改版,这次分享产品站,产品站的改版过程持续了多半年,踩了很多坑,总结了很多有价值的经验,接下来跟大家一并分享。


分享的内容分为四个方面:用户篇-需求篇-竞品篇-改版篇,每个环节循序渐进,层层环扣,本文尽可能把改版的底层逻辑说明白,讲透彻。


一、用户篇-购买情绪 


人是情绪动物,当用户购买商品时,无论是在线下还是在线上,都会有不一样的情绪行为,比如有时会特别爽快下单,有时又会犹犹豫豫没有购买冲动,有时还会精挑细选花费很长时间最后决定先加入购物车,这些都是购买情绪。


影响购买情绪的因素非常之多,比如用户需求的强弱、对品牌的认可度、产品的功能、服务感受、价值感、信任感、安全感等等。在销售过程中,若能够掌控用户购买情绪,那就会大大增加用户下单的意愿。


购买情绪大体可分为三大类,果断型、感性型、理性型,三者因为购买情绪的不同,在购买过程中,关注点和心态也会有所不一样,所以“对症下药”才能更好的促销售。


1.1 果断购买情绪


一般需求明确且强烈,亦是对品牌认可,对产品信任,购买过程中,看重关键要素需求,以目标为导向。


这类用户群体最具价值,是平台的宝贵财富,他们往往对品牌认可度高,对平台信任,粘性高,购买行为大多是果断下单,同时多数人还愿意将品牌/产品推荐给他人。


场景再现


用户:期待的小米14终于问世了,参数真的很高能,拍照无敌,必须整一个;想买个扫地机看了好几个,还是买小米的吧,毕竟大品牌服务好;必须官方平台购买,没优惠无所谓,正品保证,物流快,服务可靠。


1.2 感性购买情绪


感性购买情绪也容易果断下单,但下单的动机与果断情绪下单的动机不同,“果断”是因为对品牌,对平台信任,需求也强烈;“感性”则可能是因,产品外观好看,或是有朋友推荐,再或是联想到了产品的某个使用场景,从而触发了感性情绪而下单。


打动感性情绪用户,从UI设计上来讲,要保证高质量且好看的产品图,全方位展示产品的细节、产品的使用场景图、感性的文案、规范的页面设计等等。


当然这些只是能够助力用户下单的因素,对于品牌电商来说,让用户爱上品牌才是真正的价值,所以平台还要不断传递品牌价值和产品优势,提升产品力,同时给到用户真诚贴心的服务,长此以往,用户就会对品牌产生潜移默化的认可。


场景再现


用户:哇唔,这款手表也太好看了吧,还是(XXX明星)同款,跟我那件衣服也很搭,买买买;这包在模特身上气质绝佳,放我身上肯定也不错,买回来试试。


1.3 理性购买情绪


一般来说,用户对于没用过的品牌,不了解的产品,不熟悉的购物平台,通常是理性情绪,这是很自然的心理现象。


也有很多人,在消费上一贯是理性情绪,正所谓钱要花在刀刃上,要找到最合适的产品,认同的价格,才会入手。


理性情绪用户关注点一般有两个方向:一个是关注产品的性价比、客观评价、售后服务、产品功能细节等;另一个是关注自我价值认同,这就需要让用户感受到信任感、价值感、安全感等。


所以在产品设计上,能够快速有效让用户对比商品,另外评价体系在设计和运营上做好体验,同时UI设计上还要巧用品牌元素,表达品牌感。


对于品牌商城,还要强调官方商城,服务至上等运营理念等,这些都是助力理性情绪用户下单的条件。


场景再现


用户:嗯这个产品感觉不错,先去看看评价,评价有人说不好啊,再看看吧;这两个款都还行,纠结,先都加入购物车,再看看有没有更好的;不了解产品,不知道买哪个,找朋友推荐一下吧;这服务态度太差了,以后都不会买这个品牌了。


小结


每个人都会存在这三种购买情绪,所以在设计上,应该是综合的,即要对“果断”亲和、又要对“感性”友好、还要对“理性”有效,好的电商平台基本都做到了这三点。


二、需求篇-设计方向 


产品站改版属于重点的大项目,这样级别的项目,难度非常之大,首先要明确改版方向,从产品、交互、设计角度总结问题,其次要做用户调研,过往数据研究并具体分析,竞品分析等等。


关于设计方向和问题总结,在部门大会时,老板提了很多,拿到资料做了一下梳理,下图所示。



这些内容是最具价值的需求和问题总结,“需求”是公司的发展战略,“问题”是近几年的用户反馈积累,所以这次产品站的改版目标非常明确。


2.1 问题与需求总结


通过对需求和问题的总结,再结合各种调研和产品设计的思考,我们总结了六点改版的方向。


1、产品定位不清晰


有官网之名,无官网之魂,购物体验差。


2、产品站信息乱,不易理解


无法捕捉产品卖点浏览效率低,不容易高效对比同类产品。


3、线上线下融合


同价同促,通过门店自提,门店闪送,增加门店订单量。


4、官网形象高端化


提升用户体验,服务体验更贴心。


5、做好新品及自营大促


持续建立官网认知,将官网价值内核转化为用户语言,通过关键节点传递,建立官网心智。


6、承载手机 x 汽车


一体化销售服务。


结合这六点总结,再依据品牌电商产品的定位,公司战略,分析现有问题,思考设计解决方案,下面我们来研究几个问题。


第一个提到了“产品定位不清晰”,先去找找原因,看下图是能否快速感知到,哪个是小米商城的产品站,我们做了一些调研,多数人很难分的清楚,甚至有相当一部分人会误认为这都是淘宝。



在产品站的页面中,最具有产品辨识度的底部按钮,两款产品设计形式与颜色几乎一摸一样,从品牌势能上来看,淘宝强于品牌电商的小米商城,所以把小米商城误以为是淘宝很正常。


当然产品定位不清晰,不能只从设计上去看,比如产品逻辑,运营策略都能体现一个产品的定位,甚至客服的话术也是如此,比如小米商城的客服也跟用户说“亲”,那就很难形成自我品牌定位的认知。


对于品牌电商来说,要有自我的品牌调性,这不仅是用户认识你的基础,更是品牌发挥优势的重要能力。


很多设计师认为,借鉴主流成熟产品的设计不容易出错,有一定的道理,但是这不应该是你思考的主线,主线是先找准自家产品的定位,其次才是如何结合主流产品优点,打造自己的产品。


第二个问题说到,“产品站信息乱,不易理解,浏览效率低,不容易高效对比同类产品”,原因是头图信息太多,标题下方也是文字堆积,想给用户的信息太多,反而导致用户根本不会去读这些信息,所以提炼信息和重新排版设计迫在眉睫。


其中提到的“不容易高效对比同类产品”原因也很显然,“机型对比”的设计形式,像不可点击的标签,从点击数据上来看,确实极低,在用户调研中,也有很大一部分人认为不可点击。



一个信息冗余的页面,没有品牌元素信息、也没有表达自我的设计语言,注定会大大影响用户的购物体验,甚至还会拉低用户对品牌的好感与信任。


以上是简单的做了几个问题分析,分析问题,研究需求,是为了思考接下来的设计语言的制定。


2.2 设计语言/原则


设计语言是“塑造自我”的重要表达方式,一个优秀的产品一定是有自身的设计语言,所以我们要打造一套符合小米商城定位的设计语言。


根据小米商城品牌电商的产品定位,公司高端化战略,再经过一系列的研究和探索,最终总结制定4条产品设计语言/原则。



1、回归产品本身


聚焦产品价值为核心,回归本真主打产品秀,营销信息合理展示。


2、克制的


克制色彩营销的导向, 复杂的设计,助力品牌高端化。


3、极致的


以用户语言,打造产品细节,打磨用户体验,做好服务。


4、有品牌感知的


提取品牌DNA,建立官网心智,打造官方商城优势。


有了设计语言就有了设计风格指导,这四条设计语言不仅仅是支持产品站的设计,而是贯通指导整个产品的设计。


三、竞品篇-认识自己 


在设计改版前,主线是研究自家的产品,次线是对竞品有充分的了解,知己知彼,才能更好进行自己的设计。


3.1 产品定位


通过对市面上主流电商产品设计的研究,能够分析出,综合类电商与品牌电商的产品定位差异。



以上是综合类电商,即全品类,此类平台的特征是追求性价比,满足消费者物质层面需求,购买动机是功能、卖点、价值等利益点,UI设计需要注重氛围渲染,刺激消费欲望。


3.2 认识自己-模块分析


认识自己远比研究竞品更重要(强东哥说过这话),我个人非常认同。接下来,我们全方位的拆解小米商城产品站,同时进行模块化分析。


首先分析每个模块的历史数据,是否符合预期,这里的预期指的是某个入口的点击率是否正常,如果异常思考如何改版。


然后分析每个模块的功能作用,是否可以改进,满足新需求,助力新业务,从设计上来看是否合理美观,最后再结合新的设计语言进行改版。



产品站的信息传递逻辑是循序渐进,首先让用户快速获取商品信息,产生信任情绪,认可品牌/商品价值,从而产生下单行为。


产品站的整体设计,如若让三种情绪用户(果断型、感性型、理性型)在购物过程中,通过不同的信息,促进下单概率,并非容易,所以页面的信息排布的合理性尤为重要,接下来开始改版。


四、改版篇-案例解析 


在产品站改版的半年多时间里,中大概出了7-8版,一直在不断的优化调整,下面以最终稿来讲解。



上图是新旧版本的首屏对比,设计风格上有重大变化,变得更轻量,日常样式优惠政策都聚合在一个入口中,让日常的营销感弱下来。


首屏应该,也是最重要的,能让用户快速了解产品,所以首屏应更多展示产品外观、配置、功能等信息。




头图改版



头图在非大促期间,不做任何营销信息的设计,保持干净整洁的风格,这能满足追求品质感用户的心理期望,同时也是满足感性购买情绪用户的因素之一。


整洁有品质设计,能提升产品在用户心中的溢价空间,简单说就是用户觉得很值;杂乱的设计,优惠信息冗余,用户没有安全感,不能直接感受到,能不能享受到最优惠的政策。


新版的设计理念,结合设计语言“回归产品本身”,打造产品秀,让用户去感受产品本身的价值,对于品牌电商,用户被产品吸引,远比促销信息吸引更有价值。


手机是平台最重要的主营业务之一,为了能更好的展示手机,新版头图的设计,增加了颜色切换的交互功能,此功能后台可配置,也可用于其他多色产品的展示。


交互逻辑是,当用户选中一个颜色手机后,然后在往后滑动切换图片浏览,这时看到的图片都是关于当前选中的颜色手机图片。


另外,旧版的头图数量没做限制,运营同学常常会上传几十张图片(上图中旧版头图上传了24张),这个量级不仅没有起到精准的价值信息传递,反而让用户在此区域停留时间过长,产生厌倦情绪。


同时,从技术的角度来讲,过多的图片产品性能受影响,产生加载和卡顿也影响用户体验。


改版后,重新制定了策略,根据7±2原则,做了最多9张的限制,如果是有颜色切换商品,那就每个颜色分别可以最多上传9张,同时,建议运营同学上传6-9张为宜。


4.1 图标设计


顶部icon的优化,旧版三个icon加了黑色透明底,从设计的角度上来看,加肯定没有不加更简洁美观。


加黑色背景,设计的初衷当然是为了适应杂乱信息,或在黑色背景下避免有撞色冲突。



其实,对于品牌电商来说,并不会像B2B电商平台,商家自行上传头图,图片规范质量不可控。


对于,自营品牌电商上传的头图完全可控,设计师制定设计规范,即可大概率避免撞色的情况。


再者,当用户左右滑动头图时,用户关注的是图片信息,一般不会对上面的三个图标有兴趣,所以即便颜色冲突看不见也无关紧要,为了一个无关紧要的能力,影响视觉表现其实有点因小失大。


4.2 视频/图片


“视频”“图片”按钮切换的视觉改版,旧板与当时的淘宝也是如出一辙,根据新的设计语言,商品应该是最优展示,所以改掉突出的色块设计,包括头图直播的图标也是同样的设计理念,色块多了就会变得杂乱。



对于借鉴的理解


淘宝、京东这样的国民产品,当然要借鉴,但一定是借鉴他们产品的结构,他们培养出来的用户习惯,他们的产品底层逻辑,UI的设计要避免同质化。


4.3 3D展示


接下来借鉴一下主流产品的结构,一个商品可以3D展示,就能让用户很灵动的观察到产品的更多细节,体验会非常好,尤其对感性购买情绪用户。


刚说到头图主打一个产品秀,所以产品的3D展示入口,一定是在头图上,这非常符合用户的浏览商品逻辑,也是主流电商培养出来的用户习惯。



行内的人都知道,产品3D展示的功能,非常花钱,若第三方开发,一般也是部署在人家的服务器上,按周期付费,一次性买断很贵。


旧版的点击数据非常低,不符合此功能的预期,等于是花了大价钱开发的功能,并没有发挥出应有的价值。


4.4 头图规范


头图产品的展示制定了设计规范,这样能保证各种形状产品展示,在视觉上都是相对一样的大小。



4.5 优惠/属性模块改版



风格上采用了卡片式设计语言,原因有两点,当时较为流行,另外就是卡片式设计能够节省页面长度,同样的内容,卡片式设计省空间。


价格设计


价格改为黑色,设计的理念是页面中出现的红色元素,尽可能是优惠相关的信息,要给用户打造这种心智,黑色的价格更为冷静,等于削弱了营销感。



优惠入口设计


价格下面依旧是优惠信息汇总的入口,但是做了轻量化处理,比如去掉了色块按钮,标签做统一样式设计,并且只最多只展示三个优惠政策标签,这样次区域不会出现折行的复杂样式。


产品名称改为变动展示,比如在“已选”中选择了其他规格参数,那价格与产品名称的规格参数信息都会对应变化,这是旧版没有的功能,是多数电商平台都有的功能。


排行榜/副标题


标题下方优先展示排行榜,若此品没有排行榜,就配置一行副标题,且灰色字,这样整体会有视觉层次。



旧版之所以看起来乱,一是排版问题,二是视觉层级没拉开,导致整体看起来是一篇“小作文”。


排行榜设计理念


自营品牌电商排行榜的作用,是让用户对商品产生价值感,用户对产品有兴趣恰好排名还高,这种客观信息的传递,就会让用户产生价值感受,对于客观正向、权威的价值信息,最能打动理性购买情绪用户。


其实用户点不点击排行榜,对平台来说不重要,从品牌电商来讲,都是自家的孩子,都是宝,谁愿意让别人看到自家孩子谁好谁差点呢。


而综合类电商排行榜,一般要强化入口设计,引导用户点击,让用户做最优选择,这样不仅能提高了用户选品的体验,还能激励商家做好产品,力争好的名次。


设计很多时候的底层逻辑,来源于商业模式,盲目的借鉴,不思考设计逻辑,就会荒诞不经。


按钮位置调整


产品名称的右侧“分享”功能改为了“对比”,用户对比产品,一定是基于当前产品,所以在产品名称旁边放置对比功能入口,合情合理。



新旧两版虽都有对比功能,但因为入口位置设计不同,用户的使用体验差异就很不一样,数据也会有较大的差距。


旧版的分享按钮,在产品名称旁边也合理,但在页面上方已有常驻的分享功能,重复出现的必要性不大,况且分享在上方已是一个通用认知,所以放置“对比”按钮更具价值。


图标设计问题


说一下旧版“分享”图标的设计问题,在一个不规则的区域,放一个不规则的图标,就等于是乱上加乱,非常不美观突兀。



产品名右侧的空位,上方、左方、下方都是不规则的空间间距,这时在设计上,要不图标颜色弱下来,要不强一点,要不设计的更整体,才能看起来融入的更好,更整体。


活动小入口


下图是活动入口的设计改版,此活动入口是,对应当前产品的优惠活动入口,点击后跳转活动页。



活动即是优惠政策,所以新版加了红色标签,并且红色标签也能强调了活动属性,旧版设计形式较弱,很难引起用户的注意,历史数据也不是很好。


选购指南


先说结论,“选购指南”在产品站出现不合理。



当用户进入一个产品的详情页,说明用户的需求是明确的,同时用户对当前商品也是有兴趣的,所以这里出现“选购指南”的功能,与用户此时的心境不贴切。


举个例子,当用户的需求是买一部手机,此时不知道想买哪款,这时应该给用户提供“选购指南”,这种场景常出现在搜索结果页。


比如用户搜索“手机”,而不是精准的搜索某款手机,这种情况用户大概率购买手机的目标是不清晰的,所以,此时的搜索结果页应该出现“选购指南”功能。


关键参数


关键参数模块做了两个关键的改版,一是增加了产品的上市时间,并且永远在第一个,因为从客服的数据上来看,用户问“这款产品什么时候上市的?”的频率非常之高,所以用户需要这个信息。



另外一个是增加了“更多参数”的点击引导,因为在用户调研中,很多用户不知道这里是可以点击跳转的。


4.6 已选/收货方式



已选


已选模块改版,增加了机型颜色及数量信息展示,这样能进一步强化用户对产品的了解,同时起到品宣的作用。


点击此入口,链接的是购买流程页面,所以视觉上加强引导也非常有必要。


当用户在已选页面,重新选择参数后,页面上方的价格及产品名称联动同步变化。


快递配送


这里的改版做了很大的业务挑战,主要是改变了下单、配送时间的表达方式。


旧版配送文案是这样表达“明天14点前付款,预计4月21日送达”(当前时间14点),所以,付款周期是24小时,这样就会给用户发货速度很慢的感觉,等于跟用户说,“你明天这个时候下单也是一样的时间到货”。



因为付款周期长,用户还会产生拖延下单的心理,最终就有可能导致订单的流失。


修改后,根据当前时间,匹配物流业务,把下单提示时间控制在当前天。


“现在下单,预计【今天】21:00前送达”(当日到订单)


“今天11点前下单,预计【明天】18:00前送达” (上午下单)


“今天18点前下单,预计4月21日送达” (下午下单)            


新版-调整后


“今天”“明天”到达,这样的关键词都是用户的爽点,能吸引用户下单,所以设计上要重点提醒,万万不可把“今天”“明天”的时间以“XX月XX日”呈现。


门店闪送


新版


闪送是一个新增的业务,业务特点就是块,所以送达时间要精确到分钟,文案信息一定是“现在下单,预计最快今日12:08送达”,主打一个快,因为用户选择闪送业务,就是选择了配送速度。


到店自取


设计一个功能,首先搞清楚业务逻辑非常非常重要,“快递发货”“门店闪送”都是货找人,而到店自提是人找货,所以给用户传递的文案信息肯定是不一样的。


旧版


新版


旧版的名称叫“门店”,新版改为“到店自提”,虽然两者都是线上付款,线下提货,但是“门店”这个标题就没有表达清楚当前的业务属性。


旧版虽然已定位了一个最近门店,但交互上还需要点击到二级页面,重新选择门店,才可以进入支付流程,如果选择的门店缺货,那无法进入支付流程,且没有任何提示,购物体验很不友好。


新版外露的门店,一定是距离最优,且有货的门店,同时用户最关心的,门店具体位置,一定要完整露出,不要有省略号。


另外,给到PM的一个建议是,取消“库存紧张”的标签,有货就是有货,没货就是没货,品牌电商应该有一个更真诚的态度。


以上“快递发货”“门店闪送“”到店自提“,用户下单可以三选一,后两者与门店紧密结合,这就是满足这次改版需求中,提到的助力新零售模式。


一个错误想法


在第一版的改版中,当时我满脑子都想着如何助力新零售模式,所以在产品站中我试着增加了“附近小米之家”。



这个设计等于是给门店做了引流,从小米商城APP平台来讲,更希望用户在上线下单,而不是把用户引导进门店购物,所以这个设计不符合平台的业务策略。


但是,因为新零售线上线下是一家,“附近小米之家”模块不在产品站中出现,也应该在其他板块里有所体现。


现在在“服务”Tab中有“小米之家”,这样不仅能更好的为售后做好承接,也能起到对门店的宣传。


官方服务



官方服务的信息,能够让用户产生信任感,能体现官方优势,也是最能打动理性购物情绪用户的信息。


其实官方商城有天然的信任属性,来官方商城购物的用户,很多就是图个放心,图个服务好,追求的就是一个保障和信任,所以设计上信任属性着重去表现很合理。


新版增加了突出的logo标识,标签也采用logo的外轮廓,用于强调品牌感,小米logo的外轮廓已经是小米商城的一个设计语言,目的就是建立用户对小米商城的品牌认知度。


另外,整个区域可以点击,但不引导用户操作,原因就是都是一些常规信息,外露信息足以打造信任要求,没必要引导用户点击,这一点也是与旧版有所差异。


4.7 推荐搭购



推荐搭购是买主品的同时,搭购一些与主品有关联的推荐品,这样有时会有一些优惠政策。


新版的设计上主品与搭购品,在样式上有所区分,这样信息传递更高效合理,推荐搭配商品也是展示更多。


同时,新版还增加了主品的规格选择,这样用户若在此模块决定搭购商品,操作上更灵活,选择规格后,可以直接看到最终的价格。


在价格展示上也有优化,总价也用黑色与首屏的价格颜色保持一致,优惠价格则使用红色突出,这样更加吸引用户,同时符合整体的设计理念,即只要看到红色就是优惠信息。


取消此处的购买大按钮,数据表明极少有用户在这里直接下单,原因就是这不符合用户的操作习惯,所以这里只做搭购商品的选择,然后统一在底部的按钮进入结算流程。


4.8 信任体系改版



在产品站中“评价”“问答“”测评“,三个模块是最能打动用户的客观信息,客观信息更能表现真实性,所以容易让用户产生信任情绪。


理性购买情绪用户,一般线上购物会直奔评价区,看见好评数量高就会安心,看见差评就容易动摇。


评价


旧版的设计形式是,米圈包含买家秀(评价),这种包含的设计形式,在我看来是一个错误的逻辑,用户在此处很容易变得迷茫,不知道进哪个。


米圈包含评价的设计形式,会导致用户有知行不一的操作,心里想的看评价,结果进入的是米圈。


在新版的设计中,去掉了此处的米圈入口,当点击评价时,进入的就是米圈下的评价tab。



旧版的评价模块名称叫“买家秀”,这个词其实是淘宝的基因,这极不符合小米商城的调性,所以在新版中,也改为了业内通用名称“评价”。


当评价数字千位数时显示(XXXX),万位数时显示(X万+),这样的展示逻辑,数字过长时,数字大小第一视觉感知也是明确的。


另外,评价信息增加“好评率”,这个也是本身就有的数据接口。


最后还有一个细节的增加,新版用户评价信息的下方,增加了评价用户购买产品的规格,根据人的从众心理,能给用户带来快速做决策的能力。



问答



问答的改版非常简单,就是根据我们的设计语言“克制的”,做了去色处理,保证我们整个页面的视觉逻辑,红色都是优惠信息。


评测



评测主要做了排版的调整,旧版评测名称和用户名称,时常不能完全显示,这样就导致用户对主题意思不明,就会降低用户对评测视频的点击兴趣。


4.9 商品推荐



此模块的作用是,比如在餐厅吃饭,不知道点什么菜,突然看到了旁边海报上的推荐菜,这样就为用户做了引导,这种形式能提升用户体验。


但是海报上的推荐菜太多,那又会增加用户的选择成本,所以新版的设计每帧给用户推荐三个品,同样可以侧滑查看更多,同时也增加了所有推荐品的承接页。


这样的好处不仅节省了整个页面的长度,也为不关心此模块的用户,提高了当前产品信息的浏览效率。


4.10 底部导航按钮


“加入购物车”与“立即购买”按钮重新做了设计,与淘宝设计风格拉开差距,图标做了加粗处理,视觉表现厚重敦实,会给人一种可靠安全感,这也是品牌电商需要的气质。


另外,去掉了“收藏”功能,对于品牌电商来说,品类不多,也不存在店铺的概念,所以对用户来说,收藏的功能必要性不强,并且加入购物车功能完全满足收藏的需求,事实也如此,数据上收藏的点击率非常低。


过程稿解析(1)



上图是最早的一版,有三个不同之处,“购物车”改为“购物袋”、按钮改为圆角矩形、文案“立即购买”改为“购买”。


1)“购物车”改为“购物袋”


我之所以想改为“购物袋”,原因是分析小米之家的购物场景,在小米之家购物时,没人会推着购物车买东西,购物车只有在超市购物才会用到,所以购物袋心智更符合小米之家的购物场景。


再比如卖车的APP,也绝对不能有加入购物车、购物袋一说,现实中不符合逻辑呀,现实中买车都是订购,所以线上用订购就是对的。


虽然我坚持想用“购物袋”但是奈何我推不动,阻力太大,他们的观点是,主流电商都叫“购物车”所以不出错,我也是认同了。


2)圆角矩形按钮


我想用圆角矩形的原因是,圆角矩形稳重、严肃、圆角又不失亲和力,外形与手机也相似,是小米商城应该有的气质。


设计之初我也能预料到,改按钮形状的难度,因为小米商城之前的设计语言都是圆角按钮,一个产品中可能有上百个圆角按钮,要换都得统一换,难度非常大,所以,最后还是采用圆角按钮。


3)“立即购买”改为“购买”


“立即购买”的意思有营销感,我依旧坚持品牌电商在常规的设计上,要去营销化,去掉销售心理学上的套路,诚实、真诚才是品牌电商应该有的调性,让产品力干掉一切。


三者虽然最终都没有落地通过,但有部分人认同这三点的改版,我觉得努力就没有白费。


4.11 终稿整体效果


最终设计完成,得到了大老板与业务方的肯定,下图为产品站改版前后的对比。



— END —

优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720°全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


责任编辑:优网科技

版权所有:http://www.uweb.net.cn (优网科技) 转载请注明出处

小米商城产品站UI改版,高端化升级【高级篇】

日期:2024-10-17 10:55:34 发布人:优网科技

前言 


电商产品最重要的两个板块,一是首页,负责流量分发;二是产品站,也叫产品详情页,负责销售转化;这两个板块基本串联着整个产品,设计的好坏,直接影响购物体验和转化。


前阵子跟大家分享了小米商城首页设计改版,这次分享产品站,产品站的改版过程持续了多半年,踩了很多坑,总结了很多有价值的经验,接下来跟大家一并分享。


分享的内容分为四个方面:用户篇-需求篇-竞品篇-改版篇,每个环节循序渐进,层层环扣,本文尽可能把改版的底层逻辑说明白,讲透彻。


一、用户篇-购买情绪 


人是情绪动物,当用户购买商品时,无论是在线下还是在线上,都会有不一样的情绪行为,比如有时会特别爽快下单,有时又会犹犹豫豫没有购买冲动,有时还会精挑细选花费很长时间最后决定先加入购物车,这些都是购买情绪。


影响购买情绪的因素非常之多,比如用户需求的强弱、对品牌的认可度、产品的功能、服务感受、价值感、信任感、安全感等等。在销售过程中,若能够掌控用户购买情绪,那就会大大增加用户下单的意愿。


购买情绪大体可分为三大类,果断型、感性型、理性型,三者因为购买情绪的不同,在购买过程中,关注点和心态也会有所不一样,所以“对症下药”才能更好的促销售。


1.1 果断购买情绪


一般需求明确且强烈,亦是对品牌认可,对产品信任,购买过程中,看重关键要素需求,以目标为导向。


这类用户群体最具价值,是平台的宝贵财富,他们往往对品牌认可度高,对平台信任,粘性高,购买行为大多是果断下单,同时多数人还愿意将品牌/产品推荐给他人。


场景再现


用户:期待的小米14终于问世了,参数真的很高能,拍照无敌,必须整一个;想买个扫地机看了好几个,还是买小米的吧,毕竟大品牌服务好;必须官方平台购买,没优惠无所谓,正品保证,物流快,服务可靠。


1.2 感性购买情绪


感性购买情绪也容易果断下单,但下单的动机与果断情绪下单的动机不同,“果断”是因为对品牌,对平台信任,需求也强烈;“感性”则可能是因,产品外观好看,或是有朋友推荐,再或是联想到了产品的某个使用场景,从而触发了感性情绪而下单。


打动感性情绪用户,从UI设计上来讲,要保证高质量且好看的产品图,全方位展示产品的细节、产品的使用场景图、感性的文案、规范的页面设计等等。


当然这些只是能够助力用户下单的因素,对于品牌电商来说,让用户爱上品牌才是真正的价值,所以平台还要不断传递品牌价值和产品优势,提升产品力,同时给到用户真诚贴心的服务,长此以往,用户就会对品牌产生潜移默化的认可。


场景再现


用户:哇唔,这款手表也太好看了吧,还是(XXX明星)同款,跟我那件衣服也很搭,买买买;这包在模特身上气质绝佳,放我身上肯定也不错,买回来试试。


1.3 理性购买情绪


一般来说,用户对于没用过的品牌,不了解的产品,不熟悉的购物平台,通常是理性情绪,这是很自然的心理现象。


也有很多人,在消费上一贯是理性情绪,正所谓钱要花在刀刃上,要找到最合适的产品,认同的价格,才会入手。


理性情绪用户关注点一般有两个方向:一个是关注产品的性价比、客观评价、售后服务、产品功能细节等;另一个是关注自我价值认同,这就需要让用户感受到信任感、价值感、安全感等。


所以在产品设计上,能够快速有效让用户对比商品,另外评价体系在设计和运营上做好体验,同时UI设计上还要巧用品牌元素,表达品牌感。


对于品牌商城,还要强调官方商城,服务至上等运营理念等,这些都是助力理性情绪用户下单的条件。


场景再现


用户:嗯这个产品感觉不错,先去看看评价,评价有人说不好啊,再看看吧;这两个款都还行,纠结,先都加入购物车,再看看有没有更好的;不了解产品,不知道买哪个,找朋友推荐一下吧;这服务态度太差了,以后都不会买这个品牌了。


小结


每个人都会存在这三种购买情绪,所以在设计上,应该是综合的,即要对“果断”亲和、又要对“感性”友好、还要对“理性”有效,好的电商平台基本都做到了这三点。


二、需求篇-设计方向 


产品站改版属于重点的大项目,这样级别的项目,难度非常之大,首先要明确改版方向,从产品、交互、设计角度总结问题,其次要做用户调研,过往数据研究并具体分析,竞品分析等等。


关于设计方向和问题总结,在部门大会时,老板提了很多,拿到资料做了一下梳理,下图所示。



这些内容是最具价值的需求和问题总结,“需求”是公司的发展战略,“问题”是近几年的用户反馈积累,所以这次产品站的改版目标非常明确。


2.1 问题与需求总结


通过对需求和问题的总结,再结合各种调研和产品设计的思考,我们总结了六点改版的方向。


1、产品定位不清晰


有官网之名,无官网之魂,购物体验差。


2、产品站信息乱,不易理解


无法捕捉产品卖点浏览效率低,不容易高效对比同类产品。


3、线上线下融合


同价同促,通过门店自提,门店闪送,增加门店订单量。


4、官网形象高端化


提升用户体验,服务体验更贴心。


5、做好新品及自营大促


持续建立官网认知,将官网价值内核转化为用户语言,通过关键节点传递,建立官网心智。


6、承载手机 x 汽车


一体化销售服务。


结合这六点总结,再依据品牌电商产品的定位,公司战略,分析现有问题,思考设计解决方案,下面我们来研究几个问题。


第一个提到了“产品定位不清晰”,先去找找原因,看下图是能否快速感知到,哪个是小米商城的产品站,我们做了一些调研,多数人很难分的清楚,甚至有相当一部分人会误认为这都是淘宝。



在产品站的页面中,最具有产品辨识度的底部按钮,两款产品设计形式与颜色几乎一摸一样,从品牌势能上来看,淘宝强于品牌电商的小米商城,所以把小米商城误以为是淘宝很正常。


当然产品定位不清晰,不能只从设计上去看,比如产品逻辑,运营策略都能体现一个产品的定位,甚至客服的话术也是如此,比如小米商城的客服也跟用户说“亲”,那就很难形成自我品牌定位的认知。


对于品牌电商来说,要有自我的品牌调性,这不仅是用户认识你的基础,更是品牌发挥优势的重要能力。


很多设计师认为,借鉴主流成熟产品的设计不容易出错,有一定的道理,但是这不应该是你思考的主线,主线是先找准自家产品的定位,其次才是如何结合主流产品优点,打造自己的产品。


第二个问题说到,“产品站信息乱,不易理解,浏览效率低,不容易高效对比同类产品”,原因是头图信息太多,标题下方也是文字堆积,想给用户的信息太多,反而导致用户根本不会去读这些信息,所以提炼信息和重新排版设计迫在眉睫。


其中提到的“不容易高效对比同类产品”原因也很显然,“机型对比”的设计形式,像不可点击的标签,从点击数据上来看,确实极低,在用户调研中,也有很大一部分人认为不可点击。



一个信息冗余的页面,没有品牌元素信息、也没有表达自我的设计语言,注定会大大影响用户的购物体验,甚至还会拉低用户对品牌的好感与信任。


以上是简单的做了几个问题分析,分析问题,研究需求,是为了思考接下来的设计语言的制定。


2.2 设计语言/原则


设计语言是“塑造自我”的重要表达方式,一个优秀的产品一定是有自身的设计语言,所以我们要打造一套符合小米商城定位的设计语言。


根据小米商城品牌电商的产品定位,公司高端化战略,再经过一系列的研究和探索,最终总结制定4条产品设计语言/原则。



1、回归产品本身


聚焦产品价值为核心,回归本真主打产品秀,营销信息合理展示。


2、克制的


克制色彩营销的导向, 复杂的设计,助力品牌高端化。


3、极致的


以用户语言,打造产品细节,打磨用户体验,做好服务。


4、有品牌感知的


提取品牌DNA,建立官网心智,打造官方商城优势。


有了设计语言就有了设计风格指导,这四条设计语言不仅仅是支持产品站的设计,而是贯通指导整个产品的设计。


三、竞品篇-认识自己 


在设计改版前,主线是研究自家的产品,次线是对竞品有充分的了解,知己知彼,才能更好进行自己的设计。


3.1 产品定位


通过对市面上主流电商产品设计的研究,能够分析出,综合类电商与品牌电商的产品定位差异。



以上是综合类电商,即全品类,此类平台的特征是追求性价比,满足消费者物质层面需求,购买动机是功能、卖点、价值等利益点,UI设计需要注重氛围渲染,刺激消费欲望。


3.2 认识自己-模块分析


认识自己远比研究竞品更重要(强东哥说过这话),我个人非常认同。接下来,我们全方位的拆解小米商城产品站,同时进行模块化分析。


首先分析每个模块的历史数据,是否符合预期,这里的预期指的是某个入口的点击率是否正常,如果异常思考如何改版。


然后分析每个模块的功能作用,是否可以改进,满足新需求,助力新业务,从设计上来看是否合理美观,最后再结合新的设计语言进行改版。



产品站的信息传递逻辑是循序渐进,首先让用户快速获取商品信息,产生信任情绪,认可品牌/商品价值,从而产生下单行为。


产品站的整体设计,如若让三种情绪用户(果断型、感性型、理性型)在购物过程中,通过不同的信息,促进下单概率,并非容易,所以页面的信息排布的合理性尤为重要,接下来开始改版。


四、改版篇-案例解析 


在产品站改版的半年多时间里,中大概出了7-8版,一直在不断的优化调整,下面以最终稿来讲解。



上图是新旧版本的首屏对比,设计风格上有重大变化,变得更轻量,日常样式优惠政策都聚合在一个入口中,让日常的营销感弱下来。


首屏应该,也是最重要的,能让用户快速了解产品,所以首屏应更多展示产品外观、配置、功能等信息。




头图改版



头图在非大促期间,不做任何营销信息的设计,保持干净整洁的风格,这能满足追求品质感用户的心理期望,同时也是满足感性购买情绪用户的因素之一。


整洁有品质设计,能提升产品在用户心中的溢价空间,简单说就是用户觉得很值;杂乱的设计,优惠信息冗余,用户没有安全感,不能直接感受到,能不能享受到最优惠的政策。


新版的设计理念,结合设计语言“回归产品本身”,打造产品秀,让用户去感受产品本身的价值,对于品牌电商,用户被产品吸引,远比促销信息吸引更有价值。


手机是平台最重要的主营业务之一,为了能更好的展示手机,新版头图的设计,增加了颜色切换的交互功能,此功能后台可配置,也可用于其他多色产品的展示。


交互逻辑是,当用户选中一个颜色手机后,然后在往后滑动切换图片浏览,这时看到的图片都是关于当前选中的颜色手机图片。


另外,旧版的头图数量没做限制,运营同学常常会上传几十张图片(上图中旧版头图上传了24张),这个量级不仅没有起到精准的价值信息传递,反而让用户在此区域停留时间过长,产生厌倦情绪。


同时,从技术的角度来讲,过多的图片产品性能受影响,产生加载和卡顿也影响用户体验。


改版后,重新制定了策略,根据7±2原则,做了最多9张的限制,如果是有颜色切换商品,那就每个颜色分别可以最多上传9张,同时,建议运营同学上传6-9张为宜。


4.1 图标设计


顶部icon的优化,旧版三个icon加了黑色透明底,从设计的角度上来看,加肯定没有不加更简洁美观。


加黑色背景,设计的初衷当然是为了适应杂乱信息,或在黑色背景下避免有撞色冲突。



其实,对于品牌电商来说,并不会像B2B电商平台,商家自行上传头图,图片规范质量不可控。


对于,自营品牌电商上传的头图完全可控,设计师制定设计规范,即可大概率避免撞色的情况。


再者,当用户左右滑动头图时,用户关注的是图片信息,一般不会对上面的三个图标有兴趣,所以即便颜色冲突看不见也无关紧要,为了一个无关紧要的能力,影响视觉表现其实有点因小失大。


4.2 视频/图片


“视频”“图片”按钮切换的视觉改版,旧板与当时的淘宝也是如出一辙,根据新的设计语言,商品应该是最优展示,所以改掉突出的色块设计,包括头图直播的图标也是同样的设计理念,色块多了就会变得杂乱。



对于借鉴的理解


淘宝、京东这样的国民产品,当然要借鉴,但一定是借鉴他们产品的结构,他们培养出来的用户习惯,他们的产品底层逻辑,UI的设计要避免同质化。


4.3 3D展示


接下来借鉴一下主流产品的结构,一个商品可以3D展示,就能让用户很灵动的观察到产品的更多细节,体验会非常好,尤其对感性购买情绪用户。


刚说到头图主打一个产品秀,所以产品的3D展示入口,一定是在头图上,这非常符合用户的浏览商品逻辑,也是主流电商培养出来的用户习惯。



行内的人都知道,产品3D展示的功能,非常花钱,若第三方开发,一般也是部署在人家的服务器上,按周期付费,一次性买断很贵。


旧版的点击数据非常低,不符合此功能的预期,等于是花了大价钱开发的功能,并没有发挥出应有的价值。


4.4 头图规范


头图产品的展示制定了设计规范,这样能保证各种形状产品展示,在视觉上都是相对一样的大小。



4.5 优惠/属性模块改版



风格上采用了卡片式设计语言,原因有两点,当时较为流行,另外就是卡片式设计能够节省页面长度,同样的内容,卡片式设计省空间。


价格设计


价格改为黑色,设计的理念是页面中出现的红色元素,尽可能是优惠相关的信息,要给用户打造这种心智,黑色的价格更为冷静,等于削弱了营销感。



优惠入口设计


价格下面依旧是优惠信息汇总的入口,但是做了轻量化处理,比如去掉了色块按钮,标签做统一样式设计,并且只最多只展示三个优惠政策标签,这样次区域不会出现折行的复杂样式。


产品名称改为变动展示,比如在“已选”中选择了其他规格参数,那价格与产品名称的规格参数信息都会对应变化,这是旧版没有的功能,是多数电商平台都有的功能。


排行榜/副标题


标题下方优先展示排行榜,若此品没有排行榜,就配置一行副标题,且灰色字,这样整体会有视觉层次。



旧版之所以看起来乱,一是排版问题,二是视觉层级没拉开,导致整体看起来是一篇“小作文”。


排行榜设计理念


自营品牌电商排行榜的作用,是让用户对商品产生价值感,用户对产品有兴趣恰好排名还高,这种客观信息的传递,就会让用户产生价值感受,对于客观正向、权威的价值信息,最能打动理性购买情绪用户。


其实用户点不点击排行榜,对平台来说不重要,从品牌电商来讲,都是自家的孩子,都是宝,谁愿意让别人看到自家孩子谁好谁差点呢。


而综合类电商排行榜,一般要强化入口设计,引导用户点击,让用户做最优选择,这样不仅能提高了用户选品的体验,还能激励商家做好产品,力争好的名次。


设计很多时候的底层逻辑,来源于商业模式,盲目的借鉴,不思考设计逻辑,就会荒诞不经。


按钮位置调整


产品名称的右侧“分享”功能改为了“对比”,用户对比产品,一定是基于当前产品,所以在产品名称旁边放置对比功能入口,合情合理。



新旧两版虽都有对比功能,但因为入口位置设计不同,用户的使用体验差异就很不一样,数据也会有较大的差距。


旧版的分享按钮,在产品名称旁边也合理,但在页面上方已有常驻的分享功能,重复出现的必要性不大,况且分享在上方已是一个通用认知,所以放置“对比”按钮更具价值。


图标设计问题


说一下旧版“分享”图标的设计问题,在一个不规则的区域,放一个不规则的图标,就等于是乱上加乱,非常不美观突兀。



产品名右侧的空位,上方、左方、下方都是不规则的空间间距,这时在设计上,要不图标颜色弱下来,要不强一点,要不设计的更整体,才能看起来融入的更好,更整体。


活动小入口


下图是活动入口的设计改版,此活动入口是,对应当前产品的优惠活动入口,点击后跳转活动页。



活动即是优惠政策,所以新版加了红色标签,并且红色标签也能强调了活动属性,旧版设计形式较弱,很难引起用户的注意,历史数据也不是很好。


选购指南


先说结论,“选购指南”在产品站出现不合理。



当用户进入一个产品的详情页,说明用户的需求是明确的,同时用户对当前商品也是有兴趣的,所以这里出现“选购指南”的功能,与用户此时的心境不贴切。


举个例子,当用户的需求是买一部手机,此时不知道想买哪款,这时应该给用户提供“选购指南”,这种场景常出现在搜索结果页。


比如用户搜索“手机”,而不是精准的搜索某款手机,这种情况用户大概率购买手机的目标是不清晰的,所以,此时的搜索结果页应该出现“选购指南”功能。


关键参数


关键参数模块做了两个关键的改版,一是增加了产品的上市时间,并且永远在第一个,因为从客服的数据上来看,用户问“这款产品什么时候上市的?”的频率非常之高,所以用户需要这个信息。



另外一个是增加了“更多参数”的点击引导,因为在用户调研中,很多用户不知道这里是可以点击跳转的。


4.6 已选/收货方式



已选


已选模块改版,增加了机型颜色及数量信息展示,这样能进一步强化用户对产品的了解,同时起到品宣的作用。


点击此入口,链接的是购买流程页面,所以视觉上加强引导也非常有必要。


当用户在已选页面,重新选择参数后,页面上方的价格及产品名称联动同步变化。


快递配送


这里的改版做了很大的业务挑战,主要是改变了下单、配送时间的表达方式。


旧版配送文案是这样表达“明天14点前付款,预计4月21日送达”(当前时间14点),所以,付款周期是24小时,这样就会给用户发货速度很慢的感觉,等于跟用户说,“你明天这个时候下单也是一样的时间到货”。



因为付款周期长,用户还会产生拖延下单的心理,最终就有可能导致订单的流失。


修改后,根据当前时间,匹配物流业务,把下单提示时间控制在当前天。


“现在下单,预计【今天】21:00前送达”(当日到订单)


“今天11点前下单,预计【明天】18:00前送达” (上午下单)


“今天18点前下单,预计4月21日送达” (下午下单)            


新版-调整后


“今天”“明天”到达,这样的关键词都是用户的爽点,能吸引用户下单,所以设计上要重点提醒,万万不可把“今天”“明天”的时间以“XX月XX日”呈现。


门店闪送


新版


闪送是一个新增的业务,业务特点就是块,所以送达时间要精确到分钟,文案信息一定是“现在下单,预计最快今日12:08送达”,主打一个快,因为用户选择闪送业务,就是选择了配送速度。


到店自取


设计一个功能,首先搞清楚业务逻辑非常非常重要,“快递发货”“门店闪送”都是货找人,而到店自提是人找货,所以给用户传递的文案信息肯定是不一样的。


旧版


新版


旧版的名称叫“门店”,新版改为“到店自提”,虽然两者都是线上付款,线下提货,但是“门店”这个标题就没有表达清楚当前的业务属性。


旧版虽然已定位了一个最近门店,但交互上还需要点击到二级页面,重新选择门店,才可以进入支付流程,如果选择的门店缺货,那无法进入支付流程,且没有任何提示,购物体验很不友好。


新版外露的门店,一定是距离最优,且有货的门店,同时用户最关心的,门店具体位置,一定要完整露出,不要有省略号。


另外,给到PM的一个建议是,取消“库存紧张”的标签,有货就是有货,没货就是没货,品牌电商应该有一个更真诚的态度。


以上“快递发货”“门店闪送“”到店自提“,用户下单可以三选一,后两者与门店紧密结合,这就是满足这次改版需求中,提到的助力新零售模式。


一个错误想法


在第一版的改版中,当时我满脑子都想着如何助力新零售模式,所以在产品站中我试着增加了“附近小米之家”。



这个设计等于是给门店做了引流,从小米商城APP平台来讲,更希望用户在上线下单,而不是把用户引导进门店购物,所以这个设计不符合平台的业务策略。


但是,因为新零售线上线下是一家,“附近小米之家”模块不在产品站中出现,也应该在其他板块里有所体现。


现在在“服务”Tab中有“小米之家”,这样不仅能更好的为售后做好承接,也能起到对门店的宣传。


官方服务



官方服务的信息,能够让用户产生信任感,能体现官方优势,也是最能打动理性购物情绪用户的信息。


其实官方商城有天然的信任属性,来官方商城购物的用户,很多就是图个放心,图个服务好,追求的就是一个保障和信任,所以设计上信任属性着重去表现很合理。


新版增加了突出的logo标识,标签也采用logo的外轮廓,用于强调品牌感,小米logo的外轮廓已经是小米商城的一个设计语言,目的就是建立用户对小米商城的品牌认知度。


另外,整个区域可以点击,但不引导用户操作,原因就是都是一些常规信息,外露信息足以打造信任要求,没必要引导用户点击,这一点也是与旧版有所差异。


4.7 推荐搭购



推荐搭购是买主品的同时,搭购一些与主品有关联的推荐品,这样有时会有一些优惠政策。


新版的设计上主品与搭购品,在样式上有所区分,这样信息传递更高效合理,推荐搭配商品也是展示更多。


同时,新版还增加了主品的规格选择,这样用户若在此模块决定搭购商品,操作上更灵活,选择规格后,可以直接看到最终的价格。


在价格展示上也有优化,总价也用黑色与首屏的价格颜色保持一致,优惠价格则使用红色突出,这样更加吸引用户,同时符合整体的设计理念,即只要看到红色就是优惠信息。


取消此处的购买大按钮,数据表明极少有用户在这里直接下单,原因就是这不符合用户的操作习惯,所以这里只做搭购商品的选择,然后统一在底部的按钮进入结算流程。


4.8 信任体系改版



在产品站中“评价”“问答“”测评“,三个模块是最能打动用户的客观信息,客观信息更能表现真实性,所以容易让用户产生信任情绪。


理性购买情绪用户,一般线上购物会直奔评价区,看见好评数量高就会安心,看见差评就容易动摇。


评价


旧版的设计形式是,米圈包含买家秀(评价),这种包含的设计形式,在我看来是一个错误的逻辑,用户在此处很容易变得迷茫,不知道进哪个。


米圈包含评价的设计形式,会导致用户有知行不一的操作,心里想的看评价,结果进入的是米圈。


在新版的设计中,去掉了此处的米圈入口,当点击评价时,进入的就是米圈下的评价tab。



旧版的评价模块名称叫“买家秀”,这个词其实是淘宝的基因,这极不符合小米商城的调性,所以在新版中,也改为了业内通用名称“评价”。


当评价数字千位数时显示(XXXX),万位数时显示(X万+),这样的展示逻辑,数字过长时,数字大小第一视觉感知也是明确的。


另外,评价信息增加“好评率”,这个也是本身就有的数据接口。


最后还有一个细节的增加,新版用户评价信息的下方,增加了评价用户购买产品的规格,根据人的从众心理,能给用户带来快速做决策的能力。



问答



问答的改版非常简单,就是根据我们的设计语言“克制的”,做了去色处理,保证我们整个页面的视觉逻辑,红色都是优惠信息。


评测



评测主要做了排版的调整,旧版评测名称和用户名称,时常不能完全显示,这样就导致用户对主题意思不明,就会降低用户对评测视频的点击兴趣。


4.9 商品推荐



此模块的作用是,比如在餐厅吃饭,不知道点什么菜,突然看到了旁边海报上的推荐菜,这样就为用户做了引导,这种形式能提升用户体验。


但是海报上的推荐菜太多,那又会增加用户的选择成本,所以新版的设计每帧给用户推荐三个品,同样可以侧滑查看更多,同时也增加了所有推荐品的承接页。


这样的好处不仅节省了整个页面的长度,也为不关心此模块的用户,提高了当前产品信息的浏览效率。


4.10 底部导航按钮


“加入购物车”与“立即购买”按钮重新做了设计,与淘宝设计风格拉开差距,图标做了加粗处理,视觉表现厚重敦实,会给人一种可靠安全感,这也是品牌电商需要的气质。


另外,去掉了“收藏”功能,对于品牌电商来说,品类不多,也不存在店铺的概念,所以对用户来说,收藏的功能必要性不强,并且加入购物车功能完全满足收藏的需求,事实也如此,数据上收藏的点击率非常低。


过程稿解析(1)



上图是最早的一版,有三个不同之处,“购物车”改为“购物袋”、按钮改为圆角矩形、文案“立即购买”改为“购买”。


1)“购物车”改为“购物袋”


我之所以想改为“购物袋”,原因是分析小米之家的购物场景,在小米之家购物时,没人会推着购物车买东西,购物车只有在超市购物才会用到,所以购物袋心智更符合小米之家的购物场景。


再比如卖车的APP,也绝对不能有加入购物车、购物袋一说,现实中不符合逻辑呀,现实中买车都是订购,所以线上用订购就是对的。


虽然我坚持想用“购物袋”但是奈何我推不动,阻力太大,他们的观点是,主流电商都叫“购物车”所以不出错,我也是认同了。


2)圆角矩形按钮


我想用圆角矩形的原因是,圆角矩形稳重、严肃、圆角又不失亲和力,外形与手机也相似,是小米商城应该有的气质。


设计之初我也能预料到,改按钮形状的难度,因为小米商城之前的设计语言都是圆角按钮,一个产品中可能有上百个圆角按钮,要换都得统一换,难度非常大,所以,最后还是采用圆角按钮。


3)“立即购买”改为“购买”


“立即购买”的意思有营销感,我依旧坚持品牌电商在常规的设计上,要去营销化,去掉销售心理学上的套路,诚实、真诚才是品牌电商应该有的调性,让产品力干掉一切。


三者虽然最终都没有落地通过,但有部分人认同这三点的改版,我觉得努力就没有白费。


4.11 终稿整体效果


最终设计完成,得到了大老板与业务方的肯定,下图为产品站改版前后的对比。



— END —

责任编辑:优网科技

版权所有:http://www.uweb.net.cn (优网科技) 转载请注明出处

上一篇 返回列表 下一篇
推荐案例
眼光高度决定品牌厚度 !
广州网站建设-大良实验小学系统开发
广州网站建设-大良实验小学系统开发
大良实验小学于1998年成立,占地4万5千多平方米,是顺德区规模的民办学校之一。现有71个教学班,学生3223人,教职员工436人。学校按广东省一级学校标准建设,配有图书馆、舞蹈室、管乐室、多媒体电子琴室、实验室、英语乐园等功能场室36个,还拥有大礼堂、羽毛球馆、生物园、地理园、游泳池和200米塑胶运动场等活动场所。学校先后荣获“广东省一级学校”、“全国少先队红旗大队”、“广东省首届优秀书香校园”、“广东省书法教育名校”、“广东省综合实践样本学校”等光荣称号。
广州网站建设-海天味业公众号开发
广州网站建设-海天味业公众号开发
海天是中国调味品行业的优秀企业,专业的调味品生产和营销企业,历史悠久,是中华人民共和国商务部公布的首批“中华老字号”企业之一。目前生产的产品涵盖酱油、蚝油、酱、醋、料酒、调味汁、鸡精、鸡粉、腐乳等几大系列百余品种300多规格,年产值过百亿元。
广州网站建设-中凯网站建设
广州网站建设-中凯网站建设
中凯(海南)控股集团有限公司本次项目是集团网站建设,与优网科技合作过程中,双方配合默契,保质保量的仅一个月就完成了整站建设。优网科技帮助中凯(海南)快速树立了一个集团专业形象展示,同时网站的设计效果、体验和交互也让中凯(海南)非常满意。
广州网站建设-中国联塑网站建设
广州网站建设-中国联塑网站建设
中国联塑集团控股有限公司(简称:中国联塑,股份代号:2128.HK )是国内大型建材家居产业集团,产品及服务涵盖管道产品、水暖卫浴、整体厨房、整体门窗、装饰板材、净水设备、消防器材、卫生材料、海洋养殖、环境保护、建材家居渠道与服务等领域。
广州网站建设-前海益广网站建设
广州网站建设-前海益广网站建设
深圳前海益广股权投资有限公司成立于2016年04月18日,注册地位于深圳市前海深港合作区前湾一路1号A栋201室,经营范围包括一般经营项目是:股权投资;受托管理股权投资基金;受托资产管理;企业管理咨询、经济信息咨询;投资兴办实业等。
广州网站建设-萨米特高端品牌网站建设
广州网站建设-萨米特高端品牌网站建设
佛山市萨米特陶瓷销售有限公司始于2000年,在陶瓷行业风潮中发展壮大,是新明珠陶瓷集团的核心品牌。萨米特瓷砖注重营销系统的升级与消费体验模式的实施,倡导“设计+生活”的品牌理念,致力于打造有温度,有态度的瓷砖品牌。用设计提高人居价值,以创新驱动行业发展,与全球不同国家和文化背景的消费者共享美好家居。
广州网站建设-欧迪克网站建设
广州网站建设-欧迪克网站建设
佛山市南海欧迪克五金制品有限公司始创于2003年,致力于发展高端硅镁铝合金安全门窗,木铝门窗、阳光房定制,集研发、生产、销售、服务于一体。自创立以来,系列产品畅销大江南北,获得由权威媒体及单位颁发的多项殊荣。目前为止,“欧迪克门窗”的专卖店遍布全国800多个县市及地区,共有1000多家专卖店辐射全国。
广州网站建设-好太太网站建设
广州网站建设-好太太网站建设
好太太集团是一家集研发、生产、销售、服务于一体的智能家居企业,产品与服务涵盖智能晾晒、智能锁、智能电器等众多领域。坐落于广州番禺区,自1999年始便致力于打造 “好太太”品牌,经过将近二十年的发展,如今好太太已成为全球的晾衣架行业研发、生产、销售、服务商,在中国拥有近2000万户家庭在使用好太太产品。好太太集团于2017年主板上市,成为智能晾晒领域首家A股上市企业。
广州网站建设-中山公用水务网站建设
广州网站建设-中山公用水务网站建设
中山公用事业集团股份有限公司成立于1998年,是一家国有控股的上市公司(SZ:000685)。公司坚持“产业经营+资本运营”双轮驱动的战略思路,定位环保水务为核心业务,通过提升环保水务板块的产业经营能力,与资本运营平台协同增效,致力打造行业内有影响力的领先企业,积极担当社会责任和环境保护的公民企业,促成员工实现自身价值的平台企业。
广州网站建设--华标集团物业公众号
广州网站建设--华标集团物业公众号
华标集团物业为了进一步提升服务质量,满足业主的多元化需求,采用微信公众号作为服务平台,为业主提供日常物业缴费、报事报修、社区活动等便利性服务。本次量身定制的微信公众号,旨在打造一个高效、稳定、便捷的线上服务平台,让业主享受到更加贴心、便捷的物业服务。
广州网站建设-欧派家居集团官网建设
广州网站建设-欧派家居集团官网建设
欧派集团官网作为欧派对外展现品牌形象、传达服务理念的重要信息平台,也向用户展示了欧派最新的资讯和相关的售后服务。优网作为欧派集团的信息化战略合作伙伴,本次的官网开发基于专业的设计水平和扎实的技术能力,为欧派的互联网品牌形象全面升级。
广州网站建设-康臣药业网站建设
广州网站建设-康臣药业网站建设
康臣药业集团(HK.01681)是一家主要从事现代中成药及医用成像对比剂研发、生产及营销的现代化制药企业,创立于1997年,于2013年12月19日在香港联合交易所主板上市,旗下拥有广州康臣药业有限公司、康臣药业(内蒙古)有限责任公司、广西玉林制药集团有限责任公司、广州康臣药物研究有限公司等从事药品生产和研发的企业,运营康臣、玉林等知名医药品牌,在国内建有广东广州、内蒙古通辽、广西玉林等3个生产基地,员工逾2000人。

我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
联系专属顾问
联系专属顾问
联系专属顾问
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询

和我们在线交谈!
展开菜单
关于我们
优网观点
项目动态
公司新闻
优网学院
常见问题
收起菜单
活动会议应用
答题应用
班车预定应用
应急值班表应用
春节活动应用
活动直播应用
内部培训及任务应用
返回上一级