facebook 五维设计_重新设计了Facebook：对独立设计的深入分析

通过研究其他设计师的工作，可以学到很多东西。 专业项目和现有网站的规范设计都是如此。 像Facebook这样的大型网站通过一些好元素和其他不太好元素来提供非常特殊的用户体验。 在本文中，我想研究不同的Facebook重新设计，以分析可以改善当前用户体验的 界面概念 。

我从Dribbble用户那里进行了一些自定义FB重新设计，每个设计都有特定的增强功能和更新的UI元素 。 如果这些想法在Facebook上实时实施，则应考虑它们的外观，功能以及如何影响可用性 。

简化的个人资料页面

此个人资料页面的重新设计来自欧洲巴尔干地区的设计师Haris Jusovic。

在此设计中，他通过使用更突出的标题照片和个人资料图片突出显示页面所有者，更加注重简洁性。

时间轴帖子可以根据您的喜好按“最近”或“受欢迎”排序。 这对于可用性非常重要，尤其是在Twitter对最近强制执行的算法更改提出强烈反对之后。

同样，许多按钮在使用额外的填充和较大的版式时显示较大。 由于Facebook具有交互性，因此只有增加按钮和超链接等项目的可见性才有意义。

总体而言，这种概念在膨胀时感觉紧凑而轻巧 。 很高兴看到Facebook将更多的注意力放在交互式元素上，也许还会增加它们的字体大小。

多列时间轴

Alejandro Osorio的重新设计是转向垂直圆柱布局。 此布局表示Facebook用户访问用户的个人资料页面时看到的个人资料时间轴视图。

该设计引人注目，但有些用户可能会反感。 它依靠多个页面列来组织用户的个人资料链接，以及最近帖子的时间线视图。 所有的颜色和元素都与Facebook的设计风格保持一致。 感觉确实像Facebook时间轴页面。

但是，有些侧边栏元素确实会有些混乱。 例如，“跟随”按钮旁边有一个带有单个加号的绿色按钮。 一个仅使用符号，另一个仅使用文本。 这与设计样式和其他配置文件信息不一致。

我最喜欢的是时间线中数据的清晰结构 。 一切组织得井井有条，甚至还有侧边栏链接，可在最新帖子和热门帖子之间切换。

内容密集的重新设计

像Facebook这样的大型网站要处理更多的数据，而用户群则希望轻松访问这些数据。 在MagicVoltage 重新设计的首页中 ，您会发现一个一致的功能：很多内容被挤到一个页面布局中。

Facebook的主页是用户首次访问该网站时看到的初始时间轴视图。 它包括来自朋友的最新帖子，聊天列表，游戏，广告以及其他相关信息，例如即将到来的生日。

这种布局的繁忙性使它既很棒又可能引起争议。 一旦您真正了解了所有内容的位置，将所有这些内容都放在一页上就可以非常轻松地进行导航 。 而且左上角的图标链接足够模糊，可以阻止任何人与它们进行交互。

但是，为了捍卫这种设计，它可以很好地处理密集的内容。 元素之间有足够的空白 ，它出色地运行了四列设计。

大量导航

由马塞洛·席尔瓦（Marcelo Silva）创建的所谓的Facebook 2.0重新设计确实让人眼前一亮。 他的演示版式显示了带有时间轴和部分隐藏的聊天联系人的更新主页。

分层导航系统是此设计的重要组成部分。 我喜欢带有图标链接的主要导航，该图标显示辅助链接。 在上面的屏幕截图中，用户正在选择配置文件图标，该图标具有用于浏览最近历史记录和编辑配置文件的链接 。

与Facebook的传统方形照片不同，Marcelo的重新设计选择了圆形照片 。 这种风格在时间轴和聊天列表中无处不在。

M助手和近期活动清单

关于史蒂文·麦凯布（Steven McCabe）的FB重新设计，还有很多话要说 。 实际上，许多领域，如游戏和近期活动，都经过了彻底的重新设计，令人印象深刻。

史蒂文的设计比Facebook当前的配色方案要暗得多 。 我喜欢它，因为它在侧边栏和主要页面内容之间建立了更多的对比 。 Facebook当前的主页拥有大部分此类内容，但随着时间的流逝，它可能会融入后台。

标头仍使用红色气泡表示通知。 在右侧栏中，也有热门的帖子和新闻提要，可以按好友的近期活动进行排序。

在最底部，您会注意到一个小框，用于存放Facebook的M ， 相当于 Facebook用户的Siri 。

此功能在重新设计中并没有引起太多关注，但Steven竭尽全力使他的概念真正代表现代Facebook技术。

四列时间轴布局

这是日本设计师Sho Kameya 重新设计的另一个4 col主页 。 所有这些列都覆盖整个页面 ，包括宽度和高度。

最左侧的侧边栏重点放在游戏，应用程序，页面，开发资源和其他类似项目的传统Facebook链接上。 接下来是内容栏，在所有重新设计中，内容栏最多样化。 这不会保留用于更新状态/添加照片的传统链接，而是使用带有隐藏选项的简约方法 。

右侧的两个侧边栏包含其他所有内容，以及更多照片，例如用户头像和游戏图标。 这种设计仍然保留所有更新，例如生日，聊天和朋友推荐。

这种设计非常多样化，但始终忠实于Facebook功能的核心。 它可能不是完美的重新设计，但它显示了四列布局的可能性 。

带有深色聊天列表的简化UI

Ben Hartley重新设计的目标是简单和精巧。 布局结合了平面设计概念和较大页面元素上的一些阴影。

许多品牌商品保持不变，他依靠Facebook传统的蓝色/灰色配色方案。 但是您会注意到一些图标已经过重新设计，变得更小或更简单 （或两者都有）。

此布局还依赖于圆形化身，并为与帖子共享的图像留出了足够的空间 。 我真的很喜欢他的更新的聊天列表，其中包含较深的配色方案和较小的状态图标 。

尽管Ben的重新设计仍然有些混乱，但确实感觉很简单。 如果没有在浏览器中进行UX研究，就很难评估用户体验，这将是一个艰难的设计。 乍一看，它似乎更易于浏览，并为消费时间线内容提供了更多空间 。

结语

尽管这些示例主要集中在Facebook上，但是所汲取的教训可以应用于任何网站。 出色的用户体验设计超越了所有语言障碍，这是数字创作过程中至关重要的部分。

随意从此分析中借用想法，甚至在您自己的项目工作中实施类似的想法。 另外，如果您发现任何相关的Facebook重新设计，请随时与您自己的分析分享评论。

翻译自: https://www.hongkiat.com/blog/analysis-facebook-redesign-interface-concept/