UI必知之MD和IOS设计规范的区别

md设计规范MD（Material Design）是由Google推出的一套界面设计规范，目的是为了统一Google产品和服务的设计风格，提供一致的用户体验。

以下是MD设计规范的主要内容：1. 布局与排版- 使用网格系统进行页面布局，确保页面元素的对齐和平衡。

- 使用简洁的排版风格，结合正确的字体大小和行高，提供良好的可读性。

- 使用适当的行间距和段间距，以及合适的对齐方式，增强页面的整体美感。

2. 颜色和主题- 使用鲜明、饱满、对比度强的颜色，提高元素的可视性。

- 使用色彩组合和渐变效果，增强用户对页面的注意力。

- 使用主题样式来统一界面元素的外观和风格，提供整体一致的用户体验。

3. 图标和按钮- 使用简洁、易于辨识的图标，提供直观的操作指引。

- 使用合适的按钮样式，区分不同的操作和功能，提供友好的交互界面。

- 遵循图标和按钮的层级结构和放置位置，增强页面的导航和流程性。

4. 图像和多媒体- 使用高质量的图像和多媒体内容，提升用户的视觉体验。

- 使用合适的图像比例和裁剪方式，保持页面的平衡和一致性。

- 使用适当的过渡效果和动画，增加页面的交互性和吸引力。

5. 用户界面和交互- 设计简洁明了的用户界面，减少元素和信息的冗余。

- 使用直观的交互方式，如拖动、滑动、点击等，提供友好的操作体验。

- 设计合理的错误提示和反馈机制，帮助用户快速解决问题。

6. 响应式和适配性- 设计响应式界面，以适应不同屏幕尺寸和设备类型。

- 使用自适应布局和流体设计，确保页面元素的自动调整和适应性。

- 使用合适的媒体查询和断点设定，以提供最佳的用户体验。

7. 可访问性和可用性- 设计符合无障碍标准的界面，确保所有用户都能方便地访问和使用应用程序。

- 提供易于导航和理解的界面，减少用户的困惑和迷茫感。

- 使用明确和直观的语言，提供清晰的文字和标识。

总之，MD设计规范具有以下特点：简洁明了、直观友好、统一一致、可访问可用、响应式适配。

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. 利用层次感和动效为设计增添活力视觉上的层次感、贴近自然的动画效果可以让用户便于理解并得到愉悦感。

一.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下则为华文黑体，所有字体要用双数字号。

UI设计中安卓和苹果有哪些区别，成都ui培训去哪里？区别一：术语解读和系统平台对比android是Google公司开发的操作系统。

iOS是苹果公司的移动操作系统。

android是一种基于Linux的自由及开放源代码的操作系统。

iOS是由苹果公司开发的移动操作系统区别二：UI设计规范不一样比如现在通常设计的尺寸对比如下：iOS： 750*1334 或者 1242*2208 android：720*1280 或者 1080*1920区别三：导航方式不一样iOS的Tab放在页面底部，不能通过滑动来切换，只能点击。

Android一般放在页面顶端，可以通过滑动页面来切换Tab，当然Tab可以点击切换，Tab多的话，Tab本身也可以滑动，Android啥都可以有。

区别四：单条item的操作iOS单条item的操作有两种，点击和滑动，点击一般进入一个新的页面，滑动会出现对这条item的一些常用操作，如微信里滑动一条对话，会出现标记未读和删除。

Android中，单条item的操作也有两种，点击和长按，点击一般进入一个新的页面。

长按进入一个编辑模式，可以在里面进行批量和其他一个操作，比如删除，顶置等等。

比如小米的短信页面；长按也可以弹出情境操作栏dialog，进行操作，比如Android版的微信。

例外的是，Android里面也可以有单条item的滑动，如新版QQ，这种比较少见。

AndroidL 的短信，可以滑动进行归档。

大Android啥都可以有。

区别五：实体键iOS只有一个实体键（音量，电源不算哈），Android有四个实体键（现在很多被屏幕上的虚拟键代替，但功效是一样的）区别六：浮窗设计元素不一样Android里可以看到各种浮窗，流量，清理内存等等。

iOS暂时还不支持这样的浮窗。

越狱的貌似可以。

区别七：图标尺寸和命名规范不一样1、iOS和Android手机的APP图标尺寸规范和图标命名规范2、对比PC、iOS、Android等终端APP的交互设计的差异化学UI建议去成都CGWANG学习，他们的课程就是会教到UE的，这个是别的学校没有的，所以他们教出来的学生往往能拿到高薪去到满意的岗位。

