【史上最干】Material Design复杂响应式设计
2011年，Gmail邮箱的按钮变得更加扁平化。2012年，Google引入分层的卡片设计，使用更多的空白和精心设计的层次排版结构。经历了几年的迭代和提炼，Google寻找到了一种可以贯通的理论体系，即把系统内的各种设计都规范成一种变形的纸片，并套用现实中纸墨的物理模型进行交互，这就是2014年GoogleI/O大会隆重发布的MaterialDesign。MaterialDesign提出了平面像素的Z轴概念，通过纸片在物理世界中形态的抽象和提炼，定义了各种信息层级和常用状态的表达方式，并详细讲解了各个细节的处理方法，就像一本考试大纲，囊括了产品中常用的UI细节，甚至一些UX细节。这里并不赘述，想看详细的DesignGuide请点击这里(要搬梯子)，翻译版的点击这里。如果说UX和UI的展现，是连接产品与用户的纽带，那么产品的UX以及UI应从产品的核心逻辑延展并且推演而来。如果说产品的核心逻辑或者技术的实现难易会成为设计展现的限制，那么UX和UI应是在各种限制下所权衡出的最优解。而MaterialDesign则像是架桥说明或者权衡出
微软首页大改版：Modern元素与响应式设计
IT之家讯自从网络发展开始迄今的20多年来，微软的首页Microsoft.com的访问人数在全球范围内始终排在前十。而仅仅在过去的两年里，Microsoft.com便重新设计了17次，而今天，微软再次将首页改版。▲全新微软官方主页新版主页大量使用Modern元素，使网页整体更加美观，更加贴近Windows风格体验，同时新版主页使用了响应式网页设计，也就是无论用户使用任何设备访问，都能获取较为出色的访问体验。▲再来看看旧版主页响应式网页设计（英语：Responsivewebdesign，通常缩写为RWD），又称为自适应网页设计、回应式网页设计。是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。
2014美国数据新闻不完全总结
2014年美国数据新闻界欣欣向荣的景象从年初的NICAR(NationalInstituteofComputerAssistedReporting)会议就可见一斑。地处华盛顿和纽约中间，主办地巴尔的摩汇聚了美国数据新闻界最优秀的记者、编辑、程序员和客座教授，还有抱有数据新闻理想的在校学生，以及积攒了几个月经验正在找工作的实习生。第三方数据提供商开培训课，教媒体编辑使用自己的API；第三方地理位置信息提供商组织讨论，介绍专为媒体打造的讲故事新平台。14年的与会人数创出新高，面试在酒店大堂、楼下咖啡馆乃至周边酒吧低调进行，团队负责人喝酒唱歌交换名片，筹划中的项目几个月后渐露端倪。专业化数据新闻平台建立2014年最值得行业内外称道的标志性事件是上半年几大专业化数据新闻平台的建立。从纽约时报转投独立门户的NateSilver在新东家ESPN的支持下建立了FiveThirtyEight.com，专注政治选举、体育赛事预测；前华盛顿邮报编辑在VoxMedia旗下成立了vox.com，为公众提供简洁明了能看懂的新闻；纽约时报新栏
100个响应式设计线性图标下载
很多情况下，因为响应式设计布局的限制，图标在不同分辨率下显示不够友好，这情况最好的解决方法就是使用图标字体，或者为图标设计多套尺寸出来。不过设计多套图标实在太费时间，如果有免费的话不更好么？那么接下来为大家分享的一套响应式图标也许大家会喜欢，图标数量有100个，并设计有不同的尺寸，分别为：16×16,32×32和64×64。加起来一共有300个图标，应对一般的网站或APP项目也足够了。该图标在creativemarket素材上销价为20美元，现pixelbuddha免费分享出来。值得注意的是获得下载地址需要提供邮箱哦。
设计师不应该错过的响应式设计框架
当下最火热的框架就是Bootstrap和Foundation了。随着响应式设计框架越来越火，一个巨大的争议出现了：为什么一个专业的设计师还需要用这些框架呢？许多人宣称响应式框架是可怕的，因为他们根本不懂一点点html和css的知识。下面是另一些具有标志性的反对使用框架的意见：设计师可以写自己的框架，如果他们懂得一点点html和css的知识的话就更应该自己写。基于框架的网站加载非常慢。基于框架的网站看起来大同小异。伴随多余的div标签，5000+行的css后者更多的javascript文件，网站膨胀是常见的。尽管反对者的抗议很强烈，但是丝毫不影响框架的持续流行。我认为框架是有用的，即使是最有经验的web前端开发人员也可以好好研究一下。下面我将说说我支持框架的原因。Paul-rand美国网站PaulRand是使用Foundation建设的一、响应式设计框架一天早上，我正在看EliWhite在NortheastPHPConference上的的关键演示，他是译文PHP开发人员，他所谈到的是web和PH
浅析网页响应式设计
网页响应式设计是什么，简单来讲这个东西可以让你的网页在各种设备上有比较完美的体验。这个在多屏时代及其重要，有一定的积极作用。下面简单的谈谈他的优缺点以及适用范围。优点：1，节省人力成本，你不需要很多人来做触屏版开发和运营；2，做活动更容易，在PC端完成后手机端可以自动同步，非常简单；3，一个网页不用更多研发和运维成本自然也会下降。缺点：1，要考虑更多的分辨率，交互和场景，对设计师和PM的能力要求更高；2，框架灵活性差，UI发挥空间更小；3，页面考虑东西更多，设计时间也会变得更长；4，需要在加载与文件大小上做控制，因为手机端的下载速度与流量都有限制。使用场景：小公司人少事多，不用专门为移动网页重新设计和开发。因为UI发挥空间小等因素，这种响应式设计不适合界面元素和交互等更加复杂的网页，比如淘宝，但适合形式相对比较单一的媒体网站，比如人人都是产品经理社区。下面举几个响应式设计的例子：http://www.36kr.com/http://www.youku.com/http://www.letv.com/
响应式设计争议：留住用户与失去用户
译前言：2015年响应式设计趋势的延续，也将带来更多的争议和思考，此文所引论据较为客观，点出了响应式概念的初衷和近年来跨屏设计的状况，并提供了解决思路和可参考的具体方法，原文下的评论也有诸多争议，有兴趣可以移步一览。你脸上挂着微笑心情愉悦地缩放着浏览器窗口时，认为网站达成了移动端友好体验的目标。在探讨之前我要提前推论：如果你只是把响应式网页设计定为终极目标并且是唯一的移动端方案，是在流失用户，也许还有金钱。幸运的是我们能够修正这些错误。这篇文章的内容将涉及移动网页与响应式设计的关系，始于如何提供灵巧的响应式设计，及移动端的性能为何如此重要、响应式设计何以不能视为网站的目标，并止于技术本身的性能争议，以便辅助理解问题的真正所在。2000年起，设计师和开发者就已对移动端存在的问题过分简化，而现在有些人则认为响应式网页设计是一切难题的银弹[1]。我们需要正视的是，达到移动网页的轻快体验应盖过其他任何目标。向所有移动设备传送一个快速可用并全兼容的体验是一个挑战，在实施响应式技术时也是如此。而在一开始便关注性能将协助我们更易达成目标。
[译] 如何做好移动端的响应式设计：Viewport 控制
新人翻译，欢迎转载~英文原文地址：http://bitsofco.de/2015/respove-design-viewport/原文例程地址：https://github.com/ireade/viewports（可下载例程参照阅读）当我们在做响应式设计时，关注最多的是CSS的@media查询。不可否认，@media查询完成了很多工作，但一个网站的响应能力还是取决于对Viewport的控制。当我们想根据屏幕尺寸来自动变化页面布局时，我们会像这样做：@mediascreenand(min-width:960px){body{background-color:green;}}@mediascreenand(max-width:960px)and(min-width:500px){body{background-color:pink;}}@mediascreenand(max-width:500px){body{background-color:yello
Responsive Design常用的媒体查询
（PS:原文写于2012年，本文参照原文作了适当修改，不当之处请指出）现在Web朝着响应式的趋势发展，媒体查询在创建响应式网站中起到了主要作用。没有媒体查询几乎不能实现响应式设计，利用媒体查询，我们可以针对特定的设备，如显示器、智能手机和平板，写CSS。媒体查询是响应式设计的核心在这篇文章中我将分享一些到目前为止我收集到的常用媒体查询。在一些示例中，我可能是错误的，但是不用担心，因为我针对这个开通了评论功能。我把它们分为显示器媒体查询、智能手机媒体查询和平板媒体查询显示器媒体查询显示器媒体查询是以屏幕大小为基础划分的640px@mediascreenand(max-width:640px){}800px@mediascreenand(max-width:800px){}1024px@mediascreenand(max-width:1024px){}智能手机媒体查询适用于大部分主流智能手机iPhone(2G-4S)/*LandscapeMode*/@mediascreenand(max-
实用干货！聊聊3种最常见的响应式设计问题
@十萬個為什麽：本文重点讨论设计师遇到最多的3个响应式设计问题，也会提供一些规避错误的策略>>>响应式设计方法对开发者非常有用，因为它使我们的内容在各种设备上广为传播。不用保留几个独立版本的网站，也可以摒除诸如缩放和流式布局这些方法的弊端。缩放、流式布局与响应式这些术语容易造成混淆，设计师常常错误地交替互用。实际上，每个都是布局技巧的显著进化过程，像技术演进那样逐一显现。缩放布局，旨在相对缩放每一个元素。它们会随着窗口大小变化动态缩放内容，就这方面而言，它们是响应式的。布局本身保持静止，通过改变每一个元素来保持一致的表现。上图：不同分辨率下缩放布局的例子，这种设计为了统一牺牲了易读性。流式布局就不一样，因为它们随着窗口尺寸缩放容器元素。通过em这类相对单位可以做到这点，克服了缩小文字的问题。用户主动缩放时，设计就被破坏了。上图：不同分辨率下流式布局的例子，这种设计为了易读性牺牲了统一。响应式设计不会缩放任何东西。相反，它会根据窗口尺寸决定显示哪些内容。上图：不同分辨率下响应式布局
Responsive Web Design Overview
布局特点1.单列布局vs水平布局手机屏幕宽度较小，因此多采用单列布局。反观桌面网页设计，为了利用宽度，往往使用各种水平布局的组件，诸如水平导航栏，水平按钮组，水平分页等。然而水平布局的组件，在移动端中，如果设备宽度不够，会导致组件割裂换行，影响视觉效果。因此RWD的基本思路之一，桌面使用水平布局，移动端使用单列布局。实现参考按钮组http://zrss.github.io/ResponsiveDesign/templates/rw-btn-group.html分页样式http://zrss.github.io/ResponsiveDesign/templates/rw-pagination.html发布话题http://zrss.github.io/ResponsiveDesign/templates/rw-topic.html2.流式布局vs固定布局所谓流式布局呢，举个例子，就像一碗水，宽度变小了，高度就会变长。本质是百分比宽度布局，不使用绝对定位样式，因为使用了绝对定位，会使得元素脱离文档流，
《学习响应式设计》作者Clarissa Peterson访谈问题有奖征集（图灵访谈）
ClarissaPeterson是一位用户体验设计师、Web开发者。她是蒙特利尔的一家响应式网站设计咨询公司Peterson/Kandy的联合创始人。她曾在美国公共交通联合会任Web经理，在此期间她对该组织的网站进行了大规模的改革，在此之前，她曾分别在公益组织AARP以及国会图书馆担任编辑和开发者。Clarissa是一位很受欢迎的演讲者，她经常在北美和欧洲举办的开发者会议及研讨会上发表关于响应式设计、移动策略和用户体验方面的演讲，在过去的3年中，她一共做过40场演讲。你可以通过她的个人网站http://www.clarissapeterson.com/了解更多。ClarissaPeterson著有《学习响应式设计》一书，该书全面介绍了响应式Web设计策略与技术，引领读者掌握从项目立项到网站上线的响应式设计工作流程。Clarissa不仅从用户体验的角度探讨响应式设计，还深入解读了需特别考虑的设计元素，包括文字排版、响应式导航和页头，以及响应式设计的一大问题：性能。作品选读：什么是响应式设计最终入选问题的提问者，将获得图灵
响应式设计让网页设计失去灵魂了吗？
响应式设计让网页设计失去灵魂了吗？我们能否既让网页是响应式的，同时又拥有灵魂？byJoshuaJohnson|原文链接：http://www.smashingmagazine.com/2015/07/06/hunt-for-the-webs-lost-soul/响应式设计让网页设计失去灵魂了吗？我们能否既让网页是响应式的，同时又拥有灵魂？·我们得到的栅格系统、流动布局成为标配给我们带来了很多好处：1、用户在使用网页时感到熟悉、轻松；2、制作原型（相对）快速、简便；3、建站技术的高度标准化；4、快速的布局可以节约成本；5、严格的网格布局促成了响应式设计；这些标准化和组合技术带来了巨大的价值，无数的个人和小企业使用这样简单、吸引人（但不独特）的网页设计与世界分享他们的品牌并从中获益，然而这只是故事的一个方面。·我们失去的这些设计都开始变得如此相似。·网页设计雷同的原因1.版式布局（LAYOUT）版式布局的局限性是网页设计缺乏变化最突出与明显的的原因之一。去除颜色，动画，视差滚动
流动法则与响应度量——1688网站的响应式设计
Byyuchanhe•Design•31八2015新的设备不断增加，旧的设备依然存在，这种快速增长且日趋加剧的可联网设备的多样化，使得网页设计已不再有标准的屏幕尺寸。基于一个固定尺寸对网站页面进行设计的模式，已无法满足用户设备多样化的通用需求。理想的情况是分别为每种设备单独创建一个版本，然而这对于大多数网站来说是不切实际的，于是越来越多的网站选择成为响应式，响应式设计已成为网页设计的一大主流模式。除了设备多样化的现状与趋势之外，响应式设计能够带来多终端体验的一致性，因此作为全球企业间(B2B)电子商务平台的我们（1688网站）也在积极研究适用于本站的响应式设计方式。本文将对目前主要的响应式设计方式进行梳理，把不同响应方式的响应规则与体验改善程度通过可视化的方式进行量化评估，并基于1688网站的设计现状及用户设备环境，反思网站的响应式设计模式，从而探索适用于本站的响应式栅格系统及普适规则。一、什么是响应式设计自2010年5月，伊桑.马科特（EthanMarcotte）提出并实践了响应式网页设计，便引起了广泛关注
图灵访谈 ： [英]《学习响应式设计》作者Clarissa Peterson：响应式设计并不是万能的（图灵访谈）
ClarissaPeterson是一位用户体验设计师、Web开发者。她是蒙特利尔的一家响应式网站设计咨询公司Peterson/Kandy的联合创始人。她曾在美国公共交通联合会任Web经理，在此期间她对该组织的网站进行了大规模的改革，在此之前，她曾分别在公益组织AARP以及国会图书馆担任编辑和开发者。Clarissa是一位很受欢迎的演讲者，她经常在北美和欧洲举办的开发者会议及研讨会上发表关于响应式设计、移动策略和用户体验方面的演讲，在过去的3年中，她一共做过40场演讲。ClarissaPeterson著有《学习响应式设计》一书，该书全面介绍了响应式Web设计策略与技术，引领读者掌握从项目立项到网站上线的响应式设计工作流程。iTuring:Generallyspeaking,howdoesdesignprocessofRWDdifferentfromregularwebdesign?Intraditionalwebdesign,thedesignercreatesa"picture"of
《学习响应式设计》作者Clarissa Peterson：响应式设计并不是万能的
非商业转载请注明作译者、出处，并保留本文的原始链接：http://www.ituring.com.cn/article/203460ClarissaPeterson是一位用户体验设计师、Web开发者。她是蒙特利尔的一家响应式网站设计咨询公司Peterson/Kandy的联合创始人。她曾在美国公共交通联合会任Web经理，在此期间她对该组织的网站进行了大规模的改革，在此之前，她曾分别在公益组织AARP以及国会图书馆担任编辑和开发者。Clarissa是一位很受欢迎的演讲者，她经常在北美和欧洲举办的开发者会议及研讨会上发表关于响应式设计、移动策略和用户体验方面的演讲，在过去的3年中，她一共做过40场演讲。ClarissaPeterson著有《学习响应式设计》一书，该书全面介绍了响应式Web设计策略与技术，引领读者掌握从项目立项到网站上线的响应式设计工作流程。问：总体上说，响应式设计的设计过程和一般Web设计的过程有什么不同？在传统Web设计中，设计师用Photoshop创造一张网站的“图片”，而开发者用HTML和CSS再现这个设计。
酷站两连发！人工筛选的可商用图库泼辣有图+响应式网页开发神器
编者按：今天的两枚酷站，一个是特别强调图片背后故事的可商用图库「泼辣有图」，另外一个是能帮开发者测试不同设备上，网页内容自适应是否正确的扩展插件，一个以品质取胜，一个以实用为傲，来收！泼辣有图泼辣有图是泼辣熊团队出品的一个免费商用图库，它们家还有一款产品叫「泼辣修图」，我们在之前介绍过，修图上比普通的手机软件专业，操作上比专业的修图软件简单，也是国内为数不多的支持曲线功能的手机APP，至于网页版的强大，可移步之前的介绍：《在线专业修图神器泼辣修图7个新功能（附调色教程）》，这儿不多赘述，直接来看他们新推出的这个图库。网站的简介中有两个亮点，一是全部图片采用COO协议，无论是谁都可以下载原图后免费商用，另外一个是人工挑选机制，现在大多数免费图库的图片质量都参差不齐，推出这个功能确实很有吸引力，而且据小编打听，团队中还有后期高手@他山之眼坐镇，品质可以打包票。网站现在刚开放，仅收录了2016年1月份的精华图片，我们滑动鼠标可以看到：图片左下方是作者的信息，单击后可以直接进入摄影师的微博，中间的文字部分讲
到底什么样的设计才是响应式设计
对于设计师来说，工作量绝对等于原来的50%，因为原来需要设计两套，现在只需要设计一套了；对于开发人员来说，就不能太任性了，HTML结构要写得尽量易于多个布局，CSS在原来PC端的基础上加上响应式(MediaQueries)的部分，所以工作量也许是原来的???。然而，有一个条件，那就是设计是真正的响应式设计！！！因为响应式指的仅仅是CSS的响应式，HTML是不变的，而CSS不是万能的(百能都不是)，针对特定的HTML结构，如果要布局出完全不同的样子，不说能不能做到，就算能做到，代码量也一定比原来的PC+移动多。所以，工作量取决于响应式设计的可能性和难易程度。所以，响应式是有限制的，限制在那些瀑布式成局中，限制在液态类型的网站中。更严重的是，大多数设计压根就不是响应式设计。如果有人说一个不懂HTML/CSS3的设计师能设计出响应式的设计，我愿意把我的膝盖跪碎。所以，开发人员郁闷了，连带设计师也郁闷了。所以，阿里分出了PC端和无
你的Web应用是否需要响应式设计
移动互联网盛行之下，怎能没有移动端Web?那么问题来了，移动端Web是什么?响应式设计又是什么?是否都有必要进行响应式设计?首先我们先说一下移动端Web，它是相对于PC端而言的，典型的移动端包括手机、Pad等设备。以往的大网站都是依据我们的电脑显示器的分辨率设计的，宽度固定(比如经典的960布局，即整站的宽度为960px)，这样的网站在移动端打开时，展现出来的还是PC端的样式，要么整体缩小，要么会显示出宽宽的滚动条，用户体验较差，即便是移动端浏览器可以转码处理，但体验往往并不是很好。针对这种情况，一种过去流行，现在依然常用的解决方案是重新设计一个移动端网站，即常说的手机网站。但这样增加的建站成本较高，并且后期的维护成本也会增加。为满足各式各样的设备，响应式布局诞生了。响应式布局是EthanMarcotte在2010年5月提出的一个概念，即一个网站能够兼容多个终端，并不是为每一类别终端做一个特定的版本。此概念是为解决移动互联网浏览而诞生的，并且响应式布局可以为不同终端的用户提供更加舒适友好的界面和更好的用户体验。如图：响应式Web
bootstrap 响应式设计
Bootstrap响应式设计简介本教程讲解如何在网页布局中应用响应式设计。在课程中，您将学到响应式Web设计。随着移动设备的普及，如何让用户通过移动设备浏览您的网站获得良好的视觉效果，已经是一个不可避免的问题了。响应式Web设计就是为实现这个目的的有效方法。什么是响应式Web设计响应式Web设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如，您先在计算机显示器上浏览一个网站，然后再智能手机上浏览，智能手机的屏幕尺寸远小于计算机显示器，但是你却没有感觉到任何差别，两者的用户体验几乎一样，这说明这个网站在响应式设计方面做得很好。我们已经在我们的流动布局实例中应用了响应性能，并请您在不同的屏幕尺寸下进行浏览。您可以通过Chrome或FireFox的窗口大小调整的扩展来调整浏览器。点击这里，可以查看Bootstrap响应式设计实例。响应式Web设计工作原理为了应用响应式Web设计，您需要创建一个包含适应各种设备尺寸样式的CSS。一旦页面在特定的设备上