手機(jī)端網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)研究

1、端網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)研究摘要近年來(lái)隨著移動(dòng)互聯(lián)網(wǎng)與移動(dòng)設(shè)備技術(shù)的蓬勃開(kāi)展，人們?cè)絹?lái)越多地使用便攜的移動(dòng)設(shè)備上網(wǎng)進(jìn)行信息交流行為，以智能為代表的移動(dòng)設(shè)備正在成為網(wǎng)絡(luò)閱讀的主要載體?！熬W(wǎng)頁(yè)作為網(wǎng)絡(luò)閱讀的主要形式之一也從臺(tái)式電腦的大屏幕轉(zhuǎn)向智能的小屏幕。同時(shí)，基于HTML5技術(shù)的移動(dòng)端網(wǎng)頁(yè)技術(shù)也為網(wǎng)頁(yè)的視聽(tīng)呈現(xiàn)方式、信息交互方式提供了更多的可能。智能端的閱讀體驗(yàn)既不同于紙質(zhì)閱讀，也與傳統(tǒng)的臺(tái)式計(jì)算機(jī)上的網(wǎng)絡(luò)閱讀有很大差異。閱讀載體的轉(zhuǎn)移帶來(lái)了人類(lèi)閱讀行為的巨大改變，方寸之間，手掌之上，端網(wǎng)頁(yè)的內(nèi)容架構(gòu)、圖文編排、字體使用、動(dòng)畫(huà)、交互行為都需要重新設(shè)計(jì)。移動(dòng)互聯(lián)網(wǎng)與網(wǎng)頁(yè)技術(shù)給信息的視覺(jué)呈現(xiàn)方式帶來(lái)技術(shù)支撐。

2、對(duì)于端的網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)而言，既要適應(yīng)屏幕的小尺寸以及由它帶來(lái)的閱讀行為的改變，又要最大限度地利用新技術(shù)做好信息梳理和視覺(jué)呈現(xiàn)，這無(wú)疑給設(shè)計(jì)師們提出了新的挑戰(zhàn)。通過(guò)分析在移動(dòng)互聯(lián)網(wǎng)的技術(shù)背景下端閱讀行為特點(diǎn)，結(jié)合最新的端網(wǎng)頁(yè)技術(shù)手段，優(yōu)秀設(shè)計(jì)案例，總結(jié)端網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)規(guī)律。關(guān)鍵詞移動(dòng)互聯(lián)網(wǎng)；端閱讀；小屏幕網(wǎng)頁(yè)設(shè)計(jì)；屏幕閱讀中圖分類(lèi)號(hào)G2文獻(xiàn)標(biāo)識(shí)碼A文章編號(hào)2096-0360202107-0046-081研究背景1.1移動(dòng)互聯(lián)網(wǎng)的開(kāi)展近年來(lái)隨著互聯(lián)網(wǎng)技術(shù)的開(kāi)展，全球范圍內(nèi)的互聯(lián)網(wǎng)用戶(hù)繼續(xù)保持增長(zhǎng)。根據(jù)2021年1月31日，中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心CNNIC發(fā)布的第41次?中國(guó)互聯(lián)網(wǎng)絡(luò)開(kāi)展?fàn)顩r統(tǒng)計(jì)報(bào)告?顯示

3、，截至2021年12月，我國(guó)網(wǎng)民規(guī)模達(dá)7.72億，普及率到達(dá)55.8%，超過(guò)全球平均水平51.7%4.1個(gè)百分點(diǎn)。隨著互聯(lián)網(wǎng)技術(shù)的開(kāi)展和智能移動(dòng)終端設(shè)備的普及，“移動(dòng)互聯(lián)網(wǎng)這一將移動(dòng)通信和互聯(lián)網(wǎng)相結(jié)合的技術(shù)已飛快地進(jìn)入我們的生活并效勞于我們生活的方方面面，人們通過(guò)移動(dòng)互聯(lián)網(wǎng)技術(shù)實(shí)現(xiàn)網(wǎng)絡(luò)閱讀、社交、購(gòu)物、娛樂(lè)。越來(lái)越多的網(wǎng)民尤其是年輕一代的網(wǎng)民更多地選擇使用智能上網(wǎng)，數(shù)據(jù)顯示，截至2021年12月，我國(guó)網(wǎng)民規(guī)模達(dá)7.53億，網(wǎng)民中使用上網(wǎng)人群的占比由2021年的95.1%提升至97.5%。此外，移動(dòng)互聯(lián)網(wǎng)技術(shù)效勞于人類(lèi)生活也改變了人類(lèi)很多行為方式，尤其是閱讀方式的變化。移動(dòng)互聯(lián)網(wǎng)技術(shù)可以讓人類(lèi)隨

