網站設計新趨勢：沉浸式交互設計

 

 

時間的車輪滾滾向前，不斷的改變咱們對世界的認知，一些網站和App從大紅大紫到門可羅雀也許只須要幾個月的時間，可是每一次一種舊技術的終結，也就意味着一種新技術的興起。

如下是我搜集的曾經受到用戶熱捧的現代交互設計技術，這些技術有些確實很是新奇，有些只是對舊思想的一些改進，可是無論怎樣，這些技術會幫助你走在時代的前列，遇上世界前進的步伐。

一. 動畫和過渡

一說起交互設計，咱們就會想到一個時下最流行的概念，那就是動畫效果，從一個炫酷的懸停到一個全屏化的卡通動漫背景，都屬於動效的範疇。

對於交互設計來說動畫效果並不稀奇，它們流行的真正緣由可能和HTML五、Javascript和CSS有關，在Flash時代作動畫效果是一種很奢侈的設計（哇塞，這個圖標會反彈），可是如今它們卻成爲設計必不可少的一部分（嗯？這個圖標不反彈嗎?!）。

Photocredit:http://gaetanpautler.com/

動效不只可以在視覺上吸引用戶，還在界面切換的過程當中扮演着重要的過渡角色，由於界面切換是把各個動效鏈接起來的紐帶；用戶是如何從一種狀態轉換到另外一種狀態的？在每一種狀態下應該告訴或要求用戶如何操做？一個高明的切換效果能夠絕不費力的解決以上兩個問題。

在用戶體驗良好的界面中，動效經過幫助用戶瞭解如何與界面產生交互，從而起到一種承上啓下的做用；（請注意，當人與界面交互時，一些新的技術或是交互方式也許會讓用戶感到不天然、陌生或是延時）動效對於長時間登錄的用戶來說也是一種明智的選擇，由於它能夠暫時的分散用戶注意，減輕用戶視覺壓力，讓用戶長時間的保持良好的體驗狀態。

動效對於框架設計來說也是一種不錯的選擇，在最佳的交互設計案例中，如下五種功能很是重要：

1.動效提醒（Animated notifications）
2.信息呈現（Revealing information）
3.內容強調（Highlighting content）
4.摺疊式的表單和菜單（Collapsing forms and menus）
5.滾動動效（尤爲是單頁網站）（Scrolling, especially for one-page websites）

當交互開始的時候，連續的影片式的動效是整個交互過程的關鍵所在。用戶一般喜歡電影風格、高清晰度和像素級別的設計，著名的迪斯尼動畫家Frank Thomas和Ollie Johnston’s概述的12條動畫設計原則在今天依然適用，這12項基本原則應該做爲將來動效設計的基礎。

二. 敘事性交互（圖片網站）

儘管社交媒體的分享模式讓信息可視化做爲一個視覺信息媒介的做用飆升，可是網站平面設計的做用和交互設計同等重要，在網站中平面設計板式並非隨處可見，然而咱們依然能夠從中學到不少交互設計的知識。圖形的設計方法和圖片網站的設計方法很是類似，圖片網站也使用HTML五、CSS3和jQuery等工具經過色彩、文本、和流暢的動畫去傳遞交互體驗。

Photocredit:http://www.psd2html.com/10-years-in-review/

圖片網站這個詞是Venture Beat科技博客網站在2013年創造出來的，它一般要求用戶去執行一個動做，在操做過程當中得到完整的故事情節；這些動做有的時候會很是簡單，好比一次輕微的點擊，有的時候會相對的複雜，好比打字或是觸摸屏幕上的圖片。

圖片網站真正的強大之處在於他們可以輕鬆的整合用戶的行爲，與信息可視化網站不一樣，你能夠把圖片網站設計成一種「山外青山樓外樓」的用戶體驗，這種設計可讓用戶徹底沉湎其中，在用戶體驗的過程當中提供相關連接和信息可讓提供的內容更具備說服性。

Photocredit:http://www.irwinmitchell.com/safety-on-the-slopes.html

例如，上面這個「Safety on the Slopes（讓滑雪更安全）」的廣告標語界面，就是圖片網站一個很好的例子，這個網站把相關的信息、地圖、視頻、事件和成員整合到一塊兒來講明冬季運動具備危險性，若是不用圖片網站的形式來呈現這些內容，那麼你就會以爲這些知識就像蒼白的講座同樣無聊。

