引言

iPhone对应用程序(app)制定了3个标准的模板：导航控制器、页签控制器、模态视图与表视图控制器。文章介绍了这3个标准模板，它们拥有各自的优缺点。对每个标准模板列举了3个不同的应用例子。在面对不同信息的结构，无法完全使用这3个标准模板去规范所有产品特性。而目前有一些产品已经超越了标准模板的体验，创造了更多好的体验的方法。

原文: iPhone Application UI Design Patterns

前言

在iphone平台开发有很大的限制-没有实体键盘，屏幕小，几乎没有物理按键-这样的设计是为了在iPhone上可以开发智能、简单的应用程序。 在iPhone上，你不会找到很多臃肿、复杂的应用程序。大多数应用程序会选择一个功能或相关的功能组，围绕并集中一个主题去设计产品。

当apple开始制定UIKit，iPhone的每个应用程序会使用API集来构建用户界面，他们必须看到未来和预测到什么应用程序的设计模型是最 常见的，并确保那些可以很容易完成。这似乎是显而易见的，现在我们习惯了iPhone应用程序的设计，高级导航的交互方式也完整地提供给iPhone应用 程序的开发人员：

·进入更深层级的时候，也可以很轻松回到顶层

·在不同功能切换时不失去当前位置

·修改和调整内容时，不会离开上下文情境

·显示信息列表或选择器

这里几个主要的交互特征相当于3种不同类型的界面模板：

·导航控制器

·页签控制器

·模态视图与表视图控制器

突出主要功能的特征

突出显示你的应用程序中可用功能的列表，以便用户可以清晰浏览您的应用程序。不过，考虑到有各种各样的方式来组织显示应用中的信息，那么哪一种方法最好？从哪里切入来突出应用程序的特征？
没有最好的，但下面有一些已被实践成功的的模式供你参考：

导航控制器—Things ，iStat ，Birdfeed

Things

iStat

Birdfeed

这三个应用程序都具有多层级的功能，每个层级的功能很多，超过一屏功能导航会落在第二屏，通过控制上下滚屏查看所有功能。采用了层级列表，每个层级为一个列表，点击一个列表项进入第二个层级并会显示另外一个列表。

优势：主要应用于层级信息结构简单的列表。作为服务订购以及分组中蕴含其他功能等。
缺点：没有办法从进入的列表第一项中直接转到列表第二项，只能返回首页再选择列表第二项。

页签控制器—Squirrel,Tags, Tweetie

Squirrel

Tags

Tweetie

这三个应用程序功能使用了页签控制器。通常在使用页签栏位置，每个页签将显示一个功能，而这个功能下有一个完整的功能组合。若弹出一个特殊的功能界面时，会隐藏页签栏，获得更多屏幕空间。

优势：点击页签可以在功能之间进行切换。同时还可以突出页签的层次，表现出“当前位置”。
缺点：在5个页签以内是没有问题的。当超过5个的时候，第5个页签会将其他页签收起，显示为“更多”，并且无法在界面上突出页签的层次，并且弹出特殊的功能界面则会隐藏了主要的页签栏。

模态视图—ESPN ScoreCenter, Phases ,Weathe

ESPN ScoreCenter

Phases

Weathe

这三个应用程序采用模态视图的观点是，他们彼此的功能是一组的。使用这种设计模式的通常是信息量丰富，查看信息不用花太多时间。

优势：表现自然且容易理解，能快速显示丰富的信息。
缺点：只有一个层级结构。若从页卡1切换到达页卡4需要多次平移操作，它们之间不能直接平移超过1页卡。

遵循基础模式还是打破限制？

Apple提供了应用设计模板和范例，他们为良好的交互行为体验定制了标准的UIKit。
如果你想超越这个模板，打破限制，这会不会有问题？你已经有一个完全自定义的新模式？

以下是一些拥有良好交互行为的自定义新模式：

Weightbot,Convertbot
可以说为iPhone提供了独一无二的良好交互行为，完美的触觉体验。
Weightbot 使用水平滚动轮控制器

Convertbot 有机械选择拨号控制器

beats
Bjango 创造了Betas，是一个节拍和节奏配对的DJ和音乐应用程序。他有很多自定义的创新元素，主要内容展现在页签栏下面。

Postage
RogueSheep创造了Postage，是apple设计奖得主。

选择哪个效果最好
？

选择APPLE的原生UI元素与模式是没错的。apple创建了一个坚实可靠的基础，对应用开发提供良好的交互行为模板，但有些应用并不适用这些模板，使他们会考虑重新设计这些互动的方法。这是一个很好的想法，但需要谨慎，会很容易走向极端并且搞得一塌糊涂。

