您好,欢迎访问三七文档
当前位置:首页 > 临时分类 > APP-UI-设计规范
IOS&AndroidAPPUI设计规范iOS篇iOS界面尺寸设备分辨率PPI状态栏高度导航栏高度标签栏高度Iphone6plus1080x1920px401ppi54px132px146pxIphone6/6s750x1334px326ppi40px88px98pxIphone5/5c/5s640x1136px326ppi40px88px98pxIphone4/4s640x960px326ppi40px88px98pxppi(pixelsperinch)即每英寸像素,也叫像素密度。图标尺寸设备APPstore程序应用主屏幕Spotlight搜索标签栏工具栏/导航栏Iphone6plus1024x1024px180x180px114x114px87x87px75x75px66x66pxIphone6/6s1024x1024px120x120px114x114px58x58px75x75px44x44pxIphone5/5c/5s1024x1024px120x120px114x114px58x58px75x75px44x44pxIphone4/4s1024x1024px120x120px114x114px58x58px75x75px44x44pxIphone6图例状态栏规范用户依赖于状态栏的重要信息,如信号,时间和电池。文本和图标可以是白色或黑色,但背景可以被设计成任何颜色,并与导航栏合并。pt(point)是印刷业上长使用的单位,磅的意思,是一种固定的长度单位,可以用测量设备测量的单位。pt=px*3/41pt=1/72英寸导航栏规范导航栏是用于屏幕的快速信息。左边部分可用于配置文件,菜单按钮,而右边的部分是一般用于动作按钮,如添加,编辑,完成。请注意,如果您使用这些系统图标,您不需要为它们单独设计。搜索栏工具栏Stepper控件提示框提示对话框是用于输送关键信息和提示快速操作。提示应保持最少文字,退出一定是明显。分段控制框滑块开关布局标准控件ios1334x750pxIphone6/6sApple使用黄金分割在它们的一些图标上。这让图标保持良好的比例,同时确保了美感。虽然这是一个很好的规范,但它不是严格要求。甚至Apple在很多图标上也省略了它。标准色字体大小、规格一般的规范是按钮用44pt、小文字用12pt、正文文本用17pt和标题用20pt+。IOS9中文字体:苹方/PingFangSCIOS8中文字体:常州华文的黑体-简,在macosx系统中选择黑体-简IOS英文、数字:Helvetial间距和对齐方式一般的规范最低要求8pt空白或边距。这将有足够留白空间,使得布局更容易扫描和文本更具可读性。而且在此基础上,UI元素应对齐,文本应该有相同的基线位置。Android篇Android界面尺寸界面尺寸(1280x720px)状态栏高度:50px导航栏高度:96px标签栏高度:96pxAndroid最近出的手机都几乎去掉了实体键,把功能键移到了屏幕中,当然高度也是和标签栏一样的:96px内容区域高度为:1038px(1280-50-96-96=1038)常用尺寸•一般把48dp作为可触碰UI原件的标准,48dp=72px=9mm,这是一个用户手指能够准确舒适触碰的最小尺寸。•Android界面默认list的高度是:48dp=72px;•Android界面每个元素之间最小的间距是:8dp=12px;•Android界面默认btn的高度是:40dp=60px•px=ppi/160*dp常用屏幕尺寸240x320ldpi(低等屏幕)320x480mdpi(中等屏幕)480x800hdpi(高清屏幕)720x1280xhdpi(超高清屏幕)相应的图片资源尺寸的比例关系为1:1.5:2也就是第一套图为mdpi的资源图片,hdpi可调整到150%,xhdpi可调整到200%。字体规范、大小5.X版本:思源黑体/NotoSansHan5.0以下版本:DroidSansFallback,可用文泉驿微米黑代替英文、数字:Roboto标题(58px或60px)二级标题(44px或48px)正文字体(32px或36px);英文最小字号22px,中文最小字号。SP与DP介绍48DP定律48dp作为安卓可触摸的UI元件的标准。一般来说,48dp转化为一个物理尺寸约9毫米。建议的目标大小为7-10毫米的范围,这是一个用户手指能准确并且舒适触摸的区域。如果你设计的元素高和宽至少48dp,你就可以保证:(1).触摸目标绝不会比建议的最低目标(7mm)小,无论在什么屏幕上显示。(2).在整体信息密度和触摸目标大小之间取得了一个很好的平衡。而每个UI元素之间的空白通常是8dp.2019POWERPOINTSUCCESS2021/5/272019THANKYOUSUCCESS2021/5/27
本文标题:APP-UI-设计规范
链接地址:https://www.777doc.com/doc-8501473 .html