首页

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

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

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

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

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

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

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

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

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

一、项目背景

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

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

二、项目概述

(一)产品定位

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

(二)目标用户

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

(三)设计风格

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

level2_img.jpg.png

三、设计亮点

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

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

level3_img1.png

(二)增加统计图表

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

level3_img2.png

四、首页其他方案欣赏

level4_img.jpg.png

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

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

ui设计分享达人

一、遵循色彩基本原理

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

二、契合品牌调性

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

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

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

四、构建合理的色彩体系

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

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

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

如何让 B 端深色界面设计符合用户习惯

ui设计分享达人

深入的用户调研是让 B 端深色界面设计符合用户习惯的基础。不同行业、不同岗位的用户对界面的需求大相径庭。例如,设计师群体可能更注重色彩的协调性和视觉的舒适度,而数据分析师则更关注数据展示的清晰度和操作的便捷性。通过问卷调查、用户访谈、可用性测试等方式,收集用户对界面颜色、布局、交互方式等方面的反馈和期望,能够为设计提供有力的依据。了解到多数用户在长时间使用 B 端产品时,希望界面能减轻眼睛疲劳,那么在深色界面的设计中,就可以选择低亮度、高对比度的颜色组合,以减少视觉负担。
合理的界面布局是提升用户体验的关键。B 端产品通常功能复杂,信息量大,因此清晰、简洁的布局至关重要。在深色界面中,应遵循用户的操作习惯和视觉流程,将常用功能和重要信息置于显眼位置。主导航栏可以固定在顶部或左侧,方便用户随时切换功能模块;操作按钮的设计要大小适中、易于点击,并且通过颜色和图标进行区分,让用户一目了然。运用留白和层次分明的设计手法,避免界面元素过于拥挤,使信息呈现更加有序。这样,用户在使用过程中就能快速找到所需功能,提高工作效率。
 
色彩搭配和对比度的把握直接影响着用户对 B 端深色界面的接受程度。虽然深色界面以深色为主色调,但并不意味着只能使用单一的黑色或深灰色。可以选择富有层次感的深色系,如深蓝、深紫等,作为背景色或主要元素的颜色。在文本和图标颜色的选择上,要确保与背景色有足够的对比度,以保证可读性。白色或浅灰色的文本在深色背景下通常较为清晰,但要注意避免颜色过于刺眼。对于重要的操作按钮或提示信息,可以使用明亮的对比色进行突出显示,吸引用户的注意力。
交互设计要符合用户的操作逻辑和习惯。B 端产品的用户往往需要频繁进行各种操作,因此简单、高效的交互设计能够大大提升用户的满意度。提供清晰的操作反馈,让用户知道自己的操作是否成功执行;支持快捷键操作,方便用户快速完成常见任务;设计合理的菜单和弹窗,避免过多的层级嵌套,让用户能够轻松地进行操作。
让 B 端深色界面设计符合用户习惯需要从用户调研、界面布局、色彩搭配、交互设计等多个方面入手。只有深入了解用户需求,不断优化设计细节,才能打造出用户满意的 B 端深色界面,为用户提供更加高效、舒适的使用体验。
 

以用户为中心,优化 B 端界面设计

ui设计分享达人

在数字化转型的进程中,B 端产品已成为企业高效运营的关键支撑,而 B 端界面设计则是决定其成败的核心要素。以用户为中心优化 B 端界面,不仅能提升员工操作体验,还能为企业运营注入强大动力。
以用户为中心,意味着深入洞察不同岗位用户的需求。销售、财务、运营等不同部门员工,因工作内容和场景各异,对 B 端产品的功能需求也大不相同。比如销售团队,更注重客户跟进、订单管理的便捷性;财务人员则对数据准确性和报表生成效率要求极高。通过问卷调查、用户访谈等方式收集反馈,精准把握这些需求,是优化 B 端界面的基础。
优化 B 端界面设计,可从多个维度展开。信息架构要简洁直观,去除冗余菜单和繁杂信息,让员工能迅速找到所需功能。例如,项目管理 B 端产品将项目进度、任务分配等关键信息置于首页显眼位置,员工登录后一目了然,无需反复切换页面查找。
交互设计也十分关键,要符合用户日常操作习惯。采用拖拽、滑动等常见手势进行文件上传、数据排序等操作,减少繁琐点击步骤。同时,设置即时反馈机制,员工操作后系统立刻提示结果,避免因等待产生焦虑。
视觉设计同样不容忽视。统一的色彩搭配和清晰的图标,能提升界面专业性和美观度。色彩选择要契合企业品牌形象,保证文字与背景高对比度,方便员工查看。图标设计应简洁明了,员工一看便知其功能。
以某企业人力资源管理系统为例,优化前,员工考勤记录、薪资查询等操作繁琐,界面复杂,导致员工满意度低、效率低下。优化后,重新梳理信息架构,简化操作流程,采用简洁交互设计和清新视觉风格。优化后,员工操作失误率大幅降低,工作效率提升 [X]%,系统使用率和员工满意度显著提高。
 
