首页

大师都是如何用产品思维做设计

涛涛


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

设计师的价值是什么?

我们在工作单位上是跟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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


贤度法师:龙泉寺的科技实践 | @2050大会

蓝蓝设计的小编

蓝蓝注

在设计龙泉大藏经时,是由贤度法师主持的,一起开会沟通相关事宜,是位高僧,总是随喜赞叹设计的工作,激发了我们的热情,也很开心。

如今贤度法师因8月的事件,离开龙泉寺,是没有想到的。



本文系贤度法师5月26日在杭州2050大会“我带佛陀上火星”论坛上演讲的文字整理稿。


贤度法师,毕业于中科院计算所,现任龙泉寺人工智能与信息技术中心主任。


在演讲中,贤度法师通过人工智能技术在贤二机器僧、龙泉大藏经智能校勘平台等项目中的应用,为大家介绍了当代佛教的科技实践。法师谈到,科学更侧重于对外在世界的探索,而佛教侧重于对内心世界的开发。只有不断向内心深处觉醒,才能够消弭物质和精神的隔膜,才能够在技术飞速发展的今天,找回人本身的价值和尊严。


大家下午好!非常高兴有这样一个机会跟大家一起探讨一些佛法与科技方面的话题。刚刚杨赛给我做了一个简单的介绍,她说她什么都没做好,实际上我在计算机方面也什么都没做好,所以最后选择了做和尚,希望自己把出家这个事情做好,尽其一辈子。我给大家演讲的主题是:佛法的内涵+科技的翅膀=心灵的觉悟。我想先诠释一下这个主题和“我带佛陀上火星”这个大主题之间的关系,因为佛陀嘛——那么佛法,龙泉寺是一个落地的道场,而龙泉寺的科技实践我觉得可以看作是我带佛陀来北京龙泉寺,未来可能还会去上火星。



我先介绍我们现在的一个状况。龙泉寺的科技实践最早要从寺院的方丈学诚大和尚说起。学诚大和尚有一句话,叫“佛教是古老的,但佛教徒是现代的”,我们龙泉寺很多的科技实践都是基于这样一个理念开展的,这是一个总的指导思想。科技实践应该包括两方面,一是科技应用,二是科技研发。我先从应用讲起。


最早龙泉寺,我们学诚大和尚最早用技术干了些什么事呢?第一个就是博客法门,这是科技之用。这个PPT可以看得见,在2006年的时候,师父学诚大和尚用博客不断发龙泉寺生活的点点滴滴——可以看见,左侧的目录——每天大概会有两篇左右的文章。


这些文章都是记录龙泉寺活动的点点滴滴。我们可以内窥一下其中的一些细节。我可以念一小段给大家,看看这些博客到底是些什么。


“为了配合夏安居,我们乙班的教室由内院搬到了现在的斋堂。为了让斋堂的环境更适合作为教室来用,便发心整理一下斋堂的卫生和布局。真正开始干起来,发现活还是挺多的,看来晚殿也就泡汤了,不过心里还是很高兴做这件事情,庄严道场,令僧欢喜,师欢喜!当正在埋头洗钵的时候,听到师父的声音从门口传来,仰起头来时,发现师父和几位法师已经到了斋堂。师父看到我在忙乎,就笑着问:‘你在做什么?’‘师父,我在洗钵,准备腾出一个钵架来,放一个书柜,专门放我们平日里要诵的经书。’”——念到这里可以看得见实际是一些很生活的东西。修行认为就是在学习工作生活之中完成的。不是说要离开生活而修行,就是要在生活之中修行觉悟。我们再往下看,“与师父接触久了,就会发现师父有一个很突出的特点,就是常爱问我们这些弟子一些问题。看起来一些问题的答案是很明确的,但师父还是会问”。比如像刚才这个问题,弟子明明在洗钵,但还是问弟子在做什么。实际上这样的事情发生在很多地方,师父有时候还会发短信问弟子,“你在干什么?”这个问题“你在干什么”就如同禅宗的当头棒喝,你在干什么,然后你就立马回到现实,我不应该打妄想,我应该活在当下。其实这个小问题就是修行。我们弟子被师父问到这个问题之后,后面这些就是内心活动,一些所思所想。这个法师写到师父通过这样简单的一问一答可以了解很多深广的事实,并且能够了解对方内心的所思所想及心理状态。后面我就不再细念了,我想说的是什么——这些博文都是龙泉寺学修生活里头的点点滴滴。


