首页

B端设计九大精髓

前端达人

五一期间,我阅读了一本设计界的宝典——《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
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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

前端达人

缘起
最近看汪曾祺的《叹息桥》中的一句话,我必须分享给你。缘起我在人群中看见你,缘散我看见你在人群中。是的我想你在人群中看到我。这就是最初我分享这系列设计文章的初衷。
 
慢慢发现其实分享也是一件快乐的事情、而且在分享的过程中我自己也收获了很多。而且对设计的理解也更深了。更快乐的是收获了一群一起同行的小伙伴、这个还挺开心。和他们一起在群里吹水、一起吐槽。一起讨论问题、那真的是快乐无边。哈哈哈
 
上面扯多了。我们开始今天的内容。今天内容分三部分、第一部分内容总结是对我写的这个系列文章每一篇文章内容和核心的小总结。第二部分这个系列的文章页算是告一段落了、下一阶段我会做些什么。第三部分分享一些我写文章的感受、然后煽煽情。
 
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
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

产品经理如何用ChatGPT提高工作效率?给你15个例子!

ui设计分享达人

ChatGPT爆火一年了,但真正能在日常工作生活中高频使用它,并且帮助自己提升工作效率的人还是太少了。我问了一些小伙伴,大都是问了几个问题后觉得用处不大,也懒得深入研究。
作为一名已经习惯使用ChatGPT的资深产品经理,决定整理出这大半年的使用心得,真正帮助产品经理们把AI用起来,节省出来的时间多睡会儿不香吗?
废话不多说,我们开始进入正题。

常见的B端弹窗样式设计总结

ui设计分享达人

B 端产品的业务场景通常比 C 端更为复杂,因此在进行产品设计时对信息的处理方式也需要根据不同的业务场景进行设计。今天主要聊一下 B 端产品设计中弹窗设计。
常见的B端弹窗样式设计总结
 
 
弹窗的定义
弹窗是展现在用户操作界面之上的容器,在 X 轴和 Y 轴的平行空间之上扩展了页面的高度。是系统与用户之间建立联系非常重要的组成部分。它通常在用户进行特定操作或访问特定页面功能时弹出,目的是向用户展示某些信息、提供选择或执行某些操作。
 
弹窗使用场景
  1.  
    需要呈现的内容篇幅相对较少。
  2.  
    常用于针对某些内容进行补充说明、需要用户处理关键信息、重要的警告提示等。
  3.  
    通常是由系统触发(用户被动接受)。
  4.  
    弹窗整体高度和宽度不做绝对的标准或规定,可以根据内容篇幅的多少和视觉的平衡度来确定,整体规范保持一致即可。
 
总体概括为简单和复杂两个场景。
 
一、场景简单
场景简单包括:全局提示、气泡确认框、警告提示、通知提醒框,通常是操作确认和系统内部自动触发性提示时使用。
 
1. 全局提示
以 toast 提示居多,通常在页面中间偏上的位置。
常见的B端弹窗样式设计总结
 
 
 
2. 气泡提示
用于解释难理解的功能名词或者由于版面限制文字展示不完,利用气泡来展示。
常见的B端弹窗样式设计总结
 
 
 
3. 警告提示
用于重点内容的警告提醒,降低用户犯错概率,提升用户的使用体验。
常见的B端弹窗样式设计总结
 
 
 
4. 提示性通知弹窗:
位置相对固定,通常出现在需要介绍说明的功能旁边或者居页面中间展示。
例如,当系统发生重要更新维护或者重点功能引导时,可以显示一个提示性通知弹窗,告知用户当前状态。
类型主要包括以下三种:
常见的B端弹窗样式设计总结
 
 
常见的B端弹窗样式设计总结
 
 
常见的B端弹窗样式设计总结
 
 
 
举例:
有赞后台页面
有赞后台页面
 
 
 
二、场景复杂
1. 场景复杂|全屏弹窗
常见的B端弹窗样式设计总结
 
 
 
