&

加強網(wǎng)站的體驗

日期 : 2021-12-23 21:50:15

基于瀏覽器和設(shè)備性能對平臺和設(shè)備的深入考量

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

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

更進一步：給設(shè)備歸類

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

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

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