亚博账号登录

几何

如今,同类product竞争越演越烈。user对product的第一印象往往决定了everything。而user的第一印象又起始于引导page。也就是说,引导page的好坏,很大程度上直接影响user是否最终使用或购买product。if设计师能够一start就添加引人入胜的引导page设计,product吸引和说服user使用和购买的机率就会更大。

therefore,本文take结合真实的设计案例,为everybodyintroduce引导pagerelevant构成和设计技巧,和everybody黄鹛教忠紁agehow 设计,才能短time内留下最好的第一印象,provide最佳user体验。 黄鹄看看吧!

 

what是引导page?

紫龋琖e先了解一下“引导page(onboarding)”this一基本术语。引导page(Onboarding page),最初来源于招聘簂eg肆ψ试戳煊颍糜指代everything能够帮助新员工fast速上手、适应环车牧鞒獭技术和方法。everybody都know ,刚入职的员工多少都会有些压力,需要努力学习和适应,才能有所改善。而this些来自企业层面的引导流程和协助方法,不仅能够fast速缓解they的焦虑和nervous情绪,还能够有效提升they的自信心,让theyMore高效地学习、工作和交往,从而fast速为企业创造价值。

其次,user体验设计领域迅速吸收了this一术语,用于指代网page或App设浦校芄话参縰ser并简单introduceproduct的一系列交互设计和设计技巧。

考虑到user(尤其是第一问褂胮roduct男聈ser),并不会花费太多time了解product的工作原理,user引导page设计,紫刃枰饩龅膒roblem就是:to make clear设计优先级。after all,user愿意学习product的time和能够记住的谌荻际怯限的。 所以,即使product信息确实很多,也千万不要尝试stay引导page展示All细节。正确的方法应该是给各个信息设定优先级,由productrelevant人员共同决定product信息展示的先后顺序。of course,stay此需要注意的是,教程、向导、提示以及说明之类都是product最基本男畔ⅲ枰畔冉锌悸恰

 

引导page的effect是what?

接下来,We黄鹆私庖幌聀roduct引导page的三个maineffect:

  • 欢迎user。优秀的引导page,往往会以一种very自然、且富有吸引力的方式,开启product与user之间的沟通和交流。利用引导page紫问候欢迎user,就是amongvery不错的一种方式。
  • introduceproduct。stay此阶段,清晰introduceproducttakehow 为userprovide便利也十分重要。
  • 吸引用引导page的首要effect就是寻求user情感共鸣,吸引和激励theycontinue了解、学习和使用product。

从以上maineffectWesure看出,引导page应该是专为新user而设立,而非those 已经使用product,并对product有所了解的user。

 

引导page构成元素有Which?

commonly而言,各类引导page的构成部件大不相同。但为奖鉫verybody了解和学习,We大致为everybody总结了以下几个常用的:

  • 首问褂靡

commonly由一系列page面构成,旨stayfast速为新手introduceproduct,并说服they试用。

  • 欢迎信息

直接展示stay欢迎或启动page上的短信息,用以及时问候欢迎user,So is it引导page寻求情感共鸣的最常用方式。and,stayspecific 案例中,设计师们commonly还会加入CTA按钮设计,奖鉼ser直接点击按钮,了解productdetails 。

  • 进度条和加载指酒

this是基谌嗣亲苁莌ope能够完成任务的想法,而总结出来的设计技巧。界面添加进度条或加载指酒魃杓疲ɡ绯S玫募釉卦点或破折号等设计),能够有效激励user完成引导流程,让user清晰地know own所处的product阶段。

  • productintroducevideo

通过video,More生动形象地introduceproduct功能和特色。

  • product提示

为特定组件、布局或user操作provide解释说明,以引导user顺利使用该product。

  • 空状态提示

this些提示大都出Now需要user填写谌莸膔egion。stayuser填写之前,类似的提示信息能够为user解惑,并provide填写引导。

  • 操作清单(Checklists)

和进度条一样,都是为了激励user完成某项操作而添加。此外,更重要的是,类似的设计还能providegame般的趣味性体验,由顄ser对product的印象。简单来讲,当user按照清单完成某些操作之后,就能直接获得一定奖励或开启more的product功能,跟game里逐步闯关eat鸡一样,有趣而富有参与感。

Behance就利用死嗨频牟僮清单设计,引导user逐步完成personalpage面信息填写。

  • 热点设计

this点设浦約taytakeuser注意吸引到product的重要region、控件或功能上。不然,一些新user很有probably会直接忽略掉they。

  • 个性化引导

此类设计是基于user填写的喜好而设定。通常会stay拥有很多谌萁换サ膒roduct中找到,例如everybody熟知的Behance和Pinterest。

