概念

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

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

　　內(nèi)容呈現(xiàn)結(jié)構(gòu)

　　一般來講這些頁面結(jié)構(gòu)可以分為以下六類：

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

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

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

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

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

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

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

　　常見變化形式

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

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

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

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

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

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

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

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

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

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

　　1. 光標(biāo)跟隨動(dòng)畫

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

　　2. 鼠標(biāo)懸浮動(dòng)畫

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

　　3. 鼠標(biāo)點(diǎn)擊特效

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

　　4. 鼠標(biāo)滾輪巧妙的聯(lián)動(dòng)效果

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

　　5. 鼠標(biāo)選中自動(dòng)展開

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

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

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

　　7.大圖或多圖輪播應(yīng)用

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

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

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

　　9. 按鍵交互效果

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

　　交互思路

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

　　基本交互發(fā)力點(diǎn)

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

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

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

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

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

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

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

　　·按鈕切換動(dòng)畫：通過icon 的路徑動(dòng)畫表達(dá)按鈕切換，而非直接的圖標(biāo)對換，更具個(gè)性和視覺觀賞性

　　·鼠標(biāo)跟蹤動(dòng)畫：可以適當(dāng)?shù)淖鲆恍┦髽?biāo)跟蹤事件，讓一些背景或界面元素跟隨鼠標(biāo)律動(dòng)起來，增強(qiáng)互動(dòng)

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

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

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

　　·內(nèi)容或窗口抖動(dòng)報(bào)錯(cuò)：合理采用抖動(dòng)效果進(jìn)行報(bào)錯(cuò)反饋或特殊場景應(yīng)用，使呆板提示更靈動(dòng)