Archive for the ‘ web界面设计(网站ui) ’ Category

手写英文设计字体下载

一个好的字体,其本身就是一个设计,当一个漂亮的字体用在合适的地方,无疑更是能给设计作品增添许多色彩。

下面的这些漂亮的手绘风格英文字,风格多样化,除了有手绘风格字体外,还有卡通风格,商务风格,涂鸦风格字体等等,希望这些超级漂亮的手写字体在你的设计中可以得到很好的应用。 又做了一次苦力活,自己干脆把这些英文字体都打包提供给大家下载了,在本文最底下有下载地址。

Estrya’s Handwriting

Note This
Note This
Caityln
Caityln
HandVetica
HandVetica
Aguzlo
Aguzlo
Tire Shop Demo
Tire Shop Demo
WC Roughtrad
WC Roughtrad
Tiza
Tiza
Hand of Sean
Hand of Sean
Alliewriting
Alliewriting
GoodDog
GoodDog
Rabiohead
Radiohead
Angelina
Angelina
Whiteboard Modern Demo
Whiteboard Modern Demo
Harrison
Harrison
FFF Tusj
FFF Tusj
Sketch Rockwell
Sketch Rockwell
The Quiet Scream
The Quiet Scream
Grutch Shaded
Grutch Shaded
Mia’s Scribblings
Mia's Scribblings
Karabine
Karabine
Christopher Hand
Christopher Hand
Brook 23
Brook 23
Later On
Later On
Kraboudja
Kraboudja

PS:文章中只有25个字体样式图片,有多个字体未能提供图片样式,请下载字体压缩包,自行用字体管理软件查看,并安装。
字体安装方法:
方法1:打开你的控制面板,找到字体文件夹,把压缩包中的字体都复制到那个字体文件夹中就行了,以后打开你的设计软件就可以调用你安装的字体。
方法2:解压后把那些字体放到C:WINDOWSFonts文件夹下就可以。

拓子博客下载地址:ziti (138)

本文链接地址: 手写英文设计字体下载  拓子博客

整理下最近做的一些东西

很久没有写博客了,今晚不想做什么,整理下这段时间做的一部分东西吧。

有些是广告,有些事网页界面设计。

下面的这是一个系列的小广告

aa (1).gif

下面的这三张是许志恒确定的风格,我延续风格做的

aa (2).gif

aa (3).gif

aa (6).jpg

大都相似其它的就不传了

下面的这是另外一个系列的

bbbb (7).jpg

bbbb (5).jpg

bbbb (4).jpg

有些图排的比较乱

一些别人做的图我也发出来晒晒吧

df.jpg

fdas.jpg

fsaf.jpg

fsda.jpg

博客我正在筹划改版,但老是抽不出时间来,搞的现在大点的缩略图都放不下。

下面的这个是一个做软件开发的工作室的

主页:

index.jpg

内容页:

list.jpg

嘿嘿,上面的这个是飞机的,以后补发终稿。

下面的这个是重庆大学论坛的,因为页面较多,只发一部分:

index.jpg

businesss.jpg

有很多做的都是比较水的,希望大家多怕转。

下面的这个是正在做的,

main.jpg

明天一天赶工做完!

此篇文章到此结束。

网页界面设计一些理论教程

用美和技术两方面衡量生活的合理性。网页界面设计是将技术性与艺术性融为一体的创造性活动。

在网页出现的早期,和设计发展的早期阶段一样,网页设计是以功能性为第一指导原则,以技术因素为主要考虑对象,以完成或实现必要的功能为目标。以字 符 组成的界面可以起到基本的信息传达作用,同时技术要求相对较低,易于实现,并且有较好的稳定性,故而这种形式的界面在很长一段时间内是人机交流的主要形 式。
我国对网页界面设计这一课题的系统研究还略显薄弱,特别是载艺术设计领域中对网页界面设计的探讨尤显不足。
版式设计对设计人员的综合能力与文化素养要求比较高,往往不如文字编排和图形设计那样容易把握。
从艺术领域来看,色彩本身及其有无,并不意味者艺术作品的艺术性的高低,但在网页界面设计领域,彩色的网页总是要胜于单色的网页。

