绝对时间与相对时间

绝对时间

绝对时间包含：年月日、时刻

绝对时间适用于对时间精确度要求较高的时候，比如说订单创建时间、某项活动开始/结束时间、特定节假日简称等。绝对时间在信息表达上更加精准、正式，给人确定感和安全感；但是内容显示过长，占用的空间较大。

相对时间

相对时间的展示形式：刚刚、XX分钟前/后、XX小时前/后、X天前、昨天、明天、今天等

相对时间适用于对时间精确度要求不高的时候，比如说消息、通知类功能、Feed流。采用相对时间对用户来说理解成本低，不用去往前推算出发布的具体时间点；但是不够精确、并很难衡量两个时间点的临近性。

日期与标点符号

目前主流App上，年月日的常见的用法有“2022-01-01”、“2022.01.01”、“2022/01/01”、“2022年01月01日”、“2022-01-01 ～ 2022-12-30”，那这些日期格式是否都正确呢，日期的连接应该使用什么标点符号？

《中华人民共和国国家标准GB/T15834-2011标点符号用法》中对于连接号、点号、分隔号的使用场景有明确规定。

连接号（短横线“-”、一字线“—”、波浪号“～”）：标示某些相关联成分之间的连接；

点号（.）：作用是点断，主要表示停顿和语气；

分隔号（/）：标号的一种，标示诗行、节拍及某些相关文字的分隔。

表示具体日期

基于国标对于连接号、点号、分割号的使用场景说明，用阿拉伯数字表示年月日时应采用短横线“-”。在比较正式的文件、公告中，日期一般不用分隔符连接，而是直接采用中文的年月日连接。

表示日期范围

Antdesign规定日期范围需要在日期或时间范围之间显示波浪号 （前后需要空格），这种方式是不符合标点符号的使用规范的。

在标示时间的起止时，应该使用一字线“—”，而非波浪号“～”，波浪号主要用于标示数值范围而非日期的起止。日期带有分隔号横短线“-”时，可以采用“至”作为连接符；日期不带有分隔号横短线“-”时，可以采用一字线“—”作为连接符。注意日期与连接符之间用「空格」隔开。

时间

时间计时方法包含十二小时制、二十四小时制。在设计过程中注意区分十二小时制，上/下午和A/PM的位置区别。

日期与时间组合使用

当日期和时间连在一起时，两者之间用「空格」隔开，如“2022-01-01 16:00:00”、“2022年01月01日 16:00:00”。

涉及到周的时，可以将周放在日期与时刻之间，用「空格」隔开，如：“2022-01-01 周三 16:00:00”、“2022年01月01日  周三 16:00:00”。

涉及到日期和时间范围时，可在表示日期范围的基础上添加时间，如“2022年01月01日 16:00:00 — 2022年01月01日 16:00:00”、“2022年01月01日 16:00:00 至 2022年01月01日 16:00:00”、“2022-01-01 16:00:00 至  2022-12-30 16:00:00”。

专有名词

以月、日为标志的事件或节日，用汉字数字表示时，只在一、十一和十二月后用间隔号；当直接用阿拉伯数字表示时，月、日之间均用间隔号。

写在最后

设计虽然有很多的表达形式，但还是需要遵循文字规范哦。

“我们需要停止快速设计，学会减少设计。”

我们的心态需要从一次性做完全设计转变到进行小规模设计。那么，所谓小规模设计到底要怎样做呢？这篇文章来跟大家分析一下小规模的设计是什么样，它有什么好处呢？

为什么要做小规模设计

在讨论如何做之前，我们先谈谈为什么，为什么在设计、搭建和交付中小规模思维如此重要。这并不像人们想的那样，仅仅是为了让某些设计师和研究人员扫兴，他们出于某些原因喜欢对所设计的东西有一个整体的看法。

通过最小的设计来为客户或用户提供价值，可以给我们带来很多好处。首先，我们可以把一个有潜在价值的东西直接提供给某人，让他立即开始使用，而不是让他等待设计人员开发完其他几十个不相关的功能或更新。一般来说，只需非常小的变化或错误修复就可为用户产品体验带去巨大改善。

当然，有时候，设计上的变化可能不会带去任何影响，甚至是带去负面影响，这些缺陷我们越早发现越好。更频繁地运送小型成果，对我们理念和执行的反馈也能更高效地回输。

通过递交一个小规模版本，你能尽早预测未来会发生的大问题。想象一下，如果你早就知道某些功能鸡肋的表现，你根本就不会创建这些功能！想象一下，如果你不忙于搭建无人问津的庞大版本，你本可以向用户提供多少价值。尽早交付小型的设计，你就能及时获得相关信息，这些信息可以帮助你的团队对剩余的设计部分进行取舍。

通过把设计分解成可交付的小块，我们可以尽早且频繁地向用户提供价值，同时在投入大量资源之前及时获得反馈。这听起来真是美事一桩。

唯一的缺点是，小规模设计很难做得好，如果你做得不好，那还不如一口气把所有东西都设计完。

按理来说，小规模设计不应该比大规模设计难才对，但出于一些原因，许多设计师十分不擅长处理小规模设计思维。

首先，作为设计师，我们常常被教导要从整体上考虑产品和体验。这是件好事，因为我们得了解用户对产品的整个体验。事实上，大家都知道把东西分成几块来设计可能会导致不连贯和不一致的体验。

某位与我们交谈的设计师完美地解释了这一点。她的团队任务是为一个有不同类别内容的大型网站设计信息架构。工程师们想直接开始编写搜索内容的代码，但她觉得只提供一个类别的分类法是不妥的，因为她知道，一旦她评估了系统中其他类型的内容，工程师们会发现还有更多东西同样需要搜索。毕竟，你不会用搜索鞋子或汽车的标准来搜索书籍。她不希望得到一个不完整的模型，以后还得再做改进。

与我们交谈过的许多人都说，一旦设计进入市场，他们就很少有机会进行迭代和改进。当迭代和改进环节缺失时，设计者只能尽可能多地为初代版本添加细节。

