首页

老板让你做出能刷屏的创意?来看京东设计师的方法!

雪涛


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

通过以目标用户为核心的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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


上亿人使用的腾讯微视,是如何做品牌体验设计的?

雪涛

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

编者按:微视作为今年腾讯对抗抖音的核心产品,其重要性不言而喻。在短视频App 百花齐放的今天,腾讯微视该如何做品牌设计才能避免同质化,给产品带来价值呢?本文来自腾讯设计师的复盘回顾,你可以看到大厂的完整设计流程是怎样的。

一、项目背景

2017年是整个短视频大爆发的时期,内容产业逐渐成为移动互联网新的生力军。短视频产品同质化,用户体验趋同,团队希望运用品牌体验的全局设计思维,从视觉识别,用户体验,线上线下推广及产品礼品等多个维度来凸显产品核心价值,搭建一套完整统一的产品设计语言。

二、目标

微视目标很清晰,需要在短时间内快速进入短视频第一集团,切入短视频社交领域,挖掘更多机会点,也希望借这个机会能成为像微信这样的腾讯战略级产品。

三、设计挑战

设计的挑战点,短视频无论是产品形态还是设计体验都已成熟,如何避免同质化,在设计上寻求自己的核心竞争力;另外短视频产品强调内容运营,设计如何能够给产品带来价值,也是微视设计在这次的最大挑战。

微视在刚起步阶段,品牌团队曾经给微视做过1.0版本的设计,当时微视的设计思路没有太清晰,最终设计偏向于简洁专注的方向;但随着短视频逐步上升为腾讯的战略方向,微视单一的设计风格已经不能满足本身需求了,微视需要一个更丰富的设计语言,这给微视的新设计重新提供了一次机会。

我们梳理了微视的设计流程,整个微视品牌设计分为三大块内容,策略,设计和体验;设计前期需要明确微视的整体品牌定位以及挖掘产品的核心价值,推导出一套符合产品气质的设计原则,品牌设计上,应该是整个产品的设计语言素材库,其中包括了标志的设计,字体库的建立,色彩系统的搭建,图形延展设计,插画风格的提炼,动效概念等核心设计元素;在最后一环的品牌体验,代表了微视所有的场景媒介,都需要从设计语言素材库内提取设计元素并适配对应的设计,保证所有媒介场景的高度统一。

「做年轻人的潮流分享社区」是整个微视的品牌定位,让年轻人感知玩微视是一种潮流,在微视里能够挖掘更多很酷的事情和有趣内容,成为年轻人分享潮流和趣味的平台;微视的 slogan 是「发现更有趣」,发现更多有趣的人,和事,或者说是一种生活态度;基于整个品牌定位,我们挖掘微视的三大核心价值:保持好奇,寻找生活趣事;微视展现与众不同的自我;打造微视达人的潮流文化。三个核心价值,我们构建出微视的基础设计原则:微视是具备丰富内容和玩法多变的产品;它应该有个性化的标签来彰显自己的态度;微视是一个自带潮流属性的平台,在潮流圈中有很好的认可度,通过它来传播自己的态度和生活方式。

四、微视slogan:发现更有趣

通过整体的品牌策略与其它短视频拉开差异化,当下主要竞品的品牌定位都是强调记录生活,记录美好时刻;微视则强调用户自己,主动去挖掘更多有趣的人,有趣的玩法,生活趣事,探索世界,发现更多精彩。

我们在设计的第一阶段,logo设计,就是围绕「有趣」来展开发散设计。设计方案是否有趣,是我们的第一标准;它可能是一个实际存在的事物,它也有可能是一个抽象的造型,但它必须是有趣值得玩味的,也可能是别的概念会引起你的兴趣点。最终我们决定使用一个特别的播放键来代表微视,播放键的造型能让用户感受它是拥有多个维度的,2D,3D甚至是异度空间等,寓意着用户可以从多个维度来看世界,寻找有趣的内容。

我们针对这个大方向再进行了几轮细化,右边是最终的设计方案,这个 logo 希望它在多数的 app 当中表现的足够抢眼,所以色彩纯度足够高,渐变四色的搭配能让它从众多 app 中跳跃出来。

logo设计确定后,接下来补充 logo 在各使用场景中的基础设计规范,另外会增加一个不带 app底的场景,微视不只是单纯的应用在 app 上,它还需要有很好的扩展性。

四色渐变是微视的品牌色,确定了微视红是它的主品牌色,紫色,蓝色和桃红则是它的子品牌色。

另外在品牌字体的选择上,我们选择了三款原生字体作为微视的标准品牌字体。Fugaz-One 是一款能够广泛用于各种书刊画册的艺术字体,它的大写字体具有强烈的视觉冲击力,选择它作为微视标准英文字体;汉仪雅酷黑也是一款用于艺术设计方面的简体中文字体,字体线条粗壮,字形端正大方,并且字库相对其它艺术字体更完整;汉仪旗黑系列则作为微视信息类字体的补充,汉仪旗黑是汉仪字库推出的一款非常庞大而完整的家族字体,字体的各类粗细度都很齐全,并且能完美的实现各类终端环境的呈现。

微视的 pattern 是从 logo 的造型延展出来的纹理设计,这套 pattern会 应用在许多应用场景上,包括广告,内容模版,周边产品等需要辅助设计的场景中。

