首页

第三方支付行业发展已到下半场,产业服务商成为升级方向

资深UI设计者

微信支付、支付宝支付这些常见的支付方式都属于第三方支付,而在互联网发展的下半场,第三方支付会走向何方呢?本文以第三方支付未来发展变迁方向洞察为重点,分析内容主要包括了第三方支付行业发展变迁盘点和第三方支付行业变迁方向预判。

01 第三方支付借势起飞,4.0时代为社会发展提供核心动力

1.0时代:第三方支付开始起步,商业模式单一限制行业发展天花板

1999年,随着首信易支付的成立,我国的第三方支付业务开始正式起步。这一阶段,我国第三方支付行业的监管相对混乱,行业的进入门槛也比较低;第三方支付公司在当时所起的作用仅仅相当于支付通道,商业模式单一,业务增值空间有限。加上该阶段电子商务在我国尚处于市场起步期,消费者对于第三方支付的整体接受程度依旧不高。因此,当时我国第三方支付行业整体的交易规模和增速均不突出,不同第三方支付公司之前的产品同质化问题较为严重,企业之间的竞争较为激烈。一些规模较小、商业模式不清晰的第三方支付公司的业务体量随之开始出现萎缩。

供需两端双向发力,第三方支付交易额快速增长。

供给端,线上交易领域,支付宝在2005年首次提出了“担保交易”的概念。这一概念的提出不仅提高了消费者对第三方支付平台的信任,也进一步拓展了第三方支付公司的业务想象空间。线下交易领域,拉卡拉从2007年开始大力进行线下便民支付点的建设和信用卡还款业务的推广,充分满足居民日常的支付需求;需求端,电商、在线航旅等行业的发展成熟也推动了消费者对于第三方支付的相关需求。在供需两端的双重作用下,2008-2010年,我国第三方支付行业的交易额连续3年增长率超过100%。

2.0时代:牌照正式发放,第三方支付行业进入合规发展阶段

随着行业的发展和成交额的快速攀升,依然处于监管空白期的第三方支付行业开始出现挪用资金、非法套现等一系列的行业问题,监管层也开始逐渐加强对于第三方支付行业的监管。2010年,央行出台《非金融机构支付服务管理办法》,确立了第三方支付相关的配套管理办法和细则;2011年,央行正式开始发放第三方支付牌照,拉卡拉等公司成为首批持牌展业的第三方支付公司,我国的第三方支付行业开始正式进入合规化发展阶段。

支付机构积极响应监管要求,相关企业开始移动支付试点。

为第一时间获得对应的支付资质,众多支付机构积极对监管的要求予以回应,努力满足监管的相关规定。

随着网络的逐渐进步和智能手机的问世,通信运营商、银联等机构纷纷开始进行移动支付的试点,国内的移动支付开始逐渐起步。2011年11月,支付宝正式推出了手机APP二维码支付业务,二维码支付正式在国内亮相。

3.0时代:硬件、场景快速成熟,二维码借自身优势成功上位

伴随着移动互联网的发展和智能手机等硬件的逐渐成熟,打车、外卖、理财、红包转账等手机端的交易场景开始接连出现,居民对于移动支付服务的相关需求开始迅速攀升。各家支付机构也开始加快移动支付相关技术的研发和市场推广。在这一过程中,二维码凭借着自身编码范围广、传播制作成本低、容错率高、识读方便等一系列优势成功上位,逐渐成为市场上最为主流的移动支付方式。

交易规模迅速攀升,支付机构全面拥抱移动互联网。

随着场景、硬件的日趋成熟和居民对移动支付认可度的快速提高,我国移动支付市场的交易规模也迎来了爆发式增长。根据易观分析数据显示,2015至2017年,我国移动支付市场交易规模的增速连续三年超过100%, 2017年的交易规模增速更是达到了208.7% ;交易规模的飞速增长也加速了相关企业的业务布局。拉卡拉、中国银联等支付机构先后推出了自己的智能移动支付产品,积极拥抱移动互联网。

4.0时代:技术、政策、相关企业协同推动产业互联网发展

随着时代的发展和社会的进步,我国的互联网也正逐渐由消费互联网向产业互联网迈进:技术领域,人工智能、云计算、区块链等技术逐渐发展成熟并被落地应用;政策领域,监管层积极出台关于产业互联网、工业互联网等方面的相关支持性政策,大力扶持相关产业的发展;企业层面,拉卡拉、三一重工、海尔等不同类型的企业均开始进行产业互联网、工业互联网等领域的业务布局,准备以全新的姿态迎接新时代的到来。

1)支付在产业互联网时代将逐渐成为商业社会运行基础设施

随着产业互联网的来临,数据对于各个企业的生产、经营和创新都开始发挥越来越重要的作用。在这样的大背景下,支付数据覆盖用户广泛、真实有效、数量庞大的优势开始逐渐体现。支付数据和支付机构开始在商业社会的运行过程中发挥越来越大的价值。支付也逐渐演变成商业社会运行的基础设施。

02 支付机构拓展增值服务业务,转型综合型产业服务商

1. 第三方支付机构开启转型变革之路,积极寻求自身二次增长

高速发展过后,我国的第三方支付行业迎来了发展变革的十字路口:一方面,受到监管政策趋严、成交额基数增大等原因的影响,第三方支付机构传统支付收单业务的增速开始放缓,业务的天花板逐渐开始见顶;另一方面,随着我国数字经济的发展和产业互联网时代的到来,越来越多的企业开始产生一系列金融服务、营销、风控等方面的增值服务需求,企业服务市场的发展潜力开始逐渐凸显。在这样的背景下,越来越多的支付机构开始深挖自身已有数据资源的价值,积极利用人工智能、云计算、大数据等一系列前沿科技进行企业服务业务的拓展,开始进行由单一支付服务商向综合型产业服务商转型的尝试,积极寻求自身的二次增长。

2. B端企业服务与C端用户深度运营成为支付公司两种升级路径

根据易观分析的观察,目前阶段,我国第三方支付机构转型综合型产业服务商的路径主要有两条:一条是以侧重于B端企业或机构的深度服务,努力为合作的B端企业或机构创造更大的价值;另一种则更加偏向C端消费者的深度运营,通过持续拓展服务场景和业务边界来巩固C端消费者与自身产品之间的关系,并为C端用户提供更加丰富的产品服务。

3. 市场竞争、产品研发等问题将成为支付机构转型阻碍

尽管我国的很多第三方支付机构已经开始进行转型综合型产业服务商的努力与尝试,但是其在转型的过程当中也不可避免的会面临来自产品研发、营销推广、外部竞争、市场成熟度不高、数据安全等各种各样潜在的风险与挑战。

  • 更加激烈的市场竞争:大量的软件公司和互联网企业同样也看到了产业互联网和企业服务市场未来巨大的发展潜力,纷纷开始进行对应业务的战略布局,这可能会使得未来企业服务市场的竞争变得更加激烈。
  • 我国企业服务市场商业模式尚不成熟:目前阶段,我国很多公司对企业服务产品的付费意愿依旧不高,这使得我国很多企业服务公司目前仍然没有形成相对成熟的商业模式,很多企业依旧在持续的亏损。支付机构在进行企业服务业务拓展时可能会面临同样的风险。
  • 更高的产品研发和市场推广风险:B端企业服务产品的研发往往要投入大量相关资源。产品开发周期长,开发难度大;市场营销方面,由于企业服务产品的单价往往偏高,而市面上目标企业客户的数量远远少于C端用户,这也就使得B端企业客户的触达和成单难度更大。
  • 更高的数据安全要求:随着各个企业对数据的重视程度不断提高,数据安全的问题也变得越来越重要。私有化部署往往会需要企业付出较高的时间和人力成本,因此如何以合理的成本在保障客户企业的数据安全也成为支付机构需要解决的重要问题之一。

03 新竞争者入局将再次引发移动支付市场争夺

1. 牌照价值凸显,未持牌公司加速抢购支付业务“入场券”

2011年至今,央行共计发放了9批271张支付牌照,但是在2015年3月之后,央行就基本停止了第三方支付牌照的发放。这也就使得后续的公司只能通过收并购的方式来获得相关的支付资质。第三方支付牌照快速成为市面上的稀缺资源。

