您现在的位置是:网站首页> 编程资料编程资料
不简单的启动画面 软件的启动画面介绍(图文)html5+CSS3的编码规范前端编码规范(4)—— CSS 和 Sass (SCSS) 开发规范Web前端开发规范2017(HTML/JavaScript/CSS)web前端开发规范文档(2014年版本)响应式Web之流式网格系统 在网页标题栏上和收藏夹显示网站logo的实现方法Visual Foxpro 6.0 中文版安装向导(图解)网站日志200 0 64状态码的分析(协议子状态)W3C是什么意思 W3C标准简介有关网站网页设计中的那些事儿分享
2021-09-07
1593人已围观
简介 小小的启动画面到底有什么学问,它对产品用户体验都有哪些影响?本篇文章做了一些分析和总结,希望对你有帮助。

小小的启动画面到底有什么学问,它对产品用户体验都有哪些影响?本篇文章做了一些分析和总结,希望对你有帮助。
什么是启动画面
当用户启动一个操作系统、软件或者应用程序的时候,首先出现的承载产品标识及相关信息的图形界面。例如,Office软件程序的启动画面,上面有产品的标识,发行公司以及一些可能的操作。

按照体验设计法则——让用户快速的开始任务,启动画面貌似是用户开始任务前的障碍。其实不然,实际情况是程序的启动是需要一点时间的,有时这个时间会比较长,比如操作系统的启动、大型制图或者办公软件的启动等等。而在这段时间里,如果显示黑屏显然不恰当,如果显示一段段正在运行的程序代码又过于机械(早期的DOS操作系统大家应该有所印象)。

1.用户不知道机器在做什么,会怀疑机器迟钝、效率低下
2.用户等待会有厌烦情绪,直接影响对机器的情感
为了解决这些体验问题,人们使用一个画面来代替后台正在运行的代码,换来人们对机器的好感。为了做到这一点,很多公司都用心良苦,动画越来越细腻,形式也越来越多。这里不赘述举例,主要谈谈移动应用客户端的启动画面(以iOS平台为例)。
移动应用程序的启动画面存在的环境
移动应用程序存在的环境是恶劣的,这是相对PC来说。即使产品设计支出对功能做了很多减法,即使工程师日日夜夜在做性能优化,应用程序的启动还是需要一些时间。启动画面在移动客户端产品存在的必要性不得而知。
移动应用程序启动画面的设计法则一 ——避免显示无关内容,包括一个漂亮的图,要尽力让启动画面变得有意义。对于用户来说,他们希望立即体验你的应用程序而不是欣赏一些无用信息。
如何理解这个法则,如何使用这个法则,下面的例子说明了一切,你也可以下载并体验这些应用,了解更多有关启动画面的秘密,欢迎随时交流。
场景一 品牌含义的延伸
如果启动时间不是一两秒那么短的时间,我们可以利用这个时间展示应用程序的品牌。但是不要只是展示品牌,最好能够结合应用程序所提供的服务,将品牌的含义延伸到画面中,带给用户一种亲切感,或者让用户了解到产品的文化,或者其他你想让用户了解的故事。
案例一 只是标识的设计。很多应用都是这样设计的。将自己的标识往中间一放,告诉用户我就是我。然后没有任何情感的进入了内容界面。有的时候,标识本身拥有质感,让画面还能充满视觉的期待,如果像bing这样,有点……




iphone上的某些应用程序采用了默认界面框架作为启动画面。用户会感觉应用程序响应很快——这一点在移动端非常有用,大多数应用程序没有这么做。如果加载时间过长,用户会认为是网络问题或者程序死机。利用界面框架作为启动界面,可以缓解用户对应用程序响应延迟的厌倦感。(一般这个界面是一张图,而不是真的控件组成的。)
案例一 谷歌应用程序在启动后,展现了一张简略的界面,有导航栏和标签栏。几秒后,搜索框出现,告诉你可以使用该应用了。值得注意的是,由于是一张假的图,所以不要将可用的功能或者可操作的模块做在这张启动画面上,误导用户程序已经可以使用。



