首页

Bs界面设计之七:如何做好B端产品的信息设计?我总结了3个原则!

博博

最近在 12306 网站购票时,弹窗中展示了大段的文字信息,我只是匆匆扫了两眼就果断关闭了,实在没有耐心逐字读完。特别是节日抢票的场景,用户更不会有心情去看这些提示信息。

如何做好B端产品的信息设计?我总结了3个原则!

所以在做产品设计时,需要注重信息的传递效率。B 端产品通常用在 PC 端,屏幕显示区域大,在做设计时会不自觉的添加较多的信息,反而影响了用户的使用体验。今天我们就来讨论下如何做好信息传递?

我总结了以下 3 个原则:

如何做好B端产品的信息设计?我总结了3个原则!


匹配用户心智模型


心智模型指的是人们心中根深蒂固存在的,影响人们认识世界、解释世界、面对世界以及如何采取行动的许多假设、陈见和印象。是一个决定用户信息获取行为的内在的、可预测的认知模型。简单来讲就是人类基于经验的总结,去认知世界。

《About Face4:交互设计精髓》中提出了 3 种模型,实现模型、表现模型、用户的心智模型。好的产品的设计要尽可能匹配用户的心智模型,越符合用户心智模型的设计,产品越容易理解。

如何做好B端产品的信息设计?我总结了3个原则!

B 端产品页面内容变化较少,更强调一致性。主要由表格、表单、按钮等各种信息元素构成。在长期的使用过程中,用户对某些信息元素已经形成了特定的心智模型。例如用户看到输入框,就知道需要填写内容;看到步骤条引导,就知道多步操作;看到 Radio Button,就知道是单选。

因此方案设计时,设计师的一个重要目标就是让表现模型尽可能的匹配用户心理模型,避免因为组件使用不当,造成用户产生错误认知。

例如考虑到用户的视觉动线,“新建”主要、高频按钮通常放在左上角,方便用户浏览和操作,而辅助功能按钮会放置在右侧,用户也逐渐形成了这样的心智模型。

如果主操作按钮放置在右上角则违背了用户的心智模型,用户使用产品时,需要建立新的心智模型,改变已有的行为习惯。并且这种设计并不能带来其他层面的体验提升,个人认为有些得不偿失。

如何做好B端产品的信息设计?我总结了3个原则!


信息的层次性


B 端产品业务比较复杂,页面内容也会较多,信息的有效组织尤其重要。信息设计不是简单的内容堆砌,需要根据用户场景和需求做出优化处理,构建有效的信息的层级帮助用户去理解业务内容。

信息层级包括 2 个方面:

1. 系统空间分层

在一个系统中存在着空间分层,当页面较为复杂时,需要通过合理的内容分层,有序的展现内在逻辑关系。

B 端核心交互就是“增、删、改、查”,其中“查”就是信息的检索和浏览。所以页面主要是由搜索条件和表格构成的。而“增、改”等操作行为主要是在临时的系统空间中完成,例如弹窗、侧边浮窗、跳转页面等形式。

不同的信息在不同系统层级中相对独立的展示出来,保证了信息的层次感和秩序性。

如何做好B端产品的信息设计?我总结了3个原则!

2. 页面信息结构

复杂业务场景下,单个页面会承载大量的信息内容,需要通过合理有序地呈现给用户。主要有 2 种方式进行信息拆解。

如何做好B端产品的信息设计?我总结了3个原则!

1)高效组织——卡片化设计

在 B 端产品中,为了保证功能的完整性,必须要一个页面中展示给用户。逐条平铺,散点式的信息展示会造成信息密度过高,缺少层次性。而卡片方式可以很好的聚类相似信息,分割差异化信息,有助于降低信息的复杂性,帮助用户快速定位信息、浏览内容。

如何做好B端产品的信息设计?我总结了3个原则!

2)化整为零——步骤化设计

面对复杂的信息内容,用户容易产生畏难情绪。将复杂内容分步拆解,把用户的关注点从页面内容转移到步骤进度上,可以减少用户的心理压力。另外节点信息页也可以帮助用户更好的理解业务流程。

如何做好B端产品的信息设计?我总结了3个原则!

另外步骤化设计还可以将散点内容归集到一个任务流程中,引导用户快速完成工作任务。例如 Win11 系统安装后的设置引导,可以方便用户快速完成系统基本配置,避免用户操作的行为成本。

如何做好B端产品的信息设计?我总结了3个原则!

3. 页面元素设计

不同于 C 端产品,B 端产品更强调效率。正如奥卡姆剃刀原则所说“如无必要,勿增实体”。页面内容需要以简洁为主,避免无关要素形成信息干扰。而设计师更加感性,担心设计过于平淡,会在界面中添加各种视觉元素,反而会增加用户的认知成本。

如何做好B端产品的信息设计?我总结了3个原则!


信息的可理解性


B 端产品通常业务具有一定的专业性,用户门槛较高。在复杂业务场景下,必须让用户能够较为清晰的理解产品及功能,才能保证信息的传达效率。

1. 帮助信息

B 端产品需要尽可能地降低用户学习成本,但是本身业务层面的难度是无法避免的。因此需要为用户提供及时有效的帮助信息。

在阿里云、腾讯云界面中包含了大量的解释说明、Tips 等信息,解决用户在使用过程中的疑问,帮助用户更好的理解业务内容,减少用户的记忆量。

同时帮助信息还需要具有拓展性,当提示信息无法完全解决用户疑问时,还需要能够引导用户,查看完整的帮助文档,减少用户翻查资料的成本。

如何做好B端产品的信息设计?我总结了3个原则!

2. 可视化设计

数据可视化设计在 B 端产品中应用较多,例如概览页面,通过图形化的方式将数据的内在关系更直观的表达出来。

在某些特定的场景下,内容页面也可以通过可视化展示帮助用户理解信息,例如常见的身份证图片上传等,很多用户无法分清楚正面反面,借助图片可视化提示,便于用户更好的理解信息。

如何做好B端产品的信息设计?我总结了3个原则!


写在最后


体验设计行业需要创新,但是 B 端产品设计需要更加谨慎。尊重用户的习惯,完整表达业务逻辑性、保证内容的可理解性,是设计师必须去关注的。

作者:子牧先生

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:





Bs界面设计之六:想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

博博

有了解和学习 B 端的同学必然都听说过 SAAS 这个词,这在 B 端行业是个非常重要的产品形式和分支。

虽然它重要,但新手对这东西的理解充满了让人遗憾的扭曲。比如常见的误解式提问,Saas 应该怎么设计?适用哪些设计风格?

所以我从最底层的技术层面,来解析 SAAS 到底是什么,在未来你再也不用担心对这个词汇一知半解,无法正常参与业务讨论了。


想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

在 9 层塔中,SaaS 是完全制作好软件让用户直接上手使用的软件,而 PaaS 和 IaaS 就不一样。

1. PaaS

PaaS 全文 Platform as a Service,是平台即服务的简称。这属于完全技术化的服务,是非程序员的一般用户难以参与到的业务类型了。即服务商提供了基础的 7 层服务,只要用户购买了这些使用权,那么就可以直接在这个基础上编写或安装运行的程序进行使用了。

比如全球最大的开源 CMS 博客程序 WordPress,是由 PHP+MySQL 编写的,如果要创建这样的网站,就可以直接购买符合程序对应环境的服务器,再进行安装部署即可。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

2. IaaS

IaaS 全文 Infrastructure as a Service,就是用户只购买一个完全空白的虚拟主机,类似你购买了一台硬盘格式化后完全空白的虚拟电脑。用户可以自己选择安装什么样的系统,编写什么样的中间件,最后再搭建自己的框架。这适合定自定义要求更高的用户,完全根据自己的需要 DIY 项目的服务器功能。

3. Hosting

Hosting 则是比 IaaS 更进一步的服务,从原本的虚拟服务器升级到了完整的服务器。也就是说,在一些特定业务环境下(比如特殊的数据安全要求),用户需要购买完整的服务器硬件使用权,从原本的合租换成整租。

所以,Hosting 就是服务器托管的意思,用户向一些服务商购买了完整的服务器硬件使用权和联网功能,然后远程进行控制和使用。而商家负责硬件层面运维,防止服务器断电、断网、损坏、过热、故障等一系列硬件问题。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

4. Co-location

九层塔中,我们其实还省略了一个更底层的环节 —— 数据中心。

数据中心是一个物理名词,在今天指的是大规模的服务器数据设备安置和运行的空间。比如苹果的云上贵州,就是典型的数据中心。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

Co-location 的服务也叫场地出租,就是数据中心的商家,把数据中心的物理空间使用权租用给用户,用户自己购买服务器或商家的(不是临时租用)放进去,再借助数据中心的网络和其它基础服务实现服务器的正常运转。

这个概念大家简单理解就可以,我就不多做介绍了。所以,九层塔中包揽了不同层级数量的技术,就可以形成不同的服务,每一级服务有各自的优缺点,是由项目的实际情况决定的。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

相信看完前面的介绍大家已经知道,SaaS 等服务是建立在联网的基础之上的,也就是说,除了可以独立运行在你客户端里的本地软件,还包含更多需要联网的软件,或者干脆运行在远程服务器主机上的软件。

这是一个发展的过程……

最早的软件安装是我们到软件店里购买软盘、光盘,回到家里的电脑安装,这些软件往往只在本地运行,是不需要联网的孤岛。随着互联网行业的发展,孤岛渐渐被消除,联网上传和获取数据越来越普及,甚至,软件都不需要再下载和安装,直接用浏览器就可以访问使用。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

这种模式,就催生了软件的开发维护与服务器、网络的硬件运行进行了分工,一般的产品开发团队专注在软件应用层面的开发工作,而把网络、远程服务交给其它商家,并付费购买。这样不仅带来更高的效率,而且降低了各自的成本,实现了多方的共赢。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

所以,我们再来理解云服务这个词就很容易了,云就是网络,云服务就是基于联网实现的各种软硬件服务的总和。除了远程的虚拟机、中间件、数据库外,还有远程计算、渲染、CND 加速、直播分流等等。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

这也是为什么云服务会成为互联网发展的基础,因为它实在太重要了,几乎所有互联网公司都无法脱离云服务带来的支持。这也是为什么各个大厂纷纷投入云服务的赛道中,因为这是互联网的基建和命脉之一,拥有非常广阔的前景与市场。而在马太效应强者越强的现实环境下,头部的厂商拥有更好的机群、技术、人员,可以大幅度降低运作成本,提供更优质但价格更低廉的服务。

