移动端设计图
㈠ HTML5移动网页的设计稿尺寸应该是多少
HTML5的移动端网来页设计稿,通常情况下源,内容区为750px或960px或者1080px的,一般不小于750px像素大小(宽度)
设计稿可以比750px大,但是绝对不能比750px小,这个主要是由于当前手机的分辨率相对较高(iPhone 6是375物理像素,但实际像素为其两倍,也就是750,这个750就是这么来的)
如果设计图稿过小,前端在实现图稿的时候里面的图片大小在高分辨率的情况下会显得模糊不清,所以这也是为何要“大”分辨率
此外需要注意的是,要保证页面的基准字体大小,在320px的设计稿当中,最小字体不宜小于12像素,其他像素的设计稿当中,等比例换算即可(12/320px*设计稿像素值)
㈡ 移动端设计稿是1242怎么切图
还有个兼容性差不多已经没有问题的单位vw
vw : 1/100th of the width of the viewport.
用法同rem,并且不用设定html的font-size
㈢ 前端工程师遇到要做移动端页面的时候,给了我一张设计图,怎么去切图,那么多的手机要适配
用photoshop,然后安装一个叫cutterman的插件,专门切图的,适配多种分辨率
㈣ html5,设计稿640×2000,我直接切就行了吧~这样就算2倍图了吧,移动端制作sprite合并图是和PC端一样的吗
基本上移动端背景图不会考虑sprite技术的 ,因为分辨率太多了,不好计算background-position,都是单独的图片
㈤ 做移动端的设计 以什么尺寸来设计
IOS篇
1、尺寸及分辨率
iPhone 界面尺寸:320x480、640x960、640x1136
iPad 界面尺寸:1024x768、2048x1536
(以上单位都是像素哦,至于分辨率一般网页UI和移动UI基本上都只要 72 ppi)
当然,在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机尺寸来设计,比较方便预览效果,一般用 640x960 或者 640x1136 的尺寸设计。
P.S. 作图的时候确保都是用形状工具(快捷键:U)画的,这样更方便后期的切图或尺寸变更~
2、界面基本组成元素
iPhone的APP界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单栏以及中间的内容区域
这里取用 640x960 的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸:
状态栏:就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40 px
导航栏:显示当前界面的名称,包含相应的功能或者页面间跳转的按钮,其高度为:88 px
主菜单栏:类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98 px
内容区域:展示应用提供的相应内容,整个应用中布局变更最为频繁的,其高度为:734 px
iPhone/iPod Touch
第一代、第二代、第三代
iPhone4/iPhone4s
iPhone5/iPhone5C/iPhone5s
至于我们经常说的 iPhone5/5s 的 640x11136 的尺寸,其实就是中间的内容区域高度增加到:910 px
P.S. 在最新的 iOS7 的风格中,苹果已经开始慢慢弱化状态栏的存在,将状态栏和导航栏合在了一起,但是再怎么变化,尺寸高度也还是没有变化的,只不过大家再设计 iOS7 风格的界面的时候多多注意一下~
3、字体大小
iPhone 上的字体英文为: HelveticaNeue 至于中文,Mac下用的是黑体-简,Win下则为华文黑体。
下图是网络用户体验做过的一个小调查,可以看出用户可接受的文字大小,像素为单位,也就是大家在PS里的文字像素大小。
P.S. 多留心下一些大公司的数据研究,你会发现很多你根本没考虑到的问题
Android篇
1、尺寸及分辨率
Android 界面尺寸:480x800、720x1280、1080x1920... (单位:像素)
Android 比 iPhone 的尺寸多了很多套,建议取用 720x1280 这个尺寸,这个尺寸 720x1280中显示完美,在 1080x1920 中看起来也比较清晰;切图后的图片文件大小也适中,应用的内存消耗也不会过高。
㈥ 前端兼容pc,移动端,平板要几套设计图
3套紫薯补丁
㈦ 手机端网页设计尺寸多少
要根据不同手机不同的屏幕分辨率来规定尺寸。
一般做效果图主流都是做480*800来测试,iphone4(或s)就用640*960,但这个都只是效果图,真正开发还需要切图用点9来做屏幕适配。
常见手机显示屏分辨率:96x65,96x96,128x96,128x128,160x128,160x160,176x144,220x176,240x176,320x240,640x480,800x480
苹果4:960×640 像素,3.5英寸
三星:480×800 分辨率
小米:480×854 4英寸TFT屏幕
android手机屏幕尺寸
1280×800 854×480 640×480 480×800 432×240 400×240 320×480 320×512 320×240
(7)移动端设计图扩展阅读:
手机ui设计是手机软件的人机交互、操作逻辑、界面美观的整体设计。置身于手机操作系统中人机交互的窗口,设计界面必须基于手机的物理特性和软件的应用特性进行合理的设计,界面设计师首先应对手机的系统性能有所了解。手机UI设计一直被业界称为产品的“脸面”,好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。
随着手机移动设备不断普及,对手机设备的软件需求越来越多,手机移动操作系统厂商正在不约而同地建立手机设备应用程序市场,如Apple的App Store、Google的Android Market、Microsoft的Windows Phone 7 Marketplace,给手机的终端用户带来巨量的应用软件。这些软件良莠不齐,界面各异,手机的终端用户在众多的应用使用中,最终会选择界面视觉效果良好,且具有良好体验的应用留在自己的手机上长期使用。
㈧ 移动端psd图可以直接进行pc端设计吗
psd文件属于ps专用格式,只有ps软件才能打开带图层的图像,部分看图,美化等软件,只能打开图像不会显示图层。甚至图片打不开。
㈨ 移动端1000px的设计图怎么排版
IOS篇1、尺寸及分辨率iPhone界面尺寸:、640x960、640x1136iPad界面尺寸:1024x768、2048x1536(以上单位都是像素哦,至于分辨率一般网页UI和移动UI基本上都只要72ppi)当然,在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机尺寸来设计,比较方便预览效果,一般用640x960或者640x1136的尺寸设计。P.S.作图的时候确保都是用形状工具(快捷键:U)画的,这样更方便后期的切图或尺寸变更~2、界面基本组成元素iPhone的APP界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单栏以及中间的内容区域这里取用640x960的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸:状态栏:就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40px导航栏:显示当前界面的名称,包含相应的功能或者页面间跳转的按钮,其高度为:88px主菜单栏:类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98px内容区域:展示应用提供的相应内容,整个应用中布局变更最为频繁的,其高度为:734pxiPhone/iPodTouch第一代、第二代、第三代iPhone4/iPhone4siPhone5/iPhone5C/iPhone5s至于我们经常说的iPhone5/5s的640x11136的尺寸,其实就是中间的内容区域高度增加到:910pxP.S.在最新的iOS7的风格中,苹果已经开始慢慢弱化状态栏的存在,将状态栏和导航栏合在了一起,但是再怎么变化,尺寸高度也还是没有变化的,只不过大家再设计iOS7风格的界面的时候多多注意一下~3、字体大小iPhone上的字体英文为:HelveticaNeue至于中文,Mac下用的是黑体-简,Win下则为华文黑体。下图是网络用户体验做过的一个小调查,可以看出用户可接受的文字大小,像素为单位,也就是大家在PS里的文字像素大小。P.S.多留心下一些大公司的数据研究,你会发现很多你根本没考虑到的问题Android篇1、尺寸及分辨率Android界面尺寸:480x800、720x1280、1080x1920(单位:像素)Android比iPhone的尺寸多了很多套,建议取用720x1280这个尺寸,这个尺寸720x1280中显示完美,在1080x1920中看起来也比较清晰;切图后的图片文件大小也适中,应用的内存消耗也不会过高。