淺談交互設計對網頁設計的流行趨勢影響

宋振源

摘要：互聯網交互設計已然成為現在炙手可熱的焦點話題，設計師準確的把握住觀眾的喜好，在多變的設計風格中總結歸類出現在人們最喜歡的交互設計風格，將設計風格與瀏覽信息的功能性完美結合，打造出新的視覺刺激和閱讀體驗。

關鍵詞：交互設計；網頁設計

交互用在人和界面之間的瀏覽、點擊、切換使之方便、快捷、平滑，好的交互是使用戶依賴，能使產品長久留住用戶。視覺則是人的眼睛看起來舒服、舒適，讓用戶驚喜，讓用戶愿意去嘗試。網頁則是一個產品類型，同時需要用到交互和視覺來是此產品更好地宣傳需要展示的內容的載體。成為交互的話需要把握產品受眾人群的心理，了解產品的特性，以及要有新穎的創新思想，能想到讓人一亮的讓人用起來更舒服的點子。

交互設計與視覺設計他們本身可為是相互相成的關系。不同的地方是各自的側重點不同。交互側重與人的心理認知過程和各方面的習慣及心理感受。視覺設計側重與頁面的美感，視覺效果。這就需要一個優秀的網頁設計。

一、響應式設計日益成熟

就在幾年前，提起“響應式網站”，還意味著它的適配平臺僅限于桌面，平板和智能手機等客戶端。隨著智能手表，智能電視和其他智能家用設備的迅猛增長，響應式設計的定義也得到了極大的擴展。

很多大公司近幾年著重推進響應設計的研發進程。如google前些時間推出的moto 360，以及蘋果推出的iwatch，三星、LG、華為都推出了自家的智能手表。這標志著未來在2015年智能可穿戴設備將超過手機發展勢頭，隨之而來的就是全面革新的響應式設計闖入生活，未來的生活方式將更加有趣。

二、幽靈按鈕

幽靈按鈕就是隱藏形式的按鈕，不破壞整體的畫面感，保持了畫面簡潔，統一，但又不失功能性。可以說是2015年在流行簡約、背景大圖的一大必然趨勢。

三、更強調字體

出現這一趨勢主要有兩個方面。首先傳統的一些Web字體價格昂貴，意味著網站排版需要更多的預算。如今，這種情況在改變，設計師只要更少的預算甚至免費的字體就能在網頁上自由設計。另外，在流行的簡約風格下，背景基本都是缺少故意裝飾的圖案，部分網頁只有背景和文字，有時會缺乏整體的設計感，所以更大的標題文字能使畫面更具沖擊力，主次分明，使人印象深刻的同時又不使畫面顯得凌亂。

四、滾動主導點擊

移動互聯的不斷發展，刷新了移動終端的使用頻率，人們越是依賴手機等設備就是越是促進移動交互的設計，所以，更加方便的滾動逐漸主導點擊，成為移動交互的新寵兒。

五、卡片式設計繼續

隨著信息處理能力的增強，部分以堆加信息的設計邏輯依然能存活。這里就有典型例子，卡片式設計。不同于其它走簡約的信息分類，它直接醒目的將各個內容圖片鋪開放在一起，這樣做的好處是，用戶篩選信息快速、方便，不用進入下一級就可以基本全部了解信息。例如，微博和視覺中國的圖文信息排版。

六、扁平化繼續（或者Material Design設計語言崛起）

扁平化是google最新推出的設計方向，它的另一個名字是材料設計（Material Design）。之所以這么稱呼，其實在于google的設計師想追求一種原始干凈的設計思路，把三維的空間簡單化，把二維的空間復雜化，使畫面具有扁平的動勢。拋開影響人深度思考的慣性邏輯，使UI、圖片簡單并且具有物體的動態象征性。如圖3-2

這一設計語言有種靈氣，簡單脫俗。在層次感和動畫上保存真實的動態有型的世界，同時簡化了物體的體積的造型感。

這樣靈動的設計氣質，使的很多大公司爭相研究，如蘋果從ios7，谷歌原生UI，微軟win8界面。扁平化在大公司開疆帶領下必將在未來風光無限。

當然，扁平化不僅僅是停留在UI設計層面上，很多網站都運用了這一設計語言，如蘋果官網，字體靈動但是毫無體積感。

除了審美上的需求外，扁平化也是技術上的突破。它的到來使圖片和文字的壓縮量減少，帶來的就是更加流暢的用戶體驗。這樣零點幾秒的體驗提升，帶來的是用戶不自覺的接受并且慢慢成為習慣，直到最后難以折回。視覺和功能上的完美體驗，如同每次打開的都像是卡通畫，精致耐看。

