设计师在设计网页的时候要明确网站的类型,比如企业网站、政府网站或者个人网页,因为不同类型的网页有不同的主题和风格。下面介绍网页设计的原则和要求,希望对你有帮助。

一、网页设计基本原则

满足观众的心理和社会心理需求。

了解不同受众、不同社会阶层的不同心理需求,是网页设计师应该掌握的一个基本原则。在设计一个网页之前,设计者要对所表达的对象的文化背景、审美心理、审美感知等做一系列相应的了解。对于不同的地方,设计师还要了解和学习某些地区的民俗文化现象。只有这样,设计出来的网页作品才能与设计对象产生紧密的联系,实现读者与作品之间的心与心、面对面的交流。

4.分析用户需求,注重内容布局。

设计师在设计网页的时候要明确网站的类别,比如企业网站、政府网站还是个人网页。因为不同类型的网页有不同的主题和风格,所以我们在设计网页的时候不应该篡夺主机的角色,主题也不应该与网站的类别属性相冲突。我们应该合理地选择图片、文字和颜色。所以网页设计的第一步要以用户的需求和网站的类别为基础,所有的设计工作都要围绕这个前提,正确定位,不偏离主题。

3.设计主题定位准确。

网页设计是根据一定的需求有目的地进行的一种策划和预定。它的突出特点是具有相当的限制性和约束性,即受设计主题的限制和约束。网页设计作品应该有自己鲜明的主题,主题目标的鲜明性决定了设计鲜明的个性特征。设计主题的准确定位是设计原则的首要问题。网页的主题是设计传达的主要信息。设计师要充分利用具体的信息进行传达,调动画面中所有的视觉因素,使其发挥最大的视觉效果。设计定位要始终牢牢把握设计主题。

4.网页下载时间不宜过长。

要保证网站有不断增长的点击率,除了有吸引力的内容,还要有更快的下载速度。网页加载速度对于一个网站来说非常重要,直接影响用户的访问体验和满意度。如果2030秒打不开一个网页,一般人是没有耐心的。至少要保证首页尽可能的快。如果没有必要,最好不要用大图,也不要压缩。

5.网页与不同操作系统和浏览器的兼容性。

通常,人们设计的网页是在一个操作系统和浏览器中调试的。在互联网中,有各种各样的操作系统和浏览器,网页中的一些技术和插件在不同的操作系统和浏览器中的效果是不同的,有些甚至根本不兼容,所以要充分考虑网页的兼容性。常见的方法是在不同的操作系统和浏览器中进行测试,以确保最大的兼容性。

为了吸引更多的用户,网站中的信息必须经常更新,例如新闻和图片。同时,由于网站需要经常修改和更新,页面之间的链接有时会断裂。所以要经常调试网站,检查是否有链接错误并修复,维持网站的正常运行。

二、网页界面设计的要求

导航清晰,标题易读。

在设计页面的时候,你要做一个清晰的导航条,让用户尽可能的知道自己在哪里,同时也不要有太多的链接,让用户尽可能的在短时间内找到需要的信息。一个网站的内容主题要突出明确,尤其是大段的使用,一定要让用户容易读懂。除了水平分栏,页面也可以垂直分割,或者文档可以通过标题和副标题来分割。给所有标题和副标题设置相同的字体,标题字体增加一,所有标题和副标题都加粗,这样便于识别标题和副标题,让用户一目了然地看到要点,从而找出并继续阅读感兴趣的内容[4]。此外,还可以用不同的颜色或加粗来突出整个句子的主要内容。字体的选择要与主题风格一致,区分字体和背景的颜色,便于识别。

风格统一,色彩和谐,重点突出。

