從事B端產(chǎn)品交互設(shè)計工作的半年時間里，筆者有幸接觸了面向開發(fā)和運(yùn)維人員的B端業(yè)務(wù)類列表交互設(shè)計工作。為了方便后續(xù)在B端產(chǎn)品設(shè)計過程中可以更加高效且高質(zhì)量的進(jìn)行列表的交互設(shè)計，小編結(jié)合自己在實際工作中遇到的列表類型總結(jié)了web列表設(shè)計的常用基礎(chǔ)列表模式，以供大家參考。
(一)基礎(chǔ)型列表
場景：web列表中基礎(chǔ)的表格樣式，用于業(yè)務(wù)相關(guān)的各項數(shù)據(jù)的平鋪展示，通常操作按鈕置于表格最右側(cè)。橫向基礎(chǔ)表格的縱列數(shù)據(jù)項不宜過多，過多時頁面大量的數(shù)據(jù)項容易造成用戶的視覺疲勞，并且會出現(xiàn)橫向滾動條從而降低用戶操作的易用性。
(二)網(wǎng)格型列表
場景：網(wǎng)格列表的信息承載內(nèi)容更多，單一網(wǎng)格內(nèi)可展示多行信息。數(shù)據(jù)項之間的邊界清晰，方便對網(wǎng)格內(nèi)的數(shù)據(jù)進(jìn)行對比，適用于需要展示業(yè)務(wù)數(shù)據(jù)量的需求場景。操作按鈕根據(jù)業(yè)務(wù)需求和用戶需求可置于列表右側(cè)或單個網(wǎng)格內(nèi)。
(三)主從型列表
場景：B端產(chǎn)品業(yè)務(wù)場景具備多樣化的特點，實際工作中我們常常會遇到列表中非單一item展示的需求，item之間除常見的并列關(guān)系，還存在從屬關(guān)系、遞進(jìn)關(guān)系等。對于主從或遞進(jìn)關(guān)系的列表，筆者建議主從item總數(shù)≤3，且不適宜對每個主item進(jìn)行默認(rèn)展開的場景，因為B端產(chǎn)品的業(yè)務(wù)數(shù)據(jù)量通常較大，默認(rèn)展開多個主item對服務(wù)器的性能損耗較大。建議每次展開一條主item，其他主item呈收起狀態(tài)。
當(dāng)主item下的從屬表的行數(shù)較多時，可采取分步加載的方式，例如默認(rèn)展示10條數(shù)據(jù)，點擊查看更多時可以繼續(xù)請求后端數(shù)據(jù)進(jìn)行展示。綜上，對于主從列表的展示形式，設(shè)計師可根據(jù)實際的用戶需求和開發(fā)實現(xiàn)的便捷性和性能損耗的最低性方面出發(fā)進(jìn)行從優(yōu)考慮。
(四)綜合型列表
場景：綜合型列表適用于業(yè)務(wù)數(shù)據(jù)展示復(fù)雜的場景。列表數(shù)據(jù)之間既包含并列關(guān)系，又包含從屬關(guān)系等。
綜合型列表上常常伴隨用戶復(fù)雜的操作，如上圖所示，既包含對不同環(huán)境下key的查看、下載、修改以及更多的操作，又包含對整條key的移動、刪除操作?；诰C合型表格可方便地對業(yè)務(wù)數(shù)據(jù)進(jìn)行組合、分解和重新布局排列。
列表設(shè)計思路總結(jié)：

通過對工作過程中遇到的列表設(shè)計的總結(jié)，小編發(fā)現(xiàn)列表設(shè)計均可以依據(jù)縱橫相間的網(wǎng)格列表為基礎(chǔ)進(jìn)行擴(kuò)展。以網(wǎng)格列表為基礎(chǔ)，對不同的單元格進(jìn)行重組和拆解可衍生出多種不同類型的列表，如下圖所示。然后，以衍生列表為基礎(chǔ)，設(shè)計師可進(jìn)一步采取微交互的設(shè)計方式來表現(xiàn)不同數(shù)據(jù)之間的矩陣、從屬、遞進(jìn)、并列等關(guān)系。

我們注重客戶提出的每個要求，我們充分考慮每一個細(xì)節(jié)，我們積極的做好網(wǎng)站制作、成都做網(wǎng)站服務(wù)，我們努力開拓更好的視野，通過不懈的努力，創(chuàng)新互聯(lián)建站贏得了業(yè)內(nèi)的良好聲譽(yù)，這一切，也不斷的激勵著我們更好的服務(wù)客戶。 主要業(yè)務(wù)：網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計,小程序制作,網(wǎng)站開發(fā),技術(shù)開發(fā)實力，DIV+CSS，PHP及ASP，ASP.Net，SQL數(shù)據(jù)庫的技術(shù)開發(fā)工程師。

以上內(nèi)容由成都網(wǎng)站建設(shè)，成都網(wǎng)站設(shè)計，成都網(wǎng)站建設(shè)公司，成都網(wǎng)站制作，成都網(wǎng)頁設(shè)計，成都網(wǎng)頁制作，成都營銷型網(wǎng)站建設(shè)，（/）整理編輯。

當(dāng)前標(biāo)題：B端產(chǎn)品常用web列表設(shè)計模式總結(jié)
轉(zhuǎn)載來源：http://sd-ha.com/article48/eegghp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、服務(wù)器托管、網(wǎng)站設(shè)計、網(wǎng)站維護(hù)、網(wǎng)頁設(shè)計公司、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)