基于瀏覽器兼容和手機兼容的網頁設計分析
來源:中聯星空網絡科技有限公司
|
2015.11.19
如果我們目前為止沒有做錯的話,基礎內容和功能在大部分的瀏覽器里都可以運行良好。如果你要設計一個網絡應用程序,有一點需要提醒你的是需要準備詳細的技術參數(比如地圖應用程序需要CSS、JavaScript、圖片和GPS支持能力作為基礎)。線框設計可能不會起作用。因為我們會把用戶關在門外。嘗試盡可能多地放入可接受的內容。我們的草圖設計會告訴我們這個網站可能會長成什么樣子,同時把它放到手機終端上去運行看一下是否兼容。下面濟南網站建設對基于瀏覽器兼容和手機兼容的網頁設計分析
但是現在我們更喜歡進一步設計,加強在瀏覽器和平臺上的綜合體驗,可以支持更強大的功能。下面給出一些案例。
線性的設計只有一欄內容。為了大尺寸的屏幕,或者是為了方便那些需要在一些設備上任意切換肖像和景觀模式的時候,我們可以做一點調整。如果有更多的空間,布局可以設計成適應多欄的。把元素放在不同的位置也會明顯發揮作用,因為用戶站在一個更遠視點的時候和屏幕的交互方式會顯著不同;比如說用戶可能還想要扭轉或者重新定位一下導航。你可能也會重新思考一下哪些內容是重要的,因為此時不再是像線性設計那樣簡單地只要將內容由上至下擺開就可以了。
還有些設備會有一些我們非常想要去利用的功能,比如相機和GPS功能。大部分人都想只要能夠支持javascript就可以了(常見的情況是可以支持的,但是有的時候卻不這樣,特別是對于一些低端設備,而且這樣的在周圍還不少)??紤]一下如果設備具有加強視覺的功能,比如第三方字體或者CSS漸變?在特定設備中的特定瀏覽器里,這種真實環境下進行設計使我們可以測試這些特性是不是起作用(也可以知道是不是好的作用),同時也可以知道這個設計在表現層上的影響力。我們需要去考察,要在哪些特定的平臺和設備上把某些特定排除在外,又在其他的平臺和設備上使用某些特性。讀者可以參考《在不同瀏覽器和分辨率下的網站設計流程》這篇文章獲得更多的關于瀏覽器兼容方面的信息。
基于特定的平臺或設備,我們可能甚至想去加、減、移動或是改變一些內容。比如說,在小屏幕設備或者是手機終端上,會希望使用小尺寸圖片作為默認的圖片,但是在大屏幕設備上,會希望使用更大一點的圖片。我們也不希望提供一些對于場景沒有用處的內容給用戶;GPS相關的內容只需要在支持GPS功能的時候出現,因此我們只會在符合條件的設備上添加這些內容。
為了加強結構化內容的體驗,我們至少得將我們需要支持的設備列出一張清單來,對它們進行分門別類,歸納出幾個層級。換句話說,將相似類型的設備合成一種,這樣你就可以聚焦在針對這幾類設備的設計上,而不是針對每一個不同的個體。我們通常僅僅滿足IOS和Android,但是這樣太有限了,最后,我們將針對其他不間種類的設備對產品做出調整,使它在任何設備上運行良好。
不要根據設備的物理表象特征來對它們進行分類,比如說:桌面、智能手機、便簽等。這種分類和你需要思考的問題關聯性不大。相反,應該按照你的APP所需要的特征將設備(甚至是延伸到它們默認的瀏覽器)拆分成你所需要的類別。任何可能關聯到的因素都需要考慮在內,比如它的觸控能力、屏幕尺寸、像素密度、地理定位、本地存儲、SVG支持情況等。
我們應該關注在設備的特征上,因為當有新的設備出現,這種設備又很難歸類到日常消費品和市場類目的時候,我們之前所作的工作還是有效的。