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

当别人问你什么是交互设计时，你又一脸懵逼了。本篇文章就来好好聊聊什么是交互设计

工作了很多年，却依然说不出何为交互设计。一说道理，大家都懂，但是当别人问你什么是交互设计时，你又一脸懵逼了。为什么会这样呢？因为我们没有自己去总结，没有形成自己的知识库。

交互设计，它由IDEO的一位创始人比尔•莫格里奇在1984年一次设计会议上提出，他一开始给它命名为“软面（Soft Face）”，由于这个名字容易让人想起和当时流行的玩具“椰菜娃娃（Cabbage Patch doll）”，他后来把它更名为“Interaction Design”――交互设计。

首先，我们来看看权威方对交互设计的定义：

交互设计协会(The Interaction Design Association (IxDA))解释如下：

交互设计师以创造有用且实用的产品及服务为宗旨。以用户为中心作为设计的基本原理，交互设计的实际操作必须建立在对实际用户的了解之上：包括他们的目标、任务、体验、需求等等。以用户为中心的角度出发，同时努力平衡用户需求、商业发展目标和科技发展水平之间的关系，交互设计师为复杂的设计挑战提供解决方法，同时定义和发展新的交互产品和服务。

 

百度定义如下：

交互设计（英文Interaction Design, 缩写IXD)，是定义、设计人造系统的行为的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系，以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和”用户体验“两个层面上进行分析，关注以人为本的用户需求。

 

唐纳德诺曼给出的定义：

重点关注人与技术的互动。目标是增强人们理解可以做什么，正在发生什么，以及已经发生了什么。交互设计借鉴了心理学、设计、艺术和情感等基本原则来保证用户得到积极的、愉悦的体验。

 

首先要知道什么是交互

交互，及沟通交流，发生互动关系。比如人和人之间的交互就比较好理解，最经典的一幕可以用孙悟空智斗金角大王、银角大王。金角大王说：孙行者，我叫你一声你敢答应吗？然后，金角大王就叫：孙行者。孙悟空回答：爷爷在此。就这样，孙悟空就被收进去了。这就是一个简单的交互。

再比如，我们每天上班，到公司和同事打招呼。你说：“早上好呀”，同事回答“早”。这也是一个常见的交流互动。

 



 

人和人之间的交互比较好理解，那人和机器呢？其实也是非常好理解的。我们都忘不了微信推出的摇一摇功能，打开摇一摇，摇动手机，就会出现“咔咔”的声音，然后加载，搜寻出一个和你同时在摇的人。其实，我们和任何机器之间的发生互动关系，都是属于交互。往更广的意义上说，如果失去了交互，地球将不再运转，将毫无生机。现在，智能时代已经到来，我们除了研究人和人、机器、产品、环境、服务、系统等之间的关系，还要研究机

器和人、机器、产品、环境、服务、系统之间的关系。

 



 

总之，当人（或机器）和事物（无论是人、机器、产品、服务、系统、环境等等）发生双向的信息交流和互动，就是一种交互行为。

 



 

其次，我们来聊聊设计

聊设计之前，我们要先说说艺术，原研哉老师对设计和艺术的描述非常精辟，下面就引用他的话。

 


 

艺术说到底是个人意愿对社会的一种表达，其起源带有非常个人化的性质，所以只有艺术家自己才知道其作品的来源。这种玄虚性使得艺术“很酷”。当然，解读艺术家生成的表达有多种方式。非艺术家通过对艺术的有趣阐释与艺术互动，欣赏之，评论之，在展览中对艺术进行再创作，或把艺术当做一种知识资源使用。

而设计，则基本上不是一种自我表达，它源于社会。设计的实质在于发现一个很多人都遇到的问题，然后试着去解决的过程。由于问题的根源在社会内部，除了能从设计师的视角看问题外，每个人都能理解解决问题的方案和过程。设计就是感染，因为其过程所创造的启发，是基于人类在普遍价值和精神上的共鸣。（来源，原研哉，设计中的设计）

通过上述的描述，我们不难发现，设计主要表现在发现问题–解决问题。而交互设计就是发现和解决人（或机器）和事物（包括人、机器、产品、服务、系统、环境等等）之间的互动关系问题。

所以说，交互设计的范围是非常广的，和各个学科都有涉及，我们可以通过下面的图来看看交互设计和各个领域之间的关系。

 



 

那交互设计主要是做什么工作呢？

作为交互设计师，也应该好好问问自己这个问题。通常，外界的人就认为我们就是画画原型，或者有时候画画UI，而我们通常就是这么做的，所以也不得不让人们这么想。而现在大多数交互设计就是指移动端、网页端的交互设计。

那么交互设计的核心竞争力是什么呢？对于很多公司来说，其实是没有交互设计这个岗位的，交互的工作就由产品经理和UI设计师各自分担了。现在产品经理基本都掌握了原型技能，而且产品经理通常在做需求移交的时候已经把交互表达的很清楚了。而且很多UI设计师能力较强一点的，在做设计的时候都会考虑到交互。如果交互设计师在公司就只做做原型，那么，你就会被取代。

