2017最新通用APP UI 设计规范

合集下载

UI设计规范

UI设计规范

一.APP设计规范(ios)————设计稿一般不使用Android的尺寸(因为Android的五花八门)1. iphone界面的设计尺寸(设计稿默认iphone6)(1)iphone6 plus设计版[iPhone7 plus](@3x)分辨率1242x2208px ppi:401 状态栏:60px 导航栏:132px 标签栏:146px(2)iphone6 plus放大版(@3x)分辨率1125x2001px ppi:401 状态栏:54px 导航栏:132px 标签栏:146px(3)iphone6 plus物理版(@3x)分辨率1080x1920px ppi:401 状态栏:54px 导航栏:132px 标签栏:146px(4)iphone6 [iPhone7](设计稿默认)(@2x)分辨率750x1334px ppi:326 状态栏:40px 导航栏:88px 标签栏:98px(5)iphone5 - 5c -5s(@2x)分辨率640x1136px ppi326 状态栏:40px 导航栏:88px 标签栏:98px(6)iphone4 – 4s(@2x)分辨率640x960px ppi:326 状态栏:40px 导航栏:88px 标签栏:98px(1)iphone & ipod Touch第一、二、三代(@1x)分辨率320x480px ppi:163 状态栏:20px 导航栏:44px 标签栏:49px2. iphone图标设计尺寸(1)iphone6 plus (@3x)App store:1024x1024px 程序应用:180x180 主屏幕:152x152 Spotlight搜索:87x87px 标签栏:75x75px 工具栏和导航栏:66x66px(2)iphone6(@2x)App store:1024x1024px 程序应用:120x120 主屏幕:152x152 Spotlight搜索:58x58px 标签栏:75x75px 工具栏和导航栏:44x44px(3)iphone5-5c-5s(@2x)App store:1024x1024px 程序应用:120x120 主屏幕:152x152 Spotlight搜索:58x58px 标签栏:75x75px 工具栏和导航栏:44x44px(4)iphone4-4s(@2x)App store:1024x1024px 程序应用:120x120 主屏幕:114x114 Spotlight搜索:58x58px 标签栏:75x75px 工具栏和导航栏:44x44px(5)iphone & ipod Touch第一、二、三代(@1x)App store:1024x1024px 程序应用:120x120 主屏幕:57x57 Spotlight搜索:29x29px 标签栏:38x38px 工具栏和导航栏:30x30px3. ipad界面设计尺寸(1)ipad3 – 4 - 5 – 6 – Air – Air2 – mini2分辨率2048x1536px ppi:264 状态栏:40px 导航栏:88px 标签栏:98px(2)ipad1 – 2分辨率1024x768px ppi:132 状态栏:20px 导航栏:44px 标签栏:49px(2)ipad Mini分辨率1024x768px ppi:163 状态栏:20px 导航栏:44px 标签栏:49px4. ipad图标设计尺寸(1)ipad3 – 4 - 5 – 6 – Air – Air2 – mini2App store:1024x1024px 程序应用:180x180 主屏幕:144x144 Spotlight搜索:100x100px 标签栏:50x50px 工具栏和导航栏:44x44px(2)ipad1 – 2App store:1024x1024px 程序应用:90x90 主屏幕:72x72 Spotlight搜索:50x50px 标签栏:25x25px 工具栏和导航栏:22x22px(3)ipad MiniApp store:1024x1024px 程序应用:90x90 主屏幕:72x72 Spotlight搜索:50x50px 标签栏:25x25px 工具栏和导航栏:22x22px5. ios字体大小规范iPhone 上的字体英文为:HelveticaNeue 至于中文,Mac下用的是黑体-简,Win下则为华文黑体,所有字体要用双数字号。

app ui设计规范

app ui设计规范

app ui设计规范App UI设计规范是指在进行手机应用开发过程中,为了确保应用的用户界面(UI)在外观、交互和功能上都能够满足用户需求和期望而制定的设计规范。

下面是一份1000字的App UI设计规范:1. 品牌形象统一在设计App界面时,需要保持应用的整体品牌形象统一。

包括使用品牌颜色、字体、图标等元素,以及保持一致的视觉风格和风格指南。

这可以帮助用户更好地识别和记忆您的应用。