当然，对于设计者来说，知道某项不完美的功能面世，且它永远不会被改进，这是非常痛苦的。毕竟这就是我们的工作。我们希望它是完美的。我们希望它能为人们解决问题。我们想让每一项作品都无愧于心。这些都是非常合理的反应。因此当我们确信完整版本会更好时，一般不会考虑交付小规模且不完整的设计。

小规模设计的意义在哪里

小不等于坏

Jobs4Pets.com上一项小型但重要的视图功能

我们经常把某项产品的初代版本称为MVP或最小可行产品。但是，人们往往忽略了”可行”两个字，而这恰恰是最重要的。当你创建一个新功能或产品的初代版本时，尽管规模再小，它也必须是可行的。它不应该存在问题，不应该无法使用，更不应该带去糟糕的用户体验。

请记住，我们进行小规模设计，并把它交付给用户，目的是为了了解关键信息。这就是生产最小可行产品的全部意义。如果我们推出了一个糟糕的、有缺陷的或无法使用的产品，我们所了解到的无非就是人们不喜欢这个糟糕的东西! 以及我们必须弄清楚，人们之所以不使用我们的新功能是因为它不对，还是因为它虽然功能完美，但可操作性太差，以至于没有人能够坚持使用。

小不等于无关功能的混杂

小规模设计、搭建和交付的另一个困难是，我们可能会倾向于一股脑交付大量的小功能，因为这些功能可以为快速构建，所以我们就先将它们做了。

思考一下，你正在构建一个让人们搜索和申请工作的界面。有很多东西需要你来完成，例如，你需要用户能从潜在雇主那里得到带有工作描述的招聘信息；你需要一个要求求职者提交他们个人信息的界面；你需要一个能让雇主审查申请的系统。你还可能会需要某种档案或账户页面，让流程双方都将信息存储进去，这样他们就不必在每次发布或申请工作时都重复输入信息。

上述所有大系统都包含多个小功能在里面。例如，申请系统可能包含暂停功能，求职者可以暂停申请，过一会再来完成。或者，发布系统可以让雇主在需要另雇他人时重新发布工作描述。

现在，作为设计师，你可能认为你需要一次性交付所有功能才能打造一个有力的招聘网站。但事实并非如此。你要做的是，确保你搭建各项功能时采用了正确的设计顺序。比方说，重新提交招聘信息的功能应该推到后面，在此之前，应当设计首次发布招聘信息的界面。同时，应该先设计出令人们查阅各种工作的方法，然后才轮到申请工作界面的开发。

每次你设计和发布的东西都应是有用的，而且应该以合理的方式出现在现有的界面上。

小但有用

最重要的是，你发布的任何东西都应该有益于目标用户。如果你有一个非常大的用户群，你的设计可能不会立即对每个人都有用，但它应该有一定的使用性，至少足以让你得到反馈，并在下一次迭代中完善版本。

对一个招聘网站来说，最小可行产品是什么？要想交付某版本以获得用户反馈，你能做的最小努力有多少？

如何进行小规模设计

小规模设计涉及很多技巧，下面这些技巧十分实用，且可操作性强，并且仍有发展的空间。例如：

理解目标

小规模设计最重要的部分就是理解你正在创建的功能或产品的核心目标。如果你的目标太大或者你对目标理解不透彻，就很容易因为 “有人可能需要它 “而继续增加一个又一个的功能。

例如前面提到的求职网站。如果它是一个普适型的招聘网站，那么你的设计将与针对专门行业的招聘网站有很大的不同。过于宽泛的目标会影响你的搜索选项、你期望显示的工作数量，以及对申请表格的要求等等。

锁定明确的目标用户，你就已经成功了一半。设计一个小型的、有针对性的功能或产品对你来说作用更大，所谓为 “所有人 “设计的大型功能，实际上对任何人都没多大用处。

做好一件事

假设你正为你的求职网站设计信息表。你可能想广泛地构思，试图了解雇主和求职者可能需要的所有不同的报告，然后把它们都设计出来。

Jobs4Pets.com的信息报告案例

花时间研究哪些报告形式最好用是完全合理的，但不妨考虑一次只设计和搭建一种，最好先做研究，找到那些价值最大化的报告形式。为什么要把时间消耗在搭建价值最小的报告形式上呢？这样反而浪费了用户时间。用户可能根本就不需要你手头搭建的那些逊色的报告形式。通过一次只设计和发布一种类型，你会得到更快的反馈，且能定期为用户提供价值。

一次仅设计和搭建一种类型有助于为你的用户提供最大的价值

这种设计思维不只适用于报告。如果你打算发布多种类似的产品，看看是否有可能仅从一个开始，到后期再逐渐增加。

不要从代码开始

设计一个新功能或产品的方式有很多，我们可能会在会议上花大量时间来争论最佳的方式。

理想情况下，我们可以搭建许多不同版本，然后看看哪个版本更受欢迎，但这导致了另一个问题：编程和代码成本不菲。另一方面，原型和实验法可是相当便宜。

与其直接跳到设计完整的功能，让工程师们立即开始工作，不如尝试设计实验。试试礼宾服务测试或绿野仙踪实验。建立一些交互式的原型，与用户一起测试。

没有规定说设计师只能设计像素般完美的界面，我们也可以成为实验设计师。

不要立即面向广大群体

设计师在向人们交付不完美或未完成的设计时，常常很在意的一件事情是，用户可能会感到失望。毕竟，推出半成品最终可能会对产品和公司产生非常不好的影响。

但向一小群用户提供内测产品就完全不一样了。在几十个甚至几百个用户身上测试新的设计，可以为团队提供巨大的价值，即发现关键的见解和潜在的问题，同时不会有让整个用户群失望的风险。

不要再古板地认为，推出新功能必须通过新闻发布和市场推广才能实现。虽然只是在几十个测试者或一些内部人员中提供内测版本，但你仍然在向用户提供价值。如果交付对象的规模较小，你对失败的担心会少很多；如果你先在较小的受众中测试了你的设计，你失败的可能性也会少很多。

