編輯導(dǎo)語(yǔ)：你是否有仔細(xì)觀察過(guò)手機(jī)上各大APP的界面？其中，靜態(tài)界面存在什么問(wèn)題？動(dòng)態(tài)界面又有什么樣的發(fā)展趨勢(shì)？本文作者圍繞動(dòng)態(tài)界面為我們進(jìn)行了詳細(xì)地分析，看看為什么動(dòng)態(tài)界面會(huì)是下一個(gè)突破口。

大家有沒(méi)有發(fā)現(xiàn)，自動(dòng)移動(dòng)時(shí)代后，UI設(shè)計(jì)的發(fā)展有些緩慢，或者說(shuō)沒(méi)有預(yù)期那么快了？

曾經(jīng)被喬布斯帶起的創(chuàng)意交互用戶體驗(yàn)和交互創(chuàng)意的熱潮，卻因?yàn)橄到y(tǒng)規(guī)范、模板組件和同質(zhì)競(jìng)爭(zhēng)的日趨成熟，而被一點(diǎn)點(diǎn)地驅(qū)散。

大家逐步減輕對(duì)產(chǎn)品設(shè)計(jì)的期待值，這么做的理由還都非常充分：“操作系統(tǒng)、模板組件和競(jìng)品團(tuán)隊(duì)的設(shè)計(jì)師水平高又有經(jīng)驗(yàn)，他們都幫我做好了，直接復(fù)用不就好了嘛？”

你手機(jī)上可能有好幾個(gè)視頻軟件、好幾個(gè)閱讀軟件、好幾個(gè)購(gòu)物軟件，你能張口就說(shuō)出他們界面之間的區(qū)別嗎？

風(fēng)格和細(xì)節(jié)上也許不同，但整體而言真沒(méi)多大差異。

一、國(guó)內(nèi)主流視頻網(wǎng)站

從無(wú)人問(wèn)津藍(lán)海，到競(jìng)爭(zhēng)激烈的紅海，這都是自然規(guī)律。而現(xiàn)在的這樣UI設(shè)計(jì)，卻更像是沉浸下來(lái)的死海。

幾百塊的模板設(shè)計(jì)費(fèi)、幾千塊的模板開(kāi)發(fā)費(fèi)、幾乎找不出差異點(diǎn)的同類產(chǎn)品。好不容易見(jiàn)到一些新潮的創(chuàng)意設(shè)計(jì)，卻大多只是躺在設(shè)計(jì)師個(gè)人作品集里的飛機(jī)稿。

UI設(shè)計(jì)未來(lái)的突破口在哪里呢？

二、靜態(tài)界面的問(wèn)題

用戶體驗(yàn)是什么？

“進(jìn)入→輸入→輸出→使用→離開(kāi)”，用戶使用產(chǎn)品是一個(gè)動(dòng)態(tài)流程。而我們現(xiàn)在的用戶體驗(yàn)設(shè)計(jì)師，卻大多依賴靜態(tài)界面，來(lái)設(shè)計(jì)一個(gè)動(dòng)態(tài)流程，這難道不矛盾嗎？

這就好比在制作動(dòng)畫(huà)的時(shí)候，只顧及到了關(guān)鍵幀，而中間的銜接和整體流暢性，卻被忽視掉了。

理想中的用戶體驗(yàn)：

靜態(tài)用戶體驗(yàn)設(shè)計(jì)：

這樣的體驗(yàn)設(shè)計(jì)，就好像上面的動(dòng)畫(huà)一樣。雖然關(guān)鍵幀都沒(méi)問(wèn)題，但整體上來(lái)看是有缺陷的。

很多時(shí)候，我們直接拿設(shè)計(jì)稿去和非行業(yè)內(nèi)的領(lǐng)導(dǎo)或甲方去對(duì)方案，溝通效率不高，而且可能會(huì)被要求提供可點(diǎn)擊的原型。

這是因?yàn)樵O(shè)計(jì)稿中只體現(xiàn)了關(guān)鍵幀，中間的銜接方式、細(xì)節(jié)反饋統(tǒng)統(tǒng)省略了，本身就是不完整的方案。對(duì)于沒(méi)有相關(guān)產(chǎn)品研發(fā)經(jīng)驗(yàn)的人來(lái)說(shuō)，確實(shí)難以理解。

用靜態(tài)界面方案來(lái)介紹產(chǎn)品，我想類似于用2D剖面圖來(lái)展示3D產(chǎn)品，看的人需要一定經(jīng)驗(yàn)和想象才能理解。

只有動(dòng)態(tài)界面才能夠突破排版的2D局限，像是3D效果圖一樣，給人更加直觀全面的感受。

