火星网校
ios11 and iphoneX UI设计规范
发布时间：2024-01-25 14:41:04 浏览量：180次
ios11 and iphoneX UI设计规范
近期苹果发布了ios11系统、iPhone8、iPhone 8 Plus、iPhone X等，but 网上的设计规范零散，于是入行两年的我做了一些总结，如有雷同请各位体谅，此次总结望对各位设计界的同仁有所帮助。（如有错误，请各位指出）！
iOS 11
iOS 11是苹果公司研发的操作系统。北京时间2017年6月6日凌晨1点， WWDC（苹果全球开发者大会）2017在加州圣何塞麦克恩利会议中心召开，苹果系统iOS 11正式亮相。
正式版iOS 11在2017年9月份随着新品iPhone的发布推送更新升级。2017年9月20日，iOS 11正式版发布，增加的特定功能是：二维码扫描、诈骗短信识别、拼音键盘以及上海话语音识别等,其中，二维码扫描还支持“扫码解锁”摩拜单车。
动态效果
Dock 可以出现在任何应用的界面上，只要从屏幕下方划出就可以了。长按一个应用图标，可以将它拖到正在使用的应用之上。
也就是说，屏幕上会同时显示出两个应用，再次拖动一个应用的边缘，界面就演化成 1：1 或者 1：2 的分屏。这个操作的过程有些细节，比如拖动应用边框，界面较大的那个会在边缘向内收缩——这是在告诉你它即将缩小、另一个应用要出现在隔壁了。
动态特效
比如录屏，点击它你会看到一个从 3 到 1 的倒计时，然后它才开始录屏；电池图标点一下会变成黄色，用来开启省电模式。更多的情况下，长按图标会进入一个二级页面，比如屏幕明暗的调节。这让你更直观的看到亮度的变化。
锁屏界面
Apple Music 在锁屏上占据的位置更少，它变成了一张卡片，显示歌名和控制按键。原本 Music 会占据一整个锁屏，有些第三方应用还会在这里展示滚动歌词。现在的样子更清新一些了。
搜索顺序
在Spotlight 键入关键词，紧接着它的是推荐的关键词、通讯录、短信内容等等融合在一起的一个下拉菜单，在这下方才是与这个关键词有关的应用程序。在 iOS 10 上，这个顺序是反过来的。以及，Spotlight 会一直顶在主屏左边、也就是摆放各种插件的界面。
模块变样
Apple Music 在控制中心中有点特殊，如果你长按，会看到这个框上不仅显示正在播放的歌曲名称、以及暂停播放和前后首按钮，右上角还有一个小小的信号图标，这里可以让你切换正在使用的蓝牙设备，比如 AirPods、各种音响。相比之下，iOS 10 切换蓝牙设备的时候还需要你到设置中找到“蓝牙”，再一个个查看。
拖动图标
同时拖动多个图标到文件夹，这也是效率提升的体现，如果你要把几个应用拖进某个文件夹，iOS 11 上可以长按一个图标、同时点选其他应用，就可以把它们几个同时拖进目标文件夹之中。手机上也支持这个操作。
相关UI
一、图标
在比较中寻求进步
iOS 10 VS iOS11
2PX线性图标
特点：1.未选中时图标是以2px线框形展现，选中后的当前页以填充形态展现
2.设计、语言一致性，图标精致轻巧。
面性图标
特点：用轻量化的面性图标代替2 PX的线性图标，以较为圆润的外观展现，使整体更加具有亲和力。
二、字体
iOS 11粗体标题
粗体
特点：粗体，且字体像素大，标题醒目（开个玩笑：典型的老夫设计）
在扁平化设计中的优点：在扁平化设计中文字排版影响着信息层级展示的清晰与否，通过文字的字号、字重、颜色等的对比去建立清晰的信息层级，而不用太多的装饰元素。
三、设计元素
圆角、卡片化、投影元素
特点：圆角弧度的增大让用户的视觉更轻快，柔和；卡片式设计贯穿在界面各个图文排版中，起到了规整图文内容的作用。投影元素的加入，令设计元素更加独立醒目，强有力的抓住用户的注意力。
四、界面布局中的留白
特点：大标题文本包含一组带有图片和描素的元素，组元素和组元素之间保持较大的间距。
优点：设计元素和元素之间保持足够的间距，可以减少用来区分层级关系的不必要装饰块元素，使界面简洁、干练。
支持设备
iphone5s及5s以上
ipad air/air2及以上
ipod touch第六代
iPhone X
iPhone界面规范
不同机型升级iOS 11效果展
iPhone X规范
热门课程推荐
热门资讯
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
2. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
那么,要学习UI设计就要学习哪些课程呢? 其实,UI设计课程涉及到许多领域,一般分为艺术设计课程、设计辅导课程、图形课程、测试课程、动画示范课程等几...
-
8. Photoshop操作教程：自制电子印章 | PS技巧详解
想要学会制作电子公章吗？跟随本教程，详细介绍Photoshop操作步骤，让您轻松掌握PS技巧，制作精美电子印章。
-
9. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
10. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
最新文章
