首页

海报排版设计没有想法,这招真的很有用!!

seo达人



一部97年的科幻类型电影,我们来一起看看它的海报设计有什么值得我们学习的地方。

图片

当我们手里有几张照片时,上面这张海报的设计方式就特别适合我们借鉴,三张照片依次等距裁切下来,标题放在视觉中心处,文本的编排可以贴着图片的边界放,效果就出来了。

图片

这张和上面那张方式类似,主体是两张照片裁切,信息全部居中对齐,色调进行了统一。

图片

这张我们可以学习的是什么呢,首先是人物的双重曝光手法,是人物主体经常用到的方式,再就是背景的重要性,后面用了渐变的圆形来增强视觉效果,所以有时候背景不需要太复杂,重复的元素就可以表现的很有感觉。

图片

插画形式往往更注重创意和视觉性,这里用了对称构图,也传达出电影核心要素是基因。

图片

这张与上面的类似,变成了对角构图,同时元素的处理是写实的,感觉上会有所不同。

图片

这张主要的是创意的表达,将火箭的尾气变成了基因。

注:以上图片来源网络,版权归设计者所有。

学会了吗?


作者:设猎派

转载请注明:学UI网》海报排版设计没有想法,这招真的很有用!!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


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



转化利器-用户行为模型

seo达人



图片

试想一下我们只知道通过奖励去激励用户行为的话,不仅会花费比较大的运营成本,有时候,还不一定见效。而对于我们自身的成长来说,如果一直都用这种套路,很容易形成“路径依赖”,限制思维。所以我们需要把视野再拓宽一些,通过用户行为的三大要素动机、能力、触发挖掘更多的用户动机,帮助我们做转化。

 

图片

“设计是人为的,为人的行为”,行为设计学是一门为改变用户行为而设计的新兴科学,它起源于1930年哈佛大学的心理学家B.F.Skinner的一个实验,结果表明:只要设计好激励措施和机制,人就会按照设定的目标推进。

试想一下我们在为用户设计的过程中,在需求正确的情况下,目标用户依然觉得我们的产品不好用,多半是用户完成某任务时行为路径遇到问题。这些问题可能不符合用户心理模型、行为路径过长且未解决用户核心问题等等。

那么,究竟是什么因素能够激励用户行为的发生或改变呢?

福格行为模型BJ Fogg’s behavior model

这个模型是以斯坦福大学教师 Fogg2009 年发表的一篇论文为中心,总结了如何从设计上提高转化率,其关键是Motivation-Ability-Trigger(动机-能力-触发),三要素缺一不可;

图片

● 任何一个行为的发生,都需要满足以上三个要素——人们需要有产生行为的动机、要有发生行为的能力,以及正好有一个合适的触发点

● 也就是说你如果想要用户发生某种行为,你必须给到用户足够的动机,并且让用户有能力去做到,而且有一种能触发用户行动的触发器

 

 

图片

那么什么是动机?

我们常说洞察用户需求,挖掘用户痛点,其实就是在寻找用户动机!

动机又分为内在动机和外在动机两种:

图片

我们都在说折扣或奖励,那属于什么动机呢?在动机的范畴里属于“外在动机”,如果说的形象点,它就像一个诱饵,吸引用户去做某个行为,它给用户产生的是一种“拉”力。

比如产品设计:获得折扣,优惠券,绑定会员(降低目标会员的感知价格),对某类商品的折扣与其月销量挂钩,提高收益评估的感觉等。

如果说外在动机是一种“拉”力,那么在用户的行为路径里是否可以让这个“拉”力变得更长。一步步牵引用户完成订单呢?

以到家精选为例:试想一下如果用户从活动页进来后一步一步的路径进行下钻,当用户从热闹的活动页中一步一步到越来越冷静的页面会是怎样的感受?是不是会怀疑我到底是否享受到活动给我带来的利益。通过活动延伸到用户可触达的每个路径中,使其成功的形成一种牵引用户的拉力。

图片

除了有“拉”力外,还有没有一种方式,能让用户自己产生动机,去做这件事,形成一种内在的“推”力呢?其实是有的,这种动力,在动机理论里,就叫做“内在动机”。

在用户体验中,我们所说的内在动机是指用户使用产品是因为产品本身激发了他们的兴趣和欲望,当用户真正被内在动机驱动的时候,使用这款产品本身就是最大的享受。所以内在动机是可以被设计被引导的。

 

1、给予用户足够动机

当用户没有足够的动机时,行为就无法发生。常见消费者购买行为动机有以下几种:可以根据用户场景及产品特性去使用。

图片

 求廉动机:

以到家精选为例:结合用研报告,通过热力图可以看到用户在行为路径中的价格模块停留较久,说明用户在这个模块遇到了阻力,用户在拆价格,算性价比。所以我们运用“求廉”动机的设计方法帮助用户消除对于价格的阻力。

业务之前展示价格为2小时起,我们利用“黄金分割法”对价格进行分割,拆成单价以每小时起来唤醒用户“求廉”的动机。

图片

那么除了以上使用“价格分割法”以外,还有什么样的表现形式让用户能感受到优惠去引导用户进行下一步操作?

其实用户在价格方面只需感知3类信息,商品多少钱,优惠了多少钱,原来多少钱。在价格表达方面我们可以使用价格锚定效应等让用户感受到便宜。

那么在设计层面其实也可以把价格进行视觉化处理来体现便宜,如下图中价格曲线的表达很好的诠释了用户对价格“降价”的心理走势去设计的价格表达。

图片

 求速(快)动机:

以到家精选为例:之前调研发现我们的用户选择当天的服务的比较多,所以在用户的行为路径中我们需要将当天能服务的能力传递给用户,大家都知道服务是无形的,如何在线上界面中呈现给用户服务感知。基于用户LBS把服务人员的地理位置进行展示,传递给用户服务“0距离”的感受。

一大波暖心服务就在你家附近,最快2小时就可以上门。这就是将服务要素进行数字化展示的意义-为用户带来确定性。

图片

 

2、帮助用户获得能力

只有激励手段是无法有效促成行为发生的,如果用户没有足够的能力,我们需要想办法帮助用户“获得能力”。福格博士提出了一条“能力链”,其中包含5个影响能力的因素:时间、资金、体力、脑力、日程。

图片

以到家精选为例:我们在做老用户下单路径的时候,在老用户这个场景中如何帮助老用户快速完成下单是一直思考的,所以为了减少老用户在下单过程中的损耗,直接把详情页去掉,减少用户操作,老用户直接从入口就可以到达订单页面从而快速完成下单。所以最好的方法,就是持续地用“能力链”来分析,找到问题所在,再针对问题重新设计。

图片

 

3、触发

有动机并且有能力,触发才能有价值,用户的行为=动机+能力+触发;根据不同动机和不同能力来说用户的触发点也会不一样。

● 人们的行为并不完全是自己主动选择的,而是在社会情境和个人因素的双重作用下产生的。

● 不同动机不同能力的用户需要不一样的刺激

 a.场景刺激:适合高动机的人:

高动机高能力的人只需一个触发点即可。低门槛吸引力高的活动,我们只需要将参与的按钮做的醒目再醒目。例如很多活动会把按钮做的很有点击的欲望,在产品界面设计中也可以在用户触发的过程中。

图片

 b.利益刺激:适合低动机、高能力的人 

这种用户需要更多的事件来激发他们做某件事的动机;例如朋友在玩拼多多的时候让我们帮忙助力,你是不是也曾经被可以得到现金红包去邀请更多的好友助力,其实你本来没有想玩助力的,只是朋友分享了一个助力链接给我,上边的现金红包激励以及轻易完成任务使你动心,心想这么容易领到,结果要经过九九八十一难现金红包才能到手。在这里“现金红包助力”链接就是触发器。

 c.场景+利益刺激:适合低动机、高能力的人 

对于利益刺激没那么直接没那么诱惑的时候,可以场景和利益一起更强烈的刺激,例如到家精选储值卡充值促销活动给人的感官意识是:储值送会员可以加送其他福利给你,超级划算超级便宜快来买!

图片

其实在我们日常工中除了以上用户行为模型之外,还有很多模型在设计中可以帮助我们解决问题,比如kano 模型、马斯洛的层次需要理论等都可以辅助我们挖掘用户需求,提升业务指标。

 

 

图片

以上是通过用户行为的三大要素动机、能力、触发结合工作中的实践案例来讲的,试想一下我们只知道通过奖励去激励用户行为的话,不仅会花费比较大的运营成本,有时候,还不一定见效。而对于我们自身的成长来说,如果一直都用这种套路,很容易形成“路径依赖”,限制思维。所以我们需要把视野再拓宽一些,能通过用户行为模型挖掘更多的用户动机,帮助我们做转化。


作者:环铁艺术家

转载请注明:学UI网》转化利器-用户行为模型

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


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



面对繁冗,拒绝“摆烂”|工具型产品如何简化设计

seo达人


提纲:

1、为什么用户感觉复杂

2、如何简化概念,降低认知成本

3、如何让流程简短高效

4、如何简化页面信息布局

5、如何让操作更轻松

6、结语

 

一、为什么用户感到复杂

你是否曾收到过类似的反馈:

“这文案是什么意思?”、“这能干什么?我需要干什么”、“那个功能在哪里?我找不到”、“要设置这么多项,好麻烦啊”、“这不能拖动吗?”…

这些都是用户感到复杂的反馈。从用户的感知层面分析,让用户感到复杂的原因可以划分为四大方面:概念、流程、界面、操作,以下将详细阐述原因。

图片

1、概念复杂

