文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Refactoring UI

在信息密集的页面（如产品的技术规格）中，这种情况经常出现 通常只需在标签上使用较深的颜色，在数值上使用稍浅的颜色即可 # 将视觉层次结构与文件层次结构分开 默认情况下，网络浏览器会为标题元素分配逐渐变小的字体大小...当使用柔和的颜色会使 1px 的细边框等过于微妙，但加深颜色又会使设计感觉刺眼和嘈杂时，这种方法就很有用 增加边框的宽度，让边框更厚重一些，这样既能突出边框， 又不会失去柔和的感觉 # 语义是次要的...当你在设计一个几乎所有内容都是链接的界面时， 使用一种旨在让链接在段落文本中 "突显 "出来的处理方法，就会显得非常霸道 可以用更微妙的方式强调大多数链接，比如使用更重的字体或更深的颜色 有些链接可能根本不需要默认强调...为了让灰色更有温暖感，可以在灰色中加入一点黄色或橙色 # 无障碍并不一定意味着丑陋 为确保您的设计具有可访问性，建议普通文本（约 18px 以下） 的对比度至少为 4.5:1，较大文本的对比度至少为..."强化 "已有元素来活跃页面 只需在选定的状态下使用一种自己的品牌颜色，而不是浏览器的默认颜色，往往就足以让人从感觉乏味到感觉设计精良 # 用强调边框增添色彩 在界面的某些部分添加色彩丰富的重点边框

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

    iOS-UITextField 全面解析iOS中UITextField 使用全面解析UITextField的代理方法通知UITextField 在storyboard 中设置属性

    , // 边框加线条 UITextBorderStyleBezel, // 边框加灰色线条 UITextBorderStyleRoundedRect // 圆角 最常用 };...– textRectForBounds:　　 　//重写来重置文字区域 – drawTextInRect:　　 　//改变绘文字属性.重写时调用super可以按默认图形属性绘制,若自己完全重写绘制函数...super可以按默认图形属性绘制,若自己完全重写绘制函数，就不用调用super了. – borderRectForBounds:　　//重写来重置边缘区域 – editingRectForBounds:...屏幕快照 2016-06-15 下午7.17.09.png 1、Text ：设置文本框的默认文本。...2、Placeholder ： 可以在文本框中显示灰色的字，用于提示用户应该在这个文本框输入什么内容。当这个文本框中输入了数据时，用于提示的灰色的字将会自动消失。

    7.3K60

    超实用！手把手教你从头构建UI设计系统

    从零开始搭建UI设计系统，最简单的方法就是快速创建一个包含所有设计素材的资源库， 例如一个包含配色、文本样式、切图以及页面模式等资源的库。...而且，UI设计过程中，大都需要包含以下几种灰阶： 非常浅的灰色，常见于界面背景设计 稍暗的灰色，常用于边框、线条、笔画以及分隔器设计 中灰色，常见于副标题和次级文本设计 深灰色，多用于界面主标题、正文和背景设计...然而，边框圆角的弧度究竟该设为多大才合适呢？ 一般而言，这取决于我们想要带给用户怎样的情感体验。圆角弧度越大，边框就会越圆，看起来就会更加可爱、友好。...通常，我们需要定义以下级别的字体尺寸： 默认字体尺寸（例如CSS中默认的字体尺寸：1 em）, 常作为营销类网页和界面的通用字体尺寸。而16 px则是各大浏览器默认的字体尺寸。...稍大的字体尺寸，用以定义界面博客文字内容。 再大一些的字体尺寸，用以定义界面标题和附标题。 较大的字体尺寸，用以定义区域模块的标题。 超大的字体尺寸， 例如用以定义定价页面上价格的文本字体尺寸。

    1.2K00

    手写原生代码专题 | 图片拖拽效果（一）

    二、 图片拖拽效果介绍 本篇文章，如下视频所示，界面有5个方格拖放区域，我们可以在这些区域里拖拽图片，当鼠标拖动图片时，图片周围有灰色的粗边框效果提示用户当前元素可拖动，在可放置图片的目标方格会出现白色的虚线边框并且背景色更改为黑色...，给图片定义5px宽的灰色边框。...在拖动至目标位置元素时，为了让用户更直观的感受到哪些位置是可以放置的目标元素，我们需要给其定义 hovered 样式，进入目标位置元素时，样式发生改变，背景为黑灰色，并有白色的边框虚线。...dragOver 函数：阻止浏览器的默认行为；当元素离开目标位置时 dragLeave，我们需要将当前元素的样式更改为原始的样式 empty；最后定义 dragDrop 函数，用户在目标位置放置拖动的图片元素...，想必大家都熟悉了拖拽相关的事件和如何应用，有了这些基础后，我们就有了写出更复杂拖拽应用的基础。

    2.2K30

    超实用！手把手教你从头构建UI设计系统

    从零开始搭建UI设计系统，最简单的方法就是快速创建一个包含所有设计素材的资源库， 例如一个包含配色、文本样式、切图以及页面模式等资源的库。...而且，UI设计过程中，大都需要包含以下几种灰阶： 非常浅的灰色，常见于界面背景设计 稍暗的灰色，常用于边框、线条、笔画以及分隔器设计 中灰色，常见于副标题和次级文本设计 深灰色，多用于界面主标题、正文和背景设计...然而，边框圆角的弧度究竟该设为多大才合适呢？ 一般而言，这取决于我们想要带给用户怎样的情感体验。圆角弧度越大，边框就会越圆，看起来就会更加可爱、友好。...通常，我们需要定义以下级别的字体尺寸： 默认字体尺寸（例如CSS中默认的字体尺寸：1 em）, 常作为营销类网页和界面的通用字体尺寸。而16 px则是各大浏览器默认的字体尺寸。...稍大的字体尺寸，用以定义界面博客文字内容。 再大一些的字体尺寸，用以定义界面标题和附标题。 较大的字体尺寸，用以定义区域模块的标题。 超大的字体尺寸， 例如用以定义定价页面上价格的文本字体尺寸。

    1.2K20

    iOS UITextField详解

    //设置为YES时文本会自动缩小以适应文本窗口大小.默认是保持原来大小,而让长文本滚动 textFied.adjustsFontSizeToFitWidth = YES; //设置自动缩小显示的最小字体大小...灰色按钮，标有Return UIReturnKeyGo, 标有Go的蓝色按钮 UIReturnKeyGoogle,标有Google的蓝色按钮，用语搜索 UIReturnKeyJoin...– textRectForBounds:　　 //重写来重置文字区域 – drawTextInRect:　　 //改变绘文字属性.重写时调用super可以按默认图形属性绘制,若自己完全重写绘制函数...super可以按默认图形属性绘制,若自己完全重写绘制函数，就不用调用super了. – borderRectForBounds:　　 //重写来重置边缘区域 – editingRectForBounds...shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string{ //当用户使用自动更正功能，把输入的文字修改为推荐的文字时

    1.8K30

    Python数据分析--折线图

    林骥老师在数据可视化分析中提到改进折线图的 12 个细节: 1、把标题变成左对齐，更加符合设计的审美； 2、把标题颜色换成深灰色，让观察者更加关注数据； 3、删除不必要的边框和网格线，避免它们消耗观察者的精力...去掉那些花花绿绿的颜色，换成只有蓝色和灰色，这样反而能够让重要的信息显得更加突出； 8、坐标轴和标签文字统一换成深灰色，让它们更自然地融入背景，在视觉上不与数据进行竞争； 9、把竖直的日期标签，换成横向的简化日期格式...', '深灰色':'#666666', '浅灰色':'#CCCCCC','红色':'red', '橙色':'#F68F00', '深橙色':'#A05D00', '浅橙色':'#FBC171...，可以在折线的基础上添加填充区域。...#666666', '浅灰色':'#CCCCCC', '橙色':'#F68F00', '深橙色':'#A05D00', '浅橙色':'#FBC171'} # 数据源路径 filepath

    1.3K20

    袋鼠云数栈UI5.0焕新升级，全新设计语言DT Design，更懂视觉更懂你！

    设计提升点根据前⾯定义的设计语⾔，设计团队提取出 5 个设计改进的点：导航将原来的深⾊顶部导航改为浅⾊，引导⽤户将视觉重⼼放在内容⻚⾯，同时浅⾊导航使整体⻛格清爽简洁。...减⼩表格默认⾼度，增加⼀屏可浏览的数据数量。表单表单标题加粗，增加与表单内容的联系；新增表单上下结构样式，将默认表单样式改为上下结构，在横向空间不⾜的情况下，使⽤上下结构能有效提⾼填写表单的效率。...毛玻璃 icon数据类别 icon导航 icon3D icon动效 icon情感化结合 UI 5.0 的设计⻛格⽅向，进⾏情感化系统重塑，赋予更丰富的情感，更流畅的交互，更⽴体的⼈设。...行为层● 微交互⽐如：在⼦产品切换浮窗上，hover 到每个⼦产品区域，增加⼦产品图标对应微动效，增加互动。...● 设计提效拓扑结构重构，建⽴节点设计规范，不同状态的节点仅需替换组件库中对应预设好的状态样式，不需要像之前的节点要单独修改边框颜⾊，设计提效 50%。

    66731

    ArcGIS Pro定位器地图制作心得

    这意味着它只需要很少的信息：只需要一个特征区域的指示，以及足够的地理背景，让人们了解它在世界上的位置。保持定位器地图尽可能简单，以防止它在视觉上与主地图或主要故事竞争。 上面的定位器地图非常简单。...定位器地图有黑色边框，不用担心。删除它就好了。 在元素窗格中，在显示选项卡上，将边框更改为0 pt。...最终定位图： 既然您知道如何制作一张定位器地图，以下是制作更多地图的一些想法和建议： 添加文本 对于定位器地图，应该只有少量文本，这通常更容易添加为布局文本而不是标签。...id=9d87b96d48714e7ca9c89ab63f2c3cd7 使用屏幕混合模式将浅灰色画布底图变为粉红色。 使用颜色混合模式制作黑白版本的影像底图。...但是，您确实要小心，不要选择过度扭曲或旋转您感兴趣的区域的投影——这将使其难以识别。 此投影对于此定位器地图来说是一个糟糕的选择。 可能我最喜欢的定位器地图投影是正交投影，它看起来像一个地球仪。

    3.1K30

    每个前端开发需要了解的10个强大的CSS属性

    /* 设置滚动条的宽度 / ::-webkit-scrollbar{ width: 10px; } / 将轨道改为蓝色并设置圆角边框 / ::-webkit-scrollbar-track{ background-color...: blue; border-radius: 10px; } / 将滑块（显示滚动量）改为灰色并设置圆角 / ::-webkit-scrollbar-thumb{ background: gray...看看复选框和单选按钮的颜色是蓝色的，而不是默认（乏味的）灰色。 input{ accent-color: blue; } 就是这样。你可以使用选择器来使一些输入框变蓝色，一些变红色，一些变绿色。...而且这不会改变文本的颜色，所以你可以尝试各种颜色进行实验。用户界面的颜色由我们控制。 Aspect Ratio 在构建响应式组件时，经常检查高度和宽度可能会令人头疼，因为你必须保持纵横比。...，白色代表遮罩区域，黑色是要裁剪的区域。

    26620

    技巧分享: 如何快速搭建一致统一的设计系统

    样式库设计 在开始吸睛的页面组件设计之前，设计师需要提前做一些准备，即将产品界面分解成更简单，更基本的细小部分，奠定一定设计基础。...而大多UI设计都会涉及以下几种灰色： 极浅的背景灰 深一度且常用于边框、线条、笔划或分隔线的灰色 副标题和辅助正文文本的中灰 主标题，正文以及背景的深灰色 当然，实际的设计中，设计师可能需要更多的灰色。...比如，一些设计师喜欢在设计中会运用3种灰色，以调节正文文本阴影。而一些设计师则更偏爱于使用两种不同的笔画阴影，来突出文本重点。当然，这一切，都可根据具体设计需求和设计师的喜好来决定。...而后，就需要设计师决定设计中可能涉及的文本字体大小，定义出大致的设计范围： 默认值为（1em）的标准文本，在营销类网站或UI设计中是非常常见的字体尺寸。...如图： 边框属性 现在，我们一起来了解另一种需要接受自定义值的样式属性——边框属性 对于组件边框的圆角设计，一般包括以下边框圆角值： 针对小组件（比如复选框，标签和Tags之类组件）的较小边框圆角值

    63710

    技巧分享: 如何快速搭建一致统一的设计系统

    样式库设计 在开始吸睛的页面组件设计之前，设计师需要提前做一些准备，即将产品界面分解成更简单，更基本的细小部分，奠定一定设计基础。...而大多UI设计都会涉及以下几种灰色： 极浅的背景灰 深一度且常用于边框、线条、笔划或分隔线的灰色 副标题和辅助正文文本的中灰 主标题，正文以及背景的深灰色 当然，实际的设计中，设计师可能需要更多的灰色。...比如，一些设计师喜欢在设计中会运用3种灰色，以调节正文文本阴影。而一些设计师则更偏爱于使用两种不同的笔画阴影，来突出文本重点。当然，这一切，都可根据具体设计需求和设计师的喜好来决定。...而后，就需要设计师决定设计中可能涉及的文本字体大小，定义出大致的设计范围： 默认值为（1em）的标准文本，在营销类网站或UI设计中是非常常见的字体尺寸。...如图： 边框属性 现在，我们一起来了解另一种需要接受自定义值的样式属性——边框属性 对于组件边框的圆角设计，一般包括以下边框圆角值： 针对小组件（比如复选框，标签和Tags之类组件）的较小边框圆角值

    1K20

    03.HTML头部CSS图像表格列表

    在本站的HTML教程中我们使用了内联CSS样式来介绍实例，这是为了简化的例子，也使得你能更容易在线编辑代码并在线运行实例。 内联样式 当特殊的样式需要应用到个别元素时，就可以使用内联样式。...浮动图像 本例演示如何使图片浮动至段落的左边或右边。 设置图像链接 本例演示如何将图像作为一个链接使用。 创建图像映射 本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。...使用边框属性来显示一个带有边框的表格： 实例 HTML 表格表头 表格的表头使用 标签进行定义。...大多数浏览器会把表头显示为粗体居中的文本： 实例 在浏览器显示如下： 更多实例 没有边框的表格 本例演示一个没有边框的表格。 表格中的表头(Heading) 本例演示如何显示表格表头。...更多实例 不同类型的有序列表 本例演示不同类型的有序列表。 不同类型的无序列表 本例演示不同类型的无序列表。 嵌套列表 本例演示如何嵌套列表。 嵌套列表 2 本例演示更复杂的嵌套列表。

    19.4K101

    【CSS】盒子模型内边距 ③ ( 盒子模型内边距案例 | 使用 Fireworks 分析网页 | 缩放图片 | 切片工具测量图片 | 吸管工具获取图片颜色 | 代码示例 )

    拖动到 Adobe Fireworks 工具 中进行分析 ; 2、缩放图片 使用 Ctrl + 鼠标滚轮 , 可以放大缩小图片显示 ; 3、切片工具测量图片 使用 切片工具 , 可以测量 图片中 矩形区域...的 宽高 , 宽高显示在下方 , 下图中 切片工具 选中的 浅绿色 矩形 宽高为 9 x 48 像素 , 该区域左上角坐标为 ( 15, 7 ) ; 4、吸管工具获取图片颜色 如果想要获取图片中的颜色..., 使用吸管工具 , 点击图片对应位置 , 然后点击 颜色 按钮 , 即可在其中查看 图片 对应位置的颜色 ; 使用吸管工具 , 点击图片中的灰色横线 ; 然后点击 颜色选项 , 可以查看之前使用吸管工具吸取的颜色值..., 这里获取的十六进制值为 #E8E8ED ; 5、测量结果 测量的 导航栏 整体 高度 为 48 像素 , 没有 上左右 边框 , 整体背景为白色 ; 下边框 1 像素 , 颜色值为 #...E8E8ED , 文本高度 15 像素 , 文本颜色为 #222226 , 这是鼠标经过时的样式 , 鼠标没有经过时颜色值为 #555666 ; 鼠标经过时 , 下边框为 2 像素 , 颜色值

    1.2K20

    实战 HTML & CSS：如何快速搭建一个响应式博客首页

    : red; /* 使用flex布局来排列内容区域内的项目 */ display: flex; /* 设置内容区域的最大宽度为1290像素 */...{ /* 设置内容区域的背景颜色为红色 */ background-color: red; /* 使用flex布局来排列内容区域内的项目 */...; /* 底部边框，颜色为灰色，宽度为1像素，实线 */ padding-left: 10px; /* 左侧内边距为10像素 */ cursor: pointer; /* 鼠标悬停时显示手形光标...0），具有10像素模糊程度的浅灰色阴影 */ } .sidebar { /* 设置侧边栏的宽度为240像素 */ width: 240px; /* 宽度 */ /* 设置侧边栏的高度为...像素模糊程度的浅灰色阴影 */ } .item { border-bottom: #8b949e 1px solid; /* 底部边框，颜色为灰色，宽度为1像素，实线

    15110

    【Web前端】创建我的第一个 Web 表单

    padding: 10px; /* 内边距，增大可点击区域 */ border: 1px solid #ccc; /* 添加边框 */ border-radius: 3px; /* 圆角边框...*/ border: none; /* 去掉默认边框 */ border-radius: 3px; /* 圆角边框 */ cursor: pointer; /* 鼠标悬停时显示手指光标...标题：​​h1​​ 的颜色被设置为深灰色，以提高可读性。 表单样式：​​form​​ 的最大宽度限制在 400 像素，并居中显示。它有一定的内边距和圆角边框，增加了视觉效果。...标签样式：使用 ​​display: block​​ 使得标签占据整行，从而让输入框看起来更整齐。...输入框和文本区域：所有输入字段（文本框、电子邮件框和文本区）都宽度设置为 100%，并且有统一的内边距、边框和圆角样式。 按钮样式：按钮的背景色为绿色，悬停时会变深色，以增强用户交互体验。

    19110

    【CSS】410- 关于CSS盒子模型、BFC及其应用

    这个 div 从外到内被分成了四层, 分别是: Margin(外边距) - 清除边框外的区域, 外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框....Padding(内边距) - 清除内容周围的区域, 内边距是透明的. Content(内容) - 盒子的内容, 显示文本和图像等....默认值为 content-box, 即W3C标准盒模型; 如果将 box-sizing 设为 border-box 则用的是IE盒模型....在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）(对于从右到左的格式来说，则触碰到右边缘） 形成了BFC的区域不会与float box重叠 计算BFC...会造成上图的原因是因为灰色 div 被蓝色 div 所覆盖, 但文本不会被覆盖, 所以被强行压缩换行. 如果想要避免这种情况, 可以触发灰色 div 的 BFC 特性. ?

    65120

    关于无障碍设计的七件事

    换句话来说，当文本大小是24px或18px加粗或者更大时，在白色文本背景上使用的最浅的灰色是#959595。 ?...上图为#959595的文本在白色背景上 对于较小的文本，在白色背景上，可以使用的最浅的灰色是#767676。如果使用的是灰色背景，那么文本的颜色就要更深。 ?...IE浏览器自带的灰色虚线边框或是Chrome自带的蓝色光晕就不是很讨人喜欢。 ? 但是，问题是大多数网站都没有建立自己的焦点样式。...Twitter使用默认焦点和提示的组合方式来显示焦点，图标也从灰色变成绿色。这是三个独立的视觉效果，可以很好地为键盘用户提供焦点提示。 ? 当你准备使用自己定义的焦点状态时，请记得去除默认的状态。...缺失一：没有边框的表格 下面是传统的文本输入的示例。它是一个具有定义边界的矩形。表单输入区域可以填充颜色（当然不一定要填充）。还有一个可见标签，在这个例子里位于字段的左侧。 ?

    3K30
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券