我们经常需要引用（白嫖）一些网页上的文字，但是豆丁网，百度文库等等设置的有复制权限，我们无法直接复制，或者复制文字有上限，提示付费。

    这里介绍几种，都是些花里胡哨的白嫖方案：

1.手机扫描：

    拿着手机，用手机QQ的文字扫描直接去识别问题，遇上好识别的文章短的直接就识别，但是这种方法遇到文章比较长的就十分麻烦。可以针对那些选中



2.魔鬼牵引：

    原来在计蒜客就这样搞，选中网站上的文字，然后用鼠标一直拖到别的页面，或者一个记事本什么的，屡试不爽。



3.侧边翻译：

    侧边翻译，火狐或者谷歌下载一些插件，比如说侧边翻译，这个东西小巧玲珑，选中文字侧边翻译之后你就可以对文本进行复制了。



4.原始查看法：

    在浏览器中直接F12，打开浏览器查看，就下面这个东西，浏览器你要复制的文本就在这里面，里面封装的html语言，你可以搜索你需要找的文字，然后可以直接复制，如果想要复制多一点你也可以直接把里面的html语言拿出来解析到自己的网页里面，然后再进行复制。





5.氪金法：

    没别的，充钱就完事了。



6.某巨巨提供：

    下载一个ocr工具，类似qq扫描的功能。

互联网的底层逻辑就是以一种更的形式来满足了我们的需要，让我们的生活和生产更加的智能和。

底层逻辑是什么？如果给它一个释义的话，那应该是：最初的意图或做一件事情原始的出发点。

互联网的底层逻辑

我们生活在一个网络时代。可以利用网络，购物，打车，叫外卖，娱乐，办证，学习等需要。可是在没有网络的年代里，做任何事情都是需要跑腿和亲力亲为。

我们对比没有网络年代。互联网给我们生活带来了极高的便利和效率。

我认为互联网的底层逻辑是：用一种更的形式来满足我们生活生产而产生的需要。

我们拿买衣服，购买外套举例。

• 进店购买：询问导购–找到外套–挑选–决定买不买
• 网上购买：搜索外套–屏幕展示外套–挑选–决定买不买。

经过对比发现：

进店购买和网络购买最初的意图都是满足穿衣服。两种形式的心理活动逻辑一样。都是店铺找到外套，然后作出购买决定。只是两种方法的获取形式和途径是不一样的。

1. 实体店询问导购，变成了我们线上自主搜索。
2. 口头说出外套变成输入关键词“外套”。
3. 获取到的结果由导购带到引导变成外套信息数据展示

互联网技术的让购物，让买衣服多了一种途径，多了一种形式并且有别于我们传统的购买方式。

再如直播卖货，直播卖货在网络上火了一把。口红一哥李佳琦直播卖货，1分钟售罄14000支唇膏、打破“30秒涂口红”吉尼斯记录、5个半小时带货353万……最高时段3000万人在线围观。

现在我们要聊的并不是网络红人的伟大数据。而是网络直播这个事。想一下，网络直播是否在真实生活情景有原型。

看到上面的情景，是不是觉得熟悉了。

• “瞧一瞧，看一看”
• “厂家做活动，回馈消费者，不要1999，不要1599，只要999”
• “走过路过不要错过”
• …..

我们暂时称这些情景为现场直播，现场叫卖。由于互联网技术的成熟，直播平台的成熟。将现场直播搬到了网络直播。网络直播底层逻辑就是现场叫卖的另一种形式。

我们可以发现，互联网很多项目其实都是可以从现实生活中找到原型：

• 购物–电商
• 线下地推–网络直播
• 电话叫餐–外卖
• 培训–网课
• 阅览馆–电子书
• 办证跑腿提交纸质资料–网上提交电子档资料
• ……

互联网如何让生活生产变得更为？

1. 连接，跨空间，跨地域连接人

假如没有网络，我们人与人之间的生产活动大多只存在于本地圈子。例如：

• 在当地文化圈学习，与当地同龄人成为同学。
• 信息和话题交流闭塞，对外界信息获取滞后。
• 和当地人做生意，把货品卖给当地的消费者。

有了网络：

• 在抖音快手，我们可以看到其他城市的面貌，了解更多的人文民俗。
• 在网络课程上学习平时接触不到的知识。比如：理财，摄影，写程序，做会计。
• 还可以通过电商将生意做到全国各地。

网络连接能突破界限，跨地域、跨空间，将不同省份，不同城市的人，通过互联网联系起来。然后将我们的信息，个人技能，社会信息放大到更多地方。

2. 赋能，释放能量，价值最大化

以前有种现象。那就是信息不平衡，需求与被满足不平衡。

比如：A想采购一批水果加工仪器，但当地农业为主，别说售卖水果加工仪器，即便是询问他人也鲜有人知道。

但在网络时代，我们只要百度或者阿里巴巴搜索。总会得到我们想要的线索或者结果，总能找到加工仪器供应商的信息。

再如：十八线县城要学习IT编程语言，一般来说要去大城市培训机构学习。有了网络，直接在一些课程平台上购买课程就可以了。

上面的例子想说明的就是互联网可以放大社会资源的利用率，将价值更大化，让更多人参与参与到社会资源的共享当中。消除局限和阻隔，将知识课程提供千千万万的人可以学习使用。

滴滴平台一方面解决了人们打车难的问题，另一方面也将闲赋私家车全部利用起来，给打车这和私家车车主同时满足需求和创造价值。

几年前我们看着小卡片的菜单和电话叫外卖，现在我店家再也不用通过发传单来招揽生意了，只要用户有需要打开app就可以实现足不出户享受用餐。

互联网将社会资源效率更大化。无论是外卖平台，学习平台，电商平台都是将原来局限在小范围的服务放大到全国各地的人群使用。这些都是互联网技术赋予的能量。

3. 破界，突破界限，让不可能成为可能

在那个守着电视机，听广播看报纸，用着纸币的年代。怎么也不会想到今天我们可以拿着手机看新闻，追剧，刷抖音；用手机乘公交，乘地铁；手机当钱包，网纱购物，线下消费。所以很多老人好像有点不能理解年轻人的生活方式。

所以技术可以让满足我们需求的方式发生改变，甚至是颠覆的。

从前我们看的也并不是电视本身，而是看声情并茂的画面；报纸也不是报纸而是信息；使用纸币是为了完成交易。电视，报纸，纸币这是一个时代的载体。

互联网技术的发展让这些载体发生了变化，打破了刻板印象。让我们知道了很多东西其实只是个物体，这些物体帮助实现我们内心产生的需要。

今天只是这些物体被新的物体替代了，就好比手机替代了一部分看电视的需求。在十几年前我们怎么也不会想到今天那么多东西都被改变和替代。也许我们现在不切实际的想法，在将来的某一天也终将会被替代和成为现实。

互联网把我们每一个人连接在一起。放大了市场，提升了效率，突破了界限。用一种新的形式满足人们日新月异的需求升级。

互联网继续，5G来袭，展望未来。

互联网已经渗透到了各行各业。大到与我们生活息息相关，也可以小到陌生领域。人们都说互联网的发展已经到了瓶颈，我更愿意相信是互联网是暂时进入到了它的发展周期。

技术只会不断的向前，不断的用新的更好的方式来突破替代的旧的形式。随着5G网络的到来，肯定会有新一轮的技术革命到来。

第5代移动通信网络比4G网络的传输速度要快10倍以上，一部1G的电影可在8秒之内下载完成，我相信这绝对又是一个新的起点，很期待5G时代给我们带来的惊喜。

4G时代连接人与人，是服务业的升级

不难发现，4G网络应用大多数属于服务范畴。像电商，外卖，打车，餐饮其实都是服务员行业。4G时代提高了服务效率，实现了跨距离，跨空间服务。

视频聊天可以穿越见面时空对话；电商可以让你在一个地方买遍全国甚至全球；新零售可以实现不出门买菜做饭。4G网络连接人与人，大大提高了人与人之间服务的效率和数量。

5G时代连接人与物，交互体验升级

随着5G网络的到来及速度效率的提升，我们可以实现更加多元化的连接。

5G可以做到4G想做但有无法实现的事情，例如扩展到人与物之间的连接；也可以在4G基础上实现更加精准的计算，又如精密的医疗，更加精准和快速的大数据。

5G网络将继续升级改变我们生活，它将继续改变娱乐，交通，医疗，智能家居等等领域。我们可以试着猜想：

