h5设计稿
① 一个H5的制作流程是怎么样的
一个有互动的H5(不是易企秀和MAKA之类的)。
大概如下:
1.前期沟通了解需求。
2.策划H5方案
3.设计出草稿
4.定稿出正稿
5.后期工程师开发
6.测试
7.正式上线
② h5页面制作,设计多大的尺寸,怎么和前端适配,实现设计的视觉稿效果
H5的页面制作设计尺寸是有一定规范的,正常的话是考虑手机的适配问题,所以这个专尺寸的话是基属于手机来做的。
具体是多少呢?因为手机的尺寸是不一样的,特别是在比例上,这就要求我们在不同的手机上必须要保证内容的呈现,一定是完整的,但自己要考虑一个问题,要把内容分为重要的和不重要,重要的是什么呢,比如说背景图;重要的话就是放一些文字信息等等。
这样就划分了一个安全区和出血区,出血区和安全区交界的部分,就是不重要的,可以在各位手机上被裁掉的或者用来遮住手机页面背景的;但是安全的内容,是可以保证在任何大小屏幕手机上都可以完整显示。
一般安全区内框的尺寸是375X603PX,但在制作上又是另外一回事了,作铺满内框的图要按照这个尺寸的2倍大小去做。
出血区也就是外框尺寸是422X748PX,作铺满外框的图要按照这个尺寸的2倍大小去做。
这个你可以参考下意派Epub360的画布标准,这个工具是专业级的H5工具。
③ 在移动端设计稿为1080p的时候,用rem布局。怎么计算宽度和字体大小
原文链接:http://caibaojian.com/rem-and-px.html
1rem等于多少px呢?·
1rem等于html根元素设定的font-size的px值,假如我们在css里面设定下面的css。
//code from http://caibaojian.com/rem-and-px.html
html{font-size:14px}
那么后面的CSS里面的rem值则是以这个14来换算,例如设定一个div宽度为3rem,高度为2.5rem.则它换算成px为width:42px.height:35px,同理,假如一个设计稿为宽度42px,高度为35px,则换成成rem,则是42/14=3rem,35/14=2.5rem。
如果css里面没有设定html的font-size,则默认浏览器以1rem=16px来换算。
来源:前端开发博客
这是我查看资料分享过来的,具体对不对要看题主测试之后的结果
④ H5设计稿切图按照什么尺寸,微信公众号版本的
H5的设计稿一般设计为640x1136px即可。
⑤ 5移动网页的设计稿尺寸应该是多少
html5移动端尺寸750*1334,还有720*1080都是可以的,如果要兼容苹果和安卓的用750*1334的多一些
⑥ UI设计和网页美工的区别是什么
UI设计只是网站美工的一部分,网站美工需要学习的内容有UI设计,PS,AI,html语言,javaScript语言等。
网页美工局限于美术设计和页面制作,UI注重交互,用户体验是第一目标。
UI设计师的职能大体包括三方面:一是图形设计,软件产品的产品“外形”设计。二是交互设计,主要在于设计软件的操作流程、树状结构、操作规范等。一个软件产品在编码之前需要做的就是交互设计,并且确立交互模型,交互规范。三是用户测试/研究,这里所谓的“测试”,其目标恰在于测试交互设计的合理性及图形设计的美观性,主要通过以目标用户问卷的形式衡量UI设计的合理性。
网页美工需要学习网站概念知识、色彩构成、网页设计中的美学规律、FIREWORKS网页图形处理、FLASH二维动画、PHOTOSHOP平面设计软件在网站设计中的应用、作品设计及点评等内容。
拓展知识
UI设计:UI即User Interface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。
网页美工:是精通美学,photoshop(PS),FLASH,dreamwaver(DW)等一网站制作软件的网络人员,必须具有良好的创意和一定程度的审美观。必要时需要一定的策划知识。为网站所有的页面画出来并用DW和css排版出来。页面必须清晰简洁,还要适宜后台调用。
⑦ HTML5移动网页的设计稿尺寸应该是多少
HTML5的移动端网来页设计稿,通常情况下源,内容区为750px或960px或者1080px的,一般不小于750px像素大小(宽度)
设计稿可以比750px大,但是绝对不能比750px小,这个主要是由于当前手机的分辨率相对较高(iPhone 6是375物理像素,但实际像素为其两倍,也就是750,这个750就是这么来的)
如果设计图稿过小,前端在实现图稿的时候里面的图片大小在高分辨率的情况下会显得模糊不清,所以这也是为何要“大”分辨率
此外需要注意的是,要保证页面的基准字体大小,在320px的设计稿当中,最小字体不宜小于12像素,其他像素的设计稿当中,等比例换算即可(12/320px*设计稿像素值)
⑧ h5动画怎么写方便
简单的思维步骤
拿到设计稿一开始就先看看这个设计稿的布局,有一些是从页面版顶部到底部权都有效果的,这个时候就要考虑在 iPhone4 这样屏幕不够高的设备上如何保证页面完整呈现;
在不影响交互的情况下,隐藏哪些元素。有的时候页面上元素比较集中,这个时候就要考虑在 iPhone6+ 这样的大屏幕设备上,要不要调整间距使得页面不会太空旷。
zoom和transform
zoom 缩放的是被 zoom 的容器的视口,可以把它想象成放大镜的效果,这个属性是可被继承的;
做设备屏幕兼容的时候,可以在 body 标签下加一个 div 包裹住页面上的其他元素,然后在这个 div 上加 zoom,达到的视觉效果就是页面上其他元素也被缩放了。但是有些元素并不支持 zoom。
transform 属性应用到元素的过程其实是矩阵变换的过程,在渲染的时候,元素的坐标就会被确定下来,然后和 transform 的属性值进行矩阵运算得到最终的坐标;
⑨ 这个H5手机页面 字体大小要怎么换算 如设计稿是40px,我们切图制作要缩小一半还是怎么样
切图按照正常的大小切,
html{
font-size: calc(100vw/7.5);
}
设计稿是40px,你就写0.4rem;(那个7.5是设计稿尺寸设计稿是750就写7.5,设计稿是640就写6.4)