多按钮共存——don’t make me think（2）
作者：死猫 来源：Tencent CDC Blog 发布时间：2010-01-11 20:20:00
下图：opera浏览器退出时的弹出对话框，Exit被设为焦点按钮
而网页端因为不存在按钮焦点状态，所以需要通过别的方法来实现同样的效果。常见的拉开视觉层次的几个手段有：
1.按钮的排序
Windows系统上主要操作都是放在左侧，用户的浏览顺序也是从左侧开始，所以左侧的按钮最容易先被用户看到。
2.按钮的大小
一般是指按钮的长短。可以通过加长文字，或者直接加长按钮的手段来拉开视觉层次。这样的按钮更容易先被用户的视线捕捉到。
下图：“上一页”按钮只有一个箭头，而“下一页”按钮为文字加箭头
下图：“确定”按钮比“取消”按钮更长
3.按钮的颜色质感
通过给按钮添加颜色或质感，以模仿客户端焦点按钮的表现。
下图：wordpress将“publish”按钮人为地设为高亮
在Google analytics这样的web系统中，由于采用的是系统默认样式的按钮，所以它选择把次要操作以链接的形式展现，从而拉开视觉层次。这样的设计在“登录”，“注册”中也很常见。
下图：google帐号的登录
最后再多说一句，表扬下opera的设计。Opera的弹出框，让像我这样的用户，只看按钮就能快速做出判断，而不用浏览对话框主体文字。如果我需要更快做出判断，只看焦点按钮就可以了。
相比之下，大多数软件的按钮上仅仅写着“确定”，“取消”；我必须阅读按钮之上的大段文字，才敢按下其中一个。不仅强迫我选择，还强迫我阅读…
下图：三个按钮上很清楚的写明了动作
总结一下刚才所说：
1.如果可能，尽量只给用户一个按钮。
2.当需要呈现多个按钮，并且它们之间存在主要动作和次要动作的关系时，通过拉开视觉层次的方法给用户更好的引导。
3.按钮的文字应该引起设计师足够的重视，承担更重要的角色，帮助用户快速做出判断。
0
投稿猜你喜欢
- ES6为Array增加了of函数用已一中明确的含义将一个或多个值转换成数组。因为，用new Array()构造数组的时候，是有二意性的。构造
- 一 domain层介绍说明domain层专注于数据库数据领域开发，我们把数据库相关操作全部写在domain层。model层：数据表字段定义与
- 最近因为工作的需求，需要对mysql中数字进行格式化，但发现网上的资料较少，索性自己总结一下，方便自己也帮助有需要的朋友们，下面话不多说，来
- 有时候我们需要使用python执行一些脚本，可能需要让程序自动按键或自动点击鼠标，下面的代码实现了对键盘的模拟按键，需要安装pypiwin3
今天在看罗素的《西方哲学史》时，忽然想到了这个想法，我认为可以从另外一个角度来看“用户体验“的影响因素。上面这个图是我今天思考的一部分，这是- javascript 数组Array（list）添加/删除unshift：将参数添加到原数组开头，并返回数组的长度pop：删除原数组最后一项
- 对数字货币的崛起感到新奇的我们，并且想知道其背后的技术——区块链是怎样实现的。 但是完全搞懂区块链并非易事，我喜欢在实践中学习，通
- 分形，具有以非整数维形式充填空间的形态特征。通常被定义为“一个粗糙或零碎的几何形状，可以分成数个部分，且每一部分都（至少近似地）是整体缩小后
- 这篇文章主要介绍了微信小程序 textarea 层级过高问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习
- 数值运算代码：# -*- coding=GBK -*-import cv2 as cv# 数值运算：加减乘除def shu_image(sr
- 目录项目地址所用到的技术开始编写爬虫项目地址https://github.com/aliyoge/fund_crawler_py所用到的技术
- 最近在研究网页的切片算法，很可能很多人不知道什么是切片算法，其实这是一种面向搜索引擎的网页分块、切片的原理，目前随着工作的深入，逐渐碰到了各
- sql语句reverse(substring(reverse(Path),1,charindex('/',reverse(P
- # -*- coding: utf-8 -*- import httplibfrom urllib import urlencodeimpo
- 问题：这里只解决一个问题，到底什么是Access？设计一个数据库管理系统，用access在access里面设计好表，查询，然后再用vb做窗体
- 问题：MySQL 5.0不能使用自动增加字段。具体原因：引起的原因是在MySQL5.0.2版本中的The Server SQL Mode 中
- 上一篇博文说了 vue3 项目的 toRefs 函数和 toRef 函数，今天就稍微总结一下 vue3 的计算属性，其实学过 vue2 的宝
- 一、初识正则表达式正则表达式 是一个特殊的字符序列，一个字符串是否与我们所设定的这样的字符序列，相匹配快速检索文本、实现替换文本的操作jso
- 一. 想要实现的效果新建文件夹将自编模块集中管理可在其它py文件内import 自编模块，像import第三方库一样二. 实现的方法步骤1：
- 今天给大家分享一个用原生JS实现的好看计数器，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。<!DOCTYPE html>&
