设计达人 http://www.vdfq.tw 爱设计,爱分享。 Fri, 21 Jun 2019 00:00:54 +0000 zh-CN hourly 1 https://wordpress.org/?v=5.1.1 运营BANNER也可以规范化设计 http://www.vdfq.tw/yunying-banner-guifanhua-sheji.html http://www.vdfq.tw/yunying-banner-guifanhua-sheji.html#respond Fri, 21 Jun 2019 00:00:54 +0000 http://www.vdfq.tw/?p=30817

开思是一家汽配电商垂直领域的独角兽企业,成长迅速日益趋于成熟。为了平台形象的一致性制定统一的规范是必要的。统一的UI界面规范一直都有,运营banner的规范一直缺失, 这也与UI设计、运营设计的性质不一有关,运营相关的设计就是要具有视觉冲击性,不可能会有-摸一样的活动,那还有给运营banner制定规范的必要性吗,制定规范是否会限制设计师的主观能动性呢? 在准备这样的一份规范时也有着各个方面的思考,但还是觉得,规范是必要的。我们设计师在为企业服务时肯定是有自我风格的割舍,制定一定的规范不是固化设计师的思维,而是让设计做一份选择题,在已有的空格中发挥。 以下就是规范运营banner图的过程:

1、前言

在ios的规范中有三个核心设计原则,清晰、遵从、深度。这三个原则换种方式理解同样是?#35270;?#20110;视觉设计。 信息呈现清晰,遵从主次结构,塑造视觉氛围深度,在设计中如何实现这三个核心设计原则呢?细化到一下六个原则,望各位设计同人遵循。

2、关键字提取

开思是一家专注于汽车配件垂直领域的2B模式的互联网商城,2B的购买行为很少冲动。更多情况下,它是经过长期复杂决策过程的结果,因为他们需要为产品付出相?#22791;?#30340;价格,并期望使用较长的时间。ToB的购买行为经常会涉及到公司各个层级、各个职能的的角色。从我们行业入手,联合互联网特性,定义出以下关键词专业、?#20998;省?#27785;稳

3、核心色彩

根据情绪版制定以下主要色彩搭配建议(建议色为多色,选取一个主色进行同类色设计也可)

4、图形元素

以下为设想常用场景配图,建议使用,之后的自主设计也请尽量遵循统- -的设计风格,输出风格一致的运营设计,用点滴之中注入开思的品牌基因,让用户从视觉层面形成开思的品牌记忆,如同抖音大胆的色彩作为故障风,利用设计的?#20174;?#25171;造了深远的记忆点。 人物9头身的人物,显得修长,使人物传达出专业知性的仪态。 这里的图形元素的列举只是一部分,如果可能希望这是我们开思设计团队建立设计库的开始,设计是创造性的工作,更多的是构思想法,这些图形元素是我们做设计工作的积?#23613;?#25105;们的设计库越来越成熟,越来越庞大,这样我们减少机械性重复性工作的时间,更多的去产出创意。

5、安全范围

安全距离的规范能保证设计产出主体设计元素不会过大或过小破坏视觉感受,预留距离让画面具有呼吸感,规范的距离让设计产出具有一致性。

6、示例

作者:卢好方 个人主?#24120;篽ttps://www.zcool.com.cn/u/2133768


(ノ???)ノ*:??? 查看最受?#38431;?301 个设计网站 *:???ヽ(???ヽ)

UI设计QQ群 | RSS订阅 | 新浪微博 | 本文链接 | 添加评论
]]>
http://www.vdfq.tw/yunying-banner-guifanhua-sheji.html/feed 0
?#35745;?#25490;版的17大实用?#35760;?/title> <link>http://www.vdfq.tw/tupian-paiban-de-17-da-shiyong-jiqiao.html</link> <comments>http://www.vdfq.tw/tupian-paiban-de-17-da-shiyong-jiqiao.html#respond</comments> <pubDate>Thu, 20 Jun 2019 00:00:31 +0000</pubDate> <dc:creator><![CDATA[设计 达人]]></dc:creator> <category><![CDATA[视觉设计]]></category> <category><![CDATA[banner]]></category> <category><![CDATA[排版]]></category> <category><![CDATA[海报设计]]></category> <guid isPermaLink="false">http://www.vdfq.tw/?p=30807</guid> <description><![CDATA[<p align="center"><a href="http://www.vdfq.tw/tupian-paiban-de-17-da-shiyong-jiqiao.html" target="_blank"><img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-29.jpg" class="aligncenter wp-post-image tfe" alt="" title="" /></a></p>排版的难处在于,我们不是根据已经设计好的版面来填充内容(套模板),而是要根据具体的内容来布?#32844;?#38754;,比如版面中的?#35745;?#26377;时候是一两张,有时候是十张八张,由于构成元素的不同,导致采用同样的构图、版式、形式往往是行不通的,所以葱爷今天的这篇文章就是要来分享,在不同情况下有哪些?#35745;?a href="http://www.vdfq.tw/tag/%E6%8E%92%E7%89%88">排版</a>?#35760;傘? <h3>一、单图排版</h3> <b>1.平铺</b> 即把?#35745;?#38138;满整个版面,这种处理方式多用于封面设计; <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-29.jpg" /> 或者在内页中把某一半版平铺一张大图,另一半则排?#24418;?#23383;或者小图。 <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-30.jpg" /> 平铺的?#35745;?#27604;较有张力,有视觉重心的?#35745;?#36866;合这?#21019;?#29702;,例如下?#35745;?#38138;的效果就一般般。 <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-31.jpg" /> 还有一种情况是把?#35745;?#24403;做背景时,也可以采用平铺,如下图。 <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-32.jpg" /> <b>2.四周留白</b> 即?#35745;?#35201;比版面小,并让其四周都留出空白,这里也分两种情况,一是?#35745;?#20301;于版面正中央,?#35745;?#21608;围的留白是对称的,这?#20013;?#26524;类似于相框,常用于封面设计。 <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-33.jpg" /> 还有一种情况是?#35745;?#21608;围的留白并不对称,如下图,留白较多的区域会用来排文字,常用于海报设计和画册内页设计。 <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-34.jpg" /> <b>3.一条边出血</b> 即把?#35745;?#30340;一条边对齐边界,这?#21019;?#29702;有点冲破束缚的意思,可以增加?#35745;?#30340;想象力和版面的设计?#23567;? <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-35.jpg" /> <b>4.三条边出血</b> 这么做会把版面分成两部分,一部分为色块,一部分为?#35745;?#22312;排版时我们还可以通过文字、色块或颜色把这两个部分联系起来。 <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-36.jpg" /> <b>5.拆分</b> 即把一张?#35745;?#25286;分成几份,然后隔开一点排列,这么做比单独放一张?#35745;?#20250;更有设计感和趣味性,风景类?#35745;?#36866;合这?#21019;?#29702;。 <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-37.jpg" /> <b>6.跨版</b> 即在画册设计中,让?#35745;?#21516;时占据两个版面,当在一个跨版中只有一张?#35745;?#26102;,如果只把?#35745;?#25490;在某一半版中,那么另一半版就容易单调,所以在这种情况下通常会使用跨版,而且?#35745;?#25918;大后会更有张力,还能把左右两个版面关联起来。 <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-38.jpg" /> <h3>二、双图排版</h3> 在画册的设计中,有时候我们应该把一P当成一个版面,而有时候则需要把一个跨版当成一个版面,这取决于具体的内容以及排版形式,所以?#35745;?#30340;排版也要分成这两种情况来考虑。 <b>7.统一大小对齐排版</b> 在一些作品集或产品画册中常用到此排法,视觉流程简单、清晰。 <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-39.jpg" /> <b>8.统一大小错位排版</b> 比对齐排版更有动感,且由于?#35745;?#19981;多,所以也不会显得乱。 <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-40.jpg" /> <b>9.一大一小排版</b> 这种排版对比鲜明、更有张弛,可以在一个跨版中使用,也可以是在某一P中使用。 <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-41.jpg" /> 还可以把其中的一张?#35745;?#21435;底,这么组合起来更灵活,对比更强烈。 <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-42.jpg" /> 如果把整个跨版当成一个版面,那么可以把大的那张图进行跨版,小的那张图则不跨版。 <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-43.jpg" /> 或者把大?#35745;?#28385;一个P,而小的?#35745;?#21644;文字则排在另一个?#23567;? <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-44.jpg" /> 这两种排法都很大气?#20063;?#22833;细腻。 <h3>三、多图排版</h3> 有时候一个版面内的?#35745;?#20250;有很多,这种版面?#29260;?#26469;会更有难度,常用的排版方式有: <b>10.大小统一对齐排版</b> 这种排法比较整洁,但缺少变化,适合用于目?#23478;?#25110;者产品和人物介绍。 <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-45.jpg" /> <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-46.jpg" /> <b>11.大小不统一对齐排版</b> 这种排法会比前一种更灵活一点。适合利用网格工具来辅助排版。 <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-47.jpg" /> <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-48.jpg" /> 这种排版虽然没有统一?#35745;?#30340;大小,但由于保持了严格的对齐关系,所以依然显得很整洁。 <b>12.?#35745;?#19982;色块组合排版</b> ?#35745;?#19982;色块组合在一起排版既不会像只有?#35745;?#37027;么单调,还可以利用色块排文字。不过注意色块的颜色不要太多,?#24050;?#33394;最好来自?#35745;? <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-49.jpg" /> <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-50.jpg" /> <b>13.错位排版</b> 即把相连两张?#35745;?#21051;意错开,或者把?#35745;?#19982;文字的位置互换,这么做可以有效搭配?#35745;?#23436;全对齐的单调,且由于有一定的规律,所以也不会对视觉流程造?#21830;?#22823;影响。 <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-51.jpg" /> <b>14.把?#35745;?#25340;?#21830;?#23450;的形状</b> 这种排法适合?#35745;?#27604;较多的情况,这么做可以避免?#35745;?#22826;多而显得混乱,而且因为拼成的形状要与设计需求相关,所以会显得更有创意。 <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-52.jpg" /> <b>15.按照某一路径排版</b> 这种排法跟前一种一样,适合数量较多的同类?#35745;?#20351;用,可以避免?#35745;?#25293;得太过分散,如果不统一?#35745;?#30340;大小和方向,效果会比较活泼但不规范,?#35270;?#20110;照片墙和儿童画册的排版。 <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-53.jpg" /> <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-54.jpg" /> 如果统一?#35745;?#30340;大小和方向,或者使它们?#24335;?#21464;式的变化,这些?#35745;?#36824;可以形成一定的节奏感,不仅不会乱,还很美观。 <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-55.jpg" /> <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-56.jpg" /> <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-57.jpg" /> <b>16.一大多小排版</b> 如果在版面中分开排列大小差不多的多张?#35745;?#37027;么该版面就会缺乏重点且没有张力,而如果把其中一张?#35745;?#25918;大,与其他?#35745;?#24418;成鲜明的大小对比,就可以有效解决这一问题。 <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-58.jpg" /> <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-59.jpg" /> <b>17.自由排版</b> 即大小不需要统一、?#35745;?#19982;?#35745;?#20043;间也不一定要严格对齐,效果比较灵活,设计感较强,常用于杂志排版中。 <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-60.jpg" /> ▲这种排法有两点需要注意,一是?#35745;?#19981;要排的太分散?#27426;?#26159;最好要有大小对?#21462;? <img src="http://images.shejidaren.com/wp-content/uploads/2019/06/20190615-61.jpg" /> ▲去底图也很适合这么做,当然,在排版的时候也要有大小的区分,同时要注意?#35745;?#19982;?#35745;⑼计?#19982;文?#31181;?#38388;的轮廓要形成互补。 <h3>结语</h3> 版面中的?#35745;?#25968;量有从一张到数十张不等,?#35745;?#30340;排版方式也非常多,所以我没法一一列出,以上总结的十七个?#35760;?#20165;仅代表一些比较主流的方向,具体的变化还需要大家根据具体的内容和设计需求去做尝试和突破,希望这篇文章能给你一点帮助。 <small>作者:葱爷 (id:congyenanian)</small><hr /><br /><br />(ノ???)ノ*:??? <a href="http://hao.shejidaren.com" title="设计导航" target="_blank">查看最受?#38431;?301 个设计网站</a> *:???ヽ(???ヽ) <br /><br /><a href="http://hao.shejidaren.com/sheji-qq-qun.html" title="UI设计QQ群" target="_blank">UI设计QQ群</a> | <a href="http://www.vdfq.tw/feed" title="RSS订阅" target="_blank">RSS订阅</a> | <a href="http://weibo.com/shejidaren888" title="新浪微博" target="_blank">新浪微博</a> | <a href="http://www.vdfq.tw/tupian-paiban-de-17-da-shiyong-jiqiao.html" title="?#35745;?#25490;版的17大实用?#35760;? target="_blank">本文链接</a> | <a href="http://www.vdfq.tw/tupian-paiban-de-17-da-shiyong-jiqiao.html#respond" title="?#35745;?#25490;版的17大实用?#35760;?#30340;评论" target="_blank">添加评论</a> <br /><img src="http://ww4.sinaimg.cn/large/6857cd42gw1f2n261vbdfj20cb04u0tb.jpg" />]]></description> <wfw:commentRss>http://www.vdfq.tw/tupian-paiban-de-17-da-shiyong-jiqiao.html/feed</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item> <meta charset="utf-8"> <title>从C端到B端,我的产品设计之路 http://www.vdfq.tw/c-to-b-de-chanpin-sheji-zhi-lu.html http://www.vdfq.tw/c-to-b-de-chanpin-sheji-zhi-lu.html#respond Wed, 19 Jun 2019 00:00:53 +0000 http://www.vdfq.tw/?p=30813

