首页

以用户为中心的交互设计思维

ui设计分享达人 用户研究

聊聊关于设计思维的内容,会从产品设计、体验设计、交互设计三个方面入手。
目前是第三篇,关于交互设计思维的内容。到这里设计思维的内容全部结束了。
感谢
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
以用户为中心的交互设计思维
 
 
 


作者:DesignLink
链接:https://www.zcool.com.cn/article/ZMTY0OTg1Mg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

AI创作工具的「可控性」与「用户体验」博弈

ui设计分享达人 设计管理与成长

这两年生成式ai爆发性增长并且重塑数字创作的工具生态。从文本生成、图像视频生成以及模型训练,可以说无法离开ai,ai的介入让创意生产变得前所未有的高效简单,但同时也带来了体验上的困境,例如我们在使用自动化生成便利的同时,还能保持对创作过程的深层控制?比如在进行文生图或者线稿转3D的流程中,我们如果要控制某个部分的设计表现,需要利用多个方法才能完成,仅仅通过提示词的修改并无法完成,这个矛盾在之前的SD等开源模型中非常明显;
AI创作工具的「可控性」与「用户体验」博弈
 
 
 
算法模型的开放让设计达到了无限的可能,但更多设计师却被迫在控制权和易用性之间做出了妥协,当重复一个流程无法生成满意的图象时,大多情况都是基于一个“不满意”的图像进行优化,我把这个理解为用户心理上的妥协;
AI创作工具的「可控性」与「用户体验」博弈
 
 
以节点式工作流工具ComfyUI为例,其通过可视化编程赋予用户对Stable Diffusion生成流程的精细控制权,允许自由组合模型、调节参数、插入预处理模块,成为专业创作者的首选工具。然而,这种高度自由的设计也带来了显著的认知负担:错综复杂的节点连线、晦涩的参数术语、缺乏引导的开放式画布,让0基础设计望而止步;数据显示,超过67%的新用户在首次使用ComfyUI时因“界面混乱”而放弃进一步探索(来源:ComfyUI社区调研)。这一现象揭示了生成式AI工具设计的核心矛盾——系统的灵活性与用户的心智模型之间如何实现平衡?
AI创作工具的「可控性」与「用户体验」博弈
 
 
一、核心问题与矛盾
1、设计师对“控制权”的需求本质
安全感需求:
用户希望理解生成过程(分布控制、seed数值、CFG),避免黑箱带来的不可预测性;
注:大多数AI工具(如Midjourney)像一台自动售货机——输入提示词,随机吐出一张图片。用户无法知晓AI为何生成一只三头六臂的猫,只能反复“抽卡”直到满意。
 
创造性需求:
通过精细化的控制实现独特的风格,例如分布提示,基于大模型训练出来的lora,不同lora模型融合后的混合模型,这些需要付出很大的学习成本和时间才能满足,我个人理解ai给设计师通往目标的过程中搭建了不同的道路,但设计师如果在没有导航的情况下要达到这个目标,中间可能会辗转反侧,也可能一条道路就能到达目的地;
AI创作工具的「可控性」与「用户体验」博弈
 
 
效率需求:
自动化设计(如MJ和国内其他一键生图的ai产品)可以降低设计的操作成本,但同时牺牲了可控性;
AI创作工具的「可控性」与「用户体验」博弈
 
 
2、comfyUI的设计矛盾
过度控制悖论:
ComfyUI试图打破黑箱,将AI拆解成可调节的“齿轮组”(如调节“采样器”改变画质、用“ControlNet”控制构图)。但当用户面对50多个参数和上百种节点时,反而因信息过载陷入“该调哪个参数?连错节点会爆炸吗?”的决策瘫痪。
AI创作工具的「可控性」与「用户体验」博弈
 
 
过高的配置要求:
comfyUI解决了MJ带来的黑箱效应,但同时也带来了物质上的门槛,设计师需要配备更高的配置或者使用第三方租用云电脑等才能运行,否则前者就会造成漫长的等待,后者则需要花费大量的财力,对于设计师而言反而是造成了时间上的负荷;
AI创作工具的「可控性」与「用户体验」博弈
 
 
功能维度:
节点系统支持无限组合,但缺乏对用户意图的主动理解,如自动推荐节点;
AI创作工具的「可控性」与「用户体验」博弈
 
 
认知维度:
参数暴露(如CFG Scale、Sampler)提供控制感,但引发“选择过载”实际使用过程中,如果是普通玩家,无法短时间内通过这些参数来控制结果,核心还是在于认知门槛过高;
AI创作工具的「可控性」与「用户体验」博弈
 
 
交互维度:
自由连接节点导致逻辑混乱(如错误连线无及时提示),增加调试成本。
AI创作工具的「可控性」与「用户体验」博弈
 
 
我把ControlNet的“负面条件”打乱连接到“正面clip文本框”上,而采样器的“负面条件”直接连接到“负面clip文本框”内,整个过程是不会出现任何报错提示,但是当运行调试的时候就会运行失败,提示ControlNet缺少负面条件,ControlNet(应用)缺少负面条件输出等问题,众所周知对于一些低配玩家,运行一次需要等很久,等到最后发现生产出来一个“报错”!!!
AI创作工具的「可控性」与「用户体验」博弈
 
 
二、对比分析:comfyUI和midjourney
AI创作工具的「可控性」与「用户体验」博弈
 
 
当设计师想生成“一只穿宇航服的柴犬”,Midjourney可能输出卡通风格或超现实照片,设计师只能通过追加提示词(如“3D、黏土”)逼近目标,不停的抽卡;
(实在不想用mj了,下面的图本地跑的,大概的意思一样就是不停的抽卡抽卡)
AI创作工具的「可控性」与「用户体验」博弈
在ComfyUI中,设计师可以强制指定:用FLUX模型生成基础图像,然后加载相关LoRA模型,在添加个视觉风格迁移的模型,添加宇航服,在添加个视觉风格模型,连接OpenPose节点调整柴犬姿势,最后用放大模型,放大画质;但我就想说:我只是想画只猫,为什么要弄这么复杂。。。
AI创作工具的「可控性」与「用户体验」博弈
 
 
关键结论:
ComfyUI的“高可控性”吸引专家设计师,但普通设计师或者0基础设计师因认知负荷大多放弃使用。Midjourney通过“限制控制权”降低门槛,但设计师可能因无法干预细节感到焦虑。
三、comfyui冲突点和机会点
为什么说这个呢,因为comfyui目前是趋势ai,核心的生成逻辑包括实际应用都已经大于mj了,所以接下来的内容也是围绕comfyui拆解的;
1、参数暴露vs认知负荷
问题:
ComfyUI将所有参数(如LoRA权重、VAE选择、采样器、各种模型加载器)暴露给用户,导致界面信息过载。
例如:
设计师需要同时调整“提示词权重”“采样器类型”“ControlNet强度”时,易混淆参数优先级,对于这个结果的影响,是采样器类型问题呢还是ControlNet的数值不对呢,最后我猜大多人过程都是一个个试一遍,最后哪个效果好用哪个;
思考点:
动态参数分组,根据生成的目标隐藏无关的参数,比如当输入完成“提示词”后,可以识别出输入的提示词类型,生成一个3d风格海报,那么基于这个提示词,就可以提前预判出跟3d风格海报相关的参数都可以隐藏;参数依赖的可视化,通过逻辑线的方式标记他们之间的关系,例如CFG与采样步数,通常来讲CFG数值越高生成的图越接近提示词,但是图像质量会下降,采样步数越高生成的图质量就越高,那么问题来了,当设计师调整CFG数值时,是不是可以标记或者提示设计师采样步数的变化,以此来达到最优解;
下方示例
AI创作工具的「可控性」与「用户体验」博弈
 
 
2、自由连接vs逻辑错误
问题:
节点可任意连接,但缺乏逻辑校验目前comfyUI中只是告诉设计师如果两个节点本身没有前后关系的情况下不可以连接(没有节点对应的收入口)另一种情况是两个节点在一个工作流中都能起到作用,但是节点是多功能化的,连线的时候可以正常连接,最后运行的时候就会出现某某节点不匹配。
例如:
设计师错误连接ControlNet预处理器与VAE节点,导致生成失败且无报错提示。
思考点:
实时逻辑校验,在设计师连线时提示冲突(如“该节点仅接受潜空间输入”)。
工作流自检模式,一键检测缺失节点(如缺少“提示词编码器”时提醒用户)。
AI创作工具的「可控性」与「用户体验」博弈
 
 
四、设计师心理与工具的“错位战争”
生成式AI工具的设计矛盾,本质上是人类认知模式与技术逻辑的冲突。以ComfyUI为例,其设计暴露了以下深层问题:
1、“技术透明化”的认知陷阱
ComfyUI将AI生成过程拆解为节点,试图通过“透明化”提升用户信任,但普通人并不需要(也无法理解)技术细节;不知道你们有没有,当我第一次看到“VAE解码器”“潜在空间降噪”等节点时,大脑会触发“意义建构焦虑”——“这些词和我想要的图片有什么关系?”
AI创作工具的「可控性」与「用户体验」博弈
 
 
2、控制权的“虚假承诺”
ComfyUI看似赋予用户完全控制权,但多数参数的实际影响难以预测(如CFG值从7到8可能导致画风突变)这类似于让设计师驾驶一辆方向盘与轮胎无机械连接的汽车,转动方向盘时,轮胎可能随机偏转。设计师误以为“控制节点=控制结果”,实则是“在黑暗中调整未知旋钮”;
AI创作工具的「可控性」与「用户体验」博弈
 
 
3. 技术极客与大众的“认知断层”
开源社区的理想:“人人可 Hack”的民主化工具;现实问题是开发者设计节点时默认用户理解SD原理(如Latent Space、扩散模型、euler_ancestralcai、dpmpp_2m),但普通用户只关心“如何让图片更逼真”;这种断层导致ComfyUI的文档充满技术术语,而非用户目标导向的指南(如“修复模糊人脸”对应哪些节点组合),这也是技术工具与用户体验的博弈;
AI创作工具的「可控性」与「用户体验」博弈
 
 
五、对于comfyUI的畅想
1、适配不同能力的设计师
专家模式:保留完整的节点和参数,让这类设计师自由编辑;
精简模式:隐藏底层参数,仅仅提供目标导向的选项;
自动化操作:根据提示词推荐采样器、cfg数值等组合,例如提示词是自然语言,那就匹配关于flux模型的专属采样器;
AI创作工具的「可控性」与「用户体验」博弈
 
 
2、智能节点推荐引擎
目标推荐:输入“生成赛博朋克城市”后,自动推荐“SDXL模型+ControlNet边缘检测+色调调整节点”;行为预测:分析历史工作流,推荐高频使用的节点组合(如“LoRA模型+分层提示词”);
3、可解释性反馈面板
参数与结果的实时性:实时显示调整CFG值对图像细节、对比度的量化影响。节点的贡献度分析:生成后标记关键节点(如“ControlNet贡献度72%”),帮助用户理解流程。
六、总结:控制的幻觉与设计的谦卑
ComfyUI揭示了生成式AI时代的核心矛盾——技术的能力越强大,人类越需要承认自身认知的局限性。工具设计不应追求“上帝模式”,而需寻找“刚刚好的控制权”给用户“扳手”而非“零件库”:提供高层级调节维度(如“画面精细度”“风格偏离度”),隐藏底层技术参数,并不是每个设计师都是工程师的角色;大多设计师的角色只是维修工;拥抱“不完美的人性”:允许用户保留“我不知道为什么要调这个,但调了就有用”的玄学操作,而非强迫所有人成为AI工程师。重新定义“控制”:从“绝对掌控流程”转向“有效影响结果”,让AI的不可预测性成为创意催化剂而非焦虑来源。


