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

【软件开发规范七】《Android UI设计规范》

实际上，Google 官方的应用也有不遵照规范的地方，不能太拘泥于条条框框。...物理世界中的运动和变化都是有加速和减速过程的，忽然开始、忽然停止的匀速动画显得机械而不真实。考虑动画的easing，要先考虑它在现实世界中的运动规律。...然后可以考虑使用插画。 ** 图片上的文字 ** ​编辑 图片上的文字，需要淡淡的遮罩确保其可读性。深色的遮罩透明度在20%-40%之间，浅色的遮罩透明度在40%-60%之间。 ​...，防止它挡住列表项 悬浮按钮的位置不能随意摆放，可以贴着左右两边的对齐基线 ​编辑 悬浮按钮有两种尺寸：56x56dp/40x40dp ** 卡片（Cards） ** ​编辑 卡片是包含一组特定数据集的纸片...在以下情况考虑使用卡片： 同时展现多种不同内容 卡片内容之间不需要进行比较 包含了长度不确定的内容，比如评论 包含丰富的内容与操作项，比如赞、滚动条、评论 本该是列表，但文字超过3行 本该是网格，但需要展现更多文字

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

Flutter中构建布局 顶

它的第一个孩子，列，包含2行文字。 第一列占用大量空间，所以它必须包装在扩展小部件中。 ? ? 第二行称为按钮部分，也有3个子项：每个子项都是一个包含图标和文本的列。 ?...第3步：实现按钮行 按钮部分包含3列，它们使用相同的布局 - 一行文本上的图标。...将文本放入容器中，以便沿每条边添加32像素的填充。 softwrap属性指示文本是否应在软换行符（如句点或逗号）上断开。...如果您愿意，可以构建仅使用小部件库中的标准小部件的应用程序。 如何在Flutter中布置单个小部件？ 本节介绍如何创建一个简单的小部件并将其显示在屏幕上。...以下示例显示如何在行或列内嵌套行或列。 此布局按行组织。 该行包含两个孩子：左侧的一列和右侧的图片： ? 左列的小部件树嵌套行和列。 ? 您将在嵌套行和列中实现一些Pavlova的布局代码。

43K10

iOS 9人机界面指南(四)：UI元素（下）- 腾讯ISUX

API注释 想要了解如何在代码中定义信息按钮，可以参考UIButton. iOS包含了两种信息按钮样式：适用于浅色内容上的深色按钮，以及适用于深色内容上的浅色按钮。...举个例子，你可以在文本框的左侧或者右侧加入自定义图形，或者加入系统按钮，如书签按钮等。一般来说，文本框的左侧用于表述文本框的含义，而右侧用于展示附加的功能，如书签。...如果句子太长，用户会需要滚动才能看完，这样的体验很糟。使用句子式大写，并在句末加上适当的标点符号。 ? 避免在文本中详细描述“该按哪个按钮”而导致文本过长。...理想情况下，表意明确的警告文案和逻辑清晰的按钮文案已经足以让用户正确判断自己该按哪个按钮了。...操作列表让用户有机会停下来充分考虑当前操作可能导致的危险结果，并为他们提供了一些其它的选项，尤其是在以下这些情景下： ? 使用红色文字来表示可能存在破坏性的操作。

13.2K30

形式与功能 – 卡片式设计思考 - 腾讯ISUX

上面所说的形式功能的组织与呈现其实讲的是设计排版上的问题，当然对设计师排版功力也有相当的要求。...比如扑克牌我们可以看出虽然只有一个图案，一组文字，但很清晰传达出这张牌所代表的含义；又比如机场和地铁的指示牌，采用了图标、字体元素，很清晰直观地引导乘客方向，这种由文字或图案组成的方块样式叫做“卡片式设计...卡片式设计的优点 1.增强点击感 这是诺基亚手机的win phone系统（下图），系统桌面的所有内容都是一个个小方块展示，类似一个块状类的按钮，让人联想到是可以点击的操作入口， ?...2.排版整齐 如下图，将信息、图像归类整合到一个方块里，清晰直观又避免页面因为信息多而散乱，卡片的排列方式是按列或者行的方式进行对齐展示，视线沿着横向或者纵向浏览能快速找到想要的信息，此外，这种固定大小的卡片方块也有利于栅格化排版...如官网和控制台改版中，为了能让信息更好的整合、更好地发挥不同信息的作用、发挥不同信息的功能，这次DNSPod官网改版中，banner、快捷入口，业务信息以及售卖模块，也运用了卡片式设计的方法。 ?

