移動端交互-下拉菜單、單選、多選

2 評論 85140 瀏覽 308 收藏 5 分鐘

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

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

iOS系統(tǒng)日歷

  • 目前最常見的一種做法,外露設(shè)置名稱和默認(rèn)設(shè)置項(xiàng),將全部設(shè)置內(nèi)容放在下一層。
  • 節(jié)約垂直空間,不干擾當(dāng)前界面其他內(nèi)容??梢院芎眉嫒輪芜x、多選等多種情況。作為一個完整的界面,可以容納的內(nèi)容比較多。
  • 但增加一個層級,就意味著有進(jìn)入和返回兩步操作。尤其是返回大多在界面左上角,隨著手機(jī)屏幕越來越大,采用這種方式又沒有手勢右滑返回還是挺難用的。
  • 我一直覺得,將層級設(shè)計(jì)用的風(fēng)生水起的就是微信?;旧弦患壍乃膫€tab都是層級的世界。

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

ps2

Google日歷

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

3. 下拉菜單

ps3

Google日歷疊疊樂

  • 就是類似PC的下拉菜單,這樣少見的設(shè)計(jì),被發(fā)現(xiàn)于剛剛說google那個彈框上又有彈框的情況下。但再一次實(shí)際使用效果沒想象中差,如果忽略它疊疊樂的感覺,和在移動端點(diǎn)擊菜單的彈出菜單差不多。
  • 但總的來說,還是一個奇怪的操作。

4. 嵌入式自動伸縮(這個名字不好起)

ps4

不記得在哪看到的,用這個圖意思一下……

  • 選項(xiàng)在當(dāng)前層級界面展現(xiàn),把其他內(nèi)容往下擠,完成選擇后自動收起。
  • 也是一個避免了進(jìn)入新層級的交互。iOS里的時間選擇器經(jīng)常會用這種方法出現(xiàn)。
  • 壞處是對當(dāng)前界面影響較大,進(jìn)出場界面大幅變動。同時嵌入式給人不穩(wěn)定不安全的感覺,好像一不小心碰了別處這些選項(xiàng)就消失了。尤其是選項(xiàng)較多還需要上下滑動的情況。我覺得這種方式使用于選擇項(xiàng)很少,且當(dāng)前層級內(nèi)容本身也簡潔的情況。

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

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

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

 

原文來自:簡書

作者初三_RR

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 其他不說,作者應(yīng)該好好看看官方文檔

    來自廣東 回復(fù)
    1. 兄弟,哪里有官方文檔可以看,能推薦下嗎?

      來自廣東 回復(fù)