2. 简洁明了的布局应用界面的布局应该简洁明了,避免杂乱无章的元素和信息堆叠。

有一个明确的信息层次结构,并确保主要功能和操作可见和易于访问。

3. 内容可读性应用的内容应该易于阅读和理解。

使用易于辨认的字体和适当的字号、行距和字距。

避免在背景和文本之间使用过于鲜艳的对比色,以保护用户的视觉体验。

4. 导航结构清晰应用的导航结构应该清晰明了。

使用明确的导航栏和底部标签栏来引导用户浏览和操作。

避免过多的嵌套菜单和混乱的导航路径,以提高用户的导航效率。

5. 易于操作的交互元素应用的交互元素应该易于操作。

按钮、输入框、滑块等交互元素应具备足够的大小和间距,以确保用户准确地点击或滑动。

同时,需要提供明确的反馈,如按钮点击后的动画或弹出的确认框。

6. 多设备适配应用的UI设计需要适配不同尺寸和分辨率的设备。

确保界面元素在不同设备上的显示效果一致,并且能够根据屏幕大小和方向进行自适应调整。

7. 错误处理和反馈应用应该有清晰的错误处理和反馈机制。

当用户操作错误或发生问题时,应提供有用的错误信息,并指导用户如何纠正错误。

同时,避免弹出过多的错误提示框,以免用户感到困扰。

8. 良好的可访问性应用需要考虑用户的可访问性需求。

确保界面元素具备足够的对比度,以方便视觉障碍用户的浏览。

同时,提供辅助功能,如语音导航和放大预览等,以满足不同用户的需求。

9. 高效的反馈时间应用需要提供高效的反馈时间,以增强用户体验。

减少加载时间和操作延迟,确保应用的响应速度在合理范围内。

app,ui,设计(网页设计)的命名规范和ps图层结构规范

app,ui,设计(网页设计)的命名规范和ps图层结构规范

竭诚为您提供优质文档/双击可除app,ui,设计(网页设计)的命名规范和ps图层结构规范篇一:web+ui+设计命名规范讲解webui设计命名规范这套规范并非单纯的css、html或javascript命名规范,它涉及了很多使用photoshop这类设计工具进行网页设计过程中的命名规范。

(好久没写文章了,有点罗嗦,吼吼~)。

首先我是出于公司几位美工的设计效果图源文件没有对图层命名而开始考虑总结一套的,还有一个原因就是网上大多命名规范都是关于编码的,也就是那些css、html、js和一些服务器端语言的,至于设计方面的命名规范实在是很少。

但是毕竟设计师也是技术团队的成员,而且前端开发工程师是要使用设计师的效果图源文件的,所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。

这套webui设计命名规范总结自我的一些web设计经验和国外设计师的命名繁体中文:英语:原始制作者信息网站简介搜索关键字网页的css规范网页标题这里是你的网页标题head区可以选择加入的标识设定网页的到期时间。

一旦网页过期,必须到服务器上重新调阅。

禁止浏览器从本地机的缓存中调阅页面内容。

用来防止别人在框架里调用你的页面。

自动跳转。

5指时间停留5秒。

网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。

content的参数有all,none,index,noindex,follow,nofollow。

默认是all。

收藏夹图标js调用规范所有的javascript脚本尽量采取外部调用css书写规范所有的css的尽量采用外部调用书写时重定义的最先,伪类其次,自定义最后(其中a:linka:visiteda:hovera:actived要按照顺序写)便于自己和他人阅读。

为了保证不同浏览器上字号保持一致,字号建议用点数pt和像素px来定义,pt一般使用中文宋体的9pt和11pt,px一般使用中文宋体12px和14.7px这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt和14.7px的字号比较合适。

APP UI设计规范(可公开版)1.3

APP UI设计规范(可公开版)1.3

APP UI设计规范(可公开版)前言APP UI设计,有何规律?从抽象到具体,前后台并行,大概要经过几个阶段,每个阶段,都有一些明确的阶段输出doc,具体:(上图是在著名的《用户体验要素》原图上进行改编)KPA#1:第一痛点创意首先,要确定你的“第一痛点”(first-item)还没有人做过,最好的调查方式是到APP Store上搜索已有的APP程序。

如果你发现已经有某个APP包含类似的痛点,那你需要比它做的“更好”,“更好”可以体现在体验(exp)创新上,也可以体现在功能(func)革命上。

