首页

页面中不能承受之——多重引导如何处理?

资深UI设计者


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

有时一个新功能的上线,新内容的更新,会导致在一个页面中出现层叠式的引导内容,页面上大部分引导的触发时机也比较接近。那么,对于这种多重引导,要如何处理呢?


交互设计流程中,每当有新功能上线或者新的内容优化更新时,对应版本中一定会出现新手引导或者相应形式的提示内容,这在业界似乎已经成为一个约定俗成的东西。

毕竟,酒香也怕巷子深,在这个用户注意力被极度分散的时代,任何一个应用都不敢说,自己可以占据用户每天绝对时长的时间,让用户来“充分”自己挖掘每个版本的更新内容。

所以,“自荐”似的引导出现在了每一次的应用安装或者更新中。

在一次版本验收中出现了这样一个问题:最初的设计过程中,由于功能模块都是单独提出需求的,所以交互设计文档给出的时候也是拆分成不同的模块提交,可是实际验收时,当所有的新功能都在一个页面中呈现的时候,问题就出现了。

由于页面功能改版较大,既有新功能的上线,又有新内容的更新,所以在一个页面中出现了层叠式的引导内容,页面上大部分引导的触发时机也比较接近,因此就会在某些页面出现气泡、蒙层引导堆叠显示效果,让人防不胜防。

在于产品和开发同学沟通后发现,除了需要合理统筹调整触发时机以外,需求提出时并未严格区分每个引导是根据用户ID来判断,还是依据设备ID来判断,实现过程中统一默认以用户ID作为了引导出现的标准。

结果导致页面中出现引导堆积的情况出现,将引导的触发条件增加一条设备ID和用户ID,本质目的是将引导出现的时机更加合理化,在不影响用户操作流程的情况下向用户传递信息,提升用户体验。

如何解决这个问题?

还是需要从本源找起:一是引导的目的,二是触发的判断依据。

一、引导的目的

(1)新用户操作引导

主要是指用户第一次安装应用后出现的引导,告知用户核心操作方法和流程。

(2)功能更新引导

主要针对产品功能升级后,用来告知用户新功能的入口、操作方式等内容。

(3)与用户权益相关更新或说明

当更新内容与用户权益、身份属性内容相关时,需要出现适当的引导或者气泡形式的提示来告知用户,这种引导与用户的激励体系、产品玩法高度相关。

(4)常规功能操作引导

这种操作引导较为常见,每次更新应用或者新安装时都会出现,几乎成为例行出现的“常识性”引导,例如:页面中的手势操作引导等。

以上4中引导类型,在具体展示形式上主要包括前置引导和过程中引导两类。

前置引导:类似于引导页,在用户开始使用应用前直接告知用户更新的功能、玩法等enrich,一般都是全端出现的。

过程中引导:是指用户在实际使用到,或者进入该功能入口所处界面时出现的引导,这种引导需要用户的触发时机。而且由于出现在操作过程中,对操作本身具有阻碍的副作用,所以也只会出现一次而已。

了解了使用引导的目的,再来看一下触发引导的判断依据——设备ID和用户ID。

二、触发的判断依据

(1)设备ID

是指Device ID,是一台设备的识别标识,正常情况下,一款移动设备上的应用,无论切换都少个登录账户,其设备ID是不变的(刷机除外)。

(2)用户ID

即User ID 或者UID,是用户在登录应用后的身份识别码。用户ID产生的条件是需要用户注册生成账户后登录App,这样用户就可以想服务器发送和接收消息,服务器也可以通过UID来进行准确的push消息推送,用户与服务器之间可以进行交互。

除去一些纯工具类型的产品,大部分应用都需要用户注册登录后使用,当然,在这里就不深究是否强制用户登录等逻辑。

三、解决方案

明确了以上两方面内容,同时考虑引导使用的形式,其实也就不难判断,应该如何处理页面中多层引导的问题了。

(1)新用户操作引导/功能更新引导

这类引导如果使用前置引导类型,则信息传递是面向全局的。

当功能引导与用户个人信息无关,只是功能操作或者内容更新时,往往可以以设备ID作为推送判断标准,即一个设备,在一次应用安装周期中,出现一次即可。若用户在引导出现后,切换了登录账户,再次打开该界面时,不在出现重复的新手引导。

