首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

【Web技术】522- 设计体系的响应式设计

前言 正文从这开始~~ 导读 蚂蚁内部有着数量繁多且复杂的后台业务系统,Ant Design 一直以来致力于从设计策略和资产的角度解决这些产品的体验一致性问题,随着蚂蚁产品生态的多端化进程,越来越多的跨设备和不同屏幕尺寸导致的问题也逐渐暴露...Design 基于如何在小屏幕解决信息展示问题这样的出发点也很多组件中提供了响应式设计,但拥有更加完备的环境适应性应该是一个设计体系长期的目标之一,因此全局性地考虑跨端、跨多屏幕尺寸、信息密度等响应式设计方面还值得我们继续深入研究...Reposition Reflow - 重新排列 改变 UI 元素的排列方式,这在内容弹性布局里较常见,通常是基于某种排列规则自动向下折行,并结合调整大小与栅格系统应用在响应式布局方面,例如 Carbon...组件应用 除了通用的响应式规则以外,设计体系具体组件的响应式方案还有许多值得挖掘,能为我们的组件设计提供参考价值,本篇不再一一展开,仅提两个典型的应用情况: 框架 ?...Carbon 的框架设计 框架算是一个特殊的组件不同的设备界面框架的适用有非常大的差异,几乎提到响应式的所有设计体系都给出了框架响应式方案,例如 Alta 将界面框架分为四块,以 Off-Canvas

1.8K20

手机框架_移动端框架_跨平台_汇总_哪个好

vue-carbon 基于 vuejs 1.0 开发 material design 风格的移动端 WEB UI 库 使用文档地址 https://myronliu347.github.io/vue-carbon.../book/v0.5.0/index.html Muse-UI 基于 Vue 2.0 和 Material Desigin 的 UI 组件库 特性 1.组件丰富 Muse UI 基本实现了 Material...Design 设计规范类的所有组件,另外还开发许多的功能性的组件 2.可定制 Muse UI 使用less文件,所有的颜色都有一个变量维护,通过编写 less 文件完成自定义主题,另外组件内部也提供一些修改效果的参数...UI组件库,主要服务于微信页面。...Flutter可以与现有的代码一起工作全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

1.8K10

人工智能在系统领域面临的挑战-伯克利视角

Personalized AI 个性化AI 挑战在于:设计出提供个性化应用和服务的同时,损害用户隐私和安全的AI系统。 3....比如面向AI工作负载的定制化芯片,边缘云计算系统(终端处理数据和计算),新的收集、处理数据的技术等。 研究机会 ?...,并将组件映射到可用资源上,以最低的成本满足延迟和吞吐量要求 研究方向: Design AI systems and APIs that allow the composition of models...Cloud-edge systems 边缘云计算系统 研究方向:Design cloud-edge AI systems that 1.leverage the edge to reduce latency...动态环境的行为 Continual learning 持续学习研究 研究方向: 1.Build systems for RL that fully exploit parallelism, while

40820

掌握设计模式之适配器模式

近期参加的《Head First Design Patterns》技术读书营,本着学习设计模式,提高编码设计能力为目的,我看到适配器模式之后,明白它就是解除我疑惑的那个答案,紧接深入学习研究,于是就有了这篇文章...大概意思就是将一个已存在类的接口转换为另一个接口去使用,使得不需要修改原有代码的情况下使得原本接口兼容的类,能与其他类正常工作。...carbon 那么想要将 HDMI 与 VGA 连接起来的 Adapter 类 VGA2HDMIAdapter 又是什么样的呢,请看下方代码: ? carbon 最后看下客户端类的使用: ?...常见的适配器用法 适配器模式也算是十分常用的设计模式,我们可以很多框架的源码里见到, JDK 适配器也有很多的应用,这里我们就进行简单介绍: JDK-InputStreamReader ?...carbon 上面代码:System.in 实际是类型为 InputStream,而由于 BufferedReader 与 InputStream 不能一起工作,于是引入 BufferedReader

57220

如何选择一个 vue ui 框架?

选择 UI 框架之前或之后,推荐阅读一下谷歌的设计指南。框架未立,思想先明。 1,比较流行的 UI 框架有哪些?...design vue 组件库 vue-material 同 Material 风格的组件库 Keen-UI 又一个 Material 风格的组件库 Vue Admin 基于Vue 2.0 和 Bulma...vue-carbon 基于 vuejs 1.0 开发 material design 风格的移动端 WEB UI 库 VUM vue-mobile是用于SPA的Vue.js的UI框架 1.3 其它 Quasar...Vuetify 是 Vue.js 的一个UI组件库,自2016年以来一直积极开发。提供使用谷歌 Material Design 设计指南构建现代网站所需的一切 UI 能力。...Material Design 就是它的思想。统一的思想,利于开发出风格一致的项目外观,同时也利于岗位之间的沟通。 2.1 Vuetify给出的 vue ui 框架对比图 第一条:组件数量。

5.1K30

Mifa Design:一个服务于 Markdown 的设计体系

