设计思维

如何绘制功能图标基础篇?

seo达人


想想图标的绘制也是有历史的,从刚开始ps用面切法运用布尔运算去切,有时候线条也是用面切面得到。随着线性图标的火爆和普及,开始放弃面切法,转用钢笔工具直接绘制,还可以很好的控制线的直角和圆角。当你会使用Ps绘制图标了,换成ai你会发现更加的快捷方便。随着Sketch软件在界面设计中有一席之地,在Sketch里快速绘制图标也是设计师需要掌握的一门技能。

 

图标的绘制方法有面切法,钢笔绘图法,锚点法,圆切法。

下面会从Photoshop、Illustrator、Sketch三个软件去细讲基本软件工具。绘制案例想了很久要含有基本的知识点,使用更多的工具。最后选择的图标为齿轮、信号,其中齿轮是最经典的案例了,也是绘制图标的必修课。

 

一、 Photoshop篇

在ps里面绘制图标使用的基本工具有小白、小黑、布尔运算、钢笔工具、锚点。

 

1.1 第一步打开ps,ctrlk,勾选将矢量工具与变化和像素网格对齐。

 

 

1.2 小黑、小白二人转

 

1.3 钢笔工具、贝塞尔曲线

贝塞尔曲线很多写的文章太官方了,不太懂,也不知道如何下手。我还是总结我工作使用中应该注意哪几点。

a、锚点俩边的手柄要保持在同一水平线上。倾斜的锚点的手柄也要保持在同一水平线上。

b、当前手柄的长度不能超越下一个锚点的水平线。

c、上下左右最边上的肯定是锚点存在的点,其他地方锚点的选择需要多练习才能找到合适锚点的位置。

c、钢笔绘制的时候尽量不要让俩个锚点靠的太近,会让俩个锚点的手柄没有施展的空间。

最后如果你感觉贝塞尔曲线还是很难,可以先用Illustrator里面的钢笔工具绘制,用多了就好了。我之前也感觉Photoshop里的钢笔工具绘制好难用,今天写教程做案例试了试还是很好用的,曲线也可以调整的很柔美。

 

 

 

1.4 布尔运算

布尔运算是通过绘制规则的形状进行合并、减去、相交、排除等方式得到新的形状。

 

 

1.5 主题图标面板绘制

在主题设计的时候大神们的底板用的都很有特色。

 

 

1.6 齿轮、信号案例演示

 

二、 Illustrator篇

在ai里面绘制图标使用的基本工具填充、描边、钢笔、路径查找器、形状生产器、对齐、锚点圆角、扩展。

 

2.1 cc2015自带直角变圆角。

 

2.2 路径查找器的形状模式等同于ps的布尔运算(上面已讲),路径查找器下的6个工具在平时使用较少所以就忽略,感兴趣的自己研究下。钢笔锚点和ps使用是一样的。

 

2.3 路径描边可以通过扩展让线变成面,但是在绘制线性图标时不要把线进行扩展,因为放大缩小不会改变线的粗细,扩展成面会随着放大缩小而发生变化。有时候我们在绘制线性图标不好做的曲线,可以尝试把这个形状画出来,然后再变成描边就ok了。

 

2.4 在绘制对称图标的时候,有时候我们只需要绘制一半,通过镜像复制,然后通过对齐-垂直或水平分布间距就可以很好的闭合在一起。( 对齐-显示选项-对齐关键对象-垂直或水平分布间距 )

 

2.5 形状生产器工具,直接可以绘制有闭合可能的所有形状。

 

三、 Sketch篇

在sketch里面绘制图标使用的基本工具编辑、旋转、钢笔、剪刀、布尔运算、外形、变平。

 

 

四、 Ai制作好如何转到Ps和Sketch?

 

4.1 Ai制作好转到Ps,在Ai复制备份一个,然后对象-扩展,ctrl+c复制,ctrl+v粘贴到Ps里面选择形状图层,不要选择智能对象。再用小白工具调整细节,让每个锚点都和像素网格对齐。

 

4.2 Ai制作好转到Sketch,ctrl+c复制,ctrl+v粘贴到Sketch,调整参数尽可能是偶数整数。因为大量存在小数点的问题。改变数值还是要看下一图标整体感觉。

 

 

五、 如何达到视觉平衡?

很多人刚开始不会说按照规范来,主要在固定大小里面绘制就好了,其实这样也可以,但是最终还是个别微调图标达到视觉上的统一。

比如在56*56px固定大小的区域绘制好全部图标,不要超出这个范围。然后整体看哪些视觉比重大需要缩放,缩放是以2的倍数放大缩小。

56-2的倍数 比如56px,54px,52px…

 

 

六、 如何定义规范?

比如在一定大小内,如何制定出一像素?

以48*48大小为例。看似留了一像素,上下左右还是俩个像素,跟上面的视觉平衡是一样的,都是以2像素为一个基准。这种规范大一点的尺寸也是适用的比如88*88px。

 

 

七、 如何统一风格?

图标的风格我在《如何系统学习功能图标》基本都概括出来了,可以分析总结每个风格的特点,快速的制作,也有不少人发我看他们绘制的图标,会用到俩三种风格同时用到图标上面,还有就是总结出来的还没尝试学会就开始自己去尝试新风格,尽量还是不要先去尝试新的风格,之前整理的应该够用了。

 

 

总结虽然讲的都是简单的基本教程,但是也是必须要掌握的,掌握上面基础教程不单单只适用于图标,在插画,图形绘制中都可以用到。这边教程ai方面相对篇幅较少,Ai和圆切法没有写到,会在下篇《如何学习yoga style?》中详细讲解。最后感谢大家收看。

 

原文地址:站酷
作者:水手哥

转载请注明:学UI网》如何绘制功能图标基础篇?

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


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


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




如何学习Yoga Style?

seo达人


一、分析Yoga Style

Yoga全名Yoga Perdana,是一名印度尼西亚的设计师,擅长插画和标志设计。玩追波的人应该一点都不陌生,他独特鲜明的风格得到很多人的关注。

 

 

分析作品

a.他的每个作品在造型上都很简洁、饱满,在结构线明暗关系上把握的非常好。

b.配色方面多用同色系或用近似色做渐变,看上去很和谐,但也有很突出的光影明暗变化,很好的结构布局,加上每一个曲线变化都很好体现结构变化,更加丰富饱满。

c. 在很多正负图形中,突出“正”空间给足空间,压缩负空间尽可能减少留白,让画面更丰满。

d.在具象的动物造型时,也遵循头小身子大的美感,可以发挥更大的施展空间。

 

二、如何尝试练习

先进行抽象的开始练习,可以自由的发挥。在造型能力方面要求不是很高。在具象的事物中对造型的能力要求很高。

先在一个圆里,丰富的发挥想象,可以跟水、山、云、海、花盆、气泡结构后大量绘制,让画面有一种看山不是山,看水不是水的感觉。从水中提炼小的元素进行装饰,从山、云中要分析层次远近的虚实关系。还有瓷器的里面的花盆上面的效果也很抽象。让人很多联想。然后就开始大量的去绘制,最后从手稿中找出有感觉的进行软件绘制。

 

 

 

三.软件基本工具

a. 钢笔工具+形状生产器工具

b. 钢笔工具+分割

 

 

 

四、黄金分割

黄金分割是指将整体一分为二,较大部分与整体部分的比值等于较小部分与较大部分的比值,其比值约为0.618。这个比例被公认为是最能引起美感的比例,因此被称为黄金分割。

黄金比例等于1:1.618,如何计算元素的长度?首先需要确定小元素的长度。然后乘以1.618的黄金比例就是大元素的长度。

 

 

黄金分割在LOGO中的应用

 

 

 

 

 

五、圆切法

本来要准备用手稿绘制好,来用圆切,但是像yoga那种造型很准备的手绘绘制难度还是很大,绘制的一点效果没有不能直接用,所以还是先找图片,用钢笔大体绘制出想要的效果,因为用钢笔绘制可以不用考虑细节,绘制出大体的轮廓,如果用圆直接切,很容易就扣细节,很快勾勒出简洁的轮廓。(理想和现实还是有差距的。)

圆切的时候绘制好所有的圆后,为什么不用形状生成器工具和分割呢?因为太多的圆一起快速生成后的形状上会生成很多锚点,正常一根线条锚点越少越柔美。

 

 

 

原文地址:站酷
作者:水手哥

转载请注明:学UI网》如何学习Yoga Style?

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


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


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



专访腾讯交互设计师对话?

纯纯

随着互联网的发展与深化,很多服务早已从线上渗透到了线下,腾讯CDC在服务设计课题上都做了哪些探索?

 

从互联网走向传统行业,互联网金融与保险的线上和线下的探索,是相对来说比较典型的尝试,让我们感受到从互联网到传统行业的融合,这个过程也可用过往积累的互联网理念完成。只不过从做线上线下相结合,到向其他领域扩展,工作环节和内容越来越复杂。

 

我们有十几年互联网用户体验设计的经验积累,并以此做出了工具和平台,比如一直在对外推广的腾讯设计云服务——腾讯设计体系TDesign、内部设计协同和设计管理工具 CoDesign和ProWork。用户研究也是我们多年专注的领域,2022年腾讯调研云将正式对外发布,当前已上线的工具是腾讯问卷、腾讯兔小巢、卷叔填填圈已经在互联网及传统行业中被广泛应用。

 

腾讯在产业互联网领域始终在做着前沿领先的服务。国家政务项目“数字广东”的集成民生服务小程序——粤省事,“一站式更省事”的指尖办事模式已成为全国在线政务服务的标杆工程。

 

互联网公益方面,在环保领域的动物保护上,使用腾讯AI技术结合服务设计,做了“雪豹保护”项目,为动物保护专家、守护员,提供一套线上动物识别的服务,帮助他们在艰难的户外环境中提高工作效率。

 

我们通过技术工具平台,联动社会公益机构与志愿者解决问题,正在研发的长城保护的服务设计项目,引入专家复原长城,希望公众能了解更多长城的知识,是继“云游敦煌”项目之后又一个广受人们关注的世界文化遗产保护工作。

 

近两年我们也在公共服务领域有很大的投入,比如社会应急服务升级,包括急救与突发社会事件的响应该如何更好去应对?2021年下半年开始又在全面关爱大众人群,包括儿童与老年人心理健康的社会服务上。比如,通过网络实现心理健康方面知识的传播、让社会机构与志愿者能及时对接上需求,形成心理专家与社会机构之间形成服务闭环,为社会建立起民众身心健康的防线。



 

从用户体验到服务设计,它们之间有着怎样的关系?

 

用户体验的关注点更多在用户使用服务时的感受如何,而发展到服务设计层面时,我们除了关注用户体验外,也会关注服务提供者这一侧的需求。

 

服务设计与用户体验设计的理念和工作方法一致,但服务设计体系更复杂。做互联网产品时,人机交互的设计流程相对更容易固化,只要程序的交互设计过程没有大偏差,用户的使用体验就不会太差。

 

服务设计的工作往往同时涉及线上和线下。线下服务场景中,不但要考虑多设备联动,还有人对人的一整套服务流程。比如做金融、做政务的项目,它们的服务会涉及到政策、法律法规和各种标准,都是我们做服务设计时的思考点。这些标准制定方,有很多不同的岗位角色为公众提供多样化服务。

 

与做产品不同在于,产品设计往往面向特定的服务对象,而政务类的服务设计,面向的是所有人,每一位公民都享有平等被服务的待遇,于是复杂程度是几何级数提升,但其中一脉相承的原则是以人为本。腾讯的经营理念始终是一切以用户价值为归依,从人机交互的用户体验设计,到服务设计,以用户为本的核心前提不变,只是复杂程度的增加。


粤省事小程序是一个基于移动端的聚合式政务服务平台。以这个项目为例,设计团队探讨了基于互联网的设计理念与传统政务服务相结合的模式,来推进产品体系中各模块的设计工作,为整体重塑广东电子政务服务的远期目标积累了重要经验。


过去是群众在一个个政府部门面前排队办事;现在是我坐在这里,一个个政府部门在我面前一起办事。小程序是一个开放接入平台,政府各部门愿意接入哪些移动端的业务能力,就接入哪些业务,是自下而上的设计。▼


在解决方案上采取以办事为中心的信息架构。 ▼


我们希望用户一进入粤省事小程序,有一种“这就是我的”那种感觉。他们可以直接打开自己的电子身份证、电子护照、电子驾照等等,就像打开自己的钱包那样。小程序采用了以证件为中心的主程序设计。 ▼

 

以我能办什么事为中心的二级页设计。 ▼

 

设计带来的一个突出的变化是,从“罗列服务内容让用户来找”转变为“深入了解需求,把服务打包好送到用户面前”。在实际设计过程中,我们重点重建了服务的使用场景。把可以分角色分阶段展示的功能拆分开,根据具体服务场景更聚焦的去展示内容。▼


为了更高效接入100多项服务,采用了模块化的设计方法。将业务整理分类、抽象出最基础的业务模型,得出办事模型。以下模型可以涵盖小程序现在接入的70%的办理业务。再针对单个模块进行细化设计,让不同的过程以拼积木的形式组装完成,从而实现符合规范的个性化接入。▼




对于腾讯CDC来说,做公益项目与商业项目间最大区别在哪里?

 

自从有设计以来,一切就是在以用户价值来考量,核心的经营理念是用户价值与商业价值之间的博弈。在设计决策上,此前更多是在两者间取得平衡,但近几年想法有了升级,在我们看来,仅是用户价值与商业价值之间的关系已经不够了,要能站在产业层面去看用户和商业,如何能通过提升产业环境,来实现社会服务的提升。

 

团队做B端服务,希望能通过挖掘过往经验,做更多社会创新探索,与整个社会大环境提升有更好的结合点。这时用户的概念就延伸了,用户不仅指接受服务的人,也包含了服务的提供者——产业涉及到的每一个环节中的每一个角色,每一个具体的人。

 

比如互联网应用适老化改造项目开始推进时,通过优化界面、简化程序、增加功能等方式,来适应老年人的手机使用需求,然而用研的同学发现,改大字号,或者是语音交互等,仅仅是让长辈用手机购物更方便,解决的是“更好用”,却依然没有解决“不会用”的问题。银发青松助手作为线上版本的教程,对所有参与项目的同学来说,都是全新又极富挑战的领域,一边结合现有适老化改造经验,一边通过可用性测试不停地发现和解决问题,然后把解决方案体现在这个小程序里。


