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

1顶
0踩

2011-11-22 13:24 by 资深记者 jjfat 评论(4) 有5097人浏览

布局网页误区

虽然Web设计领域已经步入了产业化方向，但是开发一个网站仍然是技术和艺术的结合。网站的设计既可以为其带来大量流量，也可能吓走大量用户，这些无疑取决于设计师的设计水平。经验、天份和能力是一个设计师最强大的工具，好的Web布局完全基于这些，当然，这也是一个非常耗时的工作。

设计一个好的布局是件不容易的事情，而且对布局的判断也非常主观化。一个设计可能能够取悦你，却可能让他人厌恶。尽管如此，在Web设计中还是有一些“久经考验”的设计误区。

为了帮助设计初学者少走弯路，我们整理了一份列表供大家参考。

1. 缺乏空白区域

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

2. 糟糕的颜色组合

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

对比色的设计大部分是为了突显某一部分，也许你可以尝试使用一种颜色而通过不同的色调及饱和度来实现。这里有一个小技巧非常不错：降低你的文件饱和度，直到各个元素之间的区别非常清晰。其思路非常简单：视觉没有问题的人可以非常清晰地看到各个元素，有视觉问题的人则将看到黑色、白色或者是灰色的布局。接下来就简单了，如果他们查看布局颜色没有困难，那么便可提交无障碍测试了。

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

这听起来似乎与第一点类似，但是在一个页面中也可能同时拥有很多空白区域以及大量信息。通常人们浏览网站时都会先扫上几眼，因此设计人员应该让整个布局更加清晰。一个充斥着大量信息而又插入了太多图标、按钮或是图片的网站，将会非常难以浏览，会让网站的易用度大打折扣，对用户来说也是不友善的。

4. 图片使用不当

一图抵千言，但是如果使用不当的话，你的布局设计就失败了。文字、布局和图片应该融合成一体，它们并不是分离的。任何Web设计人员都应该理解创意并且有效的实现。图片应该能有效地说明网站需要表达的信息，这在设计之初就需要考虑到。

5. 忽略字体排版

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

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

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

7. 没有事先思考

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

Via Webdeveloperjuice

来自: http://www.gbin1.com

分享到：

1
顶

0
踩

评论共 4 条请登录后发表评论

4 楼 allenny 2011-11-26 20:01

happysoul 写道

感觉说的没啥深度，也许因为不是做前端开发。。。

人说的是设计，不是程序

3 楼 b_l_east 2011-11-23 09:15

happysoul 写道

感觉说的没啥深度，也许因为不是做前端开发。。。

2 楼 happysoul 2011-11-23 00:16

感觉说的没啥深度，也许因为不是做前端开发。。。

1 楼 mengyancui 2011-11-22 16:35

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

bug：Batch update returned unexpected row count from update: 0 actual row count: 2 expected: 1

