| 标题 | 浅谈栅格系统在网页界面版式中的应用 |
| 范文 | 程璨 摘 ? 要：网络世界已成为人们日常办公生活的必要组成部分，因而涌现出各式各样的网站，在网页设计师设计千变万化的网页界面时探索发现，栅格系统作为网页界面设计的工具发挥了重要的作用。本文通过分析栅格系统，了解到采用栅格系统可以解决传统设计布局技巧、方法的低效、不规范及难以维护等问题。 关键词：互联网;栅格系统;网页界面设计 中图分类号：TP393 ? ? ? 文献标识码：A ? ? ? ?文章编号：1005-5312（2016）26-0285-01 在互联网大环境下，越来越多的人通过浏览网页完成自己的工作、学习、生活，网页本质是一种信息的载体，相比于报纸、杂志、海报、宣传单页等传统媒介来说，其构成元素更加复杂，将图片、动画、音乐、文字以及色彩等融为一体，在众多元素的搭建中，如何将网页界面版式更加立体生动的展现在用户面前，是网页设计师们一直在探寻的问题。栅格系统的应用，不仅可以使用户一目了然的阅读网页信息，而且对网页设计师来说，在各种视觉元素的运用组合排列中，突出视觉效果、提高工作效率、满足大众需求等，使网页界面设计更加规范和美观。 一、栅格系统 栅格系统（grid system）也称之为骨格编排系统、网格系统，在艺术设计的各个领域起到重要规范作用。20世纪50年代，瑞士“国际版面风格”沿用德国包豪斯学派的的设计观念，以达到设计上的统一性、实用性、美观性因而注重使用简单的网格和极尽标准的版面公式。瑞士知名设计师约瑟夫·米勒·布鲁克曼曾对栅格系统设计评价道：“网格使得所有的设计因素——字体、图片、美术之间的协调一致成为可能。网格设计就是把秩序引入设计中去的一种方法。”网页设计师们在设计网页界面时，将文字图片等内容通过栅格系统的精确计算，按“栏”为单位进行区域划分，使版面更具规范性、严谨性，文字与图片的完美融合也使版面更具节奏的变化、更加活泼生动，用户在阅览时更加轻松愉悦。例如版式中的图片位置和文字编排，一级标题、二级标题的大小比例，页码以及角标的位置编排，都按照一定设计标准进行整体规划，使整个作品保持统一性、连贯性。与以往传统排版不同，它更加重视版式编排的比例、思路、连续、秩序、时代、严谨等特色。 二、栅格系统在网页设计中的应用 （一）网页栅格化的特殊性 互联网消息的传播发展速度之快是传统印刷媒介所不能比的，对于海报、杂志、宣传单页等传统印刷媒介，设计师们可以花费一周或者时间更长的时间进行设计，平面设计师可以以个体为单位独立完成前期创作，主导整个产品最终呈现在用户面前的视觉效果。但在网页中，设计师要考虑不同的操作平台、不同的浏览器、不同的屏幕大小都会影响同一网站、同一界面在用户面前呈现的形式可能互不相同，用户会根据自己的喜好调整字体的大小、网页的外观等，并且互联网消息更新速度之快也是设计师个人所无法控制的。这时就需要后台与前台的相互配合，通过响应式设计手法，设计可以适应这些变换的栅格系统。 （二）网页栅格化的必要性 使用栅格化系统来进行网页设计是十分必要的，它可以提高网页的规范性。对于常规网站的开发及维护来说，所含内容在一个版本中不会出现太大的版式变化，所有编排元素的大小尺寸都是有律可循的，前端设计人员根据规定尺寸进行设计，无需因为一个板块的更新而使整个网页在进行重新规划，后端开发人员在维护网站时也可以省时省心，从根本上降低网站运营成本。运用栅格系统已成为大型网站设计运作的一种趋势，使之网站运营更具规范化，对于某些中小型网站，更加需要设计师们利用栅格化系统使原本杂乱无章的网页看起来更加清晰，使整个网站的各个界面在整体布局上保持一致，又增加了各个界面之间的相互联系，提升用户对网站体验感。 （三）响应式网页栅格化设计 随着技术水品的不断进步，用户的浏览要求也在随之变化，根据不同年龄、不同性别、不同职业的用户越来越关注个性化的设计，它们是否可以根据自己所实用的电子设备对所访问网站进行字体调整变化，浏览器窗口的大小、不同的浏览器以及电子设备的分辨率大小，都可能导致网页的排版模式发生变化，设计师根据这些特点，利用栅格化系统的优势，将各个栏目区分固定，最终根据比例来控制整个页面的变化，从而保证用户在个性自定义后网页编排依旧秩序严谨。 “栅格系统”或是“网格系统”给人以严肃呆板的感觉，但通过设计师们的合理使用，在保证内容显示最全的情况下，使用户获取信息更加轻松，令其在网页排版中发挥重要作用，是网页排版中的骨骼。合理的运用栅格系统，能使整体页面显得更加规范、美观、完整，制作网页的效率得以提高，有利于网页形象的塑造和推广，像bat等国内主流网站的网页编排，均遵循栅格系统，这就是栅格系统最具商业的价值所在。 参考文献： [1]徐慧.基于移动终端的网格探索与研究[D].北京：中央美术学院，2013. [2]威廉·斯莫克（美）.周明瑞.包豪斯理想[M].济南：山东画报出版社，2012. [3]郑鼎，陈晨.网格系统在数字平面设计出版物中的运用[J].美术教育研究，2012（02）. [4]周峰，彭沛.浅析网格系统在网页设计中的重要性[J].科技信息，2009（03）. |
| 随便看 |
|
科学优质学术资源、百科知识分享平台，免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。