又比如腾讯首个雪豹保护数字化平台,用AI技术识别雪豹,优化雪豹的数据录入、处理、分析流程,解决一直以来动物巡护员主要靠红外相机、传统表格记录、人工审核照片等耗时费力的雪豹保护中等困难。▼




创新是每一个设计领域中的关键点和难点,服务设计中的创新点和基础是什么?

 

创新的基础是挖掘社会价值。以团队提供的设计云服务举例,如果我们看重商业价值,就会从产品设计与产品运营角度出发,看它能够覆盖多少设计师、多少B端企业购买我们的服务、营业额等等,这种逻辑是商业价值所寻求的。但是当我们去寻求社会价值时,这些商业逻辑中的问题,至少就不会放在首要问题的列表中了。

 

我2003年入职,是腾讯的第一位专职交互设计师,当时对设计的认知很浅,幸运地进入互联网交互设计领域,入行不久就意识到这是一个有前景的领域,然而成长过程中有很多迷茫困惑与困难,我认为仅凭个人力量很难做好工作,每个人都生活、工作在一个个环境中,需要小环境、大环境与自身的配合;只有当环境变好时,自己才会更好。我们本着这样的思考和理念,首先努力打造公司、专业领域的小环境,同时也不断影响行业、产业大环境,每一位设计师才会有更好发展。

 

作为交互设计师,过去听得最多的词是“人机交互”,但我常对别人说,交互的最高境界是人与人的交互,因为机器是人设计的,机器的另一端也是人。而服务设计就是“人人交互”。

 

在做互联网金融行业的服务设计的时候,我们陆续与许多金融界同行交流,他们对用户体验设计的方法与工具抱有极大兴趣,希望我们能对外提供服务,我们也认为更多人变好才是真的好。这是社会价值的体现,是我们做设计云服务的出发点与创新点。

 

除了做工具外,我们会不断输出理念,做一些行业观察,比如每年发布的互联网新兴设计人才白皮书。

 

团队也一直沉淀工作经验,陆续出版成书,希望能从产业一线的需求与视角出发,去帮助想要从事这个领域的其他团队和个人。

 

在人才培育上,都在讲产学研一体,我们在与高校在招聘、实习生培养上的合作基础上,2021年CDC与南方科技大学、深圳大学等高校进行超越以往的深度合作。过往与高校的合作模式是课题式,只让老师带学生做课题,以此帮他们感受来自产业一线需求的探索,从而了解真实的用户、团队的工作方法,我们也会将学生的创意转化成产品、服务和工具。在这种合作模式下,学生们的基础还是由学校自己去培养,课题只是实践。

 

2021年我们与深圳大学开展的是微专业合作,与学校一起跨专业、跨领域招生,将团队的工作方法和理念,形成一套1-2年的课程,从更基础的层面去告诉学生们学什么?怎么学?学成之后怎么用?同时我们也为同学们提供职场实习机会,让他们更早了解实际工作与产业的需求,他们才会更明白自己在学校里的学习目标。

 

与南方科技大学的合作是探索共建无障碍实验室。我们提供更多真实用户的样本、数据和诉求,让学生们了解用户,去探索可能性,也会将这些创新点回归到产品上,以验证这些研究是否卓有成效。

 

让产学研有更好结合,是CDC寻求社会价值的新方式。希望能从学生抓起,从学术与研究的结合处做起,让社会里更多相关领域的人一起探索和进步。腾讯CDC只是其中的一环,通过服务设计提供更好的触点和界面、更好的工具与环境,将产业中的每一个角色卷入进来,大家在其中都能迸发出新想法。环境培育起来后,慢慢将会诞生新产品、新物种、新理念,这与我们过往做任何一个界面设计、用户体验设计都不同。

 

云游敦煌,是由敦煌研究院、人民日报新媒体、腾讯联合推出的,首个拥有丰富的敦煌石窟艺术欣赏体验的微信、QQ小程序。▼




在后疫情时代,人们的需求,以及你们在做设计项目时思考的方面有变化吗?

 

疫情之后大家都在面临很多变化,不论工作、生活还是大环境。我们会思考如何才能更好去体会人们新的难处,帮助他们解决问题。

 

2015年9月,腾讯公益慈善基金会发起人兼荣誉理事长陈一丹先生,在第一届腾讯99公益日上说:“社会的痛点,就是公益的起点。”对于我们设计师来说也是一样的,思考出发点不再只是从用户体验的角度,不仅仅去做锦上添花的事,而是思考真正的痛点在哪里,落到以人为本的根源去做事。

 

“微光行动“是腾讯联合深圳网警、专业心理辅导团队共同发起的网络抑郁症群体的关爱活动,期望帮助大众更好了解抑郁、正视情绪,并通过微光小程序等渠道,为用户提供线上情绪出口,进行心理健康的正向引导。


抑郁症已成为人类第二大杀手。国家卫健委去年发布的《探索抑郁症防治特色服务工作方案》中,将老年人、青少年、孕产妇、高压职业从业者都列入抑郁症高发的重点人群。大众对抑郁症等心理疾病科学认知不够,甚至存在偏见和病人的病耻感,加上专业医学、心理学领域专业门槛高,让抑郁症救助难度增加。在这样背景下,微光行动小程序,我们在产品上增设专业科普资讯、暖心电台、书单、音乐等治愈系功能和内容,并计划去连接用户与专业心理咨询师,针对线上线下两种就诊模式提供了相应心理援助和医疗帮助。




完成一个典型的服务设计项目,通常需要哪些人员参与?

 

我们理念一直都是除了设计师、研究员外,尽可能多卷入不同角色的人员参与项目。

 

过往大家对CDC的认知是设计团队,但现在我们已不再只是设计团队,设计师也不是团队中人数最多的职能。现在团队人员包含研发、产品经理和产品设计的全流程岗位,还包括产品运营与市场营销。


除了团队成员外,项目中还会卷入不同的外部角色,比如将客户、社会上的服务对象,卷进项目中。为此,我们做了用研工具卷叔填填圈,适老化的项目中,为了更好更快完成改造工作,我们就在填填圈中沉淀老年人样本,让大家能更容易触达到服务对象。

 

卷叔填填圈小程序 ▼




2016年之前你们就开发出了对设计师及项目管理效能帮助很大的平台工具设计云,这几年团队有没有新的挑战?

 

设计行业对效率的追求永无止境,然而挑战一直都存在。一个核心问题是如何才能不再做重复性工作?除了项目管理平台以外,我们还做了提效工具,尽可能不去浪费设计师的时间。它们集中解决两个方面的问题——生产怎么做才能更快?有更多人协作项目,不同职能角色间工作流程如何缩短?

 

ProWork 是 CDC 在腾讯内部沉淀多年的便捷高效的协同平台,为团队中的不同角色提供支持。团队成员可以通过日历、清单来规划每⽇的工作,同时管理者也可以通过统计报表随时掌握团队状况。通过简单灵活、多角色统筹、任务量化统计的产品特性,实现日程管理、项目追踪、人力统筹。▼


另一个方面的挑战是对新方向的探索和尝试。在这个层面上不是工具做好了就能解决的,为什么说我们的很多项目叫社会创新?因为我们必然会尝试未曾接触和了解过的服务。它们可能成功也可能失败,如何才能缩短从失败到成功之间的距离?如何降低试错成本?这些都是CDC面对的新挑战。




工具智能化以及设计师如何才能不被AI替代是近年来被广泛讨论的话题,基于数据的设计、智能化的边界在哪里?设计师的核心价值随着时间是否有些改变?


照相机出现后画家还有生存空间吗?我觉得大家应该开心拥抱AI,因为AI永远不可能替代人类,但可以帮我们节省很多工作时间。


回顾工业设计发展史,从手工到工业时代,再到大生产时代,一直分两派,一派做工具,一派做设计,有人做组件、模块和结构,有人使用它们去做产品。只有组件和工具在持续创新的基础上创新才能更快。


用户体验设计如今正踏上这条自动化道路,我们如何才能更好走下去?都说现在是工业4.0时代,大家已经在用数字工具做设计了,但和许多工程领域相比,我们依然落后,还有很多设计师在做重复性的投入,其实一些设计工作是可以用智能化工具去“拼装组件”的。这就像手工业时代,每一个组件都靠手工打磨,而大工业时代只需到市场上采购零部件,产品就可以组装出来。


AI帮助我们做设计,而不是替代我们做设计。设计师的关注点应是如何更好利用工具提升设计产出。自动化生产能让设计师更好地释放劳动力,才能孕育出更多可能性。让重复劳动交给机器,当你的时间和双手被解放之后,头脑更活跃,创新也就更活跃了。




大设计奖的主旨是发现与提升设计的价值,设计团队从哪些方面建设和提升,才可能成为公司的战略核心组成部分?

 

很多设计团队往往是“一只手”,需求方要什么,设计师就呈现出来,但设计还可以成为公司的大脑。进一步提升设计的价值,意味着设计需要从技艺上升到设计思维,不仅探讨如何使用工具、做好图形图像、界面和各种效果图等工作,还要思考如何让设计思维成为促进经营的工具,去挖掘商业模式、社会创新,探索新型社会服务的可能性。




作者:大设计奖 来源:站酷

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

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

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

设计师应该掌握的需求分析方法

纯纯

随着互联网产品的不断向前发展,“产品设计导向”一类的概念已经不仅仅限于大公司中,在往日越来越注重“短期效率”的小公司也都纷纷开始注重产品设计方面的建设。


所谓的“产品设计导向”指的是产品建设之前要围绕着产品的立项、目标用户等等去规划产品的功能点,明确产品核心价值;在产品上线之后,通过数据分析和功能反馈,发掘更多的需求,去规划下一步的”功能增删改“,将产品的设计方向引导到更正确的位置,提升用户留存率,延伸挖掘出产品更多的可能。


另一方面,从现在的设计环境而言,对所有的设计师既是机遇,又是挑战。大量的UI专用工具(Sketch、Principle、Flinto、Origami等)的出现,大大提升了产品前期的UI设计师的工作效率,所以现在“全链路思维”已经从刚出现时的“概念化思维”变成了“主流化趋势”。所以现在很多的UI设计师在站酷发布自己的作品的时候大部分都喜欢加入一些产品前期分析(功能设计、用户画像等)内容。


但是很多设计师的分析环节明显就是为了证明“有”而去“做”,缺少了真正的分析部分。给我印象很深刻的就是之前看到的一个二手房买卖的UI设计作品,典型用户画像里主流用户是:“男、七十岁、目标是给自己的儿子购买婚房”。实际上这种所谓的产品分析流程对于设计师而言是没有任何帮助的,只是从形式上走个过场罢了。


本篇主要讲述产品设计中的一些分析方法,范围从“个人练习式设计”到“团队合作式运作”,知识点大概有:空雨伞思维、文章大概六千字左右,建议阅读时间:15分钟。适读人群:初级产品经理、交互设计师、在工作中职能范围与产品规划有关的UI设计师、想要学习产品设计的新人(文中含有大量配图用来辅助观点,因此建议PC端阅读)。



产品运作流程概览

我遇到的比较普遍的问题是:很多设计师对于自己所在公司产品的运作流程并不是十分了解。这样会在你实际配合工作的时候感到无从下手。有的甚至于同一家公司的不同设计师对于产品设计方面的理解也不尽然相同。所以说要从浅到深的学习产品功能设计,就必须先理清当前工作的常规流程,例如常见的产品运作流程(如下图)

上面是一个相对规范的产品开发流程,实际上你在看到上述流程图后,对照自己公司的情况,会发现有一些岗位上的缺失。出现这种情况最大的原因是因为很多公司会把一些职能进行合并用来节省成本,现在仍然有大多数的公司并没有交互设计师的岗位,但是交互设计的职能不代表没有,而是被产品经理或者视觉设计师兼任了。你需要明确团队中各个人负责的职能部分,才能更好地提升沟通效率。



个人思考方法(一):空·雨·伞

上面讲到了设计师的“全链路思维”现在已经成为了一种主流的观点,将来的前期的铁三角“产品经理、交互设计师、UI设计师”很有可能结合变成是“交互视觉二合一”甚至是“产品交互视觉三合一”的状态。所以现在很多的设计师开始尝试自己去DIY一个需求或者做ReDesign这样的设计,希望可以通过这样的方式完成自己跨领域能力的一个积累。但是当他们打开电脑的时候,大部分人会发现自己突然变得没有思路,从产品方向点确定到产品视觉产出之间出现了断层。

其实做过设计练习的人都知道,由于一些现实场景的不同,一些人在做设计练习的过程中会受到很多条件的局限,尤其是在孤立无援的情况下,你面对自己的练习作品往往会无从下手。当然,不同的场景下有不同的分析方法。

在团队协作的时候,分析方法要全面、严谨、反复推敲。

在个人练习的时候,分析方法要高效、直接、简化不必要的流程,以培养自己的分析能力为主,在这种场景下,空·雨·伞就是一个非常好的思考提升方法(如下图)

简单概述“空雨伞”思考方式:观察(事实) → 思考(内在) → 产出(解决方案)

运用在设计上就是:发现痛点 → 思考原因 → 提出解决方案。“空·雨·伞”因为简单、成本低、易上手,可以作为设计入门培养思考能力的一种方法,但是在使用空·雨·伞的分析方法时需要结合一定的具体调研(或者轻量级的用户研究)相配合,不然又会变成一味的“拍脑门儿”式的主观臆测,对于分析能力提升没有丝毫帮助。



个人思考方法(二):逻辑树

逻辑树又称问题树、演绎树或分解树等。很多咨询公司分析问题最常使用的工具就是“逻辑树”。逻辑树是将问题的所有子问题分层罗列,从最高层开始,并逐步向下扩展。


简单来形容一下逻辑树:把一个已知问题当成树干,然后开始考虑这个问题和哪些相关问题或者子任务有关。每想到一点,就给这个问题(也就是树干)加一个“树枝”,并标明这个“树枝”代表什么问题。一个大的“树枝”上还可以有小的“树枝”,如此类推,找出问题的所有相关联项目。逻辑树主要是帮助你理清自己的思路,不进行重复和无关的思考。


如果你要运用逻辑树方法去分析产品,主要的一点在于学会细化拆解目标。


举个例子:

在2017年我创建了自己的个人站酷号,但在发布了一部分的文章之后,我开始意识到文章的可读性始终不高。在这个时候我们就可以按照逻辑树的分析方法去进行拆解分析,去发现自己提升的空间。

