如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

△ 文中配图均来自美团官方和产品截图，仅作为设计交流使用

这是在设计群看见的一个启动页视频，第一感觉就是品牌色由「青绿色」变成了「黄色」，采用 C4D 渲染出各种使用场景和产品的各种服务品类，表明产品内部依然囊括了吃喝玩乐等一系列服务。风格比较年轻化，第一感觉还是蛮不错的，所以我立马去 App Store 升级了产品，发现 APP 启动图标也变了。

△ APP图标目前是第二个，猜测是想给用户一个过渡期

为什么美团突然要进行品牌升级？

官方给的说法是：为了「将所有线上线下曝光进行视觉化统一，流量到品牌的一体化」。同时希望以统一品牌色为起点，未来实现从线上到线下，从流量到品牌的四者一体。

确实是这样，就是为了品牌的统一，这就是这次升级的核心意义。这是典型的由公司经营战略为导向而进行的一次产品升级，这样做也是为了抢占用户心智，为了以后让人一看到黄色，就只会想到美团，而不是其他品牌，毕竟现在的产品太多元化了，每家大厂都应该有自己的一个独有的品牌色，这样品牌就不会过于分散。比如微信的绿色、淘宝的橘黄色、天猫的红色……如何让用户第一时间就想到你的产品，对于竞争异常激烈的今天这真是太重要了。

说到用户心智，前两天看见一篇关于品牌的文章，里面提到：早期的品牌战略是「定位理论」，它告诉了我们：品牌的竞争，是关于潜在用户心智的竞争，如今这一理论也一样适用。

为什么品牌升级，只升级品牌色？

因为品牌颜色的变化是用户最直接、最容易感知出的变化，品牌色是最容易吸引用户，占领用户心智的方式。

为什么是黄色，而不是青绿色？

为什么是黄色，而不是将所有色系都变为青绿色？

我们都知道，美团升级前是「青绿色」、美团外卖是「黄色」、大众点评是「橘黄色」，是各自不同的色系。

美团的四大业务支柱是：外卖、到店、酒店&旅游、出行。其中外卖的流量最大，每天外卖的订单有数百万计，这是一个巨大的流量，所以变身外卖「黄」也是为了流量和品牌更好地绑定。并且大街上奔忙的穿黄色衣服的外卖小哥，你一眼就知道是美团外卖，这些都是无形中的广告，也早已扎根于你的心智之中。相信很多人心中的美团 = 美团外卖，所以变成「黄色」是最合适的。

但是「美团黄」和美团外卖的「黄色」还有所区别，只能算是一个色系，美团外卖的黄色更显年轻一点。而「美团黄」官方的解释是：黄色代表着热情、温暖，象征着美团始终坚守「帮大家吃得更好，生活更好」的使命，致力于为用户提供更优质、有温度的一站式生活服务，帮助人们向美好生活靠近。

下面再来对比一下产品页面 UI 的变化：

△ 升级前主页面UI

△ 升级后主页面UI

单从页面对比来看，整体布局结构没有什么变化，不出所料，主要的区别就是将新的品牌色「美团黄」进行了视觉上的强化。

这种大块的品牌色比较突出的设计似乎和当下流行的简洁优雅的设计风格背道而驰，似乎只有在电商产品中比较常见，但我认为，这样的设计应该只是暂时的，相信在经过一段时间占据了用户心智之后，美团势必会顺应当下的流行趋势，在此期待一下。

去年被收购的摩拜一直亏损严重，继改名为「美团单车」之后，扫码骑车入口也整合进了美团 APP，如今为了让线下场景都统一成一个色系，单车也要变成黄色了：

对此，网上有人喊话美团：顺便把小黄车也收购了吧，毕竟黄色的单车给我们的第一印象就是 OFO，这样线下黄色的单车就全都是你家的了，我们的押金也就有着落了……

另外，还有一些其他线下场景品牌色运用：

