從去年開始就負(fù)責(zé)公司W(wǎng)ebApp的產(chǎn)品跟設(shè)計工作，最近整體大改了兩個版本，也算累積了一些實際的經(jīng)驗。在不斷學(xué)習(xí)的過程中，發(fā)現(xiàn)對于WebApp可以直接用于項目上的資料比較零碎，在這里總結(jié)一下，供初做 WebApp的設(shè)計師在實際項目中參考。

設(shè)計尺寸：基于寬度320px

一般大家看到的移動端設(shè)計尺寸參考都是基于ios或者Android，是絕對不能直接用于WebApp的設(shè)計中。而且常用的PS Play也不適用查看WebApp的效果。

WebApp本質(zhì)上還是一個網(wǎng)頁，它的尺寸（特別是寬度）是依賴于每個手機的瀏覽器。如果直接采用Native App的尺寸設(shè)計并切圖給前端同學(xué)，會導(dǎo)致圖片在瀏覽器中顯示過大，跟設(shè)計稿差別非常大。前端同學(xué)也是可以強制調(diào)整圖片大小的，但是可能會導(dǎo)致圖片壓縮拉伸，所以設(shè)計師需要給適用于手機瀏覽器尺寸的素材。

介紹一下我身邊手機的瀏覽器實際尺寸（高度會隨瀏覽器不同而略有差異）

結(jié)合上面的寬度，在做WebApp的設(shè)計時，需要以320px寬為基準(zhǔn)做出符合實際的設(shè)計，給出適合的素材。

這里推薦用 webflow 作為查看WebApp在瀏覽器中效果的工具，而非PS Play 。道理是一樣的，WebApp不同于NativeApp。

*更多手機瀏覽器寬度問題可參考此文章：《移動手機版網(wǎng)頁制作時頁面寬度的問題探討》

設(shè)計風(fēng)格：中立，而非模仿NativeApp

這里只是我個人的意見（前端同學(xué)實際coding也提出這樣的建議）。WebApp是可以運行在各種系統(tǒng)里的，試想一個Android的瀏覽器上開著著ios7風(fēng)格的網(wǎng)頁，感覺非常違和（這里就不吐槽各種亂抄的app設(shè)計）。所以盡量保持中立，做符合產(chǎn)品本身定位的設(shè)計。

感謝 Google Design ,讓跨平臺的WebApp有一個比較權(quán)威的設(shè)計標(biāo)準(zhǔn)參考。這里我贊同NovaDNG同學(xué)對于Material Design翻譯：“原質(zhì)設(shè)計” ，而非什么材料設(shè)計，有興趣可以看一下他在Android Day上的 ppt 《Designing Material》。

動效兼容性：Android是兼容性殺手

華麗麗的動效已不再是ios的專利了，各種js都能實現(xiàn)同樣的效果。要注意的是一些js在Android里得不到很好的支持。

我習(xí)慣要做某種效果的時候會先找一下實現(xiàn)的方案，供前端同學(xué)參考。建議要做非原創(chuàng)動效的時候，先去找一下demo，在手機上跑跑看看，如果是在github上，一般會有兼容性提示。如果出現(xiàn)兼容性不好的問題，設(shè)計師需要平衡整體與細(xì)節(jié)的權(quán)重，在沒有找到好的解決方案的時候，需要適當(dāng)放棄一些動效。

例如最近做的一個效果用了headroom.js,用于Tab向下滾動消失 向上滾動出現(xiàn)。這個用到的requestAnimationFrame,基本已經(jīng)放棄了大部分的Android瀏覽器。還好最后還是找到的解決方案，讓中高版本的Android效果可以實現(xiàn)，低版本的只能放棄不實現(xiàn)了。

IconFont：省時又省力，擴展性好

以前實現(xiàn)各種小icon顯示會用雪碧圖，如果icon發(fā)生變化，就需要設(shè)計師再次修改，比較麻煩。用IconFont就一次性搞定，把icon做成字體，不需要加載額外的圖片、解決了圖片放大縮小模糊的問題，顏色修改也是只是一個值的變化。

根據(jù)我實際使用的經(jīng)驗來說，找IconFont最好去阿里的www.iconfont.cn/，而且這里也有制作iconfont的教程，如果第一次接觸svg、iconfont之類的這里介紹還是非常清楚的。做IconFont最好去http://icomoon.io/，免費版已經(jīng)可以滿足一般人的需求了，而且上傳下載非常穩(wěn)定（阿里的那個經(jīng)常上傳有問題，非常頭痛）。 *icomoon免費版你的iconfont資料是存在瀏覽器緩存中的，如果你換臺電腦或者清空緩存，iconfont就會消失。

IconFont也是有缺點的，例如在Android低版本的兼容性不太好，無法做到豐富多彩的icon。所以如果有特殊的需求，設(shè)計師可以單獨做圖片icon，而一般性的icon建議做成IconFont。

圖片大?。罕ＷC清晰度前提下，越小越好

這不光是WebApp需要注意的問題，移動端app都需要注意。如果用手機流量，隨便開個網(wǎng)頁，圖片比較大加載速度就比較慢而且很耗流量。這里前端或者服務(wù)器都會壓縮圖片，但是設(shè)計師也需要注意這些。而且要說明非必要，盡量減少圖片的使用，例如一個圈圈或者四邊形，這個前端都是可以實現(xiàn)的，代碼實現(xiàn)會使網(wǎng)站的打開的速度更快。

我常用壓縮圖片的工具有compress png,它可以切換壓縮png或者jpeg，同時也有對比原圖和壓縮圖，在設(shè)計師自己可以接受的程度里面，選擇合適的壓縮比例。

來源：ui中國