微信导航类网站的价值

微信导航类网站的价值（共5篇）（共5篇）

1.微信导航类网站的价值 篇一

文章描述：网站导航设计经验分享:清晰的导航能够让页面简单易用.

导航是互联网产品中应用最广泛的基础元素之一，引导用户了解到网站的内容结构进而找到所求，作为基础控件，导航看起来简单，但却是产品设计中最复杂繁琐的一部分。因为我们想要让网站结构更清晰、想要向用户传达所有的信息，所以就赋予了导航越来越多的内容，使他们庞大异常，十分纠结。简化了，用户无法了解到页面结构以及自己的处境，产生困惑;复杂了，导航臃肿不堪，层峦叠嶂，既不美观也不好用。

那么，在清晰的信息架构下能不能让导航尽可能的更轻便、更灵动，是笔者本文想要探讨的话题。笔者看来，为导航塑身可以从以下几个角度来进行：1.简化结构;2.优化形式;3.打磨UI。

网站作为信息的集合体，要囊括海量的资源，从首页到二级页再到专题页进而底层页等等等等，信息的层级多且繁杂，所以就容易形成tab套tab再套tab的局面。那么作为导航塑身的第一步，我们要做的就是把这负责的结构尽量简化，让导航变得轻盈起来，或者至少看起来不那么臃肿。

A. 通过面包屑来简化导航结构

面包屑通常水平地出现在页面顶部，一般会位于标题或页头的下方。它们提供给用户返回之前任何一个页面的链接(这些链接也是能到达当前页面的路径)，在层级架构中通常是这个页面的父级页面。面包屑提供给用户回溯到网站首页或入口页面的一条快速路径。

一个门户网站常见的结构是首页-频道页-专题页-子专题-底层页。如果我们想在门户网站看NBA的视频直播，那么我们来看下他的导航：

如果把信息层级全部展现在用户面前，就会形成上面的这种tab套tab的形式，使得导航臃肿不堪，占据页面很大的空间。可是如果我们把用户关心的导航内容提取出来，就会得到下面的结构：

再扁平化一下：

这就是清晰的面包屑导航。综上，面包屑导航能够让复杂的层级结构扁平化，使得导航更加轻盈。

面包屑导航还有一些变体，是基于用户线性操作逻辑衍生出来的。在无线端产品中应用更为广泛，因为移动设备的显示区域有限，无力支撑庞大的导航结构。在用户点击当前导航内容后，当前导航消失进去下一级导航，并提供返回按钮。

当然，使用面包屑来简化导航结构也是有条件的，不是所有的导航层级都可以用这种方法来简化。面包屑导航更符合用户线性思维导向下的操作逻辑，例如，用户想要看NBA直播，那么他一定不关心娱乐圈发生了哪些八卦，也不care足球或者网球有什么新闻，CBA，CUBA他可能也不十分在意，那么面包屑的线性导航就可以满足用户的需求。或者是由于空间或者设备原因，我们无法提供更为详细的导航，而采用线性简化导航的处理方法。

B. 合并导航层级

导航的庞大往往是由于层级过多导致，那么减少层级的一种有效方法就是合并导航层级，例如把二级和三级导航合并，就减少了三级导航，让导航轻便一些，

如上图，图片库包括动态图片和静态图片，每个分类下面又有小的分类，这样的导航层级在产品中十分常见，略显臃肿。那么通过合并层级就可以把导航精简到两级，处理后的导航如下：

瘦身后的导航看起来结构也比较清晰，而且没有影响到信息的传达。

对比下美团和糯米的导航：

美团把注册登录和个人信息等功能性导航和网站主导航做了合并处理，为网站首屏节约出了宝贵的空间。

C.隐藏部分导航

简化导航结构的第三种方法是把部分层级或者导航内容隐藏起来，使得导航看上去轻便一些。

当导航里的内容特别多的时候，可以选择把主要内容留下，次要内容隐藏的方法来处理。例如：

当页面空间有限，无法容纳更多层级的时候，可以选择把次层级隐藏收起，鼠标滑过或者点击后触发此层级的方法处理，这样的例子有很多：

2.优化形式

有些时候，我们无法判断用户在浏览产品或网站时是否是线性思维，也无法对导航结构进行再精简，那么我们怎样让导航再“瘦”那么一点呢。

A.将一维导航变为二维导航

将一维导航转化为二维导航，能够有效的减少层叠导航带给人的重复感和复杂感，能够让操作富有变化，进而提升体验。

