2016-10-21 ui設(shè)計(jì)分享達(dá)人
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
微交互對優(yōu)秀的UI設(shè)計(jì)師有多重要?UI設(shè)計(jì)的細(xì)節(jié)很重要，它不僅僅體現(xiàn)在靜態(tài)的元素上，動效和微交互也是如今UI和UX設(shè)計(jì)中最重要的細(xì)節(jié)。想要打造優(yōu)秀的移動端UI設(shè)計(jì)，微交互和動效設(shè)計(jì)是繞不開的問題，今天我們一起來聊聊這個(gè)~
著名魔術(shù)師 Dariel Fitzkee 曾經(jīng)說過：“魔術(shù)是表演和細(xì)節(jié)的藝術(shù)。”而交互設(shè)計(jì)同樣是如此。設(shè)計(jì)師大多能夠很好的控制設(shè)計(jì)的大方向，但是細(xì)節(jié)處理不當(dāng)?shù)脑?，會讓?yōu)秀的設(shè)計(jì)方案功虧一簣，要不怎么說“細(xì)節(jié)當(dāng)中藏有魔鬼”呢?也正是因此，那些精心設(shè)計(jì)的微交互會讓用戶體驗(yàn)顯得精巧而到位。
想要了解微交互到底對你的設(shè)計(jì)有什么好處，那么你最好將你的設(shè)計(jì)思路勾勒出來。用來繪制原型和線框圖的工具有很多，這里推薦使用近期比較火的Adobe Experience，也就是Adobe XD，它是專門為線框圖和交互設(shè)計(jì)而生的。當(dāng)你有了工具，也有了想法，接下來我們開始進(jìn)入正題，一起來看看有哪些值得注意的微交互細(xì)節(jié)設(shè)計(jì)。
一、呈現(xiàn)系統(tǒng)狀態(tài)
對于UI的狀態(tài)設(shè)計(jì)，Jakob Nielsen 曾經(jīng)說過，“系統(tǒng)應(yīng)當(dāng)始終通過合理的反饋告知用戶當(dāng)前正在發(fā)生的事情，所處的狀態(tài)?！边@也就意味著界面需要通過反饋?zhàn)層脩裘靼装l(fā)生了什么，而無需用戶猜測。而帶有動效的微交互正是以提供視覺反饋而聞名。想要展現(xiàn)創(chuàng)意十足的微交互動效，數(shù)據(jù)的上傳和下載過程都是不錯(cuò)的選擇。一個(gè)經(jīng)典的案例就是下來刷新，這是目前移動端UI中內(nèi)容更新最常見的交互手段，一個(gè)暢快的下拉刷新微交互動效能夠讓用戶欲罷不能。
二、讓按鈕和控件容易被感知
即使隔著手機(jī)的玻璃屏幕，界面上的按鈕和控件也應(yīng)當(dāng)是易于被感知，讓人覺得它們是真實(shí)有形的。運(yùn)動軌跡和視覺線索能夠以即時(shí)反饋的形式，彌合這種現(xiàn)實(shí)和虛擬圖像之間的界限，讓人看起來、感覺上都是在直接操作。UI界面中的按鈕能夠模仿現(xiàn)實(shí)中的按鈕反饋來強(qiáng)化交互，簡單的說來，就是讓用戶輸入和操作的視覺反饋更加明顯一些。視覺反饋之所以有用，是因?yàn)樗嫌脩魧τ诮换サ钠谕?dāng)用戶針對某個(gè)控件進(jìn)行了操作，而它們給予了對應(yīng)的反饋，這種感覺是非常良好的。
三、構(gòu)建有意義的過渡
動效一個(gè)很重要的功能，是展現(xiàn)狀態(tài)和內(nèi)容的轉(zhuǎn)變與過渡，用來解釋屏幕上各種元素的排布和層次。圖標(biāo)可能會從一個(gè)形狀變?yōu)榱硗庖粋€(gè)形狀，在不同的時(shí)間以不同的功能呈現(xiàn)，而這種過渡和轉(zhuǎn)變就是靠動效來表現(xiàn)的。動效設(shè)計(jì)的優(yōu)勢不僅僅是單純的引導(dǎo)，它讓轉(zhuǎn)變和過渡的等待過程變得更加有趣，愉悅用戶。在移動端設(shè)備上，過渡動效顯得尤為重要，它使得大量的信息呈現(xiàn)不再那么單調(diào)。Apple iOS系統(tǒng)的UI設(shè)計(jì)中就很好的利用了這些有意義的過渡動效。下面的案例中，用戶點(diǎn)擊文件夾或者APP，圖標(biāo)當(dāng)大擴(kuò)展到整個(gè)屏幕，展現(xiàn)出細(xì)節(jié)和詳情。
四、幫助用戶快速入門
動效和微交互在用戶快速入門的時(shí)候是非常有用的。當(dāng)用戶初次使用應(yīng)用的時(shí)候，流暢的用戶體驗(yàn)和貼心而不繁復(fù)的引導(dǎo)對于用戶的初次使用和交互有著直接的影響。設(shè)計(jì)師將最關(guān)鍵、最重要的信息通過引導(dǎo)告知用戶，同時(shí)還要控制好整個(gè)引導(dǎo)流程足夠簡明而舒適。這個(gè)過程中，動效和微交互讓信息展現(xiàn)更加順暢，幫助用戶更加地抵達(dá)目標(biāo)。
五、凸顯UI中的變化
微交互能夠直接吸引用戶的注意力。在絕大多數(shù)情況下，設(shè)計(jì)師通過動效化的微交互將用的注意力吸引到某個(gè)重要的細(xì)節(jié)上去(比如通知推送)。不過，在這個(gè)過程中，要確保動效是功能性的，并且對于用戶而言是合理而能接受的。
六、增加令人愉悅的細(xì)節(jié)
動效在APP中的主要是以過渡的形式呈現(xiàn)，而那些真正讓用戶感到愉悅的動效大多是非標(biāo)準(zhǔn)和非常規(guī)的，它們的不同和令人意外的體驗(yàn)是取悅用戶的關(guān)鍵。下面的案例中，觸發(fā)按鈕之后，動效提供了兩重功能：告知用戶按鈕已經(jīng)觸發(fā)，然后見證一段有趣的動畫。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com
