《栅格规范制作》由会员分享，可在线阅读，更多相关《栅格规范制作（24页珍藏版）》请在金锄头文库上搜索。
1、栅格规范制作随着业务的不断推进，现在我们的后台项目越来越多。但是由于前端和后台之间联调复杂导致项目经常会推迟。为了能优化项目流程，提高开发效率。交互和前端决定一起做一套 DPL，做一系列的规范出来。这样可以减少交互，前端，后台互相的沟通成本，同时能够沉淀下这段时间大家的收获。交互参与的 DPL（Design Pattern Library）中我们主要是做栅格体系，控件体系，视觉体系，下面我来和大家分享下DPL 中的栅格体系设计栅格研究网页栅格系统前，来看一组数据：网站首页页面宽度 px Yahoo!950 淘宝1000 MySpace960 新浪950 网易960 Live Search958
2、 搜狐950 优酷960 AOL960 上面列举的都是Alexa 全球排名前100 的站点，它们的首页宽度为950px/960px. 除了微软的Live Search, 这些站点有个共同特点：页面结构较复杂，都可以认为是门户型网站。再来看看Google, YouTube, Facebook, Flickr!, eBay等知名站点，它们的首页宽度没什么固定规律，共同的特点是：功能专一，页面结构相对简单。根据上面的简单分析可以认为：当搭建页面结构复杂的门户型网站时，开发工程师们不约而同地都选择将页面宽度定为950px/960px. 这是一件很有趣的事情，为什么要选择这个宽度呢？这个宽度值究竟有什么
3、魔力？上面的 “ 自然 ” 出现，细究自然是不让人信服的。设计者们在没有喝醉酒的情况下选择了960，而不是其它什么1000 之类的整数，自然另有奥妙。那么如何设计一个栅格系统？接下来我们将通过实例，详细的介绍一下网页栅格系统的原理与应用：在网页设计中，我们把宽度为“W ”的页面分割成n 个网格单元 “a”，每个单元与单元之间的间隙设为“i ”,此时我们把 “a+i ”定义 “A”。他们之间的关系如下：W =（ a n） +（n-1 ）i 由于 a+i=A ，可得： (A n) i = W 注： 960 是加上最后一个i（i=10 ）的长度， 950 是没加上 i 的长度为了减少1.0 版本的改
4、动，我们保持了i=10xp我们的 N 是多少， A 是多少？ W 是多少？由于我们做的是后台系统的网页，所以和很多前台网页都有些不同，比如我们这次做的是内页的栅格，能在1280 的展示全就可以了n 的特点：是3 倍数，我们需要有一行三列的情况，同时不希望有重要信息在最后面（我们的系统在内页才有栅格，所以1280 下能展示全，但是1024不一定能全部展示），所以最好是整个栅格能平均分成3 列A 的特点：是5 的倍数，在设计控件等都是很方便的W 的特点：最好符合大众化的得： 3x*5y-10=W 其中 x， y 为整数15x*y-10=w 上面列举的都是Alexa 全球排名前100 的站点，它们的
5、首页宽度为950px/960px. 除了微软的Live Search, 这些站点有个共同特点：页面结构较复杂，都可以认为是门户型网站。列举下现在网站的栅格详情参考：网页的栅格系统设计网站首页页面宽度(xp)a*b(xp)Yahoo!950 64 淘宝1000 66.1333 网易950 64 Live Search958 64.5222 良无限系统1000 66.1333 结论，现有网站在n 和 A 的特点下， x*y 是整数的只有64. 很多成熟网站都是12 或 24 栅格。当栅格为12（即 3x=12 ）时：4y=64 y=16 即 A=80 当栅格为24（即 3x=24 ）时：8y=64
6、 y=8 即 A=40 考虑到 1.0 的控件改动尽量少,后台系统布局结构比较统一。我们采用24 栅格即：我们的栅格是：（ 40 24 ）- 10 = 950基线栅格设定好之后只是控制了纵向的整齐，横向的需要用基线来控制。在描述基线之前，我们先要了解下前端对于输入框的结构吧如果我们设置一个12 号字的输入框，那么前端会对这个输入框设定结构。text area （蓝色部分）他是个基础，pading （内白色部分）他是text area 和框描边的空隙，border（黄色部分）是框的描边宽度，margin （黄色外虚线框范围）他是鼠标划过的hover 状态的延伸区域。我们的12 号字是在 text
7、 area 里面的。比如图中，我们的text area 设置的行高是 18 像素，字高 12 像素，居中的，上下各有3 像素的间距。根据这点，我们把表单里面的输入框元素和栅格元素一起考虑，设置了每个控件在栅格里面的效果：（其中蓝色部分就是text area 的内容）很多人会奇怪，为什么标题部分都是三个位置，有的还是前面空一格呢？我们的系统在早期定义了这样的效果，因为业务方的字段都是长短不一的。如果做成了左对齐，户很难看（我们一排可能出现三列），所以在表单页面和查询页面我们都统一冒号对齐，这样就能保证输出框是比较整齐的。方便用户浏览。下面来讲我们的重点：基线。先看图反馈和输入框是捆绑的，我们在用
8、户填完内容之后会给他第一时间的反馈，这时候如果位置放在后面，则会导致第二列的内容不好放，我们就把反馈都放在输入框的下面，而且反馈只会是出错的反馈，以免用户浏览困难。我们把基线间距设定为20 像素， text area 与之下对齐，这样，两个输入框之间正好是18 像素，正好放一个text area 。按照这个逻辑，我们做出了所有控件搭成的页面。注：动作按钮是冒号对齐，保证操作的连贯性等到和前端沟通，方案通过之后，我们在开始制作详情页和查询页栅格规范做好之后，就为颜色规范和控件规范的打下了一个很好的基础。当然，当然制作栅格系统还有很多方法。作为设计师，特别是网页设计师/交互设计师，我们不应当单纯地
9、凭借感觉，应当专注到像素级别，严谨设计，同时保持和前端的沟通，虚心接受他们的指导。其实，前期我们没有想到栅格系统要做的这么复杂，都是前端攻城师们在设计的时候发现我们的交付物不够严谨，不断的提出挑战，才慢慢晚上的。所以我在文章的最后，想送给大家两个词：“ 严谨，沟通 ”在网页设计中，我们把宽度为“W ”的页面分割成n 个网格单元 “a”，每个单元与单元之间的间隙设为“i ”,此时我们把 “a+i ”定义 “A”。他们之间的关系如下：W =（ a n） +（n-1 ）i 由于 a+i=A ，可得： (A n) i = W这个公式表述了网页的布局与网页“ 背后 ” 的栅格系统之间的某种关系。我们拿y
10、ahoo 作例，来看一下栅格系统的应用：yahoo 的网站页面宽度为W=950px ，每个区块与区块的间隔为i=10px ；如果应用上面的公式，可以推出A=40px ，既 yahoo 首页横向版式设计采用的栅格系统为：（ 40 n）- 10 = W下面我们列出当n 等于不同数值时W 变化的数值表格：从表格可以看出：yahoo 首页的布局完全是按照栅格系统进行设计的，每个区块的宽度对应的n 值分别为： 4，11，9。在这里我们看到一个很有意思的事情：只要保证一个横向维度的各个区块的n 值相加等于24，则即可保证页面的宽度一定是950px 。然而， 950px 的宽度也恰好就是当n=24 的时候，
11、 W 的宽度值。由此我们得出以下的应用模式：在栅格系统中，设计师根据需要制定不同的版式或者划分区块，他们的依据将是上面的那张对应表进行设计。这样，一个栅格系统的应用就从此开始了。我们看到，使用栅格系统的网页设计，非常的有条理性；看上去也很舒服。最重要的是，它给整个网站的页面结构定义了一个标准。对于视觉设计师来说，他们不用再为设计一个网站每个页面都要想一个宽度或高度而烦恼了。对于前端开发工程师来说，页面的布局设计将完全是规范的和可重用的，这将大大节约了开发成本。对于内容编辑或广告销售来说，所有的广告都是规则的，通用的，他们再也不用做出一套N 张不同尺寸的广告图了当然只要你愿意，我们可以衍生出任何
12、一种栅格系统，只要改变A 和 i 的值，这个根据网站的实际情况来制定。那么如何选择合适栅格系统，主要通过 “ 构成要素与程序、限制与选择、构成要素的比例、组合、虚空间与组合、四边联系与轴的联系、三的法则、圆与构成、水平构成这些设计元素规划，来实现比例和谐的平面设计” 。比较深奥，我们在这里就不详细阐述了。呵呵，说了一堆栅格系统的优点。大家可能会问：难道栅格系统真的是完美的么？答案是否定的：对于内容信息不确定导致高度不确定的页面，在高度层面上就无法做到栅格了。当然，具体的情况还需具体的分析与解决，这就需要设计师们在实际的应用中不断的总结经验，不断实践了。整体到细节的交互设计规划时间 : 12-0
13、7-26 1:02 栏目 : 产品设计推荐 : 元芳，你怎么看吐槽 : 4 围观 : 735 次本文标签 ： 交互设计2012 年初，我负责了对公司“深度匹配”产品进行了一次全面的用户体验规划，对产品整体的设计开展提供了用户视角的依据。过程收到了PD同学和业务团队的一些不错的反馈。在这里和大家分享一下这个设计推导过程。新设计师在进行交互设计 时，很容易直接进入具体的界面层的设计思考，而整个过程中的前期推导过程却很容易被忽略，在这个案例中会着重前期推导的部分。基于提炼的方法论先放出一张我在设计过程中提炼的设计思维完整的流程图，案例中的整个设计规划过程也基于该图的阶段过程展开，本文范围主要针对概念
14、到定义页面的这部分。上图可以看出我们的整个转化过程涉及产品从概念到元素的始终，不同阶段的侧重点和目的各不相同，且每个阶段的转化节点都基于客观实际的实线关联，以保证由始至终的需求转化不失真。以此来看，整个设计过程就是一个不断Zoom in （放大聚焦）的过程，基于用户本源需求不断具体化。在验证我们的设计是否符合目标的时候，我们也需要不断的Zoom out （缩小），从更整体视角去俯视。接下来我们开始看这个设计过程。全局OK ，我们首先来看一下用户在外贸中的主要行为，用户需求的基本概念是什么？下图可以看到，买家和卖家首先要达成订单意向，然后买家得到货物，卖家得到货款，这样就完成了外贸的整个过程，我
15、们的网站服务也是基于这个模式展开。让我们 Zoom in 一下 .“深度匹配”是什么？我们定义它的目标是：促成买家卖家达成订单意向，简单说就是撮合服务。这是买卖家在外贸行为中的首要的一环。当我们的用户目标和产品目标清楚之后，怎么做？让我们继续Zoom in.基于外贸专家提供的一些依据，我们以外贸过程中的用户行为建立起对应的产品用户行为概念模型，这样以来用户在整个过程中，主路径、任务目标就非常清晰了，交互设计 后续展开有了基本骨架。继续 Zoom in.对应上图的纯用户行为视角，再稍微细化一下，把他转化为产品的用户行为流程图，把抽象的信息结构化。比如，上图中报价只是一个箭头表示信息流买家，而实际
16、的网站行为中，报价需要买家主动去查看。所以该行为被结构化成一个标准网站行为术语“查看”。整体着眼，我们可以观察到不同用户的目标，行为，产生的信息，以及之间的关联和流向。上图已经很清楚的描述了该产品中的用户行为逻辑，但是作为设计的需求还是不够具体。我们还得继续Zoom in .我们把这些结构化的信息基于用户情景转化为页面架构关系，如下图。注：因为一些原因，我们隐去了图片中的部分名称。上图中，和前一张图进行对照，之前结构化的行为和信息，被转化成了不同的页面来进行承载，而本身的逻辑关系依然没变化，和之前完全一致。（仅因为用户的管理需求增加了管理部分）我们可以观察到不同的用户有完全不同的情景和操作页面，同时之间的信息又是互相关联的，整个流程最终能到达目标闭环。PS ：基于这个图，我们可以观察出用户的页面环境应分为不同的角色独立展开. 继续 Zoom in ,接下来，我们要对所有的页面进行一下归纳如下。注：因为一些原因，我们隐去了具体页面名称。去掉了那些箭头联系后，我们单独来看这些页面，是不是发现很有规律，非常的有结构？整理下来，页面需求非常清晰了（