虽然云服务在今天不可或缺,价格也越来越有优势。但是,并不是所有企业都一定要选择购买外部的云服务,这就是我们要理解的另一个课题 —— 私有化部署。云服务再怎么便捷,也有一个缺陷,那就是数据是存储在别的商家、企业的服务器中,有一定的数据安全隐患。虽然数据安全是云服务的最基本保障,但很多对数据隐私、安全极度重视的企业,是不愿意承担任何外部风险的。所以他们就会通过自建本地服务器(私有云)的方式,实现从网络、硬件到软件全局私有化的部署。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

也就是说,服务器机房是自己公司的,网络是自己迁进机房的,服务器自己买的,环境、虚拟化、数据库自己搭建的,后端程序也是自己写的,最后电脑手机上运行的客户端,是连接这些服务器的。

哦对了,当然这些硬件日常的维护也要由自己公司的运维负责……

这样的成本高嘛?非常高。但类似国企、银行、证券、国防、政府机关等机构,对数据的安全性是异乎寻常的执着的,他们是有足够的动力划出预算来确保数据的私密与安全,用来运行自己内部的 B 端系统。这也是为什么这些机构从一开始就拒绝使用 Figma 这种公有云端软件,尤其是服务器在国外的。

再问下一个问题,私有化部署,就意味着这个环节中所有步骤全是自己搞定嘛?当然不可能,因为应用这个层面,有时候不是想开发就开发得出来,或者成本实在超出了预算。因为私有化的主要目标是数据安全,但不是应用的工具一定得个性化定制。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

比如在即时设计官网的价格页面,就可以看到 “私有部署” 这个选项。它的实际作用,就是允许客户在自己的服务器上安装它,让内部的员工使用设计软件时是同步到公司指定的服务器而不是官方的公共服务器中,满足客户的数据隐私需求。

注:这例子大家讨论最多适合理解,非恰饭

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

所以,了解完上面的概念,你也就大概能明白什么是云服务,什么是私有化。如果需要在工作中碰到更细节的名词还是概念,可以再进一步做理解。


结尾


关于 SaaS、PaaS、IaaS、云服务、私有化部署的扫盲,就先解释到这里。希望大家看完以后对 B 端行业一些最基本的产品概念能有一定的认识。

作者:酸梅干超人

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:



Bs界面设计之五:想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

博博

有了解和学习 B 端的同学必然都听说过 SAAS 这个词,这在 B 端行业是个非常重要的产品形式和分支。

虽然它重要,但新手对这东西的理解充满了让人遗憾的扭曲。比如常见的误解式提问,Saas 应该怎么设计?适用哪些设计风格?

……

所以我从最底层的技术层面,来解析 SAAS 到底是什么,在未来你再也不用担心对这个词汇一知半解,无法正常参与业务讨论了。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

讲解什么是 Saas,或者刚刚图例出现的 Paas、laas 是什么,首先要认识一个问题,一个需要联网的软件,是如何落地的,需要哪些前提条件。

通常,我们可以把一个普通的联网产品要正式上线并使用,需要满足 9 个层级的条件,我们简称 “9 层塔”,分别是:

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

下面,我们根据每个大层级来解释一下,它们分别都是什么。

1. 基础设施层

基础设施层是一切网络服务的根基,由现实世界的硬件组成,是所有技术、代码、数据的运行基础。

层 1:网络(Networking)

即基础的互联网电信宽带服务,通过电信运营商在各地搭建联网用的设备,并使用线缆相互连接,满足数据的物理传输可能。

比如你想要在家上网冲浪(非移动上网),最基础的条件是就是购买和开通宽带服务,通过接入光纤的形式,实现从家中连接到互联网世界的可能。

层 2:服务器(Serves)

服务器,本质上也是一台电脑。有了联网的条件,我们就要把网络接入到这台 “电脑” 上,让它来完成各种数据的处理和存储。

但不管它能做什么,要做什么,首先你得先有这台设备,不然后续的工作都无从谈起,所以服务器指的就是用来完成后续工作的电脑设备。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

层 3:存储(Storage)

存储就是硬盘,你想要运行的任何程序、代码,还是想要收集的数据,都需要容纳的地方,那就是硬盘空间。存储就是关联到服务器的硬盘,是数据存储的物理环境。

之所以硬盘被独立出出来,而没有把 CPU 内存这些拿出来,是因为数据的存储和安全(物理上)是网络服务的重中之重。CPU、内存、电源坏了,替换就可以,硬盘损坏导致数据的丢失是无论如何不可能接受的。

所以,工程师们开发了非常多特殊的技术来保障存储的稳定和安全。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

2. 技术应用层

技术应用层,就是具备了网络、服务器、硬盘以后,让这些基础设施充分发挥作用和能效的相关技术。

层 4:虚拟化(Virtualization)

虚拟化是个比较抽象的概念,它是一种资源利用的技术,让服务器最大化的利用和分配自己的资源。

比如一台服务器,有 8 核心、8G 内存、8G 存储,如果卖个一个客户运行一个程序,那么很可能这个这个程序日常只使用一个核心的算力,1GB 内存,1G 不到的存储,剩下的算力资源不就浪费了嘛?

于是,虚拟技术就可以把这台服务器切割成 8 台 “虚拟机” 卖给 8 个这样的客户。让他们在这台设备上运行 8 个不同的程序,并根据它们各自使用的消耗灵活分配 CPU 和内存资源。

所以,今天如果你想要搭建一个网站,云服务商出售的 “虚拟主机”,就是在实体服务器主机上切割出来的一部分。这样客户省钱了,商家利润率也更高了!

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

层 5:操作系统(OS)

每台电脑都有自己的操作系统,我们熟知的 Windows、Mac OS 等等。如果硬件没有搭载操作系统,那它们就只是一堆工艺精密的废铁。

对于服务器来说也是,任何服务器想要正常运行,都必须搭载相关的服务器操作系统,有了基本的系统,我们才能创建程序,让服务器去运行我们想要的功能。

前面提到的虚拟机,就允许同一台服务器通过虚拟技术运行多个系统。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

层 6:中间件

中间件也是个比较复杂的技术概念,它是个独立系统软件服务程序,是软件的直接面向对象(而不是服务器),是一种支撑软件。

举个不太严谨的例子,我们常规的逻辑是一个程序对应一台服务器(或虚拟机),但真实情况往往是一个程序会关联好几个服务器和不同的系统,来完成不同的网络服务。正常情况下,你需要对每个服务器和系统进行适配。

而中间件的作用就是帮助你省掉这个麻烦的步骤,让你只需要对接唯一的翻译和话事人,他会帮你向不同的任务对象传达你的要求。

层 7:程序环境(Runtime)

程序环境,就是编译代码用的环境。我们常听说的 C 语言、C++、PHP、Java、.Net 等编程语言,都需要安装一个对应的运行环境。

许多热衷电脑游戏的同学一定很熟悉游戏第一次启动触发的 Java 安装界面,那就证明这个游戏中运用到了 Java 的代码,如果你没有 Java 的运行环境,那么它们就无法生效。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

3. 产品表现层

层 8:应用(Application)

在这个系统下,应用程序指的不是你在自己电脑手机上安装的程序。而是安装在服务器上运行的程序,不管是后端程序还是前端程序。

它们需要使用某些特定的程序语言来编写,并运行在上面所说的对应环境中。我们所说的后端开发,通常就是开发服务器所运行的程序的程序员。

层 9:数据(Data)

这个词放在这里可能有比较大的歧义,数据实际上就是使用这个程序所产生出来的数据,而不是单指数据库(数据库也是环境的一部分)。

比如你打开一个网站注册了账号,上传了头像,那么这些信息就是使用程序所额外产生的数据,它是项目正常运作的必然产品。

4. SaaS 到底是什么

理解上面的 9 个层级的内容是什么,我们就可以看下面这张图表了。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

SaaS 全程 Software-as-a-Service,翻译叫 “软件即服务”,讲人话就是 “卖联网软件” 的。

前面提的 9 个层级,除了最后一层数据是我们普通人可以负责的,其它每个层级都需要对应的开发和工程师来负责对吧,那么我们普通人还是企业就不能使用网络软件服务了嘛?

这肯定是不符合事物发展规律的。

SaaS 的存在,就是让用户不用管什么服务器、代码、中间件这些有的没的高深玩意,直接让你在浏览器或本地客户端上直接使用这款联网软件,并创建对应的数据信息。

换句话讲,只要这个软件是联网的,且软件本身的功能就是服务的核心(划重点:社区电商类软件的服务显然不是软件功能本身),它就是 SaaS。SaaS 既可以免费,也可以是通过批量出售软件功能的使用权来赚取收益。

免费情景:

微软:如果你使用了基于 Web 的电子邮件服务(例如 Outlook、Hotmail 或 Yahoo!Mail),那么你已经使用一种形式的 SaaS。

https://azure.microsoft.com/zh-cn/overview/what-is-saas/

付费情景:

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

在 B 端的语境下,SaaS 通常就是指制作一个面向商业用户的联网软件,然后批量出售这个软件的使用权。它并没有特指这个软件必须是 CRM、ERP、HRM 还是商用 HMI……

所以明白了嘛,SaaS 只是一个商业形式或技术形式的统称,它根本没有具体的设计规范或者学习方法,完全根据业务的实际需求和场景决定。

最后,再问你们一个问题,你们现在负责的项目是 SaaS 嘛?


结尾


这一篇我们完成对 SaaS 的基本介绍,下一篇,我会在这基础进一步展开,讲解 PaaS、laaS 和云服务的相关概念。

希望大家不要再在这种基础概念中犯迷糊了……

我们下篇再贱~

作者:酸梅干超人

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:












Bs界面设计之四:B端设计指南:6800字干货帮你掌握快捷键设计

博博


前言


键盘,在很多人的眼中,就是一个信息录入的硬件设备。但你却不清楚完整的键盘当中,字符按键只占到了整个键盘数量的 60% (完整键盘共 108 键,字符键 65 键)

B端设计指南:6800字干货帮你掌握快捷键设计

你会发现,键盘除了打字之外,还会有其他很多用途。快捷键,就是不可忽视的一部分。(注:完整的快捷键会包含,快捷组合键与快捷按键两部分,文章就不做过多纠结,意在讨论这样的交互形式,这里简单统称为快捷键。)

无论是设计师常见的三件套:Photoshop、Sketch、Figma,还是很多协作类型的产品:Word、PPT。

B端设计指南:6800字干货帮你掌握快捷键设计

快捷键,仿佛早已是许多产品的标配。但是我们在做 B 端设计时,又时常忽略掉快捷键这一特殊的交互形式。今天我们就来聊聊 B 端产品与快捷键之间的关系。

在实际的工作当中,如何设计快捷键?我会产生这些疑惑:

  • 一款 B 端产品,有必要去设计快捷键吗?
  • 快捷键是否会增加用户的使用门槛?
  • 如果想要去做快捷键设计,究竟应该如何设计?

我们就带着问题一起来了解快捷键之间的差异。

老规矩


