下图为APP最原始的布局模型。

页面布局顾名思义就是对页面的文字、图形或表格进行排布、设计。优秀的布局，需要对页面信息进行完整的考虑。即要考虑用户需求、用户行为，也要考虑信息发布者的目的、目标。

对用户行为的迎合和引导，有一些既有原则和方法，比如下面的22条基本原则：

1、公司/组织的图标（Logo）在所有页面都处于同一位置。

2、用户所需的所有数据内容均按先后次序合理显示。

3、所有的重要选项都要在主页显示。

4、重要条目要始终显示。

5、重要条目要显示在页面的顶端中间位置。

6、必要的信息要一直显示。

7、消息、提示、通知等信息均出现在屏幕上目光容易找到的地方。

8、确保主页看起来像主页（使主页有别于其它二三级页面）。

9、主页的长度不宜过长。

10、APP的导航尽量采用底部导航的方式。菜单数目4-5个最佳。

11、每个APP页面长度要适当。

12、在长网页上使用可点击的“内容列表”。

13、专门的导航页面要短小（避免滚屏，以便用户一眼能浏览到所有的导航信息，有全局观）。

14、优先使用分页（而非滚屏）。

15、滚屏不宜太多（最长4个整屏）。

16、需要仔细阅读理解文字时，应使用滚屏（而非分页）。

17、为框架提供标题。

18、注意主页中面板块的宽度。

19、将一级导航放置在左侧面板。

20、避免水平滚屏。

21、文本区域的周围是否有足够的间隔。

22、各条目是否合理分类于各逻辑区，并运用标题将各区域进行清晰划分。

这些APP界面布局原则可以保证页面在布局方面最基本的可用性。是非常适合app设计新手来掌握。

【APP布局案例的欣赏与解读】

以上22条页面布局的原则是与用户的眼动轨迹研究有关系的。可以说是依据来源。

眼动研究是随着用户体验的兴起与技术设备的进步，而兴起的一种用户研究方法。它是眼动技术与研究方法的二合一，通过眼动研究观察被试者对移动应用页面的注视轨迹，辅助完成用户体验设计。

通过眼动研究，不但可以完整地还原被试者在各个页面的注视轨迹，还可以通过划分兴趣区分析被试者在各区域内容的关注度。

眼动研究提供的信息不只是人们是怎样“看”东西的这么简单，眼动反映了人脑的信息处理过程，眼动模式的特点与脑的信息处理都有密切的关系。

作者：25学堂

仪表板”、“大数据”、“数据可视化”、“数据分析”——越来越多人和企业，开始运用他们的数据来做一些有趣的事情。在我的职业生涯中，有幸参与一大批数据为重的界面设计，我要在此分享一些观点，讲讲如何造就这种特殊且有意义的产品。

很多人已经讨论过这个议题，我会围绕创作过程中最具影响力的部分。

1. 用户不同，数据不同

任何时候设计一套复杂的系统，都不可避免要为很多用户和角色进行设计。总裁、经理和分析师是几个常见角色，每个都有自己的工作流程和对数据的需求。

定义好角色，产生不同视角，这本身就是一种艺术。我就不在此详细解释了。如果你对此有兴趣，请看Cooper的这篇有用的文章。

关于角色，重要的一点是预先确定好，围绕它们来组织信息结构与线框图。

下面是我们去年做的一款健康报告应用的最终成品。这套系统有着不同的用户群，他们各自都需要不同的数据管理。创建了关键角色后，我们每次评审会将它们放在旁边。

注意画板上的那些角色。我们的客户都接受这种方式。

在满屋子客户面前展示作品是件难事。无论是在解释线框图、流程图，还是就视觉设计进行讨论，都很难让每个人跟上你的观点。

通过角色来组织作品，会防止你（和客户）在这些讨论中跑题。

2. 制作页面模型

我多年所用的一个技巧，是制作页面模型。核心点很简单：

首先为用户呈现他们需要的，再将页面余下的信息根据用户故事或信息层级，进行结构化处理。

制作页面模型的概念，正是写散文（和其他很多种沟通形式）的核心原则，我在写过一本书之后就对它了如指掌了。多年来，我花费大量时间在这本书《样式：清晰与优雅的基本要素》上。它除了作为绝佳的写作参考之外，还清晰阐明这项观点：

如果一开始就使人分心，那么用户不仅难以分辨每个元素是什么，也难以集中精力于整个流程。

