欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

浅析Facebook改版设计

发布时间:2017:08:26 00:01:26 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1425个文字,预计阅读时间4分钟
导语
Facebook最近在他们官方博客发布了他们改版一些界面,并且官方已抛出此次改版的目的,新闻Feed流更易读,更方便交流,更容易导航,内容为核心,减少不必要的UI元素。一般大公司产品

  Facebook最近在他们官方博客发布了他们改版一些界面,并且官方已抛出此次改版的目的,新闻Feed流更易读,更方便交流,更容易导航,内容为核心,减少不必要的UI元素。一般大公司产品改版,可能会带着一些设计趋势,我们作为UI/UX设计师当然要多关注下,这次本着好奇心去研究分析下他们此次改版的视觉风格、交互体验和老版本的一些细微的差别。目前新版本可以看到他们改版的风格,大家可以下载更新体验下。

  

浅析Facebook改版设计

 

  旧版首页VS新版首页

推荐阅读:上瘾模型:Facebook、Twitter、Instagram是如何让用户上瘾的?

  

浅析Facebook改版设计

 

  两个版本初看,首页视觉上变化最大当然还是图标上的优化和卡片。

  视觉上:卡片拉通到两边,图标整体优化,更加轻量的线性图标,评论样式改为气泡

  交互体验上:进入内容详情页动画更加顺畅,留言评论板块上的气泡点赞动效比较吸引人,表情动效,不在是长按选择了,而是可以长按后放手再去选择合适的表情

  内容卡片样式

  

浅析Facebook改版设计

 

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

  视觉上:头像由方向变成圆形,评论区域圆形输入框,风格更加统一,去掉了之前沉余灰色底,去掉了干扰了的分割线,视觉上更加聚集内容,图标视觉重量减轻

  功能架构:点赞、评论和分享图标位置做了调整,放在了图片下面,这样图形化的元素集中在一起(指图片和图标),用户看完图片内容,觉得好,立马可以点赞或者评论

  评论区域

  

浅析Facebook改版设计

 

  评论区域修改是这次改版的重点区域,Facebook官方表示,这次修改评论区域的目的是为了用户发表的动态能够获得良好反馈,促进用户之间的交流。

  视觉上:评论区域引用了苹果消息的气泡模式,相对来说文字内容信息更集中在气泡区域里面,功能图标在气泡外面。但是这里有个问题,如果一条信息超多文字咋办,这样看起来似乎并不是很好。头像由之前方形变为圆形,相对来说留白空间要多一些,整体上看起来比较轻松有呼吸感

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

  导航

  

浅析Facebook改版设计

 

  评论区域最大的优化是导航的优化,图标整体呈线性,苹果今年刚退出的ios11的图标是面型,在这里facebook的图标是朝着另外一个方向走的。

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

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

  整体视觉分析

  

浅析Facebook改版设计

 

  Facebook整体设计给人的第一印象是更加轻量,焦点色更加年轻、科技感、安全,不像之前旧版颜色比较重,去除一些多余的UI元素,如分割线,灰色底,更加突出用户更关心的内容,更加注重用户之间的互动

  总结&设计趋势

  Facebook整体改版上视觉是更加轻量,年轻化,用户目标发生转变,聚集内容,更加注重关心用户发布内容后的所得到反馈,评论区域和内容卡片着重优化设计,以下几点根据facebook改版分析推测出来的一些设计趋势,改版方向。但是这些设计效果优化是否都是另用户满意的呢?我们目前尚不可知道,只有等待用户来评论。

  

浅析Facebook改版设计

 

  作者:TONY,音乐UI设计师,职业方向UXD,喜欢探索一切新鲜事物,爱分享,写文章

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:汉堡图标不好使?这5个替代方案帮你搞定移动端导航

下一篇:谷歌对话式交互规范指南系列:对话式界面的概念和机制

  • 18893 文章总数
  • 2303755访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信