探討觸摸界面的網頁互動設計

蔣 真, 應國虎

(上海師范大學 數理學院,上海 200234)

如果說鼠標的發明,為電腦走進千家萬戶提供了契機;那么觸摸屏的延伸,為智能移動終端產品的普及、為網絡個性化服務的拓展帶來了方便.Stephen Woods在《HTML5觸摸界面設計與開發》一書中寫到:“市面上有數百種的移動設備在售.它們千差萬別,各有千秋,但它們有一個共同的特點:先進的Web 瀏覽器和觸摸界面”[1].這一特點不僅顯示出網頁自動獲取新數據的速度,而且還保證了用戶離線后仍然可以高效地訪問,尤其是為適應Web技術發展而重設的超文本標記語言HTML5,使更多功能上的優化選擇得以實現,并展示出更多觸摸體驗功能上的新潛力.超文本標記語言HTML5的頒布和實施,賦予了Web 應用開發的新標準,也掀開了網頁互動設計的新篇章.

1 網頁互動設計的時代要求分析

互動,它是一種對象之間相互作用而使彼此產生積極影響的過程.互動設計就是通過對產品的界面和人的行為進行關系設計,讓產品和它的使用者之間建立一種有機聯系,從而可以有效達到使用者的目標.顯然,這種互動設計與計算機的使用有著天然的聯系,同時網頁的互動設計又有其自身的特點.

第一,互動是人與計算機聯系的基本要求.正如《數碼平面設計指南》的作者鮑勃·戈登、麥琪·戈登(英)所指出的:“與電腦交流互動是數碼世界信息傳播的基本原則,用戶幾乎對電腦屏幕上的每一種內容都需要進行某種程度的互動.網站的設計目的正在于此——鼓勵訪問者參觀網站,進入網站的各個區域,從而獲取相關的信息”,因此書中要求“網絡設計師必須充分認識互動的理念,并在設計中將其發揚光大”[2].對此,韓高路在其《網絡藝術設計》中將眼光放得更遠,認為“網絡未來的發展趨勢就是互動性”[3],這里所指的“互動性”已經不是那種單純的人機的機械互動,而已經上升至一種人機的藝術互動.

第二,互動設計與藝術表現密不可分.韓高璐認為:“網絡技術與藝術創意是緊密結合的”.因為互動與藝術的完美結合,能夠增強吸引力、增加趣味性,從而加大信息的傳遞和吸收.曹田泉在其《新媒體實驗藝術與設計》一書中也說過:“網絡上五花八門的創意和藝術思維一經先進技術的改造,就足以造成令人驚詫的視覺體驗與沖擊”[4].技術的發展帶來了設計的進步,而網頁的互動更促進了設計者與用戶的聯系,這種聯系是一種參與的聯系、合作的聯系,是實現網頁內容與精彩效果互動展示的聯系.正如杜尚所說:“人人都是藝術家”、“觀眾完成藝術作品”.所以,網頁的互動設計就必須從藝術的角度出發,并要符合藝術美的規律,使廣大網頁用戶能夠達到一種身心上的沖擊、享受、感染等的審美和體驗.

其三,互動能夠觸發用戶的情感.卓嘉在其《體驗式展示設計》中就注意到了互動與人的情感之間的聯系,并認為“在設計當中引入互動的概念,即將展示設計提升到‘信息——人——信息’的層次,簡單的觸摸屏在受眾的精神層面產生情感的共鳴是一種更有效的互動手段”[5].作為移動終端的觸摸屏,拓展和延伸了人們獲取信息的途徑,充實和豐富了人們碎片時段的享用,由此而體現網絡的情感關懷也就成為網頁互動設計的重要內涵.吳旭剛、羅穎在其的《物聯網時代的自然交互設計》中就說到:“漂亮的、有趣的、個性化的設計表達了對用戶情感的關注,開始注重和強調用戶作為個體的多樣性,情感價值成為目前產品設計的一個有價值的目標”[6].設計師不僅是設計“事”、“物”的創造者,更是生活信息和互動體驗的傳播者,要讓用戶在使用過程中有愉悅感、成就感,并感覺到被尊重,就要在網頁的設計中處處體現設計者對公眾的熱情與服務,并在互動的友好氛圍中實現用戶的網上體驗.

2 網頁設計模式上的互動特征

