1. 基于瀏覽器和設備性能對平臺和設備的深入考量

如果我們目前為止沒(méi)有做錯的話(huà)，基礎內容和功能在大部分的瀏覽器里都可以運行良好。如果你要設計- -個(gè)網(wǎng)絡(luò )應用程序，有一點(diǎn)需 要提醒你的是需更準備詳細的技術(shù)參數(比如地圖應用程序需要CSS、JavaScript、 圖片和GPS支持能力作為基礎)。在這個(gè)例子里，線(xiàn)框設計可能不會(huì )起作用。從某種程度上而言，這樣做實(shí)在是太糟糕了，因為我們會(huì )把用戶(hù)關(guān)在門(mén)外。嘗試盡可能多地放入可接受的內容。我們的草圖設計會(huì )告訴我們這個(gè)網(wǎng)站可能會(huì )長(cháng)成能多地放入可接受的內容。我們的草圖設計會(huì )告訴我們這個(gè)網(wǎng)站可能會(huì )長(cháng)成但是現在我們更喜歡進(jìn)一步設計， 加強在瀏覽器和平臺上的綜合體驗，可以支持更強大的功能。下面給出一些案例。

• 線(xiàn)性的設計只有一欄內容。為了大尺寸的屏幕，或者是為了方便那些需要在一些設備上任意切換肖像和景觀(guān)模式的時(shí)候，我們可以做一點(diǎn)調整。 如果有更多的空間，布局可以設計成適應多欄的。把元素放在不同的位置也會(huì )明顯發(fā)揮作用，因為用戶(hù)站在一個(gè)更遠視點(diǎn)的時(shí)候和屏幕的交互方式會(huì )顯著(zhù)不同;比如說(shuō)用戶(hù)可能還想要扭轉或者重新定位一下導航。你可能也會(huì )重會(huì )重新思考一下哪些內容是重 要的，因為此時(shí)不再是像線(xiàn)性設計那樣簡(jiǎn)單新思考一下哪些內容是重 要的，因為此時(shí)不再是像線(xiàn)性設計那樣簡(jiǎn)單會(huì )重新思考一下哪些內容是重 要的，因為此時(shí)不再是像線(xiàn)性設計那樣簡(jiǎn)單地只要將內容由上至下擺開(kāi)就可以了。
• 還有些設備會(huì )有一些我們非常想要去利用的功能，比如相機和GPS功能。大部分人都想只要能夠支持JacaScript就可以了（常見(jiàn)的情況是可以支持的，但是又的時(shí)候卻不這樣，特別是對于一些低端設備，而且這樣的在周?chē)€不少）?？紤]一下如果設備具有加強視覺(jué)的功能，比如第三方字體或者CSS漸變？在特定設備中的特定瀏覽器里, 這種真實(shí)環(huán)境下進(jìn)行設計使我們可以測試這些特性是不是起作用(也可以知道是不是好的作用),同時(shí)也可以知道這個(gè)設計在表現層上的影響力。我們需要去考察，要在那些特定的平臺和設備上把某些特定排除在外，又在其他的平臺和設備上使用某些特性。
• 基于特定的平臺或設備，我們可能甚至想去加、減、移動(dòng)或是該表一些內容。比如說(shuō)，在小屏幕設備或者是手機終端上，會(huì )希望使用小尺寸圖片作為默認的圖片，但是在大屏幕設備上，會(huì )希望使用更大一點(diǎn)的圖片。我們不希望提供一些對于場(chǎng)景沒(méi)有用處的內容給用戶(hù); GPS相關(guān)的內容只需吳在支持GPS功能的時(shí)候出現，因此我們只會(huì )在符合條件的設備上添加這些內容。
• 為了加強結構化內容的體驗，我們至少得將我們需要支持的設備列出一張單來(lái)，對它們進(jìn)行分門(mén)別類(lèi)，歸納出幾個(gè)層級。換句話(huà)說(shuō)，將相似類(lèi)型的設備合成一種，這樣你就可以聚焦在針對這幾類(lèi)設備的設計上，而不是針對每一個(gè)不同的個(gè)體。我們通常僅僅滿(mǎn)足IOS和Android,但是這樣太有限了。最后，我們將針對其他不同種類(lèi)的設備對產(chǎn)品做出調整，使它在任何設備，上運行良好。
• 不要根據設備的物理表象特征來(lái)對它們進(jìn)行分類(lèi)，比如說(shuō):桌面、智能手機、便簽等。這種分類(lèi)和你需要思考的問(wèn)題關(guān)聯(lián)性不大。相反，應該按照你的APP所需要的特征將設備(甚至是延伸到它們默認的瀏覽器)拆分成你所需要的類(lèi)別。任何可能關(guān)聯(lián)到的因素都需要考慮在內，比如它的觸控能力、屏幕尺寸、像素密度、地理定位、本地存儲、SVG 支持情況等。
• 我們應該關(guān)注在設備的特征上，因為當有新的設備出現，這種設備又很難歸類(lèi)到日常消費品和市場(chǎng)類(lèi)目的時(shí)候，我們之前所作的工作還是有效的。
• 市場(chǎng)類(lèi)目無(wú)法讓我們知道那些內容是需要了解的（比如說(shuō)，是否支持SVG，在這個(gè)設備的這個(gè)瀏覽器里是否表現良好）。

