企业级的响应式设计（Responsive design at enterprise level）译

青旅半醒 2022-03-29 07:28 233阅读 0赞

**导言**

响应式设计是现在人们谈论的热点，但如何部署，特别是在有多种设备的大型项目中如何组织响应式设计，响应式设计和可伸缩性（Scalable）有什么区别？这都是需要解决的难题。

**优化用户经验——Optimize the customer experience**

响应式设计是可适应设计（adaptive design）和可调整系统（adaptive systems）的子领域，用于处理基于用户内容（user's context）的用户经验（customer experience）的优化。在我看来，响应式设计并不是网页设计的新方法，响应式设计更像是一种现代的设计逻辑，是为了涵盖现在发展神速而出现多种多样的屏幕和尺寸的敏捷设计。

**上下文（context）——不仅仅是屏幕尺寸**

在响应式设计中，我们考虑的是根据屏幕宽度或屏幕内容来改变页面布局。但上下文（context）的影响因素非常复杂，如geolocation、网速和横板显示还是竖版显示（orientation of device）。

上下文大部分是动态添加的，一般情况下，很多数据是存储在后端，当用户需要的时候将数据添加到内容中。针对不同的消费者来说，这些数据是可以进一步细化的。具体细节可以参考[e-CRM][]领域模型。**新技术的挑战**每种新技术出现的时候都像是障碍赛跑，但最初的问题解决后，后面的问题会接踵而来。响应式设计也是一样。如，如何在CMS中表示可适应的内容？最好的内容策略是什么？如何为所有的平台创建合适的内容？

**利益相关者——User和Business**

web的利益相关者（stakeholder）有两类: 用户（user）和Business(或网站拥有者)，用户代表目标和达到目标所需的一系列任务, Business提供服务和产品。

**PEC模型**

为了表示两类利益相关者之间的关系，我们提出了PEC(Proposition Experience Context)模型。

*The PEC model from the media perspective*

*The PEC model from a context perspective*

*The PEC model from a concept perspective*

** 用户视角--User Perspective**

如果从用户视角来看模型设计，有很多UX工具来帮助我们设计最优的用户体验；我们可以迅速地根据收集的媒体资料来定义消费者行为和偏好，并使用适用性方法来设计界面。

But the user also must be triggered to actually make use of our medium in order to purchase a product or service. By applying modern [neuromarketing][] and [persuasive design][] , we can respond more on the psyche of the user. The context component gives us an additional mechanism to adapt the user interaction and presentation of content to suit the specific situation of the user.

**基于上下文的媒体——context-sensitive medium**

根据上面提出的理论和案例可以看出，传统的商务-用户（business-user）关系模型和PEC模型的不同主要体现在上下文层（context layer），该层可以是用户的处境信息、也可以是用户的设备和浏览器信息。

用户的设备的上下文信息可以是平板电脑、智能手机、一般手机、游戏设备和车载设备。例如聊天上下文（context），对于台式电脑来说意味着联系，对手机设备来说聊天功能比较弱，更实用的是提供一个“回电”按钮，而对于TV使用者，更为实用的是视频聊天，因为该类用户是没有键盘的。

Characteristics of the device context can be: is this a tablet, a smartphone, a more 'normal' phone, game console or device that is integrated in the car? A practical example of customizing the service proposition to the context is that of a desktop chat functionality as a means of contacting. When someone uses a mobile device, then a chat function may be less useful. In that situation or that context, a 'call me back button' could be offered. For visitors using a TV it could be more convenient to offer a video chat, because these users could have no QWERTY keyboard.

**基于上下文的过滤——Filter based on the context profile**

响应式设计不仅仅是用户端的事情，它还涉及到系统的每一个层次的上下文机制和可适应性机制，也就是说与响应式设计相对应，应用层和CMS层的部署应该是可适应系统。

Each layer can be used for filtering content based on the contextual profile. When these first steps  in constructing a using context profiles are made, a next move could be to investigate whether it is possible to enrich the context profiles with visitor or customer information that is already available in your back-office system.

When creating a responsive concept do not think of or design for pages, but start designing  components and assemblies of components. This will ease the translation to technology, and ensures that you remain agile in regard to future channels and devices.

**A look into the future**

With the advent of [social intelligence][], [big data][] and the growing mobility of our customers we will increasingly be able to know about the context of our visitors. In addition to the device-related context and the client context that we have in our systems are, more and more will be clear about the actual or realtime context of a visitor.

This context actually changes a lot during the day. In the morning your visitor is an athlete during  his daily fitness while he is a businessman when reading the first news after rising. Then he suddenly is a cook who prepares breakfast. Then again a businessman, a friend, a coach and so on.  When we know this kind of realtime contextual information it is possible to create personalized and relevant propositions and approach the user within the right context. The domain of [contextual marketing][] is all about giving this an interpretation.

### **Means to achieve your responsive goal** ###

Despite all the attention for content and technique within the responsive design scene , these are only means to achieve our responsive goal. By focusing on the two main stakeholders, the customer and the business, it can become a lot clearer what the coherence is within the field  of responsive design. This makes it easier to make a meaningful implementation to responsive design.

### **Biggest challenge is on the business side** ###

Break down responsive cases, think in components, use the PEC framework as a reference and remain agile to quickly respond to future developments. With the expansion of the contextual information in the future, we will increasingly be able to create personalized and relevant propositions. The biggest challenge and opportunity of responsive design are perhaps on the business side.

*参考：*

*http://www.frontendarchitecture.org/2013/05/responsive-design-at-enterprise-level-choose-the-right-focus/*

[e-CRM]: http://en.wikipedia.org/wiki/ECRM%22http://en.wikipedia.org/wiki/ECRM
[neuromarketing]: http://www.slideshare.net/themoleskin/buttons-using-psychology-to-connect-with-people-and-create-value
[persuasive design]: http://slideshare.net/QuiffBoy/pet-designing-for-persuasion-emotion-and-trust
[social intelligence]: http://en.wikipedia.org/wiki/Social_marketing_intelligence
[big data]: http://www.mckinsey.com/insights/mgi/research/technology_and_innovation/big_data_the_next_frontier_for_innovation
[contextual marketing]: http://mashable.com/2012/02/02/context-digital-marketing/