2020-12-10 前端達(dá)人
最近收到小伙伴的一個(gè)問題，以下兩種卡片切換怎么用。
以下是我收到的兩個(gè)不同案例，第一眼給我們的感受就是這兩個(gè)case不都是可以通過手指左右滑動(dòng)嘛？
好像有區(qū)別，但是具體有什么區(qū)別，分別可以怎么用，一下子又說不上來，那么大家可以來聽聽我的理解！
不知道大家家里是否有兩種門，一種是轉(zhuǎn)動(dòng)把手可以向內(nèi)或者向外打開的，另一種是拽動(dòng)把手進(jìn)行左右移動(dòng)的，就像下面這個(gè)樣子。
我們可以通過把手和門的樣式判斷出如何對(duì)其進(jìn)行操作，所以兩種卡片，首先在形態(tài)上就有區(qū)別，一種是平鋪一種是疊加，也就是一個(gè)是二維一個(gè)是三維。所以有小伙伴問要問，那又怎樣，實(shí)質(zhì)上都是卡片切換，為什么在banner上不可以用疊加態(tài)呢？
除了在形態(tài)上的區(qū)別外，還有交互手勢(shì)的區(qū)別，大家以為疊加和平鋪都是輕掃切換嗎，首先這兩種形態(tài)都有通過輕掃手勢(shì)可以進(jìn)行狀態(tài)切換的過程，但實(shí)質(zhì)上，疊加狀態(tài)控制的是當(dāng)前卡片與下層卡片，而平鋪狀態(tài)控制的則是一整個(gè)輪播容器，并且疊加卡片除了輕掃以外還可以拖拽。
這里再說一個(gè)交互手勢(shì)的區(qū)別：輕掃（swipe）、甩動(dòng)（flick）、拖拽（Drag）的區(qū)別，拖拽和前兩者比較好區(qū)別，大家應(yīng)該都玩過地?cái)傆螒蛳裉兹θ?，輕掃和甩動(dòng)就像你站在原地往目標(biāo)一扔，而拖拽就像是你探出半個(gè)身子，把圈放到最近的一個(gè)玩具頭頂上再放手，是不是很形象
那么輕掃和甩動(dòng)的區(qū)別是什么呢，我們這里簡(jiǎn)單的描述兩者在可見范圍內(nèi)的區(qū)別，比如：
1. 慣性
比如我們操作移動(dòng)端信息列表的時(shí)候，大拇指對(duì)于內(nèi)容界面的滾動(dòng)進(jìn)行的是甩動(dòng)，上滑后頁(yè)面不會(huì)馬上停下，而會(huì)滾動(dòng)一會(huì)再停下。這就相當(dāng)于給了一個(gè)物理世界的摩擦力的效果，但是輕掃則幾乎不明顯。
2. 位移
輕掃所經(jīng)過的位移較短，基本上在該容器中發(fā)生位移變化，雖然兩者其實(shí)都可以不限制方向，但是位移的距離是有區(qū)別的，輕掃更短，甩動(dòng)更長(zhǎng)。
3. 力量
輕掃無論你的初速度還是力量多大，都只能完成穩(wěn)定的動(dòng)作與狀態(tài)，例如側(cè)滑刪除，不管再怎么用力和加速都只能讓對(duì)象在指定的范圍內(nèi)呈現(xiàn)。
4. 范圍
這個(gè)其實(shí)很有意思，不知道大家最近是否更新了iOS，更新的同學(xué)可能在編輯鬧鐘頁(yè)面會(huì)覺得想要原地爆炸，因?yàn)槲覀兛聪聢D
無論是輕掃還是甩動(dòng)，我們都需要有一個(gè)明確的范圍，在老版本中的時(shí)間切換，輕掃和滾動(dòng)都能很快速的選擇到時(shí)間，因?yàn)槲覀兛梢酝瑫r(shí)看到上下文并且做出預(yù)判，但是新版本就變得有點(diǎn)阿西吧的感覺，為了更精準(zhǔn)的選擇到時(shí)間我們必須從輕掃/甩動(dòng)換成滑動(dòng)，甚至類似于撥動(dòng)的手勢(shì)，難用至極。所以輕掃的范圍也會(huì)比甩動(dòng)的視覺范圍更小。
那么輕掃和甩動(dòng)怎么區(qū)別呢，大家可以理解為，輕掃是在甩動(dòng)的基礎(chǔ)上給被拖動(dòng)對(duì)象增加了穩(wěn)定效果，所以既然增加了穩(wěn)定效果，那么慣性和位移都被固定、穩(wěn)定化了，比如列表左滑刪除，tab左右滑動(dòng)的切換。
另外，大家可能覺得甩動(dòng)和輕掃可以控制我們界面中大部分對(duì)象，可以幫助我們?yōu)g覽，而且要我們可以將甩動(dòng)進(jìn)行穩(wěn)定的輕掃控制。但并非那么簡(jiǎn)單，我舉兩個(gè)糖炒栗子，例如音量和進(jìn)度的調(diào)節(jié)，我們是不可以用甩動(dòng)或者輕掃，因?yàn)闊o法準(zhǔn)確控制，只能使用拖拽。
5. 知乎的懸浮按鈕
另外在知乎的話題切換中有個(gè)懸浮按鈕，這個(gè)按鈕不知道大家是否操作過，他既可以拖拽，也可以甩動(dòng)，問題來了，如果對(duì)其甩動(dòng)會(huì)出現(xiàn)兩種情況，第一種，返回屏幕一側(cè)吸附，第二種吸附到屏幕另一側(cè)。
兩種情況取決于你是否甩動(dòng)過了某一條“邊界”，也就是說你的手指在控制這個(gè)“圓形”對(duì)象時(shí)，何時(shí)進(jìn)行了“關(guān)閉”（也就是何時(shí)手指離開了屏幕），所以這里咱們要說的是，如何選用手勢(shì)進(jìn)行對(duì)象控制，要取決于具體的場(chǎng)景和需求，這里的圓形控制器并不需要非常精準(zhǔn)位置，所以對(duì)其賦予了拖拽和甩動(dòng)兩個(gè)手勢(shì)，那當(dāng)然這里輕掃也可以啦，只是沒什么卵用。
6. QQ的未讀氣泡
還有比如qq的未讀氣泡，拖拽和甩動(dòng)都可以刪除它，但是輕掃不行。
其實(shí)這些規(guī)則我們?cè)诮换?dòng)效的工具中都可以很好的體現(xiàn)，比如拖拽開始-拖拽結(jié)束，對(duì)應(yīng)的就是手指的接觸拖動(dòng)-手指的離開。
所以做個(gè)小總結(jié)，輕掃是甩動(dòng)的穩(wěn)定化效果，并且適合距離較短的進(jìn)行操作，輕掃和甩動(dòng)都是非化操作。
我們?cè)倩氐竭@個(gè)案例本身，疊加和平鋪卡片的交互手勢(shì)，疊加卡片利用的是輕掃，并且還具有拖拽的手勢(shì)屬性，而平鋪的卡片可以輕掃，相當(dāng)于單張瀏覽，類似banner切換，并且也可以具有甩動(dòng)的可能，比如淘票票的熱映卡片，不過平鋪的時(shí)候一般單張卡片不適用甩動(dòng)，輕掃即可，因?yàn)閱螐埧ㄆ褂盟?dòng)，信息基本看不清楚，多張卡片使用甩動(dòng)更容易提高檢索的效率。
另外用過探探的老司機(jī)們都知道，喜歡哪個(gè)美女帥哥就往右邊“扔”卡片，為什么是扔呢，因?yàn)檫@個(gè)“扔”包含了選擇的意思，就像性感的荷官在發(fā)牌一樣，這張卡牌就是你的了！當(dāng)然，既然發(fā)給你了，你也不能退，再想找回來就難咯
所以其實(shí)在手勢(shì)上，疊加態(tài)的卡片切換在我們的預(yù)期和常規(guī)使用中，有著選擇、不可逆的屬性，那這就和平鋪的二維卡片切換就完全不同了。
疊加態(tài)的卡片更不方便信息對(duì)比，而平鋪卡片則可以，例如騰訊視頻的vip等級(jí)卡片切換。沒有對(duì)比就沒有傷害，不造成傷害，就促進(jìn)不了買賣。所以你看非誠(chéng)勿擾都是排一排給你選的而不是一個(gè)出來不行換另一個(gè)，因?yàn)槟悴恢老乱粋€(gè)會(huì)不會(huì)更不喜歡。
疊加態(tài)的卡片就像是德州撲克一樣，不知道大家是否all in過，是否賭贏過最后一張牌，在沒有發(fā)出那張牌的時(shí)候，我們總是抱著期望，所以疊加的卡片，在我們普通人的預(yù)期中是潛意識(shí)的提高的，而平鋪的卡片就像已經(jīng)發(fā)在你手里的卡片，你可以觀察、對(duì)比，但是沒有了未知感和神秘感，所以抖音是如何讓你上癮的，讓你沉浸在其中的，大家現(xiàn)在可以理解了嗎。
疊加態(tài)的卡片在展示上會(huì)給你一些樣式，告訴你這里有好多張，并且是永遠(yuǎn)切換不完的，而平鋪卡片則通常需要告知用戶外這里有幾張，你看到了第幾張，所以又多了一個(gè)輪播指示器來幫你記憶。
綜上所述，方案沒有好壞，只有適不適合當(dāng)前的場(chǎng)景。所以，在什么場(chǎng)景下用什么樣的切換大家學(xué)廢了嗎？
轉(zhuǎn)自：優(yōu)設(shè)網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com