在网页设计中需要注意什么问题

网页设计中需要注意什么问题

文本、背景、框架等各为不同的颜色,虽然看似鲜艳但是,多重渐变、几种鲜艳的色彩和大量有鲜明对比的色调及饱和度,会破坏你网站的层次和空白概念。下面介绍在网页设计中需要注意什么问题,希望可以为您带来帮助。

在网页设计中需要注意什么问题

1、留白太少

留白是网页设计中一个重要部分。它有助于防止用户在浏览网站时变得疲惫,它可以在内容中划出距离,而且它本身也看上去不错。空白不是必须用白色的,而是,它仅仅是为其他设计元素提供间隔和缓冲的空间。

2、字体设置过多

通常来说一个网页中最好不要超过三种字体。

3、色彩太多

文本、背景、框架等各为不同的颜色,虽然看似鲜艳但是,多重渐变、几种鲜艳的色彩和大量有鲜明对比的色调及饱和度,会破坏你网站的层次和空白概念。尝试限制自己只用一种鲜艳的色调(如蓝色),再搭配反相的单色(白、灰、黑)以获得一个漂亮的搭配。这里强调下豆瓣的配色。也是我喜欢的颜色搭配。

4、内容过于堆叠

网页的内容繁多,各种分支信息占据的空间过多,没有突出关键的主题。它有助于在内心组织重要的信息,并引导用户注意在你想让他注意的地方。在传统艺术中,新手们被教导色彩、价值和线性透视三原则和其他艺术指导。在网页设计中,没有特别奉行的准则,但以直观的方式组织你的内容是一条很好的经验规则。也是多年培养的用户习惯。最终习惯就是最终用户。当然一成不变不是我们所鼓励的。

5、没有重视用户电脑的屏幕显示效果

也许某个分辨率对你的电脑效果特别好,但是用在用户电脑上就不一定如此了。虽然这种分辨率的显示器正在减少,但采用更小的分辨率的手机设备也来了。现在的网页设计宽度标准是960像素,虽然没有照顾到每一种分辨率,但在主流分辨率上可以呈现的最好。假如你希望面对大量的手机用户,最好考虑一个手机版设计。

6、没有考虑对比效果

你有没有试过两种对比色彩的运用或者大小的变化,有些方式之所以比其他的更好,其原因就是这是一种眼睛感知到对比的方式。如果你很难舒服的阅读文字,考虑一下改变字体大小或方式。成为一个大师级网页设计师的秘诀:对比,对比,对比。

7、不一致

网页内容过于杂乱,没有统一的框架把他们合并到一个中心主旨上。它是把网页设计组织在一起的方式,可以创造一种紧密结合的感觉。在网站页面互相链接的情况下,它可以帮助用户把所有页面都联系在一起。如果你在整个网站持续改变字体、大小和色彩,用户很快会觉得不知所措。

8、没有足够的文字间距

间距过小是造成网页缺陷的一个重要原因。网页一个是行距,可以用CSS直接调整,关系到两行文字之间的距离。这些有助于区分行与段落,使用户更容易阅读文字。

9、尺寸大小问题

标准做法是h1的文字大于h2的文字,头部文字大于段落文字。尽量保持一致的尺寸,因为它有助于一致性(第8条)和内容层次(第4条)。保持文字的可读性,但不要太大,让字体的大小表现信息的重要性。还有,10像素以下的尺寸对大量阅读的人来说太小了。

网页底部设计的注意问题

设计师在设计页面的时候,大多都把精力放在Banner和内容排序上,而底部就显得并不那么重要了,其实并不是的!网页的底部是整个网站的重要部分,用户可以从中获得网站的基本信息。如果在整站设计中忽略了底部,那么你的网页整体布局设计就显得虎头蛇尾了。

既然不能忽视底部设计,那么我们应该如何去设计底部部分呢?

1.展示页面信息,著作权等

页面信息、著作权等信息一直作为最基本的FOOTER元素来使用。具体来说,通常可以考虑放置版权注册时间、使用条件、个人保护方针、网站地图、著作权等等信息在FOOTER区域。这个区域会有很多信息需要一一展现,因此,这部分的设计必须简单直接,不需要过多修饰。此外,出于便捷性的考虑,置顶按钮也是需要放置的。

2.网站导航条

网站导航条也是使用较多的元素。网站顶部的导航条和FOOTER部分的导航条会形成首尾呼应,即使用户浏览到页面的最底部,也不需要返回到页面的顶部,这样的设计更加方便了与其他页面之间的跳转。

3.利于SEO优化

