后臺(tái)設(shè)計(jì):掌握7個(gè)實(shí)用的方法,告別冗長(zhǎng)的后臺(tái)

36 評(píng)論 57720 瀏覽 625 收藏 7 分鐘

作者結(jié)合自身工作經(jīng)驗(yàn)分享了在后臺(tái)設(shè)計(jì)中幾個(gè)較為實(shí)用的方法,想必能夠給你帶來(lái)些幫助。

由于團(tuán)隊(duì)設(shè)計(jì)氛圍比較濃郁,幾款產(chǎn)品的后臺(tái)設(shè)計(jì)原型,也都經(jīng)由交互設(shè)計(jì)師在用戶體驗(yàn)上進(jìn)行了優(yōu)化。

B端后臺(tái)一般包含客戶使用端和平臺(tái)客服使用端,很多團(tuán)隊(duì)的做法對(duì)于客戶使用端會(huì)考慮用戶體驗(yàn),但對(duì)于平臺(tái)多用簡(jiǎn)單粗暴的模版。考慮到以人為本的設(shè)計(jì),是能考慮到所有用戶的感受,并為其找到最適合的解決辦法,所以對(duì)于平臺(tái)的設(shè)計(jì),一樣需要有好的體驗(yàn)。

接下來(lái)我講到的幾個(gè)方法,在后臺(tái)設(shè)計(jì)中非常的實(shí)用。

1.高級(jí)搜索

當(dāng)搜索條件超過(guò)一定數(shù)量,我們可以將不是首要的的搜索條件隱藏,將頭部寶貴的空間釋放出來(lái)展示列表重要搜索內(nèi)容。高級(jí)搜索和普通搜索的切換就很好的實(shí)現(xiàn)相應(yīng)需求。

2.批量操作列表中多條信息

對(duì)于表單頁(yè)面,原始的excel表單可以做到批量選擇和批量操作。許多后臺(tái)對(duì)于表單的處理往往過(guò)于簡(jiǎn)單,只能基本滿足增刪改查。

后臺(tái)也可以用自定義勾選的方式對(duì)多個(gè)列表內(nèi)容進(jìn)行批量操作,如圖可勾需多個(gè)列表或全選后進(jìn)行批量刪除、作廢、更改負(fù)責(zé)人、發(fā)郵件、發(fā)信息、轉(zhuǎn)移等等…

3.單個(gè)表單抬頭字段篩選

一般的數(shù)字、時(shí)間、字母排序單個(gè)表單都有隱形的排序框,數(shù)字從小到大、時(shí)間從近到遠(yuǎn)或者26個(gè)字母排序。但是對(duì)于其余抬頭篩選就只能做頂部選擇或文字輸入篩選,那樣浪費(fèi)的區(qū)域會(huì)增多。

而如果直接隱藏在抬頭下面作為一項(xiàng)列表內(nèi)容,自定義篩選的靈活度會(huì)大很多,整個(gè)頁(yè)面也會(huì)放出更大的空間展示列表內(nèi)容。

4.表頭、確定表單頁(yè)面和不操作頁(yè)面局部固定/自定義篩選字段

在瀏覽的眾多網(wǎng)站中,由于某一部分內(nèi)容都有高頻的操作或查看,頁(yè)面在設(shè)置的時(shí)候會(huì)有意識(shí)將這部分板塊固定,不隨其它內(nèi)容上下和左右滑動(dòng)。

在后臺(tái)也存在這樣的需求,除了抬頭部分還有特殊字段和對(duì)表單頁(yè)面的保存、取消、審核等高頻操作都可以設(shè)置為固定板塊存在在頁(yè)面中,使頁(yè)面的重點(diǎn)更為突出,內(nèi)容查看更有趣味性。

5.消息隱藏

消息隱藏也是在做一個(gè)電商的項(xiàng)目,學(xué)習(xí)到的一種方法。因?yàn)橄⒎诸愝^多,可操作和不可操作的消息類型疊加,并且消息的重要程度也是層次不齊,以至于消息列表點(diǎn)擊進(jìn)入查看還需要進(jìn)行分類。

