您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設計教程 >> 設計理論 >> 瀏覽設計教程

WAP APP的柵格設計

這里專門說一下關于WAP APP的柵格設計。以下相關都是基于一淘H5和一淘App總結(jié)得出。

先介紹三個名詞:Wap App;Native App;Hybrid App(融合體,H5頁面嵌套在Native中),之所以說這三個,是因為它們相互之間的聯(lián)系在某種程度上制約了Wap App 的柵格設計。下面詳細說下柵格試驗。

DE87524E69D22D1F6CD04BB66CE46BFB_B500_900_500_498.png

 

Phone柵格和PC柵格,本質(zhì)上沒有區(qū)別,一樣的計算方式,無外乎屏幕大小的差別,但這屏幕大小,就有很多細節(jié)需要結(jié)合手機用戶習慣來判斷和取舍。

我們試驗的Phone柵格都是流體柵格,簡單說,就是不定義具體尺寸,而是屏幕占比。

說到屏幕占比,我們需要設定基準屏幕(這個可根據(jù)某些具體數(shù)據(jù)確定,比如我的目標用戶群使用的手機屏幕尺寸占比最多的是1136*640,即可定位基準屏幕),這里假定基準屏幕是960*640 。

通常柵格的計算公式 (m+a)*n-a=640-2b  (m 柵格寬;a 槽寬;b 留白寬;n柵格個數(shù))

 

試驗 1

m=40  n=12  a=10  b=25(我們通常定義柵格數(shù)目n是2,3,4,6的整數(shù)倍,12柵格算是最簡單的柵格結(jié)構(gòu))。

試驗1的柵格是沿襲PC的思想,但在后來應用到越來越多的頁面時,這種柵格做2,3,4,6等分都很OK,但不做等分時,靈活性就很差,也算是一個致命的缺點,對于視覺設計師來說有很大的局限性。所以不建議在手機上使用12柵格。

102112oh79p4u9uj0rz79z

 

 

試驗 2

m=44  n=12  a=8  b=12。

試驗2和試驗1其實差別不大,柵格數(shù)目都是12,也算是相對早期提出的(還沒有覺得12柵格的靈活性差),相當于是試驗1的優(yōu)化:一是覺得兩邊留白寬度25略大,二是可以在一個單位柵格內(nèi)取到最小的可觸摸尺寸44*44。但其實真正應用到界面上時體現(xiàn)的價值并不大。當然后來發(fā)現(xiàn)12柵格的弊病后,便一并放棄了。

2

 

試驗 3

m=18  n=24  a=8  b=12。

24柵格是基于設計的靈活性而提出的。在應用中,無論是等分,還是靈活性,還是前端對于柵格的基數(shù)考量上,都相對合理,但依然沒有最后選擇這種柵格,這就牽扯到開始提到的Hybrid App。

需要應用柵格體系的H5頁面,大部分是要嵌套到Native App中,所以要盡量讓嵌套頁面看起來和原生界面保持統(tǒng)一性,而App 有一個不成文的柵格規(guī)定,任何的界面尺寸都要是4DP的倍數(shù),也就是最小柵格單位要是8Px(當然這可能也是沒有足夠經(jīng)驗的原因,到最后和APP團隊溝通后才了解到,所以到試驗柵格后期才采用了柵格試驗4的方案)。

還是建議大家,如果你設計的WAP不需要配合Native,選擇24柵格是相對完美的一種方案。

3

 

試驗 4

m=8  n=80  a=8*2  b=8*3。

整個界面按8Px的尺寸等分80分,靈活性很好,可以很好匹配Native。但也有不夠完美的地方,一是不論對視覺設計師還是前端工程師,應用起來都不方便,計算起來相對麻煩;二是不能3等分和5等分界面,需要在設計和開發(fā)時做特殊處理,當然用戶是看不出來的。但因為要保持終端的一致性,所以我們對于wap柵格設計采用了柵格4。

4

 

試驗完畢。希望對大家的日常項目有幫助。

[教程作者:admin]
免責聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://likemindfilms.com/tutorial/di1913.html
騰訊ISUX - 設計審核那些事兒
關于網(wǎng)站分頁導航的十個細節(jié)分析
圖趣網(wǎng)微信
建議反饋
×