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

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

例如:无论可用的屏幕空间多大,你都可以约束一个按钮,使其始终水平居中并定位在距离图像下方8pt的位置。 当检测到某些环境变化(称为特征)时,自动布局会根据指定的约束自动调整布局。...该系统包括预定义的布局指南,可轻松在内容周围应用标准边距并限制文本的宽度,以实现最佳的可读性。您还可以定义自定义布局指南。 ? ? 遵守UIKit定义的安全区域和布局边距。...在较大的设备上显示文本时,应留有可读性页边距。这些边距使文本行足够短,以确保舒适的阅读体验。 适应上下文的变化 在上下文变化期间确保聚焦在当前内容。内容是APP中优先级最高的。...放置在半透明元素后面或应用于半透明元素(如工具栏)上时,颜色也会显得不同。 在各种照明条件下测试APP的配色方案。根据房间的氛围、一天的时间、天气等,室内和室外的照明差异很大。...使用资产目录将你的资产组合成一个单独命名的图像。 文字颜色 鲜艳度可以帮助在深色背景上保持文本的良好对比度。 使用系统提供的标签颜色作为标签。

8.1K30

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

当你这么做的时候,请确保用户通过一个简单的手势(比如一下轻击)即可重新唤起导航栏。 ? 4.1.3 工具栏 工具栏上放置着用于操作当前屏幕中各对象的控件。 ? ?...占位符文本通常会写明控件的功能(比如上图里的 “Search”字样),或者提示用户输入的文本将在哪里搜索(如“Google”)。 书签按钮(The Bookmarks button)。...对分视图控制器包含广泛的对象和视图,诸如: 表格,图像,地图,文本,网络,或自定义视图 导航栏,工具栏,或标签栏 注意 即使左侧窗格通常被称为主窗格,右侧窗格被称为详情窗格,但在代码中并没有强制固定这种从属关系...,将唤起键盘(键盘的布局和类型取决于用户的系统语言设置) 始终确保文字的易读性。...虽然你可以使用属性字符串将不同的字体、字色和对齐方式串联在同一个文本视图内,但保持文本的可读性是必不可少的。