• VR技术，让看电影能够有更佳的3D体验。
• 网上购物不在需要看图片。而是有更好的体验，身临其境在虚拟的店铺中。可以对商品有触摸和移动等虚拟的互动体验。
• 无人驾驶技术
• 智能家居。不在家或者在外地对家居进行操作，比如：关窗，开空调，扫地等。
• 智能医疗。如；远程手术。由于5G网络有着更加精准的效率。支持医生运用机器跨医院操作手术等。

技术的进步会给我们的生活带来改变，我们期待新的形式来满足我们的需求，期待我们的生活和生产更加的智能和。

 文章来源：人人都是产品经理

需求整理的现状

写这篇文章的初衷，是在实际工作中遇到 PRD & DRD 文档，对于一些交互设计图，会产生不理解，或者说在实际落地画图的时候会发现一些前后不一致的问题，解释过于冗余，不清晰。在接触新的业务时，很难把新理解的内容从上至下的消化完整。所以希望通过这篇文章帮助刚接触交互的同学更好地开展交互设计工作。

在传统瀑布式需求分析流程中，我们设计师往往拿到的是已成型的信息架构图&产品结构图&关键业务流程图，只是了解一下大概是什么类型的产品，很难发现企业产品中真正关键的流程价值点在哪里，或者说也不清楚后续发展的走向，只能卯足了劲去做图做说明，整理完整。时间紧迫压力大，又要照顾整个项目。往往决定产品成功与否的，是产品 20% 的主要功能（二八原则）。所以在面临初期产品设计中，应该将主要精力放在重要功能流程中。

目前，在互联网产品中，敏捷开发是所有产品设计者最推崇的。原因在于，能够对业务、设计、开发更有前瞻性&敏捷性。

理解业务需求，是做好交互的首要条件

产品交互的成功一定是建立在业务需求提炼清晰的基础上。业务需求的价值提炼，也是设计师需要参与完成的。业务需求是一个比较大的任务，来源可能是老板的要求，可能是产品提出的，也可能是用户的反馈。通过业务需求，我们要分析出相关的业务目标。有个偶然的机会，了解到彩色 UML 的设计方法，在具体实践中，感觉这个方法能够快速适应任何业务流程，简单方便，易懂，并能快速发现业务流程中的问题，加以修正完善。

彩色UML建模

有幸认识王海鹏老师，他推荐了早年他翻译的彩色 UML 建模一书，作者 Peter Coad，是将彩色和企业组件集成到建模技术之中的第一本书的主要作者，是世界上经验丰富的建模人员之一，他所创建的模型几乎涉及到所有行业。

此书是第一本介绍用彩色来表达软件设计的著作。作者用 4 种颜色来代表 4 种架构型，给定一种颜色，你就知道这个类可能具有哪些属性、链接、方法和交互。得到的彩色构建块能创建更好的模型，并获得应有的认可。彩色和架构型仅仅是开始。作者更进一步将这些架构型发展为 12 个类的领域无关组件。作者在过去 10 年中创建的每个模型，都遵循这个组件所表达的基本形状和职责。

笔者利用彩色 UML 建模的设计方法，用于业务梳理工作，达到了意想不到的效果。以下为彩色 UML 建模基本概念（截取彩色 UML 建模书中的介绍）。

△ 《彩色UML建模书》第9页

△ 《彩色UML建模书》第10页

△ 事例会员注册

交互设计中常用图

1. 实体关系图（又称ER图）

定义：ER 图是用来描述现实世界中的实体关系模型，所谓实体是指客观上或者逻辑上存在并且可以区分的人事物。

作用：促使你以最适合技术理解实现的方法，来规范的描述功能模块的核心要素，其实就是数据库的物理结构。而这种描述是无二义的，最清晰传达 PM 的设计思想。

2. 功能结构图

功能结构图就是按照功能的从属关系画成的图表，在该图表中的每一个框都称为一个功能模块。功能模块可以根据具体情况分得大一点或小一点，分解得最小功能模块可以是一个程序中的每个处理过程，而较大的功能模块则可能是完成某一个任务的一组程序。用通俗的话来说，功能结构图就是以功能模块为类别，介绍模块下各功能组成的图表。

作用

• 梳理需求，以鸟瞰的方式对整个产品页面中的功能结构形成一个直观的认识。
• 思考并明确产品的功能模块及其功能组成。

3. 信息结构图

信息架构属于用户体验的结构层，是产品的骨架。一般是由产品经理或者更高层的管理人员给出大框架。除非是大的产品迭代，否则不会大改。

作用

• 帮助 PM 梳理复杂内容的信息组成，避免信息内容在展示过程中出现遗漏、混乱、重复；
• 作为开发工程师建立数据库的参考依据。

信息结构图构成要素

• 导航：网页访问者的访问途径。
• 频道：某一个同性质的功能或内容的共同载体，也可称为功能或内容的类别。
• 子频道：某频道下细分的另一类别。
• 页面：单个或附属某个频道或分类下的界面。
• 模块：页面中多个元素组成的一个区域内容，可以有一个或多个，也可以循环出现，如：文章列表。
• 模块元素：模块中的元素内容，以文章列表举例，文章标题、文章摘要、文章发布时间，这些都是元素，都是组成模块的内容，同时他们也是可以循环出现的。元素的类型可以是：文字、图片、链接等等。

4. 产品结构图

定义：产品结构图是综合展示产品信息和功能逻辑的图表，简单说产品结构图就是产品原型的简化表达。

作用：它能够在前期的需求评审中或其他类似场景中作为产品原型的替代，因为产品结构图相较于产品原型，其实现成本低，能够快速对产品功能结构进行增、删、改操作，减少 PM 在这个过程中的实现成本。

5. 业务流程图（泳道图）

业务流程图，不是操作流程图也不是页面流程图。它是产品的整体业务流程，直接和业务挂钩，可以说是产品的核心流程。

作用

通过业务流程图，钻研关键事件的流程，分析为什么要这么做，探索出更深层次的问题，从而对现有不合理的业务流程进行重组优化，进而制定优化方案，改进现有流程；阐述在项目中各个角色是如何产生相关联系的。

绘制规范/建议

• 让涉众参与，不要闭门造车：与业务流程图包含的各个参与角色代表适时确认事情的原本流程。
• 恰当的层次分解，不要将所有的环节都铺到一张图上。
• 逐渐深入，先抓枝干：切忌一开始就陷入细节。
• 流程一定有开始和结束：切忌交出来的流程图，让读者问：流程的开始点是什么？用清晰的代表开始和结束的符号来完成第一步和最后一 步。
• 流程图符号绘制排列顺序：由上至下，由左至右。
• 同一流程图符号大小宜相对一致。
• 编号：这是让沟通效率更高的优化措施。当你有了编号系统，相当于对你的流程图都赋予了唯一识别身份证号。负责流程规则审核和优化的部门能够清楚在邮件里传达 H5.1 流程优化，大家就更明确指的是什么。
• 路径符号应避免互相交叉。

6. 任务流程图

任务流程图就是通过图形化的表达形式，阐述产品在功能层面的逻辑和信息。它能够更清晰、直观地展示用户在使用某个功能时，会产生的一系列操作和反馈的图标。

作用：基于业务流程，进行任务流程梳理，阐述角色和程序发生交互的流程，你如何进行操作，系统如何进行反馈。

任务流程与需求文档中的业务流程并不一样。虽然它们都是流程图，但业务流程更偏向于业务限制、后台逻辑等，并不过分注重用户的操作逻辑。而任务流程则需要关注用户如何操作、界面如何反馈等，从而引导用户完成用户目标。

7. 页面流程图

定义：指电子产品具体所呈现的页面跳转流程图。其承载了业务流程图所包含的业务流转信息。

作用：

• 交互设计/原型设计的底子，基本依据。
• 站在用户视角，代表用户所有可能的操作过程，页面流程能快速发现体验问题。
• 突出页面元素与逻辑关系，提升原型设计的效率。

8. 线框图/原型图

定义：页面的模块、元素、人机交互的形式，利用线框描述的方法，将产品脱离皮肤状态下更加具体跟生动的进行表达。

作用：用例阐释者，用来了解用例的用户界面；系统分析员，用来了解用户界面如何影响系统分析；设计员，用来了解用户界面如何施加影响及它对系统「内部」的要求；类测试人员，用来制定测试计划活动。

构成要素

