页面表达常用方式

《页面表达常用方式》是整个“web交互设计方法”中的一部分:

设计师在设计页面时,应该在页面上建立许多视觉层次,引导用户的视觉焦点。把用户的注意力吸引到最重要的元素上,然后才把视线引导到其他重要程度次要的信息上。这样便于用户快捷迅速地找到自己所需,更好的完成阅读、浏览任务。这里介绍几种页面表达的常用方式。

一、页面的浏览顺序

对用户扫描页面的时候进行视线跟踪,这叫做“视觉流”。好的设计能够让人们按照顺畅的次序沿着它向前流动。人们一般的习惯是从左到右、从上到下。

从左至右,从上到下:长期以来,用户已经习惯了从左至右、从上到下的阅读习惯,所以页面设计的时候我们需要让浏览者从一个方向上看文字,用户的视线从左至右、从上到下的,这样做会更快更有效。不要让文字排列成这样:

这样的排列也可以,仍是从左至右、从上到下:

按钮要放在右边:

左上角优先:下图中,亮度越高、越集中的地方,说明被关注的越多:

从上到下,从左到右是默认的视觉流方向。强烈的焦点会首先吸引眼球,然后才是次要信息的。

所以,在浏览顺序上靠前、靠上的位置,即先被看到的位置,是容易被关注和记忆的地方,即“左上角优先”。因为日常中人们往往没有充足的时间浏览网页,或在很快地获取需要的资讯后即停止浏览或转连到其它网页,所以左上角常常成为视觉焦点。

对齐

在内容排版的设计中,把内容右对齐,会形成一种良好的双重边界,该边界沿着这一组对象的中间向下延伸(利用了格式塔原则——连续性原则),这样带来的好处是加强了边界引导读者的眼光平滑向下延伸,有助于形成良好的视觉流。如下图:

时间: 2024-09-14 17:59:19

页面表达常用方式的相关文章

web交互设计方法:页面表达常用方式

<页面表达常用方式>是整个"web交互设计方法"中的一部分: 设计师在设计页面时,应该在页面上建立许多视觉层次,引导用户的视觉焦点.把用户的注意力吸引到最重要的元素上,然后才把视线引导到其他重要程度次要的信息上.这样便于用户快捷迅速地找到自己所需,更好的完成阅读.浏览任务.这里介绍几种页面表达的常用方式. 一.页面的浏览顺序 对用户扫描页面的时候进行视线跟踪,这叫做"视觉流".好的设计能够让人们按照顺畅的次序沿着它向前流动.人们一般的习惯是从左到右.从上

JavaScript实现页面跳转的几种常用方式_javascript技巧

本文实例讲述了JavaScript实现页面跳转的几种常用方式.分享给大家供大家参考,具体如下: 第一种: <script language="javascript" type="text/javascript"> window.location.href="login.jsp?backurl="+window.location.href; </script> 第二种: <script language="j

Silverlight实用窍门系列:37.Silverlight和ASP.NET相互传参的两种常用方式(QueryString,Cookie)【附带实例源码】

在本节中将讲述Silverlight和ASP.NET页面的相互传参的两种常用方式:Cookie和QueryString.首先我们新建一个名为SLConnectASP.NET的Silverlight应用程序,然后在SLConnectASP.NET.web项目中添加一个Index.aspx的页面. 一.Silverlight和ASPX页面的QueryString传参 实现思路:在Silverlight端跳转到页面到Index.aspx并且传递一个QueryString参数ID,在该Index.asp

臭鱼:页面表达原则

<页面表达原则>是整个"web交互设计方法"中的一部分:页面表达原则概述:1.更少的信息量更好.2.不提供多余的功能.3.结构化更易于理解.4.信息的表达应该清楚.明确.直接.5.操作可识别.6.操作前,结果可预知.7.操作时,操作有反馈.8.操作后,操作可撤销.9.让用户知道身处何地.10.避免内容看上去象广告.11.同一功能在不同页面上位置相同.12.措辞统一. 详细描述:1.更少的信息量更好.用户不是在阅读网站,而是在浏览网站.他们浏览与自己目标匹配的文字和图片,冗长

页面构建事半功倍:页面构建常用的一些小工具

文章简介:我们将在本文中介绍一些关于页面构建常用的一些小工具,大部分是基于firefox的插件,通过这些小工具可以让我们在页面构建中事半功倍. 我们将在本文中介绍一些关于页面构建常用的一些小工具,大部分是基于firefox的插件,通过这些小工具可以让我们在页面构建中事半功倍. 页面bug调试工具–Firebug 实时测量工具–Measureit 实时颜色选取工具–Colorzilla SEO优化工具–SenSEO CSS使用效率优化工具–CSS usage 网页截图存储工具–Pearl cres

web交互设计方法:页面表达原则

<页面表达原则>是整个"web交互设计方法"中的一部分:页面表达原则概述:1.更少的信息量更好.2.不提供多余的功能.3.结构化更易于理解.4.信息的表达应该清楚.明确.直接.5.操作可识别.6.操作前,结果可预知.7.操作时,操作有反馈.8.操作后,操作可撤销.9.让用户知道身处何地.10.避免内容看上去象广告.11.同一功能在不同页面上位置相同.12.措辞统一. 详细描述:1.更少的信息量更好.用户不是在阅读网站,而是在浏览网站.他们浏览与自己目标匹配的文字和图片,冗长

多个表格查询合并至单一声明的常用方式

在对跨多个表格的数据进行组合时,有时很难搞清楚要使用哪一个SQL句法.我将在这里对将多个表格中的查询合并至单一声明中的常用方式进行阐述. 在这篇文章中的样本查询符合SQL92 ISO标准.不是所有的数据库生产商都遵循这项标准,而且很多厂商采取的提升措施会带来一些意料不到的后果.如果你不确定你的数据库是不是支持这些标准,你可以参看生产厂商的有关资料. SELECT 一个简单的SELECT声明就是查询多个表格的最基本的方式.你可以在FROM子句中调用多个表格来组合来自多个表格的结果.这里是一个它如何

springMVC 几种页面跳转方式

前面已经了解了Controller的几种配置方式 今天主要写一下响应界面跳转的几种方式 1.在注解的方式中 1.1通过HttpServletResponse的API直接输出(不需要配置渲染器) controller类的主要代码 @Controller public class RequestController{ @RequestMapping("/resp") public void handleRequest(HttpServletRequest req, HttpServletR

Windows校验文件哈希的两种常用方式

大家经常都到哪儿去下载软件和应用程序呢?有没想过下载回来的软件.应用程序或资源是否安全呢?在 Windows 10 和 Office 2016 发布当初,很多没权限的朋友都使用第三方网站去下载安装映像.而大家如何保证自己下载回来的映像或软件就是官方版本,而没有被别人篡改过呢? 很多朋友会想到将下载回来的资源校验 MD5 或 SHA1 与官方版哈希值进行对比,如果无误则表示未被篡改.大家平常在 Windows 中都使用何种工具算校验值呢?本文向大家推荐 Windows 校验文件哈希的两种常用方式.