三、互聯(lián)網(wǎng)全民娛樂(lè)時(shí)代

并不是說(shuō)以前的互聯(lián)網(wǎng)就不夠娛樂(lè)化，但是這幾年的短視頻、直播興起以來(lái)，互聯(lián)網(wǎng)娛樂(lè)漸漸在替代電視、電臺(tái)、演出等主流線下娛樂(lè)方式的道路上，又有了很大的突破。

現(xiàn)在很多人罵抖音無(wú)腦、快手庸俗、直播辣眼，和吐槽當(dāng)年的電視娛樂(lè)幾乎一模一樣?？梢?jiàn)無(wú)論科技如何進(jìn)步，人民在文化娛樂(lè)上的需求并不會(huì)改變。

那么在這樣大量使用多媒體的娛樂(lè)產(chǎn)品中，靜態(tài)界面的體驗(yàn)設(shè)計(jì)方法就顯現(xiàn)出更明顯的局限性了。尤其是在全屏播放視頻時(shí)，純靜態(tài)的UI并不足以操控用戶的注意力，而對(duì)用戶注意力的操控會(huì)直接影響到產(chǎn)品的運(yùn)營(yíng)能力。

上圖可見(jiàn)，與快手除了臨時(shí)的紅包入口之外，界面上的大部分元素都是靜態(tài)的，用戶的主要注意力都放在視頻內(nèi)容上；而抖音的界面在頭像、音樂(lè)處都用微動(dòng)效來(lái)提高了對(duì)用戶注意力的掌控。

之前我做過(guò)一次抖音vs快手的短視頻APP體驗(yàn)評(píng)測(cè)，結(jié)果快手在尋找音樂(lè)等信息的體驗(yàn)上，比抖音的問(wèn)題更大：

并且對(duì)于娛樂(lè)類產(chǎn)品來(lái)說(shuō)，動(dòng)效將與產(chǎn)品運(yùn)營(yíng)和轉(zhuǎn)化捆綁越來(lái)越深，各大互聯(lián)網(wǎng)公司哪怕是為了營(yíng)收賺錢，也不得不加強(qiáng)這一部分的投入。

四、動(dòng)態(tài)界面的發(fā)展趨勢(shì)

目前已上線的成熟產(chǎn)品中，哪怕是短視頻、直播這類新興娛樂(lè) APP ，在動(dòng)態(tài)界面還基本處于微交互的初始階段。我預(yù)計(jì)等發(fā)展到中后期時(shí)，現(xiàn)在的碎片化動(dòng)效設(shè)計(jì)，將轉(zhuǎn)變?yōu)檎w的動(dòng)態(tài)頁(yè)面設(shè)計(jì)。

現(xiàn)在 Dribbble 上一些概念方案以及開(kāi)始在這一方向進(jìn)行探索了（雖然大部分都還沒(méi)什么實(shí)用性）：

也許以后，設(shè)計(jì)一個(gè)產(chǎn)品的用戶體驗(yàn)，將和設(shè)計(jì)電影和動(dòng)畫(huà)的過(guò)程更加相近（只是一個(gè)比喻）。

例如：我們看電影和綜藝，都會(huì)有一個(gè)很厲害的片頭，而 APP 的加載頁(yè)相比之下，就遜色多了。如果有一天手機(jī)娛樂(lè)成為主流，是不是 loading 頁(yè)也會(huì)越來(lái)越厲害？

綜藝節(jié)目《乘風(fēng)破浪的姐姐》片頭×2倍速：

有的些游戲娛樂(lè)產(chǎn)品，已經(jīng)在往這個(gè)方向探索了。例如，增強(qiáng)界面的空間感，在裝飾元素和背景上增加循環(huán)動(dòng)畫(huà)。

猜歌星球：

島：

五、總結(jié)

想想過(guò)去短短十來(lái)年內(nèi)科技界就已翻天地覆，未來(lái)的發(fā)展可能并非我們能夠輕松猜測(cè)的。

但是管中窺豹，界面設(shè)計(jì)突破靜態(tài)框架，在動(dòng)效上不斷加強(qiáng)已是事實(shí)。未來(lái)在科技進(jìn)步的前提、全民娛樂(lè)的浪潮下，動(dòng)態(tài)界面發(fā)展成標(biāo)配是完全有可能的。

作者：Z Yuhan，前華為騰訊交互設(shè)計(jì)，在英國(guó)學(xué)習(xí)了人機(jī)交互，樂(lè)意帶你由淺入深了解產(chǎn)品體驗(yàn)；公眾號(hào)：體驗(yàn)進(jìn)階。

本文由 @Z Yuhan 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來(lái)自 Pexels，基于 CC0 協(xié)議