2018年UI的设计趋势分析

设计趋势往往会受到当今主流媒体,技术的发展,时尚趋势等等影响,设计趋势一般是慢慢形成的,循序渐进的。当然,随着时间的交替也会以同样新旧交替的形式变得落后。2018年的设计趋势将继续延续2017的设计形式,同时也增加了许多新的方式,下面我们就一起来扯一扯。

先来看一下整体目录:

(声明:本文展示图片来源于网络和应用截图,如有侵权,请联系删除)

一、扁平化、极简主义设计依然是主流

扁平化相信大家已经很熟悉了,概念的核心意义是:去除冗余、厚重和繁杂的装饰效果,倡导简单、清晰、空间、留白等,突出核心的设计元素。目前很多app都开始去除多余的线条,通过间距来拉开关系;去icon化也是一种趋势,开始流行;这些设计行为目的都是为了让用户使用时更为直观和更有目的性,令人满意的审美趋势也让极简的ui设计拥有良好的用户体验。

二、更大 更粗的字体、留白更多

相信你们很多人已经升级了iPhone新系统,随着ios11的发布,新的设计趋势也随之流行开来。如果你熟悉Material

Design(以下简称MD)的话,ios和Android在设计上正慢慢的靠近。在扁平化设计中,文字排版影响着信息层级展示的清晰与否,通过文字的字号、字重、间距、颜色等对比去建立出清晰的信息层级,而不用太多的装饰元素。

同样的,Airbnb也采用了粗标题设计。大标题文本包含一组带有图片和描述的文字,文字之间保持较大的留白,看起来它们互不干扰,又不会令界面看上去显得松散,因而带给用户非常轻松的浏览体验。

(对于一些国内的电商App,我个人猜测采用这种设计方式的可能性较小,因为对于这些应用,页面内的位置相对寸土寸金,应该不会用大字体来浪费空间)

三、页面icon的3种设计趋势

1.icon图标的变化,由线转面

自ios7开始,苹果规范了2px的线性图标;到了ios10中,线性图标的选中状态变成背景填充样式;而在现在的ios11中,采用了面性图标,未选中和选中状态只有颜色上的区分,并且图标更加圆润,目前这种设计,国外的app用的比较多,国内还相对比较少见,采用ios10的样式较多。

2.给icon图标加上动效,更加有趣味

目前很多app已经给页面底部标签栏的icon加上微动效,这类动效起到的是画龙点睛的作用,不太会被注意,察觉到会让用户觉得很有趣味,比如阿里的淘宝、菜鸟裹裹…我觉得鹅厂的QQ做的最有意思,底部标签栏icon不仅有微动效,而且icon的笑脸会自动转向看向被点击的一侧,并且长按icon移动时它也会根据手指的方向转动,十分有意思,符合当下95后00后的用户心态。

3.icon的细节刻画越来越重要

目前icon的设计已经不单单只满足于简洁易懂为前提,同时细节的设计也十分重要。在色彩上可以加以渐变,线性图标也可以加以色彩的对比等等,会显得icon是精心设计过的,带给用户的感受也会上一个档次。

四、卡片 投影相结合

ios11中采用了大圆角卡片设计,它不再像过去MD中的小圆角那样呆板,大圆角让设计更加轻快大气。相信大家已经看到了很多卡片都使用了投影这一手法,轻微的、似有似无的投影,不会被用户立即察觉,但是会给设计增加深度,形成层叠的关系,更加醒目,可以更好的抓住用户的注意力。

五、渐变色当然依旧十分流行

渐变色是今年最大的趋势之一,开始于16年,Instagram将自己的logo改变成渐变色,这一趋势便开始流行,国内的app也开始效仿,目前淘宝、QQ等状态栏就是使用自己的品牌色进行渐变。在设计渐变色的时候,要做到色彩的过渡柔和,颜色明快,避免生硬,可以有效的提升用户体验。

六、3D效果正流行

今年C4D大热,相信大家已经感受到了,今年双十一很多商家都使用了3D效果,有的还加上了动效,可以让你全方位、多角度、更加真实的观察商品。目前还不会C4D的设计师们,为了提升你的竞争力,有必要学起来了,毕竟技多不压身。

