激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

幾條 UI 的實(shí)用主義設(shè)計(jì)建議

發(fā)布時(shí)間：2024-03-03 15:07:54 瀏覽量：135次

層級(jí)深

上面這個(gè)圖是比較常用的一種設(shè)計(jì)，頁(yè)面和模塊做了不同的背景色來(lái)區(qū)分，并且都有內(nèi)邊距。這樣做可以讓頁(yè)面更有層次感，讓用戶對(duì)頁(yè)面的組件有邊界感，顯得更整潔。

但是這樣的設(shè)計(jì)帶到移動(dòng)端可能就不太好了，當(dāng)在手機(jī)端上顯示的時(shí)候，因?yàn)橥饷嬗袃蓪樱加昧溯^大的空間，留給中間紅框部分用于顯示文字的空間就比較局促了。如果模塊內(nèi)部再套一個(gè)（比如回復(fù)列表之類的），空間就更局促了。

如果是響應(yīng)式架構(gòu)，不得不做這種設(shè)計(jì)，我也建議可以嘗試通過(guò)樣式，讓組件在屏幕較小時(shí)頂?shù)竭?，不留左右的灰邊?/span>

底部懸浮

很多手機(jī)網(wǎng)站都喜歡在底部懸浮操作按鈕，這樣做有很多缺點(diǎn)。首先是太影響閱讀了，尤其是飄在底部上面一段距離的。

?像上圖這種，“APP 內(nèi)打開(kāi)”這個(gè)按鈕，干擾真的是太大了，大有強(qiáng)迫你下載 app 的意思。

手機(jī)的瀏覽器一般都會(huì)有底部菜單，如果再懸浮一個(gè)底部菜單，再疊加一個(gè)去 app 的按鈕，屏幕沒(méi)多少空間了。

?這要在以前，手機(jī)的下巴都比較高，還有手機(jī)本身就雙下巴的，要堆疊好幾層。

底部懸浮在移動(dòng)端還有個(gè)問(wèn)題就是容易和輸入法沖突，被頂起后位置不對(duì)，其是 ios 上。所以，很多 app 和手機(jī)站點(diǎn)，點(diǎn)擊搜索都是新開(kāi)個(gè)頁(yè)面，輸入框在頂部，搜索頁(yè)不出現(xiàn)底部菜單。

指針懸浮展開(kāi)

?像上圖這種指針懸浮展開(kāi)內(nèi)容的設(shè)計(jì)在 pc 上很流行，一般都是分類會(huì)用到這個(gè)，很多下拉菜單也是這種設(shè)計(jì)。

我個(gè)人不是很推薦，認(rèn)為還是點(diǎn)擊展開(kāi)比較好，因?yàn)閼腋?huì)能會(huì)誤操作，點(diǎn)擊則是比較明確的。Bootstrap 的下拉框是點(diǎn)擊才可以展開(kāi)的，其它的響應(yīng)式框架都是這種設(shè)計(jì)，因?yàn)檫@個(gè)懸浮手機(jī)和平板上很難去使用，兼容性差。我記得很早以前還改過(guò) Bootstrap ，將下拉框改成懸浮就展開(kāi)，迫于業(yè)務(wù)需要不得不這么做。

不規(guī)則設(shè)計(jì)

最頭疼的就是這種了，各種不規(guī)則，花哨又不實(shí)用，也不一定美觀，但是開(kāi)發(fā)成本高，就是折騰。

?比如像上面這種挖槽的，常見(jiàn)的還有一些不規(guī)則形式的導(dǎo)航（六邊形之類的）。還有各種不對(duì)齊的，比如頁(yè)面不同的區(qū)域內(nèi)邊距不一樣，還有些個(gè)例左右邊距不一樣的，分隔線和文字不對(duì)齊要出來(lái)一點(diǎn)點(diǎn)等等。對(duì)于開(kāi)發(fā)人員來(lái)說(shuō)還真有點(diǎn)搞心態(tài)，有時(shí)候就一點(diǎn)點(diǎn)差異，可能還要再套一層，單獨(dú)處理。

對(duì)于設(shè)計(jì)師來(lái)說(shuō)，個(gè)性一點(diǎn)也許能可以更好的展現(xiàn)自己，讓 boss 眼前一亮，但是開(kāi)發(fā)人員就眼前一黑了。個(gè)性太多意味著組件難以復(fù)用，已有的組件不能利用，總是單獨(dú)寫一套，開(kāi)發(fā)成本高。太個(gè)性還有可能會(huì)影響性能，因?yàn)闀?huì)增加程序的體積，如果總是復(fù)用已有組件體積就會(huì)小很多，對(duì)于前端來(lái)說(shuō)構(gòu)架上要考慮異步加載，像小程序這種限制包體積的，可能要分包，總之麻煩。

從實(shí)用的角度出發(fā)，減少個(gè)性會(huì)更好，像邊距什么的，差一點(diǎn)點(diǎn)用戶是看不出來(lái)的，統(tǒng)一不好么？不規(guī)則形狀我覺(jué)得意義倒也不大，提升有限，有時(shí)候是為了設(shè)計(jì)而設(shè)計(jì)，比如上面這個(gè)挖槽的，我也做過(guò)類似的開(kāi)發(fā)（比這個(gè)還要復(fù)雜些），不僅沒(méi)啥用，反而感覺(jué)更丑了。

拖動(dòng)

UI 拖動(dòng)效果是耗費(fèi)我精力比較多的，我個(gè)人是比較反對(duì)盲目加拖動(dòng)的。有些產(chǎn)品可能就喜歡這里能拖那里能拽的，沒(méi)事就加拖動(dòng)操作，但是很多時(shí)候點(diǎn)擊操作更有效率。

?比如像這個(gè)頁(yè)面編輯器，新增加組件如果必須得拖動(dòng)到頁(yè)面的合適位置就太麻煩了，點(diǎn)擊就添加肯定更效率。我之前做過(guò)類似的業(yè)務(wù)，和產(chǎn)品討論了下，最后的結(jié)果是全都要，要能拖也要能直接點(diǎn)擊。

拖動(dòng)常常會(huì)造成沖突，像選擇文字和點(diǎn)擊與拖動(dòng)的操作都是鼠標(biāo)按下鼠標(biāo)再抬起，有時(shí)候一個(gè)區(qū)域即需要拖動(dòng)又需要能選擇文字就比較麻煩。這個(gè)問(wèn)題我還真碰到過(guò)，使用了拖動(dòng)插件，但是拖動(dòng)組件里面又套了輸入框，用戶想選擇輸入框中的文字就會(huì)成為拖動(dòng)。最麻煩的還有輪播組件，要能支持手機(jī)和pc上拖動(dòng)翻看，還要能點(diǎn)擊觸發(fā)鏈接，這個(gè)需要花不少功夫去微調(diào)，合理的判定用戶的行為。如果要求不是很高的話，使用別人做好的開(kāi)源插件會(huì)比較好。

?為了減少?zèng)_突，我們還可以專門給個(gè)拖動(dòng)的圖標(biāo)或按鈕，只有這個(gè)指定區(qū)域才可以觸發(fā)拖拽，這樣能避免不少麻煩。

后記

我是一個(gè)實(shí)用主義者，不喜歡在 ui 上搞太多創(chuàng)新，以最低的代價(jià)達(dá)到目的是我的追求，也很少有產(chǎn)品是靠卷 UI 成功的

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定