iPhone - UCD大社区

iphone的“通话记录”和“短信”的信息组织方式

zjf — 2009-07-13 21:35:30

最近几天用了iphone，iphone之前用过的最后4款手机都是nokia，最后一款是E71的兄弟机E63。先就最近通话和发短信谈一点苹果对信息组织方式上的特点。
iphone用一个视图，代替了nokia通话记录的三个视图。Nokia按呼叫键，见到的视图是三个维度“最近呼出，最近呼入，未接来电”，而 iphone用了一个视图来组织这三个信息：不区分来电和呼出，红色标记未接来电，按照时间线来组织。这样来看，实际上就留下了两个维度，接通的和未接的，如果只有两种状态下，就可以在同一个视图上用不同的状态来标识，将未接来电标红，点击“未接来电”是从全部通话中筛选出未接来电。用时间线来组织所有的通话记录，而且在这个过程中还漠视了呼出呼入两种类型的差异。

这个理念同样地被应用在了短信的信息组织上，iphone放弃了收件箱，草稿箱，已发出，发件箱（ps：已经下达了发送的指令，却还没有发出去的短信会放在这个地方，发送成功之后会自动地移到“已发送”中），iphone在短信的处理上用一个视图代替了传统手机的短信场景的五六个视图。通过“时间线+会话关联”两个维度来组织。用时间线来组织所有短信，漠视了短信的本身的属性。

从这两个例子，我们看到苹果强化了对象和人之间的关系，漠视了操作对象自身的属性。
作为一个自然人，所有的体验都是架构在时间的基础上，最新的信息可以认为是最有价值的。我想到Twiiter和facebook的翻页操作采用了类似的方式，第一是最新的，查看“更多”，就刷新一屏，而如果你要查看最早的记录，你必须不断地重复这个操作，并没有一个“常规”的“跳到末页”这样的按钮。

在 iphone的通话记录和短信两个场景中，都将“时间线”作为组织信息的第一维度，用时间线来组织所有的信息。短信的组织方式中，“会话”是另一个重要的维度，最先使用会话来组织信息的应该是gmail，这是取决于内容自身的关联性，这种关联性是一种基于内容的内在的关联性。gmail是的会话是建立在对 mail的“回复”的操作上的，而iphone短信的组织则是建立在联系人的基础上的，无论怎么样，这两种方式都可以认为是有一个内在的关联，而非外在的（两封都处于收件箱中，来自不同的发件人的短信，除了状态的相同，能有什么内在关联呢）。

    稍微往远处想一点，将来的手机是否会将短信，通话，email这些所有的沟通方式都放在同样地维度下去组织呢。打开一个联系人，我就可以看和他的最近通话是什么时候，最近的短信是什么，最新的email是什么……，好吧，或许不会，起码iphone可能不会这么做，因为毕竟做一款超强的通信工具，并非是iphone所追求的。那么gmail呢？如果google 整合gmail和google voice，那就我们或许在inbox里面看到的就是voicemail，mail，sms根据时间线混排的一个视图。
   被苹果漠视的一些维度是什么呢？从通话记录来看，呼出和呼出，描述是通话记录自身的属性，对用户而言，接听或者呼出不重要，重要的是这是一次通话；对于短信而言，发送，接收，发送中，草稿都是描述的短信自身的属性，或收或发也不重要，重要的是这是我跟他的一次/一系列的会话。苹果对这一点的处理实际上我感到很偏执，尤其是在“全部通话”记录的处理上表现的很明显。我感觉那个位置可以用两个内容不重叠的tab来表现“最近通话”和“未接来电”，而苹果却要偏执地将未接来电也整合到“全部通话”记录里面，所以用户在一个视图当中得到了相当大的信息量。
   如此看来，苹果的设计理念是人本的，而传统（以微软为代表的，包括yahoo和nokia在内）是以“对象”为本的。微软系的设计理念中，都是是文件和文件夹为处理对象的，给人的感觉是精确和完备，而苹果系的操作则是简单和流畅。然而深受微软系教育的用户，会觉得苹果系并不顺手。人的习惯和心智模型会被外界环境教育并改变的。关于“人性”和“理性”的问题，也是个很有意思的话题，以后可以谈谈。

相关话题：iPhone 源地址：http://cvbbbn.blogbus.com/logs/42289436.html

iphone Web App 导航设计探讨

一叶苦雨 — 2011-10-21 10:53:24

最近在做iphone端Web App的项目。由于产品形式新颖，技术环境不成熟，公司给与了较宽松的研发时间。在一个月的交互设计阶段，每个环节都得到多次讨论推敲，我从中感悟颇多。导航系统的设计是一个比较典型的点，拿出来与大家分享讨论一下。

导航系统所遭遇的挑战

iphone Native App较常见的导航如下图所示：

手机屏幕底端：A、B、C、D四个tab组成该Native App的全局导航，这是我们经常见到的tab导航栏。

手机屏幕顶端：主要有四种形式。第①种形式是在该位置中心显示产品的logo；也可以将logo适当调整位置，将常用操作或快捷入口放在该位置的右侧。第②种形式是在该位置有两或三个tab选项。第③种形式是在该位置中间显示当前任务标题，在左右两侧放置导航控件或功能控件。第④种形式是在该位置放置搜索框。

与以上的Native App导航方式相比，Web App导航方式有着巨大的不同，如下图所示：

Safari浏览器的工具栏将一直占据着屏幕的底端位置，全局导航只能被动移动到屏幕的顶端位置。这是影响Web App导航设计的最重要因素。

如果产品的功能比较少，且没有特别要突出的功能的时候，可以设计成上图中第①种导航方式。此时存在的问题是如何表现出产品的品牌，毕竟在Safari浏览器登录某网站比运行一个Native App给人的品牌认同感弱很多。

如果将产品logo表现出来，且产品需要将用户常用功能突出（比如刷新功能或者发布入口），就需要设计成上图中的第②种导航方式。

如果在A功能板块下，还需要设置子类别选项，则导航栏中又多一组tab。此时的导航方式就如同上图中的第③种了。

当然，在执行某一项任务的时候，全局导航可以暂时“归隐”，只保留一行标题栏和左右两侧的导航控件或功能控件。如上图中第④种导航方式所示。

在该产品设计中，为方便用户在各功能板块之间快速省力地切换，设计师希望全局导航栏可以保持长久悬停，不要像一般wap网页似的让导航随网页滚动消失。这样的话，基于浏览器的Web App 导航系统便捷性就和Native App相媲美了。

然而，浏览器工具栏将全局导航逼到了屏幕的顶端，却又造成了导航头部过于沉重的问题。如下图所示：

如果将logo栏中的常用功能（例如刷新或发布入口）和全局导航都设计为悬浮停留的形式，内容区的信息展示空间就比Native App减少了一行的高度，如上图中的①。而且，某些页面需要在全局导航的下方出现二级导航；悬停不动的3行导航大大吞噬了屏幕本来就很宝贵的内容显示空间，如上图中的②。

让用户在如此狭小的空间不得不频繁滑动屏幕浏览信息，这样的体验太糟糕了。这个严重的问题很让设计师困扰，因此需要重新设计一下导航系统。设计过程主要包括：优秀竞品分析、方案遴选。

优秀竞品分析

首先，分析对比了三款优秀的Web App：Google+、FT Web App、Twitter的导航方式。浏览环境均为iphone Safari浏览器。

1.Google+

导航系统特点：

￭全局导航单独形成一个页面，其他页面不出现全局导航；

￭导航栏沿用了ios系统原生控件的形式：标题+导航或功能控件；

￭标题栏在页面中悬停不动

优点分析：

保证了每个信息浏览页面的导航栏简洁轻薄，尽量少的占用信息详情的显示空间；保证了其核心功能（此处是微博浏览功能）的良好使用体验。

缺点分析：

全局导航隐藏较深，降低了用户在不同功能板块快速切换的便利性；全局导航隐藏较深，用户看不到其它板块功能，大大降低了用户点击使用其他功能的可能性。

2. FT Web App

导航系统特点：

￭Safari浏览器URL一栏一直悬停存在，并将品牌文字FT Web App显示在顶端;

￭全局导航被隐藏起来，点击功能键后在页面顶端出现；

￭二级导航出现在页面顶端；

￭全局导航和二级导航由于新闻板块数量较多，都采取了单行空间不完全呈现的方式，可滑动选择其中某一项；

￭所有导航随页面滚动，不在屏幕中保持悬停；

优点分析：

FT Web App导航设计最大的优点就是繁重导航的轻量化处理。全局导航和二级导航中的新闻板块都非常多，若将这些板块都展示出来，恐怕要占用屏幕的一半显示空间。FT Web App于是将全局导航隐藏在一个功能键之后，二级导航也只给了一行的显示空间。

缺点分析：

展示给用户的导航只是其全部新闻板块的冰山一角，无法给予用户全部概况浏览的机会，也就无法很好的激励用户去尝试被隐藏的新闻版块；同时，用户寻找某一个新闻版块或者在页面底端回到页面顶端的操作成本略高。

3.Twitter

导航设计特点：

￭全局导航只有一行，品牌展示浓缩在主页图标中（Twitter小鸟图标）；

￭全局导航一直保持在屏幕顶端悬停不动，不随页面滚动而滚动；

￭二级导航在点击全局导航某tab后，以菜单列表形式出现。

优点分析：

在屏幕顶端悬停不动的全局导航，可以方便用户在不同的功能板块之间快捷切换，降低了用户的信息寻找成本；Twitter Web App的导航只有一行，为用户保证了尽量大的正文内容显示空间。

缺点分析：

一些常用的功能键被隐藏在二级导航中（比如新信息发布入口），一方面增大了用户的寻找成本，另一方面降低了这些常用功能对用户的激励使用效用。

基于对以上三款Web App产品导航系统的分析，设计师对目标项目的导航系统设计形成了以下框定：

￭全局导航方便用户快速寻找以及功能板块间的切换；

￭导航尽量轻薄化处理，尽量保证足够的正文内容区显示空间；

￭将用户经常使用的功能键呈现在前面。

方案遴选阶段

基于项目的实际需要以及对竞品分析的思考总结，设计师尝试了3款导航设计方案，并对每一款方案的优劣之处进行了详细分析。

导航设计方案一

设计说明：

￭ ABCD是产品的四个功能板块，组成全局导航。

￭全局导航在屏幕顶端保持悬停不动。

￭ E是新消息发布入口，属于用户常用功能。

￭ E采用半透明显示方式。

￭ E停留在屏幕的右下角

该方案的优点：

屏幕顶端只有全局导航一栏，导航的轻量化为正文内容区节省了尽量大的显示空间；全局导航悬停不动，可以便于用户快速切换到不同的功能板块。

该方案的缺点：

右下角的新信息发布入口致使浏览页面不够清爽，会对用户造成一定的视觉干扰；新信息发布入口没有必要在任何页面都显示，于是可寻性出现了危机；品牌logo无法显示，品牌感较弱。

导航设计方案二

设计说明：

￭ E是新消息发布入口，属于用户常用功能。

￭ ABCD是产品的四个功能板块，组成全局导航。

￭屏幕顶端的两行导航栏在用户刚进入页面的时候出现，在用户滑动屏幕浏览信息的时候消失。

￭屏幕右下角半透明功能键在导航栏消失后出现，点击该键导航栏出现。

该方案的优点：

浏览信息的时候导航栏消失，为用户提供提供了最大的正文内容显示空间；可以显示logo，品牌感较强；新信息发布入口的可寻性较好。

该方案的缺点：

屏幕右下角半透明功能键致使浏览页面不够清爽，会对用户造成一定的视觉干扰。

导航设计方案三

设计说明：

￭ E是新消息发布入口，属于用户常用功能。

￭ ABCD是产品的四个功能板块，组成全局导航。

￭屏幕顶端的两行导航栏在用户刚进入页面的时候出现，在用户滑动屏幕浏览信息的时候第一栏向上消失，第二栏上移至顶部保持悬停不动。

￭手动下拉全局导航栏，可以下拉出第一栏导航。

该方案的优点：

浏览正文信息的时候，仅显示全局导航一栏，做到了导航的轻薄化；全局导航悬停不动，可以便于用户快速切换到不同的功能板块。

该方案的缺点：

下拉全局导航时，可能会有误操作的危险，虽然可能性很小。

综合以上的分析，考虑到正文内容区显示空间的大小、对产品的操作便利性以及产品品牌感三方面因素，最终决定将方案三作为导航设计的基本形式，并继续进行进一步丰富细化。

总结：

浏览器的工具栏一直占据着屏幕的底端位置，全局导航只能被动移动到屏幕的顶端位置。如何平衡操作的便捷性与正文信息显示空间最大化的关系，是Web App导航设计的关键所在。

最佳方案总是权衡的结果。每一款设计方案解决某些问题的同时也会产生新的问题。此时设计师需要知道哪些功能是最重要、优先级最高的，保证核心功能的良好用户体验是评判设计方案的重要准绳。

不拘规范的iPhone优秀应用设计细节

肖志婕 — 2011-10-05 15:34:40

作为一个刚入行的交互苦逼女，最烦恼的事情是如何解决“iPhone原生的界面控件无法满足产品日益增长的功能需要”这个大矛盾。一方面，如果保守地采用传统的iPhone控件，不能给产品带来太多的创新价值；另一方面，如果过于突破，又害怕不能通过APP Store的审核，开发同学辛苦之后却竹篮打水一场空。纠结通过的时候，看到APP Store上有一些创新的设计，并从中获得启发的时候就特别开心。这里分享一些特别有新意的APP，看看它们是怎么突破传统的，为自己以后的工作做点积累，为以后各个功能模块的设计提供点灵感和解决方案。