作者:爱吃猫的鱼___
链接:https://www.zcool.com.cn/article/ZMTY1MDQ2OA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

产品设计如何利用心理学

ui设计分享达人 设计思维

产品设计的成功除了依赖设计方案和技术实现,还与用户的心理密切相关。用户心里决定了我们用怎样的设计策略解决问题。我们常认为人们做决策时是理性的,但其实用户行为经常是非理性,会受到情绪、习惯和社交环境的影响。了解这些心理学规律能帮助我们更好地的预测和引导用户行为,优化产品体验,提高用户的粘性、留存率和转化率,从而产品商业价值最大化。
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学
 
 
产品设计如何利用心理学


作者:DesignLink
链接:https://www.zcool.com.cn/article/ZMTY1MDk0MA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

关于设计组件库,一些新思考

ui设计分享达人 设计管理与成长

关于设计组件库,我们有一些新思考
 
 
 
从网上搜索设计组件,我们能找到各种对外公开的设计组件库,同样还有不少或概括或详细的文章,手把手教你“如何搭建一个好的设计组件库”,但这些方法论很少探讨面对C端组件频繁增改、设计规范动态调整,如何高效赋能业务设计交付的相关内容,但这恰恰是搜索业务面临的关键问题。
 
搜索是一个“牵一发而动全身”的业务,每一个微小的设计细节都有可能影响各个业务的数据指标,一个“好的设计组件库”需要以一种潜移默化的方式让设计师掌握设计规范,完成合规的设计,从这个角度而言它应该比较
「好懂」
 
而作为服务于整个设计团队的公用设计组件库,面对每月数以万计的调用次数,它必须保障最基本的易用性,应该非常
「好用」
 
同时,面对频繁迭代,“好的设计组件”还需要保持最快的更新速度,为各个横向团队提供正确的样式,从这个角度来说它还要
「好维护」
 
因此,
「好懂、好用、好维护」
是搜索设计语境下,对一个“好的设计组件”的定义。
 
关于设计组件库,我们有一些新思考
 
 
 
接下来,我们将从这三个「好」入手,分享搜索设计组件库在升级过程中的一些思考,希望能和大家共同探讨。
 
关于设计组件库,我们有一些新思考
 
 
 
 
关于设计组件库,我们有一些新思考
 
 
 
“万丈高楼平地起”,我们先来说说如何从零开始构建一个既符合设计规范又易于理解的设计组件。
 
首先,在搭建组件时,我们可以考虑采用
多层嵌套
的方式,即组件(Component)内部嵌套变体(Instance)。这种方式不仅能省去组件搭建和修改过程中的重复操作,甚至还能在解绑组件时,通过选中内部的子组件图层进行解绑,大大简化了搭建和使用双方的操作流程。
 
在多层嵌套的思路下,我们可以进一步用
“底层灵活、上层收敛”
来指导组件的搭建。这意味着底层变体的形式足够多样,能够支持大部分的状态切换,而在上层组件搭建的过程中显性地加强规范的指引(如规范中不允许使用的样式不对外展示),以降低超出规范设计的可能。
 
具体的搭建流程可以大致分为三步:
场景收集和分析、搭建基本变体组、拓展高阶变体组
 
我们将通过视频组件搭建的生动案例,具体介绍如何依据“底层灵活、上层收敛”原则来搭建组件库,使得组件本身既足够灵活,又能起到足够的约束作用。
 
关于设计组件库,我们有一些新思考
 
 
 
在着手搭建某类组件时,我们首先通过规范确认和场景遍历,广泛收集各类变体。随后,从我们能想到的所有维度出发,对这些变体进行细致定义。这样,我们就能得到一张详尽描述组件变体性质的表格。表格的第一列依次列出变体1、变体2、变体3等,而第一行则罗列出各种维度,如宽度、比例等。通过这种方法,我们可以将原本零散、杂乱的组件变体描述,系统地归纳整理成一张清晰明了的表格。
 
关于设计组件库,我们有一些新思考
 
 
 
表格通过不同维度来唯一确定一个变体,这些维度可大致分为两个特性和一个共性。共性指的是所有变体在这一维度上均保持一致,常见特性则涵盖了最常见的分类性质,如宽度、高度、数量和优先级等,而业务特性则与具体业务紧密相关。
 
在搭建组件时,我们可以遵循
「共性-常见特性-业务特性」
顺序,这样的顺序有助于降低理解成本,因为最符合心智的分类被置于外层,同时底层的组件又保持了足够的灵活性,便于切换各种变量。对于业务特性,我们可以根据实际情况灵活处理,既可以将其作为基本组件的延展,也可以不将其纳入组件范畴。
 
以视频组件为例,我们从表格中获取的信息如下:
 
  •  
    视频尺寸及其组合是最符合用户心智的变体选择;
  •  
    播放状态是所有变体的共有性质;
  •  
    自动播放情况与业务相关,但不一定需要在组件库中呈现;
  •  
    高阶组件仅涉及少部分尺寸的组件,应在完成基本组件搭建后再进行。
 
据此,我们可以轻松梳理出视频组件搭建流程的优先级:
 
  1.  
    播放状态作为共性,应首先搭建;
  2.  
    基本组件尺寸和组合是最符合用户心智的变体选择,应紧随其后;
  3.  
    高阶组件在完成基本组件搭建后再进行。
 
值得注意的是,“封面槽位”是“播放状态”中的一个图层。根据“底层灵活、上层收敛”的原则,我们将其插入到搭建播放状态之前。因此,视频组件的最终搭建流程为:
 
  1.  
    封面槽位;
  2.  
    播放状态;
  3.  
    基本组件尺寸和组合;
  4.  
    高阶组件。
 
关于设计组件库,我们有一些新思考
 
 
 
完成对视频组件搭建的分析,我们就可以有条不紊地开始搭建组件了。先搭建基本组件视频组件,再用基本组件搭建高阶组件。这一步骤虽然为大家所熟知,但仍需格外注意,如配置项的设置要力求合理,也可以融入设计规范和使用规范,同时还应将一些搭建过程中的零散组件集中收纳避免被调用。关于这些具体的注意事项,我们将在后续部分进行详细阐述。
 