新开页签(浏览器)
常见的B端弹窗样式设计总结
 
 
为什么是全屏弹窗,而不是页签?
全屏弹窗功能和页面相似,之所以使用全屏弹窗作为页面载体,原因就是对原触发页面的使用和关注并没有结束,编辑完成后需要快速关闭当前窗口并返回到原来的页面中去,数据可以做到实时同步。如果用新页签打开,则会对数据同步造成隔断,需要二次打开页面。页签是浏览器新开窗口,通常用于不同功能的展示。
 
 
2. 场景复杂|非全屏弹窗
①中间弹窗·纯文本
确认弹窗:用于向用户确认某个操作或决策,通常包含确认和取消两个按钮。例如,当用户点击删除按钮时,可以显示一个确认弹窗,询问用户是否确定删除。
常见的B端弹窗样式设计总结
 
 
 
②中间弹窗·下拉框
下拉框:后台将全部数据返回,下拉展示全部内容,方便用户快捷查询。
常见的B端弹窗样式设计总结
 
 
 
③中间弹窗·文本输入
文本输入:通常用于备注等说明性内容的填写。
常见的B端弹窗样式设计总结
 
 
 
④中间弹窗·选择器
包括单选和复选两种类型,下图以单选框举例。
常见的B端弹窗样式设计总结
 
 
 
⑤中间弹窗·步骤条
常见的B端弹窗样式设计总结
 
 
 
⑥中间弹窗·多内容组合
常见的B端弹窗样式设计总结
 
 
 
⑦中间弹窗·左右穿梭框
穿梭框左侧通常会有分页,为了防止用户对已选内容造成遗忘,右侧框展示已选内容进行二次核对。
常见的B端弹窗样式设计总结
 
 
 
⑧中间弹窗·上下穿梭框
常见的B端弹窗样式设计总结
 
 
 
举例:
常见的B端弹窗样式设计总结
 
 
 
3. 场景复杂|抽屉
抽屉呈现的内容篇幅介于弹窗和页面之间,通常居右侧展示。
 
①抽屉·纯文本
通常展示较大篇幅的说明性内容。
常见的B端弹窗样式设计总结
 
 
 
②抽屉·横向 tab
通常展示同一大类下,不同分类的信息内容。比如全部消息、已读、未读等。
常见的B端弹窗样式设计总结
 
 
 
③抽屉·纵向 tab
常见的B端弹窗样式设计总结
 
 
 
④抽屉·多内容结合
多类型内容的聚合展示。
常见的B端弹窗样式设计总结
 
 
 
 
三、其他情况
①强制性提示
为了更好的了解用户特征,提供更加优质的服务,有的系统在用户首次使用时,会出现强制性弹窗,执行必要操作后,才可进入系统使用。
常见的B端弹窗样式设计总结
 
 
 
四、弹窗使用规范
上下左右间距大小固定,弹窗大小根据内容的多少来自动调整。
 
①中间弹窗
常见的B端弹窗样式设计总结
 
 
常见的B端弹窗样式设计总结
 
 
 
②侧边弹窗
常见的B端弹窗样式设计总结
 
 
以上就是全部内容,谢谢。


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

层级思维解构图标分类体系

ui设计分享达人

近年来,Ul设计行业蓬勃发展,图标设计风格更是呈现出多元化的特点,各种新颖、创意的设计风格层出不穷。图标样式早已从潺潺溪水变成汪洋大海,通过系统归纳和整理各类常用的面性图标设计类型与风格,我们构建了一套体系化的记忆框架,使得在日常工作中能够迅速且准确地作出图标样式的决策,从而有效提升设计效率与质量。本文章主要讨论近年UI界面中会经常使用的图标风格,线性图标样式组成一般过于简单,在此不做讨论。
 
本文在探讨图标的分类思维时,巧妙地运用了层级理念,
并特别关注层级是否穿透这一关键因素来区分不同类型的图标。这种分类思维不仅使图标的辨识变得更为便捷,还有助于人们更轻松地形成深刻的记忆印象。通过这种创新性的分类方法,我们得以更清晰地理解图标的本质与特点,进一步提升我们对常用图标的认知水平和应用