• 页面标题：即每一个页面的对应标题，一般就是导航栏标题。
• 页面内容：以黑白为主，保证信息规整易读。
• 交互说明：用标签将其对应起来，包括交互逻辑、操作流程及反馈、元素状态、字符限制、异常/特殊状态、相关规则等等。
• 主流程线：只需要画出主流程线即可，千万不可太多太杂，时刻考虑读者的感受。

9. 线框图/原型图交互说明的几种类型

限制

包含范围值、极限值等。

范围值主要指数据的取值范围。比如，当你的界面上出现了下拉菜单、筛选按钮、滑块等控件时，你必须标注清楚它们的选择范围，否则开发人员就不清楚该如何设定，如图所示。

极限值主要指数据的显示限制。比如，最多应该显示多少字数，过时如何显示，是否折行等，如图所示。

状态

包含默认状态、常见状态、特殊状态等。

「默认状态」主要指默认显示的文字、数据、选项等。这些内容需要注明，否则开发人员可能难以意识到这是用户填完的效果，还是默认就有的。

「常见状态」主要指针对某一个模块，经常遇到的一些状态。这些状态都需要在原型上表述出来。比如一个普通的积分模块，一般会出现 3 种状态：未登录状态、登录后未签到状态、登录后已签到状态，如图所示。

「特殊状态」一般指非正常情况下的样式、文案、说明等，如图所示：

操作

包含常见操作、特殊操作、误操作、手势操作等。

「常见操作」主要指正常操作时得到的反馈状态。比如一个普通的翻页控件，在经过不同操作后会立即出现如下的状态。

「特殊操作」主要指一些极端情况下的操作。一般，用户不会这么操作，但是一旦遇到极端情况，还是要想好应对措施，因为对于开发人员来说，不管是正常的还是极端的操作情况，他们都要去编写对应的代码。如下图，是填写用户信息的例子，当不写交互说明时，开放往往会遇到很多问题：如果已经勾选了 2 个人，再勾选第 3 个人，怎么办？如果勾选了「张XX」，下面区块中会相应地出现张XX的信息，那么这时候允许修改张XX的身份证信息吗？假如允许的话，修改后「张XX」还保持勾选状态吗？表单提交后要新增一个被保险人信息吗？若修改的是除身份证号码以外的信息，「张XX」 还保持勾选状态吗？提交表单时是覆盖原存储信息吗？若修改后出生日期、性别与身份证号码不吻合怎么办？等等。

面对各种复杂的情况，一方面要和开发人员积极探讨，看看有没有其他的解决方法可以简化各种逻辑判断；另一方面，在得出结论后，要把交互说明写清楚，避免出现让开发人员感到棘手的情况。

「误操作」主要指当用户操作错误时的情况。不过我们在设计时要尽量避免有用户犯错的机会。如图所示，提示中已告诉用户「库存5件」，如果这个时候用户在「数量」一栏中输入「6」会怎么样呢？系统会自动帮用户将其改为「5」省去用户手动修正的操作。

「手势操作」主要指用户使用移动产品时的操作方式。常见的有点击双击、长按、捏、伸、滑动等等。

反馈

用户操作后得到的反馈动作，包含提示、跳转、动画等。

「提示」主要指操作后，系统反馈给用户的文字说明等，如图所示。

「跳转」主要指点击某个链接后，页面跳转到哪里。设计师需要在原型上注明跳转时是「原页面刷新」还是「新页面打开」。如果是做手机应用的话，需要注明跳转时的转场方式，如图所示。

「动画」主要指用户操作后，系统通过动画的方式反馈给用户。动画给人的感觉比较友好、趣味性较强，是非常常见的一种反馈形式。比如删除某条信息，该信息以渐变消失的形式告诉用户：这条信息已经被删除了。在移动应用中，动画反馈的形式更为常见。因此设计师一定要在原型上表述清楚动画的形式，必要时可以制作 domo 动画演示效果给开发人员。

文章来源：站酷

作为UI设计师，我相信大家都是专注于界面设计的好不好看，至于界面与界面之间如何交互，点击之后如何反馈，是一个比较容易被忽略的重要环节。

那么我们怎么处理好界面交互中的加载设计，减少用户因等待产生的焦虑情绪，保证整个体验无缝衔接，今天这篇文章就来总结下APP中数据加载模式设计。

一、为什么要加载？

1、用户在进行某些操作时，都要从后台请求数据，这个过程都需要时间，系统应该始终在合理的时间内做出适当的反馈，让用户了解正在发生的事情，让用户知道此时的操作是有反应，减缓用户因等待而产生的焦虑感。同时加载方式也可以做的有趣，吸引用户注意力，增加沉浸式体验，让用户轻松自在的享受等待；

2、体验无缝衔接，减少用户跳失，正常的等待加载时间是0.3秒以内，同时不同场景对应有不同的加载方式。

二、常见的加载场景及方式

a.加载场景：

不同场景有不同的加载方式，常见的加载场景一般有以下几种：下拉刷新、上拉加载、切换新页面的数据加载、页面局部模块的加载、启动页加载、操作按钮加载。实际工作中，要根据不同的场景搭配不同的加载样式，才能更好的做到缓解用户等待焦虑，降低用户的跳失率。

b.加载方式：

1、全屏加载

主要出现在手机H5页面，例如微信的文章详情页。一般会有进度条或有趣的动画设计，减轻用户等待时的焦虑感。加载失败后，页面通常为空白页，且有重新刷新操作按钮。

优点：将整个页面的内容都加载出来才展现给用户，能保证内容的整体性，全部加载完才能够系统化的阅读。

缺点：一般等待的时间较长，容易产生焦躁情绪，尤其是遇到网络不好的情况

2、下拉刷新加载

主要出现在页面内容为推荐类、或者信息更新频次高的产品，通过刷新加载新数据，加载的loading样式可以结合产品logo或IP形象进行设计，增加趣味性，吸引用户注意力。

3.占位图加载

如果页面布局样式比较固定，可以采用占位图加载机制，先加载页面布局和占位图，先给用户展示页面框架，后加载页面图片细节部分，这种加载方式相对于直接展示白屏来说，呈现给用户无缝衔接的感觉，体验更加流畅。

4.分布加载

当页面中有文字和图片时，优先加载占网络资源较小的元素，如先加载文字，后加载图片，图片加载完成前使用占位符显示，保证用户可以顺畅阅读，缩短用户的等待时间，提高产品体验。

优点：可以帮助用户快速阅读内容，了解信息。

这种加载形式更加适用于内容阅读型的APP或图片、视频类资源比较多的页面。

5.自动加载（懒加载）

当浏览信息时，不停的向上滑动，新的内容会不停的从底部出现，这种方式称为自动加载。对于自动加载，要注意每次加载多少条内容，或者多少屏的内容。一般会在距下面内容一定距离时开始加载，当网速非常快的时候，用户并不能感知懒加载的动作，这样可以营造一种无极限浏览的错觉，很容易的把用户吸引住。

优点：无需用户操作，自动加载后续内容，营造沉浸式体验。

应用：适合feed流、瀑布流、算法推荐类的内容。

6.预加载

提前加载好页面信息内容，这样当网络不好的时候，可直接从本地缓存中渲染，就不用再加载了。

比如用户在看A页面的时候，App在后台加载完B页，等用户打开B页的时候就不需要等待加载了，因为App已经帮用户提前加载好了，给用户提供无缝链接的感觉，弊端就是服务器压力很大，就是要预测用户行为，加载其他数据，这样会消耗不少流量，所以建议在WiFi网络环境下采取这种预加载机制，而在蜂窝网络状态下则不采用预加载机制。

7.渐进式加载

一般出现在图片类产品，比如pinterest、unsplash等，当浏览图片的时候，经常是先看到一张模糊图或与图片较为相似的色彩值图片，然后再渐渐的变得清晰，这种效果就叫做渐进式加载。渐进式加载能够大大的提升体验感。

8.后台加载(异步处理)

用户在前端执行操作后，客户端立即给予操作成功反馈提示，然后把请求放到后台与服务器交互，这一过程用户是看不到的，也不需要等待，体验是非常棒的。

例如在用微信发朋友圈时，会觉得特别流畅，即使在网络不好的情况下，会看到你的动态立即展示在朋友圈列表，并不会提示你网络不好，操作失败，全部以操作成功来显示，其实它只是将你发布的操作记录了下来，等网络一好就将动态上传到服务器，从而完成发布行为，微信的点赞也是同样的操作，你给好友点了赞，并不会提示你网络不好，操作失败，而是提示你点赞成功了，其实它只是将你点赞的操作记录了下来，等网络一好就将点赞的行为上传到服务器，从而完成点赞行为会，给用户带来体验流畅的感觉。