记得当年我面试Lenovo的UX设计岗时,面试官问我C端和B端的区别是什么、有什么设计差异,这个问题对于当时只做过C端的我来说,简直是一脸懵,由于脑子里对B端的?#25293;?#36824;不太明确,所以回答的也不全面 不精准,结果让?#19968;?#23478;等通知。后来还是进了一家非常不错的团队,从此开始了我的B端产品设计之路... 从C端产品转向B端产品的设计也有段时间了,期间亲身经历过一些“设计反差?#20445;?#21830;业属性不同、产?#33539;?#20301;不同、目标用户不同、设计表达不同、业务流程不同、工作套路不同,?#34892;?#36825;些反差让我体会到了C端产品与B端产品的差异化。 近年来,互联网进入下半场,C端流量红利逐渐消退,很多企业转向了B端服务,随之而来的是产品设计者的转型,现在越来越多的C端产品设计师开始涉足到B端产品的设计,这是一个知识迁移的过程,需要?#40092;?#21040;这2类产品的特点和区别,你才能够快速?#35270;?#36825;个迁移的过程。 在互联网和信息化高度发达的今天,我们都是B端和C端产品的用户,能切身体会到产品的好坏,那么两个完全不同类别的产品放在一起时,会有什么新发现呢?今天想通过自己的设计历程,?#35789;?#29702;这2种产品的区别?#22270;?#20540;。 C全称是Customer即消费者(泛指用户)的产品,个人用户或终端用户,使用的是客户端。例如?#20309;?#20449;、网易新闻、网?#33258;?#38899;乐、有道翻译官、网易考拉等?#21462;? B全称是Business即商家(泛指企业)的产品,通常是企业或商家,为工作或商?#30340;?#30340;而使用的系统型软件、工具或平台。例如:京东云、阿里云、网?#33258;啤?#32593;易有数或企?#30340;?#37096;的ERP系统等?#21462;?

一、相同点

1.?#23478;?#32473;人使用 小到打车、外卖和?#20309;?#36719;件,大到逻辑复杂连产品经理有时候都犯糊涂的企业级业务系统,无论你个人用户、还是企业用户,本质都是由人来使用,只不过产品类型不同罢了。 2.?#23478;?#20860;顾用户体验和业务之间的平衡 既然是给人来使用的产品,就要兼顾用户体验和业务之间的平衡。无论是C端orB端,谁都不愿意使用一个不好?#20204;业?#35823;效率的产品,当然还是会有一些用户体验较差,用户又不得不使用的产品存在,因为它可能具有一定的垄断性质,或者在某些场景下被强迫使用,用户本身是别无选择的。但不能说用户体验就不重要,只能说对于业务更复杂、为工作而生的B端产品来说,想要做好这个点会比C端更困?#36873;? 3.?#23478;?#22362;守做产品设计的核心思想 对于每一个产品设计者来说,“在什么场景下为怎样的用户(客户)采取什么方法解决哪些问题?#20445;?#36825;句话是再熟悉不过了,也是经常?#33268;?#25110;?#20197;?#22068;边的话。可是面对工作中蜂拥而至、突如其来的事情时,?#20174;?#24120;常容易忽略掉。就像是一个人如果太饿了,?#36824;?#30528;吃?#22266;?#39281;肚子,却忘记了吃了什么。

二、不同点