网站中的每个页面都应该保持统一的风格。不要在不同的页面中使用不同的主题风格。统一的风格有助于加深用户对网站的印象。要达到风格的统一,没必要把每一栏都做得一模一样。比如用户可以尝试让导航栏风格统一,每个栏目采用不同的颜色组合,在保持风格统一的同时给网站增加一些变化。在网页设计中,根据和谐、平衡、强调的原则,将不同的颜色组合搭配,形成漂亮的页面。在设计手法上,突出某一色彩因素,可以打破整体色调的单调和沉闷,再运用一些具有强烈醒目色彩的色彩,可以使画面具有凝聚力和表现力,从而激发视觉趣味,产生生动的色彩形象感。在具体的设计中,要注意关键色彩的作用,需要巧妙运用,不能过度。没有必要处处强调重点,结果只能导致整体混乱。

3.界面清爽,设计避免“泛化”。

干净清爽的页面设计在艺术表现上起着重要的作用。设计师要吸引用户长期停留在你的网站上,千万不要让用户第一眼就感到压抑。很多文字内容要用和谐的背景色,前景文字要和背景形成鲜明的对比。如果背景包含图像,对比度较弱,可以适当降低背景图像的透明度,这样用户在浏览时就不会感到疲劳。

导航菜单包括但不限于导航栏和汉堡菜单。

导航菜单的重要性不言而喻,它存在于我们平时遇到的每一个网站或软件中;但并不是所有的导航菜单都设计准确。我们经常会发现,由于导航设计不当,导致用户迷茫、操作困难甚至不知道导航在哪里。

以下设计原则可以避免导航菜单错误。

导航菜单应该清晰可见。

1.大屏幕中的导航菜单不能太小。如果有足够的空间,不要隐藏菜单。

2.把导航菜单放在用户熟悉的位置。通常情况下,用户会希望在访问过的网站或app中的类似位置(如网站的顶部和左侧等)找到自己想要的UI元素。).

3.让菜单链接看起来具有交互性。如果菜单选项看起来是可点击的,用户可能不会将其识别为导航。如果我们的导航设计包含了过多的图形或者过于扁平的设计风格,它们看起来会更像是装饰性的图片或者标题。

4.确保导航菜单有足够的视觉吸引力。许多导航菜单会在周围留出一点空白区域,以便在视觉上突出显示。但当网站的UI元素拥挤时,如果导航菜单的视觉比例太弱,就会迷失在各种图形、促销广告、标题中,不容易被用户识别。

5.菜单选项的颜色应该与网站的背景颜色形成鲜明的对比。令人惊讶的是,很多设计师都忽略了“对比原则”。

即使是熟悉上述规则的设计师设计的导航菜单,也可能会被用户忽略,因为他们很难客观地评价自己的作品,尤其是遇到主观的设计标准,比如哪个UI元素应该有更明显的视觉效果。如果你知道你的导航菜单在哪里,自然一眼就能看出来,因为是你设计的。所以有必要让用户参与验证。

告诉用户他们当前的位置。

6.告诉用户他当前的位置。用户成功导航的一个最基本的标准是他能找到:“我在哪里?”通常,选定的菜单选项在视觉上不同于其他选项,这可以帮助用户知道他们的当前位置(或通过面包屑导航)。如果你没有让用户知道自己在哪里,导致他们迷路,那你就犯了网站设计最基本的错误。讽刺的是,用户并不总是通过主页到达目的页面,所以导航菜单对用户来说意义重大。

导航菜单应该与用户任务相协调。

7.使用易于理解的链接标签。知道用户在找什么,使用相似和相关的类别标签。记住导航菜单不要用自创的词和行话忽悠人。请使用能够准确描述网站内容和特点的术语。

8.链接标签应该易于阅读。减少用户阅读菜单具体内容的时间,比如使用左对齐的垂直菜单或者将关键词放在前面。

9.对于大型网站,让用户通过导航菜单预览子级内容。对于喜欢探索网站各级内容的典型用户,下拉菜单可以让用户快速浏览,节省时间。

10.为密切相关的内容提供本地导航。如果用户喜欢频繁对比同类产品或者在某个场景下完成多个任务,可以将这些相邻的页面做成局部导航菜单,这样用户就不需要在复杂的路径中“上蹿下跳”了。

11.使用视觉交流。图像和颜色等元素可以帮助用户理解菜单选项,但也要确保这些图形起到积极的作用(至少不会让操作变得更加困难)。

