设计工作成果

熊伟   UX Designer



123logo

UX Designer,产品设计硕士,6年工作经验,擅长复杂系统的逻辑构建,具备产品思维以及与开发工程师零障碍沟通的能力,在独角兽公司为成熟产品提升交互体验,也在创业公司参与过从0到1的设计部门创建与产品线创建过程。关注行业理论,每年自费参加IXDC等行业盛会寻求进步;工具技能全面,并可一周内上手任何新生产工具的能力。早年间于北京从事电影合成师,有深厚的3d、动画、合成技术应用基础,精通各种拍摄器材使用。

汇报内容

为了清晰呈现自己在实际工作中遵循的设计方法论,案例部分选取了在环信工作中一个小而全的”功能性“设计案例、和一个完美主义”体验性“设计案例进行细致剖析。

Jietu20180423-105506@2x

一、对设计这件事的认知变迁

像很多人一样,我也是从UI岗位进入到互联网产品设计领域,随后发现逻辑思维能力似乎是强项,进而接触交互、接触体验、接触设计管理,经历了从无知到混乱到重获方向感的美妙过程。
Jietu20180423-105807@2x
Jietu20180423-111146@2x

二、功能性需求设计案例——开通工单功能
产品背景

环信客服是全渠道客服Saas,其中 工单模块 为客户提供长周期、跨部门解决问题的能力,属于 线上申请、线下签约的增值服务 项目。


需求

“优化线上申请工单增值服务功能。”


功能性需求设计流程

设计流程是一类最基础也最多样的设计方法论,每个团队因其实际情况会采用不同流程。对于 明确的功能性需求任务 ,我为团队归纳如下设计流程:




开始
👇


需求分析

拿到需求,并反思该需求是否够“根源”之后,从业务、用户、资源三个维度对需求进行分析,可以先 得到评价指标 ;然后得到 动机、担忧、障碍、限制 四个关键因素,解决方案即围绕此四方面进行构建。

Jietu20180423-112412


解决方案(初步)

保持与主体产品导航、布局、视觉风格一致性的前提下,与产品经理进行初步探讨之后,首先思考可行的交互流程(出了两版,一版偏促成买单,另一版偏体验提升,最后选定后者),结合分析得到的11个设计要点形成界面方案:



评审

向团队成员讲解设计方案,肃清潜在问题,结合建议修正解决方案。


评审 <=> 解决方案(最终)

谈论清晰后,修改并确定解决方案。


实施、线上验证/反馈

已排除技术隐患,实施过程无问题。
验证指标在需求分析阶段已列出:
1.开通正式版按钮点击量(并成功提交表单);
2.开通流程总时长,界面消耗极少,重点盯住销售人员的服务环节;

后记

以上为B端企业服务中一个小的功能性需求设计过程。
B端服务始终是以功能为核心,长期的功能堆叠必然造成技术上的顽疾,作为设计者,提前预判技术上的限制因素(同步还是异步?合适获取灰度列表?)是产出流畅的、人性化的流程的必要条件,否则会造成人去适应工具的惨剧。

三、体验性需求设计案例——思考提升效率
产品背景

环信独立工单 是独立于环信客服的一套功能强大的工单系统;
这套系统前端由我从零开始打造,使我有机会在系统前期设计设计时将体验因素更充分考虑进去;
B端软件最重要的体验一定是效率,能提高效率的设计一定能提升用户体验。


需求

提升部分监管职能坐席的工单处理效率;


功能性需求设计流程

对于具有创新性的体验性需求设计,我采用如图设计流程:




开始
👇


POV HMW—正确的提出问题

此用户场景来自于真实用户反馈;


脑暴/竞品

对于这个具体的需求场景来说脑暴的意义不大,直接看竞品;

通过调研发现

如今市场上工单系统在提高工单查看效率方面做法基本一致,即使用“上一个”、“下一个”按钮翻页;
其中zandesk产品有“Play”模式,启动后自动判断何时应“下一个”并自动执行。此模式缺点是:必须对工单进行操作才能触发play;应用场景比较单一;
此外,还对与工单系统结构极为相似的邮件系统进行了分析,发现使用浮层显示摘要的方式不会触发页面跳转,非常提高适合高频操作效率。



一致性扩展

设计需要保有一致性,一致性对B端产品尤为重要;
发自于一点的设计宜拓展为一个原则,遵从一定的原则即可保持设计一致性。

拓展:“临时信息”

一切短时信息显示都可以归为“临时信息”,以浮层的形式,无需跳转,直接为用户呈现信息;对于工单处理页面来说,列表页始终显示,其他信息均为“临时信息”。



原型



321

四、整理设计规范

在长期频繁的迭代设计过程中,为产品明确设计规范有以下好处:保持设计一致性;标准化组件以提高复用性,提高生产效率;方便打磨细节体验
在进行独立工单系统设计前的数月中我已对各种工单系统结构、典型用户场景有较深入了解,所以在独立工单设计之初就有意识地按照一定的规范开展工作,之后在整个设计及迭代过程中进一步总结了一套具有针对性的设计规范。
完善的 设计规范 形成 设计语言,本设计规范还不够稳定或全面,下面我仅列举有代表性的要点,涉及 原则、组件 两块内容。

原则

①按需呈现信息与功能

企业端WebApp一大特色就是数据总量大类型多、功能千奇百怪且在不断暴增;那么把所有的数据和功能放在同等重要的程度上铺开呈现显然不是好主意,更好的做法是 渐进式展示,重要信息与功能优先展示,次要数据与功能尽量折叠

Jietu20180423-121122
Jietu20180423-121129

②友好、友善

对直接用户来说,我们设计的复杂的WebApp系统关系到他们工作的成功与失败,不够友好的系统无疑会充满“未知危险”;做到友好、友善,必须 事前提醒、事后容错;

Jietu20180423-121257
Jietu20180423-121302
Jietu20180423-121308

组件

先关注最小单位组件;

最小单位组件的功能组合,成为复杂组件;

15244569632101.jpg

最小单位组件,按需求组合以满足特定需求。



五、工作产物锦集
独立工单系统—移动Web版

移动Web与原生APP的交互有诸多不相容之处,尤其对于手势操作。此H5版工单系统无任何滑动操作以避免可能存在的手势冲突,作为补偿,设计上着重突出了返回/关闭等按钮的位置,并添加了手动刷新按钮。



独立工单H5登录页动效(mov视频文件)





独立工单系统—PC版

[线上项目] Ticket工单系统UI软件界面DavidYoXiong - 原创作品 - 站酷 ZCOOL copy

独立工单系统—访客端

访客端是租户的客户用于操作工单的接口,是企业服务中常见的“客户的客户”。该系统设计力求简洁,以最小的信息量和功能让用户实现自己增删查改工单的目的。

客服工单模块

011ff15966edfaa8012193a3457c6

知识输出&汇报



Coding

个人认为Coding对于一个交互设计师来说在了解用户的同时,了解我们能以何种工业化的方式为用户提供什么最终效果尤为重要。故而通过自学具备了独立制作静态页面、独立承担前后端分离项目中前端React开发的能力,并偏重动态效果呈现能力。

一个有活力的登录页UI交互UEDavidYoXiong - 原创作品 - 站酷 ZCOO

淘气小熊登录页面,一个有活力的登录页面


013ed9593a7290a8012193a366043d

star killer


以上


期待和你组队