电子科技集团38研究所 ,快医科技骗子 ,有限公司和科技有限公司区别

Facebook应该如何设计

时间:2019-12-28 15:21:07 | 作者:爱科技网 | 点击: 166 次

Facebook的设计在设计师和用户中引起了广泛的讨论,我也看到了很多批评:

看了一些评论后,我决定试着把它翻新一下。一开始只是一个有趣的小项目,最终发展成了Facebook的平面Chrome扩展。


在这篇文章中,我将解释平面设计的优点,然后深入探讨Facebook当前界面的一些问题,以及我希望如何解决这些问题。

如2015年免费电子书网页设计趋势所述2016年,平面设计流行的原因有很多。首先,它在性能上的优势。平面设计的页面比包含复杂图形元素的页面更容易加载。

此外,平板设计非常响应友好,很容易适应不同设备的屏幕。随着移动用户在Web上的数量超过桌面用户,平面设计对于创建设备无关的体验变得越来越有吸引力。

最后,平面设计传达了一种非常成熟的视觉美学,同时也非常容易使用。许多设计师和用户欣赏简洁之美。事实上,研究甚至表明漂亮的设计效果更好。平板设计威力的最大证明,或许是苹果公司(Apple)选择放弃其标志性的仿真界面,在最新的iOS 8系统中采用了更具平面感的外观。

在检查Facebook设计中的主要错误时,我注意到了一些有趣的UI问题。下面,我将深入探讨一些最激烈的变化,我所做的以外的整体审美。

当前接口的一个关键问题是,它并没有简单到愚蠢的程度,尤其是在访问自己的内容时。

这是可以理解的- Facebook的界面需要支持相当多的内容(时间轴,照片,游戏等)。当然,随着你的界面变得越来越复杂,认知负荷会增加,用户需要更多的思考。当它达到一个极端时,用户甚至可能不再喜欢他们正在做的事情。

在规划新界面时,不仅要考虑经济利益,还要考虑用户的动机。

一个好的界面设计是你没有注意到的。就像一只看不见的手,它只是引导用户完成他们的目标。它不包含不必要的元素(比如在主页上显示广告的5个按钮)。一切都是简明、清晰、易懂的。

下次你想在界面上添加新元素时,问问自己:“用户真的需要它吗?”

为了让用户专注于内容(这是他们最关心的),我删除了右侧的统计列表,比如“最近的帖子”和“趋势”,因为它们的次要功能并不能抵消注意力分散的特性。因此,新的界面让用户更容易地从feed中筛选他们关心的内容。

在FB最让我困惑的事情是左菜单。我不知道为什么这些元素摆放得如此不可思议。比较一下2004年和2015年的用户界面:

哪一个更容易预测(因此也更容易理解)?最初的设计实际上更容易理解,因为它都遵循“My [Category]”分类法,所以我创建的界面标签也同样清晰一致。

在当前版本的Facebook中,如果你想从主页转到其他页面,菜单会立即消失。这迫使用户额外点击,当然会增加摩擦。为了弥补这一差距,重新设计的界面包括一个“粘性”菜单,以便随时提供额外的操作。

说到排版,形式就是功能。这个想法在《2015年网页设计趋势》中有很好的描述2016:

“平面排版鼓励设计师更仔细地思考每一个类型的选择。甚至连衬线字体也随着简单字体的发展而发展,成为了规范,让内容本身脱颖而出。”

Facebook目前的Helvetica字体很薄,也不做作,考虑到界面已经看起来很忙,这是有道理的。当然,你也不希望字体太粗或太花哨而与其他元素冲突。

然而,当我简化了界面之后,我意识到更弯曲的字体更适合填充空间。我选择投石器字体,因为它容易辨认,但仍然友好。当然,它不像现在流行的一些平面字体那样光滑或性感,但也不需要如此。社交网络的字体需要清晰并能吸引用户。就像所有的设计一样,这不是最好的选择,而是正确的选择。

色彩不仅仅是一种装饰——它们创造了一种可以立即理解的情感语言。使用CSS样式,我完全平铺了调色板,以进一步简化视觉体验。如果我们遵循以内容为中心的设计理念,那么较少的梯度会导致较少的视觉干扰(这使得导航和搜索等元素更容易使用)。

在本例中,我完全避免了斜面、阴影和渐变。对于背景和菜单,大胆和明亮的颜色有助于创建自然的对比。这将把浏览者吸引到内容和导航上,而不会受到附加效果的潜在干扰。

与颜色和字体一样,空白也是一个强大的设计元素。因为空白可以提高理解能力,所以我增加了每个元素周围的空白:菜单、按钮、带有帖子的块、私有消息等。内容变得更容易深入扫描和阅读,这改善了用户体验的核心。

但是为了跟上不断提高的分辨率(研究表明高清显示器的使用率每年都在增加),您会注意到我还必须拉伸每个内容“卡片”,这样额外的空间就不会显得笨拙。幸运的是,通过删除右侧的stats列,可以有足够的空间进行操作。