Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

一个简单,响应式,移动优先的导航模式

by
Length:LongLanguages:

Chinese (Simplified) (中文(简体)) translation by Kendra Schaefer (you can also view the original English article)

我们将构建一个简单,响应式的网页菜单选项。 这个方法将有助在设计移动界面时把重点放在网页的内容上。 我们将不会用上JavaScript,而我们先从设计移动界面开始。

移动端导航

如果你读过 Luke Wroblewski's Mobile First 你会比较熟悉他的想法是:

移动界面上,一般的规则是,内容理应比导览优先。

他指的是手机用户往往是想即时找出回答;他们希望直接找到他们想要的,而不是更多的选项。

很多网站,甚至是响应式的,都习惯把导览应该放在所有网页的顶部,但这种方法可能会导致高亲合力的问题。 因为手机用户往往缺乏两样东西:屏幕空间和时间。 如果主导览被放置在网页的顶部,很有可能它会掩盖整个手机屏幕。 当导览的链接为手机用户变得更大更容易接时,问题更是变得严重。

这个便是一个例子 London & Partners:

一个很好的响应式设计,但在标准的手机屏幕尺寸( 320px x 480px )你只能看到导览菜单。 当然,我也会想在首页看到导览菜单以外的东西吧? 这不只是 London & Partners - 而是有很多类似的响应式网页。

那么有什么解决方法呢?

我们也经常看到设计师们用jQuery来解决这个问题。 来看看Chris Coyier's explanation 里的 Five Simple Steps 响应下拉式菜单吧。


大屏幕,小屏幕。

用jQuery 复制出一个<select>的下拉式菜单,然后把这个复制出的菜单隐藏起来。 在小屏幕下,media queries 便会把原有的菜单隐藏,呈现复制的下拉式菜单。 这是很好的方法,因为下拉式菜单只占用很小的位址和善用手机特有的界面(像iPhone的滚动条)。

或者,你可以隐藏导览菜单,然后当点击"菜单"的按钮时才出现。  Twitter 的 latest Bootstrap 有这样的示范。

在较小的屏幕导览菜单会被隐藏,并显示一个"列表"的图标(很快便成为公认"菜单"标示),当点击它是真正的导览菜单便会出现。 手机用户不但可以看到想看到的内容,同时也有导览菜单让他们可以看到更多内容。

纯CSS解决方法

以下我们将会使用 Luke 讨论的方法,使用CSS和优先处理流动式导览。 优先处理流动式是什么意思? 简单地说,是要先设计一个小屏幕的界面,然后才设计大屏幕的界面。 我们会用 media queries 侦测屏幕的尺寸变更,然后逐步添加样式和功能。

这表示当用户用移动设备浏览时,只会有少量的CSS和所需的档案会被下载。 这也意味着,旧版本的IE浏览器(不支援 media queries)会出现手机网页的界面。 Joni Korpi 的 Leaving Old Internet Explorer Behind 里有更多这方面的说明。

1. 基本标签

以下我会慢慢为你解释这个做法背后动机。现在,我们先开启一个新的 HTML 5文件档,开始吧!

注: 别忘了 Viewport Meta 的标签!

现在,我们来写一些网页的结构吧。 这些都是简单和直截了当的东西。 我也用上了 《巨蟒与圣杯》(感谢 Chris Valleskey)的台词当成这网页的字,这令你的工作更方便 :)

2. 导览菜单标签

我们已经有了一个基本的html页面,所以现在我们要开始这文章的重点 - 主导览菜单.

你没看错,我们将老加在第68行,在最后一篇文章之后。 不要忘了,我们正在设计小屏幕的界面,后面才开始讨论大屏幕。 我们把导览放置在网页的底部,那样它便不会盖住内容。 然后在网页的顶部放置一个链接,这样用户就可以找到导览菜单了。

3. 重设CSS

