7个让Web页面布局成为败笔的设计误区

2024-01-07 13:32

本文主要是介绍7个让Web页面布局成为败笔的设计误区,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

即使Web设计已经成为一个真正的产业,开发一个网站仍旧是技术和艺术的结合。一个网站的设计既可以带来大量流量,同时也可以吓走大量用户,当然这些都和设计师相关。经验、天份和能力是一个设计师最强大的工具。一个设计精良的布局是Web设计的基础,而且,这也是一个非常耗时的工作。

设计一个非常好的布局是一件非常不容易的事情,而且判断的方式也非常主观。任何一个设计可能会取悦你,也可能让其它人厌恶。尽管这样,这里仍旧有些大家都承认的设计误区。

为了帮助设计初学者少走弯路,我们列出了一些Web设计上的误区。

1.缺乏空白区域

没有比把页面塞得像麻袋一样满更让人烦人的设计了。你应该保留一定的空白页面让访问者放松他们的眼睛。很多设计者都想在第一个页面提供更多的内容。似乎初学设计的人更容易犯这个错误,但其实各个设计水平的人都有这个倾向。设计者太依赖于布局而不敢尝试其它方式。有时候,最简单的因素胜于一切。

2.非常糟糕的颜色组合

糟糕的颜色搭配绝对是最吓人的。一个很常见的错误就是使用高对比颜色创建一个富有视觉张力的设计。

很多的对比设计都希望使用一种颜色通过色彩和饱和度重点突出最重要的部分。这里有一个小技巧非常不错:降低你的文件饱和度,如果各个元素之间的区别非常清晰的话,那就足够了。这个逻辑非常简单:视觉没有问题的人会看的非常清晰,然而有视觉问题的人将看到黑色、白色或者灰色的布局。现在简单了,如果他们查看布局颜色没有困难,那么布局就通过了色彩可用性测试。

3.一个页面里包含的内容太多

布局中可以拥有很多空白区域,同时也可以包含大量信息。通常人们都是先扫上几眼页面布局,因此设计人员应该让整个布局可被快速浏览。一个拥有信息太多的网站,例如,插入太多的图标、按钮和图片将会非常难以浏览,会让网站的易用度大打折扣。

4.图片使用不当

一张图片可能抵得过上百个文字,但是如果使用不当的话,你的布局设计就失败了。文字内容、布局和图片应该组合使用,它们并不是分离的个体。任何Web设计人员都应该理解创意并且有效的实现。图片应该能有效地说明网站需要表达的信息,这是一个在设计时最初需要考虑的因素。

5.忽略了字体排版

因为数量多,或者非常少就忽略了字体排版是一个非常大的错误。字体排版不是一个简单的如何选择字体的过程,它还包含了句子、段落及标题的组织方式。你可能想这里需要做的工作太多了,但是一个富有成效的设计将会对页面布局产生非常重要的影响。

6.没有考虑到可用性和所有人的使用感受

可用性可能被很多人认为是一个多余的事情,但是一个可用性差的网站是一个自私设计者的作品。网络世界对于任何人都是平等的,如果你的设计不能让每个人都能享受到,那么将会是一件很不尊重人的事情。美国有一项法规规定:任何机构和部门的网站都必须通过可用性测试。实际上可用性并不是个高科技的东西。例如,你只需要简单加上alt标签属性,这并不会给你带来任何麻烦。这里用不着遵循什么法规,从道德和道义上来讲,我们应该自觉地将这个考虑到设计中去。

7.没有事先思考

由于缺乏经验,使得我们需要不停地修改自己的东西。滑稽的是,我们可能晚上设计的东西,第二天可能就会被删除。一个聪明的设计者会在最开始的时候思考整个布局的大概设计。这种方式可以节省很多时间和资源。很明显,在实际做之前思考是一件很不容易的事情,但是至少能够帮助我们尽量少的去修改我们的设计。不用担心,经验可以帮助我们做到这一点。

英文出自:Webdeveloperjuice

 

这篇关于7个让Web页面布局成为败笔的设计误区的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/580078

相关文章

web网络安全之跨站脚本攻击(XSS)详解

《web网络安全之跨站脚本攻击(XSS)详解》:本文主要介绍web网络安全之跨站脚本攻击(XSS)的相关资料,跨站脚本攻击XSS是一种常见的Web安全漏洞,攻击者通过注入恶意脚本诱使用户执行,可能... 目录前言XSS 的类型1. 存储型 XSS(Stored XSS)示例:危害:2. 反射型 XSS(Re

MySQL表锁、页面锁和行锁的作用及其优缺点对比分析

《MySQL表锁、页面锁和行锁的作用及其优缺点对比分析》MySQL中的表锁、页面锁和行锁各有特点,适用于不同的场景,表锁锁定整个表,适用于批量操作和MyISAM存储引擎,页面锁锁定数据页,适用于旧版本... 目录1. 表锁(Table Lock)2. 页面锁(Page Lock)3. 行锁(Row Lock

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网

禁止HTML页面滚动的操作方法

《禁止HTML页面滚动的操作方法》:本文主要介绍了三种禁止HTML页面滚动的方法:通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性,每种方法都有其适用场景和优缺点,详细内容请阅读本文,希望能对你有所帮助... 在前端开发中,禁止htm

解决JavaWeb-file.isDirectory()遇到的坑问题

《解决JavaWeb-file.isDirectory()遇到的坑问题》JavaWeb开发中,使用`file.isDirectory()`判断路径是否为文件夹时,需要特别注意:该方法只能判断已存在的文... 目录Jahttp://www.chinasem.cnvaWeb-file.isDirectory()遇

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

JavaWeb-WebSocket浏览器服务器双向通信方式

《JavaWeb-WebSocket浏览器服务器双向通信方式》文章介绍了WebSocket协议的工作原理和应用场景,包括与HTTP的对比,接着,详细介绍了如何在Java中使用WebSocket,包括配... 目录一、概述二、入门2.1 POM依赖2.2 编写配置类2.3 编写WebSocket服务2.4 浏

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加

Spring常见错误之Web嵌套对象校验失效解决办法

《Spring常见错误之Web嵌套对象校验失效解决办法》:本文主要介绍Spring常见错误之Web嵌套对象校验失效解决的相关资料,通过在Phone对象上添加@Valid注解,问题得以解决,需要的朋... 目录问题复现案例解析问题修正总结  问题复现当开发一个学籍管理系统时,我们会提供了一个 API 接口去

Python中的可视化设计与UI界面实现

《Python中的可视化设计与UI界面实现》本文介绍了如何使用Python创建用户界面(UI),包括使用Tkinter、PyQt、Kivy等库进行基本窗口、动态图表和动画效果的实现,通过示例代码,展示... 目录从像素到界面:python带你玩转UI设计示例:使用Tkinter创建一个简单的窗口绘图魔法:用