制作一个手机导航页面（怎么在手机上弄导航）
本文目录一览：
app导航设计方式有哪些
生活中大家或多或少都会有迷路的经验，但你是不是从来没思考过迷路的定义是什么？
迷路的定义其实有两个核心：
1.想要到达一个目的地；
2.不知道自己在哪里，应该往哪走。
和生活中的迷路一样，我们在使用APP过程中也可能会「迷路」。因为我们使用APP时同样需要到达一个页面，如果没有合适引导，我们很难知道他需要怎么跳转才能到达自己想要的页面。在APP中，导航设计起到的正是这种关键作用：让我们了解自己此时在哪个页面，自己想要到达某个页面应该怎么跳转。
下面我们通过实例从是什么、为什么、怎么做这三个方面来介绍一下目前APP设计中最常用的几种导航。
一、底部标签导航
1.简介
底部标签导航是APP中最常见的导航。
为什么它会是最常见的？就像超市把利润最高（最想卖给顾客）的商品摆在顾客触手可及的地方一样，APP最核心的功能通常也应该放在用户触手可及的地方。在我们握持手机时，屏幕底部区域恰好是大拇指最方便触及的区域。因此大多数APP产品才会选择底部标签导航的形式来呈现产品核心功能。
2.设计特征
1）通常作为APP的一级导航（主导航）。
原因同简介里的解释。
2）标签数通常为3-5个。
为什么不更多？因为大拇指触摸屏幕时的接触面积较大，一旦标签数超过5个，每个标签的所占面积不足，将会使正确的标签点击选择变得困难，甚至导致误点击。
3）标签通常是图标+文字形式的。
标签通常可以有文字、图标、文字加图标这3种设计形式，为什么非要用图标+文字？首先，文字的意义指向性强于图标。举个例子，一个X，可以表示关闭，也可以表示错误，甚至可以表示未知数，但「关闭」这两个字表示的就是关闭。其次，人类作为视觉化动物，对图形比对文字敏感。综合起来，图标+文字的形式是意义指向最准确的形式，也是让我们以最快理解标签含义（功能）的形式。
4）标签顺序通常按功能优先级从左至右排列，第1个标签显示产品主页面。
为什么？因为凡有排列，在视觉上必有顺序。有顺序，必有优先级。因此第1个标签通常显示产品主页面，或者说放置最核心的功能。
5）如果标签数多于5个，但依然要使用底部标签导航，可以把最右侧标签设计为「更多」，然后点击「更多」会显示更多功能。
这就像产品调研的问卷设计中我们设置选项一样，有时候我们需要让选项互斥，但选项数量又很多，这个时候我们可以把重要性低的几个选项合并成一个选项叫「其它」。
6）标签对应功能模块间通常有高频次切换需求，且功能层级相当。
7）通常用户所在页的标签需要突出显示（正常是通过颜色差异和标签图形变化来突出）。
为什么？因为要让用户在APP中不「迷路」，一个至关重要的点就是让他知道自己现在在哪。
8）底部标签在特定情况下可以做成沉浸式的。
为了增加页面的展示空间，让用户能更专注（沉浸）于页面内容，比如说内容阅读类产品，底部导航可以设计成上滑时隐藏、下滑时显示的形式。但这种设计可能会导致使底部标签导航失去其原本在标签切换中的便捷性，使用时需要慎重考虑。
9）考虑到大屏手机的单手操作，底部导航标签有时会采用左滑右滑切换标签的交互。
3.优缺点
1）优点
可以直观展现APP的核心功能页面及入口；
我们可以在不同的功能模块间进行快速切换。
2）缺点
作为页面固定显示的内容，会挤压页面其它内容的显示区域，进而降低页面的信息承载量。
4.原型设计实现案例
底部导航
点此查看原型实例
二、舵式导航
1.简介
舵式导航本质是底部标签导航的变式。那么舵式导航为什么要叫舵式导航呢？首先是形似，其次是因为舵式导航中最重要的导航就像舵在船的航行中一样重要。即一个底部标签导航中，有一个功能标签相比其它功能标签来说更重要、突出，更需要强调。
2.设计特征
1）有一个核心功能比其它功能更重要，更需要强调。常见于UGC产品，比如微博、闲鱼、抖音以及原型案例中的小红书。
2）算上需要强调的标签，标签数量通常为3个或者5个。
为什么？和船的控制室的对称式设计一样，当有标签需要突出的话，两边的标签在视觉上则要设计成对称的。
3）舵这个概念在标签上的呈现，也就是突出的形式。既可以真的有舵的形，也可以只给标签做简单的差异化设计。
前者的例子：闲鱼。
后者的例子：微博、抖音、小红书。
3.优缺点
1）优点
可以直观展现APP的核心功能页面及入口；
我们可以在不同的功能模块间进行快速切换；
可以凸显核心、频繁使用的功能，引导用户使用该功能（比如产出内容）。
2）缺点
作为页面固定显示的内容，会挤压页面其它内容的显示区域，进而降低页面的信息承载量；
凸显最重要的功能的同时，一定程度上会弱化其它核心功能的使用。
4.原型设计实现案例
底部导航
点此查看原型实例
三、顶部标签导航
1.简介
顶部标签导航通常作为次级导航，配合底部标签导航或舵式导航一起使用。
2.设计特征
1）相对底部标签导航而言，标签数量更灵活。
作为二级导航时，通常可以是2-3个标签。当二级导航的分类数较多时，也可以超过5个标签。
2）标签通常是文字形式的。
为什么不像底部标签一样设置成图标+文字的形式？因为图标+文字相比纯文字而言会占据更多的页面面积。如果采用这种形式，再加上底部导航，将极大挤压页面其它内容的显示区域。
3）当标签分类数量过多时，通常可以设计成左滑滚动标签的形式。
但需要注意的是，滚动标签意味着在不滚动状态下，页面默认状态下显示的标签数是有限的，这时我们让默认状态下可见的最后一个标签露出一半，以提示我们它可以左滑滚动，一定程度上减少用户的发现成本。
在电商产品中，通常还会有一种类似于顶部滚动标签导航的侧边分类滚动导航。
3.优缺点
1）优点
我们可以在不同的次级功能模块间进行快速切换。
2）缺点
作为页面固定显示的内容，在和底部导航配合使用时，会挤压页面其它内容的显示区域，进而降低页面的信息承载量。
4.原型设计实现案例
1）顶部导航
点此查看原型实例
2）顶部分类滚动导航
点此查看原型实例
3）侧边分类滚动导航
点此查看原型实例
四、抽屉导航
1.简介
抽屉导航也叫汉堡菜单，是将一个导航页（菜单）隐藏在当前页面，点击汉堡按钮，导航页会像抽屉一样从页面左侧或右侧拉出。我们可以通过现实意义的抽屉来理解这种导航：
1）抽屉作为收纳物品的容器，通常可以存放多个物品（抽屉导航可以放置多个次级功能入口）
2）抽屉通常是关起来的，需要时才打开，因此抽屉内的物品通常不可见（抽屉导航只有点击后才能看到次级功能入口）
2.设计特征
1）通常用于放置非常用、非核心、低频但必要的功能。如对设置、个人信息等。
为什么要放置低频、非核心功能？因为抽屉导航具有隐藏的特性，而根据前面的介绍，越是核心、高频的功能，就越应该放在用户容易看到、触及的地方地方。
2）使用抽屉导航，通常意味着产品的主要功能集中在主页面当中。比如摩拜。
3.优缺点
1）优点
占用页面空间较少，使得主页面能承载更多的信息，页面更简洁，我们可以更专注于使用产品的核心功能。
具有较强的次级功能扩展性，可以在抽屉导航页放置较多的功能入口。
2）缺点
隐藏式设计，可发现性较差，增加了用户的发现成本。
4.原型设计实现案例
抽屉导航
点此查看原型实例
五、宫格导航
1.简介
说到宫格，很多人第一时间想到的会是九宫格。实际上宫格导航不只是九宫格，也可以是其它数量的宫格。宫格导航会以分格、平铺的形式来展示功能，通常作为次级导航使用。
2.设计特征
1）宫格对应的功能数量较多。通常用户提供服务较多或者类目较多的APP，如支付宝和微信。
为什么？因为要组成宫格，宫格数通常是6、9、12或者8、16甚至更多。
2）通常功能之间层级相同，使用频率相近、彼此独立且切换频率低。
为什么？因为分格平铺的形式可以让用户一目了然地看到所有功能，彼此之间没有显著的优先级差异。另外因为宫格导航只显示功能入口，不显示实际的功能页面，因此要切换功能时需要退回宫格导航页面才能切换其它功能，不适合作为彼此有关联、切换频繁的功能的导航。
3）功能间如果具备一定的关联性，可以分类处理。
为什么要分类处理？因为当宫格数量过多时，依据功能的关联性做分类，可以便于用户更快地找到自己想要的功能，减少用户的寻找成本。
3.优缺点
1）优点
可扩展性强，可以根据需要向下扩展功能入口；
可以让我们一目了然地知道产品所提供的功能，快速找到自己想要的功能。
2）缺点
不展示功能对应页面的内，无法直接执行功能操作；
功能间切换不方便，要切换功能时需要退回宫格导航页面才能切换其它功能；
容易形成较深功能层级和功能路径，增加用户的操作成本。
4.原型设计实现案例
因设计较简单，未附案例
六、列表导航
1.简介
以列表的形式呈现功能，适用于大量的功能的展现，通常作为次级导航，如网易云音乐的账号页。
2.设计特征
1）通常功能之间层级相同。
2）通常在列的右侧显示箭头表示有二级内容。
3）当列表功能较多时，可以通过调整间距的方式对功能进行分类。如无合适分类名称，也可以选择不加分类名称。
3.优缺点
1）优点
可扩展性强，可以根据需要向下扩展功能入口。
2）缺点
下方的功能可能会被忽略。虽说列表导航的功能间层级相同，但如果列表功能过多，我们需要向下滚动页面才能看到下方的功能，因此这一部分功能容易被忽略。
4.原型设计实现案例
因设计较简单，未附案例
七、总结
1.我们使用产品是为了满足某种需求（达到某种目的），因此导航最主要的功能在于让我们清楚地知道自己所在页面（所处位置），并帮助我们更快地到达目的页（目的地）。
2.导航设计的形式服从设计的于目的。每种形式的导航虽然都有常用的使用场景，但这不意味着设计导航时需要严格遵循这些使用场景。在实际的设计当中，还需要根据产品侧及用户侧的需求具体分析。
3.一款产品通常不会只使用一种导航，而是会根据信息架构以及功能的需求，混合使用多种导航。
以上原型案例现在我们都可以在墨刀模版区找到并且免费使用哦！随时都可以按自己的需求来编辑模版或者直接复用！
如何查看模版项目，我们可以登陆墨刀：modao.cc，进入工作区，点击“新建项目” 就能在下方看到。
选择一个模版，点击“使用模版”。
进入项目编辑区，可以随意改动各种元素。
此外，如果点击“预览模版”，也可以一键查看该原型模版的教程哦！
“红色”批注区域即为文字教程。
更多模版信息可参考旧文：再也不用四处找原型模版了 墨刀模版库全面升级！
如何设计一个html页面的导航栏在手机端自适应
用以下代码开头：
!DOCTYPE HTMLhtmlheadmeta charset="utf-8"meta name="viewport" content="width=device-width, initial-scale=1"
使用百分比定义宽度，，
CSS代码可以适当使用：
@media only screen and (max-width:449px){
}
自动根据屏幕像素 调用不同的CSS代码。
手机导航怎样设置?
1、首先我们肯定先要在手机上下载手机导航，比如百度地图，然后点击打开。
2、打开后，我们会在上部出现一个搜索项，我们点击搜索，你也可以点击右下角的蓝色路线进行搜索。
3、进入搜索页面后，我们输入想去的目的地，比如故宫博物馆，然后就会跳出相关地址，选中你要去的那个地址，然后点击后边的‘到这去’。
4、然后系统就会马上为你规划路线，有距离较短，时间较少等让你选择，然后点击开始导航。
5、这时候系统会跳出让你设置GPS，你需要打开GPS才可以实时跟进你的位置，所以我们，
怎样用手机导航。
您好！导航给我们的出行带来了很大的便利，尤其是远走陌生地的时候，人生地不熟，导航可以当做半个导游来用，用手机导航更是如鱼得水，极为方便。下面小编给大家介绍如何用手机导航为我们指路
工具/原料
高德地图 移动网络
方法/步骤
1、小编以自己手机上的高德地图导航为例给大家介绍。打开手机上安装的高的地图客户端，就提示你为了提高位置的精确性是否打开gps
2、点击设置，在手机定位服务里面打开手机的使用gps卫星
3、打开gps后返回到导航软件页面，软件显示在线导航使用提示的同意条款，点击同意。最下方有路线 导航 附近 发现这四个选项，点击导航
4、在弹出的目的地页面中，在目的地一栏输入自己的目的地，在地址列表中找到适合的地址选择
5、软件自动进入导航模式，自动开启语音导航和提示功能，到遇到有限速摄像，隧道，加油站等时导航自动语音播报
6、导航页面中的加号和减号可以实时放大缩小地图，并显示离目的地的距离和大概的剩余时间，当目的地到达之后导航自动结束
7、设置页面可以设置常用的功能，如语音播报，车头方向，地图模式等等
注意事项
手机导航的方法很多，个人觉得高德地图还是蛮好用的
手机做导航的时候需要连接移动数据流量
经验内容仅供参考，并受版权保护。
本条经验由dingyuans001编写
希望我的解答对您有所帮助，祝您生活愉快！
如何做好手机网页设计
随着互联网科技的发展以及人们生活方式的改变，手机网站逐渐赶上PC网站，成为企业宣传推广以及用户阅读的的主要平台，因此也有越来越多的企业开始制作手机网站。不过，手机网页设计必须遵循移动端的设计原则，而不是盲目沿用电脑网站的设计规律，毕竟两者还是有很大区别的。
首先，移动端网页设计都需要考虑网络的问题。虽然现在的网络普及程度高，但是大部分用户还是利用手机流量来上网的，因此对手机网页的访问加载速度要求较高。如果用户在流量网页时遇到页面迟滞、视觉错位、信息不全等问题，用户体验就会大打折扣，因此要求网页内容尽量简洁明了，同时展现精准、有用、易用的菜单栏。
还有，因为手机端屏幕大小不一，如果想要保证所有人正常访问页面，维持内容的可读性，那么就需要我们在进行相关设计的时候，尽量控制文本的间距、颜色，着重突出页面的重点内容，让用户更容易看到自己想看到的内容,另外，一般手机中的电话、短信、推送等信息是无处不在的，用户在浏览网站时，注意力很容易就被这些弹出来的信息所吸引，因此网页的图标设计一定要高效，让用户在短时间内就知道网页的导航信息是什么、主要内容是什么，节省用户时间的同时，还为网站争取了成交的机会。
手机网站布局设计方法
1、手机网站的单页
手机网站建设的单页这个是存在于很多企业网站的内容，单页优化有着一定的好处，首先网站的单页是用HTML书写，并且完全静态化，这个是符合搜索引擎的，有利于优化，对搜索引擎友好。
这种页面的布局往往需要的是大气，简洁，直入主题。一般可以用来介绍公司以及公司的主要核心内容。
2、首页布局
手机网站建设的首页是一个网站的核心部分，浏览者首先看到的就是首页，然后才会看到内页，才会了解你的公司，只有首页有吸引力，才能留住浏览者浏览你网站的内容，那么首页的布局就很重要了。
首页需要突出网站的核心，展示公司的优势，尽显企业的特色，而且需要有主次之分，上下之分，因为浏览者的习惯是从上而下，从左而右浏览的。
3、内容页布局
手机网站建设的内容页就是网站的内容详细展示页面了，有的网站建设者没有太多注意的问题，手机网站建设者认为内容页根本不重要或是不是很重要，只要在后台把文章内容上传上去让其显示就可以了。
其实一些大网站的权重流量都是靠这些内容页撑起来的，我们每天更新文章显示的一个界面，这个页面的一个好的内容页能够给网站带来某一特定词的排名。
4、列表页布局
手机网站建设的列表页分为图片列表和文章列表页。图片列表页一般展示的是公司的案例或产品，一般图文布局展示就可以了。文章列表页展示的是公司的新闻或行业动态之类的文章，一般是新闻标题显示布局就可以了。
怎么做个手机访问的简单网页
一、使用像Dreamweaver、Fontpage一样的所见即所得的网页编辑软件。Fontpage较容易些，会操作Word就会使用它。专业人士一般用Dreamweaver来做网页，用flash、firework等来美化网页，可以下载网页三剑客Dreamweaver、flash、firework去做。
二、使用记事本修改网页Html代码，不推荐使用Fontpage等网页编辑软件修改的原因是：很多网页格式如果用网页编辑软件打开就会变形，所以直接使用记事本修改网页Html代码是最简洁有效的方法。可以去下载强化的HTML工具更好，例如： UltraEdit。
首先需要了解一下网站的页面组成，网站一般包括以下几部分：
首页：网站的门面，如同公司的形象，特别注重设计和规划。
次页：网站的主要导航结构页面，讲究风格的一致性，并于首页呼应。
普通页：网站主要的承载信息的页面，设计要求不高，但要求链接准确、文字无误、图文并茂，并沿袭网页的风格。
弹出页：一般用于广告、新闻、消息、到其他网站的链接等等，一般用的很少。
各页面的设计技巧：
一、首页设计技巧
网站首页是企业网上的虚拟门面。一般来说，网站首页的形式不外乎有两种，一种是纯粹的形象展示型，这种类型文字信息较少，图像信息较多，通过艺术造型和设计布局，利用一系列与公司形象和产品、服务有关的图像、文字信息，组成一幅生动的画面，向浏览者展示一种形象、一个氛围，从而吸引浏览者进入浏览。这需要设计者具有良好的设计基础和审美能力，能够努力挖掘企业深层的内涵，展示企业文化。这种类型的首页在设计过程中一定要明确要以设计为主导，通过色彩、布局给访问者留下深刻的印象。另一种是信息罗列型，一般的大、中型企业网站和门户网站常用的方式，即在首页中就罗列出网站的主要内容分类、重点信息、网站导航、公司信息等等，这种风格比较适合网站信息量大，内容丰富的网站，因为是以展示信息为主，这是的设计就要在细微之处体现企业形象，建议设计人员最好仔细阅读企业的CI手册，熟悉企业标志、吉祥物、字体及用色标准，在网站的局部体现出来，往往平淡之中一个优美的符合企业特点的曲线就能够给人以深刻的印象，从而将企业形象印在浏览者的脑海里。设计人员在设计过程中要注意使用这些语言符号来表达一种独特的企业信息。
网页设计时注意事项： 1.不要花哨。 2.要有风格，要突出行业的特点。比如娱乐业热烈活泼些，政府网站则要庄重些；收藏书画业要古朴典雅，策划时装业则要前卫些。 3.一张网页一般两屏到三屏就可以，不要太长，会影响网页打开的速度。如果内容实在太多，应该分作几个页面，或者分为几个二级栏目。
