2016年UI设计趋势分析(1)

来源:网络   作者:热心网友   发布时间:2016-09-19    浏览次数:326

进入2016年后,我们会发现行业在体验设计上出现了很多新的元素,这篇文章的初衷是希望能更系统更全面地梳理出一份流行趋势的分析,能对我们平时的工作能产生一定的指导作用。

前言进入2016年后,我们会发现行业在体验设计上出现了很多新的元素,从我们平时经常浏览的设计社区中,这些新元素出现的频率越来越高,比如彩色投影、双色调渐变设计等,我们也慢慢开始接受这些新变化,并且逐步应用到我们的产品中。这篇文章的初衷是希望能更系统更全面地梳理出一份流行趋势的分析,能对我们平时的工作能产生一定的指导作用。


使用模糊背景

模糊背景和iOS毛玻璃效果非常的相似,也符合时下流行的扁平化和现代风的设计,设计效果十分的赏心悦目,可以很好的和幽灵按钮以及时下流行的元素搭配起来,提升用户体验。

以淘宝电影为例,采用的是虚化电影海报作为背景,这样做的好处是每一个页面的头部效果都不一样,这样的排版视觉效果更佳,同样也突出电影信息等主要内容。从设计的角度来看,这也很容易实现,让内容模块变的清晰,同时可以规避复杂的设计,还可以降低设计成本,花最少的时间达到最大的效果。



大字体的使用

每个APP都希望用户停留的时间更长,从各方面去争取用户的注意力,而更大更醒目的字体运用刚好符合这一需求。当前的市场情况,大屏手机是主流,这一点是非常重要的使用背景。

大字体在移动端上呈现,会赋予界面以层次,提高特定元素的视觉重量,给用户眼前一亮的感觉。而且现在的界面设计趋势更有杂志风的方向,大字体,模块化,用图片替代色块作为背景。

其次字体够大,够优雅,够独特,同时也能提升页面的气质和特色,很多用户会因为页面好看,符合审美,就会决定留下来,即使功能并不很满足需求。这对很多app提升用户粘性是一个重要发方向。

0234f157d7a1390000018c1b4e29f6

以蘑菇街产品uni为例子,文章详情页原来的标题和正文字体分别是36px和28px,改动后的大小分别是56px和34px,整体页面的信息密度降低了,同时字体变大阅读效率也有所提高。

022cb057d7a1c70000012e7eba53dd



用空间来间隔

通过线条和分隔符来进行划分内容区块是之前所流行的处理方式,但是这样界面的元素会很拥挤。通过空白空间来划分区块能让界面更加通透,构建更加优秀更干净的界面。

移除分割线和分隔符可以为界面提供更加现代化的外观,专注于功能,比如可以将图片和字体放大,提供更加清晰的层级划分和更优的易用性。通过空间间隔来划分区块是一种非干扰性的设计,更匹配时下流行的风格和设计的需求。

主打图片社交的网站Pinterest,在最新的一次改版中直接把卡片的背景去掉了,这是一种非常大胆的尝试,但是效果也是明显的,整体图片内容更加清晰和通透了。

0236c157d7a13c0000012e7e42c3f1

同样还是举uni的例子,为了让不同模块之间的区分更明显,一般我们会设置背景为灰色,内容为白色卡片,这样可以更突出内容。新的设计我尝试把灰色背景去掉,同时加强了模块的标题,通过间距来划分,内容元素也并没有因为没有灰色背景的区分而变的混乱,界面的整体感变强。

02b24857d7a2060000018c1be1f1e4

微交互

围绕特定的用例,通过微妙细小的动效或者交互强化它的视觉效果,通常能达到意想不到的效果,而且也能让用户感受到产品设计者的用心。 当你完成某个过程的时候,比如收藏某个条目、弹出提示框,这个时候微妙的动画会强化这些动作,将这些控件同其他的元素区分开来。

这些微交互能够作为信号提示,来提醒用户动作和任务的完成,它们不仅简单而且自然,有时候我看到这样趣味性的交互还会停留一会多查看几次。

即刻点击其中一条没有链接的内容,如果没有跳转,该条内容会左右晃动,顶部会出现提示的文案条,这种设计给人的感觉非常自然,没有干扰;

豆瓣查看大图,按住图片移动的时候会显示背景,可以任意滑动,松开的时候就返回到小图模式;

Uber点击查看司机信息的时候,地点信息会隐藏,司机照片和汽车信息会分开展示,查看完又会收起来,界面使用效率很高,动画过渡很自然。

02750957d7a2410000018c1bf5d58a


12共2页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

标签:ui干货

相关推荐

http://www.shejixf.com/shejijiaocheng/uisheji/4964.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通