手机网站设计尺寸及界面布局.docxVIP

设计页面要求及规范 主要是几个页面 欢迎页 ?首页 菜单框 注册与登录 弹出窗口 动态展示交互 详细页 搜索页 设计尺寸规范 状态栏(status bar).导航栏(navigation)、主菜单栏(submenu)、内容区域 (content)0 Logo 出矢量图 512*512 icon:29*29 72* 72 512* 512 iphone ?尺寸以及分辨率 320*480 , 640*960, 640* 1136 网页和移动的 UI 用 72px ?界面基本组成元素 iPhone的APP界面-?般由状态栏、导航栏、主菜单栏和屮间的内容区域组成。因为宽 度是固定的，所以设计开发起來很方便。下面我们说说这些“栏”的尺寸吧： 状态栏：高度40px 导航栏：咼度88px 主菜单栏：高度98px； 内容区域：高度为：734px 如果 640* 1 136 是 910px iPhone5/5s的640* 1136的尺寸,其实就是中间的内容区域高度增加到910pxo 3 ?字体 32-36px32px,注释等提示文木28px。 tOpiFhon?/l^od touch ■ ■代??二代.tiOpB440p ?40paBlplrtsera ?8p?Pbor?4/iFhon4i4ir tOpi Fhon?/l^od touch ■ ■代??二代. tiOpB 440p ? 40pa Blpl rtsera ?8p? Pbor?4/iFhon4i4i ri ssra ttp 注：在IOS7中，苹果幵始慢慢弱化状态栏的存在，将状态栏〃租导航栏和融合在一起，但是再怎么 变，尺寸高度都是一样的，不会影响设计。 不同贝!] img-line.png f img-line@2x.png Android 1 ?尺寸以及分辨率 提到Android的尺寸,480*800. 720*1280o点9切图所有手机的适配。 Android 界面尺寸:480*800. 720* 1280. 1080*1920。 2 ?界面基本组成元素 与ios的一样，还是有状态栏、导航栏和主菜单栏,以720* 1280的尺寸，状态栏的高度 应为50px,导航栏的高度96px,主菜单栏的高度96pxo内容区域高度为： 1 038px(1 280?50? 96-96= 1 038)窗体底端 Android系统采用可自适应的屏幕支持，由于屏幕尺寸种类繁多，简单可归为Idpi (240*320). mdpi(320*480)x hdpi(480*800)x xhdpi(720*1280) □□字体:android原生的字体,与微软雅黑很像。字体大小范围为16px~32px □□ IOS :宽度 640PX 高度 1136px iOS 屏幕尺寸有这几种:320*480 , 960*480 r 1024*768 I pad 端 iPad 界面尺寸：1024*768、2048* 1536 单位：像素72dpi ,在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机来设 计，比较方便预览效果，一般用640* 960或者640* 1 1 36的尺寸来设计。 单位 iOS的尺寸单位为pt, Android的尺寸单位为dp。 单位之间的换算关系随倍率变化: 1 倍：1 pt= 1 dp= 1 px(mdpis iPhone 3gs) 1 ?5 倍:lpt= 1 dp= 1.5px(hdpi) 2 倍：lpt= 1 dp=2px(xhdpi、iPhone 4s/5/6) 倍：lpt=ldp=3px(xxhdpi、iPhone 6) 倍：lpt= 1 dp=4px(xxxhdpi) 单位决定了我们的思考方式。在设计和开发过程中，应该尽量使用逻辑像素尺 寸来思考界面。设计Android应用时,有的设计师喜欢把画布设为1080x1920,有 的喜欢设成720x1280o给岀的界面元索尺寸就不统一了。Android的最小点击区域 尺寸是48x48dp,这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在 xxhdpi 设备上，则是 144xl44pxo 设计页面所用版式 1.列表式（搜索产品和新闻模块） ?????中国務动 令 16：17 ? -r ? 46%HZf 微信(71) 订阅号 E胃 DoNews |【斗牛士II报】为什么腾讯更在夭貓… 网淨心理测试学 ? 礎列找…我…我…我…我…我… DT创新志 借力设计思维.让创新发生| Uber深圳 双色悄人节.你給IA创追的独家记忆 inik乎机APPUI设计歎赏【动图］ 盛大游戏 【图片I 360手机浏览器 万 拖地先放苗，31个你不知逋的生活當… 人人都是产品经理 E 洪翘栢】玖总冇醉何迫湖6娈肯 ▼ / ■ 12:30 新游