也许有人认为没有品牌logo的启动画面感觉没有把品牌得到宣传。用苹果官方的解释,用户下载和打开你的应用的时候,就已经知道你的品牌了。你的品牌是否能够给用户留下好的印象,在于后续任务的用户体验,其中包括让用户立即享用你的服务而不需要任何等待。
场景三 过渡到有用的模块
如果你的应用程序需要用户在使用之前有必要的操作,你可以将之与启动画面结合起来,而不需要单独显示。这也是提升效率的一种做法。
案例一 将登录注册环节结合进来。当应用程序确定联网了以后,需要用户登录,则启动画面自动过渡到登录环节。Yahoo messenger、MSN做得都非常自然。这回让你的用户感觉到非常细心的设计品质,提升用户对应用程序的好感。(一般这类应用程序在用户第一次使用——未绑定帐号的情况下,会出现登录窗口,如果已经绑定帐号,并默认登录,启动画面会采取场景二中的方案。)


Twitter官方客户端在首次启动会直接打开“搜索模块”界面,只是在界面顶部导航栏下方切出一个区域给注册按钮。此时界面下方内容区开始刷新,展现出即时简约的信息。

使用适当的动画,可以让应用程序的启动更加震撼。务必要做到适当,用户不是每次都想在启动应用程序的时候欣赏一段短片,除非相当精彩而且有必要。
案例一 摄影画报应用程序在启动的时候,是一圈逐渐清晰的图片。随着图片一张张呈现,程序启动完成,进入内容列表界面。这种将应用内容作为启动元素的方案,让用户能够从启动那一刻开始,欣赏应用程序提供的服务。


移动应用程序启动画面的设计法则二——启动画面的出现,潜意识告知用户选择正确的手持方向。
•在iphone上,为了能获得更多内容,人们大多数是竖屏使用,所以iPhone桌面不提供横屏模式。如果你的应用程序只支持横屏,那么在显示启动画面的时候,就应该是横屏模式显示,这样直接告诉用户需要扭转屏幕,而不是进入到任务里面再告知用户。

在iPad上,如果你的应用程序,同时支持横、竖屏,则需要显示一副正确的启动画面——与用户当前的使用方向一致即可。