导航菜单应该易于操作。

12.菜单选项应该足够大,便于点击。如果导航菜单选项太小或者彼此距离太近,会给移动用户造成很大的麻烦;如果大屏网站中的导航菜单选项也是这样设计的,操作起来会比较困难。

13.确保下拉菜单不会太大或太小。鼠标悬停触发的下拉菜单呈现时间短,会给用户带来挫败感,因为用户还没来得及点击菜单中的某个链接,下拉菜单就消失了。此外,过长的垂直导航菜单不利于点击底部选项,除非滚动屏幕。最后,鼠标悬停触发的下拉菜单不能太宽,否则用户会误以为是新页面,想知道为什么在点击之前会出现新的“页面”。

14.当页面内容很长的时候,可以考虑吊顶(或者实底)菜单。已经浏览到页面底部的用户,如果想返回第一屏(移动端不断向上划动屏幕),需要反复回滚鼠标;如果导航可以暂停,用户可以很容易地切换其他菜单选项。这非常适合小屏幕场景。

15.尽可能缩短导航菜单中最常用操作的物理距离。当下拉菜单包含大量内容时,将用户最常点击的链接放在离鼠标悬停的选项最近的地方,可以减少鼠标的移动距离(移动终端也是如此)。最近一些app里流行的一些饼状图菜单,把所有菜单选项围成一圈(有的是半圆),让每个选项链接的物理点击距离最短。

用新颖有趣的交互方式惊艳用户?

实际上.答案是“没有”。

酷炫的效果不是我们的首要目标。对于用户来说,最让他们印象深刻的是网站精彩的内容和熟悉简单的导航菜单。

当然,有时候一些创新的菜单确实能提升用户体验(下拉菜单就是一个例子)。在某些场景中,由于新技术的独特要求,这15个原则可能不会使用3354。例如,第4条“确保导航菜单具有足够的视觉吸引力”不适用于语音识别。但在大多数情况下,这15条是我们需要考虑的指导原则,因为它们会大大提高导航菜单的可用性。

对于一个网页,它必须有一个中心内容。然后,围绕它的内容再次围绕中心思想展开。那么,如何建立中心内容呢?如何在建立的过程中提高自己网站的吸引力?本文将从网页设计的角度来探讨中心内容的理念。

网页设计必须围绕网站的中心内容,至少包括这四个方面:

一、从网站的整个诉求来看,网页上应该放置哪些信息才能更好的实现网站的诉求?需要保留哪些信息?还有哪些信息需要放在其他页面甚至干脆丢弃?

二、对于已经确定要放在页面上的信息,如何更好的写文字和选图片,达到功能性和视觉美感的完美统一?

三、分清信息的重要性,哪些重要,需要强调?什么是不太重要的信息?

四、区分主次信息后,如何在版面、色彩、大小上更好地突出和表达,即视觉上?

这四个部分每一个都有几乎说不完的话题,所以在这篇文章中,我只梳理和总结我在第四个方面的理解,即核心内容与网页视觉表达的关系,尽量把我考虑过的内容都写出来,同时举一些具体的案例来说明我的观点,让大家更好的理解。

一、核心内容对页面布局的影响

比如一个搭建WordPress网站的公司,在主页上可以看到从上到下的一些信息:导航、Logo、口号、作品展示、选择我们的理由、联系方式、日志列表、邮箱订阅、Twitter信息、版权信息。其中,第一视觉无疑是公司的广告语和作品展示,是这个网站首页上的核心内容。因为作为一个网站建设公司,直观的让客户知道你是做什么的?最近怎么样?应该是客户最想知道的。那么核心内容有哪些视觉上的考虑呢?

我们可以看到设计师在广告语中对“wordpress”这个词使用了非常大的文字尺寸,颜色也不同于其他词,使用了深灰色,强调我们公司正在以wordpress为背景建设网站。标语下方的作品展览尺寸很大,宽度为540像素,而整个设计宽度为1000像素。首页如此大尺寸的展览,可以让客户非常清晰直接的看到作品的原貌,从而对公司的制作水平有一个直观的印象。而如此大规模的作品展,其实已经隐约决定了整个网站的布局。

