首页

从垃圾桶到“多入口”,谈谈B端设计思考

seo达人


好的设计,都不会是“无缘无故”,它一定是从满足某种实际需求而出发,向更高级的目标前进。作者从垃圾桶的设计开始,将思绪延展到界面的功能入口,带大家一起思考一些B端的设计逻辑。

 

最近在一次大扫除当中,不小心把厨房里的垃圾桶给摔坏了,于是乎想在网上选购一个合适的垃圾桶,而回顾了垃圾桶的选购经历,或许它是一个很好的例子,让大家了解 多入口 的设计思考。

首先,究竟厨房需要是什么样的垃圾桶?我陷入了嘀咕,因为我自己也不太明白,于是我在淘宝上看到了许多不同类型的垃圾桶

把它们总结了一下,基本上可以分为两类:直筒式、脚踏式:

图片

 

直筒式:

采取顶部开放的结构,使用者可以直接将垃圾扔到桶里。如果不够有趣?你还可以将垃圾桶看作“篮筐”进行投篮。

直筒式顶部开放的结构,确实能够给我们扔垃圾带来不少便利,但同时也会暴露一些问题,就是蚊虫

因为 厨房里的垃圾桶会有很多 餐厨垃圾,也因此会滋生很多蚊虫,特别是在一些剩下的水果核上,会留下很多蚊虫。

 

脚踏式:

顶部为盖板,当需要扔垃圾时,使用者需要用脚踏住盖板,并将其抬起。这种方式就能够避免厨房餐厨垃圾所滋生出来的蚊虫

但问题又来了,在做菜时,扔垃圾通常十分频繁,每一次都需要脚踏显然效率太低。

那能否既能脚踏又能随手就扔呢?

面对这一问题,我发现了一个新式垃圾桶:

图片

它在为用户设计时,考虑到了两种不同的模式,因而将两种入口进行巧妙的融合。

通过顶部面板的开关,可以将垃圾桶设定为开启或者关闭,能够让垃圾桶在你想要的时候保持开启的状态,这样就能满足在一小段时间内的频繁扔垃圾的需求。同时又能提供脚踏的形式,将垃圾桶盖完整抬起,这样的垃圾桶既可以脚踏也可以直接扔。

而在我们设计B端产品时,同样会有 “多入口”的情况。

比如在 纷享销客 的设计当中,新建客户有着两个不同的入口:

 

入口一:首页 – 客户及商机管理 – 客户 – 新建

这是新建客户最为常规的入口,它就类似垃圾桶的直筒式。通过表格页操作的新建,让用户进行表单的填写,进而新增客户。

图片

 

入口二:首页 – 新建 – 客户

这是 纷享销客 的一个特别设计,它在导航菜单处设置一个全局的新建入口,当用户在系统的任意页面,都可以进行新建。

大家可以跟我一起思考一下,我们如果是一个销售人员,在我的工作当中,会去经常新建客户、跟进记录等,那通过一个全局的新建入口,能帮助我们更快的进行操作。这便是纷享销客的第二个新建入口。

图片

 

我再给大家举一个简单例子,同样我们在纷享销客当中,表格当中的筛选同样也是有着两个不同的入口:常规筛选与表头筛选(大家可以看我B端设计指南筛选的文章):

常规筛选:

用于表格当中一般和许多操作并排放置,算是一个较为基础的入口

表头筛选:

点击过后同样也是进入到筛选弹窗,但不同的是,表头筛选点击过后,会将表格的值带入到筛选当中,来实现筛选+选值这样的两步操作。

而为什么会有两种不同的入口,我们回过头来想想,就像我文章开头说到的垃圾桶一样,两种不同的入口,其实是为了方便我在某一个场景下进行使用(比如垃圾桶的 持续丢垃圾与开关垃圾桶盖;纷享销客  新建操作当中的 常规新建与快捷新建;)

而它不正是因为用户在不同的场景需求下,所设计的形式不同。

在B端产品当中,不同场景的需求其实经常存在,但为什么没有暴露出来?

其实是因为用户在B端产品当中,本身用户就是处于弱势群体,他们都是服从于上级的安排,而设计师不会分析,就会选择最平庸的方式去处理需求。我们往往需要基于场景去思考问题,而场景如何理解?

之后有机会再和大家展开聊聊~

 

原文链接:CE青年(公众号)

作者:CE青年


转载请注明:学UI网》从垃圾桶到“多入口”,谈谈B端设计思考

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷   作者:陈皮Celia 

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


围绕应用生命周期的编排设计

鹤鹤

什么是围绕应用生命周期的编排设计

围绕应用生命周期的编排设计是一种企业级技术产品设计策略。

它的核心是要解决设计师很难上手企业级技术产品,且更加难以找到体验设计机会点的问题。我们是一群工作在企业级技术产品领域里的设计师,同时也是掘金者,这篇分享即是我们在企业级技术产品领域里探索的一些方法总结。

 


当设计遇上技术

工作现状

在我们日常工作中,和技术产品 PD 聊需求是一件非常痛苦的事情,他们讲的每一个字都认识,但是组合起来就不知道是干什么的了,因此设计师也很难去想象用户是怎么在用这些功能。

因此相较于 C 端产品来说,B 端的技术产品目前还处于基本可用的状态,更谈不上什么体验了。

 

分析原因

究其原因,我们总结有三点:

① 这些产品大多数都是由技术来主导,功能优先

② 设计在整个流程中都处于非常被动的状态

③ 设计与技术之间存在一定的专业壁垒,技术往往比较抽象难以理解

同时,我们的用户并不是客户,用户不能根据自己的意愿喜好选择产品。用户隐藏在企业内部,设计师日常中很难接触到真实用户。另一方面,用户的技术专业背景与设计师的专业存在鸿沟,这使得设计师对用户需求的理解也不够深,所以说在这种环境隔离和语境不通的状态下,设计师其实难以和用户构建同理心。

 

能做的事

在这种狭小的设计发挥空间里,我们能做什么呢?

其实我们设计师有明显的优点:

比较擅长找规律找方法,有破局意识,从而能够发现设计的机会点。


 

企业级技术产品设计探索

发现规律

所以我们回过头看一下之前做过的这些产品和功能,从它们的作用对象、出现时间、用户目标、用户行为这四个维度对他们进行归纳和总结。

我们发现这些产品具有很强的阶段性,通过不同的产品来支撑各个阶段下的用户目标。用户通过产品的功能来实现各种编排动作,例如对应用本身代码的编排、对应用依赖的底层资源的编排,从而支撑用户应用的生命周期。

因此企业级技术产品具有以下四个特点:

  • 阶段性

  • 驱动性

  • 流程性

  • 抽象性


提出策略-围绕应用生命周期的编排设计

首先我们要针对这四个特性进行一轮判断,了解这个产品的场景,场景下对应的角色,每个角色执行的是单线还是多线任务流,以及任务流是由哪些功能支撑。经过这层判断之后再定位具体问题:

① 每个阶段的目标是什么

② 阶段下每个角色各自的小目标又是什么

③ 任务要对应用还是应用相关的内容进行编排

④ 产品的功能是如何实现的


当找到这些问题的答案以后,我们就可以对产品的上下游场景进行编排,明确各阶段的侧重以及上下游场景的限制条件;对角色进行权限分配以及协作触点的确定;将任务流从起点到过程再到结果进行梳理;以及最后通过对底层技术的理解,合理编排产品信息架构和界面内容。

为了能够更加高效的完成以上信息的收集和处理,我们沉淀了 CMTD 四个小工具。

 

策略详解

C 是 Collaboration,协同场景,主要回答四个问题:When、What、Who、Where。

① When:用以明确产品所处阶段以及上下游阶段,以全链路的视角看用户的完整使用场景,因为产品往往可能只是解决用户部分场景的问题

② What:定义当前场景的阶段目标以及要做的事情

③ Who:当前阶段的事情由哪些角色参与

④ Where:这些角色在线上或线下是如何配合协作的