导致用户感觉产品复杂的其中一个主要原因是:用户难以理解产品的概念模型。概念模型指事物的基础定义及行为模式。(例如:汽车,一种在陆地上行驶的交通工具。通常需要司机驾驶,需要消耗汽油… )用户根据概念模型对事物的行为进行预测,构建出自身的心理模型。

因此,当产品没有清晰、准确地传达出概念模型,将导致用户产生错误的心理模型。用户需要在大量探索过程中,逐步纠正自己的想法,最终才能了解产品实际的概念模型。

图片

另外,根据「雅各布定律」和「设计心理学2:与复杂共存」,用户基于以往积累经验去理解新事物,即在使用产品前已构建心理模型。而当产品的概念模型与用户的心理模型不匹配时,用户在使用产品的过程中将持续产生认知冲突,也将给用户带来巨大的认知成本。尤其对于传统工具型产品,颠覆型的概念模型,反而提高用户的认知成本,让用户感到复杂难懂。

2、流程复杂

工具型产品的流程主要分为两方面:单功能使用流程、多功能组合使用流程。

在单功能使用流程方面,难免会遇到一些功能在生效前,需要经过多个设置步骤的情况。虽然环环相扣的流程能够降低产品的出错概率,但却会给用户带来更多的成本。对于每个步骤,用户都需要经历「理解」-「操作」-「反馈」的环节。在一些情况下用户甚至不堪忍受,直接放弃使用功能。例如,在Airtable中创建甘特视图,需要经历3步才能完成配置,查看到效果。对于一些抱着尝试心态的新手用户来说,这是难以接受的体验:在还没理解功能的作用效果前,就要经历如此复杂的流程。

图片

而多功能组合使用流程方面,工具型产品在产品功能设计层面,往往将功能的颗粒度设计得相当精细,以灵活满足各种场景需要。就Excel中的单元格而言,可设置单元格字体、单元格背景、单元格边框。但如此精细的功能设计将导致,若用户需要简单实现整体的目标效果时,其操作流程就变得十分的冗长。甚至在一些需要重复设置的场景下,工作量将几何级数地增长,让用户的工作流程将变得极其复杂。

3、界面复杂

大多数工具型产品都希望能在一个界面让用户完成所有任务,却忽略了用户在现实场景下的使用流程。通常一个任务完成的前提是,需要按照一定的步骤完成若干个细项任务。若无法聚焦于每一个个细项任务,而需要耗费大量的时间精力来排除其他信息的干扰,则会产生“注意力被分散”、“太复杂”等体验感受,导致最终任务完成难度增加。

图片

对用户来说,界面内的信息越多负担就越大。工具型产品通常伴随数量众多的功能和选项,一味的平铺功能,只为了展示自身的功能多样性,缺乏合理的组织布局,导致用户需要在几十甚至上百个选项中进行选择,则会大大降低用户使用效率。

4、操作复杂

设计者在不考虑具体操作场景的前提下,不同功能均使用同一种交互方式,名义上为了让用户降低学习成本,但实际上却是不负责任地将复杂的理解过程转移给了用户。对于用户而言,复杂的操作可以分为两种:一种是「步骤复杂」,例如需要多次点击、页面跳转、设备切换等;另外一种则是「认知复杂」,例如交互方式与心理预期不匹配,需用户自行转换。无论是哪种,对于工具型产品而言都是灾难的。

除此之外,缺乏及时的反馈也会给用户带来不必要的麻烦。用户需要反复操作比操作中的冗余更可怕,就像高速公路的减速带,不断降低用户的效率。

图片

 

二、如何简化概念,降低认知成本

1、隐喻、类比已有事物

当产品的概念模型越趋近于用户的心理模型时,用户就越感觉产品容易理解和使用,所要求的使用能力和学习成本就越低。而用户心理模型是根据用户的目标,以及其过往的经验构成的。因此在设计产品的概念模型时,应尽量使用隐喻、类比的方式,让产品的文案概念及交互行为模式)与用户所熟知事物相近。从而让用户建立联想,激活行为记忆,降低认知探索成本。

HyperCard,苹果的早期时间的一款脚本系统。它以「Card」对产品进行命名,同时在产品交互形态上以一叠卡片的形态呈现。这让用户很容易就联想到现实生活中的卡片小册子,进而快速地了解到产品的大致行为模式。

图片

需要注意的是,传统工具型产品的用户往往已被已有产品教育,积累了一定的使用经验、习惯。对于此类产品的概念模型简化应慎重考虑,因为用户所建立的心理模型是较难改变的,颠覆性的变化会让用户之前付出的学习成本付诸东流。此时可尝试用户的其他感知层面切入(流程、原型、操作),以探索简化的可能。

2、巧用大白话

在实际业务场景中,难免会遇到概念新颖、逻辑复杂的产品功能。由于用户从未曾接触过类似的事物,未建立起相应的心理模型。在设计产品概念时也就难以使用隐喻、类比的方式来降低产品的复杂度。此时可采用「目标导向」的设计方法,帮助用户快速理解产品功能。因为用户除了基于过往经验建立心理模型,还可根据目标而对产品的行为模式做预测。

与其生搬硬套地创造概念,不如在合适的使用场景下,使用目标导向的大白话,清晰的传达出功能的目标效果。让用户快速了解产品功能的目标效果,减少全新概念的理解成本。

例如,在交互原型设计中,按钮往往存在多个状态(默认态、悬停态、点击态、禁用态)。Figma对其赋予概念“变体(Variants)”,用户难以对此概念产生目标效果的联想,无法建立起对应的心理模型。而在MasterGo中,亦存在相同的功能,但使用的是更加符合目标效果的大白话“组件状态”。

图片

 

三、如何让流程简短高效

1、快速、直观呈现效果

对于工具型产品来说,效果直观是非常必要的。一来能让用户的探索快速获得反馈,降低用户的理解成本。二来能带来更加轻量的操作体验,鼓励用户探索,给予用户充分的掌控感。工具型产品的设计者应以此作为设计理念之一。但难免会遇到产品功能的逻辑流程较为复杂,需要经历多个环环相扣步骤的情况。而研发者往往更关注与代码的逻辑及可维护性,更加推荐逻辑严谨但流程冗长的设计。这时设计者应坚守设计理念,不断在用户体验与功能逻辑中寻找平衡,贯彻落实设计理念。

对于冗长的流程,设计者可通过以下方式解决:

1.根据场景自动化配置

良好的产品应该是聪明、高情商的,能够根据用户的实际情况进行自动化的配置,以减少用户操作。在进行自动化配置时,应谨慎梳理清楚用户的所有场景,以及每种场景意图,避免过度聪明,导致画蛇添足。

例如,在Notion中可一键创建Timeline视图,无需用户进行任何配置。因为其做了场景自动化配置处理:自动配置所需要的字段。

图片

2.清晰的修改配置入口

在进行自动化配置后,不可避免可能存在场景理解错误的情况,导致自动配置的结果不符合用户实际情况。此时应提供清晰的修改配置入口,例如在用户可发现错误的地方中提供入口,允许用户在发现错误后即可发起修改。

3.异常后置处理,先让用户用起来

不应要求用户在功能生效前处理完所有异常。因为对于每一个步骤,用户都要付出理解及操作成本。尤其在处理异常情况时,用户需要耗费巨大的成本,极有可能因阻碍过大,从而放弃使用功能。设计者应将异常后置,确保用户能都快速查看功能效果并使用起来。对于异常的问题,应允许用户后续持续处理,不阻断功能的使用。

例如,在Figma中导入sketch文件会遇到,多种格式适配问题。但不影响导入流程以及FIigma的正常使用,用户可以在倒入后在对异常进行处理。

2、基于目标组合功能,一键快速设置

一般来说,工具型产品服务的用户群体较广,需要满足丰富的个性化需求。在产品功能设计上,功能的颗粒度较小,能支持精细化的配置。这样导致用户需要实现组合的目标效果时,需要执行多个功能配置,整体的配置流程较为冗长、复杂。设计者在设计工具型产品时,除了要考虑单个功能的使用体验,也要从用户目标出发,全局考虑用户使用产品的整体流程体验。

如何既能保持产品的「灵活度」以满足丰富的场景,又能减少整体操作流程,提升用户效率。「一键操作」及「自定义脚本」是较为有效的方法。

1.一键操作

基于用户的目标,可以对一些列相关的功能进行组合,允许用户一键设置,快速达到目标效果。同时应存在更多配置的入口,允许进阶用户进行更加详细的配置。例如,Keynote中可对文本框进行快速样式设置,设置内容包含字体颜色、文本框背景颜色。当用户需求较为简单时,只需设置一次即可达到目标效果,而无需设置多次。

图片

2.自定义脚本

自定义脚本,指允许用户将一系列操作/设置组合为一个操作组的能力。在一些进阶场景,用户往往存在个性化的需求,对产品功能有着相对固定的使用习惯。自定义脚本,能够极大帮助用户减少重复性的操作,提高整体效率。

在Figma中,充满了类似概念的设计,如:组件、样式(文字、颜色、效果)。用户可自定义保存相关的配置参数,以方便多次复用或一键修改。

图片

 

四、如何简化页面信息布局

1、围绕行为组织功能,走一步看一步

在设计界面原型时,需要先了解用户的任务目标,用户想做什么,先做什么后做什么。充分掌握用户心理模型的行为路径,基于用户的行为路径进行组织功能,以确保用户在每个环节中所看到的信息都是必要且准确的。工具型产品通常拥有多个可选设置项,拆分任务步骤可减少用户被非必选项的干扰。

图片

除此之外,不同的用户角色的行为路径也会有所不同,例如:创建者,协作者,以及是否有编辑权限等等。不同的用户场景对于功能的诉求也是不一样的,而这就需要设计师从产品的定位,主流用户以及使用习惯综合考量。在优先满足主流用户场景的基础功能上,再进行其他场景的功能增减。