中国的法律环境缺乏对APP痛点相关智识产权的严格保护,但并不意味着可以随心所欲地clone或“山寨”别人的痛点创意。

为什么呢?任何APP都不是孤立存在的,受到APP 的资源、APP用户培育的节奏、社会大环境对APP生命周期的影响,简单clone成功可能性很小。

另一方面,第一痛点创意风险很大,所谓失之毫厘,谬以千里,推荐采用smc的《顾客需求确认表》做第一人称检验故事场景挖掘,最好能输出类似下面的脚本化体验故事/片段:1.1)体验片段#1。

比如定机票应用中,有头等舱和经济舱。

经济舱是一个普通的人,而头等舱是一个戴着帽子,系着领结,胸前别着手帕的这么一个人,很酷的老板角色,体现出了头等舱和经济舱之间的区别。

要做头等舱的人,一般都愿意自己看到自己这么一个形象。

1.2)体验片段#2。

比如微信4.0,刚打开的时候有一张图片,非常文艺非常在都市的感觉的一张图片,配文字“如你所见,微信,是一个生活方式”。

其实它在干嘛呢?它是在提示用户,新增了自己相册功能。

它虽然是给用户介绍新功能,但是它把整个情绪融在里面。

1.3)体验片段#3:比如安心停车,该APP具备查找附近有剩余车位的停车场位置,以及根据收费情况进行优先显示的基本功能,而当附近没有停车位时该APP应该按照“违章停车罚款概率”由低往高推荐免费停车地点,“违章停车罚款概率”来自违章停车处罚数据库中的地点数据,必须得到交警部门的支持。

软件UI界面设计规范

软件UI界面设计规范

软件UI界面设计规范——软件II原则一、易用性按钮名称应该易懂,用词准确,摒弃模棱两可的字眼,要与同一界面上的其他按钮易于区分,能望文知义最好。

理想情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。

易用性细则:1)完成相同或相近功能的按钮用Frame框括起来,常用按钮要支持快捷方式。

2)完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。

3)按功能将界面划分局域块,用Frame框括起来,并要有功能说明或标题4)界面要支持键盘自动浏览按钮功能,即按Tab键能自动顺序切换功能,总体为从上到下,同时行间为从左到右的方式。

5)同一界面上的控件数最好不要超过10个,多余10个时可以考虑使用分页界面显示。

6)分页界面要支持在页面间的快捷切换,常用组合快捷键Ctrl+Tab7)默认按钮要支持Enter操作,即按Enter后自动执行默认按钮对应操作。

8)可写控件检测到非法输入后应给出说明并能自动获得焦点。

9)复选框与选项框按选择几率的高低而先后排列。

10)复选框与选项框要有默认选项,并支持Tab选择。

11)选项数相同时,多用选项框而不用下拉列表框。

12)界面控件较小时使用下拉框而不用选项框。

13)选项数较少时使用选项框,相反则使用下拉列表框。

14)专业性强的软件要使用相关的专业术语,通用性界面则提倡使用通用性词眼。

二、规范性通常界面设计都按Windows界面的规范来设计,即包含“菜单条、工具栏、工具箱、状态栏、滚动条、右键菜单”的标准格式,可以说:界面遵循规范化的程度越高,则易用性相应就越好,小型软件可不提供工具箱。

规范性细则:1)常用菜单要有快捷方式。

2)完成相同或相近功能的菜单用横线隔开放在同一位置。

3)菜单前的图标能直观的代表要完成的操作。

4)菜单深度一般要求最多控制在三层以内。

5)工具栏要求可以根据用户的需求自己选择定制。

6)相同或相近功能的工具栏放在一起。

7)工具栏中的每一个按钮要有工具提示。

APP界面UI设计规范

APP界面UI设计规范

APP界面UI设计规范应用程序(UI)设计规范是指开发应用程序的界面时需要遵循的一系列设计原则、指导准则和最佳实践,以提供一致、可靠和易于使用的用户界面。

一个好的应用程序界面设计规范可以帮助开发人员创建用户友好、一致性强、易于理解和操作的应用程序。

在设计应用程序界面时,设计人员需要考虑以下方面:1.一致性:应用程序的各个界面应该保持一致性,包括颜色、字体、图标、按钮和布局等。