嗯,UI 框架,这已经不是一个很好的时代了。可对于 Design Systems 来说,这还是个不错的开始。...Design System 要解决的是一定规模公司UI 设计问题,Mifa Design 则是为了提供一致化的阅读体验。 ?...分子:可复用组件 分子,即由原子聚合而成的粒子。 UI 设计,分子是由几个基本的 HTML 标签组成的简单组织。例如,一个搜索元素,它是由标签原子、输入原子和搜索原子组成: ?...Code Highlight 他们是一系列的可复用组件,可以组成更强大的有机体 有机体(组织):组件 有机体是由分子或原子或其它有机体组成的相对复杂的 UI 组分 。...Template 诸如基于 Mifa 的 GitHub Pages Jekyll 主题也是模板,只需要: 项目中创建 _config.yml 文化,文件写入: remote_theme: phodal

1.1K60

Master Plan for becoming a Software Architect : Roadmap of a Software Architect

软件架构师成长之路: Master Plan for becoming a Software Architect Roadmap of a Software Architect 软件架构师软件开发团队扮演着高级的角色...这个职位大多出现在非常复杂的大型软件产品,有时甚至直接汇报给CTO。 领域架构师(Domain Architect)—— 这是比较流行的软件架构师类型,很多公司都可以看到。...日常生活,没有架构师会从头开始编写“合并排序”算法,或者发明新的数据结构。...S.O.L.I.D.原则 —— 这一组件原则是软件组件设计需要考虑的基本技术。有经验的软件架构师如果掌握了这些原则,可以很快识别出代码的违规行为。...文档 —— 这是软件架构师日常工作的重要环节。绘制不同的UML图,ARC42文档是这个职位不可避免的工作。这方面有很多工具,如: 9.

75740

抖音前端团队的设计稿转代码 — Semi D2C 实践方案

对于研发同学,当前研发侧纯前端工作,主要包含两部分工作UI 还原 & 交互逻辑开发。UI 还原通常是一个难度小但是特别耗费精力的工作。...对于研发同学,需要对 Semi 组件有一定了解,才能快速从设计稿识别哪些区块使用了 Semi 组件/物料等,开发过程还需要反复查阅组件文档对应的 API,用于还原组件 UI工作效率有较大提升空间。...由于原人工方式做的 UI Kit 组件级的 Design Token 原图层无相关表达声明,只有通过 C2D 方式重新生成 UI Kit,才可实现组件级的 Token 的刷入支持。...C2D Figma 组件绘制, Code to Design 的核心工作 Web 环境渲染组件,获取真实的 DOM 节点信息,通过 Figma 插件 API Figma 环境重新绘制成对应图层...---- D2C 流程 D2C Semi 组件识别,该能力主要借助了 Code to Design 过程 Figma 组件变体中进行预先埋点, 因为 Figma 的 UI 资产完全通过代码自动生产

68130

设计稿转代码 — Semi D2C 实践方案

对于研发同学,当前研发侧纯前端工作,主要包含两部分工作UI 还原 & 交互逻辑开发。UI 还原通常是一个难度小但是特别耗费精力的工作。...对于研发同学,需要对 Semi 组件有一定了解,才能快速从设计稿识别哪些区块使用了 Semi 组件/物料等,开发过程还需要反复查阅组件文档对应的 API,用于还原组件 UI工作效率有较大提升空间。...由于原人工方式做的 UI Kit 组件级的 Design Token 原图层无相关表达声明,只有通过 C2D 方式重新生成 UI Kit,才可实现组件级的 Token 的刷入支持。...C2D Figma 组件绘制, Code to Design 的核心工作 Web 环境渲染组件,获取真实的 DOM 节点信息,通过 Figma 插件 API Figma 环境重新绘制成对应图层...---- D2C 流程 D2C Semi 组件识别,该能力主要借助了 Code to Design 过程 Figma 组件变体中进行预先埋点, 因为 Figma 的 UI 资产完全通过代码自动生产

63930

软件工程师必备的五种生产力增强方式与实践

