可以隨身攜帶，是移動(dòng)設(shè)備具備的優(yōu)勢，雖說“隨身攜帶”跟設(shè)計(jì)本身并無太多關(guān)系，但想想我們的設(shè)計(jì)又的確是大家隨身攜帶的，心里不禁有點(diǎn)暗自竊喜，同時(shí)，也因此對移動(dòng)設(shè)備的產(chǎn)品設(shè)計(jì)的要求會(huì)更高，因?yàn)榉彩谴蠹译S身攜帶的東東，必然是大家日常所必需、所鐘愛、或者常用的，自然對這些東東的要求就會(huì)更高，希望它能夠彰顯自我的。所以，做隨身攜帶的設(shè)計(jì)其實(shí)更難。
說到手機(jī)瀏覽器，從preview到 beta1版本發(fā)布，到目前即將出爐的beta2版本，已經(jīng)做了近一年的時(shí)間，個(gè)人感覺麻雀雖小，五臟俱全，手機(jī)軟件看起來很小，其實(shí)做起來復(fù)雜程度一點(diǎn)都不亞于pc端的軟件產(chǎn)品，或者更甚，跟進(jìn)期間遇到了不少問題，同時(shí)也積累了一部分經(jīng)驗(yàn)，下面主要通過幾個(gè)典型案例和設(shè)計(jì)過程中的幾個(gè)環(huán)節(jié)的做一下簡單的分享。

問題1：視覺表現(xiàn)與開發(fā)實(shí)現(xiàn)的平衡點(diǎn)

提起移動(dòng)設(shè)備的設(shè)計(jì)，難免想起目前火熱的iPhone，微軟的windows mobile系統(tǒng)，以及很多時(shí)不時(shí)讓你大飽眼球的新穎、時(shí)尚的產(chǎn)品，其整體的印象感覺是前衛(wèi)、酷炫和充滿科技感的。

多說無宜，相信大家隨處都可以看到類似的驚艷設(shè)計(jì)，這里要強(qiáng)調(diào)的一點(diǎn)就是，手機(jī)軟件需要兼顧到多個(gè)手機(jī)操作系統(tǒng)，而目前主流的智能手機(jī)操作系統(tǒng)有很多如諾基亞的Symbian、微軟的Windows Mobile，PALM、Linux，還有Blackberry OS、iPhone OS，以及Java和MTK等等，況且每個(gè)系統(tǒng)會(huì)不斷更新升級出多個(gè)版本，比如Symbian系統(tǒng)又根據(jù)不同的硬件特性分為S40、S60、S80、S90等不同版本，這些系統(tǒng)和版本都具有不同的特性，所支持的界面表現(xiàn)也都不盡相同。所以在進(jìn)行視覺設(shè)計(jì)的時(shí)候，要對不同系統(tǒng)有所了解，不能一味強(qiáng)調(diào)視覺上的表現(xiàn)力，單純追求酷炫的視覺效果而失去了兼容性。

同時(shí)，手機(jī)軟件亦會(huì)受到硬件設(shè)備的限制。我們可以注意到不同的品牌占據(jù)了整個(gè)手機(jī)市場，其中占有率高的有諾基亞、索愛、三星、摩托羅拉，還有多普達(dá)、蘋果等后起之秀。整個(gè)手機(jī)行業(yè)更新?lián)Q代非常快，新的型號(hào)很快出來，舊的型號(hào)又不會(huì)馬上被淘汰，所以手機(jī)軟件開發(fā)還要細(xì)化到不同品牌的不同型號(hào)。

