基于瀏覽器兼容和手機(jī)兼容的網(wǎng)頁(yè)設(shè)計(jì)分析
來源:中聯(lián)星空網(wǎng)絡(luò)科技有限公司
|
2015.11.19
如果我們目前為止沒有做錯(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ǔ))。線框設(shè)計(jì)可能不會(huì)起作用。因?yàn)槲覀儠?huì)把用戶關(guān)在門外。嘗試盡可能多地放入可接受的內(nèi)容。我們的草圖設(shè)計(jì)會(huì)告訴我們這個(gè)網(wǎng)站可能會(huì)長(zhǎng)成什么樣子,同時(shí)把它放到手機(jī)終端上去運(yùn)行看一下是否兼容。下面濟(jì)南網(wǎng)站建設(shè)對(duì)基于瀏覽器兼容和手機(jī)兼容的網(wǎng)頁(yè)設(shè)計(jì)分析
但是現(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ì)重新思考一下哪些內(nèi)容是重要的,因?yàn)榇藭r(shí)不再是像線性設(shè)計(jì)那樣簡(jiǎn)單地只要將內(nèi)容由上至下擺開就可以了。
還有些設(shè)備會(huì)有一些我們非常想要去利用的功能,比如相機(jī)和GPS功能。大部分人都想只要能夠支持javascript就可以了(常見的情況是可以支持的,但是有的時(shí)候卻不這樣,特別是對(duì)于一些低端設(shè)備,而且這樣的在周圍還不少)??紤]一下如果設(shè)備具有加強(qiáng)視覺的功能,比如第三方字體或者CSS漸變?在特定設(shè)備中的特定瀏覽器里,這種真實(shí)環(huán)境下進(jìn)行設(shè)計(jì)使我們可以測(cè)試這些特性是不是起作用(也可以知道是不是好的作用),同時(shí)也可以知道這個(gè)設(shè)計(jì)在表現(xiàn)層上的影響力。我們需要去考察,要在哪些特定的平臺(tái)和設(shè)備上把某些特定排除在外,又在其他的平臺(tái)和設(shè)備上使用某些特性。讀者可以參考《在不同瀏覽器和分辨率下的網(wǎng)站設(shè)計(jì)流程》這篇文章獲得更多的關(guān)于瀏覽器兼容方面的信息。
基于特定的平臺(tái)或設(shè)備,我們可能甚至想去加、減、移動(dòng)或是改變一些內(nèi)容。比如說,在小屏幕設(shè)備或者是手機(jī)終端上,會(huì)希望使用小尺寸圖片作為默認(rèn)的圖片,但是在大屏幕設(shè)備上,會(huì)希望使用更大一點(diǎn)的圖片。我們也不希望提供一些對(duì)于場(chǎng)景沒有用處的內(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)品和市場(chǎng)類目的時(shí)候,我們之前所作的工作還是有效的。