《什么是Web设计》摘录

 更新时间:2016年9月20日 19:05  点击:1760
1.3 为用户设计

在Web开发中经常犯的一个错误是为设计者而设计站点,所考虑的是设计者的需求而不是实际用户的需求。如果设计者忽略用户的需求,进程模型就不能保障一个站点的质量。一定要记住Web设计的重要原则:

规则:设计者不是用户。

设计者所理解的并不是用户所理解的。作为一个设计者,你拥有Web站点的直接知识。你知道信息在哪里以及如何安装插入件。你有最优的屏幕分辨率及浏览器的设置等等。你必须接受以下的事实,很多用户并不像你一样理解你认真设计的站点,他们的兴趣甚至也与你不尽相同。 考虑到用户的兴趣和期望的重要性,表面上直接让用户以他们希望的方式进行设计仿佛很合适。但如果你考虑到了另一个基本原则,那就不是一个好主意:

规则:用户不是设计者。

并不是任何人是或必须是一个Web设计者。就像指望电影观众根据观看的电影去指导一部电影一样,仅因为用户浏览了众多站点而指望他们能够设计站点的想法是愚蠢的。用户经常有很多不现实的关于站点的需求和期望。用户也不会认真的单独考虑Web站点的某个部分。总之,用户不会像设计者一样对Web有综合的理解。这就是说,成功且易用的Web站点设计的关键是尽量从用户的角度去思考。以用户为中心的设计要求把用户放在第一位。但我们又能就用户谈些什么呢?是否存在典型的用户呢?是否存在一个有代表性的因特网用户,而我们应该为他设计站点?可能不会,但我们在设计站点时应该考虑一般的特性,如响应时间、记忆和其他一些认知与物理能力。对认知科学的回顾有助于我们理解用户的基本能力,这会在第3章里进一步讨论。记住,用户具有共性时也具有个性。对一个用户看起来很简单的事情对另一个用户则可能很困难。为具有共性的用户设计站点有可能 不能满足所有用户的要求。能力强的用户可能觉得站点的限制太多,而新手则会觉得它太困难。用户是一群具有某些共同能力和特征的个体。站点在专注于共性时,也应该考虑个性,正如下面的原则所指出的。

规则:为用户的共性设计,但应该考虑差异。

效益和可用性

好的Web站点对用户是有用的。有效性包括两个方面的意思:有用性和可用性。有用性指的是站点潜在的满足用户需求的功能。可用性是指用户能够通过站点的操作实现特定目标。例如,考虑一个提供在线银行服务的站点。如果它提供诸如收支平衡检查、转账、资金支付等用户期望的能力,就可以说它是有用的。然而,站点也可能完全失败,它提供的功能可能令人困惑而无法得到有效的使用。很明显,如果一个站点不能恰当地运作,或者设计得非常糟糕甚至存在错误,它就不是一个好站点。可用站点的效率会非常高,容易学习,在实现用户的目标时令人满意而不会有错误。

1.7 外观问题

尽管一个好的站点必须有好的功能和简单的导航系统,但这些特征并不能马上得到承认。站点的外观经常是最先被注意到的。尽管好的品味是不可能强迫出来的,几乎也不可能预测,但我们知道,好的Web设计与用户对站点外观的品味直接相关,第一印象有赖于在线的站点。用户不需要任何预先的知识,就可能主观地认为第二个站点(前端的)比第一个更值得浏览。站点的外观会影响用户对站点的看法。外观好的站点会主观地被认为比外观差的站点好,至少第一眼是这样。因此,有如下规则:

规则:外观会显著地影响用户开始时对站点的价值判断。

注意外观在获得用户信任方面可能也是重要的,这一点在在线交易方面非常至关重要。在对每个站点一无所知的情况下,考虑一下您会选择哪个站点进行交易。记住,信任不仅仅与站点相关,并且很大程度上受第三方认可的初始印象或者公司声誉的影响。

综合印象值

外观开始时很重要,但用户继续使用时,会逐渐减少对外观的关注。当一个用户离开某个站点时,他会有一个综合的印象—对站点访问是否成功的一般感觉。一般来说,这种感觉有可能是正面的、负面的或中性的。考虑一个用户讨厌某个站点的案例。为什么造成这种情况?用户是否发现站点很难使用?站点访问速度是否很慢?站点是否运行得很糟糕或经常出错?站点是否设计得很糟糕?以上任何一种原因都可能导致用户在离开时对站点有负面的评价。可能一开始受到外观的影响较大,最后的印象却来自内容、外观、技术以及可用性的综合。综合印象值可能很大程度上与用户在访问过程中是否达到目的相关。这样,虽然外观在第一印象中占主导性的作用,最终印象的产生却很复杂,可以综述为以下规则:

