IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

设计实战案例!谈谈网易严选企业购的交互设计

震天下 • 2017-09-21 13:59 • 交互设计

网易UEDC – 柴蒙:企业采购是现今市场经济下一种最主要最主流的采购形式,其特点是大批量采购商品。传统的企业采购方式不可避免地会带来如回扣、效率低、采购过程不透明等诸多问题。

文章目录[隐藏]

  • 相关文章

设计实战案例!谈谈网易严选企业购的交互设计

网易UEDC – 柴蒙:企业采购是现今市场经济下一种最主要最主流的采购形式,其特点是大批量采购商品。传统的企业采购方式不可避免地会带来如回扣、效率低、采购过程不透明等诸多问题。

现今的主流电商网站或品牌在满足广大消费者的同时,都细分出企业采购的特殊场景——设立企业采购网站,如天猫、京东、小米等。由于各家电商的定位不同,在网站设计的表现与逻辑架构也不尽相同。

建立企业采购网站这种细分运营,正是“信息传递要准确”的表现,能为C端和B端的用户都带来最友好的体验。需要注意的是企业采购并不是面向广大普通用户的,因为它的需求与使用场景比较特殊,例如企业采购的商品数量大、订单金额大,还有会涉及到一些梯度折扣、分期付款、代下单等等采购的业务流程。

那么,如何设计网易严选企业购的网站呢?可以与网易严选主站设计的一样吗?还是有所区别呢?

让我们回到原点去看这个问题。

一. 解析使用场景

用户是谁?使用环境如何?

企业采购人员(背后是他们的老板)。

正是因为我们的用户会在上班时间,在办公室使用电脑来完成他们的采购工作,所以网易严选企业购优先做了网站,而不是APP。

用户的目标是什么?他们希望如何?

我们通过访谈了解到企业采购人员希望可以高效地买到性价比高的商品。这些商品可能是给企业员工发的奖品福利,可能是赠送给客户的礼品,也可能是采购给企业员工日常使用的办公用品等等。

特别是企业采购这样的大宗订单,若是能用较少的成本,获得员工的满意、客户的认可、老板的赞赏,还提高了采购人员的工作效率,同时避免了可能存在的回扣等问题,对于企业来说是十分有利的。

我们怎么为用户提供他们想要的服务?

企业采购一般商品数量大、订单金额大,还有会涉及到一些梯度折扣、分批付款、代下单等特殊业务流程,我们将结合这些业务流程提供流畅购物体验,使得用户在采购商品的过程中是愉悦并且高效的。

二. 确立设计目标

通过归纳用户群和我们自身的特性,并与业务目标相结合,得出网易严选企业购的设计目标,下文将针对网易严选企业购主页设计进行探讨:

如何确保用户快速知道如何使用网站?

即看一眼就能明白这个网站有什么商品、怎么去购买,也可以快速找到他们想去的地方,比如浏览某一类商品、搜索某个商品、或者去申请企业认证。就像iPhone老用户换iPhone8的时候,不再需要阅读它的说明书就可以下载APP并使用它们。

所以网易严选企业购的网站在设计上需要符合用户习惯与认知:与网易严选及其他主流电商网站,有相似的地方,但也存在一些差异(将在下文细述)。

如何向用户传递品牌特色:“好的生活,没那么贵”?

通过网站清晰的信息架构、使用高质量的商品图片、UI设计突出品质感、页面的通透留白、来体现这种精致、实用的感觉。同时在主页的每个商品下突出制造商信息或是商品描述,作为卖点露出,再次强调了商品的高质量。

设计实战案例!谈谈网易严选企业购的交互设计

△ 列表商品坑位

怎样提高转化率?

转化率主要有两个指标,一是申请企业认证;二是下单采购。

企业认证是企业采购必不可少的一个重要环节,由于企业认证需要填写较多的信息,诸如企业营业执照号等一系列企业相关信息,门槛相对较高,那么如何促进用户主动去完成申请认证呢?

此处在设计上通过利益点去吸引用户一步步完成资料提交与购买:

1.在用户未登录时,会在首页的商品坑位下方展示“登录查看企业折扣 ” 来吸引用户登录;在用户登录后,若未申请企业认证的,会显示 “认证后查看企业折扣 ” ;在通过企业认证后,则显示 “企业专享X折起 ” 。

设计实战案例!谈谈网易严选企业购的交互设计

△ 首页商品坑位

2.在版头右侧的辅助信息模块上的黄色按钮文案:”提交企业信息”也会随着认证状态的改变而变化,而且它与企业购的业务特色介绍放在一起,更能刺激用户去申请认证。

