网站建设中如何设计好网站的导航？

一、网站建设中如何设计好网站的导航？

之前设计过很多网站导航，也有很多网站导航的经验，一般我们设计导航会注意以下几个方面：

一、合理规划

1.1遵循7±2 原则

导航菜单建议最多不要超过 9 个，最少不要低于5个

原则解释：1956 年乔治米勒对短时记忆能力进行了定量研究，他发现人类头脑最好的状态能记忆含有 7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。

在生活中我们经常会把一长串的数字分成 7 个左右的数组来记忆，这样会使难度降低很多，米勒称这种单位为“组块”

是不是通过分组记忆以后，自己能记住的更多？这就是7±2 原则的分组

通过上面7+-2原则描述我们明确到：在导航菜单当中，超过 9 个会给用户查找时带来困难，低于 5 个说明导航菜单的分发效率不够高效

有人会说，在实际业务中，不会有那么理想，如果需要超过 9 个时，应该怎么办？

超过9个时，一定要对菜单进行分组，因为导航过多，用户寻找会十分迷茫，通过分组的方式，能够对菜单进行再次分类，提高查找效率

说的太干不如举个栗子 ：

比如在微盟、有赞、小鹅通的导航设计当中，微盟、小鹅通有很大不足，我们来一一拆解

小鹅通：共有14个导航菜单， 且菜单之间形式不同，表现也会有所差异， 也因此对于用户而言使用起来会产生很强的疑惑感

微盟：一共有11个一级菜单，不符合7+-2原则，同时也能够感受到在视觉层面上，微盟的导航菜单没有分组，难以寻找和记忆

有赞：虽然在导航的数量上也是有9个以上，但是它对菜单进行分组，有效提高了用户查找时的效率，因此在设计上更加合理

如果菜单栏数量过多怎么办？下方2.1小节会有讲到～

1.2 导航菜单不能隐藏超过两级

导航菜单隐藏超过两级时，代表着产品在用户的使用规划中，没有深入思考整个用户体验

导航菜单层级越多，用户体验就会越差，你会发现一些拥有三级导航的菜单，都会通过设计优化来实现隐藏导航的合并，从而减少用户操作负担

比如有赞就是一个典型例子，在有赞零售的导航菜单中其实是有三个层级，但是通过交互层面的优化，将二、三级菜单直接展示出来，形成一个整体，提升了用户体验避免用户层层寻找

同时在交互上，采用 悬停+点击结合的形式，用户即可以通过悬停鼠标进行快捷操作。同时又可以通过点击，确定跳转查看该一级导航下的菜单，能够提高用户的操作效率

鼠标悬停还是鼠标点击

作为导航来说，其操作本身并不多，但是设计上，点击与悬停(hover)之间，还是存在很大差距

这里想要说明这两个操作本身而言，并没有对与错，但是适用场景的不同，导致在设计属性上存在着较大差异

鼠标悬停操作

鼠标在悬停时触发的操作时间太短暂，会给用户带来很强烈的挫败感，同时在悬停选择下一级菜单时，鼠标移动悬停也同要会造成这样的结果，因此在设计时，对鼠标悬停时的操作要格外留意。通常在悬停操作当中，只适用于只有一个菜单层级的菜单选项，这样用户在操作时更加方便

鼠标点击操作

鼠标点击操作多发生于多级导航进行操作，同时鼠标点击的形式，会给用户正向的反馈，用户点击后明确知道菜单栏不会隐藏，因此在两个操作之间进行选择操作时一定要多加思考

二、确定菜单广度和深度

导航菜单广度和深度的区别

菜单广度：导航菜单中每一个层级包含的菜单项数目为广度

菜单深度：导航菜单层级的数目为深度；

深广度平衡帮助用户进行快速选择，通过能够对整个产品架构有着第一眼的认识

2.1当菜单广度过大时，怎么办？

当菜单广度过大，我们也能够通过设计的方法来优化导航菜单

我举一个比较具有代表性的例子：腾讯云

腾讯云目前拥有大概100+个云产品，他们都分布在导航菜单上，因此在导航设计上，它采取一种新的模式：1.全部菜单导航+2.搜索菜单+3.自定义导航

在全部菜单中，展示了腾讯云100+个云产品项目，通过搜索进行筛选得到用户想要的菜单。同时在导航栏上，支持用户去自定义5个菜单选项，也因此用户将常用的菜单添加至此，也更方便用户去寻找。这样在满足业务的前提下，通过一些个性的设计，使100+个菜单也能够塞得进整个导航中

