UI设计——创意表达与实践全套配套课件肖文婷配套 教学课件4-2 网页视觉设计元素.ppt

《UI设计——创意表达与实践全套配套课件肖文婷配套 教学课件4-2 网页视觉设计元素.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

2、适合在网页中使用，让浏览者获取大量文字信息的时候不会疲劳。有衬线字体与无衬线字体对比2、字体系列字体之间的差异除了有衬线与无衬线的差异，同一类型里还有字体形体的差异。主要分为几个系列。（1）衬线字体。TimesNewRoman是默认的有衬线字体，中文字体是宋体、仿宋之类的字体；（2）无衬字体。Arial是默认的无衬字体，中文字体是微软雅黑、黑体等这类字体；（3）等宽字体。Courier是默认的等宽字体，而中文汉字都是等宽的；（4）手写字体。风格比较个性，通常用于标题、标志等。这个系列没有默认字体，英文字体常用Co

3、micSans，中文的话，行书系列、草书系列的字体等，都可以算作手写字体。（5）装饰字体。极具个性，字体繁多。在网页设计中很少用到，除非特殊创意性的设计。中英文相同字体的不同特征3、字体的选择（1）使用经典通用字体不同操作系统都有不同的字体系统，但经典老牌字体都会共同存在于各个系统。例如无衬线字体的Arial，早期就被Windows操作系统使用，直接在CSS中申明使用。CSS可以在一个网页中，声明指定多个字体，这样当写在前面的字体，在当前操作系统中没有的话，就会使用后面字体顶替。（2）字体大小选择在CSS中，最常

4、用的描述字体大小的单位有两个：em、px。通常认为em为相对大小单位，px为绝对大小单位。注意：在字体单位中，一般都是偶会出现，如12px、14px、16px等，为什么不是单数的11px、15px？这涉及到显示器处理文字的锯齿问题，所以默认的通常使用偶数大小。（3）字体颜色选择在网页中的文字通常使用黑色或灰色。不要随意使用其他特殊颜色，如搜索引擎中搜索结果的色彩搭配很经典，百度关键词搜索如图4-12所示。同时，在网页设计中还要注意背景与字体之间的关系，除了常规白底黑字的对比颜色字体。有背景图也要注意字体颜色与背景

5、图的颜色搭配。【图形图像】网页界面设计中的图形图像主要分为以下几类：从呈现方式上看，可以分为静态图形图像和动态图形图像。动态图形图像指具有画面内容具有动态效果，具有链接、交互功能的图形图像，反之则使静态图形图像。从技术呈现来看，网页界面中的图形图像可以分为位图和矢量图形。位图和矢量图形的技术实现手段不同对网页界面设计的有一定的影响。从运用方式看，最常运用的图形图像形式有：内容展示性图形图像，如产品图片；功能性图形图像，如导航、图标、LOGO等；装饰性图形图像，如网页背景图片等。读者如何选择符合气质的图片放到你的网

6、页界面中去呢？以企业品牌和产品介绍类网站来介绍两个选图原则：1、提炼关键词寻找图片通过提炼产品特性关键词，以关键词的形式来寻找合适的图片作为背景图。联想官网2、图片品牌化通过关键词寻找到一系列的图片进行深度加工和处理，整套图片要色调、饱和度和风格统一。美国高通中国官网【色彩】色彩是人类视觉所能感知的、客观存在的物象，是人类认识事物的重要媒介之一，也是表述情感的媒介之一，不同的色彩配置组合所呈现的色彩效果，具有直观的感染力。网页UI设计师也可以利用这种色彩情感的特征，强化网站的视觉形象，体现企业内涵，反映产品气质。

7、在色彩应用中有很多专业术语，通常把颜色分为几种不同模式：位图模式（Bitmap）、灰度模式（Grayscale）、双色调模式（Doutone）、索引颜色模式（IndexColor）、RGB模式、CMYK模式、Lab模式、多通道。在网页设计时，主要使用的RGB模式，在屏幕上重新生成多达1670万种颜色。要实现有效的网页配色方案，UI设计师必须要有一些基本的理论方法，掌握通过颜色互补、色彩对比和色彩的活跃度来使网页的色彩搭配来达到和谐和准确。有时候，产品和服务将有助于确定基调或主要颜色，但如何更好传递信息，通常由UI

8、设计师的想象力和设计灵感来决定。【布局】网页的布局设计是根据网站的内容和建站目的，运用版式设计原理，将页面上的视觉元素进行合理配置与表现的过程。布局的过程不是简单地摆放网页元素，而是为网页建立秩序的过程，设计师要综合考虑页面信息传递的清晰性、合理性，同时还要考虑视觉形态的美化，便于用户浏览。1、图版率图版率是指占据版面的图片与整个页面的面积比。这个比例在布局样式中很重要，