设计实战案例!谈谈网易严选企业购的交互设计

△ 导航-辅助信息模块

在用户通过企业认证后,通过高质量的商品和较高的性价比吸引用户实际下单,就页面的引导来说,从商品详情的设计、首页的场景分类的运营、精选热卖的引导去增加转化率。

三. 体现交互设计的价值

主页的设计对于网站来说至关重要,因为它不仅仅是一个入口,它更是让用户看到自己正在寻找的东西。在主页设计之中,首屏的设计尤为重要,而导航又是首屏里的重要元素之一。

信息架构

在主页的信息架构上来说,网站主页信息架构简洁清晰:网页的头部是导航,其中包括搜索、采购清单、一级类目+经典商品、场景分类。页面中央是banner广告位,往下是各类商品推荐:如精选热卖、场景分类、类目分类;底部是合作企业的露出与严选企业采购网站的相关介绍。

设计实战案例!谈谈网易严选企业购的交互设计

△ 信息架构示意图

网易严选企业购主页头部的导航设计充分展示了网站的结构;中部的banner广告位与各类分类入口,则为业务方保留了较大的扩展性,方便对某些商品进行露出、营销;底部用详细的网易严选业务相关介绍来结束页面,再次强调了品牌性,营造可信赖的安全感。

导航设计

把导航放在标准的位置——页面顶部,可以让我们快速定位、不必费力,标准化的外观让我们更容易把它们与别的东西区分开来。网站导航通过具体化网站的层次结构补偿了这种缺失的空间感,营造出某种位置的感觉。

网易严选企业购的导航条构成为:网站LOGO、类目、和实用工具(搜索、采购清单、在线留言)、分类快速入口、网站特色露出。

设计实战案例!谈谈网易严选企业购的交互设计

△ 导航结构示意图

纵向导航将一级类目和该类目下的典型商品一起展示在最外层,使企业采购人员可以扫一眼就知道这里大致有哪些商品。

横向导航展示场景分类的快捷入口,相当于是为用户提前创建好了适用于不同场景的购物清单,以此引导用户、帮助他们快速找到某些用途的商品。

另外,在头部的搜索入口可以帮助用户快速找到想要寻找的商品,而将一般的购物车命名为采购清单也更贴近业务。其次,辅助信息的模块中露出用户信息与网站特色可以再次强调品牌性。

设计实战案例!谈谈网易严选企业购的交互设计

△  网易严选企业购、网易严选

网易严选企业购在导航的设计上严选主站略有不同,企业采购站需要注重效率,但严选主站的用户是广大消费者,逛的特性更强一些、商品也更多。因此在导航上只展示一级类目,需要hover去触发二级类目的展示,这种渐进式地引导,更能吸引用户去逛网站,去到处看看有什么惊喜,以此增加更多的商品露出与转化。

网易严选的商品主要分为居家、餐厨、配件、服装、洗护、婴童、杂货、饮食、志趣这九大类目,共包含1000余种商品。其中适合企业采购的商品种类相对较少,也是严选企业购的类目导航设计得比较浅的原因之一。

欢迎关注作者「网易UEDC」的微信公众号:

设计实战案例!谈谈网易严选企业购的交互设计

「经验分享!如何打造成功的电商网站」

  • 《新人手册!聊聊关于电商设计的那些事儿》
  • 《这7个趋势,也许是2017年电商用户体验设计的关键》
  • 《超赞!高大上的电商网站案例集合》
  • 《提升电子商务网站易用性的10个注意事项》

设计实战案例!谈谈网易严选企业购的交互设计

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网: UiiiUiii.com是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

相关文章

  • 网易UEDC丨专属于新人设计师的私人推荐书单
  • 网易UEDC:6个方法帮交互设计师与上下游顺畅合作!
  • 腾讯设计案例!QQ炫舞8周年视觉包装全过程回顾
  • 五星好评!网易云音乐Win10 Beta版的设计经验总结
  • 设计师揭秘!超火的故宫HTML 5背后的设计故事
  • 5个电商案例,教你学会优雅高效地给设计师们提修改意见

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/34267/

appARBannerHTML 5HTML5iPhonelogoPSUEDUIUI设计UXWEB书单交互交互设计交互设计师价值体验体验设计使用场景免费分享品牌场景天猫学习导航导航设计工作差异引导微信微信公众号总结按钮搜索入口文案新人方法服务案例注意事项用户用户习惯用户体验用户体验设计电商电商设计电子商务留白登录经验经验分享经验总结网易网易云音乐网站网站设计腾讯视觉视觉效果设计设计师设计案例设计经验购物体验资料转化率运营
赞 (0)
震天下震天下
0
生成海报
埃森哲设计思维成就价值创新:从“外在美”到“内在美”
上一篇 2017-09-18
超全面!聊聊交互设计背后的心理学原理
下一篇 2017-09-25

