意想不到的數(shù)字閱讀效果

伯恩·伍德 (Kevin Stohlmeyer) 凱文斯圖梅耶爾（Brian Wood）

當(dāng)今世界已進入了一個數(shù)字化閱讀的新時代，數(shù)字閱讀已經(jīng)成為一種潮流，并以其便捷的優(yōu)勢不斷發(fā)展，同時也刺激了數(shù)字閱讀技術(shù)的飛速更新。本文通過介紹如何用Adobe Mouse CC實現(xiàn)視差滾動效果頁面和通過Adobe Illustrator CC輕易變換文字向讀者展示數(shù)字化閱讀技術(shù)獨特的影響力和藝術(shù)效果。

用Adobe Mouse CC實現(xiàn)視差滾動效果

網(wǎng)絡(luò)世界五彩繽紛，網(wǎng)頁設(shè)計師通常需要嘗試新方法來吸引讀者眼球。如今，這就意味著設(shè)計師們要使用HTML5， CSS3和 JavaScript技術(shù)來達到意想不到的效果。視差滾動允許讀者通過滾動鼠標(biāo)實現(xiàn)不同的元素（如背景，圖像，文本）在一個頁面的不同方位以不同的速度移動，這樣會提高讀者閱讀文章內(nèi)容的積極性，也會讓讀者產(chǎn)生深度的遐想。舉個例子，當(dāng)讀者在一個航空網(wǎng)站頁面上向下滾動鼠標(biāo)，會看到頁面背景緩慢移動的云彩，然后一架飛機穿過天空中的云彩出現(xiàn)在讀者的眼前，會讓讀者仿佛置身其中。了解視差滾動設(shè)計最好的辦法就是看它的實踐應(yīng)用。以下是使用Adobe Mouse CC做的幾個較好好網(wǎng)站頁面的范例：Paul Surridge 網(wǎng)頁設(shè)計師通過來回跳轉(zhuǎn)的圖文說明來介紹作者保羅·凱里奇小說的特點；Slick-allax 這個范例顯示視差滾動設(shè)計可以編入一個商業(yè)網(wǎng)站中；Breathe 文字和圖片在這個冥想為主題的站點上下左右來回穿插移動就是運用視差效果設(shè)計；Aaron Lawrence Design這種自我推銷式的網(wǎng)站運用大量色彩移動組合來實現(xiàn)頁面的變換。

接下來，本刊將向讀者展示一些視差滾動設(shè)計的例子，并告訴讀者何時（或者何時不使用）去使用這項技術(shù)，讓讀者嘗試技術(shù)革新力量的影響力，并向讀者展示如何在Adobe Mouse CC 里操作它。

何時使用視差滾動技術(shù)

出于嘗試新鮮事物的緣故，設(shè)計者們可以使用一項新的技術(shù)。（當(dāng)陰影效果技術(shù)引入到Adobe Design的時候，讀者就可以看到傻瓜們到處使用這個技術(shù)。）但是在互聯(lián)網(wǎng)領(lǐng)域，讀者必須考慮的特別周全，因為讀者體驗關(guān)系到網(wǎng)站的發(fā)展，只是說讀者可以使用視差滾動技術(shù)但并不意味著可以濫用這項技術(shù)。許多類型的網(wǎng)站受益于視差滾動效果。除了讓網(wǎng)站有更多的互動，視差滾動還可以讓讀者在網(wǎng)站停留更長時間，讓網(wǎng)站富有故事性，讓想法變成行動，增加層次感和深度性。

視差滾動技術(shù)原理

視差滾動技術(shù)依賴于HTML5， CSS和 JavaScript。比如在一張被標(biāo)記使用HTML5標(biāo)簽如

8.選擇文件>保存網(wǎng)站，然后選擇文件>關(guān)閉頁面。

按照下面的步驟使用圖像添加視差滾動效果設(shè)計到頁面上：

1. 在計劃模式下，雙擊主頁縮略圖來打開它，向下滾動，直到讀者找到文本說明，“SITE CREATED WITH ADOBE MOUSE”（參見圖7）。

2. 選擇文件>放置在輸入對話框中，導(dǎo)航到SourceSansParallaxType > Img文件夾。 選擇MuseLogo. png文件，并單擊打開。單擊以圖片放在文字為“SITE CREATED WITH ADOBE MUSE ”之上（參見圖8）。

3. 使用選擇工具，拖動圖像到中心位置（見下一頁圖9），智能指引將幫助讀者將圖像與文本“ADOBE MUSE”左側(cè)邊緣保持在同一直線上。

4. 在選中的圖片上，在控制面板里點擊效果鏈接，然后在最右邊點擊滾動運動選項卡，打開滾動運動選項，改變關(guān)鍵位置值為31272 px（參見圖10）。

注意T形句柄的處理，從頂部延伸到所選擇的圖像（見圖10紅色箭頭所指位置）。T形句柄的頂點位置代表關(guān)鍵位置，即頁面上該區(qū)域的元素將在滾動后自己定位位置。使用這個句柄來設(shè)置，將會發(fā)生的移動在T頂點的位置達到瀏覽器窗口頂部位置之前或者之后。

提示：在設(shè)計中讀者也可以改變關(guān)鍵位置，通過拖動選項工具中的T形句柄來更直觀地放置關(guān)鍵位置。

5. 在這一步中，停在移動前的關(guān)鍵區(qū)域，設(shè)定速度在運動發(fā)生在滾動發(fā)生之前，點擊箭頭旁邊的單選按鈕，設(shè)置垂直值為0。點擊箭頭旁邊的單選按鈕，點擊后設(shè)置水平速度0.5（參見圖11）?，F(xiàn)在Adobe Muse圖標(biāo)將從左向右移動，當(dāng)關(guān)鍵位置到達瀏覽器窗口的頂端，它會停留在它目前停留在頁面上的位置。