基于互聯網快速強大的各種交互功能,如今的網頁設計正不斷創新出設計者與用戶的互動體驗元素.設計從圖片展示、置入音樂的二維靜態網頁,到全景環視、轉換立體三維動態網頁,聲音、影像和動畫等各個設計環節無不蘊藏著設計者提供給用戶的互動交流方式.而用戶則在觸摸、點擊、滑移的過程中,實現網上巡游和查閱.

2.1 網頁的“隨機性”打開

為使用戶能在臺式機、筆記本、平板、手機等各種終端設備上打開網頁,網頁的“隨機性”也就成為了滿足人們隨時隨地移動瀏覽網頁的基本要求.而響應式網頁的設計成功,將人們的這一愿望變成了現實.由于響應式Web設計較多地使用CSS3布局框架、即彈性布局和流動布局,使網頁在適應不同終端分辨率上、在網頁元素的重新組合中得到了保障,因此網頁顯示也就有了“隨機性”的特點,網頁頁面也就有能力自動響應用戶們的各種設備環境并且兼容多個終端而不再為每個終端做一個特定的版本(圖1、2、3).

圖1 臺式機/筆記本頁面

圖2 平板電腦頁面

圖3 手機頁面

“隨機性”網頁的設計運行,不但保證了信息的順達、畫面的完整,而且還滿足了設計者統一的設計理念和功能服務需求,使用戶完全可以隨意使用自身的終端設備,進而隨處可以達到順意瀏覽、安心體驗的效果.

2.2 內容的“特寫式”顯示

傳統的網頁設計中,小圖片的比例較多,而且零零散散分布各處,導致用戶視覺混亂而無法了解設計者具體需要傳達的內容.為了能使用戶在第一時間了解網站的主打產品或信息,愈來愈多的商業網站頁面開始使用“特寫式”的全屏網頁設計(圖4、5).

圖4 突出眼鏡的廣告頁面

圖5 醒目文字的網頁設計

“特寫式”頁面設計的理念,就是要突出主題,即:展示主體、明顯標題.“特寫式”的頁面設計完全與以往面面俱到的“全景式”相反,能夠提供更為強烈的感官沖擊.而充滿屏幕的全屏設計,對于大屏幕來說,顯然要將這一“特寫式”的視覺效果最大化,而對于手機類的小屏幕來說,也可以清晰展現,一目了然,并以此營造一種感官沖擊效果,把眼光留住、或吸引更多的注意力.

2.3 元素的“動態化”表現

網頁內容元素的靜態呈現與動態表現相比較,顯然動態表現的元素對用戶的吸引力更大,所以網頁上的各種動畫、滾動字幕等視覺上的動態效果設計也就越來越多,形式表現也越來越豐富多彩.一種長篇幅的動態網頁,就是利用“視差滾動”效果的網頁設計方式來實現網頁的動態變化.在分層的頁面上附有插圖與各種配飾小圖形,通過以不同速度移動多層背景,達到一種立體動態的效果,從而帶給用戶以特殊的視覺感受,而對動態元素進行觸摸或點擊,也許就會成為一種自然而然的行為動作(圖6).

隨著jQuery插件和CSS3的不斷優化,不需太多代碼也能制作出效果酷炫的網頁界面上的一些動態元素,以鼠標符號為例,當鼠標移到圖片上就能產生一個轉換、位移、變形等的動態效果或方式.如圖7所示的礦泉水產品宣傳廣告,就很好地利用了這一效果和方式,在水瓶周圍設計了許多水珠,這些水珠可以跟著用戶的鼠標隨之移動,如此逼真的設計效果加強了用戶的體驗感.

圖6 視差滾動的網頁設計

圖7 可移動的水珠設計

2.4 圖塊的“歸類型”展示

Giles Colborne在《簡約至上:交互設計策略》中指出:“把相似的元素放在一起,能夠有效減少視覺上的干擾因素,也不必要解釋它們之間的關系,這樣也可以讓用戶更容易集中注意力”[7].當今,大多網頁設計時都利用“歸類性”的方式,把相似元素集中在一起,加強瀏覽時的信息整合.把圖片或色塊元素有規則地放置一起,看似是一個色塊或是一張圖片,其實當鼠標移動到上面時色塊會被推開顯示圖片,而鼠標離開又會恢復原來的色塊與圖片,并且圖片或色塊背后都蘊藏著內容的鏈接需要用戶去挖掘,起到了替代大量信息文字的功能作用(圖8).

