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

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

表格樣式一

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

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

表格樣式一：縫隙

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

表格樣式一：斑馬線

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

表格樣式一：按鈕

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

表格樣式一：拖拽

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

表格樣式一：分頁1

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

表格樣式一：分頁2

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

表格樣式一：搜索

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

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

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

表格樣式一：篩選

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

表格樣式一：高級篩選

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

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

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

表格樣式一：信息預(yù)覽（浮窗）

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

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

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

表格樣式一：信息預(yù)覽（折疊）

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

表格樣式一：信息預(yù)覽（彈窗）

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

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

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

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

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

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

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

后續(xù)

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

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)。

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

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

表格樣式一

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

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

表格樣式一：縫隙

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

表格樣式一：斑馬線

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

表格樣式一：按鈕

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

表格樣式一：拖拽

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

表格樣式一：分頁1

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

表格樣式一：分頁2

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

表格樣式一：搜索

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

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

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

表格樣式一：篩選

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

表格樣式一：高級篩選

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

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

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

表格樣式一：信息預(yù)覽（浮窗）

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

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

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

表格樣式一：信息預(yù)覽（折疊）

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

表格樣式一：信息預(yù)覽（彈窗）

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

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

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

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

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

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

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

后續(xù)

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

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)。

為了創(chuàng)作出獨(dú)特的東西，你的所有大腦神經(jīng)必須集中在微小的細(xì)節(jié)上。

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

效果

注冊事件 /**
 * 增加滾輪滾動事件（暫時只實(shí)現(xiàn)了chrome的滾動效果）
 * @param modalDomId 遮罩層domId
 * @param domId 需要滾動下層列表domId
 */ addMousewheelListener(modalDomId:string,domId:string){ //添加頁面監(jiān)聽 let modalAwardPanel = document.getElementById(modalDomId);
  modalAwardPanel.addEventListener('mousewheel',function(e){
    let scrollContentDom = document.getElementById(domId); //向上滾 if (e.wheelDelta > 0){ if (scrollContentDom.scrollTop -20 >= 0){
        scrollContentDom.scrollTop = scrollContentDom.scrollTop - 20;
      } else{
        scrollContentDom.scrollTop = 0 ;
      }
    } //向下滾 else{ if(scrollContentDom.scrollTop + scrollContentDom.clientHeight < scrollContentDom.scrollHeight){
        scrollContentDom.scrollTop = scrollContentDom.scrollTop + 20;
      }
    }
  });
}

組件調(diào)用： this.addMousewheelListener("你的最上方遮罩層id","你想要滾動的列表id");

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

作為設(shè)計(jì)師，我們需要很好的控制用戶在使用產(chǎn)品過程中，他們?yōu)g覽的路徑，需要了解我們的眼睛是如何處理信息，本周我會結(jié)合我之前學(xué)習(xí)的一些知識和大家分享下視覺動線這個概念，以及如何在設(shè)計(jì)中進(jìn)行運(yùn)用！學(xué)習(xí)過程紅大家任何不明白地方，歡迎加我微信交流:uiskyss

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)。

提到Axure，這可是絕大多數(shù)PM童鞋靠著吃飯的家伙事兒。Axure被很多人定義為一個以交互見長的原型設(shè)計(jì)工具。很多初入坑甚至入坑甚久的PM為畫出炫酷的原型挖空了心思。我想這對Axure的初衷一定是有誤解。

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

大家都說前端寫頁面較多，幾乎用不到算法。本文愿從彈幕設(shè)計(jì)這個場景來描述算法在前端中的應(yīng)用，我們先來看下實(shí)現(xiàn)效果：

圖1.1 彈幕效果

 

開場之前我們先來描述彈幕開發(fā)的難度，再集中精力描述算法設(shè)計(jì)的思路。

* 如何保證不同字號的彈幕不碰撞
* 彈幕的位置計(jì)算
* 彈幕的速度控制及動畫實(shí)現(xiàn)
* 彈幕與視頻的同步

***如何保證不同字號的彈幕不碰撞***

如果彈幕采用相同的字號，碰撞的問題處理起來比較簡單，只要考慮相鄰彈幕的播放速度和偏移的位置就可以計(jì)算出來。然而使用不同字號的彈幕處理起來就麻煩了許多，彈幕的起始位置不可以線性的增加，比如第一行放了字幕，接下來的字幕可以按順序從上至下依次放置即可。

***彈幕的位置計(jì)算***

只有設(shè)計(jì)好彈幕的初始位置，才可以動態(tài)、的管理不同字號彈幕的碰撞問題。打個比方，我們通過接口獲取了2秒之內(nèi)的彈幕數(shù)據(jù)1000條，每個字幕的長度、速度、字號都不同，怎么管理這些彈幕，示意圖如下：

圖2.1 彈幕管理示意圖

 

這是第一種情況，按照從上到啊的順序依次擺放以后會有幾個問題：
1. 彈幕五、六、七該怎么計(jì)算位置，按top值循環(huán)取模+累加嗎？
2. 當(dāng)彈幕一或者彈幕三足夠長的時候，如何準(zhǔn)時的跳過當(dāng)前位置計(jì)算？
3. 當(dāng)前屏幕的彈幕播放結(jié)束，如何再計(jì)算的時候利用空出來的位置
4. 空出的位置是否滿足當(dāng)前彈幕的高度
5. ……

一系列問題就不統(tǒng)統(tǒng)列舉出來了，基于這個背景我們結(jié)合數(shù)學(xué)建模的思維方式，找到了彈幕場景相似度非常高的機(jī)場運(yùn)營。我們可以把彈幕當(dāng)做飛機(jī)，每個時間段播放多少彈幕和機(jī)場每個時間段放飛多少飛機(jī)一個道理。

