移动网页设计原则.doc_第1页
移动网页设计原则.doc_第2页
移动网页设计原则.doc_第3页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、移动网页设计原则现在的互联网，是一个用户体验至上的时代，大多数公司都会把如何提高产品的易用性放在首要位置，那么移动网页设计应该遵循哪些原则呢，一起来看看!Win8 和 iOS7 的出现，将互联网行业中很多产品设计带回到原点，或许更是另一个新的起点。Win8 的 Metro UI 、iOS7 中图标的扁平化设计、一直崇尚简约的豆瓣网、还有顶着时代工匠称号的老罗所设计的锤子ROM，无一不体现着简约的风格。言归正传，回到我们图片优化的主题上。在产品设计和UI 设计阶段，除了内容图片， 其他的图片都是起修饰的作用。也就是对于传递信息来说并非本质性的。所以最大的优化就是不要图片。在进入到研发阶段之前，就

2、要确认设计，设计本身是否需要用到那么多的图片，还是说可以做到更简洁!Chrome，FF 等浏览器厂商为互联网的发展做了这么多贡献，为什么我们还要让那些不兼容CSS3 的浏览器阻碍互联网的发展呢。因此，让我们直接使用CSS样式代替图片来实现修饰效果 ! 例如：半透明、圆角、阴影、高光、渐变等。这些效果主流的浏览器都能够完美支持，而对于那些低端浏览器，我们并不会完全抛弃他们，“渐进增强”则是一个很好的解决方案。至于什么是渐进增强，这里不再用过多篇幅去解释，如果感兴趣可以参考CSS“渐进增强”在web 制作中常见应用举例。我们常见的图片格式有JPEG、 GIF、PNG。基本上，内容图片多为照片之类或

3、图片构成较复杂的情况，适用于JPEG。如网站中的Banner 图、轮播图、大尺寸背景图等。修饰图片通常更适合用无损压缩的PNG。而我们主要用到的 PNG图片又分为PNG-8和 PNG-24两种，PNG-8格式不支持半透明，也是IE6 兼容的图片存储方式。如果对图片质量要求较高的半透明或全透明背景，保存成PNG-24更合适。有时候会遇到在IE6下应用PNG-24 图片的情况，关于IE6下PNG Alpha透明的解决方案可以参考IE6中PNG Alpha透明。我在项目中常用的方法是AlphaImageLoader筛选器。GIF 基本上除了GIF 动画外不要使用。除了这些格式之外，Chrome、新版

4、Opera、 Android 4+支持 WebP格式， IE 9+ 、IE mobile 10+支持 JPEG XR。这两个新格式都支持无损和有损压缩，都具有更良好的压缩比。当然这需要为不同的浏览器返回不同的图片，增加了开发成本，也增加存储成本。不过你省了流量或者相同流量下改善了图片质量，提升了用户体验。这就需要根据项目需求进行取舍了。CSS Sprites，将同类型的图标或按钮等背景图合到一张大图中，减少页面请求。Icon Font，将图标做成字体文件。优点是图标支持多个尺寸，兼容所有浏览器，减少页面请求等。美中不足的是只支持纯色的icon 。SVG，对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SV

人人文库> 全部分类> 行业资料

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论