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

iOS 9人机界面指南(一)下篇:UI设计基础 - 腾讯ISUX

不要像上图中反例那样将仅有品牌意义内容放在屏幕顶部二级栏持续展示,使正文内容空间被压缩,而是考虑以其他低侵入性方法无处不在地展示品牌,使用自定义颜色、字体,或巧妙地定制屏幕背景。...注:如果你使用应用程序Sketch或Photoshop来生成你设计,那么当你设置字体不小于20点时候,你需要切换到展示模式。iOS会根据字体大小为San Francisco自动调整字间距。...为了突出某些文字或者为了在内容块之间建立视觉关联,你可以依赖由Dynamic Type支持语义化样式,标题、正文,你也可以指定字体权重,细体或者半粗。...导航控制栏文本使用相同字号,而内容文本样式则使用尺寸设置(值为17点)。 文本总是使用常规或者中重,一般不适用轻或者加粗。 通常情况下,应用中整体应该使用单一字体。...如果你一定要提供用户鲜少用到设置项,请参考App Programming Guide for iOSThe Setting Bundle部分来了解如何在代码中定义它们。

1.7K21

iOS 9人机界面指南(四):UI元素(下)- 腾讯ISUX

API注释 想要了解如何在代码中定义信息按钮,可以参考UIButton. iOS包含了两种信息按钮样式:适用于浅色内容深色按钮,以及适用于深色内容浅色按钮。...如果你要用自定义字体的话,请慎重选择字体种类,不要以牺牲清晰度为代价来换取花哨颜色和字体效果。...(想要了解关于app中字体使用指南,可以参考 Color and Typography;想要了解更多动态文本内容,可以参考 Text Programming Guide for iOS 里面  Text...4.3.14 滑块 滑块允许用户在一个限定范围内调整某个数值或进程(下图展示iOS设置中亮度设置滑块,滑块左边和右边均为自定义图形)。 ?...但在某些特定内容区域内,为按钮描边或者添加背景颜色,让用户迅速地把注意力放到按钮,也是必要。Value 2布局中,文本和副标题中间垂直间距会让用户专注于副标题第一个单词。

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

Repo:UI设计字号完全指南,不知道用多少字号设计师必看!

但是,根据不同屏幕和字体系列,规则可能需要根据各自详细指南进行更改。下面这些设计指南只是普适性字体规则,并非公式,请务必注意。另,中文字体需要在此基础加1到2号。...平板电脑 通常,iPad 和 iPhone 使用字体大小是相同。在平板电脑中,由于画布很大,我们可能需要一些更大标题尺寸,但其余方法相同。...iPhone (IOS) iPhone应用程序字体大小快速总结;苹果有一个默认字体 SF Pro;这些数字适用于 SF Pro 或类似字体。...一般来说,中文可以比英文2个字号左右,可以在下表基础+1或者2 iPhone(默认)尺寸: iPhone(小)尺寸: 需要考虑几点: 1. 使用多少字体?...次要字体大小:此字体大小需要比默认主要字体大小小约 2pt,可用于不太重要细节,标题。 5. 第三字体大小:此字体大小需要比您第二字体大小小约 1pt。 6. pt,px,sp?

2.2K20

iOS 9人机界面指南(四):UI元素() - 腾讯ISUX

(想要了解更多关于这个常数内容,请参考 UIBarButtonItem Class Reference.) 4.1.4 工具栏与导航标准按钮 iOS提供了一系列工具栏与导航栏内置标准按钮。...请注意,iOS本身提供了若干内置服务,打印,转发到Twitter,发送信息和Airplay等等,你不需要再额外为这些内置任务创建活动。...Value 2 (UITableViewCellStyleValue2).Value 2样式蓝色字体标题右对齐,黑色字体标题左对齐,混排在同一行中。这种样式通常不包含图片。...Value 2布局中,文本和副标题中间垂直间距会让用户专注于副标题第一 个单词。 ? 重要 以上四种单元格样式均支持添加表格视图元素,勾选或展开标志。...但请注意,由于键盘布局以及输入方法是由用户系统语言设置决定,这是你不能控制iOS提供了各种不同键盘类型,以便用户输入不同类型文本。

10.1K51

文字如何实现完美UI?文本排版设计告诉你

何在手机有限屏幕呈现清晰UI和UX?这里太多因素需要考虑,文本排版设计就是其中不可或缺一部分。今天,我将从文本排版设计角度出发,谈谈如何实现完美的手机UI界面。...对比度 在手机屏幕,文本数量远远小于Web界面,于是同等设置对比值,在手机界面上会放大。手机文本排版设计对比度问题,最大原则就是削弱对比。...如果你在小屏幕使用环境光度和短字体,不但没有帮到用户,还会让他们产生头疼晕眩感觉。颜色选择对对比度影响很大,更糟例子,红色文字与绿色背景。此外,字体大小也是对比度考虑。...当设置层次结构时,不要太过火,标题字体大小不能太大于文本主体。最后,留白和文本部分也可以形成一种微弱对比。 ? 7. 功能性 保持平衡美观UI是远远不够,功能也是同等重要。...例如, iOS 7使用了(Pro)Light,iOS 9使用SF-UI,而在iOS 10中,San Francisco字体版本是SF UI Text 和 SF UI Display。 ? 10.

2.5K70

iOS UITableView左滑操作功能实现(iOS8-11)

WeTest 导读 本文主要是介绍下iOS 11系统及iOS 11之前系统在实现左滑操作功能上区别,及如何自定义左滑标题颜色、字体大小。...1、iOS 8-10 设置标题颜色和字体 左滑操作后,UITableView层级结构如下图: ?...2、 iOS 11 设置标题颜色和字体 左滑操作后,UITableView层级结构如下图: ?...三 遇到问题及原因分析 1、问题是iOS 11设置颜色有延迟,颜色有一个明显跳变,从系统默认色跳转到我设置颜色 有问题代码如下: ?...解决后代码二(2)示例代码。 ? 腾讯WeTest iOS预审工具 为了提高IEG苹果审核通过率,腾讯专门成立了苹果审核测试团队,打造出iOS预审工具这款产品。

59740

iOS学习——UIAlertController详解

这两天项目中统一对已经被iOS API废弃UIAlertView和UIActionSheet进行替换,我们知道,UIAlertView和UIActionSheet都已经被iOSAPI所废弃了。...  上面我们讲到了如何在UIAlertController提示器添加按钮,但是有时候,我们需要在提示器添加一个或多个文本框让用户填写一些信息,在UIAlertController中也提供了一个方法直接可以在提示器添加文本框...只有一个参数,就是一个Block,用于我们队该文本框进行配置,比喻说其字体大小,行数限制等等,都可以在该Block中进行设置。...主要方法有两种: 利用第三方控件 利用KVC方法进行自定义修改 2.1 利用第三方控件进行UIAlertController属性自定义 现在Github上有着众多Alert控件(SCLAlertView...如果要自定义标题和内容,可以通过NSAttributedString把字体和颜色设置好,然后在通过KVC方法进行设置,就可以了。

2.7K170

iOS UITableView左滑操作功能实现(iOS8-11)

,及如何自定义左滑标题颜色、字体大小。...二、左滑操作自定义标题颜色、字体 ---------------- 因为系统对左滑出按钮只提供了3个可设置属性:title、backgroundColor、image,如果使用自定义titleColor...1、iOS 8-10 设置标题颜色和字体 左滑操作后,UITableView层级结构如下图: [4.png] 由上图可知,左滑操作按钮是在UITableViewCell子view,所以我们可以在UITableViewCell...代码如下: [5.png] 2、 iOS 11 设置标题颜色和字体 左滑操作后,UITableView层级结构如下图: [6.png] 由上图可知,左滑操作按钮是在UITableView子view...代码如下: [7.png] 三、遇到问题及原因分析 ------------ 1、问题是iOS 11设置颜色有延迟,颜色有一个明显跳变,从系统默认色跳转到我设置颜色 有问题代码如下: [8.png

1.7K80

iOS文本布局探讨之二——关于TextKit框架中字体描述

iOS文本布局探讨之二——关于TextKit框架中字体描述 一、引言         UIFont是iOS开发中处理文本字体类,关于UIFont相关内容,以前一篇博客有详细介绍,本片博客主要介绍关于动态字体应用与字体描述类...二、iOS系统中动态字体         所谓动态字体,是指在应用使用中,用户可以动态调整字体风格字号等。...在iOS7之后,系统增加了动态字体功能,当用户在系统设置中修改字体属性或者字号时,不仅会影响系统应用字体,第三方应用字体也可以进行相应调整。系统设置字体界面如下: ?...*)descriptor size:(CGFloat)pointSize NS_AVAILABLE_IOS(7_0); 系统定义了一组动态字体风格字符创常量,开发者可以根据需求选用: //标题1 UIKIT_EXTERN...); //标题 UIKIT_EXTERN NSString *const UIFontTextStyleHeadline NS_AVAILABLE_IOS(7_0); //子标题 UIKIT_EXTERN

1.3K30

iOS开发UINavigation系列一——导航栏UINavigtionBar

iOS开发UINavigation系列一——导航栏UINavigtionBar 一、导航栏使用         在iOS开发中,我们通常会使用导航控制器,导航控制器中封装了一个UINavigationBar...(null_resettable, nonatomic,strong) UIColor *tintColor; tintColor这个属性会影响到导航栏左侧pop按钮图案颜色和字体颜色,系统默认是如下颜色...(nullable, nonatomic,strong) UIImage *shadowImage; //设置导航栏标题字体属性 @property(nullable,nonatomic,copy) ...NSDictionary *titleTextAttributes; 标题字体属性会影响到导航栏中间标题,如下:    bar.titleTextAttributes =...与pop操作         UINavigationBar上面不只是简单显示标题,它也将标题进行了堆栈管理,每一个标题抽象为对象在iOS系统中是UINavigationItem对象,我们可以通过

96631

iOS 11 UI Kit中谈谈iOS 11新变化

iOS 11中最让你印象深刻莫过于粗体标题变化。...但是我们看到是,时钟这项系统应用仍然保持了原有的字体排版模式,其原因在于这项应用在内容和功能上互相平行独立,非常容易分辨,如果在每项界面继续采用标题,UI元素会潜在对内容造成了竞争,从而违背了基本设计规则...•卡片式和投影 在新版iOS 11界面中,不少地方采用了卡片式或是宫格式排列模式,视觉一致,也易于设计迭代。...•界面布局中留白 iOS 11标题文本中都包含一组带有图片和描述元素,组元素和组元素之间保持较大间距。...•颜色/字号/字重 iOS 11中也大量使用了颜色深浅、字号大小和文本粗细来展示标签不同层次,我们可以看到照片APP在iOS 10中章节标题和照片对比不明显,在更新后,章节标题标题字体变大加粗,副标题字体变大

1K90

iOS界面设计,12个优秀案例激发你灵感

总所周知,iOS和Android是当今两移动平台,前者采用Human Interface Design,后者采用Material Design。...您可以轻松地将音乐从云端下载到您设备并脱机播放。您设备就是一个无限量音乐库。其音乐播放列表非常有趣,设置了动画多样操作按钮。...自iOS 7以来,Apple一直在为其操作系统界面和预设应用程序设置色彩明朗鲜艳调色板。...14Color.png 了解更多:如何在UI设计中明智地使用颜色来创建完美的UI界面? 3. 图标 iOS图标风格是简单易懂,并且专注于某个功能点或者信息点。...使用粗体标题可以让用户快速了解其当前位置,并进行快速标签切换。 2)界面布局中空白区域 iOS 11标题文本包含一组元素,其中包含图片和描述,这些元素可以保持组元素之间较大间距。

1.7K70

完美解决Matplotlib绘图中、英文字体混显问题···

今天我们学员私信了我一个绘图经常遇到问题,特别是绘制带有中文论文配图时,就是如何在同一幅插图中同时显示中英文?...,案例结果如下: 案例01 案例02 新建字体法 新建字体法,就是将已有的字体通过特定方法合并,使其适合自己绘图需求,合并宋体+新罗马字体。...可以通过开源字体合并工具进行操作,Warcraft-Font-Merger[1]工具。...如果课程持续更新最好,最好课程本人有一定影响力(比如出书或者V),那样自己权益也会受到保障。感兴趣读者可以看下我们自己课程介绍,可视化系列课程推文。...如果我觉得你问题很具有普适性,我会把它写成文章发布在公众号,让更多人看到,有关我们数据可视化系列课程服务内容,可以参考下面的 阅读原文。 猜你喜欢 MATLAB绘图不好看?!

72640

设计师好帮手,Sketch 设计工具箱

制作过程中,我践行宁缺毋滥原则,尽可能简化组件结构和使用方式。为了做到这一点,我也利用了新版本 Sketch 中某些特性,颜色选集。...当然,如果你有其他好建议,也欢迎向我提出。 本组件库设计制作参考了 Figjam 白板工具、iOS 和 WeUI 官方文档与资源。请勿售卖此文件。 色彩 以上为工具箱画板。...一般标题采用16号字,medium 字重,black 颜色。由于 Sketch 字体样式功能逻辑奇特,故而组件库未设置字体样式。 布局功能 本组件库大量使用了布局功能。...其中,如果文本框设置为自动宽度,则组件可根据文字内容增多横向延伸。如果设置为自动高度,则组件横向宽度可以手动调节,纵向高度由文字内容多少决定。...此功能适用于较新版本 Sketch,如果需要更高灵活性,可以将组件解绑使用,或者修改母组件中覆盖层选项。 Title 标题 可以对纵向成组系列画板或设计图进行命名和标识,分为大小两种。

72430

R语言进阶之图形参数

概述 R语言是即使一款功能强大统计语言,也是一款内容丰富绘图工具。从原则讲,你可以用R语言绘制出你能‍‍想到任何图形。‍‍‍‍ ‍‍‍‍‍‍‍‍...你可以使用‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍par()‍‍‍‍‍‍‍‍‍‍‍‍‍函数来设置绘图相关参数(字体、坐标轴、标题等‍),这种方式设置绘图参数会对后续绘图进程持续有效,‍除非你修改这些参数。..., col.lab="red") ‍‍ 关于如何在不同绘图函数中设置绘图参数,请参见R语言入门系列。‍‍‍ ‍...字体 ‍ 在R中,你可以非常方便地去设置字体尺寸和样式: ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ‍选项 ‍‍‍‍match‍‍描‍‍述‍‍ font 指定使用字体...font.axis 指定坐标轴刻度字体 font.lab 指定坐标轴标签字体 font.main 指定标题字体 font.sub 指定副标题字体 ps 字体尺寸 (大约为1/72英尺),文本尺寸

