如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

但是有需求就有市场，想一想为什么你讨厌拼多多，是假货、是山寨、还是其他什么，究其原因是饱汉不知饿汉饥。而饱汉只是很少一部分人群而已，我们自然不是他的目标用户，随你拉黑也无所谓，所以社交电商的崛起是必然，并且有他独特的优势：

• 在移动场景下的购物场景更加丰富，势必为社交电商打下了更好的基础；
• 社交电商在发展政策上逐步完善，将是一片潜力巨大的市场；
• 获客成本低，下线城市发展空间大；
• 电商巨头排兵布阵，准备构建社交电商生态。

目前社交电商的形式主要分为两种，一种是拼团，如拼多多，这种模式通常发起者是不收益的，只是所有拼团者可以享受更低的价格购买商品，算是一种利人利己，裂变质量更好的一种行为。另一种是微商，这种模式的裂变范围更广，但是裂变质量较差。微商被冠以恶名刷屏大家都明白，而经我们研究发现，其实发圈的推荐购物是效率的分销行为。还有这样的熟人卖货逻辑是否可行？

社交是最好做的，也是最难做的。购物从本质上来说都是发现有需求才购物，但逐渐的变成了逛／别人推荐想起来自己有需求，再购物的变化。前者我们可以通过广告、营销、产品的优化来让用户转化，而后者正是现阶段我们需要考虑的事情，如何让用户买单那些可能有需求的东西，满足用户其他更深层次的需求。

2017年艾瑞咨询的移动社交用户在应用内购物驱动因素分析，我们能发现社交关系链的价值还是非常值得挖掘的呢。

俗话说的好，详情页乃兵家必争之地，得详情页者得天下。首先我们来看看详情页的首屏。可谓是百花齐放了，业务、用户、场景决定了功能与信息架构。电商详情之所以复杂就是因为它需要承载很多复杂的场景，所以很多时候并不是所有的信息都是有用而你又无法简化。这显然不仅仅是普通的电商所呈现出来的商详，而是拥有「社交背景的商详页。」

那么下面我们分别从功能结构、以及细节来剖析这四款电商产品的商详。

一、拼多多

1. 功能结构

从信息结构上看页面信息层级还是比较清晰的，也确实很像3，4线城市大卖场的感觉，各种活动优惠的标签也是很排斥奥卡姆的剃刀了。但是各种活动标签依然让人有些眼花缭乱，视觉上页面缺少一些品牌特征。

其实我之前有做过物流的产品，当时也很纠结好用和好看的平衡点到底在哪里，后来我发现了如果为了要用而要舍弃好看，请不要犹豫，一定要选择好用。而你一旦绞尽脑汁想办法折中，对不起，那会变的既不好看又不好用。所以拼多多的视觉、图片风格我还是很能理解的。

然后首屏的上半部分依然是帮助用户建立认知的信息介绍区域，同样也是大图置顶的方式，但是细心的小伙伴在对比的时候能发现拼多多其实把全场包邮、假一赔十等特色信息放在了第一梯队的板块，很明显，它想告诉大家我们的服务是一流的，不会有假货，因为全是山寨。

2. 细节

比较特殊的地方是，在左下角有一个更多的按钮，收纳了历史浏览、回到首页和帮助3个功能，通常「更多」的按钮会放置在右上角，这里的设计和大部分用户的认知可能不太一致。还有一个比较有意思的是，价格最右侧显示的是已拼而不是已售，所以从细节能看出来拼多多是有多么强调拼团这个属性了。

然后我们熟悉的购物车功能没有，因为拼多多也是限时拼团电商，要拼团先支付，所以没有购物车的场景。而大家看到的单独购买这个锚定效应也是运用的很直接了，应该没有人会用更高的价格还死命的加购物车吧？

锚定效应（Anchoring effect）是指当人们需要对某个事件做定量估测时，会将某些特定数值作为起始值，起始值像锚一样制约着估测值。在做决策的时候，会不自觉地给予最初获得的信息过多的重视。

二、云集

1. 功能结构

云集首先是一家会员制电商，其次才以社交的手段来进行分销的电商。大部分以微商形式存在的电商都会面临店主同时可以买或者卖的场景。然而很有趣的是，这样的 s2b2c的模式，商详究竟要如何做呢？其实你能发现，优秀的电商产品总有自己的核心关键词，比如拼多多是拼团，云集是批发价。所以当我们要满足买的场景时告诉用户自购可以享受批发价，而卖的场景则可以赚利润。虽然买的场景多，但是为了业务考虑，我们依然要把卖的场景做足。

在商品详情中，和其他产品不同的是多了这几个功能：

• 任务奖励，通过完成销售笔数和金额达成任务。
• 品牌授权，对拥有被授权资格的商品透出品牌授权背书入口，增加用户的品牌信任度。
• 发圈素材，不是自用推荐的商品，一般很难卖，别人的发圈素材能够帮助店主更快的卖货。
• 大家都在卖，卖也要卖好卖赚得多的商品。

以上的功能都是刺激以及帮助这些小b去推荐及销售商品。从而整个商详页都是为了形成一种卖的氛围同时兼顾着买的功能。

其实我们都知道，社交电商（微商）都是有组织有纪律的，只有散户才会自己挑商品找素材去卖货，而拥有社群的店主只需要一个商品的二维码即可。

2. 细节

用过云集的买家都知道，云集和环球捕手一样是没有和其他电商一样的评价功能的，会有人问为什么那么重要的评价功能不放呢，别人如何建立信任呢？其实我们有在收集评论但并没有公开，而且我们侧重的是推荐购买，别人推荐你之后其实评论的意义就不大了。所以既然我们在收集评论那在供应商的选择上也会一直更新。

另一个原因就是评论这个功能在去中心化的小b店主为中心的产品中并不合适，可以想一想，社交电商和传统电商不同，传统电商会有商家入驻，商家和小b店主的区别在于商家除了需要销售商品时，还需要维持店铺的信誉和好评率，所以评论对于商家来说特别重要。但是以平台为背景的店主只需要分享商品卖货就行，评论的好坏并不是特别重要。

所以说到这里大家就会觉得社交电商真的是一个伪命题，你到底是为了别人好还是纯粹想赚钱。所以大家发现在这样的场景下，评论好那么都OK，如果出现大批量的差评，这个差评给的是商品，并不是某一个小b店主，在这里商品和服务就不像传统电商那样捆绑在一起而是区分开了。

三、环球捕手

1. 功能结构

信息整体强调了价格和限时特卖，弱化了标题和介绍。再早些时候所有 app 都还把标题放在价格的上面，并以大字体风格为骄傲。现在反而都把价格放在了标题上面，而环捕把价格元素做的更加明显。

2. 细节

标题和介绍字号变小我认为可以理解，在同样以推荐消费的背景下，我已经知道是什么商品了，不管是从别人推荐而来还是自己从列表点进来都已经对该物品有详细的了解，商品标题和介绍并不是特别重要。不过既然如此，介绍放一行也应该足够了，既要弱化为什么又要放多行。排名和最近销量笔数的视觉呈现有待改进，一个直角一个圆角不太和谐，最近销量不可点击却做成按钮的形状。

四、洋葱海外仓

1. 功能结构

大家可能对洋葱跨境电商比较陌生。它同样也是一个线上的分销平台。它的模式和其他两个稍有区别，用户如果想卖货可以选择两种方式，一种是成为代理商，代理商可以招募店主，同时可以获得下面店主销售利润的30%。而店主不可以招募店主。而另一种就是直接成为店主，可以获得销售额利润的70%。

说完模式，我们来看看它商详的信息展示。首先我们会发现在商品大图上方展示的是相关的8件好货，那么我们能想到的是：

• 为了提高客单价，
• 跨境电商的邮费国际物流和清关费较贵。

所以能一次性买足够的商品自然是比较划算，所以在这里更明显的位置放置了相关的商品供买家和卖家挑选。

你会发现洋葱在详情中加入了评价功能，但这里的评价并不是所有的用户的评价都能够被显示出来，而是经过官方审核以及店主上传的评价才能够被显示的。

2. 细节

洋葱将利益点和卖点放在了图片中沉底，这也能够让商品与文案的关联性更强，缺点是容易被忽略。

产品介绍上方会出现一个头像，但是新手用户会很疑惑这个头像到底是谁？官方还是店主不得而知。而该产品的介绍文案过多也会影响首屏的展示效率。

洋葱将返回首页、以及底部标签导航的功能集合在了一个 fab上，令人不太理解的是悬浮按钮中和底部均有购物车功能，然而二级页面也没有存在这个 fab，所以悬浮按钮中的购物车功能有点鸡肋。

所有的「社交电商」在应用内放置互动聊天的功能都特别鸡肋。店主与买家的社交纽带依然是微信，而平台对于买家来说只有在逛和买的时候才会使用，即使做了IM也无法在应用中植入社交场景，更不用说让用户养成习惯了。所以做社交要有背景。

底部只有加入购物车，没有立即购买按钮。一个是希望提高客单价，同时帮助用户节省物流费。另一个是 b2c电商的产品都由平台物流统一发货，他和 c2c 的淘宝不同的是淘宝购物都是根据不同的商家进行物流运输，所以不同的业务模式形成的功能也是不同的。

总结

广告营销的电商模式未必能满足喜欢个性化需求的用户，我们购物或许会逐渐的变成你觉得我适合买什么而不是我看看你有什么。徐志斌老师在《社交红利》中提出社交红利能够从人与人之间的关系，互动中产出更多的价值，那么基于电商背景是否可以将电商价值最大化。

而我们今天讨论的社交电商商详，它能够帮助小b用户与c端用户更的链接，不同业务模式下的商详所呈现出来的功能、框架、视觉表现都是有很大区别的，而我们要做的是让买卖双方的关系链更结实。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

麦肯锡咨询公司在调研了横跨5年时间的200万份财务数据和10万多个设计项目和举措之后，发现以设计为主导的企业收益提升了32%，而股东的总回报率提升了56%。

多年以来，设计领域一直在努力探索和发掘更加有商业价值的实战案例，而麦肯锡咨询公司（McKinsey＆Company）的一项开创性的新研究终于开始将设计和业务之间的影响关系给勾勒了出来。

这些总计超过200万份财务数据和10万多个设计项目牵涉到了300多家上市公司，他们都试图让设计成为商业中最重要的组成部分，麦肯锡发现其中这些对于设计有强烈倾向且擅长将设计原则落实到实践当中的团队和企业，在收入上提升了32%，而股东的总回报率提升了56%，而呈现出这一特征的，主要涉及到三个行业：消费品、医疗技术和零售银行业。

「在过去的5年当中，商业领袖们开始越来越多地呼吁在产品和服务设计领域提升竞争力，」在英国领导产品研发和设计实践的麦肯锡咨询公司的合伙人 McKinsey 说道：「在如今的大环境之下，产品和服务越来越难以从激烈的竞争中脱颖而出了。」

Sheppard 和其他的研究人员使用回归算法来分析和评估不同的设计行为。在研究过程中，他们会试图将设计主管置于公司高层管理当中，或者将高管的奖金和可用性数值关联起来，看看这样会怎么影响这些企业的财务业绩，而这300多家企业基本都是自愿加入并配合机构的研究。当真正面对设计的时候，这些互相处于竞争位置的企业站在了一起，一同学习。研究者发现，即使身在不同的领域当中，但是影响并增加企业总收益的，主要源自于四个方面，并且他们将这四个方面的行为决策最终构成的综合指标称为麦肯锡设计指数（MDI），并且使用 MDI 来对这300多个企业进行排名。这4个关键领域分别是：

