首页

B端设计九大精髓

天宇 B端ui设计文章及欣赏

五一期间,我阅读了一本设计界的宝典——《B端产品设计精髓》,它系统地向我展示了B端产品设计的世界,我被其丰富的内容和深入浅出的讲解深深吸引,每一个章节都像是一扇窗,让我窥见了B端设计的精彩和复杂,现在我迫不及待地想要把这份感想、收获以及启发分享给大家;我相信这些宝贵的知识能够帮助每一位对B端产品设计感兴趣的朋友,就像它帮助了我一样。
B端设计九大精髓
 
 
 
 
分享目录
一、B端产品的定义
二、B端产品出现的背景
三、B端产品设计的目标
四、B端产品面对不同场景时的两个注意事项
五、设计一个优秀B端产品的四大要素
六、B端产品中的六个一致性设计规范
七、B端表单设计的两个原则及12个思考点
八、常见的五个B端类型产品
九、B端产品中的四个帮助系统
 
 
 
一、B端产品的定义
 
B端产品本质上就是营造、设计一个高效的、安全的、便捷的“用户使用过程”,帮助用户完成在特定场景下的一系列任务目标。它解决了信息如何在系统内、系统间,以及人与系统间,进行有效、高效的生产、组织、呈现和流动的问题。
 
B端产品,它不只是冰冷的软件或系统,而是一把开启高效、安全、便捷体验的钥匙。它精心设计了每一个用户旅程,确保在各种特定场景下,用户都能轻松地达成他们的目标,仿佛有一个无形的助手在默默支持。 在这个信息如海的时代,B端产品更是扮演着指挥官的角色,它智慧地组织和管理信息,确保数据在系统内部、不同系统之间,以及人与系统之间的流动,既高效又有序,极大地提升了我们的工作效率和决策质量。
 
 
 
二、B端产品出现的背景
 
B端设计九大精髓
 
 
 
 
1、企业电算化
 
想象一下,在古老的账房里,算盘的声音此起彼伏。但随着1946年电子计算机的诞生,这一切都被改写。这台由美国军方定制的‘电子数字积分计算机’,不仅计算着复杂的弹道,更预示着一个新时代的到来——电子计算机时代。 中国虽然起步较晚,但在20世纪80年代,我们开始拥抱这一变革,并在90年代迅速普及。这不仅仅是技术的飞跃,更是企业管理方式的一次革命。
 
会计电算化,就是将繁琐的手工记账工作交给了聪明的计算机。它不仅提高了会计工作的准确性和效率,还让会计人员能够从数字的海洋中解放出来,专注于更有价值的财务分析和决策。这是一次从手工到智能的巨大跨越,也是我们迈向现代化管理的重要一步。
 
 
2、企业信息化
 
企业信息化,就像是为企业的运营装上了智能的大脑和灵活的神经。它拆除了企业内部信息孤岛的无形墙,建立起一个畅通无阻的信息高速公路,让数据在各个部门、组织、业务之间自由流动。 这种无缝的信息对接,让企业各部门的协作更加紧密,就像乐队中的乐器,虽然各自独立,却能合奏出和谐的乐章。企业信息化的最终目标,就是通过优化资源配置、提升业务管理、实现数据的互联互通,来提高企业的整体合作效率,让企业在激烈的市场竞争中,能够更加灵活、高效地应对各种挑战。
 
比方说我们日常的的OA办公系统,一个出差报销的申请正常都会有五六个流程,每个流程都对应一个负责人,如果要是内部没有这种OA的办公系统,申请人要挨个挨个去找相关的人签字审批,会占用大量的上班时间,也给员工带来了很多的不方便,有了OA系统,申请人只需要把相关的资料一次性提交到系统,然后等待相关的审批通过即可。
 
 
3、企业数字化
 
在移动互联网、大数据等新兴技术的推动下,企业正站在数字化转型的风口浪尖。这不仅是一次技术的升级,更是一场深刻的管理革命。面对技术的浪潮,企业没有选择,只能乘风破浪,进行数字化转型。 
 
未来的企业将分为两种:一种是从出生就带有数字化基因的数字原生企业,它们在水中自由穿梭;另一种是通过数字化转型重生的企业,它们浴火重生,焕发出新的活力。 而现代的B端产品,不仅要服务于产品的直接用户,还要像一位社交能手,连接更广泛的社会网络,满足外部用户和非使用者的信息传输需求,打破信息孤岛,实现信息的自由流通。这不仅是B端产品的挑战,更是它们在数字化时代中的重要使命。
 
 
 
三、B端产品设计的目标
 
在B端产品设计的世界里,追求的是简洁而不简单。产品应该像一位贴心的助手,用清晰的任务目标和直观的界面设计,引导用户一步步完成工作。它简化了操作流程,让工作变得像流水一样自然顺畅。面对复杂任务,它又能提供清晰的指引,确保用户在每一个关键步骤都能得到及时的反馈。
 
我们知道,在企业中,有这样一群员工,他们充满探索精神,渴望解决更深层次的问题。对于这些奋斗者,产品设计不仅要满足他们的需求,还要激发他们的潜能,让他们在产品中找到成长和创新的空间。
 
此外,现代的B端产品不再是孤立的岛屿,而是相互连接的大陆。功能之间的关联性,信息的穿透力,让产品成为了促进企业内部协作和信息共享的桥梁。这样的设计,不仅能够满足奋斗者的需求,还能够提高整个组织的运作效率,让企业在激烈的市场竞争中保持领先。
 
 
 
四、B端产品面对不同场景时的两个注意事项
 
1、面对专业性高的职业,产品需要严格符合职业习惯
 
例如,我参与设计过的一个项目“能调平台”,它的目标是打造一个专业人士的得力助手,追求的是为专业人士提供一个他们能够立即识别和使用的工具。这些工具可能对外行人来说像天书一样难以理解,但对于专业人士而言,它们就是清晰明了的指令,能够迅速指导他们完成任务。
 
B端设计九大精髓
 
 
 
 
2、对专业性不高的职业,产品需要给予更多的关怀,产品需要浅显易懂,不那么“专业”反倒更加重要
 
例如,我们电脑里面自带的画图软件,它就非常的平易近人,每一个功能模块的摆放,每一个图标的设计是任何小白都能理解的方式,降低了普通用户学习的成本,加速了用户快速上手使用的时间。
 
B端设计九大精髓
 
 
 
 
五、设计一个优秀B端产品的四个要素 
 
设计一个产品,本质上是设计用户在一些特定场景、特定目标下的使用过程,是设计一系列分散的或者聚合的服务;用户不是为了“用产品”而用产品,更不是为了漫无目的的消磨时间,而是通过产品来获得必要的服务,高效的解决和处理其在业务上、管理上、商业上的问题,帮助他们降低成本,增加效益,最终帮助他们获得商业上的成功。因此想要做好这个服务,我们需要具备以下几个优秀的品质。
 
1、敬畏用户,理解用户
用户永远是最好的老师,任何一个产品设计师都应该努力抓住各种接近真实用户的机会,真正理解用户,挖掘和分析业务场景。
 
 
1.1、了解用户工作内容
了解用户平时工作的内容、机制、处理方式、完成方式、评估方式以及相关岗位。评估方式尤为重要,因为在某些方面用户对产品体验可能有特殊的要求。
 
1.2、了解用户工作场景
了解用户何时工作、在哪里工作以及怎么工作;尤其要搞清楚用户怎么工作,并且要了解用户工作的困难、压力、强度、周期等重要指标。例如,收银员大部分是收银工作,每隔一段时间,就处于高压、高强度的工作状态。
 
“一个场景=若干人物角色+若干用户情境+用户体验地图+……”,把可能出现的角色与情境进行搭配,形成若干个“真实”场景的组合,是设计之旅的开始;理解需求和对接设计不再只考虑功能点,更多的面向用户而非面向系统进行设计,从一个个场景出发,思考和完善产品的设计,使这些场景对应的需求得到满足。
 
2.积极沟通
在工作中多多沟通,把产品经理当成自己最好的伙伴,优秀的B端产品经理往往都是一个领域或者行业的专家,有着很深的业务背景和大量的实践经验,对相应业务的发展有着很深刻的理解和洞察,对产品的客户、用户都有着很深入的了解,是B端产品设计师最好的老师。
 
3、具备同理心
描述一个场景,本质上是以某种代入感的形式,使应用场景的人产生强烈的参与感,从而理解真实用户使用产品完成一个任务目标的真实感觉,产生相应的同理心,这是产品设计中设计师较高境界的追求,是一种深层次的用户研究方法,也是实现卓越用户体验的关键。
 
4、积极进行竞品分析
在创新的道路上,盲目冲刺可能会让我们迷失方向,甚至跌入陷阱。因此,尽早开展竞品分析,就像是在出发前仔细研究地图,它能够帮助我们规避风险,找到通往成功的捷径。通过深入了解竞争对手的产品,我们不仅能够学习他们的长处,还能够洞察他们的短板,从而为我们的产品定位和设计提供宝贵的参考。 正如古语所说:“知己知彼,百战不殆”。在激烈的市场竞争中,只有深入了解自己和对手,才能在每一次对决中占据优势。竞品分析,就是我们在这场没有硝烟的战争中的侦察兵,它能够帮助我们洞察市场动态,把握用户需求,从而制定出更加精准有效的产品策略。
 
 
六、B端产品中的六个一致性规范
一个好的设计规范有助于提高产品的一致性、减少错误出现的可能性、提高开发和实施效率、减少用户学习成本、方便后期追溯检验等。同时,也能统一向用户、客户传递一致的印象,形成一定的品牌价值。
 