七、微交互

微交互就是一個小小的智能系統，例如，你在打開天貓或者京東等購物網站的時候，網站通過你個人經常瀏覽的信息進行處理，彈出一個你想買的東西的窗口。這種交互方式使人感覺網頁十分只智能、親近。雖然小小改變足使人感到貼心，所以它會是將來發展比較好得交互方式。

八、交互式故事

比起長篇累牘的文字介紹，放一篇生動的故事更能捉住讀者的眼球。在未來，這樣貼近生活的交互模式下，泛濫成災的長篇文字早已超出人們閱讀的耐心，所以微博才會限制字數在140字以內，多數網站如特斯拉，蘋果等更喜歡用簡短的文字講故事或者干脆放上精彩的廣告視頻，這樣既節約了讀者的時間，也在瞬間取得關注。

九、愈大愈佳的圖片

文字越來越大是因為強調主題，穩固整體結構。那么越來越大的圖片就表明了，科技進步帶來的信息產業飛速發展，之前因為帶寬較低，大圖基本不可能出現在網頁上，而今不同，大圖標志著更具簡約時尚，是一個成熟網站設計的標志之一。

大圖不僅方便取材，更方便設計師的加工和修改。通過色彩濾鏡和模糊透鏡，劃分層次，降低圖片背景的關注度，強調題目文字，使得文字有一種懸浮于背景之上的新的視覺觀感。

除此之外大圖還有個好處就是，可以很好的結合之前所提到的如垂直滾動、扁平化、幽靈按鈕、故事內容等等交互模式相結合，打造出多層次、多體驗感受、多視覺沖擊的全新交互設計。

這里依然拿蘋果做例子，因為他是無數設計師的榜樣產品，無論是工業設計，廣告設計，UI設計，系統設計等等都是最好的，我認為沒有之一，是綜合實力最強的。在瀏覽它的官網可以看出，蘋果一直在不斷的完善自己的設計風格，一直在追求極致的簡單、大氣、精致的品牌和設計理念。我覺得這是一種幾乎變態的追求完美，雖然設計是具有時效性的，但是蘋果的每個產品都是那個時期最優秀的，就算過時依舊精致。這個傳奇的企業嫻熟的掌握各種設計語言，其中的大圖模式僅僅是他們冰山一角。

十、更為自由的排版方式

網頁設計的排版方式一直是設計師們討論的話題，自2006年以來，固定網頁文字格式的排版已經在慢慢變化了，設計師的思維早就想把枯燥的文字格式重新設計，但是由于當時綜合技術層面上的原因沒有成功。但是現在不一樣了，響應式交互使得排版方式不得不發生改變，更自由的排版方式更能博得讀者的好奇心和關注度。

網頁設計中，影響讀者文字閱讀體驗的三個重要因素是：1.字體大小2.列寬3.行間距傳統web瀏覽中，較大的字題和適當的行距可以明顯提高閱讀感受。但是，多互聯響應式的到來，移動終端的閱讀瀏覽量已經遠大于PC，所以新的排版不見得就是運用原來的方法。手機和平板使用的距離較近，有時并不需要較大的字體用于凸顯，相反在小屏幕上營造空間感才是新的排版方向。

十一、網頁圖表迎來新曙光

人作為視覺性動物，對于圖片信息的接受能力遠大于文字信息，所以在碰到需要大量數據做案例的文段時，圖表的優勢就很明顯的體現出來了。圖表不僅能使人快速理清邏輯、數據等信息，還能使大腦有長期而清晰地記憶點。更重要的是，結合多種動畫設計，圖表會更加生動，更有說服力。

現在網頁圖表已經慢慢流行，相比普通圖表，它具有互動性，他可根據網絡數據的變化而隨時變化，加上鮮明的色彩、簡單的樣式以及多層次的動畫，使的他更具有關注點。數據舉例不再冰冷，更多的網頁喜歡拿可靠、生動的數據說話了。

未來網頁設計將是各個設計門類的綜合體，所以我們更應該將平面設計知識運用在網頁設計中去，設計師應該是具有智慧的工匠人。

【參考文獻】

[1]郗鑒 .界與面-移動網站設計經驗談 [J/OL].uehtml（1）[2015-02-20]. http：//www.uehtml.com/post/26101/

[2]《網頁設計 》陳東生 ISBN：9787508841847[2014-5-1].