例如我们要做一个技术产品,通过 Collaboration,我们知道它覆盖了发布阶段、日常运维阶段,目的是把经过测试的应用发布上线并进行日常维护,主要是运维人员配合研发人员和发布经理完成线上的问题排查和线下配置文档的交接,我们就能比较清楚的知道我们要做的是一个运维平台。

 

M 是 multi-role,多角色,主要用以分析产品是由哪些角色共同协同驱动的。

与 C 端产品不同的是,我们除了对核心角色的自然人属性进行洞察,还要定义清楚该角色的目标有哪些,目标对应的任务流以及支撑的功能和权限。并且企业级技术产品往往都不是一个角色就能完全执行完成,所以该角色的上下游角色也要摸清之间的协作触点在哪里。

多角色的信息我们可以通过在客户现场或者用户访谈来收集,并沉淀为用户角色库。

基于收集来的用户信息,来定义我们产品的角色:

 

T 是 Task flow,任务流。任务流一定是基于一个用户角色的某个目标,来定义任务的起点-过程-结果。

起点就是界面上用户的操作入口,过程需要包含触发操作、自操作、条件判断以及是否有协作角色参与进来,在结果处除了提供结果反馈还要提供下一任务的去向入口,帮助用户把流程串联起来。

任务流可以借助现有流程的走查或按照 T 模型来梳理任务流信息,从而帮助我们更好的定义一条用户的任务流是如何执行的。

例如我们要做的运维平台的产品,核心角色是运维,他其中的一个目标是为应用创建工作空间。按照 T 模型,我们可以很方便的将这条任务流定义出来。

 

D 是 deep ,深化。主要从两个维度展开:技术架构和逻辑原理。这是两个在做技术产品的过程中经常会接触到的两个概念。

在分析技术架构时,我们可以重点关注两个点:看由哪些功能模块构成,这些功能之间的静态结构,是包含关系还是依赖关系。分析逻辑原理,一是了解这些功能产生的实例,是一对一的关系还是一对多的关系,信息或流量在这些功能模块之间如何流转。通过这些分析,我们可以把掌握的功能特征和逻辑规律。

举例来说,运维平台的核心角色运维人员需要为应用创建工作空间,按照梳理出的任务流,用户需要经过3次跳转7步完成,那这个是否还有优化空间呢?

我们可以从 Deep 深化的角度入手,看这条任务流是由哪几块功能支撑的。例如工作空间内包含网络和安全组,安全组内包含负载均衡和虚拟机。就像我们了解汽车的制动装置,看到装置内包含气室,气室内包含活塞体、密封垫,密封垫连接在推杆上。

再从逻辑原理图入口,了解流量会先按照工作空间进行隔离,从工作空间走专有网络还是经典网络,网络将流量分发到安全组,安全组里的负载均衡会负责调配流量到虚拟机。他们之间层层递进互相依赖。就像汽油从油箱到达制动装置,在发动机里和空气一起被压缩燃烧后能量转化转送到动力装置一样。

通过上面的分析我们了解到这几个功能其实是紧密关联的,用户没有必要分散到不同的地方进行添加和创建,完全可以借助流程表单和抽屉把他们串联在一起。

因此我们找到优化体验的机会点,把之前需要三次跳转7步完成的任务流,优化到1个入口5步完成。

 


总结回顾

企业级技术产品有四个特性:阶段性、驱动性、流程性、抽象性。通过 C、M、T、D 四个小工具来帮助我们收集和归纳信息,实现对上下游场景的编排、角色的定义、任务流的编排以及界面的编排。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷  作者:Ant_Design

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


B端产品布局设计规范

鹤鹤

一、布局原则:古登堡、尼尔森

二、结合B端产品和页面分析

三、大厂布局设计规范分析

四、总结

一、布局原则

布局设计在设计的每个领域都有涉及,这里说的不是设计中的布局四原则:亲密、对齐、重复、对比(专业术语:格式塔原则),这是平面设计中常用的布局方式,我的理解就是排版。但B端的布局设计是不同的,每个企业或者产品的设计规范有各自不同的依据。

B端页面布局最常用的原则我见过有两种:古登堡原则和尼尔森F型视觉模型。下面是网上找的图:

(1-侵权提删:古登堡原则)

古登堡原则:阅读引力是从上到下,从左到右,呈现Z字形移动,而起点和终点会作为重点视觉记忆区,中间过程会轻扫作为次要视觉记忆区。左上和右下是用户会比较容易关注和注意到的地方。

 

(2-侵权提删:尼尔森F模型)

尼尔森F模型:我们在第一次观看页面时,视线会呈 F的形状关注页面。先从顶部开始从左到右水平移动,目光再下移开始从左到右观察但是长度会相对短些,以较短的长度向下扫视,形成一个 F形状。

这两个原则都是从用户视觉角度分析,在按需带入产品页面设计的。没法单纯的说哪个对哪个错,或者说哪个更好。因为要结合产品属性、信息结构、及用户心理等因素。

二、结合产品和页面属性分析

我们公司产品的列表页面是参考古登堡原则制定的布局设计规范。这是一个运维产品(我们通常称为SaaS:软件即服务)-列表页面的模板,可以看到大部分内容被表格占据,且表格中的内容是相似的。通过与腾讯蓝鲸团队的沟通,最终确定这种布局的页面用户视角浏览流程是“Z”型的。

主要操作按钮在左侧的第一视角区,通常以“新建”等主要按钮为主、“导出”或“批量操作”等次要按钮为辅一同摆放。因为列表通常是某个任务的罗列,会把新建的入口也放在一起,一是为了方便用户快速找到新建任务入口,二是为了让信息结构更聚拢。强休息区放搜索框。在不同场景下,按钮和搜索框位置要视需求确定位置。在我们公司的大部分产品场景下,按钮是在左侧。最终落脚点是在操作字段(表头属性,技术角度称为字段)。

 

弹窗的布局也是类似的,很容易可以判断出标题和确定、取消按钮是两个视角落脚点。

 

当然不是所有页面都遵循古登堡原则,像下面的表单页面就是使用F模型。因为最主要信息标题都在左侧,且信息流是集中往下走,并不分散也不需要横向跨度很大。所以使用尼尔森F模型就可以支持布局走势。

 

三、大厂布局设计规范

这里以腾讯Magic Box VUE组件库和阿里AntDesign来分析我个人的理解:

 

这是从antdesign官网找到的信息复杂度和相关性模型,选用相应的信息呈现方式,选用合理的布局方案来承载详情页的内容。这应该是阿里内部自己建立的布局规范,既不符合古登堡原则,也不适应尼尔森F模型。但从地下不同页面内容的分布来看,我觉得是把这两种模型结合了。请看下图:

 

古登堡原则注重左上角和右下角的内容。尼尔森F模型是只注重左侧内容,这种布局方式通常是信息量比较大时用的比较多。我们把页面的内容拆开看就可以分析出,每个模块也是可以分成不同模型的结合。

 

腾讯Magic Box的布局规范就是前面我们公司用的是一样的,就不多分析了。

四、总结

通常:信息流页面使用尼尔森F模型。需要用户操作页面的则常常把古登堡和F模型结合使用,具体使用哪种看两个:1、用户在页面的常用操作是什么,2、你想或者说是产品想传递给用户的信息是什么。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷  作者:lq934731638

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



快速提升B端图表用户体验的15小细节

涛涛

图表作为一个使用频率不高却很重要的组件,让设计者们操碎了心。看着自己设计的图表,总觉得有哪里不好,但又说不上来。本文作者总结了快速提升B端图表用户体验的15小细节,一起来看一下吧。

B端界面中使用频率不高,但却无比重要的组件——图表,可谓是让设计者们烦透了心。图表设计起来不难,但想要设计好,也是需要下一番功夫的。

很多小伙伴问我,说:每次在设计图表的时候,总是找不出自己哪里设计的不好,但看着自己设计的图表,又没有那么满意,该如何办呢?今天,我们就来一起了解下B端的图表,挖掘一些设计者们平时未曾捕捉到的细节,获得这些细节,将从细微之处提升产品的用户体验。

本文将从以下五个部分来展开:

  1. 什么是图表
  2. 图表的优势
  3. 开源图表库有哪些
  4. 15个图表小细节
  5. 总结