1、一致性的价值
一致性有很多众所周知的好处,如降低认知成本、减少用户学习时间、提高工作效率、提升研发效率等。
 
2、产品一致性应该包含以下几点:
 
(1) 
布局一致性:
保持某一种类似的结构,因为新的结构变化会让用户思考,而排列规则的顺序能减轻用户思考与记忆的负担。
(2) 
色彩一致性:
产品所使用的主要色调应该是统一的,用来传递一致的品牌印象和风格,而功能性色彩也能形成固定的规则,方便记忆与识别。
(3)
 操作一致性:
降低用户的学习成本,提高开发效率 。
(4) 
反馈一致性:
系统对同一种功能和同类信息传递的呈现方式一致,使得用户与系统的沟通更加顺畅。
(5)
 文字一致性:
产品中呈现的文字大小、颜色、布局、语言风格等都应该是一致的。
(6) 
声音一致性:
产品中各种操作过程的声音,正向的如确定等提示声,负向的如警告等提示声。
 
联想电脑管家在优化加速、垃圾清理、安全中心、硬件驱动四个模块中都保持了相同的画风,布局、文字和反馈方式也都一样,很好的体现了产品的一致性。
 
B端设计九大精髓
 
 
 
 
七、B端表单设计的两个原则及12个思考点
 
B端业务以场景的多样性和复杂性著称,但也是有规律可循的,经过长时间的实战,我发现大量的业务都是以“表单+流程”的方式进行处理的。这些表单和流程的设计都有着极强的公共属性,这些公共属性进行梳理之后,可以形成一些公共的设计模块,不仅节约了设计和开发的成本,还让系统在操作、布局等上的一致性大大的增强,便于用户理解和操作,当然,随着智能化程度的提升,这些经典的设计模式也在不断的发生着变化,甚至可能消失。
 
1、表单设计的原则
 
1.1 表单信息力求简约
表单不能设计的过于繁复,要本着以用户实际工作为中心的原则,妥善分组、分区,经过分组、分区后的功能信息会使操作变得更有逻辑性,并根据角色、权限、状态以及使用场景来决定具体的显示方式,默认将不重要的信息隐藏起来,尽量给用户展示一个简单清晰的信息结构。
 
搜狗输入法在输入法显示器的文字旁边有个问号的小图标,鼠标触碰到这个图标就可以看到对输入法显示器一个完整的解释,看完之后这段注释语又隐藏了起来,让界面看起来更加的简洁。
 
B端设计九大精髓
 
 
 
1.2 要兼顾多角色多场景
在企业日常生活中,几乎每个员工都会跟表单打交道,为了给不同目的的用户在查看和处理表单时有更好的体验,我们需要使用“场景驱动的设计”方法,根据不同角色、不同场景,设计不同的方案。
 
例如,我日常工作中遇到的一个项目,它在同一个页面需要对IP、端口、地址映射进行颗粒非常精准的搜索以及新增的需求,基于这样的需求,我对每个功能点都做了分门别类的设计搜索及新增功能,这样就圆满的满足了业务的需求;在B端的表格设计中,它更多的是要满足多场景多角色下的功能需求,而不是为了视觉的彰显,在这个模块的设计,功能的实现、页面信息的清晰是第一位的。
 
B端设计九大精髓
 
 
 
 
2、表单设计的12个思考点 
 
B端设计九大精髓
 
 
 
(1) 需要展示的字段还可以更少吗?界面可以更简单吗?
(2) 用户光靠自己,是否能顺利填写单据?
(3) 怎样才能让用户填写更少的信息?
(4) 是否能帮助用户避免大量机械化的录入?
(5) 当无法避免大量录入时,怎样帮用户提高录入效率?
(6) 用户是否频繁在多种录入方式间切换?
(7) 怎样帮助用户尽量少犯错,并在出错的时候尽快纠正错误?
(8) 哪些角色在使用同一张表单?
(9) 在什么场景下使用表单?
(10) 他们主要完成哪些任务?
(11) 他们关心哪些信息?使用哪些功能?
(12) 他们在使用中有哪些特殊需求?
 
 
 
八、常见的五个B端类型产品
 
1、ERP系统
 
1.1 ERP系统的定义和功能
ERP是英文Enterprise ResourcePlanning的缩写,即企业资源计划。在当今复杂多变的商业环境中,企业需要一个能够全面掌控资源的智能系统,它就是ERP系统。它不仅涵盖了财务管理、供应链管理、销售与市场、客户服务等核心功能,还包括了制造管理、库存管理、人力资源等关键领域,为企业打造了一个无缝整合的管理平台。
 
ERP系统的应用范围广泛,它不仅服务于生产制造业,也广泛应用于金融投资、质量管理、运输管理、项目管理等领域。它通过整合企业的所有资源,帮助企业在各个环节实现优化管理,提升运营效率,降低成本,增强企业的市场竞争力。
 
ERP系统,就像是企业的指挥官,它用智慧和策略,协调着企业的每一个部门,确保企业的资源得到最有效的利用。在ERP系统的辅助下,企业能够更加灵活地应对市场变化,把握每一个商机,实现持续的发展和创新。
 
这是我体验过的一个项目管理的系统平台,在这里面可以清晰的看到一个项目的搭建到完工的整个流程以及它的进展,对于管理者来说,这是一个很好的项目管控平台。
 
B端设计九大精髓
 
 
 
 
2、CRM系统
 
2.1 CRM系统的定义和功能 
 
CRM是英文Customer RelationshipManaqement的简写,即客户关系管理,通过满足客户个性化的需要、提高客户忠诚度,实现缩短销售周期降低销售成本、增加收入、拓展市场全面提升企业赢利能力和竞争能力为目的。
 
客户,是企业最宝贵的资产。而CRM系统,就是企业守护和增值这份资产的智能管家。它通过细致入微的客户关系管理,帮助企业倾听客户的声音,记住客户的喜好,从而建立起稳固而长久的客户关系。
 
CRM系统的功能强大而全面,它不仅能够维护老客户,寻找新客户,避免客户资源的流失,还能提高客户的忠诚度和满意度,降低营销成本,提高销售效率。它帮助企业管理客户的每一个细节,从企业信息到联系方式,从网站互动到每一次服务的反馈,都记录得清清楚楚,为企业提供了一个全面、精准的客户视图。
 
在这个竞争激烈的市场中,CRM系统是企业赢得客户、保持竞争力的利器。它让企业的服务更加贴心,让客户的微笑更加灿烂,帮助企业在商海中乘风破浪,勇往直前。
 
下面就是曾经自己设计过的一个客户关系的B端后端界面,这个是给海外客户设计的,它很好解决了公司对客户信息模糊不清的痛点,通过这个产品,可以把用户的信息可视化,并且还能很好的观察用户的使用诉求以及使用频率,给公司理解用户分析用户提供了很好数据支撑。
 
B端设计九大精髓
 
 
 
 
3、OA系统
 
3.1 OA系统的定义和功能
 
OA是Office Automation的缩写,即办公自动化,是将现代化办公和计算机网络功能结合起来的一种新型的办公方式。
 
在快节奏的商业世界中,OA系统如同一位高效的办公室管家,用现代化的信息技术将日常办公管理化繁为简。它不仅管理着工作流程、发文审批,还负责传递公司新闻、公告,同时确保日程安排得井井有条,让团队沟通变得即时而顺畅。
 
OA系统的功能远不止于此,它还涵盖了人员考勤、知识管理、企业论坛等多元化模块,为企业提供了一个全面、一体化的办公平台。随着企业对协同工作和信息共享的需求日益增长,OA系统已经成为企业管理升级的重要推手,尤其是对于大型企业而言,它更是确保组织内部高效协同、信息流通的核心系统。
 
这个是我给某科技厅设计的一个OA系统界面,现在政府也越来越追求办公的自动化,通过设计可视化的平台希望给需要申请相关科技服务的人才以便捷。
 
B端设计九大精髓
 
 
 
 
4、 HR系统
 
4.1 HR系统的定义和功能
 
HR是Human Resource的英文缩写即人力资源。HR系统是为企业持续地提升人力资源管理水平和能力而出现的信息化支撑平台。
 
在这个竞争激烈的商业时代,人才是企业最宝贵的资产。而HR系统,就是企业守护和增值这份资产的得力助手。它集成了从组织管理到人事信息,从招聘选拔到培训发展,从考勤监督到绩效评估,再到福利薪酬等一系列功能模块,为企业提供了一个全面、高效的人力资源管理平台。
 
通过HR系统,人事管理专员可以轻松维护员工资料、部门架构和人员分组,及时更新员工异动信息,从而帮助企业降低人力成本,提高工作效率。这不仅仅是一个系统,更是一个企业人力资源管理的强大引擎,帮助企业在人才竞争中占据优势,推动企业持续成长和发展。
 
这是我体验过的一个HR系统界面,他把日常的考勤、离职流程、内部调动、培训申请等流程办理都集合在了这里,大大提高了企业的效率,也大大方便了员工流程的申请,不需要一个流程自己亲自跑很多趟。
 
