页面表达常用方式
作者：丽君 来源：Tencent CDC Blog 发布时间：2010-05-27 12:42:00
标签：设计师,页面,视觉
《页面表达常用方式》是整个“web交互设计方法”中的一部分：
设计师在设计页面时，应该在页面上建立许多视觉层次，引导用户的视觉焦点。把用户的注意力吸引到最重要的元素上，然后才把视线引导到其他重要程度次要的信息上。这样便于用户快捷迅速地找到自己所需，更好的完成阅读、浏览任务。这里介绍几种页面表达的常用方式。
一、页面的浏览顺序
对用户扫描页面的时候进行视线跟踪，这叫做“视觉流”。好的设计能够让人们按照顺畅的次序沿着它向前流动。人们一般的习惯是从左到右、从上到下。
从左至右，从上到下：长期以来，用户已经习惯了从左至右、从上到下的阅读习惯，所以页面设计的时候我们需要让浏览者从一个方向上看文字，用户的视线从左至右、从上到下的，这样做会更快更有效。不要让文字排列成这样：
这样的排列也可以，仍是从左至右、从上到下：
按钮要放在右边：
左上角优先：下图中，亮度越高、越集中的地方，说明被关注的越多：
从上到下，从左到右是默认的视觉流方向。强烈的焦点会首先吸引眼球，然后才是次要信息的。
所以，在浏览顺序上靠前、靠上的位置，即先被看到的位置，是容易被关注和记忆的地方，即“左上角优先”。因为日常中人们往往没有充足的时间浏览网页，或在很快地获取需要的资讯后即停止浏览或转连到其它网页，所以左上角常常成为视觉焦点。
0
投稿猜你喜欢
- 本文实例讲述了Python网络编程之TCP套接字简单用法。分享给大家供大家参考，具体如下：上学期学的计算机网络，因为之前还未学习python
本文实例讲述了Python查找最长不包含重复字符的子字符串算法。分享给大家供大家参考，具体如下：题目描述请从字符串中找出一个最长的不包含重复- 这几天写代码中遇到的一个常见问题，在Python中如何批量的生成一些变量，如生成变量X1, X2, X3，并在后续的方法中调用，完成赋值、取
- 关于substr、substring和slice方法区别的文章，网上搜到了许多，文章内容也基本一致。而后，我将其中一篇文章中的代码挪到本地进
- 从98年某月某日我的第一个个人猪页诞生.到2008年的今天.宣告了我从事设计行业整整十年.十年,很多变化,从摆弄个人猪页到现在以做设计为生,
- 本文实例讲述了Python实现计算两个时间之间相差天数的方法。分享给大家供大家参考，具体如下：#-*- encoding:UTF-8 -*-
- 本文实例为大家分享了Python实现图片格式转换的具体代码，供大家参考，具体内容如下碰上这样一个情景：我从网络上下载了一张表情包图片，存放在
- 1.关系模型：用二维表格结构表示实体集，外键表示实体间联系的数据模型称为关系模型。关系模型是由若干个关系模式组成的集合。2.关系模式：关系模
- 通常报表都存储在一个地方，但是在单独的文件中。随着文件数量的增加在结构和搜索上也困难多多，针对这个问题，我遇到了一个非常有趣的报表对象属性&
- 在python中安装非自带python模块，有三种方式:1.easy_install2.pip3.下载压缩包(.zip, .tar, .ta
- 前言当我们开始准备数据建模、构建机器学习模型的时候，第一时间考虑的不应该是就考虑到选择模型的种类和方法。而是首先拿到特征数据和标签数据进行研
- 一、安装首先根据自己的python版本下载pyqt4离线包，现在连接：https://www.lfd.uci.edu/~gohlke/pyt
- 一个JavaScript代码编写的图片展示特效，效果很棒。效果图：演示：<!DOCTYPE HTML PUBLIC "-//
- 前提：因为本文主要围绕着在thinkPHP5中使用redis的，所以关于redis的安装就不特意说明了，不过在这稍微提醒一下，安装完redi
- JavaScript使用if () { ... } else { ... }来进行条件判断。例如，根据年龄显示不同内容，可以用if语句实现如
- 阅读上一篇：FrontPage2002简明教程六：图片库 虽然FrontPage已经给我们提供了很多面很强大的所见即所得的工具，但是随着HT
- 析构函数__del__定义:在类里定义，如果不定义，Python 会在后台提供默认析构函数。析构函数__del__调用：A、使用del 显式
- 内容摘要：最近逛论坛经常看到有朋友问上传文件怎么重命名，怎么以当前日期来重命名上传文件。现在我就介绍一下重命名的方法，希望对大家有所帮助。本
- 数据库复制就是由两台服务器，主服务器和备份服务器，主服务器修改后，备份服务器自动修改，在以前的文章中已经做了详细的说明，这里就不在重复.使用
- 分享炫酷的前端页面随机二维码验证，供大家参考，具体内容如下直接上代码<％@ page contentType="text/h
