blueben's blog

Breadcrumb(面包屑)设计与最佳实践

blueben — Tue, 05 Jan 2010 19:21:52 +0800

Base on
”Breadcrumbs In Web Design: Examples And Best Practices” 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不能用来代替站点的主导航，它只是一个让用户知道自己在哪的辅助导航系统。

设计时要注意的地方

·用什么来做间隔符

常见的是“>”，一般意义上，它包含了父集 > 子集的含义.
有时候也用其他指向右边的符号“>>”和“/”。选择在于你使用的Breadcrumb的类型，一个路径型的Breadcrumb里的链接可能和其他的没有层级关系，如果使用“>”就不太合适了。

·它应该多大

它不是用来定义页面的，所以不要比导航还要显眼。

·它应该放在哪

一般放在页面的上半部，层级导航的下面

典型错误用法

·不需要用的时候就别用了

如图，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 also has a fly-out breadcrumb trail in which you can change attributes.

提供一个扩展的区域来改变属性。

最后这个很有意思，很是喜欢

Delicious lets you remove items in the breadcrumb rail of keyword tags to help you quickly find bookmarks.

亮点1：你可以很方便的添加和删除你筛选列表的TAG，只在这么一小块，就解决了“搜索”“在结果中搜索”等一堆麻烦的操作。

亮点2：面包屑下面一行那几个横线，你可以用来控制列表展现内容的方式，是“标题”LIST，还是“标题”+“简介”，或者详细内容。很聪明也很周到。不用在会议室里想破脑袋就可以让用户满意。

亮点3：地址栏。它的地址栏里的URL是与下面面包屑里选择的内容联动的，而且使用了WEBDESIGN+DESIGN这样很直观的文字。相比之下很多有名网站的地址栏都要汗了吧。

翻译、整理：blueben

标签(Tags): [体验&产品]-UE/PD, 产品, 用户体验译文, 设计

个人知识管理的29个原则[转]

blueben — Thu, 29 Oct 2009 14:39:05 +0800

1、持续的学习是个人生存和发展的基础。

2、信息和知识爆炸，在一段时间和时期内，学习的内容必须聚焦。起码要在一个领域内成为专家。

3、你应该学习的内容取决于你的价值观、特长、个性和目标。

4、你必须学会如何有效的评估信息和知识，所以你必须根据你的价值观、特长、个性和目标确立自己对信息和知识的“过滤器”；

5、人是知识获取的重要渠道，所以你应该知道谁最擅长什么？遇到问题时知道可以向谁学习和请教；

6、你牛了你的朋友也一定牛，建立人际资源的基础是自己的知识基础、个性和激情、自己优势的合理展示和帮助别人的意愿；

7、人际关系需要维护；捷径是找到那些愿意共享自己朋友资源的人，你也应该做这样的人；

8、信息如果不经过处理，不能称为知识。所以你存储的知识起码你应该简单看过、知道是在讲什么；

9、信息和知识存储前应该尽可能做规范化的工作，例如你做的摘要、感触、觉得最有价值的部分、将来能做什么用等等；

10、建立自己的分类字典，而不是每次想起什么就建立什么样的文件夹或者标签。分类字典，持之以恒坚持，适当调整；

11、知识存储中分类不宜过宽，过宽则等于没有分类；分类不宜过深，过深后你就不会再去看；

12.充分利用各种工具，尤其是web2.0工具做知识存储和获取工作；

13.知识存储时适当共享，听取和收集别人的意见和建议；

14、有意识的做知识显性化的工作，既方便知识传播也促进知识学习和建立人际网络；

15、知识传播中必须考虑传播的方式和效率；

16、不能用简单朴素的语言表述的知识证明你还没有深入理解；

17、多用举例子、讲故事的方法传播你的知识、见解。这个过程是你对知识的再深化过程；

18、你的知识传播的越广，你的影响力越大；