这是进行用户体验设计时需要牢记的一项准则。下面是制作页面模型的两个常用方式。

给画板创建某种结构。问问自己——通过这些信息要讲述怎样的故事？

我在behance和dribbble上看到很多仪表板和数据画报项目，（视觉上）设计得很漂亮，但通常都使人眼花缭乱、过目即忘。它们要么是各种图表组件以缺乏层级的瀑布流形式排列，要么视觉上过度设计，并不适合这项数据。

左图展示的就是眼花缭乱的数据画报。右图例子则是装饰物分散注意力，注意不到数据。

在上面的图中（左图），这个数据面板用了控制台的方式来呈现信息……相当有压迫感。为避免如此，我们试着以组织信息的方式处理这类界面，让人们感觉像是在阅读杂志文章。

并不是说控制台式的界面就没有用武之地……我个人愿意设计成那样。但多数情况下，没有必要时刻看见所有信息。

最关键的一点——避免创造出令人一知半解的图形。为页面信息建立模型，首先给用户呈现关键信息，然后才是支撑内容。

3. 选择正确的图形

在美学方面，有很多（太多了）设计都在误用图表。

最糟的是——这些“坏习惯”似乎在成倍增加。随处可见本应是饼形图的面积图，还有本应该是柱状图的曲线图。让我们一起来制止这些设计……下面这些建议有助于你正确对待数据：

始于数据

未经处理的原始数据表格一点也没有吸引力。但它是最佳的起点。它帮你开始思考数据中有哪些变量可用，这些变量数据如何关联。

原始数据的单调特性，会帮你思考系统中各种变量间的关联。

除了从空白数据行列入手，等待灵感忽然进入你意识。你还可以更积极一些，通过下面这些很棒的资源，帮你揭示出有趣的关联：

• Charted——Medium开发的一款自动数据可视化工具。
• 通过Google Sheets、Illustrator和Sketch设计更好的图表。
• Tableau——这个工具是最好的，不过相当昂贵。

在整个过程中，这部分并没有灵丹妙药。别对深入研究数据心存恐惧，试着混合搭配不同变量，创建基本图表。这需要时间，但它是值得的。我想到的一些绝妙点子，都来自这些原始数据文件的拼拼凑凑。

处理离散数据和连续数据

我花了很长时间才意识到这点，有些图表比其他更能表达你的数据。在创作中很容易陷入这样的境地，选择一种好看的图表，然后指望它能发挥作用。我经常这么做（我挺喜欢散点图），并为此感到内疚。

有些图形比其他更好，这取决于你所处理的数据类型。选择合适图表的方法之一，是评估你手中的数据。有两种主要数据：

离散数据——数值可清晰计数。比如进球数或Facebook点赞。

柱状图最适合表现离散数据

连续数据——任何范围值。比如一季的降雨量，或一个人的身高体重。

曲线图最适合表现连续数据

简单说，曲线图最适合表现连续数据，柱状图最适合表现离散数据。

Dona Wong的一项资源《华尔街日报：信息图指南》帮我凝练了其中精髓。真希望几年前我就有这本书。这是本无价的参考书，帮你选用合适的图表，阐明信息展现的行为准则。

http://www.amazon.com/Street-Journal-Guide-Information-Graphics/dp/0393347281

4. 基本的或定制化的图形

最后，作为这些海量数据系统的设计师，你得反复问自己“我应该选择非常规方式来定制化设计？还是使用久经考验的图表来展现信息？”

最近无意中读到这篇来自37 Signals的文章——只要3种图表就够了。作者强烈表达一个观点，图形的“有效性”胜过它的视觉特征。我非常赞同文中这一观点。不过，我觉得他的观点代表着一种极端实用主义的视角。我相信定制化的图形通常也能提升数据的易用性，同时独具一格引人入胜。

基本柱状图的例子

对我来说，有“一种尺寸通行”的图表，还有“适用于最佳尺寸”的图表。表格、曲线图和柱状图就很好，可以容纳各种类型的数据，但它们也非常普通（一种尺寸通行）。作为专业的设计师，我希望我的作品看起来和感觉上是独特且有用的。

比如，纽约时报做得很好，通过定制化的交互式图形，来为他们的文章添彩。可以在这里看到更多他们的作品。我们来看一些完美的定制化图表案例：

这个案例对曲线图做了调整，让人“一睹”那些支撑图表的基本数据。

