设计回顾:两年前这些APP长这样

用户头像
南京/UX设计师/5年前/889浏览
设计回顾:两年前这些APP长这样
用户头像
王M争

带你回忆一下两年前的APP什么样

因为我的家庭条件,我已经两年半没有换手机了。手机里存了很多APP的截图,最近翻开看了一下。对比现在手机上的APP,有的产品已经凉了,有的产品改的面目全非,有的产品却只是微调。这里我分别从视觉跟交互层面来分析一下,这两年产品设计究竟发生了哪些变化。


漂白的界面


首先从视觉层面上来说,自从iOS 7引领扁平化风潮以来,移动端设计在视觉层面并没有做出很大的改动。以网易有道词典里精品课程为例,在不考虑产品功能的前提下,仅从设计风格上来看,我们很难区分哪个是18年的产品,哪个是20年的。


当然,有些产品的界面设计在这两年里发生了很大的改变,我先说一个小众的产品—— V380。这款APP我估计99%的读者都没有用过。


18年初,我遇到一些烦心事,在家门口安装了一个摄像头,使用这款APP就可以实时查看视频监控。下图左边的这个就是当时查看录像回放的界面,是不是满满的年代感?



接着我们再看了一下现在的界面,可以发现跟两年前相比最大的改变就是整个界面变白了


“界面漂白”可以算是最近两年以来界面设计中最为流行的设计趋势。从微信到B站,从网易云音乐到QQ音乐。基本上所有我们熟悉的产品,都在变白。这其中,以微信的改版最为人瞩目。

网易云音乐


B站


QQ音乐


2018年底的微信7.0版本,微信改成了白色主题。这个立马引起很多老用户的不满,他们觉得白色太晃眼了,不适应。“微信改版”很快登顶微博热搜,然而热搜第二却是尴尬的“后悔更新微信吗?”。现在一年半时间过去了,不知道他们有没有适应白色版的微信。



消失的线条


对比两年前和现在的APP界面,你可能会发出疑问:线条都去哪儿了?微信的消息框描边没了,歌曲列表的分割线没了。

微信

网易云音乐


我不是鹅厂和猪场的内部人士,我也不知道他们为什么做出这样的调整。但是我知道的是 早在17年苹果推出iOS11开始,就已经开始采用这种“去线化”设计思路。

iPhone解锁按钮样式由线性改成填充


App Store 购买按钮样式由线性改成填充


在我个人看来,上面提到的两个设计现象——漂白化和去线化,其背后的推手都是“内容至上”的设计理念。

在一个界面中,究竟哪些元素我们可以称之为内容?那些我们不能定义为内容的“东西”应该是什么?对于发朋友圈这个操作来说,内容应该是中间的编辑区,因为我们要在这里编辑文字和图片。

顶部栏是内容吗?不是,它只是展示了页面的标题并且承载了“发布”按钮,用户很少会在顶部栏上进行高频操作。发一次朋友圈,只会点击一次“发布”按钮。


但我们对界面进行高斯模糊处理,根据醒目程度判定时,发现最醒目的是顶部栏,最醒目代表着最高的优先级。“发布”按钮的确很重要,但是并不意味着它的“容器”也是同等的重要。把顶部栏背景色改成白色,可以让用户的视线更聚焦于内容本身。

从线性到填充

线条,可以帮助用户区分界面中不同级别和维度的的内容,完成信息层级的构建。而线条本身,不属于内容的范畴,所以不应该享有跟内容同等的视觉标识。

所谓内容至上的设计理念,就是尽量弱化或隐藏非内容区的设计,把用户的可视范围最大化的利用在内容本身身上。

很多优秀的设计师会定期归纳总结近期的设计趋势,这是一个非常好的习惯。但是如果我们的总结总是止于现象的归纳,而没有去分析其背后的原因。我们得出的结论往往会是错的,例如,你发现APP里线条越来越少了,所以你得出一个结论: 以后设计尽量少用线条。

但是你会发现,一些APP里的线条不仅没有消失,反而变得越来越粗了,淘宝和有道词典都对搜索框的边框进行加粗处理。 很明显是为了让用户更加重视搜索框。
“反主流”的粗线条

如果我们不加粗线条,怎么把用户的注意力给吸引到搜索框呢?聪明的你肯定会想到 ——  使用深底色来增强对比!这下好了,淘宝一夜回到两年前。


“删除线条”和“加粗线条”,看起来很对立,但其实是把用户的可视范围最大化的利用在内容本身身上的两种不同的实现方式。

底部空间


交互层面上来说,这两年来各家APP开始把注意力放在对底部空间的使用。其中最典型的例子就是夸克,首次使用APP都需要用户同意服务协议,百度的授权弹框出现在中间位置,而夸克的弹框却出现在界面底部。


不仅是弹框,夸克的搜索框在底部,搜索词的关联记录也会出现在底部。从我个人角度来说,我不是很适应夸克这种交互模式,因为跟我们正常自上而下的浏览习惯相冲突。


当然,这只是我自己的观点,我一向不主张对交互模式做出好坏的价值判断。我只能代表我自己,我无法代表它的目标用户群。我只能说夸克这种对底部空间进行极致应用的交互模式,非常的非主流。至于能不能在未来成为主流,我们拭目以待。

为什么夸克和其他APP如此的重视底部区域呢?移动端设计出现了新的趋势,一般只有两种原因: 1 硬件设备发生重大改变;2 苹果/谷歌设计团队发生重大人事变化;


这里我更倾向于第一种,2017年9月,苹果推出了iPhone X。iPhone X 打破了苹果沿用了多年的16:9屏幕比例,超过了19:9。手机越来越长了,我想起了爱情公寓出现的iPhone 18,果然艺术来源于生活。


越来越长的手机意味着用户的拇指很难够得着界面顶部区域,把操作热区移到底部更适合用户进行单手操作。

无独有偶,在iOS 13中苹果新增一种模态视图。例如,我要发短信,不用单独新开一个页面,直接在当前页面出现一个临时视图,可以帮助用户快速的理解信息的层级。那么如何关闭这个临时视图呢? 你可以选择点击右上方的“取消”按钮,当然更简单的操作是直接下滑关闭临时视图,手指不用够得那么远,手指在底部区域就能完成关闭视图的操作。


随着全面屏的普及,手机越来越长刘海屏,界面左上角的返回按钮或许使用次数会越来越少。

尝试分析设计潮流背后的推动力是非常重要的,可以帮助我们透过现象看本质。当然在大多数情况下,因为信息的不对称性,我们思考得出的答案往往是错的,但是思考的过程远比得到那个答案更加的重要。人类一思考,上帝就发笑?对不起,我是无神论者。

以上就是我对最近两年设计潮流得出的一些想法,欢迎留言交流。


40
举报
|
34
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
钱包ui模板
UI通用设计素材1
Security Camera UI kit
高级表盘系列UI源文件
UI界面 组件
矢量立体简约UI蓝白图标
【新年UI图标】30个图标
柠檬黄主题UI作品集模版
新能源APP应用UIKit
盲盒APP UI设计
【新年UI图标】美食icon
【新年UI图标】酒店icon
手表表盘UI系列
智能家居中心 简约 UI设计组件库
【新年UI图标】游戏/娱乐icon
【新年UI图标】影音icon
UI应用平面图标
【新年UI图标】美妆icon
【新年UI图标】珠宝icon
新拟态风格 UI设计组件库
【新年UI图标】家具icon
科技医疗透明柜UI界面设计
你可能喜欢
相关收藏夹
大家都在看
登录注册