50个酷到受不了的RIA应用

我和Bill Scott在编写Designing Web Interfaces: Principles and Patterns for Rich Interactions（web界面设计：富客户端的原则和模式）这本书中的实例时,曾经对上百个RIA应用做过分析。我们有一张RIA的清单。也许很多设计师和开发者对这些内容很感兴趣，下面我们用了两个简单的标准来分析一下清单中位于前五十的RIA：

首先来看一下这两个简单的标准：

第一个标准：是否坚持了10个最基本的适用性原则？
第二个标准：是真的富客户端么? 这里需要强调一下，采用Ajax，Flex或者Silverlight做为开发技术，并不是一定就是富客户端应用。一个真正的RIA应该包含下面6个基本原则：
1.直接了当
就像Alan Cooper说的那样：“哪里有输出，那里就应该有输入。”这就是操作直接的原则。举例来说，将编辑内容的功能另外独立到一个页面中实现，不如直接在显示内容的页面中实现。下面介绍的50个RIA应用使用了不同的交互模式，显示版面和控制来实现“直接了当”的原则。
2.保持轻量级应用
这个原则是说保持一个比较轻量级的访问过程。当用户和应用程序之间进行交互时，应该尽量让用户减少动手或动脑的环节。为了实现这个原则最主要的方法就是使用用来处理页面访问时前后承接的工具。下面介绍的这些RIA应用在这方面也有很好的表现。
3.保持固定页面
页面刷新通常会中断用户的意识流。在传统的web应用中，每一个action的切换就是通过从一个页面跳到另一个页面来实现的。而现在，我们不再被这些技术限制所束缚，我们可以决定什么时候让用户在一个固定页面上工作并且用户的意识不被隔断。这50个RIA应用，“保持固定页面”，相比较那些学校的老古董HTML页面，提供了极佳的用户体验。
4.给出提示
“可被发现”是一个对RIA客户端交互的基本挑战。页面中的某个点如果没有被用户发现的话，那么它就是毫无用处的。增加“可被发现”能力的关键途径就是给出提示。给出提示会暗示用户进入下一步的交互。这里面有的应用看起来很复杂，但是因为他们“给出提示”来表现新内容，使得应用交互变得更加容易。
5.使用过渡效果
应用动画和其他多种视觉效果设计的过渡可以增强程序与用户之间的交互感。下面的这些网站通过多种不同的方式“使用过渡效果”来增强用户体验。
6.响应迅速
可以做出迅速响应的用户接口是很很智能的表现。这50个应用是“响应迅速”的产品，因而你会感觉到他们非常的智能。
50个RIA（字母表排序）

280 Slides

280 Slides280幻灯片可以制作非常漂亮的演示效果，你可以在任何地方访问这些幻灯片，也可以与世界共享你的幻灯片。
界面与Apple的keynote软件非常相似，但菜单栏简单化了，以适应web应用的需求。如果你正准备设计一个类似桌面应用的RIA，那么应该从这个网站中得到一些好的点子

Action Method

Action Method 在线是一个简化项目或者生活管理的应用。
不同于使用一个已经存在的项目计划工具（譬如微软的Project）将其置于web上，这些同志重新设计了这样一个工具来描绘实际项目的工作流。显著的设计元素：组织良好的导航和内容，直接的交互，实时搜索以及在表单中的响应提醒。

Animoto

Animoto 可以将你的图片制作成音乐录像。
是对前面提到过的两个原则：“给出提示”和“保持固定页面”的一个极佳的例子，animoto使用了一个单独的交互页面处理模式

Aviary Tool Suite

Aviary is a suite of powerful creative applications that you can use right in your web browser.

Phoenix, the image editor, is very similar to Photohop, but the tool palette, history and canvas views have been redesigned to be more intuitive. For example, help tips are included for each tool in the palette. Noteworthy: All of the apps in this suite are consistent in terms of visual design and interaction design, making it easier use any of them, once you have learned one.

Balsamiq Mockups

Balsamiq Mockups is software for creating hand drawn style mockups.

This product wouldn't be much to talk about if it was just an online version of Visio, but fortunately it is way more. The creator re-evaluated the mockup process and designed a smarter interface. Best design features: Reasonable defaults and options for each control and keyboard shortcuts.

BBC Homepage

Breaking news, sport, TV, radio and a whole lot more. The BBC informs, educates and entertains - wherever you are, whatever your age.

This is one of the few well designed news sites out there- the BBC uses a number of interaction patterns to "stay in the page" and "make it direct" to provide customization. Don't miss: The drag and drop modules and the dialog inlays for customizing each portlet.

Ben & Jerry's Flavors

Official site for Ben &Jerry's super premium ice cream, light ice cream, sorbet, frozen yogurt and novelties.

