“在PC上常出現(xiàn)的下拉菜單，在移動(dòng)端上都是用什么交互來(lái)實(shí)現(xiàn)的”，將最近項(xiàng)目里碰到的情況總結(jié)一下。

1. 層級(jí)設(shè)計(jì)，以iOS為代表

iOS系統(tǒng)日歷

• 是目前最常見(jiàn)的一種做法，外露設(shè)置名稱和默認(rèn)設(shè)置項(xiàng)，將全部設(shè)置內(nèi)容放在下一層。
• 節(jié)約垂直空間，不干擾當(dāng)前界面其他內(nèi)容。可以很好兼容單選、多選等多種情況。作為一個(gè)完整的界面，可以容納的內(nèi)容比較多。
• 但增加一個(gè)層級(jí)，就意味著有進(jìn)入和返回兩步操作。尤其是返回大多在界面左上角，隨著手機(jī)屏幕越來(lái)越大，采用這種方式又沒(méi)有手勢(shì)右滑返回還是挺難用的。

我一直覺(jué)得，將層級(jí)設(shè)計(jì)用的風(fēng)生水起的就是微信?；旧弦患?jí)的四個(gè)tab都是層級(jí)的世界。

2. 彈窗設(shè)計(jì)，以Android為代表

Google日歷

• 選擇項(xiàng)作為臨時(shí)彈窗出現(xiàn)在界面中，單選的話，點(diǎn)一下彈框自動(dòng)消失，多選的話點(diǎn)擊完成消失。
• 彈窗是一個(gè)在移動(dòng)端上容易受鄙視的交互，但實(shí)際使用下來(lái)，google把它做得挺美挺實(shí)用的。 當(dāng)只有較少如個(gè)位數(shù)的設(shè)置項(xiàng)時(shí)，實(shí)際操作體驗(yàn)比層級(jí)式的好很多，會(huì)很同意“一個(gè)彈框能搞定的事實(shí)在不需要再新起一個(gè)層級(jí)”。但這個(gè)交互目前看很少人采用，Android的設(shè)計(jì)語(yǔ)言規(guī)范比起iOS還是弱勢(shì)了許多。
• 但當(dāng)內(nèi)容一旦多起來(lái)，這個(gè)小彈框就會(huì)有點(diǎn)不堪重負(fù)，還會(huì)出現(xiàn)彈窗上需要再?gòu)棿暗膶擂尉置妗?/li>

3. 下拉菜單

Google日歷疊疊樂(lè)

就是類似PC的下拉菜單，這樣少見(jiàn)的設(shè)計(jì)，被發(fā)現(xiàn)于剛剛說(shuō)google那個(gè)彈框上又有彈框的情況下。但再一次實(shí)際使用效果沒(méi)想象中差，如果忽略它疊疊樂(lè)的感覺(jué)，和在移動(dòng)端點(diǎn)擊菜單的彈出菜單差不多。

但總的來(lái)說(shuō)，還是一個(gè)奇怪的操作。

4. 嵌入式自動(dòng)伸縮（這個(gè)名字不好起）

這個(gè)設(shè)計(jì)叫滾筒：）

選項(xiàng)在當(dāng)前層級(jí)界面展現(xiàn)，把其他內(nèi)容往下擠，完成選擇后自動(dòng)收起。

也是一個(gè)避免了進(jìn)入新層級(jí)的交互。iOS里的時(shí)間選擇器經(jīng)常會(huì)用這種方法出現(xiàn)。

壞處是對(duì)當(dāng)前界面影響較大，進(jìn)出場(chǎng)界面大幅變動(dòng)。同時(shí)嵌入式給人不穩(wěn)定不安全的感覺(jué)，好像一不小心碰了別處這些選項(xiàng)就消失了。尤其是選項(xiàng)較多還需要上下滑動(dòng)的情況。我覺(jué)得這種方式使用于選擇項(xiàng)很少，且當(dāng)前層級(jí)內(nèi)容本身也簡(jiǎn)潔的情況。

5. 選擇內(nèi)容平鋪出來(lái)

• 好處當(dāng)然是所需操作最少，只需要勾選一個(gè)操作，壞處也很明顯，太占地兒。一般情況下很少見(jiàn)，除非本身這些選項(xiàng)就是核心內(nèi)容的情況，比如調(diào)研問(wèn)卷。最常見(jiàn)于選擇性別時(shí)的男女選項(xiàng)。
• 沒(méi)有截圖

廢話：這些看上去很常見(jiàn)普通的交互，碰到案例的時(shí)候有時(shí)一時(shí)竟然想不起來(lái)。所以最近為了提高交互技能點(diǎn)，打算總結(jié)一些常見(jiàn)的交互方法。

本文由 @初三_RR??授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。