B端基础 | 52000余字总结 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端高手是会写我的实战里是怎么去做的。其实就是我的设计项目复盘。
 
第二个系列就随便的去分享一些设计知识。比如哪些什么什么原理呀、什么什么法则呀、在设计里的应用。而且会提出和讨论一些设计问题。
 
 
 


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

设计原则之一致性

前端达人

一、什么是一致性呢?
二、  为什么一致性很重要呢?
三、  生活中一致性的案例
四、  UI设计一致性的体现
五、  交互设计一致性的体现
六、  总结
设计原则之一致性
 
 
一、什么是一致性呢?
一致性的字面意思和使用的场景不同代表的含义也会有区别,这里主要使用在UI/UX设计中。
UI/UX设计中一致性是指在整个应用程序或网站中使用相同的设计元素和模式。它涉及在所有页面和屏幕上使用相同的视觉语言、布局和交互,以创造一致且直观的用户体验。一致性有助于用户了解如何浏览应用程序或网站,消除困惑和沮丧,并使他们更容易学习和记住如何使用产品。
设计并非孤立的实践。它与其他领域交织在一起,其中之一就是心理学。在设计中发挥根本作用的心理学原理是重复定律。
这一定律的起源可以追溯到 20 世纪早期,当时德国心理学家赫尔曼·艾宾浩斯进行了开创性的研究。他的工作对理解人类记忆具有革命性意义。艾宾浩斯最著名的贡献是“遗忘曲线”,它表明如果不尝试保留信息,信息会随着时间的推移而丢失。然而,他还发现,反复接触信息会极大地影响我们记忆信息的能力。从本质上讲,重复可以强化回忆。
 
设计原则之一致性
 
 
艾宾浩斯的重复实验主要关注学习和记忆的过程,但其影响远不止于此。这让人们认识到,重复的元素更容易被记住,从而引导观众的注意力和焦点。很明显,重复可以用来引导行为和理解。
通过重复颜色、形状和图案等特定元素,设计师可以创造一种统一感和节奏感。这种重复还使设计师能够强调基本元素或信息。
重复不仅仅是一种设计原则,更是生活的一个基本方面。在自然界中,重复以各种方式体现,从雪花的对称性到海浪拍打海岸的韵律图案,从贝壳的螺旋到一年四季的循环。这种自然的重复带来了节奏、结构和可预测性,创造了一种舒适和熟悉的感觉。
人类是自然的一部分,天生就能够识别和响应这些模式。我们的大脑是出色的模式识别机器,我们倾向于认为重复的模式令人感到舒适和熟悉。这种认知特征解释了为什么设计中的重复模式(无论是在数字界面、实体产品、建筑还是营销中)会引起我们的共鸣。
设计原则之一致性
 
 
二、  为什么一致性很重要?
在 iOS 的设计指南中,一致性被视为让设计融入 iOS 生态的关键,它帮助用户在不同应用间建立起一种熟悉感。遵循规范的一致性可以「help your design feel at home in iOS」,保持一致性是为用户带来产品愉悦感的重要方式。
在经典交互设计原则中,「一致性」一直是重要的设计准则。在几乎可以称为「设计师必读」的雅各布·尼尔森的十条可用性原则中,一致性(Consistency and standards)位列第四,原则建议设计者在界面和交互上遵循既定的规则,无论是在应用内部还是跨平台之间。
在具体的执行中,内部一致性通常指应用内应当使用统一的视觉风格和交互语言,相同的功能和操作应该在体验上保持一致。而外部一致性则更强调用户应该遵循平台和系统的设计规范,保持用户在同一平台不同应用间体验的相似性。
一致性在UI/UX(用户界面/用户体验)中非常重要,因为它对于提供良好的用户体验和用户界面的可用性至关重要。下面详细说明一致性的几个重要原因:
 
