阿超 > spark-joy

spark-joy

2024-12-09

前端

死非生的对立面，而作为生的一部分永存。——《挪威的森林》

✨😂 2000 多种方法为您的产品增添设计风格、用户满意度和奇思妙想。

https://github.com/swyxio/spark-joy/

图片

为您的产品添加设计风格、用户满意度和奇思妙想的简单方法！

_Spark Joy 理念在我的书中有更详细的解释（https://learninpublic.org/），如果您想探索这种方法如何应用于设计实用程序之外的其他领域，请查看它。_

目录

保持简单：https://jgthms.com/web-design-in-4-minutes/

CSS/UI 模板

HTML/CSS 漂亮的模板

更大的学习曲线，可能有 js，但更多 OOTB）

更轻，没有js。 通过 https://sites.yax.com/、https://www.cssbed.com/、https://dohliam.github.io/dropin-minimal-css/ 和 https 预览其中的一些： //github.com/dbohdan/classless-css

超轻：100 字节的 css 几乎在任何地方都看起来很棒

1
2
3
4
5
6
7
html{
最大宽度：60ch；
填充：1.5rem；
保证金：自动；
线高：1.5rem；
字体大小：24px；
}

另请参阅http://bettermotherfuckingwebsite.com/

有趣的 CSS 框架

专注很有趣

焦点是野蛮主义

重点是有趣/怀旧

聚焦未来主义

不使用框架，考虑不使用框架。

CSS 重置

更多的控制权来换取您更多的工作。

建立一个高程系统是个好主意。 Material 非常好：https://material.io/design/environment/elevation.html

组件 默认高程值 (dp)
对话 24
莫代尔底片 莫代尔侧片 16
抽屉式导航 16
浮动操作按钮（FAB - 按下） 12
标准底板 标准侧板 8
底部导航栏 8
底部应用栏 8
菜单和子菜单 8
卡（领取时） 8
包含按钮（按下状态） 8
浮动操作按钮（FAB - 静止高度） 6
顶部应用栏（滚动状态） 4
顶部应用栏（静止高度） 0 或 4
刷新指示器搜索栏（滚动状态） 3
包含按钮（静止高度） 2
搜索栏（静止高度） 1
卡（静止高度） 1
开关 1
文本按钮 0
标准侧板 0

有关 FAB 实施的更多说明 - https://youtu.be/RXopH5t2Kww

二维间距

更多的。间距。请。

双倍空白

响应式布局断点

如有疑问，请使用 Material 布局：https://material.io/design/layout/responsive-layout-grid.html#breakpoints

屏幕尺寸 保证金 身体 布局列
超小号（手机）
0-599dp 16dp 缩放 4
小（平板电脑）
600-904 32dp 缩放 8
905-1239 905-1239缩放 840dp 12
中型（笔记本电脑）
1240-1439 1240-1439 200dp 缩放 12
大（桌面）
1440+ 缩放 1040 1040 12

漂亮的出血可以让你有选择地强调事物。

您需要正常宽度、弹出宽度和“全出血”宽度。中间的可选。

这是出血实现的最佳版本 https://ryanmulligan.dev/blog/layout-breakouts/
（借自 https://joshwcomeau.com/css/full-bleed/）

这适合响应式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<样式>
/* https://ryanmulligan.dev/blog/layout-breakouts/ */
.swyx内容{
--gap: 夹子(1rem, 6vw, 3rem);
--full: minmax(var(--gap), 1fr);
--内容：min(65ch, 100% - var(--gap) * 2);
--popout: minmax(0, 2rem);
--特征: minmax(0, 5rem);   

显示：网格；
网格模板列：
[全面启动]
[功能开始]
[弹出开始]
[内容开始] var(--内容) [内容结束]
[功能结束]
[弹出结束]
[功能结束]
[全完]
}   