一个衷心的建议：如果你不能比Apple设计的更好，就不要胡乱去改！

本文翻译、附加描述（原文  iPhone Application UI Design Patterns），文章内容有修改和整理。

引言

布林

分享/翻译

设计的核心是通过图形图像，文字符号等形式系统正确且高效的表达（传递）信息。

本文的初衷旨在对表达信息所采用的交互与视觉原理，方法进行详尽的讨论与研究。由于该主题涉及诸多领域， 一篇blog短文恐怕只够写成概述。为了能够较为深入的讨论这一信息组织的形式化体系，故将讨论分系列进行，本文是第一篇。引译国外的一篇介绍信息图形化的文章做个概念的普及，为全系列做开篇铺垫，接下来我们将通过分享与文章，一起来探讨下列的话题！

1.了解信息的概念、结构（信息的三层次意义）及性质；

2.理解与认识用于表达信息的形式系统。图像、图形及高度抽象化的文字与符号（数学符号演化史）及形式演化的驱动因素；

3.通过构建与现实世界的认知模型（现实世界－心理世界－柏拉图理想世界）及系列法则（格式塔原理-先天因素），关注人对信息及其结构的认知过程与原理。理解对一定量抽象的信息的组织法则（表达信息单元间的关联，并列，因果，包含，递进顺序，趋势，重要度及相互关系）与图形化需求的动机；

4.了解跨区域人群的文化认同（后天因素），了解人群的兴趣点以提升信息表现形式的趣味性；

5.对表达工具的讨论，通过对信息内部含义的挖掘，通过外在形式的表达（如颜色，形状，位置，大小，频率／速度，方向，质感等）形成受众的预感知，提升理解的效率；

6.简单的介绍哥德尔定理及相关的哲学论点，了解现实世界信息的复杂性与表达的限制。以求在有限的条件下创作更加有效的表达与组织形式的思考方式。

…

原文作者：Anders Ross
原文：InfoGraphic Designs: Overview, Examples and Best Practices

信息图形设计概述

“信息图表“或“信息图形”是“信息、数据、知识”的可视化表现形式。当需要表达结构复杂的信息时，图形化的信息表达可以使理解更加快速和清晰，这一方法在标识系统，地图，杂志，技术写作或教育领域都具有广泛的应用。他们作为简化“事物发展过程及传播概念化信息”的手段工具，也被广泛的应用在计算机科学，数学及统计学领域 以简化发展与交流概念化的信息处理上。

信息图形能够轻易地呈现海量信息而不会带给受众多大的负载压力，或者能够在你理解复杂信息是适当的减轻压力。接下来我们拿一些例子来讨论和练习信息图形的设计方法，管中窥豹希望与读者分享一二。

什么是“信息图形”—What is InfoGraphics?

传统的说法是，信息图形是为了帮助理解以文字为基础的内容而应用的视觉元素。如标识符号，图表，地图等。与文字结合使用往往比单独的使用词语或比喻更具优势。信息图形以其精细设计的视觉元素来传达视觉语言，结合上下文的环境，能够提供“预先感知”以加深理解。无论如何，信息的可视化表现绝不仅仅是记录我们发现信息的一种方式，在过程中具有发现新意义与知识的潜力。每一个观察它的人从中得到启发，在视觉盛宴中学习，从而激发探寻更多知识的动机。

自燧石取火以来，我们就已经在使用图形作为可视化的速记来传达信息给观众和读者了，用来代替用成段或大篇的话语解释。用一页或一段去表达整个故事是困难的，但这要远远比阅读整本书更有效率。甚至每条街都有若干信息图形。事实上我们每天都要与信息图形发生交互，从简明的符号图形中得知我们应当什么时候过街，或作为网页导航的图标。

“信息图形”的简要历史—Little History of InfoGraphics!

早在史前时期，人类创造了信息图表-洞穴壁画，以及之后出现的地图与图表。遍布整个文明的历史，图形和文字始终剪不断理还乱的纠缠。制图早于书写几千年，地图的雏形于公元前7500年左右出现，之后图标被用于记录家畜和物资储备。中美洲的印第安人用各种图示来记录过去几世纪的历程。因为连他们自己都不太可能记住几代前的事情，这些图形能够帮助他们记起哪些救援的故事，并通过同样的办法一代一代传递下去。

1626年，克里斯托弗·沙纳尔出版了《Rosa Ursina sive Sol》一书，应用各种图表图形来阐述他关于太阳的研究成果，他绘制了一些列图表用于解释太阳的运行轨道（研究轨道则是通过对太阳黑子的观察）。