设计原则之一致性
 
 
1、  用户学习曲线:
一致的UI/UX设计可以降低用户的学习曲线。当用户在应用程序或网站中遇到一致的元素、布局和交互方式时,他们可以快速理解并准确预测如何与界面进行交互。这减少了用户的混淆和困惑,提高了他们的效率和满意度。
2、  提升可用性:
一致性使用户界面更加易于使用。当用户在不同的页面或功能之间找到相似的设计元素和交互模式时,他们可以轻松地将已有的知识和经验应用于新的情境中。这种一致性帮助用户快速完成任务,减少错误和迷失,提供更好的导航和流畅的体验。
3、  品牌认可度:
一致的UI/UX设计有助于树立品牌形象和增强品牌认可度。通过在不同的渠道和平台上保持一致的设计元素、标识和视觉风格,品牌可以建立起独特而可识别的形象。用户在不同的触点上都能感受到品牌的一致性,从而增加品牌的信任和忠诚度。
4、  用户满意度:
一致性直接影响用户的满意度。当用户在使用应用程序或网站时感受到一致的设计和交互方式时,他们会感到更加舒适和自信。一致性传递了专业和质量的信号,让用户感到被关注和重视。这种积极的用户体验有助于提升用户满意度,并促使他们持续使用和推荐你的产品或服务。
 
三、  生活中一致性的案例
设计原则之一致性
 
 
生活中的案例保持一致性的有很多,
a、例如红绿灯,在学习驾照或老师教学时会统一讲解红灯停,绿灯行。
b、向左向右箭头符号的使用,在日常生活中都会保持一致。
c、我们乘坐地铁时,地铁的线路图也会保持一致性,每个站的点大小,文字,到站和未到站以及行驶过的站点都有清晰统一的设计和交互操作。
 
四、  UI设计一致性的体现
 
设计原则之一致性
 
 
1、  颜色
颜色是一种物理现象和感官体验,是光波在人眼视网膜上的反射或吸收所形成的视觉效果。
设计中的颜色选择代表了一个项目的品牌,例如常见的饿了么蓝,美团的黄,京东的红等等,颜色的一致性有助于营造良好的视觉体验,强化品牌形象,提升可用性和无障碍性,最终改善用户的整体交互感受。这对于产品的成功至关重要。在设计时颜色(品牌色)会延续到按钮,图标,字体、标签,背景,banner等模块使用。
设计原则之一致性
 
 
2、  字体
字体是一种特定的文字样式,它描述了文字的形状、大小、粗细、间距等视觉特征。
字体是设计中非常重要的元素之一,不同类型的字体,字体的粗细,有衬线字体和有衬线字体,字体的字重等,这些不一致会造成页面混乱,字体的选择和使用会对用户的视觉体验、信息感知、品牌联系和情感体验产生重要影响。
开发实现上如果字体使用较多,会影响加载速度,没有统一的字体制定规则后期更新迭代也会比较繁琐,造成资源浪费。
 
设计原则之一致性
 
 
3、  图标
图标是一种简化的、具有视觉表现力的符号图形,在用户界面设计、信息传达等领域广泛应用。
在众多APP中,常使用APP的你肯定可以感受到,图标除了准确的表达某个含义,还需要在设计时保持一致性,图标的大小,设计的风格例如线型图标、填充图标、简约图标、立体图标、卡通图标等,如果这些图标风格进行混合使用就会造成混乱,影响用户体验,看起来很不专业也会影响用户使用时对于安全性的担忧。
设计原则之一致性
 
 
4、  按钮样式
按钮是一种常见的交互界面元素,用于触发某种操作或功能。
设计中的按钮有很多样式,因为项目类型的不同按钮样式也不同,按钮的样式有圆形按钮,矩形按钮,圆角矩形按钮,菱形按钮等,同一个项目中建议使用统一的按钮样式,除了可以体现专业性,还可以让用户增加信任度,按钮样式使用很多,用户除了使用体验不友好,还会觉得是不是跳出了这个产品去到了另一个地方。
 