@media（最小宽度：640px）{
.swyx内容{
网格模板列：
[完整开始] var(--full)
[功能开始] var(--功能)
[弹出开始] var(--popout)
[内容开始] var(--内容) [内容结束]
var(--popout) [弹出结束]
var(--feature) [功能结束]
var(--full) [完整结束];
       }
}   

:global(.swyxcontent > *) {
网格列：内容；
}   

文章：全球（前）{
网格列：特征；
   }
</样式>

然后您可以根据需要有选择地使用“popout”、“feature”和“full”类

1
2
3
4
5
6
7
8
9
10
11
12
.内容> * {
网格列：内容；
}
.popout {
网格列：弹出；
}
。特征 {
网格列：特征；
}
。满的 {
网格列：满；
}

其他布局工具和技巧

排版很重要！ https://twitter.com/kvncnls/status/1399077512014086150?s=21

字体

您可以在此处了解有关校对高级字体的更多信息 https://www.typography.com/blog/text-for-proofing-fonts

</详细信息>

字体加载策略

  • https://github.com/zachleat/web-font-loading-recipes

  • Google 字体策略

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <！--
    - 1. 提前预热字体源。
        -
    - 2. 启动 CSS 文件的高优先级异步获取。工作于
    - 最现代的浏览器。
        -
    - 3. 启动应用于页面的低优先级异步获取
    - 只有在它到达之后。适用于所有启用 JavaScript 的浏览器。
        -
    - 4. 万一访客故意禁用
    - JavaScript，回退到原始方法。好消息是，
    - 虽然这是一个渲染阻塞请求，但它仍然可以利用
    - 预连接，这使得它比默认的速度稍微快一些。
    -->   

    <!-- [1] -->
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />   

    <!-- [2] -->
    <link rel="预加载" as="style" href="$CSS&display=swap" />   

    <!-- [3] -->
    %3叮当声
    rel =“样式表”
    href="$CSS&display=交换"
    媒体=“打印”
    onload="this.media='全部'"
    />   

    <!-- [4] -->
    <noscript>
    <link rel="stylesheet" href="$CSS&display=swap" />
    </无脚本>

  • font-display: 可选 可能不错

    行高

    https://www.thegoodlineheight.com

    线宽

不要忘记设置 max-width - 60-75 个字符之间是好的。

您可能希望在内容上使用“max-width: 60ch”。 注意“ch”单元不完全是 60 个字符

字距调整和字符间距

<详细信息>
<摘要>
不要忘记在 h1 文本上设置领先（行高）并注意字距调整：
</摘要>

https://hottips.imgix.net/2020/07/044-tracking-animation.gif

当您使用全部大写的部分标题时，请将跟踪（“letting-spacing”）设置得更宽一些。 （Steve Schoger 的示例）

字体大小

如果构建一个提供字体选择的协作设计工具，请查看 Figma 是如何做到的 https://youtu.be/kVD-sjtFoEI

＃＃ 颜色

选择一个主要的“品牌”颜色来匹配您的个性。 请勿过度使用。

  • 蓝色：安全、熟悉
    • 黄金：昂贵，复杂（示例，再次)
    • 粉色：有趣，不那么严肃

您还可以为次要内容使用灰色，为第三级内容使用浅灰色。

