您所在位置：网站首页 > IT计算机/网络 > 架构iPhoneX适配之UI设计和交互设计

iPhoneX适配之UI设计和交互设计

20页

卖家[上传人]：Baige****0346

文档编号：263253781

上传时间：2022-03-09

文档格式：DOCX

文档大小：1.96MB

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

15 金贝

/ 20 举报版权申诉马上下载

文本预览

下载提示

常见问题

1、 iPhoneX适配之UI设计、交互设计前言苹果近日发布了全新的iPhone X全面屏手机，这也是首款采用OLED屏幕的iPhone手机，它的正面设计被更多人吐槽，之前被戏称为“刘海”的凹槽现在有了更多其他名称，“眉毛”、“头帘”等等。对于用户而言，iPhone X 的刘海可能是让人又爱又恨的设计。爱的是，这一刘海像司马昭之心一样传达着我在使用 iPhone X这一个事实，正如 iPhone 7 的亮黑色一般。当然，包括 Face ID 以及 Animoji 等在内的新颖功能也会让人爱不释手。恨的原因，也很明显，这个刘海让屏幕不再方正圆润，就像一块膏药般永远的贴在你的屏幕上。看视频、看照片亦或其他，当你使用大部分应用时，它可能都会很显眼。这几天被iPhone X一顿刷屏，标题写着“iPhone X 适配、指南、设计稿” 内容却是发布会回顾和手机介绍。索性自己去官网找素材写一篇只针对iPhone X适配的贴子，与设计图无关的内容通通不提，开始。一、设计尺寸发布的iPhone 8属于常规升级，屏幕与以往的iPhone6、6S、7系列相同。在发布的新机中，只有iPhone X的分辨

2、率发生了变化，但变化仅限于物理像素层面。在真正决定屏幕内容的逻辑像素层面，新版的iPhone X与过去我们熟知的iPhone 4.7、iPhone 5.5 放大模式宽度相同。通俗的说，iPhone X可看做是iPhone 4.7 的加长版然而，事情并不是设计图加长这么简单。二、交互设计过去，我们拿到的手机是方方正正的矩形，所以整个屏幕都可以看做是安全区域Safe Area，而如今由于iPhone X屏幕上的“刘海”以及屏幕四周采用圆角的设计，对于开发者和设计师来说，这个刘海带给他们的是更多的麻烦。Apple 更新了 Human Interface Guidelines来为开发者提供适配 iPhone X 指南，从中可以看出，Apple 希望开发者将这个刘海毫无遮掩地呈现在 iPhone X 的脑袋上。指南一：当为 iPhone X 适配应用时，请确保布局填充整个屏幕，同时不被设备的圆角、传感器和下方的 Home 条所遮挡。在使用图片时，请注意长宽比差异。iPhone X具有不同于其它iPhone的长宽比，因此，全屏其它iPhone图片在iPhone X上全屏显示时会出现裁剪。同样，全

3、屏iPhone X图片在其它iPhone也会出现裁剪，所以请注意两种设备适配。指南二：不要尝试去隐藏设备的圆角、刘海或 Home 条，比如故意在屏幕顶部和底部使用黑色素材。参考iOS 原生应用可看出 Apple 的意思：刘海上下不要放任何内容。大部分使用系统提供的标准UI元素（如导航栏）的APP会自动适应iPhone X！Navigation bar、tab bar和tool bar会扩展到屏幕顶部和底部弧形区域。如果app使用自定义控件或非标准布局，要在iPhone X上运行良好需要一点修改。苹果给出的安全区域如下页面内容不能超出安全区域（Safe Area）避免将触发交互行为的按钮放在屏幕的底部，人们会在屏幕底端使用手势进入主屏或切换应用。（底部横条是Home键） iPhone X 状态栏高度更高，在电话和定位等后台任务时，高度不会变化（就是打电话和导航时，原先顶部增加的彩色带，现在变成时间信息底部的彩色气泡，见下图）值得注意的是，iPhone X 底部操作栏目进行了细微的放大。除了常见的底部导航栏外，Safari底部操作栏也有放大讲完竖屏，再说横屏。和竖屏一样，横屏的内容

4、也要放置在Safe Area中避免将触发交互行为的按钮放在屏幕的角落中。人们会在屏幕底端使用手势进入主屏或切换应用。这些系统的全局操作优先于App的操作。如果把功能放在角落里，用户操作起来也很费劲，尽量在用户手指可及区域内设计功能底部虚拟Home指示条作为去除实体Home按键后的衍生物，底部将出现一个虚拟的Home指示条，用以实现常用的交互功能，锁屏状态下向上滑动解锁，应用内向上滑动回到主屏，向上滑动并停止片刻进入多任务切换窗口，虚拟Home指示条大多数情况下将会存在于屏幕的下方，而这个虚拟Home指示条只有黑、白两种颜色。在底部有导航栏的app中，将会形成屏幕内的双下巴，部分应用如果具备从底部上滑的操作，为了和底部上滑回到主屏相区分，苹果提供了一个边缘保护的方案，第一次上滑是唤醒Home指示条，第二次才会激活原功能。而对于最受关注的全屏状态，虚拟Home指示条则会自动隐藏，不过尴尬的是，如果这时候是横屏状态，虚拟Home指示条也会跟随转动，而安卓虚拟按键则会始终存在于屏幕下方。全屏状态下点击屏幕后，虚拟Home指示条才会显示。最后说下最核心的问题，Safe Area 范围有多

5、大？比对了官网上所有与iPhone X相关的界面，可以确定，Safe Area区间如下：对于习惯用750x1334作图的设计师而言，iPhone X的到来并不会带来太大影响，iPhone X与iPhone 4.7之间的差异甚至不及当年iPhone 4和iPhone 5之间的差异 iPhone 4.7 与iPhone X 的Safe Area高度仅相差67 Point（134 px，2x）对于大多数采用瀑布流的页面来说，仅仅是屏幕高度上的变化，可以无视。但对于如：新手引导页、音乐播放器等需要单屏显示的界面就需要重新布局。由于 iPhone X的屏幕比例发生变化，对于长期靠“等比缩放”完成适配的H5活动页而言也有不小的影响，需要对页面结构进行适当微调。如果应用程序需要隐藏状态栏，请重新考虑iPhone X上的布局。iPhone X的显示高度相对于iPhone 4.7提供了更多的内容高度，状态栏和底部可以带来更多的空间。但需要就屏幕内容进行适当的调整。三、图标设计底部导航栏图标，过去的做法是当前激活模块的图标为剪影风格，其他图标为线性风格。设计师需要做两套图标。分别是一套剪影，一套线性。而现在统一为剪影，而当前激活模块的图标使用平铺色代表激活。四、系统色系增强 iPhone X上的显示器支持P3色彩空间，可以产生比sRGB更丰富，更饱和的颜色。使照片和视频的颜色更加逼真，增强视觉体验！免责声明本文以翻译designingforiPhoneX为主，借鉴参考文献并结和自己的工作经验整理而来，仅供各位设计师工作参考，非商业用途，对文中有争议或侵权行为，请及时联系我调整。谢谢你们的阅读！ -全文完-

《iPhoneX适配之UI设计和交互设计》由会员Baige****0346分享，可在线阅读，更多相关《iPhoneX适配之UI设计和交互设计》请在金锄头文库上搜索。

点击阅读更多内容

TA的资源