2024-10-24 鹤鹤 系统UI设计文章及欣赏
当你没有看之前，你会觉得按钮嘛。有什么不清楚的呢，有什么不会用呢。是的呀。在我写这篇文章之前也是这样的想法。但是当我去搜集了一堆的关于按钮的资料后。感觉这东西还真有意思。你可以用你的感性去做设计但是你也要明白理性的设计才能更好的让设计决策更加准确、更容易说服需求方、从而更好得服务于用户、赋能于业务。
唐纳德·A·诺曼在《设计心理学》中说设计是一种解决问题的方式，是一种创新的过程。设计师的成长始于对每一个项目的独特理解，止于对每一个细节的完美追求。
先赞后收藏、开启我们的学习旅程...
按钮在我们界面中也是大量存在的一个设计组件。大多数的设计师可能就不会太在意他，从而导致我们在设计过程中会出现一些问题。比如用户找不到入口、不知道到界面怎么操作等。
在大场规范里，都对按钮有一套完整的组件规范。在现在的设计当中，你可以不会做按钮但是你要会用。要知道在什么场景怎么使用这些大厂的组件。
在TDesign中是这样定义按钮的；按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。在Arco Design的按钮定义是；按钮是一种命令组件，可发起一个即时操作。
在各大场规范里面，对按钮的分类出发的维度不一样，所以对按钮的类型划分也都不太一样。但无论他们怎么分类，这样我们结合使用场景去用就不会有什么问题。因为我做的系统是用的ant design的规范框架。所以下面是总结了各大规范的内容的结合体。旨在更好理解按钮。（哈哈好像不怎么搭嘎，不重要）
本文按钮基础规范内容基于一下三个大厂规范而来
我们常用的基础按钮主要就分为、次要按钮、主要按钮、文字按钮、图标按钮、在按钮中添加图标、这几种按钮形式。
① 次按钮
常规按钮，用于非主要动作。如果不确定选择哪种按钮，次按钮永远是最安全的选择。
② 主按钮
突出“完成”、“推荐”类操作；一个按钮区最多使用一个主按钮。
③ 文字按钮
弱化的按钮，采用更轻量的按钮样式，可用于需大面积展示按钮场景，例如表格组件中的操作列。
④ 图标按钮
图标提供视觉线索，避免逐字阅读按钮文案，更高效地使用界面。
-需要在较小的空间内展示尽量多的按钮。-使用纯图标按钮必须有 Tooltip 提示按钮含义。
⑤ 在按钮中添加图标
用于对按钮含义补充解释，提高按钮识别效率。
在三个大厂规范里他们对基础按钮的划分也差不多，只是他们出发的依据不一样而已。大同小异。你可以理解东西就那么多东西至于怎么划分。条条大路通罗马嘛。我个人感觉ant的按钮规范做的会更普世。其他两个平台的做的就更简单纯粹。
在按钮的状态里如果从操作上出发应该分为可用、禁用、加载。
如果站在强调性上去看那就可以分为警告、危险、成功、可以与基础按钮同时生效，优先级高于基础基础按钮属性。
在按钮尺寸的规范制定里我更倾向于arco的规范、把按钮分成：迷你、小、中、大，四种尺寸。高度分别为：24px/28px/32px/36px。推荐及默认为尺寸「中」。可在不同场景及不同业务需求选择适合尺寸。
各个规范对按钮形状的规范基本都一样。提供长方形、正方形、圆角长方形、圆形四种形状。
在基础常规按钮之外还有那么一批特殊的按钮需要注意。虚线按钮、幽灵按钮
用于引导用户在一个区域中添加内容。
置于复杂或较深的背景中，避免按钮突兀地破坏背景的整体性。该场景下可灵活定制样式。
按钮的布局位置也是一个很讲究的事情。我们现在基本大厂的规范也都是从一些基础的概念出发所延伸出来的解决方案。所以我们了解了解这些普通的概念还是很有必要的事情。
在我要写这篇文章时，在网上翻找资料。于是乎就发现了在我们现在很多很常规的界面设计里面。各个元素的位置是有很多基础概念做理论支撑的。下面我们来了解一下这些有趣的概念吧。
古藤堡法则或者原则，剧说是由14世纪西方活字印刷术发明者古藤堡提出的。他这个原则大概意思是人们在阅读时遵循这某种习惯。从左到右、从上到下。（其实吧，我在网上搜了搜，感觉这个法则也需存在。但不一定是古藤堡提出来的。百度百科也没有说有古藤堡法则或者原则这一说。而且我百度了一下。最早出现这一说法的是0几年的一篇文章里。说古藤保法则对网页排版有帮助）
我们暂且就先相信这些基础的规则是古藤堡提出来的。那么根据他的这些原则，得出了我们现在熟知的一些理论。（这里吐槽一下。从左往右是近代西方传进我国的。我们国家的书籍是从上到下从右往左，新中国成立之后才采取了我们现在的这种阅读方式和习惯。）根据古藤堡原则我们可以得到一张古藤堡图。
在这张图中、把我们阅读的过程用四个区域进行了划分。第一视觉区、强休息区、弱休息区、终端休息区。这张图所表达的是在我们的阅读过程中我们的注意力在不同的区域是有强弱之分的。
有了古藤堡原则和他的这张图、我们发现在我们视觉阅读信息时对不同的区域的注意力是不同的。所以我们在设计的时候。会将主要的信息放到注意力强的位置上去。
比如在写一些文件时。我们会把日期和签名放到右下角的区域。在B端页面中我们会经常把标题放到左上角、然后把按钮放到右下角去展示。这些都和古藤堡原则有很大的关系。
费茨定律可以简单归纳为、幕布的大小和距离会影响到操作者移动目标的速度和准确性。是美国人类工程学部门的主任保罗·费茨博士在1954年提出的。
菲茨定律是对人类操作过程中的运动特征、运动时间、运动范围和运动准确性进行了研究。所总结出来的定律。我们简要的介绍一下这个定律。
简单的说费茨定律说的就是、我们在操作的过程中。距离越短、目标越大、用时越少。具体说一下费茨定律指的是，使用设备（比如我们的鼠标）到达一个目标（比如按钮）的时间和下面两个因素有关系。
01、设备当前的位置离目标位置的距离（D）。距离越长、所用时间越长。
02、目标的大小（S）目标越大，所用时间越短
该定律经常运用于鼠标从点A到点B的运动。例如，以一个更有效的途径使可接近性更大和提高点击率去放置内容，这个定律便显得重要。
我们在设计里主要会应用费茨定律的几个点来优化我们的设计。1、放大可点击元素的尺寸，但不能无限放大；2、减少移动的距离，综合权衡效率。防错、安全等要素；3、相关元素靠近；4、屏幕的边缘和角落无限大；5、方向利用
上面两个概念中。古藤堡原则告诉我们怎么放置按钮或重要信息才能让我们得视觉刚好的注意到他。费茨定律的应用让我们可能更高效和快速的完成我们的操作。那么下面这条送你的概念就是如果让用户完成目标。比如做一场活动。你怎么去吸引用户去点击呢。或者说用户的点击与哪些条件相关呢。
什么事福格行为模型、在体验设计中。我们可以通过福格行为模型去深入的理解用户行为发生的原因。和影响用户行为的因素。从而提示我们产品的体验，和不断地优化我们的产品。
福格行为模型，它以BJ Fogg（斯坦福说服力科技实验室主任）命名。表明一个行为得以发生，行为者首先需要有进行此行为的动机和操作此行为的能力。接着，如果他们有充足的动机和能力来施行既定行为，他们就会在被诱导/触发时进行。
福格将人们的行为拆解为动机、能力、和触发条件三个要素。认为只要三个要素同时满足时行为才会发生。表示为B=MAT，其中B（Behavior）是行为，M（Motivation）是 动机，A（Ability）是能力，T（Triggers）是触发。
这个例子引用来自知乎子木牧先生https://www.zhihu.com/question/500859092/answer/2631793047?utm_id=0
我个人觉得他的这篇关于福格行为模型写的很不错。下面大部分内容摘录于这篇文章内容。
举一个简单的例子，你看到朋友圈有人分享了水果的购买链接，最终你也下单购买了。这其中包含的动机、能力和触发分别是什么呢？
动机就是对水果的渴望，能力就是有时间，有金钱购买商品，而好友的朋友圈则是对购买行为的触发。
动机
所谓动机，就是行为的出发点。动机可以分为3个类别：感觉、期待和归属感。总的来说就是为了什么你的目的是什么。
能力
有了足够的动机之后，用户还必须要有能力来完成行为。能力包含了以下6个方面：时间、金钱、体力、脑力、社会偏好（社会的约定俗成、认知、从众等）、非日常（非日常的购物方式）。
触发条件
触发就是行为的刺激点，引导用户行为的发生。在上瘾模型中，触发可以分为内部触发和外部触发。
在产品设计中，我们希望能够实现用户自主的内部触发，比如每天7点钟，用户都能主动打开到蚂蚁森林收取能量。当你拿起手机时，会不由自主的打开微信。但是很多时候我们都无法唤起用户内心的触点，只能依靠各种外部触发。例如购物过程中常见的各种促销活动的广告位，或者优惠券即将过期的提醒等。
动机、能力、触发条件、这三者的关系是什么呢。动机、能力以及触发条件会构成一条行为曲线，用户的动机越强，行为过程中要求的能力越简单，加上特定的触发情景，用户完成行为的几率也就越高。
这福格行为模型。我在网上整体看了看。很有意思的，他并不是一个针对设计的一个行为模型。而是只对于人的。一大的行为模型。当你明白他怎么说什么的时候可以把这个理论用到很多的方面去。比如生活，比如人际关系。比如怎么能够让你的朋友给你帮个帮。哈哈哈
本来这部分内容是要将各大厂的示例界面拿出来逐个说说的。但是这篇文章，本来是2023年12月份就要写完的。一直拖到2024了才写完。没有了当初的激情了。所以这部分示例就只拿我自己做的SaaS平台里面一个小业务模块的界面拿出来浅谈几句。
整个就不谈什么项目背景、业务需求呀，什么的。单纯从底层的原理出发。去浅浅的谈一谈这个很平常的界面。首先页面上方标题的切换、这很成熟的处理方式、在B端设计里也是很常见的至少有90%的界面是采集的这种切换方式。为什么其实很简单。就是因为他简单高效、而且放置的位置也是页面内容区域最明显的地方。
充值按钮、也是在你的视觉相对会集中的地方。而且他和下方的操作按钮也都在一个区域。整个界面其实就是对不同信息模块进行不同的划分和分区。这样去处理B端的信息、能够最大程度上解决界面信息混乱的问题。我个人觉得B端界面大部分都是像抽屉。或者像一个整齐的工作太。
当你没有看之前，你会觉得按钮嘛。有什么不清楚的呢，有什么不会用呢。是的呀。在我写这篇文章之前也是这样的想法。但是当我去搜集了一堆的关于按钮的资料后。感觉这东西还真有意思。你可以用你的感性去做设计但是你也要明白理性的设计才能更好的让设计决策更加准确、更容易说服需求方、从而更好得服务于用户、赋能于业务。
唐纳德·A·诺曼在《设计心理学》中说设计是一种解决问题的方式，是一种创新的过程。设计师的成长始于对每一个项目的独特理解，止于对每一个细节的完美追求。
先赞后收藏、开启我们的学习旅程...
按钮在我们界面中也是大量存在的一个设计组件。大多数的设计师可能就不会太在意他，从而导致我们在设计过程中会出现一些问题。比如用户找不到入口、不知道到界面怎么操作等。
在大场规范里，都对按钮有一套完整的组件规范。在现在的设计当中，你可以不会做按钮但是你要会用。要知道在什么场景怎么使用这些大厂的组件。
在TDesign中是这样定义按钮的；按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。在Arco Design的按钮定义是；按钮是一种命令组件，可发起一个即时操作。
在各大场规范里面，对按钮的分类出发的维度不一样，所以对按钮的类型划分也都不太一样。但无论他们怎么分类，这样我们结合使用场景去用就不会有什么问题。因为我做的系统是用的ant design的规范框架。所以下面是总结了各大规范的内容的结合体。旨在更好理解按钮。（哈哈好像不怎么搭嘎，不重要）
本文按钮基础规范内容基于一下三个大厂规范而来
我们常用的基础按钮主要就分为、次要按钮、主要按钮、文字按钮、图标按钮、在按钮中添加图标、这几种按钮形式。
① 次按钮
常规按钮，用于非主要动作。如果不确定选择哪种按钮，次按钮永远是最安全的选择。
② 主按钮
突出“完成”、“推荐”类操作；一个按钮区最多使用一个主按钮。
③ 文字按钮
弱化的按钮，采用更轻量的按钮样式，可用于需大面积展示按钮场景，例如表格组件中的操作列。
④ 图标按钮
图标提供视觉线索，避免逐字阅读按钮文案，更高效地使用界面。
-需要在较小的空间内展示尽量多的按钮。-使用纯图标按钮必须有 Tooltip 提示按钮含义。
⑤ 在按钮中添加图标
用于对按钮含义补充解释，提高按钮识别效率。
在三个大厂规范里他们对基础按钮的划分也差不多，只是他们出发的依据不一样而已。大同小异。你可以理解东西就那么多东西至于怎么划分。条条大路通罗马嘛。我个人感觉ant的按钮规范做的会更普世。其他两个平台的做的就更简单纯粹。
在按钮的状态里如果从操作上出发应该分为可用、禁用、加载。
如果站在强调性上去看那就可以分为警告、危险、成功、可以与基础按钮同时生效，优先级高于基础基础按钮属性。
在按钮尺寸的规范制定里我更倾向于arco的规范、把按钮分成：迷你、小、中、大，四种尺寸。高度分别为：24px/28px/32px/36px。推荐及默认为尺寸「中」。可在不同场景及不同业务需求选择适合尺寸。
各个规范对按钮形状的规范基本都一样。提供长方形、正方形、圆角长方形、圆形四种形状。
在基础常规按钮之外还有那么一批特殊的按钮需要注意。虚线按钮、幽灵按钮
用于引导用户在一个区域中添加内容。
置于复杂或较深的背景中，避免按钮突兀地破坏背景的整体性。该场景下可灵活定制样式。
按钮的布局位置也是一个很讲究的事情。我们现在基本大厂的规范也都是从一些基础的概念出发所延伸出来的解决方案。所以我们了解了解这些普通的概念还是很有必要的事情。
在我要写这篇文章时，在网上翻找资料。于是乎就发现了在我们现在很多很常规的界面设计里面。各个元素的位置是有很多基础概念做理论支撑的。下面我们来了解一下这些有趣的概念吧。
古藤堡法则或者原则，剧说是由14世纪西方活字印刷术发明者古藤堡提出的。他这个原则大概意思是人们在阅读时遵循这某种习惯。从左到右、从上到下。（其实吧，我在网上搜了搜，感觉这个法则也需存在。但不一定是古藤堡提出来的。百度百科也没有说有古藤堡法则或者原则这一说。而且我百度了一下。最早出现这一说法的是0几年的一篇文章里。说古藤保法则对网页排版有帮助）
我们暂且就先相信这些基础的规则是古藤堡提出来的。那么根据他的这些原则，得出了我们现在熟知的一些理论。（这里吐槽一下。从左往右是近代西方传进我国的。我们国家的书籍是从上到下从右往左，新中国成立之后才采取了我们现在的这种阅读方式和习惯。）根据古藤堡原则我们可以得到一张古藤堡图。
在这张图中、把我们阅读的过程用四个区域进行了划分。第一视觉区、强休息区、弱休息区、终端休息区。这张图所表达的是在我们的阅读过程中我们的注意力在不同的区域是有强弱之分的。
有了古藤堡原则和他的这张图、我们发现在我们视觉阅读信息时对不同的区域的注意力是不同的。所以我们在设计的时候。会将主要的信息放到注意力强的位置上去。
比如在写一些文件时。我们会把日期和签名放到右下角的区域。在B端页面中我们会经常把标题放到左上角、然后把按钮放到右下角去展示。这些都和古藤堡原则有很大的关系。
费茨定律可以简单归纳为、幕布的大小和距离会影响到操作者移动目标的速度和准确性。是美国人类工程学部门的主任保罗·费茨博士在1954年提出的。
菲茨定律是对人类操作过程中的运动特征、运动时间、运动范围和运动准确性进行了研究。所总结出来的定律。我们简要的介绍一下这个定律。
简单的说费茨定律说的就是、我们在操作的过程中。距离越短、目标越大、用时越少。具体说一下费茨定律指的是，使用设备（比如我们的鼠标）到达一个目标（比如按钮）的时间和下面两个因素有关系。
01、设备当前的位置离目标位置的距离（D）。距离越长、所用时间越长。
02、目标的大小（S）目标越大，所用时间越短
该定律经常运用于鼠标从点A到点B的运动。例如，以一个更有效的途径使可接近性更大和提高点击率去放置内容，这个定律便显得重要。
我们在设计里主要会应用费茨定律的几个点来优化我们的设计。1、放大可点击元素的尺寸，但不能无限放大；2、减少移动的距离，综合权衡效率。防错、安全等要素；3、相关元素靠近；4、屏幕的边缘和角落无限大；5、方向利用
上面两个概念中。古藤堡原则告诉我们怎么放置按钮或重要信息才能让我们得视觉刚好的注意到他。费茨定律的应用让我们可能更高效和快速的完成我们的操作。那么下面这条送你的概念就是如果让用户完成目标。比如做一场活动。你怎么去吸引用户去点击呢。或者说用户的点击与哪些条件相关呢。
什么事福格行为模型、在体验设计中。我们可以通过福格行为模型去深入的理解用户行为发生的原因。和影响用户行为的因素。从而提示我们产品的体验，和不断地优化我们的产品。
福格行为模型，它以BJ Fogg（斯坦福说服力科技实验室主任）命名。表明一个行为得以发生，行为者首先需要有进行此行为的动机和操作此行为的能力。接着，如果他们有充足的动机和能力来施行既定行为，他们就会在被诱导/触发时进行。
福格将人们的行为拆解为动机、能力、和触发条件三个要素。认为只要三个要素同时满足时行为才会发生。表示为B=MAT，其中B（Behavior）是行为，M（Motivation）是 动机，A（Ability）是能力，T（Triggers）是触发。
这个例子引用来自知乎子木牧先生https://www.zhihu.com/question/500859092/answer/2631793047?utm_id=0
我个人觉得他的这篇关于福格行为模型写的很不错。下面大部分内容摘录于这篇文章内容。
举一个简单的例子，你看到朋友圈有人分享了水果的购买链接，最终你也下单购买了。这其中包含的动机、能力和触发分别是什么呢？
动机就是对水果的渴望，能力就是有时间，有金钱购买商品，而好友的朋友圈则是对购买行为的触发。
动机
所谓动机，就是行为的出发点。动机可以分为3个类别：感觉、期待和归属感。总的来说就是为了什么你的目的是什么。
能力
有了足够的动机之后，用户还必须要有能力来完成行为。能力包含了以下6个方面：时间、金钱、体力、脑力、社会偏好（社会的约定俗成、认知、从众等）、非日常（非日常的购物方式）。
触发条件
触发就是行为的刺激点，引导用户行为的发生。在上瘾模型中，触发可以分为内部触发和外部触发。
在产品设计中，我们希望能够实现用户自主的内部触发，比如每天7点钟，用户都能主动打开到蚂蚁森林收取能量。当你拿起手机时，会不由自主的打开微信。但是很多时候我们都无法唤起用户内心的触点，只能依靠各种外部触发。例如购物过程中常见的各种促销活动的广告位，或者优惠券即将过期的提醒等。
动机、能力、触发条件、这三者的关系是什么呢。动机、能力以及触发条件会构成一条行为曲线，用户的动机越强，行为过程中要求的能力越简单，加上特定的触发情景，用户完成行为的几率也就越高。
这福格行为模型。我在网上整体看了看。很有意思的，他并不是一个针对设计的一个行为模型。而是只对于人的。一大的行为模型。当你明白他怎么说什么的时候可以把这个理论用到很多的方面去。比如生活，比如人际关系。比如怎么能够让你的朋友给你帮个帮。哈哈哈
本来这部分内容是要将各大厂的示例界面拿出来逐个说说的。但是这篇文章，本来是2023年12月份就要写完的。一直拖到2024了才写完。没有了当初的激情了。所以这部分示例就只拿我自己做的SaaS平台里面一个小业务模块的界面拿出来浅谈几句。
整个就不谈什么项目背景、业务需求呀，什么的。单纯从底层的原理出发。去浅浅的谈一谈这个很平常的界面。首先页面上方标题的切换、这很成熟的处理方式、在B端设计里也是很常见的至少有90%的界面是采集的这种切换方式。为什么其实很简单。就是因为他简单高效、而且放置的位置也是页面内容区域最明显的地方。
充值按钮、也是在你的视觉相对会集中的地方。而且他和下方的操作按钮也都在一个区域。整个界面其实就是对不同信息模块进行不同的划分和分区。这样去处理B端的信息、能够最大程度上解决界面信息混乱的问题。我个人觉得B端界面大部分都是像抽屉。或者像一个整齐的工作太。
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发