根据易观分析不完全统计,2012年至今,我国境内共发生了近100起支付牌照交易案例,国美、美团、唯品会、小米、滴滴、字节跳动等众多企业均通过收并购的方式获得了支付业务的“入场券”。

2. 合规、节约开支和底层数据成为企业获取支付牌照主要原因

易观分析认为,未持牌企业积极收购支付牌照主要是出于以下三个方面的考虑:1、确保自己支付收单业务的合规性,规避潜在的合规风险;2、节省下对应的支付通道服务费用,获得对应的备付金利息;3、获得底层的支付数据,方便企业构建更加详细的消费者和商家画像,进行后续的精细化运营和业务拓展。

3. 新竞争者入场将为第三方支付行业带来“鲶鱼效应”

易观分析预测,拼多多、字节跳动等企业的先后入场将会再次引发移动支付机构对于C端市场的争夺;另一方面,更有实力的市场参与者的加入也将对市面上的独立第三方支付公司产生影响:依旧希望继续独立运营的第三方支付公司在未来将进一步加快自己对于场景和产品服务的建设,努力构建起自身的核心竞争力;而难以构建起核心竞争壁垒的第三方支付公司则可能寄希望于其他公司的收并购需求。

04 泛支付公司掀起登陆资本市场热潮,将成为重要构成板块

1. 进入发展成熟期,持牌第三方支付公司逐渐成为资本市场宠儿

随着我国第三方支付行业的发展,我国的持牌第三方支付公司也进入相对成熟的发展阶段,拉卡拉行业头部企业开始逐渐得到资本市场的关注加码。在这样的背景下,我国的持牌第三方支付公司在近几年开始频繁的登陆资本市场。

2. 产业链上下游公司协同受益,资本市场全新板块开始崛起

随着持牌支付机构陆续获得资本市场认可,同样位于支付产业链上的非持牌支付产业服务商和终端厂商也开始逐渐获得资本市场关注,二者与持牌支付机构共同推动泛支付行业逐渐成为资本市场上一个重要的独立板块。

3. 企业融资热度不减,泛支付上市公司未来阵容将继续扩大

除了拉卡拉等已经成功上市的泛支付公司外,收钱吧、PingPong等公司在近几年均获得高额融资;以银联商务为代表的几家持牌支付机构也在积极的谋求上市。可以预见的是,泛支付上市公司的阵容在未来将变得越来越大。

4. 相关公司获得全新发展机遇,行业整体影响力持续提升

对于泛支付板块中的相关公司来说,获得资本市场的青睐将会为公司带来更加充足的市场关注度、资金等相关资源,也可以推动公司的规范化发展。随着头部公司逐渐得到资本认可,越来越多的泛支付公司在将来也会开始尝试登陆资本市场,整个泛支付板块未来在资本市场的影响力和重要性也将不断的得到提高。

泛支付板块公司获得资本市场关注的积极意义

  • 推动企业发展更加规范:企业接触资本市场可以帮助其进一步明晰产权关系,规范纳税行为,完善公司治理,建立更规范的现代企业制度和更完善的激励机制。
  • 帮助公司获得更多资金和资源:获得资本市场的关注可以帮助支付公司更好的利用资本市场进行融资,获得公司发展必须的资金和相关资源。
  • 有效提升企业的品牌价值和市场影响力:成功上市本身就是公司荣誉的象征。此外,上市也可以帮助公司获更多投资机构,研究机构和媒体的关注,帮助自己获得更多的品牌溢价。
  • 有机会实现公司股权的进一步增值:对上市公司来说,自身的表现可以直接反映到股价上,表现良好的公司也更容易获得更高的市场估值,从而帮助自己更好的进行资本运作。提升行业整体的影响力,推动行业整体发展:越来越多的泛支付企业登陆资本市场可以帮助整个板块提升自己在资本市场的影响力;整个行业也可以凭借资本的助力实现进一步的发展。

05 海外市场将成为支付机构增长新引擎

海外市场前景依然广阔,支付机构积极构建全球业务版图。

除了继续关注国内市场的发展外,不少支付公司也已经将自己的目光转移到了海外市场。相关需求方面,随着留学、旅游、购物等海外消费的快速发展,我国居民和商户对跨境收付款的需求增长明显;市场想象空间方面,以东南亚市场为代表的移动互联网和移动支付依然处于快速发展阶段,整个市场依然有着不小的增量空间;从产业成熟度的角度来看,我国移动支付的相关技术和商业模式已经非常成熟,具备进行海外输出的能力和条件。

06 支付公司拓展跨境支付业务的原因

国内消费者和商户跨境收付款需求增长明显:

  • 根据国家统计局和易观分析数据显示,2019年,我国跨境进口电商交易规模、居民因私出境人数及出国留学人数相较去年分别增长15.8%、4.6%和7.2%;
  • 根据易观分析相关数据显示,2020年我国B2C类跨境出口电商通过第三方支付机构的收款规模预计将达到7300亿元人民币,相较2019年将增长24%。

东南亚等海外移动支付市场依然有着不小的增量空间:

  • 根据互联网公开数据显示,到2025年,东南亚的数字支付交易规模将突破1万亿美元大关,2019-2025年的复核增长率将达到10%;
  • 根据互联网公开数据显示,越南移动支付用户数量的增长率从2018年的37%增加到2019年的61%;泰国从19%增加到67%,马来西亚从17%增长到40%;菲律宾从14%增长到45%。

我国移动支付市场发展成熟,具备进行海外输出的能力:

  • 根据CNNIC数据显示,2020年上半年,我国移动支付金额继续稳居全球第一,而这也是我国移动支付交易规模连续三年居全球首位;
  • 以拉卡拉为代表的众多国内支付公司在近些年积极进行跨境支付业务的发展,帮助中国的跨境电商企业快速实现资金结算。

1. 自营与合作成为支付机构“出海”主要模式

目前阶段,我国支付机构拓展海外市场有两种比较主要的业务模式:一种是国内支付机构自己直接进行海外相关业务的展业;另一种更为普遍的则是“出海造船”模式,即通过投资或合作的方式寻找本地的合作伙伴进行技术、商业模式的输出或业务的合作推进。

在主要面向的客户群体方面,在国内C端移动支付市场有明显流量优势的支付企业在海外可能同样倾向于C端钱包账户体系的打造和消费者支付场景的拓展;而以拉卡拉为代表的其他支付机构则把业务发展的重心放在了B端商户上。

2. 支付机构“出海”优化用户支付体验,推动我国跨境贸易发展

易观分析认为,对于进行海外购物的消费者来说,支付机构纷纷“出海”可以进一步优化其跨境支付的体验,更好的保障自身的资金安全;对我国的跨境贸易来说,跨境收付款产品服务的升级可以帮助相关企业减少收付款过程中遇到的问题,推动我国整个跨境贸易的发展和增长;对于拓展跨境支付业务的第三方支付机构来说,跨境支付及相关增值服务可以帮助支付机构寻找到新的业务增长点,实现公司的二次发展。

3. 支付公司拓展跨境支付业务所产生的积极意义

对消费者:可以让更多的消费者在海外通过国内的支付APP进行付款,进一步提高消费者跨境收付款的效率,优化消费者跨境支付的体验,更好的保障消费者的资金安全。

对我国的跨境贸易:跨境收付款及相关增值产品服务的升级可以帮助相关企业减少展业过程中遇到的问题,提高自身生产经营的效率,推动跨境贸易企业以及我国整个跨境贸易行业的发展。

对第三方支付机构自身:跨境支付及相关增值服务更高的利润水平和更大的想象空间将使其成为支付机构下一阶段重要的业务增长引擎,帮助支付机构优化自身收入结构,实现营收和利润的良性增长。

4. 支付机构“走出去”依旧需面临监管、业务本地化等多挑战

尽管“出海”在近两年成为支付行业的热门话题,但是支付机构在境内境外跨境支付业务拓展的过程中依旧可能面临来自多方面的挑战。境外业务拓展方面,海外市场的监管政策、宏观环境、用户偏好、业务合作模式和国内可能都存在着巨大的差异,这些外部因素的变化很可能使得国内支付机构之前积累的很多经验并不能发挥足够的效用;相关人才的不足也对支付机构的业务拓展造成了一定的影响。境内业务拓展方面,相比较于传统的境内支付业务,支付机构对于跨境商户的相关资质审核、交易真实性的验证和可疑交易筛查的难度也都会更大。