开始之前,还是先科普一下桌面端与移动端,虽然他们之间存在很多差异,比如,页面布局、交互方式等等… 这些咱们以后再聊。但是今天想贴合主题,聊聊录入设备之间的差异。

在移动端的设备当中,我们多数情况下,采取的是软键盘的形式,也就是手机录入是以虚拟键盘的形式存在。

B端设计指南:6800字干货帮你掌握快捷键设计

这样也就导致虚拟键盘存在一些常见问题

  1. 缺少快捷键:虚拟键盘无法通过组合键,实现快捷操作
  2. 录入门槛高:不能对键盘进行精准定位,无法实现盲打键盘的快捷录入
  3. 功能按键少:在录入标点符号等信息时,需要切换页面进行实现

总结下来就是整体信息录入效率低,准确率低。比如我们最常使用的复制粘贴,到了手机当中,只能够通过点击光标的方式来解决。对于桌面端键盘而言,由于我们录入信息的方式是通过双手与实体键盘进行交互,可以实现更多信息的点击。因此快捷键就会有很大的发展空间,这时候就会很好奇,快捷键究竟是如何诞生的?

我们简单回顾一下计算机发展的早期,发现快捷键设定其实是源自 “硬件设计上的无奈”。早在 1980 年,IBM 所研发的个人电脑 Acorn,在当时遇到了一个棘手的问题,在电脑产生系统故障过后,它都需要通过手动重启,并且需要很长的时间来进行内存测试,验证计算机是否出现问题。但在公司内部进行系统测试时,并不是需要这样的一个机制。因此工程师 Bradley 在当时创造了一个快捷键:Ctrl+Alt+Del 可以在不需要内存测试的情况下将系统进行快速恢复重置。

我们现在回顾,当时作为工程师,他在快捷键的设定上也是进行了很多思考,因为 Ctrl+Alt 键靠得很近,但 Del 则在键盘上的另一边,这样可以避免一些用户在日常使用的过程当中进行误触。

而后续 Windows 电脑遭遇蓝屏死机,而 Ctrl+Alt+Del 这样一组快捷键便留在很多人的心中。

B端设计指南:6800字干货帮你掌握快捷键设计

随着个人电脑的不断发展,你会发现快捷键的设计也越来越复杂,因为我们想要了解如何设计快捷键,必须先知道,常见的按键分类有哪些?


常见快捷键的分类


目前共有 Windows MacOS 两大操作系统,在快捷键的设定上也会有着许多差异化,文章部分会将 Win/Mac 的系统统一进行讲解,大家可以优先看看关于两个系统之间的映射关系:

B端设计指南:6800字干货帮你掌握快捷键设计

想要知道我们快捷键的差异,我们必须了解每一个按键的基本定义:

Ctrl / Command

Windows 系统当中的核心快捷键,可以理解为是各项操作的快速触发。

我们可以使用它去实现各种组合快捷键,比如使用 Ctrl + C(复制) Ctrl + D (创建副本),算是用户使用最高频的快捷键。

同样,在 Mac OS 当中,你会发现 Mac 的 Control 几乎很少使用,因为系统本身就没有给它 “安排太多任务” 取而代之的是饱经风霜的 Command 键。

B端设计指南:6800字干货帮你掌握快捷键设计

Command 作为 Mac 独有的按键,它的地位几乎等同于 Win 当中的 Ctrl,并且两者的快捷键方式都极为类似,因此也就造成两个系统当中的按键差异。

Shift

Shift 也叫上档键,可将其意为连续的按键,因为在连续选择时会用到,它的功能主要有两点:

在中文输入的场景下,可以组合按键进行中英文的切换

在文件选中的场景当中,对文件的内容进行快捷选择的操作

Tab

Tab 也叫制表键,不过现如今已不再是制表的含义,更多可以为切换按键,比如我们经常使用 Command + Tab 来对软件进行切换。其用途主要有两点:

在信息录入时,按下 Tab 键来实现字符的缩进

在表格页面当中,通过 Tab 键实现对单元格的快速切换

Alt / Option

Win 系统当中的 Alt 与 Mac 系统的 Option 基本一致。他们的主要用途有两点

WIN:呼出菜单或点击按钮的组合键

MAC:快速访问系统偏好设置中某个选项的组合键


如何设计快捷键,是否需要快捷键


在我们的设计快捷键之前,需要考虑清楚是否真的需要快捷键。就像我们在网上冲动消费一样,购买的东西总会有当时觉得有用,然后立马吃灰的产品。所以明确需求的目的就显得尤为重要。

因为 B 端产品存在太多产品类型,在每一个产品类型当中,我们也会有不同的使用场景。这里我总结了几个维度去思考。

1. 高频使用

俗话说得到,好钢得用到刀刃上,快捷键的设定,一定是需要用户使用频率高才会有意义。因为快捷键的使用本身就会有使用门槛,如果你做在一些用户本身就不会频繁操作的地方,对于用户而言感知并不强烈。其次你也不想自己花费了精力,到头来设计思路并没有落地。

2. 核心功能

这里的核心功能其实是针对不同的角色。比如一个在线教育的产品,老师需要每天在产品当中去点评同学们的作业,也就意味着老师需要高频的在点评学生作业,这个时候其实作业点评就是老师的核心功能。那你对这个功能上的操作进行优化,大概率就不会存在太多问题。

比如我们以 figma 为例,如果它现在在 Darfts 首页增加了很多快捷操作,如:Command + N 新建画板 、Command+O 打开通知。

但是 Figma 并未对核心功能,编辑区域页面当中添加快捷键,我想这对于很多人而言,就是一个糟糕的设计。

B端设计指南:6800字干货帮你掌握快捷键设计

3. 沉浸场景

B 端产品的使用大致会分为三种状态:暂留、沉浸、配置(这里就不展开讲了)。而最常见的便是专注于用户使用的沉浸场景,也就是说,我们必须要让用户在沉浸场景下使用产品,这些快捷键才会变得更加有意义。

沉浸及专注,专注就需要高效,因此高效使用快捷键就显得合情合理。


归纳整理快捷键的诉求


当我们明确真的需要快捷键的诉求过后,我们可以去思考,究竟应该设计哪些快捷键?哪些操作是属于高频操作?是否会存在操作之间的先后顺序?

首先可以通过实地观察,先去判断用户在某一页面当中,具体使用顺序或者流程,然后通过流程图将数据内容进行整理。这其实是我们设计快捷键的基础依据。

B端设计指南:6800字干货帮你掌握快捷键设计

然后通过对页面当中不同操作进行数据埋点,能够得到用户具体的操作信息。通过这些数据信息,能够保证我们在做的设计都是有理有据,而不是拍脑袋的自己随意 YY 出来的。最后拿到数据进行分析,在数据当中并不能够单纯的去看它的点击量,而是要深入了解这个数据它背后的意义是什么?

这也是我不建议初级的设计师去做数据埋点的原因。因为我见过有太多设计师拿到数据过后直接不分析上手就看,导致出现太多数据背后的问题。


避免冲突


在快捷键的设定,我们应该考虑避免与其他快捷键重复。想要解决这个问题,我们必须先搞清楚,产品究竟采取什么架构方式。通常会分为 BS 架构与 CS 架构。

这里简单解释一下 BS 架构与 CS 架构的区别

BS 架构:(Browser/Server,浏览器/服务器模式)web 应用,可以实现跨平台,但是个性化能力低,响应速度较慢

CS 架构:(Client/Server,客户端/服务器模式)桌面级应用,响应速度快,安全性强,个性化能力强,响应数据较快

可以简单理解为,目前产品是否需要通过浏览器才能够打开。需要浏览器打开,那就是 BS 架构,不然则反之只有我们确定了具体的产品架构之后,你才能够知道你设定的快捷键是否与浏览器本身到快捷键有所冲突。因为浏览器自身的快捷键权限肯定是会高于你页面当中的快捷键,所以在设计上我们需要格外留意。

这里总结了一份浏览器的快捷键汇总,可以通过这个方式避浏览器的踩坑

B端设计指南:6800字干货帮你掌握快捷键设计

但客户端的快捷键设定,相对会更加开放,因为客户端不会受到浏览器的限制,在快捷键的设定的空间则会大很多


快捷键的设定


明确清楚上面的诉求与限制过后,接下来我们可以从三个方面,来对快捷键进行设定:

1. 语义法

在电脑快捷键设定的早期,最常使用的办法便是通过翻译英文单词首字母,进而实现快捷键的设定。比如我们经常使用的 Command+D 进行复制,D 便是 Duplication 的首字母、Command+N 进行新建,N 便是 New 的首字母。这样的设定方式其实源于国外,同样也是我们日常设定最为常见的一种方式。

2. 流程法

流程法就是去思考整个快捷操作的具体流程,比如我们最常使用的 Command + C 与 Command + V 就是一个例子。

因为如果按照常规的设计思路,粘贴在大家的印象当中一定会是 Paste,但是由于复制、粘贴本身就是高频操作,并且两者按键相互关联,再加上 P 也是 Paint 的缩写,Command + P 有打印的含义,因此通过用户使用流程上的思考,最后将粘贴放在字母 V 上面。Viscidity 的缩写,它是一个名词,具有粘聚性、黏性的意思。

3. 竞品法

如果假设目前设计的产品当中已经存在许多竞品,它们就已经有了相对应的解决方案,这个时候可以考虑借鉴直接竞争对手的按键设计,因为你可以通过这样的竞品设计,让你的用户的切换成本更低,也能够让他们快速上手。

举一个例子,比如 Sketch 与 Figma,Figma 的出现本身就是与 Sketch 进行竞争,因此没有必要在快捷键上进行特立独行,反而会增加用户的使用门槛。


在哪使用快捷键


既然上面讲到了如何设计,咱们还是不得不提一提在 B 端产品当中,哪些地方可以使用快捷键?好方便在读文章的同学们直接抄作业,用在自己的系统当中。

1. 详情页编辑

详情页几乎是每一个 B 端产品必备的页面。它能够帮助用户进行详细数据的阅读,其核心诉求会分为两种:

对表格页当中的信息不太清楚,想要通过详情页进行更为仔细的阅读;

对存储的数据有所质疑,想要更改几条数据;

因此,分析完了这两种情况过后,我们可以使用快捷键,去满足用户对详情页编辑的诉求,进而可以实现对某一个页面的快速操作。具体做法我们可以按照上一章节讲的,如何设计快捷键的思路。我也举几个例子

比如现在对纷享销客这样一款 CRM 产品的详情页进行编辑时,除了思考初级 B 端设计师需要处理的视觉部分之外,你还可以使用快捷键,将详情页的编辑,与按键的字母 “E” 进行绑定,这样可以配合鼠标来完成页面的快速操作,提高 “高级用户” 的操作效率。

