快速創(chuàng)建跨平臺的網(wǎng)站頁面原型

2022-06-09    分類： 網(wǎng)站建設(shè)

整個一周都在揪心的貓事中度過。從十月底到現(xiàn)在的這段日子里，倒是越發(fā)懂得珍惜每天中片刻的寧靜時光。有時會懷疑家里是否有時空漩渦一類的東西，不然鐘表怎么會走的那么快，一點兒也不愿停下等等我的樣子。一切都會好起來。

獨白終了，進(jìn)入正題。最近兩篇譯文都有涉及框架和跨平臺方面的話題：前一篇中，我們了解了一些用于移動應(yīng)用開發(fā)的前端框架工具；今天這篇的立足點偏向設(shè)計開發(fā)流程的上游，它將向我們展示怎樣使用Foundation框架快速創(chuàng)建跨平臺的、可以在多種設(shè)備上進(jìn)行測試的響應(yīng)式頁面原型。下面開始正文部分。

開門見山的說，作為網(wǎng)頁設(shè)計和開發(fā)人員，我們面臨著以下幾個嚴(yán)峻的問題：

  • 每天，人們用來上網(wǎng)的設(shè)備種類和數(shù)量都在不斷上升。
  • 為每種設(shè)備設(shè)計開發(fā)不同的界面是不可能的。
  • 即使你專門為某些設(shè)備定制打造，這些設(shè)備也很有可能在不久的將來退出主流舞臺。

真心歡樂。別怕，大家一起面對并解決問題。其實，不同類型的設(shè)備及屏幕的這個問題，很早以前就開始存在了，只是多年來我們一直忽視這個狀況，一廂情愿的守著960像素的網(wǎng)格系統(tǒng)。

如今，我們需要從設(shè)計流程的上游改變長久以來的習(xí)慣，比如嘗試快速創(chuàng)建可以在不同設(shè)備上進(jìn)行測試的原型，而不只是針對臺式機(jī)瀏覽器或筆記本。這就是我們(英文原文作者的團(tuán)隊)開發(fā)Foundation框架的原因。

Foundation是一款開源的前端框架，我們可以使用它快速創(chuàng)建頁面原型。相比于其他同類型工具，F(xiàn)oundation的移動化方案更加出色；借鑒響應(yīng)式Web設(shè)計的思路和方法，F(xiàn)oundation對內(nèi)容結(jié)構(gòu)在不同類型設(shè)備中的的呈現(xiàn)方式進(jìn)行了相應(yīng)的預(yù)設(shè)。(關(guān)于響應(yīng)式Web設(shè)計，可以參考我們之前的幾篇文章，包括響應(yīng)式設(shè)計的概念、組成要素及基本實現(xiàn)思路，怎樣通過CSS3 Media Query實現(xiàn)響應(yīng)式Web設(shè)計，以及相關(guān)的產(chǎn)品需求和設(shè)計流程案例學(xué)習(xí))

接下來，我們將通過一個完整的實例，來演示怎樣使用Foundation快速創(chuàng)建跨平臺的頁面原型。走著！

資源概覽

首先到foundation.zurb.com下載代碼包；果斷點擊大藍(lán)按鈕即可。代碼包中包含以下文件及結(jié)構(gòu)：

  • index.html – 我們將從這里開始創(chuàng)建第一個頁面。
  • javascripts和stylesheets路徑 – 主要的靜態(tài)資源文件，包括jQuery及所需的樣式表。
  • humans.txt和robots.txt – 里面的代碼算是不錯的樣板，有空的時候可以溜幾眼。

JS方面的東西基本不在本文討論范圍，我們繼續(xù)來看看stylesheets路徑中的文件：

  • global.css – 全局基礎(chǔ)樣式表，包括相對常規(guī)的12列固定寬度的網(wǎng)格系統(tǒng)、快速創(chuàng)建復(fù)雜布局的可嵌套工具等。另外還有其他全局字體、布局等方面的樣式定義。
  • ui.css – 用來對那些組成原型的常規(guī)UI元素進(jìn)行樣式定義。
  • mobile.css – 負(fù)責(zé)移動設(shè)備方面的樣式，涉及響應(yīng)式的樣式定義都在這里。

