雙11干貨！寫給運(yùn)營視覺設(shè)計(jì)師的交互小技巧

58UXD – 馬世光：雙十一就要來了，本文為你分享兩套運(yùn)營設(shè)計(jì)利器。

運(yùn)營視覺設(shè)計(jì)師不同于UI和交互設(shè)計(jì)師，運(yùn)營視覺設(shè)計(jì)師的工作要求他們更加看重視覺雄厚性的體現(xiàn)，難免會淡化交互邏輯層面的思考，良好的體驗(yàn)必要視覺與交互兼顧，今天我就為運(yùn)營視覺同胞get兩點(diǎn)交互小技巧，方便我們的產(chǎn)出既能視覺爆炸也能體驗(yàn)棒棒！

觸發(fā)器

觸發(fā)器，顧名思義就是任何能夠啟動交互的東西，通常分為兩類：手動觸發(fā)器和體系觸發(fā)器。視覺設(shè)計(jì)重要打交道的就是手動觸發(fā)器。

△ ?58icon就是一個(gè)觸發(fā)器

那么運(yùn)營視覺的同窗就會說，手動觸發(fā)器不就是按鈕么。沒錯(cuò)！但是小按鈕也會有大學(xué)問，按鈕做不好，用戶體驗(yàn)天然就上不來。

做好一個(gè)按鈕，首先，盡可能給用戶最少的選項(xiàng)，假如它看起來像一個(gè)按鈕、就應(yīng)該像一個(gè)按鈕一樣能被按下，不要破壞視覺的使用情境。

畫面中首屏除了頭圖展示外，把專題中緊張的兩個(gè)入口也放在首屏，結(jié)合中秋風(fēng)格來進(jìn)行設(shè)計(jì)，即可吸引點(diǎn)擊，又不會破壞使用情境。

其次，我們的按鈕要設(shè)計(jì)多吸引眼球呢？最簡單的原則就是用的越多（越緊張）的按鈕就要越引人注目。

專題中緊接頭圖的三個(gè)區(qū)域占整個(gè)專題入口流量的70%，天貓采用大數(shù)據(jù)推送的體例為用戶推送最感愛好的商品，將「引人矚目」的情勢從視覺體現(xiàn)層面上升為生理需求層面。

我有需要詮釋一下引人注目的按鈕應(yīng)該是個(gè)什么樣子：

我們在自動探求時(shí)，會盯住某個(gè)東西或區(qū)域，盼望能從中找到知足本身必要的內(nèi)容。這時(shí)我們的視野會變窄，達(dá)到1度或者只有平時(shí)視野的1%，這么窄的視野堪比聚光燈和放大鏡。此時(shí)，我們專注于辨別物體，即對環(huán)境中的物體進(jìn)行識別和歸類。我們在辨別物體時(shí)，眼睛會探求認(rèn)識的小幾何，就是正方形，三角形，立方體，圓柱體等簡單的幾何形體，我們的大腦把他們組合起來就能辨別出物體。

既然人眼以小幾何體為基本識別單位，那么一些圖標(biāo)形觸發(fā)器就分外適合設(shè)計(jì)成某種幾何外形。一樣平常來說，只具備一種特性的目標(biāo)比具備多種特性的目標(biāo)更容易被找到。因此，要盡量保證觸發(fā)器看起來簡單，尤其是在復(fù)雜擁擠的環(huán)境下。

當(dāng)這組內(nèi)容充足雄厚時(shí)，只要我們采用簡單小幾何體情勢，大腦便會很容易的發(fā)現(xiàn)右下角的按鈕。

當(dāng)然我們還有更加吸引人的按鈕，比如，移動的按鈕。

購買按鈕雖然沒有采用動態(tài)情勢，但是上面的小吝嗇泡框卻十足的吸引了我們的眼球，人類對運(yùn)動物體要敏感的多。

按鈕除了控件部分，標(biāo)簽（文案）也是提拔按鈕點(diǎn)擊的一個(gè)關(guān)鍵要素，信賴我，假如本身看著按鈕里面的文案不爽（不吸引人），本身來?xiàng)l推動產(chǎn)品去優(yōu)化吧！

舊版本中按鈕的文案是電話號碼，吸引點(diǎn)擊的作用并不強(qiáng)，在替換了標(biāo)簽文案后按鈕點(diǎn)擊率上升了20%

反饋

反饋，簡單說就是告訴用戶在按下按鈕之后會出現(xiàn)什么效果，視覺設(shè)計(jì)師的工作是設(shè)計(jì)反饋的情勢，當(dāng)然，反饋除了視覺還有聽覺以及觸覺的反饋。

當(dāng)我開始設(shè)計(jì)一個(gè)反饋網(wǎng)頁的時(shí)候，我們應(yīng)該細(xì)致什么呢，好的反饋又是什么呢？

首先，別讓反饋給用戶造成壓力，反饋應(yīng)由需求來推動。用戶必要知道什么，什么時(shí)候知道，做好這些用戶體驗(yàn)就天然上升一個(gè)臺階。

△ ?微信輸入語音時(shí)，出現(xiàn)浮層動畫提醒用戶的語音輸入是有用的

其次，我們應(yīng)該使用最少的反饋來傳達(dá)最多的信息，最好的反饋永久不會高深莫測，永久記住少即是多。

當(dāng)用戶操作后，界面操作前的狀況和操作后的狀況不同等。通過這個(gè)不同等，給用戶反饋的操作得到了提交。

當(dāng)我們在做視覺反饋的時(shí)候，不要表現(xiàn)多余的視覺反饋、任何反饋都必須力求清晰，視覺反饋應(yīng)出如今用戶操作的附近或原地。

當(dāng)然，假如必須把視覺反饋放在闊別視覺焦點(diǎn)的地方，我們可以通過動效來吸引用戶的吸引力。

其實(shí)我們發(fā)現(xiàn)一個(gè)App的性格多是通過反饋來表現(xiàn)的，我們可以通過人性化的設(shè)計(jì)來增長App的情感。

△ ?58幫幫的形象很好的加強(qiáng)了App的人性化和情感

總結(jié)

信賴視覺設(shè)計(jì)師已經(jīng)對觸發(fā)器和反饋的基本原理有所了解，在實(shí)踐工作中要活學(xué)活用。以上是我get到的針對視覺的小技巧，盼望對大家有所啟發(fā)幫助，謝謝。

迎接關(guān)注58UXD 的公眾號：

「讓你的設(shè)計(jì)更溫暖」

• 《如何用視覺畫面調(diào)動用戶的情感？來看這些方法！》
• 《設(shè)計(jì)的三個(gè)條理，幫你重開情感化設(shè)計(jì)的大門》
• 《不靠靈感做設(shè)計(jì)！超周全的「情感化設(shè)計(jì)」落地方法論》
• 《如何制造相信感和驚喜感？我總結(jié)了這些設(shè)計(jì)方法》