接受不完美

除了上述技巧，团队还应学会接受不完美。事实是，世界上不存在完美的产品；此外，在多数情况下，我们甚至不知道什么是完美。显然，我们不应该向人们提供无法使用、有缺陷或不安全的软件。但是我们也不需要花几天或几周的时间去纠结每一个像素和每一点抛光，特别是在连这个功能是否有用都不确定的情况下。

想想看，我们到底把多少时间浪费在所谓华丽的设计上，而对应的产品甚至无人问津。比起纠结细枝末节的完美，如果把时间花在测试想法和找到人们真正想要使用的产品上，我们的收获会更多。

允许迭代

当然，如果你要接受不完美，最好也愿意进行迭代。我们接收到设计师在敏捷软件开发团队工作时最大的抱怨之一是，团队从不进行迭代。团队会非常努力地工作，争取快速交付，然后从不反思或改进功能。有时候部分团队甚至不测试产品效果。

如果你从不回头去改进（或扼杀）你不完美的功能，那么没有人会放心地发布他们认为可能不完美的东西。我们必须致力于向用户学习，不断改进已经投放在外的功能和产品，而不是不停地向用户输送无效产品及功能。

背景

“时间”作为人机交互界面中经常出现的元素，本质上都是为了去传递时间维度的信息。但是我们平时在使用一些互联网产品时会发现，关于“时间”的显示状态或形式在不同场景、不同页面里往往是不太一样的，这是出于怎样的考虑呢？今天我们就来聊一聊，如何在产品设计中把握“时间”显示的诀窍，让其在页面中发挥最大的作用。

“时间”元素的分类

按照“时间”元素在页面中的出现场景和所起到的作用，可以大致归为以下几类：

A.事件的关键构成要素

B.行为的时间标记

指用户本人作为行为主体或行为的接收对象，在某一动作发生后为其所打上的时间标记，比方说“我”购买商品下单的时间或收到一封邮件的时间。

C.内容的附属信息

用户在使用产品进行内容消费时，时间作为该条内容的附属信息，起到补充说明的作用，比方说一条短视频或新闻的发布时间。

在上面的案例中，我们会发现“时间”在对应场景里所发挥的作用不同，用户在使用产品时往往对时间存在不一样的关注程度。因此我们在做页面设计时，要根据具体场景和用户诉求判断“时间”元素的重要性和优先级，通常情况下：时间作为事件的关键构成要素＞行为的时间标记＞内容的附属信息，之后再思考用什么样的设计形式去展示来达到我们的目标。

“时间”的呈现方式和运用技巧

在讨论“时间”元素的设计之前，我们先共识一些有关时间的理解和概念。时间可以划分为“时间点”和“时间段”两个维度，类似我们高中物理时学过的“时刻”和"时间间隔“的概念。

拿开会举例子：“下午4:30会议开始”、“下午6:00会议结束”描述的是事件开始、结束的时间点，而“整个会议持续1.5小时”、“会议时间为下午4:30-6:00”描述的是事件过程的时间段；但是，我们在会议开始时也可以这样讲“会议将在1.5小时后结束”。

通过上面的例子我们可以发下，同样是描述一件事情，运用不同的时间点、时间段的方式去表达，意思一样但却传递出不一样的情感，并且两者存在如下的“换算”关系：

1）时间段加上定语会变成时间点（但同样是时间点，“下午6:00”是绝对时间，而“1.5小时后”是相对时间，刚好对应到我们设计时两种时间戳类型）；

2）两个时间点之间则表示时间段。

所以，我们在平时表达或设计时，要先想清楚用“时间”是想侧重表达某一事件、动作发生的即刻时间节点？还是想描述其所持续的时间过程？之后我们再针对不同语境去选取合适的文案和呈现方式。

时间的呈现方式离不开：时间戳类型、时间显示格式、时间颗粒度。其中，时间颗粒度指的是描述时间的最小单位，往往颗粒度越细，给用户传达的确定感越强（如转账时间是12日15:15:20），对用户的激励作用越明显（如距抢购结束仅剩00时01分23.6秒）。

1.绝对时间戳

绝对时间可理解为事物发生时的确切时间，由具体日期（年、月、日）和时间（时、分、秒）组成。使用绝对时间戳的优势是信息传达精准，显得正式，给人确定感和安全感，同时排布规整，便于形成认知习惯；但缺点是内容显示过长不利于阅读，并且占用空间较大。

在时间显示格式的选择上，为了避免混淆，推荐使用文字格式或“-”分隔符来分隔日期，而“/”分隔符在不同国家有不同的展示顺序习惯，容易造成误解，尽量少用。

时间颗粒度的选择依情况而定，一般场景总结如下：

2.相对时间戳

相对时间在产品设计领域通常是指内容生产、到达、或状态发生改变时，距当前时间点的时间差值，多用于push通知、信息流产品，侧重强调内容的时效性；而“倒计时”也算相对时间的一种，侧重营造时间的紧迫感。使用相对时间戳的优势是用户辨识、理解成本低，不用通过计算来判断时间过去或还剩下多久；缺点是不够精确、正式，并很难衡量两个时间点的临近性。

在使用相对时间是，要注意格式友好。时间单位可随着时间的推移自动改变；数字不要过多，尽量取整；并且可设置其与绝对时间转换的临界点。

总结

在设计界面中的“时间”元素时，要遵循场景贴合、便于阅读理解的总体原则；之后根据场景和目标，再选取合适的“时间”呈现方式（包括时间戳类型、时间显示格式、时间颗粒度）。

当时间作为“A.事件的关键构成要素”时

一般情况下使用绝对时间，并且要看是为了强调某一关键时间节点，还是侧重表达整个持续过程。此外，选用关联场景的文案或者运用倒计时（相对时间）的形式，可一定程度上促进用户更加集中注意力，提升对信息的关注度，并达到特殊的激励作用和转化效果。

当时间作为“B.行为的时间标记”时