类似的列子也有很多：

B.将复杂的层级单独处理

当某一层级的导航内容丰富到一定程度，他就可以充当一个独立控件来单独设计了，他们可以作为页面的元素来单独存在，可能看起来都不太像是导航。

3.打磨UI

说到让导航轻盈，UI是最为常用的手法，在此笔者不做太多的陈述，但是需要注意的是，导航的轻盈与否与导航所处的页面以及重要程度有很大关系。比如在首页，用户需要对页面有整体认知的情况下，导航的UI就不能改太轻薄，而是应该先声夺人，让用户直接注意，并浏览发现所求;同样的，当用户进入到相关的页面开始浏览时，导航的作用就是路灯和司南，这时的导航就不如在首页时那样重要，那么导航就需要轻轻的、悄悄的在用户旁边随时等待着被注意并使用。

电商首页的导航UI上吸引了不少眼球，但是到了结果页导航变成了几乎没有装饰的效果，因为在结果页，用户主要是来浏览产品，所以导航的作用就弱了。

综上，是笔者对导航塑身的一点认识，清晰的导航能够让页面简单易用，反之也会大大影响页面的信息流畅度，所以在导航设计时要精心处理，一点浅见与大家分享。

2.微信导航类网站的价值 篇二

大型网站存在大量的内容，存在大量的用户，而不同的用户关注的内容不同，用户的选择过程通常需要多次点击，例如要访问新浪网站的西甲联赛新闻，过程如下：

·打开浏览器输入：http://www.sina.com.cn/进入新浪首页；·在新浪首页点击"体育"，进入到：http://sports.sina.com.cn/；·在体育页面点击"西甲"进入到：http://sports.sina.com.cn/z/0910laliga/。

并且如果每天都上网每天都需要重复这样的过程。如果网站知道了用户的访问习惯，当用户登录http://www.sina.com.cn的时候，网站可以直接把他导航到http://sports.sina.com.cn/z/0910laliga/，本文采用统计的方法就是解决该问题的。

2、系统需求分析

用户在访问网站主页的时候，根据用户情况应该分别导航到不同的网页：

·如果是新用户或者没有任何Cookie信息的用户，直接导航到访问量最大的网页。用户可以选择登录，或者查看某个网页。

·如果是老用户（有Cookie信息），但是是非注册用户，应该根据用户以往的访问记录，选择用户最常访问的页面。

·如果是老用户，并且是注册用户，并且选择自动登录，则从数据库中提取历史访问信息，根据访问信息为用户选择响应界面。

·如果是老用户，并且是注册用户，但是没有选择自动登录，给他提示登录界面，如果选择登录根据数据库中的访问信息为用户选择界面，如果不选择登录，则给默认的网页。

用户在访问网站的过程中，系统记录用户的访问过程，存在如下情况：

·对于注册用户，可以在服务器端数据库中记录；

·对于非注册用户，并且客户端允许使用Cookie，可以在客户端通过Cookie存储；

·对于非注册用户，并且客户端不允许使用Cookie，则不能记录。

用户

3、系统设计

系统设计包括功能设计、数据存储设计、界面设计和接口设计，而智能导航系统是为现有网站提供导航的，对于网站原有的界面和接口不干预，主要是根据访问的历史信息为用户提供最可能是用户访问的页面。所以本设计主要包括：

·历史访问信息的存储设计;

·历史访问信息的管理;

·智能导航控制功能的设计;

·Cookie存储信息的设计。

下面分别介绍。

3.1历史访问信息的存储设计

为了根据用户的访问习惯为用户提供智能的导航信息, 需要保存用户的历史访问信息, 为了能够快速决策, 需要根据历史访问信息生成汇总信息, 历史访问信息是用户在访问过程中生成的, 而汇总信息是服务器在每天比较空闲的时候根据历史信息汇总生成的, 决策过程时根据汇总信息进行的。存储设计包括两张表:历史访问信息明细表visitdetail和汇总信息表visitsummary。

历史访问信息明细表的结构如表1所示。

历史信息统计表的结构如表2所示。

3.2 历史访问信息的管理

历史访问信息的记录，出现在以下3个时刻：用户发送对某个页面的请求，系统为用户选择一个界面，用户离开网站的时候。

当用户发送对某个页面的请求的时候：

·添加历史信息，记录当前时间为该页面的开始访问时间；

·修改上一个页面的结束时间为当前时间。