这次美团的升级，不管你喜欢与否，它已经发生，就像年前的微信升级一样。一开始势必会有很多人不习惯，这其实也是受用户心智的影响，我们都会带有一种现状偏见来看待事物的新旧变化，这是很正常的心理状态，但是过了一段时间以后，都会淡忘，直到习惯，都逃不过「真香」理论。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

2012年，Random International 的作品《雨屋》正式开启了大众对沉浸式体验的认识，近年随着 teamLab、Punchdrunk 等互动体验展演的火爆，沉浸式新媒体设计不仅成为了炙手可热的包装概念，同时也透露出人们对于新型互动的好奇心与强需求。提起新媒体作品，我们通常会自动联想到黑科技和脑洞，却容易忽视这些作品除了具有前卫的艺术性表征，同时也暗含着严谨而延展的设计内核。

2019 年初夏，Mindpark 邀请了两位数字媒体界的先锋代表：Moment Factory与Studio Swine，和我们共同探讨了沉浸式设计在商业性实践与实验性探索上的思路与价值。

透过数字篝火，人们重聚在一起

总部位于蒙特利尔的 Moment Factory 是一家专业打造沉浸式互动体验设计的多媒体公司，以跨界和合作著称的他们拥有一个超 350 人的庞大团队。自千禧年成立以来，MF 已经成功打造了近 400 个场景设计商业项目，客户包括微软、索尼、NFL、麦当娜等，形式从立体光雕、数据互动到空间展览、演唱会工程都样样精通，几乎每个作品在面世时都颠覆了人们对惊艳的定义。

△ Demo Reel ©️Moment Factory

Moment Factory 的业务主要分为三大模块：内容、互动与场景。植根于公众场域创作的他们，善于根据场地的特点策划和开发因地制宜的故事内容，继而在声光电的效果设计上加强环境与人之间的联结，最后两者结合形成互动闭环以构造出全局的沉浸式体验。

△ ©️Moment Factory

Moment Factory 的工作流也基于这三大模块多线程并行。与传统行业不同的是，客户对于 MF 而言并不是甲方爸爸，而是项目的共创者。他们会邀请客户参与并确认每一个设计环节，一来可以增加客户对项目的认知与信任度，二是考虑到多媒体物料制作成本较高，也预防阶段性推翻对项目进程造成影响。

△ ©️Moment Factory

因地制宜的创造性内容

「Aura」是 Moment Factory 耗时超过一年，动用超过 100 人团队制作的梦幻级沉浸式光雕作品。它集合了极其的视效投影技术及独立打造的交响乐声效，为蒙特利尔圣母大教堂打造了 40 分钟震撼而灵动的超感官体验。

△ AURA ©️Moment Factory

基于天主教堂自身「诞生-受难-升天-审判」的故事脉络，AURA 的设计概念以 the Path of Light（光明之路）为主线，并根据建筑动线分为 the Birth of Light（光的诞生）， the Obstacles（苦路），the Open Sky（升天）三个章节。

△ ©️Moment Factory

在确定故事线与情绪板同时，考虑到教堂内部结构的复杂性及壁画的还原准确性，团队使用 3D 扫描重塑建筑模型，并进行了大量的动效推演及真实光影测试，最终利用自研的工业投影体系，让建筑实体与投影内容的结合达到型与神的高度统一。

△ Behind the Scenes ©️Moment Factory

在细节的雕刻上，作品对主殿圣像的层级结构进行分解，营造出空间错位的效果。另外也对苦路长廊的画像进行精准投影，以光的扩散作为线索，一步一步引导观众的视线，展开故事叙述。

△ Behind the Scenes©️Moment Factory

无论是故事设定还是效果设计，Aura 都根据教堂题材顺势而为，在不破坏建筑原有气质的前提下，放大环境硬件中的可用元素，从而达到「概念-动线-效果」的全方位合一。视觉互动的起承转合不但将观众的沉浸式体验最大化，同时也升华了圣母大教堂的神性与历史精神。

环境与人的联结

LAX 项目是 Moment Factory 在 2013 年为洛杉矶机场打造，以时间旅行为主题的商业项目。它既是全美最大的机场多媒体环境设计项目，也是品牌体验拓展的空间实验。

