首页

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


UI设计新人必须要善用这10个网站

seo达人


01. Behance

https://www.behance.net/

Behance 对于设计师来说并不陌生,作为国外的一大设计平台汇聚了众多的设计大佬,分享了很多高质量的设计作品。

对于 UI 设计师来说,这是我们需要定期访问的网站,里面很多 UI/UX 设计相关的作品都偏向于成套的作品输出。不仅可以让我们学习全案设计的思路,作品包装设计的思路和处理技巧也是非常值得学习的。除了 UI/UX 作品以外,还包括平面、图形、品牌、插画、摄影、动画等等作品,并且质量都非常高。

成为优秀的设计师离不开灵感的积累,这个网站绝对是高质量灵感来源之一。

图片

 

02. Dribbble

https://dribbble.com/

Dribbble 相信很多喜欢 UI 设计打卡的同学比较熟悉,汇集了大量设计师的一些日常创意作品。该网站不同之处是发布作品需要邀请码,就是需要有邀请码的设计师邀请加入才能发布作品,获得邀请码也相当于设计能力获得认可。

整体作品的质量还是不错的,如果当你设计时没有想法,这是一个不错的灵感采集地。

图片

 

03. Pinterest

https://www.pinterest.com/

这绝对是一个灵感采集的绝佳网站,经过众多用户的长期积累,已经汇集了全球大量的优质图片资源,其中设计作品也是非常丰富,且质量都普遍偏高。

你可以通过关键词搜索、画板关注、以图搜图等操作获得灵感,而且相似推荐还能延伸出更多类似构图、配色、主题等图片资源。点击作品还能跳转到原始出处,顺藤摸瓜找到更多优质资源,真的是非常便利。

图片

 

04. Mobbin

https://mobbin.design/

这是一个汇集全球优秀 APP 截图的网站,有超过 50000 个优秀 APP,节省了下载应用的时间,对于 UI 设计师来说非常实用。

同样的应用还提供了 iOS 和 Android 两个不同版本的截图,简直非常的人性化。这是一个使用起来非常简单的网站,海量的设计必将开启你的灵感脑洞。

图片

 

05. Medium

https://medium.com/

这是国外的一个分享专业文章的网站,各行业的大佬们会在这里分享自己的经验和心得,带给新人很大的帮助。作为设计师来说,一些设计技巧和经验的学习也是至关重要的,这里也汇集了很多优质的设计类文章,相信可以带给你更多帮助。

学习吸收国外设计师的想法也是一种扩充视野的方式,这个网站是一个知识吸收层面来说不错的选择之一。

图片

 

06. Unsplash

https://unsplash.com/

这是个人非常喜欢的一个图库网站,在做一些设计作品的时候,我经常去里面搜索符合的图片填充我的设计。这个图库网站的图片都是可以免费商用的,而且你无需注册也可以下载使用里面的图片,是不是非常的人性化。

网站提供了很多的图库资源,在搜索的时候采用英文搜索资源会更丰富一些。

图片

 

07. Zhongguose 中国色

http://zhongguose.com/

你知道茶花红是什么颜色吗?苋菜红你可能名字都不一定听过,中国有很多传统复古的颜⾊,这个⽹站相信会给你想要的答案。

当我们在做一些传统文化项目或者需要用到国风味道的配色时, Zhongguose 这个网站列举了很多中国色,提供给设计师进行配色参考。

图片

 

 

08. Designspiration

https://www.designspiration.com/

该网站除了通过关键词搜索图片内容以外,在搜索栏有⼀个调色板的图标,点击可以通过指定的颜色进行搜索相关配色的图片或者设计。在选择颜色的时候不是单一的色彩选择,可以选择几个配⾊组合进行搜索,对于设计师来说⾮常实用。

图片

 

09. Adobe Color

https://color.adobe.com/zh/create

该网站是 Adobe 公司开发的,主要功能就在于超级方便的色彩选取。它提供免费的⾊彩主题,我们可以在任何作品上使用它们。我们也可以选择不同的调色规则,然后使用交互式色盘、亮度以及不同颜⾊模式的滑块来建立颜⾊。

图片

 

10. 51学设计-设计规范

http://51xsj.cn/index.php?s=/index/design/categorylist.html

最后给大家推荐一个黑马哥自己的网站 – 51学设计网,本次主要推荐的是里面的设计规范栏目。为了方便各位 UI 设计师熟悉各大平台的设计规范,专门为大家整理了常用的设计规范合集,让大家更方便获取相关的资源。

当然,还有黑马家族平时推送的一些文章合集也收录在里面了,还有设计书籍栏目也是不错的选择。

图片

 

小结

灵感的积累来源于日常的不断吸收和总结,今天分享的这些网站如果大家可以经常去逛一下,相信可以带给你很多收获。本期先给大家分享这 10 个网站作为抛砖引玉,希望可以带给大家更多帮助。

 

原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》UI设计新人必须要善用这10个网站

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

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

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

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



组件固化、布局确定,如何对B端页面进行大的改版?- B端问答

seo达人


 

Fiori

在SAP的 Fiori 设计系统当中,同样它也进行过多次的改版:

从最初的 Fiori 1.0版本的Blue Crystal

图片

再到 Fiori 2.0版本的 Concept Design

图片

而Fiori 1.4 版本的 Belize

图片

而除了视觉风格的改变,更多是交互形式的一点点优化,而优化并不等于颠覆,更多是想在原本的设计框架下去调整错误的交互形式,在一些细节点上去做创新。