B端设计九大精髓
 
 
 
 
5、BI系统
5.1 BI系统的定义和功能
 
Bl是英文BusinessIntelligence缩写,Bl就是商业智能系统,将企业数据转化为有用的信息,辅助业务经营决策。
 
BI系统就像是企业的智慧大脑,它能够将海量的企业数据转化为清晰的信息,帮助企业洞察业务的每一个角落。无论是读取数据、深入分析,还是将结果以直观的方式展示出来,BI系统都能轻松应对,让决策者能够基于事实,做出更加精准的业务决策
 
云电脑运维服务系统是我设计过的一个后台系统,专门用来记录云电脑专家的一个运营情况,能时刻获取每个地市云电脑的一个安装量、用户数量等信息。
 
B端设计九大精髓
 
 
 
 
九、B端产品中的四个帮助系统
 
1、提示(tips) 
TIPS一般指带有说明文字的“气泡”,通常出现在需要被解释说明的字段、列表的表头文字、按钮等位置。TIPS中的文字说明不宜过长。为了不影响用户操作,TIPS一般在鼠标悬停到相关区域后显示,鼠标移开即消失。
 
阿里云盘在打印功能页面对需要做出解释的按钮和图标旁边,有设计鼠标悬停功能,当鼠标触碰到对应的功能点时,页面会弹出对应的文字解释和说明,并且文字没有太长,当鼠标离开,文字又会消失,很好的帮助了用户理解页面的信息。
 
B端设计九大精髓
 
 
 
2、操作指引 
操作指引是指在特定场景下,系统对用户接下来的操作进行的指引。常见的有:新手指引、新上线功能指引、对某功能点的操作引导等。
 
EV录屏对于新手用户,他提前设置了操作指引模块,帮助新手用户快速上手,解决了很多朋友不知道如何录制声音、如何在线直播、如何录制视频、如何上传视频等痛点。
 
B端设计九大精髓
 
 
 
3、客服
早期的B端产品,客服是获取客源的一个渠道,很少提供在线客服;AI技术的出现,AI客服也萌生了,它将用户常见的问题一一进行回答,大大减少了人工客服的成本。
 
飞书的客服就是机器人,一个问题过去基本是秒回,及时响应了客户,省去了高昂的人工成本,快速的响应也提升了用户体验。
 
B端设计九大精髓
 
 
 
 
4、帮助中心
帮助中心主要面向两类用户角色和场景:一是使用产品的用户,在遇到某特定业务问题时,可以通过帮助文档提供的内容自行解决;二是需要全面理解产品的用户(比如售前人员或培训人员),为他们提供一个可以全面学习产品的渠道。
 
百度网盘在产品的右上角有个帮助入口,它提供了一个很全面的帮助文档,让对百度网盘陌生的用户通过阅读此文档就能对产品有一个很好的认知。
 
B端设计九大精髓
 
 
 
总结:
在设计的广阔天地里,每一次阅读都像是点亮了一盏明灯,照亮了我前行的道路。它不仅让我对设计的原理有了更深刻的理解,还激发了我对那些细微之处的好奇心。正如一位经验丰富的厨师会通过尝试不同的食谱和亲自烹饪来磨练技艺,设计师也需要将阅读和实战经验相结合,以此来深化自己的设计内功。通过广泛阅读,我学会了从不同的角度审视问题,对设计中的每一个小细节都有了更加多维和全面的认识。这样的过程,就像是在显微镜下观察世界,让我发现了那些常被忽视的角落里隐藏的宝藏。
 
本文观点都为个人理解和总结,不足之处也欢迎大家留言区多多点评指正,大家共同进步!


作者:姝斐suphie
链接:https://www.zcool.com.cn/article/ZMTYxOTUzMg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

B端基础 | 弹窗设计基础知识

天宇 B端ui设计文章及欣赏

建筑设计师尤哈尼·帕拉斯玛说、简约并非简单,它是通过深思熟虑后对事物本质的准确把握。知其然、知其所以然。这次文章会尽量简洁一点。
 
奔跑的日子、总是希望优秀的你和我一起同行。让我们一起在艺术的环境里生菌、知识的海洋里狗刨~
 
B端基础 | 弹窗设计基础知识
 
 
第一部分 | 弹窗基础知识
如果你只是想了解一下弹窗的基础知识,那么看这部分就够了。只需3分钟无痛、来去自如不影响上班哦。
弹窗定义;弹窗来历;弹窗拆分;弹窗分类;弹窗尺寸;
B端基础 | 弹窗设计基础知识
 
 
1、弹窗定义
弹窗是用户和系统交互信息的容器
。(在网上搜了一些文章看,他们的弹窗定义写的基本都是各写各的)我的这个定义绝对靠谱。站的维度高,从人机交互工程出发。这定义没错的妥妥的。说出去基本不会有人反驳你(如果有人敢反驳你把我的名字告诉他,反正我他也不认识我哈哈哈)
 
2、弹窗来历
弹窗最早的起源可以追溯至上世纪90年代。当时,互联网广告的投放形式主要是将广告嵌入在页面内容中,但这种方式存在一些问题。广告商担心消费者在浏览负面内容时,会将广告与负面信息联系在一起,从而对品牌造成不利影响。因此,网页托管网站trippod.com利用网页脚本程序,发明了一种在新开窗口发布广告的方法,这就是网络弹窗的起源。
B端基础 | 弹窗设计基础知识
 
 
3、弹窗拆分
整体的去分析、在大部分的弹窗类型里都会包括
关闭、内容区、模态层
(非模态类别的没有个元素)
B端基础 | 弹窗设计基础知识
 
 
3.1、模态层
模态层通常是搁在原页面和弹窗之间的半透明黑色。其主要的作用是1、降低用户在操作中被强打断的不适和跳出当前页面的恐慌感。让我们的用户更加的聚焦弹窗内容。
B端基础 | 弹窗设计基础知识
 
 
我个人在设计时模态层基本都是50%的纯黑,但并不是一定要用50%的纯黑,要结合自己的平台业务、设计风格等方面去制定。偷偷的告诉你这个模态层加入一点微微的色彩倾向在视觉上往往会更好一点。
3.2、关闭
弹窗的关闭是用户退弹窗的重要途径、一般都会在弹窗内容右上角。弹窗关闭按钮也有在弹窗范围外的。我们要保证弹窗关闭的清晰明确,来方便用户操作。
在弹窗中、关闭弹窗的途径除了叉掉。还可能有其他的。如取消按钮。
3.3、内容区
内容区的内容是根据弹窗类型的不同,内容就会有所不同。什么都可能有、图标、确认信息、选择框、输入框。只要是页面上能出现的都可能会出现在弹窗的内容区域。
B端基础 | 弹窗设计基础知识
 
 
4、弹窗分类
弹窗的分类从交互形式差的差异。我们可以将其分为
模态类和非模态类
。这两个大类就比较好区分,看看有没有那层模就行了。常见弹窗类型表单弹窗、抽屉、警告提示、全局提示、通知提示、气泡确认等。
B端基础 | 弹窗设计基础知识
 
 
4.1、模态类
模态是目前我们比较常见的类型、模态类弹窗打断用户的操作行为,用户必须对其进行操作才能解散弹窗,否则不能进行其他操作。模态类最常见的就是、
表单弹窗、确认弹窗
。当然还有其他的文件选择、信息展示、等等。
B端基础 | 弹窗设计基础知识
 
 
4.1.1、表单弹窗
这弹窗在B端设计里是最最最常见的一种弹窗。虽然我们现在的系统大部分是很智能的。但是复杂的业务就意味着你会和系统产生大量的交互信息的交换。所以这表单可太常见了哪哪都是他。(烦死个人)不过在你制定好一套规使用规范后。基本这样的弹窗是不太需要设计介入的,产品和FE两人一对使用模版就上了。
4.1.2、确认弹窗
这种弹窗就比较好理解了。承载较为紧急的信息,让用户快速处理;如:用户未保存,就点击离开当前页面,通过对话框让用户做出选择。在执行一个重要信息的删除时,通过二次询问引起用户的注意,让用户再次做判断;这类弹窗;
4.1.3、优点/缺点
优点:
强不会让用户忽略或跳过,确保信息的交互响应;引导用户操作;增加用户的参与度,可以提升用户的活跃度和参与度。
缺点:
01、会中断用户的操作流程,打断用户的思路或行为。
02、可能会影响用户体验,因为用户需要等待关闭弹窗后才能继续其他操作。如果弹窗内容过多或过于复杂,用户可能会感到困惑或不知所措。
03、如果过度使用模态类弹窗,例如频繁弹出广告或无意义的信息提示,用户可能会对其产生反感甚至抵制使用相关软件或平台。
4.2、非模态
可以不打断父应用程序,无需停止进度,用户仍可以对父级内容进行交互。大部分应用于信息的反馈和提示。常见的非模态类弹窗大概有、警告提示、全局提示、通知弹窗、气泡确认框;
B端基础 | 弹窗设计基础知识
 
 
4.2.1非模态优点/缺点
优点:
不打断操作流程;不会干扰用户操作用户体验更好;常用于轻量级的信息或提示。
缺点:
可能会被忽略,导致信息传递不畅;不适合展示重要信息;形式通常比较单一,不能满足复杂的展示需求
4.3、其他
林子大了什么鸟儿都会有,一定会有我没有接触到的前沿交互方式。所以这个其他留给未来更优秀的我们去发现。
5、弹窗尺寸
弹窗的尺寸和电脑屏幕分辨率是有关系的。主流的分辨率1920*1080像素。其他的还有1024x768、1280x800、1366x768、1440x900、1680x1050、1920x1080、2560x1440等。
我在设计界面是一般用的是1440*900的设计尺寸。在做弹窗的时候已经不考虑1366*768分辨率以下的屏幕了。多以弹窗的安全高度要小于600px
弹窗的宽度还是要根据自己业务需求去定义的。比如我们的业务最宽的弹窗1280像素。像站酷的查看作品他是整屏的宽度。
模特还怪好看的
模特还怪好看的
 
