UI第5章App界面设计实战课件

1、第5章 App界面设计实战本章介绍：App界面设计是产品用户体验里非常重要的一环。本章对App界面设计中的闪屏页、引导页、首页、个人中心页、详情页以及注册登录页系统讲解与演练。通过本章的学习，读者可以对App界面设计有一个比较深入的认识，并快速掌握绘制App界面的规范和方法。第5章 App界面设计实战本章介绍：掌握App闪屏页掌握App引导页掌握App首页掌握App个人中心页掌握App详情页掌握App注册登录页学习目标掌握App闪屏页学习目标掌握美食类App闪屏页的绘制方法掌握美食类App登录页的绘制方法掌握美食类App首页的绘制方法掌握美食类App搜索页的绘制方法掌握美食类App食品详情页的

2、绘制方法掌握美食类App购物车页的绘制方法技能目标掌握美食类App闪屏页的绘制方法技能目标品牌推广型活动广告型节日关怀型5.1 闪屏页品牌推广型5.1 闪屏页品牌推广型闪屏页是为表现产品品牌而设定。基本采用“产品logo+产品名称+产品”的简洁化设计形式。1号店App（左）闲鱼App（中）蚂蚁财富App（右）的品牌推广型闪屏页5.1.1 品牌推广型品牌推广型闪屏页是为表现产品品牌而设定。基本采用“产品log活动广告型闪屏页是为推广活动或广告而设定，通常将推广的内容直接设计在闪屏页内。多采用插画以及暖色的设计形式，用以营造热闹的氛围。百度网盘App（左）百度浏览器App（中）知乎App（右）的活

3、动广告型闪屏页5.1.2 活动广告型活动广告型闪屏页是为推广活动或广告而设定，通常将推广的内容直节日关怀型闪屏页是为营造节假日氛围同时凸显产品品牌而设定的。多采用“产品logo+内容插画”的设计形式，使用户感受到节日的关怀与祝福。闲鱼（左1）美图秀秀（左2）口袋兼职App（左3 ）的节日关怀型闪屏页百度钱包App（左4）QQ音乐App（左5 ）QQ浏览器App（左6 ）的节日关怀型闪屏页5.1.3 节日关怀型节日关怀型闪屏页是为营造节假日氛围同时凸显产品品牌而设定的。功能说明型产品推广型搞笑卖萌型5.2 引导页功能说明型5.2 引导页引导页是用户在第一次或经过更新，打开App看到的一组图片，通

4、常由3-5页组成。引导页起到了在用户使用App之前，提前帮助用户快速了解App的主要功能和特点的作用，可以细分为功能说明型、产品推广型、搞笑卖萌型。5.2 引导页引导页是用户在第一次或经过更新，打开App看到的一组图片，通高德地图App的功能说明型引导页功能说明型引导页是引导页中最基础的，主要对产品的新功能进行展示，常用于App重大版本的更新中。多采用插图的设计形式，达到短时间内吸引用户的效果。5.2.1 功能说明型高德地图App的功能说明型引导页功能说明型引导页是引导页中最京东商城App的产品推广型引导页5.2.2 产品推广型产品推广型引导页是表达App的价值，让用户更了解这款App的情怀。

5、多采用与企业形象和产品风格一致的生动化、形象化设计形式，让用户感到画面的精美。京东商城App的产品推广型引导页5.2.2 产品推广型产品搞笑卖萌型引导页5.2.3 搞笑卖萌型搞笑卖萌型引导页是引导页中难度较高的，主要站在用户的角度介绍App的特点。多采用拟人的夸张设计形象及丰富的交互动画，让用户身临其境。搞笑卖萌型引导页5.2.3 搞笑卖萌型搞笑卖萌型引导页是引列表型网格型卡片型综合型5.3 首页列表型5.3 首页首页又称为“起始页”，是用户使用App的第一页。首页承担着流量分发的作用，是展现产品气质的关键页面，可以细分为列表型、网格型、卡片型、综合型。5.3 首页首页又称为“起始页”，是用户

6、使用App的第一页。首页承担着流英国设计师George Gliddon创作（左）今日头条App（中）由俄罗斯设计师Alexander Zaytsev创作（右）列表型首页是在页面上将同级别的模块进行分类展示，常用于表现数据展示、文字阅读等方面。采用单一的设计形式，方便用户浏览。5.3.1 列表型 英国设计师George Gliddon创作（左）今日头条Ap网格型首页是在页面上将重要的功能以矩形模块的形式进行展示，常用于工具类等方面。采用的统一矩形模块的设计形式，刺激用户点击。天天P图App（左）Word App（中）墨刀App（右）5.3.2 网格型网格型首页是在页面上将重要的功能以矩形模块的形

7、式进行展示，常卡片型首页是在页面上将图片、文字、控件放置于同一张卡片中，再将卡片进行分类展示，常用于表现数据展示、文字阅读、工具使用等方面。采用的统一的卡片设计形式，不仅让用户一目了然更加强内容的点击欲望。SaturnCube团队创作（左）微信读书App（中）翻译大全App（右）5.3.3 卡片型卡片型首页是在页面上将图片、文字、控件放置于同一张卡片中，再综合型首页是由搜索栏、Banner、金刚区、瓷片区以及标签栏等组成的页面，运用范围较广，常用于电商类、教育类、旅游类等方面。采用丰富的设计形式，满足用户的需求。1号店App（左）途牛旅游App（中）翻译大全App（右）5.3.4 综合型综合型

8、首页是由搜索栏、Banner、金刚区、瓷片区以及标签栏5.4 个人中心页个人中心页是展示个人信息的页面，主要由头像和信息内容组成。个人中心页有时也会以抽屉打开的形式出现。淘宝App（左）闲鱼App（中）滴滴出行App（右）个人中心页5.4 个人中心页个人中心页是展示个人信息的页面，主要由头5.5 详情页详情页是展示App产品详细信息，用于用户产生消费的页面。页面内容较丰富，以图文信息为主。京东商城App（左）途牛App（中）36KrApp（右）详情页 5.5 详情页详情页是展示App产品详细信息，用于用户产生5.6 注册登录页注册登录页是电商类、社交类等功能丰富型App的必要页面。页面设计直观

9、简洁，并且提供第三方账号登录，国内常见的第三方账号有微博、微信、QQ等，国外常见的第三方账号有Facebook，Twitter，Google等。Done App（左）智联招聘App（中）36Kr App（右）注册登录页 5.6 注册登录页注册登录页是电商类、社交类等功能丰富型A5.7 课堂案例制作美食到家App使用移动工具移动素材，使用椭圆工具和圆角矩形工具绘制图形，使用投影和渐变叠加命令为图形添加效果，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用横排文字工具输入文字。效果图 5.7 课堂案例制作美食到家App使用移动工具移动素材5.7 课堂案例制作美食到家App效果图 5.7 课堂案例制作美食到家App效果图 效果图使用移动工具移动素材，使用椭圆工具和圆角矩形工具绘制图形，使用投影和渐变叠加命令为图形添加效果，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用横排文字工具输入文字。5.8 课堂练习制作Delicacy APP 效果图使用移动工具移动素材，使用椭圆工