这样可以使用户在不同界面间切换时能够更容易地适应和理解。

2.可视化引导:在设计界面时,应该使用可视化引导技术,如箭头、颜色提示和动画等,以引导用户完成操作。

这可以减少用户的迷茫感和错误操作,提升用户的操作效率和满意度。

3.易于辨识:应用程序界面中的元素应该能够被用户轻松地辨识和理解。

例如,按钮和图标应该具有明确的含义和作用,以便用户快速识别并进行相应操作。

4.响应性:应用程序的界面应该能够对用户的操作做出及时的响应,例如,按钮点击后应该有明显的反馈效果,界面刷新和加载时应该有合理的动画提示。

5.可定制性:应用程序界面的设计应该允许用户根据自己的喜好和需求进行定制,例如,颜色主题、字体大小和布局等。

这样可以提升用户的个性化体验和满意度。

7.错误处理:应用程序界面应该能够及时、明确地提示用户操作存在的错误,并提供解决方案和反馈机制。

例如,使用弹出窗口或警告框来提示用户输入错误或操作不当。

8.可访问性:应用程序的界面设计应该考虑到不同用户群体的特殊需求和能力。

例如,为视力障碍用户提供屏幕阅读器支持,为听力障碍用户提供文字提示和字幕等。

9.性能优化:应用程序界面的设计应该尽量减少对系统资源的占用,以提升程序的运行速度和系统的稳定性。

例如,使用合适的图像压缩和文件压缩技术,避免过多的网络请求和数据加载。

10.文档化:设计人员应该及时、清晰地记录应用程序界面的设计规范和指导准则,以便开发人员和维护人员参考和使用。

这可以保证应用程序的界面设计在不同版本和不同开发环境下的一致性。

APP UI设计规范

APP UI设计规范

设计尺寸
提交的图标尺寸不是固定的,所以,去找和你搭档的工程师,让他给你出一份需要提交的图标尺寸文档。 差不多用的到的就这些,有时间可以去查看一下苹果的IOS人机指导手册或者开发文档,上面有更加详细 的数据说明。
但实际工作中需要的并不像手册上提供的尺寸那么多,所以工作之中,和你的工程师搭档去沟通,你要 知道的是你们公司开发所用的数据,而不是苹果提供给你的数据。
V
3 页面标注
页面标注
标注是重中之重,工程师能不能完整的还原设计稿,很大一 部分取决于标注;如果不清楚你该怎么标,一定要和工程师 沟通! 每个工程师实现效果的方法不同,我在这里所说的,是我的 标注习惯,但应该适用于大部分的设计师和工程师。 不需要每一张效果图都进行标注,你标注的页面能保证工程 师开发每个页面的时候都能顺利进行即可; 这里的标注软件使用的是PxCook,先标一个空白文档,看 看都需要什么吧
设计尺寸
你需要使用的字体
如果是用Mac设计的小伙伴,直接就用苹果黑体字就好了;不过用Windows的就没那么幸运了, PC上还 没和iPhone默认字体效果完全一样的字体,通常都是拿其他字体代替。 苹果丽黑 Hiragino Sans GB W3(普通)/W6(粗体) 比较接近iPhone字体的一款字体,这是我之前- 直使用的设计字体。 黑体-简 STHeitiSC-Light Mac里面拷出来的苹果黑体,比较贴近iPhone手机字体,目前在用。
设计尺寸
图标的提交尺寸
IOS系统可以自动把图片裁剪为圆角,所以提交图标的时候,你只需要提交正方形的 PNG图片即 可。因为需 要的图标非常多,不可能全部加进去,只能选择最好的尺寸,我们的工程师要求我提供以下图标尺寸: 1024*1024 高清屏的APP Store 512*512 普通屏幕的APP.Store 120*120 6以及以下的主屏幕尺寸 180*180 6 plus的主屏幕图标尺寸 58*58 Settings on devices with retina display87*87 Settings on iPhone 6 Plus 80*80 Spotlight on devices with retina display 分享一个苹果官方开发文档的链接,里面的是各版本的图标尺寸: App lcon for iPadand iPhone

APPUI设计规范

APPUI设计规范

APPUI设计规范APPUI设计规范是指在移动应用程序的用户界面设计过程中所遵循的一系列准则和标准。

