Posted by hezc on 2006年05月6日
网页的色彩搭配往往是网友们感到头疼的问题,尤其是那些完全没有美术基础的网友。到底用什么色彩搭配好看呢?让我们来看看网友54雨寒的高见吧!
一、红色的色感温暖,性格刚烈而外向,是一种对人刺激性很强的色。红色容易引起人的注意,也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。
1、在红色中加入少量的黄,会使其热力强盛,趋于躁动、不安。
2、在红色中加入少量的蓝,会使其热性减弱,趋于文雅、柔和。
3、在红色中加入少量的黑,会使其性格变的沉稳,趋于厚重、朴实。
4、在红中加入少量的白,会使其性格变的温柔,趋于含蓄、羞涩、娇嫩。
二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中,最为娇气的一种色。只要在纯黄色中混入少量的其它色,其色相感和色性格均会发生较大程度的变化。
1、 在黄色中加入少量的蓝,会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失,趋于一种平和、潮润的感觉。
2、 在黄色中加入少量的红,则具有明显的橙色感觉,其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。
3、 在黄色中加入少量的黑,其色感和色性变化最大,成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。
4、 在黄色中加入少量的白,其色感变的柔和,其性格中的冷漠、高傲被淡化,趋于含蓄,易于接近。
三、蓝色的色感冷嘲热讽,性格朴实而内向,是一种有助于人头脑冷嘲热讽静的色。蓝 色的朴实、内向性格,常为那些性格活跃、具有较强扩张力的色彩,提供一个深远、广埔、平静的空间,成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡 化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色,均不会对蓝色的性格构成较明显的影响力。
1、 如果在橙色中黄的成份较多,其性格趋于甜美、亮丽、芳香。
2、 在橙色中混入小量的白,可使橙色的知觉趋于焦躁、无力。
四、绿色是具有黄色和蓝色两种成份的色。在绿色中,将黄色的扩张感和蓝色的收缩感相中庸,将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。
1、 在绿色中黄的成份较多时,其性格就趋于活泼、友善,具有幼稚性。
2、 在绿色中加入少量的黑,其性格就趋于庄重、老练、成熟。
3、 在绿色中加入少量的白,其性格就趋于洁净、清爽、鲜嫩。
五、紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。
1、 在紫色中红的成份较多时,其知觉具有压抑感、威胁感。
2、 在紫色中加入少量的黑,其感觉就趋于沉闷、伤感、恐怖。
3、 在紫色中加入白,可使紫色沉闷的性格消失,变得优雅、娇气,并充满女性的魅力。
六、白色的色感光明,性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色,都会影响其纯洁性,使其性格变的含蓄。
1、 在白色中混入少量的红,就成为淡淡的粉色,鲜嫩而充满诱惑。
2、 在白色中混入少量的黄,则成为一种乳黄色,给人一种香腻的印象。
3、 在白色中混入少量的蓝,给人感觉清冷、洁净。
4、 在白色中混入少量的橙,有一种干燥的气氛。
5、 在白色中混入少量的绿,给人一种稚嫩、柔和的感觉
6、 在白色中混入少量的紫,可诱导人联想到淡淡的芳香
Posted by hezc on 2006年05月2日
几种国际尺寸的Banner如下:468×60(全尺寸Banner)、392×72(全尺寸带导航条Banner)、234×60(半尺寸 Banner)、125×125(方形按钮)、120×90(按钮类型1)、120×60(按钮类型2)、88×31(小按钮)、120×240(垂直 Banner),其中468×60的和88×31最多用,下面就常用的为大家讲解一下。
1)468×60 全尺寸Banner
虽然尺寸为国际标准,但是在设计页面的时候,完全可以根据你的页面占用空间来制定Banner广告位和广告条大小。
(1)一个页面内不易超出两个468×60 全尺寸Banner。两个条的时候,一般是上面一个,下面一个,如图4所示。
(2)设计Banner配合页面的两种情况:单看Banner很难看,但是放入网页中,却会使网页设计丰富而炫目,一般也就是468×60的Banner 有这本事了。还有设计的时候必须要考虑LOGO跟别站互换时如何更适合他人网页的风格,所以该多做一些不同颜色不同情况的Banner。
2)88×31的Banner
(1)大家俗称它为LOGO。
(2)好的Banner也要符合网站的风格。经常遇到一个很棒的Banner点开却是很难看的主页。虽然有被欺骗的感觉,但是从行销的角度讲,它设计越好,点击率越高,也就越成功。
(3)如图4中,区域7内的一般的广告条, 88×31 Banner也可以用来丰富页面。这样的情况很少见,值得注意。
3)Banner设计注意点:
(1)Banner有动态和静态两种。在浏览网页的过程中,虽然闪烁的图案会产生瞬间记忆刺激,引起注意,但这种记忆往往为压迫性的,久之易产生负面效 应,从而模糊记忆。而稳定的画面不易引发特殊的关注,但如果有良好的界面引导和内容,可产生良性的记忆,持久而牢固。根据粗略统计,100个Banner 里面有1/3是静态的。看来大家对动态的Banner更加看好。
(2)Banner的“重量”要轻!以468×60的Banner为例,最好是15K左右,不要超过22K。而88×31的Banner最好在5K左右,不要超过7K。
4)设计要点:
(1)Banner的文字不能太多,用一两句话来表达即可。
(2)广告语要朗朗上口。
(3)图形无须太繁杂,文字尽量使用黑体等粗壮的字体,否则在视觉上很容易被网页其他内容淹没。
(4)图形尽量选择颜色数少,能够说明问题的事物。
(5)如果选择颜色很复杂的物体,要考虑一下在低颜色数情况下,是否会有明显的色斑。
(6)尽量不要使用彩虹色、晕边等复杂的特技图形效果,这样做会大大增加图形所占据的颜色数,增大体积。
Posted by hezc on 2006年03月30日
网页的色彩是树立网站形象的关键之一,色彩搭配却是网友们感到头疼的问题。网页的背景,文字,图标,边框,超链接…,应该采用什么样的色彩,应该搭配什么色彩才能最好的表达出预想的内涵呢?
阿捷这里谈一些心得,希望对你有所启发。
首先我们先来了解一些色彩的基本知识:
1.颜色是因为光的折射而产生的。
2. 红,黄,蓝是三原色,其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如:红色是 color (255,0,0)十六进制的表示方法为(FF0000)白色为(FFFFFF), 我们经常看到的”bgColor=#FFFFFF”就是指背景色为白色。
3.颜色分非彩色和彩色两类。非彩色是指黑,白,灰系统色。彩色是指除了非彩色以外的所有色彩。
4.任何色彩都有饱和度和透明度的属性,属性的变化产生不同的色相,所以至少可以制作几百万种色彩.
网页制作用彩色还是非彩色好呢?
根据专业的研究机构研究表明:彩色的记忆效果是黑白的3.5倍。也就是说,在一般情况下,彩色页面较完全黑白页面更加吸引人。
我们通常的做法是:主要内容文字用非彩色(黑色),边框,背景,图片用彩色。这样页面整体不单调,看主要内容也不会眼花。
●非彩色的搭配
黑白是最基本和最简单的搭配,白字黑底,黑底白字都非常清晰明了。 灰色是万能色,可以和任何彩色搭配,也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩,那么用灰色试试,效果绝对不会太差。
●彩色的搭配
色彩千变万化,彩色的搭配是我们研究的重点。我们依然需要进一步学习一些色彩的知识。
一.色环。我们将色彩按”红->黄->绿->蓝->红”依次过度渐变,就可以得到一个色彩环。色环的两端是暖色和寒色,当中是中型色。
(如下图) 红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红 |___________| |____| |_________| |_________| | | | | 暖色系 中性系 寒色系 中性系.
二. 色彩的心理感觉。不同的颜色会给浏览者不同的心理感受
红色—是一种激奋的色彩。刺激效果,能使人产生冲动,愤怒,热情,活力的感觉。
绿色—介于冷暖两中色彩的中间,显得和睦,宁静,健康,安全的感觉。它和金黄,淡白搭配,可以产生优雅,舒适的气氛。
橙色—也是一种激奋的色彩,具有轻快,欢欣,热烈,温馨,时尚的效果。
黄色—具有快乐,希望,智慧和轻快的个性,它的明度最高。
蓝色—是最具凉爽,清新,专业的色彩。它和白色混合,能体现柔顺,淡雅,浪漫的气氛(象天空的色彩:)
白色—具有洁白,明快,纯真,清洁的感受。
黑色—具有深沉,神秘,寂静,悲哀,压抑的感受。
灰色—具有中庸,平凡,温和,谦让,中立和高雅的感觉。
每种色彩在饱和度,透明度上略微变化就会产生不同的感觉。以绿色为例,黄绿色有青春,旺盛的视觉意境,而蓝绿色则显得幽宁,阴深。
●网页色彩搭配的原理
1.色彩的鲜明性。网页的色彩要鲜艳,容易引人注目。
2.色彩的独特性。要有与众不同的色彩,使得大家对你的印象强烈。(参考设计思考第二篇网站CI的标准色彩一节)
3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。
4.色彩的联想性。不同色彩会产生不同的联想,蓝色想到天空,黑色想到黑夜,红色想到喜事等,选择色彩要和你网页的内涵相关联。
●网页色彩掌握的过程
随着网页制作经验的积累,我们用色有这样的一个趋势:
单 色->五彩缤纷->标准色->单色。一开始因为技术和知识缺乏,只能制作出简单的网页,色彩单一;在有一定基础和材料后,希望制作一个 漂亮的网页,将自己收集的最好的图片,最满意色彩堆砌在页面上;但是时间一长,却发现色彩杂乱,没有个性和风格;第三次重新定位自己的网站,选择好切合自 己的色彩,推出的站点往往比较成功;当最后设计理念和技术达到顶峰时,则又返朴归真,用单一色彩甚至非彩色就可以设计出简洁精美的站点。
○网页色彩搭配的技巧
文章写到这里,有心急的网友要问了:“到底用什么色彩搭配好看呢?你能不能推荐几种配色方案?”别急,这里有一点技巧,可以帮助你迅速成为调色大师:)
1.用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,(说得通俗些就是将 色彩变淡或则加深),产生新的色彩,用于网页。这样的页面看起来色彩统一,有层次感。
2.用两种色彩。先选定一种色彩,然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。
3.用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。确定色彩的方法各人不同,我是在photoshop里按前景色方框,在跳出的拾色器窗中选择”自定义”,然后在”色库”中选就可以了:)
4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很”跳”。
在网页配色中,忌讳的是:
1.不要将所有颜色都用到,尽量控制在三种色彩以内。其实高手是可以用很多种颜色的,那个要有驾驭颜色的能力了,建议初学的同志们就先控制下。
2.背景和前文的对比尽量要大,(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。
《色彩构成》
高长调
对比主色调为高明度的五度以外的对比,有积极、刺激的感觉,对比强烈。
高中调
对比主色为高明度的,三至五度的差的对比,有明快的、响亮的、活泼的感觉。
高短调
对比主色调为高明度的,三度差以内的对比,显得优雅、柔和,有一种女性化的、朦胧的感觉。
中长调
对比主色调为中明度的,五度以外的对比,有强有力的、男性化的阳刚之气。
中中调
对比主色调为中明度的,三至五度差的对比,有含蓄的、丰富的、薄暮般的感觉。
中短调
对比主色调为中明度的,三度差以内的对比,有模糊而平板的、朴素的感觉。
低长调
对比主色调为低明度的,五度以外的对比,有低沉的、具爆发性、晦暗的感觉。
低中调
对比主色调为低明度的,三至五度差的对比,有苦恼的、苦闷感的、寂寞的感觉。
低短调
对比主色调为低明度的,三度差以内的对比,有忧郁的、死寂的、模糊不清的感觉。
最长调
是以黑白两色构成的,明度对比最强的调性,含有醒目的,生硬的,明晰的、简单化等感觉。
Posted by hezc on 2006年01月20日
由于受传统观念的影响,很长一段时间里,人机界面一直不为软件开发人员所重视,认为这纯粹是为了取悦用户而进行的低级活动,没有任何实用价值。评价一个应 用软件质量高低的唯一标准,就是看它是否具有强大的功能,能否顺利帮助用户完成他们的任务。近年来,随着计算机硬件技术的迅猛发展,计算机的存储容量、运 行速度和可靠性等技术性能指标有了显著的提高,计算机硬件的生产成本却大幅度下跌,个人计算机日益普及。新一代的计算机用户,在应用软件的可操作性以及软 件操作的舒适性等方面对应用软件提出了更高的要求除期望所用的软件拥有强大的功能外,更期望应用软件能尽可能的为他们提供一个轻松、愉快、感觉良好的操作 环境。这表明,人机界面的质量已成为一个大问题,友好的人机界面设计已经成为应用软件开发的一个重要组成部分。
1人机界面的风格分析
这里所指的人机界面的风格,是指计算机系统的用户界面上控制输入的方法,大致经过了四代的演变:
1.1 命令语言:在图形显示、鼠标、高速工作站等技术出现之前,现实可行的界面方式只能是命令和询问方式,通信完全以正文形式并通过用户命令和用户对系统询问的 响应来完成。这种方式使用灵活,便于用户发挥其创造性,对熟练的用户有很高的工作效率,但对一般用户来说要求高,易出错,不友善并难于学习,它的错误处理 能力也较弱。
1.2菜单选项:这种方式与命令行方式相比不易出错,可以大大缩短用户的培训时间,减少用户的击键次数,可以使用对话管理工具,错误 处理能力有了显著提高。但使用起来仍然乏味,可能出现菜单层次过多及菜单选项复杂的情形,必须逐级进行选择,不能一步到位,导致交互速度显得太慢。
1.3 面向窗口的点选界面此类界面亦称WIMP界面,即窗口(Windows)、图标(Icons)、菜单(Menus)、指示器 (PointingDevice)四位一体,形成桌面(Desktop)。这种方式能同时显示不同种类的信息,使用户可在几个工作环境中切换而不丢失几个 工作之间的联系,用户可通过下拉式菜单方便执行控制型和对话型任务,引入图标、按钮和滚动杆技术,大大减少键盘输入,对不精于打字的用户无疑提高了交互效 率。
1.4自然语言使用自然语言与应用软件进行通信,把第三代界面技术与超文本、多任务概念结合起来,使用户可同时执行多个任务(以用户的观点)。
随着文字、图形、语音的识别与输术技术的进一步发展,多媒体技术在人机界面开发领域内的进一步发展,自然语言风格的人机界面将得以迅速的发展,最终走向实用化。
2人机界面的设计原则
人机界面设计的好坏与设计者的经验有直接有关系,有些原则对几乎所有良好的人机界面的设计都是适用的,一般地可从可交互性、信息、显示、数据输入等方面考虑:
原 则1:在同一用户界面中,所有的菜单选择、命令输入、数据显示和其他功能应保持风格的一致性。风格一致的人机界面会给人一种简洁、和谐的美感。原则2:对 所有可能造成损害的动作,坚持要求用户确认,例如提问“你肯定……?”等,对大多数动作应允许恢复(UNDO),对用户出错采取宽容的态度。原则3:用户 界面应能对用户的决定做出及时的响应,提高对话、移动和思考的效率,最大可能的减少击键次数,缩短鼠标移动距离,避免使用户产生无所适从的感觉。原则4: 人机界面应该提供上下文敏感的求助系统,让用户及时获得帮助,尽量用简短的动词和动词短语提示命令。原则5:合理划分并高效使用显示屏。仅显示与上下文有 关的信息,允许用户对可视环境进行维护:如放大、缩小图像;用窗口分隔不同种类的信息,只显示有意义的出错信息,避免因数据过于费解造成用户烦恼。原则 6:保证信息显示方式与数据输入方式的协调一致,尽量减少用户输入的动作,隐藏当前状态下不可选用的命令,允许用户自选输入方式,能够删除无现实意义的输 入,允许用户控制交互过程。
上述原则都是进行人机界面设计应遵循的最基本的原则,除此之外还有许多设计原则应当考虑,比如如何正确的使用颜色等。
3人机界面设计的过程
人机界面的设计过程可分为以下几个步骤:
3.1 创建系统功能的外部模型设计模型主要是考虑软件的数据结构、总体结构和过程性描述,界面设计一般只作为附属品,只有对用户的情况(包括年龄、性别、心理情 况、文化程度、个性、种族背景等)有所了解,才能设计出有效的用户界面;根据终端用户对未来系统的假想(简称系统假想)设计用户模型,最终使之与系统实现 后得到的系统映象(系统的外部特征)相吻合,用户才能对系统感到满意并能有效的使用它;建立用户模型时要充分考虑系统假想给出的信息,系统映象必须准确地 反映系统的语法和语义信息。总之,只有了解用户、了解任务才能设计出好的人机界面。
3.2确定为完成此系统功能人和计算机应分别完成的任务
任务分析有两种途径。一种是从实际出发,通过对原有处于手工或半手工状态下的应用系统的剖析,将其映射为在人机界面上执行的一组类似的任务;另一种是通过研究系统的需求规格说明,导出一组与用户模型和系统假想相协调的用户任务。
逐步求精和面向对象分析等技术同样适用于任务分析。逐步求精技术可把任务不断划分为子任务,直至对每个任务的要求都十分清楚;而采用面向对象分析技术可识别出与应用有关的所有客观的对象以及与对象关联的动作。
3.3考虑界面设计中的典型问题
设 计任何一个机界面,一般必须考虑系统响应时间、用户求助机制、错误信息处理和命令方式四个方面。系统响应时间过长是交互式系统中用户抱怨最多的问题,除了 响应时间的绝对长短外,用户对不同命令在响应时间上的差别亦很在意,若过于悬殊用户将难以接受;用户求助机制宜采用集成式,避免叠加式系统导致用户求助某 项指南而不得不浏览大量无关信息;错误和警告信息必须选用用户明了、含义准确的术语描述,同时还应尽可能提供一些有关错误恢复的建议。此外,显示出错信息 时,若再辅以听觉(铃声)、视觉(专用颜色)刺激,则效果更佳;命令方式最好是菜单与键盘命令并存,供用户选用。
3.4借助CASE工具构造界面 原型,并真正实现设计模型软件模型一旦确定,即可构造一个软件原形,此时仅有用户界面部分,此原形交用户评审,根据反馈意见修改后再交给用户评审,直至与 用户模型和系统假想一致为止。一般可借助于用户界面工具箱(Userinterfacetoolkits)或用户界面开发系统 (Userinterfacedevelopmentsystems)提供的现成的模块或对象创建各种界面基本成分的工作。
4人机界面设计的评价
怎样评价一个人机界面设计质量的优劣,目前还没有一个统一的标准。一般地,评价可以从以下几个主要方面进行考虑:(1)用户对人机界面的满意程度;(2)人机界面的标准化程度;(3)人机界面的适应性和协调性;(4)人机界面的应用条件;(5)人机界面的性能价格比。
目 前人们习惯于用“界面友好性”这一抽象概念来评价一个人机界面的好坏,但“但面友好”与“界面不友好”恐怕无人能定一个确切的界线,一般认为一个友好的人 机界应该至少具备以下特征:(1)操作简单,易学,易掌握;(2)界面美观,操作舒适;(3)快速反应,响应合理;(4)用语通俗,语义一致。
需指出,一个用户界面设计质量的优劣,最终还得由用户来判定,因为软件是供用户使用的,软件的使用者才是最有发言权的人。
参考文献:(1)齐治昌,等.软件工程(M).北京:高等教育出版社,1998.(2)王旭,等.C语言实用界面技术(M).兰州:西北工业大学出版社,1997.
原文发表于《潍坊学院学报》2002.4,版权归作者及原出处所有!
Posted by hezc on 2006年01月10日
创意(idea)是网站生存的关键。这一点相信大家都已经认同。然而作为网页设计师,最苦恼的就是没有好的创意来源。
注意,这里说的创意是指站点的整体创意,(因为这个创意而产生这个站点,或者相同的内容,推出的创意不同),也与网页的平面设计创意有所不同。
创意到底是什么,如何产生创意呢?
创意是引人入胜,精彩万分,出奇不意的;创意是捕捉出来的点子,是创作出来的奇招……。这些讲法都说出了创意的一些特点,实质上,创意是传达信息的一种特别方式。
比如Webdesigner(网页设计师),我们将其中的E字母大写一下: wEbdEsigEr,感觉怎么样,这其实就是一种创意!
创意并不是天才者的灵感,而是思考的结果。根据美国广告学教授詹姆斯的研究,创意思考的过程分五阶段:
1.准备期–研究所搜集的资料,根据旧经验,启发新创意;
2.孵化期–将资料咀嚼消化,使意识自由发展,任意结合;
3.启示期–意识发展并结合,产生创意;
4.验证期–将产生的创意讨论修正;
5.形成期–设计制作网页,将创意具体化。
创意是将现有的要素重新组合。
比如,网络与电话结合,产生IP电话。从这一点上出发,任何人,包括你和我,都可以创造出不同凡响的创意。而且,资料越丰富,越容易产生创意。就好比万 花筒,筒内的玻璃片越多,所呈现的图案越多。你如果有心可以发现,网络上的最多的创意来自与现实生活的结合(或者虚拟现实),例如在线书店,电子社区,在 线拍卖。你是否想到了一种更好的创意呢?
创意思考的途径最常用的是联想,这里提供了网站创意的25种联想线索:
1.把它颠倒
2.把它缩小
3.把颜色换一下
4.使它更长
5.使它闪动
6.把它放进音乐里
7.结合文字音乐图画
8.使它成为年轻的
9.使它重复
10.使它变成立体
11.参加竞赛
12.参加打赌
13.变更一部分
14.分裂它
15.使它罗曼蒂克
16.使它速度加快
17.增加香味
18.使它看起来流行
19.使它对称
20.将它向儿童诉求
21.价格更低
22.给它起个绰号
23.把它打包
24.免费提供
25.以上各项延伸组合
需要一提的是:创意的目的是更好的宣传推广网站。如果创意很好,却对网站发展毫无意义,好比给奶牛穿高跟鞋,那么,我们宁可放弃这个创意!