文章来源:人人都是产品经理   作者:易观分析

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


【交互设计】B端产品中后台列表页设计方法总结

前端达人

接触b端产品设计差不多半年多了,每天面对的都是各种控制台,本次自己试着总结了下工作中遇到的各种列表设计的小tips。


转自:站酷

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

如何设计tabbar主题图标

资深UI设计者

文章来源:站酷   作者:吴小炫


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




从需求分析到上手设计,如何快准狠?收好这3大秘籍

周周

设计师这些年,我一直有个类似“闪电侠”的标签——就是在保证一定质量的情况下,出活贼快。这个特质最大的好处就是每天可以给自己腾出多一点时间做别的,比如我写文章学习(打wangzherongyao),这点哪怕是血汗工厂或没事儿也要996的福报厂也适用。同时它也是不当狗腿子也能获得不错绩效(认可)的一种特质。

今天这篇脱离理论派纯实用性的和大嘎聊聊:如何提升需求分析及上手能力,降低返工率。

分析需求方的动机

和设计师打交道的4个最重要的角色方:产品经理/开发/你的直属老板/你的组内设计成员,每个人都有自己的脾气/处事方式以及鸡血程度,每个人也都带着不同的目的性在做事情。磨刀不误砍柴工,先了解合作方,再了解他们提需求的目的,会让你更快get到正确的需求点。

举个例子,估计大家都遇到过热衷改需求的产品经理,昨天图出了一半,今天他又要改了!

很多铁汁这个时候会抑制不住掀桌的冲动去直接讨伐产品经理,但实际上建议大家先了解更改需求的原因是什么再做打算。比如:是不是他们老板临时又下达了新的旨意?如果是的话是不是建议他们在和老板确认完需求后再提交设计,又或者可以直接拿统计工时和prd返工率导致的整体排期拖延直接与他沟通问题严重性。

最后就算实在不行,建议大家对自己的上级进行清晰的问题反馈,一个好的上级是可以很妥善帮大家解决这些跃级不好解决的问题。不建议在群里硬杠或者直接向他们的老板反馈,因为这样容易制造长期对峙的状态对于我们做任何事情都是百无一利的,所有的交流都尽量以和平相处为主。

再举个例子,老板让铁汁你做个设计自驱的产品优化设计方案ppt。

上手之前,先分析下你老板要这个ppt干啥子。

大部分情况下类似的这种产出目的性只有一个:这是给老板的老板看的,让他觉得设计团队有在好好积极的干事情,且还干出了点东西。那么其实这个ppt的真实需求方其实不是你的老板,而是你老板的老板(业务线负责人:一个可能压根看不懂设计的人)。这个时候如果你把ppt的内容重心放到了设计的细节以及ppt的美化上,就很容易躺枪,也就是累了个半死还不落着好(真实发生在我周边的案例)。

因为看不懂设计的人对于这些东西是没有太大感知的。相反,如果你能注重设计与数据的结合,多放一些前后对比案例以及针对用研去做的设计提案就会是完全不同的效果。

对新需求的快速定位与预判

在开始着手设计前,我们可以先对需求进行基础分析与规划。首先定义好需求的量级/优先级以及排期,接下来就需要根据需求的实际情况判断需要参与的上中下游成员。

举个例子,这里我们收到了一个需求:一个直播app需要在原有功能基础上增加一个直播间的类型(情感解忧节目)。

从需求分析到上手设计,如何快准狠?收好这3大秘籍

那么我们先快速过一遍prd原型,超过3个核心页的明显体验改动,外加上N种小细节状态以及三级页。基本我们可以判定它属于一个中型量级的页面,排期紧急的话大概在3天左右。从原型上看,应该会涉及到交互/ui/运营推广设计/前端+开发这种人员组合。

那么在明白了人员配置之后,需要申请运营推广设计组帮忙设计的部分就需要提前告知给相应的负责人进行提前排期,而对于一部分页面的具体实现方式在不确定的情况下提前和对应技术铁汁沟通。

再举个例子,这里我们希望延续在app里面沉浸式黑色面板的体验,所以新发布的故事也希望做成和常规白色不一样的深色面板。

从需求分析到上手设计,如何快准狠?收好这3大秘籍

但实际上这个新故事发布页面属于非native原生的H5页面,是由前端铁汁操刀的,实现起来并不像原生页面可以直接设置默认背景色。这种时候很多技术铁汁选择直接忽略这个问题去开发,或者直接告诉你进页面的时候会有一道白闪,巴特,解决不了。接下来设计师们很多也会选择返工重改白色版本。

但更且高质的解决方法建议大家先看下竟品和自身app里是否有同样情况解决问题的案例,抽出来摆在他们面前就会比较有说服力,通常情况下不是特别难搞的他们也会争取搞定,你也减少了返稿,保障了用户的体验。

这里很多铁汁可能会说,和他们bibi半天也许最后的结果还是得改稿子,还不如我直接改了来得快。因此这个问题就又回到了第一点,你得先了解你合作方/需求方的秉性,在决定效率优先的前提下这个沟通是否有必要,且控制在多长的沟通时间范围内是性价比最高的。

竞品分析用好了是AK47瞄准镜

很多铁汁想知道该用什么样的方法论去控制自己的输出,好达到专业规范且能很好说服他人的目标。其实无论是分析需求优先级的kano模型/大项目问题挖掘的双钻模型/尼尔森十大交互原则还是设计排版的那些格式塔原理,在做真枪实战中你会发现它们就像一个上真战场厮杀的战士带了把华丽的歌舞剧假刀的感觉。

这个原因很简单,因为他们都是通用方法论。实际工作中我们遇到的项目通常紧急且各有不同的诉求,而通用方法论只是我们的一种知识储备,在我们上手设计时会对我们的设计产生基础的正向引导,帮我们规避一些低级的体验错误,比如莫名其变的交互手势设计or和WCAG色值对比度偏差很大的视觉设计。

但如果我们想要最快速精准的对症下药,那核心武器只有一个——做竞品分析。这里的竞品不是说和你家产品一模一样商业模式的才算,哪怕你家是0-1的产品创新,没有垂直类竞品可以参考,也可以挖掘到很多相似的同类竟品分析细节。

在分析竞品的ui和交互的同时你可以快速get到被验证过的设计方案,还可以补充很多“不成文的”经验,比如为什么有的细节大家都是这样的设计,去度娘搜索一下原因,保证你的经验值又增加了1个百分点。同时拿线上产品多次试验过的经验来做方案参考是相对风险性低的一件事情,这个对于产品和技术也有一定的说服力。

但这里有个特别需要注意的事情,很多铁汁做竞品分析做着做着就变成了抄竟品?

其实没有什么创新是真正的从0-1,哪怕汽车的创造也是建立在马车基础上的,因此该如何有效的做竞品分析,青出于蓝而胜于蓝,是个非常大的课题。

这里简单来说分为3步:

  • 确定哪些是垂直竞品,哪些是同类竞品
  • 对多个垂直竞品进行深入剖析与比对(具体模块的框架/交互/视觉样式)
  • 结合与产品的沟通,判断怎样的升级或过渡带更适合自己产品的设计。


文章来源:彩云译设计     作者:Nana的设计锦囊



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


项目不同阶段 UED如何发力

ui设计分享达人

项目有自己的生命周期,我们作为设计师也应该学会变通,在项目的不同生命周期采用不同的设计策略,脱离现实情况空谈体验往往难以推进……
设计的本质是解决问题,守住内核,保持匠心……

 

文章来源:站酷   作者:小木喵


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

微交互:设计师的超能力

资深UI设计者

微交互在用户体验中占据越来越重要的位置,来看看微交互该如何应用吧~