小小启动画面蕴藏着很多讲究吧~。很多人认为启动画面这类比较视觉的工作是视觉设计师的工作,孰不知产品任何一个环节都需要精明的策略,单凭视觉好看或者交互来做用户体验,永远是不够的,也是不可能的。切实了解用户体验对知识要求的综合性,才能真正做好用户体验,做好产品。
希望这篇文章能够对你设计产品有帮助,欢迎留言探讨,帮助我继续完善文章。
转载请注明出自”百度MUX”
相关内容
- Mobile app视觉传达的魅力(图文介绍)html5+CSS3的编码规范前端编码规范(4)—— CSS 和 Sass (SCSS) 开发规范Web前端开发规范2017(HTML/JavaScript/CSS)web前端开发规范文档(2014年版本)响应式Web之流式网格系统 在网页标题栏上和收藏夹显示网站logo的实现方法Visual Foxpro 6.0 中文版安装向导(图解)网站日志200 0 64状态码的分析(协议子状态)W3C是什么意思 W3C标准简介有关网站网页设计中的那些事儿分享
- CSS教程之通用的css hack简介通过CSS3的object-fit来调整图片适配尺寸的技巧简介CSS计数器counter()的用法简介CSS中的伪元素简介简介CSS中的各种选择符Markdown.css样式简介CSS3 Columns分列式布局方法简介定义css设备类型-Media Queries图表简介及使用方法css3背景图片透明叠加属性cross-fade简介及用法实例
- 利用HTML+CSS制作左上角卷角效果的网页的方法css实现元素居中的N种方法div水平布局两边对齐的三种实现方法waterfall瀑布流布局+动态渲染的实现页面中有间隔的方格布局如何完美实现方法css实现六种自适应两栏布局方式使用flex布局轻松实现页面布局的示例代码使用Flex布局实现头部固定内容区域滚动的方法详解flex布局下图片变形的解决方法详解flex布局与position:absolute/fixed的冲突问题Flex布局实现div内部子元素垂直居中的示例
- 利用CSS3参考手册和CSS3代码生成工具加速来学习网页制css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- 网页设计技巧:网站的首页设计对于能观众的影响html5+CSS3的编码规范前端编码规范(4)—— CSS 和 Sass (SCSS) 开发规范Web前端开发规范2017(HTML/JavaScript/CSS)web前端开发规范文档(2014年版本)响应式Web之流式网格系统 在网页标题栏上和收藏夹显示网站logo的实现方法Visual Foxpro 6.0 中文版安装向导(图解)网站日志200 0 64状态码的分析(协议子状态)W3C是什么意思 W3C标准简介有关网站网页设计中的那些事儿分享
- 360安全桌面主题的设计小结 360安全桌面风格设计轩辕剑 win7桌面主题 非常漂亮的WIN主题Project Hera Launcher Theme(多桌面主题图标包) v2.03 安卓版PE下桌面主题使用技巧解读Banx(桌面主题) for android v1.2.3 安卓版IOS7桌面主题 for Android v0.0.17 安卓版超萌猫咪桌面主题 中文官方安装版
- 关于交互设计中的默认值的设计要点浅谈原生页面兼容IE9问题的解决方案新版chrome浏览器设置允许跨域的实现css hack之\9和\0就可能对hack IE11\IE9\IE8无效css区分ie8/ie9/ie10/ie11 chrome firefox的代码解决CSS浏览器兼容性问题的4种方案常见的浏览器兼容性问题(小结)border-radius IE8兼容处理的方法浅谈遇到的几个浏览器兼容性问题base64图片在各种浏览器的兼容性处理 对常见的css属性进行浏览器兼容性总结(推荐)
- 栅格规范制作的方法介绍(图文教程)浅谈原生页面兼容IE9问题的解决方案新版chrome浏览器设置允许跨域的实现css hack之\9和\0就可能对hack IE11\IE9\IE8无效css区分ie8/ie9/ie10/ie11 chrome firefox的代码解决CSS浏览器兼容性问题的4种方案常见的浏览器兼容性问题(小结)border-radius IE8兼容处理的方法浅谈遇到的几个浏览器兼容性问题base64图片在各种浏览器的兼容性处理 对常见的css属性进行浏览器兼容性总结(推荐)
- 为博客添加“正在加载中”的过度特效的方法html5+CSS3的编码规范前端编码规范(4)—— CSS 和 Sass (SCSS) 开发规范Web前端开发规范2017(HTML/JavaScript/CSS)web前端开发规范文档(2014年版本)响应式Web之流式网格系统 在网页标题栏上和收藏夹显示网站logo的实现方法Visual Foxpro 6.0 中文版安装向导(图解)网站日志200 0 64状态码的分析(协议子状态)W3C是什么意思 W3C标准简介有关网站网页设计中的那些事儿分享
- 活动专题页信息表达法则--瞬间致胜的方法html5+CSS3的编码规范前端编码规范(4)—— CSS 和 Sass (SCSS) 开发规范Web前端开发规范2017(HTML/JavaScript/CSS)web前端开发规范文档(2014年版本)响应式Web之流式网格系统 在网页标题栏上和收藏夹显示网站logo的实现方法Visual Foxpro 6.0 中文版安装向导(图解)网站日志200 0 64状态码的分析(协议子状态)W3C是什么意思 W3C标准简介有关网站网页设计中的那些事儿分享