首页

B端列表组件交互研究

鹤鹤

1 列表

客服系统常规使用的列表由顶部操作栏、表头、表体、底部操作栏构成。表格是为可读性而生,所以表格的易读、易对比、易操作才是表格设计的首要目标。

1.1应用场景

(1)展示大量结构化的数据。

(2)需要对数据进行排列、搜索、分页、操作等复杂行为。

1.2设计原则

(1)易读性

1)表头。保证表头字段名称精简易懂,既能节省列表空间,又能减轻视觉压力。表头的固定功能也能够很好体现系统界面的友好性,尤其当表头字段过多,数据类型不好识别的情况,固定表头能够大大提升用户的数据浏览效率。

2)行高。较小的行高可以承载更多的信息,但会降低视觉扫描效果,适宜的行高更利于阅读。目前客服系统常用规格为36px行高,但有些数据量大空间小的专区,需要展示尽可能多的数据时,会考虑会采用24px或30px等小行高,需要基于场景的需求进行选择。

3)行排序。可根据字段以及列表内容的必要性配备排序、筛选、搜索等功能,方便用户快速筛选信息或进行信息对比查看。

4)斑马线。斑马线能够增强用户视觉的横向引导,尤其阅读较宽表格且数量还多的列表,可以避免表格内容过多时,出现错行的现象。

5)分割线。横向分割线能够减轻列表竖直方向的视觉重量,只要采用合适的对齐方式,纵向分割线的作用就可有可无。当表头字段内容少,且易于区分时,可以考虑取掉单元格的纵向分割线,弱化表格形式,便于横向信息阅读、信息获取和信息间对比的同时,又能够简化页面。当数据量太多或单元表格较宽时,保留纵向分割线帮助提升浏览速度。

6)列宽。尽量减少展示的列的数量,关注用户需要的必要信息,当表头字段过多时采用横向滚动条的形式,保证列与列之间足够的呼吸感。

7)自定义列。不同用户信息侧重可能会有所不同,可通过自定义列的下拉面板对列表内容自定义展示。

8)列对齐。标题和内容一般采用左对齐,更符合用户的阅读顺序。金额数值排列采用右对齐,既方便用户读取数据,又方便进行纵向数据对比。

9)空白格。对于无数据项用-占位,不留白。

10)分页。客服系统列表数据庞大,通常采用分页来缓解加载压力,相对用户而言,通常滚屏会比分页更便利,所以,若无展示数据量要求且一屏能展示完时,会尽量避免使用分页。

当使用分页时,考虑到用户的操作习惯,可让用户自定义每页展示数量。

11)特殊标识。对于用户关注的数据状态变化,可以采用一些符号标识,便于用户快速定位信息的同时,也能更加直观的呈现数据变化。如下图,通过不同颜色和方向的箭头来反映数据变化。

undefined

12)全屏。全屏展示能够避免和表格无关内容的干扰,提供沉浸式阅读体验,可根据场景需要配置全屏阅读功能。

13)操作项。对于用户需要进行业务办理或高频点击的操作栏可以固定在列表的两侧,更方便用户对数据进行操作。当操作项太多或操作项不常用时,可通过收起较低频操作项,来节省页面空间,保证用户阅读高效性。

undefined

(2)易搜索

1)条件查询。一般位于表单查询页面上方查询条件模块,当查询区域内容过多时,可展示第一行的筛选项,其余收起。

undefined

2)表头筛选。在表头单元格右侧增加筛选图标,点击后出现筛选覆盖层,根据不同筛选类别,配置相对应的表单组件,可快速查找数据。

3)标签筛选。将用户常用筛选条件或关注目标设置为默认选项,如时间、状态、范围,一般位于顶部操作栏或表头区域。

(3)易操作

1)单条操作。单条数据操作一般固定在列表左侧或右侧。

2)批量操作。当对批量数据进行相同操作时,沿着用户的操作路径,建议将此类操作按钮放至底部操作栏。

undefined

3)全局操作。当进行一些“导入、新增、导出、其他页面跳转入口”等列表的全局操作,或进行模糊搜索、条件筛选等操作时,建议将操作按钮放至顶部操作栏。

undefined

4)详情。可在操作里加“详情”按钮,也可将名称项做成可点击样式,跳转详情。

5)树形结构展示。无须用户进行页面跳转,展开父级节点即可查看子级列表内容,一般控制在三层以内。

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

文章来源:站酷 作者:史晴sunny
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


B端产品设计思路&高频设计要点笔记

鹤鹤

B端全称是Business即商家(泛指企业)的产品,通常是企业或商家,为工作或商业目的而使用的系统型软件、工具或平台。相对于C端产品,B端产品对业务逻辑和产品逻辑要求会更高。


本篇笔记将罗列B端设计过程中的核心设计思维和高频设计要点,结尾附上大厂设计规范链接。供大家下载查阅。



★目标导向·B端产品的商业目标


设计开始要了解设计的目标,用户的行为都是有「目标动机」的,B端产品的业务目标往往都是为了为企业或个人为了解决某一项工作上的问题。
当设计过程以「目标」为出发点,可以增强设计判断力,输出更有效设计解决方案。


B端产品的设计原则:提高使用者的工作效率,同时降低业务链路的操作及学习成本。

当你有了目标以后你的设计就可以围绕这个目标展开:



★设计价值·B端的设计价值体系搭建


对于B端的产品而言,用户最关心它能为实际的工作带来哪些便利,而并非这个界面做的多么的好看,以及用户体验多么棒。所以B端产品设计价值优先级往往是  功能性>表现力



B端产品设计需要站在整个业务线全局角度去把控各个设计点,不再是「用户体验」至上,为实现「任务目标」,「牺牲」一部分「用户体验」是必要的,这个时候视觉和一些体验就不那么重要了。通过调研业务去了解各个角色职能的工作流程、相关痛点,让产品能用,好用。



要点1·了解项目的业务流程


理想的B端设计需要了解业务目标以及业务链路中每一个环节的过程。将业务逻辑理解透彻再考虑应该如何进行设计实现。

这样做的原因当你站在使用者的角度进行同理心设计可以更好的帮助用户完成他要完成的工作,从而提高效率。产品原型一般基于「功能」本身,而设计师从用户实际场景规划用户的任务流,可以优化产品逻辑,补全缺失场景,通过了解业务流程也能给予创造性解决方案




要点2·用户调研与场景化设计思维


B端产品往往是是服务于企业用户,用户画像需要专注于用户特征中的「群体职业身份」这类人无论性别、年龄、地区有何差异,他们都是一类角色,我们的产品要提供给这类角色使用,而不是某个人使用。



由于B端设计师不是产品的用户,无法沉浸在与用户相同的真实场景中,建立共情。所以设计师最好亲自感受一下业务流程,获得一手的用户洞察,


获取B端用户反馈的方式

「通过业务人员交流」业务人员可以帮助我们快速高效的描绘出典型客户案例的用户画像。
「实地走访」:观察在自然状态下用户如何完成工作任务,并提问题:「你怎么做?」或者「为什么这么做?」
「建立种子用户群」:聚集活跃的种子用户群,收集意见和建议,并在群里验证设计想法。
「亲身体验」:成为真正的客服小二,接听客户电话,记录自己在工作台场景下的真实体验和感受。

获取用户画像后了解该群体背后工作感受,行为习惯,以及任务类型。




要点3·情感化设计心理


安全感和信任感建立:人们越来越关注隐私和信息安全。如果你要求必须填写敏感信息,请确保使用字段下方的注释文本解释为什么需要这些信息。


实际工作中我们曾经自动获取过用户之前表单中填写的的支付类账户信息,在收集的用户反馈中,用户会感觉到隐私正在泄露并让用户信任感降低。所以即使用户输入体验会更好,但是考虑到信任感,敏感类信息请不要自动获取。


让用户感受到你正在帮助他操作:Jakob Nielsen于1994年提出的十大可用性原则中,其最后一条原则Help and documentation(帮助性指导原则)是搭建B端用户帮助体系的核心准则,在理想情况下,没有帮助文档就可以使用系统是最好的,但在某些情况下(尤其是B端系统),提供一些引导性的帮助其实是必要的。


B端系统中可以尝试搭建用户帮助系统:




要点1·降低学习成本


对B端产品来讲,设计师在设计的时候是不需要耗费太多的思考的,只是去按照交互设计师的规划堆砌图表和列表。但是对于使用者来讲,其中纵横交错的商业逻辑和业务逻辑却是给用户搭建了一个十分高的门槛。



要点2·保持高效


例如修改资料的时候,使用弹窗、浮层等等交互操作会减少页面跳转的频率。

但是与此同时,减少页面跳转并不代表真正的高效,例如瑞幸的供应商系统,供应商所产生的订单需要按照指定的流程一步步进行操作确保不会出现问题这样虽然页面的跳转增加,但是可以避免操作出错给用户带来更大的困扰。



要点3·整理信息/引导视觉


设计要根据用户的浏览习惯和视觉动线。要尝试引导用户的视觉,举个例子,如何引导:




设计侧核心要点


B 端产品是以业务为核心,是需要用户长时间操作并完成工作任务的,对于操作和展示内容无关的元素,越少越好。视觉为功能让步,追求简洁、清晰、克制、理性的视觉风格。设计语言尽量做到不干扰不打扰。



要点1·表单设计


输入顺序:先易后难;先必填后选填;先公开信息后隐私信息;有关联性的合成一组,特殊问题后置,用户输入时、不会觉得突兀、门槛太高 。

自动对焦(PC端)进行表单页面,自动对焦第一个输入字段可以引导用户开始进行输入。

标题:标题是对下文最短最精的概括。用户一般都会跳过表单内容,而且几乎都不会仔细阅读那种特别详细的描述。所以用最少的文字说清楚一个表单的目的尤其重要。
用户应该可以看一眼标题就知道他们应该怎么做,而不是非得把剩下的全部看完,
(附:这部分感兴趣的同学可以搜索“微文案设计”)

在表单编写方面,或者说各种写作中,删减词语都要比添加词语更加有益。 在仔细检查不必要的词语后,文章会更笃实,更连贯,更吸引人。



这个链接有什么用?关闭是点击右上角的按钮吗?如果并没有增效,那就是减效。每一个字,每一张图片,都不是100% 必需的,这些都会降低你表单的转换率。

删除一个字段,表单提交率就可以提高 26%。(本篇笔记原本有12000余字,为了避免浪费大家时间,我仅保留4000余字的高频要点内容)


PC端产品提示文字尽量不要放在框内

提示文字存在于框内常用在移动端,它的空间占比很小,对移动端的小屏来说,是非常友好的,但如果在交互上处理不好,会有很大的缺陷。

内部标签结构,只有提示性文字,用作提示用户应该输入什么内容,但用户在输入的时候,内部的标签/提示性文字就会消失,这时候,用户会失去它是否输入准确的唯一判别标准。


减少打字需求

字段输入通过部分人工智能自动将操作步骤可以变得简洁高效 ,也包括诸如一些、自动定位、图片识别、自动获取,第三方导入等方式来使用户的效率得以提升的功能。
打字是在线表单中最耗时、最密集的部分,而且经常会导致错误——尤其是在手机上。用按钮、滑块替换文本框并使用自动完成功能,将减少工作量并提高转化率。



使用文本块

文本块会更容易让用户记住内容:例如银行账户、电话号码等等。它指的是将信息排列成「块」的过程,使内容更容易保留、处理和回忆。一份研究声称数字 3 是帮助人们吸收和回忆信息的神奇数字。


表单的提示文字和定义格式要求

如果一个字段需要特定的格式输入,请告诉用户。例如密码要求、语法规则、编号间距等等。



用输入框长度提示

可以用输入框长度提示用户输入的内容是否正确。
德莱厄斯研究所的可用性研究发现,如果一个字段太长或太短,用户开始怀疑他们是否正确理解了标签。


在用户输入的时候,右下角告诉用户已经输入了多少字,如果超过 80 字后会变红色,用来警示用户,并且此时的表单域也无法输入新的内容。


如果用户填写错误,向用户显示错误发生的位置,并说明原因。


单选框

如果你的表单里的选项少于5个可以列出所有选项供用户快速选择,当大于5个时候可以尝试用下拉框解决。
将第一个选项作为用户最有可能的默认选项,且是最安全的选项,提前预判用户的操作提升选择效率。排列方式推荐数直排列,竖直排列相对于水平排列容易读取和定位,提高用户的浏览顺序。



解释隐私消息

当前需要用户填写相对隐私的信息时,请给予解释这么做的原因及目的。


收集设计反馈

完成表单的设计后可以给业务用户进行简单的测试,并记录他们填写的时间收集反馈,以及对这一连串的问题他们体验如何。这也将有助于你下次评估表单的设计。

最后在情感化设计系统里记得感谢用户填写或者反馈问题,因为用户是花时间的。所以请表示感谢。


要点2·表格设计

表格的设计围绕着「可读性」和「易操作」两个设计原则。设计易读,易扫视,易比较,易操作的表格结构是表格设计的首要目标。


列宽有三种常见处理方式:

1.  根据内容的极限长度给出足够的固定宽度;
2. 可以固定部分列的宽,其余列按百分比处理;
3. 列宽需要考虑最低宽度/最大宽度/文字极限状态,内容为空状态显示方案;
4.需要设置列之间的最小宽度,表格响应式布局情况下最小不小于此宽度。

M-Densign规范中对齐方式会遵循如下规则:
表格的排序,应从用户目的出发,遵循用户查看数据的习惯,尊重数据之间的关联性,设计用户查看、操作数据的路径,而非随机排列(这部分可以在业务侧调研时验证,提高用户体验和阅读效率)。


1. 文本信息/混合型文本左对齐,符合从左到右的阅读习惯;

2. 数字信息右对齐,方便数字之间的直观对比;



要点3·按钮设计

设计规范需要定义按钮的四种状态:正常状态(Normal)、悬停状态(Hover)、激活状态(Active)、加载状态(Loading)、禁用状态(Disabled)



B端产品的开发一般涉及多个开发团队协作,例如瑞幸的后台修改按钮颜色,都可能牵动10+工程师的协同。

所以B端产品在进行设计改版以及设计侧调整时候要思考调整对于业务侧是否有直接帮助,在设计和规范建立之前,切勿频繁改动。


除了完全独立设计开发的项目以外,还有大量的 B 端项目是采用第三方框架开发而成的,如 Ant、Element 等等。这是因为这些第三方程序可以帮助团队节省大量的开发时间和精力。


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