1.目标用户 首先,我们明确一下C端产品和B端产品的用户是谁,产品给哪些人用? C端: 产品是面向个人用户,服务于每个脱离“企业”场景之外的人,也就是生活场景。他需要做更细致的用户画像,比如:用户的年龄、职业、文化程度、收入水平、工作单位、个人喜好等都会影响到功能设计,每个人都可以对产品提出优化意见,这个意见只代表个人,而不是任何社会群体,但这些意见只要被产品经理验证是可以提升产品价值的,就可能会排进迭代周期内。 相对来说,C端产品不管从服务范围、渗透力、密度都远远超过B端,原因是因为它面向的用户群体更广?#28023;?#29992;一个核心功能解决大多数人的一个主要诉求,我们每个人随时随地都可以成为C端用户,可选用的产品也非常多,产品团队更多的思考是让我们更长时间的停留在产品上面,让用户有更高的粘性和活跃度,需要利用产品的特色功能和优质体验?#27425;?#24341;我们,并解决我们在生活便利和情绪方面的问题,让我们享受这些服务并为此买单。 B端: 产品则是服务于企业用户,这个“企业”可以是一个组织、商家、团队,是某种经营的主体,当然使用者也是个人,不过这个“个人”是代表了组织中的某个角色而?#36873;?#36825;类人无论性别、年龄、地区有何差异,他们都是一类角色,比如企业中的?#21512;?#30446;总监、项目经理、项目顾问,我们的产品要提供给这类角色使用,而不是某个人使用。假设我们做一个项目管理系统,主要提供给项目经理使用,张三和李四都是产品的用户,也许张三在工作之外是个活泼少女,?#19981;端?#30701;视频、?#20309;鎩?#26053;游,被简约的界面风格所折服;李四却是个内向宅男,?#19981;?#23429;在家里打游戏、?#35789;椋不?#28843;酷的界面风格,但他们的个人喜好都无法影响系统功能的设计。这里说的功能设计的主要依据就是企业对项目经理这个角色的业务定位和考核目标,他们共同的角色都是项目经理,所以系统只需要提供项目经理相应的能功能和体验即可。 所以功能设计需要是多个业务功能满足特定人群的多个需求、多个场景,他所面对的用户具有特定的职业属性,也就是说他的用户只会在“工作”的场景下使用他,有些还是强制使用,个人没有选择余地,因为付费者是企业领导,而不是基层员工,而使用最多的反而是基层员工,所以B端产品的用户关系会比C端更集中、更垂直,做功能设计时,要权衡付费者和使用者之间的利弊,他们要求产品的时效性,注重如何满足企业用户的既定目标。 2.使用场景 C端: 它会存在于生活中的各种场景下,而且自由度非常高,当然也包含工作场景,比如?#20197;?#22352;地铁时刷一下盆友圈、在睡前打开某?#33258;铺?#27468;、在工作间隙上某团点了一份外卖、周末变身?#25910;?#21507;了一天鸡等等,所以C端产品的使用场景是碎片化的,用户并不会连续几个小时一直盯着同一个APP,而是在多个应用之间随意切换,比如落地成盒了会打开微信回复消息,歌听乏了去看看电子书等等,所以我们看到一些比较优秀产品,他们都在内容和用户体验上下足了功夫,目的就是为了留存用户,减少跳出率。因此C端产品更讲究操作直接,信息简洁,有娱乐性、社交性、可倾诉性,是为了解决生活上的问题而生,寄生于我们的情绪之中,被产品的情感化设计所折服。 B端: 与C端正好相反,它们是为了工作而使用这个产品,因此他们必然要长时间使用产品,而且是沉浸式使用,同时使用频率是可预测的,他们并不能带着个人喜好去使用,不能说这个产品太难用了,我就可以不用了,比如我们上下班打卡,公司要求用A产品,你觉得不好用,就推荐大家使用B产品,对不起,虽然你是产?#27675;?#27491;的使用者,但决策权和付费者是高层领导。所以个人的情绪左?#20063;?#20102;使用场景。所以B端产品更讲究严谨的流程设计、贴近?#36136;?#30340;场景面积、低风险、高效率、数据精准。它是为了解决工作上的问题而生,寄生于企业制度之中,被产品的用户体验影响着工作效率。 3.业务和本质 C端: 满足自我情绪:比如社交类产品就是构建“聊天”方式,这个聊天可以是语音、文字、?#35745;?#20998;享等形式,解决个人在情?#23567;?#31354;间、工作、虚荣、欲望等情绪问题。在核心功能之外还可以附加一些“增值功能?#20445;?#27604;如设置好友查看权限、购买VIP等,这都是为了提高产品的使用价值和盈利口径。 因此C端产品通常只有一个核心功能(比如:音乐类app的核心功能就是听音乐、阅读类app的核心功能就是阅读、游戏类app的核心功能就是游戏),多个辅助功能,核心功能影响着产品的特色、定位、调性,而合理的辅助功能则会让产品保值增值、增强产品与产?#20998;?#38388;的差异化,如果去除这些附加功能,产品的体验会受到一定影响,但实际上并不会阻碍用户使用核心功能,例如:去除了评论功能,但用户依旧可以听音乐、去除了打赏功能,同样也不影响用户阅读文章和作者?#27425;?#31456;、去除了分享,用户还是可以流畅的吃鸡。 所以C端产品的特性可以归纳为“分享?#20445;?#21069;面所提到的“评论”、“打赏”其实都基于“分享”的场景下,即:让他人听见“我”的声音、看见“我”的想法、赞同“我”的观点,满足双方的情绪设定。 盈利方式:内容付?#36873;?#24191;告付?#36873;?#24179;台抽成、增值服务(VIP、卡券、权限等) B端: 共同完成一个目标:日常使用产品工作的人,自己是无法独立完成一个任务的,他需要和周围的人协同完成一个任务流程的闭环,比如我发起一个请假申请,以“完成”和“打回”作为流程结点,根据企业制度设定,这个流程中会涉及到3种角色:发起人(我)、审核人(上级)、归档人(人事或行政)。 B端产品的业务逻辑是复杂和多变的,尤其是权限系统,往往每个人都是流程中一个非常小的部分,就如上段所说,需要进行协作使用,这里不能穷举出每个业务,因为不同的公司业务则完全不一样,公司可以对该产品当中的功能选择性购买或租赁,而对实?#35270;?#25143;来说,这个产品没有功能的层级,自己负责哪一块,哪一块就是他的主要任务、经常使用的功能。也就是说,从功能架构上看,这些核心功能都是扁平的,他们分配到各?#36136;?#29992;角色的手中,没有先后排名。 而B端产品的本质则是满足用户的工作需要,但这从来不是单一的功能就可以满足的,这里一定包括了多项功能的组合及嵌套应用支持。当用户需要绘制多种不同类型的图表时,产品就绝不能只提供单项类型的图表功能;比如:甲公司的产?#20998;?#33021;画柱状图,而乙公司的产品却能画10种甚至更多不同类型的图表,以?#35270;?#19981;同需求场景,若你是客户,你会选择购买哪个产品呢? 盈利方式:?#22402;?#33021;模块付?#36873;?#25353;使用人数付?#36873;?#38656;求付?#36873;?#21518;期维护费用 4.产品需求 C端: 更多满足使用者的日常生活需求,所以需求来源会多样化一些,因为目的都是拉新、促活、留存、转化、裂变。像竞品分析、数据分析、用户行为分析都可能帮助挖掘出有价值的需求。我们也有很多时候因为朋友在用这个产品,或者看到产品的广告才下载这个应用,但下载以后用来干什么,那只有等我们有诉求的时候才会再次打开应用,这个诉求可能是:空虚、无聊、想?#20309;?#20102;等?#21462;?#25152;以很多普通用户根本不知道自己的真实需求是什么,甚至有时阴差阳错打开某应用,然后被里面的买家秀、活动促销等运营模块所吸引,最后产生购买欲望。 因此,C端产品就是站在?#31995;?#30340;视角,需求直接来源于用户的行为?#22836;?#39304;,从用户这里获取最真实的诉求。产品设计者则需要关注市场流行趋势,关注用户偏好及意见,将有效的分析结果转化为产品需求,再输出功能,引导用户产生共鸣,并通过一些运营手段,增加转化(变现)概率和裂变的辐射面积。 B端: 而B端产品更多是基于已有的“业务”形态,把传统线下工作,通过程序化、系统化、信息化转换为线上行为,使业务的流转效率更高,办公成本更低。所以更要求产品设计者能熟?#27675;?#25569;相应的行业知识、捋清业务逻辑。 需求一般来源于产?#27675;?#30053;定位、各部门?#36234;印?#31199;户(客户、外部付费者)的个性需求,有些?#32943;?#21806;企业软件盈利的公司为了把职责再细分,通常会配置指定的一线顾问来?#36234;?#31199;户的需求及跟进服务,然后再将需求反馈到负责这个产品的产品经理,产品经理在这里就是负责?#21344;?#38656;求、分析、规划、设定开发优先级,然后?#25381;?#24320;发团队进行接下来的产品设计等工作。 B端产品的客户可能不在网?#24076;?#32780;是在全国各地的企业里,往往需要通过老板和销售才能接触到客户,这会造成不能获取真实的客户需求,我把这种现象叫做“需求断层?#20445;?#25152;以最好的调研方式就是做一个“面对面”的用户访谈,可以真实的面对面、也可以是视频或者电话沟通,这能容易?#36805;?#21046;的需求沟通清楚,而不是通过邮件和文字,因为目标用户有固定的职业领域,有时候你所设计的流程你认为最合理,但和他们实?#36866;?#29992;起来却有很大的差异,所以和真实用户面对面聊聊他们的工作习惯和业务规则,这一定能够帮助到你设计产品。 很多时候,做的产?#20998;?#26159;为了满足付费者(既高层领导)的需求,而不是实?#35270;?#25143;(既基层工作者),导致实?#35270;?#25143;吐槽产品易用性差,其实是改变了他们的工作习惯而引发的抱怨,然而领导却达到?#24605;?#25511;和实时获取数据的目的。因此在?#21344;?#36825;些需求时,会受到来自付费者和真实用户2种角色声音的影响,这就需要产品设计者具有更理性的思考方式和处理手段 5.产品思维 C端-流量思维: 做C端产品设计,我们一?#34892;?#20026;的出发点,都是流量,流量直接影响着变现,无论是外部的流量引入、各?#26041;?#30340;转化、留存策略,还是产品体验的提升、流程的优化、?#35797;?#30340;?#24230;耄?#25105;们都是在为提升流量、转化流量服务。我们经常做的各种活动专题、分析各类数据,去追求所谓的情?#22330;?#24773;感化设计,其根本还是为了引流,想方设法从全网获取流量,从而来提升产品的转化率,这是一切C端产品的宗旨,没有流量的产?#20998;?#26159;一个花瓶。 B端-效率思维: 而对于B端产品,我们更多关注的是效率,不管是面向外部客户,还是服务于公司内部各业务角色/部门,B端产品要解决的始终都是如何提升企业的运营效率(既工作效率),解决的是“开源节流”中的节流部分。所以我们会通过流程优化、工具打磨、策略调整,去提升各个?#26041;?#30340;人效,降低各方面成本,从根本上提升企业效率,这点从我们做流程设计的时候能清晰的?#20174;?#20986;来,设计目标都是在合理且效率的基础?#24076;?#35753;用户舒适的完成这个流程,并不是说企业?#24230;胱式?#36141;买了一款数据统计软件,结果数据统计还没有人工来的精准、方便。 6.设计原则 C端: 在C端产品设计的过程中,我们首先要明确核心功能是给哪些目标用户使用的,也就是我们最初的设计目标是什么,需要保持产品的场景多样化,突出核心功能,因为C端产品的同质化现象非常?#29616;兀?#20063;因此我们要好好思考,如何将我们的产品在众多产?#20998;型?#39062;而出,如何让产品的品牌设计辐射到更多的地方,如何在功能和体验上?#32610;?#26032;的亮点。 再者就是要保持良好运营手段,因为C端的用户是自由的(?#39029;?#24230;?#20572;?#38543;时可以换产品使用),所以需要通过一些运营手段来绑定用户的留存。C端产品的本质都是一个核心功能,所以设计师在产品初期时就需要全盘考虑,哪个功能是产品最核心、最不可丢弃的,哪个功能是锦上添花、为了提升产品的附加价值的。因此,我们抛开这些基本原则,还需要对用户行为进行塑造,塑造用户行为就是“绑架”用户: 1.把握关键时机 把握用户在使用C端产品过程中注意力的关键时机,用户在使用产品的过程中,注意力的分配是不均等的,比如同类产品太多,先下载2、3个试用,进到产品里不知道干什么,随便逛逛,逛着逛着就删除APP了,这就是典型的没有把握用户关键时机,没有提供给用户有用的东西,败在了产品策略和本能层次?#22909;挥性?#31532;一时间让用户知道产品是干什么的?能从中得到什么?亮点内容在哪里?是如?#25105;?#23548;我使用的?那么作为产品的界面设计师就需要知道在哪些关键节点?#24076;?#29992;户的注意力是集中的,哪些节点是分散的,如?#25105;?#23548;用户关注这个点。 所以通过研究这些用户在使用过程中的关键节点,可以抓住关键时机,来达到塑造用户行为。那么,这些所谓的“关键”时机?#20174;?#22312;注意力理论下,?#26434;?#30340;就是注意的“中心点?#20445;?#21453;之为“分散点”。用户在使用产品的时候,注意力总是从中心和边缘来回切换,举例:让?#25442;?#35774;计师在信息流页面做一个阅读提示,用于用户在更新消息流之后的场景,目的是能让用户发现更新之前的阅读位置,并在此处刷新,不让重复信息出现,不影响用户体验。 A.中心点:“上次看到这里,点击刷新”的提示消息出现在此位置和时机是有讲究的:由于它们出现在?#19978;?#24687;之前,新刷新的消息之后,用户的阅读注意力正在?#26377;?#30340;信息流转到旧的信息流,中间会出现注意力断层的中心点。所以在此出现的提示更容易?#25381;?#25143;察觉,提示内容才能发挥更大的价值,因此用A方案最合适。 B.分散点:消息提示在用户刷新之后出现在底部,虽然该方式在toast的层?#29420;錚?#24178;扰性是最低的,因为他的位置在底部,会适当减少用户浏览内容时所产生的干扰,但是从用户行为路径上看,显然不合适,用户的行为是要翻阅信息流,而它的出现方式与“翻阅”的行为是相违背的,?#22402;?#36824;是会阻碍用户的浏览,虽然它的感知程度很强,能让用户第一眼发现这个贴心的功能,但是出现的时机不对,这就影响了用户体验。 2.增加趣味性 所谓趣味性,是指“能引发用户的正面情绪,比如使人感到愉悦、有意思,能感染人、打动人、教育人,这是能够引起用户注意力的重要因素?#20445;?#22686;加产品趣味性的途径有很多种,就拿微信H5为例: 随着H5页面技术上的突破和微信推广程序井喷式的发展,微信H5推广领域已经成为各大C端产品的必争之地。推广的形式可以基于H5的框架进行多种形式的拓展,比如:小游戏、邀请好友赢红包、小程序等?#21462;?#24494;信端H5推广的优点就是将推广的趣味性融入产品当中,将营销手段运用在用户使用过程中。这样做的好处显而?#20934;?#36890;过趣味的游戏程序打开市场的缺口,用户基于推广程序的趣味性,有很强的分享动机。 说到分享动机,就不得不说最近刷爆朋友圈的《能进***的个个都是人才》,这个长图就很有意思,每?#25991;?#23481;都能让用户产生共鸣,根本想不到这是篇广告推?#27169;?#30452;到最后一小?#25991;?#23481;?#29260;?#20809;了品牌和产品,但效果显而?#20934;?#30701;短几天阅读量10万 ),所以这种趣味性的运营方式很容易带动用户去分享,分享既裂变式传播,而C端产品的运营目的就是引流、裂变。 3.增加创意性 王者荣耀无疑是近年?#35789;?#20247;最广、用户最多、盈利最大的线上手游。我们通过分析这样一个标?#24605;?#30340;产品,可以得出创意对一个产品的成功与否到底起了什么作用?这款游戏火到咖啡厅一群人坐在那里玩一?#24418;?#30340;原因在哪里?我想用我设计的眼光去审视一下王者荣耀,它到底为广大玩家提供了一种怎样的体验? “容易上手”几乎是王者荣耀玩家的共同感觉,而这种直观感觉决定了一款手游能在多大程度上流行。一方面,王者荣耀采用了双轮盘(左右两边一个操控区域)的操控方式,玩家通过左右两边的虚拟按钮进行控制,同时可以控制自动攻击,新手玩家默认自动攻击,从可玩性角度很大程度上减少了用户的学习成?#23613;? 双轮盘的操作方式随不是王者荣耀首创,但是他却成就了这种经典的?#25442;?#26041;式,为后来产品树立了一个成功的典范。操作方式的创新点还在于:取消技能施法的方式。区别于PC端游戏,移动终端没有鼠标来控制技能?#22836;?#19982;否,王者荣耀采用技能滑至右上取消的方式,创新性的解决了小?#32842;唤换?#19978;存在的问题。 除了以上几个设计点外,C端产品的设计手段还有很多,主要包括?#21644;?#36865;提?#36873;?#21508;种红点提?#23613;?#24377;窗提?#23613;⑶度?#24191;告、分享刺激、打赏刺激?#21462;?#26080;论采用任何设计方法,其核心的目标始终是落在用户的注意力?#24076;?#36890;过吸引用户注意的方式,达到塑造用户行为的目的。 B端: 产品设计者对于用户的需求在一定程度上是可知的,所以B端产品是辅助用户行为,比如我们要做一个企业报销系统,这些流程和工作行为已经有一套标准的流程了,我们只需要将这些场景转化为流程设计。那这个系统会存在哪些场景,只需要?#19994;?#30456;应的使用角色一聊就能挖掘出来,而且场景相对较固定,不用考虑用户是不是?#19981;?#36825;个功能,因为这是公司制度要求,不?#19981;?#20063;得用。因此在设计初期,我们要做的就是充分挖掘相应的功能需求,尽量把流程做到完善,而在设计上要有:合理的功能与模块划分、严谨的业务流程设计、一致性的操作体验、干净简洁的界面设计。 合理的功能与模块划分——即在做产品信息架构时,就需要仔细考虑功能、模块的划分,客户常用功能模块有哪些,模块与模块之间的关系是怎样的,当然有些产品版本是通过客户需求进行个性化设计的,比如有的客户要求为他们企业单独设计一套工作流程,那么怎样组?#32454;?#23458;户的功能模块呢,这也是做B端产品经常遇到的需求。而对于不同岗位的人?#20445;?#20182;们的权限划分也是不同的,比如在不同权限人员登录时显示的页面有哪些不同?能查看到的模块有哪些,里面的界面状态是怎样的?如果某岗位人员拥有不同的权限范围,怎么设置他的功能可见性?不同权限的人员怎?#33905;?#21516;工作?需要多人协作办公时,如何进行业务上的?#24179;弧?#25552;?#36873;?#24037;作流的显示?这些都是设计师需要仔细考虑的点。都说B端产品业务复杂,细分下来,权限设计就是最要花心思的,因为他涉及到不同的用户角色、岗位、场景,不能像C端那样常规化。 严谨的业务流程设计——B端产品不用揣测客户打开产品会干什么、引导他干什么,因为他是工作软件,在使用时,客户必然有明确的目的,需要什么他自己会打开,因为都是他们自己最熟悉的业务范围。总不可能利用碎片化的时间在工作软件上休闲一下吧,这个场景明显不成立。同时,设计师需要对产品的行业和业务具有一定了解,如果产?#20998;?#38024;对单一行业,设计师只需要了解?#26434;?#34892;业的特性和需求即可,若是平台类产品,需要面向多元行业,那设计师就需要了解所有的目标行业特性,?#19994;?#20182;们的异同点,针对不同使用场景,分析客户的具体需求,最后产出合理且专业的流程方案,如果你不了解客户的工作业务,你就不能有质量的产出他们满意的流程方案,所以做B端产品不光要学习本职岗位的技能,还要了解目标客户他们的工作流程、业务知识。 一致性的用户体验——无论是B端还是C端产?#33539;?#26159;应该遵循这一点,这是互联网产品最基本的素养,即:保持?#25442;?#21644;视觉的一致性,让用户在使用时,能感到熟悉、亲切,能直观的了解到操作会带来怎样的结果。在用户疑惑时,及时给予反馈,在遇到困难时,给予帮助。在用户?#24742;?#26102;,有效引导用户,这就是一款聪明的产品,它能够提前预知到用户的所想所需。同时,B端产品的界面元素?#20174;?#38754;积会比C端广而大,因此B端产品更应该注重?#25442;?#30340;一致性,做过后台的都应该知道,一个提醒方式、一个表单控件,它们能覆盖到80%的页面。 干净简洁的界面设计——B端产品是为了工作而生,界面里往往都是“内容为王?#20445;?#19981;易使用过于强烈的色彩对比,也不需要过于浮夸的设计,整体产品调性都应该尽?#32771;?#27905;,不要让视觉效果喧宾夺主,而应该减少干扰用户的“多余设计?#20445;?#36825;里不是说炫酷的设计不实用,而是B端产品的目标用户不同于C端用户,B端用户主要是通过产品来完成枯燥的工作,即便视觉效果做的再吸引用户,他们也不会给你的产品带来流量和黏度,因为买单者是高层,使用时间也相对固定。所以还不如把开发、设计的成本放在提升产品性能和流程体验上。 虽然我一名设计师,但毫无疑问,做B端产品必须要维持:功能为主的设计原则、视觉服务于功能的产品素养。这也是为什么很多B端产品?#19981;?#29992;蓝色系的原因,因为与蓝色相关的负面信息很少,同时色彩上也不会过于强烈、刺激,一般人都不会排斥它,并且色彩含义也为“理性”、“商务”、“科技?#20445;?#36825;就更适合B端产品的特性。