△ 微视网站

△ 微视内容模板

△ 品牌视频结束页

Pattern 也会结合激光动效的理念运用到微视的场景中,例如官网设计,内容模版,视频结束页等,Pattern 会作为底层展现品牌形象,在整个过程中会有品牌色激光动效,让整个场景丰富立体起来。

微视logo 具备多维度的特性,将这种特性运用到 UI场景的 loading 和微视水印效果上,增强品牌的独特性和趣味性;另外我们也会将 logo 做成霓虹灯的立体装置在线下活动中展出,让用户感受 logo 的丰富多变。

△ 点击查看完整视频

品牌视频通过多个几何维度来诠释 logo 理念,强调微视品牌趣味性。

结合 logo 的造型特征,我们打造了一套完整的图形系统素材库,里面包含了完整的字母与数字,还有结合短视频特性的图标体系;目前这套素材库仍在不断完善中,所有的图形设计都会运用到后期微视的广告和运营活动当中,霓虹灯的实体效果会结合线下的活动装置中使用,这套图形系统素材库,不但具备很好的品牌识别度,而且强调了微视有趣的设计理念。

品牌体验模块把我们确定的这套设计语言结合到与用户面对面的场景中来。品牌体验主要阐述微视的广告,活动和礼品三大块内容上。

在整体的微视广告设计中,我们把微视达人的个性拆成六大类别,每一类型都会拥有一个抽象的图形来代表这一类人群,向往美好生活和生活趣事的人;作风个性炸裂,酷炫的人;有才华的人;潮流网红;二次元;甚至是闷骚奇葩的人等。

每类个性标签的人群都有与之对应的风格与设计手法匹配,例如美趣标签的设计风格偏向暖色氛围与立体化图形的搭配;炸裂标签的达人,风格酷炫,广告整体运用撞色叠加的手法+霓虹灯的视觉效果;每种标签的设定都会有不一样的定义,让微视的广告语言更丰富和多元化。

微视官方品牌广告采用微视的标准品牌风格,对比其它标签的设计,它需要更加微视的风格。在首波微视推广中都采用了标准风格。我们给每套风格设定一套设计规范,方便后期CP 和其他设计师介入制作广告提供一套标准。

另外在微视的 IP形象微视狗的推广上,也采用微视的品牌风格来宣传。

微视中期的推广投放量非常巨大,所以也是微视广告语言需要多元化的原因,只有一套风格设定,不能满足微视的推广需求,美趣风格也是专门为101打造的微视广告,设定的糖果色氛围和3d设计很符合101女团的风格。

酷炫风强调撞色对比来体现氛围感,搭配品牌霓虹灯的视觉效果来呈现,霓虹灯设计也是运用微视图标素材库里提取出来的元素设计。在 NBA总决赛推广期,微视狗与 nba 合作的广告采用了这套风格设定。

微视广告在后期陆续补充了未来概念,街头时尚等风格,都是围绕大量不同个性的明星设定。

二次元作为近几年影响力逐渐壮大的群体,微视也打造了一套插画风格的设计,风格抽象,色彩纯度高,画质的细节多,适用于年轻搞怪的明星使用。

微视官网也采用插画作为主要设计的风格,这套推广插画偏向潮流感科技感,服装特地设计成 wesee 出品,让用户看到微视和其它竞品不一样的设计定位。

微视设计原则的第二条是微视拥有很强烈的个性标签,代表微视自身的态度。

我们采用了警示带的概念,作为微视品牌的专属元素,警示带能够彰显一个人的态度,同时又有趣味性和潮流感。我们结合了微视达人的特性,提炼出6段个性的词语作为警示带内容(拒绝雷同,发现有趣,忠于态度,潮流支配,躁动时代,极度爆炸)让警示带的设计更多选择和多样化。

在 vans 和微视的联名活动中,微视采用了警示带概念来对整个活动场馆进行铺装。

警示带概念还运用到微视线下潮流商品的设计中,背包,帽子,tee,手机壳等单品。

微视的最后一条设计原则,阐述微视的潮流文化。最主要的场景是在微视的达人商品设计上。

我们不希望只把微视当作是一个短视频的产品来做,设计师希望把它打造成一个新生的潮流生活品牌,无论是在选择产品的类型,到设计,打样,还有拍摄推广,都和普通的公司文化衫,或者纪念品拉开差距。

微视的潮流贴纸,除了作为线下达人活动的礼品,也作为线上APP 贴纸库的内容资源,提供给用户使用。

微视后续会继续生产更多的周边商品,比如拖鞋,背包,卫衣,毛巾等,这些都属于生产周期短,没有复杂工艺,性价比极高,属于潮流圈的基础单品,人手一件。这些单品都拿到能够触达用户的官方线下活动和品牌联名活动中,手递手传播微视的潮流品牌影响力。

总结

微视设计不仅包含了APP的体验设计,还包含了市场营销,运营活动,达人推广,周边商品等多个设计环节,环环相扣,缺一不可,一起构建了整个大微视的设计体系;互联网品牌体验在这几年逐渐显得重要,在如何设计同质化严重的产品上,如何打造竞品差异化的设计上,整体规划清晰的品牌设计能够让产品有更好的唯一性和专属感。

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