4、時(shí)隨地接受到各類(lèi)信息，而智能能讓這些信息以文字、聲音、圖片、視頻等各類(lèi)形式呈現(xiàn)在讀者面前。并且用戶(hù)可以通過(guò)觸摸屏幕來(lái)與這些信息互動(dòng)。在今天，信息的傳遞和呈現(xiàn)變得史無(wú)前例得快速和立體。1.2移動(dòng)端網(wǎng)頁(yè)技術(shù)的開(kāi)展由于移動(dòng)端上網(wǎng)在即時(shí)性上的優(yōu)勢(shì)顯而易見(jiàn)，網(wǎng)絡(luò)閱讀也從臺(tái)式機(jī)更多地轉(zhuǎn)向了智能。用戶(hù)一般通過(guò)兩種途徑在智能上實(shí)現(xiàn)網(wǎng)絡(luò)閱讀，一種是通過(guò)網(wǎng)頁(yè)，一種是通過(guò)安裝在智能上的軟件App。兩者在功能上各有特點(diǎn)，前者無(wú)需下載，直接通過(guò)瀏覽器翻開(kāi)，后者需要用戶(hù)將軟件下載到里，由于其本身的技術(shù)特點(diǎn)，軟件在早期擁有更穩(wěn)定更友好的操作體驗(yàn)，且可以離線使用。但隨著網(wǎng)頁(yè)技術(shù)的開(kāi)展，尤其是HTML5超文本標(biāo)記語(yǔ)言的第5次修

5、訂的制定完成，使得網(wǎng)頁(yè)作為一種傳統(tǒng)的網(wǎng)絡(luò)閱讀載體，在多媒體的呈現(xiàn)以及實(shí)現(xiàn)人機(jī)交互功能方面都得到了全面升級(jí)。網(wǎng)頁(yè)上不僅可以輕松實(shí)現(xiàn)圖像、動(dòng)畫(huà)、音視頻的展示，還可以通過(guò)觸摸屏、重力感應(yīng)器、攝像頭、話筒實(shí)現(xiàn)人機(jī)交互。同時(shí)，網(wǎng)頁(yè)相比軟件在信息的傳播分享和對(duì)硬件平臺(tái)的兼容性上有了獨(dú)特的優(yōu)勢(shì)，隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的繼續(xù)開(kāi)展，這一優(yōu)勢(shì)也會(huì)越來(lái)越明顯。1.3端網(wǎng)頁(yè)應(yīng)用現(xiàn)狀與案例分析由于端網(wǎng)頁(yè)以下簡(jiǎn)稱(chēng)網(wǎng)頁(yè)擁有在移動(dòng)互聯(lián)網(wǎng)上的傳播優(yōu)勢(shì)，使它更多地運(yùn)用于廣告營(yíng)銷(xiāo)、新聞報(bào)道等領(lǐng)域。為了吸引用戶(hù)翻開(kāi)網(wǎng)頁(yè)閱讀，在基于HTML5網(wǎng)頁(yè)技術(shù)的廣告設(shè)計(jì)中往往利用其在多媒體呈現(xiàn)和人機(jī)交互上的技術(shù)特點(diǎn)，通過(guò)圖形動(dòng)畫(huà)、音視頻演繹一個(gè)故事

6、，并根據(jù)故事情節(jié)的開(kāi)展在其中參加有趣的交互環(huán)節(jié)，從而加深用戶(hù)對(duì)廣告內(nèi)容的印象。圖3是一組用于宣傳一款支付軟件的網(wǎng)頁(yè)，該系列網(wǎng)頁(yè)在首屏設(shè)計(jì)了一個(gè)模擬點(diǎn)鈔的交互環(huán)節(jié)，用戶(hù)可以通過(guò)手指滑動(dòng)屏幕上的點(diǎn)鈔機(jī)，點(diǎn)鈔機(jī)上的鈔票也會(huì)隨著手指的觸摸滑動(dòng)飛出，配上真實(shí)的音效，在屏幕上真實(shí)再現(xiàn)了點(diǎn)鈔過(guò)程，這一環(huán)節(jié)的設(shè)計(jì)無(wú)疑增添了網(wǎng)頁(yè)的趣味性。后續(xù)又通過(guò)風(fēng)格獨(dú)特的圖形動(dòng)畫(huà)演繹了一場(chǎng)餐廳結(jié)賬的鬧劇，并在故事的結(jié)尾引出廣告產(chǎn)品，留下了產(chǎn)品下載按鈕。該組網(wǎng)頁(yè)充分利用了端網(wǎng)頁(yè)的技術(shù)特點(diǎn)結(jié)合了獨(dú)特的畫(huà)面風(fēng)格和有趣的交互體驗(yàn)給人留下深刻的印象。與廣告類(lèi)網(wǎng)頁(yè)不同，新聞報(bào)道類(lèi)網(wǎng)頁(yè)除了表達(dá)趣味性的同時(shí)，更注重于真實(shí)事件的再現(xiàn)。在這類(lèi)網(wǎng)

