动效在 UI 场景中的运用已经非常普遍，带给用户的体验升级也是很直观的。无论是一个图标动效到界面间的转场动效，还是聊天场景中的表情动效等，都证明了动效已经是无处不在。
最近黑马哥在体验产品的过程中，发现了很多优秀的动效案例，今天选择其中的 10 个和大家一起交流学习，希望能够带给大家一些灵感启发。
01. 动效，让点赞与众不同
动态表情为社交场景带来更活跃的体验，使得交流过程变得更加趣味性。一个动态的表情不仅活跃了氛围，也使得通过简单的一个符号代表了千言万语。
最近在使用钉钉 APP 进行聊天的过程中，发现输入框的大拇指图标在长按的时候结合了动效的变化，对话场景中出现的大拇指表情会随着长按而增大。结合动效和长按手势，为点赞的图标增加了不一样的趣味性，带给用户不一样的社交体验。
02. 动态提醒，增强消息的关注度
各类通知/消息在产品中随处可见，红点提示刚出现的时候还引起了用户强迫症，短时间内也增强了消息的阅读率。随着红点效应逐渐淡化，未读消息的点击率逐渐降低，大家都在尝试更多提高关注度的形式。
支付宝在消息模块的服务提醒中，采用了动态形式提高关注度。当用户点击消息进入界面时，小铃铛图标会左右晃动，以此来吸引用户的目光，达到增加关注度的目的。
03. 图标动效，让你脱颖而出
在金刚区众多的业务模块中，想要突出重点模块的关注度，采用动态图标是比较常用的方式。采用动静结合的形式，会让动态表达得到突出。
比如 Keep App 将活动挑战图标动效化，在不改变配色规则和图标设计规范前提下，依然可以达到突出主题的作用。
04. 博人眼球的动态悬浮广告
在不破坏产品结构的前提下，融入广告的做法中，悬浮层广告是较为明显的形式。通常是静态异形和动态异形较多，而动态的关注度相对更强一些。
比如 Keep App 将活动的折扣信息以悬浮层的形式表达，既不会占用太多空间（随着滑动会隐藏显示），又能吸引用户的关注度。如果用户觉得影响操作，也可以直接关闭，就不会反复提醒而形成干扰。
05. 内容模块结合动效替换突出存在感
在一些内容量比较多的产品中，比如电商产品，很多内容模块都是百花齐放。都想要突出自己模块的存在感，带来更好的流量引入。而动效的结合也是不错的选择，但是需要考虑动效的干扰度。
当当 App 在突出今日抢购栏目时，为了不影响临近板块的干扰度，利用动效转场来替换展示的商品信息。缩放替换商品时的动效既能达到差异化，也不会破坏整体的结构，算是一举两得的设计解决方案。
06. 微弱的动效也能呈现有温度的设计
有时候在进行产品设计的时候，动效带来的关注度并不是需要很强的表现力，一些微弱的动效依然可以提升产品体验，带给用户更有温度的设计。
自如 App 整体的设计都是做得非常不错的，在“我的”板块头部区域，结合背景插画视觉感也是非常不错。插画中部分元素的微动效增强了生活气息和真实感，让用户感受到这是一款有温度的产品，提升用户的好感度。
07. 动态感十足的底部标签栏
图标动效运用到底部标签栏十分普遍，在这个频繁切换的操作中，动态的形式可以带来更强的趣味性和关注度。
优酷 App 底部标签栏采用多种颜色变化转场，结合路径动效带来动感十足的体验。首页图标还结合了刷新的功能，方便用户进行内容的刷新，增强用户体验感。
08. 拓展功能的动态指引设计
针对一些功能体量较大的产品，会经常结合一些隐藏式设计，拓展出更多功能操作。通常默认为展开状态，在滑动浏览内容时隐藏，通过动效吸引点击展开，不会造成主内容的干扰。
比如平安口袋银行底部标签栏上方的拓展功能区，动态形式的展开与隐藏方便用户浏览主页内容。个别内容采用动态设计（点我抽奖），突出其点击欲望。动态设计不仅提高了功能的曝光度，也能引导用户操作，将繁琐的操作变得更便利。
09. 结合动态 IP 的下拉刷新
针对下拉刷新这一常规操作，设计形式也是丰富多样。结合 IP 形象进行动态演变完成刷新动作，被很多产品设计师所采纳。
美团外卖就将品牌 IP 形象结合得恰到好处，下拉刷新时两只耳朵摇摆非常俏皮可爱，松开后 IP 形象露出，还配合眨眼睛等可爱的表情动效。情感化设计结合动态表现，拉近与用户之间的亲和力，带给用户更人性化的使用体验。
10. 图标动效带动局部功能的关注度
对于一些局部功能或者模块占比较小的栏目，为了提高曝光度，获得用户的关注度，动态的形式是比较常用的方法。通常会在图标部分、文字部分、装饰元素部分等进行动效设计，带来的效果也是显而易见。
比如 QQ 音乐在“我的”模块中，将活动中心、会员中心、每日签到的图标采用动态设计形式，虽然几个模块占比较小，但是依然能够获得用户的关注度。
小结
动效表达在产品设计中的应用越发普及，不仅可以强化功能的关注度，也能带给用户感官体验上的升级。优秀案例的积累和分析，有助于我们掌握更多的表现形式，灵活的运用到项目设计中。
作者：黑马青年（vx: heimaux）
本文由 @黑马青年 原创发布。未经许可，禁止转载。
当你为你的项目创建有效的，可访问的，漂亮的ui时，只需要最小的调整来帮助快速改善你的设计。 努力创造。在这篇简短且易于理解的指南中，我收集了一些容易放置的内容。在实践中，这些小技巧可以毫不费力地帮助你改善你的设计，还有用户体验。
希望你喜欢！
用微妙的边界定义。
使用多重阴影或非常微妙的边界（只是一个阴影比你的实际影子）周围的某些元素可以使这些元素出现
更清晰，更清晰，帮助你避免那些看起来泥泞的阴影。
标题给一个更好的光学范围。减少长格式正文的字母间距？这是一个大大的“不”。但对于标题……我要说“是”!
你的标题很可能会比他们的标题更大，更重。相比于正文，字母之间的间距有时会出现视觉上更大，这并不是你想要的。减少字母间距，只是少量，可以使你的标题视觉平衡，更易于阅读，通常更赏心悦目。
为了一致性，确保你的图标具有相同的视觉风格。确保它们拥有相同的视觉风格;同样的重量，要么填满，要么秒变了。不要混搭。
只使用一种字体就很好。在设计时，使用单一字体是绝对没问题的，这样做实际上可以帮你产生更强、更持久的结果。忽略“总是使用两种字体”最小值的人群。使用以下组合重量，大小和颜色，你仍然可以产生完美的可接受的结果。虽然只有一个单独的字体。
留白是UI设计朋友。大胆的使用。适度的留白，即使是少量的白色物质，但要使用得当。能让你的设计透气，而且看起来更光亮。
创建长篇内容？给20 pt试试。对于长形式的内容（即微博文章，项目描述等等），试着这样做20pt(甚至更多一点)为你的文本字号。当然，这取决于所选择的字体，但大多数流行的字体在20pt时效果得很好，并带来更好的阅读体验当你的用户面对一堵文字墙的时候。18pt太过时了。
使用字体比例定义一个适合的字体大小集。使用字体比例可以帮助您轻松、实用地定义一组字体大小。顾名思义，Type Scale基于一个比例因子(比如1.25)工作的。从一个基本字体大小(18px)和乘(或除)它与缩放因子得到的字体大小要么更高(即;H₁，H₂等)，或较低层次(即;标题、按钮等)字体比例将帮助你产生看起来和谐的文本字号集。因为他们的大小根据设定的固定比例增加和减少。
选择一个基本颜色，然后使用色彩和色调增加均匀性。你猜怎么着?你不必总是用大量的颜色填充你的设计。如果项目允许，简单地使用一个有限的调色板选择一个基地颜色，然后使用你选择的颜色的色调和阴影可以增加一致性以最简单的方式来改变你的设计。
改善用户登录的体验。记住拇指规则。允许用户在任何时候跳过您的移动应用程序上线序列，并且放置跳过链接在拇指容易触及的位置。只是一个简单的调整，可以为你的用户提供更好的体验……
记住，拇指仍然是主宰！
你的影子来自其中一个光源对吧？确保你的影子总是来自一个光源。这是一个简单的错误，但它可以让你的设计看起来更抛光且统一。记住，我们不是生活在一个拥有一千个太阳的国度里。
使用更好的字体组合，效率会很很快。当你想要提高你的字体组合技巧的时候，当面对1000个字体选择，只是去寻找对应的自己集合，效率会快很多。
文字和图像与一个微妙的覆盖。根据文本可能放置在图像上方的位置，您可以选择尝试，并测试完整的图像覆盖，或更微妙的(从下到上，或从上到下)渐变叠加，以实现两者之间的简单对比。为了在你的文本之间形成良好的对比，不要太复杂的内容和图片。
太多就会导致用户体验不合格。尽量只在标题和小段落中使用中心文字。对于几乎所有其他内容，保持文本左对齐。你的用户会感谢你的你。
当选择一个多用途的文字，尽量找一个大量权重。你搜索的字体有很多选择吗？重量、风格？如果你打算在你的一些项目中使用它，请尝试并确保它是这样做的。只有一种重量或样式。不行的。如果可以的话，我建议你避开这些。当然也有例外，某些项目会要求“只有一种风格”
更精致的字体，但对于绝大多数项目，你想要的字体再多一点就能…嗯…选择。即使你决定只使用两种或三种重量或风格，希望你在设计过程的后期需要更多的空间。
想要创造更容易理解的界面，对吧？把你的文字调暗在光亮的背景上。在浅色背景下工作时，不要让你的文本太亮。
当涉及到长形式的内容时，某些常规的粗细字体仍然可以看。但太重了，在屏幕上会很僵硬。你可以很容易地解决这个问题，选择一些像深灰色（即#4F4F4F）的基调，把文字往下写，让眼睛更容易看。
总是通过icon最突出的内容。你认为这是常识，对吗？我并不觉得。通过使用色彩对比度做区分，尺寸和标签，确保尽可能突出。如果可以的话，不要总是只依赖图标。如果可以使用文本标签，那就使用它们，让用户更好地理解。
当你的字体变小时，请增加行高，以达到更好的通用性。这同样适用于当你的字体大小增加。简单地降低行高。
使用x-height来测试字体的可读性。基本上，x-height是一个小写字母' x '相对于大写字母高度 (T)的相同字体。如果你的字体有一个大的x高，通常有助于更好地阅读，特别是在使用长形式的正文文本。另一种确定字体可读性，并缩小范围的方法如果你有一些无法选择的字体，可以做这个测试，比较来自特定字体的三个字符：大写字母I，小写的L和数字1。
当设计一个在应用程序内部使用的菜单时，确保提供最多经常使用的动作（例如：上传图像，添加文件等)最突出的屏幕上。
颜色-从你的图像中选择，会给你的产品带来生命。简单地从你的产品图片中选择颜色，然后应用各种色调。你选择的颜色阴影到你的背景，文字，图标或更多，可以添加。你的设计具有丰富的视觉趣味和个性。
基于字体的x坐标，设置您的线高度。不同x高的字体需要不同的行高测量，实现文本行之间的正确分隔。即使你可能有两种字体相同的字体大小(即：18px)它们的x的高度可以有很大的不同，这在选择正确的线的种类起着很大的作用高度来实现。
突出最重要的元素。通过使用字体大小，权重，颜色和布局的组合，可以很轻松的突出UI中最重要的元素。只是很简单，但微妙的调整，让用户体验更好一点。
操作错误的时候，添加一个额外的视觉辅助。在用户刚刚采取的操作附近添加一个错误消息可以是简单的形式，但很有帮助，当他们填写任何形式的表格时额外的视觉辅助。
尝试在移动端创建慷慨的热区。当为移动设备设计时，尝试创建足够大的可点击区域，是好的。对于只包含文本的按钮和链接来说，这是很有挑战性的，尽可能使用带有标签的图标。
以下是iOS和Android的最小推荐点击区域：
44 x 44pt用于iOS
48x48dp用于Android
在短标题上尽量使用全大写。如果你想在标题上使用全大写，请确保它们在任何时候都很短。有可能，最好是一行。将它们用于较长的文本是不好的。和之前的技巧一样，在标题中添加少量的字母间距。能让他们呼吸顺畅，而且视觉效果更好。
在轻文本和图像之间，保持可接受的对比度。一定要确保浅色的文字在浅色的背景下是清晰的。简单地应用一个稍微不透明的背景在你的文本后面将保持这些元素之间的对比度很好。
看看这些很棒的字体，用在标题非常好的。发现他们真的很适合标题，设计感很强。（我没有推广费用，请放心用）
看看这些很棒的字体，用于长文本是非常好的，强烈推荐使用。（我仍然没有任何推广费）。
标题和正文。当你想实现一个好的垂直节奏，以及一个强大的视觉之间，需要对文本元素排版、间距作设计。我见过许多设计，最常见的是在文章列表中，它们已经被应用标题的上下空白相等，这样就失去了这种联系在它下面有正文。在这种情况下，我总是会给我的标题更多的顶部边距，而在底部，标题和下面的内容之间的连接是更强，有良好的垂直节奏，视觉层次保留在所有的文章之间。
对于下载指标，试着去做尽可能提供信息。对于用户，尝试使具有信息性的下载指示符对用户很友好。你可以通过使用颜色来实现这一点，用百分数来显示当前进度，一个简单的图标，让他们可以在任何地方取消下载时间。
如果你能保持标题简短，简洁……“想做就做”。
如果可以，如果合适的话，保持标题简短，时髦，切中要点。而不是“这是你的风格，你的方式”，简单地使用像这样的“你的风格。你的方式。”人们会浏览，保持这些标题简短有力有助于他们更快地消化中的信息。
记住，这种方式可能会让人感觉很突然，你需要考虑一下你所从事的项目类型，以及目标受众来决定方法是合适的，相对于更标准的格式。
正确的设计“声音”。在项目中处理文本时，选择正确的字体将影响就像你说话的声音一样。要大声，要柔和，要友好，要正式，要有趣。每一种字体都有自己独特的声音，关键在于找到合适的字体你正在做的项目的声音。当你刚接触字体时，这似乎是一项艰巨的任务，所以不要害怕从类似的项目中获得灵感，并从这些项目中汲取灵感它们有助于影响你的决定，并提高你的理解什么是合适的。
你的正文，并提高可读性处理正文文本，并试图找到合适的行长度可能有点平衡。对于一个单独的列页面，45到75个字符被普遍认为是满意的行长度，而行长度为66个字符(包括字母和空格)被发现是最佳位置。当然，字体大小和行高在决定可读性时也起着重要作用，但是对于行长，保持在45到75个字符之间，就会更好了。
偶尔使用纯装饰的幽灵文字也可以，但要保留阅读的问题。屏幕上的大部分文本内容应该坚持可用性最佳的做法是没有问题的。但有时，希望添加纯出于装饰目的的文本，我们不希望所有的设计都落入乏味。如果没有元素会以任何方式影响用户体验，那么出于装饰的原因，插入奇怪的元素是可以的。
使用户界面中的元素彼此区分。按钮、通知，ui中两个独立但重要的元素。如果可以的话，总是试着确保你的用户能够快速地将它们区分开来，轻松扫描您的网站或应用程序。按钮，在大多数情况下，将优先，所以确保他们是最突出的。项目在屏幕上，并很容易区分其他元素。
只是一些细微的阴影，你所需要的。我们都喜欢阴影，对吧？它们可以作为微妙又很强大的视觉线索，在您的设计中使用要适度。现实世界中的阴影，在大多数情况下几乎是不可察觉的，而且所以你应该在ui中模仿这种行为。放下沉重和黑暗的阴影并降低不透明度，以实现一些的东西更微妙和栩栩如生。
使用全部大写？选择适合的字体，能够达到光学清晰度。在你的设计中适度使用“全部大写”是很好的。选择一个合适的字体与行高和较重的字重，使用户的光学清晰度。
让面包屑脱颖而出，易于为用户解释。面包屑无处不在，经常用于内容丰富的网站，通过最小的调整，你可以确保用户能够快速定位他们在一个网站上的位置以及他们可能需要去的其他地方。如果用户已经通过使用跳转到网站的某个深度，这一点尤其有用。
使用高度饱和的颜色?试一试用浅色调来缓和气氛或者阴凉处。高度饱和的颜色(明亮的蓝色、红色、绿色等)可以让网站看起来很棒，但是当过度使用时，它们会使使用者的眼睛疲劳，主要是在使用的时候的文字内容。尽可能使用时要适度，并尽量与柔和的颜色搭配颜色或色调变化)的饱和颜色，以避免可怕的眼睛疲劳。使用这种方法还可以直接注意到饱和的色彩和使最重要的内容前面和中心，与更柔和的颜色采取较少突出角色，让用户的眼睛休息一下。记住，在选择颜色时，可读性和可访问性应该是最优先的。
在ui中使用已建立的图标，为了避免给用户造成混淆。在你的设计中添加图标时，试着选择一个有代表性的已建立的图标。不要选择一个能传达正确含义和功能的图标否则会引起困惑，成为用户的认知障碍。不要在这些图标上过于叛逆。
在众多经过尝试和测试的设计原则中，这里有一个是帮助您为用户生成更清晰的ui的关键。接近只是确保相关设计元素放置在一起的过程，表明彼此之间的关系，这有助于加快用户的认知。
4pt基线网格+ 8pt网格=单一网格。当使用类型时，8点网格旁边使用4点基线
可以为你的设计带来更和谐的垂直节奏。您需要对齐您的类型到基线网格4，使用的行高值为4的倍数（16、20、24、28等）
为什么4？我发现在过去使用特定的文本大小时，按8的倍数缩放是不太合适。
减少标题上的行高是很好的。与长形式的主体文本不同，它需要足够的行高，以便折行易读。标题的推荐行高通常约为1至1.3倍。
选颜色有困难计划吗？在颜色上进行类比论。类似的颜色，也被称为相邻或相邻的色调，是其中之一最和谐的配色方案，可以大大帮助你，如果你有很难挑选出搭配得很好的颜色。由三原色、二原色和三原色组成的一组相邻的色调帮助您创建一个简单的，颜色方案快速。当你需要快速将颜色调和到混合中时，可以使用类似的方法。
在你的设计中尽量提高信噪比。你可以在你的设计中通过最大化信号来实现清晰和可用性最小化噪声，从而产生高信噪比。您可以通过确保提供相关信息(信号)来实现这一点有效，不相关的信息(噪声)被减少或完全删除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式说话。语气吗？尝试所有小写字母。使用较重的字体和大写会显得有点正式和夸张。试着选择全小写和较轻的字体。在处理特定项目时，使用类似全小写的拷贝可以呈现更非正式的、可接触的信息。记住要在图像之间使用某种颜色叠加与文字达到较强的对比。
当使用类型时，元素不需要尖叫“看看我!”一直如此但他们确实需要一个平衡的等级制度。只需通过重量、大小和颜色进行细微的调整就可以实现这一点。这样做可以让用户扫描并找到必要的元素，避免在过程中产生任何混淆。
养肥了，字体大小为最佳易读性。当设置暗色文字与浅色背景，选择一个更轻的粗细。但是…反过来说:浅色文字>深色背景。最好是看一下增加一点字体重量，特别是对于长表单副本。以最佳的易读性为目标，避免让用户的眼睛疲劳。
试着为你要呈现的内容选择合适的字体。用户是精明的，有一种直观的感觉，当内容与他们交谈当它不是。正确的字体选择是至关重要的，使您的内容讲给他们直率和情感的水平。
你是否使用全大写的短行文本？嗯…这是一个好主意，增加这些字母之间的间距，以达到更好的用户的易读性。这样做使单词更容易阅读和处理，因为字母更多彼此区分。字母之间的间距只要稍微增加一点就可以。
打开这些错误消息，您的表格有帮助。在使用表单时，请尝试并确保错误消息得到解释。出了什么问题，如何补救。总是让用户了解情况，即使是像常规一样常见的事情的形式。让这些错误消息有用，不要让您的用户蒙昧。
试着向用户保证在加载过程中会发生一些的事情你的应用程序。显示应用程序元素的框架可以帮助你快速沟通布局和确保用户正在发生一些事情。系统状态可见性是一个重要的原则要遵循，并允许用户知道发生了什么。不要让用户从一开始玩猜谜游戏。
告诉用户将要做什么如果他们应用了某个动作。在应用特定的操作之前，总是尝试并详细地告知用户可以有结果。这尤其适用于具有不可逆转后果的行为，如删除某些东西。让用户知道将要发生什么，并在此之前要求他们进行确认。他们就会按下那个标有“删除”的红色大按钮。
参考文献《UI & UX Micro Tips - The Ultimate Collection》
大体上分为两类：彩蛋流和体验流
搜索的本质是什么？无疑是内容的召回和信息的推荐。
可随着时代的发展和行业公司的内卷，不少公司除了持续优化搜索结果与推荐外，在搜索的体验和彩蛋上也是下了不少功夫，从而进一步加强自有产品的竞争力与用户黏性。因此今天就来盘点一些，那有意思的大厂搜索交互。
大体上分为两类：彩蛋流和体验流
注重提升搜索过程中的趣味程度，以增加用户的好感度与产品印象/口碑。行业代表：谷歌浏览器、百度浏览器
可以说是搜索彩蛋的先行者，内置了很多搜索关键词的有趣彩蛋，如娱乐角色：搜索【灭霸】，页面右边会打响指，相关字段会被’毁灭‘掉
搜索【马里奥兄弟】，右边也有游戏里一样的点击彩蛋
还有各种有意思的搜索结果比如搜：is google down（谷歌关闭了吗），搜索结果优先显示：NO
再如搜索《银河系漫游指南》的一句话：the answer to life, the universe, and everything。此时搜索结果页会自动计算成42。貌似也只有读过《银河系漫游指南》的人才能明白其中的奥秘。听说是生命、宇宙与万事万物的终极解答。
而且在日常的节日、活动、热点运营上，谷歌也从不缺席。都会在搜索框上用【插画、动效】等形式承载各种活动入口、吸引用户参与，可以已经形成一个稳定、具有品牌感的企业文化了。
如各种复活节、开学季、母亲节动效。而且更多有趣、创意的设计案例，可上：有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。
百度在搜索彩蛋里下的的功夫也不少，最著名的应该是搜索【黑洞】时，页面上会出现黑洞的吸入特效。
而且和谷歌相同，在其他的搜索关键词上，百度也是埋下了不少彩蛋，比如：搜索【翻转】，页面会左右翻过来
搜索【跳跃】，页面会在上下跳动
搜索【失重】，页面上的字会飘起来
而在【活动运营】上，百度也是很有心地进行着创新设计，力求给用户一种眼前一亮的感觉。比如每年的愚人节，搜索结果页上都有‘调戏’用户的创意设计，各种轻松调皮的画风 给不少用户带来了新鲜感和趣味性。
还有在【活动入口】的设计上也是特别有想法：在某年的圣诞节上，百度创新性地将活动入口’嵌套‘在结果页卡片中间，用活动里的ip形象-雪人「抬着」结果页卡片和在上面「滚动」
用这种充满创意+应景的的入口设计与引导方式，最大限度地降低漏斗，吸引让更多用户参与该活动。另外，百度搜索框上面的运营活动入口，也和谷歌有异曲同工之妙。
而且更多有趣、创意的设计案例，可上：有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。
注重提升搜索过程中的交互体验，以增加用户的操作效率与产品易用性。
代表：苹果产品、夸克浏览器
·iPhone
iPhone的【桌面搜索】除了能查询手机上的各种信息、文件，它还自带了【汇率转换和计算器】。在搜索框输入【数学公式、汇率转换】时会自动计算对应的结果。无需用户额外打开计算器、浏览器，大大减少操作链路。
在iOS的原生键盘里，可以根据输入词检测+搜索对应的手机号码：当你输入 【打+我或通讯录好友+电话】时，键盘上会自动显示自己或好友的电话号码，点击号码就能自动粘贴在输入框中。
用户无需前往通讯录就能轻松「获知+想起」谁谁的电话号码，大大提升操作体验与效率
·Mac
在Mac电脑的工具栏上搜索相关帮助时，系统会直接把该结果所对应的页面位置调取出来并悬浮展示。用户可以直观地该结果在哪里，并减少寻找的操作路径，免去多余操作
在Mac电脑的‘系统偏好设置’里搜索帮助，在结果列表上会以聚光灯的形式展示各个结果入口。选择具体某个结果时，该入口的聚光灯会更清晰些，特别容易找到搜索结果。
夸克浏览器除了传统的「点击搜索框」唤出输入栏外，在屏幕任意位置下滑手势同样可以唤出搜索框。
降低「需要往上手指移动，才能点击搜索框」的操作成本，让用户更快、更精准地触达搜索。
而且在输入网址或英文等字段时，搜索框下方会出现一个滑块区。点击就会变成长条的滑块，拖拽滑块即可改变光标位置。
而且更多有趣、创意的设计案例，可上：有蛋案例 youdananli.com 近千个行业/大厂里的创意案例、上百个知识模型、设计方法。
让用户更方便地将光标快速移动到想要的位置中，以便更快地搜索信息，大大降低操作成本。而且夸克还会前置搜索结果， 比如在搜索框中输入“某城市+天气”的关键词，上方就会以卡片的形式显示该地区最近一周的天气。
用户无需触发搜索、进入结果页才能看到想要查询的信息。
精准的分析了UX设计师的技能定位。其实不光是作为一些交互设计师自己不太清楚，领导和客户往往也会忽略这一重要的步骤...
交互设计：我们是不是要把“用户体验”中的“用户”拿掉了？
前言：这篇文章写得特别好，很精准的分析了UX设计师的技能定位。其实不光是作为一些交互设计师自己不太清楚，领导和客户往往也会忽略这一重要的步骤。文章篇幅有点长希望大家能静下心看完，会帮助自己了解更多哦~
什么是用户体验设计师？
我最近从一位来自MathWorks（世界领先的技术计算和基于模型的设计的软件开发商和供应商）的高级用户体验专家那儿看到了一个很棒的广告，这是其中一些节选：
与开发团队合作，遵循以用户为中心的设计方法，协同工作，对复杂的问题进行头脑风暴和设计创新的解决方案
向团队成员建议使用哪些可行的方法来回答他们关于用户的问题，并根据项目的需求、目标和约束来设计方向
与团队成员密切合作，进行用户研究，发现痛点，开发用户配置文件，并创建任务列表
在纸上画出功能原型
进行可用性测试，进行用户交流和网上调研，组织调查，并进行你认为合适的其他可行性评估
它准确地描述了我在对于用户体验工作的期望。我们从目标人群和竞品那里学习有关项目的一切知识，找到方法来研究用户的需求和目标，与目标人群一起评估这些需求，修改项目计划，并在最终确定产品之前创造出经过用户验证的解决方案。
但当我换一份新的工作时（当然那是个例外），我看到许多职位描述都要求具备广泛的用户体验技能，有些人甚至要求具备除此以外的更多技能。但似乎他们真的需要一个能进行原型设计的视觉设计师。
来自高级UI/UX设计师的广告：
有测试和可用性实验的经验和熟练的交互原型的经验
创造清晰和具有视觉冲击画面的能力
深入了解用户的兴趣和需求
听起来他们在寻找一个精通调研、可用性测试和交互原型的人。但更迫切的需要反映在以下关于"附加"的要求中：
项目工作能展示强大的用户体验过程和完美的细节视觉和交互设计原则（IA，IxD，排版，布局，层次结构，颜色，组成）
你认为他们只会招聘一个可以进行用户调研，画线框图和测试的人吗？或是视觉设计做的很出众的人？也许这反映了“UI”这部分的职位描述。让我们来看看一个纯粹的UX设计师的职位，它要求：
优秀的分析能力
在实际用户研究、信息架构、交互设计、以用户为中心的设计过程以及用。户体验原则和技术等方面有丰富的经验
听起来不错！但其真面目会在下一个要求中显示：
把想法/概念转化为优质的视觉设计
如今，用户体验已成为热门词汇。尽管看起来不言自明，但一些公司并没有明白这一点——他们仍然忽视了行为经验，而不是外表和感觉。我看到的许多广告都是在视觉设计上表达了最具体和生动的语言。这让我挠头，怀疑是否只有最成熟、规模最大的公司才真正需要用户体验，并有足够的预算来支持它。难道其他公司只是通过招聘视觉设计师并给他们贴上“UX”的标签，来追个市场热点而已吗？
远离调研？
用户研究员Alan最近离开了一家总部位于亚特兰大的公司，那里拥有大量的用户体验员工。他在公司的头两年里，参加了全国各地许多不同类型的用户调研。然而，在最后一年，他发现他的调研被抛到一边了。
"我的新老板不关心做调研。似乎整个公司都在降低它的重要性。相反，他们会开办设计思维讲习班，直接进入开发阶段。“任何研究或可用性测试都被留到最后，只是为了验证解决方案。”
由于该公司以严厉对待用户体验而闻名，这一点尤其令人不快。
像用户体验（ux）这样流行的词汇会突然变得受人追捧，我想不出在这个行业还有什么比“设计思维”更重要的了。根据谷歌在过去的五年中的数据，对设计思维的网页搜索翻了两倍。
显示从2012年12月到2017年6月设计思维搜索增加的图表。
搜索“设计思维”，2012年12月-2017年6月（资料来源：Google Trends）
设计思维过程的第一步是移情化，就是让用户参与并观察他们如何谈论的，同时观察他们如何真正完成任务。换句话说，这就是用户调研。谁做调研？做用户体验的诸位！不难想象互联网项目负责人和利益相关者绕过这个步骤，直接进入步骤2和3，开始定义问题和开展头脑风暴去解决方案。爽死他们了。
在“设计思考家最初犯的五个错误，”Dana Mitroff Silvers，一个设计思维驱动者和数据战略家写道，“我经常被客户要求跳过这个阶段，直接进入解决问题的阶段。”
她还描述了我有过很多次的经历，公司禁止接近用户！很多时候，silvers的客户都会问他们是否可以跳过这个阶段，因为他们“已经知道他们的受众需要什么，可以为他们代言。”
这就说的通了。团队绕过不熟悉的移情阶段，直接进入定义问题及其解决方案，过去一直都是这么做的。而且如果没有在移情方面的训练和指导，或者充分了解，很容易跳过这个阶段。在我接下来的交谈中可以看到，一个公司告诉我他们需要一个兼并的ux/视觉设计师。我问他们是否需要设计思维，产品总监回答：“是的。”他们跳过移情步骤了吗？他同样回答道：“是的。”
如果一家公司仅仅遵循设计思维的最后四个阶段——设计、构思、原型和测试——那么一个用户体验设计师是什么样的呢？是一个可以做原型开发的视觉设计师。
分离调研和设计
用户体验架构师Alyssa最近与一家大型电信公司签订了用户调研合同。让人失望的是，设计师似乎没有责任跟踪调研结果。调研人员每一到两周进行一次新的可用性测试，然后将测试结果提交给设计师，也不知道设计师是否会遵循建议
这似乎不对。
我已经注意到越来越多的公司在调研和设计师之间拆分他们的用户体验实践。问题是，“用户体验设计师”通常不仅要处理交互设计，还要处理视觉设计。尽管易于使用的工具的出现使得创建可点击的原型变得容易，但这是两个不同的技能。我期望交互设计师分析行为和工作流程，并充当用户的拥护者；视觉设计师则负责推广品牌。
将设计团队分成调研人员和设计师可能会阻碍有效的软件开发。为了真正了解用户，设计师需要培养共情心。他们和其他团队成员可以通过进行用户调研或可用性研究——或者参与调研过程来实现这一点。这就锁定了用户的目标和痛点，并让设计师了解到什么是最重要的点，这将有效帮助如何更有针对性的设计。除了对设计人员有好处之外，定期的用户调研还可以让公司了解用户的期望和行为。如果这些好处能被广泛理解，那公司一定会对共情心和用户调研付出比口头更多的心思了。
功能原型和测试不足
Alan Cooper是视觉基础的创造者和用户体验的领袖，也是《囚犯们管理收容所》一书的作者，他在Twitter上抨击了“原型和测试”的思维模式并表示：“原型和测试不是交互设计”。 Cooper写道交互和测试能让领导感到高兴，但它只是蚍蜉撼大树。尽管它创造了微小的改进，让设计师和他们的领导们充满希望和快乐，但它从来没有真正从大的程度上理解用户或者产品。
我们都搞错了
我们已经看到，在设计思维的大旗下，公司可能会跳过移情阶段，回归到一个舒适、独立的设计过程。设计思维确实带来了一个有价值的原型/测试阶段，但在用户研究上的偷工减料却使本末倒置，并错过了一个时机，去进行具体的见解和创新，从而可以将产品推向顶峰。而断断续续的研究只会拖延我们“想要知道我们的用户想要什么”的心态。
虽然强调视觉设计的技巧，但分离研究和设计，可能消耗掉那些面向认知将用户体验放在首位的设计师。视觉设计提供了一个重要的初步印象，许多研究表明，人们对第一眼有吸引力的网站的评价通常比较高。但视觉只是用户体验中的一部分。一个经常使用你的产品的用户到底是如何评价的？视觉效果将发挥一定作用，但我认为它更有可能依赖于一个伟大的工作流程——需要反复跟进用户体验的流程。
我们到底要什么？
我不知道出了什么问题，但我猜是我们的理由还不够充分。我们都含蓄地理解真正的用户体验过程的价值，但开发或市场主管是否也是如此？
可能是我们自己被自己的完美所欺骗了。我们已经大幅改善了用户体验的程度，现在在任何手机上都可以找到伟大设计的例子。改进后的开发工具利用了我们创新的交互模式，小工具使平面设计看起来很棒。也许开发领导者觉得他们已经看到了足够好的设计，他们相信他们也可以做到这一点。
作者：March1996
链接：https://www.zcool.com.cn/article/ZNzYyNDU2.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
按钮这个组件，在我们UI设计中出现频率最高，交互使用最重要，确在用户体验上最容易被忽略的一个组件元素因此我们要对按钮做一个重新认识在没有互联网的时代，按钮就已经被人们广泛使用了，例如：电灯的开关、电视机的遥控器、最早的固定电话等等，在物理形态下的按钮也将是互联网时代出现后UI按钮组件的前身，目前物理按钮仍在被广泛沿用，作为UI设计中的按钮组件，不管如何演变，万变不离其宗，依然需要参考现实环境物理按钮，按钮的交互就是通过触摸能够完成用户的行为需求，所以按钮的设计理念一定是直观性和易用性优先，从而指引用户完成轻松无障碍的完成任务。
我们在UI设计环节如何将按钮完美呈现，是我们将要深入研究一个课题，按钮的交互体验、视觉体验会影响到产品的转化、引流、行动触发等。
按钮是一个带有明确指示性的交互提示组件，它指引用户准确的完成下一步的操作，UI设计中一项任务的关键节点与转折点的操作步骤，都是通过按钮来完成的。
我们平时见到UI设计中的按钮，第一眼看上去很简单，大多是由一个底色块或一个带描边框加上文字注释组合构成的，其实真正的按钮是由其大小尺寸、摆放位置、颜色、文案、圆角的大小…等细节元素组成，对细节的运用和把控，直接关系到用户的使用体验。
我们在UI设计中，设计按钮时，会深度探究按钮在当前环境下的意义，出现在哪里？是否需要增加按钮？为何增加按钮？
按钮功能：
展开、收起、下拉、加减等功能，重点强调的是功能，在操作之后会发生一些交互形态的化这种按钮主要起到通过功能形态的变化来告知用户操作的信息与结果。
引导用户接下来的操作：
我们完成一项内容编辑或信息的确认后，就会对当前环节的页面失焦（视觉焦点），而引导型按钮（如：下一步保存、支付、确定）就会重新聚焦视觉重点，通过按钮功能的文案描述告知用户下一步该怎么办。
行为习惯养成：
培养用户的点击习惯，当我们在一个操作按钮之后会得到相对应的信息反馈，并且可以持续的给用户带来价值那么我们设计这个按钮时可以重点突出这个按钮的视觉表现力，在同维度不同的区域保持这个按钮视觉上的统一持续培养用户的点击习惯，以后在遇到类似的按钮时思维的惯性就会引导这个行为完成点击操作。
按钮需要经过很多细节的设计，才能发挥出按钮的最大作用例如，内容的长短/边距；容器的大小、圆角；填充色的主/次之分…等，让我们来了解按钮到底是由哪些属性、元素构成。
圆角：通过视觉上给用户的感受，圆角的大小决定按钮的气质，小圆角是按钮经常使用的如：4PX圆角，也有比较严谨的、力量型的全直角也有柔和到极致的全圆角等等。
图标：可视信息抽象化表达，通过图形直观表达文字的含义，例如：加载中编辑等。
容器：是按钮上所有信息的载体，包含颜色、纹理、文案、图标等元素。
边框：确定按钮的边界，常用于次级按钮描边。
文案：用文字表达按钮的含义，文案要精炼简要。
背景：表达按钮的状态，形象气质，品牌气质。
投影：投影主要运用于凸显层级关系，让按钮在原有维度提升，达到视觉聚焦的作用，往往配合纹理与渐变色可以打造更好的视觉体验。
按照功能属性分类，可以将按钮分为流程控制和功能选项两大类别
流程控制：常见的传统按钮，如支付、确定、下一步、确定、保存等，容器承载着图标、图标加文案、文案等形式。
功能选项：开关、加减控件、标签栏、分类、状态切换等，操作之后只针对当前页面做出属性上的的调整，不涉及流程的变化。
视觉呈现上有所区分，在不同的页面可能存在同等级的权重
常规型按钮：常见的按钮，在同一个页面出现多个常规型按钮时，有主次之分。
虚线型按钮：常用于添加、上传等操作。
文本按钮：仅用文字作为触发点，部分会用主色、右侧箭头、下划线等方式。
高权重：带有填充色的主功能操作按钮，当同一个页面存在多个按钮，只允许存在一个高权重（主操作）按钮。
中权重：带边框轮廓的按钮，同一页面可存在多个中权重的按钮。
低权重：文本按钮，图文按钮、图标按钮，同一页面可存在多个低权重按钮。
是设计过程的重要组成部分，在不干扰界面视觉的前提下，对每个按钮的样式、状态有清晰的定义，与其他元素布局区分开来。
待激活状态：需要完成规定业务流程的操作、或满足一个以上必要的前置条件后才允许交互。
正常状态：按钮的正常状态，可正常进行交互操作。
点击状态：按压效果，表示按钮正在进行交互还未结束，交互完成后，即会引发此按钮的真实事件。
加载状态：产生交互后没有立即执行、或系统需要一定的时间才能执行完成。
禁用状态：暂不允许操作、或需要用户离开此页面去完成一定的前置条件才能操作此按钮 。
PC端设计按钮时，注意到鼠标的点击精确度高一些，通常我们会将按钮设计的小一些同时也能让整个界面看起来更加细腻，只要不影响操作，36px~48px 范围内的按钮是比较常见的。
移动端的按钮设计，我们要更多的考虑到物理尺寸，即手指（指尖）在操作的时候需要占用的实际范围。
标准参考：设计规范中，将按钮的最小点击区域规定为 42pt/84PX，一旦小于这个数值，操作时就会出现精准度较低的情况，导致操作失误或无效。
文字按钮：文字按钮，自身可视化面积较小，所以我们要在操作热区上做规划，热区大于文字按钮可视化范围，方便用户操控。
「费茨定律」告诉我们「目标尺寸越大，移动至目标所花费的时间就越短」，所以在满足手指触控范围的同时，还要根据所对应功能的权重占比来适当调节按钮的大小，当某个元素的尺寸越大就越吸引眼球，就更容易被视觉捕捉到，也更容易被「点击」，精准度被降低的同时，也减少了用户的操作成本。
我们以8像素栅格系统、iOS的2倍图为例，较为常见的有：小型-64px、中型-80~88px、大型-98px、超大型-随机这四种按钮。
设计风格常见，例如扁平化、微质感、拟物化、新拟态（概念）...
扁平化按钮：填充色平铺风格，没有多余的视觉干扰，这种类型的按钮一般在应用中用的最多，例如：工具型应用、B端应用等。
微质感按钮：填充渐变色基础上加入浅浅的投影效果，保持了信息内容的简洁、同时让用户产生更强的点击欲望更加耐看。
拟物化按钮：设计的很立体，3D效果、属性样式丰富多彩，参考现实世界中的事务或摄取应用场景中的某些元素，使其更加逼真，有较强的代入感。例如：游戏类应用、H5专题、运营banner等。
新拟态按钮：风靡一时的风格，目前只有少数工具类应用使用了新拟态，例如：计算器、AI设备控制、有道云笔记等。
页面出现多个按钮时，只允许存在一个主操作按钮，其他不做特别设定如果次要按钮/操作较多，也不益过多的出现次级按钮，可根据权重降级处理，以小图标或文字按钮的方式呈现。
主/次操作按钮要统一样式，用户需操作时，尽可能的减少其思考及选择时间按钮应该迎合用户固有认知及惯性思维，节省时间成本，提高操作效率。
常见的按钮还是以「小圆角」和「全圆角」居多，也有部分按钮「直角」需要根据产品的行业属性与气质来选择最合适的圆角类型，尽量避免大圆角（卡片圆角除外），按钮外形要规整统一不可以出现不方不圆的奇怪样式。
小圆角：小圆角按钮的圆角值通常控制在高度的1/5、1/6，根据按钮的尺寸大小，直接将圆角值固定在 4px（目前使用）能减少设计组件的数量也利于开发做组件封装后续调用。
全圆角：全圆角按钮的圆角值固定为高度的1/2，或者在软件的圆角设置中直接将数值拉到极限。
直角：不设圆角值，在PC端较为常见，也有部分较为严谨的移动端应用使用直角按钮。
按钮中的文字要便于用户理解，不能过于陌生或绕口，用户碰到不易理解的信息会产生困惑甚至误导用户导致操作失误从而造成损失，文字还需要言简意赅，不能过多或折行且能合理的引导用户完成操作。
如图：
文案歧义就很明显，想要挽留用户，刻意将主次按钮样式对换，希望用户操作不成功，那么用户在需要取消订单时就疑惑了，到底是点击「确定」还是主操作按钮「取消」才能取消成功呢？或许稍加思考，用户也能反应过来但无疑增加了选择难度、思考时间及操作成本。
按钮中的文字太大或太小都会影响用户对信息接收的效率，比例需要适中文字太大会感觉很拥挤，没有呼吸感，要给文字四周留下足够的空间，同时文字太小会显得小气，看起来也会比较吃力，不利于信息接收。
按设计好按钮组件之后，页面中的其他组件或元素要与按钮有很明显的区别避免让用户产生不必要的误解。
在弹窗中，主按钮是在左？还是在右？这是一个争论不休的问题，在移动端的弹窗设计中，主按钮靠右就行了，不一定绝对正确，但绝对不是错的，根据调查数据显示，单手使用右手操作手机的用户比左手操作手机的用户量高且用户也有一定的意识，左侧为上一步、右侧为下一步，顶部左侧为返回右侧为保存或确定。
可操控性是按钮设计最重要目标之一，不仅要样式统一，还应符合用户的认知让用户能快速知晓这个元素能否点击？如果将按钮样式设计的与用户认知有较大的偏差，不易于用户理解。
按钮设计中，大部分都需要用户完成一定任务之后才能正常操作下一步按钮在完成之前，需少用禁用按钮，在前面有讲到「待激活状态」，即在按钮中填充浅浅的主体色等待用户完成任务激活。
通常系统默认不允许操作或存在时间限制会用到「填充为灰色的禁用按钮」即便如此，也要尽量让系统将其隐藏万不得已的情况下需要在按钮附近说明情况，以免使用不当引起用户的负面情绪。
对于设计师来说，按钮作为设计组件之一，有很多细节容易被忽略，我们需要对每一个细小的元素进行深入思考无论任何大小组件，都需要做到精益求精，才能给用户带来更好的使用体验，那我们该如何实现按钮的正确使用方法？我们总结了20条把按钮设计到最好的建议，我们一起来看。
按钮在产品界面中是非常重要的元件之一，按钮作为用户引流和行动触发来说都是至关重要的，如何把按钮设计做到最好，是设计师需要不断探索的问题，把控好每一个细节才能让每一个元件更精致，我们梳理总结了 20 条在设计按钮时需要避免的问题，把按钮设计做到最好。
在整个产品设计中我们要根据信息传递的优先级对按钮设计进行主次区分，设计表达要有强弱差异按钮设计可以通过大小、填充、描边、色相、饱和度等的不同来进行强弱差异，不同强弱的差异表现出按钮的等级：行动触发主要、次要、辅助、禁用等。
对于按钮边框来说，我们通常采用全圆角和小圆角居多，这样显得稳重大气。而大圆角按钮并非不可用，只是相对较少，会显得按钮不方不圆的，设计表现显得不够成熟，全圆角的圆角值等于按钮高度值的一半，而小圆角的圆角值我们通常控制在 1/4H（高度值的四分之一）以内。
给一个有彩色系按钮设置投影时，选择无彩色系（比如黑色）也能达到效果，只是为了得到更好的视觉效果，提高用户感官体验。我们也可以尝试基于按钮本身色相来确定投影颜色，这样得到的效果会显得更加干净清爽。
虽然投影的运用可以使按钮更有层次感，但是也需要根据具体情况慎用，比如对于一些浅色按钮来说也许投影反而会降低按钮的识别度，使得按钮配色环境显得不够干净清爽。
按钮文字和边框的设计要预留一定的留白，不要做“舍不得”的设计，使得按钮给人感觉很拥挤，看看文字大小和负空间之间是否存在某种比例关系，找到这个比例关系运用到按钮设计中，可以给按钮赋予生命具有呼吸感。
按钮的存在是为了引导用户进行引导式操作，而不是让用户对其产生困惑，按钮设计别让用户思考这是啥，是否可以点击，需要简洁明了的对此操作进行指引，用户已经养成对按钮外观和功能的行为习惯，如果你设计的按钮样式与“标准”差异太大，用户就会产生疑惑，影响使用体验。
当设计元素规范统一时，用户操作过程中的理解成本最低，一致性也因此成为最有力的可用性原则之一，我们在设计按钮的时候要注意样式表达的一致性，比如：按钮形状、色彩定义、风格特征等，这样会使得我们的设计可用性更强。
直接字符输入形成按钮内部所需箭头，这样的表达方式自然显得粗糙些，箭头要当成图标来进行设计，控制好箭头的粗细和文字笔画的粗细值接近，这样显得更有细节和态度。
通过信息对比才能形成主次之分，按钮设计需要在风格上进行区分，达到层次结构的视觉提示，主要的按钮需要和次要的、辅助的形成差异，最大化突出主按钮的视觉效果，更好的引导用户根据设定的轨迹进行操作。
在整个项目设计规范中，我们需要避免让用户把非按钮状态的内容进行误判，在确定好按钮样式特征之后，不要在其它场景运用其样式特征或者类似的风格特征，这样会让用户产生错误的认知，因而进行无用的操作。
在进行按钮文本思考的时候，尽量减少字符和单词的数量，内容表达言简意赅，只要能够准确传达信息识别度即可，有时候也不一定需要文本，图标可以传递的信息可以考虑文本的减少也许可以让界面的呼吸感更强。
单行文字的可读性更高，如果出现换行就会降低可读性，我们在设计按钮的时候，确保文本内容在一行之内显示如果设计空间不足要考虑文本内容的精简。
底部按钮的运用并非固定不变，不同机型或者特殊场景的考虑需要灵活转变，比如 iPhone X 等类型的机型，由于底部需要预留主页控制器的位置，所以在设计按钮的时候需要考虑上中下的过渡衔接，这样才能带给用户更好的感官体验。
按钮需要方便用户进行点击操作，如果用户点击失败或者误点到周边元素，就会带给用户不友好的体验。若是带有文本的按钮，只要文字大小不要小于极限值，通常实现出来的按钮交互热区都会满足点击需求，如果是纯 icon 的按钮，除了按钮大小需要控制合适以外，也要确保交互热区能够满足点击区域要求。
在同属板块内的按钮设计，我们可以通过按钮的强弱来体现层级关系，不要让按钮大小不一致这样视觉平衡会受到影响。
稍微注意细节的设计师也不会让文本的长度超过按钮宽度，这是一个非常明显的错误。但是按钮文本变得很长却是遇见过的，几个字即可表达的意思却使用了过多修饰词。在进行按钮文本思考的时候，要根据最佳的视觉效果设定一个最大值，不要任其无限制发挥，这样会使得最终的视觉效果大打折扣，甚至影响用户感官体验。
按钮设计需要考虑在不同环境下的适应度，确保用户可以一目了然的发现它，现在很多产品都适配了深色主题模式，按钮的配色不能只考虑白色或者浅色背景下的运用，需要考虑大多数背景下的适配。在进行色彩选择的时候始终保持按钮与背景的高对比度和可读性。
关于按钮文本的设置需要结合信息传递的识别性和准确性，虽然纯图标显得设计简洁大方，但是需要考虑图形是否可以准确的表达其含义，不会让用户出现误解或者错误的认知。所以，按钮去文本需要根据文案代表的含义来判断，如果不需要辅助解释也能判断出按钮的意思，那么更为简洁的设计表达效果更佳。
色彩在设计中是最直观的体现，不同的颜色会传递不同的性格，带给用户认知差异。而按钮的颜色选择也并非随性发挥，需要结合品牌色和辅助色作出判断。
通常比较统一的标准是采用品牌色作为大部分按钮的颜色，遇到一些需要差异化的按钮会选择辅助色来表达，红色或者橙色多为行动刺激作用，不适合在非品牌色的时候滥用。浅灰色或者低饱和度的色系会带有不可用、禁用失效等属性，需要酌情选择。
引导用户作出选择的按钮应该放在左边还是右边，根据操作系统的不同也引起了设计师们的争议。比如 Windows 系统习惯将确认按钮放在左边，而苹果系统却选择了放在右边，用户运用系统的习惯会影响其行为的适应度。不过要是在移动端个人倾向于将引导用户作出选择的按钮放在右边，更有利于用户点击。
有时候为了防止用户误操作，我们会将确认操作的按钮放在左边，通过助力设计让用户再次确认。所以，一方面我们要结合操作系统的习惯，另一方面也要结合用户习惯，将按钮放在最合适的位置，便于用户操作。
作者：CC小酷
链接：https://www.zcool.com.cn/article/ZMTUxNTI4MA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan。
蓝蓝设计的小编 http://www.lanlanwork.com
