25個(gè)提示頁(yè)面設(shè)計(jì)，網(wǎng)站正在建設(shè)中…提示頁(yè)面也是設(shè)計(jì)師展示創(chuàng)意的地方，希望能給你們帶來(lái)一些靈感.

這是一款基于NFC支付的記帳工具，綁定您的帳號(hào)后，它會(huì)自動(dòng)記錄您的每一筆NFC支付金額，并對(duì)其進(jìn)行統(tǒng)計(jì)分析，方便您進(jìn)行財(cái)務(wù)管理。另外您還可以手工輸入其它類(lèi)型的消費(fèi)記錄，進(jìn)行財(cái)務(wù)預(yù)算，對(duì)整體資金的走向有個(gè)直觀的把握，完善實(shí)時(shí)的理財(cái)規(guī)劃。

自從iPhone、iPad風(fēng)靡了大街小巷，各種層出不窮的App誕生，吸引著無(wú)數(shù)用戶(hù)的眼球。在App鋪天蓋地的今天，用戶(hù)可以根據(jù)自己的喜好與需求，找到適合自己的。在這里，我們?yōu)閺V大設(shè)計(jì)人士搜羅了10款基于web端的App，無(wú)需iPhone或是iPad，也無(wú)需額外的軟件或插件，只要一個(gè)瀏覽器即可使用。下列10款即實(shí)用又省時(shí)的App，將有助于您創(chuàng)建更好的財(cái)務(wù)支票清單、更有效地錄制視頻，或者在您下一個(gè)項(xiàng)目制作過(guò)程中為您推薦更心儀的色彩組合方案。

蘋(píng)果在三個(gè)月中已經(jīng)售出了100萬(wàn)臺(tái)iPad，這東西顯然不僅僅是一個(gè)放大版的iPhone或者iPod touch，擁有四倍于iPhone的屏幕，iPad更適合于閱讀和播放展示文件。

閱讀瞬間發(fā)生了什么？
       當(dāng)閱讀行為發(fā)生時(shí)，如果能進(jìn)入人腦，你會(huì)發(fā)現(xiàn)復(fù)雜的處理過(guò)程在瞬間發(fā)生。所以在談?wù)撛O(shè)計(jì)之前，讓我們先來(lái)看看閱讀表格時(shí)，人的大腦都會(huì)處理哪些任務(wù)。

?    閱讀標(biāo)題 ：用戶(hù)在閱讀表格時(shí)通常會(huì)簡(jiǎn)單略過(guò)行或列的表頭。
?    通讀全篇 ：用戶(hù)也許會(huì)先花時(shí)間掃描全篇，了解表格的整體結(jié)構(gòu)，數(shù)據(jù)分類(lèi)以及復(fù)雜性。
?    視覺(jué)搜索 ：為了找到數(shù)據(jù)，用戶(hù)會(huì)順著一行或者一列直到發(fā)現(xiàn)交叉點(diǎn)的有用信息，當(dāng)用戶(hù)對(duì)表格的結(jié)構(gòu)熟悉，或者上下文的表格結(jié)構(gòu)相同的時(shí)候，視覺(jué)搜索會(huì)更迅速的完成。
?    信息提取 ：找到目標(biāo)數(shù)據(jù)后，用戶(hù)就從表中提取了一條基本信息。
?    理解 ：用戶(hù)傾向用他們已有的知識(shí)去理解已從表格中獲取的信息。
?    確定類(lèi)別和趨勢(shì) ：用戶(hù)會(huì)從感知層面對(duì)相似的數(shù)據(jù)進(jìn)行歸類(lèi)并尋找變化趨勢(shì)。
?    比較 ：用戶(hù)將會(huì)比較數(shù)據(jù)，并發(fā)現(xiàn)規(guī)律。
?    推斷 ：為了更深層次的理解數(shù)據(jù)變化，用戶(hù)往往會(huì)推斷一些結(jié)論
?    解釋 ：用戶(hù)將會(huì)從自身的知識(shí)庫(kù)中提取信息，來(lái)解釋數(shù)據(jù)的意義。
?    回憶 ：用戶(hù)會(huì)需要記住表格中的一些信息，以便在將來(lái)使用這些信息。
?    決策 ：用戶(hù)會(huì)以他們對(duì)數(shù)據(jù)含義的解釋為基礎(chǔ)，進(jìn)行相關(guān)決策。

 

