SEARCH
新闻资讯

网站知识库

基础网站视觉设计

2020/3/6 19:03:45

在当代生活中,有一些基本的想法根深蒂固,以致我们很难发现它们的普遍性并且熟视无睹。“模块和程序”的概念-样式重 复的规则构建块,当结合在一路时会创造出一个有序的团体一对我们的信 息时代的生活的渗透度要远高于其对我们的祖先在由Eli Whitney等制造业发明家提议的工业革命时代的生活的渗透度。


 
随着工业世界变得越来越复杂,19 世纪中期的文档设计者们开始将模块程序应用到报纸、产品目录、财务会计以及其他的出版物中,当代页面样式诞生了。在20世纪早期,Bauhaus 设计师们采用视觉逻辑元素-一这是由Gestalt知觉心理学家发现的,那些德国和瑞士设计师创造了当代图形设计)。
 
图形设计的重要目的在于:
 
●创建个清晰的视觉对比层级, 这样就可以一 眼看清什么是紧张的 以及什么是次要的。
 
●为页面定义功能区。
 
●对相干的页面元素进行分组,这样就可以看清内容的结构。
 
●一个简单的页面网格可以确立离散的功能区域,适度的负空间(negative space)定义了页面的图形背景关系。使用页面样式的惯用原则来设计页面,用户可以轻易地展望重要内容和功能元素的位置。
 
●拥挤的页面会由于创建了视觉纹理的模糊区域而让页面的图形背景关系变得紊乱,其对比少而无法吸引欣赏者的眼球,地标过少会不利于用户理解内容组织结构。
 
●拥挤的元素同时也造成了1 + 1=3的结果,增长了视觉紊乱。
 
●在为菜单列表、内容列表、页面题目图形以及其他设计元素设计HTML和CSS时,要时常考虑在页面,上创建的图形的间距、分组、相似性以及团体视觉逻辑,这样才能容易地提供清晰的结构,而不是让人感觉紊乱的细节。
 
相近以及同一-的连贯性是页面设计中功效最壮大的Gestalt原则;在定义区城中经过分类的元素是内容模块和“分块”网络内容的基础,以便轻松欣赏。一个组织优秀且内容分类清晰的页面,用户一眼看去便可知道内容是如何组织的,它建立起了内容模块单元,进而组成了贯穿整个网站的各页面的可预见模式示。
 
一致性
 
创建一个用来处理文本和图形的布局网格和样式,然后一向使用该样式来创建贯穿网站页面的节奏和一致性。重复并不会令人讨厌;重复让你的网站拥有了一致的图形形象,它创建并增强了明显的“空间”感,网站会让人过目难忘。布局和导航采用一致性的方法,会让用户快速适应网站的设计并能自傲地展望网页信息的位置以及导航控件的位置。
 
假如选择了一个图形主题,那么请将其贯穿于整个网站。Hiram 学院网站首页横幅广告为网站设立了图形主题,并引人了独特的版式以及一系列导航标签。注重版式和导航主题是如何传递到内部的横幅广告的。在欣赏整个网站时,你不会产生“这是谁的网站”的疑心。
 
对比
 
图形设计的重要义务是创建一个强有力的、一致的视觉层级结果,其中,紧张元素会突显,内容也是以逻辑且可展望的方法进行组织的。图形设计是对视觉信息的管理,使用页面设计工具、版式以及插图来指导读者进行页面欣赏。读者首先会把页面看成是图形和颜色的聚集体,包含着前景元素与背景的对比。然后,他们开始遴选特定信息,首先从现有的图形开始,并且在这之后,他们才会开始分析更难的文本序言并开始阅读单个的词语和段落。
 
团体的图形平衡和页面的组织对吸引读者阅读网站内容至关紧要。一个全是文本的页面会由于其毫无差别的灰色而将读者拒之门外,这样的网页没有对信息架构的显明提醒。一个设计不精或者充斥着过于醒目的图形或版式的页面,也会导致用户丧失追求实效性内容的爱好。你必须要通过利用恰当的相邻物、分组、图形背景关系以及题目对比中的转变,达到使用视觉对比吸引读者眼球并提供一个清晰的架构之间的平衡。视觉平衡和适当性对预期的观众而言,是成功的设计决定的关键。对通俗观众而言,最有用的设计就是使用相对小的图形来实现文本和链接之间的郑重平衡。这些页面不仅能够快速下载,而且还拥有特别很是实质的图形结果。
 
1.版式中的颜色和对比
 
