放眼過去大量同質化或跟風的網站風格，空有一副美觀的皮囊，卻少了些什么，為何不交互創(chuàng)新一下呢？具有創(chuàng)意的交互必然能使一副黑白的畫面瞬間點亮色彩。

你可能想有創(chuàng)意的交互能為網頁帶來什么？

挺多的，我舉例：一個連微動效都沒有的靜態(tài)網頁你進去后也就看見的這樣，那么如果這個網頁進去時，內容會有入場動效，你是不是馬上能感覺到這個網站有點兒東西，要抄起鼠標探索一番？換言之，好的交互創(chuàng)意甚至能讓你產生心流模式，你通過鼠標到處點擊，頁面上不斷的給出動畫效果，然后你收獲驚喜，最終促使你進行更多的嘗試。

好了，說多了，就是希望為更多設計師提供設計思路或執(zhí)行概念，幫助大家找到更多的創(chuàng)意靈感。

首先了解 Web 端交互支持

Web 端交互圍繞計算機為中心。主要涉及鍵盤鼠標兩類設備的交互，個別網站的產品可能會涉及麥克風聲音采集或攝像頭應用。

1. 鼠標允許的交互

現在的鼠標可以支持更多功能，但是通常來講需要嚴格的考慮兼容問題，所以僅以鼠標左右鍵滾輪滾動以及光標映射選取為主；

• 光標選中/hover
• 左鍵單擊
• 左鍵雙擊
• 左鍵連擊
• 左鍵長按
• 左鍵按住拖拽
• 右鍵單擊
• 右鍵雙擊
• 右鍵連擊
• 右鍵長按
• 右鍵按住拖拽
• 滾輪滑動

以上所有交互都可以根據實際場景進行設定，不過鑒于用戶習慣，一般不會用到快速的連擊交互以及右鍵的雙擊、長按或拖拽，這不符合交互手勢的舒適度或簡化易用的初衷。

2. 鍵盤交互支持

鍵盤支持大量的按鍵交互，除去一些全局的功能按鍵和組合快捷鍵，在網頁交互應用中常見的還可以分為以下幾種情況；

• 數值、字母、符號輸入
• 某個指定按鍵單擊/雙擊/連擊/長按
• 用某個指定的或組合按鍵代表網頁上的功能
• tab 鍵切換網頁選項
• 用空格切換下一屏
• 方位鍵切換選項或移動窗口視角
• ESC 退出視頻或全屏查看

在應用鍵盤按鍵功能的時候，除去那些作用明確大眾悉知的按鍵功能，其他的按鍵操作應該保證界面上有指引有提示。

常見的交互動作組合

組合的交互動作常配合不能簡單直接完成的任務，這里的組合指有兩個及以上交互動作完成的類型，復雜的交互動作盡量少用，且盡可能的為用戶提供操作指引，若非必要，費力不討好；

• 鼠標左鍵長按橫向拖拽
• 鼠標左鍵長按上下拖拽
• 鼠標左鍵長按任意拖拽
• 鼠標左鍵長按繞中心拖拽
• 鍵盤方位鍵與鼠標點擊
• 鍵盤指定按鍵加鼠標點擊
• 多個按鍵組合使用
• 指定按鍵配合鼠標長按
• 指定按鍵配合鼠標長按拖拽

組合動作主要分為以上 9 類，鼠標拖拽的組合動作通常會細分來應對界面場景的應用，例如通過橫向拖拽將一個豎放的圓柱物體旋轉起來，那么垂直的拖拽必然是沒辦法轉動起來的，而且左右還會決定拖拽的方向。

交互影響的元素

簡單來講，無非就是看得見的元素、聽得見的元素。聽得見的元素無非就一個聲音，講深一點，也就涉及一些音效的交互控制。而看得見的元素則會相對豐富很多，如果再次細分的話還可以歸為以下幾種情況；

• 顏色（例如內容被選取時的顏色變化）
• 文字（所有文字相關的樣式及狀態(tài)）
• 圖形（所有靜態(tài)可見圖形的樣式變化）
• 動畫（所有的動態(tài)內容或交互動效）
• 按鈕（所有可操作的按鈕及多狀態(tài)呈現）
• 控件（頁面中用于交互的控件元素）
• 模型（所有可交互的三維內容）

1. 常見變化形式

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

網頁交互的概念

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

