UI设计的风格有哪些?
1.半扁平化的设计
在过去的两年左右,扁平化无疑是讨论最多、最火的设计趋势。但设计趋势往往受到媒体,技术,和实用性的影响,一般都以缓慢渐进的方式渗透在我们的设计中,周期在1-2年之间。目前已经有很多设计师对它进行细微改进,形成了一个新的设计趋势-半扁平设计。
半扁平化设计说直白点,其实就是结合了materialdesign和flatdesign两种风格的处理手法。使简洁的设计上多一些空间感,包括悬浮的按钮和卡片的设计。按照Wired的话来说,那就是让像素具备海拔高度,这样子的话,系统的不同层面的元素,都是有原则、可预测的,不让用户感到无所适从。
2.更多三维呈现
在以前,UI或运营设计中常见的都是二维的处理手法。元素以平面的方式展示给我们,但是今年会慢慢趋于更多3D的效果,使内容更加有纵深感从而也提升了设计的趣味性,尤其是运用在运营设计上会让画面显得更加丰富。
3.几何图形的点缀
从2016年年底就有一些设计作品或者设计包装采用不同颜色的几何图形进行点缀。它不是作为设计内容的主角,而是起到渲染画面氛围的作用。用色一般鲜亮大胆,会给人视觉上的冲击,多用于运营设计。
4.渐变色的运用
渐变色的运用范围很广,它可以当作背景使用,也可以在logo或者按钮上使用。今年的渐变不再是像拟物化时代为了还原物体本身的空间所做的处理。这里的渐变多为大撞色的使用,为了营造氛围和产品气质使用。
5.大标题,大间距的处理
预测今年将会有越来越多优秀的产品跳脱出系统本身规范的束缚,开始更大胆的设计。不在局限于本身规范里最大字号不能超过多少px,间距最好在稍稍px之内等等…而是针对不同场景,不同用户群体,不同的内容去特殊处理。
UI设计风有:
1、三维呈现。和之前UI或运营设计中常见的都是二维的处理手法不同,使内容更加有纵深感从而也提升了设计的趣味性,尤其是运用在运营设计上会让画面显得更加丰富。
2、渐变色。渐变不再是像拟物化时代为了还原物体本身的空间所做的处理,而是为了营造氛围和产品气质使用。设计师能把不同的设计语言灵活的去运用,而不仅限于某个系统平台。
3、半扁平化设计。半扁平化设计是结合了material design和flat design两种风格的处理手法,使简洁的设计上多一些空间感,让系统的不同层面的元素都是有原则、可预测的,不让用户感到无所适从。
扁平化设计是一种流行的设计风格,采用这种设计风格的网页中没有光泽或者三维视觉效果的图形元素。许多设计师认为,这是极简设计的分支。
扁平化设计常被视为是3D效果、纹理与写实主义设计风格的对立面。一个真正的扁平UI完全不会出现任何的3D效果、纹理或写实主义风格的元素。
3D效果为界面带来深度错觉,帮助用户形成视觉层次并知晓哪些元素是可交互的。
早期的界面中,伪3D效果(阴影、梯度和高光)来使可操作元素一目了然。然而,这种伪3D效果冲击性太强、过于厚重而容易分散用户注意力。
纹理是指界面设计时使用的那些用于模仿真实世界的装饰性设计。纹理设计想要做到的是,让用户可以借助已有经验去迅速理解所接触到的全新产品界面。
写实主义是指模仿真实物件或者其审美性的纹理的设计风格。
纹理设计常常与写实主义相混淆。我们常在网页设计中见到这两者的混合使用。两者的主要区别是:写实主义的目的纯粹是满足审美需要,而纹理设计则希望借助隐喻来帮助用户理解界面。
2011年,微软Metro design设计风格和Windows 8的发布极大地推动了扁平化设计的流行。微软文档将新设计风格描述为“真实的数字化”(authentically digital)——这一描述巧妙地提升了扁平化设计对设计师的吸引力。不同于纹理设计,扁平化设计被看着是对数据化媒介的探索,而不是真实物理世界的重复。
苹果官网页面的扁平化成为这一趋势风向标。苹果一直坚持的是纹理设计和写实主义设计,直到2013年,苹果官网才转变成扁平风格。
自2011年扁平化设计提出开始,Nielsen Norman Group便公开批评其可用性问题(见链接 vocal critic of its inherent usability issues )。其最主要的观点是扁平化设计为了追求美学的时尚而牺牲了用户的需求。
多年来,用户已经习惯了传统的点击标识,比如蓝色字体、下划线链接或带3D效果的按钮。随着设计趋势的改变、用户接触到新的设计原型,用户识别可链接可点击元素的能力也在进化,但这并不意味着我们可以完全抛弃这些可点击线索。
当我们问一个22岁的加拿大人,她是如何知道网站的可点击元素的时,她给出了如下回答:
“最初可点击样式,无论文字或其他元素,蓝色、有下划线就表示可点击。但是……有下划线时会特别有帮助。或者是一个按钮……不必说点这里……只需要说立即购买、购买或添加到购物车即可。”
这句话形象地说明了人们是如何利用线索来判断可点击性的:
如果您的网站想要变得更加扁平,为避免影响用户快速找到可点击元素,请遵照我们的点击元素设计指南(译者注:原文另附,要点翻译如下):
1、最安全的颜色为蓝色,其他颜色也可选择;
2、下划线并不是必须的,比如导航菜单就不需要。
3、请测试你的超链接颜色,确保色盲色弱者能正常使用;
4、超链接(或其他科点击元素)以外的任何地方,请勿使用你定义的超链接颜色,也不要
不要使用蓝色字体或下划线;
5、请保持全站超链接样式的一致性。
1、请确保你的按钮看起来像真正的按钮。必须有正确的视觉线索来帮助用户快速识别按钮。如果你使用3D效果,那么按钮建议设置为矩形;如果使用扁平化设计,也要确保它看起来可点击。
2、不可点击的元素,请避免其看起来像按钮。比如为标题文字添加了黑色的背景,就会给人以按钮的感觉。
3、请留意页面的内容层次,避免为用户带来五花八门的按钮。这样用户无法区分。
1、让小图片在点击时有视觉反馈,比如图片变大。
2、要充分利用图片、ICON、文本等元素,来扩大可点击区域、提高用户的点击意愿。
3、请不要为图片设置过多的行动召唤按钮(CTA),除非图片里清晰地呈现了超链接列表(或按钮)。
1、如果要使用icon图片链接,请确保其清晰可识别。
2、请尽量为icon添加文本等可点击的视觉线索,除非你所使用的icon识别性很高或已成为行业惯例。
注:此处只介绍要点。详细解释和案例,请访问文末链接:可点击性设计指南。
最近,设计师们开始意识到扁平化设计中的可用性问题。因此一个更为成熟和平衡的扁平化设计开始成型。设计师们发现可以在探索“真实的数字化”的独特机会的同时,不会损害可用性。
这样的扁平化设计也被称为“半扁平”( semi flat ),“准扁平”( almost
flat)或“扁平2.0”。这种风格的设计几乎扁平,但使用了微妙的阴影、高光和布局设计来创建用户界面的深度。
谷歌的材料设计语言是扁平2.0的一个例子:它借助遵循物理学原理的隐喻和原则,去帮助用户理解界面及其视觉层次。
Evernote Android 版是一个扁平2.0的优秀案例。尽管大部分死扁平UI,这个APP在导航栏和FAB按钮(the floating plus button“+”)中添加了微妙的阴影。在内容展示方面,它采用了卡片隐喻方式提供了扁平而有层次的三维空间。
早期伪3D GUI和史蒂夫·乔布斯式的纹理设计往往产生沉重的的界面。去除这些沉重的元素有利于提升可用性。但磨平视觉差异、完全扁平化也会走向另一个坏的极端。扁平2.0则为我们设计出既易于使用又简洁的界面,提供了可能。
其实设计的风格有很多,比如我们现在最常见的简约风格、扁平化风格等。当然作为一个设计师除了要掌握已经流行的风格,还要对正在悄悄萌芽的风格有一定的了解。比如说以下几种风格:
一、新拟物化
新拟物化是2020年处于风口浪尖的一种视觉风格,新拟物化从最初诞生到现在,已经有一定的改变了,并且在向着更加复杂、完善的方向发展,有着更为良好的可访问性,开始具备更多拟物化的设计特征,但是更加新鲜、现代,并且更能渲染出独特的氛围感。
二、柔和渐变
渐变这种设计趋势正在进入两极分化的一个阶段。一方面,在视觉设计领域,一部分渐变变得更加夸张,但是在 UI 设计领域,无论是背景、UI元素(比如按钮、卡片和图形),渐变依然存在,只不过会显得更加微妙柔和。
在 UI 设计领域,还有的设计师会使用双色渐变,并且结合模糊效果,让它更加柔和。
三、几何元素
几何元素既可以作为背景来使用,也可以作为装饰细节,让你的设计越来越有趣。几何元素在最近几年受到的关注非常多,在设计上的应用也颇为广泛,甚至有人将几何元素拼接成为马赛克,最终呈现出来的视觉效果非常酷!
四、色调柔和背景
很多令人惊艳的、轻巧且极富美学价值的背景设计,它们用明亮柔和的色彩铺满背景,展现出极强的色彩和搭配的技巧。使用色调柔和的背景能够让整个设计都显得现代而沉静,清新,让内容真正抓住用户的注意力。
五、插画和3D元素
插画毫无疑问是非常流行的。不过,不论是配色还是视觉风格,无论是什么样的插画风格,最终的目标依然是要契合产品和 UI,所以很多插画都选择了相对扁平的风格,或者选择模拟类似3D的视觉外观。相比于每个数字项目都在使用的免费图片,插画真的是向前走出了一大步!
六、抽象图形
和传统的规则的几何图形不同,抽象而不规则的图形可以让界面显得更加不拘一格和好玩,更通俗的来讲,就是让 UI 界面更加「有机」,我认为这是一件好事。使用钢笔工具在原始的圆形和矩形上进行编辑,尝试不同的轮廓,承载不同的颜色和渐变效果,最后生成的效果会非常有趣。如果你不想去自己绘制,可以尝试一下 Blobmaker 这个工具,能够帮你节省时间~
七、深色模式
深色模式在这2年绝对是人所共知的一个设计风尚了,如今的深色模式 UI 设计已经深入到各个不同的应用。简单来说他是整个界面配色反转之后的效果,便于用户在深夜更轻松地浏览界面信息。只不过在具体的设计实施上,深色模式远不是简单的色彩反转就可以实施的,有很多注意事项,尤其是在对比度控制上。
八、倾斜角度
最初大家在 Dribbble 上会倾向于使用非标准的排版布局方式来呈现UI界面,后来这种展现方式开始逐渐在实际的设计项目中应用开来。在实际的设计当中,绝大多数情况下都会挑选30度到50度之间的倾斜角度。这种方法非常不错,可以多尝试。
九、弥散的阴影
阴影是拟物化设计当中最重要的视觉元素之一,而如今它又再次大规模流行开来了。只不过相比于之前「沉重」的阴影,柔和的弥散阴影在美学上更加令人愉悦,通常,阴影会让 UI 元素的「可点击感」更强,并且有助于区分界面中的层次结构。
十、简约加粗的字体
实际上早在 iOS 7 的时代,曾经一度流行过笔触纤细且字体宽度比较窄的字体,不过很庆幸这个时代过去了。现在所流行的字体更加讲究字体的可读性,字体的外轮廓都大体趋近于正方形,外观显得更加大气而现代。以上就是正在流行或者将要流行的UI设计风格,希望对你有所帮助!
国内外各大媒体都对新设计语言颇有期待,因为这或许是将来PC端软件界面设计的一个风向标。
PC软件界面设计有哪些优秀的设计趋势呢?
字面上的意思就是设计(这里就狭隘的定义成UI/UX)的发展动向。
本质上是通过研究分析,得出一个模糊的未来发展,这个发展可能是视觉上的变化,也可能是逻辑操作等非视觉上的改变,并将这些虚拟设定的目标作为一些可以实际产出的行为指导。
如果这个动向是无意义的,我们也不需要从中获取设计相关的信息,那也就不能称之为设计趋势。
设计趋势会受到媒体、技术、时尚的潮流以及可用性的影响。设计趋势是缓慢、逐渐的渗透到所有设计的分支中的。
在过去几年,扁平化几乎统治了UI设计,但随着谷歌Material Design的影响,设计走向更加多维度,往空间上发展。这个转变从增加轻投影开始,走向“半扁平”的设计。
扁平化是因为需要更符合开发技术,减少设计样式而进化出来的。扁平仍然流行,只是不断在改进。
柔和平滑的渐变既为扁平化设计增加了深度和丰富性,又不会破坏扁平设计的感觉。这是扁平趋势的一个新做法。
我们通过对微软的观察,从xp、win7、vista、win8,到现在的win10系统的设计风格,不难发现微软一直在想办法让界面更轻。Win 10 的标题栏和菜单栏更是结合了在一起。
project NEON的设计中,甚至直接将菜单栏和功能栏做了合并,以便预留出了更多的界面,让必要的内容展示在主界面,使界面更加具有可读性。
富途牛牛即是将菜单栏和功能栏进行了合并,让主界面能展示更多内容。
“毛玻璃”质感,最开始应该确实是微软先弄出来的。但微软并没有将这么好的创意发扬光大,反而被苹果“抄”去,从iOS 7开始大方光彩,成为移动端的设计趋势。
吸取了过去的教训的微软,在新设计语言project NEON里再次启用了毛玻璃质感,正式命名为Acrylic。
无边框界面设计,来越来越多的网站和应用,尤其是那些注重设计的,都有这样的趋势。
曾经用来划分区域的边框和边线逐渐消失,然而在干净的界面上,通过距离分割,各区域的差别依旧清晰可辨。
随着移动互联网的迅速发展,移动端的产品逐渐超越了PC客户端。为了节约开发成本,并将利益最大化,很多公司以移动APP为主要项目,选择忽视了PC客户端。
但是,PC端的软件依旧有很大的发展潜力,从国内各大厂商的PC端软件中即可看到端倪。腾讯QQ、360安全中心、迅雷等都在PC软件上持续发力。
相信project NEON的正式发布,会给软件界面设计带来一波新的流行趋势。