这些博文后来我们把它结集成册,结集成书,有100本。这100本书,我们送到国内国外很多图书馆和大学,让大家能够通过这些博文了解在北京西郊的一个道场里头的学习、修行,依照佛陀的教导修行的(出家人)生活的点点滴滴。


这样一些法门,有哪些人从中受益了呢?首先,让社会更加了解现代化的佛教修行方式是什么样的。不是很神秘的,也不是很悬乎的,是很真实的内心的点点滴滴,(内心的)提升与感悟,所以这是一个很真实的修行和生活,是内心的感悟。第二呢,我们编辑成册送到海内外,也扩大了汉文化的影响力。因此2016年的时候,师父被评为中国佛教界博客第一人——这个第一,这是第一次我今天给大家介绍的第一,后面还会有。


第二个,微博法门,这还是科技之用。这是师父微博上的一个截图,可以看得见粉丝量已经有98万多了。同步发布了大概16个语种的微博,就是同一个汉语言微博发出来以后,我们龙泉寺有专门的翻译团队,翻译中心把这些汉语翻译成16个语言向全球发布。


我们再来内窥一下微博的一些细节。有人问,也就是我们的网友在微博上问师父,“顶礼师父,请问我参加了公务员考试,笔试成绩出来之前,一直很焦虑,想看,如何面对查成绩的那一刻,该怎么办?”我不知道大家会不会有这样的问题?当你在面对高考,焦急地等待某个结果,很重要的时候,你内心的焦虑、期待,这种心情该怎么去平复?怎么让自己在那个时间还能有一份快乐。看看师父是怎么回答的,“若是尚可为,云何不欢喜?若已不济事,忧能有何益?一件事情,你担忧也好,害怕也好,它总会来到,也总会过去。做好手里的事,每一个过程,每一个当下,都尽心尽力就好了。”所以能够看得见,就这样一句短短的回复,让我们的心在一种期待、紧张、焦虑的状态当中走向平静,能够活在当下。所以这个就是佛法能够给我们带来的一些好处。


第二个例子,有人问,他说,“请问师父,如何面对职业乞讨者?几乎天天碰到。”大家会有这样的问题吗?走在大街上的时候,面对一个乞讨者,你内心是怎样的作意,去思考?你会不会觉得是真是假?要不要给他钱,要不要帮助他?有人就问了这样的问题,师父讲:“看自己的发心,对方是假乞丐,自己也可以真修行。如果不愿意布施财物,也可以布施其它的,比如微笑、鼓励、劝勉、书籍等等,乃至于自己什么都不愿给的话,也可以心里默默发一个愿,未来能够帮助到对方。”所以面对一个境界,看看自己起什么心,是烦恼的心,还是觉悟的心,和佛法相应的心,这个非常重要。所以修行呢,它此时此刻,外在的真和假你很难去判断,但你自己的起心动念,是真实的,善良的还是恶毒的,你自己可以去把控。这是内窥一下微博的细节。那么这个微博的法门呢,一个是更方便地每天发布寺内动态,第二个师父每天早上坚持在互联网上,在微博上去回复社会上各行各业的网友问题,现在也快100万粉丝。并且我们成立了翻译中心,同步发布各种语种的微博,也结集成册《微博答问录》,都是可以在书店里看得到的。


第三个,动漫的法门。这个卡通人物大家认识吗?大家认识贤二吗?这个是贤二的配角,就是和贤二打擂台的,叫赵小翠。贤二是怎么说赵小翠的,“虽然你有缺点,但勇于改正,所以大家更喜欢你。”其实我觉得我们说贤二,都讲,人人都是贤二,因为贤二他是一个有缺点的人,不是一个圣人,他周围的人都是活生生的人,他也有自己的性格特点,也有他的缺点,但是他勇于改正,所以它是不断的鼓励大家,通过修行来提升自己。贤二这个动漫法门我们也是做了很多,像不断地出动漫,然后动漫的视频啊。这是一个动漫的视频叫《谎言的代价》,它是在教育孩子不要去说谎。这是贤二律师以及孩子他爸,他讲不爱读书,但经过教育以后呢,他就喜欢上读书,并且不说谎。贤二动漫是龙泉寺的出家法师在师父的指导之下,以社会大众喜闻乐见的方式向社会传播佛法。讲到这儿,这三个法门其实都还是科技之用,后面要进入到科技的研究乃至于去研发。


