Ikeq ChengIkeq Cheng

The whole problem with the world is that fools and fanatics are always so certain of themselves, but wiser people so full of doubts.

Mar 20, 20152472 words in 12 min


Web 设计7大趋势

太多的文章告诉你 Web 设计里什么比较酷,而这篇文章要说的是,从一些表象中,做出的一些靠谱的预测。

手势替代点击

我们早已习惯如何艰难的滚动页面,或许大多数人仍会将鼠标移到屏幕边缘来拖动滚动条。

scrolling-video

或者更高级一点,你使用鼠标滚轮,键盘方向键或触摸板,来滚动页面,但是一般的使用者并不具备这些优势。

如今,在移动设备上,滚动比点击更容易,用手指就可以快速地滚动页面。而当想要点击网页上某个确定的目标时却变的很困难——这与我们使用桌面设备的情况正好相反。

因此,我们应该期待有更多的网页能做成滚动第一,点击第二。就像我们随处可见的那种样子:

cinderella-animation

有数据充分表明,移动设备在不断侵占市场份额,该趋势还将持续。网页中需要点击的内容日趋减少,而滚动日趋增多。我们将会看到更少的链接、更多的按钮、更大的可点击区域,以及能够滚动的长页面。

那些以多页面形式展示文章的网站,在不久的将来也会觉得头疼。想像一下,如果像时代周刊这样的媒体采用无限滚动加载方式的话:

TIMES

此外,网页还将会被扩展到诸如智能手表这样的可穿戴设备上,虽说尚为时过早,但如果成真的话,网页操作将会是完全的手势操作。

折叠式设计已死

滚动如此廉价,同时电子产品屏幕尺寸碎片化严重,折叠式设计已变得不应景。

设计师大不用像以前那样尽可能的把所有东西都塞到页面顶部了,这使得多媒体应用更加普及——除非滚动页面,否则你只会看到一个全屏尺寸的图片标题。

自从诞生了长长的滚动页,设计师终于有机会尝试多年来只有杂志才能做的事——让网页充满漂亮的图片!在 2015 年,我们期待看到更多充分利用网页空间的设计以及更多更大的图像,像这只汪。

cute-dog

用户越来越快,网页趋于简单化

现在的青少年都是上网专家,甚至一些业余人员也能玩得很专业:多标签、滑动翻回上一页。

所有的东西都变得更快了,我们也越来越失去耐心。想要让一个温文尔雅的人画风一转,就让他卡一会吧。

users-are-quicker

网页已经被逼得不止要快(这只是技术问题),还要能够让人秒懂。拖慢用户的设计会让用户觉得这网页根本打不开。

简单明了的页面设计更易于浏览,这意味着它们被浏览的更快。所以想要判断哪种设计更先进,只要看看哪个网页更快被浏览完就好了。

uglytub.com

not-studio

造成拟物化设计衰败的最大原因就是——用户变得更感性,更缺乏耐性,复杂无章的设计只会拖慢他们。

原生 App 令众多网页都自愧不如的是,精巧简约,又十分漂亮。之所以这么做,是因为界面设计得越是精细,体验就越好。

Airbnb-animation

扁平化设计只是冰山一角,简单明了才是背后的趋势,我们就放眼期待它在 2015 年有更进一步的突破吧。

像素已死

在桌面浏览器里,一个像素就是一个像素。或许你还懂得每英寸平均由72个像素组成,但如今已经很少人知道像素了。

resolution

随着响应式设计的盛行,我们已看到这种向栅格化以及百分比的转变。但我们还面临着一个很大的挑战:位图。

几乎所有的网页,包含的图片,只达到了现代显示器一半的分辨率,且不支持缩放。借助 Retina 显示屏和现代 Web 浏览器,矢量图在 2015 年会变得更受欢迎。

在图标字体和 Google 的 Material design 上,我们已可以看到这样的趋势。网页加载变得更快了,图标缩放至任意尺寸也不会失真,对于设计师和现代 Web 浏览器而言,这无疑是理想的方案。