在FOOTER部分上使用较多的则是文本链接,这一点是非常有利于SEO优化的。但是,如果在链接上埋入毫不相干的关键词,就会使链接看起来不太自然,这是值得注意的一点,不要为了推广而推广。

4.网站地图

在FOOTER部分放置网站地图,可以方便用户快速跳转到指定页面。如果在网页的FOOTER部分放置网站地图,就会获得用户更多的点击机会,同时会使用户有更好的体验,即使不用移动页面也能跳转到很多其他页面。

诚然,对于页面不是特别多的网站,网站地图还是做得较为简单直接点好。如果罗列的链接数量过多,会让用户感觉到网站很繁琐,不易于操作。要是选择过多的话,人们往往不知道该选择什么。因此,网站的结构在网站设计之前就必须要考虑清楚。

5.传达品牌理念

FOOTER与页头有所不同,可以放置基本不需要选择的元素。另外在FOOTER部分,更容易确保有足够大的空间,我们也可以选择一些插画或图形去传达品牌理念。

6.联系方式

在FOOTER部分可以放置电话号码、企业邮箱、企业地址、地图,资料请求等等的链接,这样放置会极大方便用户查找企业的联系方式。

界面设计注意问题

1. 尝试默认选择

将界面做成默认用户选中想要使用你的产品,意味着如果用户真的需要使用,那么可以直接点击确定而不需要额外点选了。当然,将界面设计成默认选择的样子多少存在点争议,有点强迫用户的感觉。如果你想道德一点,你可以要么把让用户选择的文字写得模棱两可,要么使用双重否定这样不那么直白的描述,这两种方式都可以让用户觉得没有那么强的感觉是被强迫选择使用产品的。

2. 保持界面一致性,不要增加用户的学习成本

自从Donald Norman的一系列著作面世后,界面设计中尽量保持一致性成了一个普遍遵循的准则。在设计中保持一致性可以减少用户的学习成本,用户不需要学习新的操作。当我们点击按钮,或者进行拖拽操作,我们期望这样的操作在整个程序的各个界面都是一致的,会得到相似的结果出来。不过在让界面变得一致之前,记住一点,适当的打破整体的一致性也是可取的。这偶尔的不一致性的设计用在你需要强调的地方可以起到很大的作用。所以世事无绝对,我们应遵从一致的设计准则,但适当地打破这种常规。

在网页设计中需要注意什么问题

3. 使用合适的默认值,减少用户的额外操作

适当的默认值和预先填充好的表单字段可以大量减少用户的工作量。在节省用户宝贵的时间上面,这是种非常常见的做法,可以帮助用户快速填完表单或者注册信息。

4. 遵循惯例避免重复造轮子

界面设计中遵从惯例跟之前的界面一致性准则很相似。如果我们遵从了界面设计中的一些约定,用户用起来会很方便。相反,不一致和没有遵从惯例则会提高学习成本。有了界面设计中这些约定,我们想都不用想就知道界面右上角(大多数情况下)的叉叉是关闭程序用的,或者点击一个按钮后我们能够预测到将会发生什么。当然,惯例是会过时的,随着时间的推移,同样的操作也有可能被赋予新的含义。但要记住,当你在界面中打破这些常规时一定要目的明确,并且出发点是好的。

5. 让用户觉得可以避免失去而不是获得

我们喜欢成功,没有谁愿意失败。根据心理学得到的可靠结论,人们一般更顷向于避免失去拥有的东西而不是获得新的利益。这一结论也适用于产品的设计和推广中。试着说明你的产品会帮助客户维护他的利益,保持健康,社会地位等要好过告诉客户这个产品会带来一些他未曾拥有的东西。比如保险公司,它是在销售我们出事之后可以得到的大笔赔偿呢还是在强调可以帮助我们避免失去拥有的财产?

6. 具有层次的图形化展示优于直白的文字描述

具有层次的设计可以将界面上重要的部分与不次要部分区分开来。要让界面层次分明,可以在这些方面做文章:对齐方式,间距,颜色,缩进,字体大小,元素尺寸等。当所有这些调整运用得适当时,可以提高整个界面的可读性。相比在一个很直白的界面上用户一眼就可以从上瞟到底的设计,这样分明的设计也可以让用户放慢速度来慢慢阅读。这样也使界面更有特色一些。就好比一次旅行,你可以乘坐高铁快速到达景区(从页面顶部瞟到底部),但你也可以慢行以欣赏沿途风光。所以层次分明的设计让眼睛有可以停留的地方,而不是对着空白单调的一个屏幕。

7. 将有关联的东西分组避免杂乱无章