圖片與色塊的切換類似于幻燈片播放效果,這種顯示風格不僅能消除分辨率兼容問題,而且導航欄也易于使用,還可以完美兼容移動瀏覽器.用戶者可根據自己想了解的內容,通過點擊網頁中指示性的箭頭標記,隨意進行前后上下翻閱或點擊動態圖片出現相關信息內容.如圖9:淘寶、唯品會等網購類型的網站,商品都是以表格形式呈現,一件件商品都是整齊排列,用戶者清晰所見,當鼠標移至商品立刻出現相關商品的價格或者尺碼并且商品動態旋轉以便全方位為用戶展示.

圖8 圖片與色塊網頁

2.5 行動的“指示性”標識

加瑞特在其《用戶體驗要素:以用戶為中心的產品設計》一書中指出:網頁設計中的導航設計傳達出來的信息,幫助用戶去理解“哪個有效的選擇會最好地支持他們的任務或他們想要達到的目標”,這也就是為什么在網站中,清晰地告訴用戶“他們在哪兒”以及“他們能去哪兒”非常重要的原因[8].在網頁中設計者設置各種“利用行動或者言語提示”向用戶全面展示網頁蘊藏的信息和服務選項,其目的就是要避免用戶在進出網頁、或在運行某種陌生任務時的那種茫然不知所措的尷尬局面.

由此可見,網頁設計中的行動按鈕應突出顯示和強調視覺線索,使它能夠帶領用戶迅速清晰的采取行動,而各種別具風格的 “指示性”標識設計,正是能夠明確提示和告知用戶進入下一場景或眼下的具體位置.如圖10所示的是該網頁利用卡通手指來指示用戶應該點擊哪兒,下一步該如何做等.再例如,登陸郵箱頁面或者在進入某些需要注冊的網頁時,在登陸選項的旁邊都會設計一個“忘記密碼”的提示圖標,來提醒用戶者忘記密碼該怎樣解決.

圖10 “卡通手”標示指示

圖11 “ 隱身性”導航欄

2.6 瀏覽的“隱身性”導游

橫跨頁面頂部、或位于左右的側邊、或底部的導航欄,稱之為“頁面導游”.導航內容順序或垂直排列或橫向分布,用戶點擊相對應的導航內容時頁面將自動滑到相對應的版頁,甚至用戶在瀏覽頁面時有的導航欄還會一直跟隨頁面移動,便于隨時切換人們所需的版面信息.用戶觸碰某一項菜單時便會彈出相關鏈接的二、三級菜單信息,鼠標離開時這些繁瑣的條條框框便會消失隱藏起來,時刻方便用戶的互動與體驗.如圖11所示,鼠標懸停在側邊時導航欄即可出現.

導航欄的設計可以說充滿著互動性:當人們向下拖動,網頁上的導航欄會自動隱藏;而當用戶再次向上拖動,導航欄則會重新出現.當用戶專注于他們非常感興趣的內容時,看似多余的導航欄就會隱身而去;而當用戶想更換瀏覽內容時,導航欄將會再次現身.這種“隱身性”導游,既提升了瀏覽上下文的連貫性(聚焦內容本身),也增加了屏幕的空間范圍.動感的導航設計與簡潔界面所產生強烈對比,作為一個視覺元素和服務功能,非常有效地加強了用戶繼續閱讀的興趣或持續關注的熱情.

2.7 網頁的“自助式”空間

圖12 用戶者可選擇背景音樂網頁設計

設計者為了充分發揮使用者的主導性,因此在網頁上添加了自定義一欄,不管用戶訪問的是什么類型的網站,它都是一個“自助式”的產品.人們可以設計屬于自己的網頁,從背景色彩到界面設計,從想要瀏覽的信息內容到烘托情感的背景音樂.用戶根據自己喜好搭配想要體驗的要素,從而增強其互動體驗感.

如圖12所示的咖啡網站的首頁,就打出主旨標語:再現的一個咖啡館環境的聲音,來提高你的創造力并且幫助你更好地工作.在頁面左側設計了播放各種場景環境音效(清晨街邊雜音、午餐休息室、校園內等)用戶可以隨意選擇這些環境聲激發用戶者的創造力,也更易于他們沉浸到工作中.

