WebApp时代的界面布局浅析(我在WebReBuild.ORG第五届年会北京站上的主题分享)
本文摘自 勾三股四 更早时期的 不老歌 博客。
在线幻灯片地址：
http://jinjiang.github.com/slides/think-about-webapp-layout/
说明：如果您使用的是文艺浏览器，那么您使用的是普通浏览器或XX浏览器，则幻灯片的内容会以普通网页的方式呈现。
下面是内容摘要：
WebPage时代的布局
WebPage
* 其功效集中在内容的展现* 多以文档形式存在
* 流式布局
常见的WebPage布局
* 页眉
* 横向导航
* 侧边导航
* 正文内容
* 页脚
Beautiful HTML Code
* http://css-tricks.com/121-what-beautiful-html-code-looks-like/
经典案例：新闻、博客
WebPage++时代
不同之处：* 谋求更丰富的交互
* 谋求更灵活的布局
* 谋求更开放的版式
比如：
* 大量的交互性元素
* 对操作的集中控制
* 更复杂的交互逻辑
从界面的角度看：
* 围绕着内容发展出了各种各样的按钮和浮层
* 出现了控制面板和工具条
* 出现了复杂的交互
* 内容由静态转为动态，信息越来越多
* WebApp的影子开始浮现
典型的例子：微博、SNS
WebApp时代的到来
什么是WebApp？两条线索：* 能够取代传统应用程序
* 运用了大量的HTML5技术
经典的案例：Google Apps、iCloud.com
更多的WebApp：http://web.appstorm.net/
界面布局正在悄然改变……
WebPage
* 内容 → 网页 → 浏览区域WebApp
* 内容 → 可视区域WebPage vs. WebApp
WebPage* 网页好比一张长长的画卷，
* 浏览器犹如放大镜，
* 浏览网页，好比用户那着放大镜看画卷的局部
WebApp
* 浏览器如观光玻璃，
* 内容如流水一样，浩瀚、灵活，
* 用户在水族馆里观赏风景
回归到界面的本质
* 直接根据可视空间设计界面* 解放思想，解放生产力
换个角度考虑界面布局
以可视空间为本 →如何充分利用有边界的可视空间？ →
填满可视空间先…… →
开始各种探索、思考、纠结……
这时，我们不妨从传统应用程序的界面中开拓视野，找寻灵感💡
找了几个别的领域的前端技术
介绍几种界面布局的思路* WPF (Windows Presentation Foundation)：是微软推出的基于Windows Vista的用户界面框架，属于.net的一部分
* Cocoa：苹果公司为Mac OS X所创建的原生面向对象的编程环境
* HTMLayout：一个免费的开源界面库(核心未开源)，以DLL的方式运行，可以高效的解析和渲染HTML网页，并根据界面库的特征，做了很多有用的功能性扩展。傲游3浏览器的界面就是基于HTMLayout设计和开发的
WPF
* StackPanel：朝一个特定的方向(横向或纵向)，依次排列子元素* WrapPanel：在 StackPanel 的基础上，可以允许子元素自动折行
* Grid：网格式布局，可设定一共几行几列，和每行的行高、每列的列宽
* DockPanel：把界面分成上、下、左、右、中间5个部分
Appkit (Cocoa)
坐标、尺寸及其自动调整的方式
一些特定界面元素
* Toolbar：一种特定的布局方式，只能出现在窗口的最上部。子元素从左到右排布，可以放置按钮、输入框，也可以放置“可无限撑大”的空白区域，将其右侧的子元素挤到工具栏的最后边* Menu：菜单栏，永远在屏幕的最上面
更多子元素的内部布局
* TableView* OutlineView
* CollectionView
更复杂的界面布局都需要通过代码来实现
HTMLayout
height: 100%
* 可以让元素撑满整个窗口的高度* 传递很明确的信息：——应用程序的界面是有固定高度的
新长度单位：%%
* 在剩余的总长度中选取相应比例的长度，相当于WPF中的*单位* http://www.terrainformatica.com/htmlayout/fspu.whtm
新布局方式：flow
* vertical | horizontal | vertical-flow | horizontal-flow | grid* 前四个相当于WPF中的StackPanel和WrapPanel，分横向纵向两个方向
* 第五个相当于WPF中的Gird
* http://www.terrainformatica.com/htmlayout/flow.whtm
其它
* calc(...) 长度计算函数：http://www.terrainformatica.com/htmlayout/csss!-calc-function.whtm
* Flex 布局 / min-intrinsic / max-intrinsic：http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm
更多：http://www.terrainformatica.com/htmlayout/
HTMLayout 实践
* 傲游3浏览器皮肤系统* 大量的素材、文档、源代码
* 首页 → 傲游实验室 → 皮肤系统：http://www.maxthon.cn/lab/skin/
简单回顾一下
* 从 NativeApp 得到的启发流式布局其实很棒
* 遭遇了流式布局缺失的界面库，才懂得流式布局的强大！* 流式布局想垒积木一样灵活，非常适合功能性界面
DockPanel 式布局很讨喜
* 较为复杂的应用程序几乎都可以从DockPanel作为界面布局的起点绝对定位应用最为广泛
* 在较为简单的界面中，绝对定位是最直观、成本最低的方式* 可以很好的配合所见即得编辑器进行布局
绝对定位可能面临的问题
* DPI的改变* 多语言环境等
建议
* 给每个元素保留足够的余地，以应付内容变化
* 从排版上尽量回避由于文字长短、多媒体元素尺寸大小造成的布局混乱
* 推荐：《Flexible Web Design》Zoe Mickley Gillenwater (加)
几个WebApp的“好朋友”
box-sizing
* 可以选择根据边框、内边距或实际内容计算盒模型，适用于边框大小、边距大小会动态变化的元素* http://www.w3.org/TR/css3-ui/#box-sizing
background-origin (-clip)
* 可以选择根据边框、内边距或实际内容计算背景图片的坐标起点和覆盖区域，同样适用于边框大小、边距大小会动态变化的元素* http://www.w3.org/TR/css3-background/#the-background-origin
* http://www.w3.org/TR/css3-background/#the-background-clip
绝对定位
* 快速定位一个元素在窗口中的位置和大小，适用于尺寸需要根据窗口变化而变化的元素display: box / flex-*
* 类似 grid 的布局，可以让若干子元素，通过具体长度或长度比例，撑满整行/整列容器空间，但它是单行或单列的，并没有网格形式，适用于工具栏等元素，以及界面上大块的布局划分* http://www.w3.org/TR/css3-flexbox/
transform (-origin)
* 等比例伸缩盒模型中的几乎一切内容，适用于尺寸需要等比例变化的展示性元素* http://www.w3.org/TR/css3-2d-transforms/
grid
网格化布局，从设计的角度看，非常实用* http://www.w3.org/TR/css3-grid-layout/
media queries
通过不同的界面尺寸，应用不同的CSS样式* http://www.w3.org/TR/css3-mediaqueries/
multi-column / regions
* 两者均属于对于界面布局细节的雕琢1. 分列显示大块内容 (demo)
2. 打破“矩形盒子”的限制，在高度自定义的一个或多个区域内填充内容
* http://www.w3.org/TR/css3-multicol/
* http://www.w3.org/TR/css3-regions/
参考资料
* w3c官网 - CSS：http://www.w3.org/Style/CSS/current-work* win8 html5 platform 展示页：http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/
* HTML5 Rocks：Tutorials：http://www.html5rocks.com/en/tutorials/
* 前端观察：http://www.qianduan.net/
其实，这张幻灯片也是一个WebApp！
HTML5幻灯片系统
传统PPT* 太过笨重
* 很多冗余的功能和设计
* 只有一张空白幻灯片的pptx文件也有几百行代码
* 大部分的Powerpoint功能我们根本用不到
HTML5幻灯片系统
* 带有交互性的演示* 小巧轻便、易于分享和传播
* 跨平台
* 可扩展
* 可融入其它的软件和系统