虽然洛杉矶机场整体以「时间旅行」作为品牌主题，但出发者和到达者的动线终归不同：除了机场主体以外，旅客的体验还涉及到另外两个环境——旅行目的地和洛杉矶。因此，本项目根据不同的触点（登机口与到达大厅）针对性地设计了不同互动内容，让出发者与到达者都能找到与环境的联结和延伸，使整个机场体验形成通路。

Moment Factory 为登机口都设计了实时更新的互动墙，不但能捕捉行人的动态并融入画面，更能实时切换目的地的本土特色内容作为动画元素，使准备出发的游客身未动而心先远。

△ THE PORTALS ©️Moment Factory

与登机口不同的是，到达大厅的巨幕内容则根据机场的建筑结构设计，以跳水、跳跃等蒙太奇片段营造出洛杉矶惬意、清爽、惊喜的城市品牌形象；系列影片也同时在长廊和行李大厅中展映，以保持品牌语意的一致性与连续性。

△ WELCOME WALL©️Moment Factory

在机场中央，MF 团队还打造了一个呼应主题的重点装置——时间钟楼。除了播放实时更新的故事短片外，设计师考虑到屏幕过于虚拟和冷感，故以机械咕咕钟为灵感，让钟楼和环绕屏幕在准点切换真人报时舞蹈，既达到提醒旅客时间的作用，也让他们在候机的空隙获得环抱式的娱乐化体验。

△ TIME TOWER ©️Moment Factory

从手稿到成型，LAX 项目历时 16 个月，在三个大洲拍摄了超过 4 小时的视频内容。而且因为机场常年不能关闭，也极大增加了项目的施工与调试难度。

△ ©️Moment Factory

《通用设计法则》中曾提到，「沉浸」即是让人专注于当前环境，并在设计者提供的目标情境中进行互动而获得愉悦，从而忘记真实环境的存在。Moment Factory 十分善于提取及串联实体环境与观众之间的触点，利用不同的互动技术对每一个触点进行感官的复合强化，并以完整的叙事结构对品牌进行包装，才屡屡在 Lumina、Kontinuum 等系列作品中打造出连贯又有趣的体验心流。

对互联网产品设计而言，我们能调用的触点也许仅有区区一屏，但用户在获取虚拟体验时的沉浸式感知却和实境式体验是相似的，因此设计师也可以参考以下几点：

• 利用五感塑造场景：不仅从视觉层雕琢，更要调动触觉（设备震动、阻尼感）、听觉（声效、音乐、声场）等感官以模拟真实世界中的物理反应，打破虚拟环境和实境的时差和次元壁。
• 减少环境干扰项：收起不必要操作，最大化界面视野，让用户尽可能全程聚焦在目标场景。
• 强化叙事性引导：利用开屏动画、转场动效、角色故事等元素增加场景代入感并进行自然过渡。
• 即时性反馈：给予用户简单而反馈感强的任务，以延续他们对互动的把控感和积极性，从而增加用户在环境中逗留的时间和意愿。

We do it in the public. We bring people together.

过去，由于娱乐产品的复制成本较高，人们大都以群体形式到电影院或剧院里进行活动，因此促进了社交互动与环境共融。但随着媒介的升级，娱乐不仅从大众走向个人，同时也将个人和群体进行隔离，使个人和社群、环境之间的互通性越来越弱。Moment Factory 坚持在公共场域中探索新型的体验形式，正是因为他们坚信娱乐活动虽然可以由个人进行，但沉浸式的情感体验仍旧需要透过真实环境下的社交互动来完成。利用数字篝火为体验设计融合升温，才能让人们真正地共聚与共享真实的情感和生活。

用转瞬即逝创造世界

如果说 Moment Factory 利用新媒体在环境创意、娱乐性与商业价值之中找到了发展的平衡，Studio Swine 则是利用新媒体设计的实验性为人们开辟了观察世界的全新角度。