2、功能层级分区,巧妙地藏起来

1.功能分区

George A. Miller在《神奇的数字7加减2:我们加工信息能力的某些限制》中表明,人的大脑最多同时处理7±2个信息块(即5-9个),若超过则出错的概率将会大大提高。对于无法避免复杂信息的情况下,可以将烦琐的信息分块,组织成清晰的层级结构,例如:微软Office 中顶部工具栏包含上百个功能选项,为了便于用户能快速找到想要的功能,他们将所有功能进行分块,包括:字体、对齐方式等模块。每个模块下再细分具体设置项,具体设置项又包含了其它功能。基于清晰的层级结构,用户可快速通过「字体模块」-「字体设置项」- 「微软雅黑」三个层级中快速找到想要的选项。

图片

值得注意的是在信息分块时,需制定出清晰的划分界限,可通过询问不同的用户来判断界限是否清晰。

与此同时,布局效果是否清晰,对于简化界面设计而言同样重要。合理运用「格式塔原理」中的「接近性原则」,将同类元素放在一起让用户在视觉上感觉是一组,再根据同组元素中的重要性不同,大小上也应有所差异。做到让用户只看一眼便可快速找到想要的功能。

2.隐藏高级功能

「帕累托法则(二八法则)」同样适用于工具型产品设计,即20%的功能影响80%的用户体验结果。换句话说,大部分普通用户经常使用的基础功能仅占20%,但影响程度却远超于剩下的80%。所以需将功能划分为基础功能和高级功能,在优先展示基础功能的前提下,再考虑高级功能或自定义功能的展示,必要时可将高级功能或自定义功能进行隐藏,但前提需是可见的。例如:更多设置,更多选项等,即对专家用户始终保持可见,但又不打扰普通用户。

图片

 

五、如何让操作更轻松

1、减少不必要的操作,使用更自然的交互

简化操作的过程中,针对不同的操作赋予最自然的交互形式能减少用户操作过程中的精力消耗。自然的交互应该是用户无意识的操作,是基于过往生活经验,阅历,学识等的一种本能,几乎不需要过多的学习成本即可完成。例如:用户旋转一张图片。相对于在输入框中输入旋转角度参数而言,将光标直接操控在图片上旋转显得更自然。输入需要至少三步(点击文本框-敲击键盘数字-点击确认),而直接旋转只需要两步(点击-旋转)。因为对于用户而言,点击图片进行旋转更接近现实生活中的操作,不管是交互步骤还是心理认知上,都会降低用户的操作难度,让用户觉得产品更简单更自然。

图片

2、提供及时的反馈与帮助,避免重复操作

在操作过程中得不到反馈,出错后再重新填写,同样会增加操作的复杂性。在尼尔森十大可用性原则中,第一原则就是系统状态的可见性。系统需要让用户知道自己在做什么,需要让用户知道系统做了什么。例如:在表单填写时及时反馈是否出错,在格式设置时及时反馈是否生效,可以让用户少走弯路。必要时给用户提供帮助也能简化用户操作的复杂性,提高操作的成功率。

图片

 

六、结语

引用《简约至上》中的所说:创造简单用户体验的秘诀就在于把复杂性转移到正确的地方。任何产品都具有一定的复杂性,设计的目的不是为了消除所有复杂性,而是将它们放到最合适的位置。简化产品的复杂性替用户排除不必要的干扰,通过设计师的努力给每一个用户带来简单、愉悦的使用体验,让复杂的工作更简单。

 

参考文献:

[1]Bill Moggridge.Designing Interactions[M].MIT Press,2006

[2][美]Alan Cooper,Robert Reimann,David Cronin,Christopher Noessel,Jason Csizamdi,Doug LeMoine.About Face 4 交互设计精髓[M].倪卫国,刘松涛,薛菲,杭敏译.北京:电子工业出版社,2015

[3][英]科尔伯恩(Colborne.G).简约至上:交互式设计四策[M].李松峰,秦绪文译.北京:人民邮电出版社,2011

[4]刘津,李月.破茧成蝶:用户体验设计师的成长之路[M].北京:人民邮电出版社,2014

[5][美]唐纳德•A•诺曼.设计心理学2:与复杂共处[M].张磊译.北京:中信出版社,2015


作者:ISUX设计

转载请注明:学UI网》面对繁冗,拒绝“摆烂”|工具型产品如何简化设计

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:   ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系010-63334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


这个效果原来是这样做出来的

seo达人


图片

 

正文

经常使用爱奇艺刷剧的同学,有没有发现爱奇艺的应用图标又变了。前段时间爱奇艺针对品牌设计进行了较大的调整,最近又悄悄地将应用图标的背景色换成了这种多彩色混合渐变的形式。

图片

针对这个视觉效果估计大家各有看法,我们就不讨论这个话题了,今天黑马哥是来出教程的~O(∩_∩)O~。

这个类似于极光/弥散渐变的风格最近也比较流行,在 UI 场景中的运用也是比较普及的,被运用到应用图标的案例中相对较少。大概的回忆了一下,也有一些产品会使用,特别是比较知名的 Instagram 很早之前就使用了,也成为了流行趋势中的优秀案例之一。

图片

通过极光/弥散渐变(混合渐变)的形式强化应用图标外轮廓背景,不仅可以提高视觉感,也是体现年轻化趋势的一种色彩表现形式。不过渐变中的色彩本身也是关键性的因素,如果色彩不够年轻活泼,带来的效果也是千差万别的。

图片

 

一、渐变的表现形式

渐变色在我们的设计中是非常普及的,渐变色分为线性渐变、径向渐变、角度渐变、混合渐变、流体渐变等形式。不同的渐变形式可以营造不一样的视觉体验,可以丰富色彩环境、强化光影质感、增强层次感和空间感等。

1、线性渐变

这是最常见的一种渐变方式,具备明确的方向性,由两种或者多种颜色组合形成。相较于单色来说,线性渐变可以使得画面更加丰富,色彩营造出的层次感更强。

图片

2、径向渐变

径向渐变是以中心向外扩散而形成的圆形渐变,可以作为立体感的表现,也可以营造向中心聚拢的光影效果。

图片

3、角度渐变

角度渐变形成类似于雷达扫描的效果,属于运用相对较少的渐变形式。在一些应用图标的外轮廓背景中会被使用,也可以作为营造产品的光影变化。

图片

4、混合渐变

混合渐变就是多种颜色随机混合,色彩形成不均匀的自然弥散开,也可以成为弥散渐变或者极光渐变。是最近比较流行的视觉风格,可以呈现出丰富的色彩变化和随性自然的年轻化趋势,被广泛应用到平面设计、UI 设计、电商设计等众多视觉设计领域。

图片

5、流体渐变

流体渐变就是多种颜色渐变组合,形成带有流动感的视觉效果,通常作为背景来丰富设计的视觉感。也有动态形式的流体渐变,在 APP 和一些屏幕壁纸中出现,带来的感官体验也是非常不错的。

图片

随着视觉感官体验的不断追求,设计师已经不满足于趋于平面化的渐变形式,探索出造型多变、色彩丰富、刺激感官的视觉体验,以更加丰富的表现形式来探索渐变方式。

 

二、渐变小教程

线性渐变、径向渐变和角度渐变实现起来比较简单,软件自带的渐变属性即可满足。下面重点给大家分享如何实现混合渐变的效果,以后再单独给大家分享关于流体渐变的技巧。

混合渐变顾名思义就是将多种颜色进行混合,形成色彩丰富的过度效果,需要把控的是颜色之间的自然过渡。

方法一:

通过绘制几个不同颜色的形状图形,然后执行高斯模糊形成混合渐变,模糊的参数值要适当大一些,一直到颜色自然过渡为止。

图片

方法二:

如果想要随机性大一些,可以通过画笔工具随意涂抹颜色,这样形成的效果更加随机性。然后再执行高斯模糊将颜色融合,带来自然随性的视觉体验。

图片

 

三、分享几个案例

不能只是纸上谈兵,只有反复磨练和尝试才会熟能生巧。根据以上的方式黑马哥完成了以下的作品案例,大家也一起来动动手吧!

1、邻近色系易把控

混合渐变技法层面来说并不难,配色是相对具备难度的,很多同学都会因为配色不到位而做不出优秀的作品。针对应用图标设计中的配色来说,邻近色系的搭配是最容易把控的。选择色相范围在 60° 以内的色值,混合出来的色彩排斥感都是比较低的,融合度比较高,能够呈现出比较舒适自然的视觉感官体验。

如果选择了色相角度大于 60° 的色值,只要数值的增减关系控制在 30° 以内都属于可控范围,这时候如果出现较大的色彩排斥感,可以通过降低不透明度来进行视觉平衡。

图片

2、强视觉感还得对比色

虽然邻近色的处理比较容易把控,但是带来的视觉感也是与颜色对比关系成正比的,想要达到强视觉感还得选对比色。色相选择范围在 120°~180° 之间的色值,容易形成较强的视觉张力,通过增加高斯模糊的值才能稍微过度相互之间的色彩排斥感。

图片

3、学会举一反三

今天分享的经验不局限于应用图标的设计范畴,我们要学会将这个技法举一反三,运用到更多的设计场景中。比如在下面作品中的一组信息卡片的设计中,通过混合渐变形成的卡片背景提高了局部的视觉感,配合磨砂玻璃质感的运用,提高了该部分的视觉感官体验。

图片

4、其他作品欣赏

为了辅助大家理解和开拓思维,为大家选择了几个类似的案例作品,希望可以带给大家更多设计灵感。(以下作品版权归属原作者,仅作为学习交流)

 

 

四、布置一个小作业

