新2平台开户 新2平台开户 新2平台开户

App启动页制作、app启动页动画制作

作为一名UX/UI设计师,我们如何巧妙而有创意地将简单的图片、文字、图标、logo等常见元素组合起来,设计出让用户眼前一亮,忍不住想要尝试而不是离开的东西?直接地?Web 或移动应用程序启动页面怎么样?下面小编跟着小编的步骤来了解和分析12个最新最有代表性的Web/iOS/Android App启动页设计实例,看看在制作这样的原型时需要注意和牢记的相关技巧设计案例~

App启动页,又称闪屏页,最初是为了缓解用户等待Web/iOS/Android App数据加载的焦躁情绪而出现,后来被设计师巧妙地用于展示品牌文化、介绍服务特色等,并熟悉功能界面。设计被赋予了更丰富、更实用的作用。

然而,即使是一个简单的启动页,用图片、文字、不同的颜色来直接展示软件或产品功能文化,也会给用户带来完全不同的感受和体验。

那么,作为一名UX/UI设计师,我们如何才能巧妙而有创意地将简单的图片、文字、图标、logo等常见元素进行组合,设计出让用户眼前一亮,忍不住想要尝试的设计呢? ,而不是直接离开网络或移动应用程序启动页面呢?

下面跟着小编的步骤来了解和分析12个最新最有代表性的Web/iOS/Android App启动页设计实例,结合小编最常用的更快更简单的原型制作工具——Mockplus,介绍相关的技巧需要注意和请记住创建此类设计案例的原型。我希望能有所帮助:

1.启动画面

设计师:Luis Alves 亮点:结合标志的主题色,直观展示品牌,加深用户印象

虽然这个设计看起来很简单,但它采用了设计师最常用的app启动页设计方式,直接显示软件logo。结合其logo的主题色做相应的颜色变化,更直观的展示软件品牌,加深用户印象。

学习要点:结合软件、产品或logo主题色,直接展示品牌,加深用户印象

2.Dapprly闪屏动画

设计师:Ashish Chauhan 亮点:“Logo Motion”设计方法

静态或动态标识的直接显示或转换,也将是App启动页设计的重要变量和切入点。并且这种设计巧妙地加入了简单的动态效果,使软件标识的显示更加直观和动感。显然,与案例一的静态展示相比,这种设计会更具吸引力。

学习要点:结合其他特效动态显示启动页logo,增强吸引力

在启动页设计中,还可以组合各种特效(如发光、流体、波浪等特效)、动态效果(如旋转、弹跳、摇动等动态效果)、图标、颜色和形状的变化,更灵活的显示软件或产品标识。

如图所示,采用流畅的特效设计,增加了启动页logo的灵动感。

如图所示,利用旋转、颜色和形状的变化来增加启动页标识的可变性。

设计工作室的功能分区有哪些_设计分区图_冷烫分区图和排杠图

如图,使用发光的特效来增加启动页的吸引力。

原型制作技巧:

至此,Mockplus作为一款简单实用的原型制作工具,为您提供了非常强大的图标库(超过3000个简单易用的矢量图标),方便设计师更简单快捷地设计和添加需求。各种应用标志。

此外,其丰富的交互设计功能,如移动、显示和隐藏、缩放、调整大小、旋转、设置颜色、设置文本颜色、设置文本等各种交互命令,也为设计者提供了合适的标志动态效果或动画。方便。

而且,这样的交互设计特点,让设计者更容易创造出更具交互性和可操作性的启动页面,让用户在不知不觉中停留在启动页面上的时间更长,从而提升用户体验。

3.闪屏动画

设计师:Cuberto 亮点:“Logo功能轮播”设计方法

除了静态或动态直接展示Logo的方式外,动态展示产品或软件的功能、服务、特色、活动、广告等也是启动页设计的一个重要方向。

并且本次设计将软件logo和功能轮播的设计方式完美结合,让用户更直观、更快速、更自然地了解软件功能,为用户日后更快熟悉和使用软件打下基础。

学习要点:

1、启动页动态展示产品或软件功能,让用户快速、自然地熟悉软件

启动页动态展示APP或产品的功能、服务、活动和文化特色,不仅可以让整个设计更加丰富多彩。例如,结合不同的设计风格(插画风格和水墨风格)、不同阶段的产品/软件功能、不同特色文化的动态轮播等等,让启动页更加丰富多彩。而且,还可以让用户更快速、更自然地了解产品功能,为用户更快地理解和熟悉软件打下基础。

2.采用图文并茂的设计方式,使功能说明更加直观易懂

