經過一些項目經驗，結合幾個方法論，我整理出了一個評估交互方案完整性的方法，也可以作為前期考慮方案的分析方式。下面就來介紹一下，希望能給大家幫助和啟發。

在創建實用、可訪問性良好且視覺效果頗為出彩的 UI 界面的時候，我們大多只需要進行有限度的微調，即可達到頗為不錯的效果。在之前，我已經撰寫了很多實用的 UI & UX 優化小貼士（看完文章在文末獲?。?，這篇文章繼續增加 7 條實用的建議，一起來看看吧！

B端設計基礎指南：網格系統

背景

“時間”作為人機交互界面中經常出現的元素，本質上都是為了去傳遞時間維度的信息。但是我們平時在使用一些互聯網產品時會發現，關于“時間”的顯示狀態或形式在不同場景、不同頁面里往往是不太一樣的，這是出于怎樣的考慮呢？今天我們就來聊一聊，如何在產品設計中把握“時間”顯示的訣竅，讓其在頁面中發揮最大的作用。

“時間”元素的分類

按照“時間”元素在頁面中的出現場景和所起到的作用，可以大致歸為以下幾類：

A. 事件的關鍵構成要素

時間作為描述整個事件的重要組成部分，缺失后會對原本所要傳達的內容產生嚴重的影響，進而影響用戶的使用預期和結果，比方說用戶可能不能以一個較低的價格完成商品購買，或錯過了產品發布會的時間。

B. 行為的時間標記

指用戶本人作為行為主體或行為的接收對象，在某一動作發生后為其所打上的時間標記，比方說“我”購買商品下單的時間或收到一封郵件的時間。

C. 內容的附屬信息

用戶在使用產品進行內容消費時，時間作為該條內容的附屬信息，起到補充說明的作用，比方說一條短視頻或新聞的發布時間。

在上面的案例中，我們會發現“時間”在對應場景里所發揮的作用不同，用戶在使用產品時往往對時間存在不一樣的關注程度。因此我們在做頁面設計時，要根據具體場景和用戶訴求判斷“時間”元素的重要性和優先級，通常情況下：時間作為事件的關鍵構成要素＞行為的時間標記＞內容的附屬信息，之后再思考用什么樣的設計形式去展示來達到我們的目標。

“時間”的呈現方式和運用技巧

在討論“時間”元素的設計之前，我們先共識一些有關時間的理解和概念。時間可以劃分為“時間點”和“時間段”兩個維度，類似我們高中物理時學過的“時刻”和”時間間隔“的概念。

拿開會舉例子：“下午 4:30 會議開始”、“下午 6:00 會議結束”描述的是事件開始、結束的時間點，而“整個會議持續 1.5 小時”、“會議時間為下午 4:30-6:00”描述的是事件過程的時間段；但是，我們在會議開始時也可以這樣講“會議將在 1.5 小時后結束”。

通過上面的例子我們可以發下，同樣是描述一件事情，運用不同的時間點、時間段的方式去表達，意思一樣但卻傳遞出不一樣的情感，并且兩者存在如下的“換算”關系：

1）時間段加上定語會變成時間點（但同樣是時間點，“下午 6:00”是絕對時間，而“1.5 小時后”是相對時間，剛好對應到我們設計時兩種時間戳類型）；

2）兩個時間點之間則表示時間段。

所以，我們在平時表達或設計時，要先想清楚用“時間”是想側重表達某一事件、動作發生的即刻時間節點？還是想描述其所持續的時間過程？之后我們再針對不同語境去選取合適的文案和呈現方式。

時間的呈現方式離不開：時間戳類型、時間顯示格式、時間顆粒度。其中，時間顆粒度指的是描述時間的最小單位，往往顆粒度越細，給用戶傳達的確定感越強（如轉賬時間是 12 日 15:15:20），對用戶的激勵作用越明顯（如距搶購結束僅剩 00 時 01 分 23.6 秒）。

1. 絕對時間戳