http://www.nytimes.com/interactive/2013/03/29/sports/baseball/Strikeouts-Are-Still-Soaring.html?_r=0

在这个3D图表中，透视角度的改变在视觉上非常有冲击力，也让用户更好理解数据间的关联。

http://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html?_r=0

Selfiecity.net的这个例子做得很好，用了真实内容来创建图表。

http://selfiecity.net/

最后，来自我们为CNN做的一个项目。我们用了颜色编码来展表现政党偏好，同时立体突起在视觉上表现人口统计信息。

http://truthlabs.com/work/cnn

作为首要准则——数据与技术所需，我们需要尝试各种定制化图形。但我们还是要有备选计划，以防设计并不奏效，或者客户喜欢相对保守的方式。

5. 那又如何？

我们为什么要把所有这些数据放在页面上？答案是：这样人们才能使用——做决策、调研、预测未来，什么都行。关键是，用户不会沉浸于你所选的漂亮色彩，他们是来工作的。

我的建议是——在你排布好页面一切就绪后，问问自己“那又如何？”。看看每个图表、组件、表格，仔细考虑人们从中能获取到什么。通常你会得出这样的结论，“这些都不重要”，这就意味着要减少或是重新思考。

这在我身上发生过好几次——我创作了复杂漂亮的仪表板，包含了一系列时尚的图表、饼形图，还有成千上万数据点构成的地图。但总是被客户质疑“我只想知道这样有效吗……我要的东西在哪？”还有“我只要3样东西……X、Y和Z。哪里可以看到它们？”

哎，这时候你才会意识到自己迷失在杂草丛中，遗失了重点。

我会有个办法，尝试使用文字来精确表达人们所要的东西。

在重要信息上，文字总结可能比图表更有效。

上面的图来自我们最近的两个项目。两者都通过文字展现用户所需的信息，并没有依赖需要解释说明的图表。

这个方法使我们的客户产生共鸣，尤其在重要信息上。但我之前提过，总要考虑各种角色，所以要用在适当的地方。

就像其他所有形式的设计一样，它也需要一种平衡。

力求使你的数据与众不同，但是要避免过度设计和无谓的分心。

为数据选择正确的图形，但别忘了有层次地构建页面。

无论多么单调、令人沮丧，还要打磨每个小细节……还有别忘了问自己，“那又如何？”

原文链接

作者信息：Erik K

如果你是一个APP狂热分子，你会花大量的时间在各种APP的尝鲜中，你会明显感受到一些APP在采用着某种风格鲜明的设计语言，来标榜自己的独特之处，行成自己的设计风格，甚至引领设计风向。去年我们关注到随着Metro设计风格的影响和iOS7的发布，APP明显都开始尝试扁平化的设计语言了，除此之外，还有哪些显性化的设计语言崭露头角呢？

在这篇文章里，我想分享一些日益显性的设计语言，让人一眼就记住它的风格，有一些已经随着优秀设计师的摸索，融入到国内移动产品设计里了，而有一些，确实是刚刚在萌芽阶段，需要更进一步的摸索和尝试。
一、唯一主色调 | Simple color schemes

为什么我们要定义一个界面多种颜色？仅仅用一个主色调，是不是就能够很好的表达界面层次、重要信息，并且能展现良好的视觉效果？事实上也正是如此，随着iOS7的发布，我们看到越来越多唯一主色调风格的设计，会采用简单的色阶，配套灰阶来展现信息层次，但是绝不采用更多的颜色。

卡塔尔航空公司

卡塔尔公司航空就是这样的设计案例，整个界面采用粉色的主色调，从标题栏到标签页，从操作按钮到提示信息，除了黑白灰之外，全部采用粉色设计，这种简介的的配色风格，反倒起到了很好的信息传达效果，也具有良好的视觉表现力，设计师在内容排版上的技巧实在是加分。

Readability采用红色主色调设计，连提示信息背景色、线性按钮和图标都采用红色主色调，界面和LOGO也完全是一个色系的。而Vivino采用蓝色主色调设计，信息用深蓝、浅蓝加以区隔。Eidetic采用橙色主色调设计，其中的关键操作按钮甚至整个用橙色提亮，信息图标也用深橙色、浅橙色来表达程度。

可以说唯一主色调设计手法，是真的做到了移动端APP的最小化（Minimal）设计，减少冗余信息的干扰，使用户专注于主要信息的获取。
二、多彩色 | Hypercolour