在开始分享前，先介绍一下APP Store审核机制中与界面相关的条款。

一、顺畅的返回及导航设计

在影视作品中，场景与场景之间的过渡，叫做转场。为了使内容的条理性更强、层次的发展更清晰、在场面与场面之间的转换中，需要一定的手法。APP传统的滑动、翻页、水平翻转转场设计，能够给用户过渡切换时很好的视觉引导。此外，对于APP而言，最重要的不是转场的过程，而是如何在场景中的往返，导航切换。明晰的信息架构、便捷导航、一目了然内容分类，简短而不焦虑的转场时间，才是优秀软件所需要具备的品质。

（一）从界面切换时的设计解决转场的等待问题

Favorite TV立方体翻转的设计很有新意，在等待过程中除了“转菊花”和“咖啡杯”，其实我们还可以找出更好的解决方案

JS对等待进度的设计，让人对“返回键”另眼相看。转菊花”的位置，“返回键”的设计除了在外形上有突破外，在功能承载上的突破也是可以借鉴参考的方向。另外，JS对导航的设计也很特别，本来传统的居于界面低端的tab导航栏，可以由一行变成两行，这样减少了一级界面的跳转。

（二）从快捷的返回键解决转场的页面切换问题

转场过程中的等待会造出用户焦虑，进而造出用户流失。复杂层级的应用软件，如果“返回键”的功能设计不好也一样会造出用户在返回过程中的焦虑，导致用户流失。

对于层级复杂的软件，传统的返回键安装到底是返回上一次操作的页面（back），还是返回上一层级（up）？有没有两全其美的方法，做到深度和广度的平衡。个人感觉下面的软件是给出了许多不错的解决方案。

在标题栏设置“返回”按钮

在界面底部设置多个状态的返回按钮

通过手势实现返回操作

（三）从合理的导航设计避免转场

任何时候有一个全局的导航条，能够快捷导航是一个设计理想。但是对于有第三第四第五层级的应用软件来说，在次级页面有个固定的位置摆放全局导航，不免有点影响其它操作任务，爱看给出了解决问题的一个很好思路，可以放置于左侧，通过向右滑屏展开，既不影响子页面的操作任务，又能够解决全局导航问题。

对于一个界面分为两个TAB的设计有时的确让人困惑，UNIQLOOKS在次级导航的设计很有新意，但是前提是次级导航并不是那么的重要，且用户不会平凡切换。

二、轻巧的移位与重叠设计

交互有一个可怕的定律叫“漏斗法则”，意思是尽量减少操作步骤和界面跳转，每增加一个操作步骤或者界面切换，就有可能流失10％的用户。位移与信息叠加的设计模式，在不跳转的情况下，通过内容移位，能够合理展示更多的信息，扁平化信息架构，在操作者产生交互的地方，就近通过这种方式就完成了轻便的操作。Path、with/、myPANTONE便是通过内容移位与信息叠加的模式来展示信息的比较有趣的软件。

Path位移的动画一直都很顺畅，这是Path体验很到的地方。

With/的层叠设计和透明效果，让人对界面信息的排布重新思考。

myPANTONE，很成功的地方在于所有的核心功能操作在一个页面既可以完成。除了采用内容位移的设计，界面的合理分层也是避免转场的一个有效手段。

三、风度的隐藏设计

手机的界面有限，对不影响界面内容的控件，悄悄的帮助用户隐藏，无疑是一个很贴心的操作。这里绝对知乎和PIICTU的导航栏的隐藏设计给自己的体验很好。

相关话题：iPhone 源地址：http://www.xiaozhijie.com/blog/122/649073.html

移动产品设计之ios导航模式

kent.zhu — 2011-10-27 22:15:25

写在前面：刚开始接触移动产品设计的时候对着设计指南懵懵懂懂的感知了一下，但是还是不甚寥寥。最近读《触动人心》，发现作者对ios的导航模式的总结实在太棒了，于是写下这篇读书笔记。

导航始终是产品设计的重头戏，往往产品设计中90%的事情就是在做导航。在iphone中预置了3种可以直接使用的导航模式，平铺列表、标签页、树状结构，每种模式都配有不同的工具栏和控件。三种导航模式可以独立使用也可以混搭，让你的用户可以优雅的穿行与你的应用之中。

（图片来源：Tapworthy）

平铺列表

这种方式主要用于只有一个主屏的简单应用。这种方式很适合浏览并发现类的应用，因为他的信息架构简单到极致，没有信息层级也没有组织结构，就像一叠卡片一样。主要信息在卡片的“正面”展示，“反面”就是简单的设置，向左右滑动即可翻页，典型应用比如内置的天气应用。

当然，平铺列表式导航也可以根据你的需要随意的添加、删除卡片。从某种意义上讲，他的扩展性优于标签页式导航，因为标签页模式中类目与顺序都是固定的。

在平铺列表模式的页面底部都添加了页面分页控件，其表现为一排小圆点。小圆点的数量代表了平铺的页面的数量，而高亮的小点则是另外一种形式的导航，他显示了当前所在页面的位置。同时，页面分页控件也是可以操作的，点击控件的左半部分或者右半部分或者直接左右滑动可以切换上一个/下一个页面，不过，页面分页控件每次只能翻一页，而不是直接跳转到某一页去。一般而言，页面分页以不超过10个为最优，超过了20个就会溢出屏幕了….

另外，为了更好的表达”卡片堆“的隐喻，最好不要在平铺模式下设计多个不同的滑动手势。在触摸屏上大家都能在单一方向上进行滚屏，但是2个方向的滚屏需要更好的精度，这种做法有些挑战人机工程学了。

标签页

在ios上标签页一般依附在屏幕的底部，标签栏将应用功能一一归类，点击一个标签就会跳转到相应的页面上，然后该标签以高亮的形式表明你当前的位置。在标签页模式下，每个标签对应的页面都可以有自己的界面风格和特定的内容与功能，看起来就像是在运行一个独立的应用。

标签栏的高度是49像素，每个按钮都会包含一个文本标签和图标，按钮的宽度取决于放置按钮的数量，标签栏限制最多可以放5个图标，超过之后会在第5个按钮的位置出现”更多“的标签。

当然，标签栏以49像素的高度存在其实占用了不少的屏幕空间，所以在某些情况下可以适当的去掉标签栏，典型的就是图书类应用的全屏阅读模式。

树状结构

这种模式简单来说就是将层级信息分类到一棵倒置的树枝上。这种导航模式很适合列表，点击列表中的一项可以看到新的列表，列表可以再进行分拆，直到进入项目的详情。树状结构的一个变形就是表格视图，也就是我们常说的”9宫格”，这种变形更加的图形化。

当然，根据信息的不同，树状模式中的标签也可以进行分组。一个树状模式可以分为若干的组，每个组可以包含任意数量的行数。

3类导航模式的比较

导航模式	优点	缺点	代表应用
平铺列表	适于信息架构及简的浏览性页面；内容可自定义且数量可变；隐喻明显，手势单一；占用页面空间少；	无法快速进行跳转翻页；最多只能容纳20个页面；难以包容滚屏，对长文本不利；页面指示器不够明显，其他页面容易被忽略；	天气
标签页	点击一次即可访问应用所有的主要功能；清楚告知用户主要功能和当前所在；	只能显示5个；应用的大多数页面都会始终占据一定的屏幕空间；	Instagram
树状结构	处理大量的类别、功能和类目；组织方式的隐喻容易理解；可直接对内容进行交互，占用屏幕空间小；适合用户自定义分类；	主功能只有在最顶层才会被显示，不能在每个页面都展现；主功能和分类直接切换比较麻烦，必须先回到顶层；	Mail Facebook

导航模式的组合应用

平铺列表、标签页、树状结构3种导航模式并不是互斥的，完全可以在一个应用里对他们进行混搭。这种混搭可以帮助我们克服单个导航模式的短处。

模态视图

我们经常会遇到在某个路径中滑出一个单屏、进行编辑、查看信息、操作界面的上的内容的情况发生。这是一种应用行为的特定形态，一般带有流程的界面变更的情况发生，比如一张页面临时取代了整个应用程序的显示屏，我们称这种处理方式为“模态视图”。默认情况下，模式视图从屏幕底部边缘滑上来切一半覆盖了当前整个屏幕,模态视图完成和程序主功能有关系的独立任务，尤其适合于主功能界面中欠缺的多级子任务。这种操作会暂时绕开应用的正常操作。

模态视图常常被用来编辑或添加内容，当你需要的时候模态视图一般从屏幕底部滑出而后遮盖先前的页面，当你完成任务后滑出的页面也会相应的缩回去，然后可以继续之前的流程。有些控件和界面元素只在次要任务中被偶尔用到，模态视图很好的把他们暂时隐藏了，并且当需要的时候出现，有效的节约了屏幕空间。

模态视图有点像是导航中的死胡同，为了能够让用户也可以同样方便的回到正常的流程中去，模态视图除了正常的操作之外一般还有加上一个“完成”按钮，或者“取消”按钮。

最后，一个移动产品设计的礼仪问题

当用户从你应用的一个地方跳转到另外一个地方再原路返回来的时候，应用应该主动恢复到他上次离开的样子（千万不要重新加载，你懂的！）。这玩意学名叫状态恢复，这种保持不变的礼仪对移动产品的体验来说相当重要！

简析 IOS 程序图标的设计

Lapon — 2011-04-26 12:44:42

程序图标主要作用是为了使该程序更加具象及更容易理解，除了上述的作用外，有更好视觉效果的图标可以提高产品的整体体验和品牌，可引起用户的关注和下载，激发起用户点击的欲望。

表现形态

在有限的空间里表达出相对应的信息，在IOS 程序图标设计中，直观是第一个解决的问题，不应该出现大多繁琐的修饰，当然还要有很好的视觉表现力，使用户可以更容易理解此应用的实际作用，更轻松地辨识此应用。下面来说说几种表现的形态。

图形表现

在只用图形表现应用程序的用途，图形可以很好地吸引用户的眼球，更具象地表现出信息。

文字表述

文字表现是一种非常直观的表现方法，文字应该简洁明了，不繁琐。

图形和文字结合

此形式有很好的表现力之余还可以直接把信息告知用户，因为会有一定的内容，所以在空间布局上要注意疏密，避免繁琐拥挤。

IOS 程序图标特性

IOS系统桌面图标与其他移动系统的图标存在非常大的区别，因为IOS图标有很好的整体性，良好的整体性可以减少用户体验上带来的冲突，所以我们需要保持其中的一些特点，以便程序可以更好融入系统中，带给用户更好的应用体验。

尺寸

在不同设备的IOS系统桌面中，程序图标的尺寸和默认自带的修饰效果会有不同，系统默认自带的修饰效果可以使图标更好保持IOS风格，但很多时候为了实际效果，我们可以要求系统不作部分效果的添加，以便达到我们想要的效果。

上传到APP Store需要512px X 512px的图片

在Iphone 960px X 640px分辨率中
图标显示尺寸 114px X 114px
20像素的圆角
4像素的90度黑色投影
2像素的90度白色内投影
默认自带的高光

在Iphone 480px X 320px分辨率中
图标显示尺寸 57px X 57px
10像素的圆角
2像素的90度黑色投影
1像素的90度白色内投影
默认自带的高光

在Ipad 1024px X 768px分辨率中
图标显示尺寸 72px X 72px
13像素的圆角
2像素的90度黑色投影
1像素的90度白色内投影
默认自带的高光

质感

在IOS中，为表现图标的质感，很多时候都会为其添加一些光感，使其更有质感。光是从上面来的，所以过渡颜色的渐变应该是从上往下的。很多时候为表现IOS系统类似玻璃质感般的感觉，图标底部都会带有一个亮度较高的反光，当然这些都是以我们想要的实际效果而绘制添加。

IOS 程序图标设计的构思

为表达好应用程序的作用，我们可以将应用程序的图标作很多不同视觉效果的处理，以达到更好的视觉享受。不同类型的应用要注意表现的效果，如新闻资讯类的应该简洁一点，使其应用有更好的整洁的感觉，如游戏类可以设计得给用户一种活跃的感觉，如一些日常应用类的我们很多时都会将其拟物化，使用户更直观地感受到其作用，这种方法是我们最常见的。

在这里着重说一下拟物化程序图标，这是非常具象去表现程序用途的方法，但有时候要表现的元素存在几个的时候，在狭小的空间中不一定能放下如此多的元素，所以要分析轻重，轻的可以减少占据位置的比例或者将其去除，重的要多作强调，同时，要找到多样元素中的共性。

我们只需找到共性，就能构想出不错的创意。

在图形的构思上有时我们可以利用IOS图标的圆角制作一些特殊的感觉效果处理，如立体感，这些可以帮助图标有更好的视觉冲击力，更容易获取用户的喜爱与点击。

实践分享

说了这么多，下面我们马上来从零开始构思和绘制精美的IOS应用程序图标。

程序名称：MyRange
平台：Iphone
版本：V0.001
出版商：UEDC
用途：LOMO拍照软件

首先说明的是，设计的方法不是唯一的，构思和绘制的方法也是无限多的，那么马上开始！

想到拍照软件，首先会想起的是相机，那么相对应这个软件的图标可以绘制一个LOMO相机作尝试。

很多时我们为了使绘制的物品视觉效果更好，我们需要一些参照物，这次我用莱卡M9来做参照物。在参照物得基础上，进行更多个性化的处理。

为了视觉效果更好，我想其有一点透视的感觉，那么可以利用IOS图标圆角的特征，形成一种立体的感觉。

之后给图标上色，将各大部分大致的颜色分出来

绘制出各部分的质感，应有的皮质和金属的质感，制造金属的可以添加一点杂色