一、什么是图表

百度百科解释:“图表,Microsoft Office用语,泛指在屏幕中显示的,可直观展示统计信息属性(时间性,数量性等),对知识挖掘和信息直观生动感受起关键作用的图形结构,是一种很好的将对象属性数据直观,形象的‘可视化’的手段。”

根据百度百科的解释,我们来做一个”数据图表化“的小推导。我从网站找了一段描述低码的数据(数据来源艾瑞咨询,并做了一些小修改),如下:

“2016年开始低代码概念开始从国内逐渐兴起,当年低代码相关产品投融资事件达10起,亿元以上融资数量2起,至2020年中国低代码市场共有59起投融资事件,其中亿元以上融资共有13起。2017年融资事件11起,亿元以上融资3起;2018年融资事件12起,亿元以上融资2起;2019年融资事件12起,亿元以上融资3起;2020年融资事件14起,亿元以上融资3起。随着企业对系统敏捷性、易用性需求的增加和对业务部门低代码接受度的提升,市场会迎来新的发展契机,短期内投融资热度将持续增长。”

虽然以上的文字已经做了一些简练,但阅读时候不免觉得有些绕,不能很直观的理解数据,且要记住关键数据还是较为困难的。

下面,我们对以上文字进行再次梳理,适当分段,进行结构化排版:

“2016年开始低代码概念开始从国内逐渐兴起,当年低代码相关产品投融资事件达10起,亿元以上融资数量2起。

至2020年中国低代码市场共有59起投融资事件,其中亿元以上融资共有13起。

2017年融资事件11起,亿元以上融资3起;

2018年融资事件12起,亿元以上融资2起;

2019年融资事件12起,亿元以上融资3起;

2020年融资事件14起,亿元以上融资3起。

随着企业对系统敏捷性、易用性需求的增加和对业务部门低代码接受度的提升,市场会迎来新的发展契机,短期内投融资热度将持续增长。”

通过分段描述,以上段落显得清楚了很多,但是例如”融资事件、亿元以上融资“等词语还是反复出现,整体来说不够简练。

那么,我们再将以上数据进行表格化展示来看看,如下:

我们可以发现,表格的展现形式比分段的结构化文本又清晰了太多,使得数据展示非常直观。不仅用户可以看清楚数据本身,还可以对比数据,假如表格再设计的人性化一些,可以将最大值进行重点标注(根据业务需要对数据进行差异化标注)。

不过表格也有劣势,无法展现数据随时间变化的趋势等问题。我们再次仔细阅读上述数据,可以梳理出如下图表。

上图将2016年到2020年的融资事件总数进行了重点处理,亿元以上融资事件数量进行了次要处理。并且用柱状图叠加折线图的图表表达了2016年到2020年低码融资事件数量的趋势情况。

二、图表的优势

综上所述我们可以发现,从通常意义上来说,图表优于表格,表格优于结构化文本,结构化文本优于普通段落。那我们来看看图表有哪些优势。

1. 针对性

一图一类型是图表的特点,例如柱状图是用来比较同一指标下不同对象情况的图表;饼图是展现部分与部分之间,及部分与整体之间占比的情况。我们在使用图表时,需要先对数据进行判断,再选择合适的图表进行展现。

2. 直观性

图表与文字相比,在数据的表现上非常直观。不仅可以让用户一目了然地看到数据,还能让用户将数据进行对比,从而发现问题,定位原因,解决问题。

3. 混合与拓展性

根据数据的属性,图表是可以进行混搭与拓展使用的。混搭是指图表和图表可以拼搭使用,例如折线图与柱状图经常合体使用。拓展性是指根据基础图表可以拓展出一系列个性化图标。例如堆叠柱状图是由基础柱状图衍生出来的。

三、开源图表库

目前开源的图标库以下几种:

1. AntV G2

在AntV的官网上,是这么描述G2的:“一套面向常规统计图表,以数据驱动的高交互可视化图形语法,具有高度的易用性和扩展性。使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。”

2. ECharts

百度百科:“ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。ECharts最初由百度团队开源,并于2018年初捐赠给Apache基金会,成为ASF孵化级项目。”

3. High Charts

百度百科:“Highcharts 是一个用纯JavaScript编写的一个图表库,能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。”

4. Chart.js

Chart.js是一个面向设计人员和开发人员的简单而灵活的 JavaScript 图表。以下是Chart.js的文档链接。

https://chartjs.bootcss.com/docs/

5. Chartist.js

Chartist.js 是一个面向设计人员和开发人员的简单的响应式图表,是前端图表生成器。

目前来说B端产品使用最广泛的图标库是AntV G2和ECharts。

四、15个图表小细节

在大致了解了图表以后,笔者总结了基于自身经验、团队经验与行业经验的图表小技巧。希望这些小技巧能润物细无声地影响我们的设计者,从而为B端提升一点小体验。

1. 折线图2px

通常在B端中,我们用到线,以1px居多。但在折线图中,我们经过反复推敲,发现2px线优于1px线。首先,2px线条显得有力而清晰;其次,在线条多的时候,便于分辨。

2. 柱状图间距

柱状图中柱子与柱子之间的间距与柱子的宽度一致就好,且最左边和最右边柱子距离两边的间距为柱子的一半。如下图所示,若柱子的宽度为X,则柱子与柱子间的间距为X,两边柱子距离各自向外间距为X/2。

3. 刻度值

图表上的刻度值递增数值根据实际情况需要做适当约束,如最大数值为150,就不适合刻度值上线标记为1000。其次,若业务数据一直处于动态变化中,则图表Y轴可以设置成动态。

4. 饼图文字显示

在饼图分类较少时候,可以将文字写在饼图上,但当分类较多时候,文字适合写在饼图外。

5. 饼图块排列

饼图块排列也是个值得考究的事情,通常来说,饼图块呈顺时针方向旋转,且以12点钟方向为起点,块面从大到小布局,若有“其他”模块,则放置在最后。

6. 标签位置

通常标签都会放在图表的上方区域,但这并不是一成不变的规则,例如当折线图线较多的时候,可以考虑将标签直接跟在折线的尾部。同时可以做一些交互效果,鼠标点击标签可以让线弱化或者显示。

7. 图表色彩

图表在配色上要使用区分度大的颜色,不要为了好看而使用相邻的色彩,这会导致图表的可读性大大降低。如有条件,建议在色彩上考虑无障碍视觉。

8. 同类色使用

属于同一色相,不同明度和饱和度的颜色,也是有使用空间的,通常表示同一对象的梯度变化。

9. 显示重点

当图表上数据及其多,且产品团队压根没打算将数据量减少时,我们可以考虑展示重点数据(系统默认展示推荐重点,用户可以自己选择他所需的重点),弱化其他数据。

10. 标题的妙用

标题不仅仅是用来呈现普通描述的,在特殊场景下,标题描述可以稍微进行变化,从而达到直观表述图表核心含义的目标。

11. 时间周期太长

某些业务的数据统计需要跨很长的时间周期,这时,图表无法满足如此长周期的时间展示需求,我们不要慌,可以通过以下几种方式去解决。

11.1 添加缩略滑块

给图表添加缩略滑块,可以通过拖拽滑块了查看某段时间范围的数据。滑块拉拽的越大,可以看到的时间范围越大,但注意,会有极限值。

11.2 添加滑动滑块

给图表添加滑动滑块,可以通过滑动一个固定大小的滑块,查看某短时间范围的数据。它与缩略滑块的区别在于,滑动滑块每次看到的时间段是一致的。

11.3 区块放大镜

如果图表的呈现就是希望时间周期显示完整,那么当时间周期较长的时候,颗粒度可以展示的稍微粗一些,不用太细,例如无需2月1日、2月2日、2月3日、2月4日、…连续展示,只要2月1日、3月1日、4月1日、5月1日、…间隔展示即可。在交互上,鼠标移入图表区不断进行某时间周期数据框选(即放大),就可以让框选区数据不断清晰。日K线常用此类方法去做。

12. 时间轴显示

当时间轴日期跨越在当年时,无需每个时间点都带上年份;而当跨年时,可以带上年份,这样可以保证时间轴显示更简单,不拥挤。

