IInterest » 用户体验

分享三组实用的小图标

Bell — Fri, 22 Jan 2010 03:20:53 +0000

MonoIcons

下载

famfamfam_silk_icons

下载

pi_diagona_pack

下载

[工业设计] Objectified（中文字幕）- 艺术设计交流

Bell — Wed, 30 Dec 2009 08:11:43 +0000

~~下载地址~~

电驴下载

浅谈淘宝改版

Bell — Fri, 25 Dec 2009 16:20:58 +0000

早上听说淘宝改版了,遂去观摩一下,打开新版淘宝给人第一感觉就是简化了许多,精简了那些闪啊闪,弹啊弹,飘啊飘的广告,这是一个值得称赞的改动,对于操作基本集中在导航与搜索框的用户来说(比如说我=.=),冗余的内容只会降低个人的用户体验.再次,从改版中也可以看出淘宝的侧重在往社区倾斜,当然这也在预料之中,毕竟拥有如此大的用户群,不好好利用起来着实是一种浪费:) 另外对淘宝电器城比较期待~

新淘宝

不过好的心情到这里就结束了,随着使用的深入,新版给我的映象分在逐步降低.究其原因就是对细节的把握不够!

新版淘宝有许多雅虎的影子,在搜索框,导航以及弹出层的设计上淘宝与yahoo比较相似

yahoo

但在细节上却没有yahoo讲究.就拿弹出层来说,当弹出层激活时没有明显的视觉提示,第一次使用时若不是看到右上角略显突兀的关闭按钮,我还真没发现我激活了弹出层:

相比而言,yahoo的则非常清晰:

再就是在阴影的设计上,yahoo的要显得精致许多:

然后是搜索框,个人感觉略显厚重,把边框改细一点或者颜色淡一点,可能感觉会好些.

最后是宝贝栏目的显示,统一的颜色乍看起来比较整齐划一,但也是因为统一的颜色使得满屏的链接缺少视觉重点而影响到实际中的使用.可以适当改变一下颜色纯度、明暗来提高层次感.

总的来说这次改版做到了由繁化简,这点着实不容易,从而大大提高了可用性及用户体验,不足之处就在于对细节的最求还有提升的空间,相信不少淘宝的设计师在用苹果的产品,那苹果给人的感觉就是简约而不简单,虽说没有华丽的外表,但都是在细节之处体现其工业设计的强大,so～希望淘宝也能更注重细节上的设计,为用户展现一个更为精致的淘宝网.

呼吸灯效果的按钮

Bell — Thu, 10 Dec 2009 09:58:31 +0000

昨天看到一个鼠标的呼吸灯效果,很是喜欢,于是用1张jpg+2张gif图片做了个呼吸灯效果的按钮,因为2个gif图片加起来就差不多28K,~~所以还用了个CSS图片缓存…~~[CSS图片缓存会使gif提前载入,但在IE下gif载入后就直接播放了,这就无法实现呼吸灯的效果,暂时没找到解决办法].这个只能算是自娱自乐,因为开销比较大,所以实用性不强.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>iinterest</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <style> * { padding:0; margin:0; } p{ margin:10px 0; text-align:center;} .content{ width:300px; margin:40px auto;} a.btn{ display:block; width:142px; height:43px; background:url(http://image215.poco.cn/mypoco/myphoto/20091210/17/51737245200912101716151943974301505_002.jpg) no-repeat; text-indent:-9999px; cursor:pointer;} </style> <script language="javascript"> function bnt_change(style){ var btn = document.getElementById("btn"); if(style==1){ btn.style.background = "url(http://image215.poco.cn/mypoco/myphoto/20091210/17/51737245200912101716151943974301505_001.gif)"; } else{ btn.style.background = "url(http://image215.poco.cn/mypoco/myphoto/20091210/17/51737245200912101716151943974301505_000.gif)"; } } </script> </head> <body> <p> <del datetime="2009-12-11T03:16:40+00:00">请等待3秒再将鼠标移到按钮上看效果 :) </del></p> <div class="content"> <a href="#;" id="btn" class="btn" onmouseout="bnt_change(1);" onmouseover="bnt_change(2);"> </a> </div> </body> </html>

提示：你可以先修改部分代码再运行。

[转]2009年最佳图标大收集

Bell — Fri, 13 Nov 2009 09:32:28 +0000

过去我们分享过很多天才和大方的设计师制作的大量图标，这些图标对我们在前端设计和开发中起到了很大的作用。现在我们整理一批2009年出现的最好的图标给大家，这些都是值得收藏的，合理的使用它们会大大的提高你的工作效率和设计效果。

IInterest » 用户体验

分享三组实用的小图标

[工业设计] Objectified（中文字幕）- 艺术设计交流

浅谈淘宝改版

呼吸灯效果的按钮

[转]2009年最佳图标大收集

Basic

Onebit Icon Set 2

Hand Pointer Icons

WP WooThemes Ultimate Icon Set

Led Icon Set

MinIcons

Grunge Peeling Stickers

Onebit

Web Injection

Watercolor Icon Pack

Finance

Flavour Extended

Social Media Icons

Must Have Icons

Social Icons Hand Drawn

Weby Icons

Quartz