潮流是个轮回,不光我们看的衣服、化妆品、哪怕是那些短视频,同样的事情也发生在用户界面(UI)设计中。从模仿现实世界物体的界面到没有任何修饰的极简界面,不同的风格优缺点各异。只有学习并了解了历史上曾流行的趋势,你才能进行新的尝试。这对于创新、推动设计行业的发展和提升你自己的设计能力都是至关重要的。下面本文将介绍UI设计趋势,对每位设计师来说都值得一看。

 1.极简主义

  受极简主义艺术运动的影响,UI设计领域也开始刮起极简的风潮。极简主义的主要原则是“少即是多”。极简主义并不是空洞和模糊的设计。它推崇的是“少即时多”–正如美国作家Joshua Becker的书名所言–意味着要简化视觉空间,换句话说,使用更少的元素,以便能够突显最重要的东西。

  极简主义界面优雅简洁,注重每个元素的功能,重视负空间和大胆的颜色、字体之间的组合。总的来说,极简主义的用户界面可以非常实用,因为没有任何装饰性元素。因此–如果设计得好的话–用户会有一个高度直观的设计之旅。极简主义界面往往拥有一种优雅而精致的视觉吸引力。

  作家Alan Trotter的网站采用了极简UI设计,用户需点击突出显示的单词来查看隐藏内容

  极简主义于20世纪50年代末在纽约兴起,其主要特征是秩序、简单和和谐。极简主义的“少即是多“原则后来被德国工业设计师迪特尔-拉姆斯改编为“少而精“,列为他的“好设计原则”之一。也有人解释这一原则为:”好的设计是尽可能少的设计”。

  “一个形状、一个体积、一种颜色、一个表面,它们是独立存在的,不应该沦为整体的一部分。形状和材料不应该被它们所处的环境所改变。”–唐纳德-贾德,美国艺术家

  除了极简主义本身,许多其他的UI设计趋势–包括扁平化设计–都或多或少地遵循了极简主义的原则。

  2.拟态主义

  拟态主义是用来设计最早的图形用户界面的视觉方法。在拟态主义中,设计元素模仿现实世界中的对应物来连接物理世界和数字世界。最著名的例子是回收站的图标,它模仿了现实生活中的回收站。

  当个人电脑或智能手机首次出现时,设计师需要将它们设计成第一次使用的人也能理解的样子。因此,拟态主义设计将与现实世界的相似性置于视觉吸引力之上,以确保直观的用户体验。

  苹果公司的iOS操作系统便在早期版本中于用户界面上大量使用了拟态设计。

  早期苹果app和软件的视觉界面模仿现实生活中的物体,就算是首次使用的用户也能一眼就看明白

  2010年初之前,拟态设计是行业标准。这种设计美学大大方便了人们过渡到数字平台。但随着越来越多的人成为数字原住民,缺乏想象的设计元素对用户体验而言变得不再那么重要。此外,因为高度拟真,所以拟态主义设计元素需要大量的技术能力。人们数字素养的提升为新的UI设计风格兴起铺平了道路。

  3.扁平化设计

  扁平化设计是一种以简约为中心的UI设计美学,它将界面设计的范式从现实中的物体转移到元素的图解简化。这种UI趋势代表了一种实质性的技术优势,尤其是在移动设备上,因为它提升了设备的加载速度。扁平化设计使用极简的方式处理UI元素,不添加任何阴影或装饰物。在个性和视觉吸引力上,扁平化设计很大程度依赖于明亮的色彩和高超的字体排版技术。例如,设计师会寻找本身便足够有趣的字体,但它们的笔画要均匀,并且符合极简美学的风格。

  扁平化设计在2012年随着Windows 8、苹果的iOS 7和谷歌的Material Design的发布而获得关注。然而,在某种程度上,扁平化设计缺乏视觉功能可见性,用户有可能不知道哪些元素可以互动。

  iOS 7控制中心采取扁平化设计

  2.0版本的扁平化设计诞生后,其视觉功能可见性和使用性得到提升。扁平化设计开始利用微妙的阴影或颜色变化来突出互动元素,向用户表明如何与设计进行互动。这些微妙的变化有助于增加深度和维度,从而提高使用性,扁平化设计的视觉效果干净整洁不杂乱。

  4.深色模式

  深色模式的用户界面令浅色文本位于深色背景上。这种颜色方案减少了设备屏幕发出的亮度,一些研究指出,它有助于通过减少眼睛的疲劳来改善人体视觉。这种能潜在改善眼睛疲劳的功能对于用户需要阅读大量内容的界面特别有帮助。而且深色模式在一定程度上有助于节约电量。深色主题界面的诞生是对暗字明底方案的反击,后者模拟了墨字白纸的外观。

  深色模式趋势出现在2016年,当时Twitter试验了一个暗色底的颜色方案。不过,在深色背景上使用亮色文本的操作其实早已出现–比如说《黑客帝国》电影中深色屏幕上的绿色数字。但深色模式真正流行开来是得益于苹果。苹果公司在iOS 13的更新中发布了深色模式选项,从那以后,深色模式成为许多界面中的常见选项,用户可以在浅色和深色界面之间进行选择。

  深色模式vs浅色模式

  深色模式的用户界面具有鲜明、时尚和现代的特征,对眼睛更加温和。因此,深色模式的流行可能缘于解决用户用眼过度问题的需要。如果你的产品需要用户长时间观看屏幕,不妨考虑添加一个深色模式选项。

  就拿深色模式来说现在身边很多朋友都在用,所以我们以前不喜欢的,在未来的某一天还是会重新爱上的。那么下期文章再为大家揭晓另外五个设计趋势,记得关注我们别忘了看下期文章分享啊!

  5.包豪斯主义

  包豪斯界面设计风格围绕几何图形如半圆形、圆形、矩形、三角形等展开,采用各种创新字体和非干扰、非功能性的细节。这种设计风格依赖于设计元素本身:线条、形状、颜色。包豪斯主义的特点为抽象的形状和平衡的形式。

  1919年,德国魏玛开始了包豪斯艺术和设计运动,从而衍伸出了包豪斯用户界面设计风格。包豪斯艺术和设计运动通过将手工业与艺术相结合,在艺术与工业之间架起了一座桥梁。包豪斯运动的基本原则是“形式服从功能”。这一原则深刻地影响了后世的设计。根据这一原则,从物体的预期功能或目的出发,设计师设计出简单的几何图形,从而制造出一种极简主义美学。它倡导的是一种几何的、抽象的风格,没有什么情感或情绪,也没有什么历史元素。

  包豪斯风格下的数字界面有一种优雅、现代和简洁的视觉吸引力。

  “将包豪斯原则运用到现代产品设计中,意味着要勇于面对纷杂的质疑。”-Melanie Daveid,用户体验设计师和艺术总监,以及Adobe Live主持人

  文章来源:优漫动游