将各个功能项分组合并起来可以提高可用性。有点常识的人都知道刀子和叉子,或者打开文件和关闭文件是放在一起的。将功能相近的元素放在一起也符合逻辑,符合我们平时的认知。

8. 使用行内即时校验而不是提交后再告诉出错

在处理表单时,最好立即检测出用户所填写内容是否符合要求然后给出验证消息。这样错误一出现能就能得到改正。相反,提交后再检查表单会给出错误消息,会让用户感到不爽又要重复之前的工作。

9. 放宽对用户输入的要求

对用户输入的数据,尽量放宽限制,包括格式,大小写什么的。这样做可以更人性化一点,也使得界面更加友好。一个再恬当不过的例子就是让用户输入电话号码的时候,用户有很多种输入方式,带括号的,带破折号的,带空格的,带区号和不带区号的等等。如果你在代码中来处理这些格式的问题,代价也只是你一个人多写几行代码而以,却可以减少无数用户的工作量。

10. 让用户感觉需要快速做出响应而不是毫无时间观念

适当的紧迫感是个有效的战术可以让用户立即做出决定而不是等上个十天半个月。重要的是这种战术屡试不爽,因为它暗示了资源的紧缺或者活动的时间有限,今天可以买,但明天可能就无法这么低价了。另一方面,这一战术也让用户感到会错失一次大好的机会,再一次,应用了人们害怕失去的本性。当然,这种战术会被一些人嗤之以鼻,认为是不耿直的做法。不过,这只是种战术而以,并且在保持合法性的前提下应用也无伤大雅。所以请不要为了营销而在界面上制造紧迫的假象。

11. 尝试饥饿营销(制造稀缺感)

物以稀为贵。饥饿营销给出的信息就是东西不多,只剩几件,明天再来,可能没了。你去比较一下批发与限量版的东西他们的价格差距有多大就知道了。回过头来看,那些批发商或者大零售商,他们也使用饥饿营销,以获得更好的销量。但在软件行业,我们经常会忘记有饥饿营销这回事。因为数字产品是可以很容易拷贝复制的,不存在缺货的情况。其实,在界面设计中,也可以将其运用起来与现实中的资源紧缺进行联系。想想一次网上研讨会的门票,想想你一个月可以服务的人数限制,这些信息都可以告知用户是有限的。

网页设计中的css用法

说到网页设计,对于大多数的设计师来说,无非就是网站的布局、每个版块的设计、网站中的图片设计、以及留给优化人员填充内容的网站列表页等。而在已上的设计中都离不开CSS样式表的设计。因此,本文中小编将与大家一起分享CSS样式表的相关知识。

一、什么是CSS样式表?

根据百度百科的定义:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

通俗的讲CSS样式表就是有关于网站当中每个不同页面中所有和网页样式设计有关的代码组合。

二、CSS样式表的优点:

有很多的网页设计师认为用表格所显示的效果与css几乎相同,而且css又因不同的浏览器支援度而有所差异,然而表格却适用于不同的浏览器。那么为什么我们还要使用CSS样式表呢?下面我们将会把表格样式和CSS样式表做一下对比,帮助设计师更好的选择。

原始码数量:我们在制作表格式的样式表会引用大量的原始码,这对于并非系统语言开发的设计师来讲,简直就是一个灾难。而相比较于表格式,css的好处就在于能够减少网页设计过程中对于原始码的依赖。

更新的简易性:要知道表格设计是死的,css设计是活的,设计好的表格版型因原始码的复杂,很难再改变。再者,您可一次更新网站的相同内容,而不需要每个页面分别修改。

三、CSS能让我们更轻易的修改整个网站的设计风格。

对于网站设计来说,我们会在定期内对网站的各个页面进行更新替换,而这时若采用表格设计网页,势必要因为新的版面风格而重新製作表格栏位,反之,css所设计的版面,只需要修改CSS文字样式即可。这对于减轻网站设计人员的工作负担来说是十分重要的改变。

四、CSS的设计对于SEO的帮助。

从seo的角度上来说:良好的代码结果以及清晰地图片和网站打开速度对于网站优化来说是必不可少的。因此作为网站设计人员在对网站给页面的样式进行设计时也要考虑到SEO这一方面。在这一点上CSS样式表相比较于表格式的样式表就具备一个非常明显的优势,那就是操作性的简易化,往往只需改几个数值就可以将网页的样式进行修改。这对于SEO人员来说就可以根据优化需要自行的修改网站页面中的元素。

12 12 分享:

相关课程

发表评论

登录后才能评论,请登录后发表评论...
提交评论

最新文章