感兴趣的读者可以复制下方链接去看看 Fiori 的一点点改变:

https://zhuanlan.zhihu.com/p/54476972

 

Lightning

图片

在 SalesForce设计团队的 一次 YouTube 直播分享过,讲到一个问题:如果想要对当前的系统进行一次小范围的迭代,所耗费的资金可能会达到数百万美金。

因为当你进行了改版过后,企业需要通知用户有哪些改版内容;而销售则需要对大型企业进行培训;作为产品设计者你需要引导用户,提示他修改的点;

你上面所做的一切并不能覆盖所有的用户,就像我这篇文章虽然大家都会转发,但是也不是所有的B端设计师都能看到(不过大家也一定要多多转发)。

而很多用户不知道,也就意味着他可能需要去翻阅帮助文档、咨询客服。

这一系列的付出都是需要成本,因为不能简单站在一个设计师的角度去分析改版,更多需要你多去理解改版究竟会带来什么,特别是产品成熟阶段。

而SalesForce 的案例并不是劝退设计师改版,而是在改版之前需想清楚自己的真实需求,哪怕是视觉上的好看,也要确定你的设计与其他版本之间的差距究竟有多少,来验证自己的设计。B端设计目前难点不在设计“好看”的页面,而是如何讲清楚你设计的页面是合理的。

 

Element Plus

图片

这里也和大家聊聊 Element,不知道有没有细心的读者发现Element最近正在更新 Element Plus。

而关于Element的版本迭代,则是因为技术的原因。

如果你对基本的技术框架有那么一点点的了解,你就会知道 Element 是基于 vue 进行搭建的,而最近的Vue 3.0 的出现,也就意味着 Element 需要进行一次全新的迭代。

这是 Element 的技术迭代大背景下,而他的迭代过程,就需要将之前element系统当中一些基础内容给优化,调整来满足现如今B端市场的设计需求。

最近也在与 忠忠 一起负责 Element 的设计系统优化改版,如果你有设计系统相关经验,有充足的时间,可以微信咨询我。

 

总结

其实B端设计,更多的是优化、迭代,想要颠覆,会付出很多代价,正因如此它和C端不同,也正因如此才叫做B端。

 

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

作者:CE青年

转载请注明:学UI网》组件固化、布局确定,如何对B端页面进行大的改版?- B端问答

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

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

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

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


设计师搞定B端用户初级指南

seo达人



B端用户有哪些

不同于C端消费产品的用户比较唯一,B端产品系统更为复杂所以用户角色也更多。本篇将从商业销售的角度来研究B端用户。

 

用户构成

B端产品的售卖大多针对一个组织/一家企业,往往存在着产品价格高、产品体量大、适用范围广的情况,所以商家决定购买的决策成本更高,按照组织层级从上向下、可以归纳出「决策者」、「运维者」、「使用者」 三个层级的角色。

图片

  • 使用者 —— 一般是企业内的内部员工,在日常工作时需要一些支持性软件来更好地办公。比如公司内的员工进行上下班打卡,这时他们对于考勤系统就是使用者。
  • 运维者 —— 一般是企业管理内部的部门负责人或管理员,他们为企业提供支持性的服务,也是产品工具辅助完成工作的管理者。
  • 决策者 —— 一般是一个企业的CEO/负责人,他们来决定是否需要支付一笔不小的费用购入一款软件,来更好地管理企业。比如某公司的CEO最终决定买企业微信还是钉钉,让员工进行内部沟通。

 

关于决策链

B端用户的三个角色,通过相互影响形成了产品购买的「决策链」

这个“决策链”的作用产生在「是否购买」、以及「是否续费」两个核心问题上,通常我们简称为「新购」与「续购」。

在这里我还是重审下背景:出现的新购与续购概念,好像看起来已经脱离了本篇文章的主题,但这确实非常重要。对于B端产品,产研开发的核心目的还是将产品卖出,设计师作为产研的一员也需要背负这样的任务。所以我们需要研究用户,并且从商业的角度出发给出建议。基于此,新购与续购的商业概念可以帮助大家更好的聚焦用户场景与设计策略。

图片

 

关于新购:

新购即指从未买过产品的商家、初次购买的过程。

对于新购,有的商家是自上而下决策:决策者主动有意愿有想法,从而购买产品。

这样的方式在购买后对产品的推广和使用更为容易,下面人员的配合度更高,产品取得的效果也就更好,更容易成为优秀的标杆案例。

图片

有的商家是自下而上决策:从运维者主动有意愿有想法,并通过游说决策者、让其理解当前企业存在的问题、通过什么样的产品去解决,从而购买产品。

这样的方式取决于决策者获取到产品价值从而支持购入,如果没获取或不认同,则导致产品售卖失败;但没获取,却因为其它因素(比如竞品企业都在用了),可能会进行购买。但这样的方式因为不能获得决策者最大限度的支持,在推行起来会存在一些障碍和困难,因为B端产品往往牵扯组织内多个部门或人员,所以往往启动较慢,产品效果也不能保证。

所以在这个阶段决策者的态度与意见是非常重要的,运维者提供一定的建议,使用者通常没有话语权。

图片

 

关于续购:

续购即指已经购买过的商家,续约产品的过程。

决定续购的核心标准:产品是否有效果,翻译到产研侧就是产品是否被用起来了。

在这个问题上,因为决策者几乎不会参与过程,所以更考验运维者本身的使用策略,同时也非常看重使用者的实际使用体验。

