网页元素中常见的布局方式
2019-04-13 11:32:27
1】视觉框架
使用相同的基本布局、颜色、格式方案来设计页面，当你已经建立了一个有着很多网页的网站，或者很多页面的U丨，这时候，你可以采用视觉框架来让你的界面表现出统一感，从而使他丨n看起来是一个整体，减少用户针对不同页面不必要的学习成本。
你可以针对用户界面使用一致的颜色、字体和布局，同时统一的界面元素，一个出色的视觉框架，用户会下意识地忽略那些不变的东西，从而注意到那些变化的部分，方便用户识别当前任务和解决相关问题。
2】中央舞台
所谓的中央舞台就是把最重要的ui部分放到页面或者窗口的最大位置上，然后将一些辅助工具和内容放H在它周围的小面板上，如果页面的主要工作是为了用户显示连续的信息，让他可以连贯执行一项任务，而其他的功能和内容都是次要的，比如表格类、数据处理类甚至我们常见的图形编辑器，都采用了这个布局。
大多数网页的详情页其实也算是中央舞台布局的一种，从而让这个清晰的中央元素锁定观者和用户的注意力。
3】对等网格
以网格或矩阵的方式来呈现并排列内容元素，同时每个元素都使用同样的模板。在页面设计上或者UI中，会有很多内容元素，有些元素的层级相同和重要程度相同，比如新闻、列表内容、产品展示。所以通过网格的设计，来统一这些内容的样式，从而让观者和用户感觉这些内容本身是属于同一个类别，同时干净、有序的网格更加让观者忽略掉重复不变的东西，快速找寻自己感兴趣的内容。
4】标题区域
把内容定义成几个不同的栏目，并且给予每个栏目一个醒目的标题，同时在视觉上对不同的栏目进行区分，井把它扪都排列在页面之中。
如果你需要在页面上显示大量的内容，同时希望页面更加整洁、容易快速扫描。这时，你可以划分标题区域来解决这个问题。设计得好的栏目可以把页面内容组织的更容易消化，观者能够通过明显的标题进行快速的扫描。
5】模态Tab
模态Tab指的是将内容的不同模块组织成一个小型的Tab，这样每次只能看到一个小的模坱和内容，然后通过单击来切换不同的模态Tah，让你需要在页面上显示大量各种各样的内容，可能包括文本、列表、按钮、甚至图片视频等，而你又没办法把它扪都显示在页面上时，Tab的使用让你的页面更加简洁易用，没有人会不知道怎么使用它们。
6】可收起的面板
可收起的面板是指把次要内容和可选内容放到用户能自己打开和收起的面板里。同模态Tab类似，对于页面中要显示各种各样的内容，包括文本、列表等等。这时除了可以运用模态Tab以外，可收起的面板同样也是一个不错的选择，甚至成为可收起的菜单选项，将次要菜单以及不常用的放置在其中。
7】右/左对齐
当你在设计一个两栏的表单或表格时，可以通过让左边的标签右对齐、右边的元素左对齐，来让布局更加有序易用。
对于两栏结构中表单中的标签，可能存在长短不一，甚至有的需要折行，如果对它in进行左对齐，那么就会有一些标签离它扪关联的元素太远，不利于用户查看。
8】对角线平衡
对角线布局是用一种不对称的方式布置页面，通过将元素放在左上角和右下角来使页面保持平衡。
比如在一对一个页面或对话框进行页面布局，顶上有一个标题，下面有一些链接或者按钮，同时这个页面高度固定，不需要上下滚动，这时候通过对角线布局来达到平衡。
9】响应式展开
先显示一点用户界面，然后通过每个步骤来依次显示更多的界面，从而引导用户完成一系列步骤。
当用户需要通过多个步骤一步一步地完成一项复杂任劳时，而且这个任劳也许时新任努或者平常不怎么使用的任务，不熟悉这个任务。这时，通过响应式展开的形式可以巧妙的缓解用户面对大量未知内容的恐惧和压迫感，视觉上将任务进行了有效的拆分。
本文来源于河北网站建设公司与河北网站设计制作公司-极日科技河北公司！
