网页设计的细节问题

网页设计的细节问题

缺乏对比度网页上的文字和图片都需要具备较高的可读性,最简单的方法就是让它们具有高对比度,但是许多设计师却经常忽视这条规则。下面介绍网页设计的细节问题,希望可以为您带来帮助。

网页设计的细节问题

1、缺乏文字和图片都需要具备较高的可读性

缺乏对比度网页上的文字和图片都需要具备较高的可读性,最简单的方法就是让它们具有高对比度,但是许多设计师却经常忽视这条规则。图片背景与文字对比度太差,导致文字模糊不清无法阅读,用户不仅错过这段话也错过了你要传达的重要内容。你必须保证每一个元素都与它周围的其他元素区别开来,记住这些基本方法,色彩、空间、尺寸。合理地运用它们让你的每个元素都清晰可见。

2、糟糕的导航和操作流程

糟糕的导航和操作流程,当我登陆了网页的第一眼,你就得让我明白接下来我该做哪个操作,点击按钮以及信息需要放在显眼的位置——这就是为什么导航和菜单栏往往处于页面的顶部,导航的标签内容和运行效果必须清晰直观,当你尝试使用水平方向的滚动条或者其他一些不太寻常的动效设计的时候,给用户一些暗示,让他们知道你的网页如何工作吧。

3、糟糕的图片搭配处理

糟糕的图片搭配处理没有什么比一个优秀的图片被其他设计掩盖更糟糕了。如果你花了时间为你的网站搭配了一张优秀的图片,为什么要让它被其他的设计元素所覆盖呢?加上简单的一行字就可以了,这也是为什么透明按钮成为了新的流行趋势。顶栏很有趣,滚动也很棒,可是当你为它们搭配上文字,一切就容易变得不那么和谐了。页面上的每个图片都需要与文本搭配,让每个文字都可读,图片上的每个设计元素都清晰可见。不要用文本或者按钮覆盖图片上任何重要的部分。当你觉得你的页面设计出现了这样的情况,最好更换一个更加简洁的背景并在其他地方放上你的这张图片吧。当第一眼看到上面这张图的时候你会被吸引是因为它的素描风格。但仔细看看,人物面部被文字遮盖了,那段褒奖之辞也让整体显得杂乱无章。

4、不使用网格在网页设计

不使用网格在网页设计中,有些“杂乱”也能让人赏心悦目,不对称是其中的一种,不使用网格绝对不是,是否使用网格是区分设计好坏的专业指标之一。网格 让一切变得清晰有组织性,让你的元素之间保持一致的适当的间距,你知道应当把你的元素放在哪儿、怎么放。帮助你确定元素的尺寸、文本的尺寸和空间,通过比 例展现内容的侧重点。

5、不采用响应式设计

不采用响应式设计,使用响应式设计框架,使用响应式设计框架,使用响应式设计框架,重要的事情说三遍,你的网页或许需要在手机上运行,它必须要和在电脑上运行一样流畅。我总能遇到一些网站,在手机上加载出的是一整个页面。这些网站并不是响应式设计,至少没有手机版的视图,以至于用户无法使用。

6、链接丢失崩溃的链接

链接丢失崩溃的链接是网页上最让人恼火的事之一。养成每年都去审核你的网页上链接是否畅通的习惯吧,你可以手动检查或是使用某些工具,如果你的logo并不能链接到你的网站首页,我也会感到奇怪。Logo都是要链接到网站首页的。(以及当处于首页 的时候,不要禁用返回按钮。)考虑链接的可用性。保证你的链接,特别是那些文本中的链接足够明显并且易于点击而不造成误操作。不要在你的文本中添加很多文 字链接,特别是在小的移动设备屏幕上,用户很难点击到正确的链接。

7、自动播放音乐在网页上添加声音

自动播放音乐在网页上添加声音会很生动,可千万别在没有用户提示的情况下播放音乐。你应当提供给用户一个打开/关闭音乐的按钮,并且默认关闭。音乐或 许会让用户惊艳,可要是用户正处于工作环境或是心情很差的时候这么做却适得其反。用户需要能完全操控你的网页,而自动播放的音乐却与之背道而驰。我需要网页音乐但播放必须得到我的同意,如果我没办法找到按钮关闭自动播放的音乐,那只能直接关掉网页。但应用在广告上这倒是个不错的招数。如果你有声音的内容必须要播放,考虑放一个大的弹出式静音按钮。用户往往会接受几秒钟的广告时间并会去阅读内容。虽然这不是一个理想的方法,却是一个比较好的解决方案。