一般情况下使用256色就可以将图片的色彩基本还原出来。

网络信息的受传者存在着职业、文化、修养、兴趣、生活经验以及消费水平等方面的明显差异,因此在网页界面中出现的视觉形象要适应大多数浏览者的口味,越明确,越通俗,越具体越好。

在这样一个内容丰富、信息繁杂的巨大网络世界里,网页界面设计必须以其强有力的视觉冲击效果来吸引浏览者的注意,进而使特定的信息得以准确迅速地传 播。这就要求网页界面设计的形式应力求删繁就简,“以少胜多”,一切分散浏览者注意力的图形、线条、可有可无的“装饰”都应摒弃,使参与形式构成的诸元素 均与欲传播的内容直接相关。

“简洁”是各种艺术形式都必须遵循的普遍原则,正所谓“无声胜有声”,网页界面设计尤其要做到这一点。在社会文化高度发达的现代社会,人们因文化素 质 的提高和价值观念的变化,生活情趣和审美趣味更趋向简洁、单纯。简洁的图形,醒目的文字,大的色块更符合形式美的要求和当今人们的欣赏趣味,给人以悦目、 舒适、现代的感觉以及美的享受,令人百看不厌,并能回味无穷,联想丰富。

网页界面可以依据其传达信息内容的特点来进行类型的划分,主要可分为6种形式:
(1)信息查询类:以实用功能为主,注重视觉元素的均衡排布,较少装饰性的元素,如Yahoo!。
(2)大众媒体类:如新浪网新闻中心。
(3)宣传窗口类:从企业特有形象入手,充分表现企业文化特征,如Adidas。
(4)电子商务类:使浏览者在访问时进行愉快的交流是设计的重点,要求既要具备人们乐于接受的交互性,又要有吸引浏览者注意的页面形式,如当当书店。
(5)交流平台类:以方便使用为主要特点,指示性强,易于理解,如BBS。
(6)网络社区类:由于网络社区通常不带有商业性质,因此它的界面设计可以根据社区内容充分发挥创造性,营造一个自由、舒适、愉快的氛围。

视觉传达设计简称视觉设计(Visual Communication Design 或 Graphic Design),有时也被称为信息设计(Information Design),视觉传达设计的过程,是设计者将思想和设计概念转变为视觉符号形式的过程,即概念视觉化的过程,对信息的接收者来说,则是相反的过程,即 视觉概念化的过程,贯穿和联结两个过程的是信息。

图形符号具有很强的直观性,但同时在信息传达明确性方面不如文字,有时会出现“误读”的可能。

在界面设计中,要求信息的发送者和接收者之间必须具备部分相同的信息知识背景,否则在两者之间就必须存在一个翻译或解说系统作为中间媒介来进行沟 通。 例如对于一个没有任何西方文化和语言背景的中国人来说,“Just Do It”的文字符号就不会产生任何“动感,活力,激情”的印象,此时可以通过鲜明的图象和活跃的色彩来辅助传达这个概念。

形式美的创造法则:
(1)秩序产生的美感。它通过对称、比例、连续、渐变、重复、放射、回旋等方式,表现出严谨有序的设计理念,是创造形式   美感的最基本的方式。
(2)和谐产生的美感。它是以美学上的整体性观念为基础的。构成界面形式的文字、图形、色彩等因素之间相互作用,相互协调映衬,都为界面的功能美与形式美服务。
(3)变化产生的美感。变化的法则体现了设计存在的终极意义,即不断地推陈出新,不断地创造新的形式。

在艺术问题上没有什么严格的法则,艺术天才不可能是结构的奴隶,他不管怎么干,都不会侵犯艺术原理,而只会创造出新的原理。

精心收集和审慎挑选艺术和设计的古今范例有助于训练设计师的大脑和眼力。

界面的借鉴不仅要从同类设计作品中求得,更重要的是从文化传统中找寻。日本现代设计在不长的时间里发展到较高水平,重要原因之一就是很多日本设计师自觉地将日本的文化传统融入到现代设计理念之中。