文章来源:站酷 作者:Cesare_玄漓
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


B端设计指南 - 审批

鹤鹤

业务究竟是什么?


很多时候既让初入B端行业的设计师感到一丝丝迷茫,因为不同的B端系统也就意味着,它的业务一定就会有所不同。比如CRM系统当中的客户生命周期管理,OA的办公自动化,特定的行业往往都会蕴含着不同的业务类型


而作为设计师,如果只了解设计模式、设计组件,不去分析设计最后的业务诉求,其实是没有任何意义。因此想要通过B端设计指南,和大家一起聊聊B端业务,以及背后所牵涉的具体逻辑。今天就简单聊聊最为常见的 审批


开始之前,还得再多说两句,因为一个系统当中,业务本身就不是独立存在的。因此在去讲述审批的过程,一定会涉及到 流程、权限、表单配置 等一些基础内容,建议可以先做初步了解,再结合文章进行阅读



审批的起源

虽然在说起源,其实我更想给大家讲清楚 审批在B端系统 当中的重要性

审批字面意思是审查并加以批示,通常指对 下级呈报上级的公文进行审查批示,报请上级审批

现如今,任何事情一定都会有分工协作,而使用审批的好处是可以

  • 规范员工行为

  • 提高企业运转效率

  • 系统存档便于溯源

  • 保护环境(毕竟减少了纸张浪费)

当然在不同的阶段的公司,对于审批的诉求是不太一样

小公司:因为审批的决策路径短、流程上都非常简单,但因此就会缺乏规范保障。比如在外出办公时,看似只需要与老板当面进行口头上的沟通即可,但是在外出出现意外时,由于缺乏外出办公的相关证据,员工的权益则很难得到保障

大公司:因为审批的决策路径长,流程上都极其复杂,因此会在多人协作下完成整个流程审批。比如想要申请购买办公用品时,会由 行政、Leader、财务 层层审批,从提交审批到最终落实可能需要十天半个月,但是这样的流程,能够确保企业在清查财务状况时,更加有理有据

审批的演变,就是从最开始的规章制度而来。比如在早期去政务机构办理各种业务时,会让你去填写各种纸质表单。在审核过程中,则需要有各个机关的盖章及批准,而这种形式正是政府对于普通市民的自上而下的管理方式


审批其实是整个B端系统的灵魂,因为在B端系统当中,企业想要使用系统的一大痛点便是 核心的管控 

因此你会发现,只要一个独立的系统,一定会存在独立的审批模块。因为B端管理系统当中企业的最终目的,是管理手中的人,而审批便是最为常见的一种手段

审批在如今的B端系统当中,可以理解为它是一组消息,在这一组消息当中会有:“具体的文本、对应的附件、以及照片视频”这些内容都是辅佐 申请人 去讲诉你需要申请的内容

比如我们在申请病假时,往往需要出示 三甲医院所开设的证明,对于这个证明,如何在表单当中出现,你会发现最为常见的便是拍摄证明图片,然后上传到表单当中(这个与字段属性紧密相连,我就不做不过介绍)


审批的这组消息还会有些特殊,因为它非常重要,你可以理解为它是一则“加急消息”会提醒审批人快速的进行处理,同时会告知相关的参与人(处理人、抄送人)审批的进度、并且无论成功与否,都会在系统当中留下 足迹,因此它起到了 “追踪、通知、留存” 三个非常重要的作用,我们首先对于审批进行一个基础的拆解

审批的拆解

如果把审批单独拿出来,你会发现审批会牵涉到 发起人、处理人、抄送人

发起人:

审批的发起人,也是整个审批流程的归属人,他最关心整个审批进展

因为在发起人的角度,创建完审批事项后,可能还需要进入审批页面,完善 后续附加信息、及时了解审批状态、催促审批人的审核、处理驳回意见 等等,因此站在发起人的角度,审批需要尽可能详细的展示 当前审批的状态、完整的审批流程、驳回信息的快速操作、成功信息的必要通知

处理人

审批的处理人主要在审批过程做出决策,因此他更在乎的是审批申请内容的信息。比如 审批的信息内容、直接的审批操作、多条审批的管理

当然,在一些大型的集团企业当中,会将审批分为审批「直接处理人」「间接处理人」(后文以 直处人、间处人 简称)

「直处人」作为审批的第一处理人,也就意味着他的意见至关重要,如果「直处人」通过过后,相对而言整条审批的通过几率会大大增加。通常「直处人」是作为申请人的直系领导居多,因此多数情况下可以理解为直属领导进行 “把关”

「间处人」作为审批的后续处理人,同样在流程当中也十分重要。但在有些情况下,比如一些偏平化管理的企业,「间处人」更多像是“权利”的象征,因为权利已经下放给「直处人」,而「间处人」起到知晓审批以及企业的规章制度要求

抄送人

审批抄送人主要起到通知对应角色的作用,因为一条审批的出现,会造成诸多影响,假设今天你需要申请事假,如何通知同部门的其他成员呢?

发送即时消息,显得过于简单;每个打电话,又有些麻烦;发送企业邮件,又怕他们没有看到

这时候抄送人会显得尤为关键

通常抄送会有企业流程上管理员配置的固定抄送人,以及发起人选择的自行抄送人 两种类型

固定抄送人 角色通常与管理员配置整个流程有关,他是角色当中 管理员 所配置的重要通知人,比如今天你的请假信息,肯定会告知行政,像这类默认的通知流程,则可以将其设为固定抄送人

自行选择抄送人 则是提供给发起人自行选择,该条审批可能会影响到的相关人群。比如就是发送给同事,让他们知晓今天你不在岗位上,因此自行选择可以增加审批抄送的灵活性

这里肯定会有很多读者会问,我选择抄送人与我发消息给同事,有什么区别么?

看似完全相同,实则有明确的区分

通过消息,将审批内容传达,本质上是你自行将内容发送给对方,对方会对于你这个消息的真实性会产生疑问?你是否通知了

而选择抄送,更为权威,更能体现你这条消息的真实性,并且整个流程都已经由领导进行批准,因此不会存在太大问题

其实审批的本质就是一组消息,而这一组消息当中,申请人 通过 表单配置 去获取需要补充的消息内容,而流程会根据企业所配置的流程方式将这一组消息进行合并转发给对应人,而审批人则需要对这一组消息进行回复“通过、驳回” 来让整个流程继续延续

审批流程

审批当中,最主要的便是流程。因为你可以通过查看流程图,去了解整个企业的组织架构、规章制度、员工管理方式

1.串行审批/依次审批

串行审批主要是指当一个审核节点通过后,才能进入下一个审核节点。如果节点驳回,则可以根据业务实际需要,配置驳回的返回路径,会有:拨回到发起人、驳回到上一个节点、或驳回之前任意一个节点 重新审批


2.并行审批

并行审批是指一个审批节点存在多个角色同时审批,这里会存在两种情况

  1. 任何一个人审批通过,则可以进入下个节点,这也就是系统当中常说的 「或签」

  2. 所有审批人员通过,才能进入下个节点,这也是系统当中常说的 「会签」


3. 条件审批

条件审批就是将企业当中的规章制度映射到实际的项目当中,通常就是某个审批内容会根据 金额多少、实际数量 等 进而选择哪个角色进行审批

比如销售人员在申请一个合同审批时,会根据合同金额的不同,审批人也会有所差异

  • 当金额小于8000时,合同直接由财务专员进行审批,进而让流程进行快速审批

  • 当金额大于8000时,合同会由销售主管进行审批,让销售主管能够掌握企业的重要合同


4.自主审批

通过发起人选定一个审批事项后,将自主选择后续的审批内容,进而实现审批的后续选择。这是一种较为灵活的审批流程,当企业尚未形成标准化流程时,自主的核心就是当发起人发起一个审批,提交时需要自行选择下一个环节的审批人。而下一个环节的审批人审批通过后,可以选择继续流转到再下一个人去审批,或者结束这个流程

审批页面梳理

审批的背后,它映射的其实是企业的一条条管理制度,而它的设计一定是要满足企业的实际需求。因为你负责的产品不是为某一家企业提供的服务(定制化产品),并且企业管理制度的变动其实是家常便饭,你需要去考虑一个通用的解决方案,这个解决方案拆解下来会分为三个内容,分别是:申请表单、流程配置、更多配置 进行讲解

1.审批表单

审批表单是最为一个“简单”的用户可配置化表单,因为现如今大多数B端产品都是以 SaaS 作为基础(如果是定制化产品 它的审批内容、流程也不会是固定不变的)也就意味着审批表单需要为企业提供“DIY”的方式,通过表单提供不同的字段类型,去构建审批的实际要求


比如在一个选择请假时,年假、事假、病假、婚假 等的要求都会有所不同

如何知道他们的差别,其实可以根据《劳动法》的相关规定 以及 各个其实的实际公司制度,进行个性化的处理

在申请婚假时,需要上传你的结婚证,以证明其真实性;在病假时,需要有3甲医院的病情证明;在年假时,则需要有你的剩余年假天数。而这些特殊诉求,其实都需要在表单当中进行各种定制化表单

当然这只是极为常见的 请假 场景,而在实际业务当中的复杂场景(更多需要将 审批与其他系统关联)一个简单的表单是没有办法进行满足

这也是很多企业会发现,无论是飞书、钉钉、企业微信,都没有办法满足其实际流程需求。又没有办法改变自身流程,只能够自研、定制化 产品,这也是为什么即便各行各业都有了初具规模的 SaaS 产品,但是还是会有很多企业愿意自行研发软件


2.流程配置

企业可以根据自身的系统流程,在流程配置当中去定制特定的流程。在这个页面的设计上,需要注意不同参与人的状态,以及复杂流程时如何才能够进行清晰的阅读,因此增加了 颜色区分(发起人、审批人、抄送人)+ 视图缩放 功能

颜色自然不必多说,整个系统需要统一,因此不能够只考虑在管理后台的颜色,是一定要在详情页当中也能过保证颜色的一致。这样才能够满足实际业务所需

视图缩放只是小小提一下,常见的视图缩放会放在左侧,至于为什么,自己稍稍揣摩揣摩

由于流程配置的属性页面会涉及很多表单的复杂逻辑,这个只能够留在我的 训练营的课程 当中进行拆解,这里就不过多赘述


3.更多配置

更多配置项则是审批在实际情况下的特殊处理,比如:申请人修改审批的具体时间、能够将审批转发给其他人、出现多次相同的审批人是否去重 等等...  其实就是将审批的设计方案进行“赋能”,去满足更多企业在实际场景当中的需求,感兴趣的同学可以去 钉钉、飞书 了解详情


结语

审批,核心还是提高企业运转效率,如果在审批之间,还需要不同角色私下反复沟通,本质上就失去了审批的意义。而审批本身,就是一个典型的B端产品 从场景到需求,进而研发功能,最后又回归场景,你设计的好与坏,落地到真实的场景当中,试试便知

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

文章来源:站酷 作者:CE青年
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


B端体验设计-与复杂共处

鹤鹤

“复杂是世界的一部分,但它不应该令人困惑,好的设计帮我们驯服复杂,不是让事物变简单(如果复杂是符合需求的),而是去管理复杂”--唐纳德·A·诺曼



与复杂共处,这是一个有趣的话题。在这个奉行“少即是多”的时代,设计师对于复杂噤若寒蝉,认为优秀的设计应该简洁明了,若无必要,勿增实体,而复杂则常备被视作失败设计的标签。设计师为了保持设计上的简约挖空心思,甚至试图通过削弱功能的方式来降低产品的复杂度,得到自己想象中的完美设计。然而一味追求“简单”的设计真的符合用户的实际需求吗?从心理学的角度来看,复杂的事物往往功能强大,而功能强大意味着更好的服务与更高的价值,用户也更愿意为之付费。当我们购买商品时,我们会仔细斟酌,拿着产品的功能列表反复比对,这个时候我们忘记了产品复杂与否,更多考虑的是功能是否满足自身需求。


对于大部分B端产品而言,复杂或许难以避免,复杂是出于实实在在的业务的需要,而非某位设计师的错误喜好。B端产品之所以给人感觉会相对复杂,是因为产品需要完成复杂的工作任务,界面内承载的信息内容较多,在视觉上会带给用户压力,直观感受上觉得产品很复杂。但是这些信息又都是必需的,如果缺少这些必要的信息,会对用户理解和使用产品造成阻碍。就如同飞机的驾驶舱,密密麻麻的按钮如此复杂,但是每一个按钮都有着相应的功能,不可或缺。既然复杂难以避免,那么作为设计师我们不应该被动接受或盲目拒绝复杂,我们应该学会如何与复杂共处,去尝试驯服复杂、管理复杂。


理性看待复杂


相信很多设计师和我一样,经历过现代主义浪潮的洗礼,对于简约的设计有着或多或少的偏好。因为这种偏好,在自己进行设计时也希望能够选用这种风格,在设计时刻意的去追求界面简约,却忽略了界面上的简约不等同于产品易于理解和使用。从心理学的角度上看,复杂的事物更容易理解,简单的事物反倒令人困惑,一味的追求简单反而会让事物变得复杂。


B端产品的目标是降本提效,追求简约的设计思想在B端产品的设计中并没有那么适用,为了提升用户的操作效率,我们需要将一些能够帮助用户理解的信息与常用的操作直观的展示给用户。这会在一定程度上增加界面的复杂度,但是相较于产品视觉界面会因此变得复杂,产品的易用性和操作效率对于B端产品而言会更为重要。


与复杂共处的前提是能够理性地看待复杂,复杂本身的含义即非褒义也非贬义。复杂描述的是事物的状态,它在词典上的解释是拥有很多即错综复杂又相互关联的组成部分的事物。产品复杂与否是由产品本身所从事的业务和需要完成的任务来决定,就像我们不能要求一个做机械结构设计的工程软件做得像一个图画板一样简单,因为两者的功能需求不是一个层面的,所以我们也不能单纯的将产品简洁还复杂作为评判一款产品优秀与否的标准。


分清复杂与困惑


我们之所以对复杂怀有畏惧,其实更多的是畏惧令人困惑的复杂,复杂与困惑有着本质的区别,理解他们之间的区别很有必要,复杂描述的是事物的状态,而困惑表述的是用户使用产品时的心理。复杂的背后可以拥有规则与逻辑,理解这些规则和逻辑,能够帮助我们理解和使用产品。而令人困惑的产品往往缺少这样的内在规则与逻辑,用户难以理解产品的运转机制,需要花费很大力气才能完成有效操作,容易让用户产生挫败感。产品可以是复杂的,但是不应该让用户困惑。


