IOS设计规范
- 格式:docx
- 大小:762.70 KB
- 文档页数:19
android,ios设计规范
在Android和iOS中,设计规范是非常重要的。
这个规范指导着开发人员和设计师如何创建高质量的用户界面和体验。
以下是Android和iOS的设计规范的一些关键要点。
1. Material Design:这是Google为Android设计推出的新规范。
它强调材料和真实感,通过阴影、深度、反射和运动来模拟真实的物体。
这个规范提供了一组可扩展的设计模板和指南,以帮助设计师和开发人员创建一致的应用程序体验。
2. Design for Android:这是为Android设计的老规范,它提供了一组最佳实践和设计指南。
这些指南包括如何设计指令、如何使用标准图标和如何设计用户界面。
3. 安卓适配性方案:由于Android的硬件和软件规范的多样性,应用程序需要适应不同的屏幕尺寸、分辨率和设备特性。
Google提供了一些适配性方案和工具,以帮助开发人员创建适应性强的应用程序。
二、iOS设计规范
2. iOS设计资源中心:这是一个面向开发人员和设计师的网站,提供了许多iOS设计资源,包括模板、图标和样式表。
总结:
设计规范对于应用程序的成功至关重要。
它可以帮助开发人员和设计师创建一致、易于使用的用户界面和体验。
Android和iOS的设计规范都是基于最佳实践和设计原则的。
开发人员和设计师应该尝试遵循这些规范,以帮助他们创建高质量的应用程序。
iOS人机交互指南主要分为5个章节:1. iOS UI设计基础知识(UI Design Basics)–主要介绍针对iOS系统的特性,在设计时要考虑到的各种影响因素。
比如多尺寸屏幕的自适应;程序的启动与停止时的注意事项;iOS的布局、配色、字体规范等等。
2. 设计策略(Design Strategies)–介绍了交互设计的一些原则以及设计实现App的建议流程。
最后举了几个案例进行说明。
3. iOS技术(iOS Technologies)–介绍了集成到iOS系统内的一些软硬件技术,方便在设计开发功能时加以利用。
4. UI元素简介(UI Elements)–介绍iOS系统中的每个UI元素(交互控件)的使用方式和注意事项。
在了解了这些UI元素后,设计者会更加了解系统提供了哪些设计元素,以便于提高开发效率和统一视觉、交互体验。
也能很好的限制住设计师们野马一样的思维。
5. 图标与图像设计(Icon and Image Design)–介绍了iOS系统对于图标和图像的设计的一些要求和注意事项。
iOS App设计原则iOS的整体设计原则,在规范的第一章已经清楚的说明:1. 设计要服从于功能(或内容)设计是为了更好的让用户使用功能、阅读内容,决不能为了追求设计上的完美而牺牲了功能的使用体验。
在规范中举了一个非常恰当的例子,比较两个计算器的设计:设计更完美、更炫目的计算器给用户带来的确是非常糟糕的使用体验。
而相对来说更简洁直观的设计,则是经过无数次迭代苹果的设计师们最终选择的版本。
3. 更加清晰明了的呈现UI首先,页面的设计要突出重点:聚焦核心功能的呈现,巧妙并适当的加入修饰元素。
其次,细节的设计要清晰的展现:文字内容在各个尺寸的屏幕中都清晰的显示,图标的设计要精确和明晰的表现出其代表的功能,颜色的运用要突出主题并尽可能干净、纯粹,使用无边框按钮以突出功能。
3. 利用层次感和动效为设计增添活力视觉上的层次感、贴近自然的动画效果可以让用户便于理解并得到愉悦感。
ios11设计规范
iOS 11设计规范以及适用范围及各种细节上的规定,共同确保
了用户在使用不同的应用时可以有一个一贯、统一的体验。
iOS 11设计规范适用于所有打算在iOS平台上开发应用程序
的开发者。
这些规范涵盖了从界面布局到图标设计,从字体大小到交互设计等各个方面。
界面布局方面,iOS 11设计规范规定了应用程序的页面布局
以及各个元素之间的间距大小等。
比如,规范中提到各个页面的标题栏应该位于导航栏的下方,使得用户可以清晰地看到页面的标题。
此外,各个元素之间的距离也需要符合规范的要求,以确保用户操作时的舒适度和便利性。
图标设计方面,iOS 11设计规范明确了应用程序图标的尺寸、形状和颜色等要求。
规范指定了图标应该是方形的,并且提供了不同尺寸的模板供设计师使用。
此外,规范中还指定了图标的颜色应该符合iOS 11的设计风格,即扁平化和鲜明的颜色。
字体大小方面,iOS 11设计规范规定了不同元素中字体的大小。
规范中提到标题应该使用大号字体,而正文应该使用中号字体。
通过统一的字体大小,用户可以更容易地阅读和理解应用程序中的内容。
交互设计方面,iOS 11设计规范规定了用户操作时的交互方式。
规范中提到,在用户进行滑动操作时,应该使用弹性效果来提供反馈。
此外,规范中还指定了用户点击按钮时出现的动
画效果,以增强用户的交互体验。
总之,iOS 11设计规范详细地规定了应用程序在不同方面的设计要求,以确保用户在使用不同的应用时可以获得一致的、统一的体验。
这些规范的遵守可以帮助开发者更好地设计和开发iOS应用程序,提高用户的满意度和使用体验。
《ios设计规范》doc版《ios设计规范》doc版一款APP的设计稿从设计到切图第一部分项目立项阶段在项目设计之初,就该进行项目归档整理,一般是是“项目名称+版本序列” 第二部分Photoshop IOS的各种分辨率。
1.640*960 iPhone 4时代的尺寸,我最开始用这个尺寸设计,还是拟物的时代呢(基本上现在应该没人用这个尺寸设计了吧);2.640*1136 iPhone5/5S/5C,一更新,咱们设计也得跟着与时俱进(应该还有人用这个设计尺寸),进入扁平的时代了;3.750*1334 iPhone6 目前是我做设计稿的设计尺寸,iPhone的尺寸,向下可以适配iPhone4,iPhone5,向上可以适配iPhone6 plus;我记得iPhone6推出后,我问我的设计总监(从业12年)应该用什么尺寸设计,他是就用iPhone6的尺寸吧,好适配,切出来就是@2x了,上下都能照顾到。
所以,我推荐做设计稿的时候使用iPhone6的尺寸进行设计。
iPhone6的尺寸其实相比于以前的5来说很多地方并没有变化,只是高度也就是内容显示区域发生了变化。
下面是IPhone 6的空白文档,我建立了参考线。
▼ 里面已经设置好了参考线,文档建立之初就设置好参考线是个很好的工作习惯我希望更多的设计师可以养成更完美的工作习惯。
上下的参考线很容易设置,因为是根据iPhone自身系统设置的,左右的参考线我习惯设置为24px,也就是显示内容距离边框的距离。
这不是绝对的,究竟是设置为左右30px还是24px比较好,通过对国内国外各种APP的对比,觉得24px更适合一些,不宽不窄,这个完全是设计师个人的设计习惯,所以不要当成什么规范,第三部分标注下面讲标注的问题,页面怎么标,标哪里,可能我涉及不到所有类型页面,但举一反五足够了;切片输出以及切片命名我们下期再说(如果有错误,请一定要及时帮我指出,我不想误人子弟)。
标注是重中之重,工程师能不能完整的还原设计稿,很大一部分取决于标注;如果不清楚你该怎么标,别怕丢人(我知道有些设计师,特别是刚接触工作的设计师并不敢张嘴去问),一定要和工程师沟通!包括怎么标,怎么切。
iOS开发中的UI设计规范随着移动技术的飞速发展,手机已经成为了人们生活中不可或缺的一部分。
而其中iOS系统的广泛使用,也使得iOS应用成为移动应用市场的主流。
在iOS开发过程中,UI设计是非常重要的一个环节。
本文将介绍iOS开发中的UI设计规范。
一、设计前的准备工作在设计前,需要确立产品目标、用户需求和产品特点。
根据不同的目标群体、使用场景和任务,定制产品的UI设计方案。
在制定设计方案的过程中,还要确定UI设计风格、色彩搭配、字体、按钮等元素的规范。
1.1 产品目标在UI设计前,需要明确产品已有的目标,确定产品推出的意义和作用。
产品目标包括但不限于以下几方面:1.2 用户需求考虑产品的目标用户,了解用户需求,把用户体验放在UI设计的首位,为用户提供最好的体验,让用户能够顺畅地使用应用,达到最好的用户体验。
1.3 产品特点了解产品特点和竞争对手的情况。
产品特点用于区分自己和竞争对手的特色和定位,UI设计需要根据产品特点进行量身裁剪。
二、UI设计规范2.1 界面元素在UI设计中,应用到的界面元素应该简单、清晰易懂,突出应用的特点、用户的需求和产品的目标。
应该避免一些缩略或模糊的字母、数字、标志和图标等界面元素,因为它们可能会让用户产生困惑。
2.2 色彩搭配色彩搭配需要符合产品的整体风格和特点。
在iOS设计中,应遵循蓝色主题色,也可以采用其他不同的色系,但必须贯穿整个应用程序中。
同时,应避免颜色太多和颜色搭配过于复杂,以免影响用户的视觉感受和体验。
2.3 字体iOS设备中自带多种字体。
在UI设计中,应该根据不同情况选择不同的字体。
例如,提示语应该使用Sans-serif字体;正文文本可以使用Serif字体或Sans-serif字体。
2.4 按钮按钮是iOS应用中的重要组成部分。
按钮不应该太小或太大,同时,要保持简单明了的样式,文字要规范、清晰,避免使用缩写或过长的词汇。
三、结语本文介绍了iOS开发过程中的UI设计规范,包括设计前的准备工作和UI设计规范。
《ios设计规范》doc版《ios设计规范》doc版一款APP的设计稿从设计到切图第一部分项目立项阶段在项目设计之初,就该进行项目归档整理,一般是是“项目名称+版本序列” 第二部分Photoshop IOS的各种分辨率。
1.640*960 iPhone 4时代的尺寸,我最开始用这个尺寸设计,还是拟物的时代呢(基本上现在应该没人用这个尺寸设计了吧);2.640*1136 iPhone5/5S/5C,一更新,咱们设计也得跟着与时俱进(应该还有人用这个设计尺寸),进入扁平的时代了;3.750*1334 iPhone6 目前是我做设计稿的设计尺寸,iPhone的尺寸,向下可以适配iPhone4,iPhone5,向上可以适配iPhone6 plus;我记得iPhone6推出后,我问我的设计总监(从业12年)应该用什么尺寸设计,他是就用iPhone6的尺寸吧,好适配,切出来就是@2x了,上下都能照顾到。
所以,我推荐做设计稿的时候使用iPhone6的尺寸进行设计。
iPhone6的尺寸其实相比于以前的5来说很多地方并没有变化,只是高度也就是内容显示区域发生了变化。
下面是IPhone 6的空白文档,我建立了参考线。
▼ 里面已经设置好了参考线,文档建立之初就设置好参考线是个很好的工作习惯我希望更多的设计师可以养成更完美的工作习惯。
上下的参考线很容易设置,因为是根据iPhone自身系统设置的,左右的参考线我习惯设置为24px,也就是显示内容距离边框的距离。
这不是绝对的,究竟是设置为左右30px还是24px比较好,通过对国内国外各种APP的对比,觉得24px更适合一些,不宽不窄,这个完全是设计师个人的设计习惯,所以不要当成什么规范,第三部分标注下面讲标注的问题,页面怎么标,标哪里,可能我涉及不到所有类型页面,但举一反五足够了;切片输出以及切片命名我们下期再说(如果有错误,请一定要及时帮我指出,我不想误人子弟)。
标注是重中之重,工程师能不能完整的还原设计稿,很大一部分取决于标注;如果不清楚你该怎么标,别怕丢人(我知道有些设计师,特别是刚接触工作的设计师并不敢张嘴去问),一定要和工程师沟通!包括怎么标,怎么切。
ios 界面设计规范iOS界面设计规范是一套指导开发者在开发iOS应用时遵循的设计规范和原则。
这些规范和原则旨在提供一种一致且美观的用户界面体验,使用户能够轻松地使用和理解应用程序。
以下是iOS界面设计规范的一些重要原则和指导:1. 平面化设计:iOS界面设计倾向于平面化,注重简洁和清晰。
这意味着使用简单的几何形状、清晰的线条和明亮的颜色来创建界面元素,并避免过度复杂或过渡华丽的效果。
2. 一致性:iOS界面应该保持一致性,使用户能够轻松地通过熟悉的界面元素和操作感到舒适。
例如,导航栏和工具栏的位置应一致,按钮的样式和位置也应一致。
3. 响应式:iOS界面应该对用户的操作做出即时响应,以提供互动和良好的用户体验。
按钮应该在被点击时立即显示反馈,滚动和拖动操作应该流畅且实时。
4. 导航:iOS界面使用导航栏和标签栏来帮助用户浏览和导航应用。
导航栏位于屏幕顶部,并提供应用的标题、返回按钮和其他导航控件。
标签栏位于屏幕底部,并提供应用的主要功能入口。
5. 布局:iOS界面的布局应该简洁明了,避免过多的元素或信息。
使用间距、对齐和层次结构来提高可读性和可用性。
布局应该适应不同的屏幕尺寸和方向,以便在不同设备上提供一致的界面体验。
6. 字体和颜色:iOS界面应该使用清晰易读的字体,并避免使用过小或不易辨认的字体。
颜色应该搭配合理,避免使用过多的鲜艳颜色,以确保用户界面的易读性和可用性。
7. 图标和图片:iOS界面的图标和图片应该是清晰、易识别和易记忆的。
图标应该使用简化的几何形状和明确的线条来表达应用的功能或内容。
图片应该清晰且高质量,以保证在不同设备上的显示效果。
8. 用户输入:iOS界面应该提供直观且易于理解的用户输入方式。
文本输入框和按钮应该明确表达其功能,使用户了解他们需要输入什么或者点击什么。
键盘应该根据输入内容的类型和上下文进行切换,以提高用户输入的效率和准确性。
9. 无障碍性:iOS界面应该考虑到残障用户的需求,并提供合适的功能和可访问性选项。
ios 设计规范iOS 设计规范是Apple为开发者提供的使用规范和指导,以确保应用程序在iOS平台上具有一致性和良好的用户体验。
以下是一些关键的iOS设计规范:1. 设计语言:Apple鼓励使用清晰、简单和直观的设计语言来创建iOS应用程序。
设计要素包括透明度、层次结构、线条和颜色。
2. 导航:在iOS应用程序中,导航是非常重要的。
设计应该确保用户可以轻松地找到并浏览应用程序中的各个部分。
常用的导航模式包括导航栏、标签栏和侧边菜单。
3. 布局:应用程序的布局应该简洁、整齐和易于理解。
设计应该遵循层次结构和平衡的原则,确保内容和功能被正确组织和呈现。
应避免过度使用动画和过于复杂的布局。
4. 图标和图像:iOS应用程序通常使用图标和图像来表示特定的功能或内容。
设计应界定清晰且易于理解的图标,避免使用过于复杂的图像。
使用符合iOS设计语言的风格和颜色。
5. 文字:文字在iOS设计中起到重要的作用。
应用程序中的文字应该易于阅读和理解,并与应用程序的风格保持一致。
字体大小应足够大,以适应各种屏幕尺寸。
6. 颜色:颜色在iOS设计中也非常重要。
应该使用适度的颜色,避免使用过于多彩和刺眼的颜色。
使用颜色来突出重要的界面元素,并与应用程序的整体风格保持一致。
7. 响应式设计:iOS应用程序应该具有响应式设计,以适应不同的设备和屏幕尺寸。
设计应该自动调整和重新布局,以确保应用程序在不同的设备上具有一致的外观和体验。
8. 交互设计:交互设计是指用户与应用程序进行交互的方式和方式。
设计应该注重用户友好性,确保操作和功能易于使用和理解。
应用程序应该提供清晰和直观的反馈,以便用户知道他们的操作被接受和执行。
9. 无障碍性:设计应该考虑到使用不同设备和能力的用户。
应用程序应提供无障碍功能,如大字体、语音识别和辅助功能。
设计应该确保所有用户都能够轻松地访问和使用应用程序。
10. 安全性:设计应该考虑到数据和隐私的安全性。
应用程序应采取必要的安全措施来保护用户的个人信息和敏感数据。
ios ui 设计标准
iOS UI设计标准是苹果公司制定的一套界面设计规范,旨在确保iOS应用程序在不同设备上保持一致的外观和用户体验。
遵循iOS UI设计标准有助于开发人员提供更好的用户体验,提高应用的质量和可用性。
一、视觉设计:
1. 图标设计:iOS应用的图标应该是简洁、清晰,并且易于识别。
图标的设计风格应与应用的整体风格保持一致。
2. 配色方案:iOS设计标准推荐使用Apple提供的系统颜色和调色板,保持一致的色彩风格可以提升用户体验。
3. 字体选择:苹果推荐在iOS应用中使用San Francisco字体,这是一种专为iOS设备设计的字体,具有良好的可读性和清晰度。
二、布局设计:
1. 响应式布局:iOS应用的界面应该能够适应不同尺寸的设备屏幕,确保在各种设备上都有良好的显示效果。
2. 导航设计:iOS应用的导航应该简单清晰,用户能够轻松找到所需的功能和页面。
3. 按钮设计:按钮的大小、样式和位置应该符合iOS设计标准,保证用户能够轻松点击。
三、交互设计:
1. 手势操作:iOS应用应该支持常用的手势操作,例如轻扫、点击、双击等,以提高用户的交互体验。
2. 动画效果:适度的动画效果可以增强用户体验,但应该避免过度的动画效果,影响用户的操作效率。
3. 反馈机制:iOS应用应该给用户提供及时的反馈,例如按钮按下时的变化效果、弹出的提示信息等。
总的来说,遵循iOS UI设计标准能够帮助开发人员设计出更加优秀的应用,
提高用户的满意度和忠诚度。
设计师和开发人员应该不断学习和了解最新的iOS
设计趋势,保持应用的设计与时俱进,以满足用户的需求和期望。
ios设计原则
iOS设计原则是指在iOS应用程序设计过程中应遵循一系列的设计原则,以保证应用程序的易用性和用户体验。
1. 清晰性与简洁性:iOS设计要尽量避免使用过多的复杂元素和视觉噪音,保持界面简洁清晰,使用户能够迅速理解和操作应用程序。
2. 一致性与可预测性:iOS设计要保持一致的界面设计和交互模式,使用户能够准确地预测应用程序的行为和响应,提高用户的操作效率和流畅度。
3. 易用性与直观性:iOS设计要注重用户的易用性,通过使用直观的视觉元素和交互方式,使用户能够快速学习和掌握应用程序的功能,减少用户的认知负担。
4. 有重点性:iOS设计要将主要的应用功能和任务突出显示,并使用户能够快速访问和使用这些功能,提高用户的工作效率和体验。
5. 平坦化:iOS设计要遵循苹果的平坦化设计风格,去掉过多的阴影和纹理,使界面更加简洁明了,同时注意保持元素的可见性和可操作性。
6. 反馈与响应性:iOS设计要及时给予用户反馈,以强化用户行为和操作的效果,增加用户的满意度和信任感。
7. 安全性与隐私保护:iOS设计要注重用户的隐私和数据安全,避免收集和使用用户的个人信息,提供安全的登录和支付方式。
8. 可访问性:iOS设计要保证应用程序对残障人群的良好访问性,支持辅助功能,如语音识别和屏幕阅读等。
9. 可扩展性与灵活性:iOS设计要考虑到应用程序的扩展性和
灵活性,支持不同屏幕尺寸和设备的适配,以适应不同用户的需求和习惯。
10. 效率与性能:iOS设计要注重应用程序的效率和性能,减
少资源的消耗和响应时间,提高应用程序的稳定性和流畅度。
竭诚为您提供优质文档/双击可除ios,设计规范篇一:ios界面设计尺寸规范ios界面设计尺寸规范一、尺寸及分辨率iphone界面尺寸:320*480、640*960、640*1136、750*1334、1080*1920等。
ipad界面尺寸:1024*768、2048*1536等。
单位:像素72dpi,在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计。
ps:作图的时候确保都是用形状工具(快捷键:u)画的,这样更方便后期的切图或者尺寸变更。
二、界面基本组成元素iphone的app界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单栏、内容区域。
640*960的尺寸设计下这些元素的尺寸。
状态栏:就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40px导航栏:显示当前界面的名称,包含相应的功能或者页面间的跳转按钮,其高度为:88px主菜单栏:类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98px内容区域:展示应用提供的相应内容,整个应用中布局变更最为频繁,其高度为:734px[下图说明:]至于我们经常说的iphone5/5s的640*1136的尺寸,其实就是中间的内容区域高度增加到910px。
ps:在最新的ios7的风格中,苹果已经开始慢慢弱化状态栏的存在,将状态栏和导航栏合在了一起,但是再怎么变,尺寸高度也还是没有变的,只不过大家在设计ios7风格的界面的时候多多注意下~三、字体大小heitisc(黑体-简,黑体-简的英文名称为heitisc。
heiti为黑体的拼音,sc代表简体中文(simplifiedchinese)),是macosxsnowleopard(版本10.6)包含的简体中文字型,也是iphoneos3.0(版本4.0后改名为ios)及ipodnano第五代以来的预设简体中文字型。
刚入门UI的小伙伴是不是不知道app该怎么切图、规范是什么?怎么和程序员同学配合,用什么工具更方便,怎么标注自己的设计稿,怎么做到一稿适配多种机型,这篇文章将一一解答你的疑问!依旧声明:这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用。
另外,技术的更新是非常快的,所以,还是要灵活运用~我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧;公司不同,流程不尽相同,但是终究还是能有些帮助。
这里我们只说IOS系统下的设计,至于Android,因为尺寸太多,涉及的东西比较乱,我整理好以后再说吧。
页面篇幅比较长,不推荐一次性看完,那样你潜意识里就会对它厌烦了,所以可以有时间读一读,看一看。
Part 1 项目立项完善的公司会把项目相关人员聚集起来,产品经理会把产品详细的用原型展示出来,包括产品定位,市场需求,主打卖点,产品性质以及各模块具体功能,逻辑跳转演示一下;之后会评估项目用时,各部门协调,项目启动。
话不多说,接到原型,那我们应该做什么准备工作呢?在项目设计之初,就该进行项目归档整理,我的习惯是“项目名称+版本序列”;没有最正确的工作方法,只有最适合自己的工作习惯。
我个人习惯把不同类型的文件划分到不同类型的文件夹里,有的设计师习惯全都放在一个文件夹里,如果文件少还说的过去,如果页面过多,就知道这样的利弊了。
工欲善其事必先利其器,基本上我做界面设计用的最多的就是PS和AI了,版本无所谓,用着舒服就行,推荐版本高一点的,低版本好多方便功能都没有。
标注工具:PxCook,目前我还没用上Mac,所以也不知道传说中的Sketch到底多神奇。
PxCook 在Windows上标注还比较顺手,虽然它还附带切图功能,但是比较鸡肋,不推荐用它切图。
切图工具:Cutterman 点击下载一款PS的插件,切图非常方便,但不支持绿色免安装版本PS,而且对PS版本要求比较高,针对CS 6的已经不维护更新了。
推荐安装官方完整版PS cc,然后自行破解。
官网上有安装使用教程,自己研究下吧,因为我也是最近才开始接触这款插件。
Assistor PS 也是一款PS的切图标注插件,也被誉为神器;我使用了下,感觉相当不错,就是标注还没太适应,推荐一下这个。
标注工具以及这两款插件我都会上传,至于安装方法去“百度一下”吧,易学易用。
Part 2 Photoshop设计尺寸现在常用的几种设计尺寸1. 640*960 4时代的尺寸,刚接触APP设计用的是这个尺寸,拟物盛行的时代(现在用这个尺寸设计的应该比较少了吧);2. 640*1136 5/5S/5C,IPhone更新,咱们设计也得跟着与时俱进(应该还有人用这个设计尺寸),进入扁平的时代了;3.750*1334 6 目前我做设计稿的设计尺寸,IPhone6的尺寸,向下可以适配4,5,向上可以适配6 plus;我记得IP6推出后,我问总监应该用什么尺寸设计,他说用IP6的吧,好适配,切出来就是@2x了,改一改上下都能照顾到。
推荐做设计稿的时候使用IPhone6的尺寸进行设计。
IP 6的尺寸相比于IP 5来说,很多系统控件尺寸并未变化,只是高度也就是内容显示区域发生了变化。
下面是IPhone 6的空白文档,我建立了参考线。
文档建立之初就设置好参考线是个很好的工作习惯,我希望更多的设计师可以养成更好的工作习惯。
上下的参考线很容易设置,因为是根据IPhone自身系统设置的,左右的参考线我习惯设置为24px,也就是显示内容距离边框的距离。
这不是绝对的,我和总监研究过,究竟是设置为左右30px还是24px比较好,通过对国内国外各种APP的对比,觉得24px更适合一些,不宽不窄,这个完全是设计师个人的设计习惯,所以不要当成什么规范,确切的说,整个屏幕你都可以随便做,但是我们这里说的是正常页面。
Part 3 页面标注标注是重中之重,工程师能不能完整的还原设计稿,很大一部分取决于标注;如果不清楚你该怎么标,一定要和工程师沟通!每个工程师实现效果的方法不同,我在这里所说的,是我的标注习惯,但应该适用于大部分的设计师和工程师。
不需要每一张效果图都进行标注,你标注的页面能保证工程师开发每个页面的时候都能顺利进行即可;这里的标注软件使用的是PxCook,先标一个空白文档,看看都需要什么吧这里要说一句,PxCook虽然可以自动读取颜色,但是还不能对PSD文档里设置的透明度读取,所以如果你用了透明色,推荐你用文字标注直接写出来原色值以及透明度。
基本上我并不使用PXCook里面的颜色标注工具,而是使用文字标注工具,因为要标识两种色值,PxCook只能显示一种色值。
一般我的习惯是PS和标注软件同时打开,因为有时候标注软件并不能完全的把PSD文件里的东西标注出来,所以标注也要灵活运用,如果无法标注,就到PS里查看一下,然后再使用文字标注说明一下。
标注颜色是使用16进制,还是RGB:都用得到,要看实现什么东西,建议标注颜色时,两种色值表达都标上(16进制&RGB)。
你需要标注的内容有:1.文字需要提供:字体大小(px),字体颜色;2.顶部标题栏的背景色值,透明度;3.标题栏下方以及Tab bar上方其实有一条分割线,需要提供色值;4.内容显示区域的背景色(如果是全部页面白色,那就和工程师说一句就行);5.底部Tab bar的背景色值。
因为页面的种类成千上万,我想每种页面都讲一下,但是不现实,希望可以举一反三。
下面的是一个比较普通的首页页面,但是基本上一款APP中应该标的元素都有了~一般页面你需要标注这些地方:所有元素统一距离屏幕最左24px(全局性的数据可以直接和工程师沟通,也可以标注,推荐标注出来)1.标题栏:背景色,标题栏文字大小,文字颜色(不再赘述);2.Banner:所有撑满横屏的大图,不需要横向尺寸,把高度标出了就可以了;3.菜单图标:图标的大小和图标的可点击区域不一定一致也就是说,图标可以做的很小,但是为了保证点击的准确性和流畅性,工程师可以把可点击区域设置的很大,这样标注和切图的时候就要注意,标注的是可点击区域的大小,切图切的也是可点击区域的大小,也就是用透明区域去补上,否则图片会模糊。
在设计的时候就要考虑可点击区域的范围,比如X宝购物车页面左侧的小圈,可点击区域要比实际小圈尺寸大很多。
这种类型的图标需要标注图标点击区域大小,图标距离屏幕最左最右以及上下的距离。
至于图标的间距,因为有些时候可能设计师不能完全做到1px不差,所以我基本不标,交给工程师让他们去处理,其实等距排列的图标不需要标间距,因为工程师还要动态适应不同的屏幕,标了间距也是白标(还是要和你的搭档沟通怎么去标注);4.模块间隔:这个位置其实不是太重要,我习惯标注上这里,麻烦能少则少。
5.图片+文字:这个应该比较常见,只标注一个单位(图+文)就可以了。
图片需要标注宽高,因为工程师要设置图片区域,从后台调取,可以这么说,软件里除了横屏撑满的图,基本上所有的图片都要标注宽高。
图片距离上下左右的距离,文字大小颜色,这里的文字其实算两个控件,标题文字以及说明文字,需要单独标出。
Tab Bar:这个位置其实比较特殊,你可以单独标注图标大小+文字大小;还可以图标文字算作一个控件,整个切出来;我们工程师的习惯是用整个的,也就是图标+文字算作一个ICON,所以我基本不怎么标注单独的图标(这里可以和你的搭档去沟通一下,看他是什么开发习惯)。
关于列表页类型的标注问题普通的列表有两种方法(去问你的搭档,他喜欢用什么方法):1.标出行高,行内元素居中;2.标出行内元素,元素上下间距,确定行高;每种元素的位置如何确定:通常标注的都是元素距离屏幕最左侧的距离,比如上图的图标元素距离左侧24px,文字元素距离左侧100px。
标注这个东西没有固定的方法,工程师的开发习惯不同,标注方法也不同。
该怎么标注虽然可以在网上找到方法,但那不一定适合你,一定和自己的搭档勤沟通,方法是死的,人是活的……所有的页面标注总结起来就是:标文字,标图片,标间距,标区域;(上述图标出现了45px的单数,因为软件自动吸附上去了显示了图标本身的尺寸,切图的时候记得输出个偶数尺寸的切片)Part 4 切片资源的输出切之前务必要和你的工程师搭档沟通一下,该如何去切才能配合他的开发。
全局性的切图常见问题①你的所有设计尺寸,包括图形效果,应该尽量使用偶数。
技术开发使用的尺寸是设计稿像素尺寸的一半,也就是说,如果你用24px的字体,技术那边就是设置为12px;所以标注的时候务必使用偶数,为了保证最佳的设计效果,避免出现0.5像素的虚边。
②切图尺寸应该提供几套?ico_car.png IPhone2G,3G,3GS使用(好像没人用这手机了吧)************** IPhone4,5,6优先加载此尺寸图片(不是必须使用这个尺寸,是优先加载调用这个尺寸)************** IPhone6 plus使用的尺寸可以简单的理解为倍数关系(其实是为了满足不同分辨率,我觉得不用过于深究),如果你使用IPhone 6尺寸做设计稿,那么切片输出就是@2x,缩小2倍就是@1x,扩大1.5倍就是@3x了。
理论上,为了达到最好的视觉效果,你应该输出三套尺寸,推荐输出三种尺寸的切片资源。
我的工程师搭档要求我给两套尺寸就可以,也就是@1x @2x的两种尺寸,因为我们没有6 plus的测试机,所以看不到效果,据他说应该不会太失真,但是为了保证效果,我还是给三套尺寸。
另外现在几乎看不到3GS了,所以需不需要提供一倍图,还是要和工程师讨论一下~@1x @2x @3x是开发工具Xcode软件需要的UI资源,命好名称后,IOS设备会自动的选取合适尺寸。
③共用资源的图片,输出一张就可以类似这种重复的按钮之类的,只要提供一张共用的资源就可以了;上面的文字是技术写上去的。
理论上按照最佳视觉效果,你应该提供多尺寸的图片;但通常我只提供最大尺寸的一张图片即可,这一点要和你的搭档沟通好,却问他需要什么方式。
④切片的输出格式文件→存储为Web所用格式位图格式:PNG 24,PNG 8,JPG在JPG和PNG两种格式图片大小相差不是很大的情况下,推荐使用PNG;如果图片大小相差很大,使用JPG。
欢迎页面,ICON一定要使用PNG格式,在不影响视觉效果的前提下,可以考虑使用PNG 8;矢量图格式:PDF,SVGIOS原生支持的两种矢量图片格式,但是支持的一般,并不能保证100%把所有图片效果渲染出来;为了保险起见,我通常不使用这两种格式,推荐还是使用位图,如果以后技术提升,100%支持SVG和PDF这种矢量格式图,那个时候也许不用提供这么多套尺寸了~⑤图标的点击区域最小点击区域问题:IOS人机指导手册里推荐的最小可点击元素的尺寸是44*44 point(点),在设备上1 point 等于1像素,所以转换成像素就是44*44像素,换算成物理尺寸大概是7mm左右吧(人机工效学研究中得出的结论:用食指操作,触击范围在7mm左右合适;用拇指操作,范围在9mm左右合适)。