通过对混合渐变实现技巧的学习和案例欣赏,相信大家对于混合渐变有了比较全面的认知。学以致用的目的,下面为大家准备了一个小作业,希望以此来强化大家的理解。

图片

根据以上示意图提供的高保真原型图,以混合渐变的形式增强其作品的视觉感。

以下方案为黑马哥完成的一个示意,大家可以转换思维和调整新的配色方案,输出不一样的全新作品。

图片

 


作者:黑马青年

转载请注明:学UI网》这个效果原来是这样做出来的

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


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



给设计公司的UI设计需求文档怎么写?请看一下这段录的视频讲解吧!

蓝蓝设计的小编

偶尔有来咨询的客户会询问:设计需求文档怎么写?给我一个模板吧。

加起来,这样问的客户也不少,所以蓝蓝设计录了一个视频讲解:给设计公司的UI设计需求文档怎么写?请看一下这段录的视频讲解吧!

设计基础(9):拆解B端产品,总结界面框架设计的3原则

seo达人




一、
上下结构

图片

这种页面结构将页面划分为「顶部导航」和「内容区」上下两层。常见于一些企业官网、信息资讯网站中,更偏向于信息展示。例如阿里云官网、新浪、知乎等信息网站。

图片

一般包含系统logo、功能菜单、辅助功能、个人中心等。功能菜单通常按照业务板块进行设置,并且会限制菜单数量,一般为4-6个左右。

根据业务需要,功能菜单也可以进行级联扩展,允许出现2级甚至3级菜单。方便用户更深层地了解系统功能,同时提高用户的操作效率,实现深层页面的快速直达。

图片

我个人认为,顶部导航的优势并不是不占用页面横向空间。因为信息展示类的网站对横向空间要求并不高,有些网站为了避免用户视觉横向跨度过大,采用的是版心定宽设计。企业官网产品则采用响应式布局,让界面可以适应不同的屏幕宽度。

顶部导航的优势在于面积小,对页面的分割比较弱,不会对内容产生太大的影响。另外横向排布更符合用户的视觉习惯。

在展示形式上,顶部导航更加灵活,可以将菜单形成独立的信息空间。例如百度官网的顶部导航,与Banner形成强烈对比,内容清晰可见。

图片

顶部导航也可以与页面内容融为一体,减少对内容的干扰。例如巨量引擎的官网中,将顶部导航与Banner信息混合,更加强调内容信息的传递。

图片

在交互操作方面,页面向下滚动时,顶部导航可以自动隐藏,从而为内容提供更大的可视面积;页面向上滚动时自动展示,方便用户的快速切换到其他菜单。

 

二、左右结构

对于简单或者复杂的业务系统,顶部导航数量会面临过少或者过多的问题,于是就出现了左右结构布局。

图片

面对简单的业务系统,左侧导航的形式不会产生大量的页面空白。例如百度网盘网页版,Teambition都是采用的这种界面框架,将一级菜单简化,与二级菜单并列展示,视觉关联性也更加紧密。

图片

面对复杂的业务系统,左侧导航可以承载较多的菜单量,并且树形结构配合展开收起面板功能,具有很好的延展性。例如有赞个人店铺左侧导航承载了10+个的业务功能。

图片

不过左侧导航的缺陷也比较明显,主要有以下几个方面:

  • 尺寸空间大
为了尽可能地减少挤占内容区信息空间,通常会增加「收起」功能;
  • 限制多

为了控制导航宽度,菜单名称的长度需要做出限制,避免出现无法完全展示的情况;对系统logo和名称也会有要求,不太适用于名称较长的系统;

  • 操作效率不高

默认收起的菜单项中,需要展开才能操作;如果信息层级较深,逐级渐进展开的方式也不方便用户操作,因此对信息层级也需要做出限制;另外用户无法直观地全览所有业务功能,尤其是对于新人用户不友好,需要逐个点击才能了解系统功能;

所以在设计时,需要针对以上问题进行优化设计。以下是部分产品提供的解决方案:

1)单层信息+级联信息

有赞产品左侧导航,沿用了顶部导航的交互方式。没有采用收起展开的方式,而是采用级联菜单形式,悬停即可显示,从而方便用户快速切换。

图片

2)默认全展开

菜单功能默认全展开,减少用户的操作。在微信公众号、阿里云、知乎创作中心等平台中,左侧导航都是默认展开的,用户不需要逐级展开,便于用户快速切换菜单。在后续的使用过程中,用户根据的自己的需要,手动收起不常用的功能就可以了。

图片

3)双列布局

对于功能繁杂的系统,默认全展开的方式,会导致导航区过长,用户查看起来不方便。因此需要增加菜单的信息密度,减少导航的整体长度。例如拼多多商家后台采用双列布局的形式,当然这种场景下,会增加左侧导航宽度,挤占内容区的空间。

图片

4)查看全部

在门户网站中,信息分类非常多,普通用户通常只会用到高频信息。为了让用户能够全览网站所有的信息门类,网站还提供了「网站导航」功能。

图片

在B端产品中,也需要考虑如何让用户了解平台的全部功能清单。例如钉钉管理后台在左侧导航底部增加了「查看全部」功能,展开后用户就可以看到全部的功能菜单。

图片

在形式感上,左右结构的布局会对系统logo 和名称进行压缩,我个人认为整体风格不如上下结构正式,对品牌形象表现力不足。因此该结构主要用于一些工具产品或者轻量型的系统,在大型的业务平台或者G端的项目应用较少。

通过上面的案例,我们可以看到B端产品基本上是以「混合布局」的模式构建界面框架。

 

三、混合布局

在B端产品中,混合布局既有贯穿的顶部区域,可以承载导航菜单和产品框架信息,又在内容区增加左侧导航,提升导航信息承载量,更好地满足业务功能需要。

图片

例如巨量纵横产品中,采用了顶部导航和左侧导航相结合的方式,将产品划分为几个独立的业务单元,用户可以根据自己的工作目标去选择对应的功能。同时也减少了左侧导航的信息承载量和层级,方便用户操作。

图片如果系统功能极其复杂,传统的「顶部导航+左侧导航」的模式已经无法满足产品需求。例如云类产品都是大型的业务平台,包含几十项业务功能,于是构建了「产品与服务」的中心模式,集中全量展示所有业务功能,方便用户浏览查看。在一定程度上也增加了用户探索更多功能的欲望。

图片

在这种模式下,每个独立的产品或服务则形成了子系统空间,采用统一的混合布局方式,让原本复杂的业务系统变得简单。

图片

另外还有一个小细节。

左侧导航菜单带给用户的心理暗示是「切换」,用来控制右侧内容区信息。当我们在左侧导航中嵌入其他系统功能时,如果是「跳转」的操作方式,需要增加指示图标,如下图所示。

图片

 

总结

以上就是关于B端产品界面框架的内容,我们可以得到3个设计原则:

1、符合产品的定位和业务需要

产品界面框架要能够承载产品的整个业务体系,并且具备足够的延展性,需要考虑到产品未来升级和发展。

2、保证用户的操作效率

导航的形式会影响到用户的操作效率,因此在层级设定上需要谨慎,避免层级太深影响用户的操作效率,目前主流的左侧导航以2层为主。

3、全局视角

导航是用户了解产品功能的第一渠道,在设计时既要考虑到用户用起来的感受,也要能够让用户更直观的了解系统全局。


作者:子牧先生

转载请注明:学UI网》设计基础(9):拆解B端产品,总结界面框架设计的3原则

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




设计基础(7): 简约设计4原则在表单设计中的应用

seo达人


图片

 

一、删除,实现表单轻量化

前几年,我们在银行或者移动营业厅开通一些新业务时,都会填写表单,通常是密密麻麻一堆信息。但是实际需要填写的内容可能只有2~3项,业务人员会特意勾选出来给客户,其余的都是非必填项,或者是业务人员填写的。

线上表单设计时,没有专门的业务人员指导,用户更容易迷失。所以设计师或者产品经理的首要任务就是尽可能地减少表单信息量,降低用户的认知负荷。

最近在做一个表单的优化,业务方要求增加“入参”、“出参”两个表格项,说是用户会看。与用户沟通后,反馈也说“会看一下”。但是在深度挖掘用户场景后,发现用户确实会查看这个信息,只不过不是在当前环节查看,而是在结果项中查看。

所以我们最终去掉了这两个信息量较大的表格内容,从而让整个表单的信息量得到了明显的下降。

因此面对复杂长表单,我们需要从需求入手,判断是否有必要让用户提供如此多的复杂信息。

 

二、组织,让表单更加有层次

当我们不得不面对复杂表单时,如果采用简单内容平铺,用户看到的是满屏的散点信息,造成信息识别困难,用户一时间难以找到填写思路,反而增加用户的心理负担。因此信息的层次性,对于复杂表单至关重要。

首先要从内容和视觉层面让复杂信息变得清晰、规整,更加符合用户的认知习惯。例如,可以利用分组标题、分割线、卡片,按照不同信息的类别、属性和相关性进行区块划分。

根据不同的布局和交互,主要有以下4种表单设计模式。

图片

 

1、顺序表单

表单分组后,可以按照业务逻辑顺序铺开展示。用户只要按顺序填写就可以了。但是对于超长表单,这种布局方式下,用户无法全览页面信息。页面上下滚动、定位查找带来的交互成本比较高。

1)平铺表单

图片

2)卡片表单

图片

因此顺序表单更多地用在业务信息比较简单的场景中。

 

2、锚点表单

为了解决长表单的定位效率问题,可以在顺序表单的基础上增加锚点。另外锚点还可以帮助用户快速了解表单所包含的内容模块。

根据锚点的布局,可以分为横向锚点和纵向锚点两类。锚点需要吸顶方便用户操作。本质上来说,锚点表单是顺序表单的优化版本。