一个好的UI设计规范能够提高用户的使用体验,提升应用的可用性和吸引力。

本文将从布局、颜色、图标、字体等方面介绍APPUI设计规范。

一、界面布局1.保持简洁:尽量避免过多的元素和复杂的结构,确保界面整洁清晰,提高用户的阅读和操作效率。

2.合理分组:将相似功能的操作按钮和信息内容进行归类分组,以便用户快速找到需要的功能和信息。

3.明确导航:使用易于理解和直观的导航结构,确保用户可以方便地浏览应用的各个功能模块。

二、颜色选择1.采用品牌色:根据应用的品牌定位和设计风格,选择合适的主色调,并在整个应用中保持一致。

2.使用鲜明对比色:在重要的提示信息和操作按钮上使用鲜明对比的颜色,以吸引用户的注意和引导其行为。

3.注意色彩搭配:颜色的搭配要遵循一定的规则,保持整体的和谐统一,并考虑用户群体的习惯和审美需求。

三、图标设计1.简洁清晰:图标应该尽量简洁明了,以便用户一目了然地了解其功能。

2.保持一致性:在整个应用中使用一套统一的图标风格,以提升用户的辨识度和学习记忆。

3.考虑大小:图标的大小需要根据不同的设备和屏幕进行适配,确保在各种分辨率的屏幕上均能够清晰显示。

四、字体设计1.选择合适字体:根据应用的风格和定位,选择合适的字体类型和字号,以提升用户的可读性和阅读体验。

2.排版规范:合理设置字体的行间距、字间距和对齐方式,以保证文字内容的整齐美观和易于阅读。

3.注意字体颜色:字体颜色的选择要与背景颜色形成良好的对比,以确保文字清晰可见。

五、交互设计1.简洁明了:操作按钮和功能入口要清晰明了,避免复杂的操作流程和冗余的功能内容,提高用户的操作效率。

2.反馈及时:对于用户的操作反馈要及时明确,使用动画、声音等方式增强用户的交互感受。

3.手势操作:合理运用手势操作,提供多种途径和方式供用户进行交互,以满足不同用户的操作习惯。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

通用APP UI设计指导规范版本:V1.0.0时间:2016-08-09编写:交互设计部陈锐目录一、前言 (6)二、名词解释 (6)1.PX (6)2.PPI (7)3.DPI (7)4.Pt (8)5.SP (8)6.DP (9)三、iOS 设备 (10)1.界面尺寸 (10)1.1设备尺寸 (10)1.2设计基准 (11)1.3控件尺寸 (11)1.4关于IPhone分辨率 (12)1.5关于IPad分辨率 (14)1.6状态栏及标签栏参照 (16)2.ICON图标尺寸 (17)2.1.尺寸对照表 (17)2.2.图标圆角比例 (17)2.3.Icon命名规则 (18)2.4.APP图标变化 (20)2.6.图标网格 (22)3.布局设计规范 (22)3.1.状态栏规范 (22)3.2.导航栏规范 (23)3.3.搜索栏 (24)3.4.工具栏 (24)3.5.Stepper控件 (24)3.6.提示框 (25)3.7.分段控制框 (25)3.8.滑块\开关 (26)3.9.布局标准控件 (26)3.10.ios标准色 (27)3.11.文字规范 (27)3.12.间距和对齐方式 (28)4.交互规范 (28)5.标注规范 (36)6.切图规范 (36)6.1.软件切图区别 (36)6.2.切图规范 (36)6.3.可重复元素 (37)6.4.图片边缘锯齿和抗锯齿问题 (39)6.6.常用命名 (40)四、Android设备 (41)1.界面尺寸 (41)1.1设备尺寸 (41)1.2设计基准 (42)1.3控件尺寸 (42)1.4状态栏及标签栏参照 (43)2.ICON图标尺寸 (43)2.1.尺寸对照表 (43)2.2.设计规范 (44)3.布局设计规范 (44)3.1.48dp定律 (44)3.2.间距留白 (45)3.3.触摸区域及间距留白示例 (45)3.4.文字规范 (47)3.5.触摸与反馈 (47)3.6.小部件设计 (48)3.7.通知设计 (55)4.Material Design (65)5.Android设计指南 (65)6.标注规范 (66)7.切图规范 (66)7.1软件切图区别 (66)7.2切图规范 (66)7.3可重复元素 (67)一、前言此规范并非局限设计理念的规范,此规范只是为了提高快速开发类APP UI视觉的通用约定规范,对于大多数项目周期时间较短项目,建议设计师和前端开发人员参照此规范。

