首页

B端产品中常用的三种面板

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

我们需要了解一下设计模式,例如它是什么、什么时候用、怎么使用,可以让我们在没有参考的情况下,也能设计出合理、好用的界面。

 

折叠面板

 

它是什么

把不同的内容模块,放到一组顺序排列的面板中,这些面板每一个都可以折叠、可以展开,互不干扰。

 

什么时候使用

你需要在页面上显示大量各种各样的内容,可能包括文本、列表、按钮、表单控件等,而你又没法把它们都显示在页面上。

 

 

 

 

这些内容通过分组,形成了不同的模块,以下是这些模块的特点:

1、用户可能一次只需要查看一个模块的内容。有些模块比别的模块更长或更短,不过它们的宽度一样。

2、这些模块组成了一个工具箱,或者两级菜单,或者包括一些交互式元素的某种结构,这些模块的内容要么彼此相关,要么彼此类似。

 

 

 

 

3、要注意的是,当一个大模块打开或者打开了很多个模块的时候,模块底部的标签可能会滚动到屏幕或窗口的外面。如果这一点对用户来说有问题,那就要考虑一下其他的解决方案。

 

 

 

 

如何使用

竖向排列这些模块,并使用对于用户来说有意义的排列顺序。

例如:QUICK BI 右侧折叠面板,顺序是从大到小,从外到内。

 

 

 

 

为每个模块选择一个简短而富描述性的标题,并把这个标题放到一个横条上,让用户可以单击它来打开或关闭这个模块。

也可以用一个可以变换方向的三角形图标来提示打开/关闭的操作:关闭的时候向右或向下,打开的时候向上。

 

 

 

 

一次允许打开多个模块。

人们在这个问题上有一些不同的看法,有的人喜欢一次只能打开一个模块。不过根据经验,特别是在各种应用里,一次允许打开多个模块更合适。这样可以避免一个之前打开的模块突然消失,这样会让用户觉得很粗鲁,也很意外:“喂, 那个菜单哪里去了?之前就在这里的!

 

 

 

 

 

当用户在登录状态时,折叠面板应该在多个操作期间,保持它们各自模块的打开和关闭状态,这点很重要。

 

 

 

 

 

 

如果模块内容需要进一步拆分,折叠面板还可以级联使用,不过这样看起来会有点混乱。 因此只用一个一级折叠面板模块更合适,如果有必要可以采用其他结构代替,比如tab页。

 

 

 

 

 

可移动面板

 

它是什么

把页面上的内容组合到几个不同的区块里,每一个都可以独立打开或关闭。可以随意在界面上放置这些区块,用户还可以移动它们,形成自己定义的布局。

 

 

 

 

什么时候使用

你正在设计一个桌面应用(例如:钉钉、飞书)或者一个网页应用(例如:纷享销客、ONES),应用中会涉及看板、工作台、仪表盘、数据分析等页面,你希望用户对这些页面有一定的控制权。 这些页面应该是应用中的主页面、是用户会经常查看的页面。

 

在这个页面上,需要显示大量各种各样的内容,可能包括文本、列表、按钮、表单控件、图表等,而你又没法把它们都显示在一个模块上。

 

 

这个页面上的功能具有以下特点:

1、用户想同时查看好几个模块。

2、不同的模块对每个用户来说,有着不一样的价值。例如,有些人想看到A、B、C这三个模块,而另外一些人可能想看到的是D、E、F。 3、在空间大小方面,各个模块差异可能比较大。例如,用户希望把信息少的模块缩小。

 

 

 

 

4、模块在界面上的位置对用户来说很重要。例如,重要的内容用户希望放在前面。

 

 

 

5、有时候模块数量比较多,用户不希望全部展示出来。例如:用户汇报工作时不需要这个模块,可以把它先移除,汇报完后,再添加回来。

 

 

 

 

6、控制这些模块的功能可能是一个工具条,或其他交互式结构的组成部分。

 

 

 

 

为什么使用

因为不同的用户关注点也不同,他们希望能自己选择想看的内容。 可以把需要的内容放到显眼的位置,把不需要的东西隐藏起来。同时,他们还可以利用“空间记忆”来记住不同的内容在什么位置。

 

空间记忆:当人们需要使用某个东西时,经常是通过回忆它们的位置来寻找它们,而不是它们的名字。 例如:你因为有事外出,需要同事打开你的电脑帮你发一份文件,通常你也说一句文件好像再桌面的右边,这也是利用了空间记忆帮助快速寻找。很多软件把对话框的按钮(确定、取消)放在右下方,有一部分原因也是考虑到用户的空间记忆依赖性。

总结:使用可移动的面板可以让用户的工作效率更高,工作更舒服。

 

如何使用

为每个模块提供名称、标题栏和默认尺寸,并为它们提供合理的默认设置。 让用户按自己的喜好在页面上移动这些模块,如果可能的话,可以提供拖曳功能。

 

 

 

 

让每个模块可以通过简单的操作进行编辑和隐藏,也可以考虑让用户可以彻底移走这些模块,在标题栏上放一个关闭按钮就可以。

 

 

 

 

可移动面板要清晰的体现编辑与预览状态,如果用户误操作打乱模块顺序,需要提供一个“恢复默认设置”的按钮。

 

 

可收起面板

 

它是什么

把次要内容和可选内容放到用户能自己打开、收起的面板里。

 

什么时候使用

你需要在页面上显示大量各种各样的内容,可能包括文本、列表、按钮、表单控件等,而你又没法把它们都显示在页面上。 同时,还可能有一些适用中央舞台模式的内容需要在视觉上优先处理,需要把面板收起。

 

 

 

 

这些内容自然组成了分组或不同的模块,这些模块有着以下一些特点:

1、这些模块为界面上的主要内容提供注释、修改、说明或支持。(例如:WPS右边的快捷键、样式、帮助、资源)

 

 

 

 

2、这些模块可能不是很重要,不需要默认展开。

3、对不同的用户来说,它们的价值并不一样。(例如:图中新手入门指导,老用户可能并不需要)

 

 

 

 

4、甚至对同一个用户来说,这些模块可能有时候非常有用,换个时间就不一定了。当 它们收起的时候,这些空间最好留给界面上的主要内容。

5、这些模块之间可能彼此没有多大关系。当用到Tab和折叠面板时,这两个模式会把各个模块组合到一起,表示它们之间有一些关联,而可收起面板不会对内容进行分组。

 

为什么使用

把无关紧要的内容隐藏起来可以让界面变得简洁。

当用户选择隐藏某个模块时,只要简单地收起这个模块就可以了。 它所占用的空间也会还给主要内容。

这也是渐进式展开原则的一个例子—只在用户需要的时候,需要的地方立即显示那些隐藏的内容。

总的来说,想让界面保持整洁,通过对内容进行分组和隐藏是非常有效方式。而可收起面板、Tab、折叠面板、可移动面板,这4种模式正是有效方式的工具。 如何使用

 

 

如何使用

把内容放到一个单独的面板里,让用户可以用一次单击来打开或关闭这些面板。 可以利用引导性的文字来表示这里可以展开(例如:更多),也可以利用三角形的图标来表示这里可以展开。

 

 

 

 

 

当用户关闭这个面板时,把它所占用的空间收起来,用来显示主要内容。

也可以在打开和关闭这些面板的时候加上动画效果,这样会让打开和关闭时的过渡更加平滑。

如果有多个模块要用这种方式来隐藏,可以把这些模块放在一起,或者用Tab、折叠面板来组织,还可以把它们分开放在主界面上。

如果发现大部分用户都打开了一个默认为关闭状态的可收起面板,那么应该让它默认打开。

 

 

谢谢大家观看!



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

解锁B端按钮设计10大密码

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

 
无法想象没有按钮的页面是什么滋味,那定会像没有方向盘的汽车,让人不知所措吧?也无法想象按钮设计不恰当,会给用户带来怎样的困扰?
 
面对十万火急的任务需求,
如果需要调动全部理性脑,深呼吸三秒,
才能找到想要执行操作的按钮入口,我想这样的产品设计是失败的,是会被用户所唾弃的。
 
本文将详细剖析按钮的神秘面纱,了解它、研究它,让按钮设计成为产品的得力助手,为我们的产品赋能,为我们的工作提效,下面就让我们开启这场神秘之旅吧!
 
解锁B端按钮设计10大密码
 
 
 
 
目录
一、按钮的定义
二、按钮设计的种类
三、按钮设计的尺寸
四、按钮的构成
五、按钮设计的作用
六、按钮的位置
七、按钮的颜色
八、按钮在UI界面的设计原则
九、按钮设计的注意事项
十、按钮弱化设计的六种方式
 
 
解锁B端按钮设计10大密码
 
 
按钮在我们生活中起着很大的作用,它就像我们的小助手一样,帮我们一键开启想要的任务,凡事都能一键触达。
 
解锁B端按钮设计10大密码
 
 
 
按钮在UI界面中,是一种界面交互控件,通常以矩形、圆形或其他几何形状呈现,具有明确的视觉边界。它通过用户的点击、触摸等操作来触发特定的功能或操作,如提交表单、执行命令、导航页面、切换状态等。
 
按钮一般包含文字标签、图标或两者的组合,以清晰传达其功能。
同时,按钮在不同状态下会呈现出不同的视觉效果,如默认状态、按下状态、悬浮状态、禁用状态等,为用户提供操作反馈和引导。
 
 
解锁B端按钮设计10大密码
 
 
1、Antdesign对按钮的种类划分:
 
 次按钮
常规按钮,用于非主要动作。如果不确定选择哪种按钮,次按钮永远是最安全的选择。
解锁B端按钮设计10大密码
 
 
 
❷ 
主按钮
突出“完成”、“推荐”类操作;一个按钮区最多使用一个主按钮。
解锁B端按钮设计10大密码
 
 
 
❸ 
文字按钮
弱化的按钮,采用更轻量的按钮样式,可用于需大面积展示按钮场景,例如下面的站酷活动页就用了很多的文字按钮,只有当按钮被选中时,按钮才会高亮选中。
解锁B端按钮设计10大密码
 
 
 
❹ 
图标按钮
图标提供视觉线索,避免逐字阅读按钮文案,更高效地使用界面,让页面看起来更加的简洁。
解锁B端按钮设计10大密码
 
 
解锁B端按钮设计10大密码
 
 
 
 
❺ 
在按钮中添加图标
用于对按钮含义补充解释,提高按钮识别效率。
解锁B端按钮设计10大密码
 
 
 
2、按钮的样式种类
按钮的样式可以从多个方面进行分类和设计,以下是一些常见的样式分类:
 
❶ 
按颜色划分:
单色按钮
按钮背景为单一颜色,如蓝色、绿色、红色等,常用于强调按钮的主要功能或操作。
 
渐变色按钮
按钮背景为渐变色,可以是线性渐变或径向渐变,通常用于增加视觉吸引力和现代感。
 
透明按钮
按钮背景透明或半透明,通常用于与背景融合或突出按钮上的文本和图标。
 
彩色边框按钮
按钮背景透明或浅色,但有彩色边框,常用于需要突出按钮边界的场景。
解锁B端按钮设计10大密码
 
 
 
 
❷ 
按形状分
矩形按钮
这种是最常见的按钮形状,适用于大多数界面设计。
 
圆形按钮
按钮形状为圆形,通常用于表示播放、暂停等操作,或用于具有特定功能的图标按钮。
 
圆角按钮
按钮形状通常为圆角矩形,常用于需要柔和视觉效果的场景。
 
自定义形状按钮
根据设计需求,按钮可以是任意自定义形状,如星形、心形等,常用于创意设计或特定主题的界面。
解锁B端按钮设计10大密码
 
 
 
❸ 
按边框分
无边框按钮
按钮没有边框,背景和文本直接显示,常用于简洁的界面设计。
 
细边框按钮
按钮有细边框,常用于区分按钮与周围元素,同时保持界面的简洁性。
 
粗边框按钮
按钮有粗边框,常用于强调按钮或与背景形成强烈对比。
 
虚线边框按钮
按钮边框为虚线,常用于表示辅助操作或非主要功能。
解锁B端按钮设计10大密码
 
 
 
❹ 
按图标分
图标按钮
按钮上只有图标,没有文本,常用于表示通用操作或节省空间的场景。
 
图标+文本按钮
按钮上既有图标又有文本,图标通常位于文本左侧或上方,常用于清晰表达按钮功能的场景。
解锁B端按钮设计10大密码
 
 
 
❺ 
按阴影样式分
无阴影按钮
按钮没有阴影,常用于简洁或平面风格的界面设计。
 
轻微阴影按钮
按钮有轻微的阴影效果,常用于增加按钮的立体感和层次感。
 
明显阴影按钮
按钮有明显的阴影效果,常用于突出按钮或与背景形成强烈对比。
 
动态阴影按钮
按钮的阴影效果会随着鼠标悬停或点击等交互动作而变化,常用于增加交互体验的趣味性。
解锁B端按钮设计10大密码
 
 
 
❻ 
按动画种类分
无动画按钮
按钮没有动画效果,常用于简洁或传统的界面设计。
 
悬停动画按钮
当鼠标悬停在按钮上时,按钮会有动画效果,如颜色渐变、边框变化、图标旋转等,常用于增加交互体验的趣味性和吸引力。
 
点击动画按钮
当点击按钮时,按钮会有动画效果,如缩放、震动、波纹等,常用于增加交互体验的反馈感。
马蜂窝的功能主按钮,在点击的时候都会产生动画,交互感十足。
解锁B端按钮设计10大密码
 
 
 
加载动画按钮
当按钮处于加载状态时,按钮会有加载动画效果,如旋转图标、进度条等,常用于告知用户操作正在进行中。
 
 
 
3、按钮的几种状态
解锁B端按钮设计10大密码
 
 
 
3.1 默认按钮
按钮的初始状态,通常具有正常的颜色、形状和文字显示,等待用户操作。
 
3.2 待激活状态按钮:
待激活状态按钮通常用于指示某个功能或服务尚未激活或启用,用户需要执行某些操作来激活它。这种按钮的设计和实现需要清晰地传达当前的状态,并引导用户进行下一步操作。
 
3.3 点击状态按钮:
当用户点击按钮时,按钮会呈现按下的状态,通常通过改变颜色、形状或添加阴影等方式来表示。
 