B端设计指南:6800字干货帮你掌握快捷键设计

这样的优化就算是完了么?

其实这也是市面上绝大多数教程不会涉及的点。因为他们缺乏 B 端的实际工作经验。也就导致只会教大家如何依葫芦画瓢,教学员去实现某一个页面的具体布局,根本不考虑实际的项目当中的各种诉求与逻辑关系。这也可能是我上课只喜欢去画草图的原因,因为 B 端的“形”很简单,有太多的组件可以支撑你进行设计,但是 B 端的“意”则会过于复杂,很难理解。

说了这么多,我们来看看究竟应该如何进行优化?也就是在这个功能新增之下,还会有哪些存在的漏洞?

简单列三点:

  1. 在用户进入到详情页,但并没有编辑权限时,点击了按键 E 应该怎么办?
  2. 在整体的页面当中,就只绑定编辑操作吗?其他操作需要绑定按键吗?如果需要你会怎么设计?
  3. 让用户知道快捷键的存在?是简单的信息外漏?还是会有一整套 “机制” 来去辅佐进行解释。

这样不断完善,设计方案才能更加完整。

大家要记住,虽然得到一个设计结论很简单,但是 B 端系统本身就不是简单去删除列表,去增加更多视觉上的引导。而是你增加了一个功能模块过后,有没有考虑到它在整个产品当中的合理性,是否有具备思考完整的设计思考。不扯那么多了,我们继续~

再举两个真实落地的例子:

1. 在网页端的 B 站视频播放页面(你可以理解为是视频的详情页),用户可以通过点击 W 为投币、D 为弹幕开关、E 为添加收藏夹、F 为全屏播放,实现对视频的快速操作。而投币、弹幕开关、收藏夹、全屏播放都是属于 B 站最为核心的功能操作,因此这样的设计非常的赞。

但 B 站的处理,还是会有小小的瑕疵。会有很多用户对于这样的快捷操作并不知情,可以考虑在入口提示上,进行对应的简单优化。当然这样的产品还会有很多,比如 Youtube、抖音网页版都采取了这样的设计,大家可以自己去查看总结一下不同产品的特点。

2. Salesforce,还没开始对它进行调研的时候,我其实就能够猜到作为世界上如此出名的产品,肯定会有快捷键的设计。但随着调研的深入,发现在早些年间,它并没有进行快捷键的设计,因此受到很多用户的 Diss。随之便有人自行开发一款浏览器插件来实现对应的功能。

B端设计指南:6800字干货帮你掌握快捷键设计

而在后续的产品迭代当中,SF 逐步更进了这一功能,通过快捷按键,可以实现多个功能。逐渐将快捷键的方式放在整个系统当中,得到更多人的认可。目前形成了这样的一个完整快捷键体系。

B端设计指南:6800字干货帮你掌握快捷键设计


表格页新建


在表格页当中,我们最常使用的便是新建操作。同样可以按照详情页的思路,将整个页面当中的新建操作进行键盘按键绑定,实现快捷操作的效果。

比如在飞书管理后台的成员与部门页面当中,我是否可以通过点击 N 实现快速添加成员的操作?通过这样的方式就能够保证,用户的快速按键操作。其实这里还可以将问题再稍稍加深,我们是否还可以考虑一些新的方式?比如全局新建,在整个系统当中提供一个全局新建的入口,让入口更为统一,甚至可以实现全局键盘操作的“梦想”。又或者是通过快捷键呼出全局搜索,进行实现对应的操作?类似于 Notion 这样的产品,这些都是可以去思考的方向。


导航菜单切换


在 B 端产品当中,导航菜单的设计是最痛苦的一件事。因为一个员工,想要完成自己的工作,就必定会在不同的导航菜单之间进行来回切换。在 2022 年的趋势这篇文章里也讲到,越来越多的 B 端产品开始变得臃肿。也就意味着用户需要不断寻找、不停的切换导航菜单,来完成这个角色自身的工作,因此针对臃肿的 B 端产品,我们可以使用快捷键来实现导航菜单的切换。这里给到几个产品的思路,大家可以学习借鉴一下:

比如常见的飞书,因为本身是 CS 架构(客户端),因此可以通过组合键的形式,来实现对导航菜单的快速切换。

飞书通过按住 command + 1、2、3 … 来实现切换。

B端设计指南:6800字干货帮你掌握快捷键设计

钉钉则在这部分就缺少了这样的设计。而薪人薪事的做法则会有所不同,它的入口非常特殊,采取全局导航的形式(这个后面会单独出导航菜单的文章来进行讲解),将整个入口进行绑定,通过双击 command 对导航中心进行呼出,并且后续可以支持更多导航菜单的切换,这也是一个不错的思路,值得大家借鉴。


全局功能


在你的系统当中,一定会存在一些全局影响的功能。它会影响到系统当中的每一个角落。比如 CRM 系统里面的通讯录、消息、邮件。它本身和主营业务差别不大,但是由于业务发展等其他关系,需要单独处理。因此会有很多全局使用的功能,这时候便可考虑将其与快捷键进行绑定。比如明道云,因为在明道云的整体设计当中,消息、通讯录都是游离产品架构之外的一些协作内容。因此名道云将其通过快捷键的方式进行查看,进而实现页面的快速呼出,能够加大用户的使用效率

B端设计指南:6800字干货帮你掌握快捷键设计


总结:


分享了过后,最后再唠一唠我的自己感受。其实快捷键是一个非常立竿见影的设计提升方式,我们除了去想清楚快捷键应该如何设计之外,更多还需要让用户能够发现有这样快捷键。虽然 B 端产品我们可以通过客户培训、新手引导、帮助文档的方式来教会用户,但是快捷键这样的一个功能本身是针对中、高熟练度的用户,也就意味着,你需要不断的去培养用户养成快捷键的习惯,这样才能够保证,快捷键能够真正的被用户所接受。

其实现如今出现了很多无障碍的设计,大多数情况下都是在讨论如何脱离鼠标进行快捷的操作。其实比起无障碍,快捷键应该能够出现在更多 B 端产品当中。

最后做个总结:

我们常见的常见快捷键会分为:Ctrl、Command、Shift、Tab、Alt、Option

如何设计快捷键?

首先要去判断是否需要快捷键,共有三种判断方法、高频使用、核心功能、沉浸场景。其次要去归纳用户的快捷键诉求,想清楚快捷键的使用场景,避免与其他软件冲突。接着去想想究竟怎么设计快捷键?可以使用语义法、流程法、竞品法。最后我们可以在哪使用快捷键,能不能抄一抄作业?可以在详情页编辑操作、表格页新建操作、导航菜单的快速切换、以及全局的功能操作。

作者:CE青年

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:













Bs界面设计之一:从视觉产品两方面,分析2022年B端设计的发展趋势

博博


前言:


在 2020 年,疫情最为严峻的时候,B 端这一领域得到了前所未有的关注,而那时,身为 B 端用户体验设计师的我,也曾总结过,当时 B 端设计的诸多趋势,比如:

多端需求:即桌面端、平板端、移动端的设计形式

设计中台:拥有更为统一的设计平台,与这两年讨论较多的设计资产相同,都是起到快速协作的作用

随着 2022 年的到来,B 端行业又会迎来哪些新的机会?今天我们就从整个的 B 端入手,回顾一下 2021 年的设计形式,展望一下 2022 年的设计趋势。当然趋势完全是我自己个人主观理解,仅供参考,如有异议,以你为准~

完整的趋势,我们会分为视觉趋势与产品趋势:

  1. 视觉趋势:主要围绕设计当中的细节展开,比如图标、色彩、字体、插画等
  2. 产品趋势:主要是了解不同的 B 端产品当中究竟有哪些发展形式,对于设计师又会产生何种影响?


视觉趋势

1. 3D 设计风格

虽然 3D 化的视觉风格早已到来,但是在 B 端市场上,3D 风格在此之前依旧表现的十分克制。随着 C4D、Blender 这些 3D 建模软件的不断普及,再加上互联网上关于 3D 建模教程的增多,你会发现 3D 风格的视觉表现,是一个 B 端视觉设计师的基本要求。

而 3D 风格用在 B 端软件当中,会有两个使用场景:

图标

因为在 B 端产品当中,图标本身就是非常难以去表现,比如“物联网,大数据”,许多抽象词汇很难通过一个具象的事物进行表达,而在企业官网当中,在视觉表现上的要求又十分的高。因此你会发现,在视觉风格上的选择,往往只有 3D 图标 + 插画这一条路。

从视觉产品两方面,分析2022年B端设计的发展趋势

并且 3D 图标的使用场景不会太过于局限,也可以用于产品的工作台、运营营销工具箱等页面,因此 3D 图标的出现,它的应用场景也会相比之前要更加的广阔。

从视觉产品两方面,分析2022年B端设计的发展趋势

可视化大屏

大屏设计也在不断的“内卷”,因为传统的 2D 可视化大屏所搭建出来的大屏已经满足不了企业的野心, 像 DataV 腾讯云图 ,大家都在朝着 3D 风格,炫酷的方向进行延展,因此也就会导致 3D 的视觉风格需求激增,而 3D 建模仿佛就是大势所趋。

从视觉产品两方面,分析2022年B端设计的发展趋势

2. 新拟态

虽然新拟态是在前两年的产物。这个设计风格背后,遭到了很多设计师的质疑与排挤。但是随着这个风格的不断成熟,感觉它在 B 端视觉领域(特指的是官网 ),是非常受欢迎的,因为整体的风格,与官网的设计形式趋同。

同时作为 B 端产品的官网,其实是更需要新拟态这种风格。因为电脑场景下鼠标光标对页面进行 Hover 操作给出的真实反馈,而使用了新拟态的官网按钮,给你的反馈非常真实。

这里安利一下腾讯云的首页官网,大家就会发现在设计风格上大量的采取了新拟态元素,并且配合 3D 风格的图标,以及毛玻璃材质的设计,让它的设计瞬间加分不少。

从视觉产品两方面,分析2022年B端设计的发展趋势

3. 开源的设计系统

在去年,设计系统迎来了一波发展的高峰期,随着字节、腾讯,三大设计系统(Arco Design、TDesign、Semi Design)的开源,其实是给我们很多 B 端设计初学者,有了更加完整仔细的 B 端入门教程。

比如 Arco Design 的组件用法 https://arco.design/docs/spec/link

从视觉产品两方面,分析2022年B端设计的发展趋势

清晰的讲解了每一个组件的使用方式,以及注意事项,仔细阅读这里面的内容,其实就是 B 端设计的入门学习。而未来,国内的环境,开源的系统也会越来越多,大家可以针对这几大类不同的设计系统进行对比,或许会有一番收获。


产品趋势

4. 超级 app

这里的超级 app 可能和大家潜意识里的支付宝、微信这些软件不太一样

