B端界面设计文章及欣赏

B端设计规范的安全着陆

分享达人 B端界面设计文章及欣赏

想法很重要,落地更重要
“有很多优秀的想法,但如果不能够把它们变成现实,就没有什么价值。”
这句话出自比尔·盖茨的一篇演讲,该演讲是在1994年的美国全国高技术展(National Educational Computing Conference)上发表的。在这篇演讲中,比尔·盖茨讲述了他对计算机科学的看法,并提出了他对教育和技术的未来的愿景。在谈到创新和想法的时候,他说了这句名言。

提升B端产品可用性的UI设计策略

分享达人 B端界面设计文章及欣赏

随着企业信息化的推进,B端产品(即面向企业或组织的产品)在各行各业中的应用越来越广泛。
然而,很多B端产品在使用过程中存在着操作复杂、难以理解等问题,这大大降低了产品的可用性。为了提升B端产品的可用性,UI设计师需要采取一系列策略来优化用户界面和交互体验。
本文将详细探讨这些策略,以帮助设计师们创造出更加用户友好的B端产品。

深入探究B端产品设计的核心

分享达人 B端界面设计文章及欣赏

在当今高度信息化的商业环境中,B端产品已成为企业高效运营和持续发展的关键支撑。
这些产品不仅提供工具和服务,更是企业优化流程、提升工作效率和竞争力的有力武器。然而,要打造一款成功的B端产品,关键在于对
B端用户需求的深入理解与分析。
B端用户,
如企业决策者、团队管理者和专业人员以及普通员工,他们在日常工作中处理复杂的业务流程,对数据分析、系统整合、安全性等方面有着极高的要求。
这些用户的独特需求不仅体现在产品的基本功能上,更涉及到产品的易用性、可扩展性以及服务支持等多个层面。

提升B端产品可用性的UI设计策略

分享达人 B端界面设计文章及欣赏

随着企业信息化的推进,B端产品(即面向企业或组织的产品)在各行各业中的应用越来越广泛。
然而,很多B端产品在使用过程中存在着操作复杂、难以理解等问题,这大大降低了产品的可用性。为了提升B端产品的可用性,UI设计师需要采取一系列策略来优化用户界面和交互体验。
本文将详细探讨这些策略,以帮助设计师们创造出更加用户友好的B端产品。

提升B端产品可用性的UI设计策略

分享达人 B端界面设计文章及欣赏

随着企业信息化的推进,B端产品(即面向企业或组织的产品)在各行各业中的应用越来越广泛。
然而,很多B端产品在使用过程中存在着操作复杂、难以理解等问题,这大大降低了产品的可用性。为了提升B端产品的可用性,UI设计师需要采取一系列策略来优化用户界面和交互体验。
本文将详细探讨这些策略,以帮助设计师们创造出更加用户友好的B端产品。

深入探究B端产品设计的核心

分享达人 B端界面设计文章及欣赏

一、B端用户需求的深入理解和分析
在当今高度信息化的商业环境中,B端产品已成为企业高效运营和持续发展的关键支撑。
这些产品不仅提供工具和服务,更是企业优化流程、提升工作效率和竞争力的有力武器。然而,要打造一款成功的B端产品,关键在于对
B端用户需求的深入理解与分析。
B端用户,
如企业决策者、团队管理者和专业人员以及普通员工,他们在日常工作中处理复杂的业务流程,对数据分析、系统整合、安全性等方面有着极高的要求。
这些用户的独特需求不仅体现在产品的基本功能上,更涉及到产品的易用性、可扩展性以及服务支持等多个层面。

深入探究B端产品设计的核心

分享达人 B端界面设计文章及欣赏

一、B端用户需求的深入理解和分析
在当今高度信息化的商业环境中,B端产品已成为企业高效运营和持续发展的关键支撑。
这些产品不仅提供工具和服务,更是企业优化流程、提升工作效率和竞争力的有力武器。然而,要打造一款成功的B端产品,关键在于对
B端用户需求的深入理解与分析。
B端用户,
如企业决策者、团队管理者和专业人员以及普通员工,他们在日常工作中处理复杂的业务流程,对数据分析、系统整合、安全性等方面有着极高的要求。
这些用户的独特需求不仅体现在产品的基本功能上,更涉及到产品的易用性、可扩展性以及服务支持等多个层面。

【交互设计】B端产品中后台列表页设计方法总结

雪涛 B端界面设计文章及欣赏

接触b端产品设计差不多半年多了,每天面对的都是各种控制台,本次自己试着总结了下工作中遇到的各种列表设计的小tips。

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

分享达人 B端界面设计文章及欣赏

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

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

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


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

日历

链接

个人资料

蓝蓝 http://www.lanlanwork.com

存档