网页设计栅格系统日期:2019-06-21 人气:1138754
|
栅格系统的形成 栅格系统(Grid system)最早使用在17世纪末的法国印刷业,出版业。 维基百科对其定义为:栅格设计系统(又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格),是一种平面设计的方法与风格。 网页栅格系统是有平面栅格系统中发展而来,以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。 02 栅格系统的原理 栅格系统可以按栅格数分为12列,16列,24列等,可以自由设计栅格宽度和栅格与栅格间宽度。如下图所示,记页面或区块宽度为W,A代表一个栅格单元的宽度,a代表一个栅格的宽度,i为栅格与栅格之间的距离,n为正整数,则有W=(a*n)+(n-1)*i,由于A=a+i,可得(A*n)-i=W。 (A*n)-i = W 这个公式表述了网页的布局与网页背后栅格系统之间的关系。来观察经典的雅虎案例: Yahoo的网站页面宽度为W=950px,每个区块与区块的间隔为i=10px;如果应用上面的公式,可以推出A=40px,既Yahoo首页横向版式设计采用的栅格系统为:(40×n)- 10 = W。只要保证一个横向维度的各个区块的n值相加等于24,即可保证页面的宽度一定是950px,950px的宽度也恰好就是当n=24的时候,W的宽度值。 在栅格系统中,设计师根据需要指定不同的版式或者划分区块改变A和i的值进行设计,这样,一个栅格系统的应用就从此开始了。 03 经典960栅格 设计师们偏爱用苹果系统做设计,苹果下浏览器的默认宽度为960px, 在 1024 x 768 的分辨率下,我们再打开Firefox,自然状态下,Firefox窗体的大小约为 974 x 650. 减掉左右两边7px的边框,网页的实际大小为上图中的红色部分,高宽为 960 x 650.有趣的960就这样出现了。960只是个符号,并不是标准数。 上面列举的都是大型门户网站,它们的首页宽度为950px/960px。除了微软的Live Search。根据上面的简单分析可以认为:当搭建页面结构复杂的门户型网站时,开发工程师们不约而同地都选择将页面宽度定为950px/960px。为什么要选择这个宽度呢?我们从数学着手:960可以分解为2的6次方乘以3和5, 这使得960可以分割成以下宽度的整数倍: 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480 共26种(26 = 7 * 2 * 2 – 2, 减去2是去掉1和960自身),我们标记为: N(960) = N(2^6 * 3 * 5) = 26 根据上面的算法,可以得到: N(360) = N(2^3 * 3^2 * 5) = 22 N(480) = N(2^5 * 3 * 5) = 22 N(720) = N(2^4 * 3^2 * 5) = 28 N(750) = N(2 * 3 * 5^3) = 14 N(800) = N(2^5 * 5^2) = 16 N(960) = N(2^6 * 3 * 5) = 26 N(1000) = N(2^3 * 5^3) = 14 N(1024) = N(2^10) = 9 N(1440) = N(2^6 * 3^2 * 5) = 34 N(1920) = N(2^7 * 3 * 5) = 30 N越大,可组合的宽度值就越多。对栅格系统来说,这意味着越灵活。 目前绝大多数显示器都支持 1024 x 768 及其以上分辨率。为了有效的利用屏幕宽度同时保证栅格的灵活度,可以看出960是非常合适的。这样,在目前主流显示器下,960就成为网页栅格系统中的最佳宽度了,也许不久的将来,将会流行1440。 04 使用栅格系统的优势 对于设计师来说,栅格系统更多的是一种布局思想,可以更有逻辑地进行设计工作。灵活地运用栅格系统,不仅可以让整个网站各个页面的布局保持一致,让网页的信息呈现更加美观易读,让设计稿有更好的结构,更可以通过匹配不同组合,做出很多优秀和独特的排版设计。 使用网格系统,可以使网页设计给用户正式感和规范感,还具有一种结构分明的设计感,提升用户体验。网格系统不意味着循规蹈矩,一味按照网格线来进行布局。网格系统的意义在于更灵活的帮助设计师有序布局,而不是限制设计师的设计。 对于前端开发人员来说,栅格系统的使用,给整个网站的页面结构定义了一个标准,大大提高了网页的规范性。在栅格系统下,页面中所有组件的尺寸都是有规律的,可重用的,这对于大型网站的开发和维护来说,能节约不少成本。 随着响应式设计的流行,栅格系统开始被赋予新的意义,那就是,一种响应式设计的实现方式。响应式的要点是为同一个页面设计多种布局形态,分别适配不同屏幕尺寸的设备。 可以看到,一个页面可以拆分成多个区块来理解,而正是这些区块共同构成了这个页面的布局。根据不同的屏幕尺寸情况,调整这些区块的排版,就可以实现响应式设计。而借助栅格系统,设计与前端开发人员可以很容易的设计和创建响应式的页面布局。 栅格系统是一种格式化的设计工具,使用栅格系统是一种好的习惯,设计师可以更专注于内容呈递,更专注于强调重点。当然,规矩是用来打破的,当我们理解了布局的理念,掌握了栅格的手法之后,也无需拘泥于栅格的形式,可以对其“革命”,进行创新。 文本来自采集文章 http://qita.xzsz.com/24/484.html 如需转载或删除,请联系管理员。 上一条:网页设计中的双重服务关系
|
热点资讯
- 01-23 网站优化你要关注的四个决定后期排名的关键点
- 01-23 网页设计色彩搭配之清淡柔和的蜡笔色
- 01-23 如何让宝贝的排名到首页
- 01-23 怎样快速提升网站排名
- 01-23 企业网站建设的排名如何上百度首页
- 01-23 企业网站搜索排名优化推广策略
- 01-23 网站建设未来趋势是什么
- 01-23 企业网站优化如何提升网站排名?
- 01-23 提高阿里排名的14条潜规则,您懂的!
- 01-23 实战自己网站排名变化分析百度算法调整要重点关注的因素
- 01-23 有一个自己企业网站的重要性
- 01-23 想做好网站优化 这些基础的认识你真的具备吗
- 01-23 新企业如何进网站建设
- 01-23 成立了公司怎么做一个企业网站必读
- 01-23 浅析如何创新使用百度经验来进行网站推广
- 01-23 网页设计的套路
- 01-23 阿里巴巴店铺排名优化方案分享
- 01-23 网页设计的套路
- 01-23 我的网站维护的一点心得体会分享
- 01-23 网页设计的套路
- 01-23 网站排名记录 如何做好外链优化
- 01-23 手机网站建设相对PC端网站有何优势
- 01-23 阿里推出标题优化工具助商家提升搜索排名
- 01-23 网页设计色彩搭配之清淡柔和的蜡笔色
【其他本地网络公司】——承诺3小时内上门服务!其他上门全国热线:400-666-2014 【我要收藏此页面】 网站地图 豫ICP备13015228号 网站维护:深一深圳网站建设
全国其他网站制作-服务网店
- 孝感
- 咸阳
- 仙桃
- 咸宁
- 湘西
- 湘潭
- 香港
- 襄樊
- 西安
- 厦门
- 梧州
- 吴忠
- 五指山
- 武夷山
- 无锡
- 武威
- 乌鲁木齐
- 乌兰察布
- 五家渠
- 芜湖
- 武汉
- 乌海
- 温州
- 文山
- 渭南
- 威海
- 潍坊
- 瓦房店
- 图木舒克
- 吐鲁番
- 铜仁
- 铜陵
- 通辽
- 通化
- 铜川
- 桐城
- 铁岭
- 天水
- 天门
- 天津
- 唐山
- 泰州
- 台州
- 太原
- 台湾
- 台山
- 泰安
- 宿州
- 苏州
- 宿迁
- 随州
- 遂宁
- 绥化
- 松原
- 四平
- 沭阳
- 朔州
- 顺德
- 双鸭山
- 石嘴山
- 十堰
- 石家庄
- 石河子
- 深圳
- 沈阳
- 神农架
- 邵阳
- 绍兴
- 韶关
- 汕尾
- 汕头
- 山南
- 上饶
- 商丘
- 商洛
- 上海
- 三亚
- 三明
- 三门峡
- 日照
- 日喀则
- 衢州
- 曲靖
- 泉州
- 七台河
- 其他
- 齐齐哈尔
- 钦州
- 秦皇岛
- 清远
- 庆阳
- 清徐
- 青岛
- 黔西南
- 黔南
- 潜江
- 黔东南
- 濮阳
- 莆田
- 普洱
- 萍乡
- 平凉
- 平顶山
- 攀枝花
- 盘锦
- 怒江
- 宁德
- 宁波
- 内江
- 那曲
- 南阳
- 南通
- 南山
- 南平
- 南宁
- 南京
- 南充
- 南昌
- 牡丹江
- 明港
- 绵阳
- 梅州
- 眉山
- 茂名
- 马鞍山
- 吕梁
- 泸州
- 洛阳
- 漯河
- 娄底
- 龙岩
- 陇南
- 龙岗网页设计
- 柳州
- 六盘水
- 六安
- 丽水
- 林芝
- 临猗
- 临沂
- 临夏
- 临汾
- 临沧
- 丽江
- 辽源
- 辽阳
- 聊城
- 连云港
- 凉山
- 乐山
- 拉萨
- 兰州
- 廊坊
- 莱芜
- 来宾
- 昆明
- 库尔勒
- 克孜勒苏
- 垦利
- 克拉玛依
- 喀什
- 开封
- 济源
- 鸡西
- 酒泉
- 九江
- 锦州
- 晋中
- 济宁
- 金华
- 荆州
- 荆门
- 景德镇
- 晋城
- 金昌
- 济南
- 吉林
- 揭阳
- 嘉峪关
- 嘉兴
- 焦作
- 江门
- 吉安
- 佳木斯
- 湖州
- 霍邱
- 呼伦贝尔
- 葫芦岛
- 惠州做网站公司
- 呼和浩特
- 黄石
- 黄山
- 黄南
- 黄冈
- 淮南
- 怀化
- 淮北
- 淮安
- 红河
- 贺州
- 菏泽
- 河源
- 和县
- 和田
- 衡阳
- 衡水
- 黑河
- 鹤岗
- 合肥
- 河池
- 鹤壁
- 汉中
- 杭州
- 邯郸
- 哈密
- 海西
- 海南
- 海拉尔
- 海口
- 海东
- 海北
- 哈尔滨
- 固原
- 果洛
- 贵阳
- 茶山网站制作
- 清溪网页设计
- 塘厦做网站公司
- 黄江网站制作
- 凤岗网页设计
- 石龙做网站公司
- 石碣网站制作
- 长安网页设计
- 常平做网站公司
- 樟木头网站制作
- 厚街网页设计
- 虎门做网站公司
- 西城网站制作
- 南城网页设计
- 东城做网站公司
- 城区网站制作
- 罗湖网站制作
- 华强北做网站公司
- 西丽网站制作
- 大浪做网站公司
- 光明网站制作
- 龙华网页设计
- 观澜做网站公司
- 观兰网站制作
- 公明网页设计
- 松岗做网站公司
- 沙井网站制作
- 西乡网页设计
- 福永做网站公司
- 石岩网站制作
- 坂田网页设计
- 大芬村做网站公司
- 坪山网站制作
- 坪地网页设计
- 横岗做网站公司
- 布吉网站制作
- 平湖网页设计
- 桂林
- 贵港
- 馆陶
- 广州
- 广元
- 广安
- 甘孜
- 赣州
- 甘南
- 抚州
- 福州
- 阜阳
- 阜新
- 福田
- 抚顺
- 佛山
- 防城港
- 鄂州
- 恩施
- 鄂尔多斯
- 东营
- 东莞
- 迪庆
- 定州
- 定西
- 德州
- 德阳
- 德宏
- 达州
- 大兴安岭
- 防狼喷雾
- 大同
- 大庆
- 丹东
- 大连
- 大理
- 大丰
- 滁州
- 楚雄
- 崇左
- 池州
- 赤峰
- 郴州
- 成都
- 承德
- 潮州
- 朝阳
- 巢湖
- 常州
- 长治
- 长沙
- 昌吉
- 长葛
- 昌都
- 常德
- 长春
- 沧州
- 亳州
- 博尔塔拉
- 滨州
- 毕节
- 本溪
- 北京
- 北海
- 巴中
- 巴音郭楞
- 巴彦淖尔盟
- 包头
- 保山
- 宝鸡
- 保定
- 宝安网站制作
- 蚌埠
- 白银
- 白山
- 百色
- 白城
- 澳门
- 安阳
- 安顺
- 鞍山
- 安庆
- 安康
- 阿里
- 阿拉善盟
- 阿拉尔
- 阿克苏
- 阿坝
- 道滘网页设计
- 惠城
- 惠阳做网站公司
- 博罗
- 惠东
- 龙门
- 淡水
- 大埔
- 五华
- 紫金
- 龙川
- 遵义
- 资阳
- 自贡
- 淄博
- 株洲
- 驻马店
- 珠海
- 诸城
- 舟山
- 周口
- 中卫
- 中山
- 重庆
- 镇江
- 郑州
- 正定
- 赵县
- 昭通
- 肇庆
- 湛江
- 漳州
- 张掖
- 浙江
- 云南
- 新疆
- 西藏
- 四川
- 陕西
- 山西
- 山东
- 内蒙古
- 辽宁
- 江西
- 江苏
- 湖南
- 湖北
- 黑龙江
- 河南
- 河北
- 贵州
- 广西
- 广东
- 甘肃
- 福建
- 安徽
- 大朗
- 横沥
- 东坑
- 寮步
- 谢岗
- 桥头
- 企石
- 石排
- 章丘
- 张家口
- 张家界
- 张北
- 枣庄
- 禹州
- 玉溪
- 玉树
- 云浮
- 运城
- 玉林
- 榆林
- 岳阳
- 永州
- 永新
- 益阳
- 鹰潭
- 营口
- 银川
- 伊犁
- 伊春
- 宜春
- 宜昌
- 宜宾
- 盐田
- 烟台
- 鄢陵
- 扬州
- 阳泉
- 阳江
- 阳春
- 盐城
- 延边
- 延安
- 雅安
- 徐州
- 许昌
- 宣城
- 西双版纳
- 忻州
- 新余
- 信阳
- 新乡
- 西宁
- 邢台
- 兴安盟
- 锡林郭勒盟