七、插画风格也是大趋势

插画风格运用的越来越广泛,适用于app当中的启动页、缺省页、banner图、专题头图、弹窗插画、icon等等,运用时要和app的整体风格搭配,有趣味、富有创意的插画会让用户对app的好感大幅提升。

btw,今年比较流行的孟菲斯风格设计,我个人也很喜欢,在地铁站看见各大品牌挂出的海报十分抢眼。该风格色彩比较鲜明、活泼、多采用高饱和色彩,18年估计还会继续流行一阵。

八、交互动效一直很重要

交互动效越来越多的使用在ui设计中,它对于产品设计的作用包含:传递层级和状态信息,好的动效应该是隐形的,以提高可用性为前提,提升体验为目的。它的几点特性:快速且流畅、恰到好处的反馈、提升操作感受、提供良好的视觉效果。

九、动态视频的应用

1.启动页的小视频

一般小视频使用在启动页多用于第一次打开app的场景,对用户的代入感较强,能够很好的感染用户的情绪,但是视频时间不宜过长。

2.由动态图片转变成动态视频

自16年开始流行的动态图片,即:cinemagraph,17年也流行了一阵,一般常见于微信配图,核心是图片中有少量的动态元素,仿佛赋予图片生命,比较唯美和贴近现实。

为了吸引更多用户的注意力,手机banner设计上采用了动态视频进行展现,另外淘宝商品详情页也会放置动态视频效果,方便360度的查看商品,刺激你剁手的欲望。

另外一些网页的首页也会放置高质量、有故事性的视频,会让你的网站与众不同。

十、响应式设计

随着移动端的增长,手机已经超越了pc机作为日常浏览网站的第一选择,Google推出的MD响应式栅格系统,由于人力成本过高,国内大部分网页都没有做,国外采用响应式设计的网站有:Youtube、Spotify、Behance…国内的有京东、腾讯视频等。这种响应式设计确实比较复杂,但是这个趋势会一直继续下去,对于产品、公司而言,还是需要量力而行的进行升级。

十一、VR/AR/VUI是未来的大趋势

众所周知,现在VR(虚拟现实)和AR(增强现实)大火,它俩的核心都是计算机视觉。VR目前在娱乐领域被使用,而AR将会真正影响我们的工作和生活,多用于多媒体、市场营销、教育等方面。

17年春节支付宝的VR找红包,美图秀秀等拍照软件的功能普及,这类交互方式都是对用户的代入感比较强烈,体验感较好。

从Siri、Amazon echo、Google home、小冰等等的发展来看,VUI(语音用户界面)与GUI不同,属于一个新领域,将基于“对话”进行设计,呈现给用户的主要是说和听。VUI是最自然也是最省事的交互方式,但是不会完全取代GUI,而是更好的协作。

这些领域对于设计师而言都是比较新颖的,也是发展初期,我们需要时刻保持学习的心态,提升自己的竞争力。

以上内容是个人对ui设计趋势的一些总结,欢迎大家进行补充!thanks!

作者:EasonZhang

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,383评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,522评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,852评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,621评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,741评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,929评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,076评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,803评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,265评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,582评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,716评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,395评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,039评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,027评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,488评论 2 361
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,612评论 2 350

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,837评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,066评论 4 62
  • 《欢乐颂2》播出过半,从第一部开始,它掀起的话题就没有断过。关于安迪的高冷,曲妖精的拎得清,樊大姐的捞女,还...
    旖凡能量加油站阅读 1,603评论 3 19
  • 情书有甚用, 恁多年也没写尽情深与爱浓; 言语有甚用, 从来也道不完分别与重逢。 当我说“爱”,所有的声音低到土里...
    勒布朗不是德怀恩阅读 292评论 2 4
  • 十月二十六初识 ,因为朋友说一起约着玩国粹 ,当然肯定不是高端大气的项目(麻将) ,在一个茶馆见到了她 ,第一感觉...
    Scorpio阿井阅读 347评论 1 1