1. 華為手機 webapp開發問題
xhtml mp？jquery最後一個版本是2011年更新的，那時候安卓智能手機還未普及，所以只是兼容了一些常用的PC瀏覽器，如果華為手機是自己開發瀏覽器的話，不兼容也不奇怪，可以自己改jquery寫兼容，或者乾脆把華為的默認瀏覽器換成別的不就好了。
2. webapp中會用到哪些技術
1、界面元素的需求
在Web前端開發中，簡單這個原則是很重要的。在任何時候，你在屏幕上顯示越多的控制，您的用戶將不得不花費更多的時間去搞清楚如何使用界面。當選擇變少時，可用的功能變得更加明顯更容易被發現。簡化的界面雖然是不容易的，尤其是如果你不想限制應用程序的功能的時候。
GoodBarry 特點是在頭版有示範視頻去展示產品，它也通過利用示範影片去教育用戶如何開始使用。
一些Web應用程序使用視頻嵌入在程序本身教導用戶如果使用某些特定功能。視頻是一種非常好的方式去快速展示你產品是被怎麼使用的，因為它更容易描述超過一頁文字的內容，也清楚得多，因為觀眾可以清楚地看到該怎麼辦。
3. ios端對webapp注入javascript時需要注意哪些細節
. 必須要適配所有的智能手機設備
移動設備的屏幕是各式各樣的，對設計影響較大的主要是屏幕解析度、尺寸、屏幕方向這些因素。現在的iOS設備有320×480，640×960，1136×640，1024×768，2048×1536這些解析度，3.5寸、4寸、7.9寸、9.7寸這些尺寸等，未來還有更大的尺寸。
所以，需要解決Web app在不同屏幕下的界面適配問題。
最佳解決辦法有2個：
1、在寫前端頁面的時候，css 採用100%布局
2、採用html5技術來布局開發。
1.1 適配不同解析度
通過響應式網頁的設計方法提升頁面在不同解析度下的兼容性：
由於手機屏幕尺寸下，一般來說只能一個模塊一個模塊地從上到下排列。此時設計者就需要考慮模塊擺放的優先順序了。一般來說，用戶重點關注的、最近更新、與用戶相關的信息應該放在前面。
另外最好以主流解析度480×800進行設計，對略高於和略低於該解析度的屏幕可將界面元素進行縮放，對間距、邊距進行適當調整。
所以，在設定容器、圖片、文本框的寬度時最好避免使用px單位，使用%可使頁面在不同解析度屏幕下保持布局和頁面結構不發生改變。
1.2 平板電腦
使用CSS3的媒體查詢(media query)語句可獲得瀏覽器的高寬和設備的像素比，並可根據開發者的需要對不同的設備應用不同的樣式表。所以開發者可以控制一個頁面在不同設備上的表現。
由於手機屏幕和平板電腦的屏幕尺寸和像素都相去甚遠，所以為了充分利用平板電腦的大屏優勢，以獲得良好的用戶體驗，最好在兩種設備上使用不同的界面布局。相信iOS用戶都有這樣的感覺：有的App只適配iPhone，在iPad上運行則無法布滿屏幕，只能點「2X」按鈕顯示一個粗糙的界面。還有一種App可同時兼容iPhone和iPad，在手機和平板的屏幕上都能完美顯示，用戶也無需單獨下載兩個版本。很明顯，後者使用起來更方便，更美觀。
Mobile Web App使用媒體查詢功能即可實現這種功能。那麼在平板電腦上，有哪些需要注意的設計點呢?
因為平板電腦多在橫屏下使用，所以使用分欄視圖可在一個界面內顯示兩個層級的內容，方便用戶快速切換item。
首頁多以宮格視圖、Tab為主，微博、QQ這種以內容為主的界面將分欄視圖作為默認首頁也是可以的。在手機上最常使用的list在平板上就不是很常用了，整個屏幕顯示list，不僅浪費空間，也沒有分欄視圖的操作高效。
需要注意的是，IE9以下的瀏覽器不支持media query.
1.3 橫豎屏切換
由於目前還不能在webkit內核里禁止設備方向的旋轉，所以如果用戶的設備開啟了屏幕方向根據重力自動旋轉，那麼運行於瀏覽器的Web App也是會跟著旋轉的。
如果能夠捕捉到設備的方向，可以對橫豎屏分別進行布局設計，但最好能保證界面風格和樣式不會有大的變化。
反例就是iPhone的音樂App，在豎屏下會顯示歌曲list，但是切換到橫屏下顯示專輯封面。兩種界面風格跳動太大會導致部分用戶不適應，以為是兩個不同的頁面。計算器App也只有在橫屏下才顯示科學計算模式，豎屏下用戶根本無法切換到該模式，連引導也沒有。
宮格視圖是橫豎屏切換最平滑的布局，看看iOS系統的主屏幕就知道了。一個個應用程序圖標在橫豎屏切換時，幾乎只是圖標旋轉了一下方向。
還有一點就是切換到橫屏時，可自動進入全屏模式以顯示更多的內容。否則標題欄和底部欄將會佔去很多空間
2.WebAPP的交互動效
受瀏覽器性能影響，很多Native App能實現的華麗動畫在Web App項目里的表現並不是很好。所以應該果斷去掉非必要的動效以保證Web App能夠運行流暢。
因為很多動效會對用戶起到很好的引導作用，如果沒有這些動畫，可能會導致用戶對界面邏輯關系的理解產生混亂。這就對動效的設計提出了較高的要求。
總結了一下Web App的幾點動效設計原則：
●盡量不使用不必要的動效。
●優先使用簡單的動畫。如平移、縮放。盡量避免使用3D動畫。
●避免刷新頁面。因為整個頁面白屏，瀏覽器走進度條的體驗會給用戶瀏覽網頁的感覺，而不是在使用app
●框架元素優先顯示。只在內容載入區域顯示loading動畫
●避免跳變。在不影響性能的情況下，可盡量用縮放和平移動畫，保證用戶視覺焦點的延續性和理解的延續性。
●同類界面/對象，同層級界面/對象的動效保持一致。可幫助用戶理解產品架構和導航邏輯。
●高層級界面的動效對應高級物理位置。如果左右平移的動畫是用來切換上下一層級，那麼首頁應該是在最左邊，如iOS。如果前後切換的動畫是用來切換上下一層及，那麼首頁應該是在最上面，如Windows Phone。
3.WebAPP的內容布局和APP的風格要保持一致
講導航和信息內容布局的文章眾多，Mobile Web App既然要實現Native App的操作體驗，照傳統的移動客戶端的設計模式去設計即可。只需要記住你設計的Web App需要運行在iOS, Android, Windows Phone等多個平台，多種設備上即可。
由於iOS相比其他平台，沒有back按鍵，所以在iOS上運行需要保證界面內的導航能夠實現閉環。所以Android上有些操作可以通過Menu鍵喚出，但是在iOS上就需要直接暴露出來。
下圖左側是Zaker的Android版，右側是iPhone版。Android版的菜單欄需要點擊Menu鍵才出現。
4.善於使用Native App的UI相關控制項
使用Native App的UI控制項，可以讓Mobile Web App更有Native App的操作體驗。常見的如Badge，Back button，Bubble，Picker，Indicator，Title bar，Dialog，Toast，Loading，Drap down to refresh，Notification等。下圖分別是Facebook的Native App和Web App，由於後者使用了客戶端常見的一些UI控制項，所以用戶很難從視覺上識別出後者是Web App.
避免使用傳統的Web UI控制項，如麵包屑、文字鏈：
另外，在控制項尺寸上也應該像Native App那樣提供盡量大點擊區域的控制項。參照經驗和各平台的官方人機界面指南，可以知道適合用戶手指點擊的尺寸應該在7-9mm之間，不能小於7mm。相鄰點擊控制項的行距不應小於2mm。
5. WebAPP後期需要針對瀏覽器進行優化
為了兼顧瀏覽器的性能和交互，需要注意以下幾點：
●頁面使用盡量少的DOM元素;
0
posted @ 2015-04-08 18:16 小強好吃 閱讀(16) 評論(0) 編輯 收藏