7、頁(yè)中往往嵌入來(lái)自新聞事件中的真實(shí)聲音和影像。圖4是一組以回憶MH370航班失聯(lián)事件為主題的新聞?lì)惥W(wǎng)頁(yè)，該系列網(wǎng)頁(yè)采用了冷峻寫(xiě)實(shí)的整體視覺(jué)風(fēng)格，在通過(guò)動(dòng)態(tài)圖像展示失聯(lián)航班的航線和搜救路線的同時(shí)，嵌入了來(lái)自新聞事件第一現(xiàn)場(chǎng)的聲音。該系列網(wǎng)頁(yè)通過(guò)寫(xiě)實(shí)的視覺(jué)風(fēng)格和真實(shí)的聲音營(yíng)造了新聞事件的現(xiàn)場(chǎng)感和與主題相符的沉重氣氛。圖5所示的是總理記者會(huì)新聞網(wǎng)頁(yè)，該網(wǎng)頁(yè)展示了記者會(huì)現(xiàn)場(chǎng)金色大廳的全景畫(huà)面，當(dāng)讀者用手指左右滑動(dòng)屏幕時(shí)，前排記者與主席臺(tái)是21的視差滾動(dòng)，從而增加畫(huà)面的空間感。當(dāng)畫(huà)面經(jīng)過(guò)主席臺(tái)左右兩側(cè)的壁畫(huà)時(shí)，原本靜態(tài)的壁畫(huà)會(huì)活動(dòng)起來(lái)。當(dāng)滑動(dòng)到特定區(qū)域時(shí)，會(huì)有記者舉手提問(wèn)并出現(xiàn)關(guān)鍵詞，點(diǎn)擊關(guān)鍵詞進(jìn)入總理的

8、問(wèn)答頁(yè)面，問(wèn)答頁(yè)面中除了有總理答復(fù)記者的完整文字稿還有原音重現(xiàn)。該網(wǎng)頁(yè)通過(guò)第一視角的場(chǎng)景復(fù)原和特色的交互效果帶給讀者很強(qiáng)的參與感。1.4移動(dòng)端網(wǎng)頁(yè)用戶(hù)行為分析由于基于移動(dòng)端網(wǎng)頁(yè)的閱讀受到內(nèi)容、網(wǎng)速、硬件、網(wǎng)頁(yè)架構(gòu)和界面布局等多方面的影響，使其用戶(hù)在閱讀行為上有明顯的特征。根據(jù)來(lái)自騰訊市場(chǎng)部的?移動(dòng)端網(wǎng)頁(yè)用戶(hù)行為報(bào)告?顯示，移動(dòng)端網(wǎng)頁(yè)的用戶(hù)閱讀行為主要有以下特點(diǎn)。1網(wǎng)頁(yè)加載5秒內(nèi)就會(huì)有74%的用戶(hù)離開(kāi)頁(yè)面。2閱讀頂峰期通常出現(xiàn)在中午12點(diǎn)和晚上10點(diǎn)左右。3通過(guò)用戶(hù)口碑傳播的網(wǎng)頁(yè)，訪問(wèn)熱度往往會(huì)持續(xù)兩天左右。4放置在網(wǎng)頁(yè)左邊的按鈕，點(diǎn)擊率較低。5隨著網(wǎng)頁(yè)頁(yè)面層級(jí)越深用戶(hù)的流失率越高到了第6頁(yè)只剩

9、下46.9%的用戶(hù)。6輸入行為和復(fù)雜的交互行為會(huì)導(dǎo)致用戶(hù)流失。7用戶(hù)在功能型頁(yè)面的平均停留時(shí)間要比在展示型頁(yè)面的平均停留時(shí)間要長(zhǎng)。8用戶(hù)在首頁(yè)和尾頁(yè)的平均停留時(shí)間比在中間頁(yè)面的平均停留時(shí)間要長(zhǎng)。9設(shè)置在首屏和尾屏的按鈕被點(diǎn)擊率最高。10具有動(dòng)畫(huà)效果的按鈕更容易引起用戶(hù)注意并點(diǎn)擊。11用戶(hù)會(huì)沿用從上一頁(yè)學(xué)習(xí)到的交互行為。根據(jù)以上特點(diǎn)可以看出，移動(dòng)端網(wǎng)頁(yè)在設(shè)計(jì)時(shí)應(yīng)注重以下幾點(diǎn)：層級(jí)不宜過(guò)深、應(yīng)該把重要的信息放在首屏、適當(dāng)在網(wǎng)頁(yè)中參加的動(dòng)畫(huà)效果將更容易吸引讀者參與交互、交互按鈕應(yīng)盡量設(shè)計(jì)在網(wǎng)頁(yè)的右側(cè)。2端網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)研究2.1端閱讀的特點(diǎn)在數(shù)字閱讀時(shí)代，閱讀載體從紙張轉(zhuǎn)變?yōu)槠聊?，從電腦的大屏幕轉(zhuǎn)變?yōu)?/p>