那么交互设计的工作内容到底包含哪些呢？《用户体验要素》这本书很好的说明了这些内容。本书把用户体验要素分五个层级：战略层、范围层、结构层、框架层、表现层。不同层级，表示着你的不同能力，引用一下大众点评高级交互设计经理范怡的一张图，比较形象的描绘了交互设计的能力范畴和价值。

 



 

怎么样，看到这些是不是有一点点觉悟了呢。如果想做好一名交互设计师，就应该扩大自己的能力范围，提升自身价值。怎样做好交互设计呢？如何运用设计原理来做交互设计呢，我们下篇来聊聊唐纳德罗曼老师书里的交互设计6要素：示能、意符、约束、映射、反馈、概念模型。

 

原文地址：站酷
作者：Luyeelin

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

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

第一段：工具

设计师学习的第一阶段其实都是从工具开始的。这分为两种：
第一种是有形工具，比如PS、AI、Axure之类的软件；
另一种是无形工具，就是设计时用到的思维方式。
1、有形工具
先说第一种有形工具。
很多人在学习UI时很容易陷到工具的学习里去，觉得工具学的越多能力就越强。其实根本不是这么一回事，软件对交互来说是非常基础的一部分。
从UI视觉方面来考虑，PS就足够了，AI都显得略有多余，不需要其他软件。PS其实是一款非常强大的视觉软件，切图也比较方便，BAT等公司也是用的PS。
还有输出交互文档的工具，一种是PPT，一种是Axure，这两款软件就足够覆盖绝大多数交互文档了。当然还有其他软件，如果是快速迭代的原型直接在纸上画也可以。
交互需要快速沟通，你要拿着设计反复和其他人对接。要是搞了个很生僻的软件给别人，结果别人打不开，老板就会骂你。要记住自己是设计的一环，能快速传递自己的设计思路才是最重要的，不要搞一些生僻的软件、格式和字体，这都是门外汉干的事。
像AE、Flash面试时可能会给你加分，因为公司可能有一些高保真的动画展示要做，其实在真实工作中用到的机会非常少。
2、无形工具
第二种是无形的思考工具。设计思维其实最不好培养，说的残酷点，你可能看五年的书都出不来思维，最好能有人指点一下。

第二段：新产品、新思路

前沿的设计意识，是很多设计师容易忽略的。
这个怎么练呢？
每天一定要抽出三十分钟的时间看新产品和新思路，这是今天的互联网设计师必须要干的一件事。很多一线团队每天都会分享各种各样的新闻，百度有自己的分享机制，三星喜欢每个月让设计师找的交互、用研、技术信息，收集起来专门搞一个月报。
设计师有很多渠道可以看前沿信息，比如互联网一些事，爱范，36kr，瘾科技之类的网站。这种前沿意识非常重要，它决定了你能在二流公司还是一流公司，这是排在第二位的。
这个坚持三个月以后，自然而然就会飞跃，不需要怎么特意去学，这可不是培训可以得到的，养成一个好的习惯，每天看半小时其实就是最好的学习。

第三段：人——对人和需求的研究

工具和思维的问题比较好解决，最难解决的问题其实是“人”的问题。可能很多设计师一辈子都解决不了“人”的问题，而它对企业的影响又是最大的，交互设计最重要的就是解决“人”的问题。这一点甚至能决定一款千万级甚至上亿级产品的生死。要知道你的一切设计行为都是为商业负责的，所以前期对交互不甚了解，可以先从PS开始，后期就是“思维”和“人”，这两个东西是比较难的。


看看前辈是怎么说的：

交互设计目前发展得怎样，前景如何？
答：现在我们接触到的交互设计可能只局限在网页或者APP这种，交互设计是个很广泛的概念，前景肯定是有的。互联网是人和服务的对接，很多崭新的设计和商业模式一旦出来，那就是新的商机。

新手自学UI应该从何处入手？
答：视觉基础不好的就学PS去临摹，现在很多开源的信息，比如学UI网。如果临摹到一定程度，可以看一看dribbble，其实视觉非常好解决，思维的提升才困难。

学习交互设计需要掌握什么软件？
答：PPT和axure足够了，这两个东西都不需要学。随便来个人学两三天都能拿着软件画出漂亮的线框图，关键是你的线框图从哪里来、为什么要这么画。

交互设计师需要学习代码吗？
答：交互设计师不需要学代码。知道为什么企业招聘要求你们懂代码吗？因为很多企业希望你做了设计做前端，节省人力成本，正式公司都不会有这个要求。就算你觉得设计师应该学代码，建议你还是先把本行的设计能力学好。当两件事你都要做的时候意味着哪件事你都做不好，这是自我管理的问题。

交互需要手绘功底吗？
答：手绘功底？有或者没有都可以，交互不需要你造型能力多强，你只要能把逻辑关系画出来就行了，不需要搞什么素描阴影。你不是要做画家，朋友们，画家和设计师是有区别的。

（内容来源网络，如有侵权请联系，承诺必定删除）

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

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

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

 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。