19、你的目的决定了你知识利用的方式。如果目的是要写论文，则你的知识就是明确、简洁的表达；如果是想要在市场上销售，就必须产品化、规范化或者专利化；

20、知识本身没有价值，只有被利用时才能展现其价值；

21、知识必须跟任务、项目结合起来才能发挥作用；

22、单独的一个主题的知识很难被很好的利用，所以你必须将你的知识融入团队中或者找到自己的合作伙伴；

23、知识创新最简单的方法是总结和分析；

24、知识创新是一种习惯；

25、学习或者实践—总结—-将总结出来的内容投入实践检验和请行家批评―继续总结和实践；

26、不能光做，还要思考；

27、个人竞争力的源泉不是你现在知道的或者掌握的，而是你选择方向和快速学习的能力，是你能够将知识用足用好的能力；

28、环境造就人，太安逸的环境对个人的发展弊大于利。如果不能找到好的环境，那就自己给自己压力；

29、既要会做，也要会展示自己做的，要有树立个人品牌的意识。

来源：田志刚——个人知识管理的29个原则
本文来源于：左岸读书_blog ,原文地址：http://www.zreading.cn/archives/1313.html

暂无相关文章~~

标签(Tags): 鱼浮于世-iLife

给自己设计了新名片

blueben — Fri, 23 Oct 2009 10:48:24 +0800

标签(Tags): blueben的设计, [设计&创意]-Ideas

页面设计草稿

blueben — Fri, 23 Oct 2009 10:42:54 +0800

标签(Tags): blueben的设计, [设计&创意]-Ideas

前段时间的LOGO设计稿

blueben — Fri, 23 Oct 2009 10:37:37 +0800

蛋定

取“不破不立”之意

标签(Tags): blueben的设计, [设计&创意]-Ideas

090922今年要完成的几件事

blueben — Tue, 22 Sep 2009 15:51:49 +0800

1、读5本交互设计的书，系统的整理下知识。

2、做一个新的博客模板

3、自己搭一个FLASH相册，把163的相册搬过来

4、给自己设计一个作品集

5、保持关注SNS的商业应用和各类电子商务网站。其他的先放一放，集中精力。

6、保持对PS、FW的熟悉，重新熟悉HTML和CSS，在实践中多尝试一些交互设计软件

标签(Tags): 职业事项, 鱼浮于世-iLife

浅析社会化网络产品设计[转]

blueben — Tue, 08 Sep 2009 10:33:09 +0800

根据权威调查公司尼尔森数据，网络社交（social network）和博客目前已经成为世界上第四种最流行的线上活动。全世界67%的网络用户会访问社交网站和博客，并且花在上面的时间的增长速度是互联网整体增长率的3倍。现在社交网站的访问已经超过人们对于电子邮件的访问。一些社交网络快速增长的用户数量甚至可以和一些国家的人口数相比–如果说facebook是一个国家的话，它的会员数和世界的第五大人口国相当。（用户数量在印尼和巴西的人口数之间）
在社会化网络设计领域中，有很多不同类型的设计。有些网站保持一个非常专业的方式（如LinkedIn），另一些则有更具活力和自由（像MySpace ）。大多数网站则介于这两者之间，专业与个性化交相辉映（如Facebook）。那么，设计一个社交网络的最好方式是什么呢？又是什么因素使得一个社交网络使用方便以及吸引更多的用户呢？请仔细阅读，让我们一起探寻。

1.快速吸引用户

如何在第一印象中吸引用户对于网站的成功是至关重要的。您需要确保用户能快速地被吸引到您的网站，无论是通过优秀的内容、一个引人注目的行动呼吁（call to action）、还是一些其他手段。

网站是做什么的？

在访问您的网站主页的几秒钟内，用户需要知道您的网站是做什么的。如果不在主页上告诉用户网站是做什么的，大多数人没有时间（或兴趣）尝试自己找出一个网站是做什么的。一个简单的口号（Tag Line）、使用图形、网站的名称，或使用任何其他一些让新用户能了解网站的元素。

