一起来学学网页设计中的视觉解剖
2021-10-21
网站建设
891
1983年苹果官网的主页规划，能够明晰的看到这种矩形块状的整形切开。
跟着网页规划的开展，其骨架也慢慢渐隐，但它仍然发挥着支撑起整个视野结构。这儿，有人会与栅格体系联系起来。网页的栅格体系更多发挥的是对齐元素的作用，而骨架的功用会更加笼统。
页面规划的骨架，针对的是每一页面的骨架。每一个网站都会有不同的页面，咱们会把页面分级为主页——二级页面——三级页面。一般来说，主页运用一个骨架，二级页面、三级页面也别离有一个骨架。主页的骨架有时还会依据分屏展现的不同展现不同的骨架款式。但不管有多少改变，一个网站的诸多页面的骨架之间，都会存在一种内在的视觉一致。
主页的视觉骨架特别重要，因为主页承担着网页的第一印象，还主导着整个网站的风格方向，因而确定好主页的视觉骨架，是规划开始最难明晰的问题。许多规划师在规划开始所消耗最多时刻，用于实验各种页面版式的类型以期最完美的效果展现，而事实上，最完美其实是个伪出题，在有限的时刻内，你需求做得就是找好自己的表达方针，每个页面设置好一个视觉焦点，依据焦点来表达你的要点内容。换句话说，你最期望用户了解什么？这个问题的答案应该是要无比明晰的在大脑中伴随规划全过程。
十字准星式：瞄准等待
人的视野总是集中在页面中心，因而将焦点设置在中心方位最投合视野的做法。例如将网站的简介放置于页面中心，为了让页面更丰厚，能够增加大图的布景加强表达的维度。十字线条通过的地方即是视野引导的途径，因而需求在线条的方位放上重要的元素。中心的方位其实也是一个等待点，瞄准视觉等待点，对规划师来说最大的便当就是省力。
不管网页的导航等其他元素放置于页面的哪个方位（尽量围绕线条通过的方向），这两个页面都是归于十字准星型的骨架结构，焦点一直坐落正中，导航不管居于哪里，都归于非必须的视觉位置。
正中的位置带来肯定的安稳感，它也是规划师最简单做到的表达。这种骨架结构，相比照较安稳，因而在需求在细节上营造一些惊喜，来打破这种相对静止的版式。
笔直双栏式：双面一体
将一个网页分成两栏并不意味着均分，它们是按照笔直方向构成了两列的不同布局。常见的的确是平均分配的体现情况，网页的焦点内容能够挑选任一侧，另一侧作为补充。简称双面一体是因为，你不能制作两个焦点，分两个部分，它们也应该共同营造一个焦点。
双栏式的页面规划体现比较灵活，一般会有一偏倚轻重这，样就能确立好视觉焦点，构成比照，制作情景抵触。视觉要点在某一侧，使用布景色的不同加强视觉重量的比照。
两列缩略图笔直摆放，让版式活泼起来的方法就是增加某一处高度的不同，强调一点纤细的改变。
网格局：有序与无序
这种骨架款式一般是基于某一个网格而搭建内容，网格的体现方式多样，每个网格都用以展现不同的内容，能够是比较标准的网格，也能够是错落有致……虽然每个网页都能够基于网格而规划，但是网页的体现未必要严厉遵循网格自身。
标准的网格一般比较倾向古典怀旧，它传递出一种相对严厉的秩序之美。
动感歪斜式：掉落的圈套
歪斜的线条简单构成动感的张力，使用这一点所构成的视觉骨架就能很好体现与“运动”“冲击力”等动感较强的内容页面。
正向方向的展现。
这些所谓的骨架原理在于躲藏于表层下方的最基地的视觉结构，事实上，其他的元素一般并不严厉局限于某个区域，这就让顶层的枝叶更加丰厚。
在咱们着手进行页面规划前，确定好一个视觉骨架的方向至关重要，这让咱们并不依赖于命运去“撞”到某个好的表达，而且你也不需求单独设定某个固定的骨架，还能够两两并用，一个网站有多个页面，多个页面都能够具有不同的布局。同一个页面，也会因为内容的不同采用不同的视觉结构表达。
下面这一个网页里的多个页面，每个页面都依据不同的焦点体现形态挑选了不同的布局，骨骼总是为内容而服务的。
跋文
一直要承认的是，内容应该是高于方式的，规划时的任何视觉骨架都是为内容而服务的，因而内容能够以任何外在的方式来体现。说了半天，虽然咱们都在讲“颜值”，其实还是那句“饱读诗书气自华”。