酷秀Kooxo.com -- Web设计师的藏经阁

酷秀更新内容列表

web方向用户体验之让你的用户感受特别

今天早上会议中andy budd 以对于“什么能让一个网站成为用户真正难忘的作品”的一些非常不错的见解开启了web用户体验大会。 and budd 陈述的核心内容是其他行业对于良好用户体验带来的好处已经深深有所感悟，他们这些经验对于我们做web有好的借鉴性： 1.依赖第一印象：酒店了解这一点，因此，良好的酒店都会在酒店大堂提供微笑，在您的枕头准备巧克力和书面说明。 2.发现和注重细节：apple公司通过对细节的努力考虑，并考虑的结果应用到他们产品的包装上，从而实现了差异化。结果就是他们的用户从ipod的包装拆起就开始拍照，记录哈。 3.个性化和自定义的matter：星巴克允许他们的顾客自主自定义coffee,任天堂和其他的一些游戏公司也允许用户自己创建游戏角色。Second life（第二人生–备注：一个游戏）公司拿走这一创意，并且把它作为一个新的标准满足用户需求并且主张用户的个性化。对于web开发者来说，有些事情也是一样简单，比如在网站的欢迎词中使用用户的名字，会让用户有感觉更受欢迎，跟喜爱你的网站。 4.(dripfeed your information)—这里可以理解为分类或者分级。我理解的意思就是信息不能一次大量的冲击波似的提供给用户那样用户会一下接受不了。最好就是有选择性和针对性的提供给用户，可以让用户自己操作细化选择自己需要的信息比如：Basecamp提供给用户根据video特征去任意选择video，雅虎网站也会用一些的lightbox（广告灯箱）形式去解析他们网页重新设计的一些特点。 5.照顾世俗 6.使他更充满乐趣：在一些文案或者操作的提示的时候，让用户感觉更亲切，更感兴趣的做法。比如Moo在他们发给客户的邮件中会这样说：hi，您好主人我是小MOO，我会按照您的指示管理。。。。银行网站可能会觉得这不够专业，不使用类似语言。但是实际上这种方式能够让您的用户感...

栏目:[用户体验设计UED] | 发表于：2009-08-12 | 评论：(0) | 查阅全文...

12个醒目的水平布局网站设计

从前，水平滚动被认为是不好的，但是现在在网页设计中，它被作为一种独特的方法(通常用于展示)，而且貌似在大多数情况下，它的确是以一种聪明的方法来实现。水平滚动并不适用于所有情况，但是一旦处理得当，它将让一个网站鹤立鸡群，看完这些例子后，你将看到它是如何实现有趣的界面的。在这里我整理了12个水平滚动的网站设计，以启发你的灵感。或许这种风格符合你的观点，它能够让你的网站引人注目。本文参考自《27 Inspirational Horizontal Scrolling Websites》，在此多谢该文作者yugu的辛勤工作。查看本站整理的更多水平布局网站设计： 20多个水平布局网站设计 26个水平布局网站设计 1.) Vanty Claire 2.) We Shoot Bottels 3.) Artist in Design 4.) Lucama 5.) Graphic Evidence 6.) Carrot Creative 7.) Lomotek 8.) Maurivan Luiz 9.) Stephane TARTELIN 10.) Ifekt 11.) Sockho 12.) Zuba Dupa...

栏目:[酷站] | 发表于：2009-08-12 | 评论：(0) | 查阅全文...

顺手拈来UX：关于

今天逛TB的时候，突觉这对标签让我颇不爽。逛TB一般总要开5、6个页面（或以上）：从搜索结果页（SRP）-> 若干宝贝详情页 -> 若干店铺首页 -> 若干该店铺其他宝贝详情页；又或者：宝贝详情页 -> 收藏成功页 -> 若干关联推荐的宝贝详情页。以上只是列举其中两种路径，还可能有N种。总之就是：tab栏会满满当当。这就导致想要找回某tab，尤其是出发点（往往是SRP页），就十分头痛。请看以下截图：红字是我标示的各tab分别代表什么。不爽1：首页、购物车、我的TB都有一模一样的title前缀。而且在鼠标悬置时也毫无差异：糟糕的体验即来源于此：我找了很久才找到购物车。但购物车、我的TB、首页都是页头固定模块啊，无论打开哪个页面都可以直接从那里进入！何必再去找初始的tab？分析一下自己的使用场景，估计下意识地想从一堆tab里把购物车页找出来的原因有俩：点击页头，刷掉了当前页，还需要等待再次载入； tab栏里出现多个购物车、多个我的TB这种内容由我的行为产生即时变化的页面。这也许不至于导致出错，但不能否认这种体验的不良。不爽2：SRP页tab，总是需要回访的，总不能让我看几个宝贝重新发起一次搜索。目前SRP的title格式貌似是：类目+搜索字段+TB网，或属性+搜索字段+类目+TB网。悬浮效果如下：而某店铺内搜索SRP的直接的title，往往让我误点。为此，再去看了看google和百度的title是怎样的。 google将我输入的搜索字段放在最前面。百度则相反。个人认为google的做法更可取。favicon已经能很好地告诉我，这个tab是百度的tab。而搜索字段本身是把我输入的，印象更深刻，就算只剩下两个字放在最前面，也能帮助我更快速地找到。综合二者，个人觉得TB的SRP可把标题改成：搜索搜索字段+类目（或属性）+TB网。如&...