网站设计中要注意的细节

对于一个网站来说,最重要的自然是用户体验。从我看来,用户体验其实就是一对细节的集合。只有我们这些细节强迫症患者,才格外追求这个。

所谓用户体验:一句话就是——让用户用着舒服

如果让我想“让用户用着舒服”的第一点,就是“让用户感觉着舒服”。可是这一点就是常常被忽视的细节。下面我列举出一些让用户用着舒服的要素。很多是自己在开发中感受到的,可能并不完整。

UI设计维持同一风格。

具体来说就是,网站的界面元素在整个网站中具有一致性。比如说“按钮”,这个非常重要的界面元素。登录界面的“登录”“注册”,发帖界面的“回帖”“发布”,还有“确认订单”。可以看出它们是具有相似的功能的——submit。那么它们在外观上就要保持一致。

UI一致可以让用户凭着自己的直觉找到所需的功能,减少用户的网站使用学习成本。

功能收放有度。

我的意思是指在网站首页和网站的其他位置中,功能按钮的折叠和展示情况。有些不常用的按钮一般不需要展示,而是折叠到某个菜单中。而将常用的功能直接设为链接或按钮。这点在制作导航条的时候特别重要(因为导航条会出现在每一个页面上)。这个不仅与网页编程,而且与网页内容设计关系也很大。比如导航栏一般推荐放置3~4个一级导航,如果你有十多个分类,建议再分到几个更大的分类里。导航栏排十多个链接并不是很好看的。

不要让同一元素多次出现在页面上,尤其是这一元素很显眼的时候。比如某网站有很多栏目,首页是这些栏目内容的推荐,网页上充斥着大量的“查看更多>>”按钮,(每个栏目都有一个,边上有个排行榜又来一个。一个网页上十二三个大按钮还都长得一样,看多了就感觉恶心了。)而且按钮元素还非常大。给人感觉特别不好。

网站要简洁,把你复杂的功能隐藏起来,等用户需要的时候再出来。而不是平铺在页面上,不管用不用都在那。这才是设计。

确定页面层叠顺序。

如果你的网页需要多个层,上面的层有可能会覆盖到下面,这时候要特别小心设置z-index值。不要造成遮挡的问题。比如我就见过某网站弹出对话框,一层透明图片层把按钮盖住了,于是完全无法操作对话框按钮。好吧,这是比较大的bug,还有一些小细节,比如某最近改版了的弹幕视频网站,它的“返回顶部”按钮盖在了评论区域迷你播放器的上面。于是视频部分被遮挡。果壳以前也出现过类似问题。当编辑器过长的时候,比如我这样的一篇长回答。编辑器的顶部工具栏会被固定在页面顶部。这是个非常好的照顾用户的设计。然而果壳当时出了个bug,他们忘记了上面的导航栏,于是编辑器工具栏盖在了导航栏的上面。

精心布置广告位和推荐位。

网站的用户总是不喜欢广告的,但是毕竟广告是网站的收入主要来源。现在网页广告屏蔽软件也比较多,如果广告太难看/影响操作,就难逃被用户屏蔽了。广告位/推荐位放置最重要的是显眼。比显眼更重要的是不能影响用户的使用。没有人喜欢右下角弹出广告。

广告最好占据页面的一个固定的位置,不要放在浮动层,千万不要弹窗。广告显示的时候不要影响用户的操作,比如以前的网易、腾讯(网易腾讯这么大,我就黑一黑吧,不说某网站了)广告,会把整个网页的header部分向下压,而且有个动画。更郁闷的是,动画是在载入后才播放的。于是就会出现——我正要点击某个链接,广告出来了,广告的位置占据了我原来鼠标的位置,我点到广告了。这种广告会遭致用户反感,不是大网站或流氓网站千万不要这么干,会把自己搞死的。

