简单三步 教你设计个精美启动页

  • 经验类型教程
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
42752 25 514 2017-04-27

最简单最快速的三步完成启动页设计方法,供大家没灵感时使用

一些新的教程已发,欢迎看官们赏脸啦:http://i.ui.cn/ucenter/118849.html


失踪人口回归~ 最近几个月忙了些项目,最近有空赶紧给大家分享说了N久的启动页设计教程,证明我还活着(*^__^*)

废话不多说,先上几张图:

Image title

以上这些图就是启动页,也叫闪屏页,通俗说就是大家打开APP时一般都会出现一两秒的那种图片,启动页的作用功能上来说是系统运行软件时,防止用户等待枯燥而特意制作的loding页面,后来被聪明的人们趁机作为APP的形象宣传图,或者是广告展示的一个方法。


当然本次教程不会教大家做多么复杂的启动页,这里给大家一个最简单最快速的三步完成启动页设计方法,供大家没灵感时使用;

现在开始三步教程,首先拿鄙人最近的一个羞羞案例来做示范(LOGO是客户山寨百度的,不要再说为什么这么眼熟...):

Image title


第一步、PS中新建750*1334画布(这是目前设计UI最通用的iPhone6尺寸),把背景色设成你的APP主色,我的是#00a4ff

Image title


第二步、把APP的标志放入界面中央偏上的位置,记得转成白色,LOGO是徽章之类转不了纯色的也没事,可以直接放

Image title


第三步、想一句装逼的宣传语放到LOGO下方,记得文字一定要跟我一样用手写字体,文字下方再画一条斜线。然后底部写行版权文字,完成!

Image title


------------------- 嗒嗒,正文开始!-------------------



你以为真的只有这么简单吗?以上只是引子,真正要分享给大家的是下面的扩展思路,设计师值钱的地方就在这里了!通过这个初版我们可以进一步发挥创意,通过微调发动头脑风暴做出真正让自己满意的启动页:


比如改动下布局,加点与APP主题相关的小元素?

Image title


依此类推,我们可以运用简单三步法发挥创意,并且完美运用~~   比如试试用图片来代替背景色?

Image title

比如试试反转背景为白色会产生什么效果?

Image title

比如试试换个字体改个布局会怎样?

Image title

Image title

本文的核心是希望帮助大家在设计没有灵感时,能通过我这种方法进行发散性思维从而快速完成任务,上面的这些引导页有的都是几年前设计的了,现在已经出现更多类型的启动页,下次有空再分享啦,看完文章自己动手试一试才能领悟到其中的奥妙哦!

(文中图片部份是网上找的,部份是我自己的,如果善用了您的作品请联系删除( ^_^ )/~~)


下一期分享预告:UI设计师需要注意的微信小程序与原生APP的设计区别 ↓

Image title


如果客官觉得本教程还行,欢迎关注并帮忙推荐哦 ↓

Image title


全部评论:25

  • 宋聚安

    2018-09-22 22:24

    @diaojimei: 很简单的,找一些线性图标,排列摆放在一起,组合的时候注意间距,还有匹配度,见缝插针就行啦~

  • diaojimei

    2018-03-14 23:05

    大神我想问下那个试试反转背景为白色案例第一个白色的背景纹理素材是什么素材呢,我每次想做类似这样的,总是做不出来,也找不到类似这样的素材,,不知道您是怎么做的。谢谢~

  • Maimeri

    2017-10-10 13:42

    大神终于出关了

  • CAOJING810

    2017-08-23 13:46

    大神 请教一个问题,下面那行手写体一般用什么字体,可以商用且好看的手写体求推荐

  • 宋聚安

    2017-08-09 10:39

    @清柠新檬: 不用的,有个PS切图插件叫做cutterman 用这个自动生成安卓和IOS的切图(其实我们现在只切一套图就行了,安卓和ios都用一个)

  • 清柠新檬

    2017-05-08 09:37

    @宋聚安: 大神大神,我遇到新问题:就是我做了一款750*1334尺寸的界面,做出来后是不是要切两套图?一份苹果750?一份安卓720?是不是这样切图的?小白一枚,求解答

  • 宋聚安

    2017-05-02 16:34

    @清柠新檬: 是UI中国出漏洞了,一修改一起的教程就会造成重新发布 我也很无奈~

  • 宋聚安

    2017-05-02 16:26

    @若年年: 听说是文鼎中钢笔行楷

  • 若年年

    2017-05-02 10:46

    那行手写字体 logo下面的 是什么字体??

  • 清柠新檬

    2017-04-27 16:46

    大神,最近都在循环发布已经发布过的干货或教程

  • 跃峰大松鼠

    2017-04-27 14:34

    干货,赞

  • 李哪吒

    2017-03-03 14:46

    手写字体是您手写的吗?还是可以下载的啊?

  • 凡纳森

    2017-02-27 10:04

    高级黑

  • 住在深海的鹿

    2017-02-13 17:50

    太赞了

  • 宋聚安

    2017-01-22 11:37

    @teeeeed: 这个都随意,启动页的方法有很多,这里列举个没灵感时的方法给大家

  • hvon你好

    2017-01-18 16:42

    总是那么实用 超级喜欢你的分享

  • teeeeed

    2017-01-11 15:14

    这种设计建议是产品已经拥有了一定的知名度的情况下使用,不知名的产品在推广的角度来看并不适合。会增加运营难度的, 个人拙见。

  • LeeRay

    2017-01-09 13:31

    @宋聚安: 哈 一定一定

  • UIdanceLL

    2017-01-09 11:35

    很棒啊

  • 茜茜公主

    2017-01-06 12:44

    哈哈 不错不错 简洁明了

  • 宋聚安

    2017-01-06 12:27

    @JasonGYF: 我才是首赞

  • 宋聚安

    2017-01-06 12:26

    @LeeRay: 看完贴,再动手练习练习才能成为大神哦

  • LeeRay

    2017-01-06 09:41

    听说看完帖回复会成为大神

  • JasonGYF

    2017-01-05 15:41

    首赞

  • 宋聚安

    2017-01-05 14:59

    消灭零回复~

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票