加强光感，光是从90度向下照的，绘制出该有的反光位和两边的过渡转折位，镜头部分局部细致刻画，最后整体调整，完成！

相关话题：iPhone 移动设备的交互和设计源地址：http://uedc.163.com/5294.html

iOS APP体验设计

yx.shawn — 2011-06-17 10:04:02

iOS APP体验设计不像互联网的体验设计那样，有一堆的方法论和可以“借鉴”的案例。目前除了苹果的和前Palm的外，没有找到更好的设计哲学和方法论。

事实上，即便认真地研读了HIG和Zen of Palm，甚至是Oolon Colluphid的哲学巨作你也无法严格按照Guideline设计出一款出色的APP。其原因，我得从程序猿和设计湿说起。

程序猿 vs 设计湿

最被思想处于上世纪初的人理解的软件设计开发是由 1. 美工 2. 程序员 3. 项目经理构成。我这里讲的设计湿不是美工！这是前提。因为美工只关心好不好看，他们几乎不关心（或者不懂）产品的易用性。

如何鉴别程序员和设计师呢？你无法用会不会写代码来区分他们（毕竟很多设计师是会写编程的，例如彩程设计的设计师们，反之亦然），但是你却可以用通过他们平时思考方式来区分他们。

程序员： “哇！这个功能好！我们能不能在我们的APP中加上呀？” 这种场景常发生在他们看到了一个很 “COOL” 很 “绚丽”的APP后常发出的感叹（或者心里的感叹）。

设计师答：“我们凭什么要加这个功能呢？”

程序员更倾向于关注功能本身，希望把所有好的东西都加到自己的作品中。例如，好的设计模式，高效的算法，看似绚丽的特效。一般程序员的作品有两类，第一类是功能比北京的车子还要多，你需要一本牛津字典一样厚的说明书才能搞懂如何使用。另一类有十分绚丽的特效，界面飞来飞去，一走神就以为自己在耍杂技了。

设计师更倾向于关注产品整体，他们通常都有产品的功能洁癖。他们通常会从摄影中找到共鸣：一张好的照片有三个要素 1.有一个鲜明的主题。 2. 画面中的元素可以快速地把观众的注意力转向这个主题。3. 只有一个主题，所有有主题不相关的重点通通砍掉。

不幸的是，很多iOS的开发者是从程序猿跳出来做的。泪流满面地用咆哮体高喊 “我们程序猿也终于可以赚钱了！！！有木有！！！有木有！！！” ，于是他们做出来的东西可以用下图简要地说明：

没错！问题不在于功能是不是足够的多，而是体验是否足够的好，是否能解决问题。而尤其在做iOS的APP设计的时候，由于设备的本身特点直接决定了设计完全不同于网站的体验设计。

我们认为，主要区别有以下三点：

1. 视觉焦点&操作焦点

所谓视觉焦点和操作焦点的问题，我们可以从传统的电脑使用说起。我们控制电脑通常是通过鼠标，手用鼠标控制屏幕的指针，移动到某个位置，点击、双击、拖动等完成操作。我们看到的是屏幕，操作的是鼠标。我们的视觉焦点是屏幕，操作焦点是鼠标。属于视觉焦点和操作焦点不同的类型。

而有触摸屏的设备和电脑最大的一个区别就是它们的视觉焦点和操作焦点是同一个点。因此，我们想打开一张图，只需要用手点一下图。

视觉焦点和操作焦点同一的最大好处就是十分容易学习使用这类设备。但是正是因为两点同一，当我们在操作的时候同时也会挡住焦点。

这一特性会影响到很多UI设计，例如：拿出你的iPhone，把手放在iPhone上，你会发现你的iPhone最大宽度也就4个手指的宽度。

我们用圆圈代表被挡住的区域，其中绿色区域是安全区域，代表我们心理上认为一定可以准确地点到的区域；而黄色区域代表我们心理上会有点忐忑，不能确定是否能点中的区域。例如某拍照软件的设计：

没错，问题不言而喻。从UI的设计上来看，如果是个网页的话，视觉的确没什么问题（当然，删除按钮放在修改的旁边本来就是愚蠢的做法，这一点就先不说了）。但是由于视觉焦点和操作焦点同一的原因，点击修改就变得十分困难与紧张，何况旁边还是一个删除按钮。

2. 空间感知

传统的互联网网页间的跳转，我们都熟知的是利用链接。链接可以在整个网站甚至是网站间任意跳转，点了链接后就进入了一个全新的空间。空间感知为网状的，没有头没有尾，在任意一个点通过网址都可以进入。

在移动设备的应用程序设计中，进入APP通常都是一个固定的点，每个操作就带入另一个空间，如果失去了空间感知，就像失去了地图，用户会很容易有迷失的感觉。

而由于屏幕的大小等因素，APP不能直接告诉用户空间是什么样的，但是可以通过各种手段来给用户以暗示。例如：

Camera+中，两个主要的场景，一个是拍照，一个是照片管理。两者之间空间是上下的关系，当用户在拍照场景下点击相册时，界面会向上推动显示照片管理的场景。反之亦然。此时向用户暗示的场景如图所示：

更复杂一些的空间暗示，如Reeder iPhone版。空间中的每个位置十分清晰，并且用动画的方式流畅地向用户暗示这种空间感。不仅如此，Reeder iPhone版的加星去星的空间感知不是上下左右，而是前后的关系。请自行购买后体验。

除此之外，Reeder iPad版本和Our Choice的空间感知也做得十分的棒。以Our Choice和Reeder iPad为例（视频）。Our Choice在选章节的场景进入章节内文时，选章节的场景会缩小，通过“近大远小”的常识在一个平面内暗示两个场景间的空间关系。 Reeder 也采用了类似的方式。

Popout

3. 体位化设计

以iPad为例子，通常我们使用iPad的时候有两种体位，第一种是把iPad放在桌面上进行操作，这种体位使用APP，无论按钮在哪里，点击都需要用一只手完成，两个步骤间的按钮距离远近也不会成为负担。而当手握着iPad的时，这种特殊体位，问题就出现了。

（如果你有手机，请现在拿在你的手上）倘若你只希望用一只手完成操作，你会发现，你用大拇指点击屏幕中所有点，却只有绿色区域是很易点击的。如下图所示，iPad的易操作区域也是分布在弧形区域内。

接下来用一个视频还说明坏的体位化设计和好的体位化设计的区别。

前半部分坏的体位化设计，是因为设计没有考虑到操作姿势，以至于左边一排不常用的功能占据了最重要的黄金区域，而常操作的区域却远离易操作的区域。操作起来就比吃掉一只死苍蝇还难受。而后者，好的体位化设计，所有的常用功能，一只手，不需要太多移动就可以全部完成：上篇文章，下篇文章，标记未读，标记加星。

Popout

当然，如果你是我们《牛壹周》的忠实读者，那你一定记得我们的风火轮（详见牛壹周1.2之无敌风火轮）和一阳指(牛壹周1.1更新手记)？没错，我们坚决地去掉了一阳指，因为这是一个漂亮却难用的设计（至少不是一个好的体位化设计）。我们在架构上保留了风火轮（当然，只是在程序中保留，但并未启用），因为这是一个很好的体位化设计案例。例如，在阅读杂志的时候，我们常要翻下一篇文章，传统的操作是先进目录，然后再找到要看的文章，再跳转。而使用风火轮，如视频所示，你的手完全不用离开屏幕，无论你的手有多大多少，无论你是左撇子还是右撇子。

Popout

在即将发布的iOS5中，iPad的键盘设计也很好地体现了所谓体位化设计的精髓：

结束语

iOS设备，甚至是包括Android在内的所有移动设备，他们都因为独特的使用场景，似的设计不同于网页设计。很多“美工”，甚至程序员从网页设计转变角色来设计移动设备APP时常忽视这些隐形的因素，最终导致产品设计水平难以提高。如果说近年来交互设计师在网站设计中的地位越来越高，那在移动设备的设计中，他们的地位会更为重要。视觉焦点/操作焦点、空间感知和体位化设计这三个iOS设备的特点事实可以类比到Android甚至更多的设备中，当然也不局限这三个特点。

当然，也正是因为这些原因，当我们听到别人兴奋地告诉我们：“哇！HTML5可以做到所有设备自适应ye~”的时候，我们通常是不屑，心里默想“程序员！”。当然，这里并非贬低之意。只是，有一点不得不承认，不同尺寸的设备，不同的分辨率，若想获得最好的体验，“自适应”让机器适应了却让人难以适应。例如一个按钮本来有1厘米高宽的，一个自适应，在iPhone上就只有原来的1/3时，你叫人怎么点击？当然这样的例子很多。大多数这种不花功夫还大赚的宣传，就犹如电线杆贴满的小广告，通常都是缺少优质应用的病入膏肓的硬件厂商为了快速解决痛楚而买肾的做法。当然，对技术敏感的工程师就不自觉地帮着一起吆喝罢了～

我们彩程设计对移动设备还会持续观察思考。更多的设计方法和哲学会持续和大家分享。敬请关注。

相关话题：iPhone 源地址：http://blog.mycolorway.com/2011/06/16/ued-for-ios/

iOS的隐性导航设计

耗子吴 — 2011-10-03 12:26:43

移动设备阅读类软件最重要的特性之一就是尽可能的增大阅读面积，为此，就必须尽可能的让屏幕中的导航占到最小，甚至隐藏，手机浏览器也基本属于阅读类软件，最近流行的海豚浏览器甚至将电脑中的“鼠标手势”引入到手机浏览器中。

什么是隐性导航

下图是iOS中read it later软件的阅读界面，除了最上方的状态栏，阅读区域占满了整个屏幕，没有任何诸如“返回”、“关闭”的导航按钮，实际这些按钮是隐藏着的，我把这种隐藏看不到的导航称之为“隐性导航”。

read it later 阅读界面

常见的隐性导航

下拉刷新

最流行的“隐性导航”要数“下拉刷新”了，这个最早出现在twitter客户端的下拉更新timeline功能迅速在此类软件中流行，iOS下网页版的gmail，新浪微博，甚至网易新闻，都使用了这种设计。

网易新闻客户端的下拉刷新

左右滑动

让人印象深刻的还有UC浏览器的前进后退功能，后退只要拇指向右滑动，前进只要向左滑动手指即可，不必寻找前进后退按钮，这种设定下浏览器全屏也不会影响操作的流畅性。

类似的设计有很多，在yReader下左右滑动是切换前一篇后一篇文章，在iBooks、QQ阅读的电子书阅读软件左右滑动是前后翻页。android下的QQ客户端的当前会话、好友和群组分别是三个标签，左右滑动可以从这三个功能区中迅速切换。

QQ阅读的左右翻页

双击、长按、返回顶部等

在最上面read it later软件中，双击屏幕是弹出底部操作导航菜单；在android中长按一般会出现弹出菜单（像是windows下的右键菜单）；在几乎所有iOS的软件中，点击顶部的状态栏是快速返回顶部（这个好像是系统级的，不信你试试），还有基于屏幕不同位置的点击呼出不同功能，其他的隐性导航设计方法还有很多，不再一一赘述。

设计原则

友好提示

隐性导航是看不见的，那么必须有教程或提示用户如何使用这些功能，一般这种提示只出现在软件第一次使用时。这些提示尤为重要，当用户看着全屏的文字找不到返回时，可能就慌乱了，多次尝试仍没成功的话极有可能就按下home键，强行退出，甚至直接将软件卸载。

QQ阅读的提示

避免冲突，前后、左右，全局统一

iOS下我见过的最漂亮的阅读软件是ZAKER，windows phone7的方块式小清新界面，同时集成了新浪微博，GoogleReader的绑定，目录像flipboard精心设计版面的杂志，图片多时可以像图集一样幻灯浏览所有图片。

它隐性导航设计中双击文字区域是关闭，如果不小心碰到图片，就将这张图片单独打开了，这可不是用户想要的。如果浏览的是微博，到顶部后向上滑动是加载最新，浏览的是订阅的rss，到顶部后再下拉就是返回文章列表，同一软件中相同的手势竟然不同的结果，无疑增加了用户记忆的成本。

上和下是对应的，左右是对应的，如果手势左划是向左浏览，那么毋庸置疑向右就是向右浏览。在腾讯爱看中，在文章列表，向左滑动是查看订阅频道，向右滑动是无效操作，在文章页，向左滑动还是查看订阅频道，向右是查看评论。这两者毫无关系而且反馈不同。

在网易阅读中到顶部是“下拉刷新”，到底部却是“点击后显示下面20条”，你就不能做成上拉后加载后面20条？我不得不说，刻意的模仿，不懂的举一反三。说秘密软件中同时采用了“上拉刷新”和“下拉加载更多”。除了统一，这样做最大的好处是保持了手的姿势。一般手握手机是单手，拇指操作屏幕，上拉和下拉保持了原有的手指状态，点击操作需要拇指抬起再按下，点击后又得回到上下滑动的状态。

心智模型、用户习惯

滚动条的目的是方便快速定位同时体现当前位置和页面长度，reader it later中，当页面滑动时才会出现细长的滚动条（不会遮住阅读面积，只用来指示当前位置），当拇指指在屏幕右侧滚动条的位置时，滚动条会变成下面这样又黑又粗，方便手指滑动和定位。在PC上，用户习惯是鼠标滚轮（触屏上相对于上下滑动），想快速跳转时，就是直接鼠标拖滚动条，那么在手机上用户想快速拖动的时候首先想到的必然也是拖滚动条，但在大多数手机软件中，滚动条是不可拖动的。

reader it later的滚动条

降级策略

