按钮的设计说明

2024-01-18    分类: 网站建设

1. 范式——从书中寻找解决方案

目前得到普遍认可的原理,就是范式。对于设计理论,不同的人会有不同的见解。什么是普遍认可的理论呢?专业的书籍是我们获取设计范式的最主要途径,对年轻的设计师而言,我觉得这一点尤为重要。

2. 广博——看线上优秀产品是如何处理这个问题的

任何知识都是不断迭代和完善的,只有广博,才能不断验证和更新从书中得到的设计范式。而分析优秀的产品是广博的主要途径。

3. 输出——结论与应用

根据从上面两个步骤得出的结论,总结分析是否能应用到自己的设计中。

这是我目前学习的主要方法,如果你有更好的方法,可以留言交流。

下面分享通过这三个步骤我得出的关于按钮设计的结论。

一、按钮的种类

按钮属于命令控件,包括普通按钮,图标按钮,文字按钮。

1. 普通按钮

2. 图标按钮

3. 文字按钮

二、如何保证按钮的识别性与易学性

1. 用视觉样式告诉人们此处可以点击

在扁平化设计之前,按钮都具有三维凸起的特征,这一特征我们仍可以学习。给按钮添加适当的阴影,阴影可以使元素突出于背景,这样更容易使用户识别它的可点击性。

2. 保持一致性

一个网站的按钮形状尽量保持一致,用矩形就都用矩形,用圆角矩形就都用圆角矩形,用户会将特定形状的元素识别为「按钮」,一致性会为用户提供更加熟悉的体验,减少用户学习成本。

3. 使用高效率,易懂的文案

按钮上的文字「确定、取消」用更加生动确切的文字替换。

这里引用上篇文章的例子:

4. 使用合适的图标

箭头朝右,可能意味着离开此页;箭头朝下,可能意味着打开下面的内容,或者打开下面的菜单。

网易邮箱里的「发送」按钮用了图标纸飞机,不仅提高了按钮的易读性,同时也和其他按钮做了很好的区分,提高了发送按钮的优先级。

三、按钮的反馈状态

按钮在操作中一定要有反馈,来让用户明白自己的操作发生了什么。

按钮的状态有默认状态、悬停状态、点击状态、禁用状态、忙碌状态。

四、禁用状态又有以下几点要注意

1. 明显区分

禁用状态和可用状态的样式要有明显的区别,让用户清晰的知道这个按钮不可点击。

2. 禁用状态下要给用户相应的反馈

当鼠标移动到禁用状态下的按钮时,用提示工具向用户解释禁用的原因。

3. 禁用状态的按钮是可见还是隐藏

禁用状态下的按钮的可见性取决于它在界面中的位置与功能属性。

五、确定放左还是右?

对于这一问题,不同的平台,不同的软件都不太一样。

windows 是确定在左,取消在右。

而 mac 系统是确定在右,取消在左。

为了使用户有一致的体验,最好的方式是不同的平台使用不同平台的规范,但是当我们的设计是基于网页的时候,该如何安排确定和取消的位置呢?

我本人更倾向于「确定」在右,「取消」在左,「确定」意味着进入到下一步,「取消」意思是返回到上一步,基于用户对「上一步」和「下一步」的使用习惯,也应该是确定在右,取消在左。

六、不同优先级按钮的设计

当我们的界面功能比较多时,就会出现比较多的功能按钮,这些功能按钮肯定会有优先级,这个时候我们就需要设计一套一级按钮,二级按钮和三级按钮,甚至更多。

本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司!

分享题目:按钮的设计说明
分享链接:https://www.cdcxhl.com/news27/314177.html

成都网站建设公司_创新互联,为您提供网站策划企业建站服务器托管网站导航搜索引擎优化标签优化

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

营销型网站建设