干货：小白必知的UI界面尺寸规范一、UI尺寸基础知识1、像素密度-PPI像素密度是指显示屏幕每英寸的长度上排列的像素点数量，PPI（Pixels per inch）越高代表屏幕显示效果越精细，Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。

2、计量单位iOS和Android平台都定义了各自的像素计量单位。

iOS的尺寸单位为pt，Android的尺寸单位为dp。

说实话，两者其实是一回事。

单位之间的换算关系随倍率变化：1倍：1pt=1dp=1px（mdpi、iPhone 3gs）1.5倍：1pt=1dp=1.5px（hdpi）2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）3倍：1pt=1dp=3px（xxhdpi、iPhone 6）4倍：1pt=1dp=4px（xxxhdpi）单位决定了我们的思考方式。

在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。

设计Android应用时，有的设计师喜欢把画布设为1080×1920，有的喜欢设成720×1280。

给出的界面元素尺寸就不统一了。

Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。

而在xxhdpi设备上，则是144x144px。

无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。

所以为了保证准确高效的沟通，双方都需要以逻辑像素尺寸来描述和理解界面，无论是在标注图还是在日常沟通中。

不要再说“底部标签栏的高度是96像素，我是按照xhdpi做的”这样的话了。

下面我们通过列表看下UI界面尺寸规范，记得收藏新手设计师为什么要对线性图标Say NoUI设计师必备的Mockup网址插画为什么能在UI中这么火？。

UI设计规范一、APP界面设计规范（一）界面尺寸1、IOS界面尺寸：常见为（宽度640px、高度1136px）2、Android界面尺寸：常见为（宽度720px、高度1280px）其他尺寸：ldpi（240*320）、mdpi（320*480）、hdpi（480*800）3、Web Mobile尺寸：常见为（宽度640px、高度960px）（二）导航尺寸1、IOS导航尺寸：高度60px，留白7px2、Android导航尺寸：高度64px或48px，留白8px（三）标签尺寸1、IOS标签尺寸：高度98px2、Android标签尺寸：高度96px（四）工具栏尺寸1、IOS工具栏尺寸：高度88px2、Android工具栏尺寸：高度96px（五）列表高度1、IOS列表高度：高度88px2、Android列表高度：高度96px（六）资源状态对于资源通常设计弹起、点击、点击后、不可用四种状态，通常弹起、点击、点击后用不同颜色表示、不可用状态用低度灰色表示。

（七）字体1、IOS默认英文为HelveticalNeue，中文为黑体2、Android列表高度：默认为Droidsans fallback（八）字号字号通常按照标题及征文级别递减为42、36、34、30、24 （九）ICON1、IOS常用尺寸有1024*1024、512*512、120*120、60*602、Android常用尺寸有512*512、200*200、72*72、48*48 （十）资源插图1、长方形插图高度一般不超过背景宽度的二分之一2、缩略图两张并列高度一般不超过200px，宽度要适中有留白3、图文混排中图片一般不高过150*110。

UI基础知识启动页、闪屏和引导页的区别我们在打开APP时候总会跳出一些页面，有人说是启动页也有人叫开演图，各种叫法让人傻傻分不清楚。

那么在启动APP的时候我们看到的页面到底是什么，又有什么区别呢？右边就是关于启动页、闪屏、引导页的简单的归纳和诱导归纳，希望对大家有所能够帮助。

1. 定义当app被用户打开时，在app启动过程中被用户所看到的过渡页面（或动画）都被我们统称为启动页。

2. 作用APP在客户端打开过程中需要一定离线的时间，启动页的描绘是为了给用户开始执行一个过渡页面，缓解用户打开app时等待的焦虑心情。

类似于在app在加载过程中loading动画一样，都是为了通过的手段来解决用户的焦虑情绪。

3. 主要分类规范型和品牌市场推广型（1）规范型根据iOS和MD的官方定义来，用户打开应用能立即使用是的体验，例如苹果系统自带的一些应用，是没有闪屏的；或者把闪屏设计的和首页很像，类似国外的instagram（2）品牌推广型国内很多APP为了体现产品的品牌，增强用户对品牌的记忆，一般启动页会由：产品名称+产品形象（logo）+产品广告语（slogan）组成。

