
 
 
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Product &#38; UX - blueben&#039;s blog &#187; 翻译</title>
	<atom:link href="http://www.blueben.cn/index.php/archives/tag/ue-english/feed" rel="self" type="application/rss+xml" />
	<link>http://www.blueben.cn</link>
	<description>关注互联网产品、交互、体验设计、电子商务应用、社会化网络媒体营销</description>
	<lastBuildDate>Fri, 18 Jun 2010 00:57:44 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>设计iPad应用的几个要点[译]</title>
		<link>http://www.blueben.cn/index.php/archives/939</link>
		<comments>http://www.blueben.cn/index.php/archives/939#comments</comments>
		<pubDate>Wed, 21 Apr 2010 16:29:28 +0000</pubDate>
		<dc:creator>blueben</dc:creator>
				<category><![CDATA[Interact & Mockup]]></category>
		<category><![CDATA[Related]]></category>
		<category><![CDATA[交互设计]]></category>
		<category><![CDATA[移动网络]]></category>
		<category><![CDATA[翻译]]></category>

		<guid isPermaLink="false">http://www.blueben.cn/?p=939</guid>
		<description><![CDATA[
ben：这篇文章说的是iPad，一方面可以了解到苹果最新硬件的一些特色功能。另一方面，里面说到的设计要点，不仅是在这个设备上有用，把这些要点放到其他移动设备甚至WEB交互设计上，依然是值得借鉴的。推荐给入门级设计师和产品经理阅读。
==================寂寞的分割线====================
原文地址：http://www.smashingmagazine.com/2010/04/16/design-tips-for-your-ipad-app/
只要有一些JavaScript编程技术加上像Appcelerator’s Titanium这样的工具，自己弄一个iPhone 或者iPad的应用是很简单的。问题在于不要总是一再的犯App Store中产品的设计错误。这篇文章里我们就来聊一聊设计成功的iPad应用要注意哪几点。
Design For People   设计以人为本
应用会让iPad更精彩，毫无疑问。但是在开始设想你的应用的时候，最先考虑的是什么？创意？还是设备？真确的答案是：都不是。应该先考虑的是“人”。当你为应用做头脑风暴或者研究的时候，回过头去仔细想一想生活中的人们会在怎样的环境中如何使用这个设备。如何让iPad成为我们生活的一部分？什么时候我们需要它是笔记本电脑，什么时候我们需要它是iPod Touch？
Who Are Your People?  你的用户是谁？
理想情况下，你就是自己产品的用户中的一员，但是把这个作为一个理由来决断“我知道这些人要什么”，将会把你引到错误的的道路上，你的产品将永远无法超越自己的想象力。当你仔细考虑各种各样会使用你产品的人的时候，惊喜也许正在等着你。你的目标用户也许和你想的并不一样；或者，在定义目标用户的时候，你会发现你的产品还缺少某种重要的功能。
例如我们的一个画画的应用，最初我们的目标用户是那些喜欢尝试的技术人员，但是在一些分析之后我们发现，如果把界面设计的更加简单，那么那些技术人员的孩子们也会迷上这个应用。
注意：定义你的目标用户。他们是谁？他们生活在什么样的地方，在哪里工作，在哪里玩？他们面临什么样的问题？给他们中的一个起个名字，设定他的工作、他的家庭、他的车，然后看看你的思路是不是会有什么改变。
What Is Your People’s Story?  你的用户有着什么样的故事？
定义好你的用户，还只完成了一半。现在你得把他放在故事情节里面。他们平时的日常生活是怎样的？他们的日常生活中会因为什么对你的产品感兴趣？去想想他们在想什么，我敢保证这会让你看到一些你期待的或者从没考虑到的东西。
你并不需要什么思考的软件来做这件事。下面是一个对于我们应用的使用案例草图。当写出一些使用案例后，我们发现人们在进行原创绘画的时候常常容易对画画失去兴趣，因为他们会说“我不会画”，但其实他们还是想自己创造一些好看的东西。起初我们计划把APP和图案一起发布，就像经典的Lite-Brite玩具一样。但是我们没意识到如果我们提供预制的图形和模板而让人们来填颜色的话，人们就会更喜欢玩这个App。多么重要的反馈啊！

在实现一个应用的创意的时候，我们的使用案例研究告诉我们这类应用的重玩的概率是很低的，除非你提供模板告诉用户怎么开始。
注意：从生活中的使用方式来考虑你的设备，比从功能和技术角度来考虑要好上很多。iPad那独特的性能、操作环境和社会化因素能让你的想法与用户产生共鸣吗？

它很轻便=“我更希望把它随处带着而不是当做一个笔记本电脑”
它比笔记本电脑要小一些=“我可以在候车室打开笔记本电脑来做东西吗？显然不行。但是换成iPad呢？可以。”
它有许多强大的实用程序和对多媒体的支持能力=“我可以用它来工作、看书、看电影或者玩游戏”
它的屏幕比 iPhone大=“我可以不用考虑眼睛的压力就享受更多的视频媒体。我的孩子在旅途上也有的玩了。”
它有Wi-Fi和3G网络连接=“我乘坐飞机、火车或乘车的时候都可以上网了。”

以人为本的设计可以让我们抛开那些有欠缺的创意，并且让开发的产品不仅是达到用户的要求，而是在先于目标用户意识到之前就满足他们的需要。
Minimalism Works Best on iPad 越精简越好
有了像iPad这样强大的能感知位置的移动设备，就会想把什么都放进去。如果你是一个iPhone的开发者，你一定对扩大了的屏幕面积很惊喜。但是不要总是想着把它们填满了！让它保持简单吧，只显示此时此刻与用户有关的内容和操作项。这需要你在设计时使用下面提到的2个东西。
Contextual Menus 弹出菜单
弹出菜单保持简洁的设计非常的棒。我们想把分享和交流的功能放在主导航之外，于是就用了一个弹出菜单（“Share this thang!”）来在适当的时候显示那些控件。

一个关于分享的弹出对话框，当你轻击并且按住图片的时候就会弹出来。
Modal Views (but Wisely) 模态视图
有了iPad的大屏幕，人们可以设计那些在iPhone 或者 iPod的触摸屏上不可能做到的强大功能。模态视图提供了另一种组织应用的方式，它给了用户几种操作的模态，显得很清晰。而且，如果使用的好的话，它可以很幽雅的帮助UI设计处理掉那些乱糟糟的东西。
例如，iPad上的“照片”功能，可以像桌面MAC机上的iPhoto一样的操作。你有2种操作模式：

查看和编辑某个单独的照片
管理照片组

在每个显示照片的分页里把图象、编辑和管理功能挤在一个界面里是不太合适的。考虑一下如何把应用中的功能分成几个类别，同时，保证两个模态之间能平滑的切换。

iPhoto有2个操作模式：查看、编辑单张图片模式 和 管理模式。
注意：你的应用如何能精简到最核心、最实用的东西给人们呢？
iPad’s Two Orientation Are A Big Deal     iPad的纵横两个方向的显示是一个大问题
可以在横着和竖着两种显示模式中互换，并不仅仅是 iPad的特色，但确实是需要处理的一个大问题。这就是纸上原型设计比PS里要快很多的原因。
有时候要考虑这2个显示方式时应用里所有的元素，就像是在为2个不同的设备在做界面。关键是要要保持体验的一致性和连贯性，当切换的时候提供一个无缝的体验。
下面是我们在应用中尝试用过的调色盘。在竖着放的视图里看起来很不错，但是横过来的时候&#8230;它就太肥了。


调色盘在横着的视图里还不错，但是在竖着的视图里它把屏幕都占满了。
我们改进了条色盘让它在横着竖着的视图里都能表现出色。


简化过了的调色盘能保持在横竖两种视图中表现良好。
注意：尽量把你所有屏幕原型的横向、纵向视图都在纸上画出来。
Use Touch And Real-World Metaphors 多使用触摸的方法，并且多联系真实世界里的带有隐喻的操作
触摸改变了我们与屏幕上的元素交互时编辑和感知的方式。有了iPad的大屏幕，触摸和手势就更如鱼得水了。快速了解一下iPad的UI元件的特色：

一次选择并操作多个元素，可以通过拖动它们到屏幕的某个区域来实现
在同一个列表视图中同时查看列表和详细信息（例如邮件）
随时随地的编辑元素而不是通过菜单栏的选项。


用你的手指在一堆照片上抹动来把它们分散开来看，就像你线下做的一样。
注意：想想你线下是如何进行交互操作的。把屏幕上的元素当做实际的物体看待。
Design For Dynamic Content 为动态内容而设计
iPad的轻便和大屏幕给了人们无限的可能去不停的快速创作各种各样的动态内容。因为用户对连接到基于WEB的工具的需求，混合型的应用（例如以WEB应用为原型的应用或者实时载入WEB数据的应用）将会变的很常见。为动态内容而设计意味着处理网络连接的机会与挑战（例如下载速度慢或者断线）。你得想好用户身在东Bum，没有网络连接的时候，你将给他显示啥米内容。
注意：为你设计中可能面对的各种情况做好解决方案。
Get Started! 现在就开始做吧！
想要开始开发iPad应用，要先下载一个iPad SDK。当开发者们准备着手进行iPad开发的时候，像Appcelerator的Titanium可以用来在JavaScript环境下创建 iPad，iPhone 的 Android的应用。
Further Reading [...]]]></description>
		<wfw:commentRss>http://www.blueben.cn/index.php/archives/939/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>整体浏览体验的趋势[译]</title>
		<link>http://www.blueben.cn/index.php/archives/933</link>
		<comments>http://www.blueben.cn/index.php/archives/933#comments</comments>
		<pubDate>Sat, 17 Apr 2010 16:07:09 +0000</pubDate>
		<dc:creator>blueben</dc:creator>
				<category><![CDATA[Product & Prototype]]></category>
		<category><![CDATA[Related]]></category>
		<category><![CDATA[互联网]]></category>
		<category><![CDATA[移动网络]]></category>
		<category><![CDATA[网络产品设计]]></category>
		<category><![CDATA[翻译]]></category>

		<guid isPermaLink="false">http://www.blueben.cn/?p=933</guid>
		<description><![CDATA[
感觉原文写的一般般吧，后面有点泛泛的，翻来随便看看吧~~
====================华丽的分割线=========================
原文地址：http://www.smashingmagazine.com/2010/04/10/holistic-web-browsing-4-trends-of-the-future/
未来的网络并不在你的桌面上，也不一定是在你的口袋里，未来的网络将无处不在。随着每次技术创新，我们越来越依赖网络，并且开始把身边的一切和那个虚拟世界里的信息联系起来。但是与其对这个美好的未来抱有不切实际的幻想，我们不如冷静的先看看那些大量的产品计划和设计工作对设计师和开发者都有哪些要求。

技术的创新和它应用到日常生活之间的时间间隔正在缩小，我们都快赶不上了——看看去年你注册了多少种不同的网络应用你就知道了。这就导致了网络的使用体验变的很零碎。当你用几个不同的浏览器，安装有各种各样的插件，也许你还有各种独立的应用程序来管理你的FEEDS、社会化媒体的帐户和音乐播放列表。
虽然我们已经熟悉了在TAB和窗口间切来切去了，我们也应该努力去实现一种整体的浏览体验，用一种简单的方式无缝整合所有我们需要的功能。意识到了这一点，我们再来看4个趋势，设计师们应该了解它们并且把它们融合到工作中去，以便为整体的网络浏览体验做好铺垫。
1、浏览器会像操作系统一样，
2、简化了功能的移动应用，
3、联网了的各种设备，
4、个性化
1. The Browser As Operating System 浏览器会像操作系统一样
感谢网络上大量的应用，创造性的工具还有各种可供选择的娱乐项目，我们在浏览器里花的时间比以前更多了。我们在浏览器里花的时间越多，我们使用那些更大型的操作系统里的工具的时间就越少，而事实上浏览器也是运行在这样的系统里的。结果，我们开始期待网络浏览的体验与操作系统的体验一样高度的可靠与成熟。
我们大多都满足于于Google的 Gmail、GTalk、日历和文档或者在线图片编辑工具例如Picnik 和Adobe在线版Photoshop这些不同程度上被整合在一起的创新。而那种期待将继续被将来的新品所满足——例如Chrome操作系统——我们已经把浏览器当作了操作系统。在网络上完成所有的事情，曾经是一个梦想，现在已经成为现实。
Ubiquity
在我们大量使用各种applications的同时，浏览器的缺陷也越来越明显，那就是在浏览器tabs之间缺乏有效的关联。很多用户喜欢打开许多浏览器tabs，然后快速的在Gmail, Google Calendar, Google Docs 和各种社会化媒体之间来回切换。但是正是这种来回切换，表明了在本该整合的应用之间那断裂了的联系。
Mozilla试图通过Ubiquity把我们在浏览器里使用的应用直观的展示出来。虽然确实是向正确的方向迈了一步，但是命令行的方式对离不开鼠标的人来说却是一个障碍。在下面的截图中你可以看到Ubiquity如何让你不用在其他tab中打开Google Maps就能在网页里的地图上快速定位。这是一个整合功能的例子，你不再需要在不同的tab中复制粘贴文字了。Ubiquity的核心在于通过理解基本的命令并且用合适和WEB应用去执行这些命令而创造了一个整体的浏览体验，这正是浏览器的发展方向。
这个方式，结合语音识别，也许10年后我们不用双手也能上网了，甚至都要不了10年。

Tracemonkey 和 Ogg
同时，一些小的更新也在为整合浏览体验做着铺垫。去年夏天，Firefox发布了一个升级版本，内置了一套全新的JavaScript引擎，叫做TraceMonkey。这个引擎在速度和图片编辑功能上有着显著的提升，而且还可以不借助任何第三方插件就能播放视频。
速度方面的提升总是能得到大家的认可，但是除此之外的图片和视频方面的能力却是浏览器进入操作系统领域的有力证明。可以在浏览器中编辑图片，可能你就不需要再使用本机上的图片编辑软件了，也许它还可以替代Picnik这类的独立的applications。但是今天我们仍然不能确定浏览器的这个功能能有多强大，所以设计师和普通用户们可能还得用他们自己本地电脑上的PS软件。
新的视频功能依赖于一个叫做Ogg的开源技术，它的出现带来了很多新的可能，首先就是那些不想注册编码器的开发者。目前，开发者们需要注册一个编码器来让他们的视频在专用的软件中播放，例如Adobe Flash。Ogg可以让视频在浏览器里播放。

但是更令人兴奋的是，在Firefox的这个新版本里面，允许在同一个页面上的多个应用中进行互动。这个技术带来的一种可能的应用就如上图那样，允许用户在看视频的同时点击其中的某个东西来获得关于它的详细信息。
2. Functionally-Limited Mobile Applications 简化了功能的移动应用
到目前为止，我们都还在传统浏览器的角度在看整合网络体验的问题，但是我们已经越来越多的通过移动设备在与网络进行交互了。现在，在移动设备上的浏览体验还不是十分理想，因此它还不是对用户的主要吸引点。小屏幕、不一致的输入、缓慢的连接速度和缺少符合移动浏览器的优质内容，这一切合在一起使得这种浏览体验显得笨拙又难以掌握，还容易让人沮丧——特别是，当你用的不是IPHONE的时候。
然而，特别为移动平台写的applications可以处理特定的、有限的数据——例如Google的移动 apps，为特定设备定制的Twitter、Facebook 应用，还有iPhone App Store里的那些成千上万的应用——看起来才更像未来移动互联网的应用。因为移动浏览体验还在最初的发展期，这里有一些设计方面的建议：与其把全尺寸的网站压缩之后塞到口袋里，设计师们更应该用简化过的核心功能放在移动applications里。
Amazon Mobile 

Amazon在iPhone上的界面 （如上图）是一个简化版移动应用的很棒的例子。Amazon 去掉了它网页上的大量内容而只留下最必要的功能：搜索、购物车和商品列表。而且它为IPHONE的小屏幕优化了布局设计。
iPhone 上的Facebook

Facebook一直在持续改进他的移动版本。最新版的内置了一个很简单的初始界面，把网页上每个主要功能用一个图标表示，然后按使用的重要程度排列出来。在减少了很多信息并分块显示之后，网站的内容和功能并没有受到影响。而且每一次的更新都让这个应用的使用体验越来越自然。
iPhone上的Gmail

最后，Gmail的iPhone application也让人印象深刻。Google引入了一种浮动条来批量操作邮件，这样人们就不用打开每封邮件再来处理它们。
3. Web-Enhanced Devices 各种联网了的设备
移动设备的快速增长将超过计算机产业之前的任一类产品，因此接入网络的用户数量也会激增。但是网络的飞速增长并不仅仅是依靠个人移动设备，而是通过车辆、房屋、服装和其他产品中的全新的网络接口来实现的。
一方面，联网功能可以增加产品特色，支持产品的营销和广告活动；另一方面，把日常用品连接上网络会使它们更实用、更高效。这里就有3个例子，可能用不了几年就会出现了：
Web-Enhanced Grocery Shopping  联网的超市购物

可以联网的超市“VIP”会员卡可以用来记录用户的开销，每次你使用会员卡的时候，你的购置清单会被记录到一个大型数据库中去。作为收集的数据的交换，超市对于你选择的商品提供一些折扣。基于这种联网了的购买行为，超市很快就可以为你提供符合你购买习惯的定制宣传促销内容，甚至是实时的（例如上图）。这对于消费者申请成为会员是一种很大的鼓励，同时也让超市的促销、销售和宣传可以更加的灵活多样。
Web-Enhanced Utilities 联网的公用设施

例如上图的室内温度调节器是一种我们很快就能在家里看到的联网设备，它不仅可以让人们使用Google PowerMeter来查看他们的电力使用情况，还可以看到目前与自己相关的记费情况（例如他们打开热水器的时候，不在电脑前面）。
Web-Enhanced Personal Banking 联网的个人银行

另一种有用的改进是在你的银行卡或者信用卡上显示你目前的帐户余额情况（如上图），当然，这个信息会被保护起来，当你通过指纹解开了安全锁之后才会显示。不可否认这个主意存在一些隐私和安全方面的隐患，这些问题在未来一段时间内仍然可能存在。
4. Personalization 个性化
得益于social networking websites的应用，人们的个性化在线体验变得更加自由、愉快。使用访问者的姓名来打招呼、在浏览记录的基础上提供内容展现和搜索结果，现在这些都是很普遍的功能，而且使得网络变得更有吸引力。下一步应该就是让用户更大程度上能设置他们的个人信息，并且提供更多的工具来传递最新的定制信息给他们。
Centralized Profiles 集中的个人帐号
和大多数人一样，你也许也在不同的地方有2到6个SNS网站的帐号。每个帐号都包括了你的信息设置，而且大多数是重复的。可能你在每个网站上的用户名和密码都是一样的，但是通常仍然得在不同的系统注册多次。那为什么不能从一个入口来提交你的帐号信息呢？在将来，你在网络上对别人介绍自己的内容将更多的由自己来控制。但是首先要把你的个人信息集中到一个帐号里，然后共享给其他的。这样，如果你的个人帐号有了改动，你只需要修改一次就可以了。
Data Ownership 数据的所有权
关于谁拥有你分享到网上的数据的问题很难说清楚。在一些情况下，它仍然是无人认领的。然而，在social networks上的隐私设置越来越复杂，用户也开始更加关心数据的所有权问题。特别是对于谁拥有那些图片、视频和用户写的消息的问题，在用户想改动帐号的时候就变的更加突出。从大的方面来看，Royal Pingdom在他的Internet 2009 in Numbers报告中指出，2009年平均每个月有25亿张照片被上传到Facebook！这个数字增长的越大，用户就越关心当他们从机器里上传大量的内容到网络的时候，这些内容最终会如何。

把用户用户的信息储存在本地机器上，这样他们就可以把数据分享到不同的社会化网络和其他网站里去，这虽然看起来有点退步的意思，但是这个功能很可能很快就涌现出来，以应对不断增加的对隐私的担忧。在这样的系统中，会单独为用户本地机器中的视频或者图片这样的文件创建标签信息，标签会向社会化网沾说明该文件的访问权限。所以不用把文件上传到网上而只是给网站对这些文件的访问权限就可以了。像Data Portability [...]]]></description>
		<wfw:commentRss>http://www.blueben.cn/index.php/archives/933/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Breadcrumb(面包屑)设计与最佳实践</title>
		<link>http://www.blueben.cn/index.php/archives/903</link>
		<comments>http://www.blueben.cn/index.php/archives/903#comments</comments>
		<pubDate>Tue, 05 Jan 2010 11:21:52 +0000</pubDate>
		<dc:creator>blueben</dc:creator>
				<category><![CDATA[Interact & Mockup]]></category>
		<category><![CDATA[网络产品设计]]></category>
		<category><![CDATA[翻译]]></category>
		<category><![CDATA[视觉设计]]></category>

		<guid isPermaLink="false">http://www.blueben.cn/?p=903</guid>
		<description><![CDATA[ 
Base on
 &#8221;Breadcrumbs In Web Design: Examples And Best Practices&#8221; By Jacob Gube
http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/
前言
终于有点空了，今天看导航的文章看到这个，才发现这个好文自己都没看过。。汗。。。3月的时候还在浮躁中吧。。。
没全部翻，就是看过了之后意会了一下，想看详细的还是看原文吧。
主要是实例里面有一些很有意思，链去网站体验了一些，分享一下。
Breadcrumb是什么
对于有很多页面的网站，Breadcrumb导航能方便的让用户找到路。它减少了用户访问上级页面的时候需要的操作次数，并且让页面和章节内容更容易寻找。同时它也是标示用户目前在整个站点中的位置的很有效的元素，是通过上下文信息来定位页面的重要资源。 
Breadcrumb的类型
主要有3种类型的Breadcrumb（WIKI）
·基于位置的  通常用在多级信息结构的站点上，显示了用户目前在整个站点结构中的位置。
·基于属性特征的  显示一个页面的特定属性，例如用不同属性对商品进行筛选时。之前TAOBAO有用过，今天没找到截图。
·基于路径的  显示了用户到达目前页面之前经历过的页面路径。
 
Breadcrumb的优点
（简略，详细请见原文）
·方便用户
·减少返回上层页面的点击
·占用很少的屏幕空间
·减少页面流量的跳出率
 
什么时候用
·有很多页面的大型网站，内容以层级秩序排列。
例如电子商务网站，有大量的产品并且按逻辑组织起来。
·不要用在单层信息结构的无层级秩序的网站上。画一个站点地图就可以知道是不是应该用Breadcrumb。
·Breadcrumb不能用来代替站点的主导航，它只是一个让用户知道自己在哪的辅助导航系统。
 
设计时要注意的地方
·用什么来做间隔符
常见的是“&#62;”，一般意义上，它包含了父集 &#62; 子集的含义.
有时候也用其他指向右边的符号“&#62;&#62;”和“/”。选择在于你使用的Breadcrumb的类型，一个路径型的Breadcrumb里的链接可能和其他的没有层级关系，如果使用“&#62;”就不太合适了。
·它应该多大
它不是用来定义页面的，所以不要比导航还要显眼。
·它应该放在哪
一般放在页面的上半部，层级导航的下面
 
典型错误用法
·不需要用的时候就别用了
 
如图，Breadcrumb夹在主导航和次级导航中间，页面上太多导航了，Breadcrumb也没提供什么额外的有用的信息。而且，当你点Breadcrumb中的MUSIC时，次级导航的TAB会跳到LISTEN，造成TAB LISTEN比其他两个TAB要级别高一点的误会。
·别用Breadcrumb替代了主导航

  1）搜索进来的用户要导航到其他栏目很困难。
  2）进入这样的页面的时候，用户多数时候只能去点浏览器的“后退”按钮。
  3）自己觉得还有一点就是这光用这玩意用户无法对站点的全貌有个印象，主导航在这方面可以做的很好。
·当一个子页面有多个父类别的时候，还是算了吧使用Breadcrumb很大程度上取决于你如何设计你的信息结构，如果你的一个低层级的子页面（DETAIL页）同时属于（或者可以放进）多个父类别的时候，Breadcrumb的效率很低而且还会给用户造成困扰。例如曾经的行业化项目遇到情况。
 
 
案例
全部图片请看原文，这里挑几个觉得有意思的分析下：
TypePad Design Assistant
 
 这个图看了觉得很奇怪，为什么下面的箭头会指在中间的这个链接上而不是最后。
到这个站点看了之后才知道，原来这是一个表示进程的选择器，通过它你可以查看整个流程中各个环节要做的事。
当前的页面是在 “选择布局”上面。
 
Overstock.com


这个的特色在于它是一个Location-based 型的，但是在最末端，又有一组多选框，提供了方便的子类筛选功能
 
Target uses semi-colons (:) for separators.
 
这个面包屑是用冒号来分隔的，也很适合的样子。当前项很醒目 
 
Grooveshark

这种样式很潮啊~~虽然很像TAG。。。哈哈
苹果的也很潮，就没放图了
 
Yahoo! TV
 
这个是带交互动作在里面的，可以展开。有点意思，筛选内容很方便，一定程度上弥补了面包屑难以对全局有印象的弊端。 
 
Coolspotters


 同上
 
2个反映进程的Breadcrumb



进程也是可以用的，是路径型的
 
 
一些带子菜单的breadcrumb

Profoto has a unique breadcrumb trail: clicking on a breadcrumb link opens an area below it that gives users additional attributes to select from.Lonely Planet [...]]]></description>
		<wfw:commentRss>http://www.blueben.cn/index.php/archives/903/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>如何开始创建iPhone应用[译]</title>
		<link>http://www.blueben.cn/index.php/archives/839</link>
		<comments>http://www.blueben.cn/index.php/archives/839#comments</comments>
		<pubDate>Fri, 14 Aug 2009 02:42:34 +0000</pubDate>
		<dc:creator>blueben</dc:creator>
				<category><![CDATA[Product & Prototype]]></category>
		<category><![CDATA[互动营销]]></category>
		<category><![CDATA[互联网]]></category>
		<category><![CDATA[移动网络]]></category>
		<category><![CDATA[翻译]]></category>
		<category><![CDATA[设计理论]]></category>

		<guid isPermaLink="false">http://www.blueben.cn/?p=839</guid>
		<description><![CDATA[
[前言]这是在Smashing Magazine上面看到的，觉得有点意思又正好有点空就试着翻了下。有翻的不当的地方请大家留言告诉我，谢谢！
你总是能听到有人说：“我有个好主意，可以做成一个很棒的插件！”这种声音到处都是。iPhone给软件开发的行内外人士都带来了前所未有的激动和创新的感觉。但是对开发者之外的人来说，创建插件的过程还是有点神秘。
这个创建指南可以帮你，带着你一步步的把你的创意变成一个真正的iPhone应用。这篇文章包括了各种不同的创意，技术的、小提示、还有资源，如果你正计划开始创建自己的iPhone应用的话，你迟早能用的上。
一、 找一个好的创意 – 一个真正非常棒的
你怎么知道你的创意是不是很棒呢？第一步是确定你的创意是不是可靠靠谱的；第二步，你需要能回答这个问题，这玩意是不是有哪怕一项指标能带着它走向成功？

你的应用能帮助解决某个特定的问题吗？在电灯炮被发明出来之前，人们会说“嘿，靠那点烛光阅读真是太糟糕啦！”去找找生活中那些糟糕的体验，想想如何通过你的应用让那些使用它们的人生活变的更好。

你的应用能服务于某个特殊的领域吗？虽然现在还没有关于APP STORE的统计，但是能确定的是应用的用途是随着APP STORE的应用列表一起飞速增长的。你应该找一个有着狂热粉丝的领域（例如宠物爱好者）并且创建一个能满足那些特定人群的应用。

它能让人们开怀大笑吗？这是一个傻瓜都知道的事情。如果你能带来一些有趣的东西，那么你一定是在正确的道路上并且你的创意很可能就是一个金点子。我昨天就按着一个写着“别按我”的红色按钮，按了5分钟。（注：作者是在说一个iPhone上的有趣的应用）

你在做一个更好的东西吗？现有的成功应用中，有没有缺乏一些重大的特色更新？不要满足于仅仅是一张点酒单，让侍酒师们能与他们的粉丝交流。

这个应用是否是富于交互的？我们必须承认，我们大多数人都会被一个跳蚤吸引去注意力。成功的游戏和应用都通过动态反馈来吸引用户。
二、 按列表检查一下你的工具
下面的列表是一些你需要的东西（*加星号的是必须的，其他的是推荐的）
·使用 Apple iPhone Developer Program ($99) *
·弄台iPhone或者 IPod Touch*
·弄台基于INTEL的MAC电脑，使用Mac OS X 10.5.5 操作系统
·准备一份 保密协议 （这里有个例子）*
·下载并安装最新版的iPhone SDK，如果你没有的话
·一本螺旋金属丝装订的笔记本
行动：准备好那些你必需的东西。
三、 你真正最擅长做什么
你有什么能拿到台面上来的能力呢？你是一个把目标构思成源程序的设计师？一个设计不了抽象纸袋子的开发者？或者也许都不是，仅是一个想把自己的创意带到市场上去的人。设计一个成功的iPhone应用很像开始一个小生意。你需要扮演各种角色，包括研究员、项目经理、会计师、信息架构师、设计师、开发者、市场工作人员和广告宣传者——所有都自己做。
记住，所有的企业家都知道，需要一个团队才能把产品做成功。不要把我理解错了，你当然能一个人把事情全做了。但是你会浪费很多时间和精力在过程中。不要发狂，参考下面的目录，然后问问你自己：什么角色是你最适合扮演的？然后另找一些有才的人来填补空缺。更多的创意会使产品更加丰富！
技能列表
·有能力辩明对一个iPhone APP来说，什么是有用的什么是没有用的
·市场研究
·列出功能列表（网站地图）
·画出草图
·界面设计
·构建代码（这里我们假设我们在建立一个本地的应用）
·应用的宣传和市场营销
记得和你的合作伙伴签署一份 保密协议。签署一份适当的保密协议其实是在告诉你的合作伙伴“我是一个专业的人，我对待我的生意和这个项目是很严肃的。不要带着我的这个创意就离开了。”
行动：选择最能发挥你能力的事去主导。对于那些你无法主导的角色，雇佣专家来做吧。
四、做好准备工作 市场研究
市场研究就是用有想象力的方法来表达“看看别人都在干什么并且不要再犯他们的错误”。APP STORE里面那些做的好的、不好的、甚至丑陋的，都能让你学到东西。，你要提出在应用的概念和设计上都富有创意的解决方案，从分析其他的应用（最好是类似的）开始。即使你遇到一大堆设计的很烂的应用，你仍然知道这是一些坏的例子，不要那样做。

行动：设法回答这些问题
·你的应用解决能什么问题？
·你见过有什么产品是执行类似的任务的？
·成功的应用如何把信息呈现给用户？
·你如何在可用的基础上让它更加独一无二？
·你的应用给你的用户带来了什么价值？
五、 了解iPhone或者 iPod Touch 的UI界面
如果你想创建一个iPhone的应用，你需要理解iPhone的潜力和它的界面特色。你能用它来发射一颗.45口径的子弹吗？不能。但是你能用它来拍摄影片吗？能！
好消息是你不需要熟记那百科全书一样的 苹果用户界面指南（EN）来找感觉，什么是能用的，什么是不能用的。下载使用尽可能多的应用，然后想一想你的产品需要包括什么样的功能。
注意这些：
·那些设计精良的应用是如何在屏幕与屏幕间导航的？
·它们是如何组织信息的？
·它们传递多少信息给用户？
·它们是如何利用iPhone那些独一无二的特点的：加速感应（the accelerometer），“扫”动（swiping features）、“捏动”操作（pinch）、扩展操（expand）和旋转/重力感（rotate functions）。
行动：下载每个分类TOP10的应用，并且每个都用一用。看一看 苹果UI界面设计指南，然后至少列出5个你想用在你的APP里的特色。
六、 确定“谁会使用我的应用？”
我们这里假设你已经确定你的应用会带来价值，并且你的应用会有一些热情的用户。好吧，可以，他们是热情的粉丝，但是事实上他们是谁呢？他们会通过这个应用进行什么样的操作来达到他们的目标呢？
如果这是一个游戏，也许他们想打出他们的高分成绩。或者也许他们是第一次玩，他们的体验与那些整天玩你游戏的脑残们有多不同呢？
如果这是一个功能应用，并且你的用户想找尽快找一个咖啡馆，他们会进行怎样的操作来让这个应用帮他们找咖啡馆呢？他们在找咖啡馆的时候身在哪里？通常在车里！在这样的情况下的交互设计需要多重表单，阅读和大量的交互吗？不会吧！这就是如何去找到真实生活和设计的交点。
行动：列出可能使用你应用的人。你甚至可以为他们起个名字，如果你想让你描绘的脚本看起来尽量真实的话。
七、 把你的创意用草图画出来
我说的草图，是真正的草图。用线在8.5&#215;11的纸上画一个9宫格，然后就可以画草图了。（注，作者没有标尺寸单位。。但是他说的应该就是iPhone的尺寸。用9宫格把屏幕部分区分出来。）
试着问你自己：
·每个屏幕分别需要传达什么信息？
·我们如何带着用户从A点到B点再到C点？
·屏幕上元素的比例和尺寸怎样体现出与其他元素的关系？
（也就是，这个东西能点击吗？）


把你的创意的整体缩略图画在纸上，这样就能推动你的创意远远超越你画的那些草图，你画草图的时候可能想象力已经停止思考了。你也可以买iPhone Stencil Kit 来快速的在纸上画出UI原型的草图。
行动：创建至少一个包括你应用的所有屏幕的缩略草图。试验一些不同的导航方案、按钮上的文本以及把各个屏幕链接在一起的方式。如果你想把你的草图转换成电子版，iPlotz 是一个值得试一下的好工具。
八、 轮到开始设计了

如果你是一个设计师，请下载iPhone GUI Photoshop template 或者 our iPhone PSD Vector Kit。这两个都是iPhone GUI元素的集合，当你开始的时候，它们可以帮你节省很多时间。如果你在草图里已经确认了你的布局，设计屏幕的工作跟布局的关系就不大了，更多的是对应用的实际的视觉设计。
如果你不是设计师，那就找一个！就像找一个电工来做电路方面的活一样。你也可以回到家里准备些工具然后自己来做，但是谁愿意冒嘘的险呢？如果你遵循了步骤1-3的话，你应该已经准备好了设计师开工所需要的一切东西。
当你找一个设计师的时候，找那些有移动设备设计经验的人。他们可能会有一些不错的反馈和建议给你的草图。有几个地方可以找到设计师：Coroflot, Crowdspring, [...]]]></description>
		<wfw:commentRss>http://www.blueben.cn/index.php/archives/839/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[译]链接应该在新窗口打开吗?</title>
		<link>http://www.blueben.cn/index.php/archives/713</link>
		<comments>http://www.blueben.cn/index.php/archives/713#comments</comments>
		<pubDate>Tue, 08 Jul 2008 16:36:48 +0000</pubDate>
		<dc:creator>blueben</dc:creator>
				<category><![CDATA[Interact & Mockup]]></category>
		<category><![CDATA[UE Learning]]></category>
		<category><![CDATA[用户体验]]></category>
		<category><![CDATA[翻译]]></category>
		<category><![CDATA[视觉设计]]></category>

		<guid isPermaLink="false">http://www.blueben.cn/blog/?p=713</guid>
		<description><![CDATA[ 
前言：
先罗嗦几句。第一次翻外面的文。前面正在讨论这个问题呢，正好看到一个新的文说相关的问题，于是想跟大家分享下，就做了。本文的一些观点还是很不错的，老外想问题逻辑性很强。中后部分的时候翻的都有点恼火，觉得这家伙太罗嗦。不过确实严谨——虽然看起来有点买弄学问的味道。。也许因为偶心里没有佛吧。。
文中有些观点和国内的情况也不是很适合,但大部分都值得参考
以后想把这样的文持续翻下去，有不好的地方，请大家多提意见！多交流！谢谢！
                                                                                                             
No, they shouldn’t. At first glance the decision to open links in new windows or not depends on the given site and the preferences of its visitors. Visitors of the sites with heavy linking are more willing to have links opened in new windows than open dozens of links in new windows manually. Visitors of [...]]]></description>
		<wfw:commentRss>http://www.blueben.cn/index.php/archives/713/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