栏目:[用户体验设计UED] | 发表于：2009-08-12 | 评论：(0) | 查阅全文...

CSS Overflow 属性

根据CSS的盒模型概念，页面中的每个元素，都是一个矩形的盒子。这些盒子的大小、位置和行为都可以用CSS来控制。对于行为，我的意思是当盒子内外的内容改变的时候，它如何处理。比如，如果你没有设置一个盒子的高度，该盒子的高度将会根据它容纳内容的需要而增长。但是当你给一个盒子指定了一个高度或宽度而里面的内容超出的时候会发生什么？这就是该添加CSS的overflow属性的时候了，它允许你设定该种情况下如何处理。 overflow属性有四个值：visible (默认), hidden, scroll, 和auto。同样有两个overflow的姐妹属性overflow-y 和overflow-x，它们很少被采用。让我们分别看一下这几个值，并讨论一写共同用法和技巧。 Visible 如果你不设置overflow属性，则默认的overflow属性值就是visible。所以一般而言，并没有什么理由特别的设定overflow的属性为visible除非你想覆盖它在其它地方被设定的值。这里需要记住的重要的事情是，尽管盒子外面的内容是可见的，内容并不会影响页面的工作流。比如：一般来说，你至少不用为里面的内容为文字的盒子设置固定的高度，这样就不会遇到这种情况了。 Hidden 默认值visible的相反的值就是hidden。它会将所有超出盒子的所有内容都给隐藏掉。这对应付使用动态的内容，而且可能会由于内容溢出而引起一些布局上的问题的确很有用。尽管如此，请记住用此方法隐藏的内容将彻底的看不到(除非去查看源代码)。比如有的用户设置他们的浏览器的默认字体比你预期的要大些，你会将一些文字推到盒子的外面然后完全的隐藏之…… Scroll 设置一个盒子的overflow值为scroll将会隐藏掉渲染到盒子之外的内容，但是它将会提供一个滚动条在盒子内部滚动，从而可以查看剩下的内容。值得注意的是，使用scroll将会同时产生水平和垂直两个滚动条，就算内容只需要...

栏目:[CSS] | 发表于：2009-08-12 | 评论：(0) | 查阅全文...

从品牌网站看交互设计

上图采用胶片展示多组信息——大片展示品牌渲染。利用胶片或者类似相册的展示方式，能够展示更多的信息，视觉焦点放到上部，用动态或者滚动的选择方式让用户继续浏览下去。比较适合主题醒目，品牌放大的页面。上图采用多图展示细节方式——展示品牌的细节品质优势。品牌注重物品的质量和细节的设计。用多个单图表现同一个物品的不同细节，甚至可以做到放大每一个纽扣或皮质纹路。所谓好东西不怕看细节，用小图给用户造成一种高质的心理。上图是点击某个细节后展示整个物品——强调细节和整体的关联。细节和整体的关联，质量和款式表现，在看细节的同时，可以对比整体的款式，相互融合。有的时候我们在做设计的时候，往往追求“酷、炫”的效果，其实在表现实质需求的本质时，也不乏新颖的表现。 LV的网站的设计场景和出发心理：整体品牌形象（告诉你，我是什么）》选中你关心的类》看看细节品质》不仅质量好，整体款式更好》引导购买再收集一个例子（yoka）：演绎搭配，不能单单的推给用户搭配好的物品，而是引导用户如何才能搭配出合适自己的装扮。也就是说简单的搭配列表也许满足不了用户的需求。上图按照：你的现状是什么（调查）》看看其他人是这样的（达人秀）》你该怎么搭配（咨询引导搭配方式）》找到你的特点，开始搭配吧（上图右侧）想到什么：西贝学习到设计一个网站，不仅仅按照品牌推广的逻辑，单纯的采用交互技巧来满足用户的需求。其实，关注用户购物的流程方式，循序渐进的利用现实场景模式进行引导也许会更好。一个简单的物品列表设计也许可以演绎出比较丰富的用户需求。不要单纯的从形式来表现需求，而应该深入的分析需求，按照用户的真实场景，更加合理的表现形式。 Gucci 上图是物品的列...