絕對時間可理解為事物發生時的確切時間，由具體日期（年、月、日）和時間（時、分、秒）組成。使用絕對時間戳的優勢是信息傳達精準，顯得正式，給人確定感和安全感，同時排布規整，便于形成認知習慣；但缺點是內容顯示過長不利于閱讀，并且占用空間較大。

在時間顯示格式的選擇上，為了避免混淆，推薦使用文字格式或“-”分隔符來分隔日期，而“/”分隔符在不同國家有不同的展示順序習慣，容易造成誤解，盡量少用。

時間顆粒度的選擇依情況而定，一般場景總結如下：

2. 相對時間戳

相對時間在產品設計領域通常是指內容生產、到達、或狀態發生改變時，距當前時間點的時間差值，多用于 push 通知、信息流產品，側重強調內容的時效性；而“倒計時”也算相對時間的一種，側重營造時間的緊迫感。使用相對時間戳的優勢是用戶辨識、理解成本低，不用通過計算來判斷時間過去或還剩下多久；缺點是不夠精確、正式，并很難衡量兩個時間點的臨近性。

在使用相對時間時，要注意格式友好。時間單位可隨著時間的推移自動改變；數字不要過多，盡量取整；并且可設置其與絕對時間轉換的臨界點。

總結

在設計界面中的“時間”元素時，要遵循場景貼合、便于閱讀理解的總體原則；之后根據場景和目標，再選取合適的“時間”呈現方式（包括時間戳類型、時間顯示格式、時間顆粒度）。

當時間作為“A.事件的關鍵構成要素”時

一般情況下使用絕對時間，并且要看是為了強調某一關鍵時間節點，還是側重表達整個持續過程。此外，選用關聯場景的文案或者運用倒計時（相對時間）的形式，可一定程度上促進用戶更加集中注意力，提升對信息的關注度，并達到特殊的激勵作用和轉化效果。

當時間作為“B.行為的時間標記”時

該場景通常是為了追求確定感，通過提供精準的時間和日期便于用戶定位到過去或將來的某個時間點（段）去查找、回顧相應內容，因此大多數采用絕對時間，時間顆粒度依具體情況而定。

當時間作為“C.內容的附屬信息”時

如果所設計的產品供給內容的更新速度快，用戶活躍度高，并且此時內容的時間信息準確性不那么重要反而更側重于內容的時效性，那么通常會使用相對時間。部分信息流產品（比如新聞資訊類、社區類）會在列表頁使用相對時間，在詳情頁使用絕對時間，時間顆粒度也是依情況而定；并且會隨著時間推移，在某一時間節點前把相對時間轉換為絕對時間。

文章來源：優設 (VMIC UED)

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

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

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

復雜應用大多情況下是偏專業和B端的一些UI界面，它們大多出現在桌面端使用環境，并且終端用戶類型多樣，涉及流程、鏈條、業務也大多呈現出多變復雜的特征。這篇文章，來自UX設計領域的頂級存在NNGroup，作者為凱特·卡普蘭。

到底什么是復雜應用？

我們之前將「復雜應用」界定為特定專業領域當中，需要經過廣泛培訓之后使用的，有著非結構化目標、非線性工作流程的任何應用程序。這個概念可能聽起來有點抽象，不過這么說你可能會 更容易理解：從科學研究到專業人員，諸如金融分析師，它們常用的那些專業軟件應用。這類應用通常有著這些特點：

• 為有專業知識和訓練有素的用戶提供支持
• 幫助用戶瀏覽、管理大型數據庫，并提供高級的數據分析和處理的功能
• 通過可變和多樣的基礎任務功能來解決問題或者達成目標
• 需要在多個角色、工具、平臺之間進行協作或者切換
• 可以用來減輕高影響力/高價值任務的風險，降低損失

盡管不同的復雜應用之間差異很大，但是他們的共同點是，專業的從業人員對于這類工具有著極強的依賴性。

考慮到設計師和開發者在面對這類工具的時候的挑戰，我梳理總結了 8 個復雜應用的設計原則和指南。

1、采用邊做邊學的用戶流程

很多研究表明，對于復雜的應用和工具，用戶更加青睞可以立刻上手開始使用而不受它復雜度影響的那類工具。