在决策链上,核心角色的建议权,往往比决策权还重,是否被用起来以及用起来的效果是一个从下向上检验的结果。所以在这个阶段,运维者和使用者的体验非常重要。

图片

 

对症下药:

在了解基础的概念后,还要知道他们关心什么才能将设计对症下药。

对于决策者来说,拥有最终购买决定权,但因其并不是实际业务执行人,所以会考虑其他角色的建议与意见。他们关注营收增长、效率提高、减少成本等方面的问题。一般都是阶段性的查看成果,权衡产品价值。

对于运维者来说,是提供重要意见的核心建议者,也是实际业务的执行人会对产品有更多的要求和考虑。他们同样关注营收增长、效率提高、减少成本等方面的问题。但更多的是实际执行时的种种细节问题,具体些:管理方面的功能完不完备(比如社区中是否能精选评论、是否能自定给精选评论发奖励)、数据能力完不完善等等。

对于使用者来说,前期几乎只能被动接受,但承载着后期衡量产品实际使用效果的作用。他们关注产品便捷性、是否为自己解决问题。帮他们解决问题,他们才愿意用,产品才能用的起来、用的好。

 

如何寻找用户

对B端用户有一个大概了解后,我们再来了解下设计师如何介入用户、了解用户与用户相处,让我们的设计更打动人心。

不同于C端可以较为自由的选取用户,B端产品对于用户的选取与接触较为受限。

产品供应企业针对所服务的商家会提供一套售前+售后的服务体系,并配备了不同的人员分管各个阶段,例如有客户销售、客户成功、专属运营等。设立的目的是针对性的个性化服务,面对不同商家情况不同,所转述的产品价值甚至价格都会有所区别,当然这些信息也都非常敏感和隐私。

所以当你想寻找用户做调研时,一般要找到对应的商家运营,告知目的后帮你推荐合适的用户与联系方式,除此之外,在话术方面例如什么可以沟通、什么不可以沟通,如何回答敏感问题等更为严格(这个我们后文会再详细描述)。

图片

 

如何接触用户

在认知用户基础信息所处身份后,还需了解如何与用户接触,本文将从接触时机与接触渠道两个方面阐述,内容来自实际经验总结以供参考。

 

接触时机:

功能类变动

  • 在涉及操作的流程设计前后,需要跟进商家意见,看是否真正解决商家问题、减少成本或符合习惯。
  • 在大模块页面优化前后,需要调研是否符合使用习惯或预期。

视觉类变动

  • 在重要的视觉表现设计上(比如证书样式、皮肤设置等),需要调研是否符合其审美。

 

接触渠道:

除了寻求运营帮助推荐单个用户,还有一些渠道方式可以帮助你接触用户。

  • 日常沟通商家群

一般一个商家会建立一个包含该商家的运维者、B端的产品经理以及运营的群,用来解决对接问题以及日常咨询,所以设计师可以通过加入这个群,就能了解商家如何使用、都在反馈些什么问题。一般商家反馈的最多的是某某功能如何使用和bug类。

  • 产研反馈优化群

不同于商家群的人少而精的特点,问题反馈群更多汇集了各类技术与全部运营销售人员,用以处理运营在平时遇到的商家的各种问题、还有商家从故障平台等多个方面回收的使用反馈。这个群不仅可以帮你了解商家更关注哪些功能、还能通过技术对于问题的解答更加了解产品逻辑。

图片

 

如何跟进用户

一般B端产品的用户数量有限,使用深度也更高,除了非常少频的调研问卷,更多采用访谈的形式来进行问题的挖掘与调研。这些跟进方式其实在各个领域已经非常成熟,作者通过自己的实际经验罗列一些方法和区别以供参考。

 

实地拜访:

通过实地走访,真实的走入用户的实际使用场地,近距离、近环境的接触用户。

操作指南

  • 一般运营联系商家用户确定上门的时间以及目的来发起一次拜访。
  • 拜访时在设计师提前准备好问题的情况下,过程中因为B端商家的使用场景往往不能预想,且面对面聊天会更加激发用户的表达欲,所以在深度追问的过程中,用户的回答可能不会按照预想的方向进行,会经常跑偏,此时需要根据你的目的视情况引导谈话方向。
  • 沟通时,用户除了回答产研预设的问题、还会提一堆优化需求或是功能需求,此时要注意避坑,除了自己能力范围外的,不能擅自答应,但同时也需要给出比较委婉的解决方案安抚用户。
  • 用户所有提出的问题、给出明确的后续反馈时间、并同步组内其它产研同学、及时跟进和反馈结果,不然商家会觉得一直在提重复的问题给不同的人,但没什么反馈,造成不良印象。

实地拜访好处是面对面增强真实感、更准确的解读用户需求,也能一次性了解商家几乎全部的用户类型,有更为全面的用户源可了解,同时更容易跟用户熟悉起来,建立长期的关系。坏处是,成本高、费时间。

 

线上访谈:

一般遇到没办法花时间实地拜访的情况,线上联系也是一种好方法。此时需要联系好运营确认好沟通诉求后,自行线上联系用户进行调研。

操作指南

  • 联系前要说明来意、并预约时间(区别于C端直接打电话开始访问),一般商家都会很高兴(可能因为毕竟花了钱)。
  • 需要提前准备好问题,一般会按照问题逐个回答,很少跑偏。

线上调研的好处是便捷快速的聚焦问题,坏处是对问题的理解还有回答的准确度判断可能没那么高。

 