1.4K30

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

主要关注阅读,照片,视频和游戏应用可以通过指定白点适应性样式来增强或削弱此效果。 考虑如何在其他国家和文化中看到您对颜色使用:例如,在某些文化中,红色表示危险。在其他人看来,红色具有积极内涵。...而对于Bar来说,Title文字则得到了普及,得益于手机屏幕纵向长度提升,Title字体会让页面内容更加醒目,更加优雅。 ? ?...005.SF字体符号(SF Symbols) 众所周知,圣弗朗西斯科字体是苹果内置英文字体,如今圣弗朗西斯科字体内置了1500多个符号(icon)。...情景菜单类似于Peek(预览)和Pop(弹出),但有两个主要区别:情境菜单可在运行iOS 13及更高版本所有设备使用;Peek和Pop仅适用于支持3D Touch设备。...简洁,以行动为导向标题还允许人们跳过他们在当前环境中不需要子菜单。

4.5K40

iOS Human Interface Guidelines》——Table View表视图

iOS包含一些可以扩展表视图功能表视图元素。除非特别注明,这些元素只适合用在表视图中。 除了上面列出表特有的元素,iOS还定义了刷新控件,让用户可以刷新表内容。...每种单元格风格都最好地适应了不同类型信息显示。 NOTE 编程,这些风格用于表视图单元格,这是一种告诉表如何绘制行对象。...Value 1风格显示一个左对齐标题和同一行中右对齐较轻字体标题。 Value 2(UITableViewCellStyleValue2)。...Value 2风格以蓝色字体显示右对齐标题,紧跟着同一行显示左对齐黑色字体标题。图片在这种风格中不太适合。 在Value 2布局中,文本间清爽垂直边缘帮助用户专注于详细文本第一个单词。...查看UITableViewHeaderFooterView Class Reference来学习如何在代码中使用页眉页脚视图。

