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

常见的网页设计、文章设计错误
本文来自阮一峰分享

 1.内容未按逻辑分成块

用户可以根据逻辑块轻易的获取信息。

具体做法为：将padding设置为120px-180px，同时不同的逻辑块使用不同的背景。

2.每个逻辑块的空白大小不一致 

对于每个逻辑块，需要设置同等大小且适宜的空白。否则网页看起来会很混乱，作者不会对每个逻辑块同等对待。



 

3.Padding不能设置过小，否则用户无法将内容分为逻辑块

 为了这点，插入大的空白（至少120px），以使内容按逻辑块分开。





4.背景图片和文字 应该对比鲜明

 


5.在一页中，样式过多

太多不同 的排版和样式将会使得页面不太专业以及难以阅读。

解决的方法是，以字体为例，设置一种字体，字体为正常或粗体（保证在两种不同样式之内）



 

6.背景颜色块过于狭窄




7. 在一个狭窄的列中，放入了过多的文字

这导致用户阅读需跳很多行，整体看起来也不行。推荐的做法为，减少列的数量，精炼文字。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

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

解决问题的最佳方式可以是最大限度地降低问题的负面影响甚至将其消除，也可能是让事物呈现出其应有的样子，此外再无更好的选择。就像 Facebook 的产品设计师 Ruthia He 提到的「Good design is both invisible and obvious」（好设计是无形也是显而易见的）。真正的好设计能给到用户的是用户心中对它所期待的样子，所以「设计」会符合常理到让人无从察觉。其实这其中的每一个体验流程、触点安排抑或是设计细节，都是设计师们的精心策划与用心。

为什么有时候在「朋友圈」发状态，文字信息会被折叠？

自从「微信」发布 7.0 的新版本后，部分朋友圈信息会被折叠的问题受到了广泛的讨论。腾讯的公关总监张军对此给出了官方解释：当用户在「微信」发表原创内容即直接输入文字，信息会折叠较少，文字会得到较大面积的展示；而当用户发布粘贴复制的内容时，文字只会显示一行，其他信息将会被折叠。团队做这样的信息呈现设计是为了鼓励用户多发原创内容，提升朋友圈的整体使用体验。

旅游达人都爱的Booking为什么这么好用？

从「Booking缤客」预定酒店住宿后，系统会自动下载订单信息至本地。这样，当用户到达目的地时无论当地网络状况如何（哪怕出现因网络原因无法正常访问 App 的情况），仍可毫无压力地随时查看订单详情页。毕竟作为一家定位于帮用户在网络上预订世界各地住宿的国际化平台，用户身处异国地区需要查看住宿信息的使用场景很普遍。这个看似不起眼的小细节，却从设计逻辑的层面优化提升了产品的易用性，让产品真正贴近用户真实的使用场景，变得更加好用。

B站是如何营造陪伴感，让用户看剧不孤单的？

Bilibili 网站的电脑端不仅会在主页显示在线总用户人数，还会在每个视频的播放页面显示当前正在观看此视频的人数。将原本后台统计的数据显性化呈现在用户可见的页面，一方面利用访问数据吸引用户的好奇心进行观看，另一方面也会给予用户陪伴感与归属感。当看到有这么多小伙伴与你同时在线观看同一部影片，虽然看不见彼此，但心理上会有陪伴感。一个人在家看剧仿佛也没那么孤单了。

如何保证用户的操作行为，始终位于手部舒适区之内？

多数产品在设计页面模态弹窗引导用户操作行为时，都会将操作控件放在固定的页面位置（一般居中或者处于页面底部）。但「抖音」的设计却让人眼前一亮：系统会自动检测用户进行操作时手指与屏幕的接触位置，并将模态弹窗的操控按钮显示在离用户手指最近的地方。随用户手部活动区域变化而灵活变更位置的模态弹窗设计，使用户在进行手势交互的过程中，操作动作能始终在手部的舒适区域内进行，是应对大屏时代十分友好的体验设计。

为了改善长文阅读体验，我们悄悄开发了这个小功能