與大量的教程、文檔、幫助和設置說明相比，能夠立刻開始的任務和項目，對于用戶有著莫大的吸引力。這種現象被稱為「活躍用戶悖論」。

雖然在專業領域當中，倚靠摸索和試錯學習是不恰當也不安全的，但是一定程度的邊做邊學是必須的，因為不可能在培訓和手冊當中涵蓋所有的使用場景。

所以，在設計的時候應該提供「跳過教程」的直接上手的偏好設置，同時進行相應的安全性設置，避免新手的莽撞操作導致損失。比如可以限制這個階段的用戶執行長流程多任務的操作，讓控制面板實時顯示操作結果或者預覽結果，這樣用戶無需執行全部操作就可以知道大概的結果。

在 Salesforce 控制面板當中，就可以實時預覽面板編輯的效果。

2、為用戶提供有效的方法和建議

絕大多數用戶都不是進階的專家級用戶，他們在絕大多數時候會使用基礎但是效率沒那么高的操作和執行方案。很多用戶形成習慣之后，通常不會主動做出改變，而這在日積月累之后導致大量的時間浪費，效率低下。

值得一提的是，這個時候依賴冗長的文檔和教程其實很難達成效果，更合理的方式是結合用戶所處的上下文環境，通過界面工具提示的方式，適時地告知用戶「有更高效方便的方法」。

通常，可以使用懸停提示，或者是彈出式工具提示來實現這一功能。

ArcMap 是一款地理信息系統類工具，它通常會通過上下文環境下的信息引導，來幫助用戶了解技巧。

3、提供靈活而流暢的功能路徑

復雜的應用程序，通常會有很多功能是分散的而非線性的，不同的功能組合起來可以實現特定的功能。在這類工具當中，用戶日?？赡芤膊皇呛艽_切知道最終的目標是什么，而需要通過數據分析來逐步推進，同時，在知道確切目標的情況下，也應該可以遵循不同的路徑靈活地達成目標。

設計師這些應用的時候，設計師應該避免使用固定、唯一、 僵化的實現路徑，迫使用戶必循嚴格按照某一固定路徑來做事情。一方面，允許用戶跳過某個步驟，或者回滾到更早的路徑，另一方面，允許用戶遵循不同的方式和路徑來達成目標。

比如萬事達卡的自助服務就可以通過交互式的圖表來引導用戶完成不同的任務。

4、 幫助用戶跟蹤行為和思考過程

復雜的任務，通常意味著它需要很多步驟，不同的環節，而在實際的應用場景中，某個分析步驟耗費幾個小時甚至幾天，都是有可能的。在高度復雜的現實生活中，某個步驟可能會換人接手，可能會因為硬件、 網絡等問題而暫停甚至丟失，這也意味著「可追溯性」是很重要的。

所以，在這樣的復雜應用當中，應該允許用戶在使用過程中，可以便捷清晰地記錄、保存、 導出內容和記錄，允許用戶中斷，中斷后可以恢復特定的任務。在任務進行過程中可以進行注釋、保存相關的說明。

在決策建模軟件TreeAge 當中，用戶可以在分析和建模過程中進行開放式的注釋，可以后續在底部快速訪問這些筆記。

5、可以協調多工具并且在工作空間之間轉換

復雜的應用通常還會面臨一個狀況，就是工具本身的不足，用戶需要在多個工作空間上使用工具和內容的時候，它需要具備切換的功能。對于不具備的功能，應用程序應該允許使用第三方的應用來作為補充。

比如當軟件不支持某個操作的時候，應該允許用戶從線上的其他數據庫中獲取并導出數據來使用，可以依托外部文檔作為支持，允許用戶在應用中做注釋和評論。

減輕工作負擔的一個要點，是盡量使用通用的API、接口和標準，盡量兼容行業標準軟件，比如 Excel、Powerpoint ，盡量使用標準格式，等等。

微軟的商業分析軟件 PowerBI 就提供了標準化的導出和復制功能，非常方便

6、減少混亂而不影響功能