对于首次访问的用户，服务器为用户选择一个界面，添加历史信息，记录当前时间为该用户访问当前页面的开始时间。

当用户离开网站的时候，记录当前时间为前一个页面的结束时间。

设置触发器，当修改记录的结束时间的时候，计算页面的持续时间，并更新历史访问信息。

对于历史汇总信息，在每天的某个特定时间进行集中处理进行更新。

3.3 智能导航系统的设计

服务器在接收到得请求的时候，根据Cookie中的信息，分析用户的类型以及用户的访问习惯，根据访问习惯为用户选择最有可能的界面。选择过程如图1所示。

3.4 Cookie存储信息的设计

对于支持Cookie的浏览器，如果是注册用户，可以使用Cookie保存登录信息，方便用户的操作，然后根据数据库中的历史访问汇总信息对用户进行智能导航。如果是非注册用户，可以在Cookie中存储历史访问信息，因为受存储信息量的大小限制，所以使用Cookie存储的历史访问信息不能像数据库存储那样详细。在系统向用户响应的时候，根据用户的类型在Cookie中保存相应的信息。

4、结论

本文通过记录大型网站中用户的历史访问信息，并对历史访问信息进行汇总，对于注册用户采用数据库的方式存储这些信息，对于非注册用户采用Cookie的方式存储这些信息。在用户访问网站的时候根据统计信息为用户智能导航到用户最可能访问的网页，从而方便了用户的访问。

本文的缺点是存储历史访问信息并进行汇总以及进行决策需要占用一定的时间，对系统的响应速度有一定的影响，但是能够减少用户点击的次数。

参考文献

[1]王永庆.人工智能原理与方法[M].西安:西安交通大学出版社, 1998.5.

3.网站数据分析篇之网站导航分析 篇三

对于所有网站来说，一般页面可以分为三类：导航页面、功能页面和内容页面。首页和类表页面都是典型的导航页，站内搜索、注册页面等等都属于功能页面，而产品详情跟新闻页面都属于内容页面。导航页面的作用就是引导用户寻找相信信息，功能页面的作用就是帮助访问者网站目标任务，内容页面的作用给用户展现展现信息并帮助用户决策。

上面是笔者画的一张网站的结构图片(不要喷我，笔者处理图片能力不是一般的差)，顶部的是首页部分，接着是列表页面，最后是详情页面，有人会问为啥要给大家看这个结构图呢?因为从这张图片中我们可以分析用户的两类诡异行为。第一访问者在导航类页面中途离开(这个问题在企业网站中经常出现，至少笔者负责的5个小企业站都是如此)，另一种是访问者从内容类页面返回到导航类页面。这两种行为不是太符合我们网站导航架构的的设计初衷，都是我们不希望看到的行为。下面我们具体来说明下这两类用户行为。

第一个问题中，访问者从导航类页面进入，在没有看到内容页面的时候就离开了网站。在这次访问中网站当中，用户并没有完成任务，导航类页面也没有将用户带入内容页面中，因此我们需要分析导航页面造成用户离开的原因，这个问题笔者第一个企业网站就出现过后来通过几个老板了解到，一般搜索一个关键词，然后进入一个网站，老板们比较关注的是电话号码，其他东西都是假的。只为了一个号码，后来就把首页的联系电话号码去掉，果然网站pv明显增加了，访问有联系电话的页面次数增多了，这个只是其中一个原因，还有很多需要大家自己去分析了。

第二个问题中，用户从导航类页面进入网站，从内容页面返回导航类页面，看似是访问者在这次访问中完成了任务(如果浏览内容页就是这个网站的终极目标的话)，但是其实访问者返回到首页开始了新的一次导航或者任务。除非新的任务与目标的任务毫不相关或者数量很少，否则我们也要分析内容页面设计的初衷，并考虑在内容类页面提交交叉信息推荐。之前一个朋友跟笔者说如何减少内容页面的跳出来，就提到了增加内容推荐。

至于具体处理这些技巧，还是需要用户自己发掘，笔者也是对网站的具体数据进行分析的，每个人的方法可能不一样，但是结果一样就行。还是那句话，网站数据分析对未来seo很重要，特别是在外链被内容取代的时代。

本文由整理提供，如有转载请标明出处，谢谢。

4.浅淡网站导航栏设计趋势 篇四

这篇文章将展示关于网页导航栏设计最近的一些趋势和一些新潮的导航栏效果。

1.描述型导航栏