10、的小屏幕，端閱讀帶來(lái)的不僅是閱讀載體尺寸的變化，更是人類(lèi)獲取信息方式的變化。移動(dòng)互聯(lián)網(wǎng)技術(shù)的開(kāi)展帶來(lái)了各種應(yīng)用效勞和即時(shí)信息，人們隨時(shí)隨地可以閱讀新聞、查詢(xún)信息、互相交流，各類(lèi)信息從未向今天這樣變得唾手可得。下面筆者將從5個(gè)方面分析端閱讀的特點(diǎn)。2.1.1即時(shí)性作為新一代的閱讀載體打破了空間和時(shí)間的限制，人類(lèi)可以隨時(shí)隨地接收信息。換個(gè)角度說(shuō)，信息的即時(shí)性帶來(lái)了人類(lèi)閱讀環(huán)境和閱讀時(shí)機(jī)的變化?？臻g上，人類(lèi)的閱讀行為不僅會(huì)發(fā)生在光線明亮的書(shū)桌上也有可能會(huì)在昏暗搖晃的車(chē)廂里，時(shí)間上，人類(lèi)不再需要特意挑個(gè)安靜的讀書(shū)時(shí)間，更多的可能是伴隨著的提示音隨時(shí)開(kāi)始閱讀行為。新的閱讀行為和閱讀環(huán)境也為端界面設(shè)計(jì)提出

11、新的要求。2.1.2超文本性在印刷技術(shù)下，文本受到印刷載體的限制，使得在單個(gè)閱讀載體上獲得的信息量有限?；ヂ?lián)網(wǎng)帶來(lái)了幾乎沒(méi)有邊界的信息海洋，在移動(dòng)互聯(lián)網(wǎng)上閱讀不再受篇幅的限制，人類(lèi)可以通過(guò)搜索引擎查找想要的任何信息，人類(lèi)在信息面前有史無(wú)前例的選擇權(quán)。信息更多的以一種“超文本的形式出現(xiàn)。所謂“超文本這一概念早在1963年就被提出，由泰德·納爾遜TedNelson創(chuàng)造。他的定義為：“信息以一種復(fù)雜的形式相連，包含諸如概況、內(nèi)容瀏覽圖、內(nèi)容間的相互聯(lián)系以及作者加的標(biāo)注、增補(bǔ)等。它是非順序鏈接的一系列文本塊，這種文本給予讀者多路徑的選擇權(quán)?；ヂ?lián)網(wǎng)實(shí)際上就是一個(gè)超大規(guī)模的超文本，人們不再局限于

12、一段文本的閱讀，而是可以通過(guò)超鏈接，去尋找到與之相關(guān)或無(wú)關(guān)的其他信息。相對(duì)于每個(gè)文段來(lái)說(shuō)，傳統(tǒng)的閱讀習(xí)慣仍然適用，但一旦讀者離開(kāi)了某個(gè)文本架構(gòu)的范圍，屬于互聯(lián)網(wǎng)的閱讀規(guī)那么和體驗(yàn)便產(chǎn)生了。2.1.3可交互性端閱讀的交互性表達(dá)在兩個(gè)方面：一是表達(dá)在人類(lèi)與閱讀載體的互動(dòng)，即人類(lèi)與的互動(dòng)，人類(lèi)可以通過(guò)用手指滑動(dòng)觸摸屏、對(duì)話筒說(shuō)話、通過(guò)攝像頭拍攝和掃描、改變握持的方向等方式向發(fā)出指令，在接受到指令后而做出相應(yīng)地反響。二是是用戶(hù)之間的互動(dòng)，與傳統(tǒng)紙質(zhì)閱讀不同的是，端閱讀受到移動(dòng)互聯(lián)網(wǎng)技術(shù)的影響，信息的傳達(dá)不再是單向的。各類(lèi)用于用戶(hù)交流信息的社交軟件成為上使用頻率最高的應(yīng)用程序。通過(guò)信息的交流和共享，人類(lèi)

