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中国