您好,欢迎访问三七文档
当前位置:首页 > IT计算机/网络 > 电子商务 > 手机网站设计尺寸及界面布局
网站建设_app开发_手机网站开发_三原国际际网站建设_app开发_手机网站开发_三原国际设计页面要求及规范主要是几个页面1.欢迎页2.首页3.菜单框4.注册与登录5.弹出窗口6.动态展示交互7.详细页8.搜索页设计尺寸规范状态栏(statusbar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。Logo出矢量图512*512icon:29*2972*72512*512iphone1.尺寸以及分辨率320*480,640*960,640*1136网页和移动的UI用72px2.界面基本组成元素iPhone的APP界面一般由状态栏、导航栏、主菜单栏和中间的内容区域组成。因为宽度是固定的,所以设计开发起来很方便。下面我们说说这些“栏”的尺寸吧:网站建设_app开发_手机网站开发_三原国际际网站建设_app开发_手机网站开发_三原国际状态栏:高度40px导航栏:高度88px主菜单栏:高度98px;内容区域:高度为:734px如果640*1136是910pxiPhone5/5s的640*1136的尺寸,其实就是中间的内容区域高度增加到910px。3.字体32~36px32px,注释等提示文本28px。不同则img-line.png,img-line@2x.pngAndroid1.尺寸以及分辨率提到Android的尺寸,480*800、720*1280。点9切图所有手机的适配。Android界面尺寸:480*800、720*1280、1080*1920。网站建设_app开发_手机网站开发_三原国际际网站建设_app开发_手机网站开发_三原国际2.界面基本组成元素与ios的一样,还是有状态栏、导航栏和主菜单栏,以720*1280的尺寸,状态栏的高度应为50px,导航栏的高度96px,主菜单栏的高度96px。内容区域高度为:1038px(1280-50-96-96=1038)窗体底端Android系统采用可自适应的屏幕支持,由于屏幕尺寸种类繁多,简单可归为ldpi(240*320)、mdpi(320*480)、hdpi(480*800)、xhdpi(720*1280)字体:android原生的字体,与微软雅黑很像。字体大小范围为16px~32pxIOS:宽度640PX高度1136pxiOS屏幕尺寸有这几种:320*480,960*480,1024*768Ipad端iPad界面尺寸:1024*768、2048*1536单位:像素72dpi,在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计。单位网站建设_app开发_手机网站开发_三原国际际网站建设_app开发_手机网站开发_三原国际iOS的尺寸单位为pt,Android的尺寸单位为dp。单位之间的换算关系随倍率变化:1倍:1pt=1dp=1px(mdpi、iPhone3gs)1.5倍:1pt=1dp=1.5px(hdpi)2倍:1pt=1dp=2px(xhdpi、iPhone4s/5/6)3倍:1pt=1dp=3px(xxhdpi、iPhone6)4倍:1pt=1dp=4px(xxxhdpi)单位决定了我们的思考方式。在设计和开发过程中,应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时,有的设计师喜欢把画布设为1080x1920,有的喜欢设成720x1280。给出的界面元素尺寸就不统一了。Android的最小点击区域尺寸是48x48dp,这就意味着在xhdpi的设备上,按钮尺寸至少是96x96px。而在xxhdpi设备上,则是144x144px。网站建设_app开发_手机网站开发_三原国际际网站建设_app开发_手机网站开发_三原国际设计页面所用版式1、列表式(搜索产品和新闻模块)1.抽屉式(产品模块)2.网站建设_app开发_手机网站开发_三原国际际网站建设_app开发_手机网站开发_三原国际2.图表式(图表模块)4.行为扩展式网站建设_app开发_手机网站开发_三原国际际网站建设_app开发_手机网站开发_三原国际5.弹出式(弹出页面)6.图片滑动式(banner或产品)网站建设_app开发_手机网站开发_三原国际际网站建设_app开发_手机网站开发_三原国际
本文标题:手机网站设计尺寸及界面布局
链接地址:https://www.777doc.com/doc-2415100 .html