每年各大设计博客和知名网站都会预测新一年的网页和UI设计趋势，既有相同之处，也有各家的独到见解，甚至还有相互冲突的地方。在接下来的系列文章里，将会为大家汇编（译）一些比较具有前瞻性的趋势文章供参考。
本期文章则选取了uxplanet对UI设计趋势的预测，包含19个方面的内容，涉及图像，背景，插画，颜色，交互，动效，排版等，几乎涵盖了UI所有方面的趋势，非常值得借鉴。
系列文章
- 2019年网页及UI设计趋势（一）
- 2019年网页及UI设计趋势（二）
- 2019年网页及UI设计趋势（三）
- 2019年网页及UI设计趋势（四）
- 2019年网页及UI设计趋势（五）
- 2019年网页及UI设计趋势（六）
- 2019年网页及UI设计趋势（七）
- 2019年网页及UI设计趋势（八）
- 2019年网页及UI设计趋势（九）
- 2019年网页及UI设计趋势（十）
2019年UI趋势大预测
Big Review of UI Design Trends We Start 2019 With
概览
- 3D图像
- 交互个性化
- 全屏背景图像和视频
- 复杂的网页数字插画
- 视觉叙事
- 无按钮交互
- 面向UI的品牌创建
- 美观好用的UI动效
- 突出的排版和精心制作的标语
- 高度可读性
- 过渡实验
- 美观的英雄图像
- 艺术化的UI细节
- 分屏
- 多层布局
- 高质量的照片内容
- 视频内容的增长
- 海报样式的网页
- 色彩实验
3D图像
近年来最热的趋势之一就是整合到移动端和网页界面的各种3D图像。将这种类型的图像整合到UI中是非常大的挑战，需要特殊的技术以及艺术家的眼光。此外，还需要花费时间。但是，它无疑是非常吸引眼球的，用户不会忽视它的存在。3D渲染通常看上去十分逼真，这对用户界面设计来说是一个很大的优势。这种类型的图像可以在你需要的照片内容无法获取或者价格昂贵的情况下进行替代。
ezgif.com-optimize.gif
这是一个公司的网站，他们的业务是设计和建造可持续性的房屋，使用太阳能来获取所有能源。房屋的3D渲染模型允许用户看到他们所提供服务的逼真图像，甚至可以操控白天和夜晚模式。
image
这是一个预订服务网站，使用了3D图像作为大型的主体图片，占据了页面的左侧，可以立刻吸引用户的注意力。这样的插图不仅设置了主体，还让界面看上去很美观。
image
这是My Baby应用的一个起始页，一个可爱的移动版日记，记录所有宝贵的物品，如照片，视频以及成就。3D图形以优雅和具有吸引力的方式设置了情绪和主体。
image
凭借吸引人的优雅图形，即使像注册这样的基本应用程序屏幕也会看起来很诱人，并且可以在第一时间的互动中吸引用户。这里可以看到饭店app应用程序是如何实现的。
个性化的交互界面
近年来为数字产品的用户体验带来更加深入和复杂化的个人定制形成一股强烈的运动。设计师努力提供更多功能让用户可以根据他们的需求自定义功能。
image
Perfect Recipe 应用允许用户设定努力的目标（减少或增加体重，保持健康饮食，诸如此类）。此外，用户可以标记他们避免使用的食材，这样应用程序在显示菜谱的时候就可以不把这些包含在里面。每个用户通过这种方式可以得到定制化的内容，建议和搜索结果。
image
Tasty Burger app 让用户在下单前可以定制他们的汉堡包，添加或者去除特殊的食材。
全屏背景图像和视频
你可能从前面的例子注意到了，另一个强势增长，特别是在网站UI设计中的趋势就是全屏背景视觉的使用。这些可以是照片，特殊渲染过的视觉图像，甚至是视频。这种方式有助于使屏幕在视觉上和情感上具有吸引力，并且支持所有布局元素的完整性。
image
这是一个设计工作室的网站首页，该网站专注于室内外设计可视化。高质量的经过渲染的原图占据了整个背景区域：这种方式使图像快速设置了主题并且展示出了公司的服务内容。
image
这是Explore Universe的UI概念，专门介绍太阳系及其行星以及有趣的探索的在线互动百科全书。图片，视频以及图像素材和黑色的背景相结合，提供了主题的视觉连接。流畅的动画让用户身临其境的感受到了无尽的外太空。
复杂的网页数字插画
自定义数字插画变得越来越普遍，特别是在网页界面中。自定义图像具有不同的样式，有效的提供了页面或者屏幕上的快速信息感知。而且，它们为原创性奠定了坚实的基础。网站和应用程序提供自定义吉祥物，图标和插画，以增强页面或屏幕的外观，并提高可用性和直观导航。而且，图像改进了UX设计的可用性，为有文字识别困难的用户打破了感知极限，例如非母语用户，阅读障碍用户或者不具阅读能力的学前儿童。
这种趋势也在积极地将数字插图创建为博客的标题图像，正如我们在Tubik博客上做的那样。这绝对是一个很酷的趋势，因为它为我们经常阅读的博客和网站添加了有意义和信息丰富的美感，并且开拓了艺术家的创作视野。
image
这是Kiddy的着陆页，一个让雇佣保姆变得小菜一碟的网站。看上去很可爱是吧？使用了几个元素让人感觉到可爱和正能量，其中带有有趣人物的自定义动画插图扮演了关键角色。他们传递信息和心情，在用户开始阅读服务内容之前创造所需的氛围，并为所有页面提供独特的外观。
视觉叙事
自定义图形的发展趋势为界面中的故事讲述打开了更广阔的视野。越来越多的网站和移动应用程序转向使用专门设计的角色来展示故事，设置氛围，传达信息，或者以与平台对应的情绪，语调和语音的方式来呈现优势。原始角色有助于使交互更像人类，与现实世界建立强烈的视觉关联，以及即时转移所需的情绪。更重要的是，根据构图，角色可能成为一个有效的工具让页面或者屏幕更具动态化以及生机勃勃。
image
这一套插画是为我们最近的项目Florence App创作的。它是一个在线市场，自顾型护士可以在英国找到高薪轮班。角色创建了视觉故事讲述并且展示了app的功能和优势。
无按钮交互
按钮依然是UI设计的重要元素之一，但现在我们从没有按钮的UI交互的视角看到更多关于移动用户体验的创造性实验。这种方法可以节省屏幕上更多宝贵的空间用来展示更多的信息，甚至可以认为它是基于手势操作的虚拟界面的第一步。
image
这个百科全书应用程序提供了各种主题的交互式信息图表。所有的数据交互都是基于手势操作的，而没有任何按钮出现在布局中。
面向UI的品牌创建
2018年延续了品牌重建的大趋势：全球化和本土公司，产品和品牌改变了它们的logo以及品牌视觉效果，主要是为了简化形式和细节。这一趋势的原因之一是随着越来越多的企业争夺更高的在线业务，需要努力让品牌元素的可用性和导航性变得更好。因此，全新的和重构的logo标识被创建的更为用户界面友好化，并且在各种数字设备和布局上更有效的被感知。此外，动态logo成为一种趋势，使身份符号更具有互动性并增强品牌意识。
image
Moon Creative，一个让儿童和青少年学习设计和动画的教育机构，他们的logo设计和应用品牌化。应用程序内的色板，动态logo，交互元素和动画达到了品牌的一致性。
美观好用的UI动效
近些年来没有看到对交互动效的兴趣减少。不仅是因为它可以赋予交互过程生命和运动，而且显著的改善了可用性。用户体验变得更加信息化和更具吸引力，同时交互界面的元素操控更为清晰易懂。因此，设计师更好的使用了大量的按钮，标签，图标，预载以及滚动动画。
image
这是一组理财app的交互，该应用让用户可以以独立或分组的方式追踪他们的支出和收入。UI动效支持直观的导航，并吸引用户注意核心元素和变化。
image
Slumber app 具有一个漂亮而引人注目的主屏视觉点，一个自定义的插画，与预载一起联动，使等待的过程不会枯燥而且很美观。
突出的排版和精心制作的标语
大胆而引人注目的排版继续在网页和移动布局中保持着高姿态。它通常是关键设计元素之一，设计师们会非常注意保持其可读性和可扫描性：排版结构，合适的字体选择是每一个UI设计项目的核心任务。我们越来越多的注意到文本不仅是信息的来源，而且还是设计的核心元素以及用户体验的中心。更重要的是，设计群体对UI的文案表现更为关注：特别是信息性和引人注目的标语成为网页设计不可或缺的元素。
image
这是一个优雅的传记网站的设计，聚焦于Stanley Kubrick的光荣之路，生活和创意遗产。很容易看出，对比度和精心设计的排版被选为设计中的主要表现工具。
高度可读性
近年来引起UI和UX设计师高度关注的是通用可读性，不仅是诸如标题，品牌名称或者号召性用语等核心文本元素，而且还包括文本中的其他内容。这就需要为网站和移动应用界面仔细选择字体和字体组合，更倾向于使用简单和高可读性的字体，而不是复杂和艺术字体。
image
这是一个支持访客的博物馆应用的交互概念：帮助查看可用的展览，在几秒钟内了解它们的更多内容，甚至可以创建线路从所有博物馆到你想要看的展览。时尚和突出的视觉效果与易读的文字相关联，方便应用在途中使用。
过渡实验
随着越来越多的可访问性和改进的运动设计工具，屏幕之间的滚动和过渡动画使其在网站和移动交互界面保持着流行度。具有创意的和原创过渡效果提升了用户体验 ，使其看上去更为自然，并为基本的交互增添了优雅感。
image
这个UI概念帮助了那些搜索或者持续关注汽车新闻的人。上图所示为一个网页应用Carfinder 的一组交互概念，通过特殊效果和引人入胜的动作，让进入汽车世界变得轻松优雅。
美观的英雄图像
英雄横幅（Hero Banner）是网站交互中第一秒映入用户眼帘的巨幅图像。它们为主要内容极具吸引力的视觉呈现做出了很大的贡献。英雄横幅证明其在设定情绪或者传递信息方面卓有成效。此外，除了网页上任何其他引人注目的图形，这也是一种既有信息性又具情感化吸引力的内容。突出的英雄横幅可以满足多个目标，如：
- 吸引用户注意力
- 用视觉传递信息
- 提供总体风格概念
- 设置所需主题，情绪和氛围
- 表达核心利益或条目的有效性
这就是设计师需要投入这项技术让当今的网页多元化的原因。
image
这是一个外卖服务网站的首页，用户可以从城市的任何商店购买并且由网站负责送货。基于一个美观且本色的调色板，附带突出的英雄图像使设计看上去十分诱人，从而让用户更好的了解网站业务。
image
这是一个销售儿童书籍的电子商务网站的一个页面。这是一个栩栩如生的例子展示了自定义英雄插画如何设定了情绪和主题。结合交互细节中的假象，使其成为一个具有吸引力的UI解决方案。
艺术化的UI细节
之前的例子都具有一个非常流行的趋势，即将艺术融入到用户体验设计之中。尽管功能性才是用户体验的基础，但是用户的决策和偏好不仅基于逻辑而且还会涉及到情感和审美情趣。因此，艺术元素证明其在抓住用户注意力和为用户体验增添积极的氛围上是有用的。
image
为Cuteen app 设计的艺术图标，为总体UI布局增添了优雅和美观。
image
这是一个设计师的作品集网站概念，专注于名人，娱乐，音乐和电影制作的项目。暗色背景和自定义英雄插图相结合，看上去更加生机勃勃，并且营造了一个音乐舞台的氛围。
分屏
一个非常热门的趋势就是网页和移动界面的分屏使用。这并不是什么新趋势，它之前消失过，但是又回到了各式各样的设计领域中，现在它无疑又起死回生了。这种方式被认为在响应式设计中是有效的，因为你可以在不缺失一致性的情况下让内容变化多样。更重要的是，它打开了颜色组合和实验的无限空间。一些网站使用分屏来呈现同等重要的双重内容。对于移动设备，分屏成为基于暗色或亮色背景方案界面一个用户友好的趋势。而正确的可读性也通常是争辩的问题：设计师通过为核心数据区块使用浅色背景空间解决了这个问题，并且为屏幕和页面添加了优雅的对比度。
image
Watering Tracker 应用使用了水平的分屏设计：上方是深色的背景用来优雅的展示图表和视觉，下方是浅色的背景，用来保持高度可读性。
image
这是一个简单的博客应用的移动UI界面。主屏幕的上部分是阅读话题，用户可以水平移动选择看哪个条目；接着还有热门文章紧随话题之后 。每一个分类都有很酷的视觉内容以3D图形呈现。分屏允许提供亮色界面上良好的文字内容可阅读性。
多层布局
UI设计师在不断进行创造性实验，以找到使网页具有吸引力和互动性的有趣方式。其中一个增长趋势就是应用几个交互层，使滚动体验和交互看起来更具还原性。
image
这是一个致力于保护海洋的慈善网站的动效概念。设计师使用两个图层在幻灯变化的时候同时移动。顺便提一下，使用纹理和图像作为文字内容的底部涂层这一非常流行的趋势概念叫做图层填充排版。
高质量的照片内容
一个广泛使用的趋势就是仔细和平衡的使用高质量图像和艺术照片内容。摄影是一种通过逼真和清晰的视觉效果给用户留下深刻印象以及设置所需关联的好方法。随着照片图库网站的快速发展，设计师有越来越多的机会发现好图片；特别是对许多项目，尤其是电子商务项目，创意团队为了达到产品的目标直接拍摄原始内容。特别值得注意的是日常生活中的如下领域：时尚，玩具，视频和饮料等。
image
这是一个住宿应用的UI设计，提供了一个3D图像和高质量照片完美结合的布局。
视频内容的增长
不同类型的促销和解释视频如雨后春笋般出现在荧屏和页面上。毋庸置疑，它们有效的为营销目标提供了服务并提升了品牌知名度。一个有创意且美观的视频是吸引用户注意力的好方式，也是强烈快速传递信息的行之有效的方法。视频可同时激活多个感知通道 - 音频，视觉，声音，并通过讲故事的力量增强它们。所有提及的因素都倾向于通过视频提供强大而令人难忘的演示，特别是基于高品质的图像设计和动画。人们每天都会承载大量的各种各样的信息，大部分人都没有过多时间学习产品和服务，特别是新产品和服务。因此，视频成为动态的，极具信息化以及吸引力的交流方式。但是，继而又出现了网页加载速度的问题，这就需要在不同设备上进行仔细的测试。
海报样式的网页
使用突出的视觉内容的趋势可以在网页上获得一个更多的视角，看上去感觉很像海报。在正确选择图像和时尚排版的情况下，允许页面突出并吸引用户的注意力。
image
Tasty Burger app 的着陆页，基于极具吸引力和美观的动画：美味可口的新鲜汉堡创造了令人垂涎的效果，从而立刻设定了主题和情感吸引力，独特的字体让它看上去更为具有海报外观。
色彩实验
色彩实验的趋势也没有受到任何流行度的损失，并带来了全新的原创组合。很自然，颜色是为界面添加信息和情绪，让其看上去美观且极具吸引力的有效方式之一。无论如何，有效的色彩实验不仅仅是纯粹的创造力，即使是最有创意和最令人惊艳的组合也是基于色彩理论和色彩心理学以及UI设计师的实践经验的。
image
这是一个基于最疯狂想法的共享模版的虚拟聊天室的网络平台设计概念。视觉呈现使用了明亮甚至迷幻的色彩组合以及引人入胜的3D图形，包括一个拟人化的人手元素，还有几何形状象征着各种现代科技。
（编译完）
英文原文：地址
原文作者：Tubik Studio
原文译者：Twitter / Linkedin / 微博
以上译文仅代表原作者观点。如需转载请遵循CC版权协议正确标明出处。
image
网友评论