Facebook在这个方面做的非常好，新的用户在首页上就能快速了解到网站是做什么的。

让访客有事情可做

网站的首页应该有一些可以做的事情展示给访客–新用户和老用户。注册和登录是最显而易见的事情，除了这个之外，想想其他的事情。让用户在注册之前就能查看网站到底是做什么的（如常见的，随便逛逛等），在强迫用户注册之前让用户有机会了解到为什么要注册，这样一开始就和用户建立了一种信任关系。

Xing在首页的右侧展示了很多可以操作的动作，包括注册，taking a tour和查看网站内容。

从好友哪里推荐一些有趣的内容

向您的用户显示她们的好友正在做什么。从某人登录开始，她们就应该看到好友们都在做什么，发什么帖子和推荐什么。许多网站通过news feed或者一个类似的列表，将好友的全部动态列下来。

Library Thing显示了好友们最近添加的书籍。

让用户方便的找到朋友

没有比在一个社交网站中没有朋友更悲伤的事情了。应该让用户能方便快捷的找到朋友，不管是新朋友还是老朋友。让用户能够通过eamil、学校、公司、姓名和其他一些属性找到她们想找的朋友，以提高用户体验。一个用户的朋友越多，那么他在网站上就越活跃，产生的动态也就越多，意味着她们也就越依恋着这个网站。

Facebook’的”邀请好友”页面就像一个写电子邮件的页面。

让用户尽情展示自我

自我展示是社会化网络的一个特点。一些网站给用户最大限度的权利来控制自己的个人主页（如MySpace）。其他一些网站限制用户的设计选项但可以让用户增加内容以适应用户的喜好（Facebook）。在何种程度上的社会网络用户可以自定义和个性化配置这完全由您决定，只要确保有一些功能能这样操作就可以。

个人主页应该要促进个人展示

不管你的网站是完全允许用户自定义还是部分参数可以自定义，都应该让用户能让她们的个人主页表达出她们的个性。这个可以通过改变模版颜色和背景，或者是增加内容来实现。

DeviantART 允许用户通过增添不同的内容模块来自定义个人主页。

在APP中提升用户个性

通过应用程序来展示用户的个性也是社会化网络设计的一个好主意。你可以让用户通过应用程序（App）来评论她们的动态（就像Facebook那样）。有些应用程序可以直接展示用户的个性，如一些礼物应用程序、智力和调查应用程序等。最好的一个例子是可以让用户表达她们是谁的Living Social application（这一本身就是一种社会网络），允许用户创建”五大”几乎关于所有的东西列表。

保持动态

动态的内容是一个web2.0网站的生命线，对于社会化网络来说也不例外。网站内容应该不断地变化，用最新的、最流行的、最具价值的形式不断地推介给用户。

拥有具有规律变化的内容

因为社会化网络的天性，用户需要源源不断的新内容。利用这个由包括内容，在首页和个人用户的个人资料或主网页上，组成更新。不断更新的内容吸引用户经常回来，因为她们的每一次访问都能开到精彩的内容。

Experience Project的首页上有一些推荐的内容。

即时更新的内容

利用即时的新闻源（news feed）给用户提供了一个很大的便利。在这一点上，只有极少数网站是这样做的。Facebook实时动态我们已经看到了。一旦有更新，仍需要单击以实际查看（并且是简要的展示）。理想的将是一个每几分钟自动更新的Ajax或类似的新闻源（news feed），无需用户任何输入。

Living Social 在她们的网络中有一个即时更新的动态列表。

允许用户将好友分组