并不是所有的软件都适合隐性导航，软件给用户呈现的第一印象是导航清晰、简洁、易用才能赢得用户的好评，隐性导航因其隐晦、难以记忆的特点，一般适用于高级用户，所以应提供一个可选降级策略：比如在设置加上全屏浏览选项，让用户自己选择是否隐藏导航栏。

基于iOS平台的阅读应用简介

00 — 2010-11-30 00:07:05

iOS4.2发布在即，大家对新版本的Multitasking, AirPrint, AirPlay等新特性充满了期待。等待之余，除了在iPad/iPhone上继续切蔬菜、打小鸟，我们不妨来看看移动平台上越来越受人关注的阅读应用。

一、移动阅读设备的演进

说到移动阅读，还是有必要先回顾一下移动平台的演进。

via

移动电话的发展经历了这么几个阶段：Brick Era（大块头手机），Candy Bar Era（功能有限的2G手机），Feature Phone Era（功能手机），Smart Phone Era（智能机），Touch Era（触屏机）。而书籍的载体更是变化巨大：

via

不论是移动电话、电子阅读器、平板设备，可供移动阅读的设备都越来越轻巧，僵硬的机械感离我们远去，取而代之的是更贴近自然实物的材质。而且，人与界面的互动更加直接。

二、移动阅读的新宠——iPad

回想起年初乔帮主在发布会上演示iPad时，多少人惊呼：新的电子阅读时代到来了。一年快过去了，iPad的表现如何呢？

2010.10.18苹果第三季度财报显示，iPad三季度销量达419万台。摩根斯坦利11月1日表示，保守预测明年iPhone和iPad销量分别为5,500万与2,500万。

尼尔森的调查显示，iPad用户花费在内容上的时间的确更多。付费的iPad应用中，与阅读相关的书籍应用、时事新闻应用、娱乐新闻应用、杂志应用排名靠前。

更多的iPad使用情况，可以查看Business Insider的最新数据。

三、基于iOS的阅读应用

我们来看看一些常见的iPhone和iPad的阅读类应用：

这些阅读应用大概可以分为5类：

（注：其中Paper.li和QQ阅读是web应用，不是iOS应用）

3.1 单阅读应用

由内容供应方针对自己的内容服务所设计、开发的阅读应用，主要面向已有的读者群体。

优势：

自身提供内容

有固定用户群

易于对内容进行统一设计

局限：

内容有限，不够丰富

目标用户群较小

原有业务的简单延伸，扩展性弱

3.2 RSS/媒体聚合应用

应用提供方自身不生产内容，仅提供feed抓取、内容聚合、阅读的应用。

优势：
内容来源丰富
业务模式简单、成本低
易于对内容进行统一设计

局限：
新用户学习成本高
转移成本低
信息量大、噪音大
依赖于其他聚合阅读服务

3.3 社会化阅读应用

从已有的社会化服务中抓取内容，版式化设计输出，以提供更好的阅读体验

优势：
现成的内容 + 关系
易于对内容进行统一设计
互动性、拓展性强

局限：
依赖于现有的社会化服务
内容碎片化，难以组织
对信息过滤、筛选、去重的要求高

3.4 电子书应用

提供电子书的搜索、下载/购买、阅读服务

优势：
盈利模式清晰
基本不需要对内容进行加工、管理

难点：
必需有稳定的内容提供来源
版权问题
利益相关者多，关系复杂
涉及购买、支付环节，功能复杂

3.5 电子阅读平台

提供电子书、报纸、杂志等的搜索、下载/购买、阅读，整合内容、渠道、硬件、软件和服务。

电子阅读的产业链构成比较复杂，深度参与甚至控制了产业链大部分环节的亚马逊和苹果，是最具影响力和盈利能力的企业。

优势：
平台的规模效应
强而有力的商业模式
大量的用户和市场需求

难点：
疏通整条价值链
初期需要投入很高成本
理顺错综复杂的利益关系
庞大的产品、合作、交易体系

到了平台阶段，最重要的已经不是看得见的产品形态和功能，而是商业模式和产品逻辑，以及在整个产业链中能够把握的价值和产生的影响。
===================================================================

以上只是对iOS平台的阅读应用做了一个简单的分类。关于移动阅读、电子阅读的话题，欢迎大家一起来讨论。

By 00

相关话题：iPhone 源地址：http://uedc.163.com/3511.html

iPhone应用设计趋势

UCD翻译小组 — 2009-11-28 00:57:26

iPhone App Design Trends
Smashing Magazine版权所有
作者：Smashing Magazine
译者：UCD翻译小组，波希米亚
原文地址： http://www.smashingmagazine.com/2009/10/09/iphone-app-design-trends/

在过去的两年里，你能想象的一些很烂的应用设计也入驻了优雅的iPhone。通过它周边的宣传，使得世界各地的设计者们都利用这个新的移动工具来一展身手。结果虽搞出了成千上万的iPhone应用，但通常不好用也不直观。然而有些设计师则是花费大量时间为创造更好用的界面而努力着（是的，这些都是好用且有创意的界面）。

本文探究了如何让设计师利用图形元素和屏幕交互，制作出易识别又易操控的iPhone应用。目的在于揭示iPhone应用设计的普遍趋势和设计方法——请注意，这些未必是设计和可用性中的最佳观点。

1. 镜像iPhone原生界面元素

“告诉他们你要告诉他们的，去告诉他们，然后告诉他们你告诉过他们。”（译者：作者在表达她当时的感受吧）在你的应用中创建一套新的OS可能很有趣，但在移动设备上处理时，人们只想简明扼要。简明扼要的意思是，设计师得遵循OS的流程，创建一个无说明的应用，给最终用户去操作。镜像出用户熟悉的布局和界面元素可以节省时间和精力。所以这看起来是设计iPhone应用时的一个便利途径啊。

Facebook (iTunes Link)
在新版Facebook 3.0中，你会发现这样一个栅格布局，用户可以通过左右滑动屏幕进入更多分类。因为它镜像了苹果的原生界面，所以用户根本不用再学如何使用。网页设计中存在类似方法：用户会预料到logo在左上角，导航也在上面，等等。Facebook把这它延续到了移动应用上，用大按钮可以轻松的被识别和点击。

Where (iTunes link)
Where使用了相同的概念，它允许用户通过左右滑动屏幕来获取更多信息。

Tweetdeck (iTunes link)
Tweetdeck是用户界面设计中一个很好的例子。高亮显示的最近更新多吸引注意力啊。此应用能以归类或标签列表形式，在新窗口中显示更新。但不会替换掉一个已显示的对话菜单，它可以作为跳转到具体类目或清掉消息提醒的跳板。

2. 简化界面

也许简化用户界面听起来像是个机械任务，但在用户界面设计背后又隐藏着什么呢？答案很简单：就是用户。用户需要什么？什么令他们感到友好和模糊？你如何提供他们所需的东西，以便不用时刻去关注那些重要的信息？

提到在小空间内展示大量核心功能，Facebook的第一版就做的非常到位。当然，这里指的是展示所有信息和拥有直观的界面。3.0与之相比，你会发现它使用“跳板”的方式来简化界面，既保持了直观又维护了功能。

Flickr (iTunes link)
Flickr 对功能、视觉设计和小屏幕移动设备显示这三者间平衡上的处理同样出色。试想之：Flickr的核心是什么？照片。它的用户或许不希望看到又大又笨的导航；他们想要的是照片。Flickr已经设法调整核心功能，去掉那些标题和该死的导航。事实上，很多导航元素已经在照片本身的交互上实现了。真是个既简单又聪明的办法。

3. 模拟硬件界面

不少应用程序打破了传统iPhone界面的操作，利用它独特的手指手势进行控制。它们中一些是用户熟悉的硬件界面，光鲜亮丽的外表不禁让人回味起那种第一次点击的新鲜感。但应用程序不会因为你玩的多而变脏。

Convertbot (iTunes link)
Convertbot的轮盘让我们想起小学时候，不同的是它更具特色、更新颖、更有创意。

Little Snapper (iTunes Link)
Little Snapper模拟的就是一台普通数码单反的旋钮。

iHandy Level (iTunes Link)
iHandy Level的样子和功能都仿至一个真实好用的水平仪。

Where To? (iTunes Link)
这个应用看起来像是属于奔驰车的。豪华的皮革、磨砂的按钮：上乘的技术。我们可以想象，每个按钮按下去都那么结实，都那么有力道。

4. 丰富、漂亮的列表视图

当你对列表设计的最新趋势感到兴奋时，你已经被确诊为一位“geek designer”了。人们遇到一个列表时会做些什么？当然，只是略读。那怎样把人们决定什么有趣变得更轻松？没错，更多的视觉暗示！

基本上，用户通过寻找下一步的快照，来决定是否需要了解更多。而又大又漂亮的按钮就是途径之一。通过色彩、图标和排版让人感觉这个大按钮背后隐藏着好多信息。

Delivery Status Touch (iTunes Link)
看看Delivery Status是怎样通过不同颜色的大按钮来区分不同品牌的。并用良好的排版建立起信息层次。

Be Happy Now (iTunes Link)
Be Happy Now的大按钮通过柔和的色彩体系与明亮清晰的字体传达“be happy”的主旨。

Next Read (iTunes link)
Next Read这个应用允许在朋友间分享图书。在这里所有书都是关于时下某一特定话题的，包括书名、封面、评分以及评论数。注意看每个导航选项的间隙和留白，它让这个区域更容易被点击。

Nike (iTunes link)
Nike为女性开发了这个应用，精致的视觉元素和插画都很符合它的品牌。在设计上打破了传统界面的束缚，充分表达了品牌，不让用户为如何使用它而感到困惑。

Borange (iTunes link)
Borange是一款“社交情况”的应用，它可以帮你统筹与朋友们的约会。列表展示了很多信息：要一起出行的朋友，本地会议，并可以形象的表示哪个朋友有空。

5. 分层的界面

一些应用把界面设计成层，利用iPhone本身独有的特性让其固定，或垂直、水平滚动。这种方法有几个好处：

减少了必要的传统导航元素数量（即更少的按钮有助于避免界面混乱）
为用户获取信息提供了快速通道
有更多屏幕空间承载有用信息

Tweetie (iTunes Link)
Tweetie利用层把具体信息传递给你每位Twitter好友。你看，所有信息都装在这一个屏幕里！

Barnes & Noble (iTunes link)
Barnes & Noble让你可以快速的通过上面的层进入新商品，通过下面的层切换到更多分类。

USA Today (iTunes link)
USA Today在它的图片一栏中对层做了细微改变：利用滑动面板显示信息区块。尽管第一眼看上去很乱，但能很容易跳过它。最有趣的部分在于，在每个面板里，都可以通过左右滑动来查看更多图片。

myPantone (iTunes link)
我们何尝不希望色卡少一点？上面的拾色器就是一个层，你可以通过色彩范围、类别来取色，也可以通过滚动打开/关闭细节窗口。

6. 在列表中使用图标

在小屏幕上，图标可给应用的可用性和导航性带来巨大提升。让我们通过几个应用的例子看看它的优势。

iStudiez (iTunes Link)
这个应用利用各种不同的教学用具图标，清晰地表达了应用的目的。通过这些具象的暗示，学生瞄一眼就知道今天发生了什么。

Top Floor (iTunes Link)
Top Floor利用简单易识别的图标，快速引导用户进入他们选择的类别。

New York Times
应用可以让你想做什么就做什么，是不是很不可思议哦？对于一个像纽约时报样的应用，用户必然有他喜欢的章节。你猜怎么着？纽约时报这样做：它让你自定义标签栏，把你喜欢的章节都加进来。拖动一个图标到标签栏即可。不过这样做也不是十全十美，在视觉呈现上打了折扣。

Filemaker(iTunes link)
另一个漂亮图片的案例，说它好是因为图标的使用上不混乱、不混淆。设计师永远不要为了使用图标而使用图标。作为设计师，我们希望图标能够尽可能的反应出用户所选的内容。Filemaker，干的漂亮。

7. 插图的使用

依赖图形的应用程序越来越受欢迎，因为开发者试图让她们的应用与众不同。偶尔奏效，但不经常。越是传统的设计就越可能存在可用性问题。在推出一个“有创意”界面的产品前一定要进行可用性测试。

Magnetic Personalities (iTunes link)
这是个非常好的例子，看看如何让按钮变得不像标准按钮那么普通。

SugarSync (iTunes link)
这个界面可以轻松地走遵循传统列表视图的路线。但设计师没有这么做，而是通过一个漩涡将视觉连接在一起来传达这个应用。这很不寻常，同时需要花点时间来适应它。

Mom Maps (iTunes link)
另一个使用插图取得成功的例子，它将很多概念都融入了这个应用。

8. 使用手势

经典的线性导航看上去很枯燥：一个按钮连一个按钮，来表现一堆东西的列表，或表现这样那样的交互。事实并非如此壮观，只是比喻一下。在公共事业的应用上使用有创意的交互可能性很大。

Mover (iTunes link)
Mover列举了如何使用手势来分享联系方式、照片和书签。打开两个设备，把文件从这个共享到那个里。

ABC Animals (iTunes link)
这个应用寓教于乐。用手指在屏幕上书写字母是另一个通过触摸iPhone控制的例子。

All Recipes (iTunes link)
此应用可以让你通过手势来混合众多元素，作为你的美餐。

解读iPhone平台的一些优秀设计思路

小玉 — 2010-06-23 23:14:26

本文试图从iPhone的角度结合一些iPhone平台项目的设计经验提炼出iPhone平台的一些优秀设计思路，以供大家在做移动互联网设备设计时参考。

1、移动互联网设备和传统手机的区别

在传统手机时代，标准的通话键、挂机键、菜单键是手机的标配，用户被教育成了用键盘来操作数据，于是我们就养成了使用键盘的习惯，经典的案例就是诺基亚主导的时代。

