`

网格(UED所谓栅格化)方案生成器

 
阅读更多
本文转载于:http://www.twinsenliang.net/skill/20081109.html

首先这是一篇让你知其所以然的文章,如果你不了解栅格化你应该看看,如果你很了解栅格化你更加应该看看。

事情的起因:
今天帮跑去跟小组争取福利,和领导谈话。
我说小组对于那种虚名的表扬最近不太感冒,最好来点实质的奖励。
他就说什么技术提升之类远景什么的,让大家为了理想去工作。
我说我们组总体水平已经是重构界最强了的哦。
他就问我知道什么是栅格化么?不知道怎么谈业界最强。
我无言……



我这样对技术沉溺到BT的人,又怎会允许自己在技术上的无知呢?……于是回到座位,查了一下,找到了些业界的文章。

    网页栅格系统研究(1):960的秘密 http://ued.taobao.com/blog/2008/10/22/grid_system_research_1/
    网页栅格系统研究(2):蛋糕的切法 http://ued.taobao.com/blog/2008/10/22/
    网页栅格系统研究(3):粒度问题 http://ued.taobao.com/blog/2008/10/28/
    网页栅格系统研究(4):技术实现 http://ued.taobao.com/blog/2008/11/05/grid_system_research_/
    网页的栅格系统设计: http://www.vvsoo.com/article/19.htm
    我的栅格系统实现: http://www.gracecode.com/Archive/Display/2363

栅格化……



qzone的“栅格化”……四年前就开始了……鬼都不知道那叫“三格”(其实正确的说那个应该叫做网格),我还以为山木的弟弟呢……

    引用平面设计导论
    5、网格式结构布局。
    网格系统是现代国际上普遍使用的一种版面构成方式。勒.柯布塞的《模式》一书是最早将网格用于设计的,他将一个矩形以黄金分割法分割出44个设计方案,从而为图形设计提供了一个较宽选择余地的样板。  近三十年来,越来越多的平面设计家开始熟练使用网格这种技巧与自由灵活的方式相结合,根据主题与设计的需要,集条理与活泼于一体。

x=小模块宽度
y=模块的间距
z=大模块宽度
m=大模块宽度等同于小模块宽度的个数
w=总宽度
根据qzone的实际状况(z=x*2+y)得三元一次方程式如下:
w=x*4+3*y
推得
w=z*2+y

根据这个才会得到qzone现在的这样的比例。

我们现在按照实际要求(z=x*m+y)基础推理得总宽度不定情况下,假定需容纳小宽度模块n个得
w=x*n+(n-1)*y
同理推得
w=z*Math.floor(n/m)+(Math.floor(n/m)-(n%m-1))*y+x*(n%m)

使用穷举的程序如下(简单的算法想不到,我高数没学好):

    function DOG(){//最搞笑的是这里的缩写居然是DOG……
    //Deletion of grid
    //m=大模块宽等同于小模块宽度的倍数
    //x=小模块宽度
    //y=模块的间距
    //z=大模块宽度
    //w=总宽度
    mm=3;//设定默认对比倍数,qzone的为2;
    mmax=1002;//最大像素
    my=5;
    for (var mx=my+1;mx<mmax;mx++){
    mz = mx*mm+(mm-1)*my;
    for (var mn=3;((mn*mx)<=mmax) || (mn*my)<mmax;mn++){
    mw=mz*Math.floor(mn/mm)+(Math.floor(mn/mm)+(mn%mm)-1)*my+mx*(mn%mm);
    if ((Math.floor(mw)==mw) && (mw<=mmax) && mw>900 && 3<mn && mn<10 && mx>150){
    document.write(mw+"="+mz+"*Math.floor("+mn+"/"+mm+")+(Math.floor("+mn+"/"+mm+")+("+mn+"%"+mm+")-1)*"+my+"+("+mn+"%"+mm+")*"+mx+"<br />");
    document.write("小模块宽度:"+mx+";");
    document.write("模块的间距:"+my+";");
    document.write("大模块宽度:"+mz+";");
    document.write("全是小模块的话个数为:"+mn+";")
    document.write("总宽度:"+mw+"<br />");
    }
    }
    }
    }
    DOG();//运算时间小于15秒,可以接受。

上例已经按照最佳状态进行筛选n选3以上,总宽度选定为900以上,全是小模块的话小于10个,最小的小模块宽度大于150;之后可以得到一个详尽的列表。

Twinsen这里只选取其中随便几个。
1002=600*Math.floor(5/3)+(Math.floor(5/3)+(5%3)-1)*3+(5%3)*198
小模块宽度:198;模块的间距:3;大模块宽度:600;全是小模块的话个数为:5;总宽度:1002
1001=750*Math.floor(4/3)+(Math.floor(4/3)+(4%3)-1)*3+(4%3)*248
小模块宽度:248;模块的间距:3;大模块宽度:750;全是小模块的话个数为:4;总宽度:1001

然后又根据网站布局的可三可二原则(即小模块的个数应当为6时)以及两大一小原则(即小模块的个数应当为5时)以及一大两小原则(即小模块的个数应当为4时)同时

    得到相同的答案950
    950=950*Math.floor(3/3)+(Math.floor(3/3)+(3%3)-1)*7+(3%3)*312
    小模块宽度:312;模块的间距:7;大模块宽度:950;全是小模块的话个数为:3;总宽度:950
    950=711*Math.floor(4/3)+(Math.floor(4/3)+(4%3)-1)*6+(4%3)*233
    小模块宽度:233;模块的间距:6;大模块宽度:711;全是小模块的话个数为:4;总宽度:950
    950=568*Math.floor(5/3)+(Math.floor(5/3)+(5%3)-1)*5+(5%3)*186
    小模块宽度:186;模块的间距:5;大模块宽度:568;全是小模块的话个数为:5;总宽度:950
    950=473*Math.floor(6/3)+(Math.floor(6/3)+(6%3)-1)*4+(6%3)*155
    小模块宽度:155;模块的间距:4;大模块宽度:473;全是小模块的话个数为:6;总宽度:950
    以及7等分原则
    950=402*Math.floor(7/3)+(Math.floor(7/3)+(7%3)-1)*9+(7%3)*128
    小模块宽度:128;模块的间距:9;大模块宽度:402;全是小模块的话个数为:7;总宽度:950
    以及9等分原则
    950=314*Math.floor(9/3)+(Math.floor(9/3)+(9%3)-1)*4+(9%3)*102
    小模块宽度:102;模块的间距:4;大模块宽度:314;全是小模块的话个数为:9;总宽度:950
    还有11等分原则
    950=254*Math.floor(11/3)+(Math.floor(11/3)+(11%3)-1)*7+(11%3)*80
    小模块宽度:80;模块的间距:7;大模块宽度:254;全是小模块的话个数为:11;总宽度:950



大家可以明显地看到这里和UED得出的结论一样都是950,但是Twinsen一点都不赞同UED的分析方式。这里有几点很想说明一下的:

首先是这个名称的问题,别人明明就是叫做网格,干嘛死活要搞个名词出来作为自己研究的成果。别人《超越CSS》里面写的也是”网格“,硬是将别人的内容变成栅格化。简直就是对笔者莫大的侮辱。

其次是强拉硬扯的典故和经典。“勒.柯布塞的《模式》一书是最早将网格用于设计的,他将一个矩形以黄金分割法分割出44个设计方案,从而为图形设计提供了一个较宽选择余地的样板。”……2n*3*5……神奇的数字……确实是神奇了,别人用的是黄金分割:”根号5减1除以2(0.6180339)“;用一个无理数算出一个极其有规律的自然数,我都觉得神奇。(看来某人不单设计没学好,数学也没学好……)也就是为什么上面的例子使用的是穷举,我实在想不到更好的办法……。再说那篇文章里面提到的黄金分割也不赞同,因为很牵强;比如我分的格是1px,我就不信搞不出比你更能适应更能黄金的两个块出来。

第三其实早前我们小组在研究YUI的时候,很不赞同他们的构想。如果我们使用这样固定的宽高大小比例(最可恶的是谁限定了间距一定为那么死老粗的10px),那么请问我们要设计师来干嘛?剩下的也就是定定颜色,画画小图标做做广告图而已了。

第四所谓的栅格化某种程度上面来讲只是一群偷懒的页面仔省事的办法而已。定死了一个个的块以后,直接的套用固有的CSS去完成需求(达不成结构与表现分离);只要一有设计师不使用这套东西就被灌上:“不栅格化”的名头。损害项目的高度扩展性,PO害设计师才华;损人利己,非行家所为。

解释了一大堆,问题也说了一大堆;然而Twinsen并不是一个评论而不给解决方案废物;而且Twinsen也不会是手动去画若干张图来显示自己很专业的人。所以做了下面的这样的一个生成器,只是为了方便设计师在设计的时候可以方便、快捷、有效的得到最正确的创作指引。

分享到:
评论

相关推荐

    淘宝UED设计流程图

    淘宝UED设计流程图

    仿淘宝UED的wordpress主题

    4. **个性化**:由于是仿照淘宝UED设计,我们可以期待这个主题具有高度的定制性,包括颜色方案、字体选择、布局调整等,让用户可以根据自己的需求打造出独特的网站风格。 5. **用户体验**(UED):淘宝UED团队以其...

    UED设计插件

    UED(User Experience Design,用户体验设计)是互联网产品开发中的关键环节,它专注于创建易于使用、功能强大且视觉吸引力强的用户界面。UED设计插件则是设计师们为了提高工作效率、简化设计流程而开发的一类工具。...

    淘宝的UED招聘试题,来试试

    标题中的“淘宝的UED招聘试题”指的是淘宝用户体验设计团队(User Experience Design,简称UED)的招聘过程可能会涉及到的技术考核题目。UED团队主要负责网站或应用的用户界面设计、交互设计以及用户体验优化,因此...

    WEB前端与UED角色对应关系模型.pdf

    【WEB前端与UED角色对应关系模型】 在互联网行业中,WEB前端和UED(User Experience Design,用户体验设计)是两个紧密关联的领域。UED主要是关注产品前端的设计,追求的不仅仅是外观的美观,更重要的是创造出用户...

    腾讯网UED体验设计之旅

    在腾讯网这样的大型互联网平台上,UED的重要性不言而喻,它涉及到产品的易用性、可访问性、功能性和情感化设计等多个方面。设计师们通过理解用户需求,进行原型设计、交互设计、视觉设计以及用户测试,旨在创建出...

    一款腾讯UED设计的提示插件

    总结:这款“腾讯UED设计的提示插件”通过与jQuery库的结合,为开发者提供了一套易于使用的提示解决方案。其丰富的样式和功能,以及良好的用户体验,使得网站能以更具吸引力的方式与用户交互。通过深入研究提供的...

    阿里旺旺产品项目UED流程图解析

    阿里巴巴旺旺产品的用户体验设计流程图(UED流程图)是展示产品开发过程中一系列关键步骤的可视化工具,对于理解和实践高效的产品设计至关重要。该流程图涵盖了从项目启动到发布跟踪的全过程,确保产品能满足商业...

    阿里旺旺产品UED

    阿里旺旺产品UED阿里旺旺产品UED阿里旺旺产品UED阿里旺旺产品UED阿里旺旺产品UED阿里旺旺产品UED

    腾讯网UED体验设计之旅 PDF

    ### 腾讯网UED体验设计之旅知识点梳理 #### 一、概述 《腾讯网UED体验设计之旅》是一本深入探讨用户体验设计(User Experience Design, UED)的专业书籍,主要面向产品经理、设计师以及对用户体验感兴趣的读者群体...

    产品UED流程及交付物.doc

    产品UED流程及交付物 UED流程是产品开发过程中不可或缺的一环,它涉及到用户需求把握、视觉呈现优化和使用体验提升。下面将对UED流程的各个阶段进行详细解释。 需求分析阶段 在需求分析阶段,用户研究工程师将跟进...

    产品经理也有全栈一说了.UI,UX,UE,UXD,UED,UCD

    产品经理也有全栈一说了.UI,UX,UE,UXD,UED,UCD

    淘宝前端UED资料-代码大全.pdf

    根据提供的文件信息,我们可以深入探讨其中涉及的关键知识点,主要包括编码的基础知识、ASCII编码、国际化问题、Unicode以及HTTP中的编码方式等内容。 ### 编码之初 #### 摩尔斯码 摩尔斯码是一种早期的编码方式,...

    淘宝UED的设计流程

    前端开发 可以学习 淘宝的前端页面是如何开发的

    UED中的KK奇偶校验非保守面临LHC数据

    在具有边界定位(运动或质量)项(BLT)的S1 / Z2固定点的五维通用超维模型中,可以违反Kaluza-Klein(KK)奇偶校验。 在这个框架中,我们研究了LHC上中性电弱规子玻色子的Kaluza-Klein激发的共振产生以及它们衰变成...

    阿里旺旺产品项目UED流程图

    在探讨阿里巴巴旗下的即时通讯软件阿里旺旺产品项目中,UED流程图扮演了一个重要的角色。UED是User Experience Design的简称,即用户体验设计,它囊括了用户研究、交互设计、视觉设计等多个方面。这个流程图不仅让...

    一款腾讯UED设计的提示插件.rar

    【腾讯UED设计提示插件详解】 腾讯用户体验设计团队(User Experience Design,简称UED)是业界知名的设计部门,致力于提供高质量的交互设计、视觉设计以及用户体验策略。这款提示插件是腾讯UED为提升用户在产品...

Global site tag (gtag.js) - Google Analytics