🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

15 个用户体验设计剖析

很不错,强烈推荐一下。

 

ugmbbc发布于 2010-05-11 13:29:01


感谢锐商企业CMS 的 投递
新闻来源:designshack.co.uk
用户界面和用户体验(UI/UX)是任何产品成败的关键,尤其 Web,Web 是一种公开的,可以被任何人随时随地访问的特殊产品,用户的体验几乎意味着一切,虽然内容更重要,但内容可以替代,体验却是独一无二的,本文分析了15个 不同的 UI/UX 案例,优秀的用户体验给我们带来的启发是无价的。

内容滚动中的运动视差效果
screenshot

Parallax scrolling 是让多层背景以不同的速度移动,形成运动视差 3D 效果,虽然纯属视觉效果,但在内容滚动时形成的视觉体验仍然非常出色。Charlie Gentle’s portfolio

网站就是该效果的绝佳展示,点击左右导航按钮,除了滚动进入不同内容区域之外,上方的多层背景图以不同速度移动而形成的 3D 运动视差效果非常漂亮。

iPhone 的下滑式刷新

screenshot


iPhone
的多数社会化网络应用都包含数据刷新功能,有的是晃一晃机器,有的是按某个按钮,在我看来,最好的方法是下滑式刷新。包括 Gowalla,
Foursquare 以及 Tweetie
等应用都默认使用该方法,你在用手指翻动列表的时候,如果想刷新一下数据,你的手指还没离开那个区域,如果使用按钮,手指必须离开当前的位置,导致操作上
的不连贯,而下滑式刷新,手指继续留在原来操作的位置,只是改变一下动作。

我们从这里可以学习到的东西是,经常检查你的
UI,看看是不是存在让用户注意力转移的操作。

随时随地的提示界面

 



screenshot




一些深受欢迎的 Mac
程序经常是在后台默默运行,到了需要用户介入的时候弹出界面,完成后又默默消失,象 The Hit List,

随时随地会将需要通知的消息显示出来,看上去,象操作系统本身的功能。

Convertbot
的圆盘式菜单

screenshot


Convertbot

是为数不多的事实上并不好用但用起来又妙趣横生的 UI 设计之一。这个 iPhone 程序用来进行单位转换,iPhone
的应用商店这样的程序数不胜数,但都没有这个这么有趣。它设计了一个圆盘式操作界面,很形象,很漂亮,让人有时不时想拿出来用一下的冲动,这个案例告诉我
们,有时候,中看也很重要。 SlideDeck 的手风琴式导航

screenshot



Web 上,基于 jQuery 的内容滚动面板非常多,SlideDeck

是其中的佼佼者。使用独特的手风琴式界面显示内容,可以看做是 Outlook 风格导航面板的水平版,但视觉效果和体验更出众。 Strongbad
的随机回信

screenshot



Strongbad
Homestarrunner

推出的经久不衰的网络动画中的卡通形象,每周,Strongbad
会给观众回复很搞笑的邮件,这些邮件慢慢越积越多,最近,站点开发方推出一个随机邮件浏览功能,点一下那个随机按钮,就像抽奖机那样随机选中一封过去的邮
件显示。这个随机显示的过十分生动,让人忍不住一点再点。这个 UI 案例告诉我们,有时候,你在用户界面上的一点微小改动,有可能带来意想不到的效果。
Made By Tinder 的主题色选择

screenshot


这是一个很神秘的小站点,神秘到我们不知道它到底是做什么的。但这个网站的顶部,有几个小色块,点击后,整个站点就按色块上的色调重新配色,虽然很简单,
但用户体验实在太妙了。 Pixelmator

screenshot



Pixelmator
是一个很出色的图像编辑工具,虽然远不如
Photoshop
强大,但包含很多创新功能。它的用户界面中有一个很有趣的功能,你在为图像的某个位置设置效果的时候,设置点和设置界面之间会显示一条很自然的连线,移动
设置点的时候,连线也跟着改变,虽然这条连线并没有多少实际意义,但给用户带来一种操作上的暗示,也很有趣味。 Riot Industries
的导航体验

screenshot


这个站点的导航很有特色,不仅流畅,而且设计出众,鼠标在导航条目上盘旋的时候,导航条目从左边的容器中微微探出,点击后,以渐变的方式,逐渐显示当前内
容,这一切并没有使用任何 Flash 技术。 Web 上的拖放操作

screenshot



在我看来,任何应用都应该支持拖放操作,当然 Web
有它的局限性,不过,近年来,Web 上的拖放操作已经很常见了。在上面的站点,你可以直接将喜欢的程序拖放到下载按钮处,直接下载。IconDock
的购物车也支持列斯的操作。(Wufoo 和 Polldaddy
的拖放式表单设计 UI 在我看来是 Web 拖放界面的最佳实现 - 译者) 在线 Photoshop 的照片堆叠界面

screenshot



这是另一个没有实际意义,但很吸引人的界面设计,Adobe 的在线
Photoshop 在加载的时候,会显示一堆照片,你可以把他们抓起来乱扔,让它们相互碰撞,其物理效果十分出色,非常吸引人。 随鼠而动

screenshot



同样展示运动视差效果,同时,随着鼠标的移动,画面的工作区也随着移动。这个站点
也实现了类似的效果。(感觉这种体验并不好 - 译者) 双滚动面板

screenshot



这又是一个基于
jQuery 的,非常出色的内容滚动面板设计

。图片垂直滚动,而解释文字同步水平滚动,视觉效果和体验都十分出众。 基于物理动力的滚动

 



screenshot




我第一次使用 iPhone 的时候,对它的基于物理动力的交互 UI
印象深刻,在 Safari
上用手指翻动页面的时候,页面并不是按线性速度滚动,而是象现实物理世界中的物体那样,拥有曲线速度,先是快速滚动,然后慢慢慢下来。

至简的界面

screenshot




漂亮而复杂的 UI 让人喜欢,有时候,简洁的界面更吸引人。Mac 的
WriteRoom
是一个非常强大的文本编辑器,这些强大的功能隐藏在至简的界面下。



本文国际来源:Design Shack 15
in-Depth Examples of Addictive User Experience

(原文作者:Joshua Johnson
)



中文编译来源:锐商企业CMS

网站内容管理系统
官方网站


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

推荐阅读
留下你的脚步