当一个用户的好友数量剧增，允许用户将好友分组就变得十分重要了。当你只有30个或者40个朋友的时候，这不是一个大问题。当你的朋友到达100个、200个，500个，甚至更多的时候，将好友分组就变得非常必要了。毕竟，你需要将你的朋友分成工作同事、大学同学、常聊好友、亲密好友以及家人等不同的组，并且建立一个筛选器，哪些朋友可以看到你的更新，你有需要关注哪些朋友的动态。

让用户定义”组”

在组织朋友的时候，让用户定义组是最合理的。有些用户可能只想组织自己的朋友到几个不同的组（如企业和个人或家人和朋友）。其他人可能要设立几十个组来组织他们的朋友。无论是哪种情况，确保用户可以把一个朋友同时分到不同的组中去。

创建自动的组

自动形成的组是非常合理的。比如哪些共同使用最流行的应用程序的用户就是一个自动形成的组，或者是基于共同爱好和兴趣的人也是一个自动形成的组。

The Brooklyn Art Project 通过把从事不同艺术工作的人划成不同的组。

利用OpenSocial

OpenSocial，google为社会化网络提供的的应用平台，为你的社交网络开辟了各种可能性。OpenSocial的主要功能是允许开发人员创建可用于广泛范围的社会网络的应用程序。 OpenSocial也有其他好处，像让您的用户自己的个人资料，出现在哪些使用OpenSocial的网站上。

提供更多的应用程序给用户

应用程序（App）成为社会化网络的一个很重要和应用最多的特征之一。从提高工作效率的应用程序到游戏再到一些礼物应用程序都可以通过OpenSocial来表达自我，并且开发者们每天都在添加一些新的应用程序。因为这个是google在运营的，所以你不必担心哪天突然关闭了。

Ning是唯一一家提供OpenSocial接口的社会化网络

让用户把自己的个人主页带到任何地方

允许用户把自己的个人主页的信息带到其他支持OpenSocial的网站是另外一个大的好处。这意味这用户可以把她们在其他网站的个人主页带到你的网络上来，这能提高网站的注册率。

社会化网络产品设计，今天是本连载的最后一篇，主要从用户的行动意义、用户的信息意义、用户的联系意义上去解析社会化网络产品的设计，希望从产品设计到信息架构都能给产品经理们提供参考。

1.让用户的行动变得简单

每个社会化网络产品都有一些希望用户使用的行为动作。可能会是：加入更多的群组、邀请更多的好友点击广告或赞助链接、还是更新更多内容，网站总有一系列行为动作是最希望用户使用的。而让用户进行这些行为动作的一个关键点是要简单和有吸引力。

重点加强那些期望用户进行的行为

让希望用户进行的行为动作变得显而易见。使用更大的按钮在首选行为上，而小型文本链接则用在那些次要的行为上。或者使用不同的颜色或语言来标明不同的选项。在任何情况下，使所期望的用户进行的行为动作变得显而易见。

WriterFace网站把这些期望用户进行的行为如”邀请好友”"添加内容”用鲜明的大图标来表示，以期用户操作。(如下图)

让用户找东西的过程变得简单

如果您希望用户执行某些操作，应该要让用户更容易找到这些行为动作。一个最明显的例子是，邀请新朋友。让用户邀请可能不是在同一个网络上的朋友变得简易。（如下图）

2.突出显示用户头像

从现有的社会化网络产品设计中可以看出，每个社会化网络都允许用户上传一个头像照片。在用户有一个动作的时候显示在旁边。（如下图）

人们特别喜欢看别人

大家试想一下，你在用QQ聊天时有没有想过看你好友的空间？你在用开心网的时候是不是特想看到那些“隐藏主页”的好友，所以社会化网络产品中的用户都很喜欢看其他的用户。

当看到朋友的头像出现在某个应用程序或者其他地方的时候，这会让你有点击的欲望，通过看到一张熟悉的脸，建立了一种信任，至是在现实当中没有见过的人。

3.设计多种方式让用户之间联系

