淘宝天猫网购 > 淘宝 >

对新版淘宝的设计思考

时间:2018-12-24 15:57

来源:未知作者:admin点击:

  品格:淘宝用了分明的卡片,去线条;而京东也用了卡片,卡片感薄弱,是为了联合性而做;易购如故是线框辨别,举座辨别效率不佳。

  这里重要说一说易购的题目:首屏呈现「我的专场」的大片不均衡色块很是不适应,一面 icon 效率不佳,别的有少许实质上的 bug。

  品牌:淘宝和京东正在文字的管制上没有效更众的颜色,而易购的颜色利用得很是众,减弱品牌感,且没有带来任何上风。

  这一块做的 A/B 测试。市肆页面的改动较大,导航做了较大安排。新版将常用操作和紧张性能放到了底部固定;二级导航中的实质让商家自界说遴选,从而餍足差别市肆的需求;新版一级二级导航较旧版层级联系精确了很众。

  淘宝和京东的订单页个体以为没有什么硬伤,淘宝有个适配的题目。苏宁易购的题目比拟众,开始是顶部「常购清单」中没有商品的 bug,然后是图片与购物车等地方的品格不符,商品之间割裂线有时有有时无,间距有题目等等。

  新旧版本的对照,可能看出88会员、卡券包优先级提升,会员音信特别荟萃、特出。这也印证了这两年会员机制的炎热,拉新本钱和难度都越来越高的情形下,稳定老用户才气带来更众的价钱。

  京东:这边也是继淘宝改版后不久改版上线。这边首屏的 icon 这一块的卡片式生疏,大有为了卡片而卡片既视感,京东秒杀这块的井然度不高,也有些左重右轻。「逐日逛」这种装束性较强的品格也与举座卡片式简明品格不符。「店东小院」楼目标级题目的颜色跳跃,大有太阿倒持之感。

  上图为5个 tab 的页面,此次联合了头部的颜色,夸大了品牌,联合性方面也取得了晋升。

  其他细节:京东标签差别于查找结果页的弱化,而瑕瑜常加强,导致视觉主题芜乱,部分按钮很是小,操作未便;易购标签管制上比京东收敛;易购底部 tab 与其他一面没有辨别,浮框像广告,效率不佳,数目改正框的描边太硬,比例不融洽。

  只是正在7. 7. 8的测试版本中,又将疾递音信的样式减为两种,算是一种妥协。自己以为,场景细分起点是好的,但正在样式和地方两点中,最好起码有一点是固定稳固的,如许才不会过众加添用户的进修本钱,也能涵盖少许小概率场景。

  物流详情页除了样式的广大蜕化,再有一个特征便是场景化细分,差别的场景做出了区别化。比如仅仅是物流详情页,依照差别的场景:发货未揽件 – 已揽件未配送 – 疾递员配送中 – 来到菜鸟驿站/其他疾递点 – 已签收等,页面特出的音信均有所区别。已揽件时特出疾递音信,配送时特出配送员音信等。

  我的淘宝这一页的动效治理题目正在上面有说到,右边的有好货页面,当用户正在滑动页面时,攻略推举一栏的图片有递次揭示的效率,吸引眼球,小有惊喜。

  种种计划准绳都是为完成贸易目的的手腕,而不是捏造揣测,长篇剖析计划准绳,却不注解为什么这么做

  闭于联合性这一点,可以有人说京东做的更好,由于它险些扫数页面都用了卡片风,而淘宝没有。个体以为,计划品格是次于计划目的的,假若这种计划品格不行很好餍足该页面的计划目的,提倡依然以计划目的为重;假若如故强制运用该品格的话,会得不偿失。淘宝的做法是把卡片这种品格归类为轻质化品格,除了卡片以外,再有去线条、色块等等计划发言,所以并非夸大必然要运用卡片样子。

  此页面我仅从节拍感这一个角度来看,上图曾经标出了每个页面的节拍感给我的感触。淘宝举座的节拍感比拟好,轻重平静;京东和易购正在节拍感上做的都有些题目,重节拍之间无轻节拍的融合会缺乏呼吸感。

  近期淘宝 App 的很众页面都有了较大的改动,正在剖析淘宝改版的根底上,通过几个闭节页面的剖析对照淘宝、京东、苏宁易购三大归纳类电商平台的产物计划,心愿此篇作品能让公共对电商类 App 的产物计划有更深的领悟。

  归纳上面详细页面的剖析可能看出淘宝正在 UI 计划上的上风:尾随计划趋向、联合性、排版融洽等。

  品格效率:淘宝没有效卡片品格;京东用了卡片,导致洪量留白,同时没有带来任何上风,苏宁易购举座稍显拥堵,没有亮点。

  从场景细分做区别化,让用户获取目前最必要的音信这件事的起点无疑是很好的,不过从上图中,仅是疾递音信这一类音信,就呈现了三种样式(如上图),而且地方也不联合。假若用户是采办了几件差别店家的商品,这时疾递员打电话来说我是XX疾递的,疾递给你放正在了某某地方,这时我念领会这是啥商品的光阴,于是我就翻开了物流详情,来找疾递音信,觉察疾递音信公然不正在历来的舆图底下了,找了好一会才觉察放到了疾递员下方。这个例子也便是说正在很是睹场景下获取某个音信时可以必要付出异常的进修本钱。

  淘宝用了卡片“页面区域目标感好”,京东用了卡片“酿成了洪量的留白,糟塌”

  苏宁易购:目前还没有改版。掌上抢这楼层井然度不高,和京东雷同,同时缺乏目标感,一面有渐变一面没有,很是不联合。「逛实惠」楼层视觉不均衡,况且音信层级很有题目。

  icon 的题目个体猜念是由于体量与紧张性、地方的题目,线条式的体量弱于填充式。正在「我的淘宝」页面中,最紧张的音信是「我的订单」,所以必要必然的特出。别的正在测试版里,「我的订单」的上面固定的广告位安置了观光田鸡的广告,此地方的特出性导致其弱化了底下的「我的订单」,占用了原先「我的订单」的 C 位,所以测试版思索到更全的场景(有广告),从而将 icon 的样式换回了体量大的填充式。

  品格:淘宝这页用了无框计划,省去了中心的割裂线,商品图片尺寸较大;从左到右,图片尺寸越来越小,割裂线从无到细到粗,举座效率上淘宝和京东效率比易购的好。

  个体感到作品缺乏写外面与数据撑持,以是大致方向个情面感并不是那么让我信服,随后我才瞥睹了作品题目,是个体推敲总结,看完感触依然有所成就,由于阅览的光阴本人也正在推敲。

  再来说说此次的 A/B 测试,此次的测试时辰比拟长(从7. 7. 2到目前的7. 8. 2都正在,目测到8. 0应当会给出一个结果)。市肆页正在导航上的大改动,会正在必然水准上对曾经变成习气的老用户酿成打击,对页面从新顺应和进修,有点雷同于前摄压制(正在认深交理学上指之进步修过的资料对维持和回顾此后进修的资料的滋扰功用)。新版计划的目标一是轻易用户初期火速进修,二是中后期火速运用。看待中后期的火速运用就必要一段时辰的铺垫来获取数据。该次测试应当是辨别种种差别的用户,轻易来说测试新用户、老用户判袂看待新旧版本的进修,以及他们对新版本熟谙之后的运用。

  标签:正在标签的管制上,易购的标签很是强,正在页面上很是特出,太阿倒持;京东的标签弱化,与淘宝雷同,但所有差别类的标签样式相仿(秒杀与自营),会让人感到有些芜乱。

  电商类 App 是寻常运用频次很是高的运用,它们的每一次更新改版不光是营业的拓展、用户需求的餍足,同时也是消费趋向的引颈与随从。

  正在测试版中,这个页面重要看到两个点的蜕化,一个是 icon 改为历来的填充式,一个是动效滚动的节拍。

  「我的订单」一面 icon 样式产生了蜕化(7. 7. 2 版),从填充式改革为线条式,特出了 icon 右上角的数字,但这一点正在测试版本中又改回来了(后面斟酌)。

  上图是淘宝几个重要改版页面。从视觉上看,很分明的大圆角卡片、去线条,举座品格联合轻质化。大圆角卡片尾随了 iOS11 的品格(App Store 中尤为特出),卡片使音信特别聚焦,模块感更强;圆角卡片自己也比原先的卡片式加添了更众细节;大圆角卡片亲和力高,特别活跃,也合适淘宝人群的定位。

  本文由 @404FoundSpace 授权揭橥于人人都是产物司理,未经作家许可,禁止转载。

  人人都是产物司理(是以产物司理、运营为重心的进修、换取、分享平台,集媒体、培训、任用、社群为一体,全方位任职产物人和运营人,建树8年举办正在线+期,线+场,产物司理大会、运营大会20+场,掩盖北上广深杭成都等15个都会,内行业有较高的影响力和著名度。平台蚁集了浩瀚BAT美团京东滴滴360小米网易等著名互联网公司产物总监和运营总监,他们正在这里分享学问、任用人才,与你一齐发展。

  动效滚动是上面说的88会员和最新物流,7. 7. 2版本里两个滚动是同时实行的,而7. 7. 8的测试版中两个滚动是错开的。上下同时滚动会让人有些芜乱,会让人以为这两块的音信是彼此联系的。

  图文编排:淘宝和京东都没有硬伤,比拟融洽,但易购的图片和文字巨细间距比例不融洽,图片与线框无论正在视觉效率上依然像素上都没有对齐;易购底部没有适配 iPhone X。

  总结来看,淘宝改版的计划角度可能总结为:计划尾随目的,品牌、会员特出,尾随计划趋向,细分场景,可视化揭示和畅通动效。别的淘宝对计划、测试的立场上来说,计划治理本质题目,计划必要验证,测试要厉谨。

  这里只选了京东和苏宁易购两个与淘宝实行了几个闭节页面比拟,以下重要从视觉的角度说一下有哪些题目,这里险些不牵连营业、页面跳转等题目。

  本文作家正在剖析淘宝改版的根底上,通过几个闭节页面的剖析对照淘宝、京东、苏宁易购三大归纳类电商平台的产物计划,enjoy~

  88会员和最新物流这两块实质滚动涌现,真恰是动效治理题目,从时辰轴来治理音信量大而空间限度的题目,同时动态效率加添了用户吸引度。

  图文编排:淘宝举座很是融洽;京东图片均运用了白底,这点很好维持了联合性;京东运用了洪量的计划细节,字号、粗细、字体、颜色等等很是丰厚,但举座效率并没有很理念,稍显琐碎与凌乱;苏宁易购的文字巨细与间距管制不融洽而带来拥堵感。

  新版的卡片式很特出,去掉了大一面的线条,转而用块面来替代线条外达层级联系。

  挪动互联网的性质都是一种贸易形式 「2018产物司理大会 · 北京站」现场报道

  这两张图都是市肆页面顶部的动效,当用户向下滑动页面时,顶部的音信会呈现蜕化,也算是细分场景的一种,通过动效的格式完善过渡,过渡的畅通感会让用户对该平台加添些许好感。

  这一块可能说是样式上的大改。用可视化来显露包裹正处的地方以及即将实行的操作,加强用户感知(低浸清楚难度),进一步晋升对商品音信的把控感。比原先仅仅是文字涌现而言活跃了很众,样式亲近外卖恭候中的订单页面。可视化虽然可能涌现更众的音信,不过正在用户非陶冶的情形下音信通报的速率未必比文字要更疾,差别的人对图形的清楚也会有所误差。只是介于外卖 App 的页面曾经对良众用户实行了教养,信赖这种清楚上不会有太浩劫度。不过还是要正在后续优化中逐步特出音信的要点。

【责任编辑:admin】
热图 更多>>
热门文章 更多>>