想想吧。在屏幕左上方区域放置一个宽540像素、高460像素的矩形后,下一个区域应该放置什么信息,其实就像放积木一样。按照重要性一个一个的放就好了。当然,这并不是唯一的布局方式,但无论什么布局方式,我们的思路都要在功能考虑的范围内进行。所以我们可以有创造力,但是我们必须明白它和纯粹的创造力之间的区别。

二、核心内容对配色方案的影响

Lofter是网易提供的一个轻博客服务,里面主要有图片、音乐、文字、文章四类信息。模板的设计通常是为了满足摄影的用户,图片显示区域要足够大,足够酷;模板首页可以一屏看到更多图片;背景应为深色,以突出当前图片;边框的设计让画面更突出或者说让画面更漂亮。通过对这种设计思路的分析和理解,我们可以发现,图片显示区域要足够大,这是我们上面说的布局考虑,深色背景是我们这里要讨论的对配色方案的影响。

所有的视觉设计都是围绕信息进行的。我们必须先理清信息的内容和结构,才能知道哪里要用重墨,哪里要停笔。反过来,很多设计思路和想法可以说已经隐含在信息里了,比如我们上面提到的布局和配色。只要对信息进行提炼和优化,如何做,在梳理信息的过程中就会逐渐清晰。

最近怎么样?你现在一定明白中心内容的重要性了吧?很简单,就像我们看选秀的时候,中心还是决定了是超女还是快乐男生。一旦偏离,就会闹出很多笑话。这也说明了中心内容在整个网页设计中的重要性。所以在这里也要告诉网页设计师,一定要把重点放在网页中心的定义和掌握上,才能做出更好的网站。

俗话说,细节决定成败。同样,在网页设计师们苦苦挣扎的网页设计领域,这也是不可改变的规律。网页设计的细节做好了,才能把网页做的更好。那么,有哪些细节值得我们关注呢?本文将从六个方面进行论述。

一、合理使用渐变

不要滥用渐变,也不要让渐变看起来像彩虹,否则你的网页作品会看起来不专业。总之,合理使用渐变对于优秀的网站设计是有帮助的。

二、留空

blank这个词往往容易从blank的字面解释中被误解。网页设计更准确的描述是网页各板块元素之间的空间范围。进一步分析,看看一个单独的列表是如何定义它的。

“消隐”对于网页设计非常重要。消隐不会让你的页面元素堆积在一起。对于年轻的设计师来说,留白可能是一个大问题,他们在设计时填满了整个页面,没有给页面足够的“喘息空间”。这对他们来说可能不是问题。如果内容放不下,他们可以使用浏览器的滚动条来扩展页面的空间。

三、网格布局

网页设计的网格布局最初的灵感是借鉴了报纸的排版。但如果你仔细观察周围的一切,你会发现网格现象,从好的设计到生活中的交通网络。

960和blueprint可能是最流行的两种网格布局。960网格布局简洁,重点突出。您可以以任何对齐方式排列网站的元素。对齐可以让你的网站在设计复杂的页面时看起来更加精致有序,在页面布局中添加任何模块内容时都不必考虑其他模块内容。

四、改进字体应用

字体应用困扰大多数设计师。如果想提高自己的设计水平,字体起着重要的作用。它不仅对可读性起着重要作用,还能增加设计作品的氛围。

清晰有效的导航

好的导航对网页设计非常重要。如果访问者不能快速方便地找到它,他们很可能会去其他网站。这是我们不愿意看到的。同时,我知道MyInkBlog已经做了一些改进,并将在未来的重新设计中进行彻底的改进。

六、使用美观实用的页脚。

从一开始我们就把页脚作为次要内容,把一些没用的内容放在页脚。设计的时候稍微花点心思就好了。现在页脚对于整体设计越来越重要。不要错过一个好的页脚来完成你的设计。