至此我们完成了组件搭建的基本流程,一个达到及格线的视频组件就诞生了。据统计,优化后每次调用视频组件将节省至少10步的点击操作!
 
 
关于设计组件库,我们有一些新思考
 
 
 
完成了一个基本组件的搭建后,我们可以转换视角,从使用的角度来审视并检查这个组件。
 
我们期望,从插入组件变体、切换组件配置,再到最后的解绑组件,整个流程都能纵享丝滑且稳定可靠,确保业务设计师在使用过程中获得最佳体验。
 
关于设计组件库,我们有一些新思考
 
 
 
我们可以一步步来审视组件的使用过程。首先是插入组件,据观察,通常有三种方式,①在左侧的资产面板(Assets)中直接找到对应组件并插入;②通过查阅设计规范,锁定所需的变体后复制粘贴;③选中一个不需要的组件,通过右侧的“切换变体”面板(Swap instance)切换成所需的变体。很明显,在这个过程中依赖的是组件的精准搜索和快速定位。
 
关于设计组件库,我们有一些新思考
 
 
 
为了提升搜索精度,我们可以从组件命名入手,采用中、英、数字结合的方式,实现模糊匹配;也可以在发布时隐藏不希望被调用的组件,以减少无用的搜索结果。如果组件是采用前文提到的“多层嵌套”方式搭建的,我们可以添加“Preferred”子组件,这样在切换时会优先展示这些子组件,这个功能在切换图标时尤为实用。
 
对于习惯边查阅设计规范边使用组件的设计师,我们增加了更多实际使用的正误案例,这些案例直观展示了组件变体的正确选择和使用方式,进一步降低了规范的理解成本,有效辅助设计决策。同时,我们专门维护了一个固定区域,用于平铺展示所有组件变体。为了确保能够轻松点选,我们将变体放在最外层展示(即不在任何Frame、Group或Section中)。这样能让设计师一目了然地看到所有变体,从而快速选择所需的组件。
 
关于设计组件库,我们有一些新思考
 
 
 
在组件配置阶段,有三项注意点能让组件更加易用,即“重视组件的可视化效果、设置高效易用的配置项、贴心地保存修改”。
 
关于设计组件库,我们有一些新思考
 
 
 
考虑到C端组件的多样性和用户的使用习惯,我们应避免使用过于复杂的分组方式。相反,应更注重组件的样式展示,并尽量简化组件的层级结构。这样,设计师在使用时能够更直观地看到组件的外观,而无需深入复杂的层级去查找。
 
另外值得注意的是,Figma会默认用组件集合中最左上角的组件生成预览样式,因此应当把视觉上最有代表性的变体放在左上角,这个效果在切换变体(Swap instance)时很重要,因为目前在该面板中没法查看组件细节,只能靠缩略图和名称来推测是哪个组件。
 
关于设计组件库,我们有一些新思考
 
 
 
其次对于配置项的设置也大有讲究,业界有组件库为了实现C2D2C,从源头上将设计组件和前端组件的配置项打平,这是不错的思路,但有可能会提升设计侧的理解成本。针对搜索业务的特殊语境,我们还是选择了从「规范理解」角度去设置组件的配置项,将所有允许自定义的配置尽可能外露,并清晰地说明修改限制,如字数限定、选项个数等,这样能够在使用的过程中强化业务设计师对规范的掌握。
 
另一个常常被忽视的关键点是选项和配置的排序问题。为了提高浏览和选择的效率,建议对选项和选项之间,以及外层的不同配置项,都按照一定的逻辑顺序进行排序。
 
关于设计组件库,我们有一些新思考
 
 
 
最后一点,我们称之为
“贴心地保存修改”
机制,这个针对的是文字修改的场景。
 
在实际操作中,使用一个组件可能需要对多个配置项进行修改。有时在修改完文字内容后再去调整其他配置时,已修改的文字会被重置。这时文本属性(text property)的设置就显得尤为重要,它能够记忆并保存修改过的文字内容,从而免于重复输入。
 
还有一些情况是,某个组件变体实际上并没有与某个值相对应的组件(尽管Figma机制允许选择该值),用户切换后就会发现组件完全变了,只能撤回。为了避免这类情况,建议使用另外的标记来表明组件某个设置项是不可切换的。
 
关于设计组件库,我们有一些新思考
 
 
 
 
关于设计组件库,我们有一些新思考
 
 
 
完成了组件的搭建和检查,接下来让我们聚焦于组件的日常维护。
 
这一环节可以从两个维度展开,一是依托中台的日常数据监控进行维护,二是通过团队内部的紧密协同机制来保障。后者更多侧重协作流程和机制上的建设,在本文中我们不做更多展开,重点讨论前者。
 
数据监控的方式主要依托Figma中的组件数据看板(查看路径:View libraries-Analytics),看板中展示了各个组件的调用数和解绑数数据,这些数据不直接反映组件的优劣,但如果我们观测到某个组件解绑率偏高,我们会考虑直接把它
作为模板
而不是创建成组件。
 
关于设计组件库,我们有一些新思考
 
 
 
 
总结
 
以上是百度搜索设计团队在设计组件库升级过程中的心得分享,包括搜索业务对于“好的设计组件”的诉求,以及一些搭建和优化组件的实用思路,核心是探讨如何从组件库建设的角度入手,成功助力团队提升设计资产消费效率。
 
关于设计组件库,我们有一些新思考
 
 
 
 


作者:百度MEUX
链接:https://www.zcool.com.cn/article/ZMTY1MTYwOA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

Banner布局在用户界面中的设计样式研究

ui设计分享达人 设计思维

前言
    Banner,这一设计元素对于我们设计师而言早已经是司空见惯,其核心往往聚焦于视觉表现的层面,也是成为UI设计师重要能力play中的一环。今天要写的,并非Banner在视觉艺术上的探索,而是其在UI场景中布局样式的深度剖析。
    Banner图作为产品中的一项基础功能,其存在已是常态。在视觉创意的追求之外,UI层面的样式布局也在不断寻求突破与创新。
 
目录
一、Banner 视觉层表现
二、Banner 布局样式
三、总结
 
一、Banner视觉层表现
    作为界面视觉焦点,Banner通常以可交互的轮播组件形式呈现,这种动态展示方式已成为现在产品的重要导航模式之一。它不仅是信息传递的载体,也是平台与用户对话的窗口,承载着活动推广、品牌宣发等核心内容的展示使命。 在提升用户注意力的设计探索中,Banner的视觉表现手法持续演进。从设计维度来看,我们不仅要在创意构思、版式布局、色彩搭配等基础层面下功夫,更需在表现形式上寻求突破。
    基于动态复杂度,我将Banner的表现形式归纳为四个层级:从基础的静态图像,到轻量级的GIF动画,再到沉浸式的视频背景,直至最具空间感的分层效果,每种形式都对应着不同的设计目标和用户体验。
Banner布局在用户界面中的设计样式研究
 
 
1.1静态
    在众多Banner表现形式中,静态轮播图因其高效的设计实现和便捷的技术支持而成为多数产品最普遍的选择。
    这类Banner采用静态图片作为视觉载体,根据产品需求可分为两种基础模式:单一画面呈现的简约风格,以及多画面轮播的交互形式。其中,多图轮播既支持自动播放的时间轴切换,也允许用户通过手势滑动进行自主浏览,在保持视觉简洁性的同时增加了交互维度。这种设计平衡了视觉效果与功能实用性,所以会成为多数产品的首选方案。
Banner布局在用户界面中的设计样式研究
 
 
Banner布局在用户界面中的设计样式研究
 
 
1.2动态
    动态Banner以生动的表现力,在吸引用户注意力方面展现出显著优势。通过关键元素的微妙动画和CTA按钮的交互反馈,能够有效引导用户视线,强化信息层级。
  在动态Banner的应用中,单图形式往往更受青睐。虽然动态效果能提升视觉吸引力,但过度使用可能导致"视觉噪音",反而分散用户注意力,降低核心信息的传达效率。
    面对信息过载的数字环境。微交互动画作为一种优雅的解决方案,在功能引导和视觉叙事两个维度都发挥着重要作用,也已经成为界面设计中不可或缺的设计语言。
Banner布局在用户界面中的设计样式研究
 
 
Banner布局在用户界面中的设计样式研究
 
 
1.3视频
    视频广告作为一种成熟的营销媒介,在短视频文化盛行的当下,已逐步融入Banner轮播体系。这类视频Banner通常占据首屏黄金位置,配合明确的倒计时提示和便捷的关闭选项,为用户提供可控的观看体验。为减少对用户的干扰,视频默认采用静音播放模式,这种贴心的设计选择体现了以用户为中心的设计理念。
    在特定垂直领域,如影视类平台,我们也能观察到多视频轮播的创新应用。这种相对小众的呈现方式,往往与平台的内容属性高度契合,为特定用户群体提供沉浸式的浏览体验。这种差异化的设计策略,展现了产品设计中对场景化需求的深入思考。