图形图象的视觉冲击力比文字大85%,故有人说,一图胜千字。

除了圆形以外,点还可以是方形、三角形、星形、自由形等许多形状,在视觉上,只要相对地小,就有点的效果。

图形图象的扩展造型元素,是在点线面这些基本造型元素基础上发展的,它进一步分析了形成图形图象不同视觉效果的影响因素:空间,运动,质感。

图形图象所产生的空间感,一方面可以通过摄影、绘画的技法获得,一幅好的摄影绘画作品使物象有呼之欲出的感觉;另一方面还可以运用不同的手法对点线 面 等元素进行组合,从而使平面图形图象的三维空间感得以加强。这些手法是疏密、大小、方向、重叠、虚实、色调的变化和光影的利用。

图形图象可以采用三种方法产生动感:
(1)采用叠合的片断形态,最常用的方法是重复和渐变,如将动作分解成一系列片断形态。
(2)表现形态的运动轨迹,正如人们看到流星拖着长长的尾巴因而判断它正在划过夜空。
(3)采用运动过程中形态或不稳定的形态,将物象运动过程中某一时刻的片断形态或处于不稳定状态的形态捕捉下来,并选取动态或动势最大的状态,由于人们平时对重力作用的认识,会不自觉地产生联想:接下去会发生什么?怎样运动?如一个在轮滑过程中飞身跃起的人物形象。

创意就是客观地思索,然后天才地表达。

如果说,图形图象的创意解决了“做什么”的问题,设计就是具体的“怎样做”。

“传统”虽然在时间上代表历史,但在观念上并不代表陈旧。传统的东西可以让历史得以延续,让文化保持差异性,从而让人们内心产生归属感。中国的传统文化源远流长,在绘画、书法、建筑、音乐、戏曲、医药、哲学等很多领域都有自己独特的民族风格。
图象的退底,是将图片中所选形象的背景沿边沿剪裁掉。退底后的形象,其外轮廓呈自由形状,具有清晰分明的视觉形态,显得灵活自如,当与其他背景搭配时,既容易协调,又容易突出该形象。

图象的虚实对比能够产生空间感,实的物体感觉近,虚的物体感觉远。要想使图象“虚”,一种方法是将图象模糊,再有就是将图象的色彩层次减少,纯度降低,尽量与背景靠近。

局部是相对于整体而言的,相对局部的图象能让视线集中,有一种点到为止,意尤未尽的感觉。

在人的视觉中所能感受到的色彩范围内,绝大部分是非高纯度的色,即含有一定程度灰的色。

普通24位显示适配器可产生约1670万种颜色,虽然数字很大,但RGB的色彩范围要远远小于可见光谱的范围。由于CMYK与RGB分别是减色原理 和 加色原理,因此输出的图像与在显示器上看到的色彩相比要暗一些。Lab色彩模式以明度、纯度和色相对色彩进行表述,因此其在进行图像处理或在不同平台和系 统间交换时,都不会产生色偏或失真的情况。

人由亮处进入暗环境后,最初大约15分钟可以基本适应,达到完全的暗适应大约需要40分钟。

从生理角度讲,眼睛最能适应的光是中等明度的全色光,即中间灰色,当外界光并非中间灰色时,视觉会自动调整这种不平衡现象,因而会出现视觉残像。为 了 降低视觉残像的影响,应避免使用高纯度的单一色彩,或是在纯色中加入一定量的灰。明度高的色彩在视网膜上形成的物象边缘会有一圈光包围着,视觉感受好像物 象扩大了一些。

不同色光在视网膜上所成影像位置有前差异,因此产生色彩的进退感。日光中波长较长的色光如红橙黄成像在视网膜的较前部位,因而产生色彩靠近的感觉;而波长较短的色光如绿蓝紫成像在视网膜的靠后部位,因而产生色彩后退的感觉。

中国传统年画和西方教学的彩色玻璃艺术大量使用色相对比手法。色相的差别是由可见光波的波长差异造成的,查在色相对比中不能完全依据波长的差别来确 定 色相的对比程度,红色光与紫色光的波长差异虽然很大,但都处于可见光的两极,都接近不可见光的波长,因而从视觉感受上两者的色相是相近的。