6. 現(xiàn)在讀者可以控制移動的方向和速度，這會發(fā)生在關(guān)鍵位置到達瀏覽器頂部之后。如前所料，在關(guān)鍵區(qū)域設(shè)置后讀者就可以如此操作。點擊箭頭旁邊的單選按鈕，設(shè)置垂直滾動速度為1，設(shè)置水平滾動速度為0（參見圖11）。

7. 點擊任意地方關(guān)閉效果菜單，選擇視圖>預(yù)覽模式預(yù)覽效果。讀者必須以向下滾動的方式直到在文件創(chuàng)建看到文本和標(biāo)志。

8. 選擇視圖>設(shè)計模式返回到主頁。

就是這樣?，F(xiàn)在讀者們已經(jīng)了解了在Adobe Muse CC里關(guān)于視差滾動效果頁面設(shè)計的基礎(chǔ)知識。并可以將它運用到自己的一些設(shè)計中去。

這只是開始

這些例子覆蓋了視差滾動效果設(shè)計的許多關(guān)鍵概念。若想了解更多的內(nèi)容，讀者可以在SourceSansPro_final. Muse的主頁選擇不同的對象查看，在控制面板中點擊效果鏈接查看滾動運動選項，在設(shè)置里進行簡單的試驗，看他們?nèi)绾卧跐L動頁面時影響對象移動。使用選擇工具，選擇文本“site created with ”然后單擊效果鏈接。在效果選項，單擊滾動運動按鈕，在關(guān)鍵選項前的運動項，單擊指向右方的箭頭旁邊的單選按鈕，預(yù)覽頁面或者在瀏覽器中預(yù)覽（文件>在瀏覽器中預(yù)覽頁面），或者在Adobe Muse CC下選擇預(yù)覽模式查看。

字體形式是任何數(shù)字閱讀設(shè)計的一個關(guān)鍵因素，從選擇合適的字體為企業(yè)形象做一個獨特的風(fēng)格，到為一場音樂會的海報或者雜志封面做的設(shè)計。然而一旦讀者的設(shè)計投入應(yīng)用，那么再去手動更改單個字符費時又費力，因為單詞過去一直被視為統(tǒng)一的整體，因此想迅速調(diào)整和修改單個字符幾乎是難如登天。

最近， AI CC里的新觸摸式創(chuàng)意工具工作，可以讓字母作為單獨的對象。想象一下，現(xiàn)在可以選擇一個字母或者字符，一個單詞，甚至一段話，改變他們的字體，大小，旋轉(zhuǎn)并移動被選擇的部分（在其他文字中間），還是簡單又熟悉的四方盒圖標(biāo)，就像是里面裝滿了為讀者們帶來全新設(shè)計字體功能和樂趣的禮物。

而且，這還不是全部。該工具被稱為觸控式的一個原因就是它能夠兼容觸摸屏和直接接觸的設(shè)備，包括Win8的觸摸屏電腦，新帝24HD液晶數(shù)位屏，在AI CC里你不需要觸摸設(shè)備來使用這項新功能，但如果擁有一個，它會使觸摸式工具使用起來更直觀更方便。

轉(zhuǎn)變文本

圖1展示了AI CC里的一個文本對象，這里使用了Trajan Pro 字體對其進行了簡單的設(shè)計，數(shù)字8是一個單獨的對象，而Tropical Treks是一個文本對象。

這里需要轉(zhuǎn)變一些字符來創(chuàng)造一個關(guān)于8個戶外冒險家的營銷設(shè)計，在使用觸摸式工具之前，不得不將文本創(chuàng)立一個外框或者將每個字母當(dāng)做一個單獨的文本對象。但是現(xiàn)在有了觸摸式工具，就可以編輯或者轉(zhuǎn)變這些字符好像他們是單個的對象，并且文字是鮮活的（可編輯的）。

首先選擇觸控式工具，會發(fā)現(xiàn)在工具欄或者字符面板里有一個字體工具選項或者通過使用快捷鍵Shift+F7。

接下來，這里會使用觸摸式工具在單詞Tropical選擇字母A，使用范圍框句柄，可以轉(zhuǎn)變選擇的字符。四角邊框上的節(jié)點讓讀者可以按比例，水平或者垂直自由移動。邊界框頂端的節(jié)點可以自由的旋轉(zhuǎn)選中的部分。

如讀者在圖4中看到的那樣，在旋轉(zhuǎn)字母A后，讓它后其余的字母保持在同一條水平線上，將字母L左移一些讓它看起來適中。

如圖5所示，使用觸摸工具也可以移動或縮放其余的字母來達到一個整體的設(shè)計。

在圖6中，可以看到關(guān)于“Terrific Treks”最后版本的變化，但仍舊保留了之前的變換外觀。最好的部分是整個字段仍舊是鮮活的，這里還可以編輯或者改變內(nèi)容。

增加復(fù)雜性

使用觸摸工具，讀者可以非常自如地實現(xiàn)文本從簡單到復(fù)雜的轉(zhuǎn)變，下面的示例開始使用的是Mesquite Std字體的logo。

使用觸摸式工具，可以很輕松的轉(zhuǎn)變這些字符和旋轉(zhuǎn)這個單詞。

接下來將添加一張木板照片在該文本下面和一些紋理在文本上一層。106頁下方的圖片顯示了完成的最終標(biāo)志。