97720

UI设计师急需掌握的平面设计基础

电话按钮同酒店信息组对齐，使得图片区域的文字和操作信息更为整体。 b. 居中对齐or左对齐 信息分组后，居中排列每组信息的小标题，模块感增强，使得阅读标题和每个组信息中产生视线的跳跃。...在考虑多种纯文字、单图、多图文模版拼接后，尽量减少间距规则和字号种类，达到拼接模版的统一规则。保证一致性为前提，也提供灵活拼接的多样性。...大图＋1的情况下，定义1条小图的上下间距相等等于一个单位，而不是单个模块中小图距离上方的1/2单位，在＋n小图的时候使得两个小图之间的间距相加后等于一个单位（见下图）。...在 V 的频道界面中，点击头像即关注，按下后头像成为星形遮罩，表示已关注，点击操作反馈超乎预期又在情理之中。 2....逛商场，导视系统是否能起到不迷失目的地的作用；地铁广告，重点信息是否能瞬间吸引过客的注意力； POS机打出的各种小票，怎么在方寸之地合理安排信息；阅读电子书，字号行距是否适合长时间阅读。

81230

Mirages主题帮助文档

卡片式友链样式 卡片式友链样式需要Mirages专用插件的支持，若要使用此项功能，请启用插件。 卡片式友链样式可以在任何页面中启用，仅需按照下面的书写格式书写即可。...友链页 友链页的卡片样式可以在任何页面中启用，仅需按照下面的书写格式书写即可。 如果你的友链页 URL 为 /links.html 那么，必须要添加一个背景图才会显示标题，样式将和我博客上的一样。...导航栏操作按钮 说明 Mirages 主题在1.6.0版本中添加了侧边栏 Toolbar，你可以在此放置你喜欢的图标，如 RSS、社交账户链接、夜间模式切换等。...需要注意的是，过多的菜单栏会导致在较小宽度的浏览器下菜单一行显示不下而折行的问题，因此该值不建议修改。...衬线体更适合阅读，但适合的文章类型有限，并不适合带有代码的文章，适合的类型为大篇幅的文字，附带少量配图的文章，如小说、叙事、甚至作文等。

9.9K20

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

开发：这里已经完全对齐了， 视觉：看起来还没完全对齐，我的图也没有切错吧？ 开发：字体大小和间距都是按照视觉稿来的， 视觉：这里间距偏差这么大，为什么不按照视觉稿？...我们总避免不了与字体打交道，字体也经常是我们在设计中容易忽视的部分，而经常出错的原因往往是因为我们对文字的理解不够清晰，相比西文字体，中文字体结构复杂，字库庞大，网页的渲染效果会比西文字体艰难很多。...以客户案例的卡片样式，客户案例在 to B 产品中是必不可少的模块，我们的客户 logo 有的圆形，有的长方形，有的纯文字，尺寸差距比较悬殊，这种情况下我们需要给他限制一个高度，在这个高度以内，再根据...我们以下图 4 组数列为例，大家可能都曾使用过上面三组蓝色数列中的数值应用到设计中，或以 5 为倍数，或以 10 为倍数、或以偶数为设计逻辑，而实际上以 5 为倍数则会包含奇数，奇数会导致控件文字对不齐...我们把 4 点栅格的设计逻辑套用到卡片设计上，第一眼我们可能比较难去评判两者的好坏，但仔细看，我们就会发现第一个卡片的按钮没有水平对齐，相互之间的间距尺寸也是没什么逻辑性，假如今天调整一个 8px 的间距