在很多复杂的传统线下业务数字化转型的过程中,为了让产品易于使用,设计师需要深入到一线,去了解真实用户在线下业务场景中是如何处理日常任务的,在流程线上化过程中也需要遵循这样的业务流程,这样能够让用户更快上手,而如果我们在设计过程中不去参考用户在线下的操作场景,按照自己的想法去意测用户的行为,这样设计出的产品背离了用户的心理模型,缺乏内在逻辑,会让用户感到混乱困惑,陷入深深的麻烦。


基于产品本身功能需要,我们可能无法很主观的去降低产品的复杂度,这就需要我们在进行产品设计时花费更多的心思,通过对业务流程、页面布局、信息呈现上的调整与设计让产品变得清晰,不让用户陷入困惑。如下图的关于表单编辑器的A\B两种设计,用户在编辑器内完成一系列针对表单的编辑、配置操作,然后发布表单。方案A中将这些表单编辑配置项通过tab进行排列,这种方式结构简单,但是扩展性较差,过多的栏目也容易让用户陷入困惑,不清楚需要完成哪些配置项才能进行发布。方案B中采用了步骤导航加侧栏导航的双层导航结构,在步骤导航上给出完成表单编辑配置的主要步骤,在大的步骤下用侧栏导航承载小的编辑项,结构清晰,且能够对用户编辑表单提供一定的帮助指引。虽然两种方案信息内容上都一致,视觉观感上甚至方案B更为复杂,但是方案B在这里可能是更合适的方案,因为方案B在配置流程的指引上更为清晰,也更贴近用户心理模型,即使没有使用过在线表单的用户也能理解产品流程,因而用户能够更容易的完成表单配置并发布表单。



功能决定产品的复杂程度


我们在使用产品时,都会有一个大概的心理预期,会认为某一类型的产品会较为复杂,某一类型的产品会相对简单。为什么我们会有这样的认知呢?是因为我们知道这些产品大概有哪些功能,而这些功能就决定了产品的复杂层度。产品的复杂程度由产品的业务与功能决定,而不是依照设计师的自我喜好,像如淘宝、京东这类的购物网站、拥有着很多的栏目,所以淘宝、京东的界面相对来说较为复杂;而像百度这样的搜索引擎功能相对来说比较简单,所以界面设计相对简单干净。


我们可以容许一个功能强大的产品设计得相对复杂,但是一个功能简单的产品设计得复杂难用就是一个灾难。作为设计师我们需要根据产品的实际需要来进行设计,即不过度设计,也不执着于追求简约,而是基于需求恰到好处的进行设计。


复杂产品也能有好的体验


复杂的产品会有好的用户体验吗?答案是肯定的,用户体验的好坏与产品是复杂还是简单并没有直接的关系,很多时候复杂的产品也能带给我们良好的用户体验,在互联网产品中,我们可以看到很多复杂的产品,这些复杂的软件产品,一点点的改变着我们的生活与工作方式,让我们生活与工作变得便捷与高效。


首先可以看看我们的国民级电商应用淘宝,乍看淘宝的界面,可能会觉得十分复杂,甚至会给人一种眼花缭乱的感觉,但是包括我在内的许多人仍然十分喜欢逛淘宝。淘宝内除了有本身的淘宝、天猫店铺外还有专做海淘的天猫国际,做社区团购的淘鲜达,专做拍卖的阿里拍卖等数十个板块,业务繁多,功能复杂,但这几乎很难改变,因为之所以做这些业务和功能背后都有着商业上的考量。从交互设计的角度看,虽然淘宝的业务和功能繁多,却有着清晰的布局、信息对齐、内容组织,产品尽管复杂,但并不令人感到费解和困惑。购物流程也与用户在线下购物流程相仿,贴近用户的心理模型,用户容易了解产品功能、容易与之交互,整体上有着良好的用户体验。



又如我一直在使用的一款笔记软件Notion,Notion相对于印象笔记、有道云笔记而言更为复杂,需要花费一定的时间成本学习才能够从容上手使用,但是这并不妨碍Notion被众多使用者所追捧。Notion的很多功能在使用之前,甚至都不会想到会出现在一款笔记产品里面,如甘特图,多维表格等,这类功能一般出现在项目管理类软件中。而Notion块结构的布局模式,让笔记能够自由拖拽,拥有了极强的自由度,用户可以很自由的用各种各样的形式来记笔记,要是你肯再花一些心思,你甚至可以在Notion内搭建一个个人专属网站来记录的学习知识,打造个人专属知识库。将我们习以为常的线性笔记思维,转变成纵向思维,甚至是网格状思维。Notion无疑是复杂的,但是这样做是为了给用户提供的强大功能和极高的自由度,这些功能恰恰也切合了用户的需求,创造了一种全新的笔记体验,带给用户愉悦的使用感受。



过度简化的潜在风险


简单是产品追求的最终形态吗?其实未必,很多时候产品设计的过度简单反而会给用户带来麻烦。为了追求简单的设计,不可避免的就需要隐藏一些信息或者拉长操作路径,这是一个权衡的过程,我们在做设计时也会经常面临这样的抉择,是追求视觉上的简约美观还是信息传达准确性与操作上的效率。给用户一个简约美观的视觉感受无疑很重要,人们对于美的事物往往更有耐心,也更愿意去探索。但是对于一款针对B端用户的效率软件、办公应用而言,准确的传达信息,帮助用户进行判断,频繁使用的功能设计得更高效便捷,这些点能带给用户更实际价值,也是我们在设计产品时应该优先考虑的点。



特别是在一些专业性的软件中,如果我们为了追求简约而弱化或者省略掉一些关键信息,还有可能会导致用户错误操作的出现,造成严重的后果。试想一下当你在使用软件编写一个计算字段时,软件提供给你了计算公式却没有就近给你提供计算公式的解释和用法示例,导致你因为书写上的不规范使得计算结果频繁出错。这时你可能会满怀愤怒的抱怨为什么产品会如此难用,为什么不能配置过程中给到更多的反馈与帮助信息来减少配置错误的发生。


如何与复杂共处


前面我们了解了关于复杂的定义,认识了复杂与困惑之间的区别,也明确了在B端产品中复杂或许难以避免,复杂是出于实实在在的业务的需要而非某位设计师的错误喜好,既然复杂无法避免,我们就应该学会与复杂共处,管理与驯服复杂。那么如何与复杂共处呢,有一些策略或许可以给予我们一些思路。


1.为产品注入规则


复杂与困惑的本质区别在于复杂的背后隐藏着规则与逻辑,而困惑缺少这样的规则与逻辑,让人无法预测与揣摩,对应到软件产品的设计,一款成功的优秀的软件产品,应该是易学易用、能够满足用户预期,用户能够直观的理解产品的流程与主要功能,并通过产品实现自己的目标。那么具体到软件的设计上我们应该怎样做呢?


这里可以看看我们团队正在使用的研发管理工具TAPD,TAPD是一款敏捷研发协作工具,凝聚了腾讯研发方法及敏捷实践精髓,其中敏捷开发的方法就是TAPD的内在规则与逻辑,有过敏捷开发经验,理解敏捷开发流程的的开发人员能够快速的上手使用TAPD,对于不了解敏捷开发的开发人员也可以通过产品帮助中心学习敏捷开发思想,进而理解产品的功能与流程,因此虽然TAPD功能与页面结构相对复杂,但是基于对敏捷开发的认识用户还是能从产品复杂的功能界面中摸索出一条操作路径,实现自己的目标。这就是产品拥有内核思想以后能够带来的直观好处,将原本零散的功能点通过特定逻辑链接成操作流程,帮助用户更好地理解与使用产品。



相同的在我们公司自己的一个项目中我们也运用了同样的方法,在我们公司之前研发的一款crm产品中,为了给用户提供最佳的销售实践,帮助用户更快上手使用我们的产品,我们在设计产品时寻找了硅谷蓝图团队做了顾问咨询,并依照硅谷蓝图的销售转化路径来构建我们的产品体系,确定产品功能,梳理产品中的业务流程。并希望在以后为客户做实施的过程中能够将硅谷蓝图的销售方法一起带给用户,让用户能够更好地使用我们的产品,实现产品的最高价值,为中小企业销售团队赋能。


通过前面两个案例其实我们可以感受到,当一款复杂的产品有了内在的规则与逻辑以后,用户理解和使用我们的产品会变得更顺畅,用户不会迷失在茫茫的功能之中,通过理解规则与逻辑,用户能够对自己操作结果有一个大概的预期,而不是处于困惑状态,作为设计师的我们也可以将这种规则逻辑作为我们设计的引导,让我们的设计更为系统和有条理,让产品不再是一堆功能的堆叠,各自为战。


2. 贴近用户心理模型设计



复杂是用户的一种心理感受,用户觉得产品复杂除了产品本身结构信息复杂之外,也是因为产品在设计上没有贴合用户的心理预期,用户很难理解产品的流程与交互,所以贴近用户心理进行设计就显得尤为重要。这里我们需要先了解三个概念,实现模型、表现模型和心理模型,三个概念的释义如下:

实现模型:产品是怎样工作的
心里模型:用户认为产品是怎样工作的
表现模型:通过设计来让用户认为产品是怎样工作的


表现模型越接近心理模型,用户就越容易了解产品功能、容易与之交互。表现模型越接近实现模型,用户越难理解产品,产品就越难使用。复杂产品在用户体验过程中的痛点在于用户需要花费时间学习或培训之后才能了解产品的运转机制,很多B端产品在设计时更多的偏向于实现模型,用户在使用产品的过程中会发现很多地方的交互和自己心理预期并不一致,使用过程中会遇到很多的阻碍,影响整体的使用体验。对于一款复杂的产品而言,我们需要让我们产品的表现模型更接近于用户的心理模型,这样用户能够更容易了解产品的功能,并与之交互。


大家使用电脑时有没有遇到过类似下图这样的电脑报错信息,里面是一堆的专业名词,看得人一头雾水。这时候我们能做的只有默默的打开百度,去了解弹窗里面讲的内容究竟是什么,了解后才明白原来这样,然后按照百度上操作步骤一通操作,侥幸解决了问题。但是当下次我们遇到相同问题时,可能还是不知道如何解决,无可避免还是需要求助百度。这个就是表现模型贴近与实现模型会带给用户的困扰,用户不是专业的开发者,他们不了解也不需要了解产品背后的实现逻辑,这对用户而言是没有价值的,给予用户这些信息不能对用户起到预想的帮助作用。贴近实现模型进行设计会让用户与产品交互变得困难,变相的是在人为的增加产品的复杂度,与复杂共处,我们需要学会贴近用户心理进行设计。



3.统一交互模式


复杂的产品往往功能、页面繁多,如果页面内的视觉元素以及交互各自为战,那么放大到整个产品就是一个灾难,不仅是产品给用户感官上不统一、整体性差,过多的交互模式也会增加用户的学习与记忆成本,用户在这些相视功能但是不同的视觉与交互的模块之间容易陷入困惑,对用户使用产品造成困扰。针对这个问题,现在越来越多的公司开始通过搭建组件库的方式来规范自家产品内的视觉与交互,一个规范完整的组件库的确能够在很大程度上解决产品在视觉与交互上的一致性问题,通过模块化解决方案,也能降低冗余的生产成本,实现产品快速开发。因此很多人也认为搭建好组件库就能一次性的解决产品体验一致性问题,但实际上就算一个产品有了一个自己的组件库,依旧还会遇到体验上统一性问题,这是为什么呢?


在原子化设计理论中,粒子是构成页面的最小颗粒,粒子构成简单组件,简单组件到复杂组件,再到区块、页面。虽然用组件能去构建页面,但是还会遇到页面结构、交互不一致的问题,设计师各自使用组件去搭建并不能提升我们的效率和解决设计一致性的问题,在末端设计并没有做到约束。因此我们在构建好组件以后还需要继续抽取出了页面级的组装结构和交互模式。



这里我们拿B端产品中常见的列表页来举例,纵观所有后台列表页面,抽取后无非就分为这么几个区域。不同的业务可以通过基础组件和样式定义符合自己业务线的子模块。比如列表页中的筛选区,在不同的业务场景下,对筛选器的需求也各不相同,简单的可能只需要使用标签选择就能够完成筛选,复杂的可能添加很多的筛选项甚至选项之间还有且或关系,我们需要根据实际的业务场景设计适合的筛选器,但是需要注意的是一个产品中用到的筛选器形式不应太多,我们需要抽取归纳出三四种筛选器形式去覆盖我们产品内所有的筛选场景。来保证产品内不会出现各种相识却有各不相同的筛选器。



B端后台产品中比较常见的还有表单,我们可以归纳出产品内可能会使用到的表单类型,然后定义出具体的框架结构与交互,在具体的设计过程中在根据实际情况选用不同的表单区块。


1.分组表单

一种常见的信息录入以及信息展示表单,这种形式是我们最长用。



2.分步表单

分布表单适用于信息录入项以及信息展示项过多,在一个页面内已经不能合理清晰的组织传递信息,或者表单内容的录入方式或者展示方式存在较大差异,不适宜在一个页面内进行展示时。按照布局的不同也可分为横向步骤和纵向步骤两种。



3.组合表单

组合表单因其结构能够承载更多的信息,每一个栏目都可以承载一个独立的表单页,有效的管理信息。


4.弹窗表单

很多时候我们也会用弹窗来承载表单,好处是交互衔接流畅,不用跳页。



将产品中类似的区块做成最佳的交互模式范例,能够最大的程度的规范我们产品中的交互,这样才能真正的实现产品体验上的统一,化繁为简,让复杂的产品也能够调理清晰,上手简单容易。在面对复杂的系统级软件时,在统一组件样式的基础上还应该统一产品内的交互模式。



信息归纳突出重心


复杂的产品页面内信息往往都特别繁多,如果不做好信息归纳,用户将很难把握住重点内容,信息获取效率低下,十分影响用户的使用体验,所以信息的强弱的整理十分重要,那么什么样的信息是对用户而言重要的信息呢?


信息设计大师爱德华·塔夫特认为优秀的视觉设计应该是“将清晰的思考视觉化”,他还认为只有充分理解观看者的“认知任务”及一些设计原则才能设计出优秀的产品。