三、关注点

C端关注人性 产品强调:刚需、痛点、高频、体验 刚需 在B端产品设计中,我们往往面对的是刚需。用户会非常明确的告诉你,几乎无需挖掘,“我想要什?#22402;?#33021;,我线下是怎么完成这个任务流程的,有这个功能我就付费,没有这个功能我就不买单?#20445;?#24403;然,用户所讲并非用户所需,需求仍需要梳理和验证。而为什么C端产品却要刻意强调?#26696;?#38656;?#20445;?#22240;为C端产品的需求不同于B端产品,C端产品的用户量大、散、广,缺乏组织性,需求具有模糊性,所以需要刻意去挖掘。经常看到一些产品YY出一些客户需求(“我?#27604;?#20026;的设计),其实这些需求用户根本不需要。 痛点 在B端产?#20998;校?#29992;户选择产品的决策过程中,有足够的说服时间和机会,另外价格也会是一个非常重要的参?#23478;?#32032;。 而在C端产?#20998;校?#29992;户?#19981;?#26356;换成本较?#20572;≦Q和微信等社交类C端产品的更换成本很高,不在此列)、决策时间短,所以能否在极端的时间内,抓住用户痛点,就非常关键,比如通过运营活动和情感化的视觉设计,在短时间内引起用户的共鸣,形成热点式引流。如果不能抓住用户痛点,产品很可能不会被下载,即使被下载,使用频率也会非常?#20572;?#28176;渐的就藏在手机某个角落几个月不更新,从隐藏逐渐走向了删除,这样的产品就会丧失竞争力。所以很多C端产品经常推送一些运营消息,文案还特别吸引人,目的都是为了让用户回归,告诉你 它还很想你。 高频 在B端产?#20998;校?#29992;户使用频率是由业务和工作量决定的,所以提高B端产品用户使用频率的机会并不多,总不可能节假日的时候推送一条消息?#21543;?#24180;,快回?#22402;?#20316;吧,?#26377;?#21319;职就是现在?#20445;?#36825;样做毫无意义,也违背了它本身的商业价值。 而在C端产?#20998;校?#29992;户粘性、付费率、转化率、活跃度等往往跟用户使用的频?#24335;?#23494;相连。C端产品很多都是免费使用,通过增值服务收费,比如充值VIP享受更多特权等,只有通过免费的方式,让用户先使用,从而培养了使用频率,这才是增值服务收费的基础。所以高频和流量就成为了能否实现增值收费的关键点。 体验 由于用户缺乏组织的压力,并且更换产品的成本低到没有,删除你就是几个?#25442;ナ质?#32780;已,所以C端产品必须极其重视用户体验,想尽一切办法留住用户、锁住用户、让用户把产品当成生活中不可分割的一部分(你敢删除微信吗?以后都不下载的那种)。 用户体验对B端产品也非常重要,但通常客户更重视功能、流程和效率,而用户体验则更多的体现在产品性能方面,试想你使用一款软件工作,由于产品性能响应非常迟钝,而且数据不精准,你一定会很抓狂,很有可能一天的工作计划被这款“该?#39304;?#30340;产品所耽误,所以在用户体验?#24076;?#24615;能要比界面更重要。 写到这里,梓暄沉思了一会,请让我祭奠那些排期到明年的界面优化吧! B端关注组织与业务 产品核心诉求:功能、流程、效率 功能 不同于C端产品需要深入挖掘用户的需求,B端产品的需求往往是非常明确的,在功能的场景覆盖面积?#24076;?#21644;C端产品恰恰相反,功能多、大而全,这代表了一个B端产品的完整性。但这里所谓的“功能多?#20445;?#24182;不是一些杂七杂八的 锦上添花的功能,而是为了覆盖到更多业务场景的主要功能,这样才能拿去卖钱、才能给客户选择性使用、才有了更多的商业竞争机会。 至于功能过多而产生的学习成本过高现象,在B端领域也不是一个大问题,因为B端领域的客户往往需要专业的学习,客户也通常不会认为是负担,反而因为掌握了这些技能而实现了自身价值的增值,因为B端产品是公司主动要求员工使用的,不然他花钱买这个干什么?其次我们作为B端产品的开发者,很多公司也会提供相应的业务培训和售后服务。 当然,SAAS类产品(B端产?#20998;?#19968;)由于免实施的特点,决定了功能要全面、又要容易上手的特点,所以SAAS产品是B端产?#20998;?#26368;难设计的一种,需要在商业和体验之间权衡。 流程 既然B端产品要满足业务信息化的需求,那就必然涉及到流程设计。B端系统必须要能贴合企业用户的业务流程才能正常运行,而不同企业的流程是不一样的,所以B端产品的流程设计是一个非常大的挑战。 因为很多时候B端产品是将线下的流程转移到线?#24076;?#23454;现无纸化办公、敏捷办公,所以功能流程已经在线下有一套完善的流程了,只需要在现有的流程上做简化和整合即可,甚至一些线下的纸质文件在线上变成电子档时,客户?#23478;?#27714;贴近原始文件,只有这样才能顺从之前的使用场景,?#26723;脱?#20064;成本,所以前面为什么说做B端产品设计要懂业务,就是因为产品里的功能流程是线下转移到线?#24076;?#20102;解线下业务能帮助你更严谨的设计线上流程。 效率 B端的产品的业务经常涉及到海量的数据,所以在B端产?#20998;校?#25928;率远远比用户体验更重要,客户不是在休闲时刻把玩你的产品,而是通过你的产品完成工作任务。比如要上传1000条数据,那么批?#21487;?#20256;等高效率的功能设计和性能保障,就比优化上传界面的用户体验要重要得多。 ?#20004;?#25105;们仍然可以看到有些商超还在用一些DOS平台上开发的收银系统,虽然这些系统已经非常陈旧、用户体验已经很差了。但是由于使用时间很长,而且效率非常高,所以依然保持着旺盛的生命力。

四、产品特性对比