頁面內容呈現通常分為“默認時“、“選擇時“、“運行時”三個時態(tài)（鼠標短暫的點擊時屬于“選擇時”，若長按有內容影響則屬于“運行時”），因此在網頁交互的過程中，我們需要考慮好這三種完整的狀態(tài)時呈現形式，另外在考慮補充合適的動效進行過濾或信息反饋。歸根到底網頁的交互概念就是控制內容呈現罷了，這是網頁價值的本質。

Web 端內容呈現結構

web 端內容呈現的結構應該算是頁面交互的范疇吧，其實上網頁的頁面并不只是長頁面的形式，實際上會有更多種結構可用。因為電腦顯示器更大的緣故，web 端結構上比移動端更加靈活，同時根據產品的性質也有需要考慮移動端響應式的需求，一般來講這些頁面結構可以分為以下六類：

1. 上下長屏滾動結構：通過長頁面布局內容，頁面滾動查看信息
2. 全屏上下切換結構：每次定焦一屏的范圍顯示內容，通過滾輪或按鈕上下切屏
3. 全屏左右切換結構：同樣是定焦一屏顯示內容，但采取左右切換結構
4. 全屏頁面覆蓋結構：基于全屏定焦顯示，頁面通過覆蓋式切換或跳轉，甚至鼠標滾輪深入或淺出頁面。
5. 自適應平鋪結構：適用于頁面模塊小而簡單的時候，直接將模塊在屏幕內一個個展開即可，一屏放不下時可以換行或繼續(xù)平鋪并定焦
6. 三維場景結構：將內容場景 3D 化，通常導航或部分 UI 控件會在屏幕上固定，然后可以采取定向鏡頭伸縮查看，也可以是環(huán)繞中心與自由移動查看內容信息

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

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

個別產品本身也是創(chuàng)意的一部分，有一些可能界面交互平平，但是卻有著魔性或引人關注的產品內容。而這里整理了些比較典型的視覺展現形式和交互創(chuàng)意形式的案例，這些方式通常可以根據產品的定位與特色進行組合設計和開發(fā)呈現，讓你的網站更富有創(chuàng)意和較好的視覺體驗；

1. 幾何色塊搭配文案

色塊搭配標題文案，簡約大氣有視覺沖擊力，再也不用擔心沒有圖片或插畫素材了

2. 精美大圖背景搭配內容

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

3. 關聯插畫或圖標搭配文案

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

4. 留白大圖搭配文案

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

5. 動態(tài)的背景或微動效裝飾

應用動態(tài)背景或微動效的元素裝飾，有較好的內容吸引力或氛圍渲染力，可以展現更多的產品細節(jié)或豐富畫面層次感，不過也比較考驗視頻本身或動效裝飾自身質量

6. 點線面裝飾與文案排版

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

7. 柵格化應用與板式跳躍率

應用柵格化與版式跳躍率，使界面整體充滿平面藝術，富有節(jié)奏感且不顯凌亂。在日本的網頁設計上有大量應用

9. 充滿個性的視覺裝扮

采用卡通化、科技感、故障效果、毛玻璃效果、賽博朋克風、手繪插畫等視覺風格，來打造符合產品的特殊視覺效果，為網頁印象加分，提升品牌感染力

10. 引用 3D 視覺裝飾

運用 3D 視覺搭建頁面場景，常見的有 3D 圖標、3D 動效或 3D 產品大圖等，有較強畫面立體感和表達能力，視覺新穎讓人眼前一亮，也是當前的一種視覺趨勢效果

11. 產品元素或其他元素來填充背景

將品牌元素進行弱化處理后作為背景墻，凸顯個性和豐富畫面，結合微動效可以有進一步的效果增強

12. 矩形陳列或卡片陳列

將內容模塊用矩形陳列顯示或卡片陳列，Win10 菜單或 WP 系統的手機桌面有較好體現，特點是干凈利落模塊分明，適合同類模塊較多的場景進行排列顯示

13. 極致的簡約

采用極簡的方式呈現內容核心，可以是一張圖一段字、一段文案排版等，總之就這么簡單的搞定了

14. 魔幻或神秘感界面呈現

如示例網址一樣，魔幻且神秘，有著迷之吸引力和趣味性，不過需要慎用，比較惡搞。而適當給出一些神秘感，可以使得頁面內容更有吸引力，用戶更愿意去點擊嘗試。

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

