APP-UI-设计规范ppt课件_第1页
APP-UI-设计规范ppt课件_第2页
APP-UI-设计规范ppt课件_第3页
APP-UI-设计规范ppt课件_第4页
APP-UI-设计规范ppt课件_第5页
已阅读5页,还剩20页未读 继续免费阅读

下载本文档

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

文档简介

1、1,IOS Android APP UI设计规范,2,iOS 篇,3,点击添加文本,点击添加文本,点击添加文本,点击添加文本,iOS 界面尺寸,ppi(pixels per inch)即每英寸像素,也叫像素密度,4,图标尺寸,5,Iphone6 图例,6,状态栏规范,用户依赖于状态栏的重要信息,如信号,时间和电池。文本和图标可以是白色或黑色,但背景可以被设计成任何颜色,并与导航栏合并。 pt(point)是印刷业上长使用的单位,磅的意思,是一种固定的长度单位,可以用测量设备测量的单位。pt=px*3/4 1pt=1/72英寸,7,导航栏规范,导航栏是用于屏幕的快速信息。左边部分可用于配置文件,

2、菜单按钮,而右边的部分是一般用于动作按钮,如添加,编辑,完成。请注意,如果您使用这些系统图标,您不需要为它们单独设计,8,搜索栏,9,工具栏,Stepper控件,10,提示框,提示对话框是用于输送关键信息和提示快速操作。提示应保持最少文字,退出一定是明显,11,分段控制框,12,滑块,开关,13,布局标准控件,布局原理(8px原理由来) 由于ios技术开发是以320 x640px为标准开发的,所以此设定尺寸为1,算出各个尺寸的比例,然后乘以4,各个尺寸都能满足是整数,可以保证开发时不会模糊。2px(视网膜屏的到来)切图设计稿尺寸是640 x960px,所以设计时最小的单位尺寸是8px。 使用8

3、px原理的目的 保证在双平台上大部分机型开发中不会出现模糊的变形的问题;而且只需设计一套设计稿,减少设计师的工作量,提高工作效率,ios 1334x750 px Iphone6/6s,14,点击添加文本,点击添加文本,点击添加文本,点击添加文本,图标网络,Apple使用黄金分割在它们的一些图标上。这让图标保持良好的比例,同时确保了美感。虽然这是一个很好的规范,但它不是严格要求。甚至Apple在很多图标上也省略了它,15,点击添加文本,点击添加文本,点击添加文本,点击添加文本,标准色,16,点击添加文本,点击添加文本,点击添加文本,点击添加文本,字体大小、规格,一般的规范是按钮用44pt、小文字

4、用12pt、正文文本用17pt和标题用20pt+。 IOS 9 中文字体:苹方/PingFang SC IOS 8 中文字体:常州华文的黑体-简,在mac os x 系统中选择 黑体-简 IOS 英文、数字:Helvetial,17,点击添加文本,点击添加文本,点击添加文本,点击添加文本,间距和对齐方式,一般的规范最低要求8pt空白或边距。这将有足够留白空间,使得布局更容易扫描和文本更具可读性。而且在此基础上,UI元素应对齐,文本应该有相同的基线位置,18,点击添加文本,点击添加文本,点击添加文本,点击添加文本,Android篇,19,点击添加文本,点击添加文本,点击添加文本,点击添加文本,A

5、ndroid 界面尺寸,20,点击添加文本,点击添加文本,点击添加文本,点击添加文本,界面尺寸(1280 x720px,状态栏高度:50 px导航栏高度:96 px标签栏高度:96 pxAndroid最近出的手机都几乎去掉了实体键,把功能键移到了屏幕中,当然高度也是和标签栏一样的:96 px内容区域高度为:1038 px (1280-50-96-96=1038,21,常用尺寸,一般把48dp作为可触碰UI原件的标准,48dp=72px=9mm,这是一个用户手指能够准确舒适触碰的最小尺寸。 Android界面默认list的高度是:48dp=72px; Android界面每个元素之间最小的间距是:

6、8dp=12px; Android界面默认btn的高度是:40dp=60px px=ppi/160*dp,22,常用屏幕尺寸,240 x320 ldpi (低等屏幕) 320 x480 mdpi (中等屏幕) 480 x800 hdpi (高清屏幕) 720 x1280 xhdpi (超高清屏幕) 相应的图片资源尺寸的比例关系为1:1.5: 2 也就是第一套图为mdpi的资源图片,hdpi可调整到150%,xhdpi可调整到200,23,点击添加文本,点击添加文本,点击添加文本,点击添加文本,双击添加标题文字,字体规范、大小,5.X版本:思源黑体/Noto Sans Han 5.0以下版本:D

7、roid Sans Fallback,可用 文泉驿微米黑 代替 英文、数字:Roboto 标题(58px或60px) 二级标题(44px或48px) 正文字体(32px或36px);英文最小字号22px,中文最小字号,24,SP与DP介绍,dp:device independent pixels(设备独立像素)。 sp:scaled pixels(放大像素),主要用于字体显示best for textsize。由此,根据 google 的建议,TextView 的字号最好使用 sp 做单位,而且查看TextView的源码可知 Android 默认使用 sp 作为字号单位。 sp和dp一样,是a

8、ndroid开发里特有的单位,设计师在做UI设计的时候 通常最初是建立320*480这个尺寸的画布开始的,这个尺寸的画布 在android分辨率的分类中称为mdpi,在这个尺寸下,ps里的1px就等于android中的1dp,同样,这个时候1点的字就等于 android中1sp,举个例子:你建立画布的尺寸是320-480,里面的文字是30点,那么它就是30sp。 一般android设置长度和宽度多用dp,设置字体大小多用sp. 在屏幕密度为160,1dp=1px,当屏幕密度为240时,1dp=1.5px,25,48DP定律,48dp作为安卓可触摸的UI元件的标准。 一般来说,48dp转化为一个物理尺寸约9毫米。建议的目标大小为7-10毫米的范围,这是一个用户手指能准

温馨提示

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

评论

0/150

提交评论