深圳网站建设设计

将想法与焦点和您一起共享

深圳网站建设设计 深圳网站优化排名 深圳网站设计制作欣赏

一个网站的导航有效演示

2016-03-15  阅读: 深圳网站建设设计

一个网站的导航有效演示
用户有两种方式获取网络上的信息:搜索或浏览。浏览–移动通过多方位的内容结构–是一个直观的导航层次结构时,信息架构师目前用户更容易。本文讨论了两个技术。

有一个很大的邮政服务的歌曲,这个地方是监狱,说,“这不是一个党如果每天晚上都这样。”虽然歌手具体指的是一个生活的聚会太多,这是一个很好的提醒,任何事情发生的太经常失去意义。
 
这个概念在我们的导航是正确的。作为人类,我们的大脑的通知对比,事情脱颖而出的规范。这是为什么复印机使用大,绿色启动按钮。这也是之所以在我的智能手机提供了一个收集的而不是文字链接彩色图标界面。
当寻找Yelp上我的iPhone,我没有扫描“Yelp;“我扫描了红场。这是一个更快的心算比详尽地阅读每个应用程序的名称。很明显,在这两种情况下,设计师把优先级和视觉语言的工作。


我们的术语定义
优先级就是给一个元素突出相对于其重要性在(导航)层次。至于导航层次结构,这是通过首先考虑每个元素的关系做了用户的目标。
排序的原因是诸如“设置”或“配置”通常比在网站或应用程序的主要作用不明显。它可以通过多种方式,但本质上的优先次序意味着项目更重要的应该更多的关注自己。

视觉语言,另一方面,需要用视觉元素来传达意义。这通常是通过插图或图解,虽然任何视觉线索,强化了功能的元素有助于应用程序的视觉语言。
相反,考虑文本导航结构–尤其是那些使用相同的字体大小。不引入/将丰富的视觉语言,这些结构没有达到他们最大的交际潜能。简单的视觉线索去了漫长的道路,因为它们有助于帮助用户分析信息识别召回。
 
一些知名的网站和应用程序使用的日历图标。

妖怪
不幸的是,设计师往往在设计做完全相反的事。为了一致性,他们常常强迫用户仔细扫描每个项目直到他们找到他们要找的东西。爱默生曾经称这种愚蠢的“没脑子的妖怪。”
 
让我们看一看一些不好的例子:
Craigslist
Craigslist提供小优先级和一个不存在的视觉语言。用户需要在找到他们正在寻找的链接阅读几乎每个条目在首页。
 

吉米约翰的网站
每一次我在一个三明治吉米约翰的网站,我发现自己重新仔细阅读每个导航项目。为统一起见,每个导航项目看起来是一样的:红色,黑色,白色。在吉米约翰的三明治的导航,那么大。
 

微软Metro UI
我最喜欢的一个最近的违规者是微软Metro UI。这已经为Windows Phone界面的一些时间,很快就要到了对Windows 8的桌面。通过主屏幕瓷砖一样的颜色与白色字体和白色的图标,用户必须阅读每瓦而不是应对独特的图标和颜色。(John C.德沃夏克最近写的这一伟大的作品在PC杂志。)
 
Rdio的iPhone应用程序
这个Rdio的iPhone应用程序界面使同样的错误作为微软Metro UI。当他们把图案,颜色和图标的大小一致,迫使用户密切扫描每个项目。在一个美丽的、成功的应用,我发现自己多次扫描屏幕选项,找到我所需的行动。
 

苹果的iTunes
在苹果的iTunes 10(以及它的搜索),侧边栏项目从彩色到灰度转换。将一致性,苹果删除对比每个条目之间,因此需要用户扫描更仔细阅读标签,找到所需的内容。以前,如果你正在寻找播客,你扫描的紫色图标。现在你要扫描“播客”因为图标一起跑。
 
iTunes 9出现在左边和右边出现的iTunes 10。
路径滑动菜单
路径的iPhone应用程序使用了一个类似的滑动导航发现在Facebook的应用程序。有一个重要的区别,然而,在路径不使用图标和标签,而Facebook。每当我打开路径导航,我要读每个条目直到我找到一个我想要的。在Facebook上,我的视觉模式和选择反应和更少的认知负荷更快。

通过实例学习
现在我们已经看到了他们,我们才能避免这些妖怪的一致和创造更有效的导航结构?让我们来看看一些好的例子:
薄荷
薄荷一直被视为一个典型的用户体验和他们的地区,使用高度视觉导航一些不错。“保存”标签,特别是依赖于一个经过反复推敲的图标导航方式。
 
ESPN
ESPN的网站有多种不同的导航风格贯穿始终,但我发现悬停状态为主要的导航项目是特别有效的照片,视频和文字相结合,不同的权重。
 
美国大众汽车
当浏览车辆模型的选择美国的大众网站下拉导航菜单的结合,优先级–敞篷轿车前–与视觉语言–标志性的版本,每辆车在不同的色彩。
 
推特Web应用程序
Web应用程序的推特有一个只有少数链接的接口非常简单,但都伴随着一个独特的和有意义的图标,它除了和最重要的作用,构成一个新的鸣叫,是除了在明亮的蓝色。
 

Instagram的iPhone应用程序
对Instagram的应用程序按钮有效结合优先级和视觉语言。每个按钮都是由其相关的图标,最重要的一个确定的(镜头)的中心,代表了一个蓝色的背景。
 
环保纤维光学
EPB光纤网站充分利用不同级别的优先级在最高水平的导航。主要的导航项目都是黑的最重要的选项(“点菜”)掀起的蓝色。
 
指引成功
我们看到的例子,包括好的和坏的,现在让我们试着概括一点。以下方法可以帮助我们创造更多的优先,视觉导航方案:

1.重视用户的目标和/或转换
当试图确定如何安排和带来的意义,你的导航,想从你的用户的首要目标和/或网站的转化率。让那些元素突出,易于理解。


2.是不一致的
从复印机中得到灵感:而不是努力给所有导航项目相同的尺寸和外观,杠杆不一致在你的设计,最重要的项目得到最大的能见度。

3.用视觉的语言,不是文字
在有意义的地方,使用图标和其他的视觉线索,你不是只使用文字导航带来额外的意义。这将允许用户的大脑过程更迅速依靠模式识别而不是阅读。

4.尺寸(颜色)事项
使用大小和颜色的差别来区分更重要的链接或按钮。

最后的思考
有这么多方面考虑设计时的导航,它可以很容易依靠公约和创造更多的工作给你的用户作为一个后果。尽管总是会出现的情况下,使用这些技术没有意义,记住,分化是一个强大的工具。

不是所有的导航是平等的。通过在你的导航元素采用优先级和视觉语言,你会帮助用户导航完全忘记。

 

牧羊人设计文章推荐:

一个SEO和链接建设
如何重新设计网站流量增加了515%
2016年网站设计方向的5个预测,你准备好了吗

将文章分享到..