網(wǎng)頁設計是獨一無二的，因為它需要設計師和用戶才能使其工作。畢竟，將設計放在像計算機這樣的交互式媒體上的全部目的是讓用戶可以很好地使用它。互動也是衡量網(wǎng)站訪問者參與程度的一個很好的衡量標準，因為如果他們在互動，他們就會在關注。良好的交互式網(wǎng)頁設計將迫使用戶與網(wǎng)站互動，向下滾動并消費更多內(nèi)容，導航到其他頁面，與朋友分享，當然，點擊那個號召性用語按鈕。
交互式網(wǎng)頁設計面臨的挑戰(zhàn)之一是用戶可以通過多種方式與頁面進行交互，并且頁面可以響應的方式更多。一些交互式設計將創(chuàng)造無縫的用戶體驗，為用戶提供反饋并指導他們下一步做什么。有些會不太明顯，響應與用戶的操作不匹配，或者更糟糕的是，不存在。
為了學習如何區(qū)分良好的互動網(wǎng)站體驗和糟糕的互動網(wǎng)站體驗，我們將向專業(yè)人士學習。在這里，北京vi設計公司廣州標志設計公司匯總了一些我們最喜歡的示例并討論了使它們起作用的原因，從而為交互式Web 設計編制了 6 個有用的技巧。
1.利用加載屏幕時間
-
加載可能是網(wǎng)絡瀏覽體驗的最大障礙之一。企業(yè)可以投入大量金錢和精力來建立一個出色、漂亮的網(wǎng)站，但如果加載時間超過兩秒鐘，研究表明訪問者在看到任何內(nèi)容之前離開的可能性會成倍增加?？梢怨降丶僭O用戶體驗加載是一種負面體驗。
但加載屏幕也可能是一個機會。如果你有用戶的注意力，為什么不充分利用它呢？這些時刻提供了一個意想不到的機會，因此是通過動畫給用戶留下深刻印象的特別機會。它們是展示品牌個性并吸引和激發(fā)用戶的新奇機會。通常，這些動畫實際上通過加載條（或類似的東西）給用戶一種進度感，以展示用戶訪問下一頁之前還剩多少時間。
理想情況下，這些加載屏幕為用戶提供了一些可做的事情，例如在他們等待時玩游戲，從而創(chuàng)造有趣的互動體驗。
關鍵是加載并不一定意味著用戶的負面體驗。它們甚至不必只是快速和輕松——有時，它們是網(wǎng)站中最令人興奮的部分。
2. 通過動畫滾動組織信息
——
滾動是用戶可以進行的最簡單和最直觀的交互之一。但僅僅因為用戶可能不會考慮滾動，并不意味著網(wǎng)頁設計師不應該這樣做！設計師有很多方法可以利用滾動動畫來給用戶一種在整個網(wǎng)站上動態(tài)運動的感覺。讓我們來看看一些常見的。
一種流行的技術是在用戶滾動瀏覽網(wǎng)站時觸發(fā)特定的動畫來激活。將視覺效果帶入生活非常神奇，它創(chuàng)造了一種錯覺，即用戶正在訪問的頁面實際上是實時構建的，以響應他們的交互。
視差滾動（又名不對稱滾動）
一種獲得關注的類似技術是視差滾動。當用戶向下滾動頁面時，這種類型的移動涉及到屏幕上的兩個對象以兩種不同的速度移動。結果是模擬3D 運動深度，因為前景對象通常比背景對象移動得更快。
滾動頁面轉換
最后，北京vi設計公司廣州標志設計公司可以使用整頁過渡，將傳統(tǒng)的平滑滾動替換為跳轉到下一個屏幕或批量更改頁面。這可以創(chuàng)造一種戲劇性的效果，不僅引入了新的頁面元素，有時還引入了完全不同的配色方案，讓網(wǎng)站在每次滾動時都感覺煥然一新。
總體而言，這些滾動動畫為用戶提供了有關其交互的重要反饋——讓他們知道他們剛剛進入了網(wǎng)站的一個新部分，并且應該期望所傳遞的信息類型會發(fā)生變化。簡而言之，它們在令人印象深刻的交互式軟件包中提供了清晰的層次結構和組織。
3. 使用滑塊和旋轉木馬分解垂直運動
—
輪播之所以被稱為輪播，是因為它們將網(wǎng)站內(nèi)容壓縮成用戶可以循環(huán)通過的旋轉部分，就像現(xiàn)實生活中狂歡節(jié)的旋轉門運動一樣。
由于移動應用程序中滑動交互的日益普及，它們在網(wǎng)站上變得越來越普遍。因為它們本質(zhì)上是一種水平滾動的形式，它們?yōu)橛脩籼峁┝艘粋€非常需要的突破，可以讓用戶擺脫垂直滾動的無窮無盡的單調(diào)。
但這并不是你可能想要打破垂直運動的唯一原因。正如北京vi設計公司廣州標志設計公司前面提到的，用戶傾向于將向下滾動與進入網(wǎng)站的新部分聯(lián)系起來。另一方面，輪播和滑塊允許網(wǎng)頁設計師在每個部分中加入更多上下文，因為從技術上講，用戶并沒有離開它們。
這意味著輪播不是一次將所有必要信息弄亂頁面，而是將站點元素折疊成更多的小段，允許用戶一點一點地循環(huán)瀏覽它們。
這在內(nèi)容格式相似時效果最佳，因此將產(chǎn)品圖像、配置文件或客戶推薦等組合在一起。它們對于展示變化也很有用，例如不同顏色的產(chǎn)品。在動畫這些輪播方面，樣式范圍從簡單的從左到右的過渡，到洗牌，到讓人想起復古viewmaster 幻燈片的旋轉輪動畫。
4. 放大導航菜單
——
與滑動一樣，漢堡菜單是移動/應用程序設計的另一個常見趨勢，已進入桌面網(wǎng)站。即使?jié)h堡圖標本身不存在，用戶通常也熟悉不需要一直顯示導航的想法。用戶知道它就在那里，并且他們可以在需要時與之交互。隱藏菜單可以為網(wǎng)頁的其余部分提供呼吸空間，同時，菜單
由于用戶現(xiàn)在選擇拉起菜單，因此許多北京vi設計公司廣州標志設計公司正在使用占據(jù)整個屏幕的導航來響應該調(diào)用。這允許大字體、描述性圖像和時髦的懸停動畫。
用菜單交互做大是有道理的：導航就是控制。用戶正在有效地操縱船舶，強調(diào)菜單有助于用戶可視化他們在頁面上的權重?？偠灾?，菜單設計在需要之前一直隱藏，在這一點上它們變得比生命更大。如果你問我，這與以前的灰色屏幕頂部嵌套列表相比是一個不錯的變化。
5. 用用戶問卷代替表格
——
與網(wǎng)站交互最繁重的部分之一是輸入信息。用戶通常對在網(wǎng)站上泄露他們的信息持謹慎態(tài)度。緩解這種情況的最好方法是讓這個過程不像在醫(yī)生辦公室填寫表格，而更像是一個了解你的問答環(huán)節(jié)。
事實上，這種技術的一個典型例子來自稅務服務，比如一些稅務準備公司，他們將稅務表格分解為簡單、易于理解的問題。這對于具有多種潛在產(chǎn)品要出售給網(wǎng)站訪問者并且需要通過了解他們的需求、品味、預算等來幫助縮小選擇范圍的服務特別有用。
6.不要忽視微交互
——
當談到交互式網(wǎng)頁設計中的動畫時，小動作才是真正的賣點。當你考慮到網(wǎng)站動畫的目的通常是反饋時（比如讓用戶知道他們可以和什么不能交互，或者他們是否做了正確的事情），這種反饋在潛意識層面。
過于關注自身的動畫可能會分散用戶的注意力，從而掩蓋了他們?yōu)榱苏故緞赢嫀煹募寄芏胍獋鬟_的任何反饋。這就是微交互的用武之地。
微交互是一個廣泛的類別，描述了用戶可能與頁面交互的所有小方式。微交互的一些示例包括懸停在某物上、關閉窗口、拉動以刷新，以及單擊圖標（如星級、書簽、通知鈴或添加到購物車）。
在動畫微交互方面，一些流行的樣式包括將按鈕變?yōu)榫G色，將圖標轉換為復選標記，或伴隨點擊的外向圓圈，就像可愛的嬰兒沖擊波一樣。目標是讓用戶知道他們已經(jīng)對頁面進行了成功的更改，并且微交互的設計應該簡單且令人滿意。
交互式網(wǎng)頁設計是好的網(wǎng)頁設計
——
歸根結底，交互式網(wǎng)頁設計是互聯(lián)網(wǎng)的目的。在訪問者可能不得不查看網(wǎng)站的眾多原因中，他們最終是為了互動，不僅僅是為了找到他們需要的信息，而是為了體驗它。這就是為什么無法利用這些互動的網(wǎng)站很容易在競爭中迷失方向。北京vi設計公司廣州標志設計公司在此處提供的提示是開始確保不會發(fā)生這種情況的好地方。
添加品牌總監(jiān)微信
總監(jiān)微信
復制成功
業(yè)務咨詢 何先生
業(yè)務咨詢 何先生
搜索感興趣的內(nèi)容
