网站的视觉路径和版式设计

news/2024/5/20 12:31:25/文章来源:https://blog.csdn.net/iteye_170/article/details/81578494

cooper谈到用户的视觉路径一般是:从上到下,从左到右。
好的视觉设计路径应该是顺应这样的用户习惯,糟糕的设计会让用户无所适从,焦点到处都是。
当然,上图的视觉路径图并非绝对的,浏览习惯因人而异。


网站中方块
因为人们从接触信息以来,信息的呈现就是以方块式存在:报纸、书,单个字成点,一行字成线,一段字成面,而这个面当然是以方形呈现的效率最高。网站的视觉设计大部分其实都是在拼方块。
网站中的方块能很好地引导用户的视觉路径,用户可以通过区块来分辨这个区域的信息是否是自己需要的,从而可以迅速缩小范围细致寻找或者浏览下一个区块,比如yahoo的首页,从大块上来看,用户很容易分辨出4个大区块,每个区块里面又有小的区块。
1 方块感越强越能给用户方向感。
2 方块越少越好。
3 尽量用留白做视觉区分。

对齐和间距
视觉设计最简单,也是最容易忽略的就是对齐。检查的方法就是查看每个方块中的边线,方块与方块之间的边线,尤其是纵向维度。
间距的一般规律:字距小于行距,行距小于段距,段距小于块距。检查的方法可以尝试将网站的背景图案、线条全部去掉,看是否还能保持想要的区块感。

拿淘宝的新首页举个细节的例子(右边是我调整后的)。有时候我们不需要花心思做多么漂亮的图标和颜色搭配,用心地调整好网站的每一个像素或许也能让它焕然一新。

主次关系
怎么对用户引导的关键就在于怎么处理主次关系。说白了就是对比,从视觉的角度上看:形状的大小,颜色,摆放的位置都会影响信息的重要与否
从大的区块来看,不要平均分割页面,三栏的设计应该让其中一栏明显短一些。
从局部来看,也要把握信息呈现的节奏,比如yahoo中间新闻栏的设计,大图带大标题是第一要点,小图带字是第二要点,纯文本第三,节奏感、主次关系非常强。

常见问题
1 视觉设计师不懂代码,前端设计师在视觉方面又不专业。常常是实现出来的产品跟视觉设计出来的图片有所偏差。建议视觉设计师跟进调整。
2 广告图片破坏视觉效果。如果网站足够牛的话,可以让广告方遵循视觉规范。如果不行的话,起码设计师还能决定广告的尺寸,位置等等。

写这篇文章刚刚赶上4月份新浪、腾讯、淘宝的首页改版。单纯从视觉设计的角度上看,腾讯非常清爽,很用心。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_825256.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

国外web设计教程资源网站收集

作者authorSawser来源http://sawse.com/2007/11/21/top-12-sites-and-tools-for-web-design-and-inspiration/不管你是专业还是业余的网页设计者,或者仅仅想了解一下网页设计是何物的,这里有些好棒的资源值得去浏览并收藏。这些收藏涵盖了各种设计类型&a…

互联网上最独特的20个网站

当你在创建一个新的网站的时候,一个版面独特的网页总会在不经意间激发你的灵感。不知道这些使用背景图片产生强烈视觉冲击的页面有没有给你带来设计灵感。1, http://www.popmatik.co.uk/ 2, Digitalmash.com 3,Melissahie.com 4&a…

60 个激发你灵感的电子商务网站展示

电子商务多火啊,可是多数电子商务网站做得都很垃圾,这里列出了 60 个设计精美的电子商务网站,你值得看看。 Heart Breaker Fashion Here You Buy Vintage-inspired Fashion Shop Sanctuary T Shop Sancuary T Showcases Awesome Beauty And H…

在线医生预约网站ZocDoc获高盛2500万美元C轮投资

据美国科技博客techcrunch报道,在上个月获得俄罗斯风投机构DST 5000万美元投资之后,位于纽约的在线医生预约网站 ZocDoc昨日在其C轮融资中又从高盛投资公司募集2500万美元,这使得ZocDoc公司C轮融资总额达到了7500万美元。至此,该公…

Box of Bundles:免费设计资源网站

Box of Bundles 网址:http://www.boxofbundles.com 地点:美国 创立时间:2012年2月 用户群:设计师 Box of Bundles 是一个免费提供创意设计资源的新网站。类似酷站之前推荐过的免费的设计资源素材网站 Premium Pixels,都…

给你的网站加上站内搜索---Compass入门教程

Compass(基于Lucene)入门教程 1 序言 2 Compass介绍 3 单独使用Compass 4 springhibernate继承compass 4-1 jar包 4-2 配置文件 4-3 源代码 4-4 说明 4-5 测试 5 总结下吧 1 序言 这些天一直在学点新的东西,想给毕业设计添加点含量,长时间的…

想学习建个网站?WAMP Server助你在Windows上快速搭建PHP集成环境

