设计与布局之间的思考好资料免费分享.docx
《设计与布局之间的思考好资料免费分享.docx》由会员分享，可在线阅读，更多相关《设计与布局之间的思考好资料免费分享.docx（12页珍藏版）》请在冰豆网上搜索。
设计与布局之间的思考好资料免费分享
矛盾出来了，像我们这些小作坊，基本都是设计布局一人搞定。
甚至还有加后台程序的。
假设设计的时候考虑布局了，我们都有这个能力进行调整。
但像大公司，分工严格的情况下，如果设计师不懂css不会布局。
或者理解有误，那么设计稿就会让布局人员耗费大量的时间和精力。
因为浏览器太多！
经常看到有网友抱怨设计师给的稿子无法还原。
因为他们对浏览器和屏幕的理解不一样。
也有的是因为效果太绚，颜色太多。
更有甚者是使用flash制作嫌浪费，而html又鸡肋.....好吧，我们抛开这最后一种情况，只谈对屏幕和效果以及设计布局的理解。
先谈屏幕：
屏幕分辨率，还是以1024×768为主。
而满屏的定义则无从谈起。
为什么？
请看一下原因：
1.你不能确定用户的ie装了几个插件！
插件越多，浏览器显示高度越低！
2.你不能确定用户的显示器是否设置正确（歪一边了，弧形的，截断的，缩小的放大的）
3.你不能确定用户显示器的分辨率是否为最佳分辨率。
其典型在于某些宽屏或高屏显示器，有的是等比例缩小后留白。
而更有甚者则是满屏拉伸。
比例就不对了！
要使得网页满屏。
很多人说宽度1003，也有人说是1004。
而我则不这样认为。
假设客户要求网页满屏。
那么，你就要晓得用户的显示器尺寸的屏幕分辨率。
如果客户对这玩意认知度很低。
就不要轻易去改人家的分辨率。
我1440×900的宽屏，我用1024×768的分辨率，我乐意！
如果这客户要求一定要满屏，那么问题又出现了，如果交货的时候客户换了一台不同尺寸的显示器呢？
分辨率变大了，你的网页窄了，分辨率小了，你的网页宽了！
你咋办？
其实满屏也分两种，我姑且命名一种为内容满屏，一种为视觉满屏！
所谓内容满屏，就是指网站上的东西，左边界就在显示器左边界，右边界就是在显示器右边界。
最佳的解决办法就是使用百分比。
而百分比带来的负面效应：
1.浏览器bug
2.设计及制作难度增加
所谓视觉满屏，其实是一种取巧的做法。
而这种方法。
其实很简单，一个网站的头部，无非就是导航和banner，如果导航在最上边，那么，将导航的背景呈100%，导航居中。
如果banner在最上边，那么注意处理图片两端，还是100%宽+背景！
OK，虽然内容宽度还有可能是1000、1003、甚至是900或更低，视觉上依然是百分百的宽度，只要避免最小宽度大于浏览器宽度、或客户的显示器分辨率宽度大于你的最小宽度。
永远OK。
再谈布局和循环：
这里有篇文章
其实呢，说网页制作，直角最简单，比如老印，他的东西全部是直角。
用他的话说就是刀切一样！
为嘛？
简单方便速度快内容清晰！
布局以按照设计稿为标准。
或者说叫使用html还原设计稿，如果html截图能和设计稿重叠，再过了标准，我认为就是最高境界了！
问题最大的，其实还是在设计和还原效果上！
虽然可以使用css的负值、浮动、重叠等属性进行不规则布局，但问题依然存在，工作量和难度有可能依然会翻倍。
还有，那可恶的N种浏览器！
对于复杂的设计稿、复杂的效果、甚至是过分的设计，如何降低使用html还原设计稿的工作量及难度！
1.如果你有权力微调设计稿，那么，你可以在“可忍受”范围内微调。
这个范围，每个公司都不一样！
2.如果你没有权力懂设计稿的任何东西，那么，请和设计师或主管沟通，请设计者进行微调。
但你要把你的难点描述的清晰，让他们理解！
3.没人同意改稿子，那么，恭喜你。
加班吧！
4.或者，你可以把那些细节工作扔给flash！
问题集中体现在设计和效果上！
先说设计：
网页设计，除了体现效果，还有很多不可缺少的东西。
这里不谈纯粹用来欣赏的网站。
毕竟大部分的站点需要被大量阅读的。
1.网页的栅格系统
看这篇文章：
2.速度
很重要，非常的重要！
减少图片，使用背景图整合降低http连接次数。
能使用文字尽量使用文字。
所以嘛，还是得注意啊！
3.背景图的小图循环和重复使用
大的就不说了，弄几个弧度上去，几乎就要用大图片了，像奥运时候那么网站的大背景。
小的背景图，小栏目的背景图，以及子页面的某个地方的背景图。
咱尽量一致！
小背景循环，效果图里的宽和高哪个小，尽量按哪个方向循环！
目的就是保证速度！
4.效果
png，这个可以说是效果的典型了！
无背景的透明属性。
相信很多人都喜欢！
但ie6却有缺陷，好了，看码头的：
【IE6的疯狂之二】IE6中PNGAlpha透明（全集）
我在做设计的时候，一般的站点是不考虑布局的！
但那些艺术气息特浓厚，效果忒多忒强烈的站，在吃自己的亏吃了两次之后，就开始主动考虑后期布局，尽量避免让布局难度加大！
如果设计的时候，考虑到重复利用图片、背景等。
会降低布局切片的很多工作。
或者我可以说，页面重复利用率越高，就越快！
主页虽然是主页，子页虽然更简单，但重复利用主页上已经下载了的东西，不更好么？
我想说的是，要有全局的思维！
当然了，你肯定也想到了flash的应用。
但flash貌似也有浏览器兼容问题！
如果设计和布局中间有某个问题被耽搁或某一方不退让，那么程序、交互就要延后，上线日期也要推迟。
如果制作方擅自行动修改而设计方死活有意见......
唉，问题可大可小！
做个网页也不容易啊！
网页设计之设计步骤及思考
与之前的步骤不同,这是实际操作的步骤.本文包括了大局的步骤和栏目,图片,小到一个图标的选取等等等等,可能会漏掉很多的东西.欢迎补充.我只是引导你去思考,本章绝对不是网页的标准制作步骤,我相信也没有什么标准的制作步骤.
本章的设计步骤是建立在网页设计进阶之一（步骤和大局观） 之上的.可能会涉及一些平面相关的知识.和网页与平面的比较.网页与平面的区别我会在以后在写.
本章所讲的基于PHOTOSHOP软件制作.
本章印证了网页90%是排版这句话.
遵循从整体到局部的顺序.
1、在定位的基础上,搞明白自己要做什么.
这句其实不用解释了.你要明白的是我要做的站大概有什么样的效果,并有例子在脑海里浮现.要做的这个站属于什么样的行业,这个行业的站都有什么共同的特点.
2、你的目标/效果和你希望达到的目标/效果是怎么样的.你设计的目标,与客户的目标和公司领导的目标是否一致,有什么区别.
3、你要如何去做,怎样去做,用什么样的手法手段,来达到你的目标/效果.又用怎样的设计来强化和突出这个效果.
4、你的布局,应该怎样和你的设计搭配,怎样来突出你的思路.
5、是否有不同的风格,是否只是颜色上的变换.（将所有含有颜色的背景层保留）
这几步,是在动手之前要写下来的.甚至有更详细的功能和版面的东西,自己搞定吧.
下面才是真正的动手设计的步骤：
1、确定分辨率.和不同分辨下对应的效果.
与平面的载体的不同,决定了网页具有比平面更灵活的表达方式.
站点的满屏概念其实是分相对和绝对两种,相对的,是针对当前分辨率的满屏.而绝对满屏幕,则是不同的显示器不同的分辨率下都是满屏,一般我会给出一个最小分辨率,最大到无限.相对满屏,比如1024×768,800×600等.最好是用绝对宽度来定义,就是像素为单位.而绝对满屏,则用百分比.
在确定分辨率之后,你的PS图要比实际设计的图要大.要考虑用户使用高于你设计的分辨率下,网页以怎样的形式表达,是居左,还是居中,还是靠在右边.
2、大背景,3条辅助线及边界处理.结构（头部,中间,底部的大概位置.）
整体是否有背景.
左边界线,右边界线,和中间线.
如果是绝对宽度的设计,那么用户使用较高分辨率浏览时,内容与多出的屏幕是否有分割.
结构,究竟是上中下结构,还是左中右结构,还是其他的.每一块,大概放什么内容.
3、导航和标志.
网站的100-1%是导航.这是一句被传烂了的话.
你的导航是长的还是短的,是横的还是竖的.还是弧形的.是否有下拉菜单.比重各是多少.和标志处在什么位置.各语言版面入口在哪里.登陆（后台管理/用户/MAIL）在什么位置,标志附近是否有点睛一般的广告词.
好了,我们进行下一步.
4、banner同导航,和过度.
导航跟banner是分开的还是在一起的.在一起的话你是否采用flash制作,如不用flash制作,你设计的背景是否适合切割成平铺的背景,怎样让背景图片体积最小.记住不要用2×2的背景做平铺.banner是占据了整个宽度,还是只是一部分.如果是一部分,那么空出的地方你准备放什么东西.
5、主体内容部分.
我的中间是左右机构,还是一大块,还是左中右结构的.每一块的分割采用什么手法.颜色以怎么样的规则变化.然后将内容填充进去.
6、底部版权信息及其他.
7、不同的风格的调整.
基本是这些.我理不清头绪,写出来的这些自己基本都不满意,但总可以让自己规避很多的问题吧.
关于图片和小图标的选择:
图片选择遵循以下几点要素:
1.必须有一个鲜明的主题.
2.图片尽量有悬念.
3.突出的内容只有一个（图片突出的内容只有一个,版面也一样）
4.从目标对象或目标服务对象来考虑图片的选择.
5.要善于从做背景.
6.新手尽量大面积留白.
7.新手慎用弧.
图标选择注意要素:
1.图标表达意思与title相适应
2.同色系或统一风格.
3.学会突破（图标不受title的背景限制）
4.图标大小要特别注意.
5.善用圆角.（与弧不同）
6.要便于记忆.
7.尽量避免重复（纯装饰除外,重复刺激效果的除外）
我要吐血了...........有必要阐述一下整体和局部的关系...但是还是放在以后吧.
网页设计之关于素材和言志
三遍记忆,让你记住海量素材的准确位置和用途,提高其可用性.
这仅仅是一个示意图.在以往的日子里,我做到了只要脑袋里冒出一个想法,立刻就能知道我需要用的素材在什么位置...那时候我很穷,穷到连买书的钱都没有,更别说是买动辄几百快的设计资源光盘了.
设计师最大的特色,我认为是他特有的那个文件夹,或叫"杂七杂八",或叫"乱七八糟",或叫"什么都有"或叫"大杂烩",这里的东西,没有人会太在意,但是往往很多优秀的idea或很眩的效果都是从这里得到的灵感.可以说是精华集中的地方,也可以说是垃圾的集散地.我甚至以这个文件夹是否存在来判断一个设计师的水平高低......
在指导同事的这段日子里,我发现了一个很重大的问题.他们知道收集素材的重要性.他们也知道这个动作将会大大缩短他们设计的时间.但是他们对素材的分类做的不够仔细.很混乱.不利于自己快速找到适合的东西,而且他们对素材的记忆很差.基本上属于看着不错保存下来,仅此而已.
而我在收集的过程中,每一个被我保存下来的东西都有它被我保存的原因.是结构新颖还是颜色搭配很好还是动作优雅高贵,这仅仅是第一遍的记忆.在我把这个东西保存到自己的计算机里的相应的分类里时,这是第二遍记忆.每隔一段时间,我会再去浏览一遍这些素材.这是第三遍记忆.
我的分类很详细.我的素材很多很多.每过一段时间我会删除一些我非常喜欢的东西.因为我已经有能力做出这样的东西.甚至是举一反三以及更多的变通.我清楚的记得我在什么地方可以找到什么样的东西.那些很不起眼的txt文档可以让我在短短十数秒之内找到当前文件夹最具特色的几个文件.我很擅长用ACDSEE去重新命名这些文件.我的图片全部是一套接一套.全部都是,绝对没有哪张图片是孤零零的一张.因为我会抽时间去仿照那些效果去做东西.所以,在每个目录下几乎都增加了一个psd或ai或fla文件夹.
慢慢的,我开始不看那些素材.偶尔只是到里边挑几个楼或几个风景..间隔的时间越来越长.我开始逐渐抛弃这些素材.....
抛弃你收集的素材!
经过一遍遍的分析和对比.我脑袋中对这些素材的了解越来越深.我甚至可以分辨出哪个网站是哪个公司做的.我甚至可以告诉你哪个站哪个地方哪张图片可以直接用在我的东西的哪个位置.而每有一个想法我都会迅速的想到他的处理技法.这一切都归功于我对素材的理解和分析.到了这一步.你认为你还需要素材么?
在不得不把自己的硬盘清理了之后再COPY那些素材,在不得不从40G移动硬盘升级到80G之后,我离开了收集了那么久的素材的那个公司.我自己的机器里只有可怜的一部分,而公司的却是满了一台机器之后又换了一台.这些都是我的心血.但我不会回去copy.包括我之前作品的源文件,因为我相信,我绝对可以超越以前的一切....
对比和分析,以及尝试性的摹仿,会让你的水平一天天的增长.
我每天都有固定的时间徘徊在那些酷站列表之上.每一个我有兴趣的酷站我都会去认真的分析它.直到我弄明白这个站点的设计思路.直到我明白它为什么要这样做,和这样做的好处.这让我对地域文化有了更深了了解,让我对各个国家的风格有了进一步的把握.我会拿两个非常相似的酷站在一起对比.去研究他们的亮点,然后想着这个亮点用什么样的手法才能处理出来.如果是我,我会怎么样去突出这个亮点.所以我的同事经常会看到我看一个站超过半天.我的垃圾桶里有很多纸,都是被画了一遍又一遍的.我能够把一个站的某一个特色演化成另外一个完整的站点.没事的时候我会在脑海里去演变那些让我很感兴趣的效果.在学习css的时候,我经常去down那些酷站的style下来分析.把位置调换一下,如果是我,我是否能想到跟它一样的甚至是更好的方法,我每天都在不停的思考.学习.直到我发现我一个人孤零零的在学习...
刚开始做网站的时候,直接去搜那些好的站,然后找到一个合适的,页面另存为.然后去修改.后来随着素材的累计,我对自己的做法深感厌恶.我开始用ps做整图,虽然上头不允许我这样做,说浪费时间,但我还坚持,最后我做到了速度跟改另存的网页一样,做图的时候我时刻在想着怎么样处理能让我的布局更简单而效果不变.怎么样才能让这张图的重复利用率增加.在同一个背景不同颜色的时候我怎么样让制作的时间缩到更短...那时候,仅仅是在追求利益.但我在追求利益的同时把握到了最好最快的学习手段,至少,我是这样认为的.
我还是在设计的底层打拼.我的文章被人转载的时候从来不会署我的名.也没有人加上原文地址...我努力让weilaixu这个词组哪怕是不出现,也不要让别人看扁....以前我甚至在每一个站完成后,在最不显眼的地方加上感谢的字样,感谢我抄袭的那个站.这是不被公司允许的,所以我加在他们看不到的地方.但是当我看到我改的东西被人家抄袭后,我里边的感谢字样竟然还在.....我究竟是很无耻呢?
还是一般无耻?
我写文章写的很痛苦.经常想吐血.明明是自己理解的东西.偏偏在文字上就是写不出来.我很难过.但我不会放弃.
我把我的中文ID改为"有粪量的人",总有一天,我会让那些粪量,全部变成黄金!
!
!
!
!
把导航系统做薄
和朋友讨论时，我提到过一个观点，所有框架层设计中，最核心的是导航设计。
最近更看到有国外同行提出“80%的可用性是导航！
”因为良好的导航可以保证用户找到任何信息。
也就是说，提供到达的可能，远比如何到达的可用重要。
我习惯把导航分为一维、二维、多维来简单理解，一维对应线性结构，二维对应分层结构，多维对应无序结构。
这么说可能比较抽象，其实都已经是耳熟能详的应用，分别举例阐述设计意图：
1.最原始仅限于一二三级的，单对多树状应用就是“分层导航”，基本属于必要元素。
2.跟踪用户行为，记录的用户在网站的活动足迹就是“线性导航”，俗称面包屑。
3.管理系统的后台，在首页增加的类似跨分层结构的链接就是“无序导航”，俗称快捷方式。
二维结构复杂到一定程度，必然造成导航纵深过度，用户到达的难度增加。
此时就需要考虑其他方案综合实施，具体设计可以概括如下：
从无到有的堆积过程，把当前所有能够调度的资源全部拿出来。
由多到少的序化过程，分解任务找出主次任务线索并重组。
回忆起Flickr改版，前几次重要的导航改动，都会更换版本代号，可见Flickr把导航系统看的相当重要。
同时，Beta和Gamma两个版本的升级也对应了我的想法，参考头部导航片段：
Beta的特点是想要什么就能看到什么，从Alpha起就在不断的加功能，虽然期间也在做任务分解的调整。
但显然，量太大怎么调整也会感觉复杂。
Gamma的特点是想要什么就有什么，只不过把要不要的权利还给了用户。
如果从用户体验的角度来阐述，Beta已经满足了用户的认知体验，好玩够用；Gamma提升了用户的操作体验，耐玩易用。
大家仔细对比，还能找到豆瓣改版与之相似的痕迹。
有了运营数据，问题很容易暴露。
比如北京的交通，最理想的状况是把北京市划分成N个小区域，各区域之间使用地铁/城铁等高速交通工具，各区域之内则使用公交等低速交通工具，同时地铁/城铁和公交站上下一体化，如此可以尽量避免公交路线的大范围交叉（扁平结构），主动预防而不是被动减压。
我们面临的事实，首都不能重建，但产品完全可以重来。
网页的栅格设计思考
网页设计中的脏、乱、差，是我们在设计过程中常会遇到的问题。
通常"脏"是由对色彩使用不当所产生的，而色彩使用不当产生的不好效果也分为：
"花、灰"，花哨、灰头土脸也就是这里所说的"脏"。
我已经在早前的一些文章中谈过我对设计中运用色彩的看法。
有兴趣的朋友可以查阅一下《色彩解释》。
而"差"基本上是由于我们的技法上不够娴熟所产生的。
比如细节上的处理不到位，某个局部的效果制作得粗糙。
这可以称之为"差"，特别是在处理带有2D效果的设计作品时，这种情况常会出现。
但是我今天在本文中所要谈的是"乱"。
什么是乱？
这里的乱不是指用色乱，也不是指内容乱，而主要是指布局乱。
以前我有幸接触了平面设计，并且从中学到了很多平面设计上的一些知识与技法。
其中"栅格设计"就是平面设计中用于处理布局的一种理论。
到目前为止我还在研究"栅格设计"。
因为着实没有什么比较好的语言可以非常简洁明了的概括这个词。
这更像是需要不断用实践去理解的。
所以很多时候我们们都无法去讲述。
但是在设计中这个栅格却是能帮助我们完成更好作品的一个非常好用的利器。
对于栅格设计我也不能说是认识深刻，我这里只是依据我对于栅格设计的理解，将之用于网页设计中，希望能给更多的朋友们一点启示，或许能打开一些朋友的思路。
单纯的文字是没办法让设计师们耐心的看下去的，所以还是老办法，用示图来作为讲解模型。
这次我们使用的网页是微软、IBM、ASTRO三个公司网站来讲解。
希望通过分解这三个公司的网站设计，能把我所理解的栅格设计传达出来。
废话少说，看示图：
点击放大
我们看到微软公司的网站设计中并没有什么明显的线去区隔不同的区块，但是当我们把当蒙上一层纱，然后用实线把每个部分都画出来这时我们发现这个网站其实是处在一个栅格阵列中。
那么这个阵列中的内容已经很明显了，并且我们从中发现了很多区块在页面中的位置居然是那么的有条理，并且有一些并不在一起的区块，居然也有一定的规律。
当然有人可能会说，都用线画出来了当然显得条理，整齐了。
问题就在于这里，我们的网站都可以用纵横线区分开。
但是一些设计得不好的网站的纵横线可能数量非常的多，纵横线的数量过多并且都挤在一直，这就说明网站的布局显得太乱。
或者是过于条理而变得布局平均，没有对比，缺乏美感。
其实只要用这样的方法去分析一下自己设计的作品也许就能从中看到问题所在。
下面我们再来看一下IBM的网站的分解图：
点击放大
我们看到IBM的栅格与MS的有很大的不同，IBM中还出现了一些差不多大的栅格，但是这里要注意其实这些栅格是由于底部很小的几个区块所产生的，并且这凡个区块还可以看作是一个横向的区块。
我们从这里可以看到IBM的布局设计是对称的。
但是这种对称却是在离在纵横线上却不容易注意到的。
这是很高明的手法。
我们再来看看ASTRO公司的网站，这个网站比起上面两个公司的网站就更娱乐化，更有趣了。
点击放大
从这三个网站中我们可以看到三种不同风格的栅格设计，虽然有所不同，但我们依然可以发现三者都会尽可能的把最重要的信息放在视觉中心点上，不论是放在左边的还是右边的或是中间的，他们都得到了最大的栅格区，得到了足够的重视！
我们的视觉中心也自然盯在了上面！
说到这里我依然觉得没能把栅格设计的作用讲明白。
这里就需要来访的朋友们提提你们的看法了。
我将会在以后的时间继续关注栅格设计，希望能将其在网页设计中的作用弄得更为清楚！
设计中的层次感
这段时间我一直在说设计需要有层次感，这种层次感可能有很多类型，比如色彩的层次感，或是元素的层次感。
当一个设计缺乏层次感的时候页面所表现出来的无非是两种可能，一种是单调，一种是花哨。
在设计中我们常常陷于对于某一种色彩或是某一种效果的偏爱，而这种情况会使我们的设计缺乏长久的生命力。
并且我们自己在审美上会局限于对这种偏爱的执着从而影响我们的进步。
而这种偏执也常会导致我们的设计缺乏层次感。
那么层次感通常表现在什么地方呢？
在以前写的《色彩解答》系列中第一篇就讲过关于色彩的层次，在那篇文中有讲到用“黑、白、灰”去分析色彩的层次。
我们在设计的时候可能会使用一种色彩把整个网站做出来，结果发现这单一的色彩做出来的效果让我们的网站变得很单调，很土气。
有时就算是多用了色彩也一样的土气，网站使用的色彩并没有层次感，也没有对比。
都处在相似的灰度上，所以网站看起来就灰头土脸的。
当然我们还可以使用高对比纯色块来做设计，（韩国的网站有很多都是这种手法）这种手法有讨巧的地方，因为相对来说比较简单，但是同样也比较容易被抄袭。
但这样的设计缺乏生命力，作为一种风潮，也有点像是快餐，谁都能复制得了。
不需要任何的文化作为基垫。
当然并不是说这种手法就真的一无是处，这种只能作为一种手法来应用，不能当作是万用灵药到处使。
光用文字来说必然是感觉不到的。
那么我们来看看这张图：
点击放大
我们看到IBM的设计色彩并不多，但是层次感就却是有了。
他这里有黑色、淡蓝色、白色、其中黑色与淡蓝色之间的对比较为吸引眼球。
并且我们发现黑色是纯黑、而浅蓝色却是属于高亮的那种。
这种强对比对人的视觉是有一定吸引力的。
并且黑白灰三者都有了。
加上三者之间的比例并非均等的。
而我们在设计的时候通常会使用一些灰度相近的色彩放在一起，并且饱和度也不高，所以最后出来的作品只能是灰头土脸。
这样的网站我就不找例子了，找谁的来说谁也不开心。
当然也包括我自己。
呵呵，大家可以去我的作品集去找找，一定有那种灰头土脸的东西。
另外我们还可以看到IBM这次新的设计比原来的设计更有立体感，这就是我上面所说的元素层次。
这种层次感拉开了浏览者的视觉深度，使得我们的网页不再平面。
虽然也不是3D的效果，但是我相信2D的效果必然会成为网页设计的一个新的趋势。
通过2D模拟出视觉立体感，会使得网页设计更有张力，内容也更为丰富。
而在纯色块的布局之中色彩鲜艳的图片更加显得醒目。
这又是一种视觉层次，也可以说是复杂与简单的对比！
设计没有什么一定的规律，这里包含的因素有很多。
设计得好与不好，重要的是在于设计师对于这个世界的理解有多宽广。
所以设计师不能只光顾着加强自己的制作技巧，更要不断的积累自己的文化知识。
不断的增加自己的厚度，那样才能设计出更多精彩的作品。
我愿于大家一起努力！
升级会员 