二、名词解释1.PX像素(px)简单的来说就是颜色点。

我们的屏幕都是由很多的小块的颜色构成的,这每一个颜色块我们就把它称为像素。

如下图所示。

就拿我们从小的伙伴马里奥来做个例子,整张图片就是通过很多不同颜色的点构成的,把所有的颜色点集合在一起,就成了图,而组成图片的这些点就是我们的像素了。

英文全称:pixels per inch,即像素每英寸,也叫像素密度,它是描述在水平的和垂直的方向上,每英寸距离的图像包含的像素(pixel)数目。

因此PPI数值越高,即代表显示屏能够以越高的密度显示图像。

当然,显示的密度越高,拟真度就越高。

3.DPI英文全称:dots per inch,直接来说就是一英寸多少个像素点(像素/英寸)。

常见取值120,160,240。

我一般称作像素密度,简称密度。

dpi的数值越大,就越清晰,同样拿我们的马里奥举例。

第一张图是100dpi的图片,第二章是10000dpi的图片,但是图片的大小一致。

简单点说就是一样大小的图片,第二张图片上的像素点比第一张多,所以就图片质量就更加的细腻,更加的清晰。

第一次推出iPhone时,这两个单位都是一样:1pt等于1px。

然后当视网膜屏到来,1pt 成为2px。

因此现在正确算法是iPhone4,5,6=@2x, iPhone6Plus=@3x。

(pt(point)是印刷业上长使用的单位,磅的意思,是一种固定的长度单位,可以用测量设备测量的单位。

pt=px*3/4 1pt=1/72英寸)5.SPSP是Android中专门为字体设计的单位,由于我们市场上安卓手机的分辨率越来越多,所以去适配的时候就出现了很多的麻烦,数据太多。

所以Android为了更好的适配给出了这个设计单位。

在mdpi密度的屏幕中:1px=1sp。

主要用于字体显示,可以根据用户的字体大小进行缩放,打个比方:上面对应的是三种分辨率的屏幕显示,第一个是一倍的mdpi,第二个是两倍的xhdpi,第三个是三倍的xxhdpi。

如果mdpi上的字体是12px,那么所对应的是12sp。

因为sp在任何分辨率上都不会改变,所以也都是12sp,而xhdpi的字体大小显示就是:12*2=24px,xxhdpi 的字体大小显示就是12*3=36px,以此类推。

6.DPDP也是一个为了Android适配时用到的单位,Android为了适配不同分辨率给出的单位,它也不会因为屏幕分辨率大小不一样而发生变化。

适配分辨率的时候也是记住,在mdpi密度的屏幕中:1dp=1px,其余的分辨率用倍率乘以这个dp值就行了,如图所示。

好了,介绍了基本的几个概念,那可能有的人就不明白了,为什么要了解这些概念?目前的市场上的手机有不同的分辨率:160/320/480dpi等。

所以,我们不可能去记住那么多的数据,因此我们就通过DP这个单位和与PX的转化去记住。

注意的是转化的时候不止是图标转化,间距和所有元素的大小也要相应的进行改变。

而且还有一点值得注意的是,因为我们设计常用单位是PX ,设计的时候我们用这个单位,但是开发人员则用dp ,所以在这个设计过程中去适配不同的手机,Android使用dp这个单位来进行px之间的转化,就是一个上述概念中的一个使用单位。

三、iOS 设备1.界面尺寸1.1设备尺寸1.2设计基准IphonePS设计建议采用750×1334px为基准,切图@3x,@2x,@1xSketch设计建议采用375×667pt为基准,切图@3x,@2x,@1x IpadPS设计建议采用2048×1536px为基准,切图@2x,@1xSketch设计建议采用1024×768pt为基准,切图@2x,@1x1.3控件尺寸1.4关于IPhone分辨率iPhone有4个主要的分辨率:320x480pt(4)、320x568pt(5)、375x667pt(6)、414x736pt(6P)布局不是整体缩放,而是扩大的基础上的分辨率。

