一、利用手勢交互實(shí)現(xiàn)自動(dòng)跳轉(zhuǎn)
隨著手勢交互的不斷成熟，被普遍的應(yīng)用到產(chǎn)品設(shè)計(jì)中。利用手勢的輔助可以縮短用戶的操作路徑，通過不斷優(yōu)化用戶的學(xué)習(xí)成本，帶給用戶更加便利的操作體驗(yàn)。通過指向按鈕的引導(dǎo)可以讓用戶抵達(dá)需求目的，需要用戶進(jìn)行點(diǎn)擊操作。針對橫向滑動(dòng)的交互輸出中，在連貫的滑動(dòng)操作中配合手勢交互，隨著滑動(dòng)力度的不同可以實(shí)現(xiàn)自動(dòng)跳轉(zhuǎn)。比如開言英語 APP 課程模塊中，針對推薦的課程卡片在向左滑動(dòng)過程中，隨著滑動(dòng)的程度提示“查看更多”和“釋放查看”，實(shí)現(xiàn)詳情內(nèi)容的自動(dòng)跳轉(zhuǎn)。對于需要查看更多推薦內(nèi)容的用戶來說，減少了二次點(diǎn)擊的步驟，提高了操作的便捷度和使用效率。
二、手勢交互帶來的切歌體驗(yàn)
手勢交互能夠帶給用戶使用的便捷度，不過目前很多產(chǎn)品的手勢玩法都還有待用戶去挖掘。功能層面是否“暗藏玄機(jī)”需要用戶的深度體驗(yàn)，如果可以培養(yǎng)用戶的使用習(xí)慣，帶來的便捷度和體驗(yàn)度都會(huì)進(jìn)一步提升。在 QQ 音樂主頁底部標(biāo)簽欄上方會(huì)浮層展示播放器，方便用戶操作正在播放的歌曲?？梢酝ㄟ^左右滑動(dòng)的手勢進(jìn)行切歌體驗(yàn)，對于盲選歌曲來說非常便利。在不改變當(dāng)前布局結(jié)構(gòu)的基礎(chǔ)上新增功能操作，手勢交互是不錯(cuò)的選擇，這個(gè)隱藏的手勢體驗(yàn)?zāi)闶欠褡⒁獾侥兀?/section>
三、拖動(dòng)進(jìn)度條實(shí)時(shí)預(yù)覽畫面
從短視頻到長視頻，內(nèi)容量的豐富可以滿足用戶的觀看需求，針對長視頻來說進(jìn)度的設(shè)計(jì)可以便于用戶選取感興趣的部分。抖音的進(jìn)度條設(shè)計(jì)也在不斷的探索新的體驗(yàn)，最近更新的版本中在拖動(dòng)進(jìn)度條時(shí)，會(huì)隱藏其他附屬的功能，讓界面顯得更加簡潔。拖動(dòng)進(jìn)度條時(shí)也會(huì)實(shí)時(shí)預(yù)覽顯示視頻畫面，輔助用戶進(jìn)行精準(zhǔn)的內(nèi)容確定，提高用戶的操作效率。
四、底部功能區(qū)的延伸設(shè)計(jì)
底部功能區(qū)是手勢操作的最佳區(qū)域，近些年越來越多的產(chǎn)品對該區(qū)域進(jìn)行延伸設(shè)計(jì)，滿足更多功能曝光的目的。百度翻譯 APP 在底部標(biāo)簽欄上方延伸了一個(gè)功能區(qū)，初次進(jìn)入時(shí)呈現(xiàn)隱藏式設(shè)計(jì)，單擊或者上滑展開全部。延伸功能區(qū)為用戶提供了更多常用功能，便于進(jìn)行頻繁操作，提升用戶的操作體驗(yàn)和效率。
五、情感化的功能引導(dǎo)設(shè)計(jì)
初次使用一個(gè)產(chǎn)品時(shí)，針對一些重點(diǎn)功能都會(huì)進(jìn)行引導(dǎo)設(shè)計(jì)，以此來提高功能的曝光度，降低用戶的學(xué)習(xí)成本。百度翻譯 APP 通過情感化的 IP 形象進(jìn)行功能引導(dǎo)，可愛的形象趴在功能區(qū)上，趣味性十足。情感化設(shè)計(jì)的融入相較于普通的文字浮層，更能吸引用戶的關(guān)注度。
六、推薦模塊的輪播翻頁設(shè)計(jì)
推薦模塊在產(chǎn)品設(shè)計(jì)中較為普遍，也呈現(xiàn)了各式各樣的設(shè)計(jì)解決方案，結(jié)合自身的內(nèi)容屬性進(jìn)行設(shè)計(jì)，是體現(xiàn)差異化設(shè)計(jì)的關(guān)鍵。最近在喜馬拉雅 APP 播客欄目發(fā)現(xiàn)了不一樣的設(shè)計(jì)表達(dá)，通過專輯封面形式結(jié)合輔助解釋來設(shè)計(jì)。不僅結(jié)合了自身內(nèi)容屬性，也能在強(qiáng)化視覺感的同時(shí)利用文案輔助讓解釋更加清楚。通過手勢滑動(dòng)進(jìn)行翻頁切換，動(dòng)態(tài)效果也是非常的流暢自然。
七、提高圖文布局視野感的設(shè)計(jì)
在針對新聞、資訊、熱點(diǎn)等內(nèi)容進(jìn)行布局時(shí)，通常有左圖右文、左文右圖、純文字布局、輪播圖等形式。設(shè)計(jì)表達(dá)考慮了閱讀引導(dǎo)和版面利用率，如果需要突出視覺感時(shí)，如何進(jìn)行設(shè)計(jì)發(fā)揮呢？最近在芒果 TV APP 首頁的看點(diǎn)專欄發(fā)現(xiàn)了一個(gè)感官體驗(yàn)不錯(cuò)的設(shè)計(jì)，將文字信息以卡片式進(jìn)行布局，以大圖作為背景來襯托卡片。滑動(dòng)時(shí)也會(huì)有進(jìn)度條式的控件提示，整體的視野感更強(qiáng)，更能吸引用戶的關(guān)注度。
八、微動(dòng)效增強(qiáng)簽到設(shè)計(jì)的關(guān)注度
簽到的存在是為了提高用戶粘性，通過簽到獲得積分，兌換禮品或者升級功能服務(wù)等權(quán)益。提高簽到的曝光度才能吸引用戶參與，進(jìn)而達(dá)到需求目的。除了在簽到設(shè)計(jì)的視覺感上面進(jìn)行強(qiáng)化以外，微動(dòng)效的表達(dá)也是非常不錯(cuò)的選擇。快看 APP 就將代表簽到的圖標(biāo)通過動(dòng)效來強(qiáng)化，也能吸引到用戶的關(guān)注，提高簽到的點(diǎn)擊率和參與度。
九、輔助圖形強(qiáng)化品牌感
立足于品牌做設(shè)計(jì)，無論是那個(gè)方向的設(shè)計(jì)都需要從品牌的角度進(jìn)行思考，特別是 UI設(shè)計(jì)。通過輔助圖形強(qiáng)化品牌感是一個(gè)方向，逐步被設(shè)計(jì)師加以運(yùn)用。比如考拉海購 APP 在多個(gè)局部區(qū)域融入了輔助圖形進(jìn)行強(qiáng)化，將輔助圖形作為背景使用。輔助圖形結(jié)合到 UI 場景中，是 UI 設(shè)計(jì)師后期需要逐步探索的方向。
十、懸浮動(dòng)效式空狀態(tài)設(shè)計(jì)
空狀態(tài)代表無數(shù)據(jù)狀態(tài)設(shè)計(jì)，通常形式有純文案提示、圖形加文案提示、情感化插畫融入、IP 形象結(jié)合、動(dòng)效表達(dá)形式等。在體驗(yàn)的眾多案例中，動(dòng)效形式的表達(dá)相對較少，不過感官度也是不錯(cuò)的。在 COVES APP 中，采用動(dòng)效式空狀態(tài)設(shè)計(jì)來表達(dá)無數(shù)據(jù)狀態(tài)。在局部的模塊還使用了懸浮動(dòng)效式表達(dá)，無論是視覺感還是吸引力都呈現(xiàn)出不錯(cuò)的效果。不僅吸引用戶的關(guān)注度，也融合了產(chǎn)品的設(shè)計(jì)風(fēng)格，是一個(gè)不錯(cuò)的設(shè)計(jì)解決方案。
小結(jié)
每一次的體驗(yàn)、分析、總結(jié)都能吸收新的思路和靈感，有助于我們提高設(shè)計(jì)的靈活性和解決需求的效率。希望本期的整理可以帶給你更多幫助，我們互相進(jìn)步。 轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》一些被忽略的 UI 設(shè)計(jì)表現(xiàn)技巧
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(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ù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
![[優(yōu)化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/03/ezgif-1-f08a812a03.gif)