如图,采用图片配文字的方式,让功能介绍更加直观易懂

原型制作技巧:

这种“文字图片”的设计组合,设计师可以简单地使用Mockplus的“图片”或“GIF”组件,轻松添加所需的静态或动态图片/插图。并结合其“单行文字”和“多行文字”组件添加所需的说明文字,简单方便。

4. 闪屏家具应用

设计工作室的功能分区有哪些_设计分区图_冷烫分区图和排杠图

设计师:Dru 亮点:在启动页面直接展示产品,增加产品曝光率,增加产品销量

本设计作为一款家具销售的手机APP,在其启动页直接展示了产品的设计方法,在刺激用户购买欲望,增加产品销量方面也有明显的体现。

学习要点:在启动页直接动态展示产品,增加产品曝光率和销量

App启动页也是产品展示和曝光的重要平台。直接在启动页添加各种热销或明星产品的动态轮播,激发用户购买欲望,留住用户,最终实现产品销量增长。

原型制作技巧:

对于这种产品轮播设计,设计师可以直接使用Mockplus的“轮播”组件,动态循环展示产品相关的图片。也可以通过“图文按钮”的组合设计轻松实现。

如图所示,使用Mockplus的图片、文字和按钮组件制作一个产品或功能轮播页面。

5.启动画面

设计师:紫兔 亮点:文字与动画的相互呼应

这种设计最大的特点就是完美的实现了文字与动画的相互呼应。设计中加入的动感气球本身就具有随时“轰”的突然破碎的特性,这与软件自身logo的文字“轰”相吻合。一定程度上实现了文字的物化,更加直观,更容易打动用户。

学习要点:创造性地利用文字和动画呼应设计手法,加深用户印象

利用文字和动画的相互呼应,实现文字的实体化和可视化,将设计师想要传达给用户的信息更加生动直观。

6.新年闪屏

设计师:Nina Pereverzeva 亮点:启动页面设计结合新年假期主题特色

本次启动页的设计巧妙的融入了新年和节假日的元素,既保留了软件本身的整体设计,又大大提升了app的独特性和趣味性,能够有效吸引和留住用户。

学习点:结合节日特色等,制作系列启动页,增加其可变性设计分区图,吸引和留住用户

因此,在具体的web/iOS/android app启动页设计中,也可以结合节日、四季、24节气、12生肖、产品或功能特点,打造一系列的启动页,增加其可变性和趣味性,吸引和留住用户。

设计工作室的功能分区有哪些_设计分区图_冷烫分区图和排杠图

原型制作技巧:

在这方面,Mockplus拥有非常丰富的设计功能,确保您的启动页系列设计更加优质、独特。

例如,它提供了一个强大的组件库,可以通过简单的拖放来添加和编辑各种页面元素。其团队协作和管理功能,便于多方集思广益,更高效地改进和迭代启动页和APP设计。此外,它的8个测试和演示功能对于测试设计理念的实用性以及收集相应的设计反馈也非常实用。

7.Delta flight app概念——闪屏

设计者:George Vasyagin 亮点:启动页具有引导和登录注册等功能

在实际的应用设计中,设计者并没有严格区分启动页、引导页、登录注册页和欢迎页。

通过这样的设计,通过增加“登录”、“预订”、“航班详情”等选项,启动页本身也具有引导和登录注册的功能。一页多用,充分利用现有设计资源,同时降低设计成本。成本。并且还大大缩短了用户的等待时间,有效缓解了等待带来的负面情绪。

学习点:启动页设计有引导、登录、注册、欢迎等功能

此时,设计师可以从两个方面入手。一方面,如实施例7,设计者可以直接将App启动页和引导页/登录注册/欢迎页合二为一进行设计,更加直观实用。

另一方面,设计师也可以通过在App启动页和引导页/登录注册页/欢迎页之间快速跳转,为用户提供更快捷、更流畅的体验。

如图所示,启动页面和登录注册页面的组合设计。

原型制作技巧:

此时,为了实现App启动页、登录注册页、欢迎页、引导页的自动跳转,设计师可以简单的使用Mockplus的定时器来设计。

如图,结合Mockplus的定时器组件,实现了启动页面和登录注册页面的自动跳转。(点击了解更多原型制作细节)

8. 启动画面-排版动画

设计师:Nestor Ramirez 亮点:动态显示简单的文字字体和排版,激发用户好奇心

本次设计的亮点在于,设计者没有像往常一样在启动页使用图片来展示软件相关的标识或功能,而是直接用文字通过字体、布局和功能的动态变化来激发用户对App功能或功能的兴趣。颜色。对内容感到好奇,从而引导他们点击进入下一阶段,如登录、注册、阅读详情或产品购买。