3.4 禁用按钮:
在某些情况下,按钮会处于禁用状态,无法进行操作,通常会以灰色或半透明的方式显示,提示用户当前操作不可用。
 
3.5加载状态按钮:
加载状态按钮通常用于指示某个过程正在进行中,例如数据加载、文件上传或页面正在加载等。这种按钮可以让用户知道他们的操作正在被处理,而不是卡住或出现错误。
 
3.6危险提示状态按钮:
危险提示状态按钮通常用于提醒用户即将执行的操作可能带来风险或不可逆的结果,例如删除重要文件、注销账户等。这种按钮的设计和实现需要让用户明确意识到操作的危险性,以避免误操作。
 
下边这两组弹框就是运用了危险按钮,来提示客户未来即将面临的风险,警示作用非常的明显。
解锁B端按钮设计10大密码
 
 
 
 
解锁B端按钮设计10大密码
 
 
1、 Web端的按钮尺寸建议
在Web端,按钮尺寸没有固定标准。不过,一般来讲,按钮的高度常在32px-48px之间,宽度可根据内容灵活设置,但最好不要小于48px,这样方便用户用手指(触屏设备)或鼠标点击。像一个简单的“提交”按钮,宽度可能是80px左右,高度是36px左右。这些尺寸能保证按钮在视觉上比较舒适,易于交互。
 
 
2、 麻省理工触摸实验对按钮尺寸的指导
麻省理工触摸实验室通过对人类指尖的研究,得出了关于界面按钮大小设计的一些重要参考数据。
 
解锁B端按钮设计10大密码
 
 
 
对于食指,平均宽度在16至20毫米,指腹触摸区域尺寸为10至14毫米,指尖触摸区域尺寸为8至10毫米;对于拇指,平均宽度为25毫米,指腹触摸区域尺寸为12至16毫米,指尖触摸区域尺寸为10至12毫米。由此建议,食指触摸的按钮应保证在8毫米×8毫米以上,且控件间距应保证至少在1毫米以上;拇指触摸的按钮应保证在10毫米×10毫米以上,且控件间距应保证至少在2毫米以上。
 
该研究还指出,大多数用户可以舒适可靠地击中 10 毫米×10 毫米的触摸目标 。
 
 
3、 iOS对按钮尺寸大小的规范
解锁B端按钮设计10大密码
 
 
 
从按钮图标尺寸来看,根据苹果官方设计指南,iOS中按钮图标有不同标准。小图标尺寸为24×24pt,用于小型按钮,如导航;标准图标为32×32pt,用于普通按钮,适合次要操作按钮;大图标是 40×40pt,用于宽大按钮;特大图标则为48×48pt,用于特大按钮。不同设备屏幕尺寸也有对应的建议图标尺寸,如iPhoneSE建议24pt,iPhone14及iPhone14Pro建议32pt,iPad 建议40pt 。
 
在最小触摸区域方面,iOS规定最小触碰区域为44×44pt,这种尺寸一般适合主要操作按钮。
 
 
解锁B端按钮设计10大密码
 
 
UI按钮的组成主要包括以下几个关键元素:
 
1、圆角
圆角的大小决定了按钮的气质和视觉感受。小圆角常用于常规按钮,如4px圆角;圆角越大,越有亲和力,人眼往往不喜欢非常锋利的物体,所以通常不建议使用0圆角的按钮样式,根据我大量的体验,我发现市面上确实也是带圆角的按钮居多些。
解锁B端按钮设计10大密码
 
 
 
2、图标
图标用于直观表达按钮的功能或状态,如加载中、编辑等。图标的设计应与整体页面风格一致,并确保其含义明确易懂。
 
 
3、内间距
内边距能够扩大按钮的可点击范围,帮助用户更容易点击按钮。一个好的设计间距是把按钮的水平内边距设计成垂直内边距的2倍。当然,你也可以根据你设计的实际情况做适当调整,规矩不是死的。
解锁B端按钮设计10大密码
 
 
 
 
4、容器
容器是包含所有视觉和交互元素的框架,包括颜色、纹理、文案和图标等。容器的设计应支持按钮的功能和美观。
 
 
5、边框
边框定义了按钮的边界,常用于次级按钮的描边。边框的粗细和样式可以影响按钮的视觉层次和交互效果。
 
 
6、文案
文案是按钮上的文字描述,用于表达按钮的含义和功能。文案应简洁明了,易于理解,同时具有一定的吸引力。
 
 
7、背景
背景用于表达按钮的状态和品牌气质。不同的背景颜色和纹理可以增强按钮的视觉吸引力和品牌识别度。
解锁B端按钮设计10大密码
 
 
 
 
8、投影
投影用于凸显层级关系,帮助用户更好地区分不同的按钮。投影通常与纹理、渐变色结合使用,以打造更好的视觉体验。
 
佐糖首页为了促进转化,特意将“开通会员”的按钮用投影凸显处理,带投影的按钮明显有向前走的感觉,比没有投影的按钮看起来更加显眼,小小投影在页面中不仅起到增加空间感的作用,还起到了业务强调的作用,已经不仅仅是样式的一个承载了。
解锁B端按钮设计10大密码
 
 
 
这些元素共同作用,不仅提升了按钮的功能性,还增强了其美观性和用户体验。在设计UI按钮时,应综合考虑这些因素,以确保按钮既美观又实用。
 
 
解锁B端按钮设计10大密码
 
 
Antdesign指出按钮的作用是指导用户采取你希望他们采取的行动,并帮助用户防错。
解锁B端按钮设计10大密码
 
 
 
1、触发操作
1.1提交与确认:
在表单填写场景中,如用户注册、登录、信息提交等,按钮用于触发提交或确认操作,将用户输入的信息发送给系统进行处理。
 
1.2执行功能:
在各类软件中,按钮是执行具体功能的主要方式,如在图像编辑软件中,“裁剪”“旋转”“调整颜色”等按钮,可让用户快速实现相应功能。
 
 
2、导航跳转
2.1页面切换:
在多页面的应用或网站中,按钮可实现页面之间的切换,如网站的首页、产品页、关于我们页等,通过点击按钮,用户能方便地浏览不同页面内容。
 
2.2菜单展开与收起:
用于控制导航菜单的展开与收起,节省页面空间,提高界面的整洁度和易用性。
 
 
3、状态控制
3.1显示与隐藏:
可用于控制某些元素的显示与隐藏,如在电商网站中,点击“查看更多商品详情”按钮,可展开隐藏的详细商品信息。
 
飞书中的这个小小按钮,它承载着隐藏折叠的功能,让页面看起来更加的简洁有序。
 
解锁B端按钮设计10大密码
 
 
 
 
3.2启用与禁用:
在某些功能需要满足一定条件才能使用时,按钮可用于表示该功能的启用或禁用状态,如在未填写完必填项时,“提交”按钮处于禁用状态,无法点击。
 
中国移动云盘的登录页就是这么设计的,当前面信息没有填完,后面的登录按钮始终是禁用的状态,只有当信息填完,且填写正确,按钮才会亮起。
解锁B端按钮设计10大密码
 
 
 
4、提供反馈
4.1 操作反馈:
当用户点击按钮后,按钮会通过颜色、形状、动画等方式的改变,向用户提供操作反馈,告知用户系统已接收到操作指令。
 
4.2 引导提示:
在一些复杂操作或新功能引导时,按钮可作为引导提示的一部分,告知用户下一步操作,如在新手引导流程中,突出显示“下一步”按钮。
 
心岛日志的新手指引中就是这样设计的,按钮在其中起了很重要的指引作用。
解锁B端按钮设计10大密码
 
 
 
5、数据交互
5.1 数据筛选:
在数据展示界面,如表格、列表等,按钮可用于对数据进行筛选,方便用户快速找到所需信息。
钉钉打卡这个界面中,多亏有了日、周、月的筛选按钮,才让数据筛选变得如此便捷。
解锁B端按钮设计10大密码
 
 
 
5.2 数据排序:
通过点击“按时间排序”“按销量排序”等按钮,用户可对数据进行重新排序,以满足不同的查看需求。
 
 
6、品牌传达
很多产品的按钮颜色都是与它的品牌色高度一致的,它既是按钮,又是品牌色的传递大使。
 
网易云音乐的按钮色用的网易红,钉钉打卡的按钮用的腾讯蓝,都是在传递自己的品牌色,同时也是在进行指令的传达。
解锁B端按钮设计10大密码
 
 
 
 
解锁B端按钮设计10大密码
 
 
在日常设计中,页面无疑少不了按钮位置的摆放,那么按钮放置在什么样的位置合适,这也是一个值得深思的问题,也许我们已经司空见惯了按钮的位置摆放,但是我们知道它为什么要放这里或者那里吗?下面我们来看下这几种设计模型,让它告诉我们,为什么,在特定场景下,按钮位置要这么放?
 
 
1、设计依据 – Z型视觉模型
1.1 原理含义
Z型视觉模型是一种描述用户在浏览网页或界面时视觉轨迹的理论模型。
它的布局遵循字母Z的形状,指用户的浏览路线——从左到右,从上到下的的视觉运动轨迹。
 
首先,人们从左上角到右上角进行扫描,形成一条水平线;第二步,向页面的左下侧,创建一条对角线;最后,再次向右转,形成第二条水平线,当观众的视角以这种模式移动时,它形成一个虚构的“Z”字形。
解锁B端按钮设计10大密码
 
 
 
1.2 视觉区域
区域1:位于页面左上角,是用户视线最先关注的区域,通常放置最重要的信息,如网站标志、导航栏等,能第一时间吸引用户的注意力并让用户对页面内容有初步的整体认知。
 
区域2:在区域1的右侧,用户的视线在水平移动时会经过该区域,可放置一些与区域1相关的辅助信息或次要的导航元素等。
 
区域3:位于页面中部偏左,当用户视线继续向下移动时会关注到该区域,通常用来展示页面的核心内容,如产品介绍、文章主体等。
 
区域4:在页面的右下角,是用户视线的终点区域之一,可放置一些重要的操作按钮或补充信息等,以吸引用户在浏览完主要内容后进行进一步的操作或获取更多信息。
解锁B端按钮设计10大密码
 
 
 
1.3 应用案例
在电商网站中,商家会把热门推荐或主打产品放在区域1和区域3,以吸引用户的注意力。在产品详情页面,将“加入购物车”“立即购买”等按钮放在区域4,方便用户在浏览完产品信息后进行购买操作。
 
天猫商城就是这样做的,把网站的LOGO图放置在左上角(区域1),把产品图放置在左下角(区域3),最后在用户浏览了全部页面之后,在右下角(区域4)放置购买按钮,引导用户下单。
 
在这个带有销售场景的页面设计中,
购买按钮放置在右下角符合用户浏览习惯,也符合Z型视觉模型。
解锁B端按钮设计10大密码
 
 
 
在B端应用软件中,可能运用的功能比较多,按钮也比较多,通过大量分析和观察发现,它们
大部分喜欢把按钮放置在每次视觉运动线的起点或者终点的位置。
 
腾讯云是这样处理的,中国移动网盘是这么处理的,看似巧合,其实也有它合情合理的一面,因为每一个动作的开始和结束都会更加的引人注意。
 
这就跟人们每次入职一个新公司一样,刚进去时会特别卖力、小心,后面时间长了,也就形成免疫,习惯了,但是当最后要离开这家公司的时候,最后心情又会特别复杂,回想起自己在这里成长的岁月,就会心生很多的感慨,也会特别的记忆深刻。
 
也许这也是为啥很多页面设计,喜欢
把重要的按钮放置在每次视觉运动线的起点或者终点吧!
 
解锁B端按钮设计10大密码
 
 
 
 
解锁B端按钮设计10大密码
 
 
按钮的颜色在界面中不仅起到视觉点缀的作用,同时也是按钮状态的一种呈现和反馈。
 
按钮颜色不是千篇一律的品牌色,它也经常需要根据业务场景的不同,更换颜色,比方说红色-删除按钮、黄色-告警按钮、绿色-通过按钮、蓝色-更多按钮,不同的按钮在颜色设计上都会有所区别。
解锁B端按钮设计10大密码
 
 
 
