這篇文章，和大家分享一些在產(chǎn)品和交互設(shè)計中的一些自己的方法。

經(jīng)過一些項目經(jīng)驗，結(jié)合幾個方法論，我整理出了一個評估交互方案完整性的方法，也可以作為前期考慮方案的分析方式。下面就來介紹一下，希望能給大家?guī)椭蛦l(fā)。

背景

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

“時間”元素的分類

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

A. 事件的關(guān)鍵構(gòu)成要素

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

B. 行為的時間標記

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

C. 內(nèi)容的附屬信息

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

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

“時間”的呈現(xiàn)方式和運用技巧

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

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

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

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

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

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

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

1. 絕對時間戳

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

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

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

2. 相對時間戳

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

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

總結(jié)

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

當時間作為“A.事件的關(guān)鍵構(gòu)成要素”時

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

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

該場景通常是為了追求確定感，通過提供精準的時間和日期便于用戶定位到過去或?qū)淼哪硞€時間點（段）去查找、回顧相應(yīng)內(nèi)容，因此大多數(shù)采用絕對時間，時間顆粒度依具體情況而定。

當時間作為“C.內(nèi)容的附屬信息”時

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

文章來源：優(yōu)設(shè) (VMIC UED)

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

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

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

到底什么是復(fù)雜應(yīng)用？

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

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

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

考慮到設(shè)計師和開發(fā)者在面對這類工具的時候的挑戰(zhàn)，我梳理總結(jié)了 8 個復(fù)雜應(yīng)用的設(shè)計原則和指南。

1、采用邊做邊學(xué)的用戶流程

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

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

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

所以，在設(shè)計的時候應(yīng)該提供「跳過教程」的直接上手的偏好設(shè)置，同時進行相應(yīng)的安全性設(shè)置，避免新手的莽撞操作導(dǎo)致?lián)p失。比如可以限制這個階段的用戶執(zhí)行長流程多任務(wù)的操作，讓控制面板實時顯示操作結(jié)果或者預(yù)覽結(jié)果，這樣用戶無需執(zhí)行全部操作就可以知道大概的結(jié)果。

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

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

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

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

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

ArcMap 是一款地理信息系統(tǒng)類工具，它通常會通過上下文環(huán)境下的信息引導(dǎo)，來幫助用戶了解技巧。

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

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

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

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

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

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

所以，在這樣的復(fù)雜應(yīng)用當中，應(yīng)該允許用戶在使用過程中，可以便捷清晰地記錄、保存、 導(dǎo)出內(nèi)容和記錄，允許用戶中斷，中斷后可以恢復(fù)特定的任務(wù)。在任務(wù)進行過程中可以進行注釋、保存相關(guān)的說明。

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

5、可以協(xié)調(diào)多工具并且在工作空間之間轉(zhuǎn)換

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

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

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

微軟的商業(yè)分析軟件 PowerBI 就提供了標準化的導(dǎo)出和復(fù)制功能，非常方便

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

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

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

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

7、主次信息之間要能平穩(wěn)過渡

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

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

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

8、在視覺上突出關(guān)鍵信息

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

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

結(jié)論

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

文章來源：優(yōu)設(shè)(陳子木)   作者：Kate Kaplan

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

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

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

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

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

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

首先了解 Web 端交互支持

Web 端交互圍繞計算機為中心。主要涉及鍵盤鼠標兩類設(shè)備的交互，個別網(wǎng)站的產(chǎn)品可能會涉及麥克風(fēng)聲音采集或攝像頭應(yīng)用。

1. 鼠標允許的交互

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

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

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

2. 鍵盤交互支持

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

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

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

常見的交互動作組合

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

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

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

交互影響的元素

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

• 顏色（例如內(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è)備進行事件觸發(fā)或變量，頁面則將內(nèi)容進行對應(yīng)的呈現(xiàn)。其中交互過程主要影響的事件由“可交互的元素“、“功能交互“、“轉(zhuǎn)場切換“構(gòu)成。

頁面內(nèi)容呈現(xiàn)通常分為“默認時“、“選擇時“、“運行時”三個時態(tài)（鼠標短暫的點擊時屬于“選擇時”，若長按有內(nèi)容影響則屬于“運行時”），因此在網(wǎng)頁交互的過程中，我們需要考慮好這三種完整的狀態(tài)時呈現(xià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)可以分為以下六類：

1. 上下長屏滾動結(jié)構(gòu)：通過長頁面布局內(nèi)容，頁面滾動查看信息
2. 全屏上下切換結(jié)構(gòu)：每次定焦一屏的范圍顯示內(nèi)容，通過滾輪或按鈕上下切屏
3. 全屏左右切換結(jié)構(gòu)：同樣是定焦一屏顯示內(nèi)容，但采取左右切換結(jié)構(gòu)
4. 全屏頁面覆蓋結(jié)構(gòu)：基于全屏定焦顯示，頁面通過覆蓋式切換或跳轉(zhuǎn)，甚至鼠標滾輪深入或淺出頁面。
5. 自適應(yīng)平鋪結(jié)構(gòu)：適用于頁面模塊小而簡單的時候，直接將模塊在屏幕內(nèi)一個個展開即可，一屏放不下時可以換行或繼續(xù)平鋪并定焦
6. 三維場景結(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)品的定位與特色進行組合設(shè)計和開發(fā)呈現(xiàn)，讓你的網(wǎng)站更富有創(chuàng)意和較好的視覺體驗；

1. 幾何色塊搭配文案

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

2. 精美大圖背景搭配內(nèi)容

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

3. 關(guān)聯(lián)插畫或圖標搭配文案

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

4. 留白大圖搭配文案

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

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

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

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

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

7. 柵格化應(yīng)用與板式跳躍率

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

9. 充滿個性的視覺裝扮

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

10. 引用 3D 視覺裝飾

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

