王朝网络
分享
 
 
 

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

王朝学院·作者佚名  2016-08-09  
宽屏版  字体: |||超大  

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

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

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

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

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

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

按钮的互动细节

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

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

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

在互动上的经验活泼了不少,但是却少了点什么:由于Over 区块侦测的是「当滑鼠移动到区块上时」触发动画效果,而当「滑鼠离开区块时」却没有相对应的影格,导致整个动画效果却是硬生生的被截断。

魔鬼藏在细节里(The devil is in the details),如果我们想要取得完整的体验,势必必须考虑到这个容易被大家忽略的部份,也就是不只是游标移到按钮上方的动画效果,游标离开的效果也是个列入设计考量的细节之一,理想的状态如下图所示:

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

更多的细节

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

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

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
>>返回首页<<
推荐阅读
 
 
频道精选
静静地坐在废墟上,四周的荒凉一望无际,忽然觉得,凄凉也很美
© 2005- 王朝网络 版权所有