导航设计

年正如精良的设计一样，优秀的导航也大象无形。不管是浏览好友信息，还是租赁汽车，完美的导航设计能让用户根据直觉使用应用程序，也能让用户非常容易地完成所有任务。

导航的设计是 App 设计发展过程中很值得玩味的地方，由于移动设备特别是智能手机的屏幕尺寸有限，设计者们通常会将屏幕空间尽量留给主体内容，为了在手机屏幕给定的范围内展示出更多内容，优秀的导航栏设计将起到关键性作用，对于不同的操作也当因地制宜地选则不同的设计方案。

如网站设计中，我们会把导航分为一级导航、二级导航等等，其实移动应用和网站设计一样，也具有自己的信息架构。这里我们主要依据市场上面已有的产品对移动应用导航大体分为以下两类：主要导航模式与次级导航模式。

图1-2  次级导航模式

首先看看以下7种主要导航模式：

主要导航模式—— 第一种：跳板式

跳板式导航对操作系统并没有特殊要求，在各种设备上都有良好表现。它有时也被称为“快速启动板”（Launchpad）。跳板式导航的特征是，登录界面中的菜单选项就是进入各个应用的起点。在国内市场上跳板式设计应用很用，如下图的第一个“百度手机卫士”（图1-3）它主要通过功能来展示菜单选项，这种网格布局清晰的把各个功能区域进行划分，能让用户快速找到入口并点击操作。(图1-4)的云图TV，它是一个免流量的手机电视，他的模块相对百度手机卫士来说较简单，主要通过电视台来区分模块名称。比如：中央电视台CCTV、卫士、体育甚至海外频道等等。而美图秀秀（图1-5），更是我们比较熟知的一种，它的主界面用2X3的网格布局把常用的功能入口都直观的表现在上面。

什么是2X3的网格布局了？

2X3网格布局是一种布局形式，常见的布局形式有：3X3、2X3、2X2、1X2（图1-6）。但不一定非拘泥于网格布局，根据需求的功能来定义，可以成比例放大某些选项，以彰显其重要性。

XiiaLive，一款功能无比强大的网络电台，兼具简洁而清新的 UI 设计。这款应用具有不容忽视的导航，设计师用3X3的网格布局把菜单的6个菜单项目布局在屏幕中间，使每个格子都扮演着功能性的作用（图1-7）。

Tripper是一款日本的本地导游应用，他用扁平的设计图标把应用的功能用2X3的网格布局罗列在整个界面中，使得用户能够相当轻松顺手地浏览这款APP（图1-8）.

跳板式菜单也可以说是网格式菜单，它类似于metro UI的堆砌色块，优点简约而不简陋，导航清晰、明显，并能提高操作效率。但设计时切记不分青红皂白的去使用色彩哦，这可能会让用户不知所措和产生疲倦感。

ASM采用的是不规则网格的跳板式导航，以突出内容的优先级（图1-9）。

最近经典的游戏：“别踩白块儿”（图1-10）也是跳板式模块的经典体现。

它把各种游戏模式用网格区分开，仅用黑白两色就能清晰的让用户理解并操作。正如前面所说，在网格布局的设计中，不一定必须遵循几乘几的网格形式，甚至可以成比例的放大或者缩小某些选项，用以彰显他的功能特色，举一反三，设计师还可以合并他的多种网格形式，使得功能之间的逻辑流程更准确。比如别踩白块儿中的每个游戏选项，点击的二级菜单也用跳板式或者列表式展现了更多的功能选择。

个性化的跳板式导航可在显示菜单选项的同时显示用户个人资料。通常会提供自定义功能，允许用户改变跳板导航的布局，如优酷界面。

通过以上的案列分析，我们可以整理如下几点：

1.为同等重要的内容项使用网格布局。

2.为相比之下更为重要的内容项使用不规则布局。

3.视情况使用个性化设置和自定义选项。