明度是色彩三要素中具有相对独立性的一个要素,它可以摆脱任何有彩色的特征而独立存在。色相和纯度都必须依赖明度而存在。

色彩形状的认识程度主要取决于形的色彩与周围色彩的关系,特别是它们之间明度对比的关系,色相对比也可以造成对形的识别,但其作用远不如明度对比那 么 重要,例如,红绿对比是最强的色相对比,但因明度差异较小,形的清晰度不高,浅绿与深绿配色,虽然属于同类色相,但明度差别大,因此形就具有较高的清晰 度。

为了达到色彩和谐的目的,除改变色彩的三要素外,合理安排各种色彩所占的面积是调整色彩配合效果的有效手段。当两种色彩以相等的面积出现时,色彩的冲突达到最高峰,对比效果最为突出,如将一方面积减小力量削弱,整体色彩对比效果也就相应减弱。
色彩的力量取决于色彩的明度和面积,明度比例如下:黄:橙:红:紫:蓝:绿=9:8:6:3:4:6

由上述比例可推导出各对补色的明度比例关系,并进一步确定各补色之间达到色彩力量平衡的面积比例关系:黄:紫=1:3 橙:蓝=1:2 红:绿=1:1

色彩面积比例关系依据的原理是人视觉生理需求的色量平衡,即调和出视觉乐于接受的中性灰色所需要的色量比例。该平衡理论可以通过色盘的旋转混合的方法得以验证。

从上面的理论看,红绿配色面积比1:1时为和谐,但实际应用中红绿面积相等时会给人以刺激强烈的感受,并不能真正体现出色彩的调和统一,这是由于色彩的纯度在配色中起到相当重要的作用,红色的纯度大约为绿色的两倍,因此在配色时红的面积应缩小至绿

色面积的二分之一,这样才能获得调和的色彩效果。

色彩的秩序调和主要依靠色立体来实现,孟赛尔色立体和奥斯特瓦德色立体都是可应用的色彩模型。在色立体中做规则几何线形,线形所经过的色彩就会形成有序的排列。

色彩的轻重感主要取决于色彩的明度,明度高的色感觉轻,明度低的色感觉重,在相等明度条件下,冷色一般比暖色感觉略轻。色彩构图中上轻下重符合人的 视 觉习惯,轻色通常用于上部,重色用于下部,如果界面上部为重色时,在下部的边缘部位应呼应一块重色范围,可以达到平衡构图的目的。
以语言进行信息传达时,语气、语调以及面部表情、姿态手势是语言的辅助和补充,而在界面设计中,文字的字体、规格及其编排形式,就相当于文字的辅助信息传达手段。

宋体字型结构方中有圆,刚柔相济,既典雅庄重,又不失韵昧灵气,从视觉角度来说,宋体阅读最省目力,不易造成视觉疲劳,具有很好的易读性和识别性。

楷体字型柔和悦目,间架结构舒张有度,可读性和识别性均较好,适用于较长的文本段落,也可用于标题。
仿宋体笔画粗细均匀,秀丽挺拔,有轻快、易读的特点,适用于文本段落。因其字型娟秀,力度感差,故不宜用作标题。
黑体不仅庄重醒目,而且极富现代感,因其形体粗壮,在较小字体级数时宜彩等线体(即细黑),否则不易识别。
圆体视觉冲击力不如黑体,但在视觉心理上给人以明亮清新、轻松愉快的感觉,但其识别性弱,故只适宜作标题性文字。
手写体分为两种,一种来源于传统书法,如隶书体,行书体,另一种是以现代风格创造的自由手写体,如广告体,POP体。手写体只适用于标题和广告性文 字,长篇文本段落和小字体级数时不宜使用,应尽量避免在同一页面中使用两种不同的手写体,因为手写体形态特征鲜明显著,很难形成统一风格,不同手写体易造 成界面杂乱的视觉形象,手写体与黑体宋体等规范的字体相配合,则会产生动静相宜,相得宜彰的效果。