1. 将设计所产生的影响作为衡量标准，就像跟踪成本和收入一样严格跟踪。麦肯锡在这个调研中引用了一家游戏公司的案例，他们通过对网站主页的功能进行小幅度可用性调整，从而将产品销售额提升25% 。
2. 通过面对面的交谈和调研，将用户反馈和需求放在首位。这有助于团队在标准的用户体验之外进行思考。麦肯锡在报告中援引了一家连锁酒店的案例，酒店向用户展示了作为纪念品的橡皮小鸭，上面印有该酒店所在城市的形象，他们鼓励用户搜集不同城市的橡皮小鸭。这一设计项目是和用户沟通之后的产物，根据跟踪数据，单这一项目就将用户留存率提升了3%。
3. 将设计师引入跨职能的团队，并且激励顶尖的设计人才。麦肯锡在这个环节引用的是 Spotify 的案例，Spotify 营造了一个多元化的企业环境，并且赋予设计师足够的自主权，创造足够优质的设计，这和同类的公司截然不同，后者的设计师通常需要花费大量的时间来给营销团队制造幻灯片。
4. 鼓励进行调研、制作早期原型并且迭代。产品或者服务在发布之后并不是彻底结束了。麦肯锡的研究报告中援引了一家游艇公司的产品设计作为案例。这家公司的设计师通过和乘客进行交谈了解信息，借助支付数据来评估的活动，利用机器学习算法来分析，来发现游艇布局中低效、体验较差的部分，并且借助这些信息来不断的迭代和调整，提升产品和服务。

实际上，能够持续地在公司中执行这四件事的公司，MDI 得分会最高。MDI 指数最终也确实和公司的盈利和总回报率正相关，最有意思的地方在于，MDI 排名最靠前的25%的公司和后面75%的公司相比，在盈利和回报率上明显高出更多，而后75%的公司之间的平均回报率增长相互之间就没有那么明显的区别。换句话来说，如果想要让设计真正意义上发挥它点铁成金的效果，企业必须尽可能多地投入，甚至比麦肯锡所提出的标准还要苛刻，超出要求才行。对于负责调研的 Sheppard 而言，这个结果简直是个惊喜。根据他们的统计，这些 MDI 指数较高的企业，每投入一美元在设计上，所获得的收益要远高于他们的预期，但是，对于那些一开始就真正专精于设计的公司而言，再在MDI 上做提升影响相对就没有那么明显了。

「对于大家而言，需要作出合理的决策。」Sheppard 说道：「我们是否要认真对待设计，或者说，在目前这个局面之下，是否要投资？坦率的讲，如果想要用好设计，那么需要在设计这件事情上，做得恰到好处才行。」

在麦肯锡的调研过程中，他们发现许多公司压根就没有在这四个领域中认真尝试过。调研发现，40%的产品在研发过程中，根本不会同用户进行沟通交流，50%的人根本没有使用客观的方法来评判他们设计团队输出的产物。只有不到5%的受访者表示他们的领导能够让数据来驱动产品，或者使用客观的方法来作出设计相关的决策。有超过60%的受访公司则是在开发后期才使用原型，并且仅供内部使用。值得注意的是，这些问题全部都是自上而下的问题，公司的设计师是没有办法自行解决的。正如同报告当中所写的：

「由于没有明确的方法将设计和企业盈利联系到一起。企业的高层领导往往不愿意将稀缺的资源向设计部门倾斜。这个本身是有问题的，我们通过研究发现，强大而一致的设计环境牵涉到公司的许多关键驱动因素，而这些都是需要公司高层来决策和投资的。虽然许多设计师敏锐的意识到了涉及 MDI 的四个层面，或者其中的部分因素，但是不论是哪一个方面，都不是企业中的设计师能够单独解决的，往往需要领导层的支持才行。」

那么，一个从来都没有「以设计为中心的文化」的企业，到底要如何构建起公司的设计文化呢？这份研究报告的作者建议，选择一个项目作为试点，并且给予团队承诺以践行上述的4个方面都能够在此践行。由于有不少公司自愿参与到整个调研项目中，所以他们能够验证了麦肯锡资讯公司的一些想法。目前他们发现，如果从一个试点开始，而不是试图在全公司推行以设计为中心的计划，能够获得更好的效果和收益提升。举个例子，一家医疗设备公司，在设计新的手术设备的时候，通过组建跨职能的设计团队，在设计过程中创建了110多个原型和概念设计，在2年时间内进行测试和迭代，并且将公司高管的奖金和产品可用性挂钩，并且在设计过程中不断地和一线的外科医生沟通，并获得反馈。最终，这家公司的产品的可用性得分比竞争对手的产品高出12个百分点，而公司的市场份额更是上升了40%。

Sheppard 希望 MDI 能够扩展到更多的行业和领域，就目前而言，MDI 可以将设计师造就明白然而管理层依然不太了解的道理，最终反馈到企业收益上，这是必经的过程。「这份报告昭示着新时代的到来，」Sheppard 说道：「设计最终走到了管理层。」

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

通过以目标用户为核心的3个要素——定方向、找切入点、埋分享因子，来谈谈创意传播类的项目该如何入手。希望你读完本文后能摆脱做创意如同盲人摸象的痛苦。

一、写在前面

前些日子被《互联网公司时尚穿搭指南》刷屏，平时办公室中各路高级冷淡的同事竟也不淡定地纷纷转发议论起来。

自网易各种视频类测试类H5 的爆红到麻痹，以及 GQ各种漫画类图文的惊艳到习以为常，鲜有冲出重围受到广泛追捧的好项目了。

这次让其出品方「吓老湿」赢很大的，自然就是「创意」。在平台系统化趋势的时代，常有唱衰创意内容产出的声音，其不稳定性让人望而却步。我们也应该清楚的明白，做创意这件事，做好了一定有能够超出预期的回报。

本文，我们就通过以目标用户为核心的3个要素来谈谈——创意传播类的项目如何入手。

如果你在互联网公司，并有着需要尝试做创意的需求，希望你读完本文后能摆脱做创意如同盲人摸象的痛苦，追溯根本强于把控。

二、什么是创意传播类项目

也许主题不限、表达方式不限，但它的需求描述中常常伴有「刷屏」二字。其目标是通过创意内容产出的方式达到「刷屏」传播的效果，并产生其业务价值。

所以，内容的产生，不仅要能打动人，还要求不能自嗨，要能服务于产品，有商业价值。

譬如之前刷屏的「世界再大大不过一碗番茄炒蛋」的招商银行短视频，有创意，打动人了，也有很好的传播效果了，但与本体「招商银行」业务本身并无太大的联系和益处，使之成为经典的无效项目。

一个好的创意，必须要清晰准确的划定目标受众圈层，以传播本体对他们的核心价值为依托去规划内容。以下我们就详细说明如何一步一步打好地基：

1. 定方向

定方向就像画骨。

你需要根据项目的目标，挖掘传播本体的核心价值，并把它摆在整个项目需要围绕的主心骨的位置上。骨就是项目核心，它界定了项目的范畴，不能萎缩也不宜过度拉伸。

2. 找切入点

切入点就像建立筋络。

你需要根据目标受众的圈层文化，借助一些社会热点现象，建立与项目方向的契合的切入点。有了切入点，你的项目才有了脉络，才能有了内容的基石。

3. 埋分享因子

埋分享因子就像赋予血肉。

你需要清醒于自嗨之外，理性预设要靠什么吸引目标受众，刺激他们分享传播。血肉之躯最为表层，也最容易产生刺激，有了分享因子，你的项目才能传播起来。

具体怎么做，一个一个来说。

三、定方向

定方向首先要了解2个概念作为前提：

• 「业务目标」。
• 传播本体的「核心价值」。

比如为京东双11做创意传播，本体已为用户所熟知，它的项目目标就是宣传造势。

双11作为全民最期待的购物节，该传播本体的核心价值就是以特色福利和促销为主的核心利益点。反之为京东旅行这个知名度低的产品做创意传播，更注重曝光产品品牌，而最大价值在于京东嫡系的背书。

分析了这2个前提，我们就可以开始从不同的维度去找方向。

基于我在京东做的项目，基本可以把方向分为以下5个维度：

1. 围绕广义的产品核心竞争力

比如京东一直以来主打的「物流」，淘宝15年主打的「万能」，就是产品核心竞争力。

2. 基于目标用户的调性

比如京东从男性化到更重女性化的转变，比如网易严选主要切中的「白领小资」，就是基于目标用户的调性。

3. 表达主题态度

比如京东这2年屡屡强调的「好物」，天猫17年根据品牌升级所主打的「理想生活」，就是产品区别于其他人的主题态度。

4. 突出项目亮点

比如淘宝新势力周所突出的「独立设计师」，网易考拉Julia 所表现的黑五项目中的「KOL支持」，就是可以突出的项目亮点。

5. 针对利益点包装

比如京东18年618活动中厉害的「平分20亿京豆」，天猫双11曾经的口号「不止5折」，就是项目的利益点。

并不是一个项目都要表达这5个维度，也并不是一个项目只表达其中一个维度。

分析这些维度的目标是要从各个方面去梳理传播本体的子弹，挖掘到什么是可以并且值得拿出来出击的武器。

分析这五个维度不能只是设计师的自我YY，更需要与需求方一起做这件事。而后更要做的是与多方一起共同去根据前提，也就是传播的目标和传播本体的核心价值去界定项目的方向。

只有在项目之初，与需求方、决策拍板人、项目执行者多方确定并达成共识，才是有效的方向决策。

譬如在17年京东双十一的项目中，在梳理以上内容之后，我们与需求方达成一致的项目方向是：基于京东双十一本体的特殊福利优惠亮点去打。

定了这个方向之后，在后续的创作过程中，我们就能以终为始，拥有了对项目产出的预期管理，在模糊的创意没有谁对谁错的灰色地带建立了对错标准。有了标准才能团队上下协作齐心共力，不至于混乱。

四、找切入点

如果你的项目在设计阶段走心走肾，投放市场用户却冷漠相对，很有可能就是你的切入点没有找好。

切入点是什么？

就是你要通过什么概念去表现既定的方向，要通过什么角度和故事去表达要传播的重点。

比如 Julia系列的切入点就是入职新人各种被压榨的灵魂共鸣。比如 GQ深夜酒馆的切入点就是城市人群攀比炫富行为的洞察。一个好的切入点，必须要去洞察目标受众最真实的行为，因为只有真实，才能引发共鸣。那么如何去找这个点呢？

你可以尝试从以下3个维度去做分析和发散：

1. 目标受众的圈层人群文化

他们的痛点痒点是什么，他们关注什么，他们的行为模式是什么，他们有哪些经典场景？

比如 GQ 的软文曾以洞察各种人群切入：略带直男属性的大龄男青年、系统外的人、花钱如流水的00后、边缘青年、北上广的租房一族、深度快手用户等等。

通过洞察这些群体的特质，就能让人们迅速能找到共鸣。

2. 所处社会的热点和梗

分别包括社会焦点，就是社会广泛存在的问题；当下热点，就是一段时间内大家喜闻乐见的话题；时间节点，就是传播时会发生的社会性大事件。

好的热点和话题可以借势，比如国庆的支付宝「中国锦鲤」活动，在「锦鲤」赋能下，让它更具网红潜质和传播性。

3. 前文定出的方向发散

包括基于方向的本身的发散和业务价值的发散：切入点是不能脱离于既定方向而独立发展的，考虑这个维度能把握切入点的边界不跑偏。不能表达既定方向的切入点，就是不合适的切入点。

譬如在17年的京东双11的项目中，我们根据社会人群忙碌常说「改天」聚会；拖延症症候人群庞大常拖延「改天」做事；契合到京东双11各种玩法多样日期不可「改天」，得到的切入点是「改天就GG，京东不改天」的概念。

