微信
手机版
网站地图

九游游戏中心,APP的栅格规划实验,吱吱

2019-04-23 09:28:56 投稿人 : admin 围观 : 295 次 0 评论

这儿专门说一下关于WAP APP的栅格规划。以下相关都是根据一淘H5和一淘App总结得出。

先介绍三个名词:Wap App;Native App;Hybrid App(融合体,H5页面嵌套在Native中),之所以说这三个,是由于它们相互之间的联络在某种程度上限制了Wap App 的栅格规划。下面详细说下栅格试验。

Phone栅格和PC栅格,本质上没有差异,相同的核算方法,无外乎屏幕巨细的不同,但这屏幕巨细,九游游戏中心,APP的栅格规划试验,吱吱就有许多细节需求结合手机用户习气来判别和取舍。

咱们试验的Phone栅格都是流体栅格,简略说,便是不界说详细尺度,九游游戏中心,APP的栅格规划试验,吱吱而是屏幕占比。

说到屏幕占比,咱们需求设定基准屏幕(这个可根据某些详细数据确认,比方我的方针用户群运用的手机屏幕尺度占比最多的是1136*640,即可定位基准屏幕),这儿假定基准屏幕是960*640 。

一般栅格的核算公式 (m+a)*n-a=640-2高亚麟老婆b (m 栅格宽;a 槽宽;b 留白宽;n栅格个数)

试验 1

m=40 n=12 a=10 b=25(咱们一般界说栅格数目n是2,3,4,6的整数倍,1ca45292栅格算是最简略的栅格结构)。

试验1的栅格是沿用PC的思维,但在后来使用到越来越多的页面时,这种栅格做2摸女生胸,3,4,6等分都很OK,但不做等分时,灵活性就很差,也算是一个丧命的缺陷,关于视觉规划师来说有很大的局限性。所以不主张在手机上使老婆十九岁用12栅格。

试验 2

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

试验2和试验1其实不同不九游游戏中心,APP的栅格规划试验,吱吱大,栅格数目都是12,也算是相对前期提出的(还没有觉得12栅格的灵活性差),适当所以试验1的优化:一是觉得两头留白宽度25略大,二是能够在一个单位栅格内取到最小的可接触尺度44*44。但其实真实使用到界面通背拳完好教育视频上时表现的价值并不大。当然后来临川气候发现12栅格的弊病后,便同时抛弃了。

试验 3

m=18 n=24 a=8 b=1刘也行女友王诺诺2。

24栅格是根据规划的灵活性而提出的。在使用中,无论是等极品削竹头画眉鸟图片分,仍是灵活性,仍是前端关于栅格的基数考量上,都相对合理,但仍然没有最终挑选这种栅格,这就牵扯到开端说到的Hybrid App。

需求使用栅格系统的H长垣蘧孔校园5页面,大部分是要嵌套到Native App中,所以要尽量让嵌套性非得已页面看起来和原生界面坚持统一性,而App 有一个不成文的栅格规则,任何的界面尺度都要是4DP的倍数,也便是最小栅格单位要是8Px(当然这或许也是没有满足经历的原因,到最终和APP团队沟通后才了解到,所以到试验栅格后qiporn期才采用了栅格4000114006试验4的计划)。

仍是主张咱们,假如你规划的WAP不需求合作Native,挑选24栅格是相对完陈林菠美的一种计划。

试验 4

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

整个界面按8Px的尺度等分80分,灵活性很好,能够很好匹配Native。但也有不行完美的当地,一是不管对视觉规划师仍是前端工程师,使用起来都不九游游戏中心,APP的栅格规划试验,吱吱便利,核算起来相对费事;二是不能3等分和5等分界面,需求在规划和开发时做特别处理,当然用户是看不出来的。但由于要坚持终端的一致性,所以咱们关于wap栅格规划采用了栅格4相似师傅不要啊。

试验结束。期望对咱们的日常项目有协助。

重视互联网的一些事官方微信,回复ID "九游游戏中心,APP的栅格规划试验,吱吱 21935 " 即可在微信里阅览本篇内容。

在查找大众号中查找:imyixieshi,或许扫描下方二维码快速重视。

本文链接: http://http://www.yixieshi.com/ucd/21935.html"> http://www.yixieshi.com/ucd/21935.html

====关于「互联网的一些事」====

互联网的一些九游游戏中心,APP的栅格规划试验,吱吱事http://www.yixie祖祖小y妈shi.com—— 聚集互联网前沿资讯九游游戏中心,APP的栅格规划试验,吱吱,网络精华内容,沟通产品心得。每天为你速递最新、最鲜、最有料的互联网科技资讯!

官娇踹方微博:@互联网的一些事

官方微信:互联网的一些事(ID:imyixieshi)

假如您对互联网产品有共同森苺莉的主意和见地,欢迎给咱们投稿。邮箱:tougao#女生裸yixieshi.com (请将“#”修改为“@”)

相关文章

标签列表