




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
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)自定义栅格栅格具有组织性的优势,对于用户来说,它具有规律性和可预期性。一个漂亮干净的栅格系统不进可以同时呈现大量的视觉化内容,同时用户也可以更快地找到所需内容。栅格系统容易让人视为卡片元素,加入翻转等各式动态效果,能呈现出更多信息和视觉层次。(4)f式布
11、局研究表明,用户在浏览网页的时候,习惯于沿着f式的阅读轨迹来浏览信息,也就是说,用户喜欢从左到右阅读,然后向下移动,再继续从左到右阅读。这种f式的阅读模式对应的网页布局就是f式布局,最关键的信息靠左显示,从上到下尽量保持在一条线上。 (5)极简分层 极简化的页面因其开放轻松的版式风格,给用户轻便放松的感觉,所以一直成为网页界面设计的流行风格。如果极简化的页面中可以加入几个并列的内容层,或者采用微阴影、微渐变的效果处理,能让信息更有层次,强化元素的层次感。5、动态效果网页中的动态元素是展示信息的另一个层面,是用动态的方式实现信息传递的手段。从早期的gif动画到风靡一时的flash动画,到java script动态,再现在
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 车辆安全技术研发与应用共享合作协议
- 2025年茶艺师职业技能鉴定考试题及答案
- 互联网厂房转租及创新创业项目合作协议
- 成品油运输质量监控与责任承担合同
- 车辆运输与车辆租赁及保险服务协议
- 工程资料报验程序
- 64872-鲍新中-物流成本管理(微课版第2版)-习题参考答案
- 医保基金长效管理制度
- 呼叫中心网络管理制度
- 工地人员调休管理制度
- 精装分包劳务合同协议书
- 2025-2030中国酸奶冰淇淋市场需求前景预测及投资效益盈利性研究报告
- 2025年高考英语应用文第09讲 读后续写分话题万能结尾满分句(讲义)
- 2025年四年级下册美术期末测试题附答案
- 图像编辑基础Photoshop试题及答案
- 新媒体国企面试题及答案
- 宝宝改姓夫妻协议书
- 宣城汽车精密零部件项目商业计划书
- 2021入河(海)排污口三级排查技术指南
- 央企华润集团杭州片区年度品牌传播策略案
- 行为:2024年全球影视报告-YouGov
评论
0/150
提交评论