这次我们不聊视觉，也不畅想未来，只说说当下 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
这周我们进行下一步讨论：如何对分析结果进行选择。
首先我们需要了解互联网产品研发团队的各个角色分工。
对于初期的产品研发，可能公司没有团队概念，所以从想法到设计到开发，都由一个人搞定；
等到公司发展差不多，自己成了领导，就可以对各个角色和分工有所分组，也就是大多数初创公司的分配情况：
随着公司业务的发展，产品经理需要处理越来越多的业务规划任务，所以从业务视角和用户视角将之前的产品经理岗位职责进行划分：
所以最终的角色分配是：
再大一点的公司，会增加项目经理岗，把之前产品经理负责的职责拆出一部分，这部分职责就是项目管理。所以角色分配最终是：
了解了团队角色分工，只是让产品得到了更专业的技术支持，接下来我们需要切入正题：对交互方案进行评价筛选，筛选的标准可以围绕：有用性、易用性和吸引力展开。
1. 有用性：
方案是否同时满足业务目标与用户体验目标，为了更好理解，大家可以看下如下事例：
如果所有的线上商品都发顺丰快递，对于用户来讲，用户体验当然很好：够快。但是从业务目标来讲，这是不可取的，毕竟快递不能独顺丰一揽。所以这个想法没有顾及到业务目标，是不可行的；
很早之前，有过 Open ID 的概念：用一个 ID 就可以登录多个网站。但是接入了 Open ID 的网站，对于自身产品的登录注册就会有一定影响，所以这个想法不了了之。
后来 Facebook 和 Twitter 开放了自己 ID，可用这两个账号进行其他网站登录。于是国内很多网站也开始支持微博、微信、QQ 账号登录。
这样降低了用户注册成本，而且也获得了一定收益。所以这是个不错的想法，但是对于一些需要获得用户信息的产品可能不太适合，所以视情况而定。
总结来说，有用性就是要满足产品利益与用户利益。毕竟如果只是很好看，最多也就只能被称作一个艺术品。
2. 可用性
所谓可用性就是用户容易理解，使用起来没有障碍，并且感受良好。
关于产品可用性，大家可以去了解下鼎鼎有名的尼尔森十大可用性原则。
3. 吸引力
所谓吸引力就是产品有打动人、超越用户期望值的细节。
关于吸引力设计，大家可以了解一下 KANO 模型，KANO 模型定义了三个层次用户需求：
基本型的需求：用户认为产品必须有的功能属性，如果没有，用户会不满意；如果有，用户会觉得理所当然。这个层次的需求，还谈不上用户满意与否；
期望型的需求：不是产品必须的功能属性，可能用户自己也不清楚一些功能，但是又恰恰是用户希望看到的。如果这种需求实现得越多，用户会越满意；如果没有满足用户这种期望值，用户会不满意；
兴奋型的需求：对于一些无关紧要的功能需求，如果产品满足了这些需求，用户会非常满意，从而提高用户忠诚度，最后把它推荐给好友。
通过以上标准对方案进行分析，最后涉及到决策，不管哪种类型的角色分配，都需要进行决策，这里可分为以下两种：
个人决策：对于最后的方案选择，由一个人进行「拍板」，这种决策方式速度快，容易抓到事情本质；但是缺点是缺少了团队氛围，不太建议这种一人说了算的决策方式；
群体决策：这种决策方式团队氛围会好很多，通过发表每个人的看法，最后得到合理的、正确的、富有创造力的解决方案；但是缺点就是因为参与者多，需要比较长的时间进行决策，即使这样，也建议使用这种决策方式，不过前提是需要事先确定一个明确的负责人，这样可以对决策后果进行负责。
从小的方面来讲，决策也可分为：
内部 review：设计的作品先在团队内部进行过稿，然后修改，切忌全部做完才进行 review，需要做完一步就进行内部讨论；
外部评审：以会议的形式展开，召集大家对作品进行讲解。
确定了最终方案后，我们需要把它推销出去，具体有以下几种方法：
将思考过程可视化：可以采取上一篇文章的表格分析方式，让设计更有说服力；
自己人效应：对自己人说的一些建议方法更加信赖；
准备一份PPT：展示设计思路；
讲一个故事：以用户的某个使用场景开头，一步步讲解用户的使用情况，慢慢过渡到产品功能设计；
掌握必要的演讲技巧和表达能力：包括口头和文字表达能力，通过这两种表达理清思路，也更好让别人进行反馈。
最后想说的一些话：
作为交互（设计）专业人士，我们需要把握好一个尺度：什么该坚持，什么不该坚持，对于一些专业方面的东西，我们需要团队内部人员都坚持，这样目标会更清晰；但是对于一些比较小的设计细节，有时候可以适当妥协。
如何对设计需求分析结果进行选择：
文章来源：优设 作者：Pony欧尼的日常
以下是百度网盘UE团队近期对会员中心体验进行优化，希望对大家做商业化产品有所帮助。
会员中心是承载着产品增值权益展示、购买、管理的「集合地」。自2016年起推出会员和超级会员两项增值服务至今已有4年时间，随着时间推移，用户对网盘会员的诉求越来越多样，会员中心也不仅仅承载着支付能力，更多地是获取福利信息和情感上的尊享感知，同时在产品框架上的拓展性和效率也有待提升，因此有了本次会员中心改版项目。
对于设计师而言，我们发起这个项目所面临的挑战，不仅停留在用户体验的优化还需要兼顾商业转化。接下来将从确定目标、会员中心框架重构、视觉语言升级、沉淀通用组件等方面，跟大家分享下改版背后的设计思考。
在着手推进项目设计前，我们通过定性和定量的分析，并组织多角色对本次升级的目标进行确认，本次升级的目标是：提升用户决策效率；提升用户尊享感；沉淀设计组件库。
1. 为什么要提升用户决策效率？
会员中心是价值与信息的洼地，用户需要在众多特权、优惠信息中做出决策。整个框架清晰、直观、易懂，是提升用户决策效率及满意度的关键所在。
我们通过支付转化漏斗分析并结合用户反馈发现，改版前，会员中心信息架构比较扁平和单一，缺乏关键性信息的直观展示，比如：优惠信息、会员服务信息，导致部分用户无法在付费过程中更好地做决策。
此外，在支付流程上，操作链条较长，容易引起用户厌倦，导致用户流失。基于这些考虑，我们将对现有框架进行升级，以提升用户的决策效率。
2. 为什么要提升用户尊享感？
会员中心也是用户感知身份变化、感知会员尊享的第一步。改版前，不同身份用户（未开通/会员/超级会员）看到的会员页面却是相同的，无法直观感受到不同身份的差异。
通过UER的用户访谈我们也发现，很多用户出现以下场景：
购买会员后用户，产生疑惑「是否购买成功了吗？」；身为超级会员用户，「感受不到任何尊享感受」；快过期的会员用户，「对会员/超级会员快过期的也感知不到，导致特权中断，影响使用体验」…
因此，我们需要对整体身份的感知进行升级，让用户更清晰地感知到自己身份的层级。
3. 为什么要沉淀设计组件库？
对于产品而言，会员中心也是会员类活动的主要运营渠道。
在日常「小步快跑」迭代需求中，为了提升项目组的开发效率以及更好地实现产品侧多场景模块灵活调用的诉求，需要对复用率较高且灵活多变的模块（尤其是支付模块、特权模块）进行组件化。因此我们也对多个模块进行组件沉淀，提升产品迭代效率。不仅于此，组件化也能给用户提供更加统一的认知，做到产品体验上的统一和规范化。
明确了目标后，我们从以下维度进行设计升级，解决现存问题：懂你所想，会员中心框架重构；凸显尊享感知，视觉语言升级；提升迭代效率，通用组件沉淀。
我们本次框架重构的关键词就是「懂你所想」，只有更了解用户，才能提供更符合用户的选择，从而提升用户决策效率。因此，我们在交互框架层面上，做了以下几件事：打造分层布局；强化关键信息；缩短支付步长；智能化推荐。
打造分层布局
进入会员中心的用户，根据会员成长周期可被划分为：历史未付费用户、会员开通中用户、会员即将过期用户、会员已过期用户。
因此，在这次框架设计中，我们根据身份、动机、行为的差异进行分层布局。改变以往的「多人一面」的布局架构，打造出新的「多人多面」的灵活分层页面布局。
当用户是历史未付费用户时，我们更加突出用户的特权介绍和商品支付，便于用户了解会员服务和商品信息；当用户是开通中的用户，我们更加突出用户可尊享的福利信息，突出尊享感；当用户为即将过期用户或已过期用户时，我们展示用户常用特权信息，唤醒用户付费意愿，并为用户提供便捷的续费能力。
下面是改版前后效果对比，从单一身份感知到多元分层处理。
强化关键信息
关键信息也是用户更为「关心」的信息，通过调研发现，网盘用户更加关注会员优惠活动信息、服务到期提醒以及会员之间的差异性，因此在本次升级中，我们对用户所关心的决策信息进行强化，恰如其分地展示便于用户决策，同时提升用户的付费意愿。
新增运营渠道
通过用户访谈，了解到很多用户总是错过网盘的福利活动，不知道在哪里能接受到一手信息。
因此，本次升级我们在会员中心中新增了运营位，增加用户关注的优惠活动的曝光。
服务到期提醒
针对即将过期或已过期的用户，我们会展示用户常用特权功能的即将到期的信息，避免用户特权功能到期后，给用户日常使用带来困扰，比如使用视频原画备份等功能，我们也会提前告知给用户：「3天后即将到期，将不再享有视频原画备份和在线解压等11项特权」，让用户提前做决策。
强化特权的差异对比
此外，我们还强化了特权对比的差异，分别展示了普通用户、会员用户、超级会员用户拥有特权功能的差异性，便于用户根据自身需求选择对应更为合适的会员服务，避免买错等一系列不便或者多花冤枉钱的行为。
缩短支付步长
为了更方便用户进行支付，让用户付费行为更加顺畅丝滑，我们摒弃以往全页面跳转形式，采用了浮层收银台的方式，减少用户在页面间的跳转而带来的迷失感，达到简化支付路径的目的。
也在用户即将过期等状态，保留了原有前置展示商品和支付操作的方式，让用户一键完成续费，方便又快捷。同时，也会在用户选择商品支付时，展示用户帐号信息，避免用户买错的问题。
智能化推荐
与以往不同，我们不局限于通过理性的信息展示，让用户自己搜寻信息、被动匹配，同时我们也在不断尝试采用更加拟人化、对话感的方式触达用户，推送给用户更为关注的信息，更加精细化地探索多样的运营场景。
比如：针对已付费用户，结合用户的使用场景，更多展示特权信息，如：「周末看视频，2倍速、2K、极速加载缺一不可」；
当我们上了会员新特权的时候，也会及时告知用户，让他们享受更加丰富的权益。
本次对会员中心的视觉呈现也做了全新升级，不仅凸显会员的尊享感、情感化，同时兼顾用户的识别效率及后续拓展性，针对这一目标，我们做了以下优化：卡面升级，提升身份感；品牌色优化，确保拓展性；icon重塑，强化识别性；惊喜彩蛋，提升情感化。
卡片升级，提升身份感
会员身份卡片是用户直观感受身份变化的第一步。本次卡片设计中，在卡片比例上，尽可能接近于实物卡片，并在卡面肌理表达上，采用磨砂质地，更贴合用户自然认知，卡片颜色结合会员品牌色进行设计。同时结合网盘品牌基因中的logo的「云」，提升品牌差异化。
当用户进入会员中心时，采用光影动效，同时描绘「云」型，提升视觉层次感，同时加深用户认知。
品牌色优化，确保拓展性
我们还重新定义了会员体系的品牌色，超级会员选用黑金配色来突显最高级别身份。
主题色延续了网盘会员色系，超级会员为金色，会员为红色，在此基础上调整色彩明度。新配色在产品界面和运营活动上，能给用户带来更加直观的身份感知。
辅助色为黑白，因为它是色彩世界中的 「 经典 」 ，给人以简洁、纯粹的审美感受和视觉享受。以黑白色作为会员体系的辅助色，可以衬托出黑金配色的尊享感。
icon重塑，强化识别性
在特权icon设计中，强化识别性是本次优化的重点，因为图标的目的是用来辅助用户识别，帮助用户做决策的。
我们在icon表现手法上，从「线性」改成「面性」，增强视觉比重；去除底部圆形衬底，采用异型图标，强化icon之前的差异化，同时异型的icon在占比较小的区域里使用更加节省空间，提升拓展性。
比如，当用户是未付费时，特权icon仅作为辅助图形，因为在这种场景下，icon远没有文案更能帮助用户清晰理解，避免用户买错。
因此异型、面性、无衬底的icon处理手法，也是在拓展方面较优选择。
以下是icon优化后的整体效果。
惊喜彩蛋，提升情感化
尊享感，不仅体现在功能、视觉层面，还体现在情感化关怀，因此我们通过彩蛋式翻卡的触发形式，采用对话的方式，展示互动文案。
当用户首次进行翻卡时，它会贴心问候：「很高兴你与你相遇，愿美好时光与你相伴。」；当用户日常互动时，它风趣幽默：「据说超级会员，法力无边！」「你喜欢的样子超级会员都有~」；当有用户关注的重要消息时，它会及时预告式通知：「4.11日即将有一大波优惠福利袭来，超级会员最高5折哦」，从而营造一个风趣又贴心的小管家，也让我们的网盘会员服务变得更加贴心。
会员中心包括个人信息展示、身份卡片、商品和支付、尊享特权、尊享福利、成长体系、专属内容、积分兑换等模块。
其中有多种模块会在多场景中进行复用，为了节省开发及设计成本，同时保证体验一致性，我们本次也沉淀出能够灵活调整各个模块的位置的组件，来提升产品及运营效率。
比如：支付模块；特权展示模块。
支付模块
支付模块承载了会员类商品信息的展示，会在多个场景出现，比如：浮层收银台、会员中心页面、全端收银台，以及会员类运营活动。为了保证支付体验的一致性，我们优先对支付模块进行统一和规范，包括其中的商品展示、优惠展示、以及支付按钮的规范化。
为了便于用户感知到会员与超级会员之间的差异，避免错误购买带来的困扰，我们通过品牌色（超级会员的金色，会员的红色）进行区分。
支付模块的统一和差异，既能保持支付体验的一致性，也能避免用户对会员权益产生误解，为用户带来了更规范的支付体验。
特权展示模块
对于特权展示模块进行特权展示的优化，针对以往特权数量多占用空间大，以及特权展示信息过少用户看不懂的问题，不再采用平铺的方式，而是采用利用横向空间的侧滑方式展示，节省更多空间；不再采用原有的特权图标+特权名称的方式，而是同时展示辅助特权信息，便于用户更加了解特权内容。
并将特权展示方式进行组件化，当有新特权上线时，可直接通过后台配置进行上线，无需进行开发，提升效率。
同时，我们还完成了运营位、专享内容、专属推荐等多个模块的组件化，也根据会员商业化的设计规范，形成会员中心的组件库，提升合作效率及用户统一的认知体验。
以上就是本次会员中心改版项目的全过程，从前期用户调研、目标确定（1.提升用户决策效率；2.提升用户尊享感；3.提升迭代效率），到通过多维度地将目标落地（1.懂你所想，会员中心框架重构；2.凸显尊享感知，视觉语言升级；3.提升迭代效率，通用组件沉淀），不仅优化了体验、提高了效率，也对付费转化率有所提升。
本次会员中心改版，是网盘所有同学的共同努力，同时也是会员中心提供给用户更多选择、更率、更多服务的第一步，它不再是机械的信息展示和冰冷的支付平台，而是更懂用户、提供给用户更多元服务的聚集地。
目前还有很多不足和待完善的地方，我们也在尽最大努力为用户提供更好更有价值的服务，感谢大家一致以来的支持与陪伴 。
文章来源：优设 作者：百度UE团队
今年已经是 2020 了，各位作为时代的弄潮儿，上网冲浪是生活中的不可或缺，丰富的冲浪生活中必不可少的当然是买买买，面对琳琅满目的商品图与文案，用户怎样才能快速抓到重点？或者说，怎么样才能让信息出现在合适的位置？
首先我们要了解浏览信息这个动作的本质和特征，浏览的本质就是大脑通过眼睛去提取信息，是一个传达→解码的过程，在这个过程中又存在一些特性，我们可以利用这些特性去进行一些更的信息传达。
受阅读习惯影响，人们阅读的起始端都是在左侧，结合依据尼尔森等老前辈发布的眼球轨迹研究报告可知，视觉浏览习惯呈「F」型且是不受控的潜意识习惯；同时可以延伸出例如「E」、「Z」等浏览模型，我们可以根据这些视觉模型的特性，结合产品的战略层目标，将信息放置在合适的位置，已达到信息传达率的最大化。
了解了基本的视觉浏览模型，那我们的地基就已经搭建好了，接下来我们来看看地基搞定之后的结构要怎么去布局。
首先我们需要清晰产品的属性，电商平台的本质是物品的交易，因为线上的特殊性，产品中图片与文案对于平台的 GMV 就存在最直接的关系。这个时候，单元布局的轮廓就出来了，就是「商品图+关键词文案」。
同时，不同平台战略方向、发展阶段、团队规模等因素的不同，所针对的用户群体、消费阶层、心智、审美等各个因素都会大不相同，有时候甚至在同一平台中针对不同的活动、不同的品类进行细致的场景划分，产生不同的单元结构以满足商业目的上的需要。
720° 全方位了解平台的属性特征后，我们就可以开始利用这么信息来搭建基本的单元结构了。
例如平台主攻下沉市场，用户群体多为三四线，这个时候用户吸引点在于商品的价格与卖点关键词，这时候我们就可以拉大关键词文案的占比，缩小图片的占比，让他们关注的内容尽可能多的进入他们的眼睛，吸引购买意向模糊的用户点击，增加购买意向明确的用户匹配商品的速度，已达到 GMV 的提升。
简单来说，过程中需要考虑到平台因素所产出的图片尺寸/比例/精致度/是否统一等，与文案搭配所呈现的是否适用当前消费场景及用户心智，是否可以提升用户的转化率，是否可以提升平台的下单率。
单元的架构是多样且复杂的，就像一块七巧板。重点就在于对于产品属性和用户行为、场景、心理等特征的分析，需要权衡各个关键点的重要性，把用户需要看到的信息、我们想让用户看到的信息、用户希望看到的信息以合适的结构状态呈现给他。
我们将大体架构搭建好之后，剩下的就是要把细节元素给点亮，让他们起到一个点睛的效果。
细分一下，其中涉及到的细节元素大致为活动标签、折扣标签、跳转按钮等常规的分子部件，在结构中，图片、商品名称、价格是用户关注的重点，其他的部件则起到辅助刺激的作用。图片和商品名称的大体结构我们在上一步已搭建了，剩下来我们看看这些小部件该如何合理归置。
先从标签说起。整体框架出来了，用户所需要了解的商品信息就已经基本呈现了，这个时候用户心智上更多的主观意向，寻找合适的商品，而标签的出现，更像是一剂兴奋剂，强烈告诉用户：「这个品热度第一！」、「这个品是款！」等我们刺激用户的声音，增强用户查看的欲望。
这个时候疑问来了，那放哪里合适呢？
活动标签，多为显示该商品的热度、促销主题、排名等一些大的状态性的信息，为的是在用户心理层面给这个商品带来更多的好感度，放置的位置可以结合具体场景去分析，可以考虑与商品图进行结合放置。
遵循由上而下滑动的交互原理，我们可知在每个单元的顶部会是滑动浏览时第一被眼睛识别的信息，而且可以利用这个心理去给还没看到具体商品的用户进行一个心理铺垫，比如商品的品质、权威性等，先入为主的进行心理建设，再结合视觉浏览模型，合适的位置就出来了。
次要信息比如倒计时、商品折扣、商品特点等辅助信息，结合布局场景考虑，有的可与图片一起放置增强品质感，有的可与文案一起放置增加决策信息，有的可与价格一起放置，刺激用户进行决策，是很有灵性的一个点睛之笔。
最后是按钮，在这里的按钮可以理解为浏览过程的一个闭环节点，也是一个操作的终结点，是最后的临门一脚。位置当然是在右侧最为合适，降低操作难度，同时也是整个单元的一个视觉终结点，浏览完流程之后决定是否点击跳转。当然，你可以利用你的方式去引导或刺激用户点击，你可以的。
文章来源：优设 作者：阿类杂碎面
蓝蓝设计的小编 http://www.lanlanwork.com