表格設(shè)計(jì)(上篇):18種樣式,與你分享

2018-7-25    資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

最近在做一款工具類軟件,主要涉及表格的設(shè)計(jì),邊工作邊整理了一些表格的設(shè)計(jì)樣式和原型圖,拿出來與需要的人分享。歡迎與我交流,有需要原型的小伙伴也歡迎在下方留言。

表格樣式一

表格樣式主要分為兩大類,第一類表格中通常以一行為組,操作均是以組為單位進(jìn)行。此類表格優(yōu)點(diǎn)是簡(jiǎn)單直觀,操作感強(qiáng),可提前設(shè)定好計(jì)算公式;缺點(diǎn)是對(duì)于某一數(shù)據(jù)的批量操作較為復(fù)雜,不方便自定義復(fù)雜計(jì)算。

常用于信息展示,無需復(fù)雜計(jì)算的網(wǎng)頁和C端界面中。

表格樣式一:縫隙

第一類表格以行為一組,表頭通常固定在最上端不參與滑動(dòng),現(xiàn)代設(shè)計(jì)為了美觀通常也沒有單元格的線框,設(shè)計(jì)時(shí)為了更直觀的體現(xiàn)一條數(shù)據(jù),可以在每條數(shù)據(jù)之間留一個(gè)縫隙。

表格樣式一:斑馬線

或者用斑馬線形式更直觀的展示數(shù)據(jù),避免用戶可能看串行的對(duì)不齊數(shù)據(jù)的情況。

表格樣式一:按鈕

為了頁面的簡(jiǎn)潔可以將上端按鈕盡可能減少,整個(gè)表格上端原則上保留批量操作功能按鈕,對(duì)于單行的操作按鈕可以放置在單行中懸浮展示。

表格樣式一:拖拽

因?yàn)閱涡惺且粋€(gè)模塊,當(dāng)有需要調(diào)整順序時(shí)可以支持整行的拖拽操作。

表格樣式一:分頁1

當(dāng)內(nèi)容較多需要除了無限滾動(dòng)外,還可以選用分頁的方式,目前較為常見的可以選擇如下方式。

表格樣式一:分頁2

若不需要突出頁碼,主要查看都在第一頁上時(shí)可以考慮將放在角落里,到達(dá)首頁和到達(dá)尾頁根據(jù)產(chǎn)品需求決定是否使用。

表格樣式一:搜索

搜索功能考慮到用戶需要手動(dòng)輸入,很難保證精準(zhǔn)搜索,原則上所有搜索均為模糊搜索,必要精準(zhǔn)搜索的地方使用篩選功能,給用戶提供篩選選項(xiàng)。通常上端搜索欄不被限定搜索范圍,可以全部搜索。

表格樣式一:分項(xiàng)搜索

對(duì)比必要的分項(xiàng)搜索功能可以對(duì)應(yīng)到各個(gè)列中,同時(shí)輸入時(shí)可以給出聯(lián)想結(jié)果,仍然應(yīng)該設(shè)計(jì)為模糊搜索。

表格樣式一:篩選

對(duì)于各個(gè)列中必須精準(zhǔn)搜索的數(shù)據(jù)可以設(shè)計(jì)為篩選功能,可為用戶提供可勾選的篩選信息。

表格樣式一:高級(jí)篩選

對(duì)于部分列有篩選需求的情況,可以設(shè)計(jì)彈框輸入篩選條件,也可以在此設(shè)計(jì)復(fù)雜篩選條件,篩選規(guī)則在上端展示,可以更直觀的看到已篩選項(xiàng)。

表格樣式一:可編輯單元格提示

表格中存在可編輯單元格和不可編輯單元格時(shí),為了界面的一致性和美觀性,可以考慮鼠標(biāo)懸浮時(shí)給出可編輯單元格的編輯框,區(qū)分兩種不同單元格樣式。

表格樣式一:信息預(yù)覽(浮窗)

對(duì)于匯總表中如有預(yù)覽詳情的需要,同時(shí)對(duì)于數(shù)據(jù)僅為查看沒有修改需要的時(shí)候可以考慮懸浮提示將主要數(shù)據(jù)進(jìn)行展示。

表格樣式一:信息預(yù)覽(彈窗+蒙板)

對(duì)于詳細(xì)有部分屬性修改需求,對(duì)于細(xì)節(jié)沒有修改需求的,可以考慮在一側(cè)彈出彈框進(jìn)行展示和修改屬性。(如報(bào)價(jià)單表格信息,報(bào)價(jià)單審核狀態(tài)的可以在此修改,詳細(xì)信息仍在明細(xì)表中修改)

表格樣式一:信息預(yù)覽(折疊)

折疊模式的使用環(huán)境基本等同于彈出模式,可根據(jù)設(shè)計(jì)風(fēng)格進(jìn)行選擇。

表格樣式一:信息預(yù)覽(彈窗)

單獨(dú)彈出窗口在需要有多項(xiàng)數(shù)據(jù)進(jìn)行對(duì)比查看時(shí)可以選用,彈出窗體操作通常只考慮狀態(tài)改變,不建議其他數(shù)據(jù)在此更改。

表格樣式一:信息預(yù)覽(變導(dǎo)航)

此種展示方式,對(duì)于需要查看和修改較多數(shù)據(jù)的需求可以選中,匯總表將收為類似于導(dǎo)航欄的模式,數(shù)據(jù)可以精簡(jiǎn)只展示關(guān)鍵數(shù)據(jù),彈窗可設(shè)計(jì)復(fù)雜操作,可以包含明細(xì)的修改等功能。

表格樣式一:信息預(yù)覽(變窗體結(jié)構(gòu))

通過減少列表高度流出信息展示空間,建議兩部分在一屏內(nèi)展示可分別滑動(dòng)或翻頁,匯總表信息完整,彈出窗體也可進(jìn)行復(fù)雜操作設(shè)計(jì)。

表格樣式一:信息預(yù)覽(自定義表頭)

自定義表頭設(shè)計(jì)可以將此操作藏在較明顯的位置同時(shí)可以保證界面的簡(jiǎn)潔。

后續(xù)

上篇中主要展示了一些表格樣式一的一些操作習(xí)慣,除此之外還會(huì)在很多專業(yè)工具的設(shè)計(jì)中用到另一種展現(xiàn)形式類似于EXCEL表格。

歡迎各位做過類似項(xiàng)目的產(chǎn)品經(jīng)理與我多多交流,如有需要原型的小伙伴可以在下方留言,我再將下載地址放出。如果大家喜歡這篇文章我會(huì)繼續(xù)完成下篇的內(nèi)容。

藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì)  包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