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

颜色革命（下）

另外，对于个人信息类页面，信息以列表显示为主，所以保持了与主流APP相关功能页的相识设计，只是将图标用主题色铺色。...1.2.4 分割线样式设计建议 分割线的设计其实是移动设计中最难把握的部分，在我们CMF中，虽然笔者强调过多次，但依然难称满意，因此，此部分的示例就从我推崇的“IOS系统设置”应用说起...Banner一般是宽图，占据页面正文上半部分最显著位置，多采用图形+文描的形式来展示。 对于图形的选择有全图与半图两种，全图是指用整张图片做背景，在图片相对空白处附上文描，靠图说话。...其主要思想也是遵循IOS的交互设计理念，对于重点内容突出显示，引起用户聚集，对于可忽略内容，淡化处理，尽量不分散用户注意力。...在CMF的选色过程中，对于数值内容的显示，最开始只有三种颜色——橙黄色、黑色、白色。这样虽然页面颜色效果足够统一，但也不免单调死板。

83730

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

在所有超级令人兴奋的功能中，关于黑暗模式的部分最让我兴奋。对于那些在社交媒体上关注我的人，您可能知道我是“黑暗模式”的忠实粉丝。使用iOS 13后，人们可以选择采用深色系统外观。...03 系统背景色 根据准则，iOS的背景始终具有＃000000的纯黑色。Google 则更喜欢深灰色，值为＃121212。 ? 苹果将此背景称为“ 系统背景”。...系统背景分为3个级别，即主要，次要和第三级。每个按钮都有不同的颜色，iOS 13 UI Kit中提供了这些颜色。这些适用于给人以更高的层级或与众不同（或分组）内容的元素。 ?...不必告诉它在明亮模式下显示白色，而在黑暗模式下显示黑色。系统会自动判定。 ? 如果要在暗模式下为元素显示自定义颜色怎么办？ 当然，你可以轻松地做到这一点。为每种模式分配自定义颜色即可。...在上图中，您可以看到相机和笔图标触摸目标，我使用了灰色。对于搜索栏，我使用了填充色。 那么，是否必须以这种方式使用这些颜色？不。如前所述，你可以随意使用所有10种颜色（4种填充+ 6种灰色）。

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

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

    这有利于提高我们的工作效率，保证用户良好的体验。 iOS设计规范系列共10篇。本文是第8篇，介绍图标和图像（Icons and Images)。...一、图片尺寸和分辨率(Image Size and Resolution) iOS屏幕上放置内容的坐标系统，是基于以点为单位的测量值，该测量值是映射到显示器的像素。...例如，“邮件”应用程序图标使用一个信封，该信封通常与邮件相关联。花时间设计一个美观且引人入胜的抽象图标，以艺术方式代表您的应用程序的目的。 保持背景简单，避免透明。...如果你不提供这些图标，iOS可能会缩小你的主应用程序图标显示在这些位置上。 ? 不要在“设置”图标上添加叠加层或边框。...iOS会自动为所有图标添加1像素描边，以便它们在“设置”的白色背景上看起来更友好。 用户可选的应用程序图标 对于某些APP来说，定制是一项能够唤起用户共鸣并增强用户体验的功能。

    3.7K20

    如何为移动应用设计出色的图标

    特别是一些需要基于应用程序进行创业的公司，图标设计直接关系到您在应用程序市场中的知名度。 本文将重点介绍Android和iOS应用程序的设计。我将总结设计中一些最重要的方面，例如外形尺寸和颜色选择。...让我们看看这种常见做法的其他示例： ? Google Play应用商店中的著名图标 我们可以从上面显示的图标中学到很多优秀案例。如我们所见，所有这些图标的背景颜色都使用了其主要的品牌颜色。...但是，请注意，文本和徽标通常为白色且居中。一般情况下，我们要使用干净的背景色和一些白色的标志性图形或文字来营造对比和清洁度。...因此，Instagram的重新设计仍然遵循一些典型的模式：带有渐变和一些简单且居中的白色对比形状的一般彩色背景。 下面我们来总结一下诀窍： 使用与您的品牌颜色相对应的背景色。...它通常是公司的徽标或至少是简化版本。 由于可伸缩性问题，将文本用作图标的核心可能不是一个好主意：以较小的尺寸显示图标时，文本可能不可读。但是，使用单个字母或其他形式通常可以避免此问题。

    1.8K20

    安卓的切图规范

    Android UI 切图命名规范、标注规范及单位描述 很多UI设计师做APP切图都会有两套，一套是Android的，一套是IOS的。IOS我这边暂不作讲解，因为我本人也不是开发IOS。...这里整理一下我在Android开发中总结的一些有利于本人开发的一些资源图片命名规则，并将其中有价值传播给大家。...： 前缀 原始 说明 示例 ic icon 主要用于布局和子布局的图标 ic_launcher bg background 要用于布局和子布局的背景 bg_welcome btn button 主要用于按钮的表示...bg_white (白色) tra 透明度 bg_banner_green_tra30 (banner中绿色背景指定30%透明) level 层次、水平 img_status_level60 (状态为...3、切图包的存放位置（以当前48dp为例）： 对应dp 48dp 48dp 48dp 48dp 48dp 48dp 对应px 36px 48px 72px 96px 144px 192px 文件夹 ldpi

    2.2K20

    ［ISUX译］iOS 9 人机界面指南(五)：图标与图形设计 - 腾讯ISUX

    如果icon的边界小于推荐尺寸，又或者你创建了透明区域，那么你的icon下面就会出现黑色背景，你的icon将会浮于黑背景之上，这在用户所用的漂亮壁纸上看起来不美观。 不要在图标中使用iOS的界面元素。...如果你没有提供这些icon，在这些位置iOS可能会缩小你的应用icon。表格45-1显示了不同尺寸的详细信息。 注意： 如果你的icon底色是白色的，不需要增加灰色遮罩来增强app在设置界面的可见度。...iOS会自动为icon增加1像素的描边，来保证在白色背景的设置界面中所有icon都能达到良好的显示效果。 5.3 启动画面(Launch Files) 启动画面是在你的应用启动时展示的简单占位图。...键区图标虽然也拥有一些内部细节，但如果对选中态的背景进行填充，并在圆圈上增加白色边线，就会令用户感到混淆。 ? 有时候给予选中态一些细微的变化令其有更好的显示效果。...iOS也会在Safari的收藏夹中展示网页图标，当用户点击Safari的URL栏或者打开一个新的网页标签时，这些网页图标就会以矩阵的形式出现。

    1.9K31

    微信黑暗模式终于来啦！UI设计细节完全分析及体验

    前一段时间传的沸沸扬扬的苹果与微信黑暗模式的纠葛，终于以微信适配iOS端告终。3月22日静电一觉醒来，微信已经正式开启了“暗黑”模式。...首先，你必须更新到iOS端的微信7.0.12版本。然后，在白天，只有你手工开启了“设置”>“显示与亮度” 菜单下的深色模式，它才有效果。至于安卓用户，截止3月22日文章发布的时间，官网依然没有更新。...总体来说，黑暗模式下比亮色模式下的图标颜色更“亮”。是不是这里比较拗口？也就是下图中，右侧比左侧的图标，亮度提升啦！ ? 支付界面中的图标，处理方式同上边一样，右图比左图的图标亮度要高一些。...另外，想在黑暗模式上贴各种表情的作者可要注意了，你的GIF表情可能会变成上图那样？ 就像在黑色背景下开了个白色天窗！一大波白色不透明GIF图即将失效！...聊天页面 聊天页面中相应的Tint色也有变化。另外，请注意，背景色依然不是纯白色和纯黑色。而微信的设计师倾向于使用#FEFFFF而不是#FFFFFF，虽然这俩颜色相差几乎为零，肉眼不可分辨。

    1.8K20

    【移动端网页布局】流式布局案例 ③ ( 实现搜索栏功能 | 伪元素选择器 | 子绝父相 | 外边距塌陷处理 | 二倍精灵图处理方案 )

    1 像素大小的 盒子实现 , 宽度 1 像素 , 高度 15 像素 , 背景为灰色 ; 可以通过 ::after 伪类插入上述盒子 , 使用绝对定位设置该盒子的位置 , 注意 子绝父相 , 子元素绝对定位...30 x 29 像素 , 其左上角坐标位置为 166, 0 位置 ; 精灵图的大小是 400 x 400 像素的 , 计算缩放时 , 需要计算缩放比例 ; 精灵图中放大镜图标为 30 x 29 像素...: 15px; /* 设置精灵图 以及精灵图中的放大镜图标位置 */ background: url(...../* 设置 Logo 宽度 10% */ width: 10%; } .app ul li:nth-child(2) img { /* 在 10% 宽度的 Logo 盒子中...: 15px; /* 设置精灵图 以及精灵图中的放大镜图标位置 */ background: url(..

    2.8K30

    【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )

    固定定位 设置该搜索栏位置 , 不管网页如何滚动 , 最上方始终显示该搜索栏 ; 搜索栏下方的 Banner 轮播图 , 如果以 标准流 显示 , 会被 搜索栏 覆盖 , 此处为 Banner 轮播图设置一个上外边距..., 左右各有 4 像素的外边距 ; 导航栏整体背景为白色 ; 在该横向导航栏中 设置了 5 个元素 , 这里可以使用百分比布局实现 , 也可以使用 Flex 弹性布局实现 ; 将父容器设置为 Flex..., 也就是精灵图缩小一半 ; 需要为每个 图标 , 单独设置其 精灵图背景 的 背景位置 ; .local-nav li [class^="local-nav-icon"] { /* 设置图标的样式...-- 搜索栏右侧按钮 --> 我 的 <!...左侧搜索栏设置成 flex: 1 样式 自动占据剩余空间 */ display: flex; /* 固定定位盒子始终显示在浏览器中指定的位置 与父容器或其它容器无关 *

    1.3K20

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

    为什么Dark Mode变得越来越流行 2018 年的 macOS Mojave 率先支持了深色外观，紧接着 Windows 10 在 2018 年的 10 月份大版本更新中，也引入了 Dark Mode...通过引入语义色彩，设计师可以自上而下地进行框架性设计，首先定义好界面中一共存在哪些元素，然后，为这些元素规划好相应的配色方案，以确保在深浅外观中都获得最佳显示效果。...iOS 深色外观的背景色，是纯正的黑色（#000000），苹果称之为基底色（Base）。不过，这个背景色会随着界面层级的变化，而变成提亮色（Elevated）。...第二行的「Vibrant」则为经过了鲜活化处理的文字效果，在背景色变亮时，也能保证文字的可读性。 此外，苹果还更新了 UIKit    中的系统级控件，以适配深浅两种颜色外观。...例如，iOS 的 Dark Mode 针对图像不会进行特别的处理，如果你的备忘录中有一张白色的照片，就会变得十分刺眼。

    2.1K20

    在React Native中构建启动屏

    在这个教程中，我们将使用 App Icon Generator，这是一个用于创建Android和iOS应用图标和图片的在线平台。...将内容模式设置为“aspect fit”，如下所示： 更改iOS启动屏幕颜色 你可能会问的下一个问题是“我如何在 React Native 中更改启动屏幕的背景颜色？”...为了在 iOS 中为启动屏幕强制使用一致的背景，滚动到背景设置位置并从下拉菜单中选择 Custom。在弹出窗口中，选择启动屏幕的期望颜色。...我们可以用我们的自定义图像替换它。同样，我们可以调整图像的大小（即 contain、cover、stretch），以更好地适应我们的屏幕，最后，我们可以根据我们的选择设置背景颜色。...对于我们的示例，我已经将图片替换为我们的自定义图片，然后将背景更改为我们的样式： /* app.json */ { "expo": { ....

    4.7K10

    iOS中UISearchBar(搜索框)使用总结

    ，枚举如下： typedef NS_ENUM(NSInteger, UIBarStyle) {     UIBarStyleDefault          = 0,//默认风格 白色搜索框，多出的背景为灰色...@property(nonatomic,copy)   NSString               *prompt;  这个属性的官方解释是在搜索框顶部显示一行文字，其实就是背景文字，上图说明：    ...UISearchBarStyleDefault,    // currently UISearchBarStyleProminent     UISearchBarStyleProminent,  // 显示背景...    UISearchBarStyleMinimal     // 不显示背景 } NS_ENUM_AVAILABLE_IOS(7_0); @property(nonatomic,assign,getter..., // 清除图标     UISearchBarIconBookmark, // 书本图标     UISearchBarIconResultsList, // 结果列表图标 }; 下面是搜索框控件的一些代理方法

    2.9K10

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

    这有利于提高我们的工作效率，保证用户良好的体验。 iOS设计规范系列共10篇。本文是第10篇，介绍拓展程序（Extensions)。 扩展程序(Extensions) ?...突出显示有趣的iOS应用内容。通过在消息空间显示其内容来扩展iOS应用程序的功能。考虑人们可能想要共享哪些信息，以及他们如何在活跃对话的背景下与您的应用进行交互。 插入内容以避免裁切。...贴纸格式 邮件支持以下文件格式的贴纸： ? iMessage应用程序和贴纸包图标 像iOS应用一样，iMessage应用和贴纸包也需要可识别的应用图标。保持背景简单，并提供单个焦点。...设计一个带有单个中心点的图标，一目了然。包括一个不会压倒其他图标的简单背景。 保持图标四角方形。系统应用一个自动将图标角变圆的蒙版。提供不同大小的图标。...将模板图像用作操作扩展图标。模板图像使用遮罩创建图标。使用具有适当透明度和抗锯齿的黑色和白色，并且不要包含阴影。模板图片应居中放置在大约70px×70px的区域中。

    4.2K10

    移动应用设计新趋势

    我喜欢这种简洁的界面，同时想起了另一款我追随好久的平台Medium。Medium从2012年开始就使用黑白色基调，每次改版都在简化界面，实际上人们都不知道 Medium 是“界面简化”的发起人之一。...Airbnb 移动端新界面的标题更大更粗，同时去除了不必要的图片和背景色，简化了图标让它们更容易辨认功能。剩下的是一款内容突出、功能清晰的黑白主题界面。...这个月初，科技界巨头苹果公司在它们的 WWDC 大会上发布了许多用户期待的东西，其中包括所谓的“最最最牛的 iOS 版本” iOS 10 正式版（或许跟 iOS 8 相比的确牛一些:( ）。...Macword 全职作家 Caitlin McGarry 对新版界面描述道：“这是一个全新的界面，大号的卡片布局，显眼的字体，白色简洁的背景，让专辑封面更加耀眼 听起来是不是有点耳熟？...剩下的最好都用黑白色，突显你应用的内容。 2. 更大、更粗、颜色更黑的标题。你看到那个标题了吗？将它增加约20至30像素，让它看起来“重”一些。 3. 简单、辨识度高的图标。

    98620

    最新iOS设计规范七｜10大视觉规范（Visual Design）

    使用系统定义的颜色可确保前景和背景内容之间的对比度。对于自定义颜色，目标是对比度为7：1，尤其是对于较小的文本。 柔化白色背景的颜色。...如果你必须在深色模式下使用白色背景作为内容，请选择稍暗的白色，以防止背景对比周围的暗色内容像发光一样。...图像、图标和符号的颜色 iOS系统的SF符号，在深色模式下会自动显示效果，以及针对明暗外观优化的全彩色图像。 尽量使用SF符号。...系统定义的材料和活力 iOS定义了你在特定位置可以使用的材质，以控制前景内容和背景外观之间的视觉分离。系统提供的材质包括适用于大多数背景的浅色和深色变体。...始终以原生纵横比显示视频内容。当视频内容使用嵌入式信箱或邮筒模式填充以符合特定的纵横比时，iOS无法根据用户选择的观看模式正确地缩放视频。嵌入的视频会使其在全屏模式和适合屏幕模式下显示得更小。

    10.3K30

    扒虫篇－Bug日志 Ⅱ

    Paste_Image.png 可是我这里并没有显示出来啊，而且老板定下的名字也不能改啊，于是我尝试各种解决办法：关闭浏览器清理电脑，再次登录；换台电脑再次登录；重启电脑，再次登录。可是还是如此。...Snip20161126_10.png 4. 获取某一行cell的崩溃性Bug 这是一个大家一不小心就会犯的错误，我也是经常躺枪，当时记住了，事后又忘记出错了。 ?...一个自定义弹框，点击页面上任何地方都会触发消失手势 ~ 一个自定义弹框中有一个灰色的背景，点击可以让整个弹框都消失，点击中心的白色编辑区域，不应该消失，可是现在，点击中心的白色编辑区域也会触发加在灰色背景上的消失手势...解决方法: 原因是因为，白色的区域 addSubView 在了 灰色背景视图上，手势加在灰色视图上，因为白色的父视图是灰色的视图，所以点击白色的区域也会触发其父视图的手势，，，，，只需要把白色视图不加在...灰色区域即可，这样，点击白色区域就不会触发灰色背景上的消失手势了。

    70210

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

    艺术品的变化有时需要改变附近的颜色，以保持视觉连续性并防止界面元素变得过于强大或不足。例如，地图在使用地图模式时会显示浅色方案，但在激活卫星模式时会切换为深色方案。...始终在多种光照条件下预览您的应用，包括在晴天户外，以查看颜色的显示方式。如有必要，调整颜色以在大多数用例中提供最佳的观看体验。...考虑True Tone显示如何影响颜色： True Tone显示器使用环境光传感器自动调整显示器的白点，以适应当前环境的照明条件。...确保应用中的颜色发送相应的消息。 避免使用让人们难以察觉应用内容的颜色：例如，色盲人可能无法区分某些颜色组合，而对比度不足会导致图标和文本与背景混合并使内容难以阅读。有关指导，请参阅颜色和对比度。...如果您必须在暗模式下使用白色背景作为内容，请选择稍暗的白色，以防止背景对周围的暗色内容太刺眼。比如可以为白色背景加一些透明度，这样舒适性更好。

    5.1K40

    教你在Tableau中绘制蝌蚪图等带有空心圆的图表（多链接）

    那么我们如何在Tableau中创建一个相似的图表，并使得空白圆圈里面保持白色（或者任何背景颜色）呢？ 不好用的方法 在我介绍解决方案前，我将分享一些自己不太成功的尝试。...，从下拉目录中选择“线” 移动时间到路径 右键点击Y轴并选择“显示标题”以删除标题 右键点击顶部的第二个X轴并选择“显示标题”以删除标题 你现在应该有一个与下图类似的蝌蚪图： 添加白色中心到填充点...我发现创建空白圆圈的最好方法就是用另一个圆圈填充白色（或其他背景颜色）的点内部。因此，我们将复制销售圈栏并将其覆盖在当前圆圈的顶部。...现在你的图例中应该有12种颜色。 双击图例中的任意颜色以打开编辑颜色菜单 将所有销售圈（副本）颜色改为白色(或背景颜色)并根据需要指定其他颜色。...这些技巧可以用于创建棒棒糖图，哑铃图，或者任何包含了点与线组合的图表。此外，你还可以反转尺寸来将白色圆圈放在外部，以在点与点之间产生间隙。

    9.5K50

    【移动端网页布局】流式布局案例 ⑤ ( 连续排列的链接图片 | 设置盒子圆角 | 超出部分隐藏 | 设置浮动布局 | 精确计算浮动元素宽度避免换行 | 设置图片宽度自适应 )

    /* 设置 Logo 宽度 10% */ width: 10%; } .app ul li:nth-child(2) img { /* 在 10% 宽度的 Logo 盒子中.../images/jd.png) no-repeat; /* 设置背景图片的尺寸 会缩放背景图片 */ background-size: 20px 15px; } .jd-icon::after...right 值为负数说明该竖线在 JD 图标之外 */ right: -8px; top: 0; /* 设置显示模式为块级元素 可以设置宽高 */ display: block.../* 设置放大镜图标的 绝对定位位置 */ top: 8px; left: 50px; /* 设置盒子模型尺寸 */ width: 18px; height...: 15px; /* 设置精灵图 以及精灵图中的放大镜图标位置 */ background: url(..

    4.4K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券