主要是關于頁面內容元素交互時的創(chuàng)意形式講解，這里不對交互動效或特效細節(jié)進行過多說明，因為怎么去動又或者用什么樣的特效去呈現實在數不清說不完，如果有興趣可以參考一下文中的精選案例視頻整理和提供的一些體驗合集地址。

1. 光標跟隨動畫

會使頁面上的元素根據光標的位置或移動產生相應變換，增加頁面的互動性與趣味，適用于裝飾或加強背景層次感，在特定的場景也可以使整套控制 UI 往鼠標移動的方向微微靠近，結合菲茲定律公式，距離的不斷縮減也能夠加快選中的效率）

2. 鼠標懸浮動畫

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

如果是一個完整動畫緩慢播放完會更有敘述性

3. 鼠標點擊特效

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

4. 鼠標長按特效

當鼠標長按某個按鈕時持續(xù)出現的特殊效果，一般是持續(xù)鼠標點擊的特效或維持某個元素的變化效果，通常對數值持續(xù)增減動作較為常見，可以代替連續(xù)的點擊，交互更輕松。也或者是需要一定的加載時間所以用長按配合

通過長按持續(xù)增加細菌圓點

5. 鼠標拖拽特效

通過鼠標點擊長按某個元素進行移動的組合交互，一般用于拖拽移動、內容繪制、元素連接等。應用場景廣，互動性較高，能為用戶帶來更多的參與感和趣味性，甚至制造小驚喜

示例內容：阿里內測的 Real 3D

6. 鼠標滾輪巧妙的聯動效果

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

國內官網

7. 鼠標選中自動展開

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

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

通過指定按鍵和鼠標配合交互進行觸發(fā)，適用于同界面的復雜交互場景，且存在某些變量需要鼠標控制。如果你的網頁內交互豐富且包含變量元素，不妨試試看

9. 模塊或分頁加載動效

在頁面滑動或分頁信息加載時，界面構成元素有序的緩入進場。采用流暢的動效演示數據加載的過程，緩解數據加載渲染壓力的同時，使得用戶可以更加從容不迫地瀏覽信息，讓界面呈現更加精致優(yōu)雅

10. 趣味轉場或加載等候

應用轉場效果與 Loading 動畫，運用某個元素變大覆蓋或頁面移動交替轉場，而非生硬的直接替換，使得頁面切換更有趣味和層級關系體現。再對加載較慢的內容補充 Loading 動畫，緩解用戶焦慮的同時還能延展品牌信息

11. 大圖或多圖輪播應用

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

12. 內容穿插滾動

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

13. 內容自動生成

輸入關鍵內容后，頁面自動生成結果進行呈現，整個過程可以是緩慢有序的，適用于降壓或畫面創(chuàng)意生成的產品，可以讓用戶感受整個過程與細節(jié)變化

14. 游戲互動模式

將產品內容以游戲的形式或交互呈現，讓內容充滿趣味和互動性，使得用戶在參與游戲互動的過程中打破了常規(guī)的閱讀體驗

15. 三維或全景空間

建立一個三維或者全景空間進行查看或操作，再賦予操作按鈕或說明，實現 3D 場景的交互與視覺效果，常用與地圖全景查看或 3D 游戲應用，可以巧妙的結合產品 3D 模型，打造非凡的互動體驗

16. 一鏡到底的視角呈現

打造一個非平面的視覺場景。用鼠標點擊或滾輪聯動交互利用分層的元素變化，營造出由近到遠或由上至下的一鏡到底的視角穿梭體驗。界面場景切換更加自然，還有超強的空間感與趣味性，讓人難以忘懷如臨其境。

17. 按鍵交互效果

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

18. 個性的模塊展現方式

常見的有彈窗、抽屜、卡片展開、轉盤等，通過個性輕松的顯示結構與交互方式也能讓人眼前一亮。

19. 可交互的顏色或圖形

對一些顏色或形狀元素提供切換或 DIY 的空間，允許用戶進行意料之外的交互或配置能力，提升網頁趣味性或用戶個性化需求滿足。

20. 音視頻媒體控制

圍繞產品介紹的媒體內容，常見有視頻或音頻且支持基本交互控制，結合場景需求可以豐富交互的形式或更多媒體控制功能，例如長按快進、倒退、剪輯、混音等，常用于娛樂互動場景或音視頻類產品。