1786年，威廉普莱费尔出版的《The Commercial and Political Atlas》一书中第一次出现了数据型图表，在这本书中作者使用了大量的条形图和直方图来描述18世纪英国的经济状况。1801年他在 《Statistical Breviary》杂志中第一次发表了关于面积图的介绍。

1861 年，描述拿破仑东征（征俄）的信息图表代表了开放性信息制图的出现，该图的设计者Charles Joseph Minard提取出了东征过程中的4个导致完全失败的关键变量，并通过图形的形式在一张图表中传达这些信息：军队的人员变化、行军的路线、气温的变化、时 间等。从图中我们可以轻易看出法国士兵在严寒、疾病、伤病的困扰下，导致的战斗力不断下降。

1878年，西尔维斯特（James Joseph Sylvester）第一次提出了“图形”的概念（英文Graphic），并绘制了一些列用于表达化学键及其数学特性的图表，这些图表也属于早期第一批的数学类图表。

二十世纪信息图表发展成一门新的视觉化语言！

1936年，奥托·诺伊拉特介绍了一套系统的视觉信息标识，并视图将其发展为世界统一的功能性视觉语言，这些视觉标识（Isotype中就有包含通用的人类形象标识，以后出现的“抽象小人（通常都是棍状的）”就是从这些形象概念中发展而来的。

1942年，伊希朵尔·伊苏(Isidore Isou)发表了“字母主义”运动宣言。

1972 年，奥运会在德国慕尼黑举行，在本次奥运会中，第一次引入了全面而系统的视觉标识，当时得到了来自全球不同国家人员的一致好评，影响至今。慕尼黑奥运会中使用的奥运项目二级图标设计概念——“抽象小人（通常都是棍状的）一直影响着之后的奥运会标识设计以及其他领域的标识设计。

同年，先驱者 10号探测器发射，他成了人类放入宇宙中的漂流瓶。探测器上携带了一张著名的信息图表，该图表由美国天文学家卡尔·萨根(Carl Sagan)和天文学家弗兰克德瑞克(Frank Drake)设计，图中包含了太阳相对于14颗脉冲星的位置，一个地球男性和女性的轮廓图，太阳系行星分布图等，由于考虑到是用于与未知文明传递信息，所有的信息内容都不能再通过我们的语言进行描述，都采用了视觉图形图像的方式进行表达。

为什么要使用信息图形—Why Using InfoGraphics?

俗语说“一张图抵过万语千言”，信息图形出于各种原因被应用，连同他们能强调下面的重点以揭开它神秘的面纱。

·传送与传递信息

·将海量信息以密集但简洁的方式呈现以助于被理解

·显示数据，揭示因果关系，洞察趋势

·周期性监控确定参量的演化

信息图形的元素—Elements of Information Graphics

很多理论有效阐释其中你能识别被认为是信息图形元素的实体数量，但信息图形的基础和关键的材料是数据，信息和资源限制下对知识的图形呈现。不管怎样，基于数据，创建者可以利用图形软件等自化动工具来代表线表格数据，框，箭头，多样的符号及象形图。信息图表可能还具有浅显的定义视觉元素的关键。比例和标签也很普遍。

信息图形的类型—Type of InfoGraphics

信息图形有多种类型。很多信息图表采用专业的描述格式来表现他们精细与抽象的内容。若想恰如其分的理解这些图形所代表的意义，观察者需要具备相匹配的理解能力。在多数情况下，理解能力通过后天习得比先天资质重要。最基本的，在取得感知信息图形整体前要具有解读个体图形符号意义的能力。不管怎样，用约定俗成的知识为分布与排列这些独立的组件是构建理解所必须的。我们归纳一些信息图形的主要类型，并去了解它们的适用性。

1.以统计为基础的信息图形

信息图形有多种类型。很多信息图表采用专业的描述格式来表现他们精细与抽象的内容。若想恰如其分的理解这些图形所代表的意义，观察者需要具备相匹配的理解能力。在多数情况下，理解能力通过后天习得比先天资质重要。最基本的，在取得感知信息图形整体前要具有解读个体图形符号意义的能力。不管怎样，用约定俗成的知识为分布与排列这些独立的组件是构建理解所必须的。我们归纳一些信息图形的主要类型，并去了解它们的适用性。

2.以时间线为基础的信息图形