同样，这个概念，也必须与需求方、决策拍板人、项目执行者最终达成共识，一个无法共识的概念，就是孤掌难鸣，无法成为一个好切入点。

有了切入点，我们就有了表达的脉络，就能为内容的创作定下基调。

切入点所吻合的人群洞察，让项目避免陷入无法打动用户的自嗨；所融合的社会热点，让项目借势避免老生常谈；所恰合的方向，让创意拥有主张，而不是空洞的言之无物。

五、埋分享因子

切入点找的好，但是用不好，没有好的传播效果，其中一个很重的原因，就是没有埋入诱使用户分享的底层刺激。

比如同样切入：「人生苦短，陪伴父母的时间已经很少」。很多项目做的煽情无比，赚尽眼泪苦大仇深，仿佛把人群的洞察脱光了展现给你看，但是用户却在煽情之余感到压力山大，甚至感到情感绑架而不愿意分享。

而某些花店在设计用户为母亲节父亲节为父母买花的这种直白的活动却悄然在社交中渗透。其中的差别就是人性喜于炫耀，而恶于自苦。前者没有预设用户因为什么原因而分享，所以才不得好的效果。

以下这7个促进分享的点几乎涵盖了各种不同类型的分享传播背后所存在的底层逻辑：

• 表达想法：就是你的内容能帮助用户说出他的想法，让他觉得「你说的真对，真好」，产生这就是我想表达的内容和态度。比如 PAPI酱对社会现象的各种吐槽。
• 提供诱因：就是让你的内容能让用户在与他生活中的常见场景产生联系，从而觉得你的点说的很精准。比如互联网穿搭指南。
• 提供谈资：就是你的内容出人意料能让用户建立于他人的聊天话题，从而为了社交而分享。比如百雀羚的长图广告。
  社会比较：就是你的内容可以给用户提供攀比和炫耀的原材料，从而刺激用户做社会比较而分享。比如支付宝的年度账单。
• 利用情绪：就是你的内容能使用户达到一种激烈情绪，从而需要释放，被情绪支配则不需要任何理性地去分享。比如番茄炒蛋。
• 展示形象：就是你的内容可以让用户建立或加强他的形象，让他可以从分享中展示自己的品味和个性。比如各种测试结果页或者高格调可以获得自我满足。
• 实用价值：就是你的内容具备有用的有价值的信息，可以帮到他自己和他的朋友，让他为了在社交中提供价值而分享。比如实用贴扫盲贴攻略贴等。

总结以上基本可以分为这4个大的方面：展示表达、可以炫耀、情绪出口、实用价值。在项目中通过对这些分享因子是否可用，如何埋入的预设，可以在前期预设项目的效果。

譬如在去年京东双十一的项目中。为了表达「改天就GG，京东不改天」的概念，我们预设了熟悉的影视剧经典场景，强化了前后反差营造情绪，最后利用经典人物提供了实用的双11攻略信息，刺激用户分享。最后的效果也达到了33.13%的UV分享率（市场平均7%）。

分享因子，就是项目的血肉。分享因子就是能帮助你的故事刺激分享底层逻辑。他是用户去理解概念，进而接收传播信息的基础。没埋分享因子的创意，常常陷入不是内容干，就是广告硬的桎梏。

六、要点回顾

经过画骨建筋加血肉，定方向找切入点埋分享因子，有了这3个要素，其实不是做创意传播类项目的结束，而是开始。

同样，这个思路不是创意的内容，而是它的地基，地基不稳则建筑不固。它能帮你入手，能帮你把控要点走在正确的道路上，但不能帮你完成内容的产出。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

我们在工作单位上是跟PM（产品经理）、TD（技术开发）等同事对接，可是本质上来说，我们的最终boss是用户本身。换句话来说，我们在单位工作换取的薪资其实是用户支付的，是他们觉得我们的产品服务好才付费。

从这个角度出发，设计师的工作就不是PM给了你原型你就依样画葫芦了，因为一部分PM会把重点偏重在商业价值上，交互体验层面就没有花更多时间去思考。

那么我们作为用户与产品之间的桥梁，就该担当起“工程师”的工作，保证桥梁在用户使用时不会发生崩塌或者颠簸，也就是崩溃、闪退，甚至回过头来说这桥真TM丑等问题。

所以设计师在明确和理解好产品功能形态后，以产品思维并站在用户角度去思考才会设计出更好的视觉效果和功能体验，设计师自身的价值才能最大的呈现出来，用户也能投资更多的资源在这款产品身上，公司业绩也会蹭蹭上涨，你的身价也随之提升（嘴里笑嘻嘻）

产品思维是什么？

产品思维是你在工作中至上而下贯彻始终的宗旨。

我们在设计前，首先梳理产品原型文档里的思路，搞清楚为什么会出现这个需求，这个过程不但能够让设计师了解业务发展，也能为设计提供背景参考。

没有任何设计或者功能是能够单独脱离产品本身而存在，譬如不存在想要点外卖却没有点外卖的途径，不存在想要看时间却没有可以计算时间的方式。设计与功能都是依附于产品本身，这也是我们为什么得用产品思维去设计的原因，总不能想都不想就拿着淘宝那套UI直接搬过来放在微信上面吧。

为什么需要产品思维？

那么产品思维到底能够带给设计师怎样的提升？答案是，它能够让设计师匹配目标用户，结合场景需要，为他们定制出正确的视觉交互与功能体验。

可能有些设计师会过于执着于界面好不好看，确实视觉设计可以使产品更加美丽动人，确保其在众多竞品中脱颖而出，可是本质上它不会使产品本身更有价值，譬如为什么现在绝大多数用户用微信聊天而不用QQ？这是因为微信刚推出时比QQ更加简单，轻量，符合移动化趋势，更能针对社交痛点。人们不会因为QQ更好看甚至可以换主题而用QQ取代微信。（QQ：怪我咯？？？）

这就是为什么一个有效针对痛点的产品能够成功的原因。就算真的有同学朋友说你设计的东西不好看，你也不要沮丧，每个人看问题的角度，深度都不同。外行看设计，才会看好不好看，内行看设计，看视觉体验舒不舒适，业务功能需求有没有合理呈现，商业价值有没有实现。所以当你是以产品思维作为宗旨去设计，那么无论你怎么设计，都不会出现太大的纰漏，因为你已经用正确的方式为目标用户探索出一条能够真正解决问题的道路了。

如何培养产品思维？

可以从以下5个方面培养。1. 体验思维 - 2. 逻辑思维 - 3. 数据思维 - 4. 商业思维 - 5. 结构化思维。下面简单说明一下，后期有机会再每一点单独细讲。

1.体验思维

这是身为设计师最基础的部分，很多设计师拿到需求后就直接找素材上手做，这样的工作方式是错误的。设计师是需要做用研，构建用户模型，洞悉行为习惯，兴趣爱好的。为某个人进行设计，才能针对性地设计出好的方案。就像你给女朋友过生日，你清楚她喜欢的东西才能用最小的成本让她情绪最大化地释放，她喜欢蝙蝠侠你却送了它一个小丑手办，她能不发脾气吗….. 你还想指望她说小丑很帅吗（两个都喜欢的当我没说过...）所以当你了解了目标人群，那么为他定制产品的时候，才会事半功倍。什么？你问我怎么做？方法其实很简单，三点：a. 用户画像 - b. 使用场景 - c. 闭环设计

这里介绍一个”5W2H“法则，来帮助大家快速应到到实际场景里。

a. 用户画像

这是有效让设计师避免自我yy，以客观的态度代入目标用户的身份去了解他们人群的特性、喜好、痛点、作息、手机使用情况的方法。建立模型后，才能更有效针性地为他们定制服务，决不能因为我是一个站在潮流尖端的cool designer就把目标用户都当做是有这方面追求的人是吧（滑稽脸）

这里根据这个法则做出的一张用户画像的模型给大家参考一下

b. 使用场景

有两层意思，第1点：是用户使用产品时的真实场景，譬如大多数人会习惯夜晚看新闻、贴吧或者资讯类软件，所以才会有黑暗模式的出现。第2点：同样是评论，会出现在公共场景和个人场景，那么就必然会有样式不同的情况。但这些情况都有个共同属性，就是我在什么样的场景下去使用产品。设计师如果不能定位这种场景，就很可能被投诉用户体验差，用得懵逼自然就会卸载拜拜。

c.闭环设计

用户在使用产品时，会不会出现断层的情况，例如我在注册流程，获取验证码超时了，却没有重新获取的途径，那么这里的流失率可想而知是多么恐怖。闭环设计就是产品使用过程，或者具体到某一功能上，我都能实现下一步，我无论怎么操作，我都能在主流程上面继续畅游。

这种体验思维下的产品，能够让用户更容易理解如何操作，因为多数情况下用户不会意识到是自己犯错，都会认为是产品的锅，所以啊，不换位思考地去做设计，都是耍流氓（那个外星人榨汁机，excuse me？你是希望我通过运动才能换取果汁？？）

2.逻辑思维

这点很好理解，我们设计界面时要做到承上启下，符合用户习惯操作，让用户在产品中航行时不会触礁。例子1：放大显示的交互，返回的时候就缩小回去，而不是变成左右切换；例子2：有一个活动的文案，”免费课10选2，3天后结束”，那么用户就会疑惑，你是3天后没有这个活动呢？还是课还可以买，只是不能免费10选2呢？所以自己设计时要每个方面都要去思考，不是PM或者运营给了你文案你就复制粘贴，你作为产品与用户之间的桥梁，想要传达的思想，都要按照逻辑有序地清晰地输出给用户，这样才会显得逻辑清晰，明明白白，整整有序。

3.数据思维

解释一下，数据是产品上线后，通过对想要看数据的页面、按钮、icon等元素预先埋入统计点，观察它们数字的变化，曲线的走势，来找问题出现的原因，从而思考迭代的优化方案。常用的页面访问率、停留时长，点击率，购买转化率，加载时长等，都是作为我们迭代的数据参考，有助于产品和设计研究出更好的解决方案。

虽然数据给我们带来很多实际依据，但它不是检验真理的唯一标准，不要看见数字低就觉得这功能要砍掉、详情页要重做，不一定是设计问题导致的啊，也不一定是用户不需要这个功能啊，具体情况还是得具体分析。就譬如ios淘宝上，你刷宝贝列表，刷到第6、7屏了，你想回到顶部，线上有两种方案，第一是点击手机状态栏的位置，会自动回到第一屏，你点击右下角的“回顶部”也是回到第一屏，如果你看到右下角的点击率低下，你会砍掉这个功能吗？我想不会吧，毕竟不是每个ios用户都知道状态栏可以回顶，也不是每个用户都只划一两屏，提供给你的数字不是唯一标准，只是个指数参考，切记不要反过来被数据控制了你。

4.商业思维（运营思维）

增长需求就是一个很好的商业思维例子。我们最终还是要面对用户，然后让用户为我们创造收益，所以可能期间很多产品需求，都是为了增加公司盈利。世间万物都是一把双刃剑，有时候为了拉新，为了促销真的不一定都有良好的体验，这时候如果不能完美地解决增长的同时又能照顾好舒适体验，那么我们就得权衡利弊和权重。

可能你会觉得购买页首屏明明很舒适，可是加了个会员栏，又加了个砍价按钮，又加了广告链接，变得乱七八糟，一直钻牛角尖跟PM说你这样伤害用户体验啊，可事实上，你导致了项目延期，功能被其他竞品抢先推出，损失的可能就是一个天文数字了。如果你不去了解商业，那又怎么能让自己的设计创造出商业价值呢？