我在我们平台定义的表单弹窗宽度虽然很不严谨、好像也没有什么理论支撑。但是确一直再用。尺寸分别为、400、600、800、1000、1280。之后还是要细化的。这样的定义弹窗尺寸导致的结果是,开发还原想过不是太好。
B端基础 | 弹窗设计基础知识
 
 
第二部分 |弹窗2.0项目里
承载内容、为什么会有这么多的弹窗类型。问题不在于弹窗,而在于合适的承载内容和交互类型。
B端基础 | 弹窗设计基础知识
 
 
1、弹窗、抽屉、界面
在项目里我们应该怎么去选择这三种内容呈现方式呢。如果你只是设计师大部分时间你也不用选。你只有建议的权利没有决定的权利。如果产品原型是弹窗、你给做了个抽屉。你可以从下面几方面去找支撑点去和产品撕逼、干翻他的原型用你的效果图。
AI的提高画面质量还是有待提高呀
AI的提高画面质量还是有待提高呀
 
1.1、内容
弹窗和抽屉或界面他们承载的内容量是不一样的。所以在选择用那种交互方式时可以从我们业务需要展示的内容量来考虑。简单的确认或通知适合用弹窗、需要展示大量内容或进行复杂的功能时就适合用抽屉或者界面了。
1.2、体验
我们可以从用户体验方面出发、如页面的空间感、考虑空间大小和布局。操作流程上、考虑用户在界面上被打断进程的成本。一致性、确保与其他业务模块交互方式保持一致,为用户提供一致的体验。
1.3、效率
考虑到用户的使用成本、B端设计中效率的提升优先率老高了。考虑系统的加载速度、确保我们使用的交互方式不会影响整体的性能和体验。
 
本身弹窗、抽屉或者界面的使用选择是需要很综合考虑的。总的来说核心是提升效率、保证我们用户好的体验。
2、弹窗交互优缺点
当涉及到B端弹窗的交互方式时,有以下几点核心优缺点:
B端基础 | 弹窗设计基础知识
 
 
2.1、优点
提供及时反馈
弹窗可以快速向用户显示重要的信息或请求,使用户能够即时了解系统的状态或需要执行的操作。
简化操作流程
对于某些复杂的操作或任务,弹窗可以提供直观的界面和简化的步骤,使用户更容易完成目标。
吸引用户注意力
通过使用弹窗,可以确保用户在操作过程中不会被其他界面元素分散注意力,从而更专注于当前的任务。
提供额外的信息或功能
弹窗可以包含更多的详细信息或额外的功能选项,使用户能够更深入地了解或操作某个特定内容。
2.2、缺点
干扰用户操作
过度或不合适的弹窗可能会干扰用户的正常操作,打断用户的工作流程,影响用户体验。
误导用户
不清晰或误导性的弹窗信息可能会使用户产生困惑或误解,导致错误的操作或决策。
影响性能
弹窗的弹出和关闭可能会增加系统的负担,影响性能和响应速度。
不符合用户习惯
对于习惯于传统界面的用户来说,过于复杂或与众不同的弹窗交互方式可能会造成使用上的困扰和不适应。
3、我的一些设计
我们项目里把升级弹窗做成了模版、广告弹窗也是模版。当然像二次确认这样的弹窗是组件,上货看东西。
B端基础 | 弹窗设计基础知识
 
 
这个是系统的一个展示弹窗、和一个从弹窗形式优化到抽屉的模块界面。
B端基础 | 弹窗设计基础知识
 
 
这个就是一个在线聊天界面。是从SaaS里跳转新建页面。
大概是想了想、平时做的项目确实比较碎、最近也没做整理盒复盘。所以界面的展示就不放太多了。而且有的信息页模糊了。不是我不信家人们。是我不信自己、朦胧也是一种美吧。哈哈哈
 
B端基础 | 弹窗设计基础知识
 
 
最后
我大学设计史陈老师告诫过我们。她说同学们,我其实不怕你们眼高手低。我怕的是你们眼都不高。和优秀的人一起前行、希望和优秀的你们一起去经历设计、生活、工作的美好。
期待你的加入、我们的大伐木累。我可以作品集指导反正闲着也没事不要钱。我和群里的小伙伴都是多年一线设计师来自于天南海北,不乏有互联网大厂设计师。再次
期待你的加入...
 
参考
优设网:4个方面层层递进,分析如何设计B端产品的弹窗
知乎:B端设计指南04-弹窗
知乎:运营弹窗的设计要点拆解
知乎:浅谈B端产品弹窗一级设计方法
人人都是产品经理:WEB端弹框掌握着几天就够了
 


作者:彪形大汉pro
链接:https://www.zcool.com.cn/article/ZMTYwNjg4NA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

7大色彩技巧让你界面更吸睛

天宇 B端ui设计文章及欣赏

色彩在我们日常设计中起着定生死的作用,它是设计的灵魂,舒适的色彩搭配可以让设计师一遍定稿,感觉在自己的设计生涯中,大部分都是在与色彩的博弈中度过的,虽然客户可能不懂色彩原理,可是客户天生都是色彩的感受家,什么样的色彩搭配美,通常他们瞄一眼就会有定论,不用你去辩解太多,不好的搭配,纵使有千万种理由,也说服不了客户,所以好好研究色彩以及每一种色彩传递的情感对我们做好设计至关重要。
 
7大色彩技巧让你界面更吸睛
 
 
 
目录
一、 色彩的定义
二、 色彩的三属性
三、 色彩的三种常见模型
四、 色彩的语意及它的应用
五、 不同场景下的色彩应用
六、 色彩在B端设计中的作用
七、 B端色彩设计使用的原则
 
7大色彩技巧让你界面更吸睛
 
 
 
 
 
一、色彩的定义?
1、物理学角度
色彩是光的属性,当光波通过物体时,物体会吸收某些波长的光,而反射或透射其他波长的光,这些被反射或透射的光波长度决定了我们看到的颜色。
 
2、心理学角度
色彩是人脑对光波长的视觉感知,不同的波长刺激视网膜上不同类型的感光细胞,进而产生不同的色彩感觉。
 
3、 艺术学角度
色彩是艺术创作的重要元素,它不仅关乎视觉感受,还与情感、文化、象征意义相关联。
 
4、 设计学角度
在设计领域,色彩是传达信息、影响情绪和创造美感的关键工具。
 
5、 计算机科学角度
在数字图像处理中,色彩通常通过颜色模型(如RGB、CMYK等)来定义,这些模型通过不同比例的原色或色料混合来表示各种颜色。
 
 
 
二、色彩的三属性
1、色相
色相是指不同颜色之间的差别,即不同颜色的表象和名称,每个颜色都有自己的专属ID,如红、橙、黄、绿、青、蓝、紫等。不同的色别都可用光谱中的波长来表示,人的眼睛可分辨出的色别有180种左右。
7大色彩技巧让你界面更吸睛
 
 
 
2、明度
明度是指色彩的明暗程度。一般在反光率相同的情况下,不同色别的明暗程度不同。如黄色光比红色光更明亮,而红色光则比青色光要明亮。
同时,同一色相在受光强弱或者物体对光的吸收、反射性能不同的情况下,会呈现不同的明暗变化和差异。
7大色彩技巧让你界面更吸睛
 
 
  
 
3、饱和度(纯度)
饱和度(纯度)是指同一色别的纯净度和鲜明度的变化。从色光的角度而言,光的波长单一程度越高,饱和度就会越高;不同色别所达到的饱和度不同,一般情况下,红色的纯度可达到最高,绿色的则相对较低;同一色相深浅不同的颜色有不同的饱和度;黑白色光的渗入会导致饱和度和明度发生变化;通常,照明光线的性质、物体表面结构对光线吸收与反射的性能等因素影响饱和度。
7大色彩技巧让你界面更吸睛
 
 
 
 
 
三、色彩的三种常见模型
1、HSB模型
HSB模型也叫HSV模型,其中H代表色相,即颜色的种类;S代表饱和度,即颜色的纯度;B(V)代表亮度,即颜色的明亮程度。
 
这种色彩模型是我日常在的设计工作中用的最多的一种色彩模型,如果在同色系中如果只想让他们有细微的变化,我通常会通过调节S和B的百分比数值来达到自己想要的目的。
7大色彩技巧让你界面更吸睛
 
 
以上就是我在设计项目中,运用该色彩模型做的一个实战,项目中用到了一个图形,需要用同色系来表达,我保持了H色值的不变,让S值和B值都发生着微妙的不同,于是就产生了四五种同色系的绿色,该色彩模型特别的好使,也鼓励大家多在实战中运用这样的色彩模型,简单实用。
 
