文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

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

（1）粗体标题导航栏 扁平化设计中，文字排版影响着信息层级的展示的清晰与否，通过文本的字号、字重、颜色等的对比去建立清晰的信息层级，而不用太多的装饰元素。...iOS 11中最让你印象深刻的莫过于粗体大标题栏的变化。...如果你想要打造顶层是标签栏结构的APP，这种设计规范就会非常适合，使用粗体大标题能够让用户在大量的标签切换中快速地意识到自己目前所处在的位置； ?...但是我们看到的是，时钟这项系统应用仍然保持了原有的字体排版模式，其原因在于这项应用在内容和功能上互相平行独立，非常容易分辨，如果在每项的界面继续采用大标题，UI元素会潜在对内容造成了竞争，从而违背了基本设计规则...•颜色/字号/字重 iOS 11中也大量使用了颜色深浅、字号大小和文本粗细来展示标签的不同层次，我们可以看到照片APP在iOS 10中章节标题和照片对比不明显，在更新后，章节标题主标题字体变大加粗，副标题字体变大

1.4K90

Adobe vs ComPDF Conversion SDK V4.0.0 - PDF 转 Word 转档效果对比

每份 PDF 均分别转换为 DOCX，再通过AI分析、统计字体种类、颜色种类、标题样式段落、粗体与斜体 Run、多栏 Section、表格数量等识别效果。...它识别到更多粗体与斜体 Run，同时保留了 12 个标题样式段落，而 ComPDF 在该项为 0。这意味着如果后续需要继续编辑文档、依赖标题层级导航或样式继承，Adobe 的结果更利于二次加工。...✓颜色种类数55持平粗体 Run 数6108ComPDF ✓斜体 Run 数22411Adobe ✓多栏 Section 数1617ComPDF ✓文件大小 (KB)137.9222.3—标题样式段落数...它识别到 10 种字体，并在多栏 Section 数上略高于 Adobe，说明对于复杂页面结构和字体差异的保留更积极。粗体 Run 数量也明显更高，显示其对局部强调格式更敏感。...差异主要仍体现在字体与格式细节上。ComPDF 识别到 3 种字体，较 Adobe 的 1 种更完整；Adobe 则在粗体、斜体以及标题样式保留方面继续领先。

