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

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

 

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

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

行交替樣式Alternating rows styling

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

在數(shù)據(jù)較多的多行多列表格里用不同樣式交替顯示不同的行，這會(huì)提高用戶區(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)用到任意類型的信息列表上（不僅限于 <table> ). 

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

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

垂直

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

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

表單可用性緣何重要？
 

The ISO 9241 standard defines website usability as the “effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments.” When using a website, users have a particular goal. If designed well, the website will meet that goal and align it with the goals of the organization behind the website. Standing between the user’s goal and the organization’s goals is very often a form, because, despite the advances in human-computer interaction, forms remain the predominant form of interaction for users on the Web. In fact, forms are often considered to be the last and most important stage of the journey to the completion of goals.

ISO 9241標(biāo)準(zhǔn)中對(duì)網(wǎng)站可用性的定義是：特定用戶在特定環(huán)境下，能夠快速、有效且滿意地完成特定的目標(biāo)。用戶使用網(wǎng)站都是有目標(biāo)的。 如果設(shè)計(jì)得好，網(wǎng)站不但會(huì)達(dá)到用戶的目標(biāo)，還會(huì)將其與自身公司的目標(biāo)聯(lián)系起來(lái)。介乎用戶目標(biāo)和公司目標(biāo)之間的往往就是表單 ，因?yàn)?，盡管人機(jī)交互發(fā)展迅速，表單仍然是用戶與網(wǎng)站交互的主要方式。實(shí)際上，表單經(jīng)常被認(rèn)作是完成目標(biāo)的最后也是最重要的一站。
 

Let’s clarify this last point by discussing the three main uses of forms. As Luke Wroblewski states in his book Web Form Design: Filling in the Blanks, every form exists for one of three main reasons: commerce, community or productivity. The following table translates each of these reasons into the user and business objectives that lie behind them:

讓我們通過(guò)討論表單的三個(gè)主要作用來(lái)闡述下最后這一點(diǎn)。就像Luke Wroblewski在他的《web表單設(shè)計(jì)：點(diǎn)石成金的藝術(shù) 》一書(shū)中說(shuō)的一樣，每個(gè)表單的存在必有如下三個(gè)原因之一：商務(wù)、社區(qū)或效率。下面的表單把這三個(gè)原因轉(zhuǎn)化成了其背后的用戶目標(biāo)和公司目標(biāo)：