优漫动游:潮流是个轮回,这些UI设计趋势你怎么看?相关推荐

  1. 广州优漫动游公司:零基础参加UI培训的一些常见问题

    随着互联网IT行业的发展,越来越多的人选择入坑互联网,UI设计是一个很好的选择,但是很多没有基础的同学都会选择先去培训机构培训,今天优漫动游小编先来给大家讲一下零基础参加UI培训的一些问题. 1.我想 ...

  2. 广州优漫动游公司:人物海报怎样设计才不显得低端?

    人物海报一般都是由人物图像和文字设计构成的.这种图文混排的设计有一个共性:第一视线会被人物图像所吸引,然后慢慢转移到文字内容上.一幅好作品给人的印象很大部分取决于人物图像的风格和内容.当然,如果能利用 ...

  3. 优漫动游:如何解决Adobe XD无法拖入图片?

      随着使用Adobe XD软件的用户越来越多,也有越来越多的人在使用的过程当中遇到图片无法拖入的问题出现.对于XD软件无法拖入图片,那么就会对于原型创建设计有一定的影响作用!所以说不少人都十分困扰! ...

  4. 广州优漫动游公司:UI设计师的未来方向在哪里?

    行业的崛起,使得大批人进入这个行业:而在这些人中只能筛选出极少数优秀UI设计师,所谓传言不会空穴来风,被淘汰的人就成了"行业饱和"的说法的现实支持.很多人对于UI设计的理解还是很广 ...

  5. 广州优漫动游公司:UI设计中的详情页怎么设计?

    以淘宝天猫京东这类综合类电商网站为例,一个完整的详情页一般由以下部分组成:首图Banner+产品信息+产品功效介绍+产品外观展示+产品细节展示+其他等,今天优漫动游小编聊一聊详情的设计技巧.这里所说的 ...

  6. 广州优漫动游公司:UI设计中的ps要学多久

    Ps全称为Photoshop,是做设计的基本工具.想学习设计的人都需要学会这一款软件.那么学习ps要多长时间?如何快速学会ps呢?ps要学多久?其实,学习时间的长短主要取决于你采取什么方式进行学习以及 ...

  7. 广州UI设计培训注重实践教学优漫动游

    当然,学UI设计最好的学习方法就是报班系统学习了,学的快速,学的全面,学的专业,学的高级,学好以后就能从事UI设计工作.     那么如何去选择适合自己的UI设计培训班呢?下面优漫教育小编就为大家讲解 ...

  8. UI设计中连笔设计怎么做出高级感?|优漫动游

    把文字与文字之间的部分笔画连接起来,是字体设计中很常用的一个技巧,使用得当可以增加字体的设计感.整体感和美感,在标题设计中最常用到.不过对于零基础学ui设计的新人来说,想要灵活的使用这个技巧还是需要有 ...

  9. 优漫动游:UI设计是什么?和平面设计有什么区别?

      有很多从事平面设计的朋友问我,UI设计是什么?和平面设计有什么区别,UI设计和平面设计的前景哪个会更胜一筹呢?今天优漫动游小编和大家来说一下.   01.什么是平面设计   平面设计工作是一个主观 ...