如上图,就是逻辑树最简单的一种场景应用。确定目标后向下进行拆分,拆分出三级逻辑树是比较容易的,甚至你可以沿着已经列出来的大纲继续深入细化,再拆分出更细更深层的各种提升点。


逻辑树分析法在个人作品中的主要作用是发散思维;在实际工作中的作用则是针对特定问题进行分析,理清思路。总而言之,是让你在分析的过程中更加有条理,避免重复思考。但是逻辑树分析也有一个缺陷,就是在逻辑树分析的过程中,根据现象分裂出子层级的步骤十分依赖你的认知能力,就如同做设计一样,当你感觉界面的视觉出现出题的时候,需要利用你学出来的知识去进行视觉优化,如果你对设计理论知识掌握程度并不是很强,那就不能采用逻辑树分析法解决问题。


总而言之,逻辑树分析法适用于对问题研究十分深入的情况下,如果你对当前的环境认知并不充足,那么就很容易走入歪路,跑偏主题。



实际项目:用户调研访谈

在一些实际项目中,用户调研是需求来源的主要渠道。提起用户调研,很多人会觉得这不属于UI设计师应该做的事情。其实行业逐渐规范的现在,用户调研、分析需求的能力也成为了衡量UI设计师能力的一个标准。现在的互联网产品种类繁多,从早期只做主流行业,到现在基本所有的冷门行业都有涉及;作为设计者而言,大多数设计师已经开始在设计的过程中心有余而力不足。


造成这种现象的主要原因为是因为随着行业的细分以及范围的扩大,我们距离用户的真实场景偏离太远,导致我们在设计中很容易理所当然的赋予给用户大量无用的东西。偏离了用户所需要的主要轨道。因此对于很多的设计师来说,学会了解用户以及分析需求成为了十分重要的事情。


然后整理了一下我在用户调研过程中的几点认知:


第一,保证调研的目标的准确性

我们需要明确,我们希望通过调研达到怎样的目的?(例如:提升部分页面转化率、收集用户对于产品不满意的地方、通过用户使用产品发现用户潜在的痛点)

第二,有目标的选择用户

一般来讲互联网公司都有收集客户反馈的部门,他们掌握着所有客户的反馈意见。我们在选择调研用户的时候,最好可以根据我们在调研行动确立初期拟定的目标去选择调研目标

第三,适当的准备调研内容

当我们确定了调研目标和调研用户之后,就可以根据现有状况去准备调研内容。调研内容一定是要在事先拟定好(开始调研之后根据实际情况进行改动)

一般市场调研细分的维度通常有四种,分别是:地理、人口统计、行为、心理统计。运用在互联网产品里面就更加的复杂。以B端产品为例:我们在调研中可能要把调研对象分为客户(老板)和用户(业务员)去进行不同情况的信息跟踪,而且根据产品的属性不同,需要提前预设好调研内容的侧重


第四,调研过程中

在调研过程中,我们可以适当结合上文讲述到的“空雨伞”方式去进行调研观察,收集用户需求(如下图)

在调研过程中,除了思考之外更多需要注意的是对用户洞察的记录与剖析,在记录用户行为的过程中,需要遵循“不干扰”、“不引导”、“记录客观”等原则,这样可以才可以保持用户行为记录的准确性。


第五,获取反馈整理结果

在调研结束后,我们应该产出一份完整的调查报告,按照本次调研预设目标进行整理,规划出合适的大纲,把调研收获转化为明确的产出,产出形式最好以报告(PPT、PDF),而不是口述或者微信消息,这两者之间差别很大~



需求归类:KANO模型

虽然说现在很多的公司都开始建立了用户体验类的部门,但是因为用户调研或者体验类的工作很难去量化产出。而且在大部分情况下当产品按照用户调研反馈的结果进行调整后,往往很少会出现我们幻想中的“逆袭”、“口碑急剧上升”,有时还会因为受到一部分用户观点的带偏导致产品口碑下降,用户表示不满;又或者会出现需求级规划混乱,重要功能反而后上线这种尴尬的情况。


所以这驱使着团队中负担“用研用体”职能的角色对用户需求进行正确的分类和排序

这个时候就可以运用到卡诺模型(KANO模型)。

KANO 模型是东京理工大学教授狩野纪昭(Noriaki Kano)发明的对用户需求分类和优先排序的有用工具,以分析用户需求对用户满意的影响为基础,体现了产品性能和用户满意之间的非线性关系。根据不同类型的质量特性与用户满意度之间的关系,狩野教授将产品服务的质量特性分为五类:


1.基本型需求

用户对企业提供的产品或服务因素的基本要求。是用户认为产品“必须有”的属性或功能。当其特性不充足(不满足顾客需求)时,用户很不满意;当其特性充足(满足用户需求)时,用户也可能不会因而表现出满意。对于基本型需求,即使超过了用户的期望,但用户充其量达到满意,不会对此表现出更多的好感。

例如对于网盘类产品来说,用户的基本需求是有快速的上传和下载。如果下载速度达不到用户的期望,则用户满意度将一落千丈。对于顾客而言,这些需求是必须满足的,理所当然的。对于这类需求,企业的做法应该是注重不要在这方面失分,需要企业不断地调查和了解顾客需求,并通过合适的方法在产品中体现这些要求。


2.期望型需求

提供该功能,用户满意度提高,如果不提供该功能,用户会感觉到不满。当然在这里要补充一句,这里的需求并不都是我们整理出的主观需求,也有可能是用户在使用的过程中产生的客观类需求,例如遇到不会的体验,需求得到响应时我们给的反馈

例如对于一些O2O类的产品,虽然做的都比较成熟,但是由于体量庞大的原因,偶尔也会受到糟糕体验,用户在受到糟糕的体验之后往往会期望能通过反馈得到心理上的安慰。例如携程(旅程预计时间偏差)、美团(酒店体验差)、饿了么(用餐体验差)等。在用户遇到这种糟糕体验之后,期望能通过投诉建议获得官方的反馈,那么官方把这种问题解决的越圆满,用户的满意度也会随之提高。

3.兴奋型需求

又称魅力型需求。指不会被用户过分期望的需求。对于兴奋型需求,随着满足用户期望程度的增加,用户满意度也会急剧上升,但一旦得到满足,即使表现并不完善,用户表现出的满意状况则也是非常高的。反之,即使在期望不满足时,用户也不会因而表现出明显的不满意。


4.无差异型需求

不论提供与否,对用户体验无影响。是质量中既不好也不坏的方面,它们不会导致顾客满意或不满意。


5.反向型需求

用户没有这个需求,提供后用户满意度反而会下降。

按照kano模型分析可以对收集到的产品需求进行分类,筛选掉一些不合理的需求。更好更有目的性的完成产品待办清单的记录。



后

对于设计师来讲,不管是个人设计练习还是团队项目,都应该掌握一定的产品需求收集和分析的方法。如果你真的下定决心要向交互设计、用户体验方向发展,那就更需要下定一些功夫去学习相关的知识,学会形成自己的思考方法。一开始可能会很痛苦很累,但是如果一味的试图走捷径,最后只会得不偿失。

作者: 千夜Ryan_Vision 来源:站酷

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

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

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



B端产品应该如何设计?

纯纯

对于很多设计师来说,遇上B端产品都是一件让人感觉头痛的事情。我从16年开始进入现在的公司,到现在做了很多的后台产品(ERP,CRM,SAAS,OA等等),有的产品是从无到有,有的产品是在原有的基础上更新,相对于C端产品,我在过程中深刻的体会到了视觉设计在后台产品中作用的有限性。


当然从一个设计参与者的角度来看,B端后台的产品并没有直接面向消费者的ToC产品那么的“火光四射”,但是B端产品对于设计师&产品经理都有更高的能力要求,能够从容的在各种B端产品中来回穿梭的人必须要有更强的业务逻辑理解和规划能力,后台类产品设计过程中的大方向是可以借鉴并复制的,但是对于细节的拆分、功能的规划,却又截然不同。所以我把从16年到19年的感悟写下来,希望能对一些面向后台产品头痛的设计师和产品经理们有一些帮助。


本篇主要讲述B端产品的一些经验,建议阅读时间:30分钟。适读人群:初级产品经理、在工作中职能范围与后台产品有关的UI设计师和交互设计师(文中含有大量配图用来辅助观点,因此建议PC端阅读)。



什么是B端产品?

其实后台产品更严格的意义讲也是B端产品类型中的一种,当然细分的领域类型有很多,也分针对性。针对个人(小型团队)的后台产品比较容易在大众的视线里被看到,这一类中最常见的后台产品就是微信公众平台了。(微信公众平台通过管理、分析、运营,让企业&个人能够更好的提高服务意识)


而另一类B端的产品则是面向企业客户以及内部员工使用,一般除了被针对到的目标用户,其他的用户很难接触到。比如OA、ERP、CRM、SAAS等。跟微信公众平台不同,这些名词对于很多不处于行业中的人而言都显得比较陌生,所以我大概解释一下几种我做过的平台。


OA系统

办公自动化(OA: OFFICE AUTOMATION)是采用Internet/Intranet技术,基于工作流概念,使企业内部人员方便快捷地共享信息,高效协同工作;改变过去复杂、低效的手工办公方式,实现迅速、全方位的信息采集、处理,为企业管理和决策提供科学依据。企业实现办公自动化程度也是衡量其实现现代化管理的标准。办公自动化不仅兼顾个人办公效率提高,更重要的是可实现群体协同工作。凭借网络,这种交流与协调几乎可以在瞬间完成。这里所说的群体工作,可以包括在地理上分布很广,甚至在全球上各个地方,以至于工作时间都不一样的一群工作人员。

ERP系统

ERP是Enterprise Resource Planning(企业资源计划)的简称,是上个世纪90年代美国一家IT公司根据当时计算机信息、IT技术发展及企业对供应链管理的需求,预测在今后信息时代企业管理信息系统的发展趋势和即将发生变革,而提出了这个概念。 ERP是针对物资资源管理(物流)、人力资源管理(人流)、财务资源管理(财流)、信息资源管理(信息流)集成一体化的企业管理软件。它将包含客户/服务架构,使用图形用户接口,应用开放系统制作。除了已有的标准功能,它还包括其它特性,如品质、过程运作管理、以及调整报告等。

CRM系统

客户关系管理系统(CRM)是以客户数据的管理为核心,利用信息科学技术,实现市场营销、销售、服务等活动自动化,并建立一个客户信息的收集、管理、分析、利用的系统,帮助企业实现以客户为中心的管理模式。客户关系管理既是一种管理理念,又是一种软件技术。


SAAS系统

SAAS系统是一种通过Internet提供软件的模式,厂商将应用软件统一部署在自己的服务器上,客户可以根据自己实际需求,通过互联网向厂商定购所需的应用软件服务,按定购的服务多少和时间长短向厂商支付费用,并通过互联网获得厂商提供的服务。用户不用再购买软件,而改用向提供商租用基于Web的软件,来管理企业经营活动,且无需对软件进行维护。



B端产品和C端产品的差异?

近两年来,B端产品慢慢的成为了互联网市场上的热门。而且随着现在互联网市场的多样性,C端产品有着充足的竞品可以进行对比分析,前行的相对平顺;而B端的产品则因为对于特有业务场景的不同、业务逻辑的复杂、数据系统的串接等等,显得十分复杂。那二者之间都有哪些差异呢?


B端产品具有更强的衔接性

相对于C端产品用户群体的庞大和多种类,B端产品显得要相对专注。从16年到现在,至少我经历的B端产品有近十种之多,每一类后台产品都会有相对聚焦的用户群体以及产品目标。在做B端产品之前,我对B端产品的初步理解是大而广泛的功能集成类产品,有点类似于一个超级后台的概念。但是实际进入到行业中接触之后,才发现实际上对于B端产品而言,每个产品都是针对行业链内的某一个节点而做。

做一个比较简单的类比:如同产品设计开发的过程中,产品经理、交互设计师、UI设计师、前后端开发、测试等,大家所需要功能都非常的多,但是使用的工具都截然不同。但是每一个工具对于产品设计开发过程中的推动意义都是关键的。


功能核心点的不同

实际上在2018年我做了一个很难实现的事儿,我会在每个月坚持跟行业内的两名设计师一对一的沟通,聊一聊对于各自行业的认识。通过这个举措我大概了解了很多中高级UI设计师们的想法。其实大部分的UI设计师对于未来的规划都是比较有野心的,不管是未来想到专注视觉亦或者想要跨向交互的设计师,对于产品的业务逻辑都希望可以进一步的了解,参与到产品的前期规划讨论中。


但是,在谈论到B端产品的时候,大部分的人又会觉得如果是B端产品还是算了吧。有一个设计师跟我说B端产品的理解成本太高了,又没有办法做到像C端产品那样有具体功能的侧重取舍,想要玩转B端产品之前首先要讲整个行业链路里的内容都走一遍,对于很多设计师来讲太痛苦了。


举一个例子好了。


例如微信阅读,产品的核心侧重在于”阅读功能“,而”想法管理、阅读标注、社交分析、读书排名“这一些功能都属于Kano模型中的“兴奋型需求---即使在期望不满足时,用户也不会因而表现出明显的不满意”。


但是同样的情况出自于B端产品,可能就截然不同了,对于B端产品而言,功能是多而必要的。例如OA办公系统中的“申请提报功能”,这个功能针对的根本不是针对于单一类型的用户、单一类型的场景。而是针对很多不同岗位的用户以及不同的提报需求场景。所以很多初入B端产品的UI设计师而言,他们认为“申请提报功能”只是一个信息输入页面,但是实际工作的时候却要按照七十多种不同的提报方式去设计内容,并且根据提报需求的不同,后续还会有更多的差异化设计(附件上传、日报提交、订单流审批等等)


B端产品的客户也许不是你的用户

这也是B端产品和C端产品的一个不同。首先B端产品面向的是企业老板,满足企业老板的需求,让这一类用户满意才是关键;而C端产品面向的是个人用户,只要做到用户体验十分良好并且给予一些增进用户留存的机制就可以运营的很好。


两者之间的差异性在于B端产品在满足客户的需求后,间接服务于用户;而C端产品直面用户。这其实就造成了B端产品在设计的过程中需要平衡“客户”与“用户”之间的关系,个人认为一个健康的B端产品应该是既满足“客户”的需求,又提升“用户”的体验,不然很可能会出现“客户好评 and 用户差评”的情况。