分別在瀏覽器和代碼編輯器中打開index.html文件。在瀏覽器中，我們可以看到該頁面包含了一些用于構(gòu)筑原型的基礎(chǔ)布局結(jié)構(gòu)及UI元素。

接下來，我們將從網(wǎng)格系統(tǒng)、快速創(chuàng)建原型、移動化這三個方面依次進(jìn)行實例講解。

網(wǎng)格系統(tǒng)

首先來簡單看看global.css中的網(wǎng)格系統(tǒng)。如果你熟悉960網(wǎng)格系統(tǒng)或是Blueprint CSS框架，那么對Foundation的網(wǎng)格結(jié)構(gòu)也應(yīng)該不會陌生。下面是一段典型的結(jié)構(gòu)代碼：

?

1
2
3
4
5
6

<div class="container">
<div class="row">
<div class="eight columns" id="mainContent"> ... div>
<div class="four columns" id="sidebarContent"> ... div>
div>
div>

該結(jié)構(gòu)由三部分組成：外層容器container、行容器row和列容器columns。外層容器的作用只是為頁面添加左右內(nèi)邊距(padding)。

行容器擁有一個固定的大寬度值，防止頁面在大顯示器中過寬；當(dāng)然，如果你想打造純粹的液態(tài)布局，也可以在樣式表中去掉這個屬性。

列容器是最內(nèi)層的內(nèi)容容器，在我們的網(wǎng)格系統(tǒng)中，每行最多可以放置12個列容器。上面的代碼中，我們創(chuàng)建的是典型的“內(nèi)容+側(cè)邊欄”布局，寬度分別為全寬的2/3和1/3。

網(wǎng)格布局可以進(jìn)行嵌套：

?

1
2
3
4
5
6
7
8
9
10
11
12

<div class="container">
<div class="row">
<div class="eight columns">
<div class="row">
<div class="four columns"> ... div>
<div class="four columns"> ... div>
<div class="four columns"> ... div>
div>
div>
<div class="four columns"> ... div>
div>
div>

Foundation官網(wǎng)中有一些布局范例可以參考。

快速創(chuàng)建原型

開始動手。我們要為一個簡單的新聞資訊類網(wǎng)站制作首頁和文章內(nèi)頁的原型；整個過程包括兩部分：使用Foundation快速創(chuàng)建基礎(chǔ)原型，以及為不同類型的設(shè)備進(jìn)行移動化處理。首先來看第一部分。

最好拿起紙和筆，在創(chuàng)建原型之前將構(gòu)思勾畫出來。下面是我們?yōu)榛A(chǔ)版本的首頁(桌面顯示器版本)畫的草圖：

可以看到，首頁的大致布局包括頁頭、主要文章內(nèi)容圖文、側(cè)邊的次級內(nèi)容圖文、特色文章圖文列表。對這個頁面，我們可以用到一些Foundation自帶的布局結(jié)構(gòu)，以及一個不錯的外部服務(wù)。

  • 頁面整體布局方面，使用前面介紹過的網(wǎng)格系統(tǒng)。
  • 全局主導(dǎo)航使用Foundation預(yù)設(shè)的tab結(jié)構(gòu)。
  • 對于每個圖文單元中的圖片，我們使用placehold.it提供的服務(wù)。它會按照指定的比例輸出可以填滿容器的示范內(nèi)容，包括用來占位的圖片，以及可以自定義的文案等。

OK我們從頁頭開始。Foundation框架會保證舊瀏覽器兼容HTML5，所以我們在這里可以放心的使用更加語義化的header標(biāo)簽。因為頁頭是一個包含多列內(nèi)容的塊級結(jié)構(gòu)，所以我們還要為它添加class=”row”。代碼如下：

?

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="container">
<header class="row"> 
<div class="two columns">
<img src="http://placehold.it/200x120" />
div>
<div class="eight columns">
<h1 class="centered">The Foundation Timesh1>
<h5 class="centered">December 1, 2011h5>
div>
<div class="two columns">
<img src="http://placehold.it/200x120" />
div>
header>

可以看到，在外部容器container中，我們將header作為完整的一行，其中放置了三列，寬度方面是1:4:1的關(guān)系。在第一列和第三列中，我們使用了placehold.it提供的占位圖片，用來表示logo等元素。在第二列中，我們使用h1標(biāo)簽作為網(wǎng)站標(biāo)題的容器，副標(biāo)題則使用h5。

