译者:Designup
Bokaro: http://www.zcool.com.cn/article/ZNDcxNTUy.html
负面影响页面结构设计态势的最显然不利因素,绝非审美观品味,而要控制技术的产业发展。
就往后一两年而言,下列4点值得称赞在今后竭尽全力高度关注:
终端电子设备采用数目急遽快速增长
终端和便携互联网中的频宽减少
WebGL控制技术的再次出现,使开发者能借助于控制系统表明晶片在应用领域程序中展现各式各样3D数学模型和情景
HTML5,CSS3的应用领域及JS框架控制技术的兴起
那些控制技术不断进步在非常大某种程度上对页面结构设计造成了负面影响,当中最注重的是2010年“自适应(积极响应式)页面结构设计”基本概念的造成及应用领域。
在式样各方面,前段时间一两年集中化结构设计正式成为非主流,而后Google导入Material Design,又稍微将他们的视野从基本概念化中冲去许多。
2017年,页面结构设计会更进一步重回现实生活。
从式样、色调到机能性,2017会是现实生活与控制技术再次出现对撞与结合的两年。最后目地是相连这两者,同时实现更为“无缝并行”的下载新体验。
1.🍔「 多元化导航控制系统 」
自适应页面结构设计兴起之后,“汉堡包菜单”大行其道。它确实是针对终端电子设备下载的可行方案,但仍然有缺陷:
不够直观,可发现性低;
妨碍用户参与;
效率较低(对用户、结构设计师、开发而言都是)…
他们期待接下来的两年中再次出现更多实验性导航控制系统结构设计灵感。
下列几种菜单结构设计态势作为抛砖引玉:
a. 相框式菜单栏
组合页面上部、左右,以及向下滚动,形成一个独特的相框式菜单。
b. Pop over!
Pop over 是弹出式菜单栏(Pop-up)的演变,在Pop over中,导航控制系统菜单占据整个页面,鲜明大胆却又不突兀。
c. 干脆不要菜单了
不采用菜单,取而代之用「scroll →」等提示用
2.⚡️「 分裂 屏幕 」
垂直将屏幕界面分为左右相等的两块,用撞色等方式进行分割,营造清晰的视觉分离效果,这种直截了当的网站风格会正式成为2017年一大态势。
简单的垂直分割看似千篇一律,其实充满想象力和发挥空间,适用于各类网站。
3.🎨「色彩复兴 」
往后两年中,灰色大规模劫持了他们的网站。从前的白色页面背景变成了淡灰色;黑色文本变成了暗灰色;在Material Design中,用浅灰表示纵深的阴影。
2017,是时候让更多的颜色回来了。可以预见的是,复古色调将受到追捧。
无论你最后决定用蓝色还是橙色,可以再试着给它加上一个“滤镜”,为用户制造一种温暖、怀旧的感觉,提升网站的整体氛围与质感。
4.⬆️⬇️⬅️➡️「 自定义滚动 」
越来越多的网站舍弃了传统的滚动条,转而创造一种自定义的滚动新体验。许多网站采用的是“虚拟滚动”,即在页面程序内让用户进行滚动操作,而不受应用领域程序控制。
虚拟滚动使更多类型的滚动方式得以同时实现。比如结构设计为水平线上的左右滚动,但可以用正常的鼠标进行控制。
5.:point_right:👈「结合真实与数字世界 」
之前,Material Deaign的再次出现,在集中化结构设计的基础上加入阴影和斜度,为平面图标减少了三维立体的视感。
页面结构设计的2017年,是更进一步重回现实生活的两年。但这里所说的绝非拟真结构设计(skeuomorphism),而要让有形的、可触碰的真实世界与电子世界点对点对接,创造没有界限的新体验——
现实生活中的物体将保留它们的真实细节,完整进入到数字环境中,但又不再受限于现实生活规则——小物件可以在屏幕上变得巨大,并与数字元素再次出现互动。
在Beoplay的页面上,耳机被注重放大,远超出真实尺寸,同时与象征声音的动态线条结合造成互动。
现实生活与屏幕的界限被模糊之后,用户与屏幕上的图像更容易造成情感联结。
6.🎬「 影院级别的交互新体验 」
大幅的视频录像背景在2015年就正式成为页面结构设计的态势,并且越来越流行。如今,控制技术的不断进步使得视频加载时间大大缩短,同时,WebGL(一种3D绘图控制技术)让这种背景变得更具互动性。
7.👀「 让美术指导取代长宽比 」
在Retina屏上完美表明的图片情景,在手机上可能看起来完全不是那么回事。面对诸多的表明屏幕,以及各式各样各样的长宽比,结构设计师如何处理这个“自适应的宇宙”?大多数情况下,他们选择裁剪。
什么样才能在裁剪中保留结构设计的本意,不过分丢失信息呢?你需要:数字美术指导。
结构设计的本质是提供解决问题的方法,而美术指导高度关注引发对的情感,让用户能与他们所看到、所经历的事物造成关联和共鸣。在页面结构设计的过程中导入美术指导的思想,就不会拘泥于将所要传达的内容看作一张静止的图片,而要将它作为一个能传达故事的主题。
基于这样的考虑,许多网站已经选择无视长宽比。例如,Google Arts & Culture支持的网站:The Hidden World of the National Parks(国家公园里的隐秘世界),这个网站用全屏vedio作为背景,同时也作为网站的主要内容呈现,它能不断延伸覆盖任何尺寸的应用领域程序。
8.:rabbit:「 微动效与微交互 」
运动能吸引注意,这是人类进化的结果。但突发性的大动作只会让带来惊吓和警惕。相反,轻微流畅的运动能给人生机勃勃之感。
在为页面结构设计动效时,要记住这两者的差别。
往后很长一段时间,页面中的动效往往是用来“奖励”用户的某种动作,比如点击。但前段时间,越来越多的页面开始将小动效作为一种结构设计元素,用来吸引用户的注意力。
比如他们常见的“waypoints”(滚动监听触发插件),当页面滚动到某个元素时,触发某种动画,从而精准地让用户注意到他们想让他们重点高度关注的地方。
那些轻巧的互动不仅仅为用户新体验加分,而且能赋予一个网站独特的个性魅力。
:bulb:
接下来这两年
能为他们留下深刻印象的网站的…
会是哪一家公司呢?
Designup拭目以待
Designup.cn | 到Designup 用可靠结构设计师