当新用户加入到一个新的社会化网络中的时候，他们只是希望和那些在现实中认识的人成为好友。但随着社会化网络的发展，社会化网络成为一种认识新朋友的方式。让你的用户能够基于兴趣爱好找到好友。提供一些便利的工具，让原先互不相识和不是在这个网络中好友的用户进行交流，从而成为朋友。当你登录开心网，第一想到的是找你那些熟悉的朋友，看看有没有认识的人。（当然更多时候是好友邀请你玩开心网），但时间久了，会发现，我们慢慢的想去认识一些新朋友。所以这是一个从老到新的过程。

用户群组

用户群组这个产品，被很多所谓的专家批评为“鸡肋”产品，认为它与论坛太相似，且用户不多，没有价值。其实这种观点是错的，原因有二：

(1)对于用户而言，他可以通过群组认识与其有共同爱好的一群人，这就是自驾游、钓鱼俱乐部盛行的原因

(2)对于系统而言，做精细化营销时，群组是一个十分牛的利器。

所以许多社会化网络都允许用户基于兴趣爱好创建群组和加入到某些群组中。有时候，一些群组是非常严肃的（像一些专业的群组），而另外的一些群组则只是为了好玩，他们分
享一些共同的爱好，并允许用户发现有共同爱好的用户。

我们看看Eons在首页的右边显示了一些用户的群组。它的这一设计要比国内的社区设计得更人性化。

如图：

会员列表的重要性

做过SNS产品设计或使用过SNS产品的用户，都会发现，你的主页上肯定会有“好友列表”、和“最近访客”这两个模块。因为会员列表是另外一种允许用户找到其他会员的好方式。他便捷、他实用。

转自：http://www.iyenei.com
作者：修泽 MSN:xiuze_nj@hotmail.com

暂无相关文章~~

标签(Tags): 鱼浮于世-iLife

让交互设计变的轻松有趣-Balsamiq Mockups原型工具介绍

blueben — Mon, 07 Sep 2009 18:21:15 +0800

Balsamiq Mockups是一个简单有趣的交互设计软件。通过它，你可以非常方便的通过拖拽等动作来把你的IDEA变成一个线框图DEMO。而且它的手绘风格又使作品变的很生动有趣。

它内置了许多UI元素组合，应该能满足日常工作的大部分需求。

Balsamiq Mockups的工作界面。就像许多同类软件类似的布局，上手很方便。而且它好象对元素的智能对齐等做了一些优化，会很聪明的帮助你实现优秀的效果。

把元素拖动到工作区之后，还可以对单个元素进行设置和编辑，例如文本等。如果想使用中文，可以在顶步菜单上选择“使用系统字体”

其他的一些作品效果图：

Balsamiq Mockups是一个Flash应用程序，你可以通过这里进行在线试用，也可以下载到本地计算机上进行使用。

你可以到这里进行在线使用（flash格式）：http://www.balsamiq.com/demos/mockups/Mockups.html

本地下载安装方法如下：

1、先安装 Adobe AIR;

2、点击下载MockupsForDesktop.air；

3、双击MockupsForDesktop.air，根据提示进行安装，完毕。

本软件是需要收费$79.00, 但还是有很多Free的方法，比如写一篇推广博客：）
未注册版不能保存，每5分钟会有一个提示注册窗口弹出。
有兴趣的朋友可以试试。

[更新090909]
发送了邮件之后第2天，就收到了来自val的回复邮件了，已经拿到了免费的注册码

真棒~~

标签(Tags): FLASH, [具体技术]-Skill, 互联网, 设计

如何开始创建iPhone应用[译]

blueben — Fri, 14 Aug 2009 10:42:34 +0800

[前言]这是在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×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, eLance。
当发布你的岗位需求的时候，请一定做到需求明确，并且准备好浏览大量的简历。

行动：如果你是设计师，在PS里开始干吧。如果你不是，那就找个人来做吧。

九、构建代码