11. 產(chǎn)品元素或其他元素來填充背景

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

12. 矩形陳列或卡片陳列

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

13. 極致的簡約

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

14. 魔幻或神秘感界面呈現(xiàn)

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

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

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

1. 光標跟隨動畫

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

2. 鼠標懸浮動畫

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

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

3. 鼠標點擊特效

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

4. 鼠標長按特效

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

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

5. 鼠標拖拽特效

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

示例內(nèi)容：阿里內(nèi)測的 Real 3D

6. 鼠標滾輪巧妙的聯(lián)動效果

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

國內(nèi)官網(wǎng)

7. 鼠標選中自動展開

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

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

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

9. 模塊或分頁加載動效

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

10. 趣味轉(zhuǎn)場或加載等候

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

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

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

12. 內(nèi)容穿插滾動

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

13. 內(nèi)容自動生成

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

14. 游戲互動模式

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

15. 三維或全景空間

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

16. 一鏡到底的視角呈現(xiàn)

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

17. 按鍵交互效果

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

18. 個性的模塊展現(xiàn)方式

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

19. 可交互的顏色或圖形

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

20. 音視頻媒體控制

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

21. 內(nèi)容或窗口抖動

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

22. 打造儀式感

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

23. 有聲交互

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

24. 鏡頭交互

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

網(wǎng)頁創(chuàng)新設(shè)計的方法

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

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

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

那么如何解決呢？

CSS 進行實現(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 等（歡迎補充哈，別藏著掖著）。對于 3D 效果的前端開發(fā)呢，暫推薦新開源的 Oasis 引擎或 Three js 這些來實現(xiàn)，當然其他引擎也沒問題。2. 網(wǎng)頁創(chuàng)新設(shè)計的策略考慮

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

傳統(tǒng)改版：

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

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

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

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

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

3. 明確產(chǎn)品定位，建立設(shè)計語言

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

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

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

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

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

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

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

敏捷開發(fā)：

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

1. Understand 理解

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

2. Define 定義

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

3. Diverge 發(fā)散

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

4. Decide 決策

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

5. Prototype 原型

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

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

6.Validate 驗證

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

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

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

1. 明確產(chǎn)品定位

網(wǎng)站本身即視為一個產(chǎn)品，一個產(chǎn)品的風(fēng)格定向一定是由產(chǎn)品本身屬性或用戶屬性影響，了解產(chǎn)品定位或目標用戶也是重要的環(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)站定位與視覺特征；

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

2. 信息框架決定板式細節(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)，對此可采用

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

圖の處理：

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

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

圖文の處理：

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

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

視頻の處理：

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

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

圖文視頻の混合：

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

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

三維の處理：

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

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

按鈕の處理：

按鈕是網(wǎng)頁中最常見的交互控件，是頁面扭轉(zhuǎn)或功能啟用的基礎(chǔ)

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

控件の處理：

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

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

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

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

基本交互發(fā)力點

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

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

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

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

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

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

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

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

鼠標跟蹤動畫：可以適當?shù)淖鲆恍┦髽烁櫴录?，讓一些背景或界面元素跟隨鼠標律動起來，增強互動

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

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

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

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

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

內(nèi)容或窗口抖動報錯：合理采用抖動效果進行報錯反饋或特殊場景應(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é)合鼠標滾輪聯(lián)動做鏡頭創(chuàng)意，突出產(chǎn)品細節(jié)或內(nèi)容呈現(xiàn)

打造三維或全景場景：根據(jù)產(chǎn)品屬性考慮用三維的場景來增強互動與突出產(chǎn)品

打造儀式感交互：利用視覺和交互變化來制作符合產(chǎn)品的應(yīng)用效果，實現(xiàn)儀式感線上體驗

有聲交互：比較少見，視產(chǎn)品情況應(yīng)用，可以使聲音產(chǎn)生互動或視覺影響

鏡頭交互：適合有鏡頭針對性應(yīng)用的產(chǎn)品采用，需要授權(quán)，要做好隱私說明

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

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

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

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

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

2022 年的 UI/UX 設(shè)計趨勢是什么呢？在本文中，我們將發(fā)現(xiàn)：

1. 3D 視覺設(shè)計師的內(nèi)卷將會越來越嚴重
2. 數(shù)據(jù)可視化的工作將變得越來越重要
3. 服務(wù)的移動化還需要做出更多努力
4. scrollytelling 技術(shù)會越來越流行

滾動已死，滾動敘事興起

舊的滾動是無聊的。如果你想吸引注意力，你就需要實現(xiàn)滾動敘事（scrollytelling）。（彩云注：這個技術(shù)的核心在于邊滾動頁面邊講故事）

《紐約時報》是第一批在他們的文章《雪花飄落》中使用滾動敘事手法的機構(gòu)之一。

它是一種敘事形式，可以在網(wǎng)頁和 APP 上呈現(xiàn)。想象一下，在一個網(wǎng)站中每個插圖、文本和其他元素都開始變得生動起來。自然地，你會想看到這個故事的結(jié)局。它就像一個游戲，帶你穿越迷宮。雖然你不能影響它的進程，但卻讓你感覺自己能參與其中。

2022 年，Scrollytelling 將會出現(xiàn)在你看到的每一個流行網(wǎng)站上。

另一方面，scrolllytelling 讓用戶真正去閱讀內(nèi)容。你可以用動態(tài)文本讓他們產(chǎn)生興趣，比如谷歌的網(wǎng)站。他們的團隊知道如何讓信息看起來更好:

Scrollytelling 在用戶向下滾動時被激活，因此得名。沒有點擊，沒有選擇的麻煩，沒有彈出窗口。你似乎停留在一個地方，但通過滾動，把屏幕上的故事慢慢展開。這不僅要求設(shè)計師創(chuàng)造出酷炫的視覺效果，還需要認真思考一個你想要講述的故事情節(jié)。

