网页设计原则-页面主要元素

站点ID

要让站点ID保持在最醒目的位置,往往是左上角。这样做可以让用户知道我还在这个网站。

页面名称

页面名称就是这个网页的名称,告诉人们这个页面是什么,对每个页面来说,页面名称都是不可缺失的。

它应该是出现在涵盖这个页面所有内容的位置。

应该足够的醒目,字体大小足够大,颜色易分辨,有一定留白来凸显内容。

名称和你所点击的链接的名称一致。名称不一致的话,就消耗用户对网站的信任。

实用工具

使用工具一般是网站相关的,帮助我们使用站点,或提供网站信息的按钮。一般使用工具可以一起放在一个地方,通常是网站的下方,也可以挑选其中几个最重要的放在主导航栏。

搜索按钮

一般用户浏览网站分为两种方式,一种是使用导航,一种是使用搜索。因此,搜索按钮对一个网站来说也是最重要的一部分,除非你的网站不需要太多的搜索。

搜索按钮的组成:一个输入框,一个按钮,一个名称。其他的一切都不需要。

提供选项的搜索:当我搜索出来的内容太多,需要进行筛选的时候,才提供搜索选项。

沉浸式搜索

回到主页按钮

一个明显清晰的回到主页,可以让用户在做错了任何步骤之后都能回到主页重来,不会不知所措。

固定导航

如果人们在你的网站上找不到方向,人们不会使用你的网站。

导航是固定在网页的,给人以安心的感觉。

导航可以告诉我们当前的位置:当前位置应该是显眼易分辨的。

导航可以告诉我们如何使用网站。

导航已经成为了一种习惯用法。

某些页面是不需要固定导航的

主页。主页承担的任务和其他页面不一样,往往是让用户明白这个网站所具有的内容。而持久导航的目的是让用户不迷路,比如在你刚进入超市的时候,是不需要一个导航的,你需要的是可以帮助你找到感兴趣的内容的东西。

沉浸式表单。当你希望你的用户只做一件事的时候,是不需要提供固定导航的,只需要提供一些完成这件事的相关的工具按钮。

当我下拉查看页面时

低层级导航

网站设计者在设计之初往往忽略多余两个层级的导航形式,原因很多,可能是没有想到那么多,也可能是时间不够。

但事实是,用户在底层页面使用的时候往往是最多的。

因此,在你确定网站配色之前就应该确定所有潜在层级的导航的样式。

栏目

栏目也叫主导航,通常是网站的主要一级导航,也可以带有二级导航。

页内导航

如果你的页面事足够复杂的,那么使用页内导航来降低固定导航的复杂度是一个好办法。每个页面都可以有一个页内导航,用来标记你的主要内容。

页内导航

面包屑

面包屑可以告诉你当前位置的路径,可以告诉你你当前在哪里,也告诉你你是如何来的。

一般在大型网站中面包屑更常用,你点击过的链接会变色。面包屑可以告诉你你在哪里,也可以让你快速回到主页。配合面包屑,加上固定导航是必要的,因为面包屑并不能告诉你这个网站的全貌。

位置:面包屑放在最顶端(相对导航是一个补充机制,使用‘>’分割)

使用小字体,使用‘你在这里’-将最后一个元素加粗。

不使用为页面名称,因为如果把这个字体方法,给人感觉不像是一个固定的标题,因为标题一般是固定在中间或左边的,但面包屑长度不固定。

TAB标签

标签的好处是不言而喻,起到导航的作用,不容易被人忽视,灵活有趣,就像一个物理标签一样-当前的标签在物理上处于最前面。

创建标签:

绘制标签。标签的图形-激活的标签位于其他标签之前,有不同于其他标签的颜色,并且在物理上和下面的内容连接起来。

当你进入站点时,已经有一个标签已选中。

后备箱测试

想象当你被蒙上双眼,锁在车子的后备箱里,当你睁开眼的时候看到一个网页,你能毫不犹豫的回答出:

这是什么站点(站点ID)

我在那个网页上(网页名称)

这个网站的主要栏目有哪些(栏目清单)

在这个层次上我有哪些选择(本页导航)

我在导航的什么位置(‘你在这里’的提示)

怎么回到主页(回到主页按钮)

我怎么搜索(搜索按钮)

因为,往往我们触达一个网页的时候,并不是到达主页然后一步步点下去,而是突然到其中某一个层级的网页。因此要回答出这些问题才能说明你的网站是易用的。

后备箱测试的过程:

1.在网站上选择任意一个网页,打印出来;

2.拿到一手开外,或者斜过一个角度,让你不能仔细观察;

3.尽快找到每一个项目并画上标记。

欢迎访问作者网站:https://pmhuiyilu.com

发表评论

电子邮件地址不会被公开。