主要导航模式——第二种：列表菜单式

列表菜单式导航与跳板式导航其实是有共同点的，他们的共同点在于，每个菜单项都是进入应用各项功能的入口点。

但是不同点在于列表菜单式导航有很多种变化形式，包括个性化列表菜单，体现分组列表和增强列表等。

案列分析：

个性化列表的方式：在photo sticker中首页就采用了个性化列表菜单的方式。而IOS系统设计则采用了分组列表菜单式。

印象笔记的IOS版本它把列表式导航与跳板式导航设计相结合。下厨房即是增强列表导航，何为增强列表导航呢？即就是在简单的列表菜单之上增加搜索、浏览或过滤之类的功能后形成的。

其实列表菜单式导航，这个从网站到手机APP上都很常用的，遵循由上至下的阅读习惯方式，所以使用起来用户不会觉得困难。

通过例举的四个案列，以及列表菜单式导航与跳板式导航的对比，列表菜单，更适合用来显示较长或拥有次级文字内容的标题。

主要导航模式——第三种：选项卡式

选项卡式导航，在不同的操作系统有不同的表现和规则。所以在设计时需要为不同的操作系统专门定义选项卡的位置。

Ios、webOS和Blackberry（黑莓）系列都把选项卡放在了屏幕底端，这样用户就可以用拇指进行操作。

选项卡的导航设计方式，一般为四个导航按钮最为普遍，最方便操作的是第二和第三个按。受制于屏幕宽度的限制，其栏目的个数是有限的，不能超过5个。过多的话明显不利于用户的切换。从界面布局来看，也降低体验友好度。

目前也有部分APP在选项卡的基础上，衍生出了一种交互比较好的弹出导航菜单。突出选项卡上展示的那些核心功能的按钮，方便用户快捷操作。

选项卡至于低端的应用市场上面有很多，这里列举几个比较常见的APP：

屏幕底部水平滚动的选项卡是个非常不错的设计，如的Waterlogue应用，它是一款水彩风格照片处理工具，下面的水平翻动选项卡可以让用户选择多种水彩风格