許多人都認(rèn)同這樣一個(gè)現(xiàn)象：表格雖然是用戶(hù)界面設(shè)計(jì)中的一個(gè)重要部分，但是它們卻經(jīng)常會(huì)被忽視。表格應(yīng)該顯示讓用戶(hù)更易讀，更易掃視，更易比較的結(jié)構(gòu)化數(shù)據(jù)，但在很多情況下，表格數(shù)據(jù)卻顯得模糊不清。這就是很多人不喜歡表格的原因。

用戶(hù)的日常工作經(jīng)常使用表格，但是誰(shuí)會(huì)需要讓他們崩潰的東西呢。要改變這樣的現(xiàn)狀，下面給出一些使表格易用的指南。

行交替樣式Alternating rows styling

這是很明顯的，但是事實(shí)如此嗎？看看今天的WEB應(yīng)用，你就會(huì)發(fā)現(xiàn)很多并不適用。因此，行交替樣式并不明顯，這就是把他列為第一個(gè)來(lái)闡述的原因。

在數(shù)據(jù)較多的多行多列表格里用不同樣式交替顯示不同的行，這會(huì)提高用戶(hù)區(qū)分?jǐn)?shù)據(jù)的能力?？梢圆捎帽尘吧蛘弑尘皥D片，如果采用背景色，背景顏色應(yīng)該比頁(yè)面顏色淺或者深一點(diǎn)。圖像背景應(yīng)該選擇和符合整體配色方案的圖片。也可以把背景色和背景圖組合應(yīng)用于表格邊框。表格的header和footer部分應(yīng)該易于識(shí)別，可以采用比表格行深或者淺的顏色。

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

從某種意義上來(lái)說(shuō)，的確如此。一個(gè)好的表格應(yīng)該以易于理解，簡(jiǎn)單明了的方式傳遞大量的信息。真正的重點(diǎn)應(yīng)該 放在信息上， 對(duì)表格的過(guò)度設(shè)計(jì)會(huì)抵消這種作用。從另一方面來(lái)說(shuō)，巧妙的設(shè)計(jì)不僅可以使一個(gè)表格更具吸引力， 而且可以增加可讀性。 

今天我們來(lái)看看提升表格功能和美觀的幾種方式。我們經(jīng)常會(huì)在網(wǎng)上的價(jià)格頁(yè)上看到表格的應(yīng)用，因此主要以該種表 單為例。請(qǐng)記住這些原則可以應(yīng)用到任意類(lèi)型的信息列表上（不僅限于 <table> ). 

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

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

垂直

因?yàn)榻o中興通公司設(shè)計(jì)相關(guān)gis界面，藍(lán)藍(lán)收集的Flex生成的，arcgis界面截圖。藍(lán)藍(lán)設(shè)計(jì)更多gis案例見(jiàn)http://sillybuy.com/bs.html。

一個(gè)新的網(wǎng)絡(luò)產(chǎn)品，或者一個(gè)全新的功能要想吸引用戶(hù)的使用興趣，就需要讓用戶(hù)在剛一接觸到的時(shí)候能夠快速地了解它是什么，能做些什么，并且能馬上開(kāi)始一些簡(jiǎn)單的操作。如果看了很久還沒(méi)弄明白這些，那么很可能就徹底放棄了。

所以，設(shè)計(jì)新手用戶(hù)引導(dǎo)，就是設(shè)計(jì)用戶(hù)前一、兩次使用產(chǎn)品時(shí)的體驗(yàn)，設(shè)計(jì)目標(biāo)是讓新手用戶(hù)快速、無(wú)痛苦地成為中間用戶(hù)。