该场景通常是为了追求确定感，通过提供精准的时间和日期便于用户定位到过去或将来的某个时间点（段）去查找、回顾相应内容，因此大多数采用绝对时间，时间颗粒度依具体情况而定。

当时间作为“C.内容的附属信息”时

如果所设计的产品供给内容的更新速度快，用户活跃度高，并且此时内容的时间信息准确性不那么重要反而更侧重于内容的时效性，那么通常会使用相对时间。部分信息流产品（比如新闻资讯类、社区类）会在列表页使用相对时间，在详情页使用绝对时间，时间颗粒度也是依情况而定；并且会随着时间推移，在某一时间节点前把相对时间转换为绝对时间。

前言

说起按钮，很多做设计的小伙伴是熟悉的不能再熟悉了，它是我们在设计界面时最常用、最重要的组件之一，也是易被忽略的元素之一，所以在设计之前，做好对按钮组件的认识、了解非常有必要。

从我们有记忆认知开始，按钮就时刻在和我们打交道，墙上的电灯开关、电视机的调节按钮、遥控器的按钮等等，这些物理按钮不仅仅是当下UI按钮组件的前身，且不会消失，依然会有很多非数字化的产品及机器设备在持续延用，不管如何演变，基本不会脱离实物参考。按钮最吸引我们的莫过于通过简单触摸就能轻松满足自己的行为需求，按钮设计的直观性及易用性会影响着人们完成一件事情的意愿及效率。

在UI设计中，如何完美的避开问题、把按钮设计的更好，是每个设计师需要深思的问题。按钮设计的好坏，将直接关系着用户引流、触发行动、产品转化率等至关重要的问题。另外，精致的按钮也会让整个页面的视觉提升档次。本篇文章将对按钮作出解析，介绍在设计按钮时需要着重考虑的因素及设计标准，并将理论付诸于实践。

分享目录

一、按钮的作用

二、按钮的类型

三、按钮的状态

四、按钮的大小及风格

五、常见误区及避坑指南

六、总结

一、按钮的作用

1. 什么是按钮

在UI设计中，按钮是一个明确指示交互行为动作的组件，主要用于触发某一个即时操作，很多时候，我们需要采取下一步行动或返回到上一步，都要通过按钮（部分场景可用手势交互）来完成。

在视觉层面，按钮的组成看起来很简单，由一个底色块/线框加上一组文案即可组成，但真正要将按钮设计好，仅停留在视觉层面并不严谨，其大小、位置、色值、文案...等每一个细节的处理都关系着用户的操作体验，下面的这几种情况大家肯定有碰到过：

2 按钮有什么用

通常，我们在设计按钮之前，需要详细理解按钮所存在的意义，哪里该加、哪里不该加、为什么要加，主要从以下几点来体现按钮的作用：

2.1 功能性操作

这种按钮很常见，比如展开、收起、下拉、加减等，按钮视觉较弱，重点强调该页面的功能，突出主体信息，在操作之后会发生一些交互变化，这类按钮主要起到功能形态的作用。

2.2 明确引导下一步操作

当用户完成一个页面的内容填充或信息确认，就会失去视觉焦点，而下一步按钮就会聚焦视觉重心，通过文案告知用户下一步该怎么做，常见的有保存、下一步、支付、确定...等。

另外，用户需要完成某个任务，但同一个任务流程的信息、种类较多，这时就会通过分步骤、分页的方式，并在每个步骤的末尾增加一个能起到上下衔接作用的按钮，明确引导用户进入下一步操作，以此来提升用户完成整个任务的成功率。

2.3 培养行为习惯

如果在操作某个按钮之后得到了一定的利益，且能持续为用户带来价值，那么不妨将这个按钮设计的更醒目，并在同等级但不同的地方保持视觉的统一，持续培养用户点击习惯，当用户下次再看到类似这种按钮时，惯性思维就会引导点击。

3 按钮的组成

在大部分的认知中，最常见的按钮就是一个底色块加上一句文案就完成了，殊不知一个好的按钮需要经过很多细节的把控，才能发挥出按钮的最大作用。例如文案的长短/边距、容器的大小/圆角、填充色的主/次之分...等，下面我们来看看一个按钮到底是由哪些属性、元素组成。

◇ 圆角：传达出按钮的气质，决定用户的视觉感受，最常见的为小圆角，也有较为严谨、力量型的全直角、卡通可爱、年轻化风格的全圆角。

◇ 图标：用于按钮含义的图形化抽象表达，例如加载中、编辑；

◇ 容器：整个按钮的载体，容纳文案、图标等元素；

◇ 边框：确定按钮的边界，常用于次级按钮描边；

◇ 文案：用文字表达按钮的含义，精简文案；

◇ 背景：表达按钮的当前状态，对按钮合理的使用主体色能有效传播品牌气质；

◇ 投影：让按钮具有层次感，配合渐变背景能体现出微质感的效果。

二、按钮的类型

1 功能类型

按照功能属性分类，可将按钮类型分为流程控制和功能选项操作。

流程控制：常见的传统按钮，如支付、下一步、确定、保存等，容器承载着图标、图标+文案、文案。

功能选项：开关/加减控件、标签栏/分类、状态切换等，操作之后只针对当前页面做出属性的调整，不涉及流程的变化。

2 视觉样式（横向）

视觉样式有所区别，在不同的页面可能存在同等级的权重。

常规按钮：最常见的按钮，当同一个页面出现多个常规按钮时，会有主次之分；

虚线按钮：常用于添加、上传等操作；

文本按钮：仅用文字作为触发点，部分会用主色、右侧箭头、下划线等方式突出。

3 层级分类（纵向）

高权重：带有填充色的主操作按钮，当同一个页面存在多个按钮，只允许存在一个高权重（主操作）按钮；

中权重：带边框轮廓的概述按钮，同一页面可存在多个中权重的按钮；

低权重：纯文本按钮，以及浅色填充+浅色文字的按钮，同一页面可存在多个低权重按钮。

三、按钮的状态

