客户端UI统一框架

1、 概述

1.1  问题提出

移动应用自产生之时开始，便存在跨平台的需求,目前IOS/Android/WM平台为手机的主流平台, 在我们产品做设计之前, 走了足够多的弯路:

1. 规划的时候，首先从Android入手，Android开发完毕后，再开发WindowsMobile,随后是IOS平台, 带来的问题是:关注某个平台而忽略其他平台, 导致设计上，缺乏系统考虑和整体考虑。

2.  各种平台的操作方式都不同，Android用户如果转到Android应用，由于操作不同而需要新学习成本或者代价。

3. 技术支持的成本: 需要更具不同的用户发放用户手册。需要不同的说明，一致性比较差，维护成本高。

1.2  本文的目的

l  总结UI设计的一个通用模式, 作为后续积累的一个方向

l  设计一套可以公用的UI层次结构, 方便重用(至少:低成本移植)

l  探索UI的逻辑美学

2、 UI设计准则

UI设计应该遵循什么样的准则, 才是最有效的。 甚至是否需要存在准则，都是一个问题。我们目前UI面临诸多问题。下面以现象的方式列出。

2.1  多变的UI

UI经过大的调整2次， 各种版本的调整不下百次, 调整的理由各异, 有的调整，最后又回到了最初，没有既定的规范，带来UI设计资源的严重浪费。

2.2  不可重用的UI

纵观当前的UI设计过程，UI设计的可重用性很难做到，产品的共用性没有提出来，重复设计过多，尤其在Android情况下，很多不同分辨率的设备，甚至都采用了不同的图片，这样对资源及其浪费。更不用说跨操作系统平台的环境下的UI设计了。

2.3  我的看法

1. 遵循可见度最大原则, 减少切换代价。 IOS的硬键盘个数小于Android和Windows Moble, 因此需要采用所见即所得的原则, 避免各种应用的风格不一致.

2. 页面之间尽量减少重复信息,第一页涵盖了某个信息，第二页必然不涵盖该信息。不要做重复设计

3. Layer层次不宜过多, 尽量控制在两层, 如果是三层以上, 必然是一个复杂系统，必然不可取。截止第三层。

第三点特别注意，我们要求的是缩短层次深度，附带的问题是广度提升。个人建议广度上不超过维度7, 因为这是人的记忆能力的极限。另外UI的Layer为2层，实际上数据或者逻辑可以达到6层(按照下图情形一计算得来: 每页可以显示三个深度)。刚好小于人的极限记忆能力7。（关于人的极限记忆能力，可以参考《金字塔原理》一书）

3、 具体方案

示意图: UI设计的第一层

 

4、案例分析

5、代码实现

为了避免空谈主义, 现在实现这样一个主框架, 截图如下:

已实现的主框架截图示例

说明:

1. 主框架代码, 即上中下的整体结构, 封装在: ostrichmyself_sdk_ui 这样一个Library工程中.

2. 定制化的标题, 上层导航、下层导航, 处于: NewApplication 这样一个应用工程中, 所以定制化程度会非常高, 完全满足个性化的需求. 这将成为后续自己开发的主框架

3. 该布局非常有利于PhoneGap等HTML5技术的融合, 比如网易曾经就是Native Code + HTML5的方式, 所以这个框架非常合适做这样的转型

4 代码提供下载, 可以搜索资源文件,不建议大家下载这个框架. 里面融合了太多个人的东西, 不一定适合你

未完待续