10.1K51
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

    并确保在较低的级别选择准确的返回按钮标题。 ? 二、搜索栏(Search Bars) 搜索栏允许人们通过在字段中键入文本来搜索大量值。搜索栏可以单独显示,也可以显示在导航栏或内容视图中。...有几种常见的技术可以做到这一点: · 在APP中使用导航栏,该导航栏会自动显示状态栏背景,并确保内容不会显示在状态栏背后 · 在状态栏背后显示自定义图像,如渐变色或纯色 · 在状态栏背后放置模糊的视图...仅包括基本选项卡,并使用信息层次结构所需的最少数量的选项卡。通常,在iPhone上使用三到五个标签;如果需要,在iPad上可以接受更多一些。 当人们导航到您应用中的其他区域时,请不要隐藏标签栏。...如果在某些情况下可以使用标签,但在其他情况下则无法使用,则应用程序的界面将变得不稳定且不可预测。确保所有选项卡始终处于启用状态,并说明为什么选项卡内容不可用。...可以在标签上做标记 - 包含白色文本的红色椭圆(即小红点),或者一个数字或一个感叹号,用以提示用户有新信息,并且新信息与该视图或模式是相关联的。 确保标签栏标志符号在视觉上保持一致和平衡。

    9.9K10

    【Java 进阶篇】HTML 图片标签详解

    HTML(超文本标记语言)是构建Web页面的标准语言,它包含了许多标签,用于定义和排列页面内容。在Web开发中,显示图像是非常常见的需求之一,为此HTML提供了标签来插入图像。...绝对路径:包括完整的URL,通常用于引用远程服务器上的图像,如 src="https://example.com/image.jpg"。 根路径:以斜杠开头,表示相对于Web服务器的根目录。...这些属性可以用于调整图像的大小,但最好使用与原始图像比例相同的值,以避免图像变形。 title:指定当用户将鼠标悬停在图像上时显示的文本,通常用于提供附加信息。...替代文本:始终为图像提供有意义的 alt 属性值,以确保无障碍性和搜索引擎优化。 版权和授权:确保您拥有或获得了插入到网页中的图像的版权和授权。...总结 标签是HTML中用于插入图像的主要标签,具有许多可用于控制图像显示的属性。使用这些属性,您可以轻松地在网页中插入图像并控制其外观和行为。

    55420

    iOS 图标图像 (官方翻译版)

    图像尺寸和分辨率 iOS用于将内容放置在屏幕上的坐标系基于以点为单位的测量,它们映射到显示屏中的像素。在标准分辨率屏幕上,一点等于一个像素。高分辨率屏幕具有较高的像素密度。...网格保持线条清晰,并确保内容在所有尺寸上尽可能清晰,需要较少的修饰和锐化。将图像边界捕捉到网格以最小化半像素,并缩小缩小时可能会出现的模糊细节。 以适当的格式制作艺术作品。...在每个图像上进行压缩设置,以找到可以获得可接受结果的最佳值。 提供图像和图标的替代文本标签。...静态启动屏幕图像 最好在启动屏幕上使用Xcode故事板,但如果需要,您可以提供一组静态图像。为不同的设备创建不同大小的静态图像,并确保包含状态栏区域。 ?...组织导航栏和标签栏图标 将项目移动到新的目的地,如文件夹。组织 ? 暂停导航栏和标签栏图标 暂停媒体播放或幻灯片。暂停时始终存储当前位置,以便播放可以在以后恢复。暂停 ?

    3.6K40

    技术写作最佳实践与策略指南

    必要时使用图表和图像: 视觉辅助工具通常可以提高对复杂概念或过程的理解。 写出清晰简洁的句子: 避免使用读者可能不明白的模糊信息和术语。始终追求可读性。...本质上,它围绕着将信息呈现为具有清晰开始、中间和结束的叙述。这需要建立背景(开始),解释过程或概念(中间),并总结过程或概念的结果、结论或应用(结束)。...始终记得将 行动呼吁放置在读者可以轻松看到的地方,并且建议为独立的行动呼吁按钮使用对比色,如果可能的话,使其更显眼。 参考资料 参考资料是任何技术文档的重要组成部分。...根据您使用的写作风格,您可能需要提供文本内引文或脚注。此外,在文档末尾创建参考列表或参考文献有多种格式。始终确保您的参考资料相关、最新且引用正确,以避免剽窃。...它可以帮助技术作者形象化地了解受众,理解他们的需求和期望,确保内容被清楚地理解,并提高整体的可读性。用户角色使作者能够设计有效的沟通策略并创建以用户为中心的文档,使信息易于查找、理解和使用。

    29910

    网站设计:十条需避免的常见错误

    在照片上方放置太多的文本会造成阅读困难。 如果你在照片上放置文字,记住 -- 颜色对比是你最大的朋友。你需要与这部分工作建立良好的关系,因为它是每个网页设计过程的自然元素。...幸运的是,有一些简单的方法可以实现准确的色彩对比,尽管必须在图片上放置大量文本。...有用的资源: 你网站的建设者 Freepik Flaticon Iconoir(开源) Boxicons(开源) 错误 7:字体和文本类型不匹配 字体选择对你的网站可读性和整体成功至关重要。...错误 9:内容放置不准确 请记住这条规则:少即是多?当我们在讨论照片和图像上放置文本时,它当然适用。然而,有时候,如果你过于努力追求极简主义,你的设计最终可能会让人感觉空洞。...但一定要向用户提供所有说明,并指导他们完成整个过程。 部分技巧: 输入字段添加标签。 每当用户完成一个字段,你应该校验表单。

    34320

    干货!7个设计师必知的图标设计原理,收藏了!

    考虑一下您的用户,并使用与之产生共鸣的隐喻和色彩。 请记住,如果所表示的想法过于抽象,则独立图标可能不是最清晰的解决方案。在这种情况下,请将图标与文本标签配搭配使用。...Google Maps的图标非常出色-可读性很棒: ? Google Map图标 003.对齐 为确保每个图标感觉平衡,请精确的将他们对齐。 ?...就像排版人员进行细微调整以在字体中创造平衡的视觉效果一样(请注意“ i”和“ j”上的偏心点,以及“ O”上的过冲点), ? -设计师会进行类似的调整以平衡图标。...Waze图标 Waze为什么受欢迎,在很大程度上取决于其图像设计。这些色彩斑斓的图标对用户说:“我们很古怪!” Twitter的图标柔软,明亮,清晰: ?...确保图标在UI界面中工作良好,确保它们与较大的视觉系统协调工作。 将图标彼此并排放置有助于证明我们的上述原则(清晰度,可读性,对齐方式,简洁性,一致性和个性): ?

    1.3K10

    怎样为H5网站创建具有可读性的内容?

    烟台H5网站建设内容的设计不仅仅只是在视觉上给人一种好看的感觉,更应具备可读性的内容。 因此我们必须创建一个用户可以实际阅读的设计并帮助他们参与到内容中。...通常我们会使用H2,H3和H4标签来设计和创建标题,这样可以打破文本在大小上一致的问题。 创建一个具有一致性的文本位置和大小,使得用户更容易浏览文本。...仔细思考这些特性,你可以看到几乎任何类型都可能包含可读的选项。你不需要坚持纯粹的衬线或无衬线字体,其他混合的字体实际上也是很好的。请确保测试你打算使用的字体,以确保它们易于阅读。...注意文本是如何放置在图像中心的,你的眼睛会先关注到人物的脸上,然后下降到动画圈内的文字,再然后移动到较小的,更次要的文本块。...设计的重点应该放在你最好的图像、插图或动画,并涉及到关键信息上。焦点应该确定设计是什么,以及用户为什么要注意到它。因为这是用户首先要看的,它设置了如何与设计交互的基调。

    1.1K50

    最新iOS设计规范十|5大拓展程序(Extensions)

    贴纸是可以发送或放置在消息,照片和其他贴纸上以增强重点并传达情感的图像或动画。 ? 为表达而设计。人们使用贴纸在视觉上传达情绪和反应。努力提供贴近人们情感的贴纸。...考虑合并图像,单词和短语以为对话添加新的维度。 放眼全球。消息传递是一种通用的通信形式。力求获得具有广泛国际吸引力的贴纸。 使用描述性图像名称或提供替代文本标签。...尽管它们在屏幕上不可见,但是图像名称和其他文本标签使VoiceOver可以听得见地描述贴纸,从而使视力障碍者的导航更加轻松。 通过动画增加活力。...尽管贴图可以是静态图像,但动画贴图是在对话中传递能量的好方法。确保使用足够高的帧频以保持运动流畅。 测试放置的可能性。用户可以缩放,旋转和在对话的各个部分上放置贴纸。...确保您的贴纸清晰可见,无论其位置或大小如何,其颜色和图像均不同。 考虑使用鲜艳的色彩和透明度。鲜艳的色彩为对话增添了丰富感和兴奋感。透明性允许将贴纸有意义地放置在消息,照片和其他贴纸上。

    3.2K10

    「技巧」如何在图片搜索中排名更高

    所以, 无论什么时候, 都要清醒地认识自己, 并始终不忘努力。 SEO搜索引擎优化不仅仅是优化页面内容在百度搜索结果页面中的排名,其实也还有很多地方是可以优化,获取排名,从而获取流量。...3、Alt属性 Alt属性,是图片的替代文本,如果您的图片加载失败,或者用户正在使用辅助设备(如屏幕阅读器)访问您的网站,则会显示替代文字。...由于网络爬虫没有眼睛,它们也是搜索引擎“看到”而不是图像,使得它们对于可访问性和搜索引擎优化都很重要。 因此,替代文本和标题文本标签字段是放置任何关键字与您的图像相关的最佳地点,但:不要乱堆砌关键字!...4、标题文字 标题文本实际上是图片的名称,因此与图像文件名的作用非常相似。主要区别在于它需要人类可读性和机器可读性,所以使用空格来分隔图片中的词语,而不是下划线或破折号(或根本没有)。...例如,如果图像是一个人的头像,那么他们的名字就足以用于标题文本,因为它告诉人们和搜索引擎图像是什么,在替代文本中不需要额外的细节。标题属性很重要,但可千万别堆砌关键词哦!

    886110

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

    将按钮放置在人们期望的位置。一般而言,人们最有可能点击的按钮应位于右侧。取消按钮应始终位于左侧。 正确标记取消按钮。取消警报操作的按钮应始终标记为“取消”。 识别破坏性按钮。...默认情况下,图像视图是不可进行交互的。 ? 如果可能的话,请确保动画序列中的所有图像大小一致。理想情况下,应对图像进行预分类以适应视图,避免系统再进行任何缩放。...浮层适合大屏幕上,可以包含各种元素,包括导航栏、工具栏、标签栏、表格、集合、图像、地图和自定义视图。当浮层出现时,其他视图的交互行为会被禁止,直到浮层被取消/关闭。...浮层不应该占据整个屏幕,足以显示其内容并指向触发按钮即可。请注意,系统可能会调整浮层的大小,以确保它适合屏幕。 确保自定义的浮层与系统提供的浮层类似。...虽然你可以使用各种类型的字体、颜色以及对齐方式,但必须保持内容的可读性。采用动态类型文本是个好办法,这样如果用户在设备上更改文字大小,你的文本内容仍然会有友好的体验。

    8.5K31

    一篇文章读懂UI按钮设计细节与规范

    这就是为什么矩形(或者圆角矩形)始终是按钮最安全也最常见的选择的原因。 ? 看到这个我们就会认为它是按钮 用户无法识别其他形状的按钮,比如三角形,原型,或者不规则形状。...如结账按钮可以通过购物篮或者购物车图标促使用户快速识别,但前提依然是要将“结账”一词显示出来。 ? 在按钮标签之后放置向右箭头,可以让按钮的导向性进一步加强。用户更加迫切的点击并继续操作。...如果你在按钮上方保留了对齐文本,则圆角越圆,在该文本在视觉上将会越小。太会让你感觉左边距和上方文本不在同一个位置上(也就是说没有对齐)。 ?...这个图形应该在一个视觉形状中有填充,以便与我们的文本高度相同。然后,将图标放置在较小的形状中。 如果是人字形图标,那么最高使其与文本高度相同,并且您还可以根据字体的宽度检查线宽。...· 检查该半径是否与你的其它屏幕元素匹配 · 确保有合适的尺寸。

    3.8K30

    助力数据可视化的 20 个指导方法

    始终在 0 基线处开始条形图 截断会导致误传。在下面的示例中,查看左侧的图表,您可以很快得出结论,值 B 比 D 大 3 倍以上,而实际上差异要小得多。从零基线开始可确保用户获得更准确的数据表示。...不要在切片上贴标签 将值放在切片之上可能会导致多种问题,从可读性问题到薄片挑战。相反,为每个段添加带有明确链接的黑色标签. 11....分配的颜色应该是不同的,以确保可访问性。 一个连续调色板最适合需要被放置在一个特定的顺序数值变量。使用色调或亮度或两者的组合,您可以创建一个连续的颜色集。...在调色板中使用不同的饱和度和亮度 以黑白打印您的数据可视化,以检查对比度和可读性。 17. 关注易读性 确保排版传达信息并帮助用户专注于数据,而不是分散注意力。...选择清晰的字体,避免衬线和高度装饰的字体 避免斜体、粗体和全部大写 确保与背景形成高对比度 不要旋转你的文字 18.使用水平条形图代替旋转标签 这个简单的技巧将确保用户能够更有效地扫描图表,而不会拉伤他们的脖子

    1.7K30

    学术大咖推荐的7个必备论文润色技巧

    优化语句 这不仅仅是修复错误,还要确保每个词都有其目的,每个句子都流畅自然。 Prompt:作为一位专注于提高文本清晰度和可读性的经验丰富的作家,请审查我的[内容]。...Prompt:作为一位擅长文本内容语气和声音调整的经验丰富作家,你的任务是修改和编辑[内容],以达到与【目标受众】共鸣的特定语气。必须在保持一致性的同时,确保内容的清晰性、可读性和核心信息的有效传达。...最终的文本应能吸引受众,并有效地实现预期目的。 5. 改进格式和演示 格式和演示直接影响信息的接收方式。通过这一提示,你可以确保内容始终以最佳方式呈现。...Prompt:作为一位熟练结构化书面内容的经验丰富作家,你的任务是审查[内容],确保其在段落分隔、标题和缩进方面格式正确。目标是提高可读性,引导读者通过逻辑段落分隔,并遵守标准的写作规范。 6....确保这些增强内容无缝融入原文,保持其语气和风格。 7. 以专门的形式写作 不同的写作形式有各自的规则和惯例。但掌握了这个提示,你的写作将始终符合这些要求。

    9810

    使用 Java 为图片添加各种样式的水印

    水印有多种类型,常见的包括:文本水印:在图像上添加特定的文字信息,如作者名、公司名或版权声明等。图像水印:在图像上添加另一个图像作为水印,如公司 Logo 或品牌标识。...平铺水印:将水印图像或文本重复覆盖整个图像区域,以增强保护效果。接下来,我们将逐步介绍如何在 Java 中实现这些不同类型的水印,并探讨如何根据实际需求进行自定义和优化。2....无论是文本水印还是图像水印,其核心都是将水印内容绘制在目标图像上。Java 提供了强大的 Graphics2D 类,可以用来在图像上绘制各种图形和文本。...实现文本水印文本水印是最简单的一种水印形式,通常用于在图像上添加文字信息,如作者名、版权声明或其他标识。接下来我们将通过代码示例演示如何在 Java 中添加文本水印。...,以确保水印在视觉上更加和谐。

    58910

    Python 图形化界面基础篇:使用框架( Frame )组织界面

    框架是一种用于分组和布局其他 GUI 元素的容器,它能够帮助我们更好地组织界面,提高代码的可维护性和可读性。在本文中,我们将详细解释如何创建和使用框架来构建更复杂的 GUI 界面。...Tkinter 的框架( Frame )是一种容器,它用于组织和布局其他 Tkinter 组件,如标签、按钮、文本框等。框架通常被用于将相关的组件分组在一起,以便更好地管理和布局。...你可以将框架看作是一个矩形区域,你可以在其中放置其他组件,并根据需要调整框架的大小和位置。 框架的主要作用包括: 1 ....现在让我们开始学习如何在 Tkinter 中创建和使用框架。 步骤1:导入 Tkinter 模块 首先,确保你已经安装了 Python 并包含了 Tkinter 库。...步骤4:在框架中添加其他组件 一旦创建了框架,你可以在其中添加其他 Tkinter 组件,例如标签、按钮、文本框等。要将组件添加到框架中,只需将框架作为父组件传递给组件的构造函数即可。

    2.6K31

    HTML试题——附答案

    如何在HTML中编写注释?HTML试题答案1. HTML是什么意思?它是什么类型的语言?答案: HTML指的是超文本标记语言(HyperText Markup Language)。...常见属性示例:href(用于标签,指定链接的URL)src(用于标签,指定图像文件的路径)class(用于为元素定义一个或多个类名,用于样式控制)id(用于为元素定义唯一的标识符)alt...(用于标签,指定图像的替代文本)6....常见的HTML表单元素:(接收用户输入,如文本框、复选框、单选框等)(用于多行文本输入)(创建下拉列表)(创建按钮)(包含表单元素...答案: HTML语义化是指正确选择合适的HTML标签以及它们的使用,以便更好地描述页面内容的结构。它能够增强页面的可读性、可维护性,并对搜索引擎和辅助技术提供更好的支持。8.

    31210

    Power BI 仪表板设计技巧及注意事项

    使用视觉提示(如颜色对比或较大的字体)来吸引对这些区域的注意。 6. 对齐视觉元素并保持一致性: 精心设计的 Power BI 仪表板可以自然地引导用户的眼睛并创建无缝体验。...从零开始可视化: 始终从 y 轴上的零开始可视化,以确保准确的数据表示。当图表或图形不是从零开始时,它们会夸大数据点之间的差异并导致误解。...简化数据标签: 通过使用简短描述和最小化小数点后位数,使数据标签保持简洁。这使得标签更干净、更整洁且更易于阅读。必要时包括货币符号或单位,以提供上下文并阐明所呈现的内容,使用户能够快速了解数据类型。...使用注释、文本框和其他叙述元素来提供上下文并突出显示关键发现。结构良好的控制面板有助于引导用户浏览数据,确保他们理解洞察并采取适当的行动。...关注用户需求并始终致力于清晰、有影响力的设计,将有助于将 Power BI 仪表板转变为推动业务成功的强大工具。

    19710

    最新iOS设计规范八|3大图标和图像规范(Icons and Images)

    网格可以使线条保持清晰,并确保所有尺寸的内容都尽可能清晰,减少修饰和锐化。将图像边界对齐到网格以最小化缩小时可能出现的半像素和模糊细节。 以适当的格式制作图稿。...在每张图像上进行压缩设置实验,以找到可以接受的最佳值。 提供图像和图标的替代文本标签。...替代文本标签在屏幕上不可见,但是它们使VoiceOver能够以听觉方式描述屏幕上的内容,从而使视力障碍者的导航更加轻松。...请注意,APP图标只能根据用户的请求进行更改,并且系统始终会向用户提供此类更改的确认。 提供所有尺寸并且视觉上一致的备用图标。与主应用程序图标一样,每个备用图标都作为一组大小不同的相关图像提供。...每个系统提供的图像都有特定的、通用的含义。为了避免混淆用户,每个图像必须按照其含义和推荐的用法使用。 为图标提供文本标签。

    3.1K20
    领券