此外,在设计按钮颜色时,有一些基本规范。
首先,从功能角度看,
主要按钮通常会使用比较突出的颜色,
像鲜艳的蓝色(如#007BFF),这是因为蓝色醒目又不会过于刺眼,能引导用户去点击。次要按钮(如取消、返回)的颜色会稍淡一些,比如浅灰色(#ccc),让用户知道这是相对次要的操作。
 
从颜色搭配来说,按钮颜色要和背景色有足够的对比度,方便用户识别。比如背景是白色,深色按钮就会很清晰;如果背景颜色较深,那按钮可以用浅色或者高亮度颜色。
 
另外,颜色的选择也要考虑产品的风格和使用场景。例如,在一个游戏软件里可能会使用更活泼的色彩,像红色、橙色;而在办公软件里,通常会采用比较沉稳的色调,如蓝色、黑色。
解锁B端按钮设计10大密码
 
 
 
 
解锁B端按钮设计10大密码
 
 
1、可识别性
1.1 视觉清晰:
按钮应采用用户熟悉的设计样式,如带有矩形或圆角矩形边框的填充按钮、带有阴影的填充按钮、幽灵按钮等。
 
1.2 文字明确:
按钮上的标签应准确、简明直接地介绍其功能,避免使用过于通用或模糊的表述,让用户清楚点击后会发生什么。
解锁B端按钮设计10大密码
 
 
 
 
 
2、易操作性
2.1位置合理:
将按钮放在用户期望看到的地方,如遵循F型或古腾堡原则,在页面的视觉焦点区域放置重要按钮。
解锁B端按钮设计10大密码
 
 
 
2.2尺寸适宜:
按钮大小应反映其在屏幕上的优先级,更大的按钮用于更重要的操作,同时要适配用户的手指,避免误触。
 
 
 
3、一致性
3.1 顺序得当、逻辑一致:
按钮的顺序应反映用户与界面之间交互的逻辑,如“上一步”按钮通常在左边,“下一步”按钮在右边。
 
3.2 状态样式一致:
按钮应具有一致的状态样式,如默认、按下、聚焦、禁用等,一个产品中,这些状态样式要高度的一致,不能在这个页面按钮样式是这样的,跑到另一个页面,样式又发生了改变。
 
著名的格式塔心理学也是这么认为的,它强调人对事物的理解是基于整体的、有组织结构的,如果按钮设计做到一致性,对提高产品的整体性是有非常大的改进的。
解锁B端按钮设计10大密码
 
 
 
 
 
4、简洁性
4.1 避免过多
避免在一个界面中使用过多的按钮,以免让用户感到无所适从,应优先考虑最重要的操作。
 
4.2 功能单一
每个按钮应尽量只执行一个主要功能,避免一个按钮承载过多复杂的操作,降低用户的认知成本。
 
希克定律指出,人的决策时间会随着选择的增加而增加。在按钮设计中,
简洁的设计能减少用户的选择和认知负担
,使用户能更快地做出决策并执行操作。
解锁B端按钮设计10大密码
 
 
 
 
 
5、美观性
5.1 风格统一
按钮的设计风格应与整个UI界面的风格保持一致,包括颜色、形状、字体等方面,形成统一的视觉体系。
 
5.2 对比协调
在保持整体协调的基础上,通过对比突出重要按钮,如使用高对比度的颜色、较大的尺寸等,吸引用户的注意力。
情感化设计理论强调设计应该注重用户的情感体验。美观的按钮设计能够传递积极的情感信息,增强用户和产品的情感连接。
解锁B端按钮设计10大密码
 
 
 
 
6、要符合习惯
奥斯卡·王尔德说过:“习惯一旦养成,便很难改变。” 
所以我们在设计按钮的时候,一定要符合人性的习惯,而不是试图改变人们的习惯。
 
 
 
解锁B端按钮设计10大密码
 
 
1、按钮设计要有分组意识
带有分组的按钮摆放,让人看起来总是更加的有序,也更利于用户进行操作,面对同类型的功能操作点无需跳跃着去寻找,能很快在相似功能操作区域找到。
 
360的分组意识很强烈,三个不同区域的图标按钮样式都做了明显的区分,让界面看起来更加有序,操作起来也更加的便捷。
解锁B端按钮设计10大密码
 
 
 
 
 
2、按钮排列视觉上要有主次
切不可一行按钮中出现多个高强调的按钮,Antdesign对这个也做了诠释,会对用户的行为进行错误的引导,也不利于聚焦。
 
通义这个页面虽然有多个选中的按钮,但是没有全部用高强调的按钮,只有强推荐的操作“开始录音”才用了强按钮,其它通过相对浅的颜色做了弱按钮选中处理,视觉上主次分明,信息主次表达上也清晰可见。
解锁B端按钮设计10大密码
 
 
 
 
 
3、不要在按钮中放置两个图标
当一个按钮同时兼顾两个交互动作的时候,一定要区分设计,不能赤裸裸的展示在一个按钮中,而不做任何区分。
解锁B端按钮设计10大密码
 
 
 
 
 
4、返回按钮宜放置在左边
具有返回意义的按钮,应该放在左侧,暗示其方向是回到之前,例如上一步。
解锁B端按钮设计10大密码
 
 
 
 
 
5、按钮文字不宜太长
简短的文字更易被用户阅读和记住,在一个按钮上最多不超过5个文字,重要的按钮一般
使用2~4个字。
解锁B端按钮设计10大密码
 
 
 
 
 
解锁B端按钮设计10大密码
 
 
❶ 用纯灰色文字的弱化按钮
 
❷ 用灰色边框+灰色文字的弱化按钮
 
❸ 用颜色边框+颜色文字的弱化按钮
 
❹ 用灰底+灰色文字的弱化按钮
 
❺ 用浅色底+颜色文字的弱化按钮
 
❻ 用纯颜色的弱化按钮
 
解锁B端按钮设计10大密码
 
 
 
 
解锁B端按钮设计10大密码
 
 
通过本篇文章的探讨,我们深入了解了B端按钮设计的九大核心要素。从按钮的基本定义到Antdesign的分类,再到尺寸、构成、作用、位置和颜色等细节,每一部分都是提升用户体验的关键。
 
按钮设计不仅关乎美观,更影响着用户的操作效率和满意度。
在UI界面中,遵循设计原则和注意事项,确保按钮既实用又具有吸引力,是每位设计师的职责。
 
希望本文能为设计师们提供有价值的参考,激发更多创新灵感,共同推动B端产品的交互设计向更高水平发展。
 
 
解锁B端按钮设计10大密码


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

B端基础 | 规范的做一套有特点的中后台ICON

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

 

我与ICON的设计好像有什么不结之缘。早在2017年我就写过一篇如果对抗APP中ICON设计同质话的问题。提出了自己的一些建议。而在之后的工作中也多次改版或设计过成套的APP应用中心的ICON和系统后台ICON库。ICON设计的经验那是不得不丰富的存在。

 

ICON,中文翻译为图标。是对象的图像表示,指用图形指代某些名词,如:打开、警告、爱、学校、山等。ICON,是上世纪九十年代伴随IT 产业出现的一个技术词汇,原指计算机软件编程中为使人机界面更加易于操作和人性化而设计出的标识特定功能的图形标志。

 

 

 

下面是我总结了这几年设计icon的经验结合大厂的后台规范。给新手设计师的一些建议,都是经验之谈希望能够帮到你。可以让你在设计的这条路上走的越来越轻松。

 

 

 

 

第一章 ICON的设计

 

那位美女设计师:啊!搞什么呀,B端设计师icon还有设计,你傻不傻呀。我给你分享几个现成的icon网站吧下载了就能用。
我:是的我也用现成的icon在很多的需求里。但是我更喜欢自己设计,自己去做。直接用现成的icon不爽吗。嗯当然爽呀。看是你要要知道做的更好的方法和可能性。不要总把自己当美工吧,我们可以是设计师的。

 

做为什么师我们大概都应该知道icon作为我们界面的重要构成元素,它会在很大程度上影响我们界面的风格。甚至会影响我们品牌的调性。所以一套符合我们设计风格具有我们品牌调性的icon是很有必要的。总之你想明白一个道理,你一整个屋子都装修好了,房间里独独到处都放了几把破椅子。不难受吗。

 

Ant design设计规范:图标是 UI 设计中必不可少的组成。通常我们理解图标设计的含义,是将某个概念转换成清晰易读的图形,从而降低用户的理解成本,提升界面的美观度。在我们的企业级应用设计范围中,图标在界面设计的诸多元素中往往只占了很小的比重,在调用时也会被缩到比设计稿小很多倍的尺寸,加上在图形素材极度丰富并且便于获取的今天,在产品设计体系中实现一套美观、一致、易用、便于延展的图标体系往往会被不小心忽略掉。Ant Design 相信一整套优质的图标对于设计质量的影响是非常巨大的,这考验着设计师的协作能力,以及对图形塑造的系统性思维,同时也能反映一个团队对于细节的追求。

 

 

1、中后台ICON的设计原则

 

中后台使用的icon大部分规范平台也好或者一有系统也好他们的设计原则基本是大同小异的。我的建议是如果你要设计一整套的icon图标。在设计之前确定自己icon的设计原则。这个设计原则可以依照自己的界面设计风格或期望的界面设计风格以及行业属性、自己品牌等去制定。

 

1-1、Ant design图标设计原则

 

Ant Design 的图标设计原则源自「确定」和「自然」,落实到图标设计领域,一共有四个。准确、简单、节奏、愉悦。

 

1-1-1、准确:

 

设计造型准确的图标(保持偶数原则,去小数点);选择表意准确的图标,不对用户的认知造成困扰。

 

 

 

1-1-2、简单:

 

在表意清晰准确的基础上,尽量保持图形的简洁,不做多余的修饰。

 

 

 

 

1-1-3、节奏:

 

挖掘构图中的秩序之美。

 

 

 

 

1-1-4、愉悦:

 

赋予适度的情感。在部分图标设计中,会适度的注入拟人化的元素,令图标具备生命力。

 

 

 

 

1-2、TDesign图标设计原则

 

Icon 作为 UI 构成中重要的元素,它一定程度上影响整体 UI 界面呈现出的风格,TDesign 初期提供一套适用于中后台场景的线性 Icon,以普适、通用的标准进行设计,风格契合默认 TDesign 的风格,线性、圆角。在TDesingv中设计原则为、从简、精确、适度

 

1-2-1、从简:

 

制作时保证参数的简化,尽量消除小数点以及非整数的角度。处理线条以及轮廓时删除多余的锚点,输出时应避免出现不必要的装饰,保持图标的简洁。

 

 

 

 

1-2-2、精确:

 

在设计时避免使用那些含义模糊的图形,当同个事物存在多个图形表述时,应选取最为流通的样式,必要时进行针对性的强化。在图标输出时也应遵守命名规范,精确的文字描述便于他人查找。

 

 

 

 

1-2-3、适度:

 

单个图标作为一个独立的视觉个体,在线条的疏密以及图形的搭配上要呈现适度感。在处理一些必要的高密度图标时也要考虑线条的节奏感,让其舒适不压迫。系列图标要遵守适度原则,将变化控制在一定范围内。

 

 

 

发现没大厂规范为了普世所以他们的图标设计原则定的基本都是一样的。只是换了一个词而已。而且他们的大部分原则和细节都是来自平面设计里的板式设计和标志设计里的形式美法则。

 

 

2、如何规范的设计ICON

 

设计一套优秀的图标设计应该简洁明了、直观性强、独特性好、可识别度高、适应性广、细节处理精细、可扩展性强,并且能够根据用户反馈及时改进和优化。如果要具备这些特征,那我们在设计的时候就要遵循一些特定的规范。

 

 

 

2-1、栅格

 

icon设计的栅格在大场的设计规范里面分为两种。一种ant design设计规范里面的那种栅格。另一种是TDesign设计规范里面的栅格。我之前在做的时候是直接呀的阿里巴巴示例图库的上传模板里面的栅格进行设计的不过。没有这设计规范里面的栅格好用。

 

 

 

2-1-1、Ant Design栅格

 

Ant Design 的系统图标都是按照 1024 x 1024 的画板进行制作的。

 

出血位: 在图标的设计过程中预留出血位的做法,可以预防某些造型的图标在具体应用时出现边缘被切掉的风险;同时在设计过程中,也为设计师把握图标间平衡留下了进退的余地。新版的设计规格在图形的外围预留了 64px 的出血位,多数的图标在设计中我们都不建议超过这个区域。

 

 

 

 

2-1-2、TDesign栅格

 

栅格作为图表绘制的底层结构,是一切属性设计的基础。线条的长短粗细、图标的大小比例等关键因素均在其基础上制定。图标常见尺寸为16*16;20*20;24*24;32*32这四种输出尺寸。这些尺寸均可以清晰的显示在常规的显示器上。TDesign 最终选择以16*16px 的尺寸作为图标绘制的统一栅格尺寸

 

 

 

我记得最早入行的时候画icon就用的这种栅格。但是我不太喜欢,因为在实际的设计之中会出现好多问题。当时的我是无法解决的。


2-2、轮廓与模板

 

面对各式各样的icon我们在上一步有了栅格,接下来就要处理在栅格里如何让形状不同的icon在视觉上大小是一致的,在视觉上是平衡的。所以转对不同形状的icon在栅格里所占的轮廓规范就产生了。基本这个轮廓都是一样的。因为他是一个很基础的东西。

 

 

但其实可能是我技术的问题。在过往的很多次设计中如果你完全按照这个轮廓去执行。做出来的icon你会发现其实在视觉上还是会存在问题的,我都会在做一次优化。不过这很大可能是我技术和设计能力的问题吧。

 

 

2-3、设计细节

 

即使有了规范,栅格轮廓等。但是往往我们在设计制作的时候还是会有很多的细节需要去处理的。这样我们的设计才会更专业。因为我用ant 规范比比较多所以。我们就一起看一下ant的规范里对icon设计细节的一些建议。

 

在ant的图标设计规范中,对icon图标进行了、形式感、韵律、平衡、辨识这几方面对我们在设计和制作icon可能遇到的问题给了一些建议。

 

Ant Design图标设计建议详情:https://ant-design.antgroup.com/docs/spec/icon-cn#%E8%BD%AE%E5%BB%93%E7%BA%BF%E4%B8%8E%E6%A8%A1%E7%89%88

 

3、ICON分类

 

以上的内容主要在探讨一类icon图标的设计。那就是中后台的图标设计。但其实icon图标是有很多的分类的。交互性图标、装饰性图标、说明性图标

 

3-1、交互性图标

 

这类图标主要用于应用程序的界面设计,它们可以向用户传递某种信息,引导用户执行特定操作,同时也允许用户向程序传递控制信息。例如,登陆注册按钮、开关按钮、数量按钮、点赞、转发分享等都属于交互性图标。

 

 

3-2、装饰性图标

 

这类图标主要用于提高页面设计性,它们可以加深个性化设计风格,提升用户线上体验感,迎合受众群的偏好,提升设计亲和度。例如,符合节日需求的线上活动呼应图标、个性化图标等都属于装饰性图标。

 

 

3-3、说明性图标

 

这类图标主要用于阐明信息,它们是区分不同功能或内容的视觉标记,简单地说,就是对功能的解释说明。例如,象形图标、隐喻图标、工具图标和混合图标等。

 

 

此外,根据图标的具体功能和用途,还可以将图标分为表意图标(又称解释性图标)和标识性图标。表意图标是通过原本不存在实物的符号表达某些特定的含义或操作行为,这些符号逐渐继承了一些象形符号的特性并不断演化。例如,“箭头”已经从最初的“弓箭”衍生为一种特定的表意符号。而标识性图标主要用于标识品牌、产品或服务,它们通常具有独特的设计风格和视觉效果,以便在市场上脱颖而出。例如,苹果公司的苹果图标就属于标识性图标。

为我以往的设计经验里大部分都是在做B端的设计和交互工作。在我的理解里图标就分两类。1、规规矩矩的ICON。2、花里胡哨的ICON。就这么简单。

 

 

 

 

第二章 实战我搞了一套ICON

 

再优秀的理论也只能是理论。实践才是检验真理的唯一标准。这不是我说的。这是老马(卡尔·海因里希·马克思)说的。所以就请大家进入我的实践过程吧。

 

 

 

1、需求背景

 

需要还是要从最初开始讲。我负责的SAAS平台要迭代换框架。然后对界面视觉交互、产品功能都迭代一个大的版本。这次设计部分的任务就我来负责。

 

因为是大的迭代嘛。所以这次icon设计的需求是跟着整个平台一起走的。你要设计新的视觉还用之前的那套老icon显示是不合适的。在者说那套icon的质量也是一个难以想象的存在。是开发直接从网上个个平台找的。所以这次这个平台的视觉迭代就有了搞一套适合我们界面和行业的icon图标。

 

 

这是我们SaaS平台的设计价值观

 

2、设计原则

 

因为是先有了界面,要做一套配合界面的菜单icon图标。我想我们的icon要符合整体页面的风格。不说给界面加分了,也不破坏我辛苦做的界面视觉。

 

结合我们品牌的logo图标的特点。让我们的icon也拥有独属于他们自己的丝带偶。把公司logo的设计特点加入到我们这次icon的设计原则里。

 

 

是的优美,是我们这一套icon的特点。也是从我们logo里提取出来的设计要点。然后把他运用到icon设计里。

 

3、规范的制定ICON的制作

 

规范的知道基本是使用的阿里巴巴矢量图库早期的那个上传图标模板的AI文件。为什么会选择使用这个呢。因为我们SaaS平台的所以icon都是从阿里巴巴矢量图库引用的。我要把我做的icon上传到阿里巴巴矢量图片他们使用,而不是直接切图给他们用。

 

 

在这套图标设计的时候,其实并没有完全的按照大厂的设计规范进行。在很多的细节上做了调整。为的是达到更好的效果。当然。也有很多遗憾。在很多的方面并不是很标准。在下次优化设计时,会更好的去执行制定的设计原则和设计规范。

 

 

 

第三章 拓展知识(标志设计浅谈)

 

之所以写这部分内容,是因为我觉得在平面设计里标志设计的知识对我们现在图标设计是很有用的。可以是图标设计本身就是适应了显示屏后的标志设计。如果你搞懂了标志设计的系统知识,那图标设计不就是手拿把掐的事了。标志设计就是杀鸡的牛刀。

 

一般我们说到标识设计可能大概览的就是会认为是品牌形象设计,也就是LOGO设计。是的我大学学的标志设计就是在讲品牌LOGO的设计。但我现在理解的标志设计可能意义更广泛。因为在很多的时候我是把标志设计的知识和原理来应用到其他的设计方面。

 

标志是品牌形象核心部分(英文俗称为:logo),是表明事物特征的识别符号。它以单纯、显著、易识别的形象、图形或文字符号为直观语言,除表示什么,代替什么之外,还具有表达意义、情感和指令行动等作用。

 

 

LOGO、标志、徽标、商标是现代经济的产物,它不同于古代的印记,现代标志承载着企业的无形资产,是企业综合信息传递的媒介。

 

 

1、标志设计怎么来的

 

标志的来历,可以追溯到上古时代的"图腾"。最初人们将图腾刻在居住的洞穴和劳动工具上,后来就作为战争和祭祀的标志,成为族旗、族徽。国家产生以后,又演变成国旗、国徽。

 

古代人们在生产劳动和社会生活中,为方便联系、标示意义、区别事物的种类特征和归属,不断创造和广泛使用各种类型的标记,如路标、村标、碑碣、印信纹章等。

 

到本世纪,公共标志、国际化标志开始在世界普及。随着社会经济、政治、科技、文化的飞跃发展,21世纪以来经过精心设计从而具有高度实用性和艺术性的标志,已被广泛应用于社会一切领域,对人类社会性的发展与进步发挥着巨大作用和影响。

 

 

2、标志的作用

 

随着“读图”时代的到来,标志以简洁、 独特、易识别的图形符号传达着特定的含 义和综合信息,成为人们相互交流和传递 信息、沟通情感、表达愿望的视觉语言。 特别是在注重品牌效能与品质的今天,标 志发挥着重要的作用。 标志最主要的功能是以其简洁、醒目、 美观的图形符号传递信息。

 

 

2-1、区分商品

 

标志能够表述某种组织、某项活动或某 企业品牌的性质、服务和宗旨。标志作为一种视觉识别符号,能有效 区别各种品牌给消费者的印象。也就是说, 它能够表述出个性特点,使其从众多同类 产品的标志中被区别出来。

 

市场上的商品花色、品种繁多。在商品的海洋里,消费者只能根据不同的 标志区别同类商品的不同品牌和不同生产厂家,并以此进行比较与选择。商业企业在经营商品时,有的 也用自己的标志表示各自的经营特色。标志的这种作用是其取得法律保护的主要依据,在国际贸易中, 这种作用也得到了普遍的认可。

 

2-2、树立形象

 

标志是现代经济的产物,它不同于古代的印记。现代标志承载着企业的无形资产,是企业综合信息 传递的媒介。对于企业而言,不仅要表明“我是谁”,还要说明“我怎么样”。标志通过在不同场合、 不同载体的反复出现,使人们在看到标志的同时,就能自然联想到产品

 

可口可乐欧洲太平洋集团公司前总裁乔戈斯曾经说:“可口可乐成功的原因很简单,许多制造商只 热衷于为消费者提供产品,而大多数消费者则需要产品的牌子。请记住,一听可口可乐不只是饮料,它 还是一个朋友。

 

2-3、品牌价值

 

如今的社会,享用名牌似乎成为身份的象征、地位的体现和个人魅力的表现,这就使标志有了某种 精神的力量,这种精神力量代表着品牌的价值。

 

名牌价值是无形资产,无形资产的价值远远高于企业的有形资产价值和年销售额。“可口可乐”“百 事可乐”的品牌价值都达到上百亿美元。标志在各个国家都受到法律的保护,从这个意义上说,名牌标 志是企业的无价之宝,丝毫也不为过。

 

美国可口可乐公司的一位经理说,即使可口可乐工厂一夜之间被毁坏殆尽,公司也能凭借“可口可乐” 标志的声誉从银行立即贷款重建工厂。可见,对拥有名牌标志的企业来说,标志就是企业发展的一种依 托与保证,是一笔巨大的无形资产。

 

2-4、美化产品

 

标志作为企业和产品形象的象征,它用无声的具有美感的图形语言宣传着产品的质量与特色。标志 设计的好坏直接影响企业和产品的信誉度。成功的标志不仅代表了产品本身,也增强了产品的魅力。

 

著名的香奈儿(CHANEL)的标志以简约明快的图形和相得益彰的字体搭配给人以典雅、高贵之感。 香奈儿于 1913 年由创始人加布里埃·可可·香奈儿(Gabrielle Chanel)在法国巴黎创立,其标志是由两 个背向的“C”重叠而成,图形平衡对称,充满温文尔雅、端庄聪慧之气,

 

3、标志的创意原则

 

标志的本质是信息传播,这是现代的 标志设计的核心。标志的设计创意应该从 信息入手,从功能需要出发。需要告诉大家的是什么,而不是把形式作 为设计的唯一出发点。

 

3-1、独特性

 

在标志设计中,有的人喜欢造型简单的,这得到了大部分人的认可;而有的人则认为在简单中可适 当复杂,这要取决于实际的用途。不论简单或复杂,需要把握一点:标志需要具备的特质是独特。没有 哪个企业甘愿平凡,大多数企业都在竭尽所能地建立自己独特的企业文化和市场经营特色,所以在设计 标志时必须深思熟虑。

 

独特性是标志设计的最基本要求。标志的形式法则和特殊性就是具备各自独特的个性,不允许丝毫 的雷同。这就要求标志的设计必须做到独特、别致,追求创造与众不同的视觉感受,给人留下深刻的印象。

 

3-2、醒目

 

醒目的设计是所有标志希望达到的视觉效果。优秀的标志能够吸引人,给人以较强的视觉冲击力。 因为只有引起人的注意,才能使标志所要传达的信息对人产生影响。在标志设计中,注重对比、强调视 觉形象的鲜明与生动,这是产生醒目性的重要形式要素。

 

3-3、简单容易记忆

 

标志要易于识别、记忆和传播。这并不是说简单化,而是指以少胜多、立意深刻、形象明显、雅俗共赏。 通俗性强的标志具有公众认同面大、亲切感强等特点。对于商标而言,一个易记的商标形象首先要有一个与众不同的响亮、动听的商标名称,以好的商标名称为基础,综合考虑商标的特点,选择最佳方案, 再进行具体的图形设计。

 

3-4、标志颜色

 

标志色彩的配置一般有三种基本方法;

 

-是原色配合
原色的颜色单纯、强烈、鲜艳夺目,艺术效果和传播效果显著。

 

-是同类色配合
只选择一种颜色,采用依靠色彩明亮度变化的办法,如用桔红、桔黄、中黄、浅黄进行搭配,形成由浅入深的过度色视觉,能表达出动态感。

 

-是补色配合
这种色彩配置,对比鲜明,图形格外醒目鲜艳,能给人以很强的视觉冲击效果。

 

4、标志设计形式美法则

 

标志设计也是艺术设计的一种。所以他也同样适用于我们设计里的形式美法则。用这些法则去设计你的标志或ICON让他们的信息传递更准确。视觉表现更优秀。

 

形式美法则
标志设计是一种视觉艺术,人们在观看一个标志图形的同时、也是一种审美的过程。在审美过程中,人们把视觉所感受的图形,用社会所公认的相对客观的标准进行评价、分析和比较,引起美感冲动。

 

4-1、变化与统一

 

任何一个完美的标志图形必须具有统一性,这种统一性越单纯,越有美感。但只有统一而无变化,则不能使人感到有趣味、美感也不能持久,这是因为缺少刺激的缘,变化是刺激的源泉,有唤起兴趣的作用,但变化也要有规律,无规律的变化,然起混乱和繁杂。因此变化必须在统一中产生。

 

4-2、对称于均衡

 

均衡是在不对称中求平稳。均衡可分为调和均衡和对比均衡两大类,调和均衡是指同形等量,即在中轴线两面所配列的图形的形状、大小、分量相等或相同。除图案造型的均衡外,还有量的均衡、色的均衡,在标志图形设计时必须相应考虑,以追求标志视觉张力。

 

4-3、节奏与韵律

 

节奏是韵律的条件,韵律是节奏的深化,节奏也就是“律”,这种律不仅表现在音乐上,而且反映在其他方面,当物体失去均衡则会引起运动。此种运动如有规律,则称之为“律”。在标志图形设计中,如果将线的长短、粗细、曲直、方位等进行不同程度的变化和巧妙组合,便会创造出不同感的“律”的形式,归纳起来分为:循环体、反复体及连续体。

 

4-4、调和于对比

 

在标志设计中,对比与调和应用极广,如在大小、方向、虚实、高低、宽窄、长短、凹凸、曲直、多少、厚薄、动静以及奇数与偶数的对比。对比是标志图形取得视觉特征的途径,调和是标志完整统一的保证。

 

4-5、比例与尺度

 

任何一个完美的图形都必须具备协调的比例尺度。在标志图形中常用的比率有整数比、相加级数比、相差级数比、等比级数比、黄金比等。标志设计的形式美法则,不能孤立和片面地理解,因为一个美图形的设计,往往要综合利用多种法则来表现。这些法则是相互依赖,相互渗透,相互穿插、互相重叠、相互促进的,随着时代的变化,审美标准、设计手法也在不断发展。

 

 

5、标志发展趋势

 

近年来,标志设计发展越来越成瘦。总的发展趋势是由复杂到简约、具象到抽象、色彩更多样话、标志的发展是一个设计相互交融、设计风格的多样化过程。设计手段是次要的,目的才是第一位的。更注重的应使其商业性。

 

以下标志设计趋势内容引用自标志情报局编译的作者为Bill Gardner是logolounge.com的创始人的《2023标志设计趋势报告》。https://www.logonews.cn/logo-design-trends-for-2023.html

 

我们每年收到的所有标志清晰解读并整理成这份报告并不是一项容易的工作。总共超过30,000个标志,对我和一群杰出的设计师来说,这就像是世界上最大规模的配对游戏。最初,我们归纳出大约60-70个组别,然后将它们进一步划分为具有最大影响力的15个类别。

我只是通过对提交的30,000多个标志进行彻底分析(还有国际上每个重要品牌的更新和重塑)后呈现的报告。因此你要了解的是,就像任何气象学家会告诉你的那样,他们不能保证天气预报的准确性。同样,我们也无法总是预测设计师将向哪个趋势方向发展,这就是这份报告能让我们保持警惕并感到有趣的原因所在

01、Wildflowers(野花);02、Bloblend(流动混合);03、Fades(逐渐模糊);04Foreshort(透视);05、Thrust(推进);06、Spirals(螺旋);07、Sonics(声波);08、WireForms(线框);09、BallCaps(球形顶端);10、NameFills(名字填充图形);11、Stretchers(元素拉伸);12、NeoStencil(喷漆模版艺术);13、HalfAster(半星号);14、Double Os(双圆环);15、Ritz(饼干);

 

重新读了一遍标志设计的内容。果然受益匪浅的感觉。还是要时常温故而知新的。学习了大厂的ICON设计规则也是很有收获的。



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

我们是如何搭建企业级B端设计规范的?

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

今天主要是和大家分享一下我们公司内部建立设计体系的方法和实践案例,希望大家能指正与交流~
我们团队就是最可爱滴~~~
我们是如何搭建企业级B端设计规范的?
 
 
B+Design System是以当前互联网主流B端框架为基础,并结合合公司特定业务场景而打造的具有"公司品牌特色的B端后台设计体系"(以下简称为"B+Design"),包含了有关颜色、字体、icon、栅格、版式、间距、数据可视化等设计规范指南,组件层提供 30+ 不同的组件,包括它们的不同状态,形成的模式,以及应用的产品。
 
 
一、为什么要建立 B+Design 设计体系?
随着公司快速发展,目前公司用于业务支撑的后台管理系统"品类繁多且零散独立",需构建一套"灵活、专业"的设计体系来统一设计生态风格及交付标准。
 
当前痛点:
沟通时间成本高
:跨部门的项目实施过程中流程混乱,产品、设计、开发、测试等岗位在工作对接时沟通低效且问题耦合度高;
 
交付质量差
:无项目统一交付标准,不同项目质量产出不稳定,项目质量高度依赖于各个环节负责人的个人能力;
 
做不好设计协同
:各个系统级页面架构、组件、样式野蛮生长,缺少规范范导致样式及体验不统一;
 
研发效率低
:组件重复开发,维护成本也高,无基础沉淀能力;
 
我们是如何搭建企业级B端设计规范的?
 
 
 
 
二、构建 B+Design 的思路
1、设计目标
伴着公司业务发展,开源的组件库已无法满业务需要,搭建一套更适合公司业务的UI组件库,势在必行;设计系统承载着作为一个沉淀基础能力的支持平台,同时也具有赋能多多边业务、多种角色的重要作用和价值;
 
标准统一:
重新定义标准化的产品用户体验,统一品牌形象、设计标准,降低决策成本,提高产品迭代效率及质量;
 
降本增效:
基础能力沉淀,规范设计元素,减少重复性设计,且提高代码可复用性,避免重复开发,降低时间及人力成本;
 
高效协同:
降低不同设计师或上下游同事之间的沟通成本,提高团队之间的协作力,提升团队整体效率;
 
设计延展:
通过设计规范建立,满足组件在不同场景及业务中的延展和扩充,从而实现全链路、多场景的高效输出;
我们是如何搭建企业级B端设计规范的?
 
 
 
2、设计原则
为了更适用于企业级产品的开发和使用,通过大量中后台场景的的实践,B+Design设计系统提炼出以下设计原则:
清晰:
效率提升是务实之基。设计应减少不确定因素,降低用户判断次数,明确信息层级导向,使操作目的更清晰;清晰的设计体系让产品操作直观、流程一步到位;信息传达清晰表意明确,助用户短时间内快速理解并作出判断。
 
高效
设计效率:可快速生成效果图,也可使用Sketch,组件库,页面模板等快速生成效果图和业务解决方案来提高产品体验一致性;
开发效率:组件均已代码封装;并提供体验评估标准以供参考,保证产品质量;
使用效率:系统常用组件(如批量搜索和操作)提高用户工作效率;
工作协同:减少产品开发流程中各个角色之间的沟通成本;
 
标准化:
样式规范、操作流程、呈现高度一致的设计标准,能体现产品的品牌感与信赖感,实现品牌感的系统传达,还能降低用户反复学习成本,给用户带来品牌信赖。
 
创新:
通过对当前市场主流设计系统开展竞品分析,结合FS业务场景对各个组件进行统一规范,打造符合FS品牌特性的产品设计体系;
我们是如何搭建企业级B端设计规范的?
 
 
 
3、原子化组件思维
原子最早是由英国化学家/物理学家约翰·道尔顿提出的,继承古希腊原子论和牛顿微粒说,提出的原子论。化学元素由不可分的微粒(原子)构成的,它在一切化学变化中是不可再分的最小单位。
原子理论同样适用于我们的设计系统中:我们的页面是由原子(最小单位设计元素)、分子(基础控件)、组织(基础功能组件)、模版(业务定制组件)、页面构成的;
我们是如何搭建企业级B端设计规范的?
 
 
注意:设计组件不是把UI元素堆积到一个地方,然后各处集中引用用这么简单。组件化的工作方式信奉独立、完整、自由组合,目标就是尽可能把设计与开发中的元素独立化,使它具备完完整的局部功能,通过特定规则自由组合来构成整个产品。
 
 
三、构建 B+Design 的步骤
基于前期的思考,接下来我们的任务是对整个体系的制定进行任务规划,以下是四大步骤:
我们是如何搭建企业级B端设计规范的?
 
 
 
第一步:现状分析
通过现状所有系统进行设计走查及用户问卷调研,收集用户建议及观点,明确规范需要优化的方向。
我们是如何搭建企业级B端设计规范的?
 
 
 
第二步:框架梳理
通过三大竞品设计体系(阿里,字节,腾讯)框架的梳理,结合现有设计页面,分析业务场景和竞品框架,确定FS的最小元素,整理和归类自己的组件框架。
最终B+Design组件框架主要分为八大板块,分别为:基础样式、通用、布局、导航、数据录入、数据展示、反馈、其他,共50+组件;
我们是如何搭建企业级B端设计规范的?
 
 
 
第三步:设计组件和规范指南
针对已梳理好的框架展开组件设计工作,同时为每个组件编写相应的规范指南,为使用者提供场景参考。
1、设计组件
组件设计是设计规范中最核心,工作量最大的一个环节。我们可以将它拆解成几个部分,先做出基础组件,再基于基础组件和业务需求抽象设计业务组件,最后抽象成页面模板。
我们是如何搭建企业级B端设计规范的?
 
 
 
  •  
    基础组件
说到基础组件,这就是前面所提到的原子化思维,在进行设计系统的构建时,我们期望达到这样一种效果:当对任何一个原子进行改动时,所有依赖于该原子的部件都能够全部自动更新。唯有满足这一条件,设计系统所设想的提升效率、解放生产力的目标才能真正得以实现。
我们是如何搭建企业级B端设计规范的?
 
 
我们是如何搭建企业级B端设计规范的?
 
 
我们是如何搭建企业级B端设计规范的?
 
 
我们是如何搭建企业级B端设计规范的?
 
 
 
 
  •  
    业务组件
在构建完基础组件后,可以根据业务需求,将部门内使用频率较高的组件进行评估,抽象成业务组件。
例如我们用的比较多的就是人员选择器、附件下载、文本编辑器等等...
我们是如何搭建企业级B端设计规范的?
 
 
  •  
    页面模板
完成基础组件和业务组件的构建工作后,我们可以依照全局说明,通过组件搭建页面模板。页面模板不仅能够切实提升组件的使用效率,而且能提供出色的组件使用示范作用,增进设计说明和组件的结合。
 
我们是如何搭建企业级B端设计规范的?
 
 
我们是如何搭建企业级B端设计规范的?
 
 
我们是如何搭建企业级B端设计规范的?
 
 
我们是如何搭建企业级B端设计规范的?
 
 
我们是如何搭建企业级B端设计规范的?
 
 
 
2、规范指南
在后台设计体系中,“规范指南”是一套为了确保设计的一致性、可用性和可维护性而制定的规则和指导原则。将所有的规范内容整理成详细的文档,配以示例和说明,方便团队成员查阅和参考,此步骤也工作量巨大。主要分为七大模块:
我们是如何搭建企业级B端设计规范的?
 
 
我们是如何搭建企业级B端设计规范的?
 
 
 
 
第四步:效果验证
“B+Design System”建立成功后在"多个业务系统"中进行应用,通过实际业务反馈来进行效果验证。
我们是如何搭建企业级B端设计规范的?
 
 
 
四、升级迭代机制
一个统一的设计语言不应该仅仅是一组静态规则和单个组件构成成的,它应该是一个不断发展的生态系统。需要我们在产品实践中不断优化、迭代,让组件更加贴合场景,更好的服务业务。
我们是如何搭建企业级B端设计规范的?
 
 
以上就是我们公司内部构建整个设计体系的全过程啦~~~~~
 
在完成设计规范的构建后,我们联合了产品经理和前端工程师,帮助每个环节的人员快速搭建产出物。
 
对于产品经理
:我们帮助产品搭建了一套Axure元件库,该元件库与设计组件库一样,可以快速搭建原型,提高了产品的工作效率,与设计师、开发的沟通也更加顺畅。甚至对于简单的页面产品可以自己直接出原型给开发,开发直接沿用写好了的组件库。
 
对于前端
:辅助前端建立前端组件库,这样减少了设计走查的问题,对于以前各种样式问题需要调整,现在基本都是写好了的组件,可以有更多时间去写交互和提高系统的性能。
 
 
 


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

一篇文章带你秒懂图标设计

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

从1973年第一代图形用户界面的呱呱落地到今天百家争鸣,图形用户界面竟然已经走过了50年的发展历程,更神奇的是,原来UI设计这个职业的起源也是因图标的起源而起,后来图标成了UI设计中最重要的视觉元素之一,接下来,我们一起走进图标的世界,了解它神秘背后的故事。
 
 
一篇文章带你秒懂图标设计
 
 
 
目录
一、 图标的起源
二、 图标设计的定义
三、 图标的种类
四、 图标设计8大原则
五、 图标的6大作用
六、 提升图标设计的4个小技巧
七、 5个图标网站推荐
八、图标的命名规范
 
 
 
一、图标的起源
在计算机发展的早期,用户界面主要是基于命令行的,由字母和数字组成,操作复杂且对普通用户不友好,用户需要记住大量的命令和参数才能使用计算机系统。
 
随着计算机技术的发展,为了使计算机更易于使用和理解,程序员开始开发图形化的元素来代表各种操作和功能,图标概念由此诞生。最初的目的是帮助新手用户能够更方便地组织文件和执行任务,而无需记住复杂的命令。
 
 
1.施乐公司的开创性工作
1973年,美国施乐公司推出了第一批真正意义上具有图形用户界面的个人电脑——Xerox Alto。虽然这款电脑仅生产了约 2000 台,但它为后来的计算机图形界面发展奠定了基础。它的界面中已经出现了一些简单的图标,如垃圾桶、计算器、打印机、文件和文件夹等,这些图标成为了后来图标设计的雏形。
一篇文章带你秒懂图标设计
 
 
 
 
2.苹果公司的推动
1979年,史蒂夫·乔布斯参观了施乐公司的原型机后,深受启发,决定开发自己的图形界面计算机。1983 年,苹果公司推出了Apple Lisa,这是苹果首台图形界面计算机,其界面中的图标设计得到了进一步的发展。
在这一时期,现代图标设计之母苏珊·卡尔担任苹果的创意总监,她设计的像素风格图标简洁、清晰、易于理解,具有很高的视觉平衡性,即使在今天看来也显得活泼有趣。
 
一篇文章带你秒懂图标设计
 
 
 
 
3.微软的跟进与发展
1985年,微软发布了 Windows 1.0操作系统,这是微软在图形用户界面领域的重要尝试。该系统中的图标设计也借鉴了苹果的一些理念,但也有自己的特点。随着 Windows 操作系统的不断发展和普及,图标设计也逐渐成为了用户界面设计中不可或缺的一部分。
 
一篇文章带你秒懂图标设计
 
 
 
 
 
二、图标设计的定义?
图标设计是一种设计活动,主要是创造出用于代表物体、动作、概念等各种元素的图形符号。
 
这些图形符号具有简洁性,让人能快速识别。比如手机桌面上的微信图标,用两个对话气泡的简单图案就代表了这个软件,让人一眼就能明白。图标设计在很多领域都有应用,像软件界面、网站、移动应用等,能够为用户提供视觉引导,方便用户操作。
 
一篇文章带你秒懂图标设计
 
 
 
 
 
三、图标的种类
图标在提升产品气质上起着不可估量的地位,在界面中往往起着画龙点睛的作用,无法想象在一个产品中,没有图标,界面会显得多么的无聊和乏味,但是图标也不能总用一种形式的图标,这样也会百看让人生厌,因此也就衍生了图标的多样性,以下是我整理的常见图标类型:
 
1、从视觉表现上,有以下12大类图标
一篇文章带你秒懂图标设计
 
 
 
 
2、从功能上,有以下6大类图标
❶工具图标
工具图标在B端项目中应用很广泛,几乎每个组件中都会包含这类图标;比方说腾讯文档上方的文档编辑图标就是属于这种类型,它的装饰性很小,更多是功能的承载。
 
一篇文章带你秒懂图标设计
 
 
 
 
❷装饰图标
在一些软件产品中,会重点强调品牌、情感化设计,大量启用3D化的装饰图标来提升界面的质感。
比方说腾讯电脑管家下面的这个界面设计,它就运用了大量具有装饰性的图标来传递信息表达品牌,并且中央还采用腾讯电脑管家的IP形象作为切入点,萌萌的形象无形中拉近了与受众之间的距离。
 
一篇文章带你秒懂图标设计
 
 
 
 
❸启动图标
在项目中,当用户想表达品牌时,经常会把LOGO图标做成动态图,来更好的传递品牌理念,比方说联想电脑管家,在启动页时,就运用了动态启动图标,同时下面还附带了一个slogan的文字动效,很好的向用户传递了安全的理念。
 
一篇文章带你秒懂图标设计
 
 
 
 
❹ 进程提示图标
在软件界面中,经常也需要进程的提示,这时候图标就可以起到这样的作用,比方说腾讯电脑管家在清理垃圾时,图标里面的风扇就一直在转,寓意当前清理工作正在进行中。
 
一篇文章带你秒懂图标设计
 
 
 
 
❺ 状态提示图标
软件在运行过程中难免会出现bug或者内容为空的时候,这时候状态提示图标就尤为重要,可以大大减轻人们的焦虑情绪。
 
一篇文章带你秒懂图标设计
 
 
 
 
❻ 增加界面趣味性的图标
图标不仅在理解和使用上给人们提效了,而且有时添加动效的图标还能给人带来丝丝惊喜和愉悦。
比方说联想的这个动态加载图标,看着就很有趣,让人忍不住多欣赏一下。
 
一篇文章带你秒懂图标设计
 
 
 
 
 
四、图标设计8大原则
虽然现在AI盛行,很多酷炫的效果可以用AI实现,但是一些让图标看起来更加专业精致、耐看的秘密我们还是需要知道的,了解这些设计原则,我们可以事半功倍,当AI生产有偏差时,我们自己可以优化、修复和调整。
 
 
1、大小统一
图标大小统一,就是一组图标放置在一起,图标大小要看起来差不多,不能忽大忽小,比方说这组图标的第三个图标,电脑图标明显过高,跟其他图标放在一起就显得不是那么的协调美观和统一。
一篇文章带你秒懂图标设计
 
 
在大小统一这方面,我们记得就是几何图形它们有视觉差,有的时候并不是说尺寸一样,大小就一样了,比方说下面这组图形,左边的这组它们高度一样,可是看起来大小并不太一样,明显中间的三角形显得小;右边的这组,三角形比左右两边的都要高,可是它们放在一起看起来大小就是差不多的,这就是几何图形带来的视觉差,就是我们在做图的时候,要记得多去感受,设计中的美很多不是用1+1=2能解释清楚的,它就是一种感受,放下心中的浮躁,我们还是能感受到它们之间的区别,这种美也没那么玄乎,只要用心,一定可以做出大小一致的图标。
 
 
一篇文章带你秒懂图标设计
 
 
 
 
 
 
2、圆角统一
圆角统一,就是图标之间有相同造型,然后又都有圆角的,那么他们就要保持相同的圆角曲度,比方说下面这组图标,图标的外形都是正方形且它们都带有圆角,可是它们的圆角曲度却明显不一样,这样就看起了不够规范和专业。
一篇文章带你秒懂图标设计
 
 
 
 
3、风格统一
界面中同样功能的图标,样式和风格需要保持一致,比方说这组图标样式,风格就保持着高度的一致,都是用的玻璃质感的磨砂材质。
一篇文章带你秒懂图标设计
 
 
 
 
4、角度统一
这组扁平化图标,在右边相似的角度都叠加了一个小色块,增加了图标的层次感,相同的角度也增加了图标的一致性和系列感。
 
一篇文章带你秒懂图标设计
 
 
 
 
5、粗细统一
图标的粗细要统一,这样图标就会看起来比较精致,比方说下面的这组图标,图标外框线都是用的3px,图标里面的线都是用的2px,图标的粗细都保持一样的粗细规律,这样的图标看着也是同样的美观和一致。
一篇文章带你秒懂图标设计
 
 
 
 
6、疏密统一
下面是一组类似于插画风格的图标,图标的风格是布线比较密集饱满,而三个图标都遵循了这样的原则,看起来出奇的统一,所以它们看起来像是一组成套图标。
一篇文章带你秒懂图标设计
 
 
 
 
7、透视统一
当设计的图标是立体时,要注意它们的透视要统一,就像下面的这组2.5D图标,它们的设计透视就保持着高度的一致。
一篇文章带你秒懂图标设计
 
 
 
8、易识别
图标的优劣首先取决于其能否让用户一目了然地理解其代表的意义,这是很重要的图标设计原则。
下面的这组手机主题图标,识别性就非常的高,简洁且好理解。
一篇文章带你秒懂图标设计
 
 
 
 
 
五、图标的6大作用
图标在界面设计中扮演着至关重要的角色,它们遍布于应用程序的各个角落。无论是导航栏、工具栏还是标签栏,亦或是首页、详情页、个人中心页,功能图标都随处可见。图标的主要作用在于传达信息,相比文字,它们能更直接地传递概念,并且能够为用户的视觉体验增添乐趣。
 
1、提升界面的使用效率
功能图标常以简洁的图形呈现,它们便于用户识别和记忆。这种设计让用户能够迅速定位到所需的功能,无需耗费时间阅读文字说明或浏览冗长的菜单选项,大大提升了界面的使用效率。
 
华为云的这个界面,文字信息很多,因为有了图标的存在,人们寻找起来特别高效,能高效定位到想要的信息。
 
一篇文章带你秒懂图标设计
 
 
 
 
2、增加用户的满意度
图标不仅可以提升界面使用效率,还能提升用户的体感和满意度,精美的图标让人看着都是赏心悦目的,就像我们在大街上看到一个美女,都忍不住多驻留一伙一样。
 
华为云这组精美的图标动效就给了我很大的视觉享受,图标设计精致,配色舒适,还有动效,给足了用户满足感。
 
一篇文章带你秒懂图标设计
 
 
 
 
3、减少人们认知的成本
图标很多的造型都来源于生活,来源于我们熟悉的事物,在界面中运用我们熟悉的图形会大大降低人们的认知成本,也会让更多人产生共鸣,它的传达作用不受语言和国界的束缚,是一种高效的界面表达语言。
 
华为云的这组图标就是运用了人们日常生活中非常熟悉的元素,共鸣感很强,人们学习和理解的成本很低。
 
一篇文章带你秒懂图标设计
 
 
 
 
4.提升品牌形象
仔细观察会发现,在生活中有很多的软件产品,会把企业的LOGO融入到日常产品的图标设计中,大大提升了品牌的一个曝光度。
 
腾讯云就有这样的小心思,它会把腾讯云LOGO融入到banner图标设计中,传递了信息,同时也加强了品牌的曝光。
 
一篇文章带你秒懂图标设计
 
 
 
 
5、图标可以增加界面的丰富度
有图标的界面,页面看起来丰富度更高,层次感更强,信息表达上也会更加的清晰整洁。
 
360AI办公这个界面之所以看起来这么丰富,很大原因是在于图标的应用,界面中有大图标、小型面图标,还有线性小图标,有对比,整个页面就看起来丰盈了不少。
 
一篇文章带你秒懂图标设计
 
 
 
 
6、减少界面的枯燥感
千篇一律的文字,难免会产生枯燥感,让人不愿多驻留;图标多彩的配色以及Q萌的造型会让人心生愉悦。
佐糖的这个界面,若不是有图标的润色,光只有功能点和文字介绍,估计会乏味不少,但是有了多彩图标的加入,瞬间氛围感都热闹了不少。
 
一篇文章带你秒懂图标设计
 
 
 
 
 
六、提升图标设计的4个小技巧
1、大量临摹,刻意练习
任何一项技能的获得,最开始都离不开临摹,作为刚接触UI设计的职场新人,可以先从临摹入手,先临摹简单的,然后循序渐进,临摹难度大点的,这样图标设计能力也会慢慢提升。
 
一篇文章带你秒懂图标设计
 
 
 
 
2、多积累好的样本
想要绘制好看的图标,首先要见过好看的图标,所以我们日常要养成多收集好图标好设计的习惯,这样当面临新的需求设计时,也不至于手忙脚乱,不知如何下手。
一篇文章带你秒懂图标设计
 
 
 
 
3、学会分析
看到好看的图标设计时,我们要学会分析,这组图标好,它好在哪,哪里打动了你,你分析了这些,你自己在设计的时候也会不自觉的运用到其中的智慧和思路,这样我们就可以随时原创出符合自己需求的图标设计来。
一篇文章带你秒懂图标设计
 
 
 
 
4、明确目标与受众
目标受众不同,他们对图形的期望也会不一样,比方说在设计儿童产品界面和B端产品界面时,所用的颜色和形状都是有考究的。
 
儿童类产品的图标设计,形状会比较圆润,色彩也比较多彩;但是B端类产品的图标设计用色就会很克制,形状也不会过于圆润。
一篇文章带你秒懂图标设计
 
 
 
 
 
七、5个图标网站推荐
1、Iconfont
(https://www.iconfont.cn/)
iconfont是阿里巴巴的图标库,应该也是受众最多的一个图标下载网站,给我们平时工作提效不少,造福了不少的设计师。
一篇文章带你秒懂图标设计
 
 
 
 
2、IconPark
(https://iconpark.oceanengine.com/)
IconPark是字节跳动旗下的一款图标下载网站,它可以在线把一个图标实现多种风格的切换,线性、面线、线面结合,并且线的粗细大小可以调节,非常的方便。
一篇文章带你秒懂图标设计
 
 
 
 
3、Ikonate
(
https://ikonate.com/
)
Ikonate是一款可以在线编辑的图标网站,涵盖了常用的一些图标,可以调节线条的粗细和大小,导出的格式是SVG。
一篇文章带你秒懂图标设计
 
 
 
 
4、Iconfinder
(https://www.iconfinder.com)
Iconfinder的优点,我觉得是造型够丰富,满足你有时候无法脑补的痛点。
一篇文章带你秒懂图标设计
 
 
 
 
5、Iconduck
(https://iconduck.com/)
Iconduck的优点是有273,858个免费的图标库和插画库供大家选择,储备够丰富。
一篇文章带你秒懂图标设计
 
 
 
 
 
八、图标的命名规范
图标一般有四种状态,正常normal (nor)、高亮highlight (hig)、选中selected (sel)、不可用disable (dis)四种状态,一个好的命名习惯会给自己的合作搭档带来很好的体验,通常在写界面的时候,前端都是用英文对元素进行命名的,这里我列举一下我经常合作同事的一个命名规范,供大家参考:
模块-类别-功能-状态
例如:Nav_button_message_sel
 
一篇文章带你秒懂图标设计
 
 
 
 
 
总结:
在深入探索了图标设计的丰富世界之后,我相信大家未来能够根据不同的场合挑选出恰当的图标风格和样式。通过持续的总结和归纳,我对图标设计的理解也变得更加深刻。虽然这份总结可能还有待完善之处,请大家多多海涵,期待在下一篇文章中再次与大家相见。
 
 
 
 
 


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

没想到,B端搜索功能设计还有这么多考究!

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

搜索框的设计并不简单,很多的细节需要设计师去注意和思考的。下面总结一下我在设计搜索框的经验,分享给大家。

 

 

 

 

你可能认为,搜索不就是一个矩形框+放大镜图标再加一个占位符不就搞定了吗?

 

经过多年的设计工作频繁设计搜索功能后,我发现在不同类型的产品中搜索框的交互方式、视觉样式都有所不同,且用户在搜索前、搜索中、搜索后都需要注意用户在搜索各个流程中的可能操作,包括正向流程、反向流程。

 

搜索框的设计并不简单,很多的细节需要设计师去注意和思考的。下面总结一下我在设计搜索框的经验,分享给大家。

 

友情提示:文章尾部有福利相送,不要错过~

 

 

 

 

 

搜索是用户将查询的信息输入搜索器中,搜索引擎就会在约定的规则下将获取到的信息反馈给用户的过程。

 

搜索是B端产品中非常重要的一个功能模块,通过搜索框用户可以快速找到或者筛选出自己想要的内容,在引导用户走向方面起到了绝对性的作用。

 

 

1、用户分层

 

体验设计中有个概念叫用户分层,即便是同一个页面,我们也需要去细分不同的场景对用户做分层,为不同的用户做设计,搜索功能就是最好的为有明确目标的用户分层的设计。

 

搜索功能的用户分层可分为几种场景:

  • 有明确想搜的内容并记得所有关键词
  • 有明确想搜的内容但记不清所有关键词
  • 无明确想搜的内容

搜索首先要确定哪几个字段可以被搜索到,名称?编号?等等...

 

有明确目的型用户在进行了搜索这个行为后,便生成了搜索历史。因此,我们可以通过挖掘用户搜索行为背后的目的,来分析为什么使用不同的布局。

 

模糊搜索使用的频率居多,毕竟有时候用户不一定可以精准的记住想要搜索的准确信息。不过也不是绝对的,两者皆可选择,可根据产品场景选择。

 

 

2、搜索的作用

 

 

 

 

 

2.1 降低用户的行为门槛

 

搜索功能可以简单地输入,快速输出,只要几个关键字就可以获得符合用户需求的内容,将原有的用户行为成本转移给系统,从而让使用体验更加快捷、轻松。

 

同时语音输入和拍照搜索进一步降低了用户行为门槛。

 

2.2 减少用户操作,缩短行为路径

 

搜索功能可以帮助用户快速定位信息,从而提高了用户对内容的触达效率。常见的例子就是:bi r用户有明确的购物需求时,不需要一步步点击商品分类,选择商品类型、品牌等信息,就可以快速直达自己所需的商品。

 

所以,搜索框的体验如何,决定着B端产品解决问题的能力、效率以及用户的使用频率。

 

好的搜索框一方面能帮助用户节约时间成本,让用户在大量且复杂的信息中筛查所需目标,提升用户体验;另一方面,还能协助产品收集用户行为目标并做好数据埋点,为后期的更新迭代提供强有力的依据。

 

除了设计方式外,搜索还涉及到结果信息的数据匹配规则,受到算法精准性、商业化干预程度的影响,设计师同样需要关注搜索结果如何更好地匹配用户的精确搜索、模糊搜索需求,以从信息设计层面提升用户体验。

 

 

 

 

搜索流程,即搜索前、搜索中、搜索后的页面跳转以及搜索框形态的变化。

 

对应的就有:搜索入口——搜索推荐页——搜索联想页——搜索结果页——搜索结果页返回。

 

 

 

 

 

设计师想要设计流畅的搜索体验是无法避开梳理搜索流程的,考虑完整的搜索链路和用户关键体验路径,并且设计出对应的所有细节,将搜索功能的价值发挥到最大化。

 

对于搜索系统来说,整个流程可以分为三步,分别是:

  • 理解用户搜索意图
  • 召回内容
  • 排序内容

 

 

 

B 端业务中搜索使用的场景有两类:一类是全局搜索,一类是页面局部搜索(常见的有列表搜索、表单搜索)。

 

 

1、全局搜索

 

对于B端系统中模块分类较多,所涉及到的内容比较全面的,一般会选择全局搜索,全局搜索是通过关键词匹配全局范围内的信息来搜索的。

 

优势:无学习门槛,用户无需考虑内容对应的分类只需输入关键词;

 

劣势:精准度不够高;搜索出来内容泛;需用户二次查找目标内容。

 

注意:设计全局搜索时要注意搜索后的结果展示逻辑,如果分类较多,界面还可以根据分类tab分别归类不同。

 

tips:搜索功能在页面中的重要程度及搜索范围,决定了搜索的位置和样式。

 

目前大部分网站在布局搜索框位置时,大致遵循以下几个规则:页面居中、页面顶部居中、页面顶部右边、页面顶部左边

 

知乎的搜索入口位于顶部导航栏的显著位置,引导用户进行搜索,并且搜索框内的占位文字根据算法会间隔一段时间改变,引导用户发现新的内容,促进用户在知乎上的使用时长。

 

 

 

 

 

 

B端全局搜索入口的样式

 

 

1.1 顶部导航栏搜索框

 

最常见的搜索方式之一,将搜索以输入框的形式居于页面顶部(状态栏或标题栏下方),在视觉上非常醒目,用户进入应用即能快速找到,很符合用户的视觉浏览动线,也是C端产品提高转化率的流量入口。

 

1.2 “放大镜”图标入口

 

形态相对比较简单,通常以“放大镜”样式的 icon 出现在界面右上角,视觉上不会过于突出,常用于搜索行为不是特别频繁的场景,需点击后才会跳转至搜索框页面。

 

Icon 搜索入口相较于上述提到的类型在视觉引导方面略逊一筹,相对弱化了搜索功能,但节省了更多的导航栏空间,呈现位置比较灵活,可单独呈现、也可与其多个其他功能 icon 并列组合展示。

 

 

 

 

 

2、页面​局部搜索

 

指的是在页面中的某个模块加入搜索的功能。

 

常见在数据列表页面加入搜索的功能,搜索的目标只在该模块该内容中进行搜索,搜索的信息具有局限性,当然也是更加准确地搜索用户想要的目标信息。

 

下图是一个美团商家后台的列表页面,此页面加入了搜索的功能。

 

 

 

 

另外,B端常见在表单页面加入搜索的功能,搜索的目标只在表单选择内中进行搜索,搜索的信息同样具有局限性,可以通过控制某个字段或者某几个字段的信息来展开搜索。

 

3、同一页面多个搜索入口

 

B端业务中复杂的场景中存在同一个页面中有多个搜索入口(如上图美团),设计前需梳理清楚每一个搜索入口的交互逻辑,不同搜索入口覆盖的搜索范围、搜索过程、搜索结果是否一致,在占位文本上也需体现出该搜索入口的搜索内容。

 

 

 

 

1、根据搜索结果分类

 

1.1 模糊搜索

 

模糊搜索是用户搜索意图不明确时,将用户的查询与待检索的内容进行模糊匹配。

 

模糊搜索无法精确理解用户的查询意图,搜索结果可能有大批量用户不想要的信息,使用模糊搜索时一定要结合实际场景,慎重使用。

 

优点:只要有相关的内容都会被检索出来,减少了精准搜索带来的记忆负担;

 

缺点:容易把相关的信息也带出来,例如检索186,把相关号码也匹配出来。

 

 

 

 

 

1.2 精确搜索

 

精确搜索是指用户在搜索时,针对某一数据字段搜索,来查找所需要的数据。

 

根据业务场景不同,我们会查找某一字段,或者是用标签切换不同字段来查找。可以帮助用户在巨大的信息池中缩小目标范围,快速而准确的定位到目标数据,并速获取需要的信息。

 

优点:搜索匹配精准度高。

 

缺点:每次只能对单一条件进行搜索。

 

 

 

 

 

总结:

 

我们可以根据产品的发展阶段、需求侧重、用户的专业度和使用习惯来综合决策使用哪一种方式更合适。如果侧重查询效率且用户是有专业门槛的使用者时,可以优先考虑精确搜索;如果侧重查询结果的丰富度,可以优先考虑模糊搜索。

 

 

2、根据搜索栏表现形式分类

 

基于搜索栏的表现形式,可以分为以下四种类型:单属性搜索、切换属性搜索、多属性模糊搜索以及多属性组合搜索。

 

 

 

 

类型之间没有优劣之分,根据业务场景使用对应的类型即可。

 

2.1单属性搜索

 

单属性精确搜索:通过某个特定属性就可以快速定位到目标数据,具有唯一识别性的、高使用频率的、对用户决策有意义的。

 

适用场景:表格单一数据信息特征突出,可以用此数据标签快速定位目标数据。

 

 

2.2切换属性搜索

 

切换属性搜索也被称为定向搜索,是由用户主动选定搜索范围后再进行搜索;

 

优势:搜索精准度高。

 

劣势:增加了部分用户的学习成本及操作步骤。

 

适用于注重搜索结果的精准性或展示产品搜索能力等场景,定向搜索适用的几种场景:

 

a、产品数据量足够大且重搜索功能,用户对于搜索有明确目标,定向可以帮助用户提高搜索的精准范围和效率;

 

b、搜索时输入的内容无法通过同一套搜索交互方式和后台计算逻辑承载;如单次搜索和批量搜索的输入格式不同,搜索结果存在多样性;

 

c、需外露产品亮点功能,有多个常用的搜索属性,对于前置条件的数据计算能力和开发成本更高。

 

 

常见的切换属性搜索的三种设计形式:

 

a、下拉框型

 

明确并固定选项类别,降低用户操作难度。下拉筛选适合的选项类别有限,不适合多类别、复杂维度的分类。

 

b、Tab 型

 

平铺展示搜索条件内容,每个 Tab 标签代表一个筛选维度,操作便捷。Tab 标签的数量不宜过多。

 

 

c、组合型

 

B 端类产品数据量丰富,在实际使用时,简单的方式很难全面覆盖到各个搜索场景,精准定位搜索结果。所以通过多个筛选维度的结合,形成多属性的组合搜索,能够大幅提升搜索结果的准确性。

 

 

d、切换属性高级搜索

 

B端系统还有一种比较常见的搜索类型,是在定向搜索的基础上,进一步丰富了搜索选项,比如指定搜索的时间范围、数据类型等,设置的选项越详细越能够提升搜索结果的效果和准确性。

 

在设计时需要注意,B 端系统用户角色多,层次不同,所以更加需要注重搜索前的引导,针对搜索规则、搜索限制等,应该适时的以简练易懂的语言提示。

 

2.3多属性模糊搜索

 

多标签模糊搜索:表格多个数据都具有特征,往往业务要求对数据的精确度较高。

 

适用场景:业务类型多样用户可能记忆不精确且有多个数据特征,对搜索的便捷性要求高精确性要求低。

 

2.4多属性组合搜索

多属性组合搜索:可以输入多个字段进行组合搜索(取并集),对空间的利用率高,适合更加复杂的列表内容。

 

适用场景:综合筛选项,对空间的利用率高,多标签组合搜索可以得到较为精准的搜索结果。

 

搜索栏设计

 

聊了这么多搜索内容,与设计师密切相关且对外输出的首要就是搜索栏设计。

 

对于用户来说,搜索是为了解决用户明确或者不明确的搜索需求,让用户能够快速准确搜到想搜的内容。设计栏设计的目的就是,让搜索能够提高用户获取信息、内容的效率。

常见搜索框设计样式

 

1、填充色:通常选用与页面背景颜色反差较大的颜色作为搜索框的填充色,方便用户查找。

 

2、线框:多用于干净简洁的背景页面。

 

3、投影:常用于风格简洁轻量的风格页面,同时搜索功能级别较高的场景。

 

4、透明度:常用于背景色复杂的场景,目的是为不破坏背景页面的整体效果,在视觉上更和谐。 无外框:用于风格简洁的大留白的页面。

 

 

 

 

 

完整的搜索流程包含了各种细节:例如搜索栏的形式、光标停留、输入状态、异常数据、搜索结果、二次筛选等等。整个过程包含很多交互的细节设计,下面从激活搜索栏、输入反馈、触发方式来展开说明。

 

1、激活搜索栏

 

搜索激活指用户激活搜索框时出现的搜索下拉面板,B端业务中搜索激活内容常见以下三种:

 

 

 

 

 

1.1 搜索历史

 

搜索记录通常以标签或列表的形式显示,以时间顺序从新到旧排列,一般不会完全展示,可以滑动查看更多,或者折叠展开。

 

注意:搜索记录会涉及对用户行为的记录,关系到用户的搜索隐私,所以应当允许用户手动删除。

 

在 PC 端产品具有页面空间优势,用户的搜索过程完全是通过搜索栏完成的。

 

搜索栏中会增加历史搜索记录,下方增加推荐关键词,帮助用户快速完成搜索。同时也可以唤醒用户对某些商品的兴趣和记忆,从而挖掘用户潜在的搜索需求,这一点电商产品用得偏多。

 

在面板中展示“搜索历史”和“最近浏览”,增加相关内容曝光,去给用户提供更多选择以触达目标内容,该交互形式通常出现在全局性搜索或多维度搜索功能中。

 

1.2 搜索发现

 

搜索发现是系统基于用户的搜索记录,依据算法向用户展示的搜索关键词推荐,但并不是必需模块,可以基于产品定位进行考量。常规的c端产品上用得多,B端产品用得少。

 

由于搜索发现也涉及用户隐私,但应用一般不会让用户直接删除,所以应当允许用户对搜索发现进行隐藏,不然极其容易引起用户的反感。淘宝、京东都有搜索发现,并且也允许用户进行关闭/显示的操作。

 

 

 

 

1.3 热门搜索

 

热门推荐是搜索推荐页里面内容推荐的总称,可以演变成多种推荐形式,比如“热搜推荐”、“推荐活动”等,热门搜索是应用商业化的重要手段,许多应用都有这种模块,并且内容形式多样。

 

知乎的热搜就是结合热搜、时事热点等进行推荐。

 

 

2、搜索输入反馈

 

搜索反馈指用户输入本文时未确认搜索执行的中间过程状态。在B端场景下搜索反馈具备很强的引导作用给予用户当下的状态提示;

 

2.1 关键词联想

 

是通过已输入的关键词来预测可以找到的搜索结果,为用户创造更加便捷的体验。

 

搜索联想承载的不止显性的设计呈现,还有背后的算法逻辑;例如是否可以识别拼音、不同搜索方式呈现的联想词范围,都需要提前确认落地可行性后再统一定义相关交互规则,并在产品中的所有搜索场景中保持相同的交互逻辑。

 

 

 

 

2.2 自动纠错

 

用户在搜索时输入了错误的词汇,系统经过判断后会展示正确词汇的搜索结果给用户,并友好地告知用户正确的搜索方式。特殊状态包含无结果状态、网络不佳状态等。

 

 

 

 

3、搜索触发方式

 

3.1 实时搜索

 

实时搜索+实时显示;搜索只有一个文本输入框,没有按钮可点击,这样的搜索交互是通过输入关键词后,系统自动检测所有内容中符合关键词的目标信息,随着关键词的持续输入,与之相匹配的结果会逐渐减少、直至找到目标,类似自定义筛选功能。

 

这种交互一般对于数据信息比较少的情况下会比较友好,加载的速度更快,避免服务器的压力太大、影响反馈效率,例如地址搜索、查找联系人等。

 

3.2 触发搜索

 

关键词输入完成后,需要手动点击搜索按钮向服务器发送指令才会得到相应的搜索结果,这种方式适合大部分表格场景,更加适合B端产品复杂且庞大的数据场景。

 

 

 

搜索结果页是用户搜索的落脚点,在这个页面,用户会有目的性地浏览搜索结果。

 

搜索结果中隐含着搜索逻辑,全局搜索场景下多数为模糊搜索,即把与搜索关键词详尽的内容页反馈出来,匹配度低,需要花时间对结果二次筛选。

 

B 端中对数据结果的筛选重结果查看与数据操作,具有以下场景需求:

 

1. 快速浏览数据,并能够准确找到数据。

 

2. 需要经常变换条件的组合迭代查询数据,对查询结果精准定位。这就需要搜索结果后,不要清除用户的查询内容。

 

3. 对数据进行操作,如收藏、删除、下载等。

 

不同的内容需要不同的页面布局来支撑的,b端场景中最常见的两种布局,筛选上下布局和左右布局,当然内容部分又分列表布局和栅格布局。

 

搜索结果注意点​

 

1、凸显关键信息:

 

为了便于用户找到精准高效的信息或者进行便捷操作,在搜索联想页状态时,当用户输入的信息足够清晰可预测,可以将关键信息凸显呈现,以引起用户的注意力,在进入搜索结果页之前就可以提升转化的可能性。

 

此外,这种关键信息凸显的形式,在搜索的商业转化方面也有明显的作用。

 

 

 

 

 

2、没有结果,如何设计

 

搜索没有结果会让用户感到非常沮丧的,尤其是当用户进行了好几次搜索之后,依然没有结果,应当为他们提供有价值的替代品。

 

一般出现无结果的状态有两种情况:

 

a. 用户输入错误,一般会提用户正确的搜索方式,并且自动帮助用户纠错,

 

b.搜索结果无,这种情况一般设计会以空状态提示用户,采用友好的方式提醒用户更换关键词。

 

 

 

 

 

 

 

在使用中,搜索本身应该是0思考成本的,否则就失去了索引的核心价值,基于此,总结一下5个设计注意点:

 

1、保留搜索文字

 

当用户输入搜索文本,点击搜索按钮,就进入了搜索结果页流程,此时搜索框内应当保留搜索文本,以便于用户明确搜索的内容(不要依赖用户的记忆力),同时,也便于用户再次编辑搜索文本。

 

考虑到输入/清除的便捷性,应用也应当提供一键清除按钮,点击一键清除搜索的文本,减少用户的操作成本。

 

 

 

 

2、搜索项多时,分类展示

 

搜索项目不可避免的比较多时,可以进行分类展示,降低寻找成本,常用的有两种分类方式:

  • 信息维度:常见的有列表信息自有属性维度的分类和任务属性维度的分类。
  •  
  • 条件类别维度:按照时间类、名称类、状态类等的分类。

 

 

 

 

3、使用有效的自动建议

 

无效的自动建议让整个搜索体验降低,而精准的自动建议会让整个体验好上许多,它会根据用户用户的输入内容(词汇词根和后台数据)为用户提供有用和精准的输入内容建议,这有助于帮助用户提高搜索过程的精准度,提升整个搜索体验。

 

 

4、内容纠错

 

输入错误绝对是最常见的错误,如果用户错误地输入某个关键词,而你的检测到了,并且针对错误提供更正之后的结果,这样就成功的规避了因为错误的关键词所导致的不良后果,用户也不用再次进行搜索了。

 

 

5、保留最近的用户查询

 

即使用户熟知搜索引擎的全部功能,也需要借助大脑记忆来挑选关键词,进行搜索。

 

想要找出有意义的、可用的搜索关键词搭配,用户需要结合他们的搜索方向,最近的查询,联想相关的属性和关键词,使搜索体验更便捷流畅。

 

 

总结

 

搜索是我们日常中频繁接触的功能,看似简单,背后都隐藏了很多流程与逻辑,不建议设计师盲目遵从原型依葫芦画瓢。

 

设计师更应该在设计之初从业务类型、功能定位、使用场景等多维度综合分析选择,从交互体验层面去深思搜索功能,因为搜索除了数据匹配精准度、搜索内容广度之外,搜索体验的便捷性也会影响用户搜索的感受。

 

每一处细节背后的设计思路就变得尤为重要。

 

本文总结梳理了搜索功能,从搜索基本属性、应用场景,到搜索分类,再到搜索栏设计,都进行了阐述,最后再总结了搜索设计的一些注意点。希望你能够帮忙理解搜索功能的设计。

 


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

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

弹窗设计新技能GET!B端产品小白的设计速成法!

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

 

一、弹窗、对话框、窗口,你分清了吗?

 

1、弹窗(popup)

 

不知道你们有没有思考过“对话框”和“弹窗”的区别,我们平常所称呼的“弹窗”主要着眼于动作,意思就是弹出来的窗口,是泛指,在GUI(Graphical User Interface)屏幕中几乎所有弹出来的对象都可以称之为“弹窗”。

 

在常用的两个前端网页开发组件Ant Design和ElementUI中,没有单独命名为“弹窗”的组件,都是细分在各个功能分类中。比如Ant Design中相关的细分就有警告提示、全局提示、对话框、通知提醒框、气泡确认框等,而ElementUI中则又是不一样的细分法,除了分类方法和命名不一样,归根结底达到的目的是一样的,以上我们都可称之为“弹窗”,当然在工作中用细分的称呼会更专业更明确。

 

2、窗口(window)

 

这里的“窗口”对标“对话框”和“弹窗”的概念,窗口是承载应用程序的区域,应用程序的窗口被打开,则表示该应用程序正在运行中。窗口可以移动、可以放大缩小,主要有二种姿态,一种是“独占式”,一种是“暂时式”。顾名思义,“独占式”就是需要占据大部分屏幕的应用,ps、ai的窗口就是“独占式”窗口,而“暂时式”则大部分时间在后台运行,比如音乐播放器、杀毒软件等,只需在必要时打开即可。

 

 

一个应用通常由一个主窗口和若干辅助窗口构成,弹窗就是典型的辅助窗口之一。

 

3、对话框(dialog)

 

对话框强调了用户与计算机进行对话的过程,是叠加在应用主窗口上的弹出框,一般在对话中它会给出消息或要求输入。当对话完成后,即可关闭对话框。说人话就是,对话框一般需要用户进行操作,当用户输入或者点击“确认”、“取消”等按钮时,计算机会根据指令进行工作,这是一个人机“对话”的过程,因此称之为“对话框”。

 

 

无论在现实中还是界面交互中,我们都不希望对话被打断,所以对话框通常是模态的(下文会解释模态和非模态的定义)。

 

梳理完三个容易混淆的概念之后,接下来主要从弹窗的二个角度展开讨论:弹窗的分类和应用场景;弹窗的设计细节和技巧。

 

二、弹窗的分类和应用场景

 

1、弹窗的分类

 

弹窗可分为两大类型:“模态弹窗”和“非模态弹窗”。

 

模态弹窗:用户必须给予弹窗反馈,除非点击关闭或者操作完成,否则弹窗会一直在。形式上来说就是给当前页面添加蒙层,使用户将注意力集中在弹窗上。上文提到,无论在现实中还是界面交互中,我们都不希望对话被打断,模态弹窗不会轻易被打断,所以对话框通常也都是模态弹窗。

 

 

模态弹窗的常见场景:你打开了一个应用的模态弹窗后没有管它,然后切换到其他应用程序中去,等你忙完回到原来的应用时,那个当初的模态弹窗仍旧在那儿等你。这就是模态弹窗,虽然看起来僵硬死板,但是它的目的和使用范围通常是非常清晰的。

 

非模态弹窗:不需要给出反馈,不影响用户的其他操作,主要有属性配置弹窗、Tooltips、消息通知、气泡框等类型。

 

下图红框中就是典型的非模态弹窗,它们可以同时开启且互不影响,不会影响主程序的进程。

 

 

非模态弹窗的另一个特点就是:实时生效。点开非模态弹窗的同时仍然可以看见主界面,主界面会根据你的操作实时变化,你可以随心所欲地不断选择、改变、选择、改变,而模态弹窗则无法在你点击其中一个表单的当下立即做出改变。

 

下图例子就是非模态的属性配置弹窗。

 

 

2、模态弹窗的应用场景

 

1)通知公告类弹窗(通常是重要的信息,需要加强用户关注度)

 

营销弹窗

出于营销目的,这类弹窗都会第一时间出现在你面前,直到手动关闭,它的特点就是不用登录也会出现,提高曝光率,便于拉新和转化。

 

公告通知弹窗

主要是为了将一些重要信息通知给用户,这些信息要么来自一些被触发的事件,要么来自应用开发者的信息,一般在用户登录后第一时间弹出,确保用户不会错过。需要注意的是,在应用的通知中心一般也需要保留这类重要或者高级别的通知,以便用户可以随时查看回顾。

 

 

提示类消息弹窗

提示类弹窗是由应用程序主动弹出的消息,主要有三种状态:错误、警告、确认。通常是用户进行某项操作后给出的反馈信息,会中断当前工作流,属于阻塞型提示。

 

 

以上都属于通知公告类的“模态弹窗”,特点就是一般不需要用户具体操作,用户将其关闭或者点击“确认”等按钮即代表用户已经接收到该消息,弹窗就完成了它的任务。

 

2)操作配置(B端应用中大部分的模态弹窗都为这种类型)

 

简单配置(表单少,操作清晰)

 

“简单”意义上的弹窗可以理解为只有平铺的表单让你选择或输入,交互清晰明了。比如创建项目、分享链接、更改名称等操作。

 

 

标签页弹窗

 

有些应用的功能配置中有很多复杂的属性,简单平铺的弹窗无法满足需求,需要分层分类归纳,于是从20世纪90年代开始出现了选项卡/标签页弹窗。它的优点是合理利用了空间,也能让用户更好的理解信息层级。

 

mac os 8.5系统的弹窗(发布于1998年10月)

 

monday.com的配置弹窗(简洁的标签页)

 

标签页弹窗的设计必须合理且适度,找到信息之间的因果关系,仔细斟酌并加以连接整理。同时,单个弹窗中的标签页不宜过多,一般不超过五个(动态可增减的标签页除外)。

 

 

如果你的标签页过度堆叠,你需要尝试改变交互方式,重新整理信息。一种办法是增加标签页的深度,将能够归纳在一起的内容尽量整合,放置在单个标签页中;另一种办法是拆分信息,分成多个简单的弹窗。

 

下图中的例子就是第一种办法,整个弹窗有三个标签页,但是单个标签页中又划分了更详细的结构化信息,是一个典型的标签页少但信息量大的弹窗。

 

 

流程步骤弹窗

 

流程步骤弹窗与标签页弹窗接近,区别就是步骤弹窗需按顺序进行,一般上一步未完成之前无法进入下一步,用户注册常用这种方式。

 

3、非模态弹窗的应用场景

 

 

1)属性配置弹窗

 

属性配置弹窗主要为了让用户改变某一对象的属性,可以是局部属性也可以是全局属性。

 

属性配置也可以用模态弹窗,如何选择用“模态”还是“非模态”?当你需要让用户实时看到界面的变化或者表单项简单的时候可以选择“非模态”,如果操作复杂或者信息加载比较耗时,则采用“模态”更合理。

 

下图为实时生效的日期选择弹窗

2)下拉菜单

 

下拉菜单几乎都是非模态,它的优势明显,没有复杂操作和各种表单,只需要鼠标划过点击即可,快速高效。

 

3)消息提示

 