13、在獲得信息的同時(shí)也發(fā)出信息，并隨時(shí)得到反響，這大大地提升了閱讀的參與感。2.1.4信息介質(zhì)的多樣性圖像作為一種世界范圍內(nèi)共通的語(yǔ)言，在視覺(jué)傳達(dá)上有其獨(dú)特的優(yōu)勢(shì)。在相對(duì)快節(jié)奏的現(xiàn)代生活中，用圖像傳達(dá)信息帶來(lái)的高效率和直觀性受到讀者的歡迎，誕生了所謂的“讀圖時(shí)代。傳統(tǒng)紙質(zhì)閱讀載體上的圖像主要包括符號(hào)、圖案、圖標(biāo)、插圖和照片等，而在屏幕上還可以播放動(dòng)態(tài)影像并能與之互動(dòng)，傳遞信息的介質(zhì)變得更加多元化，文字、圖像、動(dòng)畫(huà)、聲音都可以用于端閱讀信息的傳播?，F(xiàn)在，如何根據(jù)信息的內(nèi)容選擇適宜信息介質(zhì)并將它們有機(jī)的整合起來(lái)，是從事端視覺(jué)設(shè)計(jì)的設(shè)計(jì)師們面臨的新課題。2.1.5小屏幕作為閱讀載體，其小型化帶來(lái)的便攜性

14、給用戶(hù)提供了即時(shí)閱讀的可能，但也給端閱讀界面的設(shè)計(jì)提出了新的要求。隨著硬件技術(shù)的開(kāi)展，高分辨率屏幕的出現(xiàn)已經(jīng)為的成像品質(zhì)帶來(lái)了質(zhì)的飛越，但是屏幕的大小給閱讀體驗(yàn)帶來(lái)的限制與其便攜性的權(quán)重已經(jīng)讓的尺寸維持在一定范圍內(nèi)。字體的使用、圖形的設(shè)計(jì)、版面的編排、按鈕的位置都需要在屏幕上重新考慮。2.2端網(wǎng)頁(yè)架構(gòu)設(shè)計(jì)端網(wǎng)頁(yè)設(shè)計(jì)相比電腦網(wǎng)頁(yè)主要的限制是屏幕的尺寸，傳統(tǒng)網(wǎng)頁(yè)架構(gòu)有層級(jí)結(jié)構(gòu)或網(wǎng)狀結(jié)構(gòu)，但由于屏幕尺寸的限制使得端的網(wǎng)頁(yè)架構(gòu)不宜過(guò)于復(fù)雜。在電腦的大屏幕上翻開(kāi)的網(wǎng)頁(yè)可以以層迭的形式并列在瀏覽器上，屏幕的寬度也可以讓各級(jí)別的網(wǎng)頁(yè)菜單駐留在網(wǎng)頁(yè)的一側(cè)，方便用戶(hù)清晰地了解自己翻開(kāi)的網(wǎng)頁(yè)所屬的位置和級(jí)別。而在

15、狹小的屏幕上，如果要顯示類(lèi)似電腦端架構(gòu)復(fù)雜的網(wǎng)頁(yè)，那么需要用戶(hù)反復(fù)地開(kāi)啟和關(guān)閉窗口，不但會(huì)造成用戶(hù)使用上的不便和混亂，而且也會(huì)浪費(fèi)的系統(tǒng)資源。所以為了不影響到用戶(hù)的閱讀體驗(yàn)，端的網(wǎng)頁(yè)架構(gòu)一般為簡(jiǎn)單的線性結(jié)構(gòu)，盡量不要讓用戶(hù)返回上一級(jí)菜單。2.3端網(wǎng)頁(yè)界面視覺(jué)設(shè)計(jì)特點(diǎn)2.3.1網(wǎng)頁(yè)界面布局和書(shū)籍設(shè)計(jì)中的版式設(shè)計(jì)一樣，端網(wǎng)頁(yè)的界面設(shè)計(jì)也有自己的規(guī)那么，不同的是端網(wǎng)頁(yè)版面設(shè)計(jì)中要考慮到人機(jī)交互的因素。在端網(wǎng)頁(yè)的界面布局設(shè)計(jì)中考慮到用戶(hù)更多的是采用垂直滾動(dòng)的方式瀏覽，網(wǎng)頁(yè)界面一般采用一欄單列式的布局，讓用戶(hù)只需單方向滾動(dòng)就能瀏覽主要的內(nèi)容。另外，考慮到屏幕的尺寸較小，字號(hào)大小也受到限制，為了不影響閱讀

16、，端網(wǎng)頁(yè)應(yīng)控制單個(gè)頁(yè)面的內(nèi)容量，突出重點(diǎn)視覺(jué)元素，防止界面雜亂。同時(shí)精簡(jiǎn)文字，將冗長(zhǎng)的信息內(nèi)容劃分為多重頁(yè)面。設(shè)計(jì)者必須對(duì)內(nèi)容有所取舍，選出最為重要的信息擺入網(wǎng)頁(yè)中。網(wǎng)頁(yè)界面設(shè)計(jì)中應(yīng)突出按鈕的位置，按鈕的尺寸應(yīng)當(dāng)和手指的大小相匹配。麻省理工學(xué)院的TouchLab通過(guò)研究發(fā)現(xiàn)，指面的觸摸尺寸平均大小為10mm14mm，而指尖的平均尺寸是8mm10mm，也就是說(shuō)10mm×10mm的控件尺寸設(shè)計(jì)是比較合理的大小。另外一個(gè)需要考慮的就是可觸摸控件之間的距離。如果兩個(gè)按鈕比較靠近，那么用戶(hù)在移動(dòng)端上就很容易出現(xiàn)誤觸的情況了。如果想要解決這個(gè)問(wèn)題，就需要根據(jù)實(shí)際情況重新調(diào)整尺寸和按鈕之間的距離，

