如何评价 Airbnb 发布的 React Sketch.app 工具类app如何运营
点击联系发帖人
时间：2017-09-29 10:01
Airbnb是如何建立起一个征服全世界的设计系统的。我们采访了Airbnb设计副总裁Alex Schleifer，他将告诉我们设计团队是如何帮助Airbnb完成让所有用户宾至如归的使命。
&这家开创性的旅行公司是如何建立起一个征服全世界的设计系统的。Airbnb的使命是让所有人有宾至如归的感觉 —— 无论是入住任何一间住所或在其网站上逗留的期间。这意味着Airbnb必须要与全球用户群有效沟通，并建立一种适应公司快速的发展轨迹的设计语言。我们采访了Airbnb设计副总裁Alex Schleifer，他将告诉我们设计团队是如何帮助Airbnb完成让所有用户宾至如归的使命。&自Airbnb创立以来，设计在公司的地位是如何发生改变的？在Airbnb，设计一直很重要–它就是由设计师创立起来的，并且第一批用户参加了在旧金山举办的一个设计会议。而最大的变化来自团队规模和适应团队规模的相应调整。&我们的设计团队已经进化。今天Airbnb的设计部门包括了研究人员，文案，甚至工程师。我们已经建立了更好的工具和流程。我们所有的产品组都配有设计师。它一直在不断发展，但其核心并没有改变 – 就是对设计深深的热爱。&&设计部门的组织结构如何?设计部是一个由体验设计与研究、内容策略、定位与设计执行等小组构成的多元化组织。这些小组影响着用户（包括像我们的客户代理这样的内部用户）所交互的一切。在同一个部门里拥有这么多专业协作是非常有好处的，因为你会不断接触到设计工作的不同方面。&你的设计团队的核心原则是什么？Airbnb所有决定的背后有一个明确的使命：他们想建立一个每一个人所到之处都有归属感的世界。当应用于产品设计时，这些关键原则即转化为“为信任而设计”和“为每个人而设计”。 这些真正被应用于我们一切的工作中，并最大程度地影响我们的任务进展。2016年4月，Airbnb推出了一个更新的应用程序，旨在帮助人们寻找到可以像本地人一样生活的家庭，社区与体验。你们如何在实践中运用这两个原则？建立信任其实是创造一个环境让信任可以在两个陌生人之间显现出来。有非常显性的方式做到这一点，如审查或验证配置文件，但也有隐性的方式，如我们非常强调真正的人和真正的家园。至于为每个人设计：我们正在为一个真正多元化和全球性的社区建设产品。我们的全球研究有一些独特之处--当主人和客人见面时，他们通常来自世界的各个角落。这意味着我们做出的每一个决定都需要用全球视野来完成。我们的社区也令人难以置信的多样化，确保每个人都感觉他们属于Airbnb，这也是我们用户体验设计的责任。用户研究在其中起着什么样的作用？&我们有强大的研究团队着力于大量的全球研究，并且持续与我们在全球的社区群体会面交流，因为如果缺乏本土的认知我们就不可能开发出真正的全球产品。研究团队通过获取真实的用户反馈来开发和迭代重点内容，同时团队肩负起更大更长远的把控整体产品战略研究项目的责任。研究人员的研究成果对于我们所做的每一个关于产品的决定都是至关重要的。&数据科学也是同理，因为我们的社区群体是如此庞大和多样，有一个专业团队来帮助我们了解分析我们平台上的活动方式是至关重要的。在大多数案例里，数据专家与研究人员密切工作，帮助我们更好地理解我们的用户。我们所有的设计师都积极地学习更多关于数据的知识以及怎么去理解数据。&我们努力地协调艺术与科学之间的平衡，学会这种有益的平衡也是我们在工作获得的回报。数据和研究真的帮助我们更好地把控我们的直觉。&研究和数据科学在Airbnb的产品开发过程中发挥了核心作用&你如何管理Airbnb的产品设计？我们建立了一个设计语言系统（DLS）与一些具体的目标：创建一个在不同学科之间共通的语言，建立一个标志性的视觉语言，并定义组件，使设计和开发软件变得更容易。我们始终以创建一个美丽的，有凝聚力的，易用的app或网站为目标，这一点需要我们每个人参与其中，而不仅仅是设计师。很高兴看到工程师也真正参与到这个项目中。像Airbnb这种规模的东西从来就不容易，有很多方法来定义组件是什么，你的定义应该细微到什么程度，什么应该叫做什么。自推出六个月以来，这些对话大大完善了系统，成为Airbnb更为重要的议题。把DLS整合起来的流程是怎样的？我们先从小的团队开始做起，这个团队基本上建立起我们的产品可能涉及到的模式、流程以及元素。为系统建立一个通用体系是至关重要的，比如相应的通用组件与通用名称。而这恰恰证实了，我们可以用很多前人创造出来很久的东西然后重组成一个井然有序的模式；除此之外，我们做了些视觉以及品牌的工作，以明确未来我们的产品会是什么形态。我们清楚地知道，我们想要让照片更吸引人，想要印刷级的图片质量，支持不同的语言等等。接下来就正式的工作开始了，我们开始着手编写一些小的组件，并且深入UI设计。这就涉及到更多的团队，关于设计以及程序的具体原则方面的对话。&&DLS现在是如何被使用的？它已经改变了我们最开始创建它的方式。它属于所有与我们产品相关的人员，这意味着它每天都在更改迭代。我们看待它的探索是永无止境的。一个设计系统需要紧跟公司的发展，甚至完美地走在前沿，这样才能支持新的项目。Airbnb的设计语言系统由跨学科的共同组件组成，让构建和设计高度审美一致的软件变得更容易。&&&讲故事有多重要？非常重要。我们真的在很多我们的项目上用了故事板。我们是皮克斯这类公司的忠实粉丝，他们经常用专业插画师来沟通一个概念。我们自己也创造了很多内容：短片，动画和音乐，并将它们融入到app或社区。Airbnb有着各种不可思议的人才，我们很幸运有这么一个社区，能给我们带来这么多有趣的故事。你们经常使用外包团队吗？我们会与项目所需的最佳人才合作。这意味着我们多年来一直与许多不可思议的人一起工作.。我们经常会找到有某种特定技能的人才，像插画师、音乐家、数据设计师等。&你们的工作环境是怎么样的？我们大部分设计团队都是在旧金山的多元化的创意空间里办公的。我们的办公室实际上是由好多模块化的“项目间”组成的，每个项目间里都配备显示器、白板、钉板和长桌。每个员工都可以自由选择在办公室周围分布的开放空间办公，当然他们也能通过自由装饰他们的“工位”改变空间。虽然设计团队都是分散着办公，但是我们有几个共用的重点空间。那里的“暴击室”其实是我们的主会议室同时也是我们的工作室，里面都提供各种各样的数码工具和创意产品。&你和你的团队是如何交流的?我们发展速度如此之快，所以减少沟通成本是很关键的。不同的产品团队都有他们自己的节奏，每两个星期就有一个全员大会，整个团队会聚集在一起沟通来自不同组织不同部门的最新消息。每个专业部门也会有自己的周会，本周负责的大部分（或全部的）内容都会及时更新沟通。我尽量多地亲自和团队中不同的人会面，但是当团队超过100个人时，这就会变得很困难。平时我会在办公室中走动，尽力去和我遇到的每一个人聊聊他们正在进行的工作，这是我最喜欢做的事情之一。Airbnb最主要的团队坐落在旧金山，整个办公室的布局是，很多大型项目室的周围都会围绕很多自由的工作空间。你使用任何特定的工具吗？我是Slack的追捧者，它很容易共享文件和反馈信息。我们的团队经常使用它。我总是保持在我的桌面打开它- 我喜欢如果团队里的任何人需要与我交谈就能马上找到我。我们也为资产管理，文件共享和原型设计创建了内部工具，我们将在几个月后分享这些工具。一般来说，我们希望尽量不要让大家负担太多的软件，因为每个团队都有自己的需要。告诉我们原子设计在Airbnb的作用任何以我们的速度构建软件的公司最终都会使用某种原子流程。如果你没有能力建设系统，就没有办法去扩大规模。我们将一切组件化，创建工具和流程，我们正做得越来越好。工具是很重要的一部分。我们有一个团队致力于为我们的设计师建立和集成工具，从资产整合到Sketch到原型环境。快速获得一切是至关重要的，无论是一个图标或一个研究。&&随着公司的发展，你如何把设计思维深入到大型组织环境中？我认为这意味着创建简单的框架和为人们创造正确的环境。我们很幸运，因为设计思维一直是Airbnb的一部分，这使得这件事情做起来更容易。另一件事是确保你不要将“设计思维”看作是完全属于设计学科的东西。&翻译：, lynn_dash Tony 李潇洒、、、、、原文： ————————————————————————————————————————————————我们是DATS翻译小组，我们爱设计爱英语，通过翻译设计的文章共同学习进步，虽然我们还有许多不足，但是只要把每个人的微小的力量聚集起来，总有一天会发出耀眼的光芒~ 欢迎到主页关注我们。
原文链接：
可以记录推荐数据哦！
收录收藏夹
添加到收藏
没有新消息
创建收藏夹
公开(受欢迎的收藏夹将有可能选入站酷精选)
私密(仅自己可见)
下次自动登录
没收到验证码?
下次自动登录
第三方帐号登录
微信二维码登录本文作者：考利木&萨里宁（KARRI SAARINEN），Airbnb首席体验设计师，他在Designer News论坛上开设了&Ask Me Anything&专栏，你可以问他任何关于设计语言系统的问题。在软件开发和设计行业里工作的设计师们，经常会被要求提供一次性解决方案。有些时候，我们会受到时间约束，不得不在deadline前赶紧完成工作；还有些时候，我们只是还没有确定一条能够继续前行的道路，只好退而求其次选择这种方式而已。这些一次性解决方案本质上并不坏，但如果它们不是建立在一个坚实的基础上，到最后，我们就会发现自己不得不去还那些欠给技术和设计的债。可视化语言就像其他任何一种语言一样，如果语言不能让大家使用，也无法分享和被理解，那么误解就会增多。当一款产品受到用户欢迎，或是一支团队逐渐成长，各种问题也会随之出现。设计往往依赖于系统，设计的重点，其实就是如何用一种可扩展和可重复的方法去创造产品。从潘通色卡到菲氏螺钉，这些系统让我们能够管理各种混乱的设计，继而创造出更出色的产品。数字化产品，可以说是应用这些设计系统的一块沃土，但目前来说，似乎还没有得到人们的重视。一个统一的设计系统能够让开发设计变得更好、更快。更好，是因为它能带来一个有粘着力的体验，让我们的用户能够轻松理解；更快，是因为它给了我们一个能够协同工作的共同语言。为什么我们需要设计系统在过去的几年时间里，Airbnb的业务得到了飞速增长。目前我们的设计部门由十几个功能和产出团队组成。显然，我们需要更加系统的方法来引导、应用大家的集体努力。当我们在公司内部认识到一些问题，我忽然发现，这些问题可能也是整个软件行业里存在的普遍问题：一、太少的约束相比于其他设计设计规则，软件设计的实际约束很少，这导致了当我们遇到某个问题或挑战时，都能找到很多不同的解决方案，假设没有较好的约束，那么很容易会造成脱节。作为产品主管和设计师，我们必须要创建属于自己的约束条件，并严格执行。二、太多设计师和利益关系人软件通常是由团队员工开发的，有时开发团队的规模会相当大，设计团队会希望保持用户体验的连贯性，但随着团队人员数量变得越来越多，这个问题就会变得愈发棘手。因为随着时间的推移，无论一开始的体验是多么的连贯，也不管团队规模是否足够小，不同的人总会带来不同的解决方案和设计风格，继而导致产品体验被分散化。三、太多的平台我们的产品需要支持不同的设备和不同的平台。确保功能和设计保持同步需要花很大功夫，也意味着同一个设计工作，需要在各种不同的平台上重复测试很多次。四、软件连续性关于软件，另一个稀罕的事情就是，虽然它经常被看做是一款产品，但其实并不会向传统消费品那样有磨损，更不会轻易被替换。即便是一家历经数次产品转型的公司，多年之前编写的代码和设计，如今依然会在很多地方存在。这意味着你需要有持续的软件维护和升级。准备开工要解决上面提到的这些问题，同时保持我们Airbnb快速的决策过程，我们建立了一个由设计师和工程师组成的小团队【注2】。我们明确了日程表，预留了一个外部工作室（就在Airbnb总部外面），准备全身心投入设计、开发这套设计语言系统（DLS）我们为这套设计语言系统设定了目标，就是要开发一个更加美观，且易于访问的&无障碍&设计语言。通过定义明确和可重复利用的组件，我们的设计将会统一支持各种平台，继而驱动更高效率。为了专注于我们的工作，我们减少一些初始工作，把支持系统首先定位到了两个最主流的原生平台上&&iOS和安卓操作系统。我们这样开始工作的，首先我们把之前许多设计审核了一遍，然后打印出来，不管是老设计还是新设计。我们把所有这些设计，按照顺序平铺在一块面板上，因此就能看到哪些体验在什么地方，以及为什么会出问题，同时也更清楚地看到需要在哪些地方做出改变。我们认为，启动工作的最好方式，就是首先追踪眼前的问题。我们每一个人都专注于重新设计屏幕或产品领域，并且创建了一些指导原则，在我们独立设计的同时，确保协作方向一致：统一性：每一块设计，都是更大整体中的一部分，因此必须站在更大范围的角度上，给予系统积极正面的贡献。设计功能不应该是孤立的，也不能是离群的。普遍性：Airbnb在全世界使用，用户更是一个全球性的社区。我们的产品和可视化语言应该受到用户欢迎，同时也要易于访问。标志性：我们专注于设计和功能，因此在这两方面，我们要即大胆又清晰。对话性：呼吸对生命如此重要，我们要把同样的设计理念融入到产品里面，通过更容易理解的方式与我们的用户进行交流、沟通。打好基础实际上，在基于打好基础这一设计精神之前，我们已经创建了一个基本风格指引&&我们称之为基础。有了这个基础，可以粗略地定义我们的排版，色彩，图标，间距和信息架构。可以说，这个基础是指导我们工作不可缺少的东西，它让我们有了一个统一的方向，也让我们各自有足够的空间独立探索一些创造性设计解决方案。这种打好设计基础的方法，让我们觉得每一个人都是在同一理念下一起工作。我们在每天工作结束的时候，会复核协作完成的工作任务，从中发现很多创新设计类型。必要的时候，我们会纠正一下设计方向，再启动定义我们标准化组件。创建组件传统上，许多设计风格指导，会把设计组件看作是原子组件，之后用它来构建更复杂的分子。理论上，这种设计方法适用于连贯且弹性系统设计开发，然而在实际中，我们经常发现那些可以重复使用的所谓&原子组件&会以很多不同方式被使用，继而创造出很多不同的&分子&。我想再次提醒的是，这种组件设计方式就像是门洞大开，创建出各种杂乱无章的用户体验，导致系统更难维护。我们并没有创建这种独立的&原子组件&，一开始，我们就把组件看作是一个生命体元素，他们有自己的功能和个性，是由一组属性所定义，可以与其他模块共存，也可以独立发展。一个统一的设计语言，不应该只由一组静态规则和独立&原子组件&组成，而应该是一个不断进化的生态系统。举个例子，我们的用户头像元素一开始是根据一个样式指南来设计的，但最终应用到平台上的时候，会发现有数百个头像排列，这样会造成每次更新头像的时候都非常困难。&我们如果想要解决这个问题，必须确保更新之后不会影响其他页面功能。&每一个组件都是由必要的元素来定义，比如标题，文本，图标和图片，有时组件还会包含可选元素。这些元素都是在Sketch文档和代码中定义的，我们要求每一个组件都有一个分频器，而不允许分线器，然后在试图逻辑中将所有元素设置为可见或隐藏。编译组件库在创建这些设计组件时，我们收集了很多组件并汇总到一个称为组件库的主文件中，在整个设计过程中，我们都会引用这个组件库。此后一到两周时间里，我们发现在设计迭代过程中，通过使用组件库能让我们生产力产生巨大的飞跃。直到有一天，我们在设计一款紧急原型产品的时候，忽然发现只用了几个小时就做出了近50个页面设计，如此高的效率完全得益于我们领先的设计框架和组件库。随着组件库里内容越来越多，我们开始把有类似元素的独立组件进行组织归纳进&artboard（画板）&，这些画板之后会根据不同类型进行再分类，包括：导航，移动标签，内容，图片和专业。我们还专门为手机操作系统（iOS和安卓）创建了一套组件，并使之适应平板电脑规格。平板电脑组件和移动手机的基本相同，而在技术层面上，代码基本上是以两种不同的风格出现一次而已。这些系统组件还可以在外观和定位配置上变化，有些像是网页的响应式设计。设计师可以使用一个共同组件来设计某款设备，然后轻松应用到不同的设备屏幕上，不管是iOS还是安卓设备。对于平板电脑，我们创建了一些简单布局的概念，比如Focus Views（聚焦查看），它可将内容聚焦到页面、内容模型、和两列网格布局上。所有组件和视图都是用我们Airbnb自己的技术视图框架构建的，该框架可以处理这些风格、状态、以及适应度。【注2】经验教训我们知道，构建可视化设计语言是个极具挑战的项目，它意味着我们应用程序中很多视图需要重新设计和重新开发。但是我们依然努力实现了设计系统创建，并在4月17日发布了全新的App应用。正如其他任何项目一样，我们希望有些事情做的与众不同。不是所有组件都是对等创建的。在绝大多数App应用里，总有一些组件使用的频率较高，也因此会重复出现。对我们Airbnb来说，这些组件是App里的网格行（或是单元格）。回想起来，我希望我们可以花更多时间去思考如何设计网格行，并设计出更强大的样式集合和组件。最后，我们会用不同类型的设计方法去解决一些矛盾。Sketch：我们期初尝试在Sketch里创建这些组件作为符号，但最终导致了混乱。甚至到现在，我们的Sketch文件有时依然很难维护。如果未来有机会，我们希望可以找到更好的方式去维护和创建新组件。【注3】文档系统：由于这个项目要求我们在很短时间里完成，结果导致了我们忽略了一些文档处理流程。由于缺少文档，设计过程会无可避免地产生一些迷惑。就像编程一样，他们创建的文档系统是开发过程中最重要的一个环节。或早或晚，文档系统都要去做，重要的是，创建文档的过程，也会帮助我们在做决策的时候更加顺畅。归纳总结创建一个可视化设计语言是个无比艰巨的任务，需要我们产品团队付出巨大努力才能完成。但是我们发现，开发我们自己的设计语言系统是非常有价值的，它值得我们投入，因为会给整个产品，甚至整个公司带来巨大飞跃。由于设计语言和代码通常是可以被共享的，我们现在几乎可以同时在所有原生平台上构建并发布产品功能，极大地提高了效率，开发工作因此也变得更快。我们的产品工程师，现在可以专注与产品的功能逻辑，再也不用为编写视图代码而费心思了。不仅如此，如今Airbnb公司的工程师和设计师可以分享共同语言。设计师们也对我们的系统感到非常兴奋，它能让产品审核人员专注于设计的实际概念和体验，而不是抓一些边角料的东西，比如填充，颜色和类型选择，等等。Airbnb设计语言系统让我们对产品的视觉风格有了共同的礼节，并简化了对单一系统的贡献。这个设计语言系统也让我们所有人能以更快的速度和更低的成本开发产品原型或对产品想法进行验证。我相信，在这些系统的帮助下，未来我们可以更专注于实际用户体验，并且开发出我们想要的概念。注脚：[1]:许多伟大的项目都是团队努力的结果，我在此处想要感谢太多人，但我想特别鸣谢一些人，毕竟少了他们，我的这个项目就无法完成，他们是： Bek Stone,?Adam Michela,Amber Cartwright,Alex Schleifer,Michael Bachand, Paul Kompfner, Sean Abraham,Salih Abdul-Karim,Michael Sui，以及设计和工程团队的其他同事。[2]:我会让Airbnb的一位工程师详细编写更多关于设计语言系统技术方面的内容描述。[3]:在我们的例子里，我们想要人们可以改变符号的大小（例如，你需要在一个标题里添加更多内容）。如果你需要调整或是碰巧要调整某些东西，Sketch（&3.5）会自动调整每一个符号实例的大小。这不仅会让你多花上一定时间，同时也会永久性地打乱你的文件（有时甚至undo操作都不起作用）。我们最终把组件放到了Layer Groups里，让用户可以复制粘贴。在文件更新过程中，我们也使用了git/github开源库。我们手工创建和添加新组件到主库的Sketch文件，然后提交&pull request（合并请求，开源库Github的一个代码合并功能）&，此时会有变更日志并产生文档变化的png输出。完成之后，Sketch文件最后会进入到一个可被分享的Box文件夹，该文件夹和Sketch模板关联，这样每个人都可以立刻访问新组件了。（翻译：Tino，编辑：picar）本文由创业邦（微信公众号：ichuangyebang）发布，转载请注明来源，违者必究。
24小时报不停
Uber新CEO：卡兰尼克突然任命新董事极不寻常
小扎为Facebook造成分裂道歉，将向国会提供存疑广告
OKEx被爆多个账号被盗，损失超千万元
1-8月我国生产手机12.6亿部，同比增长2.8%
无序停放堵塞生命通道，深圳警方约谈多家共享单车
途牛：启动突发事件保障预案，客人全部安全
机器人将取代人的角色？57%英国人赞同对机器人征税
麦克·杨等三位美国科学家获诺贝尔生理学与医学奖
杭州上线首个智慧住房租赁平台，租客房东可互相评价
博通发布新一代GPS芯片，定位精度达到30厘米
比特币飙升到4400美元，较低点暴涨近50%
法院裁定：FBI无需公布解锁iPhone的细节
传台湾某公司主控 SSD 藏后门，银监会要求调查
工信部：中国将加快5G、下一代互联网建设应用
传苹果正在调查iPhone 8 Plus的电池问题
顾颖琼回应贾跃亭起诉：将和他在美国法庭交战
报告称Apple Watch总销量3300万块，营收120亿美元
食药监总局： 网络药品经营监管遵循“线上线下一致”
iOS版Google Drive获得更新，整合文件应用
贾跃亭将在中美两地起诉顾颖琼：称其故意造谣诽谤
蚂蚁短租用户租婚房遇惯偷家被搬空 平台称配合调查
AI拥抱Fintech 金融科技或迎来最好的时代
内存条价格疯涨：国产手机涨价 三星美光成大赢家
苹果收购法国计算机视觉创企 Face ID或有新玩法！
中国多方尝试建立信用评估系统 全国征信系统可期
大疆：中国无人机研发制造领先 该输出中国标准了
10月新规新举：民法总则施行 网络跟帖须实名认证
阿里千亿重资背后：菜鸟、京东决战线下物流
阿里千亿重资背后：菜鸟、京东决战线下物流
阿里千亿重资背后：菜鸟、京东决战线下物流
贾跃亭将在中美两地起诉顾颖琼 后者已被发禁令
美国新法即将批准自动驾驶汽车上路 第一年上路2.5万辆
谷歌申请黑科技新专利 大玩空间感知技术操控手机
芬兰开源数据库MariaDB获2290万欧元融资，阿里巴巴领投
工信部副部长:我国将加快5G、下一代互联网建设应用
银监会严打“变脸消费贷” 严查挪用消费贷款资金
共享单车废旧车辆回收存痛点 业内呼吁落实退场机制
苹果iPhone 8 Plus是有史以来最大最重的iPhone
美国宣布将建无人机研究区 打造空测走廊
美媒：阿里成全球云计算收入增速最快的公司update ——&br&&br&去年夏天开始用Sketch，觉得它放Dock里闪亮亮的很好看，当时笑称是男盆友送我的第一颗小钻石噗哈哈。所以那段时间几乎刷遍了所有关于 Sketch 的网站、文章、教程，之后又在自学设计，因为想和更多的人分享 Sketch， 所以用 Sketch 和 Adobe Muse做了这个 &a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Sketch中文网&i class=&icon-external&&&/i&&/a& ，之前新增了 &a href=&///?target=http%3A///%3F/explore/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Sketch中文社区&i class=&icon-external&&&/i&&/a& ，欢迎来提问、探讨和分享喵～&br&&br&之前在社区里有朋友问如何自学 Sketch，正好搬过来希望我的经历能够帮到大家：&br&&br&Sketch 是非常好上手的设计软件，比起花在 PS 和 AI 上的时间，学 Sketch 性价比真的是高太多~让所有对设计感兴趣的人，轻松上手然后用心去钻研设计本身，而不是设置很高的门槛要先啃掉一个巨型工具。&br&&br&值得注意，Sketch 非常适合现在扁平化的设计，做网页和移动端的设计绝对是高效利器。虽然能实现各种 shadow，各种 blur，但并不适用创作逼真拟物的效果，也不是用来编辑位图的工具，要P图还是得 PS 的。&br&&br&&br&—— 自学 Sketch ——&br&&br&step 1 &br&&br&这是Sketch 的开发者 Pieter Omvlee 发布的几个简单教学视频，看完它，建立基本的了解。&a href=&///?target=https%3A///user/pieteromvlee& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://www.&/span&&span class=&visible&&/user/pieter&/span&&span class=&invisible&&omvlee&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&step 2 &br&&br&一字不拉的看完 &a href=&///?target=http%3A///sketch-chinese-user-manual.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Sketch 3 中文用户手册&i class=&icon-external&&&/i&&/a& ，对照着将里面提到的所有功能摆弄一番。&br&不要偷懒了，这是最简单粗暴的学习方法，而且最多花掉20个小时的时间，我计算过。&br&在 Sketch 里所有概念都很容易理解，图层啊蒙版啊，你会发现原来是这么简单的一回事，&br&里面各种工具都并不重型，但绝对满足需求，&br&而且 Sketch 所有操作方式都太人性了，异常顺手。&br&&br&step 3 &br&&br&去研究别人的 Sketch 文件，下载一下免费的 Sketch 资源，看看人家的文件，是怎么管理图层，怎么使用一些工具，怎么实现一些效果，你会受益良多。&br&&br&&a href=&///?target=http%3A///all-free-sources.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&& &i class=&icon-external&&&/i&&/a&&br&超过400个免费的 Sketch资源下载，模板、设备、图标，非常全面&br&&br&&a href=&///?target=http%3A//sketchmine.co/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&sketchmine.co &i class=&icon-external&&&/i&&/a&&br&&p&一位法国设计师收集的Sketch 资源，分类清晰，他同时提供收费的移动App设计课程&/p&&br&&p&&a href=&///?target=http%3A///tools/iphone-sketch-app/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Teehan+Lax - Defining Experience&i class=&icon-external&&&/i&&/a&&/p&&p&大名鼎鼎的 Teenhan+lax 创作的iOS 7 GUI 套件&/p&&br&&p&&a href=&///?target=http%3A//& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Sketch Gems - Premium Design Files for Sketch&i class=&icon-external&&&/i&&/a&&br&&/p&&p&一个用 Sketch 创作UI 套件和图标的团队网站，部分免费&/p&&br&&p&&a href=&///?target=http%3A//& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&BrilliantSketch&i class=&icon-external&&&/i&&/a&&br&&/p&&p&Dribbble 上一位印尼设计师的作品，有资源，有技巧&/p&&br&&br&step 4&br&&br&好了，开始自己做点东西吧&br&如果完全没有头绪，我建议你先从小小的东西开始，比如画一个图标，画一个简单的app页面，&br&你可以自己创作，也可以模仿出色的作品，研究每个效果是如何实现的。&br&&br&&a href=&///?target=http%3A///sketchactive/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&SketchActive&i class=&icon-external&&&/i&&/a&
这里360个图标，也就是我做完上面说的这三件事开始画的，仔细看，其实 iOS 7 的没有技术含量，因为完全是照着画的，而第二套 Businese 的其实挺丑的，图标大小不统一，风格不统一，处理的很粗糙，我现在都不好意思拿出来 & &
但是从 Sweet，coffee & tea 那套开始我找到感觉了，之前用户手册里还有些不太理解的东西当时也都完全明了了，开始把自己的想法倾注在作品中。再后面的几套就已经可以玩一样的很熟练很高效的使用 Sketch了。&br&&br&step 5&br&&br&有了一些实战经验，我们再来补充一些理论知识，有一些很棒的设计师博客，他们分享了各种技巧，帮助你去master Sketch。&br&&br&&a href=&///?target=http%3A//hicc.me/post/design-with-sketch.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&用Sketch来设计&i class=&icon-external&&&/i&&/a&&br& Sketch 3 的新功能&br&&br&&a href=&///?target=http%3A///& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&&br&Sketch 的开发团队 Bohemian Coding 在tumblr 上维护的技巧博客&br&&br&&a href=&///?target=https%3A///sketch-app& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/sketch-app&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&&br&Medium 上关于 Sketch 的collection&br&&br&&a href=&///?target=http%3A//designcode.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Design+code: Learn iOS design and Xcode&i class=&icon-external&&&/i&&/a&&br&一位很棒的 UI 设计师 &a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Meng To &i class=&icon-external&&&/i&&/a&创作的学习用Sketch做设计+用Xcode编程的书&br&&br&&a href=&///?target=http%3A//www.sketchcasts.net/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&SketchCasts&i class=&icon-external&&&/i&&/a&&br&一个葡萄牙设计团队创作的 Sketch 教学视频，每周更新，需付费观看&br&&br&&p&&a href=&///?target=https%3A///sketchplugins/plugin-directory& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&sketchplugins/plugin-directory · GitHub&i class=&icon-external&&&/i&&/a&&br&&/p&&p&Github上由 Bomber Studios制作的一系列插件，帮助你更高效的使用Sketch。&/p&&br&&p&&a href=&///?target=http%3A///sketch-plugins.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Sketch 插件大集合&i class=&icon-external&&&/i&&/a&（ Update）&br&&/p&Github 上由 shahruz
制作的一个叫 Sketch Toolbox 的 Mac 应用，集合了目前绝大多数的 Sketch 插件，在里面可以一键安装和使用。&br&&br&做任何事情都一样，持续的观察，持续的学习，持续的创作，我们都会惊讶于自己的进步的～&br&&br&&br&&br&p.s
如果你好奇我是怎么自学设计的，戳这里看看 &a href=&///?target=http%3A//& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&我的自学路径&i class=&icon-external&&&/i&&/a& ~
update —— 去年夏天开始用Sketch，觉得它放Dock里闪亮亮的很好看，当时笑称是男盆友送我的第一颗小钻石噗哈哈。所以那段时间几乎刷遍了所有关于 Sketch 的网站、文章、教程，之后又在自学设计，因为想和更多的人分享 Sketch， 所以用 Sket…
&b&我是坚决来唱反调的！！&br&&/b&&br&产品经理早期规划产品使用Sketch是极为不合理的，我知道题主肯定是不小心瞄到了那些看起来牛逼闪闪的产品原型图（&a href=&///?target=https%3A///shots/1356038-Kitchenware-Pro-Wireframe-Kit/attachments/193170& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&这里&i class=&icon-external&&&/i&&/a&？、&a href=&///?target=https%3A///shots/1300176-Wireframes/attachments/181309& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&这里&i class=&icon-external&&&/i&&/a&？&a href=&///?target=https%3A///shots/825485-Mac-Chat-Application-Wireframes/attachments/85602& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&还有这里&i class=&icon-external&&&/i&&/a&？）；是不是觉得，哇塞，好酷好专业好有逼格！但是我敢打赌，这些高保真的线框图绝大多数都是设计师在主导并且是业余兴趣使然的作品，你放在实际生产环境中试一试？！绝对吃力不讨好、严重拖延项目进度的不负责任的表现。&br&&br&我是深有体会，一年前我帮好朋友做一个很小的项目，那段时间我也是刚刚学会Sketch，觉得有必要像Dribbble上的歪果仁一样专业，输出高逼格的产品原型图......结果就是，原本我自己评估下来一周可以理顺的产品，我用了近三周时间，这个过程中我一直被设计思维牵着鼻子走，而不是产品严谨的逻辑思维。后来我特地去翻看了Dribbble上那些拿Sketch画线框图的大牛们的Profile和博客，试图去了解和学习他们在项目中是如何协作的，但是，毫无例外，我发现他们对自己的定位都是UI/UX设计师，而不是PM...&br&&br&作为一个同时掌握产品+交互+开发的人，我后来在项目中即时调整了我的工作流程，看我的Dock，我是如此安排在Code之前我的开发节奏的：Axure & Sketch & (QC) & ... 对比之后，发现效率极大的提升，在设计成本一定的情况下，产品策划（Axure） 和 UI设计（Sketch）的时间成本可以保持在3:1的样子；而之前用Sketch的时候，我估计是5:1的样子，甚至更多....&br&&br&&img src=&/ee8bcfee5e3d2bd5e03f5d1_b.jpg& data-rawwidth=&824& data-rawheight=&160& class=&origin_image zh-lightbox-thumb& width=&824& data-original=&/ee8bcfee5e3d2bd5e03f5d1_r.jpg&&&br&我是这么理解我吃饭的家伙们的：&br&&ul&&li&Axure：梳理完成全部产品信息架构和功能。所以Auxre之于我的重要性他不是画图软件、不是交互软件，而更多的是帮助我从无到有梳理整个产品大的脉络&br&&/li&&li&Sketch：基于之前的线框图增强设计感，具象之前的产品；如果产品理顺了的话，设计UI在Sketch的帮助下产出简直是飞速的，这也是Sketch之于Photoshop之流在做UI设计时候的牛逼之处。但是如果你错误的将Sketch定义为规划产品的工具，那产能会十分的低下&br&&/li&&li&QC：仅针对一些极为复杂和细腻的交互动画（千万别试图拿QC当产品的交互工具，搞死你...），配合使用即可，也是帮助自己梳理特效的交互逻辑，避免在真实开发环境中走太多弯路。学习成本略高的软件，我今年上半年花了大力气学习的东西，传送门：&a href=&/question//answer/& class=&internal&&Quartz Composer 如何入门？&/a&（目前QC我已经摒弃了，推荐Principle这款交互特效软件，更高效》》&a href=&/question//answer/?group_id=448000& class=&internal&&如何评价principle这款交互软件？&/a&）&br&&/li&&li&Coding...（业余选手，主要是前端）&/li&&/ul&前面扯的其实已经立场鲜明的表明了我的观点，但是还有一个可能被很多PM忽略掉的，光下面这一点就可以无视掉市面上所有的Wireframe软件：&br&&br&&b&Axure有很好的目录结构，层级关系！&/b&看似只是一个目录，实际上是你整个产品信息架构组成的重要部分，很多产品经理都忽略了这块的重要性。说实话，Axure开发团队如果有心，制定好设计规范，配合好描述性组建，完全可以像Doxygen、Sphinx那样根据目录结果自动生成需求文档。&br&&img src=&/2ae0d1bd789f_b.jpg& data-rawwidth=&498& data-rawheight=&1684& class=&origin_image zh-lightbox-thumb& width=&498& data-original=&/2ae0d1bd789f_r.jpg&&&br&我们再来看下Sketch的目录，他很核心的一部分资源输出实际上是形状的成组以及Artboard画板，仔细看里面的目录结果，跟PS没有任何两样。Sketch被Bohemian Coding发明出来的初衷本来就是希望能够短平快的画出精致的UI，而不需要跟臃肿不堪的PS周旋个没完没了，更加没有想过用Sketch去规划他们的产品。Sketch只是一个设计工具，仅此而已；而 &a data-hash=&831c72493bd2eaeed27a53d& href=&///people/831c72493bd2eaeed27a53d& class=&member_mention& data-editable=&true& data-title=&@huiter& data-hovercard=&p$b$831c72493bd2eaeed27a53d&&@huiter&/a& 所谓的生态圈在我看来不过是支持了第三方插件而已，而所谓的插件功能也只是js写的一堆批处理罢了。Sketch虽然很好很强大，但真心没有必要把一个工具上升到这样一个高度。&br&&br&&img src=&/7c2dcd1fe9dfebc926eafb7f_b.jpg& data-rawwidth=&438& data-rawheight=&1332& class=&origin_image zh-lightbox-thumb& width=&438& data-original=&/7c2dcd1fe9dfebc926eafb7f_r.jpg&&&br&&br&私不见，在两款软件的左侧目录结构中，Sketch的最小单位是Shape，而Axure最小单位是Page，相当于Sketch的Artboard。作为一个产品经理，我关心的是一个Page，而不是Page里面的一个圆角按钮啊亲。&br&&br&总结一下，Sketch会让一个产品经理陷入一个不该他职业本身追求的设计怪圈中去。这里用灰色可以显逼格啊有木有？！圆角头像比直角头像更有设计感啊有木有？！对齐标注什么的应有尽有好方便啊有木有？！...
好吧，这好像真的不应该是产品经理在规划产品阶段需要做的事情吧？！&br&&br&另外，我觉得产品和设计都是产品开发环节中都很重要的两个部分，产品设计的阶段需要严谨严肃的产品态度和逻辑，UI设计则更多偏向情感和用户体验方面的设计；好像所调用的大脑组成部分都不一样？两者真心需要分开对待，同样的选择合适的开发工具也依然很重要～&br&&br&最后的最后...补充一句：以上只是我个人在做项目时候的经验总结以及对工具的理解，每个人对工具的使用习惯和选择的初衷都是不一样的，讨论Axure画原型好还是Sketch画原型好是没有意义的。就好比某些人群在争执是Python牛逼还是Ruby牛逼；亦或者，知乎上的那个段子，「&a href=&/question//answer/& class=&internal&&怎么用WORD达到成为作家的水平&/a&」。
我是坚决来唱反调的！！
产品经理早期规划产品使用Sketch是极为不合理的，我知道题主肯定是不小心瞄到了那些看起来牛逼闪闪的产品原型图（？、？？）；是不是觉得，哇塞，好酷好专业好有逼格！但是我敢打赌，这些高保真的线框图绝大多数都…
很有意思的想法和实践。一边有人在尝试用设计工具生成代码（目前为止都还没有太靠谱的），一边有人在尝试用代码生成设计稿。本质上都是在试图打通编程和设计之间的隔阂。对于这个大命题，后面再细说。&br&&br&具体到 Airbnb 的这个工具，其实他们有很切实的需求。首先公司大了，需要维护一整套设计语言系统；（比如 Material Design 之于 Google，AntDesign 之于蚂蚁金服）同时这套系统不会是完全定死的，会不断地进化、修改。另外，基于这套基础系统，会针对各个具体产品、BU 衍生出很多子系统。问题就在于，每次要改基础系统里的组件或是规则的时候，就会不可避免地产生连锁反应，导致所有的子系统也要同步修改。&br&&br&另外，到目前为止，类似的设计体系在设计文件和业务组件代码上都是分离的。设计师维护一套 ai 或者 sketch 文件，工程师维护三套组件代码（如果用了 RN 或者 Weex，理想情况下可以只维护一套）。也就是说，source of truth 有两个甚至多个。理论上来说，这会导致很多重复工作量：任何改动都需要设计师和工程师在设计稿和多份代码之间做同步。Airbnb 的这个工具的目的就是让基于 React 的代码成为唯一的 source of truth，通过一份代码渲染三端组件 + 生成 sketch 文件。&br&&br&野心很大，不过这带来一个问题：代码到设计稿的生成是单向的。这意味着以后任何对设计的改动必须以代码的形式来执行，也就是设计师必须得会写 React...&br&&br&说来也巧，昨天这个项目的负责人 Jon Gold 在推上跟人争论，他说觉得设计师学不会 React 的人是在小看设计师。说实话，作为一个在设计和开发之间有点跨界的人，我对这样的系统是很欢迎的。但是你要说让随便一个设计师学会 React 是个很简单的事情，还真有点何不食肉糜的感觉。&br&&br&总的来说，我对这套系统的看法是：想法很有前瞻性，但落地对团队要求极高。主要的原因在于这套系统就是想用一套生产环境代码通吃，那么组件中不可避免会混杂相当多的交互和工程细节。从工程师的角度说，一个普通设计师学了点 React 基础，你放心让他改么？如果这个设计师的代码水平都可以直接改生产用的组件了，这样的人又有几个？客观来说，能够负责设计系统的设计师，肯定已经得是设计师里面逻辑思维能力很强的那种了。但这样的以代码为 source of truth 的系统，负责基础组件的团队必须个个是设计和开发的高级跨界人才，衍生子系统的设计师也得有初级工程师的代码能力。&br&&br&回到之前更高层面的命题：设计和代码的结合，到底应该是设计主导，还是代码主导？如果透过工具看产出的本质，最终生成的其实都是一堆数据结构。但是不同职位的人会有不同的看法。工程师会觉得代码主导是更靠谱的，因为代码本身描述数据结构更精确，也更 scalable；设计师则会觉得设计主导更靠谱，因为代码的成本过高，灵活性太低，限制了他们的创造性和工作效率。这里面本质上是设计作为创造性工作和实际开发工程化的工作方式之间的冲突。&br&&br&能够跨界并且两边都很深入的人很少，一方面是能够跨越两种思维模式的人本来就少，另一方面是以目前软件工程和设计的教育体系来看，这样的人才难以体系化地量产（国内尤其）。如果从教育环节就开始针对性的培养，或许将来某一天这样的人会多起来。但目前而言，这样的人即使在国外也属于稀缺物种，而依赖这样的人才的设计/开发体系，也只有在极少数有条件的公司才有运行的可能。
很有意思的想法和实践。一边有人在尝试用设计工具生成代码（目前为止都还没有太靠谱的），一边有人在尝试用代码生成设计稿。本质上都是在试图打通编程和设计之间的隔阂。对于这个大命题，后面再细说。 具体到 Airbnb 的这个工具，其实他们有很切实的需求。…
12月28日更新————————&br&&b&Marketch ( for UI)&/b&&br&来源&a href=&///?target=https%3A///tudou527/marketch& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&tudou527/marketch · GitHub&i class=&icon-external&&&/i&&/a&&br&&br&用过Zeplin的同学基本泪流满面，而这个免费插件可以让你泣不成声。&br&&br&直接在本地生成html，非常便捷查看尺寸颜色等参数，和Zeplin一样的思路。不仅免费，而且公司也不用担心云端的安全/隐私问题了。&br&如果说Sketch Mearsure可以节省你一杯咖啡的时间，这玩意可以节省你一顿饭的时间。&br&&br&真正的彻底告别标记尺寸和颜色等dirty work。&br&做了多年ERP的我明白了一个道理，能用机器代劳的活一定不要人来干。大家的时间都很宝贵，我们还是做点更有意义的事情吧。&br&&img src=&/3ea9dda14b75c3d754dcd_b.png& data-rawwidth=&917& data-rawheight=&730& class=&origin_image zh-lightbox-thumb& width=&917& data-original=&/3ea9dda14b75c3d754dcd_r.png&&&br&&br&&br&以下原文——————————&br&&br&经常用这几个，感到非常不错，推荐一下。&br&&img src=&/4f44f913bdd5d8ab00945_b.jpg& data-rawwidth=&323& data-rawheight=&131& class=&content_image& width=&323&&&br&&br&&br&&b&AEFlowchart (for UX)&/b&&br&来源 &a href=&///?target=https%3A///tadija/AEFlowchart& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&tadija/AEFlowchart · GitHub&i class=&icon-external&&&/i&&/a&&br&Flowchart 顾名思义，就是出流程图的。&br&&img src=&/6d3295b2acbb32a7db78d6c_b.jpg& data-rawwidth=&715& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&715& data-original=&/6d3295b2acbb32a7db78d6c_r.jpg&&共有四种控件样式 Decision | Input Output | Process | Start End&br&自动生成对应样式，一键连接所有元素。&br&注意：生成连线为1px，且图层默认被锁定。颜色过浅，有时候需要自己调整下border颜色，大神可以自己去调整脚本里的相关参数。&br&Sketch 升级到3.2.2之后经常没法自动连线，比较苦恼。&br&&br&&br&&b&Content Generator Sketch Plugin (f&/b&&b&or UI/UX)&/b&&br&来源 &a href=&///?target=https%3A///timuric/Content-generator-sketch-plugin& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&timuric/Content-generator-sketch-plugin · GitHub&i class=&icon-external&&&/i&&/a&&br&这个插件真是酷炫至极&br&&img src=&/ae112a5ac68e106f8eb95f_b.jpg& data-rawwidth=&147& data-rawheight=&88& class=&content_image& width=&147&&&br&可以自动填充地名人名图片和长文本。&br&做Contact Card时候简直像开挂一般高效。&br&&img src=&/0cab2d2a1ef330aa74f8aa3c4339ba54_b.jpg& data-rawwidth=&432& data-rawheight=&318& class=&origin_image zh-lightbox-thumb& width=&432& data-original=&/0cab2d2a1ef330aa74f8aa3c4339ba54_r.jpg&&填充图片还分男女，人名也分性别。还能自动生成邮箱和电话&br&&img src=&/9a633feeabfb204bac945e14bbde72a4_b.jpg& data-rawwidth=&253& data-rawheight=&386& class=&content_image& width=&253&&&br&可以节省大量时间，让你的Mockup看起来更加逼真。&br&&br&&br&&b&Sketch Measure (for UI)&/b&&br&&b&来源&a href=&///?target=https%3A///utom/sketch-measure& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&utom/sketch-measure · GitHub&i class=&icon-external&&&/i&&/a&&/b&&br&&b&强烈推荐，满星好评！&/b&&br&解救广大UI Designer于水深火热之中的神器，能够彻底解决开发人员和设计师之间沟通不畅的问题。&br&UI Designer最终产出物少不了Visual Guideline. 制作这份文档真是庞大的工程。&br&每个控件，页面的尺寸标记，颜色标记还有字号标记，最终页面的实现效果完全取决于这份文档的细腻程度。通常，有了这份文档，开发严格执行，最终页面还原度还是非常之高的。&br&这个插件就是可以在页面上自动标记出相关参数。&br&&img src=&/f70cb0a574cdafdca9ad331ec8645930_b.jpg& data-rawwidth=&474& data-rawheight=&404& class=&origin_image zh-lightbox-thumb& width=&474& data-original=&/f70cb0a574cdafdca9ad331ec8645930_r.jpg&&当然，不同的公司在这个环节执行的方法各不相同，标记的方法也不一样。&br&Case by case的来看，这款插件还是十分实用的。曾用过Markman和Pxcook，总是觉得还是有不尽人意的地方。&br&这个插件标记起来不仅仅的自动的，而且在源文件里直接标记...&br&整齐的文档，带着标记交给开发。相互之间还有什么好抱怨的呢？&br&&br&&b&Sketch Notebook Master (for UX)&/b&&br&来源&a href=&///?target=https%3A///marcosvidal/Sketch-Notebook& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&marcosvidal/Sketch-Notebook · GitHub&i class=&icon-external&&&/i&&/a&&br&&img src=&/a7edde5e9bea_b.jpg& data-rawwidth=&711& data-rawheight=&443& class=&origin_image zh-lightbox-thumb& width=&711& data-original=&/a7edde5e9bea_r.jpg&&&br&交互设计师都想让自己的mockup变得更加整洁，但为自己的设计写上注释是少不了的事情。整理格式会花很多时间，不整理看起来又很乱，说明太多经常会盖住相关内容。&br&这个插件可以自动生成一个边栏用来写相关注释。选中相关控件，即可生成标记icon，右侧生成comment.
comment可以自动排序对齐，十分方便快捷。&br&&br&&b&Taobao Image Sketch Plugin (for UI)&/b&&br&来源&a href=&///?target=http%3A///%3Fpage_id%3D1520& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&DOWNLOAD | LIAO ZCHENG&i class=&icon-external&&&/i&&/a&&br&&br&&img src=&/c66b3cb975bbc45a62ee1_b.jpg& data-rawwidth=&640& data-rawheight=&385& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/c66b3cb975bbc45a62ee1_r.jpg&&来自Taobao UED的优秀插件，基于Content Generator Sketch Plugin 修改的接地气的版本。&br&经常做电商平台产品的童鞋用起来还是非常不错的。&br&&br&日常工作主要用的就是这些插件，全免费。&br&Sketch真的是不可多得的优秀软件。&br&99美刀，你值得拥有~
12月28日更新———————— Marketch ( for UI) 来源 用过Zeplin的同学基本泪流满面，而这个免费插件可以让你泣不成声。 直接在本地生成html，非常便捷查看尺寸颜色等参数，和Zeplin一样的思路。不仅免费，而且公司也不用担…
&img src=&/3f58c1e15fbfc7de5e8d74_b.jpg& data-rawwidth=&707& data-rawheight=&170& class=&origin_image zh-lightbox-thumb& width=&707& data-original=&/3f58c1e15fbfc7de5e8d74_r.jpg&&&br&TL;DR: Bohemian Coding 是一个高效务实而且懂得做产品的小团队。但也因为团队小开发实力有限主打产品 Sketch 仍存在不少问题。&br&&br&先从这个小公司的历史说起。&br&&br&Bohemian Coding 在 2008 年成立，主要专注于开发 Mac 软件。&br&&br&Bohemian Coding 最初几年是个 one man company。创始人 Pieter Omvlee 是一位很有干劲的 Mac 开发者，在公司创立之前几年他一直利用大学课余时间开发一款矢量绘图工具 DrawIt。他创立 Bohemian Coding 的初衷是制作界面精致又好用的 Mac 应用。2008 年他联合优秀设计师 Laurent Baumann 打造了第一批产品：字体管理软件 Fontcase 及完全重设计的 DrawIt，于 2009 年初正式发布。得益于 Laurent Baumann 的卓越设计，两款软件包括产品网站都异常精美。其中 Fontcase 在当年获得苹果设计奖（Apple Design Awards）。&br&&br&&img src=&/5bcbf339b40ce63c73b889e17a0cc873_b.jpg& data-rawwidth=&1067& data-rawheight=&753& class=&origin_image zh-lightbox-thumb& width=&1067& data-original=&/5bcbf339b40ce63c73b889e17a0cc873_r.jpg&&2009 年最初上线的网站。&br&&br&随后 Laurent 入职苹果。Pieter 找到另外两位优秀设计师 Kevin Kalle 及 Emanual Sá 合作继续开发新产品。2010 年 Bohemian Coding 推出了 Sketch（DrawIt 的进化版），Sketchpad（Sketch iPad 版），Review（用于在 iPhone 上预览设计稿），SlipCover（Mac 下管理电影、专辑、游戏封面的免费应用）。此时的 Sketch 主要定位于小巧的矢量画图工具，而不是专业设计工具，依然比较小众。&br&&br&&img src=&/a9fb7fac3d680f845a993c_b.jpg& data-rawwidth=&1037& data-rawheight=&656& class=&origin_image zh-lightbox-thumb& width=&1037& data-original=&/a9fb7fac3d680f845a993c_r.jpg&&2010年12月最后一版 DrawIt 的界面，可以看出是 Sketch 的雏形。&br&&br&2011 年中 Emanuel Sá 全职加入 Bohemian Coding，成为联合创始人。他和 Pieter 决定把 Sketch 打造成最优秀的 UI 设计软件，甚至要比 Adobe Photoshop 更好用。这是一项非常有雄心的计划，工作量也很浩大（可以看作把 TextEdit 升级成 Pages），而他们只有两个人。他们还希望赢取 2012 年的苹果设计奖，因此两人赶在九个月内完成了所有设计和开发工作，在 2012 年 5 月正式发布了 Sketch 2。Sketch 2 发布后获得知名设计师的一致好评，也顺利赢得了当年的苹果设计奖。尽管 Sketch 2 初期 bug 很多而且容易 crash，很多设计师仍然迁移过来把 Sketch 用作主要设计工具。&br&&br&之后 Bohemian Coding 一直把 Sketch 作为最核心的产品，经过近两年的打磨 Sketch 已经优化了许多，最近他们发布了更加优化稳定的 Sketch 3，并添加了一些好用的新功能。&br&&br&&img src=&/9c8e5e05a5ca25a164e12a62d27be0db_b.jpg& data-rawwidth=&1294& data-rawheight=&779& class=&origin_image zh-lightbox-thumb& width=&1294& data-original=&/9c8e5e05a5ca25a164e12a62d27be0db_r.jpg&&最新发布的 Sketch 3 &br&&br&目前 Bohemian Coding 团队已扩大至 5-6 人，后来加入的有工程师 Sam Deane，设计师 Christopher Downer 和 Alberto Calvo。&br&&br&当然，团队里最核心的两位成员依然是 Pieter Omvlee 和 Emanuel Sá。&br&&br&Pieter 最早学习 Mac 开发的平台是 REALbasic，他学了一段时间发现 REALbasic 实在做的很烂，甚至 REALbasic 本身都不是用 REALbasic 开发的，于是他得到一个很重要的教训：自己开发的产品一定要自己用，否则永远不知道做的多糟糕。他本人一直用 DrawIt 或 Sketch 画自己的软件界面草稿。Sketch 2 之后 Bohemian Coding 所有产品及网站界面都是用 Sketch 设计的。&br&&br&Pieter 转学 Cocoa 不久，Delicious Library 发布了，这款由 Mike Matas 设计的软件相当惊艳，而且销量惊人，Pieter 深受打动，他决定也要做这样漂亮又好卖的软件。但他设计不出这么漂亮的界面和图标，反复琢磨后他决定干脆做款绘图软件好了，并且马上着手开发。开始后他才发现做绘图软件比想象中难多了，但他还是咬牙坚持下来，在 2006 年发布了这款名为 DrawIt 的矢量绘图工具。DrawIt 发布即定价数十美元，但由于问题较多，收到不少差评。尽管如此，Pieter 没有气馁，反而得到很重要的经验：软件收费很重要。软件免费又做的差用户肯定不会浪费时间留下有价值的反馈，当用户付了钱购买了软件，才会耐心地反映问题和提供建议。这一定程度上解释了为何连 Sketch Mirror 这样的辅助应用也定价 $4.99 以及为何 Sketch 3 要重新收费。&br&&br&Bohemian Coding 没有专门的客服，没有专门做市场营销，销量提升基本靠口碑。Pieter 认为由产品人员处理好客户反馈就是最好的营销策略。前阵子我试用了 Sketch 3 并给他们反馈过不少问题，全部都是 Pieter 自己回复。与他沟通的过程中感觉他们非常虚心和务实，收到的 bug 马上改，而且迭代速度相当惊人，小问题当天修好并发布新 build（每天至少 3-5 个 build），比较花时间的问题或建议若采纳的话他会回复「已加入 list，将在未来更新」。&br&&br&2011 年加入的创始人 Emanuel Sá 是全能型设计师，设计 Sketch 2 时他包办了 Sketch 2 的产品、界面、图标、网站以及 Bohemian Coding 品牌的重设计。我之前曾有幸与他短暂共事过，当时感觉他对色彩的把握相当好，设计的界面、图标的配色和质感都相当舒适漂亮，但另一方面他并不热衷于设计华丽花哨的东西，对如何做好一套产品自有一套原则和想法。这在 Sketch 2 的设计完全体现出来：他为 Bohemian Coding 重设计的网站大胆地用了黑色与金色的强烈搭配，而为 Sketch 2 设计的界面为了避免给用户带来干扰，看起来完全是 OS X 原生风格（实际上很多界面细节是定制过的）。他主导设计出来的 Sketch 2 和 Sketch 3 无论在上手容易度、功能体验及交互细节上都比 Photoshop 好很多。&br&&br&&img src=&/f0ecced68b2de1d61865b9_b.jpg& data-rawwidth=&1164& data-rawheight=&909& class=&origin_image zh-lightbox-thumb& width=&1164& data-original=&/f0ecced68b2de1d61865b9_r.jpg&& Emanuel Sá 设计的 Sketch 2 网站，风格非常强烈。&br&&br&后来加入 Bohemian Coding 的两位设计师也很有来头，Christopher Downer 之前是 Realmac Software 的设计师，参与过 Clear，Analog 等产品的设计，加入 Bohemian Coding 后他协助设计了 Fonts 和 Sketch。Alberto Calvo 之前是 Tuenti 和 Youzee 的设计师，目前负责 Bohemian Coding 的网站设计。&br&&br&总体说来，Bohemian Coding 的优点是团队小，执行效率高，而且所有团队成员都对如何做好产品有深刻的把握。缺点也是团队太小，一来 Pieter 长期单枪独马包办开发，一个人经验再丰富也能力有限，所以 Sketch 一直有不少程序上的硬伤无法解决，非常影响使用体验。二来因为他们是小团队无法进行全面的测试，而绘图软件使用情景又很复杂，一百个人用可能会遇到一百个不同的 bug，尽管 Sketch 改进速度很快，依然会给人感觉问题多多。&br&&br&* 以上关于 Pieter Omvlee 的描述大多来于他在 BubbleConf 2013 的演讲。 &br&&a href=&///?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Pieter Omvlee at BubbleConf 2013 on Vimeo&i class=&icon-external&&&/i&&/a&
TL;DR: Bohemian Coding 是一个高效务实而且懂得做产品的小团队。但也因为团队小开发实力有限主打产品 Sketch 仍存在不少问题。 先从这个小公司的历史说起。 Bohemian Coding 在 2008 年成立，主要专注于开发 Mac 软件。 Bohemian Coding 最初几年是个 one …
在一个工作流中讨论单个工具好与坏意义不是很大，关键是看个人和团队的选择。&br&举个栗子来说下基于Sketch为核心设计工具的周边协作软件吧：&br&1、产品前期的思考、沟通阶段：口头交流＋白板＋白纸＋笔，这个阶段主要是发散和记录想法。&br&&img src=&/dad783ec295f1c3fc128f0d_b.jpg& data-rawwidth=&852& data-rawheight=&640& class=&origin_image zh-lightbox-thumb& width=&852& data-original=&/dad783ec295f1c3fc128f0d_r.jpg&&&br&2、产品结构和逻辑梳理阶段：思维导图软件＋流程图软件。&br&&img src=&/fff16a79b75ae72a4b37_b.jpg& data-rawwidth=&587& data-rawheight=&124& class=&origin_image zh-lightbox-thumb& width=&587& data-original=&/fff16a79b75ae72a4b37_r.jpg&&&br&3、产品UI设计和资源输出：Sketch，它的优缺点讨论也很多了，这里就不多说了。&br&&img src=&/3bf61cbb9b379bf6b9a38_b.jpg& data-rawwidth=&1061& data-rawheight=&653& class=&origin_image zh-lightbox-thumb& width=&1061& data-original=&/3bf61cbb9b379bf6b9a38_r.jpg&&&br&4、产品交互演示、资源管理：InVision，它本身就有同步功能也可以配合Dropbox使用。&br&&img src=&/82b15e137f65d31b2d1e0aa41fc074e8_b.jpg& data-rawwidth=&1103& data-rawheight=&758& class=&origin_image zh-lightbox-thumb& width=&1103& data-original=&/82b15e137f65d31b2d1e0aa41fc074e8_r.jpg&&&br&5、面向开发的界面标注以及Guideline提取：Zeplin，在Sketch中Commnd+E一步导入。&br&&img src=&/87b61ca866ccdc727f7f01b0ceb7b493_b.jpg& data-rawwidth=&1092& data-rawheight=&773& class=&origin_image zh-lightbox-thumb& width=&1092& data-original=&/87b61ca866ccdc727f7f01b0ceb7b493_r.jpg&&&br&最后，怎么没有交互工具？因为交互在纸＋Sketch过程中已经完善了。&br&最后，我们的目的是有条理的把事情做完。你应该配合团队的选择，除非你是主导团队并具有强大的推动能力。&br&最后，不要否定一个强大的广泛使用的工具，也不要害怕尝试新的可能的工具。
在一个工作流中讨论单个工具好与坏意义不是很大，关键是看个人和团队的选择。 举个栗子来说下基于Sketch为核心设计工具的周边协作软件吧： 1、产品前期的思考、沟通阶段：口头交流＋白板＋白纸＋笔，这个阶段主要是发散和记录想法。 2、产品结构和逻辑梳理…
Zeplin 面向的用户是设计师和前端（Web、Mobile）工程师，相当于做的是中间桥梁这一块，核心功能为标注、Style Guide、备注文档与简单的团队协作。这块软件由四名在伊斯坦布尔的开发者制作，目前仅支持 Sketch，但是 PS 也已经出现在官网，应该也快了。&br&&br&在使用 Zeplin 之前，最早是使用马克曼进行标注的，也就是直接在输出效果图上量尺寸；使用 Sketch 插件 Measure 之后，可以在画板中生成尺寸标注信息，导出标注图提供给开发同学使用。无论是马克曼还是 Measure，最后的交付物是一致的，大概如下图所示：&br&&br&&img src=&/b67ffc138cac6bcb9f89d69_b.jpg& data-rawwidth=&2048& data-rawheight=&1536& class=&origin_image zh-lightbox-thumb& width=&2048& data-original=&/b67ffc138cac6bcb9f89d69_r.jpg&&&br&这样的标注图有个问题，就是已经破坏了原本的视觉效果图，标注的信息一定会对原设计稿形成遮挡，因此一般效果图和标注图要分开给，开发也经常需要在两个图之间切换，图片管理不太方便。如果你的设计稿同时要适配多个尺寸，还要要输出多份标注图，交付给多个开发同学。更重要的是，如果对页面进行了迭代修改，就需要重新标注、重新输出、重新交付，即开发与设计之间的联结是断的，每次都要人工把这个缺口接上。&br&&br&另外，如果时间有允许，设计师还需要制作 Style Guide，一方面是为了方便切图，另一方面是为后期迭代做好准备。Style Guide 大概要包含的是字体信息、色彩信息、icon 样例、常用间距等内容，如果自己制作的话，大概类似于是这样：&br&&br&&img src=&/07df864f9f5c22adcef15_b.jpg& data-rawwidth=&1905& data-rawheight=&1096& class=&origin_image zh-lightbox-thumb& width=&1905& data-original=&/07df864f9f5c22adcef15_r.jpg&&&br&Zeplin 主要就是为了解决上述问题的，使用它之后，可以在 Sketch 中一键导入 Artboard，在设计师做好图层管理（命名、分组）的前提下，它可以自动生成标注信息（并且可以标注为 pt 或 dp），允许添加注释形成类 prd 文档，并且自动提取 Style Guide，同时还允许添加项目组成员，提供给团队组查看项目。&br&&br&&img src=&/0f9eacf1b_b.jpg& data-rawwidth=&980& data-rawheight=&660& class=&origin_image zh-lightbox-thumb& width=&980& data-original=&/0f9eacf1b_r.jpg&&这是项目组管理界面，还有关于项目的简单统计，比如多少页屏幕、多少色彩和多少注释等。&br&&br&&img src=&/d0b9cb011b_b.jpg& data-rawwidth=&1440& data-rawheight=&900& class=&origin_image zh-lightbox-thumb& width=&1440& data-original=&/d0b9cb011b_r.jpg&&Guideline，可以承载字体、颜色。&br&&br&&img src=&/9e3e3db4badcd50d12d2ed_b.jpg& data-rawwidth=&1440& data-rawheight=&900& class=&origin_image zh-lightbox-thumb& width=&1440& data-original=&/9e3e3db4badcd50d12d2ed_r.jpg&&&br&图片界面，当鼠标不悬浮在某个元素上时，可以查看整个界面的效果图。右侧可以看到所有使用的颜色列表。当需要查看标注时，点击对应的元素即可：&br&&br&&img src=&/ba47e525e218da595acebbd5fe4cd78a_b.jpg& data-rawwidth=&1440& data-rawheight=&900& class=&origin_image zh-lightbox-thumb& width=&1440& data-original=&/ba47e525e218da595acebbd5fe4cd78a_r.jpg&&&br&这样的话，设计师和工程师就可以无缝衔接了，团队的开发同学都说这个工具太牛了：）&br&&br&缺点的话，目前有一些体验上的小问题。比如图片是存储在境外服务器上的，不管是登录还是使用最好都能自带梯子翻墙（使用好像并不需要翻墙，我都可以，但是注册登录一定要），一开始就是因为被墙的原因多次登录不上。其次是产品本身还是 Beta 版，处于邀请码阶段，所以肯定会有一些 bug 存在，像全屏之后右上角没有常用的放大缩小关闭按钮，还有 Sketch 插件一键导入快捷键经常失败等。&br&&br&这个开发团队的效率并不是特别高，我没记错的话这个软件去年很早就已经开始放出消息了，做了大半年快一年现在还是 Beta 版，PS 版说是快了，具体什么时候能上也是个未知数。不过团队的设计、风格还是很合我口味的，注册之后很快还发邮件过来询问使用感受，希望他们加快速度。
Zeplin 面向的用户是设计师和前端（Web、Mobile）工程师，相当于做的是中间桥梁这一块，核心功能为标注、Style Guide、备注文档与简单的团队协作。这块软件由四名在伊斯坦布尔的开发者制作，目前仅支持 Sketch，但是 PS 也已经出现在官网，应该也快了。 在…
有两种做法：&br&第一种做法，以屏幕渲染像素(Rendered Pixels)尺寸做， iOS iPhone 6，&b&750x1334px&/b& 开始设计。&br&750x1334px 这个尺寸是iPhone 6 的渲染像素尺寸，也就是用iPhone 6截图后看到的图片尺寸。iOS 这个尺寸设计完成后，再用这个尺寸适配Android 渲染像素 720x1280px，因为两个尺寸相近，切图资源可以用一套，适配Android 720px时只用横向调整间距即可。&br&这也是现在大多数UI 设计师做App 时的常用做法。&br&&br&&p&&b&标注&/b&&/p&&p&推荐Sketch 插件，Sketch Measure。 在第一次标注时，会让选择设计尺寸的界面分辨率，750x1334px 是Retina @2x 的尺寸，所以我们选择此项，标注的尺寸得到的实际上是pt(point)，也就是缩小2倍的尺寸。(图中正方形尺寸是200x200px，选择Retina @2x (pt) 选项后标注的尺寸是100x100pt)&/p&&img src=&/fda03c7cfb68a9ff6a22_b.png& data-rawwidth=&850& data-rawheight=&980& class=&origin_image zh-lightbox-thumb& width=&850& data-original=&/fda03c7cfb68a9ff6a22_r.png&&&img src=&/08fc0793bcecc35d93a967cf5c08297d_b.png& data-rawwidth=&2058& data-rawheight=&876& class=&origin_image zh-lightbox-thumb& width=&2058& data-original=&/08fc0793bcecc35d93a967cf5c08297d_r.png&&&br&&br&这里要说一下渲染像素(Rendered Pixels)尺寸。渲染像素尺寸是iOS 里的一种说法，对应的还有点(Point)、物理像素(Physical Pixels)。&br&&blockquote&&p&
早期的iPhone3GS的屏幕分辨率是320*480（PPI=163），&a href=&///?target=http%3A//lib.csdn.net/base/1& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&iOS&i class=&icon-external&&&/i&&/a&绘制图形（CGPoint/CGSize/CGRect）均以point为单位（measured in points）：&/p&&p&&strong&&em&1 point = 1 pixel&/em&&/strong&（Point Per Inch=Pixel Per Inch=PPI）&/p&&p&
后来在iPhone4中，同样大小（3.5 inch）的屏幕采用了&a href=&/question/& class=&internal&&Retina显示技术&/a&，横、纵向方向像素密度都被放大到2倍，像素分辨率提高到(320x2)x(480x2)= 960x640（PPI=326）， 显像分辨率提升至iPhone3GS的4倍（1个Point被渲染成1个2x2的像素矩阵）。&/p&&p&
但是对于开发者来说，iOS绘制图形的API依然沿袭point(pt，注意区分印刷行业的“磅”)为单位。在同样的逻辑坐标系下（320x480）：&/p&&p&&strong&&em&
1 point = scale*pixel&/em&&/strong&（在iPhone4~6中，缩放因子scale=2；在iPhone6+中，缩放因子scale=3）。&/p&&/blockquote&&br&所以，即使我们在Sketch 里是以实际像素设计的UI，但开发者在实现时都是以pt为单位绘制图形的。&br&至于有些知友说，我们一直都是用px 直接标注的啊。我之前也是这么做的，但在看上面一些文章的时候(上方的引用)，才发现pt 才是一种标准的标注方式。开发者在拿到我们的标注资源后应该会自己做一些换算工作。&br&&br&&b&切图&/b&&br&以750x1334px 尺寸设计的UI，icon 直接输出1x(原始大小)，后缀是@2x，因为750px就是以@2x 大小做的，@2x大小的资源供iPhone 4, 5，6使用，输出1.5x 大小，后缀@3x，资源供iPhone 6 Plus 使用。因为现在已经没人用3G，3GS 手机里，所以也就不输出@1x 的资源。&br&&br&&p&05.29 更新&/p&&br&&br&&p&第二种做法是以开发者在开发App时的尺寸为基准，也就是1x 大小的尺寸设计。&/p&&br&&p& iOS iPhone 6 1x 尺寸是375x667pt。这个尺寸的单位是pt(点)，也就是开发者在开发时的尺寸。适配安卓时，选择 xhdpi 360x640dp，(第二种做法是以开发者绘制图形的单位为基准，所以这里用了dp，但由于是以1x 的标准做，所以可以把px 看作是dp) &/p&&img src=&/96b70bfefda7eac19888a71_b.png& data-rawwidth=&2360& data-rawheight=&2356& class=&origin_image zh-lightbox-thumb& width=&2360& data-original=&/96b70bfefda7eac19888a71_r.png&&&br&&p&&b&标注&/b&&/p&&p&iOS：以这个尺寸完成 UI 设计之后，同样使用Sketch Measure标注。在第一次标注时，选择Points @1x(pt) 选项，标注出来的pt＝px。&/p&&p&Android：适配 Android 360x640dp 的尺寸，横向调整相应的元素，标注时同样会提示选择设计时的界面分辨率，LDPI、MDPI、XHDPI、XHDPI、XXHDPI、XXXHDPI 是供 Android 设计选择的，我们选择 XHDPI，生成的标注单位都是pt(尺寸) 和 sp(文字)。&/p&&br&&br&&p&&b&切图&/b&&/p&&p&iOS：可以直接输出@2x 资源用在iPhone 4-6，@3x 资源用在iPhone 6plus 上。&/p&&p&Android：Android 的分辨率很多，但通过&a href=&///?target=http%3A///devices/android_resolutions& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【友盟+】全域指数&i class=&icon-external&&&/i&&/a& 最新的 Android 设备分辨率排名可以看出主要的分辨率集中在 HDPI、XHDPI 和 XXHDPI，并且向大屏发展，所以我们在输出切图的时候，可以输出这几个 DPI 的资源即可，或者根据不项目具体要求。&/p&&br&&br&&p&Android 360x640dp 设计，输出@1.5倍作为 HDPI 资源，输出@2x作为 XHDPI 资源，输出@3倍大小作为 XXHDPI 资源。有没有感觉特别晕？如果可以理解最好，理解不了，推荐一个 Sketch 插件，&a href=&///?target=https%3A///zmalltalker/sketch-android-assets& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&sketch-android-assets&i class=&icon-external&&&/i&&/a& 可以自动导出标准的 Android 切图资源，iOS 的资源是全部放在一起，以后缀@2x、@3x(1x 资源当然就没有后缀) 的形式输出，而 Android 是把不同 DPI 下的资源放在相应的文件夹下，文件名是相同的。&/p&&br&&img src=&/b11def1bc26_b.png& data-rawwidth=&2128& data-rawheight=&2012& class=&origin_image zh-lightbox-thumb& width=&2128& data-original=&/b11def1bc26_r.png&&&br&&p&这里再来解释一下 iOS 和 Android 在开发 App 时的单位问题，以及适配 Android 所选的分辨率。上面的引文里介绍了在 iOS 中，绘制图形是以 point 为单位，而在 Android 中，是以 dp 为单位。关于 iOS 和 Android 上的单位问题可以查看&a href=&///?target=http%3A///articles/18009.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&这篇文章&i class=&icon-external&&&/i&&/a&。建议大家多读几遍。&/p&&p&从下面的表格中&a href=&///?target=http%3A///questions/6272384/most-popular-screen-sizes-resolutions-on-android-phones& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Most popular screen sizes/resolutions on Android phones&i class=&icon-external&&&/i&&/a&可以看出，Android 基础单位 dp，1x 的屏幕密度，Android 160dpi ＝ iOS 160ppi，1x基础单位pt。&/p&&p&2x 大小360x640dp，也是对应第一种做法里的屏幕渲染像素尺寸720x1280px。360x640dp 与 375x667pt 尺寸很接近，适配起来很方便。&/p&&img src=&/1d4d5bc031dc43f9b0d9d93f10f97bd6_b.png& data-rawwidth=&2722& data-rawheight=&1868& class=&origin_image zh-lightbox-thumb& width=&2722& data-original=&/1d4d5bc031dc43f9b0d9d93f10f97bd6_r.png&&&br&&br&思考第二种做法，首先是因为用 Sketch 的时候发现模版里给出的资源iOS都是375x667，但问了些朋友，却都是以750x1334尺寸设计，也就是第一种做法，当时就很奇怪为什么？后来在思考以1x的尺寸设计的时候发现 Android 的模版也是1x的，再回头看新建画布给出的设备默认尺寸也都是1x大小的，有点恍然大悟的感觉。&br&虽然很少有人用1x的尺寸设计，但我想 Sketch 给出1x 的模版资源和画布尺寸还是有意图的，不会是随便给的。&br&&img src=&/dbc49abb4a8fb1ebc937e989_b.png& data-rawwidth=&1060& data-rawheight=&1236& class=&origin_image zh-lightbox-thumb& width=&1060& data-original=&/dbc49abb4a8fb1ebc937e989_r.png&&&br&&br&PS：&br&之前也并没有按照750px 的尺寸设计UI，但最近要开始新的项目，也在思考题这个题目，想把一些碎片知识、概念系统的捋清楚，也在网上看了些资料，回答中难免有些概念说的不是很清楚或者出错，比如 第二种做法中适配 Android 后输出切图的倍数我想了几遍也还有些晕，&a href=&///?target=https%3A///zmalltalker/sketch-android-assets& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&sketch-android-assets&i class=&icon-external&&&/i&&/a& 插件我自己用的时候也还有些问题(based resolution)。&br&各位知友如果发现答案中有错误或者描述不是很准确的地方请提出讨论，谢谢！&br&两种做法的有缺点我会再思考，有心得再来更新。&br&&br&推荐相关文章：&br&&a href=&/question/& class=&internal&&用 Sketch 做 iOS 设计时，一般选用哪个尺寸？ - Sketc&/a&&br&&a href=&///?target=https%3A///shyp-design/design-at-1x-its-a-fact-249c5b896536& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Design at 1x － It's Fac&i class=&icon-external&&&/i&&/a&&a href=&///?target=https%3A///shyp-design/design-at-1x-its-a-fact-249c5b896536& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&t&i class=&icon-external&&&/i&&/a&&a href=&///?target=https%3A///shyp-design/design-at-1x-its-a-fact-249c5b896536& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A//blog.csdn.net/phunxm/article/details/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&iPhone屏幕尺寸、分辨率及适配&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A//blog.csdn.net/zhaokaiqiang1992/article/details/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Android屏幕适配全攻略(最权威的官方适配指导)&i class=&icon-external&&&/i&&/a&&br&&a href=&/question//answer/& class=&internal&&iPhone 6 / 6 Plus 出现后，如何改进工作流以实现一份设计稿支持多个尺寸？ - pigtwo 的回答&/a&&br&&a href=&///?target=http%3A///articles/18009.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&知识解答：基础知识学起来！为设计师量身打造的DPI指南（下）&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=https%3A///guide/practices/screens_support.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Supporting Multiple Screens：/guide/practices/screens_support.html&i class=&icon-external&&&/i&&/a&
有两种做法： 第一种做法，以屏幕渲染像素(Rendered Pixels)尺寸做， iOS iPhone 6，750x1334px 开始设计。 750x1334px 这个尺寸是iPhone 6 的渲染像素尺寸，也就是用iPhone 6截图后看到的图片尺寸。iOS 这个尺寸设计完成后，再用这个尺寸适配Android 渲染…
如果全团队是Mac的话，Sketch是非常好用且适应现在的设计趋势的。我们公司现在已经全部都用Sketch了。Sketch尤其适合设计师职能不细分的中小团队和个人作品的制作。线框到视觉稿可以在一个软件里完成，能省去不少时间。&br&Sketch的用户社区也比较繁荣健康，让人挺有信心继续用下去。（Sketch的扩展开发比PS容易的样子，我看github上还有人做了自动生成iconfont之类的高级脚本……）&br&&br&其他回答基本都只是在特色功能上评论，确实，这软件一开始的印象可能只有小巧便捷够用。但用多了后就会发现他&b&最好的地方不是比PS多了什么功能，而是针对UI设计的操作、交互模式，用起来非常高效。&/b&&br&PS因为要考虑摄影用户的使用，并不能针对UI设计师做最优设计。有些回答中说道的切图、测距等功能，其实最新的PS CC也能胜任（其他很多功能我相信要在PS上出现也只是个时间问题。跟PS比功能是很难有核心竞争力的），但PS的基本工具的操作/交互方式从来不是对UI设计专门设计的（我想这很难改变）。而这正是Sketch的取胜之道。&br&&br&UI设计时，最频繁的操作有选择/移动，整理图层、更改属性/样式。这3样东西是互相影响的，Sketch在这3方面都做得挺好，就完成了1+1+1=5的出色体验（虽然有一些是矢量软件天生的操作优势）：&ul&&li&整理图层&br&UI设计中得图层，和照片编辑时很不同的一点是，模块（or板块or分组）之间大多数不重叠，因此图层顺序也就相对不那么重要。只要对象能够被用户方便的选择到（后面讲选择功能的设计），图层的顺序很多时候是无所谓的。事实上浏览图层面板是低效的，不管缩略图还是文件名，人的读取效率都是不够理想的。Sketch通过更适宜的基本功能设计，很大程度上减少了用户对图层面板的依赖程度（不用去看），不仅直接简化了操作，也使用户可以更专注于画布上得内容。&br&&/li&&ul&&li&不要小看Forward和Backward的设计。Sketch的这个功能设计地非常好。&br&首先这个功能的运作方式非常高效，它会考虑到遮罩关系，不做无意义的顺序变动。比如从上到下有a/b/c三图层，a遮着c了，但是b在其他地方，那我对c执行一次forward，c就是直接跑到a上面了（c/a/b），而不是只傻傻地提升一个级别（a/c/b）&br&其次它只改变同级别内的图层，所以图层组内的东西怎么forward都不会跳出图层组。&br&相比PS，图层一多，拖动来改变顺序太痛苦，用forward和backward每次只移动一层，低效，而连按太欢了又可能一不小心把分组逻辑搞乱了，必须小心翼翼&/li&&li&复制、粘贴&br&Sketch中复制、粘贴的操作和日常其他软件里的复制粘贴很相似。选中图层or图层组的情况下command+c复制，command+v粘贴。另外很重要的一个设计是，当前选中的对象决定粘贴出来的东西在哪个图层组里。这样大部分复制粘贴操作是不用看图层面板的。&br&而PS里，ctrl+c和ctrl+v只能复制像素（选区），图层/对象的各种复制都远没有Sketch那么爽快，因为你必须通过不狗直观的图层面板来决定新图层的上下关系和包含关系。&/li&&/ul&&li&选取、移动工具&br&这个最基本、最重要的工具设计的好不好，影响是巨大的。&/li&&ul&&li&PS选择分为矢量的选择（A）和位图的选择（M）和图层的选择（V），略微复杂、繁琐。比如我现在要改变一个矩形矢量图层的圆角参数，我得先V切换到图层选择工具选中图层，然后A切换到矢量选择工具选中该路径，然后属性面板里才给我出现了圆角的参数。&br&而Sketch里只有唯一的选择工具，一统天下。&/li&&li&Sketch里的选择工具，通过双击可以把选择范围的层级深入一层（也就是可以选图层组里的东西），这样即使是嵌套了很多层图层组，每层还好多个图层组的情况，也可以很方便且逻辑较清晰地进行对象的选择。这个双击使得用户更加不需要关注图层面板。&br&而PS里的选择工具有两个模式，一个是选图层组，一个是选图层。图层组模式是不能选图层组里的图层；图层模式时不能直接选整个图层组。双击？那是什么？&/li&&li&Sketch里的默认的工具是选择/移动工具。其他工具都是画一下就切换回选择工具。你说你要连续添加很多个图形/元素？用make grid批量复制并布局吧。&br&画好一个东西后接着布局，更加符合绘制UI的情况。而PS里你画好一个图形后还得按着ctrl才能移动。（PS的操作就是ctrl基本不离手）&/li&&/ul&&li&更改属性/样式&br&Sketch里的涂层样式是在右栏里常开的。而在PS里先要在图层面板里找到当前选中的涂层然后双击打开样式编辑窗口，而样式窗口的弹出位置又是不那么确定的（尤其是多屏环境时），这么多次的视线和鼠标的移动，是非常低效且烦人的。&br&其实这点PS也是可以模仿的，只要开发个图层样式的面板，然后这个面板可以自定义显示哪些属性（不然会过多塞不下）就可以了。但Adobe没有，我也没搜到这样的一款扩展/插件。&/li&&/ul&经我这么一番叙述大家应该可以意识到了PS做UI设计是多么繁琐。&b&sketch不仅简化了流程，还让左手（不用太多时间按着ctrl）和眼睛（不用去仔细阅读图层面板）更加轻松。它带来的隐藏的效率提升是比较可观的。&/b&至少操作体验是很好的。&br&Sketch还有很多人性化的设计细节。各位用着用着就能体会到。&br&&br&简单明了的功能加上以上各种亲切的交互设计使得这软件的上手难度极低。我转向Sketch的时候除了个别疑点稍微搜了下文档，总体边学边用的过程都毫无阻碍。&br&&br&感受到的相对的不足有：&br&&ul&&li&团队小，软件没有Adobe的产品稳定，遇到bug时基本上就是毫无办法。也不知道什么时候会修复。&/li&&li&大点的项目or大尺寸位图多点，性能就很一般了。&br&之前做一个web app，背景整个是个位图，结果artboard也就十几张就比PS还卡了。&/li&&/ul&Sketch如果功能上能满足团队需求，是目前的不二之选。它决不是简单地针对UI设计开发特别的功能、去掉不太用的功能，而是在基本的操作层次上给UI设计师带来了得更好地体验。
如果全团队是Mac的话，Sketch是非常好用且适应现在的设计趋势的。我们公司现在已经全部都用Sketch了。Sketch尤其适合设计师职能不细分的中小团队和个人作品的制作。线框到视觉稿可以在一个软件里完成，能省去不少时间。 Sketch的用户社区也比较繁荣健康，让…
团队目前默认使用 &b&iPhone 6&/b& 的 &b&1x &/b&尺寸来做设计。&br&&br&&img src=&/1c3531dbb2b0d1d681e365a26e678668_b.jpg& data-rawwidth=&215& data-rawheight=&218& class=&content_image& width=&215&&&br&&br&主要原因如下：&br&&ol&&li&&b&1x&/b& 尺寸下做设计，输出方便，直接输出 &b&2x&/b& 资源给 iPhone 5 和 iPhone 6 用，输出 &b&3x&/b& 资源给到 iPhone 6 Plus 用。&br&&/li&&li&选择的 &b&iPhone 6&/b& 的 &b&1x&/b& 尺寸，向上适配 6P 向下适配 5 会比较方便。&br&我们看下下图，这是 3 个屏幕实际像素尺寸的对比，如果要在这个尺寸下作适配，因为尺寸差异大，导致不够直观。需要把同样的原件 （图标文字这些）放大后才可以去做适配，相对麻烦。&br&&img src=&/23ac48ea66e3b4f62ffee}
&这家开创性的旅行公司是如何建立起一个征服全世界的设计系统的。Airbnb的使命是让所有人有宾至如归的感觉 —— 无论是入住任何一间住所或在其网站上逗留的期间。这意味着Airbnb必须要与全球用户群有效沟通，并建立一种适应公司快速的发展轨迹的设计语言。我们采访了Airbnb设计副总裁Alex Schleifer，他将告诉我们设计团队是如何帮助Airbnb完成让所有用户宾至如归的使命。&自Airbnb创立以来，设计在公司的地位是如何发生改变的？在Airbnb，设计一直很重要–它就是由设计师创立起来的，并且第一批用户参加了在旧金山举办的一个设计会议。而最大的变化来自团队规模和适应团队规模的相应调整。&我们的设计团队已经进化。今天Airbnb的设计部门包括了研究人员，文案，甚至工程师。我们已经建立了更好的工具和流程。我们所有的产品组都配有设计师。它一直在不断发展，但其核心并没有改变 – 就是对设计深深的热爱。&&设计部门的组织结构如何?设计部是一个由体验设计与研究、内容策略、定位与设计执行等小组构成的多元化组织。这些小组影响着用户（包括像我们的客户代理这样的内部用户）所交互的一切。在同一个部门里拥有这么多专业协作是非常有好处的，因为你会不断接触到设计工作的不同方面。&你的设计团队的核心原则是什么？Airbnb所有决定的背后有一个明确的使命：他们想建立一个每一个人所到之处都有归属感的世界。当应用于产品设计时，这些关键原则即转化为“为信任而设计”和“为每个人而设计”。 这些真正被应用于我们一切的工作中，并最大程度地影响我们的任务进展。2016年4月，Airbnb推出了一个更新的应用程序，旨在帮助人们寻找到可以像本地人一样生活的家庭，社区与体验。你们如何在实践中运用这两个原则？建立信任其实是创造一个环境让信任可以在两个陌生人之间显现出来。有非常显性的方式做到这一点，如审查或验证配置文件，但也有隐性的方式，如我们非常强调真正的人和真正的家园。至于为每个人设计：我们正在为一个真正多元化和全球性的社区建设产品。我们的全球研究有一些独特之处--当主人和客人见面时，他们通常来自世界的各个角落。这意味着我们做出的每一个决定都需要用全球视野来完成。我们的社区也令人难以置信的多样化，确保每个人都感觉他们属于Airbnb，这也是我们用户体验设计的责任。用户研究在其中起着什么样的作用？&我们有强大的研究团队着力于大量的全球研究，并且持续与我们在全球的社区群体会面交流，因为如果缺乏本土的认知我们就不可能开发出真正的全球产品。研究团队通过获取真实的用户反馈来开发和迭代重点内容，同时团队肩负起更大更长远的把控整体产品战略研究项目的责任。研究人员的研究成果对于我们所做的每一个关于产品的决定都是至关重要的。&数据科学也是同理，因为我们的社区群体是如此庞大和多样，有一个专业团队来帮助我们了解分析我们平台上的活动方式是至关重要的。在大多数案例里，数据专家与研究人员密切工作，帮助我们更好地理解我们的用户。我们所有的设计师都积极地学习更多关于数据的知识以及怎么去理解数据。&我们努力地协调艺术与科学之间的平衡，学会这种有益的平衡也是我们在工作获得的回报。数据和研究真的帮助我们更好地把控我们的直觉。&研究和数据科学在Airbnb的产品开发过程中发挥了核心作用&你如何管理Airbnb的产品设计？我们建立了一个设计语言系统（DLS）与一些具体的目标：创建一个在不同学科之间共通的语言，建立一个标志性的视觉语言，并定义组件，使设计和开发软件变得更容易。我们始终以创建一个美丽的，有凝聚力的，易用的app或网站为目标，这一点需要我们每个人参与其中，而不仅仅是设计师。很高兴看到工程师也真正参与到这个项目中。像Airbnb这种规模的东西从来就不容易，有很多方法来定义组件是什么，你的定义应该细微到什么程度，什么应该叫做什么。自推出六个月以来，这些对话大大完善了系统，成为Airbnb更为重要的议题。把DLS整合起来的流程是怎样的？我们先从小的团队开始做起，这个团队基本上建立起我们的产品可能涉及到的模式、流程以及元素。为系统建立一个通用体系是至关重要的，比如相应的通用组件与通用名称。而这恰恰证实了，我们可以用很多前人创造出来很久的东西然后重组成一个井然有序的模式；除此之外，我们做了些视觉以及品牌的工作，以明确未来我们的产品会是什么形态。我们清楚地知道，我们想要让照片更吸引人，想要印刷级的图片质量，支持不同的语言等等。接下来就正式的工作开始了，我们开始着手编写一些小的组件，并且深入UI设计。这就涉及到更多的团队，关于设计以及程序的具体原则方面的对话。&&DLS现在是如何被使用的？它已经改变了我们最开始创建它的方式。它属于所有与我们产品相关的人员，这意味着它每天都在更改迭代。我们看待它的探索是永无止境的。一个设计系统需要紧跟公司的发展，甚至完美地走在前沿，这样才能支持新的项目。Airbnb的设计语言系统由跨学科的共同组件组成，让构建和设计高度审美一致的软件变得更容易。&&&讲故事有多重要？非常重要。我们真的在很多我们的项目上用了故事板。我们是皮克斯这类公司的忠实粉丝，他们经常用专业插画师来沟通一个概念。我们自己也创造了很多内容：短片，动画和音乐，并将它们融入到app或社区。Airbnb有着各种不可思议的人才，我们很幸运有这么一个社区，能给我们带来这么多有趣的故事。你们经常使用外包团队吗？我们会与项目所需的最佳人才合作。这意味着我们多年来一直与许多不可思议的人一起工作.。我们经常会找到有某种特定技能的人才，像插画师、音乐家、数据设计师等。&你们的工作环境是怎么样的？我们大部分设计团队都是在旧金山的多元化的创意空间里办公的。我们的办公室实际上是由好多模块化的“项目间”组成的，每个项目间里都配备显示器、白板、钉板和长桌。每个员工都可以自由选择在办公室周围分布的开放空间办公，当然他们也能通过自由装饰他们的“工位”改变空间。虽然设计团队都是分散着办公，但是我们有几个共用的重点空间。那里的“暴击室”其实是我们的主会议室同时也是我们的工作室，里面都提供各种各样的数码工具和创意产品。&你和你的团队是如何交流的?我们发展速度如此之快，所以减少沟通成本是很关键的。不同的产品团队都有他们自己的节奏，每两个星期就有一个全员大会，整个团队会聚集在一起沟通来自不同组织不同部门的最新消息。每个专业部门也会有自己的周会，本周负责的大部分（或全部的）内容都会及时更新沟通。我尽量多地亲自和团队中不同的人会面，但是当团队超过100个人时，这就会变得很困难。平时我会在办公室中走动，尽力去和我遇到的每一个人聊聊他们正在进行的工作，这是我最喜欢做的事情之一。Airbnb最主要的团队坐落在旧金山，整个办公室的布局是，很多大型项目室的周围都会围绕很多自由的工作空间。你使用任何特定的工具吗？我是Slack的追捧者，它很容易共享文件和反馈信息。我们的团队经常使用它。我总是保持在我的桌面打开它- 我喜欢如果团队里的任何人需要与我交谈就能马上找到我。我们也为资产管理，文件共享和原型设计创建了内部工具，我们将在几个月后分享这些工具。一般来说，我们希望尽量不要让大家负担太多的软件，因为每个团队都有自己的需要。告诉我们原子设计在Airbnb的作用任何以我们的速度构建软件的公司最终都会使用某种原子流程。如果你没有能力建设系统，就没有办法去扩大规模。我们将一切组件化，创建工具和流程，我们正做得越来越好。工具是很重要的一部分。我们有一个团队致力于为我们的设计师建立和集成工具，从资产整合到Sketch到原型环境。快速获得一切是至关重要的，无论是一个图标或一个研究。&&随着公司的发展，你如何把设计思维深入到大型组织环境中？我认为这意味着创建简单的框架和为人们创造正确的环境。我们很幸运，因为设计思维一直是Airbnb的一部分，这使得这件事情做起来更容易。另一件事是确保你不要将“设计思维”看作是完全属于设计学科的东西。&翻译：, lynn_dash Tony 李潇洒、、、、、原文： ————————————————————————————————————————————————我们是DATS翻译小组，我们爱设计爱英语，通过翻译设计的文章共同学习进步，虽然我们还有许多不足，但是只要把每个人的微小的力量聚集起来，总有一天会发出耀眼的光芒~ 欢迎到主页关注我们。
原文链接：
可以记录推荐数据哦！
收录收藏夹
添加到收藏
没有新消息
创建收藏夹
公开(受欢迎的收藏夹将有可能选入站酷精选)
私密(仅自己可见)
下次自动登录
没收到验证码?
下次自动登录
第三方帐号登录
微信二维码登录本文作者：考利木&萨里宁（KARRI SAARINEN），Airbnb首席体验设计师，他在Designer News论坛上开设了&Ask Me Anything&专栏，你可以问他任何关于设计语言系统的问题。在软件开发和设计行业里工作的设计师们，经常会被要求提供一次性解决方案。有些时候，我们会受到时间约束，不得不在deadline前赶紧完成工作；还有些时候，我们只是还没有确定一条能够继续前行的道路，只好退而求其次选择这种方式而已。这些一次性解决方案本质上并不坏，但如果它们不是建立在一个坚实的基础上，到最后，我们就会发现自己不得不去还那些欠给技术和设计的债。可视化语言就像其他任何一种语言一样，如果语言不能让大家使用，也无法分享和被理解，那么误解就会增多。当一款产品受到用户欢迎，或是一支团队逐渐成长，各种问题也会随之出现。设计往往依赖于系统，设计的重点，其实就是如何用一种可扩展和可重复的方法去创造产品。从潘通色卡到菲氏螺钉，这些系统让我们能够管理各种混乱的设计，继而创造出更出色的产品。数字化产品，可以说是应用这些设计系统的一块沃土，但目前来说，似乎还没有得到人们的重视。一个统一的设计系统能够让开发设计变得更好、更快。更好，是因为它能带来一个有粘着力的体验，让我们的用户能够轻松理解；更快，是因为它给了我们一个能够协同工作的共同语言。为什么我们需要设计系统在过去的几年时间里，Airbnb的业务得到了飞速增长。目前我们的设计部门由十几个功能和产出团队组成。显然，我们需要更加系统的方法来引导、应用大家的集体努力。当我们在公司内部认识到一些问题，我忽然发现，这些问题可能也是整个软件行业里存在的普遍问题：一、太少的约束相比于其他设计设计规则，软件设计的实际约束很少，这导致了当我们遇到某个问题或挑战时，都能找到很多不同的解决方案，假设没有较好的约束，那么很容易会造成脱节。作为产品主管和设计师，我们必须要创建属于自己的约束条件，并严格执行。二、太多设计师和利益关系人软件通常是由团队员工开发的，有时开发团队的规模会相当大，设计团队会希望保持用户体验的连贯性，但随着团队人员数量变得越来越多，这个问题就会变得愈发棘手。因为随着时间的推移，无论一开始的体验是多么的连贯，也不管团队规模是否足够小，不同的人总会带来不同的解决方案和设计风格，继而导致产品体验被分散化。三、太多的平台我们的产品需要支持不同的设备和不同的平台。确保功能和设计保持同步需要花很大功夫，也意味着同一个设计工作，需要在各种不同的平台上重复测试很多次。四、软件连续性关于软件，另一个稀罕的事情就是，虽然它经常被看做是一款产品，但其实并不会向传统消费品那样有磨损，更不会轻易被替换。即便是一家历经数次产品转型的公司，多年之前编写的代码和设计，如今依然会在很多地方存在。这意味着你需要有持续的软件维护和升级。准备开工要解决上面提到的这些问题，同时保持我们Airbnb快速的决策过程，我们建立了一个由设计师和工程师组成的小团队【注2】。我们明确了日程表，预留了一个外部工作室（就在Airbnb总部外面），准备全身心投入设计、开发这套设计语言系统（DLS）我们为这套设计语言系统设定了目标，就是要开发一个更加美观，且易于访问的&无障碍&设计语言。通过定义明确和可重复利用的组件，我们的设计将会统一支持各种平台，继而驱动更高效率。为了专注于我们的工作，我们减少一些初始工作，把支持系统首先定位到了两个最主流的原生平台上&&iOS和安卓操作系统。我们这样开始工作的，首先我们把之前许多设计审核了一遍，然后打印出来，不管是老设计还是新设计。我们把所有这些设计，按照顺序平铺在一块面板上，因此就能看到哪些体验在什么地方，以及为什么会出问题，同时也更清楚地看到需要在哪些地方做出改变。我们认为，启动工作的最好方式，就是首先追踪眼前的问题。我们每一个人都专注于重新设计屏幕或产品领域，并且创建了一些指导原则，在我们独立设计的同时，确保协作方向一致：统一性：每一块设计，都是更大整体中的一部分，因此必须站在更大范围的角度上，给予系统积极正面的贡献。设计功能不应该是孤立的，也不能是离群的。普遍性：Airbnb在全世界使用，用户更是一个全球性的社区。我们的产品和可视化语言应该受到用户欢迎，同时也要易于访问。标志性：我们专注于设计和功能，因此在这两方面，我们要即大胆又清晰。对话性：呼吸对生命如此重要，我们要把同样的设计理念融入到产品里面，通过更容易理解的方式与我们的用户进行交流、沟通。打好基础实际上，在基于打好基础这一设计精神之前，我们已经创建了一个基本风格指引&&我们称之为基础。有了这个基础，可以粗略地定义我们的排版，色彩，图标，间距和信息架构。可以说，这个基础是指导我们工作不可缺少的东西，它让我们有了一个统一的方向，也让我们各自有足够的空间独立探索一些创造性设计解决方案。这种打好设计基础的方法，让我们觉得每一个人都是在同一理念下一起工作。我们在每天工作结束的时候，会复核协作完成的工作任务，从中发现很多创新设计类型。必要的时候，我们会纠正一下设计方向，再启动定义我们标准化组件。创建组件传统上，许多设计风格指导，会把设计组件看作是原子组件，之后用它来构建更复杂的分子。理论上，这种设计方法适用于连贯且弹性系统设计开发，然而在实际中，我们经常发现那些可以重复使用的所谓&原子组件&会以很多不同方式被使用，继而创造出很多不同的&分子&。我想再次提醒的是，这种组件设计方式就像是门洞大开，创建出各种杂乱无章的用户体验，导致系统更难维护。我们并没有创建这种独立的&原子组件&，一开始，我们就把组件看作是一个生命体元素，他们有自己的功能和个性，是由一组属性所定义，可以与其他模块共存，也可以独立发展。一个统一的设计语言，不应该只由一组静态规则和独立&原子组件&组成，而应该是一个不断进化的生态系统。举个例子，我们的用户头像元素一开始是根据一个样式指南来设计的，但最终应用到平台上的时候，会发现有数百个头像排列，这样会造成每次更新头像的时候都非常困难。&我们如果想要解决这个问题，必须确保更新之后不会影响其他页面功能。&每一个组件都是由必要的元素来定义，比如标题，文本，图标和图片，有时组件还会包含可选元素。这些元素都是在Sketch文档和代码中定义的，我们要求每一个组件都有一个分频器，而不允许分线器，然后在试图逻辑中将所有元素设置为可见或隐藏。编译组件库在创建这些设计组件时，我们收集了很多组件并汇总到一个称为组件库的主文件中，在整个设计过程中，我们都会引用这个组件库。此后一到两周时间里，我们发现在设计迭代过程中，通过使用组件库能让我们生产力产生巨大的飞跃。直到有一天，我们在设计一款紧急原型产品的时候，忽然发现只用了几个小时就做出了近50个页面设计，如此高的效率完全得益于我们领先的设计框架和组件库。随着组件库里内容越来越多，我们开始把有类似元素的独立组件进行组织归纳进&artboard（画板）&，这些画板之后会根据不同类型进行再分类，包括：导航，移动标签，内容，图片和专业。我们还专门为手机操作系统（iOS和安卓）创建了一套组件，并使之适应平板电脑规格。平板电脑组件和移动手机的基本相同，而在技术层面上，代码基本上是以两种不同的风格出现一次而已。这些系统组件还可以在外观和定位配置上变化，有些像是网页的响应式设计。设计师可以使用一个共同组件来设计某款设备，然后轻松应用到不同的设备屏幕上，不管是iOS还是安卓设备。对于平板电脑，我们创建了一些简单布局的概念，比如Focus Views（聚焦查看），它可将内容聚焦到页面、内容模型、和两列网格布局上。所有组件和视图都是用我们Airbnb自己的技术视图框架构建的，该框架可以处理这些风格、状态、以及适应度。【注2】经验教训我们知道，构建可视化设计语言是个极具挑战的项目，它意味着我们应用程序中很多视图需要重新设计和重新开发。但是我们依然努力实现了设计系统创建，并在4月17日发布了全新的App应用。正如其他任何项目一样，我们希望有些事情做的与众不同。不是所有组件都是对等创建的。在绝大多数App应用里，总有一些组件使用的频率较高，也因此会重复出现。对我们Airbnb来说，这些组件是App里的网格行（或是单元格）。回想起来，我希望我们可以花更多时间去思考如何设计网格行，并设计出更强大的样式集合和组件。最后，我们会用不同类型的设计方法去解决一些矛盾。Sketch：我们期初尝试在Sketch里创建这些组件作为符号，但最终导致了混乱。甚至到现在，我们的Sketch文件有时依然很难维护。如果未来有机会，我们希望可以找到更好的方式去维护和创建新组件。【注3】文档系统：由于这个项目要求我们在很短时间里完成，结果导致了我们忽略了一些文档处理流程。由于缺少文档，设计过程会无可避免地产生一些迷惑。就像编程一样，他们创建的文档系统是开发过程中最重要的一个环节。或早或晚，文档系统都要去做，重要的是，创建文档的过程，也会帮助我们在做决策的时候更加顺畅。归纳总结创建一个可视化设计语言是个无比艰巨的任务，需要我们产品团队付出巨大努力才能完成。但是我们发现，开发我们自己的设计语言系统是非常有价值的，它值得我们投入，因为会给整个产品，甚至整个公司带来巨大飞跃。由于设计语言和代码通常是可以被共享的，我们现在几乎可以同时在所有原生平台上构建并发布产品功能，极大地提高了效率，开发工作因此也变得更快。我们的产品工程师，现在可以专注与产品的功能逻辑，再也不用为编写视图代码而费心思了。不仅如此，如今Airbnb公司的工程师和设计师可以分享共同语言。设计师们也对我们的系统感到非常兴奋，它能让产品审核人员专注于设计的实际概念和体验，而不是抓一些边角料的东西，比如填充，颜色和类型选择，等等。Airbnb设计语言系统让我们对产品的视觉风格有了共同的礼节，并简化了对单一系统的贡献。这个设计语言系统也让我们所有人能以更快的速度和更低的成本开发产品原型或对产品想法进行验证。我相信，在这些系统的帮助下，未来我们可以更专注于实际用户体验，并且开发出我们想要的概念。注脚：[1]:许多伟大的项目都是团队努力的结果，我在此处想要感谢太多人，但我想特别鸣谢一些人，毕竟少了他们，我的这个项目就无法完成，他们是： Bek Stone,?Adam Michela,Amber Cartwright,Alex Schleifer,Michael Bachand, Paul Kompfner, Sean Abraham,Salih Abdul-Karim,Michael Sui，以及设计和工程团队的其他同事。[2]:我会让Airbnb的一位工程师详细编写更多关于设计语言系统技术方面的内容描述。[3]:在我们的例子里，我们想要人们可以改变符号的大小（例如，你需要在一个标题里添加更多内容）。如果你需要调整或是碰巧要调整某些东西，Sketch（&3.5）会自动调整每一个符号实例的大小。这不仅会让你多花上一定时间，同时也会永久性地打乱你的文件（有时甚至undo操作都不起作用）。我们最终把组件放到了Layer Groups里，让用户可以复制粘贴。在文件更新过程中，我们也使用了git/github开源库。我们手工创建和添加新组件到主库的Sketch文件，然后提交&pull request（合并请求，开源库Github的一个代码合并功能）&，此时会有变更日志并产生文档变化的png输出。完成之后，Sketch文件最后会进入到一个可被分享的Box文件夹，该文件夹和Sketch模板关联，这样每个人都可以立刻访问新组件了。（翻译：Tino，编辑：picar）本文由创业邦（微信公众号：ichuangyebang）发布，转载请注明来源，违者必究。
24小时报不停
Uber新CEO：卡兰尼克突然任命新董事极不寻常
小扎为Facebook造成分裂道歉，将向国会提供存疑广告
OKEx被爆多个账号被盗，损失超千万元
1-8月我国生产手机12.6亿部，同比增长2.8%
无序停放堵塞生命通道，深圳警方约谈多家共享单车
途牛：启动突发事件保障预案，客人全部安全
机器人将取代人的角色？57%英国人赞同对机器人征税
麦克·杨等三位美国科学家获诺贝尔生理学与医学奖
杭州上线首个智慧住房租赁平台，租客房东可互相评价
博通发布新一代GPS芯片，定位精度达到30厘米
比特币飙升到4400美元，较低点暴涨近50%
法院裁定：FBI无需公布解锁iPhone的细节
传台湾某公司主控 SSD 藏后门，银监会要求调查
工信部：中国将加快5G、下一代互联网建设应用
传苹果正在调查iPhone 8 Plus的电池问题
顾颖琼回应贾跃亭起诉：将和他在美国法庭交战
报告称Apple Watch总销量3300万块，营收120亿美元
食药监总局： 网络药品经营监管遵循“线上线下一致”
iOS版Google Drive获得更新，整合文件应用
贾跃亭将在中美两地起诉顾颖琼：称其故意造谣诽谤
蚂蚁短租用户租婚房遇惯偷家被搬空 平台称配合调查
AI拥抱Fintech 金融科技或迎来最好的时代
内存条价格疯涨：国产手机涨价 三星美光成大赢家
苹果收购法国计算机视觉创企 Face ID或有新玩法！
中国多方尝试建立信用评估系统 全国征信系统可期
大疆：中国无人机研发制造领先 该输出中国标准了
10月新规新举：民法总则施行 网络跟帖须实名认证
阿里千亿重资背后：菜鸟、京东决战线下物流
阿里千亿重资背后：菜鸟、京东决战线下物流
阿里千亿重资背后：菜鸟、京东决战线下物流
贾跃亭将在中美两地起诉顾颖琼 后者已被发禁令
美国新法即将批准自动驾驶汽车上路 第一年上路2.5万辆
谷歌申请黑科技新专利 大玩空间感知技术操控手机
芬兰开源数据库MariaDB获2290万欧元融资，阿里巴巴领投
工信部副部长:我国将加快5G、下一代互联网建设应用
银监会严打“变脸消费贷” 严查挪用消费贷款资金
共享单车废旧车辆回收存痛点 业内呼吁落实退场机制
苹果iPhone 8 Plus是有史以来最大最重的iPhone
美国宣布将建无人机研究区 打造空测走廊
美媒：阿里成全球云计算收入增速最快的公司update ——&br&&br&去年夏天开始用Sketch，觉得它放Dock里闪亮亮的很好看，当时笑称是男盆友送我的第一颗小钻石噗哈哈。所以那段时间几乎刷遍了所有关于 Sketch 的网站、文章、教程，之后又在自学设计，因为想和更多的人分享 Sketch， 所以用 Sketch 和 Adobe Muse做了这个 &a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Sketch中文网&i class=&icon-external&&&/i&&/a& ，之前新增了 &a href=&///?target=http%3A///%3F/explore/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Sketch中文社区&i class=&icon-external&&&/i&&/a& ，欢迎来提问、探讨和分享喵～&br&&br&之前在社区里有朋友问如何自学 Sketch，正好搬过来希望我的经历能够帮到大家：&br&&br&Sketch 是非常好上手的设计软件，比起花在 PS 和 AI 上的时间，学 Sketch 性价比真的是高太多~让所有对设计感兴趣的人，轻松上手然后用心去钻研设计本身，而不是设置很高的门槛要先啃掉一个巨型工具。&br&&br&值得注意，Sketch 非常适合现在扁平化的设计，做网页和移动端的设计绝对是高效利器。虽然能实现各种 shadow，各种 blur，但并不适用创作逼真拟物的效果，也不是用来编辑位图的工具，要P图还是得 PS 的。&br&&br&&br&—— 自学 Sketch ——&br&&br&step 1 &br&&br&这是Sketch 的开发者 Pieter Omvlee 发布的几个简单教学视频，看完它，建立基本的了解。&a href=&///?target=https%3A///user/pieteromvlee& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://www.&/span&&span class=&visible&&/user/pieter&/span&&span class=&invisible&&omvlee&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&step 2 &br&&br&一字不拉的看完 &a href=&///?target=http%3A///sketch-chinese-user-manual.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Sketch 3 中文用户手册&i class=&icon-external&&&/i&&/a& ，对照着将里面提到的所有功能摆弄一番。&br&不要偷懒了，这是最简单粗暴的学习方法，而且最多花掉20个小时的时间，我计算过。&br&在 Sketch 里所有概念都很容易理解，图层啊蒙版啊，你会发现原来是这么简单的一回事，&br&里面各种工具都并不重型，但绝对满足需求，&br&而且 Sketch 所有操作方式都太人性了，异常顺手。&br&&br&step 3 &br&&br&去研究别人的 Sketch 文件，下载一下免费的 Sketch 资源，看看人家的文件，是怎么管理图层，怎么使用一些工具，怎么实现一些效果，你会受益良多。&br&&br&&a href=&///?target=http%3A///all-free-sources.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&& &i class=&icon-external&&&/i&&/a&&br&超过400个免费的 Sketch资源下载，模板、设备、图标，非常全面&br&&br&&a href=&///?target=http%3A//sketchmine.co/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&sketchmine.co &i class=&icon-external&&&/i&&/a&&br&&p&一位法国设计师收集的Sketch 资源，分类清晰，他同时提供收费的移动App设计课程&/p&&br&&p&&a href=&///?target=http%3A///tools/iphone-sketch-app/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Teehan+Lax - Defining Experience&i class=&icon-external&&&/i&&/a&&/p&&p&大名鼎鼎的 Teenhan+lax 创作的iOS 7 GUI 套件&/p&&br&&p&&a href=&///?target=http%3A//& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Sketch Gems - Premium Design Files for Sketch&i class=&icon-external&&&/i&&/a&&br&&/p&&p&一个用 Sketch 创作UI 套件和图标的团队网站，部分免费&/p&&br&&p&&a href=&///?target=http%3A//& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&BrilliantSketch&i class=&icon-external&&&/i&&/a&&br&&/p&&p&Dribbble 上一位印尼设计师的作品，有资源，有技巧&/p&&br&&br&step 4&br&&br&好了，开始自己做点东西吧&br&如果完全没有头绪，我建议你先从小小的东西开始，比如画一个图标，画一个简单的app页面，&br&你可以自己创作，也可以模仿出色的作品，研究每个效果是如何实现的。&br&&br&&a href=&///?target=http%3A///sketchactive/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&SketchActive&i class=&icon-external&&&/i&&/a&
这里360个图标，也就是我做完上面说的这三件事开始画的，仔细看，其实 iOS 7 的没有技术含量，因为完全是照着画的，而第二套 Businese 的其实挺丑的，图标大小不统一，风格不统一，处理的很粗糙，我现在都不好意思拿出来 & &
但是从 Sweet，coffee & tea 那套开始我找到感觉了，之前用户手册里还有些不太理解的东西当时也都完全明了了，开始把自己的想法倾注在作品中。再后面的几套就已经可以玩一样的很熟练很高效的使用 Sketch了。&br&&br&step 5&br&&br&有了一些实战经验，我们再来补充一些理论知识，有一些很棒的设计师博客，他们分享了各种技巧，帮助你去master Sketch。&br&&br&&a href=&///?target=http%3A//hicc.me/post/design-with-sketch.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&用Sketch来设计&i class=&icon-external&&&/i&&/a&&br& Sketch 3 的新功能&br&&br&&a href=&///?target=http%3A///& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&/&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&&br&Sketch 的开发团队 Bohemian Coding 在tumblr 上维护的技巧博客&br&&br&&a href=&///?target=https%3A///sketch-app& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/sketch-app&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&&br&Medium 上关于 Sketch 的collection&br&&br&&a href=&///?target=http%3A//designcode.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Design+code: Learn iOS design and Xcode&i class=&icon-external&&&/i&&/a&&br&一位很棒的 UI 设计师 &a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Meng To &i class=&icon-external&&&/i&&/a&创作的学习用Sketch做设计+用Xcode编程的书&br&&br&&a href=&///?target=http%3A//www.sketchcasts.net/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&SketchCasts&i class=&icon-external&&&/i&&/a&&br&一个葡萄牙设计团队创作的 Sketch 教学视频，每周更新，需付费观看&br&&br&&p&&a href=&///?target=https%3A///sketchplugins/plugin-directory& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&sketchplugins/plugin-directory · GitHub&i class=&icon-external&&&/i&&/a&&br&&/p&&p&Github上由 Bomber Studios制作的一系列插件，帮助你更高效的使用Sketch。&/p&&br&&p&&a href=&///?target=http%3A///sketch-plugins.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Sketch 插件大集合&i class=&icon-external&&&/i&&/a&（ Update）&br&&/p&Github 上由 shahruz
制作的一个叫 Sketch Toolbox 的 Mac 应用，集合了目前绝大多数的 Sketch 插件，在里面可以一键安装和使用。&br&&br&做任何事情都一样，持续的观察，持续的学习，持续的创作，我们都会惊讶于自己的进步的～&br&&br&&br&&br&p.s
如果你好奇我是怎么自学设计的，戳这里看看 &a href=&///?target=http%3A//& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&我的自学路径&i class=&icon-external&&&/i&&/a& ~
update —— 去年夏天开始用Sketch，觉得它放Dock里闪亮亮的很好看，当时笑称是男盆友送我的第一颗小钻石噗哈哈。所以那段时间几乎刷遍了所有关于 Sketch 的网站、文章、教程，之后又在自学设计，因为想和更多的人分享 Sketch， 所以用 Sket…
&b&我是坚决来唱反调的！！&br&&/b&&br&产品经理早期规划产品使用Sketch是极为不合理的，我知道题主肯定是不小心瞄到了那些看起来牛逼闪闪的产品原型图（&a href=&///?target=https%3A///shots/1356038-Kitchenware-Pro-Wireframe-Kit/attachments/193170& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&这里&i class=&icon-external&&&/i&&/a&？、&a href=&///?target=https%3A///shots/1300176-Wireframes/attachments/181309& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&这里&i class=&icon-external&&&/i&&/a&？&a href=&///?target=https%3A///shots/825485-Mac-Chat-Application-Wireframes/attachments/85602& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&还有这里&i class=&icon-external&&&/i&&/a&？）；是不是觉得，哇塞，好酷好专业好有逼格！但是我敢打赌，这些高保真的线框图绝大多数都是设计师在主导并且是业余兴趣使然的作品，你放在实际生产环境中试一试？！绝对吃力不讨好、严重拖延项目进度的不负责任的表现。&br&&br&我是深有体会，一年前我帮好朋友做一个很小的项目，那段时间我也是刚刚学会Sketch，觉得有必要像Dribbble上的歪果仁一样专业，输出高逼格的产品原型图......结果就是，原本我自己评估下来一周可以理顺的产品，我用了近三周时间，这个过程中我一直被设计思维牵着鼻子走，而不是产品严谨的逻辑思维。后来我特地去翻看了Dribbble上那些拿Sketch画线框图的大牛们的Profile和博客，试图去了解和学习他们在项目中是如何协作的，但是，毫无例外，我发现他们对自己的定位都是UI/UX设计师，而不是PM...&br&&br&作为一个同时掌握产品+交互+开发的人，我后来在项目中即时调整了我的工作流程，看我的Dock，我是如此安排在Code之前我的开发节奏的：Axure & Sketch & (QC) & ... 对比之后，发现效率极大的提升，在设计成本一定的情况下，产品策划（Axure） 和 UI设计（Sketch）的时间成本可以保持在3:1的样子；而之前用Sketch的时候，我估计是5:1的样子，甚至更多....&br&&br&&img src=&/ee8bcfee5e3d2bd5e03f5d1_b.jpg& data-rawwidth=&824& data-rawheight=&160& class=&origin_image zh-lightbox-thumb& width=&824& data-original=&/ee8bcfee5e3d2bd5e03f5d1_r.jpg&&&br&我是这么理解我吃饭的家伙们的：&br&&ul&&li&Axure：梳理完成全部产品信息架构和功能。所以Auxre之于我的重要性他不是画图软件、不是交互软件，而更多的是帮助我从无到有梳理整个产品大的脉络&br&&/li&&li&Sketch：基于之前的线框图增强设计感，具象之前的产品；如果产品理顺了的话，设计UI在Sketch的帮助下产出简直是飞速的，这也是Sketch之于Photoshop之流在做UI设计时候的牛逼之处。但是如果你错误的将Sketch定义为规划产品的工具，那产能会十分的低下&br&&/li&&li&QC：仅针对一些极为复杂和细腻的交互动画（千万别试图拿QC当产品的交互工具，搞死你...），配合使用即可，也是帮助自己梳理特效的交互逻辑，避免在真实开发环境中走太多弯路。学习成本略高的软件，我今年上半年花了大力气学习的东西，传送门：&a href=&/question//answer/& class=&internal&&Quartz Composer 如何入门？&/a&（目前QC我已经摒弃了，推荐Principle这款交互特效软件，更高效》》&a href=&/question//answer/?group_id=448000& class=&internal&&如何评价principle这款交互软件？&/a&）&br&&/li&&li&Coding...（业余选手，主要是前端）&/li&&/ul&前面扯的其实已经立场鲜明的表明了我的观点，但是还有一个可能被很多PM忽略掉的，光下面这一点就可以无视掉市面上所有的Wireframe软件：&br&&br&&b&Axure有很好的目录结构，层级关系！&/b&看似只是一个目录，实际上是你整个产品信息架构组成的重要部分，很多产品经理都忽略了这块的重要性。说实话，Axure开发团队如果有心，制定好设计规范，配合好描述性组建，完全可以像Doxygen、Sphinx那样根据目录结果自动生成需求文档。&br&&img src=&/2ae0d1bd789f_b.jpg& data-rawwidth=&498& data-rawheight=&1684& class=&origin_image zh-lightbox-thumb& width=&498& data-original=&/2ae0d1bd789f_r.jpg&&&br&我们再来看下Sketch的目录，他很核心的一部分资源输出实际上是形状的成组以及Artboard画板，仔细看里面的目录结果，跟PS没有任何两样。Sketch被Bohemian Coding发明出来的初衷本来就是希望能够短平快的画出精致的UI，而不需要跟臃肿不堪的PS周旋个没完没了，更加没有想过用Sketch去规划他们的产品。Sketch只是一个设计工具，仅此而已；而 &a data-hash=&831c72493bd2eaeed27a53d& href=&///people/831c72493bd2eaeed27a53d& class=&member_mention& data-editable=&true& data-title=&@huiter& data-hovercard=&p$b$831c72493bd2eaeed27a53d&&@huiter&/a& 所谓的生态圈在我看来不过是支持了第三方插件而已，而所谓的插件功能也只是js写的一堆批处理罢了。Sketch虽然很好很强大，但真心没有必要把一个工具上升到这样一个高度。&br&&br&&img src=&/7c2dcd1fe9dfebc926eafb7f_b.jpg& data-rawwidth=&438& data-rawheight=&1332& class=&origin_image zh-lightbox-thumb& width=&438& data-original=&/7c2dcd1fe9dfebc926eafb7f_r.jpg&&&br&&br&私不见，在两款软件的左侧目录结构中，Sketch的最小单位是Shape，而Axure最小单位是Page，相当于Sketch的Artboard。作为一个产品经理，我关心的是一个Page，而不是Page里面的一个圆角按钮啊亲。&br&&br&总结一下，Sketch会让一个产品经理陷入一个不该他职业本身追求的设计怪圈中去。这里用灰色可以显逼格啊有木有？！圆角头像比直角头像更有设计感啊有木有？！对齐标注什么的应有尽有好方便啊有木有？！...
好吧，这好像真的不应该是产品经理在规划产品阶段需要做的事情吧？！&br&&br&另外，我觉得产品和设计都是产品开发环节中都很重要的两个部分，产品设计的阶段需要严谨严肃的产品态度和逻辑，UI设计则更多偏向情感和用户体验方面的设计；好像所调用的大脑组成部分都不一样？两者真心需要分开对待，同样的选择合适的开发工具也依然很重要～&br&&br&最后的最后...补充一句：以上只是我个人在做项目时候的经验总结以及对工具的理解，每个人对工具的使用习惯和选择的初衷都是不一样的，讨论Axure画原型好还是Sketch画原型好是没有意义的。就好比某些人群在争执是Python牛逼还是Ruby牛逼；亦或者，知乎上的那个段子，「&a href=&/question//answer/& class=&internal&&怎么用WORD达到成为作家的水平&/a&」。
我是坚决来唱反调的！！
产品经理早期规划产品使用Sketch是极为不合理的，我知道题主肯定是不小心瞄到了那些看起来牛逼闪闪的产品原型图（？、？？）；是不是觉得，哇塞，好酷好专业好有逼格！但是我敢打赌，这些高保真的线框图绝大多数都…
很有意思的想法和实践。一边有人在尝试用设计工具生成代码（目前为止都还没有太靠谱的），一边有人在尝试用代码生成设计稿。本质上都是在试图打通编程和设计之间的隔阂。对于这个大命题，后面再细说。&br&&br&具体到 Airbnb 的这个工具，其实他们有很切实的需求。首先公司大了，需要维护一整套设计语言系统；（比如 Material Design 之于 Google，AntDesign 之于蚂蚁金服）同时这套系统不会是完全定死的，会不断地进化、修改。另外，基于这套基础系统，会针对各个具体产品、BU 衍生出很多子系统。问题就在于，每次要改基础系统里的组件或是规则的时候，就会不可避免地产生连锁反应，导致所有的子系统也要同步修改。&br&&br&另外，到目前为止，类似的设计体系在设计文件和业务组件代码上都是分离的。设计师维护一套 ai 或者 sketch 文件，工程师维护三套组件代码（如果用了 RN 或者 Weex，理想情况下可以只维护一套）。也就是说，source of truth 有两个甚至多个。理论上来说，这会导致很多重复工作量：任何改动都需要设计师和工程师在设计稿和多份代码之间做同步。Airbnb 的这个工具的目的就是让基于 React 的代码成为唯一的 source of truth，通过一份代码渲染三端组件 + 生成 sketch 文件。&br&&br&野心很大，不过这带来一个问题：代码到设计稿的生成是单向的。这意味着以后任何对设计的改动必须以代码的形式来执行，也就是设计师必须得会写 React...&br&&br&说来也巧，昨天这个项目的负责人 Jon Gold 在推上跟人争论，他说觉得设计师学不会 React 的人是在小看设计师。说实话，作为一个在设计和开发之间有点跨界的人，我对这样的系统是很欢迎的。但是你要说让随便一个设计师学会 React 是个很简单的事情，还真有点何不食肉糜的感觉。&br&&br&总的来说，我对这套系统的看法是：想法很有前瞻性，但落地对团队要求极高。主要的原因在于这套系统就是想用一套生产环境代码通吃，那么组件中不可避免会混杂相当多的交互和工程细节。从工程师的角度说，一个普通设计师学了点 React 基础，你放心让他改么？如果这个设计师的代码水平都可以直接改生产用的组件了，这样的人又有几个？客观来说，能够负责设计系统的设计师，肯定已经得是设计师里面逻辑思维能力很强的那种了。但这样的以代码为 source of truth 的系统，负责基础组件的团队必须个个是设计和开发的高级跨界人才，衍生子系统的设计师也得有初级工程师的代码能力。&br&&br&回到之前更高层面的命题：设计和代码的结合，到底应该是设计主导，还是代码主导？如果透过工具看产出的本质，最终生成的其实都是一堆数据结构。但是不同职位的人会有不同的看法。工程师会觉得代码主导是更靠谱的，因为代码本身描述数据结构更精确，也更 scalable；设计师则会觉得设计主导更靠谱，因为代码的成本过高，灵活性太低，限制了他们的创造性和工作效率。这里面本质上是设计作为创造性工作和实际开发工程化的工作方式之间的冲突。&br&&br&能够跨界并且两边都很深入的人很少，一方面是能够跨越两种思维模式的人本来就少，另一方面是以目前软件工程和设计的教育体系来看，这样的人才难以体系化地量产（国内尤其）。如果从教育环节就开始针对性的培养，或许将来某一天这样的人会多起来。但目前而言，这样的人即使在国外也属于稀缺物种，而依赖这样的人才的设计/开发体系，也只有在极少数有条件的公司才有运行的可能。
很有意思的想法和实践。一边有人在尝试用设计工具生成代码（目前为止都还没有太靠谱的），一边有人在尝试用代码生成设计稿。本质上都是在试图打通编程和设计之间的隔阂。对于这个大命题，后面再细说。 具体到 Airbnb 的这个工具，其实他们有很切实的需求。…
12月28日更新————————&br&&b&Marketch ( for UI)&/b&&br&来源&a href=&///?target=https%3A///tudou527/marketch& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&tudou527/marketch · GitHub&i class=&icon-external&&&/i&&/a&&br&&br&用过Zeplin的同学基本泪流满面，而这个免费插件可以让你泣不成声。&br&&br&直接在本地生成html，非常便捷查看尺寸颜色等参数，和Zeplin一样的思路。不仅免费，而且公司也不用担心云端的安全/隐私问题了。&br&如果说Sketch Mearsure可以节省你一杯咖啡的时间，这玩意可以节省你一顿饭的时间。&br&&br&真正的彻底告别标记尺寸和颜色等dirty work。&br&做了多年ERP的我明白了一个道理，能用机器代劳的活一定不要人来干。大家的时间都很宝贵，我们还是做点更有意义的事情吧。&br&&img src=&/3ea9dda14b75c3d754dcd_b.png& data-rawwidth=&917& data-rawheight=&730& class=&origin_image zh-lightbox-thumb& width=&917& data-original=&/3ea9dda14b75c3d754dcd_r.png&&&br&&br&&br&以下原文——————————&br&&br&经常用这几个，感到非常不错，推荐一下。&br&&img src=&/4f44f913bdd5d8ab00945_b.jpg& data-rawwidth=&323& data-rawheight=&131& class=&content_image& width=&323&&&br&&br&&br&&b&AEFlowchart (for UX)&/b&&br&来源 &a href=&///?target=https%3A///tadija/AEFlowchart& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&tadija/AEFlowchart · GitHub&i class=&icon-external&&&/i&&/a&&br&Flowchart 顾名思义，就是出流程图的。&br&&img src=&/6d3295b2acbb32a7db78d6c_b.jpg& data-rawwidth=&715& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&715& data-original=&/6d3295b2acbb32a7db78d6c_r.jpg&&共有四种控件样式 Decision | Input Output | Process | Start End&br&自动生成对应样式，一键连接所有元素。&br&注意：生成连线为1px，且图层默认被锁定。颜色过浅，有时候需要自己调整下border颜色，大神可以自己去调整脚本里的相关参数。&br&Sketch 升级到3.2.2之后经常没法自动连线，比较苦恼。&br&&br&&br&&b&Content Generator Sketch Plugin (f&/b&&b&or UI/UX)&/b&&br&来源 &a href=&///?target=https%3A///timuric/Content-generator-sketch-plugin& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&timuric/Content-generator-sketch-plugin · GitHub&i class=&icon-external&&&/i&&/a&&br&这个插件真是酷炫至极&br&&img src=&/ae112a5ac68e106f8eb95f_b.jpg& data-rawwidth=&147& data-rawheight=&88& class=&content_image& width=&147&&&br&可以自动填充地名人名图片和长文本。&br&做Contact Card时候简直像开挂一般高效。&br&&img src=&/0cab2d2a1ef330aa74f8aa3c4339ba54_b.jpg& data-rawwidth=&432& data-rawheight=&318& class=&origin_image zh-lightbox-thumb& width=&432& data-original=&/0cab2d2a1ef330aa74f8aa3c4339ba54_r.jpg&&填充图片还分男女，人名也分性别。还能自动生成邮箱和电话&br&&img src=&/9a633feeabfb204bac945e14bbde72a4_b.jpg& data-rawwidth=&253& data-rawheight=&386& class=&content_image& width=&253&&&br&可以节省大量时间，让你的Mockup看起来更加逼真。&br&&br&&br&&b&Sketch Measure (for UI)&/b&&br&&b&来源&a href=&///?target=https%3A///utom/sketch-measure& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&utom/sketch-measure · GitHub&i class=&icon-external&&&/i&&/a&&/b&&br&&b&强烈推荐，满星好评！&/b&&br&解救广大UI Designer于水深火热之中的神器，能够彻底解决开发人员和设计师之间沟通不畅的问题。&br&UI Designer最终产出物少不了Visual Guideline. 制作这份文档真是庞大的工程。&br&每个控件，页面的尺寸标记，颜色标记还有字号标记，最终页面的实现效果完全取决于这份文档的细腻程度。通常，有了这份文档，开发严格执行，最终页面还原度还是非常之高的。&br&这个插件就是可以在页面上自动标记出相关参数。&br&&img src=&/f70cb0a574cdafdca9ad331ec8645930_b.jpg& data-rawwidth=&474& data-rawheight=&404& class=&origin_image zh-lightbox-thumb& width=&474& data-original=&/f70cb0a574cdafdca9ad331ec8645930_r.jpg&&当然，不同的公司在这个环节执行的方法各不相同，标记的方法也不一样。&br&Case by case的来看，这款插件还是十分实用的。曾用过Markman和Pxcook，总是觉得还是有不尽人意的地方。&br&这个插件标记起来不仅仅的自动的，而且在源文件里直接标记...&br&整齐的文档，带着标记交给开发。相互之间还有什么好抱怨的呢？&br&&br&&b&Sketch Notebook Master (for UX)&/b&&br&来源&a href=&///?target=https%3A///marcosvidal/Sketch-Notebook& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&marcosvidal/Sketch-Notebook · GitHub&i class=&icon-external&&&/i&&/a&&br&&img src=&/a7edde5e9bea_b.jpg& data-rawwidth=&711& data-rawheight=&443& class=&origin_image zh-lightbox-thumb& width=&711& data-original=&/a7edde5e9bea_r.jpg&&&br&交互设计师都想让自己的mockup变得更加整洁，但为自己的设计写上注释是少不了的事情。整理格式会花很多时间，不整理看起来又很乱，说明太多经常会盖住相关内容。&br&这个插件可以自动生成一个边栏用来写相关注释。选中相关控件，即可生成标记icon，右侧生成comment.
comment可以自动排序对齐，十分方便快捷。&br&&br&&b&Taobao Image Sketch Plugin (for UI)&/b&&br&来源&a href=&///?target=http%3A///%3Fpage_id%3D1520& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&DOWNLOAD | LIAO ZCHENG&i class=&icon-external&&&/i&&/a&&br&&br&&img src=&/c66b3cb975bbc45a62ee1_b.jpg& data-rawwidth=&640& data-rawheight=&385& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/c66b3cb975bbc45a62ee1_r.jpg&&来自Taobao UED的优秀插件，基于Content Generator Sketch Plugin 修改的接地气的版本。&br&经常做电商平台产品的童鞋用起来还是非常不错的。&br&&br&日常工作主要用的就是这些插件，全免费。&br&Sketch真的是不可多得的优秀软件。&br&99美刀，你值得拥有~
12月28日更新———————— Marketch ( for UI) 来源 用过Zeplin的同学基本泪流满面，而这个免费插件可以让你泣不成声。 直接在本地生成html，非常便捷查看尺寸颜色等参数，和Zeplin一样的思路。不仅免费，而且公司也不用担…
&img src=&/3f58c1e15fbfc7de5e8d74_b.jpg& data-rawwidth=&707& data-rawheight=&170& class=&origin_image zh-lightbox-thumb& width=&707& data-original=&/3f58c1e15fbfc7de5e8d74_r.jpg&&&br&TL;DR: Bohemian Coding 是一个高效务实而且懂得做产品的小团队。但也因为团队小开发实力有限主打产品 Sketch 仍存在不少问题。&br&&br&先从这个小公司的历史说起。&br&&br&Bohemian Coding 在 2008 年成立，主要专注于开发 Mac 软件。&br&&br&Bohemian Coding 最初几年是个 one man company。创始人 Pieter Omvlee 是一位很有干劲的 Mac 开发者，在公司创立之前几年他一直利用大学课余时间开发一款矢量绘图工具 DrawIt。他创立 Bohemian Coding 的初衷是制作界面精致又好用的 Mac 应用。2008 年他联合优秀设计师 Laurent Baumann 打造了第一批产品：字体管理软件 Fontcase 及完全重设计的 DrawIt，于 2009 年初正式发布。得益于 Laurent Baumann 的卓越设计，两款软件包括产品网站都异常精美。其中 Fontcase 在当年获得苹果设计奖（Apple Design Awards）。&br&&br&&img src=&/5bcbf339b40ce63c73b889e17a0cc873_b.jpg& data-rawwidth=&1067& data-rawheight=&753& class=&origin_image zh-lightbox-thumb& width=&1067& data-original=&/5bcbf339b40ce63c73b889e17a0cc873_r.jpg&&2009 年最初上线的网站。&br&&br&随后 Laurent 入职苹果。Pieter 找到另外两位优秀设计师 Kevin Kalle 及 Emanual Sá 合作继续开发新产品。2010 年 Bohemian Coding 推出了 Sketch（DrawIt 的进化版），Sketchpad（Sketch iPad 版），Review（用于在 iPhone 上预览设计稿），SlipCover（Mac 下管理电影、专辑、游戏封面的免费应用）。此时的 Sketch 主要定位于小巧的矢量画图工具，而不是专业设计工具，依然比较小众。&br&&br&&img src=&/a9fb7fac3d680f845a993c_b.jpg& data-rawwidth=&1037& data-rawheight=&656& class=&origin_image zh-lightbox-thumb& width=&1037& data-original=&/a9fb7fac3d680f845a993c_r.jpg&&2010年12月最后一版 DrawIt 的界面，可以看出是 Sketch 的雏形。&br&&br&2011 年中 Emanuel Sá 全职加入 Bohemian Coding，成为联合创始人。他和 Pieter 决定把 Sketch 打造成最优秀的 UI 设计软件，甚至要比 Adobe Photoshop 更好用。这是一项非常有雄心的计划，工作量也很浩大（可以看作把 TextEdit 升级成 Pages），而他们只有两个人。他们还希望赢取 2012 年的苹果设计奖，因此两人赶在九个月内完成了所有设计和开发工作，在 2012 年 5 月正式发布了 Sketch 2。Sketch 2 发布后获得知名设计师的一致好评，也顺利赢得了当年的苹果设计奖。尽管 Sketch 2 初期 bug 很多而且容易 crash，很多设计师仍然迁移过来把 Sketch 用作主要设计工具。&br&&br&之后 Bohemian Coding 一直把 Sketch 作为最核心的产品，经过近两年的打磨 Sketch 已经优化了许多，最近他们发布了更加优化稳定的 Sketch 3，并添加了一些好用的新功能。&br&&br&&img src=&/9c8e5e05a5ca25a164e12a62d27be0db_b.jpg& data-rawwidth=&1294& data-rawheight=&779& class=&origin_image zh-lightbox-thumb& width=&1294& data-original=&/9c8e5e05a5ca25a164e12a62d27be0db_r.jpg&&最新发布的 Sketch 3 &br&&br&目前 Bohemian Coding 团队已扩大至 5-6 人，后来加入的有工程师 Sam Deane，设计师 Christopher Downer 和 Alberto Calvo。&br&&br&当然，团队里最核心的两位成员依然是 Pieter Omvlee 和 Emanuel Sá。&br&&br&Pieter 最早学习 Mac 开发的平台是 REALbasic，他学了一段时间发现 REALbasic 实在做的很烂，甚至 REALbasic 本身都不是用 REALbasic 开发的，于是他得到一个很重要的教训：自己开发的产品一定要自己用，否则永远不知道做的多糟糕。他本人一直用 DrawIt 或 Sketch 画自己的软件界面草稿。Sketch 2 之后 Bohemian Coding 所有产品及网站界面都是用 Sketch 设计的。&br&&br&Pieter 转学 Cocoa 不久，Delicious Library 发布了，这款由 Mike Matas 设计的软件相当惊艳，而且销量惊人，Pieter 深受打动，他决定也要做这样漂亮又好卖的软件。但他设计不出这么漂亮的界面和图标，反复琢磨后他决定干脆做款绘图软件好了，并且马上着手开发。开始后他才发现做绘图软件比想象中难多了，但他还是咬牙坚持下来，在 2006 年发布了这款名为 DrawIt 的矢量绘图工具。DrawIt 发布即定价数十美元，但由于问题较多，收到不少差评。尽管如此，Pieter 没有气馁，反而得到很重要的经验：软件收费很重要。软件免费又做的差用户肯定不会浪费时间留下有价值的反馈，当用户付了钱购买了软件，才会耐心地反映问题和提供建议。这一定程度上解释了为何连 Sketch Mirror 这样的辅助应用也定价 $4.99 以及为何 Sketch 3 要重新收费。&br&&br&Bohemian Coding 没有专门的客服，没有专门做市场营销，销量提升基本靠口碑。Pieter 认为由产品人员处理好客户反馈就是最好的营销策略。前阵子我试用了 Sketch 3 并给他们反馈过不少问题，全部都是 Pieter 自己回复。与他沟通的过程中感觉他们非常虚心和务实，收到的 bug 马上改，而且迭代速度相当惊人，小问题当天修好并发布新 build（每天至少 3-5 个 build），比较花时间的问题或建议若采纳的话他会回复「已加入 list，将在未来更新」。&br&&br&2011 年加入的创始人 Emanuel Sá 是全能型设计师，设计 Sketch 2 时他包办了 Sketch 2 的产品、界面、图标、网站以及 Bohemian Coding 品牌的重设计。我之前曾有幸与他短暂共事过，当时感觉他对色彩的把握相当好，设计的界面、图标的配色和质感都相当舒适漂亮，但另一方面他并不热衷于设计华丽花哨的东西，对如何做好一套产品自有一套原则和想法。这在 Sketch 2 的设计完全体现出来：他为 Bohemian Coding 重设计的网站大胆地用了黑色与金色的强烈搭配，而为 Sketch 2 设计的界面为了避免给用户带来干扰，看起来完全是 OS X 原生风格（实际上很多界面细节是定制过的）。他主导设计出来的 Sketch 2 和 Sketch 3 无论在上手容易度、功能体验及交互细节上都比 Photoshop 好很多。&br&&br&&img src=&/f0ecced68b2de1d61865b9_b.jpg& data-rawwidth=&1164& data-rawheight=&909& class=&origin_image zh-lightbox-thumb& width=&1164& data-original=&/f0ecced68b2de1d61865b9_r.jpg&& Emanuel Sá 设计的 Sketch 2 网站，风格非常强烈。&br&&br&后来加入 Bohemian Coding 的两位设计师也很有来头，Christopher Downer 之前是 Realmac Software 的设计师，参与过 Clear，Analog 等产品的设计，加入 Bohemian Coding 后他协助设计了 Fonts 和 Sketch。Alberto Calvo 之前是 Tuenti 和 Youzee 的设计师，目前负责 Bohemian Coding 的网站设计。&br&&br&总体说来，Bohemian Coding 的优点是团队小，执行效率高，而且所有团队成员都对如何做好产品有深刻的把握。缺点也是团队太小，一来 Pieter 长期单枪独马包办开发，一个人经验再丰富也能力有限，所以 Sketch 一直有不少程序上的硬伤无法解决，非常影响使用体验。二来因为他们是小团队无法进行全面的测试，而绘图软件使用情景又很复杂，一百个人用可能会遇到一百个不同的 bug，尽管 Sketch 改进速度很快，依然会给人感觉问题多多。&br&&br&* 以上关于 Pieter Omvlee 的描述大多来于他在 BubbleConf 2013 的演讲。 &br&&a href=&///?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Pieter Omvlee at BubbleConf 2013 on Vimeo&i class=&icon-external&&&/i&&/a&
TL;DR: Bohemian Coding 是一个高效务实而且懂得做产品的小团队。但也因为团队小开发实力有限主打产品 Sketch 仍存在不少问题。 先从这个小公司的历史说起。 Bohemian Coding 在 2008 年成立，主要专注于开发 Mac 软件。 Bohemian Coding 最初几年是个 one …
在一个工作流中讨论单个工具好与坏意义不是很大，关键是看个人和团队的选择。&br&举个栗子来说下基于Sketch为核心设计工具的周边协作软件吧：&br&1、产品前期的思考、沟通阶段：口头交流＋白板＋白纸＋笔，这个阶段主要是发散和记录想法。&br&&img src=&/dad783ec295f1c3fc128f0d_b.jpg& data-rawwidth=&852& data-rawheight=&640& class=&origin_image zh-lightbox-thumb& width=&852& data-original=&/dad783ec295f1c3fc128f0d_r.jpg&&&br&2、产品结构和逻辑梳理阶段：思维导图软件＋流程图软件。&br&&img src=&/fff16a79b75ae72a4b37_b.jpg& data-rawwidth=&587& data-rawheight=&124& class=&origin_image zh-lightbox-thumb& width=&587& data-original=&/fff16a79b75ae72a4b37_r.jpg&&&br&3、产品UI设计和资源输出：Sketch，它的优缺点讨论也很多了，这里就不多说了。&br&&img src=&/3bf61cbb9b379bf6b9a38_b.jpg& data-rawwidth=&1061& data-rawheight=&653& class=&origin_image zh-lightbox-thumb& width=&1061& data-original=&/3bf61cbb9b379bf6b9a38_r.jpg&&&br&4、产品交互演示、资源管理：InVision，它本身就有同步功能也可以配合Dropbox使用。&br&&img src=&/82b15e137f65d31b2d1e0aa41fc074e8_b.jpg& data-rawwidth=&1103& data-rawheight=&758& class=&origin_image zh-lightbox-thumb& width=&1103& data-original=&/82b15e137f65d31b2d1e0aa41fc074e8_r.jpg&&&br&5、面向开发的界面标注以及Guideline提取：Zeplin，在Sketch中Commnd+E一步导入。&br&&img src=&/87b61ca866ccdc727f7f01b0ceb7b493_b.jpg& data-rawwidth=&1092& data-rawheight=&773& class=&origin_image zh-lightbox-thumb& width=&1092& data-original=&/87b61ca866ccdc727f7f01b0ceb7b493_r.jpg&&&br&最后，怎么没有交互工具？因为交互在纸＋Sketch过程中已经完善了。&br&最后，我们的目的是有条理的把事情做完。你应该配合团队的选择，除非你是主导团队并具有强大的推动能力。&br&最后，不要否定一个强大的广泛使用的工具，也不要害怕尝试新的可能的工具。
在一个工作流中讨论单个工具好与坏意义不是很大，关键是看个人和团队的选择。 举个栗子来说下基于Sketch为核心设计工具的周边协作软件吧： 1、产品前期的思考、沟通阶段：口头交流＋白板＋白纸＋笔，这个阶段主要是发散和记录想法。 2、产品结构和逻辑梳理…
Zeplin 面向的用户是设计师和前端（Web、Mobile）工程师，相当于做的是中间桥梁这一块，核心功能为标注、Style Guide、备注文档与简单的团队协作。这块软件由四名在伊斯坦布尔的开发者制作，目前仅支持 Sketch，但是 PS 也已经出现在官网，应该也快了。&br&&br&在使用 Zeplin 之前，最早是使用马克曼进行标注的，也就是直接在输出效果图上量尺寸；使用 Sketch 插件 Measure 之后，可以在画板中生成尺寸标注信息，导出标注图提供给开发同学使用。无论是马克曼还是 Measure，最后的交付物是一致的，大概如下图所示：&br&&br&&img src=&/b67ffc138cac6bcb9f89d69_b.jpg& data-rawwidth=&2048& data-rawheight=&1536& class=&origin_image zh-lightbox-thumb& width=&2048& data-original=&/b67ffc138cac6bcb9f89d69_r.jpg&&&br&这样的标注图有个问题，就是已经破坏了原本的视觉效果图，标注的信息一定会对原设计稿形成遮挡，因此一般效果图和标注图要分开给，开发也经常需要在两个图之间切换，图片管理不太方便。如果你的设计稿同时要适配多个尺寸，还要要输出多份标注图，交付给多个开发同学。更重要的是，如果对页面进行了迭代修改，就需要重新标注、重新输出、重新交付，即开发与设计之间的联结是断的，每次都要人工把这个缺口接上。&br&&br&另外，如果时间有允许，设计师还需要制作 Style Guide，一方面是为了方便切图，另一方面是为后期迭代做好准备。Style Guide 大概要包含的是字体信息、色彩信息、icon 样例、常用间距等内容，如果自己制作的话，大概类似于是这样：&br&&br&&img src=&/07df864f9f5c22adcef15_b.jpg& data-rawwidth=&1905& data-rawheight=&1096& class=&origin_image zh-lightbox-thumb& width=&1905& data-original=&/07df864f9f5c22adcef15_r.jpg&&&br&Zeplin 主要就是为了解决上述问题的，使用它之后，可以在 Sketch 中一键导入 Artboard，在设计师做好图层管理（命名、分组）的前提下，它可以自动生成标注信息（并且可以标注为 pt 或 dp），允许添加注释形成类 prd 文档，并且自动提取 Style Guide，同时还允许添加项目组成员，提供给团队组查看项目。&br&&br&&img src=&/0f9eacf1b_b.jpg& data-rawwidth=&980& data-rawheight=&660& class=&origin_image zh-lightbox-thumb& width=&980& data-original=&/0f9eacf1b_r.jpg&&这是项目组管理界面，还有关于项目的简单统计，比如多少页屏幕、多少色彩和多少注释等。&br&&br&&img src=&/d0b9cb011b_b.jpg& data-rawwidth=&1440& data-rawheight=&900& class=&origin_image zh-lightbox-thumb& width=&1440& data-original=&/d0b9cb011b_r.jpg&&Guideline，可以承载字体、颜色。&br&&br&&img src=&/9e3e3db4badcd50d12d2ed_b.jpg& data-rawwidth=&1440& data-rawheight=&900& class=&origin_image zh-lightbox-thumb& width=&1440& data-original=&/9e3e3db4badcd50d12d2ed_r.jpg&&&br&图片界面，当鼠标不悬浮在某个元素上时，可以查看整个界面的效果图。右侧可以看到所有使用的颜色列表。当需要查看标注时，点击对应的元素即可：&br&&br&&img src=&/ba47e525e218da595acebbd5fe4cd78a_b.jpg& data-rawwidth=&1440& data-rawheight=&900& class=&origin_image zh-lightbox-thumb& width=&1440& data-original=&/ba47e525e218da595acebbd5fe4cd78a_r.jpg&&&br&这样的话，设计师和工程师就可以无缝衔接了，团队的开发同学都说这个工具太牛了：）&br&&br&缺点的话，目前有一些体验上的小问题。比如图片是存储在境外服务器上的，不管是登录还是使用最好都能自带梯子翻墙（使用好像并不需要翻墙，我都可以，但是注册登录一定要），一开始就是因为被墙的原因多次登录不上。其次是产品本身还是 Beta 版，处于邀请码阶段，所以肯定会有一些 bug 存在，像全屏之后右上角没有常用的放大缩小关闭按钮，还有 Sketch 插件一键导入快捷键经常失败等。&br&&br&这个开发团队的效率并不是特别高，我没记错的话这个软件去年很早就已经开始放出消息了，做了大半年快一年现在还是 Beta 版，PS 版说是快了，具体什么时候能上也是个未知数。不过团队的设计、风格还是很合我口味的，注册之后很快还发邮件过来询问使用感受，希望他们加快速度。
Zeplin 面向的用户是设计师和前端（Web、Mobile）工程师，相当于做的是中间桥梁这一块，核心功能为标注、Style Guide、备注文档与简单的团队协作。这块软件由四名在伊斯坦布尔的开发者制作，目前仅支持 Sketch，但是 PS 也已经出现在官网，应该也快了。 在…
有两种做法：&br&第一种做法，以屏幕渲染像素(Rendered Pixels)尺寸做， iOS iPhone 6，&b&750x1334px&/b& 开始设计。&br&750x1334px 这个尺寸是iPhone 6 的渲染像素尺寸，也就是用iPhone 6截图后看到的图片尺寸。iOS 这个尺寸设计完成后，再用这个尺寸适配Android 渲染像素 720x1280px，因为两个尺寸相近，切图资源可以用一套，适配Android 720px时只用横向调整间距即可。&br&这也是现在大多数UI 设计师做App 时的常用做法。&br&&br&&p&&b&标注&/b&&/p&&p&推荐Sketch 插件，Sketch Measure。 在第一次标注时，会让选择设计尺寸的界面分辨率，750x1334px 是Retina @2x 的尺寸，所以我们选择此项，标注的尺寸得到的实际上是pt(point)，也就是缩小2倍的尺寸。(图中正方形尺寸是200x200px，选择Retina @2x (pt) 选项后标注的尺寸是100x100pt)&/p&&img src=&/fda03c7cfb68a9ff6a22_b.png& data-rawwidth=&850& data-rawheight=&980& class=&origin_image zh-lightbox-thumb& width=&850& data-original=&/fda03c7cfb68a9ff6a22_r.png&&&img src=&/08fc0793bcecc35d93a967cf5c08297d_b.png& data-rawwidth=&2058& data-rawheight=&876& class=&origin_image zh-lightbox-thumb& width=&2058& data-original=&/08fc0793bcecc35d93a967cf5c08297d_r.png&&&br&&br&这里要说一下渲染像素(Rendered Pixels)尺寸。渲染像素尺寸是iOS 里的一种说法，对应的还有点(Point)、物理像素(Physical Pixels)。&br&&blockquote&&p&
早期的iPhone3GS的屏幕分辨率是320*480（PPI=163），&a href=&///?target=http%3A//lib.csdn.net/base/1& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&iOS&i class=&icon-external&&&/i&&/a&绘制图形（CGPoint/CGSize/CGRect）均以point为单位（measured in points）：&/p&&p&&strong&&em&1 point = 1 pixel&/em&&/strong&（Point Per Inch=Pixel Per Inch=PPI）&/p&&p&
后来在iPhone4中，同样大小（3.5 inch）的屏幕采用了&a href=&/question/& class=&internal&&Retina显示技术&/a&，横、纵向方向像素密度都被放大到2倍，像素分辨率提高到(320x2)x(480x2)= 960x640（PPI=326）， 显像分辨率提升至iPhone3GS的4倍（1个Point被渲染成1个2x2的像素矩阵）。&/p&&p&
但是对于开发者来说，iOS绘制图形的API依然沿袭point(pt，注意区分印刷行业的“磅”)为单位。在同样的逻辑坐标系下（320x480）：&/p&&p&&strong&&em&
1 point = scale*pixel&/em&&/strong&（在iPhone4~6中，缩放因子scale=2；在iPhone6+中，缩放因子scale=3）。&/p&&/blockquote&&br&所以，即使我们在Sketch 里是以实际像素设计的UI，但开发者在实现时都是以pt为单位绘制图形的。&br&至于有些知友说，我们一直都是用px 直接标注的啊。我之前也是这么做的，但在看上面一些文章的时候(上方的引用)，才发现pt 才是一种标准的标注方式。开发者在拿到我们的标注资源后应该会自己做一些换算工作。&br&&br&&b&切图&/b&&br&以750x1334px 尺寸设计的UI，icon 直接输出1x(原始大小)，后缀是@2x，因为750px就是以@2x 大小做的，@2x大小的资源供iPhone 4, 5，6使用，输出1.5x 大小，后缀@3x，资源供iPhone 6 Plus 使用。因为现在已经没人用3G，3GS 手机里，所以也就不输出@1x 的资源。&br&&br&&p&05.29 更新&/p&&br&&br&&p&第二种做法是以开发者在开发App时的尺寸为基准，也就是1x 大小的尺寸设计。&/p&&br&&p& iOS iPhone 6 1x 尺寸是375x667pt。这个尺寸的单位是pt(点)，也就是开发者在开发时的尺寸。适配安卓时，选择 xhdpi 360x640dp，(第二种做法是以开发者绘制图形的单位为基准，所以这里用了dp，但由于是以1x 的标准做，所以可以把px 看作是dp) &/p&&img src=&/96b70bfefda7eac19888a71_b.png& data-rawwidth=&2360& data-rawheight=&2356& class=&origin_image zh-lightbox-thumb& width=&2360& data-original=&/96b70bfefda7eac19888a71_r.png&&&br&&p&&b&标注&/b&&/p&&p&iOS：以这个尺寸完成 UI 设计之后，同样使用Sketch Measure标注。在第一次标注时，选择Points @1x(pt) 选项，标注出来的pt＝px。&/p&&p&Android：适配 Android 360x640dp 的尺寸，横向调整相应的元素，标注时同样会提示选择设计时的界面分辨率，LDPI、MDPI、XHDPI、XHDPI、XXHDPI、XXXHDPI 是供 Android 设计选择的，我们选择 XHDPI，生成的标注单位都是pt(尺寸) 和 sp(文字)。&/p&&br&&br&&p&&b&切图&/b&&/p&&p&iOS：可以直接输出@2x 资源用在iPhone 4-6，@3x 资源用在iPhone 6plus 上。&/p&&p&Android：Android 的分辨率很多，但通过&a href=&///?target=http%3A///devices/android_resolutions& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【友盟+】全域指数&i class=&icon-external&&&/i&&/a& 最新的 Android 设备分辨率排名可以看出主要的分辨率集中在 HDPI、XHDPI 和 XXHDPI，并且向大屏发展，所以我们在输出切图的时候，可以输出这几个 DPI 的资源即可，或者根据不项目具体要求。&/p&&br&&br&&p&Android 360x640dp 设计，输出@1.5倍作为 HDPI 资源，输出@2x作为 XHDPI 资源，输出@3倍大小作为 XXHDPI 资源。有没有感觉特别晕？如果可以理解最好，理解不了，推荐一个 Sketch 插件，&a href=&///?target=https%3A///zmalltalker/sketch-android-assets& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&sketch-android-assets&i class=&icon-external&&&/i&&/a& 可以自动导出标准的 Android 切图资源，iOS 的资源是全部放在一起，以后缀@2x、@3x(1x 资源当然就没有后缀) 的形式输出，而 Android 是把不同 DPI 下的资源放在相应的文件夹下，文件名是相同的。&/p&&br&&img src=&/b11def1bc26_b.png& data-rawwidth=&2128& data-rawheight=&2012& class=&origin_image zh-lightbox-thumb& width=&2128& data-original=&/b11def1bc26_r.png&&&br&&p&这里再来解释一下 iOS 和 Android 在开发 App 时的单位问题，以及适配 Android 所选的分辨率。上面的引文里介绍了在 iOS 中，绘制图形是以 point 为单位，而在 Android 中，是以 dp 为单位。关于 iOS 和 Android 上的单位问题可以查看&a href=&///?target=http%3A///articles/18009.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&这篇文章&i class=&icon-external&&&/i&&/a&。建议大家多读几遍。&/p&&p&从下面的表格中&a href=&///?target=http%3A///questions/6272384/most-popular-screen-sizes-resolutions-on-android-phones& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Most popular screen sizes/resolutions on Android phones&i class=&icon-external&&&/i&&/a&可以看出，Android 基础单位 dp，1x 的屏幕密度，Android 160dpi ＝ iOS 160ppi，1x基础单位pt。&/p&&p&2x 大小360x640dp，也是对应第一种做法里的屏幕渲染像素尺寸720x1280px。360x640dp 与 375x667pt 尺寸很接近，适配起来很方便。&/p&&img src=&/1d4d5bc031dc43f9b0d9d93f10f97bd6_b.png& data-rawwidth=&2722& data-rawheight=&1868& class=&origin_image zh-lightbox-thumb& width=&2722& data-original=&/1d4d5bc031dc43f9b0d9d93f10f97bd6_r.png&&&br&&br&思考第二种做法，首先是因为用 Sketch 的时候发现模版里给出的资源iOS都是375x667，但问了些朋友，却都是以750x1334尺寸设计，也就是第一种做法，当时就很奇怪为什么？后来在思考以1x的尺寸设计的时候发现 Android 的模版也是1x的，再回头看新建画布给出的设备默认尺寸也都是1x大小的，有点恍然大悟的感觉。&br&虽然很少有人用1x的尺寸设计，但我想 Sketch 给出1x 的模版资源和画布尺寸还是有意图的，不会是随便给的。&br&&img src=&/dbc49abb4a8fb1ebc937e989_b.png& data-rawwidth=&1060& data-rawheight=&1236& class=&origin_image zh-lightbox-thumb& width=&1060& data-original=&/dbc49abb4a8fb1ebc937e989_r.png&&&br&&br&PS：&br&之前也并没有按照750px 的尺寸设计UI，但最近要开始新的项目，也在思考题这个题目，想把一些碎片知识、概念系统的捋清楚，也在网上看了些资料，回答中难免有些概念说的不是很清楚或者出错，比如 第二种做法中适配 Android 后输出切图的倍数我想了几遍也还有些晕，&a href=&///?target=https%3A///zmalltalker/sketch-android-assets& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&sketch-android-assets&i class=&icon-external&&&/i&&/a& 插件我自己用的时候也还有些问题(based resolution)。&br&各位知友如果发现答案中有错误或者描述不是很准确的地方请提出讨论，谢谢！&br&两种做法的有缺点我会再思考，有心得再来更新。&br&&br&推荐相关文章：&br&&a href=&/question/& class=&internal&&用 Sketch 做 iOS 设计时，一般选用哪个尺寸？ - Sketc&/a&&br&&a href=&///?target=https%3A///shyp-design/design-at-1x-its-a-fact-249c5b896536& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Design at 1x － It's Fac&i class=&icon-external&&&/i&&/a&&a href=&///?target=https%3A///shyp-design/design-at-1x-its-a-fact-249c5b896536& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&t&i class=&icon-external&&&/i&&/a&&a href=&///?target=https%3A///shyp-design/design-at-1x-its-a-fact-249c5b896536& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A//blog.csdn.net/phunxm/article/details/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&iPhone屏幕尺寸、分辨率及适配&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A//blog.csdn.net/zhaokaiqiang1992/article/details/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Android屏幕适配全攻略(最权威的官方适配指导)&i class=&icon-external&&&/i&&/a&&br&&a href=&/question//answer/& class=&internal&&iPhone 6 / 6 Plus 出现后，如何改进工作流以实现一份设计稿支持多个尺寸？ - pigtwo 的回答&/a&&br&&a href=&///?target=http%3A///articles/18009.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&知识解答：基础知识学起来！为设计师量身打造的DPI指南（下）&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=https%3A///guide/practices/screens_support.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Supporting Multiple Screens：/guide/practices/screens_support.html&i class=&icon-external&&&/i&&/a&
有两种做法： 第一种做法，以屏幕渲染像素(Rendered Pixels)尺寸做， iOS iPhone 6，750x1334px 开始设计。 750x1334px 这个尺寸是iPhone 6 的渲染像素尺寸，也就是用iPhone 6截图后看到的图片尺寸。iOS 这个尺寸设计完成后，再用这个尺寸适配Android 渲染…
如果全团队是Mac的话，Sketch是非常好用且适应现在的设计趋势的。我们公司现在已经全部都用Sketch了。Sketch尤其适合设计师职能不细分的中小团队和个人作品的制作。线框到视觉稿可以在一个软件里完成，能省去不少时间。&br&Sketch的用户社区也比较繁荣健康，让人挺有信心继续用下去。（Sketch的扩展开发比PS容易的样子，我看github上还有人做了自动生成iconfont之类的高级脚本……）&br&&br&其他回答基本都只是在特色功能上评论，确实，这软件一开始的印象可能只有小巧便捷够用。但用多了后就会发现他&b&最好的地方不是比PS多了什么功能，而是针对UI设计的操作、交互模式，用起来非常高效。&/b&&br&PS因为要考虑摄影用户的使用，并不能针对UI设计师做最优设计。有些回答中说道的切图、测距等功能，其实最新的PS CC也能胜任（其他很多功能我相信要在PS上出现也只是个时间问题。跟PS比功能是很难有核心竞争力的），但PS的基本工具的操作/交互方式从来不是对UI设计专门设计的（我想这很难改变）。而这正是Sketch的取胜之道。&br&&br&UI设计时，最频繁的操作有选择/移动，整理图层、更改属性/样式。这3样东西是互相影响的，Sketch在这3方面都做得挺好，就完成了1+1+1=5的出色体验（虽然有一些是矢量软件天生的操作优势）：&ul&&li&整理图层&br&UI设计中得图层，和照片编辑时很不同的一点是，模块（or板块or分组）之间大多数不重叠，因此图层顺序也就相对不那么重要。只要对象能够被用户方便的选择到（后面讲选择功能的设计），图层的顺序很多时候是无所谓的。事实上浏览图层面板是低效的，不管缩略图还是文件名，人的读取效率都是不够理想的。Sketch通过更适宜的基本功能设计，很大程度上减少了用户对图层面板的依赖程度（不用去看），不仅直接简化了操作，也使用户可以更专注于画布上得内容。&br&&/li&&ul&&li&不要小看Forward和Backward的设计。Sketch的这个功能设计地非常好。&br&首先这个功能的运作方式非常高效，它会考虑到遮罩关系，不做无意义的顺序变动。比如从上到下有a/b/c三图层，a遮着c了，但是b在其他地方，那我对c执行一次forward，c就是直接跑到a上面了（c/a/b），而不是只傻傻地提升一个级别（a/c/b）&br&其次它只改变同级别内的图层，所以图层组内的东西怎么forward都不会跳出图层组。&br&相比PS，图层一多，拖动来改变顺序太痛苦，用forward和backward每次只移动一层，低效，而连按太欢了又可能一不小心把分组逻辑搞乱了，必须小心翼翼&/li&&li&复制、粘贴&br&Sketch中复制、粘贴的操作和日常其他软件里的复制粘贴很相似。选中图层or图层组的情况下command+c复制，command+v粘贴。另外很重要的一个设计是，当前选中的对象决定粘贴出来的东西在哪个图层组里。这样大部分复制粘贴操作是不用看图层面板的。&br&而PS里，ctrl+c和ctrl+v只能复制像素（选区），图层/对象的各种复制都远没有Sketch那么爽快，因为你必须通过不狗直观的图层面板来决定新图层的上下关系和包含关系。&/li&&/ul&&li&选取、移动工具&br&这个最基本、最重要的工具设计的好不好，影响是巨大的。&/li&&ul&&li&PS选择分为矢量的选择（A）和位图的选择（M）和图层的选择（V），略微复杂、繁琐。比如我现在要改变一个矩形矢量图层的圆角参数，我得先V切换到图层选择工具选中图层，然后A切换到矢量选择工具选中该路径，然后属性面板里才给我出现了圆角的参数。&br&而Sketch里只有唯一的选择工具，一统天下。&/li&&li&Sketch里的选择工具，通过双击可以把选择范围的层级深入一层（也就是可以选图层组里的东西），这样即使是嵌套了很多层图层组，每层还好多个图层组的情况，也可以很方便且逻辑较清晰地进行对象的选择。这个双击使得用户更加不需要关注图层面板。&br&而PS里的选择工具有两个模式，一个是选图层组，一个是选图层。图层组模式是不能选图层组里的图层；图层模式时不能直接选整个图层组。双击？那是什么？&/li&&li&Sketch里的默认的工具是选择/移动工具。其他工具都是画一下就切换回选择工具。你说你要连续添加很多个图形/元素？用make grid批量复制并布局吧。&br&画好一个东西后接着布局，更加符合绘制UI的情况。而PS里你画好一个图形后还得按着ctrl才能移动。（PS的操作就是ctrl基本不离手）&/li&&/ul&&li&更改属性/样式&br&Sketch里的涂层样式是在右栏里常开的。而在PS里先要在图层面板里找到当前选中的涂层然后双击打开样式编辑窗口，而样式窗口的弹出位置又是不那么确定的（尤其是多屏环境时），这么多次的视线和鼠标的移动，是非常低效且烦人的。&br&其实这点PS也是可以模仿的，只要开发个图层样式的面板，然后这个面板可以自定义显示哪些属性（不然会过多塞不下）就可以了。但Adobe没有，我也没搜到这样的一款扩展/插件。&/li&&/ul&经我这么一番叙述大家应该可以意识到了PS做UI设计是多么繁琐。&b&sketch不仅简化了流程，还让左手（不用太多时间按着ctrl）和眼睛（不用去仔细阅读图层面板）更加轻松。它带来的隐藏的效率提升是比较可观的。&/b&至少操作体验是很好的。&br&Sketch还有很多人性化的设计细节。各位用着用着就能体会到。&br&&br&简单明了的功能加上以上各种亲切的交互设计使得这软件的上手难度极低。我转向Sketch的时候除了个别疑点稍微搜了下文档，总体边学边用的过程都毫无阻碍。&br&&br&感受到的相对的不足有：&br&&ul&&li&团队小，软件没有Adobe的产品稳定，遇到bug时基本上就是毫无办法。也不知道什么时候会修复。&/li&&li&大点的项目or大尺寸位图多点，性能就很一般了。&br&之前做一个web app，背景整个是个位图，结果artboard也就十几张就比PS还卡了。&/li&&/ul&Sketch如果功能上能满足团队需求，是目前的不二之选。它决不是简单地针对UI设计开发特别的功能、去掉不太用的功能，而是在基本的操作层次上给UI设计师带来了得更好地体验。
如果全团队是Mac的话，Sketch是非常好用且适应现在的设计趋势的。我们公司现在已经全部都用Sketch了。Sketch尤其适合设计师职能不细分的中小团队和个人作品的制作。线框到视觉稿可以在一个软件里完成，能省去不少时间。 Sketch的用户社区也比较繁荣健康，让…
团队目前默认使用 &b&iPhone 6&/b& 的 &b&1x &/b&尺寸来做设计。&br&&br&&img src=&/1c3531dbb2b0d1d681e365a26e678668_b.jpg& data-rawwidth=&215& data-rawheight=&218& class=&content_image& width=&215&&&br&&br&主要原因如下：&br&&ol&&li&&b&1x&/b& 尺寸下做设计，输出方便，直接输出 &b&2x&/b& 资源给 iPhone 5 和 iPhone 6 用，输出 &b&3x&/b& 资源给到 iPhone 6 Plus 用。&br&&/li&&li&选择的 &b&iPhone 6&/b& 的 &b&1x&/b& 尺寸，向上适配 6P 向下适配 5 会比较方便。&br&我们看下下图，这是 3 个屏幕实际像素尺寸的对比，如果要在这个尺寸下作适配，因为尺寸差异大，导致不够直观。需要把同样的原件 （图标文字这些）放大后才可以去做适配，相对麻烦。&br&&img src=&/23ac48ea66e3b4f62ffee}
我要回帖
更多推荐
- ·我国政府预算收支财政预算包括哪四个内容些具体内容？
- ·政府和社会资本合作对经济发展的促进作用融资途径有哪些
- ·中山广州龙腾公司是干什么的商贸有限公司服务内容
- ·为何皮吉·德维茨成为希腊境内北京奥运会火炬传递路线圣火传递的最后一名火炬手？
- ·是最新资金盘有哪些吗
- ·新手求助，vivado2015.3无法识别zedboard
- ·java8 reduce方法中的第三个参数combiner有什么作用
- ·求助每次进游戏都要更新597M怎么办
- ·vivox9splus黑名单在哪里
- ·如何登录百度网盘
- ·预约驾驶证的考驾照原手机号注销了了怎么办
- ·Linux如何更改密码怎么修改用户密码
- ·在相应的格子里面输入数字后，自动跳转到Sheet2 里且自动换行。
- ·小马激活工具win10要多久激活
- ·吉比特无源光纤接入用户端设备为什么发出来无线热点，能用不，也没装路由器为什么有热点。
- · 有没有把车子被4s搞坏到IOS11的
- ·怎么在bios中bios开启vtt
- ·现在C++用处广泛的近义词吗？
- ·http://httpmp.weixin.qq.comm/s/BOJtE-xXE1xkiHrQH8OXUA
- ·如何评价 Airbnb 发布的 React Sketch.app 工具类app如何运营
- ·如何用一周时间开发她拍APP是一款什么软件Android APP并在Google Play上线
- ·为什么现在港版ipad下载东西要钱给钱
- ·native-base react-native-react element 87哪个好用
- ·武汉大学自助支付平台必须用民生银行怎么自助解锁吗
- ·手表支付宝支付安全性在扫码支付的安全性上有什么优势？
- ·苏州园区租房提取园区公积金提取流程流程
- ·黄金俏天下沙棘油是传销吗可以减肥吗
- ·东方雨虹可转债 发行可转债 网上配额多少
- ·医保从外地迁回来医保钱什么时候到账能到卡
- ·加盟成都成都正宗特色美食小吃可以吗，门槛高不高？
- ·淘宝淘宝店铺身份认证复核资料复核不是本人怎么办
- ·如果锂矿内存价格上涨涨10倍对新能源车成本上涨多少
- ·小区房子已经入住两年了，但房产证满两年免营业税一直没下来，该怎么办
- ·进货工业富联顶额申购 市值除以进额
- ·从博弈论基本要素角度看企业知识竞争力有哪些构成要素
