2018-4-11 藍藍設(shè)計的小編
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
通常在PC上常出現(xiàn)的下拉菜單,在移動端上都是用什么交互來實現(xiàn)的?將最近項目里碰到的情況總結(jié)一下。
iOS系統(tǒng)日歷
是目前最常見的一種做法,外露設(shè)置名稱和默認設(shè)置項,將全部設(shè)置內(nèi)容放在下一層。
節(jié)約垂直空間,不干擾當(dāng)前界面其他內(nèi)容??梢院芎眉嫒輪芜x、多選等多種情況。作為一個完整的界面,可以容納的內(nèi)容比較多。
但增加一個層級,就意味著有進入和返回兩步操作。尤其是返回大多在界面左上角,隨著手機屏幕越來越大,采用這種方式又沒有手勢右滑返回還是挺難用的。
我一直覺得,將層級設(shè)計用的風(fēng)生水起的就是微信?;旧弦患壍乃膫€tab都是層級的世界。
Google日歷
選擇項作為臨時彈窗出現(xiàn)在界面中,單選的話,點一下彈框自動消失,多選的話點擊完成消失。
彈窗是一個在移動端上容易受鄙視的交互,但實際使用下來,google把它做得挺美挺實用的。 當(dāng)只有較少如個位數(shù)的設(shè)置項時,實際操作體驗比層級式的好很多,會很同意“一個彈框能搞定的事實在不需要再新起一個層級”。但這個交互目前看很少人采用,Android的設(shè)計語言規(guī)范比起iOS還是弱勢了許多。
但當(dāng)內(nèi)容一旦多起來,這個小彈框就會有點不堪重負,還會出現(xiàn)彈窗上需要再彈窗的尷尬局面。
Google日歷疊疊樂
就是類似PC的下拉菜單,這樣少見的設(shè)計,被發(fā)現(xiàn)于剛剛說google那個彈框上又有彈框的情況下。但再一次實際使用效果沒想象中差,如果忽略它疊疊樂的感覺,和在移動端點擊菜單的彈出菜單差不多。
但總的來說,還是一個奇怪的操作。
這個設(shè)計叫滾筒
選項在當(dāng)前層級界面展現(xiàn),把其他內(nèi)容往下擠,完成選擇后自動收起。
也是一個避免了進入新層級的交互。iOS里的時間選擇器經(jīng)常會用這種方法出現(xiàn)。
壞處是對當(dāng)前界面影響較大,進出場界面大幅變動。同時嵌入式給人不穩(wěn)定不安全的感覺,好像一不小心碰了別處這些選項就消失了。尤其是選項較多還需要上下滑動的情況。我覺得這種方式使用于選擇項很少,且當(dāng)前層級內(nèi)容本身也簡潔的情況。
好處當(dāng)然是所需操作最少,只需要勾選一個操作,壞處也很明顯,太占地兒。一般情況下很少見,除非本身這些選項就是核心內(nèi)容的情況,比如調(diào)研問卷。最常見于選擇性別時的男女選項。
沒有截圖
文/初三_RR(簡書作者)原文鏈接:http://www.jianshu.com/p/50438669330b#
以上是原作者在實際案例中碰到的移動端下拉菜單交互方式,歡迎大家在文章、woshiue微信、@imaue微博中討論~
在微信Aioued或者WoShiUE的聊天界面回復(fù)數(shù)字9可以獲得可以用的axure8.0 激活碼一枚。
1. 層級設(shè)計,以iOS為代表
2. 彈窗設(shè)計,以Android為代表
3. 下拉菜單
4. 嵌入式自動伸縮(這個名字不好起)
5. 選擇內(nèi)容平鋪出來
藍藍設(shè)計( www.teruid.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.teruid.com