2017年流行界面设计趋势回顾

2018,新一年到来,即将迎来新的挑战和新的视野,我们想回顾一下,回顾这即将结束的一年是怎样的。在这里,我们收集了在2017年Web端和移动端界面赢得大奖的趋势的集合,其中案例大部分为Tubik团队的设计。


功能极简主义

相当多的移动应用程序和网站基于极简主义的原则不断发展和设计解决方案。极简主义界面的特点是对视觉元素的全面关注,不多,但总是传递一个特定的信息。

在极简主义方面经常提到的主要特征包括:

·简单

·清晰

·富有表现力的视觉层次

·高度重视比例和构图

·每个元素的功能

·大量的空余空间

·对核心细节的高度关注

·字体设计是一个重要的设计元素

·消除非功能性装饰元素

当然,这些原则可以继续沿用,但即使是给定了风格,界面的简约相对而言是一个用户友好体验的趋势。好的应用,它会帮助用户看到界面的核心元素,使用户使用起来直观而有目的。此外,极简主义的界面通常外观精巧整洁,带来的美感也成为理想的用户体验的因素之一。


粗犷

排版设计中的粗犷的趋势去年开始飙升,2017年的表现更加明显。它通常被描述为旨在打破标准和可预见的设计技巧的风格。以这种方式创建的网站,是对精致设计的反叛,它具有深思熟虑的对称性和和谐性,集成的布局和审美视觉表现力。相比之下,粗犷主义是基于简单和原始的外观,在大多数情况下不加载许多视觉细节,有时甚至接近一个纯HTML页面。它被用于特定的目标和受众,具有高水平的独创性,并赋予数字产品独特的外观。它可能被喜欢或不喜欢,但它从来没有被忽视。

字体集成到图像中

大胆和吸引人的排版也高度存在于Web和移动布局中。今年,通过将标题关键字或标题融入在页面上的视觉元素中,增强了布局元素的和谐与完整性,使排版与界面中的所有内容紧密结合。

首焦Banner动画

在网页设计中,首焦Banner是在与网站互动的第一时间吸引用户注意力的大图。它们通常主题明确,突出关键内容并有效抓住用户眼球。首焦Banner证明它们在设定情绪或传递信息方面非常有效。而且,除了网页上的任何其他醒目的图形外,它是一种内容丰富而又情感化的内容。突出的首焦Banner可以达到多个目的,例如:

·吸引用户的注意

·直观地传递消息

·支持一般的文体表达

·设定需要的主题、情绪或氛围

·有效展示核心收益或项目

2017年,他们通常用原创动画形象强化,让设计更生动,使他们更具吸引力。

定制主题插图

不同的风格和复杂程度的定制插图,正积极地覆盖越来越多的Web和移动用户界面,增加了对信息的快速感知,为创意打下坚实的基础。Web和移动界面应用通过定制的吉祥物图标插图来增强页面或屏幕的外观,并提高可用性和直观的导航。此外,图像改善了用户体验设计的可访问性,推动了对具有文本识别自然问题的用户的感知极限,例如阅读困难或未阅读的学龄前儿童。

这里最丰富的,可能是支持网站和应用程序的主题插图。他们似乎进入了一个新的层次,变得更加精致、更复杂、更时尚、更具隐喻性。

无边框布局

在今年的网页界面中,经常观察到没有任何框架的大背景图片或图案。它让用户感觉到布局更加通透宽敞,而背景图像嵌入其中,又不会打破界限的感觉。

丰富的界面动画

和2016一样,2017年在界面动画方面继续深入。它不仅增加了交互过程中的趣味和手势,而且大大提高了可用性。用户体验变得更加丰富和引人入胜,而交互元素的操作变得更加清晰,并以可理解的方式回应用户。所以,今年设计师在各种按钮,标签,图表,预加载器和滚动动画上运行良好。

UI-friendly branding

2017年可以说是品牌重塑的一年,大量的全球和本土公司、产品和品牌都将Logo的形式和细节进行简化。随着越来越多的企业争夺更高的在线业务,这一趋势的原因之一是争取更好的可用性和品牌元素的导向力。所以,为创建更友好的用户界面(UI-friendly)而设计新的Logo或对已有Logo的再设计,并使a其在各种数码设备和布局上有效地感知互动。此外,动态Logo成为一个趋势,使品牌符号更具交互性,并强化品牌意识。

logo_animation

单色的用户界面

为了获得最大的功能,对简约设计的兴趣日益浓厚,导致了大量单色UI解决方案的出现。这些布局通常外观时尚、和谐、使注意力集中。然而,设计师们必须投入大量的时间和精力,使之不枯燥,让交互的核心元素则瞬间可见。

深色背景

使用深色背景的移动和Web界面不仅承载该有的信息,并且还突显了它们的存在。特别是,它们通常应用于基于视觉效果而不是复制的数码产品中。深色背景通常伴随着沉稳和安全感,它们加深了对图像的感知,并且可以使界面在不同环境下的对比度更为明显,更自然。此外,现在相当广泛的目标受众喜欢这种风格。

