告别“静态组件”:Adobe XD的堆栈+状态,打造“活”的响应式UI

Adobe XD:组件与变体使用教程_2024-07-21_21-21-16.Tex 创建一个基础网格系统。使用矩形工具创建不同尺寸的网格,代表不同屏幕尺寸。设计基础组件。例如,设计一个标题组件、一个段落文本组件和一个图像组件。将这些组件转换为组件。确保每个组件都有清晰的命名。 阅读详情

在UI/前端的设计协作中,最常见的“噩梦”场景莫过于此:设计师精心制作了一套像素完美的界面,结果前端开发一套上真实数据——尤其是长短不一的中文、英文、德文标题——整个布局瞬间“炸裂”,文字溢出、元素重叠,惨不忍睹。

为了应对这种情况,设计师不得不为同一种组件,手动制作出几十种不同内容长度的“静态”版本,效率极其低下。今天,我想分享一套能彻底告别这种“笨方法”的、Adobe XD中的进阶技巧,通过组合使用“堆栈”、“内边距”和“组件状态”,去构建一个能自动适应内容、真正“活”起来的智能响应式组件。

这套流程是高阶UI/UX设计师的必备技能,建议立刻点赞收藏,掌握它,你的设计交付物将更具弹性、更受开发欢迎。


核心技巧:为你的组件注入“自适应”的灵魂

这套工作流的核心,是像搭建一个“微型机器人”一样,为你的UI组件预设好一套“行为规则”,让它能根据内部内容的变化,自动调整自身的布局和大小。我们将以一个常见的“商品卡片”组件为例。

第一步:建立“骨架”——堆栈(Stack)

“堆栈”是XD中实现自动布局的灵魂。它能让组内的元素,保持固定的、智能的间距。

  1. 在卡片内,将商品图、标题、描述、价格、购买按钮等所有元素,垂直地排列好。
  2. 将这些元素成组,然后在右侧的属性面板中,勾选“堆叠”。
  3. 现在,这个组就变成了一个“堆栈”容器。当你尝试拖动调整某个元素的上下顺序时,其他元素会自动为你“让路”。更神奇的是,当你删掉其中一个元素(比如这个商品没有描述),下方的按钮会自动向上“吸附”,并始终保持你预设的间距,无需手动调整。
80个高品质UI设计组件 Adobe XD 内含80个高品质的UI设计组件 Adobe XD设计专用 Adobe XD设计专用 立即下载

相关推荐

adobe_xd移动app设计系统_包含非常多的组件及元素.zip

adobe xd移动app设计系统,包含非常多的组件及元素 app设计元素、app设计系统、移动应用设计模板

IP路由原理、静态路由及动态路由区分

什么是路由 路由是指导IP报文发送的路径信息。 直连路由:目的地所在网络与路由器直接相连。 间接路由:目的地所在网络与路由器非直接相连。 静态路由是由管理员手工配置而生成的路由。 动态路由路由器使用路由协议从其他路由器那里获悉的路由。

weixin_42227328的博客 5459

3D Slicer5.7在win11下的源码编译安装

本博客主要参考官方安装文档以及部分CSDN的博客,部分内容的书写会直接参考官方文档的内容。

Topsort的博客 4749

用Python+Charles搞定小程序付费短剧下载(附完整代码与避坑点)

本文详细介绍了如何利用Python和Charles抓包工具实现小程序付费短剧的自动化下载。通过分析小程序视频接口、破解请求参数,并编写Python脚本,读者可以轻松获取并保存短剧内容。文章还提供了完整的代码示例和常见问题的解决方案,特别适合对视频采集和抓包技术感兴趣的开发者。

weixin_28731231的博客 1175

Silvaco TCAD实战 | SiC MOSFET工艺仿真与关键参数DOE分析

本文详细介绍了使用Silvaco TCAD进行SiC MOSFET工艺仿真与关键参数DOE分析的实战方法。通过外延生长建模、离子注入工艺调试等步骤,结合DOE分析优化器件性能,帮助工程师在设计阶段预判电学特性,提升产品可靠性。文章还分享了网格划分、界面态建模等实用技巧,助力实现从仿真到产品的闭环验证。

weixin_30235225的博客 503

Android 埋点信息分析——statsd框架

StatsPullAtomService 用以采集数据,并将数据填充到参数中,在StatsManager.PullAtomCallbackInternal 中会转换成 Parcel 格式传入到 native。 StatsCallbackPuller::PullInternal 中会回调StatsManager.PullAtomCallbackInternal 的onPullAtom,该函数中会回调StatsCallbackPuller::PullInternal 中定义的PullResultRecei

私房菜 2607

当AI写小说——一个被严重低估的工程化战场

摘要 AI小说创作远非简单的prompt生成,而是一项需要系统化工程管理的复杂任务。本文通过真实案例分析,揭示了当前AI写小说存在的五大核心难题:设定一致性难以维持、文风控制缺乏个性、爽感节奏难以把握、长篇记忆能力有限以及平台规则适配困难。研究显示,90%的失败案例源于错误的创作方法,主要表现为对话框式随机生成和模板式同质化创作。要实现高质量的AI小说创作,必须建立包括设定治理、记忆管理、文风校准等在内的全链路工程化体系,而非依赖单一prompt指令。只有采用系统化的人机协同方法,才能突破当前AI创作的质量

sellyogurt的博客 666

openHarmony之AI Engine:万字讲解如何在应用、开发板上接入AI大模型调用

本文章介绍如何在 OpenHarmony 开发板上集成和部署各类 AI 大模型,实现终端直接聊天功能,并为语音助手、智能机器人等应用提供 AI 接口支持。

m0_67505153的博客 616

Spring AI Alibaba实战训练营-13语音生成应用开发指南

本文介绍了如何基于Spring AI Alibaba创建DashScope语音应用,支持文本转语音(TTS)和语音转文本(STT)功能。主要内容包括:1)环境准备要求Java 17+、Maven 3.6+及阿里云DashScope API Key;2)通过Spring Initializr创建项目并配置相关依赖;3)设置API密钥的安全配置方法;4)实现语音合成的同步和流式功能,包括创建控制器类、调用API接口及保存语音文件。文章提供了详细的代码示例和配置说明,帮助开发者快速搭建语音处理应用。

program哲学 395

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

上一篇: 三步画出“魔戒”感地图!我的Illustrator绘制秘籍
下一篇: 角色设计内卷?用AI“结构化”方法,把废稿率降了80%
Kingsdesigner
博客等级 码龄1年 750粉丝 203原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值