安卓集成facebook_设计和编码集成的Facebook应用程序：理论

daique1908

墨衍会员 · AI 创作全网分发码龄10年

关注

翻译最新推荐文章于 2026-10-15 10:10:08 发布 429 阅读 AI 写同款· GEO 优化 ›

安卓集成facebook

在本系列中，我将探究Facebook的UI，并在此过程中向您展示如何通过RSS feed创建自己的集成Facebook博客应用程序。

爱它或恨它Facebook已经成为人们生活中不可或缺的一部分。对于许多人来说，它是一种工具，使我们可以跟老朋友见面，共享照片或与伴侣计划夜晚。但是，社交交互背后是经过仔细调整和重新调整的精心设计的UI计划的复杂结构。

在Facebook成立之初，我从来就不喜欢它的“无聊的外观”，并始终认为它在设计方面具有更大的潜力。但是，直到我作为UI设计师的知识和经验不断发展，我才意识到Facebook的简单性和易用性使它如此成功。它的设计无疑是值得赞赏的。

介绍

在本系列教程中，我将通过一系列案例研究，研究，实施和分析来评估Facebook的UI，以便您了解其某些设计原则如何帮助您创建本地的Facebook应用程序外观。我想创建一些希望对Webdesigntuts +读者有用的东西，并认为“如果我能向大家展示如何将您的网络博客转变为本地Facebook应用程序，那将不是很好”。好吧，您好运，这是我计划在接下来的3篇文章中做的。所以，坚持下去，给自己喝杯茶，快乐地设计吧！

Facebook UI设计简史

从早期开始，简单性就一直是Facebook的核心

2004年2月，thefacebook.com向哈佛大学的学生开放，之后于2006年9月26日向公众开放。该网站的总体概念仍与原始状态相似。它仍然具有蓝色标题，纯白色背景，蓝色选项卡式列标题以及与今天使用的字体Lucida Grande相同的字体。自早期以来，当然发生了很多变化。马克·扎肯伯格（Mark Zuckenberg）成长了，该网站也与他一同成长。很难完全了解扎克伯格在Facebook成立初期的想法是什么，但似乎他的主要精力可能集中在基于UI的功能上。 Zuckenberg确实对他的早期设计考虑提供了一些见解：

自从Facebook化身以来，投入的金钱远远超过了理智。随之而来的是Facebook设计的改进。一点一点地。 Facebook会定期分阶段更新其UI，并经常受到批评，然后最终受到大多数人的赞赏。

设计Native的好处

那么，为什么要设计像Facebook这样的应用程序？如何设计Facebook应用程序完全取决于您。你们中的某些人会选择本机，其他人会设计一些全新的东西，希望能对Facebook有所帮助。设计您的应用程序没有正确或错误的方法，但希望通过了解Facebook设计背后的逻辑，它将为您的设计提供最大的成功机会。

熟识

设计本机的最大优点也许是您的用户会熟悉它。他们不必从头学习新的UI概念，因为他们已经熟悉Facebook的工作方式。

安全

除了熟悉之外，还有安全性。您的用户无疑会在他们已经知道的环境中感到安全和舒适，这与坐在Facebook中的外国设计相反。如果您正在考虑通过应用程序销售商品，则用户的这种安全感可能会导致更高的转化率。

作为设计师，我们很自然地希望创建新颖而有趣的东西，因此遵循Facebook的风格准则可能不会直接吸引您，但是如果您要挑战自己并以Facebook所不具备的Facebook风格进行设计，该怎么办？没有直接的风格吗？有没有想过以Facebook风格的桌子会是什么样子？给自己挑战，创造一些尚不存在的东西。我可以向您保证，这个挑战与从头开始提出一个全新的概念一样有趣。

Facebook设计原则

许多大型组织都有品牌或样式指南。 Facebook按照Facebook设计原则布置其准则。尽管它们含糊不清，可以用多种方式解释，但确实可以帮助您了解Facebook正在通过其网站设计实现的目标。正如Facebook所说：

我们在Facebook上拥有某些信念，我们在工作中追求某些素质。它使我们能够辩论是“是Facebook”还是“不是Facebook”，这是使我们能够评估正在设计的东西是否可以改进的原因。

Facebook的使命宣言是使世界更加开放，这对设计产生了重大影响。 Facebook UI需要以每种语言在全球所有大陆的所有文化中工作。这并不意味着您必须将应用程序翻译成地球上的每种语言，但是在创建应用程序时需要牢记一些事情。

避免的事情

确保您阅读了图形API文档，并确保可以完成计划的工作。例如，当我第一次提出创建此博客应用程序的概念时，我认为将预览图像包含在我的博客文章旁边是个好主意。但是，（不幸的是）Feedburner的RSS提要（我们将要从中引入提要）没有引入预览图像的URL。这只是强制您必须仔细计划应用程序这一事实。您计划得越多，就越容易实现自己的目标。没有什么比用HTML / CSS设计和编码应用程序只是为了找出您计划做的事情不可用或不可能做的事情更糟糕的了。