而与唯一主色调形成对照关系的，就是Metro引领的多彩色风格，为什么我一定要给我自己的产品定义一种主色调，多彩色就不能是主色调吗？于是出现了不同页面、不同信息组块采用撞色多彩色的方式来设计的风格，甚至同一个界面的局部都可以采用多彩撞色，也产生了不少优秀的设计。

优衣库出品的RECIPE，是一个让人眼前一亮的设计案例，多彩色的设计风格融入到整个APP中，不论是切换标签页，还是在内容组块中滚动，都会变更不同的主题色。色彩切换的时候，还会有淡入淡出的效果，让切换变得自然而然，完全不生硬。RECIPE的番茄钟计时器模块，会一边计时一边播放优美的美食背景音乐，同时切换不同的主体颜色，随着主体颜色的变更，所有的前景文案、图片也会变更为该色系，加上清晰度极高的美食图片，真的是视觉+听觉的双重享受。RECIPE真的是2013年难得一见的优秀设计。

而Peek Calendar、EveryWeather和Harmony这三个APP，是列表多彩色的设计案例，这种列表多彩色，不知道是不是从Clear开始再度流行起立的，用鲜亮的多彩色来区分信息，确实能起到突出的效果，视觉上极其醒目。

可是对于一些内容型的APP，也许并不适用，比如GoogleKeep的多彩卡片，确实是在内容阅读上会起到反效果。百度云记事本第一版设计也是多彩色的，但是后来考虑到文字记事比较多，为提供良好的文字阅读体验，还是把多彩色改成灰白色微质感的设计。
三、数据可视化 | Data Visualization

至于对信息的呈现，越来越多的APP开始尝试数据可视化、信息图表化，让界面上不仅仅是列表，还有更多直观的饼图、扇形图、折线型、柱状图等等丰富的表达方式。表面上看起来也不是很难的事情，但是若真想实现，背后的复杂程度也不容小窥。

Nice Weather用曲线图来表达温度的变化，Jawbone UP用柱状图来表达每天的完成情况，PICOOC用折线图来表达每天体重、体脂的变化。移动APP利用数据可视化，可以在更小的屏幕空间内，更立体化的展示内容。

四、卡片化 | Cards

卡片也是一种采用较多的设计语言形式，无法考究这种卡片的设计，是从Metro的tiles流行起来的，还是从Pinterest的瀑布流流行起来的。总之我们可以发现，Google的移动端产品设计已经全面卡片化了，甚至Web端也沿用了这种统一的设计语言，据说是Google搜索的体验负责人引领的设计语言统一升级。

luvocracy的卡片流突出信息本身，用大图和标题文字吸引用户，强化了无尽浏览的体验，吸引用户一直滚动下去。Google Now的卡片则更加的定制化、个性化。有的卡片是用来做用户教育的，有的卡片是用来告知天气的，有的卡片是呈现联系人列表的，有点卡片是显示待办事项的。不同的卡片都遵循在一个统一宽度和样式的卡片内，进行发挥和设计。既保证了卡片和卡片之间的独立性，又保证了服务和服务的统一化设计。Shazam则用一种趣味的卡片样式，呈现专辑和歌曲。
五、内容为王 | Content First

APP产品的发展，最终的路径势必会跟web产品一样，突出内容，内容为王，当繁华褪尽，纤尘不染，再重新去看APP存在的意义，不外乎是给用户提供更好的服务。与内容相比，所有的设计和包装，都不外乎是一种表现手法，而真正具有价值的APP，一定是内容取胜的。Facebook用190亿美金收购了Whatsapp，这个全是用统控件搭建的APP，并不是因为他的设计多出众，而是因为他的服务足够有价值。

Artsy的图片瀑布流，完全没有用到线和面来区分信息组块，而就是用内容本身做排版，用户可以更加集中注意力于图片内容上。Prismatic利用字体排版，尽可能的内容前置，弱化图标和操作，让用户更集中注意力于内容阅读上。而MR Porter则利用商品图片、名称和价格直接做设计，让用户聚焦于商品本身。

六、圆形的运用 | Circle Design