13. 等宽字体

若图表中会采用表格去协助查看某类数据的明细,联动展示,那么表格中的字体建议使用等宽字体,等宽字体方便用户用视觉来比较大小。

14. 数据归类

指标大盘上放置着各类型图表数据,建议设计者们对数据的进行归类整理,属于一类的数据临近展示,方便用户连续性查看相关数据。

15. 静态与动态图表

图表分为静态和动态图表,当业务呈现较为简单时,使用静态图表就好。而当业务复杂,一张图表难以表达细节时,就要考虑动态图表去呈现了,“鼠标交互,数据扩展和下钻”是动态图表的特征。

五 、总结

图表的小细节远远不止文中提到的这15种,还有好多好多。由于每时每刻都有设计者因为产品需求创造出新的好用的图表类型,图表成为了B端可持续探索的一片海洋。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:人人都是产品经理  作者:知果

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




设计方法 | 行为设计学如何落地到项目?

seo达人



在我们的日常工作中,对如何吸引用户、引导用户、留住用户这些问题,经常会使用一些心理学的方法。本次介绍的 “行为设计” 便是从心理学衍生出来的一种商业上解决引导、转化、留存等问题的方法和策略。

 

01.什么是行为设计学?

动机-用户有动机或意愿想要去达成一件事;

能力-用户要能做的到这件事;

触发-适当的提醒他要做这件事;

简单来说就是人的行为是由动机、能力和触发条件这三要素组成,只有当三个要素同时都满足了,行为才会发生。

图片

 

02.结合业务

结合上述行为设计学,分析如何与业务的结合!本次项目是58本地服务的业务升级,从提供服务信息拓展到为用户提供交易全流程的多元化服务平台,是58本地服务从工具型到服务型的一个转变。当然,进入到58本地服务的用户其实都是带有明显动机或者意愿来寻找服务的,那么第一先驱条件有了,接下来就是我们如何去用户进行能力的提升从而制造有效触发事件。

图片

 

03.分析调研

图片

在项目开始之初,针对本地服务在线化整体进行了体验地图完善,进行了用户调研、问题及数据分析。

图片

针对问题及流程进行了拆解,根据上图所述四个环节,我们将在每个环节当中也进行了问题的整理,寻找设计机会点:
 

· 挑选商家

信息堆积混乱、品牌辨识度弱、缺失参考信息、挑选流程繁琐;

· 下单预约

修改成本太高、服务范围模糊、担心临时加价,商家沟通标准;

· 订单追踪

话多推销产品、人员上门迟到、故意拖延加价、维权申诉困难;

· 服务完成

缺失检验标准、导致家具损伤、平台监管薄弱、缺失客服回访;

 

04.设计策略

综上所述,我们给出一些结论,需要从四环节入手,结合行为设计学能力模型来进行每个环节的策略制定。

图片

· 增强动机

专业感-平台专业性

辅助决策-商家优势;权益刺激

 

· 降低门槛

友好度-认知门槛;操作成本

引导性-用户教育

 

· 减少顾虑

信任感-品牌背书;安全透传

掌控感-策略可控;主动权

 
遵循这个设计策略!我们产出了设计方案

 

05.设计推导

· 挑选商家-清洗聚焦;辅助决策

信息层级梳理,针对整体节奏进行优化使得页面更清晰聚焦以及内容的丰富

价格结合销量及优惠信息外露,提炼商家服务亮点并为优质商家打标,辅助用户决策

图片

 

改版完成后,发现数据效果并不是很理想。在经过分析后得知是屏效问题,在保留数据向上的类目后,又继而针对数据不太理想的服务类目屏效问题进行了方案的产出。在解决了屏效问题后,数据有了明显的好转。

图片

 

· 下单预约-提升认知;降低成本

在下单预约环节提升用户认知,进行品牌背书的透传,提升用户安全感;选择服务及价格等信息前置,降低在订单预约页的用户跳失率。对用户进行适当的教育引导来达到提升用户的能力目的。

图片

 

· 订单追踪-实时掌握;提高完单

在订单追踪环节加强维权申诉入口,给予用户主动权及掌控感!并在此环节进行权益刺激,来达到提升用户完单率的目的。并针对订单取消率偏高的问题进行了策略性的挽留,透传平台专业性及保障。

图片

 

· 服务完成-平台保障;流畅闭环

在服务完成环节建立闭环反馈机制。在全链路下单流程形成流程闭环,进行数据分析并建立用户画像,为后续的定向推荐及商家服务库存能力打好基础。

图片

 

· 赋能商家-动机;能力;触发器

整个流程中的供给关系还有很重要的一个环节就是商家,在引导扩充商家入驻的同时,商家的体验及功能搭建对于整个流程当中的重要性也是不言而喻的,因此我们使用行为能力模型的设计方法对商家做了大量的功能搭建及体验优化。

图片

 

· 设计打磨

在整个流程当中,我们共计进行了各种版本的测试37个版本,通过设计手法例如字重、颜色、图片比例、根据业务特性区别设计等设计方法来进行不同业务转化效果验证。

图片

 

06.数据表现

最终我们在数据方面也有了相对喜人的收获,单量提升了3倍以上,用户的下单支付率、商家接单率、用户的完单率等也有了很大的提升!

 

07.迭代机制

我们在设计初期,就有一套完善的设计流程和在迭代机制,我们第一版是一次完整的流程,但在迭代后期,我们可以根据发现的问题建立体验问题池,根据问题大小决定我们从哪一步开始改善体验问题。

图片

 

08.项目收获

图片

经过此次项目,通过全局视野摆脱设计本身去看业务, 拓宽思维的广度。从之前单一的设计思维-产品思维-用户思维-商户思维-盈利模式-平台关联的转变。使现有本地服务平台从工具型转变为服务型,从一次使用到多次使用,增强用户粘性,紧跟集团产业化步伐。


原文地址:58UXD(公众号)

作者:环铁艺术家

转载请注明:学UI网》设计方法 | 行为设计学如何落地到项目?

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷   作者:陈皮Celia 

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


颜色的性格

涛涛

颜色的探索及应用场景


今天呢想和大家分享我积累的一些关于色彩这一方面的知识。

提高自身和大伙对色彩层次上的认识,更好的融入到自身的产品当中去和实际生活中去。


1.白色

1.白色象征着纯洁、纯净、善良、朴素、正直、信任的颜色。
2.在西方特别是欧美,白色是结婚礼服的主要色彩,表示爱情的纯洁与坚贞(也有说是上帝最喜欢的颜色)
3.白色显得非常的自然和谐,不会显得突兀,所以白色一般在app中用的非常的广泛。



“ONE一个”一款文艺生活类App,主色调为白色,整个产品的气质很纯净、朴素,整个产品诠释出一种文艺的气息。


2.红色

1.红色表示喜庆、爱、勇气、热情、热血、危险、男子气概的颜色。
2.红色在可见光谱中光波频率最低,波长最长,衍射能力最强,所以也最为醒目,给人视觉上一种迫近感和扩张感。红色也同时代表着危险与警示。

3.在中国红色传统上表示喜庆,比如在婚礼上和春节都喜欢用红色来装饰。

1.红板报的主色调为红色,硬朗的设计风格配上黑色,整体给人传达科技、严肃、引人注目的感觉。
2.值得一提的是红板报的交互体验是类似于纸质书翻页效果,结合了红板报本身的产品特性。


3.黄色

1.黄色是个暖色调,充满希望、信心、温暖的颜色。黄色的明度极高,非常的引人注目。同时黄色有大自然、阳光、秋天的涵义。
2.黄色代表着性格上的欢快,愉悦,也是富有正能量的颜色。
3.中国封建朝代从宋朝以后,明黄是皇帝专用颜色,如“以黄为贵”。代表着尊贵,例如很多产品的VIP都以黄色为主,象征尊贵。


Nike Run Club主色调以黄色为主,选用了明度和纯度很高的黄色,页面充满活力的颜色,结合粗壮、倾斜的数字字体,很适合该产品运动的调性。


4.橙色