大概几周前,在他的朋友和孩子们的大力劝说下,我并不那么精通互联网的爷爷加入了Facebook。最后。在我教他设置个人资料,创建帖子和后续页面时,他遇到了一个有趣的事,在尝试摸索页面中不知何故偶然发现了著名的LIKE按钮。他将鼠标悬停在“赞”按钮上,弹出了6个表情符号,然后单击“ HAHA”笑脸,这使他对这个小动画感到敬畏。这就是微交互对产品或应用程序的强大功能。


资料来源:Giphy


我们作为用户,每天都能看到和应用这些微交互,有些甚至没有意识到。“喜欢”按钮是最简单的示例之一。其他几个是:

  • 滚动鼠标时出现的简单滚动条

  • 向左滑动即可清除iPhone主屏幕上的通知

  • 能够看到其他人在消息传递应用程序上“打字”

  • 一个进度条显示下载百分比

  • 拉动以刷新,以在应用程序屏幕上重新加载内容

  • 交互式错误页面,例如Google Chrome和为文章点赞是一些最常见的微交互。那么,为什么这些非常有效?为什么每个应用程序都有它们?


资料来源:Dribbble

一.什么是微互动?

微交互就像与设备的任何其他交互一样,用于将有意义的反馈传达给用户,因为用户必须不断知道执行某项操作时会发生什么。这是一种人们期望发生某些事情的趋势。例如:单击按钮,滚动页面,将商品添加到购物车,向左滑动卡片。

资料来源:Dribbble

这通常是通过提供系统状态(尼尔森的启发式方法)或帮助用户避免常见错误来实现的。当您未填写必填字段时,带有错误消息的红色边框就是微交互。


例如看下面的互动

竖起大拇指— Facebook Messenger


该动画是微交互的一个很好的例子,因为它实现了三个重要功能:

  • 沟通状态并提供反馈

  • 增强直接操纵感

  • 帮助人们看到自己行动的结果


二.微交互的构成

分解

微观互动包括四个部分:

  • 触发器启动微交互。触发器可以由用户启动或由系统启动。

  • 在用户启动的触发器中,用户必须启动一个动作。

  • 在系统启动的触发器中,软件检测到满足某些资格并启动操作。

  • 规则确定了触发微交互后会发生什么。

  • 反馈使人们知道发生了什么事。发生微交互时,用户看到,听到或感觉到的任何东西都是反馈。

  • 循环和模式决定了微交互的元规则。当条件改变时,微相互作用会发生什么?


三.微交互的作用


如果微交互仅仅是微小的设计元素,为什么还要关心它们呢?

很多Web开发人员和设计人员还在问这样一个问题。注重细节是一个优秀网站与普通网站的根本区别。 这些就是使用微交互的原因:

  • 他们改善了网站导航

  • 它们使用户更轻松地与您的网站进行交互

  • 他们向用户提供有关已完成操作的即时和相关反馈

  • 他们给您的用户提示

  • 他们交流有关某些元素的信息,例如是否互动

  • 它们使用户体验更有意义

  • 他们鼓励分享,喜欢和评论您的内容

  • 他们引起用户的注意

  • 最后,它们只是使您的网站更具情感性


精心设计的微交互是用户关心的明显标志。这就是为什么他们如此重视。用户可以做什么,以及他们的行为是否正确并得到系统的批准-应用程序或网站可提供即时的视觉反馈,并教会用户使用系统。

正确进行微互动后,它们往往会给您的品牌带来积极的感觉并影响用户的行为,而人们甚至根本没有意识到为什么这样做。如果您喜欢或不喜欢产品的某个方面,则通常对产品有正面或负面的倾向。这种所谓的“哈洛效果”既可以支持您也可以对您不利。在明智的情况下,这些知识可以帮助改善用户对您网站的反馈-通过适当注意细节,可以使用户满意。


四.什么时候使用微交互

在UX / UI世界中,尽管微交互非常微小,但与用户进行交流时却是强大的动力。以下是最常见的微交互及其对用户体验的影响:


轻滑

“轻滑”动作消除了轻击,并且更具交互性和流畅性。它可以帮助用户在选项卡之间快速切换并获取有关产品的更多信息。此外,轻滑是一种非常常见的手势,可以在不引起用户思考的情况下潜意识地引导用户。就像我们一直在读“不要让您的用户思考”一样,既有趣又令人上瘾。


数据输入

我们所有人都知道设置密码或创建帐户的麻烦。这个动作很容易引起用户反感。关于密码强度和用法的前瞻性建议可以使用户轻松前进,而在输入数据时进行一些交互也可以使用户参与该过程并有助于实现目标。


动画

动画可以简单地启用并改善微交互。他们的存在可能不会被注意到,但是缺席给每个人造成了损失。它们就像胶水一样,可以帮助设计师使最简单的过程变得有趣和令人上瘾。但是要非常小心,因为它们意在吸引用户,而不会使他们分心或沮丧。延迟处理或在网站中引入新样式可能会引起混乱。


当前系统状态

必须使用户了解网站或应用程序上当前发生的状态,这一点很重要。如果不通知用户,他们将很生气并关闭网站或应用程序。微交互使用户可以准确地知道发生了什么,完成该过程需要多长时间等。即使失败消息也很幽默,但有效地保持了用户的信任。


使教程变得有趣

每个人都在不断寻求信息。借助微交互功能的教程通过简化和突出显示基本功能和重要控件以方便用户理解,从而指导用户进行应用程序的工作。


号召性用语

微交互实质上是在推动用户与应用程序或网站进行交互。号召性用语给用户带来了成就感,也给用户行为灌输了同理心,使用户与CTA互动的最佳方法是使CTA吸引用户的兴趣。


动画按钮

通过让用户知道他们通过您的应用程序或网站的方式,它们起到了信息管理器的作用。我们需要注意颜色、形状、特殊效果、动画、位置和纹理,以使用户体验自然而顺畅。


滑动手势

通过使用手势隐藏一些动作项,这些类型的交互可用于节省移动设备上的空间。例如,您可以看到向左滑动将删除电子邮件,向右滑动将存档电子邮件。同样,在锁定屏幕上取消/清除通知。

快速操作

一个简单的快速动作示例就是,当您点击并按住应用程序图标时,在Apple设备上进行3D触摸,它将为您提供用户最常使用的上下文动作项。这样可以节省点击次数和时间。例如,Instagram会呈现诸如相机、新帖、活动等动作。


交流信息

这些类型的交互会分解复杂的信息,并使用视觉,动画将信息轻松传达给消费者。一个完美的例子是解释信用卡上的利息费用。这是一个敏感的话题,Apple Card通过使用圆形互动动画来告知用户和最高费用,再次赢得了客户。


互动参与

有时,您希望用户通过使他们感到惊奇的方式来与界面进行交互。这种令人惊讶的结合动作会更加产生更强大的影响。Robinhood App最近发布了一张借记卡,其候补名单超过一百万。要在候补名单中上移您的位置,用户可以转到其应用并点击该卡(最多60次)。这是使用户与应用程序交互的一种有趣方式。

提供反馈

在用户触发某些内容或输入某些内容之后,Motion可以有效地用于向用户发送反馈。错误状态和成功状态就是这些示例,下面是移动应用程序正确和不正确密码输入的示例。

向用户介绍界面

每当启动具有精美功能的新产品或应用程序时,如果用户发现它太难理解,它终将失败。因此,在此类情况下,应用程序可以利用微交互来向用户介绍功能。例如,N26 Fintech App使用动画来演示用户如何将钱从一个储蓄桶转移到另一个。


引起用户的注意

当移动屏幕上的大部分空间都充满信息时,很难突出显示我们希望用户注意到的特定功能。通过使用动画和过渡效果,微交互可以在为用户带来愉悦感方面发挥至关重要的作用。例如,在Slack上,在您开始键入之前,发送按钮变灰,一旦开始键入,它将变为蓝色,向用户指示这是号召性用语按钮。


使加载屏幕有趣

大多数加载屏幕都很无聊,但是微交互和动画可以将它们变成非常有趣的东西。每当加载或设置过程中有等待时间时,Google都会利用此空间为其用户创造出色的直观体验。这是一个例子:


我们人类一直在努力寻求即时满足。在更大的事物方案中,忽略微交互是一种普遍的趋势,但不可否认微交互对于保持用户对产品的兴趣和好奇非常重要。每个人都说细节就是魔鬼。小小的体验和设计功能(例如在屏幕之间切换或突出显示功能或弹出新通知)可以在增强用户体验方面产生巨大差异。


