魔鬼藏在细节里:网页互动按钮大小事

  当一个产品完成核心部分的需求之后,我们就可以慢慢准备开始研究细节的问题。

  

  一个产品几乎每个层面都可以谈论细节:其中还包括表面上看得到的,以及表面上看不到的。表面上看得到的细节很简单,花时间去做、去尝试、去犯错、去修正就好了。而看不到的细节诸如产品定位、用户体验等等,往往依靠不长期经验的累积、研究与得到使用者反馈外,很难清楚的明了到底哪边该怎么去制作与修正。

  笔者曾经做过一些平面设计,深刻的了解到「东西如果会被别人拿着摆着看细节,那么每个部分的细节都必须细心追求」。一张海报传单印刷出去,很容易就被复制了几百份几千份、进而有几千人几万人观看到,想到这点就不得不谨慎处理画面上的每个细节。也因此设计师常常花费一整个下午的时间,不为什么,就只是就是盯着屏幕上的稿件、慢慢地去微调画面上每个标题、每个文字的字型与颜色、尺寸与间距、字距与行距……等等。

  笔者还曾经参与过一些动画创作,深刻的体会到了「而东西如果要动起来,需要兼顾到的细节就会更多」:诸如动画的十项法则、物体落地时的形变(不同材质的物体、不同动画风格的表现还会影响形变度呢)、动画角色表演时的预备动作……等等,虽然不做不影响整体表现,但缺少了就是会让观赏者觉得少了点味道。

  

  

  而在参与用户接口的制作后。再度深刻了解到「如果东西如果还能够与使用者互动,那么需要顾虑到的细节就更加倍增了」。因为我们永远无法预期,使用者会在哪个时间点,做出超出你预期外的事情。

  追求细节是很耗费时间的工作,但我们要有追求细节的态度

  按钮的互动细节

  以网页上最常见的互动元素:按钮来说,网页上的按钮一般包含了三种互动效果,分别为:Normal、Hover 以及 Active (Pressed) 。通常状况下,网页设计师会利用三张图片的替换来完成这个效果(不论是使用三张独立图片抑或是利用 CSS Sprite 皆是)。

  

  曾经有一段时期,Flash SWF 成为了因特网的热门宠儿,可视化的创作接口让许多创作者减低了排斥感,成为很多网页设计师必学的软件之一。在 Flash 中默认的按钮组件也提供了相同的互动效果:Up、Over 以及 Down(其中第四个 Hit 为感应区)。由于 Flash 的动画特性,使用者可以在每个状态中加入动画组件,让用户与按钮的互动中加上动态效果。

  

  好了,现在我们可以替按钮加上动态的效果,例如下面这个状况:我们在 Over 里面放了一个黑色色块的动画片段。当用户把鼠标移到按钮上方就会触发这个动画效果:

  

  在互动上的经验活泼了不少,但是却少了点什么:由于 Over 区块侦测的是「当鼠标移动到区块上时」触发动画效果,而当「鼠标离开区块时」却没有相对应的影格,导致整个动画效果却是硬生生的被截断。 魔鬼藏在细节里(The devil is in the details),如果我们想要取得完整的体验,势必必须考虑到这个容易被大家忽略的部份,也就是不只是光标移到按钮上方的动画效果,光标离开的效果也是个列入设计考虑的细节之一,理想的状态如下图所示:

  

  想要兼顾到这个效果,就不得不利用程控来达成目的了(不论是 Flash 或是 CSS / JavaScript 等等皆是)。透过程序语言的控制的确可以有效的达到想要的效果、让设计师的创作想象力更为广泛,不过也有着无法善加利用图片,以致创作弹性较低,以及另外一个浏览器与平台支持度的问题。

  更多的细节

  「如果东西如果还能够与使用者互动,那么细节就倍增了」,像是同样的例子,我们将动画效果减速演出之后,就会发现另外一个问题:「如果使用者在动画表演到一半的时候,鼠标又离开别的地方呢?」以下面的按钮组件为例,动画是会硬生生被切断的(因为影格被强制跳出到下一个影格了)。

  

  相对的,这么做是较为安全的作法,因为当用户的「光标离开感应区时即强制中断动画表演」就不会遇到动画排程的问题:想象一下如果光标离开了,动画还缓慢地表演的时候,用户又快速的重复光标进入、离开、进入、离开的动作,是否又是另外一场灾难呢?考虑到这个问题,如果使用程控的情况下,就必须细心兼顾到这个部分的细节。

  小小一个按钮、搭配一个简单的动画,却由于牵扯到与使用者互动的部份,即会牵扯出这么多的「细节」出来。虽然追求细节很耗费时间,大部分的时候恐怕都会被认为「这部份不影响产品功能」、「这个不是产品的核心」等等而被草草带过。但就像著名的设计师 Charles Eames 说过:「细节本身并非细节,而就是产品的精髓。」他们那些经过千锤百炼、精心校调设计的椅子款式,一直到现在都还是精彩的设计呢。

时间: 2024-07-31 08:03:25

魔鬼藏在细节里:网页互动按钮大小事的相关文章

魔鬼藏在细节里:互动按钮大小事

