美文网首页UI/交互设计规范UI设计
年更-2017那些常用App的界面变化

年更-2017那些常用App的界面变化

作者: Lame言 | 来源:发表于2018-01-25 15:47 被阅读400次

过去的一年,渐变和Complexion Reduction设计理念更加风靡,很多App的改版越来越注重字重、字号的搭配,图标的设计也更加简单和几何化,36Kr某个版本的底部标签栏甚至只用了矩形、三角形、圆形等基本几何图形来表达(后续的版本还是改回来,过于抽象的设计并无法很好的表达图标内容,更适合小众/独立开发的App),一些新闻阅读类App的按钮使用了中性色,整体的设计让用户更关注于内容本身。

分割内容的方法也不在只是卡片、分割线,通过留白,字号让整体界面更加简洁,有的App在列表还完全去掉分割线,通过间距划分内容。

导航栏和标签栏的得到了更好的利用,导航栏在滚动时可显示状态、按钮,标签栏可显示新增多少条动态,标签图标切换时的动画。

纹理叠加、等距轴测图、3D渲染,插画和运营推广设计变得丰富多彩,使用活力十足的渐变色是一大趋势。


淘宝

从淘宝V6改版大量使用渐变开始,阿里系相当多的App都用了类似的风格,渐变在背景、图标、按钮等能找得到,一些按钮还添加了轻微的弥散阴影;底部标签栏的图标动画(刷新、切换)在很多应用都能看到。


天猫

2017年天猫发布了品牌升级,带来更年轻的品牌红色,新版的天猫用了大量的卡片分割内容和模块,整体风格也比改版前更有调性。


微信

过去几年微信都没有进行过大改版。去年公众号(微信预计今年将会发布独立的公众号App)消息卡片调整了样式及排版,去掉"阅读全文"的按钮;年底的一次更新,首页为小程序/小游戏新增了入口,并为小程序设计了新的顶部导航栏,体验上更接近原生App,不像之前切换页面时明显的网页加载感。


知乎

整体的风格和之前的版本比没有大的变化,更多是因为盈利的考虑带来了新的功能布局,后续版本迭代持续优化和调整UI,首页重新设计的动态卡片虽减少了占用空间,但略显凌乱,知识变现功能整合到了市场标签,通知与私信整合到消息标签。此外,新版Web和移动端统一了视觉风格。

知乎移动端的广告越来越多 知乎Web

微博

首页新增了微博故事(instagram:what?),右滑进入录制页面。详情页面滑动时,顶部导航栏显示用户名头像、名称的设计在微博、淘宝、贴吧、App Store(iOS 11)等应用都可以看到。微博每次改版都会引发用户吐槽,这次的消息页面也不例外。2018年1月更新了点赞按钮,采用了和Facebook一样的设计。

支付宝

功能复制臃肿的支付宝,不同模块有着不一样的风格。值得关注的是2017年年底支付宝新增了"财富"标签。

App Store

更大更重的标题,更大的留白,全新设计的App Store带来新的Tab bar和Navigation bar,应用和游戏独立成两个标签,今日标签为用户展现编辑精选的App,让用户可以了解到应用背后的故事。iOS 11的UI变化也是为了更适合十周年纪念产品iPhone X的圆角全面屏,增大了卡片和应用启动时的圆角,图标从直角变为圆角,CTA按钮从描边变为更大圆角的填充按钮,为了把状态栏塞进iPhone X两个猫耳,信号格从圆点变回柱状条以减少占用空间。

iOS11中App两边的边距从以往的15pt改为20pt,为iPhone X屏幕圆角的一半


音乐类

自从某米因为版权问题下架了好多歌曲就很少用,转为用网易云音乐

虾米的图标是个亮点

下面这些App用的比较少,所以就不做新旧版本的对比,选几个变化比较大的应用。

Material Design在组件中新增了底部导航栏,并制定了设计规范和使用指导 比起支付宝,京东金融的UI整体性更强,保持统一规范的同时不丢失设计感 2017年Skype的UI做了两次大的调整,截图为V8刚更新时的样子 作为最优秀的创作平台,Medium今年会继续对Logo动刀子吗? Complexion Reduction风格的Pinterest经过版本迭代后UI更加成熟:留白和分割的高度更加合适,字号对比更加舒服。但部分页面的可点击元素不易识别

相关文章

网友评论

    本文标题:年更-2017那些常用App的界面变化

    本文链接:https://www.haomeiwen.com/subject/dtgaxttx.html