贤二机器僧的法门。接下来就介绍贤二机器僧,底下这两个是一代的、酷酷的贤二,第二个是贤二二代,比较高个,胖胖的贤二。


机器僧2015年10月份一代亮相。16年的时候,突然人们发现北京西郊寺院里面竟然有一个人工智能机器僧,大家猛然就觉得这个寺院是怎么回事,怎么会在人工智能元年的时候就已经于此之前研发出来一款人工智能机器僧,非常的好奇。贤二也因此被广泛关注和报道,成为网红,并且于16年10月份的时候发布了二代。我们也即将发布第三代,贤二开始在不断升级。这是贤二实体的机器僧,同时我们还有虚拟的机器僧,就是基于微信公号的聊天机器人。在我们门口有贤二的二维码,大家可以去扫,扫完以后去关注它。不要以为它只是一个简单的公号,它背后有强大的对话能力。对话的基本语料是前面介绍的师父在博客、微博上和网友互动的问答对,同时加上我们义工的补充,成为贤二的大脑。然后我们再用人工智能、用深度学习、用自然语言理解,把这些语料加工之后,你可以去互动。所以一会儿大家可以去关注一下,和他去聊天。除了中文之外,还可以用英文来聊天。这是后台用户的数据分析,目前有139万粉丝,快到140万粉丝了。每月的增长量在1万7千人左右,所以大家也可以贡献一份啊。


这个对话机器人,它其实就是因为佛法能够帮助我们解决学习、生活、工作中种种烦恼。并且除了这些社会大众从中受益之外,我们的义工团队在参与过程中,也学会了像贤二一样说话,不去伤害别人,给人鼓励、给人抚慰、给人慰藉,所以这些义工们从中收获非常非常大。而且我们即将推出3D聊天小程序,敬请期待。


我们接下来说到科技之研究,因为前面是讲科技的应用。大藏经就是我们龙泉寺利用科学技术整理佛教的文献。


大藏经是佛教文献的总集。佛陀所讲的法最根本的依据就是来自于大藏经。我们希望把古来历朝历代的大藏经都进行比较完整系统的整理,然后发布到网上去。这个过程如果搞古籍的同学可能会比较了解,包括版本校对、校勘、标点等等。这个过程当中哪个可以用得上人工智能呢?大家可以看一下这个视频。这个视频展示的是我们做的一个古籍OCR的人工智能引擎。用人工智能的方法对古籍进行识别。目前我们已经把《永乐北藏》《乾隆大藏经》和《六十华严》进行了处理。


可能大家不是特别了解大藏经。我简单说几个数字——大藏经大概有二三十个版本,少的有5000多字,多的1.25亿字,所以这个规模是非常庞大的。我们现在有OCR技术,非常成熟,但是一旦把这个技术应用到古籍领域,就会发现它处理不了,为什么?古籍所面对的字种,古人所用的生僻字非常的多,大概有几万字,而我们现在常用的字,根据国家通用汉字规范表,一级字表也就三千多字,二级字表有六七千字,足以覆盖我们日常说话、写书、出版用到的,这些字也就六七千个。但是实际上这个事情一旦到古籍领域就打不住,它有几万个字,这些都给OCR带来非常大的难度。能看得见,这个是我们利用技术对版面进行分析并且进行切割以后的一个效果。这是我们不同版本的大藏经,每个字都用算法技术切出来,然后把它们转化成对应的文字。这个视频左侧是一个自动处理的过程,能看得见红色的框在往前进,右侧文字自动识别。这是为了动态展示的一个效果,所以做成这样,实际上它一张照片处理的速度比这个要快。