一口吃下 iPhone设计规范

雪涛

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

如果您不熟悉iPhone设计规范,请一口吃下本篇文章。伴随笔记吃下效果更佳:)

Image title

 

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)也陆续更新着苹果手机的产品线,延续着这些伟大的产品。

 

 Image title

年轻的乔布斯

 

初代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。

 

Image title

 苹果初代产品 (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。

Image title

 

 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单位的数值和对应的工具即可。

 

 Image title

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

 

PPI

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

 Image title

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尺寸之外,其他界面仍然维持两套设计稿即可。

 

Image title

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倍图了,只存在一个假想的概念。

 Image title

iPhone 6/7/8  (自2014)

 

Image title

 

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设计界面的话,宽度变化还是比较大的。需要做放大处理然后单独调整那些乱了的尺寸。

 Image title

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)即可。

 Image title

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。

 Image title

手机型号与像素对应图

 

Image title

 

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设计的模板。

 Image title

UI Elements 文件夹中的源文件

 

Image title 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换算。

 

 Image title

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

 

Image title

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

 

大标题导航栏

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

 

 Image title

大标题的尺寸

导航栏图标

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

 Image title

导航栏图标尺寸规范

 

标签栏 (Tab Bars)

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

 

Image title

标签栏的尺寸

标签栏图标

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

 Image title

真实设计中的标签栏

 

Image title

 

标签栏图标设计规范

Image title

 

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

 

 

工具栏 (ToolBars)

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

 

闪屏资源

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

 Image title

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

 

安全距离

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

 

 Image title

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

 

色彩

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

 Image title

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)这几种。

 Image title

HIG对APP的字体建议(基于@2x)

 

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

 

启动图标

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

 

 Image title

Template-AppIcons-iOS

 

控件

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

 Image title

默认控件

 

Image title

 

自定控件和默认控件

 

控件中无处不在的44pt(88px)

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

 Image title

无处不见的44pt(88px)

 

键盘

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

 Image title

键盘高度

 

iTunes 上传截图

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

 Image title

ITunes上传用截图

 Image title


工作流程


前期调研阶段

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

 

原型图阶段

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

 

 Image title

构建APP原型图(工具:Adobe XD )

 

视觉稿阶段

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

 

Image title 

视觉稿设计阶段(工具:Adobe XD)

 

Image title

 

视觉稿设计阶段(工具: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)均可,要视具体情况决定。

 

 Image title

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

 

实时预览你的设计稿

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

 

 Image title

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

 

Image title

 

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

 

Image title

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

 

iPhoneX设计效果图

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

 

Image title

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

 

视觉规范

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

 

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

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

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

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

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

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

 

 

Image title

设计规范的重要性

 

 

Image title

设计规范中的色彩规范

 

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

 

切图

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

 

 

Image title

某项目中的切图文件

 

Adobe XD切图功能

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

 

Image title

Adobe XD自带切图功能

 

使用Cutterman协助Photoshop切图

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

 

 

Image title

Photoshop中的Cutterman 插件

 

使用蓝湖切图

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

 

 

Image title

在蓝湖平台导出切图

 

切图命名规范

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

 Image title

切图命名对照表

 

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

 

navi_icon_search_default@2x.png

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

 

iOS开发语言

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

 

 

Image title

开发视角 By @alvaroreyes

 

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

 

 

Image title

Image title

和iOS工程师沟通

 

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

 

标注

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

 

蓝湖平台自动标注功能

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

 

Image title

蓝湖自动标注工具

 

使用Px像素大厨标注

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

 

Image title

像素大厨标注工具

 

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

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

 

 

Image title

在线标注工具 - 标你妹啊

 

Markman 手动标注

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

 

 

Image title

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。

 

Image title

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

 

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

 

 Image title


总结


我们一起来小结一下:当我们设计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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

这4个最常见的 UI 组件,给你总结了这份使用指南

雪涛

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

我们在看 App 时,有没有思考过这样的问题,同样都是提示弹窗为什么出现那么多不同的样式,亦或者同样都是让界面进行切换的导航为什么有的可以通过侧滑切换,有的却只能点击切换呢?最近在玩 App 时发现了几组这样的控件,下面就来和大家分享下我对他们的理解和选用。

目录:

  • 警告框与操作表
  • 标签栏与操作栏
  • 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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

高手私藏的 UI 细节设计,这篇全都给你整理好了!

雪涛

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

这篇文章渗透进页面中的每一个 Kit控件,深入的分析每一个控件所能带给用户的视觉以及心理感受。

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

用一个案例,告诉你我是如何把工作效率提高30%的!

雪涛

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

最近刚做完一个项目,我发现我的设计效率相比之前竟然提升了30%以上。今天用「个人中心页面从思考到设计全过程」这个案例给大家分享一下。

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

甲方竟敢说你的配色丑! 我来教你怼回去

雪涛


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

当我们看到一件设计作品的时候,映入眼帘的先是配色,然后才是其他的内容,配色的好坏,直接决定了我们对这个作品的第一印象。


当然,选中一个合适的配色绝不是一个偶然的事儿,这其实是一项系统的工作,只有知己知彼,把色彩研究透了,才能运用的得心应手。