闪屏设计多数较为精简，主要用意目的是为了突出产品特点，不宜内容太多，太过复杂，且不易经常更换，打断用户对品牌的认知记忆，类似国内的淘宝、优酷等。

4. 交互方式启动页为数张静态图片，不可点击，不可跳过1. 定义闪屏页约等于启动页，又叫做开机广告。

由于闪屏主要用于活动推广，商业上的广告宣传，更易造成用户排斥心理，所以这类闪屏多数有倒计时和跳过的功能。

该页面出现在启动页之后，类似京东、爱奇艺等国内大多数应用，在冷启动出现启动页之后有时候紧接着还会出现广告闪屏。

2. 主要分类广告推广型、活动推广型、节日关怀型。

（1）广告推广型产品为了通过流量变现，在此地域区域给一些商家提供广告宣传。

（2）活动推广型有时候产品在运营过程中会一些行销活动，政治宣传该区域就作为文艺活动的宣传口。

Ui设计常见尺寸规范一、手机尺寸倍率：主流Android尺寸：（如果想做适配ios，那就选720×1280 分辨率72，像素/英寸。

如果单独设计安卓MD新规范的，那就新建1080×1920 分辨率72，像素/英寸）1.mdpi[320x480px]市场份额少，新手机不会有这种倍率，屏幕通常都特别小。

2.hdpi [480x800px、480x854px、540x960px]早年的低端机屏幕在3.5英寸档位-目前很少。

3.xhdpi[720x1280px]即平常我们看视频讲的720P，设计图也有人按照此分辨率进行设计。

4.xxhdpi[1080x1920px]，[1440x2560px]这里强调：目前1080x1920和2560×1440然后都是xxhdpi，适配难免会有误差，下边换算我会再讲到即平常我们看视频讲的2K高清，或1080P，高清视频就需支持此类像素。

如今比较常用，设计图也大多以1080这个尺寸做。

注意：720×1280尺寸的换算关系1dp=2px，文字1sp=2px。

也就是说程序员拿到我们的px单位的标注稿，自己除以2就是dp和sp了。

1080×1920尺寸就是1dp=3px，文字1sp=3px二、手机字体自从Ice Cream Sandwich发布以来，Roboto都是Android系统的默认字体集。

在这个版本中，将Roboto做了进一全面优化，以适配更多平台。

宽度和圆度都轻微提高，从而提升了清晰度，并且看起来更加愉悦。

字体Typography中文字体：思源黑体Source Han Sans / Noto（是一个字体，叫法不同而已）英文字体：Roboto注意：安卓的字号单位是SP三、android界面设计尺寸有哪些?Android界面尺寸：480*800、720*1280、1080*1920。

[单位：像素]\rAndroid比iPhone的寸尺多了很多套，建议取用720*1280这个尺寸，这个尺寸720*1280中显示完美，在1080*1920中看起来比较清晰，切图后的图片文件大小也适中，应用的内存消耗也不会过高。

高手帮你学规范！IOS版和安卓的规范解析之底部标签导航底部tab导航是现在应用里非常常见的一种组件。

关于这种最常用到的组件，你了解的全面吗？下面我们来分别看一下Material Design设计规范以及iOS 设计规范里是怎么规定的。

往期回顾：1. 高手帮你学规范！iOS和Android规范解析之提示框+警告框2. 高手帮你学规范！iOS和Android规范解析之简易菜单+弹框3. 高手帮你学规范！iOS和Android规范解析之底部浮层4. 高手帮你学规范！iOS和Android规范解析之按钮5. 高手帮你学规范！IOS和ANDROID规范解析之标签导航和分段控件Google Material Design GuidelineMD规范，先是给这个控件来了总述：底部导航栏可以使用户通过点击一下，就在顶层视图间的进行方便的切换。

用法底部导航栏主要是为手机的导航设计的。

如果是在较大的显示屏上，比如桌面，则可以使用侧边导航，如下图：底部导航栏主要用于以下两种情况：3至5个同等重要的页面间切换（注：在Material Design中，这种情况也可视情况使用抽屉导航，如下图：△抽屉导航需要在应用里方便地对页面进行切换（注：如果是1或者2个页面，则可以使用标签导航）。

△底部Tab导航和标签导航△选项位置是固定的△注意选项个数样式首先，Material Design中关于底部导航栏中的图标和文字有如下说明：o当某个选项是被选中状态，则展示该选项的图标和文字。