所以，最好的網(wǎng)站不可能在 2 天內(nèi)建成，需要更多的時間去打磨。

IAmBinadam 令人驚艷的敘述設(shè)計

滾動敘事的項目通常需要大量的時間和精力。不過，這樣做的結(jié)果是值得的。頁面變成“活的”，每一秒都有新的事情發(fā)生，所以在閱讀時很難感到無聊。

那么移動端 APP 呢? Pure 是一款約會應(yīng)用（彩云注，這個應(yīng)用在 app store 可以搜到，推薦大家安裝一個體驗一下，非廣告），它創(chuàng)造了一種我稱之為“tappytelling”的故事（當你第一次點擊并打開應(yīng)用時，它就會被激活）:

Scrollytelling 是為用戶而創(chuàng)建的，用戶很喜歡它，不需要到其他頁面去閱讀整個故事。相反，網(wǎng)頁設(shè)計的整個故事都是事先考慮好的，并盡可能以最有趣的方式設(shè)計出來。

用戶喜歡看數(shù)據(jù)，數(shù)據(jù)可視化越來越被重視

如何在 2022 年做出一個還不錯的企業(yè)網(wǎng)站？你不會想告訴用戶你是“XX 領(lǐng)域公認的領(lǐng)導(dǎo)者，該領(lǐng)域最好的之一”。這種標準的廣告表達并不傳達任何有價值的信息。

最好不要用形容詞，而是用事實來說明:你有多少分支機構(gòu)，在哪些城市，誰是你的客戶，以及你是如何幫助他們的。抽象信息是不可靠的。但如果你有很多想要分享的數(shù)據(jù)，你需要讓它不僅簡單，而且有趣。

數(shù)據(jù)可視化有助于以一種吸引人的方式傳達正確的信息。它也可以與滾動敘事（Scrollytelling）緊密結(jié)合。以下是 IAmBinadam 展示數(shù)據(jù)的方式:

通過去除數(shù)據(jù)集的復(fù)雜性，使信息更容易讓讀者感知。

不同級別的數(shù)據(jù)具有不同的大小，這樣用戶知道應(yīng)該先從哪里查看

讀者可以很快注意到作者試圖通過圖片引出的結(jié)論?？紤]到如今人們消費的數(shù)據(jù)量巨大，那些干凈整潔的數(shù)字帶來的正面影響更大。

有些圖表乍一看甚至不像圖表，這使得它們更加能被注意到

還有一種現(xiàn)象叫做“新冠后遺癥”。這是 Covid 對公司及其員工的長期影響。根據(jù)英國國家統(tǒng)計局的數(shù)據(jù)，2018 年，壓力和焦慮的平均得分約為 2.7/10。自新冠疫情發(fā)生以來，得分已升至 4.0/10，很少低于這一水平。同樣因為大流行，在過去兩年里工作量增加了 4 個小時。

人們壓力太大，卷的太辛苦，以至于不愿去看復(fù)雜的數(shù)據(jù)。

設(shè)計師做好數(shù)據(jù)可視化，以保持人們的注意力。記住，復(fù)雜的信息通常被忽略，因為讀者試圖節(jié)省他們的時間，更有可能使用滾動按鈕。

Illustration by Mona Chalabi

以下是我們推薦的一些表示數(shù)據(jù)的方式

1. 圖表和曲線圖
2. 插圖
3. 靜態(tài)信息圖
4. 互動信息圖

Illustration by Ink Factory

如何讓信息圖表看起來更好?

一個好的圖表，或者任何其他形式的數(shù)據(jù)可視化，都應(yīng)該具有在 Edward Tufte 的“定量信息的可視化顯示”中描述的特征。在他的書中，Tufte 通過圖表解釋了好圖表的 3 個原則：

1）展示數(shù)據(jù)的圖形元素與數(shù)值總數(shù)的比值應(yīng)趨向于 1。簡單地說，應(yīng)該刪除一切不必要的元素，保持整潔。

Graph by Hootsuite

2）充分利用好畫面空間。也就是說，需要將數(shù)據(jù)編排的更緊密。

Graph by Hootsuite

3）客觀地描述數(shù)據(jù)。不要使用夸張的圖表，可視化數(shù)據(jù)可以看起來很酷，但真實永遠是更重要的。

2022 年還有必要做 APP 嗎？

根據(jù) We Are Social 的數(shù)據(jù)，2021 年有 52.2 億人使用手機，約占世界人口的 66%。自 2020 年 1 月以來，手機用戶數(shù)量增長了 1.8%(9300 萬)，而手機聯(lián)網(wǎng)總數(shù)量增長了 7200 萬(0.9%)，到 2021 年初達到 80.2 億。

過去一年，社交媒體用戶的數(shù)量增長了 13%以上。到 2021 年初，社交網(wǎng)絡(luò)上已有近 5 億新用戶注冊。根據(jù) App Annie 的數(shù)據(jù)，Android 用戶每天花在手機上的時間超過 4 小時。2020 年，安卓用戶上網(wǎng)時長超過 3.5 萬億小時。

令人印象深刻的數(shù)字，是嗎？似乎到 2022 年，為產(chǎn)品做一個 APP 將成為必須擁有的東西。如何知道你的公司是否真的需要一款應(yīng)用？有以下幾點可供評估：

1）用戶主要通過移動設(shè)備訪問你的網(wǎng)站

這是你應(yīng)該了解的重要數(shù)據(jù)?？蛻艉湍阍谝黄鸬臅r間越長，你就有越多的機會去吸引他們，了解他們的習(xí)慣，并給他們想要的東西。（彩云注：這就是為什么各大廠之間都在拼命搶占用戶的在線時長。）

2）幫助內(nèi)部業(yè)務(wù)流程更加有效