H色相:Hue,以角度(0°-360°)表示
S饱和度:Saturation,以百分比值(0%-100%)表示
B/V 亮度:Brightness 或 Value,以百分比值(0%-100%)表示
 
 
 
 
2、RGB模型
RGB是从颜色发光的原理来设计定的,通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯,当它们的光相互叠合的时候,色彩相混,而亮度却等于三者亮度之总和,越混合亮度越高,即加法混合。
 
红、绿、蓝三个颜色通道每种色各分为256阶亮度,在0时“灯”最弱——是关掉的,而在255时“灯”最亮。当三色灰度数值相同时,产生不同灰度值的灰色调,即三色灰度都为0时,是最暗的黑色调;三色灰度都为255时,是最亮的白色调。
7大色彩技巧让你界面更吸睛
 
 
R红:Red,以数值(0-255)表示
G绿:Green,以数值(0-255)表示
B蓝:Blue,以数值(0-255)表示
7大色彩技巧让你界面更吸睛
 
 
 
 
3、CMYK模型
虽然RGB模型色彩更加的丰富,但是很多颜色不能完全打印出来,于是CMYK模型就成了打印、印刷的不二选择。C是青、M是品红、Y是黄、K是黑,通过颜料反射和吸收光线来显色。
 
记得之前自己从事平面工作的时候,就经常要用到CMYK模式,因为印出来的效果偏差是最小的,是最靠近设计效果图的。
7大色彩技巧让你界面更吸睛
 
 
通过对比,我们发现RGB色彩模型颜色显示上确实更加的绚丽丰富些,而CMYK的色彩模型颜色显示上就黯淡了不少,但是要印刷的话,就必须转化为成CMYK的色彩模式。
 
R青:Cyan,以百分比值(0%-100%)表示
M品红:Magenta,以百分比值(0%-100%)表示
Y黄:Yellow,以百分比值(0%-100%)表示
B黑:Black,以百分比值(0%-100%)表示
 
 
 
 
四、色彩的语意及应用
1、红色的语意及应用
红色代表热情、活力、强烈的情感和爱。它可以象征着激情、勇气和行动力,也常与兴奋、热烈的情绪相关。
著名的快餐品牌肯德基,在自己的网页及店铺装修中都运用了红色,因为红色是所有颜色中最容易引起人们注意的颜色,也是很容易刺激人们食欲和购买的颜色。
7大色彩技巧让你界面更吸睛
 
 
 
 
2、橙色的语意及应用
橙色传达温暖、欢快和积极向上的情感;它常与乐观、友好、创造力联系在一起,给人以活力充沛和充满希望的感觉。
百度网盘的这个登录界面就运用了橙色,给人阳光、向上、热情的感觉,通过色彩的运用一下让界面有了温度。
7大色彩技巧让你界面更吸睛
 
 
 
 
3、黄色的语意及应用
黄色象征快乐、开朗和乐观;它能带来明亮、愉悦的情绪,代表着阳光、温暖和智慧。
叫叫阅读是一款非常著名的儿童阅读软件,整个色调采用的是非常有活力的黄色,这与儿童处于好奇与活力的阶段相符合,这种高亮的黄色,饱和度和明度都非常的高,特别容易抓住儿童的目光,同时它是一种快乐的颜色,也是一种能激发孩子创造力和想象力的颜色,特别符合儿童成长的需求。
7大色彩技巧让你界面更吸睛
 
 
 
 
4、绿色的语意及应用
绿色代表平静、和谐与生机。绿色常与大自然相关,给人带来安宁、放松的感觉,也象征着成长、希望和新生。
青椒云的目标用户是吸引年轻用户和创意工作者,绿色这种富有活力和创意的颜色更容易吸引他们的关注,同时绿色也代表着健康、可持续发展的企业形象。
7大色彩技巧让你界面更吸睛
 
 
 
 
5、青色的语意及应用
青色寓意清新、宁静和沉稳,它给人一种冷静、理智的印象,同时也带有一丝清新的活力。
青色是一种带有蓝色和绿色的颜色,因此青色既有蓝色的专业感、信任感,也有绿色的生机感、希望感。
以下是日本某牙医品牌的官网首页,病人希望在这里带来健康与复苏,也希望获得专业、可靠的治疗,而青色就成了很好传递这种情感的品牌色。 
7大色彩技巧让你界面更吸睛
 
 
 
 
6、蓝色的语意及应用
蓝色代表冷静、忠诚和信任;它常与沉稳、深邃的情感相关,能带来宁静、平和的心境,也象征着智慧和理性。
123云盘使用了蓝色,蓝色符合社会的普遍审美认知,接受度比较高;其次,蓝色给人安全的感觉,也符合云盘的初衷,给用户安全的存储服务。
7大色彩技巧让你界面更吸睛
 
 
 
 
7、紫色的语意及应用
紫色象征神秘、高贵和浪漫;它常给人一种优雅、奢华的感觉,同时也带有神秘莫测的氛围,与梦幻、创造力等情感相关。
美柚的主要用户是女性,紫色在色彩心理学中常被认为具有优雅、神秘、浪漫的特质,这些特质与女性的审美和情感需求相契合,能够吸引女性的关注。
7大色彩技巧让你界面更吸睛
 
 
 
 
8、白色的语意及应用
 
白色代表着纯洁、神圣、信任、安静、朴素和雅致,是一种充满纯洁的颜色,它可以跟任何颜色和谐的共生。
以下是熊掌ID的登录界面,颜色用了大量的白与灰,简洁又不失大气,传递出了一种质朴、雅致的感觉。 
7大色彩技巧让你界面更吸睛
 
 
 
 
 
五、不同场景下的色彩应用
 
1、商场的色彩为什么总是多彩热烈的?
 
❶ 吸引顾客注意力
在众多商业场所中脱颖而出,色彩鲜艳的商场外观和内部装饰更容易在人们的视线中凸显出来,吸引过往行人的目光,激发他们的好奇心和探索欲。
 
确实多彩的颜色更加容易引起我的关注,这不看到商场的美图,都忍不住拍照留念了,成功的吸引了我的目光。
7大色彩技巧让你界面更吸睛
 
 
 
❷ 增强可见性
即使在较远的距离或在繁忙的街道上,多彩热烈的配色也能让商场更容易被发现,提高商场的知名度和曝光度。
多彩的配色,让我远远的就被商场美轮美奂的插画吸引,大大增加了商场的可见性。
7大色彩技巧让你界面更吸睛
 
 
 
营造愉悦氛围
色彩可以激发积极情绪,明亮、鲜艳的色彩往往与快乐、活力和兴奋等积极情绪相关联。当顾客进入一个色彩丰富的商场时,会感受到一种愉悦和轻松的氛围,从而更愿意在商场中停留和购物。
星沙永旺城的美陈设计很好,墙面采用极具诱惑力的颜色与美食,把小小实物十倍放大,增加了视觉看点,让人忍不住过去拍照晒一下,大大增加了愉悦性。
7大色彩技巧让你界面更吸睛
 
 
 
缓解压力
在现代生活中,人们常常面临各种压力。走进一个多彩热烈的商场,可以暂时摆脱日常的烦恼和压力,享受购物的乐趣。
特别可爱夸张的插图设计,引发了丝丝童趣和欢乐,让人短暂忘记压力,远离烦恼。
7大色彩技巧让你界面更吸睛
 
 
 
引导消费行为
商场通常会使用不同的颜色来区分不同的区域,如购物区、餐饮区、娱乐区等。这样可以帮助顾客更快速地找到自己感兴趣的区域,提高购物效率。
突出重点商品,对于一些重点推荐的商品或促销活动,商场可以使用鲜艳的色彩来突出展示,吸引顾客的注意力,引导他们进行购买。
7大色彩技巧让你界面更吸睛
 
 
 
塑造品牌形象
6.1 传达个性和风格
不同的商场可能有不同的品牌定位和目标客户群体。通过选择特定的色彩组合,商场可以传达出自己的个性和风格,吸引与之相符的顾客。
 
6.2 增强品牌记忆度
独特而鲜明的色彩搭配可以让商场在顾客的心中留下深刻的印象,提高品牌的记忆度和辨识度。
 
芙蓉区的龙湖天街主要面向中等收入新兴家庭,是一个区域型的购物中心,集购物、餐饮、休闲、娱乐等多业态于一体,为消费者提供一站式商业综合体,它在餐饮区采用了大量的吃喝玩乐的插画,来引导用户消费。
7大色彩技巧让你界面更吸睛
 
 
 
 
2、为什么蓝色在B端设计中广泛应用?
❶ 视觉特性方面
1.1 稳定性
蓝色给人一种沉稳、可靠的感觉。在B端产品中,用户往往需要处理重要的业务数据和进行复杂的操作,蓝色的稳定性可以让用户感到安心,增强对产品的信任感。
7大色彩技巧让你界面更吸睛
 
 
 
1.2 专业性
蓝色通常与科技、专业领域相关联。B端产品通常面向企业用户,需要传达出专业、高效的形象,蓝色正好符合这一需求。
 
❷ 心理影响方面
2.1 减少焦虑
相比鲜艳、刺激的颜色,蓝色较为柔和,不容易引起用户焦虑和紧张的情绪;在B端使用场景中,用户可能需要长时间使用产品,蓝色的舒缓效果有助于提高用户的使用体验。
 