Android（安卓）、Symbian(塞班）和Windows系统都把选项卡定位在屏幕顶端，它模仿了网址导航模式。

Horner包含了可隐藏菜单，不过它能很妙地从顶部出现，由于明亮的颜色和有关联性的巨大图标，它与整个界面内容形成了鲜明对比。Bettertec设计的气流计算APP，巧妙地运用了占据顶部的标签页。

顶部菜单和底部意义差不多，把菜单放在顶部，可以遵循从上至下的阅读习惯，但也有缺点，即不适用与单手操作。

单手操作用户是所示的这两种姿势（左手用户相反）。绿色代表容易点击区域，黄色为拇指伸展可到点击区域，红色区域超出单手可点击范围。

所以不管是在导航设计中，还是在移动应用的其它设计中，我们应该尽可能的考虑用户的手势操作习惯，给用户更好更便捷的体验。

单手操作手指滑动区域图片

网易新闻则采用了顶部可滑动的导航形式，屏幕顶端可滚动的选项卡:用户移动选项卡后能看到更多的菜单选项。

爱奇艺应用同样也采用了顶部滑动导航的模式。但是这里更值得一提的是，为已选择的菜单项设置使用易于识别或带有标签的图标等不同的视觉效果，用户就能清晰的知道自己选择了哪一项。

主要导航模式——第四种：陈列馆式

陈列馆式的设计通常在平面上显示各个内容项来实现导航。 主要用来显示一些文章、菜谱、照片、产品等，可以布局成轮盘、网格或幻灯片演示。

陈列馆式导航能够很好地应用与用户需要经常浏览，频繁更新的内容，如下图的超级相册和便签本。

相册是我们在日常生活中时常运用到的一个功能，使用频率高，图片数量多，所以采用陈列馆的形式是再合适不过了。

而便签本也不陌生，下图中的便签本可以上下左右拉伸不断创建新的收纳空间，一个个方方正正的分类视图，颜色各异却能达到一种养眼的和谐美。没有花哨的功能，主界面上只简洁地显示收纳盒名称与其中的项目数量。

最美应用:是一款通过互联网平台，每天为用户发送一款赏心悦目的移动互联网应用。它通过类似幻灯片的形式来导航，用户通过查看每个应用来划屏切换屏幕内容，而它下面的进度条也会互动性的跟随着用户的切换而进行图标的动态变化。

主要导航模式——第5种  仪表式

仪表式导航提供了一种度量关键绩效指标是否达到要求的方法。

过设计以后，每一项量度都可以显示出额外的信息。这种主要的导航模式对于商业应用、分析工具以及销售和市场应用非常有用。

Timi时光记账—精美独特的时间轴记账:Timi 时光记账采用了时下非常流行的时光轴的形式，帮你整理账目，简洁明了，界面精美，在方便好用的同时，还满足了视觉享受的需求~。

乐动力：通过数据来查看自己每天活动状态。下滑还有很多功能，都可以点击查看。

主要导航模式——第6种  隐喻式

隐喻式导航的特点是用页面模仿应用的隐喻对象。

这种导航主要用于游戏，但在帮助人们组织事物（如日记、书籍、红酒等），并对其进行分类的应用中也能看到。

途书笔记，用牌照记录数据的笔记。它把导航界面菜单做成了一本一本的书，有一本书的形式，隐喻的表达了书的概念。自定义标题，分类进行查阅。

找你妹的游戏中，导航就用闯关的进度来显示，直观且具有趣味性。

主要导航模式——第7种：超级菜单式

移动设备上的超级菜单式导航与网站所用的超级菜单导航类似，它在一个较大的覆盖面板上分组显示已定义好格式的菜单选项。

这种导航模式在现在的app设计中使用的比较少，而且一般会用做分类检索de 次级导航使用。在手机网站的导航设计中比较常见。

美团中就采用了超级菜单式导航做为次级导航使用。

以上均是主要导航模式：那么接下来针对次级导航模式进行案列赏析。

次要导航模式：

这里我们值得注意的是在导航的设计中，所有的主要导航模式都可以用作次级导航。我们经常能够看到选项卡下再用选项卡导航、导航卡下用列表导航、选项卡下采用仪表式导航、跳板式导航下采用陈列馆式导航灯情况。

而次级导航模式是否可以用作主导航，答案不是确定的，因为事物都是贯穿融合的，主要你运用得当，一切均有可能。现在我把这三种归纳为次级导航是针对现有市场产品进行分析得出，并不一定是绝对。

次级导航模式——第8种： 页面轮盘式。

通过这种导航模式，操作者可利用“滑动”操作快速浏览一系列离散的页面。

疯狂来找钱就采用页面轮盘式，页面指示器（iOS中的术语，指用来表示页面数量的小点）可以显示出导航中的页面数量；执行“滑动”操作可以显示下一页。

次级导航模式——第9种：图片轮盘式

图片轮盘式导航类似于一个二维轮盘，图片轮盘式导航更多的应用于播放器和需要多图片展示应用中。

香蕉相机，作为一个相机应用，该有的功能相对还是挺齐全的。拍照、添加相册图片、添加文字等等，都木有问题，还有很文艺的滤镜和相框~

图片轮盘式导航可以查看更多的香蕉图标，相加几个来几个~~~~

次级导航模式——第10种：扩展列表式

扩展列表式导航通过左/右/上/下拉屏幕或者点击按键显示更多的信息。

在网易新闻，TIMI记账和畅读等应用设计当中，通过点击屏幕左上角的按钮唤出切换项，有些也可以通过向右或者向左，滑动手指来完成。所以当我们觉得菜单比较占用位置的时候，可以尝试用这种方式来隐藏菜单，需要注意的是设计展开菜单按钮大部设计在左或右上角这些显眼的位置。

一个简单的滑动动画，就像拉出一个抽屉，「抽屉式导航」这个名称应该就是来源于此。抽屉式导航突破了数量的限制，更大程度上释放了主体空间，也因此提高了操作成本。

此处就个人意见，如果能将主要功能项组织在 4 到 5 项，选项卡导航的设计方式可能会更好，否则，就应该优先考虑抽屉式导航了。抽屉式导航通过纵向排列切换项解决了具有过多的切换项这一问题。不过这也意味着导航不能和主体内容同时出现在屏幕上

         将入口放在页面的底部，形成标签导航。目前这种导航的设计方式在app设计中非常常见，其优点十分明显，即用户可以非常直接的看到该app的功能结构。而缺点是这些功能并没有非常清晰的主次关系，同时扩展性差。因此目前标签导航建议底部的标签不超过5个，如果超过5个建议使用其他方式。

        该类导航与标签导航相似，不同的是中间的导航标签会蕴含更多的操作选项，即该标签中包含了更多的二级导航。以小红书为例，其底部导航就是典型的舵式导航，点击“+”标签会直接唤醒相机并可以导入图片/视频等内容

        对于舵式导航里的扩展二级标签，这些二级标签可以形成一种单独的导航- 点聚导航 ，从Bilibili的底部导航可以看出，点击中间的导航会弹出4个二级标签：开直播、拍摄、上传和模板创作。舵式和点聚导航的方式往往适用于产品需要特殊引导或者是凸显核心功能的场景。其缺点是功能之间无主次，扩展性差，不利于后期的功能拓展。

       将标签放到界面的上方，就会形成tab标签导航，这种导航适用于类目较多的APP作为二级导航梳理页面逻辑，布局清晰。作为一个二级导航，顶部标签导航应用于多种情境下，可以固定数量，展示有限的几个标签。也可以扩大一定的数量，变成向左滑动展现更多标签，十分灵活，但是因为在手机中左右滑动不如上下滑动方便，因此，个人认为还是不要展开太多标签。以微博和下厨房为例，这两个APP都采用了Tab页导航。

        抽屉导航是将菜单隐藏在当前页面后，点击导航入口即可像拉抽屉一样拉出菜单。抽屉导航一般用来放置对用户而言不太常用或者对于产品而言不太核心的功能，优点是可以节省页面空间，比较适合于不那么需要频繁切换内容的应用，例如对设置、关于、个人信息等内容的隐藏。以网易云音乐为例，其采用了非常标准的抽屉式导航，目前更多APP会采用抽屉导航的变式，即点击导航入口以后，以向右滑动的方式，整个抽屉页将滑动出现并且占据整个屏幕，例如小红书app的抽屉导航。

        一般位于产品顶部，通过点击呼出导航菜单。导航菜单以浮窗形式位于界面上层，可通过点击导航菜单以外的区域使其收起。下拉导航的菜单与界面的连贯性比抽屉式要好，容易让用户感知当前位置。但由于是位于屏幕上方，相对隐蔽而且不能结合手势操作，所以该菜单形式也不适合于频繁的切换功能使用。考虑到导航菜单的可用面积较小，所以一般采用列表的形式展示菜单内容。下拉导航还有一种变式，就是下来菜单中展示两级甚至多级，一般在电商产品中比较常见，因为品类和筛选条件众多。

       主要功能入口全部聚合在页面，让用户做出选择。这样的组织方式虽然无法让用户第一时间看到内容或执行操作，用户的选择压力也比较大。但却能够让用户整体上了解APP提供的服务，从而选择自己所需要的那个服务。这种导航于一些提供的服务较多或者类目较多的APP，例如支付宝、淘宝等。

       宫格导航的应用很广泛，也产生了很多变种，以百度贴吧为例，其在应用宫格导航的时候，将功能进行了分类并且用标题加以区分，使用户更容易从众多功能中找到需要使用的功能。

       还有一种变式，是可滑动的宫格，这种设计适合于宫格内容较多，但是不想占用太多屏幕空间，于是用户可以左右滑动来查看功能内容。以小米app为例，由于功能较多，但是不希望占用较多屏幕面积，因此导航只放了两行功能，但是用户可以向右滑动找到更多的功能。在宫格区域下方采用了指示器来告知客户滑动的范围。

通过列表指示类目，在右侧显示箭头表示有二级内容，列表导航通常用于二级页，由于它与宫格导航一样，不会默认展示任何实质内容，所以通常app不会在首页使用它。这种导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。

同样可以对列表进行分类产生变式，这样逻辑会更清晰，不知道如何确定分类名称。把分类名称去掉也是可以的。只是用间距将每一组列表隔开也能起到梳理逻辑的作用。

每一个页面就代表一个导航入口，这就是轮播导航，适用于比较简单或者结构比较扁平的APP。轮播导航能够最大程度的保证应用的页面简洁性，操作也是最方便的，只需要手指左右滑动。缺点也很明显：承载入口的数量有限，超过10个可能就多了。这种导航常见于查看图片，也经常与其他导航模式结合，作为banner广告呈现。

优点：清楚当前所在的入口位置；直接展现最重要入口的内容信息。

缺点：功能入口过多时，该模式显得笨重不实用。

2.驼式导航 （中间加了一个“+”导航，像轮船上用来指挥的船驼，比如微博、qq空间）

优点：需要突出重要且频繁操作的入口。

缺点：同标签导航。

3.抽屉导航 （将菜单隐藏在当前页面内，点击入口即可像抽屉一样拉出菜单）

优点：节省页面展示空间；让用户注意力聚焦到当前页面；扩展性好。

缺点：不适合频繁切换的应用。

4.宫格导航 （宫格导航将主要入口全部聚合在页面，让用户做出选择，比如美图秀秀）

优点：直接展现各项内容；方便浏览经常更新的内容。

缺点：无法入口间的跳转；不能直接展现入口内容；不能显示太多入口次级内容。

5.组合导航 （比如淘宝里的快捷入口，像天猫之类的）

当用户需要聚焦内容，同时又需要一些快捷入口能够接到某些页面时，就可以采用组合导航。

优点：布局灵活，能适应架构的快速调整。

缺点：不规则容易有杂乱感。

6.列表导航 （比如微信的发现界面）

优点：层次展现清晰；可展现内容较长的标题；可展示标题的次级内容。

缺点：同级过多时，容易产生疲劳；排版灵活性不高；只能通过排列顺序、颜色来区分各入口重要程度。

7.tab导航 （用于二级页，本质和标签导航相同，当应用层级较多时，可采用tab导航，比如淘宝）

优点：对多内容多层级产品适用。

缺点：结构复杂，内容繁多。

8.轮播导航 （比如天气软件）

优点：单页面简洁内容，整体性强；线性的浏览方式有顺畅感、方向感。

缺点：不适合展示过多页面；非主页面不利于展示和查看。

9.点聚导航 （主操作选项或导航合并成一个按钮，浮动在页面上，比如path，最新版本导航置在中间）

优点：灵活；展示方式有趣；页面更开阔。

缺点：隐藏了更多入口和操作。

10.瀑布导航 （瀑布式布局适用于图片为主的内容，下拉自动加载，比如花瓣）

优点：浏览时产生流畅体验；排版布局多变；沉浸式体验。

缺点：不适合层级架构复杂的产品；容易产生疲劳感。

1. 抽屉式导航的特点

抽屉式导航将部分信息内容进行隐藏，突出了应用的核心功能。那么这个时候，抽屉式导航是个不错的选择。

以qq为例：有两种方式唤出侧边栏：

一.通过点击左上角头像     二.手势左滑

如果应用主要的功能和内容都在一个页面里面。只是一些用户设置这类低频操作内容需要显示在其他页面里。为了让主页面看上去干净美观，可以把这些辅助功能放在抽屉栏里。

2. 拇指热区

根据拇指使用情况的热区，我们将更容易了解拇指在使用手机时的适应情况。在Hoober的拇指热区中采用了右手拇指，且以大拇指跟扣紧手机左下角为基准。

下图中展示了2007年以来的iPhone的使用情况：

由此可见，QQ的主要使用场景是：会话交流。这样将“我的相册”、“我的文件”等等放在侧边栏中，提升了界面的简洁与整体性。

QQ在交互上通过左滑手势可以方便的唤出侧边栏，可见在大屏时代使用抽屉栏，对于手势操作显得尤为重要，左滑唤出抽屉栏是个不错的选择。

3. 产品实例应用

如果你的应用有不同的视图，且他们是平级的，需要用户同等地对待，抽屉栏将会浪费掉大多数的用户对于侧边栏中入口的潜在参与度和交互程度。比如内容型平台：网易新闻，平台的内容主题丰富，且是平级，需要频繁切换的，就可以说不适宜抽屉式导航。

当然市场中仍然有很多内容型应用沿用抽屉式导航：

比如人人都是产品经理app也是至今沿用抽屉式导航，通过结合手势操作唤出侧边栏也一定程度上提升了交互体验（没有QQ自然），以此切换不同的主题内容等等。简洁的界面，又提供了沉浸式的阅读体验。作为一个被教育过的老用户来讲，也是可以接受的。（槽点，人人都是产品经理app体验可提升的空间仍然很大！）

个人总结

在移动互联时代，我们需要针对不同的领域应用及对应的使用场景，进行独立场景的分析与判断。从用户的反馈，做出最合理，权宜的设计。

通过之前提到过的结构层形成了大量的需求，而这些需求都是来自我们产品的战略目标，接下来，我们需要在框架层进一步提炼这些结构，确定很详细美观的界面设计、导航设计和信息设计。通常来说，优秀的框架层可以一下子吸引住你的用户，然后他们才会继续领略你的结构层，相反，如果你的框架层弄得混乱不堪，给用户的第一印象就不怎么好，那么对于互联网产品来说，是致命的打击，因为用户没有那么大的耐心领略你的产品，会转而去使用竞品。

结构层界定了产品将用什么方式来运作，而框架层则用于确定用什么样的功能和形式来实现 ，框架层常常用来处理更精确的细节问题，关注点几乎都在独立的组件以及它们之间的相互关系上。对于功能型产品和信息型产品来说，信息设计都是必须要做的，而对于功能型产品，我们通过界面设计来确定框架，对于信息型产品要解决的是呈现信息的界面——导航设计。界面设计、导航设计、信息设计这三者之间关系紧密，在面对导航设计通常也要考虑信息设计是否太模糊，或者往往遇到的事信息设计的问题，最后变成界面设计的问题。

虽然这三者之间没有明确的界限，但是单独区分它们还是很有必要的，只有正确评估我们才能找到合适的解决方案。如果涉及到 提供给用户做某些事 的能力，则属于界面设计，即意思就是说通过界面用户能真正接触到那些在结构层的交互设计中确定的具体功能；如果涉及到 提供给用户去某个地方 的能力，则属于导航设计。信息架构把一个架构应用到我们设定好的内容需求列表中，而导航设计就是一个用户能够看到那个结构的镜头，即用户通过它，就可以在结构中自由穿行；如果是 传到想法给用户 ，的能力，则属于信息设计。信息设计是三者之间最宽泛的一个要素，跨越了以任务为导向的功能型产品和以信息为导向的信息型产品。

正如键盘要设置成3乘以4的数字矩阵，生活中有很多这种根深蒂固的习惯，我们在做产品的时候应该遵循这种结构，即使有的标准并不一定是最佳解决方法，但是人们已经相对容易的适应了它们。为了不打破这个习惯，我们产品的界面也应该遵循这种结构，生活中如果我们能够减少很多反射作用，办事效率将会提升很多，如每个产品的垃圾桶图标代表删除，如果没有遵循这个定律，而是使用别的图标，那么就会让用户反射弧增加，从而产生不习惯，因此就会对产品失望。 让你的界面与用户早已形成的那些习惯保持一致很重要，但更重要的是界面要与它自身保持一致 。

就像不应该过于强调交互设计背后的概念模型一样，你应该抑制在产品四周建立起比喻的冲动，虽然对产品来说，比喻是很可爱很有趣的，但是它们无法像你幻想的那样产生作用，甚至根本起步了作用。如你可以用一个电话的图标来代替电话薄，但是有的用户就会不理解，以为是要检查语音信箱甚至是以为要充话费。当然产品内容会提供一定的上下文让用户猜想你的比喻特性，但是总是会有用户猜不对的，更好的做法就是完全去除猜测的成分。

界面设计就是选择正确的界面元素，既能帮助用户完成任务，还要通过合适的方式让用户更加容易理解和使用。成功的界面设计是让用户一眼就能知道最重要的东西，而不重要的东西不应该被注意到，所以说设计界面最大的困难就是要弄清楚对于你的目标用户，那些元素是重要的，哪些元素是不重要的。对于突出重要的元素的方法并不是将用户最有可能点击的按钮变为最大，在互联网产品中我们可以采取很多不同的方法，如最简单的技巧就是，在界面第一次呈现给用户的时候，我们就将最可能点击的任务和目标设置为默认，减少用户的输入成本。还有一种方法就是自动记住用户最后一次的选择状态。一些技术提供了一套同样的基本元素，如现在很多交互都是采用Windows和Mac OS中的设计，我们在设计自己的产品时，可以遵循这种交互设计，但是也不能强迫设计师必须按这种方式来使用，在界面如何响应用户动作这件事上，需要一定的灵活性，进行 保留性创新 。

如果你的APP或者网页并不是并不是把所有的功能集中在一个页面之内，那么你得在导航设计上多下功夫。在这里仅说网站导航设计，APP同样可类推。网站导航设计看上去是一件很简单的工作：在每个页面放一些允许用户浏览整个网站的链接。但如果你去掉界面，导航设计的复杂性就会变得显而易见，任何一个网站的导航设计必须同时完成这三个目标：

1.必须提供给用户一种在网站间跳转的方法。

2.导航设计必须传达出这些元素和它们所包含内容之间的关系。

3.导航设计必须传达出它的内容和用户级当前浏览页面之间的关系。

信息设计是最难入手的一个，常常充当一种把各种设计元素聚合到一起的粘合剂的角色，有时信息设计涉及分组或者整理散乱的信息，我们要用一种能反映用户的思路和支持他们的任务和目标的方式来分类和排列这些信息元素，在这些元素之间的概念的关系是真正属于微观信息架构的，当我们必须要在这个页面上传达结构的时候，信息设计就呈现它的作用。通常，将信息设计和导航设计结合在一起，可以支持指示标识，用来帮助用户他们在哪以及他们能去哪。网站中，指示标识不仅要提供到网站不同区域的通路，还必须要清晰地传达出这些选项。好的指示标志可以让用户立马明白“我在哪儿，我要去哪儿，哪条路径离我的目标更近”。

通常将信息设计、界面设计和导航设计放在一起形成统一凝聚力的架构的地方成为线框图。对于大多数项目来说，需要多个线框图来传达复杂的预期效果。通过安排和选择界面元素来整合界面设计；通过识别和定义核心导航系统来整合导航设计；通过放置和排列信息组成部分的优先级来整合信息设计。通过这三种方法，线框图就可以确定在一个基本概念结构上的架构，同时也指出了表现层的设计应该前进的方向。