要说明的另一点是，不要误导带有虚假的Facebook UI元素（如“赞”按钮）的人-Facebook会为此惩罚您，这可能导致您的应用程序被暂停。

确保为应用设计的像素数在760像素以内，或者如果您打算将应用放在页面中，则尺寸不得超过520像素。

线框

与任何好的网站一样，进行计划很重要。可以直接进入代码编辑器并为您的站点编码的日子已经一去不复返了。如今，通过绘制线框草图可以节省很多麻烦和时间。应用程序的这种有限的图形表示形式可以帮助您计划导航，路径并显示对用户最有利的信息。它使您有机会分析和评估决策，而不受设计的影响。今天对我们来说幸运的是，有大量的软件和资源可以帮助我们在几分钟之内敲定线框。

如果我们查看我们的Facebook应用程序的线框，则可以看到我们如何计划：

用户将在我们的应用中执行一次的路线和路径。
近似尺寸以确保我们以正确的比例工作，并且我们的应用程序将适合Facebook。
近似字体大小–稍后我们计划CSS时，这可以作为指导。在为网站创建线框时，通常不会这样做，但是在这种情况下，当我们希望样式非常简单时，它通常可以作为基本样式（例如标题标签h1，h2等）的良好指南。
我们内容最合理的地方。注意博客文章如何全部放在左侧。这是为了在用户点击我们的应用程序后立即将其吸引到我们的内容中。

直到最近，我还从未真正喜欢过Facebook的应用程序导航。我一直觉得我们的应用程序是隐藏的，没有明确的方向或组织。幸运的是，最近情况有所改善，并且简化了主页导航。这确实为我们的应用程序开发人员提供了一个巨大的优势，因为它使访问我们的应用程序更加轻松并且在首页上排在最前列。

Facebook说：

我们使您的用户可以更轻松地访问和重新使用他们最常使用的应用程序。平台应用程序现在在主页上拥有平等的房地产机会。他们可以占据“应用程序”仪表板，“游戏”仪表板和“照片”当前所处的位置，具体取决于用户与哪些应用程序互动最多。

色彩

因此，您首先会注意到，Facebook使用蓝色作为其主要基色之一。这是Facebook的明智选择。有没有想过为什么这么多的网站（Twitter，Facebook，LinkedIn，Paypal等）将蓝色用作其原色？这是因为人们认为蓝色是最普遍接受的颜色。在许多不同的文化中，蓝色与宗教信仰相关联，带来了和平，或者被认为可以消除不良情绪。蓝色是我们大多数人在潜意识里逐渐熟悉的一种颜色。它是天空和海洋的颜色。普遍而言，我们已将其与冷静联系在一起。 Facebook似乎在其蓝色标题和干净的白色背景之间几乎达到了平衡，因为太多的蓝色会让人感到寒冷，悲伤和沮丧。

看看上面，您会看到Facebook在其网站中使用的其他一些颜色。

字体/版式

Facebook仍保留与开放日相同的主要字体，即sans-serif字体Lucida Grande。然后是一系列后备字体。如果我们看一下Facebook上CSS，我们可以直接看到完整的字体家族：

font-family: "lucida grande",tahoma,verdana,arial,sans-serif;

有人认为Charles Bigelow和Kris Holmes设计的字体反映了简约，形式和质量。所有的特质使它成为全球最大的社交网络字体的理想选择。

Facebook的段落文字为11像素，行高为16像素。这使其具有约1.5的良好比率，使其易于阅读并均匀分布。当您使用简洁，最小的设计时，行高在文本上非常重要。如果您在文本上输入的行高错误，那么可以很容易地将一个好的设计变成一个好的设计。我们决定将这些字体属性用于博客应用程序。

用户输入字段

通过分解Facebook的用户输入字段，我们可以找出最适合我们正在开发的应用程序类型的字段。 Facebook通常具有五种类型的用户输入字段。这些是：

状态更新
注册
注释
搜索
登录

如果您的用户必须在您的应用程序中注册一些详细信息，也许是比赛的电子邮件地址，那么最明显的选择是使用注册输入类型让用户输入其详细信息。这些是此类事情的不错选择，因为这些大字段吸引了用户，并将有助于注册转换。如果您的应用程序包含搜索，那为什么还要尝试重新发明轮子呢？为什么不使用Facebook样式搜索？您的用户已经可以与本机搜索相关联，并立即知道它将帮助他们找到所需的内容。正是这种细节，在设计您的应用程序时，将使它成为最终的用户友好性并最终为它提供成功的最佳机会！

