前言
大厂的项目开发很规范，人员配备很完善。但不是每个人都有这个环境。小团队的前端同学多多少少都会接到页面设计的工作：或是设计整个页面，或者对细节进行调整优化。
开始的时候我很不适应，唯一的出路就是“模仿”。自己家没有设计师，只能去借力别人家的设计师了。
但不是总有合适的模板给你借鉴的，对于不断变化的需求，有时候就会滞留在设计阶段很久。
有了问题，就要解决。更进一步，不只是解决眼下的问题，而是消灭这一类的问题。
所以借此机会，对网页UI设计中牵涉到的几个方面进行一下学习和总结。
首先最重要的，也是最基础的，就是排版。
PS：
- 不涉及到
素材创作，毕竟我不是真的设计师。网上素材很多，我们要做的是更好的使用它们。 - 日常工作中最常用的还是
推理式排版，创意式排版不在本篇讨论范围之内。 - 仅讨论常规的
网页UI设计。 - 我总结的肯定不够全面，也不一定正确，只是提供一个
思路。
不保证成功，不一定有用，知识只是点亮世界的灵光。 —— 《八分》 梁文道
第一原则 - 视觉动线
在设计网页的时候，要问的第一个问题就是：你希望用户如何阅读这个页面？ 假设有5个内容A、B、C、D、E需要展示，哪些是重要的，哪些是可以不看的？
思考这些问题，就是在思考视觉动线：引导用户的观看方式，设计视觉落点和视觉路径。
如何区分
区分不同元素的重要性可以体现在颜色、字号、内容、组织方式、背景等等：
- 字重大、字号大的比普通的更吸引注意力；
- 图片比文字更容易被看到；
- 鲜艳的颜色更抓眼球。 但还不止这些。比如模块间的组合方式也是很重要的手段，后面会提到。
（突出展品展示、颜色选择、添加购物车；弱化描述与其他产品的链接）
（一眼就看到了百事饮料的不同规格）
过程完整
多数情况下，视觉路径完整也很重要：从哪开始，经过哪里，到哪结束。
设计好重要的元素是不够的，“红花”有了，“绿叶”也很重要。 试想页面内的模块都被你加粗加大加图片，反倒谁也突出不了，不美观也不实用。
(简单罗列的页面，没有突出、没有排版，不美观也不太实用。你应该会更喜欢Netflix的页面设计。）
排版就是组织模块的艺术
页面是由模块组成的。开始构图前，首先确定好必须的模块。在整体构图完成后，可以适当增加点缀和辅助的模块。
在考虑模块的设计时，要让主要模块能得到足够的注意力，和最佳的观看体验；辅助模块可以突出主题、增强风格、增加趣味。
模块间的排版
模块间的排版里，常见的关系有：组合，对比，呼应。模块的内容、作用、风格，决定了其适合的排版方式，在设计时可以多尝试，并且平时多总结，多留心。
(对于关键信息，选择了大号字体、柱状图、环状图等多种形式对比展示；对于左下角的次要信息和相似信息，选择相同的展示形式组合集中展示)
如果模块的内容相似度很高，可以做成统一样式，但是更好的方案往往是考虑不同的设计方式，区分开模块的内容，让用户也更容易使用和查找：
（简单的通过颜色区分）
（都是图片+文字的电影介绍，但是通过大小、字体、排列方式的不同，将整体分为了多部分，区分开了不同的内容）
模块内的排版
在设计模块内的元素组合方式时，就是各显神通的时候了。中文和西文、段落与段落、图片和文字等，可以很天马行空，但这里面也有一些设计师们总结的最佳实践。部分举例如下。
- 字体大的时候可以适当缩小字体间距，因为即使小间距也看得清；反之亦然；
- 西文段落的换行，要注意断开单词的位置；
- 西文的逗号、句号后面加空格；
- 大多数时候，左对齐比居中显示要好；
- 尽量少用直引号；
- 如果图片与文字有“分离感”，试着把将他们重叠，把文字放到图片上，降低图片的不透明度；
- 图片素材过多？也可以尝试部分重叠，既压缩了其占用空间，又不会显得太过重复；
总结
排版（构图）是设计的第一步。
排版时的第一原则是视觉动线的设计。视觉动线可以帮助你通过设计掌握主动权，那些感觉很乱的排版往往就是没有好的视觉动线设计。
排版说白了就是模块间和模块内的排列方式，在设计时要考虑其内容、表达意图、风格等，可以用组合、分离、呼应，或者肆意挥发你的灵感。
考虑模块间的排版方式，是为了美观、易读，让整个页面达到一种和谐的观感。多尝试和多总结是最好的办法。
流行的UI设计风格每年都在变，不变的是设计原则：更好的意图表达和更好的观看体验。