如果你想要提高員工的工作效率、改進工作流程或增加利潤，那么就制作一個可以幫助管理業(yè)務(wù)流程的移動應(yīng)用。

如今，像這樣的手機應(yīng)用使企業(yè)能夠執(zhí)行越來越復(fù)雜和多樣化的任務(wù)，加快日常重復(fù)操作和文檔管理。

3）實現(xiàn)一些網(wǎng)站上沒有的新功能

如果你認為 APP 能為用戶打開新的觸點，并讓用戶體驗更加友好，那么它就值得考慮開發(fā)。問問自己的 APP 能提供什么新的商業(yè)機會？例如，隨著疫情的蔓延，許多人開始用上健身 APP 在家里鍛煉。

4）競爭對手的情況

要了解競爭對手在做什么，他們是否有 APP，能做什么，以及他們是否真的對用戶有用。

查看 App Store 和谷歌 Play 的統(tǒng)計數(shù)據(jù)。下載和評論的數(shù)量可以告訴你用戶是如何使用競爭對手的應(yīng)用的。如果他們的服務(wù)真的很方便而且很有必要，那么你就容易被甩在后面。

5）復(fù)購率

一個應(yīng)用可以幫助你留住那些習(xí)慣從你那里購買的人。如果想為老客戶開展促銷活動了，給他們發(fā)送一個通知就能完成，成本更低。

在正確的時間提供的報價越有吸引力，人們購買的可能性就越大。

出租車服務(wù)公司有回頭客，他們肯定需要一個應(yīng)用

6）促銷工具

有了應(yīng)用，你就不需要花錢設(shè)計和制作實體卡，客戶也不需要隨身帶卡。將促銷計劃整合到 APP，并分享有用的促銷信息。

做原生 APP 還是移動端網(wǎng)站?

開發(fā)手機網(wǎng)站比開發(fā)手機應(yīng)用需要更少的工作量，這反過來可以降低整體推廣成本。

這部分是由于響應(yīng)式設(shè)計的出現(xiàn)，它允許你根據(jù)打開網(wǎng)站的設(shè)備屏幕來調(diào)整網(wǎng)站。至于 APP，它們必須為許多移動平臺單獨編寫:Android、iOS、Windows 等。

一些設(shè)計師認為“前端驅(qū)動的網(wǎng)絡(luò)體驗”會是 2022 年的一個好機會，我非常同意!
（彩云注：在國內(nèi)，現(xiàn)在開發(fā)小程序的肯定越來越多了。）

3D 設(shè)計具備更強競爭力

我們一開始并沒有將其放在首位，因為這并不是一個新的趨勢，在很久以前設(shè)計師們就已經(jīng)設(shè)計了很多 3D 圖像和動畫了。

Cardi B rhymes with 3D

3D 技術(shù)已經(jīng)在過去流行了很多年，但它不會很快消失。此外，我們預(yù)測 3D 圖形將變得更加多樣化和包容。

在過去的幾年里，3D 藝術(shù)和動畫已經(jīng)出現(xiàn)在各種 UI 設(shè)計趨勢評論中。這意味著越來越多的設(shè)計師將它們整合到頁面中。

3D 當然應(yīng)該成為 2022 年最熱門的趨勢和預(yù)測之一，因為與經(jīng)典動畫相比，逼真的 3D 形狀結(jié)合動畫總是引人注目的。

“從技術(shù)上講，通過 3D 更容易傳達更多內(nèi)容，因為它比平面圖片更接近我們的感知。3D 插圖更有深度，信息量更大，也更具互動性。”

許多設(shè)計師將 3D 對象無縫地“安置”在 2D 空間中。它允許創(chuàng)建更有趣的組合，也作為一個優(yōu)秀的工作方法蘊藏著巨大的潛力。

烏克蘭政府網(wǎng)站用 3D 手模擬了黑客帝國

注意一點：在整合 3D 圖形等重量級內(nèi)容之前，確保你的應(yīng)用性能是 OK 的，能夠快速加載所有元素。

元宇宙風(fēng)潮

Meta 的 logo 既不是 2D 也不是 3D?；蛘邇烧呒娑兄?？這就是即將到來的 2022 年的莫比烏斯帶和薛定諤的貓。

Meta logo 的變化

（彩云注：這個概念在去年簡直不要太火，未來幾年肯定還會是一個大的趨勢，設(shè)計師也需要保持關(guān)注。跟著趨勢走，易于放大自身價值。）

混合動畫

越來越多的公司在網(wǎng)站和移動應(yīng)用中使用動畫，以提高用戶的沉浸感和體驗，使內(nèi)容更有趣。

動畫是 2022 年重要的網(wǎng)頁設(shè)計趨勢。2022 年，如果沒有它，你的產(chǎn)品很可能會看起來就像個半成品?；旌巷L(fēng)格的動畫越來越受歡迎:定格動畫和 3D 動畫的結(jié)合，2D 動畫和 3D 動畫的結(jié)合。設(shè)計師這樣做是為了獲得不同尋常的風(fēng)格解決方案，以及提高最終產(chǎn)品的質(zhì)量。

2022 年，動畫設(shè)計將是品牌市場定位的重要組成部分，想想一個公司新的視覺形象——動畫形象。隨著這個領(lǐng)域的專業(yè)設(shè)計師數(shù)量的增長，實現(xiàn)新想法的機會也在增加。

2022 年如何使用網(wǎng)頁動畫?

1）講故事

動畫可以通過在界面和用戶之間建立情感聯(lián)系來傳達信息。

加載動畫 Yoichi Kobayashi

2）更有趣的加載

用戶不愿意等待，除非載入畫面很有趣。帶有百分比的動畫不僅可以分散用戶的注意力，還可以告知他們加載頁面需要多少時間。使用進度條或者任何你能想到的可以顯示時間流逝的東西。

