互动中国分享: 网页设计怎样最美？
从前，设计师所能使用的字体，受用户计算机本地已有的字体所限；现在，借助Googlefonts和Typekit等服务，从理论上说，你能使用的字体是无限多的，极大增强了网站设计的吸引力。设计师利用这一机会也已有了一段时间了，越来越多的网站也体现了对字体的重视；甚至有些网站如Typographica，字体就占了整个网站设计的绝大部分，出来的效果也相当不错。
什么网页设计是好的设计
每个人的审美可能都是不同的，在设计师手中成形的设计作品也可能有设计师的偏好，那什么样的设计才是好的，是否有一定的规律所寻。而web的设计趋势可以让人有所领悟。第一、单页面设计在以往，一个长的单页面是不被看好的设计，但是自从苹果的出现，苹果的官网也一度成为设计师纷纷模范的对象时，长的单页面形式便成为一种好的网页设计趋势，长的单页面的形式比起翻页的形式是比较方便的。第二、用品牌、商品照片做背景品牌的影响力是强大的，所以针对宣传产品的网站，大篇幅的广告图片设计不愧为一种好的设计，这样既可以宣传品牌也可以形成强烈的视觉表达效果，所以我们可以在时尚、服装品牌等行业看到类似的设计。第三、色块的设计色块的设计，可以看到很多网站有这样的设计，纯色和图片拼接成的一块区域，在纯色的背景上写上文字，在图片的背景上写上文字，不同色块可以让人有继续阅读的兴趣，也是能形成强烈的对比。第四、超大图片精致的icon图标的设计可以为网站增色不少，而超大的icon图标可以让整个网站更锦上添花，它可以让网站品牌更突出，此设计的流行主要在于mac程序
MeidaPost：移动网页优化下的响应式设计
标准，根据MeidaPost，有三个原因让RWD变得迅速流行：1RWD的优势使其成为主流在不到两年的时间里，RWD几乎被所有想针对移动优化的网站所采用，现在这个设计思路已经整合在网站开发的流程中2RWD对SEO支持最为良好因为同样的链接对应的是同样的内容，在SEO方面具有天然的优势，而且Google推荐采用这种设计标准3RWD也是移动受众需求的必须Google最近的研究发现67%的手机用户表示更乐意从移动优化的站点购买产品，3/4的用户表示他们更喜欢回访这类网站。随著移动变成越趋流行的网站内容消费方式，针对移动终端进行优化已经成为一种必须
2012是响应式设计之年
响应式图片说到响应式图片，还有很多工作要做，但目前已经有所进展。下面几篇关于响应式图片的文章都很不错：AListApart在年初的时候发布了一篇非常优秀的文章：响应式图片几乎准备就绪，我们开发者还需要做些什么？阅读：ResponsiveImages:HowtheyAlmostWorkedApple的iPadmini为窗口显示带来了更复杂的问题，但实际上这个问题已经存在很长时间。LukeWroblewski、Peter-PaulKoch、StephanieRieger和LyzaDangerGardner深入分析了该问题。阅读：VexingViewports越来越多的公司开始采用响应式设计今年开始，已经有不少公司开始应用响应式设计，下面是几个大公司的案例：Starbucks的网站现在已经适应手机、平板和桌面访问，他们意识到会有更多的人将通过手机或平板来访问网站，但他们以前的网站看起来并不理想，于是下决心做了些工作。即使是MickeyMouse也知道响应式设计将会是Web设计的未来，于
2013年10大网页设计趋势 响应式设计居首
2013即将来临，TheNextWeb总结出了2013年网页设计方面的10大趋势，其中包括响应式设计、Web字体、拒绝Flash、大背景图和留白、社交分享入口、冷色系、拟物化设计将不再时髦等，以下为TNW总结的十大趋势：1、响应式设计，一个样式适配多尺寸屏幕2、重视字体的选择，使用Web字体3、拒绝Flash，使用其他任何可能的替代技术4、苹果iOS的拟物化设计将不再时髦5、使用巨大的背景图构造大气的视觉效果6、产品和个人介绍页面留出更多空白7、更多的社交网络分享入口8、浅色、冷色调重新成为主流9、移动App将取代一部分移动网页流量10、内容依旧为王ViaTNW
2013年10大Web设计趋势
3.跟Flash说拜拜Flash很有可能要over了，因为它不利于一个网站的SEO，许多移动设备并不支持它，升级它是个很痛苦的事情（升级后在浏览器里会卡）；而且它的替代者都很优秀（HTML5/CSS3,JavaScript)。TNW大胆预言Flash将在2013年彻底结束，一些曾经支持它的公司已经开始转移注意力，重要的是，很少的设计师和开发者会使用到这个，而那些想雇用这些技术人员的雇主很难请到人才了。4.iOS“同形物”设计不再受推崇依据过去的线索来为新技术服务并没法太大地改进我们的思维方式。比如，我们不需要一个可视化的书架才知道那里有电子书要读，看电子书的封面我们就知道那是什么了。在苹果向其他公司展示它们“同形物”的设计美学时，我们已经看到了新希望，比如微软的Metro，所以2013的设计趋势是更多的公司将更注重跟随自己的设计灵感，而不是尾随“同形物”设计。5.用大幅图片来造成视觉效果有一个不争的事实是，越来越多的网站在它们的主页用大幅图片来突出影响，而且网站会自我调节，准备好足够的宽带和数据，只有大屏幕上的时
从科技博客改版看新 Web 设计、技术应用和信息流整合理念趋势
本文从TechmemeLeaderboard梳理了Top100资讯网站，筛选Mashable!、PandoDaily、TheNextWeb这三家（以下分别简称MA、PD、TNW）作为出发点，结合36氪此次改版，分享我个人的2013设计、技术、内容整合趋势的预测。设计：响应式设计（ResponsiveWebDesign）将被全面采用2013之前，网站设计首要考虑的是屏幕分辨率的问题，大体会将网站分为电脑桌面版和手机WAP版本，使用不同的二级域名访问或者链接跳转，也有WebApp形式的移动版，存在的问题是电脑、手机访问的体验、可用性都存在巨大差异。近两年移动设备飞速发展，在路上床上，茶余饭后使用手机或平板设备浏览资讯网站，与使用电脑浏览的频率基本一致，36氪网站有25%读者是通过移动设备访问的，这个比例还在增加，移动设备中一半属于平板。平板屏幕横屏和桌面电脑分辨率一致，竖屏却更接近手机分辨率的比例，这时响应式设计需求就体现出来了。现代的网站应同时、实时响应和兼容桌面、平板、手机的不同分辨率的排版。从
响应式设计在文字排版上的尝试，针对屏幕大小显示不同长度的文字内容
ResponsiveWebDesign即响应式Web设计，可以分别对桌面、平板、手机分辨率自动调整页面布局，除了ResponsiveDesign还有ResponsiveImage（根据屏幕大小显示缩放或剪裁的图片），现在有人尝试ResponsiveText，可以让你在手机、电脑或者大屏幕上分布看到不同长度的文字内容，示例如下：较大屏幕显示完整内容：较小屏幕显示更多内容：小屏幕小时重点摘要：当然这还只是一个尝试，实际应用可能会有很多问题，即同样的一个页面，在手机或者电脑上查看内容展现的信息量不同，或者与他人分享阅读阅读时会造成困惑或信息不对称。
分享29个超赞的响应式Web设计
最近几年，响应式Web设计不断印入人们眼帘，几乎每个人都在讨论响应式设计。如今，各个企业都在积极拥抱响应式设计作为未来的发展趋势。此外，越来越多的网站如雨后春笋般层出不穷，如何做到适应每一台设备呢？我们一起来看下这些最新的、智能的且时尚的响应式布局，兴许能为你开发网站带来一丝灵感。文中分享的这些网站来自不同的企业，涉及范围比较广比如，教育类、新闻类、电子商务类，所有的这些网站都有一个共同点即：强大的响应式设计。
响应式设计及其深层意义
ResponsiveDesign，中文称“响应式设计”，是移动时代的网页设计思路。之所以说其是思路而不是技术，是因为实现响应式设计的技术在这个词汇发明之前很早就有了。这篇文章不详谈技术，主要谈谈其背后的驱动力量以及其深层意义。词源“响应式设计”这个词源自“响应式建筑”。通过配备各种传感器、摄像头，建筑可以按照不同人群和环境的需求来调整自身的温度、光照、结构以及功能等等，这样的建筑就是“响应式建筑”。响应式设计则是把这个思想运用到了网页设计上，让网页可以根据用户、设备和场景的不同而做出不同的响应。为什么为什么要有响应式设计？有一内一外两个原因。内是因为原来的网页设计方式是基于传统平面媒体的，一切都是固定的。宽度有推荐宽度，字体有推荐大小，图片大小也是确定的，甚至设计师和开发者都以“像素级匹配”（pixel-perfect）为荣。可是，这里有一个问题。传统媒体是死的，书本、杂志、宣传册，不管是什么，印刷下来之后，内容就很难改变了，与之相对的，我们的网页却是非常生机勃勃的，随时都可以变，随时可以更新。其次，传统媒体是有边界的，它的大小
为什么响应式设计对SEO有好处？
响应式设计已成为网络营销上非常热门的话题，而且愈来愈火，这不禁引人思考，它是否真的就可以成为一个行业标准呢？答案很简短：是的。响应式Web设计意味着你无需把网站制作成多个版本，如移动版、桌面版或者PC版等，它会根据设备的分辨率和缩放自动重新布局，使网页能够适应不同的设备，并且用户看到的是相同的内容。就单单2012年，移动手机订阅已增加55%，这也充分说明响应式Web设计已成为网络营销的未来。它是如何工作的？是不是感觉听起来太好了，以至于缺乏真实性了呢？这一切都来源于EthanMarcotte在2010年发布的“ResponsiveWebDesign”，这是一篇非常简短的理论。响应式网页会基于浏览器屏幕自动调整元素的大小、形状、位置等，而不像以往那种开发一个800px网页，而且还要设置它位于屏幕中心。而响应式网页里的元素会基于CSS媒体查询自动适应屏幕大小。让我们举一个简单的例子，使用A-L这9个元素，在像笔记本或者旧的电脑屏幕（拥有较低像素），这些元素看起来会像3行3列的网格：
一套精致的响应式网页设计模版PSD下载
超赞！难得的一套响应式网页模版，分别含iPad、iPhone、PC三个平台的界面设计。这对最近有响应式设计项目的设计师来说，绝对是不可多得的五星干货！界面已经上传@微盘，下载请戳http://vdisk.weibo.com/s/u6sEw另外特别说明！本资源经官方授权（Cris）可以免费使用在个人和商业项目中。温馨提示：下载后打开PSD请记得戳开“智能对象”，记得！肯定会有一些同学会说怎么就一个图层，那些页面的详细分层呢？为了给你解释清楚，优设哥做了一张解说图。见下方！
基于物理尺寸的响应式设计
尽管设备的物理特征全然不同，但却可以拥有相似的屏幕分辨率。iPad(1代)屏幕尺寸9.7″，分辨率1024×768，像素132ppi。KindleKeyboard3G屏幕尺寸6″，分辨率768×1024，像素212ppi。图片来源：kodomut.这就是大家熟知的“resolutionmediaquery”，尽管它作为mediaqueries的规范已经有相当一段时间了，但这并不意味着所有人都会守规矩。不过还好，WebKit走在了前面，并极力推动它付诸实践。那么，我们到底该怎样充分利用这个好东东呢？请看下文分解。(Smashing’s提醒:我们正在组织一个全天研讨会，邀请了一批业内最受欢迎的web设计专家——举办场所位于我们的总部所在地德国弗莱堡(Freiburg)。座位有限，请立即抢购门票)
Jaco Pretorius: A Responsive Redesign
I’vefinallydecidedtodotheresponsiblethingandimplementaresponsivedesignformyblog.Today,websitesarebeingviewedonanumberofdifferentdevicesandbrowserseachwithdifferentdimensionsandresolutions.Mypreviousdesignwasterriblewhenbeingviewedonamobiledevice–Iwasdeterminedtofixthisaspartoftheredesign.AspartofthischangeIalsowantedtoimprovethereadabilityofmyblog–thepreviousfontwasn’tcrispenoughandIfeltit
为什么说2013年是响应式交互设计的一年
“2013年，将是自适应式网站设计的一年。”西格小编从Mashable上看到这篇文章。一直以为i额，响应式设计还离我们很远，HTML5的最终标准还没有制定，国内还有这么多的IE6、7、8用户，响应式设计在未来几年内，都不会是烟台网站建设公司所考虑的。但是，响应式网站设计，要比小编预想的来的更快得多。西格记得有一项数据表明，2013年中国的智能手机用户已经达到了4亿。此数据让一大部分烟台网络公司感到恐惧，但西格感到异常兴奋。原因还得从智能手机说起能手机，内置的浏览器版本都非常高。不管是UC、Opera、还是Safari、Chrome、firefox，都是优秀的现代浏览器。这些浏览器对javascript更加友好，同时，也支持html5。在手机端，用户已经和低版本的IE浏览器告别。也就是说，HTML5的年代提前到来了。HTML5将会给网站设计带来更多的交互设计、更友好的用户体验以及更快的响应速度。这对烟台部分只会做模版站的网络公司来说，将是一大灾难。公司的那套模版由于落伍，用户体验不好，同时，在移动设备端无法正常浏览，网站将会变得非常难卖。
经验分享：2013年10大Web设计趋势(翻译理论)
3.跟Flash说拜拜Flash很有可能要over了，因为它不利于一个网站的SEO，许多移动设备并不支持它，升级它是个很痛苦的事情（升级后在浏览器里会卡）；而且它的替代者都很优秀（HTML5/CSS3,javascript)。TNW大胆预言Flash将在2013年彻底结束，一些曾经支持它的公司已经开始转移注意力，重要的是，很少的设计师和开发者会使用到这个，而那些想雇用这些技术人员的雇主很难请到人才了。4.iOS“拟物”设计不再受推崇依据过去的线索来为新技术服务并没法太大地改进我们的思维方式。比如，我们不需要一个可视化的书架才知道那里有电子书要读，看电子书的封面我们就知道那是什么了。在苹果向其他公司展示它们“拟物”的设计美学时，我们已经看到了新希望，比如微软的Metro，所以2013的设计趋势是更多的公司将更注重跟随自己的设计灵感，而不是尾随“同形物”设计。5.用大幅图片来造成视觉效果有一个不争的事实是，越来越多的网站在它们的主页用大幅图片来突出影响，而且网站会自我调节，准备好足够的宽带和数据，只有大屏幕上
响应式设计网站的10个热门框架
在设计一个响应式网站时，运用到的计算是费时费力的，不过还好，国外有一系列的响应式框架模板可以使设计过程变得更便捷。这些框架或模板都有现成的栅格，布局和媒介，然后你可以尽情填充自己的设计理念。本篇文章汇总了国外设计师所推崇的大量热门框架模板，收藏之前，先来瞧瞧吧：）1.BootstrapBootstrap,是由Twitter的设计师开发的应用最广泛的框架，这上面的应用通俗易懂（这也是优设哥第二次推荐咯）。2.FoundationFoundation是先进的响应式前端框架，其具有一套根据你实际需求可调节的栅格系统.这方便在移动设备和台式设备上使用同样的标识。3.SkeletonSkeleton
复杂产品的响应式设计【流程篇】
都说2013年将是响应式设计爆发的一年。一淘设计团队在去年一淘首页改版时初步尝试了响应式，最近在一淘“玩客”项目中有了更加深入地应用，第一次在复杂产品中实现了全站响应式。中间积累了一些经验也踩了不少坑，于是就有了这个响应式设计三部曲，此系列文章包含理念篇、知识篇和流程篇。响应式网页不像传统网页只需考虑一种状态，不是交付一套设计稿就完事儿了，它给设计、前端和开发团队之间的协作模式带来新的挑战。在一个复杂产品全面响应式的项目里，交互每个阶段该产出什么？交互与视觉如何协作？前端何时介入？哪些事情让后端开发来做更合理？经历“玩客”第一版后，我们得到了一些答案。响应式设计之所以叫响应式“设计”而不叫响应式“技术”，是因为它是一项设计先行的工作。需要设计先明确好响应方式再实现出来，不能出一套设计稿后等着前端看情况把它变成响应式网页。所以整个流程最初从交互阶段开始，分成6个主要步骤，视觉、前端、开发等角色根据情况尽早介入。
网站的布局方式续-自适应布局（Responsive Design）
上一篇文章提到的“盒子布局（Boxed）”和“宽屏布局（FullWidth）”可以适用于绝大多数网站。但，还有另外一种布局方式，叫“自适应布局”，又叫做：响应设计（ResponsiveDesign）和响应式布局（ResponsiveLayout）。再加上适合移动设备（MobileFriendly），这些都是一个HTML5网站的最基本属性。先来段定义：响应设计（ResponsiveDesign）一种新兴的技术，它采用易变的布局和媒体查询扩展网站，使得网站能够动态适应各种尺寸大小的屏幕。Design）"title="网站的布局方式续-自适应布局（ResponsiveDesign）"class="alignCenter"/>Design）"title="网站的布局方式续-自适应布局（ResponsiveDesign）"class="alignCenter"/>各种设计事务所比如：家具设计的公司、建筑设计公司、室内设计公司、装饰设计公司等等。这些公司的核心竞争力就是“作品”，即图片。对于他们来说，网站图片越大越好，越清晰越好。
响应式设计时代，我们该如何设计网站？
Web近年来所发生的变化人们一直在谈论Web发生了改变，让我们首先看看Web究竟发生了哪些变化。屏幕尺寸90年代，Web页为640像素宽，21世纪初，其宽增长到800像素。几年以前，我们将它调整为1024像素。但就在5年前，“奇怪的事”突然发生了。小屏幕设备进入市场。一时间，我们对Web设定的宽就不再适合了。不久，平板电脑进入市场。现在屏幕视窗的高超过了宽。