Studio Swine 中的「SWINE」全称是 Super Wide Interdisciplinary New Explorers，意味着无限跨界与探索主义。它由新派英国艺术家 Alexander Groves 及日本建筑师 Azusa Murakami 于 2011年创立，作品领域涵盖思辨设计、装置艺术、电影、雕塑等。他们的创作以独特的世界观、空间感及美学体系征服了世界各大顶尖艺术展览，伦敦V&A博物馆、巴黎蓬皮杜艺术中心与威尼斯双年展等都曾邀请他们展出。

△ ©️Studio Swine

在西方，越来越多像 Studio Swine 这种设计师团队选择以跨界的形式进行研究及创作，他们也不再拘泥于设计与艺术之间的所谓界限，逐渐衍生出了新的设计流派与理论。传统行业的设计焦点往往会落在商业策略与 Design Thinking 上，而新形态的设计则更多地向批判性与未来性上倾斜。

△ An Unresolved Mapping of Speculative Design ©️Elliott P Montgomery | EPMID.COM

2013 年前后，英国设计师 Anthony Dunne 和 Fiona Raby 提出了 Speculative Design（思辨性设计）来概括此类在艺术与设计之间的交叠学科。对比起传统设计基于现有场景来解决现有问题，思辨性设计旨在扩充场景的可能性，以引导人们想象和思考未来社会生活、生产的状态或矛盾。Speculative Design 以设计作为跨领域的思维实验及方法，不仅突破了媒介、工艺的疆域，选题上也常常挑战甚至跳脱社会伦理、文化定式、现世哲学的桎梏，而这种敢为人先的创作理念也是此类作品争议性的源头。

△ Redrawn from Speculative Design Practice ©️ Ivica Mitrović | Speculative.hr

NEW SPRING

New Spring 是 Studio Swine 与 COS 合作的装置互动项目，作品以意大利建筑的拱廊结构及樱花树在四季中的形态为意象设计，并将气泡比喻花的绽放与凋亡，旨在讨论时间与物质的瞬息性。在创作伊始，设计师提出了一个假设场景：在未来，物质将越来越多，而空间越来越少，植物与园林可能朝着机械化、人工化的方向发展，那么我们要怎么去模拟四季变化下生物从生到灭的过程呢？

△ COS x NEW SPRING ©️Studio Swine

为了全感官地营造未来园林的场景感与沉浸感，除了樱花树的意境外，Studio Swine 更与化学家合作，研制出带有混合香味且不会立即爆破的气泡，为互动者带来意料之外的触感体验。在听觉上，编曲家 Gavin Singleton 也特意为展览场景打造了专属的音乐EP。

△ ©️Studio Swine

2018年，Swine Swine 再度利用气泡作为原型，以世界上最小且最古老的生物之一——蓝细菌的光合供氧为主题，制作了高达 9 米的大型环境装置 Infinity Blue 来模拟地球大气层的历史，礼赞蓝细菌赐予了地球第一口呼吸。雕塑中内嵌 32 个旋涡气孔不断喷发出圈装烟雾，用以比喻光合作用生产氧气的过程。

△ Infinity Blue ©️Studio Swine

HAIR HIGHWAY

和场景设计不同，影片同样也是另一种常见的沉浸式表现手法。近几年越来越多的新媒体作品采用纪录电影、开放式互动短剧、VR 短片等形式对作品进行呈现：一是影片能突破作品篇幅，更全貌地介绍项目背后的概念与调研故事；二来基于自媒体环境的蓬勃，作品能以较低的复制成本获得更高的传播度；三则是影片天然的叙事结构能快速激活观众的代入感。

Hair Highway（丝绸之路）是以纪录片与家具设计复合呈现的极富争议性的新媒体实验。Studio Swine 意识到在自然资源逐渐减少的情况下，人类毛发作为一种代谢物质，也许可以成为新型的可再生资源。基于这个洞察，他们尝试以头发作为原料去创造一种近似木料的全新媒材，以挑战现有的美学标准和诠释物质的可能性。

△ Hair Highway ©️Studio Swine