首都國際機(jī)場一共有3條跑道，兩條4E級跑道、一條4F級跑道，2016年的吞吐量為9000萬人次。它的運(yùn)行機(jī)制就是所有飛機(jī)通過搭臺有順序的共用3條跑道來完成運(yùn)輸任務(wù)的。

同理，我們也設(shè)計(jì)了幾個個角色：一個是軌道(跑道)、一個是調(diào)度(塔臺)、一個是彈幕(飛機(jī))，我們?yōu)槊總€角色設(shè)計(jì)一個類分為為Track、Main、Bullet。

* 軌道
            
       軌道這個角色很重要，它可以解決彈幕位置計(jì)算、速度控制、碰撞檢測問題。
       首先，我們要來初始化軌道。通俗的說我們要修建幾個跑道呢，我們不是實(shí)物，可以動態(tài)調(diào)整軌道的                        數(shù)量，計(jì)算的原則：
        軌道數(shù)量 = 播放器有效高度 / 設(shè)備基準(zhǔn)字號
    * 播放器有效高度：播放器的實(shí)際高度減去控制條的高度，因?yàn)閺椖徊豢梢哉趽蹩刂茥l。
    * 設(shè)備基準(zhǔn)字號：移動端是10px，pc端是12px；
        為啥計(jì)算公式是這樣的？因?yàn)槲覀円С植煌痔柕膹椖弧Ｔ囅氩煌淖痔枌ξ锢砜臻g的占用是不同的，然而如果要求軌道的尺寸是動態(tài)的，那就帶來很復(fù)雜的計(jì)算。本文提出“虛擬軌道”的概念，在交通管制中最常見的就是道路合并或者改向。我們也是采用將相鄰的物理軌道臨時合并為一條軌道。這樣就可以輕松的解決不同字號的軌道占用問題。原理圖如下：
        

圖2.2 軌道計(jì)算示意圖

其次我們來回憶下機(jī)場的工作流程：
1. 機(jī)長呼叫塔臺，CZ6132請求起飛
    * 目前跑道均被占用，請等待
        * N時刻后再次執(zhí)行步驟1
    * 目前跑道 A1 空閑，準(zhǔn)許進(jìn)入
        * 執(zhí)行步驟3
2. 塔臺查看跑道使用情況
3. 進(jìn)入跑道，起飛完成
4. 機(jī)長通知塔臺，本次起飛完成，釋放跑道的占用
5. 其他飛機(jī)同樣執(zhí)行上述步驟

按照這個思路，我們的彈幕工作流程：
    
1. 彈幕進(jìn)入播放器
2. 軌道根據(jù)彈幕的播放速度、尺寸計(jì)算是否有合適的軌道提供
    * 沒有
        * 通知彈幕尚無合適軌道提供，請等待；同時，彈幕隊(duì)列中的其他彈幕依次執(zhí)行步驟1
    * 有
        * 執(zhí)行步驟3
3. 播放器加載彈幕DOM，開始播放，待播放完成
4. 播放完成通知軌道更新軌道占用情況
5. 其他彈幕同樣執(zhí)行上述步驟

圖2.3 軌道可用性計(jì)算示意圖

 

關(guān)于軌道的基本原理我們整理清楚了，當(dāng)然還有不少細(xì)節(jié)比如如何和調(diào)度通信、如何和彈幕通信以及虛擬軌道檢測算法等。有興趣的同學(xué)可以參考代碼吧。https://github.com/bytedance/xgplayer/blob/master/packages/xgplayer/src/control/makeBullet.js

* 彈幕
       彈幕基本是實(shí)現(xiàn)“飛機(jī)”的角色，我們要求它具有自身的屬性和方法。比如調(diào)度中心通過id能拿到它所有的基本信息，軌道控制也可以通過彈幕進(jìn)行檢查和更新。當(dāng)然彈幕也必須具備狀態(tài)自動更新、移動、播放結(jié)束通知、自動銷毀等功能。
* 調(diào)度
        調(diào)度就是搭臺的化身，承接著軌道、彈幕的控制，也保持著與播放器的步調(diào)一致。它的職責(zé)如下：
    1. 播放器交互控制
    2. 彈幕隊(duì)列控制
    3. 自身狀態(tài)更新
    4. 數(shù)據(jù)格式轉(zhuǎn)換
    5. 動畫執(zhí)行
        還是直接用流程圖來描述更直接些：
        
       

圖2.4 彈幕運(yùn)行機(jī)制流程圖

在彈幕啟動之后，首先要檢查本地是否已有緩存數(shù)據(jù)，沒有的話直接請求數(shù)據(jù)并緩存，然后執(zhí)行數(shù)據(jù)讀取，首次過濾數(shù)據(jù)進(jìn)入彈幕隊(duì)列，同時啟動定時器。彈幕隊(duì)列的數(shù)據(jù)會定期請求軌道，檢測隊(duì)列里的彈幕是否可以進(jìn)入，一旦確認(rèn)后軌道做好登記，彈幕就可以進(jìn)入播放器開啟動畫播放了。定時器每隔2秒就會再次更新數(shù)據(jù)進(jìn)入到彈幕隊(duì)列（這塊不同的業(yè)務(wù)可以定制不同的規(guī)則）。彈幕播放結(jié)束后會通知調(diào)度和軌道，調(diào)度會在彈幕隊(duì)列中移除該彈幕實(shí)例，軌道也會移除該彈幕實(shí)例的軌道占用。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)

陳幼堅(jiān)不是學(xué)設(shè)計(jì)的，你相信嗎？

時代孕育的一代宗師！