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

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

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

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

層級深

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

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

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

底部懸浮

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

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

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

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

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

指針懸浮展開

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

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

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

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

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

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

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

拖動

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

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

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

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

后記

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

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

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