• ----:)欢迎访问源码网(:----
    • 首页
    • 博客
    • 学院
    • 下载
    • 论坛
    • 影视
    • 发布源码
    • RSS
    • ITPig
    • 笑话网
    • 百家姓
    • 繁體中文

源码网 - 中国第一源码门户
选择镜像:网通镜像 - 电信主站
  • 首 页
  • 新闻动态
  • 网站运营
  • 网页制作
  • WEB开发
  • 编程开发
  • 图像媒体
  • 操作系统
  • 数据库
  • 服务器
热门搜索 优化 SEO 故事 cms IIS7 MySQL 个人 AdSense 主题推广 | 文章搜索: 高级搜索
会员登录/控制面版您的位置: 学院首页 >> 网页制作 >> 设计理念 >> 详细内容
 

推荐文章

  • [译文]交互性被认为是有害的
 
 

热点文章

  • 45个杰出的博客设计
  • 用Dreamweaver实现ASP动态网站建设
  • Dreamweaver网页制作技巧:使用模板
  • 学习参考:用Dreamweaver+ASP实现网页分页
  • 思域:网站架构之首页的架构!
  • 在Dreamweaver中插入有颜色的直线
  • Dreamweaver制作网页的图片应用技巧
  • 肤浅网页设计
  • Dreamweaver基础教程:层及其应用
  • 十二个Dreamweaver鲜为人知的小秘诀
  • 如何用Dreamweaver批量做web网页
  • 用Dreamweaver和ASP实现分页技术的参考
 
 

相关文章

  • 微软IIS服务器漏洞 数十万的网站被攻破
  • SNS网站不是媒体
  • 5亿美元网站再次诞生!谈「自营者」与「长尾2.0」趋势
  • 网站就象自己的孩子一样培养
  • 康盛创想戴志康:黏性强的网站有前途
  • 分类信息、折扣信息网站的“落地”运营思路
  • comScore公布3月网站流量排行 雅虎仍旧第一
  • 同一IP下网站的质量和网站的相关性以及网站的作弊
  • 对网站使用ASP+ACCESS的一个忠告
  • 网站简单有效运营全过程
  • 可曾想过您的网站也会改变来访者的一生?
  • 建设一个手机彩壳网站的策划书
 
 

百度搜索

 
 

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

  • 阅览次数:
  • 文章来源: 懒得设计
  • 原文作者:
  • 整理日期: 2008-04-12
  • 发表评论
  • 字体大小:
  • 小
  • 中
  • 大

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

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

对齐和间距
视觉设计最简单,也是最容易忽略的就是对齐。检查的方法就是查看每个方块中的边线,方块与方块之间的边线,尤其是纵向维度。
间距的一般规律:字距小于行距,行距小于段距,段距小于块距。检查的方法可以尝试将网站的背景图案、线条全部去掉,看是否还能保持想要的区块感。
shijue3.jpg
拿淘宝的新首页举个细节的例子(右边是我调整后的)。有时候我们不需要花心思做多么漂亮的图标和颜色搭配,用心地调整好网站的每一个像素或许也能让它焕然一新。

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

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

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

上一篇:比AcdSee功能还强大的图片处理、编辑软件,推荐下载!
下一篇:ASP上传漏洞防范
  • 网友评论:
  • 查看所有评论
  • 我要发表评论
您的网名:
留言主题:
你要发表的内容:

 

关于本站 | 广告联系 | 版权声明 | 网站地图 | 发布软件 | 帮助中心 | 源码论坛

Copyright © 2005-2007 CodePub.Com  程序支持:木翼  滇ICP备05005971号