12810
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    最新iOS设计规范四｜3大界面要素：视图(Views)

    栏（Bars） 栏，可以告诉用户在APP中当前在所在的位置、能提供导航，还可能包含用于触发操作和传递信息的按钮或其他元素。包括6种：导航栏、搜索栏、侧边栏、状态栏、标签栏、工具栏。...如果的的警告文本和按钮标题是明确的，那么就不需要去解释按钮是做什么的。除非在极少的情况下，必须提供指导，那么可以用“点击”这个词，在引用按钮时保持大写，不要在引号中包含按钮标题。...集合的布局是可以随时更改的。但需要注意的是，如果你是在用户进行查看集合或者正在与之进行交互时来更改动态布局的话，请确保更改是有意义的且是易于跟踪的。...默认情况下，文本视图中的文本是左对齐的，并使用黑色的系统字体。如果文本视图可编辑，则在视图内部点击时，屏幕下方会弹出键盘。 ? 保持文字清晰。...虽然你可以使用各种类型的字体、颜色以及对齐方式，但必须保持内容的可读性。采用动态类型文本是个好办法，这样如果用户在设备上更改文字大小，你的文本内容仍然会有友好的体验。

    14.2K31

    基础篇 - 三栏垂直分割布局

    { bottom: 10 })这个文本设置了字体大小为20，字体粗细为粗体，底部边距为10。...左侧导航栏在ColumnSplit容器内，我们首先添加了左侧导航栏的内容：Column() { Text('导航菜单') .fontSize(18) .margin({..."导航菜单"，设置了字体大小和上下边距我们使用ForEach循环渲染了一个菜单项数组，每个菜单项都是一个文本组件每个菜单项文本都设置了字体大小、上下边距、宽度和文本对齐方式我们为Column设置了宽度为总宽度的...整个布局可以分为以下几个部分：外层容器：使用Column组件作为最外层的容器，包含标题和主要内容区主要分割区：使用ColumnSplit组件将界面分为左、中、右三栏左侧导航栏：宽度为20%，包含导航菜单中间内容区...背景色设置为了使不同区域有视觉上的区分，我们为左侧导航栏、中间下部内容和右侧边栏设置了背景色：.backgroundColor('#f8f9fa') // 左侧导航栏和右侧边栏.backgroundColor

    34000

    前端设计开发常用命名规则

    Navbar “navbar“等同于横向的导航栏，是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”. 4....：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title 摘要: summary (3)功能...,如 .left { float:left; } .bottom { float:bottom; } (4)标题栏样式,使用’类别+功能’的方式命名,如 .barnews { } .barproduct...如对于一组用于定义字体样式的class，我们可以使用f即foot的头字母为前缀进行命名，如： f-blue:表示蓝色字体样式 f-blod:表示粗体字体样式 对于网页中如新闻频道的一些新闻的现实样式，可以用...n作为前缀进行样式设计，如： n-title:新闻标题 n-list:新闻列表 CSS文件及样式命名 1、CSS文件命名规范 全局样式：global.css； 框架布局：layout.css； 字体样式

    4K50

    零基础微信小程序开发——全局配置之window窗口（保姆级教程+超详细）

    它可以包含多个子配置项，如navigationBarBackgroundColor（导航栏背景颜色）、navigationBarTextStyle（导航栏标题颜色）、navigationBarTitleText...（导航栏标题文字内容）等。...小程序窗口组成部分 导航栏区域（navigationBar）： 导航栏区域位于小程序窗口的顶部，通常包含小程序的标题、返回按钮（如果有上一级页面的话）、以及其他可能的操作按钮（如搜索、设置等）。...“导航栏区域：默认不可见，下拉才显示。” 这意味着在某些情况下（如用户未进行下拉操作），导航栏区域可能不会被立即显示，而是需要用户进行下拉操作才能看到。...，单位为px 设置导航栏的标题 需求：把导航栏上的标题，从默认的 “WeChat”修改为“公众号:小白的大数据之旅” 设置步骤：index.wxml文件中第一行代码写上以下代码，主要修改title属性

    1.9K20

    【CSS】课程网站 网格商品展示 模块制作 ② ( 网格商品展示盒子模型测量及样式 | 处理列表间隙导致意外换行问题 | 代码示例 )

    li h4 { /* 设置 20 像素外边距 */ margin: 20px; /* 设置文本颜色与大小 */ font-size: 14px; color: #050505; /* 取消标题粗体...li h4 { /* 设置 20 像素外边距 */ margin: 20px; /* 设置文本颜色与大小 */ font-size: 14px; color: #050505; /* 取消标题粗体...*/ font-size: 18px; /* 字体颜色 */ color: #050505; /* 取消链接下方的横线 */ text-decoration: none; /* 调试时使用的背景...*/ /*background: skyblue;*/ } /* 鼠标经过链接时的样式 */ .nav ul li a:hover { /* 鼠标经过导航栏链接 , 底部显示 2 像素的 #00a4ff...li h4 { /* 设置 20 像素外边距 */ margin: 20px; /* 设置文本颜色与大小 */ font-size: 14px; color: #050505; /* 取消标题粗体

    3.9K20

    2018 年值得关注的 Web 设计趋势

    2017 年是关于极简主义的一年，2018 年将给设计界带来更醒目的字体、鲜艳的色彩、用户互动的新的可能性。设计会比以往任何时候都更试图吸引我们的注意力，让我们在网站浏览的同时保持专注和投入。...这里为你介绍 2018 年六个热门网页设计趋势 1.粗体字 粗体字的流行即将来临。大写字母的标题四周有很多空白，这会带给我们强烈的视觉冲击。...粗体字还对阅读速度、阅读理解程度和用户感知有很大的影响。 Google/IBM 进行的一项研究表明，有衬线字体 Georgia 的阅读速度比黑体快 7.9%。...即使有些研究表明人们如何使用衬线字体来更好地理解文字，但是事实恰好相反。使用像 Helvetica 这样的无衬线字体的测试人员在阅读速度和阅读理解上的获得的评分更高。 粗体字会有产生奇妙的效果。...动态 SVG 的常见用例是导航菜单和网站标题。SVG 意味着在保持实用的同时增强接口。导航条或文本是 SVG 的用例。

    1.1K60

    最新iOS设计规范五｜3大界面要素：控件（Controls）

    栏（Bars） 栏，可以告诉用户在APP中当前在所在的位置、能提供导航，还可能包含用于触发操作和传递信息的按钮或其他元素。包括6种：导航栏、搜索栏、侧边栏、状态栏、标签栏、工具栏。...系统按钮 系统按钮通常出现在导航栏和工具栏中，也可以在任何地方使用。 ? 在标题中使用动词。特定于操作的标题显示按钮是交互式的，并说明单击该按钮时会发生什么。 使用标题格式命名标题。...标签可以显示任意数量的静态文本，但最好保持简短 ? 保持标签清晰易读。标签可以包含纯文本或样式文本。如果您调整标签的样式或使用自定义字体，请确保不要牺牲易读性。...最好采用动态类型，这样当用户更改设备上的文本大小时，标签的可读性仍然可以很好。同时，你还需要在启用了辅助功能选项的情况下测试标签，例如粗体文本。...定期主动更新数据，保持数据的时效性。 有必要时才为刷新提供简短标题。可以为刷新控件加一个标题。但在大多数情况下，这是没有必要的，因为刷新控件的动效就很明确地表明了内容正在加载。

    13.9K30

    110. 基础篇 - 垂直分割布局构建文件管理界面

    ，占总宽度的25%，包含分类导航和存储信息右侧：主内容区，占总宽度的75%，包含路径导航栏、操作按钮和文件网格整体布局结构如下：Column (整体容器)└── Text (标题)└── ColumnSplit...包含以下内容：存储空间标题：使用Text组件，字体大小为16像素，字体粗细为粗体，下边距为10像素。存储空间进度条：使用Row组件包裹两个Column组件，表示已使用和剩余的存储空间。...文件名称：使用Text组件，字体大小为14像素，最大行数为2，文本溢出时显示省略号，文本对齐方式为居中，下边距为5像素。...点击事件：为每个文件项添加点击事件，点击时根据文件类型执行不同的操作。如果是文件夹，则导航到该文件夹；如果是文件，则打开该文件。...，而是最多显示2行，超出部分以省略号结尾，保持界面的整洁。

    37800

    双管齐下：同时设计 iOS 和 Anroid

    通用元素 两种平台之间的确存在着一些通用的元素，比如说状态栏和标题栏，它们会出现在每一屏的顶部。你不应当改变导航栏的高度，如果你想让 App 看起来更加原生的话。...所以，我推荐你在设计的第一页就定义好标题栏的样式，然后在其他的屏幕上使用一个占位的方框来替代，这样能省下不少时间，但是你应当向程序员说明标题栏在不同的屏幕上都是一样的样式。...状态栏（显示你的网络、电量和时间信息）是系统组件，你不需要考虑设计它，只要确保它们不会对他人造成误解就好了。 ? 4. 导航 或许iOS 和 Android 平台之间最大的区别就在于他们的导航样式了。...如果你想要在设计的时候节省时间，那么用一款字体就可以，但是要和开发人员沟通在不同的平台上使用对应的字体。而在设计重要的布局结构和使用大号字体时，我建议你还是同时用这两种字体测试效果。...，同样允许你创建主次结构 两个平台都使用比较细的字体来现实正文内容，然而，在下面的例子中，Android 使用了轻（Lighr）和常规（Regular）字体，而 iOS 使用了粗体（Bold）和常规字体

    1.8K50

    IOS设计尺寸与字体

    http://iosres.com/ @2：状态栏(顶)：20，导航栏(中)：44，Tabbar(底)：49 @3：状态栏：40，导航栏：88，Tabbar：98 2、Mac OS下： 华文黑体（STHeiti...冬青黑体（ Hiragino Sans GB ）：听说又叫苹果丽黑，日文字体Hiragino KakuGothic的简体中文版，简体中文有 常规体 和 粗体 两种，冬青黑体是一款清新的专业印刷字体，小字号时足够清晰...Helvetica、Helvetica Neue：一种被广泛使用的传奇般的西文字体（这货还有专门的记录片呢），在微软使用山寨货的Arial时，乔布斯却花费重金获得了Helvetica苹果系统上的使用权，...因此该字体也一直伴随着苹果用户，是苹果生态中最常用的西文字体。...细体、常规体、中黑体、中粗体。

    2.5K00

    最新iOS设计规范三｜3大界面要素：栏(Bars)

    当需要特别强调上下文时，请使用大标题。大标题绝对不能与内容竞争，但是在某些应用中，大标题的粗体会帮助人们浏览和搜索时进行快速定位。...在iOS 13及更高版本中，可以通过删除导航栏的阴影来隐藏导航栏的底部边框（当滑动内容区域时，边框会自动重新出现）。无边框样式在大标题导航栏中效果很好，因为它增强了标题和内容之间的联系感。...但是，无边框样式在标准标题导航栏中可能无法很好地起作用，因为该栏的标题和按钮可能难以区分。iPad上的拆分视图是一个例外，更多的是通过在这两种视图中使用无边框样式来保持主视图和辅助视图之间的一致性。...有几种常见的技术可以做到这一点： · 在APP中使用导航栏，该导航栏会自动显示状态栏背景，并确保内容不会显示在状态栏背后 · 在状态栏背后显示自定义图像，如渐变色或纯色 · 在状态栏背后放置模糊的视图...当人们导航到您应用中的其他区域时，请不要隐藏标签栏。标签栏可为您的应用启用全局导航，因此它在任何地方都应保持可见。模态视图例外。

    16K10

    博客园小技巧

    读者快速浏览一遍之后，觉得还有兴趣的话，可以自行展开代码阅读，而不会在一开始的时候就被超长的代码吓走。 3. 格式与字体 ? 格式 所谓的格式，实际上是html标签(tag)。...下划线、粗体、斜体也是相同的道理。 (在黑白印刷时代，人们惯用这三种方式来区分重点。你甚至可以在机械打字机上见到它们)。用这些标记方式的时候，最好可以在每篇博文中保持统一。...比如可以用粗体表示命令，用斜体标记引用，用红色表示重点。这样，人们连续阅读同一个博客的时候不会觉得混乱。...比如我们想设置标题2的格式为： ?...比如在公告栏中我添加了微博的图片和豆瓣的Javascript（如上图）。你也可以增加其他更加个性化的东西。 微博：我的工具 -> 签名档 -> 获得代码，然后将代码复制到博客园的公告栏。

    1.8K100

    Mirages主题帮助文档

    插件下载地址 备用下载地址 侧边栏菜单怎么配置？ 侧边栏菜单的内容来源于你的独立页面，新增或删除独立页面后，侧边栏菜单会相应更改。 侧边栏菜单如何排序？...侧边栏菜单的内容来源于你的独立页面，所以你可以在 管理 -> 独立页面 对独立页面进行隐藏、排序等操作，侧边栏菜单会相应更改。 侧边栏头像怎么修改？...为什么我主题的菜单/导航栏/导航条和你的不一样？ 主题提供两种导航栏样式，可以通过主题外观设置：导航栏 -> 导航栏样式 处自由切换。...4 ==> 页面打开时目录树【展示】在文章【右侧】，页面不会展示展开按钮，因此【不可通过】展开按钮展开或隐藏目录树 5 ==> 页面打开时目录树【展示】在文章【左侧】，页面不会展示展开按钮，因此【不可通过...默认情况下，在你后台(Admin)保持登录状态时，将会在侧边栏显示「Dashboard」菜单可以快速进入后台。

    12.9K20

    【Hybrid开发高级系列】ReactNative(七) —— RN组件专题

    工具栏可以显示一个标志，导航图标(如汉堡包菜单)，标题 和副标题和操作列表。标题和子标题被扩展这样以来标志和导航图标显示在左边，标题和副标题在中间并且操作 在右边。         ...如果工具栏具有唯一子级，它将显示在标题和操作之间。...subtitle string         设置工具栏副标题。     subtitleColor string         设置工具栏副标题的颜色。     ...title string         设置工具栏标题。     titleColor string         设置工具栏副标题的颜色。...keyboardShouldPersistTaps布尔型         当为假时，当键盘向上摒弃键盘时，轻击外部关注文本输入。当为真时，滚动视图不会抓取轻击，键盘不会自动 摒弃。

    4.3K40

    HTML 元素帮助手册

    定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。#分区根元素元素描述表示文档的内容。文档中只能有一个该元素。...表示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其它元素，比如Logo、搜索框、作者名称和其它元素。...应该在没有其他合适的语义元素时才使用它。与div元素很相似，但是一个块级元素而则是行级元素。表示其内容十分重要、严肃或紧迫。浏览器通常用粗体显示。...尽管该行为取决于浏览器，但通常使用当前字体的斜体形式显示。一个文本中的位置，其中浏览器可以选择来换行，虽然它的换行规则可能不会在这里换行。...一种保存HTML的机制，它不会在加载页面时立即渲染，但随后可以在运行时使用JavaScript实例化。

    26710

    【总结】移动应用界面设计的尺寸设置及规范

    在android规范中对于导航栏、工具栏等的尺寸没有明确的规定。...3、基本元素的尺寸设置 iPhone的APP界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏以及中间的内容区域。...例外情况是两个标题样式，在最小、小和中等设置时都使用相同字体大小、行间距和字间距。 – 在最小的三种文字大小中，字间距相对宽阔；在最大的三种文字大小中，字间距相对紧密。...– 标题和正文样式使用一样的字体大小。为了将其和正文样式区分，标题样式使用加粗效果。 – 导航控制器中的文字使用和大号的正文样式文字大小（明确来说，是 34 点）。...– 文本通常使用常规体和中等大小，而不是用细体和粗体。 百度用户体验做过的一个小调查： 单位：像素px ? 还有个方法就是找你觉得好的APP应用，手机截图后放进PS自己对比调节字体大小。

    5K40

    教你避雷！网页设计中常见的17个UI设计错误集锦（附赠设计技巧）

    如果用户被激怒，产生的负面结果是，他们会立即离开网站，并不会考虑到什么叫做三思而后行。 2. 配色决定一切 ? 在规划网站设计时，字体、标题和背景一定要采用合适的颜色代码。...不正确的字体大小 ? 在遵循最佳UI设计实践时，保持一致的字体大小和字体系列非常重要。粗体和大字体是可以接受的，但是如果标题和段落的字体大小是4:1，那就不合适了。 7. 设计一个复杂的原型 ?...避免复杂的导航 ? 简化导航是设计独特用户体验的最佳UI实践之一。简洁明了的导航有助于引导用户直接找到他需要的内容。避免太多链接和按钮的复杂导航栏，否则不仅会使用户感到困惑，而且还会导致布局聚集。...从颜色到字体，关于它们的一切都应该要求用户“点击”。过于引人注目的CTA会迫使用户离开，而过于简单的CTA却容易被忽略。所以尽量在CTA中保持颜色，阴影和漂亮字体的平衡，使其显而易见且可点击。...而具有大量数据的冗长形式只会使用户复杂化，并且在填写时可能会遗漏一些重要信息，尤其是在移动设备上。最好的UI设计实践之一是保持一个更容易填充的简单表单，并尽可能少地提供信息。

    1.2K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券