还有一点可能大家会意想不到，那就是把自己看成一件商品，我这件商品要怎么做才能体现出更高的价值，也就是我值多少钱。实际项目与自己YY的练习不一样，充满各种沟通、时间、约束条件等问题。如果我能抓住优先级，把过多的需求拆分好几期，熟悉同类竞品状况，了解其他产品优势之处，每一个步骤想得透彻，就算老板来质问，你都能迎刃而解，那么你的专业度就体现出来了，即使可能你内心觉得这并不是你想要的设计，但我相信肯定是当下需求的合适解决方案。

5.结构化思维（项目思维）

结构化思维，是需要一定经验才能培养出来的，简单的来说就是要有统筹大局的思维。不是叫你开发，运营，产品，审核，商务都去熟悉，而是说要去了解与配合。

有些设计师觉得，接到需求，按时交付就行了，对于何时上线，开发过程中遇到什么问题，是否需要设计方案得及时作出调整，实际上线后又出现什么问题…如果通通都不去了解，那这样你就真的仅仅是设计产出的工具而已，因为你没有担当起设计师该有的体面与责任。如果你想提高设计在公司中的重要性和话语权，如果你想在老板眼中占有一席之地，那你就要积极推动项目，在别人眼中大发光彩。

另外一点是设计中的技巧，当你遇到一个需求点觉得模棱两可，比较尴尬的时候，你可以用结构化思维帮助你理清思路，这是我常用的手段，举一个关于首页是否加入听课进度的例子。

答案显然而见，方法其实很简单，你把需求点以定论的方式摆在至高点，然后层层递进地列出用户会遇到的所有情况，然后在每一种情况下的最后写出到底该不该实现这个需求。结构出来后，答案也就一目了然（拿去给PM看，嘿嘿估计又得夸我是小能手~）

总结

通篇下来看，如果你还被人说你就是画个icon而已嘛，那你就把这篇文章丢过去给他看！（转发就是最好的支持...怪不好意思的嘿嘿）你会发现我们其实通过图形，色彩，排版来开发我们的思维，不断实现自我提升来为公司创造更庞大的财富。

我们是设计师不是美工，继续做着“好看”的设计已经不是当下互联网时代需要的了，正如著名设计师菲利普·史塔克说过“我们是设计师，不是艺术家”（我也说得出啊…..）

我们利用互联网为用户设计产品，本质上就是了解他们的生活、习惯，痛点和人性本身，收好自己的“固执美”并且用着产品思维去设计检验，那么最终带来商业价值的设计才是我们要做的正确设计。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

身为设计师，我们习惯性的埋头专攻自己的专业，思考着像素级的细节，拿捏着细微的交互体验，讨论着新的动效方式，却常常忽略着我们所处的大环境，产品所面临的新困境。

就像，目前流量红利逐渐消失的互联网行业，各大产品想要获取新用户的成本越来越高，而且很多产品在获取一二线城市用户时，遇到了天花板。

然而，对于商业公司来说，如果用户停止增长，就很容易面临产品一路下滑的小下坡儿。因此，各大公司也都呈现出焦虑到头秃的状态。

这就是为什么今年我们经常会看到跟「用户增长」相关的一些资讯或分享。同时，「用户下沉带来高速增长」这件事儿，也随着拼多多和趣头条等产品通过「下沉」尝到甜头后，被大家激烈讨论。

今天，我也来跟大家分享一下，自己的一些相关思考。

一、什么是用户下沉？

用户下沉指的是，企业为了给产品带来更多的新增用户、扩大自己的规模，产品功能或者运营方式从满足一二线城市用户需求，到拓展或者专注于三四线城市、乃至农村用户的需求。

用「说人话」的方式解释就是：从以前的高格调，到慢慢的接地气儿。

二、为什么需要下沉？

一直以来，互联网的主流人群都是集中在一线城市，他们最早接触互联网，有着互联网的话语权，他们精致、高知，是主流产品的目标群体，也是大多数互联网产品的第一波目标用户。

但不可否认，目前这波用户的渗透率，到达了天花板。

然而，还有另外一群人往往被互联网所忽视，他们生活在非一二线城市，受教育程度低，收入低。这个群体，还是一片蓝海，有很大的撬动（下沉）空间。

有的同学会好奇，那些非一二线城市的人，生活中需要这些互联网产品么，下沉后他们会买账么？

下面我们就从2个维度来分析，现阶段「下沉」的可行性：需求、潜力。

1. 需求

从今年年初，宣布 GMV 突破千亿的拼多多、到短短18个月内，从0成长为一家估值18亿美元的趣头条，再到注册用户7亿，闷声发大财的快手，就可以明显的反映出，非一二线城市人群，对互联网产品所呈现出的强烈需求。

难道用户的需求是随着这些互联网产品才开始有的么？

并不是。比如：在没有拼多多之前，城镇的人们就有购买低价商品的需求，他们会一般通过集市购买、2元超市等等的渠道。

而在拼多多上，很容易看到3元的抹胸、8块的加绒打底裤、49元的冬季羽绒服……

可能你会认为，这种价格的我才不会买，质量肯定不好。

但是，我们不得不承认，不同层次的人有不一样的需求，并不是大家在谈论消费升级了，便宜商品就没人要了。

同时，对他们来说能通过互联网获得更多品类的选择，通过更低价格买到跟之前使用的产品质量基本相同，甚至稍稍优于以前的产品，本来就是一种消费升级。

再比如：没有糖豆广场舞APP 以前，大家只能跟着领舞大姐学，现在有了这个 APP，大妈们可以自己在家好好练，不蒸馒头争口气，努力成为广场上的C位女王，人群中独领风骚。

年轻时可以学习不好，工作时可以不如别人，成为大妈后在舞场上还不勇得第一，就得好好反思反思了。

总的来说，非一二线城市用户对互联网产品有较大的需求量，所谓的「下沉」并不是创造出新的需求形式，而是对既有需求在既有方式上某种程度的替代，或提供更优解决方案。

2. 潜力

除了满足需求以外，企业还需要关注下沉市场未来的前景如何，潜力怎么样，这个盘子能不能越做越大。

通过分析发现，目前「下沉用户」正处在中国整体经济增长、城市化以及消费升级的大进程中，未来会成为这个国家最为庞大的基石人群，也就是说，现在的「下沉用户」会成为未来「中坚用户」。

今天美国的农业人口只占整体人口的2%，日本农业人口也只有9.7%，中国很显然在短期内还很难达到这样的水平，但历史的趋势和方向不会变化。

因此，可以看出，不管是从需求方面，还是未来的潜力方面，互联网产品中「用户下沉」这件事儿上，在现阶段都是一个可行的方案。

三、如何下沉？

当我们确定了自己产品有下沉的需求和潜力时，接下来就要开干了。那么「下沉」时哪些事情，需要针对三四五线城市进行差异化处理呢？

我觉得可以分为3个维度：运营层面、产品层面、设计层面。

1. 运营层面

运营的目的，一般是为了给产品拉新和促活。那么想要扎了四五六线城市的父老乡亲们的心，我们的运营活动需要注意：要有利可图、要通俗易懂。

要有利可图

下沉用户有个明显特征就是时间充足、价格敏感。如果有一些小便宜可以占，哪怕多浪费一些时间，他们还是愿意接受的。因此针对「下沉用户」的运营活动，要格外放大利益点。

比如：受五六线用户喜爱的拼多多，打开APP，满屏的「1元秒杀」，「6.6元秒杀」，「只抢1天」，「新人1元购」……这种紧迫的氛围，让人感觉不买就亏了。

映射到线下场景，就是「最后1天大甩卖」的商店，每天都是「最后一天」，一甩就是十年（微笑脸）。

再比如：趣头条，当你刚打开 APP 时，直接弹出一个红包（很懂用户占便宜的小心思）。不像有些产品的活动写的是「优惠券」或「代金券」，写多少元这种很人民币的感觉对他们来说，才是最大的诱惑。

有同学会说，上来就给18块钱，公司不亏死嘛！所以亲爱的朋友们，你们睁大眼睛看一下「18元」右面的小字「最多」，套路深啊。

然后，通过用红包的方式，吸引用户提现，但是这个时候会弹出来手机号登录页面。（用红包吊着用户去登录。）

对于一二线用户，或许对这种运营方式比较反感，感觉在耍人，浪费时间，觉得这就是套路我嘛。

但是针对五六线的用户，他们对互联网的东西存在距离感，敬畏心，会下意识的认为存在即合理。同时他们很闲，感觉点一点也并没有什么，而且占了些小便宜。这就是他们跟一二线城市用户差异的地方。

同时，趣头条通过邀好友、收徒弟、徒收徒的裂变方式获得金币/现金的运营手段，不断的吸引用户的好奇心和金钱的诱惑，以及阅读就能赚钱的卖点，给产品带来了迅猛的新增。

总的来说，下沉用户，对有利可图的运营活动，是愿意花大量的时间成本，从而间接的为产品做贡献的。

要通俗易懂

不像一二线城市用户，觉得产品的运营文案写的高级、有格调、很杜蕾斯、挺网易云音乐的，觉得符合自己独特的气质，恨不得立马翻它的牌子。

三四五六线城市的用户，受教育程度有限，对一件事情的分析耐心有限，文案上要尽可能通俗易懂、直白，才能使他们短时间get到你的点。

比如：趣头条，被邀请的朋友看到的页面。

没有拐弯抹角的诗和远方，直接就是「教你轻松赚现金」，而且底下有一排小字「不会的可以来问我，大家一起赚」。

多么直接、易懂、质朴的语言，但这些就够了，因为只有让对方明白了这是干嘛的，且有吸引力，参与度（转化率）才比较高。

再比如，针对下沉城镇的一些线下刷墙的运营宣传。

知道用户关注什么、在意什么，并以合理的表达出来，让他们看懂才是最重要的，整些虚的都没用。

以上可以看出，针对非一二线城市用户的运营，要放大占小便宜的利益点，同时还要更通俗易懂，才能让用户更快理解、吸引从而参与。

2. 产品层面

如果把运营活动，理解为塞门缝里的「包小姐」小卡片（运营banner），进行拉新（拉客），那么产品层面就是要看「包小姐本人」的服务了，影响着用户的体验，关乎着用户的留存。

那么，针对三四五六线城市的用户，产品层面应该做到哪些呢？我觉得最重要的一点就是：简单易用，避免懵逼。

比如：前段时间在朋友圈刷屏的「她face+」，只有简单的几个功能，而且很土嗨，就能在小程序排行榜上名列前茅。

打开应用你只需要做两个选择：要么拍照，要么从相册中选择照片。

我抱着试一试的心态，去体验了一波产品，然后我被变成这样了。

嗯，看到这样的自己，说实话还是有点小兴奋的。然后，我膨胀了，我开始想探索更多可能性了……

这个时候，我只需要点右下角的「我变」，就可以换不同的风格。

可以看出，这款产品戳中用户痛点的同时，将功能操作做的如此简单易用，因此，在「下沉市场」中非常火爆（当然运营做的也不错）。

再比如：悟空问答，可以称它为「下沉」版的知乎，这款产品是今日头条做的针对四五六线用户的问答社区。

从产品的功能层面来看，针对下沉用户的「悟空问答」，明显的更加简单易操作，没有像知乎一样的「想法」，「大学」等功能，上来看到的就是「推荐」的 feed。

同时在产品内容层面，也针对下沉用户做了跟知乎差异化推荐。

因为针对四五六线用户，「有用」只是他网络生活中一部分，更大的部分是「有趣」，也就是「杀时间」的产品。因此，产品推荐的问题大多是「你见过最美的女人是什么样？」，「如何不被传销组织骗？」之类更符合他们认知层面的内容。