Retina vs non

虽然这项技术已存在,但开发人员尚需时间来改变他们的习惯,以适配更高质量的显示器。一旦 Retina 级(如新的 iMac)显示器成为普及,我们期待设计师也能紧跟其后。

动画回归

如果一个网站需要维护,为了更好的传达这一点,你可能会采用 GIF 或 Flash 动画,但以下几件事情,让动画成为了现代网页设计中的后起之秀。

扁平化设计过于一致,甚至枯燥,动画可以让网站脱颖而出,同时以更少的空间展示更多的内容。

invision video

移动应用重新定义了用户期望的内容,譬如使用手势动作来传达含义,网站也开始了做同样的事情。

stripte video

CSS 动画一类的 HTML5 技术可以很轻松的增强网页设计,同时避免了以往使用插件导致的速度、兼容性等问题。Web 组件更是加速了这一点。

GIF 动画回归,且变得出乎意料地有效。想必你已注意到本文广泛使用了 GIF 动画,它们从未像现在这样可以如此简单的被创建和分享。

Web 组件

随着 Web 技术的持续发酵,语义变得越来越缺乏。在页面里嵌入一大堆凌乱的代码,就为了一个简单的任务,譬如谷歌统计,或者 Facebook Like 按钮。如果可以像下面这样写代码,事情会变得美好很多。

1
<google-analytics key="UA-12345-678">

诚然已可以使用Web 组件,但大范围普及,尚需时日。或许 2015 年。

Google 的 Material design 已发布,可能正是它掀起了 Web 组件的潮流。 基于 Polymer,支持全部现代浏览器,提供丰富的动画和交互组件,仅仅通过一个标签,像这样:

framework

如果这种情况持续下去,2015 年出现更多基于组件的框架就不足为奇了。也许 Bootstrap 4.0 ?

社交饱和 & Email 复苏

社交媒体对消费者来说是一个巨大的成功,但许多作者并不开心。

问题在于饱和。每天有数十亿的帖子,Facebook 会了解用户最喜欢的,并且只展示这些内容。不幸的是,这意味着随着时间的推移,你发布的内容只会越来越多的被你的关注者中的一部分人看到(不过有付费服务可以解决这个问题)。

社交媒体不会消失,但在 2014 年,我们看到很多像 Tim Ferriss 这样的知名博主将他们的注意力从社交媒体转移到了传统的 Email。 他们意识到 Email 比社交媒体有一个显着优势:更高比例的人会看到你发送的东西。

tim ferris

在 Web Notifications(其工作方式与移动应用的通知类似) 趋势尚不足下,我预计这种内容社交的趋势将持续到 2015 年。

Notifications animation

非预测: CSS Shapes

这项很酷的技术只有设计师知道。CSS Shapes 允许你使用自定义形状来布局,如下图中的文字:

css shapes

CSS Shapes 非常酷,但在这项技术得到标准化之前,花太多时间和精力无疑是很有风险的。对于新旧浏览器,你几乎需要两套完整的设计,而且很多用户可能都不会注意到。

总结

在 2014 年,我们看到移动设备使用超过了桌面设备,但普通大众尚未普及。大多数组织对于他们的网站仍然奉行桌面设备第一,移动设备第二。

在 2015 年,该策略变得不切实际和不专业。随着移动设备成为浏览 Web 的主要设备,”移动优先“变得不再是一句流行语,更多的是需求。

扁平化设计无处不在,但透过 Ghost Button,你会发现真正的趋势是越简单的网站能更快受到用户喜欢。

简约不仅仅是一种时尚:而是未来。 期待它持续下去。

在博客文章中嵌入动画,以及手势动作将变得越来越普遍。

滚动第一、点击第二的设计将增多,像素布局、折叠式设计将减少。Web 组件可以更轻松地在我们的网站中提供类似原生应用的体验。

现在,你看到最好的移动 App 设计出现在了 Web 设计上。原生 App 和网站之间的差异完全消失,大概只是时间问题。

※ 原文链接:7-future-web-design-trends