在移动互联网时代，特别是触屏的大规模应用，手机的功能已经发生了转变，对互联网内容的浏览、下载、消费等等成为主要应用场景，触摸屏成为行业趋势，直接对内容进行操作，在屏幕范围内的点击成为主要的操作。绝大部分操作通过直接和内容交互完成，不要让用户通过中间设备间接进行控制。

因此，就可以理解为什么苹果会这么激进，只保留了一个home键，而将其他功能性的操作全部做在了屏幕里面。

在底部的几个按键的处理上（返回、菜单、home、搜索），Android的做法似乎介于传统手机和iPhone两者之间，既保留了传统手机的一些特性，但也在学习iPhone的触屏做法。从苹果遵循极简的设计思路来看，iPhone做得更彻底、更加极致一些。

2、高度直觉化的界面

苹果采用了隐喻等方式来暗示用户这里的操作，目的就是降低用户的学习门槛，使用户第一眼就知道怎么去用iPhone，典型的案例就是锁屏界面的解锁操作，以及缩放照片的操作。

iPhone采用了全触屏的操作方式，绝大部分操作都通过直接触摸完成，仅提供一个home键的实际按键，这种做法配合multi-touch技术，无论是完成一个任务还是体验游戏，操作都最大程度简化了用户的操作路径。

为此，iPhone还提供了各种丰富的手势，基于此，开发者可以创造丰富的操作体验。比如：tweetie 2

3、在需要时给我导航，且告诉我将去向何处

在iPhone平台上，如果应用程序有信息层级关系（比如邮箱>收件箱>邮件），利用title进行导航，导航栏左侧始终是返回按钮，右侧如果有必要，可以放针对内容的操作控件，中间有标题。

对这里的导航按钮来说，始终只有返回上一级的功能，且明确指明上一级的title是什么。

那么，另外一个问题是 如果这里的信息层级太深怎么办？是否需要给出返回首页等按钮或者更长的面包屑路径，这里需要考虑的是怎样减少程序的信息层级而不是一味地去将这里的导航复杂化。

iPhone提倡直接对界面元素进行操作，返回上一级也是如此，无需通过其他物理按键来切换页面，你所需要做的事情就是直接在屏幕上点击。

Navigation Bar

4、稳定的界面结构——tab bar，toolbar的位置

iPhone典型应用的界面结构很稳定，导航栏和页签栏的位置不会因为应用不同而发生变化，用户能形成比较一致的体验。

Android平台在规范性方面不如iPhone，比如：

a) Andorid对标题的处理方式比较奇怪，有的程序有标题栏，有的地方没有，不符合一致性原则；另外，还存在大小两种尺寸的标题栏。

b) tab bar的位置。有的应用放在顶部，有的放在底部，体验不一致。

另外，对手持设备来说，关注焦点是从上而下的，tab bar的关注点没有内容那么高，其实只是在需要的时候可以方便地进行切换就足够了，放置于顶部对于手持设备来说操作很不便。

5、一次做一件事情，避免一个按键承载太多的功能

Android的菜单键是一个全局按键，使用频率比较高，根据不同的场景功能又各不相同，用户较难形成一致的体验，系统级的菜单和上下文菜单也容易让用户混淆。

苹果的做法是将菜单里的功能进行分解，重要操作用户可直接操作（如通讯录的添加联系人，iPhone是直接放出来，Android是将其放到菜单里面），其他操作或集中在设置或通过滑动等交互方式进行扩展。（tweetie 2是将针对当前联系人的更多操作通过滑动的操作展示出来）

6、增强用户体验

iPhone在增强用户体验上有很多点值得学习。比如core animation提供了大量优雅的动画可以直接使用，以实现华丽的动画效果。

为什么用动画？

在整个界面转换的过程中，苹果会添加一些动画元素，作用有三：

a) 缓解用户等待的焦躁情绪，如：经典的程序登录界面动画。
b) 暗示用户当前界面的来源。如：有信息层级关系的左右切换动画。

c) 增强用户体验

用什么动画？

界面常用的几种动画:

a) 有信息层级关系的采用左右切换动画。
b) 针对当前视图内容的操作常用的采用model view的从下往上升起的动画。如：写邮件，action sheet。

拟物化设计

除此之外，还有声音元素、透明设计等其他手段以提升用户的使用体验。

版权所有 © 2008 - 2010
您看到的文章来自腾讯CDC博客 http://cdc.tencent.com ，原文链接为 http://cdc.tencent.com/?p=2690 ，转载时请注明出处。

“突破”平台UI膜拜-由iPhone想到的

hdzwzmj — 2010-11-08 19:52:12

之前看到一篇文章，讨论iPhone 交互设计和Android交互设计的一致与不同，它强调平台本身的特性，不要照搬其他平台的UI设计，让用户感觉是在真正的使用一个android软件。

I think everything here is very relevant, and let’s keep them in mind.

我想到了我们的设计创新，设计师的设计意识形态来源，遵循平台的一些UI特性，但“突破”更在平台之外…

以上两图显示的是进行TAB排序的不同方法，虽然YouTube这种设计方式很优秀，但YELP也不错，这两种不同的具体设计方式（我想可以称之为设计等价式）同样达到了功能需求，而YELP这种设计方式更在平台UI之外，即使我们在web页面，甚至在android平台看到这样的方式也不足为奇，更谈不上谁抄袭谁，谁照搬谁，只要是好的设计方式和设计特性，我们都可以去粗取精，合理应用。

（当然YELP这种TAB调整方法也存在一定的问题，在Usability of iPad Apps and Websites http://www.nngroup.com/reports/mobile/ipad/ 49页有详细的解释）

使用过大量的iphone平台客户端，再回头看看iphone官方出的 iPhone Human Interface Guidelines关于iphone设计组件的介绍，似乎这个百来页的文档更容易让设计师缩手缩脚，以为这样就是iPhone，遵循这样的诸如picker，slidebar，web view 等设计方式才是真正的iphone…

在具体的设计过程中，每当提出一些设计方案，来自其他设计师或开发人员的质疑竟然都是：有没有这样的设计，我想iphone这样做不太符合固有的一些规范…

我想完全错了，它只是一个基本的不能再基本的规范，数以十万级的iphone客户端各出奇招，将iphone本来的基本设计规范演绎的精彩纷呈就是最好的证明（虽然这些客户端中有些设计的不怎么样，还有相当多的客户端将UI演绎到了极致）。

Central是一个非典型的单窗口应用程序（alian cooper about face 一书中有关于单窗口，多窗口应用程序的分析，虽然是针对web应用，但对手机是同样的道理），几乎所有的操作都围绕地图进行，在展示地图层级的方式上，central没有使用Picker（实际上也不合适使用，具体可参看iPhone Human Interface Guidelines中的介绍）或者Table views，而是独辟蹊径弹出一列行为（图标）进行选择，不同的行为（图标）产成不同的结果在地图页面展示，几乎不需要任何的用户短时记忆便可顺利完成。

Central搜索功能，Location功能更是让人眼前一亮，如果我们死扣所谓的“UI Guideline”，恐怕我们根本没有办法将如此丰富的功能恰当的安排在320*480的舞台上，这些功能松紧有度而又先后有序，谁能说这种优良设计是iphone平台的专利？

直到现在从事iphone或android 设计，更多的人（甚至包括一些设计师）更愿意看到已经存在的“设计样本”才会结束原本“创意设计”的争论，真是设计“突破”的大敌。

点击头像显示的更多操作，MSN的处理方式相当的巧妙，操作的前后承接给用户的引导恰到好处，whrrl的notification机制并没有使用传统的badge，而是在首页以弧形截面标识出来，当有信息进来的时候，弧形截面就显示为橘黄色以来提醒。

基于SNS的网站以及最近成为潮儿的微博，都有一个很重要的模块：好友或关注的人的动态表单，因为这个动态的更新速度非常的快，不可能保存在本地让用户逐一阅读（实际上这些动态不见得都是用户需要的），有一个非常好的设计策略就是显示最新的几十条，如果查看旧的动态（相对新的而言），就点击更多，当然可能当前查看的过程中，又有许多新的动态，但是没有加载到当前列表中，就需要刷新，上图呈现的微博（新浪，腾讯）根据 iphone固有的UI特性（滑动到列表的底部开始缓冲，这个和一些显示的物理现象非常贴切）以及从上到下的自然顺序（习惯性的认为上面是最新的，下面是最旧的，这是习惯用户，可参考Do not make me think一书关于习惯用法章节），产生的聪明设计“下拉刷新”，对于寸土寸金的iphone屏幕，合理显示且平易近人。

这种聪明设计并不是iphone的设计专利，在具有同样使用习惯的android平台上也一样可以使用，只是使用方式有所差异（android平台并没有滑动列表到底部缓冲的习惯，所以刷新按钮和显示更多按钮需要显性的出现在列表的起点和终点而不是像iphone通过下拉操作完成刷新，所以可以藏起来）

Page indicator是多个页面进行滑动切换的标识，是iphone平台的一个聪明设计组件。

上图显示的appstore对某个产品进行介绍，产品图片的浏览模式，恰当的使用page indicator，一方面防止过多的图片累加导致页面过长，另一方面在初期获取数据的时候也适当的缓解了服务器的压力。

右图是手机QQ浏览器1.2的首页面，将快速链接以page indicator的形式来组织，恰当利用了iphone用户的使用习惯，应用非常的巧妙。

而whrrl将page indicator干脆放在了导航栏作为标题的一部分，我不假思索就非常清楚左右滑动可以轻松切换至其他页面。

相关话题：iPhone 源地址：http://www.ucd-grow01.com/?p=207

iPhone App的特点及基本设计方法

江洋 — 2010-12-03 15:19:14

iPhone App的特点

iPhone有自己的特点和气质，因此他的App不同于其他键盘手机甚至Android这种触屏手机。

首先iPhone只有一个物理按键Home，而这个按钮主要是在系统级操作上起到一些作用，在一个应用中，绝大多数情况都是退出功能。在480 x 320这个对手机而言很大的屏幕上要包括以下3个模块，才能对一个App进行操作。

1、虚拟键盘

iPhone虽然与Android同为触屏，但没有物理键盘(而Android有可能有物理键盘)，所有的输入操作都需要屏幕中的虚拟键盘来实现，同时需要考虑虚拟键盘的遮挡问题。

2、目录导航

没有物理按键做为目录菜单的呼出功能，完全不同于Symbian和Android系统，包括导航也需要屏幕中的虚拟按钮来实现。

3、功能操作

需要把所有的功能集成在App中，比如我们可以用Tab bar来做功能的分类，工具栏来做具体视图的功能操作集合。

我们再来看看用户对iPhone的使用习惯

显然支持单手操作并不是iPhone应用的特性，当然也有一些游戏需要双手进行(沉浸式应用)，但因为iPhone有一块非常灵敏支持手指多点触控的电容屏，所以手指直接在屏幕上的操作更加直观和更具操控感，不需要任何中间设备(按键或是鼠标)来控制。

1、自上而下的操作：

用户多数情况下会如上图的姿态，一手握机，大拇指做为主要操作和点击手指，我们可以看到不管是iPhone系统应用还是很多其他的优秀应用，大多使用很多的列表，因为拇指在滑动列表时会非常顺畅和方便，而且操作速度非常快，所以很长的列表不会成为iPhone应用的障碍，这与其他手机平台上的特性不同，更何况在表格的情况下，单击顶部的状态栏可以快速回到顶部。

2、减少输入

这与《移动设备交互设计》书中的一些观点一致，即对于手持设备我们要尽量的减少用户输入，特别对于iPhone这种虚拟键盘而言，即便电容屏再灵敏，对于每次都准确的触动面积很小的虚拟键盘也并不是一件轻松的事情，我们要尽量使用选择器，或是输入提示suggestion来减少成本。

3、足够大的按钮面积

对于iPhone这块电容屏来讲，虽然很灵敏，但接受的感触面积并不小，且用户又是直接用手指操作，所以我们要对应用中的所有按钮要适合指尖来操作，跟据官方给出的设计指导，44*44pix是一个较理想的面积。

4、多点触控手势

相对于设备的软硬件来说，手指总是保持可用，它是人体的一部分，可以灵活的做各种动作，而且直接触控屏幕非常直观，且用户也非常愿意使用这些看上去很酷手势动作，比如可以对图片用两个手指拉开来放大，合并来缩小，直接拖动来调换顺序，摇晃来进行刷新等。当然我们要考虑这些手势在不同应用的不同使用场景，不要滥用。

总之，iPhone应用的是线性的，连贯的，直观的依赖滑动操作，手指点击，以及各种手势给人很酷的感觉。

iPhone App的基本设计方法

1、iPhone应用的分类

1) 高效型

这类应用可以帮助用户快速完成一个任务，注重内容的组织逻辑功能和信息架构的展现，以方便用户快速高效的使用，最终完成任务。此类应用一般包含大量的列表及每个列表中的任务功能。最典型的就是系统自带的“Mail”应用，这是一个非常典型的高效型应用。

此类应用给用户的感觉是层层进入，内容逐步具体化，直到可以完成用户的任务。

另外一个非系统应用且典型的就是QQ，可以看一下是不是也遵循这个特点。

2)实用工具型应用

此类应用一般交互操作非常少，也没有很深的层次结构，往往都是直接了当的展示信息，一般会在“背面”(通常会有一个翻转的效果)展示设置功能。最常见的就是“天气”和“股票”两个系统自带的应用。

3)浸入式应用

大多指游戏类应用，但也有一些实用工具，比如电子罗盘，所谓浸入式应用一般是全屏模式，专注一个任务或是娱乐的深入体验，没有过多的文字，而将用户的注意力放在如何使用它。

