下面饿了想吃大香肠_国产国语高清在线视频二区_伦理片日本中文在线_一个人看的WWW片免费高清_免费大黄网站在线观

說(shuō)起UI/UX設(shè)計(jì)，微交互是成敗與否的關(guān)鍵要素之一，是小小細(xì)節(jié)帶來(lái)巨大回報(bào)的最有力的證據(jù)。當(dāng)下大部分UI/UX設(shè)計(jì)的書(shū)都圍繞著一個(gè)基本信息：當(dāng)設(shè)計(jì)流程結(jié)束后，用戶最后得到的東西僅僅好看是不夠的，“美貌”的前提是要有用且可用。

在Tubik Studio早些的文章和案例研究中，我們就倡導(dǎo)UI/UX設(shè)計(jì)師不是在創(chuàng)造一件藝術(shù)品，而是為目標(biāo)用戶打造解決問(wèn)題的產(chǎn)品，幫助用戶更方便快捷的搞定所需。一款成功的產(chǎn)品要同時(shí)具備易用性、實(shí)用性、有吸引力等關(guān)鍵要素，精雕細(xì)琢的微交互正是達(dá)到以上要素的不二法門(mén)。

GIF—Portrait vs Landscape by Sergey Valiukh

微交互的本質(zhì)

通常來(lái)說(shuō)，微交互是用戶在完成特定任務(wù)時(shí)與產(chǎn)品進(jìn)行的交互過(guò)程。比如當(dāng)你點(diǎn)擊“喜歡”按鈕（反正它看起來(lái)很像）并發(fā)現(xiàn)這個(gè)行為已經(jīng)被計(jì)數(shù)了（喜歡數(shù)會(huì)發(fā)生變化，按鈕顏色改變或者變的不可點(diǎn)擊，這些變化都無(wú)聲的告訴你你已經(jīng)完成了操作；背后的含義可能在暗示，你已經(jīng)在喜歡它的用戶列表里了諸如此類~），這就是微交互；填寫(xiě)文本框發(fā)送搜索請(qǐng)求也是個(gè)例子。微交互發(fā)生在我們?cè)谏缃痪W(wǎng)絡(luò)中關(guān)注和不關(guān)注的人身上，評(píng)價(jià)博文或者設(shè)定計(jì)時(shí)器——很多很多我們?cè)谧龅氖虑槠鋵?shí)都與微交互有關(guān)，只是大多情況下我們并沒(méi)有留意些簡(jiǎn)單的步驟。

所以，談及用戶體驗(yàn)肯定少不了探究微交互；而且如果運(yùn)用得當(dāng)，微交互很有可能成為一顆打造完美易用性、驚人的高效及知名度的種子。

微交互方面最權(quán)威的深度解析書(shū)籍可能是 Dan Saffer寫(xiě)的《Microinteractions》，他深入淺出的講解了微交互的理念、框架、工作機(jī)制、包含的種類、分別得特點(diǎn)以及在用戶體驗(yàn)中扮演的角色。在此向用戶體驗(yàn)相關(guān)從業(yè)人士強(qiáng)烈推薦這本書(shū)，作者在書(shū)里闡釋了對(duì)“以用戶為中心的設(shè)計(jì)”很棒的理解。

大多數(shù)情況下，微交互能夠讓用戶在不自知的情況下被吸引——這也是設(shè)計(jì)要做的最重要的事情之一：讓操作任務(wù)變得自然、清晰和盡可能的流暢。設(shè)計(jì)中有很多方法去提升微交互的效果，界面動(dòng)效就是其中之一。

我們?cè)诟绲捻?yè)面動(dòng)效文章“運(yùn)動(dòng)的力量”中已經(jīng)聊過(guò)這個(gè)話題，參照Tubik Studio的設(shè)計(jì)項(xiàng)目和理念，我們總結(jié)過(guò)一些動(dòng)效的基本用法和目的。那時(shí)候我們稱動(dòng)效是一種類似健康的東西：當(dāng)身體無(wú)恙的時(shí)候你根本不會(huì)注意到它，但是當(dāng)哪里抱恙之后，你才會(huì)意識(shí)到它的重要性。

由動(dòng)效支持的微交互也很難被用戶差距到，除非有一天我們讓這些動(dòng)效都消失了。

今天我們將提供更詳細(xì)的多種動(dòng)效類型的思路和案例。

GIF of the Tap Bar Concept by Sergey Valiukh

動(dòng)起來(lái)的微交互

動(dòng)起來(lái)的按鈕

button是交互中最in的元素，而且，他們最容易被用戶感知，“點(diǎn)擊”就可以觸發(fā)屏幕的某個(gè)功能；即便是電腦操作水平很低的用戶，點(diǎn)擊按鈕這個(gè)動(dòng)作也很有操控實(shí)體的感覺(jué)。所以，按鈕是左右用戶體驗(yàn)的本質(zhì)要素之一，好的按鈕設(shè)計(jì)讓交互變得輕松容易，反之則會(huì)令人抓狂和困惑。在很多案例中，button是最常被用作微交互的觸發(fā)器和導(dǎo)航的關(guān)鍵要素。所以，為了全方位鎖定用戶的注意力，設(shè)計(jì)師不僅需要考慮按鈕的顏色、形狀、特效、紋理和位置，也要考慮必要性，適當(dāng)性和動(dòng)效的本質(zhì)。

UI Navigation Concept by Ludmila Shevchenko

GIF of the Tapbar Interactions by Sergey Valiukh

Hamburger Menu Animation by Valentyn Khenkin

GIF for the Add Button by Sergey Valiukh

下拉刷新動(dòng)效