美术体是在宋体、黑体等规范字体基础上变化而成的各种字体,如综艺体、琥珀体。美术体具有鲜明的风格特征,不适于文本段落,也不宜混杂使用,多用于字体级数较大的标题,发挥引人注目,活跃界面气氛的作用。

拉丁字母依据其基本结构可以分为三种类型:
(1)饰线体(Serif):此类字体在笔画末端带有装饰性部分,笔画精细对比明显,与中文的宋体具有近似形态特征,饰线体在阅读时具有较好的易读性,适于用作长篇幅文本段落。代表字体是新罗马体(Times New Roman)。
(2)无饰线体(Sans Serif):笔画的粗细对比不明显,笔画末端没有装饰性部分,字体形态与中文的黑体相类似。由于其笔画粗细均匀,故在远距离易于辨认,具有很好的识别 性,多用于标题和指示性文字。无饰线体具有简洁规整的形态特征,符合现代的审美标准。代表字体是赫尔维梯卡体(Helvetica)。
(3)装饰体(Decorative,也称Display):即通常所说的“花”体,由于此类字体信笺于形式的装饰意味,阅读时较为费力,易读性较差,只适合于标题或较短文本,类似于中文的美术体和手写体。代表字体是草体(Script)。

在某些特殊场合,如广告或展示性的短语中,拉丁字母全部使用小写字母,能够造成一种平易近人的亲切感。

拉丁字母字体大都包含字幅(正、长、扁)、黑度(细、粗、超粗)、直斜的变化,因而由一种基本字型可以变化出多种具有相似特征的同族字体,这些字体统称为“字族”。

同一页面中字体应尽量在同一字族中选用,以保证界面具有明确、统一的风格特征。

在计算机字库中,有关字体特征的表示大多彩缩略语,如Cn(Condensed,长体),Ex(Expanded,扁体),Lt(Light, 细),Med(Medium,中粗),DemBol或Dm(Demi Bold,半粗),Bd(Bold,粗),XBd(Extra Bold,特粗),It(Italic,斜体)等。中文正文的字符数每行以20-35个为宜,西文则约40-70个字符最易阅读,因此较宽的文字幅面应考 虑采用分栏的排布方式。通常设定行距为字高的150-200%,西文的行距通常小于中文行距。

粗细对比是刚与柔的对比,也有人称之为男性性格与女性性格的对比。在同一行文字中使用粗细对比的效果最为强烈。粗字少细字多易取得平衡,给人以明快新颖的感觉,细字少粗字多,则不易平衡,但往往会产生具有幽默感的特殊效果。
界面中文字编排要求视觉上产生类似于天平平衡的印象,失去平衡的文字编排设计,将得不到浏览者的信赖,并给人以粗劣的印象。
可能通过左右延伸的水平线,上下延伸的垂直线,动感的弧线和斜线,穿插的图形来诱导视线依照设计师安排好的结构形式顺序浏览。

在界面的四角配置文字或符号,界面的势力范围就明确地确定下来,界面中即使存在让人感觉动荡不定的元素也会因此而稳定下来。在四角中,左上和右下具 有 特殊的吸引力,是处理的重点,处理得好,可以使界面左右均衡,同时还会形成从左上到右下沿对角线流动的视觉过程,给人以自然稳定的感觉。

非规律性造型形式的错落变化,应出现在周围有较充分的留白空间的场所,效果较为显著。如在界面中央或正上方表现效果较好,标题性文字往往使用此手法处理。

分栏式结构中,文字群体通常只出现在一栏中,每行的字符数相对较少,易于浏览。分栏中如果都排布文字群体,界面会显得十分拥挤,故不宜采用。其他栏 中 可设置目录、标题、导航等简洁的文字信息,整体形式繁简对比,疏密得当。国内使用较多的是三分栏,国外四分栏式结构则较为普遍。

网页界面中除了点、线面这些实体造型元素,其余的空间就是“空白”,空白不一定是“白”,它可以是与背景色相同的表示“虚”的空间范围。空白能使实 体在视 觉上产生动态,获得张力。在中国传统绘画中,空白的表现力丰富,同时又使笔墨生支灵妙,无怪乎古人所说“形得之于形外”,“计白守黑”。页面中巧妙地留 白,讲究空白之美,有助于更好地烘托主题,渲染气氛,集中视线,加强空间层次,使版面疏密有序,布局清晰。