o如果只有3个选项，则一直展示所有选项的图标和文字；如果有4或5个选项，则被选中的选项展示图标和文字，未被选中的只展示图标（实际中这一条好像很多应用都没有严格遵守这一条，笔者也觉得没有必要严格遵守）。

其次，关于颜色，MD比较提倡使用简单的颜色，避免复杂，如下图：最后，关于每个选项的文字，需要注意文字不要折行（就是不要有两行的情况），不要出现标题使用“…”来省略的情况，不要为了节省空间而缩小文字的字号。

安卓app界面设计与苹果app界面设计的区别在app开发的行业里，还有很多手机app开发公司是没有计划的开发app的。

但在启汇网络安卓app界面设计公司里，app设计界面是开发手机app最重要的一步，所以启汇非常重视设计app界面这一环节。

Android APP界面设计的思路与 iOS 相比，安卓app界面设计存在各种不协调，app界面本身缺乏统一的规范。

虽然 Android的开放性为应用的自主发挥带来了最大的可能性，但如果系统本身能够提供标准的范例，也未必是一件坏事，毕竟许多软件并不一定需要独创的app界面设计。

从Android 4.0 开始，app界面系统在一致性上有了许多改善，那么Android app界面应该如何设计,如果你仔细观察Google近期的一系列app界面上的设计，应该能发现在一些指导性的要点，而这些app设计也正在被第三方应用接纳。

的翻版，那么它应该是什么样子,Androiduipatterns &启安卓app不应该成为苹果app界面汇网络官网针对 Android app界面设计提出了一些规范性的建议，值得参考。

虽然 Google 并没有在界面上给出太多限制，但是随着 Android 平台的发展，app 界面设计逐渐形成一套统一的规则和界面应该是一个趋势。

这是否意味着一切应用必须遵循规范呢,那倒也未必。

比如 Path 的app设计界面，就未必符合任何平台的既成规范。

如果你有开创性的界面，而且能够保证易用性，不妨去大胆创新，否则，遵循现有的良好规范可能会让你少走些许弯路。

2013年未来的手机APP界面设计趋势，说的挺有道理的。

w8的app界面设计已经取得很大的成功，很多应用也都是采取相同的app设计，如zaker，还有类似本文要展示的左侧导航菜单右边显示主要内容的app设计，通过menu或者左右拖动可以弹出左侧导航菜单，国内的应用有百度新闻、100tv、印象笔记等。

启汇觉得这样的应用很清新，看起来很让人舒服，爱不释手的感觉。

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 界面设计规范iOS界面设计规范是一套指导开发者在开发iOS应用时遵循的设计规范和原则。

这些规范和原则旨在提供一种一致且美观的用户界面体验，使用户能够轻松地使用和理解应用程序。

以下是iOS界面设计规范的一些重要原则和指导：1. 平面化设计：iOS界面设计倾向于平面化，注重简洁和清晰。

这意味着使用简单的几何形状、清晰的线条和明亮的颜色来创建界面元素，并避免过度复杂或过渡华丽的效果。

2. 一致性：iOS界面应该保持一致性，使用户能够轻松地通过熟悉的界面元素和操作感到舒适。

例如，导航栏和工具栏的位置应一致，按钮的样式和位置也应一致。

3. 响应式：iOS界面应该对用户的操作做出即时响应，以提供互动和良好的用户体验。

按钮应该在被点击时立即显示反馈，滚动和拖动操作应该流畅且实时。

4. 导航：iOS界面使用导航栏和标签栏来帮助用户浏览和导航应用。

导航栏位于屏幕顶部，并提供应用的标题、返回按钮和其他导航控件。

标签栏位于屏幕底部，并提供应用的主要功能入口。

5. 布局：iOS界面的布局应该简洁明了，避免过多的元素或信息。

使用间距、对齐和层次结构来提高可读性和可用性。

布局应该适应不同的屏幕尺寸和方向，以便在不同设备上提供一致的界面体验。

6. 字体和颜色：iOS界面应该使用清晰易读的字体，并避免使用过小或不易辨认的字体。

颜色应该搭配合理，避免使用过多的鲜艳颜色，以确保用户界面的易读性和可用性。

7. 图标和图片：iOS界面的图标和图片应该是清晰、易识别和易记忆的。

图标应该使用简化的几何形状和明确的线条来表达应用的功能或内容。

图片应该清晰且高质量，以保证在不同设备上的显示效果。

8. 用户输入：iOS界面应该提供直观且易于理解的用户输入方式。