所以这种加载方式是需要根据具体使用场景来权衡使用的，对于一些重要的操作，建议还是使用模态的方式加载，对于一些小操作，如点赞、订阅、关注，可采用后台加载的方式。

9.模态加载

以上几种方式都是采用非模态加载，不会对用户造成干扰，用户可以做别的事情，不需要等待加载完成，大大降低了等待的焦躁感。

模态加载对用户干扰比较大，需要中断用户的其他操作，用户只能等待加载结束，因为如果用户执行了其他操作就会打断正在进行的加载过程，实现不了用户的目标。

应用：用户执行的操作本身不能和其他操作同时进行，例如登录，退出，应用启动，手机支付等场景。

三、具体实施方法小结

1、能用非模态加载的尽量不要去用模态加载，如果非得用模态加载，也尽量给一个能取消的按钮，方便用户在不愿意等待的情况下取消操作。

2、如果加载的时间比较长，最好能告知用户加载进度，让用户心理有个预期，这样用户更愿意等待，不会因为等待产生焦虑感，分分钟卸载你的产品。科学的实验证实，先慢后快的进度条是让用户心理感受上最快的设计，这是因为用户最容易记住最后一瞬间的感觉，如果最后一瞬间，感知到了快，就觉得很顺畅了。

3、数据加载本身就是很考验用户心态感受，所以尽量通过一些有趣的动画来转移用户的注意力，营造沉浸式体验，同时增加了趣味性，给予了产品人性化的设计。

总结

作为产品设计人员，尽量给用户好的体验，我们应该让产品自己去解决问题，而不是把问题抛给用户。在考虑人与客户端交互的同时也要把客户端和服务端之间的数据传输考虑进来，站在用户、客户端和服务器闭环的角度去思考产品，才能设计出体验更好的数据加载方案。

转自-站酷

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

详细解读—函数和变量的声明提升

一 - 声明提升常见面试题

☛我们先以几道面试题开头来引入，

☛大家可以先给自己做出一个答案，然后再看文章的思路捋一捋哟。



来一道基础的吧~



var a="Hello";  

function test(){  

  alert(a); 

  var a="World";

  alert(a);

}

test();



难度+1



var a = 1;

function outer(){ 

  a = 2; 

  function inner(){       

      alert(a); 

      a = 4; 

  } 

  inner();

} 

outer(); 

alert(a);



继续加油



(function(){

  f1(); 

  f2();

  var f1 = function(){};

  function f2(){

      alert(1);

  }

})();



最后一道



(function () {

   console.log(a);

   var a=1;

   function a() {

       console.log("biu~");

   }

})()



二 - 究竟什么是声明提升？

引擎在解释JS代码之前，首先要对JS代码进行编译，其中编译的一部分工作就是找到所有的声明，包括变量和函数的所有声明都会在任何代码被执行前首先被处理。

var a = 1这句话会被浏览器读成 var a和a = 1两句话执行，其中var a会在编译阶段就先执行了，而a = 1这段赋值代码会在原地等待执行阶段。

console.log(a); 

var a = 2;



上边这段代码，如果代码按照顺序由上自下执行，那么执行到console.log(a);时，a还没有声明,所以会包一个找不到变量a的错，但是事实上，这句话打印了一个undefined，说明a被声明了，但是没有被赋值，那么结合上一段的文字，我们可以得出代码实际运行的是这样的：



var a;

console.log(a);

a = 2;



三 - 函数的提升

大家可能在书写代码的时候发现，无论函数封装写在前或者后，我们的函数调用都可以顺利执行。



fn1();//可以执行

function fn1() {

    console.log("hello");

}



为什么呢？其实函数声明,包括函数的代码块都i会被提升，所以调用函数的时候，函数声明已经被执行过了。



但是有个案例大家了解一下：



fn2();//报错，fn2不是一个函数

var fn2 = function () {

   console.log("world");

}



我们可以看到 以给匿名函数赋值的形式定义函数，只会提升函数声明，但是函数表达式却不会被提升。因为变量fn2被提升,但是并没有赋值，我们书写的fn2()无法运行，而抛出了异常。

以下就是实际执行的顺序：



var fn2;

fn2();

fn2 = function () {

   console.log("world")

}



函数优先提升

我们都知道了，函数声明和变量声明都会被提升，那么遇到这样的情况会怎么办？



fn3();

var fn3=function () {

    console.log("fn3-1");

}

fn3();

function fn3() {

    console.log("fn3-2");

}



哎呦，嘛情况，突然迷了！！！

☛ 这个时候你就要考虑，同样的一个变量名称，到底是把var fn3给先提声上去，再提升 fn3函数体？还是先提升 fn3函数体，再提升var fn3？？？其实都不对！！！



☛ 答案是：函数会被优先提升，但后才是变量提升，但是当函数提升后，然后发现还有一个变量声明和函数声明一样的名称，这个就是重复声明，那么这个var fn3 是不生效直接忽略的。



所以实际代码运行顺序是：



function fn3() {

   console.log("fn3-2");

}

fn3();//fn3-2

fn3=function () {//var fn3因为重复声明被忽略

   console.log("fn3-1");

}

fn3();//fn3-1



当然，我们还是建议再同一个作用域重复声明是很烂的选择



说在最后

再代码作用域中的声明，都会在代码执行前被首先处理，所有的声明都会被移动到各自作用域的最顶端，这个过程就叫做声明提升。



四 - 答案：

问题1：



var a="Hello";  

function test(){  

  alert(a); 

  var a="World";

  alert(a);

}

test();



实际执行：

var a="Hello";

function test(){

   //作用域有声明a，声明提升到这里

   var a;

   alert(a);//本作用域声明a，所以不去使用父作用域的a，但是本作用域的a没有赋值，所以弹出undefined

   a="World";

   alert(a);//赋值后 ，弹出world

}

test();



问题2：



var a = 1;

function outer(){ 

  a = 2; 

  function inner(){       

      alert(a); 

      a = 4; 

  } 

  inner();

} 

outer(); 

alert(a);



执行结果：



var a = 1;

function outer(){

   a = 2;

   function inner(){

       //本作用域没有声明a，所以没有任何提升，直接执行

       alert(a); // 所以弹出 a为 2

       a = 4;

   }

   inner();

}

outer();

alert(a);//只有全局声明了a，所以所有作用域使用的都是全局的a，所以a最后被赋值为4 弹出4



问题3



(function(){

  f1(); 

  f2();

  var f1 = function(){};

  function f2(){

      alert(1);

  }

})();

实际执行结果：



(function(){

   function f2(){

       alert(1);

   }

   var fn1;

   f1();//提升后先执行fn1(),但是fn1被提升的是变量不是函数，所以这里报错，不是一个函数

   f2();//上一句话报错，这句话不再运行

   f1 = function(){};

})();



问题4：



(function () {

   console.log(a);

   var a=1;

   function a() {

       console.log("biu~");

   }

})()

实际执行结果：



(function () {

   function a() {

       console.log("biu~");

   }

   console.log(a);//打印了a这个函数的函数体

   a=1;//因为函数有限声明提升，所以这里的var a被提升时，发现重复声明，故被忽略了var a；    

})()

引子问题：

从眼睛进入的视觉信息，占大脑皮层中形成视觉的视觉信息的百分之多少？

这个是视觉通路的说明图，是认知心理学的一个知识。外界信息从眼睛到LGN之后，会往两个方向走，一个形成腹侧通路另一个形成背侧通路。也就是一个形成“你看到是什么”，另一个形成“这个东西离你有多远”。

这是的研究，就是主视觉皮层那块区域并不像我们想象的一样，是一个简单的、从下往上的一个回馈。它真正来自LGN的信息输入只占到10%，LGN从眼睛获得信息也不超过10%。你可以想一下眼睛到LGN，到大脑皮层形成视觉的过程。大脑皮层中的视觉信息90%是它自己产生的，只有10%是来自LGN。LGN当中视觉信息的90%由大脑皮层自己产生的，只有10%来自眼睛。

做一下乘法，你就会发现，即使是眼睛看到的数据信息完全进入大脑皮层，它至多只能占到10%，如果他不是至多10%的话，有可能眼睛实际进入大脑皮层的数据信息只有1%。也就是说大脑主要是在生产信息，而不是在接受信息。所以你应该把你的精力用于研究那90%左右的信息是怎么产生的、它是什么样的规律。