不过，知乎目前也从早起努力经营，且引以为傲的精英氛围，明显意识到这一策略在用户增长方面的短板，所以能从近期产品推荐给用户的更接地气的内容来看，他们也在做「用户下沉」的事情。

以上可以看出，针对非一二线用户产品方面，功能要尽可能的简单易用，避免懵逼；内容层面，也要更符合下沉用户的认知，更有趣，帮助他们消磨时间。

3. 设计层面

在这个时候，设计师们会说，难道我们的设计也要做成土嗨+乡村迪斯科风，来迎合五六线城市用户的审美嘛？

不可否认，下沉用户的审美还停留在，「多就是好，颜色丰富就是好」的阶段。因此，他们往往会被「拼多多」所代表的那种复杂，信息高度密集的设计风格所吸引。

你可能会说：这不符合设计师们所推崇的「极简，留白」的高格调设计追求。但是，这正是身为设计师的我们，需要平衡的客观存在的问题。

比如：下面的案例，就可以看出信息密集，颜色丰富，但是，也可以做出高品质的设计。

再比如：抖音目前已经下沉到农村用户，但是 UI设计上也不是非要土嗨风，依然不输给一二线主流产品，然而五六线用户也没有因此而无法接受。

所以，我们不能因为个别针对五六线产品的设计做的 LOW，而故意做出葬爱家族般的设计。

我们应该平衡他们审美的同时，兼顾着设计美学，从而肩负着提升国民审美水平的使命。

因为，人人都有享受高品质设计的权利，这需要一代又一代设计师去努力的。这一点，我们需要像日本设计学习。

总结

总的来说，生活在一二线城市、过着快节奏的生活、用着新颖的产品、从事着互联网的我们，时常觉得自己的感受就能代表所有人，感觉我们都将进入并将长期处于人工智能时代了，怎么还有人不懂互联网呢。这就如黄峥（拼多多创始人）所说「五环内的人」无法理解「五环外」的世界。

通过最近思考发现，不管从「用户需求」还是「增长潜力」方面，「用户下沉」都是互联网产品可行的事儿，但是，我们需要针对「下沉用户」在运营、产品、设计层面做差异化处理，使它更容易被非一二线用户接受并使用。

同时，深处互联网行业的我们，应该在低头琢磨小功能的时候，抬头看一下大环境，多研究下用户真实处境及场景，避免沉浸在自嗨的方案中。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

iPhone的历史

每次苹果发布会UI设计师可能是最睡不着觉的人啦。每次发布会苹果推出全新iPhone时，我们在iPhone平台上的APP应用程序必须跟随iPhone的尺寸、规范等特性调整设计稿。也就是说，几乎每次苹果发布会都是UI设计师加班的通知书！这不，2018年9月13日凌晨，苹果在Apple Park总部里的乔布斯剧院举行了2018苹果秋季新品发布会。这次苹果发布了全新的iPhone Xs、iPhone Xs Max，iPhone Xr三款手机。噢，不要忘记我们也不能怠慢还在服役的iPhone X、iPhone Plus、iPhone6/7/8、iPhone SE等苹果手机。作为一个移动端UI设计师，您必须对苹果所有生产过和现役的iPhone有所了解。

起源

谈到iPhone我们必须谈谈史蒂夫·乔布斯（Steve Jobs）。尽管乔布斯去世多年，但是他的理念仍然是现代智能手机设计的原则。乔布斯不仅重新定义了智能手机，也定义了移动端应用程序。这位被领养的犹太男孩在很早就对个人电脑产生了兴趣。在游历了印度和日本之后，他进入了大学校园。在校园里除了无线电和嬉皮士文化，他认为大学课程多半是无聊的。但他曾跑去特意选修了一门课程：字体设计。他所在大学的字体设计课是全美最著名的，在那个课堂上乔布斯学习到了网格设计、衬线体与无衬线体、字体的气质等设计知识。当然在前面讲过的具有摇滚精神的字体Helvetica也深深吸引了乔布斯。后来乔布斯选择大学肄业并在自家车库创立了苹果公司，自此“车库”也成了创业者最喜爱的地标。苹果公司的第一代个人电脑内置了非常出色的用户图形界面系统（即GUI），并且内置了Helvetica等漂亮的字体。但是这并不是乔布斯事业的终点，在经历了苹果公司的权利斗争后，成熟的乔布斯再次登上发布会的舞台，推出了真正能改变世界的产品 - iPhone。一般产品名都会用名字加上产品的类型命名，比如百事可乐、英雄钢笔等。而iPhone似乎本身就是一个类别。在那次发布会上，乔布斯指责当时的功能手机太“愚蠢”：当时的功能手机性能很差，并且屏幕很小，实体键盘占用了很大的空间。之后，他拿出了一部像外星科技的产品：iPhone。自此，苹果重新发明了手机。乔布斯如此强调用户界面和交互设计的重要性，这种理念改变了当时和现在的设计思维。乔布斯身后，移动端的格局在改变，接任乔布斯指挥棒的蒂姆·库克和首席设计官乔纳森·伊夫（Sir Jonathan Paul Ive）也陆续更新着苹果手机的产品线，延续着这些伟大的产品。

年轻的乔布斯

初代iPhone

相关产品：iPhone（一代）、iPhone3G（二代）、iPhone3GS（三代）。

iPhone初代产品在2007年1月9日由史蒂夫·乔布斯在苹果发布会上正式发布。初代的iPhone产品的共同特点是：玻璃屏、屏幕清晰度普通、3.5英寸屏（注意：我们所说的手机尺寸都是测量屏幕的对角线得出的）。iPhone没有实体键而整体是屏幕的设计，在当时仿佛是外星科技降临一般令人惊艳。为了让大众习惯直接在手机上点图标（在此之前人机互动都是间接输入的：比如实体键盘、鼠标、触控笔等），乔布斯发布了革命性的操作系统iOS，手机的所有图标都是圆角：这样可以避免用户认为会刺到手指。所有图标和界面全部是拟物设计，这样可以更好地让用户理解哪些是可以点击操作的。按钮在手机上呈现的大小都是7mm左右，这是因为人类手指点击区域大概是7mm - 9mm。系统充分地应用了多点触控的功能，你不仅仅可以点手机里的按钮，还可以进行长按、滑动、捏等手势操作。这些用户体验和人性化的设计在当时具有划时代的意义。随后，第二代产品iPhone 3G、第三代产品iPhone3GS先后由乔布斯发布。这种能听歌、能打电话、能上网的手机真是太炸了！而且你可以在应用商店Appstore中下载第三方的应用程序，海量的第三方程序可谓是大千世界了。这块3.5英寸屏的手机截图出来后的实际分辨率是480x320px，所以如果你在当时做UI设计的话，那么做APP界面建图的尺寸就应该是480x320px。

 苹果初代产品 (2007)

iPhone 4

相关产品：iPhone 4（四代）、iPhone 4s（五代）。

iPhone 4于2010年6月8日发布。iPhone 4延续了iPhone一代的多点触摸（Multi-touch）屏界面，并首次加入视网膜屏幕、前置摄像头、陀螺仪、后置闪光灯，相机像素提高至500万。对我们设计师最重要的就是加上了视网膜屏Retina。Retina是苹果提出的标准，它的含义就是在应用场景的视距内让人无法看清单个像素。我们都知道如果你贴的够近，一般的屏幕上都会出现一格一格的像素矩阵。屏幕是由这些矩阵组成的。这种屏幕的问题就是稍微近一些我们就能看到那些网格和矩阵。如果我们希望用户得到最好的体验，自然是让用户看不到格子，那怎么办？答案就是：加大屏幕的密度。如果屏幕的密度到达一个指定的水平（当然也要取决于用户的视距，即用户与屏幕通常离多远），那么用户的眼睛就无法分辨出细小的像素颗粒了。这种屏幕就被称为Retina屏，也叫视网膜屏。这是用户体验的巨大进步，但是也是UI设计师的噩梦。原先的设计稿统统需要放大才可以在iPhone4里显示得完美：比如原来我们一个界面的尺寸是480x320px，现在因为屏幕密度增加了一倍，我们就需要设计640x960px才够用。在电脑上看这个尺寸要比手机大两倍！（当然啦，那时的电脑屏幕通常不是Retina屏）。而且3GS并没有完全被淘汰，那么如何让一个APP适配两个不同尺寸的手机呢？于是每个APP内预装了两套切图，一套480x320px尺寸，也就是一倍图（@1x）；一套960x640px尺寸，也就是二倍图（@2x）。这两套图像资源的命名完全一样，只是二倍图结尾需要加上@2x标记它是高清尺寸，比如home_icon@2x.png。

 iPhone 4代产品 （2010）

逻辑像素和物理像素

逻辑像素（logic point）：逻辑像素的单位是PT，它是按照内容的尺寸计算的单位。比如iPhone 4的逻辑像素是480x320pt。但是由于每个逻辑的点因为视网膜屏密度增加了一倍，即1pt=2px，那么其实iPhone 4的物理像素是960x640px。iOS开发工程师和使用Sketch和AdobeXD软件设计界面的设计师使用的单位都是PT。

物理像素的单位就是我们常说的pixel，简写成PX。它是我们在Photoshop和切图中使用的单位，屏幕设计中最小的单位就是1px不可再分割。使用Photoshop设计移动端界面和网站的设计师使用的单位是PX。在以下的文章中，如果您使用Photoshop设计界面，那么只需要记住所有px单位的数值和支持Photoshop的工具，如果使用Sketch或Adobe XD设计界面，那么只需要记住所有pt单位的数值和对应的工具即可。

逻辑像素和实际像素计算方式不同

PPI

PPI(pixels per inch)指的是屏幕分辨率的单位，表示的是每英寸显示的像素密度。屏幕的PPI值越高，那么这个屏幕每英寸能容纳的像素颗粒也就越多，那这个产品的画面的细节度也就越丰富。PPI值大于300一般我们就无法用肉眼察觉出屏幕上的“马赛克”格子了。但是如果屏幕很大，那么需要呈现视网膜屏的PPI值也需要更大，所以iPhone Plus系列的PPI值比iPhone6/7/8要大。PPI在我们设计的工作中其实关系不大，但理解它对于帮助我们理解为什么iPhone4比iPhone3GS实际像素大一倍有帮助。

PPI的计算公式

iPhone 5

相关产品：iPhone 5（六代）、iPhone 5s和iPhone 5c（七代）

iPhone 5于2012年9月13日正式发布。iPhone5在设计上带来了很多争议，因为iPhone5没有采用乔布斯认为人类最合适的手机尺寸3.5英寸屏，而是用了4英寸的屏幕。宽度没变而高度加长了。这样做的原因是市场上越大的手机越受欢迎。当时设计师也几近崩溃，因为又要搞适配了。原来960x640px的尺寸变为了1136x640px，但是这个变化其实不大，就是高了点儿。于是@2x高清图的设计稿就变成了640x1136px。因为iPhone4的手机看着也就是长了点儿，滑动不就完了嘛。除了闪屏这样的界面需要单独做iPhone4、iPhone5、3GS尺寸之外，其他界面仍然维持两套设计稿即可。

iPhone 5 （2012）

iPhone 6/7/8 和iPhone Plus

相关产品：iPhone6和iPhone6 Plus（八代）、iPhone 6s和iPhone 6s Plus（九代）、iPhone7和iPhone7 Plus（十代）、iPhone8和iPhone8 Plus（十一代）。

