–如果全局導航條固定在頂端,好處是什么?——方便用戶回到頂部,方便用戶載入新信息,方便用戶切換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項目中,功能策劃以精煉為佳;信息架構需要盡可能的淺而窄;交互設計需要力求簡潔高效;視覺設計還要考慮瀏覽器這一特殊的運行環境;前端不僅需要逐步消化交互設計和視覺設計,還要在新技術新問題中大膽嘗試見招拆招。整個團隊的頻繁溝通非常有必要,開發步驟最好采取小步快跑的方式。
人力和精力有限,難免有偏頗之處,歡迎大家拍磚!期待和您一起討論這一有意思的話題。