如何找到对用户真正重要的信息需要借助到产品设计中一个十分重要的工具--用户模型,通过调研的来得用户模型是对于我们产品客户的抽象归纳,通过用户模型我们可以确定哪些功能对于用户而言是高价值的重要内容该重点突出,哪些内容相对不是那么重要可以弱化处理,通过对于页面内容强弱的划分,用户能够更快的获取到对自己有用的内容,尽管页面仍旧复杂,但是信息划分合理、层级清晰、表意明确的页面人就能够带给用户良好的用户体验,帮助用户高效的处理任务。


说在最后


复杂是产品的本来特性,本身不含褒贬,但是如果复杂不加以控制,让其发展为困惑与混乱,这对于一款产品而言绝对不是一件好事情,这样即使产品功能上很优秀,用户也无法长期忍受,一旦市场上出现替代产品,那么忍受已久的用户也将抛弃产品转向体验更好的新产品。


曾经我也是一个极简主义的追捧者,但是经历过越来越多的设计项目,我开始发现某些产品复杂性是必需的,将产品做得简单并不是其核心诉求。真正需要处理的问题也不是复杂,而是混淆的状态和由此产生的无条理性。解决的方法不是简单的去除几个界面元素,让其在视觉界面上变得简洁干净,而是要让产品拥有内在规则、一致且能够被理解。

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

文章来源:站酷 作者:Yone杨
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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





B端产品界面高屏效初探

鹤鹤

背景

在 B 端设计领域中,不管是内部用户、产品、设计师、开发,还是外部产品、设计师等,总能听到关于界面「屏效」方面的诉求或吐槽。


undefined


「屏效」狭义理解是「界面过度留白」;广义理解,「屏效」源自谐音“坪效”,指的是每坪的面积可以产出多少营业额(营业额/专柜所占总坪数)。而「屏效」对于界面而言可以指屏幕单位时间、单位面积内的信息可以带来多少商业效益/效率提升。


为了探索在 B 端产品中用户为何对「界面过度留白」或「屏效」问题如此敏感,于是我们展开了「屏效」专题的设计探索与实践。「屏效」专题探索主要以「探索」与「实践」相结合的方式展开,将实践过程中反复验证有效的设计策略沉淀成设计手册,同步将部分功能进行工程化,确保可以开箱即用。


undefined


探索阶段-为谁在何时何地设计

用户声音|不同的故事相似的诉求

面向内部设计师和终端用户投放的《高屏效诉求》《中后台产品满意度调研》问卷中认为提高屏效能极大提升用户体验的设计师占 58.14%;认为提升屏效对体验有提升的终端用户占 50.6%。


undefined


外部知乎上针对《Ant Design 4.0 设计价值观》的 13 条反馈里,其中就有 2 点提到关键字「效率」。


undefined


通过了解不同用户和产品类型发现,不同的用户在工作场景的产品使用中有着相似的特征:


undefined



案例收集|发现问题,大胆假设

纵观 B 端产品界面,发现普遍问题和收录在解决屏效问题上实践得比较好的案例,为了逐步突破问题,选择以数据产品中覆盖率极高的表格为设计切入点,通过线上跨产品多端地毯式的体验走查,发现表格三个层次的问题:


undefined


视觉、交互层在无需理解业务场景和用户目标的情况下,都较容易发现,属基础问题,但很多「过度留白」的屏效问题往往是信息被组织方式的差异导致的「过度留白」。

综上我们提出假设:为提高屏效,可从视觉、交互、信息三个层次解决

视觉层为提高信息查阅速度,可以通过提高信息密度;交互层为提高操作速度,可以缩短当前手势到目标之间的距离;信息层为提高信息被理解的速度,可以通过重组织等方式。

基于假设,我们进行了进一步的桌面研究,查阅论文等书籍,寻找设计理论的验证和指导。


竞品分析|寻找实践证据,谨慎验证

我们知道视觉上界面留白过多(过疏会增加滚屏成本,过密因易串行而影响阅读效率),以表格「行高」为例,探索各表格在字号、字高和行高的关系,因为不同字体的同字号实际像素高度会有差异,因此选择的是字高(即文字垂直高度的视觉大小)而非字号或字行高,决定留白的两个重要因子是字高和表格行高,以次推演,界面元素和元素间距的留白关系,探究在视觉层怎样的留白率能保证甚至提升屏效。


undefined


以数据产品中的表格为例,通过直接和间接竞对的方式,分别从数据的查阅(视觉)、分析(交互)维度进行功能点和设计细节上的比对,来看看优秀产品是如何解决屏效问题。

直接竞对:内部用户口碑较好的产品 A、B外界竞对:同领域的 Tableau、网易有数、金山、微软表格;间接竞对:谷歌邮箱、AntD 等的紧凑主题的常规列表(一维表格)


undefined


通过竞品分析可以发现,数据分析领域的表格留白率普遍较低(信息密度高),尤其是金山和微软的电子表格,其次是同类面向数据用户的 Tableau、网易有数,而谷歌邮箱等工作台常用的常规列表紧凑版本中,留白率和数据领域的电子表格不相上下。


紧凑版的使用场景也常常是面对数据量巨大的信息呈现,通过切换紧凑主题,提升信息的快速浏览,而这也非常适合数据分析场景中巨大的数据量呈现。因此我们的产品在留白率的提升空间极大,而在实际案例实践中,也已经将表格行高优化至 30px,克制的使用留白。


除此外,竞品其他层次的设计也做了比对,总结来看整体设计做法:高密度、少屏数、少留白等。


文字陷阱:中英文字高不等于字号


举个容易犯错的竞品参考是,谷歌在紧凑版主题下字号 12px,列表行高是 28px,但在 AntD Table 中同样的 12px 和列表行高 28px 就会发现非常拥挤,缺乏呼吸感。


undefined


原因在于谷歌的 12px 是英文字体,实际字高只有 10px,而 AntD Table 的语境是中文字偏多,实际字高有 12px,所以留白的差异在于一个是 18px(28-10),一个是 16px(28-12),这也是为什么决定决定留白的两个重要因子是「字高」和表格行高,而非「字号」和表格行高,进一步推演,决定界面留白的是「元素视觉高度」和「元素间距」。


论文查阅|寻找理论证据,谨慎验证

研究表明,低密度认知负荷低,但高密度任务完成率高,用户更喜好

参考资料:论文《基于眼动的网页对称性和复杂度对用户认知的影响的研究》

对于信息,用户需要需要阅读(视觉),思考和理解(认知),需要点击按钮、操作鼠标和打字(行动),在人机工程学中,统称为负荷。即认知(记忆)负荷、视觉负荷、动作负荷,即分别对应用户体验设计的三个层级,信息/视觉/交互。而负荷所花费资源从多到少依次为:认知 > 视觉 > 行动。


认知负荷,举个例子,看了但不一定懂了。你是否有这么一种体验——刷抖音,虽然很多(信息密度小,输出效率低),但可以一直刷下去并且刷很久;而看一门 C4D 教学视频,即使就短短十来分钟(信息密度大,输出效率高),但是却要看上半天。因为刷短视频时,你的输入效率远高于作者的输出效率,而看一门 C4D 教学视频时,你的输入效率远低于作者的输出效率。可是,输出效率是客观的,输入效率是主观的。如果输出效率很高,你可以通过提高自己的输入效率(比如让自己成为 C4D 专家)来跟上作者,从而变强;否则输出效率很低(信息质量低),你的输入效率很高(很专业),信息于你而言都是无效的。


假设负荷总量不变的情况下,那么以上三类场景界面需要对用户负担分配大致如下,官网品宣类需要低认知成本,低视觉负担,视觉要求高,用户才会被吸引过来阅读,甚至酷炫的交互更能增加互动体验而带来的趣味感,比如苹果官网,信息量极少、图版率高带来极具艺术的视觉体验、进而吸引用户愿意跟随屏幕滚动渐进式接受信息,而 B 端应用因为是专业使用,首先认知方面随着员工的专业度提高而降低,因此可以通过提高视觉负担,来降低行动负担,进而减少操作用时,当然最佳情况是三个维度能整体降低负担,让总负担降低,就需要更多设计巧思了。


undefined


面向内部设计师和终端用户投放的《高屏效诉求调研》预设解决方案中,设计师常用的 Top 3 做法为:【信息层】隐藏不必要信息、【视觉层】提高布局紧凑度、【交互层】减少点击跳转。


undefined



实践阶段-如何设计

通过以上的探索,我们可以确定的是,B 端产品面向专业人员的工作界面设计中,提高屏效可从视觉、交互、信息三个层次进行,视觉层-高密度,即提高屏幕信息密度;交互层-低跳转,通过减少页面跳转、手势与常用操作的距离等;信息层-有效性,通过重组织或辅助信息帮助用户理解,甚至提供帮助手册等以提高用户专业能力。


undefined


基于以上的总结,对产品进行优化。下面以一个简单案例进行设计策略的解读。一位运营同学想对比 A、B 两不同人群在相同维度(白领-有信用卡)下的人数差异,寻找运营机会点。


如下表格经过高屏效策略优化前后对比图,优化前相同维度下不同人群数量的对比需要视线来回跳动比对,而优化后的表格内容,更符合用户看差异场景下分析目的数据查阅,视线锁定相同维度,即可快速比对数值大小。


undefined


下面以视觉、交互、信息三个层次解剖设计过程背后的思考。


视觉层|高密度-克制的留白

眼动理论:研究表明,人眼最小可视视角 0.3 度,水平最大眼动舒适转动区 30度,垂直最大眼动舒适转动区 55度。可得出人眼最小识别范围 12px,水平视野舒适眼动宽 1200px,垂直视野舒适眼动高 2200px。参考资料:论文《基于眼动交互的用户界面设计与研究》


undefined


如图,缩小表格行高的同时,目标信息之间的眼动距离随之缩短,在眼动舒适区内看到更多信息,便于信息的高效获取。


undefined



交互层|低跳转-高频信息前置

理论基础:菲茨定律是用来预测从任意一点到目标位置所需时间的数学模型,它由保罗·菲茨在1954年首先提出。这个模型考虑了用户定位点的初始位置与目标的相对距离、目标的大小、移动的最短时间。三者之间关系公式为:T=a+blog2(D/W+1),W为其中目标的大小;D为到目标的距离;T为移动到目标所用最短时间。参考资料:菲兹定律


undefined


表格单元格借助交互状态,增加悬浮出现的信息组件,前置显示目标单元格明细信息,同时通过交互出现的指示器辅助行列信息的获取,高频操作考虑手势位置放置,缩短与操作目标的距离,以提高整体操作效率。


undefined



信息层|有效性-信息重组织

理论基础:交互设计四大策略「组织、删除、隐藏、转移」参考资料:《简约至上》


undefined


用户为了对比 A、B 两不同人群在相同维度(白领-有信用卡)下的人数差异,但内容的重组织方式让两数据行需要频繁点击滚动条来查看,根据用户目标,将关联性大的数据放置相邻列(即将要对比的人群放置列头),即可快速查阅,减少眼跳距离。


undefined


结语

设计趋势中常见的大字体大留白界面,但在 B 端场景中,面对紧张的工作节奏,时间和注意力变得尤为可贵,相对而言,基于复杂度守恒定律, B 端信息量大且高频访问的产品中,「用得快」要比「看得美」更重要,「高密度」「低跳转」诠释的即是「空间换时间」,少一次点击,少一次跳转,少一份等待,就多一份时间和效率。

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

文章来源:站酷 作者:Ant_Design
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

B端设计|数据展示控件应用

鹤鹤

将数据查询的条件、逻辑、方式,整理清楚后,那么下一步的内容就是如何将查询后的数据更好的展示给使用者看。到这一步设计师或是产品应该思考的是如何将众多分散的信息,有序的、直观的展示出来,并且辅助使用者解决问题,为产品提效。 

数据展示主要以表格为主,由业务需要对表格进行扩展,结合其他组件使用;其次是列表,列表与卡片样式结合的较多。 

设计原则
依然要牢记的一些设计原则,即:简洁清晰、灵活高效 
简洁清晰:剔除不必要的装饰元素,避免过度; 
灵活高效:在现有的规范指导下,根据不同业务的不同需求,快速组合多种样式的表格,提升设计效率,也要兼顾减少开发代码冗余; 

一、表格 

基础表格包括几点基本要素:表名、列名、数据、翻页,这些构成了表格的主体框架,而在真实场景里使用的表格都是升级版本,补充了更多功能作为辅助,比如排序、筛选、操作、导入导出...... 

数据筛选:不同于查询模块的筛选方式,直接在表头标签操作,一般会以“倒三角形”图标展示,通常应用在这一条数据处在哪种状态,例如:进行中、未开始、已完成、已取消、审核中; 


排序:现在比较少的应用,因为排序大多是对时间上的排序,而一般一个新的数据也是按照时间倒序展示,在第一行展示; 

操作:对某一条数据的操作,或查看或编辑或删除; 

导入导出:对超过一定量的数据,会进行导入数据,导出数据,当然会有遵循一定的规则,才能和线上表格数据类型一一对应上; 

实际工作中,我们都是根据产品需求和业务需要对表格进行补充辅助功能的,在设计表格的时候,总结下来通常会遇到下列几类问题: 


  • 有层级关系的数据该怎么展示?

  • 一条数据有父子关系,该如何展示?

  • 一条数据类型太多,表格容不下怎么展示?

  • 一些数据其中的一类型字段较长,其他类型字段段,甚至只有几个字,该怎么展示?

  • 一组数据,数据不全,类型不全,部分数据是共同的主体,该怎么展示?




除此之外还有树表结合的、表格套娃 

对于这些常见的问题,在设计时会充分考虑这一领域的专业操作者,特别是从事医疗行业的专业人士,严谨的数据要求会比较高。 

1、数据的层级关系 

在相关医疗数据的管理系统里,因为医疗数据的复杂和严谨性,常见的表格展示不能满足层级关系的表达,所以在视觉呈现上增加结构化层级关系。 

2、数据本身的父子集关系 
另外就是同属一条数据之下,还会进行细分多个子数据,并对应的归类列项; 

3、并不好看的数据 
上边两种说的是工作里典型数据结构的层级关系,并且数据容量相对美观,不多不少。而实际的数据没有那么美好,数据长短是参差不齐的,所以在考虑上述两个设计原则的基础上还需满足,可阅读和最大化兼容; 

在一组数据中,单条数据中某一个类型的字段很长,管理系统里表格的容量是有限的,所以在可行性的前提下,对这部分数据缩短,可以按照需要但不重要的要求,隐藏部分,将主要信息显示出来,并给予查看全部信息的入口。 

