天津网站建设_天津建站_天津网页设计_天津做网站
新闻观点

H5移动页面设计

发布日期:2020-12-25 11:10:15
标签: 网站建设公司   | 作者:小匠 | VISITORS: | 来源:匠人匠心科技
随着智能手机、平板电脑等移动终端的发展和普及,普通大众对手机网站的认知度得到了明显的提升。H5移动网页设计也越来越火热,本文将简单介绍一下H5移动网页设计注意什么。

一、H5移动网页设计与PC网页设计的区别

安卓,IOS手机系统的逐步发展也带动了手机页面的发展,跟PC网页相比,手机网站和普通网站有两大不同点:
 
1.访问入口不同。与传统的电脑上网相比,手机上网具有便捷、随时随地的特点。
 
2.浏览方式不同。由于电脑上的屏幕比手机大很多,普通网站比手机网站拥有更强的展示能力,能在一个网页上占时大量的图片、视频、语音等全方位的信息,但是手机网站由于屏幕尺寸的限制,更多地仅仅是用文字和图片来表现。
H5移动网页设计
H5移动网页设计
 
二、H5移动网页设计应该注意哪些问题

介于H5移动网页与普通网站的区别,分享一些H5移动端网页设计经验与心得。
 
⒈分辨率
 
这应该是移动端网页最关心的问题了,因为移动设备五花八门,各种分辨率都有。要想在这些设备上都能有良好的浏览体验,得花一番功夫。使用viewport:这已经是移动端网页的必备了,它可以设定页面的宽度,是否允许缩放等等。
 
一般设置width=device-width,就是设置为设备的屏幕宽度,当然也可以是具体数值。百分比与max(min)-width使用:移动端网页不仅分辨率不一,而且随时可以横竖屏切换,所以百分比宽度设定非常必要,再配合max(min)-width限制最大(小)宽度,能有效的适应各种分辨率。
 
这里的意思就是在大于640px的屏幕宽度下,使用style1样式,也可以写在样式内部,如:
 
@media screen and (min-width: 640px){.d1{background:#ccc;}}
 
2.不使用绝对宽度
 
由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。 具体说,CSS代码不能指定像素宽度: width:xxx px;
 
只能指定百分比宽度: width: xx%或者 width:auto。
 
3.相对大小的字体
 
字体也不能使用绝对大小(px),而只能使用相对大小(em)。
 
body {font: normal 100% Helvetica, Arial, sans-serif; }
 
上面的代码指定,字体大小是页面默认大小的100%,即16像素。
 
h1 {font-size: 1.5em;}
 
然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。
 
small { font-size: 0.875em; }
 
small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。
 
4.流动布局(fluid grid)
 
"流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。
 
.main { float: right; width: 70%; }
 
.leftBar { float: left; width: 25%; }
 
float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。
 
另外,绝对定位(position: absolute)的使用,也要非常小心。
 
5.图片的自适应
 
除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。
 
这只要一行CSS代码:
 
img { max-width: 100%;}
 
这行代码对于大多数嵌入网页的视频也有效,所以可以写成:
 
img, object { max-width: 100%;}
 
老版本的IE不支持max-width,所以只好写成:
 
img { width: 100%; }
 
此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:
 
img { -ms-interpolation-mode: bicubic; }
 
或者,Ethan Marcotte的imgSizer.js。
 
addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
 
imgSizer.collate(imgs);
 
});

三、简化H5移动网页设计的步骤
 
1.从富于变化的界面开始
 
不要停止在已有的设计上,要有不断变化的交互,这样整个设计的感觉都会不一样。总之,移动设备的使用正在疯长,要意识到移动端已经不是桌面电脑的辅助了。因此需要完全不同的设计思路,不是简单的缩小尺寸而已。
 
2.微互动
 
移动体验其实是各种微互动的整合,而且用户需要在很分心的状态下快速的完成各项任务。所以好的.移动设计都要简单而明显,让用户的操作尽量的直觉化
 
3.突出品牌形象
 
用户的每次使用都应该能够反映品牌的故事,并加强认同感和忠诚度,所以确定哪些元素能够凸显品牌形象就非常重要了。移动设计师需要充分利用有限的屏幕空间,不断增加品牌的形象。
 
4.关注内容
 
用户会在各种环境下使用移动设备,所以任何影响用户交互的因素都非常重要。最好能够知道你的用户是在什么环境中使用移动设备的,不可能对各种环境进行同样的设计,比如添加语音辅助和亮暗变化非常有必要。
 
5.带感情的设计
 
因为移动设备更多起网络入口作用,所以使用非常方便,同时对它产生了一种情感,我们很多人甚至睡觉的时候都把手机放在身边。所以使用它是个有情感的过程,好的设计会体现这一点。
 
以上就是“H5移动网页设计”的全文了,匠人匠心的主营业务包括网站建设软件开发小程序开发SEO优化等,我们会定期更新关于这些内容的文章,如果您对我们的网站感兴趣,欢迎您常来我们的网站。



相关新闻
1825629851
13821420129
匠人匠心科技是从事天津网站建设、天津网站制作、软件开发、移动建站、微信端、app项目等的开发公司
软件事业部:天津市大学软件学院D-510(天津工业大学院内)
网站事业部: 天津市河北区北宁弯万福生活广场9-1208(华为手机旗舰店旁入口)
咨询热线:138-2142-0129 136-2215-0903
天津网站建设_天津建站

扫码添加

分享按钮