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

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

1、南丰鼎轩项目餐饮类Pad端App设计-1课程回顾n充分考虑用户体验与交互n游戏类界面设计技巧n全部英雄页界面设计n回顾启动图标设计的制作流程n创意启动图标的常见表现方式n绘制游戏类启动图标：毛线手柄2/52本章任务n了解餐饮类App的相关理论n了解项目需求，掌握项目分析的能力n掌握视觉设计思路和技巧n掌握平板电脑的用户体验n掌握Android平板电脑的设计规范n绘制南丰鼎轩开屏启动页、点餐首页3/52目录n餐饮类App的相关理论n南丰鼎轩项目需求及项目分析n视觉设计思路和技巧n南丰鼎轩开屏启动页设计n平板电脑的用户体验nAndroid平板电脑的设计规范n南丰鼎轩点餐首页设计4/52餐饮类App

2、的相关理论n餐饮类App的行业介绍l智能手机迅猛发展l庞大的用户规模l功能强大p折扣、团购、订餐、拍照一个都不能少5/52餐饮类App的相关理论n餐饮类App的分类l菜谱厨房类App 好豆菜谱 下厨房6/52餐饮类App的相关理论n餐饮类App的分类l餐饮企业App 黄太吉 星巴克7/52餐饮类App的相关理论n餐饮类App的分类l点餐打折优惠App 美团 百度糯米8/52餐饮类App的相关理论n餐饮类App的常见功能l完美大图展示9/52餐饮类App的相关理论n餐饮类App的常见功能l提供快速便捷的支付p用户不必现金支付，使用App的支付功能可以轻轻松松一键支付，省时省力还省钱l提供搜索功能

3、p提供更详尽的分类搜索和关键词搜索。用户可以通过搜索功能搜索到附近的美食和最新的打折信息l提供提前预定或外卖服务p不必等坐，不必排队，还有外卖服务，还能实行打折优惠10/52餐饮类App的相关理论n餐饮类App的常见功能l提供分享展示p适合用户第一时间分享美食 爱鲜蜂App在宝贝详情页提供分享功能11/52餐饮类App的相关理论n餐饮类App的常见功能l优惠消息推送p第一时间通知用户打折信息和促销活动 爱鲜蜂和美团推送的消息12/52餐饮类App的相关理论n餐饮类App的制作流程餐饮企业 提出需求产品经理 撰写需求文档确立App主要功能产品经理 绘制原型图设计师 确立主界面风格绘制App个各界

4、面程序员 撰写后台程序餐饮企业 提供菜品介绍及图片程序员 提供文件撰写格式及命名规则编辑对菜品介绍及图片进行整理程序调用数据产品测试上线13/52目录n餐饮类App的相关理论n南丰鼎轩项目需求及项目分析n视觉设计思路和技巧n南丰鼎轩开屏启动页设计n平板电脑的用户体验nAndroid平板电脑的设计规范n南丰鼎轩点餐首页设计14/52南丰鼎轩项目需求及项目分析n 项目名称l南丰鼎轩Pad端App界面设计n项目定位l为南丰鼎轩中餐厅设计点餐系统的Pad端Appl方便节省人力物力l安卓系统内部定制的平板电脑点餐App，仅限内部使用，不需要上线，不需要适配，不需要登录注册15/52南丰鼎轩项目需求及项目

5、分析n南丰鼎轩需求分析l南丰鼎轩Pad端App主要是在企业内部定制的Android系统平板电脑上使用，不需要上线。目前只支持横屏显示，所以不需要进行竖屏的适配l界面风格体现中餐厅特色，尽量采用中国风的传统元素。界面布局简单，便于操作，用户使用无压力16/52南丰鼎轩项目需求及项目分析n南丰鼎轩Pad端App原型图17/52南丰鼎轩项目需求及项目分析n界面风格l体现中餐厅特色尽量采用中国风的传统元素n布局l简单，容易操作18/52南丰鼎轩项目需求及项目分析n使用用户分析l饭店服务人员l饭店客人p个人p家庭p企业19/52南丰鼎轩项目需求及项目分析n主任务：点餐l简化任务系统：让点餐更容易l让用户

6、更少的选择、更快的决定20/52南丰鼎轩项目需求及项目分析n功能需求分析l主要功能：点餐p由用户选择p分类：凉菜、热菜、海鲜、甜品、酒水饮料p菜品展示：名称、价格、主要配料p点餐购物车：桌号、总价、菜品名称、数量、提交订单p点餐完毕：订单提交成功标示、提交时间、菜品名称、制作时间、状态（已经上桌、制作中）21/52目录n餐饮类App的相关理论n南丰鼎轩项目需求及项目分析n视觉设计思路和技巧n南丰鼎轩开屏启动页设计n平板电脑的用户体验nAndroid平板电脑的设计规范n南丰鼎轩点餐首页设计22/52n头脑风暴视觉设计思路和技巧23/52视觉设计思路和技巧n同类产品设计l参考界面视觉设计l参考界面

7、布局设计l参考产品流程设计l参考产品细节设计24/52视觉设计思路和技巧l参考相关App设计l参考相关Web设计l参考相关平面版式设计l参考相关海报广告设计25/52视觉设计思路和技巧n相关素材收集26/52视觉设计思路和技巧n相关素材提炼l版权l尺寸l相似性p风格统一p符合主题27/52目录n餐饮类App的相关理论n南丰鼎轩项目需求及项目分析n视觉设计思路和技巧n南丰鼎轩开屏启动页设计n平板电脑的用户体验nAndroid平板电脑的设计规范n南丰鼎轩点餐首页设计28/52演示案例演示案例：南丰鼎轩开屏启动页设计n需求描述l界面设计要求：1024x768pxl中文字体：动态文字使用微软雅黑，静态

8、文字使用适合项目需求的中国风毛笔字体l针对平台：Android系统n实现思路29/52南丰鼎轩开屏启动页设计n上机重点l当界面比较平铺直叙时，可以在大幅的颜色上增加纹理，让界面更细腻l使用图层样式的图案叠加可以很方便的为背景增加细腻的纹理效果l字体选择带有浓重中国色彩的隶书和毛笔字，与主题相互辉映30/52目录n餐饮类App的相关理论n南丰鼎轩项目需求及项目分析n视觉设计思路和技巧n南丰鼎轩开屏启动页设计n平板电脑的用户体验nAndroid平板电脑的设计规范n南丰鼎轩点餐首页设计31/52平板电脑的用户体验n为平板电脑App而设计n支持所有方向的交互n理解平板电脑的使用方式和使用习惯32/52

9、平板电脑的用户体验n为平板电脑App而设计l不要照搬直套p不是网页设计33/52平板电脑的用户体验n为平板电脑App而设计l不要照搬直套p不是手机端App34/52平板电脑的用户体验n为平板电脑App而设计l根据需求和使用场景来设计产品功能和布局p人们在移动过程中，偏向使用手机p在静止状态下，更喜欢使用Padl风格要与手机端统一35/52平板电脑的用户体验n支持所有方向的交互l横屏使用vs竖屏使用l在各个方向上都有很好的适配支持piOS审核时，如果同时提供双方向的App更容易通过审核36/52平板电脑的用户体验n理解平板电脑的使用方式和使用习惯l把持方式-双手37/52平板电脑的用户体验n支持

10、所有方向的交互l方向发生变化时，避免重要区域和内容发生变化，否则用户很容易产生混乱和失控感l如果App只支持一个方向，那么请在第一时间明确的告诉用户，旋转屏幕至正确位置l避免使用控件改变屏幕方向38/52平板电脑的用户体验n理解平板电脑的使用方式和使用习惯l把持方式-单手39/52平板电脑的用户体验n理解平板电脑的使用方式和使用习惯l无论是双手还是单手持握pad手掌会遮蔽一部分屏幕l不要将重要区域放置在pad边缘容易被遮住的区域40/52平板电脑的用户体验点击输入框，弹出的键盘会遮住输入框,该怎么办呢？41/52目录n餐饮类App的相关理论n南丰鼎轩项目需求及项目分析n视觉设计思路和技巧n南丰

11、鼎轩开屏启动页设计n平板电脑的用户体验nAndroid平板电脑的设计规范n南丰鼎轩点餐首页设计42/52Android平板电脑的设计规范n屏幕尺寸和方向lPad的布局尺寸是1280752pxlAndroid上的内容可以在横向和纵向两个方向上查阅，横向模式更受人欢迎l设计时如果同时需要设计Android和iOS两个系统的界面，可以使用1024768px这个尺寸进行设计43/52Android平板电脑的设计规范n字体和字号lDroid sana fallbackl中文字体：方正兰亭黑体、微软雅黑l文字大小仍然要保证识别度为第一要务l支持内嵌字体，所以如果是厂家定制的平板电脑，可以考虑内嵌一款符合产

12、品需求的字体l在内嵌字体的时候，要考虑到文字的大小与系统的运行速度44/52Android平板电脑的设计规范n按键lAndroid系统的Pad一般会提供返回键，有时候也会将物理键内置45/52Android平板电脑的设计规范l建议使用矢量工具绘制l方便适配l方便印刷l钢笔工具46/52目录n餐饮类App的相关理论n南丰鼎轩项目需求及项目分析n视觉设计思路和技巧n南丰鼎轩开屏启动页设计n平板电脑的用户体验nAndroid平板电脑的设计规范n南丰鼎轩点餐首页设计47/52演示案例演示案例：南丰鼎轩点餐首页设计n需求描述l完成南丰鼎轩点餐首页设计l界面设计要求：1024768pxl中文字体：动态文字

13、使用微软雅黑，静态文字使用适合项目需求的中国风毛笔字体l针对平台：Android系统n实现思路48/52南丰鼎轩点餐首页设计n上机重点：l全屏的深蓝色会让人感到压抑和郁闷，所以整体采用上下结构，下方用米色平铺，增加细微的质感变化l菜品图片选择具有代表性的招牌菜品，光源尽量选择统一、颜色比较鲜亮的图片l所有图标采用圆形。圆形是最稳定的图形，也是最能体现中国“和”文化的图形。文字和边框均增加传统的中国纹作为装饰49/52本章总结n在设计的时候，Pad的布局尺寸是？n拿到一个项目之后，设计师该如何进行视觉设计思路分析？n平板电脑的用户体验有哪些？nAndroid平板电脑的设计规范是？50/52本章作业本章作业n完成南丰鼎轩开屏首页、点餐页界面设计n设计咖啡厅Pad端点餐系统点餐界面l设计尺寸同前l布局结构参考南丰鼎轩点餐界面n请教员根据班级情况布置预习51/52