文本输入框和按钮应该明确表达其功能，使用户了解他们需要输入什么或者点击什么。

键盘应该根据输入内容的类型和上下文进行切换，以提高用户输入的效率和准确性。

9. 无障碍性：iOS界面应该考虑到残障用户的需求，并提供合适的功能和可访问性选项。

iOS和Android规范解析——确认弹框、全屏弹框和模态视图今天介绍三个控件，前两个是Material Design（简称MD，下同）规范中的确认弹框（Confirmation Dialog）和全屏弹框（Full-screen Dialog），后一个是iOS规范中的模态视图（Modal View）。

下面先说MD中的两个。

Google Material Design Guideline确认弹框，是需要用户明确地选择一个选项的弹窗。

比如设定手机铃声时，会需要你选择一个铃声，如下图：确认弹框示例如果点击“取消”按钮，或者点击安卓系统的“返回”按钮，则该弹框消失，并且修改的内容不会保存；只有点击“好的（OK）”，才会保存修改的内容。

因为有这个保存修改内容的功能，所以“取消”按钮就显得尤为重要：如果不加“取消”按钮，则用户会不清楚修改的内容是否被保存，比如下面这个反例：这个弹框只有一个“完成”按钮。

这使得安卓系统的“返回”按钮的功能变得模糊：“返回”按钮是“取消”的作用呢？还是“确认”修改的意思呢？另外有一点需要格外注意：在确认弹框里，不要设计会弹出简易弹框或者简易菜单的按钮，因为这会增加它的复杂度。

如果一定需要使用这些弹框，则请考虑使用全屏弹框（下面会介绍到）。

确认弹框的形式，除了刚刚提到的设定铃声的列表，还可以有很多样式：所有的确认弹框都share一个共同点：弹框里只专注选择一个值。

比如上图左侧的日期选择器，只选择日期，而不是既选择日期又选择时间。

上面是MD中对确认弹框的介绍。

下面说说全屏弹框。

全屏弹框示例全屏弹框承载了一组任务，这些任务在用户点击“保存”或者“取消”之前，都不会独自生效（对，就是捆绑式销售的意思）。

在全屏弹框里，各种弹框都可以弹弹弹。

全屏弹框是所有弹框中，唯一允许弹框上面有弹框的情况；一般情况下，除非是警告框，否则所有弹框都不能在别的弹框之上出现。

至于何时使用全屏弹框，有以下几个判断标准：所需弹框包含需要输型入操作的入口，比如输入框，或者日期选择期；改动不是实时保存的，而是点击“保存”按钮之后一起打包保存；应用里没有实时保存草稿的功能；当需要进行一系列操作或设置，然后再提交它们时（其实和第二条比较相似）。

ios 设计规范iOS 设计规范是Apple为开发者提供的使用规范和指导，以确保应用程序在iOS平台上具有一致性和良好的用户体验。

以下是一些关键的iOS设计规范：1. 设计语言：Apple鼓励使用清晰、简单和直观的设计语言来创建iOS应用程序。

设计要素包括透明度、层次结构、线条和颜色。

2. 导航：在iOS应用程序中，导航是非常重要的。

设计应该确保用户可以轻松地找到并浏览应用程序中的各个部分。

常用的导航模式包括导航栏、标签栏和侧边菜单。

3. 布局：应用程序的布局应该简洁、整齐和易于理解。

设计应该遵循层次结构和平衡的原则，确保内容和功能被正确组织和呈现。

应避免过度使用动画和过于复杂的布局。

4. 图标和图像：iOS应用程序通常使用图标和图像来表示特定的功能或内容。

设计应界定清晰且易于理解的图标，避免使用过于复杂的图像。

使用符合iOS设计语言的风格和颜色。

5. 文字：文字在iOS设计中起到重要的作用。

应用程序中的文字应该易于阅读和理解，并与应用程序的风格保持一致。

字体大小应足够大，以适应各种屏幕尺寸。

6. 颜色：颜色在iOS设计中也非常重要。

应该使用适度的颜色，避免使用过于多彩和刺眼的颜色。

使用颜色来突出重要的界面元素，并与应用程序的整体风格保持一致。

7. 响应式设计：iOS应用程序应该具有响应式设计，以适应不同的设备和屏幕尺寸。

设计应该自动调整和重新布局，以确保应用程序在不同的设备上具有一致的外观和体验。

8. 交互设计：交互设计是指用户与应用程序进行交互的方式和方式。