上文中应用级的消息提示通常是模态弹窗,而非模态的消息提示弹窗则通常从页面的顶部或者右侧弹出,这类弹窗可以长时间驻留在屏幕边缘,也可以一段时间后自动消失。

 

4)气泡框

 

点击按钮时,弹出气泡式的弹窗就是气泡框,气泡框可以针对元素进行简单的操作,尺寸也会根据内容大小不一。

 

5)Tooltips

 

Tooltips跟上图的气泡框很类似,区别在于Tooltips更轻量,属于页面中最小的弹窗类型,用于功能的提示说明,通常都是文字,背景用深色来与主界面拉开层次。

 

三、弹窗的设计细节和技巧

 

1、标题

 

一般来说,如果是明确的属性配置弹窗都应该有一个标题来说明用途或功能,以及关联的动词来方便理解。比如“创建列表”、“删除列表”、“修改配置”、“配置参数”等,不同标题对应不同的功能场景,前提是方便理解。另外,动词在名词前面或者后面都可以,注意统一规范即可,不要一会儿在前一会儿在后。

 

标题字号一般比默认文本字号大2px或4px,也有应用为了突出标题,选择使用更大的字号,但大的字号也应该符合文字规范,而不是随意使用。

 

 

2、关闭

 

模态弹窗应至少包含一个以上的关闭方式,常见的弹窗关闭方式有4种:(1)、右上角的关闭按钮;(2)、弹窗底部的“取消”按钮;(3)、弹窗外的任意区域;(4)、一段时间后自动消失。

 