五.如何设计微互动?

进行微交互对于设计师来说是令人兴奋的,因为可以尝试新的设计解决方案并寻找使用户感到惊讶的新方法。但是为此,您必须牢记以下几点:

  • 把自己放在用户的角度考度,并使用所有您要弄清楚他们如何使用您的应用程序。

  • 创建功能动画。不仅具有美学效果而且能够增强用户体验的动画。

  • 让用户保持愉悦。用户使用该应用程序时的感受是其不断使用该应用程序的原因。如果用户喜欢并感到愉快,他将再次使用产品。

  • 不要打扰到用户。过多的动画会对用户产生相反的影响。令人讨厌的用户使他们远离您的应用程序。

  • 使用人类语言和非技术性语言。有趣的文案可能会让用户暂时忘却应用程序中空白页面的沮丧。


六.设计微互动的工具

那么,设计人员应该熟悉哪些原型制作工具?那里有很多工具,但并不是每个人都知道哪种工具最适合特定的微交互任务。根据我个人设计这些元素的经验,以下是我的建议。

如果你熟悉编码:

  • 手机:Xcode,Android Studio

  • 手机或网页:Framer

  • 网页:CSS动画

如果要创建更详细的交互:

  • Principle,Adobe CC,origami Studio和Protopie

如果要创建详细的交互+动画:

  • After Effects


文章来源:站酷   作者:ZZiUP


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





十年知乎,一体两面

资深UI设计者

作为一个知名的问答社区,知乎已经走过了十年。面对十年间不断变化的用户习惯和互联网环境,知乎都做出了哪些改变?未来,知乎会朝着什么样的方向发展?本文作者从用户构成、内容形态和商业模式各个方面,对知乎进行分析,希望对你有帮助。

一转眼,知乎已经十年了。

2010 年,新浪、腾讯、网易、搜狐都在搞微博,展开抢人大战。当时微博客的形式已经被国外老师 Twitter 证明了成功,而问答类网站的原型 Quora 和 Formspring 才刚蹒跚起步,前途未卜。

很快,新浪微博就带着“围观改变中国”的光环出了圈,但人们真正认识到知乎的威力,还要等上几年。现在,知乎积累了近 4400 万个问题和 2.4 亿个回答,成为中文互联网最大的原创内容策源地之一。

十年间,中国从 PC 互联网迈入移动互联网时代,内容产业蓬勃兴起,网络前所未见地深刻影响中国社会。知乎积累的海量内容,加上每天源源不断生成的新内容,深度参与塑造了中国网民的眼界和思想。

2011 年 4 月 7 日,开站不到 5 个月,社长成为知乎第 6332 位用户。作为一个知乎深度老用户,社长愿意用“两个知乎”来形容自己观察到的知乎十年。

从用户构成、内容形态和商业模式各个方面,我们都能看到相对着存在的“两个知乎”。它们互为表里,共同构成了知乎精彩纷呈的景象。

01 知乎的用户

1.“精英用户”vs 普通读者

2013 年,社长写过一篇《知乎:为“精英用户”服务》,这是航通社最早对知乎的观察文章。知乎符合所谓“二八定律”,创作者只是极少数,绝大部分人都是看客。

根据知乎官方数据,在冷启动的 40 天里,知乎 200 位原始用户创造了 8000 个问题和 2 万个回答,早期邀请注册的用户都有很高的分享欲望和出品质量。所以,为当时还不多的创作者做“私人定制”的服务,成为知乎催化优质内容的选择。

当知乎开放注册之后,原来的“精英用户”可能感觉到知乎的变化,并且不一定适应。有一些人退出,但更多的人进入。

如今的知乎给每个用户都提供了开放易用的创作辅助和数据统计工具,通过想法、专栏、视频等多样形态降低分享门槛,让任何有志耕耘内容,或只想简单分享的人,都能够找到其中的乐趣。算法的进化,也让人们收到的信息流总体上日趋精准。

2. 规则破坏者 vs 秩序维护者

在知乎,有些人出言不逊,大肆骚扰,降低了他人的浏览体验;另一些人从事虚假营销、诈骗等活动,有的已经构成违法犯罪。在其它平台,总有人盗用知乎站内原创内容,转换为视频等其它形式,造成盗版比原版还火,也让创作者们深受困扰。

近年来,知乎不断加大用算法和人工混合处理违规的力度。在中文互联网当中,知乎是最早实现对所谓“阴阳怪气”的不友善言论识别的平台之一,其他平台的互动信息审核很难到如此细的颗粒度。热烈且长尾的评论互动是知乎的重要特色,激励了很多创作者将知乎作为原发平台。

同时,知乎也加大了版权保护的力度,如起诉微博营销号“知乎大神”胜诉等;并主动切入视频领域,让图文作者可以更主动地分享短视频红利。

3. 付费会员 vs 免费用户

知乎对直接付费购买内容的商业模式一直寄予厚望,前后走过付费咨询,音频内容,卖课程等几条路线。经过一阵探索,小说、图书、文字专辑售卖等最终脱颖而出。综合了纸书电子版、纯网络出版、私家课等资源的全包式“盐选会员”,已经成为创作者获取回报的一个重要来源。

2019 年起,知乎将站内优秀网文作品放上会员平台。知乎网文作者出现了月收入超 10 万、单本收入超 60 万的销售记录,那些“刚编的故事”再也不能被等闲视之。

为了推广优质的付费内容,知乎在众多问题下将可能切题的付费内容,以“故事档案局”等官方账号推送,嵌入到回答流当中。在评论区下面,不乏“我就是为看这个而开了会员”的声音。除此之外,原先免费的内容都没有被付费墙挡住,包括原有的海量长尾答案,免费用户的体验也得到了尊重。

02 知乎的内容

1. 非虚构严肃内容 vs “如何评价”和故事

知乎早期的邀请注册制,令它以专业人士的独到分析、独家资源和亲身经历而著称。“认真你就赢了”是当时知乎的流行语。

但在开放注册之后,新用户可能会“水”回答,“抖机灵”也同样获得读者欢迎。一些曾经坚持的编辑规范如“直角引号”,也逐渐变得不那么严格要求,纯粹写作虚构内容的人也在知乎上活跃起来。

知乎决定让喜欢每种不同内容的人,都通过算法推荐而各得其所。针对虚构内容,知乎推出了作者声明功能,同时通过会员付费实现优秀故事的产业化发展。对于仍然愿意坚持“认真”的人,知乎提供“亲自答”标签、学历及工作经验认证,由资深用户发放“专业”标签等方式,且同样辅以内容商业化的激励。

2. 长尾、长保质期内容 vs 即时热搜内容

人们惊叹于知乎居然已经十周年了,也同样对知乎上的“神预言”问答惊叹不已。

2011 年十大热议问题中,足球、晚睡习惯、金庸小说等问题,直到现在依然吸引着大量读者前来“瞻仰”。在 2011 年底一个推荐购买比特币的回答,累积至今获得 4.2 万个赞同。像这样的“预言家”在知乎上还有很多。他们就当时当地的情况写下的内容,可能在几年、十几年甚至更长时间,都始终具有借鉴和参考意义。

随着越来越多的人注意到知乎,每次有热点事件发生时,很容易在知乎找到事件亲历者、行业内人士、专家学者提供多方位的视角和解读,这些信息“养活”了包括航通社在内的不少“自媒体”。知乎热榜成为百度搜索指数、微博热搜、微信指数等等之外,又一个衡量中国舆论场的风向标。

跟保质期长的沉淀内容相比,即时热搜并非“速朽”,而是对“新闻是历史的底稿”这句话的最佳诠释。

3. 专业 UPGC 视频 vs 自动生成视频

知乎切入视频的决心不可谓不大,方式也多种多样,从单独的视频制作工具,到首页为视频开辟独立版块,再到问题页将视频回答单独列出。可以说,有视频创造力的人士将会获得越来越多的展示机会。