不知道你有没有发现「优设」的文章浏览页面右下角隐藏有「文章目录」的按钮。将鼠标移到按钮上可以看到文章目录的小导航。小标题的罗列既清晰呈现了文章结构，帮助读者迅速理解文章；又能起到快速定位文章内容的作用，一键直达想看的内容区域。阅读篇幅较长的文章对于缺少耐心或讲究效率的同学而言，无疑是痛苦的。有了这个「目录」功能的设计，看长文时的舒适度与阅读效率都加倍了。

天天听「网易云音乐」的你，可能都没发现这个小秘密

我们天天听歌的「网易云音乐」，在有网与无网状态下打开应用的跳转页面其实是不同的。因为对用户而言，只有在有网络尤其是无线网络的场景里才会在线听歌，当播放器处于无网状态下能够播放的只有本地音乐资源。所以设计团队根据用户具体的使用场景，设定用户在有网状态下打开 App 会进入「发现」的音乐首页，而在无网情境里会直接跳转「我的音乐」页面。音乐首页便于用户发现音乐资讯与歌单推荐，在线听歌；而「我的音乐」方便直接打开「本地音乐」列表，离线听歌。区别化的页面跳转为用户缩短了行为路径，节省了操作步骤，让使用体验更贴合具体使用场景。

当你在「腾讯视频」追剧播放进程被电话打断…

在「腾讯视频」看视频如果遇到播放进程被其他任务打断暂停的情况（比如接电话或者分享），当再次回到播放界面时当前视频并不是接着刚刚的暂停处播放的，而是会从暂停处往前倒几秒播放。这就如同我们追剧时会看到很多片头都有回顾上一集剧情的道理。在这里，「腾讯视频」是想让用户通过复习倒回的几秒老画面回忆起之前的剧情，接着看新画面时就能更好地连接完整剧情，得到更加沉浸的观看体验了。同样拥有这个贴心设计的还有「优酷视频」。

「抖音」是怎样利用一个按钮的小心机，达到鼓励用户分享行为的目标的？

在「抖音」的内容推荐页面刷视频时，你会发现正常情况下页面右侧的「分享」按钮显示为代表分享含义的普通 icon。但如果你在当前页面停留时间较久观看该短视频第三遍时，系统会预判用户对此内容感兴趣并有潜在分享意愿，此时右侧的「分享」按钮就会变成闪动的朋友圈或微信图标了。差异化的图标变化设计突出了「分享」功能，一方面是对用户心理与动作的预判揣摩，另一方面也从潜意识里起到了鼓励用户分享行为的目的。做产品，想办法驱动用户分享行为真的很重要。

在社交产品发布状态收到CEO的点赞，是种什么样的心情？

玩「即刻」的同学应该都有发现，「即刻」CEO 瓦恁的账号在社区内活跃得像高仿。时常更新自己的状态分享生活日常以及常常点赞回复用户的举动，让瓦总收获了一批忠实粉丝。还有一个很有意思的互动是：所有用户在「即刻」发表的第一条状态都会被 CEO 瓦恁点赞，这对于新用户而言会得到很大的惊喜和虚荣心上的小满足吧。虽然新用户第一条点赞应该是代码小哥哥又调皮了，但 CEO 时不时地参与到用户的互动中，确实是不错的增加用户粘性的方式。

「支付宝」收款码的隐藏小心机

「支付宝」的收钱功能我们都很熟悉：打开自己的收款码设置好金额，再拿给对方扫码即为收钱。但你可能没注意，当手机处于向下倾斜的角度给对方进行展示时，界面会自动旋转二维码的朝向并将按钮置灰不可点击。这里的二维码旋转设计是为了方便对方看即扫码，而按钮置灰则是防止用户误操作点击到设置金额。从用户日常行为出发，解决扫码不便的麻烦，真是隐藏很深的小细节大体验。

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

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

实现的最终效果图（文末会贴出全部代码，方便参考） 



1， 将此行代码加在红线所在的位置

,{fixed: 'right', width: 150, align:'center', toolbar: '#toolbarDemo'}


2，在合适的HTML位置加入 

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button>
    </div>
</script>
全部代码：

{include file="common/header"}

<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>

<table class="layui-hide" id="test" lay-size="sm" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button>
    </div>
</script>