简单来说,此类引导的出现不需要区分用户信息,甚至不需要用户登录即可使用,所以基本上此类引导均已设备ID为触发判断的基本条件。

若此类引导使用过程中引导,则需要在实际使用过程中抓取适当的触发时机,此时如果出现多重引导时,则需要适当区分使用用户ID或者设备ID作为触发条件,从而将引导出现的时机合理区分。

(2)与用户权益相关更新或说明

此类引导一般需要细分用户身份信息,准确推送用户所需的内容。例如:会员与非会员之前在某个功能上有权益的差别,引导或者提示的内容则需要按身份不同来推送。使用前置形式时,可以根据实际需求调整判断依据;使用过程中中引导,这时则基本上需要使用用户ID作为触发依据,其他引导可使用设备ID用以区分不同引导。

(3)常规功能操作引导

『例行』出现的引导,不受场景限制,与用户权益关联度较低,因此以设备ID作为触发的基本判断依据即可。

四、小结

当页面功能过多的时候,难免会遇到多重引导的问题出现,除了通过展示形式、页面内的触发时机来区分以外,还可以通过设备ID和用户ID的作为触发依据来细化和区分引导出现的时机和场景。

不过这种判断方式也并不是一成不变的,需要灵活处理,例如:当引导出现时,该场景下用户处于未登录状态,此时服务器根本无法获取用户ID,在此场景下讨论设备ID还是用户ID显然毫无意义,需要重新调整引导出现的时机或者展示形式。

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


什么是设计?怎么设计?设计是什么?

蓝蓝设计的小编

有人问我什么是设计?什么是创意?之前我觉得创意是天马行空,设计是胡思乱想,想象力是造出一些不靠谱的东西,直到五年前,有一天晚上,突然觉得创意,设计像水,因为水无形,无色,无味,到杯子里就是杯子的形态,遇到咖啡就是咖啡的颜色,遇到糖就是糖的味道。水是最具想象力的东西,可以变成雨,变成冰。设计是科技与艺术的产物,是商业社会的产物,在商业社会中需要艺术设计与创作理想的平衡,需要客观与克制,需要借作者之口替委托人说话。设计即要符合审美性又要具有实用性、替人设想、以人为本,服务人类。平面设计则包含很多领域的创造性视觉艺术学科,即用视觉语言进行传递信息和理念。 

用户不按你的设计方案来?用腾讯这个模型检查产品!

资深UI设计者


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

在工作中,有时会遇到这样的一个现象:自以为是最优的设计方案,用户却并不会按照预期的方式使用。每每发生这样的事情都会让我很困惑,用户为什么不听话呢?


一、出现问题

试想这样一个场景:假设有电话打进来,你却没有接,试想一下可能有哪些原因导致了「没接电话」 的这个行为呢?

问题可能出现在三个方面:

  • 你发现打进来的是一个保险推销电话,不想接电话。这代表着你缺少接电话的动机,因此导致了没接电话的行为。
  • 你正在开会,不能接电话。这代表着你当前缺少接电话的能力,因此导致了没接电话的行为。
  • 你的手机静音了,没有听到电话。这代表着「电话来了」 这件事情并没有触达到你,缺少触发也能导致没接电话的行为。

通过上述的例子不难发现,用户的行为是受多种因素影响的,我们姑且将这些影响分为三类:动机、能力、触发。

二、案例分析

现在试着用这三个要素来分析一个身边的案例:虽然我知道这样不好,但是我依然热衷于打王者荣耀,这是为什么呢?

1. 动机

王者荣耀作为一款游戏,自带着「好玩」 的属性,可以让玩家在其中获取快乐,抵御痛苦;另外,来自朋友的邀请、因为玩游戏游戏而带来的谈资、通过提升段位获得的群体认同感等等都可能成为强有力的游戏动机。

2. 能力

王者荣耀成功的将 DOTA、LOL 等 MOBA 游戏从 PC 端迁到移动端,只要拥有一部智能手机和一个稳定的网络环境,随时随地都可以拿出手机玩上一局王者荣耀,MOBA 类游戏的设备门槛从未被如此降低;另外,游戏的操作、套路等等也被极度简化,没有了 PC 端 MOBA 游戏极高的学习门槛,让更多人可以具备加入这款游戏的能力。

3. 触发