21. 內容或窗口抖動

通過抖動進行報錯或反饋，常見為密碼輸入錯誤時或游戲中受到傷害的場景，可伴隨音效提示一起。使用場景不廣泛，但是也可以進行創(chuàng)意應用，例如抖掉灰塵小游戲，長按元素抖動干凈為止。

22. 打造儀式感

結合現實場景中的交互方式，打造相似的線上場景幫助用戶共情帶入，再配合交互和動效完成類似的動作，為用戶帶來儀式感和共情效果。

23. 有聲交互

通過麥克風采集聲音來影響交互，是一種聲音的交互，如果網站支持，甚至可以語音交互，是一種少見的網頁交互形式，并非傳統的音視頻控制而已。

24. 鏡頭交互

通過攝像頭授權獲取鏡頭畫面進行交互，通常是一些鏡頭濾鏡效果或者增強現實技術結合做交互創(chuàng)意，網頁上少見新穎。

網頁創(chuàng)新設計的方法

找對方法去創(chuàng)新很重要！在實際工作中，我們不僅要衡量界面設計與交互效果，同時還要兼顧開發(fā)資源、實現難度以及產品架構本身考慮。對此我們也需要了解一下開發(fā)實現的概念，之后再研究如何進行創(chuàng)新設計。

1. 開發(fā)者的痛點與解決方案

在進行創(chuàng)意設計時不考慮開發(fā)，那不是自嗨就是對開發(fā)耍流氓。靜態(tài)界面開發(fā)或簡易的切換效果并不難。而代碼層的圖形變化效果、仿物理效果(例如反彈、律動、重力等效果)、3D 交互效果相對會復雜許多。大多的動效不能依賴 GIF 或 Lottie 進行解決，這對交互控制或性能優(yōu)化都是挑戰(zhàn)，而代碼能夠更好的保障這倆點，所以大量的交互動效還是需要開發(fā)者支持，而代碼實現顯然會比設計師產出復雜。

那么如何解決呢？

CSS 進行實現，部分動畫元素可以由設計師通過第三方軟件或在線生成 CSS、Svga、lottie 文件（相對下 lottie 更消耗性能，在線生成 icon 動畫代碼： https://loading.io/ ，在線 Lottie 模版搭配使用： https://design.alipay.com/emotion ，自主繪制導出 lottie： http://airbnb.io/lottie/ ，Svga 在線創(chuàng)造： https://www.svgator.com/ ，2D 動畫制作： http://zh.esotericsoftware.com/ ）。而大部分的特殊物理效果或特殊動效，其實會有可用的第三方庫或代碼資源來解決，首先就是保證你所設計出來的動效是可行的，過于逆天可能還是有難度，剩下的便是提供動效關鍵詞方便開發(fā)查找相關資源，或者你給出參考來源。常見的代碼動效素材網有： https://hakim.se/ 、 https://www.17sucai.com/pins/33749.html 、 http://www.sucai58.com/tag/2408.html 等（歡迎補充哈，別藏著掖著）。對于 3D 效果的前端開發(fā)呢，暫推薦新開源的 Oasis 引擎或 Three js 這些來實現，當然其他引擎也沒問題。2. 網頁創(chuàng)新設計的策略考慮

考慮到創(chuàng)新開發(fā)的背景情況不一致，這里我提供了一些創(chuàng)新研發(fā)的策略提供參考：

傳統改版：

1.明確改版目的，挖掘價值點

會議說明，清楚改版需求的背景與痛點，挖掘價值找到設計發(fā)力點

制定改版目標，明確分工計劃，同步項目情況

2. 構建原型框架，評審優(yōu)化

設計新版架構，確認范圍層細節(jié)（功能型：功能規(guī)格支持。信息型：內容需求），完善流程與信息框架，然后拉攏項目相關人員進行評審優(yōu)化，直到新版框架大體定型后，再進行視覺層輸出

3. 明確產品定位，建立設計語言

要保障產品氣質與視覺風格的契合，即一個資訊網站肯定不適合采用電商視覺進行輸出。然后根據內容占比，考慮呈現的布局方式，即不同模塊中的視頻、圖片、文字比例情況。然后你可以結合上文的視覺層創(chuàng)意形式進行套用，當主要的靜態(tài)視覺設計完成后即可進入評審階段

4. 高保真評審，挖掘交互創(chuàng)新點

