锐客网

  1. 首页 > 睿知 > >

ui界面设计规范ios，什么是ui ios和安卓的规范

经验分享睿知

1，什么是ui ios和安卓的规范设计上来说这两个系统有些东西越来越通用了，目前很多Android的应用偏苹果风格，也就是说基本都是采用一套iOS设计模板来适配Android系统 。术语解读和系统平台对比android是Google公司开发的操作系统 。iOS是苹果公司的移动操作系统 。导航方式不一样iOS的Tab放在页面底部，不能通过滑动来切换，只能点击 。也有放在上面的 ， 也不能滑动，但有些Tab本身可以滑动 ， 比如天猫的 。还有新闻类的应用 。Android一般放在页面顶端，可以通过滑动页面来切换Tab，当然Tab可以点击切换，Tab多的话 ， Tab本身也可以滑动 。比如豌豆荚，百度贴吧 ， QQ 。总之 ， Android啥都可以有 。UI设计规范不一样比如现在通常设计的尺寸对比如下：iOS： 750*1334 或者 1242*2208android：720*1280 或者 1080*1920首先你要理解ui这个词的含义 。ui=用户界面 。那什么叫用户界面呢？手机，电脑 ， 智能手表，以及其他一些电子产品都有着自己不同的用户界面 。所以所谓的ui是没有固定的尺寸的 。真正的做一套ui界面，首先你的选定目前主流的屏幕尺寸 。打个比方说苹果5的分辨率是960x1136 。像这个分辨率别的手机根本用不了 。同一款app在不同的屏幕尺寸下可能都有一套自己的ui界面 。至于图标的大小你可以百度一下，有标准尺寸的 。但是现在很多异形的app都没有按照标准的来 。
2，IOS界面设计尺寸标准规范很多IOS APP UI设计稿都是以iphone6为基准的，方便向上适配iphone7的尺寸，也方便向下适配iphone5的尺寸 。所以我给大家分享iPhone6的界面设计尺寸有哪些规范 。IOS界面设计尺寸规范（以iPhone6为例）一、界面尺寸规范1、界面尺寸大小是：750x1334px 。2、状态栏(status bar)：就是电量条，其高度为：40px;3、导航栏(navigation)：就是顶部条，其高度为：88px;4、主菜单栏(submenu ， tab)：就是标签栏，底部条，其高度为：98px;5、内容区域(content)：就是屏幕中间的区域 ， 其高度为：1334px-40px-88px-98px=1108px二、图标尺寸规范1、导航栏和工具栏尺寸大小44x44px；2、标签栏尺寸大小75x75px3、导航栏的文字大小最大值是34-36px，标签栏的图标下方的文字大小为20px 。4、内容区域的文字大小是：20px 24px，26px ， 28px，30px，32px，34px 。三、设置界面的图标高度和开关滑动按钮的高度：58px四、可点击高度规范在iPhone6的原型图上，统一成88px 。在iPhone6设计稿中 ， 88px是一个常用的设计尺寸 。五、搜索栏高度规范搜索栏的高度，在iPhone6的原型图上 ， 统一成58px 。六、界面元素之间的距离规范在iPhone6设计稿中，界面元素之间的常用距离，亲密距离：20px；疏远距离：30p x 。A、疏远距离：比如 ， 所有元素距离手机屏幕最左边的距离 。B、亲密距离：比如，左边图标与右边文字之间的距离 。七、原型设计中，需要考虑不同屏幕尺寸的苹果手机 ， 在@1x的情况下的适配情况 。1、iPhone5在@2x屏幕尺寸是，640x1136px;对应的@1x，屏幕尺寸就是320x568px;2、iPhone6在@2x屏幕尺寸是：750x1334px;对应的@1x，屏幕尺寸就是375x667px;3、iPhone6Plus在@3x屏幕尺寸是：750x1334px;对应的@1x ， 屏幕尺寸就414x736px;八、iPhone6Plus的@3x，iPhone6的@2x, iPhone5的@2x的介绍1、iPhone6Plus是5.5英寸屏幕，1242x2208px-@3x的像素分辨率，逻辑分辨率是414x981px-@1x 。物理尺寸是1080x1920px 。这个物理尺寸，也是安卓机目前最流行的大屏设计稿尺寸 。2、iPhone6是4.7英寸屏幕，750x1334px-@2x的像素分辨率，逻辑分辨率是375x889px-@1x 。3、iPhone5是4英寸屏幕，640x1135px-@2x的像素分辨率，逻辑分辨率是320x757px-@1x 。总结：iPhone6的原型规范如下：1、界面尺寸布局：满屏尺寸750x1334px；2、高度电量条高度40px，导航栏高度88px，标签栏高度98px；3、各区域图标大小导航栏图标44px，标签栏图标50px；4、各区域文字大小电量条文字22px，导航栏-文字32px，标签栏字20px；5、常用的文字大?。?2px，30px，28px ， 26px，24px，22px，20px；6、常用的颜色：背景浅灰色#f2f2f2,文字深黑色#323232，边框色深灰#CCCCCC；7、常用可点击区域的高度：88px；8、单行文字的背景框的高度：88px，双行则为：176px ， 三行则为：264px；9、常用间距：亲密距离：20px;疏远距离：30px，其它距离：10px，44px等；10、按钮和文本框，原型图做成直角的 ， 圆角半径是多少，由Ui来设计；11、这种情况，需要修改原型 。单个页面的逻辑流程图或用户学习使用时间，超过其它页面平均数的3倍以上【ui界面设计规范ios，什么是ui ios和安卓的规范】
3 ， UI设计规范都有哪些轴在UI设计中是最基本、最常见的概念 ， 也是用来组织界面结构的重要核心 。简单说来，轴是在设计的时候组织一系列元素的假象线，在下面的设计图中，轴以虚线的方式被标注出来 。1、对齐轴最常见于对称元素的使用，当元素被布置成轴对称的布局的时候，会给人有序感 。就像生活中绝大多数的事情一样，我们更倾向于享受有序的的东西，它们令人感觉平稳、舒适、平易近人 。最简单的一个例子就是iTunes 程序中的专辑列表的设计，所有的专辑列表在界面的左侧保持对齐 ， 围绕虚线轴轴对称 。2、强化虽然轴是一条假想的线，但是如果周围的元素的边缘控制得足够整齐，这跳线会在视觉中变得更加“明显”的 。最好的例子是城市中的路灯构成了道路两旁建筑物之间的轴，如果一边有建筑一边没有，那么这种轴线的感觉不会那么强烈 。从产品设计的角度上来看，Twitter 的时间线设计就是一个很好的案例 ， 左侧的头像和右侧的推文共同塑造出缝隙中轴线的感觉 。3、运动当我们碰到某先线条的时候 ， 视觉会很自然地沿着这些方向运动，就如同我们站在街上，会自觉地沿着街道的两头走动 。两个端点决定了线，界定了开始和结束的地方，线，或者说轴线的存在会引导和提示运动的方向 。SoundCloud中 ， 音轨沿着一条既定的水平轴线运动，随着音乐的播放，音轨自然地自左向右匀速运动 。4、连续性如果终点是不确定的，那么你通常会沿着轴线的方向浏览/运动 ， 直到你找到感兴趣的东西，或者感到厌倦并关闭应用 。在建筑学中，未清楚界定的终点非常少见，因为建筑的修建通常没法永远持续下去 ， 但是UI设计则不一样，无限地滚动下去是无比受欢迎的设计手法 。Pinterest的APP中就是这样做的，持续不断的图片沿着中轴线的方向持续不断地滚动下去 ， 只要你有兴趣一直观看下去 。二、对称当元素被均匀地放置在轴线的两侧之时 ， 他们构成了对称的关系 。当元素被精准地在轴线两侧一一对应之时，它们就形成了完美对称 。
4，IOS UI设计规范是什么 在现在的互联网行业中，有一个职业叫做UI设计师 ， UI的日常工作就是保证高保真设计稿的设计 ， 对于IOS以及Android来说都是有不同的设计规范的，下面我们一起来了解一下IOS UI的设计规范 。01先来说说设计稿的尺寸，一般来说在做IOS设计稿的时候，设计稿尺寸我们都是选择650*1334这个尺寸，如果是1x的话，就是375*667 。02我们从上到下以1x的规范来进行了解，最上边的就是状态栏了，状态栏的高度是20，宽度都是375 。03那么状态栏都是有哪些元素呢？实际上就是信号、网络状态、时间以及电量和通知等 。04在信号栏下边就是我们的导航栏，导航栏的高度为44px 。05导航栏中肯定是有导航文字的，导航文字一般来说我们都是居中对齐，并且导航文字的大小应该为18px 。06接下来就是最底部，最底部就是我们的标签栏了，标签栏中都是我们的切换图标，标签栏的高度为49px 。07标签栏中的图标大小也是有规范的，最小的点击区域我们必须保证为24px，低于这个范围的话是不方便进行操作的 。08在图标的下方一般都还有文字 ， 这里文字的大小比较?。?可以根据图标大小来进行调整，一般来说文字大小为11、10px 。09总的来说着就我们IOS UI的设计规范了，其他还有就是内容区域的文字大小规范了，一般来说都是16、15、14、12这四个文字大小 ， 具体根据需求进行设计 。5，学UI设计类专业需要什么资格1.设计软件基础解析学习Adobe系列软件，掌握和熟练运用软件，对各种标志，广告、UI界面等商业应用制作，打下坚实的基础 。2.视觉设计思想理论明确学习目的 ， 超媒体结构设计、流程设计,独立完成项目的结构策划能力 。针对行业流程、色彩理论、色彩构成、平面构成的学习 。3.品牌设计讲授企业所涉及到的包括信封信纸、传真纸、文件夹、员工卡等办公用品；包括前台、形象墙、楼层及室内外环境导视系统；包括印刷物、影视传媒等对外宣传系统的视觉形象进行统一规范和整合 ， 最终形成一套完整的企业VI手册 。4.移动应用设计流程学习了解移动应用从项目启动到项目开发的整个流程 。5. 各系统 UI设计规范iOS、Android、windows phone，各系统间的区别 。各系统的UI界面设计的规范 。6. 手机控件设计讲授各平台中的图标元素，按钮的绘画，图形元素，各种状态的按钮 ， 以及其他控件的设计 。7. 手机启动图标设计手机启动图标的设计 。多种材质的练习，创意的表达 。扁平化图标设计 。8. 界面设计模式学习移动各平台中UI设计规范，以及各种UI设计模式 。掌握对多种界面设计方法 。9. 界面质感表现拟物化界面和扁平化界面的特点 。界面质感的表现 ， 如何丰富界面的细节 。10. 网页交互设计应用课JS/Jquery交互应用：学习HTML结构设计与交互设计的关系、 Javascript基本应用、jQuery特效设计与实现 。11. UI动画制作好的UI动效不仅可以使界面更加生动 ， 更可以使用户有良好的视觉体验 ， 运用Adobe AfterEffects软件 ， 制作良好，可用的UI动画 。12. 移动应用界面交互设计要做优秀的界面设计，一定要了解交互设计 。学习移动的交互设计5大要素，以及交互设计原则 。学习了解用户的心理需求 。13. 界面概念设计通过头脑风暴的会议，老师的引领，培养学生的创意思维、发散性思维 。从而掌握概念图的制作 。14. 界面原型设计重点学习并熟练掌握用户需求判定以及从需求调研中合理的进行总结归纳，学习用户交互界面的用户习惯培养，与精美的界面设计，突出高保真原型学习 。15. APP应用设计了解移动媒体设计与网络媒体设计的共性与特殊性 ， 针对移动平台中应用程序、UI的设计应用 。熟练掌握移动媒体设计的技能 。设计整套的APP应用界面设计 。16. 用户浏览习惯了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解用户浏览界面时的浏览习惯 。设计可用且易用的应用 。17. 网页界面设计学习图形与界面设计的基本法则，结合Photoshop、Illustrator及相关数字工具进行网页UI界面实践学习 。针对网页的前期策划 ， 控件，布局进行设计 。18. 跨平台界面制作pc平台和移动平台界面设计的区别 。学习如何设计制作跨平台的界面设计 。19. HTML5响应式设计课响应式设计的基本概念 ， HTML5与CSS3的基本应用，响应式设计实现方法 。20. 综合项目实训设计制作整套APP界面设计，从概念设计到交互设计到视觉设计的整体制作 。培养学生的视觉设计能力和交互设计能力 。需要的基础就是一些简单的美术基础和平面设计基?。?要求也不算高，你这个情况应该没问题，编程不太需要 。一般流程是这样的，大致5个阶段 ， 都会培训你一些基本需要的基础 。ps  ， illustrator  ，  dw ， indesign都会用到 。第一阶段 ui用户设计基?。╱i行业发展及ui设计师职业规划 ， 美术基础 ， 平面设计基?。夹斡氪匆馍杓疲成杓苹 。换ナ酵荆砑簆hotoshop、illustrator第二阶段 移动界面设计（图标创意思路与方法，图标的创作设计 ， 主题图标设计，ios系统android系统windows phone系统 ， ui设计实训课程）第三阶段 交互类（ucd ， 交互设计高级技术）第四阶段 流程设计（界面开发对接，流程管理 ， 移动媒体综合开发实训）第五阶段 综合项目实训及就业阶段（根据所学内容 ， 选择一种移动平台（ios/android/winphone） ， 软件界面，wui类型设计，完成初稿设计 。依据项目初期确定的需求进行验收 ， 并签署验收报告 。）天琥是国内一家采用“设计总监团队+教授级课程专家+企业专员”模式 ， 自主研发课程的培训机构 。课程研发以企业需求为出发点，持续创新教学方法，旨在培养艺术创造力强，专业技能硬，职业素养高的设计人才 。14年来，天琥课程千锤百炼，历经数十次改进与创新 ， 课程实战性、含金量遥遥领先业界 ， 已成功培养20万高薪就业学员 。UI设计几大学习模块 逐级提升设计能力1.平面设计模块：PS、ID、AI、CR四大平面软件2.电商设计模块：电商设计知识和技能、装修店铺以及电商运营3.UI设计模块：代码、动画、AXURE、网页界面设计、产品开发策划等专业技能4.移动端设计模块：ICON设计、APP设计、微信平台学UI设计专业的话 ， 只要初中毕业就可以学习的，想学可以多了解一下 。6，已经使用 Material Design 设计规范的 iOS 应用有哪些根据 ios 开发者协议，开发者原则上不能使用其他的 ui 界面 。因此，使用 google material design 的 app 很少 。所有 google 官方的 ios app 使用了 material design 的风格 。说起 style guide (即设计规范)，大部分人的第一反应就是 material design 和 ios human interfaceguidelines，我自己就是靠读这两份文档逐渐入门设计领域，国内外的设计师、开发者们自然也是对它们了然于胸 。来大公司实习之后 ， 接到的第一个任务就是维护、优化团队的设计规范网站，同时最近也经常和饿了么、随手记等互联网公司的设计师或产品经理探讨如何沉淀团队的设计 。一个完善的 style guide 是什么样的?也许 material design官网给出了一个范本，从交互、视觉、体验、开发四个维度入手，全方位诠释了平台规范一致性的含义 。尽管 material design目前的推广还不够理想，不少细节也可能并不完美 ， 但这并不妨碍国内的设计团队像它学习 。构建 style guide并不是一件简单的事，尤其对于目前快节奏的行业氛围，从前期就开始沉淀设计内容会耗费很多的精力 。就拿设计师来说，有时为了赶项目进度，连命名、标注和切图规范都不一定能做到细致，更别提去制作一份详细的设计文档了 。更关键的是 ， 在高速的迭代下，我们通常很难界定一个设计是否能够称为规范，也许下个月就大改版了，那前期所做的沉淀不就浪费了嘛 。因此，往往很多公司和团队都是到了一定的产品阶段才开始注重style guide沉淀，这时的工作重心更偏业务和体验优化，迭代也更多遵循已有的样式，规范的重要性才得以体现 。但是很容易明白 ， 沉淀这件事，做得越晚 ， 越难做好 。所以第一个问题，我们为什么需要 style guide?最简单地说 ， 是为了迭代一致性和设计开发高效性 。有一份完善的 style guide  ， 它不会直接给你提供设计稿源文件，也不会直接告诉你代码的文档细节，但是它是一个有效的索引 。设计稿可能存在于 ps或 sketch 中，代码则往往放在 git 平台上 ， 它们像是你开发迭代产品的工具箱，那么 style guide就是这份工具箱的使用说明书 。它会告诉你什么场景下要使用什么样的锤子 ， 这把锤子要和什么钉子结合在一起，使用方法又是怎么样的，该有哪些注意事项 。因此，通过style guide 我们最直观可以看到的就是“组件”，可能会在网站上放不同组件的使用规范，以及设计源文件和代码文档的地址 。这里引出了一个概念，就是“组件” 。我对“组件”的定义就是：一些符合整体平台设计规范，具有较高可复用性且具备完善设计、使用说明，代码文档的控件 。因此，组件应当是有比较大概率反复被用到的——比如按钮、表单、图片样式等;组件也应该易于衍生出新的子组件——比如基于某个表单的子表单，修改了颜色或滚动样式等;最重要的，组件必须有完善的设计规范和代码文档，这才能让设计师和工程师复用它们时效率倍增 。然而在实际工作中，我遇到的一个最大的问题就是，如何定义一个内容是否为组件 。从定义上来说，将一个设计内容确定为组件的成本是不低的，主要除了产出那些必要的信息以外，还需要特意撰写设计规范文档、开发文档 ， 上传到某个网站或者服务器上，最重要的是还需要后期维护 。很多内容在用的时候很难推测未来是否会经常复用，在纠结要不要投入精力去做成组件时，往往就放弃了 。另一方面，由于产品的快速迭代 ， 组件更新往往也可能变得很频繁，这时新增或修改组件还需要一个小组去评估确认，并且要更新相关代码和文档，最后还要通过网站让所有同事都知道这件事，确实要花费不少的精力 。基于这样的一些问题，不少团队的 style guide 都没有做得太好，毕竟这是一件需要长期督促的工作，一旦有些许的松懈，style guide就会逐渐落后于极快的迭代速度 ， 漏洞越来越多，沉淀的内容越来越陈旧，最后导致需要花费更大的精力去维护它，可能慢慢就荒废了 。所以，做好 style guide就是在和快速迭代赛跑、是在对抗人的惰性，但如果能够坚持下去 ， 一定会让团队受益匪浅 。从这段时间的工作出发，我提出几个可以帮助有效构建 style guide 的方法和要点 。第一，如果产品规模并不太大 ， 可以考虑构建页面到组件维度的 guide形式做设计的时候，尤其是在已有的产品页面上修改，我做的最多的一件事就是截图 。把现有页面截下来，然后直接在图上修改，增加新的组件 。但是，有些页面并不是随时可以得到的，比如做支付成功的页面 ， 或者做退款的页面，往往需要有一个真实订单才可以截到这些内容 。所以除非你事先就把截图整理好，不然每次都要去对付这些事，真的挺烦的 。因此，我们可以把产品先模块化 。比如电商产品的 detail页是一个模块，导购是一个模块，支付交易又是一个模块，然后把每个模块的线上界面做好记录，存放起来 。同时，最好在每个页面旁边提供这个页面的设计源文件下载 。另外，在每个页面上可以简单注视一下用到了哪些组件，并提供这些组件规范的链接 。这样做的好处就是 ， 从查找页面会非常简单，并且组件以页面为依托，更容易查找对应的组件，也很方便理解组件的实际使用场景 ， 避免光看规范文档但是脱离了场景的情况发生 。第二，严格要求设计稿的命名规范我和开发同学聊下来，使用 style guide最大的问题就是，经常找不到设计稿里用了什么组件 。本身组件的命名可能很代码化 ， 比如xui/button_homepage，当复杂起来之后，光在规范网站上搜名称是很难定位到目标组件的 。因此，除了界面维度的索引，将设计稿中组件命名规范非常重要 。以 sketch 为例，经常我们画板的名字是 button copy、button copy copy 3，再加上一些 group 操作之后，甚至连button字样都不见了 。如果只是按钮，好歹还容易认知，但是如果是面包屑、逃生舱等快速入口，或者复杂的表达，就真的很难定位了 。所以在设计软件中时刻注意每一个图层的命名，虽然有些繁琐，但在让设计稿更严谨之余又能极大地帮助开发同学进行定位，真的很有必要 。第三，严格规范组件更新制度都说 ， 每件事做到最后 ， 最大的阻碍在人本身，这真的太正确了 。style guide本身作为一种规范，方便的是设计师和工程师，因此他们对设计沉淀的贯彻程度几乎直接影响了规范的建立和维护 。一个组件的新增，需要有特定的设计师和工程师来审核，这个人数不要太多，因为人数越多牵绊就越多 。每个组件可以对应到特定的负责人，主要可以是这个组件的设计师和代码编写者，同时源文件必须同步显示在网站上，让其他设计师可以直接下载，但若有修改，则应该找负责人来提交审核 。只要制度执行够好，这种方式可以平衡精力的开销 。凡是和稍大的设计团队同学聊，都会遇到设计规范的问题 ， 所以今天也结合自己的实际工作提出一些想法，希望给大家一定的启发，也是督促我自己在接下来的工作中把设计沉淀做得更好一些 。

    推荐阅读


    上一篇：程序语言脚本语言有哪些，脚本编程语言有哪些较普及的是哪几种

    下一篇：好用的编程语言，编程语言有哪些那个好用