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

B端产品设计规范

按照设计规范建立他们自己控件库,提高复用率。在设计规范指导下,开发部门在搭建全局共用控件,产品设计规则就会更加清晰明了,如:产品设计中按钮、间距、字体大小、颜色、列表等元素设计明确。...按钮 按钮是交互设计中必备元素,它在用户和系统交互中承担着非常重要作用。 后台中常见按钮类型分为线性按钮、文字按钮、图标按钮等。如下图所示。 表单 常见表单是由多个列表项构成。...而每一个列表项都是由最基本标签和输入框组成,常规表单包括单选、多选、下拉选、输入框、时间选择、开关选择等控件。 左对齐是比较常见对齐设计,比较符合pc端常规显示场景。如下图所示。...表格内内容在左对齐,尽量与左边表格边距保持至少 10px 间距。 表格在后台系统设计中大约占40%左右比重。 表格设计规范设计思考点如下: 操作列按钮:每个按钮字数不超过6个字。...当表格所有栏高小于80px,内容水平居中对齐; 当表格栏高大于 80px(大栏),所有内容都为顶对齐; - 自适应规则:-表格中栏内容组件是利用占比方式实现,可以根据栏目字段长短给予栏目所占百分比

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

编写模块化CSS:命名空间

在今天这篇文章中,我想与大家分享一下为什么只用BEM还是不够,以及如何使用命名空间来弥补一些不足。 为什么BEM不能满足我们 我上周给大家展示例子很简单。...当我为Mastering Responsive Typography建站后,我添加了一个如下所示付款表单: ? 响应式排版付款表单 在上面的设计中,您可以看到该表单包含两行输入元素。...o-countdown中元素实际数量是无关紧要,因为所有内部元素只能在.o-countdown里存在。 对象独立于上下文 当我说对象是上下文独立时候,我意思是他们不知道在哪里会被使用。...在这种情况下,它不会中断对象外部对齐)。 float. 等等… 既然你知道对象需要与上下文无关,你马上知道我们站点范围导航示例中.button不能包含任何边距。...举一个这样例子——输入元素: ? 当然,如果你喜欢的话,你可以将一个class标记给input,但是如果你不能访问 ? 我觉得另一个对象不应该使用.o-前缀例子是字体。

2.6K70

HTML+CSS练习题【详解】

随着标题标签数字增大(h1-h6),字体大小会逐级减小 在使用标签插入图像,说法正确是 () A. 标签只能设置 src 属性 B. 标签只有 src 属性和 title 属性 C....块级元素可以通过display属性修改成其他显示模式 下面哪个标签默认情况下不能在同一行显示( ) A. p B. span C. a D. img 以下选项说法正确是() A....元素显示模式可以通过content属性修改 以下选项描述不正确有哪些() A. 块级元素独自占据一行,可以设置宽高 B. 块级元素独自占据一行,不能设置宽高 C....黄色文字,字体大小50px; ​ C. 黄色文字,字体大小30px; ​ D. 蓝色文字,字体大小50px; 以下描述中,优先级顺序正确是() A....D: align-items属性可以控制多行侧轴对齐方式 父元素设置为 flex布局,子元素宽度和高度会( ) A: 宽度和高度不变 B: 宽度变为100% ,高度由内容撑开 C:

19910

用户不填表?那是因为你没用好这7个设计准则

无线端表单设计需注意原则有如下7个: 原则 1:表单交互设计应与用户输入数据行为强兼容 确保表单所有字段没有被界面中任意元素遮挡,例如键盘唤起。...另一件事是,当用户看到一个文本框里面写,他们可能会认为它已经在预先填写并可能因此忽略它。 为什么要左对齐字段标签对无线端表单设计是不好对齐字段标签主要问题涉及手机显示屏尺寸和宽高比。...不能够看到输入数据造成了用户麻烦,因为它使得更难为他们提交表单,从而导致更多提交形式错误之前发现任何输入错误。这很难,如果输入数据不完全可见现货误差。 ?...放置在标签上移动领域以上主要好处是,你可以有表单字段延长屏幕整个宽度,使它们足够大,以显示整个用户输入(在一个体面的字体大小16像素一样)。...占位符文本默认情况下显示,但一旦一个输入字段被窃听和输入文本占位符文本淡出和顶部对齐标签动画。