虽然这个指南是按顺序排列的，但是当你在组织设计资源的时候就把一个开发者引入到团队中来将会是一个好主意。尽早的跟一个开发者交流能帮助你认识到项目的在技术可行性和预算的情况。

如果你是一个Objective C/Cocoa 开发者，那么打开Xcode开始工作吧！如果你还没有准备好，那么可以来这几个论坛逛逛：

·Apple Dev Forum

·iPhoneSDK (moderated by Erica Sadun)

·iPhoneSDKForum

·iPhoneDev Forums

·iPhoneSB

如果你不是一个开发者，你应该知道要做什么吧——找一个啊！详述你应用的类型——无论是游戏、功能或者其他的什么。每一种类型可能都需要不同类型的编码技能。这几个地方可以找到设计师：Odesk, iPhoneFreelancer, eLance 以及上面提到的任何一个论坛。

十、把你的应用提交到Apple Store

好吧，你现在如何把你的应用提交到Apple Store呢？对应用进行编译和发布为iTunes而做的二进制代码的进程对于那些不熟悉Xcode的人来说是困难的。如果你和一个开发者一起工作，让他们来帮助你：
·创建你的资质证书
·定义你的应用的ID
·创建你的Distribution Provisioning Profile（注：不知道专业术语怎么翻。。。汗）
·将应用编译完成
·上传到iTunes Connect

行动：如果你是一个开发者，画一张开发时间表并且开始做。如果你不是，那就找个人来做吧。

十一、宣传你的应用

如果一棵树在森林中间倒了又没有人在旁边听到，那它不就等于没出声嘛。应用们在App Store里很容易就没声音没图象的。别让这样的事情在你这发生。准备好为你的应用做一个市场推广计划。事实上，你要为很多的推广计划做好准备。做好实验的准备，有些方法能行，有些基本没什么用啦。

维护和提高应用销售量的策略：
·与社会媒体结合起来。如果你的用户在TA最爱的游戏上打出来高分，让TA很容易就把这个消息发布到FaceBook上或者Twitter上，这将是一个好主意。想一想你的应用能怎样跟社会媒体结合起来，并且把这个功能放到你的应用里面。至少，在FaceBook或者Twitter 上设置一个粉丝页面，把它们当作你与你的用户沟通的平台，并且把反馈放到应用里。

·发布前的宣传。在你的应用发布之前，就放一些小道消息出来。有些人写过与你的应用有关的东西，发邮件给他们，看看他们会不会对你即将发布的应用再写点什么。

·准备好多个版本。不要把你想要的每个特别的东西都放在第一个版本里面发布。列一个你对应用的规划列表，确保你的应用在将来能把所有的特点都放进去。然后就不时的发布一下新版本来刺激销售。

行动：列出20条针对你用户群的宣传策略。并且把他们加以实施，你自己做或者找适合的人来做！

十二、保持关注并且不要放弃

当你做第一个应用的时候，把这个应用做好是比较容易的，而且还会产生一大堆新的应用的创意出来。你可以想，但是不要被那些新想法带偏了路线。你的第一个应用一定要造成轰动，而一次介入太多的项目会削弱你把第一个应用做成功的激情。

行动：从那种状态走出来，把那些应用（的想法）都踢开！

原文地址：
http://www.smashingmagazine.com/2009/08/11/how-to-create-your-first-iphone-application/

翻译：
http://www.blueben.cn/

标签(Tags): [设计与网络]-Design/Web, 互动与营销, 互动营销, 互联网, 用户体验译文, 设计理论

最天使090730

blueben — Thu, 30 Jul 2009 14:39:55 +0800

“最好的那个天使
我最熟悉的字是你的名字
我们会有大大的房子
你会送我一首小诗

最坏的那个天使
我最爱画的就是你的样子
我们守着距离拉成的相思
温柔着彼此的言辞

我最爱的就是那个天使，爱到可以去死
爱到整个世界灯全熄灭，最后还要给你体贴