另外我们也研发了龙泉字库。为了解决生僻字的问题,我们自主研发了龙泉字库,比如遇到这样的字,大家认识吗?如果遇到这样的字需要解决,怎么办?那么我们自己研发了一款龙泉字库,可以看得见这个字库的工作界面。我在检索框里只需要输入单人旁和部首,左侧的部件面板可以帮助我们,能看见包含这两个部件的所有字,大概有342个。这是两个部件,部件笔画输入法的长处是,除了输入部件之外,对于你无法输入的部件你还可以输入笔划,比如说剩余笔划是0,输入0以后,表示除了这两个部件外,我不包含任何部件了,因此马上结果只有一个,可以很迅速、地找到我想要的字。这个字库背后的总量有16万字,非常的庞大。可以看得见,进一步这个字会把我引导到字典的界面,它是“佛”的异体字,在古人来讲这个字就是“佛”字。


然后我们研发了一个基于藏经的工作平台,把人工智能和人结合起来,一起去完成古籍的校对、校勘这样一个工作。这边是几个界面的展示。


那么实际上我们做这个事情也花了好些年头。最早也和藏经、古籍的工作单位交流,比如台湾的法鼓山、佛光山等等。我们也和国内知名的高校、企业就人工智能进行藏经古籍电子化这个主题进行交流和合作。龙泉字库和藏经工作平台是我们自主研发的,这个基于人工智能的OCR引擎是我们合作研发的。


以上就是龙泉寺科技应用与实践的一个概览。我再进一步给大家介绍一下,我们龙泉寺,一个寺庙,一个道场,出家人为什么会去做这个事情?它背后是怎样一个理念?也就是我们师父是怎么想的?贤二机器僧是出家法师创造出来的,适合现代人审美的佛法符号,也就是说贤二机器僧它实际上是一个传播佛法的符号,一个IP。它的目的是什么?是希望提醒我们用自己的内心来创造,服务于我们的生活和社会。如果忽略内心世界的建设,我们所开创的所有科技事业都有可能成为伤害和毁灭我们的技术。贤二机器僧提醒我们,科技要服务于人类,服务于内心。我们希望建立、探索和完善汉传佛教体系。大藏经这个工作只是目标的起点,首先做文献的整理,它背后更希望能够建立汉传佛教的修学体系,让佛法能够广为传播。


那么出家人和在家人一样,其实在接受科学带来便利和物质利益的同时,也在接受着前所未有的挑战。比如说互联网时代下的群体性孤独。互联网时代有一句谚语,叫“世界上最远的距离,就是我们俩虽然在一起,但是你却在玩手机”。就是科技给我们带来便利的同时,也会带来很多的问题,我们怎么去认识科技?从佛法的角度,我们不是要抛弃科技,或者贬低它的价值,而是给它找到正确的定位。我们应该思考如何享受现代文明带给我们利益、便捷、的同时,不让科技带来负面乃至于有害的影响。科技有工具的价值,但是缺乏目的的价值。只有不断向内心深处觉醒,才能够消灭物质和精神的隔膜,才能够在技术飞速发展的今天,找回人本身的价值和尊严。

其实走到现在这样一个时间节点上,人们常常会去思考这样一个问题,人工智能的到来,会让我们很多人都失去工作,我们人的价值何在?那么我们这边也有一个提法,或者是从佛教的角度能给出一些参考。


科学更侧重于对外在世界的探索,侧重于物质的发展,而佛教侧重于对内心世界的开发,侧重于心灵的发展。其实佛教和科学从来不矛盾,它们各有侧重,它们却同样面对我刚才所提到的这个问题。科学和佛教一起面对这个社会的问题。什么样的问题?就是科技过度发展带来的问题,比如说环境污染,环境的问题,比如说工作压力带来的紧张、焦虑、自闭等等精神的问题。这些环境的问题也好,精神的问题也好,不光科技要去面对,整个社会都要去面对,佛教也要去面对。共同面对这样的问题的时候,佛教能给出什么样的建议?给出什么样的参考呢?

我们回过头去看一看人类的发展历史。在农业时代的时候,我们是一种神文化。大家对于自然现象无法理解,就有这样一种神文化的存在。那时候人们的价值体现何在?体力,就是不断去耕种、劳作。在工业时代,乃至于现在信息时代,文化是物文化,物质发展的一种文化,对物质的发展、追逐。那么人的价值何在?当工业时代把人从体力之中解放出来以后,人的价值从体力劳动转向了脑力劳动,不断去发展这种知识、发展科技。那么现在人工智能时代来临以后,会发现人的脑力劳动也将被取代。翻译呀,各种简单的流水线上的工作,都将被取代。脑力已经不再成为人的价值的一种体现以后,会走向哪里?


