整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
有没有打开网站，或拿起小册子或传单寻找一些信息，却感觉不可能找到你要找的东西？
你可能会看到一个混乱无序的信息混乱，你甚至不知道从哪里开始 ，因为你的眼睛没有看到设计的路径。
作为设计的消费者，我们都可能在某个时候体验过这种情况。但作为设计师，确保我们的设计布局不能出现这种情况，否则读者急于在浏览器中点击后退按钮，或者沮丧地丢弃传单。
那么好的设计的关键是什么？好的版面设计要从强大的构图和良好的流程开始。
构图：设计师的定义
构图指的是：你设计的所有元素被安排创建一个有凝聚力的整体。您可能添加到设计中的实际元素，如排版、照片或图形，但是也会考虑“布局的整体视觉效果”（如白色或空白空间，对齐和边距）的“不可见”元素，或者您可能用来安排设计的任何框架（如网格，黄金比例或三分法则）。良好的构图应该以一种有意义的方式，在视觉上引导观者的思考。
作为流程的一个简单的例子，这张名片有一个明显的向下移动（箭头形状的帮助，从字面上指出），其信息从上到下按重要性排列。
这种构思，关于如何将布局拼凑在一起的思考和有意识的行为，是一种适用于许多不同类型的视觉艺术的技巧，像绘画、摄影。
现在让我们看看传统上用来创建有效的，视觉上吸引人的作品的一些工具和技术。
可视重量和平衡：创建一个清晰的层次结构
一个好的作品，不仅仅是一个整齐排列的形状、颜色和文本的结合体。每一个设计都有其目的，并向读者传递信息，而且一个精心策划的组合可以考虑设计中最重要的信息，并以一种合理的方式强化信息。通过其重要性来安排信息的过程通常被称为建立层次结构。没有层次结构（或不适当的层次）导致了一个混乱的设计，没有视觉流动，我们不想看到这样的作品。我们来看看两个关键要素：明确的层级，焦点和平衡的组织：
01.选择一个焦点
一个联络点将人们吸引到您的设计中，并让他们有机会开始审视您的作品。如果观众只有几秒钟的时间浏览一下你的设计，你留下一个印象或者记住一些信息，那会是什么？这个重要元素应该是你的主要焦点，为了确保它是人们首先看到的东西，你需要找到一种方法来强调这件作品，并使其成为布局中最明显的部分。
该怎么做呢？通过视觉上的焦点来增加重量感。当设计元素具有视觉上的重量时，乍一看是最突出的。它在视觉上是“沉重的”，使得它在整个布局中体现出来了——你可以立刻知道它是重要的，它通过与外观相关的东西吸引你的注意力，通常与其余的设计形成对比。有哪些技术手段使设计版面上能体现视觉焦点重量感？有很多可供选择，包括但不限于：
? 尺寸
? 形状
? 颜色
? 质地
? 位置
我们来看一些例子：
把图片文字放大尺寸。版面设计上中最大的图片或者文字，可能是人们看到的第一件事。但是，有时仅靠大小还不足以使您的焦点可见; 确保你知道它是如何与设计的其余部分相互作用的。与下面的海报一样，在你的焦点周围作留白处理，这样常常有助于引导读者的眼睛。
吸引注意与不寻常的形状。以下广告在多个层面上是一个有趣的作品。它首先用一种不寻常的形状捕捉到你的眼睛，这就是吉他的轮廓。这种形状引导你的眼睛到吉他的“颈部”，“颈部”是由广告的正文形成的。所有这些设计选择 ——吉他的形状，士兵的照片，文本所讲述的故事 ——以一种视觉引人入胜的方式支撑整个版面设计的构成。
选择突出明亮的颜色。下面的网站设计将鲜明的霓虹绿色应用于号召性用语（“下载应用程序”按钮）。即使按钮不是页面上最大的对象，但是由于使用这种明亮颜色的缘故，它首先吸引了你的注意力。
添加纹理。下面的广告提供了复古外观的纹理，增加了额外的视觉效果，但也转移了设计的某些部分的注意力。请注意，“印刷店”的颜色深浅如何帮助这个词语脱颖而出。“免运费”中的“免费”字母并非完全平稳稳定，也引起了人们的关注。
重要视觉元素的位置。为您的焦点选择正确的位置，将确保其用于将读者吸引到您的设计中。作品的左上角和中心部分都是常用的选择，但最有效的地方将取决于每个项目的具体情况和要求。
02.平衡和组织其余部分的设计
当焦点进入到读者视线后，需要按照他们可以轻松浏览其余布局的方式进行组织。这是层级真正起作用的地方，在读者看到你的设计时，好有一个清晰的途径。他们的眼睛是否应该向下移动？跨越？从一个部分到另一个？
设计中的非焦点部分，如何从焦点流向其他层级的途径，将是成功构图的关键。您可以使用我们已经讨论过的一些技巧，通过布局指导读者，但是大多数设计都将受益于整体结构或组织原则。而不是随意地将元素投射到您的设计中，并希望它变成好的，对于构建您的构图而言，考虑周到和有意为您的读者创造一个更有用和更具视觉吸引力的体验。让我们看看一些常见的技术：
使用网格。将您的设计与某种网格对齐是一种简单而有效的方法，使事情整洁有序，基于网格的布局的可能性是相当无穷的。
下面的网站设计将网格应用到网站的整体结构以及该结构中，以组织和分离信息（注意每个图像下面的可见网格线）。其结果是一个干净，有序的组合，建立一个清晰的方式来探索网站，并找到你需要的信息。
尝试“三分法则”。三分法则是视觉艺术中的经典构图技巧，但您可能会听到摄影师特别赞叹。为什么？这项技术的支持者指出，当主题（或焦点）完全处于合成的中间时，是常规的和可预测的方法。为了创造一个更有活力和视觉上有趣的作品，你把焦点转移到了一边。三分法网格（见下面）是创建平衡但动态组合的捷径。它将图像或布局划分为相等的三分之一，包括垂直和水平六行。这些线条，或理想情况下这些线条相交的四个点是放置焦点的好地方。
这个广告将焦点（广告品牌的标志和名称）直接放在作品的上半部分。还要注意折叠的钱包如何巧妙地暗示着英国国旗的形状（这个广告是为一家伦敦的皮具公司制作的），并指出了这个品牌的名字......这是一种被称为“领导线”的组合技术。
考虑对称性。对称性是平衡设计的最大贡献者之一。在对称设计中，中心轴的两侧均匀平衡，无论是垂直、水平还是径向（从中心点辐射，通常为圆形）。即使是不对称的对称，也能改善布局的视觉平衡。下面的设计既有垂直对称，又有水平对称，所以即使它的装饰风格有很大的辐射面和变化，它看起来仍然很平衡。
这个活动的海报具有径向对称的形式。焦点是指事件名称的一系列图像，文字信息从那里辐射出来，平衡了图像的视觉重量。
留下一些空白空间。设计中的白色或空白区域不是浪费空间，而是平衡构图的基本要素。留出足够的空白空间，可以让您的版面布局不至于过于混乱，并给您的设计元素留下一些喘息的空间。它还提供了读者看设计时的眼睛路径，以及在看布局之间休息的地方?——这对保持内容繁重的作品不受压倒性读者的影响，尤其重要。
例如，这个网页内容之间和周围的空白，让你的眼睛从一个部分转到另一个部分，创造一个很好的流动感，它又是一个干净的、清爽的风格作品。
领导力量：创造运动路径，引领眼球
主要的线条是文字或暗示的线条，引导读者的眼睛，你希望他们看到——通常是你的设计的焦点，但有时只是从布局的一个部分或元素到另一个部分。主要的线路路径可以采取多种不同的形式，包括：
01.对角线
对角线可通过横跨设计，通常从上到下，从左到右来实现，就像阅读一本书时眼睛的视线移动方向。创造动感或暗示方向。另一种常见的技术是使用来自相反方向的两条对角线，将用户的注意力集中在一个点上。如果你上学的时候，曾经上过一个艺术课，一个常见的做法是画一条延伸到远处的道路或通道：两条对角线从相反的方向出发，开始宽而窄，直到它们相遇被称为“消失点”的视界，这是行动中的对角线，是构图中创造深度和视角的最基本的方法之一。
以下网站设计使用此概念来组织其产品图库。注意背景中黄色形状所产生的对角线（以及选择性模糊）如何在设计中产生深度感。
在下面的例子中，请注意书封面上的主要插图如何创建一个对着标题的对角线。那么你的目光可以回落到字幕和作者的路径。这是一个聪明而有效的构图设计方法，但它也是一个多用途的解决方案，它在视觉上确立了本书的主题。
另一方面，这里的对角线移动不是由实际的线条引导的，而是由设计元素的放置和重叠所暗示的。结果是一个比传统的基于网格的设计更具视觉吸引力的构图。
02. Z形状和S曲线
像对角线一样，这些形状为眼睛提供了穿越设计的途径。Z形符合英文/西文阅读模式（从左到右，从上到下），是许多版面设计布局的常规做法。
虽然它们在相反的方向上运行，但是S曲线通常在自然界中出现，并且可以给作品带来流畅的运动感。
下面的网站设计的布局可能是非传统的，但是它的弯曲构图引导你的眼睛从一个部分到另一个部分，并且是视觉上感兴趣的重要部分。
03.重复线条和图案
重复可以引导你的目光朝某个方向看去。它可以采用重复的线条，形状或其他方式排列的方式。重复也可以是强化视觉主题并为您的设计增添节奏感的绝佳方式。即使是重复的文本内容，如项目符号或编号列表，也可以帮助组织设计并赋予其流动感。
以下杂志设计布局通过两种方式重复对角线和三角形的视觉主题：在单个页面或点差（引导读者浏览内容）和整个问题（通过整个出版物创造一致性和节奏感）。
04.人眼的凝视
当一个人的面孔出现在版面设计中，特别是使用人物面部摄影作品时，读者一定会注意到?——我们的大脑喜欢寻找脸部。创建细微领导线的一个有效方法是让照片中的主题朝向设计的焦点。读者也会跟着走，看着那里。
在这本杂志封面上，照片中的人似乎正在审视描述问题内容的文字。但是阅读文本会引导你回到照片。这种循环交互使您的注意力集中在封面上 ——这是一种很好的技巧。
对你而言
学习设计作品的一些有效技巧，可以帮助您在设计美学和功能方面水平得到提升。
本文由海空设计翻译整理，转载请注明：【海空设计】版面设计构图的原则
【原文地址：http://www.haiko.com.cn/html/zhuanzhu/zazhi/2017/1228/730.html】
德经第二十二章中有一句是说“少则得，多则惑”，这句话的意思是：少取则真得，贪多则反而导致自身的混乱。结合我亲身经历，更容易理解这句话的意思。
有一段时间，我们天都学习10个小时，这种情况一直持续了大半个月。可是效果却几乎等于没有，这段时间内每天都会有大量的信息涌入你的脑袋，在学的那一刻，你感觉你已经完全会了。但是过个一两天，你却完全不记得你到底学过些什么，像失忆了似的。
艾宾浩斯记忆曲线也告诉我们，大脑的记忆是一个缓慢的过程，想要对某一知识记忆深刻，就需要不断地重复练习。直到随时随地拿来就用的地步，你就再也不会忘记了。
为什么说少则得，多则惑呢？每天只学一点，练习好几遍，把这个知识点刻到脑子里面去，这样日积月累你会发现你已经学会了很多。每天学习很多知识点，很少时间去练习，过段时间你会发现你什么都没有记住，到用的时候根本想不起来，还得返回头再去学习一遍。徒增学习成本，也就是多则惑的道理。
好了言归正传，今天我们来学习html中的表格和表单，这两个可不是一个东西哦。
表格：excel表格知道吧，横行竖起列的那种表格。看图：
上面是一个9行2列的表格，在html里面也有这种表格，我们来使用html的table表格标签来实现一个5行3列的表格。
上图中table标签表示这是一个表格，tr表示一行，图中我写了五行，都用红圈标注了出来，每个tr里面又包含着td，td表示列，第1行里面有3列，第2、3、4、5行每行里面都有3列。
在浏览器中的效果：
和我们想象中的样子好像有点不一样，没有格子，这是因为我们没有设置的缘故，table标签允许你通过border属性来设置边框（也就是格子），那我们来给它设置一个边框吧。
通过给table标签添加border="1"，就可以让表格有边框了，来看看浏览器中的效果：
还是有点别扭，我脑海里面的表格应该是和艾宾浩斯记忆曲线的那张表格一样才对啊，现在的这个表格有点镂空的感觉，第1行的第1列和第1行的第2列，也就是“关羽”、“男”之前有距离，如何把这个距离去掉呢？我们可以通过table标签的cellspacing属性把距离去掉，试一下：
加了cellspacing="0" 属性后，浏览器中的效果如下：
当然了， table标签的cellspacing属性的不光可以等于0，还可以等于其他值，比如我们就是希望有距离，那么我们设置成20试一下：
浏览器中的效果：
cellspacing属性的值应该取多少，按照你的需求来设置就好了。
现在还有一个问题，我觉得每个单元格的太小了，也就是“关羽”这个格子的边框和“关羽”这两个字贴得太紧了，一点都不好看，我们可以让他稍微有点距离，那样看起来应该比较美观一点。这个需求可以通过table标签的cellpadding属性来设置，其实也就是设置内边距，关于内边距的概念我们在《踏上编程之路的必经之路之html篇三》中讲解过，如果忘记的同学可以返回去看一下。
我们将cellpadding设置为10，在浏览器中的效果如下：
现在整个表格感觉是竖起来的，能不能让他感觉是横着呢？table标签允许你调整它的宽度，只要宽度够了，感觉起来自然就是横的了。我们通过table标签的width属性来调整表格的宽度：
调整表格的宽度为600，浏览器中的效果如下：
表格中的文字现在是左对齐，也就是靠近单元格的左边，我们可以让它居中，或者靠右对齐（右对齐），文字的对齐方式可以通过tr标签的align属性来控制：
注意文字对齐方式，是给tr标签（也就是table的行标签）设置了align属性，不是给table，不要写错地方了。align="center"就是让文字居中，align="right"就是让文字右对齐，如果不写，默认是左对齐。
设置了文字对齐方式后，浏览器中的效果如下：
最我们整体调整一下，我需要有边框（border="1"，设置为0就是没有边框），单元格之间不要距离（cellspacing="0"，设置成其它值就是有距离），内边距需要5（cellpadding="5"），表格宽度需要400（width="400"），文字统一都是居中对齐（table标签的tr标签上面设置align="center"）,整体设置后的代码如下：
浏览器中的效果如下：
其实table标签也有一个align属性，它可以让整表格在浏览器中的居中、靠左或者靠右对齐，有兴趣的同学可以自己尝试一下。
最后提醒一句，代码中的各种标签和标签的属性还有单双引号，都必须是英文的，如果你写成中文的，是不正确的。
举个例子：
良好的行动力，是成功的一半，动手练起来。
击右上方红色按钮关注“web秀”，让你真正秀起来
作为程序员的我们，书写代码也需要大量的技巧。一份良好的代码能让人耳目一新，让人容易理解，同时也让自己成就感满满。因此，在这里简单的整理一些CSS开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码。
CSS实用技巧第一讲：文字处理
本小结主要是围绕css对文字处理的技巧，有兴趣的小伙伴可以收藏一下。
CSS最常用的对齐方式，居中对齐、左对齐（默认）、右对齐，而且实现起来也是非常的简单。
如下：
p{
text-align: center;
text-align: left;
text-align: right;
}
但是两端对齐你有用过吗？
只需要添加text-align-last:justify样式即可。请看示例：
<div class="justify-text"> <div class="li">账号</div> <div class="li">密码</div> <div class="li">电子邮件</div> </div>
scss样式
.justify-text {
.li {
padding: 0 20px;
margin-top: 10px;
width: 100px;
background-color: #f13f84;
line-height: 40px;
text-align-last: justify;
color: #fff;
list-style: none;
&:first-child {
margin-top: 0;
}
}
}
CSS实用技巧第一讲：文字处理
现代书本上的文字都是从左到右的顺序排列，但是古时候不同，文字都是从右至左排列的，现在在很多古籍、牌坊、石碑等上面依旧可以看到从右至左的文字。
css也可以调整文本排版方向，是通过什么属性控制的呢？
writing-mode 属性定义了文本在水平或垂直方向上如何排布。
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
下面看具体示例：
<div class="bruce flex-ct-x"> <div class="vertical-text"> <h3>诗经</h3> <p> 死生契阔，<br> 与子成说。<br> 执子之手，<br> 与子偕老。 </p> </div> </div>
scss样式
.vertical-text {
writing-mode: vertical-rl; // 文字排版方向
h3 {
padding-left: 10px;
font-weight: bold;
font-size: 18px;
color: #d60f5c;
}
p {
line-height: 30px; // 行间距
letter-spacing: 7px; // 文字间距
color: #ee1166;
}
}
CSS实用技巧第一讲：文字处理
文本从右至左排列
<div class="reverse-text"> 红豆生南国<br/> 春来发几枝<br/> 愿君多采撷<br/> 此物最相思 </div>
scss样式
.reverse-text {
font-weight: bold;
font-size: 30px;
color: #f13f84;
width: 200px;
letter-spacing: -70px; // letter-spacing最少是font-size的2倍
}
CSS实用技巧第一讲：文字处理
文本溢出处理不管是PC或者是H5，都是非常常见的，非详情页面都会经常用到。
文本溢出处理分为：单行文字溢出 和 多行文字溢出。下面看看具体示例：
单行文字溢出
<div class="ellipsis">昨夜雨疏风骤，浓睡不消残酒。试问卷帘人，却道海棠依旧。知否，知否，应是绿肥红瘦。</div>
scss样式
.ellipsis {
width: 200px;
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出修饰 ellipsis省略号
white-space: nowrap; // 文本不会换行
}
CSS实用技巧第一讲：文字处理
多行文字溢出
<div class="ellipsis">寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。三杯两盏淡酒，怎敌他、晚来风急！雁过也，正伤心，却是旧时相识。 满地黄花堆积，憔悴损，如今有谁堪摘？守着窗儿，独自怎生得黑！梧桐更兼细雨，到黄昏、点点滴滴。这次第，怎一个愁字了得！</div>
scss样式
.ellipsis {
width: 400px;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
}
CSS实用技巧第一讲：文字处理
注意
使用文本溢出处理时，容器一定要定义宽度。
多行文字溢出，scss样式添加注释autoprefixer: off并不是为了说明什么，而是，在webpack打包编译时，如果没有这个注释，-webkit-box-orient: vertical会被忽略掉。
在浏览器中，当你选择文本想要copy时，是不是会发现选择文本会有背景色和文字颜色呢？其实它是可以通过css定义的。
使用::selection自定义文本选择颜色
<div class="select-color"> <p>红豆生南国，</p> <p class="special">春来发几枝。</p> <p>愿君多采撷，</p> <p class="special">此物最相思。</p> </div>
scss样式
// 全局文本选择样式
::selection {
background-color: #f13f84;
color: #fff;
}
.select-color {
line-height: 30px;
font-weight: bold;
font-size: 30px;
color: #d60f5c;
}
// 具体某个选择器下 文本选择样式
.special::selection {
background-color: #00b7a3;
}
CSS实用技巧第一讲：文字处理
有空把CSS3及其选择器和伪元素伪类等知识点复习一遍，温故而知新。多使用Chrome的DevTools来调试CSS，提示式的填值能发现很多有趣的属性。多尝试不同的方式实现相同功能，多实践。项目中多试用CSS的新特性，不要总是被低版本浏览器束缚着，这样也一直难以进步。在使用JS完成一个简单的效果前先想想能不能用纯CSS来完成。这样你的CSS技能就能得到稳步提升。
最后谢谢大家的支持。
*请认真填写需求信息，我们会在24小时内与您取得联系。
