起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識騰訊X項目的小結(jié)
這是為騰訊內(nèi)部做的一個項目，偏向To B類的。設(shè)計的內(nèi)容不方便展示，就取名“X項目”吧。本文為設(shè)計的小結(jié)，主要針對大量的數(shù)據(jù)處理，以及表單設(shè)計這方面。
一、可視化
當系統(tǒng)的數(shù)據(jù)過多，數(shù)據(jù)結(jié)構(gòu)繁雜時，可以將數(shù)據(jù)可視化展示。能讓使用者更好的理解數(shù)據(jù)，有效提高使用者的操作效率。
可視化的設(shè)計過程，可以分為兩個步驟：
1. 提取數(shù)據(jù)結(jié)構(gòu)
分析現(xiàn)在的數(shù)據(jù)，并總結(jié)現(xiàn)有數(shù)據(jù)的框架結(jié)構(gòu)，將數(shù)據(jù)分層級歸類。
比如：在文章中，一級標題下包含二級標題，二級標題下包含三級標題。這里就有3個元素，三個層級關(guān)系。在設(shè)計中，第一步就是理清楚這些數(shù)據(jù)的層級結(jié)構(gòu)。
2. 抽象化數(shù)據(jù)
這步需要掌握一些基礎(chǔ)視覺原理，然后把數(shù)據(jù)元素，擺放在合適的層級位置就行。
這里的基本視覺原理無非就是幾種：
a. 上下左右的視覺瀏覽路線。越靠近視覺起點，層級越高。
b. 空間位置的物理關(guān)系。越靠近的元素，關(guān)系越密切。
c. 視覺面積的物理關(guān)系。面積越大，層級越高。
d. 視覺顏色的層級關(guān)系。顏色越接近，關(guān)系越密切。
（其實，一篇文章的配圖，就相當于一次簡化的可視化設(shè)計）
二、流程智能化
在流程的設(shè)計上，并不是一直要追求簡化流程，而應該追求流程智能化。
什么意思呢？就是在流程的展示上，我們應該考慮如何提高操作效率，而不是一味的追求少步驟。
常見的流程簡化，就是將中間階段的流程，合理的壓縮合并，如上圖所示。
并今天重要講的是另一種情況，當流程很復雜，對操作的前后順序也有一定的限制。
比如：
第一步（必需）
先從A模塊，完成創(chuàng)建“元素1”。
第二步（可選）
從B模塊，找到“元素1”，進行“a操作”，完成“元素1”的創(chuàng)建。
我們可以在第一步操作完成后，就進行合理的提醒，讓用戶選擇是否進行第二步操作。
當然這個操作過程是需要合并簡化的。
總之，就是智能化操作流程，猜想用戶下一步的操作，進行合理引導，提高操作效率。
三、減少思考
合理的減少用戶思考，操作的步驟與流程一樣，并不是越少越好，要根據(jù)使用人群／場景來衡量。
在技術(shù)人員的角度思考，可能多個功能操作都是同一個操作效果，于是就合并為一個操作方式。然而在用戶的角度思考，他們的含義是有差別的。
比如：張三被任命為總監(jiān)，李四被革職了，這兩種情況，都屬于人員的變動，操作上，都是對人員信息進行編輯修改，而含義上差別卻很大。
這時候，把一個入口，分割為兩個子入口更符合“人事管理角色”的理解。
四、提升容錯率
一句話：少限制，多提醒。
從設(shè)計上，最大程度減少誤操作的情況。對一些特殊操作，允許用戶誤操作，但需要給予合理的提醒。而不是為了避免誤操作，都采取限制操作的方式。當然，對于誤操作后，會帶來嚴重后果的情況，還是需要有所限制的。
為什么呢？
限制如果太多，用戶會覺得，這個產(chǎn)品設(shè)計不好，很多功能都無法用。如果“少限制，多提醒”，用戶可以了解到這個操作可能帶來的后果，從而去尋找解決辦法，或后續(xù)知道怎么彌補這個誤操作帶來的后果。
五、加載
這個就真的是一句話了。
在表格數(shù)據(jù)過多的情況，需要考慮加載數(shù)據(jù)時的用戶體驗。
六、翻頁還是滾動條
當表格數(shù)據(jù)太多時，無非就是三種處理方式。
a. 無限往頁面下方延展
會導致頁面過長，影響視覺效果的展示，而且也會影響頁腳等信息的瀏覽。優(yōu)先排除。
b. 增加頁碼，分頁展示
用戶操作比較麻煩，需要點擊按鈕翻頁瀏覽信息。
c. 限定高度，內(nèi)置滾動條
當表格內(nèi)容過多時，用戶容易迷失在數(shù)據(jù)里，不好定位。
這次設(shè)計一直糾結(jié)要用翻頁形式，還是要用滾動條形式。
最后和團隊討論后，決定采用滾動條方式。最大的理由就是……習慣使用滾動條了。
其實還有兩點其它方面的理由。
- 滾動條操作方便，鼠標中鍵滾一滾就行，不需要移動鼠標，點擊翻頁按鈕。
- 技術(shù)實現(xiàn)上，采用滾動條可以節(jié)省一小部分的開發(fā)時間……
作者：mufly
來源：https://www.ui.cn/detail/439761.html
本文由 @mufly 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
- 目前還沒評論，等你發(fā)揮！
