用户界面设计中的 IOS14 设计规范
你了解UI设计的规范吗?
很多新人在开始做移动端UI设计的时候,对界面的尺寸规范不是那么清楚,很多时候都是凭借自己的感觉和经验去设计,导致做出来的页面总是不那么尽如人意,从而一遍遍修改,拉低了工作效率。
那么,今天我就跟大家聊一聊,设计规范的那些事!
什么是设计规范?
通俗来说,设计规范是围绕在某种风格或者大型设计项目下形成可视化、数据化的标准,针对相对独立的体系建立的统一遵守条款。
UI设计规范是基于用户界面而制定的一套可复用设计库,也是为了方便设计师、开发和测试人员共同协作,而遵循的规律和法则。
iOS设计规范
每个设计平台有不同的设计规范,今天先说常用的iOS设计规范。iOS 与其他平台不同,主要是清晰、顺应、纵深三大原则。
9月17日,苹果正式发布了iOS 14的新版系统,这次较大的亮点,便是iPhone桌面UI新增“小组件”功能,让原本规规矩矩的 iPhone主页发生了很大的变化;更进一步的如果你足够敏锐,就一定会第一时间想到小部件是需要 UI 进行设计的。
下面我们着重来看一下新增的几个章节。
启动
规范导航:应用框架_2.1启动
这里注意把启动 (Launching) 和启动页 (Launch Screen) 区分开来,启动指的是应用启动的整个过程,而不单单指启动页面。
iOS对应用启动的要求就两个:快速,无缝。
快速指的是利用启动页面来缓解用户的等待感,甚至可以设计一张与应用首页差不多的启动页,骗过用户的认知。
无缝则指的在启动的过程中不要请求设置信息、不要要求评价、不要显示授权许可和免责声明,总之,不要打断用户在启动过程中的体验。
苹果铅笔
规范导航:用户交互_3.2苹果铅笔
苹果铅笔作为 iPad 的杀手级配件,其硬件灵敏度、功能完善度和对 iPadOS 的集成度都已经达到了很高的水准。其中,开发者可以利用 Apple Pencil 触控的三层纬度即高度 (Altitude)、压力 (Pressure) 和方位角 (Azimuth) 来设计一套优异且完善的手写交互体验。还可以自定义双击笔身的功能,让 App 和 Apple Pencil 更加契合,让用户在 iPadOS 当中流畅的工作。
而且值得一提的是,新的 iPadOS14 已经支持 Apple Pencil 全局手写输入,不需要再呼出那个半屏高的键盘来打字了。
游戏控制器
规范导航:用户交互_3.9游戏控制器
其实 iPadOS 刚刚出来就已经支持了游戏控制器 (游戏手柄),这一章节主要旨在指导移动游戏开发者 (或者游戏UI/UX设计师) 如何利用游戏手柄,来带给用户最好的游戏体验。
指针
规范导航:用户交互_3.13指针
iPadOS13.4 以及 iOS13.4 版本引入了动态的指针效果,苹果依然在原有的指针交互上更进一步做出了更多的改变,比如说高亮、抬升、悬浮三种内容效果,以及随内容效果而无缝变形的指针形状。
这里值得 UI 设计师注意的重点概念,UI设计中的IOS14设计规范https://www.aaa-cg.com.cn/ui/2709.html叫做元素的命中区域 (hit regions),这个区域可以帮助指针进行磁吸定位,并定义指针变形的边界,所以在做 iPadOS 的适配时需要格外注意元素的 Padding。
小部件
规范导航:系统功能_4.11小部件
作为此次 iOS14 更新的重点,小部件的设计要点还是相当多的。简而言之,除了之前概述中提到的三种尺寸之外,对于设计师来说更重要的是利用图形、图片、文字和排版设计出一个有重点、实用且优美的小部件。iPhone 用户头一次可以这么大程度地自定义自己的桌面,所以小部件的设计如何设计得出彩又不浮夸,对设计师来说也是一种考验。
官方给出了小部件的标准 Padding,为 16pt,更紧凑的为8pt。我们也制作了一份小部件边距模版。
侧边栏
规范导航:UI栏_7.3侧边栏
不得不说,iPadOS 正朝着 MacOS 大跨步前进,从之前的支持鼠标、游戏手柄,到现在引入 MacOS 应用经典的侧边栏,再到这次 WWDC20 展示出的运行在 A12Z 上的 MacOS Big Sur,我们似乎可以看到 iPad/Mac 融合正在逐渐从未来,向现实走来。
下拉菜单
规范导航:控件_下拉菜单
我们可以注意到苹果的下拉菜单,也会有主屏快捷操作菜单的影子——左边标题,右边符号。不过鉴于现在国内 APP 早就用上了自己设计的下拉菜单,以后估计也不太会去向官方靠拢,这一趴看看交互原则就好,具体设计还是各玩各的。
结尾
更新介绍就到这里结束了,实际上本次规范更新的幅度并不大,尤其是对 iOS 来说,但依然涵盖了几个比较重要的点比如小部件。希望各位对官方规范保持最新的理解,在工作中游刃有余。因此,您现在已经了解了与UI设计师的工作相关的主要技能。如果您想了解更多信息,请给我点个关注,我之后还会发包含有关在该领域工作的更多相关文章。
上一篇: iOS - 毛玻璃效果说明
下一篇: 聆听苹果设计师阐述他们的设计理念
推荐阅读
-
在 Mac 主机上的 Docker 容器中实现图形用户界面显示(运行图形用户界面应用程序)
-
苹果公司的 AR 人机界面设计规范
-
用户界面设计中的 IOS14 设计规范
-
微信 "扫一扫 "物联网,全面揭秘 "扫一扫 "背后的扫盲技术!-1.1 扫一扫感知物体是做什么的? 1.1 微信扫一扫是做什么的? 扫一扫识物是指以图片或视频(商品图片:鞋/包/美妆/服饰/家电/玩具/图书/食品/珠宝/家具/其他商品)为输入媒介,挖掘微信内容生态中的有价值信息(电商+百科+资讯,如图1所示),并展示给用户。这里的电商基本涵盖了微信小程序覆盖上亿SKU的全量优质电商,可以支持用户货比N家并直接下单购买,百科和资讯则聚合了微信内的头部自媒体如搜狗、搜搜、百度等,向用户展示和分享拍摄商品相关的内容资讯。 图 1 扫一扫识别功能示意图 欢迎大家更新iOS新版微信→扫一扫→识货,亲自体验,也欢迎大家通过识货界面的反馈按钮向我们提交反馈意见。 扫一扫识物实景图展示 1.2 扫一扫识物有哪些使用场景? 扫一扫识物的目的是为用户访问微信内部生态内容开辟一个新窗口,以用户扫图片为输入形式,为用户提供微信生态内容中的百科、资讯、电商等作为展示页面。除了用户熟悉的扫一扫操作外,我们还将进一步拓展长按操作,让用户更方便地进行扫一扫操作。"扫一扫知事 "的落地场景主要涵盖三大部分: a. 科普知识: a.科普知识。用户通过扫一扫,可以在微信生态圈中获取该对象的百科、资讯等常识或趣闻,帮助用户更好地了解该对象; b.购物场景。同样的搜索功能支持用户看到喜欢的商品立即检索到微信小程序电商中的同款商品,支持用户即扫即购; c.广告场景。扫一扫识别物体可以辅助公众号文章、视频更好地理解其中蕴含的图片信息,从而更好地投放匹配广告,提高点击率。 1.3 Sweep Sense 为 Sweep 家族带来了哪些新技术? 对于扫一扫来说,大家耳熟能详的应该就是扫一扫二维码、扫一扫小程序码、扫一扫条形码、扫一扫翻译了。无论是各种形式的编码还是文字字符,都可以看作是图片的一种特定编码形式,而物的识别则是对自然场景图片的识别,这对于扫一扫家族来说是一个质的飞跃,我们希望从物的识别入手,进一步拓展扫一扫对自然场景图片的理解能力,比如扫酒、扫车、扫植物、扫人脸等服务,如下图3所示。 图 3 Sweep 家族
-
用户界面设计的未来
-
测量两个人之间的关系从用户输入的姓名中获取笔画数的小程序!
-
了解 DM6 (Damon) 数据库中的用户、登录用户和模式
-
在 python Django 中向用户分配库存包括定义库存模型、用户模型和分配库存的逻辑。
-
openEuler郑州用户组成立!openEuler与hyperfusion携手共建河南地区用户生态 - 开幕致辞 超融合操作系统业务总经理、openEuler委员会成员蒋振华先生为本次活动致辞。 在本次活动的致辞中,他提到,作为openEuler社区早期的成员,超融合见证了openEuler从成立到在各行业商业落地,再到跨越生态拐点的过程,感谢openEuler提供了一个全产业链共同创新的平台,共同推动创新技术的商业落地。 同时,本次活动得到了郑州市郑东新区大数据管理局、郑州中原科技城投资服务局的大力支持。 郑东新区大数据管理局曹光远 在活动致辞中表示,openEuler的应用和*应用设施的深度优化,为郑东新区数字化转型提供了安全、可靠、高性能的技术基础;郑州中原科技城招商服务局王林表示,郑东新区欢迎所有openEuler生态相关企业扎根当地,围绕openEuler社区共同发展,形成合力。 openEuler社区及运维功能介绍 openEuler技术委员会委员胡峰 openEuler技术委员会委员胡峰先生在本次活动中介绍了openEuler社区目前发展的整体情况,并重点从技术层面介绍了openEuler的运维功能。 openEuler 晚会 胡峰先生介绍智能运维工具 A-Ops 和 openEuler gala、 阿波罗 Apollo、智能漏洞管理解决方案等新功能,以及涵盖各种运维场景的精品运维组件。在*交流环节,许多用户就目前使用的 openEuler 在*交流环节,许多用户就自己在使用openEuler过程中遇到的一些问题与胡峰先生进行了进一步的交流。 软硬结合,构建多样化算力操作系统 Hyperfusion 基于 openEuler 的基础上,结合自身软硬件技术积累,推出了富讯服务器操作系统 FusionOS FusionOS. FusionOS 首席架构师张海亮 分享了 FusionOS FusionOS首席架构师张海亮分享了FusionOS的软硬件协同优势、卓越的性能和可靠性,以及FusionOS在金融、运营商、*、互联网等行业的实践案例,引起了众多用户的兴趣,分享结束后,不少参会者就FusionOS的特点向讲师提问并进行了交流。
-
在 WordPress 中获取用户 ID 的 8 种方法