导航栏最重要的任务是明确指向网站各个部分的内容，但这些内容很难通过一两个关键字来表述清楚，因此采用描述行导航栏可以让访客在点击之前就了解到自己将能看到一些什么内容。

由于这种导航跟访客的感觉是：有一个向导在做现场解说，因此相对于只有关键字的“无声导航”，有人将描述型导航成为“有声导航”。

2.Mac风格仍然流行

苹果公司的产品经常能引起新的潮流，而且众多跟风者也热衷于山寨苹果的设计，网站导航栏也不能幸免。但客观地说，苹果那种质感强烈的简洁设计已经风行很多年了，但丝毫没有过时的趋势。

在复刻的同时，设计师们也衍生出许多带有Mac元素的设计。

强烈的Mac质感

绿色的Mac风格导航栏

3.吸引眼球的图标

导航栏设计的一个重要趋势是：图标应用得越来越频繁了，

为了使导航更加显眼，设计师通常通过漂亮的图标来装饰导航栏。在这里，选用的图标图标应该能清晰地辨认，并且能清晰地表达该分类的内容。而不是用更大的图标来吸引眼球。

也有把图标嵌入到文字里的

4.竖排的Tab

在很多人的第一印象里，Tab标签一般都是横排的。但一些聪明的网页设计师打破了这个死循环，做出了竖排Tab的效果。吸引了很多人的眼球。

但竖排的导航也有几个明显的缺点：1.网页需要有足够的长度来显示全部的分类;2.看这个导航的时候需要滚动页面;3.文本比较难阅读，没人的脑袋是歪向一边的。

5.手绘风格

自从全球掀起博客大潮以后，展示个性成为了这个时代的一个趋势。很多绘画爱好者通过手绘来制作自己的个人网站。

6.暗示设计

和第一条的描述不同，暗示设计一般不用明文来描述分类里的内容，而通过色彩或者图形来提示浏览者。不过浏览者没有足够的领悟能力的话，很难察觉到这一点。

如上图的按月存档导航，设计师为各个月份设置的代表色，温暖的月份用偏红的暖色调表示，寒冷的月份用偏蓝的冷色调表示。但如果浏览者身处令一个半球的话会怎么想呢?

5.微信导航类网站的价值 篇五

在开发Web应用程序的时候,网站导航是一件必须要做的事情,在ASP.NET 2.0以前,人们主要通过客户端控件(user control),include pages文件和添加链接(hyperlinks)来实现网站的导航,这种技术最大的缺点是当其中的一些页面(pages)有变动的时候,则要到导航页面逐个修改代码,这就大大降低了网站的开发效率,同时也增加了网站后期维护的成本和难度。ASP.NET 2.0的推出,则解决了上述的缺点和难点,给网站导航的实现提供了可行的技术。

2 系统构成

(1)网站地图(Site maps):网站地图可以是一个xml文件或者是自定义数据库表,它用来描述站点地图的逻辑结构。当添加或者删除页面时只需修改网站地图(xml文件或者数据库表)而不是修改所以网页的超链接。

(2)ASP.NET控件:使用ASP.NET控件在网页上显示导航菜单,主要有SiteMapPath,TreeView,Menu控件。导航菜单是以站点地图为数据基础来显示的。

(3)可编程控件(Programmatic controls):主要用来以代码方式使用ASP.NET站点导航,以创建自定义导航控件或修改在导航菜单中显示的信息的位置。

(4)访问规则(Access rulers):用来配置在导航菜单中显示或隐藏链接的访问规则。

(5)站点地图提供程序(site-map providers):用来创建自定义站点地图提供程序,以便使用自定义的站点地图(如存储链接信息的数据库),并且集成到ASP.NET站点导航系统。

3 工作原理

首先将所有的站点页面配置为基础访问点,并且根据访问点的级别建立树形结构;然后根据网站的访问规则建立访问点之间的关系,并且使用可继承的关系,这样就可以建立起网站页面为单位的有向图结构。

site.map用来保存站点的树形结构。

custom data Store则用来保存访问规则的有向图。

使用两个控件来分别显示树形结构的站点地图和有向图结构的访问规则向导。

3.1 创建网站地图

网站地图是网站导航系统的数据基础,其他的操场都是在此基础上进行的。ASP.NET下默认的是命名为site.map的xml格式文件,也可以是自定义的DataBase数据表。

3.2 站点地图加载进程

