Amaze UI 2.2

AmazeUI

简单好用的前端框架

Imagining Amaze UI Next: Amaze UI Mobile

amazeui 2015-06-03

Amaze UI React 版本开发(移植)主体已经完成,剩下的只是细节完善和 Bug 修复,是时候对下一阶段的方向做一下思考。

现状


Amaze UI 的前身是公司内部为方便网站适配编写的一些列移动端组件(官网上 「Web 组件」栏目),后来扩充了一些 CSS 组件和 JS 插件并开源,然后从 Zepto 转向 jQuery,发展成为现在的 Amaze UI。

一款带着内部定制烙印的产品,转为面向公众后,由于需求的差异性,一些问题就显现出来了。

功能不足与功能过剩

Amaze UI 以满足轻交互、展示性响应式页面需求为原则设计,对这种类型的页面开发自然顺风顺水,但对于其他场景则会比较纠结:

  • 交互较复杂的(如管理后台)应用场景不够用。Amaze UI 部分 JS 插件功能相对简单,对于更复杂的需求,用户需要编写更多的代码来实现。对于这个问题,我们选择融入 jQuery 生态圈,以样式 AMUI 化、不动 JS 代码、独立成项的形式,让一些很有代表性的 jQuery 插件能和 Amaze UI 一起使用。在不破坏设计原则、不增加需求相对简单用户负担的前提下,满足更复杂的使用场景。我们会延续这个思路解决「不够用」的问题,继续探索 CSS 依赖管理问题,提高用户使用便利性
  • 功能过剩。Amaze UI 说不上庞大,但也五脏俱全,对于一些只面向移动端的需求,显得有些臃肿,不够纯粹;基于 jQuery 也让对代码体积敏感的用户嘘嘘不已。功能不够可以加,但是要做减法,尤其是削减 jQuery 这个基础依赖并不太现实,因此,才会萌生独立出一个完全面向移动端的项目的念头。

内部使用遗留问题

  • 所谓主题,只是针对单一组件的实现,并非整体的实现,简单的样式变化增加了代码量,但对外部用户可能意义不大,提供基础的默认样式 + 良好的样式扩展接口对于可能更好的选择;
  • 不适用于 SPA。对于传统的服务器渲染方式,Amaze UI 工作得很好,但对于日趋流行的 SPA,使用时会有一些问题,比如需要手动初始化插件等。React 版本能有效解决这一问题,但仍然逃不过移动端使用略显臃肿的问题。在交互方式上,SPA 局部刷新(某个容器)和传统 Web(基于 window)也会有一些区别,实现方式和性能优化方式也会有差别。

基于以上问题,才有了独立出一个完全面向移动端的 Amaze UI Mobile 的想法。

Amaze UI Mobile


应用场景

  • 开发原生 App,需要快速出代码级别的交互原型。

    A prototype is worth a thousand meetings.

  • 移动营销快速搭建移动站点:
    • 响应式网站 PC、Mobile 关联,牵一发动全身,无法根据营销需求进行大规模、快速调整;
    • 有的 PC 站过于庞大,做响应式不现实;
    • 没有 PC 站,就是单纯做移动站。
  • 基于BaaS 或者第三方 API,做一个有趣的应用,不需要后端;
  • Hybrid App,不可能把一个臃肿、低效的响应式的网站打包进 App;
  • ……

设计原则

  • 只是 UI(View);
  • 向下兼容不是首要目标;
  • 一切从简,但提供良好扩展接口;
  • 考虑服务器端渲染的情形(为爬虫提供内容)。

技术架构

  • 基于 React 开发,不依赖 Zepto 等 DOM 操作库,可能的使用方式:
    • React + react-router + Flux
    • React + Backbone
    • React + Angular
    • React + Meteor
  • 使用 Sass?Less 松散的语法、容易上手,但是编程能力很鸡肋。
  • 使用 Flexbox 布局;
  • 沿袭现在的 UI 风格(参考微软 UWP 设计指南):我们不再需要一个 Framework7,也不再需要 Material Design 的 UI 移动框架;不要带有过多的系统痕迹。

组件规划

  • 适用于移动端的超轻量网格系统
  • Button
  • Header 页头
  • Titlebar 标题
  • List:展示功能、过滤同能
  • Tapbar 底部工具栏
  • Form
  • 图片查看
  • Icon: 寻找更小的 Font Icon,FontAwesome 对于移动端有些大
  • Modal
  • Slider
  • Tabs

待调研、补充、完善。

各位看官有何想法?欢迎交流




发表评论

*

×
Amaze UI 微信
在微信上关注我们