简约网页排版设计：如何用极简风提升用户体验？扁平化布局实战

在刚刚过去的几年里, 出现了非常多网页设计方面的新趋势, 这些正在慢慢变成主流的东西, 正在带着我们走向更远的地方。这里面, 极简主义的网页设计方式算是其中一个很重要的例子。

这种比较简单的风格是永远不会过时的, 从现代主义运动开始到现在一直这么久, 它在许多跟设计有关的地方一直都在活跃着。既然它能在那些地方存在得这么好, 那么为什么现在不把它也作为网页设计中的一种流行做法来看待。

除了看起来比较漂亮之外, 极简风格的设计还能够提高用户体验。这些年当中, 用户一直都在吐槽现在的网站导航繁复、网站布局冗杂。太多的内容挤压在同一个页面之中, 让整体的用户体验直线下降。

在设计领域里面, 人们往往是用“少即是多”这样的说法来阐述极简风的, 直到现在为止, 这句话依然是成立的, 这尤其是针对步入21世纪之后的网页设计的情况而已。

1、拥抱扁平化设计

大家都明白, 扁平化的设计风格正在慢慢地取代以苹果式拟物化设计规范为代表的写实风格, 而苹果公司自己也在打造属于苹果的扁平化设计样式, 使用大胆且鲜明的颜色来把用户的目光吸引过去。

另一个主动拥抱扁平化设计风尚的先行者, 就是微软了。像微软的windows phone和windows 8系列操作系统, 这些都是使用扁平化设计风格的典型例子, 而现在, 微软的官网也将扁平化的设计贯彻到底了。这也就意味着, 微软已经在全平台上高度一致地贯彻了扁平化设计。

所以, 你在那个微软的网站上面, 它根本就感觉不到有什么阴影, 或者那些渐变的颜色, 总而言之的一切事物, 它都是在那种2D这个平面上。然后那个标题还有那个正文的字体, 它们都没有什么纹理来点缀一下, 所以说整个页面的布局看起来就是干干净净、清清爽爽的, 绝对一点都不会显得杂乱无章。

至于那些图标和按钮, 它们所采用的设计风格, 那都是那种充满了那种货真价实的元素的扁平化设计, 甚至连那个windows 8开始界面之中的背景上面的元素, 它也全部都是使用这种扁平化的设计手法来进行处理的。

2、留白

不管你喜欢把它叫作负空间, 还是习惯称之为留白, 它都展现出了极高的智慧, 巧妙地把你吸引到网页那些最核心的内容上去。与此同时, 这种手法也是极简主义风格里头极具代表性的一个特点。

眼下, 采用这样设计手段的网站数量正在不断增加, 许多设计师也逐渐看清了一个事实: 就是这种设计风格究竟有着多大的实用价值。

最直接的例子就是你经常用的搜索引擎, 比如谷歌还有百度。它们特别擅长使用留白技术。所有那些不重要的东西都被拿掉了。搜索框一下子就抢走了你的全部注意力。它的意思就是让你把字输进去, 然后敲回车, 接着进行搜索。

其实留白也被叫做负空间。这是极简主义风格里最容易一眼认出来的特点。留白地方空着并不代表那里没有任何内容。这些地方和它们周围的主体元素其实是互相依存、谁也离不开谁的关系。

3、有限的选择

任何搞电商的, 或者是做B2B的网站, 他们把网站设计好, 里面的一个主要目的, 就是去把网站的转化率给提上去, 然后把用户在选择东西时候的难易程度给降下来。

你把这些没必要的选项从网站上拿走之后, 用户被那些没有用的信息给干扰的情况就会变少, 这样一来, 他们就更容易去达成自己的目标了, 转化率这么一来自然也就跟着提高了。所以说呢, 让选择变得有限, 这也变成了极简风格的网站的一个很大的特征。

极简风格的网站登录页是展现有限选择魅力的地方。Gengo是一个这样的案例。这是一家专业的字幕翻译公司。它的登录页上只有一个输入框和一个翻译按钮。用户完全不需要做选择。他们只能输入内容。然后进行翻译转换。当然是需要收费的。