<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            ,url:"{:url('admin/user/page')}"
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,limit:10 //一页显示多少条
                ,limits:[5,10,15]//每页条数的选择项
                ,groups: 2 //只显示 2 个连续页码
                ,first: "首页" //不显示首页
                ,last: "尾页" //不显示尾页
            }
            ,cols: [[
                {field:'id', width:80, title: '代理ID', sort: true}
                ,{field:'username', width:100, title: '代理名称'}
                ,{field:'level', width:100, title: '代理级别'}
                ,{field:'email', width:80, title: '电子邮箱'}
                ,{field:'phone', width:280, title: '手机号'}
                ,{field:'agent_id', width:280, title: '上级代理ID'}
                ,{field:'status', width:280, title: '是否启用'}
                ,{field:'isAuth', width:280, title: '是否已经认证'}
                ,{field:'money', width:280, title: '金额'}
                ,{field:'created_time', width:280, title: '访问时间',sort: true}
                ,{fixed: 'right', width: 150, align:'center', toolbar: '#toolbarDemo'}
            ]]

        });


        //监听工具条
        table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj);
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'detail'){ //查看
                //do somehing
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            }
        });

    });

</script>
</body>
</html>

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

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

在这个看脸的时代，无论是真实社交，还是网络社交，甚至虚拟形象社交，都是「颜值即正义」。长得好看是一大优势，或者至少要满足彼此的审美才有进一步发展的可能。当然要想真正地完成社交目的，还是要看个人的社交能力。在进行网络社交时（兴趣社交除外），可谓「无头像，不社交」，毕竟跟陌生人搭讪的筛选成本太高，看头像照片是最直接快速的方式。据说，有好事者在三里屯注册了某一款陌生人社交软件，并将头像设置成了一个在卢浮宫的露背少女照片，在短短时间内，居然收到了 10000 多次点赞，头像的魔力可见一斑。

头像设置流程

头像设置流程一般包括头像选择、上传、裁剪、预览四个步骤，在用户界面展现时，部分步骤可合并或跳过，但至少要包括裁剪和预览。

1. 选择图片源

头像图片的来源包括本地图片、系统推荐头像、用户个人线上相册、即时拍摄等。同一产品在不同端可以支持不同的上传渠道，比如 PC 端摄像头拍摄质量不佳，而且台式机不一定配备，一般可以不做支持。

2. 上传条件限制

上传本地图片作为头像时，图片的格式、尺寸、文件大小规则应尽量放开限制，至少要支持 JPG、GIF、PNG、JPEG、BMP 等格式。随着手机拍摄照片的尺寸和大小越来越大，所以 5~6M 是一个比较合适的上限。关于服务器图片存储，应保留一张高清大图和多套不同尺寸的缩略图。

3. 裁剪处理

图片裁剪包括系统自动裁剪和用户手动裁剪。如果不支持手动裁剪，最好把系统自动裁剪和截取做了。京东商城 web 端就没有截取图片中央区域，而是直接挤压或拉伸图片，导致图片变形效果很差。手动裁剪时，一般要辅助缩放、旋转、镜像等功能。缩放时需注意极限值，否则会导致背景空白（如QQ空间），要做相应的填充处理。裁剪框最好加入辅助线（如九宫格、方圆）和遮罩，方便实时预览方形和圆形头像的效果。有时也会加入滤镜、贴纸等功能。

4. 效果预览

「所见即所得」是打造优良用户体验的诀窍之一，所以提供实时反馈和预览是必不可少的。比如裁剪得到的各种形状和尺寸的预览，滤镜效果实时渲染等。当然，实时性也和系统性能有关。

头像的常见展示形状包括方和圆，有时也有异形头像。关于头像形状的「方圆」论证可以参考微信和 QQ 设计师的官方回复。

同样作为腾讯的产品，为什么 QQ 的头像是圆的？而微信的头像是方的呢？

腾讯的回应如下：

相比方形，人的头像更接近圆形。圆形 QQ 头像能更突出头像弱化背景，也更鼓励用户使用真实自拍作为 QQ 头像。

QQ 作为平台会接入游戏和第三方应用内容，圆形 QQ 头像在这些方形、异形图标环境中提高辨识度，降低用户的认知门槛。

QQ 希望给用户传递乐在沟通，展现年轻个性的态度，圆形 QQ 头像更具灵动和活力，与之无缝衔接的头像挂件也为用户带来更个性化的搭配和丰富的自我展示。

因为照片本来是方的，方头像更符合用户习惯。

《为什么微信头像是方的？QQ头像是圆的？｜你问鹅答》