而且，要關(guān)注到產(chǎn)品開發(fā)的成本。目前QQ手機(jī)瀏覽器的開發(fā)還屬于前期階段，目標(biāo)是快速打造簡潔快速、輕便易用的手機(jī)瀏覽器，簡約的設(shè)計(jì)是與當(dāng)前目標(biāo)相符的。我們不用刻意追求外在表現(xiàn)，而是設(shè)計(jì)一款實(shí)用為主、性能第一的瀏覽器。手機(jī)瀏覽器沿用了手機(jī)QQ的界面實(shí)現(xiàn)機(jī)制，同時(shí)也因?yàn)椴僮飨到y(tǒng)的原因，現(xiàn)在還不支持半透明的效果；在質(zhì)感表現(xiàn)上，主要以單向漸變?yōu)橹鳎涣硗鈱Π惭b包的體積有嚴(yán)格的控制，盡量少的使用貼圖元素和動(dòng)態(tài)效果。

問題2：圍繞核心價(jià)值進(jìn)行設(shè)計(jì)

瀏覽器的核心功能是頁面瀏覽和內(nèi)容呈現(xiàn)，用戶在使用瀏覽器上網(wǎng)的時(shí)候，瀏覽器的任務(wù)便是對用戶查看網(wǎng)頁進(jìn)行解析并快速正確的呈現(xiàn)網(wǎng)頁內(nèi)容，而網(wǎng)頁的樣式及風(fēng)格則是網(wǎng)站建設(shè)者需要考慮的事情。這里要提到在preview版本里曾設(shè)定的手機(jī)QQ風(fēng)格的主題皮膚，其中對網(wǎng)頁瀏覽窗口的背景色也進(jìn)行了定義，即與起始頁一致的深藍(lán)色，在實(shí)現(xiàn)和測試的過程中，我們發(fā)現(xiàn)這個(gè)深色的背景影響到了部分網(wǎng)頁的瀏覽。比如，CCTV的wap網(wǎng)站使用樣式表將網(wǎng)頁文字定義為深色，在明暗度很接近的背景色值下，基本無法看清文字。因此preview版本我們暫停了該主題的實(shí)現(xiàn)，在beta2版本中我們將該主題的瀏覽窗口背景色調(diào)整為淺色。

控件設(shè)計(jì)也遇到了類似的問題，開始控件樣式是跟當(dāng)前應(yīng)用的主題風(fēng)格統(tǒng)一的，默認(rèn)藍(lán)色主題的控件是藍(lán)色的，粉色主題的控件就是粉色的，但這在通用性上就比較差，比如在一個(gè)藍(lán)色風(fēng)格的網(wǎng)頁中，想?yún)^(qū)分出藍(lán)色的輸入框就有點(diǎn)困難。因此，我們最終定義了一套通用的手機(jī)瀏覽器的標(biāo)準(zhǔn)控件，可以應(yīng)用在各個(gè)主題里面。

站在巨人的肩膀上

公司已經(jīng)有一些比較成熟的無線產(chǎn)品，如手機(jī)QQ項(xiàng)目就積累了豐富的移動(dòng)設(shè)備設(shè)計(jì)的經(jīng)驗(yàn)，在手機(jī)瀏覽器項(xiàng)目的前期我們與手機(jī)QQ項(xiàng)目的設(shè)計(jì)師進(jìn)行了多次的交流和學(xué)習(xí)，在后期的設(shè)計(jì)過程中也非常感謝他們的經(jīng)驗(yàn)分享和熱心支持。其它還有手機(jī)QQ音樂、手機(jī)QQ影院等產(chǎn)品也有值得我們學(xué)習(xí)的地方，后續(xù)我們會(huì)增強(qiáng)各項(xiàng)目間的交流和技術(shù)分享，共同提高。

多渠道的學(xué)習(xí)移動(dòng)設(shè)備相關(guān)的設(shè)計(jì)知識(shí)是很有必要的，特別推薦下諾基亞論壇(forum.nokia.com)，其中的Design and User Experience欄目中有大量的交互設(shè)計(jì)和視覺設(shè)計(jì)的文章，同時(shí)Library中的規(guī)范建設(shè)文檔也十分的全面和完善，是很好的設(shè)計(jì)參考資料。比如其中幾篇關(guān)于Vertical List、Horizontal List和Tabbed List的討論文章，就對手機(jī)瀏覽器beta2版本的起始頁的列表設(shè)計(jì)提供了很大的幫助。

