這是為騰訊內(nèi)部做的一個(gè)項(xiàng)目，偏向To B類的。設(shè)計(jì)的內(nèi)容不方便展示，就取名“X項(xiàng)目”吧。本文為設(shè)計(jì)的小結(jié)，主要針對大量的數(shù)據(jù)處理，以及表單設(shè)計(jì)這方面。

一、可視化

當(dāng)系統(tǒng)的數(shù)據(jù)過多，數(shù)據(jù)結(jié)構(gòu)繁雜時(shí)，可以將數(shù)據(jù)可視化展示。能讓使用者更好的理解數(shù)據(jù)，有效提高使用者的操作效率。

可視化的設(shè)計(jì)過程，可以分為兩個(gè)步驟：

1. 提取數(shù)據(jù)結(jié)構(gòu)

分析現(xiàn)在的數(shù)據(jù)，并總結(jié)現(xiàn)有數(shù)據(jù)的框架結(jié)構(gòu)，將數(shù)據(jù)分層級(jí)歸類。

比如：在文章中，一級(jí)標(biāo)題下包含二級(jí)標(biāo)題，二級(jí)標(biāo)題下包含三級(jí)標(biāo)題。這里就有3個(gè)元素，三個(gè)層級(jí)關(guān)系。在設(shè)計(jì)中，第一步就是理清楚這些數(shù)據(jù)的層級(jí)結(jié)構(gòu)。

2. 抽象化數(shù)據(jù)

這步需要掌握一些基礎(chǔ)視覺原理，然后把數(shù)據(jù)元素，擺放在合適的層級(jí)位置就行。

這里的基本視覺原理無非就是幾種：

a. 上下左右的視覺瀏覽路線。越靠近視覺起點(diǎn)，層級(jí)越高。

b. 空間位置的物理關(guān)系。越靠近的元素，關(guān)系越密切。

c. 視覺面積的物理關(guān)系。面積越大，層級(jí)越高。

d. 視覺顏色的層級(jí)關(guān)系。顏色越接近，關(guān)系越密切。

（其實(shí)，一篇文章的配圖，就相當(dāng)于一次簡化的可視化設(shè)計(jì)）

二、流程智能化

在流程的設(shè)計(jì)上，并不是一直要追求簡化流程，而應(yīng)該追求流程智能化。

什么意思呢？就是在流程的展示上，我們應(yīng)該考慮如何提高操作效率，而不是一味的追求少步驟。

常見的流程簡化，就是將中間階段的流程，合理的壓縮合并，如上圖所示。

并今天重要講的是另一種情況，當(dāng)流程很復(fù)雜，對操作的前后順序也有一定的限制。

比如：

第一步（必需）

先從A模塊，完成創(chuàng)建“元素1”。

第二步（可選）

從B模塊，找到“元素1”，進(jìn)行“a操作”，完成“元素1”的創(chuàng)建。

我們可以在第一步操作完成后，就進(jìn)行合理的提醒，讓用戶選擇是否進(jìn)行第二步操作。

當(dāng)然這個(gè)操作過程是需要合并簡化的。

總之，就是智能化操作流程，猜想用戶下一步的操作，進(jìn)行合理引導(dǎo)，提高操作效率。

三、減少思考

合理的減少用戶思考，操作的步驟與流程一樣，并不是越少越好，要根據(jù)使用人群／場景來衡量。

在技術(shù)人員的角度思考，可能多個(gè)功能操作都是同一個(gè)操作效果，于是就合并為一個(gè)操作方式。然而在用戶的角度思考，他們的含義是有差別的。

比如：張三被任命為總監(jiān)，李四被革職了，這兩種情況，都屬于人員的變動(dòng)，操作上，都是對人員信息進(jìn)行編輯修改，而含義上差別卻很大。

這時(shí)候，把一個(gè)入口，分割為兩個(gè)子入口更符合“人事管理角色”的理解。

四、提升容錯(cuò)率

一句話：少限制，多提醒。

從設(shè)計(jì)上，最大程度減少誤操作的情況。對一些特殊操作，允許用戶誤操作，但需要給予合理的提醒。而不是為了避免誤操作，都采取限制操作的方式。當(dāng)然，對于誤操作后，會(huì)帶來嚴(yán)重后果的情況，還是需要有所限制的。

為什么呢？

限制如果太多，用戶會(huì)覺得，這個(gè)產(chǎn)品設(shè)計(jì)不好，很多功能都無法用。如果“少限制，多提醒”，用戶可以了解到這個(gè)操作可能帶來的后果，從而去尋找解決辦法，或后續(xù)知道怎么彌補(bǔ)這個(gè)誤操作帶來的后果。

五、加載

這個(gè)就真的是一句話了。

在表格數(shù)據(jù)過多的情況，需要考慮加載數(shù)據(jù)時(shí)的用戶體驗(yàn)。

六、翻頁還是滾動(dòng)條

當(dāng)表格數(shù)據(jù)太多時(shí)，無非就是三種處理方式。

a. 無限往頁面下方延展

會(huì)導(dǎo)致頁面過長，影響視覺效果的展示，而且也會(huì)影響頁腳等信息的瀏覽。優(yōu)先排除。

b. 增加頁碼，分頁展示

用戶操作比較麻煩，需要點(diǎn)擊按鈕翻頁瀏覽信息。

c. 限定高度，內(nèi)置滾動(dòng)條

當(dāng)表格內(nèi)容過多時(shí)，用戶容易迷失在數(shù)據(jù)里，不好定位。

這次設(shè)計(jì)一直糾結(jié)要用翻頁形式，還是要用滾動(dòng)條形式。

最后和團(tuán)隊(duì)討論后，決定采用滾動(dòng)條方式。最大的理由就是……習(xí)慣使用滾動(dòng)條了。

其實(shí)還有兩點(diǎn)其它方面的理由。

1. 滾動(dòng)條操作方便，鼠標(biāo)中鍵滾一滾就行，不需要移動(dòng)鼠標(biāo)，點(diǎn)擊翻頁按鈕。
2. 技術(shù)實(shí)現(xiàn)上，采用滾動(dòng)條可以節(jié)省一小部分的開發(fā)時(shí)間……

作者：mufly

來源：https://www.ui.cn/detail/439761.html

本文由 @mufly 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議