1. 《UI设计与认知心理学》一书的主要内容和结构

本书的结构第一从设计实现角度来讲比例构图、构建页面的具体结构、栅格系统、组织原则等等。

第二部分是主要的部分，从第八章一直到十六章是从认知智能的角度，就是你怎么处理信息的角度去做这个交互设计。第十章这里头有一个叫模因论，模因论就是把模因类比成基因。

第十三章和第十六章写的就更抽象一些，第十三章主要是讲人工智能的基础，第十四章是讲应用，第十五章就是和今天话题有相关的地方，就是VR、5G这些，第十六章是我研究生毕业论文，我个人认为没写完，又写了一遍，是从心理学角度去阐述，为什么我们设计和国外的设计是不一样的。

2. 举例认知与UI设计

我们先有一个感性认识，认知与UI设计有什么关系？这其中有两点。

第一个就是古腾堡定律与内隐记忆。古腾堡定律，大家都听过吧，（注：该法则描述了一个理论：人的眼球移动规律趋向于从上到下，从左到右，在视觉区域中，左上角通常为视觉起始点，右下角为视觉终点，而右上和左下是视觉落盲点。）也就是F形阅读。这是尼尔森·诺曼在2006年产出的一个结论，即人浏览页面的方式会形成一个F型的路径。

但是有个公司叫EyeQuant，他们是做一些眼动仪及其研究的。他们统计了大概是15万张前六秒人的注意力的热区图，它形成了大概这个结果。

EyeQuant就说尼尔森·诺曼的结论可能不太对，它不是F型的，他给出了很多结果。

你会发现这个图很多时候是居中或者是中间等等。于是EyeQuant公司的研究结论就是：有太多因素影响眼球运动，不用把F型法则当做金科玉律。他们在官网上发了一个帖子，这是他们这结论，底下是论文的网址，大家也可以自己看一下文章，判断一下EyeQuant说的对不对。

我们来了解一下古腾堡定律，如果大家不了解，我先来解释一下。古腾堡是一个德国人，他发明了独立印刷术，他认为人的阅览浏览页面的规律是从左上到右下的。左上是第一注意区，然后是右下，另外两个区域是最容易被人忽略掉的。

上方是热力图，大家可以看一下，这两个图其实是有关联的，热力图和古城堡定律大家注意看，最关键的点都是左边。比如当你做web导航的时候，你一般会把导航放到左上角，很少有人放在右上角。跟我们阅读习惯是相关的。读书写字都是从左开始的，所以热力图表现出来并不是彻底的居中或者是在右下，左边还是一个很重要的位置。第二点是2006年的互联网产品形态和现在互联网产品形态是不同的，过了十几年了，拿现在的数据说以前的事情，有效性是有限的。

另外，有几个反例它是没法解释的。大家有没有关注过阿拉伯语的网站，你会发现它的导航是倒过来的。我看了之后我以为是有个镜子，它其实是正确的，因为阿拉伯文是从右向左书写的。通过以上，我们可以认识到古腾堡定律其实还是起作用的，它是根据你的书写的方向形成的。

有关网页布局的规律，应该是：同时受到古腾堡定律以及产品自身因素的影响。那么EyeQuant公司做的那个研究有没有价值呢？是有价值的，它确实是往中间偏了，但是这是和产品的特性有关，因为06年之后越来越多电商的页面，包括纯展示的东西越来越多了，居中构图的情况也越来越多，很多吸引注意的图片放到中心位置了，所以它会影响整个观感。

古腾堡定律在认知心理学里实际就是内隐记忆。内隐记忆就是：无法通过有意识的过程而接触的知识。举个例子，骑自行车大家都会吧。如果我跟你说有本书教骑自行车，你看完了就能学会，这不可能对吧，你需要自己练习骑。你学会了之后，当你要教别人，你也没办法通过语言告诉他，你只能说你必须得练，这个就是内隐记忆。

生活当中有一个体验，我相信所有人都会有，就是不管是用是安卓还是iOS都会有一个问题，就是比如你把A左边的应用删了，iOS系统会让后面的应用自动补位，它会把A应用推到第一个位置，结果就是你每一次想要打开A应用时候很容易点错。这也是内隐记忆在起作用。

这是内隐记忆的分类，有四种。骑自行车与古腾堡定律和第一种程序性记忆比较相关。第二种是知觉表征系统，大家听说过无意识设计吧，这就和知觉启动是相关的。条件反射就不用说了，巴甫洛夫的狗玩摇铃它就流口水。非联想学习中的习惯化和敏感化是什么意思呢？就是比如说你家里有一个空气净化器，打开的时候你会感觉它发出的噪音很明显，但是过一段时间你又不太注意它的噪音了，就是习惯化。

敏感化是什么呢？烟尘和污染的空气非常刺激呼吸道，所以一旦雾霾 ，呼吸道不好的人就会非常敏感，非常难受。比如说北京的雾霾，一开始可能不太注意到它，但是在北京待十年的结果是只要看天，我就能估算出这个pm2.5是多少值，正负不超过50，非常精准。比如一看今天这个天气情况，我猜污染指数有150，一查手机大概130左右。这就是敏感化，你对这个刺激的信息处理会变得更快。

画表情的秘诀，这个是其中一个例子，它涉及到一块脑区叫梭状回面孔区。大家可以看一下，这些表情有一个什么样的共同点。

大多数的表情是没鼻子的，或者鼻子特别小。再看一下这两张图片，有什么明显差异么？

这两个照片差异非常明显，这个叫撒切尔效应。这时候你感觉还行，两个人可能眼睛不太一样，但是当把照片导过来的时候，反差就特别大，你就感觉右边那不是个人，对吧？

这叫面孔倒立效应，只有正立的时候，才能有效识别面孔。就是必须得形成倒三角你才能有效识别一张面孔。鼻子并不参与三角区的方向判定。

你会发现插座也会被当成表情，面孔倒立效应的基础是部分神经的特异化，部分神经元是专门用来处理面部信息的，识别人的情绪对人的认知是很有作用的。快速地判断一个人的情绪，对社会化动物来说非常关键。有一块脑区专门处理人脸识别，识别情绪。

以上大家可以形成一个大概印象，就是认知心理学可能会和你的设计相关联，也说明了认知科学对UI的指导性，这是我的一个观点。右边是它的逻辑事实，书中尽量去证明这个观点。

3. 认知科学对UI设计的指导性

第一，广义的设计概念。想证明认知科学对UI设计的指导性，得先说清广义设计概念。我对它的定义是解决问题的目的与恰当方式的综合。

你想解决这个问题是吧？方式的综合前面还有一个恰当，我强调这个恰当。

第一个先说他目的性，比如说你设计一个汽车、设计一个界面、设计一个流程，是有目的的，不是无目的的。第二是设计是解决问题的恰当手段，设计是你要找一个恰当的解决方法。比如你累了怎么办，你可以造个沙发、设计个躺椅。还有各种各样的方式，哪一种方式是最恰当的方式，是设计出来的。这都是各种各样能解决你累了的一个手段，但是你一定要找到那个最合适的。

这个之后我们还要定义一下UI的概念，这也是我个人的观点和定义。就是解决虚拟界面信息传输问题的目的与恰当方式的综合。

我是交互设计师，我没有用比如说交互或者视觉这个概念，因为我认为这个概念有些窄，并不是说我区分不了视觉设计师和交互设计师。别人问你如何区分交互设计师和UI设计的时候，你就用一句话就能区分：你和界面之间有没有一次以上的信息互动？如果有，那就是交互要介入，如果没有一次就够了，基本就是视觉的活。

传统设计的目的、主题和体验公式。首先传统设计处在两个过程的中间，第一个是“人-自然“中间，也就是人造物，就是你要通过你设计的工具去改造自然。种个地、开个矿等，你设计这个东西是在告诉别人怎么用。比如说不能把门把手放到转轴的内侧，他一定放到转轴的外侧，这个门把手就是在提示我们怎么去操作这门，怎么推这个门。这是基于材料及其加工工艺的造型理论。

另一个就是设计处在“人-人造物-他人“的认知过程中间。它所具有的特性是示能性与自我定位。比如说我穿衣服，你会发现我没有一个红色和绿色的衣服，我喜欢穿蓝色，黑色等，这实际是对自己身份认识的一种构建，向别人传达出一种信息的设计物。传统设计都会包含这些信息，你住什么地方，穿什么衣服，看什么书，都会有这两个作用。