A retail site redesigned to capitalize on RIA technologies, Ben & Jerry's makes good use of the interaction principles to create a rich (if somewhat bright) interface. Check out: The dialog overlays for finding, rating and learning more about a flavor.

Buzzword

Adobe Buzzword is an online word processor, perfect for writing reports, proposals and anything else you need to access from anywhere.

Noteworthy design elements: Contextual tools for common tasks (across the top) and history and permissions (across the bottom). Good use of animations to reveal these tools.

Crazy Egg

Crazy Egg will help you improve the design of your site by showing you where people are clicking and where they are not.

This product epitomizes all six design principles. Don't miss: affordance invitations, all four views with integrated analytics instead of text based reports, and specifically the 'Confetti' view which uses animation in an interesting (and useful) way.

Delve Networks

Delve Networks provides a next generation online video platform for publishing video content.

Delve designers realized content creators weren't interested in navigating through a bunch of screens to accomplish tasks. They have applied the one-screen-per goal philosophy which results in a lot less screens, each with deep interactions. To keep these rich screens from being completely overwhelming they have employed the following patterns: inline editing, dialog overlays, refining search, and progressive disclosure.

Digital Tutor

Artists, professionals, educators, and students from around the world depend onDigital-Tutors every day to provide high-quality, educational training solutions and services to advance their education, career, and future in the computer graphics industry.

It is easy to search or browse for content, but the real design goodies are the tools available once you're taking a course. Digital Tutor "makes it direct" by offering tag, clip and note tools right in the playback bar. They also rely on common metaphors like "playlists" and "history" for organization instead of creating cute-sie terms no one would recognize.

Discover Spend Analyzer

The Spend Analyzer gives you a fast, easy way to see how you're really spending on your Discover Card - so you can make smarter spending choices.

You can play with the demo for if you don't have a Discover card. This is a great example of the live preview pattern- found in the "React Immediately" section of our book. This design provides the ultimate flexibility for users who want to create and compare "what-if" scenarios. This is also a nice screen layout, with the interactive charts positioned above the data grid of transactions.

Evernote

Remember Everything - Capture what you like. Find it when you want.

Evernote Web should be used in conjunction with a Firefox plugin, and or the desktop and mobile installs. Noteworthy design elements: well organized information architecture, relies on standard screen patterns for an intuitive interface, "stays in the page" with virtual scrolling.

EyeBlaster ACM

Eyeblasterprovides cross channel campaign management, ad serving, and rich media for advertisers and agencies.

You might notice a trend at this point. Many of these top designs not only have good usability and rich interactions, but provide a fresh take on an old problem. Eyeblaster ACM uses a gantt chart to deliver campaign metrics- a novel, yet powerful way to design a dashboard for this industry.

Fidelity MyPlan

Fidelity MyPlan will show you how much you'll need to save for retirement after you answer a few key questions.

This is another great example of the live preview pattern, found in the "React Immediately" section of our book.

Geni

Geni lets you create your family tree and invite relatives to help.

Some of the nice design elements of Geni include easy sign up, drag and drop objects, in-context tools, inline editing, and call to action invitations.

Google Maps

Find local businesses, view maps and get driving directions in Google Maps.

Google Maps as well as other Google products like Gmail, Calendar, and Google Reader use tour invitations to encourage users to explore new features.

Google Maps is a great example of the Information application pattern. Learn more about thethree application structures for RIAs.

Hard Rock Cafe Memorabilia

Now it's the largest and, yes, most valuable music memorabilia collection on the web.

Although we wouldn't recommend a zoomable user interface for just any retail site, this one is well designed. A clearly written call to action invitation sets the stage, and navigating between objects is painless since the details for a selected item are displayed in a detail inlay (slides in on the right).

Icon Finder

Icon Finder provides high quality icons for webdesigners and developers in an easy and efficient way.

This site is so much easier to use than other stock image libraries because of its well designed search and refine interface. This is a great example for the pattern we call refining search, discussed in the "React Immediately" section of the book.

InContext

The Adobe® InContext Editing online service makes web content maintenance easy for designers and content editors alike.

There is a live demo to play with. Selecting "Edit Page" shows all the editable content and the toggle reveal tools- making inline editing fast and low-risk (compared to editing code).

iWork.com

A new public beta, web-based service from Apple that lets you share your iWork '

09 documents, spreadsheets, and presentations in a way that's both simple and smart.

iWork and Buzzword are very similar in functionality, but quite different in design. One of the better design elements in iWork is the sidebar with live scroll, and the secondary menu on the invited viewers names. Unfortunately, iWork has not implemented the rich functionality of direct editing yet, you can only click to add and reply to comments.

Kayak

Find Cheap Flights and Airline Tickets on Kayak.com.