2.2 提高专注度
蓝色具有一定的沉静作用,能够帮助用户集中注意力,专注于工作任务。对于B端用户来说,高效完成工作是首要目标,蓝色的这一特性有助于提高工作效率。
 
B端产品在心理上追求的是类似如下图的这种宁静式的体验,跟教育有着异曲同工之处,就像这个易贝乐少儿英语一样,用大面积的蓝色,希望孩子在这里能很快的安静下来学习、专注自己的事情。
7大色彩技巧让你界面更吸睛
 
 
 
❸ 行业习惯方面
3.1 科技行业引领
许多知名的科技企业和软件产品在 B 端市场中广泛使用蓝色,逐渐形成了一种行业习惯。其他企业在设计B端产品时,也会倾向于选择蓝色以符合用户的认知和期望。
 
3.2 传统与延续
在过去的设计中,蓝色在 B 端领域的成功应用使得它成为了一种传统选择。设计师们在延续这一传统的同时,也不断优化和创新蓝色的运用方式,使其更符合现代设计趋势和用户需求。
 
嘉为科技是一个有着20多年技术沉淀的科技公司,它的官网和产品风格一直是沿用着科技蓝的风格,应该也是基于传统的沉淀吧。
7大色彩技巧让你界面更吸睛
 
 
 
❹蓝色可以提高产品的复用率
很多用户都能接受蓝色的B端界面,当面对有差不多需求客户时,同一套UI,可以多次复用,可以减少开发成本和设计成本,这也是自己通过长期实战观察发现的。
 
一个UI风格,用在了两个项目中,不同的用户,趋向同样的风格,说明蓝色在大家心目中的接受度是非常的高,用蓝色可以促进设计的多次复用。
7大色彩技巧让你界面更吸睛
 
 
在日常的项目中,我看到的B端UI界面是千篇一律的稳重,不追求过于刺激的颜色搭配,通常都比较的干净简洁,不像商场里面的美陈背景设计,色彩对比非常的强烈,比较的吸引人眼球。
 
有一次我厌烦了常规的稳重风,探索一种大胆的色彩风格时,虽然风格比较新颖,可是发出去客户的接受度不高,觉得太不稳重了,然后重新按照以往习惯进行设计时,就很好,客户一致认同。
 
可见每个领域都有自己的色彩运用习惯,商场需要吸引人眼球、刺激消费,越大胆越好,可是B端设计需要提供一个让人平静去处理工作事项的环境,它需要安静,不需要过于刺激的颜色搭配。
7大色彩技巧让你界面更吸睛
 
 
 
 
 
六、色彩在B端设计中的作用?
1、通过色彩向用户反馈操作结果及当前状况
比方在日常设计当中,红色代表流程失败,绿色代表流程成功,橙色代表信息有告警,蓝色代表着链接,同时不同的按钮颜色也可以很好的区分按钮状态,在反馈结果和状况方面,色彩起着非常重要的作用。
 
下面这个IDC运营的监测平台,它就是通过颜色来区分不同的告警级别的,可见颜色在B端产品中的重要性。(备注:图中数据都不是真实数据,仅做展示)
7大色彩技巧让你界面更吸睛
 
 
 
 
2、可以很好的进行品牌传达
B端设计中大面积使用品牌色,可以强化品牌形象,使用与品牌标志风格相近的色彩,可以帮助用户快速识别和记住品牌,在不同的B端产品界面中使用统一的色彩方案,有助于建立品牌的连贯性和一致性,增强用户对品牌的信任。
 
例如我给湖南高速设计的一套B端界面设计,用户强烈要求改变传统的蓝色风格,要求整套界面设计要用湖南高速品牌色-绿色,说明在追求大流和品牌色之间,客户更加倾向品牌的传达。(备注:图中数据都不是真实数据,仅做展示)
7大色彩技巧让你界面更吸睛
 
 
 
 
3、颜色可以很好的进行信息区分
在B端界面设计中,颜色在帮助信息区分起着非常重要的作用,通常可以通过不同的色彩来区分功能区域,可以让用户更清晰地了解界面的结构和布局,例如,导航栏使用一种特定的颜色,而内容区域则使用另一种颜色。
 
我设计的天翼写作,就是这样的设计思路,导航栏和内容区的颜色完全不一样,这里颜色起到了很好的区分作用。
7大色彩技巧让你界面更吸睛
 
 
 
 
4、舒适的色彩搭配可以提升用户体验
选择合适的色彩对比度可以增强文本的可读性,减少用户的视觉疲劳。例如,黑色文字在白色背景上通常比较容易阅读。
 
选择适当的色彩可以营造出专业、高效、舒适的工作氛围,从而影响用户的情绪和感受,提高用户的使用体验。
 
我参与的这个后台界面,就是通过合理的色彩搭配来引导用户使用的,当用户已经完成的环节都是用绿色表示,没有走完的流程就会是灰色的,寓意指示非常的鲜明,很好的解决了用户不知道清晰进程的卡点,提升了用户体验。
7大色彩技巧让你界面更吸睛
 
 
 
 
5、色彩可以传递性格
人的性格有活泼的、文静的、沉稳的、深邃的,其实色彩也是有性格的,不同的色彩也有不同的性格,当我们对色彩的性格有足够多的了解,在面对不同的客户时,我们对色彩的拿捏以及设计需求的把握时,会更加的游刃有余。
7大色彩技巧让你界面更吸睛
 
 
 
我们平常确实是在做设计,但是我们更多的是在与人打交道,我们更好的聆听,会帮助我们更快的抓取到客户的喜好,快速做出满足客户需求的设计,少受加班之苦。
比方说我之前给云门户设计的一套UI,客户的决策层是男性,且年龄偏大,他们就偏爱深沉的UI风格;而我负责的天翼云电脑专家,客户的决策层是女性,且年龄偏年轻,她每次就喜欢轻盈、明快的UI色调,不同的决策层客户,就会带来不同的设计结果。
 
7大色彩技巧让你界面更吸睛
 
 
 
 
 
七、B端色彩设计使用的原则
1、B端设计中,色彩设计应遵循6:3:1原则
在这个登录页面中,我就是运用的6:3:1原则,60%的主色,30%的次要色,10%的点缀色;使用了大面积的蓝色和蓝灰色,最后使用一点点的橙色,这样的配色会显得高级。
7大色彩技巧让你界面更吸睛
 
 
 
 
2、文字、卡片背景色和边框都使用无彩色
为了保证画面风格的统一、干净整洁,文字颜色、边框颜色、以及边框背景色都需要用到无彩色,通常通过颜色的深浅来区分信息的层级关系。
 
比方说我参与的星辰大模型AI文档生成能力的应用,里面无论文字颜色还是底色都是运用的无彩色,只是通过了色彩深浅变化来做了层级区分,因为无彩色可以起到很好的降噪作用,既传达了信息,又不会显得界面凌乱复杂。
7大色彩技巧让你界面更吸睛
 
 
 
 
3、需要凸显的内容,用明度和纯度比较高的色彩
比方说,日常我们设计的卡片都是用的白色,而底色我们用的是灰色,因为卡片里面的内容都是比较重要的信息,需要用一个亮度比较的高的颜色,让内容往前走,而灰色的背景通常就往后走的感觉,这样能跟卡片形成一个一前一后的对比,更好的帮助内容进行传播。
 
比方说我设计的这个IT运维监控平台的首页,物理主机、网络及安全设备、工单、在途工单这几个指标是非常关键的,所以他们的图片底色用了纯度比较高的有彩色来标识。
 
7大色彩技巧让你界面更吸睛
 
 
 
 
4、设计前一定要有定色调的意识
作为设计师,我们的设计工作其实就是在设计一种感觉,一种情绪,设计前定调的意识真的太重要了,感觉对了,什么都就对了。
 
比方说我前段时间接到了一个B端的大屏可视化需求设计,客户说之前的大屏设计不喜欢,希望重新出一个新的设计,然后公司的需求对接人员在给我下达需求时,真的就只是给我下达了这几个字,让我重新出一个设计试试。
 
以我的职业直觉,感觉这个需求是不够细化的,于是我就多问了几句,我问客户是想要常规的蓝色调的还是别的?果然一问,客户说不希望再用常规的蓝色的,希望新的设计要用他们的品牌色绿色,刚听到这几个字的时候,我以为这次我把握住需求了,在收集参考图的时候,我发现常见的绿色大屏有深色的和浅色的,根据自己以往的作图习惯,我觉得深色会更加的受欢迎一些,我自以为是的朝着深色的方向去出图,出到了一半的时候,我内心有些许的忐忑,我于是找了一深一浅的参考图,让同事跟客户确认一下,客户是想要深色的感觉,还是要浅色的感觉,这次沟通又给了我深深的一击,客户不按常理出牌,说希望按浅色的风格来出图。
 
在出稿之前,通过自己反复的沟通确认,发现设计前的定调意识真的太重要了,要不是有出图前一波三折的反复确认以及需求的细化,就不会有后来的一遍过稿。
7大色彩技巧让你界面更吸睛
 
 
 
5.设计的灰色尽量使用带有色彩偏向的灰
不管我们设计什么色系的界面,都避不开用到灰色,在设计中用跟主视觉相符的灰,会使得界面更加的高级、协调与美观,注意好了这个小细节,会给我们的设计加分不少。
 