例如,导航栏只调整宽度,但保持相同的高度。

它里面的元素保持不变。

iPhone6Plus的横向模式是唯一像iPad的iPhone。

换句话说,左导航将会出现,更换标签栏的布局。

差异关系各代iphone屏幕分辨率之间的差异及关系1.5关于IPad分辨率而iPad有两个主要分辨率:768×1024pt(iPad),1024×1366pt(iPad Pro)iPad 的新功能Slide Over、Split View。

,Slide Over可以从侧边调用出另外一个应用,同时在屏幕上展示。

Split View:一个屏幕,做两件事!你终于可以在一个屏幕上同时打开两个应用,一边处理表格一边编辑文档;一边浏览网页一边刷朋友圈……1.6状态栏及标签栏参照状态栏标签栏在各款iphone设备上的参照状态栏标签栏在各款ipad设备上的参照2.ICON图标尺寸2.1.尺寸对照表2.2.图标圆角比例图标R角比例:图标尺寸/R角= 5.72.3.Icon命名规则IOS7到IOS8需要的icon尺寸以及名称注:请放大观看IOS6及之前版本需要的icon尺寸及名称注:请放大观看2.4.APP图标变化图标是用户看到您的APP第一件事。

它会出现在主屏幕上,App Store商店中, spotlight 搜索和设置里。

iPhone不再支持@1x,所以你不必生成它。

APP图标现在只需要使用:@2x、@3x。

有3种类型:应用程序图标,Spotlight搜索和设置。

而iPad使用:@1x、@2x。

2.5.超椭圆从iOS7开始,已经从简单的圆角转变到一个超椭圆形。

2.6.图标网格Apple使用黄金分割在它们的一些图标上。

这让图标保持良好的比例,同时确保了美感。

虽然这是一个很好的规范,但它不是严格要求。

甚至Apple在很多图标上也省略了它。

3.布局设计规范注:以下标注的pt单位以iphone6为基准,20pt = 40px 12pt = 24px,以此类推。

3.1.状态栏规范用户依赖于状态栏的重要信息,如信号,时间和电池。

文本和图标可以是白色或黑色,但背景可以被设计成任何颜色,并与导航栏合并。

3.2.导航栏规范导航栏是用于屏幕的快速信息。

左边部分可用于配置文件,菜单按钮,而右边的部分是一般用于动作按钮,如添加,编辑,完成。

请注意,如果您使用这些系统图标,您不需要为它们单独设计。

3.4.工具栏3.5.Stepper控件提示对话框是用于输送关键信息和提示快速操作。

提示应保持最少文字,退出一定是明显。

3.7.分段控制框3.8. 滑块\开关3.9. 布局标准控件ios 1334x750px Iphone6/6s3.10.ios标准色3.11.文字规范一般的规范是按钮用44pt、小文字用12pt、正文文本用17pt和标题用20pt+。

3.12.间距和对齐方式一般的规范最低要求8pt空白或边距。

这将有足够留白空间,使得布局更容易扫描和文本更具可读性。

而且在此基础上,UI元素应对齐,文本应该有相同的基线位置。

4.交互规范必背:ios可点击区域最小为44x44pt。

更多可以参考IOS9人机界面指南:/ios9-guideline-ch1.html5.工作流程1、选择一种尺寸作为设计和开发基准;2、定义一套适配规则,自动适配剩下两种尺寸;3、特殊适配效果给出设计效果。

来看一套样例:第一步、视觉设计阶段,设计师按宽度750px(iPhone 6)做设计稿,除图片外所有设计元素用矢量路径来做。

设计定稿后在750px的设计稿上做标注,输出标注图。

同时等比放大1.5倍生成宽度1125px的设计稿,在1125px的稿子里切图。

第二步、输出两个交付物给开发工程师:一个是程序用到的@3x切图资源,另一个是宽度750px的设计标注图。

第三步、开发工程师拿到750px标注图和@3x切图资源,完成iPhone 6(375pt)的界面开发。

此阶段不能用固定宽度的方式开发界面,得用自动布局(auto layout),方便后续适配到其它尺寸。

第四步、适配调试阶段,基于iPhone 6的界面效果,分别向上向下调试iPhone 6 plus (414pt)和iPhone 5S及以下(320pt)的界面效果。

相关文档
最新文档