规则:站点的综合印象值受外观、内容、技术、可用性以及用户满足程度的综合影响。

尽管综合印象值不只是仅仅包括用户对站点的外观评价,但这并不会降低Web外观的重要性,颜色、背景、文本的使用、图像以及页面样式都能用来提高页面的表现力。

撇开视觉有障碍和计算机环境不支持图形浏览的用户不谈,视觉效果好的站点注定更加有趣。不要专注于站点的特定外观或那些可以下载的页面,仅仅在抽象的层次上考虑哪些更令人愉悦。      作为一名希望成为服务器端软件的开发人员,总是想在需求中找到业务规则,根据设计方法把业务规则组合起来,配置好一些底层的结构,然后在该基础上来实现设计的框架,最后完成整个服务的功能。而服务器的软件与浏览器之间交互是服务器软件的窗口,因此前台网页的美观和实用在一定程度上反映服务器软件的功能特性。

     前台网页的实用不仅对于服务器端软件的开发重要,而且对于用户的可操作的流畅性和易用性也很重要。首先前台的网页的实用对于服务器软件而言:就是它们之间的交互参数。服务器后台软件将依照参数来设定相关的接口。只有把这些参数有业务逻辑的形式组合起来,才能避免功能的分化,甚至是凌乱;才能使服务器软件的按功能模块来实现,而不是表面看有很多功能,其实由大量功能之间的冗余。这样对于用户在功能上的请求也方便多了,从而达到了实用的效果。

    前台网页的美观对于用户来说是很重要的,爱美之心人皆有之,好的网页能起到赏心悦目的作用。并不是要在网页用大量的色彩,也不需要大量的javascript,而是应该根据网页的性质选定一种网页的风格,然后添加适当有特色的动态功能。同时要考虑到用户的显示器,浏览器等,争取使网页具有通用性!

    以上是我个人从服务器软件开发角度谈网页的实用和美观的自我总结,希望对页面开发人员有所帮助。




  网页的版式设计---网页的排版与布局

  很多朋友都想向我学习如何做网页,我知道他们的意思就是说要想向我学习如何用做网页的软件,如dreamweaver、flash、firework、photoshop等等,这些纯技术的东西我不想多谈,因为如今技术的发展一日千里,就是这种应用软件也是发展升级得非常的快。

  今天的很多认为是较难实现的功能也许经过软件升级之后就可以很方便的实现。我想强调的是关于网页排版布局方面的必要的知识,很多初学者都忽视这方面,以为技术就能代表一切,能够知道怎么用这个做网页的工具就能够做出质量较高的网页来。其实不然,因为软件知识只是一种工具,就像你有了笔,但不一定能作出好的文章来一样。很多人对技术很熟练但是做出来的网页却通常是照搬人家的东西,并没有体现做网页的水平的提高。

  网络时代,人本身的因素是相当重要的,只有拥有这方面的一定的审美知识,才有机会做好网页,而真正技术上的东西是不重要的,毕竟技术的发展是使每个使用者使用更加的方便,发展的趋势是让软件成为“傻瓜型”。终极目标就是用鼠标一点就能够使所有的网页完成。所以,我们应该培养自己的审美修养才是最重要的。而真正的体现是在具体的网页的布局上,网页的设计呈现出多样化的趋势,但是万变不离其宗,我想认真的分析一下,可以得到一些有用的东西,在我们应用的时候作为参考。

  虽然网页设计拥有传统的媒体的不具有的优势,例如是能够声音、图片、文字、动画相结合,营造一个富有生气的独特世界,同时它拥有极强交互性,使使用者能够参与其中,同设计者相交流。但是最基本的模式还是平面设计的内容,所以平面设计就要考虑形式美的内容,其中网页的排版布局就属于形式的内容,那什么形式呢?

  形。原形,包括原始形,或称自然形。

  式。许慎之《说文解字》说:“法也”。它包括“法则”、“法度”、“法制”、有“用法”的含义,也就是一种“格律”。

  中国古典建筑形式就称为“法式”。“形”是自然的,“式”是人为的。“形式”是将自然形态经过人为改造而称为一种新的美的形式。自然形态只有通过人的改造,才能起更大的作用,由于这个原因,就形成了今天的审美形态,形象是客观的,形式则是依据客观的规律进行主观的创造。如果没有主观的创造,就没有艺术,也不可能有今天的一切,当然对于实际的网页制作来说,这也是最基本的,就是主观的创造,因为这是一个网页的灵魂,假如没有自己的主观创造,就只能拾人牙慧? 复别人丢掉不用的东西,是毫无意义的。所以现在强调网页设计的创造,表现在对页面的布局上,具体说就是体现在页面的形式美方面。就是通过页面的合理安排,例如文字的条理清楚、流畅、整体,使形式美得到体现。

  从网站内容上来进行排版

  现在的网站通常具有的内容是文字、图片、符号、动画、按钮等,其中文字占很大的比重,因为现在网络基本上还是以传送信息为主,而用文字还是非常有效率的一种方式,其次是图片,加入图片不但可以是页面更加的活跃,而且可以形象的说明问题。所以按照目前网页的设计,可以有针对性的对这些内容作一些调整,可以得出一些可以借鉴的东西……

  从网页的布局形式上来看

  按照平面设计的形式来看,整个页面可以分为几个部分,每个部分有不同的功能,也能体现不同的形式,具体看来就是上边、左边、下边、右边、中间、看似无奇,自身却有许多独特的地方,就说划分的大小吧!中间的部分一般是最大的,因为它承载着主要的信息,使用者主要就是看中间这个部分的内容,有些网站也为了出新意把整个页面进行任意划分,特别是个人网页,例如把整个页面平分为左右两个部分,但是这样会让人不着重点,还有的框架用得太多,影响了页面的整体性……

  综合起来看

  内容和形式即具体的网页的排版布局要能够达到一种协调的状态下才能真正的成功的网页设计,所以,不能单独考虑网页的内容的排版,内容和形式即具体的网页的排版布局要能够达到一种协调的状态下才能真正的成功的网页设计,所以,不能单独考虑网页的内容的排版,以为只要能够把具体内容清晰流畅的放到网站上就行了,造成整个页面的形式感很差,这样严重影响使用者的心情……




