WebApp 設計要素

從去年開始就負責公司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。

圖片大小：保證清晰度前提下，越小越好

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

我經常使用壓縮圖片的工具備compress png,它能夠切換壓縮png或者jpeg，同時也有對比原圖和壓縮圖，在設計師本身能夠接受的程度裏面，選擇合適的壓縮比例。

 

來源：ui中國