Banner布局在用户界面中的设计样式研究
 
 
Banner布局在用户界面中的设计样式研究
 
 
1.4分层
    在追求差异化体验的设计浪潮中,轮播广告正在突破传统平面展示的局限。分层视觉设计以其独特的空间感和动态层次,为Banner设计注入了新的活力。这种创新表现形式包含多层次的视觉构建:从基础的内容层叠加视觉,到更具空间感的3D翻转效果,再到前景与背景的智能分离运动,每种方式都在重新定义用户与广告内容的交互方式。
    基于视觉层次的运动差异,设计出引人入胜的视觉叙事,能够有效的提升用户参与度以及更具沉浸感和记忆点广告体验。
Banner布局在用户界面中的设计样式研究
 
 
Banner布局在用户界面中的设计样式研究
 
 
小结
    Banner的视觉创新是提升内容吸引力的关键驱动力。
    每一种新的视觉语言都是我们与用户对话的新方式,是提升信息传达效率的重要途径。在竞争激烈的市场环境中,差异化的表现形式往往能成为抓住用户注意力的制胜法宝,这也是为什么我们要不断突破常规,寻求更具感染力的视觉解决方案。
 
二、Banner布局样式
    在确定Banner的视觉表现手法后,就得深入研究其在界面布局中的空间关系。布局样式的多样性源于多个设计维度的考量:从Banner的宽高比例、尺寸规格,到其与页面结构的整合方式(通栏或分栏),再到其与周围元素的视觉关系(独立呈现或背景融合)等。
    就通栏与分栏布局而言,这种结构性选择直接影响Banner的视觉占比。虽然直觉告诉我们更大的Banner更具吸引力,但优秀的设计需要平衡信息层级与视觉舒适度。Banner的布局不应是孤立的决策,而应该与整体界面风格和谐统一,既要突出又要融入,在视觉冲击力和界面协调性之间找到最佳平衡点。这种全局性的设计思维,正是打造优质用户体验的关键点所在。
Banner布局在用户界面中的设计样式研究
 
 
    在处理深色系头部界面时,我们常采用Banner与背景层叠的设计策略。这种手法通过建立视觉深度,创造出富有层次的空间感。背景色的处理有两种方式:一是采用固定色值保持统一性,二是根据轮播图主色调动态调整,后者能实现更自然的视觉过渡,提升整体设计的融合度与空间纵深感。
    在Banner比例方面,选择直接影响高度控制,需要根据界面内容密度灵活调整。除了基于内容需求的自定义方案,许多人会采用数学比例系统进行规范化设计。其中,基于斐波那契数列推导出的8:5、8:3等比例关系,因其视觉舒适度而被广泛采用。在实际应用中,我更倾向于选择能被4整除的数值,既符合开发规范,又能确保在不同设备上的适配性。
Banner布局在用户界面中的设计样式研究
 
 
以经验作为基石,而不是限制,特殊情况特殊对待,就像配合前端工程师调整设计图样式一样,灵活运用。
 
三、总结
    Banner作为页面中的常见元素,与其说是对布局样式的探索,不如说是对用户体验的深度挖掘。每一次布局创新都是对用户与页面互动方式的重新思考。
    一个恰到好处的留白、一次精准的视觉引导、一个流畅的交互过渡,这些细微之处都可能成为提升产品体验的关键。 当我们能够系统性地把控每个设计细节,将用户需求转化为优雅的解决方案时,就能做出真正打动人心的页面设计。


作者:Syic
链接:https://www.zcool.com.cn/article/ZMTY1MTk1Mg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

界面设计中【浮标】的思考与探索

ui设计分享达人 设计管理与成长

界面设计中【浮标】的思考与探索
结合设计原则与“智能伴学助手”项目应用浮标实践展开
-------------
 
目录:
背景
浮标的本质与价值
浮标设计
一、功能定位与场景适配
二、视觉与交互设计
三、技术实现优化
四、无障碍与伦理考量
五、创新方向探索
结语
 
-------------
背景:
在教育类移动端中接入了大模型AI智能应用,为保证这个应用入口可长期保持并随时可见,提高使用率,为用户提供便利。笔者通过“智能伴学助手”浮标实践应用,对后续制作浮标在界面设计中思考与探索。
 
浮标的本质与价值
1)空间维度突破  
作为界面中的「第三层空间」,浮标通过视觉悬浮感打破平面限制(如iOS 的3D视差效果); 在信息过载时代,提供「随时在场」的核心功能入口(如美团外卖的悬浮购物车,左右动效:进缩)。
「第三层空间」并「随时在场」,也是很好的广告位和优惠营销,一些浮标的“小巧思”。
「第三层空间」并「随时在场」,也是很好的广告位和优惠营销,一些浮标的“小巧思”。
 
2) 认知心理学应用
利用格式塔原则中的「闭合性」设计半透明遮罩,暗示可交互区域;通过菲茨定律优化点击热区,圆形浮标直径建议≥48dp(Android 规范)。
 
 ---------------------
浮标设计
就项目中“智能伴学助手”为例,一个教育类的应用入口,结合功能定位、用户体验与技术实现浮标在界面中的作用。通常浮标是一个悬浮的按钮或图标,用于快速访问某些功能,从多个维度探索其在移动端界面中的合理呈现方式:
 
 
一、功能定位与场景适配
 
浮标的设计规范:
比如尺寸、颜色、位置。通用的设计规范,教学工具类App的界面设计,可能涉及图标和布局。
1)尺寸与网格系统
 ◇ 图标尺寸需适配不同屏幕分辨率,常见规范包括128x128px、96x96px、64x64px等,需根据界面层级选择合适尺寸。
◇ 尺寸一般用1:1比较好或者成倍数,先做大再导出所需要的不同大小比例。
◇ 使用网格系统(如微软Fluent的24px基础网格)确保视觉一致性,留出安全边距(如2px内边距)避免元素溢出。
2)造型与风格
◇ 遵循简约易懂原则,优先采用象形图或表意符号增强识别性。
◇ 保持系列图标风格统一,包括线条粗细(建议1.5px)、圆角弧度(微软Fluent定义大/中/小三级圆角)及视觉平衡。
3)适配性
◇ 导出格式需与开发协作,推荐PNG序列或SVGA文件以兼顾清晰度与性能。
◇自适应考虑不同平台的显示情况。
 
核心功能聚合:
语言学习工具类界面将高频功能(如首页入口、作业评论、学习提问)通过浮标动态整合,支持长按展开二级菜单或滑动切换功能模式,吸附于屏幕边缘。
根据学习阶段智能变化:
课前(预习):浮标展示课程试学入口或学习目标设定;
课中(口语输出):提供实时笔记悬浮窗或标记工具;
课后(点评):将课后作业及巩固语言习得情况的评价和自我精进。
(外语语言口语学习一般模式:盲听,然后根据自己的话复述,理解语言并有效使用语言)
  
首页入口、作业评论、学习提问通过浮标智能解答点评,通过二级页面展开细则
首页入口、作业评论、学习提问通过浮标智能解答点评,通过二级页面展开细则
 
二、视觉与交互设计
 
以”智能伴学助手“为例,浮标主色是蓝色,企业主题色也是蓝色,而”智能伴学助手“浮标使用背景一般也以蓝色为主,App主题色也是蓝色,多场景使用适配蓝色背景的静态浮标,又要使浮标可以在背景中脱颖而出,在其过程中尝试蓝+蓝搭配的存在局限性,本身蓝色系较统一。
在同为蓝色后,产生不同「空间」,通过将界面元素分层(如前景图标与背景图像),营造深度感。在浮标进行描边隔层,现在很多表情包就是这种模式操作。
微信小程序的移动学习平台设计,强调了用户需求分析、界面简洁和交互设计,这可能对浮标的功能定位有帮助。智能伴学助手来浮标快速访问。在不同背景下的浮标呈现视觉形式,只要点击即可进入应用。
微信小程序的移动学习平台设计,强调了用户需求分析、界面简洁和交互设计,这可能对浮标的功能定位有帮助。智能伴学助手来浮标快速访问。在不同背景下的浮标呈现视觉形式,只要点击即可进入应用。
 
思考与探索:
浮标需要特色,用户在使用过程中视觉明显,提高交互。
浮标既显眼又不干扰学习,所以需要平衡可见性和沉浸感。
浮标可以移动,用户可以根据需要调整位置,避免遮挡内容。
现浮标是静态的,如何尝试动态浮标,与用户有更好的交互体验,参与感。
颜色和动效方面,冷色调营造学习氛围,浮标可以用品牌色,如蓝色或绿色,加上微动效吸引注意。样式用了蓝色圆形浮标,可能适合教育类应用,赋予科技感设计。
不同状态或者不同页面下的浮标呈现方式不同,但成一系列,增加趣味性。
 