颜色和对比是通用可用性的关键组成部分。文本的可读性取决于读者区分字体和背景的能力。颜色转变重要取决于通亮度和饱和度。白色背景上的黑色文本拥有最强的对比度,这是由于黑色没有通亮度而白色是全明度。色调也是一个因素,诸如蓝色和黄色这样的互补的颜色,会产生最强的对比。确保颜色选择不会让读者难于区分笔墨和背景。同时,万万不要忘掉差不多有10%的男性读者在区分邃密的红绿色阴影时有肯定困难。
 
2.对比的可变性
 
使用移动设备表现的网页,通常会因移动环境而做出让步:小屏幕,小字号,缺乏理想的屏幕分辨率和颜色,假如在户外环境下,阳光或其他照明设备所发出的光还会降低网页的可读性。现实上,许多的便携式电脑的表现屏并不能表现很好的颜色差别或明暗度差别,通过电脑投影仪看到的页面上的颜色通常也会变淡。请使用不同的设备和便携式电脑,并在不同的环境中检测你的设计,尤其是当你使用玄妙的颜色来定义紧张的页面功能或内容的时候。总的来说,最好采用一个更有用、高对比度的版式颜色方案。
 
3.避免过度对比
 
水平标尺、修饰性图形项目符号、明显的图标,以及其他视觉标识,都拥有各自的特别场合的用途,不过每一-样都要尽量地少用(假如真要用的话)以避免出现不调和及紊乱的样式。图形强调工具十分壮大,应当只是少量使用以获取最大的结果。过度使用图形增强结果将产生“小丑裤子”(过犹不及)的结果,即所有的统统都是那么夸耀,反而没有任何重点可言了。
 
从大天然中遴选出来的颜色调板几乎是绝对可靠的颜色和谐的领导,尤其是当你并非一个受过训练的图形设计师的时候。玄妙的、不饱和度的颜色是背景或次要元素的最佳选择。避免使用醒目的、高饱和度的红色、黄色、蓝色,除非在针对最必须要增强的区域,但即便是这时也应郑重使用。
 
空白区域
 
现今,我们拥有更大的表现屏以及更为复杂的图形界面,因此你的网页很可能会与许多其他窗口和桌面元素共享.个表现屏。 请使用空白区域以避免让欣赏器窗口的边缘挤满了页面内容的紧张元素。在固定宽度的布局中,可以考虑将页面德存在欣赏器窗口的中间。假如你的页面宽度合理,这种方式将会让你的页面看上去有视觉放松的结果,即便是在一个拥挤的电脑表现屏上,如图7-13a所示。对“弹性的”布局而言,可以考虑使用90% ~ 95%的屏幕大小的页面来庖代100%的全屏页面,让页面功能区域四周留些背景以达到视 觉放松的结果,避免与欣赏窗口外的元肃相互作用产生不成功的“1+ 1=3”的结果。
 
有助于将页面内容从表现屏上的其他程序和窗口的“喧华声”中隔离出来所有的图形设计从根本上而言都是对空白区域(页面上所有图形元素后面的背景)的管理。要想理解图形设计,你必须要去体会,页面元素四周的背景区域是与页面上任何图形元素一样有用且紧张的设计部分。将页面上的空白区域填满就好比抽空了一个房间的所有氧气一这或许是对空间的逐一种有用应用方法,但毫无疑问这是很难让人风俗的。
 
样式
 
不要想着为你的网站开发一个“样式”,在引人另一网站或是印刷品的图形元素来装饰你的页面时也要郑重。在对内容和页面布局进行一致和恰当的处理时,网站的图形和编辑样式也应随着这一天然的过程有所演变。多使用传统而非古怪的风格,绝不要让框架压服了内容,并记住最好的样式就是读者永久不会注重到的样式一每样东西都让人感觉那么有逻辑且恬逸(甚至是漂亮),而笨手笨脚的设计绝不会让用户拥有这样的体验。
 
简单
 
所有效户都会受益于清晰且致的网站设计,而对某些用户而言这至关紧张。对于那些缺乏空间线索,使用彻底不同且必须要针对每个站点重新学习的导航方法,有视觉停滞的用户会很容易产生紊乱或者在网页中迷失。对那些在认知上有缺陷的人而言,诸如记忆或学习有停滞的人,这一难度会被放大许多倍。





如没特殊注明,文章均为成都网站建设公司唯赛网络原创,转载请注明来自http://www.weseo.cn/News/knowledge_675_11216.html

Contact

ADD:成都市青羊区光华东三路西环广场6楼

TEL:028-64232097

Wechat

微信二维码