1. 客户VS用户 客户: 使用B端产品的人或组织。说白了就是给钱的合作方,它们通常是一个企业,以企业或部门的名义,购买或租赁了你们公司所开发的产品。 用户: 使用C端产品的人。而个人使用者则是不受工作场景限制的每个人,拿起一个产品就可以注册登录,并直接上手玩的那种。 客户是理性的,用户是感性的。客户关心ROI (?#24230;?#20135;出比),用户关心过程 (满足人性的某个弱点) 先举个例子。双十一现在基本上成为一个全名狂欢节,很多人吃土也要剁手,为什么?因为便宜,很多人趁着氛围一冲动就各种剁剁剁了。 但我们很少听说有B端产品在搞促销,一是因为企业的采购通常有计划安排,可能还需要财务的各种审批,不太可能刚好就在你促销的时候企业就需要采购,二是企业的采购要考虑?#24230;?#20135;出比,而不会因为你打个折扣就决定买你家商品,这关乎到企业利益和你自己的利益,你说要不要严谨? 但个人用户不一样,?#20309;?#36710;存了好长时间的商品,总是嫌贵舍不得买,可是看到双十一突然打5折,这下便有了冲动的借口,毕竟错过再等一年。 客户有级别之分,用户则基本一样 企业有大小之分,10个人的微企业和100个人的小型企业是不一样的,同样1000个人的中型企业和10000个人的大型企业也不一样。更准确地说,对于同类产品不同大小的企业它们的需求是不一样的,可能因为企业的管理方式不一样,有些企业会提出一些个性化的需求。 比如同样需要内部沟通产品,10个人的企业大家都坐在一个办公室里,需要找谁?#33268;?#38382;题,吼一嗓子隔壁公司都能听见,随时随意可以开会,需要的产?#20998;?#26159;传播声音的载体——空气。但如果是100个人的小型企业,可能吼一嗓子就没那么好用了,因为不是每个人都熟悉,并?#26131;?#20301;可能会离的很远,这时候就需要一个微信群方便大家沟通,这时的传播载体是——微信群。但如果是1000人的中型企业,跨部门协作的场景就非常多,很多时候要找的人是不?#40092;?#30340;,还有可能对方故意潜水半天不回信息,这个时候提高沟通效率就显得特别重要,所以“钉钉”和“企业微信”的“已读、未读”功能就很受这种场景的?#38431;?#23545;方是否在故意潜水,就看是不是已读,如果长时间未读那就可以通过语音或电?#32610;遙?#25152;以中型企业就很适合用这类种产品。那10000人以上的企?#30340;兀?#21487;能“钉钉”和“企业微信”他们的原生功能也不一定能满足复杂的协同需求,需要更多个人性化的功能,这种情况一般是自己开发相应功能,或外包给第三方开发,然后接入“钉钉”或“企业微信”。 上面说的是B端产品面向的客户有大小之分,下面我们来看看C端产品面向的用户是怎么基本一样的。 再拿微信举个例子,从身份地位、收入上?#27425;?#20449;的用户也是千差万别,但是从微信满足的人性弱点角度来看(懒惰、窥窃、色欲、存在?#23567;?#34394;荣、贪婪、冲动、从众、分享、嫉妒...),用户与用户之间并没有什么区别。一位成功人士和一位无业游民都有懒惰、虚荣等弱点。只是?#29616;?#31243;度可能有所差别,他们都有通过朋友圈各种“炫耀”的需求,只是炫耀的内容可能不一样而?#36873;?#25152;以作为C端产品,理论上是能满足所有用户的需求的,当然有极少部分是不看不发朋友圈的,这?#20013;?#27010;率群体可以不计算在内。所以C端产品留下来的用户,他们的需求都是被该产品所解决过的,因为这些用户都有相同的需求,虽然他们的身份都不一样。 2. 工具VS“玩具” 工具的目标是性价比,玩具目标是休闲 性价比包含了两个指标,性能(效率)?#22270;?#26684;。不难理解的是,企业之间的竞争本质上就是生产效率的竞争。所以企业采购的工具(B端产品)肯定是为了提高生产效率,比如各种管理系统是为了提高客户管理的效率,数据库系统是为了提高记录和运算的效率,在此基础?#26174;?#27178;向对比价格,性价比最高的当然最适合。要吸引企业?#22402;?#20080;产品,B端产品不得不考虑产品效率?#22270;?#26684;。 “玩具”的主要目标是好玩、休闲,这里指的都是用户体验,可以理解为用户通过碎片化的时间去享受产品给他带来的愉悦?#23567;?#24402;属?#23567;?#25918;松感,而用户体验则是吸引用户的重点。而满足人性弱点的体验就是好的体验,好的体验都出现在?#25353;?#26126;”的产品?#24076;取把?#33394;活”、帮助用户思考、做到用户行为的前面去,讲的就是要满足用户“懒得思考”的弱点。比如我们都知道国民产品(微信)的用户体验做的很棒,其中有一点就是易用性,老年人都可以用的666的产品,满足了“懒”这一人性弱点,再加上其它的一些功能满足“虚荣(炫耀)”、“偷窥(?#22402;?#21435;的朋友圈)”等弱点,就能让产品变得好玩,只有好玩才能引流,这正是C端产品?#20998;?#30340;目标,因为很多C端产品的商?#30340;?#24335;都是建立在巨大的用户群体之?#24076;?#26377;了流量,金钱也正在路上。 工具的生命周期?#21462;?#29609;具”的生命周期更长久 相对于C端产品,B端产品的生命周期更长,一是因为B端产品作为业务工具,本身就比?#32454;?#26434;,开发这样的产品是需要大量的行业经验积累?#22270;际?#31215;累,因此一款B端产品一旦赢得市场认可,就能建立经验?#22270;际?#22721;垒。二是B端产品基本都是要花钱购买的,一旦企业采购了该产品,员工也熟悉了如何使用,再换新的产品成本就比较大,所以更换的意愿会比较低。 C端产品为好玩而存在,当新推出的产品更好玩的时候,那老产品的生命周期和地位可能要面临着挑战。比如qq和微信推出后,短信就被替代了,同样是通?#29420;?#20135;品,微信和qq就好玩很多。可能有人会说因为短信收费,这并不是最重要的原因,即便短信现在完全免费,估计也没几个人用了,因为微信不止能发消息,还能发各?#30452;?#24773;、?#35745;?#35821;音、视频、支付等,自然前者就被后者所替代了。同理,当微信被玩腻,人们发现下一个产品更好玩时,微信也同样会受到挑战,可以对比下三年前和现在的朋友圈、订阅号原?#27425;?#31456;的质量就明白了,对了,还有“昙花一现的子弹短信”。所有说产?#33539;?#26159;有周期性的,只不过C端产品要比B端产品的生命周期更短。 工具复杂难用,玩具简单易用 B端产品复杂难用这是众所周知的,而C端产品老人都可以用的很6。为什么?一方面,B端产品是工具类,用于生产,而不是我们的日常生活,使用工具很多时候不是人的本能行为,而是为了达到某一目的而学会的技能,因此一般是要经过培训学?#23433;?#20250;使用,所以很多B端产品有售前/售后方案、使用手册、业务培训什么的。 另一方面,这和B端产品的目标有关(效率、准确、安全),当开发?#35797;?#37117;用在打造产品性能的时候,用在用户体验方面的开发?#35797;?#38590;免会不足,所谓“功能先行?#20445;?#23601;是这个道理。 而C端产品的目标就是易用性、易通性,只有用户体验做的比竞品好,才能赢得用户和流量。假如C端产品需要拿着产品?#24471;?#20070;才能玩下去,那这种产品一定会被淘汰掉。 3. “卖软件”VS“秀软件” B端产品“卖软件” 之所?#36816;礏端产品的商?#30340;?#24335;是“卖软件?#20445;?#26159;因为B端产品实实在在的一手交钱一手?#25442;酰?#20063;就是说B端产品开发出来是要直接卖钱的。即B端产品从诞生第一天起就要考虑如何销售,甚至有些开发团队直接用原型demo去?#32538;?#25143;,最后人?#19968;?#25104;交了。 通常来说一款B端产品如果能有几十万客户已经是用户量特别大的产品了,不像C端产?#33539;?#19981;动就是上千万、上亿,甚至上十亿用户量。因此通过流量变现的方法是行不通的。可以想象如果一个企业工具里面插入各种杂七杂八的广告,这得受到多少企业用户的吐槽,关键是这些广告还不能直接变现,这里最基本的口碑就没了。另一方面,对于性价比高的B端产品,企业是愿意自主付费的。自然而然就形成了垂直变现的商?#30340;?#24335;。 C端产品“秀软件” C端产品的商?#30340;?#24335;通常是间接变现。通过开发出用户需要的产品,把产品的体验做好,内容形式有针对性,从而吸引更多的用户来使用。产品本身是免费的,比如百度,支付宝,微信等产品。在用户量足够大的前提下,通过广告、推广等方式变现,本质上就是流?#32771;?#25509;变现的商?#30340;?#24335;。之所以C端产品这么做,是因为用户群体足够庞大,当用户量足够大的时候,广告产生的收入就很可观,同时还能实现同类产品引流,把用户引导到各种“同父异?#28014;?#30340;应用?#24076;?#21019;造二次流量,比如“手机百度”看短视频必须要打开“全民小视频”和“好看视频”

五、设计师从C转向B是什么感受?

不少设计师在做过一段时间B端产品设计后会感觉缺乏激情和多样性,因为做酷炫的视觉效果和时尚的微?#25442;?#30340;机会并非常有。时间一长就会发现它既无聊又单调,整天面对一些表单、可视化数据,何时才能出头?时间一长会怀疑人生。 正因如此,设计师们感受不到设计带来的成就感,如果不重新认清自我、调整好心态、设立工作计划,很容?#33258;?#22320;踏步。这里不是说设计师不利于做B端产品,而是要结合自己的职业规划做选择。 我从C端转战B端之后,发现B端产品吸引我的有以下几点: 1.更有挑战性 B端产品相对而言,场景、功能、业务流程、信息架构要比C端更复杂,面对的异常情况也比较多,一些专业性强的行业,甚至还需要一定的背景门槛,比如一些互金公司会帮助PM和设计师考取金融行业相关资格证。正因难度更大,设计B端产品才更具挑战性。 而C端产品目前各行业基本成熟,产品同质化相当?#29616;兀?#31454;?#20998;?#26377;大部分都差不多,设计师很多时候的工作就是在做领导和产品经理的需求,“借鉴、学习”成熟竞品的设计。而B端市场还处在发展中状态,现在正是市场红利的时候,竞品虽少,但商业竞争残酷,即便下载了竞品,你没有体验账号还是进不去的,所以从一定意义上讲,做B端产品的设计,很多时候都需要自己去调研用户需求,去摸索设计方法,并做出方案去验证它。对UI和?#25442;?#35774;计师来说,复杂的业务场景和产品逻辑能让你养成严谨的设计习惯(思维),以后UI转?#25442;ィ?#25110;转产品经理,B端的设计经验都是一个非常牢固的基础。 2.更能体现设计师的价值 上面也说了,C端的成熟产品很多,产品也经过市场检验了,优秀的产?#27675;?#22312;更高的角度,去除设计师自己的情怀来看,在一段时间内很?#35328;?#26377;突破性的创新,只能在细节和体验上微创新,主要还是靠产品经理发现功能痛点或运营的“阴谋”手段,设计师在这种情况下发挥的价值有限,往往地位也很低下,在一般的互联网公司,很多设计师都是执行者,很难参与到产品层面的工作,在开发眼里觉得设计师就是画图的。 3.更能进行行业深耕 B端设计师对行业、业务的了解远远深得多,他们做的不止是框架层和表现层的东西,每设计一个功能,必须要了解该功能在整个产业链的位置、功能目的、对其他业务?#26041;?#26377;什?#20174;?#21709;等等,只有对行业了解的更深入,才有更多的机会享受行业带来的红利。 以上是我的个人看法,当然设计师如何选择C端和B端,这和自己的兴趣、职业方向有非常大的关联。偏视觉的设计师做B端产品时肯定会有一些局限性,偏?#25442;?#30340;设计师在你经历完B端的产品设计之后,你会发现C端的逻辑真的很简单。所以无论怎么选,请先考虑好你自己的个人因素,并不能因为现在B端火,你就跟风,喜不?#19981;丁?#36866;不适合、能不能在B端领域生存下去,还是要看你自己。 关注公众号【设计达人】,在后台回复“后台模板?#20445;?#21363;可获得整套模板?#27425;?#20214;哦! 作者:?h梓暄 来源:UXD笔记(id:UX_zixuan) ?


(ノ???)ノ*:??? 查看最受?#38431;?301 个设计网站 *:???ヽ(???ヽ)

UI设计QQ群 | RSS订阅 | 新浪微博 | 本文链接 | 添加评论
]]>
http://www.vdfq.tw/c-to-b-de-chanpin-sheji-zhi-lu.html/feed 0
学会这21个Sketch实用?#35760;桑?#35753;你设计省时省力 http://www.vdfq.tw/21-sketch-ji-qiao.html http://www.vdfq.tw/21-sketch-ji-qiao.html#respond Tue, 18 Jun 2019 00:00:35 +0000 http://www.vdfq.tw/?p=30810

Sketch之所以受 UI 设计师们?#38431;?#20027;要是它拥有非常多的实用功能,不仅方便,而且大大加快设计师绘制 UI 的速度,比如之前小编介绍的《学会组件UI设计,5分钟快速修改100多个界面》就是最实用的?#35760;?#20043;一,而今天主要分享一些新人不会知道的 Sketch ?#35760;?#25945;程(其实很多人也不知道却非常实用),?#24067;?#20998;钟时间学习这些?#35760;桑?#35753;你在实战中节省 N 小时。

1. 缩放大小

??用 Scale 工具缩放 理由:样式属性如边框厚度、圆角大小、阴影大小等,会?#32570;?#20363;的缩放 ? 手动拖拽缩放 理由:样式属性保持不变,不会?#32570;?#20363;的缩放

2. 缩放大小

??像素值均为整数 理由:输出切图时像素清晰 ?#35760;桑?#33258;动像素取整方法:Arrange → Round to Pixel ? 像素值出?#20013;?#25968;点 理由:输出切图时像素模糊

3. 在路径正中间添?#29992;?#28857;

??按住 Shift 键,精准添加 理由:精准、无需微调其坐标数值 ?#35760;桑?#22312;两点之间添?#26377;?#30340;锚点时按住 shift 键,便会得到两点间的锚点 ? ?#28010;?#20013;间位置添加 理由:不精准,需要手动微调其坐标数值

4. 绘制环形进度条

??绘制描边圆形,将“Gap”设置为直径*π,调整“Dash”数值改变进度 理由:可灵活调整进度 ? 绘制描边圆形,用剪裁工具进行?#20204;?/b> 理由:不能灵活调整进度

5. 复制旋转

??使用“旋转副?#23613;?#25209;量复制旋转 理由:可批量设置复制数量、灵活调整缩放尺寸 ?#35760;桑?#32472;制一个矢量图形,Layer → Paths → Rotate Copies (图层-路径-旋转副本),然后按自己需要选择副本数量,就可以得到复制旋转的效果了 ? 手动多次复制图形,调整其位置角度 理由:不能批量设置复制数量、灵活调整缩放尺寸

6. 文本宽度

??文本框长度设成 Fixed 模式(最大宽度) 理由:方便RD了解文本最长宽度是多少 ?#35760;桑?#24314;议在设计稿中?#25925;?#36229;出长度截断的情况 ??文本框长度设成 Auto 模式 理由:RD不知道文本最长宽度是多少

7. 分割线条

??通过 Inner Shadows 属性实现分割线 理由:调整分割线时,?#25381;?#21709;单个容器,更灵活 ?#35760;桑?#35774;置内阴影的渐变为零,只需要一边的方向为负数即可 ??通过 Line 对象实现分割线 理由:调整分割线时,会同时影响到上下两个模块

8. 模块间隔

??通过间距留白,实现模块间隔 理由:通过调整单个模块的位置,灵活调整间距 ??通过填充色块,实现模块间隔 理由:调整间隔色块时,会同时影响到上下两个模块

9. 文字环绕效果

??建立路径,生成文?#33268;?#24452;环绕效果 理由:可灵活调整路?#37117;?#25991;字样式 ?#35760;桑?#26032;建一段文体以及一段路径,选?#24418;?#26412;,Text → Text on Path,把文本移至路径旁边即可 ??单独调整每个文字的角度 理由:不能灵活调整路?#37117;?#25991;字样式,过于费力

10. 图层编组

??图层进行合理的编组和命名 理由①:方便自己?#32610;?#29305;定模块、图层、历史版本 理由②:方便团队其他设计师的再次编辑和利用 ??图层随意摆放,命名乱七八糟 理由①:不利于自己?#32610;?#29305;定模块、图层、历史版本 理由②:不利于团队其他设计师的再次编辑和利用

11. 输出SVG矢量图标

??合并成单层形状,尽?#32771;?#21270; ?#35760;散伲?#22914;果有两个以上图形,或者有?#32423;?#20851;系的图形,请对图形合并并且扩展 ?#35760;散冢航?#25551;边转化为闭合图形 ??图层多、没有合并形状 理由:生成图标时代码中会生成多个path,导致图层错位

12. 输出?#35813;?#24213;图标

??勾选 Export group contents only 理由:在选中?#26800;?#22270;层的状态下,勾选后只导出?#26800;?#22270;层所在组以内元素,?#35813;?#24213; ??不勾选 理由:不勾选,切图会连同背景色一起输出

13. 快速调整不?#35813;?#24230;

??通过数字键,快速调整不?#35813;?#24230; 理由:数值精准、效率高 ?#35760;桑?#36873;?#24615;?#32032;,然后?#35789;?#23383;键即可直接设置其不?#35813;?#24230;,例如“1”代表10%,“5”代表50%,“9”代表90%,“75”代表75% ??鼠标拖拽,调整不?#35813;?#24230; 理由:数值不精准、效?#23454;?

14. 快速设置圆角

??一次性设置,由分号隔开 理由:一次性设置,效率高 ?#35760;桑?#22312;?#20063;?#38754;板的“半径 (Radius)”中输入一组四个数字,由分号隔开,分别代表左上角、右上角、右下角、左下角的半径值,例如“20;10;5;0” ??依次选中每个点,调整圆角 理由?#22909;?#20010;点单独设置,效?#23454;?

15. 快速组内单选

??按 cmd 键可直接选中组内元素 理由:更快捷方便 ?#35760;桑何?#38656;到图层列表中?#32610;遙?#25353;住 cmd 键,同时用鼠标直接指向该元素,即可?#25353;?#36879;”分组,直接选?#24615;?#32032; ??双击编组,再选中组内元素 理由:需啪啪啪双击多次

