教学课件42 网页视觉设计元素.ppt

《教学课件42 网页视觉设计元素.ppt》由会员分享，可在线阅读，更多相关《教学课件42 网页视觉设计元素.ppt（17页珍藏版）》请在三一办公上搜索。

1、,网页视觉设计元素,授课教师：肖文婷,【文字】目前较为典型的几款中文屏幕字体包括方正兰亭黑、微软雅黑、苹果丽黑、信体黑。,四款不同的黑体在相同字号、字距下的比较,1、字体分类衬线算是一种辅助线的小细节，左边的是有衬线字体，在标注的地方多出一些装饰，这样就可以清晰地分辨字母和文字。在字体设置较小的时候，会受到衬线的影响，分辨不清晰。同时，它是中文系统默认字体是宋体，太大篇幅使用会引起审美疲劳，所有有衬线字体适合打印文字及正规文档中使用，通常不适合使用在网页中。而右边的字体是无衬线字体，没有边角的装饰，看起来比较整齐光滑，比较适合在网页中使用，让浏览者获取大量文字信息的时候不会疲劳。,有衬线字体与

2、无衬线字体对比,2、字体系列字体之间的差异除了有衬线与无衬线的差异，同一类型里还有字体形体的差异。主要分为几个系列。（1）衬线字体。Times New Roman 是默认的有衬线字体，中文字体是宋体、仿宋之类的字体；（2）无衬字体。Arial 是默认的无衬字体，中文字体是微软雅黑、黑体等这类字体；（3）等宽字体。Courier 是默认的等宽字体，而中文汉字都是等宽的；（4）手写字体。风格比较个性，通常用于标题、标志等。这个系列没有默认字体，英文字体常用Comic Sans，中文的话，行书系列、草书系列的字体等，都可以算作手写字体。（5）装饰字体。极具个性，字体繁多。在网页设计中很少用到，除非特

3、殊创意性的设计。,中英文相同字体的不同特征,3、字体的选择（1）使用经典通用字体不同操作系统都有不同的字体系统，但经典老牌字体都会共同存在于各个系统。例如无衬线字体的Arial，早期就被Windows操作系统使用，直接在CSS中申明使用。CSS可以在一个网页中，声明指定多个字体，这样当写在前面的字体，在当前操作系统中没有的话，就会使用后面字体顶替。（2）字体大小选择在 CSS 中，最常用的描述字体大小的单位有两个：em、px。通常认为 em 为相对大小单位，px 为绝对大小单位。注意：在字体单位中，一般都是偶会出现，如12px、14px、16px等，为什么不是单数的11px、15px？这涉及到

4、显示器处理文字的锯齿问题，所以默认的通常使用偶数大小。,（3）字体颜色选择在网页中的文字通常使用黑色或灰色。不要随意使用其他特殊颜色，如搜索引擎中搜索结果的色彩搭配很经典，百度关键词搜索如图4-12所示。同时，在网页设计中还要注意背景与字体之间的关系，除了常规白底黑字的对比颜色字体。有背景图也要注意字体颜色与背景图的颜色搭配。,【图形图像】网页界面设计中的图形图像主要分为以下几类：从呈现方式上看，可以分为静态图形图像和动态图形图像。动态图形图像指具有画面内容具有动态效果，具有链接、交互功能的图形图像，反之则使静态图形图像。从技术呈现来看，网页界面中的图形图像可以分为位图和矢量图形。位图和矢量图

5、形的技术实现手段不同对网页界面设计的有一定的影响。从运用方式看，最常运用的图形图像形式有：内容展示性图形图像，如产品图片；功能性图形图像，如导航、图标、LOGO等；装饰性图形图像，如网页背景图片等。读者如何选择符合气质的图片放到你的网页界面中去呢？以企业品牌和产品介绍类网站来介绍两个选图原则：,1、提炼关键词寻找图片 通过提炼产品特性关键词，以关键词的形式来寻找合适的图片作为背景图。,联想官网,2、图片品牌化 通过关键词寻找到一系列的图片进行深度加工和处理，整套图片要色调、饱和度和风格统一。,美国高通中国官网,【色彩】色彩是人类视觉所能感知的、客观存在的物象，是人类认识事物的重要媒介之一，也是

6、表述情感的媒介之一，不同的色彩配置组合所呈现的色彩效果，具有直观的感染力。网页UI设计师也可以利用这种色彩情感的特征，强化网站的视觉形象，体现企业内涵，反映产品气质。在色彩应用中有很多专业术语，通常把颜色分为几种不同模式：位图模式（Bitmap）、灰度模式（Grayscale）、双色调模式（Doutone）、索引颜色模式（IndexColor）、RGB模式、CMYK模式、Lab模式、多通道。在网页设计时，主要使用的RGB模式，在屏幕上重新生成多达1670万种颜色。要实现有效的网页配色方案，UI设计师必须要有一些基本的理论方法，掌握通过颜色互补、色彩对比和色彩的活跃度来使网页的色彩搭配来达到和谐

