移动产品设计基础.ppt_第1页
移动产品设计基础.ppt_第2页
移动产品设计基础.ppt_第3页
移动产品设计基础.ppt_第4页
移动产品设计基础.ppt_第5页
已阅读5页,还剩54页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、移动产品设计基础,移动产品设计基础,1,移动产品特性2,尺寸和分辨率3,介面布局4,字体5,图标6,图7,摘要,内容,目录,移动产品设计基础,移动产品特性,移动产品特性,移动Windows,移动这里主要讨论iphone、ipad、Android手机应用程序的设计基本知识。什么是Android:Android用于基于Linux的自由和开放源代码操作系统,主要用于智能手机和平板电脑等便携式设备。Andy Rubin操作系统最初开发了Andy Rubin牙齿,主要支持手机。2005年投入Google Foundation(Google收购)牙齿资金,改善开放移动财团开发后,逐渐扩大到平板电脑及其他领

2、域。2008年十月首次推出Android智能手机。什么是iOS:苹果IOS是苹果开发的手持操作系统。苹果公司于2007年1月9日在Macworld Conference上首次发表了牙齿系统,最初是为iphone而设计的,然后陆续应用于ipod tuch、ipad、苹果电视等苹果产品。注:标记是iPod、iPod、iPod、iPod和iPod。移动产品功能,移动产品种类,Metro UI是介面显示器技术,与苹果的iOS、Google的Android界面的主要区别在于,后两个茄子都将应用程序作为主要呈现对象,而Metro界面则强调信息本身,而不是重复的介面元素。显示以下界面的某些元素功能的功能主要

3、是向用户显示消息“此处有更多信息”。同时,在视觉特效方面,这有助于形成身临其境的感觉。Windows Phone将微软推出的移动操作系统、微软下的Xbox Live游戏、Zune音乐和独特的视频体验集成到手机中。2010年十月11日晚上9:30,微软公司正式宣布智能手机操作系统Windows Phone。提供移动产品功能,移动产品使用功能,移动设备携带方便,浏览时间的分段。例如,智能手机:我们通常在短时间内完成工作或进行娱乐活动:散步、坐公共汽车、睡觉、下午休闲、旅行、拍照片、孔刘、做笔记、玩游戏、购物等。平均在5 30分钟内,思想经常中断,手机经常放下,进行高效、轻松的交互,成为了移动设计的

4、特点。(David aser,Northern Exposure(美国电视电视剧),成功)相反,在平板电脑的情况下,使用时间通常在家里比较安静和舒适的环境空间中,使用时间也比较固定。移动产品功能、手势比较、基于移动产品设计、尺寸和分辨率、尺寸和分辨率、移动产品使用功能、屏幕尺寸:通常是指屏幕上的物理尺寸、屏幕对角线长度。例如2.8英寸、3.7英寸。分辨率:屏幕上的像素总数。通常使用宽度长度表示。大多数情况下,分辨率显示为“宽度长度”,但分辨率并不意味着宽高比。尺寸和分辨率、移动产品使用特征、Apple介绍了介面元素大小(Point),以防止通信过程(尤其是编程实现)分辨率中的事故混乱。示例:i

5、Phone/iPodTouch介面说明320点x480点iPhone/iPad介面说明768点x1024点转换关系通用屏幕1点(1pt)=1像素Retina屏幕1点(1pt)=2像素、尺寸和分辨率,以及现在iphone 5的分辨率是640*1136。在设计iphone的应用节目界面时,需要以设计师640*960的标准设计,然后创建两倍的图片资源。(未缩小的我们称之为两幅图,缩小的一幅图)因为所有的iphone都使用相同的尺寸,最终能在两种分辨率下显示的物理大小完全相同。iphone 5只是高度变化,适应时一般保持设计控件大小不变,但内容曝光会增加。但是,对于某些全屏设计界面,设计附加页面640