但是在首頁(yè),將消息分類的同時(shí),直接鏈接進(jìn)入相應(yīng)待辦和查看頁(yè)面進(jìn)行操作,用更直觀的方式轉(zhuǎn)達(dá)給用戶去查看或操作,也省去頁(yè)面跳轉(zhuǎn)間的頻率和時(shí)間。

6.抬頭標(biāo)題操作切換

看過(guò)線下excel表單的抬頭有幾十個(gè)的情況,A4紙打印都得有好幾頁(yè)才能展示全面,網(wǎng)頁(yè)的寬度最多也只能容納15-20個(gè)抬頭(抬頭文字全部展示完的情況下),怎么解決數(shù)據(jù)量太大,抬頭區(qū)域不夠展示的情況呢?只能做隱藏。

隱藏字段是否展示或者展示優(yōu)先集的權(quán)利都交到用戶手上,給他們一個(gè)最自由化的配置,只選擇自己想要查看的字段,選擇過(guò)多的字段導(dǎo)致文字省略用戶也會(huì)理解而進(jìn)行合理的分配。

7.切換當(dāng)前內(nèi)容的視圖,突出角色主要內(nèi)容

在淘寶移動(dòng)端的商品列表中,我們經(jīng)常根據(jù)自己的喜好來(lái)切換展示方式。是單行顯示單個(gè)商品,還是單行顯示兩個(gè)商品,切換方式能讓用戶更大限度的看到自己想看的商品信息。

后臺(tái)也可以切換視圖使用戶用更習(xí)慣的方式,展示列表內(nèi)容。切換視圖有許多表現(xiàn)方式來(lái)表現(xiàn),如列表、地圖、剖面圖、折線圖、扇型圖…

顧名思義,視圖就是更換另一種表現(xiàn)形式。一定要選取與設(shè)計(jì)的產(chǎn)品相符合的表現(xiàn)形式,才能更加突出這是一種技巧,如果只為了炫酷的效果,而增加多種視圖,沒(méi)有需求人群,那這種轉(zhuǎn)換也是沒(méi)有意義的。

總結(jié)

所有總結(jié)出來(lái)的方法,都是在解決人們遇到的問(wèn)題而迸發(fā)出,有些可能是偽需求或自臆需求。做有效的判斷也是工作日常的必備。所有在積累方法經(jīng)驗(yàn)的同時(shí),也要慎重選擇交互方式,判斷與產(chǎn)品的符合度,是否能做到有效的定制化、是否讓用戶覺(jué)得功能好用且持續(xù)受用,提高用戶效率和提升用戶體驗(yàn)才是正解。

 