3）光標效果

用戶可以精確地觀察光標所在的位置。通過添加智能互動動畫，對這個光標作出反應(yīng)來探索網(wǎng)站。這種效果在 21 世紀初非常流行。如你所知，流行趨勢往往每 20 年就會重演一次。

4）動態(tài)排版

你有沒有想過讓字母跳舞?

添加角色的動畫插圖

據(jù) Statista 統(tǒng)計，2020 年全球動畫市場達到了 2700 億美元。趨勢是視頻，而不是靜態(tài)信息。全球品牌在社交網(wǎng)絡(luò)上使用動畫制作廣告。毫無疑問，動畫插圖的優(yōu)勢是它們非常靈活和多樣化。

寶馬歷史動畫

這樣的作品通常用于兩種情況:

1）用于解釋視頻

2）電商廣告

動畫解說的趨勢出現(xiàn)在幾年前，解說視頻清楚地顯示點擊的位置或公司的項目是關(guān)于什么的。

在招聘或商業(yè)視頻中，用戶更喜歡看畫出來的人物，而不是抽象的形狀或物品。畫出來的人物可以喚起情感共鳴，就像活著的人一樣。

微交互，大影響

微交互是幫助用戶瀏覽網(wǎng)站或應(yīng)用的小界面變化。通常這些是作為提示用戶的視覺或聲音效果：它們顯示發(fā)生了什么，將導(dǎo)致什么操作，下一步需要做什么。

圖片來源 awwards

動畫交互將為你的設(shè)計注入活力，并有助于保持用戶粘性。關(guān)注每一個細節(jié)是設(shè)計師工作的關(guān)鍵，因為設(shè)計中的所有元素都可以帶來積極的用戶體驗。

重要的是要達到元素的和諧，而不是把注意力分散到界面的各個方面。微交互作用的一個重要部分是顏色，它們?yōu)榻缑嬖卦鰪妰r值。

CTA animated

微交互有助于頁面導(dǎo)航，解釋它們的功能。最重要的方面之一是加快和簡化以前冗長的功能，以實現(xiàn)特定的行為。

動態(tài) logo，加深品牌印記

2022 年，在線品牌面臨著新的挑戰(zhàn)，需尋求新的解決方案，其中之一就是動畫 logo 設(shè)計。

圖片來源 Toridori

動畫 logo 主要有以下幾點營銷優(yōu)勢:

1. 吸引注意力。這意味著它們有助于提高品牌知名度。
2. 有助于提高 SEO。谷歌更傾向于動態(tài)內(nèi)容，帶有動態(tài)圖形的頁面更容易吸引用戶。
3. 在移動端看起來更好。絲滑的動畫看起來比靜態(tài)的 logo 更有趣。
4. 最重要的是展示了歷史。靜態(tài) logo 背后的想法正在動畫中發(fā)展。由于這一點，在幾秒鐘內(nèi)，你可以展示品牌的使命，甚至它的價值!

一家洗衣機[公司]的標志

現(xiàn)在有很多設(shè)計模板，可以很容易地用字體制作一個動畫 logo:

來源 Shabello, Bobby Voeten

最后的話

設(shè)計趨勢總是在變化的，但是設(shè)計的意義不會變。如果你不能深刻理解這一點，那么任何設(shè)計趨勢的文章不能幫你做好設(shè)計。

文章來源：優(yōu)設(shè)   作者：彩云Sky

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

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

用戶找不到=不存在 

在數(shù)字界面中，可發(fā)現(xiàn)性定義了用戶在產(chǎn)品中查找新內(nèi)容或功能的難易程度。在許多情況下，良好的可發(fā)現(xiàn)性至關(guān)重要，因為用戶找到所需內(nèi)容的能力將直接影響其完成特定任務(wù)的能力。

在本文中，我們將討論可發(fā)現(xiàn)性的概念和其重要性所在，以及設(shè)計可發(fā)現(xiàn)性的詳細技巧。

為什么為設(shè)計可發(fā)現(xiàn)性這么困難？

UX中的Findability和Discoverability這兩個術(shù)語經(jīng)?；Q使用。雖然二者相關(guān)，但它們不是一回事，關(guān)鍵區(qū)別在于用戶對內(nèi)容的看法。Findability是指用戶已經(jīng)知道或認為存在于產(chǎn)品中的內(nèi)容或功能的能力。而Discoverability是用戶遇到新內(nèi)容或以前不知道的內(nèi)容或功能的能力。

這種差別使我們更容易理解——為什么設(shè)計高度可發(fā)現(xiàn)的界面如此困難。在許多情況下，用戶并不是有意識地尋找新內(nèi)容。人們只想簡答地使用產(chǎn)品，如果沒有遇到新功能或新內(nèi)容，用戶壓根兒不會想到去尋找它們，因為一開始就不知道它們是作為產(chǎn)品的一部分存在的。注重可發(fā)現(xiàn)性是UX設(shè)計師解決此問題的途徑，好讓用戶更容易發(fā)現(xiàn)這些新功能。

12個提升UX可發(fā)現(xiàn)性的技巧

許多因素都會影響用戶界面的可發(fā)現(xiàn)性。以下是12個技巧，幾乎適用于所有想要提升可發(fā)現(xiàn)性的產(chǎn)品。

技巧1：設(shè)計熟悉的界面

許多設(shè)計師喜歡試驗和嘗試新方法，但在嘗試創(chuàng)建新內(nèi)容時，往往適得其反，使用戶更難以理解頁面。

依據(jù)設(shè)計常識創(chuàng)建界面，這是設(shè)計師的責(zé)任。使用現(xiàn)有的設(shè)計規(guī)范（例如，操作系統(tǒng)的設(shè)計范例），結(jié)合用戶需求建立可發(fā)現(xiàn)性，更容易獲得用戶的認可。因為人們通過自身經(jīng)驗去感受一個新事物時，是非常容易理解其內(nèi)在邏輯的。例如，許多網(wǎng)站將導(dǎo)航菜單放置在頁面頂部，緊鄰網(wǎng)站的Logo，也是大多數(shù)用戶不假思索就能找到的位置。

