网站的视觉路径和版式设计
cooper谈到用户的视觉路径一般是：从上到下，从左到右。
好的视觉设计路径应该是顺应这样的用户习惯，糟糕的设计会让用户无所适从，焦点到处都是。
当然，上图的视觉路径图并非绝对的，浏览习惯因人而异。
网站中方块
因为人们从接触信息以来，信息的呈现就是以方块式存在：报纸、书，单个字成点，一行字成线，一段字成面，而这个面当然是以方形呈现的效率最高。网站的视觉设计大部分其实都是在拼方块。
网站中的方块能很好地引导用户的视觉路径，用户可以通过区块来分辨这个区域的信息是否是自己需要的，从而可以迅速缩小范围细致寻找或者浏览下一个区块，比如yahoo的首页，从大块上来看，用户很容易分辨出4个大区块，每个区块里面又有小的区块。
1 方块感越强越能给用户方向感。
2 方块越少越好。
3 尽量用留白做视觉区分。
对齐和间距
视觉设计最简单，也是最容易忽略的就是对齐。检查的方法就是查看每个方块中的边线，方块与方块之间的边线，尤其是纵向维度。
间距的一般规律：字距小于行距，行距小于段距，段距小于块距。检查的方法可以尝试将网站的背景图案、线条全部去掉，看是否还能保持想要的区块感。
拿淘宝的新首页举个细节的例子(右边是我调整后的)。有时候我们不需要花心思做多么漂亮的图标和颜色搭配，用心地调整好网站的每一个像素或许也能让它焕然一新。
主次关系
怎么对用户引导的关键就在于怎么处理主次关系。说白了就是对比，从视觉的角度上看：形状的大小，颜色，摆放的位置都会影响信息的重要与否。
从大的区块来看，不要平均分割页面，三栏的设计应该让其中一栏明显短一些。
从局部来看，也要把握信息呈现的节奏，比如yahoo中间新闻栏的设计，大图带大标题是第一要点，小图带字是第二要点，纯文本第三，节奏感、主次关系非常强。
常见问题
1 视觉设计师不懂代码，前端设计师在视觉方面又不专业。常常是实现出来的产品跟视觉设计出来的图片有所偏差。建议视觉设计师跟进调整。
2 广告图片破坏视觉效果。如果网站足够牛的话，可以让广告方遵循视觉规范。如果不行的话，起码设计师还能决定广告的尺寸，位置等等。
写这篇文章刚刚赶上4月份新浪、腾讯、淘宝的首页改版。单纯从视觉设计的角度上看，腾讯非常清爽，很用心。
网站的视觉路径和版式设计相关推荐
- 视频教程-网站与APP中的版式设计、色彩搭配和创意思维-UI
网站与APP中的版式设计.色彩搭配和创意思维 专注提供优质教学内容 CSDN就业班 ¥208.00 立即订阅 扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订阅课程,领取优惠, ...
- 网站与APP中的版式设计、色彩搭配和创意思维-CSDN就业班-专题视频课程
网站与APP中的版式设计.色彩搭配和创意思维-93人已学习 课程介绍 本课程通过对实际案例的分析,将设计中的重要理论知识 重现案例中,理解并吸收:版式设计,色彩单配和创意设计理论. 课 ...
- 版式设计与创意 pdf_恋爱与版式
版式设计与创意 pdf Since its beginnings, Libération has been characterized by a very distinctive use of ty ...
- 版式设计：什么是“三率一界”？
本文讲述了版式设计中的三率一界的概念.三率指的是版面率,图版率和跳跃率:而一界指的是视觉界限,简称视界. 很久没有动笔更新文章了,之前写过一篇<设计干货:点.线.面在版式设计中的作用>,那 ...
- 计算机网络多元化媒体传达,网页版式设计的特征及其视觉元素
网页版式设计的特征及其视觉元素发布者:本站 时间:2020-05-02 14:05:53 基本的静态网页版式都会将版式模块化的分布于页面中,如同报纸当中的编排一样,犹如一个个的屏幕和窗口.从版 ...
- 超实用！移动端界面中的版式设计原理(下)
编者按:昨天分享了justinlam总结的移动版式设计原理前3条,今天继续下一篇,这篇聊聊留白的艺术和视觉心理学,同样的好顶赞,来收. 本文是下篇,上篇教程戳这里→<超实用!移动端界面中的版式设 ...
- 超实用！移动端界面中的版式设计原理(上)
justinlam:"我总觉得页面不太好看但是我又说不出来","我不懂设计,但是我就是觉得不协调","你觉得这好看?你的审美要加强啊"这些听 ...
- 网格设计版式设计_Web设计中网格的全面介绍
网格设计版式设计 如果您从未涉嫌在设计中使用网格,那么本文将为您撰写. 在其中,您将学习基本的术语,理论,并通过真实的网站示例了解如何在野外使用网格. 主题 在本指南中,我们将介绍很多内容,包括: 网 ...
- UI界面如何制作？这些版式设计小技巧收藏好！
本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享 UI界面如何制作?这些版式设计小技巧收藏好!在做UI界面的时候,很多时候我们需要去看很多的产品进行竞品分析.市场调研 ...
最新文章
- 比Python 3.8快20%，Pyston v2正式发布
- 图灵访谈系列之一：陈世欣谈产品经理与社区
- 二十六个月Android学习工作总结
- HDU4416(后缀自动机)
- Cloud for Customer系统里的附件url，可以通过partner编程自己生成么？
- JavaScript——使用对话框
- java loadonstartup_java的web配置文件的“load-on-startup0/load-on-startup”一个问题
- 怎样高效入门 Vue?
- JAVA 函数式接口存在
- 服务器系统时间提前八小时,windows服务器时间少八小时
- padding不显示背景色_PS常用快捷键有哪些？小白职场必备快捷键，再也不担心被难到...
- idea 2019最新版无法打开报错问题，Error occurred during initialization of VM Initial heap size set to a larger va
- IE6下链接onclick事件处理中的请求被aborted
- Docker删除镜像是报错:Error response from daemon: conflict: unable to remove repository reference “xxx“
- mysql 怎么加读锁_MYSQL—加写锁，加读锁，解锁
- 2018年研究生数学建模优秀论文汇总
- 65W氮化镓Switch底座扩展坞方案
- 元气骑士（联机版）java合作大作业
- 漫威超级争霸战怎么用电脑玩 漫威超级争霸战模拟器教程
- Oxyplot实时绘图学习笔记（上）