原形是最容易让人觉得舒服的形状，尤其是在充满各种方框的手机屏幕内，增加一些圆润的形状点缀，立刻就会增加活泼的气息，徒增好感。一个有意思的现象是，iPhone的拨号数字键盘，一开始都是矩形设计，迭代到iOS7，均变成了圆形，可以说是对传统电话的致敬，也可以说是增强了界面的柔和感。当然相应的，也要处理圆形的实际点触区域，不要因为设计成圆形点击区域也变小了，导致点击准确率下降了，美观度提升易用性受到了影响。

Beats Music把选择喜欢的标签设计成了圆形，这就比普通的列表、矩形tag的感觉要好很多，更加趣味更具探索性。Movse每天走的步数、消耗的卡路里均用圆形承载，是数据可视化、关键信息显性化的最好案例。Tumblr则把要创建的内容的类型选择，用蒙层+圆形选项按钮来设计，让选择变得专注而明确，又不那么死板。
七、大视野背景图 | Bigger Vision image background

用通栏的图片作为背景，也成为今年的一个流行趋势，或者是作为整个APP的背景，或者是作为内容区块的背景，既提升了视觉表现力度，又丰富了APP情感化元素。一些信息或操作，浮动在图片上。这种设计方法，对字体和排版设计要求更高，难度也更多，但极容易渲染出氛围。

自打几个月前，有消息说 iOS 界面将迎来一次重大转型开始，iOS 7 这个名字就不断被提起。各种扁平化设计的概念视频吸引着大量点击率，凡是对科技新闻稍感兴趣的人们应该都好奇真正的 iOS 7 是个什么样子。

于是前几天，苹果在 WWDC 2013 上发布了万众瞩目的 iOS 7。过去 iOS 的进化秉承着保守、继承的思路，而这次的升级却异乎寻常地大胆，彻底改变了 iOS 的用户界面，从过去充满拟物化修饰元素的界面变成了扁平明亮、色彩丰富的简洁界面。iOS 新界面毫无疑问成为最近科技新闻中最热的话题。

来源：ifanr

iOS 7 的设计工作是在苹果首席设计师 Jonathan Ive 的领导下完成的。我对 Ive 充满敬重，他奉行简洁的设计哲学，把对美学的诠释融在了苹果的硬件设计中。你只需要瞟一眼 iPhone，或 MacBook，或 iMac，就知道他的设计功底有多深。他最擅长的是把无数思考隐藏起来，给你最简单却是最经得起推敲的作品。这一次，他思考的是软件界面。同样的设计思路从硬件延伸到软件会有什么成果，真是个有意思的问题。如今 Ive 已经给了我们答案。

iOS 7 是苹果少有的极富争议性的作品，网上的争论已经炸开锅了。我身边有人喜欢也有人说难看，相比之下还是说难看的人多一些。我也上手体验了 iOS 7，以便有发言权。我的结论是：我喜欢它所传达的理念，但这个作品没达到我的期待。

过去 iOS 的设计理念

就像无数人论证过的一样，过去的 iOS 充满了拟物化的设计元素，说白了就是仿真。比如 iBooks 的木质纹理、通知中心的亚麻纹理、备忘录的纸质纹理，以及遍布整个界面的高光和阴影……这种痕迹实在是太多了。为什么选择这种仿真的设计？因为它能让人感到熟悉，熟悉意味着你已经或多或少地习惯了这样的观感，因而也就更容易接受。以前看过一篇文章讲，iOS 的设计理念在于不追求更多人喜欢，而追求更少人讨厌。拟物化的设计就是把人们最习惯的纹理摆在你眼前，所以多数人看上去至少不会觉得不舒服。这是拟物化设计的好处之一。

苹果的拟物化设计还有一个特点，就是精致到细致入微。这种精致需要对细节的极度重视，因而也一直被当作高端大气上档次的代名词。一个简单的逻辑就是：做好拟物化设计就要非常用心，非常用心的作品才是高档次的作品，所以拟物化设计传达出一种类似于“哇，好漂亮啊，真牛 X”的感觉。所以你就能理解，当 iOS 7 摆在人们面前的时候，为什么有那么多人会给出廉价、幼稚、山寨风之类的评语了。

拟物化设计有这么多好处，那为什么还要改呢？因为拟物化也有它的缺点。

