发布者: mobileui
在无线场景下，无论是浏览wap页面，还是使用原生的app，所有人都一定都碰到过“弹窗广告”（如下图），从用户体验设计的经验看，这种缺少用户预期的广告形式，可能会打断原有的操作和认知，对体验的流畅有一定的负面影响，但从内容的推广角度看，弹窗广告可以在短时间内将广告内容强制展现给用户，一定程度上迫使用户阅读和点击，以达到更强的传播效果。
前段时间，结合一个业务上的需求，对两种“弹窗广告”形式进行了的一些线上测试和数据分析；目的是希望能用更直观的数据，去对“弹窗广告”这种广告形式及其不同类型有更定量的了解，以便为后续的设计优化和以及不同形式线上使用的数据效果预期提供参考。
业务的需求背景，是在“”的wap端首页，为“双十一预热会场”进行引流，考虑到是以引流为主要目的，大家都倾向于“弹窗广告”这种形式，但同时，对于“弹窗广告”的具体设计，也存在了两种观点，一种观点是，比较常规的全屏式“弹窗广告”的引流能力虽然好，但是这种形式有一定程度强迫用户阅读和点击，这对于广告本身的转化以及首页本身的转化上可能会有负面影响；另一种观点是，“弹窗广告”只是短暂出现的，并且会在用户没有操作后自动关闭，不会对原有页面的转化有影响，而且因为全屏的插入广告感官更强，转化效果也会更强一些。
基于这两种观点，我们决定使用a/btest的方式，对两种类型的“弹窗广告”进行定量测试，为此，我们设计了两种形式的“弹窗广告”作为测试方案：
A方案是较为常规的全屏式的“弹窗广告”（见下图左），它在页面加载之后，以全屏浮层的形式展现在原有页面之上，在用户没有主动关闭或跳转的情况下，停留一段时间后自动关闭，A方案的特点对用户原有浏览和操作的干扰较大（需要等待或主动关闭），但是展示效果较强
B方案是将常见的“全屏式“变为”半屏式“（见下图右），在页面加载之后，它会出现在原有页面的头部，占半屏的页面展示空间，除了等待时间结束或主动关闭，用户浏览页面的“上滑动作”同样可以关闭广告，它的特点是相比A方案，对用户原有的浏览和操作干扰较小，但是在展示效果上，没有A方案那么强烈。
主要测试的三个方面：广告本身的分流能力，引入流量的转化，对原有页面用户转化的影响；涉及到的数据有页面pv,页面uv，click，广告的点击uv，页面点击uv、引入流量的成交笔数等字段
两种方案以7:3的流量占比（全屏7，半屏3，之所以这么分，是全屏的模式引流效果更强，考虑到测试本身对投放数据的影响，所以更多的流量投放了全屏方案，其实比较理想的状况，还需要设置一个参照组，即没有投放广告的“纯净版”，但同样出于上面原因，暂时将投放前三天的平均数据作为参考组）分桶投放了三天，得到了一些数据反馈，一些结果比较符合原有的预期，也拿到了相应的定量值，也有些与原有预期不一样的惊喜，出于公司数据保密的原因，没办法把原始数据放出来，下面仅把分析结果做下展示和简单分析：
测试点1:不同类型的分流能力
两种类型对页面流量的分流能力上（广告点击uv／页面uv，广告点击数／页面pv），毫无疑问是“全屏式”的方案分流能力更强，这也与之前的预期相符，具体的结果显示，全屏方案在采用更强的展示效果和更大的展示空间（大概是半屏的2倍）后，其分流能力是“半屏”方案的1.5倍左右，而具体在整个页面流量中的占比，是受广告本身内容吸引力决定。
测试点2:不同类型的转化能力
出乎意料的是，对比两种类型的转化能力（广告成交笔数／广告点击uv），半屏方案的转化能力要强于全屏的方案（高6%左右），这说明，虽然全屏方案能分走更多的流量，但从分走流量最终是否促成成交上看，半屏方案的流量质量略胜一筹；分析之后，可能是因为，在全屏方案中，强制用户浏览和点击的作用较强，有较多的用户虽然对广告本身没有太多兴趣，但经由误操作或者一定程度被迫使同样点击了广告，这部分流量的进入，使得全屏方案的流量质量略低；反观b方案，由于其对用户干扰度较低，造成误操作的概率也较少，更多的是用户真的对广告内容感兴趣的情况下才会进入，相比之下，流量的转化能力也就要好一些了。
测试点3:对原有页面的用户点击转化的影响
在对原有页面页面用户跳失率（1-页面点击uv／页面uv）的比较上，首先我们对比了全屏方案和半屏方案对整体页面跳失率的影响，发现并没有像预期的干扰度较高的全屏方案对原有页面造成更多的用户跳失，而是两种方案在用户跳失率上，几乎没有差别；之后再对比了“对照组”之后发现，加入两种样式“弹窗广告”的页面跳失率，与没有加入广告的纯净版的页面相比，跳失率也没有明显的变化；分析之后，可能是因为，两个方案，在用户没有任何操作的情况下，都会经过“读秒”后自动关闭，用户同样可以看到原有页面，这种交互形式，还在用户对干扰的可接受范围之内，所以内容本身不会对原有的页面跳失率有负面的影响。（如果有类似的机会，大家可以测测看需要不会读秒关闭的“弹窗广告”对用户跳失率的影响，以及“读秒”时间的长短对用户跳失率的影响）
结合以上的测试结果，对两种形式的弹窗广告给出以下结论和使用建议，希望能对大家有所帮助：
结论和建议
（ps：本身是一个小测试，过程和结论仅供参考，但通过测试有那么一些小感悟：有些之前觉得理所当然的，顺理成章的结果和设计，在用户实际的使用中，可能并不如预料中的结果，设计中，可能更需要多一些客观验证和量化，而不仅仅是主观和推断，毕竟有时候，用户说想要的，都不一定是他真的想要的，更何况设计者呢）
向您推荐：
经常遇到很多伙伴咨询如何去提升专业、练习应该怎么去做、灵感从哪里来等等问题。结合这些问题总结和梳理了一下自己的点滴经验，希望能帮助到大家，与之共勉。
本文的目的是给刚入行的新人分享个&
每当苹果公布新的壁纸，总会有人或者手机厂商去模仿苹果家的壁纸，因为他家的壁纸是真的好看啊。今天我们来学习一下最新的iPhone8和 iPhone x的壁纸是怎样做出来的？
值得注意的是，&
被iPhone X刷了一天屏，到下午实在受不了各种标题写着“iPhone X 适配、指南、设计稿” 内容却是发布会回顾和手机介绍的标题党。索性自己写一篇只针对iPhone X适配的贴子，与适配无关的内&
@Echo 由于iOS 和 Material Design的组件体系有些不一样，所以关于组件的分类体系我会分iOS篇和Android篇来讲解，本篇文章为iOS 篇。
对于大部分入门设计师及中级设&
如果你关注过一些取得大成就的人，总会在他的成长故事中发现很多传奇的经历，比如少年时代的天赋异禀，或是30、40岁的大器晚成，为了做好某件事的废寝忘食等等…然后摸摸自己的胸脯说，他们是天才，我只是个普通&
@Micu设计你是美工？还是设计师？你是合格的设计师吗？ 设计工作中最基础的修图会吗？找素材拼图会吗？ 如果这最基础都不会，能称自己是设计师吗？能漫天要价吗？ 如果有点职业道德，先学会最基础的修图，再谈设计吧！ 一起看看别人是如何将图片合成的！ 第1组:采集素材 完成设计： 第2组: 第3组: 第4组: 第5组: 第6组: 第7组: 第8组: 第9组: 第10组: 第11组: 第12组: 第13组: 第14组: 第15组: 第16组: 第17组: @Micu设计投稿，自 weibo
从2011年开始接触APP，到现在为止也做了几个了，发现了一个共同点就是和每一个技术搭档切图的时候，会遇到不同的问题，因为技术的水平高低有限，所以他们要求你给切图的时候也会不一样，针对切图后来我总结了一套规律分享给大家，希望互相学习~ 相关阅读： 设计师需要掌握的图片原理与优化技巧 Android设计中的.9.png 切图小贴士 一.android版 在做android版本设计的时候，尺寸有很多种，这时我们要以一种尺寸为基准，那这个基准尺寸是480px*800px，设计图完成之后就开始切图了，我拿我之前设计的一张图为例子讲解下：
当看到上边这张设计图的时候，我们首先分析下应该给技术切哪些图（为了避免以后少改动，建议切图之前最好和技术先沟通下，怎么切）； 1、底部栏目的icon和背景：
这个一般有2种切法：（有默认和选中之后的效果）
2、顶部栏目的背景切图： 由于顶部导航栏的是渐变样式，所以切图只需要切一小条，技术来平铺拉伸就可以~（PS：如果是花纹背景，就必须切整条了，因为花纹切一小条就会被拉伸了~） 3、标注文字大小和行间距：（以这张图为例子，我标注好了，请看下图） 需要注意的： A：android主要有3种屏，即： QVGA和WQVGA屏density=120; HVGA屏density=160; WVGA屏density=240; B：apk的资源包中， 当屏幕density=240时使用hdpi标签的资源 当屏幕density=160时使用mdpi标签的资源 当屏幕density=120时使用ldpi标签的资源； C：我们标注的是PX，但是技术的算法是DP，所以需要PX和DP进行转化，PX和DP的转化主要跟密度有关系，当密度density=160即（屏幕尺寸：320*480）时，1PX=1DP；当密度density=240即（屏幕尺寸：480*800）时，1PX=0.75DP；当屏幕的尺寸大于480*800的时候，密度都按照240计算即可；当密度density=120即（屏幕尺寸：240*320）时，这个现在几乎没有人用了，所以我也不知道转化公式，如果您知道，可以留言告诉我啊~ 注意：因为我们做的是基于480*800尺寸的，大家都知道android的尺寸太多了，要想适配现在流行的尺寸，比如：640*960；720*1280等，唯一的解决办法就是图标可以根据不同尺寸各做一套，也就是图标需要做480、640和720共3套图标，不过如果你们的产品的要求不严格，做一套就可以，只不过是在大于480尺寸的屏幕上有些图标被拉大变虚而已~ 二.ios版 在做ios版本设计的时候，尺寸有3种，分别是：320*480、640*960、640*1136；这时我们要以一种尺寸为基准，那这个基准尺寸是640px*960px，设计图完成之后就开始切图了，我拿我之前设计的一张图为例子讲解下：
当看到上边这张设计图的时候，我们首先分析下应该给技术切哪些图（为了避免以后少改动，建议切图之前最好和技术先沟通下，怎么切）； 1、底部栏目的icon和背景：
这个一般有2种切法：（有默认和选中之后的效果）
2、顶部栏目的背景切图：
由于顶部导航栏的是多颜色的，所以只能切一整条给技术，商圈的图标要单独切出来
3、二级标题栏目的切图： &
周陟 （@UCDChina 深圳负责人、交互设计专业委员会（@IxDC）部长） ：我发现一个问题，大部分刚入行或者经验不多的设计师在碰到问题的时候都喜欢”索取”，最好有个现成的东西放那儿给他供着。这暴露了我们设计师群体一个严重的现状——自学能力的欠缺。 我上次提到设计师的三大素质（我自己觉得是这样，也是招人的时候重点考察的），这次就专门聊聊自学能力的问题，与各位打拼靠自己的朋友共勉。 作者还有一篇很有意思的分享：普通UI设计师与顶级UI设计师的区别是什么？ 什么是设计师的自学能力？ 我们对自学能力的理解是从上学的时候建立的，但那个时候的”自学能力”相对单纯，无非也就是如何通过自己看书、做题，复习到达熟练记忆，以便应付各种苛捐杂税式的考试。 但进入设计行业后，这个自学能力不仅仅限制在”了解知识、复述知识”的范围，设计师要学习各种软件，学习如何寻找灵感，学习如何与客户沟通，学习怎样规划自己的行业前景……这种交叉性的自学要求会成为很多人的屏障。并且，很难定义一个所谓的”自学能力”的量化目标。 就我个人理解，设计师的自学能力是使用合适的时间、方法、资源达到独立的、正确的解决问题的能力。 如何才能有效的自学？ 你细心的话，应该注意到上面我的用词，这些关键点就是有效自学的途径。在设计这个行当，光努力是不够的，我们不只是要强调效率，也要强调效能。回过来看，你们学校历史中是不是总有那么几个无论如何努力都始终分数不高的货色？ 首先是合适的时间； 如果一件需要花时间的学习任务超出了你的时间成本，你就不应该去碰它，或者换一个更好的方式，比如：你现在是一个从事了8年平面设计的设计师，你觉得目前做动画的收入高，你希望通过自学动画，然后跨行到这个领域，那么未必是最好的选择，首先你的8年的平面经验几乎没有再升值的空间，其次作为一个新人，也许你还要3年的等待，好死不死，你的脑子不错，等到你学有所成，动画行业又是另一个新的天地了。 正确的方法是重要的； 方法不仅是你练习的方式，还有思考问题的方式，这里强调的是设计师快速发现问题的能力，只有准确的了解需要自学的领域的难度、行业标准、设计思路、应用形态，你才知道从何入手； 比如：你想自学网页设计，并把网页视觉设计师作为自己的职业发展，你就应该首先了解，一个网站的基本结构，每个结构需要哪些工作岗位，他们的职责有何不同，一个网站视觉设计师应该干什么，抓住重点（而不要一开始去学什么HTML代码，那不是你最该关心的，我这话是说给某个朋友听的）。 资源指的是任何能够让你了解到所需知识的平台； 基础的东西先看维基和google，然后去书店翻一翻行业著作，然后下载一些软件的学习版知道你要使哪些工具，这些都是你的资源，如果凑巧你还能找到一些资深的从业人士咨询就更好了，但是要提醒的是，别人没有义务回答你，所以你先要准备好自己的问题。 独立性决定了你在自学途径中对自己的要求；你善于坚持的品质是你能够成功通过自己的努力达到目标的前提条件，在你周围没有更多的资源可以利用的时候，你只能靠自己不断的练习，思考。我发现要求很多设计师练习没有问题，要求他们思考却很难，自学的过程中，”想”永远是最关键的。 自学不是万能灵丹 你的性格不适合自学。这是正常的，有部分朋友他们的性格天生就是依赖性强，缺乏主见，在遇到困难的时候选择逃避，那么这样的性格想完全通过自学来达到一个”好高骛远”的目标是不太可能的。你需要选择一个付费的培训机构或者老师，通过一些外部的压力，让你有所提高。 除了自学还应该参与交流。交流当然是重要的，通过交流可以达到解惑的效果，有个前提需要注意，你要和别人交流，别人也需要知道值得和你交流，因此你要有所储备，交流既然是平等的也就需要基础，别以菜鸟之心度老鸟之腹，既冷了场又露了怯。 自学的技术必须转化为实际项目。你的自学有可能是为了自我提升，自我积累设计经验，但如果是为了解决实际问题，那么你自学的成绩就必须经过实际项目的检验，比如：你学习了一些新的交互设计的工作技巧，那么在你自己从事项目的时候你就应该争取机会导入进去，否则到头来，你也只是做了一嘴的好交互。 “人一定要靠自己”，说的不是抛弃阶级感情和团队协作，而是面对困难和障碍的时候，往往只有你自己才是靠得住的。缺乏自学能力的设计师，从性格与技能上都会落于下风，因此请不要让自己”被飞”的日子来得太早。 原文出处：《闲言碎语：周陟设计随笔》，感谢作者的无私分享，推荐童鞋们阅读原著，受益无穷 : ） & &
移动app开发中多种设备尺寸适配问题，过去只属于Android阵营的头疼事儿，只是很多设计师选择性地忽视android适配问题，只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6，iOS平台尺寸适配问题终于还是来了，移动设计全面进入“杂屏”时代。看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了。 加上Android生态中纷繁复杂的各种奇葩尺寸，现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题？设计和开发之间采用什么协作模式？一个基本思路是： 1、选择一种尺寸作为设计和开发基准； 2、定义一套适配规则，自动适配剩下两种尺寸； 3、特殊适配效果给出设计效果。 & 手机淘宝的iPhone 6/iPhone 6 Plus适配版本即将提交App store审核。先晒一下我们采用的协作模式，再慢慢说明原委。 第一步，视觉设计阶段，设计师按宽度750px（iPhone 6）做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。 & & 第二步，输出两个交付物给开发工程师：一个是程序用到的@3x切图资源，另一个是宽度750px的设计标注图。 & 第三步，开发工程师拿到750px标注图和@3x切图资源，完成iPhone 6（375pt）的界面开发。此阶段不能用固定宽度的方式开发界面，得用自动布局（auto layout），方便后续适配到其它尺寸。 & 第四步，适配调试阶段，基于iPhone 6的界面效果，分别向上向下调试iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏适配。 & 为什么选择iPhone 6作为基准尺寸？ 当面对大中小三种屏幕需要适配的时候，很容易想到先做好一种屏幕，再去适配剩下两种屏幕。第一个决定是到底以哪种屏幕作为设计和开发的基准尺寸。我们选择中间尺寸的iPhone 6（750px/375pt）作为基准，基于几个原因： & 1、从中间尺寸向上和向下适配的时候界面调整的幅度最小。375pt下的设计效果适配到414pt和320pt偏差不会太大。假设以414pt为基准做出很优雅的设计，到320pt可能元素之间比例就不是那么回事了，比如图片和文字之间视觉比例可能失调。 & 2、iPhone 6 plus有两种显示模式，标准模式分辨率为，放大模式分辨率为（即iPhone 6的1.5倍）。可见官方系统里iPhone 6和iPhone &
初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起，理清关于尺寸的所有细节。由于是写给初学者的，所以不要嫌我啰嗦。 现象 首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480×800, 480×854, 540×960, 720××1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640×960, 640×××2208。 不要被这些尺寸吓倒。实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。 像素密度 要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480×800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320×480，iPhone 4s的屏幕像素是640×960。刚好两倍，然而两款手机都是3.5英寸的。 所以，我们要引入最重要的一个概念：像素密度，也就是PPI（pixels per inch）。这项指标是连接数字世界与物理世界的桥梁。 Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。 倍率与逻辑像素 再用iPhone 3gs和4s来举例。假设有个邮件列表界面，我们不妨按照PC端网页设计的思维来想象。3gs上大概只能显示4-5行，4s就能显示9-10行，而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示，3gs上刚刚好的效果，在4s上就会小到根本看不清字。 在现实中，这两者效果却是一样的。这是因为Retina屏幕把2×2个像素当1个像素使用。比如原本44像素高的顶部导航栏，在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小，反而和3gs效果一样了。画质却更清晰。 在以前，iOS应用的资源图片中，同一张图通常有两个尺寸。你会看到文件名有的带@2x字样，有的不带。其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要图片准备好，iOS会自己判断用哪张，Android道理也一样。 由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。 Android的解决方法类似，但更复杂一些。因为Android屏幕尺寸实在太多，分辨率高低跨度非常大，不像苹果只有那么几款固定设备、固定尺寸。所以Android把各种设备的像素密度划成了好几个范围区间，给不同范围的设备定义了不同的倍率，来保证显示效果相近。像素密度概念虽然重要，但用不着我们自己算，iOS与Android都帮我们算好了。 如图所示，像素密度在120左右的屏幕归为ldpi，160左右的归为mdpi，以此类推。这样，所有的Android屏幕都找到了自己的位置，并赋予了相应的倍率： ldpi [0.75倍] mdpi [1倍] hdpi [1.5倍] xhdpi [2倍] xxhdpi [3倍] &
七张UI界面细节欣赏
谁都不愿意只身一人呆在山间小屋或孤零零地下室里埋头工作。创建产品的过程中，我们每个人都需要与他人合作。良好的合作是保证你的用户体验解POP - Prototyping on Paper是由台湾Woomoo团队所开发，它实现了纸本流程动起来的可能，只要用手机拍下你的手绘草稿，在POP里设计好链接区域，马上就能变如何成为一个合格的UX设计师，怎样才能从菜鸟转变为设计高手，每天都有无数的设计师思考着同样的问题。凡事要做好，必须得回答这三个问题：做iPhone app ChatCheckin手机界面ui设计
Tubik Studio ：我们的日常生活中总是面临着无尽的选择，大量的挑战。设计的决策也是如此，一...
在业务迭代周期内，产品经理和设计师对要做的产品需求和功能点进行需求分析和设计讨论的过程中，有时会出现...
在过去的2年当中，设计领域一直在探讨UX写作（UX Writing）这一“新兴”的设计分支。实际上，...
莫贝网（www.mobileui.cn）移动设备界面设计专业网站。为UI设计师提供手机界面设计，移动应用界面设计，平板电脑界面设计，导航界面设计等手持移动设备，移动终端界面设计相关知识的收集分享，共同学习的网站。
关注微博：移动端网站优化需要注意什么移动端网站优化需要注意什么星若传媒百家号　　现在手机成为人们必不可少的东西，无论去哪里手机都需要随身携带。基本人手一部手机，很多事情像是查个东西，逛淘宝，看视频等等手机都可以完成，人们越来越依赖手机，很多企业也看到了这一点，在这个互联网的时代谁能把握住先机谁就能够赢得胜利，于是企业就纷纷搭建移动端网站，由于百度用户占绝大多数，所以移动端的网站优化也主要是针对百度搜索引擎，那么移动端网站seo优化需要注意什么?　　1.PC站和移动站配置方式的选择　　我们通常采用的PC端网站与移动端网站配置方式主要分为三种：跳转适配、代码适配和自适应，所谓的跳转适配通俗的讲就是新建个手机网站，移动端访问pc网页时能进行识别并跳转到相应的手机版面，这也是现阶段被使用最为广泛的配置方式,代码适配和自适应都是在原网址中给用户展现手机版面，其中代码适配是识别不同的访问设备类型生成不同的html，相比较而言自适应是根据屏幕尺寸以不同方式进行呈现，html代码是相同的。　　2.网站尽可能简洁。　　手机不像电脑用起来那么方便，所以就要要求移动端网站设计的简洁，流程简单，页面尽可能少，因为手机屏幕小不方便浏览多个页面，页面太多也会影响网站打开速度。　　3.Title和URL优化　　移动端网站TDK的设置方式是和pc端类似，但是字数是有限制的，字数太多会显示不出来，可以在设置的时候看看预览效果，至于url搜索引擎一直是倾向于静态网址，对于那些动态网址要么改为静态或者伪静态也可以。　　4.避免使用弹窗、flash、java等行为。　　在手机端使用弹窗和flash功能会影响网站打开速度，也不利于浏览，搜索引擎也很难抓取，有很多品牌的手机也不支持使用flash和java，所以在建网站的时候这些都要考虑到尽量避免使用。　　5.内容建设策略　　对于手机端用户他们比较喜欢关注一些当下的热点新闻，一般是那种最近发生的事情，所以我们在针对移动端网站内容更新的时候要考虑到这一点，只有关注用户所需要的，才能最终赢得用户的青睐。　　6.其它优化事项。　　其实PC端与移动端优化思路差不多，比如要做好301重定向，404页面，面包屑导航，文章内链建设，外链建设，网站地图，robots文件机构采用树形结构等等优化思路基本一样本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。星若传媒百家号最近更新：简介:深圳市星若文化传媒有限公司作者最新文章相关文章响应式网站需要注意哪些问题_搜外问答
现在不少企业对响应式网站感兴趣，相信自己企业的网站做成响应式会有不错的效果，那么什么是响应式网站，根据了什么原理，有什么价值呢？有需要注意哪些问题？
　　一、什么是响应式网站
　　伊桑·马科特在2010年首次提出了响应式网页设计(RWD, Responsive Web Design)的概念。他根据工程师在处理不同屏幕分辨率的网页内容展现的效果的时候常用的技巧和策略，创造性的进行了归纳总结。
　　简而言之是指网页根据屏幕宽度，做出相应调整的，力求能够达到在不同的设备下，内容都能以最合适的方式展现给用户。
　　二、响应式网站原理
　　在CSS中，有一个不常用到的属性media。为了达到响应式设计的目的，让css根据屏幕宽度(例如 media screen only @(max-width:480px))，使用不同的CSS代码，从而达到自动调整页面DIV宽度的目的。当然，除了CSS，还可以使用JS对页面内容进 行动态的调整，不过这个技术不是很流行。
　　三、响应式网站价值
　　随着越来越多的智能移动设备( 手机，平板 )加入到互联网中来，互联网上的访问设备是爆炸性的增长(屏幕的分辨率也是爆炸性的增长)。为了给手机和平板设备提供更好的体验，必须在网站设计中使用响 应式网站设计，并且整合从PC端到手机的各种屏幕尺寸和分辨率，用技术来使网页适应不同分辨率的屏幕。
　　四、响应式网站建设中的常见问题
　　1、屏幕尺寸多，很难做到一次编码，到处运行
　　目前，主流的大家用来访问网页的设备有：计算机(废话)，iPad，Android Pad(例如三星的)，智能手机。那么做一个网站，必须到这些设备上去测试和运行。普通的网站作坊很少有人会愿意花这么多的精力去测试一个网站。
　　2、视觉设计要求高、细节多
　　因为不能使用绝对定位，那么在设计的时候需要考虑可读性以及区域面积以及在不同的设备下的行为。这对一般的设计师来说简直是一场灾难。所以很少有出众的响应式网站出现。
　　3、前端实现难、跨技术合作
　　响应式设计出的稿子，当然还需要响应式的实现。响应式的基础就是HTML5, CSS3。小的建站公司，一般是没有钱去聘用精通HTML5和CSS3技术的高手的。最多是让程序员在写代码之前看2天书，然后就赶鸭子上架。这就导致了即使设计师设计出了很棒的模板，但是在实现了之后，怎么看怎么不舒服。
　　4、成本大
　　因为响应式设计需要对多个界面兼容、功能调试，导致整个制作过程需要UI设计师和前端工程师要不断磨合制作。而测试人员也要在不同的设备下对网站进行测试。我们做过调查。如果创建一个普通网站的成本是1，那么创建一个响应式模板的成本大概在2.5左右。由于小的建站公司的报价普遍比较低，利润空间肯定不支持他们把网站做成响应式的。
作者公告牌
网站建设公司：www.iwogo.com，电话021-
管理文章：
微信自媒体实战案例
从零开始玩转微信自媒体
一周发布文章最多的作者
24小时获得「赞」最多的人
45 回复(55 赞)
16 回复(6 赞)
18 回复(5 赞)
(13 个回答)
(5 个回答)
(3 个回答)
(2 个回答)
(9 个回答)
(5 个回答)
(5 小时前)
(6 小时前)
(7 小时前)
(11 小时前)
(12 小时前)