但是对于很多老板而言,在同样的产品服务之间,他们往往会倾向于付款使用服务,这其实也是B端产品设计中一个比较有趣的点。



面对B端产品应该如何入手?

很多人在设计B端产品的时候总是觉得很难受,感觉可延伸的方向有很多,却又没有一个十分合适的切入点。引用我之前在《设计师应该掌握的需求分析方法》文章中的一句话,这是因为"我们距离用户的真实场景偏离太远,导致我们在设计中很容易理所当然的赋予给用户大量无用的东西。偏离了用户所需要的主要轨道。"

(很多人把B端产品设计看作在迷雾中搭建桥梁)


在我看来B端产品的设计没有固定的功能模式,而一味的照抄竞品在这一行业中其实也是非常危险的行为。大部分B端产品设计的本质其实是解决客户在真实场景下遇到的问题,给予用户更便捷的管理方式和更多的利益价值。


但是所谓知易行难,从一个产品的设计者(产品经理&设计师)在产品的规划过程中要做到以下几点:


了解基础业务流程

在这里讲的业务流程并非是单一产品的业务,而是从行业链路的角度上讲,要真实的理解行业过程中每一个环节的过程。例如最近几年专注的快销行业,最起码我们要知道从品牌商、供应商、经销商、二批商以及门店终端以及其他各个渠道的最基础的业务运作方式。这样其实会让我们在功能的思考过程中避免很多低级的错误。


写到这里其实可能有的朋友看不懂这一步的作用,例如可能会觉得,我做一个数据分析后台,为什么要懂全部环节的基础业务流程呢?那我继续做一个最简单的类比:就如同我们对于互联网有了初步了解之后,就会自然而然的明白腾讯系的产品基本不会对接支付宝,而支付宝的钱无法通过微信去支付。


功能流程归类

这个应该不需要再多解释了,完美的流程归类会让产品的需求方、设计和开发的对接方以及用户都非常满意。

价值体系搭建

价值体系的搭建是整个产品中最核心的点。何谓价值体系?对于B端的产品而言,客户最关心它能为实际的工作带来哪些便利而并非这个界面做的多么的好看以及用户体验多么棒。所以对于一个B端产品,解决问题的价值就是最好的推广。按照实话讲,从这个角度来看,B端产品的设计需要对用户更深层次的了解和判断,了解用户的核心价值,围绕核心价值搭建产品的功能以及任务优先级。


整合设计&持续迭代&调整方向

在设计的过程中我们是十分痛苦的。因为B端产品面向的客户大部分都是在行业中沉浸了很多年的老板或者相关业务部门。这种特殊的情况对我们有利有弊。好处是我们的客户对于业务相关的蓝图十分的清晰;坏处是每一个人对于自己的业务都有更美妙的“憧憬”。


例如我们在下访调研的过程中跟经销商聊了一下(快消行业),不同的经销商对于自己生意管理的方法不同,人员组成(业代、库管、内勤)也完全不同。所以有的老板会跟我聊一聊,有没有什么更新鲜或者更有挑战性的玩法儿,能让下面的业代收集到更多有价值的数据;有的老板会跟我聊产品的功能太多了,手下的业代使用起来不方便,意见很大。

(门店拜访是经销商业代的日常工作,有的业代热衷抄单,有的业代喜欢用APP录入,各有不同)


所以对于我们而言,面对这种在宏观角度上大方向一致而微观角度各有不同的用户群体,要学会整合和克制。如果有了一些比较亮眼的功能或者想法,尽可能要做到小幅度快节奏的持续迭代,在迭代的过程中逐渐收集用户的想法。


对于设计部门,在设计B端产品的过程中需要进行更严格的内外部评审。从功能规划&交互设计这一步就应该开始评审,评审交互设计的功能点有没有遗漏?交互框架搭建的过程中是否考虑到了随着产品发展带来的更多功能的扩展性?修改某个功能是否会导致其他的功能出现问题?在修改交易(促销)规则的时候是否会对现在的产品造成风险?这些都是需要进行不断的评审、磨合、测试才能逐渐完成上线的。在这中间我们要不断的调整B端产品设计的方向(包括产品功能的优先级排序)。


B端产品的功能设计也许并不在于亮眼,而是在于均衡和稳定。C端产品的每一个用户都是单一的个体,通过C端产品带来某种生活中的便捷与享受,功能规划失败,很可能会失去某些群体的用户,但是可以通过迅速的功能迭代在下一轮赢回来;而B端产品上的每一个客户(用户),每一个后面都有一张庞大的关系网,对于他们而言,这是生意(工作)的重要组成部分,是没有办法拿来冒险的。如果因为产品的问题导致客户(用户)出现了损失,这种客情关系是很难挽回的。




如何提升B端产品的品质?


学习成本&感知成本

对B端产品来讲,设计师在设计的时候是不需要耗费太多的思考的,只是去按照交互设计师的规划堆砌图表和列表。但是对于使用者来讲,但是其中纵横交错的商业逻辑和业务逻辑却是给用户搭建了一个十分高的门槛。

赋予价值

赋予价值是常见的提升B端产品品质的一种方式,这里说的赋予价值跟上文所述的“价值体系搭建”并不相同。


其实作为B端产品的设计者,我们期望通过自己的努力让产品有更多的玩法儿、让视觉有更多的花样,我们期待以此来获得用户的认同。但是从B端产品用户的角度来说,这些并非是他们重点关注的点。例如我们将一个进销存软件所有的功能都考虑清楚、所有的使用场景下都可以得到满足,都不如通过优化流程、提升产品使用效率去将使用者给解放出来。


其实在这里可以大胆预测一下,在未来所有B端产品的设计者都会想办法降低用户的使用时长,“用完即走”可能会成为未来工具类B端产品设计的一个设计原则。


降低妨碍&功能引导

B端产品因为集成了很多的功能和信息,所以在设计的过程中尽可能合理的安排信息的布局是非常的重要的。常见的方法是优化字段以及页面元素,让用户看起来更直接,并且加入一些功能引导部分,让用户对于一些功能有很快的认知(这个功能是什么&我能用这个功能做什么)


用户体验要素上说过“不管用户访问的是什么类型的网站,它都是一个‘自助式’的产品。没有可以事先阅读的说明书、没有任何操作培训或讨论会、没有客户服务代表来帮助用户了解这个网站。用户所能依靠的只有自己的智慧和经验,来独自面对这个网站。”



页面清晰简洁&场景下保持高效

B端产品的用户一般比C端产品的用户要更有专业性,同时也更有耐心。但是如果我们的页面设计的功能过于复杂或者为了丰富页面加入很多的冗杂字段,会对用户造成不必要的影响。


而高效则是另一个在交互设计中需要注意到的问题,高效从一个角度上讲,是减少用户不必要的操作&页面的跳转,例如ERP系统中的客户管理,在客户列表页修改客户资料的时候,尽可能使用弹窗,这样会大大减少页面跳转的频率;


但是与此同时,减少页面跳转并不代表真正的高效,再次举例ERP系统,所有的订单需要按照指定的流程一步步进行操作而并非一步到位,这样虽然页面的跳转增加,但是可以避免操作出错给用户带来更大的困扰。


设计的一致性

当然看到这一点很多成熟的设计师可能会表面毫无波澜,内心甚至想笑。但是实际上对于B端产品而言,需求、开发、上线,这会是一条漫长的战线。除非是一些大公司,否则很少有设计师能只跟随一个产品走到最后。当你两个月之后再入手参与这个项目,你会发现你对这个产品开始陌生了。往往就会产生同一个设计师做出来的设计图像是两个设计师做的一样。


坚持设计的一致性是很重要的:例如产品的交互操作(弹窗的样式、列表页左右功能布局)、按钮的不同状态、字体大小的规范、系统导航条的样式及位置、切换页面的触发等等,都属于一致性中必不可少的因素,当产品的一致性程度较高,就可以降低用户的学习成本、提高用户的使用效率。



作者: 千夜Ryan_Vision 来源:站酷

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

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

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


UI设计中亮色的优点和缺点

纯纯

有效的颜色应用技巧是每个从事视觉合成相关工作的,包括插画家和UI设计师,都必须具备的。随着扁平化设计和material design的普及,具备色彩理论知识变得更加重要。

目前鲜艳的颜色和渐变出现在不同数字产品的用户界面上:从好玩和有趣的到商业应用和网站。然而,关于明亮的颜色对用户体验的影响还有很多讨论。本文对丰富多彩的用户界面设计的优缺点进行了深入的分析。


明亮的颜色如何提高UI效果?


增加可读性和易读性


我们之前的一篇文章中,介绍了影响配色方案选择的因素。可读性和易读性是设计师考虑色彩运用的基本因素。提醒一下,可读性是指人们阅读文本内容的容易程度,而易读性则定义了用户在特定字体中区分字母的速度。

鲜明的颜色足够的对比度有助于增加可读性和易读性。有对比的布局元素会变得可区分和引人注目。然而,高色彩对比可能并不总是有效。如果文本内容和背景颜色对比度太大,将很难阅读或扫描文本。这就是为什么推荐设计师创建一个温和的对比度,只用高对比度颜色突出元素的原因。


提亮导航,使交互更直观


对任何数字产品来说,视觉层次是打造清晰导航和直观交互的核心要素。UI组件就是这样被组织起来的,这样大脑就可以通过这种包括颜色在内的物理差异来区分物体。

颜色有自己的层次结构,这是受用户思维的影响所决定的。有大胆的颜色,如红色和橙色,以及弱的白色和奶油色。明亮的颜色很容易被注意到,所以设计师经常用它们来突出或设置对比度。此外,将一种颜色应用到几个元素上,表示它们在某种程度上是有相关性的。例如,您可以为购买按钮选择红色,以便人们在需要时直观地找到它们。



可识别性


大脑对大胆的颜色反应强烈,这就是为什么明亮的颜色组合很容易被注意和记住的原因。色彩丰富的用户界面设计,在众多颜色较轻的产品中容易脱颖而出。颜色的选择需要基于目标受众的喜好和市场调查。

此外,如果一个公司拥有明亮的企业颜色应用于商标和品牌项目,那使用同样颜色在其网站或移动应用上也是一个好方法。这种方式连接公司所有的沟通渠道,创造了一致性的视觉解决方案,并且提高了品牌知名度。


设定情绪和气氛


为了传达正确的语气、信息和号召用户做出预期的行动,设计师需要知道颜色会影响我们的情绪和行为。我们的大脑会对颜色做出反应,而我们通常不会注意这点。这项名为“颜色心理学”的研究表明,当我们的眼睛感知到一种颜色时,大脑就会向内分泌系统发出信号,释放负责情绪变化的荷尔蒙。

适当选择颜色有助于让用户处于一种促使他们采取行动的心理状态,并设置合适的氛围将正确的信息传递给用户。比如,如果设计师设计了一个与自然或园艺相关的产品的UI,很有可能会选择用绿色和蓝色。通过这种方式,设计将从一开始就与一种产品或服务类型相关联。您可以在我们的文章《颜色对用户行为的影响》中找到对颜色含义的具体描述。


时尚的外观和风格


明亮的颜色和渐变,是UI设计中的最流行的趋势。如今,可以在不同类型的数字产品中看到这种运用,而严格的商业风格的限制似乎被抛在了一边。

明亮的渐变色彩在用户界面上可以带来一种现代化感和新鲜的想法。结合最新趋势设计的APP或网站往往引人注目,尽管竞争激烈,仍能吸引用户的注意力。


明亮的颜色使用缺陷


很难搭配


那些认为颜色能靠直觉和审美随意混合的观念是错误的。如果你想要创造和谐的视觉构图,那么关于颜色如何起作用以及它们如何协作的基本知识是必不可少的。

在UI中应用的颜色越鲜艳,搭配就越困难。为了让用户感到愉悦和舒适,设计师努力将平衡和和谐融入到用户界面设计中。色彩协调是指在设计中以最吸引人、最有效的方式来安排色彩,以供用户感知。和谐的颜色组合有助于对网站或APP获得一个不错的第一印象。颜色理论定义了一些基本的颜色方案,下面这些配色方案被证明是有效的。

单色,色彩和谐是基于一种颜色和它的各种色调。

类似色,该方案适用于颜色轮上相邻的颜色。

互补色,它是在色轮上相互放置的颜色的混合,目的是产生高对比度。

多色互补,这个方案与前一个方案相似,但是它使用了更多的颜色。例如,如果你选择蓝色,你需要取另外两个相邻的颜色,表示黄色和红色。

三元色,它是基于三个独立的颜色,在色轮上是等距的。专业人士建议使用一种颜色作为主调,其他颜色作为辅助。

四色,tetradic配色方案使用四个颜色从车轮是互补的。如果你把选中颜色上的点连起来,它们就形成了矩形。


失去节奏感


大胆的颜色可以作为在UI中进行重音的工具,但它也可能成为重音消失的原因。许多鲜明的颜色在一个单一的视觉组成会带来了失去突出元素的风险,因为他们成为一个色彩种制造混乱的一部分。

这就是为什么推荐设计师使用60%-30%-10%的比例。最重要的部分应该是主色调,三分之一的构图采用第二色,10%的部分应该选择有助于形成重音的颜色。这样的比例被认为是令人愉快的,因为它允许逐渐感知所有的视觉元素。


明亮的颜色并不适合所有用户群体


创造数字产品的核心阶段之一是用户研究。定义和分析目标受众,使设计师了解他们对网站或应用程序的期望。年龄、性别和文化会影响潜在用户的喜好。例如,孩子们很喜欢黄色,但当我们长大后,黄色通常看起来不那么有吸引力。男人和女人通常喜欢冷酷的颜色,如蓝色,绿色。不像女人,男人通常喜欢白色、黑色和灰色。

明亮的颜色也是如此。即使您是设计一个有趣的APP,也需要考虑目标受众的具体情况。中年人通常更喜欢轻松的用户界面,他们可能不喜欢屏幕上很重的颜色去分散注意力。


在移动屏幕上,鲜艳的颜色看起来反差太大


正如我们上面所说,明亮的颜色可以产生大量的对比度,帮助突出重要的UI元素,并提供良好的易读性和可读性。然而,过多的对比度可能会起到不好的效果,尤其是在移动界面上,因为它们的空间有限,可以在不同的环境下使用。