调研问卷:

不同于C端场景,B端产品因为用户体量上的原因,较少用到问卷。但依然有一些必要场景会用到,比如针对某一功能的认知、产品的满意度等。

操作指南

  • B端问卷的一个难点在于“如何发放”。C端一般在产品内留有问卷入口,因为用户量大、总会收集部分反馈,但B端用户较少,若要确保收集到一定量的问卷就得主动出击提高触达率。目前作者所在团队每周会针对运维者进行答疑直播活动,相当于每次直播都自动汇集一群目标用户,在直播过程中可以穿插问卷及入口,能够极大概率的收到反馈(当然填写奖励必不可少,可以准备一些公司周边小礼品抽奖)。
  • 问卷如何设计按照普遍方式进行即可在此不详述。

图片

 

如何维护用户

建立个人用户库:

通过以上方法我们已经开始并可以与各类用户认识、并进行调研了。做完调研后,我建议可以针对一些愿意发声的用户建立更深一层的关系,比如直接帮助他们解决设计问题、解答功能疑惑等,用户其实是乐于接受更多交流的。这样可以构建个人用户库,它可以帮助你避免重复的走预约流程,更加便捷的获取用户信息,让你对用户也能够更加了解。

 

关于B端的标杆客户

在B端产品迭代中,我们经常听到这样的话“我们要打造一个标杆”“目前这个功能还没形成标杆”等,这里涉及到一个词“标杆客户”。其实除了企业内部角色的划分,针对企业本身,也是有不同维度的划分,「标杆」相当于企业的一种分层维度。

 

什么是标杆:

标杆客户指该B端产品在商家内部推行后、使用的效果超过预期,对商家某问题起到了极大的正面作用。

 

标杆的作用:

  • 验证产品可行性

只用通过标杆的建立,才可以一定程度证明产品能力是符合市场需求的。如果迟迟没有标杆产生、可能产品本身就得重新考虑定位与方向了。

  • 为产品站台增强说服力

在很多销售售卖产品时,如果只是单薄的产品逻辑讲解,往往商家没那么容易理解获取产品价值,但如果有标杆案例,销售将标杆商家是如何运营、如何取得成果的流程阐述出来,基本上同行商家能够立马理解产品价值。

所以商家对标杆是很看重的,且要求会越来越高,不仅是同行标杆、有的还会要求有细分行业的案例给到(比如除了同样是家居行业、更希望有硬装行业、甚至家居-硬装-瓷砖行业的案例)

图片

 

为B端用户做设计的避坑指南

关于「如何为B端用户做设计」又是一个宏大的主题,在此先不做系统性的分析和展开,仅提供一些经历实战后的小技巧以供读者参考。

  • 产品模块对B端商家的作用不同、需求不同、要保证适配各类商家的灵活性
  • B端产品往往复杂,更注重页面引导、新功能的解释,所以每做一个新功能对于“能不能理解”的新人引导设计非常必要(且是人性化的)
  • 避免个人经验主义,B端场景往往不能共情,不能依靠个人生活经验去做设计判断
  • 决策者和使用者有时会在功能模块上有利益冲突,需要根据该功能对产品购买的影响程度,来权衡利弊(参考决策链)
  • B端产品是用户花钱买的,与C端的免费使用是一个本质区别,“买的东西去享受”和“免费的东西去享受”,感受与包容度是完全不一样。买,代表有所需,使用时,会有准确的预期,在产品设计时需要考虑该功能商家是否买单,是不是当初买这份产品所预期的,如果不是,谨慎添加,且要保证不增加任何认知/操作成本
  • 商家更注重仪式感,对于某些一次性场景不可因频率不高而忽视视觉表现,比如产品初始化设置。

 

最后

B端用户既是普通消费者也是企业打工人,在使用B端产品时天然拥有两重身份、会有职业属性的因素存在,所以拆解好这两种角色并对症下药,就可以了解他们深入他们设计出极致的产品。

以上内容来自作者在实际业务中的探索、学习与实践经验总结,未必足够系统与细致,欢迎留言讨论其中内容~

 

声明: 本文插图icon部分取自酷家乐内部图标系统;部分C4D插图取自UI中国-闷闷小闷闷的图标分享。

 

原文链接:酷家乐用户体验设计(公众号)

作者:十禾

转载请注明:学UI网》设计师搞定B端用户初级指南

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

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

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

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


关于设计师的出路思考,看见比技法更重要的东西

seo达人


1.浮躁的时代,停止躁动,保持独立思考

余秋雨曾说:这是一个浮躁的时代 ;我说:这是一个需要独立思考的时代。

我们每天忙碌的过着互联网民工起早贪黑的生活,每天接受着外界各种嘈杂的声音,都没完整的独立思考空间。为了缓解焦虑,有些设计师,每天拼命的学习,像海绵一样不断吸收知识,看似乎很努力,但是实际上是没有方向的努力,是平庸的努力。

回过头来想想,确实如此。无意义的学习浪费了时间还没有成效,这是最笨的一种方式。

在这个时代,我们需要保持独立思考,每个人都需要重新认识自己。比如我们想成为一个什么样的人?然后成为这样的人,需要具备的能力,最后付出行动,做就完了。

比如,你绘画比较好,那么就工作之余多去画画;如果你喜欢演讲,那就多参加一些演讲活动;又或者你只会画界面,那就大量做出更多精品作品。如果实在没有任何优势,那就去挖掘,先动起来,只有动起来才有变化的机会。