94451

B端产品设计规范

开篇说： 上一篇，我写过一篇综合类的设计规范和适配。 这一次我想重点写一下：网页PC端产品设计规范和组的设计拆解，对项目的设计效率提升，有一定价值和意义。...在设计规范的指导下，开发部门在搭建全局共用控件时，产品设计规则就会更加清晰明了，如：产品设计中的按钮、间距、字体大小、颜色、列表等元素的设计明确。...以居中或居左对齐为准，同一内容区域内的图片要做到大小统一，对齐方式统一。 页面布局的框架设计： 我们在设计过程中，需要考虑我们基于什么样的尺寸进行基础设计。...按钮 按钮是交互设计中必备的元素，它在用户和系统的交互中承担着非常重要的作用。 后台中常见的按钮类型分为线性按钮、文字按钮、图标按钮等。如下图所示。 表单 常见表单是由多个列表项构成的。...表格内的内容在左对齐时，尽量与左边表格边距保持至少 10px 的间距。 表格在后台系统设计中大约占40%左右的比重。 表格的设计规范的设计思考点如下： 操作列按钮：每个按钮字数不超过6个字。

4.1K44

BootStrap基础知识

使用行来创建水平的列组。 内容需要放置在列中，并且只有列可以是行的直接子节点。 预定义的类如 .row 和 .col-* 可用于快速制作栅格布局。 列通过填充创建列内容之间的间隙。...左对齐 / .text-center 居中 / .text-right 右对齐 / .text-justify 设定文本对齐，段落中超出荧幕部分文字自动换行。...我们可以使用 CSS 的 height 属性来修改他 可以在进度条内添加文本，如进度的百分比 默认情况下进度条为蓝色，可以使用：bg-success、bg-info、bg-warning、bg-danger...卡片群组由堆叠开始，并透过 display: flex; 从 sm 的断点后开始以统一的尺寸相连接。 当在卡片群组使用页尾，它们的内容将会自动对齐。...使用 flexbox 通用类别、float 通用类别，或是 文字排版 在任何情况下都可以将读取图示精确地放置在您需要的位置上。

22110

Material Design — 按钮（ Buttons）

推荐的按钮放置 标准提示框 屏幕上的按钮对齐方式：右边 将肯定性按钮放在右侧，否定性的放在左边。 表单 屏幕上的按钮对齐：左边 将肯定性按钮放在左侧，否定性的放在右边。...卡片 按钮最好放在卡的左侧以增加其可见度。 但是，由于卡片具有灵活的布局，因此可以将按钮放置在适合内容和上下文的位置，同时保持产品内的一致性。...可以在以下位置使用扁平按钮： ·在 toolbars上 ·在提示框中，将按钮操作与对话框内容统一起来 ·Inline, with padding，因此用户可以轻松找到它们 ?...例如，可用状态可以显示为文字，颜色或icon的列表。 当用户与按钮交互时，Menus会覆盖按钮并显示可能的状态。 按下某个状态会取消Menus并更新按钮以显示此新状态。...切换按钮需要： ·组中至少有三个切换按钮 ·用文字，图标或两者标记按钮 建议使用以下组合： ·可以都不选 ·只能选一个 ·可以选多个 ?

3.8K160

【Java AWT 图形界面编程】LayoutManager 布局管理器总结 ( FlowLayout 布局 | BorderLayout 布局 | BoxLayout 布局 )