从佛教角度,我们提出了心文化。学诚大和尚提出心文化的概念,就是说你会发现还是有些问题无法解决,就是我前面所讲的共同面对的这些问题,环境、心理、精神这些问题,谁去解决?佛教可以去解决,心文化可以去解决。人的价值何在?心力。


佛教对于心的认识,从佛教唯识的角度上讲,就是八识,眼耳鼻舌身意。前六识都比较好理解,佛教还有末那识和阿赖耶识,就是说在我们这些浅表的意识之下,我们每天会有所思所想。面对各种人事物的境界,在这些浅表的思维意识之下还有更加深广的内心世界。在佛法唯识的角度,就是末那识和阿赖耶识,那里蕴藏着宇宙人生的奥妙,而这是佛教可以贡献的。当然今天由于时间的关系,我不再展开,到底八识是什么。


所以当面对这样共同问题的时候,我觉得佛教与科技应该携手,理应携手。回到我的标题,佛教的内涵+科技的翅膀=走向心灵的觉悟,好,我的介绍就到这里。

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

涛涛

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

编者按:微视作为今年腾讯对抗抖音的核心产品,其重要性不言而喻。在短视频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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

UI设计中如何配色?

用心设计

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


颜色跟其他事物一样,使用需要恰到好处。如果您在配色方案中坚持使用最多三种基色,您将获得更好的效果。将颜色应用于设计项目中,要保持色彩平衡,您使用的颜色越多,越难保持平衡。


颜色不会增加设计品质 - 它只是加强了设计的品质感

                                      --皮埃尔·波纳德(Pierre Bonnard)




60–30–10 规则


室内设计规则是一种永恒的装饰技术,可以帮助您轻松地将配色方案放在一起。 60%+ 30%+ 10%的比例是为了保持颜色平衡。这个公式非常有用,因为它创造出一种平衡的感觉,并允许眼睛从一个焦点到另一个焦点舒适地移动。 使用也非常简单。


60%是主色调,30%是副色和10%用于强调色。


e1f458de0ea5a801219c77abf06a.jpg


墙面漆(60%),家具(30%),配饰(10%)


颜色的含义


几个世纪以来,科学家已经研究出某些颜色的生理效应。 除了美学,颜色也是情感交流的创造者。 颜色的含义可能因文化差异而不同。这就是为什么你看到时装店铺的设计是黑白配色。 他们希望看起来优雅而高贵。


a18858de0ebca801219c77eecdb0.jpg


Asos采用纯黑白配色搭配绿色按钮设计,这种配色是有原因的。


  • 红色:激情,爱,危险

  • 蓝色:平静,负责,安全

  • 黑色:神秘,优雅,邪恶

  • 白色:纯净,沉默,清洁

  • 绿色:新生,新鲜,自然


首先考虑单色设计


在项目设计初期,我们通常倾向于尝试不同的颜色进行调整,但这种行为会很快违背你的初衷,当你发现的时候,已经花费了3个小时调整基础色...这确实很诱人,但你应该学会避免这种态度。

相反,你应当专注于元素的间距和整体布局。它会节省你很多时间。 这种约束是非常有成效的。从另一方面讲,它看起来并不乏味。如果你想让整个作品看起来更好,尝试不同的颜色选择。


43da58de08aaa801219c7791a8c3.jpg


我在追波(dribbble)上的作品之一。简约单色处理,专注于元素之间的使用。


避免使用灰色和黑色


我学到的最重要的颜色技巧之一是避免使用灰色等不饱和色彩。 在现实生活中,纯灰色几乎不存在。 黑色也是如此。

b6d358de08d0a801219c7750613e.jpg

这张图片最黑的颜色不是#000,而是#0A0A10


始终记着给你的颜色增加饱和度。潜意识里会显得更自然,为用户所熟悉。


667258de08f5a801219c77147ee4.jpg