技巧2：優(yōu)先安排有價值的內(nèi)容和功能

當我們在UI中隱藏某些內(nèi)容時，會加大用戶找不到它的風(fēng)險。移動應(yīng)用和網(wǎng)站之所以放棄漢堡菜單，轉(zhuǎn)而使用標簽欄的原因就是UX的可發(fā)現(xiàn)性。雖然漢堡菜單通過隱藏導(dǎo)航選項來節(jié)省屏幕空間，有句說話說的好“眼不見，心不煩”，隱藏的選項也更容易被忘記。

良好的可見性可以帶來更多的曝光率——元素越明顯可見，用戶就越有可能記住它?？梢妼?dǎo)航就如一個標簽欄，告訴用戶他們有哪些選項，并使其成為首要考慮因素。

技巧3：按邏輯順序?qū)?nèi)容和功能元素分組

具有密切關(guān)系的項目應(yīng)被組織在一起，該規(guī)則適用于內(nèi)容（例如，電子商務(wù)網(wǎng)站上定義產(chǎn)品類別的信息架構(gòu)）和功能（例如，Instagram上的濾鏡）。通過在結(jié)構(gòu)中引入邏輯順序，可以使用戶更輕松快捷地找到他們想要的東西（在開始UI工作之前，進行Tree testing以了解用戶的心理模型至關(guān)重要，它能幫助你根據(jù)用戶需求搭建內(nèi)容）。

技巧4：減少視覺上的混亂

UI設(shè)計里的一個常見誤區(qū)，為了使對象更容易被發(fā)現(xiàn)，它應(yīng)該一直可見。假設(shè)按剛剛說的去設(shè)計，把所有可用對象都堆在頁面里，反而更混亂。

視覺混亂通常是出現(xiàn)了不必要的功能和裝飾元素，它們阻止用戶與產(chǎn)品交互。這種混亂不僅放慢了使用速度，還讓基本功變得難易被發(fā)現(xiàn)。

Microsoft Word中，太多可見選項造成視覺混亂 by Amansinghblog

即使頁面/屏幕有非常良好的視覺層次結(jié)構(gòu)，但人們的注意力跨度有限，人腦通過眼睛感知事物的能力也有限。因此，確定對象的優(yōu)先級非常重要。刪除所有不必要的元素，為剩余元素增加視覺權(quán)重，才能讓真正重要的內(nèi)容和功能脫穎而出。

技巧5：減少選項總數(shù)

希克定律指出，用戶做出的決定越多，決策過程所需的時間就越長，限制 or 提供大量選擇？設(shè)計師要掌握平衡?？礈蕰r機提供選項，不僅簡化決策過程，還能為用戶提供發(fā)現(xiàn)、探索和嘗試所有可用選項的空間（和信心）。

技巧6：提供視覺反饋

視覺反饋是指用戶在執(zhí)行任何交互時獲得的可見響應(yīng)。例如，當我們將鼠標懸停在網(wǎng)站鏈接上時，我們會看到一個視覺響應(yīng)——鏈接改變了顏色。這種微小的視覺變化非常重要，因為它可以增強用戶體驗，消除不確定性。用戶知道某些元素是可以交互的，以及下一步該怎么做，從而采取行動。

技巧7：使用常見熟悉的圖標

交互元素使用不常見的圖標是導(dǎo)致問題的“罪魁禍首”。當用戶看到未知圖標時，他們無法預(yù)測點擊該圖標會發(fā)生什么。這種猜測對產(chǎn)品團隊來說成本很高，因為在許多情況下，用戶會跳過該選項。

怎么才能知道圖標是否令人困惑？測試一下，向?qū)嶋H或潛在用戶詢問涉及元素的作用，如果他們給不出明確答案，那就用一個更常見的圖標替換。

技巧8：使用動畫吸引用戶的注意力

人眼會自然地聚焦在移動的物體上，微妙的動畫可以引導(dǎo)用戶轉(zhuǎn)向某些特定的內(nèi)容或功能，動畫還可以解釋如何與對象交互。

技巧9：注意手勢交互

手勢是隱藏的交互控件，它們可能導(dǎo)致很多可發(fā)現(xiàn)性問題。除非用戶知道某些手勢，否則他們不會嘗試。產(chǎn)品中使用普遍接受的手勢交互，別試圖加入太新奇的交互形式。考慮到手勢對于許多用戶來說仍然是一個相對較新的概念，因此在新設(shè)備上很有必要進行入門介紹。

非常規(guī)手勢（例如雙擊點贊）可能會對可發(fā)現(xiàn)性產(chǎn)生負面影響，用戶可能注意不到這些手勢在應(yīng)用程序里是被支持的 by Dribbble

技巧10：適當調(diào)整UI元素的大小

設(shè)計師為什么要對標題和常規(guī)文本使用不同的視覺樣式，這是有原因的——想讓用戶更容易注意到文本內(nèi)容。同樣的策略也適用于UI設(shè)計，通過對比不同大小的元素，將用戶注意力吸引到關(guān)鍵信息上。例如，著陸頁上的一個超大的號召性按鈕，清楚地告訴用戶當他們點擊該按鈕時，下一個動作應(yīng)該是什么，以及會發(fā)生的是什么（大型UI元素在可用性方面也很有益，因為它們更容易在移動設(shè)備上使用）。

號召性按鈕越大且越突出，你期望用戶執(zhí)行的操作也越明顯 by Firefox

技巧11：提供視覺可供性

