2016-10-31 ui設(shè)計(jì)分享達(dá)人
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里
UI設(shè)計(jì)的細(xì)節(jié)很重要,它不僅僅體現(xiàn)在靜態(tài)的元素上,動(dòng)效和微交互也是如今UI和UX設(shè)計(jì)中最重要的細(xì)節(jié)。想要打造優(yōu)秀的移動(dòng)端UI設(shè)計(jì),微交互和動(dòng)效設(shè)計(jì)是繞不開的問題,今天的文章我們來聊聊這個(gè)~
呈現(xiàn)系統(tǒng)狀態(tài)
對于UI的狀態(tài)設(shè)計(jì),“系統(tǒng)應(yīng)當(dāng)始終通過合理的反饋告知用戶當(dāng)前正在發(fā)生的事情,所處的狀態(tài)?!边@也就意味著界面需要通過反饋?zhàn)層脩裘靼装l(fā)生了什么,而無需用戶猜測。而帶有動(dòng)效的微交互正是以提供視覺反饋而聞名。
想要展現(xiàn)創(chuàng)意十足的微交互動(dòng)效,數(shù)據(jù)的上傳和下載過程都是不錯(cuò)的選擇。
另外一個(gè)經(jīng)典的案例就是下來刷新,這是目前移動(dòng)端UI中內(nèi)容更新最常見的交互手段,一個(gè)暢快的下拉刷新微交互動(dòng)效能夠讓用戶欲罷不能。
讓按鈕和控件容易被感知
即使隔著手機(jī)的玻璃屏幕,界面上的按鈕和控件也應(yīng)當(dāng)是易于被感知,讓人覺得它們是真實(shí)有形的。運(yùn)動(dòng)軌跡和視覺線索能夠以即時(shí)反饋的形式,彌合這種現(xiàn)實(shí)和虛擬圖像之間的界限,讓人看起來、感覺上都是在直接操作。UI界面中的按鈕能夠模仿現(xiàn)實(shí)中的按鈕反饋來強(qiáng)化交互,簡單的說來,就是讓用戶輸入和操作的視覺反饋更加明顯一些。
視覺反饋之所以有用,是因?yàn)樗嫌脩魧τ诮换サ钠谕?,?dāng)用戶針對某個(gè)控件進(jìn)行了操作,而它們給予了對應(yīng)的反饋,這種感覺是非常良好的。
構(gòu)建有意義的過渡
動(dòng)效是一個(gè)很重要的功能,是展現(xiàn)狀態(tài)和內(nèi)容的轉(zhuǎn)變與過渡,用來解釋屏幕
圖標(biāo)可能會從一個(gè)形狀變?yōu)榱硗庖粋€(gè)形狀,在不同的時(shí)間以不同的功能呈現(xiàn),而這種過渡和轉(zhuǎn)變就是靠動(dòng)效來表現(xiàn)的。
動(dòng)效設(shè)計(jì)的優(yōu)勢不僅僅是單純的引導(dǎo),它讓轉(zhuǎn)變和過渡的等待過程變得更加有趣,愉悅用戶。在移動(dòng)端設(shè)備上,過渡動(dòng)效顯得尤為重要,它使得大量的信息呈現(xiàn)不再那么單調(diào)。這種情況在Apple Watch 上表現(xiàn)的尤為明顯。
Apple iOS系統(tǒng)的UI設(shè)計(jì)中就很好的利用了這些有意義的過渡動(dòng)效。下面的案例中,用戶點(diǎn)擊文件夾或者APP,圖標(biāo)當(dāng)大擴(kuò)展到整個(gè)屏幕,展現(xiàn)出細(xì)節(jié)和詳情。
另外一個(gè)案例則來自Material Design,過渡動(dòng)效不僅呈現(xiàn)出控件和不同界面之間的關(guān)系,還通過色彩點(diǎn)名兩者的關(guān)系,并且展現(xiàn)出了狀態(tài)的改變。這樣的過渡過程是流暢、輕松且的。
幫助用戶快速入門
動(dòng)效和微交互在用戶快速入門的時(shí)候是非常有用的。當(dāng)用戶初次使用應(yīng)用的時(shí)候,流暢的用戶體驗(yàn)和貼心而不繁復(fù)的引導(dǎo)對于用戶的初次使用和交互有著直接的影響。設(shè)計(jì)師將最關(guān)鍵、最重要的信息通過引導(dǎo)告知用戶,同時(shí)還要控制好整個(gè)引導(dǎo)流程足夠簡明而舒適。
這個(gè)過程中,動(dòng)效和微交互讓信息展現(xiàn)更加順暢,幫助用戶更加地抵達(dá)目標(biāo)。
凸顯UI中的變化
微交互能夠直接吸引用戶的注意力。在絕大多數(shù)情況下,設(shè)計(jì)師通過動(dòng)效化的微交互將用的注意力吸引到某個(gè)重要的細(xì)節(jié)上去(比如通知推送)。不過,在這個(gè)過程中,要確保動(dòng)效是功能性的,并且對于用戶而言是合理而能接受的。
增加令人愉悅的細(xì)節(jié)
動(dòng)效在APP中的主要是以過渡的形式呈現(xiàn),而那些真正讓用戶感到愉悅的動(dòng)效大多是非標(biāo)準(zhǔn)和非常規(guī)的,它們的不同和令人意外的體驗(yàn)是取悅用戶的關(guān)鍵。下面的案例中,觸發(fā)按鈕之后,動(dòng)效提供了兩重功能:告知用戶按鈕已經(jīng)觸發(fā),然后見證一段有趣的動(dòng)畫。
雖然有人認(rèn)為這樣的動(dòng)畫有炫技之嫌,但是最重要的是照顧到用戶的情緒和體驗(yàn),能夠調(diào)動(dòng)用戶的情緒,這個(gè)動(dòng)效在整個(gè)UI交互中就稱職
設(shè)計(jì)微動(dòng)效中值得思考的問題
當(dāng)你按照上面提及的思路來設(shè)計(jì)微交互的時(shí)候,有幾個(gè)問題需要注意:
微交互幾乎不可見,但是又是功能性的。確保你所設(shè)計(jì)的動(dòng)效和功能、目標(biāo)是保持一致的,不會讓用戶感到尷尬或者煩躁。對于頻繁的小幅度的操作,盡量讓反饋和響應(yīng)快速而適度,對于較大的變化則應(yīng)當(dāng)讓動(dòng)效明顯而充實(shí)。
有長期的構(gòu)思。微交互是需要長期、持續(xù)使用的,有些看起來好玩的嘗試可能會在持續(xù)使用過程中讓人覺得不舒服。
過度的設(shè)計(jì)可能會讓你的微交互成為致命的缺陷。微交互的加載過程不能耗時(shí)過長,不要占據(jù)過多的系統(tǒng)資源,展現(xiàn)過程也不要太花費(fèi)時(shí)間。相反,它應(yīng)當(dāng)呈現(xiàn)有價(jià)值的內(nèi)容,并且盡量節(jié)省時(shí)間,降低用戶等待的時(shí)長。
不要從零開始。對于你的目標(biāo)用戶和受眾多少還是有一些了解的,利用好這些信息和知識,確保你的微交互是精準(zhǔn)而有效的。使用其他的UI元素構(gòu)建視覺層次。微交互應(yīng)當(dāng)與整體界面風(fēng)格保持一致。
結(jié)語
細(xì)致的細(xì)節(jié)設(shè)計(jì)能夠讓整個(gè)產(chǎn)品更有生命力?!凹?xì)節(jié)并不只是細(xì)節(jié),它是構(gòu)建起整個(gè)設(shè)計(jì)的基本元素?!蹦愕腢I和交互設(shè)計(jì)中的每一個(gè)元素都是至關(guān)重要的,一個(gè)又一個(gè)細(xì)節(jié)設(shè)計(jì)讓你的產(chǎn)品最終脫穎而出,而真正讓人難忘的產(chǎn)品,靠的是這一個(gè)個(gè)精致到位的細(xì)節(jié)堆出來的。真正優(yōu)秀的設(shè)計(jì),從功能到元素,從交互到過渡,都是可靠的。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com