1. 基于瀏覽器和設(shè)備性能對(duì)平臺(tái)和設(shè)備的深入考量

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

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

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

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

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

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