一、网格的作用
1、网格以解决问题为首要任务,美观在其次。
2、网格是用户体验的组成部分。
3、网格越简单,就越有效。
二、步骤
1、进行调查,明确要求。
2、画线框图。
3、设计预备:基本草图,建立单元、蓝、基线以及进行计算,页面草图。
4、正式设计。
5、制作,编写代码。
三、调查并明确限制条件
1、技术限制(分辨率);
2、商业限制(流畅度、停留时间、广告点击率、引导消费和品牌的定位、市场相关,设计能力、技术力量);
3、内容和排版(字体、标题、长度、引文、数据表格、图表等)
四、专业术语
单元、栏、区域、段、分行网络、横向和纵向、缝、外边距和内填局、元素、模块。
五、网格设计实例步骤
1、准备工作
①了解项目需求;②视窗(网页尺寸)③广告单元④第三个限制条件:品牌(LOGO)
分别率是视窗的80%,一般为960宽度,屏幕区域960x650.广告单元:336x280.
2、画出设计方案
草图:铅笔和白纸。
3、创建网格
①建立分栏网格:16个单元,每个单元50像素,单元与单元之间10像素的缝,两边的单元空出5像素
②建立分行网格:10个单元9个缝是590像素,18pt的行间距
③建立段:页面宽度593pt,3个180pt的段,每段10个基本行
4、设计网页模板
核心部件:搜索框、导航栏、用户登录和注册区、品牌LOGO。