以下几个方面也许就是经常困扰你的点:

  • 想要表达的设计思想不知道怎么去选取合适的色彩;
  • 缺少对色彩全面的认识;
  • 对配色没有一个系统的搭配方法;
  • 不懂得如何提高对色彩的敏感度。

接下来,我会分几个部分,来聊一聊色彩及配色。

一、认识色彩

1. 色彩理论

开始理解色彩,必然要提到色彩三要素,色相、纯度、明度,这是最基本的概念,我就简单的以三张图概括下:

色相:指的就是红色、绿色这些色调的称呼。

纯度:指色彩的鲜明程度。

明度:指色彩的明亮程度。

而色相又大体上可以分为冷色系和暖色系。

二、色彩印象

在进行配色实践之前,关于色彩本身的理解十分重要,在理解色彩独特的性质之后,才能进一步学习更有效的配色设计技巧。

点缀我们生活的各种色彩,都具有影响人类心理、情绪、感觉的力量,下面展开介绍一些代表性的色彩印象。

1. 红色

红色既有积极的一面,也有消极的一面,在考虑如何用其他颜色去搭配红色之前,先想想想要红色在整个作品中表现什么?

属于红色的关键词有:热情、兴奋、能量、爱、华丽的、辉煌的、生命力、主动性、活力、激情、辛辣的、炙热的;愤怒、危险、攻击性的、暴力性的、嫉妒、压力、压迫感、刺激的等等。

如果想要表现红色积极性的一面,最好使用泛黄的大红色或者明度较高的粉红色系的颜色。泛黄的红色比100%红色更能够表达温暖的感觉,而在粉红色系中,泛黄的暖粉红色比泛紫的冷粉红色更能传达出积极的印象。

相反,如果想要表现红色消极性的一面,使用泛紫的红色比较好。红色和紫红色中间的色系给人冷淡、不自然的感觉。这些色彩的明度越低,越给人不自然的和消极的形象。

下面举几个红色配色的案例。

上面这幅作品,设计师想要传达出「危险」「压迫感」的情感信息,塑造一个难民的形象,整个配色以红黑搭配,更显深沉。

红色也有着「华丽感」和「刺激感」,大面积的红色做为底色,凸显出画面中的人物形象,很好的诠释优雅和成熟。

2. 橙色

每种颜色都会有某种情感偏向,而橙色的情感是非常暧昧的,这种暧昧感使得它比红色更加温和,比黄色更加老练,即它有一种中性的魅力。

属于橙色的关键词有:活跃、温暖的、喜悦、开朗的、朝气蓬勃的、明快的、跃动的、亲近的、丰收、健康的、轻快的、明朗的、朴素的、安心的、温和的;任性的、歇斯底里的、嘈杂的、廉价的等等。

同属于橙色系的色彩,实际上给人的印象是完全不同的。鲜明的橙色富于年轻感,而偏褐色的橙色更具有复古感。

下面举几个橙色配色的案例。

以大面积的橙色做为底色,搭配高饱和度的黄色,这些色彩的「温度」都很高,很好的表现出了橙色「朝气蓬勃」的感觉。

将橙色的明度适当降低,搭配上「厚重」的红褐色,很好的展现除了橙色鲜明的个性。

饱和度高的色彩难免会表现出「廉价」的气息,画面中的橙色、黄色、蓝色、紫色,饱和度都偏高,很好的展现了作品的「销售属性」。

3. 黄色

谁都无法否定黄色带来的温暖,因为它就是太阳发出的光,黄色就是光,它也被称为「光之色彩」。而作为光的颜色,黄色可以作为挽救黯淡色调的救世主,赋予画面更多活力。

属于黄色的关键词有:明亮的、集中精神的、健康的、幽默的、希望、开放感、未来、宽厚的、轻快的、幸福、纯洁、明快、知识、权威、非正式的、可爱的、繁华的;幼稚、不成熟、警戒等等。

泛橙色的黄色比原色黄更能营造柔和温暖的氛围,这种平和积极的印象更能表现亲切多情的感觉。

泛绿的黄色偏冷,给人感觉冷漠。在原黄中加入白色和黑色的话,黄色本身的明亮的光感和暖意就会消失,变成偏冷的色彩。

下面举几个黄色配色的案例。

黄色的最「暖」的颜色,它很好的体现了色彩的「轻快感」,采用黄色为主色调,使得整个画面都「明亮起来」了。

这是一个以黄色为主,黑色为点睛色的配色,使用黄色超强的表现力,和黑色这种冷色搭配表现出「强烈刺激」的对比。

黄色同时也是小朋友最喜爱的颜色之一,高明度的配色,整体呈现出「可爱」和「童稚」的感觉。

4. 绿色

绿色作为大自然的主旋律,能带给人安宁舒适、生机勃勃的感觉。同时,绿色也是一种存在感极强的颜色,虽然是最为普遍的存在,但也是很难和其他的颜色搭配。

属于绿色的关键词有:自然、和谐、平衡、健康的、和平、治疗、新鲜、安逸、安心、安定、和煦的、诚实的、朴素的、放松的、年轻的、平等、公平、安全;不成熟、带有乡土气息的等等。

自然界的绿色是多种多样的,虽然看上去都是绿色,却可以有青葱的嫩绿,松针的草绿,清亮深邃的青绿色,落叶的橄榄绿等。这些颜色各有各的感觉。