的確，圖片網站沒有用口號去呼籲你採起行動，也沒有經過微妙的暗示讓你去操做某些東西，但事實上這些動做和行爲已經被實現了。例如，假設這個網站是一個戶外運動裝備的零售商所建立的，他把這個網站做爲季節性促銷活動的一部分，這時你就能夠嵌入一些說明冬季運動具備危險性的產品或產品連接，從而表達冬季運動具備危險性的主題。

咱們知道並非每一個人都有足夠的資源去創建一個獨立的交互式圖表（無論是在他們本身的網站中仍是設立一個獨立的URL），可是你確定能夠利用信息可視化的一些技術讓網站感受起來更逼真。

Photocredit:http://humaan.com/about/

例如，滾動觸發動效在信息可視化的交互設計中很常見，可是像上面Humaan（見上圖）這樣的去體現團隊合做和扁平化管理的網站也會用到這樣的技術。

Photocredit:https://houseofborel.com/

House of Borel（上圖）是一個流行奢侈品品牌網站，它給人們的感受更像是在講述一個互動性故事的網站，而不是一個傳統意義上的網站。下面是一個體現信息交互元素的案例：經過滾動觸發視頻播放—這種體驗會引導用戶瀏覽不一樣的章節而且把重點放在視覺敘事方式而不是層級化的導航上；它適用於一些優雅高尚的品牌網站，這種交互體驗會先讓你體會那種優雅高尚的生活方式，而後才慢慢的展示它的產品。

三. 微交互

微交互是一種完成單個任務的瞬間交互事件，好比在iPhone上提醒用戶的鈴聲、登陸網銀或是收藏Facebook上的一篇文章都屬於微交互體驗設計的範疇。

在瀏覽網站或是使用App的不經意間，你也許就已經參與到數百個平常微交互之中，全部的這些微交互加起來就造成了一個完整的用戶體驗。微交互能夠說是最小的交互設計元素，可是做用卻十分重要（聽說快扣（FastCo）設計被稱爲設計的明日之星）。想象一下，若是你不能在幾回點擊以後就設置好用戶名和密碼或是瀏覽網站時廣告彈窗太頻繁，你離開這個網站的速度有多快。

Photocredit:https://www.formlets.com/

Photocredit:http://surpris.es/#url

不管是一個小小的博客仍是一個大型的全球電子商務網站，這些微小的交互幾乎都做用於每個網站的核心功能：

•    執行任務—這種交互包含簡單的動做，好比登錄到界面、添加更新狀態、設置鬧鐘等等。

•    元素連接—在兩臺設備或是兩個網站之間同步兩個相同的元素以創造一種微觀的交互，不論這種同步模式是設備之間經過多人模式同步仍是經過APP同步，或是簡單的經過藍牙耳機和手機同步，都屬於元素連接的範疇。

•    作調整—任何網站功能設置的變化（好比把某個APP調爲靜音狀態或是把音樂播放器的音量調低一點）和相應的視覺或是聽覺的反饋都會造成一種微交互，有些微交互很是之小，以致於用戶在操做的過程當中根本感受不到，這也是爲何在微交互設計的過程當中須要格外的當心，要讓人們感到有足夠的反饋而又沒有任何被強迫的感受。

•    狀態調節—把一個網站或者某個功能打開或關閉從而改變他們的狀態實際上就是一次微小的交互。

•    獨特的數據交互—數據交互指的是得到實時的用戶數據（好比查看當地天氣或者交通情況），這個數據是你執行某個動做產生的結果，打開一個應用程序或者檢查一個帶有定位功能的網站都會產生相應的數據。

每一次操做都會啓動以上的某一行爲，用戶都是經過在網站或者應用程序上的一些操做來啓動程序的（即便是繼上一步以後）。上述的這些原則都是按照用戶的「行爲召喚」模式進行設計（交互設計原則—將要發生什麼和如何發生、用戶的反饋—執行操做仍是不執行操做、發生的方式—偶然發生仍是重複發生），一旦交互開始，每個微小的細節都成爲整個設計規劃的一部分，若是想了解更多的微交互的知識，咱們強烈推薦您訪問DanSaffer這個網站。