在设计按钮时，为了体现按钮不同的具体含义，以及后续设计、开发的统一性，明确按钮交互样式是设计过程中不可缺少的重要组成部分。设计师需要在不干扰界面视觉的前提下，对每个按钮的样式、状态有清晰的定义，与其他元素、布局区分开来，以确保按钮的可供性。常见的状态主要有以下几种：

◇ 待激活状态：需要完成一定的操作、或有一个以上必要的前置条件后才允许交互；

◇ 正常状态：按钮的正常显示状态，可进行交互操作；

◇ 点击状态：触碰效果，表示按钮正在进行交互且未结束，会在正常状态的基础上增加一个纯黑色不且透明度为10%的蒙层，交互完成后，即会引发此按钮的真实作用；

◇ 加载状态：产生交互后没有立即执行、或系统需要一定的时间才能执行完成；

◇ 禁用状态：系统默认暂不允许操作、或需要用户离开此页面去完成一定的前置条件才能使用。

四、按钮的大小及风格

1 按钮的尺寸

在PC端设计按钮时，因为鼠标的精准点击，我们通常会将按钮设计的小一些，同时也能让整个界面看起来更加细腻，只要不影响操作，36px~48px范围内的按钮是比较常见的。但移动端的按钮设计，我们要更多的考虑到物理尺寸，即手指（指尖）在操作时需占用的实际范围。

iOS的设计规范中，将按钮的最小点击区域规定为44pt，一旦小于这个数值，操作时就会出现精准度较低的情况，导致操作失误或无效。

在实际的iOS界面中，很多应用在设计按钮时并未严格遵循最小44pt的这个标准，例如很多一、二级界面的次级功能入口，有些连30pt都不到，也并未对用户造成多大的影响，可能是对应的功能权重、用户点击频率都非常低的原因，还有一部分文字按钮，其本身永远都不可能达到最小的触控标准（触控热区加大即可），所以关于按钮的尺寸大小并非规定的很死板。

费茨定律告诉我们「目标尺寸越大，移动至目标所花费的时间就越短」，所以，在满足手指触控范围的同时，还要根据所对应功能的权重占比来适当调节按钮的大小。不难理解，当某个元素的尺寸越大就越吸引眼球，就更容易被视觉捕捉到，也更容易被「点击」，精准度被降低的同时，也减少了用户的操作成本。

我们以8像素栅格系统、iOS的2倍图为例，较为常见的有：小型-64px、中型-80~88px、大型-98px、超大型-随机这四种按钮。

2 按钮的风格

在UI设计中，几乎每个页面都存在按钮，样式、种类也有很多，但设计风格常见的也就几种，例如扁平化、微质感、拟物化、新拟态（概念）...

2.1 扁平化按钮

通常在容器中填充一个纯色即可，没有多余的视觉干扰，操作简便，这种类型的按钮一般在应用中用的最多。例如：工具型应用、B端应用等。

2.2 微质感按钮

相比扁平化，填充渐变色再加上浅浅的投影，不仅能保持信息内容的简洁、让用户产生更强的操作欲望，还能让页面具有品质感，更加耐看。例如：年轻化应用、娱乐类应用、儿童应用等。

2.3 拟物化按钮

大多设计的很立体，3D质感、属性样式丰富多彩，参考现实世界中的事务或摄取应用场景中的某些元素，使其更加逼真，有较强的代入感。例如：游戏类应用、H5专题、运营banner等。

2.4 新拟态按钮

2021年风靡一时，几乎无人不知，但要想落地却不太现实，实用性不强，也只能在飞机稿中出出风头，随着时间的流逝，逐渐销声匿迹，不知哪天会不会经改良后再次面世（当初扁平化问世，也是几经波折，经多年改良才逐渐被大众所接受）。目前只有少数工具类应用使用了新拟态，例如：计算器、AI设备控制、有道云笔记等。

五、常见误区及避坑指南

1 主/次操作层级分明

当同一个页面出现多个按钮时，只允许存在一个主操作按钮，其他不做特别设定。当然，如果次要操作较多，也不益过多的出现次级按钮，可根据权重降级处理，以小图标或文字按钮的方式呈现。

2. 统一样式

主/次操作按钮要统一样式，用户需操作时，尽可能的减少其思考及选择时间，按钮应该迎合用户固有认知及惯性思维，节省时间成本，提高操作效率。

3. 圆角值

在大多数界面设计中，我们通常所见到按钮还是小圆角和全圆角居多，也有部分按钮完全直角，需要根据产品的行业属性与气质来选择最合适的圆角类型。不管如何，尽量避免大圆角（卡片除外）按钮，不方不圆、不伦不类的，显的不够成熟也不好看。

3.1 小圆角

小圆角按钮的圆角值通常控制在高度的1/5、1/6，儿童类型的应用也有1/4（较大）的，并非绝对值。如果习惯使用8像素网格，根据按钮的尺寸大小，直接将圆角值固定在8px、16px、24px（较大）这几个数值，能减少设计组件的数量，也利于开发做组件封装后续调用。

3.2 全圆角

全圆角按钮的圆角值固定为高度的1/2，或者在软件的圆角设置中直接将数值拉到极限。

3.3 直角

不设圆角值，在PC端较为常见，也有部分较为严谨的移动端应用使用直角按钮。

4. 按钮中的文字

按钮中的文字要便于用户理解，不能过于陌生或绕口，用户碰到不易理解的信息会产生困惑，甚至误导用户导致操作失误从而造成损失。除此之外，文字还需要精简，不能过多或折行且能合理的引导用户完成操作。

上图的文案歧义就很明显，自以为聪明的设计师想要挽留用户，刻意将主次按钮样式对换，希望用户操作不成功，那么用户在需要取消订单时就疑惑了，到底是点击「确定」还是主操作按钮「取消」才能取消成功呢？或许稍加思考，用户也能反应过来，但无疑增加了选择难度、思考时间及操作成本。

5. 文字与按钮比例

