最美UI

从Facebook改版来看未来设计趋势

近日,facebook、Messenger和Instagram热门主流的国外应用软件对新闻流的设计进行了调整,facebook在他们官方博客发布了他们改版一些界面,这次改版的重点是加入更多的线条,目的是使新闻Feed流更易读,更方便交流,更容易导航,以内容为核心,减少不必要的UI元素,吸引用户点击和评论。

facebook有所了解的朋友应该知道,它会周期性的升级自己的设计。目前为止facebook界面中干净白色区域越来越多,其主要目的是降低用户的视觉疲劳,新内容的弹出时呈现的效果更舒适。他们一直努力想要给到用户最极致的体验

 

一般大厂产品改版,可能会带着一些设计趋势,我们作为ui/UX设计师自然要多关注下,通过对比,分析他们此次改版的视觉风格、交互体验与之前版本的一些细微的差别,总结了一下供大家参考。

 

那么,facebook的到底在哪些地方进行了优化?

一、旧版首页VS新版首页

首页视觉上变化最大的是图标上的优化和卡片式设计

 

视觉上:卡片拉通到两边,图标变为更加轻量的线性图标图标整体呈线性,苹果今年刚推出的iOS11的图标是面型,在这里facebook图标是朝着另外一个方向走的,另外评论样式改为气泡。

 

交互上:进入内容详情页动画更加顺畅,留言评论板块上的气泡点赞动效比较吸引人,表情动效,由长按选择改为长按后放手再去选择合适的表情

二、内容变为卡片式设计

facebook为不同的内容流单独设计了6种卡片模式,分别是纯文字、大文字、图片、链接、视频、滚动类型卡片,通过不同图形模式来区分不同风格的内容,这样便于用户去快速识别。

 

视觉上:评论区域圆形输入框,去掉了之前沉余灰色底,去掉了干扰了的分割线,视觉上更加聚集内容,图标视觉重量减轻,头像由之前方形变为圆形,相对来说留白空间要多一些,整体上看起来比较轻松有呼吸感,风格更加统一,更加人性化。

 

功能上:点赞、评论和分享图标位置做了调整,放在了图片下面,这样图片图标集中在一起,用户看完图片内容,觉得好,立马可以点赞或者评论。

三、评论区域

让评论区更加活跃是facebook近期设计的主要目标。 在新的评论区中,facebook用上了Messenger中的气泡设计,这样的设计看起来更加清晰,同时也鼓励用户快速的交流。

 

视觉上:评论区域引用了苹果消息的气泡模式,相对来说文字内容信息更集中在气泡区域里面,功能图标在气泡外面。但是,假如一条信息超多文字的时候,视觉效果看起来似乎并不是很好。

 

功能上:导航上文字居中显示了,这明显和安卓规范不一致,但是现在区平台化慢慢逐步形成,体量大的企业都想在一些微小的区域做一些体验上的提升,导航右边新增了一个更多icon,里面功能目前尚未得知,猜测应该有投诉等信息。

四、导航

评论区域最大的优化在导航这里,新版本中,导航栏和反馈按钮变得更大也更显眼了,防止用户在复杂的新闻流中迷失,用户还能在点击链接前获知网站的大致属性。 同时,facebook在新闻流、视频、市场、点赞、评论和分享等按钮上也做了这种改变。

 

视觉上:图标优化,视觉重量减轻,导航视觉重量减轻,并没有很强度品牌了,更多是以内容为主。

 

功能架构:导航结构弱化,而是通过头像加一个返回箭头组合形成,目的是想用户更多的停留在这里和发布信息者更多互动。导航确实是一个非常重要的功能,改版后估计会有一部分用户不适应,那就后面等着用户反馈吧。 

总结&设计趋势

facebook整体改版上视觉是更加轻量,焦点色更加年轻、科技感、安全,去除一些多余的UI元素,如分割线,灰色底,突出用户更关心的内容,更加注重用户之间的互动。聚集内容,更加注重关心用户发布内容后的所得到反馈,评论区域和内容卡片着重优化设计

 

facebook此次改版可以看出,扁平化流行到今天,设计方向发生了改变,更加聚焦内容,聚焦核心功能,关心用户。华丽的装饰不再有,多余的元素会被干掉,更多的是留白。平台规范越来越弱,品牌色不再是通过颜色来强调,从facebook的二级页面导航可以看出,他们目前更加注重的是用户的心声,就像他们说的,希望用户华仔他们产品上的时间是有意义的。

文章来源: 设计师加油站

原文链接: mp.weixin.qq.com

微信公众号微信公众号:zuimeiui

扫一扫 关注公众号

0

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
APP图标:精选APP图标,看看各大app图标的设计风格提升设计感! → 猛戳这里
最美UI(zuimeiui.com)每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧!
【原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!】

上一篇
原创设计如何才能做到?
下一篇
9个关键告诉你如何设计一个完美的搜索框