概念

　　web 端的交互即觸發(fā)到呈現(xiàn)的過程。用戶可以使用交互設備進行事件觸發(fā)或變量，頁面則將內(nèi)容進行對應的呈現(xiàn)。其中交互過程主要影響的事件由“可交互的元素“、“功能交互“、“轉(zhuǎn)場切換“構成。

　　頁面內(nèi)容呈現(xiàn)通常分為“默認時“、“選擇時“、“運行時”三個時態(tài)(鼠標短暫的點擊時屬于“選擇時”，若長按有內(nèi)容影響則屬于“運行時”)，因此在網(wǎng)頁交互的過程中，我們需要考慮好這三種完整的狀態(tài)時呈現(xiàn)形式，另外在考慮補充合適的動效進行過濾或信息反饋。

　　內(nèi)容呈現(xiàn)結構

　　一般來講這些頁面結構可以分為以下六類：

　　1. 上下長屏滾動結構：通過長頁面布局內(nèi)容，頁面滾動查看信息

　　2. 全屏上下切換結構：每次定焦一屏的范圍顯示內(nèi)容，通過滾輪或按鈕上下切屏

　　3. 全屏左右切換結構：同樣是定焦一屏顯示內(nèi)容，但采取左右切換結構

　　4. 全屏頁面覆蓋結構：基于全屏定焦顯示，頁面通過覆蓋式切換或跳轉(zhuǎn)，甚至鼠標滾輪深入或淺出頁面。

　　5. 自適應平鋪結構：適用于頁面模塊小而簡單的時候，直接將模塊在屏幕內(nèi)一個個展開即可，一屏放不下時可以換行或繼續(xù)平鋪并定焦

　　6. 三維場景結構：將內(nèi)容場景3D 化，通常導航或部分 UI 控件會在屏幕上固定，然后可以采取定向鏡頭伸縮查看，也可以是環(huán)繞中心與自由移動查看內(nèi)容信息

　　網(wǎng)頁的組成區(qū)塊通常分為五大類型，即導航、面包屑、背景、內(nèi)容呈現(xiàn)、彈出框。菜單導航欄通常分為頂部導航、側邊導航、底部導航、組合導航四大類，也有個別是通過點擊彈出的導航。內(nèi)容布局則更是五花八門了，是板式與技巧的呈現(xiàn)了。

　　常見變化形式

　　位置變化、透明度變化、角度變化、大小變化、形狀變化、顏色變化、翻轉(zhuǎn)效果、特效變化

　　7種視覺層創(chuàng)意形式

　　1. 幾何色塊搭配文案，色塊搭配標題文案，簡約大氣有視覺沖擊力　　

　　2. 精美大圖背景搭配內(nèi)容，采用精美大圖背景搭配文案或交互控件，精美的圖片本身就很搶眼，再搭配標題大字，瞬間就使得頁面有沖擊感有層次，常見于游戲官網(wǎng)或活動專題

　　3. 關聯(lián)插畫或圖標搭配文案，采用小范圍的插畫或圖標來表達服務或產(chǎn)品優(yōu)勢，搭配文案說明，風格統(tǒng)一精致耐看。常見于服務描述或產(chǎn)品說明模塊應用

　　4. 留白大圖搭配文案，將某個產(chǎn)品或其他元素放大顯示再結合極簡的排版說明，有較好的視覺沖擊力和產(chǎn)品凸顯效果，同時留白保證呼吸感和減少視覺噪點，使得用戶能夠更加專注產(chǎn)品圖

　　5. 動態(tài)的背景或微動效裝飾，應用動態(tài)背景或微動效的元素裝飾，有較好的內(nèi)容吸引力或氛圍渲染力，可以展現(xiàn)更多的產(chǎn)品細節(jié)或豐富畫面層次感

　　6. 點線面裝飾與文案排版，應用簡單點線面元素去裝飾界面，再結合有對比有版式的文案排版。頁面簡潔美觀，適合簡約干凈少圖的頁面模塊

　　7. 柵格化應用與板式跳躍率，應用柵格化與版式跳躍率，使界面整體充滿平面藝術，富有節(jié)奏感且不顯凌亂。

　　9種交互層創(chuàng)意形式

　　1. 光標跟隨動畫

　　會使頁面上的元素根據(jù)光標的位置或移動產(chǎn)生相應變換，增加頁面的互動性與趣味，適用于裝飾或加強背景層次感

　　2. 鼠標懸浮動畫