时间线是另一种信息图形的使用的形式，用于可视化基于时间的信息。时间线是按照年代顺序发生的事件的介绍，以使观察者能够快速理解其时间相干性的关系、有时也被用作分年的段落或其他格式的扁平化呈现

3.以进程为基础的信息图形

4.以位置与地理位基础的信息图形

这是你能在任何地方常见的信息图形类型，从你学校的地图到复杂的天文图形。城镇地图同样可以作为一个基于地理基础的信息图形的例子。这种类型的图形包含符号，图标，图表，图形，表格，箭头和点。你必须记得他们众多类型的线（平行线，虚线，直线）来定义铁路，街道，高速公路，铁路。很多符号和图标被用在诸如学校，教堂，医院，银行等特殊地标中。比例是重要的参数，一切都根据比例尺来标注。

如何构建信息图形—How to Create InfoGraphics?

在开始构建信息图形之前需要先回答好三个问题。为什么构建？如何构建？是否有用？构建好的信息图形以促进理解错综复杂的事物，用简单来代替复杂来构成。在清晰的理解我们想达到什么目标，了解我们的受众以及经过大量的工作和思考后才能起到作用。

问题1：构建图形的动机是什么—Why？
为什么要构建一个信息图形是首要问题。为了什么构建？构建目标是什么？是一个研究，发现，还是作为信息监视与控制？

当你顺利回答这些问题后就可以搜集相关数据了。为什么决定了描述搜集信息的形式，他能是怎样的形式（定量的，顺序的，分类的，分析的等等）以及更重要的方面：这些形式真的对我们所要表达的起到重要作用么？

问题2：怎样做？
当你完成了“为什么”这个问题，你需要去思考怎样去提炼数据以及如何表现数据。因为它揭示了信息内在的不同所以常常表现的很有趣味性。出于这个原因提炼以及表现数据的动机来源于统计处理时常揭示的趋势，否则这将导致令人困惑的错误结论。

一旦数据被提炼好现在你需要选择最有效地视觉隐喻。通常，展现一个少量的数据，一个表格或一个句子比一个图表更能清晰简单的表达。在某些场合改变配色方案或表格形式也能够清晰地体现趋势。

问题3：设计的有效性？
现在进入决定性的部分，你需要判断呈现结果是否恰当的达到目标。如果没能达到目标我们需要重新定义第一步。没有准则则能够用于判断你的结果是否有效。但是在彻底的回答所有以上三个问题后你需要判断其结果是否是为受众所接受与喜欢。关键在于不断的修改和体验直到我们找到一个有效的改进。

颜色，版式与布局的选择—Selection of Colors, Typography

一个完美的布局，一个好的选择及精彩的来源能够产生一个创意的输出。布局，纹理以及版式。不同方法的结合往往比单一的一种有用。专业性基于知识与经验。在任何设计项目中排版都是重要的关键点。有效地排版能决定一些重要项目目标的达成，如企业形象，项目的吸引力，丰富的视觉表现，信任及引起受众兴趣。他也能够帮助你帮助约束图形所传递的情感。

改变颜色，非重要的数据饱和减少，重要数据饱和增加，修改排版，字体大小，在确保不丢失相关信息的同时去掉任何无助于显示与呈现的数据往往能产生了令人惊奇的结果。

一些比较好的例子

访问原文查看更多例子

本文由布林翻译、附加描述（原文 InfoGraphic Designs: Overview, Examples and Best Practices），文章内容有部分修改和整理。

mppark

最后保存的照片：

下面是一段关于 “Pattie Maes at TED 第六感装置演示”

youku播放器

Shop Composition 采用了“滑动式的导航”方案，取代了传统的网页导航思路。

两部分内容设计整个网站：

“shop”商品的浏览、将商品放入购物车；“store”集成的商品博客；“projects”每天一位对商城物品购买的问答记录等；在使用上会发现只有一个页面。直到去“结账买单”时，才脱离了商城界面。

导航的滑动效果也是让人惊叹的脚本技术.. 显然机器有点吃不消了。

从商城的概念上是一个不错的创新，吸引着更多人关注。

Google在线翻译解决了这个问题，大部分网页翻译后的结果看起来还是不错的。

让翻译网页随时随刻都使用，我把它放在了浏览器的书签工具栏！

使用方法

Firefox 专用

或者

右键添加到收藏夹

这是一个英文网页

当我在浏览某一个国外网页时，我可以很方便通过点击它马上翻译成我的母语-中文

鼠标悬停在翻译的文字上方时，会出现原文对比，可以修正翻译

甚至我经常在日文网站关注一些新鲜商品

当然，如果母语不是中文，这里还有很多其他语言！