张经纬的博客-分享互联网

用户体验小记

用户体验是一门大学问,简单的记录下刚刚想到的东西。

1、文字颜色
页面的主题是文字,而文字一般可分为三类,栏目区、内容区、广告区。在设计页面的时候,应该有意识的通过文字颜色来区分这三种不同的区域。需要注意的是,内容区和栏目区应该取同一色系并且与背景鲜明对比的颜色,颜色不要刺眼。广告区通常采用浅蓝色,也因设计而异。

2、背景颜色
背景颜色与文字颜色应该相互匹配,常见的背景色有黑色,白色,淡黄色。浅色系的背景凸显内容,一般用于门户网站,深色系的背景凸显画面,一般用于游戏类网站。另外,这里我很喜欢用不同的颜色标注不同的功能区。 :)

3、版面
常见的版面分为一列,二列,三列,同时也分为固定布局,弹性布局,液态布局。通常门户网站使用三列布局以加载大量的信息,游戏网站常使用二列以突出游戏主题内容,引导页,结果页使用一列布局,直观,内容最少。固定布局使用像素设置宽度,弹性布局使用em设置宽度,液态布局使用百分比设置宽度。

4、从左往右?从友往左?
04年的F形网页浏览轨迹误导了很多人,至少我身边的人都认为,人们看页面内容的时候是从右向左看,其实不然,F形网页浏览轨迹的前提是在主题区域内容采用F形方式浏览。
f_reading_pattern_eyetracking
换而言之,人们会从<div id=”main”>的区域开始浏览。
因此切忌当使用三栏或者二栏布局的时候,要区分开left main right。(网易新页面改版让很多人不舒服的原因就在这里)

5、大多数
大多数喜欢的事情就是最好的事情,哪怕你一点也不喜欢它。

放在这里,慢慢更新,今天想到了这么多。

原文链接(4 views)|沙发已被占领(1)

WCAG 2.0 and Link Colors (转载)

WCAG 2.0 requires that the foreground and background colors have a 4.5:1 contrast ratio at Level AA and a 7:1 contrast ratio at Level AAA. You can use our contrast checker tool to determine what the ratio is between any foreground and background color.

WCAG 2.0 also requires (at Level A) that color not be used as the sole method of conveying content or distinguishing visual elements. They further define this requirement for links with Technique G183, which states, “Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them.” This means that if you do not underline your links (or provide some other non-color designator for links), that the links must be sufficiently different in contrast from the surrounding text.

So if you combine these two requirements, in order to be Level AA conformant, your page must have all of the following:

  • A 4.5:1 contrast between the non-link text color and the background.
  • A 4.5:1 contrast between the link text color and the background.
  • A 3:1 contrast between the link text color and the surrounding non-link text color.

In other words, your link color has to be significantly different from the background color AND the surrounding text color, which also has to be significantly different from the background color.

点击这里查看文章详细 »

原文链接(34 views)|暂无评论(赶紧抢沙发)