下面举几个绿色配色的案例。

绿色是最「自然」的颜色,会让人不禁想起田园和植物,绿色和蓝色的搭配,没有强烈的对比感,倒显得画面更加「朴素」。

绿色搭配黑白灰,毫无异议的显得干净利落,上图中的绿色作为点睛色,平衡了黑白的单调,而这里的白色和绿色都趋向于轻薄,因此需要用深黑,以加强色彩的力量感。

绿色与偏暖的黄色搭配时,重要的是要强调两者之中的一个,在上图中的主色为绿色,点睛色为黄色,突出强调作品中的画面感。绿色的饱和度较低,与部分黄色相得益彰地变为了背景,辅助突出了点睛色。

5. 蓝色

在很多最爱颜色的民意调查中,蓝色都是最受大家喜欢的颜色。蓝色的原始记忆来自天空的广阔和大海的深邃。它有凉爽、神秘和寂静的感觉,同时又能塑造出特别的亲和力。

属于蓝色的关键词有:稳重、镇静、冷静、爽快、清爽、清凉感、信赖感、沉着、知识性、清洁的、成功的、男性的、理性、诚实;忧郁、孤独、荒凉、悲伤的、保守的、消极的等等。

如果要强调蓝色的积极印象,越贴近绿色的蓝色越好。但是,即便纯度较低,明度高的蓝色也能表现出明朗和积极的氛围。

下面举几个蓝色配色的案例。

提起夏天,我猜你想到的肯定是蓝天、大海,明度稍高的天蓝色,搭配深蓝色,充分体现了夏天的「爽快」与「清凉感」。

同时,蓝色也是极具商务个性的颜色,很多企业都选择蓝色做为品牌色,它也代表着「信赖感」和「成功」。

「蓝色是忧郁的」,静谧的夜晚,带来「孤独」与「荒凉」。

6. 紫色

在商业设计中,紫色被认为是一种优雅高档的色彩,常用于表现商品的奢华和高贵,同时也是很多艺术家喜爱的颜色。

属于紫色的关键词有:高贵、典雅、高尚、优美、风度、尊严、干练、神秘、秘密、心性、性感的、豪华的、华丽的、改观的;不安的、悲伤、孤独、嫉妒、自负、不健康、病弱等等。

紫色带有暗色的特质,所以明度稍微低一点就容易给人以沉闷的感觉。因此,紫色在与其他色彩配色时,尽量选择明度较高的紫色。

下面举几个紫色配色的案例。

紫色是「神秘」的,紫色本身是「冷暗」的颜色,所以与纯度高的色彩配色会强化紫色的冷暗感。

要用紫色来表现优雅、高贵等积极印象时,要特别注意纯度的把握。这种情况下,低纯度的暗紫色比高纯度的亮紫色更能传达积极的印象。

紫色靠近蓝色,所以紫色也有带有「孤独」和「悲伤」的调性,蓝紫色系的紫色更容易传达消极的感觉。

7. 白色

提起白色首先想到的纯洁,给人干净的感觉,它不会有强烈的个性,但是白色是永远的流行色。

属于白色的关键词有:清洁、纯净、清澈、正义、善良、和平、净化、诚实、胜利、真实、简约;空虚、变幻无常的、孤独、失败、离别、死亡、寒冷。

无印良品的产品一直注重「纯朴」、「简洁」、「环保」、以人为本等理念,在包装与产品设计上皆无品牌标注,但是却让人牢牢的记住了它。

大面积的白色显得「空虚」,加上蓝色的点缀,画面更显得「孤独」和「寒冷」,将白色的负面情绪表现的更淋漓尽致。

8. 黑色

当所有的光线都被吸收了,感觉就是黑色, 是一种具有多种不同文化意义的颜色,和白色一样也是永不过时的颜色。

属于黑色的关键词有:严肃、厚重、威严、神秘、高级感、充实、富裕、正式的、时髦的、硬的、重的;收缩、黑暗的、阴郁、邪恶、黑夜、恐怖、压抑、绝望、死亡、自卑、不安。

在画面中以黑灰色为底色,加上磨砂质感,突出了自行车的「高级感」。

黑色的背景加上压暗的人物形象,一种「力量感」油然而生,人物的形象也是凸显了整体画面的氛围。

总结

颜色无所谓美丑,我们对于颜色的判断完全是一种主观的经验,这个作品配色的好坏,并不是取决于这个颜色的好不好看,而是这个颜色适合不适合这个作品要传达的意境。

我们必须摒弃旧有的对颜色的判断,排除自身受到的社会文化的观念影响,从一个全新的眼光来研究色彩。只有在充分了解每一种颜色的色彩印象,才能消除你对配色的迷惑与不安。

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


Chrome浏览器十周年,谷歌设计师总结背后的故事

雪涛

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

Chrome浏览器10周年特别版已经上线了,有很多重大的更新内容。

Chrome 有了更加圆润的外观,新图标和跨平台的新色调。Google 还对用户界面进行了更改,以提高您的工作效率。例如,他们已将工具栏移动到 iOS 的底部,简化了地址栏中的提示,菜单和 URL。还有更多更新的内容,请自行去官网看看。

