传统的网页设计正在寻求改变，一个好的网页设计变得越来越重要。今天我就和大家分享一篇关于网页设计的好文章，教大家如何设计，把观众的视野引导到你的重点。

　　首先要有一个视觉点，引导或者聚集视线。点的形状并不都是圆，或者一些具体的元素。

　　大小对比关系出现在整个页面，所以小元素可以称为点。大元素也可以叫点，是一个相对的名词。事实上，当页面上出现一点点时，它可以很快吸引用户的注意力。当它再次出现时，用户的注意力在观察图片时会分散。当不同大小的点同时出现时，用户会先关注较大的点，再关注较小的点。

　　左上：因为颜色对比和面积对比，视线会先集中在右边鲜红色的草莓上。点在这里是相对的，你可以把所有出现的元素看成点。但首先会有一个吸引用户注意力的焦点；

　　右上角：点的焦点设计，中心位置让用户直接关注中心内容；

　　左下角：这里的点甚至是页面上的亮点。右边冲出画面的是骑手。这样的表现打破了画面的稳定性，让用户关注到最先打破画面的人物，也体现了户外骑行的自然和冒险；

　　右下：点的集中设计，中间的圆圈是点，两边的餐具是线，属于典型的中心构图；

　　在实际应用中，它可以分为：

　　相同的焦点

　　首先吸引人们注意力的元素。图中的点在大小、颜色、形状上都有明显的对比。

　　三大亮点

　　意味着画面中的点的形状或细节与其他元素不同，成为画面中的主要视觉。

　　左图：以手绘黑白线条为主，利用原色食物形成画面的视觉点，引导用户跳跃式浏览；

　　右：中心点设计，视觉会聚焦的地方。大面积的留白让画面干净，除了主产品，没有其他元素干扰视线。基于三种不同的场景，向用户推荐不同的产品；

　　当你在设计时，

　　1当画面元素对比不明显，整体视觉一般时：可以根据设计需要和活动调整设计元素的大小或颜色，使要突出的点的对比更加突出。

　　当版面文字过多时，用户首先不知道看什么。这时可以尝试处理主副本的字体和颜色，让用户的视线有一个焦点。或者可以尝试调整文字的层次，让突出的突出，弱化的弱化。

　　第二，人物动作设计很多，要手、眼、身、脚来完成！

　　行动和行为的方向性。这种指向可以通过模型摆出的各种姿势来体现，也可以通过调整模型元素的方向和位置以及排版来完成。在做一些以模型为主要元素的设计时，可以很好的利用模型的每一个动作。在实际应用中：

　　比如在表达一些体育活动时，运动和活力是这类需求的主要切入点。在人物动作的选择上，尽量找一些动作大、夸张的模特来满足“动”的基本要求。

　　左图：模特角色伸开双臂的动作中，握球的左手位置正好放在文字上，文字颜色为白色，让用户第一时间关注到那部分内容。在右手所示的位置，有一个扶地的动作，而且这个动作还巧妙的结合了推荐商品，让用户可以直观的浏览和关注。

　　右：褶皱上方，图中模特的动作有一丝“炫耀”的意味，向用户展示他的8块腹肌(嘻嘻)。第二，字符显示的拳头指向也使用户的视觉焦点接近屏幕左侧的文字。在第二个屏幕中，模型眼睛显示的方向正好指向正确的内容。

　　当你在设计时，

　　1.在选择大型模型时，首先要考虑的是，在使用模型作为主要视觉元素时，模型的动作是否要结合文案和构图的需要。然后选择或拍摄适合活动目的且有方向的动作素材；

　　2使用模型素材时，充分利用模型的动作、表情、眼神的视觉方向，根据浏览轨迹将合适的内容排列到正确的位置。

　　3.眼睛的作用意味着模型在具体内容上有明确的方向。当你看着我，当我看着你，当你看着它，当人们注意到视线的运动时，注意力的焦点就会相应地调整。

　　在实际应用中：

　　当你用不同的眼睛观察事物时，其实你的眼睛有指向目的的作用。人们会在你眼睛所指的方向关注过去。它意味着用户的眼睛跟随模型或元素的方向，并注意指定的信息。这是一种利用模特的眼睛来吸引用户注意力的方式。

　　左：人物向上的眼睛引导用户先把注意力集中在人物的上半身，然后顺着人物向上的眼睛去关注人物上方的四条信息。

　　左图：人物的正面、向上、右眼都是引导用户的眼睛到相应的信息。

　　当你在设计时，

　　1按照模特脸部的方向和眼睛所指的方向，将重要和次要信息排列到相应的位置。这意味着用户的眼睛正朝着所示的方向看。

　　不要忽视模特的表情，这也很重要。想象一下，当你想表达一幅天真烂漫的画面时，你选择的模特表情僵硬，眼神呆滞，好像欠了500的工资。是不是看起来很傻？

　　三，上下左右中间前后左右！

　　方向，用来表示某个位置。箭头、直线、斜线都有明确的方向性，是引导用户视线的好元素。它不仅具有清晰的方向性，而且可以分层分离图片和空间信息。在某些场景中，最有方向性的元素是各个方向的箭头。它是一个提示用户和暗示动作的设计元素。

　　在实际应用中：

　　如果想指出需要注意的地方，最好的办法就是使用线条和箭头的指向，可以方便的引导用户的视线。

　　左：线条有明显的指向性和节奏感。直线有男性的特点，力量大，相对稳定。曲线有柔和平滑的印象；

