通常产品经理在立项前都要思考需求的实现方式：是原生做？还是 H5 做？
问题的答案会因实际情况有所不同，如果追求体验，那原生效果更好，如果追求短频快，那就选用 H5，或是两者结合。
CCtalk 是个涉及 7 大端的跨平台产品：iOS、Android、PC、Mac、Web、触屏、小程序。我们在日常项目中（尤其是用户增长类的项目）越来越多选择用 H5 实现，然后以低成本适配方式应用到不同客户端。
这样做的好处在于：
降低了开发成本。原本要涉及 iOS、Android、PC（PC 和 Mac 用同一套 Qt 实现）、H5 这 4 个端的开发人员，现在采用内嵌页的方式，可以做到完全不涉及移动端和桌面端，或者仅是入口放置这类比较简单的工作。
降低了维护成本。如果有优化调整，可以只改 H5 页面，不用各个端都动手。
好处显而易见，当然这也不是件一本万利的事。看下面这张 App 和 PC 屏幕尺寸的对比图就明白了，长宽比差异这么大，页面在适配的时候，有时需要优化调整布局。
△ App和PC屏幕尺寸对比
如果要真正做到流畅顺滑的体验，流式布局是最佳选择，但是对设计和开发的要求都很高，维护成本也不小，这让大多数团队望而却步。所以还是自动适配宽度、媒体查询（断点适配）等相对低成本的方式比较香。
如何以低成本的方式做适配？这个问题涉及 2 个方面：框架和页面。
△ 框架和页面
先来看看框架，大致有 4 种：触屏、App、PC、Web。通常一个项目会涉及其中的几种，也有少数情况都涉及。（此文暂不讨论小程序，有机会再写一篇关于小程序设计的文章）
1. App
CCtalk 用的 App 框架容器是公司横向团队提供的 Web View，有 2 种：
常规的导航样式。元素包括：返回、页面标题、分享（根据需要选择展示或不展示）。安卓和 iOS 略有区别，iOS 为了导航栏的顺滑过渡效果，用的是同一个 Web View，所以无法满足在一系列页面中部分页面有分享按钮，部分页面没有分享按钮。安卓用的不是同一个 Web View，所以没有这个问题。（此处不展开讨论）
透明头部导航。常规导航无法满足一些个性化的设计需求，所以透明头部导航就应运而生了。可以对导航栏进行自定义设计，营造沉浸式的体验。
△ 2种头部
2. PC客户端
PC 客户端的框架导航包括：返回上一页，返回首页。页面内嵌时，要留意容器导航和页面导航是否有重复或遗漏。假如要保留页面导航栏，那需隐藏返回按钮；如果去掉页面导航栏，则需将导航栏上原有的操作（例如分享）通过悬浮等方式保留。
△ PC端的全局导航
一般的设计流程是：先设计触屏页面，再去看看 PC、Web 页面是否需要调整。
响应的总原则：提高屏幕利用率。
具体评估标准有 3 点：
页面元素从小到大可分为：控件→组件→模块→页面，按照不同维度的复用，并结合自身的项目经验，整理出 3 种常见的方法（此处是重点，看我看我）。欢迎小伙伴一起讨论补充。
△ 3种常见的适配方法
这种方法最简单，几乎不用动脑子。具体实施方式又分两种：
案例1-拉到指定宽度：
像帖子这类结构简单的内容页一般都可以直接拉伸。注意检查是否有遗漏操作，一般在 PC 端可以采用悬浮按钮的方案将移动端的操作保留。
△ 帖子页
案例2-居中显示，两边留白：
如果页面直接拉伸给用户增加了操作成本，可以采用将主体内容居中，页面两边留白的方式。
实名认证项目是将同一套实名认证流程复用到 3 个不同的使用场景中，所以页面需要适配触屏、web、PC 弹窗 3 个框架尺寸。如果将触屏页直接在 Web 上拉伸，那不仅样式上不美观，而且右侧的「修改」、「获取验证码」等操作按钮距离左侧的标题太远，根据格式塔的接近原理，右侧的一列蓝色操作反而会被误以为是一个整体，脱离和主体的关系，不易于操作。所以我们的做法是放弃拉伸，而是将主体内容居中显示，页面两边留白。
△ 实名认证页
这种方式虽然简单，但也要注意可能会涉及一些细节调整：
如果所有页面都能这么轻松适用于各个不同端，那对设计和开发来说真是省心省力，皆大欢喜。然而现实不会这么顺风顺水，有些页面放到不同的框架内会「水土不服」，这时就需要设计师出马做些调整。
这种调整适用于有图片和列表的页面。从设计层面改动不算大，而且开发量适中，开发也比较能接受。
案例1-排行榜
在课程排行榜项目中，有一个榜单列表页，展示榜单的具体排名和奖励等信息。
如果直接把触屏页面搬到 PC 端，满眼是大写的「丑」，从设计角度分析，用户的阅读负担和操作负担也过重，屏幕利用率低，鼠标滚了半天也没看完一半榜单。
△ 直接拉伸——丑&不好用
所以这个页面需要设计师改造一下才能适配到 PC 端，具体怎么做呢？
我们来分析一下它的页面框架和模块。页面从上到下分为：奖励 Banner、tab 区、列表区和我的排名 4 部分，结构相对来说比较简单，在 PC 端可以保持大的框架结构不变。
△ 页面结构
因为移动端是以纵向为主的屏幕，而 PC 端是宽屏，需要进行调整的模块分别是：奖励 banner区（图片类），其他名次列表（列表类）。对于图片适配，在这个项目中可以采用不同端使用不同比例图片的方案。对于列表适配，在 PC 端由 1 列调整为 2 列，以提升阅读效率。
△ 保持页面框架，调整图片和列表模块样式
案例2-课程售卖页
图片的适配处理，除了采用不同比例的多套图之外，还有另一种方式——保持图片比例不变，调整页面布局。将图片和标题从上下结构改成左右结构。
△ 课程售卖页
小结：
保持页面框架，调整模块内样式的方法适用于结构相对简单，有图片和列表等特殊元素的页面。
对于图片适配，有 2 条思路：
如果页面模块多、结构复杂，靠小改还是会造成阅读障碍和操作负荷，那就要用方法三——模块级复用，重组页面布局。
案例-课时学习页
课时学习页是个多模块的复杂页面，分别有视频播放区、课时基本信息、目录、网师、评价和推荐。整体思路是将页面结构由 1 列调整为左右 2 列，以此来提高屏幕的利用率。
模块的具体位置根据其重要性以及和内容主体的相关度来排布，例如目录：从平台角度希望用内容吸引用户，增加观看时长；从用户角度是需要经常点击切换的，对于这种重要性高又操作频繁的模块，当然应该放在第一屏内。例如推荐：和内容主体的关联度不高，所以优先级低，放在右侧较小的区域内。
△ 课时学习页
在复用模块时，要注意是否有手势操作的场景。如果触屏端有左右滑动的模块，在 PC 端适配有 2 种做法供参考：
另外，要注意浮层的特殊处理。手机端一般通过浮层展示更多信息，在 PC 端适配时，需将浮层调整为固定模块。例如移动端吸底的课程介绍浮层，在 PC 端改成固定在目录下方。
△ 浮层的适配
以上是我结合项目经验总结的 3 种低成本页面适配方法。当然，在具体的适配中还会遇到许多细节问题，需要 case by case 去处理。
文章来源：优设 作者：鱼游设计
你的设计是否能被理解？为什么设计的价值总是不被人认可？本文将从深入浅出，带你了解全局性设计思维的真正力量。
你的设计是否能被理解？为什么设计的价值总是不被人认可？
设计不仅仅只是带来美感，好的设计能够为产品、公司甚至整个社会创造巨大的价值。而在创造好的设计这个过程中，最重要、也是最容易被人忽视的，便是设计思维。
何为全局性设计思维？它能够为设计师带来哪些价值？本文将从设计的本质出发，结合设计的发展趋势，带你了解全局性设计思维的真正力量。
目录
这篇文章的主要内容，来自我在 19 年底的一个沙龙分享。整个分享以设计思维的角度入手，讲述了全局性设计思维的来源和重要性，以及我是如何在不同产品线上去运用这种设计思维的。
何为全局性设计思维？为什么要讲这种思维方式？
这是我一直在探索并实践的一种设计思维。从最开始的理论雏形，到各种项目的实践，不断进行修正和完善，最终形成了一套卓有成效的思维方式。通过这种思维方式，我逐步帮助产品解决了许多长期性的问题，并最终构建了各种不同类型的设计体系。最终，随着品牌矩阵与产品体系的落地，形成了一个完整的网易智慧企业设计体系。
△网易智慧企业设计体系
因为篇幅原因，本篇文章将重点从理论层面阐释全局性设计思维的导论、价值及使用方式。而具体的实战案例，我之后将会以另外几篇单独文章的形式进行展现，并详细讲解在设计过程中的一些细节与过程。希望能够帮助大家更深入地去理解如何根据不同的场景正确地去使用这种思维方式。
未来可能会包含以下几篇文章：
当然，目前的设计体系仅仅只是一个开始，未来还有很长的路要走。
希望本文能够为你带来小小的启发，让设计思维帮助你更好地发挥设计的价值。如果你对某一方面特别感兴趣，可以直接跳到这一章进行阅读，无需浪费过多时间。如果你有任何疑问，也欢迎随时与我交流。
这次把序放在了第二段，这样子看上去就不那么不务正业了哈哈。当然，写序更多的是为了记录生活，希望每一篇文章不仅仅只是传递知识，更是一篇有温度的文章。
整个 2019 年中，经历了很多事情，人生观也随之发生了些许变化。
从并肩作战的同事的不断离去，到逐渐需要考虑团队的发展。从单打独斗闯天下，到思考如何让整个团队更加优秀、如何建立完善的设计体系等等。
角色、心态、责任，以及如何坦然地面对自己。
活在当下，用心生活。这是我一直当作座右铭的语录，也是我希望给自己的承诺。总是试图去尝试这种状态，但却异常艰难。像我这样的人，看上去总是「积极向上」，总是「规划未来」，总是希望事事完美，强迫着每个细节的完善。但不知不觉中，人生好像开始进入了「自动驾驶」的模式，活在了过去的思索中，活在了未来的规划中，唯独对于当下异常麻木。
这并不是我想要的生活，我开始尝试做出改变。
偶然间，通过一些书籍，我开始尝试正念禅修。感受每个呼吸中空气的流动、感受身体的每个部分、感受当下空间发生的每一件事情。虽然只是很浅显的境界，但正念依然对我产生了巨大的影响。我开始重新地审视自己的人生，审视自己的生活状态。
△ 网易蜗牛图书馆：与快乐的小伙伴们
这种感觉，就像再次的呼吸了新鲜空气一样。
我们其实只存在于当下的时空中，过去和未来，并非真实存在的事物。回想一下，我们有多久没有像小时候一样，完完全全、毫无杂念地享受在当下的时光中了？
用心活在当下，平静地接纳一切发生的事物，这种感觉真是太美好了～
对于设计师来说，什么能力更为重要？是设计这门「技术」本身，还是思考如何去设计的「思维」能力？
对于不同的设计师来说，一定会有不同的答案。
这两种能力本身并不矛盾，他们相互影响，互相促进——就像「术」与「道」之间的关系。设计能力决定了设计作品的输出质量，而设计思维则决定了你思考问题、解决问题的能力。
然而，在现实的大环境下，「术」的重视程度远高于「道」，造成了很多设计师与日常业务的「分离感」。以至于，多数的设计师，无法将自己的设计能力有效地用于日常业务中；抱怨他人不理解设计，也因此错失了许多机会。
重视设计美感，其实并没有问题。视觉是最直接的表现方式，我们从最初开始喜欢这个行业，并最终成为设计师，大概都是因为如此。包括我个人，也是美感的追求者，常常为了几像素的细节，调整无数稿。也常常沉浸于自己的作品无法自拔。
但是，美感之后，设计还需要什么？
路易斯·沙利文曾讲过：「形式追随功能」。而功能存在的意义，则在于解决问题。视觉的形式、美感，很多时候只是包裹在外侧的表层，而解决问题才是设计真正的核心。视觉的表现，一定要遵循解决问题的方式，向用户传递恰当的信息，最终引导用户以此来解决问题。
因此，我更希望更多的设计师，在追求美感的同时，能够重拾设计思维本身，寻找设计最根本的价值。
我们其实可以站得更远一些。学会去理解事物，学会用设计去解决问题。再以此为基础，通过你的设计能力去塑造它、点亮它，让它成为一个真正美好而又有价值的设计。
而设计的价值，将会成为你的价值。
互联网时代中的数字产品设计，需要什么样的设计思维？或者说，当下我们需要什么样的设计思维？
这个问题的答案，好像一直在变。
互联网本身便是一个新的形态，1989 年「万维网」发明，1996 年中国引入互联网，到今年已经有大约 24 个年头。我们经历了不同的互联网时期，而「设计」的概念也一直在变化中。
Internet 1.0 PC 互联网时代。在这个时代，我们将大量的信息虚拟化，并通过网络进行信息传递。而我们的「设计师」们大多被称为「美工」，我们的「设计思维」，便是将信息变得更好看。
Internet 2.0 移动互联网时代，或者称为消费互联网时代。自从 2007 年乔布斯发布第一代 iPhone 之后，叠加 4G、wifi 等技术，手机成为日益重要的终端，世界逐渐进入了移动互联网时代。伴随着 iPhone 与其应用的出现，乔布斯让所有人理解了「用户体验」的重要性。我们不再是「美工」，我们变成了「UI 设计师」、「交互设计师」。而这个时代，我们的设计思维变成了「用户体验思维」。
那么，下一个时代在哪里？我们的设计思维又将如何转变，才能适应下一个时代？
1. 红利消失、增长触顶，互联网下半场到来
最近几年，我们已经能够明显地感知到——互联网的「寒冬」真的来了。随之而来的，便是互联网的发展方向似乎也正在发生变化。于是大约从 2017 年开始，互联网圈内逐渐出现一个新的名词——互联网「下半场」。人们普遍认为，中国的互联网将会由消费互联网时代进入下一个时代，即互联网下半场。
我并不完全认同互联网「下半场」的称呼。互联网本身是一个年轻的行业，中国互联网「下半场」，其实更像是互联网发展方向转变的标志。
因此，我们认为的下一个时代的方向，也许将会是 Internet 3.0——即产业互联网时代。
互联网为什么必须要进入下一个时代？
对于互联网企业来说，一方面在成本端，随着人口红利消退，劳动力价格上升，企业的成本将逐渐升高，倒逼管理者使用系统和工具来提率；另一方面，在收入端，野蛮增长的时代结束，增量经济转向存量经济，红利经济转向效率经济。
在「成本」与「效率」的双重压力下，再加上整个市场经济的下行周期，整体经济出现下滑，而一些依靠融资的互联网公司将难以为继。因此企业不得不寻找方法来提升效率，降低成本——而这正是企业级软件（ToB 产品）最擅长的地方。
因此，在互联网寒冬之下，ToB 市场便理所应当地开始被重视。
让我们纵观整个中国市场的发展，互联网的兴起虽然促进了消费领域的蓬勃发展，但产业领域的发展则因此受到了巨大制约。中国率先从消费端、从第三产业开始数字化，然而在第一、二产业的数字化进程似乎并不是很快。一个重要的原因是，人口红利促使了消费互联网的快速发展，而这种红利让人们忽视了产业互联网的重要性。
在寒冬之下，我们终于发现，消费互联网蓬勃的基石，正是底层坚实的产业互联网。产业互联网如果不能得到有效的发展，则整个市场经济将无法更进一步地发展。
因此，产业互联网时代的到来，是中国互联网发展的需要，也将是大势所趋。
2. ToB市场将迎来机遇
产业互联网的发展，需要依托 B 端领域的发展，并逐步融入并带动整个产业进入互联网时代。那么，B 端产品在中国目前处于一个什么阶段呢？
对于整个中国的 ToB 行业发展现状，大多数的人并没有一个清晰的概念。盘点中美上市的科技公司会发现，美国 toC 领域与 toB 领域市值之比是 6:4，但在中国这个数字是 20:1。
虽然互联网的整体环境不同，但中国 ToB 行业的发展，显然是落后太多了。于是乎，2018 年开始，BAT 大举布局，PE、VC 加速进场——中国 B 端产品已经逐渐进入必须发展的时候了。
中国市场已经坐拥全球最发达的消费互联网体系，而产业互联网的发展却严重滞后。
同时，对比 B 端中云计算领域的 IaaS、PaaS、SaaS 三层架构，全球市场中 SaaS 占据了 52.5% 的份额，在中国却是 IaaS 分走了最大的蛋糕，占比达 61.2%。中国市场 VC 的投资总额已经与美国相当，在 SaaS 领域美国企业获得了全球 70.1% 的融资，而中国只有 11.7%。
因此，在互联网下半场，相对于 ToC 行业的触顶，ToB 行业将会迎来历史级的发展机遇，随之而来的将会是产业互联网时代的逐渐到来。而在整个 B 端产品的类目中，SaaS 产品作为企业级软件中最集成的产品，也将随着这股浪潮迎来爆发式的增长。
什么是 SaaS 产品？很多同学并没有接触过 B 端行业，平时用到的也都是 C 端产品，所以对 B 端产品的了解比较少。在 B 端行业最热门的云计算领域中，目前普遍会分为三层架构。SaaS（Software as a Service–软件即服务）；PaaS（Platform as a Service–平台即服务） ；IaaS（Infrastructure as a Service–基础架构即服务）。
附：云计算领域，三种不同的架构与对应的服务。
PaaS 基于 IaaS 实现，SaaS 的服务层次又在 PaaS 之上，三者分别面对不同的需求。越往上层，产品的集成度越高，提供的服务也就越丰富，而用户所需要的自行解决的东西就越少。而最顶层的 SaaS 产品，便是用户可以直接购买并使用的云端产品。
我们为什么要了解这些趋势？
因为一个新的时代，对应一场变革，也将成为一次新的机会。不管是 SaaS 产品还是其他 B 端产品，都将在新的时代中逐渐得到重视。而 C 端产品的发展策略，也将迎来新的变化。对于许多设计师来说，这将会是一个新的机遇。
顺势而为，方能乘势而上。
那么，在逐渐到来的产业互联网时代，设计师需要注意哪些东西？设计思维又将进行如何转变？
产业互联网时代，意味着 B 端产品将得到重视，并与 C 端产品逐渐趋于平衡。因此，了解设计思维的变化，我们首先要从 B 端与 C 端产品之间，在产品设计与产品策略之间的差异性说起。
1. 服务对象的差异性
从服务对象来看，C 端产品的服务对象是人，产品的目标是针对人们生活方式进行的变革、升级。而 B 端产品的服务对象则大多是企业，目标是帮助企业进行商业效率的提升，从而产生价值。
服务对象的差异性，决定了产品在发展策略也将存在着较大的差异性。
2. 产品「打法」上的差异性
从宏观的打法上看，消费互联网时代会更求「快」，而产品互联网时代则会更偏「稳」。
C 端产品的服务对象是人，而人的需求在个体差异性上相对变化较小，这就决定了 C 端产品通常都拥有广阔的用户市场。
因此，消费互联网时代就像是资本在辽阔平原的角逐，长驱直入。讲究快速占领市场，不断地试错、不断地调整。从团购到直播，从打车到短视频领域的兴起，再到最后的单车大战落幕。消费互联网时代的每一次风口，都伴随着各种「游击战」式的竞争。入场速度、快速调整能力、资本深度，都直接影响了最后的结果，而最终的结果也往往是胜者为王，败者将快速地被市场淘汰。
B 端产品的服务对象是企业，而企业间的需求差异性则非常巨大，这就决定了 B 端产品通常需要较强的纵深能力。相对应的，其用户群体在总量上就比较小、但也相对稳固。
因此，产业互联网就像在崎岖丛林的蹒跚前行，渐次演进，如同一场旷日持久的拉锯战。一方面，产业互联网的链条非常长，需要长期的深耕、积累才能逐渐站稳脚跟。而这也导致了产品的壁垒足够深厚，同类产品在短期内无法快速跟进。另一方面，企业间的差距需求的差异性非常大，因此产业互联网存在非常多的细分市场，不同的产品各自在不同的赛道中深耕。而其最终的结果往往是百花齐放，各自盛开。
3. 整体行业的协同发展
虽然整个市场都不断地强调——ToC 增长触顶，ToB 是一片蓝海。但这并非是「取而代之」，而是逐渐走向整体的「协调发展」。中国 ToB 的发展的一个重要根基，其实是「中国拥有世界上最成熟的消费互联网体系」这一巨大的优势。
因此，ToC 在很长的时间内，仍然会是互联网的主力，而 ToC 市场的转型，也将有赖于 ToB 产品所提供的服务。
而随着中国将「互联网+」政策上升为国家战略，更是明确了以互联网带动传统产业的发展方向。因此，互联网的下半场，即产业互联网时代的最终形态，将是互联网与传统行业的「融合式发展」。
ToB 产品将会成为带动互联网下一轮发展的核心驱动力。一方面帮助 ToC 领域完成转型，进入更健康、更稳健的发展阶段；另一方向，ToB 领域赋能传统产业与互联网相融合，并最终完成产业升级。
4. 产品形态的融合与趋同
整体产业的融合趋同，意味着产品的特性也将互相融合。一个很重要的现象是：C 端产品逐渐变得不那么 C 端了，而 B 端产品也越来越变得不像 B 端了。
比如 C 端产品的主流赛道中，随着头部产品的赛道日渐趋于稳定，其产品体量也因为业务扩展而不断增加。同时，因为产品体系的逐渐形成，为了服务更多的 C 端用户，会有越来越多的 B 类用户进入平台，而为了满足 B 类商家的需求，产品的 B 端属性变得越来越强了。
而随着 B 端产品的不断受到重视，原先不被重视的产品 UI、用户体验也逐渐在 B 端产品中得到加强。B 端用户虽然服务于 B 端，但使用者终究是人。而随着竞争的不断加剧，原来的「重功能、轻体验」思路逐渐式微。我们逐渐发现，许多 B 端产品长得越来越像 C 端产品了，甚至在 UI 和体验层面做的与 C 端产品不相上下。
因此，随着产品属性的融合趋同，意味着设计思维势必会与消费者互联网时代存在差异。而我们的设计思维将不仅仅局限在诞生于消费互联网时代的「用户体验思维」。我们需要更新的、更广阔的设计思维，以满足下一个时代的产品发展需要。
那么，新的思维是什么？它将从何而来？
从整个市场的协同发展，到产品形态的融合趋同。那么，我们的设计思维需要如何进行相应的变化？是同样进行「融合趋同」，还是另辟蹊径，寻求新的视角？
1. 关键词提取
首先，不管设计思维如何变化，它一定需要同时满足两种产品设计思维的特性。通过前文的分析，我们可以在产品设计特性的维度，提取各自的关键词进行分析：
产品体验：诞生于消费互联网时代的用户体验思维，在产业互联网时代依然是产品设计中最重要的部分。无论是 C 端还是 B 端产品，用户体验必然是产品的核心竞争力，只有足够好用、好看，产品才能获得更多用户，最终获得商业上的成功。
灵活性：在消费互联网时代，在激烈的竞争中，C 端产品的灵活性的打法对于产品的突围至关重要。而未来的 B 端产品竞争将会加剧，这就需要 B 端产品也逐渐需要较强的灵活性。
成长性：产品的发展必将伴随着不断的变化，特别是具有一定体量之后，产品设计的成长性将至关重要。因此，产品的设计是否能够预见未来发展，满足不断变化的产品形态，伴随着产品不断地成长，也将成为产品是否能够持续获得成功的关键因素。
产品效率：因为产品服务对象的关系，B 端产品一直是产品效率的代名词。而在人口红利消失与经济下行的压力下，产品效率将成为所有企业关注的重要因素之一。产品的效率不仅影响着企业的成本，也是产品竞争力的重要体现。
这四个关键词，将会是我们在未来所需要关注的四个重点关键词。越是往左，则「C」属性越强，因为它更多地从用户的角度出发，更关注用户体验。而越是往右，则「B」属性越强，因为它更多地从企业的角度出发，更关注企业的长期发展。
2. 跳出单一层面，寻求新视角
在四个关键词中，我们会发现，特性越是靠右，其所需要的整体性就越强。要满足灵活性，就需要用户体验与产品策略相关联。要满足成长性，则要进一步结合底层的开发能力。而产品效率的提升，则需要产品的设计与不同层面都有着紧密的耦合。
在互联网设计发展的过程中，我们从单点只关注视觉表层的「美工时代」，逐渐发展为关注线性的「用户体验思维」。在对于产品用户体验层面，确实有着长足的发展。
但是，单一层面的用户体验思维，在逐渐成熟的互联网时代中，逐渐显示出了一定的局限性。我们的价值局限于单一的体验层面，我们似乎无法对产品形成更大的影响力，也难以为产品带来体验之外的更多价值。
因此，设计思维想要满足新时代的需求，就需要同时满足前文提到的四个关键词。这就要求我们需要跳出单一层面，以全局的维度去思考产品的设计。
因此，全局性将成为未来的关键，我暂且将这种思维方式称为——全局性设计思维。
全局性设计思维，即在设计过程中，始终能以更高的维度去审视全局，思考当下的设计。
何以全局，如何跳出单一层面？这种思维方式的前提，是你要首先了解整个产品（亦或是物体、组织等）的运行方式，清楚的知道整个产品需要达到的目标，从而准确、合理地对针对目前的局部做出设计，并最终构成整个完整的形态。
而「全局」的前提，是你拥有更高的眼界。你的眼界越高，你对产品、市场、甚至整个社会的洞察就越全面，你就能够解决越大的问题，你能够实现的价值就越高。眼界是基础，解决更大的问题是目标，而全局性设计思维则是实现这个目标的方式与过程。
全局性设计思维，可以帮助我们跳出产品的单一层面，去思考从产品层、到体验层、再到开发层这一完成的整体。让设计满足体验层的同时，满足产品层面的目标，同时让产品的设计与开发高度耦合，将整个产品串联成一个完成的整体。
好了，讲了这么多，我们具体应该如何去运用全局性设计思维呢？
全局性设计思维，的应用方式非常广泛。它并不是一个固定的方程式，而是一个更高层面的指导性设计思维，能够通过不同的形式，来帮助你解决问题。
1. 全局观——在生活思考更多可能
在尝试这种思维之初，我们可以通过一些小的实践，去锻炼这种思维能力。
在日常的生活、工作中，其实我们有大量的事物可以练习和运用这种思维方式。比如你在装修一个大房子，需要去选择房子里的家具。当你在购买家具时，常规的思维方式是：这个家具在某个房间时应该是怎样搭配的，所以我要购买什么样形状、颜色的家具，来满足这个房间的需要。
但是，用这么思维方式来购买家具，将为对家具的灵活性与长期价值造成一定影响。从居住环境的长远来看，也许这个家具有可能会因为某些原因，需要放到另一个房间，而它的形状、尺寸、配色却无法满足其他房间的需要。最终，我们只能重新购买，或者接受一个风格、尺寸上并不搭调的房间出现。
因此，当我们在购买家具时，我们是否可以利用全局性设计思维，从整体空间的角度出发（而非单个房间），去思考如何让家具满足更多空间需求。长此以往，我们不仅可以打造一个风格统一的大空间，同时也能增加每个家具的利用率，在无形中也增加了这个家具本身的价值。
之所以举家具这个例子，是因为这个原理与产品设计的原理非常类似。你可以将这个房子看成是整个产品，而家具则是不同的组件。通过不同的家具（组件），构成了我们的不同功能模块（房间/功能区），而所有的功能模块则构成了整个产品（房子）。
房子（产品体量）越大，房间/功能区（功能模块）就越多，家具（组件）的多样性、复杂性就越高，我们就越是需要从全局的角度去思考装修的统一性（风格体系化）和家具的通用性（样式组件化）。只有这样，我们才能更好地去打造一个风格统一、体验一致，同时又具备足够自由调整空间的「大房子」。
2. 全链路——从全流程中重新思考设计
当你仔细地去理解许多非常著名的设计作品时。你会发现，几乎所有优秀的、巧妙的设计，往往在设计中都体现了全局性的设计思维。它不仅仅解决着当前的问题，同时也能够解决更大的问题，发挥巨大的价值。
比如著名的坂茂卫生纸的设计，看似普通，只是将卫生纸的轴心从圆形改成了方形，但它却成为了举世闻名的、公认的好的设计。为什么呢？
我们先了解一下这个设计为什么好。
首先，传统的圆形纸卷拉出来的纸会比你实际需要的更多。而方形纸卷则由于阻力的作用，让你用得更少，从而起到了解决资源的作用。其次，在运输过程中，圆形的纸卷之间会产生很大的空隙，而方形纸卷则能够紧紧靠在一起，提升空间利用率，从而起到降低运输成本的作用。
这简单的设计，居然发挥了如此大的作用。
那么，为什么我们在设计时就没有考虑到这些问题呢？因为我们从最开始，就没有从「纸」的整个全流程来去思考问题。
让我们「站的更远一些」，纸这个商品，并非只是我们见到的在商店售卖的那一刻。它从工厂中制造完成，通过运输送到每个超市中，当我们购买以后，它又会在很长一段时间内，出现在卫生间，陪伴你使用的每一刻。我们可以将整个流程分为 3 个场景，而每个不同的场景，又将会对纸本身有着不同的影响。
当我们能够考虑到卫生纸的运输过程时，我们就可以通过设计去降低运输成本；而当我们可以考虑到用户的使用场景时，我们就可以通过设计，去提升阻力，降低使用量，间接地去提升用户的使用体验。而当我们通过全局性设计思维，可以同时解决这三个问题时，我们的设计就是好的设计，就拥有了更高的价值。
发现了吗，为什么你没有想到相同的设计方案？设计能力并不是关键，设计思维才是指引你做出好的设计的前提。当你能按上述的方式，去思考整个流程、不同的场景，我相信大多数的人都能够设计出坂茂的设计方案，甚至比这个方案更好的解决方式。
通过前面的两个案例，相信大家已经了解了全局观、全链路两种应用方式。
那么，我们最最最关心的问题——如何在业务中去使用这种思维呢？
在产品设计中，全局性设计思维也有着非常多样化的使用方式和场景，在之后的文章中我也会讲到很多应用方式。但是，在所有的方式中，我认为最为有效的，便是以全局性设计思维，帮助产品去构建一个完整的设计体系。
什么是设计体系？谈及设计体系，大多数设计师会认为，设计体系就是设计规范。「不就是找个名次包装一下规范嘛？」
我们为什么需要设计体系？它与设计规范有何不同呢？
设计规范是设计师最为熟悉的一种规范文档。在产品设计时，优秀的设计师通常都会建立设计规范。然而在实际的项目中，设计规范往往无法难以有效实施。比如在开发眼中，规范并不符合开发规则，过于碎片化。而产品经理通常又不会去了解设计规范，因此在构建产品框架时也常常随意发挥。
很多项目做到最后，设计规范仅存在于纸面的意义，并随着项目的发展逐渐混乱。为什么会这样？
因为不同职能间的思考方式存在差别，设计规范对于其他职能来说经常难以理解与运用，无法与其他职能形成有效联动。
设计规范仅仅是基于视觉层面的规范，它是一个「平面」。而设计体系则是贯穿于产品的每个层面的、与产品深度结合的完整体系，它是「立体」的「有机生命体」。
设计体系的核心在于「体」，它是贯穿于整个产品的完整体系。设计体系由设计师创造，并深度融合于产品每个部分。它能够让产品更紧密、更统一、更有序，伴随着产品的生长，与产品共同进化，并最终推动产品的发展。
创造并推动这一体系，则要求设计师需要更全面的能力。只有充分地去理解并参与产品的每个部分的设计，才能让设计真正延伸至产品的每个部分。
而创造这一切的前提，便是全局性设计思维。
罗马不是一天建成的，设计体系也是如此。设计体系的建立是一个漫长的过程（与产品体量相关），需要在前期投入更多的精力。但若是你的方法得当，就会在项目中越来越轻松，并以此形成良性循环，而你也会越来越有成就感。
如何正确地去构建设计体系呢？我在这里总结了几个要点：
树立观念
首先，树立长期的体系化意识是必要前提。在任何项目中都要时刻保持体系化思维，着眼于整个项目，去寻找体系化的推动时机。当你在潜意识中拥有这种思维之后，你会自然而然的将其植入到设计中。
以解决问题为导向
体系化并非凭空建立，而是建立在解决问题的基础之上。设计体系的本质，就是由无数个标准化的解决方案，最终构成的一个完整的体系。因此，我们要以解决问题为导向，以全局性思维去思考问题的本质，最终建立适用于全局设计体系。
以小为始，重视质量
脚踏实地，从小处入手，去发现产品中最基础的一些问题。表面上看这些问题，对项目影响不大，但他们数量庞大，加在一起便会严重影响整个产品的效率。因此，我们要首先建立高品质的基础体系，再以此为基础构建更大的体系。
不要一开始就设法建立一个巨大的体系，那样只会是一盘散沙，因为它的结构是无序、混乱、不健康的。而这也是大多设计规范缺乏有效性和可实施性的根源。
梅拉妮·米歇尔的《复杂》一书中讲到，任何复杂系统，都是由无数个体通过简单的算法所构成的。在算法领域也是同样的原理，一个优秀而强大的代码，必然是由无数个小型模块，通过简单的算法耦合形成巨大的代码矩阵。基础算法越强大、代码结构越「健康」，可扩展性和灵活性就越强，其能力就越强大。
从规范入手，由面到体
从本质上来说，设计体系是由「多个层面的规范」组合而成的。因此，由设计师推动的体系化建设，往往最初都是从设计规范这一「单层规范」开始。但是，设计体系的建设需要将单层的规范，通过不同的方式，转化为不同层面的规范，最终由面到体，形成体系化。
换位思考，寻求跨职能合作
设计体系的建立与维护，通常需要多职能的通力协作。因此，我们需要经常换位思考，在完成设计的工作，帮助其他职能完成目标。只有这样，才能得到更多的信任，并以此为基础推动更多体系化的建设。
比如我在设计一个功能模块的页面时，首先会与不同模块产品经理进行交流，了解不同的业务需求，并从产品层面就开始寻求统一性与通用性。这样的话，当其他模块需要同一个功能时，前端便可以直接复用，同时后端的数据也可以进行互通。而在开发端，我也会详细了解不同端的开发实现原理，务求设计规范与开发规则在理解上的一致性。这一既方便了开发理解规范，同时也从根本上提升了开还原的准确性。
长此以往，整个团队就能够建立良好的沟通和互信关系。有了这种默契，设计体系的推动就容易多了。
保持优化，不断成长
设计体系的另一个重要价值在于，它是可以伴随产品不断成长的。所有产品都是在发展中不断变化的，过分僵硬的规则，将会对产品发展起到反作用。
在业务发展中，产品一定会不断地加入新的功能模块，并对原有页面作出相应的调整。因此，设计体系需要时刻与产品策略保持一致，及时与上下游职能沟通，不断地针对产品发展进行优化，以保证设计体系能够符合产品的发展需要。
使用正确的推动方式
体系化最终能否成功实施，推动的方式至关重要。
在日常的项目中，大多数的业务方对设计体系了解甚少，也难以体会其中的价值。因此，他们通常会认为这些东西毫无必要，多数情况也不太愿意配合体系的推进。如果强行推进，反而会引起不必要的阻力，招致反感。那么，我们应该如何正确的去推进设计体系建设呢？
为他人带来价值：首先，寻找双方共同的利益点是首要任务。也许是可以让其他职能的工作更，也许能够促使其达成 KPI，再不直接，那也一定能够为整个产品带来价值（不然你也没必要推了）。总之，设计体系一定要能够为他人带来价值，这样才能顺利推进。否则人家凭什么要协助你推进，因为你美丽可爱吗？你也可能比较可爱，但总归是不能一直这么来吧。
在解决问题后提出方案：不要一开始就啪一下抛出一个「宏大的理想」，大部分人会觉得你不切实际。你只需要通过这个体系，帮助业务方先解决一个问题，然后再提出你解决方式的来源——一个严谨的、可验证的、长远价值的体系化解决方案。
寻找合适的推动时间：最后，对于设计体系来说，寻找到正确、恰当的推进时机至关重要。比如当你在平时突然想要提出，对现有品牌进行升级时，大多数业务方都会认为你是没事找事。而如果情况是在新的一年中，产品进行了概念的升级，这时候你将概念以及未来的品牌规划融入在你的方案中，再去推进品牌升级，就会容易很多了。
-本文旨在引导大家更好地理解和学习这种思维方式，想要用好全局性设计思维，光靠讲是远远不够的。最重要的是能将这种思维带入到产品中，为业务带来更大的价值。
因此，在后续的几篇文章中，我将通过不同类型案例，为大家深入讲解全局性的具体实践案例。
全局性设计思维 | 如何打造强大的品牌体系
为什么要建立品牌体系？品牌体系有哪些价值？设计师应该如何推动品牌体系的建立？
本文将带你了解网易智慧企业品牌体系的建设与推动全过程，聊一聊品牌体系建设的那些事儿～
FishDesign组件库 | 从零到一构建企业级UI组件库
我们为什么要建立组件库？在产品的什么阶段需要组件库？如何抽象业务组件？组件库设计过程中有哪些重要的细节需要注意？
本文带你深入了解，网易 Web 端组件库——FishDesign 组件库从零到一的完整全过程。
全局性设计思维 | 如何构建事业部级大型设计体系
设计体系有什么价值？如何基于不同的业务建立设计体系？设计师如何推动体系化建设？在体系化过程中有哪些需要注意的地方？
我将会在这篇文章中，为大家介绍网易智慧企业设计体系构建全过程。
样式组件化+规范体系化，形成产品设计体系，整体重构产品线。
结合品牌体系，推动事业部更多产品加入体系，形成智慧企业 Web 端产品设计体系。
推动更多产品/业务融入体系中，让智慧企业设计体系不断成长，赋能业务发展。
好吧，似乎文章又写得偏长了一些。只能说，想要认真地讲清楚一个道理，确实不是一件容易的事情。
设计思维本身并不复杂，但想要讲清楚它的背景、原理及价值，就需要把它整个掰开来讲。而为了确保设计思维的可实施性，又需要经过大量的实践研究，自己能够走通以后，才能与大家分享。
坦白讲，似乎整个社会都在追求快节奏、碎片化阅读。但若是因此而丧失了自己学习的节奏，那么等于是没有节奏的，你的知识体系也将是东拼西凑，无法形成一套完整的体系。这也是我更新比较慢的原因之一，希望大家读完文章，能够切实地得到一些东西，这就很有意义。
文章来源：优设 作者：Jady13
QQ 游戏中心经过设计改版之后，我们重新设定了整体的世界观——多彩的游戏宇宙。并且对多个模块及内容进行了新的设计升级，其中也包括重要的图标图形。
1. 延展思考
因此基于目前较为完整的图标图形，希望可以拓展出更多不一样的设计内容，并且可以应用在不同的位置，例如空白页、运营内容、背景等等。
2. 问题分析
基于目前的图形可以很明显的得到 2 个问题：
3. 设计启发
3D作为 2020 的主流设计趋势之一，可以很好地表达设计氛围。因此想尝试跨次元的设计方式，从 3D 图形的角度去思考，尝试更多可能性。
下面主要是分享我在制作 3D 图标中的一些方法和流程，以及 2D 与 3D 图形设计中思考的差异性，希望可以跟大家互相学习，一起探讨这方面的设计。
虽然是 3D 的图标，但实际上使用到的软件包括有：Cinema 4D（C4D）、Sketch、Photoshop（PS）、illustrator（AI）。
整体的大概流程：
3D 与 2D 最大的差别在于多一个维度来表达图形，因此我们在 2D 向 3D 转化的过程中，需要思考一些基本的原则，并且结合这些规则，降低 3D 图标与 2D 图标违和感。在这次的 3D 图标中我总结了以下几条基本规则。
1. 圆变球
在 3D 软件中表达圆有 2 种方式：球体、圆柱体。在实际的设计中，我们需要根据实际情况判断是否变成球体或者圆柱体，这里建议单体呈现的圆形设计成球体，在这种情况下球体相比圆柱体更能表达圆形的视觉感受。
例如下面气泡的例子，球体化的表现比圆柱体化的表现更加饱满，光影效果更加丰富。
2. 方变块
与上面的规则比较接近。当我们在 2D 图标中使用矩形之类的图形，建议使用立方体来表达。优点：立方体可以增加图标上的细节表现；增加厚度更有利于光影的表达。
例如下面礼物的图标，我们在实际的 3D 场景下应该更贴合现实生活中的认知，设计成礼物盒子的效果。
3. 结合实际认知
除以上的 2 种建议之外，我们在实际建模的时候还需要结合实际认知而定。例如金币、游戏卡的设计应该是带有厚度的片形；钱包设计成折叠的效果。
4. 适当简化图形
2D 图标向 3D 图标的转换过程中，需要适当进行简化，一些不必要的内容可以适当进行删减。主要的目的是：
5. 增强空间思维
2D 的图标只有一个平面，因此大部分情况下是一种「纸片性」的思维，常规的 2D 向 3D 的转换思维是增加厚度，但实际上出来的效果并不理想。因此在转换的过程中，需要使用空间的思维去思考，在 3 维的空间中应该是怎么样的。例如下载和收件箱的图标，常规的思维可能是在 2D 的图标上增加厚度，但转换成空间思维就是让其具有立体感和空间感的形体。
6. 图标状态补充
在实际建模的中会发现，很多模型在静态下是可以进行简单处理的，但结合动态或实际认知，就需要相关细节状态补充。例如礼物和宝箱图标的开盖效果，因此把实际的盖子和盒子/箱子的模型做出来，以便于动画的实际表达。
在进入 C4D 之前，需要清楚不同图形可以使用什么方式建模，因此我们可以进行一个简单的分类，分为：常规图形和异形。两种图形在建模中的方式会有一些小差异，当然一个图标也可能包含这两种类型，因此实际操作中可以灵活处理。
1. 常规形：使用基础物体建模
部分简单的有规则的图形，可以直接使用 C4D 的基础物体（例如：立方体、球体、柱状体、锥体等），通过对基础物体的调整后得到模型，例如下面的图形。
案例展示
2. 异形：AI路径+挤出
在实际操作的过程中发现部分模型较难通过基础形调整得到，或是直接建模会比较耗时。因此我们可以导入 AI 路径再挤出的方式来得到我们的模型。例如下面的图形
案例展示
基于以上的以上 2 种类型的图形，这里分享一下制作的过程和心得。可能不够全面，但希望大家可以一起来补充互相学习。
1. 对齐中心点
基础建模对齐中心轴点是一切开始的重中之重，这里会涉及到很多后续的调整和其他命令的应用（例如挤出、对称等命令）。例如一些中高阶的人物建模也是非常依赖中心点对齐来实现对称命令的。
2. 结合图像
在 C4D 视图本身具有多视图，可以结合不同视图导入不同视角的平面结构进行制作，常见情况下的建模可以导入三视图（例如角色、人物之类的）。而图标相对来说是很简单的，所以这里只应用正面视图即可，其他的视角可以自行脑补后制作。
结合图像的好处：
操作流程：正视图下快捷键 shift+V 调出视图背景——选择背景——添加图像。或在视图选项中调出，然后配置即可。
3. 结合路径
如上图标类型中的描述，部分异形的图标如果直接在 C4D 中绘制会相对耗时，因此我们可以结合路径的方式，再使用挤出的命令来实现我们想要的模型，这样可以大大提升异形物体建模的效率。
C4D 中对 AI 的图层只会读取颜色的边缘，然后生成路径。因此在 AI 中编辑的路径，依据实际的情况选择填充或者描边，然后再拖拽进 C4D。如下产生的效果对比，左边为填充图形，右边为描边图形。
操作流程：使用 AI 导出 8.0 版本的路径——拖拽进 C4D——添加挤出命令——设置挤出高度及封顶样式。
4. 使用变形器
一些简单的形变可以通过变形器的应用，得到我们想要的造型。例如下面的案例，外星人脸是在圆形的基础上使用 FFD 进行调整，而宝箱则在方形的基础上使用锥化来达到圆弧的效果。
C4D 的渲染效果主要是依赖于材质和灯光的配合，熟练者往往可以依靠经验有效率的制作，但我们也可以通过锻炼总结出一些常用的材质参数或者布光的位置来提率。因此我也从这次的 3D 图标制作中总结了一套关于材质和布光的方法。
C4D 场景的主光源我们可以通过全局光照+天空的方式来营造整体的氛围，这组光的特点在于具有比较柔和的效果，并且模拟自然的环境光效。
全局光照开启后，需要依赖灯光、天空光来对物体进行照射，如果设定后未增加灯光或者天空，在渲染时只能渲染出一片黑色。（全局光照——主要是模拟真实的光照效果，通过光源投射到物体上再经过无数次的反射和折射出来的效果，因此也能解释为什么只加全局光照渲染不出来内容。）
操作流程：渲染设置——效果——全局光照
添加天空增加天空作为基础光照补充
操作流程：地面快捷入口——选择天空——添加材质球——勾选发光——添加 HDR 贴图。
下面通过一些案例对比来看看全局光照及天空的对比效果
全局光照-开和关的差异
从下面的案例我们可以明显看到差别，全局光照关闭后的图标相对暗淡一些，整体图标的光反射也相对减弱了许多。
有无天空的差异
天空有助于增强图标的光感，添加天空后整体图标的细节和质感也相对更加丰富。相对，无天空整体图标质感则有所下降。
天空是否增加HDR贴图的差异
添加 HDR 贴图可以增强场景内物体的环境反射，让物体材质更加丰富增强细节质感。在一些强反射的场景下非常依赖 HDR 贴图的使用。从以下案例对比，可以明显看到差异性。
整体添加三盏灯光来营造整体的场景氛围。主要分为：主光（最强）、补光（增强阴影面的亮度）、背光（补充背面环境的光源，增强环境光氛围，勾勒轮廓）。在实际的场景中可以根据实际的反射效果和氛围，调整灯光的位置、与物体的间距、明暗度。
灯光对于物体的作用会随着颜色的差异，产生的光亮度也会有所差异，因此在实际的使用过程中，对于灯光的位置、反射的细节都可以进行微调来达到最优的效果。
色相的对比：不同色相在同样的灯光作用下产生的效果具有稍微较小。
明暗的对比：深色和浅色在同样的灯光作用下产生的效果差别较大。
实际案例对比：从下面的实际案例对比可以明显看出同样灯光下不同色相的明显差别，绿色的两部产生过度曝光。因此可以通过调整灯光的距离或者亮度来解决这一问题（如上面灯光分布建议）。
3D 图标由于相对简单，材质上主要使用颜色和反射的配合就可以得到不错的质感。当然如果希望在质感表现上更加丰富，亦可考虑增加其他的内容项来进行补充
颜色的设定
图标的颜色基本上与原图标的颜色保持一致，但部分颜色但实际渲染效果会存在些许差异，因此我们在材质上也可以根据视觉效果进行微调，视觉上保持统一的颜色感受。例如礼物的图标，如果按原来的颜色，亮部会过渡曝光，因此适当提高了亮部颜色的饱和度。
颜色偏差
在 3D 的场景内是通过各种光与颜色的反射而成的，因此即便同样的颜色，在实际渲染出来的 3D 图标和 2D 图标也会存在一定颜色偏差。
反射是本次 3D 图标中材质非常重要的一环，基本的效果都是来源于对反射的设定。整体主要设定了反射的类型、粗糙度、反射强度、高光强度、层遮罩的颜色。由于图标的颜色并不完全一致，因此在粗糙度、反射强度、高光强度是一组动态的参数。
参数变化的对比
如下面的案例，针对不同颜色的图标在粗糙度、反射强度、高光强度上都有差异性，因此不是说设定好一组参数之后就那个完全适用所有的颜色，因此这里会根据实际情况调整，但整体的视觉效果保持一致。
层遮罩的设定差异
除了基础的反射类型及参数，还需要在层遮罩中添加菲涅耳来增强反射的丰富度。默认的菲涅尔是一组黑白的颜色材质，我们可以通过调整暗部的颜色来增强图标的颜色饱和度和丰富度，如下案例对比。
静态的 3D 图标显得精致，增加动效之后的 3D 图标则除精致外，还更加富有趣味性和新鲜感。3D 的动效与 2D 有着明显的差别，可以更多维度地思考物体的运动轨迹、变化方式。
首先我们需要根据不同造型对需要制作动效的图标进行简单的分类，这个分类的主要作用在于明确不同图标的动效设计方式，为动效的设计方式进行铺垫。根据已有的图标划分为：单体形、组合型、拼装形。
单体形
图标以单个或单组形体呈现，或者整体造型属于某个已存在的事物或者形体，整体图形内容具有不可切割性。
组合型
图标通过两组或两组以上的图形内容组合而成，图标由主形（图标实际的外轮廓造型）和点缀图形（用于图标表意或者提升图形内涵）组合而成的图标，图标可进行拆分或者重组后形成动效。
拼装形
图标本身可能在现实中不存在的事物或物体，通过创意思考而得到的图形，图标的动效更具有可发散性和可重塑性。
结合上面的类型差，在设计动效的时候也会稍稍不同。重点在于表达不同的图标具有的特性，因此我们可以根据这些特性去设计图标的动画方式。
自体运动
对应单体图形，图标动效通过自身的位移、旋转、形变而产生，这类图标的动效比较靠近现实生活中接触的感知或图形动效本身具有普适性认知。例如火箭升空、UFO 飞碟、放礼炮、开宝箱等。
组合运动
对应组合图形和拼装图形，多图形运动组合而成，图标的多个部件可从不同轴向开始进行不同的轨迹运动，最终进行完整的图标融合。各个部件本身可能也存在位移、旋转、形变等动效，可以更大程度丰富图标的动效表现。
部件运动
整体动效相比前面两种类型较为简单，通过某个图标上的部件运动来表达动效的内容，因此这个部件需要是图标上较为明显的图标特征，这样更能让人具有记忆点。
音效是这次 3D 图标设计的点睛之笔，结合音效可以更加丰富地表达图标动效的趣味性。不同的图标动画反馈出来的音效是不一样的，因此赋予对应的音效反馈才是更合理的表达。
1. 选择音效
在实际的配置音效的过程中发现，部分图标比较难找到相关联的音效。但我们可以通过较为类似或者可以表达出该图标动画过程中的声音反馈的音效。例如活动小礼炮用的是开葡萄酒塞的声音，开宝箱用的是开门的声音，飞碟（UFO）用的是一组电子音效等等，并且从相关声音中窃取其中一段需要的。
2. 组合音效
部分图标的动画效果很难通过一条音效进行表达，因此需要叠加 2 组或者 2 组以上的音效来丰富整体的感受。例如手柄人图标叠加了三组不同的音效来表达，游戏卡叠加 2 种不同的音效。
3D 的图标或 3D 类型的内容如何与 UI 结合？相信大家也时有思考这方面的内容。基于这次的 3D 图标设计，我也进行了初步的尝试，从几个方面来简单聊聊这方面的内容。
1. 3D图标对于UI设计的作用
在尝试之前，我们需要明确 3D 内容对于 UI 设计作用是什么？我简单总结了几个关键点：
2. 3D ICON X Tab bar
当我们设计 Tabbar 的时候，首先想到的表现方式往往是有趣的图标图形设计、结合动效之类的方式。但我们或许也可以考虑使用 3D 的图标+动画的方式来表达我们的设计。
3. 3D ICON X 运营内容
一些相对简单的运营内容，我们可以考虑将元素进行 3D 化设计，这样可以一定程度增强整体运营的视觉表现力。
4. 3D ICON X 空白页插图
3D 插图是 2020 的设计趋势之一，结合 3D 的插图让整体的设计更加具有氛围感。
5. 3D ICON X COVER
将背景中的某些元素结合 3D 图形进行设计，让整体的氛围更加具有空间感和立体感。
本次结合实际项目中的内容进行不同维度的设计尝试，并且希望，可以从中去寻找到更多设计的可能性和突破点。当然这只是系统化设计思考中的一步，但可以启发后续更加深入的 3D 设计探索。
文章来源：优设 作者：ID设计站
这次我们不聊视觉，也不畅想未来，只说说当下 HMI 产品设计与交互体验。
本文内容会涉及一些专业的汽车知识名词，因为篇幅有限，如有些知识名词不太明白可以百度一下。
说到 HMI 大多数设计师应该是既熟悉又陌生，HMI 是 Human Machine Interface 的缩写，「人机接口」，也叫人机界面，人机界面（又称用户界面或使用者界面）是系统和用户之间进行交互和信息交换的媒介， 它实现信息的内部形式与人类可以接受形式之间的转换，凡参与人机信息交流的领域都存在着人机界面。
听起来是不是觉得这不就是 UI 吗？有什么区别吗？似乎差不多，几乎是没有区别的，只不过是在某些场合和设备上管他叫 UI，比如移动端设备，而在另外某些场所和设备上管他就叫 HMI，比如汽车车机和数控机床。所以这个概念也不用去特别较真，HMI 就权当作是汽车上的 UI 界面吧。毕竟汽车是高科技与工业结合的完美产物，「HMI」念出这个词时候就感觉是蛮专业的！很般配！
刚才说 HMI 最早更应用于工业上，比如常见的各种机床、制造装备。
或者说让时间再向前推进一点！
而这里通常意义的 HMI 则更加聚焦点，基本特指汽车车机或者车载多媒体设备。
说到这里还是要从车载仪表盘说起，从德国人卡尔·本茨发明世界第一辆汽车，距今已经 100 多年的时间了，在那些还没有 HMI 这个名词的年代，那么他是以什么形态出现的？那就不得不提「仪表盘」了。
当然写这篇文章并不是去评测谁家 HMI 更优秀，而是希望通过一些假设、实验和推断，和大家一起来探讨一下如何更有效地设计 HMI。
屏幕越大越好？车内到底需要几块屏幕？
我们先从屏幕开始。
说到屏幕，设计师都是比较敏感的，因为我们最终的设计交互创意都是需要都是在屏幕上显示展示出来的，HMI 当然也不例外。现在在车载屏幕上你能看到最大尺寸多大？
拿特斯拉为例，Model S 和 Model X 车型都是 17英寸，Model 3 为 15 英尺。
当然他肯定不是最大的，熟悉汽车朋友你应该知道我想说谁了，没错就是他！拥有 48 寸可多段升降屏幕的 BYTON 新能源概念车 M-Byte！48 寸的确很夸张，难道屏幕越来越大就是未来 HMI 的方向吗？
当然这个问题肯定是否定的，为什么？那就要从车载屏幕的作用来说起。
首先我是作为一个曾经就职于汽车公司的设计师，并且是一名地道的汽车发烧友，凭借对汽车还算熟悉和热爱做出一些产品交互分析，以下如有不妥之处还望海涵。
按照功能场景总体可分为三类：主行驶状态信息、附设备状态信息、多媒体 & 外设
不可缺少还需要与使用者、场景结合，我们先来做一个大概的用户画像。
对应这些需求，汽车需要有仪表台（屏）控制和显示的区域有五个。
五个区域分别是：
其中前三个是主流配置，后两个比较少见。
关于汽车设备这块我们不做深入展开了，毕竟这篇文章主要讨论的还是设计，直接看结果！
题外音：屏幕安全性的考量
汽车是比较特殊的设备，基于安全性考虑，汽车内屏幕尺寸不宜太大与太多。
屏幕总体为玻璃材质，但与车窗挡风玻璃的材质不同，当汽车遭遇碰撞的时候，车内屏幕极易破损并形成尖锐物，极大可能会乘坐人员造成二次伤害，所以车内屏幕不易太多，更不易太大。虽然车载屏幕变大变多已不可逆转，而且随着屏幕技术的提升，柔性 OLED 的应用也将会在一定范围解决安全问题。但也需要汽车相关设计者多在安全方面进行考虑，任何产品体验应该建立在安全基础之上的，特别是交通工具。
为什么大屏幕操控成为了当前的 HMI 主流了呢？那不得不去提一下另外一个我们熟悉的设备——手机！
同样一个有限的区域，如果用物理按键那么这个区域只能是固定的功能，而屏幕就可以无限扩展。特别是在汽车中控屏上集成内容会很多，体现就更加突出。
但是在汽车上的全部使用屏幕真的是最佳选择吗？显然这是有待商榷的。
不可否认屏幕的确有很强的扩展性，但是缺点也是明显的：1.触控反馈缺乏 2.交互效率不高
对于这样的判断，我们可以通过两个实验来进行验证。
将类似于 Surface Dial 这种智能按钮交互装置引入汽车的屏幕控制中，每个按钮可以根据情景进行自定义，并且吸附到汽车屏幕的任何位置进行交互操作，相信这一定是一种全新的使用体验。当然这一定是需要解决比如吸附力、安全性等一系列问题。
虽然目前的屏幕还无法做到完美触控反馈，但已经出现了一些新的硬件技术来试图解决这些问题，比如 Tanvas Touch，其定义为 「手指与触摸界面之间的电子压力控制」。简单来说他们的产品就 「皮肤的磁铁」 一样，能够更加精准地感应手指的动作，最后结果就是比 Apple 的 3D Touch 更加具有压感的触摸操作表现。
原理是利用手指尖触摸显示屏时产生的静电引力来模拟触感，通过电磁脉冲把更的反馈发送到用户的指尖。
Tanvas 也正在与汽车制造商们合作把这项技术嵌入到汽车或屏幕上，让人们更容易感触受到不同物体的表面。
也许在未来我们真的会遇到他。
文章来源：优设 作者：残酷de乐章
坐标系是能够使每个数组在维度空间内找到映射关系的定位系统，更偏向数学/物理概念。在数据可视化中，最常用的坐标系分为笛卡尔坐标系和极坐标系，本文介绍的坐标轴设计主要也是围绕直角坐标系展开。
在说坐标轴之前先来介绍下什么是坐标系。坐标系是能够使每个数组在维度空间内找到映射关系的定位系统，更偏向数学/物理概念。
维基百科对坐标系的定义是：对于一个 n 维系统，能够使每一个点和一组 n 个标量构成一一对应的系统，它可以用一个有序多元组表示一个点的位置。
数据可视化中，最常用的坐标系有两种：笛卡尔坐标系和极坐标系，均为二维坐标系。
下文介绍的坐标轴设计主要也是围绕直角坐标系展开，用到极坐标系的图表有饼图、圆环图、雷达图等。
坐标轴是坐标系的构成部分，是定义域轴和值域轴的统称。系的范围更大，而轴包含在系的概念里。由于可视化图表绘制的数据大部分都有一定的现实意义，因此我们可以根据坐标轴对应的变量是连续数据还是离散数据，将坐标轴分成连续轴、时间轴、分类轴三大类。轴的类型不同在设计处理上也有差异。
介绍坐标轴设计前，我们先将坐标轴拆分成「原子」要素，具体分为轴线、轴刻度、轴标签、轴标题/单位、网格线。
根据坐标轴的构成，分类讨论下每个构成要素容易被忽视的设计细节。
轴线一般只考虑是否显示，例如柱状图、折线图等，在有背景网格线的情况下，会隐藏 y 轴线，条形图则是隐藏 x 轴线，以达到信息降噪，突出视觉重点的目的。
轴刻度通常不显示，只有在肉眼无法定位到某个标签对应的数据点时，会显示刻度线，辅助用户定位，比如折线图，或抽样显示的柱状图。
网格线用于定位数据点的值域范围，跟随值域轴的位置单向显示，柱状图采用水平网格，条形图采用垂直网格。样式为虚实线的最多，斑马线由于感知过强，一般不用。
轴标题/单位主要用于说明定义域轴、值域轴的数据含义。当可视化图表标题、图例、轴标签已经能充分表达数据含义，无需单独显示标题/单位，「如无必要，勿增实体」。
轴标签的设计就比较复杂，涉及到的细节点很多，而且对于定义域轴和值域轴上的标签和单位设计要考虑的细节点还有差异。下文将定义域轴和值域轴看成 x 轴和 y 轴，便于说明。
x 轴标签的设计重点在显示规则上，不同的坐标轴类型有不同的处理方式。
连续轴/时间轴的标签显示
连续轴/时间轴，是由一组前后包含同等差值的等差数列组成，缺少几个数值也能明显看出中间的对应关系。当多个标签在容器内全显示发生重叠，我们可以利用抽样显示的手段来避免这种情况。这里不推荐使用旋转，一方面从美观度上，旋转可能会破坏界面整体协调，另一方面，连续/时间轴非必须显示所有轴标签，抽样标签已经能满足用户对当前数组定义域的理解。
介绍一种常见的抽样方式：等分抽样
当多个标签在 x 轴无法完全显示，优先保留首尾标签，其余标签按同等步长间隔显示。间隔等分的前提是间隔数是合数，能被 1 和其本身以外的数整除。如果间隔数为质数，就需要「-1」转成合数。
举个例子：11 个标签，间隔数是 10，能被 2 和 5 整除，即分成 2 等分和 5 等分。12 个标签，间隔数是 11，无法等分，需要在间隔数基础上再「-1」，转成合数 10 后再等分，此时最后一个标签显示在倒数第二个数据点上。
有人会问了，能被那么多数等分，到底该选哪个呢？这就要根据标签长度来定，选择能放下最多标签的等分值。由于连续轴/时间轴，一般是数值、日期、时间等，字符长度有限，即使抽样后也能保证显示出一定数量的标签。
等分抽样不太适用于表达某个时间周期内的走势折线图，因为最后一个标签不一定对应最后一个数据点。对于这类折线图，能清楚表明起始时间和末尾时间，相比显示更多时间标签重要性来的更高。设计上可以只显示首尾标签，或首尾 + 中间值。
分类轴的标签显示
分类轴是由几组离散数据组成，相互之间独立存在，无紧密逻辑关联。若采用抽样规则，隐藏一些标签，用户对图表认知就会有困难，违背了数据可视化清晰、有效的设计原则。分类轴最佳处理方式是标签旋转 45 度，若 45 度仍显示不下，继续旋转 90 度。如果 90 度还是放不下就要考虑结合图表交互或反转图表。
标签旋转方向也有讲究，因为人的视觉习惯是从左到右，从上到下，标签顺时针旋转 45 度更符合用户的浏览动线。
分类轴标签字段有长有短，长文本标签直接旋转不仅影响美观，而且也不利于用户阅读。如果数据量比较少只有 2~4 个，长文本标签更适合水平展示，显示不下省略即可；如果数据量比较多，就限定字符数后旋转。
y 轴标签的设计重点在标签数量、取值范围和数据格式上。标签显示区域一般根据最长标签宽度自适应缩放。如果数组是固定的，就写成固定宽度，节省图表计算量，提高渲染速度。
y轴标签数量
标签数量不建议过多，太多的标签必定导致横向网格线变多，造成元素冗余，干扰图形信息表达。根据 7±2 设计原则，y 轴标签数量最多不超过这个范围。
y轴标签取值范围
y 轴标签的取值范围决定了图形在整个绘图区域的显示高度。
折线图 y 轴标签取值一般保证图形约占绘图区域的 2/3，以更有效的传达数据波动幅度，避免掩盖和夸大变化趋势。2/3 即斐波那契数列第二位起，相邻两数之比，也是黄金分割最简单的计算方法。
柱状图的 y 轴标签取值应从 0 基线开始，以恰当反映数值。如果展示被截断的柱状图，可能会误导观众做出错误的判断。
y轴标签数据格式
y 轴标签的数据格式在 ant.vision 写的比较详细，重复内容不在此说明，重点讲下一些特殊的设计细节。标签保留的小数位数保持统一，不要因为某些轴标签是整数值，就略去小数点。
正负向的 y 轴标签，由于负值带「-」符号，整个 y 轴看起来会有视觉偏差，特别是双轴图的右 y 轴更明显。这里建议正负向 y 轴给正值标签带上「+」，以达到视觉平衡的效果。
写了那么多关于坐标轴的设计，你是不是恍然大悟，原来小小的坐标轴还有如此之多的细节。往常我们做图表设计，可能只是用网上自动生成的图表简单调整下，或者按照通用样式来设计。然而，通用样式虽然能表达数据意义，但也缺少了对图表细节的把控，失了精致优雅的感觉。
作为数据可视化设计的一小部分，就是这些设计细节，决定了图表最终的传达效果。
文章来源：优设 作者：米粒的DesignNote
任何一名设计师应该都会接触到运营活动页，产品落地页此类需求。而这些落地页设计需求的业务目标衡量标准都相当明确——即转化率。再进一步，与我们的设计输出直接相关的就是首页转化率/点击率。这些数据通过埋点能很轻易地获得，一般情况下，产品经理会提前在需求文档中标明需要埋点的地方（埋点简单说就是测量某个位置或者交互节点的具体数据，例如发生了多少次点击），获得数据用于验证产品最终是否符合预期，是否达到了理想的转化效果。
叮~ 讲到这我们应该明确了一件事，整个落地的设计其实最终都是为那个关键数据服务，无论是点击率还是转化率，达到预期甚至超出预期，那你的设计就完美地完成了任务，这也是验证设计有效性的主要方法，将设计与数据关联，用可量化的数据指标来验证偏感性的视觉工作。
就这样，设计与产品/运营的世纪大战开始了。因为我们都有了一个共同的目标，因此在产品的最终收益、期望效果方面互相都很明确。但在实现手段上，我们很轻易地产生了分歧。主要分歧点就是「按钮在左还是按钮在右」这个问题上。我们需要理解，这不是一个简单的交互问题，因为它其中掺杂了商业内容。如果这是一个交互问题，那我们很容易判断，例如弹窗的主次按钮应该主右副左，这既符合平台规范，也符合用户认知和操作习惯。
然而作为一个强商业属性的落地页，按钮在左或者按钮在右都有其合理性。我选择左，而运营同学代表他们团队要求右。 于是我败下阵来，当然，虽然表面上设计师输了，但我们怎么能服输，于是我想尽办法来验证左侧放置按钮才是更有利于转化的形式。下面我们来看看不同的倾向对应的设计原理。
产生左与右的争执其实主要源于设计与需求方的两个判断方向。首先说一下我的判断逻辑，按照已知经过验证的理论，即 F 阅读顺序（尼尔森的用户阅读视线模型），用户浏览落地页的顺序应当是从左往右自上而下，因此左上角的信息最早触达用户。在当前主流的首图式落地页样式下，首图 banner 中的内容应当置于左侧，以使用户更快地获知产品的关键信息。
在落地页首图的体验文案本身就是一个设计的覆盖范围，因为它直接关系到首页的视觉传达效率，即用户需要花费多长时间、多少精力才能理解你的产品。我们往往在首页体验文案中采用主标题加副标题的形式，着重解释这个产品是个什么东西、用户能从这获得什么，往往通过主副文案搭配的形式，来完成整个大意的阐述。
基于此，核心内容置于左侧，用户在快速扫视时能够第一时间获知产品信息，了解产品利益点，这与我们精心准备整个网站，以及精心准备诱导力文案的方法相契合。这是我做出内容置于左侧的设计决策的主要思路。可以看出，我这里主要参考的是 F 阅读模型这一理论，根据这个经验我得到的结论是 重要的信息应当摆放在左侧以使用户立即触达核心信息，这将有利于接下来的引导或者转化。
另一方面，运营同学又是基于什么考虑决定将核心内容放在右侧的呢？答案是操作习惯，理论化的话可以用费茨定律概括，（目标距离用户距离越短，用户触达的效率越高）。考虑到大部分用户使用右手操作，鼠标也大都悬停在屏幕右侧，因此，按钮置于右侧，用户点击的路径变得更短，也就更容易触达和转化（纯体验角度或者说效率角度）。
你仔细阅读这部分内容，从分歧点到各自的理论支撑实际上都没有太大的漏洞，为什么没有漏洞？因为确实都没有错误，也都存在其合理性。例如我们常用的购物 APP 会把按钮置于右下角，用户操作起来必然比左上角的按钮更加容易。那么在这两种分析都合理的背景下，我们要对比或争论的其实不是哪个判断是错误的，而是哪个判断更有利，更合理，能够带来更多的数据转化。因此，这个问题最终由对错问题，转化为一个优劣问题。
有些人很机智，这个时候肯定会想，既然左边最容易触达信息，右边最容易触达按钮操作，那左边放置内容，右侧放置操作不就完美解决了吗？哎呀，读者真聪明。
由于 F 阅读的逻辑，将展示性质的「内容」放置于左侧，使用户更快触达关键信息，由于费茨定律，以及多年来养成的用户习惯（操作组件在右侧，当然现在很多放在中间的情况）将需要执行的操作置于右侧，使用户快速交互并完成任务。有一定道理，甚至在实际落地产品中我们也能看到一些类似的设计，例如豆瓣。 这是一种左与右的妥协
但需要注意的是，豆瓣产品的右侧放置的是较为复杂的交互模块，例如完整的登录注册模块。在该场景下，用户在交互路径更短的右侧区域执行交互效率要明显高于左侧区域。
那么下面开始论述按钮置于左侧的观点
论点一：排版的限制
豆瓣的形式对于落地页产品，可能并不适用。主要有两方面原因。我们都知道，产品落地页首屏的组成为体验文案，主 CTA，插画配图三部分。常规做法是插画作为一组信息置于一侧，文案加按钮作为一组信息置于一侧。因为，体验文案与按钮具有强关联性，同时按钮与文案作为一组信息，才能与另一侧的插画搭配构建平衡的布局，呈现比较优美的视觉效果。
请登录后查看原图，因此，豆瓣那种妥协方式并不适用于商业类落地页。因为内容和操作本身是一体的，这源于排版的规整性的限制，按钮和文案只能同时存在于一侧，如果刻意去追求左侧内容，右侧操作，效果就像下面这样。一方面，只靠文案和按钮无法撑起左右两个区域，一方面文案和按钮被割裂开，用户的视线由文案转到按钮的路径过长，体验较差。（文案与按钮成组后，用户可以在阅读内容产生动机后立即触达交互按钮并完成转化）
论点二：文案与配图孰轻孰重
如果你亲自体验这两种区别的落地页（左图右文/左文右图），你会发现有一个共同点，就是在某个区域的停留时长，没错就是内容区域。以下图的顶部卡片区域为例，在阅读时我的浏览情况是，大致地扫视左侧的插画，然后注视右侧文字区，了解文章的具体内容，并在此区域停留较长时间，毕竟仔细阅读需要花费时间。
这就涉及到一个问题，插画与内容哪个更重要？其实答案很明显，我们只需要舍弃掉其中一项来测试下，看看哪个内容的缺失会对用户理解设计传达的语义产生较大影响。OK，我觉得没必要测试了（虚晃一枪）。很明显，删除插画后，我们仍然可以通过文章的标题来获知文章概要等关键信息，就像落地页首屏的体验文案，即便没有插画我们也能通过首页文案来获知这个产品是什么，能够为我带来什么。
然而如果去掉关键信息，去掉标题与按钮，仅凭插画我们无法分辨当前页面到底在讲述什么东西。设计本身就像是人与人的交流，产品就是我们，而用户则是我们的交流对象，去掉核心的文案，相当于把我们自己变成了哑巴，而去掉插画，最多相当于我们交流时面无表情罢了。
因此，在商业落地页中，我们以转化为核心目标，而能够更快地触达最重要的信息显然是明智之举，因此我们希望将核心的文案内容置于左侧。
（另外，一图胜千言的原理只适用于个别场景，例如数据可视化。设计人员通过将数值数据转化为易于理解的柱状图扇形图，来传达数据结论。而视觉修饰性质的插画则无法做到准确表意，我们通常在产品设计中见到的插画更多的是在情感上和审美上给予我们一定的愉悦，但想要准确描述关键信息，还是需要文字作为核心角色）
论点三：用户会因为便于操作而产生动机？
另一点同样值得我们思考，即用户真的会因为某个按钮更容易点击而被转化吗？或者我们换个形式问，假设你是一名男性，你会因为按钮在鼠标附近而选择点击购买女士内衣吗？你会在自己财务状况较差的时候因为按钮在鼠标附近而点击购买品吗？在大多数理性场景下，我相信你不会这样做。
所以这时候要引入福格模型，用来阐述产生转化的整个路径。福格模型简单来讲就是一个公式：B=MAT。B(behavior) 代表行为，M(motivation) 代表动机也就是用户需求，A(ability) 代表用户使用的门槛，T(trigger) 代表触发。也就是用户行为的产生需要用户需求为基础，需要保证产品的易用性，但是这还不够，在这个基础上我们还需要在产品中通过设计触发用户。完成转化的三个关键要素是，动机、能力、触发，缺一不可。
福格模型帮助我们解决了这个疑问。用户的购买或者转化始于动机，就像我上面举的例子，如果一个用户根本对产品没有需求（男性对女性内衣），那就不会产生动机，在没有动机的情况下，后面两项内容，能力或者触发都没有意义，无法发挥作用。整个转化的流程可以参考下方的示意图。
实际上对于那些有强烈动机购买或使用产品的用户，你的一切设计都没有太大意义，因为用户有强烈诉求的情况下，他会发挥主观能动性去找到转化的入口，主动完成转化。同理，有些用户是完全不会产生动机的，不是目标用户群。
设计策略主要针对的是有动机但不强烈（某种程度上有需求或者被吸引），以及暂时没有动机的两类用户。通过我们的首屏及详细内容，痛点利益点的介绍，来放大用户动机，制造共鸣点，创造美好的想象空间，使用户涌现强烈动机。然后转化就自然而然的产生。
因此，在首屏我们的核心要义是通过内容设计来触发用户动机，而不是想方设法触发操作。走捷径的误触方案设计能保证百分百的触发率，但那种触发没有任何意义。到这里我们应该明确了，用户会因为好的内容所触发的动机而买单，但不会因为你把按钮放在我手边而产生购买冲动。
因此，我的结论是，用户更有可能因为左侧展示的强洞察力的文案而产生动机，而动机是整个转化的起始，也是最关键的一点，有了动机，触发（按钮位置）的效率即便低一点，但转化仍然很有可能继续（就像动机产生了惯性，有了强烈的动机会自发地去寻找触发器，去寻找按钮以自主完成转化，但触发器不会有惯性）
这个观点论述下来，主要涉及到 F 阅读模型，费茨定律以及福格模型，算是很基本的设计原则，也顺便帮大家重温一下。最后，我们再拿一些其他实证来进一步论述，例如国内一线公司的落地页设计。
1. 一线公司落地页布局
2. 全球独角兽企业落地页
文章来源：优设 作者：南山可
2009 年，买不起 Macbook 的我在 PC 上装上了黑苹果。在此之前，我用虚拟机体验了 Apple II 、Mac OS 8.1、Mac OS 9.2.2 、Mac OS X 10.6 ，在不断的折腾过程中，我开始对苹果、对GUI 的整个历史发生了兴趣。
此后，我在Jeff Johnson 的《认知与设计》当中，在 Steve Krug 的《Don’t Make Me Think》当中，在一本又一本和UI、交互、体验相关的经典书籍当中， 发现 Mac 系统的界面一直被作为范例来展示。
Mac 确实是优秀设计的典范，是 GUI 设计史当中绕不过去的最重要的操作系统家族。所以，视觉史系列文章的第一篇，我决定从 Mac 系统下手。
简单来说，我们泛指的 Mac 系统，通常是分为2个大的系列的。
1982 年随 Macintosh 发布的系统，一直到 1999年发布的 Mac OS 9 为第一个系列，一般被统称为「Classic Mac OS」。
而 2001 年之后所诞生的 Mac OS X 系列的操作系统，包括现在所说的 macOS ，则被视作为第二个系列的 Mac 系统，其中 X 是罗马数字 10 的意思。
苹果公司最初只有 Macintosh 电脑，系统并无名称，直到第5个大版本的时候，操作系统才拥有 Macintosh 这个名字。而 Mac OS 这一系统名称，则是在系统更新到第7个大版本的时候才被提出，而自此开始，Mac OS 的称谓正式出现。
而 macOS 则相当于是 Mac OS X 品牌的一次重启。它始于 10.12 Sierra 这一版本，并且为了和 iOS、tvOS、watchOS 这几个系统品牌保持一致，而从 Mac OS X 更名为 macOS。
在很长一段时间，国外很多老用户会将它简称为「OS8」、「OS9」，而在2001年之后直到今天，依然有很多人将它简称为「OSX」，这也是在了在讨论 Mac 系统这个前提下所用到的、带有版本的简略称谓。
注释：国内有不少人会将 Mac 称为「OS系统」，但是 OS 本就是 Operation System 的缩写，意为操作系统，Windows 是 OS，Linux 也是 OS，「OS系统」是一个错误且尴尬的表述。
如果不深究细节的话，Macintosh，MacOS，Mac OS X ， macOS 这四个都简称为 Mac 系统。
Macintosh 并非最早的图形化界面，但却是真正推动图形化界面操作系统发展的里程碑。
Xerox Alto
对于图形化用户界面的起源，一个相对统一的共识是，它来源于施乐的帕罗奥托研究中心，而最早使用图形化界面的电脑，是当时正出于研发中的 Xerox Alto。在之前的文章当中，我曾经专门聊过最早图形化界面的诞生和设计细节：
他们是UI界面的创造者，是UI设计的开创者，他们同样要在「比稿」中前进，他们认真、实在、抠细节，这篇文章是关于他们，关于最初的UI界面的故事。
阅读文章 >>比尔盖茨曾经指责乔布斯从施乐这里「偷」走了图形化界面（GUI）的设计，实际上，为了换得机会去施乐的帕罗奥托研究中心去观摩学习研发中的Xerox Alto 和开发工具 Smalltalk，乔布斯是拿股权交换得来的。
这是 Xerox Alto 当时所采用的图形化界面。界面的确图形化了，只不过，从今天的视角来看，整体的界面逻辑并不清晰。
而在GUI的设计细节、实现方式上，Macintosh 则截然不同，可以说是后来居上。
说回 Mac。
回溯到 1979年，Jef Raskin 是Macintosh 电脑和操作系统项目的发起者和监督者，他想用自己最喜欢的一种苹果（McIntosh）来给这个操作系统命名。
这种名为 McIntosh 的苹果不仅被誉为加拿大国家级苹果，但是更重要的原因在于，当时纽约还有一家名为 McIntosh Laboratory 并且提供高端定制音响服务的公司，为了避免商业品牌上的冲突，Raskin 将系统的名称改为 Macintosh，故意错开了一个字母。当然随后 Macintosh 的名字逐渐超过了前者，在世界范围内，甚至慢慢超过了加拿大最著名的水果。
当然，1984年，最初版本的 Macintosh 系统随着同名的苹果电脑的发布而面向大众，这个并非最早的图形化界面操作系统开始了它的历程，如今它是最著名、最具有影响力的图形化界面的操作系统之一。
Macintosh 电脑的主板由 Burrell Smith 所设计，结合当时的硬件技术，让最终上市的 Macintosh 电脑拥有了一块分辨率为 512×342 的单色显示屏。
在这块寸土寸金的单色屏幕上，Macintosh 系统需要将图形化界面的价值尽可能发挥出来。
Macintosh 电脑开始出现在各大杂志媒体上，蜚声世界，但是此刻，这一操作系统并没有官方的名称。 1.x系列的只有一个非正式的 System 1 的名字，而随后的大版本也被称为 System 2，System 3，等等。
直到 System 5 的时候，这一操作系统才算是正式有了 Macintosh 的名称，而它正式的完整名称是 Macintosh System Software 。
最早的 System 1 当中，开机之后有一个非常可爱的欢迎界面：
菜单和窗口的概念清晰，比起 Xerox Alto 的设计更加成熟：
左上角的苹果图标打开之后，本质上是一个程序列表：
在 System 1 当中，文件夹是一个虚拟概念，在文件系统当中其实是根本不存在文件夹的，它是模拟现实文件夹的概念而存在的一个图形化界面概念：
在系统出错之后，系统报错界面中会使用炸弹图标来进行提示：
1984年的 Macintosh 的系统崩溃界面都比 2000 年之后的的 Windows 蓝屏界面来得更加有趣：
当然，用一个带有图形化界面的电脑玩游戏，难道不是一件天经地义的事情吗：
特别值得一提的是，Macintosh 自打一开始就为自己设计了一系列的字体：
其中风格独特的 San Francisco 在多年以后还拥有一个同名的字体，作为系统默认的字体而存在。
随后，在随后的 System 3 当中，垃圾桶的 APP 图标增加了「有垃圾文件」和「已清空」两种状态的区分，并且给系统新增了一个欢迎界面：
文件夹也不再只是一个虚拟的概念了：
同样的，在 System 3 当中游戏的精美程度也有了一定程度的提升：
当然，从 System 1 到 System 4，系统的功能在一代代地增加，但是受限于屏幕和基本的性能，其界面在整体观感上差别并不大：
不过在图标和界面细节的处理上，越来越丰富，越来越细致，比如系统的控制面板，功能和细节比 System 1 时代丰富了许多：
在 System 5 当中，Macintosh 还加入了多任务的功能，也就是 MultiFinder，使得用户终于可以同时运行多个任务，不过因为性能限制，跑多任务的时候，会比单任务慢不少。
对于 Macintosh 系统而言， System 6 是一个阶段性集大成的版本。系统的版本和软件的版本在 System 6 当中进行了统一，并且功能也有了相当程度的完善。
性能更强劲的 Macintosh SE/30 和 笔记本电脑 Macintosh Portable 也是在 System 6 更新期间发售的。
Macintosh Portable
Macintosh SE/30
终于，黑白用户界面的时代在 1991 年终结，Macintosh 系统从 System 7 开始拥有了彩色的用户界面：
色彩的加入，系统图标的拟真度也再一次提升，比如垃圾桶的图标，光影已经相当逼真了。
而为了更好地利用彩色界面的功能，用户可以根据自己的偏好进行全局色彩设置：
软件安装的进度指示方式，比起同时代的系统乃至于后面的很多系统，都要清晰明确：
关键信息的说明和引导上，Macintosh 系统在30年前就已经有明确的范式了，比如重要信息标红强调：
由于这个阶段系统分辨率的限制，在按钮的视觉层次构建上，阴影和按钮凸起的效果，都做的比较简单，但是总体上始终上是在模拟现实存在的元素，通过尽可能贴近现实的视觉设计，来减轻用户的认知负荷，计算器和键盘的设计就非常的典型：
System 7 当中，还内置了交互式的用户帮助系统：
在控制面板当中，图标的统一性再一次得到了提升，风格上明显有着当时的特征，只不过在信息的传达上，还不够优秀，如果没有文本标签，你很难判断每个按钮对应的功能是什么：
值得一提的是，System 7 所处的阶段，大量的兼容机和包括 Windows 在内的操作系统开始出现，激烈的市场竞争之下，苹果也发布了一系列的新款的 Macintosh 电脑：
为了应对激烈的竞争，苹果还想出了新的策略，而这一策略也促成 Macintosh 系统后续逐渐成为一个独立的品牌。
1996年，乔布斯重回苹果。同时在这个阶段，Macintosh 系统也随之进行了品牌重设计，Macintosh 系统更名为 Mac OS。
为了应对激烈的市场竞争，这一阶段的 Macintosh 电脑开始逐步切换到 PowerPC 架构的 CPU 芯片，同时，苹果公司也开始授权一些第三方厂商，使用同样架构的芯片和主板，并且安装System 7 的系统。
可以直接安装 System 7 的 StarMax 兼容机
这样一来，就开始出现问题了：非苹果产的电脑上，也会显示 「Macintosh 」的字样，那这个怎么和原厂的 Macintosh 电脑进行区分呢？
很简单，在原装的 Macintosh 上，依然还是 Macintosh，但是在兼容机上，它就是「黑苹果」——Mac OS：
在当时，很多人认为这种区分，仅仅只是用来进行差异化的临时解决方案。此时乔布斯即将重掌苹果，并且打算把前 CEO 的系统第三方授权策略给干掉。将 Macintosh 更名为 Mac OS 就是解决方案，只不过这个解决方案并后面还有其他的深意。
因为后面还有新系统。
Mac OS 8 是在 1997年7月26日发布的，同一个月另外一件大事，就是乔布斯正式任命为 CEO，执掌大权。
其实，此处的 Mac OS 8 并非真正意义上的大版本更新——它原本应该是 Mac OS 7.7 。但是，前 CEO 同第三方厂商签订的系统授权协议，是基于Macintosh System 7 的，而直接发布 8.0 版本等同于是巧妙地利用命名，直接把后续的服务和协议一起给断掉了，同时新的 Mac OS 系统从名字上也直接区分于原本的 Macintosh，可以说是釜底抽薪的一招绝杀。
同时，新名字，新世代，也是开创新局面的好预兆，一举多得。新的 Mac OS 8 系统在更加优秀的硬件基础上，在显示效果上也一下子进入了高清的时代。
虽然 Mac OS 8 在底层上，依然继承自 System 7 ，但是因为几年前开始的 Copland 项目有不少遗产，身为继承者的 Mac OS 8 在视觉和体验上，提升了相当明显：
Mac OS 8 当中加入了主题选择的功能，虽然比较简单，但是也至少有着跟 Windows 95 相互匹敌：
和同时代的很多操作系统一样，在多媒体软件上， Mac OS 8 有了颇为炫酷的视觉效果：
界面左上角的 Apple LOGO 继续作为程序列表的菜单按钮而存在：
类似 2.5 D 的图标设计，是这个时代的用户界面设计的流行风尚：
而这种变化，在 Mac OS 8.5 这一版本上，有了更为明显的提升——比如文本抗锯齿效果，让文本更加易于阅读：
更加柔和自然的的光影变化，更复杂的交互和界面元素，Mac OS 8.5 所呈现出来的视觉效果乃至于体验，不会弱于同时代的任何系统：
但是也仅仅只是不弱于对手而已。
Mac OS 9 是 Mac 系统第一个系列的最后一个大版本。
和 Mac OS 8 类似，原本的 Mac OS 9 原本应该作为 Mac OS 8.7 来发布的。
其实早在乔布斯回归并发布 Mac OS 8 之后，Mac OS 9 的发展路径和命运就已经注定了：为老硬件和老用户更新，并且继续为真正的新系统争取时间。
Mac OS 9 是在 1999 年 10 月 23 日发布的。这个面向新世纪而发布的操作系统，苹果是以「有史以来网络功能最好的操作系统」来进行宣传。
此时，乔布斯重组的设计团队，已经为新的操作系统挑选好了新的设计语言，而此时发布的 Mac OS 9 当中，也适当地加入了一些为真正的下一代系统所准备的视觉元素，比如播放器软件中的不锈钢拉丝效果：
窗口界面中的元素有着细腻微妙的光影起伏：
搜索应用中的内阴影、高度拟物化的小图标：
特别要说的是，此时的 Mac OS 9 中已经可以找到很多贴合现代 UI 设计中的诸多原则了，比如富有逻辑的分组：
容纳多个并列分组的标签页交互：
在诸如帮助页面和安装界面中，使用了层级丰富的排版视觉设计：
也许现在你对于字体的这种投影深恶痛绝，但是在20年前，这样的视觉效果是令人惊艳的：
Mac 系统的第一个操作系统系列，在明面上有着相对清晰的脉络：自家电脑，用自家系统。通过这一系列的界面设计，可以总结出下面的几点：
Mac 的图形化界面，始于施乐，成于乔布斯，在迭代中一步步完善。
不过，从 System 7 开始，它的危机就已经出现了。从 1991 年到 1999 年这 8 年时间当中，暗地里发生了一系列的事情，这些事情是 Mac 系统视觉史当中，不可或缺的组成部分。
下一篇，依然是 Mac 系统的视觉史，其中包括 WIndows、NeXTstep、BeOS，当然，还有 Mac OS X。
参考：
https://history-computer.com/ModernComputer/Personal/Macintosh.html
https://en.wikipedia.org/wiki/Xerox_Alto
https://web.archive.org/web/20001109004000/http://www.apple.com:80/macos/
https://apple.fandom.com/wiki/Mac_OS_8.5
https://en.wikipedia.org/wiki/System_7
https://www.versionmuseum.com/history-of/classic-mac-os
https://en.wikipedia.org/wiki/Macintosh_clone
https://en.wikipedia.org/wiki/Classic_Mac_OS
https://guidebookgallery.org/guis/macos/macos10
文章来源：优设 作者：陈子木
在第一篇 Mac 视觉史当中，我梳理过了整个 Mac 系统第一阶段的明线，而这一篇，我们来聊一下它的「暗线」。
这一章所涉及到的项目，几乎可以组成一个 大型的「90年代失败操作系统大赏」，在主要由成功者们所构成的故事、新闻乃至与传说当中，这些失败的故事和项目，被提及的次数很少。
但是对于 Mac OS X 而言，这里的每一次作死和失败都充满了意义。
对于绝大多数的用户而言，Mac OS X 是21世纪初顶尖设计的范式，在今天，它是最优秀操作系统的当中的典型。
但是仔细想想看：从 System 1.0 到 Mac OS 9.2.2，长达15年时间的挤牙膏渐进式升级的Classic Mac OS，怎么可能突然一下子就变成了充满现代感的 Mac OS X？这种翻天覆地式的变化的确充满了戏剧感，但那是在今天的视角之下。
在这场「90年代失败操作系统大赏」当中，无疾而终者多不胜数，你所看到的不仅有粉墨登场，还有各式各样的粉末谢场。在 Mac 的视觉史当中，这一篇应该是一个大型的「处刑现场」。
失败的尝试，同样是 Mac 整个视觉演变史当中，绕不过去的部分——没有这些失败，就没有今天我们所熟知的 macOS 的视觉风格，没有后面 iOS 、iPadOS、watchOS 等等一系列交互界面和视觉。
虽然我们此刻所谈及的是操作系统的视觉史，但是操作系统背后最重要的始终是推动它的「人」。谈 Windows 必然会涉及 比尔·盖茨，而谈到 Mac ，也不得不说乔布斯。
和当年很多操作系统不一样的地方在于，乔布斯一直坚持硬件和软件（操作系统）理应是一体的。这也是为什么在很长的一段时间以内，Macintosh 指的既是硬件（电脑），也是软件（操作系统），而因为这台电脑是更容易被指代的对象，当用户在指代系统的时候，使用的是诸如 System 1 ，System 2 这样的词汇。
原本的 Maciontsh 是有内部竞争对手的——Lisa，这个以乔布斯女儿命名的电脑研发项目被夺走之后，乔布斯在 Macintosh 上投注了300% 的精力，亲手操刀了不少设计。拥有大量资源倾斜的 Lisa 在当时那个阶段，看起来也并不差：
在这个 1983年的 UI 界面上，细节处理其实也算得上非常用心了，比如顶部菜单上的「阴影渐变效果」：
当然，Lisa 的定位也非常明确，它就是一台办公电脑，所以它的系统名称也非常简单直接地使用了 Lisa Office System 这样的名字：
也正是在这样的对比之下，有着丰富字体、多样的媒体功能、能够玩游戏的 Macintosh 在这场内部竞赛中，得以胜出。
当然，如同我们都知道的，乔布斯在发布 Macintosh 的 2年后被迫离开自己创立的公司。当然，更重要的是，硅谷的巨头们更加清楚计算机的发展方向。这使得 Macintosh 面对的外部压力骤增。
图形化界面（GUI）的概念和交互模式——这个点子本身可能比实现技术来得更重要。
在高手云集的硅谷，虽然绝大多数的企业和开发者都是后期入局者，但是他们只要投入足够多的技术人员和时间，类似的图形化交互界面总归是能做出来的。
比如 Visi Corp 给 IBM 提供了 Visi On 这样的图形化程序：
微软也在 1985 年为 IBM 的 PC 提供了 Windows 软件：
Commodore 的图形化界面也差不多同期问世：
而 GEOS 甚至为更老的 Apple ][ 提供了图形化界面的操作系统：
这些系统都是在 Macintosh 发布那一两年内相继问世的。
操作系统领域的竞争，刺激着苹果寻求突破。
多数企业都不会把鸡蛋放在一个篮子里，这样孤注一掷的决策确实有太大的风险。其他的商用操作系统，都开始拥有日渐完善的桌面端图形界面，使得苹果在差异性和独特性上不足。除了在硬件性能和产品线上增加投入，他们也开始尝试开发更优秀的图形化界面和下一代操作系统。
在上一篇当中，我提到过，在 80 年代末所发售的 System 6 是一个集大成的版本，在硬件性能和黑白显示器之下，这个操作系统本身的核心功能已经颇为完善了。这个时候，苹果开始有意识地进行一些探索性的项目。
某种意义上来说，「Blue」 和「Pink」 两个项目几乎是同时开始的。
虽然 1988 年的时候，乔布斯早已离开，但是他所塑造的 Macintosh 是当之无愧的传奇，那种「内部创业」和「改变世界」、「创造传奇」的硅谷精神对于此刻的苹果员工依然有着极大的影响。
当时苹果内部 5 名躁动不安的中层开发工程师想拜托日渐僵化的内部管理，想改变当时 System 6 表现欠佳的局面，想打造一个次世代的旗舰操作系统——某种意义上重现 1984 Macintosh 的传奇。
他们在这次私底下的会议上重新梳理并规划未来的操作系统。他们将System 6 基础上的可以增量更新的特性、可以很快实现的功能，写在蓝色的卡片上，将技术上更加先进、符合长期价值的功能（比如当时 Macintosh 所缺乏的抢先式多任务处理和组件化程序设计）写在粉色的卡片上，将更加激进的特性写在红色的卡片上。
这次会议基本上就塑造了后面的「Blue」和「Pink」两个项目，而红色卡片上的特性由于过于激进，仅仅只是备案而没有成立项目。
数百名工程师继续在 System 6 的基础上按部就班地更新功能、维护代码库，继续「Blue」项目，而它的最终产物，就是后面我们看到的 System 7：
而另外一边的「Pink」项目，一开始并不是公开的。当时 Erich Ringewald 领导这发起这次会议的核心 5人组，想像 Macintosh 项目开始那样，找一个隐秘的房间开始这次「内部创业」。
他们看上了 位于 Bubb Road 的一间仓库，当他们进去的时候，才发现这个仓库已经被另外一个正在秘密进行 Newton 项目的团队给占了。
当然这款同样极为传奇的（失败）掌上设备我们回头再说。
「Pink 」项目开局的时候，有 6个人，但是考虑到要彻底放弃 System 6 的遗产，重新开始全新的操作系统，程序要是面向对象的，要有内存保护，要抢先式多任务处理，要支持多语言足够国际化，还要有全新的图形库，这个团队开始一路膨胀。
先是苹果的先进技术小组（ATG）加入团队，人数变为11人。 2个月后，「Pink」项目增加到 25 人。7个月后，原始的5人组几乎都因为「人员多到失控」而离开「Pink」项目。1年后，「Pink」项目的开发组多达100人。
原本计划在2年后发布的「Pink」操作系统在原计划的2年之期到期之时，拥有了 150 人的超大规模，高级副总裁和市场营销部门的首脑领导着这个庞大的开发团队。
「Pink 什么时候上市？答案永远都是2年后。」
这是当时流传的一个内部笑话。
但是这个笑话只是刚刚开始。因为它才刚刚开始膨胀。
系统开发需要时间，而随着时间推移，市场变化需要「Pink」 更有竞争力，然后原本位于红色卡片上的「激进功能」开始不断的加入到「Pink」当中，然后项目就需要更多时间来开发——恶性循环开始了。
在「Pink」上，苹果投入了太多，放弃是不可能放弃了，唯一的办法就是拉更多人入局。当时的 CEO John Sculley 对外宣称「Pink」操作系统代码已经多达 150 万行，并去 IBM 做了内部演示。
然后，这个看起来像是被移植到 PC 上的 System 7 成功地引起了 IBM 的注意。让比尔·盖茨最不想看到的事情发生了：苹果、IBM 和 摩托罗拉成立 AIM 联盟。
AIM 联盟成立于 1991年10月2日，此时距离「Pink」项目开始已经过去了3年半。半年之后，苹果和 IBM 正式组建了合资公司 Taligent .inc ，而其中苹果占股较小。
原本被拿来吹嘘的「Pink」操作系统，此时也更名为 Taligent 。
Taligent OS 的确有着很多超越 Macintosh 的功能，比如更的程序机制，3D功能等等等等。在整个 UI 界面上，Taligent OS 使用了继承自「Pink」项目的一些设计：等轴测的图标，伪3D风格的图标，还有非矩形的窗口（注意看窗口的顶部菜单栏）。
当然，Taligent OS 从「PInk」项目继承过来的最大特性是：一直在开发，从未正式发布。
1994年，HP 入局，加入 Taligent 公司并且持股 15%，Taligent OS 的一部分技术开始运用到 HP 家的 NewWave 桌面环境中了：
与此同时，Windows 95 的关注度越来越高，而媒体吐槽苹果久未发布的新系统，并嘲讽难产多年的 Taligent OS（还有 Pink），已经成了一件政治正确的事情。
虽然 1994 年的时候，Taligent OS 在 SFA 展会上使用 Macintosh IIcI 展示了运行速度和崩溃速度同样快的 3D 应用，但是它最终还是没有发布。
1995年，苹果出售股权退出 Taligent 公司，「Pink」 项目的最终产品也并非 Taligent OS，而是 IBM 公司的 AIX 系统中的 Common Point 应用。
「Pink」到此终结。失败。
在 Taligent OS 研发期间，苹果将鸡蛋还放到了另外一个篮子里面，这个项目的代号借用了著名的科幻电影《星际迷航》，项目的 Slogan 是「大胆地探索 Mac 之前从未去到过的地方」。
这个地方就是使用英特尔芯片的 X86 架构的电脑上。
「StarTret」项目中，苹果是和当时的服务器供应商 Novell 共同构思的，这个项目最终因为内部斗争、人事纠纷、市场问题而关闭。值得一提的是，同样的尝试在 1985年的时候就有过，不过那次尝试很快就被中止了，以至于至今没有一个正式的代号留下来。
这算是2次失败。
作为 「Blue」项目产物的 System 7 最终并没有彻底解决苹果在操作系统上的困顿处境，系统依然问题很多，内存保护机制、抢先式多任务处理依然还没有。而 1994年3月开始的「Copland」项目，就是为此做准备的，它的代号来源于美国作曲家 Aaron Copland 。
除了在内存分配和多任务处理等核心功能上进行开发提升，它在 GUI 的视觉层面上的优化，也花费了相当多的心思。在视觉层面上，Copland 新设计的一套主题名为 Platinum ，所有的元素都有着颇为细腻的阴影，窗口元素则有着明显的突起，原本「Pink」项目中的等轴测图标也加入了进来。
除了 Platinum 之外，Copland 还加入了面向儿童的主题P，以及更加具有未来派风格的主题Z。
除了主题本身之外，Copland 还支持窗口最小化到底部为标签，多用户登录（Windows 98 之后才有这个功能），这种功能类似于现在的家长管理——管理员帐号可以决定其他用户可以使用哪些应用。可以说，非常超前了。
当你在 Copland 中拖动文件到不同文件夹的时候，这些文件夹可以自动打开，这一功能在当时也是非常先进的。
不过，Copland 极具前瞻性的另外一面，就是它本质上是一个「要你命3000」。各种新的功能和特性出于市场需求和项目需求毫无节制地被加入进来，所有的功能相互之间都存在冲突和影响，所有人都很清晰地知道，Copland 是不可能被作为正式产品所发布出来的。
「它只是一个不同团队开发产品的合集……并且期望它们能够神奇地组合到一起。」
这是当时的 CEO Amelio 自己说的。
当然，Copland 的阵亡不可避免，只不过它的界面管理器和 Platinum 主题最终留到了 Mac OS 8 当中，为苹果公司的自救大业添砖加瓦。
Copland 失败了。自家开发团队搞不定，只能从外部想办法了。
当时，CEO Amelio 个人比较倾向于 Windows NT，并且为此专门同盖茨通了电话，而盖茨也表示如果愿意使用 Windows，他可以组建团队将苹果的拳头产品 QuickDraw 移植过来。此时，WIndows 95 已经发布一年了，而 Windows NT 也刚刚发布，市场反响极好，份额节节攀升。
当然，苹果和微软的命运纠缠并不是此时才开始的。Windows 1.0 时代，图形化界面的专利授权是苹果授权给微软的。
而 Windows 2.0 继续沿用 1.0 时代的设计，但是苹果没有给 2.0 授权，最终引起了纠纷，盖茨借用不维护 Word 和 Excel 软件和当时的 CEO 达成了庭外的和解。这些事情回头有机会细说。
和CEO的想法不同，当时苹果的 CTO Ellen Hancock 其实是想选择 Solaris 来着，不过它还没有一套友好的用户界面，赢面不大。
最终摆在苹果CEO 和董事会桌面上的，就剩下两个备选了，一个是 BeOS，另一个是乔布斯的 NeXTSTEP。
然而这毫无疑问是一次极具戏剧化的选择，因为这两个操作系统背后的两个人，有着极深的纠葛。
Be 公司的 CEO 是法国人 让·路易·加西，他是 1981 年加入苹果公司并负责当时欧洲业务。
1985年，他在得知乔布斯计划在阵亡将士纪念日罢免 CEO 约翰·斯卡利（John Sculley）的计划后，抢先告知董事会，最终导致乔布斯从苹果辞职。
1987年，加西启动了 「Skunkworks」项目，而这个项目的产物就是后来的掌上电脑 Newton MessagePad，而最终这条产品线也是乔布斯关停的。当年的「Pink 」五人组在仓库里撞见的，就是加西的团队。
1990年，加西和CEO交恶，并且董事会对于他所推出的 Macintosh 产品不满意，最终导致他离开了苹果，并于次年创立了自己的 Be 公司。
彼时正在艰难推进 NeXT 电脑业务的乔布斯，在媒体那边的口碑并不好。而加西反而在这个时候，对 NeXT 不吝溢美之词。
当然，最终乔布斯的 NeXT 和 加西的 Be 最终还是摆在了同一张桌子上，被选择。
BeOS 是一个在当时来看极为激进的操作系统。它并不是为当时更为流行的办公场景而构建，而是一款旨在为多媒体处理而生的操作系统。
它并没有采用当时所流行的 Unix 的架构，有着一套相对更加独特的系统逻辑和设计规则。
它同样延续了当时最为流行的等轴测图标设计，在配色上更为鲜亮，在视觉化设计上，一点都不弱于同时期的任何操作系统，包括 Macintosh 和 NeXTSTEP。
在交互逻辑上，BeOS 沿用了当时很多 Unix 操作系统的右侧交互工具工具栏，正在运行的程序可以清晰地在此预览，而右上角的 BeOS LOGO 则类似开始菜单，可以呼出程序列表：
BeOS 的图标设计在统一性和规范性上极高，即使在今天看来，很多设计都不落俗套：
BeOS 能进入苹果的备选，一个很重要原因是这套操作系统兼容当时 Macintosh 所用的 PowerPC 的架构。尽管它一直都未曾推进到 1.0 正式版，但是并不影响它在电脑领域收割一大波粉丝。
但是作为一个操作系统而言，在消费市场上依然是一个失败的产品。
另外一边，乔布斯 的 NeXT 电脑并没有复制 Macintosh 消费市场上的成功。不过，NeXT 作为定位高端的工作站，倒是吸引了不少科学家和计算机领域的研究人员以及顶尖的数字创意从业者的注意。
在接近被收购的当口，NeXTSTEP 系统已经推进到了4.0 的大版本。由于它本身在硬件性能上的突出表现，在操作系统的各种细节上，一点都不吝惜，竭尽全力地刻画细节。而这其中，有很多概念和想法是从 Macintosh 时代继承并发扬出来，并惠及后面的 MacOSX 乃至于 macOS。
精巧的 3D 小插件，全彩高清大尺寸拟物化图标，底部程序坞组件，以及可以购买软件的软件商店，甚至于著名的游戏 Doom 和 Quake 都是在 NeXTSTEP 上首发的。
无论是内部的功能，还是外部的 UI 元素的细节控制，NeXTSTEP 都在当时条件允许的前提下，做到了尽善尽美。比如登录和关闭窗口中的光影细节：
（注：NeXTSTEP 是操作系统，而OpenStep 是一套 API。）
当然，NeXT 本身并不算成功，被苹果收购是最好的结局之一，这不仅是市场的选择，也是苹果的选择，是乔布斯的选择。
终极对决发生在 1996年10月12日，地点是帕罗奥托的花园庭院酒店。
CEO Amelio、CTO Hancock ，以及另外 的 6 位董事会成员是最终决策者。加西志得意满，没有作任何演示，而乔布斯不仅使用了他的天赋技能「现实扭曲力场」，而且如同魔术师一般演示了 NeXTSTEP 的各种功能和特性。
苹果公司，乔布斯，加西 三方的命运在此汇聚碰撞，然后再次扭转。当然，这个扭转的过程并非一帆风顺，此时，距离苹果的命运彻底改变，还有4年时间。
在离开苹果、创立 NeXT 的阶段，乔布斯和苹果曾数度交恶，其中所产生的纠纷与诉讼在此刻依然是障碍。
NeXT公司同意了种种限制条款：其产品将作为高端智能终端直接销售给高校，而且NeXT公司不能在1987年3月之前推出产品。苹果公司还坚持，NeXT的机器「不能使用与Mac兼容的操作系统」。后来的情况表明，如果当时苹果公司的要求刚好相反，会对自身更为有利。
——《史蒂夫·乔布斯传》
看完了这些失败的产品的产品，我们终于要说一下成功的产品了。
下一篇，我们将从「水」聊起。
引用来源：
https://en.wikipedia.org/wiki/Jean-Louis_Gass%C3%A9e
https://guidebookgallery.org/articles/sortingoutfactfromfiction
http://toastytech.com/guis/guitimeline2.html
https://lowendmac.com/2005/apples-copland-project/
https://en.wikipedia.org/wiki/Appearance_Manager
https://en.wikipedia.org/wiki/Star_Trek_project
https://dl.acm.org/doi/book/10.5555/582997
https://en.wikipedia.org/wiki/System_7
https://web.archive.org/web/20070120202050/http://robinnet.net/resume/Robin_portfolio_Taligent.htm
https://web.archive.org/web/20070106224709/http://www.wildcrest.com/Potel/Portfolio/InsideTaligentTechnology/WW87.htm
https://www.operating-system.org/betriebssystem/_english/bs-aix.htm
https://www.wired.com/1993/02/taligent/
文章来源：优设 作者：陈子木
（Onboarding 是指用户第一次使用产品时认识、熟悉产品的过程）
往期回顾：
对设计系统有所认识的话应该会知道原子设计（Atomic Design）的重要性，我们也能将同样的概念应用在 onboarding 上，其构成从宏观到微观分成体验流程、控件形式与界面元素三个层级。
体验流程是一个有时序性的旅程，可以由数个不同的载具表现组合而成；控件则是承载信息而存在的平面，可以放上不同的元素；而界面元素是无法再行分割的对象。
我在每个阶段都举了几个常见的例子，搭配市面上产品的应用方法。
一个产品通常不会只有一种用户——使用健身 app 可能是为了减肥，也可能是为了增重；使用协作产品可能是为了记录工作成果，也可能是为了管理团队。如果能够在 onboarding 阶段了解用户的主要意图、在适量的搜集信息后将用户分流（记得上篇的避免过度吸收法则吗？），就能够打造更切身的体验。
除了用户分流之外，还有一些概括性的分流如下：
真正新的使用者 vs. 回流使用者
某些使用者只是因为一些外部因素（手机掉了、手滑删掉 app、忘记密码）而重新登录/下载产品，他们已经接触过产品的核心价值了，并不需要再次学习，这就是为什么跳过（skip）功能很重要。
邀请人 vs. 受邀人
如果邀请人已经设定好群组，受邀人应该自动被加入，某些信息也该自动填入，而非让用户再填一次，从而导致出错。
新手 vs. 老手
与专业领域高度相关的产品（例如 Adobe 系列、CAD 系列等）还可以将用户区分为已经很熟悉作业流程的老手与初学者等级的新手。老手最重视的是定制化以符合他们习惯的作业流程、作业效率高不高，并且跟其他竞品做比较。新手则不然，初次使用产品时的他们也是初次进入这个领域，如果能帮助他们更加了解这个领域的大致流程的话会很加分。
△ Photoshop 的丰富资源指引（Rich Tooltips）对于新手来说是一大神助
特别点出几个重点 features，简单地告知用户最重要的功能为何、组件在哪里，用户在登录产品之后只要知道这几个主要动作就可以打遍天下无敌手。
△ Slack 指出 channel 和对话框如何使用
当产品较为复杂，难以指出特定 feature 时，也常以影片或图片来展现产品价值——也就是画一张大饼给用户，让他们想象未来的生活在用了这个产品后会有多便利，或是让自我感觉提升。
相对于展示，实际演练更着重用户要亲自执行。许多研究都证实从做中学习的成效，就算只是训练肌肉记忆（muscle memory），也能让用户对界面的物理空间更有概念，像是「噢对刚才有做过，我记得按键在右上角」。
我们也可以设计一套 demo 版的试用，像是将 scenario 抓一个出来让用户试跑，跑过一个假想的故事情节后印象会更为深刻。
在初次展示后将用户引导的数据回收再利用，变成每当用户有问题时都随时可用的资源库。
1. 导览 Guided Tour
可能是影片，也可能是滑动式 slideshow，但总之是向用户介绍产品的主要功能或是传达产品价值，通常是为了展示的体验流程所设置。
2. 指引 Tooltip / Coachmark
用极小的空间指向目标物，既可以集中用户注意力，又不会遮盖住大部分的使用空间，用户可以一边进行正规作业，一边通过指引了解不懂的内容。
△ Dropbox Paper 用诙谐的语气鼓励你开始打字
有一阵子很多产品会将所有指引放在同一张图上，但其实使用不当很容易造成信息过载、注意力分散、之后会很难全数记住的情况，我的建议是一次一个比较好。
3. 秀给我看 Show Me
通常只会出现在教程中，强迫用户一定要亲自去按到按键或执行关键动作，切实练习用户的肌肉记忆。
1. 空白状态的行动呼吁 Empty State CTA
擅用空白状态是 onboarding 重要的一环，毕竟许多产品在用户动作之前可能都没有太多料，这时候就要运用行动呼吁。
例如 Tumblr 在指导使用者选择有兴趣的领域之后就指出如何 po 内容，因为其用户生成平台（UGC，User-generated content）的本质就是要鼓励用户多交流、多产出，平台才有价值。
2. 进度列 Progress Bar
提供进度可视化，让用户有掌控时间的感觉，而不是不知道自己还要再走几个步骤而感到不耐烦。
Basecamp 将进度列摆在上端，让使用者知道已经快做完这些设置了
3. 待办事项 Checklist
人类天生喜欢将事情「全部做完」，欲罢不能：科技如何让我们上瘾？可以协助我们「引诱」用户更愿意完成 onboarding 程序。
Bluma Zeigarnik 让受试者完成某些任务，但在他们完成另一些任务前打断他们，强迫他们开始进行其他的任务。这些受试者会非常不情愿地停下手上正在做的事，有些人会强烈抗议，有些人甚至会生气，这显示出 Zeigarnik 的打断为他们带来多么大的压力。到实验的最后，受试者清楚记得那些未完成的任务。如果是打断后一阵子又让他们完成的话，就没有这种效应。（摘自 欲罢不能）
4. 跳过 Skip
每次有 onboarding 都会选择跳过的人举手！
我喜欢把这称为不喜欢看桌游规则的人们，所以在使用中遇到困难时给予提示，对他们来说才是最实用而且最愉悦的，而不是在使用前的纸上谈兵。
△ Tumblr 在使用者第一次发文时才提示如何装饰文字
设计 onboarding 时并不是只能选择一种方法，我们可以灵活运用各种元素。将 onboarding 视为一个旅程，而不是单一元素的无限重复。我看过大部分最棒的例子都是综合使用上述多种元素，以下以新兴生产力工具 Coda 为例，来看看集上述大成的 onboarding 作品。
在第一次进入产品使用引导时，可以自行选择偏好的学习方式——影片或是交互式教学。
Coda 并没有强制用户立刻进入 onboarding 模式，而是在呈现主画面之余，让我们看到右侧的待办事项，令人产生「想将之完成」的欲望。
点入后，先有个 setup 内容，任务情境是为了项目经理所设计，但随着使用教程的进行，用户也能够联想到自己生活中的其他任务，例如安排家庭旅游、写系列文案、追踪买家信息等。
正式进入学习阶段后，进度条就出现了。
单纯根据文字叙述，用户仍然可能混淆，这时候 Show Me 功能可以减少不必要的误解。
同上，当用专有名词（此处的 section ）介绍某个界面元素时，将其他无关紧要的区域遮盖住，聚焦在重点区域，用户更容易将专有名词跟界面链接在一起。否则单说 section 谁知道是哪一个 section？
结束时记得给辛苦学习的用户一些奖励，并且贴心附上下一步，当然还是要留给使用者最终决定权。
完成一项后，Coda 会帮用户将完成的项目划除，于是得到立即的回馈。
完成所有步骤之后，原先是教程列的右侧区域转变成资源列，每当使用上遇到困难时就可以寻求各种协助。
Onboarding 并不是只会出现一次，推出多年的产品也仍会时常进行。
onboarding 的程序，例如推出新 feature 或有重新设计（redesign）的时候，目的仍然是让用户快速熟悉产品，所以这是身为产品设计师不可忽视的一环。
另外，除了 UI/UX 设计之外，文案写作也极其重要——如何跟用户诉说一个吸引人的故事、描绘出他们想象中的自己，也是成功 onboarding 必要元素。
文章来源：优设 作者：
今日头条作为资讯阅读类产品，Feed流场景是资讯类产品的核心场景之一，关于Feed流的改版尝试一直在进行，针对本次优化，多次在线上进行验证后，得到一个满意的结果，也将我们关于「头条首页改版」运用到的设计方法进行分享。
观点-实验-规则
项目前期提出设计论点，通过方案和实验去验证可行性，最后结合案例形成符合当前场景的设计规则，这也是本次设计探索所运用到的论证方法。
1. 什么是阅读需求？
一组信息通过不同的字号反差组合来满足不同场景下的文字阅读需求，这称之为阅读需求，阅读需求一般可以归纳为以下3种类型：快速定位型、浏览型、阅读型。
△ 三种阅读需求
2. 今日头条首页的阅读需求是什么？
今日头条Feed的阅读需求，我们定义为快速定位型和浏览型之间。原因是在阅读Feed时，用户有获取标题关键信息的强定位属性，同时也有浏览feed信息的浏览诉求；从Feed阅读习惯的分析，我们提到两个关键词，信息的定位和浏览，后面的探索也会围绕这两个关键词展开。
△ 首页的阅读需求
1. 信噪比与界面
「信噪比」（Signal-to-Noise Ratio）原本是用在声音和图像领域的概念，指在声音传播过程中信号和噪音的比例。这个理论也可以运用在页面中，如果要将讯息完整地传递给使用者，可以选择强化原有的讯息，或是降低多余的杂讯，来提高「信噪比」（Signal-to-Noise Ratio）以增加讯息成功被判读的机率，也让使用者能更轻松地阅读资讯。
一组信息是否更好的兼容定位与浏览属性，在于信息本身是否足够强调与清晰；「信噪比」理论是帮助我们理解「信息清晰度」的存在。
简而言之，「信噪比」理论通指有效信息和次级信息的比例，控制平衡这个比例，可以有利于信息完整的传递给用户，也能更轻松的获取资讯。
通过强化页面内的有效资讯，降低多余杂讯，从而提升页面内的「信噪比」，以达到提高有效资讯传递，帮助用户能更轻松获取资讯的目的。「信噪比」理论是非常通用、使用广泛的指导理论，对信息流页面设计有明确的指导作用；
△ 提升「信噪比」的目的
2. 视觉搜寻实验
△ 视觉搜寻实验
在视觉搜寻的实验里，让受试者从许多个「X」里面挑出1个「O」，然后再让他们从「┸」里面挑出一个「┼」。我们把所有的视觉元素称作刺激总量，大部分的元素（「X」和「┸」）称为干扰物，唯一不一样的那个元素（上面例子的「O」和「┼」）称为目标物。而实验的目的，就是要检测在干扰物增加和同等情况下，受试者会不会需要花费更多时间才能找到目标物。
当我们的视觉系统在辨识影像时，有一些影像的属性很容易被大脑处理，我们的视觉系统可以很快过滤辨识这些基础特征，让我们的大脑分辨这些影像属性更容易一些。因此我们涉及到大量信息的设计时，如果能够善用这些基本特征，便可以提高用户的阅读效率。
那么，什么样的特征能够帮助讯息更快，更有效的被用户判读和接收呢？在视觉搜寻实验中，有一些基础特征很容易被我们的视觉系统所辨识出来，其中主要有4种不需注意力介入便能轻易分辨的基本特征：
△ 4种基础特征
强化信息的基本特征是增强信息被判读最有效的方式，我们可以根据场景和用户诉求，选取最合理的方式来对信息进行处理；这4个基础特征，通过反差来增强核心信息的突出程度，辅助信息更好的传递给用户。
通过「视觉搜寻实验」，我们可以得到两点结论：
这两点结论是对于」信噪比「理论的补充，处理好信息的」信噪比「关系，强化有效资讯，弱化次要杂讯，帮助用户有效接收资讯，更轻松获取资讯。
3. 首页目标的变化
资讯的生命周期中，包括了产生、传递、接收这三个重要的阶段，而每个阶段都有可能造成信息的损耗；
信息产生是源头，这里的损耗在所难免，我们所要做的，是尽可能控制」传递「和」接受「阶段的损耗；早期的头条首页承载大量信息，目的是为了让用户可以接受到更多信息，这时「效率」会是第一位。
但在承载大量信息的同时，页面信息过多，容易造成信息对比弱、布局密集，从而导致信息 」传递「 阶段的损耗，同时用户在」接受「信息时，看到拥挤的信息布局，接受信息的」效率「被降低，被迫造成损耗。
为了更好的提升首页阅读效率，我们重新审视当前的设计目标，通过对不同组合的空间调整，平衡展示效率以及阅读识别性，控制「传递」和「接受」中不必要的信息损耗；将设计目标从过去的「效率最大化」，调整为「有效，轻松的阅读」
对于这个目标，我们结合之前抽离的」信噪比「理论，进行更为细致的拆解，确保能落实到后续的设计方案中。
△ 设计目标转变
4. 回顾信噪比
「信噪比」理论可以平衡页面内有效信息和次级信息，在这样理论的引导下，提供的方案其实更具备说服力。
和图片噪点一样，噪点越低，清晰度越高，映射到页面也是如此，页面内的杂讯过多，影响到有效讯息的传递，我们需要做的，就是给页面进行「降噪」处理。
1. 文字的反差比
根据前期的」信噪比「论点和」视觉搜寻实验「，我们得出两个核心观点：
两个论点其实都提到了信息对比强弱对于用户判读的影响，由此可见，不同信息的反差关系,是增强信息传递，缩短用户接受信息耗费时间的关键指标。
如果说「信噪比」是信息流优化的理论依据，那么「反差比」则是验证页面信息反差关系的手段。
调整页面内文字反差，一般通过三种方式来提升或调整
△ 提升文字反差方式
让我们来看首页中Feed流的标题字号，我们通过 iOS 和 Android 的通用文字规范可以发现，最小阅读文字为12号字（10号字用在标签，9号字用在数字提醒，都不适合作为阅读文字），Material design中正文内容默认字号为16px，iOS规范中则定义了7个正文字阶（14、15、16、17、19、21、23)，综合多方因素，我们选取了16号字、17号字为主要验证目标.最后形成16/12 17/12这两组组合来验证线上Feed信息流。
「信噪比」和「视觉搜索」理论中，多次提到增强元素反差比，用户能越快获取资讯；所以我们也尝试了加粗字体和加大文字的实验尝试，用于验证文字反差比的上限。
△ iOS/Android 通用文字
2. 反差比公式
为了更好的验证和观察Feed流中的不同文字字号的反差关系范围，我们提出了一个坐标公式用于验证，可以直观的观察字号，字色，字重三组信息间的关系。
Y轴代表字号，X轴是不同灰阶文字颜色，我们可以将Feed信息组合中的字号放入表格中，通过科学方法检验反差范围。
关于这套验证公式，是我们为了验证文字反差比所提出的检验方法，通过不同实验组中字号的反差范围来验证哪组更适合Feed场景，最后输出成符合当前场景的通用规则。
△ 文字/灰阶反差比推导图
最后，我们选择4组方案进行首页反差比验证，同时将比字号放入坐标轴中,可以看出以下文字的反差范围
△ 在反差比范围内，选取的四种字体组合
上面4个表格分别对应4组反差比验证的字号组合，不同字号组合的反差比范围，我们都可视化出来，以便于更好验证哪个信噪比范围更合理；每组方案的反差比范围都不一样，我们会通过线上实验，选取最适合当前场景的反差比范围，并形成适用于Feed的反差比规则。
这里也是验证首页Feed反差比的上限和下限范围，有时主体并不是反差越强越好，反差也是有阈值范围，超过这个阈值范围，会导致信息展示比例不协调，用户侧也会起到反作用。
目前对于坐标公式验证文字反差比的理论还处于实验理论阶段，我们认为对于字号和灰阶之间，有合理的规则存在，单独对于规则的抽离和梳理，还需要大量样本去实验论证，后续有新的结论产出和模型迭代。
目前线上首页存在以下问题：
为了解决这些问题，我们对于首页的视觉语言进行了优化，通过」信噪比「理论，我们了解到平衡有效信息和杂讯的比例，是保持信息干净清晰，更好触达用户的保证；因此我们重新梳理不同题材的结构，确保核心信息在首页展示的唯一性，去掉了对于用户阅读过程中可能造成阻碍的信息。
△ 首页前后对比
这样，首页上核心信息的展示层级得到统一，保证了信息干净清晰，能够更好触达用户。
在「信噪比」理论和「反差比」实验的基础上，输出了用于线上测试的设计方案，为了验证首页中不同变量的影响，我们把头部，字号，字重，间距这些可能影响首页的因素都拆分验证对于首页影响；同时，根据前面」反差比「的验证理论，我们把」字号加大「和」文字加粗「也放进实验中进行验证，为后续实验积累数据样本。
△ 线上验证首页方案
综合前面的实验结果，最终我们选择了两组这两组方案，目前线上在进行最后实验。在实验中，我们也提取到几点关键指标：
用户对于灰头样式并未特别排斥，这个对于过去头条顶部必须是红色的认知有些挑战；其实当下设计趋势是在减少用户阅读的信息干扰，灰头更符合这一趋势，同时使用灰头也会提升头条整体计品质感，对于后续设计拓展有很大帮助。
加粗字体上，男性用户比较偏好加粗字体，但是女性用户和年轻用户较为反感。
增大Feed字号，信息展示确实更突出，但是影响到整个首页的感官，而且违背了我们的设计目标，同时也不利于后续设计拓展。部分用户手机的展示情况和特殊字体设置都会受到大字体影响，需慎重考虑。
前面有谈及18号字的问题，字号增大确实能增强视觉感官，但要考虑到头条用户比较喜欢运用特殊字体，特殊字体对比通用字体更加个性化，但是字体大小，展示高度并不可控，当字号比较大的情况下，再加上手写字体，效果不可控。
△ 线上手写字体情况
线上实验后，我们也进行了一次线下用户调研，用研结果中用户对新版满意度高于旧版，其中有一个点多次被用户提及到，就是调整后的全圆角搜索框。相比过去的方形搜索框，调整后的全圆角搜索框是能给用户留下深刻印象的视觉记忆。
回顾整个首页改版过程，我们总结了项目中的流程和思考，希望能帮助大家：
1. 定义当前使用场景的阅读需求：
阅读Feed的时候，用户有获取关键信息的强定位属性，同时也兼顾feed信息的浏览属性。
2. 通过「信噪比」理论，明确设计方向：
强化页面内的有效资讯，降低多余杂讯，提升页面内的」信噪比「，达到用户有效接受资讯，轻松获取资讯的目的。
3. 运用「反差比」手段，提升信息反差比，增强信息传递：
文字可以通过字号，字色，字重调整反差关系，并且通过「文字反差验证表」进行反差比范围验证，推导出更适合首页的反差范围，形成首页反差比规则。
4. 线上拆分验证，量化首页影响指标：
线上验证方案，把字号、字重、间距疏密，头部颜色多个维度拆分验证，观察不同个指标对首页影响。
5. 抽离项目中有价值的信息，后续形成统一规则：
间距样式和信息层级统一的feed模块；从矩形到全圆角的搜索框这些知识点都可以沉淀成信息流场景的认知规则，并且给予其它业务和项目理论和实践支持，将理论和线上验证相结合，形成真正有价值的设计方法。
「信噪比」理论可以广泛运用到页面信息设计中，帮助大家合理的梳理核心信息与次要信息关系，并且通过」反差比「手段，增强有效信息或弱化次要信息；保障页面内层级的合理布局，帮助用户更有效的判读信息；这次改版也是对目前认知基础上进行的一次拆解与构建，过去我们所认知的基础目前可能处于变化阶段，这也为我们后续方向探索提供更多可能性。
希望这些能为后续设计起到帮助，给予大家思路与灵感，更好的服务用户。
文章来源：优设 作者：今日头条UED
蓝蓝设计的小编 http://www.lanlanwork.com