&p&一首流行钢琴曲写出来有多容易呢？我们来试试看。&/p&&p&首先选一个常见和弦连接，例如：I V VI III IV I IV V &/p&&figure&&img src=&https://pic3.zhimg.com/v2-d93662abdfd72fdd3b4bdea_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&833& data-rawheight=&472& class=&origin_image zh-lightbox-thumb& width=&833& data-original=&https://pic3.zhimg.com/v2-d93662abdfd72fdd3b4bdea_r.jpg&&&/figure&&p&为了好听，我们把它改成分解和弦织体：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-75ac4bdfffb22f71f3b6cf164ef49167_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&831& data-rawheight=&481& class=&origin_image zh-lightbox-thumb& width=&831& data-original=&https://pic4.zhimg.com/v2-75ac4bdfffb22f71f3b6cf164ef49167_r.jpg&&&/figure&&p&然后通过扔骰子作为主旋律：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-b51e2c42fad35b5a0d1c44ebe9b51896_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1079& data-rawheight=&1733& class=&origin_image zh-lightbox-thumb& width=&1079& data-original=&https://pic3.zhimg.com/v2-b51e2c42fad35b5a0d1c44ebe9b51896_r.jpg&&&/figure&&p&把这几个音符作为强拍填上，也就是&a href=&tel:356562&/a&：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-681b118c7ff2e600f72fadeddbd6184b_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&823& data-rawheight=&500& class=&origin_image zh-lightbox-thumb& width=&823& data-original=&https://pic4.zhimg.com/v2-681b118c7ff2e600f72fadeddbd6184b_r.jpg&&&/figure&&p&然后添加一些其他音符作为装饰：&/p&&figure&&img src=&https://pic1.zhimg.com/v2-31b352e85b8a91cccec8c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&821& data-rawheight=&479& class=&origin_image zh-lightbox-thumb& width=&821& data-original=&https://pic1.zhimg.com/v2-31b352e85b8a91cccec8c_r.jpg&&&/figure&&p&一首流行钢琴曲就新鲜出炉啦！可以试弹一下哦，如果觉得哪里不好听再修改修改就是了。&/p&&p&容易吧？&/p&&p&为什么这么容易就能写出流行曲呢？因为流行曲构成的几个要素非常单一：&/p&&ol&&li&右手有一个主旋律，节奏稳定，音域范围小；&/li&&li&左手和弦的走向比较固定，甚至有很多曲子的和弦连接是完全一样的；&/li&&li&左手的织体一般都是分解和弦，模式固定。&/li&&/ol&&p&所以对于专业音乐学生来说，这些曲子确实太简单了，只能作为休息时候的娱乐。&/p&&p&在音乐学院里学习的钢琴技术是非常全面的，所包含的作曲家和风格也是差异巨大的。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-47b3caddefcb3e7cdeb77_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&838& data-rawheight=&625& class=&origin_image zh-lightbox-thumb& width=&838& data-original=&https://pic4.zhimg.com/v2-47b3caddefcb3e7cdeb77_r.jpg&&&/figure&&p&很难用单一的技术或者写作技巧去评价这么多作曲家的作品。&/p&&p&所以说古典作品就像饭菜一样，天天要吃，而且不吃不行，要饿；流行作品就像甜点一下，偶尔吃吃是很好吃的，但是只吃甜点，那就吃不饱了，容易腻。&/p&&p&*********更新***********&/p&&p&有朋友提到概率问题，说刚才那个旋律如果出现不能与和弦搭配的情况怎么办？那我们就再扔一次骰子，把这次的结果当成第二段来处理。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-2df7ac566a1bde381421b_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1079& data-rawheight=&1730& class=&origin_image zh-lightbox-thumb& width=&1079& data-original=&https://pic4.zhimg.com/v2-2df7ac566a1bde381421b_r.jpg&&&/figure&&p&这次得到的旋律是，把这些音符填进刚才的曲子里：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-f9e3b72dbe26ceec18e9b60c42d786ad_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1024& data-rawheight=&605& class=&origin_image zh-lightbox-thumb& width=&1024& data-original=&https://pic2.zhimg.com/v2-f9e3b72dbe26ceec18e9b60c42d786ad_r.jpg&&&/figure&&p&这次很不巧的是出现了一些和弦外音，我们添加一些修饰的音符，如果遇到和弦外音，就把它做成短音，结尾的地方为了使用终止式V-I的连接，增加一点音符：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-77e05ef29eaa993e37ddbbe_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&823& data-rawheight=&510& class=&origin_image zh-lightbox-thumb& width=&823& data-original=&https://pic3.zhimg.com/v2-77e05ef29eaa993e37ddbbe_r.jpg&&&/figure&&p&再加一个I级尾声，用上行分解和弦后最后的柱式和弦加琶音完成：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-2bf515edabbb008cd9430a_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&828& data-rawheight=&284& class=&origin_image zh-lightbox-thumb& width=&828& data-original=&https://pic3.zhimg.com/v2-2bf515edabbb008cd9430a_r.jpg&&&/figure&&p&一首完整的曲子就写好了！如果需要更长一点的话，可以反复哦。完整曲谱：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-97ff7e644b43cf9b4ab83_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&635& data-rawheight=&808& class=&origin_image zh-lightbox-thumb& width=&635& data-original=&https://pic4.zhimg.com/v2-97ff7e644b43cf9b4ab83_r.jpg&&&/figure&&figure&&img src=&https://pic2.zhimg.com/v2-0b2290ddb2ee84af0baebed_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&625& data-rawheight=&219& class=&origin_image zh-lightbox-thumb& width=&625& data-original=&https://pic2.zhimg.com/v2-0b2290ddb2ee84af0baebed_r.jpg&&&/figure&&p&这首“骰子之曲”可以演奏出来哦，大家听听效果：&/p&&a class=&video-box& href=&//link.zhihu.com/?target=https%3A//www.zhihu.com/video/886272& target=&_blank& data-video-id=&& data-video-playable=&true& data-name=&& data-poster=&https://pic4.zhimg.com/80/v2-b6a9f0ec96a64d0c995f67c3d624a483_b.jpg& data-lens-id=&886272&&
&img class=&thumbnail& src=&https://pic4.zhimg.com/80/v2-b6a9f0ec96a64d0c995f67c3d624a483_b.jpg&&&span class=&content&&
&span class=&title&&&span class=&z-ico-extern-gray&&&/span&&span class=&z-ico-extern-blue&&&/span&&/span&
&span class=&url&&&span class=&z-ico-video&&&/span&https://www.zhihu.com/video/886272&/span&
&/a&&p&娱乐娱乐，在此让大家高兴一下，不必当真。&/p&&p&真正的流行音乐作曲家是很辛苦很有才华的，比我高到不知道哪里去了。&/p&
一首流行钢琴曲写出来有多容易呢？我们来试试看。首先选一个常见和弦连接，例如：I V VI III IV I IV V 为了好听，我们把它改成分解和弦织体：然后通过扔骰子作为主旋律：把这几个音符作为强拍填上，也就是：然后添加一些其他音符作为装饰：一首流…
&figure&&img src=&https://pic2.zhimg.com/v2-c58b4bc032c875d9035f24_b.jpg& data-rawwidth=&1800& data-rawheight=&1000& class=&origin_image zh-lightbox-thumb& width=&1800& data-original=&https://pic2.zhimg.com/v2-c58b4bc032c875d9035f24_r.jpg&&&/figure&&p&在过去的两期周刊中，我们分别介绍了 Components 与 Pattern 的差别，同时也介绍了 Pattern 中非常重要的一个概念 - Perceptual Pattern（气质模式）。&/p&&p&对于整个 Design System ，Components 和 Pattern 除了为产品开发效率、一致性、设计指导提供帮助之外，它还肩负着另一个重要使命：&/p&&p&&b&通过它们来表达我们在 Design System 中创建的设计原则并参与到产品的建设中，从而为产品打造赋有情感的品牌认知。&/b&&/p&&p&我们在前面的 Principles 部分曾提到，设计规则创建与执行同样都很重要。从目标达成的角度来说，我们期望参与产品的每一个角色都应该能记住这些原则，结合 Perceptual Pattern “脑补”出这些界面展示在用户面前的样子。这也就需要我们有一套控制性强且拓展的方法来维系产品的风格系统，也就是我们今天将要讨论的 Design Token。&/p&&hr&&h2&&b&什么是 Design Token&/b&&/h2&&p&在真实的产品过程中，这个环节在开发过程中是完全断掉的。我们通常看到的 style 代码（如下）都是一些几乎没有体感的参数，难以脑补出它“装饰”出的界面会是一个什么样子。如果产品复杂，时间一久想要全局迭代维护也会是件痛苦的事情。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-a3adfc2d339_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1600& data-rawheight=&202& class=&origin_image zh-lightbox-thumb& width=&1600& data-original=&https://pic1.zhimg.com/v2-a3adfc2d339_r.jpg&&&/figure&&p&但如果我们将这些参数封装起来用语义化的方式来进行描述，整个界面的“画面感”就会清晰很多。这些在系统中定义出的”font-size-level03”、”border-distinguish-background” 就是从不同思考逻辑出发定义出的 Design Token。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-b2dfae34e32_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1600& data-rawheight=&200& class=&origin_image zh-lightbox-thumb& width=&1600& data-original=&https://pic2.zhimg.com/v2-b2dfae34e32_r.jpg&&&/figure&&p&当然，文字的语义化功能是有限的，也只是 Design Token 最终的一个呈现。想要真正增强“画面感”，让大家能读、能理解还需要我们在 Design System 中建立一整套对应的系统，并让大家对它们有着清晰的记忆。这里我们将继续以 Salesforce 的 Lightning Design System 为例，来给大家进行 Design Token 的详细分析。&/p&&hr&&p&&b&Lightning Design System 的 Design Token&/b&&/p&&p&Token 原本的意思是令牌，在工程逻辑中用于用户身份与服务器端进行验证操作。而在 Design System 的领域中，Design Token 的定义更像是设计变量。对设计变量名称的合理定义可以让属性参数更容易理解，也更便于对产品风格的控制。&/p&&p&Salesforce 在文档中也对他们的定义作出了一段解释，简单来说就是：&/p&&blockquote&&i&Design Token 是设计系统中的视觉设计原子。它们是一组有着统一命名规则的实体，用于存储视觉设计部分的具体参数，比如 HEX 色值、间距、尺寸的像素等。使用它可以有帮助为 UI 开发工作维护一套具备可扩展性、一致性的视觉体系。&/i&&/blockquote&&p&举个例子，在背景色部分 Lightning 定义了（节选） notification、badge hover、error dark 等 token，并在建立样式体系的过程中为其定义了具体的色值。于是在开发的过程中，大家所看到的将是更为语义化的描述。如果需要调整产品的整体风格，只要这套体系的搭建足够的健壮，整个实施过程将变得更加的高效且安全。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-e17f2e8fb1a65c99bb2eaa0fee1ba88c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1600& data-rawheight=&620& class=&origin_image zh-lightbox-thumb& width=&1600& data-original=&https://pic4.zhimg.com/v2-e17f2e8fb1a65c99bb2eaa0fee1ba88c_r.jpg&&&/figure&&p&Lightning 定义了一整套 Token，包含如下几类属性：&/p&&ul&&li&Background Color&/li&&li&Text Color&/li&&li&Border Color&/li&&li&Font&/li&&li&Font Size&/li&&li&Opacity&/li&&li&Line Height&/li&&li&Spacing&/li&&li&Radius&/li&&li&Sizing&/li&&li&Shadow&/li&&li&Time&/li&&li&Media Query&/li&&li&Z-index&/li&&/ul&&p&这套规则的抽象的主线逻辑是元素中 Style 的属性值加上少许的自有业务定制。这也是最安全的做法，毕竟这已经在 CSS 语法这个领域经过长久的验证，比起你自己组合一套来做的稳定性和拓展性一定会更好。&/p&&p&我们再找两个例子往深走一步，看看它每个属性里面是怎么来定义和运作的。&/p&&p&&b&Radius（圆角半径）与 Shadow（阴影）&/b&&/p&&p&通常情况下，很多人会为每一种“卡片”进行完整的样式设定。这种逐个处理的方式通常的结果就是随着业务复杂度的增加会越变越多。&/p&&p&就像下图一样刚开始可能只需要一种卡片（card01），设计师在某个项目中想要做一些风格差异，于是出现了 card02、03。&/p&&p&接着随着卡片在更多场景下的使用，右侧这些不同尺寸、不同圆角的 card 就出现了。到最后没人能够搞清楚究竟有多少圆角矩形，也没人知道究竟该如何使用。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-1f3fe5af0fcc15_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1600& data-rawheight=&652& class=&origin_image zh-lightbox-thumb& width=&1600& data-original=&https://pic2.zhimg.com/v2-1f3fe5af0fcc15_r.jpg&&&/figure&&p&回到 Token 的思路上来，无论是尺寸还是圆角半径它们都是一个卡片众多属性之一，同时它可能也被使用到表格、图片上。于是圆角半径（Radius）作为一种通用属性被提取了出来。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-2cb5faa82ce3adefdf9d59d65ad6a929_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1600& data-rawheight=&742& class=&origin_image zh-lightbox-thumb& width=&1600& data-original=&https://pic3.zhimg.com/v2-2cb5faa82ce3adefdf9d59d65ad6a929_r.jpg&&&/figure&&p&&i&via: &a href=&https://link.zhihu.com/?target=https%3A//www.lightningdesignsystem.com/design-tokens/%23category-radius& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://www.&/span&&span class=&visible&&lightningdesignsystem.com&/span&&span class=&invisible&&/design-tokens/#category-radius&/span&&span class=&ellipsis&&&/span&&/a&&/i&&/p&&p&阴影部分也一样，Lightning 为不同的业务场景定义了好多不同种状态。比如 focus 在按钮上的阴影、拖拽时阴影的变化、图片的阴影。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-a724f885fc40cb285a47a_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1600& data-rawheight=&748& class=&origin_image zh-lightbox-thumb& width=&1600& data-original=&https://pic4.zhimg.com/v2-a724f885fc40cb285a47a_r.jpg&&&/figure&&p&&i&via:&a href=&https://link.zhihu.com/?target=https%3A//www.lightningdesignsystem.com/design-tokens/%23category-shadow& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://www.&/span&&span class=&visible&&lightningdesignsystem.com&/span&&span class=&invisible&&/design-tokens/#category-shadow&/span&&span class=&ellipsis&&&/span&&/a&&/i&&/p&&p&看到这里大家可能会发现一个问题，Lightning 的层级定义方式似乎与我们常见的方式不同。我们经常看到的是类似下方（Carbon）这样由小到大一级级递增上来的。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-34716bcd0ccafbfbad10f79a_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1600& data-rawheight=&652& class=&origin_image zh-lightbox-thumb& width=&1600& data-original=&https://pic4.zhimg.com/v2-34716bcd0ccafbfbad10f79a_r.jpg&&&/figure&&p&而 Lightning 则是更多根据场景来进行定义，也就是我们前面看到的表格圆角、卡片圆角、按钮圆角等。不过我相信它们也肯定是有按照层级定义的一套 guide，只不过是“藏”了起来。&/p&&p&对于 Salesforce 生态中的开发者们来说，他们更需要的是更直接的指导，确定某个场景下的组件具体的样子。Lightning 这么做也正是因为由于它们业务的自身特性而决定的，所以这里我还是想再提一下。我们所看到的每一个 System 思路和工作方式可能都不一样，因为它的主要目的是更有效的服务与业务。所以我们可以借鉴的思考方式，但无法全部照搬。&/p&&p&&b&Design Token 的作用仅此而已？&/b&&/p&&p&答案显然是否定的。PinDesign 早期在关于移动端设计方面给大家提出过一个「跨多终端设计统一」的概念，而 Design Token 在跨多端设计统一中则有着非常大的价值。&/p&&p&绝大多数的产品，我们可能都至少要考虑在 Web、iOS、Android 上的设计，每当要增加或更新功能的时候设计上多会有多倍的时间消耗。&/p&&p&但如果从一个系统的角度来考虑这显然不是一件科学的事情。如果接下来产品要拓展到更多的端，设计的资源消耗则会更多，而且可控性也会越来越差。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-c44aba49ebcaec4f4c606cb6bae37d54_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1600& data-rawheight=&120& class=&origin_image zh-lightbox-thumb& width=&1600& data-original=&https://pic4.zhimg.com/v2-c44aba49ebcaec4f4c606cb6bae37d54_r.jpg&&&/figure&&p&这个时候我们就需要再次请出 Design Token 了。在跨多端的设计中它不仅仅是一个存储样式的变量，更是一套用于在各操作系统间进行“翻译”的“口令”。&/p&&p&如果我们将产品当做一个“人”来看待，那么 Design Token 则可以用来进行不同语言的翻译。同样都是 shadow，我们可以根据不同语言（系统）的要求去设定好翻译过的内容（具体参数）。&/p&&p&只要产品的设计框架足够健壮，我们在不同系统中所消耗的设计资源将会大幅降低，开发的效率和一致性也能得到更好的保障。更重要的是，设计师可以将更多的精力放在对产品的逻辑、流程设计上，而这也是设计师真正该做的事情。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-9ed7ec036e36eaad9673b08_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1578& data-rawheight=&406& class=&origin_image zh-lightbox-thumb& width=&1578& data-original=&https://pic4.zhimg.com/v2-9ed7ec036e36eaad9673b08_r.jpg&&&/figure&&hr&&p&以上是 Design System 系列的第五期的节选内容，在余下的全文内容中（付费部分）我将重点关注动手部分，和大家聊聊如何为自己的产品创建 Design Token，以及在创建的过程中的重点关注。&/p&&p&加入 PinDesign 会员，获取本期主题「&b&Design System 中的 Design Token&/b&」的全文内容及本系列前三期周刊的赠送。&/p&&p&&b&Design System&/b& 是 PinDesign 周刊的一个新系列，基于「Design Systems」这本书结构框架的读书笔记和经验总结。希望将自己的感受和经验分享给大家，辅助大家的阅读。&/p&&blockquote&&a href=&https://link.zhihu.com/?target=https%3A//h5.youzan.com/v2/showcase/promocode/fetch%3Falias%3D1h54ny8m6& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&点击领取 PinDesign 会员计划 50 元优惠券&/a&&/blockquote&&p&&b&Design System 系列已更新：&/b&&/p&&a href=&https://zhuanlan.zhihu.com/p/& data-draft-node=&block& data-draft-type=&link-card& data-image=&https://pic2.zhimg.com/v2-c83c02ef56c9c8c49bf725_180x120.jpg& data-image-width=&1800& data-image-height=&1000& class=&internal&&5key：什么是 Design System&/a&&a href=&https://zhuanlan.zhihu.com/p/& data-draft-node=&block& data-draft-type=&link-card& data-image=&https://pic1.zhimg.com/v2-0ab350810afc95d17cd.jpg& data-image-width=&900& data-image-height=&500& class=&internal&&5key：Design Systems 02 - 什么是 Design Principles&/a&&a href=&https://zhuanlan.zhihu.com/p/& data-draft-node=&block& data-draft-type=&link-card& data-image=&https://pic2.zhimg.com/v2-894bf47b1cf360b94db2ded_180x120.jpg& data-image-width=&1800& data-image-height=&1000& class=&internal&&5key：Components 与 Patterns 究竟有什么区别&/a&&a href=&https://zhuanlan.zhihu.com/p/& data-draft-node=&block& data-draft-type=&link-card& data-image=&https://pic1.zhimg.com/v2-db9adcfc4de2c_180x120.jpg& data-image-width=&900& data-image-height=&500& class=&internal&&5key：你该为产品设计怎样的气质&/a&&p&&b&点击下方链接，了解 PinDesign 会员计划详细信息：&/b&&/p&&blockquote&&a href=&https://link.zhihu.com/?target=https%3A//wap.youzan.com/v2/showcase/goods%3Falias%3Dfujcrfun& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&PinDesign 互联网产品设计周刊&/a&&/blockquote&
在过去的两期周刊中，我们分别介绍了 Components 与 Pattern 的差别，同时也介绍了 Pattern 中非常重要的一个概念 - Perceptual Pattern（气质模式）。对于整个 Design System ，Components 和 Pattern 除了为产品开发效率、一致性、设计指导提供帮助之外，…
难得看到知乎上说心跳，这会打算用我有限的了解详细说说，按照题主给的顺序一个个来回答。&br&&br&1.&br&我们这种没吃药的大友说到心跳都说婊六花婊马口P，但这里的婊并不是像平常的那种绿茶婊的说法一样是辱骂她们，这里我想百度百科的释义更符合我的理解。&br&&br&“在中国台湾地区，‘婊’可做动词，意思是使人难堪，有揶揄的作用。”&br&&br&六花和马口P再怎么说也是纸片人，没办法让她们难堪。我们说的婊六花婊马口P，其实也就是把他们那些我们认为难堪的场面提出来反复提及，作为揶揄的谈资罢了。&br&&br&2.&br&在谈及为什么会婊六花和马口P之前，必须说明一点的是，无论你承不承认，心跳Q娃是百合暗示非常强的一部Q娃。&br&&br&只有在这一点的基础上，我们才可以运用如下论据来说出六花和马口P的婊点。&br&&br&先来说说六花。&br&&br&六花是第二位入队的Q娃，同时也是玛娜的幼驯染。在她心里玛娜自然是独一无二的重要存在，这在第二集就有了体现。&br&&br&&figure&&img src=&https://pic3.zhimg.com/v2-0ae87a7c5fcae37fc9b58a_b.png& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&https://pic3.zhimg.com/v2-0ae87a7c5fcae37fc9b58a_r.png&&&/figure&&br&&figure&&img src=&https://pic1.zhimg.com/v2-c1fd0ccd6f31a3644edc_b.png& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&https://pic1.zhimg.com/v2-c1fd0ccd6f31a3644edc_r.png&&&/figure&我们平常把玛娜六花这对CP也叫作王燕，其来历就是这里。当然这也是一堆大友来婊六花的开始。&br&&br&当然这一个快乐王子故事可以说是一个文艺范表白也没啥不对。但是这也能被婊，只能说因为六花的待遇开始急转直下。&br&&br&第十集马口P在玛娜家睡的时候六花神色就明显不对了。&br&&br&&figure&&img src=&https://pic1.zhimg.com/v2-fea9f3c347a2bcb7994684_b.png& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&https://pic1.zhimg.com/v2-fea9f3c347a2bcb7994684_r.png&&&/figure&&br&接着她回到了家之后依然心情不好，表现出来的是嫉妒。&br&&figure&&img src=&https://pic4.zhimg.com/v2-d801d85bc2beecbee62c9add_b.png& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&https://pic4.zhimg.com/v2-d801d85bc2beecbee62c9add_r.png&&&/figure&&br&&figure&&img src=&https://pic1.zhimg.com/v2-34a2fd32dc4e58f30b8734abdcadef20_b.png& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&https://pic1.zhimg.com/v2-34a2fd32dc4e58f30b8734abdcadef20_r.png&&&/figure&&br&&br&这代表着她在新成员出来之后受到了她最喜欢的玛娜的冷遇。然而这还不算完，她被婊在瑞吉娜出场之后达到了巅峰。&br&&br&心跳说有一半多是玛娜千里寻瑞吉娜其实一点都不过分，然而作为最早出场也最喜欢玛娜的六花的待遇却持续下降。贴个图吧。&br&&figure&&img src=&https://pic1.zhimg.com/v2-f6f56ea21a2e36c70b68_b.jpg& data-rawwidth=&640& data-rawheight=&719& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic1.zhimg.com/v2-f6f56ea21a2e36c70b68_r.jpg&&&/figure&&br&我想这应该能说明一些问题了。&br&&br&即使是这样六花也依旧在心痛的掩饰自己的感情，甚至还给瑞吉娜打过助攻。&br&&br&终于她的挣扎，在47话爆发，成就了Q娃史上一大名言。&br&&br&“不也挺好吗？”&br&&br&这一段话全文如下:（语境是自私王对瑞吉娜说“你只有我一个人就够了”之后六花接过去。）&br&&figure&&img src=&https://pic3.zhimg.com/v2-43e130f9ae95cd3bf2fab80d2f989a7e_b.png& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&https://pic3.zhimg.com/v2-43e130f9ae95cd3bf2fab80d2f989a7e_r.png&&&/figure&&br&&figure&&img src=&https://pic4.zhimg.com/v2-de5d37fe5604bbb591180f_b.png& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&https://pic4.zhimg.com/v2-de5d37fe5604bbb591180f_r.png&&&/figure&&figure&&img src=&https://pic4.zhimg.com/v2-94c94ce83a3ef17b89cb0ccb_b.png& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&https://pic4.zhimg.com/v2-94c94ce83a3ef17b89cb0ccb_r.png&&&/figure&&figure&&img src=&https://pic4.zhimg.com/v2-65bef45af8ca8f006905f_b.png& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&https://pic4.zhimg.com/v2-65bef45af8ca8f006905f_r.png&&&/figure&&figure&&img src=&https://pic2.zhimg.com/v2-7a130bfeacba_b.png& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&https://pic2.zhimg.com/v2-7a130bfeacba_r.png&&&/figure&&figure&&img src=&https://pic1.zhimg.com/v2-2bfab7a55fd04_b.png& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&https://pic1.zhimg.com/v2-2bfab7a55fd04_r.png&&&/figure&这个表情也作为名表情流传。&br&&br&大致意思我想图中说的很清楚了，传递的价值观，我认为是:学会放手，学会包容，兼容并蓄，岂不美哉？&br&&br&大体上讲这样是没错，然而六花你这让人心酸的笑容说这话真没有说服力越看越心疼好吧…&br&&br&于是婊六花就这么传开了。&br&&br&马口P的被婊主要体现在两个方面。一个是和六花一样的情感。&br&&br&马口P一直在守护公主，但却在扑克王国的战斗中被公主推向人间，从此就一直寻找着她。结果是找到那个冻着公主的奇怪玩意却一直打不开，打到终盘才知道公主已经分裂成三块，救不活了。&br&&br&就像你做一个题，这个题一直诱导你该怎么怎么解，你发现很对就这么解下去，解了一堆写了二十几页纸过程发现这题出错了，我问你什么心情？&br&&br&估计马口P还要难过。&br&&br&第二个问题就在于输出。婊马口P从来是离不开输出的。一个大下去打不中人这种事常常在她身上发生，甚至第一集就是这样。&br&&br&&br&&figure&&img src=&https://pic2.zhimg.com/v2-48f994fcc424c58ad75ae21_b.png& data-rawwidth=&1080& data-rawheight=&1920& class=&origin_image zh-lightbox-thumb& width=&1080& data-original=&https://pic2.zhimg.com/v2-48f994fcc424c58ad75ae21_r.png&&&/figure&&br&我就不说话了。&br&&br&3.&br&要用阳明心学来解释心跳Q娃我想题主你是误会了什么，可能是被一片心学家的称号带的节奏，以为大友们都对阳明心学颇有研究。&br&&br&事实上，大友们所称“心学家”，是对心跳Q娃进行分析、考据、解读的那一批人，因为自成一派再加上这片子的确有特色，心学家这个称号也流传开来了。&br&&br&当然婊角色也是一种解读，所以有些人看心跳Q娃看到癫狂的也可以当做是心学家。&br&&br&事实上我也没办法用阳明心学解读一部给小孩子看的片（&br&&br&希望能帮到题主。
难得看到知乎上说心跳，这会打算用我有限的了解详细说说，按照题主给的顺序一个个来回答。 1. 我们这种没吃药的大友说到心跳都说婊六花婊马口P，但这里的婊并不是像平常的那种绿茶婊的说法一样是辱骂她们，这里我想百度百科的释义更符合我的理解。 “在中国…
&p&雅达利崩溃之后，有两个分支剧情，一个分支叫“家用电脑和PC游戏”，另一个分支叫“高级家用游戏机”。日本人选了“高级家用游戏机”而整个西方世界选择“家用电脑和PC游戏”。&/p&&p&我们先来看看西方世界的情况，这是雅达利微机前后家用电脑（Home Computer）的时间线：&/p&&p&&a href=&//link.zhihu.com/?target=https%3A//en.wikipedia.org/wiki/Home_computer& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Home computer - Wikipedia&i class=&icon-external&&&/i&&/a&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-9ed9d39e5d10f06e75582a0_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1150& data-rawheight=&291& class=&origin_image zh-lightbox-thumb& width=&1150& data-original=&https://pic1.zhimg.com/v2-9ed9d39e5d10f06e75582a0_r.jpg&&&/figure&&p&我们可以看到，1982年夏天雅达利发布《E.T.》之后，8位家用电脑进入“黄金时代”，实际上，如果仅仅是劣质的游戏《E.T.》并不足以导致雅达利危机的产生，劣质手游虽然广受诟病，但仍然是许多游戏公司的“现金牛”一样。家用电脑的快速普及，家用电脑价格大战和电脑游戏质量的快速提升才真的成为压倒雅达利这只病“骆驼”的稻草。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-0e2ad85c328b81ec58c7_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1111& data-rawheight=&670& class=&origin_image zh-lightbox-thumb& width=&1111& data-original=&https://pic4.zhimg.com/v2-0e2ad85c328b81ec58c7_r.jpg&&&/figure&&p&各个平台上每年新推出的游戏数量是显示游戏平台生命周期的重要指标，我们看到1983年后迅速崛起的家用电脑平台——ZX Spectrum，Commodore 64，Amstrad CPC，DOS和Amiga。图表摘自：&a href=&//link.zhihu.com/?target=http%3A//www.daystodev.com/visualization-of-game-genre-and-platforms-since-1975/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Visualization Of Game Genre And Platforms Since 1975&i class=&icon-external&&&/i&&/a&&/p&&p&虽然早在1977年Apple II，Commodore PET，和Tandy TRS-80三剑客就已经敲开了“个人电脑”的大门，但此时的个人电脑价格仍然较为昂贵，往往只有热衷电脑的发烧友和需要使用电脑工作的企业才会购买，而电脑进入家庭，则要到1980年之后，这其中英国企业Sinclair和Acron起到了非常重要的作用。&/p&&p&ZX Spectrum对欧洲游戏行业的影响相当深远，正品ZX Spectrum销售了超过500万台，而除此之外前苏联国家生产了大量“山寨”ZX Spectrum让它在东欧成为“小霸王”一样的存在。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-e1ca061fed1c9_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&785& data-rawheight=&555& class=&origin_image zh-lightbox-thumb& width=&785& data-original=&https://pic2.zhimg.com/v2-e1ca061fed1c9_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/v2-162b243f1cbecc007a7db_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1280& data-rawheight=&960& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic4.zhimg.com/v2-162b243f1cbecc007a7db_r.jpg&&&/figure&&p&BBC Micro，销售150万台， &a class=&member_mention& href=&//www.zhihu.com/people/1e2cccc3ce33& data-hash=&1e2cccc3ce33& data-hovercard=&p$b$1e2cccc3ce33&&@Milo Yip&/a& 大神的启蒙老师：&a href=&http://zhihu.com/question//answer/& class=&internal&&Milo Yip：又一年了，各位程序猴子能否谈谈当初怎么踏上干程序这条不归路的？&/a&&/p&&p&关于BBC Micro的故事，可以参考：&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&追寻ARM的起源——Acorn电脑简史&/a&&/p&&p&下面这台电脑运行的是BBC Micro上最著名的游戏之一——《精英》（Elite）。BBC Micro除了启蒙了一大批游戏开发者，还是树莓派的灵感来源。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-04ffca51ee28cc1a7b7d003_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&925& data-rawheight=&648& class=&origin_image zh-lightbox-thumb& width=&925& data-original=&https://pic4.zhimg.com/v2-04ffca51ee28cc1a7b7d003_r.jpg&&&/figure&&figure&&img src=&https://pic2.zhimg.com/v2-2ca0d2ece629f_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&956& data-rawheight=&743& class=&origin_image zh-lightbox-thumb& width=&956& data-original=&https://pic2.zhimg.com/v2-2ca0d2ece629f_r.jpg&&&/figure&&p&CPC 464，销量300万台，同样有大量的游戏&/p&&figure&&img src=&https://pic4.zhimg.com/v2-46edf2da27fba28dc0eb08d079f9d327_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&800& data-rawheight=&598& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&https://pic4.zhimg.com/v2-46edf2da27fba28dc0eb08d079f9d327_r.jpg&&&/figure&&p&Commodore 64，&b&1250万台，历史上最热销的个人电脑&/b&，同样大把游戏。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-b45edb322f26c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&640& data-rawheight=&480& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic2.zhimg.com/v2-b45edb322f26c_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/v2-a0bcf43ecbc1ecfb1214f_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1000& data-rawheight=&959& class=&origin_image zh-lightbox-thumb& width=&1000& data-original=&https://pic4.zhimg.com/v2-a0bcf43ecbc1ecfb1214f_r.jpg&&&/figure&&p&1985年3月的Amiga World创刊号，EA的创始人Trip Hawkins亲自出场，整版广告展示了EA针对Amiga电脑开发的“首发”游戏。（此时任天堂游戏机还没进入北美市场）&/p&&figure&&img src=&https://pic2.zhimg.com/v2-48b176746ced47bda49364e0defb88b1_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1500& data-rawheight=&933& class=&origin_image zh-lightbox-thumb& width=&1500& data-original=&https://pic2.zhimg.com/v2-48b176746ced47bda49364e0defb88b1_r.jpg&&&/figure&&p&直到1985年10月，任天堂NES（FC）才进入北美市场，此时家用电脑已经进入第四阶段，IBM兼容机（16位8086）的价格开始下探进入家用电脑市场，而进入欧洲的时间更是在1986年下半年，也就是摩托罗拉68000处理器的Commodore Amiga和Atari ST出现之后了。&/p&&p&诸侯争霸的家用电脑市场最终随着90年代中期IBM PC的全面胜利而进入一个统一的PC游戏时代，成为今日PC游戏市场的基础。&/p&&p&那么日本又为何选择了发展家用游戏机呢？我想，最终要的原因应该是&b&语言障碍（language barrier）&/b&，在号的InfoWorld中，富士通第8任社長小林大祐（Taiyu Kobayashi）就曾说：&/p&&blockquote&Programming languages now available, such as FORTRAN and COBOL, all come from English-speaking sources. The Japanese, however, think in Japanese first, and then describe their ideas in English. I would like to point out that this constitutes a big handicap for the Japanese. ,As long as this language barrier remains, Japan will have little impact upon the world software industry. That is one of the hurdles that Japan will have to jump in the future. &br&&br&现在已有的编程语言，如FORTRAN和COBOL都是来自英语世界。但是对于日本人来说，他们首先会用日语思考，然后用英文来描述他们的想法，我想指出这对日本人来说是一大障碍。只要这种语言障碍依然存在，日本对全世界软件行业的影响就难以扩大，这是日本今后必须跨越的障碍之一。&/blockquote&&p&实际上在80年代初的家用电脑普及浪潮中，日本厂商也曾经生产过一系列个人电脑产品，如NEC的PC-&/p&&figure&&img src=&https://pic2.zhimg.com/v2-7ed4bdcf77893bcfac251_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&438& data-rawheight=&500& class=&origin_image zh-lightbox-thumb& width=&438& data-original=&https://pic2.zhimg.com/v2-7ed4bdcf77893bcfac251_r.jpg&&&/figure&&figure&&img src=&https://pic4.zhimg.com/v2-d2ab1baa18712b_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&421& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&421& data-original=&https://pic4.zhimg.com/v2-d2ab1baa18712b_r.jpg&&&/figure&&p&富士通的FM-8和FM-7&/p&&figure&&img src=&https://pic2.zhimg.com/v2-c33fb5acfee6a78fcf049_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1239& data-rawheight=&1753& class=&origin_image zh-lightbox-thumb& width=&1239& data-original=&https://pic2.zhimg.com/v2-c33fb5acfee6a78fcf049_r.jpg&&&/figure&&p&以及微软和索尼等厂商联合推出的MSX&/p&&figure&&img src=&https://pic1.zhimg.com/v2-2eaaf_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&553& data-rawheight=&738& class=&origin_image zh-lightbox-thumb& width=&553& data-original=&https://pic1.zhimg.com/v2-2eaaf_r.jpg&&&/figure&&p&但是对于日本用户来说，这些电脑远远没有西方市场上的电脑对西方用户那样友好，正如小林大祐曾经解释的那样，直到30多年后的今天，几乎所有的编程语言都是以英语为基础的，对于亚洲语言为母语的用户来说，掌握电脑编程都要具有一定英语基础。&/p&&p&而8位电脑的一个重要特点，就是“开机即编程”，这一点在欧洲的影响尤为深刻，产生了大量被称作“卧室程序员”（Bedroom Programmer）的独立开发者。并成了Eben Upton组建树莓派基金会的初衷之一。&/p&&p&但由于语言障碍的存在，让家用电脑在日本始终受困于一小群爱好者中间，而操作简单，“即插即用”的游戏机显然更受大众欢迎。&/p&&p&类似的困境对中国用户来说并不难理解，中国的“家用电脑”——学习机的用户中只有很少的一部分通过学习机学会了BASIC、LOGO等编程语言，而更多的“学习机”则是沦为纯粹的游戏机。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-82a53c4065249fcd8d283ff2f892558c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&550& data-rawheight=&457& class=&origin_image zh-lightbox-thumb& width=&550& data-original=&https://pic1.zhimg.com/v2-82a53c4065249fcd8d283ff2f892558c_r.jpg&&&/figure&&p&&b&至此我想楼主的问题就可以解答了：&/b&&/p&&p&1980年代初，微电子技术的进步让家用电脑革命以（英语为母语的）英国、美国为中心逐渐席卷整个西方世界、包括澳大利亚和东欧，导致了雅达利危机的爆发和PC游戏的兴起。&/p&&p&而作为亚洲为数不多的、具备家用电脑普及条件的发达国家日本，却由于语言障碍几乎被隔绝于家用电脑革命之外，因此选择了用户门槛更低的家用游戏机，并随着80年代日本经济泡沫迅速将影响力扩大到世界范围（任天堂进入美国市场的时间，与《广场协议》签订时间高度一致，都在1985年下半年），成为日本最重要的文化输出内容之一。&/p&&p&这种格局一直维持至今，日本的电子游戏产业仍然保持着“主机强PC弱”的格局，而欧洲则是“PC绝对优势、独立游戏繁荣”，美国则处于两者之间，PC和主机都有不少爱好者。&/p&&p&不想卷入PC和主机玩家的口水战，关评了。（手动滑稽）&/p&
雅达利崩溃之后，有两个分支剧情，一个分支叫“家用电脑和PC游戏”，另一个分支叫“高级家用游戏机”。日本人选了“高级家用游戏机”而整个西方世界选择“家用电脑和PC游戏”。我们先来看看西方世界的情况，这是雅达利微机前后家用电脑（Home Computer）的…
&figure&&img src=&https://pic2.zhimg.com/v2-9ed7df7e9b7b3e6f7bc6f7ff91e58b62_b.jpg& data-rawwidth=&1200& data-rawheight=&720& class=&origin_image zh-lightbox-thumb& width=&1200& data-original=&https://pic2.zhimg.com/v2-9ed7df7e9b7b3e6f7bc6f7ff91e58b62_r.jpg&&&/figure&&p&今天想聊的，不是什么设计技巧或是方法，而是一个非常基础，但在设计过程中又常常无意或有意忽视的问题：对设计稿内容的把关。&/p&&p&往往我们会认为自己是产品框架的设计师，用户往里填什么内容和设计没太大关系。&/p&&p&产品上线后，老板气冲冲地找到设计师时，设计师一脸委屈地拿出当初漂亮的设计稿：这届用户品味不行，怪我咯？&/p&&p&引用一句今年被反复提及的一句话，“未来整个互联网设计师，更加强调的是内容创意的设计，而不仅仅只是产品框架的设计”。&/p&&p&内容创意是一个很大的话题，而今天要讲的，只是设计对内容把关的一个最基本的要求——对设计稿中内容的真实性有足够深度的思考。&/p&&p&下面将结合一个案例，就内容真实性的三个层次，以及它对项目和设计师自身的价值进行探讨。&/p&&p&&br&&/p&&h2&&b&案例简介&/b&&/h2&&p&工作中的项目不便用于讨论，下面用一个专为平时讨论方便做的虚拟项目“一站”作为实例。&/p&&p&由于只是基于诸多业务背景上的假定去设计的一个概念方案，也许有些地方作为例子并不是最恰当的，但用一个自己熟知真实思考过程的项目去阐述，是我目前能想到最好的方式。&/p&&p&“一站”是一个基于地铁查询工具的内容分享平台，用户可以单纯将它当做一个地铁查询工具来使用，也可以当做一个分享自己与地铁有关的故事、寻找共鸣的树洞。&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-5cafc9bcbb633a444271fa_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&720& data-rawheight=&781& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&https://pic1.zhimg.com/v2-5cafc9bcbb633a444271fa_r.jpg&&&/figure&&p&下面引用当时写的一段简介，简要介绍一下这个case的设计背景：&/p&&blockquote&网易云音乐乐评和杭州地铁的结合爆红时，我想过为什么地铁和乐评这么搭。&br&地铁站已经从一个交通设施，越来越像是城市一个片区的代名词，每天目送过客来来往往。而深处地下的地铁站并不是一个明快的场景，它是一个适合思绪闪回和触景生情的地方。所以，和回忆和故事有关的乐评，在地铁里出现显得格外融洽。&br&那么如果地铁站本身也有属于自己的“站评”呢？&/blockquote&&p&关于这个案例的更多背景可以戳&a href=&https://link.zhihu.com/?target=http%3A//qinsman.com/1711_istation/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《一站：提起一个地铁站时，你会想起什么？》&/a&。&/p&&p&&br&&/p&&h2&&b&从一个反例说起&/b&&/h2&&p&首先来看看一站的首页（左图），首页的几个主要板块包括顶部的“今日推荐”卡片轮播、本周热门、好友推荐、编辑精选。&br&我还为这篇文章准备了一个对应的反例版本（右图）——刻意按Dribbble上有一段时间很常见的一类飞机稿风格出的。&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-fb1667fea272aeeafa8d13acfb84749f_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1660& data-rawheight=&1840& class=&origin_image zh-lightbox-thumb& width=&1660& data-original=&https://pic1.zhimg.com/v2-fb1667fea272aeeafa8d13acfb84749f_r.jpg&&&/figure&&p&正常工作环境中，我相信反例里的这些问题是肯定是看不到的：&br&· 在面向国内用户的项目里为了看上去高大上采用英文排版、用歪果仁头像和ID；&br&· 界面主体全靠精美的图片撑起，甚至界面配色也是根据图片来取的——所以不经过严格的配色思考也能看起来契合得很好；&br&· 文案和内容莫名其妙——谁会在一个关于地铁站的故事里写图中这些生硬的句子？&/p&&p&为什么要先举一个这么离谱的反例？&br&一来，是因为这些问题和本文正题中想讲的问题有共通之处。&br&二来，也想借这个例子讲点题外话：Dribbble上这类飞机稿势头正盛的时候，和在Dribbble上知名度非常高的一位动效大神同事聊过这个问题。这类稿子的一度泛滥给入门中或者入门不久的朋友带来的误导很大，以为真实工作中就是按这种套路拼凑一些貌似好看（其实也未必）的单张飞机稿完事，甚至在作品集里大篇幅如法炮制相同风格的稿子，导致投递后石沉大海。&br&因为商业环境中的视觉设计绝不是做这种稿子，产品和交互设计更加不是。&/p&&p&其实练习飞机稿对练习者自身而言一定是有价值的，有心在工作之余保持练习，把实际工作中被拍掉的好点子抛出来交流也好，单纯提升技法的熟练度也好，对设计师自身而言，即使稿子可能并不成熟，总归是一件有好处的事情。&br&只是，对看作品的人而言，可能就未必有价值了，甚至被同一类作品的泛滥严重误导、浪费大量时间在效仿类似的稿子上的初学者也大有人在。&/p&&p&至于练习英文版的飞机稿有没有意义？我的判断是，熟识西文和中文间微妙的差异是大有裨益的，尤其是对工作中有可能接触到海外项目的设计师。&br&英文排版我也经常练，但从来都是出完中文排版后，才考虑给自己一个额外的刻意练习，同时也方便在Behance上发布交流。也正是经由此，去年找到了两次和国外团队合作的机会。&br&只是，不要仅仅为了出飞机稿好看，就连中文都还没排版好就去出英文稿，那就本末倒置了。&/p&&p&&br&&/p&&h2&&b&内容真实性的三个层次&/b&&/h2&&p&下面回到正题。&br&除去上面提到这些非常离谱的问题之外，继续对比这两张设计稿。&br&首先问，乍一看，哪一张稿子看起来好看？大概很多人会觉得是后者。但真落地起来，后者大概会被产品和开发喷成筛子。&br&原因就是今天想讲的，内容真实性问题。内容真实性会极大地影响设计稿的质量、沟通效率和落地的顺利程度。&/p&&p&关于设计稿到底应该侧重美观还是侧重落地，也和视觉同事讨论过，最终的共识是：看具体阶段。&br&在初期汇报阶段，可以向老板展示效果比较理想的概念稿，但凡不想稿子被毙的人都不会把一些蛋疼的极端情况在汇报稿里展示。&br&当然，前提是这些“理想效果”也是在可能范围内的，而不是拿一个不可能出现在产品中的完美showcase去忽悠老板，那到时候落地后发现完全不是这么回事就得等着挨板子了。&br&而在项目具体实施、落地的阶段——也是本文所讨论的阶段，就必须周全地考虑内容的各种变数，在这个阶段内容真实性就尤为重要。&/p&&p&对团队合作的效率来说，无论在评审还是落地中，逻辑真实有利于减轻看稿子的人的理解成本和不必要的反复确认沟通，这是许多同行在闲聊或者文章中已经表达过共识的好处。&br&而这里想重点讲的，是对产品设计师自身而言的价值——真实性是对自己思考周全性最好的锻炼方式之一。&/p&&p&内容真实性可以分为三个层面：逻辑真实、内容源真实，用户情感真实。&br&背后对应的则分别是产品设计师的三种重要的能力——逻辑判断能力，业务理解能力，以及同理心。&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-4eb25ce526b8d6eae1f2bc6e66866f05_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1660& data-rawheight=&976& class=&origin_image zh-lightbox-thumb& width=&1660& data-original=&https://pic3.zhimg.com/v2-4eb25ce526b8d6eae1f2bc6e66866f05_r.jpg&&&/figure&&p&下面将结合一站的例子，分别分析和阐述。&/p&&h2&&b&层次1：逻辑真实&/b&&/h2&&p&逻辑真实是最基本的要求。&br&比如一个分阶段的活动页，还剩10~4天和还剩3天时是两个不同阶段（简称阶段A和阶段B），阶段A和B的玩法不同，导致界面上也有诸多差异，那么就不要在阶段B界面的活动倒计时上写“还剩6天”，应该是还剩3天以内。写“还剩6天”显然会让下游同事产生疑惑甚至误导。&br&前一阵，一个产品经理同事看我在仔细核对交互稿上几个类别的数量之和与合计字段的数量对不对得上，说：你出稿子也太严谨了吧。&br&可能是工科出身的缘故，入行之初就早已习惯于此。&/p&&p&回到一站的例子。&br&在涉及故事List的场景，逐一填写每条故事的时间和点赞数，可以引导我思考，在当前模块内，排序规则是按时间还是按点赞数排序？在车站页的故事List里，用户更希望默认看到的是“最新”还是“最热”，哪个有利于留住新用户，哪个有利于老用户，是否要提供自定义设置的开关？&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-479e3dd7a328dd71ab3d9ae9_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1660& data-rawheight=&1840& class=&origin_image zh-lightbox-thumb& width=&1660& data-original=&https://pic2.zhimg.com/v2-479e3dd7a328dd71ab3d9ae9_r.jpg&&&/figure&&p&&br&&/p&&p&同样关于排序逻辑，全市站点列表和线路站点列表，各按什么排序逻辑更合适？&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-5a74da0b5cec27c55025dabe_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1660& data-rawheight=&1840& class=&origin_image zh-lightbox-thumb& width=&1660& data-original=&https://pic4.zhimg.com/v2-5a74da0b5cec27c55025dabe_r.jpg&&&/figure&&p&不同范围时间的展示格式是怎样的？日期的表达，选用“年-月-日”、“月-日”还是“X天前”、“昨天”，需不需要加分和秒？时刻的表达，选用“刚刚”、“X分钟前”、“X小时前”的临界点又分别是什么？&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-db63e3e885_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1660& data-rawheight=&1840& class=&origin_image zh-lightbox-thumb& width=&1660& data-original=&https://pic3.zhimg.com/v2-db63e3e885_r.jpg&&&/figure&&p&&br&&/p&&p&哪些页面里故事所属地铁站的字段需要加城市名，哪些不用？&/p&&figure&&img src=&https://pic2.zhimg.com/v2-ae997aebf3ebbe0c5245657_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&720& data-rawheight=&798& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&https://pic2.zhimg.com/v2-ae997aebf3ebbe0c5245657_r.jpg&&&/figure&&p&总说“交互设计往前走”，多与产品一起考虑，说起来似乎不知道如何入手，其实在每天埋头出稿子时，多留心一些逻辑细节，替产品和运营多想一点，就是最容易锻炼自己的方法之一。&/p&&h2&&b&层次2：内容源真实&/b&&/h2&&p&如果说逻辑真实有助于与产品经理协同思考，那么内容源的真实则很有助于了解运营方面的诉求和难点。&br&平台内容是以UGC为主还是PGC为主？哪些文案、图片和字段是需要运营强控的？&br&这看似和设计关系不大，实际上处处都需要仔细考量。&/p&&p&以“一站”为例，这是一个UGC属性非常明显的平台，根据产品定义（由case的背景假定，这里不深究），用户发布的内容形式是图文，由一段150字内的故事+至少1张照片构成。除了首页轮播、编辑精选、专题策划可以由平台强运营以外，其余全部内容都是不可控的UGC内容。&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-a44e4e05a9af0e81e939a08_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1660& data-rawheight=&1840& class=&origin_image zh-lightbox-thumb& width=&1660& data-original=&https://pic2.zhimg.com/v2-a44e4e05a9af0e81e939a08_r.jpg&&&/figure&&p&这就要求，在设计过程的任何环节，都要对内容的质量和特点心中有数。&br&以图片为例，由于目标用户是手机使用熟练、审美水平相对较高、也熟悉滤镜操作的年轻群体，他们发布的地铁故事、心情、回忆中的配图质量，可能不会差到特别离谱。但同时，由于照片多是随手拍摄，且场景与城市内的地铁站相关，这决定了视角一定多是平视视角，较少会出现前面反例飞机稿中华丽丽的高空俯拍。&br&所以，一站的交互稿里，除了少数几张用在可强运营的场景外的照片是在可商用图库里找的之外，所有照片都是我自己手机相册里的。&/p&&p&下面将围绕首页顶部“今日推荐”模块，以几个非常简单的问答为例，聊聊关于内容源在设计中可以关注哪些点。&/p&&p&问题1：为什么首页顶部“今日推荐”模块选择了卡片轮播，而没有直接做成更加美观的通栏Banner？站点详情页和其他很多页面却可以？&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-e0fb90e891c7c4f2fd223572_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1660& data-rawheight=&1840& class=&origin_image zh-lightbox-thumb& width=&1660& data-original=&https://pic2.zhimg.com/v2-e0fb90e891c7c4f2fd223572_r.jpg&&&/figure&&p&一个通栏Banner绝大多数情况下上方都是有文字层的，且文字层一定会出现在相对中央的区域，这一点和卡片容器有显著的不同。&br&站点详情页（右图）的Banner图是有强运营属性的，其上方覆盖文字的可读性问题，平台编辑自有一百种方法避免。&br&而“今日推荐”（左图）是UGC内容，虽然有编辑推荐的筛选机制，但一段优质内容值得推荐，往往是因为故事本身打动人，并不代表其配图一定可以完美地与上方任意文字融洽相处，这完全是两码事。&/p&&p&如下图，如果站点详情页的Banner图变成UGC内容（比如取最热故事的第一张配图作为站点头图），可读性就会变得非常不可控（右图）。&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-be2bb87dd04c1acdf6493_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1660& data-rawheight=&1168& class=&origin_image zh-lightbox-thumb& width=&1660& data-original=&https://pic4.zhimg.com/v2-be2bb87dd04c1acdf6493_r.jpg&&&/figure&&p&&br&&/p&&p&问题2：为什么卡片尺寸是正方形的？而不是更加美观的4:3、3:2、16:9等横版尺寸？&br&因为今日推荐里推荐的每一条内容都是用户自己上传的。大家回想一下自己在朋友圈里看到的照片就很容易想到，由用户随手拍摄的UGC图片，按横持和竖持习惯不同，横版和竖版都有。&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-c5c8240edeadc30ff616c_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1660& data-rawheight=&1252& class=&origin_image zh-lightbox-thumb& width=&1660& data-original=&https://pic2.zhimg.com/v2-c5c8240edeadc30ff616c_r.jpg&&&/figure&&p&此时，通行做法是裁取中间部分，而如果像反例中一样使用了横版容器的话，竖版照片就被裁得很惨，甚至变得莫名其妙。&/p&&p&问题3：为什么同样是用户产出的配图，所有List里的图片都一律使用了非常小的尺寸，只有“今日推荐”轮播里的图片可以大胆占据半个屏幕？&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-cf93ef88c81_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1660& data-rawheight=&1787& class=&origin_image zh-lightbox-thumb& width=&1660& data-original=&https://pic3.zhimg.com/v2-cf93ef88c81_r.jpg&&&/figure&&p&一站是一个图文内容平台，而图和文中又是以文为核心，而不是Ins这样几乎每张发上来的照片都质量颇高的图片平台。&br&“今日推荐”是经过编辑筛选的，而其他List里都是按点赞数或时间排序的。&br&以点赞数排序为例，哪条内容被顶上来，未必是因为图片拍得好，很有可能是一条很能唤起其他用户共鸣感的内容、却配着一张比较随意的图。如果这样的内容被顶上热门列表，且展示尺寸过大的话，显然会对整体观感产生不好的影响。这也是在工作中的实际项目里经常有意压缩图片展示空间的原因。&/p&&p&那么，PGC呢？是否就可以任意设计？&br&增加了运营妹子的工作量？让老板给她加个鸡腿就好。是这么简单么？&br&比如，首页顶部是否像反例中一样，需要额外的Banner运营位？&br&如果只从设计角度，这里没有答案。&br&也许完全不需要，也许真的有可以运营的场景，这就要和运营充分沟通，达成设计、产品、运营的三赢。&br&而不是只因为好看“为放而放”。反例中强行在顶部加了一个Banner轮播位，轮播什么呢？好看的风景图么？&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-2c033f77c2412c8cedc4a40f1cffb1ed_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1660& data-rawheight=&853& class=&origin_image zh-lightbox-thumb& width=&1660& data-original=&https://pic2.zhimg.com/v2-2c033f77c2412c8cedc4a40f1cffb1ed_r.jpg&&&/figure&&p&这里顺便简单解释下，我没有放是基于这样一个假定的业务背景：这个产品在初期养内容的阶段确实不需要首页Banner向特定场景导流，为做而做只能导致更高的跳失。&br&在后期依托成型的内容池转型的时候可以考虑接一些营销内容，比如如果有一些类似“体育西路那些有故事的日料店”的推广营销活动，就很适合在这里做运营。&/p&&p&上面几个问题都是以图片举例，而实际项目中，文案、图片、视频，都需要结合内容生产者的能力和习惯充分考量设计的合理性，而不是从设计反推运营，强求内容生产者以设计师心目中更美观的格式去生产内容，这种限制下的拘束感往往是用户流失的开始。&/p&&h2&&b&层次3：用户情感真实&/b&&/h2&&p&相比前两个层次的真实，用户情感真实非常考验设计师的同理心。&br&一站这个case，如果不考虑用户视角的真实性的话，毫不夸张地说，我用1/10的时间就可以做完。&br&那9/10的时间用在哪里了呢？&br&说起来有点好笑，都用在编故事上了——谁让这是一个故事平台呢。&br&车站评论的内容都是自己一条条写的，有一部分来自向朋友解释case背景后、朋友帮忙撰写或提供素材的，另一部分则是自己以最大限度的代入感和同理心去编写的。&/p&&p&在开始内容卡片的设计前，需要“编”很多故事，这期间就会不由自主地开始思考：这类评论，一般会写多少字？文字在卡片中全部铺出还是按固定长度截断？字数的变化会对卡片设计产生怎样的影响？最多折几行？行高多少？字数很少时会不会显得奇怪？图片尺寸怎样去适应字数变化？&br&最终，故事文字最大长度确定为150，不同场景的卡片分别选用截断和完整铺出的处理方式，都是在这一系列思考后确定的答案，每个小问题具体的分析就不在这里展开了。&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-b2f20c18a6a8e6ed0a25f64c64eb7edc_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&720& data-rawheight=&651& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&https://pic3.zhimg.com/v2-b2f20c18a6a8e6ed0a25f64c64eb7edc_r.jpg&&&/figure&&p&&br&&/p&&p&围绕文字的设计，再聊一个问题——故事是否要求填写标题？&br&起初设计的时候，可能不由自主地想画一个标题上去。相比铺出长度不固定的内容，有标题确实某种意义上对设计更加有利。&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-aaa968f4fc20eacdacec56f85b3ae501_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&720& data-rawheight=&629& class=&origin_image zh-lightbox-thumb& width=&720& data-original=&https://pic1.zhimg.com/v2-aaa968f4fc20eacdacec56f85b3ae501_r.jpg&&&/figure&&p&但自己和朋友在撰写的时候都不由自主地觉得标题很累赘，在设计时都如此，更何况真实用户使用的时候。且对于全文长度仅有150的故事内容，标题存在的价值很难说得圆。&br&所以，后续设计中就取消了标题的设置，改为直接透具体内容。如果没有代入用户视角去尝试编写内容的过程，很大概率不会想得这么深入。&/p&&p&对目标用户群体而言，是否需要提供个性签名功能？曾几何时一大票APP无论什么类型，都照搬QQ的个性签名系统，结果填写率惨不忍睹，设计的签名位要开了天窗。因此，这点是需要在稿子中“编”签名时同时思考的一个问题。&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-82dbb56ad633f700cb3dd86_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1660& data-rawheight=&1840& class=&origin_image zh-lightbox-thumb& width=&1660& data-original=&https://pic1.zhimg.com/v2-82dbb56ad633f700cb3dd86_r.jpg&&&/figure&&p&考虑到产品受众多是内心细腻、渴望个性化表达的群体，而自己和朋友“编”签名的过程也非常流畅，结果呈现出来也和产品调性比较吻合，所以最终采用了有签名的方案。&/p&&p&说到底，个人一直觉得，了解一个产品的用户调性是非常重要的，是指导自己设计思考的一个股没有实感却又不可忽视的软性力量，persona不是走过场，而是在设计中时刻要去思考的问题。&br&同样是出自网易、以评论系统闻名的两个产品，网易云音乐和网易新闻，用户的语言风格和评论习惯是完全不一样的，为什么云音乐的评论回复是单对单的私聊式，而网易新闻则以“楼中楼”模式诞生的各种神楼闻名遐迩，产品的很多特质并非上线前就完全想好这样设定的，而是被用户调性反向输入的结果。&/p&&h2&&b&结语&/b&&/h2&&p&也许很多朋友看完的反应都是：话是这么说，可实际项目中哪有时间去这么打磨稿子里的内容，能把框架按时交付就不错了。&br&可我最真实的感受就是，我还真没感觉这道工序影响了我的效率。难道是因为当年war3练就的手速？&br&我想，最合理的解释还是因为这样的习惯已经陪伴了自己很久。也许当年第一次细究内容的不真实性、逐一改掉时，会觉得有点费工夫，但这次改掉一个点，下次在聊需求、出稿子的时候就会自然而然地在第一时间把这点考虑周全。久而久之，对内容做个简单的把关，真的没有想象的那么费时间。&br&即使项目真的十万火急到没时间在设计稿上呈现，对真实性的持续性锻炼和思考，至少能帮你时刻周全地考虑到这些可能影响设计的细节点。&br&我想，这才是对勤于思考受益终身的奖赏。&/p&&p&&br&&/p&&p&【欢迎关注我的公众号：西市馒头铺子】&/p&
今天想聊的，不是什么设计技巧或是方法，而是一个非常基础，但在设计过程中又常常无意或有意忽视的问题：对设计稿内容的把关。往往我们会认为自己是产品框架的设计师，用户往里填什么内容和设计没太大关系。产品上线后，老板气冲冲地找到设计师时，设计师一…
&figure&&img src=&https://pic3.zhimg.com/v2-594905beb29aa1eed8d36c9_b.jpg& data-rawwidth=&1280& data-rawheight=&496& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic3.zhimg.com/v2-594905beb29aa1eed8d36c9_r.jpg&&&/figure&&p&大家一提到人工智能就觉得一定是一堆各种各样的高深的导数积分公式，一定是像阿里巴巴、腾讯、Google 这样的巨无霸公司才会使用的技术，但是其实人工智能的技术并没有那么高冷，也没有那么遥远，今天介绍的两个是独立开发者利用深度学习的技术来帮助大家生成Logo、除了能够让设计师寻找灵感之外，还可以真真实实帮助到小的企业主低价获得自己的 logo 呢。&/p&&p&&br&&/p&&p&logojoy 的官网链接：&a href=&https://link.zhihu.com/?target=https%3A//logojoy.com/dashboard& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Logojoy - A logo maker for simple, beautiful logos.&/a&&/p&&p&&br&&/p&&p&下面是我用 logojoy 给知乎做了一个logo，最后选了一个看起来还蛮不错的，先给大家看一眼哈。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-7a36df14be46d_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&600& data-rawheight=&233& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&https://pic3.zhimg.com/v2-7a36df14be46d_r.jpg&&&/figure&&p&&br&&/p&&p&logojoy 的工作原理：&/p&&p&&br&&/p&&blockquote&Logo 只是不同部分组成在一起：字体，颜色，布局，符号等。 Logojoy 用机器学习来学习哪些组合搭配在一起更合适，同时 logojoy 也会追踪用户做的所有操作，比如：选择从一堆灵感 Logo 中选择了哪个，给哪个 Logo 点赞， 做了哪些改动（比如改了字体），下单的Logo 是怎样的，等等。&br&&br&每天，学习算法会读取用户做的所有操作，根据发生次数判断重要性。 然后定义规则改进 Logo 生成算法。&br&&br&举个例子，“用户把字体的粗细从100（细）改成600（粗）” 是一个操作。&br&&br&这个操作的数据包括了发生次数，之前进行了什么操作，以及 Logo 当前的组成部分是哪些。假设算法发现说：每次用户把字体调粗时， LOGO 的颜色都是淡色。&br&&br&算法会定义一条规则，“如果 Logo 是淡色， 不要用细字体”&/blockquote&&p&&br&&/p&&p&&b&然后我就把我生成zhihu logo 过程直接写下来大概十分钟就搞定啦。&/b&&/p&&p&&br&&/p&&p&首先填写 logo 的名字，这里我直接写填写入“zhihu”&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-d974b549cf6b_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1280& data-rawheight=&544& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic1.zhimg.com/v2-d974b549cf6b_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&然后会让你选择五组你喜欢风格的logo&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-ffee8d843caceb071b1bcf_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1280& data-rawheight=&726& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic3.zhimg.com/v2-ffee8d843caceb071b1bcf_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&选择两组你喜欢的颜色&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-e8c0e27af772e88a072ae5_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1280& data-rawheight=&625& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic4.zhimg.com/v2-e8c0e27af772e88a072ae5_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&填写Slogan(品牌口号)，一开始我写了个find a bigger world ，系统提示我slogan 不宜过长，然后我就认真思索了zhihu slogan 应该是“show off”。&/p&&p&&br&&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-8e3bd286dfffdaa0e8bc_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1280& data-rawheight=&734& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic3.zhimg.com/v2-8e3bd286dfffdaa0e8bc_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-abfe9ee3f4eefc3d2795141f_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1280& data-rawheight=&775& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic2.zhimg.com/v2-abfe9ee3f4eefc3d2795141f_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&选择你想要的小icon ，系统提供了搜索功能，然后我就搜索了下知乎吉祥物北极狐，话说还真有一个icon 跟刘看山很像呢&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-b9e37142d_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1280& data-rawheight=&732& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic3.zhimg.com/v2-b9e37142d_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-f759f7c48eff9e56f0668_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1280& data-rawheight=&749& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic2.zhimg.com/v2-f759f7c48eff9e56f0668_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-f38e4c12e1e_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1280& data-rawheight=&783& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic3.zhimg.com/v2-f38e4c12e1e_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&然后点击继续就可以生成啦，然后我节选了几个截图给大家看看 &/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-bca1e8958f1aff3ee023008dfd661ac7_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1280& data-rawheight=&675& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic2.zhimg.com/v2-bca1e8958f1aff3ee023008dfd661ac7_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-16fc7c218a2ac42a9cb3ec_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1280& data-rawheight=&557& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic3.zhimg.com/v2-16fc7c218a2ac42a9cb3ec_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-38bcfbb0754_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1280& data-rawheight=&658& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic4.zhimg.com/v2-38bcfbb0754_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&最后随意挑选了一个我比较喜欢的，说是北极狐，其实有点像企鹅哈&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-709ca14cdd3cdf2f485da_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1280& data-rawheight=&496& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic4.zhimg.com/v2-709ca14cdd3cdf2f485da_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-6b15ddfec31b9ff1b8e5e55f479673db_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1280& data-rawheight=&660& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic3.zhimg.com/v2-6b15ddfec31b9ff1b8e5e55f479673db_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-de82cb29b63fdc414b745bb_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1280& data-rawheight=&661& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic3.zhimg.com/v2-de82cb29b63fdc414b745bb_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-dac068bfa5d9_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1280& data-rawheight=&676& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic3.zhimg.com/v2-dac068bfa5d9_r.jpg&&&/figure&&p&&br&&/p&&p&&br&&/p&&p&当然最后你想要下载高清的矢量图版本是需要付费的呢？根据作者的访谈，这个项目现在每月能够给他贡献46万人民币的收入呢。具体访谈地址在这里：&a href=&https://link.zhihu.com/?target=https%3A//xiaozhuanlan.com/topic/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&月入￥46w案例分享：Logojoy，智能 Logo 生成器 － 小专栏&/a& &/p&&p&&br&&/p&&u&&figure&&img src=&https://pic2.zhimg.com/v2-cfbd9d8f124c8d84b5ce8d_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&1280& data-rawheight=&698& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic2.zhimg.com/v2-cfbd9d8f124c8d84b5ce8d_r.jpg&&&/figure&&/u&&p&&br&&/p&&p&一般的同学看到这个文章肯定是点赞加收藏的，聪明的同学看了这个报道已经开始去谈合作了，是不是可以调用API，然后分成呢？哈哈哈哈。那个聪明的同学就是我啦 。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-2eeab6eae_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&22& data-rawheight=&22& class=&content_image& width=&22&&&/figure&&figure&&img src=&https://pic1.zhimg.com/v2-2eeab6eae_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&22& data-rawheight=&22& class=&content_image& width=&22&&&/figure&&figure&&img src=&https://pic1.zhimg.com/v2-2eeab6eae_b.jpg& data-caption=&& data-size=&normal& data-rawwidth=&22& data-rawheight=&22& class=&content_image& width=&22&&&/figure&&p&有没有达成合作呢？不告诉你啦。&/p&&p&&br&&/p&&p&如果对人工智能机器学习有兴趣的，关注这个专栏啦：&a href=&https://zhuanlan.zhihu.com/c_& class=&internal&&人工智能+机器学习+深度学习技术文章精选&/a&&/p&&p&如果对一些有意思的 App 和网站有意思的，关注这个专栏啦：&a href=&https://zhuanlan.zhihu.com/producthunt& class=&internal&&那些好玩的 App 和网站&/a&&/p&&p&对我有兴趣的，来吧：&a href=&https://www.zhihu.com/people/chino-25& class=&internal&&知乎用户&/a&&/p&
大家一提到人工智能就觉得一定是一堆各种各样的高深的导数积分公式，一定是像阿里巴巴、腾讯、Google 这样的巨无霸公司才会使用的技术，但是其实人工智能的技术并没有那么高冷，也没有那么遥远，今天介绍的两个是独立开发者利用深度学习的技术来帮助大家生…
其实这个楼里已经有以前《动漫时代》的编辑了，但是很明显他的恶意没有我强，所以还是由我来讲述一下动漫这个词的来历吧。&br&&br&首先，“动漫”这个词来自于《动漫时代》，这是一本创刊于1998年11月，前身是1997年创刊的，主题为日本流行文化的《朝日快讯》副刊，在1998年4月刊登有关ACT调查之后，才独立出来的杂志。&br&&br&&b&插入6月7日编辑内容：&/b&&br&&br&&br&&a href=&//link.zhihu.com/?target=http%3A//baike.baidu.com/link%3Furl%3DDbOLqao8IC08-dcbKzPatbFVranA8KLaT0-uAcdW6Edkv9h9PztqkUK_rsZkf3tz3iYt6WHczReOCBqPskpkVa& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&动漫企业认定管理办法&i class=&icon-external&&&/i&&/a&&br&&br&&br&&b&这是文化部09年的文件，请注意文件里动漫一词的定义，而且很明显地，漫画还位于动画之前，呵呵呵……&/b&&br&&br&&br&&b&那些说政府搞不清动漫的，请以后也别故意混淆视听了~&/b&&br&&br&我随手拿了本第三期来拍，懒得认真去翻了——&br&&br&&figure&&img src=&https://pic3.zhimg.com/f87ade3cea17c6018ec31be_b.jpg& data-rawwidth=&4208& data-rawheight=&2368& class=&origin_image zh-lightbox-thumb& width=&4208& data-original=&https://pic3.zhimg.com/f87ade3cea17c6018ec31be_r.jpg&&&/figure&&br&请注意这里的英文与内容目录&br&&br&首先，animation，这是日本动画anime的词源，至于comic很明显也不是manga。&br&&br&但这里没有用错，因为第一个专题就是美国漫画发展史，最初的动漫时代里的“动漫”本来就不是只针对日漫的。&br&&br&所以，回答里有些说“你怎么知道动漫这词开始指的就是动画与漫画”，和“动漫为什么不能用来指日本动画”的这些，有的还自称入宅很久的小朋友，你们现在还有什么话说呢？&br&&br&其次，什么acgn不分家之类，也是标准的&b&自抬身价&/b&，实际上出现ACG这个词的时候，就已经在分家了，更不要说某些轻小说厨为了刷优越感，不但强行把N凑上去，还要“规定”acg里的G只能是“galgame&。&br&&br&为什么？我们看另外一张图——&br&&br&&figure&&img src=&https://pic3.zhimg.com/90d372a40fa76d529b132_b.jpg& data-rawwidth=&3168& data-rawheight=&2278& class=&origin_image zh-lightbox-thumb& width=&3168& data-original=&https://pic3.zhimg.com/90d372a40fa76d529b132_r.jpg&&&/figure&&br&这就是那本著名的，1999年3月由《电子游戏软件》这本94年创刊的游戏杂志出的，&b&著名的&/b&magic地带。因为真的很著名所以要多说一遍。&br&&br&之前动漫类内容在《电子游戏软件》和《电子游戏与电脑游戏》这两本杂志上，都是以杂志内栏目，以及副刊的形式出现的。&br&&br&然后，细心的同学可以来看一看这里的全称，A可是直接用了anime，acg同时出现的时候，跟ACT那边的AC可明显有着区别的。&br&&br&所以，我要表达的意思是什么呢？&br&&br&首先，动漫这个词，撑死上溯到1993年的《画王》即comic's king，但这里只有漫，没有与动联系在一起。正式以杂志形式出现，则是1998年的动漫时代，1997年创刊的漫友依然是只有漫，没有动。&br&&br&在没人能够找到动漫这个词更早来历之前，圈内普遍默认动漫时代是动漫一词的起源，这个连百度百科都有。&br&&br&到现在不过17年，有人觉得时间很久，对于我们这些曾经担任过动漫时代作者，编辑的人来说，时间并没有过去多久，谢谢。&br&&br&顺便一提，&b&那一代“动漫人”从来没有自称动漫人，或者自称宅的&/b&，我们所有人用的自称都是动漫爱好者，而国内公认的宅只有雪鹰姐的哥哥一个。至于为什么，据说，据说这位大神当年集全了所有11区正版的H游戏……&br&&br&至于otaku和neet，甚至啃老家里蹲之类的区别，由于跟主题无关，这里并不展开。&br&&br&但需要声明的一点是，&b&当年的动漫爱好者们，或许会反抗“自古以来”的主流歧视，但从来不会把这些自创词汇拿来当作主动攻击的工具。&/b&&br&&br&为什么？答案很简单，就在这本动漫时代的封底附近，例行的自刊广告上标价很明显——&br&&br&&figure&&img src=&https://pic3.zhimg.com/98bb34d61fe8b31b98d9ab_b.jpg& data-rawwidth=&540& data-rawheight=&960& class=&origin_image zh-lightbox-thumb& width=&540& data-original=&https://pic3.zhimg.com/98bb34d61fe8b31b98d9ab_r.jpg&&&/figure&&br&&br&&b&CD一张50人民币，VCD一张25人民币。&/b&&br&&br&很明显，以上是&b&盗版&/b&价格。而当时网络不但没有普及，即使普及了，受当时中日共同的带宽限制，也一样拿不到传播不了无损音源，视频源。&br&&br&而1998年的物价相信有点年纪的人都清楚，那么很明显地，即使几个人凑钱，也未必买得起一套盗版VCD，当然家里”土豪“的另说。&br&&br&因此那一代爱好者们的共享精神不用赘述了，&b&正因为来之不易&/b&，所以即使后来到了1999，甚至2000年动漫论坛开始盛行的时候，主题显然也是以&b&友好与交流&/b&为主，根本不可能存在什么所谓的刷优越感。&br&&br&这里稍微跑一下题，为什么有人觉得别人对一个词的指正就是“刷优越”？因为他已经默认这种指正是正确的，自己错了，矮人一头，才会对事不对人地恼羞成怒反击。&br&&br&至于那些脑补”没准几个月前你们也用错“的，更是进一步说明了这一点。&br&&br&顺便的顺便，我已经直接证明了，从17年前起，我接触这个词的时候，就没有用错过，谢谢。&br&&br&那么转回刚才的话题，正因为当初的动漫爱好者们家里并不贫穷（但大部分也不够富裕）——有的人号称看到亲戚朋友从日本带回来的JUMP之后便直接去国图或者北图订阅的——喜好交流互助，但又极度缺乏直接接触原版的机会，所以跟&b&各种意义上的宅&/b&也扯不上太过明显的关系。&br&&br&从各种动漫研究来讲，当时的国内大部分动漫爱好者们，在资料上的确比当时能够直接接触11区动漫相关资料的要差上一筹。&br&&br&当然，也有老卡那种杭州飞龙从9X年就给11区代工的特殊存在，他们能够接触到的，显然也比一般的港台爱好者要多很多。&br&&br&众所周知地，2001年的《我为歌狂》可以算是上美影最后的绝唱，而且根据S1的该片参与制作者SUNSUN同学说的，这片子甚至连导演都