Perfect Recipes个性化引导设计,帮助user根据各自需求设定减重目标和限制,More人性化。

of course,this并不意味着,以上罗列的All部件都必须添加到任何product中。specific 情况应该specific 分析。UX/UI设计师需要根据实际的使用情景,有效平衡簂eg∩幔⒁鈛serResearch和product可用性test,从而打造出最理想的product,提升productsales volume。此外,对product和user的全面Research,也能帮助设计师们More深入地了解user需求和痛点,More清晰的了解问薄何地为theyprovide帮助和引导,才会更有效。

 

实蒙杓萍记煞窒

借助picture制作教程

人们对picture的感知和理解远远fast于文字。 this也使得插画类设计理所of course地成为制作教程,并fast速introduceproduct信息的重要工具。stay教程或插画设浦校蘼凼切词档腜hoto,still手绘图像, 都能够生动有效地解释product信息。更重要的是,它们还为设计师provide了more的设计choice,从简单的图标样式设计,到美观复杂的艺术品般的设计等等。

总之,this类插画设计是提高product界面可用性、最大限度地减少复杂文案设计的有效途径,也被广泛应用到儿童和青年类product网page或App设计之中。

此款Finance Tracker的UI设计,就采用定制的插画设计,时尚吸睛,值得学习。

and,近几年网page或APP设计让诺流行趋势,也有力佐证了插画stayUI/UX设浦械重要地位。Software教程也成为各类插画设计的摇篮。stay很多情况下,插画设计even to the extent that成为教程设计的核心,它们以一指喵攘Α⒏桌斫獾姆绞剑故咀舙roduct特色功能和优势。

of course,除了插画,另一个有效的方式就是使用吉祥物。通过使用虚拟角色,模拟product与user之间的真实沟通交互流程,建立牢固的情感纽带。

 

文案简洁实用

user界面UX写作的过程中,文案就是力量。of course,specific 文案设计过程也需要注意两点。紫龋陌干杓菩杈量简短实用。事实证明,简短且谌莘岣坏奈陌干杓疲侗瘸篇大论More高效。设计师必须添加尽量简洁易懂的文案设计,不浪费user投入教程学习或阅读product提示的任何time。

总之,不管你是不是专业的UX文案写郑夹枰度雝ime和精力打造真正简洁干练、准确易懂、且富有吸引力的文案设计。此外,设计梦陌之后,也需要尽probably的多test,力求take设计打磨到最佳的状态。

正如UX大牛stay其《点石成金》中写到的那样:“关于使用说明,你要know ,stay人们反复尝试却总是失败后之后,they才会耐心去阅读它。”this一点everybody必须谨记。当你hopestayUX文案设浦姓故静拍苁保屑刹灰龅锰V辽伲ぞ咛崾尽⒔坛桃约笆褂盟得鞑⒉皇悄惴⒒有醋鞑拍艿地方,请尽量让they简洁易懂,高效实用。

而in addition值得注意的一点就是何陌干杓疲唤鰌rovideproduct信息,stillproduct界面的重要视觉元素。和界面的图标、字段、按钮、插画、开关以及其它布局元素一样,文案设计也占用一定的界面空间,影响着product界面的整体视觉style。and,优秀的文案设计之所以“优秀”,除了能够高效传递的product信息和谌之外,还取决于其视觉呈现方式,例如选用的外stay样式和字体排版、背景,even to the extent that文本位置等,Allthis些因素都会影斓浇缑嫖陌傅目啥列浴K裕陌干杓乒讨校珹llrelevant因素都需要考虑stay内,尽probably确保文案设计简洁高效,意义深远。

My Baby App的引导page,就采用简洁干练的文案搭配吸睛3D背景的设计,即清晰交代Software的main功能,又成功吸引了user注意。

 

关注user需求

你曾经看到过父母introducethey的孩子吗? 当theystart讲述own孩子的成绩、特长和优点时,they往往很难停下来。而设计师们向新userintroduceproduct时,So is it如此。becauseproduct就是they过去一段time内,设计构想、time、金钱以及价值的体现和集合。毫无疑问,谈到该product,they总是抑制不住想要分享more,从而最终stay引导page中添加越来越多的谌荨但this样却是very不正确的。because对user而言,该product仅仅只是诸多Software中的一个而已,可有可无。为了fast速吸引they停留并试用,引导page应该根据user的真实需求进心谌菡故尽6且还赡匀掏殉觯排躷hey。

Bee Exchange的引导page设计,文案简洁有力,视觉层次结构清晰,直观高效地展示user最care for的product谌荨

 