1.橙色是欢快、活泼、热情、阳光、健康的色彩。同时橙色是红色与黄色的混合颜色,也象征着温暖与活力。
2.在电商领域有很多地方用到橙色,为了激发用户的购物欲望。例如我们常见的淘宝就是用的橙色。
3.橙色在西方传统中,万圣节的颜色,南瓜灯就是利用橙色来制作的。


小米商城主色为橙色,也是小米的品牌色,给人感觉到温暖、活泼的颜色,同时橙色也可以激发用户的购物欲望。


5.绿色

1.绿色代表意义为清新、希望、安全、平静、舒适、生命、和平、宁静、自然。在绿色环境中锻炼能提高情绪、活力和愉悦感。
2.同时红绿灯,绿色代表着通过,所以应用在APP中,绿色也代表着成功通过。
3.在西方国家绿色代表着股价上升和经济增长的意思,在东亚部分国家股票市场则相反。


京东到家的主色以绿色为主,向用户传递新鲜、健康、绿色的生活理念,同时绿色给人舒适安全的感受,非常符合京东到家的产品气质。

6.

1.
蓝色通常让人联想到海洋、天空、湖水、宇宙,所以蓝色一般代表着冷静、科技、未来、纯净。

2.蓝色非常的通用,兼容性很强,像许多科技公司都运用了蓝色,例如腾讯、Facebook、Twitter等。

1.36氪是提供科技、创业、投资头条新闻类的app,在它的app当中会发现蓝色作为主色,非常适合他们的产品调性。

2.选择的蓝色整体显得年轻、鲜明、具有科技感,同时每一个图标、背景都具有蓝色的色相在里面,非常的精致与独特。

7.

1.
紫色代表着富贵、华贵、优雅、柔美、浪漫、梦幻、魔法。

2.紫色是由温暖的红色和冷静的蓝色化合而成,是极佳的刺激色。在一些游戏中紫色也会利用在魔法中,代表魔力值和魔攻等属性。

紫色的梦充满了浪漫和梦幻也是符合豆蔻年华的少女的颜色,代表着魅力。例如一些相机软件也运用了紫色在里面。

3.例如今年出了iPhone12「香芋紫」成功吸引不少女孩子的目光。



劲舞团整体的风格以紫色、酷炫、光效的形式展示,展示出劲舞团的梦幻、魔法、少女般的气质在里面。


8.粉色

1.粉色代表着可爱甜美、温柔、纯真、娇嫩、青春、明快、恋爱。在性别角色里粉红色通常与女性气质相联系,正如蓝色通常与男性气质相联系一样。

2.例如美柚app,是关于记录女性相关的App,里面就用了大量的粉红色,给人一种温暖、舒适、关心的感觉,衬托出了粉红色在里面的魅力。

美颜相机的主色以粉色为主,同时有些地方加入了一点紫,显得页面更加通透整体给人一种女生、甜美、粉嫩的感觉。


9.黑色

1.黑色具有高贵、稳重、科技、神秘、酷炫、稳定、庄重的意象。

2.许多科技产品的用色,如电视,跑车,摄影机,音响,仪器的色彩,大多采用黑色,生活中,我们有时形容很神奇的科技产品为"黑科技"。

3.生活用品和服饰设计大多利用黑色来塑造高贵的形象,也是一种永远流行的主要颜色。

4.京剧脸谱中,黑色一般代表正直、无私、刚直不阿的人物形象,如包拯。


1.TED是一款教育类的app,分享他们关于技术、社会、人的思考和探索。品牌色为红色,不过整个app以黑色为主,整体给人很强的沉浸式体验。
2.整个app没有任何的广告,整体体现出TED产品的权威、严谨的气质。


10.灰色

1.灰色具有简朴、朴素、柔和、高雅、平凡、温和、谦让、中立等意象中性色的灰色在店面的设计中给人的感觉是沉稳。

2.它好像可以和任何色彩搭配。由于它的中立性,它常常被用作背景颜色。它可以让其它色彩突出。

"一言"整个App以灰色调为主,内嵌了一款宋体。
整体的排版非常的独特、细腻、极简,结合灰色的调性展现了一言app的简朴、高雅、东方美学的气质。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷  作者:黄小伟

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



如何做好用户体验度量?

涛涛

体验度量是什么?

简单来说,用户体验度量是通过一套测量体系量化用户体验的过程。

尽管体验很难被科学客观地分析,但将度量这种手段运用于体验的管理是非常有必要的。引用管理学大师彼得•德鲁克的一句话:If you can’t measure it, you can’t improve it(如果你无法度量它,你就无法改进它)。我们相信更好地衡量体验设计的价值,可以帮助我们更好地实现产品价值、用户价值、商业价值,甚至是社会价值。

为什么要做体验度量?

下面我们再来分析一下做好体验度量能帮我们解决哪些难题,首先从我们遇到的几个问题出发。

概念过于抽象主观:设计师们提出的体验优化方案被认为过于主观,难以得到直接证据支持,各部门很难达成共识,方案难以推进落地。怎么办?

影响因素复杂多元:现有的 NPS 满意度调研反映了每个季度的商家整体满意度,但是团队面对 NPS 结果无法直接定位问题,难以进行有效的诊断和提升。怎么办?

问题难以闭环管理:现有的 VoB 系统能够收集到一定数量的商家反馈问题,但是这些零散的应急需求很难被高效地纳入体验优化项目。怎么办?

如何做好用户体验度量?京东设计师总结了五个步骤!

相信大家或多或少遇到过类似的问题,虽然大家有着“以用户为中心”提升“用户满意度”的共同目标,但在过程中具体该怎么做,仍然是抽象模糊的。体验度量恰恰是解决这些问题的关键策略,我们希望通过体验度量帮助京麦达成以下目标做出更好的设计,创造更大的价值。

目标一:让商家体验从“抽象”到“具象”,从“玄学”到“科学”,定义一套被各部门认可的衡量标准;

目标二:与商家建立更加直接的联系,从商家角度直接洞察需求,更有针对性地定位优化问题;

目标三:更好地实现体验设计价值及体验设计体系化,与各部门建立合作关系,长期监测跟进优化。

怎么做体验度量?

体验度量一般可以分为五个步骤:拆指标、采数据、做诊断、再优化、续监测。

在京麦一期度量中,我们主要完成了前三个步骤,后期我们会尝试推进后两个步骤,同时也将继续完善现有的度量模型和调研方式。

1. 拆指标

首先我们要明确这个产品的用户体验由哪几部分构成,就比如评价一个人的英语水平如何,我们可以从听、说、读、写这四方面进行评价。

通过比对分析业界相对成熟的指标模型,我们发现各个模型有不同的切入点,比如 PULSE 模型以网页产品商业化为导向,HEART 模型以用户为核心,PTECH 模型更适合企业级产品,UES 模型更适合技术产品等。涵盖的维度多种多样,有的维度是产品相关指标,比如留存率、日活用户数、转化率,有的维度是用户侧反馈,如 NPS 净推荐值、满意度。

如何做好用户体验度量?京东设计师总结了五个步骤!

深入分析这些维度,我们发现几乎所有指标都可以被分为系统表现、用户行为、用户感受这三类。

如何做好用户体验度量?京东设计师总结了五个步骤!

有了前面提到的三大目标和参考指标,我们开始分析京麦移动端的现有情况。

由于京麦在现在这个阶段已经有了相对稳定的产品形态,市场上也有了同类型的产品。因此,我们首先把完整性作为反映产品系统表现的重要维度,也就是商家需要的、别人家都有的,京麦“有没有”?

第二项维度是参与度,店长是否会通过移动端来经营管理店铺呢?客服是否会通过移动端来答复客户呢?也就是各类角色“用不用”。

而作为一款 B 端产品,它的使用效率和易用性是至关重要的,我们要关注用户的行为,也就是商家们是否能“又快又好地使用”。

最后一项指标是满意度,它代表了用户的主观整体感受,这也是所有指标中涵盖面最广的一项。总的来说,商家们是否认为这个产品“令人满意”?

如何做好用户体验度量?京东设计师总结了五个步骤!

