iOS11界面交互设计规范

又来啦!!!

目录

01:iPhone X概览

02:更新细节

03:控件


1.iPhone X概览

1.1屏幕尺寸

iOS11界面交互设计规范_第1张图片
增加了 20% 的内容垂直空间

1.2布局

概述

当为iPhone X设计时,必须确保布局填满屏幕,而不被设备的圆角、传感器外壳或访问主屏幕的指示器所掩盖。

iOS11界面交互设计规范_第2张图片
圆角、传感器外壳  
iOS11界面交互设计规范_第3张图片
标准 UI元素


设计指南:

①使用标准的、系统提供的控件元素自动布局来设计,布局应遵循遵循间隔区。

iOS11界面交互设计规范_第4张图片
安全区域

②遵循安全区域和边缘布局指南;

③提供全屏体验,背景延伸到屏幕边,工具栏始终位于底部;

④注意状态栏高度。状态栏最好别隐藏;

⑤多版本设备设计时,要确保在不同尺寸的屏幕上保留重要的视觉内容。

iOS11界面交互设计规范_第5张图片
4.7寸设备界面在 iPhone X 上会被左右裁切或是上下黑边处理

⑤iPhone X 的下边缘使用滑动手势来返回主屏幕或者进行应用切换,避免放置交互控件。角落操作不舒服,也不要放;

⑥启用自动隐藏时,如果用户几秒钟没有触摸屏幕,指示器就会淡出。再次触摸屏幕时会显示,给用户沉浸式体验。


1.3颜色

更漂亮了


1.4手势

概述

iPhone X使用屏幕边缘的手势来返回主屏、应用切换、查看通知中心和控制中心。

避免干扰系统屏幕边缘手势。系统手势优先于特定应用手势(除游戏),维系系统级操作。

①返回主屏:从底部向上轻扫一下。

返回主屏


②应用切换:向上轻扫并停顿一下,可显示所有打开的 app。

应用切换


③控制中心:向下轻扫。

控制中心

1.5其他

身份验证:人脸身份认证。 Face ID和 Touch ID不要同时引用。

键盘:表情/世界按钮和听筒按钮自动显示在键盘下方,避免在键盘中重复这些按钮。


2.更新细节

①更大的导航(Bolder navigation)

iOS11界面交互设计规范_第6张图片
标题更大更明显


②更清晰的图标(Clearer icons)

面性填充或者粗线条描边


③拖拽(Drag and drop)

iOS11界面交互设计规范_第7张图片
使用单个手指移动所选元素


④近场交互(Near field communication)

iOS11界面交互设计规范_第8张图片
读取现实设备的数据


⑤字体变动(Typographic changes

iOS11界面交互设计规范_第9张图片
变大,变重,还有动态尺寸

你可能感兴趣的:(iOS11界面交互设计规范)