白色背景或者透明背景下的浮标呈现,在不同页面呈现一“系列”
白色背景或者透明背景下的浮标呈现,在不同页面呈现一“系列”
 
蓝色背景下或者在统一色系下浮标视觉”糊“,可用白边的形式将背景和浮标的”空间“区分开
蓝色背景下或者在统一色系下浮标视觉”糊“,可用白边的形式将背景和浮标的”空间“区分开
 
思考与探索:
配色方案
1)主色选择
明亮色系:如红色、橙色、黄色等,能快速吸引用户注意,适用于促销活动入口。
品牌色融合:在特殊场景中融入品牌LOGO或主色,代表企业形象和IP,增强品牌认知。
2)色彩心理学应用
蓝色:传递信任感,适合金融或工具类应用。
黑金/黑黄组合:营造神秘或高端感,常见于娱乐或奢侈品领域。
紫色+粉红:适用于美容、女性向产品,传递温柔与创意。
控制色彩平衡,用户色彩感官可适应。
3)对比与背景
使用中性色(如米色、白色)作为背景,提升信息可读性。
避免冲突色搭配(如蓝色用于食品类浮标易抑制食欲)。
 
思考与探索:
个性化推荐和交互设计,可以结合AI预测用户行为,动态调整浮标的出现时机,比如在需要提醒作业时显示。主色选用品牌色(如教育蓝/科技紫)强化识别性。
 
如何设计浮标会更好?
如何设计浮标会更好?
 
 
创新交互模式思考探索:
1)压力感知交互  
▸安卓压感屏实现「轻按预览/重按触发」分层交互(如华为悬浮球压感菜单);配合触觉反馈(Haptic Engine)增强操作确认感。
2)动态语义变形
-生物拟态动画:
▸呼吸感悬浮:模拟水母游动节奏(振幅0.5-1.2px,频率0.8Hz)  ;
▸点击时触发粒子扩散动画(模拟知识传递意象);
▸拖拽时产生弹性形变(阻尼系数0.6-0.8),边缘碰撞后回弹。
- 根据场景智能改变形态:  
▸ 阅读类App中展开为「书签浮标+进度条」复合控件  ;
▸ 音乐播放器浮标可拉伸成波形可视化界面。
 通过多模态反馈,听觉,视觉,触觉多种情感交互。
3) 空间布局策略:
▸默认位置:置于屏幕右下侧(符合右手持机习惯),预留10%边距防止误触;
▸智能避让:通过内容识别算法,在视频播放或文本输入时自动偏移避开核心内容区域;
▸AR场景中的空间投影浮标(如IKEA Place家具预览浮窗)。
位置多为屏幕右下侧
位置多为屏幕右下侧
 
 三、技术实现优化
 
1)跨端一致性
  •  
    使用React等框架封装可复用浮标组件,通过响应式设计适配不同设备尺寸(如折叠屏展开态需重新计算定位锚点);
  •  
    采用SVGA格式实现高性能动效,控制帧率在30fps以内以降低功耗。
2)AI驱动个性化
  •  
     基于LSTM模型预测用户行为: 检测到长时间未操作时,浮标缩小并展示激励标语; 识别到错题高峰时段,主动弹出知识点讲解入口;
  •  
     支持语音指令交互(如“浮标移到左上角”)。
 
四、无障碍与伦理考量
 
1)包容性设计
◇为色弱用户提供高对比度模式(浮标轮廓增加动态描边,对比度≥4.5:1);
◇支持头部追踪控制浮标移动(iOS Switch Control技术适配)。
2)防沉迷机制(适合未成年类App)
◇连续使用1小时后,浮标渐变灰色并触发休息提醒;
◇家长端可远程设置浮标功能禁用时段。(未成年学习类工具考虑优化)
 
五、创新方向探索
 
1)多模态融合:
◇AR场景中浮标投射为3D虚拟助手,支持手势交互与空间定位;
◇结合眼动追踪技术,实现注视区域自动呼出上下文菜单。
2)情感化表达:
◇根据学习成就解锁浮标皮肤(如连续打卡7天变为奖杯形态);
◇错误率过高时,浮标呈现“鼓励模式”(配色变暖+微震动反馈)。
学习类智能伴学助手的浮标既能作为高效的功能枢纽,又可成为情感化学习伴侣。实际落地时建议结合A/B测试持续优化,例如对比分析「固定浮标」与「场景自适应浮标」的点击转化率差异。
 
----------------
 
结语:
浮标不应仅是功能载体,更应成为:  
- 空间叙事者:通过动态变化讲述产品故事;
- 情感连接器:建立用户与数字世界的温度触点;
- 场景预言家:预判需求并提供恰到好处的服务。
 
设计师需在「显性价值」与「隐形干扰」间找到精妙平衡,让浮标成为提升体验的优雅解决方案而非视觉负担。未来可探索脑机接口的意念控制浮标、量子动画渲染等突破性方向。
技术实现上,探究代码示例展示了如何控制浮标的移动,确保不超出屏幕,这可以作为技术参考应用实际案例中。同时,性能优化方面,使用SVGA格式或减少帧数,可能对动效设计有帮助。
浮标设计需要结合功能定位、用户行为、视觉设计、交互体验和技术实现,可多进行参考不同案例,搜索现有项目,对比借鉴然后对新型B端界面有所创新,确保既实用又不干扰用户。
还可以利用Ai创新思维,设计师可以更快速、高效地生成多种设计方案,结合项目开发满足消费者对个性化、时尚化的需求。
 


作者:啊海包船打鱼
链接:https://www.zcool.com.cn/article/ZMTY1MjgzNg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

我们是如何搭建企业级B端设计规范的?

天宇 B端ui设计文章及欣赏

今天主要是和大家分享一下我们公司内部建立设计体系的方法和实践案例,希望大家能指正与交流~
我们团队就是最可爱滴~~~
我们是如何搭建企业级B端设计规范的?
 
 
B+Design System是以当前互联网主流B端框架为基础,并结合合公司特定业务场景而打造的具有"公司品牌特色的B端后台设计体系"(以下简称为"B+Design"),包含了有关颜色、字体、icon、栅格、版式、间距、数据可视化等设计规范指南,组件层提供 30+ 不同的组件,包括它们的不同状态,形成的模式,以及应用的产品。
 
 
一、为什么要建立 B+Design 设计体系?
随着公司快速发展,目前公司用于业务支撑的后台管理系统"品类繁多且零散独立",需构建一套"灵活、专业"的设计体系来统一设计生态风格及交付标准。
 
当前痛点:
沟通时间成本高
:跨部门的项目实施过程中流程混乱,产品、设计、开发、测试等岗位在工作对接时沟通低效且问题耦合度高;
 
交付质量差
:无项目统一交付标准,不同项目质量产出不稳定,项目质量高度依赖于各个环节负责人的个人能力;
 
做不好设计协同
:各个系统级页面架构、组件、样式野蛮生长,缺少规范范导致样式及体验不统一;
 
研发效率低
:组件重复开发,维护成本也高,无基础沉淀能力;
 
我们是如何搭建企业级B端设计规范的?
 
 
 
 
二、构建 B+Design 的思路
1、设计目标
伴着公司业务发展,开源的组件库已无法满业务需要,搭建一套更适合公司业务的UI组件库,势在必行;设计系统承载着作为一个沉淀基础能力的支持平台,同时也具有赋能多多边业务、多种角色的重要作用和价值;
 
标准统一:
重新定义标准化的产品用户体验,统一品牌形象、设计标准,降低决策成本,提高产品迭代效率及质量;
 
降本增效:
基础能力沉淀,规范设计元素,减少重复性设计,且提高代码可复用性,避免重复开发,降低时间及人力成本;
 
高效协同:
降低不同设计师或上下游同事之间的沟通成本,提高团队之间的协作力,提升团队整体效率;
 
设计延展:
通过设计规范建立,满足组件在不同场景及业务中的延展和扩充,从而实现全链路、多场景的高效输出;
我们是如何搭建企业级B端设计规范的?
 
 
 
2、设计原则
为了更适用于企业级产品的开发和使用,通过大量中后台场景的的实践,B+Design设计系统提炼出以下设计原则:
清晰:
效率提升是务实之基。设计应减少不确定因素,降低用户判断次数,明确信息层级导向,使操作目的更清晰;清晰的设计体系让产品操作直观、流程一步到位;信息传达清晰表意明确,助用户短时间内快速理解并作出判断。
 
高效
设计效率:可快速生成效果图,也可使用Sketch,组件库,页面模板等快速生成效果图和业务解决方案来提高产品体验一致性;
开发效率:组件均已代码封装;并提供体验评估标准以供参考,保证产品质量;
使用效率:系统常用组件(如批量搜索和操作)提高用户工作效率;
工作协同:减少产品开发流程中各个角色之间的沟通成本;
 
标准化:
样式规范、操作流程、呈现高度一致的设计标准,能体现产品的品牌感与信赖感,实现品牌感的系统传达,还能降低用户反复学习成本,给用户带来品牌信赖。
 