首先，按照 Ive 的说法，这套拟物化的界面太过喧宾夺主了，以至于有时会把信息本身置于次要地位。这个观点我特别认同，想当初 iBooks 刚推出的时候我第一时间下载，打开一本书来回翻页翻了十分钟，一边翻一边赞叹于苹果高超的交互技术——至于书里写的是什么完全不重要，还有什么比这么逼真的翻页效果更吸引人呢。这种的做法在一些人看来，就是典型的“技术让人忽视了最重要的东西”。精致的拟物化设计过于厚重而掩盖了信息的重要性，让人沉浸在过程之中而非内容之中。如果上一句话说得太绕，简单说就是这种设计能吸引你购买这个手机，让你沉醉在各种仿真效果中，然后每天洋洋得意的是“我的手机太 X 了”，而不是“这本书的文笔太赞了”。

精致的拟物化设计创造了美妙的用户体验，但沉浸在体验本身之中并不是界面设计的主要功能。哦对了，可能有人要问：难道拥有美妙的用户体验不是件好事儿么？当然是，但不同的用户体验所传达的理念也是完全不同的。举个例子，倘若问我用 iOS 的 iBooks 读书和用亚马逊的 Kindle 读书，哪种体验是优秀的？我会回答说两个都有优秀的体验。但 iBooks 的优势在于阅读间隙所带来的美感（比如翻页效果或打开书本的过场动画），而在文本呈现方面没有体现出多大优势；而 Kindle 则致力于解决阅读中的体验（e-ink 屏对眼睛的保护），虽然它的翻页效果真的很渣。前者让你沉浸在阅读这个行为之中，后者让你沉浸在书本内容之中。相比之下，我更喜欢 Kindle。

一句话总结：拟物化设计可以更容易更迅速地让人接受，但过度精致的拟物化修饰元素可能会喧宾夺主、让人分心，降低用户的使用效率。

苹果自己当然清楚这个问题。所以 iOS 中最精致的拟物化设计往往是限制于功能最简单的应用，比如备忘录、录音、计算器、Passbook、指南针等；那些功能性复杂的应用在拟物化元素的使用上是很节制的，例如音乐、设置、邮件、通讯录等。即使如此，刚刚接手的 Jonathan Ive 仍然觉得无法忍受。

所以过去 iOS 的设计并不是不优秀，只不过它所传达的理念过于重视体验本身了。虽然我觉得不改也 OK，但奈何设计师眼里容不下沙子，iOS 的界面转型也就提上了日程。

iOS 7 的设计理念

iOS 7 的界面，按照 Ive 的说法就是去除了一切不必要的修饰元素。看不到高光和阴影了，也看不到仿真纹理了。因为去掉了很多修饰性的设计元素，整个界面变得扁平明亮，简洁轻快。iOS 7 用线条和色彩来组织界面，让系统界面变得如此简单，从而使内容在界面中扮演更重要的角色。

的确如此，我在上手 iOS 7 的时候，发现很难去注意那些系统界面——因为它们真的没啥可注意的。类似的设计也出现在 Windows Phone 中，只不过后者更加激进。Windows Phone 8 用内容来组织内容，整个系统基本上是由文本、色块和图片来组成的，使用效率极高。这种极简设计的问题则在于，当你获取了你所需要的信息之后，你甚至懒得再看它一眼——微软的说法是让你抬起头去注意生活本身。

什么事情走到极端都不一定是好的，极简主义也一样。WP8 如此简洁，时间长了一定会让人觉得乏味，所以微软才要为这种文本排版的单调界面配上“世界级的动画”。WP8 对过场动画的重视程度极高，也是用来弥补简洁界面本身的缺点。

虽然 iOS 7 在界面的简洁程度上没有那么极端，但线条取代纹理成为界面的组织元素，同样可能带来乏味的观感。所以 Ive 才说，要确保界面能带来“惊喜”。iOS 7 的“惊喜”也就构成了它的亮点：大量半透明的观感、细致的过场动画、色彩的大胆运用，还有壁纸图片随手机角度而摆动的特效等。这也就是为什么只看图片不能得出全面的结论，只有亲自上手才知道它的优劣。体验过 iOS 7，让我觉得它并没那么糟糕，因为在使用过程中它能带来更多美感。

当然，为了避免重蹈覆辙，iOS 7 的动画和半透明设计也比较克制（比如运用高斯模糊和低透明度），于是色彩在整个界面中扮演了更重要的角色。iOS 7 的色彩使用如此大胆，让我有点儿难以接受，这也是我特别想吐槽的地方。Jonathan Ive 过去在 iPod 的设计上成功地运用了很多色彩，但每个设备通常只有一种颜色。结果是虽然整个产品线色彩缤纷，但每个产品却不那么花里胡哨，我只需要选择我最喜欢的那个颜色就好了。

