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

相关文章

JSON Web Token在登陆中的使用过程

《JSONWebToken在登陆中的使用过程》:本文主要介绍JSONWebToken在登陆中的使用过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录JWT 介绍微服务架构中的 JWT 使用结合微服务网关的 JWT 验证1. 用户登录,生成 JWT2. 自定义过滤

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D

Flutter监听当前页面可见与隐藏状态的代码详解

《Flutter监听当前页面可见与隐藏状态的代码详解》文章介绍了如何在Flutter中使用路由观察者来监听应用进入前台或后台状态以及页面的显示和隐藏,并通过代码示例讲解的非常详细,需要的朋友可以参考下... flutter 可以监听 app 进入前台还是后台状态,也可以监听当http://www.cppcn

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