跳到主要内容

5网页设计趋势以及如何对其进行原型设计

材料设计,卡片布局,插图等 - 2016年上半年引发了网页设计的一些强势趋势。在这里Justinmind,我们最近对迄今为止最大的设计趋势进行了在线调查,在大量的回复和评论中出现了5个主要趋势。让我们仔细看看它们以及如何使用原型工具模拟它们。

01.材料设计

在2014年之前,世界是平的,至少在设计方面。然后谷歌推出了他们的纸和墨水灵感的视觉语言'材料设计',网页设计突然开始看起来奇怪......触觉。从那时起,诸如填充,深度,网格布局,响应式动画和过渡等的拟态效果不仅席卷了谷歌驱动的界面,而且遍及整个网络:查看这些鼓舞人心的材料设计网站的10个例子

这些网站采用了超越的材料设计,但是开始掌握视觉概念的一个好地方是使用谷歌简洁的小浮动动作按钮:它在打开应用程序或网页时有机地动画到屏幕上,并且它被阴影所拥抱,给人一种漂浮在页面上方的印象。这种空间准确性的错觉不仅仅看起来很漂亮;正如Google所说,它还“帮助用户快速了解可用性”。 “然而,这种材料的灵活性创造了新的能力,取代了物理世界中的那些,而没有违反物理规则。”所以,物质设计就像现实生活一样,只有更好。

如何制作材料设计原型

使用原型设计工具创建浮动操作按钮很简单。我们为此设计推荐了许多工具。例如,Pixate奇迹允许您向预先设计的图像添加交互。但是,如果您需要从头开始创建按钮,Justinmind为您提供更多选择。

您可以使用Ellipse UI元素创建圆形浮动按钮图标,更改背景颜色,填充和阴影。您还可以直接向此窗口小部件添加文本,以便可以将“加号”符号添加到同一个组件中。

在向图标添加行为时,请记住浮动操作按钮应仅代表页面上最常见的操作。向按钮添加触发器或导航事件以使其具有交互性。使用触发事件时,当用户点击浮动按钮时,会在同一屏幕上发生某些事情。通过导航事件,用户将被带到单独的屏幕。

有关构建浮动代理按钮的更多提示,请参阅Google的要求这里

02.平面设计

每个英雄潮流都必须有它的克星,因此它与2016年的下一个主流趋势相反:材料设计相反,平面设计,在我们的最高趋势调查中落后于材料设计一个百分点。

平面设计拒绝材料设计的所有形状假装,而是展现出以鲜艳的色彩,锐利的边缘和缺乏深度或“平整度”为特征的数字美学。事实证明,平面设计非常受网络设计中极简主义的支持者的欢迎,因为它可以减少混乱,而是喜欢明确的图标,“平面插图”和庆祝“现实世界”与“屏幕世界”之间的分离。

在本初学者平面设计指南中了解更多信息

所有这些结合起来使平面设计网站易于理解和导航,因此对于专注于内容的网站或明确的导航层次结构非常重要的网站来说,它是一个很好的设计选项。

如何制作平面设计原型

设计平面设计需要注意视觉层次结构。 UI元素让我们可以创建数英亩的开放空间,强烈的色彩和二维/平边,这就是我们在这里所要做的。注意白色空间以及元素的定位,以创建一个有凝聚力的设计。

原子设计元素允许您在界面中创建极简主义的UI元素,非常适合平面设计。确保您保持这些边缘清晰明亮的颜色和与背景颜色相匹配的边框。 SVG UI元素非常棒,因为您可以轻松更改背景颜色并对其进行缩放以适合您在多个屏幕上的设计。使用网格和对齐工具来评估UI元素之间的间距。

草图提供梦幻般的UI套件,满足您的平面设计需求UX Pin的电子书平面设计的发展是开始设计的好地方。

03.卡片布局