来自朋友的邀请通常无法拒绝,这就是依托于社交的病毒式传播所具有的巨大威力,当茶余饭后,朋友喊你一起开黑时,一次有效的触发就已经达成了。除此之外还有来自官方的 push 消息、微信中的每周战报等等,这些都在不停地触发用户,让玩家不断强化对于游戏的印象。直到有一天,当你闲来无事的时候不由自主的想到拿起手机打一局王者荣耀,这时它就已经达成了来自玩家内部的触发,成为了你的一个习惯。

拥有强烈的游戏动机、具备参与游戏的能力、再加上合理的触发机制,这些因素共同造就了玩家热衷于打王者荣耀的行为。

三、分析影响因素

由上述案例可以看出,动机、能力及触发这三个因素对于用户的行为有着十分重要的影响,而且如果你仔细思考会发现,这三个因素不仅仅适用于上述的案例,而是可以用来解释绝大多数场景下用户行为产生的原因,所以接下来我们展开分析这三个影响用户行为的关键因素。

1. 行为动机的根源

用户的行为动机大致可以分为三种:

追求快乐、逃避痛苦:用户更加喜欢能够快速带来快乐的产品,例如微视等短视频产品,让用户通过快速消费几秒钟的短视频就可以马上获取快乐,这也是越来越多的用户沉迷其中的重要原因之一。

追求希望、逃避恐惧:用户也会为了追求希望/逃避恐惧做出许多下意识的行为。例如我曾经观察到,很多人在点击保存文件时会连续点击多次工具栏中的保存按钮,或者多次在键盘上按下「Ctrl+S」 的快捷键,这样的行为大概是害怕不小心丢掉自己的劳动成果。这种下意识的多次点击保存的行为,就是「追求希望、逃避恐惧」 的一个具体表征。

追求认同、逃避排斥:人是具有社会属性的,我们都会追求他人的认同,避免被他人排斥。因此在社交网站上的点赞、评论、转发等互动往往会给作者提供源源不断的创作动力,其本质上是人类追求他人认同的心理成为了强有力的驱动力。

2. 能力限制

用户的能力限制来自六个方面:时间、金钱、体力、脑力、社会偏差、非常规性。

前四种能力限制比较容易理解,在此不做赘述。

社会偏差,是指他人对该项活动的接受程度。例如曾经在社交平台中随处可见的「不转不是中国人」 、「为了家人转起来」 之类的绑架式传播,现在已经很少见了,因为大家都不喜欢这样的东西,所以当用户遇到类似的内容时,也不太容易选择转发了。

非常规性,是指该项行为与常规活动的匹配程度或者矛盾程度。例如大型超市会在用户的常规的行动路线上放置一些小商品,这样用户就很可能会产生计划外的购买行为,如果放置小商品的位置与用户常规的行动路线不匹配,甚至互相矛盾,显然就达不到引导用户产生额外购买行为的目的。

3. 触发方式

触发大致可以分为外部触发和内部触发两种。

外部触发可以理解为产品为了触达用户而做的事情,又可细分为四种:

付费型触发:通过付费的形式进行推广,最常见的就是广告,商家花钱做广告,使其产品让更多人知道。

回馈型触发:通过正向反馈获取的曝光,例如产品在应用商店的排行榜中位于榜首,自然会获得更多的触达用户的机会。

人际型触发:通过口口相传的方式触达用户。

自主型触发:产品自主产生的触达行为,例如新闻APP 每天在固定时间 PUSH 的新闻给用户,久而久之,即使一个不怎么经常看新闻的用户也会知道有这样的一个 APP 可以查看新闻。

相较于外部触发,内部触发则显得更加有价值。内部触发是指用户的内在情绪/情感等驱动而触发的用户行为,这是所有产品的最终目标。例如用户发现通过玩某款游戏可以治疗「无聊」 的情绪时,一旦其产生无聊的情绪,就会自然而然的想到玩这款游戏。这样产品就与用户建立了一个内在的良性联系。

外部触发往往是昙花一现,而内部触发才能真正让用户产生习惯。

总结

总结起来,用户的行为规律是有迹可循的,总体上符合这样的一个模型:

行为(Behaviour) = 动机(Motivation) + 能力(Ability) + 触发(Trigger)