亚洲人头发的生长速度是热带硬木的 16 倍，而中国作为热带硬木最大的进口国也是人类毛发最大的出口国，因此也被他们选为了项目的起源地。两人在创作过程中不仅探访了 9 个位于山东的假发工厂，更拍摄大量假发制作的工序与买卖流程作为纪录片的生态调研资料。

△ ©️Studio Swine

Hair Highway 以丝绸为概念，用树脂封印毛发制作出一种模拟琥珀、玳瑁纹理的板材，并糅合清代及上海 20 年代装饰主义的纹理设计与西方抽象几何的轮廓特征，创造出了一套极具古典神韵的系列家饰。

△ ©️Studio Swine

不破不立，Studio Swine 的作品始终紧扣着三个思辨性的特征：探索时间性、想象未来社会的形态、创造新型的物质组合，以新锐的角度挑动人们的思维的底线，而量产和商业化却从不是他们眼中的第一要义。或许怪诞，或许不安，但设计在他们的哲学里只是一条探索世界的未竟之路，而不是一个实用主义诞下的结果。

新媒体的特点之一，就是他基于时间的艺术形式。新媒体的表现很多都是时间累积的缩影，每一帧，每一个图层，每一个数据库的建立，以及观众在与之互动的时候也同时在进行一个时间的旅行。我希望互动是更加内隐和内省的，而不是仅仅基于科技的娱乐程度。——著名新媒体策展人 Richard Castelli

从对娱乐效果喜闻乐见，对创作理念心悦诚服，再到如今被作品激活出新的灵感、批判或讨论，受众与作品之间的互动升维或许才是创作者最乐意观望的局面。沉浸式新媒体设计为人们提供了孵化情感和思想的超感官空间，而互动场域中的人才是成就作品的最终环节。

真正的沉浸是思维的沉浸，环境的营造只是想象力的引路人。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

更新阶段分为两部分 父组件执行 render 或者调用 this.setState。

componentWillReceiveProps
大部分网上教程为外部 props 发生改变才触发 componentWillReceiveProps，其实不是，当父组件进入 render 时，无论子组件的 props 发没发生改变，都会执行该生命周期函数。 
函数参数有一个，为 nextProps，为将要新的 props。 
值得注意的是，在整个更新阶段的生命周期函数，只有在此函数内可以调用 this.setState 方法，当然其他也可以调用，但是会造成死循环 。

shouldComponentUpdate
该函数需要返回值，如没定义则默认返回 true。当返回值为 true 时，进入 componentWillIpdate ，如为 false ，则什么都不发生。所以说这是一个可以进行 React 性能优化的地方。函数参数有两个 nextProps 和 nextState。我们需用做的就是在 this.props、this.state、nextState、nextProps之间进行对比，来解决重复渲染的目的。

componentWillUpdate
如果 shouldComponentUpdate 返回值为 true 的话，生命周期会进入该函数中。在这个函数中我们可以根据实际情况做一些事情，但是不能调用 this.setState。

render
在更新阶段的 render 来讲一讲 调和 过程。 render 返回的 JSX 标签会保存在内存中，react 会通过 diff 算法来计算出最小化改动完成差异的更新。diff 是逐层递归比较，首先比较类型是否一样。如果发现 <div>和 <span> 的差别的话，react 会选择直接放弃之前的 dom 元素， 重新渲染。所以说即使是更新阶段的调和过程，也会触发组件的挂载、卸载阶段。

componentDidUpdate
在这个时候已经更新完 dom 结构，可以重新使用 dom 操作。

总结
总体来说更新的生命周期要做的最重要的事情就是性能优化，减少重复渲染次数。 
在这个方面已经有很多成熟的解决方法了，在我的博客中也会介绍如何定制更新阶段的生命周期函数。 
在使用上，最最重要的一点就是不要在除了 componentWillReceiveProps 之外的其他更新阶段生命周期函数内调用 this.setState。

相关链接：

浅入 React 生命周期相关（一）挂载生命周期
--------------------- 

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

