The Story of Mr.Gray — Web 交互设计“灰色”的8类应用(3)
作者:T.D 来源:Tencent CDC Blog 发布时间:2009-12-30 16:57:00
标签:交互设计,灰色,网页设计,web设计
5. 次要可链接信息
深色下划线会给清爽的页面带来些许不和谐,“灰色”处理可以调和这种矛盾,既能准确传达所需表达的信息,又能使得页面整体和谐统一。
Apple在此的Web设计秉承了一贯的简洁风格,使用简单的一小段下划线,却传达出了丰富的信息。
6. 不鼓励用户进行的消极或危险操作
下图中Flickr的“封锁”操作点击后,会阻止该好友与你进行一切信息交换与互动,该操作的“灰色”处理恰好可以辅助表达出这层隐含的意思。
又如删除整条标签的icon。
存储与取消的操作,一个为亮色另一个进行“灰色”处理,这类应用在Web交互设计中应用十分普遍。
这类应用与禁用使用场景的一些区别,在于鼠标mouseover时,会有响应,如鼠标变手型,对象变色等。
7. 信息分隔
常见的有下图中的斑马线,虚线,色块等来区分不同信息区域。
斑马线
虚线分隔
浅色块区分标题与内容区
8. Mr.Gray的相对性
因为色彩具有明显的相对性,而某些Web设计为保持整体风格的一致,甚至会将主要导航“灰色”处理,然而,这些处理都是相对的,也同样可以做到主次分明。如下图中wordpress的主导航。虽然导航当前态文字为灰色,但依靠浅色背景,相对而言还是更为突出的。只要把握住Mr.Gray的相对性,对其使用便能更加自如了。


猜你喜欢
- 在前面的文章中,我分别介绍了基于列表元素柱状图和基于表格元素柱状图的实现方法,虽然方法比较简单,但是它却包含了基本的实现原理。在了解了前面两
- 过滤器过滤器的本质就是函数。有时候我们不仅仅只是需要输出变量的值,我们还需要修改变量的显示,甚至格式化、运算等等,而在模板中是不能直接调用
- 在python命令行模式下,在IDLE中输入多行,例如if else使用tab的方式,控制缩进在最后,连续两个回车,表示结束&g
- 数据完整性是任何数据库系统要保证的重点。不管系统计划得有多好,空数据值的问题总是存在。本文探讨了在SQL Server中处理这些值时涉及的3
- 最初的声明方式在没有@property修饰的情况下,需要分别声明get、set、delete函数,然后初始化property类,将这些方法加
- 前言Django的模型(Model)的本质是类,并不是一个具体的对象(Object)。当你设计好模型后,你就可以对Model进行实例化从而创
- 下面是出现的错误解释RuntimeError: An attempt ha
- 在javascript中原型(prototype)定义了特定类型的所有实例都可以访问的属性和方法,很多些情况下需要重新对原型中的属性赋值,如
- 不知不觉已经在家两个月了,眼看马上春节就要来临了。满怀期待的写了一个新年倒计时的小工具!设置新年时间后都能够使用,打开软件后可以自动计算到新
- 今天来记录下js来自定义鼠标右键,同样先来分解下它的实现原理:1、屏蔽右键默认事件;(一度我以为修改的就是默认事件)2、对一个ul的隐藏;(
- 常用的网站性能测试指标有:并发数、响应时间、吞吐量、性能计数器等。1、并发数并发数是指系统同时能处理的请求数量,这个也是反应了系统的负载能力
- 最近vue更新的2.0版本,唉,我是在2.0版本前学习的,现在更新了又要看一遍了,关键是我之前看了3个星期2.0就更新了,vux还没同步更新
- 现在,我们已经把一个Web App的框架完全搭建好了,从后端的API到前端的MVVM,流程已经跑通了。在继续工作前,注意到每次修改Pytho
- 先来看一个例子:>>> def foo(*args, **kwargs): print
- 在网络浏览器软件中,可以Internet Explorer (IE)现在是一种标准的软件。可以看到,运行不同版本的Windows操作系统(和
- 大家好,我是辰哥~今天给大家分享两个制作二维码的Python库,可以生成普通的二维码、图片背景版二维码、动图GIF版二维。1.MyQR安装p
- 如果您在试图打开一个.MDF数据库文件时,却发现自己没有安装SQL Server数据库,该怎么办呢?这时候,如果恰巧您的机子上装有Visua
- 最近在刚从tensorflow转入pytorch,对于自定义的nn.Module 碰到了个问题,即使把模组 modle=Model().cu
- 1、索引优化1.1 建表或加索引时,保证表里互相不存在冗余索引。对于MySQL来说,如果表里已经存在key(a,b),则key(a)为冗余索
- Main.jsvar routeList = [];router.beforeEach((to, from, next) => { v