是不是很酷,反正我很喜欢这次更新的 UI界面,颜色和圆角都是喜欢的点。那这套设计是怎么来的?接下来的文章将带你走进 Chrome 设计背后的故事。

Chrome Omnibox的版本迭代之路(Unboxing Chrome,Redesigning the omnibox)

译者注:Omnibox 是位于浏览器顶部的一款通用工具条,用户可以在 Omnibox 中输入网站地址或搜索关键字,或者同时输入这两者,Chrome 会自动执行用户希望的操作。这个词在下文中将不再翻译,属于功能性的名词,用英文更准确。

为了庆祝 Chrome 在2018年9月的10岁生日,我们对浏览器界面进行了彻底的重新设计,对设计流程也进行了彻底的优化。尽管 Chrome 一直都是开源的,但我还是想分享更多关于其中的设计故事,以希望其他人能从中学到东西。

一、认识盒子

我经常被问到一些问题,比如「为什么 Chrome 需要设计师?」我的同事 Sebastien 在他的 Medium 帖子中优雅的描述了这一点,他说:

我收到最难的反馈就是,「只是这样不就行了吗?」

隐藏在问题的背后往往是,浏览器应该像下面那个样子就够用了:

这张图可以说已经很像在 PC电脑上的浏览器效果了,尽管是面对20亿用户,这样似乎也能正常工作。那为什么需要重新设计呢?

因为隐藏在这个盒子里面的内容是世界上最复杂,最安全的搜索和渲染引擎。

我们希望给它一个机会,去改变全世界浏览器的设计。

二、盒子简史

要了解我们如何走到今天,可能需要我们回头仔细看看:

△ 第一个盒子

这个0.5dp的渐变描边,22%不透明度投影及1dp圆角半径的盒子样式只为说明一件事:用户能知道自己可以在其中输入内容。

为什么?因为过去电脑只是连接到显示器和键盘,整个屏幕基本上都是文本。但当有了鼠标之后,就需要明确哪个区域是可点击的。因为显示器只能绘制方块像素,所以「文本输入框」诞生了。

△ 初代盒子

随着浏览器的推出,这个盒子开始具有显示位置或「统一资源定位器(URL)」的双重功能——因此得名「地址栏」。

在2008年,当 Chrome 首次发布时,我们的主要设计原则是尽可能减少认知成本。因此,我们合并了谷歌的搜索框和地址栏,并添加了4dp投影和下拉菜单,使得搜索体验更好——取了个名字叫「omnibox」。

△ 2008

当浏览器第一次出现在移动设备上时,界面空间非常有限,所以我们精心设计了每个像素,以便尽可能的占用更少的空间。我们使用了1dp的内阴影代替投影,并保证界面在灰色底下保持协调。

△ 2012

自那之后,网络环境变得更加复杂,设备也更加智能化。我们开始关心一些更复杂的情形下会发生什么,比如:当一个网站被黑客入侵并清除用户个人信息时,当突然断开网络时,当用户想回到一周前访问过的网站但又不记得网站时。

在过去的10年里,全世界成千上万的工程师(包括 Google 在内)都在思考这类问题,并全心全意地寻找解决方案,帮助用户浏览这个呈指数级变化的网络。

移动网络的快速发展也带来了大量的新用户,他们其中很多都是第一次在手机上上网,以前他们从未见过这个盒子,他们也不知道可以从这个盒子中找到任意想要找的东西。

我必须承认,在我开始在这里工作之前,我连 Chrome 一半的功能都不知道。例如,可以左右滑动工具栏用来切换选项,或者下滑查看所有选项卡。

△ 向下滑动工具栏查看选项卡的小技巧

类似这样的功能特性都是很隐蔽的,因为我们从来不想刻意的给用户去推销我们的功能。事实上,我们在浏览器中做的设计大多是无形的,以确保我们产品的核心价值「不是 Chrome,而是内容本身」。这是一个我非常喜欢的原则,这也是我加入这个项目的原因之一。

作为一个内向的人,有一个优势是会在设计上也试图尽可能的不张扬。产品本身似乎也反映了我对设计的看法:

保护用户与内容之间的神圣空间——不要分散用户的注意力。

就像 Beatrice Warde 将排版视为「水晶酒杯」一样,我将 Chrome 仅视为「水晶显示器」。

我错了。随着网络环境的改变,其他第三方软件开始伪装成 Chrome 来窃取信息,甚至是诈骗用户。

以前,我们不介意是否有人会从一大堆浏览器中选择 Chrome,但现在它已经开始影响我们用户的安全了。

因此,我们第一次开始质疑需不需要那么隐形。

三、千面盒子

当我第一次和工程师们坐在一起,想要更好的了解我们的浏览器是如何构建时,这是一个大坑,没有任何东西能让我为接下来的事情做好准备。

这在我15年设计经验中从未有过的。

我们在超过6个 Android 版本中,支持超过40种语言,甚至连 Roboto Medium 不支持的语言,我们都做了很好的适配。我们还允许开发人员将工具栏的颜色更改为几乎任何颜色,同时还保持可访问性以支持 web应用生态系统。

我们的 UI 也能适应不同像素密度设备并能保证具有相似的触摸大小,并且无论设备的内存容量或制造商都能平稳运行。

在你与它交互之前,这个盒子有超过2000种不同排列方式。

