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

相关推荐

  • 如何打造极致用户体验 交互设计

    如何打造极致用户体验

    积少成多的细致用户体验才能打造颠覆性的产品,颠覆性产品不是一日而成,本文主要帮助大家深入思考用户体验。在移动app产品设计中我们追求2秒定律。即2秒内打开app就让用户知道它是谁?它能做什么。而这些设计中的疑问汇总到一起,就是产品的极致体验都来源一个考量指标:用户感知度。

    2017-05-28
  • web图像的常见应用策略与技巧 交互设计

    web图像的常见应用策略与技巧

    本文介绍一些关于响应式图像的适配应用策略,回退原理,SVG的换色技巧,雪碧图的百分比定位计算公式等相关的一些小知识点,目的在于帮助一部分同学快速的理清图像应用思路,以及一些web图像的应用技巧。data-src
    data-srcset
    在加载到的时候更换为
    src
    srcset容器元素的尺寸:elW * elH
    单张图片的尺寸:imgW * imgH
    Sprites图片的尺寸:spritesW * spritesH
    单张图片在Sprites图上的位置:imgPosX, imgPosY点的位置为 (x, y)
    容器上的(x, y)点与容器左上角的距离为 cX, cY
    Sprites图上的(x, y)点与本张图片左上角的距离为 sX, sYelW = imgW, elH = imgH
    cX = sX, cY = sYcX = elW * x
    sX = spritesW * x – imgPosX
    elW * x = spritesW * x – imgPosXx = imgPosX / (spritesW – elW) = imgPosX / (spritesW – imgW)
    y = imgPosY / (spritesH – elH) = imgPosY / (spritesH – imgH)

    2017-05-01
  • [译]可用性之外:使用劝导式模式设计(上) 交互设计

    [译]可用性之外:使用劝导式模式设计(上)

    你可能已经有一个很好的产品。你做了可用性设计,你也拥有了几个经常使用你产品的核心客户。然而,这在激烈的竞争中往往并不突出。你的产品具有高跳出率,只有很少的用户会回到应用中,用户比你期望中更快地抛弃你的产品,一般情况下,用户不会深入所有你的产品所提供的体验。

    2017-05-27
  • 【10min学交互设计精髓】做产品要有风度(9) 从零开始学交互

    【10min学交互设计精髓】做产品要有风度(9)

    图片来源于网络小伙伴萌,有一周没见了,有没有想我呀~~快来看看今天咱们讨论些什么,有任何想法和建议都可以给我留言哦。我们常常谈起情商,人与人的相处方式。作为pm,有没有想过产品和人的相处方式呢?这个课题…

    2017-08-01
  • 微信热点

    两个交互设计鸿沟:评估与执行

    通过每次交互,用户都必须克服理解系统当前状态和了解如何改变系统当前状态的双重挑战。设计师可以通过意识到这些鸿沟并用透明的概念模型来消除这些鸿沟,从而为他们提供支持。上周,我买了一款很棒的新蓝牙耳机 ; 但遗憾的是,我花了一个多小时才把它连接到我的电脑上。尽管耳机手册和电脑支持网站作出了承诺,但耳机并未自动与计算机连接。我在重新阅读说明书之后,检查了耳机和电脑,确保它们都已打开,并且翻查了耳机评论以确认耳机与我的电脑兼容,甚至通过将耳机同...

    2018-03-13
  • 搜狐交互设计师:我常用的一套交互设计工具 交互设计

    搜狐交互设计师:我常用的一套交互设计工具

    刚开始接触交互设计往往会面临自己的想法找不到合适的方法输出。所以完成基本工作同时也在积极寻找、学习适合自己又和工作环境相匹配的工具。与团队成员配合的时候没有人会在意你是用什么工具,成员们只想看到设计师产出的输出物。这个时候针对不同任务类型和团队大小找到合适的工具可以让设计师迅速输出团队想要的结果输出物,事半功倍。

    2017-05-25
  • 用户体验设计中的功能动效 交互设计

    用户体验设计中的功能动效

    作者:Amit Daliot 出处: http://www.smashingmagazine.com/2015/05/functional-ux-design-animations/ 一个优秀的用户体验设计师可以很容易的解释设计概念中每个决策背后的逻辑。通常包括信息架构,页面内容的层…

    2015-11-08
  • 微信热点

    「Sketch」在Sketch中创建设计系统 | 第一章

    原文作者:Marc Andrew原文来自:Medium阅读全文大概需要10分钟相信大家都做过自己的设计规范,无论在个人项目还是团队项目中,设计规范的重要性不言自明,但很多人(不仅是初级UI设计师,也包括很多工作多年的UI设计师们)都有很多困惑,比如,做好的设计规范如何维护?设计规范到底能给项目带来哪些更具体的帮助?在很多人看来似乎设计规范成为了一个“无用的”标配,很多设计规范慢慢被封尘在项目文档中的某个角落里,从此不见天日。实际上我们整...

    2018-04-19
  • 微信热点

    UED专访 | 众建筑:未来城的边缘

    📌 编辑 | 裴盛📌 采访| 杨紫惺 李思远 李佳琪📌 视频 | 裴盛EXCLUSIVE INTERVIEWUED × 众建筑玻璃框景中,映出木构的筋骨红砖青瓦间,闪烁金属的光芒古老与现代在这座“新生”四合院中交织年轻的的思想碰撞出新时代的活力观察生活、测试构想、生产建造踏进“众建筑”,寻觅空间的更多可能点击观看专访视频UED × 众建筑专访视频 ©UED1“三人成“众”“众建筑”,既是对其由三位合伙人共同创立的直观描绘,更符号化地表达...

    2018-02-07
  • 微信热点

    为增强产品的用户体验,UI设计师会做哪些工作

    近年来,人们越来越多地谈及用户体验,甚至将其视为互联网产品赢得市场的最关键因素。作为UI设计师,我们战斗在用户体验设计的一线,那么在实际工作中我们会通过哪些工作来提升产品的体验呢?下文给出了几点关于实际工作中提升产品用户体验的思考。我们在设计一个程序或者系统的时候,前提是保证产品定位及有目标用户群,保证产品是有用的,能连接不同的节点产生价值。如果一个程序没有用,那么对用户来讲就没有下载、使用的必要了。而当程序有用了之后,如果用户需要付出...

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

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