页面表达常用方式
作者：丽君 来源：Tencent CDC Blog 发布时间：2010-05-27 12:42:00
标签：设计师,页面,视觉
《页面表达常用方式》是整个“web交互设计方法”中的一部分：
设计师在设计页面时，应该在页面上建立许多视觉层次，引导用户的视觉焦点。把用户的注意力吸引到最重要的元素上，然后才把视线引导到其他重要程度次要的信息上。这样便于用户快捷迅速地找到自己所需，更好的完成阅读、浏览任务。这里介绍几种页面表达的常用方式。
一、页面的浏览顺序
对用户扫描页面的时候进行视线跟踪，这叫做“视觉流”。好的设计能够让人们按照顺畅的次序沿着它向前流动。人们一般的习惯是从左到右、从上到下。
从左至右，从上到下：长期以来，用户已经习惯了从左至右、从上到下的阅读习惯，所以页面设计的时候我们需要让浏览者从一个方向上看文字，用户的视线从左至右、从上到下的，这样做会更快更有效。不要让文字排列成这样：
这样的排列也可以，仍是从左至右、从上到下：
按钮要放在右边：
左上角优先：下图中，亮度越高、越集中的地方，说明被关注的越多：
从上到下，从左到右是默认的视觉流方向。强烈的焦点会首先吸引眼球，然后才是次要信息的。
所以，在浏览顺序上靠前、靠上的位置，即先被看到的位置，是容易被关注和记忆的地方，即“左上角优先”。因为日常中人们往往没有充足的时间浏览网页，或在很快地获取需要的资讯后即停止浏览或转连到其它网页，所以左上角常常成为视觉焦点。
0
投稿猜你喜欢
- 这两条是关于IE环境中的CSS的。不要使用import引入CSS，可以避免内容的无样式瞬间（FOUC）问题。不要把样式的link放到页面后（
一．雅黑设计理念 雅黑字体是为微软公司设计的屏幕显示汉字。它具有个性独特、结体优美、识别性强、块状效果好、显示清晰等优点。在当今数字化时代更- 运行下面的代码你就可以清楚的认识到这两个参数的用法,innerText只能动态的改变指定元素内的文本内容，而innerHTML则不仅仅可以改
- 中国互联网协会与Google(谷歌)公司联合主办“Internet+ 互联网世纪论坛”，AJAX技术的发明人Jesse James Garr
- 迭代器模式迭代器模式（Iterator Pattern）是一种常用的设计模式，用于遍历集合中的元素，不暴露集合的内部结构。迭代器模式将集合和
- 网站域名一般都会选简短易记的，因为这对于网站宣传来说也可以省不少力。而被很多网站忽视的站内Url结构则在一定程度上反映出网站的整体架构。当设
- QQ影音至9月发布之后一直口碑很好，视觉界面和交互设计也颇受好评，这是设计师们努力的结果，也是众多用户反馈的功劳。我们希望可以提供更多价值回
- 利用ACCESS可以用查询创建视图这一功能来进行查询分析。选择查询->在设计视图中创建查询，然后关闭弹出的表选择对话框，在下面的窗口上
- 阅读上一篇：浏览器中的内存泄露 4.内存泄露的解决方案显式类型转换 首先说说最容易处理的情况 对于类型转换造成的错误，我们可以通过显式类型转
- 这里所说的“小偷”指的是在ASP中运用XML中的xmlhttp组件提供的强大功能，把远程网站上的数据（图片，网页及其他文件）抓取采集到本地，
- javascript版 俄罗斯方块（Russian box）小游戏，喜欢的朋友可以玩玩。对源代码感兴趣的朋友也可以研究一下。玩法介绍：可以输
- Application对象 Application对象是个应用程序级的对象，用来在所有用户间共享信息，并可以在Web应用程序运行期间持久地保
- 代码如下: Function NumberSplit(num) Dim i,length length=Len(num) For i=1 T
- 对于个人用户来说，除了病毒和木马，网页中的隐形代码也开始严重地威胁着我们的安全，但大多数人却缺乏自我保护意识，对隐形代码的危害认识不够，甚至
- 你是否发现，在浩如烟海的应用程序堆里，具有漂亮图标和清爽名字的 App 更容易被用户喜爱。作为开发者，面对这自己的作品，能否自问一句：“从图
- 阅读上一篇：什么是名字空间<meta http-equiv="Content-Type" co
- 八卦是种优良品质，特别是用在技术上时。来看几个Reset CSS的八卦问题吧：你知道世界上第一份reset.css在哪么？*&nb
- 给输入框加个动态背景图<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi
- 二级域名的解析指向ASP源代码，懂程序的人一看就明白怎么实现了。呵呵！真简单<％@ LANGUAGE =&nb
- 主要利用了XMLHTTP的一些方法和属性来获取服务器的信息。 以下是全部源代码： &
