教程网big牛ui共享完毕课程源文件product a

第36课闪屏·引导·注册·登录主讲师：牛MO王课时课程大纲课程简介主讲导师第31

节功能图标一功能图标设计原则及规范，正负形图标实操牛MO王第32

节功能图标二利用矢量工具及图层样式设计扁平功能图标牛MO王第33

节天气图标设计拟物风格、扁平风格、线性风格三种天气设计方法及创作思路牛MO王第34

节UI

Kit

一利用图层样式设计一款播放器轻拟物化界面牛MO王第35

节UI

Kit

二设计扁平化和磨砂风格的Dashboard界面牛MO王第36

节产品实战一闪屏页面、注册页面和登录页面的设计方法及思考牛MO王第37

节产品实战二实战设计APP社交风格方向及原则牛MO王第38

节产品实战三实战设计APP新闻、贴吧页面风格方向及原则牛MO王第39

节产品实战四实战设计APP工具、统计页面方向及原则牛MO王第40

节交互动画实现动效基本原理应用技巧及PS简单的步骤实现的交互动画牛MO王每天一项技能成果预览设计思路设计步骤成果展示设计延展Class36本章总结什么是闪屏成果预览设计思路设计步骤成果展示设计延展Class36开机页Splashscreens又叫做启动页、闪屏页。本章总结闪屏的功能成果预览设计思路设计步骤成果展示设计延展Class36闪屏可以说是一款APP必备的、第一眼映入用户眼帘的存在。其主要功能是应用开启后，需要加载内部页面一些时间，作为读取等待状态的展示同时突出品牌标识或者广告，加深用户对于产品的印象。本章总结闪屏的重要规则成果预览设计思路设计步骤成果展示设计延展Class36闪屏绝对不是引导页、指引页，闪屏最重要的不同在于，它是不可操控的，无法进行点击操作，只能浏览。本章总结闪屏的设计思路成果展示设计延展Class36闪屏的设计其实并不难，基本上70%以上的应用都会采用：成果预览产品图标（icon）设计思路企业标识（logo）设计步骤广告语（slogan）广告（guanggao）本章总结什么是用户指引成果预览设计思路设计步骤成果展示设计延展Class36用户指引User

Guide又叫做引导页、指引页、欢迎页。123本章总结引导页的功能成果预览设计思路设计步骤成果展示设计延展Class36引导页面不是APP设计中的必备存在，

它是具有时效性、话题性、趣味性、介绍功能性的存在。会随时间和版本更新而不断更新迭代。比如手机QQ，手机

淘宝，闪屏完毕后就立刻进入APP本身，不会出现引导页。但是有些企业就会尤其重视，比如百度和爱奇艺，几乎每个月都会更新一次。LOGO本章总结引导页的重要规则成果预览设计思路设计步骤成果展示设计延展Class36引导页和闪屏页面完全不同，大多是由

2-4个页面组成，形式各异，侧重描述产品亮点，或者介绍近期活动的内容、版本升级增加的功能等等。可以操作，大多为了体验上的操作以向左划屏进行操作。1本章总结引导页的设计思路成果展示设计延展Class36本章总结引导页的设计空间非常自由，所以没有绝对的限定，常见的类型有：成果预览插画设计思路功能介绍设计步骤图片文字闪屏和引导页的设计类型成果预览设计思路设计步骤Class36本章总结闪屏和引导页大致可以归类为五种设计类型：品牌插画（侧重平面）故事场景（侧重手绘）功能介绍（侧重图形）成果展示平面广告（侧重摄影）设计延展创意动态（侧重视频）品牌插画Class36品牌插画为了加深用户对品牌的识别度，或者有自信广告语的大品牌企业。其形式言简意赅，简单粗暴，以企业LOGO、字体设计、广告语结构组成。难度：★☆☆☆☆推荐：★☆☆☆☆成果预览设计思路设计步骤成果展示设计延展执行：平面设计师、字体设计师、文案本章总结品牌插画Class36品牌插画为了加深用户对品牌的识别度，或者有自信广告语的大品牌企业。其形式言简意赅，简单粗暴，以企业LOGO、字体设计、广告语结构组成。成果预览设计思路设计步骤成果展示难度：★★☆☆☆设计延展推荐：★★★★☆执行：平面设计师、插画设计师、UI设计师本章总结品牌插画Class36品牌插画为了加深用户对品牌的识别度，或者有自信广告语的大品牌企业。其形式言简意赅，简单粗暴，以企业LOGO、字体设计、广告语结构组成。成果预览设计思路设计步骤成果展示难度：★★★★★设计延展推荐：★★★★★执行：平面设计师、插画设计师、UI设计师本章总结故事场景Class36成果预览设计思路设计步骤成果展示设计延展故事场景在某个阶段或者某个节日里，会开展一些活动，或者纪念某些情况，所以会特别设计一些故事让用户感受到产品的情怀。也有创作一些故事性的画面来吸引用户，即时性比较强，同时风格多样化，要求有一定的美术及手绘能力。难度：★★★★☆推荐：★★★★☆执行：插画设计师本章总结故事场景Class36成果预览设计思路设计步骤成果展示设计延展故事场景在某个阶段或者某个节日里，会开展一些活动，或者纪念某些情况，所以会特别设计一些故事让用户感受到产品的情怀。也有创作一些故事性的画面来吸引用户，即时性比较强，同时风格多样化，要求有一定的美术及手绘能力。难度：★★★☆☆推荐：★★★★☆执行：UI设计师、插画设计师本章总结故事场景Class36成果预览设计思路故事场景在某个阶段或者某个节日里，会开展一些活动，或者纪念某些情况，所以会特别设计一些故事让用户感受到产品的情怀。也有创作一些故事性的画面来吸引用户，即时性比较强，同时风格多样化，要求有一定的美术及手绘能力。设计步骤成果展示难度：★★★★☆设计延展推荐：★★★★★执行：UI设计师、插画设计师本章总结功能介绍Class36成果预览设计思路设计步骤成果展示设计延展本章总结功能介绍随着每次产品版本的功能迭代，都会增加或者改变一些新功能以及交互体验，即作为亮点，也作为改变用户习惯的提醒，都可以放在最前面告诉用户我们做了些什么。难度：★☆☆☆☆推荐：★★★☆☆执行：UI设计师功能介绍Class36成果预览设计思路设计步骤成果展示设计延展功能介绍随着每次产品版本的功能迭代，都会增加或者改变一些新功能以及交互体验，即作为亮点，也作为改变用户习惯的提醒，都可以放在最前面告诉用户我们做了些什么。难度：★☆☆☆☆推荐：★★★☆☆执行：UI设计师本章总结功能介绍Class36成果预览设计思路设计步骤成果展示设计延展功能介绍随着每次产品版本的功能迭代，都会增加或者改变一些新功能以及交互体验，即作为亮点，也作为改变用户习惯的提醒，都可以放在最前面告诉用户我们做了些什么。难度：★★★☆☆推荐：★★★★☆执行：UI设计师本章总结功能介绍Class36成果预览功能介绍随着每次产品版本的功能迭代，都会增加或者改变一些新功能以及交互体验，即作为亮点，也作为改变用户习惯的提醒，都可以放在最前面告诉用户我们做了些什么。设计思路设计步骤成果展示难度：★★☆☆☆设计延展推荐：★★★★★执行：UI设计师本章总结平面广告Class36成果预览设计思路设计步骤成果展示设计延展平面广告如果你的公司属于土豪公司，花得起钱来聘请明