復雜應用通常旨在保持泛用性。使用場景多樣，多種不同的功能，一家汽車生產廠家，可能會和蜜蜂養殖機構采用同樣的工具和軟件來監測機器故障。但是，這種泛用性的另外一面，就是混亂性。復雜的應用可能會同時兼顧到基礎型的小白用戶和進階型的專家用戶，而后者用到的功能很小概率會被基礎用戶用到。

所以，設計者需要在不降低功能性的情況下，基于應用場景、 用戶需求來進行簡化和優化，在保持功能完整易用的前提之下，降低復雜度和混亂度。

分階段和層級展現就是一種降低混亂度但是不影響功能性的一種常見策略。當用戶進行到特定任務、特定階段、特等級別之后，再呈現特定功能，是有效的設計方法。

7、主次信息之間要能平穩過渡

即使降低了混亂度，在復雜應用當中，信息量可能依然是過載的。通常，對于這種情況可以通過區分信息層級的主次來進行快速的區分，不過，從交互上來說，這可能依然不夠。

對于諸如控制面板一樣的界面，用戶可能需要時刻查看面板上的信息，需要了解次級信息但是又不能離開界面，這就體現出主次信息之間的過渡呈現的重要性了。

一般而言，使用類似與懸停顯示的方式，能夠比較柔和地將次級信息呈現出來，允許用戶查看詳細的定量數據。下面這個案例當中就是，懸停顯示更多次級信息。

8、在視覺上突出關鍵信息

復雜應用通常在界面上包含由大量的信息，而這個時候關鍵性的數據如果不在視覺上做突出顯示，會被用戶錯過。通過視覺區分、提示警報的方式，讓用戶及時注意到，才有可能規避可能存在的問題。

值得注意的是，讓關鍵信息和元素凸顯的方式，并不一定非得是使用鮮艷的色彩和較粗的字體，簡單的放大呈現，使用圖形化的元素輔助提示，或者是提供足夠的留白都可以達到目的，就像下面的案例一樣：

結論

復雜的應用多種多樣，支持的服務和功能也千差萬別，但是無論如何呈現，此類復雜應用的設計都是非常挑戰設計師的設計功底的，需要設計師了解業務，了解用戶，并且能夠通過設計更好地提供服務。

文章來源：優設(陳子木)   作者：Kate Kaplan

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

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

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

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

你可能想有創意的交互能為網頁帶來什么？

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

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

首先了解 Web 端交互支持

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

1. 鼠標允許的交互

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

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

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

2. 鍵盤交互支持

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

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

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

常見的交互動作組合

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

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

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

交互影響的元素

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

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

1. 常見變化形式

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

網頁交互的概念

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

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

Web 端內容呈現結構

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

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

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

14 種視覺層創意形式

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

1. 幾何色塊搭配文案

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

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

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

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

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

4. 留白大圖搭配文案

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

5. 動態的背景或微動效裝飾

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

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

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

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

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

9. 充滿個性的視覺裝扮

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

10. 引用 3D 視覺裝飾

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

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

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

12. 矩形陳列或卡片陳列

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

13. 極致的簡約

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

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

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

24 種交互層創意形式

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

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. 鏡頭交互

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

網頁創新設計的方法

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

1. 開發者的痛點與解決方案

在進行創意設計時不考慮開發，那不是自嗨就是對開發耍流氓。靜態界面開發或簡易的切換效果并不難。而代碼層的圖形變化效果、仿物理效果(例如反彈、律動、重力等效果)、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 驗證

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

網頁框架如何搭配創意形式

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

1. 明確產品定位

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

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

2. 信息框架決定板式細節

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

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

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

文の處理：

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

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

圖の處理：

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

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

圖文の處理：

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

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

視頻の處理：

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

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

圖文視頻の混合：

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

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

三維の處理：

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

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

按鈕の處理：

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

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

控件の處理：

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

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

3. 交互創意如何下手

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

基本交互發力點

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

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

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

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

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

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

錦上添花交互發力點

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

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

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

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

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

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

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

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

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

結合產品的場景創意

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

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

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

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

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

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

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

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

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

文章來源：優設   作者：泡泡bing

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

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

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