首页 > 范文大全

我想要的个性化导航站网页设计

时间：2023年06月29日

来源：六角亭李帝努

编辑：本站小编

收藏本文

下载本文

下面是小编整理的我想要的个性化导航站网页设计，本文共5篇，希望对大家有所帮助。本文原稿由网友“六角亭李帝努”提供。

篇1：我想要的个性化导航站网页设计

网络收藏夹，或者叫在线书签，是把本地的浏览器书签在线化的一种产品，方便用户在不同终端上使用，缺点是需要管理自己的收藏的时候，必须先找到提供服务的网站，然后登陆，然后操作——这个时候也许收藏或分享一个网址的兴致已经失掉大半了。

导航站，收集了各大最常用、最主流的站点，并分门别类放好，不常变动，普通用户也无法去变动。缺点是总有那么一些永远也用不到的网址在干扰用户，用户在使用每个网址前，不得不为为筛选不需要的网址而付出时间。

之前介绍过的好诶，我一直以来是她的忠实用户的原因，很大程度上是因为她集合了上述两者之长，模糊了这两者之间的界限。但是在经历了前几个月的一次大的改版之后，我不仅又开始思考，我到底需要什么样的此类服务。

好诶的那次改版，变化太大，引起了老用户的极大抗议，之后推出升级新版后的回到旧版的入口。当时我和很多老用户一样，仍然又回到老版本，但是后来慢慢的我觉得我还是需要新版本，现在新版已经用了2个月了。引起我写此文的原因，是我不会再回到旧版，新版却还是有很难满足我的地方，而在好诶之外，我还没找到完全满足我需求的服务……

先来描述下我平时上网时和这个问题有关的一些习惯。

上新浪、网易、豆瓣、校内等网站，我是会直接在Google里搜索的。这不是多此一举，在收藏的网址多了之后，与其在大片的网址中找一个，还不如在浏览器里内嵌的搜索输入框里输入，一个回车来得快；而且此类网址较短，网站名和拼音是一样的，不用担心输入法在什么状态，总之只要打出来了，搜索引擎返回的第一个结果一定是目标网站。

具体内容的单个页面是不会放到自定义导航站的。或者暂时存放，将该内容涉及到的事情处理掉，就删除了。例如看到个新闻说某某网站推出个新功能，当时没时间，晚上回家后去体验下；或者看到某个内容讲了条不错的知识点，回头记录到专门的地方。这个有点把自定义导航站当做todolist来用了。

会长期保存到自定义导航站的，是一些需要长期，但偶尔会上的网站，也不确定下次在搜索引擎中能马上搜到，或者是像这样的速查工具、知识手册，又或者是像这样的在线工具，

我现在面临的问题

尽管我用如上方式精简了许多，还是好网址还是太多了，我还是有越来越多的网址需要管理。在使用旧版的时候，我把网址精简到200个以内，但是面对2屏的网址，我还是受不了了，于是选择了新版。新版的最大好处就是帮我过滤太多干扰。确实，最最常用的确实就是留在首页上的那十几个。

但是新版好诶仍然是有很多不足的。对于那些偶尔要上但不经常上的网址，应该要在需要的时候方便找到，而首页有个搜索网址，这非常符合我上述第一条的思路，本来是不错的，但是这个搜索功能太不强了。只能对网址名和标签搜索，为什么不可以搜索分类名直接调出整个分类？对旧版过来的老用户，相信很多人都没有对网址上标签，但是分类肯定是有的；搜索居然是大小写敏感的！昨天我想找feedsky，我傻傻得连搜三个：feed，sky，feedsky都不行，只有一步步点分类，最后发现原来我存的网址名是FeedsSky……

这只是在使用过程中的一些问题，远不包括我想管理网址从而更进一步提高效率的一些想法。

那我到底想要什么样的自定义导航站呢？

保存方便。人们会在什么情况下发现一个想要保存下来的网址呢？最常见的当然是在浏览的时候，那如果有一个基于浏览器的保存按钮那是最好的了。我这几天本来想开始用用delicious，但是他的火狐插件居然不支持3.5……

访问方便。平时排除干扰，只给用户呈现最常用的，在需要的时候可以最方便得找到，搜索、标签云或者其他什么方便的入口都可以。

管理方便。分类、备注、排版等等，可以在任何情况下都方便的操作。可以同步、备份。

分享和交流。目前来说我对此的需求不大，但是好好制作的话也是个不错的功能。像垦一垦和糖果盒这样的网站，点子虽然不错，但是我实在不喜欢有人在我要访问的网站外面套个iframe，所以基本没怎么用过。

国外的一些服务，最大的问题就是不知道什么时候就不支持中文了，本来用得好好的，突然冒出一块乱码，真的很不舒服。火狐的插件、Google的服务，继续尝试中，希望能找到一个最终适合我的方案吧。