这种有目标的行动,用一分力,就能获得十分的效果,这才是聪明的做法。在努力过程中,不断收获正向反馈,激励你有更大动力前行。

 

2.建立壁垒,创造不可替代性

企业都在建立自己的护城河,建立竞争壁垒,那么我们设计师同样的需要这样做,创造不可替代性。如何构建自己的竞争壁垒,其实很简单,就是这个领域的知识体系。

知识体系的重要性,设计师在面对任何难题,任何场合,都能随机应变,并应用结构化思维去解决难题。

图片

上图是大厂设计师第一层级的能力模型图,也是设计师的知识体系建构的底层模型因此可以从这几个维度构建自己专业竞争壁垒,打造属于自己的知识体系框架。

这里,我们拿专业知识来举例,首先你对本职工作的专业知识了解多少?能做到什么程度?如果不足有没有思考过怎么去提升?任何一个小的点,做好了都能给我们产生很大正面影响。

图片

我们在构建自己的专业知识模型时,勿要贪多,觉得自己啥都会,全能型,最可怕的就是不知道还说自己知道。

我们成长过程都是一步步往前走的,所以不急不躁,踏实稳步前行,方能走得更稳更远。

 

3.破圈,走出去

之前听到一句话,很受震撼,分享给大家,“你之所以焦虑,就是因为你的认知不足导致的”确实,我们所有的焦虑就是因为知道的太少了,对周遭事务理解有限。对于设计师来说,这个圈子本身很小,我们更要踏出去。

如果我们想要和同龄人拉开差距,那么破圈就是其中一个不错的方法。大家都挤在同一个地方,当你还没有竞争力时候,你的机会自然更少,所以努力走出第一步。

破圈思维的好处:“圈子铸就动能,圈子铸就眼界”,眼界开阔,思维开窍,自然对自己人生有了更多的想法和思路。

那么如何破圈呢?其实就是去认识更多的牛人,看看他们平时在做什么?怎么思考的?如何学习的?时间怎么分配的?可以从中找到一些适合的方法,然后加以优化用在自己的身上。

很多人说,如何认识一些牛人,以及该认识哪些牛人?我觉得不一定是设计师的圈子,其他行业圈子都是可以的。只要能帮助到自己,对自己有价值的都可以的。成事在人,我相信没有什么做不成的。

 

4.时间分配,保持初心,全速前进

这句话其实也对我自己说的,新时代,更需要设计师不骄不躁的心态,默默前行。
任何时候,我们不能轻易停下前进的脚步。考虫网联合创始人石雷鹏老师:所有一切都可以成为努力的动力,永远不要停下前进的脚步拼命努力后,总有一天我们可以站在闪耀的地方,活成自己最渴望的模样。
选对一个赛道,哪怕一个很小的点,合理的时间分配,专注做到极致,我想你也可以做到这个领域的KOL了。
愿我们都能保持初心,方得始终。

 

原文地址: 功夫UX(公众号)
作者:Tony
转载请注明:学UI网》关于设计师的出路思考,看见比技法更重要的东西

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

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

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

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


设计模式丨加载提示:如何让用户看到任务执行进度?

seo达人



What 是什么

简介:「加载提示」是用户在提交操作之后,程序响应结果前显示的动画和指示。

加载提示通常是仪表或温度计式的动画,用于显示某项耗时较长的任务的关键数据。例如,上传大型文件或图像,或者在移动设备上加载移动应用程序时的动画,表示当前的状态以及完成任务剩余的时间。

例子: 使用 Ant Design 组件-加载中 搭建的kitchen页面加载时的效果

 

Why 为什么

「加载提示」可以让用户通过一个指示器看到系统正在积极进行响应,让用户感受到当下的交互反馈是实时的,使用户有耐心保持在等待的状态,不离开当前页面。特别是当一个页面其他部分都不能操作的时候,更应该加上加载提示,这样用户在等待的时候会更有耐心。

 

When 什么时候使用

当一个耗时的操作会打断用户继续操作,或需要在背后运行,耗时超过一秒时就可以应用此模式。

原因为:

  • 不到十分之一秒时,用户会感觉他们在与界面进行“实时”交互,软件的响应让用户感觉是即时的,没有感觉到延迟。
  • 在十分之一秒到一秒之间,用户会感受到略有延迟,但他们会等待并立即继续。
  • 超过一秒时,用户可能会认为他的操作对任务推进不起作用,导致其可能放弃当前任务。此时若使用使用加载指示,用户就能明确知道系统正在工作,他可以选择继续等待或者在此期间进行其他活动。

使用条件

  • 当前的操作系统需要一秒以上时间处理
  • 为了让用户明确知道当前系统正在运行
  • 想让用户留在当前页面等待

 

How 如何使用

在页面中放置一个文字或者图形的指示器,指示当前已经完成的进度。告诉用户:

  • 当前正在做什么;
  • 已经完成了多少比例;
  • 还需要多少时间才能完成;
  • 如何停止这项任务。

有时加载提示的时间不一定十分精准,但是只需要保证出错时能很快回到准确的时间就可以了。当一个用户界面无法推断耗费时长时,可以使用加载提示告诉用户当前系统的处理状态。

 

Example 案例

案例一:Apple 音乐 APP启动页面

用户需求:选择在线音乐听歌

在用户进入APP时使用了加载提示动画,通常应用于轻微等待的场景下。目的是让用户知道“系统正在工作,请稍等”。

undefined

 

案例二:语雀和钉钉邮箱上传附件