下面是我日常体验到的两个界面,上面综合管理平台里面的灰色就没有跟主色调蓝色相呼应,灰色没有向蓝色倾斜,界面看起来就没那么美观;下面通义千问的灰色设计就非常的注重细节,灰色偏紫,整个界面看起来浑然天成,毫无违和,美感、档次瞬间提升好几个等级。
 
一个微小细节的在意,在无形中拉高了设计的高度,十个细节乃至更多细节的在意,就会带来更多意想不到的结果。
 
7大色彩技巧让你界面更吸睛
 
 
 
 
总结:
以上就是我最近对色彩的一些顿悟、感受和学习收获,在不断的复盘总结中,我们总会收获一些新的认知,通过这次色彩的复盘之旅,发现色彩对设计师真的太重要了,希望我的分享对大家有启发,不足之处也欢迎大家留言交流。


作者:姝斐suphie
链接:https://www.zcool.com.cn/article/ZMTYzOTMwMA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

精通B端界面设计:揭秘7大弹窗类型及其实战案例分析

蓝蓝设计的小编 B端ui设计文章及欣赏

 
 
 
面向企业用户、注重效率与管理、解决企业痛点、技术与服务并重、决策过程复杂
B端关注的是如何通过技术手段赋能企业,提升其业务处理能力和管理效能,是企业间或企业内部运作不可或缺的工具和服务。
弹窗-聚焦任务处理与即时提醒的高效交互工具;作为一种常见的交互设计元素,在提升用户体验和效率方面扮演着重要角色。
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
精通B端界面设计:揭秘7大弹窗类型及其实战案例分析
 
 
 


作者:Miao_C
链接:https://www.zcool.com.cn/article/ZMTYyNDEwMA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

B端基础 | 52000余字总结 B 端基础设计知识

天宇 B端ui设计文章及欣赏

最近看汪曾祺的《叹息桥》中的一句话,我必须分享给你。缘起我在人群中看见你,缘散我看见你在人群中。是的我想你在人群中看到我。这就是最初我分享这系列设计文章的初衷。
 
慢慢发现其实分享也是一件快乐的事情、而且在分享的过程中我自己也收获了很多。而且对设计的理解也更深了。更快乐的是收获了一群一起同行的小伙伴、这个还挺开心。和他们一起在群里吹水、一起吐槽。一起讨论问题、那真的是快乐无边。哈哈哈
 
上面扯多了。我们开始今天的内容。今天内容分三部分、第一部分内容总结是对我写的这个系列文章每一篇文章内容和核心的小总结。第二部分这个系列的文章页算是告一段落了、下一阶段我会做些什么。第三部分分享一些我写文章的感受、然后煽煽情。
 
1、内容总结
因为在写这个系列的文章时我加入了很多扩展知识。希望告诉你更多。这里我会把主要的这个系列的知识总结一下让你尽量一次看完。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
1.1、登陆页面
 
最近就在做我们系统的登陆页面优化。回头我会写一个项目总结给你们看。这里介绍一下B端登陆页面该怎么去做。其实还挺简单了。因为现在主流的布局就那几个。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
登陆页面:布局分为三种;居左、居右、居中
页面元素:导航、登录框、背景(装饰元素)、互联网信息。
导航高度:68px或48px、文字大小:14(大部分)16(也可以)
登录框大小:大小尺寸不统一、没有固定的尺寸。可以根据自己和领导的喜好决定。对还有要承载的内容多少。
登录方式:扫码、手机号、账号、第三方
标题切换字号:我喜欢用26px(也要其他的16、/18、/20)
输入框高度:48px
按钮文字和高度:16px、和输入框高度一直就行。
背景可以是配的插画(这种最简单)、一般都是科技风
底部要不就是单纯的互联网信息。要不就是快捷入口、联系方式什么。这个就不多说了正常排版就行。
 
1.2、筛选
 
筛选相对是很简单的部分把、因为你直接用规范里的组件。虽然不会很优秀、但是刚重要的是不会出什么错误。主要是就大厂规范能够快速的帮你解决问题。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
筛选的意义:定位数据、缩短查询路径、数据内容分类
 
筛选类型:基础筛选组件(就是我们常见的页面顶部的筛选)、高级筛选(就是那些需要你定义想一想的筛选部分)
 
筛选布局:顶部和左侧
 
筛选样式:平铺;折叠;Tab筛选;单侧选择;表头;综合
 
1.3、栅格
 
这里其实还简单的、首先你要明白栅格在我们的设计里面很重要。你不用当然也可以呀。但是你想要做的更好那就用起来你会有意外的收获。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
怎么用:直接看ant design、TDesign、阿科desing的规范就行、写的很清楚。
 
注意点:不要硬套、我们要根据自己的系统去自己定制。比如我们系统、用的是ant design的框架、但是我们的网格系统是自己定制的。因而我们的边距不是24px、我们是20px
 
1.4、颜色
 
这部分相对来说是我自己的弱项、在写当时的文章的时候也是收获颇多的。明白了大厂规范是怎么确定自己色彩设计规范的。也清楚了自己应该怎么去规定自己的设计规范。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
主色确定:常见的方法、1、用自己品牌logo的颜色;2、用行业色
 
配色确定:我一般是找竞品、或者优秀的配色方案、来确定自己的。多参考大厂的配色方案。虽然不全是好的。但是好的还是站大多数的。
 
大厂色彩:这里我分享了大厂的色彩是怎么去确定的、如何去确定。可以去看看。我在自己的工作中色彩的应用就参考了ant Design的色彩应用方式定制的。
 
1.5、字体
 
字体部分我觉得最有意思是的是分享了、我们宋体、楷体、隶属、甲骨的发展历史和由来。还有就是如何去设计一款自己的字体。还有后台字体规范的制定
B端基础 | 52000余字总结 B 端基础设计知识
 
 
中国文字:这里中国文字的发展历史、所有字体的产生都是有自己发展的历史原因的。很有意思。建议你看看、可以当做你喝酒吹水的谈资。
 
字体规范:我们大部分的字体会采用黑体、可读性强、亲和、现代、清晰。
 
字号:最新的字体12px、正文、14px、通过+2, +4,+8,+12,+16 的步数增长规律
 
行高:通过逻辑得到这样一个公式:「 行高 = 字号 + n 」,8 作为变量正好同时满足与 1.5 倍的「 14px & 16px 」常用字号行高保持一致,总体文字间隙稳定呼吸,行高空间较一致得出计算公式:「line-height = font size+8」
 
字重(就是字粗):建议使用两种常规和加粗(在前端里一般就是400和500)
 
颜色:我是主张带有色彩倾向的颜色应用的。根据字体样式的设计原则,制定了简易好记的透明度数值区间并且将该字色与界面系统的色彩系统结合,文字显示色彩对比满足至少1:4.5( AA级别)。且验证了其中的实用性,共分为亮暗两种模式,4 个色阶。
 
1.6、ICON(图标)
 
你要统一风格成套的去找参考和应用。在我们的系统里我是自己画icon的然后传到阿里巴巴矢量图库让开发直接引用。这个是自己累点、但是可以保障实现效果。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
设计原则:准确、简单、节奏、愉悦。
 
设计实战:采用栅格
我是用的阿里巴巴矢量图库的设计规范、因为我要传到这个平台应用
 
ICON分类:交互性图标、装饰性图标、说明性图标
 
1.7、按钮
 
按钮我觉得这部分是相对简单的、也是要做到风格的统一。直接用大厂组件然后根据自己平台的风格、不如圆角的大小其他的倒是没什么了。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
常规按钮:次要按钮、主要按钮、文字按钮、图标按钮
 
按钮状态:可用、禁用、加载、悬浮
 
尺寸:把按钮分成:迷你、小、中、大,四种尺寸。高度分别为:24px/28px/32px/36px。推荐及默认为尺寸「中」。
 
样式:各个规范对按钮形状的规范基本都一样。提供长方形、正方形、圆角长方形、圆形四种形状。
 
 
布局:这里分享了两个概念、古登堡法则、费茨定律、告诉你我们为什么这么排版。对产品和甲方很有用、哈哈、这是我的秘诀。
 
1.8、弹窗
 
后台弹窗是一个很复杂的内容、但是也是一个相对很好处理的部分。只要你做好规范这部分、简直就是一点开胃小菜。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
弹窗是一个我头痛的问题因为不太好规范。但是我还是把这个弹窗系统、在我们的体系中形成了一个小的规范。感谢领导、感谢前段端的龙哥。
 
我们把前段粗略的分为400px、600、800、1000、最大、广告。业务里我们会采用4、/6、/8、/1、最大、推广和通知我们就统一的尺寸。
 
1.9、表单
 
什么是表单:我理解表单就是系统为和用户进行交互、所要收集用户信息的或获得用户反馈的一种方式的载体。在后台产品中对我们数据做的增、删、改、查、验都可以通过表单完成。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
我们在后台系统中、大部分的场景都会使用上表单。信息采集呀、编辑数据呀等。在表单设计时要遵循的原则、简洁明了、清晰高效、适应业务、即时反馈。
 
表单的构成结构、基本都是由、标签、域、提示、操作按钮这四个部分构成的。
 
表单布局在表单中我们采用多种布局方式。信息分组、内容列表、标签页、分步骤。
 
1.10、表格
 