诚然, 在一些那种极端地信奉极简主义的人眼里面, Gengo这款产品可能还是显得不够纯净, 原因就是因为在页面的最顶端处, 依然还设置着导航栏这种东西, 而这个东西有可能会在一定程度上干扰到用户的视线感受。

4、专注于排版

如果你是真心实意地想要搞懂那种极简风格究竟好在哪儿, 那你真的可以去转一转 Brian Danaher 的个人网站看一看。这个人可不像普通的职员那样普通, 他是一个集设计师、画画的人还有艺术总负责人的身份于一身的多面手。

你稍微瞥一眼就能发现, 他的作品里头最主要的两个手段那就是用特别粗大的字, 以及不管你喜不喜歡都必须得去看的那种种一排到底的单栏格式。事情就是这么个简单理儿。别觉得这法子看着有点太直接甚至还有点粗糙, 但是人家 Brian 这么一招却是把两件特别特别重要的事情都给办妥了。

1、导航栏被设计成了单栏样式, 主要的信息清清楚楚、明明白白地展示在了用户面前。Brian究竟是谁, 他具体是从事什么工作的, 他都有哪些作品, 以及应该如何去联系他, 这些内容全部都清晰地呈现在了屏幕之上。

2、Brian成功地使用了对比度, 具体来说, 是指字体和背景之间的色彩对比, 以及字体和字号尺寸之间的对比。他用这种方式给用户呈现出了一种有趣的内容。

5、简化导航栏

我们往往在涉及极简风格站点的话题讨论中, 忽视掉导航栏这一菜单组件的设计工作。该元素完全有机会通过大幅放大的方式来对网站的视觉呈现进行加强, 与此同时, 也能够将其本身巧妙融入到网页的背景画面之中, 从而以一种显得非常安静, 并且不会对用户产生任何打扰的方式来进行展现和输出。

请观看一下摄影师兼设计师Cristian Ordonez是如何构思和打造网站的。在他负责的网站里, 导航栏的设计没有采用那种常见的长条形横幅样式去贯通页面顶部, 相反, 导航的具体项目只是安安静静地摆放在页面的右上角区域。

鉴于不存在任何多余的下拉式菜单结构, 因此也没有必要去设置额外的层级空间。与此同时, 这些菜单所采用的颜色处理方式也十分巧妙, 它们自然而然地就融进了整体的背景当中。

6、使用色彩补丁

在网站设计的过程里, 合理利用那些小小的彩色色块, 确实能够让用户比较容易就注意到页面当中真正重要的内容, 比如说960网格系统官方网站就是这样一个具体的例子, 这个九百六十列栅格系统的设计初衷本来就是希望能够把网站开发的整个流程变得更简单才对, 正因为这样, 九十伍栅格系统网站本身才会非常灵活地运用那一套栅格系统的规则, 从而把各种不一样的内容分别放到不同的区域里面去进行展示出来。

那个黄色的“view demo”按钮, 在整体以深色背景和白色文字为主的网站上, 显得非常醒目, 但却没有喧宾夺主。

位于左上角的Twitter图标, 点击之后会直接跳转到该网站的主设计师Nathan Smith的Twitter个人主页。

了解极简风格你就能用好它

当跟一部分设计师提到极简风格设计的时候, 他们会产生一种错误的看法, 以为采用这种风格所制作的网页会显得缺乏吸引力, 然而事实的情况是, 在极简风格的框架之下, 已经出现了数量相当可观的优秀设计作品。

极简风格的网站在呈现外观上, 会显得更为清晰、简洁，并且整体布局会更加井然有序, 与此同时, 这种风格能够很好地契合当前备受追捧的设计潮流, 例如说那种类别叫作扁平化的设计手法, 又或者是指那种由许多多边形拼接而成的低面数建模风格, 也就是被大家所熟知的Lowpoly, 借助于对这类流行元素的融合与运用, 能够让网站的整体视觉效果变得更为突出和引人注目，从而有助于吸引更多的用户点击来访, 并最终给运营方带来更为可观的经济收益。

继续浏览有关 极简设计扁平布局 的文章