TIPS:体验度量具有非常强的业务属性,不同的业务类型、业务阶段、业务规模、资源情况都会有与之相配的不同的合适的度量方式,适合自己的指标才是好指标。

2. 采数据

有了度量指标之后,我们需要通过从不同渠道去收集尽量全面的数据。还是拿英语举例,我们该如何去给听、说、读、写这四部分打分呢?可以通过听力、口语、阅读、写作的统一考试打分,可以让老师根据平时上课的表现打分,也可以让同学互相评价打分。

那么度量的数据也可以有多种来源,比如通过用户访谈得到用户主观使用感受(定性数据),通过问卷调研得到满意度或是易用性评分(定量数据),通过后台数据得到用户的行为数据(定量数据)。

如何做好用户体验度量?京东设计师总结了五个步骤!

基于移动端京麦现在所处的发展阶段阶段,我们重新明确了我们的调研目标:

  • 清晰与竞品差距与机会点;
  • 关注核心模块的使用体验;
  • 了解用户的主观感受。

因此,我们在这个阶段实施了用户访谈、问卷调研和竞品分析三种不同的调研活动,收集了大量的定性数据及定量数据。

如何做好用户体验度量?京东设计师总结了五个步骤!

竞品功能完整性对比分析

调研目的

通过分析对比现在行业内同类产品的功能,计算京麦功能的完整性得分。以千牛、拼多多、京麦三个平台六个端为分析对象,测试各一级、二级、三级功能的支持情况。

调研方法

确认竞品后,通过使用各家产品的具体功能,拆分一级、二级、三级或更细节的功能,填写完整性分析表;

计算完整性得分(京麦具体计算以二级功能为标准,分为六个不同等级,分别对应六个分数)。

如何做好用户体验度量?京东设计师总结了五个步骤!

TIPS:可以通过与产品同学的沟通,共同完成各级功能模块及相应支持程度的定义;后期可以纳入客观数据指标,结合用户的参与情况、平台满意度计算权重,重新定义重要程度、支持程度;以一个季度为统计周期,及时跟进新上线功能。

线上用户访谈

调研目的

与用户直接对话,较为直接、细致地了解不同角色用户如何使用各功能,以及在使用过程中经常遇到的问题,了解他们的使用习惯和实际需求。获得用户画像、用户使用感受、用户问题反馈等定性数据。

调研方法

用户招募:提前 1 周设计招募问卷,并在 QQ 商家群投放、回收,筛选目标用户,提前打电话确认访谈意向;

前期沟通:添加商家的微信,了解商家的基本信息,预约商家参与时间,并要求商家提前在手机/电脑上安装腾讯会议;

访谈大纲:根据具体想要了解的功能模块、用户群体等,撰写访谈大纲,包括开场白、基本信息、具体问题、观察操作提问、延展问题、结束语等;

实施访谈:提前预约会议室,打印访谈记录表。需要至少一位主持人、一位观察记录员,访谈时长控制在 30-45 分钟左右;

访谈结果梳理:每场访谈结束,参与者进行快速回顾总结,截取录屏中关键段落,提炼对应的用户行为、态度、问题、需求等信息,逐步建立猜想,并在后续的访谈中进行验证、修改;每轮访谈结束,对共性问题进行分类归纳,梳理电子化在线表格;撰写访谈报告(可能包括用户体验地图、用户画像等);

后续跟进:邮寄周边礼物,并建立商家体验群,维护长期合作关系。

如何做好用户体验度量?京东设计师总结了五个步骤!

如何做好用户体验度量?京东设计师总结了五个步骤!

TIPS:提前争取更多利益点吸引商家参与;提前明确目标用户类型,与产品侧配合利用线上使用数据定位筛选访谈用户(如使用经验、使用频率、经营类目等);提前与受访者沟通,可以让商家准备反馈问题列表,与商家反复确认时间;确认用户接受上访谈使用的设备及场景,对可能出现的意外情况做预案;访谈后,在企业版微信建立相对稳定的商家关系,以便回访;访谈信息整理需要更多人同时参与,尽量在访谈当天或次日完成转录、问题分类,及时补充假设,在后续访谈中验证/推翻;及时从录屏中截取关键段落、截图,便于举证。

线上问卷调研

调研目的

以更大样本量验证访谈结论,同时通过对大量用户的主观打分、行为习惯的分析,得到对产品整体的使用评价,直接获得用户角度满意度、参与度、易用性得分。

调研方法

问卷设计:提前 1 周开始设计问卷,根据前期访谈结果,有针对性地设计各模块、各角色对应问题;

问卷投放:针对不同端的问题,分为 2 个问卷,分别投放;(如果需要长期追踪,建议以季度为单位,以京麦为例,紧跟平台满意度调研投放时间,在 1 月/4 月/7 月/10 月初分别投放);提前与产品、运营侧进行沟通,确认上线、下线时间,以及所需物料,如文案iconbanner 等;

问卷结果梳理:数据清洗、分析;梳理关键信息,制作图表;输出报告结论。

如何做好用户体验度量?京东设计师总结了五个步骤!

TIPS:1. 尽量咨询用户研究团队专业人员,听取他们对问卷题目设置的建议,留出组内讨论、线上测试时间,进行 1-2 轮调整;

2. 如果需要长期追踪,建议以季度为单位投放问卷,以京麦为例,紧跟平台满意度调研投放时间,在 1 月/4 月/7 月/10 月初分别投放;

3. 提前与产品、运营同学进行沟通,确认上线、下线时间,以及所需物料,如文案、icon、banner 图等。


3. 做诊断

收集了大量数据信息之后,我们需要设定不同维度的权重,并通过一定的规则计算出各指标的最终得分。比如工具类产品,可能更强调用户达成任务的效率,因此易用性和任务效率权重较高,而主观数据的满意度权重则相对更低。

同时每项指标的背后都有一种或多种的数据采集方式,每项指标的数据颗粒度也不同,有的可能只针对一个模块,有的可能涵盖整个使用过程。因此,我们在设定计算规则的时候,要尽可能的全面客观。

最后,将度量体系的各个维度进行加权计算,基于数据表现,可以诊断出产品的提升信号。

完整性 | 功能完整性对比分析(客观)

目前,京麦在整个商家后台行业中已经处在功能相对较为完善的阶段,因此完整性将作为一个重要指标纳入整个体验度量体系中。通过与其他同类产品对比,可以看出各端功能的覆盖完整度,这一维度是完全客观的度量指标。

易用性 | 用户使用难易程度(主观)

易用性是衡量用户在使用产品各功能时感受到的难易程度的标准,是完全主观的度量标准。在比较了各类可用性测试、易用性测试度量体系后,我们选取了表格中的四项维度和对应的七个问题。通过问卷的形式,以李科特五度度量(强烈反对=20 分,反对=40 分,中立=60 分,赞同=80 分,强烈赞同=100 分)换算获得了易用性的分数。

如何做好用户体验度量?京东设计师总结了五个步骤!

参与度 | 各角色用户常用功能模块的使用率(主观)

参与度是衡量用户对各功能模块的使用率的主观度量标准。使用京麦的商家可以按照其工作岗位分为店长、运营推广人员、客服人员、财务人员、技术人员等多种类型,通过对各类人群常用功能模块的使用率的加权平均值,计算整体的参与度。

如何做好用户体验度量?京东设计师总结了五个步骤!

任务效率 | 各角色用户完成特定任务的投入产出比(主观&客观)

任务效率是用户通过使用京麦完成某一特定工作任务(发布新商品、填报活动等)的投入产出比,通常以时间、完成度、出错率等具体业务指标来具体定义。一期我们以 100%-用户主观反馈问题的比例来推测计算任务效率。二期计划:与各条业务线沟通,以他们的业务指标来定义更具体的任务效率指标,通过用户行为监控数据来计算客观的任务效率值。

满意度 | 用户对产品整体的使用感受(主观)

使用季度性《平台商家满意度调研报告》统计得分,也可以在问卷中设置相应打分题进行统计。

4. 再改造

