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