400-611-9921
400-611-9921
2021-07-23
1995
你可能想有創(chuàng)意的交互能為網(wǎng)頁帶來什么？
挺多的，我舉例：一個連微動效都沒有的靜態(tài)網(wǎng)頁你進(jìn)去后也就看見的這樣，那么如果這個網(wǎng)頁進(jìn)去時，內(nèi)容會有入場動效，你是不是馬上能感覺到這個網(wǎng)站有點兒東西，要抄起鼠標(biāo)探索一番？換言之，好的交互創(chuàng)意甚至能讓你產(chǎn)生心流模式，你通過鼠標(biāo)到處點擊，頁面上不斷的給出動畫效果，然后你收獲驚喜，最終促使你進(jìn)行更多的嘗試。
好了，說多了，就是希望為更多設(shè)計師提供設(shè)計思路或執(zhí)行概念，幫助大家找到更多的創(chuàng)意靈感。
首先了解 Web 端交互支持
Web 端交互圍繞計算機(jī)為中心。主要涉及鍵盤鼠標(biāo)兩類設(shè)備的交互，個別網(wǎng)站的產(chǎn)品可能會涉及麥克風(fēng)聲音采集或攝像頭應(yīng)用。
1. 鼠標(biāo)允許的交互
現(xiàn)在的鼠標(biāo)可以支持更多功能，但是通常來講需要嚴(yán)格的考慮兼容問題，所以僅以鼠標(biāo)左右鍵滾輪滾動以及光標(biāo)映射選取為主；
光標(biāo)選中/hover
左鍵單擊
左鍵雙擊
左鍵連擊
左鍵長按
左鍵按住拖拽
右鍵單擊
右鍵雙擊
右鍵連擊
右鍵長按
右鍵按住拖拽
滾輪滑動
以上所有交互都可以根據(jù)實際場景進(jìn)行設(shè)定，不過鑒于用戶習(xí)慣，一般不會用到快速的連擊交互以及右鍵的雙擊、長按或拖拽，這不符合交互手勢的舒適度或簡化易用的初衷。
2. 鍵盤交互支持
鍵盤支持大量的按鍵交互，除去一些全局的功能按鍵和組合快捷鍵，在網(wǎng)頁交互應(yīng)用中常見的還可以分為以下幾種情況；
數(shù)值、字母、符號輸入
某個指定按鍵單擊/雙擊/連擊/長按
用某個指定的或組合按鍵代表網(wǎng)頁上的功能
tab 鍵切換網(wǎng)頁選項
用空格切換下一屏
方位鍵切換選項或移動窗口視角
ESC 退出視頻或全屏查看
在應(yīng)用鍵盤按鍵功能的時候，除去那些作用明確大眾悉知的按鍵功能，其他的按鍵操作應(yīng)該保證界面上有指引有提示。
常見的交互動作組合
組合的交互動作常配合不能簡單直接完成的任務(wù)，這里的組合指有兩個及以上交互動作完成的類型，復(fù)雜的交互動作盡量少用，且盡可能的為用戶提供操作指引，若非必要，費力不討好；
鼠標(biāo)左鍵長按橫向拖拽
鼠標(biāo)左鍵長按上下拖拽
鼠標(biāo)左鍵長按任意拖拽
鼠標(biāo)左鍵長按繞中心拖拽
鍵盤方位鍵與鼠標(biāo)點擊
鍵盤指定按鍵加鼠標(biāo)點擊
多個按鍵組合使用
指定按鍵配合鼠標(biāo)長按
指定按鍵配合鼠標(biāo)長按拖拽
組合動作主要分為以上 9 類，鼠標(biāo)拖拽的組合動作通常會細(xì)分來應(yīng)對界面場景的應(yīng)用，例如通過橫向拖拽將一個豎放的圓柱物體旋轉(zhuǎn)起來，那么垂直的拖拽必然是沒辦法轉(zhuǎn)動起來的，而且左右還會決定拖拽的方向。
交互影響的元素
簡單來講，無非就是看得見的元素、聽得見的元素。聽得見的元素?zé)o非就一個聲音，講深一點，也就涉及一些音效的交互控制。而看得見的元素則會相對豐富很多，如果再次細(xì)分的話還可以歸為以下幾種情況；
顏色（例如內(nèi)容被選取時的顏色變化）
文字（所有文字相關(guān)的樣式及狀態(tài)）
圖形（所有靜態(tài)可見圖形的樣式變化）
動畫（所有的動態(tài)內(nèi)容或交互動效）
按鈕（所有可操作的按鈕及多狀態(tài)呈現(xiàn)）
控件（頁面中用于交互的控件元素）
模型（所有可交互的三維內(nèi)容）
1. 常見變化形式
位置變化、透明度變化、角度變化、大小變化、形狀變化、顏色變化、翻轉(zhuǎn)效果、特效變化
網(wǎng)頁交互的概念
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)時“、“選擇時“、“運行時”三個時態(tài)（鼠標(biāo)短暫的點擊時屬于“選擇時”，若長按有內(nèi)容影響則屬于“運行時”），因此在網(wǎng)頁交互的過程中，我們需要考慮好這三種完整的狀態(tài)時呈現(xiàn)形式，另外在考慮補(bǔ)充合適的動效進(jìn)行過濾或信息反饋。歸根到底網(wǎng)頁的交互概念就是控制內(nèi)容呈現(xiàn)罷了，這是網(wǎng)頁價值的本質(zhì)。
Web 端內(nèi)容呈現(xiàn)結(jié)構(gòu)
web 端內(nèi)容呈現(xiàn)的結(jié)構(gòu)應(yīng)該算是頁面交互的范疇吧，其實上網(wǎng)頁的頁面并不只是長頁面的形式，實際上會有更多種結(jié)構(gòu)可用。因為電腦顯示器更大的緣故，web 端結(jié)構(gòu)上比移動端更加靈活，同時根據(jù)產(chǎn)品的性質(zhì)也有需要考慮移動端響應(yīng)式的需求，一般來講這些頁面結(jié)構(gòu)可以分為以下六類：
上下長屏滾動結(jié)構(gòu)：通過長頁面布局內(nèi)容，頁面滾動查看信息
全屏上下切換結(jié)構(gòu)：每次定焦一屏的范圍顯示內(nèi)容，通過滾輪或按鈕上下切屏
全屏左右切換結(jié)構(gòu)：同樣是定焦一屏顯示內(nèi)容，但采取左右切換結(jié)構(gòu)
全屏頁面覆蓋結(jié)構(gòu)：基于全屏定焦顯示，頁面通過覆蓋式切換或跳轉(zhuǎn)，甚至鼠標(biāo)滾輪深入或淺出頁面。
自適應(yīng)平鋪結(jié)構(gòu)：適用于頁面模塊小而簡單的時候，直接將模塊在屏幕內(nèi)一個個展開即可，一屏放不下時可以換行或繼續(xù)平鋪并定焦
三維場景結(jié)構(gòu)：將內(nèi)容場景 3D 化，通常導(dǎo)航或部分 UI 控件會在屏幕上固定，然后可以采取定向鏡頭伸縮查看，也可以是環(huán)繞中心與自由移動查看內(nèi)容信息
網(wǎng)頁的組成區(qū)塊通常分為五大類型，即導(dǎo)航、面包屑、背景、內(nèi)容呈現(xiàn)、彈出框。菜單導(dǎo)航欄通常分為頂部導(dǎo)航、側(cè)邊導(dǎo)航、底部導(dǎo)航、組合導(dǎo)航四大類，也有個別是通過點擊彈出的導(dǎo)航。內(nèi)容布局則更是五花八門了，是板式與技巧的呈現(xiàn)了。
14 種視覺層創(chuàng)意形式
個別產(chǎn)品本身也是創(chuàng)意的一部分，有一些可能界面交互平平，但是卻有著魔性或引人關(guān)注的產(chǎn)品內(nèi)容。而這里整理了些比較典型的視覺展現(xiàn)形式和交互創(chuàng)意形式的案例，這些方式通?？梢愿鶕?jù)產(chǎn)品的定位與特色進(jìn)行組合設(shè)計和開發(fā)呈現(xiàn)，讓你的網(wǎng)站更富有創(chuàng)意和較好的視覺體驗；
1. 幾何色塊搭配文案
色塊搭配標(biāo)題文案，簡約大氣有視覺沖擊力，再也不用擔(dān)心沒有圖片或插畫素材了
示例地址： https://minimalmonkey.com/ 是個技術(shù)棧，有多種交互代碼資料哦
2. 精美大圖背景搭配內(nèi)容
采用精美大圖背景搭配文案或交互控件，精美的圖片本身就很搶眼，再搭配標(biāo)題大字，瞬間就使得頁面有沖擊感有層次，常見于游戲官網(wǎng)或活動專題
示例圖源： https://dribbble.com/shots/6157473-C4D-Essential-Training-Part-2/attachments/1320261
3. 關(guān)聯(lián)插畫或圖標(biāo)搭配文案
采用小范圍的插畫或圖標(biāo)來表達(dá)服務(wù)或產(chǎn)品優(yōu)勢，搭配文案說明，風(fēng)格統(tǒng)一精致耐看。常見于服務(wù)描述或產(chǎn)品說明模塊應(yīng)用
示例地址： http://www.fxdata.cn/
4. 留白大圖搭配文案
將某個產(chǎn)品或其他元素放大顯示再結(jié)合極簡的排版說明，有較好的視覺沖擊力和產(chǎn)品凸顯效果，同時留白保證呼吸感和減少視覺噪點，使得用戶能夠更加專注產(chǎn)品圖5. 動態(tài)的背景或微動效裝飾
應(yīng)用動態(tài)背景或微動效的元素裝飾，有較好的內(nèi)容吸引力或氛圍渲染力，可以展現(xiàn)更多的產(chǎn)品細(xì)節(jié)或豐富畫面層次感，不過也比較考驗視頻本身或動效裝飾自身質(zhì)量
示例地址： https://www.ferrari.com/zh-CN/auto/car-range?from=GWvideo
示例地址： https://humaan.com/
6. 點線面裝飾與文案排版
應(yīng)用簡單點線面元素去裝飾界面，再結(jié)合有對比有版式的文案排版。頁面簡潔美觀，適合簡約干凈少圖的頁面模塊
示例地址： http://www.antro.ca/en/
7. 柵格化應(yīng)用與板式跳躍率
應(yīng)用柵格化與版式跳躍率，使界面整體充滿平面藝術(shù)，富有節(jié)奏感且不顯凌亂。在日本的網(wǎng)頁設(shè)計上有大量應(yīng)用
示例地址： https://www.uzabase.com/jp/
9. 充滿個性的視覺裝扮
采用卡通化、科技感、故障效果、毛玻璃效果、賽博朋克風(fēng)、手繪插畫等視覺風(fēng)格，來打造符合產(chǎn)品的特殊視覺效果，為網(wǎng)頁印象加分，提升品牌感染力
示例地址： http://warsawrising.eu/?chapter=1 用懷舊復(fù)古的風(fēng)格呈現(xiàn)歷史故事
10. 引用 3D 視覺裝飾
運用 3D 視覺搭建頁面場景，常見的有 3D 圖標(biāo)、3D 動效或 3D 產(chǎn)品大圖等，有較強(qiáng)畫面立體感和表達(dá)能力，視覺新穎讓人眼前一亮，也是當(dāng)前的一種視覺趨勢效果
示例地址： https://www.aliyun.com/
11. 產(chǎn)品元素或其他元素來填充背景
將品牌元素進(jìn)行弱化處理后作為背景墻，凸顯個性和豐富畫面，結(jié)合微動效可以有進(jìn)一步的效果增強(qiáng)
12. 矩形陳列或卡片陳列
將內(nèi)容模塊用矩形陳列顯示或卡片陳列，Win10 菜單或 WP 系統(tǒng)的手機(jī)桌面有較好體現(xiàn)，特點是干凈利落模塊分明，適合同類模塊較多的場景進(jìn)行排列顯示
示例地址： http://tokyomildfoundation.com/ 矩形分割的模塊入口
13. 極致的簡約
采用極簡的方式呈現(xiàn)內(nèi)容核心，可以是一張圖一段字、一段文案排版等，之就這么簡單的搞定了
示例地址： http://3.141592653589793238462643383279502884197169399375105820974944592.com/
14. 魔幻或神秘感界面呈現(xiàn)
如示例網(wǎng)址一樣，魔幻且神秘，有著迷之吸引力和趣味性，不過需要慎用，比較惡搞。而適當(dāng)給出一些神秘感，可以使得頁面內(nèi)容更有吸引力，用戶更愿意去點擊嘗試。
示例地址： https://onedesigncompany.com/work 很多內(nèi)容你不用鼠標(biāo)選中，根本不知道有什么等著你
24 種交互層創(chuàng)意形式
主要是關(guān)于頁面內(nèi)容元素交互時的創(chuàng)意形式講解，這里不對交互動效或特效細(xì)節(jié)進(jìn)行過多說明，因為怎么去動又或者用什么樣的特效去呈現(xiàn)實在數(shù)不清說不完，如果有興趣可以參考一下文中的精選案例視頻整理和提供的一些體驗合集地址。
1. 光標(biāo)跟隨動畫
會使頁面上的元素根據(jù)光標(biāo)的位置或移動產(chǎn)生相應(yīng)變換，增加頁面的互動性與趣味，適用于裝飾或加強(qiáng)背景層次感，在特定的場景也可以使整套控制 UI 往鼠標(biāo)移動的方向微微靠近，結(jié)合菲茲定律公式，距離的不斷縮減也能夠加快選中的效率）
示例網(wǎng)址： https://www.bilibili.com/
示例地址： https://home.miui.com/ 即時渲染粒子動畫與鼠標(biāo)跟蹤
2. 鼠標(biāo)懸浮動畫
簡單易用的鼠標(biāo)懸浮動畫，用于聚焦顯示或 Tooltip 說明，常用與內(nèi)容選中狀態(tài)區(qū)分或元素細(xì)節(jié)展示，加上一組好的動效創(chuàng)意非常能夠凸顯個性，使用戶感到驚喜為體驗加分
示例地址： https://www.makemepulse.com/
示例地址： https://www.eone-time.com/ 如果是一個完整動畫緩慢播放完會更有敘述性
3. 鼠標(biāo)點擊特效
由鼠標(biāo)點擊進(jìn)行觸發(fā)，基本樣式即點擊狀態(tài)顯示，觸發(fā)后的特效可以是圖標(biāo)動畫、光效、音效、界面動畫等，游戲場景中較為常見，點擊后不僅有光效反饋還有音效附和，這是一種觸發(fā)反饋效果。
示例地址： https://lab.hakim.se/checkwave/
4. 鼠標(biāo)長按特效
當(dāng)鼠標(biāo)長按某個按鈕時持續(xù)出現(xiàn)的特殊效果，一般是持續(xù)鼠標(biāo)點擊的特效或維持某個元素的變化效果，通常對數(shù)值持續(xù)增減動作較為常見，可以代替連續(xù)的點擊，交互更輕松。也或者是需要一定的加載時間所以用長按配合
示例網(wǎng)址： https://lab.hakim.se/bacterium/01/ 通過長按持續(xù)增加細(xì)菌圓點
5. 鼠標(biāo)拖拽特效
通過鼠標(biāo)點擊長按某個元素進(jìn)行移動的組合交互，一般用于拖拽移動、內(nèi)容繪制、元素連接等。應(yīng)用場景廣，互動性較高，能為用戶帶來更多的參與感和趣味性，甚至制造小驚喜
示例內(nèi)容：阿里內(nèi)測的 Real 3D
示例地址： http://fff.cmiscm.com/#!/section/sheeps
6. 鼠標(biāo)滾輪巧妙的聯(lián)動效果
主要用于頁面某個值的控制或頁面滾動，在頁面滾動的時候可以配合控制元素變化來實現(xiàn)更具創(chuàng)意的展現(xiàn)效果，通常元素透明度、位置、大小、序列圖都可以控制
示例地址： https://www.eone-time.com/
示例地址： https://www.apple.com.cn/macbook-pro-16/ Apple 國內(nèi)官網(wǎng)
7. 鼠標(biāo)選中自動展開
鼠標(biāo)經(jīng)過選項時自動展開選項并聚焦，可以省去鼠標(biāo)點開的動作，但不適用于選項內(nèi)容較多且內(nèi)容密集的場景
示例網(wǎng)址： http://www.antro.ca/en/
7. 鼠標(biāo)選中自動展開
鼠標(biāo)經(jīng)過選項時自動展開選項并聚焦，可以省去鼠標(biāo)點開的動作，但不適用于選項內(nèi)容較多且內(nèi)容密集的場景
示例網(wǎng)址： http://www.antro.ca/en/
8. 按鍵與鼠標(biāo)配合觸發(fā)
通過指定按鍵和鼠標(biāo)配合交互進(jìn)行觸發(fā)，適用于同界面的復(fù)雜交互場景，且存在某些變量需要鼠標(biāo)控制。如果你的網(wǎng)頁內(nèi)交互豐富且包含變量元素，不妨試試看
示例地址： https://lab.hakim.se/bacterium/01/ 鼠標(biāo)拖拽配合空格鍵長按
9. 模塊或分頁加載動效
在頁面滑動或分頁信息加載時，界面構(gòu)成元素有序的緩入進(jìn)場。采用流暢的動效演示數(shù)據(jù)加載的過程，緩解數(shù)據(jù)加載渲染壓力的同時，使得用戶可以更加從容不迫地瀏覽信息，讓界面呈現(xiàn)更加精致優(yōu)雅
示例地址： https://www.apple.com.cn/macbook-pro-16/ #Apple 國內(nèi)官網(wǎng)
10. 趣味轉(zhuǎn)場或加載等候
應(yīng)用轉(zhuǎn)場效果與 Loading 動畫，運用某個元素變大覆蓋或頁面移動交替轉(zhuǎn)場，而非生硬的直接替換，使得頁面切換更有趣味和層級關(guān)系體現(xiàn)。再對加載較慢的內(nèi)容補(bǔ)充 Loading 動畫，緩解用戶焦慮的同時還能延展品牌信息
示例地址： https://teatrlalka.pl/en
11. 大圖或多圖輪播應(yīng)用
精美的圖片總是想要放大看，看了還想看。運用超大的輪播圖展示與沉浸式功能布局，滿足用戶操作與大圖賞析
示例地址： https://www.carpediemsantorini.com/
12. 內(nèi)容穿插滾動
運用特殊的圖層順序結(jié)構(gòu)，在頁面滾動查看時，形成奇妙的元素穿梭視感。通常會穿梭替換背景或讓元素接力，這樣相比靜態(tài)寫實的頁面滾動時會更有層次感
示例地址： http://www.sehsucht.berlin/mailme/
示例地址： http://kenjiendo.com/news/
13. 內(nèi)容自動生成
輸入關(guān)鍵內(nèi)容后，頁面自動生成結(jié)果進(jìn)行呈現(xiàn)，整個過程可以是緩慢有序的，適用于降壓或畫面創(chuàng)意生成的產(chǎn)品，可以讓用戶感受整個過程與細(xì)節(jié)變化
示例地址： https://www.solaas.com.ar/dreamlines/ 輸入關(guān)鍵詞后頁面會自動生成迷幻的動態(tài)畫面
示例地址： http://fluky.io/ 輸入選項后生成轉(zhuǎn)盤隨機(jī)抽取，別再問我選哪個好！轉(zhuǎn)就是了
14. 游戲互動模式
將產(chǎn)品內(nèi)容以游戲的形式或交互呈現(xiàn)，讓內(nèi)容充滿趣味和互動性，使得用戶在參與游戲互動的過程中打破了常規(guī)的閱讀體驗
示例地址： https://dccxi.com/trust/
15. 三維或全景空間
建立一個三維或者全景空間進(jìn)行查看或操作，再賦予操作按鈕或說明，實現(xiàn) 3D 場景的交互與視覺效果，常用與地圖全景查看或 3D 游戲應(yīng)用，可以巧妙的結(jié)合產(chǎn)品 3D 模型，打造非凡的互動體驗
示例地址： http://2017.makemepulse.com/
示例地圖： https://map.baidu.com/@13371285.96,3516997.92,19z 百度地圖的全景查看
16. 一鏡到底的視角呈現(xiàn)
打造一個非平面的視覺場景。用鼠標(biāo)點擊或滾輪聯(lián)動交互利用分層的元素變化，營造出由近到遠(yuǎn)或由上至下的一鏡到底的視角穿梭體驗。界面場景切換更加自然，還有超強(qiáng)的空間感與趣味性，讓人難以忘懷如臨其境。
示例地址： http://www.ohdeergames.com/
17. 按鍵交互效果
將某些功能或任務(wù)引用按鍵進(jìn)行交互或觸發(fā)。常使用字母、數(shù)字、空格、方位鍵，界面需要有提示對用戶進(jìn)行指導(dǎo)。
示例地址： https://www.julianabrams.co.uk/ 基于鍵盤即可完成所有瀏覽，需搭梯子訪問
18. 個性的模塊展現(xiàn)方式
常見的有彈窗、抽屜、卡片展開、轉(zhuǎn)盤等，通過個性輕松的顯示結(jié)構(gòu)與交互方式也能讓人眼前一亮。
示例地址： http://go-wander.org/397_fela_kim
示例地址： http://fff.cmiscm.com/#!/main
19. 可交互的顏色或圖形
對一些顏色或形狀元素提供切換或 DIY 的空間，允許用戶進(jìn)行意料之外的交互或配置能力，提升網(wǎng)頁趣味性或用戶個性化需求滿足。
示例地址： https://ant-design.gitee.io/docs/spec/introduce 可自定義的主題色
20. 音視頻媒體控制
圍繞產(chǎn)品介紹的媒體內(nèi)容，常見有視頻或音頻且支持基本交互控制，結(jié)合場景需求可以豐富交互的形式或更多媒體控制功能，例如長按快進(jìn)、倒退、剪輯、混音等，常用于娛樂互動場景或音視頻類產(chǎn)品。
示例網(wǎng)址： https://aidn.jp/se/#0
21. 內(nèi)容或窗口抖動
通過抖動進(jìn)行報錯或反饋，常見為密碼輸入錯誤時或游戲中受到傷害的場景，可伴隨音效提示一起。使用場景不廣泛，但是也可以進(jìn)行創(chuàng)意應(yīng)用，例如抖掉灰塵小游戲，長按元素抖動干凈為止。
22. 打造儀式感
結(jié)合現(xiàn)實場景中的交互方式，打造相似的線上場景幫助用戶共情帶入，再配合交互和動效完成類似的動作，為用戶帶來儀式感和共情效果。
示例地址： https://issuu.com/matskafte 書籍預(yù)覽的場景打造，需搭梯子訪問
23. 有聲交互
通過麥克風(fēng)采集聲音來影響交互，是一種聲音的交互，如果網(wǎng)站支持，甚至可以語音交互，是一種少見的網(wǎng)頁交互形式，并非傳統(tǒng)的音視頻控制而已。
示例地址： http://www.bbboooooommm.com/ 搞點聲音就能動起來
24. 鏡頭交互
通過攝像頭授權(quán)獲取鏡頭畫面進(jìn)行交互，通常是一些鏡頭濾鏡效果或者增強(qiáng)現(xiàn)實技術(shù)結(jié)合做交互創(chuàng)意，網(wǎng)頁上少見新穎。
示例地址： https://mrdoob.com/#/125/multiuser_sketchpad
網(wǎng)頁創(chuàng)新設(shè)計的方法
找對方法去創(chuàng)新很重要！在實際工作中，我們不僅要衡量界面設(shè)計與交互效果，同時還要兼顧開發(fā)資源、實現(xiàn)難度以及產(chǎn)品架構(gòu)本身考慮。對此我們也需要了解一下開發(fā)實現(xiàn)的概念，之后再研究如何進(jìn)行創(chuàng)新設(shè)計。
1. 開發(fā)者的痛點與解決方案
在進(jìn)行創(chuàng)意設(shè)計時不考慮開發(fā)，那不是自嗨就是對開發(fā)耍流氓。靜態(tài)界面開發(fā)或簡易的切換效果并不難。而代碼層的圖形變化效果、仿物理效果(例如反彈、律動、重力等效果)、3D 交互效果相對會復(fù)雜許多。大多的動效不能依賴 GIF 或 Lottie 進(jìn)行解決，這對交互控制或性能優(yōu)化都是挑戰(zhàn)，而代碼能夠更好的保障這倆點，所以大量的交互動效還是需要開發(fā)者支持，而代碼實現(xiàn)顯然會比設(shè)計師產(chǎn)出復(fù)雜。
那么如何解決呢？
大多數(shù)網(wǎng)頁的交互動效都是基于 Javascript 或 CSS 進(jìn)行實現(xiàn)，部分動畫元素可以由設(shè)計師通過第三方軟件或在線生成 CSS、Svga、lottie 文件（相對下 lottie 更消耗性能，在線生成 icon 動畫代碼： https://loading.io/ ，在線 Lottie 模版搭配使用： https://design.alipay.com/emotion ，自主繪制導(dǎo)出 lottie： http://airbnb.io/lottie/ ，Svga 在線創(chuàng)造： https://www.svgator.com/ ，2D 動畫制作： http://zh.esotericsoftware.com/ ）。而大部分的特殊物理效果或特殊動效，其實會有可用的第三方庫或代碼資源來解決，首先就是保證你所設(shè)計出來的動效是可行的，過于逆天可能還是有難度，剩下的便是提供動效關(guān)鍵詞方便開發(fā)查找相關(guān)資源，或者你給出參考來源。常見的代碼動效素材網(wǎng)有： https://hakim.se/ 、 https://www.17sucai.com/pins/33749.html 、 http://www.sucai58.com/tag/2408.html 等（歡迎補(bǔ)充哈，別藏著掖著）。對于 3D 效果的前端開發(fā)呢，暫推薦新開源的 Oasis 引擎或 Three js 這些來實現(xiàn)，當(dāng)然其他引擎也沒問題。
2. 網(wǎng)頁創(chuàng)新設(shè)計的策略考慮
考慮到創(chuàng)新開發(fā)的背景情況不一致，這里我提供了一些創(chuàng)新研發(fā)的策略提供參考：
傳統(tǒng)改版：
1.明確改版目的，挖掘價值點
會議說明，清楚改版需求的背景與痛點，挖掘價值找到設(shè)計發(fā)力點
制定改版目標(biāo)，明確分工計劃，同步項目情況
2. 構(gòu)建原型框架，評審優(yōu)化
設(shè)計新版架構(gòu)，確認(rèn)范圍層細(xì)節(jié)（功能型：功能規(guī)格支持。信息型：內(nèi)容需求），完善流程與信息框架，然后拉攏項目相關(guān)人員進(jìn)行評審優(yōu)化，直到新版框架大體定型后，再進(jìn)行視覺層輸出
3. 明確產(chǎn)品定位，建立設(shè)計語言
要保障產(chǎn)品氣質(zhì)與視覺風(fēng)格的契合，即一個資訊網(wǎng)站肯定不適合采用電商視覺進(jìn)行輸出。然后根據(jù)內(nèi)容占比，考慮呈現(xiàn)的布局方式，即不同模塊中的視頻、圖片、文字比例情況。然后你可以結(jié)合上文的視覺層創(chuàng)意形式進(jìn)行套用，當(dāng)主要的靜態(tài)視覺設(shè)計完成后即可進(jìn)入評審階段
4. 高保真評審，挖掘交互創(chuàng)新點
對網(wǎng)頁高保真進(jìn)行評審，確認(rèn)頁面信息框架或界面設(shè)計可行。然后對交互創(chuàng)新方案探討，結(jié)合網(wǎng)頁的板式設(shè)計，提出交互創(chuàng)新的細(xì)節(jié)，與開發(fā)者同步，確保實現(xiàn)的可行性與項目工時可控，同時披露交互細(xì)節(jié)幫助開發(fā)者進(jìn)行調(diào)研或準(zhǔn)備
5. 交互創(chuàng)新對齊開發(fā)，進(jìn)入研發(fā)階段
準(zhǔn)備提供交互的細(xì)節(jié) Demo 或參考內(nèi)容，在基礎(chǔ)內(nèi)容開發(fā)完成后或開發(fā)者認(rèn)為適合介入的時機(jī)，進(jìn)行交互創(chuàng)新內(nèi)容的對齊，使創(chuàng)新方案在最小可行的基礎(chǔ)上進(jìn)行開發(fā)實現(xiàn)。之后建議設(shè)計同學(xué)耐心的陪同開發(fā)小哥進(jìn)行還原，確保效果
6. 測試驗收，預(yù)發(fā)上線
最后進(jìn)行成果驗收，確?；镜膬?nèi)容是否符合標(biāo)準(zhǔn)，再根據(jù)工時情況或上線計劃等，考慮交互創(chuàng)新部分的細(xì)節(jié)還原調(diào)試，適公司實際情況可以考慮再迭代一版。之后根據(jù)產(chǎn)品情況自行考慮是否 A/B 測試、灰度上線等，上線后就是線上數(shù)據(jù)跟進(jìn)或用戶調(diào)研了，希望你的新版本收獲一片叫好 哈哈
敏捷開發(fā)：
對于想要敏捷實現(xiàn)目標(biāo)的話，可以采用谷歌沖刺法（Google Sprint)，當(dāng)前基本分為六個階段進(jìn)行，分析理解階段、定義階段、發(fā)散思考階段、決策階段、原型產(chǎn)出階段、測試驗收階段。這里我結(jié)合交互創(chuàng)新的方法，對多個階段進(jìn)行了補(bǔ)充，內(nèi)容如下：
1. Understand 理解
明確建站目的、需求背景、梳理業(yè)務(wù)或用戶需求。通過用戶研究或競品分析等手段，更好的理解產(chǎn)品、行業(yè)現(xiàn)狀以及痛點機(jī)會，也為后面階段提供可靠的依據(jù)或支撐
2. Define 定義
基于對此次建站需求與背景深度理解，定義產(chǎn)品設(shè)計目標(biāo)，挖掘價值點
3. Diverge 發(fā)散
讓參與者們集思廣益，發(fā)散思考，將不同的點子記錄下來，最好圖文并茂的畫一下，然后形成自己的方案。在這個過程中不必共處一室，獨立進(jìn)行即可，這樣可以避免被帶偏或擾亂
4. Decide 決策
方案決策環(huán)節(jié)，產(chǎn)品經(jīng)理、設(shè)計師、開發(fā)小哥等將各自的方案進(jìn)行展示說明，這個過程中不要急著評價對方，只要投票選出最佳方案即可，這是一個方案的根基，之后再進(jìn)行優(yōu)化和細(xì)節(jié)完善
5. Prototype 原型
建議先將方案框架進(jìn)行原型繪制或 demo 產(chǎn)出，然后經(jīng)過一輪初步測試評審后可以再次優(yōu)化復(fù)盤。在原型繪制的過程中，主要是確認(rèn)流程與信息框架，不必著急視覺層的問題。若準(zhǔn)備進(jìn)入視覺設(shè)計，則可以帶入這幾個問題進(jìn)行思考；
了解框架結(jié)構(gòu)，采取合適的布局方式（參考上文）
明確產(chǎn)品定位，挖掘符合產(chǎn)品氣質(zhì)的設(shè)計方案（制定初步的視覺規(guī)范）
根據(jù)產(chǎn)品屬性，頁面內(nèi)容類型選取合適的視覺創(chuàng)意形式（可參考上文）
靜態(tài)頁面基本確認(rèn)的情況，添加交互創(chuàng)意畫龍點睛（網(wǎng)頁內(nèi)容呈現(xiàn)是核心，所以交互創(chuàng)意放在后面考慮，確保項目最小可行性優(yōu)先）
6.Validate 驗證
首先通過內(nèi)部自測優(yōu)化，再根據(jù)產(chǎn)品類型考慮是否找利益相關(guān)者進(jìn)行可用性測試驗證，或者找專家做顧問。之后再進(jìn)行下一步的優(yōu)化完善即可
原谷歌沖刺策略概念相關(guān)材料：
1. Understand 理解
明確建站目的、需求背景、梳理業(yè)務(wù)或用戶需求。通過用戶研究或競品分析等手段，更好的理解產(chǎn)品、行業(yè)現(xiàn)狀以及痛點機(jī)會，也為后面階段提供可靠的依據(jù)或支撐
2. Define 定義
基于對此次建站需求與背景深度理解，定義產(chǎn)品設(shè)計目標(biāo)，挖掘價值點
3. Diverge 發(fā)散
讓參與者們集思廣益，發(fā)散思考，將不同的點子記錄下來，最好圖文并茂的畫一下，然后形成自己的方案。在這個過程中不必共處一室，獨立進(jìn)行即可，這樣可以避免被帶偏或擾亂
4. Decide 決策
方案決策環(huán)節(jié)，產(chǎn)品經(jīng)理、設(shè)計師、開發(fā)小哥等將各自的方案進(jìn)行展示說明，這個過程中不要急著評價對方，只要投票選出最佳方案即可，這是一個方案的根基，之后再進(jìn)行優(yōu)化和細(xì)節(jié)完善
5. Prototype 原型
建議先將方案框架進(jìn)行原型繪制或 demo 產(chǎn)出，然后經(jīng)過一輪初步測試評審后可以再次優(yōu)化復(fù)盤。在原型繪制的過程中，主要是確認(rèn)流程與信息框架，不必著急視覺層的問題。若準(zhǔn)備進(jìn)入視覺設(shè)計，則可以帶入這幾個問題進(jìn)行思考；
了解框架結(jié)構(gòu)，采取合適的布局方式（參考上文）
明確產(chǎn)品定位，挖掘符合產(chǎn)品氣質(zhì)的設(shè)計方案（制定初步的視覺規(guī)范）
根據(jù)產(chǎn)品屬性，頁面內(nèi)容類型選取合適的視覺創(chuàng)意形式（可參考上文）
靜態(tài)頁面基本確認(rèn)的情況，添加交互創(chuàng)意畫龍點睛（網(wǎng)頁內(nèi)容呈現(xiàn)是核心，所以交互創(chuàng)意放在后面考慮，確保項目最小可行性優(yōu)先）
6.Validate 驗證
首先通過內(nèi)部自測優(yōu)化，再根據(jù)產(chǎn)品類型考慮是否找利益相關(guān)者進(jìn)行可用性測試驗證，或者找專家做顧問。之后再進(jìn)行下一步的優(yōu)化完善即可
原谷歌沖刺策略概念相關(guān)材料：
https://www.uisdc.com/design-sprint-2
網(wǎng)頁框架如何搭配創(chuàng)意形式
也許講了這么多，你還是不知道前面諸多的創(chuàng)意方式怎么用，沒關(guān)系，這里我進(jìn)行了簡單的整理對標(biāo)，希望你看完還有救！
1. 明確產(chǎn)品定位
網(wǎng)站本身即視為一個產(chǎn)品，一個產(chǎn)品的風(fēng)格定向一定是由產(chǎn)品本身屬性或用戶屬性影響，了解產(chǎn)品定位或目標(biāo)用戶也是重要的環(huán)節(jié)，這些環(huán)節(jié)可以制定更符合產(chǎn)品或用戶的信息框架或視覺表現(xiàn)。通常我們可以將網(wǎng)站類型分為企業(yè)官網(wǎng)、品牌官網(wǎng)、營銷官網(wǎng)、門戶網(wǎng)站、論壇相關(guān)、綜合網(wǎng)站六大類，這里簡單講一下這些網(wǎng)站定位與視覺特征；
企業(yè)官網(wǎng)風(fēng)格較為莊重正式，個性化體現(xiàn)少且相對板正些；
品牌官網(wǎng)內(nèi)容是多元化的，視覺與交互都更具個性化，沒有太多表現(xiàn)限制，傳遞品牌優(yōu)勢或能力為主；
營銷網(wǎng)站更加體現(xiàn)產(chǎn)品或業(yè)務(wù)能力，并且都有相關(guān)咨詢或消費入口，圖片插畫應(yīng)用不會少；
門戶網(wǎng)站是指提供某類綜合性互聯(lián)網(wǎng)信息資源并提供有關(guān)信息服務(wù)的應(yīng)用系統(tǒng)，內(nèi)容多緊湊型；
論壇相關(guān)又稱 BBS，是聚集用戶進(jìn)行資訊、情感、娛樂等領(lǐng)域的電子公告系統(tǒng)，導(dǎo)航多，偏資訊；
綜合網(wǎng)站，內(nèi)容結(jié)構(gòu)更豐富，如企業(yè)營銷品牌一體化，通常是產(chǎn)品營銷做核心，圖文搭配干活不累；
2. 信息框架決定板式細(xì)節(jié)
通常一個網(wǎng)頁怎么設(shè)計版式、如何調(diào)整布局結(jié)構(gòu)、調(diào)整基礎(chǔ)交互，都是需要參考原型的信息框架。信息框架中的元素情況會直接影響視覺輸入和基本交互。如信息框架中有很多圖，那么設(shè)計時就需要考慮是平鋪直敘還是輪播顯示。
信息框架設(shè)計學(xué)習(xí)：《Web 信息框架》
那么關(guān)于不同的信息架構(gòu)有什么好的布局方法嗎？這一點通過內(nèi)容的搭配形式，整理了幾種方式供參考：
文の處理：
通常一個純文本的界面是很難設(shè)計的，因為過于單調(diào)，對此可采用
幾何色塊進(jìn)行搭配，配合字號對比形成沖擊力
點線面裝飾，標(biāo)點符號箭頭等都可以合理運用
利用板式跳躍率排版，有大有小有節(jié)奏有對比
補(bǔ)充插畫搭配文案，采用小范圍插畫彌補(bǔ)單調(diào)
……
圖の處理：
純圖片的形式不多見，但是不能否定，一般可能是圖本身有一定的信息傳達(dá)，或者是圖片瀏覽類型的服務(wù)
Banner 走馬燈的形式進(jìn)行大圖輪播
大圖展示加預(yù)覽切換控件
非全屏圖片展示，配合 hover 狀態(tài)提示切換，或屏幕上顯示切換按鈕，適合全屏布局
圖片響應(yīng)式陳列排放，鼠標(biāo)懸浮選中時進(jìn)行聚焦放大
環(huán)繞顯示，通過鼠標(biāo)拖拽或按鈕切換聚焦對象
多張圖可陳列擺放或通過大小對比疊加擺放，也以柵格化錯位擺放，再適當(dāng)?shù)呐浜锨袚Q控件
圖文の處理：
少量圖文配套是比較好處理的，手法也比較多，根據(jù)配套數(shù)量情況還可以調(diào)換位置形成錯位區(qū)分模塊
大圖背景鋪滿加遮罩文案，控件與內(nèi)容少可采用全屏切換的頁面交互
圖片摳圖加文案左右排版，注意留白。多組可左右調(diào)換位置往下排布，或者使用不同的背景色分割
圖片陳列分割或多個橫向排布，文字可以在圖上下方擺放或圖內(nèi)加遮照顯示，也可以鼠標(biāo)懸浮聚焦時顯示
小圖片配合加大文案疊加顯示，突出文字，圖片為輔
視頻の處理：
視頻的處理分為自動跟手動控制，自動即作為背景自動播放，可進(jìn)行簡單的切換，手動則要注意相關(guān)按鈕布局和顯示遮擋問題
視頻封面配合播放按鈕做入口，不用直接播放，入口可以更小數(shù)量更多，點擊后畫中畫或全屏播放都行
設(shè)定好視頻播放的大小或位置，給予封面以及播放按鈕提示，或者鼠標(biāo)移入范圍顯示播放按鈕
單個模塊的多視頻交互最好給予切換按鈕，或者加以帶縮略封面的切換欄進(jìn)行處理，以減少視頻模塊的占比
在能夠保證內(nèi)容播放清晰的情況下可以多個陳列擺放，鼠標(biāo)移入目標(biāo)時可以直接播放達(dá)到視頻預(yù)覽效果
圖文視頻の混合：
通常圖文視頻混合的情況很少見，視覺焦點不好控制，其中視頻做背景是最好處理的，但內(nèi)容信息不易過多
視頻做背景，少量圖文或按鈕搭建頁面框架，確保視頻內(nèi)容不被過分遮擋，也能較好兼容這些元素
在視頻未播放前，也可以疊加遮罩與相關(guān)圖文信息或按鈕控件，點擊播放按鈕后，收起即可
通過鼠標(biāo)懸浮選中目標(biāo)后，Tips 浮框顯示額外的圖文視頻信息或按鈕控件即可
小范圍播放視頻支持全屏，使得圖片文字視頻能夠在有限的范圍顯示更多有效內(nèi)容
半沉浸式全屏視頻交互，采用幽靈式風(fēng)格將圖文按鈕控件等往屏幕邊緣分布，留出核心區(qū)域交互視頻或觀看
三維の處理：
因為是三維的場景，所以需要考慮到三維場景下的視角形式與操作方式
固定視角，有一個固定的場景和視角，可以通過交互使場景的內(nèi)容發(fā)生變化，內(nèi)容和操作可以輕量化
穿梭視角，通過交互場景中的圖或模型，形成向前后穿梭的效果，適合多層內(nèi)容逐步查看或過程演變
自由視角，控制元素或視角在場景中自由移動，或者圍繞某個元素全景查看，適合細(xì)節(jié)展示或空間體驗
固定操作，指固定的操作按鈕布局或通過鍵盤控制場景變化，適合場景中效果簡易有規(guī)律的產(chǎn)品
三維操作，在三維場景中含有鼠標(biāo)可以選取操作的元素，適合帶有場景元素互動、交互豐富的產(chǎn)品
按鈕の處理：
按鈕是網(wǎng)頁中最常見的交互控件，是頁面扭轉(zhuǎn)或功能啟用的基礎(chǔ)
色塊按鈕，色塊式的按鈕，有視覺明顯易觸達(dá)的優(yōu)點
線性按鈕，用于弱化顯示或透出背景內(nèi)容時較為常見的按鈕樣式
鼠標(biāo)懸浮按鈕，不直接顯示而通過鼠標(biāo)經(jīng)過相關(guān)模塊時顯示對應(yīng)按鈕
元素按鈕事件，對圖文內(nèi)容加上點擊事件，通按鈕使用，例如超鏈接
控件の處理：
控件組適用于復(fù)雜場景的任務(wù)交互，通常由多個按鈕或控件單元組成，特點就是控件單元多模塊占比大
覆蓋式卡片，通過卡片承載控件，控件多了就用更大的卡片唄
幽靈式控件，線性樣式展示控件來兼容背景，并結(jié)合鼠標(biāo)懸浮加強(qiáng)選擇樣式
為控件留白，留出控件交互的區(qū)域，通常采用留白或純色背景來陳列控件組
鼠標(biāo)懸浮展開，結(jié)合圖標(biāo)或直接隱藏，在鼠標(biāo)懸浮選中時顯示相關(guān)控件詳情
展開收起式控件組，小面積顯示核心控件，配合展開收起按鈕隱藏更多
折疊按鈕與跳轉(zhuǎn)，通過按鈕入口觸發(fā)新的彈框，或者打開新的頁面來陳列控件組完成任務(wù)
3. 交互創(chuàng)意如何下手
結(jié)合信息框架對不同元素類型進(jìn)行視覺設(shè)計調(diào)整后，再對頁面內(nèi)容的基本交互進(jìn)行考慮，例如輪播、切換、彈出、展開收起、轉(zhuǎn)場等。之后才是更加細(xì)膩的交互創(chuàng)意思考。
基本交互發(fā)力點
鼠標(biāo)經(jīng)過反饋：常見且重要的交互方式，通過鼠標(biāo)經(jīng)過時反饋選中狀態(tài)或提示相關(guān)信息
按鈕點擊反饋：在鼠標(biāo)點擊后，按鈕或控件的顏色形狀變換效果，用于反饋點擊成功，實現(xiàn)眼手體驗一致
按鈕長按效果：長按狀態(tài)的動效示意，通過對長按目標(biāo)加動畫響應(yīng)進(jìn)度或持續(xù)的狀態(tài)，而非單純的變色或樣式切換
完善 Loading 動畫：如點擊上傳下載更新等，出現(xiàn)對應(yīng)進(jìn)度條或 loading 動畫幫助用戶完善體感
內(nèi)容入出場動效：頁面切換加載或滑動頁面后，內(nèi)容采取動效有序的進(jìn)入場景定格，而非生硬的靜態(tài)切換
多內(nèi)容輪播應(yīng)用：對 Banner 或其他多個內(nèi)容展現(xiàn)，進(jìn)行輪播交互完善和時間細(xì)節(jié)控制
錦上添花交互發(fā)力點
按鈕切換動畫：通過 icon 的路徑動畫表達(dá)按鈕切換，而非直接的圖標(biāo)對換，更具個性和視覺觀賞性
鼠標(biāo)跟蹤動畫：可以適當(dāng)?shù)淖鲆恍┦髽?biāo)跟蹤事件，讓一些背景或界面元素跟隨鼠標(biāo)律動起來，增強(qiáng)互動
特殊滾輪聯(lián)動效果：通過鼠標(biāo)滾動聯(lián)動其他元素進(jìn)行交互變化，來呈現(xiàn)更有創(chuàng)意的場景切換或內(nèi)容展示
內(nèi)容穿插滾動：將內(nèi)容分層控制，頁面滾動時將元素固定或交替顯示，產(chǎn)生穿梭感提升界面層次
響應(yīng)式展開收起：主要用于二級或下級內(nèi)容的自動展開，由鼠標(biāo)經(jīng)過自動展開并聚焦，減少用戶操作
結(jié)合音視頻媒體控制：在頁面中植入音視頻內(nèi)容通過按鍵或鼠標(biāo)進(jìn)行交互或切換，打造互動性更高的媒體傳達(dá)
趣味轉(zhuǎn)場或頁面加載：對頁面轉(zhuǎn)場或加載深度優(yōu)化。采取更有創(chuàng)意的方式或動畫來過渡，讓視覺體驗提升億點點
內(nèi)容或窗口抖動報錯：合理采用抖動效果進(jìn)行報錯反饋或特殊場景應(yīng)用，使呆板提示更靈動
可 DIY 的顏色或圖形：提供主題或模塊的 DIY 空間，滿足用戶編輯符合自己喜好的視覺效果
結(jié)合產(chǎn)品的場景創(chuàng)意
打造個性的模塊呈現(xiàn)方式：結(jié)合產(chǎn)品的應(yīng)用場景打造有個性的呈現(xiàn)方式
打造游戲互動的呈現(xiàn)：將有劇情有故事的產(chǎn)品或內(nèi)容游戲化，可以讓用戶趣味互動更加深刻
打造一鏡到底的轉(zhuǎn)場：結(jié)合鼠標(biāo)滾輪聯(lián)動做鏡頭創(chuàng)意，突出產(chǎn)品細(xì)節(jié)或內(nèi)容呈現(xiàn)
打造三維或全景場景：根據(jù)產(chǎn)品屬性考慮用三維的場景來增強(qiáng)互動與突出產(chǎn)品
打造儀式感交互：利用視覺和交互變化來制作符合產(chǎn)品的應(yīng)用效果，實現(xiàn)儀式感線上體驗
有聲交互：比較少見，視產(chǎn)品情況應(yīng)用，可以使聲音產(chǎn)生互動或視覺影響
鏡頭交互：適合有鏡頭針對性應(yīng)用的產(chǎn)品采用，需要授權(quán)，要做好隱私說明
補(bǔ)充按鈕交互觸發(fā)：在場景更為復(fù)雜交互需求更多后，進(jìn)行的常規(guī)解決方法
補(bǔ)充按鍵與鼠標(biāo)配合交互：適合按鍵觸發(fā)且需要鼠標(biāo)控制變量的復(fù)雜交互
結(jié)語
雖然沒有手把著手教你做 Web 端交互創(chuàng)新，但是常見的形式和示例，甚至一些資源都盡心盡力的交代出來了，相信你只要有一定的審美和基本設(shè)計能力，結(jié)合產(chǎn)品和創(chuàng)意思路，打造一個更好的創(chuàng)意網(wǎng)站不成問題。在此文中大量的提供了創(chuàng)新的方法和形式，視覺效果和交互動效的細(xì)節(jié)仍有很大的發(fā)揮空間。雖然碼的字有點多，但是能夠消化下來一定能有所幫助，如果還是存在疑問亦可以關(guān)注聯(lián)系作者 [比心]。
部分精選創(chuàng)意網(wǎng)站剪輯
https://www.bilibili.com/video/BV1aN411Q7nn
百度云文件： https://pan.baidu.com/s/1USQru4ffGYONcHOEblW1nw 密碼: pwwt
優(yōu)秀的網(wǎng)頁板式設(shè)計合集：https://muuuuu.org/
交互動效案例合集 1: https://mrdoob.com/#/125/multiuser_sketchpad
交互動效案例合集 2: https://hakim.se/
400-611-9921
020-29860991
地址1：廣州市天河區(qū)珠江新城邦華環(huán)球廣場16F
業(yè)務(wù) QQ: 3561401262
E-mail： sales@zomsky.com