还有百度小程序关于头像的规范可供参考：头像应保证清晰，头像的主体元素在方形或圆形参考线内，不遮挡关键信息，确保前端展现时能在圆形轮廓中展现完全。

设置头像的12种方式

1. 默认头像

为缩短注册流程，减少潜在用户流失，用户注册过程中一般不会强制用户设置头像。所以，为防止用户不去设置头像以及页面中头像加载不出来，系统会提供默认头像以便在相关位置展示。可以采用灰色头像，也可以采用基于企业吉祥物卡通形象设计的彩色头像（例如虾米、转转）。二者各有好处，灰色头像可以时常提醒用户去设置头像，彩色头像则可以丰富画面、增加趣味性。不过唯一的遗憾是一旦设置了新头像，改不回默认头像了，毕竟有的默认头像还是挺好看的。有的社区允许游客用户进行点赞、评论等操作，这时便会用到游客默认头像。当然，同一系统内，默认头像也可以不唯一，比如，根据用户性别、星座匹配头像，根据用户身份角色匹配头像（司机/乘客，招聘者/求职者），或者制作头像库为用户随机分配头像。

2. 系统推荐头像

让用户自己拍摄或找到一张自己满意的图片做头像，对有些用户而言其实是一件成本比较高的事情。如果用户群体足够大，图片质量难以保证，甚至内容监管又会带来新的问题，所以推荐一些优质头像供用户挑选，就成了一个很不错的辅助解决方案。QQ 很早就推出了类似功能，甚至成了会员服务的一部分。平安金管家 APP 也有类似功能，提供了四个商务风格的卡通头像供用户选择。

最近比较火的匿名社交APP Soul 也同样支持使用系统推荐头像，而且是只能使用系统头像，如下图所示，用户可以根据自己所设置的性别，头像风格选择心仪的头像。Soul 不允许用户上传其他照片作为头像，也是希望用户能抛开颜值，找到真正的灵魂伴侣。这些头像本身也体现了用户个体的审美情趣、价值观等。最近 Soul 新上线了「超萌捏脸功能」，下文会着重详细分析，不过捏脸而成的头像依然可以算是系统推荐头像，只是把头像拆解成了头发、脸、眉毛、眼睛、鼻子、嘴巴、衣服配饰等元素，然后再由用户自己排列组合。

3. 随机选择头像

前文也提到了随机头像，即系统会在用户注册成功后为其随机匹配头像，避免单一默认头像的沉闷，记忆中以前 GitHub 就是采用这种做法。另一种随机头像是指用户主动选择随机头像，获得相应的惊喜，比如哔哩哔哩就采用了这种做法。不过实在难以琢磨出这种类似「变脸」的玩法背后的设计逻辑。

4. 使用历史头像

在用户使用过一段产品之后，可能会积累大量的历史头像（主要是用户自主上传的，使用过的系统头像不记录在内）。QQ 就把用户的这些头像收集起来展示给用户，以便用户查看或重新选择，虽然用户重新使用的几率并不大，但不失为一种增进用户情感、提高用户粘性的做法，毕竟这里面满满都是青春的回忆，很容易给用户带来触动。

微信也有类似的做法，不过只能查看上一张头像。微信的设计哲学是不去刻意讨好用户，所以这里更多的是防止用户反悔，方便用户在最近使用的两张头像之间切换对比。马蜂窝的做法与 QQ 类似，不过增加了删除历史头像的功能（当前头像不可删除）。聊天宝（原子弹短信）有很多锤子的设计基因，锤子的设计师们推崇工匠精神，爱为用户创造小惊喜，所以聊天宝不能查看自己的历史头像，但却能查看好友的历史头像。不妨推测下背后的设计动机：现代人分分钟互相加个好友，但可能来不及备注，而人们对图像的记忆更准确、持久，所以看到头像可能就会很快地回忆起好友姓名、相识的场景等信息。

5. 文本头像

文本头像在商务类应用中比较常见，例如 OA。由于办公社交的社交属性并不是很强，更多在于及时通讯，所以图片头像并不是特别重要，并且文本头像中的字号更大，更容易辨识。要注意文本颜色和背景颜色的对比度，另外同一个应用中，文本和背景可以多做几个配色方案随机展示，以丰富视觉效果。此外还要注意文本的取值显示规则，下图是钉钉的部分页面截图，可以从中推测：

