网页制作心得:如何提高设计的效率

当下的网站已经抛弃了以前那种什么都放的设计形式,人们追求更多的效率,希望访问者针对性更强,内容更专业,本文就是一篇介绍如何提高设计的效率,首先需要介绍一下什么是效率!

(一)过度设计和应用泛滥

web1.0时代,由于客户的愿望和其本身提供的信息资源的匮乏,弥漫着“过度设计”。大型门户更是如此,密密麻麻得首页、2位数的频道导航,造就了大型门户网站在感官上的特性——杂乱。而更有跟风者,以模拟“杂乱”为手段,达成看上去就象大型门户网站的用户感受。

web2.0时代,SNS、插件应用、推荐、相关信息的泛滥,有形成另一个“应用泛滥”;而这些应用有时候不得不有,不舍得放弃,最终形成SNS门户,比如上线时间不太久的“掏江湖”,也未能摆脱“应用泛滥”的窠臼。

垂直分类门户,分类链接的利用率远大于关键字搜索,就不得不充斥着密密麻麻的链接,早已老化的阿里巴巴,就是如此。B2C商城,也是如此。

而一些另类的淘宝店主,却因经营着本来就不多的东西,而把页面做的简单醒目。因为他们通过实践,知道怎末做能带来更多的销量,也就达到效率。

(二)什么叫经济,就是花最小的投入,达到最大的效果。

对于网站设计来说,效率从以下几方面处理:

(1)首页

你看大多数网站的首页,会看一屏往下的内容后,再点其他链接吗?毋庸置疑,在越来越浮躁的时代,用户操作越来越迅捷,打开首页后请给我5秒钟做出一个点击链接的判断和继续往下访问的理由,否则我将失却耐心。

首页超过1.5屏的内容,往往80%用户不去关注,白白浪费带宽。而你的首页往往会超过3屏,也就是说,用户下载你的首页原本只需要一半的时间,你却给了他另一半他根本不看的内容。中国的网络远远处于垃圾阶段,在中国才有迅雷、网游加速器这种东西的生存土壤。你的首页的下载时间是多么宝贵啊,你却浪费了。

(2)圆角装饰和直角装饰

圆角装饰看上去比较润滑,是因为相比而言,直角是两条成90度的线相交,在四维判断上用户要通过两个方向来判断,造成一种感官困扰。而圆角是两条成90度的线的国过渡,视觉判断上是一种缓和。对于女性来讲,方向感更差,所以她们是不得不“喜爱”圆角这种平滑过渡的。

在把所有的装饰图片用CSS做成背景后,一次下载多次使用,提高了效率。在HTML5普及之前,仍旧是需要用图片来形成圆角装饰的,当然不排除用CSS、滤镜、JS的一些hack技巧去模拟圆角,但这些都是“奇淫巧技”。

再说一下,工业设计的先驱——包豪斯,起源于二战前的德国,后因战争转移到美国而成为当今工业设计的发祥地。看看二战德国的坦克跟当今先进的坦克在外形设计上时不分高下的。

IT其实是工业、也只有在工业设计成熟后,在能有IT的制作基础。工业就讲究一个直白,把多余的杂质去掉,直接调直一条线,这就提高了效率。而浏览器的实现,也是这样,它是基于“块体”的,换句话说浏览器的呈现是遵循纵横链各坐标轴的,而圆角和斜线是不符合浏览器的工业设计规则的。当然有插件和一些其他的矢量语言来弥补,但要想提高效率,就要遵循浏览器的工业设计规则——块体结构。

那么扔掉圆角装饰吧,即便是有了HTML5,也没有比一个方框更有效率的渲染呈现方式了。去掉圆角,直接用CSS做个方框,效率多高啊。

(3)内容为王

什么是一个好的网站设计呢?

把样式表、装饰图片都去掉,剩下实体的可选中的文字、图片、多媒体对象后,仍旧是一个很吸引人,这才是一个好站——内容为王。

反过来说,就是把原来的设计顺序改一下,先把内容排好,然后组织规划成一套有层级的浏览体系——这就是极简设计。这样的话,你的每一页,都省掉了无用的信息和装饰,既提高了下载效率,又减少了用户选择上的困扰,还把你的主旨瞬间传达给用户。这是一举多得的事。

看过很多设计,都是为了装饰而装饰。这里空,就得加个图片,布局没占满,就加个友情链接。栏目块标题前是不加装饰不罢休的,韩国棒子就这么做,咱就给棒子学吗?装饰不是不可以加,总得说出个有价值的目的来吧,比如突出标题,完全可以用CSS来控制文字,干嘛要把文字做成图片呢?比如注册页面空,是需要加个图片来吸引新用户的,这也说的过去。

总之,加装饰,请给我个理由,需要吗?不需要吗?

对于网站来说,效率为王、功能为王、内容为王、用户为王,而装饰在王者面前就要屈尊。

还有很多杂事,比如同样面积大小、同样文件格式的亮调图片,就比暗调图片来的K数小,下载快,所以大图片用白背景、网页用亮调白纸黑字是永远的主题——效率啊,效率。