2、设计iPhone应用

1)iPhone应用的基本结构

状态栏：这是ios系统的一部分，除了浸入式应用外，其他应用一般都会保留这个bar。

导航栏：这里包括当前的title，当前的主要操作的控件和返回的导航功能

工具栏：对当前内容区可执行的功能动作。

标签栏：可以理解为全局导航，方便快速切换功能或是导航。工具栏和标签栏在一个视图中只能存在一个。

2)移植你的应用

大多数情况下我们都是把web端的应用移植到手机上，而在web端的应用，如果我们列出一个功能结构图，可能会包含100项以上的功能点，你可以做如下工作：

①考虑这个web端的产品，核心功能是什么，任何一个产品都会有核心功能，以及附加功能，比如QQ，核心功能就是IM，即时通信，可能截屏是一个附加功能，尽管用的人非常多。确定核心功能后，以及围绕核心功能尽可能少的扩展功能和逻辑。
②对确认的功能结构考虑在iPhone上的信息架构模型，上文说过，iPhone应用是线性的连贯操作，一层一层进入直到完成最后的任务，所以你要按这个思路去整理信息架构，一般来说，操作的深度不要超过3层，如果超过3层就要对产品形态进行扁平化处理，即由深度改为广度，因为随着深度的增加，每一级别都会有不同的功能，甚至有承载上一级的功能或逻辑，深度越多，这些功能就会越复杂，而在手机如此小的空间上就很难进行合理组织。

可以延伸阅读kentzhu同学更多的限制，更简单的设计

③合理利用iPhone应用的结构及标准控件。
标签栏，可以理解为web应用中的全局导航或是主要子功能的切换，这个bar可以贯穿于主要视图的底部，方便用户快速跳转，比如下图这个标签栏。

导航栏，可以理解为web应用中的局部导航，子导航或是面包屑，显示当前位置，同时还承载了1个或两个主要功能操作。可以方便用户返回，或是对当前视图进行1-2个最重要的操作。如下面这个导航栏。

工具栏，可以理解为web某个具体页面中的一些主要操作功能，比如上传，搜索等。如下面这个工具栏。

这是ios系统应用mail中，具体邮件打开后的工具栏，包括了对当前邮件的几个主要操作。对于你的应用，你也可以把一些操作放到主视图区中以按钮的形式展现，不放在底部的工具栏。但我们说，iPhone用户更习惯于iPhone一些“标准”操作，习惯iPhone的标准逻辑，所以把主要的操作以底部工具栏的方式展现似乎更好一些。

使用引喻的标准控件

我们看到滑动效果的开关，突起效果的分段按钮，转盘选择器等，代替了传统web中死板无生气的标准控件。

④调用系统提供的功能接口
例如iPhone提供的地理位置接口，可以为你的应用提供不同于web端的特殊功能，设计出更具有特色的产品，更能满足移动用户的需求。

最后，我想说iPhone应用是简洁的，包括设计上的简洁和功能上的简洁，不应该有太多的功能分支，不管你是否能组织好这些功能，过多的功能总会把用户搞晕。iPhone应用是有特殊气质的，你可以把他设计的完全符合iPhone使用的特点，甚至带有一点炫酷，而不用考虑低端用户，因为使用iPhone并且可以装App的用户，他的使用经验不会太差。

相关话题：iPhone 移动设备的交互和设计源地址：http://pcuseman.com/?p=202

设计案例探讨——iPhone计算器APP

邓熔 — 2011-01-15 16:18:14

下面两张图，A是iPhone自带的计算器APP设计图，B是我做的设计优化。

我的设计调整基于给一般用户用，而不是给财务人员用，财务人员身边通常有计算器。

不同之处有：

去掉了mc、m+、m-、mr这些一般用户不会用的功能。
去除了“+/-”这个正负号功能，正号不需要，负号有“-”号就够了。
把加减乘除符号放到顶部一溜排开，虽然常用操作区域由更加集中的四四正方形变成了五三长方形，但用户更加容易形成位置记忆。
把数字排列顺序改了一下，小数字放到了上面，大数字放到了下面，虽然用管了真实计算器的财务人员可能不习惯。但普通用户应该很习惯，因为这就是我们拨打电话时数字键的位置。
把“AC”改成“C”，更加明确地表示是“取消”键（很多手机上的取消键就是“C”）。同时颜色加重，和运算符的颜色区分开。
增加“（”、“）”，以满足类似于：25×0.5+31×0.7这样的需求。我猜你平时用计算器应该是先输入25×0.5，然后把结果写下来，再输入31×0.7，得到结果后，再加上刚才写下来的那个数。

设计图中看不到的两点改变：

结果显示框里不仅仅显示结果，改为：在按“=”号之前，显示输入的计算式（根据内容多少调节字号，至少可以显示75个字符，如果再超长，前面超长的部分就不显示），按“=”号之后，显示结果。
转为横版的时候，A方案是会展示更多强大的计算功能，比如求根之类的。B方案不支持横版。

各位看官有什么意见？欢迎各种意见，一起探讨。

iPhone 产品设计手记（二）：设计思路来自哪里

penddy — 2010-06-02 15:55:06

目前发现较为有效的有助于快速、少犯错的进行设计的方法主要是如下三点：

1. 从手机系统软件中找参考

为什么？因为用户在使用手机软件中已经受过教育，因而比较熟悉，不需要花太多的教育成本，只要利用的好，很容易达到用户在每个环节不需要做什么思考既可以使用。

比如iPhone中的表单中每一行的“>”，即明确的指示了是有下级内容的，这一点用户已经在无数的应用和系统内置应用中受过教育。

又比如symbian中的九宫格也是一个用户非常熟悉的形式。

此类参考除了直接查看系统的软件外，另外一个相当好且能在整体的角度上去了解系统参照物的方法是相关系统的官方文档，比如《iPhone Human Interface GuideLine》。

此方法自然也有缺点，即如果严格按照这种方法走捷径，那么思路很容易就会受到限制，很难给用户在交互、界面方面的惊喜。

此方法相对来说比较适用于一些实用工具，因为此类应用用户更希望的是不受障碍的使用需要的功能，而参照系统无疑是一种讨巧的、不太容易犯错的方法。

当然，系统提供的方案也是从业人员来总结、发扬的，因此自然可以发明创造新的方法，只不过想要做到这一点，就需要花费更多的时间和精力来考虑和完善。下面两类方法就属于系统提供设计方法之外的思路。

2.从第三方软件中找参考

第三方软件是类似你我这样的从业人员设计出来的，因此其中也充满着很多金光闪闪的思想点，参考第三方这种方法相信也是不少人会采用的方法。

此种方法的优点是，作为一个从业人员，思路和眼界总是会有天花板的，但作为一个整体，会大幅提高这个天花板的高度，因此可以从别人设计的产品中完善自己的短板，并较快的获取到相关经验。

而缺点是此类设计良莠不齐，虽然有些时候会成为快速设计的助手，但不恰当的选择反而可能会误导自己的设计。

3.从现实世界中找参考

有些时候我们要面对一个市面上无同类产品参考的设计，或者有些时候我们想要颠覆现有设计去给用户一个全新的体验。此时不讨巧的方法是想破脑袋的拼命去想，或者去尝试各类方法，而比较讨巧的方法是从现实世界去寻找参照。

因为设计的目标还是为了用户无障碍的使用，形式是为实质服务。因此第二点中谈到的“从第三方软件中找参考”还是要基于第一和第三点，而尽量避免空中楼阁。

包括界面、包括用词。记得看过文章说ipod的转盘是来自汽车方向盘的现实世界映射。而ipad中ibooks是模拟真实的书架（当然，这个不是什么创新，但很容易去理解）。

举个文字的例子，如果你用过iphone版的“航班管家”中，会发现其中有个功能叫“起降查询”，小范围做了调查，发现还是有不少人不太理解什么意思。因此，在后续的新版中，会调整为“进出港动态”，这个名词会更常见一些。

不过盆地感觉还不是很满意，因为这和在机场见到的“国内到达”、“国内出发”有一些区别，缘由是这里的关注点是关注到飞机从“计划”、“起飞”、“延迟”、“到达”的全过程，而非以出发、到达的角度来关注，同时是由用户指定航班，而不显示其他无关信息，如何表现，目前尚无更好的思路，希望后续能有更符合用户使用习惯的解决方案。

至此，基本介绍完了盆地使用的三板斧，虽和程咬金一样招数有限，但在盆地个人的实践中还是挺有效的，希望能对读者有一定助益。自然，盆地也希望能看到其他从业人员在此方面的经验分享，行业的繁荣和发展来自于每个人的努力。

四大门户iPhone手机微博横向对比评测

新浪数码 — 2010-12-29 10:25:12

一、登陆页(以下图片顺序均为新浪微、腾讯、搜狐、网易)

微博登录界面（新浪、腾讯）

微博登录界面（搜狐、网易）

四款iphone微博客户端从页面上看，只有网易和腾讯的支持记住用户名和密码，实际操作后就会发现，其实大家都是默认记录的。并且新浪微博支持多账户切换，默认记录为最后一个登陆的用户。外观上，除了新浪微博客户端增加了“微博广场”的内容推广对新用户有写引导以外，其他三家基本相同。

新浪微博支持多帐户切换

多贴一张新浪的多账户切换图片~~如果为多账户可以切换到其他账户，当前账户自动退出

二、注册

注册界面（新浪、腾讯）

微博注册界面（搜狐、网易）

通过截图不难看出，现在只有新浪微博客户端支持注册新用户；腾讯仍是点击注册转到QQ登录再注册；搜狐同S60客户端一样，发送XX到XX注册，不过iphone版倒是不支持电信用户了。。。网易是根本不支持客户端注册~想用网易先去登录网页吧。

三、客户端首页

微博首页（新浪、腾讯）

微博首页（搜狐、网易）

从图片上来看搜狐和新浪的首页相似度极高，腾讯的首页放在图标的正中央，其他的相差无几。但是从使用上还是分出了区别。四款客户端都是通过向上向下的拉屏进行内容更新，新浪和搜狐的客户端是刷新后默认为最新客户端，从屏幕上方到下方的阅读内容，符合网页的使用习惯。腾讯和网易则是默认为现在正在阅读的内容。

四款微薄在有新的消息通知，新的微博，评论，私信，粉丝，@消息在各个模块的图标上会有提示，新浪、搜狐还会有数字提示，功能上无太大差异。

四、微博发布

微博发布界面对比（新浪、腾讯、搜狐、网易）

微博发布四个客户端在这个功能上都下足了功夫，看似相同，其实都别有洞天；相同点，都支持即拍即发，从用户相册上传图片发布。除网易的微博客户端外，其他三家都支持发布当时的地点；搜狐的客户端还加入了发布表情；当编辑内容不发布选择退出时，只有新浪和搜狐的客户端有保存功能。

五、微博正文

新浪微博正文页面

新浪微博分享和举报界面

新浪客户端的微博正文包括：刷新、评论、转发、收藏、更多选项；其中的更多包含分享功能。可通过短信分享、邮件分享、复制链接分享等方式，还可以举报该内容。简单的分享页面将信息快速邮箱的复制到好友处，大大的拉近了用户间的距离。

腾讯微博

腾讯的客户端与首页的导航相同，在内容的下方明确的标出对话、转播和被转播次数的位置，让用户方便使用，收藏按钮较小，不太好找。

搜狐和网易微博

搜狐和网易此页面的功能基本相同，评论、转发、收藏，唯一不同的是搜狐多了一个删除，但删除也只限对本人的微博操作。网易则是在此页增加了作者的个人资料，增加了用户活跃性。

六、搜索、更多

手机微博客户端更多功能

手机微博更多功能

搜索和选项

转发与话题关注

四款客户端搜索和更多页面对比，直观感觉新浪做的中规中矩，但是很实用，在内容的推送上为用户准备了很多的内容，不愧为第一门户；腾讯则是以搜索为主打，页面做的很漂亮，且搜索时分门别类，体验不错；搜狐此项的功能相比新浪和腾讯并不差，只是隐藏太深，需要通过“围观”来找到推送内容；网易和搜狐相反，把搜索藏到了里面，“热门转发”按时间分类，用户可以按需求获取想要的内容。

78%的iPhone用户手机没有安装过新软件

项立刚 — 2010-05-25 14:09:35

最近一直在做手机的研究，也在观察用户的行为习惯。在众多的智能手机中，iphone的强大是自然的，这是一款把用户从2G时代，带到3G时代的手机。它的革命性是显而易见的，我的观察是用户们到底喜欢用哪些应用，结果发现一个非常有意思的现象，据不太准确的抽样调查，差不多有78%的用户，自从买来iphone手机后，从来没有安装过任何一个新的软件。用户们使用的应用，除了iphone手机中自带的几个，剩下就是购买时水货商店帮他安装的一些应用。我调查了一些正版用户，绝大部分没有账号，玩不转软件下载和安装。对于绝大部分拿着iphone的用户而言，iphone是一部很酷的“手提电话”，而不是一部好的“智能手机”。

这样一个现象，说明以下几个问题：

1．对中国而言，3G的普及与推广还是一个复杂和漫长的问题，有太多的事情需要我们来做，不是用上了一部手机，能接入3G网络，就是进入一个3G时代了。要进入3G时代，必须要让更多的用户了解3G业务，要了解各种有意思的应用，要真正的用起来。这需要太多的推动工作，需要非常多的具体事情。在这个层面上，我们做的非常非常不足，这些非常需要我们找到办法，找到突破口，建立起队伍和机制。