7、和准确。有时候，产品和服务将有助于确定基调或主要颜色，但如何更好传递信息，通常由UI设计师的想象力和设计灵感来决定。,【布局】网页的布局设计是根据网站的内容和建站目的，运用版式设计原理，将页面上的视觉元素进行合理配置与表现的过程。布局的过程不是简单地摆放网页元素，而是为网页建立秩序的过程，设计师要综合考虑页面信息传递的清晰性、合理性，同时还要考虑视觉形态的美化，便于用户浏览。1、图版率图版率是指占据版面的图片与整个页面的面积比。这个比例在布局样式中很重要，如果一个页面中全是文字，没有图片，那么图版率就是0%；如果一个页面全是图，没有文字，那么图版率就是100%。图版率高的页面生动，有吸引力，有

8、视觉冲击力，反之则容易导致浏览者注意力下降。高图版率的网页界面设计也是目前流行的设计风格，配合少量文字，提升界面的设计感与品质感。,2、网格的约束率 网格是网页版面划分有效的方法，可以实现信息的清晰化，易于阅读。网格系统为设计师提供了一个逻辑严谨的模板，通常在排版时会依赖操作软件中的网格辅助。网格的约束率是指网页上的图文信息在排版时依赖网格的程度，严格遵循网格的约束率高，反之则约束率低。约束率高的网页严谨、理性，约束率低的网页自由、感性。网页的约束率的程度与网站本身的类型、功能及规模有较大关系，通常门户类、新闻类、资讯类网站一般受网格的约束率高。设计师可以根据项目的实际情况从视觉和情感的角度利

9、用网格的约束率，从而帮助网页界面形成强烈的秩序感。3、跳跃率 跳跃率就是大小比例，它受到网站的类型和功能的影响较大，它包含文字跳跃率与图片跳跃率两个方面。文字的跳跃率是指以正文为基准，同一版面文字之间的字号大小比率。而图片的跳跃率是以最小面积为标准，与最大面积图片的比率。在网页的界面设计中包含了导航栏文字、板块标题文字、文章标题、正文等，不同功能与类型的界面在进行版面设计时会有不同字号大小所造成文字的跳跃率。通常高文字跳跃率的页面会显得活跃，而文字跳跃率低的页面会显得沉闷。,4、布局样式（1）顶部大图+简单栅格这种布局设计干净利落，有足够的视觉冲击力，常常采用响应式的设计。顶部大面积的轮播图。

10、在这种布局中，每个元素都各司其职，整个流程逻辑性强，顶部大图有足够空间渲染气氛。（2）单页设计/单栏布局这种布局形式非常适合展示极简内容，或者专注呈现一个主题，一般应用于小型网站或者小型项目的展示。采用这种布局模式的时候，空间的控制至关重要，这对网页设计师对页面留白与布局平衡的功力，同时配合合适的动态效果设计与时差滚动，可以让单页设计更加有趣生动，赋予页面更强的生命力。,（3）自定义栅格栅格具有组织性的优势，对于用户来说，它具有规律性和可预期性。一个漂亮干净的栅格系统不进可以同时呈现大量的视觉化内容，同时用户也可以更快地找到所需内容。栅格系统容易让人视为卡片元素，加入翻转等各式动态效果，能呈现

11、出更多信息和视觉层次。（4）F式布局研究表明，用户在浏览网页的时候，习惯于沿着F式的阅读轨迹来浏览信息，也就是说，用户喜欢从左到右阅读，然后向下移动，再继续从左到右阅读。这种F式的阅读模式对应的网页布局就是F式布局，最关键的信息靠左显示，从上到下尽量保持在一条线上。（5）极简分层 极简化的页面因其开放轻松的版式风格，给用户轻便放松的感觉，所以一直成为网页界面设计的流行风格。如果极简化的页面中可以加入几个并列的内容层，或者采用微阴影、微渐变的效果处理，能让信息更有层次，强化元素的层次感。,5、动态效果网页中的动态元素是展示信息的另一个层面，是用动态的方式实现信息传递的手段。从早期的GIF动画到风靡一时的Flash动画，到Java Script动态，再现在流行的HTML5动画、CSS动画等，网页上实现动态展示的技术得到不断丰富。这些动态效果在帮助用户使用产品的同时，也给用户提供了一种有趣的视觉感受。从网站前期规划来看，丰富灵活的动态效果可以更好地吸引用户的注意力。不管是传统的网页动画还是现代的交互动画，都会对用户浏览造成影响。好的动态设计会提高网页的信息的传达效率，强化网页的视觉效果。,Thanks,