首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

苹果iOS 13 新设计规范全面解析

考虑选择色调颜色以指示整个应用程序交互性:Notes,交互元素为黄色。日历,交互式元素为红色。如果您定义表示交互性色调颜色,请确保其他颜色不与之竞争。...当您需要自定义颜色,将颜色集资源添加到应用程序资产目录,并指定颜色浅色和深色变体,以便它可以适应当前外观模式。 避免使用硬编码颜色值或不适应颜色。 ?...例如,交叉或重叠元素(例如网格线条或条形不透明度方面看起来更好。 通常,为UI元素使用语义定义系统颜色。上下两图分别为默认颜色和无障碍颜色: ? ?...3 情境菜单(Contextual Menu) iOS13及以后版本,你可以使用情境菜单(Context Menus)让用户访问与屏幕项目关联其它功能而不用切换界面。 ?...你可能需要一段时间来适应这个交互变化,就iOS 13 Beta版本来说,静电觉得很痛苦。)

4.4K40

iOS应用黑暗模式设计终极指南(附套件下载)

本指南中,我将逐步解释为iOS应用设计暗模式过程。本文将重新设计WhatsApp,基于Apple的人机界面指南。 ? WWDC 2019大会上,苹果公布了iOS 13所有新功能。...在所有超级令人兴奋功能,关于黑暗模式部分最让我兴奋。对于那些社交媒体上关注我的人,您可能知道我是“黑暗模式”忠实粉丝。使用iOS 13后,人们可以选择采用深色系统外观。...02 层级结构 与Google层次基于颜色和阴影差异不同,Apple仅将界面层次视为颜色。 ? 准则提供了4种可用于显示层级颜色。它们被称为“系统背景色”。...这就是与开发人员进行“和谐”对话所需全部知识。 05 填充颜色和灰色 iOS准则提供了4种填充颜色(也为灰色)和6种其他灰色可供选择。它们是界面上所有元素理想选择,例如字形(图标),UI控件等。...但是,这9种颜色亮模式和暗模式下略有不同。如果您选择使用这些系统强调颜色,则该应用程序将自动将亮模式色调颜色更改为暗模式色调颜色。 ? 你会发现亮模式和暗模式下颜色是稍有差异,请务必注意。

3.2K10
您找到你想要的搜索结果了吗?
是的
没有找到

不懂设计产品不是好开发

我们需要在我们用户界面应用色彩对比,不仅是因为它看起来不错,而且主要是因为色彩可及性。我们应该确保前景(文本、图标)和背景之间颜色对比是适当。...Typography 3.1 Text Styles Material设计有13种不同文本样式,用于屏幕上格式化和绘制文本。...在演示应用程序,我仍然body和captions中使用了富有表现力Rightheous字体,以达到演示目的,尽管不推荐这样做。 4. Shape 形状被用来表达品牌和强调用户界面的不同部分。...没有策略情况下,将形状积极地应用到每一个组件上,会分散注意力,减少关注度,并产生歧义。例如,条形图上应用形状可能会导致对所表示数值模糊不清。...图标字体是用字体字形绘制,但不是字母,而是图标和形状。Android项目中,我们将SVG文件材质设计图标作为XML文件添加到资源文件夹

2.5K20

iOS——配适深色模式

适配深色模式 苹果在iOS13为iPhone引入了深色模式。那作为成为iOS程序员我们也有事情做了,就是适配深色模式。...适配深色模式过程,作为开发者,我们其实只要解决俩个问题: 1、如何判断当前系统颜色模式? 2、我们应该对哪些UI内容适配深色模式? 如何去判断当前系统颜色模式?...颜色 iOS13以后,UIKit给我们提供了很多动态颜色,以system开头都是动态颜色,当我们给 UI 控件设置了动态颜色以后。 UI 控件就会自动根据当前是否是黑暗模式展现出来对应颜色。...因此实际开发,我们可以创建我们自定义动态颜色。... iOS 13 , UIKit 为 UIColor 所提供 新 API 来创建我们自己动态颜色

1.5K10

iOS开发中标签控制器使用——UITabBarController

iOS开发中标签控制器使用——UITabBarController 一、引言         与导航控制器相类似,标签控制器也是用于管理视图控制器一个UI控件,在其内部封装了一个标签栏,与导航不同是...,导航管理方式是纵向,采用push与pop切换控制器,标签管理是横向,通过标签切换来改变控制器,一般我们习惯将tabBar作为应用程序根视图控制器,在其中添加导航,导航在对ViewController...:(BOOL)animated;    //是否正在自定义标签布局 - (BOOL)isCustomizing; 设置tabBar颜色相关: //设置渲染颜色,会影响选中字体和图案渲染 @property...//已经开始编辑标签          - (void)tabBar:(UITabBar *)tabBar didBeginCustomizingItems:(NSArray<UITabBarItem...,//记录图标     UITabBarSystemItemMostViewed,//全部查看图标 }; UITabBarItem常用属性: //设置选中图案 @property(nullable, nonatomic