1)关闭按钮(弹窗外、弹窗内、弹窗上)

 

 

“关闭”按钮在弹窗外:常见于营销弹窗,一方面按钮远离弹窗,比较隐蔽,拖延用户关闭弹窗的时间,提高信息的曝光率。

 

“关闭”按钮在弹窗上:版式设计中有一个“破型”的概念,是一种打破规矩的设计技巧,能让画面快速吸引眼球,所以营销类弹窗经常采用这种设计方法。这种概念可以理解为,我们希望用户关注于被强调的部分,常见的场景就是ios系统批量删除App的时候,应用图标左上角会出现“移除”按钮。这种方式强调了“关闭”按钮,视觉上增加层次外,用户的关闭体验也更佳,减轻干扰性弹窗对用户的负面情绪。

 

“关闭”按钮在弹窗内:这是应用最广泛最不容易出错的方式,对用户来说,固定在弹窗右上角的“关闭”按钮代表了安全感,在误操作或者想中断操作时我们会自然而然地去右上角点击“关闭”。

 

2)弹窗底部的“取消”等指令性按钮

 

弹窗底部的按钮一般有2种功能:(1)、取消或者确认;(2)、进入下一步流程。基于大多数用户右手掌握鼠标的习惯,一般按钮居右下角的设计方式更广泛。这些按钮上的文字大不相同,代表了对计算机的不同指令,但相同的结果都是关闭了当前弹窗。

 

