精致的側(cè)滑菜單設(shè)計(jì)案例

1 評(píng)論 4641 瀏覽 7 收藏 8 分鐘

側(cè)滑菜單已經(jīng)成為app一個(gè)極常用的設(shè)計(jì),不管是事務(wù)類(lèi),效率類(lèi)還是生活類(lèi)app。側(cè)滑菜單因Path 2.0和Facebook為開(kāi)發(fā)者熟知,本文搜集了一些時(shí)髦的,精致的側(cè)滑菜單設(shè)計(jì)案例。

優(yōu)雅的純色背景,逼真的翻頁(yè)動(dòng)畫(huà)效果。

微妙的陰影和漸變?cè)黾恿艘曈X(jué)立體感。

暗色側(cè)滑菜單和柔和的單色背景圖文并茂地展示了視頻圖像。

開(kāi)放的,明快的現(xiàn)代的設(shè)計(jì),充滿活力的完美像素圖標(biāo)。

清晰易讀的深色背景,醒目的藍(lán)色和黃色字體。且?guī)в幸欢▌?dòng)畫(huà)效果。

網(wǎng)格布局,對(duì)比鮮明的用色,加重視覺(jué)沖擊力的白色常規(guī)字體。

黑色界面中注入了一抹鮮艷的亮綠,并且屏幕上方添加了極具光澤感的組件,打破了黑色本身的沉悶。

比較經(jīng)典的布局模式,極具現(xiàn)實(shí)感的圖標(biāo)和粗字體。選中項(xiàng)目的字體顏色變?yōu)辄S色,與黑色背景形成對(duì)比。側(cè)滑菜單的頂部和按鈕使用了同樣的黃色以形成鮮明的對(duì)比。

帶有折疊效果的側(cè)滑菜單,設(shè)計(jì)師很好地平衡了黑白元素組合,加入的綠色為應(yīng)用增添了活力,整體看起來(lái)極為干凈整齊。

由于在UI上展示了相關(guān)數(shù)據(jù),因此用設(shè)計(jì)突出了數(shù)據(jù)的清晰和整齊。

半透明的背景,時(shí)尚的綠松石色,超窄字體以及輪廓圓滑的圖標(biāo)。

用側(cè)滑菜單展示了一個(gè)3D的導(dǎo)航面板。

大體感覺(jué)整齊而銳利,色彩搭配和諧,用扁平化展現(xiàn)了休閑的風(fēng)格。

界面用軟棕色傳遞了溫馨的氛圍,用紅色按鈕和黃色通知強(qiáng)調(diào)了視差,側(cè)滑菜單運(yùn)用了亮麗的黃色和白色以打破單一的色調(diào)。

同樣是簡(jiǎn)約化的設(shè)計(jì)方案,輪廓清晰明亮的圖標(biāo)和平滑的字體,以黑的的背景作為依襯。

這是一款園藝應(yīng)用,一個(gè)小小的但很直觀的側(cè)邊欄菜單中存放著普通的圖標(biāo)。微妙的陰影使得界面稍微凸出,更有表現(xiàn)力。

語(yǔ)言翻譯類(lèi)app,強(qiáng)烈依賴(lài)側(cè)邊菜單中的圖標(biāo)。

黑色和白色對(duì)比外,設(shè)計(jì)師在側(cè)邊欄處使用了粉紫色。整體非常整齊,沒(méi)有雜亂的視覺(jué)元素。

紋理效果,色澤明亮的橙色和精致的圖標(biāo)。

同樣帶有折疊效果的設(shè)計(jì),側(cè)邊菜單展示物品圖標(biāo)和相關(guān)文字,左邊一屏的菜單項(xiàng)列表成為輔助的搜索欄。

一款簡(jiǎn)約時(shí)尚的設(shè)計(jì)風(fēng)格。深色背景延展至側(cè)側(cè)滑菜單中,視覺(jué)上更統(tǒng)一。左邊菜單項(xiàng)列表使用了超細(xì)多色字體,一來(lái)避免用戶視覺(jué)上的單調(diào),二來(lái)很好地對(duì)類(lèi)別進(jìn)行了區(qū)分。

清新亮麗的配色風(fēng)格,充滿活力。

應(yīng)用界面細(xì)節(jié)設(shè)計(jì)一絲不茍,漂亮的拼接背景,柔和的色彩,迷人的字體,平滑的圖標(biāo),而側(cè)滑菜單中的紅色區(qū)域給人熱情的視覺(jué)效果。

房地產(chǎn)公司的移動(dòng)app用藍(lán)色營(yíng)造了堅(jiān)定的商業(yè)氛圍,而白色的使用使得了界面的生動(dòng)。

拉窗簾一樣的滑動(dòng)效果。

用細(xì)膩的陰影,淺灰色的精美排版打造了一個(gè)和諧寬敞的視覺(jué)效果。

轉(zhuǎn)自:http://www.uml.org.cn/jmshj/201308022.asp

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 之前看過(guò)這篇文章,現(xiàn)在又看了一遍,還是覺(jué)得不錯(cuò)!

    來(lái)自菲律賓 回復(fù)