6、*1136(例如app背景、引导地图等)、尺寸和分辨率、iphone、320PX、480PX和iphone、640px、1136px、尺寸和分辨率、ipad、ipad:第一代ipad屏幕尺寸9.7英寸,分辨率1024*768,屏幕密度132PPI新ipad屏幕密度也为2048最近推出的ipad迷你屏幕尺寸7.9英寸,分辨率1024*768。设计ipad的应用程序时,要以设计师2048*1536的标准设计,并制作减少两倍的图片资源。(未缩小的我们是两倍,缩写的是两倍)iPad mini(iPad)不需要像iPad(iPad)那样的比例单独设计,可以将相应的两倍图片直接与设备相匹配。(阿尔伯特爱因

7、斯坦、Northern Exposure(美国电视电视剧)、艺术、尺寸和分辨率、ipad、768px、1024px、ipad 1-ipad 1-ipad因此,Android当局将多种屏幕分类为密度等级,最终分类为低密度(LDPI)、中等密度(MDPI)、高密度(HDPI)和超高密度(XHDPI)。这样,在设计Android应用程序的界面时,可以根据中等密度屏幕进行设计,然后在不同密度屏幕上提供相应的照片资源。最后,通过系统的适应性自动处理,相同的内容可以在各种屏幕上进行更接近的大小显示。在太平洋,我们通常设计480*800的尺寸。基于移动产品设计,介面布局,介面布局,iPhone,iPhone

8、:介面布局,iPhone,iPhone:介面布局,iPad,iPad:状态栏高度44pt,真实应用节目:通常,所有界面都需要状态栏,除非是游戏等身临其境的app和部分全屏显示器图片的界面。320pt*20pt,介面布局,导航栏,规范,导航栏显示在顶部状态栏的下方。从应用程序的不同角度导航用于管理当前视图内容的空间导航栏只能以水平中心显示当前视图的标题。用户进入其他视图时,必须将导航栏的标题更改为当前位置。除“后退”按钮外,导航栏可以在标题右侧包含第二个按钮(例如,剪辑,添加)。320pt*44pt,按钮可以是字母或图标、介面布局、导航栏、实际应用:顶部状态栏下方不一定是导航栏,不一定是搜索栏等

9、。导航栏大于44pt,页面标题左对齐,介面布局,导航栏,实际应用:导航栏,介面布局,导航栏,实际应用:页面标题选项卡栏显示宽度选项卡栏选定标签(包括图标和文本显示、每个选项卡栏的元素等)需要当前姜潮状态。无论水平屏幕垂直,当高度标签不超过5个时,您可以在标签栏中显示中间宽度。超过5个时,将显示4个,“详细”标签可以在卡栏上显示通知标记(320pt*49pt),当图标的含义充分明确时,可以不使用字符。标签的意义太抽象时,只能使用文字、介面布局、选项卡栏(选项卡栏)。实际应用:形状不一定是矩形,并且不是所有标签都具有相同的宽度。介面布局、工具栏、规格中:在屏幕底边显示工具栏包含对当前页面内容执行操

10、作的按钮,适用于工具栏相应元素等宽阵列工具栏中不超过5个的元素。44pt*44pt设备手持设备方向从垂直更改为水平时,工具栏高度将自动更改:320pt*44pt、介面布局、工具栏(tool bar)、实际应用:主页杂志和太平洋计算机网络客户端内部页面工具栏显示器、介面布局、单击区域、规格:在设计可单击部件时,设计人员首先设计区域可以让用户轻松单击App的banner广告也有44pt高;必须大于或等于。列表的高度也不能小于44pt。介面布局,设计区域,设计中,设计师根据retina屏幕分辨率设计,设计的最后输出也是两倍的时候,我们把它缩小了两倍,所以在两倍的设计中,每个单独存在的对象的大小是双数

11、像素(例如148px*248px),这样缩小了两倍的时候,110上面列出的是比较常见的,创建所有app。键盘、提示框、时间和日期选择器、选择器、进度显示器、搜索栏、滑动调节器等。这些样式通常可以直接使用系统提供的样式,其他设计(可以根据需要进行设计,但是由于工作复杂,因此其他设计通常不能比直接在系统中实施得更好)。)、移动产品设计基础、字体、字体、Ios中的默认字体和iOS中的默认字体。第一个:STHeiti-Light.ttc和STHeiti-Medium.ttc代表中文字体第二个:_H_Helvetica.ttc和_H,表示字体、字体、iOS中的中文字体、苹果的默认中文字体Heiti是黑体

12、的拼音,SC是简体中文,Mac OS X Snow Leopard(版本10.6)中包含的简体中文字体,iphone OS 3.0(版本4.0以后重命名为Heiti)。我们用PC设计时,比较接近牙齿字体的是正方形黑体字。IOS的中文字体看起来比较少,相似,概括起来是黑体、黑体、倾斜黑体三种。与中文相比,iOS中的英语/数字字体在iOS中的英语和数字的字体样式较多,在设计时可以选择适当界面中的英语字体,但要注意该字体在每个版本的系统中是否通用。字体,字体,实际应用,中文应用在介面上时,一般我们用创始人哥特式简体来设计。而且不能有任何设计效果或风格(可以是纯色,可以有阴影,可以由技术实现)。例外情

13、况是图中所写的文本。相对特殊、不变的短语此时可以使用不同的字体和使用样式实现剪切。字体,设计时的重要可视部分,可以创建以下文字样式:首页标题、底部标签栏中的文字(通常是不变的文字)。但是,二级页面及其后的标题将由技术实现。个人经验一般字体至少为24px,标题等可以达到38px-44px。移动产品设计基础、图标、图标、导航栏和工具栏标准按钮图标、图标、导航栏和工具栏标准按钮图标、图标、标签栏中的标准按钮图标、图标、App icon设计尺寸、常规设计最大尺寸1024px*1024px、IIS,方法2。创建新的透明图层并将其拖到组件中,方法1。直接从PSD裁切图片。1 .切削,2。输出,剪切后选择:“存储为web和设备所用格式”图片格式png24,保持透明度,剪切,切片,通常按相同的关系和层次排列的图标或元素,剪切到相同的大小切片,无论每个尺寸的数量。alt拖动可复制当前切片。除切片外,另一个需要输出的是颜色。通常,您为程序员RGB值和颜色代码提供两个茄子值。切除,在太平洋移动产品的切除是我们设计方面完成的过程(Android除外)。根据设计师、程序员视图程序员

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论