不要使用系统默认/命名的颜色，太残酷了。把它软化一点。 “永远不要使用黑色”已被作为一项规则提出，但[这是有争议的](https://news.ycombinator.com /项目？id=24303042）。

这是关于颜色个性的更完整的入门，其中包含更多示例。

心灵可及性。每 12 名男性和每 200 名女性中就有 1 人患有色盲。确保检查是否可以察觉到重要的区别。

单调：

  • 白色卡片背景：#FCFCFC
    • 蓝黑色图标：#1C1E20
    • 白色较浅的文字：#485963
    • 蓝色背景：#202D34

多色的：

  • 黑色：#1d1d1d。

    • 紫色：#b066ff；
    • 蓝色：#203447；
    • 浅蓝色：#1f4662；
    • 蓝色2：#1C2F40；
    • 黄色：#ffc600；
    • 粉色：#EB4471；
    • 白色：#d7d7d7；

    </详细信息>

    <详细信息>
    <摘要>
    如果您希望它可以切换为暗模式，您可能想也可能不想使用通用名称：
    </摘要>

示例黄色调色板：

  • 主光：#FFD151 芥末色
    • 原色-深色：#FFAE03 UCLA 金奖
    • 次要成功：#20A39E 浅海绿
    • 二级警告：#EF5B5B 日落橙
    • 次要信息：#08D377 深天蓝色
    • 灰色：#E8E9E9、#D1D3D4、#BABDBF、#808488、#666A6D、#4D5052、#333537、#1C1D1E

示例：https://dev.to/dcodeyt/add-dark-mode-to-your-websites-with-css-5bh4

注意 - 这是有争议的!!! 即使 Slack 的 impl 也有单独的浅色和深色主题。

问题是“主要”不是颜色，而是当前上下文中对比度的度量。在同一页面上，您可能有一个带有黑色按钮的白色面板和一个带有白色按钮的黑色面板，尽管这两个按钮的颜色不同，但它们都是“主要”按钮。 - 亚当·沃森

</详细信息>

一种内衬深色模式（注意性能！）：filter: invert(100%)hue-rotate(180deg); - 更多[过滤器在这里](https://svelte.dev/repl/defc901c5f434ed4a76161605cf1db76?version=3.29。0）

https://workos.com/blog/5-lessons-we-learned-adding-dark-mode-to-our-platform?ref=sidebar

调色板生成器

注意：默认渐变通常具有过于粗糙的“硬边缘”。 （[示例]（https://twitter.com/JoshWComeau/status/1401926170589863946），[示例]（https://twitter.com/finmoorhouse/status/1543580508508065794?s=21&t=PBDS5C7C4FeqBA0wctOaCQ））。 在中间添加第三个色标并提高饱和度。您将来可以使用esainggradients。

不是工具，但仍然很重要，所以它们在这里

数据可视化是一个特殊的类别，因为它不仅是设计，而且是信息。感谢 Teej 的帖子。

不仅仅是背景 - 将渐变和背景图像应用于文本是被严重低估的。示例：

图像后面的背景径向爆发：

确保看到颜色渐变部分来生成渐变

1
2
3
4
5
背景图像：线性渐变（
120度，
HSL(200 50% 90%) 0%,
HSL(200 100% 90%) 100%
);

线性渐变可以“缓和”得更平滑：https://css-tricks.com/easing-linear-gradients/

不要忘记他们！

您可以根据我自己的网站添加一些想法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<link rel="图标" type="image/png" href="/favicon.png" />
<link rel="webmention" href="https://webmention.io/www.swyx.io/webmention" />
<link rel="pingback" href="https://webmention.io/www.swyx.io/xmlrpc" />
<meta名称=“主题颜色”内容=“#818CF8”/>
<title>{frontmatter.title} ∊ swyx.io</title>
<link rel="canonical" href="{canonical}" />
<meta 属性=“og:url”内容=“{swyxioURL}”/>
<meta 属性=“og：类型”内容=“文章”/>
<meta 属性=“og:title”内容=“{seoTitle}”/>
<meta 名称=“描述”内容=“{seoDescription}”/>
<meta 属性=“og:description”内容=“{seoDescription}”/>
{#if frontmatter.cover_image}
<meta 属性=“og:image”内容=“{coverImage}”/>
{/if} <meta name="twitter:card" content={frontmatter.cover_image ?
'summary_large_image' : '摘要'} />
<meta name="twitter:domain" content="swyx.io" />
<meta name="twitter:creator" content="@swyx" />
<meta name="twitter:title" content="{seoTitle}" />
<meta name="twitter:description" content="{seoDescription}" />
<meta name="twitter:image" content={frontmatter.cover_image ？
frontmatter.cover_image : 'https://www.swyx.io/swyx-ski.jpeg'} />
<meta name="twitter:label1" value="上次更新" content="上次更新" />
<meta name="twitter:data1" value="{metaDate}" content="{metaDate}" />
<meta name="twitter:label2" content="读取时间" />
<meta name="twitter:data2" content="{readTime}" />

其他要使用的样板

在使用工具之前 - 关于架构图的一些好的想法（和工具列表）：

专门针对 BPMN：https://bpmn.io/

实体关系图

有用，例如如果需要徽标

进一步阅读

基于节点的 GUI：https://github.com/wbkd/awesome-node-based-uis

图形和 SVG 插图

后端实体/ ERD /SQL 图表

模拟您的浏览器/手机

录制您的设备 https://www.screen.studio/

插图

在搅拌机中学习 3d illo https://polygonrunway.com/

代码中的 ascii 艺术示例：https://blog.regehr.org/archives/1653（HN 讨论）

来自 matrix8967：一些 ANSI 颜色代码和 ASCIInema 可以帮助您走很长的路。 （注意：将来可能需要重新格式化）

DIY 平面设计

悬停效果的图像修改：https://photomosh.com/

库存视频

产品参观提示 https://dev.to/highlight/how-to-create-animated-product-stories-2bcd

杂项

为你做

来自成功 Youtuber 的教程

详细信息 > 摘要 > *:first-child {
显示方式：内嵌；
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 - 元主题颜色 https://github.com/sw-yx/swyxkit/issues/19
- 不要使用默认的数字输入属性 - 在 js 中完成这一切 https://stackoverflow.blog/2022/09/15/why-the-number-input-is-the-worst-input/
- 链接 https://cssanimation.rocks/animating-links/
- 多行内联链接https://twitter.com/JoshWComeau/status/1481697476327452676?s=20&t=bEY8vX8hmtGmMWQsFmSEcA
- 悬停时的工具提示
- https://kazzkiq.github.io/balloon.css/
- [关于工具提示 js 性能的利基提示](https://atfzl.com/don-t-attach-tooltips-to-document-body)
- 来自tippyjs的https://www.floating-ui.com/
- 详细信息/摘要 css - 使用 `details[open]` 来定位 https://codepen.io/chriscoyier/pen/wvJmqjY
- 将滚动边距放在[所有带有`id`的东西上](https://piccalil.li/quick-tip/add-scroll-margin-to-all-elements-which-can-be-targeted)
````CSS
[ID] {
滚动边距顶部：2ex；
  }

除了下拉菜单之外的任何内容

不要使用下拉菜单，而是使用：（https://learnui.design/blog/4-rules-intuitive-ux.html）

  • 分段按钮（水平或垂直）
  • 复选框
  • https://getcssscan.com/css-checkboxes-examples 60+ 漂亮的复选框
  • 转变
  • 单选按钮
  • 卡片和视觉选项（图像作为按钮）
  • 提前输入（对于较大的下拉列表，例如国家/地区）
  • 日期（泊松日期的日历控件，输入类型=“日期”以获得高可变性）
  • 步进器（用于数字）

按钮

表格

表格

日期选择器

＃＃＃ 声音

有薪酬的：

工具：

轻量级图表/Dataviz

仪表板

不错的 React 组件

反应烘烤

React 游戏化

其他 奇怪有趣的东西

纯 CSS 技巧

1
2
3
4
5
6
@media（更喜欢减少运动：无偏好）{
：重点 {
过渡：轮廓偏移 0.25 秒缓动；
轮廓偏移：5px；
    }
  }
1
2
3
4
5
.模糊和旋转{
边框半径：20px；
背景过滤器：模糊（20px）色调旋转（120deg）；
-webkit-backdrop-filter：色调旋转（120deg）；
  }

动画和过渡

关于教程与上下文提示：https://www.nngroup.com/articles/onboarding-tutorials/

特色游览

欢迎电子邮件

制作板

三JS

巴比伦JS

用于演示的免费或模拟数据 API