-
想让设计更吸引人?这7种调色板案例可以帮助你!
Halo,这里是设计夹,今天为大家分享的是「调色板设计」。 创建调色板对于设计过程至关重要,调色板有助于保持系统颜色的一致性、划分层次结构和理解操作类型。 现在网上有很多调色板生成工具,例如 Materia design、Arco design,确定主色后,这些调色板生成工具会生成完整的色板。 在使用这些工具前,我们要先了解有哪些常用的调色板分类,不同类型的色板会产生什么样的效果,再合理借助工具帮…- 5
- 10
- 44
-
用超多案例,帮你掌握 Symbol 的自适应封装原理
本文聚焦于 sketch 中 symbol 组件库自适应效果的封装,讲解封装目的、自适应原理、自适应封装思路等,并实例演示部分组件的自适应封装思路及操作步骤。通过自适应封装,可以实现组件任意拉伸不变形、更改组件字符内容自适应推移,以及减少控件(设为无控件)的自适应推移效果,从而使设计师使用组件库更便捷,产出页面更高效。 文章篇幅较长,会分篇章逐一展开。有关 symbol 替换的封装思路,例如切换组…- 5
- 5
- 31
-
设计系统搭建全流程:开始前的准备工作
上一篇文章我们主要讲的是设计系统的必要性,接下来我将会继续用后续的文章详细讲解怎么搭建设计系统,希望可以帮助到有需要的人。 上篇回顾: 设计系统搭建全流程:认识设计系统 设计系统这个词,是近些年的一个热门话题,在初期的讨论关注点主要聚焦在是否有必要搭建? 阅读文章 > 在开始之前,我需要先解释一个问题: 为什么要制作自己的设计系统 很多团队一提到搭建设计系统,就会有人说,网上有很多公开的设计…- 40
- 45
- 118
-
实战案例解析!如何用4个步骤引导用户操作提高转化率?
前段时间负责一个运营活动的改版工作,该活动的设定是通过设置目标奖励,提升用户的购买力。但是通过该模块的数据反馈发现,活动的用户参与度与购买转化率都不是很理想。结合数据与相关的用户调研发现,导致这个结果的原因主要概括为两点: 活动曝光弱,用户不清楚活动内容,很少主动点击 大部分用户购买力远远低于设置的目标,导致“心有余而力不足” 更多引导设计干货: 新用户引导流程设计,需要做好这12个细节! 编者按…- 40
- 40
- 98
-
腾讯出品!3个章节帮你快速入门C4D柔体动力学
导语 “一个能自我膨胀的石头、一个能被随意挤压变形的坚硬钻石、一堆失重漂浮在空中的玻璃球、一片随风飘动的柔软玻璃。或者是任何你能想到的奇幻场景…” 所有这些奇妙幻想,柔体动力学将全部满足。接下来本文将带你了解这个充满创造力的奇幻世界。 腾讯出品的C4D自学教程: 从入门到实战!腾讯高手总结的C4D自学必备指南 导语 近年三维表现已经越来越多的融入到各种商业设计当中,在电商、品牌、UI、影视等各个领…- 40
- 40
- 101
-
用麦当劳的案例,帮新手快速了解设计组件
前言 麦当劳是我们常见的全球大型跨国连锁餐厅,每次在回家路上都会经过几家麦当劳餐厅,但是通过观察发现麦当劳内进进出出的工作人员普遍年纪都不大,甚至有些餐厅除了主管以外其他大多数人都是大学生兼职,于是便产生了一些思考:他们是怎么做到新的店职员只需要经过简单的培训就直接工作以及怎么做到这么多门店口味统一。后续通过进入内部打探了一段时间后发现里面的食物基本都是通过使用半成品通过规定的烹饪时间和方式加工后…- 40
- 45
- 106
-
被Notion收购的下一代日历Cron ,有哪些值得关注的设计亮点?
一、导语 号称为专业人士和团队打造的下一代日历 Cron 最近正式开放注册,不再需要申请加入候补。作为 Cron 的不完全粉丝,我觉得是时候写篇文章来安利一下它了! Cron 是一款体量不大的免费日历工具,界面类似 Apple Calendar。如果你用过老牌的日历应用 Fantastical,应该不会觉得 Cron 有什么过人之处,但它在去年 6 月份被 Notion 低调收购,且 Figma …- 40
- 40
- 102
-
看懂了!第一次见到把响应式布局讲得这么清晰的!
当拉伸钉钉 PC 客户端窗体的时候,内容会像流水一样随着窗体的大小改变布局或形状。窗体大小的改变带来的内容布局的调整对于用户来说是无感知的,这种丝滑自然的体验得益于钉钉 PC 客户端响应式的适配方案。 流水一样的响应式设计 下面我们以钉钉 PC 客户端为例,来解析它的适配方案,以便我们设计师能主动地把控产品在各种设备上的良好体验。 更多响应式干货: 用一篇文章,帮你看懂网页响应式布局原理 今天分享…- 35
- 35
- 96
-
如何设计报错信息?顶尖权威机构总结了 12 条原则!
编者按:用户和UI界面交互的时候,出现错误或者犯错风险的时候,系统通常需要发出报错和提醒信息,这种信息的交互和 UX 设计策略有哪些讲究?今天这篇文章来自UX领域权威机构 NNGroup,文章阐述了设计报错信息的 12 个原则和技巧,以下是正文: 通过高可见性、建设性的沟通方式,以及设计优秀的报错信息来帮助用户了解情况,维持良好的用户体验。 30 多年前,Jakob Nielsen 曾经提出了著…- 35
- 35
- 97
-
如何做好外卖平台的搜索功能?我总结了四大原则
前沿: 当代年轻人的生活节奏越来越快,面对海量的美食资讯和推送,难免会不知所措,每到饭点都不知道吃什么。本文将深度剖析外卖平台的搜索功能,从中发现设计师为用户的吃饭选择困难症花费了多少心血,为广大设计师总结出极致的搜索体验的设计原则,进一步留住用户的心。 更多搜索干货: 从3个阶段,解析B端搜索功能设计 引言 搜索作为最常用的功能,在产品设计中使用率高、应用面广。 阅读文章 > 一、搜索的意…- 30
- 30
- 76
-
超详细!写给新人的 Lottie 快速上手指南(下)
前言 对于设计师而言,在使用 lottie 的过程中,有两个难点:第一是导出设置项,第二是功能支持列表。是否能熟练运用 lottie 来做动效落地,主要取决于这两部分。在上一篇,花了很多篇幅来为大家介绍 bodymovin(5.9.6)的相关设置项。掌握设置项是玩转 lottie 的基础,那么在这篇,除了功能支持列表,还会为大家介绍更高级的使用方法以及相关注意事项。 超详细!写给新人的 Lotti…- 30
- 30
- 88
-
10个大厂产品细节剖析,看看高手是如何做设计的!
随着产品设计越来越成熟,呈现出来的优秀设计方案比比皆是,如何设计出差异化的方案变得至关重要。打破常规的设计才能在同质化的设计中脱颖而出,带给用户更好的差异化体验。 近期黑马哥在体验产品时,发现了一些突破常规的设计表现形式,希望这些优秀的案例可以带给大家更多设计灵感。 往期灵感: 10个出行产品细节剖析,看看高手是如何做设计的! 五一小长假即将到来,相信大家都已经非常期待啦! 阅读文章 > 一…- 30
- 35
- 96
-
4000字长文!帮你掌握高级设计师都会的原子设计理论
原子设计理论是一种分层思考的思维模式,能很好的指导我们去落地设计系统,帮助我们提升对产品设计整体把控的能力。 前言 原子设计理论是当下比较火热也非常实用的设计理念,它是一种分层思考的思维模式,能很好的指导我们去落地设计系统,帮助我们提升对产品设计整体把控的能力。原子设计是指导设计实践的基础理论,并非什么高大上的原则,它套用了英国化学家/物理学家约翰·道尔顿提出的“物质的最小单位是原子”这一理论,即…- 25
- 25
- 72
-
B端设计基础:帮你快速掌握面包屑导航
面包屑导航是从网站技术兴起就伴随出现的老组件了,至今还在使用,为用户提供了许多好处,而对设计几乎没有任何成本,前辈们也做了大量的研究和实践,证明是可行的。所以这次分析面包屑导航设计,希望大家阅读过后有助于展开项目设计并对设计系统更深一步地了解。 更多导航设计干货: 如何做好B端产品的导航栏设计?来看高手的5000字总结! 编辑导读:导航栏是用户对产品架构了解的第一途径,是作为产品各个功能之间的桥梁…- 25
- 28
- 83
-
7000字干货!电动汽车仪表盘设计指南
当一辆电动汽车驶来时,人们最先注意到的可能是它那极具未来感的外观设计。但是,对于乘客来说,车内的仪表盘设计同样也是他们最先接触到的部分。在这个数字化时代,电动汽车的仪表盘设计也越来越成为了车辆设计的亮点之一。那么,让我们一起去看看电动汽车仪表盘设计是如何在美学和实用性之间找到平衡,并为乘客提供愉悦的视觉体验的吧! 往期车载设计干货: 6000字干货!四大章节掌握HMI车载设计指南(进阶篇) HMI…- 25
- 35
- 86
-
10个产品细节剖析,看看高手是如何做设计的!
对于产品设计师来说,在同质化的环境中我们需要具备突破创意的思维,这样才能输出差异化的设计方案。而创意离不开优秀作品的灵感启发,发现有意思的设计细节也能提高我们的设计思维。 今天黑马哥将会继续为大家带来一些优秀的设计细节,我们一起来反思一下,这样的设计想法为啥自己没有想到呢? 往期回顾: 10个产品细节剖析,看看高手是如何做设计的! 设计做到极致注重的就是对于细节的把控力,大厂的设计师之所以比较优秀…- 25
- 30
- 72
-
想让你的界面更精致?先掌握这8个设计细节!
哈喽,这里是设计夹,今天为大家分享的是「界面设计要素」。 当下大多数界面设计类软件都是以矢量图的方式工作。通过调整参数来定义图形的大小,并且在不降低质量的情况下对图形进行拉伸和放大。 在进行界面设计时,我们需要生成出各种尺寸的矩形、圆形等对象,规定这些对象的尺寸和样式,并对这些对象进行移动,将它们放到合适的位置上。 很多基础知识可能看起来很简单,容易被忽视。但随着设计经验越来越多,更建议大家牢固系…- 25
- 35
- 94
-
万字干货!帮你完整掌握爆红的Linear风设计风格
一、什么是 Linear 风设计? 依旧是多图长文一篇,请酌情阅读。 设计师都是视觉动物,废话不多说,上图: 这是指一种在大面积暗色背景下,使用渐变、模糊、动态流光、极细描边、微噪点、外发光以及庄重的无衬线字体,外加流畅克制的微动效来组织和修饰界面元素的网页设计风格。 其独特又神秘的锋利质感,就是为了体现界面所承载产品的专业感。这种风格早已在国外设计圈流行多时,很多产品也都纷纷推出了 Linear…- 25
- 30
- 100
-
UI设计组件科普!Tab bars设计方式详解
一、组件介绍 Tab bars,是从属于 iOS 所规定的几种 App 全局组件之一,绝大多数 App 都遵从于 iOS 的交互规范,使用 Tab bars 来划分最顶层的功能页面,这种广泛性也反过来塑造了用户对不同 App 统一的使用习惯。 往期组件回顾: 新手科普!4个方面帮你快速熟悉UI组件中的瀑布流 编者按:本文从组件介绍、使用场景、设计要点、样式拓展4个方面,帮你快速熟悉UI组件中的瀑布…- 25
- 25
- 65
-
标签页和面包屑该如何用?来看高手的分析!
面包屑(Breadcrumb)和标签页(Tabs)是 B 端产品中常用的两个组件。最近有同学问我: “带有下拉菜单的面包屑应该怎么使用呢?” “标签页可以当作面包屑来使用么?” 本文就来详细分析下这三者的区别和联系,帮助你做好应用。 更多组件干货: UI必看!帮你快速掌握店铺卡片组件的设计方式 一、组建介绍 说起店铺卡片,大家的第一反应肯定是“那不是和商品卡片差不多吗? 阅读文章 > 一、面…- 25
- 30
- 98
-
超全面!写给入门新手的运营插画 Banner 设计指南(二)
本篇内容是围绕插画 Banner 三个层次中的画面元素层的延展内容。 往期回顾:《超全面!写给入门新手的运营插画 Banner 设计指南(一)》 在拿到设计需求,没有什么想法的时候,可以参考以下画面元素的选择思路,找到适合的设计方向,提高设计效率。 主体元素 主体元素是根据设计需求重点要突出什么来选择的。 主体元素的选择参考方向:人物、人物+场景、关键场景、关键物品、超现实、文字、特有形式套用。人…- 25
- 25
- 76
-
详情页设计不够出彩,该如何提升?
从事电商方面的设计师,详情页设计可以说是必修课。好的详情页会给带给用户更流畅的视觉体验、更直观的产品信息、亮点等等,也有助于提升交易的达成率。正是如此,所以很多商家不惜重金请设计师为其打造爆款产品的详情页,由此可见详情页在电商设计中的重要程度。本期和大家一起分析总结:如何把详情页做得足够出彩,详情页做不好需要从哪些方面进行提升? 构图形式 目前被认可的一种详情页设计形式是分屏式,就是按照手机端设计…- 25
- 25
- 80
-
从6个方面,帮你全面总结复选框类型+用法
Halo,这里是设计夹,今天为大家分享的是「复选框设计」。 ☑️复选框(Checkbox)是设计中常用到的组件,在B端表单设计中用得尤其频繁。看起来虽然很简单,但复选框的尺寸、颜色和位置仍值得我们仔细考虑,以确保让用户更容易理解和使用。 我们首先来介绍最基础的复选框样式,其次分析复选框+描述/icon/数值/图像等多种类型的复选框形式,最后总结设计复选框时的五点注意事项,全面掌握复选框的设计~ 更…- 20
- 30
- 78
-
6大章节18张图例!带你轻松了解B端数据图表(一)
工作中 B 端数据图表使用频率不多,但真的接到需求时,自己也会询问周围同事或网站,图表的类型有哪些?由哪些元素组成、每一类型的图表应该对应的场景有哪些?为了设计图表时得心应手,今天我们先一起探究下有关图表的基础知识。 本文以数据图表的定义、优势、构成、分类、应用场景罗列及可让大家工作效率翻倍的网站和插件这六个部分,作为本文对图表的初步了解,后续我们将以系列文章形式挖掘“数据图表”这座宝藏。既然发现…- 20
- 20
- 64

