小屏幕、环境光和明亮的字体使对比度高的图像在用户眼中显得很难看。这就是为什么在移动UI设计中使用明亮的颜色需要注意颜色之间的对比度,这样人们在阅读文字时会感到舒服。


颜色是大师手中的一件伟大的工具,和其他任何工具一样,它也有它的优点和缺点。为了有效地使用它,需要考虑它的所有方面,以便能够找到适合设计任务和目标的解决方案。


欢迎在文章评论区留言,让我们一起成长。

作者: 爱设计的狐狸 来源:站酷

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

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

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


百度APP是如何进行视频沉浸式设计的?

seo达人



前言

沉浸式体验是让人专注在当前的目标,全身心投入并感到愉悦和满足,从而忽略时间的流逝。应用到界面上则是更强调聚焦内容,减少不必要的打扰。本次研究与实践针对视频场景中视频所呈现的画面,通过精细化的设计,在多样化的手机屏幕中呈现时,能够带给用户更为沉浸的视频观看体验。

 

百度APP是如何进行视频沉浸式设计的?

视频播放器中视频画面当然是最主要的内容,以此作为突破点进行思考:

  • 最大化画面视野:通过改变视频画面本身的大小,减少页面“留白”,让用户更聚焦视频画面,观看视频时更专注。
  • 最佳视线观看位置:将不同高度的视频按照页面结构去布局视频画面,通过画面避让状态栏、顶底bar结构的方式,使画面更加整洁,减少元素混乱带来的干扰,同时整体位置偏上展示,视线落点更加舒适。
  • 观看体验连续性:视频浏览过程中,非必要不打断视频浏览,在进行如查看评论、临时退出播放器等行为时,保证视频播放的连贯性,方便用户多操作。

图片

 

 

一、最大化视频画面视野

01、视频画面裁剪 

随着时代的发展,为提升消费者对手机的操作体验,智能手机逐渐多元化,手机屏幕尺寸迭代更快、更加丰富多样。手机作为视频很重要的生产端,手机屏幕尺寸的多样化影响到产出视频尺寸的多样化,同时用户可通过视频编辑工具任意编辑视频尺寸,最终生产的视频尺寸比例自由度非常高。据不完全统计视频平台中视频尺寸达22万多种,用户使用机型近300种,在视频尺寸多样性及视频展现媒介多样性的现状下需要兼容性更强的裁剪及展现规则才能带给用户更好的观看体验。我们要做的就是将不可控的视频资源和不可控的浏览视频设备设计为可控的视觉展示效果,并最大化视频画面。减少环境干扰,给用户带来沉浸式感官体验。

视频宽撑满手机屏宽后,将视频尺寸分为四类:

图片

1) 视频高度>手机屏高

视频画面宽度撑满屏幕后,视频整体居中于屏幕,居中裁剪视频多余画面。注:不允许画面高度撑满屏幕,宽度自适应导致画面左右留黑效果。

2) 视频高度=手机屏高视频居中于屏幕,刚好填满屏幕,不需要裁剪处理。

图片

3) 1:1<视频高度<手机屏高

此类尺寸较复杂、难处理,于是将限制裁剪面积和展示位置相结合,保证裁剪面积和位置可控。结合视频平台资源尺寸和业务目标来确认理想展示效果,反推定义最大裁剪面积,根据显示位置多次判断视频放大后是否符合既定裁剪面积,最终确定当前视频的显示方式。同时支持根据不同视频业务进行个性化定制,并且将裁剪面积云控处理,根据业务内不同时期的诉求限制比例来灵活调整展示效果,双端也可分端定义数值;横向协同及迭代成本极低,便于快速上线验证效果。

图片图片

4) 横版视频(高宽比≤1:1)

横版视频在手机屏幕中面积占比较小,画面可识别度和饱满度稍有欠缺,轻微扩大画面视野,画面浏览更加清晰有冲击力。以不影响内容理解为前提,根据自身平台视频尺寸占比及视频内容特点规定固定比例或比例范围适度放大。

图片

锦上添花,引入文字内容识别

为避免因裁剪规则而裁剪到视频关键文字对视频内容获取有障碍的问题,发挥百度强大的AI技术优势,引入文字识别技术及视觉展现规则,进一步提升视频展现样式的可控性,同时能够通过尽量少损失画面达到画面放大的效果,平衡画面沉浸感和完整性的关系。左右文字被裁剪情况:文字左右设置安全距离,保证安全距离在屏幕内。如果安全区超出屏幕,则按照上方描述的裁剪规则进行退档显示(满屏至不裁剪之间的档位),直至文字不被裁剪。极端情况退档至最后一档,视频画面不裁剪。

图片

横版资源文字左右被裁剪情况:按照固定尺寸退档

图片

上下文字被裁剪情况:文字上下设置安全距离,保证安全距离在屏幕内。如果安全区超出屏幕,则按照上方裁剪规则进行满屏至不裁剪之间的档位进行退档显示,此情况只会从全屏一档显示退至二档显示。

图片

裁剪面积、展示比例、文字安全距离等数据都通过云控的方式下发,灵活配置到不同业务中,保证裁剪规则一致的同时又能针对不同业务进行定制展现,也可快速调整并支持上线实验,来验证适合自己产品的展示效果。

 

02、智能满屏

通过裁剪方式放大画面视野之外,还通过让用户自主交互操作再次放大画面视野,调整到自己喜欢的观看视频的方式。相较于上方默认裁剪放大,满屏方式更加激进极致,画面放大更多。开启方式通过面板功能按钮开启智能满屏外,增加便捷交互开启手势,用户可双指放大快速开启。图片

由于满屏是用户主动操作放大行为,可以接受文字内容被裁剪,但也需要有节制的放大,避免带来画面裁剪过多视觉体验不佳的问题。为了保证95%以上资源撑满全屏,达到放大画面视野极致体验。同时最大画面裁剪面积不超过一定比例(根据自身业务视频资源判断),将视频资源细分为3类进行不同效果处理:1.可继续放大至满屏的视频,则进行满屏展现。2.不可继续放大的视频,如果继续放大会导致裁剪画面过多影响观看完整度与观看体验,则保持上方提到的裁剪规则,不做另外处理。3.横版视频统一放大至固定尺寸,可根据自身业务资源进行放大尺寸的定义。

图片

 

二、最佳视线观看位置

通过布局合理、舒适的画面位置,也能提升浏览过程中用户体验的沉浸感。人的视觉中心一般会在物理中心的偏上方,于是在设计中我们将视频画面放在屏幕偏上的位置,用户视线落点更加舒适,一般是用户在浏览页面时最先注意到的地方。同时视频在页面偏上的位置,能减少下方标题等信息过多对视频画面的遮挡。

为了精细化处理不同比例的视频资源,竖版视频和横版视频根据页面效果分别定义了最佳观看展示位置。

竖版视频:高于1:1的视频,按照页面结构布局视频画面,避让状态栏、顶底bar操作,避免与页面结构冲突带来画面凌乱不美观的问题,同时能减少画面参差带来的干扰,增加沉浸浏览感受。

图片

横版视频:等于矮于1:1的视频,画面按照屏幕高度比例展示在偏上的区域,高度比例可云控便于灵活调整。

图片

 

三、观看体验连续性 

01、视窗挤压

为了满足用户在视频场景多角度信息获取,在不打断用户视频浏览的基础上建设视窗挤压交互体验,提升观看视频的相对沉浸感。在视频场景观看评论时会弹起半屏面板,遮挡住视频内容,导致用户无法在浏览评论的同时观看视频内容。对短视频重度用户来说,对同时看评论和看视频习惯的用户有挑战。通过视窗上移动挤压功能,在浏览面板内容时不对视频内容打断,弱化面板内容给用户带来的影响。

视窗高度固定,画面宽高比越小画面内容越小,观看体验不友好,所以竖版视频对压缩后的显示尺寸进行干预,定义最小视频画面展示比例,尽量扩大画面视野,保证观看视频的舒适度。

图片

02、悬浮小窗 

在不打断用户视频浏览的基础上还建设了悬浮小窗交互体验,旨在为用户提供完善优质的视频消费体验。用户进行其它操作时仍保留视频后台播放,同时也能在屏幕角落观看到缩略图大小的视频播放窗口,可以从任何页面中观看视频,我们同时也保留了部分视频基础操作。观看体验连续性让用户对视频有绝对的主控感,提升用户使用体验的满意度。

图片

 

写在最后

沉浸式体验设计是帮助用户减少画面干扰,让用户专注于当前的视频浏览,忽略时间的流逝进入心流状态。我们通过放大画面视野,增强画面冲击力的方式减少干扰,并解决在视频画面尺寸、手机屏幕分辨率极多的复杂情况下,保证画面效果的稳定和可控,并且不会受阻于未来手机机型的扩充发展,普适性极强。同时通过视窗挤压、悬浮小窗的交互体验专注于当前的视频浏览不被打断,进一步提升视频看播沉浸式体验。后续我们将不断探索视频场景沉浸度提升方式,为用户带来更加舒适的观看使用体验。

作者:百度APP用户体验

转载请注明:学UI网》百度APP是如何进行视频沉浸式设计的?

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


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


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



15个著名的设计心理学原理以及在设计中的应用

纯纯

你是否有在听别人说某某原理法则时一脸懵B的时候?明明知道这个原理却说不出它的名字?不要紧,本文就来介绍与人机交互设计相关的15个常见的设计心理学原理,约13000字,帮助你了解产品的定位,需求目的和交互逻辑,洞悉用户的各种行为,也为自己的设计予以理论支撑。


1956年美国科学家米勒对人类短时间记忆能力进行了研究,他注意到年轻人的记忆广度为5-9个单位,就是7±2法则。与席克定律类似,神奇数字 7±2 法则也经常被应用在移动应用交互设计上。


因为人脑处理信息的能力有限,所以它通过把信息分成块和单元来处理复杂问题。7±2法则应用很广泛,例如iPhone通讯录中的手机号码被分割成”xxx-xxxx-xxxx“的形式,还有银行卡号、身份证号,我们总是喜欢把一长串数字拆分开来读写,目的就是降低记忆成本,提高信息的易读性,从而达到视觉防错的作用。


Web导航栏选项卡数量不超过9个

在设计网页导航时,如果希望用户记住导航区域的内容或者一个路径的顺序,那么数量应该控制在7个左右(不超过9个),如苹果、Dribbble、behance等网站的导航分类。


Web导航栏选项卡数量过多时

如果导航或选项卡内容很多,可以用一个树状层级结构来展示各级别关系,但要注意其广度和深度的平衡。例如人人都是产品经理和Dribbble,把更多子类别收在二级目录里。



移动端选项卡导航

在移动端应用设计中,常见的电商app例如奈雪和乐凯撒分类模块,两个产品的商品分类布局形式很相似,都是用了选项卡的方式来分类商品,层级明确,相应的提升了用户找寻单品的效率。


Tabbar区标签最多不超过5个

在移动应用设计中,底部Tabbar最少3个,最多为5个(几乎没几个超过5个),这样做除了减轻用户记忆负担,超过5个会降低视觉和操作上的体验。事实上就算只有4个,我们也经常想不起微信底部的4个Tab分别是啥。



顶部导航栏页签

我们看到的大部分app顶部导航栏的页签数量都严格遵循了7±2法则,虽然在横轴可无限滑动,

但在显示区域只保持7±2法则的显示数量,例如马蜂窝、飞猪旅行等。


金刚区图标不超过8个

我们常说的“八大金刚”就是一屏显示8个图标,超过的则放在第二屏。如果两行10个,往往第十个是“更多”入口,总的来说也没超过9个。


banner文案不超过9个字

产品运营banner主文案字数通常控制在9个字以内,在设计时也通常把长标题一分为二排两行,便于用户快速阅读,提升点击率。

     


在交互设计中,7±2法则是减少用户认知负荷,提升用户体验的重要环节。同时还强调了在设计过程中对产品的预见性,避免在不断为产品添加功能时,破坏原有的视觉基础。



0无需说明书

乔布斯曾说过:“苹果应该创造所有人都可以使用的产品,即使没有用户指南”。


1 一看就会

简单易懂,看一眼就明白你想说什么,不用教学就知道怎么用。


2秒法则

所谓“2秒法则”,是指用户在使用某类系统时的等待时长不超过2秒。在极短的时间内展示重要信息,给用户留下深刻的第一印象。这里的2秒只是一个象征意义上的表达,也许有一点随意,但是这却是一个合理的数量级。我们熟知的“F”浏览模式其实就是间接缩短用户看到重要信息的时长,达到快速浏览的目的。


进入App的首页加载时间如果过长就会导致用户产生厌烦情绪,很容易退出甚至卸载App的行为。因此我们看到许多应用将首页加载时的空白页进行占位图设计。


下拉刷新也是一个设计点,为避免刷新时间过长,设计师通常会在加载动画上做文章。充满趣味性的动效能安抚用户焦躁不安的心情,无形中降低了用户对等待时间的感知。


APP里面的banner设计要有视觉冲击力,如果两秒之内没有抓住用户的眼球,可能就被用户忽略了。


因此,在设计互联网产品的页面时,用户等待的时间越短,用户体验越佳。反之,就会让用户产生焦虑的情绪。


3次点击法则

用户在3次点击之内如果还没有找到他们想要的信息或了解网站特色,他们就会离开该网站。这条原则突出了清晰的导航,符合逻辑的结构和易于理解的网站层级的重要性。(来自《众妙之门》P133)

其实在交互体验中,点击的次数往往是无关紧要的。只要每次点击都是无需思考的,毫不费力地顺势进行,那么用户的挫败感就会大大降低。如果你的网站能够让用户知道他在哪里,从哪里来,要到哪里去,并且能够让用户了解如何完成目标,这样的点击即使有10次也是没有问题的。例如,在京东购买一件商品需要经过“立即购买>确定>提交订单>选择支付方式”4次点击才能到订单支付页面完成购买,这过程中可能还穿插其他的点击行为(比如选择地址、优惠券),用户并没有感受到不方便,使用过程流畅而自然。


在可用性测试领域,“三次点击”定律一直是一个很具争议内容。体现在以下几点:

·研究表明,用户在超过3次点击还没到达想去的页面时,往往并没有退出网站,而是会继续多点几次;

·当把一个3次点击就能到达的流程改为4次点击的时候,用户发现目标页面的能力反而提升了600%;

·合理的导航系统比点击次数更重要;