還有目前比較流行的手機(jī)瀏覽器產(chǎn)品，如UCweb、Opera等，相對來講已經(jīng)比較成熟，對瀏覽器的整體體驗(yàn)已經(jīng)有很好的把握，并且吸引了相當(dāng)很多忠實(shí)用戶，我們也可以通過吸取他們設(shè)計(jì)的優(yōu)點(diǎn)來提升產(chǎn)品的體驗(yàn)。

另外，參考優(yōu)秀的手持設(shè)備軟件設(shè)計(jì)是一個(gè)很好的捷徑，正如前面所說的手機(jī)軟件會(huì)受到操作系統(tǒng)、硬件設(shè)備等的很多限制，而優(yōu)秀的設(shè)計(jì)已經(jīng)較好地避免了許多問題。

過程保證結(jié)果

手機(jī)屏幕的顯示效果與電腦屏幕的差別非常大，不同型號(hào)的手機(jī)的色差也很大，我們在進(jìn)行視覺設(shè)計(jì)的時(shí)候需要在不同手機(jī)上調(diào)試設(shè)計(jì)稿的色調(diào)和對比度，通過不斷測試保證最終的顯示效果。為了節(jié)省測試和調(diào)整效果圖的時(shí)間，這里建議使用數(shù)據(jù)線連接，這樣在pc和手機(jī)間傳輸圖片的速度會(huì)快許多，并盡量多的在不同手機(jī)上查看效果，因?yàn)楹芏嗍謾C(jī)的顏色顯示沒有達(dá)到真彩色，有些色值會(huì)不被正常顯示。

手機(jī)瀏覽器是多部門合作的項(xiàng)目，在設(shè)計(jì)過程中難免會(huì)出現(xiàn)各方面的意見分歧，通過嚴(yán)格的評審流程可以保證最終設(shè)計(jì)質(zhì)量以及合理的解決意見分歧。設(shè)計(jì)稿首先要通過設(shè)計(jì)中心的專家評審，然后在項(xiàng)目組內(nèi)進(jìn)行二次多方評審并最終確認(rèn)，最后提交開發(fā)實(shí)現(xiàn)。
為方便開發(fā)同事快速高質(zhì)量的進(jìn)行界面實(shí)現(xiàn)，以及后續(xù)功能模塊的添加和維護(hù)等工作，我們制定了需要制定詳細(xì)的規(guī)范。規(guī)范制作對后續(xù)的工作開展有著重要的意義，比如新主題的增加，界面實(shí)現(xiàn)的檢查等。

其它的補(bǔ)充

手機(jī)軟件的界面設(shè)計(jì)中要特別注意內(nèi)容、結(jié)構(gòu)的層次清晰，盡量能適合在不同場景下的表現(xiàn)，因?yàn)槭殖衷O(shè)備的特點(diǎn)就是很方便的在不同的場合使用。

手機(jī)和pc端的設(shè)計(jì)原則是共通的，關(guān)鍵是將不同設(shè)備的特性發(fā)揮出來。

手機(jī)字體相關(guān)規(guī)范還需要進(jìn)一步完善補(bǔ)充。

最后的話

手機(jī)瀏覽器項(xiàng)目對于移動(dòng)設(shè)備的設(shè)計(jì)來講，僅僅是邁出了第一步，尚有很廣闊的空間需要去拓展，對于手機(jī)軟件設(shè)計(jì)的經(jīng)驗(yàn)積累現(xiàn)在也還只是杯水車薪，要靠大家一起來補(bǔ)充，隨身攜帶的設(shè)計(jì)，我們可以讓你愛不釋手。

• (本文出自Tencent CDC Blog，轉(zhuǎn)載時(shí)請注明出處)