以用户为中心优化 B 端界面设计,是企业提升竞争力、实现高效运营的重要途径。只有持续关注用户需求,不断优化设计,才能让 B 端产品在企业发展中发挥更大价值,助力企业在数字化浪潮中稳健前行。
 

B端干货|全链路设计的分析能力

ui设计分享达人

全链路用户体验设计师需要具备的六大能力模型。掌握这六种能力模型,既可以辅助我们进行更好的设计支撑,也可以在业务的工作汇报和部门的述职工作中站稳脚跟!!!
市场分析 | 用户洞察 | 产品规划 | 项目管理 |  数据分析 | 用户运营
下面我会分几篇文章去讲解这六大能力模型~
 
市场分析
B端干货|全链路设计的分析能力
 
 
1. SWOT 分析模型
B端干货|全链路设计的分析能力
 
 
什么是SWOT?
SWOT是一种经典的企业战略规划工具,著名咨询公司麦肯锡经常使用它为企业战略咨询服务,它通过分析对象内外部因素从而得出战略结论的分析方法。核心理念在于通过对影响因素进行分类梳理,再通过聚合考虑来得出结论。
B端干货|全链路设计的分析能力
 
 
如何进行SWOT分析?
大道至简,SWOT分析模型的应用也很简单,分别对各维度因素进行识别和梳理,然后构建出分析矩阵,最后根据矩阵中信息进行综合分析,就能得出结论和战略方向了。
B端干货|全链路设计的分析能力
 
 
 
a. 梳理分析维度
内部因素分析
也就是S(强项)和W(弱项),可以从Q(品质)、C(成本)、D(技术和交付能力)、M(人才设备等)、S(服务)等维度进行梳理。当然也可以根据分析对象的特性进行调整。
外部因素分析
也就是O(机会)和T(威胁),可以借助PEST模型或者波特五力模型上着手(这两个模型后续再详细展开)
 
b. 构建分析矩阵
这个步骤就挺简单,就是把第一步分析的因素,按照这几个类别放到一起
B端干货|全链路设计的分析能力
 
 
 
c. 制定战略计划
B端干货|全链路设计的分析能力
 
 
d. 案例练习
假设你在夜市有一个烤肠摊为基础,来一次思想实验,练习一下SWOT分析。
B端干货|全链路设计的分析能力
 
 
战略方向调整
SO(利用优势抓住机遇):
  •  
    推出新产品
S的地理位置好+已有口碑,结合机遇中的健康饮食,那么可以开发新品/建立宣传点,推出健康烤肠新品,满足市场需求。
  •  
    社交媒体推广
利用已有优势+社交媒体,在工作中进行直播,进一步提升口碑和影响力。
PS:315对淀粉肠进行曝光后,如果这个店一直以健康和口碑立足,是不是恰好又迎来机遇呢?
 
ST(利用优势应对威胁):
  •  
    增强食品安全
现在口碑和味道都很好,但是一旦出现食品安全问题,影响会很大,那么应该确保产品质量,维护小店声誉。
  •  
    强化独特口味
地摊竞争对手众多,利用优势脱颖而出,可以对口味等强化宣传
 
WO(克服劣势抓住机遇):
  •  
    季节性产品