设计应该注重用户友好性，确保操作和功能易于使用和理解。

应用程序应该提供清晰和直观的反馈，以便用户知道他们的操作被接受和执行。

9. 无障碍性：设计应该考虑到使用不同设备和能力的用户。

应用程序应提供无障碍功能，如大字体、语音识别和辅助功能。

设计应该确保所有用户都能够轻松地访问和使用应用程序。

10. 安全性：设计应该考虑到数据和隐私的安全性。

应用程序应采取必要的安全措施来保护用户的个人信息和敏感数据。

如果你不熟悉iPhone设计规范，请一口吃下这篇干货！编者按：iPhone 设计规范是每个设计师都应该学会的基础知识，无论你是新手老手，看完本文一定能彻底理解iPhone 设计规范！一、iPhone的历史每次苹果发布会UI设计师可能是最睡不着觉的人啦。

每次发布会苹果推出全新 iPhone 时，我们在 iPhone 平台上的 APP应用程序必须跟随 iPhone 的尺寸、规范等特性调整设计稿。

也就是说，几乎每次苹果发布会都是UI设计师加班的通知书！这不，2018年9月13日凌晨，苹果在 Apple Park 总部里的乔布斯剧院举行了2018苹果秋季新品发布会。

这次苹果发布了全新的iPhone Xs、iPhone Xs Max，iPhone Xr 三款手机。

噢，不要忘记我们也不能怠慢还在服役的iPhone X、iPhone Plus、iPhone6/7/8、iPhone SE 等苹果手机。

作为一个移动端UI设计师，您必须对苹果所有生产过和现役的iPhone 有所了解。

1. 起源谈到iPhone 我们必须谈谈史蒂夫·乔布斯（Steve Jobs）。

尽管乔布斯去世多年，但是他的理念仍然是现代智能手机设计的原则。

乔布斯不仅重新定义了智能手机，也定义了移动端应用程序。

这位被领养的犹太男孩在很早就对个人电脑产生了兴趣。

在游历了印度和日本之后，他进入了大学校园。

在校园里除了无线电和嬉皮士文化，他认为大学课程多半是无聊的。

但他曾特意跑去选修了一门课程：字体设计。

他所在大学的字体设计课是全美最著名的，在那个课堂上乔布斯学习到了网格设计、衬线体与无衬线体、字体的气质等设计知识。

当然在前面讲过的具有摇滚精神的字体Helvetica 也深深吸引了乔布斯。

后来乔布斯选择大学肄业并在自家车库创立了苹果公司，自此「车库」也成了创业者最喜爱的地标。

苹果公司的第一代个人电脑内置了非常出色的用户图形界面系统（即GUI），并且内置了Helvetica 等漂亮的字体。

iOS和Android规范解析——标签导航和分段控件从今天开始，将介绍iOS和Android设计规范中关于导航的部分。

今天要介绍的两个控件，经常容易混淆以至于用错。

请各位读者仔细阅读，防止以后用错。

Material Design Guidelines标签（tabs）使内容在一个较高的层级被组织起来。

一般，一个标签里需要展示与该标签相关的内容。

标签的名字需要清楚地描述该标签里所包含的内容。

标签导航一般用于从一个比较高的层级来组织信息，呈现出提纲挈领的效果。

例如，使用标签呈现报纸的不同版面。

不要使用标签导航来呈现不同页码的页面（就像搜索结果页中的第1页，第2页那种页面），也不要把标签的切换设计成可循环的样式（即，在最后一页，继续向下切换又回到第一页）。

下面所示的用法示例需要注意：一个标签里的所有内容应该属于一个大分类（比如“设置”或者“音乐”），并且标签之间内容不能有重叠。

标签可以包含图标（icon）和文字。

如果使用文字，则尽量简短。

另外有以下用法示例需要注意：标签有两种，一种是固定标签，适用于标签的数目比较少的情况。

每个标签固定的位置，有利于用户的记忆：固定标签示例另一种是可划动标签，适用于标签数量比较多的情况。

同时，可划动标签的宽度可以长短不一，根据标题长短决定。

可划动标签示例通常，标签被建议使用在以下的情况：需要经常切换视图；应用包含的视图比较少；应用提供的几个视图都比较重要（由于标签切换，相对于别的导航方式来说，操作更容易。

因此通过标签导航提供的几个视图，相对来说到达率会更好。

笔者注）。