4、残缺不齐的数据 
上述的说的数据还是比较好看的,而真实数据是残缺不全的,甚至部分数据是“丢失”的,而且列项类型很多,表格横向宽度是不够的。 
那么此时通过两种方式优化这块内容:一种是固定左右边际列项,中部滑动;另一个种将空数据的列项隐藏,并给予条件选择,按需展示数据的哪些列项; 
当然在患者端也会有患者头像,那么在管理系统里的患者表格相对应的头像,另外也存在患者上传的文件(图片),也会以缩略图的形式展示在表格中。一般会将所有涉及到的图片(头像、文件)规范统一的大小尺寸。 

二、列表

另一个常用的列表了,常和表格组合使用的,另外在某一条数据详情里也比较常见。在视觉表现上与表格并无多大的差异,较明显的就是列表没有列名名称,实质上的区别是在前端编写代码上的区别。(希望这个图能帮到在座的各位设计师朋友们,和前端叫法意见不同时,可以了解下,毕竟你在看视觉时,他/她在想用什么代码写出来) 
列表一般几个场景下会出现: 
会根据数据“长”的怎么样,然后采用不同的形式去展示数据,让它“好看”些,且更容易被阅读和理解。 

查询筛选类 

1、也会遇到查询条件较多的,那么以多组列表形式出现,两组或是三组。多重的查询条件,就不叙述场景了,查询是最基本的常用方式。 

2、遇到多组筛选条件,考虑电商网页版的筛选和布局方式,因为它主要是表达对数据的筛选不同类型的多组联合后,能够符合产品需求预期的结果。 

段落数据类 

1、卡片列表,针对的是单条结果信息内容较多,一条信息占据一行,把重点区别于其他信息展示给管理者查看,便于识别。基本信息、现病史,省去二次点击详情查看操作。 
除了上述所说的段落形式的内容,也有内容是分点和分类型的展示,主要是满足直观可见,提升效率为主。 

2、九宫格列表,同样,对于上述的分点类型的卡片列表,在数据容量的允许下,可以采用视觉上的九空格,将一级重要信息突出,作为识别来源,二级信息附着。为什么这么做呢,因为信息更突出呐~ 

详情类 
对于详情内容,即一条数据的完整展示,如无必要,别起新页,痛苦操作给大家的忠告~~~可用模态弹窗,将信息展示出来,条理清晰,又明朗是不是 
三、总结
还是以一贯的方式来呈现视觉,需求先行、数据先行,再考虑后边的视觉展示,理解了业务需求,才能让视觉表现能够更好的符合需求,并且兼顾对后期的数据变化考虑可扩展的空间。 

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

文章来源:站酷 作者:啊呜計
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



B端产品设计分析方法总结

鹤鹤

做一个完整B端系统项目前,从交互设计的七大定律,B端产品业务调研,用户访谈研究方法,精准推导B端用户画像,到B端产品主风格的设计定调,深度理解B端主流组件库的视觉规范,进而为B端产品设计做充分的准备工作,以下内容较多,大家可以根据上述目录来进行选择性阅读。

1.1 B端组件库的概念及作用


概念:组件库的底层逻辑就是原子理论,类似于我们在拼乐高积木的时候,根据说明书一个模块一个模块来拼凑,先找零件,再拼成部件,然后是成品,这个过程和UI中的组件化是一模一样的,组件化就是原子理论集中得表现,原子(图标、按钮、字体样式等)——分子(标签栏、导航栏、搜索框等)——有机体(图文列表、内容卡片、布局模块、瀑布流图等)——模板(原子、分子组合排列组成了模板,也就是原型图)——界面(最后根据原型图形成视觉设计稿)


作用:一致性:比如在不同得界面中,如果用样的按钮,他的按钮的展现形式,要保持一致性。

高效性:比如所有的按钮不用单独去设计了,从组件库里调用就可以,这样对于设计师来说就是高效的。对用户来说,也会让用户的使用效率提升,比如当用户看到蓝色的按钮就是可以提交的按钮,看到白色得按钮就是次要得按钮,看到不带边框的按钮就是一个危险按钮等等。

组合性:通过调用不同的组件来进行组合可以形成不同的页面。


1.2 如何正确使用组件库


1.2.1 组件库的使用前提

一些主流的组件库,比如AntDesign、Element Design、ZanDesign组件库等,这些框架机构本质都差不太多, 但他们有自己的特点,具体用哪个组件库,通常由公司的架构师来进行架构选型,比如VUE(Element Design)和REACT(Ant Design),这是两种不同的技术选型,(VUE和REACT是一种前端框架的技术架构版本,可帮助前端工程师快速进行开发的前端框架)。从技术角度讲,大部分公司会首选AntDesign(React),因为有很多案例提供,VUE和有赞也可以但用的少。从设计角度,Ant Design得设计组件形式案例很完善。Element Design做起来视觉单一得样式白白得感觉,没有设计层次化,Ant Design更好看一点。所以先选择底层的前端框架,再根据这个选择前端的机构布局。

1.2.2 组件库的使用过程

设计师和前端最终目标是一样的,都是快完成保证设计质量的,原生组件不能达到要求的时候,设计师可以根据原生组件库修改样式来表达到自己的想法。但对前端来说最好什么都别改,就用原生组件库前端工程师直接复制就行,这也是因为我们设计师的要求和前端的要求是不一样的。但修改后样式的组件,底层逻辑还是原来的组件。从Antdesign等组件库里复制出来,经过figma里的各种功能操作后,比如分离组件、改变组件得形状、替换内容等,但这个组件仍然是Antdesign里的组件,组件是否改变取决于,这个图形,这个组件是不是已经代码化,我们设计师设计的组件,只是样式,需要经过前端来形成代码,只有代码化的组件,才是组件,如果没有代码化,那只是一个样式而已。所以,我们用Antdesign里是已经实现代码化了得组件,组件库里有的组件前端一定是可以代码实现的。


1.3 如何设计组件库


1.3.1 每个项目都会分这四个周期


项目初期:在一个B端项目得初期,大家都会有疑问,B端组件库应该什么时候开始建立?是不是先建组件库再开始设计?答案是,如果不是从0开始的项目,组件库在设计之初就应该建立起来,如果项目是从0开始,由于没有业务的案例,组件库组件库也无法建立,但可以建立一些最小元素:原子。比如字体(应该用什么样的字体,在正标题,副标题,大标题,正常情况下应该怎么样使用字体的得明度)、色彩(色彩规范是什么,比如医疗行业,航空行业,交通行业应该用什么色彩,决定主色不是好不好看,而是由企业来决定得,首先了解企业的VI色,通过结合VI色和产品分析出的用户画像特征,来确定主色,辅主色,确定主色后,相应的背景色、深色背景、浅色背景、灰度背景、卡片背景等,也就都可以做出来了)、按钮(通常状态,点击状态,当前焦点状态,不可点状态)、基本控件、布局栅格、图表(图标icon、文本标签、按钮、图表)、图标;通过建立原子组件,完成一些基本典型的页面设计。

项目中期:继续完善基本组件库,应用案例的完善,迭代组件库、样例库、最佳实践案例。然后再次迭代进入基本组件库。


项目后期:形成最终组件库与设计系统的规范建立,根据项目不一样详细程度也可以不一样。


延展期:为项目2.0升级准备根据使用反馈、迭代之前得组件库与规范,预计未来版本中出现的典型案例,并针对性的设计应用组件。通常很少有公司进行到这一步。


1.3.2 组件库的开发流程


1.3.3 B端组件库存在的价值


B端组件库的存在是不是意味着不需要设计师了?其实并不是,组件库可以帮助设计师增进设计效率和沟通效率,和前端沟通告知按照对应的选型组件库规范使用就可以了,同时组件库得一致性、准确性、协同性它的质量有保证。但设计师做完组件库后,继续需要关注的点是:

01、根据业务场景来优化设计组件库:因为组件库是一定会去更新的,如有必要再去更新,那一定会是很复杂得业务场景下去做更新的,这个业务场景是程序员或者以前的组件不能实现的,需要很强的设计技能去做迭代,所以需要设计师继续去做一些结合业务场景的组件来放到组件库里。

02、需要设计师把更多时间精力投入更多设计体验中,而非搬砖:组件库的建立同时解放了设计师的精力,设计师可以把时间投入到设计体验中去,而不是做一些搬砖得工作,比如按钮怎么画,用圆角还是用什么颜色,这些没有技术含量的工作,这样一来,可以投入更多时间来赋能业务更好体验设计工作。


1.3.4 B端主流组件库有哪些

2.1 B端产品的设计过程


2.1.1 用户体验五要素