如今，iOS 7 变成了“整个产品线”，而我必须接受其中所有的哪怕是我过去不喜欢的颜色，比如浅绿、浅紫、非常浅的蓝，以及撞色搭配和浅色渐进等。苹果在 iOS 7 的设计介绍页面上也承认，这些色彩“可能并不是你明确需要的，甚至不是你所期待的”，但“它们组织在一起会呈现出和谐的整体”。的确，iOS 7 在整体上的色彩搭配还算和谐，但那又怎么样，我依然不喜欢这些色彩。

这也是我觉得 iOS 7 最大的槽点：在色彩上，它迫使你去接受这个整体；它不再追求让更少人讨厌，而是构建出独特的风格让你去喜欢它、接受它。问题在于，没有哪种独特的风格能让所有人喜欢。上手体验了 iOS 7 之后，我觉得我已经能够开始适应这个界面了，但是每次看到那些图标，我依然为它们感到难过……不是因为这些图标“在客观上”不好看，而是它们不符合我的审美。抛弃了拟物化设计也就抛弃了它的优势，iOS 7 首先面临的就是认同问题。

相比之下，我更喜欢 Google 应用中单色搭配 + 扁平简洁的界面。可惜的是这种方案没有被统一地用在 Android 上，也许还是不能避免乏味的问题。在我看来，原生 Android 的过场动画显得很漫不经心、未经打磨，这让它原本就简朴的界面显得更单调了。

说到最后你可能有点儿失望，因为我并没有把两种 iOS 中的任何一种奉为完美的作品。我没打算那么做，而且每当我看到那种极端评价时，我都惊讶于发言者的懒于思考和过分自信。我想说的是，过去的 iOS 和 iOS 7 传达了两种完全不同的设计理念，各自有各自的优劣。过去的 iOS 最让我满意的是它给我最熟悉的东西，并且在拟物化设计上保持了一定的克制。而 iOS 7 避免用户沉浸在体验之中的设计理念也让我特别认同。无论是哪一种理念走到极端都会带来问题，二者的协调必不可少。

我觉得最舒服的界面设计来自 Mac 上的 OS X。它并不排斥拟物化设计，所以打造了精美的图标；它适度地运用高光和阴影，让界面富于层次感；它采用简洁的布局和以银色为主色调的搭配，让界面隐于内容之后；而精致的过场动画、精细的拟物化图标也避免了用户在使用过程中感到乏味。也许移动端的 iOS 限于界面尺寸，在协调这些理念上有更大的难度，但 iOS 不应在任何一种理念上走得太远。这是我的个人观点了。

本文，我将以Lolapps的《Ravenskye City》为例，论述什么是Facebook游戏UI中最重要的元素。

典型Facebook游戏外观

Ravenskyes UI from fbsocialapps.com

《Ravenskye City》UI堪称Facebook游戏的典型代表，其包含如下元素：

1. 顶部菜单（Top Menu）

2. 游戏数据菜单（Game Data Menu）

3. 任务栏（Missions）

4. 好友列表（Friends List）

5. 商店/仓库（Shop/Storage）

6. 参数设置（Parameters）

1. 顶部菜单

Ravenskyes Top Menu from fbsocialapps.com

我喜欢它们的顶部菜单，因为它突出需要进行1次点击的主要功能。

—Like按键：你的Facebook Fan页面是激活用户基础的免费渠道，所以你最好将Like按键设置在显眼的位置。

—标签（Tabs）：

* 体验（Play）：这是列表的第一个按键，且带有彩色标记，所以你完全无需搜索它的位置

* 添加积分（Add Credits）：这一金色按键旨在吸引用户的眼球，方便用户立即找到此按键。将此按键置于显眼的位置能够提高你的收益水平。

* 免费礼物（Free Gifts）：礼物馈赠是菜单中的主要功能，因为它对病毒式传播和用户留存率有一定的影响

* 我的邻居（My Neighbors）：事实证明，玩家拥有的邻居越多，他们返回游戏的可能性越大。

* 邀请好友（Invite Friends）：有些玩家会立即被“Invite friends”的按键设置所吸引，所以你最好不要忽略这一按键

* 帮助（Help）：你是否希望避免反复向支持团队问问题？那么你最好创建知识数据库，在顶部菜单中添加链接。