16. 快速吸取颜色

??按 conrtol c 快速吸取?#32842;?#19978;的颜色 理由:更快捷方便 ??点击颜色面板 → 点击吸管工具 理由:需点击多次

17. 属性栏的“加减乘除”运算

??直接在属性栏输入计算式 理由:更快捷方便 ?#35760;桑?#25552;供有“ ?#20445;??#20445;??#20445;埃?#30340;运算编辑,如333*2,按回车键即可变成数值666 ??点打开计算器算 理由:需切换外部计算器工具,再复制黏贴数值回来,比?#19979;?#28902;

18. 图形默?#40092;?#24615;

??直自定义图形默?#40092;?#24615;,一劳永逸 理由:设置适合自己的常用图形默?#40092;?#24615; ?#35760;桑?#26032;建一个自己常用的矩形样式,然后选择 Layer → Style → Set as Default Style,下次再新建形状时就会以你刚设置的样式作为默?#29616;?#20102; ??每次新建时,手动调整图形属性 理由:新建形状时,每次都会自带描边。但画UI时并不需要到处都有灰边。每次手动删除描边很麻烦

19. 快速复制样式

??快捷键 Alt ? C、Alt ? V 理由:更快捷方便 ??选中对象1右键复制样式、对象2右键黏贴样式 理由:需点击多次,?#19979;?#28902;

20. 快速折叠所有画板

??View → Layer List → Collapse All Groups 理由:一次性快速收起所有画板,方便快捷 ??一个个手动点击收起画板 理由:需点击多次,?#19979;?#28902;

21. 智能缩放

??使用Resizing功能,响应式调整元素 理由:?#22791;?#21464;编组尺寸时,其中包含的元素将不再被简单?#30452;?#30340;拉伸,以至形状及布局结构被彻底破坏,而是会有规则的缩放、位移,或保持尺寸及位置恒定 这21个 Sketch ?#35760;?#22312;设计实战中是经常会用到,也希望对新人有所帮助~ ?? ? ?? thanks for watching 可能有不对的地方或更好的方法~? ?#38431;?#30041;言或私信一起?#33268;邸? 作者:大秘密mimi 个人主?#24120;篽ttps://damimi.zcool.com.cn/


(ノ???)ノ*:??? 查看最受?#38431;?301 个设计网站 *:???ヽ(???ヽ)

UI设计QQ群 | RSS订阅 | 新浪微博 | 本文链接 | 添加评论
]]>
http://www.vdfq.tw/21-sketch-ji-qiao.html/feed 0
版面丰富的书籍封面作品,可作为排版临摹练习哦 http://www.vdfq.tw/100-ge-shuji-fengmian-paiban-lianxi.html http://www.vdfq.tw/100-ge-shuji-fengmian-paiban-lianxi.html#respond Mon, 17 Jun 2019 00:00:38 +0000 http://www.vdfq.tw/?p=30804

若想快速提高设计技能,设计师可以使用?#32538;?#24847;练习」法,?#26085;业?#30446;前最需要和自己最缺乏的技能然后有针对性的练习,这是非常好的练习方法,但却很少人坚持下去。刘哲_NewJoy原本是字体设计师,后来发现自己包装版式方面的设计比较欠缺,为了提升水平,开始学习版式设计,并且开始他的100本书籍封面排版设计项目,?#36136;幣迅?#26032;第87个封面。 这些书封的排版虽然「工整」,但却不乏味,设计师很好的利用栅格、?#24179;?#27604;例、字体的层级运用以及素材的表?#36136;?#27861;,让书籍封面变得层次丰富,也符合书籍内容的展?#20013;?#27714;,而并非停留在「只求美观」这一步。
一些谈话: 为什么?#19981;?#29256;式设计? 刘哲_NewJoy:我本来是学字体设计的,想上站酷首?#24120;?#20294;是发了很多作品,都不能?#40092;滓场?#21518;来我发现自己对作品的“包装”比较欠缺,于是去学习了版式。 设计100本书籍封面的原由是? 刘哲_NewJoy:学习了版式设计以后,每日进?#24418;?#23383;组练习、临摹。 后来我发现可以拓展玩一下,正好日常?#19981;短?#20070;,就把文字组内容换为书籍内容来做一下排版练习,版面增加颜色、?#35745;人夭模?#21152;上效果图,以书封的形式呈现出来。 什么动力让您坚持完成这100个封面设计? 刘哲_NewJoy:目标是做100份书封,怕打?#24120;?#23601;坚持做下去了。 小编注:看来 100days 练习对刘哲来说真的没什么难度,大?#20063;环?#35797;试这个极速有效的练习方法。 今天就分享到这里,是否希望作者出一篇教程?请「分享本文」,让我看看你们的热情。 作者?#27627;?#21746;_NewJoy 个人主?#24120;篽ttps://newjoy.zcool.com.cn/


(ノ???)ノ*:??? 查看最受?#38431;?301 个设计网站 *:???ヽ(???ヽ)

UI设计QQ群 | RSS订阅 | 新浪微博 | 本文链接 | 添加评论
]]> http://www.vdfq.tw/100-ge-shuji-fengmian-paiban-lianxi.html/feed 0 Sketch 迁移到 Figma 值得吗?这里会给你答案 http://www.vdfq.tw/sketch-to-figma.html http://www.vdfq.tw/sketch-to-figma.html#respond Sat, 15 Jun 2019 08:15:59 +0000 http://www.vdfq.tw/?p=30802

去年 10 月开始阅文海外设计从 Sketch 迁移到 Figma。如果你还不了解 Figma 或者在?#28120;?#35201;不要切换到 Figma,这里会给你答案。
“?2017 年 11 月的某个周六,笔者去参加 sketch meetup 的线下活动,虽?#27426;?#37027;次活动分享的嘉宾和内容已完全忘却,但是唯独一点?#20004;?#20173;记忆犹新,?#24418;?#22025;宾的分享是 Figma 的介绍,在 Q&A ?#26041;諫希?#35266;众问,你为什么选择换 Figma?感觉比起 Sketch 并没有那么大的吸引力,嘉宾答,因为当时我的 Sketch 到期了 : ) 台下立马一片欢笑。”
现在回想起来当时的情景还是会感觉很有趣,一方面是嘉宾如此耿直?#21738;?#21478;一方面则是笔者当时也抱着「Figma 相比 Sketch 没有那么大吸引力」的想法一笑了之,直到一年后上手体验了这款设计工具,(摸着被打红的?#24120;?#24863;慨真真真真香。赶上那时 Sketch 52 上线,不仅上线了全新的界面与黑夜模式,还?#21576;?#22686;加了内存泄漏,「修复」了过于流畅的 bug,在笔者被卡的生活不能自理后毫不?#28120;シ牌?Sketch,?#24230;?Figma 的怀抱。 ?#38142;耍?#38405;文海外项目 Webnovel 迁移到 Figma 半年多时间,想和大家分享这款令人惊叹?#20174;?#30456;对冷门的设计工具在项目实践中一些些经验,本文主要分为:
  1. Figma 介绍:以为是个青铜结果是个王者
  2. Figma 与 Sketch
  3. 封闭与开放
  4. Figma 组件化实践
  5. 缺点以及 Figma 值得使用吗?

1、Figma 介绍:以为是个青铜结果是个王者

说了那么久还没有正式介绍 Figma,这是一款基于 Web 的在线设计工具,很多用户包括笔者在内对于在线工具下意识的会有性能差,功能弱的感觉,尤其是对于一款专业的生产力工具这种不靠谱的感觉更为强烈。 然而实际体验下来会发现 Figma 不仅功能完善,与 Sketch 相?#32570;?#26080;二致;而?#20063;?#20316;体验?#32454;?#26159;如丝般顺滑,虽然是网页应用,但 Figma 的编辑器是用 C 编写,通过 emscripten 将 C 编译为 JavaScript 的方式获得更高效的代码与内存控制,得以达到 60fps 的流畅度与 2x 于原生应用的性能。因?#22235;?#23436;全可以放心大胆的去使用这款在线设计工具,体验一番 Figma 独特的魅力,从此告别被 Sketch 低下的性能支配的?#24535;濉? 那一天,设计师终于回想起曾经一?#32570;?Sketch 支配的?#24535;澹?#36824;有封闭于设计孤岛中的那份屈辱

2、Figma 与 Sketch

既然是一款专业的设计工具,与 Sketch 同一赛道的竞争对手,那自然是避不开与 Sketch 的正面交锋。 Sketch 界面 Figma 界面 Figma 与 Sketch 的布局与功能整体上非常相似,不过 Figma 异常简洁的导航栏可能会让人怀疑 Figma 的功能真的够完善么?#21051;?#29575;的说 Figma 确实有一些基础功能缺失,比如 Figma 的 Scale 只能手动拖拽目标缩放,不能像 Sketch 一样设定数?#21040;?#34892;缩放。但是相比那些无关痛痒的低频功能,Figma 没有 Sketch 的插件功能以及丰富的插件生态也许更让人遗憾。?今年 6 月 12 日,Figma 官方宣布开始插件功能内测,结合 Figma API 不知道会擦出什么样的火花,非常让人期待。 比 Sketch 弱?不存在的 事实上以上功能缺失完全不会影响到日常的设计工作,反而 Figma 所拥有的以下功能让 Figma 在整体的体验?#32454;?#36229; Sketch 数个身位:
  • 多人协作
  • 评论
  • 观察者模式
  • 版本控制
  • 标注(Developer Handoff)
  • 团队组件库与样式
  • 自动保存
  • 全平台制霸
  • 智能布局(Smart Selection)
1~8 项功能均得益于 Figma 在线的特性,让更直接更高效的多人协作模式成为可能,多位设计师可以在一个设计文件内同时进行编辑操作,添加评论进行沟通。而且一个链接就可以让所有人在任何平台上直接访?#23454;?#35774;计文件,发送给需求方 Figma 就是你们?#33268;?#20132;流的白板,发送给开发 Figma 就是在线的标注工具。 而 Smart Selection 则是笔者最?#19981;?#30340;功能之一,可以拿来下象棋(大雾) 双人象棋 Play / 象棋设计来自 @超能铜草帽 还能玩华容道、拼图什么的。以上是开玩笑的,Smart Selection 主要是用来批量操作矩阵,帮助设计师一步到位调整布局,省去拖拽、调间距等繁琐的操作。 通过 Smart Selection 快速操作列表间距与排序 / ?#35745;?#26469;自 Figma Twitter 类似的功能最早出现在 Adobe XD ?#24076;?#21518;来 Framer X 也增加了自己 Stack,实现了 CSS 的 Flex 布局一样的效果,Figma 也在去年 10 月左右跟进上线了 Smart Selection,并且经过三个月的迭代从原本的只能单独控制行或者列,进化到可以控制矩阵。 通过 Smart Select 快速布局内容 / ?#35745;?#26469;自 Figma Twitter 为创造高效生产环境而生的 Figma 毫不夸张的说设计师的日常工作只有 20 %的时间在发挥创意解决问题,80% 的时间都在重复一些机械操作?#38590;?#33394;、改间距、改排列、改命名改改改改?#27169;?#20445;存修改保存修改保存修改保存,最后还要整理文件同步文件,这些都让整个设计工作冗余、低效还无趣。 不知道 Bohemian Coding (Sketch 母公司)到底是傲慢还是无能才对此视而不见,Sketch 每个版本更新后除了更卡、bug 频出、插件又没法用、旧版又没法打开新版文件之外,几乎看不到其主动为设计师创造更高效的生产环境而作出的努力。即便是最近上线的 55 增加的 Smart Distribute 与 Create new layers from SVG code,还是 56 将会上线的 Team Collaborate 提升生产力的功能都是非常被动的从 Figma 抄袭搬运,虽然这些功能在 Figma 上已经上线了半年甚至一年之久。 相比不思进取的 Sketch,Sketch 的插件们为了提升设计效?#23454;?#26159;异常的用力,可惜的是优秀的插件却越来越少,从 Measure、Paddy 的退出可以瞥见 Sketch 的插件生态已经大不如前。 对比 Sketch,在越发深入的使用 Figma 后,越会发现 Figma 是一款更为先进、更理解设计师的工作方式和需求的界面设计工具,除了刚才列举的数个提升生产体验的功能,其还包含着大?#32943;?#33410;,如矢量网格、批量组件化,快速?#20174;?#23646;性,链接 Google Fonts 等等,都在帮助设计师从低效的泥沼中解放出来。不仅如此,Figma 让设计师无需再考虑操作系统,也不需要管理插件、存储,也不需要管同步和协同的问题,设计师唯一要考虑的是设计本身,就像他们自?#26680;?#30340;「让设计师专注于设计,其他的都见鬼去吧。」 之前在推特上看到 Eddie 发的一条推「If design tools were cars …」 Eddie Lobanovskiy@lobanovskiy :If design tools were cars … / ?#35745;?#26469;自 Eddie‘s ****Twitter 应该?#24213;?#32467;的非常准确,Sketch 像丰田的凯美瑞,有广大群众基础的老牌厂商的经典车型,而 Figma 则像 Tesla 一样性能卓越,超越时代充满未来?#23567;?#37027;未?#35789;?#20110;谁?反正不会是凯美瑞。