相信自然


最好的颜色组合来自大自然。 他们看起来总是很自然。 寻找颜色设计的解决方案,最好的办法是调色板总是发生变化。


为了得到设计灵感,我们只需环顾四周。


975d58de0910a801219c7714bed0.jpg


保持对比


一些颜色相互融合,而其他颜色一起使用会发生冲突。 有一个明确的规则,想要了解不同颜色之间如何融合,最好的办法是观察一个色轮。 你应该知道这个方法,但是没有必要动手操作。


f09d58de095fa801219c77f5485c.jpg


获取灵感


当我们在谈论UI参考时,dribbble是最佳选择。它还具有通过颜色搜索的工具,所以当你想对其他设计师使用特定颜色进行视觉研究时,然后去这里:dribbble.com/colors


5ce458de097ba801219c77aa763e.jpg


视频,平面广告设计,室内设计,时装......有这么多鼓舞人心的地方可供收集。如果说根本就没有配色参考,那一定是懒惰的原因,把那些调色板保存下来,一切看起来都非常有趣。


通常我喜欢从KPOP(韩国流行音乐)视频剪辑中选取颜色,他们看起来很华丽。


配色工具推荐


为了方便起见,我搜集了一些最好的配色工具可供选择,在2017年获取调色板,他们会为您节省大量的时间。



Coolors.co


这个绝对是我最喜欢的取色工具。 您只需锁定所选颜色并按空格即可生成调色板。 Coolors还可让您上传图像并从中调出调色板。 很酷的事情是,你不仅仅是一个结果,而是有一个选择器,允许你修改参考点。


a68a58de0c65a801219c77885e56.jpg



Kuler


这款Adobe旗下的配色工具已经和我们在一起了很长时间。它在浏览器和桌面版本中都可用。 如果您使用的是桌面版本,则可以将配色方案导出到Photoshop中。


296e58de0c83a801219c77fbb98e.jpg


Paletton


它类似于Kuler,但不同的是,您不仅限于5个色调。 当您拥有原色并希望使用其他色调时,您可以使用这款很棒的工具。


92ba58de0c94a801219c77d2592b.jpg




Designspiration.net


试想一下,你有自己的配色的想法,但你要看到几种颜色组合的例子。 Designspiration是一个伟大的工具。 您可以选择最多5种颜色,并搜索符合您的查询的图像。 真的很好,不仅用于找到具有特定调色板的图像,还可以在设计中实现它们。


52a358de09e9a801219c774d8bb5.jpg


ShutterstockLab Spectrum


你可能会问:如果我想用我所选择的颜色搜索照片? 那么,Shutterstock有一个叫做Spectrum的工具,你可以用特定的语气搜索照片。 您甚至不需要订阅,因为具有水印的小预览图像将足以生成调色板。


cc6c58de0a22a801219c77af34c9.jpg


Tineye Multicolr


但是,如果你想搜索照片中的颜色混合,甚至指定每个颜色的数量,那么Tineye会帮助你。 本网站使用了来自Flickr千万张共享图像的数据库。

64dd58de0aa0a801219c77382a00.jpg



最后的想法


掌握配色技巧是一件苦差事,特别是在数字时代。 上面提到的技巧将会减轻工作中寻找正确颜色方案的困难度。 学习创造令人惊叹的配色方案,最佳方法是练习,让自己有所帮助,用玩的心态去使用颜色。


以上是本篇文章全部内容,感谢您的阅读,希望对您设计产生帮助。



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

调试移动端网页工具Weinre使用整理

seo达人

一、Weinre 说明



Weinre的本意是Web Inspector Remote,它是一种远程调试工具。功能与Firebug、Webkit inspector类似,可以帮助我们即时更改页面元素、样式,调试JS等。



使用Weinre工具,Weinre的本意是Web Inspector Remote,它是一种远程调试工具:



1.它可以将远程的页面经过代理在PC上调试页面元素、样式,JS。



2.可以监听页面内部的Ajax请求等。



3.可以监听页面加载成功时候的Console控制台输出



官网首页:http://people.apache.org/~pmuellr/weinre/docs/latest/



Weinre的原理







