微信小程序将给设计行业带来这样的巨变!(附小程序设计规范标准

2017年1月9日凌晨12点后,微信小程序悄悄的低调上线。用张小龙说的话“微信小程序是什么?微信小程序,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。”

用户目前只需要通过最新版本微信搜索“微信小程序示例”就可以找到小程序的插件。

到现在小程序才上线18小时,大家都已对于微信的这一功能进行了体验,而且也有了自己的见解。

小嘿也使用了一下小程序,有如下几个感受:

1.快:真正的用完即走。

2.净:界面很简洁,看上去很舒服,不会有各种APP乱七八糟的感觉,也不会给你随意弹送广告。

3.省:原本以为使用小程序会很费流量,没想到比很多原生app还要省流量。而且不用下载,只需添加即可。

刚刚看到朋友圈有个好友说:使用了一下小程序后,已经删除了几个app。

这就是小程序的魅力,简洁,方便,不随意弹出消息。已经类似于轻APP的性质了。在不久的时间里,小程序应该会有一个大爆发。一部分的APP将会被取代。这样就引发了一个思考,会不会在不久的将来,移动端UI设计师的需求会越来越大,可对于设计师的要求也相应的会越来越高。

那小程序的出现

对于设计师的我们会有什么影响呢?

1、统一的布局和描述方式,会使全栈设计师会越来越多

微信小程序统一的web及app的结构布局及样式设计语言,会大大降低前端设计的学习门槛。未来,具有优秀的设计理念及精通响应式网页设计、app UI及交互设计的全栈设计师会越来越多,同时也会对设计师岗位要求越来越高。

2、设计即开发- 设计直接交付成为可能

做为前端设计师可能都有这样的感受,通过PS、AI出设计稿,用Principle、Flinto做高保真交互原型,效果很棒,但真正开发出来,与设计稿相去甚远,除了客户及老板的无节制改稿外,其实有两个主要原因是目前设计流程的弊端:

一是静态化设计方式:PS、AI无法呈现多尺寸屏幕适配,设计视角被局限,无法便捷地在动态环境下修正设计。

二是不能做到设计直接交付:设计稿的最终呈现由程序员写代码开发,既不能保证最终设计的还原,也带来了大量的沟通成本和UI开发成本。设计直接交付,是指设计稿直接可用于业务开发,UI及视觉交互层由设计师直接完成,设计即开发。程序员在此基础上仅完成业务逻辑及动态数据的开发。

现在,随着Html、css做为web、app及微信小程序的结构样式设计语言,可视化设计工具会更加容易实现跨平台的设计直接交付。

3、Html、css 会成为更多领域的设计语言及规范

基于“微信小程序”的开发原理,HTML5和JS,移动端UI设计师(懂前端知识,了解HTML5)人才将会很抢手,大家可以储备一些了,赶紧善待你们公司的前端人员吧,行情来了。

特别对做UI设计的同学说几句,“小程序”的开发需求绝对会迎来爆发式的增长,机会会更多,如果你现在还没做过移动端的设计,不了解移动端的规范,那就要自己多学习下,做些案例练习,在新机会面前,自己要线准备好才行。

目前已经在做移动端的童鞋,相信你们的新任务即将下达,来来来,咱公司也做个“微信小程序”吧。设计师线出个图撒!

4、技术驱动时代的设计缺失

随着信息技术的发展及不断渗透,越来越体现出技术驱动的社会发展脉络,互联网技术及应用的发展,已带来了广告、出版传媒等众多行业的天翻地覆的变化,设计领域也同样显示出技术驱动的特征。

但这些还远远不够,相较于平面设计领域近100年历史的平面构成理论以及近60年的网格设计理论,在信息时代还未出现同等份量的设计方法理论体系,当然,也有很多像IDEO这些相信设计改变一切的具有使命感的设计机构在做出自己的努力。

所以,作为设计师,更应该多学一些技能,所谓技多不压身。只在一个方向上钻牛角尖固然可能取得较高造诣,然而万一风向变了,依靠一个人的力量逆势而为是收益非常低的事情。

现在移动互联网发展到如今很庞大,涉及到的技能也越来越多,样样精通那肯定不现实,但至少应该在精通一到两个方向的基础上(比如精通视觉并且懂交互,或者精通视觉懂产品,懂运营)再多多涉猎其他领域比如了解下HTML5,不仅是对开拓自己视野有帮助,更重要的是,当行业的变动来临时,你能够全身而退。进可攻退可守,怎么玩怎么赢,那会是多么好的光景啊!!!

为方便设计师进行设计,微信提供一套可供Web设计和小程序使用的基础控件库;同时提供方便开发者调用的资源。预览地址:https://weui.io

小程序的设计规则标准

1.字体规范

常用字号为20,18,17,16,14,13,11(pt),使用场景具体如下:

微信类字体的使用与所运行的系统字体保持一致,以导航为例,iOS与Android对应字体如下:

导航(iOS和Android)

字体颜色

主内容Black黑色,次要内容Grey灰色;时间戳与表单缺省值Light灰色;大段的说明内容而且属于主要内容用Semi黑;

蓝色为链接用色,绿色为完成字样颜色,红色为出错用色Press与Disable状态分别降低透明度为20%与10%;

2. 列表视觉规范

3. 表单输入视觉规范

4. 按钮使用原则

列表外按钮上文字标准按钮高度为44px下使用:

颜色#000000 / #353535 字号18pt

可点状态下文字调整透明度为60%

不可点状态下文字调整透明度为30%

列表外按钮上文字标准

按钮高度为25px下使用:颜色#000000 / #353535 字号14pt

页面线性按钮上文字标准

按钮高度为35px下使用:颜色#09BB07 / #353535 字号16pt

5. 图标使用原则

推荐100个微信小程序

(来源:亿欧集团)

设计师,你们使用小程序了吗?快留言说一说你们的体验吧!

猪八戒&嘿设汇|平面设计师闯关学习项目等你来战

近期热文推荐:

这,不就是我梦境里的家吗?

【温暖小漫画】猝不及防,一口狗粮

终于知道设计师为什么喜欢喵了.....

天呐,好烦,又忘记了App的尺寸设计规范

2017年鸡年吉祥物原来长这样!!

2017来自国际设计师们的新年祝福

设计干货源文件定期更新,

设计、招聘资讯抢先知晓!

嘿设汇APP 3.4 已上线

我来评几句
登录后评论

已发表评论数()