移動端交互-下拉菜單、單選、多選
“在PC上常出現的下拉菜單,在移動端上都是用什么交互來實現的”,將最近項目里碰到的情況總結一下。
1. 層級設計,以iOS為代表
iOS系統日歷
- 目前最常見的一種做法,外露設置名稱和默認設置項,將全部設置內容放在下一層。
- 節約垂直空間,不干擾當前界面其他內容。可以很好兼容單選、多選等多種情況。作為一個完整的界面,可以容納的內容比較多。
- 但增加一個層級,就意味著有進入和返回兩步操作。尤其是返回大多在界面左上角,隨著手機屏幕越來越大,采用這種方式又沒有手勢右滑返回還是挺難用的。
- 我一直覺得,將層級設計用的風生水起的就是微信。基本上一級的四個tab都是層級的世界。
2. 彈窗設計,以Android為代表
Google日歷
- 選擇項作為臨時彈窗出現在界面中,單選的話,點一下彈框自動消失,多選的話點擊完成消失。
- 彈窗是一個在移動端上容易受鄙視的交互,但實際使用下來,google把它做得挺美挺實用的。 當只有較少如個位數的設置項時,實際操作體驗比層級式的好很多,會很同意“一個彈框能搞定的事實在不需要再新起一個層級”。但這個交互目前看很少人采 用,Android的設計語言規范比起iOS還是弱勢了許多。
- 但當內容一旦多起來,這個小彈框就會有點不堪重負,還會出現彈窗上需要再彈窗的尷尬局面。
3. 下拉菜單
- 就是類似PC的下拉菜單,這樣少見的設計,被發現于剛剛說google那個彈框上又有彈框的情況下。但再一次實際使用效果沒想象中差,如果忽略它疊疊樂的感覺,和在移動端點擊菜單的彈出菜單差不多。
- 但總的來說,還是一個奇怪的操作。
4. 嵌入式自動伸縮(這個名字不好起)
不記得在哪看到的,用這個圖意思一下……
- 選項在當前層級界面展現,把其他內容往下擠,完成選擇后自動收起。
- 也是一個避免了進入新層級的交互。iOS里的時間選擇器經常會用這種方法出現。
- 壞處是對當前界面影響較大,進出場界面大幅變動。同時嵌入式給人不穩定不安全的感覺,好像一不小心碰了別處這些選項就消失了。尤其是選項較多還需要上下滑動的情況。我覺得這種方式使用于選擇項很少,且當前層級內容本身也簡潔的情況。
5. 選擇內容平鋪出來
- 好處當然是所需操作最少,只需要勾選一個操作,壞處也很明顯,太占地兒。一般情況下很少見,除非本身這些選項就是核心內容的情況,比如調研問卷。
- 沒有截圖
廢話:這些看上去很常見普通的交互,碰到案例的時候有時一時竟然想不起來。所以最近為了提高交互技能點,打算總結一些常見的交互方法。
原文來自:簡書
作者:初三_RR
評論
其他不說,作者應該好好看看官方文檔
兄弟,哪里有官方文檔可以看,能推薦下嗎?