ios11 and iphoneX UI设计规范

2年前发布

原创文章 / UI / 教程
我是金小虎 原创,如需商业用途或转载请与我是金小虎联系,谢谢配合。

ios11 and iphoneX UI设计规范,如有雷同请各位体谅,此次总结望对各位设计界的同仁有所帮助。(如有错误,请各位指出)!

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规范

如有总结不到之处,请查看上期发布http://www.zcool.com.cn/article/ZNTU1Mjc2.html

如还有不到之处,请您提出,大家共勉!!!

如让您巨感麻烦,您可以做这样的设计:↓

 (老夫设计,开个玩笑)

资源共享

在百度云盘中下载 Photoshop 和 Sketch 中的 iPhone X UI 设计模板:

PS链接:http://pan.baidu.com/s/1jHTsfDs 密码:lb6y

sketch链接:链接:http://pan.baidu.com/s/1jIl8XTk 密码:c7bs

 

愿各位同仁和我在设计之路上越走越远;择一事,忠一生!

设计不设限......

 

380
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    没有新消息