从滚动条消失看细节设计

我相信所有设计师都是注重细节的!即使有时迫于种种原因,无法达到像期望般完美,但心中一定有份纠结的坚持。

最近的项目中,给选择器设计备选列表,发现了一个“由细节引发的细节问题”。下图是示例。很简单,在一个固定区域内做多选,当有很多备选时,滚动显示更多内容。(原本意图

图A:原本的意图,和期望达到的效果

但实现出来之后,发现一个问题:滚动条被隐藏掉了。只有当在备选内容区滚动鼠标时,滚动条才会显示出来。这会影响到用户对这个功能区块的认知,根本察觉不到还有更多内容。(出乎预料

图B:滚动条不见了,这可不是我们期望的

更多

响应式Web设计:50实例与实践

Responsive Web Design: 50 Examples and Best Practices
Designmodo.com版权所有
作者:Adrian
译者:UCD翻译小组波希米亚
原文地址:http://designmodo.com/responsive-design-examples/

译者序:当我看到这篇文章的时候,还好发布的时间不算太早,主题很对我的胃口,因为我的Blog已经这么做了。但这篇总结的很全面,提到了一个新的名词“响应式Web设计”,作为Web内容应该去更加灵活的呈现在不同的终端上。这让我想起了之前写的一篇文章《未来我们只需要浏览器》,随着智能手机和各种Pad的发展,内容终端终究会发生改变,Web展现需要去适应这种趋势,并带来优秀的阅读体验。

响 应式Web设计是在开发和设计网站过程中产生的一种方式,它的目的是让内容布局能随用户使用显示器的不同而变化。再明确点说,这种设计概念,就是让原本1292像素宽,4栏的内容,能够很好地显示在1025像素宽的用户屏幕上,同时还能自动简化成2栏。当然,让它很好的适应智能手机和其他种类电脑的屏幕也就成了水到渠成的事了。这种特殊的设计形式就被成为“响应式Web设计”。

响应式Web设计与传统的设计方式截然不同,开发人员(特别是新手)必须要理解它的优势和弊端。这篇文章正是为大家揭示一些实例的。(这里介绍一个叫“Media Queries”的网站,里面介绍了更多实例和演示)

数据表格是响应式Web设计的经典使用情景,实现它的想法与传统的设计理念有很大不同。数据表格默认很宽,当你要查看它全貌时,你得缩小表格,但这时字会变 的很小,很难去阅读。然而当你想看清楚上面的字时,就不得不再把表格放大,这时要查看完整表格就得横滚加纵滚。这么阅读表格也太KB了。或许重新格式化表格或以饼图形式展现是种解决方案。再不然,你可以弄一个迷你图,即使在窄屏幕里它也能适应。

更多

Web设计师能从游戏中学到些什么

What Web Designers Can Learn From Video Games
Smashing Magazine版权所有
作者:Smashing Magazine
译者:UCD翻译小组波希米亚
原文地址: http://www.smashingmagazine.com/2011/07/27/what-web-designers-can-learn-from-video-games/

译者序:一直以来我都想写一篇关于游戏与交互设计之间关系的文章,因为我坚信好的设计和游戏一样有魔力,都能为用户带来乐趣。这可能跟我之前在游戏公司任职过有关,潜移默化地受到感染和熏陶。当看到这篇文章时,共鸣了,这就是我想要说的,于是我决定译过来,跟更多设计师产生共鸣,推动 “乐趣设计”,同时也为自己这方面的想法写下第一笔。

好的设计应该是融会贯通的,有相似的细节和处理方法,当然,还要有一个能够吸引人的理由或法宝,如果你有过这方面的零碎念头,而没有能汇总在一起,往下看,这就是了!

游戏越来越Web化,而Web也越来越游戏化。如果你想证明这一点,只需要去看看雅虎问答。有人问,有人答,最终获胜答案还能拿到奖励分(译者注:没玩过雅虎问答的想想百度知道)。这是一个排名系统,可以积聚和解锁系统中越来越多的功能。它的工作原理是因为心理的成就和游戏机制,从而鼓励互动。问题来 了,Web设计师们能从游戏中学到什么?或者更确切的说,是从视频游戏中?

一个好的游戏界面必须高度可用,并且直观,能够用尽可能少的动作完成很多重复的动作。它们需要具有吸引力,并且够可爱。一个好的游戏界面会给用户体验加分的。在游戏中,人们接受内容的同时不希望幻想被打破,所以再伟大的游戏产品都可能败于一个不给力的界面。

即使在像《波斯王子》这样的老游戏里,只有有限的系统功能,也要求设计师们必须做出一些创新。在功能越发丰富的今天,我们不难从现代视频游戏中发掘中更先进的设计技术。

网站的用户以同样的方式,希望其内容交付的方式,是很容易理解,直观,引人入胜,而且不需要过多滚动或点击。事实上,Web设计师可以从视频游戏界面中学到 很多。使用了通用游戏界面思想的网站,可以简化用户操作,同时为站点注入更多个性化。这样能带来更高的流量和回访率,甚至销售额(说白了,就是钱嘛!)

这并不奇怪,我们已经看到,像carousels,lightboxes,accordions和日益复杂的导航,已经通过CSS和JavaScript库大量涌入了浏览器中。无论是好事还是坏事,那都是另一篇文章要讨论的,本文将专注于技术,而不是那些错误的应用。

更多

设计的设计观展

午后,一个人背着包,乘车奔向前门,寻找原研哉……
没想到“前门23号”竟是如此“霸道”的一个地方,身处前门,院落宽敞。进到展厅,一席白色到底的装饰,配上大宅院的氛围,和原研哉的设计,得体。

原研哉 Kenya HARA
平面设计师、日本设计中心代表、武藏野美术大学教授、無印良品艺术总监

展出分为三个部分:展览的展览、無印良品的艺术指导工作和设计的诸相。我几乎阅读了墙上的每段文字,用心去体会他的设计理念,去感悟。

设计理念

讲述设计本身就是另外一个设计”,这是一种态度。
语言和设计,都是用来讲述、表达生活的方式,记录下来,讲出去,设计的理念便由此传承。其中给我印象最深的是“日本仅用30年的时间便完成了‘传统的当代转换’和‘设计产生生产力’的重要课题”,这就是为什么我们要懂得如何讲述设计。
1F里摆放的都是用来讲述设计的书籍,英文版、日文版还有中文版。

更多

10条可用性方面的启发

译序:这篇文章是可用性大师 Jakob Nielsen 在10年前总结的,到今天仍然受用。通过这个时间跨度,可以得出,可用性话题不是某个时代的产物,一些研究经验时至今日也依然值得借鉴。看似短小的10条启示中,融入了大量项目经验,这些内容也将继续指导设计者,在新的互联网技术推动下,创造出更加高质量的产品。

不要把它当作教程来看,它只是思想精髓的提炼。在各式各样的项目中,会遇到千奇百怪的情况,会跟各种角色的人一同协作完成目标。只有当大家达成共识,才能更好地提高效率,这10条启发正是纽带。

其实,这是10条关于界面设计的基本准则。之所以称之为“启发”,是因为它们来源于实际经验,而非枯燥的理论知识。

系统状态的可见性

应始终让用户了解当前发生的事情,并在恰当的时机给予反馈。

系统与现实世界的匹配

讲用户听得懂的语言,无论单词、短语还是阐述一些概念,把术语留给机器去读。遵循现实世界的准则,让信息表现的自然、符合逻辑。

用户控制和行动自由

用户在功能选择上犯错是常有的事儿,这就需要为其提供一个“紧急出口”,不必再通过额外的对话就能离开那里。提供撤销和重做功能。

更多