中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)讀：滑動設(shè)計(jì)是最常用的交互手勢之一，需要思考的是如何在有限的屏幕中，用最低的操作成本，提供更多的內(nèi)容。本文作者基于自身工作經(jīng)驗(yàn)，對此發(fā)表了自己的看法，與你分享。

COMA’s Pre-Roll：

滑動操作，是移動設(shè)備里最基本交互手勢之一。如何在尺寸有限的屏幕里，用最低的操作成本，給用戶提供更多的內(nèi)容，把橫向空間拓展出來，就是方法之一。

如果說3D Touch是三維操作，那么沒有滑動手勢的產(chǎn)品，可以說是只在線性的一維空間里上竄下跳?。在上下滑動的同時(shí)，拓展出左右滑動的空間，才算是成功從一維的「線」，躍遷至二維的「面」。下面咱們就來聊聊這個小小的滑動操作，都有什么不同。

關(guān)于滑動的應(yīng)用場景，可以大致分為以下幾種：

• 側(cè)滑返回
• 更多操作
• 切換
• 查看更多
• 進(jìn)度調(diào)整
• 收納
• 快速多選

往下來依次了解一下，這些滑動具體的運(yùn)用方式。

01 側(cè)滑返回

側(cè)滑能夠返回上一級的操作，是 iOS 系統(tǒng)的特色之一，這個在屏幕邊緣右滑的交互手勢，誕生于 iOS7 。

得益于系統(tǒng)底層的支持，以及 APP 的規(guī)范性開發(fā)，iOS 平臺上每個軟件都支持「側(cè)滑返回」手勢，它極大方便了用戶的單手操作，使得場景切換更加流暢。

現(xiàn)在的手機(jī)尺寸越出越大，同樣是想要返回上一級，比起點(diǎn)擊左上角，直接在屏幕邊緣右滑顯然更加快捷。而人一旦習(xí)慣了「側(cè)滑返回」這個又爽又快又方便的手勢，就很難戒掉。

甚至遇到側(cè)滑返回?zé)o效或者手勢沖突的情況時(shí)，往往會惹惱用戶。取代耐心點(diǎn)擊左上角返回的，是直沖后臺殺進(jìn)程。

02 更多操作

在微信、QQ 等 IM 即時(shí)通訊軟件中，諸如標(biāo)為未讀/已讀、置頂/取消置頂、刪除、移入消息盒子、標(biāo)記聊天等等快捷功能，最常見的操作方式就是左右滑（以及長按）。

微信的收藏，左滑可以添加標(biāo)簽和刪除。

iOS 系統(tǒng)的通知也是如此，左滑管理、查看、清除；右滑快速打開應(yīng)用。

較為特別的有 KIM 和釘釘，它們在對話氣泡上也增加了側(cè)滑手勢的響應(yīng)。

在 KIM 里，左滑對話氣泡，可以快捷引用選中的消息，并且自動添加 @ 相應(yīng)的人，用于快速對特定的某條消息進(jìn)行回復(fù)，提升效率。

在釘釘?shù)牧奶旖缑胬?，屏幕邊緣右滑，可以展示出時(shí)間戳，每條消息的確切發(fā)送時(shí)間點(diǎn)都清楚可見。

03 切換

滑動最下意識、最基礎(chǔ)的功能，就是用于切換。

頁面之間的切換：

EDGE 瀏覽器左右滑動網(wǎng)頁，可以前進(jìn)或后退；Instagram 的臨時(shí)動態(tài)可以左右切換；iOS 桌面左滑進(jìn)入負(fù)一屏，這里可以收納更多不同的內(nèi)容，拓展了更多可能性；以及多數(shù)有頂部導(dǎo)航和次級 Tab 的軟件如微博、知乎、小紅書等等，左右滑動都可以進(jìn)行頁面和 Tab 的切換。

iOS 的系統(tǒng)相冊，在「照片」Tab 下右滑可以切換時(shí)間軸，從「所有照片」到以「日」為單位，一步步擴(kuò)大到以「年」為單位，方便用戶在大量照片中進(jìn)行快速定位和查找。

還有蝦米音樂、QQ 音樂等音樂軟件，在播放頁左右滑，可以進(jìn)行切換到歌曲詳情頁、歌詞頁或是相關(guān)推薦頁、以及切換歌曲等操作。