• 汉字类：单个或两个汉字展示全部汉字，三个及以上汉字仅展示后两个汉字；
• 英文类：一个单词时取前两个字母，两个及以上单词取前两个单词的首字母；
• 数字类：单个或两个数字展示全部数字，三个及以上数字仅展示后两个数字。

6. 角色头像/匿名头像

相信很多人都玩过 QQ 的匿名聊天功能，然后就被管理员禁止了，它更像是一种娱乐性玩法。其实还有类似的做法，在游戏中较为常见，在角色确定前显示的是用户头像，角色确定后就显示角色头像。比如斗地主，地主身份确定前显示用户本身头像，确定后则显示角色头像，而且还会根据角色性别显示相应头像。

7. 动态视频头像

动态视频头像可以让用户跨越时间维度从多角度展示自己。依然以 QQ 为例，动态头像分两种，一种是 QQ 会员才可使用的动态头像，由系统推荐，用户自主选择；另一种是让用户自己拍摄录制。具体流程如下图，用户先录制视频，然后选择一帧作为静态头像，以便能在不支持展示动态头像的地方展示。这也是目前的一大趋势，不过如果好友列表的头像都在动也还挺吓人的。

8. 轮播头像

针对陌生人社交场景，如探探，头像更显得重要，左滑还是右滑就在刹那之间，点进去主页也根本不会下滑屏幕细看具体的兴趣、资料，所以就要尽量在首屏展示更多更大更清晰的照片，轮播图就是一种很好的形式。探探最多可设置 6 张图片或 6 段视频作为轮播头像。其实，轮播头像类似 QQ 照片墙的概念，不过自我展示意味更浓。

采用类似轮播头像做法的还有音遇 APP，虽说主张以歌会友，但谁都喜欢唱歌好听的小哥哥小姐姐还有高颜值。如下图，个人主页背景图即头像轮播。还有一些社交软件可以将个人系列头像设为私密，然后定向开放展示给需要的人。

9. 捏脸头像

ZEPETO（中文名：崽崽）的火爆刮起了一阵虚拟形象社交的风潮，虽然是三维形象的玩法，但和之前红极一时的脸萌并没有本质的区别，要想实现从工具到社交的转变，获取关系链才是王道。多闪和 Soul 动作也很快，已经上线了捏脸功能，虽然目前是二维的，但相信巨头们早已开始布局三维虚拟形象社交了。目前 ZEPETO 可编辑脸型，甚至可以进行简单的化妆。服装配饰则包括衣服、头饰、首饰等，且支持按上架时间、价格等排序。室内装饰则涵盖了地板、家具、摆件、乐器等等。手势主要是一些肢体动作库，动作效果十分连贯。可以说 ZEPETO 集成了用户对场景搭建+服饰搭配+颜值定义+炫酷动作的完美幻想，同时也扩充了人们对虚拟形象社交乃至电商新形态的想象空间。

目前市面上，尤其是游戏领域，不管画风是 Q萌，还是 3D，时尚亦或仙侠，人物建模及捏脸系统已经比较完善，且得到广泛应用。这里推荐一款叫做 IMVU 的 APP，它的人物画风、服饰质感比 ZEPETO 更加写实，更偏成人化，视角转换也更加流畅，支持俯视/仰视。不过，脸萌早已凉凉，美图的图片社交之路似乎完全和 ins 对不上标，所以 3D 虚拟形象社交的未来之路也未可知。

10. 头像挂件

头像挂件、等级徽章、认证标志也属于头像的一部分，不过需要结合付费会员、用户成长体系、认证规则进行讨论才有意义。

11. 使用第三方头像

使用第三方社交账号快速登录已经成为登录注册页面的标配，毕竟一个授权就解决了账号注册、头像及昵称设置等问题。这两天，吃瓜群众们又一次见证了「头腾大战」。多闪使用了用户的微信头像和昵称，可是并没有得到相应授权，因为之前的授权是给抖音的，当然现在也停止授权了。不管是不是抖音碰瓷，但微信/QQ 账户上的头像、昵称的权益归属确实是个问题。个人上传的头像还好说，如果用的是系统推荐头像，这些图片的版权是不是归属腾讯呢？用户使用第三方登录后，最好还是引导用户尽快绑定手机并设置完善其他资料。