接下來是導(dǎo)航。我們要使用Foundation預(yù)設(shè)的tab形式；代碼結(jié)構(gòu)如下：

?

1
2
3
4
5
6
7
8
9
10
11

<div class="row">
<div class="twelve columns">
<dl class="tabs">
<dd><a href="#" class="active">All Newsa>dd>
<dd><a href="#">Llamasa>dd>
<dd><a href="#">Alpacasa>dd>
<dd><a href="#">Vicunasa>dd>
<dd><a href="#">Other Dromedariesa>dd>
dl>
div>
div>

雖然在這一行中只有一套導(dǎo)航元素，但是我們?nèi)匀恍枰獙?dǎo)航元素列表dl放置在一個列容器中，并且將這個列容器設(shè)置為12列全寬，否則布局將出現(xiàn)問題。

對于頁面其他部分的內(nèi)容，基本方式是類似的，我們將會用到網(wǎng)格系統(tǒng)、一些基本的元素、以及Foundation自帶的UI組件。下面是頁面剩余部分的HTML代碼：

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<div class="row">
<div class="eight columns">
<img src="http://placehold.it/800x340" />
<h3><a href="#">Llamas: Great Pets or the Best Pets?a>h3>
<p>Intrepid reporter Jordan Humphreys went to Happy Time Llama Farm to investigate: are llamas merely great pets, or he best pets? Read the full article to find out!p> <a href="#"class="small radius nice blue button">Read More →a>
div>
<div class="four columns">
<div class="row">
<div class="five columns">
<img src="http://placehold.it/120x100" />
div>
<div class="seven columns">
<h5><a href="">Alpaca Farm Closeda>h5>
<p>Anthony Tadina reports on this tragic closing.<br /><a href="#">Read More →a>p>
div>
div>
... [repeat this row twice more]
div>
div>

<div class="row">
<div class="twelve columns">
<hr />
div>
div>

<div class="row">
<div class="three columns">
<img src="http://placehold.it/260x190" />
<h5><a href="#">Feature 1a>h5>
<p>Description<br /><a href="#">Read More →a>p>
div>
... [repeat this column 3 more times]
div>

<footer class="row">
<div class="seven columns">
<p><strong>The Foundation Timesstrong><br />© 2025 no rights reserved.p>
div>
<div class="five columns">
<p><a href="#">All Newsa> | <a href="#">Llamasa> | <a href="#">Alpacasa> | <ahref="#">Vicunasa> | <a href="#">Other Dromedariesa>p>
div>
footer>

我們可以看到，HTML原型中每個部分的代碼結(jié)構(gòu)其實都是相當(dāng)基礎(chǔ)和簡單的。需要注意的是class中帶有“button”的元素，這些是Foundation預(yù)設(shè)的按鈕，包括幾種不同的風(fēng)格樣式。我們可以用這樣的方式將a標(biāo)簽或是button類型的input元素定義為風(fēng)格化按鈕，并通過“small”、“radius”等class為其設(shè)置具體的樣式：

  • small或large – 可選；控制按鈕的尺寸；如果不做設(shè)置，默認(rèn)將為中等尺寸。
  • radius - 可選；為按鈕增加幾像素的圓角效果。該值還可以是round，樣式為左右兩側(cè)完全圓弧。不做設(shè)置時，默認(rèn)樣式是矩形。
  • nice – 可選；添加少許高光等細(xì)節(jié)效果。
  • blue – 可選；設(shè)置顏色；該值還可以是red、black、grey，或是在樣式表中進(jìn)行過自定義的任何名稱。
  • button – 唯一的必要class，用來將元素格式化為按鈕。

通過這樣一些很基本的HTML代碼，我們就已經(jīng)創(chuàng)建好了基礎(chǔ)版本的原型；當(dāng)前的實際效果如下圖所示。

如果僅僅需要為桌面設(shè)備制作頁面原型，那么到這里我們的任務(wù)就已經(jīng)完成了。不過在本次實例中，我們還要演示怎樣使原型針對不同類型移動設(shè)備進(jìn)行響應(yīng)式的兼容，實現(xiàn)跨平臺。

移動化