·比起“3次点击”,有人提出了“1次点击”定律,即用户的每一次点击都应该让他们更接近目标,同时尽量减少能干扰实现这一目标的因素;

·用户抱怨要花很长时间才能找到某个产品,实际上他们是在抱怨无法找到想要的东西,如果用户找到了想要的东西,他们就不会抱怨点击的次数了;



英国心理学家William Edmund Hick认为,在简单的判断场景中:一个人所面临的选择越多,做出决定所花的时间就越长。有时候在选择中花费太长时间从而导致决策失败。

生活中我们也经常会面临选择困难症,比如早上起床就纠结今天穿什么?中午去食堂就会纠结吃什么?造成我们如此纠结的原因就是因为选择太多了(远古人就没这些烦恼,寻找食物时逮着什么就吃什么)。


在设计中的应用

应用到界面设计中也是如此,选项越多,意味着用户做出决策的时间越长。

例如APP Store首页,改版前的首页把众多app平铺出来,对目的不明确的用户来说选择有点多。改版后的首页大幅减少了App的数量,卡片的设计方式简洁且目标清晰。


不得不面对较多选项时, 对主要和次要的选项做视觉权重区分,做好设计上的归类,提升用户做决定的效率。例如美团外卖金刚区第一行5个入口的图标在尺寸和表现手法上都比下面的入口图标要大更醒目。“我的”页面把一些低频率功能或不太重要的功能收纳到“设置”里,此外还可以通过置灰、锁定等方法间接减少选项,降低干扰。


对于多流程的任务进行分步操作,让用户专注眼前任务。 例如Clubhouse注册时,把需要用户选择的选项分步引导完成,让用户能专注当前行为。


对于多种类别的选项应当做二次分类的区分,我们都知道电商平台的品类繁多,仅通过单一分类是不够的,比如数码频道下面还分相机、影音娱乐、数码配件、智能设备、电子教育等大的分类。商品详情页的筛选功能也是贴合使用场景来设计的,所以分类不怕多,就怕混乱。


适用边界

虽然选择越少,用户做决策的时间越短,但这并不是提高用户体验的唯一标准,过度的减少选项,可能导致负面效果。

如上图右,如果在删除App的弹窗中只有一个“删除”选项,没有明显的取消之类的途径,那么用户会觉得特别难受,感觉被强迫去删除。如果当下有急需使用手机处理一些事情,那么这样会把这种负面情绪给无限放大,让用户抓狂。


希克定律主要受影响于选项的多少,但是它不适用于需要高难度阅读的任务。例如考试试题每道题只给你A、B两个选项(学渣窃喜),那也太容易蒙了,这就是希克定律在答案试题中的局限性。


希克定律是一个可以适用于设计的指南,记住要尽量减少用户在一次决策中要做的选项,因为决策效率是一个产品导致用户流失的重要原因之一。引导用户在明确的选项之间进行选择,以便快速将他们送到某个地方(例如账单支付),这将大大提升用户体验并达到你的目标。




费茨定律由心理学家Paul Fitts提出,用来预测从任意一点到目标中心位置所需时间与该点到目标的距离和大小有关,距离越大时间越长,目标越大时间越短。举例来说,你伸手去拿桌子上的咖啡杯,开始你的手臂迅速地往杯子位置移动,接着你会放慢速度直至找到杯子把手,这个杯子把手的大小与你“抓住”它有着一定的关系。


如上图所示,如果光标现在在任易地点想要去点击目标target,最短路径一定是D,最短路径上容错的最长路径是D+W,只要水平上移动超过了D+W你就点不到了,而这个点击动作所耗的时间是一个常数加上一个以D为正比W为反比的函数的和。


详细解释如下,图中红色方块代表点击目标,虚线代表移动路径,此时因为红色方块目标较大,所以用户从任何一处点击都很容易(可以用鼠标在屏幕任意点移至红色方块试试)。


相反,红色方块目标变小,快速点击就会困难很多,很难一次到位。


但如果红色方块目标很小距离很近的话,因为移动范围小,也能准确的点击到。


按钮越大越容易点击

在页面中,大而近的目标区域意味着用户不需要做太精细的调整就可以轻易的触达目标。比如页面中的大按钮。


将按钮放置在离开始点较近的地方

夸克浏览器的搜索栏就放在离手最近的屏幕底部区域,相比常见顶部搜索栏更方便操作,效率更高。


相关按钮之间距离近点更易于点击

注册登录界面,通常将「注册」和「登录」放到一起,不仅可以在视觉上增强用户对他们相关性的认知,还可以减少在他们之间的距离 。


适用边界

费茨定律鼓励减少距离,增加目标大小以提升用户效率,但反过来亦适用。比如iPhone关机按钮,没有使用点击关闭,而采用滑动操作,还把按钮放在屏幕顶部,这样明显增加了操作难度,进而避免了用户误操作。


App弹窗经常把“关闭”按钮放在卡片的右上角离手远的地方,希望用户先完成弹窗提示的任务。还有启动页广告,喜欢把“跳过”按钮放在难以点击的右上角(恰饭重要),以提高用户的误触机率提高转化。


思考小结

按钮越大越容易点击,因此在程序开发中,会增加按钮点击的热区范围,减轻用户精准点击的压力。但也不能过分的大,容易引起误触;

让相关联的内容更靠近彼此,用视觉手法增强用户对它们相关性的认知。距离产生美,注意不要靠的太近,会出事;

将按钮放置在离出发点较近的地方,比如页面主按钮一般会放在屏幕底部易操作区域;

屏幕的边角很适合放置像菜单栏和按钮这样的元素,因为在屏幕边缘和角落位置有“无限可选中”的属性,可以大胆操作而无需“微调”,参见macOS底部dock栏;

定律的反向使用可以适用一些特殊场景,比如想达到某种目的而降低按钮被点击的可能;




“任何事物都具有其固有的复杂性,无法简化”。

泰斯勒定律(Tesler’s Law)由Larry Tesler于1984年提出,也称「复杂度守恒定律」。

该定律认为:每一个过程都有其固有的复杂性,存在一个临界点,超过了这个点过程就不能再简化了,你只能将固有的复杂性从一个地方移动到另外一个地方。


生活中很多我们习以为常,感觉便捷方便的生活方式,是无数卓越的数学家、工程师、设计师等无数的时间投入,才实现的某个小功能,是他们把这些复杂性转移到自己身上替我们简化了。


说回移动端,每个应用中都有其无法简化的复杂度,也不能按照我们个人意愿去除这些功能。这就是为什么飞机稿都简洁好看,而一搬到线上就面目全非。常见的复杂性转移有:“查看更多”、“查看全部”、“查看详情”、“展开和收起”之类的文字做转移跳转,比如:顶部导航栏的更多图标,就是将常用的功能整合并隐藏在首页设计的更多功能模块中,把用户的操作范围转移到另一个地方。


除此之外,还有一些降低操作复杂度的方法:

删除、组织、隐藏

视觉层面的“降噪”方法,删除会干扰用户操作的选项;功能分类明确,围绕用户行为组织信息内容;隐藏那些不常用而又不能少的功能,延迟及阶段性展示。总的来说就是将复杂的信息收起来,展示重要且简洁的界面。


简化交互设计

可以用代码节省用户操作时间的地方,是互联网人一致的追求。例如,B站的一键三连,用户长按点赞按钮,会同时触发点赞、投币和收藏,省时省力。


算法解放“生产力”

个性化算法就是通过技术手段,将用户复杂度降低,而转移到开发者身上。抖音为什么会让人上瘾?是算法知道了你的喜好,专推给你喜欢的内容而不用自己去找,谁都喜欢私人定制。这对用户来说是一件好事,但就像鲁迅说的:“你觉得好,一定是有人在负重前行”,这里的简化复杂的难度就转移到设计和开发身上了,还逼得机器去学习。例如抖音、淘宝、知乎首页推荐的内容都是基于你的喜好定制化推荐给你的。


我们常说以用户为中心去设计,就需要从用户角度出发,在交互设计中尽量简化操作的复杂度,降低学习成本。但如“复制粘贴之父” Larry Tesler (1945-2020) 所说:“任何事物都具有其固有的复杂性,无法简化”。因此,如何取得复杂度的“平衡点”就是重要的部分,是让工程师及设计师花费大量时间去降低产品的使用难度,还是在设计中保留一定的复杂度是我们需要思考的事。



该原理是由麦肯锡国际管理咨询公司顾问Barbara Minto提出的理论,她强调结论先行,论点自上而下。

你是否遇到过这样的场景,部门开会时有人口若悬河的讲了半天,到最后你都不知道他想说什么。所以如果开会时你会走神,这不怪你,只怪讲演者说话没有逻辑,没有重点。


金字塔原理指示结构化表达遵循结论先行的原则,即任何问题都能归纳出一个中心点,让受众能够第一时间清楚你想谈论的主题。然后由数个论据作支撑,而这些一级论据可以继续由数个二级论据支撑,如此延伸,状如金字塔。自上而下,上层影响下层。


应用到交互设计上,即将信息展示的重点与交互行为的主任务优先展示,再根据用户在这个界面上所愿意停留时间逐级给予更多细节补充。以京东的商品详情页为例,首先金字塔的最上层是用户目标明确直接进行“立即购买”的底部全局按钮,其次是商品的头图和用户评价这些,让用户了解更多信息,进一步促成购买,最后一层是提供商品相关的全部信息、参数、评分等,确保交易的最终完成。在这个过程中,用户在每一层花的时间也在逐级增加,呈金字塔状。


映射到设计师身上也是如此,从设计新人到设计总监,中间差的就是一个完整的设计技能金字塔。就像升级打怪,每完成一项任务获得相应的经验值,累积的经验值帮助我们更快的升到下一级。当把工作中的需要攻克的难题一一解决之后,你的设计水平会在不知不觉中更加精进,形成一套自己的设计风格,成为一名优秀的设计师。


有趣的是,把金字塔模型倒过来就成了“用户漏斗模型”。自上而下,激励用户成长。它告诉我们:

用户的需求是永远满足不完的,所以什么值得做,什么是可分阶段去实现的是决策人需要明白的。如乔布斯所说:“消费者并不知道自己需要什么,直到我们拿出自己的产品,他们就发现,这是我要的东西”;

不断完善主要功能,以满足金字塔顶的核心用户群。决策者常常添加一些自己想要的而不是用户想要的需求,比如在信息流中添加一个广告位;

如何优化完善产品架构,检验产品策略的合理性和完整性;



防错原则由世界著名的品质管理专家新乡重夫提出,即在过程失误发生之前加以防止,是一种在作业过程中采用自动作用、报警、标识等手段。使操作人员不用特别注意也不会失误的方法。

防错原则认为大部分的意外都是由于设计的疏忽,而不是人为操作失误,可以通过优化设计把过失降到最低。该原则最初用于工业管理,后来应用于界面交互设计中,当使用条件没有满足时,常常通过功能失效来表示。


自动检测提示

bilibili在登录时输入框没有内容或没有输密码时,登录按钮处于禁用的置灰状态,只有两者都满足了才可以正常点击。此外登录功能就可能会有用户名错误、密码错误、网络超时、邮箱错误等不同的错误。通常必须账号和密码同时满足且匹配才能成功。


Twitter发帖时只允许用户输入140个字,为了提醒用户,其解决办法是在键盘上方的工具栏上显示还能输入几个字符,超过会以负数警示。知乎发布文章标题过长时也会提示错误预警。


消除可能的失误

防错法则认为大部分的出错都是产品设计的不够优秀,而不该责怪用户操作疏忽,通过设计手法可以把出错率降到最低。防错法则的核心观点是,如何有效的在用户出错之前就尽量避免错误的发生。比如,美团外卖在接受短信验证码时,系统会自动提取验证码在键盘上方显示,用户点一下就可以自动填写,省去了跳出应用——打开短信——记住验证码——再输入的繁琐过程,有效预防了出错的机率。还有微信在绑定银行卡时也是通过扫描银行卡自动提取账号,避免手动输入的出错率。


将失误降至最低

二次确认,在一些比较重要的场景让用户二次确认,通常以弹窗的形式告知用户再次让用户考虑自己的行为结果,进一步降低出错率。例如,最近大家都在用的报税App,会在提交信息前再次确认。


视觉暗示

可在视觉(置灰或隐藏)上屏蔽那些不能选的选项,避免用户点击后才报错或点击没反应。


其次,一些不可恢复的操作,视觉上通常会给强标识。例如,删除短信时的文字颜色“变红”。


为用户犯的错买单

当用户输入错误信息时,比如打错字,系统应该给予用户想要的信息,而不是无动于衷,冷漠视之。


范围限制

其实限制用户的选择并不是一个好主意,但是如果有明确的规则来定义可接受的选项,那么限制用户可以输入的类型是一个很好的策略。例如,Airbnb订房可选日期和设置闹钟时的时间范围。


研究得出,使用产品时有77.7%的错误都是人为的,防错法则可以帮助设计师站在用户体验的角度考虑设计方案,做到操作前、中、后都有及时的反馈,预测到他们有可能发生的误操作状态,让用户更快完成目标,帮助用户减少出错率。



每次拿起U盘插入电脑时,我就呆住了,到底朝那个方向才是对的?

防呆(Fool-proofing)是一种预防矫正的行为约束手段,运用避免产生错误的限制方法,使出错的机会降至最低,进而达到“第一次就把工作做对”之境界。


设计师应谨记:不要认为用户是专家。比如,我们都知道“汉堡”图标就是菜单,点击这个按钮就会调出某些功能。但是设计师忘记了普通用户可能并不理解什么是汉堡包图标、什么是面包屑、什么是抽屉式导航、什么是3Dtouch、怎样双指滑动。更何况普通用户并不会研究App,在他们眼中产品只是众多工具中的一个。因此,一定要把交互和设计做的简单,通用的图标、功能和交互方式最好保持用户熟悉的样子,减轻用户重复学习的负担。每个页面应强调一个重要的功能而不应该让用户做选择题,这些都是有效防呆的好方法。


△页面的中主按钮更突出


防呆设计是预防错误发生的方法,让非专业、无经验的用户可以高效完成正确操作,不要让用户去思考,而是我们时时为用户思考。



又被称作“简单有效原理”:“如无必要,勿增实体。”

通俗点去理解“如无必要,勿增实体”可以理解为“不要浪费较多东西去做用较少的东西同样可以做好的事情。”或者表述为“在其他条件相同的情况下,要求得越少的那个就越好,越有价值”。


