1. 首页>头条关注 > seo技术

【网页按钮】12条网页按钮设计技巧收藏好

作者:张同林
2019-01-05
seo技术
这里有12条网页按钮设计技巧,是笔者在设计多种按钮,包括主按钮、主要按钮,以及在一个新兴零碎中的运用的少量其他按钮时所总结出来的,十分值得一读,希望可以对大家在设计中有所协助。


说到网页设计中的按钮,可以经过按钮能做很多事。比如说,停止下一步、确定、以及完成等操作。有了按钮,交互一下就焕发了活力。

按钮:按钮代表着“做某件事”,即点击了按钮代表着操作了一个功用,做的这件事是有结果的,不易挽回的。例如典型的google,QQ邮箱。像信息搜索、回复、注册,他们的共同点是:都是在“做”一件事,并且绝大少数都是对表单的提交。从技术上讲,(如何躲避网页表单设计错误)这类按钮的作用是向后台提交了数据,“命令”效劳器去做了一件事。

这就是为何按钮大约是一个零碎设计中最重要的组成局部。理由十分复杂,按钮提供了一个款式复杂的标签供人在界定区域内点击。(28个精巧的网站按钮设计欣赏)也就是说,按钮是你使用设计言语根本属性的方式,这种方式当前还会使用在愈加复杂的组件当中。

1. 按钮要和超链接区分开



在扁平设计时代,相似Material Design,会将“扁平”按钮,多样使用于工具栏、举措组、还有文本串联。在默许形态下,这跟超链接只要细微的区别甚至是没有区别。但是,从archor tags开端,按钮的形态和行为都会带来一系列需求区别的考量。

假如你的零碎提供了扁平设计,要确保它设计上和代码上的惯常用法,都是可以跟超链接区分出来的。此外,确保方案涵盖交互的复杂性,例如聚焦&按压形态,留白,对齐等。

2. 设定文本的作风基调

幸亏,过来“点击这里”是存在的。但我们仍然需求答复:按钮标签可以有多长。标签是采用祈使语气,即命令式、强迫性的语气吗(例如,“保管”或许“封闭”)?我应该在动词前面加上宾语吗(在“保管”前面加上“文档”)?关于罕见操作有习用的标签吗?要加注品牌标语……还是不要呢?(21个简约网页设计欣赏)

在可以找到全部按钮的标签指南处引入前后分歧的用词。当然,用词列表和深度编辑规范可以在Voice和Tone等指南内找到。不论怎样,按钮指南是开端把指南桥接在一同的好中央。

3. 当背景较复杂时,按钮用反色

在纯白背景下大少数款式的按钮还行得通,但假如你把按钮搁在照片背景上呢?或许是一个更深的不同颜色的背景?更伤脑筋的是,你的按钮也可以放在淡色中性色的背景上吗?按钮可以用在(包括但不限于下面所提到的)任何状况下吗?主按钮的颜色可以随意改动吗?






把主按钮放在不同的背景上停止演示,然后制定一个相反的替代方案——白色?不同颜色?或许半通明?——当背景变深时使用上述方案。做文档时,把亮色和暗色等方案展现在一系列罕见背景上,这样可以把成绩讲清楚,把按钮展现在一系列罕见背景上,效果好坏都展现。(物流网页设计欣赏)

4. 设计并树立按钮的交互标准

按钮是最复杂原始的交互,交互随同着改动。仅仅出现给开发者页面加载时按钮的款式来表示“按钮长这样!”是不够的。不是开发者而是设计者,来决议形态切换的按钮是如何出现的,包括:默许形态,鼠标悬停,焦点获取(“光晕形态”),被按住/激活,甚至旋转等候以及其他花式秀进度的动画。



提供不同形态下的按钮款式合集,无需用户交互(页面中嵌入按钮就好)。文档并不是搞寻宝游戏,加分的做法是像material design那样做视频演示。

5. 按钮是零碎在视觉作风上最地道的表达方式

