设计启动页

1、启动页常见错误适配方式：被拉伸、留白过多、信息不完整

2、启动页正确适配方式：超出部分裁剪、为不同比例配图、使用切图弹性适配、图文分离。

3、剪裁：① 横向裁剪
        1) 保持图片比例不变，屏幕高度固定，裁剪左右超出屏幕部分。
       【优势：图片始终撑满这个屏幕，页面相对协调，屏幕资源可以最大化利用。】
       【使用场景：适用于全屏的启动页，根据屏幕比例适配。】
        2) 设置屏幕内图片裁剪比例，裁剪左右超过屏幕部分
       【优势：屏幕底部展示品牌 logo 有助于提升品牌熟悉度 ，相比于全面启动页，
         左右裁剪宽度相对少一些，信息展示更完整。】
       【使用场景：适用于品牌展示，在适配的时候需要先设定裁剪比例/logo展示区域
         高度，然后根据屏幕剩余区域适配。】
         
         ② 纵向裁剪
         1) 屏幕宽度固定，高度根据最大屏幕比来设计，主要信息区域在最小屏幕比里
            即可，根据不同的屏幕，对图片高度进行裁剪。
        【优势：这种方式的优点在于当屏幕比例更大时，仍可以使用一张图纵向裁切方
          式且开发成本不高。】
        【使用场景：适用于中间信息较多，不合适裁切的页面。】 
        
        ③ 为不同比例配图
        1) 不同比例的图精简成三类，适配方式和纵向裁剪有些类似，当实际屏幕比例
           接近这三种之一的时候，将用最接近的图进行裁剪。
        【优势：由于提供了多种比例的图，页面的精细程度相对较高，不存在被裁剪的
          情况。】
        【使用场景：适用于默认启动页、新手引导图等，不常进行更改的图，可以储存在
          本地。】
         
          ④ 使用切图弹性适配
          1) 在适配的过程中，可以通过弹性适配的方式拉开 logo 与 slogan 之间的
             间距，达到协调的效果。
        【优势：可以通过两端四套切图（@2x、@3x、_xh、_xxh）适配所有机型，都可以
          完美展示。】
        【使用场景：适用于页面元素可以通过间距弹性适配的，不合适复杂页面。】
         
          ⑤ 图文分离
          1) 图文分离，再组合的方式相对来说复杂一些。通常来说，图片使用等比例
             放大裁剪，文字需要根据页面位置定义。
        【优势：文字始终相对于屏幕边距位置出现，不会被裁剪。图文分离还可以添加
          动效，让启动页更生动。】
        【使用场景：适用于文字信息相对而言比较重要的页面，文字可以独立于背景做
          单独效果。】

4、主流样式：纯Logo、Logo+宣传语、Logo拓展、意境化图片、产品相关图片、插画、
            短视频

5、纯Logo
   1) 最简单直接型。方法是直接放产品的Logo，背景提取产品Logo主色调，或者纯白色。
   【这样极其“简单粗暴”的方式，适用一些自身的Logo辨识度较高，众人熟知，不需要
     过多宣传包装。】

6、Logo+宣传语
   1) 比上一种稍微丰富一点的是配上Logo和宣传语，宣传语经常会用手写体显示。
  【或许你会发现很多这种方式的App会将元素靠界面底部布局。主要是因为产品App为盈
    利会和别的企业商业合作，于是在第二页放置其他企业的广告页或者宣传页，在底部布
    局，可保证前后框架统一，过渡自然顺畅，也方便了程序员工作。】
  【需要注意一点是第二页的广告必须少于5秒并加跳转的点击按钮，毕竟用户对于广告这
    类从心里还是持排斥态度的。】

7、Logo拓展
   1) 单纯放Logo+宣传语的画面任然留有大部分空白空间，我们可以针对产品的Logo，
      提取相关元素，添加细节重新刻画出新图形或图标，填充界面中空白部分。

8、意境化图片
   1) 选择一张符合产品功能调性的图片，能够像电影场景的经典桥段一般给用户印象深
      刻。找一张完美契合的图并不容易，这一种设计非常考验设计师的想法。

9、产品相关图片
   1) 选择与产品相关的图片，可以直截了当告诉用户产品的功能和内容。一些电商类产
      品用此类居多。      

10、插画插画
    1) 是以绘画的艺术方式融入了设计师自己的创造力传递情感，特色鲜明，更容易拉
       进产品和用户的距离。一些比较具有特点的产品会运用插画类启动页。

11、短视频
    1) 短视频形式的启动画面非常少见，视频能够比图片拥有更多的信息，这一种可以
       促使用户加深对产品自身的理解印象。