图片

图片

 

3、标签表单

如果长表单内容没有依赖关系,还可以将表单拆分为几个相互独立的标签内容,这就是标签表单。

图片

不过标签表单更强调内容的并列关系,常用于配置表单中,例如 MAC 或者 Windows 系统的配置弹窗。

图片

标签表单在全新表单中应用较少。因为标签表单容易造成内容遗漏,并且无法告知用户哪些标签已经填写,哪些标签未填写,或者无法清晰地展示校验信息。来回切换标签查看信息,也会影响效率,因此主要用于用户有目的的配置行为中。

 

4、步骤表单

步骤表单是一种常见的表单拆分方式。通过节点将子表单串联起来,形成一个完整的业务闭环。例如阿里云的云服务器订单流程,或者一些开户流程等。

图片

 

步骤表单有几个特点:

1)过程串联

理论上来说,步骤表单有明显的操作顺序,用户需要按照节点完成内容填写,因此不会产生信息遗漏。当然也可以根据实际的业务场景,设置选填节点。但是总得来说,步骤表单更强调的是顺序操作。

2)业务引导性

对于复杂业务,步骤表单可以将分散在不同页面中的独立业务串联起来,在一定程度上具备新人教学功能,帮助用户了解业务逻辑。减少用户自定义操作时在不同页面的跳转,从而提供新人用户的操作效率。例如系统配置向导类的步骤表单。

3)逆向操作

由于步骤表单存在正向和逆向操作,因此设计时还需要考虑清楚逆向操作的设计逻辑。例如:

  • 当用户想要修改前面步骤信息时,除了逐步返回,是否可以步骤条直接跨节点修改?
  • 用户中途退出表单后,重启时是从第一步开始,还是直接从未填写的步骤开始呢?
  • 用户如果完成了步骤条表单填写,想要二次修改时,是用普通表单,还是仍然使用步骤表单形式呢?

4)节点的平衡性

步骤表单可以分拆信息,化整为零。但是信息节点也不能过多,否则同样会影响用户的操作效率。所以要减少不必要的流程节点。

最近在做设计时,发现步骤表单最后一步是内容预览。通过用户调研发现,部分用户会谨慎地预览前面4步填写的内容。而另一部分用户则认为,刚填写了内容不需要预览,强制预览的设计并不友好。该如何平衡设计呢?

最终我们选择了将预览节点取消,将预览功能调整到第4步,采用「预览」按钮的形式。既满足了部分用户预览的需要,另一部分用户也可以不做预览,直接提交申请。

所以步骤表单过程中的节点具有一定的强制性,需要谨慎对待,保证节点的合理有效。

 

三、隐藏,让表单更加灵活

1、模块隐藏

表单实际上是任务信息的集合,为了具有更高的适配性,内容通常是多种场景的集合。而场景有高频、低频区分,对于高频信息需要优先展示,便于提高用户的填写效率;对于低频场景,可以隐藏弱化展示,从而降低整个表单的复杂度。

例如我们常见的「高级配置」,通常在表单的底部默认收起展示。

图片

 

2、信息隐藏

复杂表单中信息会出现多级信息共存的场景。这种场景下,复杂表单默认展示当前选项对应的子内容,隐藏其他选项的内容,从而提高信息的指向性。

图片

 

3、合理的组件形式

比较典型的就是单选和下拉选择器如何选择。有人为了强调效率,一味地追求单选按钮平铺展示,认为单选更加直观,用户不需要点击下拉滚动查看备选项。但是用户同样需要逐个浏览选择,反而增加了整个页面的信息量。

所以单选框更多用在备选项较少的场景,如果备选项较多,建议优先采用下拉选择器,隐藏备选项。

 

四、转移,扩展表单的异步空间

1、信息转移

在表单设计时,可以将部分二级信息转移到弹窗、抽屉中,利用浮层空间拓展业务内容,根据用户操作逐级加载出来。从而减少表单的信息量。

例如下图中,没有将「所有配送区域及运费」直接展示出来供用户选择,而是放在了弹窗中,表单中只呈现最后的选择结果。既简化了表单的内容,又让选择结果更加突出,方便用户的查看和校验。

图片

 

2、记忆转移

现在很多浏览器都增加了密码存储功能,减少用户记忆成本。

而在电商购物网站可以设定默认的收货地址。系统自动读取调用,从而减少用户的输入操作。

 

3、行为转移

现在越来越多的网站支持「手机短信验证码」免密注册登录方式,或者第三方登录方式,或者手机端扫码登录。将原有的表单填写转变为系统行为,从而降低用户的行为成本。

图片

好了,以上就是我总结的表单设计的内容~

 

重复一遍:

  • 删除,实现表单轻量化
  • 组织,让表单更加有层次
  • 隐藏,让表单更加灵活
  • 转移,扩展表单的异步空间


作者:子牧先生

转载请注明:学UI网》设计基础(7): 简约设计4原则在表单设计中的应用

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



这么好的设计排版技巧,不看亏了啊!

seo达人

一、运用分组建立层次 

图片

在设计中,相邻的元素比分开较远的元素会更加吸引人注意,在做设计阅读顺序的时候,利用设计分组是一个非常有效的方法,将不同信息进行视觉间距分组,能提升用户对于内容上的理解。

如上图slack的设计,插画引导图和底部按钮上面文字拉开了距离,使得内容更聚焦。第二个界面的顶部头像和下面的文字也是通过分组形成了对比。

图片

stadium-live的产品设计上,登录页面按钮为一组,顶部品牌LOGO和slogan一组,人物为一组,每组信息之间分组非常清晰,每一组都不会对对方视觉互相干扰,间距非常合理,用户阅读从一组信息到另外一组信息也很清晰。

后面两张页面也是如此,顶部的导航,和下面表单信息,以及头像和底部按钮,通过分组处理,内容更加符合用户的视觉动线。

图片

在球员定制的处理上,最左边那张图,通过卡片和线条分组处理,从视觉上很清晰的看见排名,哪个球队和哪个球队之间比赛。

图片

当一组信息比较接近,证明必须是有关联的,如果距离比较远,这意味着这组信息和他们是不同的,简单来说,通过邻近性,通过分组创造这些关系,为信息带来层次。

 

二、运用空白建立层次 

图片
空白也是视觉设计元素,并不是留白就是空着,如果设计中留白运用合理,可以帮助用户理解很多信息,因此任何设计都需要通过适当的负空间来传递信息。如上图我喜欢的一个应用classpass设计非常极简,页面中大量运用留白来凸显内容。
图片

classpass的设计不会使用太多的视觉元素,而是运用留白把内容进行分组,每个页面的留白恰到好处,同时留白本身就是对信息进行分组,所以页面中减少了很多线条使用,页面会更加干净有品质感。

图片

must是一款电影软件,整体设计非常杂志感,页面就是通过图文处理,以及留白空间的处理,增加对比,基本产品体验你不会感觉到视觉负担,元素之间的信息组织的非常清晰。

图片

在电影展示页面,信息的处理,以及打分设计上,重复运用留白来处理信息层级,在设计中,当你元素周围留白越多,它产品的注意力也越强,如右边的打分页面,几乎所有焦点都在这个弹窗上。

图片

artsy是一款艺术品电商网站,整个app的设计也充满了艺术气息,每次我设计找不到感觉时候就会去打开看看,里面的排版,还有设计的细节处理,都值得我学习,但我喜欢的还是他对于板式和留白空间的处理。

图片

在首页设计,我最喜欢他相框的设计,就像欣赏美术馆的一幅画,页面留白也非常大,衬线体和非衬线体的对比也运用的非常好。

图片

整个APP的设计被大量留白包围,虽然现在流行各种质感,各种光感,C4D的设计,很多设计师认为设计越多越好,但是大量视觉元素会让页面过于饱和,如果没有很好的视觉引导,用户会感到不知所措。

 

三、运用氛围建立层次 

图片

有设计感的纹理从视觉感受上比简约主义更能吸引用户注意力,但是背景纹理运用不能为了设计而设计,而是需要和产品内容有关系。比如纹理和文字内容,和信息是密切相关的。如上图,是一款打车软件,背景结合了打车的地图,公路线路,用车场景,让页面对比和设计层次更加突出。

图片

jour这款产品在设计上,背景通过有层次的氛围纹理和质感,使得页面氛围感很强,层次细节更加丰富,当然在设计的时候切忌对于设计氛围过度运用,那样会让用户分散注意力。

图片

其它场景上氛围纹理的运用,卡片上通过系列插画的塑造,页面虽然有很多插画,但是页面平衡感同样重要。需要考虑用户在界面看见的和其它页面视觉感受是一致的。

图片

氛围除了图形,其实色彩也是很重要一种方式,我很喜欢的ASANS的设计,在背景上就是运用了一些几何图形的肌理效果让整个空间感更加丰富,这些几何图形丰富细节同时也让整个内容更加凸显。

图片

如上图是他里面一个注册登录场景,在界面中,除了背景灰色底纹通过几何图形来烘托视觉层次,同时在插画上也是非常巧妙,用户输出,完成后,整个插画到品牌图形的连贯变化体验非常好。

图片

Sift是一款新闻类阅读产品,这类型产品设计一般就是文字排版,设计简约为主,但是sift运用了一种大胆的设计,背景氛围上采用一些点线底纹的肌理效果,和内容结合的很平衡。

图片

Lugg是一款货车APP有点像国内的货拉拉,整个设计也氛围感非常强,运用的全插画设计,在页面每个细节,从引导页,让页面核心功能设计都能看见完整插画的运用,我目前我看见运用插画氛围作为主设计最好的产品。

图片