栏目:[观点] | 发表于：2009-08-12 | 评论：(0) | 查阅全文...

发人深省的公益视觉

最近看了一些欧美比较火热的社会公益广告作品，作为一个创意灵感的引入，推荐给大家欣赏。公益广告自从广告这个行当诞生以来，就是一个经久不衰的话题，全球热衷于慈善公益事业的设计师和设计企业也很多，这充分体现了人类大爱的主旋律，不过在不同地区对于公益广告的处理上，也可以看到很大的差距。这种差距不仅仅是设计本身，视觉语言的问题，更多的是反映社会公民意识和道德形态的层次，公益广告往小了说是提高社会道德观念意识的宣传渠道，往大了说是构建和谐社会的重要手段。从下面的这些作品中我看到的不仅仅是设计的差距，还有我们自身对人性关注的迟钝。总结一下我们自己（中国大陆地区）的公益广告和欧美公益广告在宣传和手段上的区别： 1. 独特的“明星化”与“社会性”：中国的公益广告经常使用大量的明星，采用苦口婆心式的集体亮相告诉观众，“公益吧，我们是一家人，这不但体现了爱心，（也很时尚哟!）”，似乎只有明星才能带动群众的神经，树立正确的社会观念。我们的公益是一种仰视的姿态。欧美的公益广告也会邀请明星，但是明星在这里是“社会性”的元素，推广一种准确的，清晰的公益概念才是重点，一个活动或者宣传的本身强调的是民众参与。宣扬一种人人平等的概念，因为这样，我们才更应该帮助不幸的人。 2. 视觉执行的力度：由于我们的宣传政策和舆论导向，致使很多能够引起共鸣的视觉手段无法得到运用，而首先的受害者是遵循规则的大众媒体（看看我们的电视，电影，音乐……），而真的糟烂玩意则会无视规则继续糟烂。...

栏目:[观点] | 发表于：2009-08-12 | 评论：(0) | 查阅全文...

15个最佳jQuery幻灯插件和教程

在网站前端中使用jQuery库已经变得越来越流行，前端开发人员发布或撰写的相关的插件和教程也与日俱增。幻灯(通常也被称为“内容滑动”、内容切换效果、焦点图等)是在网站或博客的较小区域展示大量内容的很好的方法。动态的自动滑动内容在很多网站上都是很流行的。你是否也对在自己的网站上实现类似的效果感兴趣？那就看一下本文列出的jQuery插件吧！ 1. jFlow 官方网站 | 演示一个漂亮而整洁的图片幻灯，被nettut推荐，如果你想自己做一个图片幻灯效果，就去看看吧。 2. 使用jQuery UI实现推荐内容的幻灯展示官方网站这是一个教你如何“使用一种很有冲击力的方法展示你的网站/博客的最佳内容以吸引更多眼球”的很不错的教程。该文章介绍展示推荐内容的技术中的一个是自动播放内容幻灯。 3. 创建漂亮的jQuery幻灯教程官方网站 | 演示该教程介绍如何开发/创建漂亮的使用图片描述和名称的jQuery幻灯。 4. 基于jQuery的一个简单的内容幻灯效果官方网站 | 演示 Brenelz的网站开发技巧的一个简单的内容幻灯效果。 5. JC Play List 官方网站 | 演示免费而好用的使用Flash组件创建的一个jQuery幻灯插件，特别是对XML、RSS2.0、Picasa和Flickr等多媒体列表等非常方便。 6. Easy Slider 官方网站 | 演示一个JQuery插件，允许图片或任何内容在点击的时候水平/垂直滑动。 7.jqGalScroll 官方网站 jQuery Gallery Scroller (jqGalScroll)使用图片列表，并创建一个光滑的可以垂直、水平或对角滚动的图片相册。该插件同样能创建分页，从而你就可以轻松的浏览你的照片了。 8. Image Gallery 官方网站这个一点儿都不复杂——它是一个非常简单的图片画廊/查看器。你可以像这样调用图片: 9.使用jQuery UI 制...

栏目:[JavaScript] | 发表于：2009-08-12 | 评论：(0) | 查阅全文...