1.5K20

安卓13来了!首个开发者版公布,三方图标随壁纸变色,电量管理系统也安排上了

来一起看一看~ 界面语言隐私全面更新 Android 13,最显眼界面的变化,尤其是主题图标的改变。 之前我们在给手机换壁纸时候,App图标颜色一直不会改变,有时候看起来很违和。...这次谷歌把动态颜色功能扩展到了所有应用上。 开发者只需要提供一个单色图标,在用户更换壁纸,桌面上图标就会根据壁纸色调自动调整。...例如我们把界面改为深色模式之后,应用图标也随之变为深色: 面对不同色调壁纸,App颜色也会随之更改: 这项功能最初会在Pixel手机上应用,不过谷歌也正在和制造商沟通,把它拓展到其他设备上。...其次,Android 13还在语言方面做出了调整。 之前设置修改语言,手机上所有文字都会更换,不能单独设置某个App语言。...其他更新 Android 13还添加了可编程着色器,渲染动画可以呈现涟漪效果、模糊效果和拉伸过渡滚动效果: 之前曾经爆料电池管理系统TARE也将上线。

70220

iOS14开发-UIViewController

程序需要跳转地方调用performSegue(withIdentifier: , sender:)方法完成跳转。 纯代码 跳转界面:present。 返回界面:dismiss。...iOS 13 之后,模态跳转并非全屏显示,如果需要全屏显示,需要手动设置。 两个概念 presentedViewController: 被 present 控制器。...被代理对象(需要传值 UIViewController) 声明协议,协议定义传值方法,方法参数个数与类型取决于需要传值个数和类型。 UIViewController 声明一个代理属性。...接收值 UIViewController 实现需要传值 UIViewController 闭包属性,闭包实现拿到传过来值进行使用。...iOS11 之后可以设置大标题。可以通过 storyboard 直接设置,也可以通过如下代码设置: // 所有界面显示大标题 navigationController?.

2.3K20

最新iOS设计规范七|10大视觉规范(Visual Design)

iOS应用,您可以配置界面元素和布局,以iPad上执行多任务处理拆分视图中,屏幕旋转以及在其他设备上自动更改形状和大小。设计一个适应性强界面在任何环境下都提供出色体验非常重要。...例如:整个界面上下文中贯穿APP图标颜色,就是一个很好方法。 不要让品牌妨碍出色应用设计。最重要是,让你APP看起来像一个iOS应用程序。确保它直观、易于导航、易于使用,并专注于内容。...考虑选择一种色调来表示APP交互性。Notes,交互元素为黄色。日历,交互式元素为红色。如果你自定义了表示交互色调,请确保其他颜色不会与之竞争。...例如:交叉或重叠元素(例如网格线条或条形不透明基础上看起来更好。通常,为UI元素使用语义定义系统颜色。 ?...当你需要自定义颜色,将颜色集资源添加到APP资产目录,并指定颜色浅色和深色变体,以便它可以适应当前外观模式。避免使用硬编码颜色值或不适应颜色。 确保颜色两种模式下都具有足够对比度。

7.9K30

Swift| 基础语法(五)

} Swift,创建tableViewCell方法可以分为两种创建tableView时候注册和需要使用时手动创建。先聊聊创建tableView时候直接注册cell: myTb?....register(MyNewTableViewCell.self, forCellReuseIdentifier: "myCell") 当注册了Cell之后,没有可重用Cell时会自动创建,并且不能在需要手动创建...text = "label2 :\(indexPath.row)" return cell } ? 可以自定义cell处理点击状态下显示 var label1 :UILabel?...().titlePositionAdjustment = UIOffsetMake(0.0, -5.0) // 设置图标选中颜色 UITabBar.appearance().tintColor...因为Swift,所有对象构造器默认都是public,所以需要重写你init让其成为私有的。 这样就保证像如下代码编译报错,不能通过。 六、从相册选择照片或者拍照 ?

2K30

移动应用设计新趋势