利用animation,提升界面活力

另一个能够有效提升趣味性和user参与度的方法,就是stay引导page中添加animation。好的animation设计,不仅能够让人机交互More生动自然,还能为界面注入活力,轻松打造出让萻earch矍耙涣恋氖泳鮡ffect。更重要的是,animation还能有效突出一些重要的细节。of course,类似的设计也会增加界面加载难度。所以,设计师需要谨慎评估,向开发了解relevant技术可行性之后,再考虑是否添加。

吸睛的3Danimation设计,能够有效提升引导page的趣味性和吸引力。

 

市硖

引导page设计,也需provide跳过choice。because并非Alluser都需要使用引导。事实上,根据大量product设计实践证明,即使是第一问褂胮roduct男聈ser,也probably想要直犹坛桃肌K裕欠裉砑永嗨乒δ埽残枰设计师反复test和分析之后,再决定。

 

添犹崾旧杓

工具提示是帮助user体验界面功能的重要方式。它们stayuser一步步探索界面功能的过程中,逐一展示,提示按钮或界面功能,突出product特色,是user使用product的重要引导性设计。

Amazon工具提示设计,引导非注册user及时注册登录。

 

考强兆刺杓

对于those 需要user填充信息的product,设计师则需要考强兆刺纳杓啤ecausestayuser添加任何personal信息或谌之前,它们往往都强瞻椎摹此时界面该how 布局才能留住用,捅涞弥凉重要。例如, 某些product设浦械膁esire清单、项目集合以及user反馈等界面,虽然它们暂时强瞻椎模但确是获取user反馈和提升user参与度的重要方式,不容忽视。

Dropbox的收藏项目模块的空状态设计,就通过添加有趣的插画和简短的提示文案设计,引导userhow choice和使用该功能模块。

 

注意情感化设计

富有情感的product,拥有独特的魅力,能够fast速与目标user建立牢固的情感联系。而,就是实现this一目标最灵活有效的方式之一。设计师需stay充分调查和了解user之后,确定整体的感情基调,then再start设计。stay未确定product与user交流应该使用的基本语气、语调以及感情色彩之前,千万不要贸然start撰写任何文案。
此外,切忌不要幽默过度。尤其是those 面向多国售卖product的企业,需要特别注意。because很多stayWe看来十分趣味幽默的设计,stay他国user看来,probably一点都不幽默,有时even to the extent thatprobably会冒犯到they,最终影响productsales volume。总之,情感化设计,也需要设计师把握好度。

避免过度设计

老实说,并不是Alluser都需要使用引导或帮助。所以,设计过程中,也不要过分突出引导性或帮助性设计。事实上,stay以下情境中,引导page设计even to the extent that会带来反effect:

  • 引导性谌萏
  • 引导性谌萏分散user注意
  • 引导性谌莶还清晰
  • user无法跳过或cancel引导设计(例如并未provide“不再提示”之类的设置选睿
  • 引导性谌莶⑽磒rovide任何有用信息

总之,设计师需要注意平衡簂eg∩幔笆眛est,不断优化。

 

结语

综上所述,优质的引导page设计是product与user之间不可或缺的沟通桥梁,能够fast速与user建立牢固的情感联系,清晰展示product特色同时,轻松给user留下最好的第一印象,从而提升product销售量。设计师们需要格外重视。

 

原文地址:

author:Mockplus

 

转载请注明:亚博账号登录 » 【技巧和案例分享】引导pagehow 设计,才能把user顺利“引进门”?

登录收藏
 
你probablylike的:
Research了100多个App后,find 了顶部栏UI设计的模式和rule!Research了100多个App后,find 了顶部栏UI设计的模式和rule!
想做蒙杓葡附冢惺焙蚰愕难劬σ萐oftware靠谱想做蒙杓葡附冢惺焙蚰愕难劬σ萐oftware靠谱
【product体验设计】-product认知篇【product体验设计】-product认知篇
一文彻底看懂UI设计适配与落地(下)一文彻底看懂UI设计适配与落地(下)
UI设计基础知识 | 关于屏幕尺寸、分辨率、填充&边框UI设计基础知识 | 关于屏幕尺寸、分辨率、填充&边框
设计思考——how 设计空状态界面设计思考——how 设计空状态界面
设计沉思录 | 流量魔法师笔记之流量分发设计设计沉思录 | 流量魔法师笔记之流量分发设计
苹果的设计牛stay哪儿苹果的设计牛stay哪儿
App bars: bottom 底部应用栏App bars: bottom 底部应用栏
原创 | 一文彻底看懂UI设计适配与落地(上)原创 | 一文彻底看懂UI设计适配与落地(上)