【社區(qū)APP的交互動(dòng)效設(shè)計(jì)6100字（論文）】

社區(qū)APP的交互動(dòng)效設(shè)計(jì)研究引言 41.動(dòng)效設(shè)計(jì)的概念及作用 41.1動(dòng)效設(shè)計(jì)的概念 41.2動(dòng)效的作用 41.2.1提升用戶體驗(yàn) 41.2.2增添產(chǎn)品氣質(zhì) 51.2.3降低溝通成本，打造核心競爭力 52.互動(dòng)類APP動(dòng)效設(shè)計(jì)原則 52.1緩解用戶等待焦慮原則 52.2個(gè)性化原則 62.3注重互動(dòng)交流原則 63.社區(qū)類APP中界面動(dòng)效的類型與作用 73.1交互邏輯層面的界面動(dòng)效 73.2視覺感知層面的界面動(dòng)效 73.3情感需求層面的界面動(dòng)效 84.目前主流社區(qū)APP的交互動(dòng)效設(shè)計(jì) 84.1微信文章底部互動(dòng)設(shè)計(jì)的變化 84.2微信朋友圈的互動(dòng)設(shè)計(jì) 94.3快手 104.4知乎 114.5微博 12總結(jié) 13參考文獻(xiàn) 14引言隨著移動(dòng)硬件的快速發(fā)展和技術(shù)支持，移動(dòng)互聯(lián)網(wǎng)的發(fā)展已趨于成熟，移動(dòng)應(yīng)用APP的數(shù)量增長依舊非常強(qiáng)勁，目前的移動(dòng)APP更多的是在某一方面的體驗(yàn)優(yōu)化與深耕；另一方面由于用戶對各類型應(yīng)用的認(rèn)知提升，學(xué)習(xí)成本降低，交互體驗(yàn)也在悄然發(fā)生著變化，即從以前單純的基礎(chǔ)體驗(yàn)過渡到如今深度的沉浸感知。這其中，界面動(dòng)效發(fā)揮著至關(guān)重要的作用。在移動(dòng)應(yīng)用中，動(dòng)效是產(chǎn)品與用戶進(jìn)行互動(dòng)的重要方式，能夠針對用戶行為作出相應(yīng)的反饋并給予引導(dǎo)，甚至在運(yùn)用得當(dāng)?shù)那闆r下，具有滿足甚至超出用戶心理預(yù)期、增加產(chǎn)品的附加價(jià)值等的重大意義。然而一些動(dòng)效并沒有以提升交互體驗(yàn)為目的，而是單純追求視覺效果。動(dòng)效設(shè)計(jì)是UI交互設(shè)計(jì)中最重要的環(huán)節(jié)之一，關(guān)系用戶體驗(yàn)的好壞。因此研究動(dòng)效設(shè)計(jì)對APP的開發(fā)者和使用者都有現(xiàn)實(shí)意義。1.動(dòng)效設(shè)計(jì)的概念及作用1.1動(dòng)效設(shè)計(jì)的概念動(dòng)效設(shè)計(jì)的英文是MotionDesign，是運(yùn)動(dòng)圖形設(shè)計(jì)（MotionGraphicDesign）的簡稱，也稱為動(dòng)態(tài)設(shè)計(jì)。運(yùn)動(dòng)圖形設(shè)計(jì)遵循平面設(shè)計(jì)和視聽語言的雙重標(biāo)準(zhǔn)，通過視頻或動(dòng)畫來創(chuàng)作成動(dòng)態(tài)影像的藝術(shù)形式。嚴(yán)格意義上講，運(yùn)動(dòng)圖形設(shè)計(jì)是動(dòng)效設(shè)計(jì)的一個(gè)分支，而它具有眾多的藝術(shù)表現(xiàn)形式和作品，所以這兩者的概念逐漸趨同。下文所談的動(dòng)效設(shè)計(jì)即動(dòng)態(tài)設(shè)計(jì)，或運(yùn)動(dòng)圖形設(shè)計(jì)，不做細(xì)微區(qū)分。手機(jī)移動(dòng)應(yīng)用動(dòng)效指的是用戶在與移動(dòng)設(shè)備交互過程中移動(dòng)應(yīng)用用戶界面呈現(xiàn)出的動(dòng)態(tài)效果。1.2動(dòng)效的作用1.2.1提升用戶體驗(yàn)設(shè)計(jì)師若只追求靜態(tài)像素的完美呈現(xiàn)，而忽略動(dòng)態(tài)過程的合理表達(dá)，會(huì)導(dǎo)致用戶不能在視覺上覺察元素的連續(xù)變化，進(jìn)而很難對新舊狀態(tài)的更替有清晰的感知。通過「時(shí)間點(diǎn)」和「空間幅度」的設(shè)計(jì)為用戶建立運(yùn)動(dòng)的可信度，即視覺上的真實(shí)感，當(dāng)用戶意識(shí)到這個(gè)動(dòng)作是合理的，才能更加清晰愉悅地使用產(chǎn)品。動(dòng)效設(shè)計(jì)和交互動(dòng)作的設(shè)計(jì)不同，不是使用方式的設(shè)計(jì)，而是一種反饋和引導(dǎo)。用戶對于動(dòng)效的感知非常靈敏，是APP中所有感知因素最強(qiáng)的，動(dòng)效的設(shè)計(jì)可以最大效率地傳達(dá)功能的含義和加強(qiáng)界面效果。通過動(dòng)效設(shè)計(jì)可以增加APP的趣味性，可以更生動(dòng)地引導(dǎo)用戶使用并展示信息。在iOS7官方設(shè)計(jì)指南中，給動(dòng)效賦予了一個(gè)新的定義：精細(xì)而恰當(dāng)?shù)膭?dòng)畫效果可以傳達(dá)狀態(tài)，增強(qiáng)用戶對于直接操縱的感知，通過視覺化的方式向用戶呈現(xiàn)操作結(jié)果。動(dòng)效能讓體驗(yàn)更加連貫，能幫助用戶更容易地理解界面之間層級關(guān)系，能引導(dǎo)用戶使用的流程，方便用戶學(xué)習(xí)，能隱藏暫時(shí)不需要的元素和信息，在需要的時(shí)候出現(xiàn)，能讓產(chǎn)品更有趣，充滿活力?？傊ㄟ^動(dòng)效設(shè)計(jì)，可以有效地增強(qiáng)用戶體驗(yàn)設(shè)計(jì)。1.2.2增添產(chǎn)品氣質(zhì)未添加動(dòng)效的產(chǎn)品，會(huì)帶給人一種死氣沉沉的感覺，所有內(nèi)容平鋪直敘、毫無生機(jī)，即使界面設(shè)計(jì)的很美觀，也會(huì)缺乏一種靈動(dòng)細(xì)膩的氣質(zhì)。如果把產(chǎn)品比作成美女，那么界面視覺就是美女的顏值，交互動(dòng)效就是美女的肢體語言。合理的動(dòng)效能將更立體、更富有關(guān)聯(lián)性的信息傳遞出去，提高產(chǎn)品的“表達(dá)能力”，增加親和力和趣味性，也利于品牌的建立。并且優(yōu)秀的動(dòng)效能夠加強(qiáng)用戶與產(chǎn)品的情感傳遞，增加用戶對產(chǎn)品的友好度。1.2.3降低溝通成本，打造核心競爭力設(shè)計(jì)師通過制作高保真動(dòng)效Demo展示設(shè)計(jì)思路和創(chuàng)意，大大提高設(shè)計(jì)提案交接率，降低了設(shè)計(jì)師與開發(fā)的溝通成本，提高了動(dòng)效的還原度，體現(xiàn)專業(yè)性。在UI設(shè)計(jì)行業(yè)已經(jīng)趨于飽和、并且產(chǎn)品設(shè)計(jì)流程逐漸實(shí)現(xiàn)體系化和模塊化的今天，設(shè)計(jì)師如果只會(huì)利用組件重復(fù)性地“拼湊”頁面而無更多的價(jià)值產(chǎn)出，被替代的可能性將會(huì)增大。在日常工作之余，若要為公司和團(tuán)隊(duì)輸出更多的價(jià)值，動(dòng)效設(shè)計(jì)能力便是交互、視覺設(shè)計(jì)師的必備技能與核心競爭力之一。2.互動(dòng)類APP動(dòng)效設(shè)計(jì)原則2.1緩解用戶等待焦慮原則現(xiàn)在APP中常見的動(dòng)效有開機(jī)啟動(dòng)圖，頁面之間的切換，加載GIF圖，隱藏菜單等，這些動(dòng)效幾乎已經(jīng)成為一個(gè)良好用戶體驗(yàn)的APP的必備元素。開機(jī)動(dòng)畫一般很短小，為APP標(biāo)志的簡單變形，可以強(qiáng)調(diào)產(chǎn)品的品牌，讓品牌形象更加生動(dòng)，同時(shí)不能使用過于復(fù)雜的動(dòng)畫以免延遲主界面的打開。界面之間的切換動(dòng)畫是非常常見的，能讓界面的切換更加自然，用戶心理上會(huì)覺得切換流暢，從而提升用戶體驗(yàn)。例如系統(tǒng)原生的層級之間切換時(shí)頁面整體向左移動(dòng)或者向右移動(dòng)的動(dòng)效，很好的解釋了頁面之間的層級關(guān)系，讓用戶覺得很清晰可控。加載GIF圖動(dòng)畫更是非常常見的動(dòng)效，也基本是APP必備的，大部分設(shè)計(jì)優(yōu)良的APP都會(huì)專門設(shè)計(jì)一套自己的加載GIF動(dòng)畫，從而讓APP的品牌的個(gè)性在用戶每一次加載的時(shí)候加深一次，同時(shí)由于用戶在等待加載內(nèi)容的時(shí)候，如果加載時(shí)間稍長，加載動(dòng)效還可以緩解用戶等待的焦慮，有的資源過多，加載時(shí)間稍長的APP還會(huì)顯示加載的進(jìn)度，降低用戶等待時(shí)候的不確定感和焦慮。2.2個(gè)性化原則個(gè)性化的動(dòng)效設(shè)計(jì)是動(dòng)效設(shè)計(jì)非常重要的原則，在設(shè)計(jì)風(fēng)格一致的情況下，根據(jù)APP的功能進(jìn)行個(gè)性化的動(dòng)效設(shè)計(jì)可以增強(qiáng)APP的風(fēng)格，讓人印象更加深刻。還有根據(jù)APP功能每個(gè)APP個(gè)性化的動(dòng)效，例如點(diǎn)擊QQ聊天界面中的“戳一戳”功能，整個(gè)聊天界面會(huì)左右晃動(dòng)，表現(xiàn)真實(shí)中被戳的感覺。有時(shí)伴隨著動(dòng)效還會(huì)有音效，用戶體驗(yàn)非常立體。動(dòng)效設(shè)計(jì)中要注意的一點(diǎn)是，元素的運(yùn)動(dòng)曲線要根據(jù)實(shí)際現(xiàn)實(shí)中的物理規(guī)律進(jìn)行設(shè)計(jì)，這樣可以給用戶自然流暢的感覺，只用默認(rèn)的線性的動(dòng)效會(huì)顯得十分生硬。例如，小球掉落到地上的速度是逐漸增加的，速度的曲線不是直線，是加速度曲線，如果使用勻速掉落的速度曲線就會(huì)讓人覺得很假；與此同時(shí)，還能加上小球反彈的動(dòng)作則動(dòng)效會(huì)更加真實(shí)生動(dòng)。2.3注重互動(dòng)交流原則社交APP注重設(shè)計(jì)用戶雙方的互動(dòng)，良好的動(dòng)效的設(shè)計(jì)無疑是可以增加互動(dòng)的感受和體驗(yàn)。良好的動(dòng)效設(shè)計(jì)可以通過遵循以下幾個(gè)原則來實(shí)現(xiàn)。保存APP的個(gè)性化，這是很重要的一點(diǎn)，是一款A(yù)PP特色的象征；具備向?qū)Чδ埽瑸橛脩糁敢较?，減少文字或者圖形說明;通過背景展現(xiàn)內(nèi)容的物理狀態(tài)和環(huán)境；與用戶產(chǎn)生共鳴，促成交互和交流；給動(dòng)效賦予感情，讓用戶舒適和愉悅；最后值得注意的一點(diǎn)是，任何事物都有兩面性，動(dòng)效傳達(dá)效率高、容易吸引人注意的同時(shí)也可能會(huì)讓用戶感到繁瑣復(fù)雜，注意力過度被吸引。所以設(shè)計(jì)動(dòng)效的時(shí)候要根據(jù)需求，例如上述QQ中氣泡的設(shè)計(jì)，不要到處充滿動(dòng)效，設(shè)計(jì)過多不必要的動(dòng)效，讓用戶無所適從，用戶的體驗(yàn)適得其反。3.社區(qū)類APP中界面動(dòng)效的類型與作用根據(jù)具體要實(shí)現(xiàn)的目標(biāo)的不同，可將移動(dòng)應(yīng)用中界面動(dòng)效的運(yùn)用分為以下三個(gè)層面，即交互邏輯層面的動(dòng)效、視覺感知層面的動(dòng)效以及情感需求層面的動(dòng)效。其中，交互邏輯層面的動(dòng)效幫助應(yīng)用解釋其自身的邏輯、層級和交互機(jī)制，側(cè)重于指向性與功能性；視覺感知層面的動(dòng)效能夠還原物理世界的真實(shí)感，具有代入感和沉浸效果；情感需求層面的動(dòng)效能夠讓用戶與應(yīng)用進(jìn)行情感互動(dòng)，引起用戶的情感共鳴，具有維系性。3.1交互邏輯層面的界面動(dòng)效為了簡化引導(dǎo)流程，降低學(xué)習(xí)成本，并在在用戶體驗(yàn)上達(dá)到某種目標(biāo)的引導(dǎo)，動(dòng)效常常被用來輔助說明移動(dòng)應(yīng)用中交互設(shè)計(jì)的邏輯。這是動(dòng)效最基本的應(yīng)用方式，其中典型的應(yīng)用場景包括動(dòng)畫轉(zhuǎn)場、下拉刷新、界面消隱等。在動(dòng)畫轉(zhuǎn)場中，下一層級的頁面一般會(huì)從右側(cè)疊加進(jìn)入，返回上一層級頁面時(shí)也會(huì)從右側(cè)漸隱退出，這種焦點(diǎn)縮放、覆蓋、滑出等動(dòng)效成功地營造出一種空間感，使用戶明晰的知道頁面間的從屬關(guān)系以及層級結(jié)構(gòu)；在下拉刷新中，用戶通過逆向拖動(dòng)屏幕來查看更新的內(nèi)容，旋轉(zhuǎn)的圓圈代表正在加載的狀態(tài)，動(dòng)態(tài)的刷新效果代替了原來必須點(diǎn)擊才能執(zhí)行刷新操作的靜態(tài)按鈕，這不僅大大地簡化了操作流程，并且在給用戶最直接的語義反饋的同時(shí)也使得整個(gè)交互體驗(yàn)更加自然、流暢；界面消隱是指當(dāng)向下滑動(dòng)頁面時(shí)，導(dǎo)航控件自動(dòng)隱藏的情況，這里運(yùn)用動(dòng)效能夠合理拓展界面的隱形面積，提高內(nèi)容的上下關(guān)聯(lián)性，使用戶更關(guān)注內(nèi)容本身，獲得更舒適的瀏覽體驗(yàn)。綜上可以看出，交互邏輯層面的動(dòng)效是具有指向性與功能性的。3.2視覺感知層面的界面動(dòng)效視覺設(shè)計(jì)可以還原物理世界的真實(shí)感，動(dòng)效也可以，這就是視覺感知層面的動(dòng)效要起到的作用。一些動(dòng)效通過對現(xiàn)實(shí)世界的模擬，能夠在不需要任何提示的情況下迎合用戶的意識(shí)認(rèn)知。相比于較為基礎(chǔ)的交互邏輯層面的動(dòng)效，這種類型的動(dòng)效往往出現(xiàn)在側(cè)重通過視覺帶給用戶信息的界面，更容易吸引用戶的注意力。比如一加手機(jī)的天氣應(yīng)用，不同于其他同類應(yīng)用單純對天氣狀態(tài)進(jìn)行視覺上的靜態(tài)模擬，它在界面扁平化風(fēng)格下加入了基于情景的擬物化動(dòng)效設(shè)計(jì)，通過對人們記憶中不同天氣情景的加工，創(chuàng)造舊有經(jīng)歷與新體驗(yàn)之間的聯(lián)系。下雨天時(shí)屏幕上會(huì)有雨滴從空中垂落，當(dāng)用戶改變握持手機(jī)的姿勢時(shí)，雨滴會(huì)根據(jù)陀螺儀判斷的方向隨之改變，完全模擬真實(shí)的天氣情況，具有非常強(qiáng)烈的代入感，使用戶感同身受。3.3情感需求層面的界面動(dòng)效目前，用戶體驗(yàn)的概念已將設(shè)計(jì)的目的從效能擴(kuò)展到情感、意義的維度。作為情感化設(shè)計(jì)的載體之一，動(dòng)效有時(shí)可以被用來滿足用戶的情感需求，給用戶帶來驚喜。在可用性良好的前提下，這類動(dòng)效往往能夠增加產(chǎn)品的亮點(diǎn)，讓界面變得更加靈動(dòng)活潑。例如Tumblr點(diǎn)贊的動(dòng)態(tài)效果，愛心一邊飄起來一邊放大，有種被丘比特射中的感覺，讓人心花怒放，感同身受；當(dāng)取消點(diǎn)贊時(shí)，則出現(xiàn)心碎的動(dòng)效，裂開的愛心讓人不忍心再去取消點(diǎn)贊。小小的點(diǎn)贊效果讓用戶與應(yīng)用之間產(chǎn)生情感互動(dòng)引起共鳴，同時(shí)有助于應(yīng)用留存率的維系。圖3-2Tumblr的點(diǎn)贊動(dòng)效4.目前主流社區(qū)APP的交互動(dòng)效設(shè)計(jì)4.1微信文章底部互動(dòng)設(shè)計(jì)的變化微信圖文消息在最早就有“點(diǎn)贊”功能，后來被“好看”替代，又被“在看”替代，現(xiàn)在和“在看”功能共存。點(diǎn)贊和評論是我們最熟悉的一種內(nèi)容互動(dòng)設(shè)計(jì)，從微博時(shí)代開始就被網(wǎng)友們所熟悉。相對于評論，輕輕一個(gè)點(diǎn)贊，我們就能表達(dá)我們對內(nèi)容的認(rèn)可，降低了我們和作者互動(dòng)的門檻。圖文消息里的評論的好處跟上面類似，只是門檻高一些，細(xì)心的朋友會(huì)發(fā)現(xiàn)，留言只有被作者選為精選，才能被其他讀者看到，而且只有作者本人可以回復(fù)評論。之所以這樣做的原因是為了使被選中的粉絲得到鼓舞，拉近和作者的關(guān)系，也方便作者打造一個(gè)良好的互動(dòng)氛圍，不至于被一些惡意的人破壞。4.2微信朋友圈的互動(dòng)設(shè)計(jì)朋友圈可以看作是一個(gè)小型的內(nèi)容社區(qū)，我們每個(gè)人都是作者，而讀者就是我們的微信好友，性質(zhì)上它屬于一個(gè)私域流量。眾所周知，朋友圈設(shè)計(jì)之初是為了提高我們的社交效率，換言之就是要減少無效數(shù)據(jù)。朋友圈的贊和評論都是收起來的，你點(diǎn)個(gè)贊還要操作兩步，為什么會(huì)要提高讀者的操作難度？我們反過來想，如果操作非常簡便，和微博一樣，下面就放了一個(gè)贊的按鈕，會(huì)發(fā)生什么？可以預(yù)料到的是點(diǎn)贊數(shù)會(huì)增多，而且越來越不珍貴。就像限量款的東西我們會(huì)好好擺在櫥窗端詳，爛大街的貨我們可能就隨手丟向角落了。我們不再期盼發(fā)一條動(dòng)態(tài)，得到別人的點(diǎn)贊，而是期盼得到對方的評論了，只有評論了才是真的好朋友?？墒窃u論的難度比點(diǎn)贊可高多了，我還得想內(nèi)容，想語氣，要不要配個(gè)表情，可能性越多，最后評論的難度越大。而維持點(diǎn)贊的珍貴性就變得很有意義，讓它變得不那么方便，但是也不那么難，這個(gè)很關(guān)鍵。我們不需要特地發(fā)個(gè)消息聊天，我也能知道朋友的動(dòng)態(tài)，然后我通過這個(gè)珍貴的點(diǎn)贊問候了一聲朋友，這真是非常棒的設(shè)計(jì)。再說到分享，朋友圈相當(dāng)于自己的私域流量，如果有分享功能，朋友圈的內(nèi)容會(huì)變多，非但不能提高社交效率，還會(huì)降低。圖4-1微信朋友圈評論點(diǎn)贊動(dòng)效4.3快手快手是一個(gè)提供有趣有料的短視頻內(nèi)容社區(qū)，不同于微信作為工具的定位，它帶有很強(qiáng)的娛樂性質(zhì)。另外快手的理念是“記錄美好生活”，從這兩點(diǎn)出發(fā)我們來看它的設(shè)計(jì)。每個(gè)視頻的作者頭像下方都會(huì)有個(gè)“+”，紅底的圖標(biāo)有很濃的關(guān)注引導(dǎo)，反觀微信公眾號則沒有引導(dǎo)，只有點(diǎn)擊頁面頂部藍(lán)色字體才會(huì)跳轉(zhuǎn)到關(guān)注頁面。這就是因?yàn)榭焓值膴蕵穼傩?，關(guān)注的作者越多，粉絲對平臺(tái)的粘性越高，當(dāng)然要突出強(qiáng)調(diào)啦。同理，分享和評論也是一樣。評論采用的是允許回復(fù)評論的功能，雖然有可能出現(xiàn)對作者不太友好的言論，但是相互之間的評論是可以帶動(dòng)熱度，制造話題的，有利于它的傳播。本人也是快手愛好者，在使用快手過程中，我發(fā)現(xiàn)我們點(diǎn)贊的視頻平臺(tái)會(huì)幫我們記錄下來，但是多了之后并未記全，而且我也很難從中去找我想再看的視頻。我建議快手將點(diǎn)贊的視頻分化出來“點(diǎn)贊”和“收藏”兩個(gè)功能，因?yàn)楹玫膬?nèi)容我看過了不一定會(huì)需要再次看，這既減少了快手服務(wù)器的壓力，也減少了我收藏的內(nèi)容，方便我找到想要再次觀看的視頻。圖4-2快手直播間點(diǎn)贊動(dòng)效4.4知乎知乎是一個(gè)高質(zhì)量的內(nèi)容問答社區(qū)，如果保證高質(zhì)量，那一定要是要有后臺(tái)的運(yùn)營人員審查內(nèi)容，就和本網(wǎng)站一樣，需要監(jiān)管。所以我們可以看到在回答的下方除了點(diǎn)贊以外還有反對，當(dāng)有人覺得答主的回答有明顯的錯(cuò)誤或者三觀不就可以反對，“反對”功能除了維護(hù)它作為一個(gè)開放性的社區(qū)，提倡自由表達(dá)以外，還可以提醒作者注意言論，幫助知乎運(yùn)營人員監(jiān)控平臺(tái)，防止出現(xiàn)某些政治不正確，思想腐敗的言論。這個(gè)反對可以幫助平臺(tái)監(jiān)管人員有效的管理內(nèi)容，提高內(nèi)容的質(zhì)量，設(shè)計(jì)十分新穎。圖4-1知乎下拉動(dòng)效4.5微博微博是一個(gè)短內(nèi)容分享的開放社區(qū)，理念是“隨時(shí)隨地發(fā)現(xiàn)新鮮事”。發(fā)現(xiàn)新鮮事，這個(gè)就對傳播要求很高，如何快速傳播，這當(dāng)然少不了用戶們之間的分享。所以我們在刷微博的時(shí)候能看到內(nèi)容下方左側(cè)第一個(gè)就是分享，點(diǎn)開選項(xiàng)排在首位的就是快轉(zhuǎn)?？燹D(zhuǎn)在不編寫文案的情況下，直接將內(nèi)容轉(zhuǎn)發(fā)出去給自己的粉絲看見。這樣就達(dá)到了快速傳播效果，不得不說，好多娛樂圈的大瓜都是在微博率先發(fā)酵。如果將微信好友看做我們的粉絲，那么朋友圈和在微博刷關(guān)注圈是一樣的，但是一個(gè)不做分享，一個(gè)熱衷于分享，一個(gè)成功提高了效率，一個(gè)成了八卦神壇。那種說微信會(huì)取代了微博的言論，我是不信的，因?yàn)樗麄兲灰粯恿?。圖4-2微博點(diǎn)贊動(dòng)效