3、封闭与开放

Figma 被运用到海外项目 Webnovel 带来的最显而?#20934;?#30340;变化是我们不再使用 Sketch、Mesaure、Dropbox、Svn,白板,因为 Figma 本身整合了以上所有功能,省去了在不同工具之间切换,为我们节约了不少时间与精力,而且这样的整合不只是 1 1 1 1 的功能叠加而已,其中有着奇妙的化学?#20174;Γ?#20174;根本?#32454;?#21464;我们的工作模式。 设计孤岛 设计长久以来都像是一座封闭的孤?#28023;?#19981;仅与上下游的连接困难,甚至设计内部的连?#26377;?#29575;都极低。 关于前者,设计师交付给需求方的是一张导出的效果图,交付给开发的是标注与切图。设计文件因为专业设计工具的限制或者是共享的问题,项目的上下?#20301;?#26412;无法直接访问,这导致了每次设计师的输出都需要经历好几个步骤,而设计又会因为各种问题频繁发生修?#27169;?#36755;出设计?#35797;?#20256;递给上下游的低效链接方式损耗了设计师大量时间。更深入的说设计过程对上下游的不?#35813;?#20063;需要对低效负责。 而关于后者,连接设计师进行协作更是噩梦,暂?#20063;?#25552;设计文件在项目内的同步共享遇到的诸多问题,多位设计师在一个项目内协作只能单线程处理各自的需求,如果需要多位设计师同时合作完成一个需求?必然需要付出更高的沟通成本以对齐设计师之间的想法与设计效果。 协作的全新可能 Figma 的到来则打破了设计孤岛的封闭格局,连接设计与上下游仅仅只需要一个链接??,原本只能藏匿于设计师之间的 dropbox 共享文件夹的设计文件,现在项目中的所有成员都可以无障碍访问,无论是?#25442;?#31295;还是视觉稿、组件系统、设计规范。 分享 Figma 文件只需要复制链接即可,项目内的人则可以直接查看 对于设计师来说,?#35813;?#24320;放的设计文化可以让项目成?#22791;?#20102;解设计的工作与思考方式,减少与其他项目节点因信息不对等造成的不必要摩擦?#27426;?#20110;项目来说,产品、开发以及合作的设计师都可以看到一个需求是如何演化为设计稿的过程,参与者可以更早的提出想法与设计师交流,在充分的沟通下完成的设计可以有效避免完成后的反复修改。 刚才还提到了设计师之间的协作问题,现在我们每个版本的迭代都是由两到三位设计师在一个 Figma 文件内按需求分 Page 一起完成。不仅如此,Figma 的在线协作的特性还给了设计师之间的协作一个全新的可能,我们尝试了更紧密的协作设计模式,在一个?#26377;?#27714;下再拆分子任务,比如上个版本?#24418;?#20204;将段评需求分为页面框架与评论组件两个子任务,在同一个 Page 内一位设计师搭建页面框架,另一位设计师同步进行评论组件设计,多线程并行的模式让合作的设计师既能专注于各自的任务,又能轻松把控整体的设计效果,朝着一个目标快速前进。 也许这就是传说中的「结对设计」吧。

4、Figma 组件化实践

笔者所在的海外项目的产品 Webnovel 长久来没有统一的设计规范与组件系统,再经手多位设计师,经过多个版本的迭代之后,小到颜色、字体等基础属性,大到页面模块的新旧样式冗余混乱。所以趁海外项目迁移到 Figma 的契机,二月份开始着手 UI 组件库的设计与搭建。 组件的设计基本遵循原子化设计理念,从最基础的颜色、字体、字号等 Principle 元素开始,将相关元素放到我们的组件库文件的 「Token」页统一管理。 Webnovel Token Figma 的 Style 功能可以用?#22402;?#29702;所有你需要在项目进行?#20174;?#30340;样式,而且 Style 可以像 Component 一样在整个项目内共享。借助该功能将 Token 中的颜色属性、字体样式、阴影样式、分割线样式、栅格系统分别加入 Style,发布 Style 后项目中的所?#24418;?#20214;都可以快速访问并使用这些共享的属性或样式,另外如果共享的 Style 发生更?#27169;?#21487;以无缝更新到所有项目文件中。 Style 功能演示 而 Figma 的 Component 功能与 Sketch 的 Symbol 类似,通过创建组件来?#20174;?#30028;面中的模块与元素,不同的是 Master 组件复制生成的 Instance 可以修?#26576;?#20102;位置?#32479;?#23544;以外的所有属性,结合 Style 能快速实现样式替换。 Component 结合 Style 功能演示 其实在 Figma 官方在二月底发了一篇关于组件化最佳实践的博文给了笔者非常大的启发,虽然当时组件库文件已经初具规模,但是还是毅然拆分并重新组织了组件库,因为笔者原本继续沿用了之前在 Sketch 上组件的设计与管理方式,完全没有发挥 Figma 本身的一些特性来提高组件建设效率。 当时的重建组件库的改动主要包含两点: 拆分组件库 将原?#26223;?#21547;属性样式、图标、基础组件、业务组件等一个庞大的组件库文件按类拆分为几个独立的组件文件,一方面 Figma 通过 Team Library 共享组件非常便捷,即使拆分文件也不会带来任何额外的负担,反而更加方便后续的拓展,另一方面分类后的组件库各司其职更加清晰明了。 将组件和样式拆分到不同到文件中 重新组织组件 Figma 可使用 Page 以及 Frame / Group 的方式将组件归类,意味着我们不再需要像 Sketch 那样使用 「/」通过修改命名这种繁琐的方式组织组件(当然 Figma 也支持「/」分类,不过你不会去用它的)。 使用 Page 与 Frame 组织组件库 因此我们可以将 Page 作为组件的大类,如 Buttons,以 Frame 的来划分 Buttons 的类型,最后 Buttons 只需要以状态 / 子类型命名即可。优化后的组织形式的方便任何人浏览,而且也更符合直觉,回忆一下 Ant Design、Material Design 等规范类的网站界面的布局,是不是非常接近? 左侧 Figma 上 Webnovel 组件库,?#20063;?Material design 网页 除此之外,其实组件本身也做了部分优化,比如对组件与样式添?#29992;?#36848;信息;通过实例化 Principle 元素引入更细的粒度让组件更加灵活;在使用约束的基础上加入栅格提升组件自?#35270;?#25928;果,但还是处于探索阶段,这里笔者不再赘述,希望以后有机会再分享。 组件库设计的核心诉求是方便你的用户(项目中的设计师、开发以及其他任何需要组件库的人?#20445;?#24555;速查找、理解和使用。把它当作一款产品去对待,做好组件本身只是产品体验的一个?#26041;冢?#21435;思考更有效率的形式,尝?#36234;?#20837;新技术,时刻倾听用户的反馈才能把这款产品打磨的更优秀。

5、缺点以及 Figma 值得使用吗?

作为一款在线的设计工具,Figma 的缺点也是非常显而?#20934;?#21463;限于网络环?#24120;?#22914;果网络状态不佳访问设计文件都非常困难,此外对于国内多数团队来说,将文件完全存放在别人的服务器上几乎是无法接受的事实。 那 Figma 值得使用吗? 对于设计师个人 答案是非常值得体验一番,设计师应该是一群对新趋势新事物新技术保持好奇心的物种,一个工具往往诞生于用户需求与?#36136;?#20135;品能力的鸿沟之间,如果它诞生之后还得到了发展、受到众人?#25918;?#37027;必然还顺应时代趋势,甚至影响趋势,如当年扁平化趋势下 Ps 与 Sketch 之争,假如没有扁平化大?#19968;?#20250;选择 Sketch 吗?#32771;?#22914;没有 Sketch 扁平化会这么快?#21697;?#25311;物化吗?扁平化后迎来了动效的?#20284;穡?#21508;种动效软件群魔乱舞也是同样的道理。体验一下 Figma 就可以发现当下我们的协作方式还会有新的可能,当然还有更多的有趣好玩的细节等你去发现。另外值得一提的是,Figma 个人使用完全免费! 对于设计团队 对于绝大部分大公?#23601;?#38431;不值得,原因是推动设计工具更替困难重重,首先网络和存储就是?#37319;耍?#29305;别是存储问题在很多大公?#23601;?#20840;无法跨越。其次设计?#35797;础?#29983;产环境的迁移也是问题(Figma 支持导入 Sketch 文件),还有团队使用 Figma 至少 $144 / 人 / 年的支出,比 Sketch 贵了不少。Figma 相比 Sketch 虽然更优秀,但并不是革命性的产品,即使效率提高了,?#37027;?#24841;悦了,该修的福报还是要修的。 不过如果老大出面自上而下?#24179;?#25110;者是在像我们 YUX 这样开放包容的团队中推动那就是另一番情景 : p 对于小型团队那基本上用就是了。 最后如果想上手 Figma,可以先浏览他们在 Youtube 上的官方基础视?#21040;?#32461;,快速刷一遍就可以开始。 作者:阅文体验设计YUX 个人主?#24120;篽ttps://www.zcool.com.cn/u/18178178


(ノ???)ノ*:??? 查看最受?#38431;?301 个设计网站 *:???ヽ(???ヽ)

UI设计QQ群 | RSS订阅 | 新浪微博 | 本文链接 | 添加评论
]]>
http://www.vdfq.tw/sketch-to-figma.html/feed 0
还不会做动态 LOGO?各大品牌已经在用 http://www.vdfq.tw/dongtai-logo-sheji.html http://www.vdfq.tw/dongtai-logo-sheji.html#respond Fri, 14 Jun 2019 08:22:39 +0000 http://www.vdfq.tw/?p=30800

设计趋势离不开当下媒体技术的发展,这几年动态设计的热度?#20013;?#22686;长,动态LOGO也已经常见于品牌设计和营销了。 近期由 72andSunny Amsterdam 操刀设计的,瑞典巨头家具品牌ikea?#24605;?#30340;全新动态标志系统“F?nster”面世,旨在“?#20174;騁思?#19982;世界的联系,以及世界与?#24605;?#30340;联系”。 LOGO动态化,是未来品牌必备的呈现方式。这也是设计师需要学习的新技能之一。 为什么? 1.更好地呈?#21046;?#29260;?#36866;?/strong> 动态LOGO和传统LOGO可以同时存在,当LOGO动起来,设计师更多了一种传达品牌?#36866;?#30340;方式,跳出局限于平面的呈现方式,让用户以一种全新的方式来感知品牌。 2.具有更高的识别度 动态LOGO比静态LOGO更容易为用户所理解,能够更好的吸引潜在用户的注意力,也更容易被记住。 3.?#21483;?#29992;户的情绪 动态图像能够让人喜悦、兴奋、触发用户不同的情绪。一个有趣的动态LOGO能够给用户带来积极的情绪的时候,他们会将LOGO和快乐的东西联系起来。 4.应用范围更广,效果更好 社交网络是产品推广的主要平台之一。不管是网?#22330;pp,动态?#35745;?#21644;视频,都是有着强大传播力的营销工具,它们易于共享,?#24615;?#33021;力强。所以,动态LOGO更易于在互联网上广泛的传播,也可以融入到产品视频等不同的形式,进行广泛的分享。 下面是一些有趣的动态图标作品: 作者:Adam Grabowski 作者:YaroFlasher 作者:Piotr Wojtczak 作者:Shakuro 作者:Eduard Mykhailov 作者:Balkan Brothers 作者:Maksim Marakhovskyi 作者:Ramotion 作者:Ramotion 作者:Aleksey 作者:Dmitry Lepisov 作者:Eddie Lobanovskiy 动画师Eduard Mykhailov用GIF呈现我们常见的英语单词,文字动态化,也让常见的语言变得更加有趣。 作者:Eduard Mykhailov 让文字图形动起来,其实早已在影视作?#20998;?#24120;见,而短视频是产品营销中效率最高的一?#36136;?#27573;,在促销视频中使用动态LOGO,会让营销更加有效。设计师们,赶快提升自己吧。


(ノ???)ノ*:??? 查看最受?#38431;?301 个设计网站 *:???ヽ(???ヽ)

