- 网站布局与网页配色设计
- 张晓景
- 3730字
- 2020-06-24 22:33:18
1.3 网站设计原则
网站作为传播信息的载体,也要遵循设计的基本原则。但是,由于表现形式、运行方式和社会功能的不同,网站设计又有其自身的特殊规律。网站设计是技术与艺术的结合,内容与形式的统一。
1.3.1 以用户为中心
以用户为中心的原则实际上就是要求设计者要时刻站在浏览者的角度来考虑,主要体现在以下几个方面。
1.使用者优先观念
无论什么时候,不管是在着手准备设计网站界面之前、正在设计之中,还是已经设计完毕,都应该遵循一个最高行动准则,就是使用者优先。使用者想要什么,设计者就要去做什么。如果没有浏览者光顾,再好看的网站界面都是没有意义的。
2.考虑用户浏览器
如果想让所有的用户都可以毫无障碍地浏览页面,那么最好使用所有浏览器都支持的格式,不要使用只有部分浏览器支持的HTML格式或程序技巧。如果想展现自己的高超技术,又不想放弃一些潜在的观众,可以考虑在主页中设置几种不同的浏览模式选项(如纯文字模式、Frame模式、Java模式等),供浏览者自行选择。
3.考虑用户的网络连接
浏览者可能使用ADSL、高速专线或小区光纤。所以,在设计网页时必须考虑用户的网络连接,不要放置一些文件量很大,下载时间很长的内容。网站界面设计制作完成之后,最好亲自测试一下。
必胜客官方网站,应用不规则的页面排版布局形式展现网站的内容,给人眼前一亮的感觉,应用不规则、大小不等的小方块来展现产品,操作方便、直观,突破传统的网页排版布局形式,从而给浏览者留下深刻的印象。
1.3.2 主题明确
网站设计表达的是一定的意图和要求,有明确的主题,并按照视觉心理规律和形式将主题主动传达给浏览者,以使主题在适当的环境中被人们及时地理解和接受,从而满足其需求。这就要求网站页面设计不但要单纯、简练、清晰和精确,而且在强调艺术性的同时,更应该注重通过独特的风格和强烈的视觉冲击力来鲜明地突出设计主题。
CHANEL(香奈儿)官方网站采用了极其简约的设计风格,只突出了两个元素,一个是品牌,另一个就是主打产品。每个国家的网站除了语言不同以外,其他的元素基本都保持不变,这是由CHANEL的品牌形象识别系统决定的。
CHANEL是世界知名的化妆品及服饰品牌,在大众人群中已经建立了一定的企业形象,所以页面采用极其简约的视觉设计风格,通过黑色的背景色搭配白色的文字以及产品广告图片,表现出高贵的企业形象,重点突出其旗下主推产品。
根据认知心理学的理论,大多数人在短期记忆中只能同时把握4~7条分类的信息,而对多于7条的分类信息或者不分类的信息则容易产生记忆上的模糊或遗忘,概括起来就是较小且分类的信息要比较长且不分类的信息更为有效和容易浏览。这个规律蕴含在人们寻找信息和使用信息的实践活动中,设计师的设计活动必须自觉地掌握和遵从这个规律。
这是某手机品牌的官方宣传网站设计,页面采用比较简洁的设计方式,通过满屏的大幅宣传广告来突出最新的展品展示,给浏览者直观的产品印象,而在下方的网站新闻等相关栏目中,分两栏放置了8条最新的信息内容,并且采用图文相结合的方式,使用户更容易浏览。
网站设计属于艺术设计范畴的一种,其最终目的是达到最佳的主题诉求效果。这种效果的取得,一方面要对网站主题思想运用逻辑规律进行条理性的处理,使之符合浏览者获取信息的心理需求和逻辑方式,让浏览者快速理解和吸收;另一方面还要对网页构成元素运用艺术的形式美法则进行条理性的处理,以更好地营造符合设计目的的视觉环境,突出主题,增强浏览者对网页的注意力,增进对网页内容的理解。只有这两个方面有机统一,才能实现最佳的主题诉求效果。
该运动品牌网站页面运用了三维设计风格,在我们心目中,人物肯定是要占据空间的,因此网页的背景就自然而然地被拉远了。在该页面中同时将运动人物放置在页面的中间位置,并且垂直方向上占据整屏的空间,仿佛运动人物是活动的,要冲出页面,给人很强的视觉冲击力。运动人物素材的运用还充分突出了该网站主题的表现,使网站内容与表现形式有效统一。
一般来说,可以运用网页的空间层次、主从关系、视觉秩序及彼此间的逻辑性,来使网站界面从形式上获得良好的诱导力,并鲜明地突出诉求主题。
专家提示
优秀的网站界面设计必然服务于网站的主题,也就是说,什么样的网站应该有什么样的设计。例如,因为设计类的个人网站与商业网站的性质不同,目的也不同,所以评论的标准也不同。网站页面设计与网站主题的关系应该为:首先设计是为主题服务的;其次设计是艺术和技术结合的产物,就是说,既要“美”,又要实现“功能”;最后“美”和“功能”都是为了更好地表达主题。当然,在某些情况下,“功能”就是主题,“美”就是主题。
1.3.3 视觉美观
网站设计首先需要吸引浏览者的注意力,由于网页内容的多样化,传统的普通网页不再是主打的环境,交互设计、多媒体内容、三维空间等形式开始大量在网站设计中出现,给浏览者带来不一样的视觉体验,给网站界面的视觉效果增色不少。
这是某服装品牌的活动页面,将品牌形象与活动主题卡通形象相结合,在页面中着重使用流畅的交互动画效果来吸引浏览者,并且为页面搭配相应的音乐,给浏览者带来全方位的视听感受,页面中色彩的搭配则主要以简洁为主,通过红色来突出展现页面中的重要信息。
在设计网站时,首先需要对网站页面进行整体规划,根据网站信息内容的关联性,把页面分割成不同的视觉区域;然后再根据每一部分的重要程度,采用不同的视觉表现手段,清楚网页中哪一部分信息是最重要的,什么信息次之,在设计中才能给每个信息相对正确的定位,使整个网站结构条理清晰,并综合应用各种视觉效果表现方法,为用户提供视觉美观、操作方便的网站界面。
1.3.4 内容与形式统一
任何设计都有一定的内容和形式。设计的内容是指它的主题、形象、题材等要素的总和,形式就是它的结构、风格设计语言等表现方式。优秀的设计必定是形式对内容的完美表现。
一方面,网站页面设计追求的形式美必须适合主题的需要,这是网站界面设计的前提。只追求花哨的表现形式以及过于强调“独特的设计风格”而脱离内容,或者只求内容而缺乏艺术的表现,网站页面设计都会空洞无力。设计师只有将这两者有机地统一起来,深入领会主题的精髓,再融合自己的思想感情,找到完美的表现形式,才能体现出网站页面设计独具的分量和特有的价值。另一方面,要确保网页上的每一个元素都有存在的必要性,不要为了炫耀而使用冗余的技术,那样得到的效果可能会适得其反。只有认真设计和充分考虑来实现全面的功能并体现美感,才能实现形式与内容的统一。
该网站是专门推介台湾茶品的网站,因为网站的内容并不多,所以整个网站运用交互动画的形式,以精美的茶品广告画面作为背景,配合半透明的底色和文字内容介绍,给人舒适、静心的感觉,达到了内容与形式的完美统一。
网站页面具有多屏、分页、嵌套等特性,设计师可以适当变化其形式,以达到多变的处理效果,丰富整个网站页面的形式美。这就要求设计师在注意单个页面形式与内容统一的同时,也不能忽视同一主题下由多个分页面组成的整体网站的形式与整体内容的统一。因此,在网页设计中必须注意形式与内容的高度统一。
该食品的宣传网站设计充分体现出内容与表现形式的统一,网站中的每个页面都采用了相同的版式和主色调进行设计,页面中标志、导航和主内容区都出现在各子页面中的相同位置,并且采用了相同的设计方式。界面设计中较高的一致性表现,能够有效提升产品的可用性,使用户能够快速掌握该网站的操作。
1.3.5 有机的整体
网站的整体性包括内容和形式上的整体性,这里主要讨论设计形式上的整体性。
网站是传播信息的载体,它要表达的是一定的内容、主题和观念,在适当的时间和空间环境里为人们理解和接受,它以满足人们的实用和需求为目标。设计时强调其整体性,可以使浏览者快捷、准确、全面地认识它、掌握它,并给人内部联系紧密、外部和谐完整的美感。整体性也是体现网站界面独特风格的重要手段之一。
网站页面的结构形式是由各种视听要素组成的。在设计网站页面时,强调页面各组成部分的共性因素或者使各个部分共同含有某种形式特征,是形成整体的常用方法。这主要从版式、色彩、风格等方面入手。例如,在版式上,全盘考虑界面中的各视觉要素,以周密的组织和精确的定位来获得页面的秩序感,即使运用“散”的结构,也要深思熟虑之后才决定;一个网站通常只使用两到三种标准色,并注意色彩搭配和谐;对于分屏的长页面,不能设计完第一屏,再去考虑下一屏。同样,整个网站内部的页面,都应该统一规划、统一风格,让浏览者体会到设计者完整的设计思想。
该运动品牌促销页面运用了插画的设计风格,将时尚的运动人物与卡通手绘插画背景相结合,运动人物与插画背景设计浑然天成,且运用得恰到好处。产品图片放置在主题图片的下方,在我看来,这就是主题设计与传统设计的完美平衡。
该游戏介绍的专题页面设计中摒弃了以往游戏页面的传统表现风格,而是使用同色系不同明度的蓝色调将整个页面从上至下划分为多个不同的内容区域,在每部分内容区域中,又综合运用图文结合和色彩对比的手法,使得页面结构层次非常清晰。
技巧点拨
从某种意义上讲,强调网站界面结构形式的整体性必然会牺牲灵活的多变性,因此,在强调界面整体性设计的同时必须注意,过于强调整体性可能会使网站界面呆板、沉闷,以致影响浏览者的兴趣和继续浏览的欲望。“整体”是“多变”基础上的整体。