战略层(属于产品愿景,满足用户的需求,产品的愿景和目标


由于用户有不同的需求进而产生了不同的产品,战略层决定了用户用干什么样的产品,比如,用户需有很多销售客户的线索需要进行管理,用户需要管理客户,那就做一个CRM系统。比如,用户想写日报,想要一个打卡的OA系统,那么产品目标就是要做一个OA系统。比如,电商里面很多商品,牵扯到很多进销存,那就做一个ERP系统。这部分跟设计师相关度没有那么高。


范围层(指功能规划,功能的规格、包括内容的需求)

功能规划:比如要做一个OA系统,其中就包含了打卡、日报、项目管理、报销、人事流转等等都是跟办公相关联的,需要把规格和功能画出来,画成简单的表格并且将它们分类,这里所有的功能都不是详细的,就是简单的分类,将功能简单描述一下,同时做一个简单的用户画像。这部分设计师只需要阅读产品经理给到得PRD需求文档即可,整体看还是偏愿景,没有形成具体的产出。比如OA系统中就总结出重点做一个审批得功能,并不知道什么样的界面,只知道一个大概的范围。


结构层(指原型设计)

这部分,设计师通常就需要参与进来,如果设计师只按产品给的设计好的原型来设计,就显得很被动,这样只能叫做视觉美化,被称之为美工,设计师应该从没有形成原型的时候,可能只是一个简单的PRD需求文档或者草图,设计师就应该参与进去。


设计师对原型进行优化设计,优化的不是业务,因为很多业务内容肯定没有产品经理了解得深刻入,这时,设计师需要优化的其实是它的交互逻辑、交互内容,一旦原型里里产生点击,一旦产生多种状态,那就要去了解它,每种状态产生不一样的界面结果,其实对标的就是设计师设计的界面将产生什么样的变化,换句话说,如果有界面的变化,内容得变化,设计师就需要参与到其中。目前来看,很少公司有专门的交互设计师,要么这部分工作由UI设计师来完成,要么由产品经理来完成,很多企业已经把设计进行前置化,由UI设计师来完成交互的工作。


其中交互设计+信息架构设计是设计原型图的关键,这两个是密不可分的,如何制作原型图,如何在原型图里设置一些交互事件,给大家推荐《信息架构设计》这本书里有专门讲到。再了解原型设计之前,不得不提到一个通用知识点,交互设计的七大定律。(后文有介绍)


框架层(指界面设计、组件设计)

框架层这部分有一些争议,有的设计师认为就直接做界面设计了,其实框架层还不能把它理解成是界面设计,它仅仅是做了一些业务的模块儿的框架而已,更多的其实是将它组件化: 将原型组件化、模块儿化,类似我们直接从Antdesign组件库复制来内容简单改改之类得操作,完成的是组件和界面的设计,这些界面并不是最终完整的交付样式。


表现层(可视化呈现,UI视觉呈现)

这部分和设计师关联度最大的一部分,就是界面中的配色、配色、图标、样式、结构、布局、排版等设计,但是我们设计师需要从范围层了解业务熟悉最初PRD产品需求文档去一点点做起,其中设计师在战略层参与度可能只有2%左右,范围层参与度5%左右,从结构层开始逐步往上参与度越来越高,至少结构层,框架层和表现层的参与度是很深得。



2.1.2 B端产品的设计过程是什么

所以,通过梳理用户体验五要素,不难看出B端UI设计师的工作流程就是,01. 接到项目后,设计师主要阅读产品经理给到的PRD需求文档,同时去参与原型设计,根据最初版PRD输出一份低保真原型图,和其他部门进行初次评审;02. 经过初次评审讨论过后,完善后的功能和页面文案,产品经理补全和输出完善后的产品PRD需求文档,由设计师根据完善后得PRD需求文档经过规范设计输出高保真原型图 ,与其他部门带着初次评审讨论后的问题,进行二次评审。03. 最终再由设计师经过组件化形成视觉图。04. 同时设计师提供切图,与前端紧密沟通,上线前制作设计走查表,进行设计走查。05、最后上线后根据数据、用户反馈等提出交互和视觉可优化得方案建议,进行版本迭代。


2.2 交互设计七大定律


01. 菲茨定律:当设计师需要让用户重点去看到页面中某一个突出点,点击到一个区域时,设计师就需要做到适合的大小,适合的区域,适合的位置,适合的形状,适合的颜色。也就是你想让用户点击的时候就突出重点想显示的,不想让用户点击退出的,就把它设计的的足够小。比如按钮得退出和付款,实心付款按钮为主要按钮,虚线置灰退出按钮为次要按钮,比如常说的海报中字要大,logo要大,这些都属于菲茨定律。


02. 席克定律:用户面对的刺激(或选择)越多,他们做出决定的时间就越长,由于用户的时间很宝贵 ,用户没有义务花更多留在我们的网站上,所以我们需要有选择的地方对选择进行分类。


03. 7土2法则(米勒定律):比如圆周率3.1415926,一般都能记住,而如果再往后加几个数字,大家往往很难记住,原因就是经过大量测试,人脑容易记忆7位数字前后得数字,比如设计银行输入密码的时候就用到了7土2 法则,设置密码过多人脑不易记忆。


04. 接近法则:格式塔接近定律指出“彼此靠近的物体或形状似乎形成了组”。


05. 防错原则:当用户在使用产品中,预判用户本身或产品一定会出错时候,可以告诉用户怎么可以不犯错,或者将风险降低。比如电脑的关闭电源键,就允许电脑司机时允许系统犯错,让用户使用关闭电脑电源键进行重启。比如银行取出钱后,银行卡有忘拔现象,银行完全可以做到像光大银行那样去再取钱流程中改成先拔卡再出钞得交互流程,就可以避免忘记拔卡,但其他银行都没有这么改进,仍然是先出钞后拔卡得原因是允许用户犯错。


06. 奥卡姆剃刀原理:化繁为简,如无必要,勿增实体。比如小米电视遥控器的设计,由原来传统的很多遥控器按键只优化成了保留上下左右为数不多的几个重要按键,原来的遥控器数字按钮如果真正要输入数字的时候通过功能性,调出数字来,这样在遥控器得设计中基本只保留20%主要功能按键。这就是交互上的优化。比如在UI界面中,也会用到这个问题,简化文字,把文字用图标替换,还有各种流程得优化等等。


07. 雅克布定律:以用户习惯的使用模式去设计产品,降低用户学习成本,遵从用户使用习惯。 利用现有的思维模型,用户习惯,我们可以创建出色的用户体验,使用户可以专注于自己的任务而不是学习新的模型习惯。



2.3 B端产品用户画像


2.3.1用户画像概念

用户画像又称用户角色,作为一种勾画目标用户、联系用户诉求与设计方向的有效工具,用户画像在各领域得到了广泛应用。用户画像分为两种,不论C端和B端都会做这样的用户画像。总共可分为两部分,基本信息数据和行为数据。


基本信息数据:当我们去了解用户的基本信息的一些数据时,职业,收入,年龄等等,这些和功能有很多的关联度,比如唯品会用户画像关键词是:女性、折扣、白领 ,唯品会产品定位聚焦女性,这些基础信息数据,就能给产品带来很好的结果,当我们要做一个女性的购物平台的时候,可以先把男性用户抛除掉去考虑设计方向,再比如收入就知道了,大概产品面向的收入群体将是什么收入群体的人,那么我卖货的价格区间、包括设计的风格就是一个什么样群体的设计风格。那些卖奢侈品的不是黑色就是灰色,要不就是棕色,但未必是适合唯品会产品的风格,需要找出这些基本信息去和产品进行关联度,把基本信息放到设计结果中去考虑。


行为数据:指用户的爱好,这部分群体有哪些爱好,是喜欢购物,还是喜欢运动,他/她的消费情况是什么,喜欢旅游还是美食,他/她经常用哪些APP,他常用的设备,是苹果手机呢还是安卓,小米还是华为,等等得到这些数据,也能得到一些用户喜欢什么样的竞品,这些数据就能侧面的在我们的产品中得到反馈,得到功能和设计上的指导和其他产品的区别。这些行为数据,不管我们做C端还是B端,都要获取到,但C端和B端获取到这些行为数据的结论是不一样的。因为C端用户研究方法不一定适用在B端用户研究方法。C端最终抽象成一个人,给他带来的很多属性,这些等等都会成为他的用户画像。

进而找到这个人,将他的社会属性,从抽象的角度慢慢变得具象,C端是他/她的社会属性,把他做成一个普通的人,这个人有他的社会属性,有他的社会价值,有他的社会行为。比如一个女性,一定喜欢美食,一定会买化妆品。


2.3.2 B端用户画像本质

比如做一个和电影相关的管理系统,电影行业包括很多人员管理,设备管理等,这里不能把用户画像抽象成一个男性或者女性了,而应该把它抽象成一个职业,比如抽象成一个导演,导演需要去管理什么东西,它需要哪些资源去整合。导演就又叫做行业属性坐标。B端不以社会属性去做用户画像,一定以行业坐标去做用户画像,我们在整理作品集的时候需注意不要与C端画像整理混淆。


我们要做一个行业可以不用管他/她是谁,也可以不用管他/她有什么样的社会属性,比如做CRM最重要的在里面起到作用的是,客户关系管理和销售等; 比如做OA系统,就是一般的员工,等级,职能等等,可以看出行业属性(职业属性)决定了他的用户画像的精准度,一定把这个人拉到行业里去研究,研究社会属性没有价值。这是C端和B端做用户研究最大的区别。


2.4 B端产品用户调研


2.4.1用户调研的作用/目的/重要性


01. 了解产品业务需求定位:可以帮助了解目标用户的信息,从用户的角度:未来使用你产品的用户,他理不理解你的产品想要表达什么,你的产品讲了哪些功能。因为很多好的产品我们打开它第一眼就知道要干什么,是给我们做什么的。同时站在设计者的角度:怎么可以把这个产品设计清楚,比如做一个CRM客户关系管理系统,具体管理什么我们是不清晰的,想要清晰就需要通过用户调研这个过程给它展开。


02.解决功能信息架构问题:可以帮助设计师更明确需求功能得合理性和优先级,比如页面标题的使用、标题的层级、需要在信息层级清晰得情况下体现出来,而明确信息层级同样需要通过用户研究体现出来。


03.让可用性测试更加准确:可以帮助锁定合适的测试用户,来测试我们的产品使用程度,使用体验是不是好,这时需要要找目标用户去测试,比如小米有品针对群体是米粉,唯品会针对的群体是职场女性,而不像C端找所有的人去测试。


04.解决团队协作沟通问题:确定用研目标可以有理有据的把设计目标和产品经理的意见达成共识,因为未来一定会多次和产品进行PK,像诸如设计师组件化没用好这些理由也不会是pk点,确定用研护镖可以更好的深度去理解原型图,可以把团队协作沟通的问题解决好。


2.4.2 用户调研的方法


01. 确定研究对象:首先拿到一个产品,拿到一个需求的时候,这个需求通常很模糊,比如只告诉做一款CRM客户关系管理系统,但汽车行业,服装电商行业,保险行业,银行金融等等,都有CRM客户管理系统,不同行业的CRM肯定是不一样的,这时候,比如要做金融的CRM,那研究方向就已经确定了,金融CRM就可以确定去研究金融行业的业务链,业务流程,具体找哪些用户群体,可以根据以往的惊经验和产品的目标去确认。


02. 找研究方法 : 研究方法分主动和被动,我们通常用的方法是被动方法,比如自我报告法:当这个产品产生了一些数据,我们从后台可以拉取这些数据的时候,通过这些数据去分析,这是被动的方法,这个被动的方法所有项目都可以用。而主动的方法,就是观察和采访,主动去找用户去找关联度。


03. 获取到数据 : B端和C端区别之一是提高效率,它要产生的结果只有一个结果,就是减少成本,任何B端的系统都是为了实现这个目标,提高效率和减少成本。所以获取数据,研究数据的方向不能偏离搞错,用户研究的方向不要搞错。比如我们以用户为中心来设计,就会认为用户的操作体验感是第一位的,其实不对,放在第一位去考虑的应该是以系统的最优化,提升效率为第一位,而用户也可以为这件事情做一些改变而找到平衡点,数据导向得提高效率,减少成本有时会大于用户的操作体验。


04. 用研行为: 刚才前面提到的这些注意事项,到底应该找什么方法去得到这些数据呢?第一我们可以通过后台数据比如通过百度统计等系统来获得;第二通过问卷法发出一些问卷,用户可能散落在全国不同位置;第三可以通过用户定性访谈来获得;第四可以通过用户旅程图来决定用研行为。


05. 分析调研结果: 研究结果不是为了放到我们的B端作品集里的,而研究结果一定是为了去定性、定量、让数据回归到产品功能本身。同时经常问自己这些问题,去根据研究结果和问题进行匹配思考,比如研究了那么多,用到了用户画像得出的结论了么,用到了哪里?在项目中能举个例子吗?采用什么样的视觉去实现了用户体验要素?


2.4.3 B端用户访谈模板


2.4.3.1 用户访谈概念:


01.确定访谈目标:了解目标用户群体,通过访谈信息来进一步构建所需要的用户画像,从而确定设计方案与功能优先级。02. 定性/定量访谈目标:将这些目标定量、定性,选择不同的访问对象,构建不同的角色画像。比如问销售的用户画像,要找不同的访问对象,销售总监,普通实习生等等,三到四个角色,样本越多,用户画像越准确。03. 访谈过程:提前把问题写出来,拿着问题去聊,用录音设备,记录表格,一个提问,一个记录,分开后记录比较准确。04.访谈结束:要做信息汇总,要做分析建模。分析建模就是将信息最终变得有意义。


B端用户访谈模板有30个问题,这30个问题决定了我们的用户画像的精准度和产品的用户画像的价值。用户访谈会问些什么问题呢?当我们调研的时候把问题写出来的时候,就已经解决了一半的问题了。


2.4.3.2 B端用户访谈30问


01、基础特征


岗位:你是从事什么岗位的?是总监还是普通职员?目的是为了知道不同的权限的使用者,进而就可以在系统中设置这些权限。

职责:需要获取到用户不同的需求,因为每一个岗位有不同的职责,他们的需求点也是不一样的。根据这些不同的需求,我们在界面中得动态仪表盘部分,就可以根据不同职责来显示不同的内容。

姓名:可以让访谈记录得到更加真实的体现,目的是可以获得产品的一些真实的基础字段。

年龄:是用户认知和经验度的体现,用户的年龄可以代表他们对行业的认知,和整个企业流程的认知程度,一般性理解,用户的年龄越大,那么他的经验越丰富。

教育:指用户是什么学历,目的是为了了解用户的经历与熟练程度,通常认为,用户的教育越高的人,他们往往使用软件操作的熟练度会越好。

位置:指用户在什么地方来使用,目的是知道了场景与优先级,用户是在写字楼里还是精英场所来使用我们的产品。因此得出基础特征是要得出这些结论,得出这些结论进而反馈到产品中去。


02、行为接触点


使用频次:不同的岗位用户使用功能的优先级是不一样的,用户使用频次越高的功能,这个功能的优先级就越高。了解之后,那在下次迭代的时候就需要把重要级别的功能放在易操作的区域去体现。比如这个重要功能就是一个icon,那么把它放一个快捷入口。

使用时长:也能代表功能的优先级,用户使用时间最长的功能,代表可这个功能优先级很高。

时间段:用户在什么时间段使用的是最多的,我们就知道了这个功能的活跃度,这个数据指标,主要和技术有关,我们可以从后台数据去获得。

使用设备:用户使用设备兼容的优先级,平时用户用什么设备,再访谈过程中,需要问具体使用电脑的分辨率,屏幕的尺寸,屏幕的比例,都可以去实际的调研一下。在我们做B端界面选择屏幕尺寸的时候,可以采用结合实际情况用户使用的屏幕分辨率尺寸来设计界面。

相关软件:用户平时的操作习惯和流程是什么,还会使用其他软件吗?比如他们还用什么其他的竞品,可以继续问用户其他的竞品哪里比较好,哪里是亮点,那最终得到的目标就是用户的操作习惯和流程,这些也可都可以反馈在我们产品中。


03. 使用环境


碎片化时间:主要解决用户场景的问题,比如汽车4S店销售,当你去买车时,销售人员会问,你会买什么样的车,会记录你的年龄,用车习惯,用车时间,姓名,预算,都会记录,销售通常会用一些碎片化的时间去记录。此时就可以得出两个结论:1.我们在设计的时候是否可以考虑让销售充分利用碎片化来进行这些信息的录入,而且方便他的录入,比如他本来只有电脑端,电脑端是一个完整版的功能,我们能不能给他设计出一个移动端来,让销售不用回到电脑屏幕中就可以去记录这些内容。2. 记录时也有两种记录方式,是客户讲话的时候销售去记录还是这些事情做完之后销售再去记录。通过这样的行为会得到这样不同的设计结果,比如有人问你们公司为什么要做B端的移动端设计?以上就可以有理有据去解决销售的场景问题。


用户的操作环境是什么:主要解决视觉体验问题,用户是白天操作还是晚上操作,是在强光环境操作还是弱光环境操作。这些都应该是考的点。比如B端使用的ATM机,应该设计成白色还是深色模式,我们知道一般都是深色模式,是因为通常是室内,它和光线有关系,如果是室外的取款机,四周又没有遮挡,如果还设计成深色,肯定是看不清楚的。比如HMI车载系统,白天模式开了深色,一定会看不清楚。所以要提前判断使用深色模式还是浅色模式,也需要考虑在设计的时候使用什么样的色彩和色调,在室外使用还是室内使用,如果对色彩不怎么挑,那也可以使用VI色,这样一来视觉的保障色就确定了。还可以确定在使用周期时间,要多长时间完成一个操作,应该使用什么样的方法可以尽快完成一个操作。通过用户的操作环境可以得到以上信息。


是否有平行事件:用户在做这件事情的同时,他是不是需要做其他的事情,要得出至少两种平行事件,得到的结论是,我们的界面是不是需要把某些功能整合在一起,因为用户经常是需要同时做这两种事情,同时去打开这两个功能,通过这样的反馈可以把同时使用的这两个功能结合到一起,通过访谈可以得到这样的依据,来进行功能的整合。


04. 主动询问用户观点


用户的驱动力: 去了解激励因素,就知道了什么功能应该做完善,什么功能并没有那么重要。比如汽车销售为什么要录入信息,因为可以增加汽车的销量,录入越准确的用户信息,他的销售量越高。也就是用户做这件事情,他的原因是什么。


用户遇到最难事件: 在工作中或者用户使用过程中遇见了什么样难的事情,这件难的事情,就是产品的痛点,就明白了当前产品迫切需要什么样的功能去帮我们设计师来解决当前产品痛点的问题。


用户遇到最飒事件:他在使用过程中最满意的是什么事情,就是爽点是什么事情,那些产品中解决了用户很好的问题的部分,去把产品更好的放大,让用户继续使用。也就是通过访谈我们知道了产品的爽点是什么。


用户担心事件:在他们使用过程中担心的是什么,我们也要要了解这些隐藏的问题.


用户期望事件: 用户希望得到什么样的改善,最终的目标是想解决什么样的问题,到这一步其实所有问题目前都没有答案,我们可以继续访问,先做记录,不做最终的答案.


问用户目前状态: 我们可以了解待解决的问题,通过产品想解决什么问题,进行收集需求;用户对于产品升级有什么小期待,进行收集需求;通过用户的反馈目前产品的哪些问题,收集到目前反馈的问题;以往问题是否有效解决;进行收集反馈。觉得不错的同类型产品有哪些,通过了解竞品情报,我们可以竞量多问一些 觉得不错的竞品有哪些;目前产品有哪些地方很好,很好的地方要保持,有的产品升级后,以前特别好的功能突然消失了,改了没必要,好的功能保持就可以;前产品有哪些地方不好,我们去优化不好的地方;以往问题是否有效解决,当有问题需要解决的时候,用户的问题是否是通畅的。通过看用户如何反馈,我们可以了解功能倾向,了解整个流程是否通畅


05. 聊生活

发觉人性闪光点,提升产品差异竞争力,1、问目前的生活状态,婚姻状态,有没有孩子,接送孩子的时间,平时有什么爱好?什么爱好不错?发觉人人性的闪光点,好的不好的产品都有共性,B端产品中视觉的倾向是什么?比如有插画,温馨的语言提示,通过什么样的情感设计可以照顾到每个人的生活。


2.4.4 B端用户访谈得出结论


如何判断功能在用户那里好还是不好?前面所有的都只是在记录,现在才是在做判断,判断的第一件事,是做定量的整理,所有的问题都收集到了,也记录到了,至少需要有两个样本,去做定量整理。

2.4.4.1定量整理:行为


第一步是行为的总结,量级的总结,把记录的问题点、功能点和关键词放到表格里面,经常出现,迫切需要解决的是什么问题,较少的问题是什么,偶尔的行为问题是什么,因此偶尔的优先级就不高了,主要关注经常遇到的问题点、功能点和关键词。


2.4.4.2 定量整理:特征


把每个角色按照以下表格里的的特征进行定量的描述,这时候仍然不能找出它的共性点,但已经把用户的特征进行分类整理了,定量之后再去定性。


2.4.4.3 定量整理:特征/角色/流程


这个角色名称是一个具体的名字,比如王某某。以下这张表:可以看到在我们的系统中有哪些的权限,有哪些的角色,他们的需求是怎么样的,这是一个完整的用户画像。用户画像是一个结果,是通过用户访谈的形式完成了用户画像,并不是被动的接受数据信息得出的,所以通过用户访谈的形式进行定量定性分析得到的结果是最准确的。


3.1 建立情绪版


3.1.1 情绪版的概念及作用

本质是将情绪视觉化,情绪版并不是玄学的东西,它确实可以通过图片找到对应的图形元素,因为图形(照片)是可以表达情绪的,比如看到一张照片会感受什么什么情绪:热、冷、饿、干渴、安静、压抑、神秘、恐怖、失落、沮丧、速度、力量这些都是情绪相关的关键词。


情绪版是一个特别快速能和产品,我们的团队包括设计团队进行沟通的一种方式,比如要设计一个界面,需要几天才能设计出来,但我想提前知道一下未来界面设计成什么样子,那就先做一个情绪版,让大家知道,找的方向是什么,这样适合与大家及时的沟通,大家也会明白产品将会做成什么样子,达成产品的最终设计定调。


3.1.2 怎么建立情绪版


01. 提炼关键词:获取本次产品设计中所要实现的产品3-5个必要的关键字词组,其中包括交互或视觉目标,通常由一些比较抽象的形容词组成。比如:在做的产品是医疗行业,那么医疗相关关键字词组是:生命/健康/安全等。


02.关键词发散:通过获取到的关键词的基础上,发散出来一些新的词语,这种发散词汇,不是简单头脑风暴产生的,而是要有目的性的进行提取,要更加的具体。比如刚才举例医疗行业,生命可以继续发散出血液、器官等衍生关键词。


03. 搜索图形: 对之前总结出的几个关键词在图库中进行查找,也可以在直接在behance里找别人收藏好的情绪版图片直接用,效率可能更高一点。


04. 制作情绪版: 搜索大量图片后,挑出我们需要的进行整理,采用一种拼贴方式进行设计排版,拼贴出来需要得到需要得到的色彩,构图,质感和字体。


05. 得出结论: 在图形、色彩、字体、质感、构图,以上五点,得到合适的设计方案,快速与团队进行沟通,直观表达产品清徐,达成产品的设计定调。产品调性(企业调性)其实就是用企业的方式把故事讲述出来,是一种通过情绪版方法来讲故事的方式。


3.2 品牌三元法


3.2.1 品牌三元法为什么逐渐替代情绪版


品牌三元法是通过品牌三板斧模型得出的一个确定设计主风格的一种新得方法,品牌三板斧模型可以总概为用户调研关键的三个维度,一目标用户是谁?二产品服务是什么?三对于目标用户来说,你的产品服务有什么核心价值。当在回答完这三个问题以后,我们其实就已经清楚我们的品牌定位是什么了,因为它的核心优势是比较明显的,这样我们就知道我们将来会面对什么样的人群,去怎样去宣传它的卖点,同时做出产品的差异化。


通过这几年得工作案例设计实践,在确定设计主风格时,情绪版方法逐渐有被品牌三元法替代得趋势,因为情绪版这种把抽象的词不太好表现的词,翻译成图片的方式,比如刚才提到医疗行业的关键词是生命,健康,安全的,设计师找到很多这种相关的图片,挑出来后从这些图片里面找到一个共同的规律,最后去设计。这里面就有两个问题,一个原因是关键词非常的平,生面,安全,健康,很难更准确的表达衍生关键词。另外一个问题是它非常局限设计师的创意,因为它是从一些现有的图片里面然后去挑,所以很多设计师就反馈现有的方法不是很好用,比如当我们想到安全这个词,可能所有人想到都是特别绿的感觉,或者干净这个词,就会统一联想到白色这个画面,大家从一开始想法就差不多,所以它很难体现出创意。所以由于情绪版严重限制了自己的想象力,没办法把产品核心的气质表现出来,虽然情绪版正确但是是一个平庸的结果,大家没办法记住的结果。


3.2.2 如何应用品牌三元法


01. 理性层面(业务层面),传递产品理念:获取本次产品设计中体现业务层面,可以传达产品理念得5-10个关键词,对应的放在左边。


02. 感性层面(人文层面),营造产品氛围:主要体现这个产品给用户带来什么好处,宣传的角度是什么。获取本次产品设计中体现人文层面,可以传达产品氛围的5-10个关键词,对应的放在右边。


03. 个性层面(气质灵魂),创造独特风格:结合理性的业务层面和感性的人文层面,来创作出什么样的画面,和独特风格的感觉。同样总结出5个左右的关键词,放在下边。


04. 结合以上三个维度,提炼主视觉画面:当出现这三部分词的时候,经过思考或者大家一起头脑风暴,可能一开始想到的比较浅,但最终一定能想到一个最终关键词或者特别符合我们这个产品气质的画面,因为以上三部分得出关键词也都是经过品牌三板斧模型推演出有关联的关键词,想到一个符合产品气质的画面并不难,再得出这个主视觉画面后,这就是最终产品调性的主视觉,既符合产品定位,又具有独特的差异性。


05. 传达产品,用视觉语言讲故事:接下来,当这个主题、主视觉确定了以后,在看怎么样用具体的视觉设计技能,去传达我们的产品,也就是用视觉语言来讲故事,具体注意三个方面,一是表像,元素要符合这个视觉主题,二是关联,元素之间要具有关联。三是隐喻,用视觉的手段含蓄的表达产品的一些特性。比如云计算的一些产品,做得比较复杂每一个图标上都有一些曲线切割的画面,这样做的原因其实不是为了炫技,它是为了表达云计算弹性可扩展的特性,好比拍电影,中国人讲究隐晦。


4.1 色彩规范


4.1.1 选色

在系统色彩中,以Antdedign为例,系统色彩里包含了很多不同的色调,但不可能用到这么多颜色,这时要应用选择几个颜色,选几个我们应用的颜色。第一步要做的就是选色,选出应用色彩,这个应用色彩也就是我们建立得视觉规范中的基础色板,在选色时候需注意,要有有明确的心理预期,比如医疗行业中常用蓝色和绿色,就是符合预期的颜色。在基础色板里选择调色,应选择两个相同级别的蓝色和绿色;基础色板里选不同颜色时不要超过三个级别的跳跃;当选择一个确定的颜色时,可以选择草绿或者青绿色来作为辅助色;在基础色板里,最顶部的颜色最适合做背景色,中间的颜色适合做按钮色,底部的颜色适合做状态色,或者小面积文字的填充色,其余就是搭配过度的作用。再比如零售、比如金融行业的产品,会选择不同的颜色,那这些颜色代表了什么,是不是会和企业的VI色是有相符之处,这些都是我们去要考虑的。


4.1.2 注意色彩的两个特性


01. 注意品牌性:体现特性和传播理念、价值观:比如宜家,我们立刻会想到的是黄色和蓝色。比如京东,我们会想到红色。如果是饿了么,我们会想到蓝色。这些都是标识性的色彩,体现和传递的就是品牌理念和价值观。这些颜色一定不是随便选的,比如,宜家的黄色和蓝色,其实是瑞典的国旗的颜色,代表着宜家的来源地来源于瑞典,因为瑞典是一个很强调简约设计的国家,贯穿始终是在强调它的的价值观。一些关键行动点:比如选中的状态,按钮的颜色,在很重要的地方用主色表达,这就是在体现B端的产品的色彩价值观和企业价值观的地方


02. 注意色彩的功能性:色彩需要体现功能有明确的信息以及状态含义,色彩代表它独特的含义,比如成功色,通常会选择绿色,再系统色板里,青绿草绿都可以选。比如出错/删除/失败用红色,表示警告警示。比如链接要用蓝色。


4.2 图标规范

画图标要注意图标的识别性、统一性和独特性。图标首先要一眼看出来表达的含义,其次是图标设计图标的大小,线宽粗细,圆角大小,图标风格等这些都需要统一,最后最好可以体现出图标的独特性,独特性就是差异化,这也是品牌三远法得核心,塑造产品的差异化,具体分析方法也可应用在图表设计当中,比如根据品牌基因进行延展,也可根据主风格主视觉设计定调,设计出独特风格且符合产品定位得图标应用在产品当中。


4.3 文字规范


4.3.1 字体家族

在B端页面中字体的显示顺序,有固定的一套代码模式,可以理解为,比如有的用户电脑没有平方字体,所以会显示出冬青黑体,来替代平方字体的设计稿,如果没有冬青黑体,就用微软雅黑替代显示,字体家族中,从左到右代表了字体显示的有限顺序,平方、冬青黑体、微软雅黑、黑体、宋体,中英文都是。


4.3.2 主字体

在系统中有中文常用PingFangSC、微软雅黑、思源黑体;英文常用San FranciscoUI(SF字体)、Helvetica Neue、Arial


4.3.3 大小与行高


方法一:在Antdesign中规定的,比如字体大小是14px,行高就是22px。规范里最小字体是14px,但可能有注释字体,字号最小是12px。表格里的内容是按照表格里的行高来约定的,与字体行高无关,这个前提是,不在表格里内。当没有出现文本字体,表格里的字体的时候就需要去设置字体的行高,Figma里默认行高是140%,比如14px字体,行高就设置成22。这是Antdesign里的规范,但不是唯一的规范。需要注意的是,如果使用一个标准就全部使用一个标准,这个需要把选中文字段落进行调整行高。


方法二:是当按倍率去算的行高规范,方法步骤是先调整好行高,去改变字体大小,比如无行高时,1/100%/1倍行高,注意加上%号;紧凑行高,1.3行高/130%;常规行高1.5行高/150%;宽松行高,1.7行高/170%。


4.3.4 文字的层级关系

辅助文字12px、正文(小)13px、正文(常规)14px、小标题(16px,小标题是相对于14号字出现的)、标题18px、主标题20px


4.3.5 字重

比如常用的苹方有6个字重,但在平时的设计中根本用不上。中文环境6个字重在实际显示并没那么好,常用两个字体,萍方常规体400(常规),苹方中黑体500(粗体)。而英文可以用粗体600。


4.3.6 字体颜色

在深色背景下、和浅色背景下不同内容的色彩透明度不同,具体透明度用百分比显示。在彩色背景下或者在不同颜色之下,字体应该使用白色还是黑色,应该按着规范严格使用,难点在颜色相近的时候选择白色还是黑色,也需按照规范执行。


4.3.7 文字对齐关系


文案类对齐:页面的字段、段落较短标题、需正文左对齐


表单类对齐:保证整齐适合阅读,冒号对齐法找到中间的冒号,(左右对齐),如果全部使用左对齐或者右对齐会更乱。左边一般最长字段六个字。前提是中文环境,不是国际化。冒号左右要留多少像素:8px的倍数相关值,4(窄点)、8(正常)、12、16(宽一点)都可以。


数字类对齐:日期,居中对齐;年龄,居中对齐/左对齐;非固定的数字:价格,采用右对齐,因为右对齐很容易看到价格的多少,哪个超出的更多,就越贵的,更容易区分数字的多少。


4.4 层级规范


层级规范得核心是对信息的间隔和区分,信息的区分间隔要用偶数8的倍数。具体可分为同层级的区分,用色块(比如气泡)、边框(栏目之间抖索狂等)、线段来进行区分。错层区分,用弹窗(背景变暗)、边框阴影(阴影的出现是拟物化的出现,当物体离它的光源越近,比如高度越高,它的阴影就越大越宽。离它的底部越近,阴影就越小,比如下拉框、搜索框、日历控件、弹出窗口来区分)。


这里需注意,关于投影,再前端角度考虑尽量不要用太多的特效滤镜来设计,因为在B端网页中,浏览器的兼容性不好,比如用ie浏览器就根本看不到这样的效果,如果用谷歌浏览器能看到,用safri浏览器能看到,但在火狐下等又会看不到,想要都看到就需要兼容很多代码,需要前端加很多代码实现兼容性的效果,很增加前端的工作量,所以在B端很少用非标准型的滤镜代码使用,虽然可以实现,但一般不太用,一般就是变灰、变深、变透明度最简单的方法实现。不同于移动端,因为IOS用的是原生的开发,所以不存在这个问题。


从接触B端设计两年以来,第一次详细梳理B端设计的系统知识点,从B端产品设计的工作流程,到B端设计前的准备工作,交互设计的七大定律,B端产品业务调研,用户访谈研究方法,精准推导B端用户画像,到B端产品主风格的设计定调,进而深度理解B端主流组件库的视觉规范,为B端产品设计做出了充分的指导作用,对比我之前零散的知识记忆,这次B端设计前的准备工作梳理,也更加深刻的由点及面的形成了系统的框架,也重新认识了B端产品的分析方法,区别于之前一直从事的C端设计工作,也真正对B端和C端在设计思维上有了本质的区分,同时也锻炼了我的归纳能力和演绎思维和系统思维能力,期间参考资料有《B端设计研修》、《用户体验要素》、《信息架构设计》,谢谢阅读,希望对大家也有帮助~thanks


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

文章来源:站酷 作者:moring_c
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


B端设计|模态、非模态框

鹤鹤

最近在整理系统的组件规范,收集各个场景下的组件应用,在搜集应用控件时,弹窗的套用、混用、乱用情况挺多的。

主要是模态框和非模态框的使用。


模态框:一般会有一层黑色透明的蒙板,它打断用户所属的主流程,不能进行下去,只能到完成模态框的操作,才能返回到主流程中去,这个操作很明确,不会被误解;


非模态框:一般没有那一层蒙板,不会影响所属的主流程,也不用担心原有进度会停止,仍然可以持续操作。即打开非模态也能看见底层的主流程。


概述

模态or 非模态,统称为弹窗。样式上可以理解为类似卡片,能够帮助用户快速定位获取关键信息和进行操作,它的内容是灵活的,一般情况下包含文字、图标、按钮。弹窗的设计是给用户传递与当前场景需要的操作相关的内容。

场景使用 
会根据业务的需要、场景要求,衍生出其他类多种形态。大多情况下先对弹窗分类,再对应到场景中使用。而实际上产品设计会从实际业务出发,从使用方式考虑,倒推来使用什么样的弹窗符合要求。 

基本设计原则
层次要分明,突出重点 
遵循基本的界面设计原则,在多种场景下通过信息分层、字体的粗细、大小等方式展现出明显的视觉层次,结合业务场景需要再按照阅读顺序惯例来布局,标题使用对象的名字。目的是帮助用户聚焦每一个关键信息上。 


悄无声息的,你在不在乎它,它都会出现的 

全局提示:一般由系统主动发起,不是用户请求的,大体分为进度提醒、通知提醒、公告提醒 

进度提醒

这个是由系统发起的,表明用户当前所在的操作的进程中的位置,抑或是卡在进度未操作,无响应状态,通知用户。 
位置:1·在页面的顶部浮层显示一块区域,2·统一放置消息分类里 


通知提醒
来自系统一些重要的信息推送给用户,或者是来自其他用户的提示信息,抑或是操作反馈。 
位置:将其放在右上侧,并自动关闭。 


公告提醒 
依然是由系统发起,提醒用户需要关注的信息,一般包含系统迭代、系统错误、审核通过or不通过、系统维护提醒等以及其他活动信息。 
位置:与进度提醒同一位置,一般情况下并会在3S自动消失。 
强制打断用户当前流程的 

部分功能需要用户打断去确认操作或是可能会造成比较危险的,不常用的,那么就需要改变用户操作焦点,将用户的注意力从原来流程中拎出来,那么这个时候需要一个方式隔离原有流程和需要当前操作的内容,模态框就是比较适用的。 

叠加在系统窗口的弹出式窗口,弹框以对话的方式让用户参与进来,以对话的方式与用户产生交互操作。 

操作反馈提示类

1·成功和失败 

对于某个模块的层级过深的功能操作反馈,需要在提交之后的结果反馈中提供辅助导航返回到初始功能页面。 


2·确认型弹窗 

在简单的业务场景中,只需要用户进行确认的“确认”或“取消”等案例。一般情况下应用在对内容的提交、修改,在内容详情页里的删除操作,表格的批量删除等 
样式:标题(以所属对象作为标题)+文案(对对象的解释说明)+操作按钮。 


3·操作型弹窗 

在复杂的业务场景中,需要用户进行数据输入一系列操作。一般会有新建内容(新建内容很多的就需要用新页面,弹窗有限空间满足不了大容量的数据输入)、查看详情(内容多需要新页面展示)、详情编辑。 
有部分场景下,新建内容和编辑内容是重合的。 
一般样式:标题+数据输入组件+操作按钮 

复杂样式:标题+数据输入和数据展示组合控件+操作按钮 


4·组合型弹窗(堆叠弹窗) 

特殊复杂业务中,单层模态框不能满足实际业务的需要,考虑弹窗的容量大小以及主次用户类别使用的情况下,会使用堆叠弹窗,在有限的条件下,能做的就是尽量将弹窗分层次。 


弹窗出现不打断用户原有流程的 

在实际操作的过程中,常见的错误提示、部分晦涩难懂或专业的术语、对功能组件的描述解释、小模块里的操作反馈、全文本展示,只会在用户不明白用途的情况下,告知用户,但不能妨碍用户阅读或是操作。 

气泡提示(解释说明的)

起辅助说明的,辅助用户决策。 
样式:深色背景+文字描述;一般由鼠标滑入目标区域,展现气泡提示框,鼠标滑出即消失。 


气泡对话框 

一般简单场景中,对单条信息或者模块内的某一个内容执行操作确认。 
样式:背景+(+图标)文案描述+操作按钮;一般鼠标点击,显示气泡,点击其他区域即消失。 


复杂的场景中,气泡框也承载需要用户去执行数据输入的操作,将气泡内的执行后的结果与原流程同步数据展示结果。 

除此之外,气泡框承载的内容和模态框操作类型有重合部分,不同的是,气泡框的数据与主流程的数据需要有对应关系。 

堆叠气泡框

特殊场景需要,单层气泡框不能满足需求,内容需要比较严谨的父子级关系,且并不是常用的,在考虑对后续的衍生,也会将不常用的功能隐藏,需要时再点击弹出。 
方法类似于堆叠模态框 

特殊场景下
在某些复杂业务的场景下,需要模态框和非模态框搭配组合使用,特别是操作弹窗和气泡框之间。 
一般情况下,是操作弹窗—>气泡框,(气泡框—>操作弹窗这个类型不常有,主要是不符合用户的使用习惯) 


总结 

对于弹窗的使用,应用到各个类型的用户场景下选择合适恰当的方式去满足需求,也许不尽人意,但也是在进步。不仅仅需要了解弹窗的类型,更需要了解业务场景,实际应用过程中需要两者相互碰撞,打破、重组,寻找到合适的方式。 

思考延伸

上边有说到堆叠模态框,在实际应用中,层级多达三层弹窗,使用的时候,重复点击好几次按钮才能关闭弹窗,使用起来甚是麻烦,有没有可以优化的方法呢?


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

文章来源:站酷。 作者: 啊呜
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

B端表格设计的基本交互形式

鹤鹤


蓝蓝推荐:这是一篇很实用的表格基本交互形式文章!
译文:
如果没有将数据可视化和具备编辑数据的功能,数据就毫无用处。未来行业的成功依赖于将数据收集与更好的用户体验结合起来,而数据表格的设计体验则非常重要。

固定表头

-

固定表头让用户随时都知道自己所在列的名称。


水平滚动

-
当展示大型数据列表时,水平滚动是不可避免的。可以 将具有标识性信息的数据展示在第一列中,并固定第一列方便用户对其他数据进行对比。


调整每一列的宽度

-

调整列宽可以让用户看到所有的内容。


设计表格样式

-

表格的样式有:白色和其他颜色相间的斑马线设计,单纯用线分割,自由形式等。

正确的设计行样式可以帮助用户浏览表格数据,对只包含少量数据的表格来说,减少视觉干扰非常重要,这时候就可以采用去掉分割线、斑马行的自由展示模式。但对于有大量数据的表格来说,自由模式容易让用户迷失,这时候用线分割,让用户能区分开每一行就显得尤为重要。而斑马线的设计样式适合包含多列数据的表格,需要水平移动的大量数据表格。 


表格密度展示

-

为列表设计不同的密度,用户可以根据需要自行切换,比较紧密的行距让用户无需滚动就可以浏览更多的数据。



数据可视化

-

让数据可视化,提供表格内容的概括性预览,让用户无需细读每一条数据就能得到想要的信息。



分页展示

-

分页设计方便用户跳转到相应页面,但是也常常被无限滚动加载的方式取代,无限滚动加载指的是随着鼠标不停地往下滚动,页面内容也会随之加载,这种方式适用于发现类的网站,但是对于考虑优先级的产品来说就不太合适了。


悬停展示

-

当用户悬停时显示更多功能可以减少视觉混乱。需要注意的是,它可能会导致可发现性问题,因为用户需要与表交互才能看到更多的功能。


直接编辑

-

直接编辑可以让用户在当前表格内修改数据和内容,而不用额外再跳转其他页面进行操作。


可扩展功能

-

可以扩展的表格设计允许用户在不丢失上下文的情况下浏览更多详细信息。


快速视图

-

与可扩展功能非常相似,快速视图使用户能够在保持上下文的同时查看附加信息。


弹窗

-

弹窗设计同样可以让用户停留在表格视图中,让用户更专注在附加信息和操作上。


多层弹窗

-

多层弹窗功能对于活跃用户来说非常强大,可以同时完成多种操作,或用来比较不同项目的详细信息。


点击详情展示

-

单击链接会将表格转换为左侧为列表项和右侧为其他详细信息的视图。它使用户能够解析大型数据,以及查看单独的项目详情而不会丢失它们的位置。


可排序的列

-

排序允许用户按照字母顺序或数字顺序对列进行重新排列。


基本筛选

-

提供基本的筛选功能来搜索表格里的相关数据。


列筛选

-

这种设计模式允许用户将过滤参数分配给特定的列。


可搜索的列

-

这种设计模式允许用户在每列中搜索特定值。


添加列

-

这种设计模式允许用户根据需求在数据表格中添加列。


可编辑的列

-

可自定义的列功能使用户能够选择他们想要查看的列并进行相应的排序。 这个功能还包括保存预设后再修改的能力。


...


为什么表格设计很重要

数据正在成为全球经济的原材料。对数据的追求推动了行业的重塑。能源、媒体、制造、物流、医疗保健、零售、金融,甚至政府都在经历数字化转型。


然而,如果没有可视化数据并对其采取行动的能力,数据就毫无意义。未来十年幸存下来的公司不仅将拥有卓越的数据;他们也将拥有卓越的用户体验。


良好的用户界面设计基于用户的目标和行为。用户界面反过来也会影响行为,从而推动进一步的设计决策。用户体验以微妙和无意识的方式改变了人类的决策方式。所看到的、呈现的位置以及交互的方式,都会影响行动。重要的是我们要做出能够带来更美好世界的设计决策,一个符合这个时代的数据表格设计。


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

文章来源:国外  彩虹BOOK翻译
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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





B 端设计总结·前言:设计体系

鹤鹤

众所周知,黑帕云这样的产品几乎使用了所有类型 B 端的组件。

由于我司设计资源有限,所以在拥有了组件库、设计师定好了设计规范之后,作为产品经理就直接可以手撸设计稿了。

这是是前面一文《 B 端产品中,一个 Epic 基本功能设计的过程》 提到,作为一个长大了的产品经理,有时候没有资源给你做交互没有资源给你画 UI 的,你要自己学会自给自足。


这个系列就是作为产品经理的我,在这两年中“自给自足”做设计的的一些总结与发现。

自给自足的前提是,前面说的组件库和设计规范,即拥有一个设计体系(Design System)。


01.什么是设计体系?

关于设计体系的定义和内容各家都不同,我找出来了以下案例供参考。


《设计体系:数字产品设计的系统化方法》

Tilio(一个写作和笔记应用)联合创始人,有十年 UX 设计经验的阿拉·霍尔马托娃在《设计体系:数字产品设计的系统化方法》一书中这么定义:

设计体系是为了实现数字产品的目的而组织起来的一套相互关联的模式和共享实践。
模式指的是界面中那些重复的要素:用户流程、交互方式、按钮、文本框、图标、配色、排版、文案,等等。
实践则是我们如何创建、捕获、共享和使用这些模式,尤其是在团队协作时做这些事情的方法。


书中将设计体系分成以下几个部分:

设计目的、设计原则、组件库、样式指南,以及用于提高设计师和开发人员沟通效率的工作流程和实用工具。


整理之后,可以参考下图:




Salesforce:Lightning Design System


Material Design


可以发现,以上设计体系无论如何定义概念,都是由设计原则+设计指南+一些基础的元素(比如 Design Token、Material Foundation、Icons)+组件库+其他资源工具构成。


形成这些内容的目的都是为了给自己产品建立一套保证设计质量、提升设计决策、提升沟通效率的“工具包”,从而让产品形成自己的符合设计原则的风格。


所以设计体系是什么不重要,重要的是如何在遵循设计原则下,能够高效做出高质量的设计。



02.设计原则(Design Principes)

一个开源设计原则和方法的网站 Design Principle 这样定义设计原则:

Design Principles are a set of considerations that form the basis of any good product.

译为“设计原则是构成任何好产品的一套基础考虑因素。”


比如 Salesforce 的设计原则是:清晰、高效、一致、美观。并且优先级由前到后。


可以理解为 Salesforce 会追求清晰大于高效、一致、美观,比如在产品设计中,让用户清楚的看到、理解、自信地去操作要比任何事情都要重要。

这个准则很容易理解,可以推论出 Salesforce 在度量体验时,将“易用性”放在了第一位,即作为一个 SaaS 产品,不能有任何让用户产生疑惑的地方。如果在设计上的美观而要牺牲清晰,这就是不可取的。



03.组件库

有了设计原则之后,下一步是需要一个组件库。这里说的组件库囊括了无论是原子化的颜色、字体、阴影、Icon 这些基本的元素,还包括了已经封装好的组件,如 Button、Alert、Toast、Text Input。


关于为什么要组件化,也不多说了,之前看过一篇阅文体验设计 YUX 的《组件化思维—— 适应并推动业务及产品变革的设计案例》写的非常清楚。

接下来我通过 Minecraft 这个游戏来总结了组件库。

玩过生存模拟类游戏大家都知道,在游戏中会有一些可以靠双手劳动得来的基础材料,比如砍树砍来的木头、地上捡的石头、挖矿挖的燧石。这些基础材料可以合成一些简单处理过的材料,比如把木头合成为木板。然后可以再把半成品进一步加工,比如木棍。


在 Minecraft 这个游戏中,如果玩家要制造一个弓箭,需要一个弓和一个箭。弓和箭的合成又需要一些半成品和成品或者原材料来加工制作,如下图:


对应在设计组件库中可以对照查看,一个完整的页面是可以通过一些元素、控件、组件、大组件组成:


04.适用人群

在系列开始之前,先声明一下文章的范围和适用人群。

关于 「B 端设计总结」这一系列,主要是我个人在已有了我们的设计规范和组件库后,“自给自足”的情况下探索出来的一些组件使用规则,更偏向产品经理或者交互设计师来参考。

所以系列中不会写设计规范,比如说字号、颜色、间距等等这些属于设计规范中内容。而是基于已有的规范,总结之前我们功能中涉及到的该使用哪些组件,也可以称之为狭义上的设计指南(Design Guidelines)或者设计模式(Design Patterns)。

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

文章来源:站酷 作者:高拉

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



日历

链接

个人资料

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

存档