19
2013-08

如何创造一个迷人的响应式设计网页【转摘】

响应式设计如今已经变得非常流行。网页设计师们倡导,各种品牌也趋之若鹜。它不仅仅是创建一个移动站点,而是让你的网站适用于每一种浏览器和屏幕尺寸,不管是桌面端、平板还是智能手机。

响应式设计简单说来就是创建一个不论大小尺寸都完美呈现的网站。在打开你的设计软件着手设计之前,你需要考虑和准备很多。这些看似“额外”的工作,却最终能够证明其是非常值得和必要的。很明显,设计师(或开发者)若不考虑响应式设计,网站就会倾向于呆板无趣。

网页设计师绝对有必要保持自己的创意贯穿整个响应式站点。鉴于更多人在使用平板和智能手机,你总是希望保证每个人都能访问你的网站。这里有一些提示,可以帮助你在设计响应式网站的同时,保持创意和高效。

1. 绝妙的字体

对于响应式网站,你不得不考虑它在小屏幕上的显示效果。随着屏幕减小,大部分元素都应该变化、缩小或者移动位置。字体当然也要具备这种能力,甚至更为重要。

设计师需要用不同的标题尺寸和多种文字大小。如今,我们在桌面端设计中常常使用巨大的标题和页头。这点不必延续整个网站,因为你总得考虑更小尺寸。使用FitText这类插件来缩小字号,也是其中一个选择(但我更建议采用CSS3媒体查询-译者注)。

Smith上使用了很多种不同字体来打造引人注目的外观和氛围。也将不同字体大小贯穿全站。桌面模式下,文字和段落以多列布局的方式显示。当窗口被缩小,则变成一列。但是文字的比例和样式没变,保持了一致性。

image

Smashing magazine的做法也一样。窗口缩小时,整个抛弃了右半边的设计(广告)。但不管怎么变,窗口中的文字、样式、颜色和大小都始终保持一致。

image

2. 精彩的图片

和文字排版一样,图像在任何网页设计中都至关重要。在响应式设计中,当你在更小的屏幕上浏览网站时,你的图片应该相应的等比缩放,这点和文字相同。响应式设计中有成百上千种不同的布局和图片尺寸。随着屏幕变大或变小,图片会改变形状和展现方式,甚至被裁切掉一部分。

理想情况下,你会希望确保窗口尺寸变化时,大幅摄影图片不会有任何裁切。另外一个需要考虑的问题是,你必须保证你的作品能够更快的加载,且对小尺寸屏幕可见。这就是为什么现在的设计师推崇扁平设计,因为其更容易实现。

Pandiscio中,首先你得注意一下这个大标题图片在桌面端的样子。它是完整的,伸向两侧边缘,而且质量相当高。当你缩小窗口尺寸,图片也跟着变小、变化形状(从矩形变成方形)、被裁切。这要求这些图片必须随屏幕尺寸变化时仍能保持漂亮的效果。

image

KinHR是个使用了各种不同图形化元素的网站。请注意在大小尺寸下,头图会像Pandiscio一样缩小。但不同的是,在网页主体部分中,图片缩小却保持外形不被裁切(保证图片完整显示)。

image

3. 导航很重要

如果人们不知道如何浏览你的网站,那他们就直接不浏览了。响应式设计的导航更难处理,因为我们已经习惯于为横向设计打造导航。如今,我们得创建能够轻易压缩以适应纵向规格的导航。

当只有少量链接时这个问题还不大。你可以将你的导航变小或缩至顶部,也可以为访客提供一个下拉菜单。主要问题是该如何处理包含更多内容的复杂导航。

Mashable上有大量链接,因为它有大量的分类和文章。在这之上,他们还有自己的公司二级页链接。Mashable决定在左侧为小屏幕浏览器创建一个弹出菜单。

image

4. 使之有趣

点击网上的链接,在看见页面之前,你很可能要坐等内容加载。精确地找到“下一页”按钮来浏览更多内容也非常令人讨厌。这类的事情并不有趣,也不直观。

注重细节并使你的网站更加直观,会令你的网站更值得分享。想想在所有尺寸的浏览器上使用同一个网站会是怎样。想想你执行一个操作时网站应该如何反应。找到这些问题并修复它们,你的网站更易用、好玩和直观。

Mud注重各种过渡效果,使得他们的网站很生动。很多元素滑动下拉和淡入,而不仅是生硬地移动和突然地出现,从而创造一种非常顺滑的与众不同的感觉。

image


在作品集之间跳转时,Neue Yorke用了很多动态效果。动画再次创造出了高端的感觉,让访客对即将显示的内容兴趣十足。

image

(一些细节和效果固然有趣,不过也要考虑性能。尤其是在移动端展现时,加载速度和操作的流畅性往往更加重要。译者加)

5. 来点新意

如果其他办法都没效果,那就发挥创意吧。响应式设计并不意味着要束缚我们的创作方式。总有实现创意的空间,无论通过代码还是设计。

Enso创造了一个看起来不太像响应式的网站。注意在尺寸缩小时布局的微妙变化,却仍然保持了他们的品牌和创意。

image

TBWA有一个创意精彩的网站,同样也有精彩的图片和字体!他们物尽其用打造了一个非凡且有趣的响应式设计。

image


结论

在响应式设计或任何网站设计中保持创意,和画出构思并修改定稿一样简单。开始规划网站的作用和功能,会比着手动工更有趣。响应式设计未必是一件重大、万全的、令广大设计师畏惧的任务。它其实非常简单!记牢所有我们以上讨论过的,然后创造出精彩的网站吧!

本文转摘自:黄杨的博客









除非注明,文章均为史亚永原创,欢迎转载!转载请注明本文地址,谢谢。

本文地址:http://www.shiyayong.cn/post/208.html

评论列表:

4  李明  2013-8-23 23:22:04 回复该留言  IP:203.210.7.60
我自己比较喜欢响应式主题,可以在各种**和流动设备有好的显示效果。
  茶馆老板  2014-1-17 15:38:19 回复该留言  IP:117.121.48.242
响应式页面会给用户更好地体验
茶馆老板
李明
3  哈秀时尚  2013-8-22 10:52:06 回复该留言  IP:119.131.245.74
过来留下脚印,顺便来学习一下
  茶馆老板  2013-8-23 20:19:26 回复该留言  IP:211.155.113.215
那以后常来哦
茶馆老板
哈秀时尚
2  星座运程网  2013-8-21 11:15:10 回复该留言  IP:183.16.197.98
说得很好,网站美观用户体验好
  茶馆老板  2013-8-23 20:19:09 回复该留言  IP:211.155.113.215
最近研究了html5和css3可以实现很炫的效果
茶馆老板
星座运程网
1  砸核桃分享网  2013-8-19 22:03:12 回复该留言  IP:182.242.227.181
响应式网站设计,将要成为主流~
  茶馆老板  2013-8-23 20:18:19 回复该留言  IP:211.155.113.215
是啊,这样的网站基本都用html5和css3
茶馆老板
砸核桃分享网

发表评论:

(设置个性头像)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

无觅相关文章插件,快速提升流量