如果一个产品/功能使用起来比较难,则需要用户有较高的动机,再加上合理的触发,才能让用户的行为触发成功;反之,如果用户的动机较低,则必须让产品/功能非常易于使用,再加上合理的触发,才能让用户的行为触发成功。动机、能力、触发三者共同制约着用户的行为,缺一不可。

因此,如果再遇到「用户不听话」 的情况,不妨用这个模型来检验自己的产品/功能是否存在问题:用户的使用动机是否较低?使用难度是否太大?是否合理的触达了用户?相信这样一轮检视下来,总会有一些收获的!

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


css样式表中的样式覆盖顺序,两个class同时存在会怎样?

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下

Css代码 

  1. #navigator {  
  2.     height: 100%;  
  3.     width: 200;  
  4.     position: absolute;  
  5.     left: 0;  
  6.     border: solid 2 #EEE;  
  7. }  
  8.   
  9. .current_block {  
  10.     border: solid 2 #AE0;  
  11. }  

查找一些教材中(w3schools等),只说css的顺序是“元素上的style” > “文件头上的style元素” >“外部样式文件”,但对于样式文件中的多个相同样式的优先级怎样排列,没有详细说明。经过测试和继续搜索,得知优先级如下排列:

 

1. 样式表的元素选择器选择越,则其中的样式优先级越高:

id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式

所以上例中,#navigator的样式优先级大于.current_block的优先级,及时.current_block是添加的,也不起作用。

2. 对于相同类型选择器制定的样式,在样式表文件中,越靠后的优先级越高

注意,这里是样式表文件中越靠后的优先级越高,而不是在元素class出现的顺序。比如.class2 在样式表中出现在.class1之后:

Css代码 

  1. .class1 {  
  2.     color: black;  
  3. }  
  4.   
  5. .class2 {  
  6.     color: red;  
  7. }  

而某个元素指定class时采用 class="class2 class1"这种方式指定,此时虽然class1在元素中指定时排在class2的后面,但因为在样式表文件中class1处于class2前面,此时仍然是class2的优先级更高,color的属性为red,而非black。

 

3. 如果要让某个样式的优先级变高,可以使用!important来指定:

Css代码 

  1. .class1 {  
  2.     color: black !important;  
  3. }  
  4.   
  5. .class2 {  
  6.     color: red;  
  7. }  

 此时class将使用black,而非red。

对于一开始遇到的问题,有两种解决方案:

1. 将border从#navigator中拿出来,放到一个class .block中,而.block放到.current_block之前:

Css代码 

  1. #navigator {  
  2.     height: 100%;  
  3.     width: 200;  
  4.     position: absolute;  
  5.     left: 0;  
  6. }  
  7.   
  8. .block {  
  9.     border: solid 2 #EEE;  
  10. }  
  11.   
  12. .current_block {  
  13.     border: solid 2 #AE0;  
  14. }  

 需要莫仁为#navigator元素指定class="block"

2. 使用!important:

Css代码 

  1. #navigator {  
  2.     height: 100%;  
  3.     width: 200;  
  4.     position: absolute;  
  5.     left: 0;  
  6.     border: solid 2 #EEE;  
  7. }  
  8.   
  9. .current_block {  
  10.     border: solid 2 #AE0 !important;  
  11. }  

 此时无需作任何其他改动即可生效。可见第二种方案更简单一些。 


UI配色整理

蓝蓝设计的小编

配色一直都是我的弱点,而且会在这方面纠结很久,相信有些朋友也会遇到此类问题;

所以花了点时间整理了关于配色的知识和方案,其中参阅了网站上很多设计师的文章,汲取精华,集中归类,更全面的总结;文章尾处均有参阅设计网站及设计师的备注。

纯干货:沟通秘诀!改多少次稿甲方才肯收货?

ui设计分享达人


“世界最远的距离不是生与死,而是设计师与甲方。”甲方反反复复地提出改稿的需求,设计师只能无尽头地改改改,这已经是业界的”常态“,今天的原创文章,我们一起来探讨一下,到底要改多少次稿,甲方才肯收货?!

云图项目设计思路分享

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

主要是对云图项目进行一些回顾,起到一个巩固的作用,望能通过这个总结讲述出设计在项目中的价值体现。

Image title

Image title

Image title

Image title

Image title

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

JavaScript 获取窗口属性

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