有些应用也会采取按钮居左的设计,这种方式有一个优点就是减少误操作,让按钮远离鼠标点击热区。

 

 

3)、弹窗外的任意区域

 

这种方式一般用于模态弹窗,除了弹窗中的关闭按钮外,点击弹窗外的任意区域关闭体验更佳。操作配置类弹窗不建议采用这种方式,容易误操作导致正在配置中的弹窗被关闭。

 

3、字号

 

B端弹窗的标题字号通常比内容文本大2px或4px,常用字号为12px、14px、16px,14px为默认文本字号,12px为辅助说明字号,也有紧凑型页面将12px作为常规字号。无论选用何种字号,都应跟主界面的字体规范保持一致。

 

4、排版

 

左对齐:弹窗中应用最多的对齐方式,适合表单较多的配置类弹窗。

 

居中对齐:常见于消息提示类弹窗,适合图文结合或者信息较少时的排版方式。

 

两边对齐:两边对齐的方式让弹窗看起来更规整,适用于平铺的配置类弹窗。一般表单较多的情况下不建议使用两边对齐的方式,一方面左对齐比两边对齐看起来更有层次,另一方面多表单时两边对齐会使弹窗看起来冗长。

 

除了对齐方式,表单的排列是B端弹窗中最令人头疼的一块内容了,在一些复杂的操作弹窗中,常常包含各种类型的表单,例如下拉框、输入框、日期框、穿梭框以及各种组合模式的表单项,很容易让表单看起来凌乱,也影响了交互操作。

 