17、以適應(yīng)用戶(hù)手指交互的需求。2.3.2視覺(jué)隱喻的運(yùn)用圖像閱讀是人類(lèi)普遍具有的能力，它能夠直接調(diào)動(dòng)讀者的感性經(jīng)驗(yàn)和視覺(jué)思維。也正鑒于這點(diǎn)，GUIgraphicaluserinterface/圖形用戶(hù)界面早早的被用于人機(jī)交互領(lǐng)域，從1973年施樂(lè)公司研發(fā)出了第一臺(tái)使用Alto操作系統(tǒng)的個(gè)人電腦到今天圖形用戶(hù)界面已經(jīng)走過(guò)了40幾年的開(kāi)展歷程。施樂(lè)的圖形化界面啟發(fā)了蘋(píng)果公司的喬布斯，他在1984年發(fā)布了著名的Macintosh系統(tǒng)，也就是后來(lái)我們所熟知的MacOS。在圖形用戶(hù)界面中用戶(hù)通過(guò)把這些帶有隱喻的圖形與其熟悉的事物聯(lián)系在一起，從而理解界面中各個(gè)控件的功能。在端網(wǎng)頁(yè)設(shè)計(jì)中，圖像也不僅僅是傳遞信息的

18、一種介質(zhì)，同時(shí)也可以利用視覺(jué)隱喻的原理承擔(dān)著幫助用戶(hù)在界面視覺(jué)元素與網(wǎng)頁(yè)互動(dòng)機(jī)制之間建立直覺(jué)聯(lián)系，進(jìn)而減少用戶(hù)的學(xué)習(xí)本錢(qián)。圖10是LeVIS端的網(wǎng)頁(yè)廣告，網(wǎng)頁(yè)上模擬了一個(gè)冬天蒙上水汽的玻璃的畫(huà)面，玻璃上有用手指寫(xiě)的字，這個(gè)畫(huà)面促使用戶(hù)根據(jù)經(jīng)驗(yàn)本能地用手指去涂抹屏幕，從而觸發(fā)網(wǎng)頁(yè)程序，畫(huà)面發(fā)生了變化進(jìn)而引發(fā)了劇情。2.3.3字體使用盡管圖像在數(shù)字閱讀時(shí)代越來(lái)越受到青睞，但文字依然是人類(lèi)獲取信息的主要介質(zhì)。由于早期受到屏幕像素的限制，為了適應(yīng)屏幕柵格狀的像素點(diǎn)，用于屏幕閱讀的字體通常選擇中文的黑體和拉丁文的無(wú)襯線體。字體開(kāi)發(fā)公司也相繼推出適合屏幕使用的黑體字。但是隨著科技的開(kāi)展，今天，5寸左右的屏

19、幕像素?cái)?shù)量已與電腦屏幕相當(dāng)如1080×1920，其像素密度普遍超過(guò)300PPI，幾乎接近一般打印效果。這給端網(wǎng)頁(yè)字體的選擇帶來(lái)更大的自由，更多樣的中文字體可以被使用，極大地豐富了網(wǎng)頁(yè)視覺(jué)風(fēng)格。盡管如此，端網(wǎng)頁(yè)在使用字體時(shí)還需要考慮屏幕尺寸的限制，為了讓信息層級(jí)清晰，防止界面雜亂，應(yīng)盡量控制網(wǎng)頁(yè)文字的字體類(lèi)型和字號(hào)的數(shù)量，正文字體盡量選擇識(shí)別性較高的黑體、中等線體等無(wú)襯線字體，識(shí)別性較低的特殊字體在使用時(shí)應(yīng)節(jié)制，可在少量標(biāo)題等字號(hào)相對(duì)較大的文字上使用。2.3.4色彩設(shè)計(jì)使用不同的色彩可以帶給用戶(hù)不同的感覺(jué)，譬如藍(lán)色使人感到平靜、黃色感覺(jué)明媚并有警示的效果。在一些領(lǐng)域中，顏色具有特殊的意