1.8K60

Windows 8.1 应用再出发 - 几种常用控件

文本控件 (1) TextBlock     TextBlock是最常用文本显示控件,重点关注以下属性: CharacterSpacing  字符之前统一间距,间距 = 字体大小 / 1000。...OpticalMarginAlignment  枚举值,指定在与文本容器边界对齐如何处理每个字符版式中靠边值。有None(默认值) 和 TrimSideBearings 两种。...Center:与父元素布局中心对齐元素,Left:与父元素布局左侧对齐元素,Right:与父元素布局右侧对齐元素,Stretch:拉伸以填充整个父元素布局槽元素。...当按钮点击,Flyout控件浮出,再点击按钮或空白处,Flyout消失。 <Button Content="Click Me."...,继承自ToggleButton,重点关注以下内容: GroupName  指定哪些 RadioButton 控件互相排斥名称,同一GroupNameRadioButton不能同时被选中。

2.2K40

详解视觉误差对UI设计影响和解决方案

每个人感官可能都不一样,但对于我来说,调整尺寸后两个图形看起来才是一样大,至少也不会像图一一样,让人第一眼就认为正方形比较大。为什么会这样?因为我将圆直径增加了 50px。 ?...这种现象与排列原则最常应用于按钮输入框。 ? 左边浅色背景输入框框体不会与标签文字对齐,框内文本才会与标签对齐。右侧深色边框输入框体就要与标签文字对齐,而框内容无需与标签文字对齐。...再看看发送按钮,左边发送按钮与浅色背景输入框为了达成视觉对齐故意地做短了一点点,右边发送按钮也因为形状缘故被故意地做长了一点,达成视觉对齐。 ?...好吧,希望你能够看出来左边那颗按钮是有问题,实际上我在画这枚按钮时候确实点了对齐,但是为什么还会出问题呢?跟文字按钮对齐一样,对齐方式选错了。...这就不能依赖 Sketch 对齐工具了,你要自己画个圆形作为参考线来进行对齐。 ? 如下图,播放按钮也有三个角,那么做它对齐工作也要注意啦。

1.2K10

CSS通用类和“结构与样式分离”

当我开始专注于创建可复用类名,我注意到一些事情: 组件做事情越多,组件细节越多,越难以服用。 下面是一个直观例子。 话说我们要建立一个表单,包括几个表单部分和一个在底部提交按钮。...{ text-align: right; } 现在我们可以用组合方式使我们表单按钮对齐了: Submit ...在header标签里按钮对齐...有没有一个方法,可以使我们在没有创建.actions-list__item组件情况下,解决我们最初问题? 如果你回想一下,我们创建这个组件原因,只是为了在两个按钮之间增加一些间距。...元素间复杂交互是很难只是用通用类来解决。例如当鼠标悬浮在父元素希望子元素改变属性。所以你要经过思考,选择你认为最简单方法。

3.2K21

CSS calc() 使用指南

CSS calc() 函数一个强大功能是能够组合不同单位。这个函数可以执行预处理器不能执行数学计算。...这将允许我们字体在移动视图中变小,当我增加屏幕大小或在桌面视图中恢复正常。...关于 CSS calc() 函数还有一些需要注意地方: 当应用于媒体查询,它不能工作 当除 0 ,HTML 解析器会生成一个错误 可以嵌套 calc() 函数 让我们深入研究更多例子。 5....对于我们高度,我们从 100% 高度减去顶部和底部 margin 总值(20px),结果是一个完美对齐方框。...它们包括: 当我们处理 CSS 变量 为了得到一个新值 用于不同单元之间计算,这是预处理器无法做到 定位 调整我们网站结构和其他元素 当我们想避免重复做相同计算 我们在本文中介绍大多数示例都属于上述类别

1.5K40

tableau入门简介和常用操作