2.2菜单深度过深时，怎么办？

当面临菜单深度过深时，通常需要从几个方面去考虑：

与产品经理沟通是否到位

这里主要是想通过与产品经理的沟通，了解到菜单的架构设计的原因，以及能否为你的设计进行一次重新的梳理，寻找一些值得优化的点

建议在寻找产品经理之间，自己能够通过一些思维导图的软件将自己产品的菜单目录全部罗列出来，能够先多思考，为下面的沟通节约时间、提高效率

用户体验地图的绘制

在一个B端产品中，用户的目的虽然复杂，但是研究用户每一步操作，还是会查找出一些规律，我们可以从这些规律中，做些文章

比如我们之前在一个医疗系统中，根据角色的不同，将医疗角色分为：前台、咨询师、医生、老板这四种角色，每个角色所关心的点都会有所不同。比如

老板：最关心每个门店目前的的情况数据，比如门店营业额、门店待客数、每个医生的治疗量以及治疗最少的医生。这些都代表着他不同场景下使用的习惯。

将这些情况分析以后，提炼出核心的需求点。

然后绘制完成他们的用户地图后，根据角色，明确每一个角色的日常操作有哪些，从而确定我们所有菜单所展示的位置以及整个菜单的层级关系

三、菜单层级有区分

我将常见的导航区分进行总结，分为以下三种形式：

3.1颜色区分

颜色区分作为最直接最有效的一种形式，这种形式也是后台页面最初的状态，我通常会用颜色区分和移动端顶部状态栏的演变史做对比，就其功能而言他们都有很多相似的点：

微信在2018年12月份时，发布微信7.0，将顶部导航由黑色转变为白色，引得大家争论不休，而经过时间不断洗礼，大家也逐渐接受这个了事情，渐渐忘去

2019年也有类似的事情发生，有几个产品的WEB端进行了一系列的大改，YouTube、Twitch、Twitter都进行了重新设计，他们也不约而同的将块面去除，去掉多余的的灰色，通过留白和空间将页面拉开

这否是是下一个WEB端所要追寻的趋势，我还不得而知～

如果WEB端都有此改变，那么B端产品还会远吗？

说回B端设计，颜色上的区分和移动端类似，更多体现在导航层和内容层之间的区别，因为从本质上讲，这两个本身就属于不同的业务模块，通过颜色的区分，是最为直接，最简单的一种方式。

这种形式常见于很多复杂系统，例如：飞书

小唠一句：飞书的文档功能以及协同工作比钉钉好用太多，如果大家现在还在寻找协同软件，可以试试飞书～

左侧导航为深色，能够让用户更沉浸的体验，因为屏幕边缘都为深色，用户在使用时能够真正做到有区分

3.2 投影区分

在现如今的移动端产品，投影大行其道，弥散投影，高级投影随处可见，也逐渐影响更多WEB端的产品使用投影。增加自身产品Z轴空间

Z轴空间给导航带来了的纵深感，同时能够在功能层级上，通过分层设计，使页面层级关系十分明确，引导用户使用导航。

Material Design设计的出现，正是Z轴空间的鼻祖，在我们的屏幕中开辟了第三个设计纬度，在Z轴上展示增加了更多的交互形式。在几何体系中，Z 轴是 X 轴和 Y 轴之外垂直于屏幕的轴，我们通过引入 Z 轴在交互设计中呈现三维的物理空间感，使页面内容能够得到有效区分

比如Teambiton在页面中运用投影，强化了页面层级的关系

3.3 分割线区分

分割线针对导航功能性不高，同时要满足很高设计感的产品

分割线太深，页面十分割裂，分割线太浅，页面划分又不明确，因此需要设计师对分割线的把控十分合理

分割线在Dribbble上见到过很多，通过简单的线条加上空间的分割，将导航区与内容区分开，形成很好的视觉感受。如果你是刚开始尝试做导航，不太建议尝试这种形式，因为对于页面空间的把控要十分苛刻

四、导航可配置

B端产品易操作性中，导航可配置操作算得上是一个重要的点。其中最主要是通过配置操作实现导航易用性的提升而如何让菜单可配置，通常的做法有两种。

4.1 我的菜单

如果你的产品是针对多数角色不同的用户进行设计，那么在导航设计时，可以考虑增加一个菜单选项：我的菜单，对于菜单进行标签处理

设置一个我的菜单，将用户常用的菜单进行添加，能够满足每一位用户的菜单快速选择的需求，通过这样的自定义，用户在常用的菜单下，能够通过我的菜单进行快速跳转

