web栅格化规范制作

随着业务的不断推动，现在我们的后台工程越来越多。但是由于前端和后台之间联调简单导致工程常常会DPL随着业务的不断推动，现在我们的后台工程越来越多。但是由于前端和后台之间联调简单导致工程常常会DPL，做一系列的标准出来。这样可以削减交互，前端，后台相互的沟通本钱，同时能够沉淀下这段时间大家的收获。〕中我们主要是做栅格体系，控件体系，视觉体系，下面我来和DPL中的栅格体系设计栅格争论网页栅格系统前，来看一组数据：网站首页页面宽度pxYahoo!950淘宝1000MySpace960浪950网易960LiveSearch958搜狐950优酷960AOL960上面列举的都是上面列举的都是Alexa100的站点，它们的首页宽度为950px/960px.除了微软的LiveSearch,这些站点有个共同特点：页面构造较简单，都可以认为是门户型网站。,,,同的特点是：功能专一，页面构造相对简洁。950px/960px.这是一件很好玩的事情，为什么要选择这个宽度呢？这个宽度值到底有什么魔力？960，而不是其1000那么如何设计一个栅格系统？接下来我们将通过实例，具体的介绍一下网页栅格系统的原理与应用：Wna”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：W=〔a×n〕+〔n-1〕ia+i=A，可得：(A×n)–i=W注：960i〔i=10〕的长度，950ii=10xpN，AW1280〔我们的系统在内页12801024〕，所以最好是整个栅格能平均分成3列W得：3x*5y-10=W其中x，y15x*y-10=w上面列举的都是Alexa全球排名前100950px/960px.除了微软的LiveSearch,这些站点有个共同特点：页面构造较简单，都可以认为是门户型网站。列举下现在网站的栅格详情参考：网页的栅格系统设计网站(xp)a*b(xp)Yahoo!95064淘宝100066.1333网易95064LiveSearch95864.5222良无限系统100066.1333nAx*y64.122412〔3x=12〕时：4y=6424〔3x=24〕时：8y=641.024即：我们的栅格是：〔40×24〕-10=950基线在描述基线之前，我们先要了解下前端对于输入框的构造吧12textarea〔蓝色局部〕他是个根底，pading〔内白色局部〕textarea和框描边的空隙，border〔黄色局部〕是框的描边宽度，margin〔黄色外虚线框范围〕hover12textarea里textarea18123距。依据这点，我们把表单里面的输入框元素和栅格元素一起考虑，设置了每个控件在栅格里面的效果：〔〔textarea的内容〕〔我们一排可能消灭三列〕，所以在表单页面和查询页面我们都统一冒号对齐，这样就能保证输出框是比较整齐的。便利用户扫瞄。下面来讲我们的重点：基线。先看图反响和输入框是捆绑的，我们在用户填完内容之后会给他第一时间的反响，这时候假设位置放在后面，则会导致其次列的内容不好放，我们就把反响都放在输入框的下面，而且反响只会是出错的反响，以免用户20textarea18textarea。依据这个规律，我们做出了全部控件搭成的页面。注：动作按钮是冒号对齐，保证操作的连贯性等到和前端沟通，方案通过之后，我们在开头制作详情页和查询页栅格标准做好之后，就为颜色标准和控件标准的打下了一个很好的根底。/交互设计师，我们不应当单纯地凭借感觉，应当专注到像素级别，严谨设计，同时保持和前端的沟通，虚心承受他们的指导。其实，前期我们没有想到栅