设计原则之一致性
 
 
5、  排版
排版是指在印刷或数字媒体中,对文本、图像等内容进行有规则的布局和格式化的过程。
设计中排版的一致性,使用户能够快速适应和理解界面的结构,降低学习成本,用户对于熟悉的排版模式产生更强烈的归属感和安全感,使内容更易读,用户可以依照熟悉的视觉动线快速找到所需信息,提高信息获取效率。
五、  交互设计一致性的体现
 
设计原则之一致性
 
 
1、  操作一致
根据文字意思就是用户才操作时候的流程保持一致,操作保持一致,例如大家常见的下单购买商品流程,
用户在购买商品时:点击商品——商品详情——付款购买,其他商品也应该是这样流程,
如果每个商品流程不同就会很乱,例如:
点击A商品————商品详情——付款购买;
点击B商品——付款购买——查看商品详情;
点击C商品——同类商品列表——商品详情——付款购买,
这样就会很乱,用户不知道点击下一个商品会是什么样子。
例如:
设计原则之一致性
 
 
1、APP中的视频浏览是上下滑动,进入新的模块后视频浏览变成了左右滑动。
2、需要确认某些操作时,确认按钮一会在右侧,一会确认又在左侧。
用户在操作时会除了体验很乱,也很难培养用户习惯。
设计原则之一致性
 
 
2、  文案符号一致
文案和标点符号的一致比较好理解,例如常见的输入框,“请您输入帐号”,“请输入你的密码”,同一页面场景下文案和称呼不统一,会造成用户操作迟疑,是不是这个不重要才用了“你”,重要的才用“您”,为了避免用户进行不必要的思考文案保持一致,符号亦是如此。
设计原则之一致性
 
 
3、  反馈一致
当我们看到下一步按钮时,有些地方交互是进入了新的页面,有的是分步式使用。建议使用一种保持统一,避免用户产生误导。
操作反馈后的弹窗,相同功能反馈的弹窗样式不一致:一会是图文弹窗,一会纯文字提示,用户也会很乱,包括交互时出现的样式也需要保持一致,剧中或从下向上弹出。
六、  总结
一致性在UI/UX中的重要性在于提供清晰、高效、易用和令人愉悦的用户体验。通过保持设计元素、布局和交互方式的一致性,可以降低用户的认知负荷,提高用户的学习效率,增强品牌形象,提升用户满意度,并最终实现更好的业务成果,详细分为以下七点:
设计原则之一致性
 


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

常见的B端弹窗样式设计总结

前端达人

B 端产品的业务场景通常比 C 端更为复杂,因此在进行产品设计时对信息的处理方式也需要根据不同的业务场景进行设计。今天主要聊一下 B 端产品设计中弹窗设计。
常见的B端弹窗样式设计总结
 
 
弹窗的定义
弹窗是展现在用户操作界面之上的容器,在 X 轴和 Y 轴的平行空间之上扩展了页面的高度。是系统与用户之间建立联系非常重要的组成部分。它通常在用户进行特定操作或访问特定页面功能时弹出,目的是向用户展示某些信息、提供选择或执行某些操作。
 
弹窗使用场景
  1.  
    需要呈现的内容篇幅相对较少。
  2.  
    常用于针对某些内容进行补充说明、需要用户处理关键信息、重要的警告提示等。
  3.  
    通常是由系统触发(用户被动接受)。
  4.  
    弹窗整体高度和宽度不做绝对的标准或规定,可以根据内容篇幅的多少和视觉的平衡度来确定,整体规范保持一致即可。
 
总体概括为简单和复杂两个场景。
 
一、场景简单
场景简单包括:全局提示、气泡确认框、警告提示、通知提醒框,通常是操作确认和系统内部自动触发性提示时使用。
 
1. 全局提示
以 toast 提示居多,通常在页面中间偏上的位置。
常见的B端弹窗样式设计总结
 
 
 
2. 气泡提示
用于解释难理解的功能名词或者由于版面限制文字展示不完,利用气泡来展示。
常见的B端弹窗样式设计总结
 
 
 
3. 警告提示
用于重点内容的警告提醒,降低用户犯错概率,提升用户的使用体验。
常见的B端弹窗样式设计总结
 
 
 