UI设计QQ群 | RSS订阅 | 新浪微博 | 本文链接 | 添加评论
]]>
http://www.vdfq.tw/dongtai-logo-sheji.html/feed 0
这样设计App Store应用截图,可提高下载率 http://www.vdfq.tw/how-to-design-scannable-app-screenshots.html http://www.vdfq.tw/how-to-design-scannable-app-screenshots.html#respond Wed, 12 Jun 2019 06:05:58 +0000 http://www.vdfq.tw/?p=30798

一款产品的?#35789;?#20154;,需要在短时间内说服风投进行投资时,一般会怎么做?重点?#24425;鯝PP的主打功能?阐明与竞品相比的独特优势?或是大谈产品极致的用户体验?这个问题我们可以留给?#35789;?#20154;。 那一款产品,如何在短时间内吸引用户下载呢?这个问题可以从设计App Store应用截图入手,通过优化APP截图视觉从而提高下载量。 先让我们看一个调查了25000个用户和10000个应用的下载研究,调查结果显示:在App Store,用户平均用时7秒决定是否下载一个APP,其中应用截图是仅次于应用评分的第二大影响因素。
研究报告:我们发现用户在?#36824;?#21830;店的应用下载页面,只会停留7秒钟。事实上大部分用户停留的时间只会更短,用户如果有明确的下载需求,花费的时间会长一点。但是用户的操作行为非常一致:一?#20174;?#29992;图标,二浏览前两张截图,三快速扫描应用的文字?#24471;鰲狿eter Fodor, Why 7 seconds could make or break your mobile app
应用截图就像一面?#24213;櫻?#21487;以快速?#20174;矨PP的功能和体验。利用 Incipia团队?#21344;?#30340;相关APP数据,我研究了头部100个应用的?#32842;?#25130;图。在进行多种角度的研究后,发现了截图设计的关键方法。

设计案例:HeyDoctor

Heydoctor是一款在线医疗APP,可以让用户足不出户就享受到家庭医生般的服务。 目前HeyDoctor在App Store有122个评论,评分4.7。它支持在线开具处方和补充药物处方,同时提供一些简单的治疗服务。 我们将重新设计它的?#32842;?#25130;图,同时学习如何设计可扫描和易读性强的截图。

免责声明

首先声明,?#20063;?#38750;HeyDoctor的工作人?#20445;?#26412;次重设计完全是个人研究。由于并非这款APP的设计师和产品人?#20445;?#25105;无法全面了解用户群体,页面设计和功能流程,因此本次的重设计并不能尽善尽美。产品设计往往需要综合考?#21487;桃的?#26631;,?#35797;?#25490;序?#22270;际?#38480;制,并?#22681;?#20165;只是设计本身。所以?#20063;?#19981;建议HeyDoctor采用我的设计方案做替换。 图:“Make your app flat”?—?some guy. Meme credits:@parasmael

目前的设计

让我们先来看看HeyDoctor的?#32842;?#25130;图 三?#29260;聊?#25130;图均由主标题 副标题 页面截图组成,可以很好地?#24425;?#29992;户?#36866;隆?#21407;有的品牌色和UI设计,在重设计时会继续保留。

用户?#36866;?/h3> 开始深度设计前,需要了解用户会出于哪些需求下载HeyDoctor 1 )在线开具处方:? 用户希望无需见医就可以开具处方和补充处方 2 )治疗疾病: 用户想在线上进行疾病治疗 3 )咨询医生: 由于时间,经济和通勤的限制,用户希望线上咨询医生 4 )医疗服务无需保险: 由于没有医疗保险或者医疗保险的费用高?#28023;?#29992;户想要无需保险的医疗服务

截图or缩略图?

2018年主流智能手机的?#32842;怀?#23544;为5.5英寸,相较于第一代iPone的3.5英寸,增长了35%的?#32842;?#38754;积。在设计更大的?#32842;?#25130;图时,一种思路是增加文字,但我们观察到的情况却截然相反。
长期观察中发现,竖屏模式下只有不到4%的用户,会点击截图查看;而横屏模式下只有2%,对于游戏玩家用户,这个比例不到0.5%。用户可能仅凭截图缩略图就可以了解整个APP。—Peter Fodor
不少App的设计师已经注意到4%这个指标,开始设计无需点击即可浏览全貌的截图。2016年,用户的习惯可能是点击截图缩略图放大,进而查看全部的内容;但是随着App Store的设计布?#30452;?#21270;和大屏化的趋势,用户已经习惯一扫而过。 对比下在2016~2018年重新设计过的APP,几乎全部采用了更少的文字和更大的字体。

神奇的数字2

应用市场排名前100的APP中,78个使用了5张截图,13个使用了4张截图,6个使用了3张截图,另外2个仅使用了2张截图。如果作为一个开发,你可能错误地觉得应该放置5张才好,毕竟截图越多,?#25925;?#30340;内容越多。 其实只有9%的用户会滑动页面去查看更多截图,横屏模式下的用户更少,只有5%。所以截图必需在前两张就设法吸引住用户。第1张截图可以告诉用户APP的功能,然后在后续的截图内?#25925;?#20855;体信息。
我们的研究很清晰的?#35813;鰨?#31446;屏模式下,App必需在前2张截图(iOS10, Google Play),或者前3张截图 (iOS11) 来?#25925;?#24212;用的核心功能。而如果是宽屏模式的截图,你只有第1张截图有机会?#25925;?#26680;心功能。—?Peter Fodor
我们可以用一些常用App的前2张截图验证下。

UI元素突出显示

用户通常扫视应用截图并借助文字?#24471;?#21435;了解APP的功能。但更简单的设计方案是:APP功能相关的UI元素突出显示,而不是过度依?#28404;?#23383;。 我们来看一些示例

学习点(敲黑板)

1 ) 前2张截图务必?#25925;?#26680;心的用户?#36866;? : 只有9%的用户会去滑动查看超过2张的截图 2 ) 增大字体同时减少?#36136;? ?随着大屏化的趋势,用户越来?#36739;?#24815;直接查看截图,事实上也只有4%的用户会去点击截图查看 3 )功能相关的UI元素突出显示? : 可以让截图一目了然,增加易读性 增强截?#23478;?#35835;性的方法就是如上三点,现在我们开始练习下这些方法 Step 1:使用最新的iPhone去截图 HeyDoctor目前是使用旧版iPhone截图。并非鼓励大家更换手机,我也很珍惜我的旧iPhone,但是截图使用最新的iPhone会更完美。 Step 2:减少文字,增加易读性 副标题和文字?#24471;?#21024;掉,同时字体变大。简洁的设计模式,用户?#36866;?#21482;会更易读。 很明显,第三张截图图文不符。标题表明提供医疗服务无需保险,页面截图却是设置功能页面。打开HeyDoctor,处方服务功能的第一个页面更符合主题。它间接暗示用户,无需保险也可得到医疗服务。 Step3 ?突出显示功能相关的UI元素 如前文所述,功能相关的UI元素突出显示,使得文字更有可扫描和易读性。两者相辅相成,用户因此更容易理解截图内容。 聊天界面UI 我们看看Tinder采用什么方法突出UI元素 它巧妙地使用了个人头像,聊天气泡和品牌颜色来模仿真实的聊天用户界面。 我们也来尝试下 我们将制作的聊天?#35745;?#25554;入?#32842;?#25130;图内 聊天界面设计中,聊天气泡采用HeyDoctor的品牌色。APP的设计中,医生角色没有头像,因此选择性的删掉。 卡片和?#38431;?/b> 我们看看Uber采用什么方法突出UI元素 它做了点细微的改变,使用卡片和阴影来突出UI元素。我们也来尝试下这种方法。 将标题移到?#32842;?#25130;图下方,用户会在标题之前看到突出的UI元素。 Step 4:外观设计变化 针对?#32842;?#25130;图,已经总结了3种不同的优化设计方法。接下来从视觉方面进行优化,毕竟良好的视觉设计可以很好的吸引用户。 增加透视?#32842;?/b> 等距?#32842;?#20855;有现代感?#22242;?#20809;的高级感,不论是Apple的广告,还是Dribble?#32454;?#24230;抛光的模型产品,都可以看到它的身影。 因此我做了HeyDoctor的一系列透视?#32842;?#22270; 考虑到常用App 平均放5?#29260;聊?#25130;图,而目前只设计了3张,我把第一张透视模型图拆分为2?#29260;聊?#25130;图。 第一?#29260;聊?#25130;图的标题-?“Your personal doctor?#20445;?#31616;练的总结了HeyDoctor的所有功能并且易于阅读。 渐变色背景 个人觉得目前的背景色和前景色的色彩对比太强烈,因此把背景色调成明度高一点的蓝色。 我们使用新的蓝色做一个渐变色 来看下最后修改好的?#32842;?#25130;图 非常完美!继续在标题下方添加一道凸纹,可以明显区分开?#32842;?#36879;视图和标题文字 从web网站(https://www.freepik.com/)下载了一张很酷的矢量插画,用它做最后一?#29260;聊?#25130;图。 最终的设计 之前 之后

总结

一言以蔽之,?#32842;?#25130;图仅仅经过4个步骤的迭代优化,就显著地增加了阅读的效率和现代?#23567;?#32780;且,任何一个步骤的优化都不需要艺术天?#24120;?#21482;要学会从常用APP里发现问题,并?#32610;?#35299;决方案即可。 ?#34892;?#38405;读本?#27169;?#21608;末写这篇文章很有趣,希望可以给大家一个设计APP?#32842;?#25130;图的新思路。 原?#27169;篽ttps://medium.com/free-code-camp/ux-best-practices-how-to-design-scannable-app-screenshots-89e370bf433e 作者:Girish Rawat 译者:Luserry (id: caiyunyisheji)


(ノ???)ノ*:??? 查看最受?#38431;?301 个设计网站 *:???ヽ(???ヽ)

UI设计QQ群 | RSS订阅 | 新浪微博 | 本文链接 | 添加评论
]]>
http://www.vdfq.tw/how-to-design-scannable-app-screenshots.html/feed 0

    <output id="13r3l"></output>
    <cite id="13r3l"></cite>
      <tt id="13r3l"><pre id="13r3l"></pre></tt>
      <code id="13r3l"></code>
    1. <listing id="13r3l"></listing>
      <tt id="13r3l"></tt>

      1. 
        
        <listing id="13r3l"></listing>

        <listing id="13r3l"></listing>
      2. <label id="13r3l"><pre id="13r3l"><dd id="13r3l"></dd></pre></label>

        <tt id="13r3l"><pre id="13r3l"><big id="13r3l"></big></pre></tt>

        <del id="13r3l"><wbr id="13r3l"></wbr></del>
          <output id="13r3l"></output>
        1. <tt id="13r3l"></tt>
          <span id="13r3l"><video id="13r3l"><ruby id="13r3l"></ruby></video></span>
          <span id="13r3l"><video id="13r3l"><strike id="13r3l"></strike></video></span><strike id="13r3l"><video id="13r3l"></video></strike>
          广东快乐十分预测杀号

            <output id="13r3l"></output>
            <cite id="13r3l"></cite>
              <tt id="13r3l"><pre id="13r3l"></pre></tt>
              <code id="13r3l"></code>
            1. <listing id="13r3l"></listing>
              <tt id="13r3l"></tt>

              1. 
                
                <listing id="13r3l"></listing>

                <listing id="13r3l"></listing>
              2. <label id="13r3l"><pre id="13r3l"><dd id="13r3l"></dd></pre></label>

                <tt id="13r3l"><pre id="13r3l"><big id="13r3l"></big></pre></tt>

                <del id="13r3l"><wbr id="13r3l"></wbr></del>
                  <output id="13r3l"></output>
                1. <tt id="13r3l"></tt>
                  <span id="13r3l"><video id="13r3l"><ruby id="13r3l"></ruby></video></span>
                  <span id="13r3l"><video id="13r3l"><strike id="13r3l"></strike></video></span><strike id="13r3l"><video id="13r3l"></video></strike>

                    <output id="13r3l"></output>
                    <cite id="13r3l"></cite>
                      <tt id="13r3l"><pre id="13r3l"></pre></tt>
                      <code id="13r3l"></code>
                    1. <listing id="13r3l"></listing>
                      <tt id="13r3l"></tt>

                      1. 
                        
                        <listing id="13r3l"></listing>

                        <listing id="13r3l"></listing>
                      2. <label id="13r3l"><pre id="13r3l"><dd id="13r3l"></dd></pre></label>

                        <tt id="13r3l"><pre id="13r3l"><big id="13r3l"></big></pre></tt>

                        <del id="13r3l"><wbr id="13r3l"></wbr></del>
                          <output id="13r3l"></output>
                        1. <tt id="13r3l"></tt>
                          <span id="13r3l"><video id="13r3l"><ruby id="13r3l"></ruby></video></span>
                          <span id="13r3l"><video id="13r3l"><strike id="13r3l"></strike></video></span><strike id="13r3l"><video id="13r3l"></video></strike>