2. 更進(jìn)一步：給設備歸類(lèi)

對于網(wǎng)站“三個(gè)盒子”，我們就需要關(guān)注設備歸類(lèi)。這是一個(gè)以教育為目的網(wǎng)站，為了讓用戶(hù)知道代碼是怎樣發(fā)生作用的，需要放上用戶(hù)自己編寫(xiě)的代碼進(jìn)去。寫(xiě)出來(lái)的代碼需要展示在瀏覽器里，運行后的結果需要顯示在屏幕的某個(gè)位置。
      回歸現實(shí)：將這些內容從手機屏幕上拉下來(lái)簡(jiǎn)直不可能，通常情況下，下面列出的設備類(lèi)型是需要我們關(guān)注的。      

• 支持HTML：需要基于文本的教程內容（理論和語(yǔ)法）
• 支持Javascript：交互語(yǔ)言編寫(xiě)必須滿(mǎn)足的條件。
• 大屏幕:基于文本的教程內容不需要，但是對于編程練習來(lái)說(shuō)很有用。
• 硬件條件上需要有鍵盤(pán)，這樣方便代碼的錄入。
• 瀏覽器需要支持最新的Flexbox specification (否則，練習所編寫(xiě)的代碼也不會(huì )運行)o可以滿(mǎn)足所有這些要求的設備對于我們的項目而言是非常理想的。

但是我們有一-個(gè)嚴肅的問(wèn)題。就在我寫(xiě)這篇文章的同時(shí)，最新的Flexbox specification 只有Chrome Canary支持，Chrome Canary幾乎不會(huì )限制我們對網(wǎng)站的多媒體設計。如果這是一個(gè)真實(shí)的網(wǎng)站，我們將面臨一些艱難的選擇。假如我們不想用JavaScript編寫(xiě)一個(gè)Flexbox布局引擎，那么我們就只能選. 擇Chrome Canary作為唯一的瀏覽器， 因為只有在這里，練習所寫(xiě)的代碼，才會(huì )運行。
      然而，根據我們的內容清單和設備分類(lèi)，我們確實(shí)可以提供有價(jià)值的文本內容(lexbox理論、語(yǔ)法等),接下來(lái)只有當實(shí)際需要的時(shí)候提供一-些其他的交互元素(即當這些所需的特性可以實(shí)現時(shí))。
找到做這件事的完美方式是非常復雜的，同時(shí)也超出了本章內容的范圍，但是想象一下我們使用JavaScript在瀏覽器中測試是否支持某種Flexbox特性。如果可以支持的話(huà)，那么這些交互成分就可以加入到這個(gè)網(wǎng)站中來(lái)。