知乎也推出了一系列以视频为载体的 PGC 节目,如《职人介绍所》,也有郎朗钢琴课等付费视频课程。不过近期最值得一提的,还是知乎推出的将文字答案一键转视频的功能。这方便了非常多的文字创作者。

任何一种内容形态,恐怕都是最适合该形态的创作者才能玩转。在社长的印象中,很多文字创作者(含本人)是比较内向的,需要长时间的沉淀才能将思路组织出来。而视频更需要外向开朗和具备亲和力的面孔,甚至可以说是对年轻人更友好的。

此外,对长期习惯于文字创作的人来说,视频制作也有一定难度。随着知乎的自动化工具上线,视频的产能将会提升,也可以打击一些将优秀文字内容掐头去尾,再搬运到其他视频平台上的人。

03 知乎的商业模式

1. 谨慎看待商业化 vs 商业化顺势而为

早期的知乎以专业回答著称,读者对于回答与商业内容相结合很难接受,会说这样的答主是“恰饭”。当时,答主只能通过“赞赏”等有限的渠道获得微不足道的收入。这使得知乎虽然拥有日益显著的流量,商业变现能力却长期被外界质疑。

不能找到合适的盈利模式的话,一家商业公司是无法持续经营下去的。好在,随着知乎的用户基数扩大,更多人有机会摆脱单纯读者的身份,自己也成为创作者,体会到答案被人认同的快乐。此时,更多的人学会了换位思考。

近一两年来,特别是 2019 年知乎完成 4.5 亿美元 F 轮融资之后,人们对知乎阔步走向商业化已经习惯,而知乎的探索也终于有了收获,开始找到适合自己的商业路线。

2. 软性植入 vs 好物推荐

很多人信赖知乎一些领域的专业答主,当他们在回答推荐自己信得过的商品时,也会带来跟随购买的效应。不过,由于早期知乎风气使然,如果答主获得品牌赞助进行推荐时,哪怕真的有推荐的充分理由,也不得不小心翼翼,避免被人发现。

2020 年 1 月,知乎“好物推荐”功能全量开放,这同时解决了两个问题:一是在知乎回答看到商品后,不能及时跳转到购买链接,导致决策链条断开;二是答主推荐商品后往往需要读者自行搜索,其中可能弄错关键字或被相近的冒牌误导。更重要的是,它给部分专业答主带来的收益是清晰可见的。

2020 年双 11 期间,知乎“好物推荐”带货内容阅读量突破 8 亿;GMV 相比 618 翻倍,订单量提升 113%。“蓝大仙人”是最经常被提到的“好物推荐”受益者,他专攻的智能电视领域有着得天独厚的优势——有专业门槛,客单价高,销量及咨询需求长期稳定。他的一篇测评文章 GMV 超过 5000 万。

3. 大 V 自发接单 vs 品牌、平台、创作者联动

知乎商业化逐步走向正轨还带来另一个原本未曾设想的改变,就是品牌在知乎有了更多的露出、更真诚的声音和总体上更正面的形象。

知乎首先为品牌方提供了机构认证、品牌提问等能力,让品牌在知乎保持“人格化”运营,提升亲和力,与用户建立互信。而品牌也可以通过平台邀约相关领域优秀回答者,推荐产品,讲述原理或历史故事,以及做出客观评价。

此前,品牌如有此需求,只能绕过平台联系头部资源或 MCN,效率低下也很容易“翻车”。2020 年,知乎将对企业的内容服务打包成“知+”方案,由平台牵头,精准对接热度话题与优秀创作者,盘活存量 UGC 内容,全面激活创作能力。

目前,社长就可以在知乎的创作中心开启“知+自选”内容创作,挑选品牌任务当中自己觉得能写好的,比较切题的来写作。这种“人找品牌”加上以前就有的“品牌找人”,实现了比以往“盲人摸象”式配对更为精准的供需匹配。

需要指出的是,任何形式的品牌赞助内容,在写作时依然要严格遵守知乎社区规范,也要经历读者的考验与事实核查,关乎作者苦心经营的公信力。

04 结论

十年来,知乎的形象和角色不断变化,从一个小众又带点“曲高和寡”的讨论社区,过渡为繁荣而包罗万象的虚拟城邦,以及为人们提供实际帮助的解忧杂货铺。现在,知乎保持着中文互联网最大的原创内容策源地之一的地位,是中国舆论场的重要组成部分。

过去十年,有很多的殊途同归。移动互联网和 PC 互联网逐渐融合,网络与现实社会的鸿沟被填平,科技企业从创新颠覆的光环中走出,向商业的本质逻辑回归。在知乎,作者与读者、知识与故事、内容与商业本是一体两面。十年之后蓦然回首,“两个知乎”合二为一。

正所谓“内容即商业,商业即内容”。知乎十年积累的长尾内容是它最宝贵的资源,最终知乎的商业化道路,也从外围探索收敛回归到内容本身。海量的内容、良性的互动和进入正循环的商业模式,正在为知乎开启下一个十年。

文章来源:人人都是产品经理   作者:航通社

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


接好了!这是你要的6个小众但特别好用Ai技法

周周

软件熟练度属于“器”的范畴,对主要靠作品集吃饭的设计师来说很难对外体现。但是我们不能说它不重要,软件的熟练度依然是设计是否能够产出的重要因素之一!!

今天结合我自己之前的经验,来谈谈AI中的一些相对比较冷门的小干货(很多是我最近才get到的- -),但愿这些快捷操作能帮助你进行产出~~

大纲:

  • 快速调节参数
  • 平行四边形圆角
  • 快速平滑缩放
  • 手柄波浪线
  • 路径快速消除
  • 填充快速消除

快速调节参数

AI中存在很多参数需要我们自己去调节。比如一个形状的宽高圆角,对形状进行变换的旋转、扭曲等参数等等。可能很多朋友跟我一样,要么一个个手动输入要么通过拖动滑块进行调节。

这么做造成的问题有两个,一个是交互的繁琐,一个是参数调节颗粒度过细,在进行往返调试时需要耗费大量的重复工作量。对于我们时间宝贵的设计师来说这种方法简直太弱了好嘛!!

不过这些完全可以通过一个方法来解决——快捷键调节即可!结合shift、cmd(即win系统的ctrl)以及上下方向键完完全全地提升效率。具体的方法如下:

  • 上下方向键:1px为增量进行调节
  • shift+上下方向键:以10px为增量调节
  • cmd+上下方向键:以0.1px为增量进行调节

比如对形状的变换,我们就可以使用上下方向键1px微调,结合shift以10px数调。键入位置通过tab切换。

接好了!这是你要的6个小众但特别好用Ai技法

再比如变换效果的参数,同样可以使用这种方法快速地调试,全程只需要快捷键操作即可。而且这种一边敲击键盘一边实时预览的赶脚也让人心情莫名得顺畅!

这种方法也可以迅速地让水平和垂直数值保持一致,比我以前的滑块拖动、数值输入的操作好太多了。

接好了!这是你要的6个小众但特别好用Ai技法

顺带一提,sketch参数数值调节也支持这种快捷操作哦。

平行四边形圆角

我们在调节形状的圆角时,一般情况有两种方法,要么在菜单栏or变换工具中数值调整,要么直接在角落的圆角点上拖动。

接好了!这是你要的6个小众但特别好用Ai技法

但是对于平行四边形这种四个顶角度数不一样的形状,即使四个圆角大小是一致的,由于锐角和钝角的存在导致圆角看起来并不一样。

接好了!这是你要的6个小众但特别好用Ai技法

这时候,外观效果就派上用场了。

接好了!这是你要的6个小众但特别好用Ai技法

我们在效果-风格化中找到圆角选项,为平行四边形添加一个圆角外观效果。

风格中找到圆角选项就可以自己设置。这里给一个和刚刚一样的圆角10px。

接好了!这是你要的6个小众但特别好用Ai技法

最后(右图)得出的四个圆角看上去明显比之前的方案更加一致。

接好了!这是你要的6个小众但特别好用Ai技法

另外,这种外观的好处就是,后期随时可以在外观中编辑!

快速平滑缩放

我们更多时候缩放是滚轮缩放,但是这样的缩放的颗粒度太大,尤其在小屏电脑上想要定在某个合适的窗口大小比较麻烦。