单行一个表单项:常见的表单排列,适用于表单较少的排版方式。

 

单行多表单并排:在复杂场景中,单行只排列一个表单项会让弹窗超长,因此会采用多个表单并列分布的方式。这种方式存在2个问题:(1)、如果表单的标题长短不一,看起来参差不齐,下图中的表单标题一样长是最理想的场景;(2)、横向距离长,导致弹窗过大。

 

标题与表单分行排列:越来越多的应用采用这种表单排版方法,这种方法可以兼顾更多场景,可拓展性也更高。这种方法会增加纵向空间的占用,不过眼睛焦点的纵向浏览比横向浏览获取信息效率更高,所以在表单复杂的情况下,相比于上一种方法也是一种更优解。

 

表单的排版不只局限于一种,我们需要根据表单内容来设计。但是需要注意3点:

(1)、当表单标题长短不一,上下无法等距排列时,我们要尽量将标题和表单分行排列;

(2)、一行不要出现太多的表单项,一般来说弹窗中最多一行排列三个;

(3)、表单的灵活性很强,哪些需要宽度固定,哪些需要根据内容可扩展可换行,我们都要在设计中加以规范说明,多考虑可能会出现的样式问题,提前规避。

 

5、弹窗尺寸

 

弹窗是一个容器,容器的大小取决于放置其中的内容物。这里主要讨论场景复杂的对话框的尺寸规范,其他例如Tooltips之类可作为单独的组件在需要的场景直接调用即可。

 