20、義，會(huì)計(jì)會(huì)把紅色的數(shù)字當(dāng)做負(fù)值，把黑色當(dāng)做正值，在不同的文化環(huán)境中顏色的含義也不盡相同，紅色在交通信號(hào)燈中的意思是停止，在西方紅色意味著“危險(xiǎn)而在中國(guó)的一些場(chǎng)合里紅色意味著“吉利，白色在西方代表著純潔與祥和，一般用在婚禮慶典中，而在亞洲一些國(guó)家那么用在葬禮中。所以在網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)時(shí)網(wǎng)頁(yè)的色彩不但要與主題內(nèi)容所傳達(dá)的情感相契合也要考慮讀者的文化背景。色彩和其他視覺(jué)元素一樣不僅用于傳達(dá)內(nèi)容和情緒，也承擔(dān)著網(wǎng)頁(yè)層次結(jié)構(gòu)的梳理功能。在端網(wǎng)頁(yè)的色彩設(shè)計(jì)中往往會(huì)根據(jù)內(nèi)容和結(jié)構(gòu)設(shè)定主色，標(biāo)準(zhǔn)色和比照色。主色決定了整個(gè)系列網(wǎng)頁(yè)的視覺(jué)風(fēng)格，一般作為底色使用或者使用在每頁(yè)的一個(gè)固定位置上，起到定調(diào)的作用。標(biāo)準(zhǔn)色指的

21、是整套移動(dòng)界面的色彩標(biāo)準(zhǔn)，確定文字、線段、圖標(biāo)等的顏色。比照色通常會(huì)用在標(biāo)題、按鈕等地方，起強(qiáng)調(diào)和引導(dǎo)的作用。端網(wǎng)頁(yè)一般是線性架構(gòu)，由一組網(wǎng)頁(yè)構(gòu)成，整套網(wǎng)頁(yè)色彩的協(xié)調(diào)性顯得尤為重要，常見(jiàn)的色彩搭配方法主要有以下幾種。第一種是鄰近色配色色相環(huán)上鄰近的顏色，這種方法比較常用是因?yàn)榇钆涑鰜?lái)的網(wǎng)頁(yè)色相比較柔和過(guò)渡也非常自然。第二種是同色系配色色相一致，飽和度不同，主色和比照色都在統(tǒng)一的色相上，給用戶(hù)一種一致化的感受。第三種是點(diǎn)亮色配色，主色用相對(duì)沉穩(wěn)的顏色，比照色采用一個(gè)高亮的顏色，起帶動(dòng)頁(yè)面氣氛，強(qiáng)調(diào)重點(diǎn)的作用。第四種是中性色配色，用一些中性的色彩為基調(diào)搭配，營(yíng)造沉穩(wěn)內(nèi)斂的氣氛。當(dāng)然，具體的配色方法

22、不限于以上這些，在確保內(nèi)容、情緒準(zhǔn)確傳達(dá)和信息結(jié)構(gòu)的清晰梳理的根底上還有很多發(fā)揮的空間。2.3.5動(dòng)畫(huà)設(shè)計(jì)隨著網(wǎng)頁(yè)技術(shù)的開(kāi)展，在端網(wǎng)頁(yè)實(shí)現(xiàn)各種形式的動(dòng)畫(huà)效果以下簡(jiǎn)稱(chēng)動(dòng)效變得更加容易，和影視動(dòng)畫(huà)不同，網(wǎng)頁(yè)動(dòng)畫(huà)效果常常肩負(fù)著對(duì)網(wǎng)頁(yè)信息結(jié)構(gòu)和交互的展示、引導(dǎo)、反響等作用。網(wǎng)頁(yè)動(dòng)效一般在網(wǎng)頁(yè)中起到以下幾種作用。1強(qiáng)調(diào)。通過(guò)網(wǎng)頁(yè)動(dòng)效的添加對(duì)網(wǎng)頁(yè)的重要信息和功能進(jìn)行暗示和指導(dǎo)。例如重要文字信息的出現(xiàn)動(dòng)畫(huà)、按鈕的閃爍等。2反響。通過(guò)網(wǎng)頁(yè)中視覺(jué)元素的出現(xiàn)和消失，以及大小、位置和透明度的變化對(duì)用戶(hù)的交互行為進(jìn)行反響，使用戶(hù)和網(wǎng)頁(yè)的交互過(guò)程更加流暢。3層級(jí)展現(xiàn)。通過(guò)網(wǎng)頁(yè)頁(yè)面或個(gè)別視覺(jué)元素的縮放、覆蓋、滑出等動(dòng)效幫

