從去年開始就負責公司WebApp的產品跟設計工作，最近整體大改了兩個版本，也算累積了一些實際的經驗。在不斷學習的過程中，發現對于WebApp可以直接用于項目上的資料比較零碎，在這里總結一下，供初做 WebApp的設計師在實際項目中參考。

設計尺寸：基于寬度320px

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

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

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

結合上面的寬度，在做WebApp的設計時，需要以320px寬為基準做出符合實際的設計，給出適合的素材。

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

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

設計風格：中立，而非模仿NativeApp

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

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

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

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

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

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

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

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

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

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

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

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

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

來源：ui中國