恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
设计系统里的按钮
0.0°
2019-03-19 自译外文 经验/观点 原作者: Nathan Curtis 举报 1848 1 5 0

12个Tips建立可持续的体系

Image title

我喜欢按钮。我能利用按钮实行:前往下一步;交流提示;完成行为。按钮是生命之泉。


这就是为什么按钮无疑是最重要的交互组件。非常简单地把文字标签装在一个可点击的限定范围内。更甚者,按钮是你提供基础设计语言的地方,之后我们会由此设计更复杂的组件。


我学到了12个道理,在你设计主级按钮,次级按钮,还有其他各级按钮时能用到。


主级按钮

1.设计系统的样式调性


按钮是纯粹的视觉系统的基础构建。它综合了“三大属性”:颜色,排版,图示——是不可拆分的基础部件。按钮也规划了空间:内部间距(如对齐时标签的左右对齐)和外部对齐(与其他元素相距)。最终,按钮可以衍生出更多复杂的属性,像圆角和高度(用投影)。


摘要:让按钮承担领导系统风格的任务。在快速迭代的系统里罗列参数,比如颜色、大小、空间和其他细节是加分的。

Image title

(背景色、顶部内部距离、对齐方向、左侧内部距离、外边距、圆角、字颜色、字体、字尺寸、字重、阴影)按钮基于可以由这些简单的元素组成。


2.也设定一个动词文案基调


幸运的是,“点击此处”这种文案逐渐过时。但还是要回答的是:按钮里多长的文字标签才合适?文案需要祈使句(比如“保存”或者“关闭”)吗?我们用动词(保存)带上名词(文件)吗?有适用于一般行为的首选词吗?是否该加入品牌基因。

Image title


摘要:把你设计可用的文案放在视觉标准里。当然精心编辑过的词条指导文件更好像是“语音语调指南”。然而,按钮是个集结设计指南的好地方。


3.当背景复杂的时候反白按钮


大多数按钮在白背景下。但当背景转化为照片时呢?或者,暗色背景呢?你是否允许它放在亮的的中性色上?你能把按钮用在各种地方吗?可以转换主级按钮的颜色吗?


摘要:可以把主级按钮演示在各种背景上,测试反白、不同颜色、半透明的状态,比如背景变暗时候。可以在亮的按钮方案和暗的按钮方案之间作出方案选择,看它们表现效果如何。

Image title

展示按钮在各种背景上的好与坏


4.限制一页一个主级按钮,除非重复主级行为


按钮带来行为。我们常常用主级按钮吸引最高关注。直到,我们不能排优先次序了,还有一堆主级按钮堆满了页面(幸亏它们都长一样?)。


一些项目中,用一堆主级按钮是恰当的,当从平行的对象中选择一个时(如搜索结果中),或者设置页面模块化的的布局中。

Image title


摘要:在应用时定义,什么时候该用多个主级按钮,什么时候只用一个。


5.设计按钮交互反馈组


按钮是原始的交互,也会在交互变化时转换。加载之后让开发者发现“这有个按钮”是不够的。相对的,设计者要展示按钮在不同状态下的呈现:默认,划过,聚焦(悬停),点击/发生动作,甚至是等待时的动画效果。

Image title


摘要:可在demo 中(只是按钮而已,不需要操作者)展示按钮的各个状态。在文件中展示可以,想Material设计那样用视频展示很加分。


6.元素要组合地有弹性


把按钮标签文字和icon配在一起,深化意义,加强辨识度。


等等,我认为按钮就是文字标签在可预判大小的可点击区域内的东西,干嘛要加其他元素?即便简单的的icon,在按钮内也不可疏忽。处理长度不可预见大小的元素在按钮内的间距和对齐是个棘手的问题。如果你要顺利解决这个问题,那按钮就要自适应文字标签、图标和其他东西。

Image title


摘要:设定这种加元素的按钮为弹性的,不管是代码里还是设计里。用户想要你加东西——图标、文字标签、其他什么的都不用担心内边距的空间问题了。做这些工作,让他们得以。


次级按钮

7.保证“次级”不等于“不可用”


没人渴望点击灰化按钮。但你会发现在交互中,除了有诱人饱和的主级选项,总要有次级选项。你避开了第二种的颜色,因为如果让两个饱和的按钮挨在一起,像绿色的“保存”和蓝色的“发送”,不只是你,用户都会不知道哪个更重要。