在 B 端行业,随着疫情的不断扩散、再加上两年时间的发展,很多 B 端产品的功能架构都出现了一个现象,产品的功能开始变得非常拥挤。因为 B 端软件的核心价值其实就是靠着一个又一个功能去累积,也就意味着随着 B 端产品的发展,功能模块在不断的累积,导致在设计层面,这样的现象变得更加严峻。

你会发现左侧的导航菜单已经完全没有办法装下这些导航内容,而这一现象也反映在很多产品当中,比如我了解的飞书管理后台、薪人薪事 等等诸多 B 端产品,它们在整个导航内容上,已经增加到一级导航 15+ 、二级导航 40+ ,这无疑会开始对设计师的能力造成巨大考验。

从视觉产品两方面,分析2022年B端设计的发展趋势

面对这一情况,许多导航菜单都将会迎来前所未有的挑战,最近也在深入研究导航菜单过多时的解决办法,发现了一些新的导航菜单设计方法,有机会咱们重新梳理一下导航菜单的内容,将 B 端设计指南文章进行更新。

从视觉产品两方面,分析2022年B端设计的发展趋势

低代码定制化

低代码一直是我关注的一个领域,先给不明白低代码的同学简单科普一下。

低代码,一种快速开发应用的软件,将通用、可重复利用的代码形成组件化的模块,通过图形化的界面来拖拽组件并形成应用。低代码能够实现只写少量代码或不写代码,类似用“乐高积木”的方式来开发。

在国外有很多著名的低代码成功案例。Outsystems(国外非常出名的低代码平台)帮助施耐德电气在 20 个月内推出了 60 款应用程序,开发过程加速了两倍;在 2012 年即将推出 Model S 之际,特斯拉放弃了 SAP 的 ERP 产品(可以思考一下为什么),改用低代码开发平台 Mendix,用 25 个人四个月时间自建 ERP 系统。

去年,低代码平台,也有很多新产品面世,其中就包含:

从视觉产品两方面,分析2022年B端设计的发展趋势

因此你会发现,其实低代码就是在解决一件事,围绕着某一个业务场景,通过平台的持续完善优化。让所有的功能都能围绕这个业务展开,其中包括:权限、时间轴、流程、表单、公式等等,能够解决很多特殊的业务场景。而低代码会涉及到设计思路上的转变,以及低代码编辑器的出现,如何去设计如此复杂的配置流程,如何让用户能够快速上手,如果你能够有比较完整的思路,这些都会成为我们设计的新机会。

行业细分

随着互联网市场的不断发展,用户会越来越关注产品在自己行业的应用,比如 CRM,其实只是一个笼统的称呼,现在 CRM 市场又会分为 SCRM、运营 CRM,等诸多产品。

SaaS 类的平台也出现了负责从虚拟主机和数据库层面入手的 iPaaS 以及从应用和数据层面入手的 aPaaS。

即使是大家经常使用的 钉钉、企微、飞书,它们也在各自的领域有所擅长。

从视觉产品两方面,分析2022年B端设计的发展趋势

因为 B 端产品,在底层逻辑上是不能允许趋同的产品出现,如果你和别人的产品一样,其实是没有办法在目前的市场上立足。因此你会发现,虽然产品形式都会比较相同,但是 B 端市场十分广阔,大家都在去寻找自己产品的差异化。

当然市场是瞬息万变的,这里也只是简单聊聊我自己的看法,希望对你有所帮助。

作者:CE青年

转载请注明:优设网

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

魏华的微信.png

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


更多精彩文章:






Bs界面设计之二:如何做好B端用户研究?我总结了这4个方面!

博博

用户研究产品设计中很关键的一项,它在整个流程中发挥着关键的影响。

在设计中确定相关的数据指标以及用户行为使得设计更加符合用户的目标。设计验证阶段可以验证设计是否符合设计目标。从而让整个设计流程具有确定性,为用户与公司带来价值。

有哪些研究方法?


1. 主动找用户


日常主动找用户做研究的方式有:问卷调查,线上数据,深度访谈,可用性测试。

如何选择研究方式:

在日常工作中,要选择什么方式进行用户研究其实是非常纠结的。这里给一组日常工作中我们常用的指标进行判断组合,包括:定量数据,用户行为,定性数据,用户态度。

1. 定量数据:以数量形式存在的属性,并因此可以对其进行测量,以物理量为例,距离、质量、时间等都是定量数据。

2. 定性数据:一组表示事物性质、规定事物类别的文字表述型数据。

3. 用户态度:用户对于产品的态度,喜欢或者是不喜欢。

4. 用户行为:用户的针对一个任务的行为路径。

这里举一个例子:想要根据定量数据推测用户行为—线上获取数据的方式有很多,其中深度用户访谈在日常的调研中用的比较多,所以今天主要讲讲深度用户访谈如何做。


2. 深度用户访谈


前期准备:三个阶段不同

针对产品设计有三个阶段:需求确认,设计实施以及全量上线后的验证效果。

1. 需求确认阶段核心:确认需求是真实存在的而不是意淫的,主要是用于场景评审过程中,产品经理讲述需求的场景和需求的价值。

2. 设计实施阶段核心:为设计师提供用户行为参考,防止因为没有用户行为进行参考而导致的设计师脑补用户行为产生臆想。

3. 全量上线后:主要是验证前期需求和设计过程中的想法给用户带来的正负影响,有时候如果内部出现不同的声音往往会有灰度测试以及 AB 测试等等方式来确认具体哪个方式更合理。全量上线后,主要是看全部设计的结果。

选取对象:

除了要挑选不同对象外,还要挑选合适的测试对象才能测试出想要知道的方面,具体的有以下维度:

用户类型:具体的分 KA/非 KA,KA 是核心大客户的意思,客户具体的分级别是:KA,A,B,C,D。

一般的情况下是邀请 KA 客户进行测试。

角色:具体的要看测试什么功能,比如要测试美业服务场景相关模块,一般处于这一块的角色是销售。

使用年限成熟度:一般分为新/老,举个例子:针对新功能上线时候,一般会选择新用户,测试操作的难度。

是否使用过竞品:往往用过竞品的可以找到两个产品之间的对比,从而找到优化的点。

常用的模块/端:不同的模块与不同的端,针对的是不同的用户。举个例子:在工厂内部,生产工人常用的是 pda 设备。

如何建立邀约:特殊的角色

这里讲到 SaaS 中有一个角色:客户成功。为什么要讲这个角色,因为有两个点:

1. 调研之类的需要获取客户信任,客户成功(客户服务)是最接近客户的。如果通过客户成功邀约的话,成功率最高;

2. 还有一个点是调研过程中有时候口误会引起不必要的误会,这个时候就会反映到客户成功身上,从而影响到客户成功的业绩。

针对性话术:

提高邀约的成功率要通过客户成功同学,这个时候客户成功同学其实有自己的顾虑,主要是怕打扰到自己的客户从而影响到业绩,针对调研话术分三个方面:

1. 价值传递打击痛点:客户成功同学的业绩主要是由客户的续费率以及流失率两方面决定,作为设计/调研先表明不会打扰到客户,而且这次测试的功能/模块有助于提高客户成功同学的续费率以及流失率两个方面,就能大小顾虑。

2. 了解敏感话题:这里还要通过客户成功同学来了解客户的敏感话题,比如:核心数据,收入等等直接不要提。

3. 注意点:一次性不要去太多人(消费除外),容易吓到别人。

邀约客户注意点:

1. 电话说明身份和来意,打消客户的顾虑获取信任

2. 尽可能避开营业高峰期,不影响客户的正常营业

3. 有时候也会被拒绝,但是也别死心,可以约下一次

实施中间:

邀约到位之后,实施主要是两个部分访谈技巧和人员配合。

访谈技巧:

一般的访谈技巧分为 3 种:开放式,半开放式,结构式。

(1)开放式:话题会比较分散,访谈起来会比较随意。举个例子:你觉得这个如何?

(2)结构式:准确询问,有一定的压迫感,更多的是针对用户行为可以询问,但是一旦涉及到开放式问题效果就不会太好。而且客户时间长了也会感觉不会舒服。

(3)半开放式:针对部分用户进行开放式询问,通常选择这个方式,既不让用户感到不舒服,又能达到调研的目的。一般是分成 4 步:

破冰:一般是自我介绍,情况说明,活络气氛,为接下来做准备

信息确认:了解用户的基本信息,产品体验历史和大概经历

逐步深入:开始深入较深度,详细的提问,了解用户使用体验的真实情况和体验细节

回顾与补充:结合前面访谈过程中的对话内容,可能要补充的问题,在这里可以跟用户展开开放式的对话,了解用户对产品的整体态度、建议,对竞品的态度等等。

人员配合:

访谈时候不光有访谈的技巧还有人员之间的配合也是比较关键的,主要是分为 5 类人员:

1. 主采访人员:主要是专业的调研人员负责询问,这里需要一定的专业的知识作为支撑。

2. 补充采访人员:询问的时候可能会漏掉问题,这时候补充人员就可以找时间进行补充询问。

3. 录音:这个跟客户之间要先进行说明以及确认才可以进行,不然会引起客户的反感。

4. 拍照:辅助人员一般会进行拍照留念,返回去跟团队进行分析,这里也要提前说明而不是直接进行拍照,这是对客户的一种尊重

5. 记录人员:这里注意点就是不要只会埋头记录,还要会抬头跟客户有眼神交流

访谈结束后要对客户进行感谢,并赠送一点的礼物。

访谈后期:

访谈结束回到公司的阶段,主要涉及到两个阶段:数据清洗,归纳复盘

数据清洗:

在访谈当中,其实不是所有的内容都对改版是有利用价值的(比如:简单的发泄情绪),需要把重复的问题和无关的问题清理出来,找到所有访谈中有价值的部分,为后面的设计进行有力的支撑。

归纳复盘:

归纳复盘阶段主要是把所有需求进行分类,然后根据类型进行任务区分以及任务排期,主要分成 5 个类型:

1. 新增功能:以前没有的功能,现在新增功能,具体的执行角色是产品经理。

2. 功能优化:单个功能的问题,不流畅等等产品带来的体验问题。具体执行人是研发人员。

3. 流程优化:单挑流程复杂,效率低等界面操作流程优化问题。具体执行人是设计师。

4. 视觉优化:颜色不清晰/图标表达不明/字号看不清等等示意和指引,信息标识问题。具体执行人是设计师。

5. 性能优化:卡/BUG/LOADING 等系统缓慢的问题。具体执行人是研发人员。


3. 用户找我们


我们除了可以去找客户,客户也回来找我们反映问题。这个方式其实是更加直接的。这个方式的三个阶段,分别是收集需求、问题分类、以及问题进行排期。

收集问题:

用户主动找我们有三种方式:用户需求方反馈池,客服记录,群聊记录。