最新文章

  1. ON REG EXPRESSION.SYNTAX
  2. UNIX中的文件控制--fcntl()
  3. [转载] 高等应用数学问题的matlab求解——第1章 计算机数学语言概述
  4. Windows破解笔记-windows API中的SendMessage
  5. html div图片定位,html中div定位练习
  6. 商品进销差价_商品进销差价如何核算?
  7. html打开软件连接的代码,《前端开发从零学起》Lesson.7 HTML中超链接的使用方法...
  8. [原]android解析pdf文件muPdf
  9. 百度echarts极速入门
  10. html文本框自动填充,html利用文本框input自动填写当前日期
  11. 高洛峰细说php百度贴吧_高洛峰细说PHP视频教程推荐
  12. 很不错的在线Office控件:IWebOffice与SOAOffice
  13. Python:用类与对象写一元二次方程计算器中遇到的错误
  14. Axure 软件自带的图标元件Icons无法显示的问题解决方法
  15. UML 用例图符号含义
  16. idea 报错Process finished with exit code 1
  17. Excel输入公式计算只显示公式不出结果
  18. xcopy、rd、COPY、MD、DEL、REN 命令祥解
  19. python 排列组合_Python 实现排列组合中 nCr 算法
  20. 基于STM32的电梯智能控制系统(软件实现)

热门文章

  1. 乐高玩具展品 大型玩具展品 租赁
  2. Java中==和equals的区别,包装类对比、String和new String
  3. tomcat启动闪退问题
  4. python怎么降维_【Python算法】常用降维方法-常用降维方法解读
  5. Redis(二)冰叔带你了解Redis-哨兵模式和高可用集群解析
  6. 2022年加氢工艺特种作业证考试题库及答案
  7. 合同法律风险管理 合同的重要外在
  8. 解密短信木马为何屡杀不尽--android手机短信木马的攻与防
  9. 广州天象网络技术有限公司未来的设计趋势二
  10. 近似熵 样本熵 模糊熵