开发者社区> 异步社区> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

《HTML5移动Web开发实战》—— 1.2 对移动Web设计的思考

简介:
+关注继续查看

本节书摘来异步社区《众妙之门——移动Web设计精髓》一书中的第1章,第1.2节,作者:【德】Smashing Magazine,更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.2 对移动Web设计的思考

众妙之门——移动Web设计精髓
我们已经对移动Web设计的趋势和挑战进行了初步的了解,下面我们来重点检查一下设计师在过程中应该考虑的几个要点。

  1. 简明的语义标记
    如果你想为一个优秀的移动网页打下稳固的基础,你最先要做的事情就是设立一套适用于网页的、简明的语义标记。这样在你设计移动网页的时候才会避免重复传统互联网设计中存在的重大问题。简明的标记能有效帮助浏览器正确显示网页页面。同样,由于避免了不必要的环节,简明的语义标记还将给用户带来愉快的体验经历。
  2. CSS下内容与显示的分离
    除了简明的语义标记,内容与显示的分离也是非常重要的。与桌面用户相比,手机网页用户更喜欢访问没有图片和禁用CSS的网页。手机网页用户更希望顺利地访问页面内容和链接——而不是看到华丽的页面显示。作为移动互联网网站,当其开始大量使用简明的语义标记,并用CSS实现内容与显示的分离时,这就是一个具有非凡意义的伟大的开端。
  3. ALT标签
    出于部分用户由于某些原因不能浏览网页上图片的考虑(或者用户选择屏蔽图片),ALT标签对于可用性来说显得非常重要。无论如何ALT标签在互联网中都有所运用,只是对手机互联网用户来说它更加重要而已。
  4. 表单域的分类
    像ALT标签一样,表单域分类使得移动互联网变得更加实用。试想一下,如果没有对其进行了解就加以使用,那么一定不会得到你理想的效果。而处理好像ALT标签和表单域分类这样的细节问题就可以使你事半功倍。
  5. 标题的作用
    由于移动Web浏览器所显示的内容文本格式常常是受限制和不协调的,所以标题在此处就显得格外重要。移动Web浏览器并不能将文字显示为你想让它呈现的那种效果,但是类似标题一、标题二、标题三这样的标签能帮助页面构造一个合理的用户视图,并凸显出页面的某些重点内容。
  6. 禁用漂浮链接
    尽管移动Web浏览器也能通过使用漂浮链接来进行整个网页页面的布局,但是在小屏幕上恐怕并不会收到很好的效果。通常情况下,没有漂浮链接会使内容简单排列的网页整体看起来更舒服,用户也能得到更好的使用体验。
  7. 减少页边距和填充
    一般情况下,和传统的网站相比,移动设备上的网页最好减少页边距和其他的填充。当然,这取决于你所设计的网站页面填充的实际情况和网页页边距的大小,但是过多的页面填充和过大的页边距并不能提升用户体验。
  8. 做好页面导航
    很多页面的网站导航都设计在页面的最上方。这样的设计对于移动网页同样有用,但是值得注意的是,手机上的导航选项是按比例缩小的。在手机网页中,最好只提供最常用、最有用的链接选项,同时在设计时尽量让用户能够更加方便地接入其他的导航链接。
  9. 注重页面颜色对比
    由于使用手机屏幕不能拥有电脑或笔记本屏幕一样的使用体验,所以在设计手机Web页面的颜色时,为了确保用户能够有良好的阅读体验,设计师们一定要注意页面背景颜色和文字颜色的协调搭配。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
基于HTML/CSS/JS微信公众号展示页面模板
基于HTML/CSS/JS微信公众号展示页面模板
150 0
基于HTML/CSS/JS的动态元素周期表
基于HTML/CSS/JS的动态元素周期表
182 0
基于HTML/CSS的响应式俄罗斯套娃ʕ •ᴥ•ʔ小游戏
基于HTML/CSS的响应式俄罗斯套娃ʕ •ᴥ•ʔ小游戏
101 0
简明 HTML CSS 开发规范
简明 HTML CSS 开发规范 作者:wjack    文章来源:蓝色理想//总论本规范既是一个开发规范,也是一个脚本语言参考,本规范并不是一个一成不变的必须严格遵守的条文,特殊情况下要灵活运用,做一定的变通。
705 0
4款Windows下的免费HTML&CSS编辑器
导读:今天向大家介绍4款Windows下的免费HTML & CSS编辑器,以下是文章内容: 1. Notepad2 Notepad2是Windows下最流行的应用工具之一,是一个快速,轻量级,简洁的应用程序。
952 0
介绍html CSS和JS的定义或引用
现在的网页设计,一般采用内容与表现相分离,即网页的组成包含:内容(HTML)+ 样式(CSS) + 脚本(JS) 。 浏览器解析原理 服务器接收到HTML->解析HTML结构建DOM树->解析CSS构建渲染树->为渲染树生成布局->绘制渲染树;在构建DOM树的同时,如果有JS,同时调用JS引擎解析。
1018 0
6种编写HTML和CSS的最有效的方法
译文出自:开源中国社区
545 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
PWA:移动Web的现在与未来
立即下载
从Web到Cloud App——YunOS Web App 开发经验分享
立即下载
React Native 全量化实践—web 技术打造移动研发新模式
立即下载