前几天面试问道 react 的相关知识，对我打击比较大，感觉对 react 认识非常肤浅，所以在这里重新梳理一下，想想之前没有仔细思考过的东西。

另外有说的不对的地方还请帮我指正一下，先谢谢各位啦。

Object.assign( previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...
)
复制代码

function wait() { return new Promise(resolve => {
    setTimeout(() => {
      resolve(); console.log("wait");
    }, 0);
  });
} //......省略组件创建 async componentDidMount() { await wait(); this.setState({ name: "new name" }); console.log("componentDidMount");
}

componentDidUpdate() { console.log("componentDidUpdate");
}

render() { console.log(this.state); return null } //......省略组件创建 // 输出结果如下 // wait // {name: "new name"} // componentDidUpdate // componentDidMount // 注意 componentDidUpdate 的输出位置，一般情况下 // componentDidUpdate 都是在componentDidMount 后面 // 执行的，但是这里因为setState 写在了 await 后面 // 所以情况相反。 复制代码

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

这篇文章我们来谈谈移动端和PC端交互设计上的区别。

经常遇到一些设计师，他们之前负责的都是pc端产品，突然改做移动端，会不自觉的把pc端的一些设计理念“移植”到移动端，出现了水土不服。有经验的设计师一看你设计的移动端页面就知道你之前做的都是pc端，这是一件非常尴尬的事情。就好像你说了一句“nice to meet you”，别人就知道你老家是哪里一样。那么移动端和pc端交互设计上的区别究竟在哪呢？

大屏到小屏

开门见山，移动端和pc端最根本的区别就是屏幕的大小。屏幕的大小直接决定了界面信息量，pc端一个页面可以展示完全的信息可能需要移动端好几个页面来承载。

可能有的设计师觉得，屏幕尺寸不一样做自适应不就行了，移动端页面做长一点，让用户滑动就可以了。这是一个非常简单的处理方案，但是忽略了一个重要前提：用户愿不愿意滑动？根据埋点数据显示，多数移动端页面超过一屏的内容的曝光与点击量会急剧下滑，说明用户很少主动滑动去查看一屏以外的内容。对于移动端产品来说，一些重要的内容必须保证用户在一屏内可以看到。

1）信息架构重构

因此，如果你要为一个pc端网站做一个移动端app，首先要做的就是信息架构的重构。pc端有足够的空间可以把所有的功能直接展示给用户，而移动端只能展示一些主要的功能，一些次要的功能需要放在下一层级。

例如，appstore中用户是可以评价这条评论对自己是否有帮助的。PC端的处理方式很简单，直接展示给用户。而移动端是需要用户长按这条评论才可以弹出评价列表的，可能很多用户今天看了这篇文章才发现原来还有这个功能。没关系，之前虽然不知道，但是并没有影响你正常使用啊。对次要功能进行适当的降低信息层级是移动端设计师必须要考虑的。

2）一个页面，一个任务

对于上面信息架构重构的观点可能会有人存在异议，对于一些表单类页面来说，例如用户要借钱、转账，有些信息是用户必须要填的。在这些场景中，我们不担心用户不滑动，因为用户不滑动就无法完成操作。那么在这种情况下，是否可以继续延续pc端的布局样式？

以上面的转账流程为例，pc端是直接在一个页面展示，而移动端是分成了两个页面。为什么这样？把备注/付款说明也放在第一个页面不行吗？

因为移动端用户使用环境更加的复杂多变，更容易受到干扰，所以必须保证界面信息的简单直观。如果在一个页面中展示过多的信息量，容易让用户混乱。这里所说信息量并不是指绝对信息量，更准确的说法应该是用户主观感受上的信息量。同样的几个输入框，可能在pc端只占了页面的1/4，而移动端占了一整个页面，给用户的感观是完全不一样的。页面塞的满满当当，容易让用户焦虑。

