输出专业规范的命名，建立有效的设计文件命名系统。
项目之初大家都会建立文件夹系统，用来存放项目资源。这时大家可以运用杜威十进制的命名方式来管理文件命名，方便排序，让我们的项目文件足够清晰，在长期的项目管理中养成一种良好的命名习惯。
项目命名规则
下面以 用户端 V2.1.0_新增直售展位 虚拟项目为例，创建各资源的子文件夹，初步完成文件管理：
00_需求文档（PRD）
01_交互设计（原型）
02_设计文件（设计）
04_竞品分析
05_动效设计
06_应用素材
07_参考资料
08_会议记录
大家可以根据不同项目的性质和流程进行增删，选择最适合自己的项目文件管理方式。
在设计文件中，我们最经常接触的就是画板、图层，少则几十，多则几百，我们需要更轻松的命名排序方式来查找我们的目标，保证团队命名风格统一，清晰的场景命名更便于设计输出和协作，也可以支持后期测试用例的填写。
此时的命名目标在于清楚展示页面的从属关系，以及流程上的交互关系。
画板&图层命名规则
每个画板和图层需要根据功能模块/类型/状态结合数字来进行命名，方便我们对页面进行排序。数字可根据项目文件的操作顺序和权重的具体情况来取舍。
00首页
01详情页
02购物车
03我的
…
在 Sketch 中我们会经常用到一个批量重命名的工具插件 Rename It，这个工具可以快速批量对画板、组、图层进行重命名。文末有一篇震震张关于这个插件的介绍，大家可以学习一下。
画板和画布的命名规范，是为了让每个项目参与者都能快速找到目标，对于设计师而言，可以主动思考页面之间的关系。
一个应用通常需要导出的切图包含众多类型：
对于切图文件夹，可以通过通用文件、控件归纳等方法进行归纳管理。
对于切图命名，可以无需考虑自己的英文命名具有普适性，记得命名最初的目标是：便于团队检索定位，因为开发人员有自己的命名习惯和命名体系。
切图命名原则
标准命名原则：模块_名称_状态 ，如导航栏_按钮_点击；
全局命名规则：模块_全局_名称_状态，如导航栏_按钮_全局_点击（全局使用必须加全局标识）
注意事项
如果产品使用了两个平台的独立设计，需要 iOS 和 Android 两个手机系统的切图单独建两个文件夹，切图文件分别导出，便于前端工程师检索应用。
以上是对设计项目过程中的文件管理及命名规范的一些笔记总结，持续优化~
养成一个好的习惯从现在开始。\（ツ）/
文章来源：优设 作者：木子的小千世界
2020 年未过半，我们就看了许多从前从未见过的人和事，体验了许多从前从未想过的经历。几个月来，「历史性的」、「百年难遇的」、「前所未有的」、「恐慌性的」、「灾难性的」……这些词儿，如同弹幕一般，不停地出现在我们眼前。短短的几个月，许多人变了，许多家庭变了，许多事情变了，但生活还在继续前行。经历过特殊的时刻，在京东的我们，比以往任何一个时刻都要忙碌，也比以往任何一个时刻更能清晰地认识到：「京东的价值、京东给社会的力量」和「我们的责任」。
我们怀着期望，期待我们每一次的改变，都能给你们带来更多的能量。
2020 年初夏 618 来了，京东的生日之际，京东 APP9.0 全新升级，希望你们会喜欢～
1. 品牌力升级
5 月 20 日，京东零售集团宣布进行品牌升级，由原来的「多快好省」升级为「不负每一份热爱」。作为京东集团品牌战略承接的主阵地——京东 APP，将基于全新的品牌精神，着力于满足消费者的多元化、个性化的购物需求，持续对其创造更大的价值。用户在京东不仅仅能享受到好的购物体验，还能享受到更丰富、更用心的产品和服务。通过对京东 APP 不断地迭代升级，我们也向社会、向消费者诠释着京东的每一份用心；京东 APP 也承载着每一个家庭、每一位消费者对美好生活的向往，不负你、我、他（她）的每一份热爱。
2. 产品力升级
未来的 1-3 年，京东将继续在低线市场、低渗透品类上提速；通过对新老渠道、新老内容的矩阵开拓和整合，将单纯的线上购物，升级为全场景的复合式体验；通过新玩法的打造，增加用户的触点，提升粘性和频次。为了更好地承接京东战略与方向，京东 APP 的产品力也亟需升级。
3. 体验力升级
除了品牌力、产品力升级，每一次全新「京东 APP」的到来，也在为消费者不断提供更友好的使用体验力。我们也非常期望能够借助这次版本升级，对京东 APP 进行既精细、又完整的刻画和打磨，期待通过京东 APP9.0，与消费者进一步拉近彼此的距离，让体验更加细腻、更加灵动，全面升级消费者在京东 APP 的体验力。
结合京东 APP9.0 的品牌力、产品力、体验力的升级背景，我们追本溯源，探寻京东自己的脉络。
设计策略的延续升级
基于京东 APP 的核心目标，围绕购前、购中、购后三个环节强化用户内心感知，承接京东的战略在 APP 内的落地。
京东 APP4.0-5.0 主要围绕京东品牌对用户的传达感知进行输出，建立京东的品牌形象；京东 APP6.0 后开始加强场景能力，逐步打造可以满足千人千面的电商设计平台，直至现在，扩宽至全渠道场景，为用户提供更全面、更加细分的体验。
始终围绕产品策略
设计的迭代和产品思维绑定，始终围绕产品策略，一起共建用户的同理心；通过深耕设计解决方案、持续验证推导，来打造值得用户信赖的优质购物体验。
设计将各模块的功能与价值主张相结合，彼此进行联动，保障从产品到交互到视觉，到最后的方案落地都能围绕一个核心目标去服务。
京东 APP 设计始终都是以「产品、业务目标」为核心，围绕「品牌」「用户」「认知」三大方向，结合「设计趋势」来发力；但基于不同的情景、当下 APP 所处的环境，设计改版的侧重发力点有较大的差异；一般来说是「用一个版本来解决 1-2 个的重大体验问题」。
我们结合京东 APP8.0 以来的用户研究报告、用户反馈、各关键模块的数据、竞品对比，从「品牌」「用户」「认知」这三大维度着手，梳理京东 APP 的核心体验问题，进而推导出京东 APP9.0 要解决的核心问题，作为定义京东 APP9.0 设计策略的关键依据。
1. 品牌设计 ——京东APP8.0问题提炼
在细分用户的研究中，用户高频地提到 APP 的品牌感知过于冷静、直接、有距离感，氛围上不够活泼，也存在「京东是正品但价格会不会更贵？」的疑惑。打个比方，可能同样的价格，吆喝声越大，感受上会觉得大声的更便宜、更有爽感。
视觉定义上，一方面，栅格定义过于精细，影响了信息传递的流畅度，需要针对导购类、流程类场景进行差异化删减；主流程内的部分模块留白偏多，拉低了一定的屏效；另一方面，字体的部分梯度比较多、也比较相近，虽然视觉上较为协调和统一，但视觉噪音较大，对主体内容也有比较大的干扰。
人机交互时，过于直接地强调目的性，品牌灵动感待提升。
通过数据测试发现，核心模块的引流效率还有较大的提升空间；两个例子：1、可通过「严格控制变量，测试图片素材的引流效率」，提升「图片素材」的质量，优化核心模块的设计规范；2、通过「图片素材」的质量提升，加上对「坑位容器」动态打磨，经过数据测试，增强品牌灵动感的同时，可进一步提升屏效。
2. 用户感受 ——京东APP8.0问题提炼
细分垂直的用户群，在全流程内的感受上存在割裂感；各个垂直人群在 APP 主流程内已初步形成大的体验闭环框架，但体验闭环的细节还有待补齐与提升，对垂直人群的「权益和身份」的传达还需要在情境上更加一致。举个例子：未开通 PLUS 会员时，高净值人群对 PLUS 身份认同感还有较大提升空间。
商品的活动促销信息展示（时间、最优价格）层级隐藏较深、活动促销计算复杂难以理解，用户促销感受比较弱，所谓酒香真是怕巷子深。我们通过「用户在不同平台内促销感知」的用户测试对比发现，虽然京东的价格最优惠，但由于在表现层上没有进行强调，导致用户在价格感受上存在偏差。
产品感知较理性，主流程内氛围不够活泼，有距离感；这一点，新兴市场用户的感知尤为明显。
3. 认知统一 ——京东APP8.0问题提炼
页面框架一致性问题：主流程过往的版本较为侧重于单一模块内的设计，各个模块间堆积了较多设计不统一的问题。
页面内模块一致性问题：主流程的各个模块内，由于 「新旧版本」「需求不断叠加」等原因，也存在模块内的统一性问题，这增加了用户接受信息的负担。举个例子：APP 结算页在过去的一年内新增了较多的功能与提示场景，由于业务时间有 deadline，很多需求会采用体验降级方案，即用现有控件来设计方案，使得最终方案可能体验不够好，而这里埋下的体验隐患，日后依然要找机会解决。
业务和功能类型不断增加，这会导致页面相对臃肿，这时核心流程的框架亟需重新定义、向三维空间借力来舒展信息架构。
APP 整体的故事性连接还有待强化，货架式的流转只是骨架；各频道内、各模块内也应基于 APP 骨架保有自己横向与纵向故事线，在 APP 内注入故事性的血肉灵魂；让用户在 APP 内流转时，认知更清晰、体验更丰富。
1. 品牌力设计策略
延续、强化京东品牌，构建、升级「京东设计语言体系」 ，提升屏效。通过统一的强调，使品牌可知；通过情感化、IP 化、故事化的表达，使品牌可感。
色彩体系：延续京东品牌调性，主打京东红的品牌色，适当地通过增强配色、减少留白，在保留京东辨识度的同时，通过丰富的色彩体系降低 「冷淡、有距离」的感知。
例如：结合首页及推荐位的坑位颜色，拉通营销色彩规范，HSB 平衡所有色彩梯度；并结合算法给出冷暖色排布规则，区分内容丰富画面（包括首页核心楼层/我京工具与服务/用户资产我的钱包）及核心流程 HSB 平衡，色环关系，品牌色的延伸主导，再到单色、渐变的规律体验，全路径的感知；拉通京东品牌色同阶梯色环，推导所有辅助色色值，根据透明度及饱和度叠加，得到色彩使用场景及渐变关系；提炼营销体系核心规律，营销坑位色彩排布关系，冷暖色阶搭配，引导用户识别。
营销坑位色彩排布关系，冷暖色阶搭配，引导用户识别。（核心楼层为例）
字体体系：延续京东的字体建设，延续性的使用京东朗正和正黑体、加大主字号、精简字阶，拉开字体层级梯度，让用户的关注点更聚焦。针对下沉首页等重点业务采用异形字体，标题与利益点字号字重比重更大，强化营销引导。
icon 体系：线性图标全面 iconfont 化，减少 app 的体积；图标设计更简洁，减少隐喻的手法，让用户「一眼即懂」；平衡视觉的体积差，建立一致性的图标绘制尺寸规范；适当的设计图标互动的微动效，增加趣味性，带给用户「愉悦感」。
栅格体系：在屏效留用率上，基于 8.0 基础定义扩展 12 、24 的倍数关系，栅格做相应的简化；比如在首页/搜索/商详等页面，利用删格缩减间距，提高单屏屏效；首页核心楼层，利用减少间距，放大商品图片，压缩整体楼层高度，使核心内容更加突出，更便于用户识别到有效内容；
优化界面布局，巧用视觉动线，利用人们阅读的 f 型习惯，聚焦用户阅读内容；
素材设计体系：一方面，打磨坑位容器，采用动静态容器相结合的手法。另一方面，打磨坑位素材规范，动静态素材结合使用。同时，尝试压缩容器高度，与羚珑智能设计系统深度合作，进行素材和页面的测试，对运营设计的素材规范进行打磨，在容器高度压缩的同时提升素材质量，保证浏览效率不下降。
2. 用户设计策略
细分用户群体，增强氛围感知、让体验更丰富，层次更清晰。根据细分用户的习惯性、常识性认知，适当地把产品进行分层，让可知可感更加贴合用户；基于全局的统一，有意识细分用户的体验，加强各垂类用户最在意、最可感受的局部差异，从而让体验更加丰富。
PLUS 会员：提高 PLUS 会员身份认同，通过全流程内 PLUS 会员皮肤、氛围品牌一致性露出， 强化「PLUS 专属优惠价格计算」 「PLUS 到手价强化」等权益的感知，进而强化会员身份的感知、加强对 PLUS 会员的认同感。
家庭银发人群：渲染家庭情感氛围，强化优惠及促销的利益感知，简化整体的使用流程，中心化界面采用大字号，为银发人群设计。
新人用户：打造新人专属首页，强化新用户引导，多流程定投新人大礼包、发放新人专属优惠，全方位助力新人用户转化。
校园用户：着重打造年轻化的视觉氛围，拉近与校园用户的距离。
新兴市场用户：扭转用户品牌认知，基于特定人群偏好的氛围组织界面，提升流量分发效率。针对促销较为敏感的人群，通过设计的强调，加强用户低价感知，强化活动促销感知，打消购买顾虑。
3. 认知设计策略
品牌金字塔理论认为关于品牌认知的一系列表象指标，如认知度、美誉度、购买率、满意度、推荐率等，实际上反映了消费者对一个品牌认知的深入程度；这个理论，同样可以适用在产品的用户认知上，认知是一切的基础，产品的用户认知做好了，转化、推荐、满意度才能做好，能够被认知的产品更容易加强情感连接；反过来，不容易被用户认知、认知有负担、信息架构表现层复杂的产品，用户理解起来可能就有障碍，再叠加情感连接的设计，那有可能就是体验的自嗨了。
京东 APP9.0，将针对用户的主流程，骨骼精细化重构、优化流程动线，给用户提供一致性的体验，让认知减负。
4. 感受设计策略
消费者在只有认知的时候是理性的，而基于认知产生好感的时候就会变成感性。
在简化用户的信息认知的基础上，我们将强化打造「京东语言的品牌动效」在核心流程内的模块感知，结合产品的产品领域动态衔接的诉求，在设计上考虑动态效果对「整体上下文，故事连接性」的亮点承接，让用户理性购物的同时，感受到感性的愉悦。
1. 用心设计每一眼感受
设计策略：延续、强化京东品牌，完善并深入刻画京东设计语言；通过设计的语言体系，提升屏幕效率，从而带动流量分发效率、运营效率的提升。
首页视觉风格焕然一新，更灵动、更轻松。（通过 IP 和品牌辅形融入、优化色彩体系等方式，强化京东品牌；通过优化栅格系统、字体系统、色彩体系、动态效果，让界面的信息更加清晰，界面感受更灵动）
2. 用心对待每一个群体
设计策略：细分用户群体，增强氛围感知，让体验更丰富、层次更清晰。
设计要点：打造家庭专属购物体验，和家人一起在京东开心购物与互动。设计上通过暖色调和插画的铺陈，渲染家庭情感氛围；同时，界面采用更大字号，为父母量身定制。
设计要点：打造 PLUS 会员中心化与去中心化的购物体验链路；通过设计走查与用户测试，填补 PLUS 会员在全流程内的品牌、信息触点缺失；同时，从品牌、视觉、交互三个维度，统一设计语言、语境、对话方式，让 PLUS 会员在各个体验触点都能感受到一致的人机交互体验。
3. 用心打造每一个场景
设计策略：基于京东设计语言体系，构建场景；骨骼精细化重构主流程，构建「场景动线」，让体验更流畅。
设计要点：京东到家、便利店、商超、药品、鲜花等门店商品全面入驻京东 APP；用户在主流程内即可以直接搜索下单附近的门店商品，下单后最快 15 分钟内便可送达；由于到家场景依托于主流程，我们在设计时期望用户购物动线能与主流程统一，在商品池打通的基础上，体验上也能完美融合；同时，设计上需结合 LBS 场景特点，在主购物流程中，强化 LBS 与商品、配送的关联，突出商品促销与门店配送时效。
4. 用心打造每一条动线-多元化导购
设计策略：基于「京东视觉语言体系」，细分用户群体构建导购方式；根据用户特性，强化放大「多元」的体验。
设计要点：直播全面渗透，全流程强化直播触点，增大直播的分发场景的用户接触面积；同时，通过动态强化、设计强化的手法，加大对商家私域直播的引导，完善直播场景的体验。
5. 用心打造每一条动线-购物动线优化
设计策略：基于「京东视觉语言体系」骨骼精细化重构购物动线，统一交互、视觉语言，视觉降噪，让认知减负。
6. 用心简化每一次决策
设计策略：关键信息强曝光，统一交互视觉体验；让认知减负，决策更简单。
大促氛围优化：在主流程内突出大促的氛围感知，强化搜索列表、商详等主流程内的大促氛围；结合大促情绪指数设计氛围，逐渐调动用户的热情。根据用户的身份、商品的特性，在设计上突出重要信息，例如强化 PLUS 会员促销腰带等；同时，借助设计规范和设计组件，页面内弹层更加容易拓展、可自由配置。
到手价场景展示：商品详情、购物车内强调商品到手价，在设计上突出优惠结果的传达，让用户一眼便知。
7. 用心满足每一次闲暇
融入品牌、IP 元素，用心打造新颖、有趣、持续的互动玩法。
8. APP9.0
京东 APP9.0 是一个新开始；我们将用未来的时间，用心跟大家诠释，京东全新的品牌价值主张「不负每一份热爱」。用心对待、不负期待、不负热爱，我们在路上……由于篇幅有限，本文就不展开分析详细的设计方案了。
文章来源：优设 作者：京东设计中心JDC
一年一度毕业季来袭高校毕业展海报简直「神仙打架」
大家好，我是美丫姐，今年，因为疫情原因，各大高校毕业生可以说是哭笑不得，先是因为人聚不齐，拍个毕业照都拍不成，只能上手 p。
再是各高校想方设法也要让毕业生有个难忘的毕业典礼，纷纷搞了一出「赛博朋克」拨穗仪式。
这得亏是大白天，要是晚上在校园撞到这玩意儿还不得给人吓个半死！
不禁让网友纷纷大呼「搞点阳间的东西吧！」
但即便是这样，也丝毫没有减少，艺术院校办毕业展的热情全国各地各大艺术院校，都纷纷举办起了线上毕业设计展，斩断大家想逃过做毕设的念头，毕业设计展照常举办，那么毕业设计展宣传海报也一定少不了。
接下来，就让美丫姐带着大家来品品，今年各大艺术院校令人「眼花缭乱」的海报。
广美以其缩写 GAFA 组成的动态 3D 图形利用视差让人产生错觉，颇有几分韵味。
就是搭配上富有节奏的 BGM 后，让人不禁想到那句传唱大街小巷的广告词「一年逛两次海澜之家，每次都有新感觉」。
你看，这亦实亦虚的透明物体像不像甲方虚无缥缈的需求……
彼时，这一叠叠的纸张是一次次熬夜赶的作业此时毕业了，这一叠叠纸张将会是你被打回重做的稿子
去年被全网吐槽的天津美院海报，天美 2019 年毕业展海报
今年选择打一张规规矩矩的保守牌
不管甲方有多奇葩但毕竟给了钱，不管有多少坎坷都得咬着牙勇往直前 ，逆流而上！
这向四面八方发散的线条就像甲方天马行空的想法，没有重点，也似乎没有终点。
稀疏的黑白线条，就像学设计后你的头发，做设计，做到最后白了少年发，又秃了头。
这需要瞪大眼看的 PPT 式动态海报，不正代表着更新迭代快速的时尚圈嘛！
毕业，能带走的是属于大学 4 年的回忆，难以带走的，是积攒 4 年的行李，一看这阵仗，快递费肯定不便宜。
中间的圆就像催眠师摇摆的钟表，这毕设，是越做越瞌睡……
两耳不闻窗外事，一心只往屏幕钻，这才是一个优秀设计师的优良品质。
设计师：「你好，有什么需要我服务的吗？」
甲方：「需要做一个 logo，目前预算 20」
设计师：「好的，再见」
俗话说得好，做设计不带参考线，都展现不出设计师有多用心。这不，理工学院密密麻麻的参考线，哪个甲方拿到手不会觉得物超所值。
只是辅助线过于密集我看了三遍才看出写的啥。
甲方的心就像一个无底黑洞，你永远不知道他在想啥，他给你的意见也总是在你意料之外。
做设计师，不仅要会动手，还得眼观六路，耳听八方能说会道，还要会「嗅」出空气中的氛围，这才能把甲方爸爸服侍得妥妥帖帖。
每个看向不同方向的眼珠，就像一个项目有好几个甲方，每个甲方都有自己的想法。
艺术，总是得留有一丝丝神秘感才能吸引大家的眼球，就像马赛克后内容总是令人好奇。
除了大陆各大高校毕业展海报外，台湾的毕业展海报也是百花齐放。
作品记得署名，被盗了你都没地儿哭去。
水印打得再满也不如自个儿的脸辨识度高，实际上毕业作品是个 AR 滤镜。
设计就是一场探索，多走几次，就能摸清楚甲方的套路。
选专业前犹豫做什么设计，设计系毕业后：「做什么设计！」
遇到蛮不讲理的甲方，多深呼吸几次忍忍也就过去了。
保持一个乐观的心态，才能发现设计的世界多姿多彩。
你看这从上到下密密麻麻的人海，就像是一次次尝试够到甲方需求，却又一次次失败的你。
看这毕设把孩子逼得这医院看来没少去。
无论何时，回忆起肝毕设的日子，就连软件页面都能浮现在眼前。
当你正式成为设计师你会发现，做多了辣眼睛的设计，你的眼球将会变成消耗品。
纵观今天所有的毕业展的海报设计，有的难以理解，有的让人出乎意料，但唯一可以肯定的是，无论条件多糟糕，哪怕不能像往年，有展馆可给学子们呈现自己的创意，热爱设计的大家，创作的热情，也没有被这场突如其来的疫情浇灭。
虽说有些海报可能不能做到，让所有人满意，但校方也尽力，为同学们搭建了一个可以展现，大学四年学习成果的舞台。
文章来源：优设 作者：你丫才美工
通常产品经理在立项前都要思考需求的实现方式：是原生做？还是 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
文章来源：优设 作者：陈子木
蓝蓝设计的小编 http://www.lanlanwork.com