星等来做代言，再雇佣一些摄影团队或者A4广告公司执行创意，把超帅的广告海报置入到手机中，那么要恭喜你，可能会相对轻松一些。不过不排除让你PS照片这种可能性。难度：★☆☆☆☆推荐：★★☆☆☆执行：广告设计师、平面设计师、UI设计师本章总结平面广告Class36成果预览设计思路设计步骤成果展示设计延展平面广告如果你的公司属于土豪公司，花得起钱来聘请明

星等来做代言，再雇佣一些摄影团队或者A4广告公司执行创意，把超帅的广告海报置入到手机中，那么要恭喜你，可能会相对轻松一些。不过不排除让你PS照片这种可能性。难度：★★☆☆☆推荐：★★★☆☆执行：广告设计师、平面设计师、UI设计师本章总结平面广告Class36成果预览设计思路平面广告如果你的公司属于土豪公司，花得起钱来聘请明

星等来做代言，再雇佣一些摄影团队或者A4广告公司执行创意，把超帅的广告海报置入到手机中，那么要恭喜你，可能会相对轻松一些。不过不排除让你PS照片这种可能性。设计步骤成果展示难度：★☆☆☆☆设计延展推荐：★★☆☆☆执行：广告设计师、平面设计师、UI设计师本章总结创意动态Class36成果预览设计思路设计步骤成果展示设计延展本章总结创意动态如果你的公司属于追求高逼格的公司，那么很有

可能会采用这样的创意形式。通常是通过拍摄短

小的视频或者采用一些非常具有动效特色的设计，来提升整个效果。展现形式精彩耐人寻味，多用于社交网络。难度：★★★★☆推荐：★★★★☆执行：摄影师设计要点Class36素材的拼凑不是一个好的选择不要让你的背景添加无所谓的透明度素材、炫光图片成果预览本章总结设计思路设计步骤要让视觉有中心重点而不是随意成果展示设计延展我要吐槽Class36素材繁多没有重点背景花哨成果预览本章总结设计思路设计步骤点击按钮可以设计的更好成果展示跳过按钮略显尴尬设计延展我要吐槽Class36广告永远是最讨厌的闪屏没有之一尤其是不小心点击还跳转的成果预览本章总结设计思路设计步骤这是买饮料送李晨模型吗？成果展示设计延展我要吐槽Class36我已经知道是携程的了还来logo整体色彩繁多，比例太平均成果预览本章总结设计思路设计步骤网页设计感强烈成果展示设计延展注册页面、登录页面Class36成果预览设计思路设计步骤成果展示设计延展注册页面Register登录页面Login本章总结注册页面Class36成果预览设计思路设计步骤设计延展要短要小要快成果展示本章总结登录页面Class36成果预览设计思路设计步骤设计延展一次登录无需再登依旧短小快可进可退成果展示本章总结如何排版？Class36成果预览设计思路设计步骤成果展示设计延展用户名密码登录用户名本章总结密码登录上面Or下面用户名输入密码注册确认密码哪里有问题？Class36成果预览设计思路设计步骤成果展示设计延展用户名密码登录注册头像本章总结找回密码返回登录上传头像已有账号登录和注册需要设计多少页面？Class36成果预览设计思路设计步骤成果展示设计延展本章总结2-34-56-78-99-1010+注册页面、注册按钮不可用、用户名及密码无效、注册成功页面登录页面、登录按钮不可用、用户名及密码无效、登录成功页面找回密码、找回按钮不可用、找回密码失败页面、找回密码成功页面无网络状态……我要吐槽成果预览设计思路设计步骤Class36本章总结注册和登录、找回密码间的来回跳转必须要有找回密码时刻让用户知道自己处在什