另一个选择是做与我们的Facebook博客应用程序相同的工作，并创建Facebook中没有的一些细微改动。请注意，在上图中，注释和登录输入都具有3px的填充，我们已经采用了这一点，并使用了状态更新输入中的边框笔触。使用这种组合将仍然摆在设计中，并且当我们在扩展Facebook样式表的同时仍坚持规则时，仍会给人以本地化的感觉。

认为干净

Facebook在其设计中的雄心是将其用作用户可以生活的空白画布。这是有道理的，因为设计不应干扰用户在使用您的应用程序时试图达到的目标。 Facebook认为：

最小，光线充足的空间鼓励参与和诚实透明的沟通。

作为设计师，有时很难退后一步。我们习惯于用渐变，阴影和边界半径来分层设计，有时我们忘记了最简单的设计是最有效的。能够做到这一点通常很困难，但这是每个UI设计人员都应该掌握并能够做到的事情。彼得·索耶（Peter Soyer）写了一篇有关最小设计的有趣文章。如果您需要一些想法或灵感来做这种事情，那么您绝对应该查看此帖子60干净而最少的网站以获取灵感。

或者，当然，您总是可以看看Facebook，看看可以从其当前的简洁样式中汲取哪些元素。

思维一致

在浏览Facebook之前，您可能没有注意到过，Facebook在其UI设计中使用了多少模式。这是为了鼓励用户熟悉其布局。 Facebook解释了它是如何工作的

通过拥抱模式，我们可以认识到以相似的方式表达相似的部分时，我们的可用性得到了极大的提高。我们的互动以单一的声音与用户对话，建立信任。减少，重复使用，不要重新设计。

在我们的博客应用程序中，您可以通过重用侧栏中的选项卡标题等部分来了解我们采用了Facebook的理想。这很容易为我们的用户分解它，并让他们快速扫描内容以查找所需内容。

认为人类

Facebook的最前沿是社交互动。用户不再只是输入计算机；他们正在与认识的人互动和联系。他们之所以加入Facebook是因为他们希望被朋友所包围。技术和设计应保留在后台，而不应以此为由。尝试使您的应用程序更具人性化和交互性通常是一个好主意。对我们来说幸运的是，Facebook提供了Facebook graph API，这使我们能够使我们的应用程序更具交互性并与他们强大的社交图联系起来。

在本系列的后续教程中，我们将更多地讨论图API。 Facebook还提供了更简单的方法，可以通过使用社交按钮中的任何社交插件（如“赞”按钮，“发送”按钮，评论等）来整合这些类型的交互。

使其适应/更新

我相信大家都会注意到，Facebook确实经常更新其外观和功能。这不仅使用户烦恼，而且还会使我们的设计师和开发人员烦恼。这是因为它有能力破坏我们投入的所有辛苦工作。为什么不为最坏的情况做准备，以便如果Facebook确实进行了意外更新，那么我们就准备好接受它们。根据我自己的经验，实现此目的的关键是使元素可重用且样式简单。

当然，我们永远不知道Facebook何时或如何更新-它可能在您最不期望的时候出现并咬住您。实际上，以至于我写完本系列教程的一半时，Facebook去了并更新了他们的应用程序画布页面，这使我不得不重新设计我的一些设计。谢谢Facebook！

全部付诸行动！

如果您看一下本教程随附的.PSD，则可以查看并了解我们今天涉及的一些点与我们的设计之间的关系。我们的设计风格与Facebook类似，但同时仍然是我们应用程序所独有的。我们借鉴并遵循了Facebook的设计原则，因此我们的应用程序对Facebook具有原生的外观。我们为应用程序采用的一些项目是：

过滤器搜索栏：受Facebook本地搜索栏的启发。
段落文本：样式与Facebook相同。使它看起来很自然的最重要因素之一。
页面选项卡：尽管与Facebook的本地选项卡并不完全相同，但它们仍然让人联想到Facebook原始页面选项卡的感觉。
标签标题：我们的标签标题的样式与Facebook的样式相同。
用户名和个人资料图片：为了使Facebook继续关注人机交互，我们添加了此名称，以使我们的博客应用更加个性化。
简单的样式：我们有效地利用页面上的空白为文本空间提供了喘息的机会，并传达了Facebook创建空白画布以鼓励参与和诚实透明沟通的理想。

我的个人学习

在2011年初，我与普通Facebook用户举行了三个焦点小组讨论，以了解他们在Facebook中的使用习惯。一些结果令我感到惊讶，即使它们与我所参与的应用程序相关也很重要。必须了解Facebook具有庞大的用户群，并且您不应该过分依赖我收集的信息是很重要的-您应该执行自己的根据自己的标准和人口统计学进行研究。

我们接受采访的所有用户都说，他们每天至少在Facebook上花费30分钟到一个小时。令我感到惊讶的是，大多数人都希望我们的应用程序看起来像Facebook原生的，而且每个用户都说通过Paypal从应用程序中购买商品比通过信用卡付款更安全。因此，如果您打算通过应用程序出售任何东西，可能要牢记这一点。