1)田字格按钮作用:分别对单元格、区、标题,进行线条颜色、线条粗细设置 2)填充格按钮作用:为整张表标题、区、单元格设置填充色 3)A按钮作用:专门针对表中文本进行字体颜色、字体大小...、字体格式、是否斜体等操作 4)对齐按钮作用:专门设置表中文本,是左对齐,还是右对齐,还是居中对齐这些操作 4、tableau保存操作文本两种格式说明 1)“.twbx”格式和“.twbx”格式...3)A按钮作用:专门针对表中文本进行字体颜色、字体大小、字体格式、是否斜体等操作。 注意:工作表是对表中所有文本进行一次性设置。...当我们单独对去、标题等设置了操作,则会覆盖掉之前对于工作表操作。 4)对齐按钮作用:专门设置表中文本,是左对齐,还是右对齐,还是居中对齐这些操作。...2)将tableau导出为任意版本tableau文件   由于不同版本之间tableau文件,不能直接打开使用,因此需要我们在导出文件时候,可以保存成不同版本。

3.2K20

提高PPT制作效率9个小技巧,据说贾跃亭都没这技能~

03、增加撤销步数 为什么增加撤销步数呢,因为PPT默认撤销步数只有20步,而20步肯定是不够,所以我们可以增加撤销步数,最多能设置150次。...这样,当我们发现PPT制作不对时,可以通过ctrl+z进行撤销。 ? ?...当我们双击,就可以刷无数次。 ? ? ? 07、对齐多个对象 在office2013,选中多个对象,会自动跳出对齐按钮。 如果不是office2013版本,可以在在排列》对齐中找到对齐按钮。 ?...09、选择窗格 我们都知道PS具有图层,但是你知道PPT图层吗? 我们可以通过“选择窗格”,调出PPT图层。PPT中每一个对象元素对应一个图层。...通过“选择窗格”,我们就可以轻松选中一些被其它元素遮住对象。 可直接使用快捷键:Alt+7调出选择窗格快捷键。 ? ? ?

1.2K60

IT课程 CSS基础 022_文本、字体、链接

示例: body { writing-mode: vertical-rl; } 效果: 当我们切换书写模式,我们也在改变块和内联文本方向。...left:文本左对齐,这是大多数语言中默认值。 center:文本水平居中 right:文本右对齐 justify:文本两端对齐,通过在每行之间增加额外空白来填充。...用于设置文本字体大小。字体大小可以使用绝对值或相对值来指定。 使用绝对值字体大小大小是固定,不会随着屏幕分辨率变化而变化。...使用相对值字体大小大小是相对于父元素字体大小。相对值单位包括: em、rem、vw、vh 等。 使用关键字指定字体大小,可以提高可读性和一致性。...字体单位选择: 使用相对单位(em、rem、%)可以更好地适应用户浏览器中设置字体大小偏好,增加网站可访问性。 行高设置: 根据字体大小适当设置行高,以提高文本可读性。

9510

一些关于界面设计技巧

为了达到划分版块又不转移用户注意力目的,在排版可以将界面上不同区域元素通过空白进行分组,用上不同背景色,将文字对齐方式进行统一,还有就是为不同区域设置不同样式。...31 具有层次图形化展示优于直白文字描述 具有层次设计可以将界面上重要部分与不次要部分区分开来。要让界面层次分明,可以在这些方面做文章:对齐方式,间距,颜色,缩进,字体大小元素尺寸等。...38 让点击更轻松 像链接,表单输入框还有按钮等,如果尺寸做得大一点则点击起来更方便容易些。根据费特定律,使用像鼠标这样外设来点击需要一些时间,特别是元素比较小情况下,时间会更多。...鉴于此,最好还是把你表单输入框,按钮等做大点。抑或者你可以保持原有的设计不变,只是把元素可点击区域(也就是热区)增大。...当事情有些不同,但不是真的,它造成混乱, 这就是为什么最好是有目的地分组事物(或将它们分开更远),使用更多样化字体大小(或使它们完全相同),并使用更多样化色调(或使它们完全相同)。 ?

1K30

rem与em详解

