移动端网页设计经验与心得

2015-12-23 admin

智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上。

再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等

网页设计无非是蓝、黑、白,界面单调,并且要尽可能的设计简单。

现在情况就大不相同了,软件上webkit内核浏览器大行其道,硬件突飞猛进,网速来说,4g正炒得火热。

下面就和大家分享一下我的一些移动端网页设计经验与心得。

⒈ 分辨率

这应该是移动端网页最关心的问题了,因为移动设备五花八门,各种分辨率都有。要想在这些设备上都能有良好的浏览体验,得花一番功夫。

使用viewport:这已经是移动端网页的必备了,它可以设定页面的宽度,是否允许缩放等等。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

一般设置width=device-width,就是设置为设备的屏幕宽度,当然也可以是具体数值 百分比与max(min)-width使用:移动端网页不仅分辨率不一,而且随时可以横竖屏切换,所以百分比宽度设定非常必要,再配合max(min)-width限制最大(小)宽度,能有效的适应各种分辨率,若为此还有特别需求,可看下一条,”使用Media Queries” 使用Media Queries,这也是响应式web设计的一部分 XHTML

<link rel="stylesheet" type="text/css" href="style1.css" media="screen and (min-width: 640px)">

这里的意思就是在大于640px的屏幕宽度下,使用style1样式,也可以写在样式内部,如:

@media screen and (min-width: 640px){
   .d1{background:#ccc;}
}

⒉ 内容与缓存

虽才说到现在4g正炒得火热,但不可否认移动设备网络环境上的局限性,所以还是有必要对此做一些处理。

使用manifest缓存

<html manifest="/mobile.manifest">

在html上添加manifest,其中文件格式内容如:

CACHE MANIFEST
##需要离线的内容
CACHE:

Script/jquery.js
Script/gameconfig.js

Image/home.png
Image/logo.png

##总是访问网络的内容
NETWORK:
*
##访问A失败时访问B
FALLBACK

浏览器将缓存chache内所有的内容,并且可以离线访问,只要文件发生任何改变都将会重新读取并刷新全部缓存,所以更改注释是个更新缓存的好方法这里要注意的是 1,添加了manifest的当前网页也会被缓存 所以推荐的方式是页面缓存,页面动态内容全部用ajax获取,所以在移动网站项目设计开始就要注意这个问题 2,页面中添加iframe 然后子页面引用manifest想达到缓存资源而不缓存当前页面内容,是无效的。 尽可能使用css样式来代替图片,由于移动端浏览器对css3的支持,使得以前很多图片可以用样式来代替 如我们公司项目内用到的一些,下图: 251413172057080

按钮用到了 渐变+圆角+内阴影

.btn_red {
display: block;
line-height: 28px;
padding: 1px 0;
border: 1px solid #B81414;
border-radius: 2px;
background: #FF5A5A;
background: -webkit-gradient(linear, 0 0, 0 70%, from(#FF5A5A), to(#FF4444));
overflow: hidden;
margin-top: 3px;
color: #fff;
box-shadow: 0px 1px 1px #FFB5B5 inset;
}

三角形 就是用border的颜色,改变颜色可以画出指向不同方向的三角形

.tip_t{
border-color: transparent transparent #bb0808 transparent;
border-style: solid;
border-width: 10px;
width: 0px;
height: 0px;
}

箭头是两个三角形叠在一起 …… 用样式代替图片之后不仅大小减少了很多,可维护性更大大提高 页面只展示部分内容,多提示用户”点击展开”或者”查看更多”,再异步获取内容,大家都不希望打开一个网站,流量就哗哗没了

⒊ 布局

手机端可视区域小,布局上不同于传统网页,需要充分利用有限的空间去展示信息。

页面流程简单清晰,复杂的操作尽量分段展示,如下图: image.png

由于移动端是直接用手指操作,而非鼠标。所以,需要响应元素点击区域要相对明显,大 屏幕宽度虽小,但是上下滑动体验好,因此布局上可以多上下排列

⒋ 其他与结语

许多小厂商的手机平板,还有一些rom上的系统默认浏览器版本各异(很头疼…),所以测试工作要做足 html5中<input /> type有好几种新类型,比如<input type=”tel” />,移动端上点击会默认弹出数字键盘,可多试试 本文只是总结了我项目上一些小心得,如有纰漏和错误谢谢大家指正,也欢迎大家点赞和讨论

相关文章
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
ASP.NET 2.0 AJAX应用程序设计
ASP.NET Aiax技术是一种实现异步(Asynchronous)网络应用的技术,它被整合在ASP.NET 2.0之中,是As P.NET的一种扩展技术。通过ASENETAjax技术,开发人员或程序员可以将Web服务器控件和客户端脚本结...
2015-11-14
前端MV*框架的意义
经常有人质疑,在前端搞MV有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的,有什么必要再引入这种框架? 回答这些问题之...
2016-03-11
前端问答社区成立了
由雷锋网友提供的给大家相互交流的前端问答社区正式上线了,欢迎大家来此相互交流相互学习 ...
2016-03-30
Html5 是否适合移动应用开发
HTML5最近这几年声誉鹊起,而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边,都不好意思和客户打招呼!移动应用开发中,HTML5更是不可或缺的角色,市面上不少移动应用中间件产品都号称支持HTML5,例如APP...
2015-11-12
HTML5移动应用开发的12大特性
1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少...
2015-11-11
前端工程师应该具备的三种思维
如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你。但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外...
2016-01-13
Node.js将向移动端扩展
如果你还没有听过Node.js,那么现在就可以了解一下! 目前,来自200多个国家的数以万计的组织在使用Node.js,在Node.js的网站上,每月都有超过200万次下载。但版本发布缓慢使开发人员日益不满,网上出现了创建Node.js分支...
2015-11-12
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
回到顶部