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

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