　　左：垂直线，具有清晰的上下指向功能。

　　当你在设计时，

　　1在时尚和服装的设计要求上，灵活运用短、短线元素，可以帮助你加强文字层次，修改画面细节，提示权重。不同的线条有不同的视觉。比如粗线条给人强烈的男性印象；曲线给人柔和优雅的感觉；

　　2使用线条、短线、箭头元素时，一定要加入，以指向清楚为目的。不要为了加而加。

　　第四，万柳丛中的一点红色，诱导聚焦和凸显

　　杨柳中的一点点红色，从这句话折射出颜色的方向性。它的优点是直接使主体在成千上万个元素的干扰下脱颖而出，立即抓住用户的视觉。

　　左上：人物慢慢撕碎的红色内容成为用户关注的第一焦点，面无表情的人物给画面造成一种诡异恐怖的感觉。

　　右上：科比的湖人黄首先成为视觉焦点，引导用户关注他经典的邓兰动作。

　　左下角：红线的使用提示用户继续向下浏览，零散细长的短红线自由无序地放置在页面的主要内容上，使用户的视觉焦点集中在这些线所指示的内容上。

　　右下：红色和黑色的对比使得人物左侧的红色更加明显。

　　在实际应用中，可以分为两种情况：

　　同样的归纳

　　面对大幅面的文字、元素、图像信息，人的眼睛需要引导，色彩是最直白的形式之一。

　　通过对色彩的合理运用，强调最重要的信息，最大化色彩对比度。如果色彩的引导辅以元素指向和动作指向，那么色彩指向的影响会更大。

　　左：是典型的青红搭配。整体颜色的绿化，让页面底部的红色瓶子凸显出来。用户按照浏览习惯从上到下看完之后，视线就固定在这个红色的元素上。

　　右：在图片的左右两侧分别放置明亮的、对比鲜明的色块，让用户的眼睛随着这些色块一起移动，既激活了图片，又丰富了整体效果。

　　通过上面的例子，色彩感应的效果类似于配色中的点睛之笔色彩。用对比色和互感色展示你想突出的东西。把所有人聚集在一起

　　当图片中有两种以上的颜色时，用户的眼睛会首先聚焦在对比度强、面积大的突出颜色上，然后找到另一种颜色，然后浏览全部。

　　通过上面的例子，色彩聚合的核心功能是对你想要突出的内容进行高亮、对比、聚焦，让用户留在这里阅读你想要传达给他们的信息。

　　当你在设计时，

　　1.当主要内容用对比强烈的补色突出时，这种对焦方式更有效；

　　2如果图片中有多种颜色，可以用颜色的面积将页面上出现的所有信息分级到一个重要的级别。

　　第五，设计中有很多留白，主角旁边面积大

　　消隐，一种常见的强制神器，突出了主角的本质招数。如果以上方法都是在做加法设计，那么留白实际上就是在做减法设计。当引导元素周围有大量空白时，眼睛会从整个页面的复杂环境中毫无阻碍地首先找到设计元素。

　　在实际应用中：

　　留白是留下主角、留白、层次、约束的简单设计方法。空白的“白”指的是空白的“白”，而不是颜色。空白是指某个区域没有冗余元素，周围有大面积空白的状态。

　　左：面向产品的主题，只有几个信息页，围绕产品进行大规模的空白处理，使产品形式和细节更加集中。同时，留白的处理也提升了品牌的品质和气质。

　　右：整页有很多空白页。除了一些平面的设计元素，主画面以“白色”的形式出现。

　　当你在设计时，

　　1.有效的留白可以改善框架，让主角被凸显的更加突出；

　　2.敢留白：大量的留白会让页面有空间感，不会被页面内容的密集所恶心。

　　3.使用最简单的元素：不添加不必要的设计元素，给用户带来视觉干扰，只保留核心和必要的关键元素，对关键元素进行详细描述。

　　六，一二三四五六七，7654321

　　数字定向，序列的方向性。大多数人都有这样的经历，看到数字1就要找数字2。在一些需求中，当用户的眼睛需要用视觉来画的时候，数字要作为页眉，这样用户的眼睛才能在页面中合理的跳转。

　　在实际应用中：

　　数字元素的使用经常出现在目录页、开发历史或产品安排中。

　　左上角：鲁尼的踢腿动作和方向正好指向右边的内容区，数字代表的表头指示用户一个一个读或者分开读。

　　左下角：产品周围很大一片空白区域，让主角最先被注意到。右侧白色标题号突出产品折扣。右：数字是用来指示用户继续往下读的。黄色和黑色形成强烈对比。

　　当你在设计时，

　　1.做时尚搭配需求时，可以用数字来引导产品的顺序；

　　2.当使用数字作为元素时，数字的大小和字体应该作为一个整体来控制。数字一定不能影响主要内容。当然，如果以数字为主要内容，就要尽量突出数字的直观性。

　　七、动得太多是吵，静得太死是闷

　　运动就是画面的静止和运动。动态元素在整个静态页面中对用户更有吸引力。当然这包括页面上的gif图片，视觉元素的动态表达等等。

　　在实际应用中：

　　动作的表现可以利用人物的动作，产品的动作，gif图来完成动作的执行。但是，在同一个屏幕的页面中，最好不要同时移动三个以上的元素，因为每一个动作都会引起人们的视觉噪音，如果移动太多，必然会分散用户的注意力。使沟通的主要内容，弱化。