学习网页制作应该注意的网站设计的四点矛盾

 更新时间:2016年9月20日 19:05  点击:1721

  因为工作需要,昨晚将另一位网页设计师的设计作品生成了页面,折腾了一通宵,我脑细胞成几何倍数减少,完成了工作,不免有些牢骚要发。

  我认为网站是为人民服务的,网站的优劣,内容是关键,而设计能排在第二就不错了。一个网站的设计不仅需要的是美观,更需要的是配合内容的编排以及其它更多方面,例如浏览速度及浏览方便性。如果您同意以上观点,请继续看下文。

  因为网站的设计不仅需要美观,所以产生了不少矛盾,挑几个主要的矛盾来分析:

  一、 background背景图像的矛盾

  由于千篇一律的单色背景早已产生了视觉疲劳,因此出现了花纹背景,例如用点、线、面组成的背景,通常这种背景都是做成10*10px (或其它)的方形大小。再受韩潮影响,目前应用广泛的是渐变背景,由于分辨率的关系,通常采用上下渐变,左右渐变不可取。问题来了,上下渐变在Photoshop(做网页设计的常用软件)中只需要简单的使用渐变工具拉动一下即可,但是作为网页设计师的你有没有想过在页面中这种背景应该如何去做?分成上下2个背景,或者做一个超级长估计要在3000px以上的背景?(可以参看我的博客首页背景http://blog.sina.com.cn/m/baopin)因此在做这种背景的时候,需要仔细考虑页面该如何去生成。

  二、 适应分辨率的矛盾

  为适应分辨率,最佳方法应该是整个页面采用100%自适应表格,这种网站让800*600及以上分辨率的彩显都能整屏幕最佳效果浏览,这样的制作方法在为数不多的几个网站上出现过。但是这种方法必然需要最少的图片及最多的216安全色及最精简的表格。目前这样的网站不怎么能满足客户的设计要求。

  在国内,网站通常都在750-780px的宽度之间,这样做的目的是为了适应800*600及以上分辨率的彩显浏览网站。OK,矛盾出现了,中间是780px的宽度,但是通常设计师会加上描边或者投影的效果,做为设计师的你,有没有把这个尺寸算进去?更有甚者,中间的内容是780px 两边采用长达30px的投影,再加上前面第一点提到的渐变背景,好了,你想让生成页面的工作人员自杀吗?请你在做这样的设计时候为后面的生成页面工作考虑一下。

  三、 网页216安全色的矛盾

  所谓网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色,也就是说这些颜色在任何用户显示设备上的显示效果都是相同的。所以使用216网页安全色进行网页设计可以最大限度避免颜色失真的问题。

  但是通常216个色彩不怎么能满足网页设计师的设计,随便一个渐变已经超出了这个范围,矛盾又出现了。请尽量将非网页完全色做在图片上,也就是说将非网页安全色做成图片,而将安全色做为代码,这样尽可能使网站拥有美观及快速。如果碰到一个网页设计师的设计作品,从上到下、从内到外、从文字到图片都没有1个安全色,你会怎么做?我昨天就遇到了。难道让我把所有的文字都做成图片?那这个网站还需要更新吗?程序员又该如何做?如果你是这样设计网站的,请改改这种毛病。

  四、 象素与羽化的矛盾

  象素和羽化应用都非常广泛,但是某些地方却产生了矛盾。举个例子,在一个带有图片背景的表格上,有一个翻转图片的按钮(鼠标经过变换图片),而这个按钮并不需要一定做成方形,为了整体效果,你也许会做成圆角,这个圆角如果做成象素,那么按钮可以做成方形透明背景的GIF,这样不会有任何问题,但作为设计师的你,也许会做成羽化的圆角,问题出现了,这个按钮是一定要用JPG或者非透明背景的GIF了,那么一旦需要更改此表格的背景色,这个按钮的两张图片也需要更改。所以在设计到圆角这种效果的时候,用象素还是用羽化,你要考虑清楚了。

  “实践检验真理”,你想成为一个优秀的网页设计师,那么请多去把你的设计作品做成页面,这样你会发现很多设计中的问题。单纯的做一个美观的网页设计并不难,难在如何将美观与实际页面相结合。时间仓促,胡乱写下上面的文字。



  申明:这些方法对一个高手来说是没有什么用处的,所以有矛必有盾,你看着办吧。

  1.将以下代码加入到HEML的<body></body>之间

<SCRIPT language=javascript> 
function click() {if (event.button==2) {alert('不许你偷看!');}}document.onmousedown=click 
</SCRIPT> 


作者的Blog:blog.donews.com/iqst

最近蓝色用户体验区有一个关于登录时如何保存cookie才合理的帖子,引发了我的一些思考,本来想直接写:如何设置保存cookie才是合理的,但后来想不如把整个登录页面都写了吧,正好对于这个页面的一些设置,自己也有些想法。

登录页面涉及的主要要素无外乎:
用户名
密码
保存cookie
登录按钮

找回用户名的需求在增加

在互联网中,不可能一个用户名走天下,你想注册的那个名字很可能早已被别人注册了,因此你需要准备你的第二名字甚至是第三名字,比如jack、jack1982、jack19820709.所以说现在的用户基本都拥有3个以上常用的用户名,这便增加了混淆的机率。同时随着互联网用户的增加,用户名长度也随之不断增长(想在门户网站注册一个4位的英文用户名几乎是不可能的),这便增加了用户忘记自己名字的可能性。从定性上来说,找回用户名的需求在不断增加,但从定量上来看,这个量还是占极小的比例,是否有必要增加找回用户名功能,完全取决于网站规模:网站越大,这个需求越强。(Yahoo、Ebay、淘宝都提供找回用户名功能)

把找回密码放在哪里?

“找回密码”功能的必要性,我就不多说了,那么这四个字放在什么位置上更合适些,目前有两种方案:
1、 文字紧跟在密码输入框附近;
2、 文字放在登录框下发;
见下图:

这两种方案代表了两种思路,

<

  如今,互联网越来越走近我们的生活,网上冲浪也渐渐成为我们生活不可缺少的一部分。网络世界五彩缤纷,涌现出大量优秀精美的网页。大量网络信息的呈现,无非就是通过文本、图像、Flash动画等,其中, 文本是网页中最为重要的设计元素。 对于网页设计初学者而言,了解和掌握网页设计中的文字排版设计就显得尤为重要,下面笔者想谈谈一己之见。

  文字的格式化

  1.字号、字体、行距字号大小可以用不同的方式来计算,例如磅(Point)或像素(Pixel)。因为以像素技术为基础单位打印时需要转换为磅,所以,建议采用磅为单位。

  最适合于网页正文显示的字体大小为12磅左右,现在很多的综合性站点,由于在一个页面中需要安排的内容较多,通常采用9磅的字号。较大的字体可用于标题或其他需要强调的地方,小一些的字体可以用于页脚和辅助信息。需要注意的是,小字号容易产生整体感和精致感,但可读性较差。

  网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。但是,无论选择什么字体,都要依据网页的总体设想和浏览者的需要。例如:粗体字强壮有力,有男性特点,适合机械、建筑业等内容;细体字高雅细致,有女性特点,更适合服装、化妆品、食品等行业的内容。在同一页面中,字体种类少,版面雅致,有稳定感;字体种类多,则版面活跃,丰富多彩。关键是如何根据页面内容来掌握这个比例关系。

  从加强平台无关性的角度来考虑,正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而你指定的字体在浏览者的机器里并不一定能够找到,这给网页设计带来很大的局限。解决问题的办法是:在确有必要使用特殊字体的地方,可以将文字制成图像,然后插入页面中。

  行距的变化也会对文本的可读性产生很大影响。一般情况下,接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12,即用字10点,则行距12点。这主要是出于以下考虑:适当的行距会形成一条明显的水平空白带,以引导浏览者的目光,而行距过宽会使一行文字失去较好的延续性。

  除了对于可读性的影响,行距本身也是具有很强表现力的设计语言,为了加强版式的装饰效果,可以有意识地加宽或缩窄行距,体现独特的审美意趣。例如,加宽行距可以体现轻松、舒展的情绪,应用于娱乐性、抒情性的内容恰如其分。另外,通过精心安排,使宽、窄行距并存,可增强版面的空间层次与弹性,表现出独到的匠心。

  行距可以用行高(line-height)属性来设置,建议以磅或默认行高的百分数为单位。例如:{line-height:20pt}、{line-height:150%}。

  文字的整体编排页面里的正文部分是由许多单个文字经过编排组成的群体,要充分发挥这个群体形状在版面整体布局中的作用。从艺术的角度可以将字体本身看成是一种艺术形式,它在个性和情感方面对人们有着很大影响。在网页设计中,字体的处理与颜色、版式、图形等其他设计元素的处理一样非常关键。从某种意义上来讲,所有的设计元素都可以理解为图形。

  1.文字的图形化字体具有两方面的作用:一是实现字意与语义的功能,二是美学效应。所谓文字的图形化,即是强调它的美学效应,把记号性的文字作为图形元素来表现,同时又强化了原有的功能。作为网页设计者,既可以按照常规的方式来设置字体,也可以对字体进行艺术化的设计。无论怎样,一切都应围绕如何更出色地实现自己的设计目标。

  将文字图形化、意象化,以更富创意的形式表达出深层的设计思想,能够克服网页的单调与平淡,从而打动人心。

  2.文字的叠置文字与图像之间或文字与文字之间在经过叠置后,能够产生空间感、跳跃感、透明感、杂音感和叙事感,从而成为页面中活跃的、令人注目的元素。虽然叠置手法影响了文字的可读性,但是能造成页面独特的视觉效果。这种不追求易读,而刻意追求“杂音”的表现手法,体现了一种艺术思潮。因而,它不仅大量运用于传统的版式设计,在网页设计中也被广泛采用。

  3.标题与正文在进行标题与正文的编排时,可先考虑将正文作双栏、三栏或四栏的编排,再进行标题的置入。将正文分栏,是为了求取页面的空间与弹性,避免通栏的呆板以及标题插入方式的单一性。标题虽是整段或整篇文章的标题,但不一定千篇一律地置于段首之上。可作居中、横向、竖向或边置等编排处理,甚至可以直接插入字群中,以新颖的版式来打破旧有的规律。

  4.文字编排的四种基本形式页面里的正文部分是由许多单个文字经过编排组成的群体,要充分发挥这个群体形状在版面整体布局中的作用。

  两端均齐:文字从左端到右端的长度均齐,字群形成方方正正的面,显得端正、严谨、美观。

  居中排列:在字距相等的情况下,以页面中心为轴线排列,这种编排方式使文字更加突出,产生对称的形式美感。

  左对齐或右对齐:左对齐或右对齐使行首或行尾自然形成一条清晰的垂直线,很容易与图形配合。这种编排方式有松有紧,有虚有实,跳动而飘逸,产生节奏与韵律的形式美感。左对齐符合人们阅读时的习惯,显得自然;右对齐因不太符合阅读习惯而较少采用,但显得新颖。

色彩对于事物的表现能力有着其他形式无法比拟的超强效果。在我们生活里,色彩无处不在,它是构成我们生活环境的重要组成部分。可以说我们对每一件事物的认知,都是从色彩与形状开始的,我们也在用色彩创造丰富的视觉空间,用颜色的语言与社会进行沟通。日常生活中,人们对色彩的反应都是有一定的规律。为此,人们把每种颜色都富裕了特殊的感情意义。

色彩构成(Interaction of Colour),即色彩的相互作用,是从人对颜色的知觉和心理效果出发,用科学分析的方法,把复杂的色彩现象还原为基本要素,利用色彩在空间.量与质上的可变幻性,按照一定的规律去组合各构成之间的相互关系,再创造出新的色彩效果的过程。色彩构成是艺术设计的基础理论之一,它与平面构成及立体构成有着不可分割的关系,色彩不能脱离形体.空间.位置.面积.肌理等而独立存在。作为一个网页设计师,只有掌握色彩构成原理,熟知各色彩间的相互关系及各种颜色的生理或心理作用,结合自己所具备的平面构成知识,在网页设计中正确用色,才能实现传达特定信息和渲染页面的想国的目的

1、光与色彩

色彩是由光的刺激而产生的一种视觉效应。光是产生色的原因,色是光感觉的结果。

光在物理学上是电磁波的一部分,其波长自700-400mm,在此范围称为可视光线。当把光线引入三棱镜时,光线被分为红.橙.黄.绿.青.蓝.紫,因而的出自然光是七色光的混合。这种现象被称作光的分解或光谱,七色光谱的颜色分布是按光的波长排列的。

2、物体色

物体本身是不会发光的,之所以能看到它,是因为光源经物体表面的吸收.反射,反映到视觉中的光色感觉。

物体在自然光照下,只反射其中一种波长的光,而其他波长的光全部吸收,这个物体则呈现反射光的颜色。如果某一物体反射所有的光,那么,我们便感觉这个物体是白色的;如果把七色光全部吸收,那么就呈现一种黑色;实际上,相识生活中的颜色足极其丰富的,各种物体不可能单纯反射一种波长的光,它只能对某一波长的光反射得多,而对其他波长的光按不同的比例反射得少。因此,物体的颜色不可能是一种绝对标准的色彩,而只能是倾向某一种颜色,同时又具有其它色光的部分。所以说物体的颜色是受光源的色彩和该物体的选择吸收与反射能力所决定的。

3、计算机色彩显示

我们知道物体的色彩是对色光反射的结果。那么,计算机显示器的色彩有时如何生成的?

色彩显示器产生色彩的方式类似于大自然中的发光体。在显示器内部有一个和电视机一样的显象管,当显象管内的电子枪发射出的电子流打在荧光屏内侧的磷光片上时。磷光片就产生发光效应,由此精确控制各个磷光片的光波的波长,再经过合成叠加,就模拟出自然界中的各种色光。

二、原色

不能用其他色混合而成的色彩叫原色。用原色却可以混出其他色彩

原色有两个系统,一种是色光方面的,即,光的三原色,如图3-2。另一种是色素方面的,即,色素三原色

色光的三原色:红光-red. 绿光-green. 蓝光-blue

色素的三原色:品红-magenta. 黄色- yellow. 青色-cyan

1、色彩的正混合

正混合指色光的混合。将太阳光线引入三棱镜时,光线被分离为红.橙.黄.黄.绿.青.蓝.紫的光谱。同样,我们可以在实验室里把单色光混合成其他颜色的色光,得出如下的实验结果:

红光+绿光+蓝紫光=白光

红+绿=黄光

红光+蓝紫光=紫红光

可以看出色光的混合特征,两色或多色光相很和,混出的新色光,明度增高,明度是参加混合各色光明度之和。参混合的色光越多。混出的新色的名度就越高,如果把各种色光全部混合在一起则成为极强白色光。所以,把这种混合叫正混合或加法混合。

在色环上,相混合的两色光在色相环上的距离较近,中等,较远相混,形成的新色光均为相两色光的中间色光。相距近混出的新色光纯度高,相距远混出的新色观纯度低,相距最远的补色光相混,混出的光为白光,其纯度消失。混出新色光的明度为参加相混色光明度之和

电脑显示器的色彩是通过荧光屏的鳞片发出的色光通过正混合叠加出来的,它能够显示车百万种色彩,其三原色是红-red. 绿-green. 蓝-blue,所以称之为RGB模式

2、色彩的负混合

负混合指色素的混合,色素的混合是明度减低的减光现象,所以叫负混合或减法混合。如图3-3。颜料.染料.涂料等色素的性质与光谱上的单色光不同,是属于物体色的复色光,色料的显色是把白光中的色光经部分选择与吸收的结果,所反射的和说吸收的色光里,个含有集中不同的单色光。因此,色素间的负混合现象,不是属于反射部分的色光混合的结果,而是吸收部分相混合的所增加的减光现象

在色环上相混合的两色距离近,渔利中等,毅力较远的色相混,混合的结果均为相混两色的中间色。两色相距较近时,混出的色纯度降低的少;另色相距远时,混出的色出的减低的多。若两色为相距最远的互补色时,混出的新色纯度消失,明度降低为黑灰色

因此要混合出纯度较高的新色彩,一定要选择在色环上距离较近的色。如,用黄绿和蓝绿混户出的绿色,一定要比用黄和蓝混合出的绿色的纯度高。 SyntaxHighlighter.highlight();

[!--infotagslink--]

相关文章

  • photoshop设计一幅大鱼海棠动画片海报制作实例教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计一幅大鱼海棠动画片海报制作的实例教程,各位想知道具体制作步骤的使用者们,那么各位就快来看看...2016-09-14
  • 如何获取网站icon有哪些可行的方法

    获取网站icon,常用最简单的方法就是通过website/favicon.ico来获取,不过由于很多网站都是在页面里面设置favicon,所以此方法很多情况都不可用。 更好的办法是通过google提供的服务来实现:http://www.google.com/s2/favi...2014-06-07
  • ps怎么制作倒影 ps设计倒影的方法

    ps软件是一款非常不错的图片处理软件,有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影,一起来看看设计倒影的方法。 用ps怎么做倒影最终效果&#819...2017-07-06
  • C语言程序设计第五版谭浩强课后答案(第二章答案)

    这篇文章主要介绍了C语言程序设计第五版谭浩强课后答案(第二章答案),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-04-02
  • Photoshop设计商务名片的5种常见思路分享

    今天小编在这里就来给Photoshop的这一款软件的使用者们来说下计商务名片的5种常见思路,各位想知道的使用者,那么下面就快来跟着小编一起看一看吧。 给各位Photosho...2016-09-14
  • mac下Apache + MySql + PHP搭建网站开发环境

    首先为什不自己分别搭建Apache,PHP和MySql的环境呢?这样自己可以了解更多知识,说起来也更酷。可也许因为我懒吧,我是那种“既然有现成的,用就是了”的人。君子生非异也,善假于物也。两千年前的荀子就教导我们,要善于利用工具...2014-06-07
  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面,国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
  • 腾讯视频怎么放到自己的网页上?

    腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题,要把腾讯视频放到自己的网页有许多的办法,当然一般情况就是直接使用它们的网页代码了,如果你要下载资源再放到...2016-09-20
  • WPF实现类似360安全卫士界面的程序源码分享

    最近在网上看到了新版的360安全卫士,感觉界面还不错,于是用WPF制作了一个,时间有限,一些具体的控件没有制作,用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25
  • php实现网站留言板功能

    我要实现的就是下图的这种样式,可参考下面这两个网站的留言板,他们的实现原理都是一样的畅言留言板样式:网易跟帖样式:原理 需要在评论表添加两个主要字段 id 和 pid ,其他字段随意添加,比如文章id、回复时间、回复内容、...2015-11-08
  • 网站广告怎么投放最好?首屏广告投放类型优化和广告位布局优化的案例

    网站广告怎么投放最好?一个网站中广告位置最好的是哪几个地方呢,许多的朋友都不知道如何让自己的网站广告收效最好了,今天我们就一起来看看吧。 在说到联盟优化前,...2016-10-10
  • photoshop安卓和苹果界面设计之尺寸规范详解

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说下安卓和苹果的界面设计之尺寸规范,各位想知道的使用者们,那么下面就快来跟着小编一起看看吧。 给...2016-09-14
  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
  • photoshop设计重影效果具体制作教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计重影效果具体的制作教程,各位想知道具体制作方法的软件使用者们,那么大家就来看下小编带来的教...2016-09-14
  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20
  • Illustrator结合photoshop设计可爱的卡通女厨师头像制作教程

    今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说结合photoshop设计可爱的卡通女厨师头像的制作教程,各位想知道具体制作步骤的使用者们,那么下面就快来...2016-09-14
  • PS怎么设计T恤 PS制作T恤教程

    PS怎么设计T恤?很多人都想要在T恤上有自己喜欢的图案,那么自己设计T恤的图案是方法之一,本次为大家带来了详细的ps设计T恤教程,有兴趣的同学快来看看吧。 1、打开PS,新...2016-12-31
  • photoshop设计一张节约用水环保主题海报制作教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来详细的说说设计一张节约用水环保主题海报的制作教程,各位想知道具体制作方法的使用者们,那么下面就快来跟着小...2016-09-14
  • 个人站长做网站应该考虑的一些问题

    个人网站建设应该考虑哪些问题呢?这个问题我们先在这里不说,下文会一一列出来,希望这些建义能帮助到各位同学哦。 我相信VIP成员里面有很多站长,每个人几乎都拥有一个...2016-10-10
  • c#实现51单片机频率计的代码分享(数字频率计设计)

    c#实现51单片机频率计的代码分享,大家参考使用吧...2020-06-25