按钮中的文字太大或太小都会影响用户对信息接收的效率，大小比例需要适中。文字太大会感觉很拥挤（跟大家衣服买小了感觉一样），没有呼吸感，要给文字四周留下足够的空间，同时文字太小会显得小气，看起来也会比较吃力，不利于信息接收。

6. 按钮与其他组件的区分

设计好按钮组件之后，页面中的其他组件或元素要与按钮有很明显的区别，避免让用户产生不必要的误解。

7. 弹窗主/次按钮的位置

在弹窗中，主按钮是在左？还是在右？这是一个争论不休的问题，那么不争了，在移动端的弹窗设计中，主按钮靠右就行了，不一定绝对正确，但绝对不是错的。根据调查数据显示，单手使用右手操作手机的用户比左手操作手机的用户量高，且用户也有一定的意识，左侧为上一步、右侧为下一步，顶部左侧为返回，右侧为保存或确定。

8. 无障碍设计

可访问性是按钮设计最重要目标之一，不仅要样式统一，还应符合用户的认知，让用户能快速知晓这个元素能否点击？点击之后会发生什么？甚至有种似曾相识的感觉。如果将按钮样式设计的与用户认知有较大的偏差，不易于用户理解。

9. 减少使用禁用按钮

在表单设计中，大部分都需要用户完成一定任务之后才能正常操作下一步按钮，在完成之前，需少用禁用按钮，在前面有讲到「待激活状态」，即在按钮中填充浅浅的主体色等待用户完成任务激活。

通常系统默认不允许操作或存在时间限制会用到填充为灰色的禁用按钮，即便如此，也要尽量让系统将其隐藏，万不得已的情况下需要在按钮附近说明情况，以免使用不当引起用户的负面情绪。

10. 投影的使用

在给按钮添加投影时，选择灰色或纯黑色加调整不同明度即可满足基本效果，但如果想要更好的视觉体验，可以基于按钮本身的色值来调整，让投影效果看起来更舒适，跟页面更搭。另外，切勿过度使用投影，宁缺毋滥，若按钮的投影太深，看起来粗糙脏乱，还不如不用，颜色较浅的按钮尽量不使用投影，否则可能会影响按钮的识别度，让这个页面看起来不够清爽。

六、总结

对于设计师来说，按钮作为设计组件之一，有很多细节容易被忽略，我们需要对每一个细小的元素进行深入思考，如论任何大小组件，都需要做到精益求精，才能给用户带来更好的使用体验。

以下内容主要分成两大部分，第一是聊聊响应式和自适应的区别和原理，以及我们应该如何去设计响应式界面；第二部分也是比较关键的B端系统设计的核心，B端设计中台完整构建过程的具体步骤，以及应用到的格式塔原则，和命名的一些注意事项，内容较多，大家可以根据上述目录来选择性阅读。

1.1多端兼容设计的发展史

简单概括多端兼容设计的发展史，最早是桌面端，比如桌面的一些应用；后来出现了移动端，针对移动端大家用的都是WAP，指一种无线应用协议，大家在用手机浏览一些网站，会把网站翻译成一种低流量的浏览方式，比如去掉图片大图，只剩全文字，因为当时网络不好，早在3G和2G时代移动端用的都是WAP；在2008年之后出现了响应式，也就是做一套代码可以兼容三端（网页、移动端、iPad）设备，在发展的同时也遇到很多问题，但响应式同时也遇到了很多问题；于是又出现了自适应，指不同的设备打开不同的页面进行自适应，自适应能增加效率，但需要增加工作量；2017年以后直到现在看到最常用的就是渐进式，类似完整的像在使用一个APP。这是多端兼容设计的整体的发展。

1.2 响应式布局的种类

1.2.1 响应式布局RWD

可以理解成用户在手机、电脑、ipad打开同一个界面，所呈现的界面是一样的。需要考虑移动端设计和网页端怎么通过一套代码进行兼容。

1.2.2 自适应布局AWD

自动布局算是响应式的一种，但平时看到很多响应式其实并不是真正的响应式，而是自动布局，因为界面在不同的设备用的是不同的模板，当我们用电脑打开呈现的是一套模板，而用手机打开则是另外一套模板，这种看起来是响应式，其实不是。因为当我在开发者模式下调节不同设备展示时，就会发现，其实是换了一个网址来根据不同的设备进行自适应的，而真正的响应式是不需要刷新的，在拖小窗口的时候就会变成手机端的那个样子。

1.2.3 渐进式布局PWD

渐进式布局是近几年比较新起的，这种布局设计，很像一个网站或者本身它就是一个网站，但用起来就像一个APP一样，看到这里大家很容易相到，小程序就是渐进式布局得一种，小程序明显是一个网页，但通过技术的一些嵌入和一些接口或者缓存的方式的操作，让用户在使用的时候感觉小程序就是一个APP，但核心技术还是web网页。

1.3 如何应用设计响应式

响应式的原理是通过定位的方式来做响应式的各种开发，需要在页面中至少标出这十个点：中心点，上下左右点，上左上右点和下左下右点，这几个点其实就代表了做响应式和做布局相应的位置。这样可能大家不容易理解，其实结合figma来看，这些点对应的就是这样（如下图），在figma中的布局点。设计师通过调节图形的布局点，可以做到在页面拉伸时，让想动的元素跟随变化，不动的元素静止不动，这就是响应式的原理。换言之，我们做响应式布局的原理也就是通过figma或者sketch中的布局约束这个功能来实现的。

1.4 响应式和自适应的区别

01、响应式

如下图是响应式的优点和缺点。响应式其实就是只开发一套页面，这个页面兼容三端。虽然做了响应式，但如何响应是需要设计师去设计的。比如我们设计了一个移动端界面，然后全部做好对应的自动布局，再进行页面拉伸，内容随之会发生变化，比如当拉伸到1024*768的时候，也就是iPad的尺寸，就会发现局部在设计上有些不合实际情况，这时就需要设计师在对应尺寸的设计稿上进行内容上的微调，比如按钮不可能那么长，就把按钮设计的短一点。当继续进行拉伸到1440网页的宽度时，然后再酌情针对网页尺寸的呈现样式，局部进行尺寸的调整，比如文字和按钮被拉伸到网页版都需要居中对齐，电脑端的样式就需要设计师重新排版了。

