summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--2024/11/17/二〇二四年十一月十七日/index.html5
-rw-r--r--2024/11/26/如何管理用户界面中的危险操作/index.html327
-rw-r--r--archives/2024/11/index.html18
-rw-r--r--archives/2024/index.html36
-rw-r--r--archives/2024/page/2/index.html36
-rw-r--r--archives/2024/page/3/index.html36
-rw-r--r--archives/2024/page/4/index.html18
-rw-r--r--archives/index.html36
-rw-r--r--archives/page/10/index.html36
-rw-r--r--archives/page/11/index.html20
-rw-r--r--archives/page/2/index.html36
-rw-r--r--archives/page/3/index.html36
-rw-r--r--archives/page/4/index.html38
-rw-r--r--archives/page/5/index.html36
-rw-r--r--archives/page/6/index.html36
-rw-r--r--archives/page/7/index.html36
-rw-r--r--archives/page/8/index.html36
-rw-r--r--archives/page/9/index.html36
-rw-r--r--search.xml93
-rw-r--r--tag/index.html12
-rw-r--r--tags/Design/index.html228
-rw-r--r--tags/UI-UX/index.html228
22 files changed, 1172 insertions, 247 deletions
diff --git a/2024/11/17/二〇二四年十一月十七日/index.html b/2024/11/17/二〇二四年十一月十七日/index.html
index caab1afa..fe4cd80d 100644
--- a/2024/11/17/二〇二四年十一月十七日/index.html
+++ b/2024/11/17/二〇二四年十一月十七日/index.html
@@ -171,6 +171,11 @@
<nav class="post-nav">
<div class="prev-item">
+ <div class="icon arrow-left"></div>
+ <div class="post-link">
+ <a href="/2024/11/26/%E5%A6%82%E4%BD%95%E7%AE%A1%E7%90%86%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2%E4%B8%AD%E7%9A%84%E5%8D%B1%E9%99%A9%E6%93%8D%E4%BD%9C/">Prev</a>
+ </div>
+
</div>
<div class="next-item">
diff --git a/2024/11/26/如何管理用户界面中的危险操作/index.html b/2024/11/26/如何管理用户界面中的危险操作/index.html
new file mode 100644
index 00000000..9d4b6f41
--- /dev/null
+++ b/2024/11/26/如何管理用户界面中的危险操作/index.html
@@ -0,0 +1,327 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+<meta name="viewport"
+ content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+<meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+ <meta name="author" content="韩暮秋">
+
+
+ <meta name="subtitle" content="暮秋小屋">
+
+
+ <meta name="description" content="这里是暮秋小屋,思念和灵感的寄存处">
+
+
+ <meta name="keywords" content="韩暮秋,MuqiuHan,'Muqiu Han', 'muqiu han', muqiuhan">
+
+
+
+
+<title>如何管理用户界面中的危险操作 | 暮秋小屋</title>
+
+
+
+ <link rel="icon" href="/favicon.ico">
+
+
+
+<style>
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&family=Roboto+Mono&display=swap');
+</style>
+
+
+
+ <!-- stylesheets list from _config.yml -->
+
+ <link rel="stylesheet" href="/css/style.css">
+
+
+
+
+
+ <!-- scripts list from _config.yml -->
+
+ <script src="/js/frame.js"></script>
+
+
+
+
+
+ <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+ <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+
+
+
+
+
+
+
+ <meta name="generator" content="Hexo 6.3.0"></head>
+ <body>
+ <div class="mask-border">
+ </div>
+
+ <div class="wrapper">
+
+ <div class="header">
+ <div class="flex-container">
+ <div class="header-inner">
+ <div class="site-brand-container">
+ <a href="/">
+
+ 暮秋小屋
+
+ </a>
+ </div>
+ <div id="menu-btn" class="menu-btn" onclick="toggleMenu()">
+ Menu
+ </div>
+ <nav class="site-nav">
+ <ul class="menu-list">
+
+
+ <li class="menu-item">
+ <a href="/">主页</a>
+ </li>
+
+
+
+ <li class="menu-item">
+ <a href="/categories/gallery/">日记本</a>
+ </li>
+
+
+
+ <li class="menu-item">
+ <a href="/tags/Medicine/">医学</a>
+ </li>
+
+
+
+ <li class="menu-item">
+ <a href="/tags/Technique/">计算机科学</a>
+ </li>
+
+
+
+ <li class="menu-item">
+ <a href="/tags/Life/">生活</a>
+ </li>
+
+
+
+ <li class="menu-item">
+ <a href="/about">关于</a>
+ </li>
+
+
+
+ <li class="menu-item search-btn">
+ <a href="#">Search</a>
+ </li>
+
+ </ul>
+ </nav>
+ </div>
+ </div>
+</div>
+
+
+ <div class="main">
+ <div class="flex-container">
+ <article id="post">
+
+
+ <div class="post-head">
+ <div class="post-info">
+ <div class="tag-list">
+
+
+ <span class="post-tag">
+ <a href="/tags/UI-UX/">
+ UI/UX
+ </a>
+ </span>
+
+ <span class="post-tag">
+ <a href="/tags/Design/">
+ Design
+ </a>
+ </span>
+
+
+ </div>
+ <div class="post-title">
+
+
+ 如何管理用户界面中的危险操作
+
+
+ </div>
+ <span class="post-date">
+ Nov 26, 2024
+ </span>
+ </div>
+ <div class="post-img">
+
+ <div class="h-line-primary"></div>
+
+ </div>
+</div>
+ <div class="post-content">
+ <blockquote>
+<p>“任何可能出错的事情都会出错。”我们的目标是防止出现问题,并在出现问题时减轻后果。</p>
+</blockquote>
+<p>界面是用户与系统通信的中介层,界面中的交互通常需要用户执行某些操作。不同的操作可能会导致不同的结果,其中可能有一些对于双方来说都非常重要甚至危险的操作。</p>
+<p>所以经常需要提供额外的保护措施来“保护”用户执行一些危险甚至无法恢复的操作。<br>这里的“保护”并不是完全的阻止,否则这个操作也没有存在的必要。</p>
+<blockquote>
+<p>“良好的错误消息很重要,但最好的设计<strong>首先会小心地防止问题发生</strong>。要么消除容易出错的情况,要么检查它们并在用户承诺操作之前向他们提供确认选项。”</p>
+</blockquote>
+<h2 id="什么是危险行为?"><a href="#什么是危险行为?" class="headerlink" title="什么是危险行为?"></a>什么是危险行为?</h2><p>危险行为并不意味着要删除某些内容,具体的危险行为应该由系统的“领域”来定义,例如:</p>
+<ul>
+<li>进行金融交易</li>
+<li>签署法律文件</li>
+<li>拉黑用户</li>
+<li>授予某些用户权限</li>
+<li>…</li>
+</ul>
+<h2 id="确认危险行为的方法"><a href="#确认危险行为的方法" class="headerlink" title="确认危险行为的方法"></a>确认危险行为的方法</h2><p>最常用的一种方法是要求用户明确确认他们的操作,这种方法也有很多实现上的细节,但无论从什么角度实现都有优劣:</p>
+<h3 id="Modal-Dialog"><a href="#Modal-Dialog" class="headerlink" title="Modal Dialog"></a>Modal Dialog</h3><p>首先需要明确 Modal Dialog 和 Non-modal Dialog 的区别。</p>
+<blockquote>
+<p>“Modal 是一种设计技术,它以一个独立的模式呈现内容,阻止用户与父视图交互,并需要明确的操作来退出。”</p>
+</blockquote>
+<p>所以 Modal Dialog 需要用户立即操作它。换句话说,除非以某种方式做出响应,否则用户无法继续使用系统。</p>
+<p>而 Non-modal Dialog 允许用户不间断地继续使用系统。Non-modal Dialog 一个常见用法就是出现在屏幕一角的 Toast 消息。</p>
+<p>所以如果使用得当,Modal Dialog 是防止意外点击危险操作的有效方法。这也是目前最流行的方法,它还可以和其他方法结合使用。</p>
+<p>但首先,需要明确一个保护用户进行危险操作的 Modal Dialog 需要有哪些元素:</p>
+<ol>
+<li>不要含糊其辞, 如果单纯的问用户:“你确定吗?”,用户很有可能不会有任何疑问直接点确定。</li>
+<li>在标题中,指定具体会发生什么或哪个实体将受到影响(例如,项目名称、用户名、金额)。</li>
+<li>提供一个图标来指示该操作是危险的,这既降低了用户盲目确认它的概率,也有利于页面的无障碍性(色盲的人可以通过图标来判断)。</li>
+<li>在描述中,要具体并突出显示必要的信息。</li>
+<li>按钮还应包含反映操作的词语,不要用“是”或“确认”之类的词,应该用更具描述性的“支付 10 元”,“删除用户韩暮秋”之类的词语。</li>
+</ol>
+<p>除此之外,还有更加严格的保护,例如在某些情况下,可以让用户输入某些内容来“解锁”操作,例如 Github 在删除仓库的时候需要输入仓库名称才能删除,这能让用户明确的知道自己在做什么,在删除哪个仓库。</p>
+<p>最后,根据 <a target="_blank" rel="noopener" href="https://lawsofux.com/law-of-proximity/">临近法则</a> ,确认操作的按钮最好放在左侧。</p>
+<h4 id="Danger-Zone"><a href="#Danger-Zone" class="headerlink" title="Danger Zone"></a>Danger Zone</h4><p>对于关键的操作,可以使用 Danger Zone,常见的实现方式是将这一类关键的操作单独放在某一个页面的同一处,例如页面的底部。如果操作比较多,可以考虑使用一个单独的页面存放。</p>
+<p>使用 Danger Zone 存放关键操作组件也有一些基本要素:</p>
+<ol>
+<li>使用红色或其他富含警示性颜色的警告图标或边框,在视觉上将 Danger Zone 与页面的其他部分区分开来。</li>
+<li>Danger Zone 中的每个操作都应该清楚地描述如果用户继续进行将会发生什么,以便用户了解潜在的后果。</li>
+<li>对于一些非常关键且无法恢复的行为,可以要求用户进行额外的操作。例如要求用户重复输入密码或使用 2FA。</li>
+<li>只存放真正关键的操作。避免为了拥有一个 Danger Zone 而搞出一个 Danger Zone。</li>
+</ol>
+<h3 id="Inline-Guard"><a href="#Inline-Guard" class="headerlink" title="Inline Guard"></a>Inline Guard</h3><p>这个方法解释起来挺简单,可以用在一些零碎的页面元素中,例如有一个删除一条消息的按钮,可以在用户单击这个按钮之后将其变为红色背景并修改按钮字体为 “确认删除”,用户再次点击就确认删除了。这用来防止误点击非常有用。</p>
+<p>但是也有一些细节需要注意:</p>
+<ol>
+<li>这种方法对于不那么危险的动作来说很方便,注意是“不那么危险”</li>
+<li>一个“不那么危险”的操作应该可以恢复,所以应该提供一个选项来撤消操作或将已删除的项目放到回收站之类的地方,这是确保用户安全操作的良好组合。</li>
+</ol>
+<p>Inline Guard 不能滥用,当用户非常频繁的遇到时会烦死,得权衡一下。</p>
+<h3 id="其他方案"><a href="#其他方案" class="headerlink" title="其他方案"></a>其他方案</h3><p>还有一些方案这里简单说一下,一是 2FA,基本不用过多解释,二是双人验证甚至多人验证,就是用户发起的一个操作需要两个以上的人来验证才可以执行,例如 Github 的 Merge PR。</p>
+<p>当系统要求用户进行一些额外的操作时,应该明确其最初的目的,因为:</p>
+<ul>
+<li>认知惯性:一个人倾向于近乎惯性地决定,即使这些决定不适合当前情况。例如,绝大多数人不阅读用户协议。他们只是同意冗长的文本,因为从法律角度来看这是必要的。(是的我就是这样)</li>
+<li>人们经常根据他们容易获得或熟悉的信息做出决策,而不是动脑子想。当用户看到相同的弹出窗口时,他们可能会根据之前的经验看都不看一眼直接接受它们。</li>
+<li>人类倾向于以更简单、更省力的方式思考和解决问题,而不是更复杂、更省力的方式,无论智力如何。所以许多用户只是点击“是”或“同意”而没有仔细阅读文本。</li>
+</ul>
+<p>所以在某些情况下,我们可以用一些更加优雅的方法:</p>
+<h3 id="延迟"><a href="#延迟" class="headerlink" title="延迟"></a>延迟</h3><p>上面 Inline Guard 用在删除消息的场景下,也可以点击删除按钮直接删除,但同时显示一个倒计时的 Toast 并附带一个“撤销”的按钮来提醒用户。</p>
+<h2 id="撤销"><a href="#撤销" class="headerlink" title="撤销"></a>撤销</h2><p>允许用户撤消刚刚执行的操作,从而提供一个安全网来减少因犯错误而产生的焦虑。<br>与 Modal Dialog 这种中断系统并要求用户确认的模式不同,撤消允许完成操作后在需要时选择撤消操作,从而提供更流畅的体验。</p>
+<p>它非常适合非破坏性、不可恢复的操作以及不会产生重大和直接后果的操作。</p>
+<p>撤消选项与“软删除”的概念密切相关,“软删除” 的意思是:当用户通过 UI 删除某些内容时,_看起来它已被删除_,但在数据库中,我们保留数据但将其标记为已删除。数据不会丢失,这就是为什么可以使用撤消选项,因为我们实际上并没有删除任何内容,而是将其标记为已删除。</p>
+<p>晚安。</p>
+
+</div>
+
+<script>
+ window.onload = detectors();
+</script>
+ <div class="post-footer">
+ <div class="h-line-primary"></div>
+ <nav class="post-nav">
+ <div class="prev-item">
+
+ </div>
+ <div class="next-item">
+
+ <div class="icon arrow-right"></div>
+ <div class="post-link">
+ <a href="/2024/11/17/%E4%BA%8C%E3%80%87%E4%BA%8C%E5%9B%9B%E5%B9%B4%E5%8D%81%E4%B8%80%E6%9C%88%E5%8D%81%E4%B8%83%E6%97%A5/">Next</a>
+ </div>
+
+ </div>
+ </nav>
+</div>
+
+
+ <div class="post-comment">
+
+
+
+
+
+
+
+</div>
+
+
+</article>
+ </div>
+ </div>
+
+ <div class="footer">
+ <div class="flex-container">
+ <div class="footer-text">
+
+
+ |
+
+
+ 希望路过的人可以添点柴火让这里暖和点
+
+ </div>
+ </div>
+</div>
+
+ </div>
+
+
+ <div class="search-popup">
+ <div class="search-popup-overlay">
+ </div>
+ <div class="search-popup-window" >
+ <div class="search-header">
+ <div class="search-input-container">
+ <input autocomplete="off" autocapitalize="off" maxlength="80"
+ placeholder="Search Anything" spellcheck="false"
+ type="search" class="search-input">
+ </div>
+ <div class="search-close-btn">
+ <div class="icon close-btn"></div>
+ </div>
+ </div>
+ <div class="search-result-container">
+ </div>
+ </div>
+</div>
+
+<script>
+ const searchConfig = {
+ path : "/search.xml",
+ top_n_per_article: "1",
+ unescape : "false",
+ trigger: "auto",
+ preload: "false"
+ }
+</script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/search.js"></script>
+<script src="/js/search.js"></script>
+
+
+
+ </body>
+</html>
diff --git a/archives/2024/11/index.html b/archives/2024/11/index.html
index f1ee8c33..0e2a9511 100644
--- a/archives/2024/11/index.html
+++ b/archives/2024/11/index.html
@@ -144,6 +144,24 @@
<div class="post-list-item">
<div class="post-title">
+ <a href="/2024/11/26/%E5%A6%82%E4%BD%95%E7%AE%A1%E7%90%86%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2%E4%B8%AD%E7%9A%84%E5%8D%B1%E9%99%A9%E6%93%8D%E4%BD%9C/">
+
+ 如何管理用户界面中的危险操作
+
+ </a>
+ </div>
+
+ <span class="post-date">Nov 26, 2024</span>
+ </div>
+
+
+
+
+
+
+
+ <div class="post-list-item">
+ <div class="post-title">
<a href="/2024/11/17/%E4%BA%8C%E3%80%87%E4%BA%8C%E5%9B%9B%E5%B9%B4%E5%8D%81%E4%B8%80%E6%9C%88%E5%8D%81%E4%B8%83%E6%97%A5/">
二〇二四年十一月十七日
diff --git a/archives/2024/index.html b/archives/2024/index.html
index fa09927a..cef0d45a 100644
--- a/archives/2024/index.html
+++ b/archives/2024/index.html
@@ -144,6 +144,24 @@
<div class="post-list-item">
<div class="post-title">
+ <a href="/2024/11/26/%E5%A6%82%E4%BD%95%E7%AE%A1%E7%90%86%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2%E4%B8%AD%E7%9A%84%E5%8D%B1%E9%99%A9%E6%93%8D%E4%BD%9C/">
+
+ 如何管理用户界面中的危险操作
+
+ </a>
+ </div>
+
+ <span class="post-date">Nov 26, 2024</span>
+ </div>
+
+
+
+
+
+
+
+ <div class="post-list-item">
+ <div class="post-title">
<a href="/2024/11/17/%E4%BA%8C%E3%80%87%E4%BA%8C%E5%9B%9B%E5%B9%B4%E5%8D%81%E4%B8%80%E6%9C%88%E5%8D%81%E4%B8%83%E6%97%A5/">
二〇二四年十一月十七日
@@ -299,24 +317,6 @@
</div>
-
-
-
-
-
- <div class="post-list-item">
- <div class="post-title">
- <a href="/2024/09/12/Functional-Reactive-Programming-in-F/">
-
- Functional Reactive Programming in F#
-
- </a>
- </div>
-
- <span class="post-date">Sep 12, 2024</span>
- </div>
-
-
<div id="paginator">
<div class=paginator>
diff --git a/archives/2024/page/2/index.html b/archives/2024/page/2/index.html
index e4e49bb1..53b1319a 100644
--- a/archives/2024/page/2/index.html
+++ b/archives/2024/page/2/index.html
@@ -144,6 +144,24 @@
<div class="post-list-item">
<div class="post-title">
+ <a href="/2024/09/12/Functional-Reactive-Programming-in-F/">
+
+ Functional Reactive Programming in F#
+
+ </a>
+ </div>
+
+ <span class="post-date">Sep 12, 2024</span>
+ </div>
+
+
+
+
+
+
+
+ <div class="post-list-item">
+ <div class="post-title">
<a href="/2024/09/12/%E4%BA%8C%E3%80%87%E4%BA%8C%E5%9B%9B%E5%B9%B4%E4%B9%9D%E6%9C%88%E5%8D%81%E4%BA%8C%E6%97%A5/">
二〇二四年九月十二日
@@ -299,24 +317,6 @@
</div>
-
-
-
-
-
- <div class="post-list-item">
- <div class="post-title">
- <a href="/2024/07/01/OCaml-News-2024-4/">
-
- OCaml News 2024-4
-
- </a>
- </div>
-
- <span class="post-date">Jul 1, 2024</span>
- </div>
-
-
<div id="paginator">
<div class=paginator>
diff --git a/archives/2024/page/3/index.html b/archives/2024/page/3/index.html
index b0a4c0d1..93c68714 100644
--- a/archives/2024/page/3/index.html
+++ b/archives/2024/page/3/index.html
@@ -144,6 +144,24 @@
<div class="post-list-item">
<div class="post-title">
+ <a href="/2024/07/01/OCaml-News-2024-4/">
+
+ OCaml News 2024-4
+
+ </a>
+ </div>
+
+ <span class="post-date">Jul 1, 2024</span>
+ </div>
+
+
+
+
+
+
+
+ <div class="post-list-item">
+ <div class="post-title">
<a href="/2024/06/27/%E4%BA%8C%E3%80%87%E4%BA%8C%E5%9B%9B%E5%B9%B4%E5%85%AD%E6%9C%88%E4%BA%8C%E5%8D%81%E4%B8%83%E6%97%A5/">
二〇二四年六月二十七日
@@ -299,24 +317,6 @@
</div>
-
-
-
-
-
- <div class="post-list-item">
- <div class="post-title">
- <a href="/2024/03/22/%E4%BA%8C%E3%80%87%E4%BA%8C%E5%9B%9B%E5%B9%B4%E4%B8%89%E6%9C%88%E4%BA%8C%E5%8D%81%E4%BA%8C%E6%97%A5/">
-
- 二〇二四年三月二十二日
-
- </a>
- </div>
-
- <span class="post-date">Mar 22, 2024</span>
- </div>
-
-
<div id="paginator">
<div class=paginator>
diff --git a/archives/2024/page/4/index.html b/archives/2024/page/4/index.html
index fe846df6..3c1915f1 100644
--- a/archives/2024/page/4/index.html
+++ b/archives/2024/page/4/index.html
@@ -144,6 +144,24 @@
<div class="post-list-item">
<div class="post-title">
+ <a href="/2024/03/22/%E4%BA%8C%E3%80%87%E4%BA%8C%E5%9B%9B%E5%B9%B4%E4%B8%89%E6%9C%88%E4%BA%8C%E5%8D%81%E4%BA%8C%E6%97%A5/">
+
+ 二〇二四年三月二十二日
+
+ </a>
+ </div>
+
+ <span class="post-date">Mar 22, 2024</span>
+ </div>
+
+
+
+
+
+
+
+ <div class="post-list-item">
+ <div class="post-title">
<a href="/2024/02/26/OCaml-News-2024-3/">
OCaml News 2024-3
diff --git a/archives/index.html b/archives/index.html
index 2a23cc2d..891d6af1 100644
--- a/archives/index.html
+++ b/archives/index.html
@@ -144,6 +144,24 @@
<div class="post-list-item">
<div class="post-title">
+ <a href="/2024/11/26/%E5%A6%82%E4%BD%95%E7%AE%A1%E7%90%86%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2%E4%B8%AD%E7%9A%84%E5%8D%B1%E9%99%A9%E6%93%8D%E4%BD%9C/">
+
+ 如何管理用户界面中的危险操作
+
+ </a>
+ </div>
+
+ <span class="post-date">Nov 26, 2024</span>
+ </div>
+
+
+
+
+
+
+
+ <div class="post-list-item">
+ <div class="post-title">
<a href="/2024/11/17/%E4%BA%8C%E3%80%87%E4%BA%8C%E5%9B%9B%E5%B9%B4%E5%8D%81%E4%B8%80%E6%9C%88%E5%8D%81%E4%B8%83%E6%97%A5/">
二〇二四年十一月十七日
@@ -299,24 +317,6 @@
</div>
-
-
-
-
-
- <div class="post-list-item">
- <div class="post-title">
- <a href="/2024/09/12/Functional-Reactive-Programming-in-F/">
-
- Functional Reactive Programming in F#
-
- </a>
- </div>
-
- <span class="post-date">Sep 12, 2024</span>
- </div>
-
-
<div id="paginator">
<div class=paginator>
diff --git a/archives/page/10/index.html b/archives/page/10/index.html
index 9cb753a8..401ae6a0 100644
--- a/archives/page/10/index.html
+++ b/archives/page/10/index.html
@@ -144,6 +144,24 @@
<div class="post-list-item">
<div class="post-title">
+ <a href="/2023/02/22/%E4%BA%8C%E9%9B%B6%E4%BA%8C%E4%B8%89%E5%B9%B4%E4%BA%8C%E6%9C%88%E4%BA%8C%E5%8D%81%E4%BA%8C%E6%97%A5/">
+
+ 二零二三年二月二十二日
+
+ </a>
+ </div>
+
+ <span class="post-date">Feb 22, 2023</span>
+ </div>
+
+
+
+
+
+
+
+ <div class="post-list-item">
+ <div class="post-title">
<a href="/2023/02/02/%E4%BA%8C%E9%9B%B6%E4%BA%8C%E4%B8%89%E5%B9%B4%E4%BA%8C%E6%9C%88%E4%BA%8C%E6%97%A5/">
二零二三年二月二日
@@ -301,24 +319,6 @@
</div>
-
-
-
-
-
- <div class="post-list-item">
- <div class="post-title">
- <a href="/2022/01/01/%E4%BA%8C%E9%9B%B6%E4%BA%8C%E4%BA%8C%E5%B9%B4%E4%B8%80%E6%9C%88%E4%B8%80%E6%97%A5/">
-
- 二零二二年一月一日
-
- </a>
- </div>
-
- <span class="post-date">Jan 1, 2022</span>
- </div>
-
-
<div id="paginator">
<div class=paginator>
diff --git a/archives/page/11/index.html b/archives/page/11/index.html
index d21cff73..b5d26a08 100644
--- a/archives/page/11/index.html
+++ b/archives/page/11/index.html
@@ -139,6 +139,26 @@
+ <div class="year-title">2022</div>
+
+
+ <div class="post-list-item">
+ <div class="post-title">
+ <a href="/2022/01/01/%E4%BA%8C%E9%9B%B6%E4%BA%8C%E4%BA%8C%E5%B9%B4%E4%B8%80%E6%9C%88%E4%B8%80%E6%97%A5/">
+
+ 二零二二年一月一日
+
+ </a>
+ </div>
+
+ <span class="post-date">Jan 1, 2022</span>
+ </div>
+
+
+
+
+
+
<div class="year-title">2021</div>
diff --git a/archives/page/2/index.html b/archives/page/2/index.html
index e138c996..62668ee0 100644
--- a/archives/page/2/index.html
+++ b/archives/page/2/index.html
@@ -144,6 +144,24 @@
<div class="post-list-item">
<div class="post-title">
+ <a href="/2024/09/12/Functional-Reactive-Programming-in-F/">
+
+ Functional Reactive Programming in F#
+
+ </a>
+ </div>
+
+ <span class="post-date">Sep 12, 2024</span>
+ </div>
+
+
+
+
+
+
+
+ <div class="post-list-item">
+ <div class="post-title">
<a href="/2024/09/12/%E4%BA%8C%E3%80%87%E4%BA%8C%E5%9B%9B%E5%B9%B4%E4%B9%9D%E6%9C%88%E5%8D%81%E4%BA%8C%E6%97%A5/">
二〇二四年九月十二日
@@ -299,24 +317,6 @@
</div>
-
-
-
-
-
- <div class="post-list-item">
- <div class="post-title">
- <a href="/2024/07/01/OCaml-News-2024-4/">
-
- OCaml News 2024-4
-
- </a>
- </div>
-
- <span class="post-date">Jul 1, 2024</span>
- </div>
-
-
<div id="paginator">
<div class=paginator>
diff --git a/archives/page/3/index.html b/archives/page/3/index.html
index 58c01220..cb00b2fb 100644
--- a/archives/page/3/index.html
+++ b/archives/page/3/index.html
@@ -144,6 +144,24 @@
<div class="post-list-item">
<div class="post-title">
+ <a href="/2024/07/01/OCaml-News-2024-4/">
+
+ OCaml News 2024-4
+
+ </a>
+ </div>
+
+ <span class="post-date">Jul 1, 2024</span>
+ </div>
+
+
+
+
+
+
+
+ <div class="post-list-item">
+ <div class="post-title">
<a href="/2024/06/27/%E4%BA%8C%E3%80%87%E4%BA%8C%E5%9B%9B%E5%B9%B4%E5%85%AD%E6%9C%88%E4%BA%8C%E5%8D%81%E4%B8%83%E6%97%A5/">
二〇二四年六月二十七日
@@ -299,24 +317,6 @@
</div>
-
-
-
-
-
- <div class="post-list-item">
- <div class="post-title">
- <a href="/2024/03/22/%E4%BA%8C%E3%80%87%E4%BA%8C%E5%9B%9B%E5%B9%B4%E4%B8%89%E6%9C%88%E4%BA%8C%E5%8D%81%E4%BA%8C%E6%97%A5/">
-
- 二〇二四年三月二十二日
-
- </a>
- </div>
-
- <span class="post-date">Mar 22, 2024</span>
- </div>
-
-
<div id="paginator">
<div class=paginator>
diff --git a/archives/page/4/index.html b/archives/page/4/index.html
index b031beec..d577c432 100644
--- a/archives/page/4/index.html
+++ b/archives/page/4/index.html
@@ -144,6 +144,24 @@
<div class="post-list-item">
<div class="post-title">
+ <a href="/2024/03/22/%E4%BA%8C%E3%80%87%E4%BA%8C%E5%9B%9B%E5%B9%B4%E4%B8%89%E6%9C%88%E4%BA%8C%E5%8D%81%E4%BA%8C%E6%97%A5/">
+
+ 二〇二四年三月二十二日
+
+ </a>
+ </div>
+
+ <span class="post-date">Mar 22, 2024</span>
+ </div>
+
+
+
+
+
+
+
+ <div class="post-list-item">
+ <div class="post-title">
<a href="/2024/02/26/OCaml-News-2024-3/">
OCaml News 2024-3
@@ -299,26 +317,6 @@
</div>
-
-
-
-
- <div class="year-title">2023</div>
-
-
- <div class="post-list-item">
- <div class="post-title">
- <a href="/2023/12/02/%E4%BA%8C%E3%80%87%E4%BA%8C%E4%B8%89%E5%B9%B4%E5%8D%81%E4%BA%8C%E6%9C%88%E4%BA%8C%E6%97%A5/">
-
- 二〇二三年十二月二日
-
- </a>
- </div>
-
- <span class="post-date">Dec 2, 2023</span>
- </div>
-
-
<div id="paginator">
<div class=paginator>
diff --git a/archives/page/5/index.html b/archives/page/5/index.html
index c93b983d..4430765a 100644
--- a/archives/page/5/index.html
+++ b/archives/page/5/index.html
@@ -144,6 +144,24 @@
<div class="post-list-item">
<div class="post-title">
+ <a href="/2023/12/02/%E4%BA%8C%E3%80%87%E4%BA%8C%E4%B8%89%E5%B9%B4%E5%8D%81%E4%BA%8C%E6%9C%88%E4%BA%8C%E6%97%A5/">
+
+ 二〇二三年十二月二日
+
+ </a>
+ </div>
+
+ <span class="post-date">Dec 2, 2023</span>
+ </div>
+
+
+
+
+
+
+
+ <div class="post-list-item">
+ <div class="post-title">
<a href="/2023/12/01/%E4%BA%8C%E3%80%87%E4%BA%8C%E4%B8%89%E5%B9%B4%E5%8D%81%E4%BA%8C%E6%9C%88%E4%B8%80%E6%97%A5/">
二〇二三年十二月一日
@@ -299,24 +317,6 @@
</div>
-
-
-
-
-
- <div class="post-list-item">
- <div class="post-title">
- <a href="/2023/10/21/OCaml-Core-Int-pow-%E7%9A%84%E5%AE%9E%E7%8E%B0/">
-
- OCaml Core.Int.pow 的实现
-
- </a>
- </div>
-
- <span class="post-date">Oct 21, 2023</span>
- </div>
-
-
<div id="paginator">
<div class=paginator>
diff --git a/archives/page/6/index.html b/archives/page/6/index.html
index 444b51cf..8d4b51f4 100644
--- a/archives/page/6/index.html
+++ b/archives/page/6/index.html
@@ -144,6 +144,24 @@
<div class="post-list-item">
<div class="post-title">
+ <a href="/2023/10/21/OCaml-Core-Int-pow-%E7%9A%84%E5%AE%9E%E7%8E%B0/">
+
+ OCaml Core.Int.pow 的实现
+
+ </a>
+ </div>
+
+ <span class="post-date">Oct 21, 2023</span>
+ </div>
+
+
+
+
+
+
+
+ <div class="post-list-item">
+ <div class="post-title">
<a href="/2023/10/13/%E8%82%9D%E5%8A%9F%E8%83%BD%E6%A3%80%E6%9F%A5%E5%8C%96%E9%AA%8C%E5%8D%95/">
肝功能检查化验单阅读指南
@@ -299,24 +317,6 @@
</div>
-
-
-
-
-
- <div class="post-list-item">
- <div class="post-title">
- <a href="/2023/08/15/poll-error-attribute-in-OCaml/">
-
- 使用 [@poll error] 实现线程安全的数据结构
-
- </a>
- </div>
-
- <span class="post-date">Aug 15, 2023</span>
- </div>
-
-
<div id="paginator">
<div class=paginator>
diff --git a/archives/page/7/index.html b/archives/page/7/index.html
index bcb0a4b0..8ec6d346 100644
--- a/archives/page/7/index.html
+++ b/archives/page/7/index.html
@@ -144,6 +144,24 @@
<div class="post-list-item">
<div class="post-title">
+ <a href="/2023/08/15/poll-error-attribute-in-OCaml/">
+
+ 使用 [@poll error] 实现线程安全的数据结构
+
+ </a>
+ </div>
+
+ <span class="post-date">Aug 15, 2023</span>
+ </div>
+
+
+
+
+
+
+
+ <div class="post-list-item">
+ <div class="post-title">
<a href="/2023/08/01/%E4%BA%8C%E3%80%87%E4%BA%8C%E4%B8%89%E5%B9%B4%E5%85%AB%E6%9C%88%E4%B8%80%E6%97%A5/">
二〇二三年八月一日
@@ -299,24 +317,6 @@
</div>
-
-
-
-
-
- <div class="post-list-item">
- <div class="post-title">
- <a href="/2023/05/24/Rust-%E9%97%AD%E5%8C%85-lifetime-may-not-live-long-enough-%E9%97%AE%E9%A2%98/">
-
- Rust 闭包 lifetime may not live long enough 问题
-
- </a>
- </div>
-
- <span class="post-date">May 24, 2023</span>
- </div>
-
-
<div id="paginator">
<div class=paginator>
diff --git a/archives/page/8/index.html b/archives/page/8/index.html
index 14399e7f..a1e7bf96 100644
--- a/archives/page/8/index.html
+++ b/archives/page/8/index.html
@@ -144,6 +144,24 @@
<div class="post-list-item">
<div class="post-title">
+ <a href="/2023/05/24/Rust-%E9%97%AD%E5%8C%85-lifetime-may-not-live-long-enough-%E9%97%AE%E9%A2%98/">
+
+ Rust 闭包 lifetime may not live long enough 问题
+
+ </a>
+ </div>
+
+ <span class="post-date">May 24, 2023</span>
+ </div>
+
+
+
+
+
+
+
+ <div class="post-list-item">
+ <div class="post-title">
<a href="/2023/05/12/C-20-%E5%AE%9E%E7%8E%B0-string-split/">
C++ 20 实现 string split
@@ -299,24 +317,6 @@
</div>
-
-
-
-
-
- <div class="post-list-item">
- <div class="post-title">
- <a href="/2023/03/14/%E8%9E%BA%E5%86%85%E9%85%AF%E7%89%87/">
-
- 螺内酯片
-
- </a>
- </div>
-
- <span class="post-date">Mar 14, 2023</span>
- </div>
-
-
<div id="paginator">
<div class=paginator>
diff --git a/archives/page/9/index.html b/archives/page/9/index.html
index bd20877c..9a771e0f 100644
--- a/archives/page/9/index.html
+++ b/archives/page/9/index.html
@@ -144,6 +144,24 @@
<div class="post-list-item">
<div class="post-title">
+ <a href="/2023/03/14/%E8%9E%BA%E5%86%85%E9%85%AF%E7%89%87/">
+
+ 螺内酯片
+
+ </a>
+ </div>
+
+ <span class="post-date">Mar 14, 2023</span>
+ </div>
+
+
+
+
+
+
+
+ <div class="post-list-item">
+ <div class="post-title">
<a href="/2023/03/14/%E5%91%8B%E5%A1%9E%E7%B1%B3/">
呋塞米
@@ -299,24 +317,6 @@
</div>
-
-
-
-
-
- <div class="post-list-item">
- <div class="post-title">
- <a href="/2023/02/22/%E4%BA%8C%E9%9B%B6%E4%BA%8C%E4%B8%89%E5%B9%B4%E4%BA%8C%E6%9C%88%E4%BA%8C%E5%8D%81%E4%BA%8C%E6%97%A5/">
-
- 二零二三年二月二十二日
-
- </a>
- </div>
-
- <span class="post-date">Feb 22, 2023</span>
- </div>
-
-
<div id="paginator">
<div class=paginator>
diff --git a/search.xml b/search.xml
index 489e80c8..3da3be28 100644
--- a/search.xml
+++ b/search.xml
@@ -2926,6 +2926,77 @@
</tags>
</entry>
<entry>
+ <title>如何管理用户界面中的危险操作</title>
+ <url>/2024/11/26/%E5%A6%82%E4%BD%95%E7%AE%A1%E7%90%86%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2%E4%B8%AD%E7%9A%84%E5%8D%B1%E9%99%A9%E6%93%8D%E4%BD%9C/</url>
+ <content><![CDATA[<blockquote>
+<p>“任何可能出错的事情都会出错。”我们的目标是防止出现问题,并在出现问题时减轻后果。</p>
+</blockquote>
+<p>界面是用户与系统通信的中介层,界面中的交互通常需要用户执行某些操作。不同的操作可能会导致不同的结果,其中可能有一些对于双方来说都非常重要甚至危险的操作。</p>
+<p>所以经常需要提供额外的保护措施来“保护”用户执行一些危险甚至无法恢复的操作。<br>这里的“保护”并不是完全的阻止,否则这个操作也没有存在的必要。</p>
+<blockquote>
+<p>“良好的错误消息很重要,但最好的设计<strong>首先会小心地防止问题发生</strong>。要么消除容易出错的情况,要么检查它们并在用户承诺操作之前向他们提供确认选项。”</p>
+</blockquote>
+<h2 id="什么是危险行为?"><a href="#什么是危险行为?" class="headerlink" title="什么是危险行为?"></a>什么是危险行为?</h2><p>危险行为并不意味着要删除某些内容,具体的危险行为应该由系统的“领域”来定义,例如:</p>
+<ul>
+<li>进行金融交易</li>
+<li>签署法律文件</li>
+<li>拉黑用户</li>
+<li>授予某些用户权限</li>
+<li>…</li>
+</ul>
+<h2 id="确认危险行为的方法"><a href="#确认危险行为的方法" class="headerlink" title="确认危险行为的方法"></a>确认危险行为的方法</h2><p>最常用的一种方法是要求用户明确确认他们的操作,这种方法也有很多实现上的细节,但无论从什么角度实现都有优劣:</p>
+<h3 id="Modal-Dialog"><a href="#Modal-Dialog" class="headerlink" title="Modal Dialog"></a>Modal Dialog</h3><p>首先需要明确 Modal Dialog 和 Non-modal Dialog 的区别。</p>
+<blockquote>
+<p>“Modal 是一种设计技术,它以一个独立的模式呈现内容,阻止用户与父视图交互,并需要明确的操作来退出。”</p>
+</blockquote>
+<p>所以 Modal Dialog 需要用户立即操作它。换句话说,除非以某种方式做出响应,否则用户无法继续使用系统。</p>
+<p>而 Non-modal Dialog 允许用户不间断地继续使用系统。Non-modal Dialog 一个常见用法就是出现在屏幕一角的 Toast 消息。</p>
+<p>所以如果使用得当,Modal Dialog 是防止意外点击危险操作的有效方法。这也是目前最流行的方法,它还可以和其他方法结合使用。</p>
+<p>但首先,需要明确一个保护用户进行危险操作的 Modal Dialog 需要有哪些元素:</p>
+<ol>
+<li>不要含糊其辞, 如果单纯的问用户:“你确定吗?”,用户很有可能不会有任何疑问直接点确定。</li>
+<li>在标题中,指定具体会发生什么或哪个实体将受到影响(例如,项目名称、用户名、金额)。</li>
+<li>提供一个图标来指示该操作是危险的,这既降低了用户盲目确认它的概率,也有利于页面的无障碍性(色盲的人可以通过图标来判断)。</li>
+<li>在描述中,要具体并突出显示必要的信息。</li>
+<li>按钮还应包含反映操作的词语,不要用“是”或“确认”之类的词,应该用更具描述性的“支付 10 元”,“删除用户韩暮秋”之类的词语。</li>
+</ol>
+<p>除此之外,还有更加严格的保护,例如在某些情况下,可以让用户输入某些内容来“解锁”操作,例如 Github 在删除仓库的时候需要输入仓库名称才能删除,这能让用户明确的知道自己在做什么,在删除哪个仓库。</p>
+<p>最后,根据 <a href="https://lawsofux.com/law-of-proximity/">临近法则</a> ,确认操作的按钮最好放在左侧。</p>
+<h4 id="Danger-Zone"><a href="#Danger-Zone" class="headerlink" title="Danger Zone"></a>Danger Zone</h4><p>对于关键的操作,可以使用 Danger Zone,常见的实现方式是将这一类关键的操作单独放在某一个页面的同一处,例如页面的底部。如果操作比较多,可以考虑使用一个单独的页面存放。</p>
+<p>使用 Danger Zone 存放关键操作组件也有一些基本要素:</p>
+<ol>
+<li>使用红色或其他富含警示性颜色的警告图标或边框,在视觉上将 Danger Zone 与页面的其他部分区分开来。</li>
+<li>Danger Zone 中的每个操作都应该清楚地描述如果用户继续进行将会发生什么,以便用户了解潜在的后果。</li>
+<li>对于一些非常关键且无法恢复的行为,可以要求用户进行额外的操作。例如要求用户重复输入密码或使用 2FA。</li>
+<li>只存放真正关键的操作。避免为了拥有一个 Danger Zone 而搞出一个 Danger Zone。</li>
+</ol>
+<h3 id="Inline-Guard"><a href="#Inline-Guard" class="headerlink" title="Inline Guard"></a>Inline Guard</h3><p>这个方法解释起来挺简单,可以用在一些零碎的页面元素中,例如有一个删除一条消息的按钮,可以在用户单击这个按钮之后将其变为红色背景并修改按钮字体为 “确认删除”,用户再次点击就确认删除了。这用来防止误点击非常有用。</p>
+<p>但是也有一些细节需要注意:</p>
+<ol>
+<li>这种方法对于不那么危险的动作来说很方便,注意是“不那么危险”</li>
+<li>一个“不那么危险”的操作应该可以恢复,所以应该提供一个选项来撤消操作或将已删除的项目放到回收站之类的地方,这是确保用户安全操作的良好组合。</li>
+</ol>
+<p>Inline Guard 不能滥用,当用户非常频繁的遇到时会烦死,得权衡一下。</p>
+<h3 id="其他方案"><a href="#其他方案" class="headerlink" title="其他方案"></a>其他方案</h3><p>还有一些方案这里简单说一下,一是 2FA,基本不用过多解释,二是双人验证甚至多人验证,就是用户发起的一个操作需要两个以上的人来验证才可以执行,例如 Github 的 Merge PR。</p>
+<p>当系统要求用户进行一些额外的操作时,应该明确其最初的目的,因为:</p>
+<ul>
+<li>认知惯性:一个人倾向于近乎惯性地决定,即使这些决定不适合当前情况。例如,绝大多数人不阅读用户协议。他们只是同意冗长的文本,因为从法律角度来看这是必要的。(是的我就是这样)</li>
+<li>人们经常根据他们容易获得或熟悉的信息做出决策,而不是动脑子想。当用户看到相同的弹出窗口时,他们可能会根据之前的经验看都不看一眼直接接受它们。</li>
+<li>人类倾向于以更简单、更省力的方式思考和解决问题,而不是更复杂、更省力的方式,无论智力如何。所以许多用户只是点击“是”或“同意”而没有仔细阅读文本。</li>
+</ul>
+<p>所以在某些情况下,我们可以用一些更加优雅的方法:</p>
+<h3 id="延迟"><a href="#延迟" class="headerlink" title="延迟"></a>延迟</h3><p>上面 Inline Guard 用在删除消息的场景下,也可以点击删除按钮直接删除,但同时显示一个倒计时的 Toast 并附带一个“撤销”的按钮来提醒用户。</p>
+<h2 id="撤销"><a href="#撤销" class="headerlink" title="撤销"></a>撤销</h2><p>允许用户撤消刚刚执行的操作,从而提供一个安全网来减少因犯错误而产生的焦虑。<br>与 Modal Dialog 这种中断系统并要求用户确认的模式不同,撤消允许完成操作后在需要时选择撤消操作,从而提供更流畅的体验。</p>
+<p>它非常适合非破坏性、不可恢复的操作以及不会产生重大和直接后果的操作。</p>
+<p>撤消选项与“软删除”的概念密切相关,“软删除” 的意思是:当用户通过 UI 删除某些内容时,_看起来它已被删除_,但在数据库中,我们保留数据但将其标记为已删除。数据不会丢失,这就是为什么可以使用撤消选项,因为我们实际上并没有删除任何内容,而是将其标记为已删除。</p>
+<p>晚安。</p>
+]]></content>
+ <tags>
+ <tag>UI/UX</tag>
+ <tag>Design</tag>
+ </tags>
+ </entry>
+ <entry>
<title>急诊与灾难医学--烧伤</title>
<url>/2024/01/25/%E6%80%A5%E8%AF%8A%E4%B8%8E%E7%81%BE%E9%9A%BE%E5%8C%BB%E5%AD%A6-%E7%83%A7%E4%BC%A4/</url>
<content><![CDATA[<p>烧伤,烫伤是一个很常见的急诊意外损伤,这里科普一下相关的知识。</p>
@@ -3694,17 +3765,6 @@
</tags>
</entry>
<entry>
- <title>藿香正气水和藿香正气口服液的区别</title>
- <url>/2024/09/01/%E8%97%BF%E9%A6%99%E6%AD%A3%E6%B0%94%E6%B0%B4%E5%92%8C%E8%97%BF%E9%A6%99%E6%AD%A3%E6%B0%94%E5%8F%A3%E6%9C%8D%E6%B6%B2%E7%9A%84%E5%8C%BA%E5%88%AB/</url>
- <content><![CDATA[<p>虽然都是口服液体制剂,且看起来单支容量都一样,但是藿香正气水里含有 40%-50% 的乙醇,而藿香正气口服液不含有乙醇。同时藿香正气水不能和头孢一起服用(因为含有酒精),而藿香正气口服液可以和头孢一起服用。在选用之前,还希望大家能仔细看药品名称。</p>
-<p>正气水是酊剂,用的是生半夏,口服液用的是法半夏,比正气水多了炒的白术,生姜和大枣,两者的功效都是解表化湿,理气和中。藿香正气水由水煮及酒浸制而成,疗效最明显,但口感较差。由于霍香正气水药效比较峻猛,小儿和年老体虚者服用时应有医生指导。藿香正气口服液是藿香正气的换代产品。</p>
-]]></content>
- <tags>
- <tag>Medicine</tag>
- <tag>Life</tag>
- </tags>
- </entry>
- <entry>
<title>螺内酯片</title>
<url>/2023/03/14/%E8%9E%BA%E5%86%85%E9%85%AF%E7%89%87/</url>
<content><![CDATA[<h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><p>螺内酯是保钾利尿药,用于治疗心衰、低钾血症和高血压等。但是,它也会阻断雄激素受体,从而具有抗雄激素特性(我想你应该联想到了什么);不过其效力较弱,需服用较大剂量方可充分起效(尿频等副作用也更明显)。</p>
@@ -3846,6 +3906,17 @@
</tags>
</entry>
<entry>
+ <title>藿香正气水和藿香正气口服液的区别</title>
+ <url>/2024/09/01/%E8%97%BF%E9%A6%99%E6%AD%A3%E6%B0%94%E6%B0%B4%E5%92%8C%E8%97%BF%E9%A6%99%E6%AD%A3%E6%B0%94%E5%8F%A3%E6%9C%8D%E6%B6%B2%E7%9A%84%E5%8C%BA%E5%88%AB/</url>
+ <content><![CDATA[<p>虽然都是口服液体制剂,且看起来单支容量都一样,但是藿香正气水里含有 40%-50% 的乙醇,而藿香正气口服液不含有乙醇。同时藿香正气水不能和头孢一起服用(因为含有酒精),而藿香正气口服液可以和头孢一起服用。在选用之前,还希望大家能仔细看药品名称。</p>
+<p>正气水是酊剂,用的是生半夏,口服液用的是法半夏,比正气水多了炒的白术,生姜和大枣,两者的功效都是解表化湿,理气和中。藿香正气水由水煮及酒浸制而成,疗效最明显,但口感较差。由于霍香正气水药效比较峻猛,小儿和年老体虚者服用时应有医生指导。藿香正气口服液是藿香正气的换代产品。</p>
+]]></content>
+ <tags>
+ <tag>Medicine</tag>
+ <tag>Life</tag>
+ </tags>
+ </entry>
+ <entry>
<title>过度疲劳的六种表现</title>
<url>/2023/10/12/%E8%BF%87%E5%BA%A6%E7%96%B2%E5%8A%B3%E7%9A%84%E5%85%AD%E7%A7%8D%E8%A1%A8%E7%8E%B0/</url>
<content><![CDATA[<ol>
diff --git a/tag/index.html b/tag/index.html
index 94421388..8751a3ad 100644
--- a/tag/index.html
+++ b/tag/index.html
@@ -234,6 +234,18 @@
Life
</a>
</span>
+
+ <span class="post-tag">
+ <a href="/tags/UI-UX/">
+ UI/UX
+ </a>
+ </span>
+
+ <span class="post-tag">
+ <a href="/tags/Design/">
+ Design
+ </a>
+ </span>
</div>
</div>
diff --git a/tags/Design/index.html b/tags/Design/index.html
new file mode 100644
index 00000000..73e852ae
--- /dev/null
+++ b/tags/Design/index.html
@@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+<meta name="viewport"
+ content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+<meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+ <meta name="author" content="韩暮秋">
+
+
+ <meta name="subtitle" content="暮秋小屋">
+
+
+ <meta name="description" content="这里是暮秋小屋,思念和灵感的寄存处">
+
+
+ <meta name="keywords" content="韩暮秋,MuqiuHan,'Muqiu Han', 'muqiu han', muqiuhan">
+
+
+
+
+<title>Tag: Design | 暮秋小屋</title>
+
+
+
+ <link rel="icon" href="/favicon.ico">
+
+
+
+<style>
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&family=Roboto+Mono&display=swap');
+</style>
+
+
+
+ <!-- stylesheets list from _config.yml -->
+
+ <link rel="stylesheet" href="/css/style.css">
+
+
+
+
+
+ <!-- scripts list from _config.yml -->
+
+ <script src="/js/frame.js"></script>
+
+
+
+
+
+ <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+ <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+
+
+
+
+
+
+
+ <meta name="generator" content="Hexo 6.3.0"></head>
+ <body>
+ <div class="mask-border">
+ </div>
+
+ <div class="wrapper">
+
+ <div class="header">
+ <div class="flex-container">
+ <div class="header-inner">
+ <div class="site-brand-container">
+ <a href="/">
+
+ 暮秋小屋
+
+ </a>
+ </div>
+ <div id="menu-btn" class="menu-btn" onclick="toggleMenu()">
+ Menu
+ </div>
+ <nav class="site-nav">
+ <ul class="menu-list">
+
+
+ <li class="menu-item">
+ <a href="/">主页</a>
+ </li>
+
+
+
+ <li class="menu-item">
+ <a href="/categories/gallery/">日记本</a>
+ </li>
+
+
+
+ <li class="menu-item">
+ <a href="/tags/Medicine/">医学</a>
+ </li>
+
+
+
+ <li class="menu-item">
+ <a href="/tags/Technique/">计算机科学</a>
+ </li>
+
+
+
+ <li class="menu-item">
+ <a href="/tags/Life/">生活</a>
+ </li>
+
+
+
+ <li class="menu-item">
+ <a href="/about">关于</a>
+ </li>
+
+
+
+ <li class="menu-item search-btn">
+ <a href="#">Search</a>
+ </li>
+
+ </ul>
+ </nav>
+ </div>
+ </div>
+</div>
+
+
+ <div class="main">
+ <div class="flex-container">
+ <div id="tag">
+
+
+ <p class="tag-title">
+ / <a href="/tag/">tags</a>
+ / <a href="">Design</a> /
+ </p>
+ <div class="post-list">
+
+
+
+
+
+
+ <div class="year-title">2024</div>
+
+
+ <div class="post-list-item">
+ <div class="post-title">
+ <a href="/2024/11/26/%E5%A6%82%E4%BD%95%E7%AE%A1%E7%90%86%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2%E4%B8%AD%E7%9A%84%E5%8D%B1%E9%99%A9%E6%93%8D%E4%BD%9C/">
+
+ 如何管理用户界面中的危险操作
+
+ </a>
+ </div>
+
+ <span class="post-date">Nov 26, 2024</span>
+ </div>
+
+
+ <div id="paginator">
+
+ </div>
+</div>
+
+
+
+
+</div>
+ </div>
+ </div>
+
+ <div class="footer">
+ <div class="flex-container">
+ <div class="footer-text">
+
+
+ |
+
+
+ 希望路过的人可以添点柴火让这里暖和点
+
+ </div>
+ </div>
+</div>
+
+ </div>
+
+
+ <div class="search-popup">
+ <div class="search-popup-overlay">
+ </div>
+ <div class="search-popup-window" >
+ <div class="search-header">
+ <div class="search-input-container">
+ <input autocomplete="off" autocapitalize="off" maxlength="80"
+ placeholder="Search Anything" spellcheck="false"
+ type="search" class="search-input">
+ </div>
+ <div class="search-close-btn">
+ <div class="icon close-btn"></div>
+ </div>
+ </div>
+ <div class="search-result-container">
+ </div>
+ </div>
+</div>
+
+<script>
+ const searchConfig = {
+ path : "/search.xml",
+ top_n_per_article: "1",
+ unescape : "false",
+ trigger: "auto",
+ preload: "false"
+ }
+</script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/search.js"></script>
+<script src="/js/search.js"></script>
+
+
+
+ </body>
+</html>
diff --git a/tags/UI-UX/index.html b/tags/UI-UX/index.html
new file mode 100644
index 00000000..70ff2dda
--- /dev/null
+++ b/tags/UI-UX/index.html
@@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+<meta name="viewport"
+ content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+<meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+ <meta name="author" content="韩暮秋">
+
+
+ <meta name="subtitle" content="暮秋小屋">
+
+
+ <meta name="description" content="这里是暮秋小屋,思念和灵感的寄存处">
+
+
+ <meta name="keywords" content="韩暮秋,MuqiuHan,'Muqiu Han', 'muqiu han', muqiuhan">
+
+
+
+
+<title>Tag: UI/UX | 暮秋小屋</title>
+
+
+
+ <link rel="icon" href="/favicon.ico">
+
+
+
+<style>
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&family=Roboto+Mono&display=swap');
+</style>
+
+
+
+ <!-- stylesheets list from _config.yml -->
+
+ <link rel="stylesheet" href="/css/style.css">
+
+
+
+
+
+ <!-- scripts list from _config.yml -->
+
+ <script src="/js/frame.js"></script>
+
+
+
+
+
+ <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+ <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+
+
+
+
+
+
+
+ <meta name="generator" content="Hexo 6.3.0"></head>
+ <body>
+ <div class="mask-border">
+ </div>
+
+ <div class="wrapper">
+
+ <div class="header">
+ <div class="flex-container">
+ <div class="header-inner">
+ <div class="site-brand-container">
+ <a href="/">
+
+ 暮秋小屋
+
+ </a>
+ </div>
+ <div id="menu-btn" class="menu-btn" onclick="toggleMenu()">
+ Menu
+ </div>
+ <nav class="site-nav">
+ <ul class="menu-list">
+
+
+ <li class="menu-item">
+ <a href="/">主页</a>
+ </li>
+
+
+
+ <li class="menu-item">
+ <a href="/categories/gallery/">日记本</a>
+ </li>
+
+
+
+ <li class="menu-item">
+ <a href="/tags/Medicine/">医学</a>
+ </li>
+
+
+
+ <li class="menu-item">
+ <a href="/tags/Technique/">计算机科学</a>
+ </li>
+
+
+
+ <li class="menu-item">
+ <a href="/tags/Life/">生活</a>
+ </li>
+
+
+
+ <li class="menu-item">
+ <a href="/about">关于</a>
+ </li>
+
+
+
+ <li class="menu-item search-btn">
+ <a href="#">Search</a>
+ </li>
+
+ </ul>
+ </nav>
+ </div>
+ </div>
+</div>
+
+
+ <div class="main">
+ <div class="flex-container">
+ <div id="tag">
+
+
+ <p class="tag-title">
+ / <a href="/tag/">tags</a>
+ / <a href="">UI/UX</a> /
+ </p>
+ <div class="post-list">
+
+
+
+
+
+
+ <div class="year-title">2024</div>
+
+
+ <div class="post-list-item">
+ <div class="post-title">
+ <a href="/2024/11/26/%E5%A6%82%E4%BD%95%E7%AE%A1%E7%90%86%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2%E4%B8%AD%E7%9A%84%E5%8D%B1%E9%99%A9%E6%93%8D%E4%BD%9C/">
+
+ 如何管理用户界面中的危险操作
+
+ </a>
+ </div>
+
+ <span class="post-date">Nov 26, 2024</span>
+ </div>
+
+
+ <div id="paginator">
+
+ </div>
+</div>
+
+
+
+
+</div>
+ </div>
+ </div>
+
+ <div class="footer">
+ <div class="flex-container">
+ <div class="footer-text">
+
+
+ |
+
+
+ 希望路过的人可以添点柴火让这里暖和点
+
+ </div>
+ </div>
+</div>
+
+ </div>
+
+
+ <div class="search-popup">
+ <div class="search-popup-overlay">
+ </div>
+ <div class="search-popup-window" >
+ <div class="search-header">
+ <div class="search-input-container">
+ <input autocomplete="off" autocapitalize="off" maxlength="80"
+ placeholder="Search Anything" spellcheck="false"
+ type="search" class="search-input">
+ </div>
+ <div class="search-close-btn">
+ <div class="icon close-btn"></div>
+ </div>
+ </div>
+ <div class="search-result-container">
+ </div>
+ </div>
+</div>
+
+<script>
+ const searchConfig = {
+ path : "/search.xml",
+ top_n_per_article: "1",
+ unescape : "false",
+ trigger: "auto",
+ preload: "false"
+ }
+</script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/search.js"></script>
+<script src="/js/search.js"></script>
+
+
+
+ </body>
+</html>