B端设计中,对数据浏览、操作、过滤、展示是最高效的。这你就不用质疑了。因为结构简单、精准高效、数据形式丰富。
 
B端基础 | 52000余字总结 B 端基础设计知识
 
 
表格是用来收集、整理、组织、分析数据的二维矩阵。它由内、外两部分组成。其中,内部包含表头、表体、底栏等。外部包含标题、筛选区、操作按钮区等。
 
表格的类型:基础表格、树形、子表格、交叉表格、图表表格、卡片表格
 
表格的样式:网格型、水平线型、斑马纹、自由形式
 
进阶的一些知识就是表格数据的优化和表格的交互知识了。想了解去看更详细的我的文章11表格设计和12表格优化项目实战。
 
1.11、大厂规范
 
如果你是一个小厂B端设计师、刚好没有自己平台的设计规范。那就去直接用的场的设计规范。去用没问题的。大厂那么多的牛逼设计给你做好了你不用。都塞到嘴巴上、不吃就不给面了。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
在使用大厂的设计规范时然后慢慢的积累自己平台的设计规范。逐渐的你就会形成一个属于你们自己平台业务的高质量设计规范了。
 
2、计划
 
这个基础系列的文章就这样写结束掉吧、希望可以对你的B端设计有所帮助。之后我会写二个系列的文章、去分享我理解的B端设计。
 
B端基础 | 52000余字总结 B 端基础设计知识
 
 
第一个系列是B端基础设计的加强版、B端高手。B端高手是会写我的实战里是怎么去做的。其实就是我的设计项目复盘。
 
第二个系列就随便的去分享一些设计知识。比如哪些什么什么原理呀、什么什么法则呀、在设计里的应用。而且会提出和讨论一些设计问题。
 
3、写在最后
 
分别是为了更好的相见、我一直希望我的文章可以帮到你。慢慢来路还很长、总是要一步一步的来。很快我们会再次相见。我是KING(国王)
 
B端基础 | 52000余字总结 B 端基础设计知识
 
 
新的开始见.......
 
注解:标题的40000余字也好、50000字也好都是说的我这个系列总计的字数、因为想让你们看到。

作者:彪形大汉pro
链接:https://www.zcool.com.cn/article/ZMTYyMTEyNA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

B端用户中心设计剖析:构建高效、定制化的企业服务平台

蓝蓝设计的小编 B端ui设计文章及欣赏

一、引言 在数字化转型的大潮中,B端(Business-to-Business)服务市场日益繁荣,企业对高效、智能化、定制化的业务管理系统需求迫切。B端用户中心作为连接企业与服务商的关键桥梁,其设计不仅关乎用户体验,更直接影响到企业的运营效率与市场竞争力。本文将从设计原则、功能模块、用户体验及数据安全四个维度,深入剖析B端用户中心的设计要点。 二、设计原则 ...

UI 设计公司兰亭妙微分享:人工智能大模型管理平台UI设计

蓝蓝设计的小编 B端ui设计文章及欣赏

一、项目背景

(一)在当下数字化浪潮中,各类大模型如语言、图像生成模型不断涌现,企业与机构对其应用需求激增。然而,模型开发流程繁琐、部署成本高昂,不同模型间数据交互与共享困难重重。同时,模型性能优化、安全管理等问题亟待解决。在此背景下,大模型管理平台应运而生,它旨在整合资源,简化模型开发与部署流程,提升模型性能与安全性,为各行业高效利用大模型提供有力支持,助力人工智能技术深度融入业务。

(二)该系统的原首页中信息量比较少,在设计时除了对页面美观的优化,从内容、布局、用户使用场景、使用习惯、交互方式等方 面也进行考虑,增加了一些统计的图表, 「历史访问信息」采用卡片式列表,突出模块和内容。同时增加「个人上传记录」信息和「历史访问信息」可以进行 切换查看。

二、项目概述

(一)产品定位

大模型管理平台定位为人工智能领域的核心枢纽。它是模型全生命周期的智慧管家,从研发时整合数据与算法资源,到部署时适配多元硬件环境,再到运营中实时监测性能,全方位守护。同时,它也是跨行业的赋能引擎,为金融、医疗、制造等行业提供定制化模型服务,加速业务智能化转型。

(二)目标用户

大模型管理平台的目标用户广泛且多元。科技企业研发团队、金融机构从业者、医疗行业的研究人员和临床医生、教育领域的课程开发者与教育科技企业。此外,政府部门进行城市规划、交通管理等决策时,也能从平台获取支持。这些用户都期望通过大模型管理平台,挖掘数据价值,实现业务的智能化升级 。

(三)设计风格

系统首页重构信息组织架构,丰富信息 和数据,同时页面采用精美的图标和小 插图提高页面的精细美观度。 设计风格采用简约的设计语言,清晰、 简洁和直观的表达方式,模块化布局, 强调的是界面强调可复用性和通用性, 配色采用经典蓝色,蓝色具有很好的兼 容性,可以与多种颜色搭配使用,形成 和谐的视觉效果。

level2_img.jpg.png

三、设计亮点

(一)流程图设计前后对比

「模型仿真评估流程」是首页的主要功能区,在模块布局上加中 比例成为页面的聚焦区域,每个节点采用小插图,插图方便复制 及拓展、修改,提升设计开发效率,技术实现便捷,落地相对成 本低。增加了背景图案,使该模块更加有空间感,同时增加了整 个页面的灵动性。

level3_img1.png

(二)增加统计图表

图表能够直观地展示关键数据,使用户一目了然地了解整体情况, 快速把握数据的变化趋势和规律。其次,统计图表有助于提升用 户对数据的理解和分析能力,通过视觉化的方式展现数据间的关 联和差异,降低理解难度,提高决策效率。同时,美观的统计图 表也能提升系统首页的整体视觉效果,吸引用户的注意力,增加 用户的粘性。该区域后期也可以根据实际需求换成其它内容。

level3_img2.png

四、首页其他方案欣赏

level4_img.jpg.png

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

如何做好 B 端设计色彩搭配

ui设计分享达人

一、遵循色彩基本原理

  1. 色彩心理学:不同颜色会引发不同的心理感受。例如,蓝色常被视为专业、可靠,在 B 端设计中常用于表示信息的稳定和安全;绿色代表自然、健康,可用于强调环保、可持续发展相关的功能或产品。了解这些色彩心理,能让我们在选择颜色时更贴合产品定位和用户心理预期。
  1. 色彩对比度:恰当的对比度能让界面元素清晰可辨。文本与背景之间要有足够的对比度,以确保用户在不同环境下都能轻松阅读。一般来说,WCAG(Web Content Accessibility Guidelines)建议正常文本的对比度至少为 4.5:1,大文本(18pt 及以上)为 3:1 。同时,在强调重要信息或操作按钮时,也可以通过色彩对比度来突出显示。

二、契合品牌调性

B 端产品通常与企业品牌紧密相连,色彩搭配应体现品牌的价值观和个性。如果品牌形象是创新、活力的,那么在界面设计中可以适当加入一些明亮、活泼的色彩作为点缀;若品牌强调稳重、专业,则应以中性色和深色系为主。保持品牌色彩在 B 端产品中的一致性,有助于增强品牌辨识度,让用户在使用产品过程中强化对品牌的认知。

三、考虑业务场景和用户需求

  1. 业务场景:不同的业务场景对色彩有不同的需求。例如,金融类 B 端产品可能更注重安全、可靠的视觉感受,多采用蓝色、灰色等冷色调;而创意设计类的产品则可以更具灵活性,使用丰富的色彩激发用户的创造力。
  1. 用户群体:了解目标用户群体的特点也很重要。如果用户主要是年轻的互联网从业者,他们可能对时尚、简洁的色彩风格更感兴趣;而对于年龄较大或对色彩敏感度较低的用户,简洁、高对比度的色彩组合会更合适。

四、构建合理的色彩体系

  1. 主色调:确定一个主色调作为界面的基础色,它应占据界面的大部分面积,奠定整体的视觉风格。主色调的选择要综合考虑品牌、业务场景和用户需求等因素。
  1. 辅助色:辅助色用于补充主色调,增强界面的层次感和丰富度。一般选择 2 - 3 种与主色调相协调的颜色作为辅助色,可用于按钮、图标、分隔线等元素。
  1. 强调色:强调色用于突出重要信息或操作,吸引用户的注意力。通常选择与主色调形成鲜明对比的颜色作为强调色,如在蓝色为主色调的界面中,橙色可以作为强调色来突出关键按钮。

五、注重色彩的一致性和可扩展性

  1. 一致性:在整个 B 端产品中,保持色彩使用的一致性至关重要。无论是不同页面之间,还是同一页面的不同元素之间,相同类型的信息和操作都应使用相同的颜色,避免用户产生混淆。
  1. 可扩展性:随着产品功能的不断增加和迭代,色彩体系需要具备一定的可扩展性。在构建色彩体系时,要预留一定的空间,以便在后续设计中能够灵活添加新的颜色,同时又不破坏整体的协调性。
做好 B 端设计的色彩搭配需要综合考虑多方面的因素,从色彩原理、品牌调性、业务场景到用户需求,每一个环节都不容忽视。只有通过精心的策划和设计,才能打造出既美观又实用的 B 端产品界面,提升用户体验,助力业务发展。
 
 

日历

链接

个人资料

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

存档