中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

APP的柵格設(shè)計(jì)試驗(yàn)

2022-06-06    分類: 網(wǎng)站建設(shè)

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

  先介紹三個(gè)名詞:Wap App;Native App;Hybrid App(融合體,H5頁面嵌套在Native中),之所以說這三個(gè),是因?yàn)樗鼈兿嗷ブg的聯(lián)系在某種程度上制約了Wap App 的柵格設(shè)計(jì)。下面詳細(xì)說下柵格試驗(yàn)。

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

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

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

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

試驗(yàn) 1

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

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

試驗(yàn) 2

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

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

試驗(yàn) 3

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

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

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

  還是建議大家,如果你設(shè)計(jì)的WAP不需要配合Native,選擇24柵格是相對(duì)好的一種方案。

  試驗(yàn) 4

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

  整個(gè)界面按8Px的尺寸等分80分,靈活性很好,可以很好匹配Native。但也有不夠好的地方,一是不論對(duì)視覺設(shè)計(jì)師還是前端工程師,應(yīng)用起來都不方便,計(jì)算起來相對(duì)麻煩;二是不能3等分和5等分界面,需要在設(shè)計(jì)和開發(fā)時(shí)做特殊處理,當(dāng)然用戶是看不出來的。但因?yàn)橐3纸K端的一致性,所以我們對(duì)于wap柵格設(shè)計(jì)采用了柵格4。

  試驗(yàn)完畢。希望對(duì)大家的日常項(xiàng)目有幫助。

標(biāo)題名稱:APP的柵格設(shè)計(jì)試驗(yàn)
網(wǎng)址分享:http://m.rwnh.cn/news17/163767.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制開發(fā)、響應(yīng)式網(wǎng)站虛擬主機(jī)、電子商務(wù)域名注冊、企業(yè)建站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計(jì)
左贡县| 木兰县| 随州市| 新乐市| 登封市| 沿河| 栖霞市| 平潭县| 嘉祥县| 搜索| 利津县| 乌兰县| 平原县| 沭阳县| 枝江市| 肥乡县| 青浦区| 元谋县| 景泰县| 醴陵市| 阿拉善右旗| 沾化县| 海南省| 乐都县| 南城县| 彩票| 青田县| 招远市| 富平县| 台江县| 桃源县| 荔浦县| 武宣县| 句容市| 买车| 枝江市| 奉节县| 交口县| 遂宁市| 调兵山市| 天台县|