意想不到的數字閱讀效果

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

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

用Adobe Mouse CC實現視差滾動效果

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

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

何時使用視差滾動技術

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

視差滾動技術原理

視差滾動技術依賴于HTML5， CSS和 JavaScript。比如在一張被標記使用HTML5標簽如

8.選擇文件>保存網站，然后選擇文件>關閉頁面。

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

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

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

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

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

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

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

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

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

7. 點擊任意地方關閉效果菜單，選擇視圖>預覽模式預覽效果。讀者必須以向下滾動的方式直到在文件創建看到文本和標志。

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

就是這樣?，F在讀者們已經了解了在Adobe Muse CC里關于視差滾動效果頁面設計的基礎知識。并可以將它運用到自己的一些設計中去。

這只是開始

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

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

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

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

轉變文本

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

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

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

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

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

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

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

增加復雜性

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

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

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