<b>HTML5帶來wap網頁顛覆性變革 開發實戰之網易微博</b>

作者: 來源:未知 2012-06-13 12:47:08 閱讀 我要評論 直達商品

  –如果全局導航條固定在頂端,好處是什么?——方便用戶回到頂部,方便用戶載入新信息,方便用戶切換tabs,具有較強的全局控制感;

  –如果全局導航條固定在頂端,壞處是什么?——吞噬了寶貴的信息展示空間

  …………

  用戶使用過程中,置頂、刷新、切換tabs的行為也是比較頻繁的行為,操作的便捷性需要保證。而固定的全局導航條可以滿足這個需求:點擊HOME鍵可以置頂并刷新,可以方便用戶切換tabs. 同時,固定的全局導航條可以使用戶一直明確地知道身處何處,可以去哪,給與用戶較強的全局控制感。

  四、視覺設計:清新風格的試驗

  負責人:視覺設計師;參與人:產品經理、交互設計師、前端工程師

  網易微博Web app的視覺風格的確定是經過多角度探討的:

  1.要不要和網易微博本地客戶端的色調保持一致?

  產品在不同平臺上需要保持一定的一致性,顏色風格也是形成產品氣質的重要組成,那我們需要使用與網易微博本地客戶端相近的皮膚嗎?網易微博本地客戶端的主色調是紅色。

  分析如下:

  –使用該紅色的好處是:比較強的產品一致性;紅色形成的產品氣質比較“精神“。

  –使用該紅色的壞處是:紅色區域與微博內容相比略微搶眼,“沉浸式閱讀”比較難以實現;

  通過safari瀏覽器使用網易微博Web App,最終的視覺效果與本地客戶端還有一個區別是,瀏覽器工具欄一直占據著屏幕的底部一行空間。紅色屬于比較“喧囂”的顏色,瀏覽器的工具欄藍灰色相對“沉靜”。這兩種顏色巨大的差距造成眼鏡極度不適。

  

 

  綜合以上分析,沿用本地客戶端的紅色不太適合。

  2.Safari瀏覽器內運行的影響?

  網易微博Web App是從safari瀏覽器中運行和展示的,這是該產品的環境之一。網頁給人“輕盈精簡”的感覺,本地客戶端給人“厚重恒穩”的感覺。

  因此,視覺風格“輕量化”是個不錯的選擇。

  3.當前的視覺風格趨勢

  由Metro UI和Google+引領的“小清新”風格,成為一股不小的視覺風格發展趨勢。精致繁復的視覺經歷一段時間后,返璞歸真,開始流行簡潔清新的視覺風格。

  于是,視覺設計師經過幾次視覺嘗試,包括紅色、酷黑色、清新淺芐?而設計是將這些技術可能性塑造成型的模具。

  2、產品經理、交互、視覺、前端及時頻繁的溝通

  整個項目中,產品經理、交互設計師、視覺設計師、前端工程師每周開一個碰頭會。后期證明,這種頻繁的溝通大大減少了返工率,提高了開發效率。

  3、小步快跑,注重迭代。

  網易微博產品比較復雜,加之HTML5開發進度比較慢,人力有限,不可能全部功能細節同時做完上線。否則后期調試就要一個月的時間,為產品的快速發展增加沉重的負擔。因此,第一期只做最核心功能成為必然選擇。

  二、用戶體驗方面的經驗

  1、導航系統更適合在屏幕頂部。

  瀏覽器的工具欄一直存在,致使tab導航欄已經不適合固定在屏幕底部,頂部更加適合。

  2、便捷性更加重要,將最常用的功能巧妙的設置。

  產品性能和瀏覽器性能的原因,目前的Web App流暢度和跳轉速度還是不能與Native App相媲美,跳轉成本稍微大一點。所以需要將最常用功能與用戶靠的更近一些,減少跳轉帶來的等待成本。

  3、視覺稿在美觀與簡潔之間權衡,絕大部分的視覺稿需要使用代碼實現。

  幾乎所有的視覺都是通過代碼實現,視覺設計最好不要過于繁復。前端工程師對視覺稿的消化也是需要時間的。

  

 

  三、技術實現方面的理解

  1、Safari瀏覽器的權限限制,Web App尚不能調用照相機工具、不支持圖片上傳功能。

  這是一件很頭疼的事,也是很無奈的事。iOS系統給與Web App的權限太低了。相比之下,Android 系統的Web App就可以調取照相機控件,也支持微博圖片上傳功能(不過現在還沒有開發Android版本)。

  2、過場動畫還實現不了如本地客戶端的流暢效果。

  原因有:好的過場動畫會蠶食產品的性能;HTML5技術還不是那么完善和成熟;現在還缺乏一款強有力的瀏覽器。

  小結

  除了iOS系統的權限問題,Web App的優秀表現已經接近Native App了。HTML5技術給與了wap網頁新的生命,為wap帶來了顛覆性的變革。在HTML5項目中,功能策劃以精煉為佳;信息架構需要盡可能的淺而窄;交互設計需要力求簡潔高效;視覺設計還要考慮瀏覽器這一特殊的運行環境;前端不僅需要逐步消化交互設計和視覺設計,還要在新技術新問題中大膽嘗試見招拆招。整個團隊的頻繁溝通非常有必要,開發步驟最好采取小步快跑的方式。

  人力和精力有限,難免有偏頗之處,歡迎大家拍磚!期待和您一起討論這一有意思的話題。


  推薦閱讀

  網站用戶體驗:做交互應該知道的視覺幾件事