用戶使用移動設(shè)備訪問網(wǎng)站時，期望會有所不同。對于眼前這個內(nèi)容類網(wǎng)站，我們希望用戶在使用移動設(shè)備進(jìn)行訪問的時候，可以在首屏直接看到主要內(nèi)容部分。移動設(shè)備用戶在瀏覽網(wǎng)頁時，很厭惡的一點就是，在忍受了網(wǎng)站頁頭和全局導(dǎo)航的加載過程之后，仍然無法立刻看到主要內(nèi)容。(關(guān)于在移動設(shè)備中，網(wǎng)站內(nèi)容呈現(xiàn)方式的策略，可以參考我們之前關(guān)于響應(yīng)式網(wǎng)站產(chǎn)品需求及設(shè)計流程方面的文章)

在不做任何移動化處理之前，我們的原型在小屏幕移動設(shè)備中的呈現(xiàn)方式如下圖所示：

首屏中，我們只能看到logo、網(wǎng)站標(biāo)題等與主要內(nèi)容、全局導(dǎo)航無關(guān)的元素。真心不靠譜。我們接下來要使用一些Foundation提供的的專門用來處理不同設(shè)備視圖的class，讓原型中某些元素在小屏幕移動設(shè)備中發(fā)生變化。

當(dāng)前，我們的基礎(chǔ)版頁面原型中，header部分的代碼是這樣的：

?

1
2
3
4
5
6
7
8
9
10
11
12

<header class="row"> 
<div class="two columns">
<img src="http://placehold.it/200x120" />
div>
<div class="eight columns">
<h1 class="centered">The Foundation Timesh1>
<h5 class="centered">December 1, 2011h5>
div>
<div class="two columns">
<img src="http://placehold.it/200x120" />
div>
header>

添加了移動化的class之后：

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<header class="row hide-on-phones"> 
<div class="two columns">
<img src="http://placehold.it/200x120" />
div>
<div class="eight columns">
<h1 class="centered">The Foundation Timesh1>
<h5 class="centered">December 1, 2011h5>
div>
<div class="two columns">
<img src="http://placehold.it/200x120" />
div>
header>

<header class="row show-on-phones">
<div class="twelve columns">
<img src="http://placehold.it/480x100" />

<h1 class="centered">The Foundation Timesh1>
<h5 class="centered">December 1, 2011h5>
div>
header>

重點在于兩個新的class，一個是hide-on-phones，另外一個是show-on-phones。顧名思義，它們用來控制元素在手機(jī)設(shè)備上的顯示和隱藏。Foundation預(yù)設(shè)了一些這樣的class，用來根據(jù)不同類型的設(shè)備，響應(yīng)式的調(diào)整頁面元素的呈現(xiàn)方式。

現(xiàn)在，當(dāng)使用手機(jī)瀏覽頁面原型時，只有第二個簡化的header會顯示出來。接下來，我們?yōu)檫@個移動版本的header寫幾行樣式：

?

1
2
3
4
5

h1.centered { text-align: center; margin-bottom: 0; }
h5.centered { text-align: center; }

.show-on-phones h1.centered { font-size: 24px; font-size: 2.4rem; }
.show-on-phones h5.centered { font-size: 12px; font-size: 1.2rem; margin-bottom: 20px;padding-bottom: 10px; border-bottom: 1px solid #ddd; }

來看看到目前的成果：

好多了。現(xiàn)在的問題是，導(dǎo)航項在小屏幕中顯得太多了，布局發(fā)生了錯亂。一個常見的解決方案是，對手機(jī)設(shè)備，將導(dǎo)航移至頁面底部。當(dāng)然，我們并不是要真的移動它，而是像前面那樣設(shè)置不同的顯示規(guī)則。對于目前的全局導(dǎo)航，在class中增加一個hide-on-phones：

?

1
2
3
4
5
6
7
8
9
10
11

<div class="row hide-on-phones">
<div class="twelve columns">
<dl class="tabs">
<dd><a href="#" class="active">All Newsa>dd>
<dd><a href="#">Llamasa>dd>
<dd><a href="#">Alpacasa>dd>
<dd><

當(dāng)前文章：快速創(chuàng)建跨平臺的網(wǎng)站頁面原型
地址分享：http://bm7419.com/news/165430.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、電子商務(wù)、微信小程序、網(wǎng)頁設(shè)計公司、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)