12. 群组头像

这里以 QQ、微信和钉钉为例进行分析。微信群聊头像由群成员头像组合生成，在方框内嵌套群成员的方形头像，根据群成员的数量多少（1-9）进行相应排布，多于 9 人时显示前 9 人头像。另外，微信暂不支持设置图片为群头像。钉钉群与微信类似，不过外观上是圆形外框嵌套群成员的方形头像，显示数量也有所限制（最多显示前4个），但可以选择其他图片作为群组头像。QQ 群比较复杂些，可分为讨论组和群，虽然现在统称「群聊」，根据创建方式区分如下：选人创建（对应的是讨论组）和按分类创建（对应的是群）。讨论组也是不能设置头像的，是在圆形内嵌套群成员的圆形头像，最多可显示前 5 个成员的头像。而群头像由管理员设置，且可以查看历史头像、使用系统推荐头像等。另外还有 TIM，定位是对抗钉钉的办公软件，比 QQ 更轻量化，视觉风格也大不相同， TIM 中讨论组头像的展示就采用了类似钉钉的做法──圆形外边框+方形头像。

延伸一下，有人说微信重新定义了群的设计形态，更贴近用户自然使用方式：无需群ID，无需刻意创建群，随时拉人开聊，无需命名，默认不保存到通讯录，搜索群时可通过直接搜人实现等。

结语

本文列举分析了头像设置的相关设计思路和案例，对社交产品的头像设计大有裨益。在设计时，寻求相关设计参考是获取灵感和解决方案的有效方法，认真发现生活中的好设计，及时积累并总结，才能在关键时刻有高质量的输出。

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

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

 最近遇到一个作业，要求使用 Echarts 散点图，本来这个图是很容易的，官网上也有很多的教程。但是如果可以动态的更新 Echarts 散点图就更好了。我本身对 js 不感兴趣，经过不停的查找资料最终实现了这一功能。
我的项目是 Servlet + jsp + Echarts。先从 Servlet 入手，我们的项目需要传递的数值是 x 坐标和 y 坐标。我首先写了一个 JavaBean

julie.java

package JavaBean;

public class julei {
    public julei(double x, double y) {
        this.x = x;
        this.y = y;
    }
    double x;

    public double getX() {
        return x;
    }

    public void setX(double x) {
        this.x = x;
    }

    public double getY() {
        return y;
    }

    public void setY(double y) {
        this.y = y;
    }

    double y;

    @Override
    public String toString() {
        return "[" + this.x + "," + this.y + "]";
    }
}


Servlet中的代码，因为使用的是 json 来传递的数据，所以 json 相关的包还是少不了的。
BackServlet

package Servlet;

import JavaBean.Readtxt;
import JavaBean.julei;
import org.json.JSONArray;
import org.json.JSONObject;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@javax.servlet.annotation.WebServlet("/BackServlet")
public class BackServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {



        List<julei> list = new ArrayList<>();
        try {
            list = Readtxt.out();//这是我们项目中的一个类，不重要。
        }catch (Exception e)
        {
            System.out.println(e.toString());
        }


        JSONArray jsonArray = new JSONArray(list);
        System.out.println(jsonArray.toString());
        //最重要的就是这一句，将数据发送给谁来申请的位置
        response.getWriter().write(jsonArray.toString());


    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

    }
}


好了，现在到了最重要的前端方面了。
index.jsp
正常声明散点图，只要把data声明为空就好。

  var myChart = echarts.init(document.getElementById('man'));
          var option = {
            title : {
              text: '死亡分布图',
            },
            xAxis: {axisTick: {//决定是否显示坐标刻度
                alignWithLabel: true,
                show:true
              },},
            yAxis: {},
            series: [{
              symbolSize: 20,
              data: [],
              type: 'scatter'
            }]
          };
          myChart.setOption(option);

数据接收部分：