感兴趣的同学可以去美国苹果商店去下载使用,页面中增加氛围是一种增加层次很好的方式,但是同时需要主要好视觉平衡,不要做到本末倒置。

 

四、运用衬线字体和无衬线字体建立层次 

图片

字体对比,运用衬线字体和非衬线字体对比是非常常用的方式,如上图运用了Adelle Sans字和Tiempos字体这两款字体的对比让页面内容结构非常清晰。

图片

上图官网的设计,干净的排版,通过字体大小,字型进行对比,体现出视觉层次。

图片

字体的选择本身也是设计中很重要的因素,好的设计不仅能提升设计品质,同时也能让页面视觉层次更加分明。

 

五、结语 

回归设计本质,其实我一直觉得设计这个工作就是一个翻译官,我们的使命是让用户使用产品过程中更加易懂,同时我们能方便地解决他们的问题,而不仅仅是专注在界面美观本身上,今天分享的这些提升设计层次的一些技巧,也是为了让页面有更好的体验。


作者:叮当猫

转载请注明:学UI网》这么好的设计排版技巧,不看亏了啊!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


哦,原来这样可以更高级!

seo达人


图片

如果光看视觉不论主题感觉还不错的,但最大的问题也是不符合主题,主体是一个现实的篮球运动员,却搞了很多魔幻的元素,结果就很像魔幻篮球似的,这样在练习的时候可以试试,但作为一个项目需求肯定是不会让你过的。

再来看看修改后的:

图片

修改后的图整个就和谐统一多了,更符合主题。

我们做图的时候符合主题是最基本的,那到底该怎么做呢?今天就给家分享一下设计思路。

 

一、明确风格

视觉设计师经常会遇到各种各样的需求,首先我们要做的第一件事就是了解需求,明确风格。
我们可以通过了解需求背景,和观察人物素材来了解,之后再去推进设计。

我们来看看素材:

图片

这不是NBA巨星科比么?!明显是现实题材,不应该加入一些魔幻、科幻什么的元素进去。

图片

 

二、明确需求

明确需求的目的是为了抓住设计关键点,方便为接下来的设计推进提高效率。比如这次作业是要求大家设计一张带有神秘感的剪影海报,我们可以找剪影的参考来提取这类视觉表现的关键点是什么:

图片

找了很多参考,可以看到剪影视觉的效果还是蛮强的。很容易出效果,通过观察我们要学会提取里面的关键点:

图片

我们要做的就很明确了,在一个场景里设置一个光源,再加入人物调黑放在光源前面形成对比。

 

三、元素联想

我们的人物素材是篮球员,我们就可以通过篮球运d动员这一个点为中心去发散联想:

图片

再用这些点来组成画面,就会很符合主题了。

比如我们的场景可以是球星的发布会背景墙:

图片

一个简单的场景就ok了

然后是我们的光源:

图片

原图中就是一个圆,就比较普通。
其实光源也可能是各种各样的造型,来增加设计感和主题感。我们刚才联想到有篮球,光源我们就可以用篮球来做。但我又懒得画,怎么快速的做一个呢。这里给大家分享个省力的小办法。

我直接从开源的图标网站去下载,里面的图标都可以免费用,且可以下载到矢量文件。
图片

直接下一个不错的放图里看看:

图片

emm,感觉有点太粗了,一点也不透气,没关系。我们把源文件拖进AI里调整下描边粗细就可以了:

图片

再放回图里看看:

图片

这样就轻薄透气多了!再给图形加个外发光效果:

图片

光源就完成了,又快又贴合主题棒棒的!
接着可以继续丰富画面,比如把光源想成一个霓虹灯,那可能需要绘制一些线路,也可以在墙上张贴一些人物宣传海报:

图片

还可以增加灯光对地面的倒影,直接把墙上的篮球图形复制一个下来,使用透视工具拉一下变形,放到地面上:

图片

这里要注意做好两个点,倒影才能更真实:
1.靠近光源的位置会很亮,远离光源的地方要暗下去;
2.靠近光源的位置边缘比较实,远离光源的地方要用高斯模糊虚化下去。

图片

这样整个场景就很丰富啦。

接下来是人物的处理,有一个点给大家分享下:

直接把人物涂黑也有剪影的感觉,但是毫无细节,人物就很平,薄的像纸,一点都不立体

图片

为了解决这个问题,我们可以给人物的边缘加一些过度的光,注意观察手臂的位置:

图片

有过度光的人物是不是就显得很立体啦?

这个同学的也有点这个问题,整个手臂没有加过度光,所以会显得有点平:

图片

加完过度光看下整体效果:

图片

一张帅帅的人物剪影海报就完成了!

 

四、其它的一些附加知识点

1.低视角会让画面充满压迫力。

以Amor的作业为例:人物我们不能调,

但我们可以调整地面的俯视角度。比如右边这张,就放大了透视,就给人一种仰视角色的感觉,整张图更有压迫感。左边这张因为透视比较小,视角就比较高,显得是在俯视角色。就缺少了一点气势:

图片

小小的改动就可以提升一个气质。

 

2.在光源里加入一些碎片会让画面更丰满,充满细节。

这是兜兜一张作业,也是很不错的。

图片

我们观察下底部光源的位置的区别:

图片

很多同学打完光就会让它空着,就会显得很单一,光也会显得有点苍白平淡。其实我们可以在光源里加入一些细节,就可以让光的层次更丰富了,从而让画面更耐看。


作者:慢热

转载请注明:学UI网》哦,原来这样可以更高级!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



设计策略|源源不断的创新思路(激进篇)

seo达人


图片

 

本篇讲述:激进式创新

激进式创新是相对罕见的,它同时依赖革命性的技术和创新的商业模式来解决问题,激进创新的发生往往伴随着产品的创新、组织创新等连锁反应甚至引起产业结构的变化。科技的创新带来了很多革命,iPhone开创了电容触屏时代,ARVR打开了元宇宙之门;新的商业模式利用现有的资源引起行业巨变,如Uber和滴滴用物联网技术关联私家车和出行乘客,连接异地旅者和房东的Airbnb等都是激进式创新。

作为设计师,我们在技术和用户间承接着场景和体验,了解激进式创新的方法可以让我们在工作更好地帮助团队突破。很多具有划时代意义的创新产品其实都有设计师创始人的身影:颠覆传统酒店行业的Airbnb(爱彼迎)的联合创始人Rian Chesky和Joe Gebbia,首创了华夫格底跑鞋的Nike(耐克)创始人Bill Bowerman,设计开发了凹凸面圆点拼接积木的LEGO(乐高)创始人Ole Kirk Kristiansen,颠覆内容传播权威、开启全民播客时代的Youtube联合创始人Chad Hurley…他们都是设计师出身,基于自己对行业、产品和用户需求的洞察革新了行业。

 

一、激进创新启动 / 策略2则

图片

上一篇提到渐进式创新的起点难度主要在于沟通和传达,而激进式创新依赖创意突破,有两类需求命题可能会让创意发散变得艰难。其中一种是需求命题过于具体,这可能会限制创意的发散空间;另一种则是需求命题过于宏大,无边无际让设计师不知从何着手调研和发散。针对这两种状态,下面的方法将针对性地帮助设计师们解题。

 

策略1.  问题挖掘 Dig Deeper

命题过于具体很可能会限制创意的发散空间,仿佛解决方案已经有了安排,那设计师很可能会被限制在已有思路中。问题挖掘就是针对这类命题打破砂锅问到底,从而帮助自己更好地获得发散思路。问题挖掘就是写下所有能想到的问题,挖掘前因后果,了解内外机会和风险。

 

提问可以从以下三种工具角度着手:

图片

  • 5W1H问题

5W1H分别是:是什么,是谁,为什么,在哪里,在何时,如何。从这六个提问开始着手列出所有想问的问题,并继续发散关联的子问题。然后尝试自己回答刚刚列出的问题,有些问题可能和命题无关则跳过。当我们自行完成了梳理筛选后,就可以将这些问题在和需求方沟通和访谈时提出,进行深入了解,获得灵感。

  • 是什么(What) “我们的创新想要解决什么问题?关键假设是什么?”…
  • 是谁(Who)“产品创新的购买者是谁?用户是谁?相关利益人是谁?”…
  • 为什么(Why)“为何这个问题重要?为何发生这个问题?为何之前未能解决?”…
  • 在哪里(Where) “这个问题发生在哪里?之前在哪里解决?还有哪里有相似的问题? ”…
  • 在何时(When)“这个问题何时发生?问题何时开始?何时可以解决?” …
  • 如何(How)“如何解决?已经尝试了哪些解决办法?”…
  • 5个为什么(5Why)

经典的连问5个为什么。如果我们针对看到的结果,只问一个“为什么”,很容易停在第一层的表象原因,只有不断的深入挖掘才可以层层递进,找出最关键的底层原因。

  • “机器为什么停下来?” 电路过载,使保险丝熔断。
  • “为什么?” 轴承润滑不足,因此被锁定。
  • “为什么?” 机器人上的油泵没有循环足够的油。
  • “为什么?” 泵入口被金属屑堵塞。
  • “为什么?” 泵上没有过滤器。
  • 层层扩散

如果五个为什么是向内层层递进,那层层扩散就是向外发问。以最为基础的命题问题作为中心点扩散,向外展开相关因素:产品的核心问题,相关结构技术,外部文化和法规…

  • “这个产品我们要解决一个什么问题?为什么要解决这个问题?”
  • “别人对这个产品的当前印象和期待是怎样的,需求发起者是谁?”
  • “这个产品的开发方式,有什么背景,历史渊源,复杂的代码历史,变动难度?
  • “这个产品拥有的资源?”
  • “这个产品有什么文化、政治、法规背景
  • “我们的外部优势和劣势是什么?”

 