本文来自：dhylue.com/?p=533

篇2：关于网站导航设计的探讨网页设计

许多网站缺乏针对性和友好的导航设计，难以找到连接到相关网页的路径，也没有提供有助于让访客/用户找到所需信息的帮助，用户体验非常糟糕，这篇文章，我们尝试就网站导航交互做一些探讨。

首先对于WEB交互设计师来说，解决上面遇到的问题，使之简单的方法是设计一套完善的网页导航系统。

优化网站导航设计的目的

一个网站导航设计对提供丰富友好的用户体验有至关重要的地位，简单直观的导航不仅能提高网站易用性，而且在方便用户找到所要的信息后，可有助提高用户转化率。

如果把主页比作网站门面，那么导航就是通道，这些通道走向网站的每个角落，导航的设计是否合理对于一个网站是具有非常大意义的。

1）决定用户在网站中穿梭浏览的体验，这一点是最基本的。

2）网站导航设计合理，可以将网站的内容和服务最大面积的展现在用户面前。

3）合理的导航设计可以增加用户黏性，提高网站的浏览深度，从而提高网站PV值。

4）促进用户消费，提高网站盈利。引导用户消费，将用户真正需要的产品和服务展示在他面前，甚至用户想不到的服务你也呈现。

5）提高网站广告价值，增加网站广告收益。

……

网站导航的常见结构

雅虎的网页设计一直是国内众门户模仿的对象，我们首先来看看Yahoo网站现有的几种导航样式：

1） Yahoo首页（最常用的栏目导航）

Yahoo首页左侧的导航列出了网站最常用（或访问最频繁，或网站运营最想让用户知道）的几个栏目。这种导航（也包括网页顶部横向结构）是目前互联网中使用最广泛的导航方式。

2） More Yahoo！Services （更多的导航信息的展现）

Yahoo作为一个全球大型综合门户网站，所提供的服务肯定不止首页左侧导航显示的那几个，那么更多的服务如何导航？同时又如何展现给用户呢？于是Yahoo的设计师们给我我们一种解决方案，如上图，点击从网页左侧展开一浮出层样式的服务导航页面。可以发现，这种导航也是多维度的（下面我们会专门探讨）

3） Tab式位置导航变体

我们还可以在Yahoo！TV 等栏目上发现这样有趣的导航结构，我们暂且认为他是Tab 式结构加上一个下拉菜单的一种导航组合。

nTV Home – Shows – American Idol – Overview 组成了一个单维度的导航

nTV Home同时提供了下拉菜单方便用户快速的转到其二级栏目下。

（这里我遇到一个困惑，在这里我不知道怎么TV Home上一级的目录是什么，也不知道如何返回。）

4） Amazon首页

Amazon可以说是在网络产品导航上的鼻祖了，让我们再来看看Amazon的导航样式又有什么特色。

看看它和谁最像？

5） Amazon购物列表页面

由Amazon购物列表页引申的讨论：

单一维度和多维度的导航结构

我们通常认为面包屑导航为单一维度的导航结构，如上图红色实线框所示，即它是一种线性的导航方式，

不过在网页的应用中，“面包屑”导航的应用有两种：

a)“追溯来路”即跟踪用户行为，记录的用户在网站的活动足迹的一种“线性导航”，

b)用来表达内容归属关系的界面元素，也就是我们经常看到的“主分类>一级分类>二级分类>三级分类>……>最终内容页面”这样的层级归属关系.

而改网页左侧的导航却提供多种维度的导航，且这多种维度可以组合成不同层级的面包屑结构

如，我想买一台LCD平板电视，进到了：

Electronics › Audio & Video › TVs & HDTVs › Flat-Panel TVs › Flat-Panel LCD TVs

在这个页面上，左侧导航给我提供了品牌、供货商、价格、显示屏尺寸……等多种选择。

我可以先选品牌再选尺寸，如：

也可以先先尺寸再选品牌，如：

因此这种方式为用户提供了多种维度的导航，运行用户如在电器超市随意逛逛挑选商品，而不必考虑该先问导购员有什么品牌还是问有什么尺寸好。这一点符合用户的心理模型，值得设计中借鉴。

网站导航设计需要注意的问题及基本原则

我们就网站组日常需求中，有关导航的交互设计工作进行了交流，总结出在网站导航设计中需要注意的几点问题及基本的原则。

1.导航条的位置。主导航条的位置应该在接近顶部或网页左侧的位置，如果因为内容过多需要子导航时，要让用户容易地分辨出哪个是主导航条，哪个是某主题的子导航条。

2.导航使用的简单性。。导航的使用必须得尽可能的简单，避免使用下拉或弹出式菜单导航，如果没办法一定得用，那么菜单的层次不要超过两层。

