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