2022-3-4 純純
放眼過去大量同質化或跟風的網站風格，空有一副美觀的皮囊，卻少了些什么，為何不交互創新一下呢？具有創意的交互必然能使一副黑白的畫面瞬間點亮色彩。
你可能想有創意的交互能為網頁帶來什么？
挺多的，我舉例：一個連微動效都沒有的靜態網頁你進去后也就看見的這樣，那么如果這個網頁進去時，內容會有入場動效，你是不是馬上能感覺到這個網站有點兒東西，要抄起鼠標探索一番？換言之，好的交互創意甚至能讓你產生心流模式，你通過鼠標到處點擊，頁面上不斷的給出動畫效果，然后你收獲驚喜，最終促使你進行更多的嘗試。
好了，說多了，就是希望為更多設計師提供設計思路或執行概念，幫助大家找到更多的創意靈感。
Web 端交互圍繞計算機為中心。主要涉及鍵盤鼠標兩類設備的交互，個別網站的產品可能會涉及麥克風聲音采集或攝像頭應用。
1. 鼠標允許的交互
現在的鼠標可以支持更多功能，但是通常來講需要嚴格的考慮兼容問題，所以僅以鼠標左右鍵滾輪滾動以及光標映射選取為主；
以上所有交互都可以根據實際場景進行設定，不過鑒于用戶習慣，一般不會用到快速的連擊交互以及右鍵的雙擊、長按或拖拽，這不符合交互手勢的舒適度或簡化易用的初衷。
2. 鍵盤交互支持
鍵盤支持大量的按鍵交互，除去一些全局的功能按鍵和組合快捷鍵，在網頁交互應用中常見的還可以分為以下幾種情況；
在應用鍵盤按鍵功能的時候，除去那些作用明確大眾悉知的按鍵功能，其他的按鍵操作應該保證界面上有指引有提示。
組合的交互動作常配合不能簡單直接完成的任務，這里的組合指有兩個及以上交互動作完成的類型，復雜的交互動作盡量少用，且盡可能的為用戶提供操作指引，若非必要，費力不討好；
組合動作主要分為以上 9 類，鼠標拖拽的組合動作通常會細分來應對界面場景的應用，例如通過橫向拖拽將一個豎放的圓柱物體旋轉起來，那么垂直的拖拽必然是沒辦法轉動起來的，而且左右還會決定拖拽的方向。
簡單來講，無非就是看得見的元素、聽得見的元素。聽得見的元素無非就一個聲音，講深一點，也就涉及一些音效的交互控制。而看得見的元素則會相對豐富很多，如果再次細分的話還可以歸為以下幾種情況；
1. 常見變化形式
位置變化、透明度變化、角度變化、大小變化、形狀變化、顏色變化、翻轉效果、特效變化
web 端的交互概念即觸發到呈現的過程。用戶可以使用交互設備進行事件觸發或變量，頁面則將內容進行對應的呈現。其中交互過程主要影響的事件由“可交互的元素“、“功能交互“、“轉場切換“構成。
頁面內容呈現通常分為“默認時“、“選擇時“、“運行時”三個時態（鼠標短暫的點擊時屬于“選擇時”，若長按有內容影響則屬于“運行時”），因此在網頁交互的過程中，我們需要考慮好這三種完整的狀態時呈現形式，另外在考慮補充合適的動效進行過濾或信息反饋。歸根到底網頁的交互概念就是控制內容呈現罷了，這是網頁價值的本質。
web 端內容呈現的結構應該算是頁面交互的范疇吧，其實上網頁的頁面并不只是長頁面的形式，實際上會有更多種結構可用。因為電腦顯示器更大的緣故，web 端結構上比移動端更加靈活，同時根據產品的性質也有需要考慮移動端響應式的需求，一般來講這些頁面結構可以分為以下六類：
網頁的組成區塊通常分為五大類型，即導航、面包屑、背景、內容呈現、彈出框。菜單導航欄通常分為頂部導航、側邊導航、底部導航、組合導航四大類，也有個別是通過點擊彈出的導航。內容布局則更是五花八門了，是板式與技巧的呈現了。
個別產品本身也是創意的一部分，有一些可能界面交互平平，但是卻有著魔性或引人關注的產品內容。而這里整理了些比較典型的視覺展現形式和交互創意形式的案例，這些方式通常可以根據產品的定位與特色進行組合設計和開發呈現，讓你的網站更富有創意和較好的視覺體驗；
1. 幾何色塊搭配文案
色塊搭配標題文案，簡約大氣有視覺沖擊力，再也不用擔心沒有圖片或插畫素材了
2. 精美大圖背景搭配內容
采用精美大圖背景搭配文案或交互控件，精美的圖片本身就很搶眼，再搭配標題大字，瞬間就使得頁面有沖擊感有層次，常見于游戲官網或活動專題
3. 關聯插畫或圖標搭配文案
采用小范圍的插畫或圖標來表達服務或產品優勢，搭配文案說明，風格統一精致耐看。常見于服務描述或產品說明模塊應用
4. 留白大圖搭配文案
將某個產品或其他元素放大顯示再結合極簡的排版說明，有較好的視覺沖擊力和產品凸顯效果，同時留白保證呼吸感和減少視覺噪點，使得用戶能夠更加專注產品圖
5. 動態的背景或微動效裝飾
應用動態背景或微動效的元素裝飾，有較好的內容吸引力或氛圍渲染力，可以展現更多的產品細節或豐富畫面層次感，不過也比較考驗視頻本身或動效裝飾自身質量
6. 點線面裝飾與文案排版
應用簡單點線面元素去裝飾界面，再結合有對比有版式的文案排版。頁面簡潔美觀，適合簡約干凈少圖的頁面模塊
7. 柵格化應用與板式跳躍率
應用柵格化與版式跳躍率，使界面整體充滿平面藝術，富有節奏感且不顯凌亂。在日本的網頁設計上有大量應用
9. 充滿個性的視覺裝扮
采用卡通化、科技感、故障效果、毛玻璃效果、賽博朋克風、手繪插畫等視覺風格，來打造符合產品的特殊視覺效果，為網頁印象加分，提升品牌感染力
10. 引用 3D 視覺裝飾
運用 3D 視覺搭建頁面場景，常見的有 3D 圖標、3D 動效或 3D 產品大圖等，有較強畫面立體感和表達能力，視覺新穎讓人眼前一亮，也是當前的一種視覺趨勢效果
11. 產品元素或其他元素來填充背景
將品牌元素進行弱化處理后作為背景墻，凸顯個性和豐富畫面，結合微動效可以有進一步的效果增強
12. 矩形陳列或卡片陳列
將內容模塊用矩形陳列顯示或卡片陳列，Win10 菜單或 WP 系統的手機桌面有較好體現，特點是干凈利落模塊分明，適合同類模塊較多的場景進行排列顯示
13. 極致的簡約
采用極簡的方式呈現內容核心，可以是一張圖一段字、一段文案排版等，總之就這么簡單的搞定了
14. 魔幻或神秘感界面呈現
如示例網址一樣，魔幻且神秘，有著迷之吸引力和趣味性，不過需要慎用，比較惡搞。而適當給出一些神秘感，可以使得頁面內容更有吸引力，用戶更愿意去點擊嘗試。
主要是關于頁面內容元素交互時的創意形式講解，這里不對交互動效或特效細節進行過多說明，因為怎么去動又或者用什么樣的特效去呈現實在數不清說不完，如果有興趣可以參考一下文中的精選案例視頻整理和提供的一些體驗合集地址。
1. 光標跟隨動畫
會使頁面上的元素根據光標的位置或移動產生相應變換，增加頁面的互動性與趣味，適用于裝飾或加強背景層次感，在特定的場景也可以使整套控制 UI 往鼠標移動的方向微微靠近，結合菲茲定律公式，距離的不斷縮減也能夠加快選中的效率）
2. 鼠標懸浮動畫
簡單易用的鼠標懸浮動畫，用于聚焦顯示或 Tooltip 說明，常用與內容選中狀態區分或元素細節展示，加上一組好的動效創意非常能夠凸顯個性，使用戶感到驚喜為體驗加分
如果是一個完整動畫緩慢播放完會更有敘述性
3. 鼠標點擊特效
由鼠標點擊進行觸發，基本樣式即點擊狀態顯示，觸發后的特效可以是圖標動畫、光效、音效、界面動畫等，游戲場景中較為常見，點擊后不僅有光效反饋還有音效附和，這是一種觸發反饋效果。
4. 鼠標長按特效
當鼠標長按某個按鈕時持續出現的特殊效果，一般是持續鼠標點擊的特效或維持某個元素的變化效果，通常對數值持續增減動作較為常見，可以代替連續的點擊，交互更輕松。也或者是需要一定的加載時間所以用長按配合
通過長按持續增加細菌圓點
5. 鼠標拖拽特效
通過鼠標點擊長按某個元素進行移動的組合交互，一般用于拖拽移動、內容繪制、元素連接等。應用場景廣，互動性較高，能為用戶帶來更多的參與感和趣味性，甚至制造小驚喜
示例內容：阿里內測的 Real 3D
6. 鼠標滾輪巧妙的聯動效果
主要用于頁面某個值的控制或頁面滾動，在頁面滾動的時候可以配合控制元素變化來實現更具創意的展現效果，通常元素透明度、位置、大小、序列圖都可以控制
國內官網
7. 鼠標選中自動展開
鼠標經過選項時自動展開選項并聚焦，可以省去鼠標點開的動作，但不適用于選項內容較多且內容密集的場景
8. 按鍵與鼠標配合觸發
通過指定按鍵和鼠標配合交互進行觸發，適用于同界面的復雜交互場景，且存在某些變量需要鼠標控制。如果你的網頁內交互豐富且包含變量元素，不妨試試看
9. 模塊或分頁加載動效
在頁面滑動或分頁信息加載時，界面構成元素有序的緩入進場。采用流暢的動效演示數據加載的過程，緩解數據加載渲染壓力的同時，使得用戶可以更加從容不迫地瀏覽信息，讓界面呈現更加精致優雅
10. 趣味轉場或加載等候
應用轉場效果與 Loading 動畫，運用某個元素變大覆蓋或頁面移動交替轉場，而非生硬的直接替換，使得頁面切換更有趣味和層級關系體現。再對加載較慢的內容補充 Loading 動畫，緩解用戶焦慮的同時還能延展品牌信息
11. 大圖或多圖輪播應用
精美的圖片總是想要放大看，看了還想看。運用超大的輪播圖展示與沉浸式功能布局，滿足用戶操作與大圖賞析
12. 內容穿插滾動
運用特殊的圖層順序結構，在頁面滾動查看時，形成奇妙的元素穿梭視感。通常會穿梭替換背景或讓元素接力，這樣相比靜態寫實的頁面滾動時會更有層次感
13. 內容自動生成
輸入關鍵內容后，頁面自動生成結果進行呈現，整個過程可以是緩慢有序的，適用于降壓或畫面創意生成的產品，可以讓用戶感受整個過程與細節變化
14. 游戲互動模式
將產品內容以游戲的形式或交互呈現，讓內容充滿趣味和互動性，使得用戶在參與游戲互動的過程中打破了常規的閱讀體驗
15. 三維或全景空間
建立一個三維或者全景空間進行查看或操作，再賦予操作按鈕或說明，實現 3D 場景的交互與視覺效果，常用與地圖全景查看或 3D 游戲應用，可以巧妙的結合產品 3D 模型，打造非凡的互動體驗
16. 一鏡到底的視角呈現
打造一個非平面的視覺場景。用鼠標點擊或滾輪聯動交互利用分層的元素變化，營造出由近到遠或由上至下的一鏡到底的視角穿梭體驗。界面場景切換更加自然，還有超強的空間感與趣味性，讓人難以忘懷如臨其境。
17. 按鍵交互效果
將某些功能或任務引用按鍵進行交互或觸發。常使用字母、數字、空格、方位鍵，界面需要有提示對用戶進行指導。
18. 個性的模塊展現方式
常見的有彈窗、抽屜、卡片展開、轉盤等，通過個性輕松的顯示結構與交互方式也能讓人眼前一亮。
19. 可交互的顏色或圖形
對一些顏色或形狀元素提供切換或 DIY 的空間，允許用戶進行意料之外的交互或配置能力，提升網頁趣味性或用戶個性化需求滿足。
20. 音視頻媒體控制
圍繞產品介紹的媒體內容，常見有視頻或音頻且支持基本交互控制，結合場景需求可以豐富交互的形式或更多媒體控制功能，例如長按快進、倒退、剪輯、混音等，常用于娛樂互動場景或音視頻類產品。
21. 內容或窗口抖動
通過抖動進行報錯或反饋，常見為密碼輸入錯誤時或游戲中受到傷害的場景，可伴隨音效提示一起。使用場景不廣泛，但是也可以進行創意應用，例如抖掉灰塵小游戲，長按元素抖動干凈為止。
22. 打造儀式感
結合現實場景中的交互方式，打造相似的線上場景幫助用戶共情帶入，再配合交互和動效完成類似的動作，為用戶帶來儀式感和共情效果。
23. 有聲交互
通過麥克風采集聲音來影響交互，是一種聲音的交互，如果網站支持，甚至可以語音交互，是一種少見的網頁交互形式，并非傳統的音視頻控制而已。
24. 鏡頭交互
通過攝像頭授權獲取鏡頭畫面進行交互，通常是一些鏡頭濾鏡效果或者增強現實技術結合做交互創意，網頁上少見新穎。
找對方法去創新很重要！在實際工作中，我們不僅要衡量界面設計與交互效果，同時還要兼顧開發資源、實現難度以及產品架構本身考慮。對此我們也需要了解一下開發實現的概念，之后再研究如何進行創新設計。
在進行創意設計時不考慮開發，那不是自嗨就是對開發耍流氓。靜態界面開發或簡易的切換效果并不難。而代碼層的圖形變化效果、仿物理效果(例如反彈、律動、重力等效果)、3D 交互效果相對會復雜許多。大多的動效不能依賴 GIF 或 Lottie 進行解決，這對交互控制或性能優化都是挑戰，而代碼能夠更好的保障這倆點，所以大量的交互動效還是需要開發者支持，而代碼實現顯然會比設計師產出復雜。
那么如何解決呢？
CSS 進行實現，部分動畫元素可以由設計師通過第三方軟件或在線生成 CSS、Svga、lottie 文件（相對下 lottie 更消耗性能，在線生成 icon 動畫代碼： https://loading.io/ ，在線 Lottie 模版搭配使用： https://design.alipay.com/emotion ，自主繪制導出 lottie： http://airbnb.io/lottie/ ，Svga 在線創造： https://www.svgator.com/ ，2D 動畫制作： http://zh.esotericsoftware.com/ ）。而大部分的特殊物理效果或特殊動效，其實會有可用的第三方庫或代碼資源來解決，首先就是保證你所設計出來的動效是可行的，過于逆天可能還是有難度，剩下的便是提供動效關鍵詞方便開發查找相關資源，或者你給出參考來源。常見的代碼動效素材網有： https://hakim.se/ 、 https://www.17sucai.com/pins/33749.html 、 http://www.sucai58.com/tag/2408.html 等（歡迎補充哈，別藏著掖著）。對于 3D 效果的前端開發呢，暫推薦新開源的 Oasis 引擎或 Three js 這些來實現，當然其他引擎也沒問題。2. 網頁創新設計的策略考慮
考慮到創新開發的背景情況不一致，這里我提供了一些創新研發的策略提供參考：
傳統改版：
1.明確改版目的，挖掘價值點
會議說明，清楚改版需求的背景與痛點，挖掘價值找到設計發力點
制定改版目標，明確分工計劃，同步項目情況
2. 構建原型框架，評審優化
設計新版架構，確認范圍層細節（功能型：功能規格支持。信息型：內容需求），完善流程與信息框架，然后拉攏項目相關人員進行評審優化，直到新版框架大體定型后，再進行視覺層輸出
3. 明確產品定位，建立設計語言
要保障產品氣質與視覺風格的契合，即一個資訊網站肯定不適合采用電商視覺進行輸出。然后根據內容占比，考慮呈現的布局方式，即不同模塊中的視頻、圖片、文字比例情況。然后你可以結合上文的視覺層創意形式進行套用，當主要的靜態視覺設計完成后即可進入評審階段
4. 高保真評審，挖掘交互創新點
對網頁高保真進行評審，確認頁面信息框架或界面設計可行。然后對交互創新方案探討，結合網頁的板式設計，提出交互創新的細節，與開發者同步，確保實現的可行性與項目工時可控，同時披露交互細節幫助開發者進行調研或準備
5. 交互創新對齊開發，進入研發階段
準備提供交互的細節 Demo 或參考內容，在基礎內容開發完成后或開發者認為適合介入的時機，進行交互創新內容的對齊，使創新方案在最小可行的基礎上進行開發實現。之后建議設計同學耐心的陪同開發小哥進行還原，確保效果
6. 測試驗收，預發上線
最后進行成果驗收，確保基本的內容是否符合標準，再根據工時情況或上線計劃等，考慮交互創新部分的細節還原調試，適公司實際情況可以考慮再迭代一版。之后根據產品情況自行考慮是否 A/B 測試、灰度上線等，上線后就是線上數據跟進或用戶調研了，希望你的新版本收獲一片叫好 哈哈
敏捷開發：
對于想要敏捷實現目標的話，可以采用谷歌沖刺法（Google Sprint)，當前基本分為六個階段進行，分析理解階段、定義階段、發散思考階段、決策階段、原型產出階段、測試驗收階段。這里我結合交互創新的方法，對多個階段進行了補充，內容如下：
1. Understand 理解
明確建站目的、需求背景、梳理業務或用戶需求。通過用戶研究或競品分析等手段，更好的理解產品、行業現狀以及痛點機會，也為后面階段提供可靠的依據或支撐
2. Define 定義
基于對此次建站需求與背景深度理解，定義產品設計目標，挖掘價值點
3. Diverge 發散
讓參與者們集思廣益，發散思考，將不同的點子記錄下來，最好圖文并茂的畫一下，然后形成自己的方案。在這個過程中不必共處一室，獨立進行即可，這樣可以避免被帶偏或擾亂
4. Decide 決策
方案決策環節，產品經理、設計師、開發小哥等將各自的方案進行展示說明，這個過程中不要急著評價對方，只要投票選出最佳方案即可，這是一個方案的根基，之后再進行優化和細節完善
5. Prototype 原型
建議先將方案框架進行原型繪制或 demo 產出，然后經過一輪初步測試評審后可以再次優化復盤。在原型繪制的過程中，主要是確認流程與信息框架，不必著急視覺層的問題。若準備進入視覺設計，則可以帶入這幾個問題進行思考；
6.Validate 驗證
首先通過內部自測優化，再根據產品類型考慮是否找利益相關者進行可用性測試驗證，或者找專家做顧問。之后再進行下一步的優化完善即可
也許講了這么多，你還是不知道前面諸多的創意方式怎么用，沒關系，這里我進行了簡單的整理對標，希望你看完還有救！
網站本身即視為一個產品，一個產品的風格定向一定是由產品本身屬性或用戶屬性影響，了解產品定位或目標用戶也是重要的環節，這些環節可以制定更符合產品或用戶的信息框架或視覺表現。通常我們可以將網站類型分為企業官網、品牌官網、營銷官網、門戶網站、論壇相關、綜合網站六大類，這里簡單講一下這些網站定位與視覺特征；
通常一個網頁怎么設計版式、如何調整布局結構、調整基礎交互，都是需要參考原型的信息框架。信息框架中的元素情況會直接影響視覺輸入和基本交互。如信息框架中有很多圖，那么設計時就需要考慮是平鋪直敘還是輪播顯示。
信息框架設計學習：《Web 信息框架》
那么關于不同的信息架構有什么好的布局方法嗎？這一點通過內容的搭配形式，整理了幾種方式供參考：
文の處理：
通常一個純文本的界面是很難設計的，因為過于單調，對此可采用
圖の處理：
純圖片的形式不多見，但是不能否定，一般可能是圖本身有一定的信息傳達，或者是圖片瀏覽類型的服務
圖文の處理：
少量圖文配套是比較好處理的，手法也比較多，根據配套數量情況還可以調換位置形成錯位區分模塊
視頻の處理：
視頻的處理分為自動跟手動控制，自動即作為背景自動播放，可進行簡單的切換，手動則要注意相關按鈕布局和顯示遮擋問題
圖文視頻の混合：
通常圖文視頻混合的情況很少見，視覺焦點不好控制，其中視頻做背景是最好處理的，但內容信息不易過多
三維の處理：
因為是三維的場景，所以需要考慮到三維場景下的視角形式與操作方式
按鈕の處理：
按鈕是網頁中最常見的交互控件，是頁面扭轉或功能啟用的基礎
控件の處理：
控件組適用于復雜場景的任務交互，通常由多個按鈕或控件單元組成，特點就是控件單元多模塊占比大
結合信息框架對不同元素類型進行視覺設計調整后，再對頁面內容的基本交互進行考慮，例如輪播、切換、彈出、展開收起、轉場等。之后才是更加細膩的交互創意思考。
基本交互發力點
鼠標經過反饋：常見且重要的交互方式，通過鼠標經過時反饋選中狀態或提示相關信息
按鈕點擊反饋：在鼠標點擊后，按鈕或控件的顏色形狀變換效果，用于反饋點擊成功，實現眼手體驗一致
按鈕長按效果：長按狀態的動效示意，通過對長按目標加動畫響應進度或持續的狀態，而非單純的變色或樣式切換
完善 Loading 動畫：如點擊上傳下載更新等，出現對應進度條或 loading 動畫幫助用戶完善體感
內容入出場動效：頁面切換加載或滑動頁面后，內容采取動效有序的進入場景定格，而非生硬的靜態切換
多內容輪播應用：對 Banner 或其他多個內容展現，進行輪播交互完善和時間細節控制
錦上添花交互發力點
按鈕切換動畫：通過 icon 的路徑動畫表達按鈕切換，而非直接的圖標對換，更具個性和視覺觀賞性
鼠標跟蹤動畫：可以適當的做一些鼠標跟蹤事件，讓一些背景或界面元素跟隨鼠標律動起來，增強互動
特殊滾輪聯動效果：通過鼠標滾動聯動其他元素進行交互變化，來呈現更有創意的場景切換或內容展示
內容穿插滾動：將內容分層控制，頁面滾動時將元素固定或交替顯示，產生穿梭感提升界面層次
響應式展開收起：主要用于二級或下級內容的自動展開，由鼠標經過自動展開并聚焦，減少用戶操作
結合音視頻媒體控制：在頁面中植入音視頻內容通過按鍵或鼠標進行交互或切換，打造互動性更高的媒體傳達
趣味轉場或頁面加載：對頁面轉場或加載深度優化。采取更有創意的方式或動畫來過渡，讓視覺體驗提升億點點
內容或窗口抖動報錯：合理采用抖動效果進行報錯反饋或特殊場景應用，使呆板提示更靈動
可 DIY 的顏色或圖形：提供主題或模塊的 DIY 空間，滿足用戶編輯符合自己喜好的視覺效果
結合產品的場景創意
打造個性的模塊呈現方式：結合產品的應用場景打造有個性的呈現方式
打造游戲互動的呈現：將有劇情有故事的產品或內容游戲化，可以讓用戶趣味互動更加深刻
打造一鏡到底的轉場：結合鼠標滾輪聯動做鏡頭創意，突出產品細節或內容呈現
打造三維或全景場景：根據產品屬性考慮用三維的場景來增強互動與突出產品
打造儀式感交互：利用視覺和交互變化來制作符合產品的應用效果，實現儀式感線上體驗
有聲交互：比較少見，視產品情況應用，可以使聲音產生互動或視覺影響
鏡頭交互：適合有鏡頭針對性應用的產品采用，需要授權，要做好隱私說明
補充按鈕交互觸發：在場景更為復雜交互需求更多后，進行的常規解決方法
補充按鍵與鼠標配合交互：適合按鍵觸發且需要鼠標控制變量的復雜交互
文章來源：優設 作者：泡泡bing
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務