创新:
通过对当前市场主流设计系统开展竞品分析,结合FS业务场景对各个组件进行统一规范,打造符合FS品牌特性的产品设计体系;
我们是如何搭建企业级B端设计规范的?
 
 
 
3、原子化组件思维
原子最早是由英国化学家/物理学家约翰·道尔顿提出的,继承古希腊原子论和牛顿微粒说,提出的原子论。化学元素由不可分的微粒(原子)构成的,它在一切化学变化中是不可再分的最小单位。
原子理论同样适用于我们的设计系统中:我们的页面是由原子(最小单位设计元素)、分子(基础控件)、组织(基础功能组件)、模版(业务定制组件)、页面构成的;
我们是如何搭建企业级B端设计规范的?
 
 
注意:设计组件不是把UI元素堆积到一个地方,然后各处集中引用用这么简单。组件化的工作方式信奉独立、完整、自由组合,目标就是尽可能把设计与开发中的元素独立化,使它具备完完整的局部功能,通过特定规则自由组合来构成整个产品。
 
 
三、构建 B+Design 的步骤
基于前期的思考,接下来我们的任务是对整个体系的制定进行任务规划,以下是四大步骤:
我们是如何搭建企业级B端设计规范的?
 
 
 
第一步:现状分析
通过现状所有系统进行设计走查及用户问卷调研,收集用户建议及观点,明确规范需要优化的方向。
我们是如何搭建企业级B端设计规范的?
 
 
 
第二步:框架梳理
通过三大竞品设计体系(阿里,字节,腾讯)框架的梳理,结合现有设计页面,分析业务场景和竞品框架,确定FS的最小元素,整理和归类自己的组件框架。
最终B+Design组件框架主要分为八大板块,分别为:基础样式、通用、布局、导航、数据录入、数据展示、反馈、其他,共50+组件;
我们是如何搭建企业级B端设计规范的?
 
 
 
第三步:设计组件和规范指南
针对已梳理好的框架展开组件设计工作,同时为每个组件编写相应的规范指南,为使用者提供场景参考。
1、设计组件
组件设计是设计规范中最核心,工作量最大的一个环节。我们可以将它拆解成几个部分,先做出基础组件,再基于基础组件和业务需求抽象设计业务组件,最后抽象成页面模板。
我们是如何搭建企业级B端设计规范的?
 
 
 
  •  
    基础组件
说到基础组件,这就是前面所提到的原子化思维,在进行设计系统的构建时,我们期望达到这样一种效果:当对任何一个原子进行改动时,所有依赖于该原子的部件都能够全部自动更新。唯有满足这一条件,设计系统所设想的提升效率、解放生产力的目标才能真正得以实现。
我们是如何搭建企业级B端设计规范的?
 
 
我们是如何搭建企业级B端设计规范的?
 
 
我们是如何搭建企业级B端设计规范的?
 
 
我们是如何搭建企业级B端设计规范的?
 
 
 
 
  •  
    业务组件
在构建完基础组件后,可以根据业务需求,将部门内使用频率较高的组件进行评估,抽象成业务组件。
例如我们用的比较多的就是人员选择器、附件下载、文本编辑器等等...
我们是如何搭建企业级B端设计规范的?
 
 
  •  
    页面模板
完成基础组件和业务组件的构建工作后,我们可以依照全局说明,通过组件搭建页面模板。页面模板不仅能够切实提升组件的使用效率,而且能提供出色的组件使用示范作用,增进设计说明和组件的结合。
 
我们是如何搭建企业级B端设计规范的?
 
 
我们是如何搭建企业级B端设计规范的?
 
 
我们是如何搭建企业级B端设计规范的?
 
 
我们是如何搭建企业级B端设计规范的?
 
 
我们是如何搭建企业级B端设计规范的?
 
 
 
2、规范指南
在后台设计体系中,“规范指南”是一套为了确保设计的一致性、可用性和可维护性而制定的规则和指导原则。将所有的规范内容整理成详细的文档,配以示例和说明,方便团队成员查阅和参考,此步骤也工作量巨大。主要分为七大模块:
我们是如何搭建企业级B端设计规范的?
 
 
我们是如何搭建企业级B端设计规范的?
 
 
 
 
第四步:效果验证
“B+Design System”建立成功后在"多个业务系统"中进行应用,通过实际业务反馈来进行效果验证。
我们是如何搭建企业级B端设计规范的?
 
 
 
四、升级迭代机制
一个统一的设计语言不应该仅仅是一组静态规则和单个组件构成成的,它应该是一个不断发展的生态系统。需要我们在产品实践中不断优化、迭代,让组件更加贴合场景,更好的服务业务。
我们是如何搭建企业级B端设计规范的?
 
 
以上就是我们公司内部构建整个设计体系的全过程啦~~~~~
 
在完成设计规范的构建后,我们联合了产品经理和前端工程师,帮助每个环节的人员快速搭建产出物。
 
对于产品经理
:我们帮助产品搭建了一套Axure元件库,该元件库与设计组件库一样,可以快速搭建原型,提高了产品的工作效率,与设计师、开发的沟通也更加顺畅。甚至对于简单的页面产品可以自己直接出原型给开发,开发直接沿用写好了的组件库。
 
对于前端
:辅助前端建立前端组件库,这样减少了设计走查的问题,对于以前各种样式问题需要调整,现在基本都是写好了的组件,可以有更多时间去写交互和提高系统的性能。
 
 
 


作者:设计恐慌症
链接:https://www.zcool.com.cn/article/ZMTYyNzI5Ng==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

小程序尺寸,一篇搞定

天宇 系统UI设计文章及欣赏

很多工作了几年的设计师依然搞不懂小程序画布创建依据和适配逻辑,所以今天针对这个问题,做一篇简单的分享,来对这种基础知识点做个扫盲。
首先小程序之所以叫小程序,因为它不是在手机、电脑系统上运行的应用(Native),而是在微信里运行的应用。也就是说,微信本身有套系统,而小程序的设计要遵循的是微信的设计规范,而不是苹果、安卓、微软的设计规范。
小程序尺寸,一篇搞定
 
 
这么做的原因是为了让开发者只用一套代码,就能在所有平台、系统上的微信运行,并展示出相同的效果。这个逻辑和网页类似,不管你在什么平台还是系统只要安装了浏览器,就可以读取相同的网页,而不用针对不同平台写一套全新的代码出来。
虽然小程序主要在移动端运行,它的设计理念会尽量贴合原生应用,多数控件、组件、交互的设计方式一样,但系统不同必然会导致细节上的差异,而界面的画布就是最大的问题。
首先小程序官方创建了一套自己的语言,WXML、WXSS、WXS,分别对应网页前端的 HTML、CSS、JavaScript。控制尺寸、样式的语言是 WXSS,而它的使用的尺寸单位是 rpx。
rpx 不是厘米、像素这样的物理单位,也不是移动端会用的 pt、dp、sp 这样的矢量单位,而是一个很特殊的“
变种单位
”。
微信系统在渲染界面时,固定了移动端视图窗口为 750rpx。不管你在苹果还是安卓系统,用的是无刘海小屏 iPhoneSE 还是新款 iPhone15 破儿麦克斯,都使用 750rpx 渲染。
换句话说,
rpx 的长度即 —— 屏幕的 1/750
这是个比较抽象的概念,移动端使用矢量单位,是为了在屏幕变大的同时扩大画布尺寸,提升显示容量,所以有了适配原则,组件的应用自动布局适应空间的变化。
但是小程序不一样,微信采用了最简单粗暴的模式 —— 等比缩放。在不同尺寸的屏幕中,直接缩放内容来填满窗口。比如下面是使用 iPhone13、iPhone15promax、Mac 端截图的同一个小程序界面。
小程序尺寸,一篇搞定
 
 
如果我们把它们缩放成一样的宽相互叠加,会发现元素大小是一样的(Mac 端字体和移动端有差异,所以有一定宽度差异,但是字号相同)。
小程序尺寸,一篇搞定
 
 
但正常的移动端应用,使用自动布局而不是等比放大,覆盖到一起是不会重叠的,比如下面 13 和 15promax 中同一张 APP 界面截图的叠加。
小程序尺寸,一篇搞定
 
 
所以,微信的画布就是 750rpx 宽适配到所有移动端屏幕,但高度会根据比例调整,毕竟不同屏幕的长宽比不一样。
小程序尺寸,一篇搞定
 
 
再进一步分析,750 这个数值哪来的呢?一看就知道是 iPhone 早期和低端设备的实际分辨率,即 375 的 2x 数值。虽然现在移动端设计已经从 375 过渡到 390 再更新到目前的 393,但小程序依旧使用375。
原因和之前响应式分享中提到的一样 ——
往大适配容易,往小适配难
现在市场上还保留数量可观的 375 设备,以微信的角色和体量就势必要兼容它们。既然兼容它们,那
设计和渲染就以兼容的最小画布为准向上放大
,而没有向下缩小的顾虑,这可以最大保证兼容性和可用性。
用 375 规格的设备去创建画布是没有问题的,不管你是使用 iPhone SE 还是 iPhone Mini 为标准都可以。
小程序尺寸,一篇搞定
 
 
因为系统用的 750rpx,所以原则上使用 750*1334 或 750*1624 画布创建最佳,但实际情况还是有出路。因为官方组件库用的是 375 宽....
小程序尺寸,一篇搞定
 
 
这又涉及到现实情况的考虑,毕竟设计是设计,开发是开发。在设计过程中我们往往会用其它应用设计好的素材,尤其一些大厂应用,小程序就是 APP 的翻版。如果把画布做成 750 意味着素材得全部重调一遍,和重做差不多,而且参数和设计师习惯不同,会出很多错误。
所以,正常创建小程序的画布使用常规的 375 画布即可。而在进入开发阶段,程序员可以直接在即时、 Figma、蓝湖的标注设置中使用 2x 的倍率,既可以获得 rpx 的具体数值。
这是个隐患问题,建议尽量在设计前和你们的前端程序员核对一遍懂不懂的如何换算数值,创建 375 是否有阻力,如果一定强调要用 750,你再自己展开后续的对线,谁赢了听谁的……
除了标准移动端画布外,还有个非常鬼畜的地方,就是组件库内有个 Half-screen Dialog,里面的组件用的是 414 宽。这数值是 iPhone 8 Plus/ XS Max  的规格,总不能还特意去支持这些古代大屏吧?
414 是小程序在电脑端启动时使用的规格,未经适配的小程序在电脑端的窗口就是固定的 414*736 。
小程序尺寸,一篇搞定
 
 
小程序尺寸,一篇搞定
 
 
用 736 这个高也和兼容小屏幕有关就不展开了,且小程序在电脑端也可以使用响应式的适配,只是这个需求实在太少,所以也不在这里多做介绍,感兴趣的可以自己研究官方规范。
 