应用到设计学领域,该法则认为做产品时功能上不可过于繁琐,应该保证简洁和工具化。例如,产品中为用户提供了收藏功能是否就不再需要喜欢?提供了喜欢是不是不再需要收藏?一定要保证功能上的克制。不必要的设计元素会导致使用效率降低,还会增加不可预知的后果。建议在不损及功能的前提下,干掉多余的元素,当两个设计方案都能达到设计目的时,选择较为简单的那一个有利于更好地传达内容更好地用户体验。


总的来说,我们可以结合《简约至上》一书中提到的删除、组织、隐藏、转移四个策略来将复杂的设计和体验变得更加简单。

删除:关注核心,让用户注意力集中在自己要完成的目标上,删除不必要的功能、流程和造成视觉混乱的元素等;

组织:繁琐的功能通过分块,被组织成清晰的层次结构。还记得我们前面说到的“7±2法则”吗,把项组织到7加减2个块中;分块越少,选择越少,用户负担约轻;

隐藏:隐藏那些主流用户很少使用,但自身更新需要但功能。通过渐进展示和适时出现的方法减少干扰;

转移:把合适的功能转移到合适的设备上去。让用户感觉简单的一个重要前提,就是先搞清楚把什么工作交给计算机,把什么工作留给用户。




小测试,下列饮料中哪一种给你印象最深刻呢?文末揭晓。

可口可乐、雪碧、芬达、崂山可乐、7喜、美年达


雷斯托夫效应又称隔离效应(isolation effect),以及新奇效应(novelty effect),前苏联心理学家冯·雷斯托夫认为,某个元素越是违反常理,就越引人注意,收到更多的关注。


一样东西与以往经历明显不同就产生了经历差异。比如人生中的很多第一次,第一次高考、大学的第一天、初恋、第一份工作等等。该差异也会出现在新奇面孔、电话号码记忆中。奇特的面孔和特殊的电话号码更能被人记住。

该理论以多种不同的方式应用到设计中,最明显的就是如果想要突出某个重点内容,就要使它特殊化,通过色彩、尺寸、留白、字体粗细等设计手段。利用对比来凸显想要表达的重要信息。例如金刚区、tab栏的运营活动广告,特殊化的设计让它们在背景中脱颖而出。



个人中心的会员卡为了吸引用户注意,增加开通率,都成了重点设计对象。


与以往不同的界面设计可以更加的吸引用户,加深用户的记忆,同时扩大了活动对用户的影响力。例如每年淘宝的双11首页设计都与往常不同。


Google doodle 会在一些比较特殊的日子改变 logo 的设计,把logo设计成与这个日子相关的插画或涂鸦,与平时的 logo 形成差异化,帮助人们更好地记住这个日子。


因此我们在界面设计中,若想让用户对哪个模块或者是元素引起注意或点击,就可以打破常规对该元素进行强调设计,使他在背景中脱颖而出。但是不要任何元素都强调,因为什么都强调就等于什么都没强调,就没有重点,所以要谨慎使用这个方法。


回到开篇的题目,答案是「崂山可乐」。相比其他饮料,崂山可乐遇到的少,反而成了最特别的一个了。你的答案是什么?欢迎在下方留言探讨。




食之无味,弃之可惜

损失厌恶是指人们面对同样数量的收益和损失时,认为损失更加令他们难以忍受。 同量的损失带来的负效用为同量收益的正效用的2.5倍。比如,丢100块钱的痛苦感要远高于你捡到100块钱带来的幸福感,也就是说要至少捡到300块才能平复之前的心情。


生活中类似的栗子还有很多,比如旅游时,虽然这个景点很烂,人们依然觉得来都来了,还是要看完再走才“不亏”;吃自助餐时,明明吃不下那么多,可想到花了那么多钱,就要尽可能的多吃才算“回本”,真是应了那句话:“食之无味,弃之可惜”;花了50块买了张电影票,过了10分钟发现是部烂片,就算在电影院睡觉也不愿提前走,觉得这50块钱不能白花...


那么,该如何将“损失厌恶”赋能给产品设计呢?

最典型的莫过于电商App中的各类券满天飞,比如:买二送一、3件7折、倒计时xx小时后恢复原价等等。商家就是为了营造现在不买就会错过的套路,用户也会觉得失之可惜。一年一度的天猫双11,京东618,还有情人节、中秋节等各种有的没的节日都是商家利用“损失厌恶”心理为基础刺激消费。



我们App的用户粘性不太理想,增加一个“签到”功能吧,产品经理如是说。如是我们看到各种签到得礼品,赢红包等活动。中间还不能中断,要连续签到多少天才能得到奖励,用户也担心中断的损失。


某网盘下载文件时,会给你一个10秒VIP高速下载的体验,计时过后又恢复到龟速,让你恨的牙痒痒。虽然这招有点损,但用户体验到了VIP的快感,很多人还是会乖乖成为付费会员。


产品运营中会经常发一些优惠券,虽然知道自己不会用,也要先领了再说。这些券也都有时间限制,快过期的提醒也会加快用户决策。还有0元开通会员,套路是第一个月免费,次月开始按正常价自动续费,典型的“骗”进来养肥了再“杀”。


人天生会对危险的,不好的东西避而远之。如是我们就看到保险行业,他们会用一些负面信息(空难、车祸)刺激你,用户就会产生焦虑,自然就想规避掉这些概率小的风险。例如购买机票时的意外险,QQ退出登录时的提示。


还有就是有用户自己的内容的东西,一般不会轻易舍去。拿我个人来说,飞书一直是我的写作工具,后来看到几个更好用的软件,但要想到把原来的这么多东西全部转移过去也是件很心累的事,太麻烦,还是继续用飞书好了。QQ这个“古老”的软件,估计很多人好久都没打开过了吧,但是让你删了它,你还是不愿意的,因为那上面有很多青春的回忆。




用户会将大部分时间花在其它网站上,因此他们会希望你的网站也能像他们已经掌握的其它网站一样,拥有相同的使用模式和习惯。

Jakob定律是由Jakob Nielsen提出的,他认为用户在其他网站所积累的经验教会了他们如何使用网站,所以他们会希望你的网站可以与那些熟悉的网站一样,相似的使用方式,在使用你的产品、服务、内容和信息的时候,他们不会感到恐慌,而是轻车熟路。该原则鼓励设计师遵循常见的设计模式,以避免混淆用户或导致更高的认知成本。


例如YouTube2017年改版前后的对比,在新版中,网站框架和功能上几乎没动,只是在UI上做了顺应新的设计准则,比如调整字体大小、颜色、栏目间距等。整体上和旧版没太大区别,而且还给用户提供了旧版的选择。


在移动端App中也应如此,在具有相同功能的页面,尽量保持一致。大到页面底层框架(比如电商应用中的购物流程),小到UI设计中的一个按钮,一个图标,甚至一句微文案。


在设计产品时,要先延续大众早已习惯的概念模型。然后再从自己的产品出发,对其进行改善。而不是从零开始制定自以为是的流程。

日常使用的各类修图软件,版式都高度相似,中间是图片,各种滤镜、贴纸、调整等功能都放在底部操作区域,很多相同功能的名称都一样。这是用户最熟悉的布局,可降低用户在同类软件使用的学习成本提升使用效率。


也许你会质疑当所有产品都遵循相同都设计模式,会让产品同质化严重,答案是必然的。此时需要深入了解用户的目标和心智模型(用户访谈、用户画像、用户体验地图等),并将其应用到我们的产品设计中去,缩小我们与用户心智模型之间的差距,从而获得良好的用户体验。上文YouTube例子中,就是通过简单的用户授权(新旧版本选择),避免了心智模型的不一致会带来的问题,当用户准备好随时可以切换到新的版本。相反的案例Snapchat在18年设计改版时,因为新的布局未能确保改版前后用户心智模型的一致性,导致大量用户流向竞争对手Instagram那里了。


但是也要注意设备之间的差异,比如在移动端“汉堡包”式菜单是个不错的方案,可是放到桌面端可能并不太友好,因为大屏幕可视范围更大,小小的汉堡包图标很容易被忽略,这时候平铺出来可能会更好。


思考总结

1、用户会把在其他产品使用中已熟悉的操作习惯转移到另一个看起来相似的产品上;

2、利用现有的思维模型,使用户可以专注于自己的目标上,而不是学习新的操作方式;

3、在进行必要的改版时,请给用户过渡到新版本的机会,即可以选择短时间内继续使用旧版本;



看名称挺拗口,另一种翻译叫做“对角线平衡的和谐状态”。它告诉我们浏览页面是由左上至右下的视线流,左上角是视觉第一落点区,右下角是视觉最终落点区,因此右上角和左下角都是一个强烈的视觉盲点区,大多数时容易被忽略。


在进行信息排布时,将最重要的信息放在左上角,右上角和左下角添加辅助元素,右下角作为整个视觉落点可以展示重要操作。运用视觉元素来创建一条虚拟的“线”,让用户的视线跟随左上到右下这条对角线移动,符合用户习惯性的眼动规律。


古腾堡图表应用最典型的例子就是商品详情页,在界面的顶部展示商品图片、名称、价格、快递和优惠等用户主要关心的信息;右上和左下通常是分享、客服和收藏等次要信息;右下角则放置最终促成用户交易的购买按钮。


我们都知道一般页面按钮都在界面底部是因为离手近,方便操作,但不仅仅如此。还因为浏览是用户的第一行为,他们的视线会根据页面元素进行移动,最终停留在底部结尾的地方。


看各种社交产品评论、点赞的位置,就知道产品希望用户先干什么的想法。


弹窗的按钮摆放一般都是左「取消」右「确认」,目的是让用户最快地看到主要操作内容。



















余额宝的「转出」在左,「转入」在右,毕竟谁也不想财往外流是吧。


既然如此,为什么“发布”页面的按钮都在右上角呢?因为发布页是属于“编辑页面”,需要用户谨慎操作,这里关注的核心应该是可编辑内容区域,而不是按钮本身。


类似的例子还有很多,设计中与此视觉流与节奏规律相似的还有F型布局和Z型布局,合理运用这些节奏模式,使用者会跟随你“设计”的视觉流和运动规律来浏览页面,有效提高用户阅读的节奏和理解能力。




美国心理学家亚伯拉罕·马斯洛(Maslow.A.H.)从人类动机的角度提出需求层次理论,该理论强调人的动机是由人的需求决定的。他将人类需求分成生理需求、安全需求、社交需求、尊重需求和自我实现需求,依此由低层次到高层次的过程。马斯洛需求层次理论最大意义就在于,它告诉了我们,人在满足了基本的需求之后,就要去实现更高的需求和目标。


马斯洛需求层次理论有两个基本出发点,一是人人都有需求,某层需求满足后,另一层需求才出现;二是在上层需求未获满足前,首先满足迫切需求,该需求满足后,后面的需要才显示出其激励作用。例如,在能感受到爱之前,他们的生理和安全需求一定要得到满足。


回归到产品,一款产品,最核心的是解决用户的需求。马斯洛需求层次理论,为产品的需求分析指明了方向。

生理需求:满足人的最基本需求,如衣、食、住、行、生理方面的需求。诸如美团外卖、淘宝、马蜂窝等为日常生活提供方便的应用;

安全需求:人生安全、财产保险,也是强需求。如是各类投资理财软件层出不穷。

社交需求:包括友情、亲情、爱情多个层次,满足人类社会关系,让每个人不再是孤单的个体。如是微信、微博、Soul、探探、陌陌等不同类型的社交软件多如牛毛;

尊重需求:每个人都有被尊重的需求,都希望展现自己,获得人们认可。此需求可以深度结合在社交需求中。

自我实现:最高层级的需求,完成与自己的能力相称的一切事情,实现自己理想的需要。结合到产品可以理解为能满足自己外在展示(炫耀)的需求,如各类美颜软件,美化后的照片晒到朋友圈,给人看到最好的一面。


由此规律可以看出,越靠近底层需求越是刚需,越往上,就变得越来越不必要,如自我实现,变得可有可无,不再是所有人的刚需。一个优秀的产品,深谙人性满足用户核心需求,才能形成持续稳定高用户粘性的产品。




序列效应法则又叫系列位置效应,是指一种记忆现象: 在列举项目时,排在最前面与最后面的元素,要比排在中间的更容易让人记住。

因为人们对排在头、尾的项目,要比排在中间的更容易记起来。比如我们都知道第一位登上月球的宇航员是阿姆斯特朗,却很少人知道第二位奥尔德林;班级里我们一般都知道成绩最好的第一名和倒数第一名,至于排在中间的很难记住。因此对排在开头的项目产生加强的回想效果,称为“首位效应”( primacy effect)。对排在结尾的项目产生加强的回想效果,称为“近因效应”( recency effect )。


分类页签中,我们通常都会记得“精选”、“热门”这类标签,是希望给用户进入App后看到的主要内容。这就是“首位效应”,把重要性高的内容放在首要位置


我们都知道界面中“返回”按钮放在左上角,除了操作习惯和防误触外,还因为它出现在页面左上角最开始的地方,更长久地储存在长期记忆之中,需要“返回”时能够快速回忆出来。


tabbar数量不管是3个还是5个,用户通常都会记得第一个“首页”和最后一个“我的”,对排在中间的都会选择性的忽略掉。


有时候新上一个功能,产品想提高它的位置引起用户注意,会和“我的”互换位置。例如网易云音乐,新版本中把“我的”放在第三个tab,为了提升“云村”重要性,把它放置最后一个tab,正是利用了“近因效应”。


近因效应常用于及时进行反馈的设计界面中,比如点赞、评论、分享等功能置于底部不仅可加深印象,同时用户在看到有趣的内容,想要评论或分享时,不用等到文章看完即可操作。从而增强内容粘性,提高互动率。


用户的记忆具有系列位置效应,而且人的短期记忆非常有限,通过序列效应法则的应用,我们可以帮助用户减轻记忆负担。在排列项目时,把重要的放在首位或末尾,以达到最好的记忆效果。


作者: 印迹_ 来源:站酷

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

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

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


用动效创造可用性:动效设计的基本原理

纯纯

在笔者刚学习动效那会儿,因为执着于钻研软件技法,而忽略了动效的基本原理,导致作出了很多生硬的动效设计。和很多事情一样,动效设计如果违背了自然规律,必定会损害产品的可用性。


在用户界面中,动效不仅仅是一种视觉装饰,而是一种强大的力量,它可增强产品参与度并扩展设计交流的范围。