对话框的大小主要根据内容而定,B端应用中,一个尺寸无法满足所有类型的弹窗需求,所以我们要设定几种常规尺寸,一般可设定为4种:S(通知提示类)、M(配置简单)、L(配置复杂或者扩展详情)、特殊(根据实际情况而定)。pc的小屏幕分辨率为1024*768,所以高度尽量控制在600px以内(除去导航栏、工具栏高度),宽度控制在1000px以内,如果你所设计的B端产品在某个固定的场景中使用,也可以根据使用场景而定,原则就是要让弹窗能够一屏展示完全。

 

6、设计技巧:巧用sketch组件

 

这里主要分享一个小技巧,对于弹窗来说很实用。sketch右侧属性面板有一个“调整尺寸“功能,非常适合各种组件化的应用。不同场景下我们会需要不同尺寸的弹窗,有了这个功能,我们不需要每个弹窗都画一遍,只需要创建一组基本的弹窗规范,其他尺寸可以根据所需场景调整。

 

 

未调整过的组件不能随意更改尺寸,否则将变形不可用。

 

创建弹窗组件时,把弹窗里需要固定不便的尺寸参数设置好。(设置方法:靠左的左边固定,靠右的右边固定,对角的靠两个边固定,分割线高度固定,文字图标宽高都固定)。

 

设置好后的弹窗组件即可在设计稿中随意调整大小,固定参数不会发生变化,因此我们在设计规范中只需要做一种或二三种常见的弹窗样式即可,不需要把设计稿中的每种尺寸都放到设计规范中。

 

表单同理,在组件中设置好参数后,调用时可以根据情况替换图标、文字和宽高,非常方便。

结语

 

在B端设计中,随着数据量的增加和业务线的扩大,设计师在设计时,常常需要考虑到交互的可扩展性,我们设计的交互至少要满足未来半年到一年的产品应用。因此作为使用频率很高的弹窗,我们在设计时尤其需要考虑全面,不只为了满足当前的场景,也要考虑未来可能应用的场景。

 


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

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

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
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

日历

链接

个人资料

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

存档