获取窗口属性

  • 查看滚动条的滚动距离 
    • window.pageXOffset/pageYOffset 
      • IE8及IE8以下不兼容
    • document.body/documentElement.scrollLeft/scrollTop 
      • 兼容性比较混乱,同时取两个值相加,因为不可能存在两个同时有值
    • 封装兼容性方法,求滚动轮滚动离getScrollOffset()

为了解决兼容性的问题,我们来封装一个函数:

<script type="text/javascript">
    function getScrollOffset() {
        if(window.pageXOffset) { x : window.pageXoffset, y : window.pageYoffset }
        else{
            return { x : document.body.scrollLeft + document.documentElement.scrollLeft, y : document.body.scrollTop + document.documentElement.scrollTop,
            }
        }
    }
</script>
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 查看视口的尺寸 
    • window.innerWidth/innerHeight 
      • IE及IE8以下不兼容
    • document.documentElement.clientWidth/clientHeight 
      • 标准模式下,任意浏览器都兼容
    • document.body.clientWidth/clientHeight 
      • 适用于怪异模式(向后兼容)下的浏览器
    • 封装兼容性方法,返回浏览器视口尺寸getViewportOffset()

为了解决兼容性的问题,我们来封装一个函数:

<script type="text/javascript"> function getSViewportOffset() { if(window.innerWidth) { return {
                w : window.innerWidth,
                h : window.innerHeight
            }
        }else{ if(document.compatMode ==="BackCompat") { return {
                    w : document.body.clienWidth,
                    h : document.body.clientHeight
                }
            }else{ return {
                    w : document.documentElement.clientWidth,
                    h : document.documrntElement.clientHeight
                }
            }
    }
</script>
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 查看元素的几何尺寸

    • domEle.getBoundingClientRect();
    • 兼容性很好
    • 该方法返回一个对象,对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标,right和bottom代表元素右下角的X和Y坐标。
    • height和width属性老版本IE不显示(人为解决:分别相减一下就能得出)
    • 返回的结果并不是”实时的”
  • 让滚动条滚动

    • window上有三个方法
    • scroll(x,y)在x轴、y轴上滚动的位置,scrollTo(x,y) 
      让滚动条滚动到当前位置,而不是累加距离(这两种方法是完全一样的)
    • scrollBy();累加滚动距离
    • 三个方法功能类似,用法都是将x,y坐标传入。即实现让滚动条滚动到当前位置。
    • 区别:scrollBy()会在之前的数据基础之上做累加。
    • eg:利用scroll()页面定位功能。
    • eg:利用scrollBy()快速阅读功能。

练习: 
做一个小阅读器,会自动翻页。

<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> 文本内容 <div style="width:100px;height:100px;background-color:orange;color:#fff;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:200px;right:50px;opcity:0.5;">start</div> <div style="width:100px;height:100px;background-color:orange;color:green;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:50px;right:50px;opcity:0.5;">stop</div> </body> <script type="text/javascript"> var start = document.getElement.getElementsByTagName('div')[0]; var stop = document.getElement.getElementsByTagName('div')[1]; var timer = 0; var key = true; //加锁,防止连续点start产生累加加速 start.onclick = function() { if(key) {
            timer = setInterval(function() { window.scollBy(0,10);
            },100);
            key = false;
        }
    }
    stop.onclick = function() { clearInterval(timer);
        key = true;
    } </script>
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

浅谈谷歌Circle UI

蓝蓝设计的小编

这段话是我补上的,我是设计师Johnson1949

提到谷歌原生系统UI大家有的人不是很喜欢,有的人可能已接触到安卓手机系统=谷歌系统UI其实,有一些偏颇,2014年的谷歌系统UI还是比较难看,不过自从采用material design风格以来,流畅度和色彩搭配,图标的设计真的不错了,目前小编用的是motonexus6,旨在体验谷歌系统UI。有需要的可以试一下。

UI设计闪屏/启动页/引导页制作技巧

博博

UI设计闪屏/启动页/引导页制作技巧

云和数据西安中心 2018-07-02 14:19:10

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

需要做一个“开屏页”

“哪个开屏页”

“带跳过的哪个”

“带跳过的。是一页的那个还是可以滑动的?”

“滑动的”

上面的对话不知道有没有很熟悉。

我们都知道APP在启动时会有一些页面先行展示,例如这样