这时候我们可以利用快捷键Z激活缩放功能,然后通过左、右拖曳的手势进行快速而平滑的缩放操作。我们可以轻易定格在我们想要的窗口大小。一开始可能很多朋友和我一样习惯上下缩放,但是ai里的缩放并不是上下,而是左右。

接好了!这是你要的6个小众但特别好用Ai技法

手柄波浪线

一般我们画波浪线是通过扭曲与变换中的波纹效果来变换。

但是我们也可以使用钢笔来直接画。

向一个方向拖拽生成手柄(不知道有没有朋友和我一样用钢笔工具都有点一下去绘制形状的毛病),然后在合适的位置再拖拽一次即可绘制出波浪线。在对精准度要求不高的情况下完全可以采用这种办法,方便快速。

接好了!这是你要的6个小众但特别好用Ai技法

路径快速消除

在以往,我在进行路径消除操作(比如绘制一些断线icon时),通过这样的步骤,添加锚点工具在路径上添加两个锚点,然后直接选择工具选中锚点间的路径删除。拜托,都2120年了,别用这么古老的方式了好嘛!!(好想乘时光机回去拯救年少迷茫的自己)

接好了!这是你要的6个小众但特别好用Ai技法

但其实压根不需要这么麻烦,一个工具就可以迅速解决,而且可以连续消除!

这个工具就是路径橡皮擦工具,说实话知道这个工具后我再也回不去了。

接好了!这是你要的6个小众但特别好用Ai技法

只需要激活它,你就可以在任意的路径中像使用橡皮擦那样,迅速地消除你想消除的地方。另外,我提前给这个工具设置了E这个快捷键,以便我能迅速调用它进行路径消除工作。

接好了!这是你要的6个小众但特别好用Ai技法

填充快速消除

路径橡皮擦用在填充的色块中同样只能消除路径,但我们想要消除色块时,则可以用到另外一个工具——橡皮擦工具。

shift+E直接调用到它,按住shift即可直接在填充色块中进行切割。而且最后被切割出的图形都是互相独立的闭合形状。

接好了!这是你要的6个小众但特别好用Ai技法

当我们按住alt后,就可以随意地绘制出不同宽度的矩形进行切割,相比形状生成器或布尔运算更加方便点。

接好了!这是你要的6个小众但特别好用Ai技法

最后

一点点平时积累的ai小干货,但愿能帮到你!!


文章来源:优设网     作者:转行人的设计笔记



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

深度分析动效设计原理,提升产品可用性!

ui设计分享达人


动效对产品的可用性体验有多维度的影响。在界面中动效不仅仅是一种视觉装饰,它能够提升产品的参与度并扩展交流的范围。

本文追根溯源,先从动效的起源讲起,一步步推进与产品、体验之间的关系,最后通过案例分析动效设计的原理和应用。一起来看看吧~

一、动效设计的起源

动效与用户体验的结合相对较新,其根源是迪士尼动画设计的十二个条基本原理。迪士尼动画原理是为了讲故事而提炼出的基本的物理运动规律。这些原理能让绘制的卡通角色移动和表演,但不能充分满足现代UI界面的交互需求。

为了弥合这个差距,动效专家Canedo Estrada改编的《动效设计的10条原理》更适合应用到数字产品设计中。

在围绕界面元素建立用户体验时,重新定位动效原理的关键在于:

  • 将动效设计与UI动画区分开;
  • 阐明动效如何帮助可用性;
  • 解开核心动效的内部工作机制。


二、动效设计与用户体验

在讨论动效设计的原理之前,重要的是要强调动效不仅仅是装饰,而是一种用来帮助用户体验的行为。动效设计涉及两种基本的交互类型:实时和非实时。

 实时 

当用户在屏幕上点击UI元素时,实时交互提供即时反馈,会对用户的操作做出即时响应。

 非实时 

非实时交互发生在用户操作后,这意味着用户需要经过短暂的转场才能看到结果,然后再继续。

另外动效设计通过四种不同的方式来提升产品的可用性:

1.期望:当用户与界面交互时,他们期望看到哪些行为?动效是否符合预期或引起混乱?

2.连续性:交互在整个体验中是否发生一致的运动行为?

3.叙述:触发的动作是否与满足用户意图的事件的逻辑进程相关联?

4.关系:UI界面的空间、美学和层级结构如何相互关联并影响用户的决策?动效如何影响各种元素的关系?

三、产品动效设计原理

这里提供12种动效设计原理的解析,每一种对应不同的案例,从更直观的角度来解读抽象的原理。

1、缓动(Easing)

缓动效果模拟了现实世界中对象随时间加速或减速的方式。它适用于所有运动的UI元素。下图中的卡片和对应的椅子移动速度很快,但由于缓动效果它们可以平稳地受到控制。

2、偏移和延迟(Offset & Delay)

当多个UI元素同时快速移动时,用户倾向于将它们组合在一起,而忽略了每个元素自身的功能性。

偏移和延迟会在移动的UI元素之间创建层级结构,并传达它们相关但又不同的消息。元素的时间、速度和间距不是完全同步的,而是交错排列从而产生一种微妙的“一个接一个”的效果。

当用户在屏幕之间穿梭时,偏移和延迟表明存在多个交互选项。

3、父子关系(Parenting)

父子关系将一个元素的属性链接到其他元素中。当父元素中的属性更改时,子元素的链接属性也会更改,同时所有元素的属性都可以相互链接。

在下图中,将父元素(蓝色滑块)的位置与子元素(灯泡发光效果&光照强度)相关联。当父元素左右移动时,子元素的发光效果的范围和光照强度的数值会发生变化。

父子关系在元素间创建关系并建立层级结构,允许多个元素同时与用户交互。因此这种效果非常适用于实时交互中。

4、转换(Transformation)

当一种UI元素变成另一种形式时就会发生转换。例如,转换展示了下载的开始、中间和完成状态——下载按钮转换为进度条,进度条转换为完成图标。

从UX角度看,转换效果告知用户元素的状态发生了变化并将信息传递给用户,提高了用户的认知度。

5、数值变化(Value Change)

数值的变化(数字、文本或图形)在数字界面中非常丰富,从银行APP到日历到电商网站的各种产品中都会出现。

在某种程度上,数据的动态表达和交流可能会对数据的价值产生影响。例如下图中的数值被动态引入,向用户显示他们有能力影响数据,提升了参与活动的意愿。

6、遮罩(Masking)

遮罩是对界面上的部分内容进行战略性的显示和隐藏。通过改变元素的形状和比例,在改变元素效果的同时允许元素本身保持可识别性。因此,照片和插图等视觉形式是理想的选择。

从可用性的角度来看,设计师可以通过遮罩向用户展示产品正在进行一系列的交互。

7、覆盖(Overlay)

二维空间中没有深度,元素只能沿X或Y轴移动,叠加在界面中创造出前景/背景相区分的位置关系。通过模拟深度,覆盖可以根据用户的需要隐藏和显示元素。

在使用覆盖时,信息层级结构是重要的考虑因素。例如,用户在笔记应用中首先应该看到的是笔记列表,然后使用覆盖来显示每个笔记的辅助选项,如删除或归档。

8、克隆(Cloning)

克隆是将现有的对象拆分成新对象,这是一种突出显示重要信息或交互选项的方法。

通过克隆将元素与界面相链接,如果元素只是突然出现或消失没有关联性,那么用户将缺乏信心去交互。

9、模糊(Obscuration)

想象一扇磨砂玻璃门,虽然看不清门后的东西但是我们能察觉到门后事物的存在。

模糊的工作原理是一样的。它为用户提供提示,让用户意识到自己正在操作的界面之后还有其他的层级结构。导航菜单、密码屏幕和文件窗口是常见的示例。

10、视差(Parallax)

当两个(或更多)元素同时以不同的速度移动时会构成视差效果。

视差的主要目的是划分层级结构:

  • 可交互的元素移动速度更快,出现在前景中;
  • 非交互式元素移动速度较慢,退到背景中。

视差引导用户点击可交互的元素,同时允许非交互的元素保留在屏幕上并保持设计的统一性。

11、维度(Dimensionality)