这个产品迭代周期值得大家留意，从iPhone6到iPhone8这段时间苹果新手机的物理像素都是750x1334px。而所有Plus手机的物理像素都是1242x2208px。如果按照逻辑像素来计算，那么iPhone6/7/8的逻辑像素就是375 x 667 pt（就是750x1334除以2）；而iPhone Plus的逻辑像素就是414 x 736 pt（就是1242x2208除以3，因为这个屏幕太大了视距不同所以屏幕密度更高）。历史到这个时候，原来的手机全部被淘汰了。也就是说iPhone6/7/8成为了我们的设计标准，它的切图就是@2x，iPhone Plus（1242x2208）使用@3x。从此没有@1x倍图了，只存在一个假想的概念。

iPhone 6/7/8  (自2014)

iPhone Plus (自2014)

iPhone X

相关产品：iPhone X（十一代）。

这四款手机全部是苹果的全面屏手机。全面屏并不是新概念了，因为从iPhone初代产品开始，手机业内就在构思如何把手机做成全部都是屏幕区域的技术了。但是这个技术有很多难题，比如前置摄像头和听筒怎么处理。那么苹果采用的方案是“齐刘海”，把四周处理成圆角的方式。IPhone X和后续三款全面屏我们设计师需要注意的就是齐刘海。因为需要规避摄像头和麦克风听筒，所以导航栏比其他iPhone系列产品要高；而底部Tab栏因为最下方有圆角同样比其他iPhone系列要高。而且这两个边界是不应该放置任何操作功能的。也就是说只有看的份儿。

iPhone X的物理像素是1125 x 2436 px，而逻辑像素是375 x 812 pt。也就是说如果你使用Sketch或者Adobe XD等工具设计界面的话，iPhone X的宽度和iPhone 6/7/8是相同的；只是高了一些。那么如果需要出一套iPhone X效果图只需要把头和尾巴替换成新版即可。而如果你用Photoshop设计界面的话，宽度变化还是比较大的。需要做放大处理然后单独调整那些乱了的尺寸。

iPhone X(2017)

iPhone XS Max

相关产品：iPhone XS、iPhone XS Max、iPhone XR（十二代）。

这三款产品的像素分辨率听上去会比较眼晕：

iPhone XS Max：1242 x 2688 px

iPhone XS：1125 x 2436 px

iPhone XR：828 x 1792 px

但是如果我们用点的单位看就会得到：

iPhone XS Max：414 x 896 pt （iPhone Plus分辨率宽度）

iPhone XS：375x812 pt （iPhone 6/7/8分辨率宽度）

iPhone XR：414 x 896 pt （iPhone Plus分辨率宽度）

所以其实今年发布的iPhone都是比较友好的，如果使用矢量界面工具那么只需要调整设计稿头和尾巴即可，如果使用Photoshop的设计师需要放大缩小设计稿然后调整头和尾巴可以得到新版设计稿。而切图其实和之前没有变化，不管用什么工具设计还是得出两套切图：@2x（750x1334px）、@3x（1242x2208px）即可。

iPhone XS Max (2018)

以iPhone6/7/8为基准设计

在开始比赛之前，由于iPhone 6、iPhone 6S、iPhone7、iPhone7S、iPhone8屏幕和分辨率都是一致的750X1334px，所以我们可以称它们为iPhone6/7/8。而iPhone 6 Plus、iPhone7 Plus、iPhone8 Plus、屏幕和分辨率都是一致的1242x2208，所以我们可以称它们为iPhone Plus。而iPhone XS、iPhone X屏幕和分辨率都是一致的1125x2436，所以我们可以称它们为iPhoneX。那这场比赛的赢家毫无疑问是价格美丽的iPhone6/7/8获胜啦。那么我们做界面设计时需要按照iPhone6/7/8为基准设计。如果使用Photoshop就建750x1334px尺寸的画布，如果是使用Sketch或Adobe XD等工具就建立375x667pt。当然如果要设计首页之类的界面，它的界面很长你可以设计一个长的设计稿，比如750x8000px。

手机型号与像素对应图

HIG设计指南

上文说我们建立界面可以根据750x1334px或375x667pt来建立画布，但是具体状态栏的高度、导航栏的高度、tab栏的高度是多少？那些UIKit组件里的东西去哪里找呢？苹果已经为我们准备好了多个格式的规范了：

资源下载地址：https://developer.apple.com/design/resources/

设计方式

在iPhone6/7/8存量仍然很大的情况下，我们做设计稿仍然需要以iPhone6/7/8为尺寸来建图。从苹果官网下载好UIKit，上面有我们需要的一切元素。这些元素有PSD、Sketch以及XD版本，不管用什么设计软件均可找到对应版本。打开之后你会发现苹果已经将我们所需要的规范元素准备好了。如果你需要一些弹窗或者控件，那么就在UI Elements里找。如果需要界面的尺寸模板，就在Design Templates找。所有文件都有两份，结尾带有-iPhoneX的是为iPhone X系列设计的模板。没有标识的是为iPhone6/7/8设计的模板。

UI Elements 文件夹中的源文件

 Design Templates中的源文件

状态栏和导航栏

状态栏（Status Bars）就是iPhone最上方用来显示时间、运营商信息、电池电量的那个很窄的区域。导航栏（Navigation Bars）就是状态栏之下的区域，一般来说导航栏中间是页面标题，左右是放置功能图标的区域。

在iPhone6/7/8设计中，状态栏的高度为20pt（40px）。导航栏的高度是44pt（88px）。这两个区域在iOS7代之后就进行了一体化设计。所以它们加起来的高度是64pt（128px）。

在iPhoneX设计中，状态栏的高度为40pt（132px）。导航栏的高度也是44pt（132px）。这两个区域同样要进行一体化设计。所以它们加起来的高度是84pt（264px）。这里注意一下，因为iPhone X的PPI值为458，所以并不是如iPhone6/7/8一样1pt=2px换算。

iPhone6/7/8和iPhone X导航区域的差别

 部分优秀APP的导航区域设计

大标题导航栏

在的苹果设计中导航出现了一种新形式：大标题。出现这种形式就是为了减少视觉噪音，让内容更加突出。很明显大标题的设计很像报纸的版式设计，在第一眼我们就会明白页面的主题。大标题导航栏的高度一般为116pt（232px）：这包括了20pt（40px）状态栏的高度，同时也能放得下34pt（68px）的大标题和辅助信息（如返回等图标）。但是注意一下，大标题并不应该像传统导航一样常驻在页面之上，因为它太占空间了。所以在滑动页面时大标题会变成正常导航栏的64pt（128px）的高度。当然如果设计稿为iPhone X那么数值需要另外换算。

大标题的尺寸

导航栏图标

图标作为文字的补充，在移动端中应用非常广泛。在导航栏区域上的功能诸如搜索、添加、更多、返回等均需要用图标来表达。说明：@2x和@3x在逻辑像素单位是一样的，如果您使用如Sketch、Adobe XD等矢量工具设计，可以参照逻辑像素数值设计即可。但是如果您用Photoshop工具以iPhone6/7/8尺寸进行设计，就需按照@2x下的px单位数值设计。

导航栏图标尺寸规范

标签栏 （Tab Bars）

Tab就是点击的意思，Tab栏（也叫标签栏）指的是APP底部的区域，如微信底部常驻有聊天、通讯录、发现、我的四个图标。iOS规范中Tab栏一般有五个、四个、三个图标的形式。也就是把宽度平分为五、四、三份。iPhone6/7/8设计中，标签栏的高度为49pt（98px）。Tab栏的操作是最常用的，因为手指最方便点击而且这个栏是常驻在页面之上的。所以Tab栏的图标至关重要，因为很多用户可能因为看不懂图标而找不到重要功能的入口，通常我们会在Tab栏图标之下加上11pt（22px）的注释文字，这个注释文字一般来说都是非常浅的浅灰色。

标签栏的尺寸

标签栏图标

我们在标签栏上的图标一般来说30pt（60px）大小左右，苹果给出了四种不同形状标签栏图标的尺寸参考供大家设计时考虑。其意义是让不同外形的图标看上去是差不多大的，保证图标的平衡。标签栏图标的选中态应该是一个彩色，来区别于非选中状态。

真实设计中的标签栏

标签栏图标设计规范

标签栏图标应该尽量使用清晰地填充风格

工具栏 （ToolBars）

我们在苹果自带浏览器底部就能看到工具栏。工具栏提供了和当前任务相关的操作和按钮，在滑动时可以收起。工具栏同Tab栏一样都是位于底部，但是高度略窄，它的高度是44pt（88px）。

闪屏资源

由于闪屏是一张完整的静态满屏图片，而不是诸如其他页面一样是由切图和文本拼成的，所以闪屏的适配更简单粗暴：我们需要提供不同尺寸的闪屏效果。闪屏资源就是满尺寸的一张png，上端不需要状态栏里的信息，程序会在开发完毕时自动在闪屏中补上状态栏里的信息。我们需要提供的闪屏尺寸有：

我们需要提供的闪屏尺寸 一共6张

安全距离

作为iPhone全面屏系列手机，齐刘海无疑是一个特征。但是全面屏给我们带来了使用上的问题：上下左右是圆角、顶部齐刘海使屏幕凹下一块。所以在带有圆角和齐刘海的红色标注区域不应该放置任何功能，仅可在上端放置状态栏，底部圆角区域留白。我们界面竖屏使用时左右临近手机边缘的区域不建议放任何操作，应留出一定的边距（Margin）。这个边距是多少呢？没有明确严格的规定，但是一般的APP会留出16pt-24pt不等的边距防止用户在屏幕边缘不好点击。不过内容展现却可以呈现在边距里。如果我们横屏使用手机时，左右同样不好点对吧？横屏同时还有令人闹心的“齐刘海”，所以同样左右需留出一定的边距来。所以我们就得到一个安全距离的矩形，内容可以完整地呈现在这个安全距离内。

iPhone X系列由于全面屏上下出现不可操作区域

色彩

其实在iPhone上显示的色域要比我们作图时的RGB色域要广。所以在iPhone上设计怎样的颜色都可以。只要符合产品气质并且在色彩心理学理论上思考，用什么颜色是设计师的自由。官方建议的系统色彩如下：

iPhone的系统色

字体

iOS中英文使用的是San Francisco (SF)字体。（下载地址：https://developer.apple.com/fonts

），中文使用的是苹方黑体。安装好以后你会发现中文苹方的字族有不少可供选择的粗细，那么我们设计界面时需要根据信息的逻辑权重分配粗细：标题应该较粗，而说明字体应该较细并且可以设计成灰色。其实字体的设计最重要的考量就是信息层级。苹果认为APP的字体信息层级有：大标题（Large Title）、标题一（Title 1）、标题二（Title 2）、标题三（Title 3）、头条（Headline）、正文（Body）、标注（Callout）、副标题（Subhead）、注解（Footnote）、注释一（Caption 1）、注释二（Caption 2）这几种。

HIG对APP的字体建议（基于@2x）

注意一下，以上HIG的建议全部是针对英文SF字体而言的，中文字体需要我们灵活运用，以最终呈现效果为基准调整。在设计具体界面时我们一定要以用户的使用情景来考虑，把设计稿导入手机去思考行高与字体大小是否是可读的。10pt（20px）是手机上显示的最小字体，最大的应该是目前的大标题字体了，达到了34pt（68px）。

启动图标

在设计模板还没有如今这么发达时，设计师需要设计启动图标（1024x1024px）之后按照程序员的要求切出几十个不同尺寸的图标。比如，在手机中@3x情况下桌面图标尺寸为180x180px，在@2x情况下为120x120px；在应用商店图标需要使用的尺寸是1024x1024px；这个工作太烦人了，好在现在我们只需要专注在启动图标设计本身上了。在苹果给我们的这套资源中，有Template-AppIcons-iOS这个文件。打开这个文件，用我们自己设计的启动图标替换掉智能对象里的内容，你会发现所有尺寸的图标都变成了我们的图标。然后我们把背景隐藏，切出这些图标即可。图标设计建议使用AI等矢量软件，然后使用规范切出图像资源。