这步可跟你的个人喜好以定,我的步骤可能跟你的会有点一样。 我觉得Eric Meyer的重置档案很仔细,尤其是他刚修改过的,有不错的基础。 我们将会加入他的设定:

4. 基本样式

目前,我们的网页很平淡:

……所以我们来添加一些简单的样式吧。

这是都是一些基本的东西(字体,行的高度,颜色等),目前最重要的是我已经为"菜单"的按钮设了样式,令它在最常发现导览菜单的<header>中倾向右侧的。

把滑鼠悬停上面,你便会看到按钮的另一个状态 - 虽然这个设定在触摸屏不管用,但这个设定会出现在不太合作的Internet Explorer版本上。 为了手机用户,我们设定了:focus的状态。 它跟:hover的状态是一样的。 它会在触摸屏上出现状态,让用户知道他们已经成功按下了菜单的按钮。

不管怎样,点击它,你就会被带到菜单,赞!

现在让我们把菜单变得更漂亮吧。

5. 菜单样式

其实,我们将会把我们的菜单设计得像之前的 London & Partners 的示范一样,只是我们把它放在网页的底部。

好多了。 我们所做的菜单链接不错,大(Luke Wroblewski 的博客有更多关于Touch Target Sizes的说明),并再次确定:focus的状态提示。

我们也包括了一个"top"的链接,方便用户点到网页顶部。

6. 放大吧

OK,我们已经处理好小屏幕的界面了,那么现在我们要加入 media queries。 OK,我们已经处理好小屏幕的界面了,那么现在我们要加入 media queries。这样当屏幕变大时,就可以隐藏小屏幕的样式用点大屏幕的了。

但是在什么时候它变得不合适呢? 有很多不同 media queries 的做法,我们以一个手机屏幕大小是320px x 480px为基础 。 这是把手机垂直看时宽度是320px,横看便是480px,所以我们就把第一个 media queries 检测设定为任何尺寸大过 480px。

这可是,接下来的是平板电脑设定。 而iPad的解像度是980px x 768px,所以我们可以设定任何比768px小的便适合用上小屏幕的样式, 而任何大于768px的便可以做类似跟桌面界面差不多的样式。

在我们开始加入不同的样式设定,先来建立 media query:

当屏幕的宽度只少有768px时,这个 media query 会执行所有在内的样式设定。 注意当中的only是关键字,它将确保Internet Explorer 8能正常执行样式设定。 可看这里,有我之前解说过的

我们来让"菜单"的按钮消失吧:

只要把浏览器的宽度变大,"菜单"按钮就会不见了。

7. 移动菜单

现在我们需要把主要的导览切换到网页的顶部。 先把它取出,然后用 position: absolute 把它顶至顶部。

首先,我们必须在 media query 或 css 的开端把它所属的标签(.wrapper)设为 position: relative。 我们可以在media query加上,也可以放在样式表开头。

只要菜单被设定为 position: absolute,我们需要删除一些标签的设定, 把列表显示为 display: inline 和删除边框和标签的距离便可以。 当然,不用修改之前定立的 hover 状态。

8. 最后一件事

你可能会注意到我们有个"顶至"的链接 - 还需要吗?

有多种可以将其删除的方法,但为确保一切正常,让我们先为每个列表的项目添加一个 class:

这样我们就不用 media query 也能把它删除:

结论

完成! 这些只是一些基本的设定,往后如果你的网页需要支援更多的样式,你可以继续添加一些 media queries。 你可以继续添加一些 media queries。 一个简易,响应式,为手机扰先设想的网页设计, 还需要什么呢? !

更多资源

这些是以上提到的有用链接:

高级选择

Envato艺云台集市提供不少的移动优先布局模版。

比如,first是一个以Bootstrap 3为基础的移动优先管理模版。 它是响应式的,而所有的组成部分也都是移动优先的。 

first - Mobile First Web App Theme
first - Mobile First Web App Theme
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.