用户需求:上传文件

在上传大文件时,等待的时间可能比较久,此时的进度条可以让用户知道当前的上传进度,用户能够预估大概还需要多久才能传完。

undefined

undefined

 

案例三:安卓端Google Play 商店

用户需求:下载软件

Google Play商店中将软件下载到用户的安卓设备上时会显示加载指示条,将文件大小,进度提示等信息都显示在上面,可以让用户知道需要多长时间,并可以等待、取消或做其他事情,稍后再回来。

undefined

 

案例四:Adobe Creative Cloud desktop manager

用户需求:下载软件

Adobe 在其macOS桌面的 Creative Cloud 应用程序中使用了加载指示。 在页面中放入了进度条,让用户知道安装进度。

undefined

 


原文地址:Ant_Design(站酷)

作者: 六六

转载请注明:学UI网》设计模式丨加载提示:如何让用户看到任务执行进度?

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

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

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

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


盲盒热潮-设计师必备工艺揭秘

seo达人


 

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

 

图片

图片

图片

图片

图片

图片

[优化输出图像]

图片

图片

 

 

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

原文地址:百度MEUX(公众号)

作者:运营设计中心

转载请注明:学UI网》盲盒热潮-设计师必备工艺揭秘

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

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

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

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


还不知道什么是汽车HMI设计?进来带你快速了解

seo达人


什么是汽车HMI?

什么是汽车HMI呢?咱们先把这个概念拆分成两个关键词:汽车+HMI

先来说一下HMI,HMI是Human Machine Interface的缩写,“人机接口”,也叫人机界面。

HMI(人机界面)是系统和用户之间进行交互和信息交换的媒介,它实现信息的内部形式与人类可以接受形式之间的转换。

知道了HMI的定义后,我们把“汽车”这个前缀加上,汽车HMI是指用户与汽车系统之间进行人机交互的媒介

图片

当然汽车HMI并不局限于界面中,而是作为功能的集合,例如汽车仪表盘、HUD抬头显示器、交互媒介(语音、触觉)等,都是汽车HMI设计包含的内容。

 

聊聊汽车HMI的发展

目前我们说到的汽车HMI最早是在80年代初推出的。

在当时,普通汽车需要实现的功能在迅速增加,设计师的任务之一就是为驾驶员提供控制,保证驾驶员能够使用和管理这些新功能。

对于新功能的增加,主要遵循两种方法:

  • 一是添加模拟控件,为新功能添加物理按钮。例如想在车内开空调,需要空调开关控制按钮;想在车里听音乐,需要添加换歌/调节音量按钮。
  • 二是添加具有动态内容的汽车屏幕系统。例如展示车速的动态仪表、可以导航的动态地图。

图片

第一种方法在德系车中比较流行,而第二种方法在美系和日系车中比较流行。

现在看来也是这样,虽然现在汽车都在用车载大屏来代替物理按键,但德系车的物理按键仍然要比日系车多。

别克汽车在1986年最早推出了车载屏幕系统,用户可以在单色触摸显示屏中控制电台和天气。

图片

另一个典型的案例是日产推出的CUE-X概念车,具备可触摸和彩色图形的车载系统。能够看出来,当时车内功能控件的位置和设计跟现在的车内饰已经很像了。

图片

现在的汽车HMI更像是汽车控制中心与娱乐系统混合的数字座舱,提供的功能更多更强大,同时兼备娱乐属性。

图片

 

汽车HMI设计重点关注这些原则

设计美观有效的HMI,需要将艺术性与功能性合为一体。艺术性和功能性应该是平等和谐地协同工作,让用户沉浸在体验中。以下是一些基本的设计原则:

 

给用户控制感

汽车HMI应该始终在合理的时间内,通过适当的反馈,告知用户当前的状态

这一点在用户开车时尤为重要。如果系统在没有通知驾驶员的情况下就采取某个行为,很可能会对驾驶员造成干扰,产生不好的后果。

驾驶员驾驶汽车,实际上就是在控制汽车做出各种行为。这既是一种控制,也是一种反馈,控制的是汽车的功能,反馈的功能带来的结果。例如利用指示灯、速度仪表等各种动态化信息,随时告知驾驶员当前的状态。

 

遵循“安全第一”法则

HMI系统主要的好处是可以帮助我们避免事故。现代汽车配备了许多传感器,传感器可以收集信息,再利用这些信息跟踪驾驶状况。

HMI系统可以实时监控情况,防止交通碰撞和事故的发生。系统对条件的响应包括:

反应型:系统会通知驾驶员刚刚发生的事,例如胎压过低或疲劳驾驶,并向驾驶员发出警告。

主动型:系统分析状况,预测可能发生的情况,并基于潜在的不良情况向驾驶员发出警告。例如系统分析天气状况,并建议用户避免在道路结冰的日子开车。

图片

在设计系统响应时,重要的不是用大量信息淹没用户,而是要制定可靠的通知策略。发送给用户的反馈应该是:

  • 有价值的:用户只看到他们关心的反馈。
  • 及时的:反馈应该在需要时准确发送给用户。
  • 清楚的:在设计信息反馈时,依据模块化和格式塔原则很重要,确保用户能够快速理解反馈表达的含义。这些信息越容易理解,安全性就会越好。

 

认知负荷最小化

认知负荷是使用系统需要付出的脑力成本、思考成本。用户在使用产品时付出的成本越小,说明这个产品至少是简单易用的。