2．Iphone虽然强大，但是它的销售机制，为中国企业提供了更多的机会。App store的模式非常有价值，但是也存在一些问题：不能选取用户非常需要常用应用进行内置，支付较为困难，某些应用不太能适合中国用户的需要。别人的问题，就是中国企业的机会。其实我们未来的手机，不但要在硬件上做得更好，而且需要在应用整合上，尤其是对于最初进入3G时代，内置消费者喜欢的应用，帮助大家第一时间，零成本接触到3G业务，感受到3G业务带来的好处，这是一个重要的问题，也是一个非常有价值的突破口。

3．我们用3G手机不是有一个浏览器，让用户上互联网就算了，而是要开发出用户需要的有特点的业务，这方面全世界都是不同的，精准化、定制、本土化、个性化的业务才是未来的方面，这需要有更多的企业加入其中，在产业链上扮演一个角色，这个层面，也还是非常缺乏。当然也显示出了大量的市场空间。

从iPhone的人机交互方式看网络广告的互动创意

kennyduan — 2010-07-20 09:55:50

自iphone推出以来，以其人性化的用户界面和独特的人机交互技术迅速占领市场，在iphone上，你可以用手指单点触摸图标。两点放大/缩小图片，拖拽对象，抛甩物体，左右倾斜或旋转机身以改变方向，等等等等。iphone在人机交互方式上做的功课让人们用起来如痴如醉。同样，互联网广告以各种各样丰富的鼠标互动形式吸引用户参与进来，而它不单纯是为了好玩而让人来玩，更多的是在传达一些品牌主张或营销策略。等下面我们一起来看一看，玩味一下网络广告中一些有趣的互动形式和它的创意方式。看是否能为我们做手机游戏的时候提供些许点子。

网络广告按鼠标的互动形式分如下几类。我们来看看这几种互动形式下网络广告的创意。

一单击

呆板的鼠标点击操作在网络广告中衍生出了很多的创意形式，设计师将原本枯燥乏味的操作变得很有意思。提高了广告的趣味性和用户的参与性。

这是一个招聘网站的广告。画面中的人正在写简历，却被无数蚊子打扰。你的任务是拿起身边的筷子夹死蚊子。筷子是跟随鼠标移动的，手的关节也是活动的。只要你眼神够犀利，点的够块。就能当“master”，写完简历，主宰你的命运。否则你可能需要多玩几次了。

这是一个营养素的广告。每天的工作让你疲惫不堪吗?工作的时候其实也可以偷闲娱乐的。控制好你的力度和角度。就地打打高尔夫吧。让自己每天都做最好的自己。

这是一则反对家庭暴力的公益广告。画面中你可以控制拳击手套殴打可爱小白兔的任意部位，直致将其打倒。打中不同部位小白兔会产生不同反应。

二:拖拽

鼠标拖拽操作的优点就是可控性强,形式丰富。我们看看下面几组广告。

这是为宣传奥迪车展制作的一款广告。你可以用手按住车往后拖动，让汽车有足够的动力，然后放手让汽车飞奔。就象小时玩的玩具车一样。如果你觉得挺好玩。不如参加他们的车展选购一辆真车来玩吧。

这是一个健身机构的广告。画面中初始画面是一个相貌平平毫无个性的男性，通过上下拖拽鼠标进行锻炼来改变成个性张扬有味道的男人。广告语：锻炼你的自信。

这是百事清柠的广告。画面中摆放着一个易拉罐。你需要用鼠标按住它使劲拧，让它挤压变形直到滴出最后一滴水为止。广告语：体验柠檬的味道，直到它的最后一滴。

这是奔驰的一款新车广告，制动性能优越，速度快。广告中给了你一个滑块。你可以拖拉滑块来控制汽在公路上奔跑。汽车能完全响应滑块移动的快慢、方向和加速度，凭着优越性能在马路上纵横驰骋，游刃有余。广告语：新奔驰**系列，操控就是如此自如。

三.抛甩

抛甩有着更愉悦的操作感受,娱乐性十足。

这是一个社区网站的创意广告。广告中的人物会不停做出各种姿势和表情挑逗你。而你可以用鼠标把他抓起来戏耍和惩罚他，他同时也会做出各种痛苦的表情。你现在的生活无聊吗？那就去他们网站看看吧。

阿迪鞋的广告，在以个封闭的三维空间里，你可以随意向各个方向抛甩鞋子，抛甩的力量越大；鞋子碰撞的越激烈。广告语：光泽，耐用，有弹性。

四.鼠标跟随

鼠标响应没有太多的操作感。却一般被赋予更多的是趣味性。

关于儿童教育的公益广告。孩子的画笔会跟着鼠标在墙上乱涂乱画。你如果想玩的话可以移动鼠标指挥孩子把墙涂满。但这绝对会教坏孩子的。广告语：请用正确的示范教导孩子。

这则广告中你可以用鼠标去试着触碰小车。但你会发现无论如何都碰不到它。它机敏无比、跑的飞快；总是能从容的躲开肥大的鼠标。

这是瑞典telia移动网络运营公司的广告。在户外很随意的一个运动场景。你可以随意的移动手机，去捕捉感受真实赛场上的瞬间。这不是障眼法；因为新一代的移动网络随时随地满足你对赛事的渴求。

五.轨迹

用鼠标画一些特殊的轨迹,从而触发某个动作。

这是澳大利亚bigpond网络公司的宽带提速广告。你可以用鼠标画出不同的轨迹命令男孩做出一些不同的跳跃姿势。时而翻跟斗时而旋转时而一飞冲天。广告词：飞至30M，最快的有线宽带。

这是一个二手车交易市场的广告。画面中一个人正在开车在路面奔驰，鼠标移动时画面会跟随鼠标旋转，当鼠标转至90度附近画面会自动贴合，画面倒转，车里的人掉出来。鼠标再继续旋转至原状态，空中会重新掉落另一个人到车里，继续开车。广告词：把你的车卖给下一个需要它的人。

六.鼠标事件

鼠标事件就是鼠标移动到某个特定的区域所触发的事件，这种简单的互动形式也被应用的很广泛。

这是汇丰银行拯救北极熊公益活动的广告。画面中可爱的小熊孤独的坐在地上，你可以伸手过去逗它，它被逗的翻来覆去。你想在它的未来扮演一个角色吗？请帮助我们拯救它们的世界。

咖啡生厂商SUPLICY的创意广告。画面中铺满了咖啡豆，鼠标所到之处，咖啡豆会自动散开，同时你会发现底下有字，出于好奇，想看清到底下面写的是什么，你努力的拨开咖啡豆看完整的广告语： suplicy-手工选豆。这个广告的创意和鼠标行为结合的非常贴切，拨开咖啡豆的同时无意中你已经参与了SUPLICY咖啡豆的筛选工作。

七.疯狂鼠标

疯狂鼠标是指鼠标进行频率非常高的运动，最常见的互动形式有鼠标来回飞速晃动和快速的连击。我们看下面的例子。

这是德国大众为新车上市做的一款广告。这款车特点是速度快。广告中不断提示让你快速的移动鼠标，你可以上下或左右快速来回移动。中间的红色条是速度条，记录你当前移动的速度值。当速度达到100像素/秒时。速度条会被充满，画面中的机器人会变形成汽车。广告语：更快的移动鼠标，更早的感受惊喜。

这是rexona men v8止汗喷雾的一款广告。画面中一个帅哥满头油光，不住的四处张望，貌似很热，你可以点击鼠标给他吹风，点击的越快风速越大，画面下方记录着风速值和进度条。当你点击的足够快足以让速度槽占满时，帅哥的头皮被掀开。出现标志为V8的机器人。rexona men v8让你持久保持清爽无汗。

互动广告的创意很多都是和鼠标的互动来进行的。一个好的互动广告会让人在互动在玩的过程中感受它要表达的广告诉求。上述的几类基本涵盖了目前互动广告界所有的鼠标互动形式。我会继续关注互动广告，把看到的更多更好的形式和创意和大家分享。

为iPhone应用做Paper Prototype

deadpoet — 2010-08-09 08:50:06

过去两年，移动互联网一直是我关注的领域之一，为什么？因为我的那些英国教授人手一只iPhone，弄得我每天挂眼科。时常白日梦，自己左手iPhone，右手Nexus，胸前再挂一个iPad（或许腰间再绑一串iPod，屁股下再垫上Mac，大腿再护上Kindle）...黄粱一梦，时至今日，还是Nokia陪伴在身边。

前面提到我们以iPhone为目标所做的课程设计，也提到其中使用paper prototype对应用进行快速原型。没有提到的是这个过程中产生的问题：

1，用诸如VB这样的程序将原型展示在PC屏幕上，让用户以鼠标方式交互显然已经大大偏离了iPhone所提供的触摸交互方式；

2，用paper prototype遇到的问题则是使用场景的不真实：你可能拿着移动设备坐在公交车上，走在大街上，也可能蹲在厕所里，你可能单手拿着，双手并用，横着看，竖着瞧。

总之，习惯用paper prototype来应对PC等等这种“不动”设备的人来说，这些听上去简直是像场灾难。

面对这些，UX Booth在5号（3天前，好吧，我落伍了）有一篇文章谈到这个问题，designing with prototype，，谈到Indiana大学的信息学院是如何应对这个难题的：

制作paper prototype；
将每一屏数字化，无论是通过数码相机还是扫描；
将图片导入（PC，Mac），根据移动设备调整尺度；
将调整好的图片保存为移动设备支持的格式；
根据设置的Scenario调整好图片顺序；
将图片上传到移动设备；
指导用户如何导航，例如根据场景一张张Swipe（扫过？）这些图片。

这个方法被称作：Paper in Screen。我的问题来了，这种情况下，场景必须是固定的，用户必须一直随着安排好的唯一交互顺序继续下去，否则这些图片顺序就毫无用处了。而测试人员也难以很快完成制作新视图，拍照、上传、调整顺序一系列任务，这样用户的思路也中断了，似乎又失去了paper prototype的一大优势。

UX Booth的作者进行了调整，将视图制作成页面，加入链接，这样就可以加入更多的交互可能，然而我的问题还在，制作成本提升，用户觉得不合理，制作者依然无法快速现场修改。由于链接的引入，所有交互都只以点击（click）的形式完成。

我无法给出更好的方法，或许制作两套paper prototype？一份对应水平，一份对应垂直？但那还是存在“移动”的困难。或许你会问这动与不动会有很大区别吗？我还真不知道影响有多大，所以不会在这里乱说。或许也要根据具体应用而定。昨天看到我的一个朋友用HTC的Android手机聊QQ，走在街上时用的是单手，拇指按键盘；坐下来吃饭前，则把手机放在桌上，用右手食指点击键盘，你说区别很大吗？或许移动时键盘的每个按键需要扩大一些，一来方便行走中的晃动对屏幕辨识的影响；二来提高拇指的准确性。而静止时则回到正常键盘状态：我想，大概没什么会对着平放在面前的手机用拇指打字吧。

以下有一段Slide介绍使用paper prototype进行iPhone应用设计的slide（更多的是介绍做iPhone设计的基本流程）:

最后，如果你有什么经验或建议，请一定告诉我。下面链接的文章提供了比较翔实的做iPhone应用设计的或许你会用得上的工具，包括Sketching模板，Wireframe工具，以及视觉设计时使用的模板等：Sketching and prototyping tools for iPhone apps。

相关话题：iPhone 源地址：http://arslanyard.blogbus.com/logs/72247320.html

介绍几款iPhone手机原型设计的工具

elya — 2010-05-16 00:56:42

一、iPhone Mockup

http://iphonemockup.lkmc.ch/

可绘制简单线框图（Illustration）和手绘风格线框图（Pencil）两种风格的原型。组件都可以任意拖动，放到合适的位置。但是由于是在线软件，可能在安全保障上会有些欠缺，而且有些类似于沙盘的形式，不知道什么时候还会消失。优点是可以协同创作。

二、Balsamiq Mockups

http://www.balsamiq.com/

Balsamiq Mockups 提供了 9 大类共 50 多个控件，涵盖了几乎所有常用的 UI 控件。不管是桌面软件、手机软件还是 Web 站点，都能搞定，且软件极易上手。Balsamiq Mockups 有许多不足之处，如不能制作交互效果、不能将重复区域做成模块多次使用。不过Balsamiq Mockups 的免费版本有诸多限制，如无法保存、导出原型图就极为不便。而收费版本需要 $79，实在太高。但是也有 5 种方法可以免费获取 license key，可以去它的网站上研究一下。

三、iPhone Sketch Pad

http://www.uistencils.com/

这是一个做纸面原型的模板，像我们小时候用的那种复杂的绘图板，不同的是它集成了iPhone的一些常见的按钮、输入框、组件样式，而且可以方便的绘制iPhone的轮廓。有网格线，还送白纸板，当然，这个东西是需要购买的，9.95美金。

四、Axure

http://www.axure.com/

Axure RP已经成为成功设计Web原型的重要工具，也是产品经理使用的最多的原型工具，虽然Axure的优势在Web原型，但是用过导入一些组件也可以方便的设计手机原型和交互效果，这对于使用Axure已经娴熟的人来说，基本不需要任何学习成本，所以也是一种比较推荐的工具。

其实我个人比较喜欢用PPT、Photoshop这种很传统的工具，但是有时候为了展示效果需要，确实需要一些更好的手段。希望了解手机原型设计的朋友继续推荐合适工具，共同学习…

相关话题：iPhone 源地址：http://elyaaa.com/tech/551.html

站在Nokia上看iPhone

andypan — 2010-02-27 12:43:24

By Andy Pan

兄弟最近相当纠结，在选择下一部手机的问题上，基本的选择有两个：Nokia E72、Google Nexus One。纠结在于：我真的觉得Nokia相当的好用，上手，能够给我使用手机时“心灵的宁静”；但是触摸屏手机最近一年大行其道，buzz words 满天飞，不玩触屏您都不好意思和别人打招呼……只是，我用起来还是觉得有点不那么对劲。