1. 用户需求反馈池:销售/客服/客户成功将收集到的用户需求放入池子中,产品经理可以去池子里面筛选需求。

2. 客服记录:用户直接跟客服进行反馈,客服收集之后直接扔到需求反馈池里面。

3. 群聊记录:这里的群聊有“销售+客户成功+产研群”也有“客户成功+商家群”,定时会有值班的设计师/研发/产品经理进行值班,在内部我们叫做司机。有句风趣的,长期值班的我们会戏称对方“X 司机”。主要是将问题收集起来直接发给相关的人员,将问题及时解决。这里的回复方式比较讲究:回答尽可能给不确定的时间节点,打消用户的顾虑。

问题归类就跟复盘分析一样,重复的就不用再写一遍了。

如何解决用户反馈的问题?

需求分级:

我们内部专门有个区分的表格,其中横轴是重要与不重要,纵轴是成本低和成本高。我们会将所有需求开会讨论进行排布。

需求排序:

具体的需求我们分成 4 类:

1. 重要/成本低:一般是 KA 级别的客户才是重要的,成本计算要具体看,这个优先进入排期。

2. 重要/成本高:次优先级解决

3. 成本低/不重要:需要排期一次性解决

4. 不重要/成本高:有时间再解决,没时间再说,这里一般指的是 F 类客户个性化需求。


4. 成为用户


这个一般是土豪公司的选择,典型的像有赞,把实体店开在公司楼下。然后让产研人员定期去当店小二,在自己的系统当中去找出问题,早上去做店小二,下午就把 BUG 修改完。


总结


用户调研
是产品设计中很关键的一个环节,需要每个环节和每个人认真的去做。

作者:玩设计的鸡腿

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:















Bs界面设计之三:B端设计指南:快速了解B端产品的四种分类

博博

在我们日常的沟通当中,很多时候大家都会将自己的产品,以“B 端产品” 这样宽泛、含糊的方式进行阐述。但是 B 端产品由于服务对象不同、发展方向差异,也就导致产品本身就会有很多不同的分类。

今天就和大家分享 B 端产品的四种分类,以及对于设计师而言,这些分类会给我们设计落地、职业选择造成哪些影响?


垂直业务型产品


垂直业务型产品是针对企业垂直独立的业务需求所设计出来的 B 端产品。这类产品的出现,主要是围绕某一个复杂业务场景,去解决这个场景当中企业经营、管理的实际问题。

B端设计指南:快速了解B端产品的四种分类

比如以 CRM 为例:CRM 的全称客户关系管理系统

因为它是客户关系管理系统,而使用这类产品的主要角色就是销售员工,他们在进行商品售卖(特别是交易周期较长的商品时)需要销售人员通过 CRM 进行管理客户。

B端设计指南:快速了解B端产品的四种分类

而作为企业为什么要使用 CRM 产品?

其实是因为企业本身会有较强的管理需求,我希望能够通过 CRM 去监督每一个销售人员究竟是否认真完成工作,是否合理合规高效的与客户进行跟进沟通,因此可以通过 CRM 满足企业的管理需求。

但“销售”这类角色往往非常特殊,它存在于各行各业,比如楼下提供保险业务的销售人员、楼上在线培训的销售人员、自己公司 B 端产品本身的业务销售人员。

B端设计指南:快速了解B端产品的四种分类

而大多数 CRM 产品考虑的不是针对每一个行业单独去制作一款 CRM,因为销售团队在使用的过程当中,就会存在很多共性,产品便可以通过共性去抽象一个针对多行业的客户关系管理系统。

垂直业务型通常属于 B 端产品当中难度较高的产品类型,因为不同的业务,往往作为设计师需要了解的不是简单的这个页面长什么样,而是这个业务下,员工应该怎么用,怎么用才是更为合理的,而在很多招聘信息当中,就会发现企业更喜欢去招聘有过类似经验的设计师。

当然作为设计师,如果选择进入一家垂直业务性产品的企业,应该更多的去阅读行业相关的书籍,比如想要做好 CRM 产品,你必须了解什么样的销售人员,具备什么能力,才是一名资深的销售。通过了解行业人员的具体使用细则才能更好落地设计。

B端设计指南:快速了解B端产品的四种分类


行业属性型产品


行业属性型产品是针对某个行业定制的一系列,从上至下、从内到外的产品功能。这类产品主要是围绕一个具体的行业去构建整个产品的解决方案,目的是这个行业的商家,在使用了这款产品过后,就能够解决它目前经营过程当中的问题。

比如以在线教育行业为例,小鹅通应该就是在线教育行业的头部产品,去观察它的产品功能模块你会发现它会涵盖课程详情的内容管理、学员知识付费的交易管理、对产品进行营销的 Marketing、成功付费学员的客户关系管理,而这些功能模块在其他产品当中都可以单独拿出来,当做一个大型的 B 端系统的功能。

B端设计指南:快速了解B端产品的四种分类

行业属性型产品更多是以这个行业当中需要用到的产品出发,考虑就不再是单一的老师角色,而是一个课程培训行业所涉及到的所有工具,都希望能够通过行业属性型产品去解决。

在设计上,行业属性型产品不会过于复杂,功能都会相对比较简单,因为对于这些商家而言,不需要过于复杂的系统,只要你能够满足它的日常工作即可。

比如小鹅通,就是属于在线教育行业的产品,它与纷享销客当中的客户管理就会存在明显差异,无论是从功能还是界面的复杂程度来说,都完全不一样。可以看到筛选、视图、表格操作,等多方面的交互、产品规划,都会有明显的差异。

B端设计指南:快速了解B端产品的四种分类


协同办公型产品


协同办公型产品是通过软件实现工作协同、办公自动化,让企业高效运转的产品。

大多数情况下,企业内部的办公管理没有太多个性化诉求,因此会购买成熟的办公协同产品:比如飞书、企微、钉钉、泛微

B端设计指南:快速了解B端产品的四种分类

目前较为常见的协同办公产品包含:在线文档、OA 办公自动化、IM、在线会议、项目管理、研发管理等产品。

协同办公产品,在企业当中通常只会有一款软件。比如在一家企业 使用了企业微信,就等于它会去使用腾讯会议、腾讯文档、tapd 等多款关联性的产品。

在设计层面上,协同办公型产品是最接近 C 端产品的特性,因为他的使用人群很多,并且使用的角色也复杂多样,因此在产品设计上,对于 视觉交互往往有着更高的要求。


运营管理型产品


运营管理主要分为运营与管理两个系统。

运营是针对自己本身就有 一款产品 A(不限于 C 端 B 端) ,为了满足产品 A日常界面的展示与维护,需要专业的运营类后台系统所支撑。比如淘宝、抖音、小红书,这些产品,他们都会有自己的内容审核 、广告投放等多个后台系统。

B端设计指南:快速了解B端产品的四种分类

运营的主要目的就是审核,日常的数据资料维护,比如以 sspai 为例,在少数派的网站当中,有作者进行投稿,因此必然会存在对应的运营人员进行内容审核,同时少数派还会有会员、商品购买,因此能够推断出少数派的运营后台一定会包含类似成员管理、会员管理,订单管理等前台系统已经拥有的功能,来执行网站后续的运营工作。而管理则是针对系统当中的商户、用户、租户的“信息资料”进行管理。

主要会涉及到:

商户的门店信息:

饿了么的商家服务后台,商家可以进入到系统里面去配置门店的具体信息、售卖的菜品、对应的活动等等,而饿了么就是通过这样一个平台能够规范商家在系统当中的行为,能够对他们进行有效的监管。

B端设计指南:快速了解B端产品的四种分类

租户功能的开通:

租户主要针对的是 SaaS 产品,也就是购买 SaaS 产品的客户,而我作为产品提供方,想要对每一个客户进行管理,就会有一个租户平台进行管理。比如在我们一个租户管理系统当中,为了让客户成功对每位租户的信息进行快速操作,在设计上并没有优先去考虑设计原则,而更多是将操作外置,让信息快速传递的同时,能够快速操作。同时使用的客户因为都需要进行上岗培训,这样简单的操作也能让他们更容易理解。

用户信息的分析:

对所有在平台的数据进行分析管理。比如在 B 站当中,就会存在大量的用户,一旦有人发言出现问题,或者言语行为过于暴力,那一定会有系统来管理这样的特殊情况。而用户给到的数据我们还能够对其进行更为细致的分析。


最后


其实一款 B 端产品并不是固定在某一个类型当中,更多是随着市场的不断发展进行变化,因此要去理解的是这个软件背后的业务诉求、推导他们的功能模块,盯着一款产品“发呆”(其实就是去想想,多理解),当然这对于 B 端产品的类型,有什么自己的想法也可以在评论区发表自己的看法~

作者:CE青年

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:














国外大佬总结的这20条B端图表设计原则!

纯纯

最近几年以来,大家能看到B端设计趋势已经越来越火热,在B端设计中关于图表的设计算是为数不多的视觉发挥点了。那么怎样才能做好图表设计,让设计出来的图表高大上,符合业务需求,让业务方和总监对你赞不绝口,本文就必须看完和收藏了,因为实在是太实用!

应用设计越来越依赖数据驱动,对高质量的数据可视化需求也越来越高。然而我们身边却充斥着令人困惑和误导的数据图表,但我们其实可以通过遵循一些简单的规则来改变这个情况。



1. 选择一个正确的图表可视化类型


选择错误的图表类型,或默认为最常见的数据可视化类型,可能会让用户感到困惑或导致对数据的误解。根据用户希望看到的内容,可以用多种方式表示相同的数据集。尽量做到每一次做数据可视化时都能从数据集类型分析和用户访谈开始。 

undefined



2. 根据正负值使用正确的绘图方向


当使用水平条时,在基线的左侧绘制负值,在右侧绘制正值。不要在基线的同一侧绘制负值和正值。 

undefined



3. 条形图总是以0基线开始


删数据起点会导致曲解。在下面的例子中,看左边的图表可以很快的得出结论,值B比D大3倍多,而实际上,两者的差异要小得多。从0开始可以确保用户获得更准确的数据表示。

undefined


4. 折线图应该要清晰体现y轴上的趋势变化


对于折线图,总是限制y轴比例从0开始可能会使图表几乎平坦。由于折线图的主要目标是表示趋势,因此根据给定时期的数据集调整比例并保持直线占据y轴范围的三分之二是很重要的。 

undefined


5. 使用折线图时要考虑时间连贯性


折线图是由线连接的“标记”组成,通常用于可视化时间间隔内的数据趋势。这有助于说明数值是如何随时间变化的,并且对于较短的时间间隔非常有效,但当数据更新不频繁时,这可能会导致混淆。 

undefined

