期小结了常见的五种移动导航，标签导航、TAB导航、舵式导航、抽屉导航和宫格式导航。这期继续分享另外五种常见的导航。

列表式导航

列表导航是手机和网页端都十分常见的导航模式，主要用于展示文字信息。使用列表式导航的页面都十分干净，内容清晰，能快速定位到目标。APP中一般以图文结合的模式展示。

小结：

采用列表导航的页面内容多为左对齐，同时页面会产生大面积留白，使页面看起来干净整洁。使用上需根据具体需求来设计展示内容和高度，用户关注点在哪里，就展示哪些信息。适合功能之间互相独立，切换频率不高，以内容为主的信息或分类展示。

分段式导航

分段式导航也是IOS系统自带的标准控件，它体积小巧，可根据内容自由伸缩，能轻松融入界面，不占用空间，是目前IOS端使用频率较高的一种导航。

小结：

分段式导航IOS的标准控件，可以根据页面内容自由伸缩大小，使用上十分灵活，可以很轻松的融入页面。适合页面分类切换频率较高，导航数量在2-4个之间的场景，不适合安卓，和一级导航。

轮播式导航

轮播式导航是通过横向轮播面板衍生出的一种导航模式。通过横向列表把信息藏到页面之外，充分利用空间。只需滑动手指就能轻松的切换。配合大图背景，让用户同一时间专注一个目标，使用上体验更好。

小结：

通过案例，我们不难发现使用轮播式导航的页面整体十分干净整洁，配合大图的展示视觉冲击更强烈，体验更好。但缺点一次只能切换相邻的选项卡。用户也大多会选择优先出现的功能，藏在后面的功能使用频率会相对较少。适合功能之间不频繁跳转，内容经常更新，视觉效果直观，彼此独立的内容。在使用上注意需要在页面边缘给出提示，引导用户滑动。

悬浮按钮导航

悬浮按钮导航是将导航页面分层，无论你到达APP的哪个页面，悬浮图标永远悬浮在页面顶层，依靠悬浮层可以迅速对当前页面进行操作。悬浮按钮也是Material design的标准控件，同时在Android UI 交互中也是最常见的元素之一。常用来放置其核心功能，在用户流程中起到重要作用，常出现在页面右下方，并使用对比强烈的色彩突出，点击时弹出其功能。

小结：

通过案例可以发现浮动按钮在页面上十分突出，通常用来承载相关度最高、最常用、最重要的操作。并根据页面来显示隐藏以及切换不同状态，是非常实用的一种导航模式，一般出现在需要正向操作的页面。但是需要注意的是，悬浮icon会遮挡某些页面的操作，如上图Gmail页面中浮动按钮挡住了下面的收藏，用户需要额外的滑动页面才能点击。所以在设计时应该考虑进去，比如在悬浮按钮出现的页面为它留有位置。

复合式导航

随着应用功能越来越多，页面的分类也越来越细致，单一的导航模式已经无法满足信息的层级分类，这时就需要使用复合式导航能将多种导航组合到一起，使大量信息通过多层级分类有序的展示在一个页面，是目前最常见的导航模式。

小结：

复合式导航的设计随处可见，其优点是将多层级的信息有序的排列在一个页面，使信息分类更明确，页面更有活力。使用上多为一个主导航加两个辅助导航的设计，比较少有超过3种以上的设计，过多的导航会使用户失去焦点，在导航的层级搭配上也需要注意。

总结

通过两期对移动导航的分析和小结，我们不难发现移动导航的设计上是非常多样性的，不同的产品功能会出现形式各异的导航，每一种导航都有各自的使用场景。没有最完美的导航，只有最适合的导航。当我们在实际场景中运用时可以先观察竞品如何设计，分析其利弊，再结合自己产品实际的需求、功能、内容、用户使用场景等进一步思考，做出多套方案后进行最优选择。在平时使用产品的过程中观察各种层级的导航变化，思考它们的设计方式，进行适当小结。通过长时间的积累，我相信大家对各种导航都能够运用自如。