官方介绍新版界面做了去除整个应用大部分蓝色、深灰色,加粗标题,简化底部导航栏跟图标等改变。剩下是一款标题明显、内容突出、功能清晰黑白主色调界面。...虽然一个月后 Airbnb 新版 UI 没有像 Instagram 发布新设计界面那样被大肆报道(可能是因为它没有换一款让人眼前一亮应用图标),它还是遵循了很多“界面简化”要点。...这个月初,科技界巨头苹果公司它们 WWDC 大会上发布了许多用户期待东西,其中包括所谓“最最最牛 iOS 版本” iOS 10 正式版(或许跟 iOS 8 相比的确牛一些:( )。...如今更加完整设计流程, 设计师和体验师界限越来越模糊,设计师不必那么担心没有尽到他们责任(比如把界面好看些),从而可以专注于为他们用户创造最好产品。...剩下最好都用黑白色,突显你应用内容。 2. 更大、更粗、颜色更黑标题。你看到那个标题了吗?将它增加约20至30像素,让它看起来“重”一些。 3. 简单、辨识度高图标

80720

APP设计实例解析,深色模式为什么突然就火了?

苹果在2019年6月发布iOS13增加了“黑暗模式”,用户打开“黑暗模式”后,应用界面将会变为深色,随后Google Android 10发布同样搭载“黑暗模式”。...知乎设计夜间模式,知乎采用了主色调蓝色+深灰色搭配,深蓝和灰色作为背景,展示出效果既有强烈对比,又摆脱了深色压抑感。 与豆瓣不同,知乎文本颜色选择了对比度更低灰色,通过字重进行区分。...知乎设计夜间模式目标应该很明确,即只考虑用户夜间使用,因此整体色调都很暗,强光环境下无法正常浏览。...最近一次更新,B站终于对深色模式进行了优化,适度提亮了视频封面和图标的亮度,将多彩型图标调整为了单线型图标,既统一了画面风格,又提升了界面阅读体验。...从上述APP设计案例,我为大家总结了以下几点建议以作参考: 1.避免使用纯黑色; 2.避免使用高饱和度颜色; 3.文本颜色选用高亮色,但不宜使用纯白; 4.做好情感化设计; 5.注意结构和层次感;

1.4K30

APP设计实例解析,深色模式为什么突然就火了?

苹果在2019年6月发布iOS13增加了“黑暗模式”,用户打开“黑暗模式”后,应用界面将会变为深色,随后Google Android 10发布同样搭载“黑暗模式”。...知乎设计夜间模式,知乎采用了主色调蓝色+深灰色搭配,深蓝和灰色作为背景,展示出效果既有强烈对比,又摆脱了深色压抑感。 与豆瓣不同,知乎文本颜色选择了对比度更低灰色,通过字重进行区分。...知乎设计夜间模式目标应该很明确,即只考虑用户夜间使用,因此整体色调都很暗,强光环境下无法正常浏览。...最近一次更新,B站终于对深色模式进行了优化,适度提亮了视频封面和图标的亮度,将多彩型图标调整为了单线型图标,既统一了画面风格,又提升了界面阅读体验。...从上述APP设计案例,我为大家总结了以下几点建议以作参考: 1.避免使用纯黑色; 2.避免使用高饱和度颜色; 3.文本颜色选用高亮色,但不宜使用纯白; 4.做好情感化设计; 5.注意结构和层次感;

1.9K50

Material Design Lite,简洁惊艳前端工具箱

Material Design,屏幕里看上去平整一个 App 界面,事实上不同控件之间都拥有 着层级关系。...每个调色板色调为500颜色为基准色,其他颜色是基准色不同色调(50-900, A100-700) 下表现。 右边示例代码,我们绘制了Material Design完整调色板集。... 四、色彩运用 毫无疑问,我们一个界面不能无约束使用色彩,那将使事情变得一团糟。 说好听点,没有约束,就不再是设计,而成为艺术了。...下面的示例选择indigo调色板三个色调(100、500和700),从pink 调色板中选择色调A200作为强调色: 2....工具栏和状态栏 工具栏和大色块应当使用调色板色调为500颜色为基准色。状态栏应当选择 调色板中比基准色略深色调为700颜色

88610

IOS15 beta 8 开发者预览版更新【附升级通道】

); “照片app”上滑可以查看图片详情和具体位置,可以详细看到镜头信息; iOS 15 beta3更新 iOS15第二个测试版基础上,最大改进便是对Apple自家浏览器Safari进行了功能上改进以及界面的设计...:iOS 15 beta2,Apple对Safari浏览器标签栏位置进行改动,调整到屏幕下方,但存在输入内容,标签栏又会回到屏幕上方,beta3实现了标签栏始终在在屏幕下方。...iOS15,Apple引入了”专注“模式,beta3”专注状态“以及”电话“位置,被分配到了专注模块中去,更适合不同场景使用。...AppStore,第一次进入会对用户展示新版系统新增功能。 Apple Music音乐小组件可以跟随不同音乐显示不同背景颜色,和传统固定颜色红色差异明显。...iOS 15 beta4更新 支持MagSafe外接电池; 设置通知、备忘录图标修改; Safari浏览器底部Reload按钮更换为底部直接加入了刷新按钮,浏览网页更加方便; iOS 15 beta5

1.1K10

Material Design Lite ,简洁惊艳前端工具箱

