网页设计将进一步回归现实。
从风格、配色到功能,2017年将是现实与技术碰撞融合的一年。最终目的是将二者连接起来,实现更加无缝的浏览体验。
1.多元化导航
自适应网页设计兴起后,“汉堡菜单”开始流行。对于移动设备浏览来说确实是一个可行的解决方案,但是还是有缺陷:
不够直观,发现率低;
阻碍用户参与;
低效率(对于用户、设计师和开发人员).
我们期待来年有更多实验性的导航设计灵感。
以下菜单设计趋势可作为指南:
一、相框菜单栏
组合网页的顶部、左侧和右侧,向下滚动以形成独特的相框菜单。
过来
弹出式菜单是弹出式菜单栏的演变。在Pop over中,导航菜单占据整个页面,加粗但不突兀。
根本不想要菜单
使用“滚动”来提示用户滚动以获取更多页面内容,而不是使用菜单。以图片为主导,消除冗余信息的干扰,简洁突出,特别适合美食主题网站~
2.分割屏幕
将屏幕界面垂直分成左右相等的两块,用对比色分割,营造出清晰的视觉分离效果。这种直白的网站风格将成为2017年的一大趋势。
简单的垂直分割看似一样,但充满想象力和空间,适合各种网站。
3.颜色恢复
这两年,格雷大规模劫持了我们的网站。从前,白色的网页背景变成了浅灰色;黑色文字变成深灰色;在材料设计中,深阴影用浅灰色表示。
2017年,更多色彩回归的时候到了。可以预见复古色调将会受到追捧。
无论最后决定用蓝色还是橙色,都可以尝试在上面添加一个“滤镜”,为用户营造一种温馨怀旧的感觉,提升网站的整体氛围和质感。
4.自定义滚动
越来越多的网站放弃了传统的滚动条,而是创造了定制的滚动体验。有些网站使用“虚拟滚动”,即允许用户在页面程序中滚动,而不受浏览器的控制。
虚拟滚动支持更多类型的滚动。比如设计成在水平线上左右滚动,但是可以用普通鼠标控制。
5.整合真实世界和数字世界
之前随着Material Deaign的出现,在平面设计的基础上加入了阴影和坡度,给平面图标增加了立体视觉感。
2017年的网页设计年是回归现实的一年。然而,我们在这里谈论的不是skeuomorphism,而是有形和可触摸的现实世界与电子世界之间的无缝连接,创造一种没有边界的体验——真实的物体会保留其真实的细节,完全进入数字环境,但不再受真实规则的限制。——小物体可以在屏幕上变得巨大,并与数字元素交互。
在Beoplay的网页上,耳机被突出显示并放大,远远超过实际尺寸,并与象征声音的动态线条互动。
现实与屏幕的界限模糊后,用户更容易与屏幕上的图像产生情感联系。
6.影院级互动体验
大视频背景已经成为2015年网页设计的趋势,并且越来越流行。如今技术的进步大大缩短了视频加载时间,而WebGL(一种3D绘图技术)让这个背景更具互动性。
7.让产品设计师代替长宽比
完美显示在Retina屏幕上的画面场景,在手机上可能根本看不出来。面对众多显示屏和各种长宽比,设计师如何应对这个“自适应宇宙”?大多数时候,他们选择剪辑。
怎样才能在裁剪中保持设计的初衷而不丢失太多信息?你需要:数码制作设计师。
设计的本质是提供问题的解决方案,而制作设计师则注重唤起正确的感受,让用户对自己看到的、体验到的东西产生关联和共鸣。通过在网页设计过程中引入制作设计师的思想,我们不会拘泥于要传达的内容是静止的画面,而是可以传达故事的主题。
基于这种考虑,一些网站选择忽略长宽比。例如,一个由谷歌艺术文化(Google Arts Culture:The Hidden World of The National Parks)支持的网站,它以全屏视频为背景,也以呈现为网站的主要内容,可以连续扩展和覆盖任何大小的浏览器。
8.微动效应和微观相互作用
运动可以吸引注意力,这是人类进化的结果。但是,突如其来的大动作,只会带来震惊和警惕。相反,轻微而流畅的运动能给人一种充满活力的感觉。
在为网页设计动画时,请记住这两者之间的区别。
在过去的很长一段时间里,网页中的动画经常被用来“奖励”用户的某些动作,比如点击。然而,最近越来越多的网页开始使用小动画作为设计元素来吸引用户的注意力。
比如我们常见的“航路点”(scrolling monitor触发器插件),当一个页面滚动到一个元素时,会触发一个动画,从而准确地让用户关注我们希望他们关注的地方。