要说的话,讲三天讲不完,就此打住。

时间: 2024-09-20 22:35:48

网页制作心得:如何提高设计的效率的相关文章

Dreamweaver网页制作教程:表格设计

dreamweaver|教程|设计|网页 表格设计 表格是现代网页制作的一个重要组成部分.表格之所以重要是因为表格可以实现网页的精确排版和定位.本节教程我们分为两步来进行.首先看表格操作的一个实例.然后来看一些表格操作的基本方法.在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍.(看下图) 一张表格横向叫行,纵向叫列.行列交叉部分就叫做单元格. 单元格中的内容和边框之间的距离叫边距.单元格和单元格之间的距离叫间距.整张表格的边缘叫做边框. 下面看看我们使用表格制作的页面的实例 这幅页面

网页制作心得:WEB前端优化的方法

随着WEB2.0时代来,给网络的带来了空前的发展.前端用户体验变得越来越显的重要,从而来弥补B/S结构的用户交互型差的一些弊端,可是这样会带来一个问题就是会增加客户端的压力,比如大量运用JS代码,大家都知道JS代码是运行在客户端的,会影响到整个网页的在浏览器的解析效率,这样也可能暗示着会增加客户端的流量,所以不管是从服务器负载角度还是站在用户的角度来看,对客户端的代码进行优化都显得尤为重要!本文主要内部和外部两方面来阐述WEB前端优化的方法.希望能给读者一些体会和启发. 首先,我们通过一个雅虎的

网页制作心得技巧:正则表达式语法

一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符组成的.在查找文字主体时待匹配的一个或多个字符串.正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配. 这里有一些可能会遇到的正则表达式示例:JScript VBScript 匹配 /^[ t]*$/ "^[ t]*$" 匹配一个空白行. /d{2}-d{5}/ "d{2}-d{5}" 验证一个ID 号码是否由一个2位数字,一个连字符以及一个5位数字组成. /<(.*)>.*&l

Dreamweaver网页设计制作技巧与提高

dreamweaver|技巧|设计|网页|网页设计 1.灵活运用样式 熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用Style.虽然不同的方法达到的效果看似一样,但实际上产生的HTML代码则完全不同.比如用Custon Style来调用Style标准,在网页代码中就生成一个〈span〉标签,这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度,所以我们应尽量使用状态栏中的元素

Dreamweaver网页设计制作技巧与提高 好东西_Dreamweaver

1.灵活运用样式  熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用Style.虽然不同的方法达到的效果看似一样,但实际上产生的HTML代码则完全不同.比如用Custon Style来调用Style标准,在网页代码中就生成一个〈span〉标签,这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度,所以我们应尽量使用状态栏中的元素列表来调用Style.  2.活用Format T

网页设计中实用的网页制作技巧

1.灵活运用样式 熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用Style.虽然不同的方法达到的效果看似一样,但实际上产生的HTML代码则完全不同.比如用Custon Style来调用Style标准,在网页代码中就生成一个〈span〉标签,这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度,所以我们应尽量使用状态栏中的元素列表来调用Style. 2.活用Format Tab

网页制作最常见问题:怎样设计网页

设计|网页|问题 怎样设计网页 在网页设计的认识上,许多人似乎仍停留在网页制作的高度上.认为只要用好了网页制作软件,就能搞好网页设计了-- 在网页设计的认识上,许多人似乎仍停留在网页制作的高度上.认为只要用好了网页制作软件,就能搞好网页设计了. 其实网页设计是一个感性思考与理性分析相结合的复杂的过程,它的方向取决于设计的任务,它的实现依赖于网页的制作.正所谓"功夫在诗外",网页设计中最重要的东西,并非在软件的应用上,而是在我们对网页设计的理解以及设计制作的水平上,在于我们自身的美感以及

怎么做网页?网页制作设计用什么软件?怎样做网页的步骤

准备自己做网页,做网页的软件  做网页用什么软件  网页制作设计 怎么做网页  做网页的步骤  dreamweaver 做网页软件  网页三剑客  怎样做网页等一系列的问题困绕着新手建站朋友们!不知到从何入手.老板说技术不值钱,我们程序员今天算是翻身了.呵呵!!!!有人说PS可以做网页!也有人说用做网页的软件,谁还自己花时间去做费力不讨好的事? 那么今天我们就展开网页制作设计的一系列问题做 整体分析.   做网页设计就是为了建个网站,网页设计好了还得上传到网站空间, 然后还得买个域名访问空间,才

DIVCSS网页设计总结:有用的3个网页制作技巧

网页制作Webjx文章简介:DIVCSS网页设计总结:有用的3个网页制作技巧. 我们在进行DivCSS布局的时候,非常关注CSS技巧的学习,今天向大家推荐3个所谓的 "顶级"CSS技巧!虽然没有什么新意,但对新手而言却非常重要! 一.在一行内声明CSS h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}  h2 {  font-size:18px;  border:1px soli