對網頁高保真進行評審，確認頁面信息框架或界面設計可行。然后對交互創(chuàng)新方案探討，結合網頁的板式設計，提出交互創(chuàng)新的細節(jié)，與開發(fā)者同步，確保實現的可行性與項目工時可控，同時披露交互細節(jié)幫助開發(fā)者進行調研或準備

5. 交互創(chuàng)新對齊開發(fā)，進入研發(fā)階段

準備提供交互的細節(jié) Demo 或參考內容，在基礎內容開發(fā)完成后或開發(fā)者認為適合介入的時機，進行交互創(chuàng)新內容的對齊，使創(chuàng)新方案在最小可行的基礎上進行開發(fā)實現。之后建議設計同學耐心的陪同開發(fā)小哥進行還原，確保效果

6. 測試驗收，預發(fā)上線

最后進行成果驗收，確?；镜膬热菔欠穹蠘藴?，再根據工時情況或上線計劃等，考慮交互創(chuàng)新部分的細節(jié)還原調試，適公司實際情況可以考慮再迭代一版。之后根據產品情況自行考慮是否 A/B 測試、灰度上線等，上線后就是線上數據跟進或用戶調研了，希望你的新版本收獲一片叫好 哈哈

敏捷開發(fā)：

對于想要敏捷實現目標的話，可以采用谷歌沖刺法（Google Sprint)，當前基本分為六個階段進行，分析理解階段、定義階段、發(fā)散思考階段、決策階段、原型產出階段、測試驗收階段。這里我結合交互創(chuàng)新的方法，對多個階段進行了補充，內容如下：

1. Understand 理解

明確建站目的、需求背景、梳理業(yè)務或用戶需求。通過用戶研究或競品分析等手段，更好的理解產品、行業(yè)現狀以及痛點機會，也為后面階段提供可靠的依據或支撐

2. Define 定義

基于對此次建站需求與背景深度理解，定義產品設計目標，挖掘價值點

3. Diverge 發(fā)散

讓參與者們集思廣益，發(fā)散思考，將不同的點子記錄下來，最好圖文并茂的畫一下，然后形成自己的方案。在這個過程中不必共處一室，獨立進行即可，這樣可以避免被帶偏或擾亂

4. Decide 決策

方案決策環(huán)節(jié)，產品經理、設計師、開發(fā)小哥等將各自的方案進行展示說明，這個過程中不要急著評價對方，只要投票選出最佳方案即可，這是一個方案的根基，之后再進行優(yōu)化和細節(jié)完善

5. Prototype 原型

建議先將方案框架進行原型繪制或 demo 產出，然后經過一輪初步測試評審后可以再次優(yōu)化復盤。在原型繪制的過程中，主要是確認流程與信息框架，不必著急視覺層的問題。若準備進入視覺設計，則可以帶入這幾個問題進行思考；

• 了解框架結構，采取合適的布局方式（參考上文）
• 明確產品定位，挖掘符合產品氣質的設計方案（制定初步的視覺規(guī)范）
• 根據產品屬性，頁面內容類型選取合適的視覺創(chuàng)意形式（可參考上文）
• 靜態(tài)頁面基本確認的情況，添加交互創(chuàng)意畫龍點睛（網頁內容呈現是核心，所以交互創(chuàng)意放在后面考慮，確保項目最小可行性優(yōu)先）

6.Validate 驗證

首先通過內部自測優(yōu)化，再根據產品類型考慮是否找利益相關者進行可用性測試驗證，或者找專家做顧問。之后再進行下一步的優(yōu)化完善即可

網頁框架如何搭配創(chuàng)意形式

也許講了這么多，你還是不知道前面諸多的創(chuàng)意方式怎么用，沒關系，這里我進行了簡單的整理對標，希望你看完還有救！

1. 明確產品定位

網站本身即視為一個產品，一個產品的風格定向一定是由產品本身屬性或用戶屬性影響，了解產品定位或目標用戶也是重要的環(huán)節(jié)，這些環(huán)節(jié)可以制定更符合產品或用戶的信息框架或視覺表現。通常我們可以將網站類型分為企業(yè)官網、品牌官網、營銷官網、門戶網站、論壇相關、綜合網站六大類，這里簡單講一下這些網站定位與視覺特征；