4. 提示性通知弹窗:
位置相对固定,通常出现在需要介绍说明的功能旁边或者居页面中间展示。
例如,当系统发生重要更新维护或者重点功能引导时,可以显示一个提示性通知弹窗,告知用户当前状态。
类型主要包括以下三种:
常见的B端弹窗样式设计总结
 
 
常见的B端弹窗样式设计总结
 
 
常见的B端弹窗样式设计总结
 
 
 
举例:
有赞后台页面
有赞后台页面
 
 
 
二、场景复杂
1. 场景复杂|全屏弹窗
常见的B端弹窗样式设计总结
 
 
 


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

比GIF更好用的Lottie动画是什么?

前端达人

   不知道大家有没有这样的困扰,每次制作GIF图的时候,难免会出现边缘锯齿,就算加上白边之后,在夜晚模式的时候锯齿就更明显了。除此之外,GIF图对于渐变填充的呈现也很糟糕,会出现渐变断层的情况,看起来很不自然。
最让人难以接受的情况是:
        稍微把动画做流畅一些,GIF的文件大小就变得巨大无比。
        在2017年的时候,一款比GIF动画更好用的动画图片格式诞生了!!!
        那就是我们今天将要介绍的Lottie动画。
     
        什么是Lottie动画?
       Lottie动画是一种基于 JSON 的动画文件格式,允许在任何平台上发送动画,就像发送图片一样轻松。Lottie是可在任何设备上运行的小文件,并且可以放大或缩小而不会出现锯齿的一种动画格式。
比GIF更好用的Lottie动画是什么?
 
 
 
相较于其他动图格式,Lottie有哪些优点?
比GIF更好用的Lottie动画是什么?
 
 
①文件大小
和GIF、Apng 或 MP4 等其他格式相比,Lottie 动画要小得多,同时保持相同的动画表现,甚至更流畅。
比GIF更好用的Lottie动画是什么?
 
 
②无线扩展
Lottie动画是基于矢量设计制作的,这意味着可以随意放大或缩小它们,而不必担心分辨率的大小导致的锯齿问题。放大无数倍也是清晰如初。
比GIF更好用的Lottie动画是什么?
 
 
③支持多平台
对于所有开发人员来说,Lottie动画的交接非常简单。现在我们可以在 iOS、Android、Web 和 React Native 上使用 Lottie 动画,也不需要修改。使用和调用都非常方便。
比GIF更好用的Lottie动画是什么?
 
 
④可交互
在 Lottie 动画中,动画元素可以设计为可交互组件,用户可以操纵它们进行交互,实现滚动、单击和悬停等交互效果。这是GIF、Apng和MP4等动画文件都没办法做到的。
比GIF更好用的Lottie动画是什么?
 
 
  怎么设计制作Lottie动画呢?
       目前,Lottie官网提供了很多动效设计软件的插件供大家使用和下载。目前下面这些设计软件可以在官网下载到Lottie动画的导出插件。
比GIF更好用的Lottie动画是什么?
 
 
其中,Lottie Creator是Lottie官方的网页版动画制作工具,登录官网就可以使用。
Lottie官网地址 
 https://lottiefiles.com
比GIF更好用的Lottie动画是什么?
 
 
       说了这么多Lottie的优点,其实Lottie也是有短板的。比如说,AE里面的fx效果,Lottie就全部不支持,另外复合路径动画等等动效效果也不支持。
       为了方便大家快速上手Lottie动画,作者把Lottie支持的效果整理归类成了几张图片,方便大家制作的时候快速查阅。
 
比GIF更好用的Lottie动画是什么?
 
 
比GIF更好用的Lottie动画是什么?
 
 
比GIF更好用的Lottie动画是什么?
 
 
比GIF更好用的Lottie动画是什么?
 
 
比GIF更好用的Lottie动画是什么?
 
 
比GIF更好用的Lottie动画是什么?
 
 
比GIF更好用的Lottie动画是什么?
 
 
比GIF更好用的Lottie动画是什么?
 
 


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

日历

链接

个人资料

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

存档