UI设计闪屏/启动页/引导页制作技巧

通常来说我们会简单的把它们统称为“开屏页”或者“启动页”

但实际上,这种统称就像是把下面这些都小可爱都叫做“熊”一样不严谨。“熊”宝

宝们表示很委屈。

UI设计闪屏/启动页/引导页制作技巧

其实这些“开屏页”的交互方式其实并不是完全一样的,因此也承载着完全不同的功能,有着不同的名字:闪屏 Splash Screen、启动页 Launch Screen、引导页Onboarding Screen。接下来我们就来走进它们的“内心世界”,了解一下它们的真正用法。

01 闪屏 Splash Screen

定义:闪屏是每次启动过程中展示给用户的一个过渡页面,用于减缓用户在打开应用时等待的焦虑心情。

UI设计闪屏/启动页/引导页制作技巧
UI设计闪屏/启动页/引导页制作技巧

交互方式:闪屏通常是一张背景图片,无法进行交互,无法点击也无法跳转

劣势:无法跳转,只能进行展示作用,无法很好的承载营销需求

优势:展示时间不可控

使用建议:

避免包含太多文字字符(阅读速度慢的话可能还没看完就关闭了)

不用过去吸引用户的注意(干扰用户的本来目的)

不要做广告(干扰,且不能点击)

02 启动页Launch Screen

定义:启动页形式闪屏但拥有交互功能,常用于展示营销活动广告图片并引导用户点击

使用示例:常用与展示营销活动广告图片并引导用户点击

UI设计闪屏/启动页/引导页制作技巧

交互方式:

1、点击页面或按钮进入活动承载页

2、点击跳过,跳过启动页,进入首页,或N秒后自动消失

注:由于加载时间不确定,启动图通常会缓存并存在下次启动时使用

03 引导页Onboarding Screen

定义:用户安装或更新后首次启动时展示数个页面,常用于介绍应用的核心概念,功能玩法,使用场景,核心变更

使用示例:

UI设计闪屏/启动页/引导页制作技巧

交互方式:

1、左右滑动可以切换

2、最后一页页面可点击进入

注:首次打开才出现,之后就不在出现,清除用户数据,再次打开应用可以看到

使用建议:

1.轻易不要使用引导页,以免阻碍用户快速的使用体验

2.为了降低用户反感程度,引导页数通常越少越好(<5)

3.尽量提供“跳过”按钮

4.每页的文案不要超过9个字,如果有更多内容可以用小号文字进行辅助说明

(根据爱尔兰哲学家汉密尔顿观察发现的7±2效应,一个人的短时记忆至少能回忆出5个字,最多回忆9个,即7±2个。因此展示的文案要控制在9个字以内,超过后用户容易遗忘、出现记忆偏差。)

劣势:

增加了用户进入产品的时间,用户翻页过多,可能会失去耐心,降低好感度

04常规的启动流程

通常来说:开屏三兄弟顺序如下:

UI设计闪屏/启动页/引导页制作技巧

流程仅是建议的常规流程,通常来说闪屏是基本都有的,而启动页和引导页,如果产品需要,三个流程都走一遍也不是不可以,不过还是要尽量考虑到用户的忍耐度,不要让用户在漫长的“走流程”中失去了最初的兴趣。

小结

Appe曾经在《iOS人机交互手册》里建议:尽量不要展示闪屏或其它启动流程,避免干扰用户注意力然而,在马桶盖、地板砖甚至是美女身上都能打广告的今天,启动页/闪屏/引导页这三兄弟自带的“广告位”光环,让产品、运营们对其欲罢不能,几乎已经成为APP的启动标配,一起组成了现在常见的启动流程。它们共同承担起展示品牌性格,广告营销入口,功能介绍与引导的大任。

这让我想到最近看的一个段子,放出来给大家看看,仅做娱乐。

UI设计闪屏/启动页/引导页制作技巧

不过,正所谓存在即合理,既然市面上的启动流程都是“全套服务”,说明这么做定是符合特定阶段的市场需求的,所以作为产品设计师的我们在调侃过之后,还是要做好我们的本职工作:用专业知识解决实际问题。看过这篇文章后,相信

你又重新认识了开屏三兄弟,并且能更好地利用他们各自的特性好好服侍各位产品、品牌、运营大佬了~


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



日历

链接

个人资料

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

存档