1.  企業(yè)官網風格較為莊重正式，個性化體現少且相對板正些；
2. 品牌官網內容是多元化的，視覺與交互都更具個性化，沒有太多表現限制，傳遞品牌優(yōu)勢或能力為主；
3. 營銷網站更加體現產品或業(yè)務能力，并且都有相關咨詢或消費入口，圖片插畫應用不會少；
4. 門戶網站是指提供某類綜合性互聯網信息資源并提供有關信息服務的應用系統，內容多緊湊型；
5. 論壇相關又稱 BBS，是聚集用戶進行資訊、情感、娛樂等領域的電子公告系統，導航多，偏資訊；
6. 綜合網站，內容結構更豐富，如企業(yè)營銷品牌一體化，通常是產品營銷做核心，圖文搭配干活不累；

2. 信息框架決定板式細節(jié)

通常一個網頁怎么設計版式、如何調整布局結構、調整基礎交互，都是需要參考原型的信息框架。信息框架中的元素情況會直接影響視覺輸入和基本交互。如信息框架中有很多圖，那么設計時就需要考慮是平鋪直敘還是輪播顯示。

信息框架設計學習：《Web 信息框架》

那么關于不同的信息架構有什么好的布局方法嗎？這一點通過內容的搭配形式，整理了幾種方式供參考：

文の處理：

通常一個純文本的界面是很難設計的，因為過于單調，對此可采用

• 幾何色塊進行搭配，配合字號對比形成沖擊力
• 點線面裝飾，標點符號箭頭等都可以合理運用
• 利用板式跳躍率排版，有大有小有節(jié)奏有對比
• 補充插畫搭配文案，采用小范圍插畫彌補單調
• ……

圖の處理：

純圖片的形式不多見，但是不能否定，一般可能是圖本身有一定的信息傳達，或者是圖片瀏覽類型的服務

1. Banner 走馬燈的形式進行大圖輪播
2. 大圖展示加預覽切換控件
3. 非全屏圖片展示，配合 hover 狀態(tài)提示切換，或屏幕上顯示切換按鈕，適合全屏布局
4. 圖片響應式陳列排放，鼠標懸浮選中時進行聚焦放大
5. 環(huán)繞顯示，通過鼠標拖拽或按鈕切換聚焦對象
6. 多張圖可陳列擺放或通過大小對比疊加擺放，也以柵格化錯位擺放，再適當的配合切換控件

圖文の處理：

少量圖文配套是比較好處理的，手法也比較多，根據配套數量情況還可以調換位置形成錯位區(qū)分模塊

1. 大圖背景鋪滿加遮罩文案，控件與內容少可采用全屏切換的頁面交互
2. 圖片摳圖加文案左右排版，注意留白。多組可左右調換位置往下排布，或者使用不同的背景色分割
3. 圖片陳列分割或多個橫向排布，文字可以在圖上下方擺放或圖內加遮照顯示，也可以鼠標懸浮聚焦時顯示
4. 小圖片配合加大文案疊加顯示，突出文字，圖片為輔

視頻の處理：

視頻的處理分為自動跟手動控制，自動即作為背景自動播放，可進行簡單的切換，手動則要注意相關按鈕布局和顯示遮擋問題

1. 視頻封面配合播放按鈕做入口，不用直接播放，入口可以更小數量更多，點擊后畫中畫或全屏播放都行
2. 設定好視頻播放的大小或位置，給予封面以及播放按鈕提示，或者鼠標移入范圍顯示播放按鈕
3. 單個模塊的多視頻交互最好給予切換按鈕，或者加以帶縮略封面的切換欄進行處理，以減少視頻模塊的占比
4. 在能夠保證內容播放清晰的情況下可以多個陳列擺放，鼠標移入目標時可以直接播放達到視頻預覽效果

圖文視頻の混合：

通常圖文視頻混合的情況很少見，視覺焦點不好控制，其中視頻做背景是最好處理的，但內容信息不易過多

1. 視頻做背景，少量圖文或按鈕搭建頁面框架，確保視頻內容不被過分遮擋，也能較好兼容這些元素
2. 在視頻未播放前，也可以疊加遮罩與相關圖文信息或按鈕控件，點擊播放按鈕后，收起即可
3. 通過鼠標懸浮選中目標后，Tips 浮框顯示額外的圖文視頻信息或按鈕控件即可
4. 小范圍播放視頻支持全屏，使得圖片文字視頻能夠在有限的范圍顯示更多有效內容
5. 半沉浸式全屏視頻交互，采用幽靈式風格將圖文按鈕控件等往屏幕邊緣分布，留出核心區(qū)域交互視頻或觀看