通过前面几个步骤的计算得分,产品已经有了较为宏观的改造方向,我们可以再结合前期调研收集的用户反馈问题,重点解析数据表现背后的原因。这个阶段需要引入更细致的专家评估等方法,对各类问题的优先级进行排序。

我们计划结合产品现有的移动化进程,首先提升完整性,然后分批次地针对核心模块优化易用性、任务效率,并通过概念设计及用户测试等方式进行产品优化改造的快速验证。

5. 续检测

后续,我们也希望引入更多用户的行为数据指标,如用户活跃度、用户增长率、功能插件使用率、页面点击率等,从业务指标中获得更全面的数据信息。

同时引入监测工具,对产品重塑后的关键指标进行持续追踪,周期性监测指标的改善情况,让各部门同时参与体验度量的工作,提升优化产品的效率。从体验度量指标的数据采集到数据分析到数据的可视化,再到最后的优化落地,让体验度量的闭环全程可管理。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:优设  作者:京东设计中心JDC

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



S02E05: 创意打破边界,什么打破「创意的边界」—— 阿里云设计中心年鉴

seo达人


图片

图片

图片

创意技术突破「图形的边界」

图片

图片

 

如何创作不知道结果的图像?

通过我们研发的智能生成设计工具,可以快速批量化生产高质量静态/动态图形素材,并利用智能工具合成用于各种日常基础设计场景中的物料,例如海报图形、PPT 动态 Icon、Logo、千人千面的 Banner 等等。

图片

 

神经符号 AI 很神吗?

神经符号 AI (Neuro-Symbolic AI) 是一种将深度学习和符号智能的结合的人工智能新范式,是人类向「通用人工智能」前进的又一尝试。

图片

 

这是谁的大脑?

光子大脑,阿里云神经符号实验室打造的 AI 系统。通过创意编程技术,设计师对神经符号系统的思维过程进行了实时可视化呈现,打造了一个具象化的光子大脑。

图片

 

GDS, Shader, GLSL %^#@&! ??

GDS 是阿里云设计中心,由创意技术设计师自研的 WebGL 图形技术代码库,其包含高复用性的模块化代码与一系列自研的 Shader (GLSL) 组件,用于实时 3D 特效与图形渲染。实时渲染的价值不仅仅是图形能力的体现,而是每一帧的视角,都与用户的交互行为有关。我们把 GDS 作为图形技术底座,用以孵化全真三维设计平台 – REAL 3D.

GDS _

 

REAL 3D_ 升维是目的么?

REAL 3D_ 只是实现目的的一种方式。传统的二维界面上,我们获取的只是文字、色彩等信息。而在三维空间,深度、高度、角度等信息通道都可以承载产品信息。所以,这是理解的更多,而不是看到的更多;是原本是三维,而不是升级到三维。

REAL 3D _

 

如何提高设计协作效率?

为了在 3D 搭建前能够快速的梳理交互逻辑与完成预览沟通,我们设计与开发了全真3D专属设计组件 —— 全真3D Sketch UI Kit。支持在设计稿中快速置入预设好的阿里云云产品形象、分区、飞线等元素与「一键换肤」。

REAL 3D UI KIT _

 

如何生产中高性能的实时渲染?

在图形计算与渲染里,实例 (Entity) 与 DrawCalls 越少,意味着性能越高。在REAL 3D的设计实践中,我们使用 Instancing 技术在 GPU 里合并渲染模型,大面积减少 DrawCalls 开销,以及使用背面剔除 (Backface Culling) 等渲染技术提升 3D 渲染性能。

图片
云网络体验馆 _

 

图片

图片

图片

创意技术突破「设计的边界」

图片

图片

 

什么是 BIV?

BIV 的全称是 Building Information Visualization,建筑信息可视化;「BIV Builder」是阿里云设计中心联合阿里云 A 组打造的在线三维建筑搭建工具,让用户能简单快速地搭建三维校园、全息园区等场景。

图片

BIV BUILDER _

 

谁在使用 BIV Builder?

目前主要应用在教育安防领域,让中小学校快速搭建自己的校园立体风险防控平台,获得可交互三维校园、自动安全巡逻、疏散路径规划等能力。利用 BIV Builder,非专业人员几天即可完成过去专业人员需要几周的工作,让立体校园风险防控平台的规模化成为可能。

 

究竟突破了哪些边界?

BIV Builder 利用人工智能技术,自动将 CAD 图纸转化为 BIM 模型,降低建筑模型生成成本,创意工程师自研图形引擎,不依赖 GIS 数据自动生成周边城市场景数据,参数化视效秒级切换,内置四色图、建筑爆炸图、第一人称视角漫游等实用功能。

 

2020 年的云栖大会,和之前的 11 年有什么不同?

http://mpvideo.qpic.cn/0bf2guab6aaafyag7zmgbbqfanodd42qahya.f10002.mp4?dis_k=fcc72fad9bd27f45404fc128af519db9&dis_t=1624518601&spec_id=MzUxODg1NDI1NA%3D%3D1624518606&vid=wxv_1842658210613100550&format_id=10002&support_redirect=1&mmversion=false

2020 年是云栖大会首次在线举办,首次通过三维重构的信息转译方式,打破设计和技术的边界,核心应用绿幕直播技术、数字巡展创新体验,创造性地打造了一个集互动和游览于一体的线上沉浸式体验。

图片
2020 APSARA _

 

什么是数字巡展?

数字巡展是我们自主研发的设计服务产品,立足于设计创新,融合定制化虚拟空间、智能化工具平台、数字化企业营销三大核心能力,通过创意和数字化优势,推动数字体验创新,打造全球领先的云上会展数字化智能平台。

图片
数字巡展 _

 

数字巡展解决了什么问题?

通过 3D 互动优势设计能力,为企业提供低成本的独家品牌定制能力。突破以往场地、经费、运营等限制因素,为企业提供数字化名片,提升展陈效率与科技感。

图片

 

数字巡展的愿景与实践?

我们探索数字巡展,坚信的是线上和线下的完美结合。希望创造一个无边界的全息世界。

图片
全息展厅 _

 

图片

图片

图片

图片

图片

 

原文地址:阿里设计中心(公众号)
作者:阿里设计中心
图片

转载请注明:学UI网》S02E05: 创意打破边界,什么打破「创意的边界」—— 阿里云设计中心年鉴

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷   作者:陈皮Celia 

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



详解|图标设计,精致的体力活儿!

seo达人



对于一套图标来说,能让用户记得住,源于图标的与众不同;而能让用户觉得有专业感,其实是源于图标的整齐划一。图标设计本身也有自己一套规范,在设计图标的过程中遵循一定规范去工作,不仅可以使图标看起来更美观,而且还可以体现出设计师的专业和价值。作者在本文中以1024px下的设计规范给出详细的说明和解释,欢迎大家讨论。

 

很多设计平台都推荐设计师在 1024 X 1024px 的网格中绘制组件,且圆角的大小保持 8 的倍数关系。例如 Ant Design 给出的图标绘制网格规定:

图片

关于图标设计,你大概也有思考过这样的问题:

  • 为什么图标要使用 1024 X 1024px 的网格进行绘制?
  • 设计页面的时候,如果需要的图标大小是 16 X 16px,为什么不推荐直接使用 16 X 16px 的网格绘制图标呢?

对于这类问题,本文解答如下 ——

 

1 . 可以「精确」绘制细节

下面这张图你可以很清楚的看到网格的用法:图中放大的圆圈中的一个蓝色的小方格是 32 X 32 px,也就是说,这个蓝色小方格里面还是一个 32 X 32 的格子盘:

图片

你可以想象,当你在绘制一个图标时,其实是在一个布满了小格子的纸上进行绘制,这样做我们在绘制图标的时候可以很精确,每一个圆角的大小、每一根线条的粗细、每一个斜线的角度等等,都有严格的数量规范,以确保图标造型的统一和精确

关于图标的精确规范,我们以 Ant Design 的图标系统中的部分细节规范为例:

 

(1)圆角:

圆角的规格采取 8 的倍数原则,最常用的尺寸是 3 种,分别是 8px、16px、32px,它们之间是两倍数的关系。而图标内部空间的圆角则保持直角(0px)的处理方式。

图片

 

