软件开发：响应式网站开发及应用场景对产品设计的意义

随着移动设备的流行，产品设计越来越需要考虑各种移动设备不同使用场景的适配。这篇文章共分二个部分，一部分是响应式Web设计从一个完整的角度来阐述响应式网站设计，另外一部分是分析需求场景对产品设计的意义。相信值得大家阅读。也欢迎大家提出建议点评。

我们在做响应式网站设计中经常遇到这几个问题：1.想要网站兼容手机、平板电脑、pc，就得为不同的设备定制不同的版本。2.想要网站的某些页面在宽屏显示器下一行显示更多的内容，又得为宽屏定制一个版本。3.很多人并不是在全屏的情况下浏览我们的页面，如果让页面随着浏览器宽度改变而相应的调整会不会比较好？

有没有办法能有效解决这些问题呢？

响应式Web设计的理念是页面的设计与开发应当根据设备环境（屏幕尺寸、屏幕定向、系统平台等）以及用户行为（改变窗口大小等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用pc、平板电脑，或者手机，无论是全屏显示还是非全屏的情况，无论屏幕是横向还是竖向，页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。响应式web设计对交互设计和前端实现提出了更高的要求，需要考虑清楚不同分辨率下页面的布局变化、内容的缩放等。

响应式Web设计的优势：

开发、维护、运营成本优势：页面只有一个，只是针对不同的分辨率、不同的设备环境进行了一些不同的设计，所以在开发、维护和运营上，相对多个版本，能节约成本。

兼容性优势：移动设备新的尺寸层出不穷，定制的版本通常只适用于某些规格的设备，如果新的设备分辨率变化较大，则往往不能兼容，而开发新的版本需要时间，这段时间内的访问就是个问题，但是响应式Web设计可以提前预防这个问题。

操作灵活：响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。当浏览器宽度变小时，左右两栏的宽度都有缩小，左边的banner图片和视频也相应缩小，右边的头像列表由一排4个变为一排两个。当浏览器宽度进一步变小后，页面由两栏结构变为一栏结构，部分内容的尺寸进一步缩小，搜索区域也从导航里挪到了导航外。

响应式页面的设计流程：

第一步：确定需要兼容的设备类型、屏幕尺寸。

通过用户研究，了解用户使用的设备分布情况，确定需要兼容的设备类型、屏幕尺寸。

设备类型：包括移动设备（手机、平板）和pc。对于移动设备，设计和实现的时候注意增加手势的功能。

屏幕尺寸：包括各种手机屏幕的尺寸（包括横向和竖向）、各种平板的尺寸（包括横向和竖向）、普通电脑屏幕和宽屏。

需要考虑的问题：某个页面进行响应式设计时其适用的尺寸范围是哪些？比如，1688搜索结果页面，跨度可以从手机到宽屏，而1688首页，由于结构过于复杂，想直接迁移到手机上，不太现实，不如直接设计一个手机版的首页。结合用户需求和实现成本，对适用的尺寸进行取舍。比如一些功能操作的页面，用户一般没有在移动端进行操作的需求，没有必要进行响应式设计。

第二步：制作线框原型 针对确定下来的几个尺寸分别制作不同的线框原型，需要考虑清楚不同尺寸下，页面的布局如何变化，内容尺寸如何缩放，功能、内容的删减，甚至针对特殊的环境作特殊化的设计等。这个过程需要设计师和前端开发人员保持密切的沟通。

第三步：测试线框原型 将图片导入到相应的设备进行一些简单的测试，可帮助我们尽早发现可访问性、可读性等方面存在的问题。

第四步：视觉设计 注意，移动设备的屏幕像素密度与传统电脑屏幕不一样，在设计的时候需要保证内容文字的可读性、控件可点击区域的面积等。

第五步：前端实现 与传统的web开发相比，响应式设计的页面由于页面布局、内容尺寸发生了变化，所以最终的产出更有可能与设计稿出入较大，需要前端开发人员和设计师多沟通。作者将应用场景描述为需求场景，这种讲法更加形象。因为对场景的描述就是一个分析用户需求的过程，解读这个过程可以更容易的对用户需求做出分解并从中找到吸引用户的关键。

接下来我们再讲讲析需求场景对产品设计的意义，需求场景是一种更接地气的分析和描述用户需求的方法（我个人偏爱“需求场景”这个词）。它应该拥有这样的结构：