策略2. 设置边界 Planting Limits

都说设计是戴脚镣跳舞,你是否接到过抽象空泛且听起来没有任何限制的命题?创作条件没有限制也许意味无限可能,但更常意味着难以聚焦。适当的束缚有时可以帮助更好地放飞想法。所以如果面对的命题太庞大,可以尝试给自己设限,或思考可能存在的限制,就能抓到一个相对靠谱的起点。

  • “这个项目要控制成本投入,用最少的资金,最少的人力。”
  • 最大程度保留用户的现有体验,尽可能减少用户学习成本。”
  • “新创意最大程度满足原来的代码框架,使用最小的开发成本。”
  • “新的产品体验要极简,将用户路径缩短到三步以内。”
  • “在链路上需要用户使用的媒介最少化。”

图片

例. 重新设计支付流程

  • 原体验:原本用户需要携带钱包出门,钱包里会有多张信用卡,储蓄卡,还会有很多现金。而用户出门手机也必不可少。
  • 设置边界: 在优化的支付流程里,尽可能减少用户支付需要携带的东西;在用户支付流程中减少遇到的阻力,提升消费。
  • 新体验:让用户可以用软件进行转账,输入需要支付的价格,双方确认后输密码转账。

-> 让用户可以直接扫码进行支付,无需输入价格,无需人工核对

-> 让用户用指纹确认,或开通多少元以下免密码支付,无需输入密码

-> 让用户直接手机感应支付,无需打开手机或软件

-> 扫脸进行支付,即使不带手机也可以进行支付。

 

二、激进创新过程 / 策略3则

上一篇渐进式创新介绍的方法和原则在激进式创新同样适用,而本文将介绍三则对于命题较大的激进式创新非常适合的过程方法,分别是:创意矩阵,逆向思考,多问“如果”。

图片

 

策略1.  创意矩阵 Creative Matrix

如果需要用创意解决一个较为庞大的主题,尤其是激进类创新设计,那创意矩阵可以迅速排列组合进行发散,且不遗漏内容。

创意矩阵以表格的形式,让X轴和Y轴上的内容进行交叉碰撞,强制、批量地激发创意的方法。如在X轴写下选择一类用户和主题间的需求(目的 / 流程 / 用户类型 / 特点 / 心理等…),Y轴写下解决问题的方式(内外部新机会 / 实现方式 / 科技 / 环境 / 媒介 / 分发渠道 / 政策等…),横纵碰撞在一起,就会有一张完全覆盖的创意表格,之后可找出亮点、分析可行性进行创意选择和组合。

图片

例:设计一个针对工业设计的3D建模软件,打破市面上常见的软件功能和体验。

我们以Gravity Sketch的3D建模产品为例,用创意矩阵倒推思考的流程。

(1)首先确定XY轴发散方向。能带来革命性改变的体验往往依赖技术层面的实现,技术革新会带来在流程、建模方式的革新。所以我们将3D软件依托的技术和媒介为Y轴,在媒介的放散方向上同时考虑建模现有媒介(传统的PC端和云端软件等)是否还有新的机会;再考虑相对激进、未来的媒介(如pad端、VR端等)。3D建模的工程经常会涉及到协作分享等流程,选择以整体设计步骤为X轴。从这个矩阵开始进行发散,交叉重合的部分思考结合出的设计,再选取其中的亮点向产品方向创新。

图片

(2)梳理亮点。在梳理发散过程中可以看出,VR客户端和pad用移动端有相对创新的亮点,不同于较为传统的PC端和云端。如果pad端和VR端可以满足3D建模软件所需要的性能,这样的创新就可以被支持。

(3)继续探索。针对每一个流程步骤,可以聚焦到里面的每一个分步骤,探索亮点。比如创作阶段的流程可以展开到具体设计到建模的步骤。当把步骤进行分解之后,可以发散出各个阶段利用VR的创作优势。

(4)梳理亮点。在草图和草模阶段,VR内直接创作可以节约物理材料,支持无死角设计不用重复出图,帮助立体想象、可视、模拟真实尺寸体验,打通草图到建模的链路…颠覆草图到建模阶段的设计流程,提升整体效率和可能性。

图片

 

策略2.  逆向思考:程序 / 观念 / 状态

逆向思维缔造了许多打破常规的创意。上一篇我们介绍了在渐进式创新中实用的原理/功能/结构三种逆向思路。这里介绍3类更适用于激进式创新的逆向思路和具体的案例,为激进式创新赋能。

图片

  • 程序或方向逆向 | 颠倒事物发展变化的构成顺序、排列位置。

例a. C端服务直接收费 -> C端服务免费,其他项盈利

很多产品在收费时直接向C端用户收取服务费用,但是容易面临C端有付费意愿的用户量数不多。不如让用户免费使用体验服务,扩大用户留存的基础上,通过向B端等有更多支付意愿的商家收取费用。QQ、微信等通讯软件的出现让用户免费使用通讯、社区等功能,通过用户的留存从其他商业化项目收费,如收取在软件内的广告费用。

图片

例b. 主动检索 -> 算法推荐

以前用户浏览信息的方式,偏重于主动搜索需要或感兴趣的内容,但是检索流程相对繁琐,用户可能并不够了解自己的喜好。逆向思路让用户被动接收信息,由算法基于用户的浏览喜好状态进行推荐,无需用户进行检索即可将信息推送给用户。短视频等产品就是通过算法推荐匹配出用户感兴趣的视频,让用户享受“刷”视频的过程。

图片

  • 观念逆向 | 设计者反转看待问题的观念,或针对人们的观念逆向设计。

例a. 少即是多 -> 多才是多

现代主义建筑大师Ludwig Mies Van der Rohe提出“少即是多(Less is more)”的极简设计理念改变了很多产品和建筑设计,之后许多设计师都遵循”少即是多原则进行设计,罗伯特•文丘里 (Robert Venturi)逆向而行从设计思路上“反叛”,开创了“少则无聊(Less is bore)”观念,让设计的建筑更符合街道氛围和文化。BJARKE INGELS B.I.G 事务所则喊出了“多才是多(Yes is more)”,设计出造型夸张有趣的建筑,并从外观出发让设计带有更多丰富的能力。

图片

例b. 追随变化 -> 锁定不变

在日新月异、瞬息万变的互联网,很多企业和产品都在努力拥抱、追随变化,但很少有人去思考什么是不变的。Amazon(亚马逊)创始人Devin Beverage在亚马逊创立之初就选择思考未来十年,什么是不变的,并得出了三件极其普通但是消费者最核心在意、不会变化的三件事情:无限选择,最低价格,快速配送。在用户的底层需求上出发,并且长期、持续地投入让亚马逊成长为现在的头部企业,支持经典的包括支持自营&第三方卖家平台(Marketplace)、开放给消费者的比价工具、Prime会员两日达、影视服务等开创性产品设计。

图片

  • 状态(过程)逆向 | 改变现在的状态,如正变负,进变退、动变静、硬变软等等,获得创新。

例a. 人在路上跑动 -> 跑步机跑道带动

过去跑步都是人在道路上跑动锻炼身体,人动路不动。但在艳阳天、雨天等天气下在室外的环境就会不适合跑步运动。跑步机的诞生就让用户可以随时在室内环境中舒适、不占空间地进行运动,让“地”动起来,人在原地跑动。不但可以调节跑步机跑带的角度速度等模拟各类环境,还可以监控记录用户的跑动、健康状态,一举多得。

图片

例b. 人去商店购物堂食 -> 外卖快递送上门

过去的购物体验基本都依赖用户到店进行。但这样商店能辐射的客户范围会相对狭小、用户也必须出行才能购物和享用美食。比起提升到店体验,支持送货上门,让用户足不出户体验到购物的乐趣和便捷。不但让顾客可以享受到更远距离、甚至海外的商品,商家同时可以辐射更远距离的顾客,也不用依赖实体门店进行销售。

图片

 

策略3.  多问”如果”, What if… 

多问些异想天开的问题,别害怕天马行空的发散。我们总是可以把解题思路再聚焦到一个盒子,所以不用最初就把盖子盖上。阿尔伯特•爱因斯坦甚至说过:“如果一开始这个想法不荒谬,那么它就没有希望了。” 在发散的过程中要敢于想象发散,才能带来突破式创新。当我们想要解决问题的时候可以首先大胆发问、设想出“如果”的场景后,再去考虑实现该场景所需要用到的技术;也可以从技术出发,畅想落地场景的“如果“。

图片

对于市面上一些带有亮点的产品,我们也可以倒推去思考当初设计者问出的“如果”是什么。这几年全球都在疫情的不断反复中挣扎,我们可以以远程工作场景为例,来思考一些“如果”。

例. 远程协作

  • 发散:如果我们远隔万里还能面对面、身处一个空间工作交流…

如果远程状态下我们还可以像在办公室一样一起查看模型…

如果在查看模型的基础上我们还可以调整、比对修改方案,及时看到反馈…

  • 结果:空间感知设计评审

Microsoft Mesh使人们能够与全息状态联系,跨空间共享,并从世界上任何地方进行协作。通过为组织引入支持 Mesh 的混合现实体验,可以增强虚拟会议、进行虚拟设计会话、远程帮助他人以及举办沉浸式虚拟会议,从而大幅提高工作效率。

Mesh通过允许用户使用任何设备在任何位置加入任何位置来增强 3D 设计评审。无论是物理存在还是全息,同事都可以实时查看和批注 3D 模型。所有内容都在设计会话之间持续存在,因此团队可以从他们中断的地方快速开始交流理解,激发创造力。

图片

例. 远程培训和维护

  • 发散:如果维修人员不能上门工作,是否有人能远程教学我修理电器…