按钮把颜色、字体和图像这三个属性严密地结合起来,构成了一个不可联系的个人。按钮也同时惹起了关于留白的讨论:外部填充(特别是,标签的左右)和内部边距(毗连其他元素)。最终,按钮可以表现更多只要内行才懂的属性,例如圆角边框(经过调整border-radius)或上升(经过调整图层暗影效果属性box-shadow),重要的按钮需求做出强调,可以应用颜色,可以应用边框,可以应用不一样的显示方式。



美丽的按钮固然能心旷神怡,但是设计的与网站其它内容差别太大,就不是那么美观了。所以设计按钮的时分,要思索该地位按钮的上下文内容,不能显得太唐突。按钮首先看功用,假如是跳转可以放在知识普及,普通需求填材料的放在引见完之后,显示按钮,这样会让用户晓得这样的按钮是什么用处。

要把按钮当作零碎作风的主导代表元素。加分做法是,把按钮的定义和一整套疾速开展的标志变量一致,这些标志变量规则了颜色,尺寸,空白和其他细节。按钮看起来很复杂,其实包括了各式各样的属性

6. 从切换开关到菜单,确保按钮都能调和地运转

按钮可以成组。一个按钮组通常由一个主选项和一个或许多个主要选项配对成套呈现。切换开关可以显示为开启或封闭形态(比方粗体),或显示一组选项中被选中的那个(比方文本的对齐选项,有左对齐、右对齐、两头对齐、以及两端对齐)。最复杂的状况下,工具栏把各类按钮都包括了:主按钮,主要按钮,切换开关,菜单,以及其他。(2017年春季盛行什么颜色)

扩展按钮的多样性时,探究并紧缩测试按钮在紧凑格式下的多种组合规划方式。零碎设计师不是预言家,能预言各种各样的状况。但是探究合理范围内的多元使用场景能协助你防止被厌恶或之后被厌恶。

7. 混合元素设计要有弹性

将按钮和icon结合运用,能强化意义并放慢用户认知,当你参加一个元素之后,即便只是一个复杂的icon,按钮的规划也不应该被毁坏分解。运用一些很少预见的元素,会惹起一些诸如外部留白和对齐方式的烦人成绩。你会想把这些成绩都逐个化解,特别是当按钮能够包括了标签,icon还有其他的一些什么鬼。



把按钮做得灵敏一点,不管是用代码还是设计工具,使其具有一定可以包容其他元素的弹性。当用户能够想往上加东西——标签、icon或许无论什么其他元素——就不必担忧加上后的外部留白或对齐方式等后续影响。

8. 确保主要按钮≠禁用

没人会盼着灰色按钮呈现,但是,你能够需求给醒目的颜色饱和的主选项旁边配上一个主要选项。得防止呈现另一个异样饱和的颜色,不然那会招致两个颜色饱和的按钮一个挨着一个,就像绿的“保管”和蓝的“提交”。不只是你,而且要让用户也能晓得哪一个更重要。

将主要按钮的颜色和它的禁用形态方案婚配起来。确保一切选项的颜色调和一致,没有谁是不易被觉察的。哪一个是禁用的?

9. 限制每页一个按钮,除非这个按钮是反复性次要操作

按钮能唤起页面操作,我们通常用主按钮,来吸援用户对页面最优先功用的留意。除非,页面上散布着一堆主按钮,这时分我们没方法排出优先级,那“用主按钮来吸援用户留意”这一招也就不论用了。



某些状况下,运用一个主按钮是正确做法。比方你需求从一组平行对象中(例如搜索出来一堆后果),或是,从设置页面上展现的不同类别选项中,来做选择。

你应该定义在何时允许页面中有多个主按钮,否则要晓得如何防止页面上有多个主按钮。

10. 留意虚拟按钮(Ghosts)在设备上的显示状况

虚拟按钮,外观上仅仅依赖同色的标签和边线构成,短少两头的填充色。标签前面是什么这可就不确定了。嗯,最复杂的状况是白色背景。但其他时分,突变色或许视觉元素丰厚的照片会让标签很难辨认。

虚拟按钮吸引着设计师把按钮玩得复杂深邃,而不像矮壮的高比照的主按钮。所以,才被称为幽灵(Ghosts)。我在可用性测试后察看到,虚拟按钮在可用性测试时披上了一层隐形斗篷。被试者看不到按钮或是无法辨认它们。这能够会减弱或毁坏按钮的价值,无法经过交互提供那些我们意图展示的操作。