这是史上特别著名的穿丝袜的潮男叫路易十四。你会发现这个东西就是在两方面表达出传统设计的作用，第一个就是示能性。高跟鞋的形状一定是后边开口前面是收口的，因为你要把脚放进去。高跟提高你的身高。这个执杖宽头的地方是用来放手的，窄头的地方是用来杵地的。传统设计的主题是基于材料及其加工工艺的造型理论与设计实践，这是我的观点。我本科是学工业设计的，读研究生的时候也是学工业设计的，我发现我做的所有的事情都是围绕造型和工艺的造型理论。

举几个例子，轮胎演化过程、手机演化过程，你会发现材料的变化，造型的变化。

再来看一个深刻的例子。

这是一个著名的女设计师设计的，她为什么能做成这个东西？是因为她做这个东西的时候，出现了新的数学工具来帮助建筑造型，很多原有的建筑学派不愿意用这套东西，但是她非常激进，要用的数学工具来处理这个造型，才能做成这个建筑。

包括大家现在坐的车，你会发现曲面的车越来越多，车越来越漂亮，是因为数字化之后，加工的工艺更好了，能做出特别漂亮的曲面。原来为什么红旗特别贵？因为那是老师傅用锤子敲出来的，不是像现在数控技术就把它弄出来的。劳斯莱斯也都是敲出来的，所以很贵，想做很好看的曲面成本极高，但现在就成了很容易的一个事情。

传统设计的体验公式就是E=e*n，e是衰减的。e就是每一次使用的体验，比如说手机，你拿到手机的时候是一个体验，是一个e，用了多少次，n就是几。比如说我做一个椅子，用一次是e，用了多少回，它的乘积是整个体验。n是不会变的， e是唯一的关键，而且他每一次都一样。所以传统设计里对它的造型会非常看重，到底表现出什么东西，好不好用，会特别关键。

我再说一下UI设计的目的、主题和体验公式，UI设计的目的和传统设计不一样的地方是，它示能性更主要，自我定位更次要。我举一个例子，马云想用支付宝，不好意思，他也得跟我们用的一样。不管多有钱的人都好，还是只能用Facebook不太可能为这个人单独设计出一款来。也就是说UI设计是绝对平等的，只能说买个皮肤，你可以花钱，但大多数情况下，它的主体功能是不区分消费能力的，所有人用的支付宝都是一样。不管这个人多穷、多有钱。

所以UI设计更主要的是通过界面来告诉你这个东西怎么用，是比自我定位更重要的。所以我们主要考虑的是界面能不能告诉用户是干嘛用的，怎么用，这是最关键的。这和传统设计不一样，传统设计因为有材料成本的问题，一定会涉及到选择和自我定位的关系的问题。

UI的设计体验公式就是E=a*b*c*…*n。这里为什么用乘法而没用加法呢？大家知道有一个叫迷失度的一个概念，它是形容网页体验中，如果a是零的话，后面做再好也没有用。比如说用户找不到入口，到界面这卡在这了，这界面如果是0.1，那后边所有的转化率就全是0.1乘以这个系数。所以它并不要求每一个页面达到百分之百，但是它强调整体乘积一定是一个高值，比如说这个页面的转化率提高了，提高3%，下一页面降低5%，它是一个乘积的关系，每个页面都很重要，它是一个拉长的一个体验公式。最后乘以一个使用次数。

我们再回到认知心理学，我家有三本到四本心理学的书，来看看他们每个人是怎么定义认知心理学的。

斯腾伯格所著的是一本卖得比较好的书，大家可以看一下，认知心理学规定了研究范畴是什么，这是斯滕伯格写的，他认为认知心理学就是研究人如何觉知，学习、记忆和思考问题的。

下面这本书是三个人合著的，他们压根没有给认知心理学一个明确的定义，只是提到这是有关于思考者的心智的科学。但是他说的不是很具体，而是写了一堆研究对象，你把它抽象一下，会发现关键词实际和斯坦伯格的是一样，觉知、学习、思考、语言。

再来看第三个，艾森克和基恩干脆就没定义认知心理学是什么东西，他说现在这个东西是一个特别广泛的研究领域。

这三本书里头有两本书的第二章叫认知神经学，有一本是在第一章的第三部分叫认知神经学。我原本为我的书取名叫《认知与UI设计》，就是这个原因。很难把认知心理学和认知神经学切得特别开，它们的联系实际是很广泛的。

UI设计围绕觉知、注意、记忆与识别会有一些简单的例子。

视觉组织原则，这个是格式塔闭合原则，这是从神经学层面解释格式塔的闭合原则。就是有一个未封闭的图形，大家可以看到左边，你知道他是未封闭的，包括有那种特别的那种三角，有两个半圆，三个半圆，我们会把它脑补成一个闭合的图形，这个是有神经学基础的。

有个叫赫布定律，这个是什么意思呢？两个神经元如果彼此之间互相刺激，他的神经的突触就会变多，它表现在除了突触增多还有髓鞘增厚，都会使神经之间的联系变得更紧。

细胞集合的定义就是，人对信息整个识别过程是这样的，过去你接受过原始刺激，你会记住它，比如说右边这个完整的圆，你第一次看到这个圆，会形成刺激，再看这个圆又形成刺激，它会形成一个完整的赫布集合。等你再看到左边这个不完整的圆的时候，就是一个不完整的刺激，它会激活原来形成的赫布集合，让你产生错觉认为它是原来的完整的状态。识别和记忆是一体的。记得越少，识别越快。

意识和注意的模型与用户体验是相关联的。真正进入到意识的信息是少之又少的。因为人的视觉能看到的只是可见光。在一个很长的光谱中，视觉信息只占这么一点。人对视频信息的感知还有个体偏向，人对红黄蓝的敏感程度是不一样的，它只对部分色彩更敏感一些，更窄。

信息有一部分是无意识的，比如说心跳的声音，在环境特别安静的时候，你能听见心跳的声音，但是当你注意力在别的地方时，你会过滤掉它，心跳声就不进入你的意识了，但它实际是一直在发生的。

你要建立一个概念，就是用户能注意到的事情，是整个界面里头很小的一部分，大部分他什么都记不住，因为他没空。短时记忆的容量是非常少的，比如说让你记电话号码，一般大家都是以443或者344地记，会把它切割成几个块，这样会更容易记一些。

下面这是《艺术与视知觉》这本书里的一个实验。左上角的图案是他们用来做实验的图。你会发现这个图是一个特别拧巴的形状，首先它是不闭合的，不是完整对称的，设计师看到会非常不舒服。这个图是怎么做实验的呢？就是把这个图给你闪一下，就给你0.2秒或者0.3秒。看完之后让你回忆，回忆这个图是怎么构成的？右边这七种是大家回忆的，它有一个共同的特征，就是把它规律化。这个不是有意进行的，是你与生俱来的能力。把一个不规则的东西记成一个规则东西，是你本来的能力。

我们再看一下，我们把这个时间拉长，你会发现很有趣，第一个是字母A的演化。这原来是头牛，公元前1800年恐怖谷铭文里的文字，长得像左上角第一个。后边的人画牛很费劲，识别它、记忆它很费劲。就把它简化，简化，最后就变成拉丁字母。每一次他都在丢失视觉信息，每次都在不停的丢失识别，使它更规整。26个字母基本都是按照这种原理出现的，只不过它是一个特别长时间，跨度上千年，变成这种结果。

第二个是中国的鱼纹，这是李泽厚的书《美的历程》里的截图。你可以发现鱼纹的演化过程也这样，开始鱼纹真的是条鱼，后来这个鱼变成对称性了，上下对称的。到最后它已经不是鱼了，花了几百年时间变成这个样子。

谷歌的logo也是一样的规律。不停地进行简化，不停地进行识别。识别和记忆是一体的。每次记忆时一定会丢失信息，不管记什么东西一定会丢信息。记忆的东西比看的东西更少，当再识别的时候是拿剩下的东西来识别。这也是和人的认知相关的。

4. 科学研究的范式。

要想研究一个东西，得有一个合理的思维的过程，才能产生正确的思维的结果。思维能力和思维形式会决定思维产出。

我们看一下概念和命题，这是柏拉图的三段论。我举个例子，大前提是希腊人是勇敢的人。小前提是雅典人是希腊人，结论是雅典人是勇敢的人！这是一个特别标准的三段论推理，大前提小前提，不停地缩小集合的范围，得到这个结论。