3.面包屑导航。应该让用户知道现在所看的网页是什么和与现在所看网页的相关网页是什么，例如通过辅助导航“首页 >新闻频道 >新闻全名”里的对所在网页位置的文字说明，同时配合导航的颜色高亮，可以达到视觉直观指示的效果。

4.导航内容明显的区别。导航的目录或主题种类必须得清晰，不要让用户困惑，而且如果有需要突出主要网页的区域，则应该与一般网页在视觉上有所区别。

5.导航和排序的区别。导航和排序容易混淆，需要留意（看图指出问题）

这里的tab是导航还是排序？

Google Reader上的处理

6.准确的导航文字描述。用户在点击导航链接前对他们所找的东西有一个大概的了解，链接上的文字必须能准确描述链接所到达的网页内容。

本文出自：webteam.tencent.com/?p=156

篇3：xhtml+css制作不规则导航网页设计

前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航，就尝试做了一下，结果碰到了几个问题，后来在同事的提醒下总算完成了，记录一下也跟大家分享分享。

先看图（图片只是大致做了一下）

效果展示：

运行代码框

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

xhtml结构部分内容：

菜单

css部分内容：

* {margin:0;padding:0;font:normal 12px/25px “宋体”;}

body {background:#f8f8f8;}

ul {list-style.:none;width:300px;height:25px;margin:20px auto;}

li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;display:inline;}

a {color:#fff; float:left;width:86px;height:25px;top:0;left:0;background:url(www.linxz.cn/blog2/attachments/month_0804/d43194011.gif) center center no-repeat;}

a:hover {color:#000;background:url(www.linxz.cn/blog2/attachments/month_0804/s200843194022.gif) 0 0 no-repeat;width:86px;position:relative;}

思路：

主要是利用当:hover触发的时候让a定位，出了li的浮动范围，出现梯形的图片，

从而实现了不规则导航的菜单。

过程：

1、在浏览器中，根据li的结构表现，后面的li会覆盖住前面的li，如果宽度足够的话，是靠边在一起，那么只要利用负边距就可以实现初始状态下相互叠加的样式。margin:0 -5px;

2、初始状态下的叠加实现了，要解决的就是:hover触发的时候，让菜单这个放弃浮动使用定位。在这个过程中如果是要利用绝对定位话，会让有一个z-index的问题出现。

这个问题只体现在IE中，FF下是无问题的，可以正常显示。IE中表现出来的是最后一个li永远都会盖住前面的li，那么当鼠标经过的时候就无法完美显示了。

个人认为比较重要的几个属性：

li中的负边距，实现叠加效果

hover中的position:relative

a是内联元素，要触发haslayout，可以使用float:left来触发

注：

以上内容或许讲得不是非常明白，不过大家可以仔细分析一下源码，然后交流一下。如果觉得好也请不要回帖说顶，收藏，谢谢之类的话，你们的点击就是对我的支持了。

来自：bbs.blueidea.com/thread-2843421-1-1.html

篇4：谈一谈频道式导航网页设计

现在越来越多B2C网站开始采用频道式导航了. 典型的莫过于淘宝商城与当当网. 个人认为频道导航最明显的作用在于改变栏目导航死板的文字形式, 增加了站点产品秀的机会, 并增供更多广告位与多种推荐模式, 将原先单纯的栏目导航变成具有推荐功能的“多功能导航”.

然而, 个人认为上述两个网站在引入频道导航时, 都没有采取一个很好的解决方案. 因为他们都同时保留了在第一屏中的左边栏目导航(淘宝商城的下级页面中). 当栏目导航与频道导航并存时, 就需要解决一个问题, 即: 如果右边内容区的高度没有左边栏目导航高, 那么内容下面的频道导航宽度就会被迫被挤成和内容区一样大小, 不利于剩下的频道导航排列.下面是几个常见的解决方案:

当当的解决方案, 控制栏目导航与内容区高度相同:

淘宝商城的解决方案, 将频道导航直接排在内容区下面, 不让频道导航贯穿整个页面. 左边导航下面的空白由广告图片填充:

另一种解决方案, “自适应”的频道导航:

其是以上三种方案我都不是很喜欢, 个人认为即然要使用频道导航, 就不应该再要左边栏目导航. 频道导航的最大作用在可以更好的秀出网站不同商品, 因此应该通过控制频道导航Banner的精细度与频道导航本身的高度, 数量去做好频道导航显示区(通常位于第二屏), 而栏目导航就交给顶部去做. 换言之, 如果要使用频道导航, 那么就要保证站点拥有一个足够强大的顶部导航系统，

谈一谈频道式导航网页设计

，

笨呢我出自：ucdchina.com/post/1414