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