Banner 之間的切換：

用圖片來傳達(dá)信息，要比文字更加快速精準(zhǔn)，閱讀起來也更加省力。

不僅是電商購物平臺，甚至是網(wǎng)上藥店、外賣商家，輪播的 Banner 都是不可或缺的。如淘寶、拼多多、美團(tuán)買藥、餓了么外賣。

點(diǎn)進(jìn)商品頁面，第一眼看到的就是位于頂部商品頭圖，這是一屏中占比最高的位置，也是目光的中心焦點(diǎn)。而商品頭圖因?yàn)榭雌饋砜旖莘奖?，所以瀏覽完整度往往更高。

有一個不同的地方，就是淘寶的輪播圖最多可以放5張，而拼多多的輪播圖可以到10張之多。

猜測其原因，是淘寶賣家會更加關(guān)注商品整體的感覺。你逛淘寶的時(shí)候是不是這個樣子：“點(diǎn)進(jìn)商品，先左右滑快速看看頭圖，然后往下滑看看商品詳情頁、看一下賣家秀、產(chǎn)品細(xì)節(jié)、功能點(diǎn)、尺碼顏色等等、再看眼評論區(qū)有沒有買家秀，最后點(diǎn)擊加入購物車看下想要的有沒有貨、什么價(jià)格，沒貨或者不太想加購物車占位置就先點(diǎn)下收藏。至于最后買不買那就另說了?！?/p>

而拼多多以便宜實(shí)惠著稱，已經(jīng)形成了特定的用戶心智。所以往往最多10張的頭圖所呈現(xiàn)的信息，就足以令部分用戶看完之后就決定下單。

然而看似平平無奇的輪播 Banner ，還能做出點(diǎn)什么花來呢？

自如和京東做到了。

自如首頁的 Banner 將畫面主要內(nèi)容和背景拆分開，滑動時(shí)只移動主體物，背景則采用淡出淡入的方式進(jìn)行切換，視覺效果新穎。相比起傳統(tǒng)的一張張圖片輪換，這樣的處理方式不得不說十分精致和有細(xì)節(jié)。

京東發(fā)現(xiàn)頁的直播 Tab 下，雙十一期間的輪播圖則采用了「掏空背景底色」的方式，雖然和自如的處理方式有所不同，但依舊區(qū)別于傳統(tǒng)的位圖輪換，視覺觀感更佳。

切換還有一些其他的應(yīng)用場景：

探探、Aloha、積目等交友軟件，常用卡片切換的方式進(jìn)行好友匹配，「右滑喜歡，左滑不喜歡」的手勢操作簡單易上手，讓人有點(diǎn)越滑越來勁的意思；改版后的淘寶，也在雙列 Feed 的頂部，新增了一處固定的輪播圖運(yùn)營位。

綠洲發(fā)現(xiàn)頁的頂部運(yùn)營位，區(qū)別于傳統(tǒng)的一張張 Banner 圖輪換的形式，將運(yùn)營位拆分成了三個部分，這樣可以擴(kuò)展頂部的運(yùn)營區(qū)域，給更多活動提供了曝光；而腰部的推薦卡片則采用了更加擬真的切換效果。

還有網(wǎng)易出品的音街、快手站內(nèi)的音悅臺推薦音樂，對于卡片的切換體驗(yàn)，都更加的精致優(yōu)雅。

04 查看更多

其實(shí)「查看更多」與「切換」是十分相近的。

兩者的區(qū)別可能就是在于，切換之后，信息層級是否有非常明顯的變化。

比如 App Store 里的游戲 Tab ，里面也有 Banner 的輪播位。這里的一張 Banner 被切走之后，信息層級被降到最低，只會露出一點(diǎn)邊緣，暗示用戶「這里還有」；飛豬旅行里的旅行日歷，往后滑動卡片時(shí)，實(shí)際上每張卡片的信息層級強(qiáng)弱并沒有被拉得很開，更多的是感覺到「往后滑還可以看到更多」。

其實(shí)簡單來說，區(qū)分的方式就是看它是被「切」走的，還是被「滑」走的。

諸如 SODA、Facebook、微博、快手、抖音等產(chǎn)品，都有此類橫劃用戶推薦卡片的身影。不過這類推薦卡片并非是社交產(chǎn)品的專屬，支付寶里也有出現(xiàn)類似的橫滑推薦卡片。

