当前位置: 首页 > news >正文

引发网页布局灾难的7个大错误

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

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

  为了帮助大家来避免这些错误和误区,我们列出了一些设计的小技巧。我们同时也希望大家能够帮助我们完善这些小技巧。不管怎么说,希望大家能帮助我在下面留言 ,带给大家更多的想法和建议。谢谢!

  1. 缺乏空白区域 

  没有比把页面塞得像麻袋一样满更让人烦人的设计了。你应该保留一定得空白页面让访问者放松他们的眼睛。很多设计者都想提供更多的内容在第一个页面。感觉初学设计的人更容易犯这个错误,但其实各个设计水平的人都有这个倾向。因为设计界错误心态这个错误大家犯得比较多。设计者太依赖于布局而不敢尝试其它的方式。正确的心态是忽略掉任何的规则,创建一个你认为对于用户来说是正确的布局。最简单的因素绝对一切。

  2. 非常糟糕的颜色组合

  这里有很多的糟糕的布局形式,但是糟糕的颜色搭配绝对是最吓人的。一个很常见的错误就是使用高对比颜色创建一个富有视觉张力的设计。这里有不同的来自学校的观点。我们应该学会如何区别对待。

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

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

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

  4. 图片的使用没有任何灵感

  一个图片可能抵得过成百的文字,但是如果这些文字都是批评你的话,你的布局设计就有问题了。书写的内容,布局和图片应该组合使用,并不是分离的实体。任何web设计人员都应该理解创意并且有效的实现。图片应该能有效的说明网站需要表达的信息及其选择,这是一个设计时最初需要考虑的因素。

  5. 忽略了字体排版

  因为数量多,或者非常小就忽略了字体排版是一个非常大的错误。如果说一个简单演讲是网站的其中一个特殊目地的话,字体排版就是一个关键的因素。另外一个问题是大家如何理解字体排版,它不是一个简单的如何选择字体的过程,它绝对了句子,段落及其标题的组织方式。你可能想这里需要做的工作太多了,但是一个富有成效的设计将会对于页面布局具有非常绝对性的冲击。

  6. 没有照顾所有人的使用感受和可用性

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

  7. 没有事先思考

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

  阅读这个文章可能像理解一个布局一样困难,但是这样更加容易让大家避免错误,请让我们知道是否这篇文章帮助了你,谢谢!

 

原文:7 big mistakes that make your layout a disaster

相关文章:

  • # centos7下FFmpeg环境部署记录
  • Android - Compass(罗盘) 详解
  • 深入解析React中的元素、组件、实例和节点
  • JS实现小图放大轮播效果
  • Javascript继承机制的设计思想
  • 在PC上测试移动端网站和模拟手机浏览器的5大方法
  • ios 推送证书 p12生成
  • Beaker:一个基于Electron的点对点Web浏览器
  • Linux查看文件内容
  • 追溯ASP.NET发展史
  • 前端MVVM框架设计及实现(一)
  • python的不定时更新
  • LumiSoft收取邮件(含邮件附件)
  • Frost Sullivan权威报告:阿里云再次领跑云WAF大中华区市场
  • Yii框架官方指南系列28——缓存:概览
  • 时间复杂度分析经典问题——最大子序列和
  • 《Javascript数据结构和算法》笔记-「字典和散列表」
  • Dubbo 整合 Pinpoint 做分布式服务请求跟踪
  • scala基础语法(二)
  • storm drpc实例
  • 海量大数据大屏分析展示一步到位:DataWorks数据服务+MaxCompute Lightning对接DataV最佳实践...
  • 技术胖1-4季视频复习— (看视频笔记)
  • 深入 Nginx 之配置篇
  • 跳前端坑前,先看看这个!!
  • 小程序开发之路(一)
  • 一个完整Java Web项目背后的密码
  • 源码安装memcached和php memcache扩展
  • 字符串匹配基础上
  • 3月7日云栖精选夜读 | RSA 2019安全大会:企业资产管理成行业新风向标,云上安全占绝对优势 ...
  • ​七周四次课(5月9日)iptables filter表案例、iptables nat表应用
  • $jQuery 重写Alert样式方法
  • ( )的作用是将计算机中的信息传送给用户,计算机应用基础 吉大15春学期《计算机应用基础》在线作业二及答案...
  • (145)光线追踪距离场柔和阴影
  • (BFS)hdoj2377-Bus Pass
  • (delphi11最新学习资料) Object Pascal 学习笔记---第8章第2节(共同的基类)
  • (顶刊)一个基于分类代理模型的超多目标优化算法
  • (二十四)Flask之flask-session组件
  • (黑马C++)L06 重载与继承
  • (十六)Flask之蓝图
  • (五)Python 垃圾回收机制
  • (原创)Stanford Machine Learning (by Andrew NG) --- (week 9) Anomaly DetectionRecommender Systems...
  • (转)创业家杂志:UCWEB天使第一步
  • (转)利用PHP的debug_backtrace函数,实现PHP文件权限管理、动态加载 【反射】...
  • (转载)hibernate缓存
  • (自适应手机端)响应式新闻博客知识类pbootcms网站模板 自媒体运营博客网站源码下载
  • .net core 调用c dll_用C++生成一个简单的DLL文件VS2008
  • [ vulhub漏洞复现篇 ] Celery <4.0 Redis未授权访问+Pickle反序列化利用
  • [ANT] 项目中应用ANT
  • [BT]小迪安全2023学习笔记(第15天:PHP开发-登录验证)
  • [C#]winform部署yolov5-onnx模型
  • [C#]使用PaddleInference图片旋转四种角度检测
  • [CareerCup] 13.1 Print Last K Lines 打印最后K行
  • [HTML]Web前端开发技术12(HTML5、CSS3、JavaScript )——喵喵画网页
  • [i.MX]飞思卡尔IMX6处理器的GPIO-IOMUX_PAD说明
  • [iOS]中字体样式设置 API