iOS Human Interface Guidelines分段控件可以包含两个或者更多的分段选项，每一个选项作为一个独立的按钮而存在。

在一个分段控件里，所有的分段选项在长度上要保持一致。

和按钮一样，每个分段选项可以包含文案或者图片。

分段控件通常用来作为不同视图的入口，比如在地图应用里，分段控件可以让用户在“地图”、“交通”和“卫星”等视图间切换。

iOS和Android规范解析——滑动器Material Design Guidelines在MD（Material Design）中，滑动器分成了两种：连续性滑动器和分离式滑动器，从名字也能看出它们的区别了：前者是数值是连续的情况；后者是分离的，也就是滑一下，只能选择特定的数值。

连续式滑动器左：图标在左边的情况；右：图标在左右都有的情况如上图所示，连续式滑动器可以有两种布局：图标在左& 图标在左在右都有。

当按住滑动器的按钮的时候，按钮的状态会发生变化以表示“按住”的状态，如上图右边第三个（focus）所示。

另外，MD中有一种比较特殊的滑动器：滑动器的最右端展示数值，并且数值可以更改，如下图所示：滑动按钮的时候，数值跟着改变；点击数值可以进行修改。

该种滑动器适用于需要设置具体数字的场景。

分离式滑动器分离式滑动器示例分离式滑动器，是在滑动器的滑杆上预设了固定的数值，用户左右滑动的时候，只可以选择这些预设的数值。

上图第一行展示的是默认状态，第二行展示的是按住按钮时的状态，此时在滑动器上方展示了具体的数值。

需要注意的是，当用户从一个数值变到了另一个数值，页面需要展现出可以察觉的变化（要不就白调了，摊手）。

iOS Human Interface GuidelinesiOS规范中定义说：滑动器只有水平的。

通常包含一个滑动按钮，用于滑动进度；最左和最右是用于表示最小值和最大值。

滑动器示例苹果建议，可以更改滑动器的外观，来提升界面的美感：进度条的颜色，滑动按钮的外观，左右图标这些都可以进行更改。

另外，笔者也有一个建议：滑动器在音乐、视频等有播放功能的APP使用比较多，在这类应用中，往往可以加入一些实用功能或情感化元素，丰富用户的体验。

比如Youtube，在滑动的时候，会用小框展示滑动当前帧的画面，方便用户预览：在Youtube中拖动滑动器的按钮，展示画面预览（这个广告是youtube日本站上的iPhone 7 Plus广告，展现的是一对日本情侣在上海旅游时，用iPhone拍照的情景。

iOS和Android规范解析：底部浮层（上）Google Material Design设计规范和iOS设计规范中，都有从底部向上出现的浮层组件。

在Android中，是底板（Bottom Sheet）；在iOS规范中，是上拉菜单（Action Sheets）和活动视图（Activity Views）。

由于内容较多，本文介绍MD中的底板组件；iOS中的两个组件，将在下一篇文章中进行介绍。

Google Material Design Guideline在MD规范中，底板分为两种：固定底板和模态底板。

它们的区别，主要在状态是否固定——固定底板的状态是固定的，和应用界面在同一层级；而模态底板的状态是临时的，其层级位于应用界面之上。

举个栗子：另外，我们看一下MD规范给出的各部件的高度示意图，可以发现，模态底板的高度是很高的（16DPs)；原图中没有给出固定底板的高度示意，我添加了一下（蓝色部分,0DPs）：MD规范中各部件的高度示意图也就是说，如果两种底板同时出现，模态底板是压在固定底板的上面的（别想多了，呵呵呵）。

另外还有一个区别：模态底板出现的时候，页面会自带蒙层；固定底板出现的时候没有蒙层。

下面详细说一下两种底板。

固定底板（Persistent Modal Sheet）固定底板主要用于以下两种情况：在当前页展示新内容；展示与主要内容同等重要的新内容。

固定底板示例对于不同尺寸的设备，MD规范也给出了详细的说明：对于手机，不论正常或者横置的情况，固定底板都占满100%的宽度。

对于平板，则要依据内容的多少决定固定底板是否占满100%宽度：平板上固定底板占满100%的宽度平板上固定底板未占满100%的宽度对于PC，MD规范建议设计师考虑把固定底板移到屏幕左侧：PC上的固定底板模态底板（Modal Bottom Sheet）模态底板的用法有以下三点需要注意：1. 模态底板用列表或者网格的形式，呈现出操作选项。