本文中,我们将和您讨论五种有助于软件工程师和技术公司提高工作效率的实用方式,其中包括:设计系统(Design systems)、代码查询器(code linters),代码格式工具(code formatters...为了使软件产品的用户界面(UI)能够随着业务与功能不断扩展,设计系统能够给用户带来如下好处: 设计系统可帮助您创建一致性的UI,以便您在整个应用程序中都使用统一的构件块组件。...您可以使用一组共享的组件,来轻松地整个应用中一次性进行模式的更改。...用户体验设计师无需花费时间,去逐个决定每个新功能的下拉菜单和模式该如何工作,而是只需整体上,集中确保其合理性和用户友好度即可。...目前,市场上有许多设计系统类工具可供选用,其中包括:Google的Material-UI、Adobe的Spectrum、以及Ant Design等。

1K20

如意设计助手× TDesign:产品设计的绝佳搭档

比如设计师调整某个 Design Token 的值,并不能及时通知到下游 UI 组件库的调整。 设计师与开发工程师设计系统工作是脱节的。...Code-to-Design 流程 如意设计助手支持接入业务 React 组件库,目前预置腾讯公司级前端UI组件库 TDesign 和腾讯云的 TeaUI 组件库。...相应的,Code」面板的生成 CSS 代码,会使用对应 CSS 变量值,而非硬编码值。...设计师与开发基于不同的「事实来源」工作 我们采用「code-to-design」的方法,通过插件用代码组件做设计,免除制作设计组件库,统一设计、开发的组件来源。...插件渲染组件的同时将相关的状态数据写入图层,并在审查组件代码时基于组件图层保存的状态数据生成AST(抽象语法树),并最终 Code 面板上输出对应的组件代码。

63932

Application Architecture Guide 2.0 - CH 19 - Mobile Applications(4)

•研究并利用工具来帮助移植工作。例如,可以利用Java-to-C++的转换工具。...•设备不使用或者不需要时,能够使得设备的部分停止工作。通用的例子有背景灯,磁盘驱动器,GPS模块,话筒和无线通信。 •通过空中接口传送数据时,设计合理的通信和服务来传送最少的数据量。...•考虑使用WCF来进行存储转发式的同步,而非电子邮件或者是短信,因为WCF能够确保数据传送,并且部分连接的情况下, 也能很好工作。...Design your device UI so that it is as simple as possible, and designed specifically for pen-based input...设计应用程序UI时,考虑目标设备的多种屏幕规格和方向。 设计移动应用程序的UI时,考虑以下指导方针: •设计时,要考虑人手有可能在使用触笔或者指尖输入时,阻塞触摸屏UI

74050

设计系统简史——过去,现在与可能的将来

感谢 archive 网站的收录,在其2005年的版本,我们就已经可以看到 “Design System” 的叫法,其 Style Guide 部分和现在流行的设计系统相差无几,而且组件库模式库一应俱全...Web Design Standards 的组件列表 (2005 年的存档) 接下来,2006年雅虎推出了Yahoo Design Pattern Library,2007年也有了像“ui-patterns.com...System 2017 | IBM - Carbon Design System 2017 | Firefox - Photon Design System 2017 | Microsoft - Fluent...“大颗粒度组件的复杂性”指的是现在绝大多数的设计系统都无法覆盖到“原子设计 (Atomic Design)” 概念“分子级别”及以上的设计,然而正是这种大颗粒度的组件才蕴含着业务思考。...2.基于上文所述的“大颗粒度组件的复杂性”原因,如今“产品概念”和“产品页面”之间仍然隔着无数个需要手工设计的大颗粒度组件,而这正是现在大多数 UX 设计师的执行层面的主要工作,产品经理无法替代。

38730

开源 UI 组件库和开发工具库概览 | 开源专题 No.59

ant-design/ant-design[1] Stars: 87.9k License: MIT Ant Design 是一个企业级 UI 设计语言和 React UI 库。...主要特点: 提供了一套全新、面向未来并富有前瞻性的 React 组件 支持渐进式迁移至最新版 (FluentUI V9) 包含对老版本 (如 V8) 已经广泛使用过程积累下来的较为完善且稳定可靠等的功能...为跨领域团队而生:专注于设计和代码团队,提供无需频繁交接工作的愉快体验。 多平台支持:基于 Web,在任何现代浏览器运行,不受操作系统或本地安装限制。...Fira Code 提供了丰富多样的箭头和标点符号调整功能。 Fira Code 支持各种不同的字符变体、风格集和其他字体特性,以满足用户个性化需求。...Fira Code 对 ASCII/框绘制、powerline 和其他形式的控制台 UI 具有出色支持。 该项目适用于许多编辑器和终端应用程序。

25210

ASP.NET生成随机验证码代码和看不清切换验证码的小结

参考了一些门户网站的方法,我的改进设计思路如下: 把验证码输入项放在表单的第一行;客户端可以刷新整个页面的情况下更新图片验证码的内容。...+ Math.random(); } 注意:reloadcode函数,我们code.asp后面加了一个随机参数,这样每次的链接地址都不一样,从而达到更新的目的。...函数,我们code.asp后面加了一个随机参数,这样每次的链接地址都不一样,从而达到更新的目的。...; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls...; //全局 定义验证码 function createCode() { code = ""; var codeLength = 6;//验证码的长度

1.8K40

每日学术速递1.28

在这项工作,我们提出了投影增强网络(PEN),这是一个新颖的卷积模块,它处理子采样的3D数据并产生2D RGB语义压缩,并与选择的实例分割网络一起训练以产生2D分割。...最后,我们剖析了PEN与CellPose并排球状体的传播细胞上对细胞密度的分割强度。我们将PEN作为一个数据驱动的解决方案,以形成三维数据的压缩表示,改善实例分割网络的二维分割。...However, limitations in microscopy systems or efforts to prevent phototoxicity commonly require recording...在这项工作,我们提出了MolGen,一个预训练的分子语言模型,可以有效地学习和分享多个生成任务和领域的知识。具体来说,我们用化学语言SELFIES对超过1亿个没有标签的分子进行了预训练。...我们进一步提出在多个分子生成任务和不同的分子领域(合成和天然产品)通过自我反馈机制进行多任务分子前缀调整。大量的实验表明,MolGen可以著名的分子生成基准数据集上获得卓越的性能。

20510
领券