Web app用戶界面設(shè)計，核心是web設(shè)計；不過與一般意義上的web設(shè)計相比較，web app更加注重功能。為了在與桌面應(yīng)用程序的競爭中展現(xiàn)其優(yōu)勢，web app需要提供簡潔、直觀、快速響應(yīng)的用戶界面，以便于用戶在任務(wù)操作中節(jié)省精力和時間。
例如下面的2個優(yōu)秀的webAPP設(shè)計界面，都是可以通過html5來實現(xiàn)。
下面html5模版網(wǎng)(m.suosuyi.cn)收集了張劍宇老師在百度移動開發(fā)者峰會上的基于基于Flex的Web App設(shè)計知識視頻。希望大家有空看看，以便于更好的了解WebApp設(shè)計知識視頻課堂—Flex移動布局。
今天html5模版網(wǎng)(m.suosuyi.cn)也跟大家來聊聊webAPP設(shè)計的一個重要的知識點：Flexbox
Flexbox(伸縮布局盒) 是 CSS3 中一個新的布局模式，為了現(xiàn)代網(wǎng)絡(luò)中更為復(fù)雜的網(wǎng)頁需求而設(shè)計。
這里需要給大家提供2個非常棒的學(xué)習(xí)資源教程：
1、w3school學(xué)院（http://www.w3school.com.cn/cssref/pr_box-flex.asp）
2、一個完整的Flexbox指南教程：
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ?（英文版）
http://www.w3cplus.com/css3/a-guide-to-flexbox.html （中文版）
3、flex實戰(zhàn)演練教程—逆天的FLEXBOX布局備忘單
http://www.gbtags.com/gb/share/2437.htm
另外一種技巧：百分比+flex布局。
百分比是什么？其實就是利用標(biāo)簽里面的內(nèi)容自動撐開，再利用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)。
之前html5模版網(wǎng)(m.suosuyi.cn)介紹的一個學(xué)習(xí)webAPP的好地方：