选择分类
  • 云瑞原创
  • Mockups
  • Ui Kits
  • 背景纹理
  • 图标
  • 平面图形
  • 探索
  • 笔刷
  • 图层样式
  • PPT模版
  • 影视素材
  • 教程
  • C4D资源
  • PS动作
  • 常用3D资源
  • 字体
  • 网站模板
  • LR预设
  • 设计学院

了解视“网膜屏准时代”的网页和移动端Apps的设计&HTML制作

苹果公司率先在许多设备上使用了视网膜屏标准。2012年发布的MacBook Pro上就已经开始使用了视网膜屏显示器,iOS设备使用了该显示器的更是不胜枚举。这意味者消费市场会不断增长,而设计人员必须跟上这一变化。

了解视“网膜屏准时代”的网页和移动端Apps的设计&HTML制作 sleek apple macbook pro store model retina monitor display

在本指南中,我们分享的是有关视网膜(Retina)显示屏的用途及想法。构建于原生Android或iOS的APPS对于这个特性的应用会简单些,而在网页上就会复杂很多。如果你对视网膜屏相关的设计不是很熟的话,要掌握这些需要做一些练习。当你的作品能适配各种显示器,并有完美而精细的展示效果时,所有的付出都会是值得的。

关于视网膜屏的基础

你考虑屏幕像素密度的时候,一般用相应的物理单位PPI(Pixels Per Inch所表示的是每英寸所拥有的像素(Pixel)数目。因此PPI数值越高,即代表显示屏能够以越高的密度显示图像。当然,显示的密度越高,拟真度就越高。)这是测量共同单元,它改变着每个设备。常规的屏幕中有一定的像素在一块1×1英寸的屏幕中。

而在视网膜屏中,像素的数量将要求增加1倍。苹果就是配备了一个这个具有双倍像素显示能力的物理屏。这个技术被认为是已经到达人眼识别极限的。

可以缩放的页面元素,如:文本、CSS容器和SVG图像,它们可以自动适应双倍分辨率。位图和固定宽度的元素则会自动拉升。设计适用于视网膜屏的网站是为了让你的页面内容更灵活的显示。图片应该是SVG格式的,你也可以为这个显示器设计双倍像素的图片。

用字体代替图标

一些熟悉CSS3的设计师会知道自定义字体。您的字体包可用是本地连接也可以是远程连接,这样在CSS中形成一个新的家庭。而且里面除了可包含数字和字母外,还可以包含图标字体。

这样做比做图标矢量化和创建双倍像素图标要好得多。图标字体会根据屏幕大小,自然扩大。用百分比或EMS为单位将提高其的适配性。你可以用HTML代码写图标,这样服务区就无须请求HTTP文件。

这虽然会让图片看起来非常完美,但是也会产生很多代码。大多数图标会像字体一样显示,单色和一些文字效果。如果这些能提高您网站设计的效率,我强烈推荐使用它。否则你在图片和字体之间做判断也会很麻烦。

如果你正在找一个漂亮的字体合集,可以开始浏览We Love Icon Fonts。很多设计师在Github共享他们的文件,而这些内容也不会100%被Google搜录。你可以利用此工具定位字体图标,也可以上传自己的。

可缩放的矢量图形

矢量图形一般用于logo和图标设计,并需要为不同的分辨率制作不同的尺寸,但是这些图形在很多浏览器里都不支持,直到现在一些关于SVG的浏览器标准发布后,才开始有了很好的支持。

图形本身的属性特征包括颜色、曲线、线段、阴影和其他典型的数据。老的浏览器可能不支持这些图形,网页无法渲染,但是你可以做一个类似 SVGeezy  的图形处理。

svgeezy pink purple fullscreen background website layout

要来设计一套完整的图标,你需要一定的学习和拥有相关的工具。如果你还不是一个成熟的设计师,去寻找免费资源是一个好的做法,我推荐一个地址给开发者们:primer to hacking SVGs

CSS3视网膜屏背景图片

两种常见的视网膜屏图形切换方式:1、使用CSS3 media queries。2、使用JavaScript库的功能。但CSS3有些旧浏览器依然不支持,而JavaScript也可能会被人禁用。这两种方式都能选,主要看你的目的,以及你如何创建你的网站。

利用CSS3 media queries实现网站图片切换,需要在视网膜屏和非视网膜屏的网站上检查,我们设置视网膜屏的背景图片可以通过一种方法。看看这段来自于this Sitepoint article的代码是如何做的。

 

#myimage {
  width: 400px;
  height: 300px;
  background: url('lo-res.jpg') 0 0 no-repeat;
}

@media
screen and (-webkit-min-device-pixel-ratio: 1.5),
screen and (-moz-min-device-pixel-ratio: 1.5),
screen and (min-device-pixel-ratio: 1.5) {
  #myimage {
    background-image: url('hi-res.jpg');
  }
}

检查多种尺寸的设备屏幕,最小的像素比往往会反馈一些同样的值,现代哪些支持CSS3的浏览器会迅速作出反应,它几乎是瞬间呈现给访问者的。今天media queries是建立在新的CSS3规范上的。虽然这些东西很流行,但是趋势并不是那么好,做为设计师要在实践中去学习这些。

JavaScript 实现

并非所有的浏览器都支持CSS3效果,虽然视网膜显示器上的大多数浏览器一定会支持。但是如果要保险,适当的情况下,我还是建议使用 JavaScript 的解决方案。如智能手机和电脑都默认支持了JS。

我想给大家分享两个JS库,这些绝对值得您拥有。第一个叫做Foresight.js可以检测设备是否具有视网膜屏,然后它会根据您的设置来自动拉伸图像。以下是一段演示代码。

live demos(点击查看演示)

retina.js library open source website layout screenshot

另外一个库我们也越来越青睐,Retina.js。它是一个新的开源jQuery插件,它能完成很多和Foresight一样的任务。他将判断用户是否有视网膜屏的显示器,然后使用@2倍的图片来替换常规图片。如果服务器上没有独立的文件,它就只会拉升原来的。这是一个很小的脚本,使用也很简单。

相关阅读(后续翻译)

总结

我希望这些提示能让你开始探索如何建立灵活的准视网膜屏网站布局设计。规划设计好,并利用这些知识加快你的进程。如何让你的网站开起来是个响应式风格?明智的做法是选择好相应的技术,来处理好视网膜屏显示。如果你有任何问题和建议,请在下面讨论吧。

 

原文链接:http://webdesignledger.com/retina-ready-design (云瑞译

云瑞设计小程序
云瑞设计小程序

微信扫一扫
手机使用更方便!

云瑞设计订阅号
云瑞设计订阅号

关注我们的微信订阅号,不错过任何福利。