三个端的含义:客户端(client):本地的WebInspector,远程调试客户端。服务端(agent):本地的HTTPServer,为目标页面与客户端建立通信。目标页面(target):被调试的页面,页面已嵌入weinre的远程js。



调试过程:



客户端将指令(请求DOM、执行js)post到代理服务端,目标页面定时(大概5s)从服务端get指令,然后将结果post回服务端,最终客户端定时从服务端get结果。



PS:由于Weinre的客户端是基于Web Inspector开发,而Web Inspector只兼容WebKit核心的浏览器,所以只能在Chrome/Safari浏览器打开Weinre客户端进行调试。





二、Weinre安装和使用



1.weinre是基于NodeJs,因此首先要安装NodeJs,然后使用npm命令安装weinre



npm -g install weinre

2.运行,启动weinre服务器,默认端口8080



node.exe node_modules\weinre\weinre --boundHost -all-

node.exe node_modules\weinre\weinre --boundHost  192.168.1.125 

在windows下,系统防火墙可能会弹出是否允许其访问网络的提示,点击充许即可。

3.从浏览器访问,http://localhost:8080,或者,http://192.168.1.125:8080,显示如下表示启动服务器监视成功











三、Weinre需要监听调试的Web页面配置处理



1.在所有页面引入js文件



2.特别说明,当前js文件的域名需要指定为本机的IP地址,因为在手机模拟器中无法访问电脑‘localhost’



















更多:



cordova-plugin-whitelist 协议白名单配置整理 



VS Code插件安装位置



Visual Studio Code插件之Atom One Dark Syntax Theme



相关参考文章:



http://blog.csdn.net/freshlover/article/details/42640253



http://www.cnblogs.com/diva/p/3995674.html

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

豆瓣API实践项目-前言-0

seo达人

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

这是一个 app从获取获取数据 用于显示的经典实践项目,数据来源于 豆瓣官方公开的api接口:https://developers.douban.com/wiki/?title=movie_v2



先上图:

      

   





项目使用了如下第三方library:

下拉刷新:Android-PullToRefresh

网络数据加载:android-async-http

图片加载:universal-image-loader



后面的博客,会把项目的制作流程发出来

豆瓣API实践项目-前言-0(可下载源码): http://blog.csdn.net/mario_faker/article/details/79618210

豆瓣API实践项目-数据api接口-1:http://blog.csdn.net/mario_faker/article/details/79618235

豆瓣API实践项目-搭建项目基本框架-2:http://blog.csdn.net/mario_faker/article/details/79618245

豆瓣API实践项目-导入第三方library-3:http://blog.csdn.net/mario_faker/article/details/79618261

豆瓣API实践项目-单页细讲4: http://blog.csdn.net/mario_faker/article/details/79618272

豆瓣API实践项目-apk打包:http://blog.csdn.net/mario_faker/article/details/79618291





项目源代码下载地址:

http://download.csdn.net/download/mario_faker/10253201

或github:https://github.com/MarioFaker/DBMovie

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

做人就象是一家客栈

蓝蓝设计的小编

作者:鲁米

做人就象是一家客栈

每个早晨,都是一位新来的客人

喜悦、沮丧、卑鄙

一瞬的觉悟来临

就像一个意外的访客

欢迎和招待每一位客人!

即使他们是一群悲伤之徒

来扫荡你的客房

将家具一扫而光

但你要款待每一位宾客

他或许会为你打扫

并带来新的喜悦

如果是阴暗的思想、 羞耻和怨恨

你也要在门口笑脸相迎

邀请他们进来

无论谁来,都要感激

因为每一位都是

由世外派来

指引你的向导

Android5.0以后,materialDesign风格的加阴影和裁剪效果

seo达人

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

5.0以后,materialDesign风格,出现了立体这种概念,高光,阴影,也就是Z轴,凸显层次;同时,裁剪view也变得方便简单了很多。
1,先说说阴影的实现。
方案1:在xml中设置 
xml中设置有两个方式,android:elevation="2dp" 
android:translationZ="2dp"这两句代码是可以同时并存的,而且是叠加的效果;当然只使用其中一个属性进行z轴的阴影设置也是OK的。

方案2:在代码中设置 
(下面说这个实现方式,其实就是轮廓的实现)

