今天再來跟大家分享一個去年8月份做的網站設計案例，我負責設計渤海銀行深圳分行高爾夫俱樂部網站，主要是信息發布和資源共享的一個平臺……

該俱樂部的目的是：把俱樂部打造成客戶和銀行間、客戶和客戶間相互了解、深化合作的平臺。

了解到該網站建設的目的，我給網站定義的色調是比較輕松，休閑，同時不失穩重這樣的一個基調。

轉載藍藍設計( www.syprn.cn )是一家專注而深入的設計機構 ，為期望卓越的國內外企業提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

原文地址：http://www.uisheji.com/41519.html

我們認為目標導向設計方法由4個P組成，即process、pattern、principles、practices(過程、模式、原則 、實踐)，下面我將和大家一起討論前3個P。
 

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里 。

本文來自：http://www.chinavisual.co/archives/3080/

我們很高興目前 Web窗體設計：在空白處填寫  “路加福音Wroblewski”第 13章的摘錄（2008年 羅森菲爾德媒體）10  ％ 的代碼保存 ALAWFD當您 以出版商的網站。 - ED。

我就出來了，并說這：注冊表單必須死。 在這本書的介紹中，我描述的絆腳石后，被推薦到Web服務的過程。 你到達急于潛水，并開始從事和迎接你的第一件事就是什么呢？ 一種形式。

我們可以做得更好。 事實上，我相信我們可以得到與從事數字化服務的方式，告訴他們這樣的服務是如何工作的，以及為什么他們應該關心不夠使用它們的人。 我也相信我們可以做的，沒有明確地讓他們填寫一個注冊的形式作為第一步。

但是，在我們到逐步參與的潛力（您的路徑，登錄“dullery”），讓我們來看看，如何從事與在線服務的過程中通常工程。 自2007年以來，在線視頻的一個突破的一年，是安全的假設，有很多人在網絡上去后他們的影片之一。 也許他們聽到 谷歌視頻 是這樣做的好去處。 在到達現場后，他們發現了一個鏈接，分享他們的視頻和接下來發生了什么？ 他們得到了在圖13.1的形式。

Official user interface (UI) and user experience (UX) guidelines from the manufacturers, links to which you can find below, are a source of inspiration for mobile web and app design. Here, you will find guidelines, samples, tips, and descriptions of common mistakes. Many of the guidelines focus on native application development, but we can apply most parts of them to mobile web design too.

Remember to provide the best possible experience on each platform. Do not deliver an iPhone experience to a BlackBerry user. Every platform has its own UI and usability guidelines that every user is expecting on your app

• iOS Human Interface Guidelines (iPhone, iPod and iPad) - PDF version
• 
                  
• iPad Human Interface Guidelines iPad HIG was merged with iPhone in iOS HIG (see above)
• 
                  
• UI Guidelines for BlackBerry 6.0 Smartphones – PDF version
• 
                  
• UI Guidelines for BlackBerry 4.x, 5.x Smartphones – PDF version
• 
                  
• Android User Interface Guidelines
• 
                  
• Nokia N9 & Meego 1.2 Harmattan UX Guidelines
• 
                  
• UI Guildelines for BlackBerry PlayBook – PDF version

閱讀瞬間發生了什么？
       當閱讀行為發生時，如果能進入人腦，你會發現復雜的處理過程在瞬間發生。所以在談論設計之前，讓我們先來看看閱讀表格時，人的大腦都會處理哪些任務。

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

 

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

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

行交替樣式Alternating rows styling

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

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

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

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

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

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

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

垂直