网页设计的色彩应用技巧

一、黑白灰的搭配技巧

色彩分有彩色和无彩色。黑白灰属于无彩色,其它的色彩都属于彩色。色相,明度和纯度,是色彩的三要素,而无彩色只有明度属性。黑白灰是万能色,当两种色彩的搭配不协调时,加入黑或灰色,会有意想不到的效果。很多网站色彩设计留出大块的白色空间,这种设计成为“留白艺术”。这种留白设计能让人感觉心情放松,有无限遐想。白色也是网页设计中最普遍的一种色彩设计。

网页设计的细节问题

二、色彩三要素的应用技巧

1.色相色相,指色彩的相貌,色彩最显著的特征,是色彩之间的主要区。比如红色,黄色,蓝色等各自代表不同的色相。同一色相的色彩,调整明度或纯度比较容易搭配,比如深红,大红,粉红,紫红。某种色彩并不一定代表了固定的某种含义,是在具体情景下具有恰当的含义;在特定的场合下,同种色彩也可以表现出不同的含义。

2.明度明度,指的是色彩的明暗程度,也称作亮度,色彩越亮明度就越高。比如一些儿童类、购物类网站。多是一些鲜艳明亮的色彩设计,让人感觉生气勃勃,欢快绚丽。明度越低,颜色越暗。一些游戏类网站的暗色调设计,充满了神秘感;运用一些暗色调的设计能够充分表达个人的孤僻或忧郁等性格。有明度差大的色彩比较容易调和。

3.纯度纯度,指色彩的鲜艳程度,原色纯度最高,调和其他颜色越多,色彩纯度越低。纯度低的色彩暗、淡且含灰色。

三、色彩的调和方法

1.相近色相近色是指色环中相邻的三种颜色。相近色在网站设计中极为常用。相近色的色彩搭配使人感觉舒适自然。是一个SOHO网站,它很有艺术性,整个网站的色调考究,以邻近色、暖调、中明度搭配,舒适自然。2.互补色互补色又称补色,是指色环中相对的两种色彩,色彩对比度大。在互补色的设计中,适当的调整一下补色的亮度,能够是对比的视觉效果更出色。

四、网页设计中冷暖色彩的运用技巧

1.暖色暖色一般应用于购物类网站,电子商务网站,儿童类网站等等,用以体现商品的琳琅满目,儿童类网站的活泼、温馨等效果。2.冷色冷色一般适合表达严肃,稳重等效果,绿色蓝色、蓝紫色等都属于冷色系列。冷色系色调多应用于一些高科技,游戏类网站。冷色与白色搭配能达到一种不错的效果。

五、色彩均衡技巧

网站图文的合理排版,能使人感到舒适协调,色彩的均衡搭配使网站的视觉、心理更加平衡和谐。网站色彩设计不会单一的运用某一种颜色,设计者必须要考虑色彩的均衡的问题。色彩的均衡,包括色彩的位置,每种色彩所占的面积、不同色彩的比例等等。比如灰暗的色彩面积过多,回事人产生压抑等感觉;鲜艳明亮的色彩面积如果过多,则会使人感觉刺眼不舒适。

六、确定网站的主题色

网站鲜明独特的主题色,让客户即目标明确,也兴致盎然。网站设计者必须考虑主题色的确定。网页选用的色彩尽量控制在4种左右,太多的色彩会让人感觉凌乱混沌、不能突出主题特色。确定好主题色,配色与主题色搭配必须能够有助于烘托主题。另外确定明度,纯度、色相那种要素占主导。色彩为网站内容服务,必须与网站的主题以及气氛相适应,色彩的搭配不仅仅是单纯的运用,必须考虑诸多因素,例如,了解你的网站所要传达的讯息和品牌,明确网站的职能;了解你的读者群,掌握访问者的类别、社会背景、心理需求和场合的差异等,社会背景不同,目的不同,往往会对色彩的感受也不同,因此网站的用色必须尽可能的吸引各种的注意力。

XML在网页设计的应用