　　簡單易用的鼠標懸浮動畫，用于聚焦顯示或說明，常用與內(nèi)容選中狀態(tài)區(qū)分或元素細節(jié)展示，加上一組好的動效創(chuàng)意非常能夠凸顯個性，使用戶感到驚喜為體驗加分

　　3. 鼠標點擊特效

　　由鼠標點擊進行觸發(fā)，基本樣式即點擊狀態(tài)顯示，觸發(fā)后的特效可以是圖標動畫、光效、音效、界面動畫等，游戲場景中較為常見，點擊后不僅有光效反饋還有音效附和，這是一種觸發(fā)反饋效果。

　　4. 鼠標滾輪巧妙的聯(lián)動效果

　　主要用于頁面某個值的控制或頁面滾動，在頁面滾動的時候可以配合控制元素變化來實現(xiàn)更具創(chuàng)意的展現(xiàn)效果，通常元素透明度、位置、大小、序列圖都可以控制

　　5. 鼠標選中自動展開

　　鼠標經(jīng)過選項時自動展開選項并聚焦，可以省去鼠標點開的動作，但不適用于選項內(nèi)容較多且內(nèi)容密集的場景

　　6. 按鍵與鼠標配合觸發(fā)

　　通過指定按鍵和鼠標配合交互進行觸發(fā)，適用于同界面的復雜交互場景，且存在某些變量需要鼠標控制。

　　7.大圖或多圖輪播應用

　　精美的圖片總是想要放大看，看了還想看。運用超大的輪播圖展示與沉浸式功能布局，滿足用戶操作與大圖賞析

　　8. 內(nèi)容穿插滾動

　　運用特殊的圖層順序結構，在頁面滾動查看時，形成奇妙的元素穿梭視感。通常會穿梭替換背景或讓元素接力，這樣相比靜態(tài)寫實的頁面滾動時會更有層次感

　　9. 按鍵交互效果

　　將某些功能或任務引用按鍵進行交互或觸發(fā)。常使用字母、數(shù)字、空格、方位鍵，界面需要有提示對用戶進行指導。

　　交互思路

　　結合信息框架對不同元素類型進行視覺設計調(diào)整后，再對頁面內(nèi)容的基本交互進行考慮，例如輪播、切換、彈出、展開收起、轉(zhuǎn)場等。之后才是更加細膩的交互創(chuàng)意思考。

　　基本交互發(fā)力點

　　·鼠標經(jīng)過反饋：常見且重要的交互方式，通過鼠標經(jīng)過時反饋選中狀態(tài)或提示相關信息

　　·按鈕點擊反饋：在鼠標點擊后，按鈕或控件的顏色形狀變換效果，用于反饋點擊成功，實現(xiàn)眼手體驗一致

　　·按鈕長按效果：長按狀態(tài)的動效示意，通過對長按目標加動畫響應進度或持續(xù)的狀態(tài)，而非單純的變色或樣式切換

　　·完善 Loading 動畫：如點擊上傳下載更新等，出現(xiàn)對應進度條或loading 動畫幫助用戶完善體感

　　·內(nèi)容入出場動效：頁面切換加載或滑動頁面后，內(nèi)容采取動效有序的進入場景定格，而非生硬的靜態(tài)切換

　　·多內(nèi)容輪播應用：對Banner 或其他多個內(nèi)容展現(xiàn)，進行輪播交互完善和時間細節(jié)控制

　　錦上添花交互發(fā)力點

　　·按鈕切換動畫：通過icon 的路徑動畫表達按鈕切換，而非直接的圖標對換，更具個性和視覺觀賞性

　　·鼠標跟蹤動畫：可以適當?shù)淖鲆恍┦髽烁櫴录?，讓一些背景或界面元素跟隨鼠標律動起來，增強互動

　　·特殊滾輪聯(lián)動效果：通過鼠標滾動聯(lián)動其他元素進行交互變化，來呈現(xiàn)更有創(chuàng)意的場景切換或內(nèi)容展示

　　·內(nèi)容穿插滾動：將內(nèi)容分層控制，頁面滾動時將元素固定或交替顯示，產(chǎn)生穿梭感提升界面層次

　　·響應式展開收起：主要用于二級或下級內(nèi)容的自動展開，由鼠標經(jīng)過自動展開并聚焦，減少用戶操作

　　·內(nèi)容或窗口抖動報錯：合理采用抖動效果進行報錯反饋或特殊場景應用，使呆板提示更靈動