台州页面设计:网格系统布局网页界面的一套标准设计方法

作者:台州市久谦网络科技有限公司 浏览: 发表时间:2021-08-19 09:27:01

台州页面设计:网格系统布局网页界面的一套标准设计方法

网络网格系统像一个谜一样困扰着许多初级网络设计师。网页网格系统是一套标准的网页设计布局设计方法!

从维基百科来看,网格的定义是:网格设计体系(也称网格设计体系、标准尺寸体系、程序布局设计、瑞士平面设计风格、国际主义平面设计风格),是一种平面设计方法和风格。采用固定网格设计布局,其风格工整简洁,成为二战以来出版物设计的主流风格之一。

网格系统主流网站的两大因素是什么?如何使用网格系统?如何利用网格系统布局页面影响网页设计?GridGuide工具简介

一、电网系统

网格系统英文是Grid Systems,也可以翻译成Grid system。

定义:使用固定的网格,遵循一定的规则设计页面的布局,使布局标准简洁规则。

其实也没那么神秘。我对web网格系统的定义如下:规则网格数组用于指导和规范网页的布局和信息分发。网页网格系统是从平面网格系统发展而来的。1692年,为了提高印刷水平,法国以网格设计为基础,将一个印刷版面分割成上千个单元,这是网格最早的雏形。后来逐渐演变成采用固定网格设计布局的平面设计风格。然而,对于网页设计来说,网格系统的使用不仅可以使网页的信息更加美观和易读,而且可以使其更加易用。而且对于前端开发来说,网页会更加灵活和规范。

1.1网页网格

在这里,包括网页和移动终端,标准界面中的布局和信息分发都是由规则的网格阵列来指导的。

1.2为什么使用栅格

通过使用网格,商业设计的细节可以得到合乎逻辑的解释。

所有的设计内容都要有一定的依据,当别人质疑的时候,能够系统自信的讲解设计内容。设计师可以用网格让画面更有调性,让内容更易读;可以快速校准元素的位置,让画面更加平衡;元素可以模块化管理,这使得布局更加分层。

1.3网格基础七要素

最小单位

首先要确定界面的单位基础,后续的内容元素和布局规则都是基于其整数倍增量。

网页最小单位:10

移动终端的最小单位:3、4、5

1.3.2总宽度/宽度

整体宽度:整体布局规范,也能保证设计尺寸的统一。

界面设计应该有特定的尺寸。因为内容是不确定的,所以高度不能固定,但是内容区域的宽度可以固定。

1.3.3列数/N

在设置了界面的总宽度后,列数被垂直分成几列。

网页:12栏24栏(栏数通常相等,但肯定不是固定的,栏数需要根据自己的内容来设置)

移动端:6列(常用等列数)

1.3.4大柱宽/升

将界面的总宽度分成若干列,每列的宽度为大列宽。

计算公式:L = W/N

大列宽包括:列宽和下沉

1.3.5水箱/克

两个相邻列宽之间的间隔是一个水箱。

水槽宽度越大,页面留白和呼吸感越好,反之越紧凑。水槽可以更标准地区分内容。

1.3.6列宽/立方厘米

将界面的总宽度等分成列,减去相邻两列(水槽)之间的间隔,得到列宽。

安全裕度/M

界面左右两边适当的间隙,保证可读性和美观性,才是安全边际。

在草图中安装水槽后,安全裕度是水槽的0.5倍。

计算公式:M = G/2

安全边际:

除了使用0.5倍的水箱外,还可以使用0、0.5、1.0、1.5、2.0等倍数。例:水槽20,使用0.5次,安全裕度10;水槽20,使用2.0次,安全裕度40。

各种公式汇总:

n是自定义设置的列数

总而言之,在草图中设置网格,并定义三个值,即总宽度、列数和下沉。定义这三个值后,将自动计算其他内容并生成网格。

如果没有Sketch,也可以在AI中生成一个网格!

网格计算方法

已知:

宽度(w)列宽(a)列数(n)间距宽度(I)列数+间距(a)

公示如下:

模式1

W=(a×n)+(n-1)* i

模式2

因为:列数+间隙为a。

或者(a× n)-I = W。

人工智能操作方法

1.比如950PX是一个类,模拟浏览器背景1920,新建一个主区域950 px

2.选择950矩形,并将对象路径划分为网格

3.输入总宽度,可以自动为您计算列宽

三、如何使用网格系统布局页面

第一步:确定页面宽度,如1920、1800、1600、1366、1280等

第二步:分析内容划分的复杂性。如果内容简单,只需要3、4个分区,12列的网格系统。如果有更多不等分的可能,建议采用24列的网格体系,可以灵活设置。

第三步:根据内容布局页面,确定模块之间是否存在“缝隙”,缝隙的大小是多少。从6px、8px、10px、12px和20px中选择一个便于计算、存储和除法的值。就像过去一样,开发者发现960px是最适合网格布局的宽度,因为960可以划分3、4、5、6、8、10、12、15。你是不是突然发现设计其实是一道数学题?

四、影响网页设计的两大因素

分辨率和浏览器

4.1什么是分辨率?

比如1920*1080px,整个屏幕可以看作是由很多小方块组成,一个像素就是一个小网格,横向有1920个小网格,纵向有1080个小网格。

电脑屏幕为14英寸或15英寸,大小不变,电脑分辨率可变。在同一个屏幕上,分辨率越大,画面越精细,反之则越模糊。目前流行的屏幕分辨率有1024*768、1366*768、1280*800、1280*1024、1440*900、1600*900、1920*1080等。

4.2浏览器

在设计网页时,我们应该考虑浏览器。主流浏览器有谷歌、Safari、火狐、IE、欧鹏等。

由于不同浏览器的工具栏高度不同,如果设计内容需要在小屏幕上显示,需要考虑打开浏览器默认页面和全屏页面的高度显示。如果浏览器占用的高度比较大,内容显示区域会被压缩,所以需要考虑尽可能把最重要的内容放在上面。


台州页面设计:网格系统布局网页界面的一套标准设计方法
长按图片保存/分享

台州市久谦网络科技有限公司  版权所有

 Copyright © 2020 All Rights浙ICP备2020041870号-1 Reserved      网站地图

台州市久谦网络科技有限公司  版权所有 

Copyright © 2020 All Rights Reserved 浙ICP备1245789785号-1      网站地图

添加微信好友,详细了解产品
使用企业微信
“扫一扫”加入群聊
复制成功
添加微信好友,详细了解产品
我知道了