毫无疑问,卡片是2016年的顶级设计模式,只有不到30%的受访者证实这一点。像Pinterest这样的网站完全基于卡片布局,越来越多的网站正在加入,包括Facebook,Spotify和Google。那么卡的布局到底是什么以及它如此特别的原因。

卡布局就像听起来一样简单。屏幕信息以卡片的形式呈现,可以堆叠,翻转以显示“底面”,分组然后展开,反之亦然。这允许大量信息的非分层组织,与屏幕或设备使用无关。

随着设备使用量的增加以及标准屏幕尺寸或形状的日子早已消失,这种灵活性变得至关重要。卡片有助于设计响应式网站,以适应屏幕尺寸而不会失去设计信誉。

如何制作卡片布局原型

容器设计通常用于创建卡趋势设计。它本质上是以水平格式分组的一类卡。如果您正在使用Justinmind,请使用动态面板(容器小部件)构建卡片设计,并创建一个在画布上你的卡片。这种风格非常响应因此可以根据不同的屏幕尺寸轻松调整。通过在原型制作工具中使用多个屏幕并链接事件,您可以为卡片创建响应式设计。使用模板通过屏幕重用内容以避免返工。请注意,空格在这里也很重要 - 避免在此UI中出现混乱。

提示:当您的卡片是指向其他内容的链接时:使用移动手势进行移动卡片设计,并使用移动手势进行网卡设计

04.视差滚动

视差滚动趋势在2015年真正加速,并且从那时起没有显示出放缓的迹象。在基本的视差滚动中,场地的前景以与背景不同的速度移动,诱使人们注视3D效果。目前,使用多平面动画和多向滚动以真正扩展体验的网站已经超越了基线效果。在所有做得很好的视差网站中,设计获得了一定的深度,前景突然出现,聚焦用户并在滚动时创造叙事进展感。自1982年首次出现在街机游戏Moon Patrol以来,视差肯定已经走过了漫长的道路。

如何制作视差滚动原型

原型视差起初可能听起来很吓人,但不要害怕!有很多工具可以提供UI工具包和具有视差特定元素的库,例如AxureAdobe Muse

在网页设计中对视差进行原型设计时,您需要设计网站的UI,然后将视差工具/元素添加到设计中。一旦有了背景图像和想要添加到容器内UI的视觉元素,就可以开始将视差分量添加到等式中。添加固定元素,应用不同的滚动速度,原型设计粘性元素以及滚动和创建浮动菜单将确保您拥有一个充满深度的引人入胜的网站。如果您从头开始创建视差,您可以使用固定顶部,30%滚动速度和50%滚动速度视差小部件。

提示:不要过度使用视差 - 只要在有意义的时候使用它。 Parallax是利用行动呼吁(CTA)并引导用户迈向下一步的好方法。

05.插图

这种趋势可能会让一些人感到意外,但是随着设计师寻找避免可怕股票照片的方法,插图在2016年已证明是一种力量。说明性的网页设计可以从特别勾画的字体和自定义矢量图到3D插图和完全图示的背景。无论他们是风格迥异还是强大的图形,自定义插图意味着设计师可以对其网站的品牌和信息进行更大的创意控制;插图也吸引人的想象力,带来视觉幻想的飞行,同时增强了网站的独特性。

如何制作插图原型

最近与设计工具兼容的原型设计工具激增,例如Photoshop中插画草图,意味着设计师现在可以轻松利用他们的工作将他们的设计包含在他们的原型中。这种类型的集成还意味着您可以将静态图像转换为交互式,令人惊叹的原型,而不会影响视觉效果。

原型设计工具中的原子设计意味着可以轻松编辑和调整现有图像以补充用户界面,因为它们可以分解为最基本的元素。

在设计中加入独特插图的另一个好方法是使用可缩放矢量图形(SVG)。SVG是一种基于XML的2D图形矢量图像格式,支持交互性和动画。使用SVG进行设计的优势很多,但真正让它们脱颖而出的是它们能够在许多不同的工具中进行编辑,包括Photoshop和Justinmind等某些原型设计工具。



翻译字数超限