有時候即便用戶發(fā)現(xiàn)了一個對象，他們也可能不知道如何使用?？晒┬杂脕碇笇?dǎo)元素如何應(yīng)用，沒有可供性的話，用戶只能靠猜測使用產(chǎn)品/對象（很可能不會使用）。在數(shù)字界面中，設(shè)計師應(yīng)把形狀和產(chǎn)生的交互進行具象聯(lián)系，例如，當我們看到帶有“提交”標簽的矩形對象時，我們就知道這是一個按鈕。

技巧12：提供視覺線索

視覺線索是引導(dǎo)用戶轉(zhuǎn)向特定的內(nèi)容或功能的UI元素，一個典型示例是滾動網(wǎng)站上的動畫箭頭，該箭頭會引導(dǎo)用戶朝特定的方向前進。

注意到圖像系列最右端的箭頭嗎？該視覺線索提示訪問者，水平畫廊是可滾動的 by Netflix

文章來源：UX辭典(站酷)

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

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

按鈕設(shè)計

為了設(shè)計正確的交互，我們需要回顧一下物理按鈕的歷史和起源。物理按鈕是UI組件的前身，當今的數(shù)字產(chǎn)品都還在大量使用它們。按鈕很棒，即使用戶不了解基本的機制或算法，只用手指觸摸就可以讓電器、汽車或系統(tǒng)運行/關(guān)閉。在《Power Button》中，作者Rachel Plotnick描述了當今按鈕文化的起源，并解釋了按鈕是如何成為數(shù)字命令方式的。

“你按下按鈕，剩下的我們來做?！?——柯達相機的醒目標語吸引了潛在消費者。

即使在今天，這也是吸引用戶的地方——通過簡單觸摸就能讓事情發(fā)生的即時滿足感。盡管有大量新的家用電器和設(shè)備都變成了觸摸屏，但物理按鈕并不會消失，因為它們讓人形成的行為習(xí)慣，會影響按鈕設(shè)計的直觀性和易用性，是一種永遠存在的實物參考。

01 按鈕 vs 鏈接

按鈕向用戶傳遞了操作的可執(zhí)行性，在整個UI里很常見，例如：對話框、表單和工具欄等。按鈕和鏈接之間的區(qū)別，請注意：

-鏈接是導(dǎo)航到另一個地方時應(yīng)用的，例如：“查看全部”頁面、“ Roger Wright”個人簡介等；

-按鈕是在執(zhí)行動作時應(yīng)用的，例如：“提交”、“合并”、“創(chuàng)建”、“上傳”等。

02 讓用戶直觀感受按鈕狀態(tài)

為按鈕創(chuàng)建正確的交互和樣式，是按鈕設(shè)計過程中重要的組成部分之一。在不改變組件或產(chǎn)生視覺干擾的前提下，每個按鈕的狀態(tài)都必須有明確定義，以使其與周圍布局區(qū)別開來。

正常—表示該組件已啟用交互；

突出提示—用戶使用鍵盤，進入編輯狀態(tài)；

鼠標懸停—當用戶將鼠標置于交互式元素上方時；

點擊—按下狀態(tài)表示用戶已輕點按鈕；

進度/加載—用戶操作行為沒有立即執(zhí)行，表示正在完成操作中；

禁用—表示該組件當前處于非交互狀態(tài)，但將來可以啟用。

03 按鈕的顏色、形狀和大小

常見的是圓角矩形按鈕，這些按鈕即使在輸入框旁，用戶也能快速識別。按鈕樣式的選擇取決于用途、平臺和應(yīng)用準則。以下是一些最受歡迎的樣式變化：

04 建立按鈕樣式等級

樣式主要用于區(qū)分重要和不重要的動作。創(chuàng)建動作層次結(jié)構(gòu)，該層次結(jié)構(gòu)將指導(dǎo)用戶進行多種選擇。通常，可以有一個突出的按鈕（該樣式通常稱為“首要”按鈕），剩下的按鈕則依據(jù)重要程度建立不同的樣式等級。

05 《Don’t Make Me Think》

這是可用性工程師Steve Krug撰寫的書籍標題，其中講到了一點：對用戶而言，界面清晰明了非常重要，不要給用戶制造難題。人們周圍其實已經(jīng)被電子產(chǎn)品包圍了，多年使用各種設(shè)備、軟件的經(jīng)驗，一定程度上固化了人們對按鈕外觀和功能的認知。如果與常見的“標準”存在較大偏差，也會給用戶造成困惑。

避免對交互式和非交互式元素使用相同的顏色，否則用戶不知道該點擊哪里。

06 一致性的重要性

“一致性是最強大的可用性原則之一：當事物始終表現(xiàn)相同時，用戶不必擔(dān)心會發(fā)生什么?！?—雅各布·尼爾森（Jakob Nielsen）

一致性提升了速度性和準確性，有助于避免錯誤。創(chuàng)建可預(yù)測性，幫助用戶控制和實現(xiàn)產(chǎn)品中的目標。當創(chuàng)建主要、次要和第三種樣式時，試著找找一致元素，如顏色、形狀等。按鈕設(shè)計不僅要在設(shè)計系統(tǒng)內(nèi)部保持一致，在整體平臺也要進行統(tǒng)一。

07 使按鈕足夠大以實現(xiàn)可靠交互

按下按鈕應(yīng)該是一個簡單的操作任務(wù)，如果用戶無法正常進行，或在過程中錯誤地按到了相鄰元素，不但給用戶造成了負面體驗又浪費了時間。

對于大多數(shù)平臺，請考慮被觸摸的目標至少為48x48dp。無論屏幕大小，這種尺寸的觸摸目標的物理尺寸應(yīng)為9mm，觸摸屏元件的目標尺寸至少是7-10mm。

