Web app用戶界面設(shè)計(jì)，核心是web設(shè)計(jì)；不過與一般意義上的web設(shè)計(jì)相比較，web app更加注重功能。為了在與桌面應(yīng)用程序的競(jìng)爭(zhēng)中展現(xiàn)其優(yōu)勢(shì)，web app需要提供簡(jiǎn)潔、直觀、快速響應(yīng)的用戶界面，以便于用戶在任務(wù)操作中節(jié)省精力和時(shí)間。

例如下面的2個(gè)優(yōu)秀的webAPP設(shè)計(jì)界面，都是可以通過html5來實(shí)現(xiàn)。

下面25學(xué)堂收集了張劍宇老師在百度移動(dòng)開發(fā)者峰會(huì)上的基于基于Flex的Web App設(shè)計(jì)知識(shí)視頻。希望大家有空看看，以便于更好的了解WebApp設(shè)計(jì)知識(shí)視頻課堂—Flex移動(dòng)布局。

今天25學(xué)堂也跟大家來聊聊webAPP設(shè)計(jì)的一個(gè)重要的知識(shí)點(diǎn)：Flexbox

Flexbox(伸縮布局盒) 是 CSS3 中一個(gè)新的布局模式，為了現(xiàn)代網(wǎng)絡(luò)中更為復(fù)雜的網(wǎng)頁需求而設(shè)計(jì)。

這里需要給大家提供2個(gè)非常棒的學(xué)習(xí)資源教程：

1、w3school學(xué)院（http://www.w3school.com.cn/cssref/pr_box-flex.asp）

2、一個(gè)完整的Flexbox指南教程：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ?（英文版）

http://www.w3cplus.com/css3/a-guide-to-flexbox.html （中文版）

3、flex實(shí)戰(zhàn)演練教程—逆天的FLEXBOX布局備忘單

http://www.gbtags.com/gb/share/2437.htm

另外一種技巧：百分比+flex布局。

百分比是什么？其實(shí)就是利用標(biāo)簽里面的內(nèi)容自動(dòng)撐開，再利用margin,padding百分比來固定div的內(nèi)容，這樣做的好處在不同的設(shè)備，div的margin和padding也是成比例出來顯示，如果用px的話，你就得寫很多@media?screen 來設(shè)置不同的樣式。

我們只需要header mainer footer 的寬設(shè)置100%和圖片寬設(shè)置100% ，不用設(shè)置高，

如果文本間上下間距不夠，我們可以line-height來撐高讓文字顯得不那么擠

然后就是最強(qiáng)大碉堡的display:flex的出現(xiàn)。

之前25學(xué)堂介紹的一個(gè)學(xué)習(xí)webAPP的好地方：

非常有用的HTML5+CSS3資源靈感酷站codrops