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

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

希望重新定义幻灯演示

欢迎加入我们的行列!

迎接挑战吧!

THANKS & QA

向本文提出修改或勘误建议