黄金之比所以有如此神圣和不可思议的力量,乃是因为黄金比是含有无理数 的数字,用公式表示为Φ=(1+)/2约=1.618。黄金矩形去掉短边为边长的正方形时,剩下的矩形仍为黄金矩形。

以正方形的对角线为长边,所得矩形为矩形,再以矩形的对角线为长边,所得矩形为矩形,以此类推,可以得到任意自然数的矩形。 矩形对折成半时,面积虽然只剩一半,但形状不变,仍是矩形。

网页界面的版式设计中,其比例关系一般体现在:页面所限定空间的长宽比,实体内容与虚空间(空白)的面积比,页面被分割的比例,图文的关系比以及各造型元素内部的比例等形式上的数量关系。
对称的版式设计稳定、庄严、整齐、秩序、安宁、沉静,如同中国古代宫殿一样庄重、严肃,体现了一种古典主义的风格。为避免对称产生的单调和呆板,要在对称中略带变化。

视觉艺术中的节奏和韵律来自音乐的概念,节奏较多地强调“节拍”,韵律较多地强调“变化”,如果说韵律感不够,是指缺少变化,过于呆板;如果说节奏感不强,是指变化缺乏条理规则。

对比是指因多种元素相异的特点相比较而更加鲜明强烈的紧张感。对比有形的对比(大小、方圆、长短、曲直、宽窄),色的对比(色相、明度、纯度、冷 暖),质的对比(刚柔、粗细、强弱、干湿、轻重、软硬、虚实),势的对比(疾缓、疏密、动静、抑扬、进退)等。对比关系越清晰,视觉效果就越强烈,在一个 页面中,通常是多种对比关系同时并存,以产生多姿多彩的表现效果。
人眼的视线沿水平方向运动比沿垂直方向运动快而且不易疲劳。视线的变化习惯于从左到右,从上到下和顺时针方向运动。
调查显示,视区内上部比下部注目程度高,左侧比右侧更引人注意。

欲使网页在传递视觉信息时顺畅高效,页面须具备清晰的条理性和组织性,产生一定的主从关系。常采取的方式有:
(1)加强主从对象的大小对比。
(2)加大主体形象周围的空白。
(3)加强主从对象之间的色彩对比。
(4)将主体形象在页面反复出现,强化与视线的接触频率,这种强化方式尤其适合于以产品为主体形象的网页界面。
(5)加强主从对象在形态上“势”的对比。一般来说,网页的版面中水平或垂直的形态居多,如果主体形象运用适当的斜线和曲线,就会从水平、垂直线构成的环境中突显出来。

通过视觉流程,设计师运用视觉移动规律,将多种视觉信息进行有序组织,诱导浏者的视线依设计师的意图进行流动,从而使浏览者清晰、流畅、快捷地接受最佳信息。视觉流程的几种表现方式:
(1)单向视觉流程:横向,竖向,斜向。
(2)曲线视觉流程。
(3)导向视觉流程:借助诱导因素来实现。
①线形导向:以线、文字等线形元素来引导观者的视线。
②形象导向:以图片中人或物的朝向来引导观者的视线,如人物的目光方向,一个座椅的朝向等。
③指示导向:通过指示性的箭头、手指或具有透视感的线条来引导视线。
(4)重心视觉流程:视觉会沿着形象方向与力度的伸展来变换、运动,如表现向心力或重力的视线运动。
(5)反复视觉流程:其运动虽不如单向、曲线、重心视觉流程运动感强烈,但更富于节奏和秩序美。
(6)散点视觉流程:没有固定的视觉流动线,强调一种感性、自由性、随意性、偶然性。

对于栏目设置比较复杂的网站,如果显示所有与该页相关的导航,页面势必变得相当庞大,影响了版面的整体布局。最好的办法是将此页面做成弹出窗口,不影响原有页面的导航信息,同时只设置与该页关系最近的导航链接和首页链接。

