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

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

【UI設(shè)計】這B端頁面功能堆疊，我還是想盡辦法搞出了極簡設(shè)計

發(fā)布時間：2024-03-22 10:59:20 瀏覽量：214次

雖說B端實用優(yōu)先，但我發(fā)現(xiàn)國內(nèi)很多B端產(chǎn)品看起來都比國外知名產(chǎn)品復(fù)雜很多。

這個從知名設(shè)計系統(tǒng)的對比就可以看出差異：國外B端大廠設(shè)計系統(tǒng)，比國內(nèi)更強嗎？

其實我認(rèn)為，有些所謂“極簡”風(fēng)格，只是停留在靜態(tài)UI上，并沒有和具體場景動態(tài)結(jié)合。

這樣導(dǎo)致即便方案畫得再好，落地后效果也一般。問就是：“功能太多沒辦法”。

以這個表單彈窗為例，你覺得怎么樣？

看著也就是一般的B端常見頁面，跟極簡是搭不上邊的。

那這個方案呢：

是不是感覺更簡潔更細(xì)致一些了？

不但功能沒少，反而增加了——新方案可以在列表中間創(chuàng)建任務(wù)。

接下來就以此為案例，給大家捋一捋，功能太多的情況下如何做極簡設(shè)計。

目錄：

去除無效信息

輕重分明

? 減少視覺干擾

善用懸停態(tài)

操作暗示


去除無效信息

盡量刪減UI上展示的元素，不但能讓視覺上更加簡潔，而且還可以減輕用戶的閱讀負(fù)擔(dān)。

像是下面這兩個輸入框，“請輸入”占位符重復(fù)出現(xiàn)就感覺不太有必要：

去掉之后簡潔一些，也不影響使用：

信息重復(fù)更是要盡量避免，例如下面這個日期輸入框，你數(shù)數(shù)有多少個重復(fù)元素？

日期重復(fù)了2次、請選擇重復(fù)了2次、圖標(biāo)重復(fù)了兩次，最重要的是，操作也要重復(fù)2次。

將兩個輸入框合并后，重復(fù)元素就少多了，而且可以通過一個彈窗將時間段選好。

還有一個小細(xì)節(jié)，你有沒有發(fā)現(xiàn)右上角的“叉”和“取消”按鈕在功效上其實差不多？

想進一步減少元素的話，去掉取消按鈕也是一種方法。


輕重分明

看看下面這兩張卡片：

第二張看起來更簡潔，是因為重點更分明，而這個原理也可以用到UI設(shè)計上。

你看下面這個焦點態(tài)的輸入框，比默認(rèn)態(tài)加了一個高亮描邊，能起到強調(diào)作用：

那如果把邊框再加粗一圈呢？看起來是不是更加輕重分明了？

復(fù)選框也可以用類似的原理改善：

雖然右側(cè)用了高亮色，但去除顏色后，會發(fā)現(xiàn)左側(cè)這個框也挺重的：

將未勾選狀態(tài)的灰色減弱后，二者對比更清晰了：


? 減少視覺干擾

看看這幾張圓點圖：

你是不是感覺第一張是最簡潔的，最后一張最復(fù)雜？

同樣的圖形，實心是視覺干擾最少的，虛線是視覺干擾最多的。所以UI設(shè)計中，如果想要保持高度簡潔，就要少用虛線。

下面這個圖標(biāo)的虛線框，就有點搶奪視線了。雖然不嚴(yán)重，但實在是沒必要。

改成實心背景后，視覺上就簡潔多了：

還有就是別給所有的操作圖標(biāo)刷上高亮色，這反而搶了重要信息的風(fēng)頭：

除非是整個頁面來看都很重要的操作，否則最好是都被高亮，頂多加一個懸停高亮色就好了。

說到懸停，接下來就單獨講下這塊。


善用懸停態(tài)

有些功能必須有，但大部分時間都用不到，那么就可以默認(rèn)隱藏，懸停態(tài)展示。

例如下圖，標(biāo)題旁邊的 info 圖標(biāo)可能用戶看一次就夠了；列表右側(cè)的圖標(biāo)實際上使用率也很低；備注的字?jǐn)?shù)限制大部分情況下都不需要關(guān)心。

利用懸停態(tài)隱藏這些沒必要的信息后，看起來簡潔多了：


操作暗示

列表操作即便懸停時才展示，看起來還是很復(fù)雜。

關(guān)鍵是，這些圖標(biāo)有些還不是那么好理解的，不但費眼睛還費腦子，甚至都未必好用。

仔細(xì)想想，這些操作其實完全可以通過其它形式展示，沒必要清一色的圖標(biāo)。

  • 編輯：可以直接將一整列當(dāng)成輸入框來用，鼠標(biāo)點一下直接改。
  • 排序：可以直接拖動排序。
  • 刪除：這個倒是得用圖標(biāo)，但只留一個圖標(biāo)時，“叉”比“垃圾桶”看起來更舒服。

于是，改成這樣了：

到這里，我突然還想到還可以加一個功能——直接在列表之間做添加，減少不必要的排序操作：

現(xiàn)在看看原型效果，感覺如何：


最后再來對比一下

這是修改前：

這是修改后：

不得不說，雖然后面那個方案細(xì)節(jié)上好很多，但是開發(fā)成本也是大了很多呀！

尤其是那個列表，如果偶爾才用到一次的話，這么弄就不劃算了，頂多做成懸停展示操作圖標(biāo)就夠了。

對了，這個案例我是用 Figma 做的原型，想要源文件的同學(xué)，可以右下角點一個在看，后臺回復(fù)「figma原型」免費領(lǐng)取。

查看原型的方式：選擇界面后，點擊Figma右上角的三角形播放圖標(biāo)即可（Share按鈕旁）。

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

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