举个栗子 ：

在印象笔记当中，其快捷方式就是可以将用户想要的模块放置在此，可以快速跳转

4.2 角色配置

如果你的产品是为特定几类角色进行服务，那么在导航设计时，可以考虑根据用户角色的不同，给用户不同的导航展示

通过角色的筛选，使用对于复杂导航进行简化，同时管理员可以根据自身公司的业务不同，给用户配置出不同的角色权限予以满足用户的导航需求，这样在设计层面上能够减少很多不必要的麻烦～

二、上海网站建设多少钱？

网站建设费用从几千到几万不等，您这个问题问的也比较空泛，就跟我们到手机店去买手机一样，买个手机多少钱，不同的品牌，不同的配置，价格差别还是很大的。

举例来说，我在上海，除去一些模板网站，定制网站来说，上海的标准价格在2-5万左右，要结合您的设计要求与功能要求。

网站费用拆分的话，有以下几点：域名费，一般100元一年；空间费，一般1000-2000元一年；网站备案一般网络公司都是赠送的；网站设计与功能开发，一般的占比在六四分；网站维护费在1000-2000元左右；

选择网站建设公司建议找一家专业靠谱的公司，在对比的时候多看看他们的案例，注意案例的真实性，有时间的话去网络公司看看，看看他们的实力，最后就是网站公司的专业度了，通过面谈可以知道哪些公司是专业的。

三、建设企业网站多少钱？

做个企业网站的费用一般是三千左右，时间是半个月的样子如果要求比较高，定制开发费用还是会有一定的浮动的

四、牛商网网站建设多少钱？

看你的具体要求了，一般这种商城类的只要不订做价格就不高。具体的可以细说

五、网站建设需要多少钱？

网站建设费用，首先看定位，网站有几大类：模版网站，普通定制网站，高端定制网站，成本价格差别很大

模版网站成本很低，一个模版卖给无数家公司，费用可以做到免费，几百或几千；

普通定制网站成本几万，费用也是几万；

高端定制网站成本大几万，费用大几万到几十万；

知名公司定制高端网站成本大几万，十几万，费用十几万到几十万；

国际知名公司定制高端网站成本几十万，费用几十万到上百万；

是收藏的知名网站公司：

他们的作品都很精彩，每一个都不一样，根据企业量身定制

六、公司网站建设明细报价，企业网站建设需要多少钱？

企业网站建设需要多少钱？? 网站建设行业虽然已经有了20年了，但是市面上并没有详细的报价表，这是因为网站的价格并不是固定的，网站的费用会受到很多因素的影响，下面角点科技的小编就来告诉大家哪些因素会影响到网站的价格。

一、网站域名

网站域名就是网站的访问地址，大家都会通过这个链接进入你的网站，一般常见的域名结尾有.com和.cn，注册和购买一个域名一般几十到几百元。

二、网站空间

市面上网站空间费用报价差距较大，小空间商一般十几块钱就可以买到，而国内知名的网站空间商提供的网站空间产品一般都是几百到几千一年。网站空间费用预算需要考虑两点，其一是空间商品牌是否为知名品牌，其二，空间大小。角点科技与国内外大型空间提供商有着长期的合作，能为你推荐最适合你的空间容量和品牌，减少空间浪费和费用支出。

三、网站整体制作

网站的整体制作应该网站建设费用中支出较多的一项，搭建一个电商网站建设快的话两个周，工程量很多的话时间则会更长，这中间涉及到网站每个页面的设计如：网站首页、栏目页、内容页、单页面等，还有后台程序开发、产品资料上传等诸多内容，技术和人力成本投入较多。一般一个简单页面几百，复杂页面可能需要几千。

四、网站维护

网站维护可以分为两类：其一是网站运营费用包括正常的内容删减、产品添加、新闻更新等操作，企业有时候还需要对网站进行优化和推广，这个费用是根据企业自身需求来定。另外一类是网站安全维护费用，比如网站被黑客攻击、无法访问等，当然角点科技在开发电商网站时就以客户安全为第一要素，客户对于安全无需后顾之忧。

以上就是小编对网站建设费用的分析，希望对正在准备搭建网站的朋友有所帮助。

希望这篇回复可以帮助和鼓励每一位用心的朋友。感谢支持，感谢鼓励。我是专注于网站建设√网站优化√的角点科技，一个和你分享经验共同努力向前的朋友。欢迎共同交流学习！

七、网站怎么建设？

