电商UI养成-教你做个启动页

温馨提示：满满干货，要耐心看完哟

开始还是会讲一讲UI是啥，这类内容其实网上有很多，百度百科也做了挺明确的解释，为什么还要讲呢？

我是这么想的，好像要讲一个内容都是从一个概念开始，总不能我先甩一个百度给你，你先自行百度再来听我说，那你还找我干嘛。

我所理解的UI，看起来挺高级一个词，中国人其实对这种英文起名的东西都有种蜜汁高级的感觉。

当然，也有部分原因是干他的人工资都高，至少比看起来干的差不多活的美工高，这就让同样在PS上搬砖的美工不爽了，纷纷学起了UI！

其实我个人感觉UI 就是高级美工啊，或者是这个时代对美工得另一个称呼。

***************************************我 是 分 割 线*********************************************

好啦 我认真讲  

UI 的全称User Interface ，广义上理解呢是系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可以接受形式之间的转换。

这话看起来是不是挺难理解的，好像一下子这些字我都认识，连在一起就不知道他的说啥，我帮你翻一下，

就是，程序员写了一堆超级厉害的代码，要拿给咱们不懂代码的老百姓看，咱看着一堆字母，数字和小符号，

一脸黑人问号，what are you 让我看啥呢？ 这时候就需要我们给他弄一个接口，把程序员写的让老百姓看懂。

那具体做什么呢？狭义的理解就是我们要做的内容，在电子设备上所看到的界面，不管是命令行方式，或者图形方式，看图

这些都是UI ，所有电子设备上呈现的界面，都称之为UI 。

已经知道UI是啥了，那UI 要做啥?

UI 主要是做软件的操作逻辑、人机交互、界面美观的整体设计。这些新词是不是又看不懂了 看图

操作逻辑也叫做操作流程，实际工作中，这个活儿基本都是产品经理完成的，也有不靠谱的公司让UI一个人挑起整个项目的大梁，所以，也要懂。

一个项目从老板一拍脑袋开始，几个高层领导带着产品经理在会议室天马星空之后，产品经理的活儿就来了。他

得提炼老板的话，那些能实现，那些不能实现，然后画出一个操作流程出来，先纸上谈兵的看看这个完整的流程能不能实现老板一个亿的小目标。

然后就是实现人机交互，也就是画原型图。

这种黑白的线框图是不是就很熟悉了，一般交接给UI的工作，都是以这样的形式。

拿到原型之后不要慌，也不要兴奋，先冷静一下！ 产品经理有没有带着你开过会，要是没有，麻溜的找产品去，态度要诚恳，语言要温暖，嘴要甜，腿要勤，不沟通的后果就是无限的修改，很可能还会遇到撕逼大战。那么，沟通什么呢？ 如果你也不知道要问啥，教你一招，“hi，我拿到你的稿子啦，我也认真看过了，你还有什么要告诉我的，或者给我讲讲这个设计稿？”这个过程中就可以问问他对这个预期啊，想要的效果啊，风格啊，之类种种吧。

好了，原型图也拿到了，沟通也完成了，接下来，就是干我们的分内事的时间了！

界面美观

UI 要做的界面是综合类的设计作业，即要会画图标，给界面上色，也得画线框，画插画，就是江湖上传说的，所有和美术有关的都去找美工。分析一下，一个普通的电商APP，需要的页面分别有首页，二级活动页，分类；购物车页面，个人中心页面。界面这么多，每个界面都不一样，怎么做呢？

启动页是啥？启动APP时，一般都会是一张含有LOGO的图片。这张图片叫做启动页面。这个启动页面是必须、一定需要的吗？有什么作用？

苹果官方对于iOS启动页的设计说明：
为了增强应用程序启动时的用户体验，您应该提供一个启动图像。启动图像与应用程序的首屏幕看起来非常相似。当用户在主屏幕上点击您的应用程序图标时，iPhone OS会立即显示这个启动图像。一旦准备就绪，您的应用程序就会显示它的首屏幕，来替换掉这个启动占位图像。请记住，启动图像并不是为您提供机会进行艺术展示；它完全是为了增强用户对应用程序能够快速启动并立即投入使用的感知度。

启动页的设计角度分为三种

第一种，苹果自带的应用和国外的应用中用到的比较多，就是和应用启动后的首页浑然一体。

这一类型的启动页都使用了一张程序假图作为程序的启动过渡，让用户以为程序已经可以使用了。

这种启动页国内几乎不用，我阴谋论的猜测的原因可能是咱们人多服务器慢，一个启动页通常都有3秒时间，弄一个和首页差不多的启动页，里面又没有内容，用户一看啥都没有还停留了3秒，估计内心有个善良的声音会问，难道我手机卡了？！

第二种，品牌信息传递
品牌传递类的启动页相对较简单，基本采用产品名称+产品标志语为结构，简单突出主题即可。这种是目前用的最多的。

    

    

看到这么多例子你还以为启动页很难，其实这类的启动页简单的要死。

3合1，简单搭配就能组合出一个合格的启动页。

启动页的三要素，1，你的品牌 2，你的slogan 3, 你的产品风格，让用户对这款APP 有一个初步的了解。

第三种 情感故事共鸣类
通过一张短短的启动页去说一个故事或是表达情怀，这不是一件容易的事情。所以这类的启动页在实际的设计中慢慢演变为引导页。（啥是引导页？引导页就是新下载的APP，第一次打开的时候出现的那几张在讲故事的页面。）

一些成熟的APP，在一些节日，节气，纪念日这种时间也会更改启动页，这时候要用到的就是这类情感故事类的启动页啦。

 

  

  

这类的启动页看例子是不是就感觉比第二种难很多，是不是感觉慌了，”完蛋！我不会了。”

别怕，分析一下，这是不是就是竖着放的活动banner呢？

任何一个这类的启动页都需要突出一个主题，也就是噱头。因为这里是一个很好的打广告，表情怀，吐衷肠的好地方。有了噱头，就去找相应的主题，想要表现的产品，想要刻画的内容，在加上你的品牌，你的slogan，在使用第二种启动页制作方法就完成啦。是不是也变得很简单。

感谢收看！下期再见！