一旦你轻敲、输入、滚动、滑动或者与它语音,浏览器的布局排列就会发生各种变化。

当你打字时,我们确保你看到的键盘是你熟悉的那个;当你分享一个网站时,我们也会显示你在手机上的常用选项。

△ 我们设计的一些操作模式(黑色水平线表示分屏模式)

我们的静态盒子有2000个排列,然后在包含所有动态交互的情况下能成倍的增加到20000个以上。

看起来有点多?其实并不是。

因为我们想要确保每个人都能很顺利的访问互联网,不管他们从哪里进来的。

四、95种灰度配色

即使在我们的团队中,也没有人知道这个框中有多少种不同的文本样式。因为 Chrome 的迭代过程已经超过了10年,我们有一堆零散或过时的源文件。

因此,尽可能的回溯审查(主要是为了确保不会破坏数十亿人的 UI界面),我们为每种文本样式遍历每一行代码,并在字号、字重、颜色和透明度方面绘制出数百种变化。

尽管几年前就已经把我们的 UI规范化了,但是我们没有关于如何使用这些规范的指导,比如像14sp Roboto 的字体,我们就有超过14种不同的颜色。

我们总共使用了超过95种不同深浅的灰色。

如果不查看上下文,就不可能决定使用哪一个。即使是最小的更改也可能打破易访问性的标准,但其实我想知道我们实际上需要的最小颜色数。

将近半年后,终于有了答案,结果是8个。

然后,我们对 UI中的每个图标都做了相同的设计,所有115个图标——仔细选择哪些是 Material(如菜单图标),哪些是 Chrome 特定的(如匿名图标),哪些是特定于平台的(如复制/粘贴),还不包括选定,按下和禁用状态。

此外,一些图标被翻转为从右到左的形式,因此总数实际上接近400+。

五、设计优化永远止境

在盯着灰色盒子看了几个月后,如果我说前面堆积如山的工作其实并不可怕,那就真的是在吹牛了。

盲目自信,让我觉得我可以独自完成所有的事情。但我越努力,就越明显地发现这个问题并没有随着简单的重新设计而消失。

我们需要彻底的检查整个设计过程,以确保现有和未来的 UI 保持一致。

这很难,因为要 Chrome 在Google规范(如账户登录流程),Material规范(如按钮和图标),本地UI(如键盘)和Chrome品牌元素(如断网时的小恐龙)之间保持平衡。

所以,我向我们的工程师们寻求帮助,令人惊讶的是,他们对规范问题的放大表示欢迎。这个问题其实也让他们很难审查代码,因为平台约束和特性变化意味着难以回退和各种不一致。事实上,我们的工程师 Ted Choc 甚至雇了人来支持我们的努力,他们其实也很想搞定这个问题。(我的愿望实现了!)

为了让你知道我们的 Eng团队是多么的了不起,Ted 的使命宣言中写的就是「Chrome移动端超级棒!」

有了新获得的支持,我们开始构建基于代码库共享组件的可视化规范。其他应用「免费」获得的 Material 组件必须经过定制,以满足 Chrome 的所有(2000个)排列。几乎是从零开始,所以我们需要找到一种可扩展的方法来划分所有这些差异。

结果如下:

我们的第一个版本(M54)截图——在我们的界面中会映射每种颜色、文字、图标和组件。

六、设计速度

几个月来,我们只是在删除整理东西,清理多年累积的设计和工程债务。现在我们有了一个干净的界面和一个组件库系统,我们已经准备好开始设计了。

让我们回到我们在前面第一次遇到的盒子。1号盒子放在一个更大的灰色盒子里,我们称之为「工具栏」。

△ 第二个盒子

工具栏将浏览器UI 从内容和系统UI 中分离出来,当你点击白色框时,它将填充灰色框,并显示下面的另一个灰色框。

△ 第三个盒子

在这里,我们可以展示我们在幕后所做的一切,试图使 Chrome 尽可能地发挥作用。但是为什么所有这些盒子都要调整大小并从一种状态改变到另一种状态呢?

△ 第一个盒子的不同形式

当某些东西在屏幕之间发生变化时,就很难识别或记住。

如果 UI 在用户与它交互时发生了变化,他们会将变化理解为以后可能有用的信息。例如,如果图像消失在图标中,你可能需要记住该图标,以防你想再次打开该图像。

这增加了理解用户界面和决定需要保留哪些信息的短暂认知负担。

我们去掉了所有的视觉噪音像素,让你更快地进行认知过程,而不仅仅是为了让它看起来更赏心悦目。

即使每座城市都能节省1秒钟的时间,那也会有200万秒或者23.14天。想想看,人们可以在额外的23天内做些什么!(译者注:不大明白作者这里怎么算的,可能意思是说要提升效率。)

为了演示,让我们看看去掉文字和图标之后的工具栏:

你是否注意到你的眼睛在屏幕上移动了多少来处理不同的元素?

现在让我们来看一下同一个屏幕,只去掉了颜色和阴影:

从什么都没有的时候开始练习,或者我们所说的「白色建筑」,意味着每一个元素都必须被考虑。包括这个在我们的 UI 上静静地做了这么多年的盒子:

△ 第四种盒子