但是问题是什么？这个语境里头我没有解释这几个概念：雅典人的概念是什么？如果你注意土耳其的地图，你会发现爱琴海那一块靠近土耳其大陆的很多岛是希腊的，特洛伊现在应该是更靠近土耳其一些。雅典人的概念就是伯罗奔尼撒半岛上一个地区的人叫雅典人，但整个希腊实际是一个特别宽泛的概念，它并不是原来的半岛，而是把周边很多岛屿，甚至靠近罗马的岛都扩到希腊地域里，所以这是一个问题。希腊人的概念又是什么？我也没说。我尽管做了推理，我没说勇敢的人的概念是啥。有个坏人在行凶，你用声音制止了还是用行动，能不能作为判断这个人是否勇敢的标准？在你说出一个推理命题的概念的一刹那，实际上已经把这个东西表达出来，但是在这个命题里是没有说的。

我说得有点绕，其实我想表达的意思是：做推理的时候，推理里的概念，你是不可能在这个推理里头说出来的。你想把这个概念进行规定的时候，还得通过其他语言和其他概念来说这个概念。比如说我们学的数学几何，是基于欧几里得的五大公理，五大公设。有了这个东西，才有推理和判断的基础，它是先于命题存在的。如果不对UI进行定义，如果不对设计进行定义的话，我写这本书就是一个很扯的一个事情，因为并没有形成自己的观点和基础。只有形成观点和基础了，才能围绕这个东西进行推理，哪些是合理的哪些是不合理的。先有概念和命题，才有后边理论和假说。

要判断一个理论靠不靠谱，需要符合逻辑三恰。

第一个要逻辑自洽，就是你不能自己打自己的脸，你需要自圆其说。事实与逻辑相符，就是一个观点在你的学说里是兼容的，不能出现逻辑矛盾。

逻辑它恰是什么呢？你提出这个理论和其他理论不能产生矛盾，除非你能证明理论错了，或者在某些条件不适用，这个理论才是靠谱的，你不能和原来既有的公理产生冲突。

逻辑续洽是什么？就是新的场景、新的案例用这个理论还能解释的通满足这三条才是好理论，缺一条都不行。

5. 视角

这一章是从逻辑的视角去看一看，这套理论对不对。从认知的角度考虑设计对不对。认知角度本身对不对。

第一个叫逻辑自洽，在认知理论内部没有矛盾。

我举一个案例。这里有两个图，大家第一眼看上去它是怎么构成的？我用等式表示出来。会有人第一眼看上去认为它是最上方的方式或者是最下方的方式构成的吗？没有人会说这个图形是用这两个更复杂的方式构成的。但是你想没想过，为什么你第一眼看上去就是按中间这两个等式的方式构成的。因为这样理解认知成本，如果把一个你没见过的东西或者一个复杂的东西展示给你看，一定是按照你的记忆，还原成你接触过的最简单的一个构成。它会降低你认知的成本，如果记成奇怪的形状，一定会使你记忆成本更高。

第二，认知一定是要符合演化论。

人们对演化论的误解之一，就是认为越快越强越好，其实不是，而是适应。可能你更强、更聪明、更快，但是适应不了环境。

比如说为什么色盲基因还存在？

男性里头大概有7%-10%，女的还少一点。按理来说我们应该认识更多色彩，为什么色盲还存在？外界信息变成视觉信息主要是靠视锥细胞，它比较密，是在中凹附近。眼动追踪的时候，也主要靠中凹移动来看东西。视感细胞对色彩并不敏感，但是对明暗敏感。色盲在夜间视力很好，比如说晚上要偷袭猎物，或者是偷袭敌人，有色盲的部落会派出这些人，这些人夜间视力更好，会给种群带来生存优势。所以色盲基因没有消失是有意义的。非洲有一种镰刀形红细胞贫血病也是一个案例，拥有这个基因的人不容易得疟疾。但是如果没有疟疾情况下，他容易贫血、容易患各种各样的病。

现实视角的逻辑续洽，第一个就是能预测新的设计趋势，第二是解释新的实验现象。

第一个是扁平化是趋势而不是潮流。这个用左上角的一个图一下就能解释清楚。鸡尾酒的杯子一定是透明的。我们做的界面很多时候就是那鸡尾酒的杯子，大家能理解扁平化是什么原因了吧？因为网速越来越快了，各种各样酷炫的东西越来越多，信息量越来越大，就相当于鸡尾酒里有颜色的酒，颜色越来越多。如果用一个不透明的杯子，或者透明度不够好的杯子，看不出里头的颜色。所以扁平化是一个趋势，不是潮流。

这是我前两天看到的一个帖， 2019年发的一个论文，叫图标样式对可用性的影响。大家可以自己去翻这个论文，很有意思。

测试结果是：最不易识别的是最右边这组。中间是识别度比较高的，这个解释特别简单：过度简化导致识别困难。意思是简化信息的时候，不是一减到底就是好。比如说前面的例子从牛到A的过程，你不能上来就给埃及人拿了一个A，他不认识。Instagram改版为什么受到热议？因为它突然之间扁平了，没有渐进过程，咣叽就变成一个特别扁平的图标，它的纹理和它的图形都发生了变化，所以识别上会特别不舒服。我举过一个例子，比如说你慈祥的老母亲整成了张柏芝或者是高圆圆，你一定不会认为这是一件好事，你会感觉很难接受。

第二个测试结果是这次识别度高的是右边的，中间的识别度是低的。测试结果是多数面型icon识别比线型icon更容易识别。这个是格式塔的描述方式，有阴影的图形只在内部成立，外部行成不了轮廓。线性图形则正好相反，是两向轮廓。

比如说我们看苹果图标，你不管它是从第一版还是到最后一版，他都是面性图标。

因为苹果是个球，它是个实体，这个轮廓在苹果内部成立，就类似于这种感觉。后边是有阴影的，有外部的，因为你要聚焦，后边东西会虚化掉。它只在内部成立。

面形图标普遍比线性图标识别要快，只有三个反例，只有三个反例需要解释。

第一个图，咱先不看虚拟的，你会发现这两个图标线性识别度高，原因是因为它表面有条纹，这两个图中圾桶和钥匙都有条纹，所以用线性来表达的时候，效果更好。其他图标的实体都是曲面，不是条纹。没有参差不齐的边缘，而是曲面，是单向轮廓形成的。因此线型图标更容易辨认。

感受野是人的视锥细胞和神经节细胞的一个联系，不管刺激中心区域、刺激整体、刺激边缘都会有反应。和感受野关联的是神经节细胞，人类眼睛有很多神经节细胞，但这些细胞不是完全均等的点，而是一组点围绕一个中心形成一个组合一样的结构，外边一圈组合，中间有几个组合。

下图的这个就类似视网膜上的结构，神经节也是类似这种结构。当环境同时变亮的时候，刺激比较弱。同时变黑的时候，刺激也比较弱。只有在交界点的时候，反应最强烈。想象一下，当我们看到一个物体的轮廓的时候，细胞对它的反应最大，就形成一条边。这个实际上就是卷积核，人工智能卷积核就是模拟感受野形成的一个原理。

内积就是矩阵内的数字一个一个互相乘，乘完之后形成一个结果。卷积核模拟感受野的原理是：数字矩阵就相当于一个卷积核从最左边一直扫到最后一排，会形成不同的数值。比如说这个是我们要看的图像，比如说黑的会计算成1，白的会计算成0。用卷积核扫一遍就相当于在模拟人眼睛看到的东西，黑白区域之间就会形成一条边，就是我们所看见的轮廓。

这就是我们眼睛看到东西的原理，比如说我们现在做视觉识别，也是用这种特别简单的技术。卷积核实际是模拟人的感受野。

关键点是神经学是怎么解释面形图标和线性图标的不同的。当你看到全亮的东西和全暗东西的时候是有差异的。卷积核扫一圈之后，计算机会认为这个里头的东西和外头东西是一样的。对它刺激是一样的。所以只对边缘有认识。但人的神经比较特殊，它自带一个数值，它能识别出暗和亮。所以当你看一个面形图标的时候，你对轮廓里面黑色部分的认知和对轮廓外白色认知是不一样的，这叫单侧型的轮廓，而不是双侧型的。当你看到线性图标的时候，类似于计算机的感觉，但是你看到面形图标的时候，是人的感觉。

文章来源：UXren