var num = [];
          var gao = new Array();
          $.ajax({
            type : "post",
            async : true, //异步请求（同步请求将会锁住浏览器，其他操作须等请求完成才可执行）
            url : "BackServlet", //请求发送到TestServlet
            data : {},
            dataType : "json", //返回数据形式为json

            //7.请求成功后接收数据name+num两组数据
            success : function(result) {
              //result为服务器返回的json对象
              if (result) {
                //8.取出数据存入数组

                for (var i = 0; i < result.length; i++) {

                  gao.push([result[i].x,result[i].y]);//这一句很重要，它将数据转化为了正确的格式。

                }

                myChart.hideLoading(); //隐藏加载动画

                //9.覆盖操作-根据数据加载数据图表
                myChart.setOption({
                  series : [ {
                    // 根据名字对应到相应的数据
                    data : gao//在这里对data进行赋值。
                  } ]
                });

              }

            },
            error : function(errorMsg) {
              //请求失败时执行该函数
              alert("图表请求数据失败!");
              myChart.hideLoading();
            }
          })




完毕

我把整个jsp都放上来了，但是里面的 css 还有 js 就不放了,重点是传数据的那一部分。

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>LOL数据分析</title>
  <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src='js/echarts.js'></script>
  <link rel="stylesheet" href="css/jquery.fullPage.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
  <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
  <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>

<body>
<div class="bgcolor">
  <div style="z-index:100;" id="dowebok">
    <!--第一屏-->

    <div class="section">
      <div class="ly-box01">
        <img class="ly-img01" src="img/logol.png" style="width:100%;height:100%">

      </div>
    </div>

 

    <!--第三屏-->

    <div class="section">
      <div class="timeline"></div>
      <div class="timepoint21"></div>
      <div class="ly-box11">
        <div id="man" style=" width: 600px;height: 500px;"></div>

        <script type="text/javascript">
          // 基于准备好的dom，初始化echarts实例
          var value=[];
          $.ajaxSettings.async=false;
          var myChart = echarts.init(document.getElementById('man'));
          var option = {
            title : {
              text: '死亡分布图',
            },
            xAxis: {axisTick: {//决定是否显示坐标刻度
                alignWithLabel: true,
                show:true
              },},
            yAxis: {},
            series: [{
              symbolSize: 20,
              data: [],
              type: 'scatter'
            }]
          };
          myChart.setOption(option);






          var num = [];
          var gao = new Array(4);
          $.ajax({
            type : "post",
            async : true, //异步请求（同步请求将会锁住浏览器，其他操作须等请求完成才可执行）
            url : "BackServlet", //请求发送到TestServlet
            data : {},
            dataType : "json", //返回数据形式为json

            //7.请求成功后接收数据name+num两组数据
            success : function(result) {
              //result为服务器返回的json对象
              if (result) {
                //8.取出数据存入数组

                for (var i = 0; i < result.length; i++) {
                  gao.push([result[i].x,result[i].y]);
                }

            //  document.write(gao);
                myChart.hideLoading(); //隐藏加载动画

                //9.覆盖操作-根据数据加载数据图表
                myChart.setOption({
                  series : [ {
                    // 根据名字对应到相应的数据
                    data : gao
                  } ]
                });

              }

            },
            error : function(errorMsg) {
              //请求失败时执行该函数
              alert("图表请求数据失败!");
              myChart.hideLoading();
            }
          })






        </script>
      </div>
      <div class="ly-triangle21"></div>
    </div>
  <!--试验-->

  <ul class="bg-bubbles">
    <li><img src="img/logol.png" style="width:100%;height:100%"></li>
    <li><img src="img/logol.png" style="width:100%;height:100%"></li>
    <li><img src="img/logol.png" style="width:100%;height:100%"></li>
    <li><img src="img/logol.png" style="width:100%;height:100%"></li>
    <li><img src="img/logol.png" style="width:100%;height:100%"></li>
    <li><img src="img/logol.png" style="width:100%;height:100%"></li>
    <li><img src="img/logol.png" style="width:100%;height:100%"></li>
    <li><img src="img/logol.png" style="width:100%;height:100%"></li>
    <li><img src="img/logol.png" style="width:100%;height:100%"></li>
    <li><img src="img/logol.png" style="width:100%;height:100%"></li>
  </ul>

</div>

<audio src="music/1.mp3" autoplay="autoplay" loop="loop" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script src="js/diy.js"></script>
</body>
</html>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

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

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

这是在设计群看见的一个启动页视频，第一感觉就是品牌色由「青绿色」变成了「黄色」，采用 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 生命周期相关（一）挂载生命周期
---------------------