街头指示牌和面包屑(设计导航)

0
0
0

街头指示牌和面包屑(设计导航)

1.   网络导航101法则

1-1 你通常是为了寻找某个目标(带有目的)

1-2 你会决定先询问还是先浏览(先搜索还是先浏览?)

1-3 如果选择浏览,将会通过标志的引导在层次结构中穿行(栏目清单)

1-4 最后如果找不到需要的东西,你会离开(绝望失望后离开)

用户带有目的的去浏览网站,希望寻找到自己需要的东西或信息,他们浏览的过程往往会产生于他们的选择,是先搜索还是先浏览?

 

2.   网上冲浪的特性/无法承受的浏览之轻

  2-1 感觉不到大小(没有空间感)

  2-2 感觉不到反向(网站里没有方向)

  2-3 感觉不到位置 (如果我们需要再次访问网站的某个内容,不是靠位置的物理感觉,而是记住它在概念层次上的位置,然后顺着以往的链接过去。)

  网页的特性-缺乏空间感和位置感,有好处也有坏处;好处是无重状态让用户放松,利于沉浸其中忘却时间;坏处是若导航或概念层次做得不够好,很容易让用户迷失方向,使用起来很费劲;因此,做好Web导航很重要!

 

3.   导航(Navigation

   3-1 被忽略了的导航用途

       1) 告诉我们有什么

       2) 告诉我们如何使用网站

       3) 给予我们对网站创建者的信心

   3-2 Web导航习惯用法(放在标准的位置,使用标准化外观)

        Web导航分为“持久导航”和“全局导航”;

3-2-1 持久导航(Persistent Navigation

     需展现在每一页的同样的位置,保持一致性(除了在需要填写表单时的网页);包含四个元素:站点ID、实用工具、搜索和栏目;要保证这四个元素一直可见;

(1)站点IDLogo

一般出现在网站的左上角,结构层次最高的地方;要么让它成为本页最显眼的内容,要么让它涵盖页面所有元素;

一种独特的字体,一个可以识别的图形;

可供点击,以回到主页界面;

(2)栏目(Section/Primary Navigation

属站点结构的最顶层;

大部分情况下,也会包括二级导航的显示位置;

(3)实用工具(Utilities

不属于内容层次的重要元素的链接;

帮助我们使用站点 提供网站发布者的信息;

不会那么显眼,不同类型的网站实用工具也有所不同;

只能放置4-5

(4)搜索

坚持简单的公式:一个输入框+一个按钮+搜索两字;

避免花哨、多余文字和选项;

谨慎的提供搜索范围等选项;以便用户筛选;

        3-2-2 其他注意点

            1)即便是最底层的导航,也要给予足够重视;用户在底层页面上花的时间与顶层页面相同;

            2)页面名称很重要

每个页面都需要一个名称(就像是路牌一样)

需要出现在合适位置

名称要引人注目(大多数情况下,应该是最大的文字)

名称要与点击的链接一致(否则会降低信任度)

             3)突出当前位置的显示标志(定位)

需要一种标志,来告诉用户他当前所在位置,抵消迷失感;

比如通过改变文字颜色/使用粗体/按钮反白等方法;

可以采取两种及以上的视觉区别,来突出它;

             4)“面包屑”即“层级菜单”

面包屑会告诉你从主页到当前位置的轨迹;

将面包屑放于页面最顶层;

使用“>”对层级进行间隔;

加粗最后一个元素(加粗当前页面的名称);

5)标签(Tab

标签是大型网站的上佳选择;

不言而喻,很难错过,以及非常灵活,是标签的特性;

标签的图形必须营造出突出的视觉效果;

             6)后备厢测试(Trunk Test

执行过程:任意选择一个网页打印下来,看一眼或模糊地看,就能清晰的对网站产生认知,得到相关信息;

要求所设计的网站的任意一页,都要非常清晰明了,一目了然;

本文和文中图片版权归作者所有,如转载本文或使用本文中的图片需获得授权
广告
色情
抹黑攻击
反社会
内容水
其它
确定提交
条向作者的提问
发布提问
禁止发布违反法律法规的内容
第一章 知道原则-别让我思考1.可用性第一原则-设计者应该尽...
1.从感性设计变为理性设计需求--凭分析靠数据--输出2....
动物 植物 无机物 上网的时候时刻面临着各种选择,...
第七章 web设计中的大爆炸理论完成网页的任务1.站点标识和...
读书笔记《点石成金》02一、我们实际上是如何使用WEB的1....
设计心理学1读书笔记(1)本书一共有七章,作者是唐纳德·A·...
1.在日常生活中我们确定事物操作方法是结合头脑知识与外界知识...
在设计中 成功设计的秘诀就是理解真正的问题是什么深入地提问 ...
1.四种约束因素:物理、文化、语义和逻辑(1)面对一个新事物...
1.含糊的知识引导精确的行为(1)每天我们都会面对很多事情,...
产品不断增加新功能 经常回导致产品过于复杂 这种弊端的成因被...
src:视频url的地址poster:视频的封面,没有播放时...
随意的设计 假如在一款app中 这个小图标与周边信息无法相匹...
我们先在Illustrator中创建一个自定义画笔。步骤1:...
1、大写单词难读之谜人们阅读时是扫视的,只有很短的凝视时间去...
清王朝统一中国后,经过康熙、雍正两朝的经营,经济有了很大发展...
<p class=MsoNormal text-indent...
p82-100精确的行为所有知识不一定都储存在头脑里可分布在...
元兵乘胜南下,进逼临安。四岁的皇帝赵显,只是挂个名的。他祖母...
从朱温建立梁朝开始的五十多年里,中原地区前后换了五个短暂的王...
为Illustrator制作自定义画笔比您预期的要容易得多。...
一、知识点1. <span font-family:宋体;m...
张世杰、陈宜中怎样会到福州去的呢?原来,在临安被元兵占领、小...
103000多个英文单和中文翻译,包括三个字段英文单词、音标...
农药的残留量一般是指食用作物上农药残留的数量。蔬菜上施用过农...
欢迎回到另一个基于Adobe Illustrator的教程,...
seo网站优化是指在了解搜索引擎自然排名的基础之上,对...
本站部分内容来自于网络和用户发布,如有侵犯您的权益,请即时告之,我们将第一时间处理.
服务邮箱 ydh@terlogic.com
京ICP备13047789号-7