一个页面可以完成的任务现在要跳转好几个页面，增加了操作步骤。用户害怕“内容多”，难道不害怕“步骤多”吗？不害怕，因为页面内容量是用户一眼就可以看出来的，用户无法立刻感知这个任务有多少步骤。因为无知，所以无畏。等到用户知道这个任务步骤数的时候，整个任务都已经完成了。

借呗的这次改版，用户要借钱必须先输入借款金额，其余的借款期限、还款方式和利息等信息才会展示给用户。这些信息都是跟用户借款金额相关的，用户没有输入借款金额，这些信息展示给用户意义也不大，不如隐藏，让用户的注意力聚焦于完成输入借款金额。

没有一个放之四海而皆准的设计原则，所有的设计理论都不能罔顾实际的应用场景而机械的套用。如果前后步骤关联性比较强，我建议不要分页展示。例如，目前很多的短信验证码都选择把“输入手机号”和“输入短信验证码”放到两个页面，我个人对此持保留意见。设想一个场景，如果用户迟迟没有收到短信验证码，那么他需要确定是手机号输错了、网络故障还是其他什么原因。用户需要返回到上一个页面查看，如果手机号和短信验证码放在同一个页面就简单多了。

3）突出重要信息

前面我们提到的主要是控制移动端页面的信息量。页面信息量少就可以了？当然不是，我们来看一下火车换乘的场景，如果你要从南京去新疆阿克苏，没有直达的车次，只能从西安换乘。我们来看看下面两款产品的处理方式，左边是12306，右边是飞猪。12306还是一股pc端风格迎面扑来，问题出现在哪？12306跟飞猪展示信息量差不多，唯一的区别在于12306展示了两趟车次各自的起止时间，而飞猪只告诉用户整趟旅程的起止时间。

显然问题不是出现在信息量上，而是对信息的展示形式上。用户更关注的信息，应该让用户更容易发现。对于一趟车次来说，用户更加关注出发/到达站、出发/到达时间和票价。对飞猪界面进行高斯模糊处理，发现用户的视觉焦点正好落在这些重点信息上。

12306所有的信息都属于同一层级，让人抓不到主次。而且界面中出现了过多的配色，更增加用户的信息获取成本。

鼠标到手指

pc端用户与界面进行交互靠的是鼠标，移动端用户靠的是手指。鼠标的操作更加精准，因此移动端界面中元素的尺寸和间距比pc端的大。以下图为例，左边是pc端，右边是移动端。移动端的输入框沿用的还是pc端样式，而且关于利率和手续费的详情icon过小，用户的手指点击的时候容易误操作。

给你的界面做减法

前面我们主要强调了移动端产品要尽量减少界面中信息量。可不可以在不改变产品信息架构的前提下，通过交互设计上的改动来完成目标呢？我给大家介绍两个方法：场景化和关联化。

1）场景化

在一个页面中，虽然内容很多，但是用户真正感兴趣并且会与之交互的内容很少。如果我们可以获知用户在特定的场景下对于某个内容诉求很高，那么我们突出展示；反之如果诉求很低的话，我们可以隐藏。

举一个之前说过的例子，知乎中，用户在搜索结果页滑动大概3屏后，会出现“向知友提问”按钮。因为用户滑动了3屏，说明用户可能对当前的搜索结果不满意，这时引导用户去提问，用户的意愿更高。如果我们全程展示这个去提问按钮，反而会减少用户的实际浏览区域，造成干扰。

上面主要提到了，同一个流程，需要根据用户不同的使用场景提供不同的功能。其实即使是同一个功能，我们也要根据用户不同的使用场景选择不同的展示形式。

还是知乎，为了方便用户可以快速的查看下一个回答，给用户提供了一个浮动按钮。但是这个浮动按钮，当用户开始滑动页面时候就会改变样式。这个很容易理解，当用户刚进入这个页面，为了降低用户的学习成本，我们需要直接告诉用户这个按钮是干什么的。当用户开始滑动进入阅读答案的状态，缩小按钮的形态避免对界面信息造成遮挡。

2）关联化