Template-AppIcons-iOS

控件

控件包括：输入框、按钮、滑杆、页卡、开关等，在设计模板中已经全部列出。这里格外说明一下，为了让设计更符合整体产品品牌调性，这些控件都可以做成自定义的设计样式。但是会增加工作量和切图资源，所以一般我们在诸如设置界面这些无需太体现设计感的页面中都使用系统默认控件，而在一些品牌感需要强调的页面或产品（诸如白噪音产品、游戏等）则会使用自定义的样式。如果我们想自己设计控件，那么注意两件事：第一，点击区域基本符合44pt（88px）原则，也就是在手机上大小大概是7mm-9mm，适合手指点击。第二，要设计操作的不同状态，不要只设计一种状态。

默认控件

自定控件和默认控件

控件中无处不在的44pt（88px）

之前我们介绍过，人手指点击区域为7mm - 9mm，在@2x中就是44pt（88px）。苹果的导航条、列表、工具栏都充满了44pt（88px）这个神秘数字。我们在设计时一定也要考虑到手指的点击区域。

无处不见的44pt（88px）

键盘

在设计模板中您也可以找到键盘的设计。这里需要提醒的是，很多朋友做界面设计时不考虑输入时键盘会遮挡到的空间，如果考虑到键盘弹起遮挡住的内容，那么我们的一些界面中的输入框和信息可能都需要上移了。当然也不是说可能被键盘遮挡的地方不可以防止任何内容，也有一种方式就是当输入一个表单时，页面会垂直定位到当前输入的位置。

键盘高度

iTunes 上传截图

在程序上传APPSTORE时我们需要提供多张APP截图，供用户了解APP的功能。很多设计师朋友不太清楚这个尺寸，这里我们需要提供1242 x 2688px和1125 x 2436px两套截图。有时我们也会在这个尺寸上做一些设计，让用户在APPSTORE打开APP介绍时获得最好的体验。

ITunes上传用截图

工作流程

前期调研阶段

在我们设计界面之前，我们必须做用户研究来了解产品的调性，比如用户研究手段中的用户画像、用户调研、用户使用场景分析、设计竞品分析等方法。不管工作再忙也建议大家做这些工作，他们对我们深入了解产品大有裨益。

原型图阶段

APP产品设计首先需要构建出原型图，之后再开始视觉设计。这个工作有些公司是由产品经理负责的，也有交互设计师负责的，还有的公司因为人手较少，也会出现由UI设计师来负责的情况。就算有产品经理或其他职能人员来完成原型图，那设计师也需要和产品经理等人员沟通需求和探讨原型图，并不是产品经理向设计师下发需求。设计师要站在视觉和交互的角度提出自己建设性的意见，而不是简单等原型图完成后照着上色而已。关于原型图的工具，我们不仅仅可以用Axure RP设计原型图，也可以使用像墨刀、Adobe XD等新工具来完成原型图。

构建APP原型图（工具：Adobe XD ）

视觉稿阶段

视觉稿阶段要根据原型图确定的内容和大体版式完成APP的界面设计。但是这里请大家注意一下：目前业界主要是以Sketch、Adobe XD、Photoshop这三个软件来完成APP的界面设计的。Sketch和Adobe XD都是以逻辑像素的单位（PT）来设计，然后导出图像的时候再进行放大两倍三倍来切图。这样做的好处是不用在设计的时候小心翼翼地使用偶数了。而Photoshop由于主要是处理图像而非矢量图形的软件，所以在设计移动端界面时如果做成一倍的话切图会变得很虚，所以要基于2倍图来进行界面设计。比如如果我们以iPhone6/7/8的界面来进行设计，那么在Sketch和Adobe XD中我们建立的画布就是375x667pt在Photoshop中则是750x1334px。

视觉稿设计阶段（工具：Adobe XD）

视觉稿设计阶段（工具：Adobe Photoshop）

iPhone6/7/8尺寸

在iPhone6/7/8尺寸下，状态栏高度20pt(40px)、导航栏44pt(88px)、Tab栏49pt(98px)、导航标题字号建议17pt(34px)、导航栏图标建议22pt(44px)、Tab栏图标建议30pt(60px)、Tab栏图标注释文字11pt(22px)、左右安全距离建议12pt(24px)。字号从10pt（20px）到34pt（68px）均可，要视具体情况决定。

在iPhone6/7/8尺寸下的设计尺寸

实时预览你的设计稿

我们在Sketch、Adobe XD、Photoshop等软件中设计界面时有一个问题：电脑上的效果总和手机上呈现的效果不同。这是由于尺寸和观察方式决定的，所以最好的方式是我们实时地查看设计稿在手机上的呈现效果。以下APP通过数据线或wifi链接电脑后，即可及时在手机中看到还没有保存的设计稿呈现在手机中的样子。

Design Mirror：可实时预览Photoshop、XD等设计稿

Adobe XD：可实时预览你的XD画板

 Sketch Mirror：可实时预览你的Sketch画板

iPhoneX设计效果图

虽然程序员对于iPhoneX等全面屏手机的适配只需要设计师提供切图即可，但很多设计师比较青睐iPhone X和XR和XSM等的设计效果，也比较愿意把设计稿改成iPhoneX的设计图放到作品集或者在汇报时展示。那么我们应该怎么做呢？如果设计稿需要调整为iPhone X的显示效果，可以下载iOS 12设计源文件，把界面头和尾替换成iPhoneX专用头尾——专用头尾在刘海和圆角处做了留白。Sketch和XD都是用一倍图设计所以不涉及修改尺寸，改头尾即可。而PS比较复杂一点：需要先等比例变大整个设计稿，再把宽度改为1125宽度自适应即可。PS变大会虚还得一个一个调一下，然后再改头尾。

替换导航区域和Tab栏区域，即可得到iPhoneX设计效果

视觉规范

如果我们设计完了五六个主要界面，那么现在做什么呢？APP设计一套视觉规范是非常有必要的，有了视觉规范我们就可以把控整体的设计和语言。一般来说，一套APP应该有3-5种主题色和辅助色；5-10种不同变化的字体样式。这些如果没有落实到一套规范中，那么很容易跑偏。一套移动端应用的视觉规范应该包括:

主色/辅色/色彩规范: 规定APP所能使用的色彩种类；

文字颜色/大小规范: 规定APP主要使用文字的大小、颜色、应用场景等；

ICON规范: 规定APP的icon设计规范;

应用图标规范: 规定APP的应用图标使用规范；

按钮和交互态规范: 规定APP内所有按钮和交互态的样式；

间距规范: 规定APP内所有间距的尺寸。

设计规范的重要性

设计规范中的色彩规范

设计规范的类型可以是png或者多个页面组成的pdf文件。其他设计师打开我们制定的设计规范，可以清晰地找到当前项目适合使用的元素和字体大小、间距等。这样尽管是多人协同工作也可以保证项目设计风格的一致性。

切图

有了大小各异的iPhone尺寸，如果程序只有一套切图，那么一定会造成有的手机显示很差。所以我们要在程序里放置多套切图，然后让程序判断“主人”的手机是什么型号，显示不同的切图。这样才能够完美地呈现给用户最好的体验。切图的方法有很多种。Sketch和Adobe XD可以直接导出。Phtoshop不具备这个功能，但是我们可以使用cutterman、蓝湖等插件导出切图。不管是自带功能还是插件，导出切图都可以导出@2x和@3x图，而设计稿只需要iPhone6/7/8一套即可。

某项目中的切图文件

Adobe XD切图功能

在Adobe XD中将需要切出的元素在图层面板（Ctrl + Y）点击添加批量导出标记记录；然后点击 菜单 > 导出 > 所选画板 > 用于iOS > 导出所有画板 即可。

Adobe XD自带切图功能

使用Cutterman协助Photoshop切图

在Cutterman官网下载PS插件后，点击窗口 > 扩展功能 > Cutterman 调出面板；然后选择iOS 并高亮选中@3X和@2X；在图层面板里选中需要切图的元素，点击“导出选中图层”即可。

Photoshop中的Cutterman 插件

使用蓝湖切图

在蓝湖平台可以下载Sketch、Adobe XD或Photoshop对应的插件。然后在不同设计软件插件中将设计稿上传到蓝湖（PS需要用插件标记需要切出的元素），然后在蓝湖网页版点击切图按钮，选择视网膜@2x和高清视网膜@3x，再点击“下载该页全部切图”即可。

在蓝湖平台导出切图

切图命名规范

切图最后需要命名成规范的格式，这样方便程序员查找。切图命名的格式建议全英文，如果大家英文不好需要想办法提升一点简单的词汇量。借由上述工具切图后，需要整理切图命名，或在切图之前对图层命名亦可。以下是切图元素的中英文对照：

切图命名对照表

然后我们要按照 功能_类型_名称_状态@倍数 来命名每个切图，比如我们导航条上有一个搜索图标，那么它的名称就是：

navi_icon_search_default@2x.png

(导航_图标_搜索_正常@2x.png)

iOS开发语言

作为iOS开发工程师，最重要的三个工具是：Obiective-C、Swift、UIKit框架。Obiective-C是目前最有效率的语言；而Swift开发非常。一般iOS工程师会在这两个语言中选择一种作为开发工具。UIKit是苹果系统自带的一套框架，这个框架里有设置按钮、滑竿、状态栏、电池电量、键盘等接口可供调用。所以我们看到很多第三方APP的界面中，有许多控件和苹果自带程序是一致的，这就是UIKit的功劳。

开发视角 By @alvaroreyes

了解开发工程师的语言和工具对我们做设计也格外有帮助，我们会知道哪些效果能做，哪些效果不能做，哪些效果能做不好做等等。我找了大家关注的九个问题请教了iOS资深开发工程师程威：

和iOS工程师沟通

沟通完是不是学到了不少？我们明白了iOS工程师工作的机制后再设计界面时就可以做到心中有数了。在平时工作中我们也应该多和开发小哥哥聊聊，学习一下他们实现的方式，以便我们的设计能够更好地落地。

标注

切图后程序员得到了什么？一大堆碎片。把这些碎片重新用OC或者Swift构建回我们设计的界面并没有想的那么简单。所以开发工程师可能会总是在思考构架层面的问题，而忽视了视觉还原。并且由于iOS的开发人员不会使用设计软件，所以很容易出现比如14pt或者28px的文字，实现后是16pt或者32px。那就乱了套了不是，那怎么办呢？我们可以通过一些标注软件把图标之间的位置、字体的高度、字体的大小和色彩进行标注，让程序员轻松省力地还原我们的设计稿。

蓝湖平台自动标注功能

将Sketch和Adobe XD、Photoshop的设计稿上传至蓝湖后，在蓝湖平台每个页面左侧有一个类似分享的图标，点击会获取一个网址，这个网址就是系统生成的自动标注。它会自动识别设计稿中字体大小和间距等，甚至有代码参考。

蓝湖自动标注工具

使用Px像素大厨标注

像素大厨同样提供了自动标注、手动标注两种标注方法。自动标注需要上传设计稿，手动标注需要设计师使用“尺子”来测量距离、“吸管”来吸取色号。在界面上部有单位选择，如果我们给iOS开发做标注，那么单位最好选择PT，与开发环境一致。

像素大厨标注工具

“标你妹啊”进行自动标注

国产标注在线神器。只需要登录网站后，上传设计稿可直接生成标注网址，发给程序员就可以啦。同样提供代码参考和自动标注间距尺寸等功能。

在线标注工具 - 标你妹啊

Markman 手动标注

Markman同样是国产标注神器。而且是我使用的第一个标注工具，选用底部工具可以进行手动标注，标注后导出png标注图即可。