本文由 @Lainey 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自PEXELS,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 對(duì)強(qiáng)迫癥友好 對(duì)用戶 開發(fā) 設(shè)計(jì) 交互都不友好

    來(lái)自福建 回復(fù)
    1. 僅提供方法,可根據(jù)實(shí)際場(chǎng)景取用

      來(lái)自浙江 回復(fù)
    2. 僅提供方法,可根據(jù)實(shí)際場(chǎng)景取用

      來(lái)自浙江 回復(fù)
  2. 大佬,我有個(gè)后臺(tái)設(shè)計(jì)小私活,能聊下嗎?

    來(lái)自日本 回復(fù)
    1. 并不是大佬,但有需求可以聊下

      來(lái)自浙江 回復(fù)
    2. 這個(gè)網(wǎng)站沒(méi)有私信功能么,暈菜

      來(lái)自日本 回復(fù)
    3. +we~chat方便么,lgy052772

      來(lái)自日本 回復(fù)
  3. 受教了,看了您的文章,我發(fā)現(xiàn)自己把后臺(tái)弄得太復(fù)雜了。 ?

    來(lái)自福建 回復(fù)
    1. 客氣 ??

      來(lái)自浙江 回復(fù)
  4. 太有用了 我是個(gè)設(shè)計(jì)這一陣子要做交互的事情 剛好在做后臺(tái) 那些很長(zhǎng)復(fù)雜的表單 看了您的文章 受益匪淺啊

    來(lái)自上海 回復(fù)
    1. 后臺(tái)設(shè)計(jì)設(shè)計(jì)完善后,是可以復(fù)用的。提升開發(fā)效率

      來(lái)自浙江 回復(fù)
  5. 感覺(jué)操作效率上高了很多,我目前還是前端,準(zhǔn)備入坑中,學(xué)習(xí)了

    來(lái)自廣東 回復(fù)
    1. 前端小哥能在開發(fā)前考慮這些 就完美了。

      來(lái)自浙江 回復(fù)
  6. 挺實(shí)用的,我現(xiàn)在既是在干產(chǎn)品經(jīng)理的活兒又是在做交互設(shè)計(jì),一直都在苦惱怎樣將設(shè)計(jì)好的功能界面變成操作良好的交互界面

    來(lái)自四川 回復(fù)
  7. 看了這個(gè),反正自己以前設(shè)計(jì)的需要改進(jìn)的空間還很大,受教了

    來(lái)自福建 回復(fù)
    1. 敏感留意些細(xì)節(jié),互相請(qǐng)教啦

      來(lái)自浙江 回復(fù)
  8. 問(wèn)下,字段這么多,頁(yè)面打開時(shí)一次性加載所有數(shù)據(jù)?還是只加載默認(rèn)顯示字段的數(shù)據(jù)?例如,列表有20個(gè)字段,默認(rèn)顯示10個(gè)字段,10個(gè)隱藏,那也沒(méi)加載時(shí),加載20個(gè),還是10個(gè)?有哪些辦法能優(yōu)化數(shù)據(jù)加載和導(dǎo)出很慢的通???

    來(lái)自浙江 回復(fù)
    1. 先加載默認(rèn)的10個(gè)字段,因?yàn)橛脩粼谶x定字段后不會(huì)頻繁更改,所以另外的數(shù)據(jù)后緩存影響不大。優(yōu)化數(shù)據(jù)加載是程序調(diào)整數(shù)據(jù)庫(kù)來(lái)實(shí)現(xiàn)的,但讓用戶對(duì)數(shù)據(jù)加載過(guò)慢感受的調(diào)整,就需要設(shè)計(jì)加載響應(yīng)式的反饋了。

      來(lái)自浙江 回復(fù)
    2. x售易

      回復(fù)
    3. 多謝

      來(lái)自浙江 回復(fù)
  9. 厲害,有些是工作中已有的,但是沒(méi)有總結(jié),這才是真正的干貨

    來(lái)自四川 回復(fù)
    1. 用上就是硬道理。

      來(lái)自浙江 回復(fù)
    2. 厲害了

      來(lái)自北京 回復(fù)
  10. 牛,開闊視野了,發(fā)現(xiàn)我設(shè)計(jì)的太low了

    來(lái)自北京 回復(fù)
    1. 都有參考的,打開思維方式比較重要

      來(lái)自浙江 回復(fù)
  11. XX銷客?

    來(lái)自廣東 回復(fù)
    1. 一部分是,在體驗(yàn)版中有借鑒到

      來(lái)自浙江 回復(fù)
    2. 什么產(chǎn)品,想去看看

      來(lái)自日本 回復(fù)
  12. 學(xué)習(xí)了!不過(guò)貴司后臺(tái)數(shù)據(jù)量不大吧?

    來(lái)自廣東 回復(fù)
    1. 互相學(xué)習(xí)

      來(lái)自浙江 回復(fù)
  13. 挺好的,目前處理簡(jiǎn)單粗暴的低級(jí)階段

    來(lái)自北京 回復(fù)
    1. 可以在設(shè)計(jì)的時(shí)候有意識(shí)的使用一下~

      來(lái)自浙江 回復(fù)
  14. 想了解一下,這個(gè)后臺(tái)所用的頁(yè)面模型,是你們自己開發(fā)的還是第三方的哪個(gè)框架?表示程序員想知道~

    來(lái)自上海 回復(fù)
    1. 程序員表示:UI組件可以實(shí)現(xiàn)

      來(lái)自浙江 回復(fù)
  15. 1、2、3點(diǎn)經(jīng)常用,其他的就很少用到過(guò)或者從未用過(guò)。

    來(lái)自上海 回復(fù)
    1. 根據(jù)實(shí)際的業(yè)務(wù)需求來(lái)使用,事例都是提供交互思路。

      來(lái)自浙江 回復(fù)