–如果全局導(dǎo)航條固定在頂端，好處是什么?——方便用戶回到頂部，方便用戶載入新信息，方便用戶切換tabs，具有較強(qiáng)的全局控制感;
–如果全局導(dǎo)航條固定在頂端，壞處是什么?——吞噬了寶貴的信息展示空間
…………
用戶使用過程中，置頂、刷新、切換tabs的行為也是比較頻繁的行為，操作的便捷性需要保證。而固定的全局導(dǎo)航條可以滿足這個(gè)需求：點(diǎn)擊HOME鍵可以置頂并刷新，可以方便用戶切換tabs. 同時(shí)，固定的全局導(dǎo)航條可以使用戶一直明確地知道身處何處，可以去哪，給與用戶較強(qiáng)的全局控制感。
四、視覺設(shè)計(jì)：清新風(fēng)格的試驗(yàn)
負(fù)責(zé)人：視覺設(shè)計(jì)師;參與人：產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、前端工程師
網(wǎng)易微博Web app的視覺風(fēng)格的確定是經(jīng)過多角度探討的：
1.要不要和網(wǎng)易微博本地客戶端的色調(diào)保持一致?
產(chǎn)品在不同平臺(tái)上需要保持一定的一致性，顏色風(fēng)格也是形成產(chǎn)品氣質(zhì)的重要組成，那我們需要使用與網(wǎng)易微博本地客戶端相近的皮膚嗎?網(wǎng)易微博本地客戶端的主色調(diào)是紅色。
分析如下：
–使用該紅色的好處是：比較強(qiáng)的產(chǎn)品一致性;紅色形成的產(chǎn)品氣質(zhì)比較“精神“。
–使用該紅色的壞處是：紅色區(qū)域與微博內(nèi)容相比略微搶眼，“沉浸式閱讀”比較難以實(shí)現(xiàn);
通過safari瀏覽器使用網(wǎng)易微博Web App，最終的視覺效果與本地客戶端還有一個(gè)區(qū)別是，瀏覽器工具欄一直占據(jù)著屏幕的底部一行空間。紅色屬于比較“喧囂”的顏色，瀏覽器的工具欄藍(lán)灰色相對(duì)“沉靜”。這兩種顏色巨大的差距造成眼鏡極度不適。
綜合以上分析，沿用本地客戶端的紅色不太適合。
2.Safari瀏覽器內(nèi)運(yùn)行的影響?
網(wǎng)易微博Web App是從safari瀏覽器中運(yùn)行和展示的，這是該產(chǎn)品的環(huán)境之一。網(wǎng)頁給人“輕盈精簡(jiǎn)”的感覺，本地客戶端給人“厚重恒穩(wěn)”的感覺。
因此，視覺風(fēng)格“輕量化”是個(gè)不錯(cuò)的選擇。
3.當(dāng)前的視覺風(fēng)格趨勢(shì)
由Metro UI和Google+引領(lǐng)的“小清新”風(fēng)格，成為一股不小的視覺風(fēng)格發(fā)展趨勢(shì)。精致繁復(fù)的視覺經(jīng)歷一段時(shí)間后，返璞歸真，開始流行簡(jiǎn)潔清新的視覺風(fēng)格。
于是，視覺設(shè)計(jì)師經(jīng)過幾次視覺嘗試，包括紅色、酷黑色、清新淺芐?而設(shè)計(jì)是將這些技術(shù)可能性塑造成型的模具。
2、產(chǎn)品經(jīng)理、交互、視覺、前端及時(shí)頻繁的溝通
整個(gè)項(xiàng)目中，產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、視覺設(shè)計(jì)師、前端工程師每周開一個(gè)碰頭會(huì)。后期證明，這種頻繁的溝通大大減少了返工率，提高了開發(fā)效率。
3、小步快跑，注重迭代。
網(wǎng)易微博產(chǎn)品比較復(fù)雜，加之HTML5開發(fā)進(jìn)度比較慢，人力有限，不可能全部功能細(xì)節(jié)同時(shí)做完上線。否則后期調(diào)試就要一個(gè)月的時(shí)間，為產(chǎn)品的快速發(fā)展增加沉重的負(fù)擔(dān)。因此，第一期只做最核心功能成為必然選擇。
二、用戶體驗(yàn)方面的經(jīng)驗(yàn)
1、導(dǎo)航系統(tǒng)更適合在屏幕頂部。
瀏覽器的工具欄一直存在，致使tab導(dǎo)航欄已經(jīng)不適合固定在屏幕底部，頂部更加適合。
2、便捷性更加重要，將最常用的功能巧妙的設(shè)置。
產(chǎn)品性能和瀏覽器性能的原因，目前的Web App流暢度和跳轉(zhuǎn)速度還是不能與Native App相媲美，跳轉(zhuǎn)成本稍微大一點(diǎn)。所以需要將最常用功能與用戶靠的更近一些，減少跳轉(zhuǎn)帶來的等待成本。
3、視覺稿在美觀與簡(jiǎn)潔之間權(quán)衡，絕大部分的視覺稿需要使用代碼實(shí)現(xiàn)。
幾乎所有的視覺都是通過代碼實(shí)現(xiàn)，視覺設(shè)計(jì)最好不要過于繁復(fù)。前端工程師對(duì)視覺稿的消化也是需要時(shí)間的。
三、技術(shù)實(shí)現(xiàn)方面的理解
1、Safari瀏覽器的權(quán)限限制，Web App尚不能調(diào)用照相機(jī)工具、不支持圖片上傳功能。
這是一件很頭疼的事，也是很無奈的事。iOS系統(tǒng)給與Web App的權(quán)限太低了。相比之下，Android 系統(tǒng)的Web App就可以調(diào)取照相機(jī)控件，也支持微博圖片上傳功能(不過現(xiàn)在還沒有開發(fā)Android版本)。
2、過場(chǎng)動(dòng)畫還實(shí)現(xiàn)不了如本地客戶端的流暢效果。
原因有：好的過場(chǎng)動(dòng)畫會(huì)蠶食產(chǎn)品的性能;HTML5技術(shù)還不是那么完善和成熟;現(xiàn)在還缺乏一款強(qiáng)有力的瀏覽器。
小結(jié)
除了iOS系統(tǒng)的權(quán)限問題，Web App的優(yōu)秀表現(xiàn)已經(jīng)接近Native App了。HTML5技術(shù)給與了wap網(wǎng)頁新的生命，為wap帶來了顛覆性的變革。在HTML5項(xiàng)目中，功能策劃以精煉為佳;信息架構(gòu)需要盡可能的淺而窄;交互設(shè)計(jì)需要力求簡(jiǎn)潔高效;視覺設(shè)計(jì)還要考慮瀏覽器這一特殊的運(yùn)行環(huán)境;前端不僅需要逐步消化交互設(shè)計(jì)和視覺設(shè)計(jì)，還要在新技術(shù)新問題中大膽嘗試見招拆招。整個(gè)團(tuán)隊(duì)的頻繁溝通非常有必要，開發(fā)步驟最好采取小步快跑的方式。
人力和精力有限，難免有偏頗之處，歡迎大家拍磚!期待和您一起討論這一有意思的話題。
網(wǎng)友點(diǎn)評(píng)
精彩導(dǎo)讀
科技快報(bào)
品牌展示