重新设计了Facebook:对独立设计的深入分析

在本文中,我想研究不同的Facebook重新设计,以分析可以改善当前用户体验的 界面概念

像Facebook这样的大型网站通过一些好元素和其他不太好元素来提供非常特殊的用户体验。

专业项目和现有网站的规范设计都是如此。

通过研究其他设计师的工作,可以学到很多东西。

如果这些想法在Facebook上实时实施,则应考虑它们的外观,功能以及如何影响可用性

我从Dribbble用户那里进行了一些自定义FB重新设计,每个重新设计都具有特定的增强功能和更新的UI元素

简化的个人资料页面

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

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

重新设计了Facebook:对独立设计的深入分析

这对于可用性非常重要,尤其是在Twitter反对最近要求的算法更改引起强烈反对之后。

时间轴帖子可以根据您的喜好按“最近”或“受欢迎”排序。

由于Facebook具有交互性,因此只有增加按钮和超链接等项目的可见性才有意义。

同样,许多按钮显示的都更大, 带有额外的填充和较大的版式

很高兴看到Facebook更加关注交互式元素,并且也许还会增加其字体大小。

总的来说,这种概念在膨胀时显得紧凑而轻巧

多列时间轴

此布局表示Facebook用户访问用户的个人资料页面时看到的个人资料时间轴视图。

Alejandro Osorio的重新设计是转向垂直的圆柱布局。

感觉确实像Facebook时间轴页面。

所有的颜色和元素都与Facebook的设计风格保持一致。

它依靠多个页面列来组织用户的个人资料链接,以及最近帖子的时间线视图。

该设计引人注目,但有些用户可能会反感。

重新设计了Facebook:对独立设计的深入分析

这与设计样式和其他配置文件信息不一致。

一个仅使用符号,另一个仅使用文本。

例如,“跟随”按钮旁边有一个带有单个加号的绿色按钮。

但是,有些侧边栏元素确实会有些混乱。

一切都井井有条,甚至还有侧边栏链接,可在最近的帖子和热门的帖子之间切换。

我最喜欢的是时间轴中清晰的数据结构

内容密集的重新设计

在MagicVoltage 重新设计首页中 ,您会发现一个一致的功能:很多内容被挤到一个页面布局中。

像Facebook这样的大型网站要处理更多的数据,而用户群则希望轻松访问这些数据。

它包括来自朋友的最新帖子,聊天列表,游戏,广告以及其他相关信息,例如即将到来的生日。

Facebook主页是用户首次访问该网站时看到的初始时间轴视图。

重新设计了Facebook:对独立设计的深入分析

而且左上角的图标链接足够模糊,可以阻止任何人与它们进行交互。

一旦您真正了解了所有内容,将所有这些内容都放在一页上就可以非常轻松地进行导航

这种布局的繁忙性使它既很棒又可能引起争议。

元素之间很多空白,并且它出色地运行了四列设计。

但是,为了捍卫这种设计,它可以很好地处理密集的内容。

大量导航

他的演示版式显示了带有时间轴和部分隐藏的聊天联系人的更新主页。

由马塞洛·席尔瓦(Marcelo Silva)创建的所谓的Facebook 2.0重新设计确实让人眼前一亮。

重新设计了Facebook:对独立设计的深入分析

在上面的屏幕截图中,用户正在选择配置文件图标,该图标具有用于浏览最近历史记录和编辑配置文件的链接

我喜欢带有图标链接的主导航显示辅助链接的方式。

分层导航系统是此设计的重要组成部分。

这种风格在时间轴和聊天列表中无处不在。

与Facebook的传统方形照片不同,Marcelo的重新设计选择了圆形照片

M助手和近期活动清单

实际上,许多领域(如游戏和最近的活动)都经过了彻底的重新设计,令人印象深刻。

关于Steven McCabe的FB重新设计,有很多话要说

Facebook当前的主页拥有大部分此类内容,但随着时间的流逝,它可能会融入后台。

我喜欢它,因为它在侧边栏和主要页面内容之间建立了更多的对比

史蒂文的设计比Facebook当前的配色方案要暗得多

重新设计了Facebook:对独立设计的深入分析

在右侧栏中,也有热门的帖子和新闻提要,可以按好友的近期活动进行排序。

标头仍使用红色气泡表示通知。

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

此功能在重新设计中并未引起足够的重视,但史蒂文确实竭尽全力使他的概念真正代表了现代Facebook技术。

四列时间轴布局

所有这些列都覆盖了整个页面 ,包括宽度和高度。

这是日本设计师Sho Kameya 重新设计的另一个4 col主页

这不会保留用于更新状态/添加照片的传统链接,而是使用带有隐藏选项简约方法

接下来是内容栏,在所有重新设计中,内容栏最多样化。

最左侧的侧边栏重点放在游戏,应用程序,页面,开发资源和其他类似项目的传统Facebook链接上。

重新设计了Facebook:对独立设计的深入分析

这种设计仍然保留所有更新,例如生日,聊天和朋友推荐。

右侧的两个侧边栏包含其他所有内容,以及更多图片,例如用户头像和游戏图标。

它可能不是完美的重新设计,但它显示了四列布局的可能性

这种设计非常多样化,但始终忠实于Facebook功能的核心。

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

布局结合了平面设计概念和较大页面元素上的一些阴影。

Ben Hartley重新设计的目标是简单和精巧。

但是您会注意到一些图标已经过重新设计变得更小或更简单 (或两者都有)。

许多品牌商品保持不变,他依靠Facebook传统的蓝色/灰色配色方案。

重新设计了Facebook:对独立设计的深入分析

我真的很喜欢他的更新的聊天列表,其中包含较深的配色方案和较小的状态图标

这种布局还依赖于圆形化身,与帖子共享的图像提供了足够的空间

但乍一看,它似乎更易于浏览,为消费时间线内容提供了更多空间

如果没有在浏览器中进行用户体验研究,就很难评估用户体验,这将是一个艰难的设计。

尽管Ben的重新设计仍然有些混乱,但确实感觉要简单得多。

包起来

出色的用户体验设计超越了所有语言障碍,并且是数字创作过程中至关重要的部分。

尽管这些示例主要集中在Facebook上,但是所汲取的教训可以应用于任何网站。

另外,如果您发现任何相关的Facebook重新设计,请随时与您自己的分析分享评论。

随时从此分析中借用想法,甚至在您自己的项目工作中实施类似的想法。


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