相关推荐

  • 交互案例:文件下载过程中的细节问题

    细节思考是交互设计师的基本素养 今天给大家分享关于文件下载过程中所需要思考的细节问题 说到文件下载,就是下载前、下载中、下载后三种状态 可是三种状态不代表以上三张页面,还有背后种种的细节思考 首先,交互…

    IxD案例 2017-03-21
  • 抢先看:微信官方发布的微信应用号(小程序)设计规范 交互设计

    抢先看:微信官方发布的微信应用号(小程序)设计规范

    微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的,旨在微信生态类建立有号、高效、一致的用户体验的同时,最大程度顺应和支持各业务需求设计,实现用户与程序的共赢。

    2017-05-18
  • 超越触控的手势交互 IxD案例

    超越触控的手势交互

    手势通常被认为是与屏幕和物体交互的自然方式,我们会谈论在移动设备屏幕上双指缩放地图,还有在电视前挥手切换到下一部电影。但这些手势真的那么自然吗?

    2016-07-18
  • 交互动画设计案例—1688首页动效 IxD案例

    交互动画设计案例—1688首页动效

    随着CSS3和HTML5的发展,越来越多狂拽炫酷叼炸天的动效在网页设计上遍地开花,根据最新的浏览器市场份额报告,IE6的份额已经降到了5.21%,这简直是一个喜大普奔的消息,做动效可以完全不care低端浏览器的时代已经在…

    2015-04-24
  • 交互设计

    机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 2 部分: 深入推荐引擎相关算法 - 协同过滤

    本系列的第一篇为读者概要介绍了推荐引擎,下面几篇文章将深入介绍推荐引擎的相关算法,并帮助读者高效的实现这些算法。 在现今的推荐技术和算法中,最被大家广泛认可和采用的就是基于协同过滤的推荐方法。它以其方…

    2015-12-22
  • AR(增强现实)应用中的交互设计思考 交互设计

    AR(增强现实)应用中的交互设计思考

    作者认为AR未来无论是在C端还是在B端都会存在广泛的应用场景,并能够在许多场景下颠覆用户的使用习惯,解决一些目前无法有效解决的用户需求!比如最近突然火起来的AR游戏《口袋怪物Go》就让大家见识了AR应用的潜力。本文主要和大家探讨一下作为交互设计师,在设计AR应用时需要思考的问题。

    2017-05-22
  • 原创译文 | 面向对象的用户体验设计 交互设计

    原创译文 | 面向对象的用户体验设计

    2012年6月,我在CNN.com工作时,接到了为“选举之夜”进行用户体验设计的任务。接下来的5个月我为那1个晚上贡献了全部精力——但我的成功对选举的胜利方没啥影响。我所关注的是页面的可读性,数据的可视化,可变形的画布,以及在iPhone上怎么实现该死的鼠标悬停弹窗效果。在当时,CNN.com首次上线了响应式体验站点,同时,我也第一次面临响应式体验设计。

    2017-06-01
  • 4款视频app交互设计浅析 交互设计

    4款视频app交互设计浅析

    作者对腾讯视频、爱奇艺、搜狐视频和芒果TV进行界面的整体对比,希望能给各位带来一些收获和启发。

    2017-05-10
  • 转载:昨天就听闻快的与滴滴的恋情,万万没想到今天就不要脸的在一起了。

    原文:阿西博客http://wangguangxi.net.cn/?p=126 今后我要怎么选择出门打车是开滴滴还是快的尼? 又或者这俩货都没了,直接统称一个快滴打车? 不过阿西梳理了几条关于上述两个产品的使用交互体验上的建议 1.打车…

    交互设计 2015-02-14
  • 微信热点

    版权大战后,用户体验将成音乐平台的制胜关键

    自2015年起,国家版权局叫停“独家”版权到今年腾讯、阿里和网易云三家主流音乐APP达成史上最深度版权互授,这场版权之争终于尘埃落定,期间还穿插发生了运营8年的多米音乐停运事件,版权大战背后确实有很多难言之痛,而面向未来,已经叫实了的“后版权时代”,各家APP用什么get到我的点?当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Get Over ItEagles - Hell Freezes Over (Live)一、用户体验...

    2018-03-24
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress