10-南丰鼎轩项目餐饮类Pad端App设计-2.pptx

《10-南丰鼎轩项目餐饮类Pad端App设计-2.pptx》由会员分享，可在线阅读，更多相关《10-南丰鼎轩项目餐饮类Pad端App设计-2.pptx（31页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、南丰鼎轩项目餐饮类Pad端App设计-2课程回顾n餐饮类App的相关理论n南丰鼎轩项目需求及项目分析n视觉设计思路和技巧n南丰鼎轩开屏启动页设计n平板电脑的用户体验nAndroid平板电脑的设计规范n南丰鼎轩点餐首页设计2/31本章任务n绘制南丰鼎轩启动图标、桌位选择页、点餐页、订单详情页n了解Pad与iPad的异同n掌握Pad设计方法和注意事项3/31目录n南丰鼎轩启动图标设计nPad设计方法和注意事项n南丰鼎轩桌位选择页、点餐页、订单详情页设计nPad与iPad的异同4/31演示案例演示案例：南丰鼎轩启动图标设计n需求描述l完成南丰鼎轩启动图标设计l设计尺寸：1024x1024pxn实现思

2、路l使用形状工具绘制基础图形l为图层添加图层样式增加立体效果l增加细节l整体微调效果5/31目录n南丰鼎轩启动图标设计nPad设计方法和注意事项n南丰鼎轩桌位选择页、点餐页、订单详情页设计nPad与iPad的异同6/31Pad设计方法和注意事项n根据需求和使用场景设计产品功能和布局l当产品同时存在与手机和Pad端时，其视觉风格要保持统一，至少要看起来无论在哪种设备上，用户使用的都是同一款产品7/31Pad设计方法和注意事项n界面方向发生变化时，避免重要区域和内容发生变化l如果App只支持一个方向，那么请在第一时间明确的告诉用户，旋转屏幕至正确位置l避免使用控件改变屏幕方向liOS审核时，如果同

3、时提供双方向的App更容易通过审核8/31Pad设计方法和注意事项n界面方向发生变化时，避免重要区域和内容发生变化l由于横屏显示提供更大的界面宽度，可以使用拆分视图的方式来进行横屏竖屏的设计 Pad端邮件App横屏与竖屏界面9/31Pad设计方法和注意事项n界面方向发生变化时，避免重要区域和内容发生变化l无论是双手还是单手持握Pad，手掌会遮蔽一部分屏幕l不要将重要区域放置在pad边缘容易被遮住的区域，要放置在易于点击的区域10/31目录n南丰鼎轩启动图标设计nPad设计方法和注意事项n南丰鼎轩桌位选择页、点餐页、订单详情页设计nPad与iPad的异同11/31演示案例演示案例：南丰鼎轩桌位选

4、择页设计n需求描述l完成南丰鼎轩桌位选择页设计n实现思路l使用形状工具绘制基础图形l使用智能图层完成单个矩形桌位的绘制l增加细节l整体微调效果12/31演示案例演示案例：南丰鼎轩点餐页设计n需求描述l完成南丰鼎轩点餐页设计n实现思路l点餐页：提供菜品的主要分类l全屏的深蓝色会让人感到压抑和郁闷，所以整体采用上下结构，下方用米色平铺，增加细微的质感变化l菜品图片选择具有代表性的招牌菜品，光源尽量选择统一、颜色比较鲜亮的图片13/31演示案例演示案例：南丰鼎轩订单详情页设计n需求描述l完成南丰鼎轩订单详情页设计n实现思路l订单详情页包括：订单提交成功标示、提交时间、菜品名称、制作时间、状态l注意元

5、素之间的位置、识别度14/31目录n南丰鼎轩启动图标设计nPad设计方法和注意事项n南丰鼎轩桌位选择页、点餐页、订单详情页设计nPad与iPad的异同15/31Pad与iPad的异同n平板电脑(广义)lTablet Personal Computer，简称Tablet PCl由比尔盖茨提出来l必须能够安装x86版本的Windows系统、Linux系统或Mac OS系统l一种小型、方便携带的个人电脑l以触摸屏作为基本的输入设备16/31Pad与iPad的异同niPadl由苹果公司于2010年开始发布的平板电脑系列l基于ARM架构的l介于苹果的智能手机iPhone和笔记本电脑产品之间l“手本”l现

6、在人们习惯将iPad归为平板电脑一类17/31Pad与iPad的异同p现在iPad家族有：iPad with Retina display、iPad Mini、iPad Air、iPad Mini 2、iPad Air 2、iPad mini 3iPad Air 2iPad AiriPad mini 3iPad mini 218/31Pad与iPad的异同nPadlPortable Android Devicel安卓系统的平板电脑美国的英伟达19/31Pad与iPad的异同l小米平板l三星平板20/31Pad与iPad的异同n哪个更好？l硬件&软件l标准化&适配l用户体验l售后服务l价格21/

7、31Pad与iPad的异同niPadl生产公司只有苹果一家l标准化、软件、硬件、适配专业l良好的用户体验、完善的售后服务lApp审核严格、监管力度强悍l开发成本较高l价格昂贵22/31Pad与iPad的异同nPadl生产公司很多家，且良莠不齐l标准化不统一l软件、硬件、适配有好有坏l用户体验、售后服务各厂家各自为战lApp审核宽松、监管力度不严格lApp乱收费现象严重，广告层出不穷l硬件价格便宜，开发成本较低23/31Pad与iPad的异同l优等生：评分较高l参差不齐：拉低平均分24/31iOS平板电脑iPad的设计规范设备尺寸状态栏高度导航栏高度标签栏高度iPad3456AirAir2Min

8、i22048*1536408898iPad121024*768204449iPad Mini1024*768204449liPad屏幕尺寸：设计一般以1024x768为主l单位：像素25/31Pad与iPad的异同n屏幕尺寸lPadp1280752像素居多p设计上以测试机尺寸为主p横向为默认观看方向p且存在三种不同的屏幕密度26/31Pad与iPad的异同n硬件差异-按键lAndroid提供物理返回键l现在也有一部分做成虚拟的物理返回键27/31Pad与iPad的异同n字体liPadp默认中文字体：苹方、华文黑体lAndroidp默认中文字体：微软雅黑、方正兰亭p支持将其他字体绑定在App中28/31本章总结nPad界面在横屏竖屏发生变化时，布局上该如何变化呢？29/31本章作业本章作业n完成南丰鼎轩界面设计n设计咖啡厅Pad端点餐系统界面l设计尺寸同前l布局结构参考南丰鼎轩界面n请教员根据班级情况布置预习30/31