如果维修人员可以远程修理我的电器就好了…

如果他们能看到我看到的内容,完全基于我的视角指导我…

如果还能在我的视觉标记、说明、演示操作方法…

如果在工业界专业领域,也能这样进行教学、监督、指导…

  • 果:远程培训和学习

Hololens利用AR技术进行远程培训,特别是关于手术、设备维护和交通管制等复杂主题的培训,很难与讲师在同一个房间,并从多个角度查看同一组对象。员工可以通过全息传送、全息共享和可视化效果从任何地方一起学习,有助于提高虚拟培训的效率,同时降低差旅和物流成本。

图片

 

三、激进创新决策 / 策略三则

图片

Warren Bennis说,“创新—任何新想法—根据定义,一开始都不会被接受。在创新被组织接受和内化之前,需要反复尝试、无休止的演示、单调的排练。这需要勇敢的耐心。”激进式创新需要经过的等待和挑战可能非常漫长,在这个过程中,更需要谨慎地筛选想法和推进。下面的三则方法可以帮助我们在决策中减少试错成本。

 

策略1.  考虑实现时间和所需要的技术系统。

九宫格视窗可以帮助进一步决策,将创意灵感在“系统结构”和“实现时间”两个维度进行排列选择,之后根据需求的资源和达成所需时间进行选择和规划。突破式的创新往往需要大量的时间来完善技术和系统,所以在筛选想法的过程中结合这两个因素,可以保证持续性的创新。

图片

例. Netflix播放创新

现在我们熟知的Netflix网飞是一家会员订阅制的流媒体播放平台。

  • DVD及蓝光租赁提供商

最初在1997年刚成立时,Netflix曾经是一家在线DVD及蓝光租赁提供商。当时DVD技术刚诞生,轻质的材料代替了原本笨重的VHS电影格式存储,让邮寄DVD成为了可能。Netflix创新地使用线上下单、往返邮寄的租赁模式,让用户通过免费快递信封租赁及归还Netflix库存的大量影片实体光盘,并以此打败了线下租赁连锁店百视达。

  • 付费订阅流媒体

2006年在线点播技术兴起,随着新技术的出现Netflix 转向通过互联网流式传输视频,提供更广泛的内容选择,并且可以无限观看、点播、低价,高质量的影视内容,并最终吸引了对手Blockbuster 的核心客户。Netflix的付费订阅模式和Apple的iTune下载、Youtube的免费模式成为当时最热门的三个细分市场。

Netflix的创新帮助他们在市场上站稳脚跟并不断突破,但如果在1997年Neflix就把流媒体视频作为目标进行创新、不考虑当时的现实技术和研发时长,那公司可能在漫长的科技发展等待中生存,也就没有后来的故事了。所以对于突破性的创意,按照时间维度、技术实现给出逐步创新的节奏,通常能更好地帮助产品持续创新。

图片

 

策略2.  考虑可推动性&可实现性

如果你的创意需要在大公司里进行落地和推进,可以使用“传播速度和可实现性”矩阵逐步选择,第一步聚焦适应速度和传播速度,将决策者对产品的影响也放入考察。第二步,审查可实现性和财务可行性,之后做出相应选择和推动。

图片

这个矩阵也可以用于对外部环境的判断,在第一步骤中考虑想法在文化、政治、地缘等因素下的适应和传播速度,在第二步骤中考虑市场技术或包容度是否能支持该想法的推动。

例. 出行产品的本地化决策

以出行领域的产品设计为例,我们可以看看在这个领域里一些创新决策考虑。我们熟悉的Uber,滴滴等打车平台通过利用空闲的私家车来接送乘客,降低了打车花费、难度和空闲汽车的利用率,颠覆了原本的出租车打车市场。而在决策想法时,这类出行产品需要考虑当地的具体交通、运输工具、出行状态等现实因素进行推送。

  • UberEats在美国部分城市用汽车送外卖

Uber优步是起源美国的打车平台,2016年该品牌在美国本土开启外卖业务。当时中国已经成熟的外卖业务主要是由骑手骑电瓶车来完成外卖服务,但在美国一些城市自行车作为工具的出行道路十分有限,人们居住的距离也相对遥远。所以Uber从他们已有的打车系统上汲取了思路,在这些城市让司机用汽车送外卖解决了路程遥远的问题,同时让他们可以有机结合接送乘客和接送外卖的订单,系统规划路线后不但提高效率,也让司机增加了收益。

  • Gojek在印尼用摩托车送乘客

2015年,当来自美国的Uber和来自新加坡的打车平台Grab在印尼打得火热、且都使用出租车和私家车作为接送乘客的交通工具时,印尼市场的Gojek则聚焦印尼的国情,把打车平台的思路运用在打摩的上,规范化摩的市场。在交通严重拥挤的印尼,摩的的快速穿梭远比汽车出行更适合本土,这让Gojak成为了印尼的第一大出行平台,并在后来拓展出庞大的本地生活产品体系。

图片

 

策略3.   小心鸿沟

“如果解决方案意味着与他们习惯接受的标准有太大的偏离,那么成年公众的口味不一定准备好接受符合他们要求的合乎逻辑的解决方案。” ——Raymond Loewy,著名的可口可乐瓶、壳牌石油标志背后的工业设计师这样说。

如果你的创意需要很多解释,大量的培训和“帮助”功能,那么这样的设计可能过于先进或复杂,不易被大众理解。产品创意在初期会辐射到的创新者、早期使用者与普通使用大众间可能存在着差距,在一些案例中,早期使用者觉得有趣认可的解决方案并不被大众所买单,所以在选择创意和推进过程中,设计师也要考虑这种差距。

图片

例. Airbnb如何更好地衔接早期大众

Airbnb将寻求经济实惠住宿地点的旅行者与想要租房或备用房间的人联系起来,这个想法现在已经被大众熟悉。但在2009年业务的第一年,这个创意是非常具有创新性的,尚不为大众熟知。

  • 好创意却不得市场认可

当时虽然早期使用者的反馈非常好,但团队仍然面临着严峻的用户增长和收入挑战,甚至一度每周只赚200美元。为什么这样一个对租客和出租者都互惠互利的创新,却不能在市场上得到良好的反馈呢?一天下午,团队正在与Paul Graham一起思考纽约市的搜索结果,试图弄清楚为什么他们增长。Paul Graham给出了一个简单的建议:前往纽约,租一台相机,花一些时间与客户一起列出他们的房产,并用美丽的高分辨率照片取代业余摄影。因此,团队成员飞往纽约,与Airbnb在网站上列出房产的客户会面、拍摄高质量照片。结果收入迅速增加了100%(400美元)。

  • 照片减少沟通鸿沟

究其原因,其实是虽然当时Airbnb的想法已经在市场上独具突破性,但团队没有考虑到早期使用者和早期大众之间的差距。早期使用者往往乐于尝试新事物且有很强的需求(特别体验、更低成本出行等),而早期大众会和他们现有的酒店体验进行比较,安全、正规、优质、温馨的入住体验是他们的强需求,那些非高清、非精美照片很难在第一印象上说服早起大众这些品质。弥补上这个预期差距后,也就有更多的用户愿意尝试了。在后续的迭代中,Airbnb也也在系统改进上不断强化安全、正规,更好地满足用户。

图片

 

结语

激进式创新往往依赖团队基于用户需求、市场、技术等多维度内容的理解。在创新过程中,设计师更多了解相关领域和创意方法就能更有益启迪想法。希望本文激进篇、上文渐进篇的设计策略可以帮助设计师们更好地创新发散。

创新思维可以被学习累积,设计师可以保持多看多思考的习惯,从其他优秀的设计和产品上反推创意思路。设计创新时要相信推进的过程,如果对题目感到无从下手,相比纠结现有思路是不是最优解,不如用文中的方法把想法全部写下来并原型尝试。许多时候我们离优秀的想法只是一步之遥,也许转个弯就柳暗花明了。

 

参考:部分策略启发/提炼自以下著作和文章:
  1. 《Creative Strategies》by Fridolin Beisert (Author), Jessie Kawata (Artist)
  2. 《The Design Thinking Playbook: Mindful Digital Transformation of Teams, Products, Services, Businesses and Ecosystems》Michael Lewrick(Author),Nadia Langensand(Artist)
  3. 《Zero to One: Notes on Startups, or How to Build the Future》by Peter Thiel, Blake Masters
  4. 《Thinking, Fast and Slow》Daniel Kahneman
  5. 《Cross the Chasm》Geoffrey A. Moore
  6. 《The Innovator‘s Dilemma》Clayton M. Christensen
  7. 《Lean Startup》Eric Ries
  8. What are 5 Whys? | Interaction Design Foundation (IxDF)
  9. https://cwodtke.medium.com/how-i-stopped-worrying-and-learned-to-love-design-thinking-f1142bab60e8
  10. Types of Innovation – The Ultimate Guide with Definitions and Examples
  11. The Design Process Simplifed – Design Sojourn
  12. https://medium.com/user-experience-design-1/10-design-principles-every-designer-should-know-a03e12f8deca
  13. https://blog.prototypr.io/shaping-user-behaviour-is-better-than-changing-them-47997f36e71
  14. Airbnb 2021 Release: 100+ innovations and upgrades across our entire service
  15. Clipdrop – Copy and Paste reality with AR + ML | Product Hunt
  16. https://dodo-africa.medium.com/how-design-turned-airbnb-from-a-dying-startup-to-a-billion-dollar-business-b7f711e9ef73
  17. https://docs.microsoft.com/zh-cn/mesh/get-started


作者:ISUX设计

转载请注明:学UI网》设计策略|源源不断的创新思路(激进篇)

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


日历

链接

个人资料

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

存档