對于圖標按鈕來說，請確保觸摸目標超出元素的可視范圍。這不僅適用于移動設(shè)備、平板電腦，同時也適用于網(wǎng)絡(luò)上的指示設(shè)備，比如鼠標。

08 無障礙設(shè)計

所有組件都應(yīng)推行無障礙設(shè)計。目標區(qū)域的大小是影響可訪問性的因素之一，其他的則是字體大小、顏色和對比度，也有很多工具能檢查組件的設(shè)計性能。

設(shè)計師應(yīng)與開發(fā)團隊緊密合作，確保按鈕與屏幕閱讀器協(xié)同工作。添加role =“ button”將使一個元素作為按鈕控件出現(xiàn)在屏幕閱讀器上。

09 手勢應(yīng)用

手勢應(yīng)用，讓用戶可以通過觸摸與應(yīng)用程序進行交互。使用觸摸來完成任務(wù)，不僅提供了觸覺控制還非常節(jié)約時間。某些手勢（比如滑動以觸發(fā)上下文動作、雙擊或長按來標記喜歡等）每天都被人們廣泛使用，但對于普通用戶而言，它們?nèi)匀徊惶黠@，建議把它們替換給高級用戶執(zhí)行操作。

10 按鈕標簽信息易于理解

按鈕傳達的信息與其外觀一樣重要，錯誤的信息會讓用戶感到困惑，甚至是誤導(dǎo)用戶操作。正確的按鈕標簽會引導(dǎo)用戶完成操作，最好使用動詞，并在按鈕上標記其實際功能。

就像按鈕在問用戶——“您要（添加到購物籃中）嗎？” 或“您要（確認訂單）嗎？”，避免使用Yes/No或過于通用的標簽，比如Submit。

11 確定/取消，還是取消/確定？

兩者都是正確選擇，但設(shè)計師可能會花幾個小時來討論哪個更合適。

-確定按鈕在前，是自然流暢的閱讀順序。Windows把確定按鈕放在了前面；

-確定按鈕在后，可以幫助改善流程。這種順序形式，幫助用戶再采取行動前，對所有選項評估，有效地幫助人們避免錯誤。蘋果則是把確定按鈕放在最后的；

任何一種選擇其實都沒有錯，也不會造成什么可用性災(zāi)難。

12 避免使用禁用按鈕

每個人都遇到過這種情況：在屏幕上停留了幾秒或幾分鐘，怎么操作都沒反應(yīng)，這才發(fā)現(xiàn)原來是禁用按鈕使我們無法進行下一步。禁用控件讓組件短暫處于非交互狀態(tài)，但如果使用不當，則非常容易讓用戶產(chǎn)生負面情緒。

我建議盡量避免禁用按鈕，最好始終啟用它，如果用戶未提供某些必需信息，則只需突出顯示空白字段或顯示通知可。

文章來源：UX辭典(站酷)

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

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

交互輸出文檔的作用

文檔這個東西，我們又愛又恨，愛的是它能夠記錄并且在工作中讓大家高效的協(xié)調(diào)合作，恨的就是很多人對文檔嗤之以鼻非常敷衍，以至于文檔不但沒有起到它應(yīng)有的作用，反而成為了一個不負責(zé)任的借口。所以一份合格或者優(yōu)秀的交互輸出文檔對于一個項目的流轉(zhuǎn)以及團隊的配合來說是至關(guān)重要的。交互文檔的主要利益相關(guān)者通常是以下幾個角色：交互、產(chǎn)品、開發(fā)、UI

交互

首先優(yōu)秀的交互文檔必須在交互組內(nèi)部進行過審核，包括一致的撰寫標準和模式的使用，一個比較規(guī)范的交互設(shè)計組對于交互的撰寫標準也是有嚴格的規(guī)范的，以及在什么情況使用什么交互模式還有組件庫的調(diào)用都會有詳細的說明，那么你的交互輸出文檔就必須滿足團隊設(shè)定的規(guī)范。

其次對于其他交互設(shè)計師來說，你的設(shè)計方案中是否會出現(xiàn)其他人負責(zé)的模塊，那么在評審的時候需要同步，雖然交互輸出文檔對于其他交互來說不是直接受益人，但是在團隊同步過程中也是非常重要的。

產(chǎn)品

每個公司對于文檔的要求和規(guī)則不一樣。小公司可能沒有交互設(shè)計這個崗位，那么可能產(chǎn)品連prd文檔也沒有，僅僅只是一個簡易的需求說明文檔，就更不用說針對交互規(guī)則的說明文檔了。

很多有完善規(guī)模和流程的團隊不僅會有詳細的需求說明文檔也有很完善的交互說明文檔。我們首先要明確的一點是那么多文檔最后是給誰看的，一共在項目中會有多少文檔產(chǎn)生。

通常產(chǎn)品經(jīng)理會在項目初期做一份prd文檔（Product-RequirementDocument，需求說明文檔），這個prd文檔主要是給業(yè)務(wù)方、交互和開發(fā)看的，在這個文檔中需要包含一些業(yè)務(wù)規(guī)則以及交互規(guī)則，所以交互的輸出文檔是需要和產(chǎn)品的prd文檔合并的。

當然如果你是一位很有自驅(qū)力的人，那么你可以自己推進需求并落地，一個人就可以完成prd文檔的撰寫和需求的落地了。

開發(fā)

特別想給各位提個醒，在開發(fā)需求評審的過程中，請一定記住你們評審的目的，開發(fā)同學(xué)也要注意，請把重點放在需求是否能實現(xiàn)以及開發(fā)相關(guān)的地方即可，請不要考慮為什么要這樣做，或者你覺得應(yīng)該怎么設(shè)計，一旦進入了開發(fā)對需求和設(shè)計的評頭論足那么這個會議效率就相當?shù)拖隆?/strong>專業(yè)的事情就交給專業(yè)的人去做吧，可以私下討論但不要在評審會上各抒己見。