<

  现在专业性的网站越来越多,许多网友们都在网上建立起了自己的小家。不过辛辛苦苦制作的网页被人拿去改头换面却是件非常痛心的事,所以大家都想保护自己独创的作品,为自己的网页上把锁,今天就让我带大家了解一下如何给我们的网页加上一把密码锁。

  一、常用JavaScript密码锁

  1. 了解javascript

  JavaScript是一种新的网页描述语言,是由Sun公司以及网景Netscape公司开发的,此一语言可以被嵌入HTML的文件之中,使用它可以让你设计交互性的网页内容。

   2. javascript特点

  使用javascript非常简单,只是一小段代码,就可以让网页发生千奇百怪的效果,而且使用javascript来加密的方法是网络中加密最常用的方法。

  3. 使用javascript加密

  使用javascript加密最简单的结果就是让浏览者不能使用鼠标右键,当他点击右键想对图片进行保存或者复制文字的时候就会弹出一个警告窗口或是弹出收藏夹等。

  实现方法:

  (1)利用弹出窗口封锁鼠标右键

  将下面这段代码放在网页HTML代码的<head></head>标志中,就可以实现封锁右键,给网页加密。

<script language="javascript">
function click() {if (event.button==2) {alert('本站不准使用右键,
使用左键吧!^_^') }}
document.onmousedown=click</script>

  (2)弹出“添加收藏夹”封锁鼠标右键

  将下面这段代码放在网页的HTML代码的<head></head>标志中。实现点击右键出现“添加到收藏夹”选项。

<script language="javascript">
function click() {if (event.button==2) {window.external.addFavorite
('http:///,' 网页教学网')}}
document.onmousedown=click</script>

  (3)彻底封锁鼠标右键

  将下面这段代码放在网页的HTML代码的<head></head>标志中能够实现彻底封锁鼠标右键的效果,由于这个脚本在右键按下时调用一个函数,所以可以改为很多种类型。即使按下左键,再按下右键,放开左键,再放开右键的方法也还是破解不了。

<script>
function DM(e){if(!ns){if(event.button>1)window.external.addFavorite
('http:///,' 网页教学网')}else{if(e.which>1)return false}}ns=navigator.appName=="Netscape";if(ns)document.captureEvents
(Event.MOUSEMOVE|Event.MOUSEDOWN);document.onmousemove=DM;document.
onmousedown=DM;</script>

  (4)禁止查看源文件
  将下面这段代码放在网页的HTML代码的<head></head>标志中则可以实现禁止利用IE浏览器查看源文件。

<script language="JavaScript">
<!--
document.onmousedown=click
function click() {
if ( event.button==2) {alert('不准查看源文件') }
if ( event.button==3) {alert('不准查看源文件') }
}
//-->
</script>

  (5)用乱码显示链接、调用地址加密。
  利用某些函数把URL字符转换成ASCII码,从而达到隐藏链接Frame页面和*.js,*.asp等脚本的目的。返回ASCII码escape(character),ASCII码为%XX格式,XX是十六进制,如空格键为%20。返回字符unEscape(string)如:

<!—var Words=" %3Cframeset%20BORDER%3D%220%22%20FRAMEBORDER%3D%220%22
%20FRAMESPACING%3D%220%22%20rows%3D%22100%25%22%3E%0D%0A%20%20%3Cframe
%20SRC%3D%22http%3A//XXX.XXX.COM/XXX/XXX/%22%20NAME%3D%22oos1%22%20"//
-->
</script>

<

  网页的版式设计---文字的格式化

  编者按:很多从事网页设计的计算机专业人员,对于网页的制作技术驾轻就熟,但对于网页富有艺术性和个性的设计却感到力不从心。特别是没有经过艺术设计专业训练的网页制作者,在掌握了网页制作技术的情况下,都渴望将自己的网页制作得更具创意和美感。目前关于网页制作的讨论和介绍,多以讲解软件的技术性操作为主要内容,侧重艺术方面的非常之少。

  文字的格式化

  1.字号、字体、行距

  字号大小可以用不同的方式来计算,例如磅(point)或像素(pixel)。因为以计算机的像素技术为基础的单位需要在打印时转换为磅,所以,建议采用磅为单位。

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

  网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。但是,无论选择什么字体,都要依据网页的总体设想和浏览者的需要。

  粗体字强壮有力,有男性特点,适合机械、建筑业等内容;细体字高雅细致,有女性特点,更适合服装、化妆品、食品等行业的内容。在同一页面中,字体种类少,版面雅致,有稳定感;字体种类多,则版面活跃,丰富多采。关键是如何根据页面内容来掌握这个比例关系。

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

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

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

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

  2.文字的整体编排

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

  (1)文字的图形化

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

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

  (2)文字的叠置

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

  (3)标题与正文

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

  (4)文字编排的四种基本形式

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

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

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

SyntaxHighlighter.highlight();

[!--infotagslink--]

相关文章

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

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计一幅大鱼海棠动画片海报制作的实例教程,各位想知道具体制作步骤的使用者们,那么各位就快来看看...2016-09-14
  • Springboot如何实现Web系统License授权认证

    这篇文章主要介绍了Springboot如何实现Web系统License授权认证,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-05-28
  • C#使用Http Post方式传递Json数据字符串调用Web Service

    这篇文章主要为大家详细介绍了C#使用Http Post方式传递Json数据字符串调用Web Service,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • ps怎么制作倒影 ps设计倒影的方法

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

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

    今天小编在这里就来给Photoshop的这一款软件的使用者们来说下计商务名片的5种常见思路,各位想知道的使用者,那么下面就快来跟着小编一起看一看吧。 给各位Photosho...2016-09-14
  • InterlliJ IDEA2020新建java web项目找不到Static Web的解决

    这篇文章主要介绍了InterlliJ IDEA2020新建java web项目找不到Static Web的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-09-02
  • 详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)

    这篇文章主要介绍了在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入),本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
  • WPF实现类似360安全卫士界面的程序源码分享

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

    这篇文章主要介绍了jQuery mobile 移动web(6)的相关资料,需要的朋友可以参考下...2015-12-21
  • photoshop安卓和苹果界面设计之尺寸规范详解

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说下安卓和苹果的界面设计之尺寸规范,各位想知道的使用者们,那么下面就快来跟着小编一起看看吧。 给...2016-09-14
  • photoshop设计重影效果具体制作教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计重影效果具体的制作教程,各位想知道具体制作方法的软件使用者们,那么大家就来看下小编带来的教...2016-09-14
  • 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
  • jQuery UI结合Ajax创建可定制的Web界面

    这篇文章主要为大家详细介绍了jQuery UI结合Ajax创建可定制的Web界面,如何利用Ajax和jQuery UI创建具有各种定制功能的高度可定制的UI,感兴趣的小伙伴们可以参考一下...2016-06-24
  • Microsoft Expression Web 简体中文正式版 官方下载地址

    Microsoft Expression Web 简体中文正式版相对于早期的 Microsoft Expression Web Designer CTP1(英文)除了它是正式的中文版外,有进步的地方1.对标签的id名称加上了css的代...2020-06-25
  • Tomcat首次部署web项目流程图解

    这篇文章主要介绍了Tomcat首次部署web项目流程图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-12-11
  • web项目开发之JS函数防抖与节流示例代码

    这篇文章主要介绍了web项目开发之JS函数防抖与节流实现的示例代码及原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助...2021-09-24
  • Web制作验证码功能实例代码

    web开发中,经常会使用验证码功能,例如登录、注册,或其他关键功能之前经常会使用。下面通过实例代码给大家介绍Web制作验证码功能实例代码,感兴趣的朋友一起看看吧...2017-06-24