事实上,根据W3标准 ,它们是相对于使用em单位元素字体大小。 父元素字体大小可以影响 em 值,但这种情况发生,纯粹是因为继承。 让我们看看为什么以及如何起作用。...现在,我们padding为 21px,即 1.5 x 14 = 21 已经变小了。 它不受父元素字体大小。 由于存在着这些隐患,你可以看到为什么必须知道如何正确管理使用 em 单位。...通常不使用 em 单位控制字体大小 我们经常会看到使用em作为字体大小单位,特别是标题,当我认为如果使用rem将更具可扩展性。...我们可以想到例子是一个使用 em 字体大小下拉菜单,我们有第二个级别的菜单项文本大小取决于第一级字体大小。 另一个例子可能是用在按钮里面的字体图标,字体图标的大小跟按钮文本大小有关。...当元素应该是严格不可缩放时候 在一个典型 web 设计过程中,不会有很多部分不能使用伸缩性设计布局。 不过偶尔你会遇到真的需要使用显式固定值,以防止缩放元素

4.3K30

C#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码

虽然官方推荐用共享类库创建新类库..然而我这个Demo还是使用可移植.. 嗯..解释一下 为什么暂时没用共享类库.....有些小BUG 可能是为了迎合其他类型项目..所以在共享类库里创建Page并不能很好结合 - - 类似如下: ?   正常应该是这样 ?...BorderRadius 设置边框圆角 BorderWidth 边框宽度 Command 命令,获取或设置激活该按钮要调用命令。这是一个可绑定属性。...FontAttributes 获取一个值,该值指示按钮文本字体是粗体还是斜体. FontFamily 获取按钮文本字体所属字体. FontSize 获取或设置按钮文本字体大小。...FontSize 字体大小 Text 文本内容 TextColor 文本颜色 HorizontalTextAlignment 获取或设置Text水平对齐方式。

1.8K90

设计细节提升开发效率与质量

开发:这里已经完全对齐了, 视觉:看起来还没完全对齐,我图也没有切错吧? 开发:字体大小和间距都是按照视觉稿来, 视觉:这里间距偏差这么大,为什么不按照视觉稿?...当我们处理无序列表,四个短句文本,长短不一,同样我们需要限制一行文本宽度,定义一行能承载最多字数,以及跟产品确认可能出现最多字数情况,确认模块设计可行性,保证后续运营人员在替换文案时候不会出错...UI 设计中通常以“向右箭头”来表示当前链接可跳转,使用箭头作图当我们把箭头和文字右对齐,箭头其实会更加往外突出,这时候我们会人为往里边推 1 至 2 像素,最后实际给到开发也应该是红框尺寸...“按钮”也是 UI 设计中常用组件,当我们在按钮里使用图标加文字,由于文字体量更大,整体重心会往右偏,所以我们通常会认为让图标和文字整体往左偏移,使整体视觉更加平衡,实际给到开发,也是两个不同等边距...我们把 4 点栅格设计逻辑套用到卡片设计上,第一眼我们可能比较难去评判两者好坏,但仔细看,我们就会发现第一个卡片按钮没有水平对齐,相互之间间距尺寸也是没什么逻辑性,假如今天调整一个 8px 间距

95451

简单了解下无障碍设计模式

添加到原生元素额外声音(屏幕阅读器能够正确翻译原生元素) 标记用户界面元素输入控件和其他元素添加描述,供屏幕阅读器等设备可以进行朗读 动效 Material design 使用动效来引导视图之间焦点...字体 为了提高可读性,用户可能会增加字体大小。移动设备或浏览器有调整系统字体大小功能。要在 Android 中使用系统字体大小,使用可缩放像素(sp)来标记文本极其关联容器。...错误示例 当把重要操作嵌入到其他内容中,就不清楚什么是页面中最重要元素。 焦点顺序 输入焦点应该按照视觉布局顺序排列,从屏幕顶部到底部。它应该从最重要项目到最不重要项目进行遍历。...这意味着按钮应该设置成按钮、复选框应该设置成复选框,以便将控件类型和状态正确传达给用户。如果一个元素是从一个原生 UI 元素上扩展或继承,他会获得父元素角色。...正确示例 此命令 “语音搜索” 描述和用户输入法(语音)相匹配任务(搜索)。

4.7K40
领券