本文摘自 勾三股四 更早时期的 不老歌 博客。

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幻灯片系统

* 带有交互性的演示
* 小巧轻便、易于分享和传播
* 跨平台
* 可扩展
* 可融入其它的软件和系统

希望重新定义幻灯演示

欢迎加入我们的行列！

迎接挑战吧！

THANKS & QA