劣势方面,现在产品收到季节性影响,外部机遇有媒体和重视饮食健康,一方面针对淡季,可以研发季节性健康产品,另一方面可以摘淡季加强自媒体宣传。
 
WT(克服劣势避免威胁):
  •  
    竞争对手多,且摊位规模和资金规模有限制:
因此对于扩张规模、占地比较大的新品引入、高投入的变革都不适用于现阶段的策略,这些方向上应该按兵不动,静待时机。
 
2. PEST 分析模型
含义:PEST 是一种用于分析宏观环境的工具,它包括政治(Political)、经济(Economic)、社会(Social)和技术(Technological)四个方面。通过这四个维度来评估这些因素对企业或市场的潜在影响。
B端干货|全链路设计的分析能力
 
 
B端干货|全链路设计的分析能力
 
 
B端干货|全链路设计的分析能力
 
 
应用场景和案例
  •  
    政治因素:政府法规政策对用户体验设计有重要影响。比如数据隐私法规要求产品设计清晰呈现数据收集方式并提供隐私设置选项;无障碍法规促使设计考虑残障人士需求。同时,数字化政务服务和公共服务创新项目为用户体验设计提供应用场景。
  •  
    经济因素:消费能力影响用户需求,经济繁荣时高端市场注重奢华个性化体验,经济不稳定时大众市场追求性价比。市场竞争中,企业通过创新用户体验设计实现差异化,同时需考虑成本效益。
  •  
    社会因素:不同文化背景和社会价值观变化影响用户对产品的期望和偏好。例如,集体主义文化地区更重社交功能,环保意识增强促使产品融入环保元素。此外,社交互动需求和移动生活方式也要求用户体验设计适应这些趋势。
  •  
    技术因素:新兴技术如人工智能、机器学习、虚拟现实和增强现实在用户体验设计中有广泛应用。但要平衡技术复杂性与易用性,同时通过良好的用户教育帮助用户适应技术更新。
 
3. 波特五力模型
B端干货|全链路设计的分析能力
 
 
含义:迈克尔・波特(Michael Porter)提出的五力模型用于分析行业竞争态势。这五种力量包括现有竞争者的威胁、潜在进入者的威胁、替代品的威胁、供应商的议价能力和购买者的议价能力。
 
应用场景和案例:
  •  
    现有竞争者的威胁:在智能手机行业,苹果、华为、三星等品牌之间竞争激烈。它们通过不断推出新产品、进行价格战、提升品牌形象等方式争夺市场份额。企业需要分析竞争对手的产品特点、价格策略、市场份额等因素,来制定自己的竞争策略。例如,某国产手机品牌为了在竞争中脱颖而出,不断加大研发投入,在拍照功能上取得优势,吸引了众多摄影爱好者,从而提高了市场竞争力。
B端干货|全链路设计的分析能力
 
 
  •  
    潜在进入者的威胁:
以网约车市场为例,滴滴在市场占据主导地位,但如果有新的资金雄厚的企业进入这个市场,如一些大型汽车制造商或者科技巨头,就可能改变市场格局。现有企业需要通过构建品牌壁垒、技术壁垒、规模经济等方式来抵御潜在进入者。滴滴通过建立庞大的司机网络和用户基础,以及先进的调度系统,增加了新进入者的进入难度。
B端干货|全链路设计的分析能力
 
 
  •  
    替代品的威胁:
传统纸质书籍面临着电子书的替代威胁。电子书具有便携性、存储量大等优点。传统出版社需要关注电子书市场的发展,通过发展自己的数字出版业务,或者与电子书平台合作等方式来应对这种威胁。同时,也要发挥纸质书的独特优势,如收藏价值、阅读质感等。
B端干货|全链路设计的分析能力
 
 
  •  
    供应商的议价能力
在汽车制造业,汽车制造商对零部件供应商的议价能力会影响成本。如果某汽车品牌是一家大型企业,采购量巨大,它对零部件供应商的议价能力就强,可以压低采购价格,降低生产成本。相反,如果是一家小众汽车品牌,零部件供应商的议价能力相对较强,可能会导致汽车生产成本上升。
B端干货|全链路设计的分析能力
 
 
  •  
    购买者的议价能力:
在一些大宗商品市场,如钢铁市场,大型建筑企业作为购买者,由于采购量大,对钢铁供应商的议价能力就强。它们可以通过招标等方式,让多家供应商竞争,从而获得更优惠的价格。而对于一些小客户,其议价能力较弱,往往只能接受供应商提供的价格。
B端干货|全链路设计的分析能力
 
 
 
总结
SWOT、波特五力分析模型与 PEST 模型相互关联。
PEST 模型聚焦政治、经济、社会、技术等宏观环境,其分析结果能为 SWOT 中的机会和威胁要素提供来源,帮助企业从宏观层面把握外部情况。
波特五力分析模型着重剖析行业内的竞争力量,可细化 SWOT 里的威胁内容,助力明确行业竞争处境。
三者结合,企业能先借 PEST 知晓宏观环境,再用波特五力把握行业态势,最后靠 SWOT 综合分析制定契合自身发展的精准战略。


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

2025 年 B 端界面设计的最新趋势与展望

ui设计分享达人

个性化设计

  • 打造个体专属形象1:随着 “超级个体” 时代的来临,B 端设计不再只关注企业整体,更注重为个体赋能。如钉钉等平台开始为用户提供动态头像等个性化功能,让员工能在工作场景中展现独特个性。
  • 满足个体情绪需求:通过色彩、插画等元素营造更具情感氛围的界面,比如 Teams 和 ONES 等产品利用色彩和插画设计,提升用户对品牌的情感认同,使工作不再枯燥。
  • 10_鍓湰.png

视觉设计创新

  • 渐变色的广泛应用2:渐变色重新定义了 B 端视觉美学,许多 B 端产品将背景和元素转变为渐变色,如 Baklib 官网的淡色背景渐变,既传达现代感与科技感,又实现了不同内容间的自然过渡。
  • 网格化布局流行2:网格化布局以其结构性受到青睐,像 Magnolia 与 Intercom 等企业的官网采用此布局,使内容分区明确,优化了页面可读性与逻辑性。

智能化融入

  • 突出 AI 元素2:AI 已成为 B 端设计的核心元素,众多 SaaS 平台在官网上直接强调与 AI 相关的功能,甚至在 Slogan 中加入关键词,展示企业的科技实力,让用户感受到前沿的科技形象。
  • 智能交互体验:借助 AI 实现智能提醒、自动推荐等功能,例如一些 B 端办公软件可以根据用户的使用习惯和工作流程,自动推送相关的任务和文件,提高工作效率。

交互设计升级

  • 微动效与微交互2:适度的动画和交互效果能够吸引用户注意,增强网站互动性,如在时间轴上滑动的效果、功能版块的滚动折叠等,让界面更加生动有趣,提升用户粘性。
  • 便捷的菜单导航2:折叠加展开的平铺菜单导航成为主流,清晰直观,方便用户快速找到所需信息,提高了信息获取的速度和便利性。
  • 22.png
展望未来,B 端界面设计还可能有以下发展方向:

沉浸式体验增强

随着技术的发展,B 端界面可能会更多地融入虚拟现实(VR)和增强现实(AR)技术,为用户带来沉浸式的操作体验。比如在设计建筑规划、机械维修等 B 端应用时,用户可以通过 VR 或 AR 技术更直观地进行操作和协作。

数据可视化深化

面对日益增长的数据量,数据可视化将更加复杂和精细。除了常见的图表和图形,可能会出现更具创意和互动性的数据展示方式,帮助用户更深入地理解数据背后的信息,为决策提供更有力的支持。

跨平台融合优化

企业使用的设备和平台越来越多样化,未来 B 端界面设计需要更好地实现跨平台融合,确保在不同的设备和操作系统上都能提供一致、流畅的用户体验。
总之,2025 年的 B 端界面设计正朝着个性化、智能化、创新化的方向发展,未来也将持续以满足用户需求、提升用户体验为目标,不断探索和创新。B 端设计师需要紧跟这些趋势,才能为企业创造出更具价值的产品和服务。
 

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

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

日历

链接

个人资料

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

存档