這類動(dòng)效現(xiàn)在也很流行，而且在進(jìn)行app動(dòng)效設(shè)計(jì)時(shí)，首先都會(huì)先設(shè)計(jì)這類動(dòng)效。一方面，它同時(shí)提供兩步交互，一是app告訴用戶他已經(jīng)到了內(nèi)容瀑布流的頂端，以及，再拉，再拉它就要刷新啦~

另一方面，它為創(chuàng)意UI設(shè)計(jì)開(kāi)辟了全新的、廣闊的空間，運(yùn)用的元素不僅有告知性，而且是時(shí)尚的、好看的、有趣的。而且這類動(dòng)效可以有效的運(yùn)用特定的品牌因素，來(lái)支持日常的品牌曝光率，加深用戶對(duì)logo和吉祥物的記憶和認(rèn)知~

Pull To Refresh by Kirill

GIF for Pull Down?—?Space Ship by Tamara

進(jìn)度動(dòng)效

有些微交互是即時(shí)發(fā)生的，有些則需要一個(gè)過(guò)程?？傊瑑?yōu)秀的用戶體驗(yàn)應(yīng)該讓用戶知道他們接下來(lái)應(yīng)該干嘛了；所以，加載過(guò)程應(yīng)該清晰的展示給用戶，同時(shí)，這也是設(shè)計(jì)師展現(xiàn)創(chuàng)造力的大好舞臺(tái)。

和前面提到的一樣，標(biāo)準(zhǔn)的解決方案同時(shí)兼顧了娛樂(lè)性、趣味性、有趣的細(xì)節(jié)；同時(shí)也提升了品牌的影響和要素。在這種情況下，設(shè)計(jì)師需要分析核心用戶在此需要什么樣的動(dòng)效，是需要一個(gè)加載條，還是要附加一些別的類似百分比的解釋數(shù)據(jù)。

Preloader by Kirill

Rubber Indicator by Valentyn Khenkin

Pull to refresh by Kirill

另外一點(diǎn)需要強(qiáng)調(diào)的是，不管用戶用的是什么類型的電子產(chǎn)品，他們真正需要的都是來(lái)自系統(tǒng)的即時(shí)的反饋。即便用戶需要等待一些時(shí)間，他也要清楚的知道這一點(diǎn)。這是所有類型的動(dòng)效的基礎(chǔ)。動(dòng)效最重要和最原始的目的是讓交互過(guò)程變得更清晰、輕松和輕快，在此之外，才談得上去設(shè)計(jì)一些所謂的“我X，這個(gè)dior”的效果。動(dòng)效的基礎(chǔ)是實(shí)用性，而不是純粹的裝飾和娛樂(lè)。

因此，在之前的談到動(dòng)效的帖子里，我們講解了一些微交互的動(dòng)效的基本常識(shí)。動(dòng)效應(yīng)該支持用戶，幫助他們，而且只存在在他們應(yīng)該存在的地方，真真切切的提升可用性，而不是分散用戶注意力和讓屏幕變得超負(fù)荷。

在微交互中運(yùn)用動(dòng)效的要點(diǎn)：

• 它不應(yīng)該給頁(yè)面加載徒增太重的負(fù)擔(dān)

• 它應(yīng)該充分考慮目標(biāo)用戶可能使用的各種設(shè)備，以及可能出現(xiàn)的各種情況

• 它不應(yīng)該讓那些專注頁(yè)面的用戶太過(guò)分心

• 它應(yīng)該和網(wǎng)站或app的整體風(fēng)格相搭配，保證產(chǎn)品整體的和諧

Juicy Player by Valentyn Khenkin

為高效的微交互設(shè)計(jì)解決方案，設(shè)計(jì)師站在了設(shè)計(jì)、心理學(xué)、編程、（偶爾的）語(yǔ)言學(xué)和其他科學(xué)人文領(lǐng)域的十字路口（譯者忍不住冒泡：這個(gè)路口是有多少條路~）；通過(guò)對(duì)目標(biāo)用戶的分析，對(duì)概念/想法的測(cè)試，都讓微交互默默的打開(kāi)了通往更高階的可用性的大門(mén)。當(dāng)設(shè)計(jì)師需要打造既愉悅又時(shí)尚的視覺(jué)設(shè)計(jì)時(shí)，要同時(shí)兼顧交互進(jìn)程的高效和自然，那就沒(méi)有比在頁(yè)面中巧妙的使用動(dòng)效更棒呆的啦~

圖盛網(wǎng)絡(luò),專業(yè)廣州網(wǎng)站建設(shè)公司,廣州網(wǎng)絡(luò)公司領(lǐng)先網(wǎng)絡(luò)品牌,3年網(wǎng)站建設(shè)經(jīng)驗(yàn),超過(guò)5000家成功案例,作為廣州網(wǎng)站開(kāi)發(fā)公司,廣州網(wǎng)站設(shè)計(jì)公司和知名廣州網(wǎng)站制作公司,專業(yè)提供網(wǎng)站建設(shè)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，網(wǎng)頁(yè)設(shè)計(jì)等服務(wù)，豐富的網(wǎng)站制作經(jīng)驗(yàn)，網(wǎng)站建設(shè)企業(yè)按需個(gè)性化定制，多樣化制作，樹(shù)立行業(yè)品牌!廣州圖盛網(wǎng)絡(luò)科技有限公司全國(guó)服務(wù)熱線：020-28142459！專業(yè)資質(zhì)獲得廣大客戶的認(rèn)可。
更多網(wǎng)站資訊,微信輕松掃一掃關(guān)注廣州網(wǎng)站建設(shè)公司-圖盛網(wǎng)絡(luò)（www.skijumping.cn）。