* 信息（Messages）：这是提高请求循环机制效率的主要功能设置。若你没有在应用中设置请求中心，那么请求就会被淹没在游戏请求标签中，导致出现如下结果：

a. 你的接受率将受到很大影响

b. 这会降低用户发出的请求数量，因为若请求未被接受，他们就会停止发送请求。同样，接受的请求数量越多，就会有越多玩家回送请求，以实现互惠互利。

注意：若我没有接受玩家的请求很多次后，我希望他们能够停止向我发送请求。

2. 游戏数据

Game Data from fbsocialapps.com

玩家必须能够看到重要的游戏数据，因为这会影响他们的决策：

* 硬币数量，要设有供玩家购买更多硬币的按键。设置多重同一接入点并不总是坏事。

* 游戏具体数据：例如，这里你可以看到我拥有的木材数量。玩家可以自由添加自己的游戏数据。

* 能量：能够查看能量数量非常重要，因为有时候玩家需要考虑在能量耗尽前采取什么举措。

* 经验指示栏：玩家希望获悉自己距离下个关卡还有多远，因为这能够让他们获得新道具，重新填充能量。

3. 任务菜单

Ravenskyes Mission from fbsocialapps.com

这里的任务菜单非常标准，因为它们通常会出现在多数管理游戏中。菜单位于屏幕中间，非常显眼，总是能够被玩家看见，这样他们就不会忘记自己的当前任务是什么（游戏邦注：即使他们已段时间没玩游戏）。

这一菜单通常堆叠在屏幕左侧，方便同时呈现多个菜单。

这些图标附有工具提示和通知机制，以便在出现更新内容时提示玩家。

4. 好友列表

Neighbors from fbsocialapps.com

好友列表通常位于游戏底部，主要包括3个主要功能：

* 拜访好友：拜访好友是非常重要的玩家活动，因为这能够促使他们定制自己的城市。的确，若没有人拜访我们的城市，那么创建它们还有什么意义？

* “默认好友”：如今多数游戏都会默认设置1个包含2大主要好处的虚拟好友：它向玩家呈现拥有更多好友的益处，以及当玩家变成高级用户后，城市的变化，再来就是玩家能够进行什么类型的互动。

* 添加邻居：在Facebook平台，没有人希望自己单独体验游戏。将邻居列表设置在突出位置对于病毒式传播和用户留存率来说至关重要。

5. 商店/仓库

Tools Menu from fbsocialapps.com

这类菜单已变成标准模式，包括如下内容：

* 修改城市内部元素的版本选择

* 商店：这是玩家购买必要道具，以完成相应任务的场所

* 仓库：这是玩家存储已收集或购买道具的地点

6. 参数设置

Parameters from fbsocialapps.com

如今多数游戏都有在右下角设置参数选项。这一设计也属于标准模式，所以你无需疑虑。

点击后，下列选项将提高玩家的视觉舒适度：

* 放大/缩小：若你的城市规模越来越大，不妨设置此按键。

* 全屏模式：如今我们越来越常在Facebook游戏中看到全屏模式。它们带来更富沉浸性的游戏体验，所以不妨设置这一选项。

* 静音/解除静音：这一选项完全无需解释。要记得将音效同配乐区分开。

7. 奖励：交叉推广条框

Cross promotion Bar from fbsocialapps.com

我差点忘记这一重要元素。

* 若你有推出其他游戏，你定希望玩家能够在你的游戏中轻松进行导航。植入集中沟通机制和请求内容能够帮你提示玩家在工作室的其他作品中进行操作，进而提高游戏的留存率。

* 若你没有推出其他作品，可以选择采用Applifier之类的条框，这将变成你引进新手的新渠道（游戏邦注：但要确保游戏拥有较高的留存率）。

总结

也许你会发现，“标准”一词在文中出现多次，这有其原因。如今我们看到的多数设计都源自Playfish/EA早期在这一平台所推出的作品。多年来，这些UI类型已被众多社交玩家所掌握。因此你可以通过运用本文陈述的UI设计标准让玩家在短短几分钟内熟悉游戏的UI。

当然，你可以采用非标准UI元素，如果这适合你的游戏，或者你觉得自己有更好的游戏构思，而这一构思能够转变成下个设计模式。此外，如果说UI是个重要元素，那么流程就更是不可或缺。例如，点击邀请按键后游戏将出现10种执行邀请好友流程的方式，所以这只是游戏界面设计的开始。

via：gamerboom