幸运的是,我们认识了第四种盒子的创造者,并且得到了 Android 团队的大力支持,可以根据内容来改变颜色(又一个6个月的旅程,值得一提)。

但是,让我们继续讨论第二框的其他内容:图标,这些图标都带有另外两个隐形框。

描述了图像资源的「边界框」

△ 看不见的5号盒子

「触摸目标」描述了点击区域

△ 看不见的6号盒子

因为「3点菜单」图标视觉上更窄,它有一个更小的点击区域。但如果单纯让可点击区域保持统一,就会造成视觉上的不平衡,造成图标之间不均匀的间隙。

所以我们不得不妥协,稍微打破了 Material规范,让它更容易点击和视觉平衡。

是的,我花了整整一个星期的时间盯着看不见的盒子,会有人注意到吗?很可能不会,值得吗?值得,有2000000倍的效果啊。

七、用一个盒子来规范它们

在我通过遍历 UI 中的所有文本、颜色和图标建立了足够的信心之后,我准备处理 omnibox。

我们想找到一种方法来巧妙地强化 Chrome 的品牌——考虑到我们的 logo 很少出现在我们的 UI 中,我猜想这会是一个挑战。我做了几十个看起来很有希望的设计,却发现没有一个是可行的,因为它们都缺乏有力的支持理由。

所以,我回到我们的核心品牌,认真地看了看我们的标识。我注意到的第一个视觉特征是小写的「c」。

这说明了我们品牌的自然随性,所以找到一个友好的形状很重要。我们还使用了与谷歌相同的4种颜色来展示我们的传承性。事实上,Android、Google 和 Chrome 的标志上都有一个反复出现的形状。

圆形

圆形是自然形成的形状,不像矩形,所以他们的视觉认知负担更小。在伦敦住了两年之后,我对这个形状仍然记忆犹新。

当地铁的名字第一次以矩形的形式出现时,火车上的乘客很难将其与海报广告区分开来。因此,1912年,他们在地铁的后面加上了红色的圆圈,以便更容易找到。 Frank Pick 随后将圆圈加入了现代著名的标志中。

△ 图片来自伦敦交通博物馆

我觉得这是对我们 omnibox 的一个很好的隐喻。

它不应该只是告诉你目前的需要,它应该还能帮助你更进一步。

深入观察我们的 logo,我特别注意的形状是这个:

这不正是我们品牌的形状嘛。

它表达了我们的性格,同时表明这不仅仅是一个「搜索框」或「地址栏」,而是一个全新的,友好的东西。

由于鼠标的引入促成了文本框形状,而在移动端,又由我们的手指交互进化了我们文本框的形状,更符合人手的交互操作。

一次偶然的机会,我们还去 de Young 博物馆参加 Frank Stella 的展览,Stella 使用曲线形状的画布打破了标准的矩形框架。和我一样,他也喜欢赛车,在他的作品《Deauville》中,他使用了类似的形状来暗示速度——Chrome 的核心支柱之一。

我赞同现代主义的观点,认为传统的艺术形式对于我们的任务来说已经变得无关紧要和过时了,因此我们将新的视觉设计方向命名为「Modern」。

然后我们探索了数千种设计。

△ 所有Sketch画板

起初,我采用了与最初在移动端相同的方法,使用1dp描边似乎是有意义的。但在执行过程中,它很容易迷失在一片白色的、顶部有搜索栏的网站中,边线在隐身模式下也不能很好地工作,很难与粗粗的轮廓图标相平衡。

我们的一位设计师认为这只是一个线框图。

使用 Material 规范投影也感觉不太合适,因为它并没有解决我们最初看起来只是像一个「搜索框」的问题。底部添加了一个额外的4dp投影,它视觉上看起来很重而且偏离中心。

我们甚至试着把盒子全部移走,但现在元素似乎是随机放置的,一个像以 URL 为中心的改变会带来巨大的工作成本。

结果是,我们的同事也在努力使我们的 URL 看起来更干净,而 Material 2刚刚开始推出。它带来了更丰富的配色,给我们的形状赋予更多的生命力。

△ 之前

△ 更新后的颜色和url

事实证明,具有一致的形状也使得我们的代码不那么复杂,过渡动画更少——设计和效率的完美平衡。

现在,我们准备好了进行测试:成千上万的用户、数月的实验和可用性研究,与我们之前的设计相比,它被评为更「友好」、「创新」、「聪明」,而看起来却毫不「快」或「值得信赖」。

△ M68 to M69

△ 我们为期一年的迭代

虽然我只是花了时间来写这个盒子,但是其实在 UI 的每一处都有十几个故事。

△ 我们全新的「Modern」M69 截图

它是完美的吗?其实还没有,但这不是让我为我们所做的事感到自豪的原因。事实上,我们让 Chrome 变得更小,下载更快——确保我们构建的每一个像素都为下一个更好的设计师铺平了道路。

就我个人而言,当我们的用户研究中的一位参与者说,我知道我们做了一些正确的事情,「这给了我一种更好的平静感,可能会帮助我一整天。」

不仅是因为他们喜欢这个设计,是因为这也是我看待 Chrome 的方式。

我们花了将近一年的时间仔细研究 UI 中的每个像素,因为我们希望设计包装与内在质量能够相匹配——只是希望这次你可能会注意到这不是一个普通的盒子。

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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档