话说回来,如果一个车载系统要求用户承担大量认知负荷时,说明这个系统存在很大的改进空间。

首先,不要去强迫用户记住汽车驾驶相关的信息。大家都知道,用户在短期记忆中不能记住太多信息,特别是多个容易混淆的功能或抽象的概念。

预先考虑用户在驾驶过程中可能遇到的问题,例如机舱温度是多少?现在在听什么音乐?怎么导航去商场?基于这些场景和问题进行系统的设计,以此来解答用户的问题。

图片

其次,基于现有的心智模型构建HMI至关重要。为什么大多数汽车的仪表、中控的分布位置都很相似呢?

实际上这些都是在用户与汽车的交互行为中建立起来的使用习惯,遵循熟悉的设计方式,能最大限度减少学习使用系统所需的工作量。

 

减少不必要的分心

驾驶过程中,驾驶员没有什么理由去看手机,因为HMI能够做任何在手机上能够做的事情。可能会有人说,现在车载大屏尺寸那么大,会吸引用户的注意力,对驾驶造成一定影响。

所以现在越来越多的智能汽车推出各种车载语音助手,将声音——而不是触摸,作为用户与系统交互的主要媒介,通过语音来控制场景,例如切歌、拨打电话、调节温度等。

 

不言自明的导航体验

可发现性(在系统中找到特定功能)和导航体验应该在设计中处于最高级别。

现在很多车载系统面临着操作层级过多/过深的情况:用户需要点击很多次才能找到他们想要做的功能。

通过仔细规划系统的信息架构,将常用的功能放置在第一层级,可以避免这种情况。

图片

想调整座椅的高低,我们只需要上下移动座椅旁的把手就可以。如果用系统来控制座椅,需要将控制座椅的功能放在用户触手可及的位置,否则会增加用户的操作成本。

 

改进视觉效果

美即适用效应的影响下,用户更倾向于认为好看的、有吸引力的产品更实用。

设计师可以通过改进系统的视觉效果,改善用户对系统的感知态度。例如为导航渲染逼真的3D模型,能帮助用户更快地理解他们现在所在的位置和要去的地方,并获得很好的体验。

图片

验证HMI是否合理,不仅要衡量操作完成的时间和发生错误的数量,还要注重用户满意度。

尝试向真实或潜在用户进行可用性测试时,向用户询问,“这个设计让你感觉如何?”。如果发现用户的体验感觉不好,设计师可以提出更具体的问题,以确定需要改进的地方。

 

最后

用户对汽车HMI的期望很高,有时候甚至会依据汽车HMI体验的好坏来决定是否购买汽车。

如果你下次设计HMI系统,可以将这些要求作为基准:

  • 给用户一种控制感;
  • 提供良好的学习能力;
  • 避免分散注意力;
  • 不断了解用户偏好并提出更改建议;
  • 激发用户积极的情绪反应。 

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》还不知道什么是汽车HMI设计?进来带你快速了解

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

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

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

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


用一篇文章,帮你了解什么是虚拟数字人?

seo达人



1.数字人的三方面特征

虚拟数字人是指具有数字化外形的虚拟人物。与具备实体的机器人不同,虚拟数字人依赖显示设备存在,我们所知的很多虚拟人都要通过手机、电脑或者智慧大屏等设备才能显示。

图片

虚拟数字人宜具备以下三方面特征:

  • 一是拥有人的外观,具有特定的相貌、性别和性格等人物特征;
  • 二是拥有人的行为,具有用语言、面部表情和肢体动作表达的能力;
  • 三是拥有人的思想,具有识别外界环境、并能与人交流互动的能力。

综合来看,就是具备四方面的能力,即形象能力、感知能力、表达能力和娱乐互动能力

如果我们下次再看到有公司推出数字人,就可以结合这些特征和能力来判断这个数字人的可信度,避免被借势营销的企业钻了空子。

 

2.数字人的运作原理

知道了什么是数字人,接下来就要搞清楚数字人到底是怎么说话、互动的,是背后有真人在操控,还是完全通过技术生成。

面对新兴的数字人,相信很多读者都存在类似的疑问。

数字人的诞生发展和AI人工智能可以说是密不可分,想了解数字人的运作原理,首先要知道数字人的通用系统框架

虚拟数字人系统一般情况下由人物形象、语音生成、动画生成、音视频合成显示、交互等5个模块构成。(资料参考: 2020年虚拟数字人发展白皮书)

图片

交互模块为扩展项,根据其有无,可将数字人分为交互型数字人和非交互型数字人。

首先看一下非交互型数字人:系统依据目标文本生成对应的人物语音及动画,并合成音视频呈现给用户。

图片

交互型数字人根据驱动方式的不同可分为智能驱动型和真人驱动型。

图片

 智能驱动型数字人:通过智能系统自动读取并解析识别外界输入信息,根据解析结果决策数字人后续的输出文本,驱动人物模型生成相应的语音与动作来使数字人跟用户互动。

这种人物模型是预先通过AI技术训练得到,可通过文本驱动生成语音和对应动画,业内将此模型称为TTSA(Text To Speech & Animation)人物模型

 

图片

 真人驱动型数字人:真人根据视频监控系统传来的用户视频,与用户实时语音,同时通过动作捕捉采集系统将真人的表情、动作呈现在虚拟数字人形象上,从而与用户进行交互。

 

3.数字人常见的类型

调研分析当前市场上的数字人,根据人物图形维度,分为2D和3D两大类,从外形上可分为卡通、写实等风格,综合来看可分为二次元、3D卡通、3D高写实、真人形象四种类型。