值得一提的是支付寶在這里的手勢引導(dǎo)做的很有意思，采用了豎著的「滑動查看更多」，上下兩個不同方向的雙箭頭也進(jìn)一步的引導(dǎo)了用戶進(jìn)行相關(guān)操作。

滑動除了可以對頁面進(jìn)行切換，在一些特定場景，還可以賦予跳轉(zhuǎn)頁面的能力。

如綠洲在關(guān)注頁插入的用戶推薦橫滑卡片，在左滑到末位后，繼續(xù)滑動就會直接進(jìn)入專門承接用戶推薦的落地頁；

美團(tuán)買藥的店內(nèi)優(yōu)選，在左滑到末位后，繼續(xù)滑動并松手，也會跳轉(zhuǎn)到專門承接優(yōu)選推薦的落地頁。

不過雖然這兩個產(chǎn)品用的手勢是一致的，但在體驗(yàn)上，美團(tuán)買藥略勝一籌。

綠洲的推薦卡片如果滑動速度過快，頁面直接就跳轉(zhuǎn)走了，一點(diǎn)心理準(zhǔn)備都沒有給用戶，雖然有「繼續(xù)滑動查看更多」的文案提醒，但是奈何交互跳轉(zhuǎn)邏輯上缺少一個中間態(tài)，滑快點(diǎn)就直接就跳走了，更別說先看到提示文案了。相比之下，美團(tuán)的店內(nèi)優(yōu)選卡片，在松手之后才跳轉(zhuǎn)，給足了用戶心里準(zhǔn)備和緩沖的時(shí)間。

快手的關(guān)注頁、抖音的推薦頁，左滑都可以直接跳轉(zhuǎn)至作者的個人頁。

「滑動查看更多」除了上面提到的那些場景，還有兩個比較特別的。

一個是快手的精選頁，左滑會從頁面右側(cè)出現(xiàn)一個「滑滑板」一樣的功能區(qū)。

在沒有調(diào)出滑滑板的時(shí)候，上下滑就是常見的熱門精選作品切換；而調(diào)出這個功能區(qū)之后再上下滑，就是在當(dāng)前作者的作品里進(jìn)行切換了。

這樣不僅提升了單屏的利用空間，還能讓用戶能更方便的瀏覽作者的其他作品、幫助提高其他作品的曝光量。并且繼續(xù)左滑，也能進(jìn)入作者的個人頁。

另一個是京東發(fā)現(xiàn)頁里的關(guān)注 Tab 下，有一塊關(guān)注店鋪的新動態(tài)區(qū)域，相當(dāng)于是上新通知。

滑動頭像來切換的做法其實(shí)并不少見，但京東在這里做的就比較好。固定首個頭像為選中區(qū)，滑動切換選中店鋪。店鋪頭像的下方實(shí)時(shí)展示店內(nèi)商品，并且商品區(qū)也可以滑動來查看更多。滑動停止后，還會有一個「正在瀏覽」的標(biāo)簽來表示當(dāng)前狀態(tài)。

這樣的做法能夠讓用戶更加高效的了解關(guān)注店鋪的上新情況，提升店鋪的曝光率的同時(shí)，將原本十分麻煩的操作路徑，一下子拍平簡化了，妙！

05 進(jìn)度調(diào)整

左右滑動來快進(jìn)快退視頻是再常見不過的快捷操作，不論是包羅萬象的嗶哩嗶哩，還是騰訊優(yōu)酷愛奇藝，又或是快手抖音騰訊微視這類「殺時(shí)間」的短視頻產(chǎn)品，沒有個進(jìn)度條都不好意思說自己是個看視頻的 APP 。

雖然左右滑動調(diào)整進(jìn)度在視頻類產(chǎn)品上最常見，但其實(shí)這也并非是視頻類產(chǎn)品的專屬。如 iOS 系統(tǒng)相冊就可以在編輯頁面用滑動的方式對視頻進(jìn)行逐幀瀏覽。

并且，iOS 系統(tǒng)相冊的照片 Tab 里，還有一個小彩蛋：在年視圖下，左右滑動封面可以快速預(yù)覽12張圖，而這12張預(yù)覽圖對應(yīng)著12個月份。

06 浮窗收納

