首页 > 建站资源 > 网站运营 > 设计分享:提升按钮设计体验的三大设计原则

设计分享:提升按钮设计体验的三大设计原则

时间:2018-10-11    来源:人人都是产品经理

按钮属性解剖

按钮对于UI新手就是一个简单的长方形矩形,设计时会忽略按钮设计要注意的细节,甚至标注时候遗漏一些需要标注的参数,导致开发产生偏差,视觉还原度不好。

按钮在表面看的属性从远到近是颜色、形状、字体,但是真正的按钮属性并不止这么简单的这三个属性。

这里我以标注一个简单按钮为例,分析下按钮应考虑的属性。

由此可以推断出按钮的有六大属性:颜色/形状/字体/大小/投影/留白。

无论是几个互联网巨头的设计规范,以及最近新出的谷歌规范,能看到关于组件部分,第一个组件设计的就是按钮。

在做标注时,我们经常就会忽略一个最重要的使用规则,按钮中的内间距,还有按钮外间距,这决定了按钮跟其他元素的合理距离。

在原子理论里UI组件最基础的元素从原子开始的。

按钮就是最简单的原子,通过按钮的可继承属性(按钮高度,按钮圆角,按钮文字字号等属性)。为了排版布局的整齐和一致,其他原子(输入框、单选多选框、搜索条等)也会继承这些属性,因此按钮在设计语言的组件设计中占有举足轻重的地位。

因此当我们在设计语言中定义按钮时,一定要思考这六大属性,它不单纯影响自己的呈现,还影响了其他原子的属性。

按钮的设计原则

了解按钮设计的这六大属性,我们就能设计好按钮了么?

当然没这么简单,我归纳了三大设计原则,遵循设计原则,才能保证按钮真正实现它的商业价值和用户价值。

1. 按钮的可点性

UI界面中如果需要用户理解设计越长可用性就越差。设计必须在考虑把界面做得酷炫前,让用户知道按钮是“可点击的”。

因此按钮至少要考虑从形、色、字上创建识别为可点击的按钮。

多种形状按钮 图片来源Dribble

相关推荐
连按钮都设计不好 你还指望用户点击?
网站的分页设计如何做得让用户体验更愉悦?
WEB产品设计须理清脉络 引导用户做正确选择
用户注意力与交互设计的简单分析
13个国内知名互联网公司的产品设计团队博客网址
网站页面重构中如何创建良好的用户体验
互联网产品设计之影响用户体验的4个因素
交互设计的细节分析之分页设计
以移动应用设计为例讲解符合用户预期的设计思路
什么是响应式网页设计?
20大UI设计原则 设计师必备宝典
新浪潮下产品交互设计的三个新趋势浅析
如何在6个月内自学成才成为一个互联网设计师?
产品设计中认知心理学分析其交互设计
案例分析情感化设计对用户体验的影响
B2B行业网站导航菜单的易用性设计原则
细说用户体验设计背后的“黑暗模式”
10条有效提高网站可用性的经验技巧分享
互联网产品设计理念:产品即有机生命体
遵循用户需求的设计:最美APP的9条闪光定律
扁平化交互设计让用户体验更棒
如何让网站更“值得点击”?五大用户体验要点可搞定
从电商网站应用设计中学到的九个成功秘诀
作为一个顶尖产品经理必备的6大特征!
60个以小见大的互联网产品设计细节汇总
对话谷歌交互设计师:Google是怎么做设计的
细节决定成败!提高用户登录体验的5个细节
VXPLO:一款快速实现网页交互设计的工具?
网站设计的10大金律:帮你更好的留住用户!
我与交互设计这十年:交互之外的那些事儿
2014年八个最棒UI设计灵感:你最中意哪个?
Web APP与原生APP有哪些交互设计区别?
访谈:关于锤子科技 你不曾了解的有趣一面
戏说“愉悦”强迫症:真的交互设计满足需求
产品实用技巧:交互说明中容易忽略的几件事
华为总监:18条交互设计和心理学之间的联系

精彩推荐

热门教程