我们需要梳理信息之间的关联性，将相互关联的信息整合在一起，进而减少页面中信息量。支付宝账单的月份筛选功能，对入口进行了修改。之前用户需要点击日历图标，现在用户直接点击月份就可以了。用户要筛选的就是月份，那么直接把月份作为入口更加合适。

总结

以上就是我对移动端和pc端交互设计上区别的简单分析和总结，如果你有不同的建议和看法欢迎留言讨论。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

附Java/C/C++/机器学习/算法与数据结构/前端/安卓/Python/程序员必读书籍书单大全：

书单导航页（点击右侧 极客侠栈 即可打开个人博客）：极客侠栈
①【Java】学习之路吐血整理技术书从入门到进阶最全50+本（珍藏版)
②【算法数据结构+acm】从入门到进阶吐血整理书单50+本（珍藏版)
③【数据库】从入门到进阶必读18本技术书籍网盘吐血整理网盘(珍藏版)
④【Web前端】从HTML到JS到AJAX到HTTP从框架到全栈帮你走更少弯路(珍藏版)   
⑤【python】书最全已整理好（从入门到进阶）(珍藏版)
⑥【机器学习】+python整理技术书（从入门到进阶已经整理好）（珍藏版）
⑦【C语言】推荐书籍从入门到进阶带你走上大牛之路（珍藏版）
⑧【安卓】入门到进阶推荐书籍整理pdf书单整理（珍藏版）
⑨【架构师】之路史诗级必读书单吐血整理四个维度系列80+本书(珍藏版)
⑩【C++】吐血整理推荐书单从入门到进阶成神之路100+本(珍藏)
⑪【ios】IOS书单从入门到进阶吐血整理(珍藏版)
--------------------------------------------------------------------------------------------------------------------

如果您已经入门reactjs,请绕道~ 这篇博客只适合初学者，初学reactjs的时候，如果你不会webpack，相信很多人都会被官方的例子绕的晕头转向。 ES6的例子也会搞死一批入门者。之前一直用的gulp，突然换了webpack，我也非常不习惯。在这块也卡住了，对于想学reactjs的朋友，我的学习建议是这样的：

nodejs => webpack => ES6 => reactjs 

官方的很多例子都是ES6语法+webpack打包的，所以在学习reactjs之前，最好是会ES6和webpack，这样能事半功倍！

1、首先来说说nodejs

先安装版本的nodejs，npm一般都是自带的。安装成全局的比较方便构建项目。

npm install -g grunt-cli # 全局安装
npm可安装的插件可以在这里去找找 www.npmjs.com/ 如果不能安装，可以使用淘宝的镜象资源

2、webpack 

webpack是一款打包工具，可以做一些js压缩，sass，less转换，图片处理，js代码合成，ES6转ES5语法等很多功能，如果用过grunt，或者gulp的朋友，webpack也就不陌生了。都是需要写配置文件。

3、ES6

github上很多案例都是用到了ES6的语法，所以，这里我们可以通过webpack的工具 babel ，把ES6的语法转化为ES5的语法，这样我们就可以使用github上面的demo了。

比如：

import '../css/common.scss';
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link, IndexRoute } from 'react-router' 
import { browserHistory } from 'react-router'
这里的import 就是ES6的语法，在webpack里面使用babel工具将其转化为 ES5的语法。我这里用了JSX（reactjs 提供的一种简洁的语法）如果对JSX不了解的，可以去百度下。

4、快速开发

每次我们在修改JSX文件，或者SASS文件后，都要执行webpack命令进行打包，这样的开发效率很慢，官方提供了一个很牛X的工具，react-hot-loader + webpack-dev-server 可以帮助你快速开发，自动刷新页面。

5、DEMO小试牛刀

这里我把自己做的一个DEMO分享给大家，如果你已经安装了nodejs，并且npm也是全局的。下载后解压，打开 start.bat，输入 npm install 安装所需的插件，安装成功后执行 npm start ，等项目跑起来后，在浏览器输入 http://127.0.0.1:3000 就可以访问项目了。

这里是一个 react-router 的一个例子。

github 地址：https://github.com/mtsee/react-router-demo

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。