有些產(chǎn)品在用戶截圖之后就會立即彈出一個分享面板。但我個人覺得這個特性非常煩人，因?yàn)榻貓D之后還需要我再點(diǎn)一下取消，關(guān)掉這個分享面板才能繼續(xù)瀏覽。不過這邊先不展開了，留到下一期，我會專門寫一篇推送，把那些不吐不快的產(chǎn)品體驗(yàn)一個個都摘出來。

iOS 系統(tǒng)在截圖之后，屏幕左下角會出現(xiàn)一個預(yù)覽浮層。截圖后點(diǎn)進(jìn)去，就可以立即進(jìn)行編輯，左滑則可以將其移出屏幕，但截圖還是會保存到相冊。

有些比較有心的軟件，在截圖后彈出的分享面板上，會避開 iOS 的截圖預(yù)覽浮層的干擾。如拼多多、最右，這兩個產(chǎn)品的截圖分享面板，要么是左側(cè)留空只放引導(dǎo)文案，要么是放一張小的截圖預(yù)覽。

如此一來就可以避免用戶截圖后想立即分享，但分享入口卻被截圖預(yù)覽浮層擋住的尷尬情況。

要說浮窗收納，肯定繞不過微信。

微信在7.0.4版本發(fā)布了浮窗這個新功能，解決了當(dāng)時(shí)公眾號文章閱讀體驗(yàn)連續(xù)性的痛點(diǎn)，并在7.0.5版本對浮窗的樣式進(jìn)行了優(yōu)化。

現(xiàn)在微信的浮窗支持收納最多5個文章或小程序鏈接+1個音頻。

除了微信，知乎現(xiàn)在也有這個功能。不過對于知乎新增的浮窗功能，網(wǎng)上評價(jià)褒貶不一。

知乎在更新收納浮窗功能前，原本就有「下一個回答」懸浮按鈕，并且回答頂部有「寫回答」、「邀請回答」以及「關(guān)注」按鈕，底部還有「喜歡」、「收藏」、「評論」按鈕，這時(shí)候要是再加上收納浮窗，點(diǎn)屏幕就跟踩地雷似的，看準(zhǔn)了再點(diǎn)奧鐵汁！

目前知乎的浮窗只支持最多5篇文章的收納，且暫不支持收納視頻。

Facebook 也有浮窗收納功能。首頁的臨時(shí)動態(tài)支持左滑直接收納進(jìn)浮窗，并且交互動畫十分Q彈順滑。

07 快速多選

關(guān)于滑動手勢應(yīng)用場景的最后一個分類：快速多選。多是出現(xiàn)在一些相冊和圖片管理軟件上。

iOS 系統(tǒng)相冊點(diǎn)擊右上角的「選擇」按鈕后，斜向滑動照片就可以進(jìn)行多選。

雖然 iOS 很多地方的體驗(yàn)都做的很好，但是相冊的多選，這個體驗(yàn)確實(shí)還有些優(yōu)化的空間。

比如在多選狀態(tài)的時(shí)候，上下滑動屏幕尋找要選的照片，就很容易在滑動的過程中選中其他圖片。萬一這時(shí)候是在整理相冊，不小心把本來不想刪除的照片選中了，結(jié)果到最后還沒發(fā)現(xiàn)，就默默跟著被一起刪掉了（雖然還有個最近刪除的后悔藥，但是萬一完全沒發(fā)現(xiàn)呢）。而這個地方一刻相冊做的就比 iOS 系統(tǒng)相冊更好。一刻相冊要進(jìn)入多選狀態(tài)，需要長按一下，然后伴隨一個輕微的震動反饋，便進(jìn)入了待選中狀態(tài)，這時(shí)候滑動照片就可以進(jìn)行多選，松手之后就可以退出了多選狀態(tài)。

08 尾聲

關(guān)于滑動手勢五花八門的用法介紹，暫時(shí)就到這里了。

首先，很感謝能一直看到這里的你??。?！

最后，希望以上這些內(nèi)容能對大家有所幫助！

感謝各位捧場，咱們下期再見~?

（下期關(guān)鍵詞預(yù)告：關(guān)于日常生活里那些不吐不快的產(chǎn)品體驗(yàn)）

作者：壞旅行COMA，微信公眾號：壞旅行（Bad0Trip）

本文由 @壞旅行COMA 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。