适应网页建设是现代网页设计的重要方向之一，它可以使网页在不同设备上具有良好的显示效果，无论是在电脑上还是在手机上都能够提供优质的用户体验。自适应手机网页模板就是一种适用于手机端浏览的网页模板，它能够根据不同尺寸的屏幕自动调整页面布局，保证内容的完整显示，并且还能够提供流畅的操作体验。接下来，我将详细介绍自适应网页建设以及自适应手机网页模板的优势和使用方法。

首先，自适应网页建设与传统的固定布局相比具有很多优势。传统的固定布局在不同设备上的显示效果常常不尽如人意，通过放大和缩小网页来适应屏幕大小，导致文字和图片的不清晰、排版混乱等问题，严重影响了用户的阅读体验。而自适应网页建设则可以根据不同设备的屏幕尺寸和分辨率自动调整页面布局，使文字和图片适应不同的屏幕大小，保持内容的清晰和排版的整齐，提供更好的阅读体验。

其次，自适应手机网页模板是实现自适应网页建设的重要工具。自适应手机网页模板是一种专门为手机浏览而设计的网页模板，它可以根据手机的屏幕尺寸和分辨率等参数来自动调整页面布局，并通过响应式设计实现一套代码适用于多个设备，节省开发和维护成本。同时，自适应手机网页模板还提供了丰富的样式和布局选择，可以根据实际需求选择合适的模板进行建设，快速搭建出具有良好用户体验的手机网页。

在使用自适应手机网页模板的过程中，首先需要选择合适的模板。根据不同的网站类型和需求，选择合适的模板，可以从模板库中进行选择，或者根据自己的需求进行修改。选择模板时需要考虑模板的布局、样式、配色等因素，以确保最终的网页能够与企业或个人的形象相匹配。

其次，需要根据模板进行页面设计和内容填充。根据模板提供的布局进行页面设计，包括导航菜单、主要内容区域、底部信息等的安排，确保页面结构清晰、易于导航。同时，根据网页的需求，填充相应的内容，包括文字、图片、视频等。在填充内容时需要注意文字和图片的大小和排列方式，确保在不同设备上都能够正常显示。

最后，进行网页的测试和优化。在完成网页的建设后，需要进行测试，以确保在不同设备上都能够正常显示和使用。测试时需要将网页分别在电脑和手机上进行查看，并进行相关功能的测试，如导航链接是否正常、图片是否显示清晰等。如果发现问题，需要根据实际情况进行相应的调整和优化，以提供更好的用户体验。

总结起来，自适应网页建设和自适应手机网页模板可以帮助我们解决在不同设备上显示效果不佳的问题，提供优质的用户体验。通过选择合适的模板，并进行页面设计和内容填充，最后进行测试和优化，我们可以快速搭建出具有良好用户体验的手机网页。随着移动设备的普及和使用频率的增加，自适应网页建设和自适应手机网页模板将会越来越受到重视，成为未来网页设计的重要方向之一。

了日常方便大家都会选择用手机去浏览电脑网站，就会出现网页不适应屏幕大小，因此，为保证用户的浏览网页的效果，建议网站的宽度设置在960-1200px之间，但如何去自定义网站宽度呢？接下来我会用乔拓云网给大家演示一下我的方面，乔拓云网里面还有超多电脑网站的模板，直接复制就可以创建自己的网站了，设置网站宽度等其他全部操作都是可视化编辑哦

工具:

乔拓云网

操作步骤：

1、首先我们可以先从浏览器当中搜索找到乔拓云网的官方网站,可以注册一个账号后登录到后台，如图片中的红色箭头所指位置去操作

2、进入到后台管理点击【电脑网站-去设计】，就会跳出一个模板

3、觉得这个模板不适合的话，可以点击【极速建站】里面有超多模板可以选择，根据自己的需求去挑选就可以啦

4、选好想好的模板后，在电脑网站设置页面，点击左侧导航【样式--基础设置】中调整，支持设置自定义网站宽度

5、设置好后记得点击保存哦~

6、以上就是如何调整网站大小与屏幕适应的方法，大家快去用乔拓云网试试吧~