例如: 使用折线图来代表年度收入,如果数据是每月更新的,则每个月在图表中会生成一个个孤立的标记点。用户可能会假设连接“标记”的线代表实际值,而在特定时间实际的收入数字是未知的,所以可能会产生误会。在这种情况下,使用垂直条形图可能是一个更好的选择。 


6. 不把折线图强行”平滑“


平滑的折线图可能在视觉上很好看,但它们错误地反映了背后的实际数据,而且过粗的线会模糊真正的“标记”位置。 

undefined


7. 避免使用比例不同的双轴折线图


通常,为了节省可视化空间,当有两个具有相同度量但大小不同的数据系列时,可能倾向于使用双轴图。但这些图表不仅难以阅读,而且它们还以完全误导的方式代表了两个数据系列之间的比较。大多数用户不会密切关注比例,只是浏览图表,然后就得出了错误的结论。 

undefined


8. 限制饼图中显示的切片数量


饼状图是最流行的也是经常被误用的图表之一。在大多数情况下,条形图是更好的选择。但如果你决定做一个饼状图,有2个比较好的建议:

1)不要超过5-7片,保持简单

2)可以将额外的最小段分组到“其他”切片 

undefined


9. 在图表上直接标注


如果没有适当的标签,无论你的图表有多好,它都不会有意义。直接在图表上标注对所有用户都非常有帮助。查阅图例需要时间和精力来理清数据和对应的部分。 

undefined


10. 不要在切片上贴数据


将数据放在切片上可能会导致多个问题,在可读性问题上和窄切片上都会有挑战。相反,添加黑色标签能清晰的链接到每个部分。 

undefined


11. 保持饼图切片秩序以提升阅读效率


在确定饼片秩序时,有几种常用的方法:

1)将最大的切片放在12点的位置,然后将下一片切片顺时针降序排列

2)把最大的切片放在12点的位置,第二大的放在顺时针相邻位置,第三大的放在11点的位置,其余的切片按顺时针降序排列 

undefined


12. 避免随机排列


同样的建议也适用于其他许多图表。不要默认采用字母排序,将最大的数值放在顶部(对于水平条形图)或左侧(对于垂直条形图),以确保最重要的数值占据最突出的空间,减少眼球运动和阅读图表所需的时间。 

undefined


13. 窄的饼图是难阅读的


饼图通常不是最容易阅读的图,因为比较相似的值非常困难。当我们把中间部分去掉,创建一个圆圈图表时,我们腾出了空间来显示额外的信息,但这样牺牲了清晰度,极端情况下,图表就会变得毫无用处。 

undefined


14. 视觉效果不要抢了数据风头


不必要的造型不仅会分散注意力,还可能导致对数据的误解和用户的错误印象。你应该避免:

1)3D元素,明暗面

2)阴影、渐变和其他扭曲的多彩色

3)斑马图案,过多的网格线

4)过度装饰,斜体,粗体或衬线字体 

undefined


15. 选择与数据性质相匹配的调色板


颜色是有效的数据可视化的组成部分,在设计时考虑以下3种颜色类型:一个定性调色板最适合显示分类变量。为确保易用性,所分配的颜色应该是不同的。连续调色板最适合需要按特定顺序放置的数字变量。使用色相或亮度或两者的组合,可以创建一个连续的颜色集。

发散调色板是两个连续调色板的组合,中间有一个中心值(通常为0)。通常不同的调色板将传达积极和消极的价值。确保颜色也与“消极”和“积极”表现的概念相匹配。 

undefined

看看一个方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3,它可以帮助你生成各种调色板。 


16. 设计的可访问性


根据美国国家眼科研究所(National Eye Institute)的数据,大约每12人中就有1人是色盲。你的图表只有在广泛的受众可以访问时才会成功。

1)在调色板中使用不同的饱和度和亮度

2)把现有配色去色然后检查对比度和可读性。 

undefined


17. 关注易读性


确保排版能够准确传达信息,帮助用户专注于数据,而不是分散用户的注意力。

1)选择易读的字体,避免衬线和装饰过度的字体

2)避免使用斜体、粗体和全部大写

3)确保与背景有高对比度

4)不要旋转文字

undefined

 

18. 使用水平条形图代替旋转标签


这个简单的技巧将确保用户能够更有效地阅读图表,而不会扭伤他们的脖子。 

undefined


19. 事先选择合适的图表库


如果你的任务是在web和移动项目中添加交互式图表,你应该问的第一个问题是我们将使用什么图表库?现代图表库包含了许多前面提到的交互和规则。基于已定义库的设计将确保易于实现,并能提供大量交互想法。 

undefined


20. 做成动态图表


帮助用户通过改变参数,可视化数据进行探索。然后得出结论,最大化价值和洞察力。在下面的示例中,你可以看到IOS Health应用使用了各种数据表示的组合。 

undefined

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


中后台没啥可设计的?试试这样拓展设计价值

纯纯

B类领域设计师必然会面对譬如CRM、ERP等诸多类型的中后台类产品。大多就是做做表单设计,年底考核时想争取涨薪证明自己,但老板要问的“设计价值”是个啥?在这些业务主导下的中后台产品又该如何定位设计机会及价值?



本文就以比较典型且系统化的中后台企采SaaS服务产品为例,来聊聊在这个领域中,是如何进行机会的挖掘,探索并付诸实践的。

01. 业务先赢 完成体验助力是基础

-

在过往数年里,阿里Ant Design,Alibaba Fusion为代表的中台团队进行了大量基础组件设计体系的积累,也沉淀了一些可直接复用的工程化解决方案。如果说有就行,的确产品经理和技术人员自己拼拼凑凑,就可以极低成本的获得一个较为套路化,但无需设计师介入费脑的中后台产品。



但作为用户工作环境中和风险、钱打交道为主,被强制使用的工具载体,在全球数字化经济转型推进趋势下,越来越多的中后台B端产品需要具备更高效,更细腻的体验,以改善千千万万使用者的数字化工作方式.

初步接触业务,我们即发现沿用基础通用设计组件库,“拼组件”的方式没办法满足垂直业务模块比如供应链询价、采购、财务核账履约领域高强度信息承载密度下精细化的用户体验诉求。

因此,为了增强SaaS产品及服务的不可替代性,提升售卖价值亮点以及产品续约率,我重点对业务场景下特有的行为组件、模板及方案链路进行抽象归纳改良设计。



这样做最直观的好处就是不浪费时间重复造轮子,站在巨人的肩膀上来完善组件库,提升设计效能,1位设计师就能通过业务场景组件,高效承接密集的产品需求。 

另一方面,收拢特定场景下核心差异点,只聚焦最小范围来打磨组件及流程,可敏捷实现差异化设计的最佳实践。 

精细化的场景多欠缺合适的线上化解法,作为你深度挖掘,充分思考下的设计方案,相对更容易获取某些领域的设计奖项甚至专利,证明你有在设计上做出了壁垒,创造了价值。 

除此之外,由于该敏捷的体验设计过程是以抽象核心差异为契机,对应领域的设计师亦能更高效的构建出业务特定场景下的独有的“Design System",在后续过程中放大设计价值。

02. 中后台产品 效率是关键

-

多数中后台产品(尤其是企业级应用系统)会出现 "功能、页面多"、“流程长”的臃肿现象。 

受打工人身份禁锢下的实操用户大多也是迫于工作合规要求,不得不从原本习惯的线下作业流程,转变为在中后台线上了解信息,以及多角色协同决策处理事务。甚至可以说有了中后台的存在,反而增加了他们日常工作操作成本,故无论是新用户还是老用户,都难有意愿于中后台完成事务处理的体验闭环。



为提高采购流程的效率,让中后台线上作业更轻松,更提升企业收益/价值。

我们基于用户行为能力动机,从“替ta完成”,“催ta处理”,“助ta做快”这三个维度,通过协同引导提效的方式来促进线上事务处理完成并流转。简单说,机器能做的就自动处理推进,不能的则及时触达引导,力求做到中后台事务处理过程去人工化,以及主动精准有效的引导。



设计师在这个环节内除了结合新技术,和业务团队共同打造一些智能化服务替代原本高重复性操作以形成新体验外,还可以深刻研究并理解人性本质,在相关待办或服务内容触达上精细化设计。

01、让待办任务更有效的被触达并解决

与业务一起分层提醒内容,及对应内容的可读性、可视化设计;

02、基于用户行为动机下的推送规则设计

不打扰用户工作前提下,及时引导助其理解更促使用户启用自动化提效服务,譬如处理受阻失败、或用户刚完成一项任务时,引导其配置自动处理规则,提高整体效率;

03、打造激励机制和场景

定期进行实操人员处理任务完成度/时长的同团队数据分析比较及外显方案,结合数据可视化呈现手段,在行业内外部团队相互制约下,促使用户自我驱动警示,保障事务推进流转。



最终目标即是推进业务中后台的用户数字化体验从最早的帮助Q&A被动唤起自助化服务,变为主动承接服务告知可处理,半自动化分发,及自动处理,甚至社会智能化数据自驱的演变进阶。



总体来说,在中后台产品给用户提供更简单、更集成的方案,大量消减操作步骤,突出真正重要的信息就是设计最大的价值。

03. 构建数字化管控的新体验

-

除一线实操用户外,我们还要关注管理者,有时更是一号位的老板这一类关键角色,他们在线上各个子环节都有较为强烈的可控,可管理的诉求在,以证明其付钱购买的中后台“在线数字化”工作方式真的能降本增效,或作为企业内部管理优化的量化指标依据。

在企业按年续费产品服务的商业化增长目标下,让管理者能真切意识并实际体会到数字化工作方式的价值就变得尤为重要。因此,设计的关键是增强管理决策者对数字化平台服务的感知度以及满意度。

01、智能化决策辅助的设计

和一线操作员侧的提效类似,只不过对于管理者,我们需更多着重于“替ta完成”和“助ta做快”这两部分去打造智能化服务的管控新体验。

为确保机器智能化处理逻辑更接近人的自然思维,设计师在这个环节中可主动补位,制定相应类型下数据的机器思维处理分析规则以及内容维度。



在过往采购SaaS中后台业务设计中,设计亦抽象了事务型进展以及综合决策分析决策两类数据模块新场景,通过直观结果呈现以及判断要点佐证,在管理行为及流程上促进管控手段的数字化升级,帮助管理者高效获取/查看/分析数据要点。



02、多维度的数据关怀提醒

有了对应的分析数据结果和要点,我们还要将数字时代下的管理数据,团队事务整体进度、风险预判结论有效触达管理角色,更放大其体感。



给老板用的数据大屏/中后台数据看板,及数字孪生可视化即是一种可以充分发挥设计表现力并擅长的领域,即便你所在的中后台团队没有相应技术资源,设计依旧可以通过“电子邮件” “长图”等通用载体,以轻量化的方式来完成价值传递。 