Kayak was one of the first RIAs Bill and I got excited about in late '04. We were captivated by lively and timely interface. If you need to design a refining search, where modifying search filters refines search in real-time, look closely at Kayak's design.

Mini USA

Mini USA- Design and build your own Mini Cooper.

The navigation offers complete control and freedom, clean and simple aesthetic design. The Mini Configurator uses the interactive single page process to "stay in the page". This is also a great example of the Process application structure. Learn more about thethree application structures for RIAs.

Mint

Mint is personal finance software toassist you to manage your money, financial planning, and budget planning tools.

Noteworthy design elements include: live search in the transactions screen, easy tagging, spliting payments, adding accounts, managing alerts, and an interactive calculator. The most recent additions, budgeting and charting, are pretty powerful (but I don't understand why every new feature has to have a different look and feel).

MockLinkr

MockLinkr a simple tool that lets designers publish their mockups and wireframes online, instead of emailing clients a bunch of pictures.

This is a great example of not over thinking your app. There are probably hundreds of apps between the Flex showcase and Silverlight showcase that would be 100% more usable if they had applied the first two principles "make it direct" and "keep it lightweight". A few of the interaction patterns used in MockLinkr: inline editing, multi-level tools, drag and drop list.

Mockingbird

Mockingbird- the game making game.

This interface relies heavily on call to action invitations and live preview to let game designers customize their game design.

NetVibes

Personal news aggregator with RSS and Atom support. Comes with a set of predefined news feeds.

NetVibes uses a tour invitation to invite users to explore new features, and offers customization through drag and drop modules and module configuration on the landing page.

Newspond

Newspond is an algorithm-based news aggregator.

The first thing you'll notice about Newspond is the sleek visual design. Upon closer inspection, it uses a number of common interaction patterns, like dialog inlay to reveal sources. We can't wait to see what they'll do in their upcoming release.

Pandora

Pandora radio is the personalized internet radio service that helps you find new music based on your old and current favorites.

This was was another early RIA application we drooled over. Laszlo Systems showcased Pandora, among a number of other products like Behr Paint's Color Smart tool and some really well designed reference applications. Pandora uses multi-level tools to "keep it lightweight" while capturing important information.

PBS Kids Go!

A safe place for kids to explore and play hundreds of fun educational games with their favorite PBS KIDS characters.

PBS Kids Go! uses lots of the patterns recommended in the book including: progressive disclosure, slide in/slide out transitions, detail inlay and call to action invitations.

Picnik

Picnik makes your photos incredible with easy yet powerful editing tools.

The ribbon toolbar has been very popular in the the design world, but Picnik has something better. They offer multi-level tools ( that progressively reveal actions based on user interaction) which keep the interface clean and simple. Other noteworthy design elements: Beautiful visual design, help tips and call to action invitations are strategically placed to expose new features, dialog inlays to reveal more editing options.

Product Planner by Kissmetrics

Identifying and optimizing user flows is an essential part of creating a successful web product.

Product Planner uses the call to action invitation pattern to introduce the features in the site, and drag and drop objects to reorganize steps when creating a flow. It would be nicer if you could reorganize the steps directly in the palette, but if there are constraints preventing that- this is a usable alternative.

Protoshare

Protoshare is a online tool to collaborate on & build clickable website prototypes.

Noteworthy design elements: Well designed information architecture, use of standard screen patterns and controls for structuring and rearranging a site map and building out each screen and toggling between the Design, Preview and Documentation views.

Quicken Online

Quicken® Online is 100% FREE personal finance software. Manage your personal finances online. Easy personal banking at your fingertips.

Another financial planning product that stepped away from long spreadsheets of numbers to focus on the right metaphor- the "bottom line". Quicken uses a variation on tabs- the view toggle- to "stay on the page" while looking at your money from thee different perspectives: spending, income or savings. Don't miss: "Your Spending Money Outlook", one of the best waterfall visualizations we have seen on the web.

Quince

Quince is a rich UX patterns, sometimes called UI patterns, explorer.

The site went a bit overboard with the animations, using all of the following transition patterns: slide in/slide out, faceplate, carousel, brighten/dim, expand/collapse, but they have a solid information architecture and followed usability guidelines.

Keep in mind- the level of animation appropriate for a retail or media site is too much for a productivity application- tone it down (rule of thumb: cut out half- then cut out half again).

RetailMeNot

Find and share coupon codes and promo codes for great discounts at thousands of online stores.

RetailMeNot has a crisp interafce enhanced with a a number of interactive elements specifically: hover reveal tools, detail inlay, and always revealed tools. They also have a nice little sparkline that provides concise and timely information about each coupons success rate.

Sifter

Sifter is a hosted bug and issue tracking application focused on making work less tedious.

Most of the RIAs using the refining search pattern are search-focused. And they tend to put the filter criteria on the left or top- driving the result set from left to right, or top to bottom. This product is bug-focused, so the bug list gets prime real estate and the filters are on the right. Other patterns in play: live preview, expand/collapse, inline editing.

SlideRocket

Sliderocket is online presentation software.

Design elements to look for: Simple navigation even though there are many features, contextual tools keep the screen from being too crowded, good blank state screens and help tips, nice tour invitation.

Small Worlds

SmallWorlds is a new generation of virtual world that runs inside your web browser.

We didn't review a lot of game applications, but this particular Flex applications stood out as having exceptional usability, and represented all of the design principles. Patterns in play: inline edit, always reveal tools, dialog overlay, virtual panning, call to action invitation, animations during transitions, and live preview.

Spatial Key

Spatial Key is a next generation Information Visualization, Mapping, Analysis and Reporting System.

Patterns in play: Virtual panning, zoomable user interface, input overlays, refining search.

SpiderOak

SpiderOak is the technology leader in free online backup, Online File and Folder Sync, Share, Access, and Storage.

Noteworthy: One of the few well designed hybrid selections (combination of toggle selection and object selection) we've seen.

Sprout Builder

Sprout Builder is a WYSIWYG widget maker.

Noteworthy: Incredibly simple interface, well organized palettes and properties console, clear visual language, dialog inlays eliminate page-to-page navigation all together. Sprout Builder is a perfect example of the Creation application structure. Learn more about thethree application structures for RIAs.

SugarSync Remote File Access

Synchronize sync music, photo files across PC, Mac and mobile phone

SugarSync was one of the10 Best Applications of 2008 according to Jacokb Nielsen. Aside from a crisp visuals, SugarSync has a solid information architecture and leverages a number of common interactions patterns like: toggle select, progressive disclosure, and dialog overlays.

Sumo Paint

Sumo Paint is an online image editor and drawing application.

Here's another app that is similar to Photoshop, but they have approached the design differently than Aviary. The selected tool's properties have been flattened out and are all displayed under the File, Edit View menu. Make sure you look at: The expand/collapse panels on the right, and the MDI, multiple document interface, for keeping multiple documents open at a time.

Travelocity Experience Finder

Planning a vacation? Don't just research a destination, experience it.

The Travelocity Experience Finder is a perfect example of how a well designed RIA will have less screens than a traditional hierarchical HTML site. Although the number of screens have decreased (and with it the number of places to display ads), the amount of time consumers spend on each screen has dramatically increased. We encountered similar metrics at Move.com and Realtor.com when we shifted towards a richer experience.

One thing to remember if you are creating an ad based consumer facing RIA- leverage all the information you are capturing to provide the most contextually relevant ads possible.

Tumblr

Tumblr is a blogging platform that allows users to post text, images, video, links, quotes, and audio to their tumblelog, a short-form blog.

Tumblr has the best dialog overlays we've seen. Other noteworthy design elements: Short and simple registration, tour invitation, more content invitation (the page peel in the top right corner of posts), progressive disclosure.

Volkswagen (UK)- Used Car Locator

The easy way to find a Volkswagen Approved Used Car.

Bill and I posted joint articles last year about the Refining Search Pattern. I even took a stab at redesigning Carmax to create a rich search experience. Looks like the Volkswagen guys used the same design patterns.

Whitestone Cheese

Whitestone Cheese is a retail cheese site in New Zealand.

This is one of the better RIA retail site designs we've encountered. The navigation facilitates searching or browsing, employs drill downs to stay in the page, the transitions assist in navigation, and the shopping cart and checkout nicely integrated in the flow. If you are redesigning a retail site, take a close look at this design.

WorldWide Telescope

WorldWide Telescope enables your computer to function as a virtual telescope, bringing together imagery from the best ground and space-based telescopes in the world.

Noteworthy design elements: Use of transitions, as discussed in chapter 12 of the book, including the carousel and zoom.

Wufoo

Wufoo is an online HTML form builder that helps anyone create beautiful forms, surveys and invitations without writing a single line of code.

The information architecture of this RIA is rock solid- everything falls into place from there. You have to sign up for the demo and play with this to really experience how nice it is. Notice the attention to detail at every level: blank state screens, great copy, color coded navigation, rich controls.

50个应用程序的介绍实在是没时间一个一个翻完了。

通过这些应用你就会发现，什么是真正的RIA，这50个网站真正展示了未来网络应用程序的发展方向。

酷到受不了的东西，谁能挡的住。除非你超级没品味。

本文转自 fsjoy1983 51CTO博客，原文链接：http://blog.51cto.com/fsjoy/211253，如需转载请自行联系原作者