通常在B端系统，设计师需要做响应式设计时，往往是从大往小做设计，这也取决于这个B端产品是否需要进行移动端的设计，《B端设计总概二》中提到过什么情况下进行设计B端移动端。如果需要设计B端移动端，就需要我们将网页改成移动端设计，比如B端的侧边栏导航在拉伸到移动端时，就会变成用一个折叠悬浮的iocn来替代等等这样设计上的改变。在figma中，做三端拉伸时候，可以用断点插件来进行演示，通过对断点插件的设置，就可以完美的看到页面在三端不同情况的适配呈现，断点插件用来做演示非常方便。

02、自适应

如下图是自适应的优点和缺点，其实就是一个项目开发三个页面，分别做定制设计，网页端、移动端和Ipad端。

2.1必读前言

我们都知道2021年也就是今年是我国新基建的元年，十四五规划2035远景目标里提到重点发展传统企业数字化转型，尤其是今年我们设计师更能深刻体会，C端和B端已经是完全两个不同的行业，C端发展近十年，已经很难再做到创新上的突破，该做的功能和创新都已经做了，而B端这片蓝海才刚刚开始发力，很多企业也都在考虑B端系统的搭建，降本提效率成了很多公司新的指标，因此数字化转型重点在于B端系统探索，B端重点在于中台的搭建！设计师通过设计中台，构建出基本的业务类型，再分类到业务中，构建出不同的业务界面，所以设计中台非常关键，很多公司经常会用这两个系统去构建，Antdesign和Elemnet就是设计中台，我们会发现用Antdesign可以做出很多的系统，那怎么进行设计中台的设计呢？和我们设计师有什么样的关联度呢？带着这个问题，我们深度探索B端设计中台的落地！

2.2 中台的概念及作用

概念：中台是互联网的术语，一般应用于大型企业，中国互联网的变革永远是从大型互联网开始，大型互联网公司引发了技术的变革，这也是中台的兴起，一般指搭建一个灵活快速应对变化的架构，快速实现前端提的需求，避免重复建设，达到提高工作效率目的。

作用：降本提效。如果没有组件库，普通设计师一天最多做十个页面，再多就不太可能了，如果有组件化得产生，一天可以做一百个左右的界面。在面对B端系统这样几千个页面的巨大的工作量前，组件库的作用尤为重要。但如果落地，就需要前端工程师的密切配合，因为设计师设计的组件只是一个样式，而前端需要把组件进行代码化，所以组件一定是代码化的，也就是说只有代码化的组件才是真正的组件。所以视觉组件的复用，和前端代码的复用，可以大大提高设计师的工作效率。

2.3 设计中台的构建过程

2.3.1 基本库建立

基本库指的是一些色彩系统、字体系统、图标系统、栅格系统、间距系统等等，之所以强调系统两个字，有系统就要统一规则和统一规范，然后进行调用应用在系统中的各个地方，比如我们想调用一个颜色，不是去随选用一个颜色，应该严格的从色彩系统中去调用，如果系统组件库里没有这个颜色，我们也绝对不可以使用，可以先用替代色做或者根据业务再进行补充颜色进组件库为了后续的调用，这是一种比较严谨的使用方式。所以在建立组件库的时候我们要考虑全面，组件库中如果没有相应的组件，我们应该试着反推一下，是否要加进组件库中去，来进行系统的调用。在做中台的过程中，我们一直使用Antdesign，我们对组件的名称，组件的分类其实一点都不陌生，其实Antdesign也在借鉴国外的Bootstrap组件库（大家感兴趣可以下载Bootstrap组件库进行查看），所以并不是Antdesign组件库形成了一定的规则，它也是在沿用别人的规则，而这些规则也需要不断的有大公司去继承出来，所以慢慢衍生出来现在这样的组件库，那中台设计，首先要搭建基本库，把基本库里的基础一些系统搭建好后，我们继续去做扩展库。

2.3.2 扩展库建立

如下图，扩展库中包含了很多内容，比如分了四类，导航系统，数据录入，数据展示和反馈系统。其中导航系统又包含了，面包屑导航、下拉菜单、导航菜单、顶部导航等等，包括后面的数据录入、数据展示、反馈系统也包含了很多内容。我们做这样的扩展库，也不需要做成像Antdesign的组件库里包含的那么多，或者和新出得字节Arco组件库，因为它们面向的是系统级的解决方案，各行各业都可以用它，它面向的是一个大系统，也许我们只涉及到了其中的20%，因为也没有一个系统能用到它所有的组件，所以我们自己在设计组件库的时候，一定是按照我们自己项目的范围去做组件库，而不是做一个大而全的，大而全的组件库对我们也没有意义。它们做的是公共平台，而我们要做的是一个专属平台。

2.3.3 方法库建立

形成完基本库和扩展库后，第三步是建立方法库。方法库告诉我们的是什么时候用，比如我做了一个多选框，这个多选框应该什么时候用，是不是只要遇见一个选择就去用多选框，肯定不是，应该加以说明什么时候用这个多选框。类似于是组件的设计说明。

2.3.4 案例库建立

最后再做一个案例库，最佳实践库，具体组件什么时候用我们知道了，接着案例库就是在告诉我们应该如何正确的使用，或者说的方法是什么。比如标签的左对齐和右对齐，这种情况都对，什么时候用顶对齐，什么时候用左对齐，什么时候用右对齐呢？那么根据眼动仪实验数据数据来看，并且结合给出一些工作中业务中的最佳实践得案例放进去，给使用的人去做指引。

