• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 網頁設計教程 ] 探討網頁製作中的數據表格設計—- 其他教程




    教學主題: 探討網頁製作中的數據表格設計

    大家好!! 小編今天來和大家分享關於 其他教程中的網頁設計教程教學

    今天的這個教學主題是: 探討網頁製作中的數據表格設計

    這教學的重點為這幾點 [ 設計,表格,數據,網頁製作,探討,一個,使用,顏色,簡單,提 ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    從web發展開始時起,表格就已被使用。表格的結構至今沒變,也不會變,這才讓它不至於不是表格。結構雖然沒變動,不過樣式風格卻已經有了長遠的發展;現在的表格仍然與早期的表格一樣有可讀性。

    組織數據和信息是一個不可疏忽的能力。組織內容和文字的方式(一般以copy的形式)會在用戶怎樣接收內容上有直接的影響。網頁設計需要找到一個方法組織內容以使其便於讀者掃描和接收。其中一個簡潔的方法就是運用數據表格。表格提供結構化的方式來展示大量的信息。

    從web發展開始時起,表格就已被使用。表格的結構至今沒變,也不會變,這才讓它不至於不是表格。結構雖然沒變動,不過樣式風格卻已經有了長遠的發展;現在的表格仍然與早期的表格一樣有可讀性。

    探討網頁製作中的數據表格設計

    數據表格的一般運用

    表格輕易就能用簡潔和易讀的方式來組織數據。它們可用於保存和展示大量的數據,小量的信息,靜態數據以及即使在不斷地變動的數據。

    與圖表布局相似的表格用於做對比時非常有用。很多網站在對比不同產品,服務,和我們將提到的價格上使用這類表格。

    下面的表格是蘋果公司在網站對比所有的麥金塔筆記本(MacBook)。這個圖錶帶有大量的信息,但仍然是便於掃描閱讀的。這是一個非常簡單的表格,但在恰當的空間和邊框的影響下,觀之悅目。另外,這些手提電腦的圖片和重要信息的加粗,讓這表格可讀性很非常高。

    探討網頁製作中的數據表格設計

    數據表格一般用做對比預算標價對比。它們提供空間來展示預算的名字,價格以及每種預算的特點。一般來說,預算計劃顯示成列,而價格顯示成行。這樣每個單元格都標記着每個預算計劃帶有那些具體的特徵。

    最後,表格還常常用在電視網絡網站展示節目表。這類表格與一般的表格有不同的地方:單元格根據參差不齊的各個節目時間長度來決定自身的尺寸。除此之外,節目表與別的表格結構無異。

    一個高效的數據表格的組成部分

    雖然每個用戶都知道怎樣理解一個表格,但你仍然可以做一些事情來讓你的作品在可用性上達到新的高度。

    Titles + Labels + Data = Data Table

     

    很明顯,一個數據表格由列的標題(Titles)和行的標籤文字(Labels),以及在數據單元格(cells)中的數據(Date)組成的。不需多也不能少。

    為表格加顏色時,你應當讓那些單元格與列和行的標題形成對比。讓列和行的標題的背景色和數據單元格的背景色不同。這樣表格就更易讀和減少錯誤。

    下面由Goplan製作的表格在列和行的標題上使用了較暗的顏色。因為辨色的對比,讀這個表格就比較容易了。

    探討網頁製作中的數據表格設計

    堅持使用簡單的方格

    所有的表格都是方格的,當然這樣的效果很好,所以我們不需要改動它。方格之所以說是高效的是因為你的一個小的區域填寫大量的信息,而瀏覽者還能輕易地理解裡面的內容。

     

     

    使用圖標

    圖標是在頁面中減少煩人的文字的優秀的方法。圖標也可以幫助組織數據表格。

    下面的表格非常高效地使用了圖標,看起來很簡潔。勾和X分別代表“是“和“不是“。

    探討網頁製作中的數據表格設計

    不要留空白單元格

    表格有時會有一些單元格是沒有數據的。要避免簡單地讓這些地方空白,相反,可以在裡面填一個標記,比如說X號,圖標或者像下面的表格那樣,破折號。

    這個簡潔的表格使用了三個破折號來表示裡面的數據是空白的。這樣比簡單地留空白看起來效果更好。

    探討網頁製作中的數據表格設計

    高亮強調重要的行和列

    很多數據表格高亮一些提供非常重要或者有用的信息的行和列。在價格圖表中,你會經常看到最佳的預算計劃是被高亮着。看一下下面的表格,最重要的行–正在看的該天的日程安排表的那一列是用粗厚的邊框和不同的背景色高亮着。

    探討網頁製作中的數據表格設計

    更大更複雜的數據表格

    至今為止,我們關注的主要是比較小和簡單的表格,但怎樣處理大型的複雜的數據非常多的數據嗎?有不少專為大型數據表格的可用性思考:

    讓行列可移動

    數據表格在很多軟件應用中佔有很重要的地位,無論是基於web的還是本地安裝的。一般來說,開發者會根據用戶的需求來讓那些行列可移動和可組織。另外,應用程序通常允許用戶刪減行列。

    允許行列的重新排序

    在有大量數據或者在數據經常變動的表格中,你應該給用戶重新排序內容和單元格的權限和能力。最常見的可變情況是,可以重新排序日期,字母和重要性。

    為大型表格提供搜索功能

    如果數據是外延的和表格非常大,這裡一個搜索框是必需的。這樣可改善總體的可用性,並讓查找數據更快捷。

    提供不同的視圖

    如果你的表格的信息帶有縮略圖或者別的可視化內容,你能加上另一個可用性特徵就是用不同的方式查看信息的能力,提供只看文本,文本和縮略圖,只有縮略圖幾種查看的方式。

    看一下下面基於flash數據表格。它提供了很多用於大型表格的好方法,比如說搜索,重新排序以及不同視圖。

    探討網頁製作中的數據表格設計

    數據表格和樣式

    添加樣式,或者缺少樣式,都會影響到用戶怎樣查看一個表格和接收數據。這個很重要。不過數據表格也不宜過度加樣式。簡潔和易讀應是總體目標。陰影和藝術邊框對別的網頁元素可能效果會很好,但表格最好別和他們沾邊。這裡有一些樣式元素能很好地服務表格。

    交替顏色

    數據最重要的是可讀。一種方法就是給行和列加上交替顏色。這樣讓它更易讀和掃描。

    下面是個鋪砌得很好的表格。表格的行有交替顏色,簡潔,流動,高效。它雖然數據大但仍保持很好的可讀性。

    探討網頁製作中的數據表格設計

    邊框

    用邊框分隔單元格非常重要。邊框使數據更有可讀性和減少錯誤。在有巨大的數據的情況下,單元格的數據會看起來混合到到一塊,但你要把它們分開來。

    足夠的空白

    就像邊框,在數據之間的空白有助於確保可用性。在每個單元格中,在數據和邊框之間留下足夠的內距(padding)。留至少20px的空白。

    簡單的背景色

    好數據表格都會關注可讀性(這個我們總是不厭其煩地在說)。顏色和可讀性總是緊密相連的。表格應該是簡單的,而保持簡單的一個方法就是使用簡單的顏色。避免使用明亮的,不愉快的背景色。

    數據表格佳作展示

    這裡推薦一些網站的表格佳作。

    Quantcast

    一個簡單和基本的表格,它使用了漂亮的字體和顏色圖案

    探討網頁製作中的數據表格設計

    JukeFly

    一個具有很多可用性特點和用戶友好樣式的大表格(基於flash)

    探討網頁製作中的數據表格設計

    eWedding

    樣式漂亮,簡潔,可讀性強

    探討網頁製作中的數據表格設計

    Media Temple

    使用圖標的小型表格,它提供了很好的可視化效果來代替文字

    探討網頁製作中的數據表格設計
    貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
    使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit/Undo )命令使
    用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

    iTunes

    表格不僅在web上有,很多應用程序上也使用它。

    探討網頁製作中的數據表格設計
    貼心提醒: 使用選框工具( Marquee Tools )的時候,按住Shift鍵可以劃出 正方形和正圓
    的選區;按住Alt鍵將從起始點為中心勾劃選區。

    Mosso

    一個很好看的表格,令人悅目的顏色和圖標

    探討網頁製作中的數據表格設計

    Zibler

    使用Flex的表格,提供搜索,移動行列以及重新排序的功能

    探討網頁製作中的數據表格設計

    Cleartrip

    一個複雜的信息量大的表格,不過仍易讀。另外還可排序和移動行列

    探討網頁製作中的數據表格設計

    Realmac Software

    購物車也是建立在方格系統之上。來自Realmac Software的例子

    探討網頁製作中的數據表格設計

    MT Support

    顏色和對比用得好

    探討網頁製作中的數據表格設計

    CBS

    CBS 的節目表

    探討網頁製作中的數據表格設計

    Long Term Clients

    一個有精彩的樣式的表格,布局簡潔大方,有交替顏色

    探討網頁製作中的數據表格設計

    Media Temple

    來自 Media Temple另一個精彩表格

    探討網頁製作中的數據表格設計

    Fox

    Fox.com的節目表,高亮了當天的內容

    探討網頁製作中的數據表格設計

    Quommunication

    很多論壇首頁是一個表格,這是一個例子

    探討網頁製作中的數據表格設計

    Viget

    一個結構安排和數據組織得很好表格

    探討網頁製作中的數據表格設計

    Joomla! Forum

    又是一個論壇的頁面

    探討網頁製作中的數據表格設計

    看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢?

    希望我們所介紹的 探討網頁製作中的數據表格設計 這教學會喜歡

    文章標題: 骨子愛創意- 探討網頁製作中的數據表格設計–轉載請註明來源處

    本教學分類為網頁設計教程中的 其他教程相關教學

    文章相關關鍵字為: 設計,表格,數據,網頁製作,探討,一個,使用,顏色,簡單,提

    本文永久連結 :探討網頁製作中的數據表格設計

    本文轉載自 :VIA