默认的ASP.NET站点地图提供程序System.Web.XmlSiteMapProvider加载站点地图数据作为XML文档,并在应用程序启动时将其作为静态数据进行缓存,更改站点地图文件时,ASP.NET会重新加载站点地图数据。自定义的站点地图需要重写System.Web.SiteMapProvider来实现站点地图的加载。

3.3 站点导航控件

完成ASP.NET站点导航的站点地图的加载后,接下来需要在页面里展示导航结构,这样用户就可以根据站点结构在站点内轻松地浏览。ASP.NET中导航控件包括:siteMapPath、TreeView和Menu。

(1)SiteMapPath此控件显示导航路径,向用户显示当前页面的位置,并以链接的形式显示返回主页或者上一级的路径。用户可以清楚自己在哪个页面中,不至于迷失,也可以轻松地通过此控件返回到上一级。

(2)TreeView此控件显示导航结构的一个树状结构或菜单,用户通过此控件可以遍历访问站点中的不同页面,用户也可以单击包含子节点的节点,可将树状结构其展开或折叠。

(3)Menu此控件显示一个可展开的菜单,用户通过此控件可以遍历访问站点中的不同页面。当用户用鼠标悬停在包含子菜单的父菜单上时,子菜单将展开包含的子菜单。

3.4 站点导航API

通过导航控件API实现访问规则,只需编写极少的代码甚至不需要代码,就可以在页面中添加站点导航,也能以编程的方式处理站点导航。当Web应用程序运行时,ASP.NET公开一个反映站点地图结构的SiteMap对象。SiteMap对象的所有成员均为静态成员。而SiteMap对象会公开SiteMapNode对象的集合,这些对象包含地图中每个节点的属性。

3.5 站点导航体系结构图

图1示意了ASP.NET站点导航组件之间的关系。

4 实现过程

4.1 新建网站并添加web.sitemap文件

4.1.1 添加web.sitemap文件

在Microsoft Visual Studio 2005中,新建一个ASP.NET网站,添加一个web.sitemap文件,并且添加如下内容:

可以看到,在web.sitemap文件包含一个根结点siteMap,而且,设置了一个父siteMapnode结点。该结点表明是默认的站点首页,在该父sitemapNod结点下,可以有若干个子sitemapNode结点,这样就构成了整个网站的层次结构,每个节点代表了网站的各子栏目。

4.1.2 文件属性

在每一个sitemapNod节点中,有如下若干个属性:

(1)URL属性:该属性指出要导航的栏目的地址链接,必须是每个栏目的相对地址。

(2)Title属性:该属性指出每个子栏目的名称,显示在页面中。

(3)Description属性:该属性指定时,则用户在鼠标移动到该栏目时,出现有关该栏目的相关提示,类似于tooltips属性。

4.2 添加模板页面

4.2.1 模板页面

ASP.NET 2.0为网站开发人员提供了一种在一个文件中定义多个网站页面布局的功能。这个以.master为扩展名的文件,称之为母版页。单个母版页可以定义所有页面的相同外观和通用行为,因而开发人员无须在每个页面中编写重复的代码,并且在需要修改页面布局时只需修改母版页即可,利用母版页,开发人员可以创建单个网页模板并在应用程序中将该模板用作多个网页的基础,这样就无需从头创建所有新网页,一个网站可以设置多种类型的母版页,以满足不同显示风格的需要。

4.2.2 添加模板(master)页面

在添加完web.sitemap文件后,再在新建的网站中添加一个名叫Navigation的master类型的页面(Navigation.master),然后向该页面中添加siteMapDataSource控件,默认的ID为SiteMapDataSource1。该控件会自动感应绑定web.sitemap,以xml格式web.sitemap为数据源。接下来就可以利用siteMapDataSource和ASP.NET控件treeview、menu、sitemappath进行展示导航了。

在Navigation.master中添加两个控件treeview和sitemappath,设置数据源为SiteMapDataSource1,代码如下:

4.2.3 添加其他页面

在完成了模板页面Navigation.Master后,就等于已经把网站的模版页建立起来了,接下来就可以新建Default.aspx和AboutMe.aspx页面,以Navigation.Master为模板页面,再新建一个文件夹Products,在它下新建Laptop.aspx、Desktop.aspx、ProductsIntro.aspx页面,同样以Navigation.Master为模板页面,并且在每个页面的ContentPlaceHolder中建立自己想要的内容。

可以看到,当建立了模版页后,就可以新建其他的子页面了,只需要在其中的contentplaceholderid中写入不同的内容就可以了。

结果如图2所示。

5 结语