WebApp 设计要素

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

从去年开始就负责公司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中国

您的赞赏,是对我创作的最大鼓励。

评论( 0

登录后参与评论
加载中