2.4K20

移动端web开发笔记

META相关 1、 添加到主屏后标题IOS) 2、 启用 WebApp 全屏模式(IOS...font-family 三手机系统字体ios 系统 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue 无微软雅黑字体 android 系统...比如你在手机上用浏览器打开一个PC网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体、图片都很小看不清,此时可以快速双击屏幕某一部分,你就能看清该部分放大后内容,再次双击后能回到原始状态...双击缩放是指用手指在屏幕快速点击两次,iOS 自带 Safari 浏览器会将网页缩放至原始比例。...字体,使用样式写法为20px .css{font-size:20px} 6、ios系统中元素被触摸时产生半透明灰色遮罩怎么去掉 ios用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置

3.5K20

网易考拉 Android 通知栏适配全方案

从图中可以看出,1.X-2.2版本通知栏采用了白色背景和黑色字体;2.3-4.X版本,默认背景变成了黑色,而主标题采用白色字体,内容为灰色字体。...通过设置样式,可以展示更大区域通知消息,展示图和多行文字,也可以展示类似邮箱收发信样式,同时支持自定义按钮并增加点击事件。...下面解决一个最关键,也最致命问题——字体颜色。如果字体颜色和背景颜色一样,那这条通知栏消息就没法看了,RemoteViews显示异常一节介绍一样。...考拉RemoteViews适配方案 经过上述调研与测试,我们适配方案如下: 获取系统通知标题颜色,如果能够获取到,那么标题、内容和时间颜色都设置标题颜色。...之前Notification.Builder.setColor()这个方法在Android N设置是通知栏消息第一行颜色,包括图标、应用名称、副标题等。

5.1K11
领券