年已成过去,让我们拥抱吧!世界每一天都在按照它的意志变化着,每年也都在影响着设计趋势的走向,今天我们就花点时间来讨论一下,年可能会出现的UI/UX的设计趋势。
我们UI设计师来说,图标作为让界面更美观、舒适的“点睛之笔”,时刻都随着最新的设计趋势变化。最近,新一波儿图标动态,引起了设计圈的注意~以前大家操作界面的图标,大多都是极简、扁平的Style用最简单的设计手法突出图标功能,而时下,比拟物化风格多了质感,比扁平化风格多了丰富、层次感“轻拟物化”引领了新一轮的图标潮流!
1舒适的浮雕效果!
和扁平化设计风格的最大不同,便是轻拟物化无论在界面设计中的元素,或是图标,都会加入一些“浮雕”的视觉效果。凸起or凹陷的手法让设计更加立体化,不仅可以体现高级感,也能让用户更快抓住“重点内容”!而营造这种浮雕效果,更考验我们设计师对高光和阴影的合理运用!
2留白,让轻拟物化更简洁!
相比色彩极其丰富、鲜明的设计风格,轻拟物化另外一大突出特点——留白!很多设计师通过制造大量的留白,让界面更加精简,帮助用户快速找到想要了解的内容,提升理解能力。同时,减少的色彩及元素,也让设计显得更实用。
3拒绝“轻拟物化”按钮!
简洁不失高级的轻拟物化风格可以轻松应用于我们的界面,图标,但各位小伙伴在创作之中,也要切记避免一个雷区——“别用在按钮上”!按钮对用户而言,一定要有清晰明确的引导性,是大家的“导航”,而添加阴影和高光的“按钮”,在整体轻拟物化设计里,不易分辨,识别度低,降低了UI设计中最重要的用户体验!根据不同的设计需求,设计主题,进行策划。而且,不但是UI设计、还有平面设计、3D设计,新的设计趋势、风格、技巧绝对是“日新月异”的存在,想要成为站在前沿的高薪设计师,快速抓住这些技巧,不断练习,才是硬道理!
4具有实用功能的3D图形3D设计在应用程序和网页上已经有多年了,所以很难说它是一种有创意的设计趋势。然而,设计作品中3D图形的作用却在不断地发生变化。它们不仅仅只有装饰作用,而且还有了更清晰的实用功能。最新款的移动硬件设备为更复杂的图像效果提供了更多可能性。因此,3D图形有望成为移动体验中的核心部分。比如,下图是汽车的3D模型,用户可以直接通过交互来控制和调节汽车的有关设置。
平时设计师们必备的欣赏设计大神作品、汲取设计灵感的素材网站之一,Adobe公司旗下的设计创意交流网站Behance,在年即将结束前,为设计师们总结了一些年UI设计流行的趋势。
分成了Appvs移动端网站、颜色、组件尺寸、交互动画、3D图标等几个方面来进行讲解。
制作新拟物化风格只需要简单三步骤
在一开始学习如何制作新拟物化风格的界面时,参考了许多国外设计师的教学,大多数的文章都只有教到最起头的步骤。
不过万事开头难,只要有了基本观念,其实就掌握了一半的概念了,赶快开启Sketch、Figma或Photoshop来试试看吧,供大家参考:
步骤一:基本观念
选好高光(highlight)、物件本体(object)、阴影(shadow)的3个色。
先选好光照到的高光处、物体本体、物体下的影子的颜色,且物体与背景为一样的颜色。也可以选择其他色彩,不过要避免使用彩度过高的颜色,会使光影变成一坨光晕。
步骤二:打造组件
分辨光源位置制造凹凸有致的效果
步骤三:做个有「深度」的界面
根据组件的可点击性将页面组件做不同层次的区别。
年,设计将变得更多元、更新颖,不同风格也会相互碰撞,新技术也被应用在设计中。
实例应用:
各大厂都开始纷纷尝试在产品中加入3D元素,将自家IP立体化,植入到各个品牌静态页面,加深品牌印象渗入。3D技术虽然已经出现有一段时间了,但是为了保证速度和性能表现,较少应用到产品中,随着软件技术的提升,立体渲染产品将开始慢慢运用到更多的界面交互、H活动中。
▲闲鱼、QQ、花椒直播的3D启动页
▲得物(*)的3D空间动效展示
网易云音乐每年的音乐总结报告都追随着最新的设计潮流,今年还可以自由选择人物形象,增强了用户的主观代入感,以下是每年的设计风格变化:
长沙蓝途课工场“全能UI设计师”课程,为对设计感兴趣的新手小白,以及希望在职场更加“有薪”的设计师提供专业、科学、完善的课程体系,涵盖UI设计、网页设计、动效设计等热门设计技能,并以企业级项目的实训模式,助力大家在项目之中,摸索设计秘籍,积累丰富经验,从薪开启设计生涯!
长按识别下方图片