流利说®少儿英语是流利说®为 3-8 岁儿童定制的一款英语启蒙类产品，本次邀请到 UI 设计师 kelly，从视觉设计与输出的角度，详细地介绍该产品游戏题型的设计过程。

流利说®少儿英语，目标是帮助该年龄段的用户建立发音自信，并且能对英语学习产生持续的兴趣。基于儿童贪玩的天性，自然而然我们会想到使用游戏化的设计，将枯燥的英语学习过程变得更有趣。

△ 收集糖果

△ 警察抓小偷

△ 切水果

△ 消灭细菌

视觉设计

游戏为辅，教育为主。

对于视觉设计而言，游戏题型设计的主要有以下 2 个难点：

• 把握题型趣味性与教学目标之间的平衡；
• 为教学内容找到最适合的游戏展示形式。

接下来我将从视觉表达、视觉层级、反馈这三点分享我的一些思考和经验。

1. 明确的视觉表达

在开始设计前，我们对 3-8 岁儿童进行了调研，发现处于该年龄段的用户，大多有以下特性：

• 不识字，且不能进行复杂逻辑操作；
• 易被色彩鲜艳且有动效的对象吸引，并且会主动点击；
• 仅能理解自己生活中接触过的事物（比如玩具，食物，游乐园等等）；
• 趣味性是调动他们持续学习的重要动力。

基于以上几点，我们便总结出以下几点设计方法。

视觉形式即题型玩法

以拼图题为例，此题的目标是检测孩子拼写单词的能力。如果仅将单词挖空再让用户选择，那么孩子会觉得这道题既不会玩，也不好玩。但如果在视觉表现上采用孩子比较熟悉的拼图，就可以方便孩子更好的理解题目的意思，进而引导孩子的操作。

场景故事要有视觉连贯性

「游戏」（此处的「游戏」代指游戏题型）结束后有一个和故事设定相关的结束画面，承接前面的操作，让整个「游戏」过程能呈现出相对比较完整的体验，以增强小朋友在「游戏」过程中的沉浸感。

△ 游戏操作：切水果

△ 游戏结尾：切水果榨果汁

2. 清晰的视觉层级

由于儿童缺乏成年人所具备的视觉筛选能力，他们往往很难分辨出界面中的重要元素和次要元素。尤其是 3-5 岁的孩子，他们会习惯性地去点击界面上所有吸引他们的东西。因此我们需要为不同层级的元素设置强烈的视觉区分，明确告诉他们哪些元素是可以点击的，需要被关注的，哪些元素是不可互动的。

提高教学内容易识别性

游戏题型的设计方法通常是使用游戏的形式去包装常规的教学题型，让小朋友感觉是在玩游戏，而不是在做题。因此我们需要设计恰到好处的游戏容器去承载教学内容，使其兼具教学内容的识别性又不会影响「游戏」体验。此处我们尝试去拉开游戏元素和教学内容的视觉差距──在画面中的视觉焦点处摆放教学内容，而游戏元素仅作为背景或者容器，用于衬托教学内容，并且尽量选取不易和教学内容发生冲突的形式。此外，为兼顾游戏画面的丰富性和多样性，容器的设计需要有一定的适配性。

△ 适配文字

△ 适配图片

△ 适配文字和图片

对于看文本读单词的题型，游戏容器则以烘托文字为主要目标。在该场景下，游戏容器的视觉设计重点在于外形的刻画，简化内部细节，以此将孩子的视觉重点聚焦在文本，而非容器本身。此外，为平衡字符段不同所带来的显示差异，我们对文字的大小也进行了适配。

△ 1-12 个字符──文字大小 88

△ 13-25 个字符──文字大小 76

△ 26-45 个字符──文字大小 62

背景画面的层级感

在游戏题型中，有不少故事性强，空间延续性高的设定。为加强画面的运动感和空间感，视觉输出时，我们额外增加了前景层，利用前景图片打造视差效果，以增强整个背景的层次感。

前景图片的设置，同时也能解决适配不同屏幕尺寸时，背景区域显示差异所带来的视觉问题。

纵向运动的情况下，两侧的图形如果设置在背景里，当适配到短屏幕的时候就无法呈现出来。

而单独设置成前景图，则可以灵活地适配不同屏幕比例的机型。

克制地使用过于明亮的色彩

用研时，我们发现孩子们容易被颜色醒目的东西所吸引，但如果一个页面上过度使用明亮的色彩，则会大大分散孩子们的注意力，颜色过载所导致的视觉信息复杂性会增加孩子们的使用难度。

3. 合理的反馈

合理的反馈包括符合交互逻辑的及时反馈和适当的正负反馈。在游戏设计中，设计师大多会通过酷炫的动效来做重要操作的点击反馈，以增加游戏爽感。这套法则，在儿童世界也同样适用。

及时反馈制造小惊喜

我们在产品的反馈设计中适时地增加一些有趣的微动画，给孩子们制造一些小彩蛋。这些小惊喜，不仅能及时地拉回小朋友的注意力，给他们带来趣味性的同时，对他们而言也是一种鼓励。

例如：当用户点击拼图题选项时，会出现 IP 相关的卡通元素，这些元素既能加强趣味性，又能加强用户对品牌的认知。

适当的正负反馈

大约从 4 岁开始，孩子们就会有输赢的概念，会因为赢而喜悦，因为输而感到焦虑。──《数字时代儿童设计》

对孩子的正向反馈宜欢呼、表扬性的动画为主，整个画面氛围可处理得热闹一点，这对孩子来说是一个很好的刺激点，能让孩子有继续玩下去的欲望。

△ 正向反馈1：IP 形象高兴地跳出

△ 正向反馈2：IP 形象高兴地跳出 + 打分星星

△ 正向反馈3：IP 形象鼓掌

考虑到孩子们会因为输而感到焦虑，因而在处理负面反馈的时候，需要考虑他们此刻的心态，动效设计应拉开与正向反馈的差别且不能过于消极，消极的反馈容易打击孩子的积极性，产生挫败感，鼓励性的反馈为宜。

△ 负面反馈：IP 形象配合鼓励性语音做加油的姿势

反馈动画的设置也需要考虑用户的可接受程度，慎用具有攻击性动效。如下图，错误反馈时 IP 形象会受到攻击而感冒，上线后发现孩子们对这种反馈表现出了害怕的心理。

以上 IP 动画由流利说®少儿英语设计团队倾情制作。

视觉输出

不会写代码的设计也是好开发。

视觉稿如果不能被很好的实现落地，那再好的设计稿也只能是概念，而不是一份有效的方案。在如何更好的把控视觉实现程度这一问题上，我们也走过不少弯路，和开发经过几轮的探索，最终形成了一份适合我们团队的输出模式。

在整个开发环节，设计师主要承担一部分的动画开发工作。在和开发对接的过程中，我们主要使用的软件是：

• CocosCreator：游戏开发软件，内含动画编辑器。
• SourceTree：向开发提交动画代码。

△ CocosCreator

△ SourceTree

开发搭建完框架后，设计在 CocosCreator上，完成部分元素的动画，再用 SourceTree 向开发提交动画代码。开发最后通过代码将每个动画串联起来形成一个完整的动画。

△ CocosCreator 动画编辑器界面截图

题型动画连贯且细节多，单靠视频 demo 是无法协助开发精准实现设计效果的。为了解决这个问题，我们建立了对设计落地具有指导性意义的文档──适配标注文档和动画标注文档。

1. 适配标注文档

用户机型调查结果显示，使用 0.462、16:9、4:3 这三类屏幕比例的用户占比最大。为保证不同屏幕比例上的展示效果，我们根据上述三种主流尺寸，分别输出大小为 780×360，640×360，480×360 的设计稿，并规定以 780×360 为设计基准，对另外两个尺寸进行适配。

标注内容为三个主屏幕尺寸下的缩放比例、大小位置、特定动画的起始点或终止点位置等细节调整标注，方便开发在做适配的时候能准确还原设计稿的布局。

2. 动画标注文档

该文档主要是对动画和音效的详细说明。每个题型的动画会被拆分，以最小可拆分动画为一个标注对象，对其标注时长、具体的动画效果以及运动曲线数值等，方便开发地还原 demo 的设计效果。详细的标注文档不仅方便了开发，更为后续测试和视觉走查降低了不少沟通成本。

总结

游戏化题型的设计，需要更多的从用户的角度出发去思考和权衡游戏与教学的平衡性。对于儿童产品而言，设计服务于教育，愉悦和多变的体验是设计的方向，教学才是最根本的设计目标。

文章来源：优设