首先建设网站需要大家有清晰的头脑，在建设之前要明确自己要建立的核心问题是什么，希望建设一个怎么样的网站。在确立了核心问题之后，要对整个版面进行设计，对自己的网页的具体想法也要有一定的规划！第二步网站一般都会被搜索或者说都会显示在网页之上，那么在建立网站的时候就需要有关键词。也就是在网页上搜索该词语就能够看到你的网站。需要自己思考一个关于自己网站的关键词。第三步这个是最重要的一步，也是必须经过的一步也就是域名，这就好比品牌名一样，这个是为了方便别人收藏和记录。也是打响自己网站的必经之路。

第四步在规划好以上的事情之后，接下来要开始建立网站了。首先是要先去注册网站的域名，有了域名才能够进行一下的操作。

第五步然后根据刚刚所说的，建立一个怎么样的网站，按照之前思考好的模板进行建设，也可以参考网上的模板进行设计。

第六步，当然这时候已经按照自己的想法建设好了网站，那就要对网站的各个方面进行完善，比如加入功能以及其他方面的设计，完善自己的网站。

最后当一切完成之后，就可以添加有关于网站的相关资料，方便浏览者的观看。接着检查网站上的所有东西，然后点击保存即可！就这样轻轻松松就完成网站的建设了

八、网站建设步骤？

可以分为以下几个阶段：

1. 内容策划阶段：

在这个阶段，需要明确建站目的、访客群体划分、行业特性分析以及表现形式思考。明确这些内容有助于规划网站架构、功能、风格和内容表现形式。

2. 设计阶段：

设计阶段主要包括原型设计、交互设计和 UI 设计。在这个阶段，设计师会根据内容策划阶段的要求，制定网站的框架、布局和视觉效果。

3. 程序开发阶段：

程序开发阶段分为前端开发和后端开发。前端开发主要负责网站的页面展示和用户交互，后端开发则负责网站的数据处理和功能实现。

4. 测试与调试：

在网站开发完成后，需要进行功能测试、兼容性测试和性能测试，确保网站的各项功能正常运行，满足不同设备和浏览器的兼容性，以及具备良好的性能。

5. 网站上线：

经过测试并修复所有问题后，网站可以进行上线工作。上线前需要对网站进行备份、配置服务器、域名解析等准备工作。网站上线后，还需要持续关注运行状况，确保网站稳定运行。

6. 后期维护与优化：

网站上线后，需要定期进行内容更新、功能优化和技术维护，以保持网站的活力和竞争力。同时，还需要关注网站的 SEO 优化，提高网站在搜索引擎中的排名，吸引更多访客。

在整个网站建设过程中，每个阶段都需要重视且注意细节，确保网站质量。从内容策划到设计、开发、测试、上线以及后期维护，都需要围绕用户需求和体验进行优化。

九、网站建设多少钱？就是一般的公司网站建设？

网站建设多少钱？就是一般的公司网站建设　　

在做网站建设行业中，选择做什么价位的网站，做一个网站需要多少钱，这都是我们做网站前很关心的问题。互联网是个神奇的大网，大数据开发和软件定制也是一种模式，这里提供最详细的报价，如果你真的想做，可以来这里，这个手技的开始数字是壹伍扒中间的是壹壹叁叁最后的是驷柒驷驷，按照顺序组合起来就可以找到，我想说的是，除非你想做或者了解这方面的内容，如果只是凑热闹的话，就不要来了。

　　网站建设需要多少钱跟这几个原因相关：网站域名，网站空间，网站制作，网站简单推广，网站维护与服务，公司大小，公司名气。

　　域名空间是多少钱呢?一般的长沙网站建设公司域名空间收取的费用是400-800，(一个国际一级域名，或国内一级域名，加一个100M双线空间)，但是很多网站制作公司给个空间不是双线的，空间访问人数，最大在线人数都是有限制的。选择域名空间的时候要注意这方面。

　　注意：什么一块钱买域名，20块钱买空间这些肯定是有问题的，天上不会无缘无故的掉陷阱，网站建设的成本都比这高。记住花合适的钱，买合适的域名空间。

　　正式的网站设计公司做个普通的网站一般是1800-3600,

　　但是有的业务员比较贪吃就会六七千做个一般的网站，也有的公司因为要养很多人，所以做个网站普通网站的价格也是上万的。

十、商城网站建设需要多少钱?

商城网站建设下来基本也就在3000元以内，具体要根据你的实际有需要来决定的，这里的3000元参考的是跨境电商网站的搭建费用，不包含云服务器、CDN 服务、SEO优化费用的。