(2)点的直径:

点是非常常用的元素。Ant Design 对于点的尺寸选择上会保持 16 的倍数这一原则。在点的选择中常用四种尺寸,分别为 80px、96px、112px、128px。当出现特殊尺寸的需求时,会按照 16 的倍数进行延展。

图片

 

(3)线宽:

Ant Design 的线条宽度之间的关系采用 8 倍数原则,从小到大以 8 的规律递增。常用的规格也是 4 种,分别为 56px、64px、72px、80px。

图片

你会发现,在 16 X 16px 的画板中肯定是可以画出来图标的,只是图标的形状并不是单一的圆形或是方形,一旦出现多种样式的线和点,你是无法精确控制绘制的规律的。

当然,1024px 也并不是绝对的数值,你也可以在 800 X 800px 或是 960 X 960px 的网格中进行绘制,网格数量越多,你的绘制就会越精确。

 

2 . 图标造型「灵活性」更高

使用 1024 X 1024px 的网格时,可以预留有效的“出血”位置。比如,Ant Design 在 1024 x 1024px 的画板边缘预留了 64px 的出血位,也就是说,真正用来画图标的常用画板尺寸是:1024-64-64 = 896,即:896 x 896px。

图片

在图标的设计过程中预留出血位,可以预防某些造型的图标在具体应用时出现边缘被切掉的风险;同时在设计过程中,也为设计师把握图标间平衡留下了进退的余地,为图标赋予更多灵活性

图片

 

而如果你使用的是 16 X 16px 大小的网格绘制图标,则很难设置出有效的出血位。

 

3 . 「缩放」游刃有余

按照上文所述,当你在 1024 X 1024px 的网格中画好图标后,再将图标等比例缩小,就变成了我们通常看到的界面上的图标。通常情况下,界面上使用的图标的大小不会超过 1024 X 1024px,因此基本上都是对图标进行缩小变换,在缩小图像时可以保持锐利的边缘和正确的对齐方式。

图片

而如果你使用的是 16 X 16px 大小的网格画出来的图标,如果需要放大的场景,在图标放大之后会有很多细节无法处理和补充。

 

4 . iOS 平台标准

以苹果公司为例, iOS 7 及之后版本 iOS 的图标网格均采用 1024 X 1024px 的网格作为基准。向 App Store 应用商店提交的 iOS 应用图标必须使用 1024 X 1024 分辨率的高清图标。Retina 视网膜屏幕也为高清图标带来极佳的显示效果,更好的考虑到用户的体验感受。

图片

本文讲解的问题看上去很基础,但很多同学其实都是“揣着糊涂装明白”。绘制图标其实是一个“精致的体力活”,一套真正优秀的图标,在细节上是值得放大 10 倍来进行推敲的。

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》详解|图标设计,精致的体力活儿!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷   作者:陈皮Celia 

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


做好设计,什么能力最重要?

鹤鹤

设计行业每天发生着翻天覆地的变化,随着专业的发展,我们也在不断的学习新的技巧和趋势,但同时我们也要明白,设计中那些基础的UI准则,才是好的趋势和风格建立的基础。今天我们就一起来聊聊做好设计最重要的能力之一:区分视觉层次。 


什么是视觉层次


视觉层次你可以理解为,通过将界面元素进行设计上的区分,引导用户的注意力,并使用户的注意力始终集中在页面的关键地方。但是今天没有一个方法可以一直控制用户注意力,就像我们今天做设计一样,不同的产品要用不同的设计手法去设计,才能达到帮助用户分清主次的作用。



视觉层次不仅仅包含文字有关,它还包含我们的图片,视频按钮以及文字以外的视觉元素。所以当你设计一个网页时候,除了网站整体的颜色,排版,图片也能够影响视觉层次。那么如何让设计的层次更清晰,常用方法有哪些,今天我们一起来聊聊关于设计层次,希望可以帮助到你。


运用尺寸大小建立层次

大小是建立视觉层次非常重要的方式,这里的大小不仅仅是文字,还包括图形,插画,图片等等。 作为设计师我们必须了解屏幕上每个元素的优先级,根据优先级来判断它的使用大小。



当我们谈到尺寸的时候,相信很多设计师有过被要求各种元素放大的经历,确实大的元素能更好的吸引用户。 但是当元素越大,其实设计的复杂性也越高,所以在设计时候需要更注意整体节奏,把握好一个度。 



如上图插画的比重很大,在设计这种大的元素时,你的每个元素比例和细节处理都被同时放大了,我们可以看见这副插画四周还运用了很多元素,让页面达到平衡,同时这个画面和旁边的文字场景也很好融合在一起。一个好的设计一定是通过视觉手段让用户理解信息更加准确,在看完页面文字和图片后,很自然的引导到底部的按钮,这才能算是一个很引人注目的设计。


运用色彩建立层次


颜色在视觉层次中扮演着非常重要的角色, 设计师可以通过颜色来传递信息内容,同时也可以引导页面内容,色彩在心理学中有着很重要的作用,比如黑金给人尊贵感VIP感,糖果色给人小清新,甜蜜的感觉;红色能吸引人注意等等。用户在视觉情感上和颜色很容易联系在一起, 作为设计师我们需要对不同的色调,不同色彩进行细致的组合搭配,以掌握对色彩的了解。



Zenly:国外知名产品,在引导页面设计时候运用红色按钮吸引用户注意,在App主页面里面,通过深蓝色强调选中效果以及Tab.


Netfix:知名的电影软件Netfix在设计中,充分运用色彩去增强层次,无论是在引导页按钮设计,还是在页面核心行动点,以及Tab切换等地方,都通过显眼的主色来引导用户操作,让页面的行为路径更加顺畅。 



Tiktok:抖音海外版本设计,整体UI部分非常简单,页面还是一如既往突出内容为主,所以在整个设计上就通过色彩来强调页面优先级,比如拍摄,分享,选择这些核心操作都通过色彩来引导完成任务。



运用文字大小字重建立层次


丝芙兰App的设计,在引导页采用一个衬线体非常有品位,通过字体大小,和字重对比,再配合美妆护肤的行业属性,页面非常的简洁大气,有对比有细节。 



无论是产品介绍,还是详情页,丝芙兰设计都是采用字重和字体大小对比,来打造层次,字重和大小,也是设计师常用建立层级的方式。 



除了字重以外,还可以字体透明度来增加层级,一般是黑色搭配灰色使用,再加上字体大小和字重整个页面层次会更加清晰。如上图韩国APP页面,标题是黑色,辅助说明文字字号小4号,同时颜色改为浅灰色,这样设计页面层次增强了很多。 



很多设计师在做界面时候,喜欢字体就一个颜色用到底,这样会显得界面粗糙,也没有层次感。但是运用好我上面说的字体大小,颜色、字重等对比其实节奏很容易就能做出来。 


运用视觉重量建立层次


比如aaptiv这个产品的功能页面设计,就是运用了视觉重量的对比,线框按钮最弱,其次是黑色选中效果,最重的功能引导按钮, 视觉 重量的对比能很好让用户关注到功能内容。



如上图,选中的黑色视觉重量最重,其次是蓝色选中效果,最后是未选中的黑色,视觉重量几乎我们每一个页面中都会使用到。



headspace这款产品我非常喜欢,将情感化用到了极致,在页面很多细节地方运用了不同的小橙人在背景上,视觉重量有轻有重,通过不同视觉重量来表达页面内容,非常巧妙。



在列表的表达上,不同视觉重量感受是不一样的,比如左边的视觉重量更轻一点,用户关注图形同时也去关注文字内容,右边这个视觉更重,更加引导用户去点击功能模块内容。



设计师熟悉的medium官方App设计,在正文阅读时,同样采用不同的视觉重点来突出重要信息,比如左边通过字重以及文字背景绿色底色和正文对比,非常醒目。右侧通过浅绿色作为背景强调突出。



同样在一些重要位置,Medium也是运用视觉重量处理,如左图通过顶部提示条提示可以通过语音播放,在右侧付费文章通过行动按钮引导用户升级付费。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png



文章来源:站酷  作者:我们的设计日记

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档