易用之美1

在京东主站移动端的设计中,最重要的核心问题之一就是如何将主站中繁杂的功能简而化之呈现在手机界面中,让用户觉得简单好用,为用户节省时间。
之前的设计中,用户的反馈看上去功能大而全,但是想找到需要的东西却需要仔细看一下。就像超市的货架,商品很多,却很难挑选。

简化出来的情感

让用户想用的时候能轻松找到想要的功能,觉得好用,这属于简单的“结构简化”。其实这不仅针对结构本身内容信息布局、控件及相关“库”的建立也是至关重要的,但是这往往是设计师最容易忽视的关键点。

易用之美3

一、图标

创新性的彩色图标结合。颜色属性快速对应功能,当用户有了一定的色彩感知,再次遇到同类型颜色图标就不用再思考,这是美观之外的功能性意义。

易用之美图标

二、颜色

理性的灰白搭配和感性的红色结合,让电商氛围更加热烈亲和。

易用之美5

几乎所有的app都在说:“简化、再简化”有些的确是简化到了极致,却连找个功能都要摸索半天。其实最好的简化应该是悄无声息的,让用户根本察觉不到在改变。

搜索界面与之前的分类界面进行了合并,同时打平层级化繁为简。

一个产品的好用与否,结构层级至关重要,京东客户端在设计上除了遵循上下左右外,还进行了Z轴的纵深挖掘,将app纵深划分为3个级别:背衬区、内容区、导航区,而且在内容区还运用了卡片式的设计。

1、背衬区

载体用大面积的留白不是平白无故的,白和灰度细线的分割更趋于中性,越到内容区越丰富多彩,当然在整个风格体系中也是如此设定的,给用户一种统一、稳定的感知,使用时会更加理性。

易用之美6

2、内容区

内容区的处理会更加丰富多彩,在遵循统一的基础上,逐步融入围绕红色建立的丰富体系,提升促销热卖的氛围感,使用户一下从理性中跳跃出来,温暖、热闹,冲动消费等感知涌上心头,非常符合用户的使用预期。

易用之美7

3、导航区

导航作为浏览商品的操作窗口,其辨识度及凸显性不容忽视。比如:用户在输入搜索商品名称之后,有可能由于无意识的操作而离开此页面,那么我们需要帮助用户做好这个记录,一单页面需要返回此页面,不需要重复输入。相信一款很少有记忆负担的产品,用户对其青睐度更高,帮助用户记忆对于产品来说可以增强用户粘性,提高工作效率,使体验更加人性和易用。

建立库,极致减法

库的建立必须站在产品统一大局观的前提下进行。接下来从几个层面来说,京东客户端如何做到极致减法。

一、颜色库

京东色彩库遵循一般产品设计的基本规律,引用不超过三种大色系,使得产品保持高度统一。产品基色,京东产品基色仍然遵循其VI的色彩体系,基色调选择红色,利用灰色不同明度的变化,针对不同层级进行划分。红、灰、白的颜色识别体系让整个颜色架构更加根深蒂固,此库的建立对于后续相应主题的设计奠定了基础,让主题化产品不再变得复杂。

易用之美颜色库

二、控件库

控件库是很多产品设计过程中经常讨论的问题,如何能做到控件统一又能高效识别和适配呢?

易用之美控件库

易用之美控件库2

像上图的控件库编码的对应关系,这就是最初说到的纵深层级,其实各个元素是环环相扣的,每个模块的编码都能给出相应的对应关系,这样在不同的设计和开发场景中,视觉就能和开发高效的无缝连接。

在一个产品的设计过程中,减法是设计师普遍推崇的,但是一味减法,产品本身不注重品牌情感的植入产品就会失衡,时间久了用户兴趣就会逐步流失。

JD客户端下拉刷新

在下拉刷新的通用模块中,我们加入了快递员的奔跑动画,达到了出其不意的效果。物流是京东的售后环节中最核心的竞争力,奔跑的快递小哥感染着用户每一次冲满期待的刷新,让购物更加便捷流畅。

从工具化到以易用为中心的设计思路的转变,是建立在用户需求以及生活化环境的前提下,通过深度挖掘用户需求从而创造了更易用更加情感化的交互,为此我们仍在不断探索前行。

喜欢(42) 评论(2) 分享
  1. 为什么控件库中选择状态的底色色值大多是相同的,而描边的色值都有差别,是为了在视觉上平衡吗?依据是什么啊?

  2. JD APP是否可以主动做成动态Icon,将订单的状态(订单已确认-备货中-运输中-派件中)直接在Icon上展示出来。

Leave a Reply to JD用户

© 2020 JDC. All Rights Reserved.