程序在不同平台的适配问题 , 如 : 在 Windows 中设置 100 px 的效果 , 与 在 Linux 中设置 200 px 的效果正好合适 ; 如果手动设置了组件的 宽高 , 位置 等精确的像素值...中 , 组件 按照某个方向进行排列 , 如 : 从左到右 从右到左 从中间到两边 如果 遇到障碍 或者 走到界面边界 , 就 返回到开始位置 , 在下一行从头继续按照原方向进行排列 ; 如 : 下面的布局就是从左向右的流式布局...从左到右 , 从上到下 ; 放置在 GridLayout 网格中的组件 , 组件的大小由网格的区域大小决定 , 默认情况下 组件会填充满所在的单个网格区域 ; 十一、GridLayout 构造函数 -...---- CardLayout 卡片布局 中 , Container 容器中 每个组件都相当于一张卡片 , 这些卡片平时都折叠起来 , 只有 最上面的卡片中的组件才是可见的 , 其它组件都不可见 ;...last(Container parent) void previous(Container parent) : 显示 目标容器 中的 前一张卡片 ; /** * 翻转到指定容器的上一张卡片

4.1K20

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

而当你在导航栏中使用了分段控件，就不要再放标题以及其它多余控件了。 确保文字按钮之间拥有足够的空间。如果导航栏左边或右边的文字按钮之间的间距太小，那些文字看起来会像挤在一起一样，让用户难以区分。...如果需要在工具栏上展示3个以上的项目，可以使用图标。由于文本按钮通常会比图标更占空间，所以用图标可以避免文字标题们挤在一起。 保证工具栏文字按钮之间有足够的间距。...重要 跟所有的标准按钮与图表相同，根据文档说明的图表含义而不是仅凭图表外观来使用这些图标是很关键的。这样能够保证在关联特定含义的按钮改变了外观的情况下，你的应用中的UI仍然是可用而有意义的。...副标题型包括左侧图标（可选），图标右边左对齐展示的文字标题，以及在标题下方同样左对齐展示的副标题。 ?...Value 2 (UITableViewCellStyleValue2).Value 2样式蓝色字体标题右对齐，黑色字体的副标题左对齐，混排在同一行中。这种样式通常不包含图片。

10.1K51

Material Design —卡片（Cards）

按钮或评论 ·在网格列表中，但需要显示更多内容来补充图像 ?...背景图像 当文字放置在纯色背景上时，文字清晰度最高，且文字对比度足够高。 放置在图像背景上的文本应该保留文本的易读性。 ? 左：不同布局的卡片    右：排版方式能突出重点内容 ?...卡片不会翻转以显示背面的信息。 支持的手势 卡片手势应始终在卡片集合中实施。 支持的手势包括： 滑动手势（swipe gesture）可以在每张卡片上使用。限制视图内的轻扫手势，使其不会彼此重叠。...但要考虑筛选或排序是否会更好地组织内容。 卡片集合的筛选和分类 卡片收藏可按照日期，文件大小，字母顺序或其他参数进行排序或筛选。 集合中的第一个项目位于左上角 顺序从左到右，从上到下进行 ?...UI控件 与主内容内联放置的UI控件（如滑块）可以修改主内容的视图。 例如，可以选择日期的滑块，评分内容的星星，或选择日期范围的分段按钮。 ? ? ? 溢出菜单（可选） 溢出菜单通常放置在卡的右上角。

4.3K100

设计驱动｜QQ运动体验升级

我们采用模块化卡片的形式，将功能按优先级规划布局。以一套模块化卡片结构，承载“计步、跑步和健走”三种运动工具内容，这样使信息有规律地整合并展示，降低用户的理解成本，同时保证设计侧的规范统一。...此外，卡片式结构在用户行为引导上也有天然的优势，用户更容易下意识滑动卡片探索功能，增加置后的运动工具的曝光机会。 视觉设计方面，设计师把品牌色和辅助图形沿用到UI界面中。...为了增加运动的速度力量感，数字上采用粗壮倾斜的DIN英文字体，进度条使用热量彩虹渐变色，整体强化运动专业性。...跑步中的用户很少立刻停下来操作APP，用户在手机摇晃且可能比较累的状态下误触概率可能增加。考虑到这一点，我们增强了触碰后的反馈动效，以便让运动中劳累的用户更清晰的关注到自己有没有误触界面。...以防用户因手出汗等等原因误触按钮而导致提前结束记步。 考虑到用户跑步以室外场景居多，在此次界面设计中，通过对色彩的重新规划突出界面元素的视觉对比，同时强化QQ运动的品牌色。

42720

Android 手表应用开发设计规范 【译】

在某些情况下，用户可能需要对卡片上显示的信息作出某种操作，这时候可以提供一个动作按钮。按钮显示的顺序是详情页面片卡的右边。...用户点击该按钮后，会在手机上打开相应的应用页面，同时会在手表上显示的一个已经在手机上打开的完成动画。 卡片操作按钮 (如媒体控制按钮) ? 某些情况下，在卡片上直接放置动作按钮会比较适合....这种情况下就不适合用卡片操作按钮的形式。 　•卡片操作按钮应该是不需要文字说明也能明确命令含义的操作。 　...卡片的设计应该方便用户快速扫视，类似在传统手表上看时间的体验。多数情况下，一组图标和数值，或者一个标题和简短说明文字即可传达有效信息。...提示卡（peek card）是卡片信息流中的首张卡片，它会部分显示在主屏幕的底部。提示卡片的高度根据通知文字的数量而变化。高度较小的提示卡片会显示出更多的表盘设计区域。

3.9K70

App之可点击元素的设计

仅仅使用文字作为可点击元素存在，而不使用图标作为可点击元素，这样使得这款阅读古诗词的app别有一番风味，其产品的气质体现得很到位。 其实，app的所有构成内容都可以是可点击元素。...把图片作为点击元素，多见于图片类app、阅读类中，比如一生必读的60部名著这类的app： ? 点击的概念比按钮更广泛，文字、图片、图标、按钮、输入框等等，都是可点击的。 那么，点击背后会出现什么？...三、卡片式，点击卡片任意位置打开详页，可以使app逻辑简单明了。 同时，卡片UI可以做得比较丰富，图片、标题、简介、按钮等元素都尽情表达。如 微信的消息列表： ? QQ的消息列表 ?...印象笔记的每一条笔记： ? 还有一类稍复杂点的卡片，卡片上栏跟下栏分别进入不同的详页，如： 知乎，点击上面一栏是进入问题，下面是回答的详页。 ? 同样的，大众点评也是： ?...，我尝试了下搜索“分享”，得到下图的结果，做设计的时候可以多参考下惯用的表达形式。

2.7K70

拨动情绪的内容设计

在影集的引导步骤中，寻找合宜的契机，把零散的照片按特定线索重新组织，经过精心包装以回忆墙的方式重新呈现给用户。...转场效果设计要以情绪传达为目的，过渡动画和快慢节奏的灵活搭配打造大片质感，叠加细节特效让画面生动不僵硬。 在配乐标准上，我们基于用户习惯推导，明晰场景+节奏的音乐选择维度。...4.3 捕捉时机，宣传专属回忆 在信息架构层的设计使用卡片横滑的方式，一方面可以暗喻时光隧道，另一方面考虑到大卡片比其他尺寸的缩略图在陈列和交互行为上更利于突出视频的优势。...，而链结后的情感峰值，则选择在最低发表成本最高发表频率的文字视频中深挖，让体验情感的峰值在高频率的场景中发生获取最高的投入回馈。...5.1 过程颇折 文字视频上线后发现用户发表意愿未达预期，症结在于其过程缺少能激发用户主观意愿表达的情绪触发点。我们提出两个优化思路， 1 降低理解成本，体验对齐于常见动态发表界面。

49820

java swing图形化界面_javagui界面设计

Swing简介 Swing 是 Java 为图形界面应用开发提供的一组工具包，是 Java 基础类的一部分。 Swing 包含了构建图形界面（GUI）的各种组件，如: 窗口、标签、按钮、文本框等。...3 GridBagLayout 网格袋布局，按网格划分Container，每个组件可占用一个或多个网格，可将组件垂直、水平或沿它们的基线对齐。...6 CardLayout 卡片布局，将Container中的每个组件看作一张卡片，一次只能显示一张卡片，默认显示第一张卡片。...显示窗口，前面创建的信息都在内存中，通过 jf.setVisible(true) 把内存中的窗口显示在屏幕上。...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

1.6K50
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

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

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

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

    领券