“在某某时间和地点，周围出现了某些事物时，特定类型的用户萌发了某种欲望，会想到通过某种手段来满足欲望。”

1、需求场景的意义

传统的软件开发流程中，产品经理/产品策划首先会提供一份功能列表。这种功能列表所使用的描述方式往往是以程序为导向的，比如“商品列表支持按照价格从低到高排序”。

这种描述方式的弊端是：

产品经理得出该结论往往是因为竞争对手拥有了该功能，而非分析了用户的真实需求。合作伙伴（交互设计师/视觉设计师/开发工程师）不能直接体会到该功能是为了帮助用户实现什么目标的，也就不知道这个功能的价值，究竟能给真实的生活带来何种变化。

以需求场景的方式描述需求，就能够有效避免这些弊端。产品经理知道这个新开发的功能是为了帮助用户解决什么问题交互设计师可以从中获知这种需求场景的细节。“发生频率，需求强度，用户有什么样的能力和辅助工具”其他合作伙伴更容易了解到这个功能的价值，更能够及时表达意见，否决不靠谱的功能，并对有价值的功能产生更强烈的共鸣，干劲儿十足。

2、如何判断一个使用（需求）场景有价值？

依照以前所学习的心理学知识，当用户具有某种需求时，会尝试使用各种手段来满足它。当环境中不存在转为为之设计的解决方案时，用户就会用各种尽可能能找到的东西来凑活（你们知道飞机杯、充气娃娃之类的东东对吧）。当实在是找不到任何解决方案时，用户就只能憋着了。当很长时间里都无法发现解决方案时，用户就会绝望（学名叫习得性无助），并压抑尝试的行为（没有网购前，正在上班的你无论多么强烈地想给老婆买结婚纪念日的礼物，都不会去开网页）。但是，一旦把这种解决方案拿到用户面前，请他试用，他在体验到成功的喜悦后就会对它爱不释手。所以，就诞生了两种衡量需求场景靠谱程度的方法：调查现阶段用户是否在凑活着使用某种产品，心里在骂娘，但还忍着用；用最低廉的成本做出一个基本能用的解决方案，请目标用户试用，询问体验。

3、使用（需求）场景的描述方法和各部分必要性

前面提到，需求场景应该如此描述：

“在某某时间和地点，周围出现了某些事物时，特定类型的用户萌发了某种欲望，会想到通过某种手段来满足欲望。”

各部分信息存在的意义如下：

一般信息其实统一地描述了需求产生的环境。从这些环境信息可以分析出诱发需求的条件和需求产生时的环境条件。例如，“在候机时，候机厅里，用户看到手机电量过低时，会想要充电”。基于此，可以分析出，用户是在电量低的信息刺激下，想要充电。当时他所在的位置是候机厅，一个充满电器，但是没有插座开发给乘客的地方。需求场景还需要分析是什么样类型的人有这种需求，他有什么样的能力可以潜在地帮他实现目标。继续前面的例子，坐飞机的手机用户都可能会有这种需求，因为他们下了飞机一般都会联系家人报平安，联系别人来接机，等等。坐飞机的这些人一般都比较有钱，会带着现金或者信用卡。对需求的描述有一些注意事项，那就是某种需求背后往往还有更深层次某种需求，它只是这种需求的解决方案。比如想给手机充电是一种需求。但背后的需求可能是打发无聊、给家人保平安、看目的地城市地图、联系旅行社等等。给手机充电只是这些背后需求用户自己能想到的一种解决方案。不断一层一层分析需求可能帮助你更清楚地了解用户到底想要什么。那么，一旦满足某种需求实在太难，满足它背后的需求也是可以的。比如，假设在候机大厅提供充电太难，还可以向用户提供电视（打发无聊）、刷信用卡的公用电话（给家人保平安）、提供该航班目的地地图（看目的地城市地图）、代定酒店（联系旅行社）。

把现有解决方案清晰地描述出来可以帮助产品团队判断竞争对手是谁。这种竞品往往不局限于同行业，只要目标需求一样，就是竞争对手。例如，针对获取地理信息这个需求，卫星地图的竞争对手可能是纸质地图，指南针和指路大妈。有了对竞争对手的了解，就可以更明确地知道这种用户需求是否存在，强度如何，我们的新方案有何优势，对方是否弱爆了。

温馨提示：转载发布内容如有侵权，请后台联系我们会在第一时间撤销，我们希望在资源共享的同时，与您共同维护互联网的良好生态，谢谢！