在零碎中放入虚拟按钮结果自傲哦。就我察看失掉的经验标明,虚拟按钮比起它的填充版同行来说表现力更弱。加之,你可以防止破费几小时来听意见不合的设计师为它争论不休。




虚拟按钮——即便是在复杂的状况下,它的表现也是要打问号的,假如是在无法意料的背景上呢?忘了它吧。

用不了很久,零碎用户会向你要求其他“那样”的按钮。一个大的或小的按钮。一个带有菜单或工具栏的可以在不同形态间切换的按钮。这就要求你的设计零碎足够完好。

11. 尺寸多样化,可大(十分大/极大/特大)可小(十分小/极小/特小)

交互可以发作在密集区域,比方在卡片或侧边栏模块。其他时分,你能够需求一个大型按钮,用在占据了整个视窗的最大化的图片上。

提供工具来依据需求调大或调小按钮,这个工具要让人觉得复杂,就像另一个css的类或设计工具类型。另外,思索一些好记的名字——比方:特大(puffy),特小(micro)——而不只仅只是平淡的大(large)或许小(small),异样的,调大调小,按钮视觉表现力最强,主要稍弱,可以修正这些款式:颜色、暗影、大小、留白、装饰手腕等等。因而在设计的时分,要学会运用以上办法。



12. 经过菜单和区域来添加多样性

内容丰厚的按钮可以经过触发关联菜单面板来停止选择。很多零碎提供了丰厚的选择来使UI更紧凑(政府网站建立留意要点),比方菜单(或下拉列表)或下拉(或联系)按钮。

菜单按钮或是显示以后选项(比方采用Arial字体族)或是展开独立选项菜单(例如分享或许打印)。在左边参加一个箭头icon,你就能失掉一个额定的分隔空间,从左边下拉出一个菜单选项,同时右边的标签激活一个独自的次要举措。

用按钮菜单选项来丰厚你的APP,但是要慎重。相似这样的按钮空间分隔方案(右边的是正在停止的举措,左边的是菜单)支持很多使用场景,但是带来了更大的代码开支和更复杂的用户引导。若是设计更简约的网页,就不要多费心思优先思索这种不多用的方案了。




 
推荐阅读
  • 成都理工大学是985还是211 成都理工学

    2017年9月,教育部公布了世界一流大学和一流学科建设高校及建设学科名单。在这个名单里,冲出了一匹黑马——成都理工大学。为什么这么说呢?因为成都理工大学既不是“985工程”,也不是“…

    seo技术 2024-03-29
  • 浙江省委书记

    浙江省召开领导干部会议宣布中央决定袁家军主持并讲话 陈希宣布中央决定 易炼红讲话王浩讲话 黄莉新出席12月7日下午,浙江省召开全省领导干部会议。7日下午,浙江省召开全省领导干部会议,中共中央政治局委员…

    seo技术 2024-03-29
  • 泰山科技学院 泰山科技学费多少钱

    泰山科技学院是一所民办性质的本科大学,是由原来的山东科技大学泰山科技学院转设而来,目前开设有24个本科专业、20个专科专业,同比2021年之前,在2022年统招中新增了4个专科专业、3个本科专业,不过…

    seo技术 2024-03-29
  • 有希望的男人 《瑜伽教练3》韩剧

    男人是很现实的生物,他们在选择情人时也是如此。大多数男人希望找到的情人都具有以下三种特质。第一种美貌动人美貌是吸引男人的重要因素之一。许多男人会对容貌出众的女性产生浓厚的兴趣。这并不是说男人只重视外…

    seo技术 2024-03-29
  • 怎么看淘宝一共花了多少钱 在哪查淘宝

    快科技5月8日消息,近期,淘宝发布时光机活动,用户可查看自己近20年的消费情况。访问方式在淘宝搜索栏“淘宝时光机”即可。其中,用户可查到自己首次使用淘宝的日期,共花费的钱数、下单数,全国排名,近五年…

    seo技术 2024-03-29