激情六月丁香婷婷|亚洲色图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 瀏覽量：137次

層級深

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

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

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

底部懸浮

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

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

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

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

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

指針懸浮展開

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

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

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

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

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

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

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

拖動

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

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

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

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

后記

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

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

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