SevicheCC/Urara-Blog
1
0
Fork 0
mirror of https://github.com/Sevichecc/Urara-Blog.git synced 2025-04-30 15:09:31 +08:00
Code Issues Projects Releases Packages Wiki Activity
Urara-Blog/build/2021-11-09-ux2.html
Sevichecc f1246f7073 add pgp
2022-08-14 01:14:53 +08:00

495 lines
167 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh">
<head prefix="og: https://ogp.me/ns#">
<meta charset="utf-8" />
<meta name="generator" content="gh:importantimport/urara" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="manifest" crossorigin="use-credentials" href="/manifest.webmanifest" />
<link rel="alternate" type="application/feed+json" href="/feed.json" />
<link rel="alternate" type="application/atom+xml" href="/atom.xml" />
<link rel="sitemap" type="application/xml" href="/sitemap.xml" />
<meta http-equiv="content-security-policy" content=""><title>Requirement Gathering | Seviche.cc</title><link rel="me" href="https://kongwoo.icu/@seviche" data-svelte="svelte-1592q3p"><link rel="webmention" href="https://webmention.io/seviche.cc/webmention" data-svelte="svelte-1592q3p">
<link rel="pingback" href="https://webmention.io/seviche.cc/xmlrpc" data-svelte="svelte-1592q3p"><link rel="shortcut icon" href="https://seviche.cc/favicon.png" sizes="48x48" type="image/png" data-svelte="svelte-1kxdj3d"><link rel="apple-touch-icon" href="https://seviche.cc/assets/any@180.png" sizes="180x180" type="image/png" data-svelte="svelte-1kxdj3d"><link rel="icon" href="https://seviche.cc/assets/any@192.png" sizes="192x192" type="image/png" data-svelte="svelte-1kxdj3d"><meta name="theme-color" data-svelte="svelte-1g590ms"><meta name="author" content="酸橘汁腌鱼" data-svelte="svelte-abrfj"><link rel="canonical" href="https://seviche.cc/2021-11-09-ux2" data-svelte="svelte-abrfj">
<meta name="keywords" content="UX" data-svelte="svelte-abrfj">
<meta name="description" content="Introduction to User Experience Design｜Week2" data-svelte="svelte-abrfj"><!-- HTML_TAG_START --><link rel="authorization_endpoint" href="https://indieauth.com/auth"><!-- HTML_TAG_END --><!-- HTML_TAG_START --><link rel="token_endpoint" href="https://tokens.indieauth.com/token"><!-- HTML_TAG_END --><!-- HTML_TAG_START --><link rel="me" href="https://github.com/sevichecc" /><!-- HTML_TAG_END --><!-- HTML_TAG_START --><script data-cfasync="false" defer data-do-not-track="true" data-website-id="2403ea30-74ff-4ffa-8264-556b9f3b2897" src="https://hexoverc.vercel.app/umami.js"></script><!-- HTML_TAG_END --><!-- HTML_TAG_START --><script async data-cfasync="false" src="https://cdn.splitbee.io/sb.js"></script><!-- HTML_TAG_END --><!-- HTML_TAG_START --><meta name="baiduspider" content="noindex"><!-- HTML_TAG_END --><!-- HTML_TAG_START --><link rel="microsub" href="https://aperture.p3k.io/microsub/761"><!-- HTML_TAG_END --><meta property="og:site_name" content="Seviche.cc" data-svelte="svelte-1y1uq0g"><meta property="og:locale" content="zh" data-svelte="svelte-1y1uq0g"><meta property="og:type" content="article" data-svelte="svelte-1y1uq0g">
<meta property="og:title" content="Requirement Gathering" data-svelte="svelte-1y1uq0g">
<meta property="og:description" content="Introduction to User Experience Design｜Week2" data-svelte="svelte-1y1uq0g">
<meta property="og:image" content="https://seviche.cc/assets/maskable@512.png" data-svelte="svelte-1y1uq0g">
<meta name="twitter:card" content="summary" data-svelte="svelte-1y1uq0g">
<meta property="article:tag" content="UX" data-svelte="svelte-1y1uq0g">
<meta property="og:url" content="https://seviche.cc/2021-11-09-ux2" data-svelte="svelte-1y1uq0g">
<meta property="article:author" content="酸橘汁腌鱼" data-svelte="svelte-1y1uq0g">
<meta property="article:published_time" content="2021-11-09T14:26:49.000Z" data-svelte="svelte-1y1uq0g">
<meta property="article:modified_time" content="2022-08-06T10:49:17.439Z" data-svelte="svelte-1y1uq0g">
<link href="/_app/immutable/assets/__layout-916a0572.css" rel="stylesheet">
<link rel="modulepreload" href="/_app/immutable/start-f4ec0a74.js">
<link rel="modulepreload" href="/_app/immutable/chunks/index-cd58b8d1.js">
<link rel="modulepreload" href="/_app/immutable/chunks/index-81c83cec.js">
<link rel="modulepreload" href="/_app/immutable/pages/__layout.svelte-251b91cc.js">
<link rel="modulepreload" href="/_app/immutable/chunks/title-765c989f.js">
<link rel="modulepreload" href="/_app/immutable/chunks/posts-c52cb603.js">
<link rel="modulepreload" href="/_app/immutable/chunks/posts-57ab4794.js">
<link rel="modulepreload" href="/_app/immutable/chunks/icon-3aa13b39.js">
<link rel="modulepreload" href="/_app/immutable/pages/2021-11-09-ux2/index.md-117858d0.js">
<link rel="modulepreload" href="/_app/immutable/chunks/post_layout-9085e57e.js">
<link rel="modulepreload" href="/_app/immutable/chunks/post_card-e7f4525a.js">
<link rel="modulepreload" href="/_app/immutable/chunks/head-4a058b17.js">
<link rel="modulepreload" href="/_app/immutable/chunks/footer-1abd9501.js">
</head>
<body itemscope itemtype="https://schema.org/WebPage">
<header id="header" class="fixed z-50 w-screen transition-all duration-500 ease-in-out border-b-2 border-transparent max-h-[4.125rem] false"><div class="navbar"><div class="navbar-start"><div class="dropdown lg:hidden"><label for="navbar-dropdown" tabindex="0" class="btn btn-square btn-ghost"><span class="i-heroicons-outline-menu-alt-1"></span></label>
<ul id="navbar-dropdown" tabindex="0" class="menu menu-compact dropdown-content bg-base-100 text-base-content shadow-lg rounded-box max-w-52 p-2"><li><a sveltekit:prefetch href="/projects">Projects</a>
</li><li><a sveltekit:prefetch href="/friends">Friends</a>
</li><li><a sveltekit:prefetch href="/about">About</a>
</li></ul></div>
<div class="swap order-last hidden lg:inline-grid"><button class="swap-on btn btn-ghost text-base font-normal normal-case transition-all duration-200 hidden"></button>
<ul class="swap-off menu menu-horizontal p-0"><li><a sveltekit:prefetch href="/projects">Projects</a>
</li><li><a sveltekit:prefetch href="/friends">Friends</a>
</li><li><a sveltekit:prefetch href="/about">About</a>
</li></ul></div>
<a href="/" sveltekit:prefetch class="btn btn-ghost normal-case text-lg">Seviche.cc</a></div>
<div class="navbar-end">
<div id="change-theme" class="dropdown dropdown-end"><div tabindex="0" class="btn btn-square btn-ghost"><span class="i-heroicons-outline-color-swatch"></span></div>
<ul tabindex="0" class="flex shadow-2xl menu dropdown-content bg-base-100 text-base-content rounded-box w-52 p-2 gap-2 overflow-y-auto max-h-[21.5rem]"><button data-theme="lemonade" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Light</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="night" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Dark</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="cupcake" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Cupcake</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="bumblebee" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Bumblebee</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="emerald" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Emerald</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="corporate" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Corporate</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="valentine" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Valentine</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="synthwave" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Synthwave</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="retro" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Retro</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="cyberpunk" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Cyberpunk</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="halloween" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Halloween</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="garden" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Garden</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="forest" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Forest</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="aqua" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Aqua</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="lofi" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Lo-Fi</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="pastel" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Pastel</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="fantasy" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Fantasy</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="wirefream" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Wireframe</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="black" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Black</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="luxury" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Luxury</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="dracula" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Dracula</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="cmyk" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">CMYK</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="autumn" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Autumn</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="business" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Business</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="acid" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Acid</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="coffee" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Coffee</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button><button data-theme="winter" class="btn btn-ghost hover:bg-primary group rounded-lg flex bg-base-100 p-2 transition-all"><p class="flex-1 text-left text-base-content group-hover:text-primary-content transition-color">Winter</p>
<div class="flex-none m-auto flex gap-1"><div class="bg-primary w-2 h-4 rounded"></div>
<div class="bg-secondary w-2 h-4 rounded"></div>
<div class="bg-accent w-2 h-4 rounded"></div>
<div class="bg-neutral w-2 h-4 rounded"></div></div>
</button></ul></div></div></div></header>
<button id="totop" aria-label="scroll to top" class="fixed grid group btn btn-circle btn-lg border-none backdrop-blur bottom-6 right-6 z-50 duration-500 ease-in-out btn-ghost bg-base-100/30 md:bg-base-200/30 translate-y-24"><div class="radial-progress text-accent transition-all duration-500 ease-in-out group-hover:text-accent-focus col-start-1 row-start-1" style="--size:4rem; --thickness: 0.25rem; --value:undefined;"></div>
<div class="border-4 border-base-content/10 group-hover:border-transparent col-start-1 row-start-1 rounded-full w-full h-full p-4 grid duration-500 ease-in-out"><span class="i-heroicons-solid-chevron-up !w-6 !h-6"></span></div></button>
<div class="bg-base-100 md:bg-base-200 min-h-screen pt-16 md:pb-8 lg:pb-16">
<div class="flex flex-col flex-nowrap justify-center xl:flex-row xl:flex-wrap"><div class="flex-1 w-full max-w-screen-md order-first ease-out transform mx-auto xl:mr-0"></div>
<div class="flex-1 w-full max-w-screen-md xl:order-last ease-out transform mx-auto xl:mr-0"></div>
<div class="flex-none w-full max-w-screen-md mx-auto xl:mx-0"><article itemscope itemtype="https://schema.org/BlogPosting" itemprop="blogPost" class="card bg-base-100 rounded-none md:rounded-box md:shadow-xl z-10 md:mb-8 lg:mb-16"><div id="bridgy" class="hidden"><a href="https://brid.gy/publish/mastodon">mastodon</a></div>
<div class="card-body gap-0 "><div class="flex flex-col gap-2">
<div class="flex font-semibold gap-1.5"><a rel="author" class="opacity-75 hover:opacity-100 hover:text-primary duration-500 ease-in-out p-author h-card" href="https://seviche.cc">酸橘汁腌鱼</a>
<span class="opacity-50">/</span>
<a href="/2021-11-09-ux2" class="swap hover:swap-active u-url u-uid"><time class="swap-off font-semibold opacity-75 duration-500 ease-in-out mr-auto dt-published" datetime="2021-11-09T14:26:49.000Z" itemprop="datePublished">Tue, Nov 9, 2021</time>
<time class="swap-on font-semibold text-primary duration-500 ease-in-out mr-auto dt-updated" datetime="2022-08-06T10:49:17.439Z" itemprop="dateModified">Sat, Aug 6, 2022</time></a></div>
<h1 itemprop="name headline" class="card-title text-3xl mb-8 p-name">Requirement Gathering</h1>
<p itemprop="description" class="p-summary mb-auto hidden">Introduction to User Experience Design｜Week2</p></div>
<main itemprop="articleBody" class="urara-prose prose e-content"><h2 id="overview"><a href="#overview"><strong>Overview</strong></a></h2>
<ul><li><p><strong>设计流程的第一步</strong></p>
<p>了解用户当前是如何完成任务的</p></li>
<li><p><strong>需求收集的目标是什么？</strong></p>
<p>理解问题域</p></li>
<li><p><strong>问题域（problem space)包含什么？</strong></p>
<ol><li>谁是我们的用户</li>
<li>什么时候使用产品、在什么地点、为什么、以及他们当前如何实现目标任务</li>
<li>用户所认为的当前存在的问题是什么</li>
<li>以及用户自己关于如何改进任务流程的心愿清单</li></ol></li>
<li><p><strong>需求收集的陷井</strong></p>
<p>设计师可能会直接开始设计可供选择的设计品，尽管他们尚未完全了解任务，用户以及用户如何实现任务 换句话说，他们急于直奔主题了 他们在没有取得用户数据的基础上就开始设计了</p></li>
<li><p><strong>设计是一个系统性的数据驱动的过程</strong></p></li></ul>
<h2 id="types-of-users-and-types-of-data"><a href="#types-of-users-and-types-of-data"><strong>Types of Users and Types of Data</strong></a></h2>
<h3 id="数据类型"><a href="#数据类型">数据类型</a></h3>
<h4 id="定量"><a href="#定量">定量</a></h4>
<ul><li>定量数据可以被认为是可以用数字转录的数据， 比如调查数据（用户年龄、性别等等）</li>
<li>定量分析是依据统计数据，建立数学模型，并用数学模型计算出分析对象的各项指标及其数值的一种方法。</li></ul>
<h4 id="定性"><a href="#定性">定性</a></h4>
<ul><li>定性数据更容易被认为是为我们提供专题的信息，可放到叙事语境中（如问卷中的开放性问题）</li>
<li>定性分析则是主要凭分析者的直觉、经验，凭分析对象过去和现在的延续状况及最新的信息资料，对分析对象的性质、特点、发展变化规律作出判断的一种方法。</li></ul>
<blockquote><p>设计师通常结合使用两种数据，这种方法称为 <em>混合方法（Mixed method approach)</em></p></blockquote>
<h3 id="将用户视为利益相关者的三个类型"><a href="#将用户视为利益相关者的三个类型">将用户视为利益相关者的三个类型</a></h3>
<p><strong>1.主要 Primary</strong></p>
<p>主要利益相关者是直接使用设计的人员。这些是设计者最常与之互动的用户，他们被称为<strong>最终用户</strong></p>
<p><strong>2.二级 Secondary</strong></p>
<p>不直接使用设计，但可以<strong>间接地使用</strong>，因为他们从中可得到某种输出</p>
<p><strong>3.三级 Tertiary</strong></p>
<p>可能根本不使用设计 ，但<strong>直接受设计的影响</strong>， 无论是消极还是积极的方式</p>
<h3 id="了解利益相关者的意义"><a href="#了解利益相关者的意义">了解利益相关者的意义</a></h3>
<blockquote><p>考虑二级和三级利益相关者，也可以帮助我们创造具有创新性的设计，并为我们的客户提供竞争优势。从这个意义上讲了解利益相关者会带来更好的用户体验设计</p></blockquote>
<h2 id="discovery-technique-overview"><a href="#discovery-technique-overview"><strong>Discovery Technique Overview</strong></a></h2>
<h3 id="四种调研方法"><a href="#四种调研方法">四种调研方法</a></h3>
<ol><li>自然观察 (Naturalistic observation)</li>
<li>问卷法( Surveys)</li>
<li>焦点小组( Focus groups)</li>
<li>访谈 (Interviews)</li></ol>
<h3 id="交互程度"><a href="#交互程度">交互程度</a></h3>
<p><img src="/2021-11-09-ux2/1.png" alt="/2021-11-09-ux2/1.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p>
<h3 id="进行的场景"><a href="#进行的场景">进行的场景</a></h3>
<p><img src="/2021-11-09-ux2/2.png" alt="/2021-11-09-ux2/2.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p>
<h3 id="在设计周期中迭代"><a href="#在设计周期中迭代">在设计周期中迭代</a></h3>
<p><img src="/2021-11-09-ux2/3.png" alt="/2021-11-09-ux2/3.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p>
<h2 id="naturalistic-observation-自然观察"><a href="#naturalistic-observation-自然观察"><strong>Naturalistic Observation 自然观察</strong></a></h2>
<h3 id="是什么"><a href="#是什么">是什么</a></h3>
<p>是在用户自己的环境中，观察用户的行为，不需要询问用户何时何地以及怎样完成既定任务的 设计师会亲自到用户完成任务的地点，并观察他们的行为。</p>
<h3 id="如何做"><a href="#如何做">如何做</a></h3>
<ul><li>预期计划</li>
<li>实地进行</li>
<li>过程中设计师与用户无交谈</li></ul>
<h3 id="数据"><a href="#数据">数据</a></h3>
<p>定性、定量</p>
<h3 id="优点"><a href="#优点">优点</a></h3>
<ul><li>直接观察用户的行为，随时随地收集数据</li>
<li>用户的行为习惯真实自然，不受设计师主观影响</li></ul>
<h3 id="缺点"><a href="#缺点">缺点</a></h3>
<ul><li><p><strong>数据收集受设计师主观影响。</strong></p>
<p>设计师所收集到的数据，局限于他们个人的收集方式和理解方式。无法核实设计师做出的 假设正确与否</p></li>
<li><p><strong>停留表面，看不到深层原因。</strong></p>
<p>我们并不知道为什么 用户采取这样的方式完成任务</p></li></ul>
<h3 id="道德局限"><a href="#道德局限">道德局限</a></h3>
<p>需要注意用户隐私、匿名化</p>
<h3 id="在设计流程中"><a href="#在设计流程中">在设计流程中</a></h3>
<blockquote><p>基于收集到的数据，进行下一步调研，如问卷、焦点小组等，使问题域更聚焦，探寻真正的问题所在，解释用户行为的原因</p></blockquote>
<h2 id="survey-问卷"><a href="#survey-问卷"><strong>Survey 问卷</strong></a></h2>
<h3 id="是什么-1"><a href="#是什么-1">是什么</a></h3>
<ul><li>问卷调查的目的是了解用户的观点。</li>
<li>最常见的是让用户自我报告他们的行为、主观感觉、态度和感受。我们也可以获取他们对于他人的看法</li></ul>
<h3 id="如何做-1"><a href="#如何做-1">如何做</a></h3>
<ul><li>实地、实验室</li>
<li>几乎不需要直接和用户交流</li>
<li>形式：纸质问卷、电子问卷、面对面调查</li></ul>
<h3 id="数据-1"><a href="#数据-1">数据</a></h3>
<h4 id="1定性-封闭性问题"><a href="#1定性-封闭性问题">1.定性-封闭性问题</a></h4>
<p><strong>Closed-ended questions</strong></p>
<ul><li><strong>顺序回答</strong><ul><li><strong>二分型问题 (dichotomous )</strong>
是/否</li>
<li><strong>李克特评分 (likert scales)</strong>
评分 1-5</li>
<li><strong>排序 (rank)</strong>
如按照喜好程度排序</li></ul></li>
<li><strong>乱序回答</strong><ul><li>给用户呈现了一系列的问题,这些问题并没有逻辑顺序</li>
<li>例如，人种学问卷：如性别、 教育程度或者是一些列举项，供用户勾选适用于他们的选项</li></ul></li></ul>
<h4 id="2定量-开放性问题"><a href="#2定量-开放性问题">2.定量-开放性问题</a></h4>
<p><strong>Open-ended questions</strong></p>
<p>目的是获取用户简短的回答，包括他们的观点、偏好、态度等</p>
<h3 id="优点-1"><a href="#优点-1">优点</a></h3>
<ul><li>高效收集数据</li>
<li>数据易于分析</li></ul>
<h3 id="缺点-1"><a href="#缺点-1">缺点</a></h3>
<ul><li>信息表面化，不能提供深入洞察</li>
<li>回忆偏倚、社会称许性偏见和样本偏差</li></ul>
<h3 id="在设计流程中-1"><a href="#在设计流程中-1">在设计流程中</a></h3>
<p><img src="/2021-11-09-ux2/4.png" alt="下一步组织焦点小组或自然观察，深入洞察" class="rounded-lg my-2" loading="lazy" decoding="async"></p>
<h2 id="focus-group-焦点小组"><a href="#focus-group-焦点小组"><strong>Focus group 焦点小组</strong></a></h2>
<h3 id="是什么-2"><a href="#是什么-2">是什么</a></h3>
<ul><li>目的是让用户参与直接对话</li>
<li>焦点小组在可控的环境中进行，通常是一个房间   在这个充满隐私性的房间里 用户可以自由地分享和讨论自己的观点</li>
<li>焦点小组能够与参与者产生高度互动，这种程度高于   问卷调查，但是低于采访</li></ul>
<h3 id="如何做-2"><a href="#如何做-2">如何做</a></h3>
<h4 id="组成"><a href="#组成">组成</a></h4>
<ul><li><p><strong>用户</strong></p>
<ul><li>5-10 个用户</li>
<li>这些用户应能够代表设计师所关注的用户群体</li></ul></li>
<li><p><strong>设计团队</strong></p>
<p><strong>1. 主持人</strong></p>
<ul><li>一个训练有素的主持人 他负责组织用户讨论的话题</li>
<li>主持人必须非常擅长深入挖掘，在讨论过程中出现的有价值的主题。但同时也要引导用户的讨论 使之覆盖所需要的主题范围</li></ul>
<p><strong>2. 记录员</strong></p>
<ul><li>负责记录用户和主持人之间的谈话要点</li></ul>
<p><strong>3. 媒介记录员（可选）</strong></p>
<ul><li>使用录音或者   录像设备进行记录</li></ul></li>
<li><p><strong>流程</strong></p>
<p><img src="/2021-11-09-ux2/5.png" alt="热身-创新训练-三主题讨论-用户最终意见总结" class="rounded-lg my-2" loading="lazy" decoding="async"></p></li></ul>
<h3 id="数据-2"><a href="#数据-2">数据</a></h3>
<ul><li><p><strong>定性</strong></p>
<ul><li>对话过程中记录员写下的一系列笔记</li>
<li>完整的焦点小组对话脚本</li>
<li>对焦点小组的分析</li></ul></li>
<li><p><strong>定量</strong></p>
<ul><li>可能会在焦点小组一开始进行收集 （例如收集用户的人种学统计信息，或者捕捉关于用户态度的原始问卷调查信息，以及用户对于目标话题的观点）</li>
<li>主持人应当善于运用这些数据快速开始对话</li></ul></li></ul>
<h3 id="优点-2"><a href="#优点-2">优点</a></h3>
<ul><li>能够在短时间内收集到关于所感兴趣话题的海量数据</li>
<li>充满活力的小组讨论 或许能够激发出不一样的结果 这些结果是一对一访谈无法得到的</li></ul>
<h3 id="缺点-2"><a href="#缺点-2">缺点</a></h3>
<ul><li>需要设计团队去执行</li>
<li>数据收集的质量依赖主持人水平</li>
<li>群体思维</li></ul>
<h3 id="在设计流程中-2"><a href="#在设计流程中-2">在设计流程中</a></h3>
<p><img src="/2021-11-09-ux2/6.png" alt="/2021-11-09-ux2/6.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p>
<ul><li>设计流程中的高潮，应在进行其他与用户交互较少的调研方法后使用（如自然观察、问卷</li>
<li>在焦点小组之后，设计师或许需要采访其他的用户   目的是获取更多关于焦点小组中发现的有趣话题的信息</li></ul>
<h2 id="interviews"><a href="#interviews"><strong>Interviews</strong></a></h2>
<h3 id="是什么-3"><a href="#是什么-3">是什么</a></h3>
<p>目的是深度收集用户信息</p>
<h3 id="如何做-3"><a href="#如何做-3">如何做</a></h3>
<ul><li>实地、实验室</li>
<li>足够的隐私程度 以确保用户可以自如地回答问题</li></ul>
<h3 id="数据-3"><a href="#数据-3">数据</a></h3>
<p>定性&gt;定量</p>
<ul><li><strong>定性</strong><ul><li>设计师所作的一系列访谈笔记</li>
<li>访谈记录的系统性分析</li></ul></li>
<li><strong>定量</strong><ul><li>可以在访谈的开始进行收集</li>
<li>可以以简短问卷的形式进行（它可以用来迅速获取人种学信息，或者 快速了解用户对于访谈话题的态度，访谈者可以利用这些信息开始访谈环节）</li></ul></li></ul>
<h3 id="优点-3"><a href="#优点-3">优点</a></h3>
<ul><li>与用户一对一访谈（深度访谈）</li>
<li>灵活的采访提纲</li></ul>
<h3 id="缺点-3"><a href="#缺点-3">缺点</a></h3>
<ul><li>需要熟练的采访者<blockquote><p>需要知道用户将会继续说什么，以及 何时控制不再提供价值的对话。 采访者的技能在保持融洽关系方面也很重要, 这种关系应该是既灵活又平衡的。 它使用户舒适, 足以提供诚实的意见 但不能太舒适 而导致用户想用采访者的反应来取悦她。</p></blockquote></li>
<li>数据的收集和分析耗时</li>
<li>定性数据分析费力</li></ul>
<h3 id="在设计流程中-3"><a href="#在设计流程中-3">在设计流程中</a></h3>
<p><img src="/2021-11-09-ux2/7.png" alt="/2021-11-09-ux2/7.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p>
<ul><li><p>据收集策略达到极点时，访谈最有用。</p></li>
<li><p>这意味着当问题得到很好的理解时， 设计人员在需求收集流程中处于关键位置， 需要的是用户最终的澄清或见解。</p></li></ul>
<h2 id="user-results-用户数据处理"><a href="#user-results-用户数据处理"><strong>User Results 用户数据处理</strong></a></h2>
<blockquote><p>假设：已对定性和对定量数据进行了适当的分析</p></blockquote>
<h3 id="描述性统计信息"><a href="#描述性统计信息">描述性统计信息</a></h3>
<p><strong>Descriptive statistics</strong></p>
<p>描述性统计允许我们总结定量信息 这包括数据集的范围、平均值和中值</p>
<ol><li>范围</li>
<li>平均值</li>
<li>中值 （减少极端数据的影响）</li></ol>
<h3 id="用户特征表"><a href="#用户特征表">用户特征表</a></h3>
<p><strong>User characteristics table</strong></p>
<p>特征表以简单的形式提供了我们所有数据的快速总结，包括定量数据和定性数据</p>
<p><img src="/2021-11-09-ux2/8.png" alt="/2021-11-09-ux2/8.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p>
<h3 id="人物画像-persona"><a href="#人物画像-persona">人物画像 Persona</a></h3>
<h2 id="presenting-task-findings"><a href="#presenting-task-findings"><strong>Presenting Task Findings</strong></a></h2>
<h3 id="scenario"><a href="#scenario">Scenario</a></h3>
<p>场景</p>
<blockquote><p>场景使得我们能<strong>了解用户如何使用系统。</strong></p></blockquote>
<p><img src="/2021-11-09-ux2/9.png" alt="Scenario例子" class="rounded-lg my-2" loading="lazy" decoding="async"></p>
<h4 id="是什么-4"><a href="#是什么-4">是什么</a></h4>
<p>场景提供了定性和定量数据的描述。</p>
<h4 id="作用"><a href="#作用">作用</a></h4>
<ul><li>使我们有机会传达我们在故事线中 收集数据的丰富性</li>
<li>故事线会突出所有任务的重要方面以及目前如何完成任务。</li>
<li>它让任务变的真实,超越了 枯燥的数据图表和表格</li></ul>
<h3 id="essential-case-study"><a href="#essential-case-study">Essential Case Study</a></h3>
<p>基本案例场景</p>
<blockquote><p>帮助理解  <strong>用户的活动以及系统的要求</strong>。</p></blockquote>
<p><img src="/2021-11-09-ux2/10.png" alt="案例" class="rounded-lg my-2" loading="lazy" decoding="async"></p>
<h4 id="三个要素"><a href="#三个要素">三个要素</a></h4>
<p><strong>1.用户的目标</strong></p>
<ul><li>首先,它用户的目标进行命名。 这捕捉到了 X 的哪些方面。</li>
<li>在本例中 用户可能想知道她去西印度群岛是否需要签证。</li></ul>
<p><strong>2. 用户意向</strong></p>
<ul><li>她进入系统需要进行的一系列步骤。</li></ul>
<p><strong>3.系统的责任</strong></p>
<ul><li>用户完成每个步骤后系统必须执行的操作。</li>
<li>所以在这里,用户首先要找到 签证要求然后系统请求获得目的地和国籍。 一旦用户提供所需信息 系统将获得相应的签证等信息。</li></ul>
<h3 id="hierarchical-task-analysis"><a href="#hierarchical-task-analysis">Hierarchical Task Analysis</a></h3>
<p>分层任务分析</p>
<blockquote><p>最常见的任务分析技术。  使我们考虑<strong>用户当前如何完成任务</strong>。关键点是<strong>可观察的行为</strong>。</p></blockquote>
<p><img src="/2021-11-09-ux2/11.png" alt="/2021-11-09-ux2/11.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p>
<ul><li>简单的形式就是一个<strong>大纲</strong>。</li>
<li>从目标开始。 并对目标中的每个主要步骤进行<strong>编号</strong>。 其中一些步骤包含必须先完成的小步骤 然后才能继续下一步 这项技术是关于用户目标的。</li>
<li>与基本案例不同。 我们<strong>没有考虑航空公司系统</strong>需要在每个用户步骤中做什么。</li>
<li>另外请注意， 我没有将一些系统交互任务列入， 比如使用滚动条。 这<strong>只是与用户和完成目标的步骤有关。</strong></li></ul>
<h3 id="current-ui-critique"><a href="#current-ui-critique">Current UI Critique</a></h3>
<p>当前 UI 评估</p>
<p><img src="/2021-11-09-ux2/12.png" alt="/2021-11-09-ux2/12.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p>
<p><img src="/2021-11-09-ux2/13.png" alt="/2021-11-09-ux2/13.png" class="rounded-lg my-2" loading="lazy" decoding="async"></p>
<ul><li>需要与 UI 进行真实交互。</li>
<li>系统地分析当前正在使用的界面。 你要确认你明确地传达出需求被满足以及 为了改善用户体验你能做的事情。</li></ul>
<h4 id="步骤"><a href="#步骤">步骤</a></h4>
<p><strong>1.确定用户任务</strong></p>
<p>对于每个 UI 对应的每个 UI ，你想要确定任务或者用户使用的目的是什么</p>
<p><strong>2. 测定任务完成时间</strong></p>
<p>要客观的测定所需时间去 响应这个客户提交的任务</p>
<p>在这个例子中 我选择了一些点击，它会让我使用这个应用程序，或者网站，或者通过终端完成任务。</p>
<p><strong>3. 评估操作</strong></p>
<p><strong>4. 改进方法</strong></p>
<h2 id="相关资源"><a href="#相关资源"><strong>相关资源</strong></a></h2>
<p>Resources for Requirement Gathering</p>
<ol><li><a href="http://personalexcellence.co/blog/brainstorming-techniques/" rel="nofollow noopener noreferrer external" target="_blank">25 Useful Brainstorming Techniques</a></li>
<li><a href="http://leadinganswers.typepad.com/leading_answers/2009/03/nonfunctional-requirements-minimal-checklist.html" rel="nofollow noopener noreferrer external" target="_blank">Non-Functional Requirements - Minimal Checklist</a></li>
<li><a href="http://searchsoftwarequality.techtarget.com/answer/Differentiating-between-Functional-and-Nonfunctional-Requirements" rel="nofollow noopener noreferrer external" target="_blank">Differentiating between Functional and Nonfunctional Requirements</a></li>
<li><a href="http://www.usabilityfirst.com/usability-methods/facilitated-brainstorming/" rel="nofollow noopener noreferrer external" target="_blank">Facilitated Brainstorming</a></li>
<li><a href="http://blog.abovethefolddesign.com/2010/11/11/5-powerful-ways-to-brainstorming-with-teams/" rel="nofollow noopener noreferrer external" target="_blank">5 powerful ways to brainstorming with teams/</a></li>
<li><a href="http://www.inspireux.com/2013/07/18/tips-for-structuring-better-brainstorming-sessions/" rel="nofollow noopener noreferrer external" target="_blank">ips for Structuring Better Brainstorming Sessions</a></li>
<li><a href="http://www.slideshare.net/jessicaivins/aiga-cincy-uxworkshop01" rel="nofollow noopener noreferrer external" target="_blank">Collaborative Brainstorming for Better UX Workshop</a></li>
<li><a href="http://asq.org/learn-about-quality/idea-creation-tools/overview/affinity.html" rel="nofollow noopener noreferrer external" target="_blank">WHAT IS AN AFFINITY DIAGRAM?</a></li>
<li><a href="https://www.mindtools.com/pages/article/newTMC_86.htm" rel="nofollow noopener noreferrer external" target="_blank">Affinity Diagrams</a></li>
<li><a href="http://infodesign.com.au/usabilityresources/affinitydiagramming/" rel="nofollow noopener noreferrer external" target="_blank">Affinity diagramming</a></li></ol></main>
<div class="divider mt-4 mb-0"></div>
<div><a href="/?tags=UX" class="btn btn-sm btn-ghost normal-case mt-2 mr-2 p-category">#UX
</a></div></div>
</article>
<footer id="footer" class="footer footer-center bg-base-300 text-base-content shadow-inner p-8 md:rounded-box sticky bottom-0 z-0 md:static "><div class="prose"><p><a href="/atom.xml" rel="noopener external" target="_blank">Feed</a>
<span class="mr-1">·</span><a href="/sitemap.xml" rel="noopener external" target="_blank">Sitemap</a>
<span class="mr-1">·</span><a href="/privacy" rel="noopener external" target="_blank">Pravicy</a>
<br>
Copyright © 2022
酸橘汁腌鱼
<br>
Powered by
<a rel="noopener external" target="_blank" class="tooltip tooltip-secondary hover:text-secondary" data-tip="🌸 [δ] - Based on MDsveX & SvelteKit 🌸" href="https://github.com/importantimport/urara">Urara
</a>
<br>
<!-- HTML_TAG_START --><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><!-- HTML_TAG_END --></p></div></footer></div></div></div>
<script type="module" data-sveltekit-hydrate="124vw56">
import { set_public_env, start } from "/_app/immutable/start-f4ec0a74.js";
set_public_env({});
start({
target: document.querySelector('[data-sveltekit-hydrate="124vw56"]').parentNode,
paths: {"base":"","assets":""},
session: {},
route: true,
spa: false,
trailing_slash: "never",
hydrate: {
status: 200,
error: null,
nodes: [0, 3],
params: {},
routeId: "2021-11-09-ux2"
}
});
</script><script type="application/json" sveltekit:data-type="data" sveltekit:data-url="/posts.json">{"status":200,"statusText":"","headers":{"content-type":"application/json; charset=utf-8"},"body":"[\n {\n \"title\": \"Vue.js 挑战练习\",\n \"created\": \"2022-08-12T00:00:00.000Z\",\n \"summary\": \"我的答案以及相关知识点\",\n \"tags\": [\n \"Vue\"\n ],\n \"slug\": \"/2022-08-12-vue-challenges.md\",\n \"path\": \"/2022-08-12-vue-challenges\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"Built-ins\",\n \"slug\": \"built-ins\"\n },\n {\n \"depth\": 3,\n \"title\": \"DOM 传送门\",\n \"slug\": \"dom-传送门\"\n },\n {\n \"depth\": 3,\n \"title\": \"优化性能的指令\",\n \"slug\": \"优化性能的指令\"\n },\n {\n \"depth\": 2,\n \"title\": \"CSS Features\",\n \"slug\": \"css-features\"\n },\n {\n \"depth\": 3,\n \"title\": \"动态 CSS\",\n \"slug\": \"动态-css\"\n },\n {\n \"depth\": 3,\n \"title\": \"全局 CSS\",\n \"slug\": \"全局-css\"\n },\n {\n \"depth\": 2,\n \"title\": \"Components\",\n \"slug\": \"components\"\n },\n {\n \"depth\": 3,\n \"title\": \"DOM 传送门\",\n \"slug\": \"dom-传送门-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"Props 验证\",\n \"slug\": \"props-验证\"\n },\n {\n \"depth\": 3,\n \"title\": \"函数式组件\",\n \"slug\": \"函数式组件\"\n },\n {\n \"depth\": 3,\n \"title\": \"渲染函数h()\",\n \"slug\": \"渲染函数h\"\n },\n {\n \"depth\": 3,\n \"title\": \"树组件\",\n \"slug\": \"树组件\"\n },\n {\n \"depth\": 2,\n \"title\": \"Composable Function\",\n \"slug\": \"composable-function\"\n },\n {\n \"depth\": 3,\n \"title\": \"切换器\",\n \"slug\": \"切换器\"\n },\n {\n \"depth\": 3,\n \"title\": \"计数器\",\n \"slug\": \"计数器\"\n },\n {\n \"depth\": 3,\n \"title\": \"实现本地存储函数\",\n \"slug\": \"实现本地存储函数\"\n },\n {\n \"depth\": 3,\n \"title\": \"鼠标坐标\",\n \"slug\": \"鼠标坐标\"\n },\n {\n \"depth\": 2,\n \"title\": \"Composition API\",\n \"slug\": \"composition-api\"\n },\n {\n \"depth\": 3,\n \"title\": \"生命周期钩子\",\n \"slug\": \"生命周期钩子\"\n },\n {\n \"depth\": 3,\n \"title\": \"ref 全家桶\",\n \"slug\": \"ref-全家桶\"\n },\n {\n \"depth\": 3,\n \"title\": \"响应性丢失\",\n \"slug\": \"响应性丢失\"\n },\n {\n \"depth\": 3,\n \"title\": \"可写的计算属性\",\n \"slug\": \"可写的计算属性\"\n },\n {\n \"depth\": 3,\n \"title\": \"watch 全家桶\",\n \"slug\": \"watch-全家桶\"\n },\n {\n \"depth\": 3,\n \"title\": \"浅层 ref\",\n \"slug\": \"浅层-ref\"\n },\n {\n \"depth\": 3,\n \"title\": \"依赖注入\",\n \"slug\": \"依赖注入\"\n },\n {\n \"depth\": 3,\n \"title\": \"Effect 作用域 API\",\n \"slug\": \"effect-作用域-api\"\n },\n {\n \"depth\": 3,\n \"title\": \"自定义 ref\",\n \"slug\": \"自定义-ref\"\n },\n {\n \"depth\": 2,\n \"title\": \"Directives\",\n \"slug\": \"directives\"\n },\n {\n \"depth\": 3,\n \"title\": \"大写\",\n \"slug\": \"大写\"\n },\n {\n \"depth\": 3,\n \"title\": \"优化性能的指令\",\n \"slug\": \"优化性能的指令-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"切换焦点指令\",\n \"slug\": \"切换焦点指令\"\n },\n {\n \"depth\": 3,\n \"title\": \"防抖点击指令\",\n \"slug\": \"防抖点击指令\"\n },\n {\n \"depth\": 3,\n \"title\": \"激活的样式-指令\",\n \"slug\": \"激活的样式-指令\"\n },\n {\n \"depth\": 3,\n \"title\": \"实现简易版v-model指令\",\n \"slug\": \"实现简易版v-model指令\"\n },\n {\n \"depth\": 2,\n \"title\": \"Event Handling\",\n \"slug\": \"event-handling\"\n },\n {\n \"depth\": 3,\n \"title\": \"阻止事件冒泡\",\n \"slug\": \"阻止事件冒泡\"\n },\n {\n \"depth\": 3,\n \"title\": \"按键修饰符\",\n \"slug\": \"按键修饰符\"\n },\n {\n \"depth\": 2,\n \"title\": \"Global API:General\",\n \"slug\": \"global-apigeneral\"\n },\n {\n \"depth\": 3,\n \"title\": \"下一次 DOM 更新\",\n \"slug\": \"下一次-dom-更新\"\n },\n {\n \"depth\": 2,\n \"title\": \"Lifecycle\",\n \"slug\": \"lifecycle\"\n },\n {\n \"depth\": 3,\n \"title\": \"生命周期钩子\",\n \"slug\": \"生命周期钩子-1\"\n },\n {\n \"depth\": 2,\n \"title\": \"Reactivity:Advanced\",\n \"slug\": \"reactivityadvanced\"\n },\n {\n \"depth\": 3,\n \"title\": \"浅层 ref\",\n \"slug\": \"浅层-ref-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"原始值 API\",\n \"slug\": \"原始值-api\"\n },\n {\n \"depth\": 3,\n \"title\": \"Effect 作用域 API\",\n \"slug\": \"effect-作用域-api-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"自定义 ref\",\n \"slug\": \"自定义-ref-1\"\n },\n {\n \"depth\": 2,\n \"title\": \"Reactivity:Core\",\n \"slug\": \"reactivitycore\"\n },\n {\n \"depth\": 3,\n \"title\": \"ref 全家桶\",\n \"slug\": \"ref-全家桶-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"可写的计算属性\",\n \"slug\": \"可写的计算属性-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"watch 全家桶\",\n \"slug\": \"watch-全家桶-1\"\n },\n {\n \"depth\": 2,\n \"title\": \"Reactivity:Utilities\",\n \"slug\": \"reactivityutilities\"\n },\n {\n \"depth\": 3,\n \"title\": \"响应性丟失\",\n \"slug\": \"响应性丟失\"\n },\n {\n \"depth\": 2,\n \"title\": \"Utility Function\",\n \"slug\": \"utility-function\"\n },\n {\n \"depth\": 3,\n \"title\": \"until\",\n \"slug\": \"until\"\n },\n {\n \"depth\": 2,\n \"title\": \"Web Components\",\n \"slug\": \"web-components\"\n },\n {\n \"depth\": 3,\n \"title\": \"自定义元素\",\n \"slug\": \"自定义元素\"\n }\n ],\n \"updated\": \"2022-08-13T08:21:08.878Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Monkey Patch\",\n \"created\": \"2022-08-06T00:00:00.000Z\",\n \"summary\": \"猴子打补丁\",\n \"toc\": false,\n \"tag\": [\n \"Notes\"\n ],\n \"slug\": \"/2022-08-06-notes/index.md\",\n \"path\": \"/2022-08-06-notes\",\n \"updated\": \"2022-08-07T04:36:02.907Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"我在看什么 · 7 月\",\n \"created\": \"2022-07-31T00:00:00.000Z\",\n \"summary\": \"eval / CSP&XSS / Commonplace Book ……\",\n \"tags\": [\n \"我在看什么\"\n ],\n \"image\": \"/2022-07-31-reading-7/july.webp\",\n \"slug\": \"/2022-07-31-reading-7/index.md\",\n \"path\": \"/2022-07-31-reading-7\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"前端\",\n \"slug\": \"前端\"\n },\n {\n \"depth\": 2,\n \"title\": \"后端\",\n \"slug\": \"后端\"\n },\n {\n \"depth\": 2,\n \"title\": \"什锦\",\n \"slug\": \"什锦\"\n },\n {\n \"depth\": 2,\n \"title\": \"Commonplace Book\",\n \"slug\": \"commonplace-book\"\n }\n ],\n \"updated\": \"2022-08-06T11:32:41.119Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"JS中的二进制数字\",\n \"created\": \"2022-07-27T00:00:00.000Z\",\n \"summary\": \"0b/0B和paresInt\",\n \"tags\": [\n \"JavsScript\"\n ],\n \"slug\": \"/2022-07-27-bin.md\",\n \"path\": \"/2022-07-27-bin\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"ES6+\",\n \"slug\": \"es6\"\n },\n {\n \"depth\": 2,\n \"title\": \"Before ES6\",\n \"slug\": \"before-es6\"\n }\n ],\n \"updated\": \"2022-08-11T17:12:21.128Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"created\": \"2022-07-26T00:00:00.000Z\",\n \"tags\": [\n \"XSS\",\n \"Notes\"\n ],\n \"slug\": \"/2022-07-23-notes-xss.md\",\n \"path\": \"/2022-07-23-notes-xss\",\n \"toc\": [\n {\n \"depth\": 3,\n \"title\": \"XSS 学习\",\n \"slug\": \"xss-学习\"\n }\n ],\n \"updated\": \"2022-08-11T17:39:51.841Z\",\n \"type\": \"note\",\n \"html\": \"\u003Ch3 id=\\\"xss-学习\\\">\u003Ca href=\\\"#xss-学习\\\">XSS 学习\u003C/a>\u003C/h3>\u003Cp>介绍文章：\u003C/p>\u003Cul>\u003Cli>\u003Ca href=\\\"https://tech.meituan.com/2018/09/27/fe-security.html\\\" rel=\\\"nofollow noopener noreferrer external\\\" target=\\\"_blank\\\">前端安全系列（一）：如何防止 XSS 攻击？ - 美团技术团队\u003C/a>\u003C/li>\u003Cli>\u003Ca href=\\\"https://developer.mozilla.org/zh-CN/docs/Glossary/Cross-site_scripting\\\" rel=\\\"nofollow noopener noreferrer external\\\" target=\\\"_blank\\\">Cross-site scripting（跨站脚本攻击） - 术语表 | MDN\u003C/a>\u003C/li>\u003C/ul>\u003Cp>练习：\u003C/p>\u003Cul>\u003Cli>\u003Ca href=\\\"https://prompt.ml/\\\" rel=\\\"nofollow noopener noreferrer external\\\" target=\\\"_blank\\\">prompt(1) to win\u003C/a>\u003C/li>\u003Cli>解答：\u003Ca href=\\\"https://github.com/cure53/XSSChallengeWiki/wiki/prompt.ml#level-1\\\" rel=\\\"nofollow noopener noreferrer external\\\" target=\\\"_blank\\\">prompt.ml\u003C/a>\u003C/li>\u003C/ul>\u003Cp>相关文章：\u003C/p>\u003Cul>\u003Cli>\u003Ca href=\\\"https://www.leavesongs.com/PENETRATION/xss-from-my-blog.html\\\" rel=\\\"nofollow noopener noreferrer external\\\" target=\\\"_blank\\\">我自己博客的一个 XSS 的故事 | 离别歌\u003C/a>\u003C/li>\u003C/ul>\"\n },\n {\n \"title\": \"D3.js 基础笔记\",\n \"created\": \"2022-07-23T00:00:00.000Z\",\n \"summary\": \"即使是FreeCodeCamp也要做笔记\",\n \"tags\": [\n \"D3.js\",\n \"数据可视化\"\n ],\n \"slug\": \"/2022-07-23-d3.md\",\n \"path\": \"/2022-07-23-d3\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"学习资源\",\n \"slug\": \"学习资源\"\n },\n {\n \"depth\": 2,\n \"title\": \"基础操作\",\n \"slug\": \"基础操作\"\n },\n {\n \"depth\": 3,\n \"title\": \"修改元素\",\n \"slug\": \"修改元素\"\n },\n {\n \"depth\": 3,\n \"title\": \"使用数据\",\n \"slug\": \"使用数据\"\n },\n {\n \"depth\": 3,\n \"title\": \"使用动态数据\",\n \"slug\": \"使用动态数据\"\n },\n {\n \"depth\": 3,\n \"title\": \"给元素添加内联样式\",\n \"slug\": \"给元素添加内联样式\"\n },\n {\n \"depth\": 3,\n \"title\": \"添加 Class\",\n \"slug\": \"添加-class\"\n },\n {\n \"depth\": 3,\n \"title\": \"标签\",\n \"slug\": \"标签\"\n },\n {\n \"depth\": 3,\n \"title\": \"添加工具提示 tooltip\",\n \"slug\": \"添加工具提示-tooltip\"\n },\n {\n \"depth\": 2,\n \"title\": \"SVG\",\n \"slug\": \"svg\"\n },\n {\n \"depth\": 3,\n \"title\": \"创建 SVG\",\n \"slug\": \"创建-svg\"\n },\n {\n \"depth\": 3,\n \"title\": \"反转 SVG 元素\",\n \"slug\": \"反转-svg-元素\"\n },\n {\n \"depth\": 3,\n \"title\": \"更改 SVG 元素的颜色\",\n \"slug\": \"更改-svg-元素的颜色\"\n },\n {\n \"depth\": 3,\n \"title\": \"SVG 图形\",\n \"slug\": \"svg-图形\"\n },\n {\n \"depth\": 4,\n \"title\": \"矩形\",\n \"slug\": \"矩形\"\n },\n {\n \"depth\": 4,\n \"title\": \"圆形\",\n \"slug\": \"圆形\"\n },\n {\n \"depth\": 2,\n \"title\": \"比例尺\",\n \"slug\": \"比例尺\"\n },\n {\n \"depth\": 3,\n \"title\": \"创建线性比例\",\n \"slug\": \"创建线性比例\"\n },\n {\n \"depth\": 4,\n \"title\": \"线性缩放\",\n \"slug\": \"线性缩放\"\n },\n {\n \"depth\": 4,\n \"title\": \"按比例设置域和范围\",\n \"slug\": \"按比例设置域和范围\"\n },\n {\n \"depth\": 4,\n \"title\": \"最小值最大值\",\n \"slug\": \"最小值最大值\"\n },\n {\n \"depth\": 3,\n \"title\": \"使用动态比例\",\n \"slug\": \"使用动态比例\"\n },\n {\n \"depth\": 3,\n \"title\": \"使用预定义的比例放置元素\",\n \"slug\": \"使用预定义的比例放置元素\"\n },\n {\n \"depth\": 3,\n \"title\": \"添加坐标轴\",\n \"slug\": \"添加坐标轴\"\n },\n {\n \"depth\": 2,\n \"title\": \"常见图表\",\n \"slug\": \"常见图表\"\n },\n {\n \"depth\": 3,\n \"title\": \"散点图\",\n \"slug\": \"散点图\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.463Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"css和js两种方式实现div右移1000px动画\",\n \"created\": \"2022-07-20T00:00:00.000Z\",\n \"summary\": \"用keyframes和timer\",\n \"tags\": [\n \"CSS\",\n \"JavaScript\",\n \"animation\"\n ],\n \"slug\": \"/2022-07-20-animation/index.svelte.md\",\n \"path\": \"/2022-07-20-animation\",\n \"toc\": [],\n \"updated\": \"2022-08-01T03:03:33.463Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"我在看什么 · 5月\",\n \"created\": \"2022-07-16T00:00:00.000Z\",\n \"summary\": \"Anki / JSDoc / 蘑菇 / Music-Map ……\",\n \"tags\": [\n \"我在看什么\"\n ],\n \"image\": \"/2022-07-16-reading-5/May1.jpg\",\n \"slug\": \"/2022-07-16-reading-5/index.md\",\n \"path\": \"/2022-07-16-reading-5\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"Productivity\",\n \"slug\": \"productivity\"\n },\n {\n \"depth\": 2,\n \"title\": \"有趣的\",\n \"slug\": \"有趣的\"\n }\n ],\n \"updated\": \"2022-08-11T16:29:56.272Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"我在看什么 · 6月\",\n \"created\": \"2022-07-15T00:00:00.000Z\",\n \"summary\": \"Vue / 网页性能优化 / npm ……\",\n \"tags\": [\n \"我在看什么\"\n ],\n \"image\": \"/2022-07-15-reading-6/june.png\",\n \"slug\": \"/2022-07-15-reading-6/index.md\",\n \"path\": \"/2022-07-15-reading-6\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"编程相关\",\n \"slug\": \"编程相关\"\n },\n {\n \"depth\": 3,\n \"title\": \"前端\",\n \"slug\": \"前端\"\n },\n {\n \"depth\": 3,\n \"title\": \"后端\",\n \"slug\": \"后端\"\n },\n {\n \"depth\": 2,\n \"title\": \"其他\",\n \"slug\": \"其他\"\n },\n {\n \"depth\": 2,\n \"title\": \"互联网哲学\",\n \"slug\": \"互联网哲学\"\n }\n ],\n \"updated\": \"2022-08-06T11:32:41.091Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"SQL 基础笔记\",\n \"created\": \"2022-07-13T00:00:00.000Z\",\n \"summary\": \"关于增改删查的方式\",\n \"tags\": [\n \"SQL\"\n ],\n \"slug\": \"/2022-07-13-sql.md\",\n \"path\": \"/2022-07-13-sql\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"SQL vs. NOSQL\",\n \"slug\": \"sql-vs-nosql\"\n },\n {\n \"depth\": 2,\n \"title\": \"CRUD\",\n \"slug\": \"crud\"\n },\n {\n \"depth\": 3,\n \"title\": \"Create\",\n \"slug\": \"create\"\n },\n {\n \"depth\": 3,\n \"title\": \"Read\",\n \"slug\": \"read\"\n },\n {\n \"depth\": 3,\n \"title\": \"Update\",\n \"slug\": \"update\"\n },\n {\n \"depth\": 3,\n \"title\": \"Destory\",\n \"slug\": \"destory\"\n },\n {\n \"depth\": 2,\n \"title\": \"Understanding SQL Relationships, Foreign Keys and Inner Joins\",\n \"slug\": \"understanding-sql-relationships-foreign-keys-and-inner-joins\"\n },\n {\n \"depth\": 3,\n \"title\": \"FOREIGN KEY\",\n \"slug\": \"foreign-key\"\n },\n {\n \"depth\": 3,\n \"title\": \"INNER JOIN\",\n \"slug\": \"inner-join\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.359Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"一些设计作品\",\n \"created\": \"2022-07-13T00:00:00.000Z\",\n \"summary\": \"logo / UI / 包装 / 儿童玩具 ……\",\n \"slug\": \"/2022-07-13-work/index.md\",\n \"path\": \"/2022-07-13-work\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"二十四节气茶包\",\n \"slug\": \"二十四节气茶包\"\n },\n {\n \"depth\": 2,\n \"title\": \"UI 设计\",\n \"slug\": \"ui-设计\"\n },\n {\n \"depth\": 2,\n \"title\": \"饼干包装\",\n \"slug\": \"饼干包装\"\n },\n {\n \"depth\": 2,\n \"title\": \"Logo\",\n \"slug\": \"logo\"\n },\n {\n \"depth\": 2,\n \"title\": \"排版装帧\",\n \"slug\": \"排版装帧\"\n },\n {\n \"depth\": 2,\n \"title\": \"儿童玩具\",\n \"slug\": \"儿童玩具\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.433Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Privacy Policy 隐私声明\",\n \"created\": \"2022-06-19T00:00:00.000Z\",\n \"flags\": [\n \"unlisted\"\n ],\n \"slug\": \"/privacy/index.svelte.md\",\n \"path\": \"/privacy\",\n \"toc\": [],\n \"updated\": \"2022-08-01T03:03:33.476Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"VPS · Jellyfin结合Cloudreve开启线上影院\",\n \"created\": \"2022-06-15T00:00:00.000Z\",\n \"summary\": \"基于 Docker 和 Nginx 的信心搭建过程\",\n \"image\": \"/2022-06-15-jellyfin/1.jpg\",\n \"tags\": [\n \"Nginx\",\n \"VPS\",\n \"Docker\"\n ],\n \"slug\": \"/2022-06-15-jellyfin/index.md\",\n \"path\": \"/2022-06-15-jellyfin\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"关于 Jellyfin\",\n \"slug\": \"关于-jellyfin\"\n },\n {\n \"depth\": 2,\n \"title\": \"Cloudrever\",\n \"slug\": \"cloudrever\"\n },\n {\n \"depth\": 3,\n \"title\": \"反代\",\n \"slug\": \"反代\"\n },\n {\n \"depth\": 3,\n \"title\": \"一些配置\",\n \"slug\": \"一些配置\"\n },\n {\n \"depth\": 2,\n \"title\": \"Jellyfin\",\n \"slug\": \"jellyfin\"\n },\n {\n \"depth\": 3,\n \"title\": \"搭建\",\n \"slug\": \"搭建\"\n },\n {\n \"depth\": 3,\n \"title\": \"反代\",\n \"slug\": \"反代-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"媒体库路径\",\n \"slug\": \"媒体库路径\"\n },\n {\n \"depth\": 3,\n \"title\": \"插件安装\",\n \"slug\": \"插件安装\"\n },\n {\n \"depth\": 3,\n \"title\": \"主题和语言\",\n \"slug\": \"主题和语言\"\n }\n ],\n \"updated\": \"2022-08-06T11:32:41.091Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"VPS · 配置 Cloudflare 的免费 SSL 证书\",\n \"created\": \"2022-06-12T00:00:00.000Z\",\n \"summary\": \"关于如何为多个域名配置SSL证书的操作笔记\",\n \"tags\": [\n \"Nginx\",\n \"VPS\"\n ],\n \"slug\": \"/2022-06-12-cloudflare.md\",\n \"path\": \"/2022-06-12-cloudflare\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. 创建证书\",\n \"slug\": \"1-创建证书\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 密钥上传到 VPS\",\n \"slug\": \"2-密钥上传到-vps\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 修改 Nginx 配置\",\n \"slug\": \"3-修改-nginx-配置\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.353Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"实现一个返回页面顶部的 Vue3 组件\",\n \"created\": \"2022-06-10T00:00:00.000Z\",\n \"summary\": \"结合流畅的动画平滑滚动到页面顶部\",\n \"tags\": [\n \"Vue3\",\n \"BootStrap\"\n ],\n \"slug\": \"/2022-06-10-backtotop.md\",\n \"path\": \"/2022-06-10-backtotop\",\n \"toc\": [],\n \"updated\": \"2022-08-01T11:38:16.754Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Contabo OSS + PicGo 图床配置\",\n \"created\": \"2022-05-30T00:00:00.000Z\",\n \"summary\": \"OSS自建图床笔记\",\n \"tags\": [\n \"OSS\"\n ],\n \"slug\": \"/2022-05-30-contabo-oss.md\",\n \"path\": \"/2022-05-30-contabo-oss\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. 购买套餐\",\n \"slug\": \"1-购买套餐\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 创建 Bucket\",\n \"slug\": \"2-创建-bucket\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 安装 PicGo 插件\",\n \"slug\": \"3-安装-picgo-插件\"\n },\n {\n \"depth\": 2,\n \"title\": \"4. 配置插件\",\n \"slug\": \"4-配置插件\"\n },\n {\n \"depth\": 3,\n \"title\": \"应用密钥 ID 和 应用密钥\",\n \"slug\": \"应用密钥-id-和-应用密钥\"\n },\n {\n \"depth\": 3,\n \"title\": \"桶 / 自定义节点 /自定义域名\",\n \"slug\": \"桶--自定义节点-自定义域名\"\n },\n {\n \"depth\": 3,\n \"title\": \"其他设置\",\n \"slug\": \"其他设置\"\n },\n {\n \"depth\": 2,\n \"title\": \"5. 其他\",\n \"slug\": \"5-其他\"\n },\n {\n \"depth\": 3,\n \"title\": \"Obsidian 中的图床设置\",\n \"slug\": \"obsidian-中的图床设置\"\n },\n {\n \"depth\": 3,\n \"title\": \"更多 PicGO 插件：\",\n \"slug\": \"更多-picgo-插件\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.353Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"为博客写一个Project showcase 页面\",\n \"created\": \"2022-05-26T00:00:00.000Z\",\n \"summary\": \"第一次Pull Request的经历\",\n \"tags\": [\n \"Svelte\",\n \"Open Source\"\n ],\n \"slug\": \"/2022-05-26-write-a-page-template.md\",\n \"path\": \"/2022-05-26-write-a-page-template\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. 分析需求\",\n \"slug\": \"1-分析需求\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 画原型图\",\n \"slug\": \"2-画原型图\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 创建组件样式 CSS\",\n \"slug\": \"2-创建组件样式-css\"\n },\n {\n \"depth\": 2,\n \"title\": \"4. 编写组件代码\",\n \"slug\": \"4-编写组件代码\"\n },\n {\n \"depth\": 3,\n \"title\": \"数据\",\n \"slug\": \"数据\"\n },\n {\n \"depth\": 3,\n \"title\": \"组件\",\n \"slug\": \"组件\"\n },\n {\n \"depth\": 3,\n \"title\": \"页面\",\n \"slug\": \"页面\"\n },\n {\n \"depth\": 3,\n \"title\": \"响应式布局\",\n \"slug\": \"响应式布局\"\n },\n {\n \"depth\": 2,\n \"title\": \"5. 测试\",\n \"slug\": \"5-测试\"\n },\n {\n \"depth\": 2,\n \"title\": \"6. Pull request 到 Github\",\n \"slug\": \"6-pull-request-到-github\"\n },\n {\n \"depth\": 2,\n \"title\": \"7. Last but not least\",\n \"slug\": \"7-last-but-not-least\"\n }\n ],\n \"updated\": \"2022-08-01T11:36:42.589Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Git · 常用操作笔记\",\n \"created\": \"2022-05-25T00:00:00.000Z\",\n \"summary\": \"每次更新博客进行的操作以及常见错误处理\",\n \"tags\": [\n \"Git\"\n ],\n \"slug\": \"/2022-05-25-git.md\",\n \"path\": \"/2022-05-25-git\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"每次更新博客进行的操作\",\n \"slug\": \"每次更新博客进行的操作\"\n },\n {\n \"depth\": 3,\n \"title\": \"1. 追踪所有文件\",\n \"slug\": \"1-追踪所有文件\"\n },\n {\n \"depth\": 3,\n \"title\": \"2. 提交上传信息\",\n \"slug\": \"2-提交上传信息\"\n },\n {\n \"depth\": 3,\n \"title\": \"3. push 到 Github\",\n \"slug\": \"3-push-到-github\"\n },\n {\n \"depth\": 2,\n \"title\": \"常用 Git 操作\",\n \"slug\": \"常用-git-操作\"\n },\n {\n \"depth\": 2,\n \"title\": \"常见问题\",\n \"slug\": \"常见问题\"\n },\n {\n \"depth\": 3,\n \"title\": \"版本回滚\",\n \"slug\": \"版本回滚\"\n },\n {\n \"depth\": 3,\n \"title\": \"报错处理\",\n \"slug\": \"报错处理\"\n },\n {\n \"depth\": 3,\n \"title\": \"博客相关\",\n \"slug\": \"博客相关\"\n },\n {\n \"depth\": 3,\n \"title\": \"其他\",\n \"slug\": \"其他\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.322Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Hypothesis 使用小记\",\n \"created\": \"2022-05-25T00:00:00.000Z\",\n \"summary\": \"Hypothesis同步到Obsidian / Logseq的方法\",\n \"tags\": [\n \"Logseq\",\n \"Obsidian\"\n ],\n \"slug\": \"/2022-05-25-hypothesis/index.md\",\n \"path\": \"/2022-05-25-hypothesis\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"同步到 Logseq\",\n \"slug\": \"同步到-logseq\"\n },\n {\n \"depth\": 3,\n \"title\": \"1. 打开插件系统开关\",\n \"slug\": \"1-打开插件系统开关\"\n },\n {\n \"depth\": 3,\n \"title\": \"2. 安装 Hypothesis 插件\",\n \"slug\": \"2-安装-hypothesis-插件\"\n },\n {\n \"depth\": 3,\n \"title\": \"3. 获取 API Token\",\n \"slug\": \"3-获取-api-token\"\n },\n {\n \"depth\": 3,\n \"title\": \"4. 同步笔记\",\n \"slug\": \"4-同步笔记\"\n },\n {\n \"depth\": 3,\n \"title\": \"5. 修改笔记模板\",\n \"slug\": \"5-修改笔记模板\"\n },\n {\n \"depth\": 2,\n \"title\": \"同步到 Obsidian\",\n \"slug\": \"同步到-obsidian\"\n },\n {\n \"depth\": 3,\n \"title\": \"1. 安装 Hypothesis 插件\",\n \"slug\": \"1-安装-hypothesis-插件\"\n },\n {\n \"depth\": 3,\n \"title\": \"2. API 配置\",\n \"slug\": \"2-api-配置\"\n },\n {\n \"depth\": 3,\n \"title\": \"3. 笔记模板配置\",\n \"slug\": \"3-笔记模板配置\"\n },\n {\n \"depth\": 3,\n \"title\": \"4. 更新笔记\",\n \"slug\": \"4-更新笔记\"\n },\n {\n \"depth\": 2,\n \"title\": \"订阅 Hypothesis 的 RSS\",\n \"slug\": \"订阅-hypothesis-的-rss\"\n },\n {\n \"depth\": 2,\n \"title\": \"其他参考\",\n \"slug\": \"其他参考\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.353Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"SQL · 在 Windows 10 上安装 sqlite\",\n \"created\": \"2022-05-23T00:00:00.000Z\",\n \"summary\": \"写给计算机小白的 sqlite 安装笔记\",\n \"tags\": [\n \"SQL\"\n ],\n \"slug\": \"/2022-05-23-win-sql/index.md\",\n \"path\": \"/2022-05-23-win-sql\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. 下载二进制文件\",\n \"slug\": \"1-下载二进制文件\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 创建安装文件夹\",\n \"slug\": \"2-创建安装文件夹\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 添加环境变量\",\n \"slug\": \"3-添加环境变量\"\n },\n {\n \"depth\": 2,\n \"title\": \"4. 命令提示符中查看 sqlite3 版本\",\n \"slug\": \"4-命令提示符中查看-sqlite3-版本\"\n },\n {\n \"depth\": 2,\n \"title\": \"常用命令行\",\n \"slug\": \"常用命令行\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.303Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"JavaScript · 数组中的copyWithin方法\",\n \"created\": \"2022-05-08T17:13:47.671Z\",\n \"summary\": \"一种数组内元素复制的方法\",\n \"tags\": [\n \"JavaScript\"\n ],\n \"lastmod\": \"2022-05-09T02:27:47.533Z\",\n \"slug\": \"/2022-05-09-copywithin/index.md\",\n \"path\": \"/2022-05-09-copywithin\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"简介\",\n \"slug\": \"简介\"\n },\n {\n \"depth\": 3,\n \"title\": \"语法：\",\n \"slug\": \"语法\"\n },\n {\n \"depth\": 2,\n \"title\": \"参数\",\n \"slug\": \"参数\"\n },\n {\n \"depth\": 3,\n \"title\": \"target\",\n \"slug\": \"target\"\n },\n {\n \"depth\": 3,\n \"title\": \"start\",\n \"slug\": \"start\"\n },\n {\n \"depth\": 3,\n \"title\": \"end\",\n \"slug\": \"end\"\n },\n {\n \"depth\": 2,\n \"title\": \"例子\",\n \"slug\": \"例子\"\n },\n {\n \"depth\": 3,\n \"title\": \"源码\",\n \"slug\": \"源码\"\n },\n {\n \"depth\": 3,\n \"title\": \"可视化\",\n \"slug\": \"可视化\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.294Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"VPS 安全初始化\",\n \"created\": \"2022-05-06T00:00:00.000Z\",\n \"summary\": \"上次 VPS 被别人暴力破解了，一哭二闹三重装之后，有了本文\",\n \"tags\": [\n \"VPS\",\n \"Self hosted\"\n ],\n \"slug\": \"/2022-05-07-vps-init.md\",\n \"path\": \"/2022-05-07-vps-init\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"思路\",\n \"slug\": \"思路\"\n },\n {\n \"depth\": 3,\n \"title\": \"日常防护\",\n \"slug\": \"日常防护\"\n },\n {\n \"depth\": 3,\n \"title\": \"安全检查\",\n \"slug\": \"安全检查\"\n },\n {\n \"depth\": 2,\n \"title\": \"1. 创建新用户\",\n \"slug\": \"1-创建新用户\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 配置 SSH-keys\",\n \"slug\": \"2-配置-ssh-keys\"\n },\n {\n \"depth\": 3,\n \"title\": \"本地生成 SSH 密钥对\",\n \"slug\": \"本地生成-ssh-密钥对\"\n },\n {\n \"depth\": 3,\n \"title\": \"安装公钥\",\n \"slug\": \"安装公钥\"\n },\n {\n \"depth\": 3,\n \"title\": \"修改权限\",\n \"slug\": \"修改权限\"\n },\n {\n \"depth\": 3,\n \"title\": \"修改 sshd 配置文件\",\n \"slug\": \"修改-sshd-配置文件\"\n },\n {\n \"depth\": 3,\n \"title\": \"禁用密码登陆和改端口\",\n \"slug\": \"禁用密码登陆和改端口\"\n },\n {\n \"depth\": 3,\n \"title\": \"修改默认登陆端口\",\n \"slug\": \"修改默认登陆端口\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 安装 ClamAV\",\n \"slug\": \"3-安装-clamav\"\n },\n {\n \"depth\": 3,\n \"title\": \"安装\",\n \"slug\": \"安装\"\n },\n {\n \"depth\": 3,\n \"title\": \"更新病毒数据库\",\n \"slug\": \"更新病毒数据库\"\n },\n {\n \"depth\": 3,\n \"title\": \"开机启动\",\n \"slug\": \"开机启动\"\n },\n {\n \"depth\": 3,\n \"title\": \"下载 ClamAV 数据库\",\n \"slug\": \"下载-clamav-数据库\"\n },\n {\n \"depth\": 3,\n \"title\": \"限制 Clamscan CPU 使用率\",\n \"slug\": \"限制-clamscan-cpu-使用率\"\n },\n {\n \"depth\": 3,\n \"title\": \"常见 CLI\",\n \"slug\": \"常见-cli\"\n },\n {\n \"depth\": 3,\n \"title\": \"ClamAV 返回码\",\n \"slug\": \"clamav-返回码\"\n },\n {\n \"depth\": 2,\n \"title\": \"4. 安装 Fail2ban\",\n \"slug\": \"4-安装-fail2ban\"\n },\n {\n \"depth\": 3,\n \"title\": \"准备\",\n \"slug\": \"准备\"\n },\n {\n \"depth\": 3,\n \"title\": \"安装\",\n \"slug\": \"安装-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"修改配置：\",\n \"slug\": \"修改配置\"\n },\n {\n \"depth\": 2,\n \"title\": \"5. SSL 证书相关\",\n \"slug\": \"5-ssl-证书相关\"\n }\n ],\n \"updated\": \"2022-08-01T03:03:33.291Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"About\",\n \"created\": \"2022-05-06T00:00:00.000Z\",\n \"updated\": \"2022-05-06T00:00:00.000Z\",\n \"flags\": [\n \"unlisted\"\n ],\n \"lastmod\": \"2022-05-20T04:07:08.760Z\",\n \"slug\": \"/about/index.svelte.md\",\n \"path\": \"/about\",\n \"toc\": [\n {\n \"depth\": 3,\n \"title\": \"写码进度\",\n \"slug\": \"写码进度\"\n },\n {\n \"depth\": 3,\n \"title\": \"其他站点\",\n \"slug\": \"其他站点\"\n },\n {\n \"depth\": 3,\n \"title\": \"博客日志\",\n \"slug\": \"博客日志\"\n }\n ],\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · 解决 Chrome 中小于12px的字体不显示的问题\",\n \"lastmod\": \"2022-04-07T07:36:23.629Z\",\n \"summary\": \"先用scale总体缩小再补上减少的宽度\",\n \"created\": \"2022-03-29T13:46:29.228Z\",\n \"tags\": [\n \"CSS\",\n \"CSS Trick\"\n ],\n \"categories\": [\n \"CSS\"\n ],\n \"toc\": false,\n \"slug\": \"/2022-03-29-12px.md\",\n \"path\": \"/2022-03-29-12px\",\n \"updated\": \"2022-08-06T10:50:25.374Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Miniflux · 保存文章到 Pocket 以及 RSS\",\n \"summary\": \"将 Miniflux 上的文章到保存到 Pocket/Instapaper,以及 RSS 相关文章和资源\",\n \"created\": \"2022-03-10T16:24:38.663Z\",\n \"preview\": \"\",\n \"draft\": \"\",\n \"tags\": [\n \"RSS\",\n \"Miniflux\"\n ],\n \"changelogs\": [\n {\n \"tag\": \"202203011\",\n \"summary\": [\n \"添加了`instapaper`的连接方式\",\n \"添加了Pocket按钮嵌入方式\"\n ]\n }\n ],\n \"lastmod\": \"2022-04-07T07:38:52.406Z\",\n \"slug\": \"/2022-03-11-miniflux-to-pocket.md\",\n \"path\": \"/2022-03-11-miniflux-to-pocket\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. 创建 Pocket Application\",\n \"slug\": \"1-创建-pocket-application\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 获取 Consumer Key 用户密钥\",\n \"slug\": \"2-获取-consumer-key-用户密钥\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 获取 Access Token 访问密钥\",\n \"slug\": \"3-获取-access-token-访问密钥\"\n },\n {\n \"depth\": 2,\n \"title\": \"其他\",\n \"slug\": \"其他\"\n },\n {\n \"depth\": 3,\n \"title\": \"1.为博客添加 Pocket 收藏按钮\",\n \"slug\": \"1为博客添加-pocket-收藏按钮\"\n },\n {\n \"depth\": 3,\n \"title\": \"2.用 Fever 同步到 Reeder\",\n \"slug\": \"2用-fever-同步到-reeder\"\n },\n {\n \"depth\": 3,\n \"title\": \"3.连接到 Instapaper\",\n \"slug\": \"3连接到-instapaper\"\n },\n {\n \"depth\": 2,\n \"title\": \"RSS 相关内容\",\n \"slug\": \"rss-相关内容\"\n },\n {\n \"depth\": 3,\n \"title\": \"1. Miniflux 搭建\",\n \"slug\": \"1-miniflux-搭建\"\n },\n {\n \"depth\": 3,\n \"title\": \"2. 其他选择\",\n \"slug\": \"2-其他选择\"\n },\n {\n \"depth\": 3,\n \"title\": \"3. RSS 生成\",\n \"slug\": \"3-rss-生成\"\n },\n {\n \"depth\": 3,\n \"title\": \"4. 看什么\",\n \"slug\": \"4-看什么\"\n },\n {\n \"depth\": 4,\n \"title\": \"5. 关于 RSS\",\n \"slug\": \"5-关于-rss\"\n }\n ],\n \"updated\": \"2022-08-06T10:51:23.859Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Forty页面仿写\",\n \"summary\": \"完成 HTML、CSS 代码编写，暂无 JavaScript\",\n \"created\": \"2022-03-10T08:38:17.227Z\",\n \"preview\": \"\",\n \"draft\": \"\",\n \"tags\": [\n \"CSS\",\n \"HTML\"\n ],\n \"lastmod\": \"2022-04-07T07:39:48.473Z\",\n \"slug\": \"/2022-03-10-forty.md\",\n \"path\": \"/2022-03-10-forty\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"题目\",\n \"slug\": \"题目\"\n },\n {\n \"depth\": 2,\n \"title\": \"示例图\",\n \"slug\": \"示例图\"\n },\n {\n \"depth\": 2,\n \"title\": \"Demo\",\n \"slug\": \"demo\"\n }\n ],\n \"updated\": \"2022-08-06T10:51:23.374Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · Tab选项卡\",\n \"summary\": \"一个纯 CSS 实现的 Tab 选项卡\",\n \"created\": \"2022-03-09T07:42:25.299Z\",\n \"tags\": [\n \"CSS\"\n ],\n \"categories\": [\n \"CSS\"\n ],\n \"lastmod\": \"2022-04-07T07:40:02.371Z\",\n \"slug\": \"/2022-03-09-css-tab.md\",\n \"path\": \"/2022-03-09-css-tab\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"原理\",\n \"slug\": \"原理\"\n },\n {\n \"depth\": 2,\n \"title\": \"代码\",\n \"slug\": \"代码\"\n },\n {\n \"depth\": 3,\n \"title\": \"HTML\",\n \"slug\": \"html\"\n },\n {\n \"depth\": 3,\n \"title\": \"CSS\",\n \"slug\": \"css\"\n },\n {\n \"depth\": 2,\n \"title\": \"参考\",\n \"slug\": \"参考\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:54.161Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"JavaScript · 打字机效果生成器\",\n \"summary\": \"用 JavaScript 实现网页打字机效果\",\n \"created\": \"2022-03-08T16:19:05.137Z\",\n \"tags\": [\n \"JavaScript\"\n ],\n \"categories\": [\n \"JavaScript\"\n ],\n \"lastmod\": \"2022-04-07T07:40:27.758Z\",\n \"slug\": \"/2022-03-09-typewriter.md\",\n \"path\": \"/2022-03-09-typewriter\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"题目\",\n \"slug\": \"题目\"\n },\n {\n \"depth\": 2,\n \"title\": \"解法\",\n \"slug\": \"解法\"\n },\n {\n \"depth\": 2,\n \"title\": \"参考\",\n \"slug\": \"参考\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:29.470Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"JavaScript · Caesar Cipher 凯撒加密\",\n \"summary\": \"用JavaScrpit编码实现凯撒加密算法\",\n \"created\": \"2022-03-08T16:01:08.850Z\",\n \"tags\": [\n \"JavaScript\"\n ],\n \"categories\": [\n \"JavaScript\"\n ],\n \"lastmod\": \"2022-04-07T07:20:47.694Z\",\n \"slug\": \"/2022-03-09-caesar-cipher.md\",\n \"path\": \"/2022-03-09-caesar-cipher\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"题目\",\n \"slug\": \"题目\"\n },\n {\n \"depth\": 2,\n \"title\": \"解法\",\n \"slug\": \"解法\"\n },\n {\n \"depth\": 3,\n \"title\": \"HTML\",\n \"slug\": \"html\"\n },\n {\n \"depth\": 3,\n \"title\": \"JS\",\n \"slug\": \"js\"\n },\n {\n \"depth\": 2,\n \"title\": \"参考\",\n \"slug\": \"参考\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:48.659Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"JavaScript · 字符串去重\",\n \"summary\": \"编码实现字符串去重\",\n \"created\": \"2022-03-07T13:55:21.090Z\",\n \"tags\": [\n \"JavaScript\"\n ],\n \"categories\": [\n \"JavaScript\"\n ],\n \"lastmod\": \"2022-04-07T07:20:30.550Z\",\n \"slug\": \"/2022-03-07-filter.md\",\n \"path\": \"/2022-03-07-filter\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"题目\",\n \"slug\": \"题目\"\n },\n {\n \"depth\": 2,\n \"title\": \"解法\",\n \"slug\": \"解法\"\n },\n {\n \"depth\": 2,\n \"title\": \"其他解法\",\n \"slug\": \"其他解法\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:50.151Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Obsidian · 网课学习笔记整理\",\n \"summary\": \"拆分整合的过程\",\n \"created\": \"2022-03-06T16:23:33.118Z\",\n \"tags\": [\n \"Obsidian\"\n ],\n \"categories\": [\n \"Obsidian\"\n ],\n \"lastmod\": \"2022-04-07T07:20:39.933Z\",\n \"slug\": \"/2022-03-07-obsidian-notes1.md\",\n \"path\": \"/2022-03-07-obsidian-notes1\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"具体的方法\",\n \"slug\": \"具体的方法\"\n },\n {\n \"depth\": 3,\n \"title\": \"Step1-构建地图\",\n \"slug\": \"step1-构建地图\"\n },\n {\n \"depth\": 3,\n \"title\": \"Step2-写课堂笔记\",\n \"slug\": \"step2-写课堂笔记\"\n },\n {\n \"depth\": 3,\n \"title\": \"Step3-重组笔记\",\n \"slug\": \"step3-重组笔记\"\n },\n {\n \"depth\": 4,\n \"title\": \"布局\",\n \"slug\": \"布局\"\n },\n {\n \"depth\": 4,\n \"title\": \"结构编辑\",\n \"slug\": \"结构编辑\"\n },\n {\n \"depth\": 4,\n \"title\": \"拆分笔记\",\n \"slug\": \"拆分笔记\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:46.655Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Airtable · 网页剪藏\",\n \"summary\": \"Airtable Web Cilpper设置\",\n \"created\": \"2022-03-06T05:58:29.026Z\",\n \"categories\": [\n \"实用技巧\"\n ],\n \"tags\": [\n \"实用技巧\"\n ],\n \"lastmod\": \"2022-04-16T12:54:20.049Z\",\n \"slug\": \"/2022-03-06-airtable.md\",\n \"path\": \"/2022-03-06-airtable\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"书签这回事\",\n \"slug\": \"书签这回事\"\n },\n {\n \"depth\": 2,\n \"title\": \"关于 Airtable\",\n \"slug\": \"关于-airtable\"\n },\n {\n \"depth\": 2,\n \"title\": \"怎么用 Airtable 剪切网页\",\n \"slug\": \"怎么用-airtable-剪切网页\"\n },\n {\n \"depth\": 3,\n \"title\": \"1. 创建表格\",\n \"slug\": \"1-创建表格\"\n },\n {\n \"depth\": 3,\n \"title\": \"2. 创建 app\",\n \"slug\": \"2-创建-app\"\n },\n {\n \"depth\": 3,\n \"title\": \"3. 配置剪切设置\",\n \"slug\": \"3-配置剪切设置\"\n },\n {\n \"depth\": 3,\n \"title\": \"4. Web Clipper 剪切\",\n \"slug\": \"4-web-clipper-剪切\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:42.370Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"JavaScript · 十进制数转二进制\",\n \"summary\": \"用JavaScript将十进制数转二进制数\",\n \"created\": \"2022-03-04T14:57:48.683Z\",\n \"draft\": \"\",\n \"tags\": [\n \"JavaScript\"\n ],\n \"categories\": [\n \"JavaScript\"\n ],\n \"lastmod\": \"2022-04-16T12:54:16.167Z\",\n \"type\": \"article\",\n \"slug\": \"/2022-03-04-decbin.md\",\n \"path\": \"/2022-03-04-decbin\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"题目\",\n \"slug\": \"题目\"\n },\n {\n \"depth\": 3,\n \"title\": \"Task1\",\n \"slug\": \"task1\"\n },\n {\n \"depth\": 3,\n \"title\": \"Task2\",\n \"slug\": \"task2\"\n },\n {\n \"depth\": 2,\n \"title\": \"解法\",\n \"slug\": \"解法\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:40.572Z\",\n \"html\": \"\"\n },\n {\n \"title\": \"JavaScript · 判断水仙花数\",\n \"summary\": \"用JavaScript判断水仙花数\",\n \"created\": \"2022-03-03T15:07:14.533Z\",\n \"categories\": [\n \"JavaScript\"\n ],\n \"tags\": [\n \"JavaScript\"\n ],\n \"slug\": \"/2022-03-03.md\",\n \"lastmod\": \"2022-04-07T07:20:02.340Z\",\n \"path\": \"/2022-03-03\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"题目\",\n \"slug\": \"题目\"\n },\n {\n \"depth\": 2,\n \"title\": \"解法\",\n \"slug\": \"解法\"\n },\n {\n \"depth\": 2,\n \"title\": \"参考\",\n \"slug\": \"参考\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:38.994Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"自建网页书签Flare\",\n \"created\": \"2022-02-20T14:04:17.000Z\",\n \"tags\": [\n \"Docker\",\n \"Self-hosted\"\n ],\n \"slug\": \"/flare.md\",\n \"summary\": \"通过Docker自建网页书签Flare\",\n \"lastmod\": \"2022-03-30T02:19:33.711Z\",\n \"path\": \"/flare\",\n \"toc\": [\n {\n \"depth\": 3,\n \"title\": \"1.创建 Flare 文件夹\",\n \"slug\": \"1创建-flare-文件夹\"\n },\n {\n \"depth\": 3,\n \"title\": \"2.下载包含示例的代码\",\n \"slug\": \"2下载包含示例的代码\"\n },\n {\n \"depth\": 3,\n \"title\": \"3.运行容器\",\n \"slug\": \"3运行容器\"\n },\n {\n \"depth\": 4,\n \"title\": \"方法 1：直接启动\",\n \"slug\": \"方法-1直接启动\"\n },\n {\n \"depth\": 4,\n \"title\": \"方法 2：通过 docker composer\",\n \"slug\": \"方法-2通过-docker-composer\"\n },\n {\n \"depth\": 3,\n \"title\": \"4.修改书签内容\",\n \"slug\": \"4修改书签内容\"\n },\n {\n \"depth\": 3,\n \"title\": \"5.用 nginx 反代和设置域名\",\n \"slug\": \"5用-nginx-反代和设置域名\"\n },\n {\n \"depth\": 3,\n \"title\": \"6.SSL 证书和其他书签\",\n \"slug\": \"6ssl-证书和其他书签\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:53.655Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"用 docker 安装 Halo 博客\",\n \"created\": \"2022-02-16T14:04:17.000Z\",\n \"tags\": [\n \"Docker\",\n \"Self-hosted\"\n ],\n \"slug\": \"/halo.md\",\n \"summary\": \"\",\n \"lastmod\": \"2022-05-07T05:39:19.169Z\",\n \"path\": \"/halo\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"准备\",\n \"slug\": \"准备\"\n },\n {\n \"depth\": 3,\n \"title\": \"解析域名\",\n \"slug\": \"解析域名\"\n },\n {\n \"depth\": 3,\n \"title\": \"安装 docker\",\n \"slug\": \"安装-docker\"\n },\n {\n \"depth\": 3,\n \"title\": \"检查端口开放情况\",\n \"slug\": \"检查端口开放情况\"\n },\n {\n \"depth\": 2,\n \"title\": \"安装 Halo\",\n \"slug\": \"安装-halo\"\n },\n {\n \"depth\": 3,\n \"title\": \"1.创建工作目录\",\n \"slug\": \"1创建工作目录\"\n },\n {\n \"depth\": 3,\n \"title\": \"2.下载示例配置文件到工作目录\",\n \"slug\": \"2下载示例配置文件到工作目录\"\n },\n {\n \"depth\": 3,\n \"title\": \"3. 编辑配置文件，配置数据库或者端口\",\n \"slug\": \"3-编辑配置文件配置数据库或者端口\"\n },\n {\n \"depth\": 4,\n \"title\": \"打开配置文件 application.yaml\",\n \"slug\": \"打开配置文件-applicationyaml\"\n },\n {\n \"depth\": 4,\n \"title\": \"修改配置\",\n \"slug\": \"修改配置\"\n },\n {\n \"depth\": 3,\n \"title\": \"4. 拉取最新的 Halo 镜像\",\n \"slug\": \"4-拉取最新的-halo-镜像\"\n },\n {\n \"depth\": 3,\n \"title\": \"5. 创建容器\",\n \"slug\": \"5-创建容器\"\n },\n {\n \"depth\": 3,\n \"title\": \"6. 打开安装引导界面。\",\n \"slug\": \"6-打开安装引导界面\"\n },\n {\n \"depth\": 2,\n \"title\": \"用 Nginx 反代\",\n \"slug\": \"用-nginx-反代\"\n },\n {\n \"depth\": 3,\n \"title\": \"1.安装 Nginx\",\n \"slug\": \"1安装-nginx\"\n },\n {\n \"depth\": 3,\n \"title\": \"2.配置 halo.conf\",\n \"slug\": \"2配置-haloconf\"\n },\n {\n \"depth\": 3,\n \"title\": \"3.重启 nginx\",\n \"slug\": \"3重启-nginx\"\n },\n {\n \"depth\": 2,\n \"title\": \"安装 certbot，为域名获取免费 SSL 证书\",\n \"slug\": \"安装-certbot为域名获取免费-ssl-证书\"\n },\n {\n \"depth\": 3,\n \"title\": \"1.安装 certbot\",\n \"slug\": \"1安装-certbot\"\n },\n {\n \"depth\": 3,\n \"title\": \"2.配置证书\",\n \"slug\": \"2配置证书\"\n },\n {\n \"depth\": 2,\n \"title\": \"其他\",\n \"slug\": \"其他\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:49.221Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"VS Code 技巧合集\",\n \"tags\": [\n \"实用技巧\"\n ],\n \"categories\": [\n \"实用技巧\"\n ],\n \"slug\": \"/vscode.md\",\n \"summary\": \"字体/插件/设置……\",\n \"created\": \"2022-01-27T13:40:28.920Z\",\n \"lastmod\": \"2022-03-30T02:20:34.584Z\",\n \"path\": \"/vscode\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"关闭 VS Code 中的 popup 面板\",\n \"slug\": \"关闭-vs-code-中的-popup-面板\"\n },\n {\n \"depth\": 2,\n \"title\": \"修改字体\",\n \"slug\": \"修改字体\"\n },\n {\n \"depth\": 2,\n \"title\": \"快捷键\",\n \"slug\": \"快捷键\"\n },\n {\n \"depth\": 2,\n \"title\": \"插件\",\n \"slug\": \"插件\"\n },\n {\n \"depth\": 2,\n \"title\": \"设置\",\n \"slug\": \"设置\"\n },\n {\n \"depth\": 2,\n \"title\": \"其他\",\n \"slug\": \"其他\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:29.477Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"两种免费发布Axure原型的方式\",\n \"created\": \"2022-01-21T00:11:17.000Z\",\n \"tags\": [\n \"实用技巧\"\n ],\n \"slug\": \"/axure.md\",\n \"summary\": \"通过Netlify和Vercel发布\",\n \"lastmod\": \"2022-04-07T07:24:20.692Z\",\n \"path\": \"/axure\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"Netlify\",\n \"slug\": \"netlify\"\n },\n {\n \"depth\": 2,\n \"title\": \"Vercel +Github\",\n \"slug\": \"vercel-github\"\n }\n ],\n \"updated\": \"2022-08-06T10:51:25.527Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · Argon主题的CSS修改\",\n \"created\": \"2022-01-16T14:04:17.000Z\",\n \"tags\": [\n \"CSS\"\n ],\n \"slug\": \"/argon.md\",\n \"summary\": \"基于最近所学，对当前Argon主题做了一些微小的调整\",\n \"lastmod\": \"2022-05-07T05:30:35.639Z\",\n \"path\": \"/argon\",\n \"toc\": [],\n \"updated\": \"2022-08-06T10:50:02.849Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · hover时图片放大的动效\",\n \"created\": \"2022-01-13T16:03:47.000Z\",\n \"slug\": \"/hover.md\",\n \"tags\": [\n \"CSS Trick\",\n \"CSS\"\n ],\n \"summary\": \"通过transform设置\",\n \"lastmod\": \"2022-05-07T05:30:52.029Z\",\n \"path\": \"/hover\",\n \"toc\": [],\n \"updated\": \"2022-08-06T10:49:47.292Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · 三种布局方式\",\n \"slug\": \"/css-layout.md\",\n \"tags\": [\n \"CSS\"\n ],\n \"created\": \"2022-01-13T10:07:00.000Z\",\n \"summary\": \"Float / Flexbox / Grid /\",\n \"lastmod\": \"2022-05-07T05:30:20.613Z\",\n \"path\": \"/css-layout\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"Overview\",\n \"slug\": \"overview\"\n },\n {\n \"depth\": 2,\n \"title\": \"Box-sizing\",\n \"slug\": \"box-sizing\"\n },\n {\n \"depth\": 3,\n \"title\": \"reset\",\n \"slug\": \"reset\"\n },\n {\n \"depth\": 2,\n \"title\": \"Float Layout\",\n \"slug\": \"float-layout\"\n },\n {\n \"depth\": 3,\n \"title\": \"left\",\n \"slug\": \"left\"\n },\n {\n \"depth\": 3,\n \"title\": \"right\",\n \"slug\": \"right\"\n },\n {\n \"depth\": 3,\n \"title\": \"ABSOLUTE POSITIONING VS. FLOATS\",\n \"slug\": \"absolute-positioning-vs-floats\"\n },\n {\n \"depth\": 3,\n \"title\": \"Clear Float\",\n \"slug\": \"clear-float\"\n },\n {\n \"depth\": 4,\n \"title\": \"方法 1: empty div\",\n \"slug\": \"方法-1-empty-div\"\n },\n {\n \"depth\": 4,\n \"title\": \"方法 2:clearfix hack\",\n \"slug\": \"方法-2clearfix-hack\"\n },\n {\n \"depth\": 2,\n \"title\": \"Flexbox\",\n \"slug\": \"flexbox\"\n },\n {\n \"depth\": 3,\n \"title\": \"Flex container\",\n \"slug\": \"flex-container\"\n },\n {\n \"depth\": 3,\n \"title\": \"Flex items\",\n \"slug\": \"flex-items\"\n },\n {\n \"depth\": 3,\n \"title\": \"Propetities\",\n \"slug\": \"propetities\"\n },\n {\n \"depth\": 4,\n \"title\": \"order\",\n \"slug\": \"order\"\n },\n {\n \"depth\": 4,\n \"title\": \"flex-grow\",\n \"slug\": \"flex-grow\"\n },\n {\n \"depth\": 4,\n \"title\": \"flex-basis\",\n \"slug\": \"flex-basis\"\n },\n {\n \"depth\": 4,\n \"title\": \"shorthand\",\n \"slug\": \"shorthand\"\n },\n {\n \"depth\": 2,\n \"title\": \"CSS Grid\",\n \"slug\": \"css-grid\"\n },\n {\n \"depth\": 3,\n \"title\": \"grid container\",\n \"slug\": \"grid-container\"\n },\n {\n \"depth\": 4,\n \"title\": \"Gap\",\n \"slug\": \"gap\"\n },\n {\n \"depth\": 4,\n \"title\": \"align tracks inside containers\",\n \"slug\": \"align-tracks-inside-containers\"\n },\n {\n \"depth\": 3,\n \"title\": \"grid items\",\n \"slug\": \"grid-items\"\n },\n {\n \"depth\": 4,\n \"title\": \"align items inside cells\",\n \"slug\": \"align-items-inside-cells\"\n },\n {\n \"depth\": 3,\n \"title\": \"fr\",\n \"slug\": \"fr\"\n },\n {\n \"depth\": 3,\n \"title\": \"implicit row\",\n \"slug\": \"implicit-row\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:54.807Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · Add margin to buttons\",\n \"slug\": \"/margin.md\",\n \"tags\": [\n \"CSS Trick\",\n \"CSS\"\n ],\n \"created\": \"2022-01-13T10:04:21.000Z\",\n \"summary\": \"用helper class为单个按钮加margin，防止元素复用时产生不必要的margin\",\n \"lastmod\": \"2022-05-07T05:32:49.156Z\",\n \"path\": \"/margin\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"HTML\",\n \"slug\": \"html\"\n },\n {\n \"depth\": 2,\n \"title\": \"CSS\",\n \"slug\": \"css\"\n },\n {\n \"depth\": 2,\n \"title\": \"为按钮增加内边距\",\n \"slug\": \"为按钮增加内边距\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:40.186Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · Reusable Grid\",\n \"slug\": \"/grid.md\",\n \"tags\": [\n \"CSS\"\n ],\n \"created\": \"2022-01-13T10:01:44.000Z\",\n \"summary\": \"可复用的CSS Grid设置\",\n \"lastmod\": \"2022-05-07T05:32:52.372Z\",\n \"path\": \"/grid\",\n \"toc\": [\n {\n \"depth\": 4,\n \"title\": \"CSS:\",\n \"slug\": \"css\"\n },\n {\n \"depth\": 4,\n \"title\": \"HTML:\",\n \"slug\": \"html\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:51.803Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · Rem in CSS\",\n \"slug\": \"/rem-css.md\",\n \"tags\": [\n \"CSS\"\n ],\n \"created\": \"2022-01-12T09:50:27.000Z\",\n \"summary\": \"CSS中的Rem是什么\",\n \"lastmod\": \"2022-05-07T05:32:42.708Z\",\n \"path\": \"/rem-css\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. set px\",\n \"slug\": \"1-set-px\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. percentage\",\n \"slug\": \"2-percentage\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:34.711Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"翻译 · Material Design3\",\n \"created\": \"2022-01-03T13:02:17.000Z\",\n \"tags\": [\n \"翻译\"\n ],\n \"categories\": [\n \"翻译\"\n ],\n \"slug\": \"/material.md\",\n \"summary\": \"部分翻译内容\",\n \"lastmod\": \"2022-05-07T05:30:39.510Z\",\n \"path\": \"/material\",\n \"toc\": [],\n \"updated\": \"2022-08-06T10:49:37.342Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"《用户体验要素》- 战略层（产品目标和用户需求）\",\n \"created\": \"2022-01-02T13:08:29.000Z\",\n \"categories\": [\n \"UX学习笔记\"\n ],\n \"tags\": [\n \"《用户体验要素》\",\n \"读书笔记\"\n ],\n \"summary\": \"第三章笔记\",\n \"lastmod\": \"2022-05-07T05:33:16.860Z\",\n \"slug\": \"/用户体验要素3.md\",\n \"path\": \"/用户体验要素3\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"产品目标\",\n \"slug\": \"产品目标\"\n },\n {\n \"depth\": 2,\n \"title\": \"用户需求\",\n \"slug\": \"用户需求\"\n },\n {\n \"depth\": 3,\n \"title\": \"用户细分( user segmentation）\",\n \"slug\": \"用户细分-user-segmentation\"\n },\n {\n \"depth\": 3,\n \"title\": \"用户研究(User Research）\",\n \"slug\": \"用户研究user-research\"\n },\n {\n \"depth\": 2,\n \"title\": \"团队角色和流程\",\n \"slug\": \"团队角色和流程\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:03.925Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"CSS · 基础笔记\",\n \"created\": \"2021-12-06T03:59:47.000Z\",\n \"slug\": \"/css-fundamental.md\",\n \"tags\": [\n \"CSS\"\n ],\n \"lastmod\": \"2022-05-07T05:30:27.910Z\",\n \"path\": \"/css-fundamental\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"css 是什么\",\n \"slug\": \"css-是什么\"\n },\n {\n \"depth\": 2,\n \"title\": \"分类\",\n \"slug\": \"分类\"\n },\n {\n \"depth\": 3,\n \"title\": \"inline CSS\",\n \"slug\": \"inline-css\"\n },\n {\n \"depth\": 3,\n \"title\": \"internal CSS\",\n \"slug\": \"internal-css\"\n },\n {\n \"depth\": 3,\n \"title\": \"external CSS\",\n \"slug\": \"external-css\"\n },\n {\n \"depth\": 2,\n \"title\": \"组成\",\n \"slug\": \"组成\"\n },\n {\n \"depth\": 2,\n \"title\": \"Selectors\",\n \"slug\": \"selectors\"\n },\n {\n \"depth\": 3,\n \"title\": \"descendent selector\",\n \"slug\": \"descendent-selector\"\n },\n {\n \"depth\": 3,\n \"title\": \"line selector\",\n \"slug\": \"line-selector\"\n },\n {\n \"depth\": 2,\n \"title\": \"id\",\n \"slug\": \"id\"\n },\n {\n \"depth\": 3,\n \"title\": \"class attributes\",\n \"slug\": \"class-attributes\"\n },\n {\n \"depth\": 3,\n \"title\": \"universal selector\",\n \"slug\": \"universal-selector\"\n },\n {\n \"depth\": 3,\n \"title\": \"body\",\n \"slug\": \"body\"\n },\n {\n \"depth\": 3,\n \"title\": \"优先级\",\n \"slug\": \"优先级\"\n },\n {\n \"depth\": 4,\n \"title\": \"conflicting between selectors\",\n \"slug\": \"conflicting-between-selectors\"\n },\n {\n \"depth\": 4,\n \"title\": \"inheritance\",\n \"slug\": \"inheritance\"\n },\n {\n \"depth\": 2,\n \"title\": \"颜色\",\n \"slug\": \"颜色\"\n },\n {\n \"depth\": 3,\n \"title\": \"RGB/RGBA\",\n \"slug\": \"rgbrgba\"\n },\n {\n \"depth\": 2,\n \"title\": \"Hexadecimal Colors\",\n \"slug\": \"hexadecimal-colors\"\n },\n {\n \"depth\": 2,\n \"title\": \"Pseudo Class\",\n \"slug\": \"pseudo-class\"\n },\n {\n \"depth\": 3,\n \"title\": \"第一个元素/最后一个元素\",\n \"slug\": \"第一个元素最后一个元素\"\n },\n {\n \"depth\": 3,\n \"title\": \"奇数/偶数 /特定次序\",\n \"slug\": \"奇数偶数-特定次序\"\n },\n {\n \"depth\": 3,\n \"title\": \"多种元素时\",\n \"slug\": \"多种元素时\"\n },\n {\n \"depth\": 3,\n \"title\": \"Style hyperlinks\",\n \"slug\": \"style-hyperlinks\"\n },\n {\n \"depth\": 4,\n \"title\": \"link\",\n \"slug\": \"link\"\n },\n {\n \"depth\": 4,\n \"title\": \"visited\",\n \"slug\": \"visited\"\n },\n {\n \"depth\": 4,\n \"title\": \"hover\",\n \"slug\": \"hover\"\n },\n {\n \"depth\": 4,\n \"title\": \"active\",\n \"slug\": \"active\"\n },\n {\n \"depth\": 2,\n \"title\": \"Pseudo Elements\",\n \"slug\": \"pseudo-elements\"\n },\n {\n \"depth\": 3,\n \"title\": \"adjacent sibiling selector\",\n \"slug\": \"adjacent-sibiling-selector\"\n },\n {\n \"depth\": 3,\n \"title\": \"after\",\n \"slug\": \"after\"\n },\n {\n \"depth\": 3,\n \"title\": \"before\",\n \"slug\": \"before\"\n },\n {\n \"depth\": 2,\n \"title\": \"Box Model\",\n \"slug\": \"box-model\"\n },\n {\n \"depth\": 3,\n \"title\": \"Type of boxes:\",\n \"slug\": \"type-of-boxes\"\n },\n {\n \"depth\": 4,\n \"title\": \"inline boxes\",\n \"slug\": \"inline-boxes\"\n },\n {\n \"depth\": 4,\n \"title\": \"block-level boxes\",\n \"slug\": \"block-level-boxes\"\n },\n {\n \"depth\": 4,\n \"title\": \"inline-block boxes\",\n \"slug\": \"inline-block-boxes\"\n },\n {\n \"depth\": 3,\n \"title\": \"padding\",\n \"slug\": \"padding\"\n },\n {\n \"depth\": 4,\n \"title\": \"reset margin ane padding\",\n \"slug\": \"reset-margin-ane-padding\"\n },\n {\n \"depth\": 3,\n \"title\": \"margin\",\n \"slug\": \"margin\"\n },\n {\n \"depth\": 4,\n \"title\": \"collapsing margins\",\n \"slug\": \"collapsing-margins\"\n },\n {\n \"depth\": 3,\n \"title\": \"Dimensions\",\n \"slug\": \"dimensions\"\n },\n {\n \"depth\": 4,\n \"title\": \"width\",\n \"slug\": \"width\"\n },\n {\n \"depth\": 2,\n \"title\": \"position\",\n \"slug\": \"position\"\n },\n {\n \"depth\": 3,\n \"title\": \"Normal Flow\",\n \"slug\": \"normal-flow\"\n },\n {\n \"depth\": 3,\n \"title\": \"Absolute Position\",\n \"slug\": \"absolute-position\"\n },\n {\n \"depth\": 3,\n \"title\": \"centering page\",\n \"slug\": \"centering-page\"\n },\n {\n \"depth\": 2,\n \"title\": \"基本操作\",\n \"slug\": \"基本操作\"\n },\n {\n \"depth\": 3,\n \"title\": \"CSS 注释\",\n \"slug\": \"css-注释\"\n },\n {\n \"depth\": 3,\n \"title\": \"Fix bugs\",\n \"slug\": \"fix-bugs\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:56.359Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"HTML · 基础笔记\",\n \"created\": \"2021-12-06T03:59:47.000Z\",\n \"slug\": \"/html-basis.md\",\n \"tags\": [\n \"HTML\"\n ],\n \"lastmod\": \"2022-05-07T05:30:47.655Z\",\n \"path\": \"/html-basis\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"HTML 是什么\",\n \"slug\": \"html-是什么\"\n },\n {\n \"depth\": 2,\n \"title\": \"基本组成\",\n \"slug\": \"基本组成\"\n },\n {\n \"depth\": 2,\n \"title\": \"框架\",\n \"slug\": \"框架\"\n },\n {\n \"depth\": 2,\n \"title\": \"attributes\",\n \"slug\": \"attributes\"\n },\n {\n \"depth\": 2,\n \"title\": \"tags\",\n \"slug\": \"tags\"\n },\n {\n \"depth\": 2,\n \"title\": \"HTML entity\",\n \"slug\": \"html-entity\"\n },\n {\n \"depth\": 2,\n \"title\": \"semantic HTML\",\n \"slug\": \"semantic-html\"\n },\n {\n \"depth\": 2,\n \"title\": \"空格\",\n \"slug\": \"空格\"\n },\n {\n \"depth\": 2,\n \"title\": \"当 div 中用 css 设置了图片时\",\n \"slug\": \"当-div-中用-css-设置了图片时\"\n },\n {\n \"depth\": 2,\n \"title\": \"随堂练习\",\n \"slug\": \"随堂练习\"\n },\n {\n \"depth\": 3,\n \"title\": \"商品卡片\",\n \"slug\": \"商品卡片\"\n },\n {\n \"depth\": 3,\n \"title\": \"分页器 pagination\",\n \"slug\": \"分页器-pagination\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:44.906Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"《用户体验要素》- 认识这些要素\",\n \"summary\": \"第二章笔记\",\n \"created\": \"2021-12-06T03:59:47.000Z\",\n \"categories\": [\n \"UX学习笔记\",\n \"《用户体验要素》\"\n ],\n \"tags\": [\n \"读书笔记\",\n \"《用户体验要素》\"\n ],\n \"hidden\": false,\n \"draft\": false,\n \"slug\": \"/用户体验要素2.md\",\n \"lastmod\": \"2022-04-16T12:55:45.413Z\",\n \"path\": \"/用户体验要素2\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"五个层面\",\n \"slug\": \"五个层面\"\n },\n {\n \"depth\": 2,\n \"title\": \"表现层 (surface)\",\n \"slug\": \"表现层-surface\"\n },\n {\n \"depth\": 2,\n \"title\": \"框架层 (skeleton)\",\n \"slug\": \"框架层-skeleton\"\n },\n {\n \"depth\": 2,\n \"title\": \"结构层（structure）\",\n \"slug\": \"结构层structure\"\n },\n {\n \"depth\": 2,\n \"title\": \"范围层 （scope）\",\n \"slug\": \"范围层-scope\"\n },\n {\n \"depth\": 2,\n \"title\": \"战略层 （strategy）\",\n \"slug\": \"战略层-strategy\"\n },\n {\n \"depth\": 2,\n \"title\": \"如何建设这五个层面？\",\n \"slug\": \"如何建设这五个层面\"\n },\n {\n \"depth\": 3,\n \"title\": \"自下而上地建设\",\n \"slug\": \"自下而上地建设\"\n },\n {\n \"depth\": 3,\n \"title\": \"在上一层完成之前开始下一层\",\n \"slug\": \"在上一层完成之前开始下一层\"\n },\n {\n \"depth\": 2,\n \"title\": \"基本的双重性\",\n \"slug\": \"基本的双重性\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是网页基本的双重性质？\",\n \"slug\": \"什么是网页基本的双重性质\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是信息型的媒介类产品？\",\n \"slug\": \"什么是信息型的媒介类产品\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是功能型的平台类产品\",\n \"slug\": \"什么是功能型的平台类产品\"\n },\n {\n \"depth\": 3,\n \"title\": \"用户体验的基本要素是什么？（五个层次、两种类别的产品）\",\n \"slug\": \"用户体验的基本要素是什么五个层次两种类别的产品\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:05.032Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"《用户体验要素》- 用户体验为何如此重要\",\n \"summary\": \"第一章笔记\",\n \"created\": \"2021-11-29T03:06:10.000Z\",\n \"categories\": [\n \"UX学习笔记\",\n \"《用户体验要素》\"\n ],\n \"tags\": [\n \"读书笔记\",\n \"《用户体验要素》\"\n ],\n \"hidden\": false,\n \"draft\": false,\n \"slug\": \"/用户体验要素1.md\",\n \"lastmod\": \"2022-04-16T12:55:42.468Z\",\n \"path\": \"/用户体验要素1\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"什么是用户体验\",\n \"slug\": \"什么是用户体验\"\n },\n {\n \"depth\": 2,\n \"title\": \"为体验而设计：使用第一\",\n \"slug\": \"为体验而设计使用第一\"\n },\n {\n \"depth\": 3,\n \"title\": \"为什么小而美的产品,更容易成功？\",\n \"slug\": \"为什么小而美的产品更容易成功\"\n },\n {\n \"depth\": 2,\n \"title\": \"用户体验和商机\",\n \"slug\": \"用户体验和商机\"\n },\n {\n \"depth\": 3,\n \"title\": \"为什么在网站上，用户体验比别的产品更重要？\",\n \"slug\": \"为什么在网站上用户体验比别的产品更重要\"\n },\n {\n \"depth\": 3,\n \"title\": \"为什么用户体验很重要？有什么作用吗\",\n \"slug\": \"为什么用户体验很重要有什么作用吗\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是转化率？有什么用？\",\n \"slug\": \"什么是转化率有什么用\"\n },\n {\n \"depth\": 3,\n \"title\": \"改善用户体验，是为了什么？通过什么方式达到？\",\n \"slug\": \"改善用户体验是为了什么通过什么方式达到\"\n },\n {\n \"depth\": 2,\n \"title\": \"以用户为中心的设计\",\n \"slug\": \"以用户为中心的设计\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是“以用户为中心”的设计？\",\n \"slug\": \"什么是以用户为中心的设计\"\n },\n {\n \"depth\": 3,\n \"title\": \"怎么做？\",\n \"slug\": \"怎么做\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:06.494Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Evaluation\",\n \"summary\": \"Introduction to User Experience Design｜Week5\",\n \"created\": \"2021-11-18T14:09:49.000Z\",\n \"categories\": [\n \"UX学习笔记\",\n \"Introduction to User Experience Design\"\n ],\n \"tags\": [\n \"UX\"\n ],\n \"slug\": \"/2021-11-18-ux5/index.md\",\n \"path\": \"/2021-11-18-ux5\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"评估\",\n \"slug\": \"评估\"\n },\n {\n \"depth\": 2,\n \"title\": \"分类\",\n \"slug\": \"分类\"\n },\n {\n \"depth\": 3,\n \"title\": \"形成性评估\",\n \"slug\": \"形成性评估\"\n },\n {\n \"depth\": 3,\n \"title\": \"总结性评估\",\n \"slug\": \"总结性评估\"\n },\n {\n \"depth\": 2,\n \"title\": \"如何评估\",\n \"slug\": \"如何评估\"\n },\n {\n \"depth\": 3,\n \"title\": \"数据收集\",\n \"slug\": \"数据收集\"\n },\n {\n \"depth\": 3,\n \"title\": \"衡量\",\n \"slug\": \"衡量\"\n },\n {\n \"depth\": 3,\n \"title\": \"可学习性\",\n \"slug\": \"可学习性\"\n },\n {\n \"depth\": 3,\n \"title\": \"可记忆性\",\n \"slug\": \"可记忆性\"\n },\n {\n \"depth\": 3,\n \"title\": \"主观情感评估\",\n \"slug\": \"主观情感评估\"\n },\n {\n \"depth\": 2,\n \"title\": \"相关资源\",\n \"slug\": \"相关资源\"\n },\n {\n \"depth\": 2,\n \"title\": \"推荐教材\",\n \"slug\": \"推荐教材\"\n },\n {\n \"depth\": 3,\n \"title\": \"Trade Book\",\n \"slug\": \"trade-book\"\n },\n {\n \"depth\": 3,\n \"title\": \"Text Books\",\n \"slug\": \"text-books\"\n },\n {\n \"depth\": 2,\n \"title\": \"参考网站\",\n \"slug\": \"参考网站\"\n }\n ],\n \"updated\": \"2022-08-06T10:47:38.841Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Prototyping\",\n \"summary\": \"Introduction to User Experience Design｜Week4\",\n \"created\": \"2021-11-18T13:26:41.000Z\",\n \"categories\": [\n \"UX学习笔记\",\n \"Introduction to User Experience Design\"\n ],\n \"tags\": [\n \"UX\"\n ],\n \"slug\": \"/2021-11-18-ux4/index.md\",\n \"path\": \"/2021-11-18-ux4\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"关于 Prototyping\",\n \"slug\": \"关于-prototyping\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是原型开发\",\n \"slug\": \"什么是原型开发\"\n },\n {\n \"depth\": 3,\n \"title\": \"原型开发的作用\",\n \"slug\": \"原型开发的作用\"\n },\n {\n \"depth\": 3,\n \"title\": \"水平原型\",\n \"slug\": \"水平原型\"\n },\n {\n \"depth\": 3,\n \"title\": \"垂直原型\",\n \"slug\": \"垂直原型\"\n },\n {\n \"depth\": 2,\n \"title\": \"低保真 Lofi Prototype\",\n \"slug\": \"低保真-lofi-prototype\"\n },\n {\n \"depth\": 3,\n \"title\": \"低保真和高保真的区别\",\n \"slug\": \"低保真和高保真的区别\"\n },\n {\n \"depth\": 3,\n \"title\": \"注意事项\",\n \"slug\": \"注意事项\"\n },\n {\n \"depth\": 3,\n \"title\": \"三种形式\",\n \"slug\": \"三种形式\"\n },\n {\n \"depth\": 4,\n \"title\": \"1. 草图\",\n \"slug\": \"1-草图\"\n },\n {\n \"depth\": 4,\n \"title\": \"2. 故事版\",\n \"slug\": \"2-故事版\"\n },\n {\n \"depth\": 4,\n \"title\": \"3.卡片原型\",\n \"slug\": \"3卡片原型\"\n },\n {\n \"depth\": 2,\n \"title\": \"其他原型方式\",\n \"slug\": \"其他原型方式\"\n },\n {\n \"depth\": 3,\n \"title\": \"绿野仙踪/奥茨法师\",\n \"slug\": \"绿野仙踪奥茨法师\"\n },\n {\n \"depth\": 3,\n \"title\": \"概念验证视频\",\n \"slug\": \"概念验证视频\"\n },\n {\n \"depth\": 3,\n \"title\": \"隐喻技术\",\n \"slug\": \"隐喻技术\"\n },\n {\n \"depth\": 2,\n \"title\": \"相关资源\",\n \"slug\": \"相关资源\"\n },\n {\n \"depth\": 3,\n \"title\": \"Resources and Tools for Protoyping 1\",\n \"slug\": \"resources-and-tools-for-protoyping-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"Tools\",\n \"slug\": \"tools\"\n },\n {\n \"depth\": 3,\n \"title\": \"Resources for Prototyping 2\",\n \"slug\": \"resources-for-prototyping-2\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:10.016Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Design Alternatives\",\n \"summary\": \"Introduction to User Experience Design｜Week3\",\n \"created\": \"2021-11-14T03:18:45.000Z\",\n \"categories\": [\n \"UX学习笔记\",\n \"Introduction to User Experience Design\"\n ],\n \"tags\": [\n \"UX\"\n ],\n \"lastmod\": \"2022-04-16T12:56:27.924Z\",\n \"slug\": \"/2021-11-14-ux3/index.md\",\n \"path\": \"/2021-11-14-ux3\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"Review of Design Goals 审查设计目标\",\n \"slug\": \"review-of-design-goals-审查设计目标\"\n },\n {\n \"depth\": 3,\n \"title\": \"用户体验的核心目标\",\n \"slug\": \"用户体验的核心目标\"\n },\n {\n \"depth\": 3,\n \"title\": \"设计的定义\",\n \"slug\": \"设计的定义\"\n },\n {\n \"depth\": 3,\n \"title\": \"设计的目标\",\n \"slug\": \"设计的目标\"\n },\n {\n \"depth\": 3,\n \"title\": \"设计时，需考虑的三个方面\",\n \"slug\": \"设计时需考虑的三个方面\"\n },\n {\n \"depth\": 2,\n \"title\": \"Design Alternatives 设计替代方案\",\n \"slug\": \"design-alternatives-设计替代方案\"\n },\n {\n \"depth\": 3,\n \"title\": \"目标\",\n \"slug\": \"目标\"\n },\n {\n \"depth\": 3,\n \"title\": \"关键\",\n \"slug\": \"关键\"\n },\n {\n \"depth\": 3,\n \"title\": \"Road map 路线\",\n \"slug\": \"road-map-路线\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:15.281Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Requirement Gathering\",\n \"summary\": \"Introduction to User Experience Design｜Week2\",\n \"created\": \"2021-11-09T14:26:49.000Z\",\n \"categories\": [\n \"UX学习笔记\",\n \"Introduction to User Experience Design\"\n ],\n \"tags\": [\n \"UX\"\n ],\n \"slug\": \"/2021-11-09-ux2/index.md\",\n \"path\": \"/2021-11-09-ux2\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"Overview\",\n \"slug\": \"overview\"\n },\n {\n \"depth\": 2,\n \"title\": \"Types of Users and Types of Data\",\n \"slug\": \"types-of-users-and-types-of-data\"\n },\n {\n \"depth\": 3,\n \"title\": \"数据类型\",\n \"slug\": \"数据类型\"\n },\n {\n \"depth\": 4,\n \"title\": \"定量\",\n \"slug\": \"定量\"\n },\n {\n \"depth\": 4,\n \"title\": \"定性\",\n \"slug\": \"定性\"\n },\n {\n \"depth\": 3,\n \"title\": \"将用户视为利益相关者的三个类型\",\n \"slug\": \"将用户视为利益相关者的三个类型\"\n },\n {\n \"depth\": 3,\n \"title\": \"了解利益相关者的意义\",\n \"slug\": \"了解利益相关者的意义\"\n },\n {\n \"depth\": 2,\n \"title\": \"Discovery Technique Overview\",\n \"slug\": \"discovery-technique-overview\"\n },\n {\n \"depth\": 3,\n \"title\": \"四种调研方法\",\n \"slug\": \"四种调研方法\"\n },\n {\n \"depth\": 3,\n \"title\": \"交互程度\",\n \"slug\": \"交互程度\"\n },\n {\n \"depth\": 3,\n \"title\": \"进行的场景\",\n \"slug\": \"进行的场景\"\n },\n {\n \"depth\": 3,\n \"title\": \"在设计周期中迭代\",\n \"slug\": \"在设计周期中迭代\"\n },\n {\n \"depth\": 2,\n \"title\": \"Naturalistic Observation 自然观察\",\n \"slug\": \"naturalistic-observation-自然观察\"\n },\n {\n \"depth\": 3,\n \"title\": \"是什么\",\n \"slug\": \"是什么\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何做\",\n \"slug\": \"如何做\"\n },\n {\n \"depth\": 3,\n \"title\": \"数据\",\n \"slug\": \"数据\"\n },\n {\n \"depth\": 3,\n \"title\": \"优点\",\n \"slug\": \"优点\"\n },\n {\n \"depth\": 3,\n \"title\": \"缺点\",\n \"slug\": \"缺点\"\n },\n {\n \"depth\": 3,\n \"title\": \"道德局限\",\n \"slug\": \"道德局限\"\n },\n {\n \"depth\": 3,\n \"title\": \"在设计流程中\",\n \"slug\": \"在设计流程中\"\n },\n {\n \"depth\": 2,\n \"title\": \"Survey 问卷\",\n \"slug\": \"survey-问卷\"\n },\n {\n \"depth\": 3,\n \"title\": \"是什么\",\n \"slug\": \"是什么-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何做\",\n \"slug\": \"如何做-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"数据\",\n \"slug\": \"数据-1\"\n },\n {\n \"depth\": 4,\n \"title\": \"1.定性-封闭性问题\",\n \"slug\": \"1定性-封闭性问题\"\n },\n {\n \"depth\": 4,\n \"title\": \"2.定量-开放性问题\",\n \"slug\": \"2定量-开放性问题\"\n },\n {\n \"depth\": 3,\n \"title\": \"优点\",\n \"slug\": \"优点-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"缺点\",\n \"slug\": \"缺点-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"在设计流程中\",\n \"slug\": \"在设计流程中-1\"\n },\n {\n \"depth\": 2,\n \"title\": \"Focus group 焦点小组\",\n \"slug\": \"focus-group-焦点小组\"\n },\n {\n \"depth\": 3,\n \"title\": \"是什么\",\n \"slug\": \"是什么-2\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何做\",\n \"slug\": \"如何做-2\"\n },\n {\n \"depth\": 4,\n \"title\": \"组成\",\n \"slug\": \"组成\"\n },\n {\n \"depth\": 3,\n \"title\": \"数据\",\n \"slug\": \"数据-2\"\n },\n {\n \"depth\": 3,\n \"title\": \"优点\",\n \"slug\": \"优点-2\"\n },\n {\n \"depth\": 3,\n \"title\": \"缺点\",\n \"slug\": \"缺点-2\"\n },\n {\n \"depth\": 3,\n \"title\": \"在设计流程中\",\n \"slug\": \"在设计流程中-2\"\n },\n {\n \"depth\": 2,\n \"title\": \"Interviews\",\n \"slug\": \"interviews\"\n },\n {\n \"depth\": 3,\n \"title\": \"是什么\",\n \"slug\": \"是什么-3\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何做\",\n \"slug\": \"如何做-3\"\n },\n {\n \"depth\": 3,\n \"title\": \"数据\",\n \"slug\": \"数据-3\"\n },\n {\n \"depth\": 3,\n \"title\": \"优点\",\n \"slug\": \"优点-3\"\n },\n {\n \"depth\": 3,\n \"title\": \"缺点\",\n \"slug\": \"缺点-3\"\n },\n {\n \"depth\": 3,\n \"title\": \"在设计流程中\",\n \"slug\": \"在设计流程中-3\"\n },\n {\n \"depth\": 2,\n \"title\": \"User Results 用户数据处理\",\n \"slug\": \"user-results-用户数据处理\"\n },\n {\n \"depth\": 3,\n \"title\": \"描述性统计信息\",\n \"slug\": \"描述性统计信息\"\n },\n {\n \"depth\": 3,\n \"title\": \"用户特征表\",\n \"slug\": \"用户特征表\"\n },\n {\n \"depth\": 3,\n \"title\": \"人物画像 Persona\",\n \"slug\": \"人物画像-persona\"\n },\n {\n \"depth\": 2,\n \"title\": \"Presenting Task Findings\",\n \"slug\": \"presenting-task-findings\"\n },\n {\n \"depth\": 3,\n \"title\": \"Scenario\",\n \"slug\": \"scenario\"\n },\n {\n \"depth\": 4,\n \"title\": \"是什么\",\n \"slug\": \"是什么-4\"\n },\n {\n \"depth\": 4,\n \"title\": \"作用\",\n \"slug\": \"作用\"\n },\n {\n \"depth\": 3,\n \"title\": \"Essential Case Study\",\n \"slug\": \"essential-case-study\"\n },\n {\n \"depth\": 4,\n \"title\": \"三个要素\",\n \"slug\": \"三个要素\"\n },\n {\n \"depth\": 3,\n \"title\": \"Hierarchical Task Analysis\",\n \"slug\": \"hierarchical-task-analysis\"\n },\n {\n \"depth\": 3,\n \"title\": \"Current UI Critique\",\n \"slug\": \"current-ui-critique\"\n },\n {\n \"depth\": 4,\n \"title\": \"步骤\",\n \"slug\": \"步骤\"\n },\n {\n \"depth\": 2,\n \"title\": \"相关资源\",\n \"slug\": \"相关资源\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:17.439Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"Overview of User Experience Design\",\n \"summary\": \"Introduction to User Experience Design｜Week1\",\n \"created\": \"2021-11-08T02:54:40.000Z\",\n \"tags\": [\n \"UX\"\n ],\n \"slug\": \"/2021-11-08-ux1/index.md\",\n \"path\": \"/2021-11-08-ux1\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"课程简介\",\n \"slug\": \"课程简介\"\n },\n {\n \"depth\": 2,\n \"title\": \"Week 1 笔记\",\n \"slug\": \"week-1-笔记\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是 ux？\",\n \"slug\": \"什么是-ux\"\n },\n {\n \"depth\": 3,\n \"title\": \"用户体验设计的核心概念\",\n \"slug\": \"用户体验设计的核心概念\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是用户\",\n \"slug\": \"什么是用户\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是界面\",\n \"slug\": \"什么是界面\"\n },\n {\n \"depth\": 3,\n \"title\": \"用户体验设计的目标\",\n \"slug\": \"用户体验设计的目标\"\n },\n {\n \"depth\": 3,\n \"title\": \"界面设计环 (四个步骤)\",\n \"slug\": \"界面设计环-四个步骤\"\n },\n {\n \"depth\": 4,\n \"title\": \"Step1：Requirements Gathering 收集需求\",\n \"slug\": \"step1requirements-gathering-收集需求\"\n },\n {\n \"depth\": 4,\n \"title\": \"Step 2：Design Alternatives 设计方案\",\n \"slug\": \"step-2design-alternatives-设计方案\"\n },\n {\n \"depth\": 4,\n \"title\": \"Step 3：Prototyping 原型\",\n \"slug\": \"step-3prototyping-原型\"\n },\n {\n \"depth\": 4,\n \"title\": \"Step 4：Evaluation 评估测试\",\n \"slug\": \"step-4evaluation-评估测试\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么样的界面是“实用”的？\",\n \"slug\": \"什么样的界面是实用的\"\n },\n {\n \"depth\": 3,\n \"title\": \"好设计的三个特征\",\n \"slug\": \"好设计的三个特征\"\n },\n {\n \"depth\": 4,\n \"title\": \"1 - Affordance (示能)\",\n \"slug\": \"1---affordance-示能\"\n },\n {\n \"depth\": 4,\n \"title\": \"2 - Signifiers (意符)\",\n \"slug\": \"2---signifiers-意符\"\n },\n {\n \"depth\": 4,\n \"title\": \"3 - Feedback (反馈)\",\n \"slug\": \"3---feedback-反馈\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何与“用户”接洽\",\n \"slug\": \"如何与用户接洽\"\n },\n {\n \"depth\": 4,\n \"title\": \"三个步骤\",\n \"slug\": \"三个步骤\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:20.887Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"全球商业化中的设计\",\n \"summary\": \"《设计心理学 1》第七章——本书的总结\",\n \"created\": \"2021-11-03T03:59:18.000Z\",\n \"categories\": [\n \"设计心理学\"\n ],\n \"tags\": [\n \"设计心理学1\",\n \"读书笔记\"\n ],\n \"slug\": \"/设计心理学1-7.md\",\n \"lastmod\": \"2022-04-16T12:55:38.967Z\",\n \"path\": \"/设计心理学1-7\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1.竞争压力\",\n \"slug\": \"1竞争压力\"\n },\n {\n \"depth\": 2,\n \"title\": \"2.新技术推动变革\",\n \"slug\": \"2新技术推动变革\"\n },\n {\n \"depth\": 2,\n \"title\": \"3.新产品上市需要多长时间\",\n \"slug\": \"3新产品上市需要多长时间\"\n },\n {\n \"depth\": 2,\n \"title\": \"4.创新的两种形式：渐进式和颠覆式\",\n \"slug\": \"4创新的两种形式渐进式和颠覆式\"\n },\n {\n \"depth\": 2,\n \"title\": \"5. 设计心理学：1988 ～ 2038\",\n \"slug\": \"5-设计心理学1988--2038\"\n },\n {\n \"depth\": 2,\n \"title\": \"6.书籍的未来\",\n \"slug\": \"6书籍的未来\"\n },\n {\n \"depth\": 2,\n \"title\": \"7. 设计的道义和责任\",\n \"slug\": \"7-设计的道义和责任\"\n },\n {\n \"depth\": 2,\n \"title\": \"8. 设计思维和思考设计\",\n \"slug\": \"8-设计思维和思考设计\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:07.505Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"设计思维\",\n \"created\": \"2021-11-03T03:49:10.353Z\",\n \"categories\": [\n \"设计心理学\"\n ],\n \"tags\": [\n \"设计心理学1\",\n \"读书笔记\"\n ],\n \"draft\": false,\n \"summary\": \"《设计心理学 1》第六章——设计需要探究问题的来源，而不只是停留在表面\",\n \"lastmod\": \"2022-05-07T05:31:58.650Z\",\n \"slug\": \"/设计心理学1-6.md\",\n \"path\": \"/设计心理学1-6\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. 解决正确的问题\",\n \"slug\": \"1-解决正确的问题\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 双钻设计模式\",\n \"slug\": \"2-双钻设计模式\"\n },\n {\n \"depth\": 3,\n \"title\": \"四个步骤（发散->聚焦）\",\n \"slug\": \"四个步骤发散-聚焦\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 以人为本的设计流程\",\n \"slug\": \"3-以人为本的设计流程\"\n },\n {\n \"depth\": 3,\n \"title\": \"1.观察\",\n \"slug\": \"1观察\"\n },\n {\n \"depth\": 3,\n \"title\": \"2. 激发创意（构思）\",\n \"slug\": \"2-激发创意构思\"\n },\n {\n \"depth\": 3,\n \"title\": \"3.打样（原型）\",\n \"slug\": \"3打样原型\"\n },\n {\n \"depth\": 4,\n \"title\": \"4.测试\",\n \"slug\": \"4测试\"\n },\n {\n \"depth\": 2,\n \"title\": \"4.我刚告诉你什么？那根本行不通\",\n \"slug\": \"4我刚告诉你什么那根本行不通\"\n },\n {\n \"depth\": 2,\n \"title\": \"5.设计的挑战\",\n \"slug\": \"5设计的挑战\"\n },\n {\n \"depth\": 2,\n \"title\": \"6. 复杂是好事，混乱惹麻烦\",\n \"slug\": \"6-复杂是好事混乱惹麻烦\"\n },\n {\n \"depth\": 2,\n \"title\": \"7.标准化和技术\",\n \"slug\": \"7标准化和技术\"\n },\n {\n \"depth\": 2,\n \"title\": \"8.故意制作困难\",\n \"slug\": \"8故意制作困难\"\n },\n {\n \"depth\": 2,\n \"title\": \"9. 设计：为了人类发展科技\",\n \"slug\": \"9-设计为了人类发展科技\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:08.975Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"人为差错？不，拙劣的设计\",\n \"summary\": \"《设计心理学 1》第五章——设计师经常严重误解人心理的局限性，要求人像机器一样工作\",\n \"created\": \"2021-10-27T12:22:17.000Z\",\n \"math\": \"falase\",\n \"categories\": [\n \"设计心理学\"\n ],\n \"tags\": [\n \"设计心理学1\",\n \"读书笔记\"\n ],\n \"draft\": false,\n \"lastmod\": \"2022-04-16T12:55:20.101Z\",\n \"slug\": \"/设计心理学1-5.md\",\n \"path\": \"/设计心理学1-5\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1.何以出错\",\n \"slug\": \"1何以出错\"\n },\n {\n \"depth\": 3,\n \"title\": \"出错的原因\",\n \"slug\": \"出错的原因\"\n },\n {\n \"depth\": 3,\n \"title\": \"解决错误的方法\",\n \"slug\": \"解决错误的方法\"\n },\n {\n \"depth\": 3,\n \"title\": \"差错之外：故意犯错\",\n \"slug\": \"差错之外故意犯错\"\n },\n {\n \"depth\": 2,\n \"title\": \"2.差错的两种类型：失误和错误\",\n \"slug\": \"2差错的两种类型失误和错误\"\n },\n {\n \"depth\": 3,\n \"title\": \"差错\",\n \"slug\": \"差错\"\n },\n {\n \"depth\": 3,\n \"title\": \"差错和行动的七个阶段\",\n \"slug\": \"差错和行动的七个阶段\"\n },\n {\n \"depth\": 3,\n \"title\": \"失误\",\n \"slug\": \"失误\"\n },\n {\n \"depth\": 4,\n \"title\": \"行动失误\",\n \"slug\": \"行动失误\"\n },\n {\n \"depth\": 5,\n \"title\": \"1. 撷取性失误\",\n \"slug\": \"1-撷取性失误\"\n },\n {\n \"depth\": 5,\n \"title\": \"2. 描述相似性失误\",\n \"slug\": \"2-描述相似性失误\"\n },\n {\n \"depth\": 5,\n \"title\": \"3. 功能状态失误\",\n \"slug\": \"3-功能状态失误\"\n },\n {\n \"depth\": 4,\n \"title\": \"记忆失误\",\n \"slug\": \"记忆失误\"\n },\n {\n \"depth\": 2,\n \"title\": \"3.错误的分类\",\n \"slug\": \"3错误的分类\"\n },\n {\n \"depth\": 3,\n \"title\": \"错误\",\n \"slug\": \"错误\"\n },\n {\n \"depth\": 4,\n \"title\": \"1. 基于规则的错误（违反规则）\",\n \"slug\": \"1-基于规则的错误违反规则\"\n },\n {\n \"depth\": 4,\n \"title\": \"2. 基于知识的错误（缺乏知识）\",\n \"slug\": \"2-基于知识的错误缺乏知识\"\n },\n {\n \"depth\": 4,\n \"title\": \"3. 记忆失效的错误\",\n \"slug\": \"3-记忆失效的错误\"\n },\n {\n \"depth\": 2,\n \"title\": \"4.社会和习俗压力\",\n \"slug\": \"4社会和习俗压力\"\n },\n {\n \"depth\": 3,\n \"title\": \"压力\",\n \"slug\": \"压力\"\n },\n {\n \"depth\": 3,\n \"title\": \"检查清单\",\n \"slug\": \"检查清单\"\n },\n {\n \"depth\": 2,\n \"title\": \"5、差错报告\",\n \"slug\": \"5差错报告\"\n },\n {\n \"depth\": 3,\n \"title\": \"自动化（JIDOKA）\",\n \"slug\": \"自动化jidoka\"\n },\n {\n \"depth\": 3,\n \"title\": \"防呆（POKA-YOKE）\",\n \"slug\": \"防呆poka-yoke\"\n },\n {\n \"depth\": 3,\n \"title\": \"航空安全报告体系\",\n \"slug\": \"航空安全报告体系\"\n },\n {\n \"depth\": 2,\n \"title\": \"6.甄别差错\",\n \"slug\": \"6甄别差错\"\n },\n {\n \"depth\": 3,\n \"title\": \"为什么甄别差错是困难的\",\n \"slug\": \"为什么甄别差错是困难的\"\n },\n {\n \"depth\": 4,\n \"title\": \"甄别失误\",\n \"slug\": \"甄别失误\"\n },\n {\n \"depth\": 4,\n \"title\": \"甄别错误\",\n \"slug\": \"甄别错误\"\n },\n {\n \"depth\": 4,\n \"title\": \"记忆失效性（失误/错误）\",\n \"slug\": \"记忆失效性失误错误\"\n },\n {\n \"depth\": 3,\n \"title\": \"为错误辩解\",\n \"slug\": \"为错误辩解\"\n },\n {\n \"depth\": 3,\n \"title\": \"事故分析要置身于真实情境\",\n \"slug\": \"事故分析要置身于真实情境\"\n },\n {\n \"depth\": 4,\n \"title\": \"事故发生时\",\n \"slug\": \"事故发生时\"\n },\n {\n \"depth\": 4,\n \"title\": \"事故发生后\",\n \"slug\": \"事故发生后\"\n },\n {\n \"depth\": 4,\n \"title\": \"事故分析应\",\n \"slug\": \"事故分析应\"\n },\n {\n \"depth\": 2,\n \"title\": \"7.为差错设计\",\n \"slug\": \"7为差错设计\"\n },\n {\n \"depth\": 3,\n \"title\": \"基本原则\",\n \"slug\": \"基本原则\"\n },\n {\n \"depth\": 3,\n \"title\": \"记忆中断\",\n \"slug\": \"记忆中断\"\n },\n {\n \"depth\": 3,\n \"title\": \"警示信号存在的问题\",\n \"slug\": \"警示信号存在的问题\"\n },\n {\n \"depth\": 3,\n \"title\": \"为差错设计的方法\",\n \"slug\": \"为差错设计的方法\"\n },\n {\n \"depth\": 4,\n \"title\": \"研究差错\",\n \"slug\": \"研究差错\"\n },\n {\n \"depth\": 4,\n \"title\": \"增加约束\",\n \"slug\": \"增加约束\"\n },\n {\n \"depth\": 4,\n \"title\": \"撤销\",\n \"slug\": \"撤销\"\n },\n {\n \"depth\": 4,\n \"title\": \"差错信息确认\",\n \"slug\": \"差错信息确认\"\n },\n {\n \"depth\": 4,\n \"title\": \"合理性检查\",\n \"slug\": \"合理性检查\"\n },\n {\n \"depth\": 4,\n \"title\": \"减小失误\",\n \"slug\": \"减小失误\"\n },\n {\n \"depth\": 3,\n \"title\": \"从差错到事故——瑞士奶酪模型\",\n \"slug\": \"从差错到事故瑞士奶酪模型\"\n },\n {\n \"depth\": 2,\n \"title\": \"8.良好的设计还不够\",\n \"slug\": \"8良好的设计还不够\"\n },\n {\n \"depth\": 2,\n \"title\": \"9.修补回复工程\",\n \"slug\": \"9修补回复工程\"\n },\n {\n \"depth\": 3,\n \"title\": \"是什么\",\n \"slug\": \"是什么\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何做\",\n \"slug\": \"如何做\"\n },\n {\n \"depth\": 2,\n \"title\": \"10.自动化的悖论\",\n \"slug\": \"10自动化的悖论\"\n },\n {\n \"depth\": 3,\n \"title\": \"故障时结果难以估计\",\n \"slug\": \"故障时结果难以估计\"\n },\n {\n \"depth\": 3,\n \"title\": \"悖论\",\n \"slug\": \"悖论\"\n },\n {\n \"depth\": 2,\n \"title\": \"11.应对差错的设计原则\",\n \"slug\": \"11应对差错的设计原则\"\n },\n {\n \"depth\": 3,\n \"title\": \"人和机器协同应工作\",\n \"slug\": \"人和机器协同应工作\"\n },\n {\n \"depth\": 3,\n \"title\": \"关键设计原则\",\n \"slug\": \"关键设计原则\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:11.112Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"知晓：约束、可视性和反馈\",\n \"tags\": [\n \"设计心理学1\",\n \"读书笔记\"\n ],\n \"categories\": [\n \"设计心理学\"\n ],\n \"keywords\": [\n \"设计心理学\"\n ],\n \"created\": \"2021-10-22T20:21:44.000Z\",\n \"summary\": \"《设计心理学 1》第四章——遇到一个新的设备或状况，设计师应如何提供重要信息，以便人们知道如何操作\",\n \"lastmod\": \"2022-04-16T12:55:16.673Z\",\n \"slug\": \"/设计心理学1-4.md\",\n \"path\": \"/设计心理学1-4\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"章前\",\n \"slug\": \"章前\"\n },\n {\n \"depth\": 3,\n \"title\": \"外界的知识：\",\n \"slug\": \"外界的知识\"\n },\n {\n \"depth\": 3,\n \"title\": \"头脑中的知识\",\n \"slug\": \"头脑中的知识\"\n },\n {\n \"depth\": 2,\n \"title\": \"1. 四种约束因素：物理、文化、语义和逻辑\",\n \"slug\": \"1-四种约束因素物理文化语义和逻辑\"\n },\n {\n \"depth\": 3,\n \"title\": \"物理约束\",\n \"slug\": \"物理约束\"\n },\n {\n \"depth\": 3,\n \"title\": \"文化约束\",\n \"slug\": \"文化约束\"\n },\n {\n \"depth\": 3,\n \"title\": \"语义约束\",\n \"slug\": \"语义约束\"\n },\n {\n \"depth\": 3,\n \"title\": \"逻辑约束\",\n \"slug\": \"逻辑约束\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 示能、意符和约束在日常用品设计中的应用\",\n \"slug\": \"2-示能意符和约束在日常用品设计中的应用\"\n },\n {\n \"depth\": 3,\n \"title\": \"门的问题\",\n \"slug\": \"门的问题\"\n },\n {\n \"depth\": 3,\n \"title\": \"开关的问题\",\n \"slug\": \"开关的问题\"\n },\n {\n \"depth\": 3,\n \"title\": \"任务分析\",\n \"slug\": \"任务分析\"\n },\n {\n \"depth\": 3,\n \"title\": \"以用户为中心的设计\",\n \"slug\": \"以用户为中心的设计\"\n },\n {\n \"depth\": 3,\n \"title\": \"以活动为中心的控制\",\n \"slug\": \"以活动为中心的控制\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 引导行为的约束力\",\n \"slug\": \"3-引导行为的约束力\"\n },\n {\n \"depth\": 3,\n \"title\": \"是什么\",\n \"slug\": \"是什么\"\n },\n {\n \"depth\": 3,\n \"title\": \"作用\",\n \"slug\": \"作用\"\n },\n {\n \"depth\": 3,\n \"title\": \"例子\",\n \"slug\": \"例子\"\n },\n {\n \"depth\": 3,\n \"title\": \"三种强制方式\",\n \"slug\": \"三种强制方式\"\n },\n {\n \"depth\": 4,\n \"title\": \"互锁\",\n \"slug\": \"互锁\"\n },\n {\n \"depth\": 4,\n \"title\": \"自锁\",\n \"slug\": \"自锁\"\n },\n {\n \"depth\": 4,\n \"title\": \"反锁\",\n \"slug\": \"反锁\"\n },\n {\n \"depth\": 2,\n \"title\": \"4. 惯例、约束和示能\",\n \"slug\": \"4-惯例约束和示能\"\n },\n {\n \"depth\": 2,\n \"title\": \"5. 水龙头：关于设计的历史案例\",\n \"slug\": \"5-水龙头关于设计的历史案例\"\n },\n {\n \"depth\": 2,\n \"title\": \"6. 利用声音作为意符\",\n \"slug\": \"6-利用声音作为意符\"\n },\n {\n \"depth\": 3,\n \"title\": \"为什么\",\n \"slug\": \"为什么\"\n },\n {\n \"depth\": 3,\n \"title\": \"应提供什么信息：\",\n \"slug\": \"应提供什么信息\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何提供\",\n \"slug\": \"如何提供\"\n },\n {\n \"depth\": 3,\n \"title\": \"例子\",\n \"slug\": \"例子-1\"\n },\n {\n \"depth\": 3,\n \"title\": \"“拟真”(skeuomorphic)\",\n \"slug\": \"拟真skeuomorphic\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:12.946Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"draft\": false,\n \"title\": \"头脑中的知识和外界知识\",\n \"tags\": [\n \"设计心理学1\",\n \"读书笔记\"\n ],\n \"categories\": [\n \"设计心理学\"\n ],\n \"keywords\": [\n \"设计心理学\"\n ],\n \"created\": \"2021-10-20T17:08:47.371Z\",\n \"summary\": \"《设计心理学 1》第三章——并非精确行为需要的所有知识都得储存在头脑里\",\n \"lastmod\": \"2022-04-16T12:55:13.235Z\",\n \"slug\": \"/设计心理学1-3.md\",\n \"path\": \"/设计心理学1-3\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1. 含糊的知识引导精确的行为\",\n \"slug\": \"1-含糊的知识引导精确的行为\"\n },\n {\n \"depth\": 3,\n \"title\": \"人们不需要完全精确的知识来支撑引导他们的行为。\",\n \"slug\": \"人们不需要完全精确的知识来支撑引导他们的行为\"\n },\n {\n \"depth\": 3,\n \"title\": \"两种类型的知识：\",\n \"slug\": \"两种类型的知识\"\n },\n {\n \"depth\": 2,\n \"title\": \"2. 记忆是储存在头脑中的知识\",\n \"slug\": \"2-记忆是储存在头脑中的知识\"\n },\n {\n \"depth\": 2,\n \"title\": \"3. 记忆的结构\",\n \"slug\": \"3-记忆的结构\"\n },\n {\n \"depth\": 3,\n \"title\": \"两种记忆类型\",\n \"slug\": \"两种记忆类型\"\n },\n {\n \"depth\": 4,\n \"title\": \"1. 短时记忆（工作记忆）\",\n \"slug\": \"1-短时记忆工作记忆\"\n },\n {\n \"depth\": 4,\n \"title\": \"2. 长时记忆（LTM /long-term memory)\",\n \"slug\": \"2-长时记忆ltm-long-term-memory\"\n },\n {\n \"depth\": 2,\n \"title\": \"4.近似模型：现实世界里的记忆\",\n \"slug\": \"4近似模型现实世界里的记忆\"\n },\n {\n \"depth\": 2,\n \"title\": \"5.头脑中的知识\",\n \"slug\": \"5头脑中的知识\"\n },\n {\n \"depth\": 3,\n \"title\": \"前瞻记忆\",\n \"slug\": \"前瞻记忆\"\n },\n {\n \"depth\": 3,\n \"title\": \"未来记忆\",\n \"slug\": \"未来记忆\"\n },\n {\n \"depth\": 3,\n \"title\": \"提醒的两个层面：\",\n \"slug\": \"提醒的两个层面\"\n },\n {\n \"depth\": 2,\n \"title\": \"6.外界知识和头脑中知识的此消彼长\",\n \"slug\": \"6外界知识和头脑中知识的此消彼长\"\n },\n {\n \"depth\": 3,\n \"title\": \"外界的知识\",\n \"slug\": \"外界的知识\"\n },\n {\n \"depth\": 3,\n \"title\": \"头脑中的知识\",\n \"slug\": \"头脑中的知识\"\n },\n {\n \"depth\": 2,\n \"title\": \"7.多个大脑里和多个设备中的记忆\",\n \"slug\": \"7多个大脑里和多个设备中的记忆\"\n },\n {\n \"depth\": 2,\n \"title\": \"8.自然映射\",\n \"slug\": \"8自然映射\"\n },\n {\n \"depth\": 3,\n \"title\": \"什么是自然映射\",\n \"slug\": \"什么是自然映射\"\n },\n {\n \"depth\": 3,\n \"title\": \"三个层次的映射\",\n \"slug\": \"三个层次的映射\"\n },\n {\n \"depth\": 3,\n \"title\": \"糟糕的映射 VS 好的映射\",\n \"slug\": \"糟糕的映射-vs-好的映射\"\n },\n {\n \"depth\": 2,\n \"title\": \"9.文化与设计：自然映射随文化而异\",\n \"slug\": \"9文化与设计自然映射随文化而异\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:14.322Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"日常行为心理学\",\n \"tags\": [\n \"设计心理学1\",\n \"读书笔记\"\n ],\n \"categories\": [\n \"设计心理学\"\n ],\n \"keywords\": [\n \"设计心理学\"\n ],\n \"draft\": false,\n \"created\": \"2021-10-20T16:14:47.371Z\",\n \"summary\": \"《设计心理学 1》第二章——人们如何做事？当事情出错了怎么办？怎么知道要做什么？\",\n \"lastmod\": \"2022-04-16T12:55:05.400Z\",\n \"slug\": \"/设计心理学1-2.md\",\n \"path\": \"/设计心理学1-2\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1.人们如何做事：执行与评估的鸿沟\",\n \"slug\": \"1人们如何做事执行与评估的鸿沟\"\n },\n {\n \"depth\": 3,\n \"title\": \"执行的鸿沟：\",\n \"slug\": \"执行的鸿沟\"\n },\n {\n \"depth\": 3,\n \"title\": \"评估的鸿沟：\",\n \"slug\": \"评估的鸿沟\"\n },\n {\n \"depth\": 3,\n \"title\": \"如何消除这两个心理鸿沟：\",\n \"slug\": \"如何消除这两个心理鸿沟\"\n },\n {\n \"depth\": 2,\n \"title\": \"2.行动的七个阶段\",\n \"slug\": \"2行动的七个阶段\"\n },\n {\n \"depth\": 3,\n \"title\": \"行动的两个步骤\",\n \"slug\": \"行动的两个步骤\"\n },\n {\n \"depth\": 3,\n \"title\": \"七个阶段：\",\n \"slug\": \"七个阶段\"\n },\n {\n \"depth\": 4,\n \"title\": \"执行桥 （目标->外部世界）\",\n \"slug\": \"执行桥-目标-外部世界\"\n },\n {\n \"depth\": 4,\n \"title\": \"评估桥（外部世界->目标）\",\n \"slug\": \"评估桥外部世界-目标\"\n },\n {\n \"depth\": 3,\n \"title\": \"行动的分类：\",\n \"slug\": \"行动的分类\"\n },\n {\n \"depth\": 3,\n \"title\": \"“根本原因分析”\",\n \"slug\": \"根本原因分析\"\n },\n {\n \"depth\": 2,\n \"title\": \"3.人的思想：潜意识主导\",\n \"slug\": \"3人的思想潜意识主导\"\n },\n {\n \"depth\": 3,\n \"title\": \"潜意识\",\n \"slug\": \"潜意识\"\n },\n {\n \"depth\": 3,\n \"title\": \"有意识的思维\",\n \"slug\": \"有意识的思维\"\n },\n {\n \"depth\": 3,\n \"title\": \"认知和情感\",\n \"slug\": \"认知和情感\"\n },\n {\n \"depth\": 2,\n \"title\": \"4.人的认知和情感\",\n \"slug\": \"4人的认知和情感\"\n },\n {\n \"depth\": 3,\n \"title\": \"本能层\",\n \"slug\": \"本能层\"\n },\n {\n \"depth\": 3,\n \"title\": \"行为层\",\n \"slug\": \"行为层\"\n },\n {\n \"depth\": 3,\n \"title\": \"反思层\",\n \"slug\": \"反思层\"\n },\n {\n \"depth\": 2,\n \"title\": \"5.行动的七个阶段和大脑的三个层次\",\n \"slug\": \"5行动的七个阶段和大脑的三个层次\"\n },\n {\n \"depth\": 3,\n \"title\": \"心流\",\n \"slug\": \"心流\"\n },\n {\n \"depth\": 2,\n \"title\": \"6.自说自话\",\n \"slug\": \"6自说自话\"\n },\n {\n \"depth\": 3,\n \"title\": \"概念模式\",\n \"slug\": \"概念模式\"\n },\n {\n \"depth\": 2,\n \"title\": \"7.责备错误之事\",\n \"slug\": \"7责备错误之事\"\n },\n {\n \"depth\": 3,\n \"title\": \"给用户有保留的预测：\",\n \"slug\": \"给用户有保留的预测\"\n },\n {\n \"depth\": 3,\n \"title\": \"习得性无助（自责循环）\",\n \"slug\": \"习得性无助自责循环\"\n },\n {\n \"depth\": 3,\n \"title\": \"积极心理学\",\n \"slug\": \"积极心理学\"\n },\n {\n \"depth\": 3,\n \"title\": \"tips：\",\n \"slug\": \"tips\"\n },\n {\n \"depth\": 2,\n \"title\": \"8.不当的自责\",\n \"slug\": \"8不当的自责\"\n },\n {\n \"depth\": 3,\n \"title\": \"自责的原因\",\n \"slug\": \"自责的原因\"\n },\n {\n \"depth\": 3,\n \"title\": \"设计师应如何\",\n \"slug\": \"设计师应如何\"\n },\n {\n \"depth\": 2,\n \"title\": \"9.行动的七个阶段：七个基本设计原则\",\n \"slug\": \"9行动的七个阶段七个基本设计原则\"\n },\n {\n \"depth\": 3,\n \"title\": \"前馈\",\n \"slug\": \"前馈\"\n },\n {\n \"depth\": 3,\n \"title\": \"反馈\",\n \"slug\": \"反馈\"\n },\n {\n \"depth\": 3,\n \"title\": \"设计的七个基本原则\",\n \"slug\": \"设计的七个基本原则\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:15.315Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"日用品心理学\",\n \"tags\": [\n \"设计心理学1\",\n \"读书笔记\"\n ],\n \"categories\": [\n \"设计心理学\"\n ],\n \"keywords\": [\n \"设计心理学\"\n ],\n \"created\": \"2021-10-20T12:28:00.000Z\",\n \"summary\": \"《设计心理学 1》第一章——好设计有两个特征可视性和易通性\",\n \"lastmod\": \"2022-04-16T12:55:08.323Z\",\n \"slug\": \"/设计心理学1-1.md\",\n \"path\": \"/设计心理学1-1\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"1.复杂的现代设备\",\n \"slug\": \"1复杂的现代设备\"\n },\n {\n \"depth\": 2,\n \"title\": \"2.以人为本的设计\",\n \"slug\": \"2以人为本的设计\"\n },\n {\n \"depth\": 2,\n \"title\": \"3.交互设计的基本原则\",\n \"slug\": \"3交互设计的基本原则\"\n },\n {\n \"depth\": 3,\n \"title\": \"示能\",\n \"slug\": \"示能\"\n },\n {\n \"depth\": 3,\n \"title\": \"意符\",\n \"slug\": \"意符\"\n },\n {\n \"depth\": 3,\n \"title\": \"约束\",\n \"slug\": \"约束\"\n },\n {\n \"depth\": 3,\n \"title\": \"映射\",\n \"slug\": \"映射\"\n },\n {\n \"depth\": 3,\n \"title\": \"反馈\",\n \"slug\": \"反馈\"\n },\n {\n \"depth\": 2,\n \"title\": \"4.系统映像\",\n \"slug\": \"4系统映像\"\n },\n {\n \"depth\": 2,\n \"title\": \"5.科技的悖论\",\n \"slug\": \"5科技的悖论\"\n },\n {\n \"depth\": 2,\n \"title\": \"6.设计的挑战\",\n \"slug\": \"6设计的挑战\"\n }\n ],\n \"updated\": \"2022-08-06T10:50:16.843Z\",\n \"type\": \"article\",\n \"html\": \"\"\n },\n {\n \"title\": \"什么是设计洞察 · What is Insight\",\n \"created\": \"2021-10-15T15:07:14.533Z\",\n \"tags\": [\n \"Design Thinking\",\n \"翻译\"\n ],\n \"keywords\": [\n \"insight\"\n ],\n \"slug\": \"/insight.md\",\n \"path\": \"/insight\",\n \"toc\": [\n {\n \"depth\": 2,\n \"title\": \"insight 不是什么\",\n \"slug\": \"insight-不是什么\"\n },\n {\n \"depth\": 2,\n \"title\": \"是什么\",\n \"slug\": \"是什么\"\n },\n {\n \"depth\": 2,\n \"title\": \"五大要素\",\n \"slug\": \"五大要素\"\n },\n {\n \"depth\": 2,\n \"title\": \"定义 Insight 的步骤\",\n \"slug\": \"定义-insight-的步骤\"\n },\n {\n \"depth\": 3,\n \"title\": \"1.设定语境/场景\",\n \"slug\": \"1设定语境场景\"\n },\n {\n \"depth\": 3,\n \"title\": \"2.沟通困境\",\n \"slug\": \"2沟通困境\"\n },\n {\n \"depth\": 3,\n \"title\": \"3. 阐明原因\",\n \"slug\": \"3-阐明原因\"\n },\n {\n \"depth\": 3,\n \"title\": \"4. 捕捉动机\",\n \"slug\": \"4-捕捉动机\"\n },\n {\n \"depth\": 3,\n \"title\": \"5.构想理想\",\n \"slug\": \"5构想理想\"\n },\n {\n \"depth\": 2,\n \"title\": \"如何表达\",\n \"slug\": \"如何表达\"\n },\n {\n \"depth\": 3,\n \"title\": \"第一句话——描述现状和用户行为。\",\n \"slug\": \"第一句话描述现状和用户行为\"\n },\n {\n \"depth\": 3,\n \"title\": \"第二句话——描述用户的困境，并说明造成困境的原因。\",\n \"slug\": \"第二句话描述用户的困境并说明造成困境的原因\"\n },\n {\n \"depth\": 3,\n \"title\": \"第三句话——描述用户期望的最终理想状况。\",\n \"slug\": \"第三句话描述用户期望的最终理想状况\"\n },\n {\n \"depth\": 3,\n \"title\": \"Tips\",\n \"slug\": \"tips\"\n },\n {\n \"depth\": 2,\n \"title\": \"什么是一个好的’Insight’\",\n \"slug\": \"什么是一个好的insight\"\n },\n {\n \"depth\": 2,\n \"title\": \"Insight->How Might We?\",\n \"slug\": \"insight-how-might-we\"\n },\n {\n \"depth\": 2,\n \"title\": \"后记\",\n \"slug\": \"后记\"\n }\n ],\n \"updated\": \"2022-08-06T10:49:42.689Z\",\n \"type\": \"article\",\n \"html\": \"\"\n }\n]"}</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink