网页设计第一弹 设计技巧

在群里，会给大家看一些作品，有的我会指出一些问题，有闲暇时间我也有去改，从中发现了很多问题，其中排版上面的问题很多，很多细节的地方不到位或许就是和大神的区别吧；今天的文章讲到web设计和平面的关系以及网页中几个必要的构成元素，如果你是刚入设计的同学看了会对你有帮助，如果知道也不妨多看看

、

首先我们来看下什么是排版，排版，是指将文字、图片、图形等可视化信息元素在版面布局上调整位置、大小，是使版面布局条理化的过程（百度百科的，多精辟）排版几乎应用在所有的平面设计当中，报刊、书籍杂志，同样用在网页设计当中，但由于网页的特性，它会比平面排版更为复杂，更具挑战性

虽然说承载物在变,交互在变,技术也在变，但是基本的原则不会变，网页排版依然要遵循平面构成的基本原则——重复与交错、节奏与韵律、对称与均衡、对比与调和、比例与适度、变异与秩序、虚实与留白、变化与统一，在这些的基础上，去深入理解页面的功能和内容，使之形式更好的体现主题思想，去考虑不同的分辨率、不同的设备环境下的呈现效果

网页设计涉及到平面中的图片、文字、色彩搭配，还有网页所需要的导航菜单，表单，同时还有音频、视频、各种js样式让网页更加生动，交互更好，这么多的东西，怎么去排版？我老板说了要高大上，logo要大，那么我们要做的就是将信息内容有效的组织、排布，使其规范有序、清晰明确，同时还好用，让老板让用户都爽，今天一起来看图片、文字、颜色、表单四部分内容

1. 图片：

我做设计的时候把图片分为两种，一种是配图，就是那种很cool，很nice，我很喜欢的图，放在页面中填充页面的缺失，让页面更均衡，或者背景比较单调用图片添加一些质感和层次感，就是用来搭配页面的，这样的页面很多，随便一找就好了，第二种也是我觉的很重要的一种，我叫做关键图，就像AE里面的关键帧一样重要，我们找的图要符合产品的气质，要用图去解释文字，要让我们的图片会说话，要让用户第一眼知道这个网页是做什么的，这样的图怎么去找呢

1. 提炼产品特性的关键词，通过关键词的形式寻找合适的图片（这里的关键词不是一个而是多个，中文不行可能英文就可以）

2. 图片品牌化（找到的图片进行色调、色彩饱和度与特色风格处理，使之在项目中运用到的图片都是一整套的、风格统一的）

Flyby是一个药品网站，它的药品可以分解酒精诱导的毒素，并自然补充丢失的维生素，矿物质和氨基酸的胶囊（我没有在打广告哈）不看文字，淡蓝色的背景，一杯可能柠檬水吧可能，原谅我没文化，还有绿色的树叶，胶囊，很明显了已经，如果我们去做这样的网站，提取的关键词：健康、药品、保护、health等等，用最能突出特点和有代表性的关键词来寻找合适的图片

Primary是卖女孩儿的网站，哇哈哈，一本正经的胡说，这是高级床上用品和床垫设计的网站，整个画面很温馨，很柔软，根据项目可以提炼出：舒适、温馨、柔软等等，让产品特点更加突出

2.文字

通过对字号、字体、字色、粗细、间距、行距等属性来体现出内容的层次结构，同时，字体本身的视觉特性和品质影响着信息传递的质量，衬线体、无衬线体、手写体、几何特征的英文字体，哥特体每种字型都散发独特的情感或个性，搭配不同的视觉元素会给人不同的感受，增进文字排版技巧的最佳方式之一，就是观察其他设计师的作品是如何运用文字排版，这需要不断地练习并培养判断的眼光。

3.颜色

每个人对颜色不同程度的理解，影响到设计页面的表现，熟练地运用色彩搭配，会让设计作品事半功倍。一张优秀的设计作品，色彩搭配一定和谐得体，令人赏心悦目，我这里就不过多的去讲色相和色调和色彩构成的知识了，但这是必须掌握和熟练应用的

我常用的取色的方法有两个，第一个就是基于品牌的颜色主导画面，第二种是从图中找到适合的颜色，图片的像素过于密集，颜色很多，怎么做呢，复制图片之后执行滤镜>像素化>马赛克，之后去吸取颜色，做一些简单的调整，我这里做了一个简单的示范：

4.表单

精心的表单排版，能让用户感到心情舒畅，愉快地注册、付款和进行内容创建和管理，首先把文案的结构关系梳理好，如果内容过多，可以借助思维导图、XMind等工具做一些结构图，之后运用文字层级关系，颜色把内容分层级，必要的时候可以用icon或者图案让表单更丰富，视觉上更突出

总结：

老板说的炫酷、高大上，我觉得是非设计出身的领导对设计师做的不完整不合理的页面提出非专业的需求，因为他觉得不好又说不上哪里不好，SO，就会提出一些类似这样的需求

Web设计中排版很重要。好的排版设计，不但要美观，更多的是要将信息内容有效的组织、排布，使其规范有序、清晰明确，便于用户高效、准确获取相关信息，让Web设计更友好、易用、真实可信。