在视觉习惯上,页面的垂直均匀分割,当左右两部分形成强烈对比时,会造成视觉心理的不平衡。这时,可将分割线作部分或全部的弱化处理,或在分割处加入其他元素,使左右部分的过渡自然而和谐。

周期、关键帧和行为被称为动画的三个属性。
使用简单的GIF动画生成的广告图形,点击率会上升10%-25%,而动画广告的面积平均比静态广告小5%-25%。
动画由于在信息的方向性诱导方面的优势,除了能够加强视线在视觉传达领域的注意外,在引导视线方面能够发挥更大的能动性,引导视线完全按照设计师的意图去浏览,以最快捷的途径,最有效的感知方式获取视觉信息,使设计师能够更有效地影响浏览者的视线运动轨迹。
当人们面对平面上一些静止的物体时,会在它们之间平分其注意力,如果其中一个物体突然动起来,所有的注意力在1/5秒后都将转向它。
人的正常视觉容量约为每秒25比特,即大约每秒4个汉字,每分钟约250个字左右。
动画表达追求的是信息的准确传达,意念的清晰易懂。而做到这一点取决于两个方面:一是动画本身有好的表现手法和设计,使每一个画面或主要变化以最清楚和最 有效的方式呈现出来;二是好的时间掌握。画面转换的时间要恰到好处,太慢则感觉节奏缓慢,在里面寻找不到兴奋点,视觉心理就会感觉空洞、单调,使注意力分 散;太快则浏览者还没看清要传达的信息,动作已经结束,创意没有意义,设计也就失败了。
一般一个页面有1-2个动画区域是比较适度的。如果在页面上必须出现不止一个动画,也应给予较大的区别,如采用面积的大小对比,或使动画的演示有时间差别等。
常见的动画设计效果:
(1)色彩循环动画
(2)元素沿直线或曲线的滚动
(3)元素的跳动与闪动。在跳动后保持5-10秒的静止,这样跳动吸引浏览者的视线,静止则使浏览者能看清图像。
(4)元素的淡入与淡出。
(5)元素飞入画面。
(6)元素的缓慢旋转,通常旋转几周后就停顿一会儿。
(7)元素的爆炸与组合。
(8)闪烁和灯光效果。
(9)元素之间的过渡与变形。将一幅图象的部分或整体毫无痕迹地融入另一幅图象中。

我做的走西口莜面村的界面设计

在这面秀秀我的网页界面设计


这个是主页:

ndex.jpg

下面的这个是内容页,其实也是当列表页用的。导航什么的变化比较大,客户要求的,嘿嘿。

ye.jpg

上面的是最终定稿。下面的是飞机的,也发出来看看喽。

这个和首页的风格比较统一,可能是简单了点。被枪毙了。。。。。。

ziye2.jpg

下面的这个就很囧了,比较丑,是一个过渡型的牺牲品

ziye3.jpg

大家有什么看法别吝啬在下面留言啊,虽然不会再改了,但还是很希望看到您的建议的,因为我在这方面还很年轻。

这个网站的预览地址:http://www.zxkhotel.com我只做的界面,实现虽然我也可以做,但这个不是我做的。

常用英文设计字体介绍及下载

下面的设计字体介绍排名不分先后,不是说先介绍哪个哪个就是最好的。但他们有一个共同的特点:优秀!

1,Lucida Grande字体

Lucida Grande是一种西文无衬线字体,是苹果公司操作系统Mac OS X的默认西文

字体。它的设计师是查尔斯·毕格罗(Charles Bigelow)和克里斯·霍尔姆斯(Kris Holmes),是Lucida字体家族的一员,采用苹果与微软共同制定的TrueType标准

Lucida Grande 字体范例

4651a71214ec1be6c3fd781e.jpg

拓子博客下载地址:Lucida_Grande.rar (134)

网盘下载地址:Lucida_Grande字体下载.rar

2,Affliction字体

Affliction字体有一种做旧的复古感,可以在很多地方,适合需要大一点字的地方。

我们看下预览效果。这个预览图比上面的大,吼吼。

