212011-11

表格的UI交互模式指南

許多人都認同這樣一個現象：表格雖然是用戶界面設計中的一個重要部分，但是它們卻經常會被忽視。表格應該顯示讓用戶更易讀，更易掃視，更易比較的結構化數據，但在很多情況下，表格數據卻顯得模糊不清。這就是很多人不喜歡表格的原因。

用戶的日常工作經常使用表格，但是誰會需要讓他們崩潰的東西呢。要改變這樣的現狀，下面給出一些使表格易用的指南。

行交替樣式Alternating rows styling

這是很明顯的，但是事實如此嗎？看看今天的WEB應用，你就會發現很多并不適用。因此，行交替樣式并不明顯，這就是把他列為第一個來闡述的原因。

在數據較多的多行多列表格里用不同樣式交替顯示不同的行，這會提高用戶區分數據的能力。可以采用背景色或者背景圖片，如果采用背景色，背景顏色應該比頁面顏色淺或者深一點。圖像背景應該選擇和符合整體配色方案的圖片。也可以把背景色和背景圖組合應用于表格邊框。表格的header和footer部分應該易于識別，可以采用比表格行深或者淺的顏色。

BlinkCampaign的表格行采用了淺一點的亮綠色，header采用了稍微暗一點的綠色。

評論(283) 瀏覽(8833)

202011-11

互聯網應用表單設計

藍藍設計的小編

Vertical Labels

評論(0) 瀏覽(8324)

192011-11

15個優秀的互聯網應用表單設計

藍藍設計的小編

從某種意義上來說，的確如此。一個好的表格應該以易于理解，簡單明了的方式傳遞大量的信息。真正的重點應該放在信息上，對表格的過度設計會抵消這種作用。從另一方面來說，巧妙的設計不僅可以使一個表格更具吸引力，而且可以增加可讀性。

今天我們來看看提升表格功能和美觀的幾種方式。我們經常會在網上的價格頁上看到表格的應用，因此主要以該種表單為例。請記住這些原則可以應用到任意類型的信息列表上（不僅限于 <table> ).

垂直，水平或矩陣？Vertical, Horizontal or Matrix?

一如以往，我們從最明顯的地方開始。第一步是決定表格的整體結構。結構取決于呈現數據的類型和復雜性。選擇垂直的列還是水平行，通常取決于個人偏好。大致規劃下表單的內容，然后決定采取哪種方法能更好地傳遞信息。很顯然，如果信息包含多變量，那么選擇矩陣來表示。下面分別以幾個簡單案例來開始。

ArcGIS界面欣賞：國外gis界面設計欣賞截圖

藍藍設計的小編

因為給中興通公司設計相關gis界面，藍藍收集的Flex生成的，arcgis界面截圖。藍藍設計更多gis案例見http://m.shtzxx.cn/bs.html。

評論(99) 瀏覽(11398)

172011-11

設計新用戶引導頁的一些思路

藍藍設計的小編

一個新的網絡產品，或者一個全新的功能要想吸引用戶的使用興趣，就需要讓用戶在剛一接觸到的時候能夠快速地了解它是什么，能做些什么，并且能馬上開始一些簡單的操作。如果看了很久還沒弄明白這些，那么很可能就徹底放棄了。

所以，設計新手用戶引導，就是設計用戶前一、兩次使用產品時的體驗，設計目標是讓新手用戶快速、無痛苦地成為中間用戶。

評論(0) 瀏覽(8759)

162011-11

先簡單介紹一下這個訓練營的活動流程：
　　　1:00 – 1:30 注冊
　　　1:30 – 2:30 HTML5 技術剖析
　　　技術講座1 —— Google 工程師
　　　技術講座2 —— 特邀嘉賓（李靖威、李繼成，就職于人人網）
　　　2:30 – 3:00 宣布競賽規則，開始組隊
　　　3:00 – 6:30 作品創作 / 提交
　　　6:30 – 7:00 作品展示
　　　7:00 – 7:30 評獎、頒獎

　　講座部分，先是Google工程師寒蕊MM跟我們分享了些HTML5的新技術概況，其中大致包括：sessionStorage 、localStorage 、Web SQL DateBase 、Indexed DB ，寒蕊MM還專門寫了篇關于IndexedDB的文章《客戶端數據存儲》，文章用實例的方式講了Web Storage(localStorage)、Web SQL Database 和 Indexed Database的用法。

　　其中Web SQL Database雖是HTML5的技術，但由于某些原因，W3C組織(Web Applications Working Group)已不再維護這項技術，也就是說雖然目前Chrome、FireFox新版本瀏覽器支持這項技術，但不一定未來的版本還會支持。以下為w3c官網的聲明：

評論(0) 瀏覽(10105)

152011-11