3 網頁互動設計的發展趨勢

大數據時代的到來,使互聯網成為人們獲取信息和交流感受的主要平臺.人們通過互聯網去實現自己的要求、意愿和目標已不再是幻想,而是成為了一種可能和現實.可以說,互聯網已經逐步滲透到人們學習、工作、娛樂等的方方面面,并對人們的事業、企業的發展和社會的進步產生了前所未有的影響.社會的推進需要網絡的伴隨和同行,人們的生活也同樣需要網絡的關懷和陪伴.這種“以信息化帶動社會進步、以社會進步促進信息化”的科學發展愿景,將會全面提升今后網站的改革和創新.

3.1 “人性化”體現將是網站建設的核心

網站的建設無外乎:策劃創新、界面友好、營銷合理,但其中的“界面友好”,將決定網站建設是否成功建設的關鍵.施奈德曼·普萊薩特曾說:“設計是為人服務的,人性化設計是以人為中心和尺度,滿足人的社會需要與情感需要”.由此可見,“界面友好”型網頁的設計不但要在信息傳遞的正能量上加以強化,并且還要在以人為本的理念上加以重視.

如今,人機交互的研究重點已放在了智能化交互、多模態(多通道)和多媒體交互、虛擬交互以及人機協同交互等方面,也就是“以人為中心”的人機交互技術層面.它促進了新時代網頁平面設計的變革,改變了以往用戶只能單一或被動接受的狀況,并使用戶能夠參與到網頁的互動中.而在此基礎上,未來的“界面友好”設計將會更加關注廣大使用者的行為和情感,用戶的需求和感受將會成為今后產品開發和網頁設計的一種服務意識和自覺要求,而生動、誘人的互動體驗也將會更加吸引用戶的參與與合作,并以此體現網站對用戶的誠意和熱情.

事實上,“界面友好”就是一種以人為本的聯系媒介,它是企業的形象、公司的代言,而它所具有的呈現方式就是方便、實用、快捷、時代氣息強烈的藝術創新設計,它在滿足用戶指尖輕輕點擊的同時,大量運動的動態交互界面也在指尖的移動間得到信息釋放、畫面展現以及感受反饋,進而為用戶的積極參與提供信息分享、情感交流的互動平臺和體驗空間.

3.2 互動特色將是網站追求的目標

對網站的內容信息而言,層面上的全面展現和層次上的深度揭示,往往取決于網站對使用者的友好程度和吸引力,它集中反映在包括頁面色彩、排版構圖以及交互鏈接等的互動設計上.而對使用者來說,由于他們在經歷和參與后的那種體驗感受和感觸,將會對網站的能力做出相應的評價,而這種評價顯然會對企業產生一定影響,因此Jesse James Garrett就特別強調:“在網站上,用戶體驗比任何一個其他產品都顯得更重要”.而從這種體驗重要性也折射出網站應具有的那種自身特色,那種不同于其他網站的互動特色.一般而言,互動特色可以根據產品的特征、信息的結構進行開發設計;也可以針對軟件技術和互動插件進行潛力挖掘;還可以通過環境因素、氛圍條件進行藝術創造.互動特色是網站的一種優勢體現,是有別于競爭對手的一個核心競爭力.

3.2.1 根據產品特征、信息結構進行開發設計

當大型真人相親類節目搬上電視銀幕時,各種綜藝類真人秀節目如雨后春筍般不停地冒出來,其中紅遍大江南北的親子類真人秀節目《爸爸去哪兒》,在滿足了觀眾對明星與子女之間的情感故事的好奇心后,該節目竟然還衍生出一系列產品,例如:相關網絡游戲、生活產品等.

圖13 互動游戲設計

這一事實也再次證明,孩子的成長始終是關注的重點,而作為相關兒童類網頁的設計也將理所當然地肩負起孩子成長的責任.因此在網頁互動設計上不僅要更多體現孩子們的特點,而且還要迎合孩子們的興趣,開創游戲化的創新設計和互動測試,吸引孩子和家長們一起去參與和觸碰,從而大大提高網頁互動的趣味和樂趣,使孩子在參與中增長知識、在點擊觸碰下快樂成長,也使孩子和家長之間的感情更加親密、更加融洽.如圖13所示的就是一款吸引兒童的網絡知識游戲頁面.

