不会设计的程序员不是好产品 — 排版布局

人生来就乐于追求美的事物，而绝大多数美的事物都是有规律的或者是对称的。

不会做设计的程序员不是好产品。作为一个前端，我们都避免不了需要为页面的展示形式做决策，例如当你负责的项目没有设计支持时，那如何才能开发出一个让人赏心悦目的网页呢。

这篇文章的目的并不是为了让你和设计师去比设计能力，术业有专攻，而是在日常的开发中面对没有设计的项目，也能利用一些万能法则开发出一个美观的页面。

可能你会有疑问，我做一个内部项目，为什么要让我们的网页看起来美观，好用不就行了？

我们希望用户停留在我们页面上或者操作我们的页面的时候整体的感觉是愉悦的，是充满正面情绪的，而不是一进来就觉得焦虑、迷茫、不知所措。一旦用户体验不愉快，用户完全可能分分钟就关掉你的网站并发誓再也不打开，顺便还要和身边的小伙伴吐槽几句，叮嘱他们也不要使用这个破网站。可见积极正向的用户体验是多么的重要，这是保证用户量的一个必要手段。

从界面设计上来说，我们能做些什么，来增加用户的体验呢?

对齐

如上图，虽然橙色的横向对齐线和绿色的纵向对齐线都没有画出来，但是当你看到这张图片的时候，你一定可以感受到元素是基于这几条线做的对齐。

其实如果我们在开发页面的过程中能做到对齐相关元素，就已经成功一半了。当你做到了元素对齐，用户一定能感受到对齐线的存在，感受到这种秩序感和统一性，所有的元素就像衣柜里叠得整整齐齐的衣服，让人觉得舒适自在。

留白

看到上图左右两侧的文章，你的感受分别是什么，会不会觉得左侧没有留白的文章根本就不想继续往下看，而右侧的就让人感觉舒服很多？右侧的文章仅仅是在原来文章的基础上设置了行间距和段落间距。

当我们面对大量的、一眼望不到头的文字，第一反应一定是抵触和抗拒。大段的文字会压的我们喘不过气来。适量的留白就像句子中恰当的标点符号，是留给用户喘息的机会，给用户阅读下去的勇气，建立“我能看完它”的信心。

亲密

对于一同展示在页面上的元素，通常我们都可以找到他们之间的关联关系，并将其分类。如果将有逻辑关联性的元素集中在一起展示，我们几乎一眼就可以发现事物之间的关联，不至于出现看完整个页面还需要去思考这之间逻辑关系的情况。

统一

不知道你是否发现，整篇文章所有案例图片的背景色、外边框、内间距、字体、阴影都是统一的。

我们的页面，或者整个系统，一定存在一些元素是相似的，例如标题，如果你能做到对这些统一的元素保证相同的展现形式，那用户一定能感觉到这是一个体系的东西，感受到这个页面一定是被人用心设计过的，增强用户对整个页面的信任感。

我们开发中可以统一的内容： – 圆角：如果页面存在圆角，则要保证整个页面的圆角都是统一的（一般不建议圆角过大）； – 模块之间的内间距和外边距； – 字号和字色：标题字号和颜色，内容字号和颜色； – 页面的主题色：一般整个页面的颜色会选择清淡而没有太大色彩倾向的颜色，然后用鲜艳的颜色（主题色）来做点缀色； – 选用 Icon 的风格：页面中所有 Icon 的风格应该是统一的；

对比

如上图，虽然单独截出来看不明显的对比（图一）也能感受到主次，但是将这个模块放入到一整个布满新闻的网页中，这种对比就不足够明显，并不能保证用户在打开页面的第一时间就能关注到加粗的新闻内容。

当所有的元素都整整齐齐的排列在那里，页面的基本美观已经产生了，就像我之前说的，排整齐就已经成功了一半。但是，很可能这个页面是索然无味的、没有重点的。这个时候，就可以通过对比来突出我们想要突出的内容。切记， 做对比的时候一定不要犹豫，要大胆的做强烈的对比 ，不要让用户产生疑惑，不知道你是有意为之还是出现了错误。例如为了强调突出，用14px大小的字体和12px大小的字体做对比，这样的对比一定达不到想要的效果。

平衡

页面上的模块在排布的时候，尽量保持左右上下平衡，任何一边堆积过多的内容或色块，都会导致失去平衡感，头重脚轻或者左中右轻都是不可取的。

奇技淫巧

减少实线的使用，试试色块和留白

看上面的图可以感受到，明显的实线（上图图一）会把页面分割成很多块，阻断了视线，让目光在遇到每一条实线的时候停顿，尤其是两端被封死的实线，就好像用木板将两边隔离了，不流通，也会让页面显得脏。用浅色的，第一眼不能明显分辨的线条（上图图二）或者留白（上图图三）来解决分割的问题，不但达到了功能目的，还让页面看上去更加干净整洁。

当你想要边框的时候，试试阴影

如上图左测每个模块用线框包围，右侧用框型阴影包围（知乎网的原版设计），你会感觉到框型阴影会让人觉得更舒服吗？过于明显的线框会分散用户的注意力，并且使整个网页看起来沉闷，用柔和的线形阴影会显得更加自然、舒适，甚至有一点高级感。

当无法用文字大小去区分主次的时候，试试色彩和加粗

当文字内容位于同一行，或者一个模块单元中已经出现很多种文字大小，不适合再通过大小去区分主次的时候，这个时候可以主要内容加粗或者降低次要文字的颜色（通常为灰色）来达到目的。

当处于同一行的文本，为了提炼出提纲或者凸显出主次，可以用色彩去区分，用更深更粗的字体去突出重点，可以展示出层次感。

善于隐藏次要内容

对于有操作的模块来说,尤其对于一个拥有复杂操作（多于 4 个）的模块来说，把所有的功能都一次性展现在用户面前显然不是一个好的想法，我们应该去思考用户最常用的功能是哪些，把其他不常用的、次要的功能都隐藏起来，通过下拉的方式展示，以帮助用户聚焦核心操作。

一个页面中尽量不要堆砌太多的内容

用户的注意力是很宝贵的，如果一个页面中堆砌了太多的内容，很容易导致用户注意力分散，我们就无法正确引导用户去关注主要的内容。

每个页面的功能尽量单一，如果是操作性网页，一个页面最好只做一件事情，完成一件事情给用户一个正向的反馈，一步一步的引导用户直至完成全部内容。

不要让用户来来回回翻才能完成他想要完成的事情

当你浏览网站的时候，觉得文章非常不错想要分享，这个时候如果分享按钮在文章的顶部，那么你就要滚回文章顶部点击分享按钮，这样的用户体验是很不友好的。可以试试把按钮放在文章底部（一般用户认真浏览完文章会决定是否要分享），或者悬浮在侧边，让用户随时随地都可以分享。

怎么样，学会了这些实用的技巧，当我们下次再接到任务的时候，是不是可以从容的排出一个干净又逻辑清晰的页面了呢？

参考文献

《写给大家看的设计书》[美] Robin Williams 人民邮电出版社

《迅速提高设计美感，你需要这七个“作弊”小窍门》36 Kr

参考网站

掘金：www.juejin.im

知乎： www.zhihu.com

Medium：www.medium.com

网易新闻：www.news.163.com