最后,我自己当 AI 做总结
  •  
    小程序使用 rpx 作为宽度单位
  •  
    移动端小程序使用 750rpx 渲染
  •  
    rpx 长度是移动端屏幕的 1/750
  •  
    小程序适配不同手机屏幕的方式是根据宽度等比缩放
  •  
    创建小程序设计画布使用 375*667 或 375*812
  •  
    小程序在电脑端上会放大成 414*736
  •  
    电脑端调用的原生组件和移动端不同


作者:酸梅干超人
链接:https://www.zcool.com.cn/article/ZMTYzOTY3Ng==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

一篇文章带你秒懂图标设计

天宇 B端ui设计文章及欣赏

从1973年第一代图形用户界面的呱呱落地到今天百家争鸣,图形用户界面竟然已经走过了50年的发展历程,更神奇的是,原来UI设计这个职业的起源也是因图标的起源而起,后来图标成了UI设计中最重要的视觉元素之一,接下来,我们一起走进图标的世界,了解它神秘背后的故事。
 
 
一篇文章带你秒懂图标设计
 
 
 
目录
一、 图标的起源
二、 图标设计的定义
三、 图标的种类
四、 图标设计8大原则
五、 图标的6大作用
六、 提升图标设计的4个小技巧
七、 5个图标网站推荐
八、图标的命名规范
 
 
 
一、图标的起源
在计算机发展的早期,用户界面主要是基于命令行的,由字母和数字组成,操作复杂且对普通用户不友好,用户需要记住大量的命令和参数才能使用计算机系统。
 
随着计算机技术的发展,为了使计算机更易于使用和理解,程序员开始开发图形化的元素来代表各种操作和功能,图标概念由此诞生。最初的目的是帮助新手用户能够更方便地组织文件和执行任务,而无需记住复杂的命令。
 
 
1.施乐公司的开创性工作
1973年,美国施乐公司推出了第一批真正意义上具有图形用户界面的个人电脑——Xerox Alto。虽然这款电脑仅生产了约 2000 台,但它为后来的计算机图形界面发展奠定了基础。它的界面中已经出现了一些简单的图标,如垃圾桶、计算器、打印机、文件和文件夹等,这些图标成为了后来图标设计的雏形。
一篇文章带你秒懂图标设计
 
 
 
 
2.苹果公司的推动
1979年,史蒂夫·乔布斯参观了施乐公司的原型机后,深受启发,决定开发自己的图形界面计算机。1983 年,苹果公司推出了Apple Lisa,这是苹果首台图形界面计算机,其界面中的图标设计得到了进一步的发展。
在这一时期,现代图标设计之母苏珊·卡尔担任苹果的创意总监,她设计的像素风格图标简洁、清晰、易于理解,具有很高的视觉平衡性,即使在今天看来也显得活泼有趣。
 
一篇文章带你秒懂图标设计
 
 
 
 
3.微软的跟进与发展
1985年,微软发布了 Windows 1.0操作系统,这是微软在图形用户界面领域的重要尝试。该系统中的图标设计也借鉴了苹果的一些理念,但也有自己的特点。随着 Windows 操作系统的不断发展和普及,图标设计也逐渐成为了用户界面设计中不可或缺的一部分。
 
一篇文章带你秒懂图标设计
 
 
 
 
 
二、图标设计的定义?
图标设计是一种设计活动,主要是创造出用于代表物体、动作、概念等各种元素的图形符号。
 
这些图形符号具有简洁性,让人能快速识别。比如手机桌面上的微信图标,用两个对话气泡的简单图案就代表了这个软件,让人一眼就能明白。图标设计在很多领域都有应用,像软件界面、网站、移动应用等,能够为用户提供视觉引导,方便用户操作。
 
一篇文章带你秒懂图标设计
 
 
 
 
 
三、图标的种类
图标在提升产品气质上起着不可估量的地位,在界面中往往起着画龙点睛的作用,无法想象在一个产品中,没有图标,界面会显得多么的无聊和乏味,但是图标也不能总用一种形式的图标,这样也会百看让人生厌,因此也就衍生了图标的多样性,以下是我整理的常见图标类型:
 
1、从视觉表现上,有以下12大类图标
一篇文章带你秒懂图标设计
 
 
 
 
2、从功能上,有以下6大类图标
❶工具图标
工具图标在B端项目中应用很广泛,几乎每个组件中都会包含这类图标;比方说腾讯文档上方的文档编辑图标就是属于这种类型,它的装饰性很小,更多是功能的承载。
 
一篇文章带你秒懂图标设计
 
 
 
 
❷装饰图标
在一些软件产品中,会重点强调品牌、情感化设计,大量启用3D化的装饰图标来提升界面的质感。
比方说腾讯电脑管家下面的这个界面设计,它就运用了大量具有装饰性的图标来传递信息表达品牌,并且中央还采用腾讯电脑管家的IP形象作为切入点,萌萌的形象无形中拉近了与受众之间的距离。
 
一篇文章带你秒懂图标设计
 
 
 
 
❸启动图标
在项目中,当用户想表达品牌时,经常会把LOGO图标做成动态图,来更好的传递品牌理念,比方说联想电脑管家,在启动页时,就运用了动态启动图标,同时下面还附带了一个slogan的文字动效,很好的向用户传递了安全的理念。
 
一篇文章带你秒懂图标设计
 
 
 
 
❹ 进程提示图标
在软件界面中,经常也需要进程的提示,这时候图标就可以起到这样的作用,比方说腾讯电脑管家在清理垃圾时,图标里面的风扇就一直在转,寓意当前清理工作正在进行中。
 
一篇文章带你秒懂图标设计
 
 
 
 
❺ 状态提示图标
软件在运行过程中难免会出现bug或者内容为空的时候,这时候状态提示图标就尤为重要,可以大大减轻人们的焦虑情绪。
 
一篇文章带你秒懂图标设计
 
 
 
 
❻ 增加界面趣味性的图标
图标不仅在理解和使用上给人们提效了,而且有时添加动效的图标还能给人带来丝丝惊喜和愉悦。
比方说联想的这个动态加载图标,看着就很有趣,让人忍不住多欣赏一下。
 
一篇文章带你秒懂图标设计
 
 
 
 
 