3.2.2 針對軟件技術、和互動插件進行潛力挖掘

“my own bike——我的自行車”網站充分讓用戶互動體驗了一把.在網頁中間擺放了一輛商家已經搭配好的自行車雛形,而在自行車雛形的每一個部件上都有指示標記顯示,當人們點擊標記時便出現商家提供的各種款式、色彩的配件,用戶可以從中選擇并搭配出自己的自行車而價格也隨之更改(圖14).

圖14 商業網站提供的產品雛形及款式與顏色的選擇

這種與用戶利益直接相關的獨特互動方式,顯然得到了用戶和消費者的歡迎,它也將為那些類似于組合型產品提供了網頁互動設計的范本,并在此基礎上將會有所提高和加強.

3.2.3 通過環境因素、氛圍條件進行藝術創造

當今,化繁為簡的設計思想已逐漸為人們所接受,而崇尚簡約也將成為未來網頁互動設計的主要方向.作為簡約或單純的設計其實是多個方面.

眼下,一縷按鈕的“清新”之風,正在觸摸屏網頁上吹拂.不設底色、不加紋理,薄如蟬翼的線框按鈕,在確保功能屬性的同時,還顯示出薄透的那種“清新”的視覺美感.

同樣,在單頁網站超長滾動獲得用戶好評的情形下,更多留白空間與快速響應技術合并而成的超長、超寬網頁設計將是發展趨勢.這樣的設計能夠將復雜的東西濃縮簡化,使內容組織更加有序,格式顯示也更趨于合理,也使人們可以在移動手指間獲取信息.

簡約的扁平化設計可以說是去繁就簡的設計美學.實際上,去掉所有裝飾性的設計,就是對之前所推崇的擬物化設計的一種回歸.扁平化設計所丟棄的某些效果,或許能使表現元素獲得更為直觀、簡單、純真的視覺感受.扁平化設計的目的就在于以最簡約的方式,分配和表現網頁中的內容信息,并引導客戶直抵目標內容,避免由于內容過多而產生的主題不明、焦點分散的問題.

4 結 語

互聯網平臺使網絡設計者和網絡使用者走到了一起,而網絡的互動又使設計者和使用者聯系在了一起.他們彼此的距離,正是通過互動設計的情感關懷而被縮短;他們相互的溝通,也正是在觸摸點擊的互動交流中得到強化;諸多網頁的拓展設計、表現手段和藝術美感,更是在發揮廣大用戶主觀能動性的互動協同參與中得到功能釋放、效果顯現以及各種體驗的實現和完成.正如有人所說的那樣:“互聯網本身是原始的,枯燥無味的,是人類通過這個開放的平臺分享他們的一切才變得多姿多彩”.

參考文獻:

[1] WOODS S. HTML5觸摸界面設計與開發[M].北京:人民郵電出版社,2014.

[2] 鮑勃·戈登,麥琪·戈登.數碼平面設計指南[M].合肥:安微美術出版社,2007.

[3] 韓高路.網絡藝術設計[M].沈陽:遼寧美術出版社,2011.

[4] 曹田泉.新媒體實驗藝術與設計[M].長沙:湖南美術出版社,2010.

[5] 卓嘉.體驗式展示設計[M].重慶:西南師范大學出版社,2013.

[6] 吳旭剛,羅穎.物聯網時代的自然交互設計[J].設計藝術研究,2013,3(5):5-8.

[7] COLBORNE G.簡約至上:交互式設計四策略[M].北京:人民郵電出版社,2011.

[8] GARRETT J J.用戶體驗要素:以用戶為中心的產品設計[M].北京:機械工業出版社,2011.

[9] HOEKMAN R J R,SPOOL J.網站設計解構:有效的交互設計框架和模式[M].北京:人民郵電出版社,2010.

[10] 郭曉寒,何雨津.互動媒體藝術[M].重慶:西南師范大學出版社,2008.

[11] HOEKMAN R J R.瞬間之美_WEB界面設計如何讓用戶心動[M].北京:人民郵電出版社,2009.

[12] KADLEC T.響應式web設計實踐[M].北京:人民郵電出版社,2013.

[13] WEINSCHENK S.設計師要懂得心理學[M].北京:人民郵電出版社,2013.