维度使界面元素具备具多个方向的交互,这种行为是使元素看起来是可折叠、可翻转、浮动的或具有深度。

作为一种叙述性工具,维度意味着元素的不同侧面是相互联系的,并且可以实现无缝的屏幕过渡。

12、平移与缩放(Dolly & Zoom)

平移与缩放通过视角的变化能产生更多空间上的体验,逐级递进显示更高级别的细节。

平移:点击元素后发生距离远近的平移,用户的视点会越来越接近图像。(一个人拿着照相机走到一朵花前面近距离拍摄)

缩放:用户的视角与图像的距离保持不变,但图像在屏幕中的比例会增加。(这个人站在原地不动,只利用相机的变焦功能使花显得更大)

四、总结——动效即交流

互动体验要求动效具备敏捷和微妙的形式。坚持动效设计原理,即使最基本的界面元素也能成为交流的复杂媒介。

动效设计与产品用户体验之间的关系正在迅速成熟,而且动效跨越了二维屏幕上元素的抽象运动和3D世界中对运动的感知之间的鸿沟。



文章来源:UI中国   作者:Clip设计夹


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


实用的组件库详细制作逻辑和注意点

ui设计分享达人

成长到一定阶段是方法论的比拼。

   17年开始进行视觉组件库的搭建,也出过一个B/G端设计分析方法的文章总结,里面从大的方面介绍了组件。后来看到很多关于组件库的文章,但是大都是从“分子原则”等很宽泛的方法来讲,很少去细讲实际搭建过程中会遇到的问题,甚至有些方法深究或者实际做下去是有问题。这里会全面的写下sketch搭建组件库(或者说是视觉规范)的逻辑,以及容易混淆思路的点。

      

    为了让大家容易看完,先简短说下制作组件库的目的,再分三点讲搭建方法。


    一 为什么制作组件库

 

    Q1:很多人认为table、tabs等通用组件不需要再搭建,很多大厂已经出来规范,可以复用,为什么还要单独制作自己的

    A1:这些通用组件都是由基础的样式粒子:填充色值、描边大小与色值、圆角大小、文字大小与色值等组成,就拿form表单来讲,不同的描边、行高、圆角、文字样式营造的感觉也完全不同。


    Q2:搭建后能发挥什么作用呢

    A2:统一性:避免多人多风格的现象,保证所有产品都呈现一致的设计语言,新成员加入,也可快速接手工作; 性:改一个组件,可以使用该组件的全部设计图更改;在现有组件库的基础上,也可通过修改,生成不同项目的组件库。

 

    Q3:搭建后如何确保大家都能正确使用?

    A3:需要大家了解自身项目组件库的搭建逻辑,统一讲解远程组件库使用方法,并有专人定期维护更新远程组件库。


    二 组件库具体搭建方法

 

    分三方面说明:(一)、内容架构;(二)、注意点;(三)、远程协作。

 

    (一)内容架构


    内容架构要考虑的是两方面:一个是文档的逻辑,二是组件的逻辑。三哪些制成组件,哪些制作成样式。

 

 

 

    文档的逻辑

 

 

    如上:点击创建组件按钮后,所有的组件都会出现在“图层/组件”界面,默认的排序方式是软件自定的,不好分类和查看,除非每次创建后再进行挪动。第二个“组件》”这个位置是不能直接切换看到组件的,只能在左侧看到所有的组件名称。再加上制作之前,也需要绘制出内容,所以我们需要在图层处建立界面,绘制我们的内容。样式也是如此,只能在“组件》”看到所有的样式名称。

所以我们整理出:“样式”page——所有需要创建样式的内容在此处整理分类绘制;“components组件”page——所有组件在此处分类绘制,再进行创建;“layout 布局”page——说明系统的布局和响应方案;“examples场景模块”典型场景模块,“更新日志”page——标明每次变动,当然sketch是自动导出“组件”page。另外根据系统特性,比如数据统计类界面多的情况,可以增加“data visualization数据分析”page

 

    组件的逻辑

 

    很多组件库向左图一那样,直接把所有组件摆了出来,非常凌乱不便使用。再对比element和antdesign,后者的分类整合地更干净整齐,涵盖的全面,整合后的大类别少,分类相对清晰,可以借鉴,后续有自己系统常用模块需要制作成组件,可以单独增加一个分类模块。当然也可以按着自己的逻辑重新整理。

 

    哪些制成组件,哪些制作成样式


 

    先说样式吧:1 文字(也有些会选择直接做成组件,但我一般会制成样式,感觉更轻量化些);2颜色——背景色、线条色(分割线、描边)、主色调、图标配色、功能色;3 容器(需制作全不同状态的容器,内容卡片、输入框、标签等都会用到);4投影。指的注意的是,这里的样式基本涵盖了所有的基础样式,后续大部分的基础样式都要尽量在在此处引用。

 

    哪些制成组件:本质上讲就是两大类,1是icon;2是其它无法用简单样式的常出现内容(也就是上面按“组件逻辑”整理出来的内容”

    何时需要制成复合组件:1需要通过很多基础样式切换才能改变状态时候。而且通过多个样式切换不同状态,麻烦的地方在于覆盖层的优先级比较高,即使切换成了同类其他组件,也还是被覆盖,必须更新

如下:

 

    我们可以在创建symbol后,在右侧取消内部相应的样式覆盖,然后建立所需的多个状态的平行组件,通过直接切换不同组件来切换状态。

 

    2如果该组件有上一级组件,并且要用到该组件的不同状态,就要把该组件的不同状态改为组件,不然一层一层改很麻烦。

 

    (二)、注意点

 

    制作组件的过程中虽然按着大的架构走,还是很容易混乱或者卡住。以下注意点,可以帮助我们理清关系。这部分其实也是我重点想说明的内容。

    命名


 

 

    1无论是组件还是样式的名称,最后一级相平行的,最好是可以相互切换的状态。这样就可以在右侧属性中直接切换。

    2 组件只能切组件,样式只能切样式。—— 也就是说定好一个基本元素是样式,那么与它平行的切换内容也需要是样式。

    3 如何修改已制好的组件或样式名称


 

    截图1(图层》组件page)和2处,选中进入后,均可找到对应的修改。修改后其他页面已放置好的组件名不被修改,反过来,在图层处其他位置修改,亦不能修改好组件的命名。

    4 sketch里默认的分组是通过命名时的“/”,要修改组件或样式加载时的分组,需在切换到此处,进行拖拽。修改后,组件的名称也会被修改。

 



 

    5 要将一个元素的组件命名到一处去,理清楚如上的关系。如果遇到无法用到的基本元素搭建,需要新的元素,可放到该组的element里(如上图)

 

    样式或组件的修改

 

 

    样式变化后,更新按钮变为可点击,点击此处可以更改样式,重设样式可以还原

    组件编辑覆盖层后在右侧更新,如果想修改组件,通过编辑母版

 

    响应

 

    要考虑好响应方式,每个组件在此处做好设定

 

    (三)、远程协作

 

    远程原因


 

    如上,只要复制过来的新内容中有组件,就会再下面自己建立出组件,很不方便组件管理,团队人多时,容易使组件发生变化,用远程组件能够做到完全统一。

 

    远程方案


    1 蓝湖



 

    无论样式还是组件添加后,还得自己分组重新整理,组件使用方法,在“蓝湖设计规范云”中找到相应的,自己拖过去用,很麻烦。

 

    2 语雀

    可以通过语雀的sketch插件上传或者下载,加载后便是类似远程组件的使用方法。

 

    3 sketch clould
|

 



    单独通过线下传library文件加载使用,比较不容易统一和版本不好管理。因此Sketch Cloud Library 是基于 iCloud 帐户云能力创建的 Sketch的云端设计库,使用前需要对其进行设置。使用时,打开 Sketch 左上角第一个菜单的 Preference,选择 Libraries 卡片,将本地 iCloud Drive 中的规范文件拖拽进这个区域,然后关闭该窗口。

 

    综上所述,我们常选sketch cloud或者 语雀的kitchen插件来进行远程使用。另外会线下发送整个文件,方便整体复用一些组件和example里的页面。

    

文章来源:站酷   作者:youngLion0610


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

日历

链接

个人资料

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

存档