我最恨的就是那个天使，恨到可以去死
恨到快把自己的全部忘记，最后还要刺青铭记

最恨你那么久都不来见我一次
最爱你当远处传来你的相思

最容易想起、最难忘记、最想要得到、最害怕失去
最初的陪伴、最后的需要、最远的距离、最近的心跳
最后我说了我恨你
可是我恨你，就是我爱你”

绵羊音在舒缓的节奏中一圈圈晕开
带着可爱的单纯和稚气

在小区的林荫路上，他疾步走着，没有目的，像一种发泄
她迈着小碎步紧紧跟着，不时的带几步小跑
他停下来，转身，故作气势
“你不要再跟着我好不好”
她立在他面前，低着头，又抬起大眼睛悄悄看他，眼神在黑暗里闪动
她在他的面前一直小下去，变的好低好低
她不语，试探着伸手拉他的衣角
抓住，捏在手里
仅是那么一点点，但是就像重新掌握了世界一样
然后心里就安定下来：他还在
她轻轻的撰着他的衣角
“你去哪里，我跟你一起去”
“不要”他挣脱开
她一下子又感到心里空洞起来
她还是低着头，悄悄的看他，发现他也在看自己
于是她努力做出微笑的样子，嘴角显出可爱的酒窝
他本来还想继续说什么但是看到她的样子于是欲言又止
转身继续走“别跟着我，让我一个人安静一会”
她立了几秒，显得有点无措
然后像下了决心一样，小心翼翼的保持着几步距离，恋恋不舍的跟着

他转头看她，想知道她是回去还是怎样
他停下来她也停住
黑暗里她的眸子闪烁

一瞬间他的愤怒都消散
他转身继续走，但是心里变的开心起来
他想起她的可爱和温情的时刻，仿佛刚才家里那场激烈的争吵并不存在一样
想着想着，微笑在他的嘴角偷偷浮现起来

很多年以后，他常常会想起那个夜晚
她在他面前变得很低很小，低到土里去
她是爱他的

但是很多年之后他才知道，即使相爱，两个人也不一定能在一起。

标签(Tags): 随想, 鱼的寂静-Deep Blue

blueben's blog

Breadcrumb(面包屑)设计与最佳实践

前言

Breadcrumb是什么

Breadcrumb的类型

Breadcrumb的优点

什么时候用

设计时要注意的地方

典型错误用法

案例

相关文章

相关日志

个人知识管理的29个原则[转]

暂无相关文章~~

相关日志

给自己设计了新名片

相关文章

相关日志

页面设计草稿

相关文章

相关日志

前段时间的LOGO设计稿

相关文章

相关日志

090922今年要完成的几件事

相关文章

相关日志

浅析社会化网络产品设计[转]

让用户尽情展示自我

暂无相关文章~~

相关日志

让交互设计变的轻松有趣-Balsamiq Mockups原型工具介绍

相关文章

相关日志

如何开始创建iPhone应用[译]

一、 找一个好的创意 – 一个真正非常棒的

二、 按列表检查一下你的工具

三、 你真正最擅长做什么

四、做好准备工作 市场研究

五、 了解iPhone或者 iPod Touch 的UI界面

六、 确定“谁会使用我的应用？”

七、 把你的创意用草图画出来

八、 轮到开始设计了

九、 构建代码

十、 把你的应用提交到Apple Store

十一、宣传你的应用

十二、保持关注并且不要放弃

相关文章

相关日志

最天使090730

相关文章

相关日志

一、找一个好的创意 – 一个真正非常棒的

二、按列表检查一下你的工具

三、你真正最擅长做什么

四、做好准备工作市场研究

五、了解iPhone或者 iPod Touch 的UI界面

六、确定“谁会使用我的应用？”

七、把你的创意用草图画出来

八、轮到开始设计了

九、构建代码

十、把你的应用提交到Apple Store