Material Design,屏幕里看上去平整一个 App 界面,事实上不同控件之间都拥有 着层级关系。...每个调色板色调为500颜色为基准色,其他颜色是基准色不同色调(50-900, A100-700) 下表现。 右边示例代码,我们绘制了Material Design完整调色板集。...下面的示例选择indigo调色板三个色调(100、500和700),从pink 调色板中选择色调A200作为强调色: ? 2....工具栏和状态栏 工具栏和大色块应当使用调色板色调为500颜色为基准色。状态栏应当选择 调色板中比基准色略深色调为700颜色。...页面要使用图标字体,只需要应用上面定义material-icons样式: face 上面的示例创建了一个笑脸图标,face用来指定要显示图标

1.2K30

颜色革命(下)

这两大设计风格各具特色、各有优劣,选择就看品牌Logo先天色调属性以及产品设计人员自身产品品位抉择,但是都应该遵循一个统一设计原则——要点突出、元素简练、决不拖泥带水。...1.2 品牌主色运用 1.2.1 简述 其实,App内部主题色调运用,严格来说,也可以依据上述分类分为两大类别,但是由于IOS系统本身走也是简约路线、重色调视觉冲击效果太强,而且各...比较通用设计规则笔者归纳了以下几点(欢迎补充): 1、图标、按钮尽量线条化,线条颜色尽量靠近主题色; 2图标、按钮以空心图标为主,只适当场景下使用实心图标,实心色也应当尽量靠近主题色...高亮图标与常态图标示例: 彩色常态图标示例: 1.2.8 支线颜色选择建议 除了主题颜色运用,APP也需要有其他辅助类颜色来满足不同呈现需求,这些颜色选择...CMF选色过程,对于数值内容显示,最开始只有三种颜色——橙黄色、黑色、白色。这样虽然页面颜色效果足够统一,但也不免单调死板。

61930

DarkMode(1):产品应用深色模式分析

论是浅色还是深色外观下,我们都应该在界面层级,让离用户逻辑关系上更近颜色更亮一些。 再让我们看一看实际 iOS 13 版本 Dark Mode 效果。...引入语义色彩(semantic color) 以往界面设计与开发过程,需要单独针对每一个元素,指定一个颜色。...如果单纯地使用两套配色方案,那么每改动一处界面,都不能忘了要改动两个颜色值。同时,界面界面之间,同样页面元素,需要重复地指定具体颜色,也造成了不必要工作。...通过语义色彩,设计师可以整理出配色模板,程序员可以不同界面的同类型元素,直接使用语义色彩,而不用重复地去指定相同颜色。...引入字体化图标 iOS 13 ,苹果还为了 Dark Mode 引入了多达 1500 余个字体化图标 SF Symbols。

1.7K20

ISUX「八月」行业设计趋势速递

2、锁定屏幕音乐视觉化播放图形  iOS 16 Beta 3 添加了全屏音乐播放器,Beta 5 引入了实时迷你可视化图形,可随音频播放变化。...2、新增了一批可交互式表情  Telegram表情制作投入了很多精力,新版本又新增了一批可交互式emoji表情,当用户发送出去后,好友点击即自动播放表情符号全屏效果。...界面图标、按钮颜色上也用了大量蓝色,呼应“水”主题。  另外,此次更新也带了一些新功能和亮点体验。 ...同时叶片颜色代表过去一小内使用最多应用图标颜色,实时变化,将个性化和数字健康完美融合。 ...v=9da1ktqjPy0  十七、微信iOS迎来8.0.27正式版本更新  1、我二维码支持更换样式  微信-扫一扫-我二维码页面下方点击【换个样式】后,二维码可更换不同风格,还有全屏背景颜色

3.5K10

Android 12第四测试版公开发布,代号「雪花冰沙」!Google:平台已稳定,开发者可以冲了!

Android 12新功能之一是视觉元素大改,系统将会使用颜色提取机制,从设定主题之中提取设计元素,体现在视觉效果上就是整个系统色调,会随着桌面壁纸变化而变化。...Android 12还对下拉通知栏图标进行大改,原有的操作图标不复存在,取而代之是圆角矩形大块磁贴。 这些磁贴按钮操作方式和之前快捷按钮类似,轻按即可开关相应功能,长按就能进入设置界面。...开启后,即可看到相关细节,例如能够知道过去24小,有多少App访问过你位置、相机和麦克风。...app 使用麦克风或摄像头,右上角也会有隐私指示器显示,呈现方式与 iOS 类似,为一个带颜色小圆点。用户可以快速设置,开启或关闭 app 使用麦克风或摄像头权限。...连震动都被Android12 玩出花了,Google允许开发者安卓12使用根据音频产生震动触觉反馈模式,该模式下,震动强度和持续时间由音频来决定,这可以增加播放媒体或者产生警告沉浸感。

1K30
领券