复制留白

另一个趋势在基于深色背景方案的界面上特别流行,它还提供了一个适当的可读性的方法,设计师为突显核心数据块采用浅色背景的区域或空间,使其在屏幕或页面上形成对比。

字体的选择和对比

随着众多新字体的出现,用户界面设计师有了一个创造性实验的广阔领域。今天,文字不仅被视为沟通的手段和向用户传达信息,而且是所有设计理念的组成部分。因此,专业人士非常重视字体的选择和组合。今年,我们采用了衬线和无衬线字体设置对比的新方法,使其具有强大的视觉层次和界面吸引力。

网格实验

随着超十亿网站发挥作用,设计师们必须越来越努力,使它们既有吸引力又有创意。因此,网格也在今年的总体设计趋势列表中占据了一席之地。自定义网格是一种以保存自适应布局并以更高层次的灵活性和独创性放置元素的方式。然而,这种创造力需要更透彻的研究,而有效的结果往往是通过多次迭代测试和对可用性和视觉感知的分析。

登陆页面

毫无疑问,今年的登陆页面见证了新的发展和多样性。企业和社会项目往往会定期使用这些服务来有效地提供定制服务、销售、报价或吸引用户注意力的问题。登陆页也被证明是本地移动应用推广的有效方法。基于用户和市场调查以及测试,可以将其定义为用户友好的趋势之一,以清晰易用的方式提供必要的信息和交互,从而节省用户的时间和精力。从业务的角度来看,他们也很好的配合灵活的工具进行有效的沟通。

创造性的视差

随着更多的可移动和运动工具的设计,滚动动画保存了它在Web和移动领域中广泛应用的技术的位置,创造性和原始视差增强了滚动体验,使人眼更加自然,并为这样的基本操作增添了优雅。

网络营销视频

更多不同类型的营销视频出现在屏幕和页面上。他们有效地为市场目标服务,提高品牌知名度。一个富有创意和吸引人的视频是吸引客户注意力的一种好方法,也是快速而直接地告知顾客的有效方法。一个视频可以激活多个感知通道——听力、视觉,并通过讲故事的力量来强化它们。所有这些因素都倾向于通过视频进行呈现,特别是基于高质量的图形设计和动画。人们每天都会被各种各样的信息所淹没,所以大多数人没有很多时间去学习产品或服务,尤其是新产品或服务。在这种情况下,视频成为了一种动态的、信息性的、吸引人的交流方式。

游戏化机制的交互

近年,人们对各种界面的游戏化趋势越来越感兴趣,不仅仅是娱乐,还有公用事业和商业产品。在科技世界里,“游戏化”这个词代表了将游戏机制运用到非游戏环境中,如网站和移动应用程序。挑战、奖励、积分、徽章、排行榜和其他这类的东西,帮助设计师思考有效的用户激励和留住用户的方式。

作为布局元素的框和卡片

2017年UX设计的另一个趋势是移动网络和移动设备中卡片和盒子的多样性。他们在设定视觉层次和快速扫描信息方面发挥了重要作用。此外,他们成功地为页面或屏幕的整体谐调性起到了作用。

几何元素作为风格的一部分

沿续以前的趋势,今年在几个界面上几何的共鸣。各种简单而复杂的形状、图案、线条和曲线,在传统和创新组合的众多设计解决方案中经常看到。

实验性调色板组合

色彩探索的趋势并未消失,带出了新的原始组合。毕竟,颜色是将快速感知的信息和情绪添加到界面以及使其外观具有独特性和吸引力的最有效方式之一。无论如何,有效的色彩尝试不仅仅是纯粹的创造力:即使是最有创造力和令人惊讶的组合,也是基于色彩理论知识、色彩心理学、用户界面设计技巧。

没有Lorem Ipsum

今年对内容质量和性能的关注度不断提高。在用户界面中,内容和设计相互关联:创作者必须使他们成功地互相支持,而不是争夺用户的注意力。这就是为什么现在越来越多的设计师更喜欢真正的内容,而不是众所周知的Lorem Ipsum,在设计概念初始构思的情况下,它让设计师,客户和内容制作者更接近真实的体验和自然的互动感受。

毫无疑问,2017年是界面设计多元化的一年 , 也是最受用户欢迎的趋势之一。每天有数以百万计的用户,使用或简单或复杂的应用程序和网站作为日常的一部分,他们有着不同的口味和喜好,喜欢各种不同的风格和特点。未来将会设计更多不同的外观和功能,这些更广泛的多样化选择将使无穷无尽的全球技术用户群体能够找到适合他们特定需求和愿望。无论如何,我们很快就会看到下一年将会发生什么,以及为计师们带来新的创造性挑战。

原文:Tubik           翻译:TaaCoo糖炒

原文链接

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

推荐阅读更多精彩内容