四、图标设计8大原则
虽然现在AI盛行,很多酷炫的效果可以用AI实现,但是一些让图标看起来更加专业精致、耐看的秘密我们还是需要知道的,了解这些设计原则,我们可以事半功倍,当AI生产有偏差时,我们自己可以优化、修复和调整。
 
 
1、大小统一
图标大小统一,就是一组图标放置在一起,图标大小要看起来差不多,不能忽大忽小,比方说这组图标的第三个图标,电脑图标明显过高,跟其他图标放在一起就显得不是那么的协调美观和统一。
一篇文章带你秒懂图标设计
 
 
在大小统一这方面,我们记得就是几何图形它们有视觉差,有的时候并不是说尺寸一样,大小就一样了,比方说下面这组图形,左边的这组它们高度一样,可是看起来大小并不太一样,明显中间的三角形显得小;右边的这组,三角形比左右两边的都要高,可是它们放在一起看起来大小就是差不多的,这就是几何图形带来的视觉差,就是我们在做图的时候,要记得多去感受,设计中的美很多不是用1+1=2能解释清楚的,它就是一种感受,放下心中的浮躁,我们还是能感受到它们之间的区别,这种美也没那么玄乎,只要用心,一定可以做出大小一致的图标。
 
 
一篇文章带你秒懂图标设计
 
 
 
 
 
 
2、圆角统一
圆角统一,就是图标之间有相同造型,然后又都有圆角的,那么他们就要保持相同的圆角曲度,比方说下面这组图标,图标的外形都是正方形且它们都带有圆角,可是它们的圆角曲度却明显不一样,这样就看起了不够规范和专业。
一篇文章带你秒懂图标设计
 
 
 
 
3、风格统一
界面中同样功能的图标,样式和风格需要保持一致,比方说这组图标样式,风格就保持着高度的一致,都是用的玻璃质感的磨砂材质。
一篇文章带你秒懂图标设计
 
 
 
 
4、角度统一
这组扁平化图标,在右边相似的角度都叠加了一个小色块,增加了图标的层次感,相同的角度也增加了图标的一致性和系列感。
 
一篇文章带你秒懂图标设计
 
 
 
 
5、粗细统一
图标的粗细要统一,这样图标就会看起来比较精致,比方说下面的这组图标,图标外框线都是用的3px,图标里面的线都是用的2px,图标的粗细都保持一样的粗细规律,这样的图标看着也是同样的美观和一致。
一篇文章带你秒懂图标设计
 
 
 
 
6、疏密统一
下面是一组类似于插画风格的图标,图标的风格是布线比较密集饱满,而三个图标都遵循了这样的原则,看起来出奇的统一,所以它们看起来像是一组成套图标。
一篇文章带你秒懂图标设计
 
 
 
 
7、透视统一
当设计的图标是立体时,要注意它们的透视要统一,就像下面的这组2.5D图标,它们的设计透视就保持着高度的一致。
一篇文章带你秒懂图标设计
 
 
 
8、易识别
图标的优劣首先取决于其能否让用户一目了然地理解其代表的意义,这是很重要的图标设计原则。
下面的这组手机主题图标,识别性就非常的高,简洁且好理解。
一篇文章带你秒懂图标设计
 
 
 
 
 
五、图标的6大作用
图标在界面设计中扮演着至关重要的角色,它们遍布于应用程序的各个角落。无论是导航栏、工具栏还是标签栏,亦或是首页、详情页、个人中心页,功能图标都随处可见。图标的主要作用在于传达信息,相比文字,它们能更直接地传递概念,并且能够为用户的视觉体验增添乐趣。
 
1、提升界面的使用效率
功能图标常以简洁的图形呈现,它们便于用户识别和记忆。这种设计让用户能够迅速定位到所需的功能,无需耗费时间阅读文字说明或浏览冗长的菜单选项,大大提升了界面的使用效率。
 
华为云的这个界面,文字信息很多,因为有了图标的存在,人们寻找起来特别高效,能高效定位到想要的信息。
 
一篇文章带你秒懂图标设计
 
 
 
 
2、增加用户的满意度
图标不仅可以提升界面使用效率,还能提升用户的体感和满意度,精美的图标让人看着都是赏心悦目的,就像我们在大街上看到一个美女,都忍不住多驻留一伙一样。
 
华为云这组精美的图标动效就给了我很大的视觉享受,图标设计精致,配色舒适,还有动效,给足了用户满足感。
 
一篇文章带你秒懂图标设计
 
 
 
 
3、减少人们认知的成本
图标很多的造型都来源于生活,来源于我们熟悉的事物,在界面中运用我们熟悉的图形会大大降低人们的认知成本,也会让更多人产生共鸣,它的传达作用不受语言和国界的束缚,是一种高效的界面表达语言。
 
华为云的这组图标就是运用了人们日常生活中非常熟悉的元素,共鸣感很强,人们学习和理解的成本很低。
 
一篇文章带你秒懂图标设计
 
 
 
 
4.提升品牌形象
仔细观察会发现,在生活中有很多的软件产品,会把企业的LOGO融入到日常产品的图标设计中,大大提升了品牌的一个曝光度。
 
腾讯云就有这样的小心思,它会把腾讯云LOGO融入到banner图标设计中,传递了信息,同时也加强了品牌的曝光。
 
一篇文章带你秒懂图标设计
 
 
 
 
5、图标可以增加界面的丰富度
有图标的界面,页面看起来丰富度更高,层次感更强,信息表达上也会更加的清晰整洁。
 
360AI办公这个界面之所以看起来这么丰富,很大原因是在于图标的应用,界面中有大图标、小型面图标,还有线性小图标,有对比,整个页面就看起来丰盈了不少。
 
一篇文章带你秒懂图标设计
 
 
 
 
6、减少界面的枯燥感
千篇一律的文字,难免会产生枯燥感,让人不愿多驻留;图标多彩的配色以及Q萌的造型会让人心生愉悦。
佐糖的这个界面,若不是有图标的润色,光只有功能点和文字介绍,估计会乏味不少,但是有了多彩图标的加入,瞬间氛围感都热闹了不少。
 
一篇文章带你秒懂图标设计
 
 
 
 
 
六、提升图标设计的4个小技巧
1、大量临摹,刻意练习
任何一项技能的获得,最开始都离不开临摹,作为刚接触UI设计的职场新人,可以先从临摹入手,先临摹简单的,然后循序渐进,临摹难度大点的,这样图标设计能力也会慢慢提升。
 
一篇文章带你秒懂图标设计
 
 
 
 
2、多积累好的样本
想要绘制好看的图标,首先要见过好看的图标,所以我们日常要养成多收集好图标好设计的习惯,这样当面临新的需求设计时,也不至于手忙脚乱,不知如何下手。
一篇文章带你秒懂图标设计
 
 
 
 
3、学会分析
看到好看的图标设计时,我们要学会分析,这组图标好,它好在哪,哪里打动了你,你分析了这些,你自己在设计的时候也会不自觉的运用到其中的智慧和思路,这样我们就可以随时原创出符合自己需求的图标设计来。
一篇文章带你秒懂图标设计
 
 
 
 
4、明确目标与受众
目标受众不同,他们对图形的期望也会不一样,比方说在设计儿童产品界面和B端产品界面时,所用的颜色和形状都是有考究的。
 
儿童类产品的图标设计,形状会比较圆润,色彩也比较多彩;但是B端类产品的图标设计用色就会很克制,形状也不会过于圆润。
一篇文章带你秒懂图标设计
 
 
 
 
 
七、5个图标网站推荐
1、Iconfont
(https://www.iconfont.cn/)
iconfont是阿里巴巴的图标库,应该也是受众最多的一个图标下载网站,给我们平时工作提效不少,造福了不少的设计师。
一篇文章带你秒懂图标设计
 
 
 
 
2、IconPark
(https://iconpark.oceanengine.com/)
IconPark是字节跳动旗下的一款图标下载网站,它可以在线把一个图标实现多种风格的切换,线性、面线、线面结合,并且线的粗细大小可以调节,非常的方便。
一篇文章带你秒懂图标设计
 
 
 
 
3、Ikonate
(
https://ikonate.com/
)
Ikonate是一款可以在线编辑的图标网站,涵盖了常用的一些图标,可以调节线条的粗细和大小,导出的格式是SVG。
一篇文章带你秒懂图标设计
 
 
 
 
4、Iconfinder
(https://www.iconfinder.com)
Iconfinder的优点,我觉得是造型够丰富,满足你有时候无法脑补的痛点。
一篇文章带你秒懂图标设计
 
 
 
 
5、Iconduck
(https://iconduck.com/)
Iconduck的优点是有273,858个免费的图标库和插画库供大家选择,储备够丰富。
一篇文章带你秒懂图标设计
 
 
 
 
 
八、图标的命名规范
图标一般有四种状态,正常normal (nor)、高亮highlight (hig)、选中selected (sel)、不可用disable (dis)四种状态,一个好的命名习惯会给自己的合作搭档带来很好的体验,通常在写界面的时候,前端都是用英文对元素进行命名的,这里我列举一下我经常合作同事的一个命名规范,供大家参考:
模块-类别-功能-状态
例如:Nav_button_message_sel
 
一篇文章带你秒懂图标设计
 
 
 
 
 
总结:
在深入探索了图标设计的丰富世界之后,我相信大家未来能够根据不同的场合挑选出恰当的图标风格和样式。通过持续的总结和归纳,我对图标设计的理解也变得更加深刻。虽然这份总结可能还有待完善之处,请大家多多海涵,期待在下一篇文章中再次与大家相见。
 
 
 
 
 


作者:姝斐suphie
链接:https://www.zcool.com.cn/article/ZMTY0MDI2MA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档