从微信网页设计样式库看未来应用形态

从微信网页设计样式库看未来应用形态_第1张图片
WeUI

微信在 2016 年 1 月 20 号正式发布“微信网页设计样式库”(WeUI),向“微信应用号”又迈进一步。本文分为两部分,前半部分简明扼要提一下 WeUI 使用方法和第三方库;后半部分分析 WeUI 发布的目的,以及对不久的将来的三个预见。

微信网页设计样式库(WeUI)使用扼要

微信网页设计样式库的目的:

为帮助网页开发者实现与微信客户端一致的视觉体验,并降低设计和开发成本,微信团队推出了网页设计样式库:WeUI。

包含的内容:

该样式库目前包含 button (按钮)、cell (单元格)、toast (浮层提示)、dialog (对话框)等网页常用的各式元素,并已在 GitHub 上开源。

点击查看:

  • DEMO 演示
  • 开发者文档

简单的说,WeUI 的核心是一套样式表(weui.css),目的是规范微信 webapp (可以扩大一点说是网站)的 UI 组件设计,方便前端工程师快速开发,以此为即将到来的微信 webapp (应用号?)打基础。

使用方法只要三步:

  1. 根据文档说明,下载 WeUI 库。
  2. 在页面中引入 weui.min.css 文件。
  3. 从官方 demo 中拷贝需要的功能组件代码到自己页面即可。

对前端工程师来说应该没有难度,对前端工程师之外的人群只需要知道 WeUI 是干什么的就可以。

示意图较长,为不影响文字阅读放在文章末尾。:)

WeUI 扩展和第三方库

  • sketch uikit:ZTfer/weui-sketch

  • ui library:Eric-Guo/weui-rails(Using kevyu/weui-sass)

  • sass:kevyu/weui-sass

  • jquery:lihongxun945/jquery-weui

  • react:weui/react-weui
    n7best/react-weui

  • vue:aidenzou/vue-weui
    adcentury/vue-weui

未来 - 1:前端工程师的春天

微信应用号即将到来,开发应用号将会是一块大蛋糕,随之而来的是职场对前端工程师的需求增加,未来一段时间前端可能会变成更热门的职业。

为春天做准备:开发 webapp,学习后台知识。

随着移动端设备使用量逐渐上升,前端逐渐向移动端转移,从微信官方率先开发 react-weui 看,微信最看好的移动前端框架很可能是 react。前端工程师可以针对性地学习一些热门移动前端框架,如 react,ionic,bootstrap... 移动前端入门可以看以前写的一篇文章:移动前端基础

前端会后台已经逐渐变成硬需求,前年 BAT 前端的招聘需求还只是要求熟悉后台,去年的招聘面试就开始考查后台知识了。

未来 - 2:webapp 的春天

微信的最终目的应该是想打造一个 webapp 平台,估计许多家互联网公司也在竞争吧,webapp 平台最终的赢家是谁还很难说。

但是有一个点是可以肯定的:webapp 迎来了春天。想比起原生 app,webapp 的优势很早就被挖掘出来,但是由于接口、安全性、耗电、用户体验方面的缺陷,有人看好有人看坏。具体讨论看知乎。

个人的看法是一些涉及安全性的原生 app 将会被保留(如支付宝),大部分现有的原生 app 将会向 webapp 转移。因 webapp 占用空间远小于原生 app,将来的手机存储分级(16G, 64G, 128G...)可能失去意义。

未来 - 3:微信应用号应该快来了,但是不会完全按照微信的预期走

从最早的微信 JS-SDK 到后来张小龙说的“应用号”,再到刚发布的 WeUI,都能看到微信一统江湖的决心。但是事情可能不会这么顺利,Google 很早就开始开发 polymer,不仅想要搭建 web app 平台,还有将 web 做成系统的野心。

除了竞争对手之外,还有技术问题,一个比较简单的问题就很难解决:移动端浏览器提供了“安装到桌面”选项,这样安装的 webapp 可以直接从移动端桌面直接启动;而微信中的应用号需要多一个层级,先进入微信才能进入。当然啦,这么粗浅的问题微信 PM 肯定能考虑到,至于怎么绑定用户到微信应用号上,我们拭目以待吧。:)

转载请加原文链接及署名作者为Hongyang Wang。欢迎关注微信公众号 MRWHY,聊 WEB,聊 AI。

从微信网页设计样式库看未来应用形态_第2张图片

附:WeUI 设计稿,来自ZTfer/weui-sketch,侵删。

从微信网页设计样式库看未来应用形态_第3张图片

从微信网页设计样式库看未来应用形态_第4张图片

从微信网页设计样式库看未来应用形态_第5张图片

从微信网页设计样式库看未来应用形态_第6张图片

从微信网页设计样式库看未来应用形态_第7张图片

从微信网页设计样式库看未来应用形态_第8张图片

从微信网页设计样式库看未来应用形态_第9张图片

从微信网页设计样式库看未来应用形态_第10张图片

从微信网页设计样式库看未来应用形态_第11张图片

从微信网页设计样式库看未来应用形态_第12张图片

从微信网页设计样式库看未来应用形态_第13张图片

2016-02-13 13:07

10

分享本文:


进成都城(下)- 逛吃逛吃逛吃逛吃

喜欢
最新最早最热
0条评论

还没有评论,沙发等你来抢

帐号管理
why先森王洪阳

why先森王洪阳

发布

I AM Mr.Y正在使用多说

Hongyang 的朋友们: 曾晨/龙方正/呆兄/茂盛/冰涛/蓓蕾酱/骚盆/子怡/乐高*/ *孙俊
theme by Cola Chan - powered by farbox

你可能感兴趣的:(从微信网页设计样式库看未来应用形态)