三點(diǎn)設(shè)計(jì),助力B端辦公產(chǎn)品提效
在日常工作中,我們可以用很多工具來(lái)提高我們的效率。那么該如何通過(guò)產(chǎn)品設(shè)計(jì)來(lái)提升產(chǎn)品體驗(yàn),提高員工的工作效率?本文以58云效為例,分析其是如何搭建與設(shè)計(jì)的,一起來(lái)看看吧。
在現(xiàn)代辦公環(huán)境中,提高工作效率是每個(gè)人追求的目標(biāo),也是企業(yè)對(duì)每個(gè)員工的期望。為達(dá)到這個(gè)目標(biāo),使用辦公提效產(chǎn)品已經(jīng)成為了一種共識(shí)。
58云效作為一款企業(yè)內(nèi)部的效能研發(fā)平臺(tái),旨在為員工提供專(zhuān)業(yè)的項(xiàng)目流程管理,為企業(yè)賦能,幫助員工提效。
那么面對(duì)這樣一款B端的產(chǎn)品,我們是如何通過(guò)設(shè)計(jì)來(lái)提升產(chǎn)品體驗(yàn),助力員工提效的,請(qǐng)往下看。
一、精簡(jiǎn)層級(jí),提高屏效
鑒于B端產(chǎn)品功能復(fù)雜度較高,學(xué)習(xí)成本較高的特性。對(duì)頁(yè)面進(jìn)行層級(jí)的精簡(jiǎn)和整合,提高屏效,就可以在一定程度上簡(jiǎn)化產(chǎn)品功能的復(fù)雜度和理解成本,進(jìn)而達(dá)到使用提效的結(jié)果。
1. 精簡(jiǎn)層級(jí)
讓我們先來(lái)看一下列表頁(yè)。
可見(jiàn),舊版的分割區(qū)域非常多,導(dǎo)致頁(yè)面層級(jí)較亂,并不利于用戶(hù)理解和操作。
新版我們將頁(yè)面區(qū)域做了大幅度的整合和精簡(jiǎn),形成非常明確的兩個(gè)區(qū)域(導(dǎo)航區(qū)和操作區(qū)),便于用戶(hù)聚焦,從而提升使用效率。
2. 提高屏效
接下來(lái)我們來(lái)看一下詳情頁(yè)。
可見(jiàn),舊版詳情頁(yè)由于是全屏展示,致使一些區(qū)域的空間利用率較低,同時(shí)結(jié)構(gòu)不夠緊湊,相同或相似的維度內(nèi)容沒(méi)有做整合。
新版我們首先優(yōu)化創(chuàng)建的層級(jí)關(guān)系。
將原有的全屏模式調(diào)整為抽屜模式,使用戶(hù)可以快速的瀏覽,并進(jìn)行實(shí)時(shí)的切換。當(dāng)用戶(hù)需要沉浸的操作和填寫(xiě)時(shí),也可以選擇切換到全屏模式。
其次,合并同維度的內(nèi)容,使頁(yè)面內(nèi)容的分割更加清晰和有效,提升用戶(hù)感知從而提升效率。
二、按專(zhuān)注度,區(qū)別設(shè)計(jì)
對(duì)于B端產(chǎn)品的設(shè)計(jì),最常聽(tīng)到的詞語(yǔ)是克制,這仿佛成了設(shè)計(jì)師的“緊箍咒”。即便如此,我們?nèi)匀豢梢愿鶕?jù)用戶(hù)的專(zhuān)注度來(lái)區(qū)分頁(yè)面,進(jìn)行相應(yīng)設(shè)計(jì),在“枷鎖”上“舞蹈”。
1. 分發(fā)頁(yè)面
在分發(fā)頁(yè)面中,用戶(hù)不需要非常專(zhuān)注于某一個(gè)具體的模塊,或者內(nèi)容。而是需要通過(guò)這樣的頁(yè)面去快速的尋找到他想要的內(nèi)容,達(dá)到產(chǎn)品分發(fā)的功能。例如云效的工作臺(tái),和概覽等頁(yè)面。
對(duì)于這樣的頁(yè)面,我們采用了結(jié)構(gòu)模塊化的設(shè)計(jì)(運(yùn)用卡片),更多的運(yùn)用可視化的設(shè)計(jì),用色上也較為大膽豐富。以達(dá)到分發(fā)的效果。
2. 操作頁(yè)面
在操作頁(yè)面中,用戶(hù)的專(zhuān)注度是非常高的。同時(shí)這也是用戶(hù)使用頻率和使用時(shí)長(zhǎng)最高的頁(yè)面,因此沉浸感的營(yíng)造就尤為重要。例如云效的詳情頁(yè)等頁(yè)面。
對(duì)于這樣的頁(yè)面,我們?cè)谠O(shè)計(jì)上就要相對(duì)克制,減少干擾。同時(shí)在結(jié)構(gòu)層級(jí)上下功夫,盡量做到清晰簡(jiǎn)化,并且要突出關(guān)鍵操作節(jié)點(diǎn)。
3. 配置頁(yè)面
在配置頁(yè)面中,用戶(hù)的專(zhuān)注度仍然較高,但使用頻率和使用時(shí)長(zhǎng)不高,這就需要降低用戶(hù)的理解和使用成本。例如云效的需求設(shè)置等頁(yè)面。
對(duì)于這樣的頁(yè)面,我們同樣在設(shè)計(jì)上相對(duì)克制,重點(diǎn)突出關(guān)鍵操作點(diǎn),可以多使用圖表來(lái)承載內(nèi)容。
三、多維度設(shè)計(jì)
在實(shí)際的工作場(chǎng)景中,我們的用戶(hù)是需要從多個(gè)維度去感知和管理工作事項(xiàng)的。
例如工作事項(xiàng)里的層級(jí)關(guān)系,時(shí)間進(jìn)度的把控,工作狀態(tài)的把控和流轉(zhuǎn)等。面對(duì)這些,單一維度的列表呈現(xiàn)方式就完全不能勝任了。我們需要多維度的設(shè)計(jì)展示。
1. 樹(shù)形圖
針對(duì)層級(jí)關(guān)系的問(wèn)題,我們?cè)O(shè)計(jì)了樹(shù)形圖的視圖形式。用來(lái)明確工作事項(xiàng)的層級(jí)關(guān)系。
2. 甘特圖
針對(duì)時(shí)間進(jìn)度展示的問(wèn)題,我們?cè)O(shè)計(jì)了甘特圖的視圖形式。方便用戶(hù)在時(shí)間進(jìn)度的維度來(lái)管理和決策。
3. 看板
針對(duì)流轉(zhuǎn)狀態(tài)的問(wèn)題,我們?cè)O(shè)計(jì)了看板的視圖形式。方便用戶(hù)管理決策,并且通過(guò)簡(jiǎn)單的拖拽變更狀態(tài),進(jìn)一步助力用戶(hù)提效。
四、寫(xiě)在最后
在文章中,我們探討了如何設(shè)計(jì)一款適用于B端用戶(hù)的提效產(chǎn)品。提出了三點(diǎn)設(shè)計(jì)原則和技巧來(lái)助力產(chǎn)品。通過(guò)遵循這些原則和技巧,希望可以幫助大家打造出一個(gè)能夠幫助用戶(hù)提高效率,降低成本的高效產(chǎn)品。
作者:58UXD
來(lái)源公眾號(hào):58UXD(ID:i58UXD),58UXD,全稱(chēng)58同城用戶(hù)體驗(yàn)設(shè)計(jì)中心。
本文由人人都是產(chǎn)品經(jīng)理合作媒體 @58UXD 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash,基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!