所以设计师做的事情，不仅仅是应用组件库和创造组价库，还应该指导其他设计师，指导开发人员在去复用每个页面组件的的时候，应该怎么正确的使用，这也是在B端设计中一个关键的环节，同时我们的视觉系统一定也是和业务有关联度的，所以在B端中做设计一定也不会脱离业务去做，我们一定要联系到实际的业务场景中，这个业务场景指的就是业务和视觉的结合，在做C端的时候，业务场景一定不会比B端多，C端的业务场景大多是定制化的业务场景，它要求的是个性化，不要求通用，尽量得个性化，比如图标、按钮、页面，而B端需要统一化，中台组件库的落地，可以大大提高设计师的工作效率和开发人员的协同效率，严谨的调用组件使用组件，可以使得系统页面保持高度的一致。

2.4 认识格式塔原则

2.4.1接近性

如图1：可以看出纵列的关系更紧密，因为纵间距小于行间距。

如图2：可以看出行间距大于列间距，它得横向关系更加紧密。通过图中这样的视觉设计为什么会感觉间距更加紧密呢？这属于用户心理学的应用，如果元素相邻的更近，元素之间的关系就会更加的紧密。

如图3：如果元素相邻的关系都是保持一样的，那么它们的关系是相对对等的。

由此可以得出结论，如果相邻的关系越近，它们的关联度就越近，如果相邻的越远，它们的关联度就越远。

应用案例：如图4卡片中得标题和内容，设计中把标题和内容进行区分，所以我们会做大量的留白，这样的留白就会让信息结构具有层次感，层次感就是指它们信息结构的关联度，如果想让它们有关联度，就让它们距离近一点不要做区分，如果不想让它们有关联度，或者关联度出现一个等级的区分，那么就可以加一条线，让它们之间的关联度分隔开。这就是格式塔接近性的应用。

2.4.2 相似性

如图5：如果去区分右边的形状，通常我们会根据形状进行区分，因为人的潜意识会认为相似的形状会更有相关的分类性。这就是格式塔中的相似性原则。

应用案例：如果文字的标题大小是保持一致的，包括它有统一的大小，统一的色彩，统一的字号，那系统中的其他同样功能的地方，都应该用统一的文字，这就是格式塔相似性的应用，比如图标也是一样，只有用了相似的图形大小，相似的颜色，在相同的位置，用相同的图标进行表达，图标之间的设计才具有相似性。

2.4.3 主体与背景

如图6：可以看到有一个L，是主体与背景进行了区分，如果在设计的时候让L看的更加明显，我们采用的办法就是将主体的色彩或者形状变的更加独特，或者将背景的颜色变得更加分明，这样就可以做到那个L看的更加明显。这就是主题与背景区分原则。

应用案例：比如警告弹出，可以用色彩去区分，目标就是让用户看的更加得清晰，当警告的时候给用户一个警告的信息，当成功的时候给用户一个成功的信息。还有类似对话框的弹出，采用背景变暗和加阴影的方式，都使用到了格式塔的主体与背景变化关系的原理。因此应用在我们设计系统中，前景和背景进行区分的时候，我们就可以通过色彩进行区分，色彩的区分要保持统一，比如背景色彩透明度50%同时加一些背景模糊，其他的背景也需要保持一致，阴影也是一样，如果把阴影放在一个平面上，距离平面越近，它得阴影越短，距离平面越远，它得阴影越长，这也是阴影的层级关系。

2.4.4 封闭性

如图7：可以看出这是一个四分之一的圆形。

如图8：这个图可以看出是一个五角星。

封闭性应用案例：当一个形状被另外一个形状或者被另外一个色彩阻断的时候，并不影响人们对这个形状额外得认知，一定会脑补出另外一个形状，这个原则和我们UI的关系是什么呢？比如一个loading，半圆一直在旋转，或者图表中的圆占比，我们就可以判断出谁大谁小，谁多谁少，判断出当前的进程和位置，封闭性原则通常应用在图标的设计，图表的设计和步骤条的设计中。

2.4.5 连续性

如图9：可以看出用一些简单得形状来体现，其中三角形具有明显的指向性，三角形箭头指向右边，上面五个是一组，可以看出它们具有连续性；另外一组三角形箭头指向右下角，可以看出它们是连续的一组。不同的形状会有连续性，箭头也特别有指向性，这就是为什么返回和前要进放在不同的位置，当我们的数据需要有连续的时候，我们也要使用相似的形状来表达，这就是连续性原则的应用。

同理如图10：连续性一定是要有连续等阶的变化，从左上角开始，向下和向右我们可以看出有明显的颜色连续等阶变化，通过色彩的透明度也可以做到连续性。

2.5 组件的命名规则

2.5.1 如何正确的命名

很多公司或者不同公司有不同的命名方式，这个需要和团队开发提前做沟通，主要以方便开发习惯操作为主，如果不命名也不能非得说成是错误的，命名可以理解成是一件锦上添花的事情，因为一切都以效率优先，命名自然会影响工作效率，通常情况，组件的命名可以分成组件的名称、级别、尺寸、状态，这样的命名顺序来进行，这样命名开发使用也比较方便，因为是按照了开发的统一规则来进行命名的。如图所示：

2.5.2 更多命名英文词汇

当英文不好的时候，推荐大家记常用组件英文名，以及常用状态名、级别名、内部名、尺寸名和位置名，那这些英文也几乎涵盖了工作中80%的英文词汇，收藏记忆哦~

至此B端系统设计总概系列为终结篇，回顾第一篇主要内容是如何正确设计组件库，B端业务调研的具体过程步骤，以及视觉规范的建立，可以看出第一篇属于B端设计的方法论或者设计指导，也是为开展B端设计前的一些准备工作；回顾第二篇总概主要内容是如何设计表单、表格、图标、仪表盘这些经常用到的设计难点，第二篇更加讲究设计落地过程中遇到的疑难杂症，专业技法；回顾当前总概三，主要内容就是中台规范的建立和自适应、响应式适配的难点，主要是成系统的B端设计步骤。我们都知道B端市场刚刚打开，而且当下对B端设计师的需求还远远不能满足我国现代化建设，数字化推进这么的大市场，作为UIUX，更早的拓宽一条路是我们当下必要的选择，谢谢阅读，祝愿各位2022乘风破浪，B端设计学有所成，如虎生翼！