网页设计基础单栏布局 第1篇
这是一个形象的说法,指页面上下各有一个广告条,左边是主菜单,右边是友情链接等,中间是主要内容。
这种布局的优点是页面充实、内容丰富、信息量大,是综合性网站常用的版式,特别之处是顶部中央的一排小图标起到了活跃气氛的作用。缺点是页面拥挤,不够灵活。也有将四边空出,只用中间的窗口型设计,例如网易壁纸站使用多帧形式,只有页面中央部分可以滚动,界面类似游戏界面。使用此类版式的有多维游戏娱乐性网站。
网页设计基础单栏布局 第2篇
背景层样式固定,在页面中永远置于页面底部,并且一般会给予背景层中性色,作用是方便突出内容层和全局控制层。
背景层可分为纯色背景、图片背景。
纯色背景常用颜色:中性色板的 color1 - #ffffff、color2 - #fafafa、color3 - #f5f5f5。图片背景又包括图形、文字、图片等元素构成的背景,主要用于装饰页面、引导视觉。
网页设计基础单栏布局 第3篇
模块就是我们的设计区块,可以是一段文字、一张图片,又或是其他元素。其中,背景/点缀元素并不能算作是设计模块,所以无需严格遵循栅格系统。
以 12 栅格系统为例,它可以根据业务需要被等分成2、3、4、6、12份,也可以被不对称分割为 1:2:1、1:3:2、2:3:3、1:2、3:1、1:5、3:5 等比例。设计者可以根据实际需求,自由组合。
网页设计基础单栏布局 第4篇
指当前任务或内容相关的临时出现层,优先级最高。一般承载当前需要临时处理的任务,如:对话框组件。
对话框以滑出或者弹出的形式展现给用户,底部内容层不可操控,被蒙版遮罩禁用,在操作需要聚焦的分支流程时使用。
三、栅格系统
本模块从关于栅格、模块、间距系统、关于适配这4方面进行阐述。
栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考,它让页面设计变得有规律。
熟练地运用栅格系统,不仅可以减少决策成本、提高设计理解力,还可以实现响应式布局、加速团队协作并保证视觉还原。
网页设计基础单栏布局 第5篇
中断点,是网页在收缩的过程中的最小范围。当网页宽度到达这个范围以后,网页内部的元素就要进行相应的变化,用来适应网页尺寸的变化。
中断点是基于页面具体内容、主流用户设备的分辨率、用户规模和成本计算等设置的。在拉升/压缩页面的过程中,无法使用相同的布局且必须改变内容展现方式时,产生的关键尺寸节点即可作为中断点。
以下断点以谷歌 Material Design 和 Bootstrap 的断点为例,仅作参考:
中断点越多会让网页变得更加细腻、流畅。然而,当研发时间有限、对显示要求较低时,可选择常用的断点设置即可。
以下我们挑选了三个常用的中断点数值作为参考:
网页设计基础单栏布局 第6篇
由于用户的页面显示设备,不同形态的布局,适配方式也不同。
Fixed:表示固定宽度,元素宽度为定值,不受页面宽度的影响;Auto:表示自适应宽度,元素宽度随着页面宽度的缩放而缩放;Min:表示最小宽度。
基础布局
上下布局:内容模块可设计成固定宽度、全屏宽度两种视觉布局。
固定宽度的上下布局,固定宽度值(Fixed)设为 1200px 即可满足多尺寸屏幕适配需求,Auto 区的宽度则由屏幕的大小决定;全屏宽度的上下布局,需设置内容区的左右最小边距(Min),以防止内容区的信息被遮挡。
左右布局、“T”型布局:内容区都是自适应宽度(Auto),两侧的导航栏、菜单栏、侧边栏均为固定宽度(Fixed)。
扩展布局
“C”型布局、“口”型布局中,内容区都是自适应宽度(Auto),两侧的导航栏/菜单栏、侧边栏均为固定宽度(Fixed)。
四、Web页面适配
本模块从响应式、中断点、布局类型、流动布局下的模块处理、自适应这 5 方面进行阐述。
网页设计基础单栏布局 第7篇
响应式不是简单的等比缩放。我们要在保证易用性的基础上,根据内容的重要性灵活布局。流动布局下的模块处理方式分为 5 种:挤压-拉伸、左右-上下、 删减-增加、变换位置、隐藏-展开。
挤压-拉伸
模块内容随着屏幕宽度进行挤压或拉伸。
适用场景:适用于文本内容、纯色背景、按钮、填选框等伸缩不会发生变形的元素。
左右-上下
模块内容从左右排列变为上下排列。
适用场景:适用于图文列表、主内容+右侧推荐等所有左右排版的组合。
删减-增加
移动端空间有限,需对不重要的内容(如重复的快捷入口、推荐链接、相关的广告等)进行删减。
不同于桌面端网页,移动端可视区域相对较小,且受使用环境等因素的影响较大(如在公交、地铁中,内容过多/多小,不易阅读及操作)。因此,删减掉不重要的内容,保留主线任务内容极为重要。
可删减的相关内容不一定只出现在侧边栏,它也会穿插在主要内容模块附近,以上仅为某种情况的示例,切勿以偏概全。
实际网页应用示例:
变换位置
根据设备的宽度、内容的重要层级等变换模块的显示位置。
适用场景:侧边栏有次要内容模块(不可删减的网页),适配至移动端,可将两侧内容移动至页面底部(主要内容下方)。(网页端两栏、三栏布局,适配至移动端变为单栏布局)
PC端多栏布局适配至移动端单栏布局中时,模块的上下顺序由模块的重要层级排序决定。重要级别越高,显示位置越靠近页面顶部,反之靠近页面底部。
实际网页应用示例:
隐藏-展开
内容过多时可选择收起,以弹窗或者单独一个页面显示。