四. 層級關係

創造一種使人着迷的交互體驗不是簡簡單單的把功能添加到網站上就能夠了，須要有計劃的去實現，這不只須要分層的設計技術還須要對用戶的流量和行爲習慣瞭若指掌；而若是可以把視覺透視、長軸滾動和背景視頻等技術結合起來，你的設計就能夠從視覺上吸引並留住客戶，可是這種技術要注意不要用過火了，一個糟糕的設計和和一個有精細層級關係的僅有一線之隔。

如下咱們推薦三個良好的層級佈局的網站，這些網站充分的詮釋了沉浸式交互設計的內涵：

i.    AIGA 100 Years of Design

設計這個「100 Years of Design web site（設計百年）」網站是爲了去慶祝網頁設計做爲一種藝術形式已經走過100年的歷史長河，這個網站使用了各類各樣的技術和流行元素，從一個滾動操做到一個漢堡包式菜單再到用戶投稿的視覺設計，每一頁新的界面都包含信息、支持設計理念的動畫效果和進行下一操做的線索(不管是經過導航仍是適用顯示屏上的引導鍵都是如此)。

Photocredit:http://celebratedesign.org/

ii.    Eventbrite Seat Designer

Eventbrite的網上訂票平臺爲用戶提供了一種使人稱奇的工具，這種工具可以爲特殊的地點和活動提供用戶自定義的訂座體驗，而這種服務體驗之前是隻有大的場地才能可以作到的；用戶只需在網站的操做平臺上點擊幾下，就能夠輕鬆的定製本身喜歡的座位排序方式。

Eventbrite的交互界面使用了一種近乎扁平化的設計風格，在界面中大量的適用鮮豔的色彩、易於操做的菜單和流暢的界面轉換動畫效果。

Photocredit:https://www.eventbrite.com/l/reserved-seating/

iii.    Sonoran’s Valley

Sonoran’s Valley網站的特點是爲用戶提供了一種博弈式的體驗，用戶經過輸入一些特定的信息來參與到一場數字的奇幻之旅。這個網站使用了奇妙的動畫、視頻分層以及一種標準化的漢堡包式的導航設計，主界面載入的時候經過一種極簡的設計風格逐漸轉變成一種寬屏視頻播放的設計風格（這個網站能讓你瀏覽幾個小時而樂不思蜀）。

Photocredit:http://sonorans-valley.com/

思惟要超越當前

以上這些網站和技術也許是當今最前沿的設計，可是這些先進的技術在用戶的視線裏又能停留多久呢？永遠保持領先的最好的方法就是思惟領先，仔細的研究用戶需求的演變過程，咱們能夠自信的（不是必然）預測將來的流行趨勢。

許多人都認爲可穿戴裝備是交互設計的下一片藍海，可是可穿戴設備的交互設計有可能會轉向使用更多微妙的觸覺設計，而減小的視覺設計元素，手錶的震動也許比語音提醒或是在屏幕上顯示大的圖片更受人歡迎。

Photocredit:http://cinderellapastmidnight.tumblr.com/

在全部的媒介中，交互設計也許更有可能會像電視機節目同樣變成一種情節式的設計，可是它會保持其數字設計的核心功能。

當你想經過你的設計去幫助用戶達成他們的目標的時候，就像你把用戶的選擇變爲情節的一部分呈如今網站上同樣，固然這種作法並不適用於全部的網站（好比電子商務網站或是銀行網站），可是它必定會在內容流量高度可視化的網站中扮演一個重要的角色，咱們已經見過這種技術做爲一種常見的網頁設計技術用於視頻的背景設計了。

做爲視覺媒介，電視、電腦和手機之間的界限將變得愈來愈模糊，交互設計將會不斷的把視覺元素和環境元素進行融合，震動、聲音和一些必要的操做將會變得愈來愈廣泛，尤爲是爲手機或可穿戴裝備這些具備用戶控制元素的載體設計的網站和應用程序更是如此。

雖然對將來的許多規劃都僅僅是源於猜想，可是用戶的基本特性通常不會變化，好比咱們能夠預見，用戶老是喜歡那種有互動性和參與感的設計，惟一的變化是提供這種互動和參與感的方法會發生變化罷了。