于是，在深圳一个寒冷的夜晚，我拿出 E72 原型机和那部 iPhone 3G 并排放着，开始进行我专业的分析，以我几年 Nokia 软件的经验和 Fake User Experience PM 的背景…

我曾经以为我是因为 Nokia 的用户界面和交互设计而觉得好用，但是我发现它的 X6 触摸手机和侧滑盖的 N86 (N97,感谢评论纠正)系列一直不是特别感冒。我也曾经觉得是因为实体全键盘和虚拟全键盘的差别，不过我昨晚发了点狠，使劲敲了一大堆文字，发现两边其实都有错误率。实体全键盘也不是完全无误的。

后来我发现差别在于 Nokia 直板手机和 iPhone 全触屏的交互设计哲学是很不同的，这个本质上的差异导致了用户(我)的体验的最终反应。

这个差别可以称作为：基于拇指的交互设计与手指趋向交互设计

壹：交互

Nokia 直板机：基于拇指 (间接操控)

操作：一个五向导航键 + 两个软键(左上角，右上角两个按键分别对应屏幕左下角和右下角的命令)
输入区：全键盘或数字键盘

注意，这里的核心在于这个五向的导航键，几乎所有操作都是通过这个导航键加上两个软键完成的，为什么这么设计呢？因为这样就可以用你的大拇指在一个很小的区域内完成所有操作，极其方便(考虑下我们使用手机设备的方式，单手握住，四指在后，拇指在前).于是，很多的 Nokia 的设计指南都和这种人体工学设计相一致，比如确认用中键、设置里菜单里的高频项在上方。

这样，就可以解释为什么我钟意 Nokia 的直板手机但是对侧滑盖不是特别有感觉了。
BTW，日式手机应该也有这样的设计思路，我在顺电用过SHARP，一个强大的文字菜单系统，配上翻盖的大屏幕(日本的 3G 发达)，据日本上班同事说，日本人做地铁时间太长啦，也需要一个手扶着一个手玩手机

iPhone：手指驱动，这里的手指是五指并用啊

先看触屏上的交互:

Long and short Taps (短按，长按。短按是选择或激活，Nokia 和 WM 的长按是出二级菜单，iPhone 主页下是调整程序位置)
Dragging (拖放）
Sliding，Swiping（滑动）
Pinching and Expanding (捏，伸，怎么翻译啊?)这就是iPhone的专利多点触摸啦
Double Tapping（双击）

触屏上的手势：

Changing the screen orientation on the device from portrait to landscape as the device is rotated.
Silencing an incoming call when the device orientation is changed from screen down (for example on a table) to screen up and back again.
Changing application settings based on the ambient light conditions.
Changing the orientation of a map based on the device’s compass orientation.
Allowing movements such as device rotation to trigger an action.
Triggering an action when the device comes in close proximity to the user’s hand or head

基本上，我觉得触屏的设计更出于一种互联网终端的考虑，Nokia 的非触屏设计更出于一个手机设备的考虑。

关于里面软件设计的不同，看来还要再分析一篇了。

虽然还是没有作下最终决定，但是至少，我知道了喜欢在哪里不习惯在哪里的本质原因，透过最初的感觉分析出来本质的原因。于是，接下来就是 prioritize自己的喜好和trade-off.而不会继续纠结。这是很重要的思考和工作方法。丰田最近出事故，开始想用脚垫不合适来搪塞，后来用油门卡住这种小概率事件做理由，最后才被揪出设计上没有刹车优先这一根本的原因。查出本质是一门很有用的学问啊

（Reference: Forum Nokia Library)

贰：2G 的任务
一个电话呢，最基本的（重要的？）就是电话该具备的功能，在 2G 时代就是打电话、通讯录、信息。
我觉得在这三方面 Nokia 应该是完胜，why？人家几十年龙头老大的资格不是白给的，是多少代人一点一点积累出来滴。
短信：
进入 NOKIA Messaging 的菜单：

New message (新信息，最高频使用啦）
Inbox (收件箱，次高频使用啦）
My folders (这个本人用的不多，曾经在某个时期使用过，基本上是把某些短信存起来，比如信用卡啊什么的)
Hotmail (这个是装了微软和 Nokia 合作的客户端后生成的)
Drafts (这个是草稿，用于写了一半，有别的事情要先存起来的）
Sent (发出的短信，为什么这个很重要呢？请参考电影《手机》)
Outbox（待发的短信)
Reports (报告)

iPhone 里面：
短信以对话方式出现，这个最早应该是 Palm Treo 的风格，不知道 Palm 有没有加版权。相比 Nokia，缺了 My folder(对我影响不大)，缺了 Drafts(影响比较大），短信归类（inbox, sent, outbox）这个呢，对我影响不大，但是对韩国人似乎影响很大（早先看了一个报道说韩国有研究发现iPhone导致离婚率升高，因为这个短信设计不能方便的清理历史痕迹…)

在短信操作里面，iPhone 最不方便的是无法多选短信。基本上，如果都是有意义的短信也还好，问题是中国的垃圾短信实在太多啦，于是坐下来删短信成了我的一个嗜好。另外，Nokia 可以对短信排序（根据时间、发信人、主题、类型），回短信时可以插入图片，音频，视频，可以加入另外的收信人，这些都很方便。基本上，可以说的是，在短信操作上，正常人能想到用到的功能都在 Nokia 的左软键里面了。

这是有原因的。我在 2007 年和 Nokia 一起做项目期间，在深圳凯宾斯基酒店包下一间餐厅做 development camp，中间看到了他们的一本厚厚的设计文档，虽然属于机密，我还是得地主便利看了一下。里面列出了各种 use case，从发一条新短信给新联系人，到发新短信给现有联系人，每一种use case有一个编号，配上详细截屏做 UI FLOW，再根据每个 use case 对应 test case。其文档之精致，对用户分析之细致，令我和同事叹为观止，“心情久久无法平静”，对我的直接影响就是我关起门来重新写了一遍我的 spec。那几眼让我至今仍然记忆犹新。用我座位后方一位词语较为匮乏的开发工程师回到办公室后的感叹形容，就是：Nokia 的文档，靠，太 TMD 爽了….话糙理不糙.

苹果的 iPhone 在短信上的进步是很快的，比如复制某条短信，比如把一个发件人或短信中出现的数字添加至联系人信息或保存为新联系人，但是整体比较还是差了 Nokia 一截。这是一个积累的问题，就像 Nokia 在 Ovi Store 上面距离 App Store 的差距一样。

除此之外，联系人的设计也堪称完美。就不写了。BTW，联系人是 Nokia 系统的重中之重。这是和他们工作几年慢慢了解到的。

叁：3G的任务: 互联网
基本上，说起 Nokia 好用的地方，似乎到前面就把核心的说完了，到了移动互联网，哦，这是苹果的世界….
说起用手机上网，我用过 WM 的 Pocket IE, Opera Mini, Nokia Symbian 的浏览器，S40 的原生浏览器，UCWeb, 日本的 netfront, iPhone 的 safari。效果比较好的就是 UCWeb, Symbian 浏览器和 iPhone 的浏览器啦。

在浏览器的世界，好像 Nokia 传统的基于拇指设计不怎么灵了，手指的缩放，点击，可触摸的大屏幕好像更灵。想想之前没有触屏时 Symbian 浏览器长按导航键会出现一个小鼠标，觉得很不错，现在有了触摸设计就从根本上就超过了导航键。

肆：更多的任务
游戏：毫无疑问 iPhone 这种天生的超级终端设备占先（不过我不怎么玩手机游戏,so far)
视频：应该是 iPhone 占先，不过 X6 好像也不错，这个基本就是比赛硬件，没什么设计的东东
GPS： Ovi Maps 全球免费，很是吸引人啊，不过据说搜索质量不好。iPhone 的 google maps 没有语音提示。我估计目前体验最好的是 Nexus One 上面的 google maps navigation

伍：吾
刚才和同事（都是做过 Nokia 产品且有 iPhone 使用经验的）聊这个话题，大家都是觉得迄今未曾发现一部能兼备传统电话功能易用性和上网浏览移动互联易用性为一体的手机. 当无法改变外界时，就需要认识自身来看自己的真正需要。

因此，最关键的，还是要研究用户本人(我)的需要。基本上，我是需要一个手机加笔电的组合。有一种说法，在移动互联网时代，上网的主设备为手机，辅助设备为电脑。

人最难认识的是自己。这也包含自己对一部设备的需求。

Nokia，拥有我所熟悉的东西。Nexus One，作为一部“when web meets phone”的产物，拥有我不熟悉的东西。

知已知，知未知，这是一个选择。

Pack
作为本公司员工，不打 Service Pack 实在不像话…呵呵，没有啦，每家软件公司都打 pack 的，只不过树大太招风而已…

虚拟键盘与实体键盘：

我本能上还是喜欢实体键盘，因为更安心，更舒服，更放心（别想歪了…）

看看区别吧。其实这个实体键盘的键的颗粒论面积其实是小于虚拟键盘的(我感觉),但是为什么误击率低呢，因为每个键粒设计为凸起，如果放错，能够实际的感觉到并换位，然后确定好后再按下算是输入，这种交互是和 PC 键盘一致，因此更安心放心。iPhone 触摸屏也可以改，但是每个键都是平的，手指移动起来是靠一个键的放大进行提示，然后抬起手指算是确定输入，这与一直以来物理键盘的交互是相反的。因此用起来（目前）我还不习惯。

但 iPhone 的虚拟键盘也有无法取代的优势，就像乔帮主在 iPhone 发布那天说其它手机键盘的问题是：它们固定在那儿，发售以后就无法改动。我发现虚拟键盘的优点是，他们可以不停的变！从数字键盘到全键盘到标点，按住某个字母还能伸出一堆相似的欧洲字符。WOW…. 这是一个很大的优点，物理键盘是靠组合键完成标点等的输入的。

目前，Blackberry 的 Storm 似乎能够让虚拟键盘有机械按键的感觉，我在商店里使用的时候居然发现有很机械的按键感，完全不同于三星那种触屏反馈的虚假感，今天查资料才知道原来在那个触屏下有着十足的机械按键设计。Holy Cow…怎不让机械全键盘的爱用者不内牛满面，ShiNiao不及啊….

移动互联网

到底什么是移动互联网？

通过手机浏览网页 (browser)。这方面没觉得 Nokia 这些手机厂商有多大差距,除了 iPhone 的 touch 设计使上网体验增强外
通过手机访问互联网服务，比如 twitter，facebook 等等. 单独看这些功能，Nokia 这些公司似乎差距也不大
通过 App Store 和 iTunes 把云的内容提供商和内容消费者，把应用程序提供商和应用程序消费者联成一个生态圈，移动互联不单指的是用户用移动设备消费互联网，指的也是生产、消费、运营的移动互联模式。如果移动互联指的是这个大系统，那是比较靠谱的，Apple 之外的厂商现在的确差距很大。但是在这个模式下，最终消费者消费的内容不一定和互联网有关系（比如单机游戏，音乐）

我觉得似乎现在媒体把 Nokia 的问题看成触屏手机的缺乏，这个好像不对，apple 的 App Store模式，itunes 模式是关键，如果看本质的话触屏这种体验要和这个模式本身分开（当然最终的成功是因为设备+软件+服务，触摸是设备和软件的一个卖点).

相关话题：iPhone 移动互联网源地址：http://www.ifanr.com/7112

iPhone - UCD大社区

iphone的“通话记录”和“短信”的信息组织方式

iphone Web App 导航设计探讨

优秀竞品分析

1.Google+

2. FT Web App

3.Twitter

方案遴选阶段

导航设计方案一

导航设计方案二

导航设计方案三

总结：

不拘规范的iPhone优秀应用设计细节

一、 顺畅的返回及导航设计

二、 轻巧的移位与重叠设计

三、 风度的隐藏设计

移动产品设计之ios导航模式

简析 IOS 程序图标的设计

表现形态

图形表现

文字表述

图形和文字结合

IOS 程序图标特性

尺寸

质感

IOS 程序图标设计的构思

实践分享

iOS APP体验设计

程序猿 vs 设计湿

1. 视觉焦点&操作焦点

2. 空间感知

3. 体位化设计

结束语

iOS的隐性导航设计

下拉刷新

左右滑动

双击、长按、返回顶部等

友好提示

避免冲突，前后、左右，全局统一

心智模型、用户习惯

基于iOS平台的阅读应用简介

一、移动阅读设备的演进

二、移动阅读的新宠——iPad

三、基于iOS的阅读应用

3.1 单阅读应用

3.2 RSS/媒体聚合应用

3.3 社会化阅读应用

3.4 电子书应用

3.5 电子阅读平台

iPhone应用设计趋势

1. 镜像iPhone原生界面元素

2. 简化界面

3. 模拟硬件界面

4. 丰富、漂亮的列表视图

5. 分层的界面

6. 在列表中使用图标

7. 插图的使用

8. 使用手势

解读iPhone平台的一些优秀设计思路

“突破”平台UI膜拜-由iPhone想到的

iPhone App的特点及基本设计方法

设计案例探讨——iPhone计算器APP

iPhone 产品设计手记（二）：设计思路来自哪里

四大门户iPhone手机微博横向对比评测

78%的iPhone用户手机没有安装过新软件

从iPhone的人机交互方式看网络广告的互动创意

为iPhone应用做Paper Prototype

介绍几款iPhone手机原型设计的工具

站在Nokia上看iPhone

一、顺畅的返回及导航设计

二、轻巧的移位与重叠设计

三、风度的隐藏设计