设置阴影,有一个需要注意的地方:
①:view的大小要比它的父布局小,才会有阴影效果,如果相同大小,是看不到阴影效果的; 
②:给图片设置阴影的时候,如果这种图片的background属性是shape,那直接通过xml设置阴影是OK的,但是,如果是一张png或者其他格式的图片,直接通过xml设置android:elevation="2dp" 
android:translationZ="2dp"阴影是看不到效果的,得通过其他代码设置才行。。。**

2,view的轮廓,轮廓其实也是阴影
默认情况下,所有的view都是矩形的,虽然可以给view设置背景圆形的图片,即可以在界面显示出圆形的内容,但是view的大小实际上依然是矩形,并且设置的图片实际上也是矩形的,只是圆形以外的区域是透明色。 
如果根据view大小来生成对应的阴影,就会出现很奇怪的效果,(一个看起来圆形的view展示出的确实一个矩形的阴影)我了解决这个问题,view增加了一个新的描述来指明内容显示的形状,这就是 轮廓

轮廓的实现
①通过shape设置的背景,view会自动根据shape的形状进行轮廓判定,
②通过color设置的背景,view默认其轮廓和view的大小一样。
③但是通过图片进行背景设置,view则无法获知轮廓的形状,这个时候就需要手动进行指定了。
1
2
3
一:在xml中可以通过android:outlineProvider来指定轮廓的判定方式: 
1,none即使设置了Z属性,也不会显示阴影 
2,background会按照背景来设置阴影形状 
3,bounds会按照view的大小来描绘阴影

**对于①和②这种情况,也是可以通过设置`android:outlineProvider`
来改变阴影的形状以及轮廓外观的。**

对于③这种背景是一张png或者其他格式的图片的情况,
`android:outlineProvider=“background”`
是没有效果的,属性设置成`android:outlineProvider=bounds`
虽然也是有效果的,但是阴影轮廓是一个方形的轮廓,
并不是我们想要的效果了。

不设置`android:outlineProvider`属性就更没有效果了。
1
2
3
4
5
6
7
8
9
10
对于这种使用了png图片作为背景的view加阴影轮廓的时候情况解决办法也非常简单,解决办法就是:
就通过Java代码设置,也就是说,一个圆形的png图(我们知道,看起来是圆形的,
但是它其实还是方形的图片,只是圆形之外的区域是透明不可见的),
 通过Java代码设置轮廓,就会显示出圆形的阴影轮廓了。
1
2
3
具体实现,继续看: 
二:在代码中,课通过setOutlineProvider来指定一个view的轮廓。 
对于③这种情况在代码中设置轮廓才会有效果。

TextView textView= findViewById(R.id.tv);
ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
         //x,y轴表示位置,后两个参数表示长,宽 
               outline.setOval(0,0,textView.getWidth(),textView.getHeight());
            }
        };
textView.setOutlineProvider(viewOutlineProvider);
1
2
3
4
5
6
7
8
9
强调:
如果采用圆形图片作为背景,即使在xml布局中指定android:outlineProvider=“background”,也不会显示阴影,设置为android:outlineProvider=bounds,虽然也有效果,但是效果很差,所以一般都是通过代码来指定轮廓显示。

1,一个shape圆形作为背景,设置阴影,设置android:outlineProvider的4种属性的效果:


2,一个圆形png作为背景,设置阴影,设置android:outlineProvider的4种属性的效果:


3,一个png作为背景,设置阴影,通过代码设置的效果:


3,view的裁剪
裁剪,默认的ImageView是矩形的,很多时候,需要的是圆角的ImageView或者圆形的ImageView,这就需要裁剪view了。

实现,裁剪圆形:

final TextView textView= findViewById(R.id.tv);

ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                //设置圆形oval
                outline.setOval(0,0,textView.getWidth(),textView.getHeight());
            }
        };
//设置裁剪
textView.setClipToOutline(true);
1
2
3
4
5
6
7
8
9
10
11
实现,裁剪圆角矩形:

final TextView textView= findViewById(R.id.tv);

ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                //设置圆角矩形
               outline.setRoundRect(0,0,view.getWidth(),view.getHeight(),25);
            }
        };
textView.setOutlineProvider(viewOutlineProvider);
//设置裁剪
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档