当前位置:网站首页 >> 作文 >> 最新按钮 设计 按钮标准(六篇)

最新按钮 设计 按钮标准(六篇)

格式:DOC 上传日期:2023-03-16 14:55:28
最新按钮 设计 按钮标准(六篇)
时间:2023-03-16 14:55:28     小编:zdfb

每个人都曾试图在平淡的学习、工作和生活中写一篇文章。写作是培养人的观察、联想、想象、思维和记忆的重要手段。相信许多人会觉得范文很难写?这里我整理了一些优秀的范文,希望对大家有所帮助,下面我们就来了解一下吧。

按钮 设计 按钮标准篇一

中权重:带边框轮廓的概述按钮,同一页面可存在多个中权重的按钮;

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

按钮的状态

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

按钮 设计 按钮标准篇二

其实严谨点来说,界面层的「取消按钮」与弹框层的「取消按钮」的意义是不同的。

虽然都是安全性后退,但是前者多了一层含义:放弃属性。

还是微信朋友圈的界面:

所以会弹出第二层弹窗:

无非就是微信通过加粗「保留」来告诉用户,这里的召唤行为是它而已。

所以这层「取消」的含义,不仅仅是取消,还多了一步是否把你放弃的内容保留下来的逻辑。

因此在这层含义上,「取消按钮」也需要特殊处理。

如果说微信这里的「取消按钮」在设计上没有突出其特殊性,那 twitter 同样的例子,就比微信高明很多:

按钮 设计 按钮标准篇三

上面提到的许多例子中,还存在一个类似的问题:它们大多选用 ios 自带的弹框直接做为操作对象。

我始终觉得在 ios 提供的弹框中,两个操作的按钮颜色保持一致是不对的。

粗细有时候很难被直观感受,而颜色可以在第一时间被感知。

比如前面提到的这个案例:

理想情况下,即使用户知道右边是行进,左边是取消,但弹出这个弹框的时候,不免还是需要再次阅读一遍进行确认。

但如果改个颜色,好像就更好理解(当然文案也是问题,但优先级弱于颜色),毕竟弹框也是设计的一部分:

硬生生的给「取消」附上召唤属性,只会让用户在操作时摸不着头脑。

这样例子还有很多。

但是我觉得做得好的,应该是这样的:

这就是刻板印象造成的结果。我们应该学会适当地使用控件,并根据自己的产品对其进行优化。而不是一味跟风。

综上所述:

如果对 ios 设计规范有足够的了解的同学就能知道:

如果你仔细观察 macos 的设计,就能发现他们为具备召唤行为的按钮位置与颜色都做了特殊处理,并不是简单的同色系,或用粗细表示。如图:

虽然用 macos 来反驳 ios 似乎不太合理,但我只是想说明在设计结果上,我们应该有自己的思考。

就这个问题,我在 twitter 上咨询了前 apple,后创办了 uxm 的产品设计师 anthony。原因是,他曾经也就「取消按钮」的颜色提出过一些个人看法。

在我说了这些内容之后,他跟我说的第一句话是:

hi dai — while apple is very good at design, they are not perfect.(apple 非常擅长设计,但它们并不完美。) 

接着他继续说道:

借着这个机会,我还跟他聊了许多其他内容。而这件事本身再一次验证了我的想法:

哦,不是,跑题了,应该是:

看完这篇文章,再去翻一翻 google material design guidelines,就会有一种「哇哦!原来如此!」的感触了。

按钮 设计 按钮标准篇四

不应使用行业术语和底层的技术内容( 如错误代码 )。用户应该感觉的是他们在和另一个人说话,而不是一台机器。罗伯茨建议,。这意味着除非特殊情况,否则我们应该避免使用行业术语。

这其实是一件比较难实现的事情,因为我们对我们所设计的产品以及我们每天遇到的行业术语非常熟悉。解决这个问题的一种方法是与用户一起测试微文案 —看一下 他们懂我们使用的语言吗?

下面展示了一个示例。与“启用”这个词相比,用户可能更熟悉“打开”这个词。

避免使用专业术语

按钮 设计 按钮标准篇五

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

4. 按钮中的文字

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

5. 文字与按钮比例

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

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

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

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

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

8. 无障碍设计

按钮 设计 按钮标准篇六

谈到按钮设计前,先简单说说b端产品。b端产品主要面向的是企业客户以及内部员工使用,比如oa、erp、crm等,一般除了目标用户,其他用户很难接触到。b端产品的设计通常需要结合具体的业务场景,功能和逻辑往往比较复杂,且用户通常需要长时间沉浸使用,因此要求界面设计层级清晰,布局简洁高效。

b端按钮设计通常存在三方面的复杂性:

按钮数量多:b端产品几乎所有页面都会有按钮,甚至同时有多个按钮。对层级感和美观度的要求都很高;

应用场景多:按钮需要适应b端产品的多种业务场景,包括登录界面、表单、弹窗、信息提示框等;且每个场景出现的形式都不尽相同,需要对每种场景严格规范才不至于使用混乱;

出现形式多:按钮通常具有正常、聚焦、悬停等多种状态,需要保证用户能够及时发现并获得准确的反馈效果。

要想解决这些问题,我们需要了解按钮的主要类型和设计细节,以便在各类情况下灵活运用。

全文阅读已结束,如果需要下载本文请点击

下载此文档
a.付费复制
付费获得该文章复制权限
特价:5.99元 10元
微信扫码支付
已付款请点这里
b.包月复制
付费后30天内不限量复制
特价:9.99元 10元
微信扫码支付
已付款请点这里 联系客服