在这个环节,设计的价值就是让管理者读懂数据,受惠数据驱动的决策方式。

03、形成体验质量监测评估体系

以设计体验度量量化为起点,深度关联管理决策者关心的企业运营数据“健康度”,及商业化营收续签强相关的“续签意向”,来评定并监测用户对SaaS产品服务的整体接受度及体验满意度。



我们基于HEART、PULSE、UES、五度模型等已有模型,选择业务目标和场景核心指标来调整衡量维度并推导演变,从业务、产品、技术、服务等多维视角构成适合企业采购SaaS产品的体验度量模型,推动运营/算法/后端共建机制及产品将体验监测工具化,以形成业务中多角色都能有效应用起来的体验质量评估体系。



最终,管理决策者较过往能更实时的掌握一线人员工作使用中后台的健康度情况,有效数字化管理。

对我们的合作伙伴业务运营团队而言,全新的客户续签意向管理预测方式,可提早发现风险,更能联合内部预警及平台触达运营服务有效规避客户流失。

而对于我们自身设计职能,通过这种度量维度方法和工具,不但能定期便携的获取核心指标变化作为设计价值量化凭证,体验监测所获得的相关结论还可以指出中后台产品当前业务阶段问题方向,结合设计目标锁定问题范围,定位后续设计着力点。

中后台领域心得技巧

-

上述即是企采SaaS中后台产品中的设计实践。我们也总结了几个定位设计机会及价值的心得或方法。



01、学徒式调研实操,同理映射用户 

具有出众同理心的设计洞察以及解法是体验价值的基础。(常说要站在用户视角做设计,但不像消费端,设计师多不是中后台实际用户,也很难换位思考理解用户工作行为特征和痛点。) 

因此,中后台领域的设计角色迫切的需要与更多的实际用户去交谈、调研。 

为提升该过程的质量及效率,我们尝试在用户定性调研访谈之前,多通过学徒式调研的方法,来熟悉其工作行为特征,定性的挖掘用户痛点。 

即是以单任务为维度,先请教我们的实际用户他们是如何做的,并依此自己上手完整实操,直到确保能按时保质完成目标任务。 

设身处地还原目标用户情景,理解各方案的优劣势,及如何在他人身上起作用的目的,在该环节之后再去和用户交谈,即可更高效的获得真实的用户洞察以及理想方案假设。



02、用设计擅长的可视化手段,呈现体验痛点

天马行空的设计创新方案总是在决策时受各种技术、资源为由被Pass,推进创新智能的体验方案在中后台领域是个尤为费事的过程。 

面对这一难题,我们可以通过体现设计思维的一些工具模型调整应用,来增强表现说服力,进而建立信任以及方案推进的成功率。



譬如设计侧常用的决策工具用户体验地图,在B类中后台领域中可以将原本情绪体验波浪线替换为效率数据来调整应用,梳理并呈现产品的全流程效率数据曲线,同理“峰终定律”来快速界定并洞察全链路中短板模块,以及低效待设计优化关键点。

借此数据可视化手段,呈现出来体验关键问题严重性,亦可让项目组各职能伙伴共情,获得设计策略及方案的认同。

03、和业务方向紧密结合,跟业务匹配的设计创新

设计创新提案难免会出现两类问题:

首先是创新提案推不下去,甚至被说是设计自high。

这多是因为没有想着结合业务方向,光想着创新或新颖的方式去设计方案。

我们擅长也希望通过酷炫的动效,创新的交互,智能化体验的畅想及解法来表现设计手段的精深。固然,这些事情的探索尝试或练习都有其意义价值,但作为商业设计师不能光纸上谈兵,只有结合业务顺势而为,我们耗时做的方案才有可能提案成功,更推进技术还原落地,从而带给用户更好的用户体验。

再者就是方案有结合业务,也被认可有价值了,但优先级往后走?

这说明设计结合的点不大对,并非业务最关心的。

中后台产品,多和前台核心战略有着强逻辑关系,或有广泛的、潜在的商业化潜力。而了解业务核心关注点,最简单快速的方法就是找到对的人——业务一号位,并快速抄作业。

勇敢点的可直接约业务一号位聊聊,含蓄的设计师亦可尝试借美化一号位汇报PPT等手段,巧妙的获取并理解业务核心目标,布局以及关键利益,在此基础上再从上至下梳理了解各子业务线规划,设计就能更好的取舍。

原文地址:站酷    作者:阿里巴巴CBU设计


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


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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司




如何选择确定B端后台设计风格及细节优化

纯纯


1.B端后台分类:

根据服务对象划分:

一类支持有C端前台,支持前台产品管理各种资源。第二类服务企业,提高企业工作效率和营收。


根据后台功能:

1.监控运营:时效性强,旨在实时反馈异常情况,快速判断下达命令,回复信息、多用于数据控制中心。

2.数据分析:数据结果的对比和分析趋势,时效性要求并不高,了解整体和各部分数据水平,助力决策。

3.记录管理类:主要用于人员、设备、资产等增删改查,文本信息容量大,频繁便捷的操作。

4.系统配置:权限配置、设备功能配置,操作为主。


2.后台深浅两大风格分类:

浅色:

适合文本信息多密集的表单列表类后台,浅色更符合人眼白底黑字的阅读习惯,浏览速度更快,信息获取效率更高。


深色:

图像信息密集的后台适合图片、数据可视化图表等;深色对彩色的图像信息衬托更强。信息获取速度较慢,长时间可能视疲劳。




3.作者常向产品方提供的风格参考

较常见


1.经典商务风(导航深、内容浅)——专业、高效、成熟、可信赖(对照深色西装人物形象)

      优点:市面最常见的风格,普世性高,大多数用户可快速接受,层次分明

      缺点:视觉缺乏记忆点


 2.轻量科技感(导航浅、内容浅)——简洁、明快、轻量、年轻(对照白衬衫打领带男性)

      优点:视觉清新明快更年轻化更轻量,对其他文本及图形展示包容性高,就像A4白纸一样容器存在感弱

      缺点:纯白色导航+页面层次略暧昧。


 3.蓝色科技风(导航中、内容中)

      适合:适合科技属性强的产品界面,图像图形展示

      缺点:对其他色彩信息有干扰,持续性长时间观看易视觉疲劳


 4.暗黑科技风(导航深、内容深)

      优点:对色彩表现力强

      缺点:密集文本信息获取速度会下降,持续性长时间观看易视觉疲劳




4.精准选择风格时可以进一步的考虑:

1.整体行业风格

比如美妆和科技行业的整体设计基调就不太相同。


2.产品想要传达的气质:

理性可靠 or  简洁轻松轻量 or 关怀普世 or 酷炫吸睛….这个可以和相关产品经理、销售共同商讨


3.目标用户的群体特点及喜好。

根据目标用户的性别、年龄层、受教育水平,审美水平考量(可能包含多种角色,选取1.2个核心角色为参考)带入目标用户工作场景及爱用物常用物品味,去判断基调。

如主要用户群:40+男性用户,本科以上受教育水平,使用windows电脑进行专业管理操作,审美倾向明确内敛。

如主要用户群:20-40岁,男女比例约6:4;大专;操作水平参差


4.使用场景及高频的操作。

例如:最常使用数据分析管理,需要快速阅览多条数据,对数据进行比对,更适合浅色风格展示表单数据。


5.判断独立的平台是否为独立开发

独立开发的,可以采取更独特设计。若平台很大需要不同外包公司的合作属于整合类平台则更注重设计的包容性。



5.如何让后台设计更具特色:

1.重点色的使用

“731配色比例”70%的面板色,30%的导航面板色,10%的强调色。(这里的用色比例可以根据内容具体再去调节只是大概比例)品牌色或重点色:强调行动关键点、重要信息高亮、图形化说明等。强调色用就要用的像蛋糕上的樱桃。起到画龙点睛作用即可。

2.图标的优化

后台高频出现的图标,值得我们花时间去统一设计打磨,调整圆角粗细疏密,符合整体界面气质。从图标库里拖出的图标很多在线条粗细上是不统一的,好的设计在细节处也要动人。

B端工具类图标识别性第一,美观性第二。B端导航图标更多是在基础造型上打磨,不需要加花里胡哨的渐变、投影,导航图标一般在24px-16px大小,太复杂反而看不清。在区分状态的时候可以考虑加点品牌色


3.空状态小插画

空状态插画是B端设计师少有能发挥自己绘画天赋小巧思的地方。

图形化状态语言,辅助用户理解内容。可以将产品机械苍白的文案设计表现的更加具有温度,具有引导性。让乏味的工作出现一些共情小彩蛋,有趣的插图动画可以缓解等待的焦虑。



4.登录注册页

纯色背景卡片式:简单大方更聚焦登录操作

插画背景:场景化展示产品的功能及亮点,让用户更有心理预期

几何图形背景:最后和品牌图形相关,加深用户对产品的品牌印象。

照片背景:相关场景或产品类型,具象图片信息更直观


5.圆角的大小

不同大小的圆角传达产品不同的气质,大圆角亲和、小圆角精致、中等圆角大众中庸。



6.优化信息层级

优化信息层级,区分信息主次可以使阅读更快,操作更快,界面更有节奏感。

这时候你就是那个考前画重点的老师

判断一个页面里最重要的是那些信息或操作,强化它!并弱化辅助信息;

判断一个模块里那些是重要信息,强化它!



6.新人需要避免的雷点:


1.追求炫酷的视觉效果舍弃操作效率。比如追波风满屏花里胡哨的卡片及面板,满屏大投影及高饱和色彩。对于B端界面来说信息噪音太多,反而干扰信息获取效率。


2.反常规用户习惯的操作。尊重用户习惯,不要为了个性化去尝试改变,不要妄图改变用户的操作和认知的惯性。惯性思维大于设计思维,曾经遇到过产品因为右手操作所以要把导航放在右边的离谱例子。


3.数量多,动静大的夸张的动效。B端与C端不同的地方在于希望操作者沉浸式工作,遵循非必要不打扰。之前看过一个反面例子后台,在每一步操作后都出现大的场景动效鼓励完成,如果作为一个长期使用的工作者,我会觉得每次完成任务都需要等待动画完成可能只需要2-3s也很浪费我的时间。


4.新人建议多看Antdesign和Element等成熟的组件,创新类组件样式,最好和和开发商量是否能够实现。


5.在确定主要风格及2-5张主要页面后,就应该着手基础规范(色彩字体等,不然后面越做越乱)。


6.一段时间一个审美,同一界面中的元素风格不统一。


7.避免大面积使用高饱和高明度的色彩,及暧昧含糊的临近色彩。长时间使用眼睛会累,产生不耐烦焦躁的负面情绪。



最后推荐几个官方组件库:




原文地址:站酷    作者:唐小葱 

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

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


日历

链接

个人资料

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

存档