我想只要爬过几天网的同学都会知道PHP吧,异次元的新版本就是基于PHP的WordPress程序制造出来的,还有国内绝大部分论坛都是PHP的哦。据我所知很多同学都想要试着学习一下PHP,无奈要在Windows下安装搭建好一个PHP环境来学习对于菜鸟同学来说繁琐…

计算机组成原理移位图,逻辑运算和移位指令-计算机组成原理与汇编语言-电子发烧友网站...

3.4.1 逻辑运算和移位指令 1.逻辑运算指令(1)NOT OPRD该指令对操作数进行求反操作,然后将结果送回。操作数可以是寄存器或贮器的内容。该指令对标志位不产生影响。例如: NOT AL(2)AND指令该指令对两个操作数进行按位相“与”的逻辑运算。即只有参加相与的…

IE浏览器中用Firebug调试网站的方法

对于大部分做前端设计者而言应该都使用过Firefox浏览器下一款调试网站的扩展插件firebug吧,功能非常的强大,对于我们找出网页兼容性的问题非常的有效。不过对于很多不喜欢使用Firefox浏览器的开发者而言,那么IE浏览器有没有类似的插件呢&…

那些香喷喷的网站

1、蓝奏云网盘:为用户而变革,越简单越好,越快越好 ! https://pc.woozooo.com/ 网盘工具,无限制的储存空间。最重要的是下载速度毫无限制,你的网速有多快下载速度就有多快! 2、docsmall&#xf…

查看php网站瓶颈,使用XHProf查找PHP性能瓶颈

XHProf是facebook 开发的一个测试php性能的扩展,本文记录了在PHP应用中使用XHProf对PHP进行性能优化,查找性能瓶颈的方法。安装Xhprof扩展$ wget http://pecl.php.net/get/xhprof-0.9.4.tgz$ tar -zxvf xhprof-0.9.4.tgz$ cd xhprof-0.9.4$ cd extension…

Linux康乐备份,Kangle(康乐)ep控制面板备份网站数据和恢复的教程

【原创版权所有】其他拓展文章:强烈推荐!如果大家希望自动备份并异地保存数据,请访问KOS工具箱 – Kangle EP云备份:KOS云备份,是KOS工具箱推出的第一款付费服务。它可以帮助您每日自动备份Kangle EP所有主机数据。并且…

CSU前端网站 +登陆系统

实现CSU网站主页,并设计实现一个简单全栈登陆系统 实现要求短信验证码实现:臻子云关键功能解析运行结果实现要求 1)前端页面的基本布局 布局类似于学校门户顶部需有 LOGO 栏目;提供轮播图;提供账号密码登录方式&…

Linux中搭建静态网站(练习题)

在rhel8的系统上搭建网站:该网站ip地址主机位为11,设置documentroot为/www/你的名字拼音的缩写,网页内容为:my name is… 做题思路: #面对这类的题目,确定好做题思路: #配置题目要求的IP地址关…

搭建https的静态网站

搭建一个基于https://www.zuoye.com访问的web网站,网站首页在/www/https/,内容为exercise。 思路: #思路:准备好https所需要的东西关闭防火墙及SElinux创建目录编写网页内容编写配置文件https相关的东西: [rootloca…

网站架构方案全解析

1、HTML静态化其实大家都知道,效率最高、消耗最小的就是纯静态化的html页面,所以我们尽可能使我们的网站上的页面采用静态页面来实现,这个最简单的方法其实也是最有效的方法。但是对于大量内容并且频繁更新的网站,我们无法全部手动…

[au3]下载css文件里的图片,保存别人的网站时有用。

;by onepc 153785587 #NoTrayIcon#Region ;**** 参数创建于 ACNWrapper_GUI ****#AutoIt3Wrapper_iconC:\windows\system32\SHELL32.dll|-123#EndRegion ;**** 参数创建于 ACNWrapper_GUI ****#include <INet.au3>#include <ButtonConstants.au3>#include <Edit…

老鸟传经:做网站的实用建议

做网站现在似乎是每个企业或团队都必做的一项工作了——不管你所在的行业是不是和互联网相关。我平均每周都会接到一两个朋友的电话问&#xff1a;我们要做一个网站&#xff0c;该用什么技术&#xff0c;PHP、Java还是.NET&#xff1f;我们该从哪里请开发人员&#xff1f;我们现…

可以判断用户打开页面次数吗?_SEO搜索优化,你可以不做外链吗?

自从2015年谷歌建立了Rainbrain&#xff0c;利用机器学习对内容分析与判断以后&#xff0c;很多SEO专家就开始讨论一个问题&#xff0c;SEO关键词排名&#xff0c;我们是不是可以不需要发布链接了&#xff0c;虽然百度也在一度强调&#xff1a;我们将逐渐摒弃技术排名的方法&am…

python抓取网站图片_实例详解Python实现简单网页图片抓取

本文主要介绍了Python实现简单网页图片抓取完整代码实例&#xff0c;具有一定借鉴价值&#xff0c;需要的朋友可以参考下。 利用python抓取网络图片的步骤是&#xff1a; 1、根据给定的网址获取网页源代码 2、利用正则表达式把源代码中的图片地址过滤出来 3、根据过滤出来的图片…