本文给大家介绍了十二项最基本的动效设计原理,这些都适合用于UX/UI设计项目中,是非常有用的运动原理,建议收藏反复食用。



原理一:缓动 Easing

缓动效果模拟了现实世界中对象随时间加速或减速的方式,它适用于所有运动的元素。自然界中没有东西是从一点呈线性地移动到另一点。现实中,物体在移动时往往会加速或减速。我们的大脑习惯于期待这种运动,因此在做动画时,应利用此规律。自然的运动会让用户对你的应用感觉更舒适,从而产生更好的总体体验。


线性动画

没有任何速度上的变化的的动画称为线性动画,如坐标图所示,运动的曲线成直线状态。这种动画效果往往显得很僵硬,不自然,让用户觉得不协调。一般来说,应避免线性运动。



缓出动画

运动的开头速度很快,结尾处逐渐减速的动画称为缓出动画。运动曲线呈抛物线状态,缓出动画最适合界面里面的动效,快速的入场给人反应很快的感觉。



缓入动画

和缓出相反,缓入动画是开头慢结尾快,这就像自然落下的球体一样,速度越来越快。但是,从交互的角度来看,缓入可能让人感觉有点不自然,因为结尾很突然;在现实中移动的物体往往是减速,而不是突然停止。缓入还有让人感觉行动迟缓的不利效果,这会对网站或应用的响应速度给人的感觉产生负面影响。



缓入缓出动画

把缓入和缓出曲线连接在一起,就是完整的缓入缓出动画,它的运动过程可以想象一辆汽车从起步到停车的动作,可以实现比单纯缓出更生动的效果。由于开头慢、中间快和结尾慢,动画将有更强的对比,会让用户感到愉悦。

因此,缓动原理实际上是使动画不再那么尖锐或生硬的过程。



原理二:变形 Transformation


变形是由一个形态变成另一个形态,这种形变是动画里最引人注目的。通过元素形态的转变,告知用户元素的状态或作用发生了改变。


例如这个下载动画,下载完成后变形为按钮,其实是符合用户预期的。这种无缝转换,可以提高用户的认知度,提

升了动画的连贯性。


在动效中,利用挤压变形原则能够唤起用户的主观记忆。是刚性的还是柔软的,通过物体运动的变形状态就能很好的体现出来。





原理三:克隆 Cloning


当元素被克隆时,可表达出元素与元素之间的某种连续性。在此原理中,如何让物体的出现和离开具有连续性、关系和过渡,是信息准确传递的关键。


例如这个发布按钮,点击它会创建多个新对象,引导注意力,非常清晰的表达了他们之间的关系。


还有这个运动健康页面,在添加练习项目时,从主按钮克隆生成一系列练习项目,选择完成后原路返回。




原理四:覆盖 Overlay


利用覆盖原理能让原本有限的空间得以延伸,用以显示额外的可见元素,补偿了用户体验中的单一统一视野或“客观视图”。覆盖原理在UI设计中常用于列表横滑,通过覆盖,隐藏相关操作,以减少视觉上的干扰。


在某种程度上,作为设计师,“层”的概念是显而易见的,不言而喻。我们用层来设计,层的概念被深深地内化了。但是,我们必须小心区分“制作”和“使用”的过程。


作为不断参与“制作”过程的设计师,我们要非常熟悉我们正在设计的物体的所有部分(包括隐藏部分)。然而,作为用户,那些不可见的部分是根据定义和实践,在视觉和认知上隐藏的。




原理五:偏移和延迟 Offset & Delay

偏移和延迟原理是表明元素之间的层级与关系,在新元素入场时利用偏移和延迟让信息或界面元素按照秩序进退场,定义对象关系和层次结构。


在上面的示例中,浮动操作按钮 (FAB) 转换为头部背景。数据图表在时间的延迟下依次出现,暗示用户这里的信息与其他元素之间的区别,吸引用户注意力。




原理六:遮罩 Masking


遮罩是决定元素变化的结果是什么,通过暂时使对象显示和隐藏,以连续无缝的方式转换,保持了叙事流程的效果。虽然对象本身保持不变,但因为它有了边界和位置,这两个因素决定了对象是什么。


例如这个转动的咖啡杯,借助遮罩,通过改变logo的位置和吸管的朝向,造成杯子在自转的假象。



在上面的例子中,音乐封面改变了边界形状和位置,但没有改变内容。转换发生在用户执行操作后激活,是相当巧妙的技巧。




原理七:父子关系 Parenting


父子关系是将界面元素关联起来的重要原则,创建出空间和时间层次关系。它最适合作为“实时”互动,例如拖动列表顺序时,其他信息会同步跟上。

回想一下,很多元素属性都可以创造这种联动的继承关系,例如不透明度、位置、旋转、缩放、形状、颜色等。




原理八:数值变化 Value Change

文本和数字的变化是如此普遍,以至于我们忽略了它们,而我们却没有给它们带来区别和严谨来评估它们在支持可用性方面的作用。


数字和值表示现实中正在发生的事情,既可以发生在实时活动中,也可以发生在非实时活动中。它可能是时间、收入、速度、游戏得分等。当我们使用动态的数值变化时,它激活了一种“神经反馈”,用户会觉得自己与这些数值有关联的。如果这些值是静态的,就感觉与现实的联系会减少。



数值的变化在各类金融理财和日历APP中经常出现,数据的动态表达和交流可能会对数据的价值产生影响;如上图中的数值的动态变化,让用户感知到自己可能有能力影响到数据,提升了参与活动的意愿。




原理九:蒙层 Obscuration

蒙层与原理四的覆盖类似,只不过蒙层带有透明属性,它挡住了后面的信息,但又没有全挡住。iOS中常见的毛玻璃效果就是如此,它让用户意识到正在操作的对象,还有另一个世界。拓展了Z轴的层次结构,补偿用户体验中的单一视野。




原理十:视差  Parallax

当用户滚动时,在视觉平面中创建空间层次结构。其目的是为了建立各元素的层级关系,移动速度更快的交互式元。对用户来说显得更接近,较慢的非交互式元素,会退回到背景显得更远,从而更好把内容和环境区分开来 。


设计师可以利用时间本身来创建这些关系,告诉用户界面中的哪些对象具有更高的优先级。用户不仅认为界面对象现在具有超出视觉设计中确定的层次结构,而且现在可以利用这种层次结构,让用户意识到设计之前掌握用户体验内容。




原理十一:多维 Dimensionality

维度是将界面的元素多维化,使元素看起来像可翻转的,可折叠的,浮动的。可以使不同的UI元素实现无缝的过渡衔接,它通常以折纸维度、浮动维度和对象维度这三种方式来呈现。


此外,维度原理克服了视觉平面中的分层悖论,其中缺乏深度的物体存在于同一平面上,但出现在其他物体的“前面”或“后面”。


折纸维度可以被认为是“折叠”或“铰链”的三维界面对象,它由多个元素组合成“折纸”结构,隐藏的物体在空间上仍然可以说是“存在”的,即使它们不可见。



浮动维度为界面对象提供了空间起源和离开,使交互模型直观且具有高度叙事性。常见的“3D”卡片就是通过这一维度来实现的。


对象维度会产生具有真实深度和形式的维度对象,可以看到,虽然在2D层,元素却可以3D视角呈现真实的维度。




原理十二:平移与缩放  Dolly & Zoom


平移与缩放是电影概念,指的是与相机有关的对象的运动,以及画面中图像本身的大小从远景平滑变化到特写镜头(反之亦然)。

在某些情况下,无法判断对象是否正在缩放。可能是在在 3D 空间中向着相机移动,也许是相机在向对象移动,又或者是对象自身在放大缩小。以下三个示例说明了可能的情况。



镜头平移:被拍摄物保持静止而镜头移动或镜头保持静止,而被摄物体进行远离或接近镜头的前后移动。

镜头缩放:镜头与被摄物体在位置上保持静止,而被摄物自身进行缩放。

缩放:是指视角和对象都没有在空间上移动,而是物体本身在缩放(或者我们的视野正在缩小,从而导致图像放大),这向观看者传达了附加界面对象在其他对象或场景“内部”的信息。



移动还可以结合维度原则,从而产生更多空间和深度体验,并向用户传达当前视图“前面”或“后面”的其他区域或内容。缩放允许无缝转换 - 实时和非实时 - 支持可用性。在创建空间心智模型时,Dolly & Zoom Principle 中采用的这种无缝性非常强大。




作者: 印迹_ 来源:站酷

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

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

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


做好这几处细节,你的排版才能更精致

seo达人

一、给标题搭配辅助文字

标题的字号通常会比较大,这时如果给它搭配一个字号比较小、字体不一样的副标题,或者是英文标题,那么就可以得到鲜明的大小对比和字体对比,甚至还可以有色彩对比、空间对比等。这么做可以增加标题的层级关系,使视觉更丰富,更生动。

图片

▲ 上图的标题只有四个字,如果单独排版会很单调,所以设计师把它与英文标题一起排版。如果你想要排版的效果比较时尚、活泼,可以将标题进行断行、错位处理,两行或三行的标题比单行标题的层级更丰富、对比关系更多。

图片

▲ 上图的标题搭配了一行字号更小、字重更细的副标题,由于上图海报想要表现出比较高端的品质感,所以标题和副标题采用了同一种字体,也没有加入太多的排版技巧。

图片

▲ 上图的标题与活动时间和装饰英文组合排列在一起,并且在排版时有明显的大小对比、字体对比、颜色对比、点线面的对比等,使整个标题看起来有丰富的细节。

 

 

二、卖点要有Icon

绝大部分的产品海报或宝贝详情页上都会展现产品的卖点(核心优势),这通常会是比较重要的信息,所以需要重点突出。不过突出的手法不一定要使用很大的的或者是对比很强的颜色,给卖点增加icon就是一个很常见、很有效的技巧,既可以通过icon把卖点信息与其他信息区别开,从而吸引读者的目光,也能使画面视觉更丰富、有更多细节。

当然,icon设计本身也很关键,首先,要尽量使用一些大家比较熟、能一看就懂的图形符号;其次,要尽量设计得细致一些,虽然会需要花一些时间,但这是值得的。

图片

图片

另外,风格的统一也很重要,一方面是每个icon的风格要一致,不要有些硬朗、有些柔和,也不要有些很复杂、有些很简单;另一方面是Icon的调性也要符合产品调性以及画面的风格,这样画面的整体视觉才能更统一、更美观。

图片

比如,在上图的儿童牙刷海报中,由于画面部分采用了剪纸风格,所以卖点的icon也使用了剪纸风格。

 

三、信息要分组

版面中的信息一定要分组,不要全部排成一堆或者四分五裂地排列,否则都会加大阅读和理解的难度,可以通过控制信息之间的间距来分组,也可以利用线、线框、色块来分组。并且,信息分组还需要注意以下两点:

❶ 视觉上要有主次,即每组信息版面空间占比不要太一致。

❷ 要符合阅读及信息传播的逻辑。有些设计师会为了好看而随意把信息的顺序打乱重组,这是本末倒置的行为。

例如在下图的海报中,设计师虽然将信息进行了分组,但是除了主体很突出以外,其他信息都太过平均了,再加上信息块(包含文字组和图片部分)特别多,所以导致排版很散。

图片

而在优化后的方案中,把版面信息进行了重新分组和排列,视觉更整体、层级关系更鲜明。

图片

下图海报的排版也有几个比较严重的问题:

图片

❶ 信息分组不合理。大部分文字信息都被圆形色块打包成一个组,但里面很多信息的意义并不相同,其实不适合组合在一起;

❷ 文案的排版不符合逻辑。比如把“只选直径…”这句文案放在最上面有点突然;再比如“首创一品黑蒜猪大蹄饭”其实是一句话,设计师却把它拆开排列,而且顺序是错乱的;

❸ 排版太乱。虽然用了圆形色块进行整合,但是在这一组新信息里,有的文字排成弧线、有的文字竖排、有的文字横排、有的文字对齐排、有的文字错位排,同一个信息块里采用了太多不同的排版形式,而且组合得不好。

修改过的方案则进行了合理的分组,信息排版也更符合阅读理解的逻辑。

图片

❶ 把标题和副标题分成一组排在左上角。在面积上是版面中的第二大视觉块,信息一目了然且主次分明;

 把价格、口感NO.1、“只选直径…”这三个信息分成一个组,排在标题和副标题下方、产品的上方,符合正确的视觉流程和阅读逻辑。而且该组文案与产品图片进行叠加或绕排处理,既加强了文字与图片的关联,也使得文案与产品形成了一个大的整体。

所以,设计师在做设计时,一定要阅读文案、理解文案,看哪些信息可以划分到一组排列,哪些信息应该要分开排列。

 

四、视觉层级要分明

只要不是同一句话或者同一类信息,那么都要区分它们的层级关系以及视觉呈现,哪怕这些信息被分在同一组。比如标题、副标题、小标题、正文、卖点、注解、价格等等,这些信息在视觉呈现上都要有所区分,并且区分得要尽量明显一些,如果只是把字号加大一点、改变文字的颜色,那么可能会比较难把信息进行有效区隔,视觉上也会比较单调。

所以,为了视觉上更美观、更易阅读,我们还可以通过改变字体、排版的方向、排列的位置,增加辅助元素(icon、色块、线条、线框等)、装饰效果(描边、立体效果、扭曲效果、裁剪效果等)等等,创造出比较鲜明的对比以及视觉层级。

图片

图片

另外需要注意的是,区隔信息的手法要与设计的风格和调性吻合,通常来说,高端、简约的版面,所用的排版技巧和装饰手法会比较少,视觉效果也不会太夸张;而如果是时尚类或者促销类的设计,其用于区隔信息层级的手法可以尽量丰富、夸张一点。

比如下图是苹果笔记本的banner设计,其每一行文字的视觉效果都有明显的区别,但并没有采用特别夸张的表现手法,字体和排版方向都是统一的。

图片

图片

而下面这则猫粮的海报,其文字表现手法则要丰富很多,对比要更强。

图片

图片

 

总结一下

想要版式更加精致、更便于信息的传播,我们需要处理好以下几处细节:❶ 给标题搭配辅助文字;❷ 卖点要有Icon;❸ 信息要分组;❹ 视觉层级要分明。


作者:葱爷

转载请注明:学UI网》做好这几处细节,你的排版才能更精致

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


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


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




日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档