三維の處理：

因為是三維的場景，所以需要考慮到三維場景下的視角形式與操作方式

1. 固定視角，有一個固定的場景和視角，可以通過交互使場景的內容發(fā)生變化，內容和操作可以輕量化
2. 穿梭視角，通過交互場景中的圖或模型，形成向前后穿梭的效果，適合多層內容逐步查看或過程演變
3. 自由視角，控制元素或視角在場景中自由移動，或者圍繞某個元素全景查看，適合細節(jié)展示或空間體驗
4. 固定操作，指固定的操作按鈕布局或通過鍵盤控制場景變化，適合場景中效果簡易有規(guī)律的產品
5. 三維操作，在三維場景中含有鼠標可以選取操作的元素，適合帶有場景元素互動、交互豐富的產品

按鈕の處理：

按鈕是網頁中最常見的交互控件，是頁面扭轉或功能啟用的基礎

1. 色塊按鈕，色塊式的按鈕，有視覺明顯易觸達的優(yōu)點
2. 線性按鈕，用于弱化顯示或透出背景內容時較為常見的按鈕樣式
3. 鼠標懸浮按鈕，不直接顯示而通過鼠標經過相關模塊時顯示對應按鈕
4. 元素按鈕事件，對圖文內容加上點擊事件，通按鈕使用，例如超鏈接

控件の處理：

控件組適用于復雜場景的任務交互，通常由多個按鈕或控件單元組成，特點就是控件單元多模塊占比大

1. 覆蓋式卡片，通過卡片承載控件，控件多了就用更大的卡片唄
2. 幽靈式控件，線性樣式展示控件來兼容背景，并結合鼠標懸浮加強選擇樣式
3. 為控件留白，留出控件交互的區(qū)域，通常采用留白或純色背景來陳列控件組
4. 鼠標懸浮展開，結合圖標或直接隱藏，在鼠標懸浮選中時顯示相關控件詳情
5. 展開收起式控件組，小面積顯示核心控件，配合展開收起按鈕隱藏更多
6. 折疊按鈕與跳轉，通過按鈕入口觸發(fā)新的彈框，或者打開新的頁面來陳列控件組完成任務

3. 交互創(chuàng)意如何下手

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

基本交互發(fā)力點

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

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

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

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

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

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

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

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

鼠標跟蹤動畫：可以適當的做一些鼠標跟蹤事件，讓一些背景或界面元素跟隨鼠標律動起來，增強互動

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

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

響應式展開收起：主要用于二級或下級內容的自動展開，由鼠標經過自動展開并聚焦，減少用戶操作

結合音視頻媒體控制：在頁面中植入音視頻內容通過按鍵或鼠標進行交互或切換，打造互動性更高的媒體傳達

趣味轉場或頁面加載：對頁面轉場或加載深度優(yōu)化。采取更有創(chuàng)意的方式或動畫來過渡，讓視覺體驗提升億點點

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

可 DIY 的顏色或圖形：提供主題或模塊的 DIY 空間，滿足用戶編輯符合自己喜好的視覺效果

結合產品的場景創(chuàng)意

打造個性的模塊呈現方式：結合產品的應用場景打造有個性的呈現方式

打造游戲互動的呈現：將有劇情有故事的產品或內容游戲化，可以讓用戶趣味互動更加深刻

打造一鏡到底的轉場：結合鼠標滾輪聯動做鏡頭創(chuàng)意，突出產品細節(jié)或內容呈現

打造三維或全景場景：根據產品屬性考慮用三維的場景來增強互動與突出產品

打造儀式感交互：利用視覺和交互變化來制作符合產品的應用效果，實現儀式感線上體驗

有聲交互：比較少見，視產品情況應用，可以使聲音產生互動或視覺影響

鏡頭交互：適合有鏡頭針對性應用的產品采用，需要授權，要做好隱私說明

補充按鈕交互觸發(fā)：在場景更為復雜交互需求更多后，進行的常規(guī)解決方法

補充按鍵與鼠標配合交互：適合按鍵觸發(fā)且需要鼠標控制變量的復雜交互

文章來源：優(yōu)設   作者：泡泡bing

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務