伴随着社会科技的不断发展,网络在不断的普及,人们不但可以在电脑上浏览网页,还会在手机上浏览网页。而信息的传播途径、形式也都在发生巨大的改变,信息数量、信息类型、信息形式等方面都在进行着革新,而网页作为网络信息传递的媒介,网页设计美观则是人们审美的需求。概述了XML语言的定义以及其在网页中的应用,结合实际经验,对XML语言在网页设计中的应用做出了一些探讨研究。

XML语言由于其在网页上良好的拓展性、内容和形式的相分离以及严格的语法要求等特点,在网页设计中得到了广泛的应用。XML语言是一种可以拓展的标记语言,这种语言实质上就是将文档分成许多部分并且对这些分开的部分加以标记,是一种拓展性的标识语言,这种拓展性不仅仅表现在XML语言也可以自己创建语言,还是对HTML的一种补充应用,拓展了其在网页设计中的功能。

一、XML语言的概述以及其在网页中的应用

在网页上的应用,XML语言更加侧重于“什么是数据”,在其进行语言表示的过程中,虽然同样和HTML具有标签的性质,但是其标签并不是一成不变的。另外,其通过两种主要的语言进行数据描述,即文档类型(DTD)和描述性语言(Schema)。在其在网页上的应用不仅仅是要具有一个相应的结束标记,并且还要编程人员进行合理的向前以及区分变成字母的大小写,并且在进行标记的过程中,其所有的标记都要用引号括起来,而这些步骤哪一步出现了问题,都会导致网页无法被正常显示,这会极大地阻碍网页设计的进程。

二、XML语言在网页设计中的应用研究

就目前而言,网站的设计者都要有一个良好的XML语言应用水平,这就像Flash在网页上应用一样的广泛,笔者从以下三个方面探究了XML语言在网页设计上的应用。

(一)良好的拓展性,便捷浏览

在HTML标识中,仅仅只能对指定文字进行出题或者斜体展示,这种语言只能针对特定的段落文本,但是XML语言却能够在进行标识的过程中将数据进行结构化,让其相关的数据比如网页上的商品名称、商品售价、商品经销商、商品厂家、商品数量或者其他有关的元素进行整合,从而变得更加便捷和简易。在用户浏览网页的时候,就可以通过一些简单的搜索操作找到自己想要的信息,一旦找到一个信息,其相关信息也会进一步的关联出来,这种数据可以在网络上借助任何方式进行传播,并且可以通过用户自主的运用浏览器或者其他应用程序中进行自定义的处理和检查,这种在网页上的设计可以给浏览网页的用户带来极大便利的同时,还能增强网页排版的关联性。

(二)网页中数据的和现实是分离存在的

XML语言组显著的特点就是保持网页使用者的界面和其构建的结构化数据是相互独立,在XML语言设计的网页中,可以将网页文字表现层自定义的数据内容,不再像HTML中在浏览器中将数据必须显示成斜体或者粗体,这大大增强了网页整体的简洁性。另外,XML语言的网页数据处理中,处理和数据的显示是分开的,这就让其处理速度更快捷,并且通过XML语言编写的数据,可以通过网络传递到世界上的任意角落,不需要特定的编写程序或者重组数据库或者更新文件信息,只要进行简单的样式表套用就可以按照使用者自定义的方式进行数据的处理以及显示了。

(三)自定义XML语言数据,加强网页的美观性

自定义的XML语言数据,更能让网页设计变得美观,比如XML语言可以描述HTML的界面或者来描述网页上各种电子商务的交易进行描述,这种将XML语言采用内嵌的方式进入HTML中,就可以实现数据传递中不同的展示方式。另外,由于其Schema语言的可以被拓展的特点,在进行网页设计开发的过程中,Schema往往比DTD的应用功能更为强大,极大地方便了网页设计。并且XML语言开放的、具有弹性的格式,就让其参与信息交换或者转换的时候变得更加容易网页设计应紧跟网络科技的发展,将现代社会中的信息方向把握住,就能牢牢地掌握网页设计的先头阵地,让网页设计作品更加具有现代性、创新性以及吸引性。将XML语言在网页设计上进行良好的应用,不但能让网页设计内容变得有序、便捷,更让网页的美观性和简洁性更上一层楼,符合人们在网络社会上的审美需求以及使用习惯,进一步吸引用户。

12 12 分享:

相关课程

发表评论

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

最新文章