报错信息： [blueskyinfo[ERROR][admin|/member/approval.do][2017-12-26 10:20:14]| Could not synchronize database state with ...org.hibernate.HibernateException: Batch update returned unexpected row co

Hibernate - Batch update returned unexpected row count from update: 0 actual row count: 0 expected:

- Batch update returned unexpected row count from update: 0 actual row count: 0 expected: 1 查了蛮久才找到答案。要是英语学得好解决就快了。翻译出来大概意思是：update后返回想不到的数据，0行被更新。如果...

Batch update returned unexpected row count from update [0]； actual row count: 0； expected: 1；

Batch update returned unexpected row count from update [0]; actual row count: 0; expected: 1; 数据库表的id设置了自动生成策略（自增），代码中又手动给id赋了值x，执行Hibernate的save方法后数据库中实际的...

Batch update returned unexpected row count from update [0]； actual row count: 2； expected: 1

这个是由于用户hibernate使用HQL更新和删除实体，一定需要先获取实体的ID，如下本意直接删除字段为某个值，但是会先查出对应的id，然后根据id去删除但是由于ID有重复，导致报错（通常在开发环境，数据错乱，id 不...

Hibernate:Batch update returned unexpected row count from update [0]; actual row count: 0; expected:

1、a different object with the same identifier value was already associated with the session。　错误原因：在hibernate中同一个session里面有了两个相同标识但是是不同实体。　解决方法一：session

org.hibernate.StaleStateException: Batch update returned unexpected row count from update: 0 actual

ERROR [http-8080-Processor22] (BatchingBatcher.java:60) - Exception executing batch: org.hibernate.StaleStateException: Batch update returned unexpected row count from update: 0 actual row count: 0 e

JPA异常：Batch update returned unexpected row count from update [0]; actual row count: 0; expected: 1

org.springframework.orm.ObjectOptimisticLockingFailureException: Batch update returned unexpected row count from update [0]; actual row count: 0; expected: 1; nested exception is org.hibernate...

HIbernate报错Batch update returned unexpected row count from update [0]; actual row count: 0; expected

使用hibernate报错如标题所示，在使用一对多关系映射时，使用测试方法测试save操作。出现这个错误的原因是数据库主键的定义是自增的方式，且数据库为空或者未创建，此时插入地数据带有主键id信息，便会执行update...

【解决方法】Batch update returned unexpected row count from update [0]; actual row count: 0; expected: 1

使用hibernate的时候，抛了这个异常。先过图然后发现是我在hbm.xml映射文件中设置了主键增长策略为自增长，结果我又设置了主键的值，所以报的这个错误。解决方案：程序中不设置主键的值。或者把hbm.xml文件...

Batch update returned unexpected row count from update [0]; actual row count: 0; expected: 1

本来要做添加功能，结果由于前台传进来的主键是空字符串”“而不是NULL而做了修改所以报这个错误。我们只需要在action层处理一下数据就行了。... if (dictionary.getId().length()==0) { dictionary.setId(null); ...

Batch update returned unexpected row count from update [0]; actual row count: 2; expected: 1

org.springframework.orm.jpa.JpaSystemException: Batch update returned unexpected row count from update [0]; actual row count: 2; expected: 1; nested exception is org.hibernate.j...

Batch update returned unexpected row count from update [0]； actual row count: 0； expected: 1

报错如下：严重: Servlet.service() for servlet [spring] in context with path [] threw exception [Request ... nested exception is org.springframework.orm.hibernate3.HibernateOptimisticLockingFai...

Batch update returned unexpected row count from update [0]; actual row count: 0; expected: 1！！！

org.springframework.orm.hibernate5.HibernateOptimisticLockingFailureException: Batch update returned unexpected row count from update [0]; actual row count: 0; expected: 1; nested exception is org.hib...

org.hibernate.StaleStateException: Batch update returned unexpected row count from update: 0 actual ...

org.hibernate.StaleStateException:Batchupdatereturnedunexpectedrowcountfromupdate:0actualrowcount:0expected:1atorg.hibernate.jdbc.BatchingBatcher.checkRowCount(BatchingBatcher.jav...

org.hibernate.StaleStateException: Batch update returned unexpected row count from update [0];

org.hibernate.StaleStateException: Batch update returned unexpected row count from update [0]; actual row count: 0; expected: 1 原因：使用hibernate框架的saveOrUpdate(T)方法时，存在T对象的id，如果该...

Batch update returned unexpected row count from update [0]; actual row count: 0;

比方说，第一次从数据库查询出userEneity1，然后set了两个属性，之后还未进行update，就再从数据库查询一次这个对象，这个时候就会导致同一个实体在缓存中的数据不一致，然后就导致了这个错误。一开始的代码，错误...

COMSOL中基于波束包络法的三维弯曲光纤波导传输仿真及损耗分析

内容概要：本文详细介绍了利用COMSOL进行三维弯曲光纤波导传输仿真的方法和技术要点。首先探讨了几何建模的关键步骤，如使用参数化螺旋线创建弯曲结构，并强调了避免端口模式失配和平滑过渡的重要性。接着讨论了材料设置中的注意事项，尤其是处理各向异性材料时自定义坐标系的应用。文中还深入讲解了波束包络法的核心思想及其相对于传统有限元法的优势，特别是在内存占用方面。此外，提供了具体的求解技巧，包括开启渐进扫描功能以及调整数值耗散参数来提高收敛性。对于后处理部分，则着重介绍了如何通过线积分计算弯曲损耗，并展示了通过脚本自动化生成模场分布动画的方法。最后比较了波束包络法与FDTD方法在不同情况下的表现差异。适用人群：从事光通信系统设计、光纤器件研究的专业技术人员，以及对电磁场仿真感兴趣的科研工作者。使用场景及目标：适用于需要精确评估光纤弯曲引起的各种效应的研究项目，如数据中心内部布线优化、新型光纤设计等。主要目标是帮助用户掌握高效准确地进行复杂三维弯曲波导仿真的技能，从而更好地理解和预测实际应用中的性能指标。其他说明：文中不仅提供了详细的理论解释和技术指导，还附带了许多实用的操作提示和代码片段，便于读者快速上手实践。同时提醒读者注意一些常见的错误来源，如材料色散设置不当可能导致的结果偏差等问题。

ffmepg windows 下载详细教程2025年（最新）

蓝天白云简约儿童教学课件PPT模板.pptx

蓝天白云简约儿童教学课件PPT模板

COMSOL直流电弧放电模型：基于磁流体方程的多物理场耦合仿真与优化

内容概要：本文详细介绍了如何在COMSOL中构建直流电弧放电模型，利用磁流体动力学（MHD）方程将温度场、流体场和电磁场进行耦合仿真。文章首先解释了如何通过洛伦兹力将电磁场和流体场耦合，接着讨论了温度场中材料参数（如电导率）随温度变化的处理方法。文中还探讨了求解策略，包括分步计算和参数化扫描，以及如何设置边界条件和网格划分。最后，作者分享了一些实用技巧，如调整阻尼因子和使用特定的湍流模型，确保计算结果的准确性。适合人群：从事等离子体物理、电磁场仿真、流体力学等领域研究的专业人士和技术爱好者。使用场景及目标：适用于需要精确模拟直流电弧放电行为的研究项目，帮助研究人员理解电弧内部复杂的物理机制，优化电弧设备的设计和性能。其他说明：文章提供了大量具体的代码片段和配置细节，有助于读者快速上手并解决常见问题。此外，作者还分享了许多实践经验，使读者能够更好地应对仿真过程中可能出现的各种挑战。

1顶0踩