当一个产品完成核心部分的需求之后,我们就可以慢慢准备开始研究细节的问题 一个产品几乎每个层面都可以谈论细节:其中还包括表面上看得到的,以及表面上看不到的.表面上看得到的细节很简单,花时间去做.去尝试.去犯错.去修正就好了.而看不到的细节诸如产品定位.使用者体验等等,往往依靠不长期经验的累积.研究与得到使用者反馈外,很难清楚的明了到底哪边该怎么去制作与修正. 笔者曾经做过一些平面设计,深刻的了解到「东西如果会被别人拿着摆着看细节,那么每个部分的细节都必须细心追求」.一张海报传单印刷出去,很容易就被

“魔鬼”藏在细节

摘要: 宁愿牺牲两年6%人民币升值带来的汇兑损失,也想分享脸谱(Facebook)100亿美元的上市募资盛宴.施建荣(化名)的脑海里,第一次出现上述念想. 年初,他收到一份意想不到的新年贺礼:来 "宁愿牺牲两年6%人民币升值带来的汇兑损失,也想分享脸谱(Facebook)100亿美元的上市募资盛宴."施建荣(化名)的脑海里,第一次出现上述念想. 年初,他收到一份意想不到的新年贺礼:来自中国平安信托的"QDII股权挂钩结构性产品-脸谱(Facebook)未上市股权"募

富士康十连跳:魔鬼藏在细节中

新闻观察 当这十个年轻人纵身一跃的时候,其实他们的身后存在着许多无形的推手,社会转型期的集体焦虑.制造业企业残酷的生存法则.社会文化配套上的严重缺失.富士康里的这些年轻生命所承受的沉重,实际上是经济社会发展所付出的一种代价,帮助他们卸掉这些负担,企业的责任不容推卸,政府和社会也都有一份应尽的义务. 专家视线一:一堵墙 这些年轻人踏入社会迈出第一步之后,就迎面碰上了一堵墙.而我们所有的机制都是排斥他们的,我们所有的声音都告诉他们,你们是打工人,你们不属于这里. 2010年5月6日,卢新从阳台纵身跳

魔鬼藏在细节中 谈博客外链建设的那些细节

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 行业的竞争日益激烈,各站长频繁接单为增加收入,进出各论坛.博客忙于发外链......其实还有很多细节我们都遗漏了,用博客做外链,我们的博客都准备好了吗?是否真的可以做外链了?很多站长都说博客越来越难做,你们都把自己的博客设置好了吗?今天以新浪博客为例,跟大家分享分享博客的设置: 一. 博客信息如何编写 博客名称: 用你想要做的关键字来起名字,

魔鬼藏于细节:新版Twitter的微妙变化

Twitter.com进行了重大改版,新版Twitter将在未来几周内向用户分批开放.昨天我们对twitter.com的幕后故事进行了详解,今天,我们来看看Twitter-UI的一些细节问题. "What's-Happening?"不再咄咄逼人 "What's-happening?"文本框仍在首页消息流顶部,但比原来更窄.默认没有"tweet"按钮,点击文本框才会出现.这正符合之前Twitter CEO Evan Williams的说法:Twit

风险识别:魔鬼隐藏在细节中

魔鬼之所以名字可怖,是因为它会给人们带来灾难性的后果.而在魔鬼现身为祸人间之前,细节正是其最好的藏身之所. 文/王锡建 杨 毓 对于风险这个魔鬼来说,如果它能够一直局限在企业运营的细枝末节之中的话,确实没必要引起管理者过多的关注,因为企业经营总是面临着无数的波折和矛盾,管理者的精力要用在最能发挥价值的地方.但魔鬼总是不甘蛰伏的,遇到合适的条件,它就要搅起风风雨雨.企业经营千头万绪,所有的活动都是由无数细节组成的,管理者特别是高层管理人员精力有限,不可能时刻盯住所有的事情.而要想识别出藏在细节中的

求教:引用母版页后,原网页图片按钮失效。

问题描述 网页有一图片按钮(日历选择按钮),没引用母版前,可以顺利触发JS函数,引用母版页后,按钮不但不能触发JS函数,还刷新页面并触发验证控件,求解.以下是母版.子页以及按钮相关的代码和图片:子页:<%@PageTitle=""Language="C#"MasterPageFile="~/MasterPage/MainProjectInspector.master"AutoEventWireup="true"CodeF

细节让网页设计与众不同

一辆豪华汽车与传统汽车拥有同样数量的车轮.座位.门窗,但是使得它在竞争中脱颖而出的却是花费在细节上的时间.加热真皮座椅,一按即启动引擎,无钥车门开关,自动泊车系统,丰富的数字电台等等使得它成为一辆昂贵的新型车. 同样的规则也适用于网页设计.愿意花费时间专注于细节的网页设计师能够获得拥有更多价值的设计.这里的关键词就是价值.我们无法保证建立网站所花费的时间和其结果所带来的价值之间有直接的关系,总有一些细节比其他更加重要,关键是要能够确定哪些细节更具有影响力. 增加价值的细节 这一类型的细节是我们愿

PhotoShop简单制作斜纹质感网页导航按钮教程

用PhotoShop制作一种斜纹质感的网页导航按钮效果,简单易学. 效果图: 大家好,下面由我来开始教如何做上图效果的简单按钮: 1.首先打开photoshop软件,Ctrl+N新建一个10 x 10px的72dpi(分辨率)的文件: ①.我们先在图层面板新建一个新的图层,然后把背景图层删除(可按del键快捷键) ②.接着在"导航器"把界面放到最大 可按ctrl+"+" 快捷键,然后选择矩形选框工具,再选择上面的"添加到选区",然后按照下图选出那