Markman标注工具

动效

据资深iOS开发程威介绍，目前的iOS主流的动效实现方式有以下四种：第一种，设计师给到开发动效视频或gif，开发人员照着效果编写代码调用静态切图重新做一遍，这样的还原度可能会有问题，需要开发和设计师多沟通。第二种，可以使用序列帧的方式实现动画，原理是给到开发按顺序命名的png，比如1.png、2.png等，然后用代码将它们快速替换实现动画。第三种，我们也可以给到程序员avi等视频文件直接插入视频。第四种，使用Airbnb开源的Lottie（https://airbnb.design/lottie/）。具体来说是通过after effects来完成动效，然后通过BodyMovin插件导出json文件，里面记录的就是动画的细节，然后在安卓，iOS，React Native上都有一套对应的SDK，来解析这个json文件来还原成动画。这个方式的还原度很高，除了部分AE不支持外堪称完美。其实还有QuartzCode、CoreAnimator等工具，有兴趣的大家可以去尝试一下。但我认为不管使用什么方式，最优秀的动效还是要靠设计师和开发人员“真诚地交流”。

项目走查

当我们最终完成了界面设计，需要和我们的设计稿进行对照还原。除了用肉眼辨别之外，我们也可以把还原后的程序截图下来放到PS中对照，寻找问题。那么我们给程序员的反馈就是一个有截图对照和标注的文档，这个文档可以成为Buglist。

截图后可在软件中对比寻找问题

项目走查除了判断视觉还原程度，也要兼顾动效、点击状态等动态效果是否符合设计预期。如果有问题需要及时和技术反馈，反馈的方式建议是文档类型，保证有据可查。

总结

我们一起来小结一下：当我们设计iOS平台的APP时，我们可以选择使用Sketch、Adobe XD、Photoshop等工具。为了切图和适配方便，设计时我们以iPhone6/7/8尺寸（750x1334px或375x667pt）为基准设计。设计过程中我们需要通过诸如Adobe XD或Mirror等工具随时在手机上预览设计效果。之后我们需要把图像资源输出成@2x视网膜屏幕和@3x高清视网膜屏幕两套图像资源，这时可以使用Cutterman或Sketch和XD自带的切图功能切图。为了保证开发工程师能够完美地还原我们的设计稿，我们需要提供标注。通过蓝湖或像素大厨、Markman、标你妹啊等工具我们可以把设计稿完美标注给到程序员，这时程序员就清晰地明白每个元素的大小和间距了。最后，我们要对完成的程序进行验收。本篇文章写于二零一八年，按照惯例，每年苹果都会举办两场发布会发布新产品。如果后面发布了新的手机，也希望大家能够理清脉络，透过现象看到本质，找出合适的设计适配方法。

参考资料

苹果开发者中心网址：

https://developer.apple.com/

苹果人机交互规范：

https://developer.apple.com/design/human-interface-guidelines/

iOS设计资源下载：

https://developer.apple.com/design/resources/

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

目录：

• 警告框与操作表
• 标签栏与操作栏
• Tabs与分段控件
• Toast与Snackbar

一、警告框与操作表

1. 定义

警告框：是一种操作上的确认，只有当用户点击按钮后才算真的完成，才可以有其他操作，主要作用是警告或提示用户的。

警告框由三部分组成：标题、正文、按钮。有些简单的警告或提示只有正文和按钮即可。

操作表/ActionSheet：操作表通常会从屏幕底部边缘向上滑出一个面板，可提供2个以上的选择。呈现给用户的是简单、清晰、无须解释的一组操作，没有正文的描述内容（大部分）。另外重要的功能操作也会用红色文字展示。

2. 如何选用？

文字内容的重要性

文字内容的重要性：选择警示框和操作表时，要考虑的是两个弹窗文字内容对于用户的重要程度，如果内容极为重要则选用警示框，如果文字内容不重要甚至不需要描述文字我们就应该选择操作表。

案例：如下图，淘宝登录密码错误时，由于警示框更重要的是文字内容的体现，帮助用户找到问题所在，所以选用警示框。再看 QQ邮箱的垃圾箱中点击全部清空时，由于信息本身就在垃圾箱内，不需要对用户过多的文字提示，用户直接操作即可，所以最后选用操作表。

用户操作流畅性

用户操作流畅性：当我们需要让用户停止操作并必须点击当前界面的按钮时，要选择警示框，警示框对用户操作上的流畅性有着很严重的影响。如果不需要太过强硬，我们就选用只需在屏幕中任意位置点击就会消失的操作表。

数量

数量：这是最容易区分使用的方面，当弹窗中的按钮数量超过2个时我们一定选用操作表，因为警示框的按钮数量不可以超过两个。如果数量一样，可以根据上面两点择优使用。

案例：如下图，我们在得到App 中点击开通「推送通知」时，因为操作按钮只有一个，所以选择警示框。而点开微博中的更多按钮，用的则是操作表，因为操作按钮有三个。

二、标签栏与工具栏

1. 定义

标签栏：标签栏位于屏幕底部，它是悬浮在当前页面之上的，并且会一直存在，只有当用户点击跳转到二级菜单后才会消失。用户可以在不同的子任务、视图和模式中进行切换，并且切换按钮间都属于不同的内容。

当用户选中某个标签时，该标签呈现适当的高亮状态。数量也有限制，不能超过5个，如果存在5个以上的标签可以将最后的标签设计成「更多」标签。

工具栏：工具栏同样位于屏幕底部，悬浮在当前页面之上的，并且当用户不需要使用的时候，可以隐藏它。例如向上滑动界面时，工具栏会自动隐藏。工具栏的内容主要是对当前页面的相关操作按钮。

2. 如何选用？

切换状态

切换状态：当我们需要同级别界面切换时，应该选择标签栏，同时标签栏的切换通常为一级导航，工具栏的功能仅针对当前界面内容的相关操作。

案例：如下图，微信读书底部栏中是关于同级别的视图切换，所以选择标签栏，同时标签栏也常用于产品的一级导航。而 Safari浏览器底部的内容是针对当前界面的操作功能，所以使用了工具栏。

位置状态

位置状态：当底部导航始终在界面最上方时，上下滑动都不会消失，则选择标签栏；如果底部导航上滑随之消失则选择工具栏（说明：也有少数的工具栏是怎么滑动都不会消失的）。

案例：如下图，我们来看看百度的 App，当我向上滑动界面时，底部导航的位置是不会消失的，所以使用了标签栏。再看 Safari浏览器，因为上滑时底部栏会被隐藏，所以选用了工具栏。

选中状态

选中状态：当用户选中底部某一项时，如果需要高亮显示且显示的内容是不同子任务的视图，则使用标签栏；而当选择后，出现操作表等与当前界面相关的操作时，应该选择工具栏。

案例：如下图，我们还是来看百度App，当我点击底部的选项时，切换的同时，当前选中的「好看视频」需要变成选中的样式，来告知用户当前选中的是那个界面，所以使用了标签栏。再看 Safari浏览器，点击底部按钮后出现操作表且当前选中的按钮也不会变高亮，因为不会在当前切换界面，所以选择了工具栏。

三、Tabs与分段控件/Segment Control

1. 定义

Tabs：Tabs 来自 MD规范，早在 Android 2.0时代，官方的通讯录App 就使用顶部 Tab导航，可以滑动切换不同视图。Tabs 里 Tab 呈现的内容可以有很大的差别，而且数量没有限制，Tabs 不能作为表单的单选组件。

分段控件：iOS 原生控件之一，每个分段作用是互斥的，在分段控件里，所有的分段选项框在长度上要保持一致，同 iOS规范中对于分段控件的分段选项不得超过5个，每个分段选项可以是纯文字或者图片。

2. 如何运用？

来源不同

来源不同：分段控件来自 iOS规范，而 Tabs 来源于 MD规范。

案例：如图我们来看 iPhone 的日历界面点击收件箱，因为是 iOS系统配置的应用，所以界面中切换样式用的是分段控件，而反观安卓系统则用的是 Tabs切换。

内容不同

内容不同：分段控件主要起到分割和筛选同类数据，而 Tabs 则没有这样的限制，Tabs 里的每一项所呈现的内容可以有很大的差别。另外分段控件更多的是以单选功能出现在表单的使用中，而 Tab 则不能作为表单的单选组件。

案例：如下图鲨鱼记账中的图表页，支持、收入为整个界面展示项目，为了让用户查看起来更加方便，把数据分割为周、月、年的不同的数据展示，因为是同类数据切换，所以选择了分段控件。反观36氪首页的 Tabs栏，由于每个内容的差别都很大，所以使用了 Tab栏展示。

操作方式不同

操作方式不同：分段控件需要点击操作，而 Tabs 除了点击外还可以通过左右滑动切换不同视图。

案例：如下图，网易钱包App 界面中的切换控件，因为在表单中且是极为近似的数据图，不易让用户侧滑屏幕切换，需要让用户更精准的点击选择。所以使用了智能点击的分段控件，而优酷视频的切换页变化都比较明显，很容易区分，所以选择了可以侧滑屏幕切换的 Tabs。

数量

数量：分段控件数量不能超过5个，而 Tabs 没有数量限制。

案例：如下图网易云音乐中的消息界面，界面中因为分类的数量未超过五个（不是所有未超过5个的就要用分段控件，同时也要根据以上说的其他三种情况判断，这里只针对数量阐述而已），所以可以使用分段控件，而网易云音乐视频界面中因为分类数量过多且内容上有区别所以选择了 Tabs。

四、Toast与Snackbar

1. 定义

Toast：Toast 通常出现在顶部和中部，浮于页面上方，无法对其操作，出现一段时间后便会消失，并且在此期间不影响其他正常操作。

Snackbar：Snackbar 出自于安卓系统，是安卓系统的特色弹窗之一。它是由一段信息和一个按钮组成，他们会在超时或者用户在屏幕其他地方触碰后自动消失。Snackbar 可以在屏幕上滑动关闭。Snackbar 不会妨碍用户对产品的其他操作。

2. 如何选用？

操作不同

操作不同：Toast 弹窗没有任何操作键，而 Snackbar 是有操作键的。

案例：如图马蜂窝App 中给作者的文章点赞功能只需要告知用户，点赞已成功即可，不需要其他操作，所以选用 Toast弹窗。而携程中当进入酒店界面时，除了告知用户下面还有更多信息外，还想引导用户直接查看，所以选用了带操作功能的 Snackbar。

退出状态不同

退出状态不同：Toast弹窗完全是通过超时后自动消失，不存在任何操作，而 Snackbar 可以超时消失也可以用户主动上滑关闭。

案例：如下图豆瓣App 广播界面中，当我点击换一批后，换好的内容会自动刷新到最前面，所以用户不需要任何操作就可以看到内容，就可以选用无操作必须等待超时后才会消失的 Toast弹窗。

而携程App 中的酒店界面，因为更多精彩的内容在下面，并没有展示出来，为了不让用户在滑动浏览时造成视觉障碍。所以选择了 Snackbar，除了超时后自动关闭外，也可以通过滑动界面让弹窗主动关闭。

组成元素不同

组成元素不同：Toast弹窗主要是由文字和背景组成，也可以额外附加图标。而 Snackbar 除文字、背景，图标外还有操作键组成。

案例：如下图得到App 中只需要提示用即可，所以选用 Toast，组成元素选用背景+文字+图标，而小红书App 需要加入操作键，所以选择了 Snackbar。

总结

通过上面的分析，大家是不是对这八个组件有了更深的理解呢？

每个组件都有不可替代的作用，如果大家还有哪些不清楚的组件对比可以在文章下留言，之后我会选择一些整理出来再次和大家分享，感谢大家的耐心阅读。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。