所以你选择了一个是中性色,另一个是接近灰的颜色。然后它看起来不可点击。更糟糕的是,当你的主按钮不可用,挨在你灰色的次级按钮旁边,完蛋。

Image title


摘要:解决好次级按钮和不可用状态之间的关系。保证你的选项和谐并不拒人千里外。


8.小心机器中的幽灵(作者这点太偏见了吧)


幽灵按钮是只有描边的文字标签,没有背景色填充。这种文字标签背后的图像是不确定的。有时候标签背后是白的(那很简单)。但是,有时不管是平滑的颜色还是图像复杂的照片,都会让文字标签变得很难读。


幽灵按钮引诱设计师追求那种不结实得精致感,也拉开了它和主级按钮之间的差异。然,叫它幽灵按钮是有原因的。它们经常“消失”,我观察到幽灵按钮在可用性测试中,像是穿了隐形斗篷一般。参与者难以看见它们或者阅读它们。这成了我们吸引用户行为时候的弱点和缺点。

Image title


摘要:把幽灵按钮注入系统当中是一种冒险。我研究得出,幽灵按钮比填充的表现得更差。此外,你可能只是避免听polarizing designer在项目中的辩论。

幽灵按钮,可能一个小问题都会引发问题。在不可预知背景里,还是忘了它吧。


其他按钮类型


不久之后,系统的用户会要求你提供其他按钮。一个按钮或大或小,菜单中的按钮或是工具栏中的,这些都取决于你的系统复杂度。


9.变化尺寸,比如:大级(或者膨胀级/巨大级/超大级)&小级(袖珍级/微缩级)


交互组件可以建立在稍微紧张的地方,比如,卡片或者侧边栏上。还有时,你需要在一个全出血的大图上放置个大按钮来领导视觉。

Image title


摘要:为按钮面积设置调整大小的工具像CSS的class或者软件样式那样。还可以考虑取点难忘的名字,比如“膨胀”和“微缩”,比“大大”和“小小”好。


10.区分按钮和链接


在“扁平化设计”的年代,像Material设计把“扁平按钮”(把普通按钮的填充调的和背景色一样)用在工具栏、对话框和文本的列表中。在默认的状态下,它和链接只有一点视觉差异。然而,一个按钮状态和行为可以给你的交互带来不一样的表达。

Image title


摘要:如果你的系统提供了扁平按钮的变形样式,确认它的默认样式(设计和代码中)与链接不同(带有一般按钮的形状)。还有,要带有其他交互组件的属性,比如:聚焦、点击状态的变化;空间设置和对齐方式等。


11.增添菜单和小区域内的按钮类型


丰富按钮类型可以深化菜单面板和其中选项的关联性。很多系统有很多紧巴巴的界面,比如菜单(或下拉菜单)和分裂(或分段)按钮。


菜单中的按钮或者指示出当前的选项或者展示出可打开的特殊功能(如分享或发布)。菜单按钮是在右侧加个箭头,或分出一个区域来拉出右侧的菜单,按钮左边文字标签触发单独的行为。

Image title


摘要:扩充你的应用按钮类型,可以用“菜单按钮”,但请谨慎。按钮是纵向分割的(左边是主要行为,右边展开菜单)可以支持不同的场景,单会使代码变得复杂,也会让视觉标准变得复杂。在简单网站里,不建议这种不常用的备选方案来分散优先级。


12.工具栏中的切换按钮,确保组合恰当


按钮可以包进组中。一个按钮组可能包含一个主级按钮和更多的次级选项。切换型按钮可能开和关,或者展示当前选项(像文本编辑器中的对齐方式切换)。这是最丰富的,一个工具栏可能把多种样式组合在一起:主级、次级、开关、菜单这些组件。


摘要:当按钮扩展地多种多样时,探索并测试啊扭在紧凑空间里的效果,还有复杂组合的效果。系统的设计师不是算命先生,可以预言未来。但发掘合理的应用场景能帮你避开很多坑。

更新:2019-03-19

收藏

1人已收藏

一色_

https://dribbble.com/PanXiaoMing

  • 10

    作品

  • 26

    粉丝

  • 15

    关注

  • 扁平几何图标的终极指南
  • 界面上的视觉平衡
  • 小明的德哈尼风格插画
  • #每周临摹#炫彩抽象线条感海报

    猜你喜欢

      2019-03-19 自译外文 经验/观点 原作者: Nathan Curtis 举报 1848 1 5 0

      设计系统里的按钮

      0.0°

      你确定要举报设计系统里的按钮

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年03月19日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      5
      1
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录