23、助用戶(hù)理解網(wǎng)頁(yè)信息架構(gòu)。常用與網(wǎng)頁(yè)的轉(zhuǎn)場(chǎng)和菜單的展開(kāi)。4模擬。一些動(dòng)效通過(guò)對(duì)現(xiàn)實(shí)世界的模擬迎合用戶(hù)的認(rèn)知。用戶(hù)通過(guò)對(duì)現(xiàn)實(shí)世界的認(rèn)知來(lái)理解網(wǎng)頁(yè)的功能，增強(qiáng)了用戶(hù)對(duì)頁(yè)面的操縱感和帶入感。5后臺(tái)進(jìn)程的可視化。典型例子是各種加載動(dòng)畫(huà)，不僅讓等待的時(shí)間變得可預(yù)期，也增加了網(wǎng)頁(yè)的趣味性。網(wǎng)頁(yè)動(dòng)效雖然形式多樣，功能齊備，但同樣要效勞在突出網(wǎng)頁(yè)核心內(nèi)容、展現(xiàn)網(wǎng)頁(yè)整體信息架構(gòu)上，考慮到動(dòng)畫(huà)效果對(duì)網(wǎng)速及硬件的高要求，網(wǎng)頁(yè)中的動(dòng)效設(shè)計(jì)還應(yīng)動(dòng)靜相宜，以防止影響到用戶(hù)的閱讀體驗(yàn)。2.6交互設(shè)計(jì)交互設(shè)計(jì)英文InteractionDesign，縮寫(xiě)IXD，是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域，它定義了兩個(gè)或多個(gè)互動(dòng)的個(gè)體之

24、間交流的內(nèi)容和結(jié)構(gòu)，使之互相配合，共同達(dá)成某種目的。具體到端網(wǎng)頁(yè)設(shè)計(jì)中的交互設(shè)計(jì)，指的是設(shè)計(jì)師結(jié)合網(wǎng)頁(yè)內(nèi)容，利用的交互功能設(shè)計(jì)出利于傳達(dá)網(wǎng)頁(yè)信息、提高閱讀體驗(yàn)的交互界面。例如通過(guò)在網(wǎng)頁(yè)中設(shè)計(jì)按鈕等形式，將原本在小屏幕上無(wú)法一次性呈現(xiàn)且可能造成界面視覺(jué)混亂的信息通過(guò)交互按鈕去隱藏和喚出，一方面保持界面簡(jiǎn)潔，另一方面在遇到信息龐雜的網(wǎng)頁(yè)時(shí)方便用戶(hù)檢索。另外通過(guò)一些具有趣味性的交互設(shè)計(jì)，也能吸引更多的用戶(hù)瀏覽網(wǎng)頁(yè)。在網(wǎng)頁(yè)交互設(shè)計(jì)中應(yīng)滿(mǎn)足以下幾點(diǎn)。1可操作性。用戶(hù)為激活某對(duì)象所需觸摸的屏幕區(qū)域有充分的空間以便用戶(hù)準(zhǔn)確操作。2易學(xué)性。通過(guò)對(duì)視覺(jué)隱喻等原理的運(yùn)用引導(dǎo)用戶(hù)的交互行為，并注重交互界面設(shè)計(jì)中具有

25、相同功能按鈕的統(tǒng)一性，以降低用戶(hù)對(duì)交互界面的學(xué)習(xí)本錢(qián)。3可知性。通過(guò)網(wǎng)頁(yè)動(dòng)畫(huà)等方式對(duì)用戶(hù)的交互動(dòng)作予以反響，讓用戶(hù)了解自己的操作是否成功。4必要性。在網(wǎng)頁(yè)中參加交互環(huán)節(jié)其實(shí)也在增加用戶(hù)的操作步驟和網(wǎng)頁(yè)程序的運(yùn)算量，應(yīng)充分考慮其必要性。隨著智能科技的進(jìn)步，我們與的交互手段越來(lái)越多樣化，如何利用好這些科技成果，設(shè)計(jì)出對(duì)內(nèi)容呈現(xiàn)有價(jià)值有意義的互動(dòng)界面，是端網(wǎng)頁(yè)交互設(shè)計(jì)需要探索的課題。3小結(jié)端網(wǎng)頁(yè)和App不同的是前者偏向內(nèi)容的展示，后者更注重功能的實(shí)現(xiàn)，從這個(gè)角度看，端網(wǎng)頁(yè)與傳統(tǒng)書(shū)籍設(shè)計(jì)有一定的可比性。人類(lèi)的閱讀習(xí)慣是由基于紙質(zhì)媒體的靜態(tài)圖文信息培養(yǎng)出來(lái)的，端網(wǎng)頁(yè)的視覺(jué)設(shè)計(jì)，在很大程度上仍離不開(kāi)從紙質(zhì)閱讀載體上尋求原理的借鑒，例如界面的圖文編排、文本信息的可視化處理等。同時(shí)，同樣是基于閱讀載體的設(shè)計(jì)，不同的閱讀載體具有不同的特征，端網(wǎng)頁(yè)作為數(shù)字閱讀時(shí)代閱讀載體的代表，具有明顯的數(shù)字閱讀特征，