技术资讯
设计和布局之间的思考
2008-10-10 16:44:00
矛盾出来了,像我们这些小作坊,基本都是设计布局一人搞定。甚至还有加后台程序的。假设设计的时候考虑布局了,我们都有这个能力进行调整。但像大公司,分工严格的情况下🐽,如果设计师不懂css不会布局。或者理解有误,那么设计稿就会让布局人员耗费大量的时间和精力。因为浏览器太多!
经常看到有网友抱怨设计师给的稿子无法还原。因为他们对浏览器和屏幕的理解不一样。也有的是因为效果太绚,颜色太多。更有甚者是使用flash制作嫌浪费,而html又鸡肋.....好吧,我们抛开这最后一种情况,只谈对屏幕和效果以及设计布局的😼理解。
先谈屏幕:
屏幕分辨率,还是以1024×768为主。而满屏的定义则无从谈起。为什么?请看一下原因:
- 你不能确定用户的ie装了几个插件!插件越多,浏览器显示高度越低!
- 你不能确定用户的显示器是否设置正确(歪一边了,弧形的,截断的,缩小的放大的)
- 你不能确定用户显示器的分辨率是否为最佳分辨率。其典型在于某些宽屏或高屏显示器,有的是等比例缩小后留白。而更有甚者则是满屏拉伸。比例就不对了!
要使得网页满屏。很多人说宽度1003,也有人说是1004。而我则不这样认为。
假设客户要求网页满屏。那么,你就要晓得用户的显示器尺寸的屏幕分辨率。如果客户对这玩意认知度很低。就不要轻易去改人家的分辨率。我1440×900的宽屏,我用1024×768的分辨率,我乐意!如果这客户要求一定要满屏,那么问题又出现了,如果交货的时候客户换了一台不同尺寸的显示器呢?分辨率变大了,你的🦩网页窄了,分辨🐲率小了,你的网页宽了!你咋办?
其实满屏也分两种,我姑且命名一种为内容满屏,一种为视觉满屏!
所谓内容满屏,就是指网站上的东西,左边界就在显示器左边界༒,右边界就是在显示器右边界。最佳的解决𒈔办法就是使用百分比。而百分比带来的负面效应:
- 浏览器bug
- 设计及制作难度增加
所谓视觉满屏,其实是一种取巧的做法。而这种方法。其实很简单,一个网站的头部,无非就是导航和banner,如果导航♕在最上边,那么,将导航的背景呈100%,导航居中。如果banner在最上边,那么注意处理图片两端🍬,还是100%宽+背景!
OK,虽然内容宽度还有可能是1000、1003、甚至是900或更低,视觉上依然是百分百的宽度,只要避免💎最小宽度大于浏览器宽度、或客户的显示器分辨率宽度大于你的最小宽度。ꩲ永远OK。
#p#再谈布局和循环:
这里有篇文章//weilaixu.cn/read.php/174.htm
其实呢,说网页制作,直角🔥最简单,比如老印,他的东西全部是直角。用他的话说就是刀切一样!为嘛?简单方便速度快内容清晰!
布局以按照设计♓稿为标准。或者说叫使🦄用html还原设计稿,如果html截图能和设计稿重叠,再过了标准,我认为就是最高境界了!
问题最大的,其实还是在设计和还原效果上!虽然可以使用css的负值、浮൲动、重叠等属性进行不规则布局,但问题依然存在,工作量和难度有可能依然会翻倍。还有,那可恶的N种浏览器!
对于复杂的设计稿、复杂的效果、甚至是过分的设计,如何降低使用html还原设计稿的工作量及难度!
- 如果你有权力微调设计稿,那么,你可以在“可忍受”范围内微调。这个范围,每个公司都不一样!
- 如果你没有权力懂设计稿的任何东西,那么,请和设计师或主管沟通,请设计者进行微调。但你要把你的难点描述的清晰,让他们理解!
- 没人同意改稿子,那么,恭喜你。加班吧!
- 或者,你可以把那些细节工作扔给flash!
问题集中体现在设计和效果上!
先说设计:
网页设计,除了体现效果,还有很多不可缺少꧒的东西。这里不谈纯粹用来欣赏的网站。毕竟大部分的站点需要被大量阅读的。
- 网页的栅格系统
看这篇文章://ued.taobao.com/blog/2008/09/17/grid_systems/ - 速度
很重要,非常的重要!减少图片,使用背景图整合降低http连接次数。能使用文字尽量使用文字。所以嘛,还是得注意啊! - 背景图的小图循环和重复使用
大的就不说了,弄几个弧度上去,几乎就要用大图片了,像奥运时候那么网站的大背景。
小的背景图,小栏目的背景图,以及子页面的某个地方的背景图。咱尽量一致!小背景循环,效果图里的宽和高哪个小,尽量按哪个方向循环!目的就是保证速度! - 效果
png,这个可以说是效果的典型了!无背景的透明属性。相信很多人都喜欢!但ie6却有缺陷,好了,看码头的:【IE6的疯狂之二】IE6中PNG Alpha透明(全集)
我在做设计的时候,一般的站点是不考虑布局的!但那些艺术气息特浓厚,效𒅌果忒多忒强烈的站,在吃自己的亏吃了两次之后,就开始主动考虑后期布局,尽量避免让布局难度加大!
如果设计的时候,考虑到重复利用图片、背景等。会降低布局切𝔉片的很多工作。或者我可以说,页面重复利用率越高,就越快!主页虽然是主页,子页虽然更简单,但重复利用主页上已经下载了的东西,不更好么?我想说的是,要有全局的思维!
当然了,你肯定也想到了flash的应用。但flash貌似也有浏览器兼容问题!
如果设计和布局中间有某个问题被耽搁或某一方不退让,那么程序、交互就要延后,上线日期也要推迟。
如果制作方擅自行动修改而设计方死活有意见......
唉,问题可大可小!做个网页也不容易啊!
近期更新
- [2023-07-26 14:17:28] 加拿大预测网-在线预测:为品牌赋能,海外官网品牌数字化
- [2023-05-06 10:32:26] 加拿大预测网-在线预测:青岛网♐站建设公司,高端网站定制,一站式网站服务——力图数字科技
- [2023-04-27 13:47:54] 加拿大预测网-在线预测:高端定制网站建设——从满足预期到走向卓越
- [2023-04-11 09:17:49] 加拿大预测网-在线预测:H5页面设计开发——移动端传播利器
- [2022-11-16 10:11:43] 加拿大预测网-在线预测:windows2012程序在哪
- [2022-04-14 11:01:47] 加拿大预测网-在线预测:力图数字科技配套网站服务支持
- [2021-05-18 10:14:11] 加拿大预测网-在线预测:青岛网站建设的流程
- [2021-04-29 10:14:38] 加拿大预测网-在线预测:企业定制化官网建设项目
- [2021-03-05 10:34:45] 加拿大预测网-在线预测:移动互联时代房地产行业的微信小程序解决方案
- [2021-01-22 17:29:38] 加拿大预测网-在线预测:微信小程序有哪些优势?为什么要开发微信小程序?
- [2021-01-08 17:28:04] 加拿大预测网-在线预测:网站建设最容易忽略的人性化设计
- [2020-12-16 16:55:32] 加拿大预测网-在线预测:建设一个常规的公司网站建设成本大概是多少?
延伸阅读
- [2008-02-27 10:53:00] 网站设计的原理
- [2009-02-26 08:48:00] 解读敏捷设计
- [2009-03-09 08:44:00] 加拿大预测网-在线预测:交互设计的8项黄金法则
- [2012-06-22 00:19:35] 加拿大预测网-在线预测:书写体在网页上的应用
- [2013-12-26 21:50:21] 加拿大预测网-在线预测:宽屏网页设计趋势与分析
- [2015-01-27 10:16:35] 加拿大预测网-在线预测:网站发布软文更容易被收录技巧?
- [2008-12-16 22:52:00] 加拿大预测网-在线预测:用户体验设计指南的引入
- [2008-11-07 08:26:00] 加拿大预测网-在线预测:产品设计(一):产品传播性的三剑客
- [2013-02-24 17:05:33] 加拿大预测网-在线预测:dede去掉当前位置position后面的箭头
- [2012-08-23 08:52:53] 加拿大预测网-在线预测:网络广告与网站推广的步骤
- [2009-01-12 09:06:00] 豆瓣光箱设计
- [2009-03-09 08:47:00] 加拿大预测网-在线预测:对设计和技术的误解
解决方案
加拿大预测网-在线预测: 轮胎行业网站设计解决方案 加拿大预测网-在线预测: 机械行业网站设计解决方案 加拿大预测网-在线预测: 房地产行业网站设计解决方案 加拿大预测网-在线预测: 科技企业网站设计解决方案 加拿大预测网-在线预测: 电子家电网站设计解决方案 加拿大预测网-在线预测: 食品行业网站设计解决方案 加拿大预测网-在线预测: 集团公司网站设计解决方案 加拿大预测网-在线预测: 企事业单位网站设计解决方案 加拿大预测网-在线预测: 外贸行业网站设计解决方案 加拿大预测网-在线预测: 健身运动网站设计解决方案 加拿大预测网-在线预测: 美容与化妆品网站设计解决方案 加拿大预测网-在线预测: 建筑设计行业网站设计解决方案 加拿大预测网-在线预测: 物流行业网站设计解决方案