affliction.jpg

拓子博客下载地址:font-affliction (90)

网页切图过程中xhtml+css命名规则

网页切图过程中div+css命名规则

内容:content/container 导航:nav 侧栏:sidebar    
栏目:column 标志:logo 页面主体:main   
广告:banner 热点:hot 新闻:news
下载:download 子导航:subnav 菜单:menu
搜索:search 页脚:footer 滚动:scroll
版权:copyright 友情链接:friendlink 子菜单:submenu
内容:content 标签页:tab 文章列表:list
注册:regsiter 提示信息:msg 小技巧:tips
加入:joinus 栏目标题:title 指南:guild
服务:service 状态:status 投票:vote
尾:footer 合作伙伴:partner 登录条:loginbar
页面外围控制整体布局宽度:wrapper 左右中:left right center   

(二)注释的写法:
/* Footer */
内容区
/* End Footer */

(三)id的命名:

(1)页面结构
容器: container 页头:header 内容:content/container
页面主体:main 页尾:footer 导航:nav
侧栏:sidebar 栏目:column 左右中:left right center
页面外围控制整体布局宽度:wrapper

(2)导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu 子菜单:submenu 标题: title 摘要: summary

(3)功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright

(四)class 的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2) 字体大小,直接使用”font+字体大小”作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用”类别+功能”的方式命名,如
.barnews { }
.barproduct { }

注意事项:
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写,除非一看就明白的单词.
主要的 master.css 模块 module.css 基本共用 base.css
主题 themes.css 专栏 columns.css 打印 print.css
文字 font.css 表单 forms.css 补丁 mend.css
布局,版面 layout.css

制作带图片的导航(界面设计教程1)

在这个教程中你将看到一个带图片的导航时如何产生的,

我博客的所有原创教程都会有psd源文件下载,这个教程的源文件下载地址是
好,我们开始啦。

1,新建860px×400px新文档

111.jpg

2,ctrl+j复制一下背景层,加如下图层样式。

222.jpg

3,选择圆角矩形工具画如下,并生成选区。
333.jpg

4,导入图片,反选删除可得到

444.jpg
5,为导航添加背景,可以通过也下方式实现:

按着ctrl不放,点击图片图层生成选取区,然后点击矩形选区工具,选择从选区中减去 555.jpg

可以到得

666.jpg

然后ctrl+J生成新图层,命名为bg,填充黑色,改变不透明度(80%左右)。

777.jpg

6,为bg图层添加一些样式,其实是一些细节,你可能发现变化并不明显,而好的效果就是这样一个又一个小细节的累加。
888.jpg

999.jpg

这时的图片:
1111.jpg

接下来我们在顶部为其添加一点高光效果,

ctrl点击bg图层生成选取,新建图层,填充#ffffff,命名为highlight。收缩1px,delete,再选取两边多余的,delete改图层lighlight样式为柔光

2222.jpg

再为其添加下面的

打开bg的图层混合选项,添加如下样式

3333.jpg

4444.jpg

5555.jpg

这里面的一些具体数值是不必深究的,你可以再根据自己喜好调整,看教程要学的是一种思路或一种方法而不是一连串的数据。

建立以下选取,方法上面已经介绍过的,方法也很多。之后填充#525c52,当然也不一定非得这个颜色不可,这只是一个比背景色浅一点的颜色。进行如下图层选项设置
6666.jpg

7777.jpg

8888.jpg

加上导航文字后的效果的完成效果图

9999.jpg

如果有兴趣学习本教程您可能会用到的资源:

1,导航字体:Lucida_Grande.rar (134)

2,psd源文件:a,网盘下载地址:点击下载 b,博客下载:nav-1 (79)

本文地址:http://www.tuozi.net/2010/04/%E5%88%B6%E4%BD%9C%E5%B8%A6%E5%9B%BE%E7%89%87%E7%9A%84%E5%AF%BC%E8%88%AA%EF%BC%88%E7%95%8C%E9%9D%A2%E8%AE%BE%E8%AE%A1%E6%95%99%E7%A8%8B1%EF%BC%89/ 转载请注明出处,谢谢。