偶爾會聽到產品經理和交互設計抱怨,視覺設計稿和最初規劃差別太大,我自己也遇到過類似狀況。究其原因,大多還是溝通中出現了問題。 有效溝通,信息的對等是很重要的。這個對等,既包括讓視覺設計盡早了解產品需求,>>>詳細閱讀


本文標題:<b>HTML5帶來wap網頁顛覆性變革 開發實戰之網易微博</b>

地址:http://www.sdlzkt.com/a/22/20120613/67463.html

頂一下

樂購科技部分新聞及文章轉載自互聯網,供讀者交流和學習,若有涉及作者版權等問題請及時與我們聯系,以便更正、刪除或按規定辦理。感謝所有提供資訊的網站,歡迎各類媒體與樂購科技進行文章共享合作。

網友點評
我的評論: 人參與評論
驗證碼: 匿名回答
網友評論(點擊查看更多條評論)
友情提示: 登錄后發表評論,可以直接從評論中的用戶名進入您的個人空間,讓更多網友認識您。
自媒體專欄

評論

熱度

主站蜘蛛池模板: 成人毛片免费在线观看| 成人免费福利视频| 欧美成人另类人妖| 成人无遮挡毛片免费看| 国产成人精品一区二区秒拍| 四虎成人精品在永久免费| 久艾草国产成人综合在线视频| 51影院成人影院| 国产成人精品曰本亚洲78| 亚洲国产成人久久一区www| 成人免费视频69| 成人午夜视频免费看欧美| 亚洲欧美成人永久第一网站| 成人无码嫩草影院| 亚洲成人自拍网| 国产成人精品a视频| 日韩精品成人一区二区三区| 国产成人精品日本亚洲专区61| 污污成人一区二区三区四区| 国产成人av在线影院| 成人免费午间影院在线观看| 久久亚洲国产成人亚| 国产成人一区二区三区| 成人午夜精品无码区久久| 亚洲欧美成人一区二区在线电影| 成人久久伊人精品伊人| 成成人看片在线| 欧美成人精品第一区二区三区 | 国产成人午夜片在线观看| 欧美成人免费一区在线播放| 69国产成人综合久久精品91| 久久久久久亚洲av成人无码国产| 亚洲欧美成人在线| 亚洲精品成人片在线观看精品字幕| 成人中文字幕一区二区三区| 日韩成人免费在线| 成人无码免费一区二区三区| 成人片黄网站a毛片免费| 激情成人综合网| 成人做受视频试看60秒| 国产成人精品久久综合|