设计分区图_设计工作室的功能分区有哪些_冷烫分区图和排杠图

学习要点:在启动页,使用更具吸引力或鼓舞人心的文字来引导用户继续使用该应用

虽然文字不如图片生动直观,但字体、布局、大小、颜色和动态效果对比变化的巧妙结合,也能有效唤起用户对软件的兴趣,让他们忍不住继续单击并使用该应用程序。

原型制作技巧:

此时,设计师可以简单地使用Mockplus的“单行文本”和“多行文本”组件,轻松更改字体、字号、颜色、边框、样式等属性。

而且,它可以帮助设计者轻松实现文字样式的收集、​​复用和共享组件样式库,添加鼠标悬停在文字上时颜色变化的“交互态”设计功能等,非常值得尝试。

9. iOS 应用程序的启动画面

设计师:Bogdan Nikitin 亮点:使用启动页讲述软件服务的概念

作为专为iOS网约车软件设计的启动页设计分区图,设计师结合各种图标、动画和标志,直观地诉说App将为用户提供快捷、便捷的网约车服务的服务理念。直观而有趣。

学习要点:利用启动页讲述app的服务或设计理念/故事,让用户快速记住软件或品牌

10.启动画面动画

设计师:Zhenya Rynzhuk 亮点:极简设计风格

本次设计采用了极简主义的设计风格,简单的线条、形状和文字的动态展示,对于分散用户的注意力,缓解用户等待时的焦虑感也非常有效。

学习点:采用极简设计风格

线条、形状、颜色、文字和动态效果的简单搭配,可以有效分散用户的注意力,让用户在不知不觉中打发等待时间,从而提升用户体验。

11.Splash screen desigual selfie 360​​ app

设计师:paco Jimenez diaz

设计分区图_冷烫分区图和排杠图_设计工作室的功能分区有哪些

亮点:直接展示用户的优秀作品,引导用户尝试

作为一款专为自拍软件设计的启动页,本次设计直接在页面中间展示其logo以加深品牌印象,同时通过添加动态背景图直接展示用户制作的优秀作品使用本软件,在吸引用户眼球的同时,也展示了其成品软件所能达到的优质效果,让用户忍不住想要尝试。

学习点:直接展示应用的优秀作品,引导用户试用

类似于相机、照片、食谱软件应用,设计者可以采用直接展示用户优秀作品的设计方式,用实例来证明软件的功能和特点,吸引用户试用。

12. 网络应用的 Cocolabs

设计师:顾珊

亮点:启动页面分区设计,提升页面性能

本次设计使用一张背景图,将启动页简单自然地分为两个分区。左侧主要展示其logo,方便用户快速记住其品牌。在右侧,添加适当的文本和按钮。简单说明APP的功能,引导用户点击试用或了解更多。简单实用。

学习要点:用色块、图片、网格对启动页进行分区,增强表现力。

与移动iOS或Android的启动页相比,Web应用程序的启动页更大,可以呈现更丰富的内容。因此,设计者可以对页面进行分区,逐一设计,扩展页面的功能,增强页面的表现力。当然,还要注意所有分区的统一性。

此时,通过不同色块、背景图片、网格的设计,可以轻松实现启动页的功能分区。

原型制作技巧:

设计师可以简单地使用Mockplus的“形状”或“面板”组件,通过设置不同的背景色来实现色块划分。轻松拖拽“图片”组件,实现图片分区。它的网格和自动填充功能还可以帮助你快速实现启动页的网格分区。

总之,希望这里分析的12个最新最有代表性的启动页设计实例,以及相应的原型制作技巧,能够对你有所帮助。

结论:

虽然设计师通常将web/iOS/Android app启动页作为品牌功能、广告宣传、服务文化的展示平台,但这并不意味着设计师只能从这些方面或想法出发进行思考或设计。融入更多设计师的原创设计,也能让它的app启动页轻松脱颖而出。当然,这并不是说简单的品牌、功能和文化展示不值得尝试。事实上,结合不同的运动效果、设计风格、配色方案和设计师的想法,一个简单的标识或功能展示也能让人眼前一亮。

总之,无论设计师最终的设计思路或方向是什么,都不要忘记及时将启动页设计制作成原型。当然,这必须借助一个得心应手的优质原型制作工具(如Mockplus)来及时测试其可行性和有效性。

希望这里介绍的相关软件启动页设计实例和技巧能够对您有所启发。