图片

接下来根据每种类型的特点,从外在形象、服饰装扮、表情动作等方面,结合典型案例来逐一分析虚拟数字人的设计。

 

二次元类型

虚拟歌手-洛天依

图片

洛天依的职业设定为虚拟歌姬,个性软萌可爱、温柔细腻,外貌特征上是灰发、绿瞳,头戴碧玉发饰。

图片

 除了独特的形象和性格,洛天依还能唱歌、跳舞、直播带货,多样的才艺加持让人物设定不单薄,受到很多用户的关注。

 

3D卡通类型

虚拟助理-度晓晓

度晓晓是基于虚拟人IP的陪伴型虚拟助理。在小度助手的能力基础上,度晓晓有虚拟人物形象和情感交互系统,具备视觉识别能力,支持自然的交流方式。

图片

 在外形装扮上,度晓晓是红色短发的甜美可爱风,五官比例偏向二次元风格。根据现有案例来看,度晓晓在眨眼、微笑等面部微动作以及肢体的造型,都很自然、生动,整体设计效果相对较好。

 

图片

 度晓晓定期更新身穿不同主题服装、摆着各种pose的形象,每套服装都有一个主题再带配上各种周边小配饰,营造出一种清新时尚的效果。

 

3D高写实类型

浦发银行数字员工-小浦

小浦作为银行的数字员工,主要进行风险评估、要闻播报、投资建议等在线服务。

图片

▲ 从外观上,小浦在形象上无论发型还是五官都足够拟人化、职业化,穿着银行职业装,属于比较典型的银行职员形象。

 

图片

▲ 小浦没有很夸张的面部表情,始终以面带微笑的状态面向用户,给人一种亲切感。肢体动作相对较少,没有特别夸张的动作设定,只有固定的几套动作。

 

虚拟偶像-AYAYI

AYAYI是使用Unreal引擎造出来的特别拟真的Metahuman形象。

图片

▲ 外在形象:写实程度更高,人物整体效果已经和真人十分接近,五官特别精致、眼睑微敛、银色短发,散发着一种清冷气质。

 

图片

▲ 从AYAYI社交账号的更新来看,目前主要是分享一些AYAYI的摆拍图片,穿着的服装、饰品都比较真实、时尚,拍照环境都是休闲、艺术类的场景。

 

图片

▲ AYAYI人物形象的时尚感和真实感,更容易切入商业化,比如穿着特定品牌的服装进行摆拍。

 

高保真数字人-Siren(塞壬)

图片

Siren是高保真、实时、可交互数字人,用到了实时渲染、表情捕捉、动作捕捉、高保真3D扫描等前沿技术,达到了目前业界最高的技术水平。

图片

▲ Siren的面貌细节更加真实,可以很清楚看到皮肤的细节眼睛的转动说话的神态、脸上各种各样的细纹。不管是毛孔、细纹等皮肤质感,还是神态上的表情,都很像真人。

 

图片

▲ Siren在说话时嘴唇动作自然,效果真实。

之所以有的数字人看起来不自然,很大一部分原因是因为数字人面部表情不生动,特别是在说话时嘴唇和脸部、牙齿甚至舌头的联动,很容易出现动作不联动、不真实的情况。

 

真人形象类型

新华社AI合成主播-新小浩

图片

“新小浩”是无论外在形象、面部表情、服装搭配、说话声音,还是肢体动作上,都是完全基于真实主持人生成。

图片

通过语音合成、唇形合成、表情合成以及深度学习等技术,克隆出具备和真人主播一样播报能力的“AI 合成主播”。

图片

▲ 我们每天都会遇见各种各样的人,即使脸上最细微的表情,我们都可以感知到,用计算机打造出来的表情,往往缺乏灵气

真人形象的虚拟主播的优势在于,他的特征都是来源于真人,呈现的面貌和状态更容易被用户了解。如果不仔细看,可能分辨不出是不是真人。

 

4.数字人的应用场景

目前国内市场上已经出现了非常多的虚拟数字人,在各行各业中有着广泛的应用。

虚拟数字人技术结合实际应用场景领域,切入各类,形成行业应用解决方案,赋能影视、传媒、游戏、金融、文旅等领域,根据需求为用户提供定制化服务

图片

按照应用场景或行业的不同,已经出现了娱乐型数字人,如虚拟偶像、歌手、网红、虚拟代言人等;

图片

助手型数字人,如虚拟客服、虚拟导游、智能助手。

图片

主播型数字人,如虚拟主播、虚拟支持人等。

图片

这里搜集的案例只是虚拟数字人的应用的一小部分,还有很多优秀的应用案例等待着大家去一起发现。

 

5.代表性的研发平台

国内有很多互联网平台在研发虚拟数字人,我也从中收获了大量的信息和资料,这次把这些平台分享给大家:

  • 搜狗AI开放平台
  • 网易伏羲、网易易现
  • 百度AI开放平台
  • 腾讯云、腾讯NEXT Studios
  • 讯飞开放平台…

 

设计夹把这些网站进行了汇总,如果大家想了解更多关于AI人工智能、数字人和最新科技的发展,可以去公众号后台获取网站链接~

领取方式:关注公众号,后台回复【数字人】领取虚拟数字人网址链接汇总

图片

慢慢来比较快,希望对你有所帮助!

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》用一篇文章,帮你了解什么是虚拟数字人?

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

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

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

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


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档