Heuristic 啟發式設計是用戶體驗設計的重要原則之一，涉及了許多與真實世界匹配、用戶控制、一致性和準則等方面，通過一些具體的例子解釋了這些原則的重要性。本文還提供了一些相關的視覺系統狀態和系統與真實世界匹配的例子，同時附帶了一些相關的教程和資料來源。

<div class="draft-block draft--p left">用戶體驗設計滿特別的</div>

<html lang="en"><head><style>              .article-container {                width: 100%;                font-family: Microsoft JhengHei,Helvetica Neue,Helvetica,Arial,sans-serif;              }              ul, ol {                margin: 12px auto;                max-width: 740px;                color: #535150;                line-height: 1.8;                padding-left: 0px;              }              .graf--img {                display: table;                justify-content: center;                align-items: center;                text-align: center;                color: gray;                font-size: 14px;                letter-spacing: 0px;                margin: 10px auto 50px;                width: 100%;                position: relative;                clear: both;              }              .graf--img.center img {                width: 100%;                max-width: 740px;                margin: 10px auto 0px;                display: block;                margin: 0 auto;              }              .graf--img.full img {                width: 100%;              }              .captionTheme__wrapper {                width: 100%;                font-style: normal;                line-height: 22px;                font-size: 16px;                max-width: 600px;                margin-top: 8px;                display: inline-block;              }              .graf--img.full {                max-width: 100%;                margin: 40px 0px;                display: block;                margin: 0 auto;                align-items: center;              }              .graf--figure {                text-align: center;                color: gray;                font-style: italic;                font-size: 15px;                margin: 28px auto;                box-sizing: border-box;              }              .graf--figure iframe {                width: 100%;                max-width: 740px;                margin: 0 auto;              }              .graf--p {                font-size: 16px;                line-height: 1.8;                font-family: "Microsoft JhengHei fixed", "Helvetica Neue" ,"Microsoft JhengHei", Helvetica, "Segoe UI", Tahoma, Arial, sans-serif;                letter-spacing: 1px;                font-weight: 400;                max-width: 740px;                color: #535150;                text-align: left;              }              .graf--p > a {                color: #00B3C6 !important;                text-decoration: none !important;              }              .graf--li > a {                color: #00B3C6 !important;                text-decoration: none !important;              }              .graf--quotesSpecial > a {                color: #00B3C6 !important;                text-decoration: none !important;              }              .graf--blockquote > a {                color: #00B3C6 !important;                text-decoration: none !important;              }              a.graf--mention {                color: #535150 !important;                text-decoration: underline !important;                font-weight: 700;              }              .graf--h2 {                font-size: 24px;                padding: 0;                max-width: 740px;                text-align: left;                letter-spacing: 1px;                font-weight: 700;                margin-top: 34px;              }              .graf--h3 {                font-size: 18px;                padding: 0;                max-width: 740px;                text-align: left;                letter-spacing: 1px;                font-weight: 700;                margin-top: 28px;              }              .graf--li {                font-size: 16px;                padding: 0px 0px 0px 4px;                font-weight: 400;                letter-spacing: 0px;                list-style-position: outside;                text-align:left;                margin-left: 24px;              }              .graf--hr {                width: 100%;                margin: 0px auto;                transform: translateY(-50%);                position: relative;                padding: 0px;                text-align: left;                max-width: 740px;                margin: 0 auto;              }              .graf--hr hr {                height: 0;              }              .graf--blockquote {                padding: 10px 0px 10px 16px;                font-size: 16px;                color: #7A7574;                letter-spacing: 1px;                margin: 28px 0px;                border-left: 4px solid #DDD9D8;                width: 100%;                max-width: 740px;                text-align: left;              }              .graf--quotesSpecial {                display: table;                color: #7A7574;                position: relative;                padding: 31.5px 40px;                text-align: center;                letter-spacing: 0px;                position: relative;                margin: 29px auto;                font-family: "Microsoft JhengHei fixed", "Helvetica Neue", "Microsoft JhengHei", Helvetica, "Segoe UI", Tahoma, Arial, sans-serif;                font-size: 16px;                -webkit-box-ordinal-group: 1;                -webkit-box-flex: 0;              }              .embed-wrapper {                max-width: 740px;                border: 1px solid #DDD9D8;                display: block;                padding: 12px;                border-radius: 8px;                margin: 12px 0px;                text-decoration: none !important;              }              .embed-title {                font-size: 16px;                font-weight: 700;                color: #535150;                margin-bottom: 8px;                text-align: left;                line-height: 1.5;                text-decoration: none !important;              }              .embed-description {                width: 100%;                font-size: 14px;                color: #7A7574;                line-height: 1.5;                max-height: 150px;                text-align: left;                overflow: hidden;                padding: 12px 0px;              }              .embed-url > a {                width: 100%;                font-size: 14px;                color: #141413 !important;                text-decoration: none !important;                line-height: 1.5;                text-align: left;              }                            .embed-thumbnail-wrapper {                padding-left: 12px;              }              .embed-thumbnail {                width:100px;                border-radius: 8px;              }              pre {                background: #F6F6F6;                border-radius: 8px;                padding: 16px;                font-size: 16px;                color: #535150;                line-height: 180%;                text-align: left;              }              .lexical__textBold {                font-weight: bold;              }              .lexical__textItalic {                font-style: italic;              }              .lexical__textUnderline {                text-decoration: underline;              }              .lexical__textStrikethrough {                text-decoration: line-through;              }              .lexical__textUnderlineStrikethrough {                text-decoration: underline line-through;              }              .lexical__textSubscript {                font-size: 0.8em;                vertical-align: sub;              }              .lexical__textSuperscript {                font-size: 0.8em;                vertical-align: super;              }              .lexical__textCode {                background-color: rgb(240, 242, 245);                padding: 1px 0.25rem;                font-family: Menlo, Consolas, Monaco, monospace;                font-size: 94%;              }            </style></head><body><div class="article-container"><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">今天來介紹什麼是Ｈeuristic 啟發式設計跟在應用程式也許你會看到為什麼要設計的原因</span></p><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">Heuristic 啟發式設計意思是來解決問題</span></p><h2 class="graf--h2" dir="ltr"><b><strong class="lexical__textBold" style="white-space: pre-wrap;">1.視覺系統狀態Visibility of system status - 告訴使用者目前的狀態</strong></b></h2><p class="graf--p" dir="ltr"><br></p><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">當你在使用Canva設計軟體時候，你會很清楚知道你現在在哪個步驟</span></p><div class="graf--img center"><div class="lexical__imageWrapper"><img src="https://images.vocus.cc/e47cac81-5a64-492d-9f92-0c49036ef695.png" data-src="https://d2a6d2ofes041u.cloudfront.net/resize?compression=6&norotation=true&url=https%3A%2F%2Fimages.vocus.cc%2Fe47cac81-5a64-492d-9f92-0c49036ef695.png&width=740&sign=9t21Q3tuv86Qncg30WGBg0CmNuYnq--ZSRTj_EM-iU0" class="lazy" data-original-src="https://images.vocus.cc/e47cac81-5a64-492d-9f92-0c49036ef695.png" data-lowquality="false" data-width="1812" data-height="964" onerror="this.onError=null;this.src=this.dataset.originalSrc;" alt="Canva 設計軟體"></div><div class="captionTheme__wrapper"><p class="captionTheme__paragraph">Canva 設計軟體</p></div></div><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">以下完整的動態表達</span></p><p class="graf--p" dir="ltr"><a href="https://d37oebn0w9ir6a.cloudfront.net/account_6827/canva-onboarding-ux-example_0ceab558f8c1b3a35be14826ce6fb25a.gif"><span style="white-space: pre-wrap;">https://d37oebn0w9ir6a.cloudfront.net/account_6827/canva-onboarding-ux-example_0ceab558f8c1b3a35be14826ce6fb25a.gif</span></a></p><p class="graf--p" dir="ltr"><br></p><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">另一個範例是，你下載軟體，你會知道你目前的進度條在哪裡</span></p><div class="graf--img center"><div class="lexical__imageWrapper"><img src="https://images.vocus.cc/50003954-ebef-449c-9e4a-791c90bbf478.png" data-src="https://d2a6d2ofes041u.cloudfront.net/resize?compression=6&norotation=true&url=https%3A%2F%2Fimages.vocus.cc%2F50003954-ebef-449c-9e4a-791c90bbf478.png&width=740&sign=pyzBX8WDWYrQUKxziMQ4VVCu8a_nezuNjyn_pTr534s" class="lazy" data-original-src="https://images.vocus.cc/50003954-ebef-449c-9e4a-791c90bbf478.png" data-lowquality="false" data-width="1564" data-height="510" onerror="this.onError=null;this.src=this.dataset.originalSrc;" alt="App 下載在Chromie"></div><div class="captionTheme__wrapper"><p class="captionTheme__paragraph">App 下載在Chromie</p></div></div><p class="graf--p" dir="ltr"><br></p><h2 class="graf--h2" dir="ltr"><b><strong class="lexical__textBold" style="white-space: pre-wrap;">2.配對真實世界和應用系統</strong></b></h2><p class="graf--p" dir="ltr"><br></p><p class="graf--p" dir="ltr"><br></p><p class="graf--p" dir="ltr"><br></p><div class="graf--img center"><div class="lexical__imageWrapper"><img src="https://images.vocus.cc/f1844398-0cb8-4c8a-bcb9-76a174cf382c.png" data-src="https://d2a6d2ofes041u.cloudfront.net/resize?compression=6&norotation=true&url=https%3A%2F%2Fimages.vocus.cc%2Ff1844398-0cb8-4c8a-bcb9-76a174cf382c.png&width=88&sign=2xFrqgaW_973Cy9iA-Bum_Ej5udlzCF_jJG2Plajh6Q" class="lazy" data-original-src="https://images.vocus.cc/f1844398-0cb8-4c8a-bcb9-76a174cf382c.png" data-lowquality="false" data-width="88" data-height="120" onerror="this.onError=null;this.src=this.dataset.originalSrc;" alt="清空的垃圾桶"></div><div class="captionTheme__wrapper"><p class="captionTheme__paragraph">清空的垃圾桶</p></div></div><p class="graf--p" dir="ltr"><br></p><div class="graf--img center"><div class="lexical__imageWrapper"><img src="https://images.vocus.cc/8db5b09e-36cf-456f-a2c0-cd4a3a45e2bc.png" data-src="https://d2a6d2ofes041u.cloudfront.net/resize?compression=6&norotation=true&url=https%3A%2F%2Fimages.vocus.cc%2F8db5b09e-36cf-456f-a2c0-cd4a3a45e2bc.png&width=100&sign=xMxMnExFvEXlOfWhO1LV_aciLMFukGcfxiDwopM5Ebw" class="lazy" data-original-src="https://images.vocus.cc/8db5b09e-36cf-456f-a2c0-cd4a3a45e2bc.png" data-lowquality="false" data-width="100" data-height="116" onerror="this.onError=null;this.src=this.dataset.originalSrc;" alt="有東西在裡面時的垃圾桶"></div><div class="captionTheme__wrapper"><p class="captionTheme__paragraph">有東西在裡面時的垃圾桶</p></div></div><p class="graf--p" dir="ltr"><br></p><h2 class="graf--h2" dir="ltr"><b><strong class="lexical__textBold" style="white-space: pre-wrap;">3.使用者控制度與自由空間 - 避免錯誤和有自由空間</strong></b></h2><p class="graf--p" dir="ltr"><br></p><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">當你在看YT時候，YT提供進度條，讓使用者有自由權利去控制時間條</span></p><div class="graf--img center"><div class="lexical__imageWrapper"><img src="https://images.vocus.cc/3173f1a2-ddb8-49e2-8bed-15af702dcf17.png" data-src="https://d2a6d2ofes041u.cloudfront.net/resize?compression=6&norotation=true&url=https%3A%2F%2Fimages.vocus.cc%2F3173f1a2-ddb8-49e2-8bed-15af702dcf17.png&width=740&sign=cQ5ufXeJIgqmDpKsFxa1YcE-icxlHw_fPzRxLDYxBSg" class="lazy" data-original-src="https://images.vocus.cc/3173f1a2-ddb8-49e2-8bed-15af702dcf17.png" data-lowquality="false" data-width="3554" data-height="1786" onerror="this.onError=null;this.src=this.dataset.originalSrc;" alt="raw-image"></div><div></div></div><p class="graf--p" dir="ltr"><br></p><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">當你不小心誤刪到東西，你可以回到上一個步驟 :)</span></p><p class="graf--p" dir="ltr"><br></p><div class="graf--img center"><div class="lexical__imageWrapper"><img src="https://images.vocus.cc/ebb4755f-1d7d-4de1-96ce-dfee569f8c27.png" data-src="https://d2a6d2ofes041u.cloudfront.net/resize?compression=6&norotation=true&url=https%3A%2F%2Fimages.vocus.cc%2Febb4755f-1d7d-4de1-96ce-dfee569f8c27.png&width=740&sign=JokTBt5gRBsLyNktJ7kri11i9B7PnDD-GZcPyOS1bPI" class="lazy" data-original-src="https://images.vocus.cc/ebb4755f-1d7d-4de1-96ce-dfee569f8c27.png" data-lowquality="false" data-width="2000" data-height="1639" onerror="this.onError=null;this.src=this.dataset.originalSrc;" alt="Google Driver"></div><div class="captionTheme__wrapper"><p class="captionTheme__paragraph">Google Driver</p></div></div><p class="graf--p" dir="ltr"><br></p><h2 class="graf--h2" dir="ltr"><span style="white-space: pre-wrap;">4.一致性與正規</span></h2><p class="graf--p" dir="ltr"><br></p><blockquote class="graf--blockquote" dir="ltr"><span style="white-space: pre-wrap;">The rule of consistency and standards means that a user’s interaction with your product never confuses him. “Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen.” — Jakob Nielsen.</span></blockquote><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">Jakob 定義一致性的重要性，當使用者使用你的產品時，他們不會覺得困惑．</span></p><p class="graf--p" dir="ltr"><br></p><p class="graf--p" dir="ltr"><span style="white-space: pre-wrap;">以下是大家熟悉的產品，是不是感覺很類似相同呢? </span></p><div class="graf--img center"><div class="lexical__imageWrapper"><img src="https://images.vocus.cc/370dea4c-4992-47f9-8cbe-bd8520e18a24.png" data-src="https://d2a6d2ofes041u.cloudfront.net/resize?compression=6&norotation=true&url=https%3A%2F%2Fimages.vocus.cc%2F370dea4c-4992-47f9-8cbe-bd8520e18a24.png&width=740&sign=QbQLpnhw_uJPc5xGrde0gS8wsyXC5IGhnUCUVZVvPKg" class="lazy" data-original-src="https://images.vocus.cc/370dea4c-4992-47f9-8cbe-bd8520e18a24.png" data-lowquality="false" data-width="2000" data-height="1085" onerror="this.onError=null;this.src=this.dataset.originalSrc;" alt="Microsoft 軟體"></div><div class="captionTheme__wrapper"><p class="captionTheme__paragraph">Microsoft 軟體</p></div></div><p class="graf--p" dir="ltr"><b><strong class="lexical__textBold" style="white-space: pre-wrap;">優點:</strong></b></p><ul class="lexical__ul"><li value="1" class="graf--li"><span style="white-space: pre-wrap;">相似的顏色和icon 再一起</span></li></ul><ul class="lexical__ul"><li value="1" class="graf--li"><b><strong class="lexical__textBold" style="white-space: pre-wrap;">減少使用者學習時間跟認識</strong></b></li></ul><p class="graf--p" dir="ltr"><br></p><h3 class="graf--h3" dir="ltr"><span style="white-space: pre-wrap;">文章討論:</span></h3><ul class="lexical__ul"><li value="1" class="graf--li"><span style="white-space: pre-wrap;">系統告知使用者進度和回饋 </span></li><li value="2" class="graf--li"><span style="white-space: pre-wrap;">使用者想要回到之前步驟或跳過 </span></li><li value="3" class="graf--li"><span style="white-space: pre-wrap;">產品和特徵保持一至性 </span></li><li value="4" class="graf--li"><span style="white-space: pre-wrap;">加快使用者熟悉產品和特徵 </span></li></ul><p class="graf--p" dir="ltr"><br></p><h2 class="graf--h2" dir="ltr"><span style="white-space: pre-wrap;">影片教學和講解</span></h2><p class="graf--p"><br></p></div></body></html>

以行動支持創作者！付費即可解鎖

設計

TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空，一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮，突然發現幾家商場都又開始重新上架，價格也都回到正常水準，估計是官方又再補了一批貨，想都沒想就立刻下單！
同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷！

渡狼／DL

蝦皮開箱｜TOMICA 吉伊卡哇 烏薩奇兔兔小車

每年4月、5月都是最多稅要繳的月份，當然大部份的人都是有機會繳到「綜合所得稅」，只是相當相當多人還不知道，原來繳給政府的稅！可以透過一些有活動的銀行信用卡或電子支付來繳，從繳費中賺一點點小確幸！就是賺個１%~2%大家也是很開心的，因為你們把沒回饋變成有回饋，就是用卡的最高境界



所得稅線上申報


阿千看世界

2025年綜合所得稅繳稅教學：線上申報、信用卡回饋、拆單攻略！

設計思考

Design = Amazing

設計 + 程式，是一個出版對設計和程式的學習影片和教學文章，目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr 

JayLinXR

跟Jay一起做App

Coding = Dynamic

JayLinXR Youtube

Heuristic 啟發式設計: 用戶體驗設計的重要原則

圖文插畫

旅行美食

創作

自我成長

色格子

文化生活

小說

政治與評論

<p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">今天來介紹什麼是Ｈeuristic&nbsp;啟發式設計跟在應用程式也許你會看到為什麼要設計的原因</span></p><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">Heuristic 啟發式設計意思是來解決問題</span></p><h2 class="lexical__h2" dir="ltr"><b><strong class="lexical__textBold" style="white-space: pre-wrap;">1.視覺系統狀態Visibility of system status - 告訴使用者目前的狀態</strong></b></h2><p class="lexical__paragraph" dir="ltr"><div class="ad-placeholder" style="min-height: 124px;"></div><br></p><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">當你在使用Canva設計軟體時候，你會很清楚知道你現在在哪個步驟</span></p><div class="lexical__image center"><div class="lexical__imageWrapper"><img src="https://resize-image.vocus.cc/resize?compression=6&amp;norotation=true&amp;url=https%3A%2F%2Fimages.vocus.cc%2Fe47cac81-5a64-492d-9f92-0c49036ef695.png&amp;width=740&amp;sign=9t21Q3tuv86Qncg30WGBg0CmNuYnq--ZSRTj_EM-iU0" data-src="https://resize-image.vocus.cc/resize?compression=6&amp;norotation=true&amp;url=https%3A%2F%2Fimages.vocus.cc%2Fe47cac81-5a64-492d-9f92-0c49036ef695.png&amp;width=740&amp;sign=9t21Q3tuv86Qncg30WGBg0CmNuYnq--ZSRTj_EM-iU0" data-loaded="true" data-original-src="https://images.vocus.cc/e47cac81-5a64-492d-9f92-0c49036ef695.png" data-lowquality="false" data-width="1812" data-height="964" data-retry="0" onerror="Number(this.dataset.retry) > 4 ? this.src='/static/default-error-img.svg': (() => {this.src=this.dataset.originalSrc; this.dataset.retry = Number(this.dataset.retry)+1;})()" data-istopthreeimage="true" alt="Canva 設計軟體"></div><div class="captionTheme__wrapper"><p class="captionTheme__paragraph">Canva 設計軟體</p></div></div><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">以下完整的動態表達</span></p><p class="lexical__paragraph" dir="ltr"><a href="https://d37oebn0w9ir6a.cloudfront.net/account_6827/canva-onboarding-ux-example_0ceab558f8c1b3a35be14826ce6fb25a.gif"><span style="white-space: pre-wrap;">https://d37oebn0w9ir6a.cloudfront.net/account_6827/canva-onboarding-ux-example_0ceab558f8c1b3a35be14826ce6fb25a.gif</span></a></p><p class="lexical__paragraph" dir="ltr"><br></p><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">另一個範例是，你下載軟體，你會知道你目前的進度條在哪裡</span></p><div class="lexical__image center"><div class="lexical__imageWrapper"><img src="https://resize-image.vocus.cc/resize?compression=6&amp;norotation=true&amp;url=https%3A%2F%2Fimages.vocus.cc%2F50003954-ebef-449c-9e4a-791c90bbf478.png&amp;width=740&amp;sign=pyzBX8WDWYrQUKxziMQ4VVCu8a_nezuNjyn_pTr534s" data-src="https://resize-image.vocus.cc/resize?compression=6&amp;norotation=true&amp;url=https%3A%2F%2Fimages.vocus.cc%2F50003954-ebef-449c-9e4a-791c90bbf478.png&amp;width=740&amp;sign=pyzBX8WDWYrQUKxziMQ4VVCu8a_nezuNjyn_pTr534s" data-loaded="true" data-original-src="https://images.vocus.cc/50003954-ebef-449c-9e4a-791c90bbf478.png" data-lowquality="false" data-width="1564" data-height="510" data-retry="0" onerror="Number(this.dataset.retry) > 4 ? this.src='/static/default-error-img.svg': (() => {this.src=this.dataset.originalSrc; this.dataset.retry = Number(this.dataset.retry)+1;})()" data-istopthreeimage="true" alt="App 下載在Chromie"></div><div class="captionTheme__wrapper"><p class="captionTheme__paragraph">App 下載在Chromie</p></div></div><p class="lexical__paragraph" dir="ltr"><br></p><h2 class="lexical__h2" dir="ltr"><b><strong class="lexical__textBold" style="white-space: pre-wrap;">2.配對真實世界和應用系統</strong></b></h2><p class="lexical__paragraph" dir="ltr"><br></p><p class="lexical__paragraph" dir="ltr"><br></p><p class="lexical__paragraph" dir="ltr"><br></p><div class="lexical__image center"><div class="lexical__imageWrapper"><img src="https://resize-image.vocus.cc/resize?compression=6&amp;norotation=true&amp;url=https%3A%2F%2Fimages.vocus.cc%2Ff1844398-0cb8-4c8a-bcb9-76a174cf382c.png&amp;width=88&amp;sign=2xFrqgaW_973Cy9iA-Bum_Ej5udlzCF_jJG2Plajh6Q" data-src="https://resize-image.vocus.cc/resize?compression=6&amp;norotation=true&amp;url=https%3A%2F%2Fimages.vocus.cc%2Ff1844398-0cb8-4c8a-bcb9-76a174cf382c.png&amp;width=88&amp;sign=2xFrqgaW_973Cy9iA-Bum_Ej5udlzCF_jJG2Plajh6Q" data-loaded="true" data-original-src="https://images.vocus.cc/f1844398-0cb8-4c8a-bcb9-76a174cf382c.png" data-lowquality="false" data-width="88" data-height="120" data-retry="0" onerror="Number(this.dataset.retry) > 4 ? this.src='/static/default-error-img.svg': (() => {this.src=this.dataset.originalSrc; this.dataset.retry = Number(this.dataset.retry)+1;})()" data-istopthreeimage="true" alt="清空的垃圾桶"></div><div class="captionTheme__wrapper"><p class="captionTheme__paragraph">清空的垃圾桶</p></div></div><p class="lexical__paragraph" dir="ltr"><br></p><div class="lexical__image center"><div class="lexical__imageWrapper"><img src="https://resize-image.vocus.cc/resize?compression=6&amp;norotation=true&amp;url=https%3A%2F%2Fimages.vocus.cc%2F8db5b09e-36cf-456f-a2c0-cd4a3a45e2bc.png&amp;width=100&amp;sign=xMxMnExFvEXlOfWhO1LV_aciLMFukGcfxiDwopM5Ebw" data-src="https://resize-image.vocus.cc/resize?compression=6&amp;norotation=true&amp;url=https%3A%2F%2Fimages.vocus.cc%2F8db5b09e-36cf-456f-a2c0-cd4a3a45e2bc.png&amp;width=100&amp;sign=xMxMnExFvEXlOfWhO1LV_aciLMFukGcfxiDwopM5Ebw" class="lazy" data-loaded="false" data-original-src="https://images.vocus.cc/8db5b09e-36cf-456f-a2c0-cd4a3a45e2bc.png" data-lowquality="true" data-width="100" data-height="116" data-retry="0" onerror="Number(this.dataset.retry) > 4 ? this.src='/static/default-error-img.svg': (() => {this.src=this.dataset.originalSrc; this.dataset.retry = Number(this.dataset.retry)+1;})()" data-istopthreeimage="false" alt="有東西在裡面時的垃圾桶"></div><div class="captionTheme__wrapper"><p class="captionTheme__paragraph">有東西在裡面時的垃圾桶</p></div></div><p class="lexical__paragraph" dir="ltr"><br></p><h2 class="lexical__h2" dir="ltr"><b><strong class="lexical__textBold" style="white-space: pre-wrap;">3.使用者控制度與自由空間 - 避免錯誤和有自由空間</strong></b></h2><p class="lexical__paragraph" dir="ltr"><br></p><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">當你在看YT時候，YT提供進度條，讓使用者有自由權利去控制時間條</span></p><div class="lexical__image center"><div class="lexical__imageWrapper"><img src="https://resize-image.vocus.cc/resize?compression=6&amp;norotation=true&amp;url=https%3A%2F%2Fimages.vocus.cc%2F3173f1a2-ddb8-49e2-8bed-15af702dcf17.png&amp;width=740&amp;sign=cQ5ufXeJIgqmDpKsFxa1YcE-icxlHw_fPzRxLDYxBSg" data-src="https://resize-image.vocus.cc/resize?compression=6&amp;norotation=true&amp;url=https%3A%2F%2Fimages.vocus.cc%2F3173f1a2-ddb8-49e2-8bed-15af702dcf17.png&amp;width=740&amp;sign=cQ5ufXeJIgqmDpKsFxa1YcE-icxlHw_fPzRxLDYxBSg" class="lazy" data-loaded="false" data-original-src="https://images.vocus.cc/3173f1a2-ddb8-49e2-8bed-15af702dcf17.png" data-lowquality="true" data-width="3554" data-height="1786" data-retry="0" onerror="Number(this.dataset.retry) > 4 ? this.src='/static/default-error-img.svg': (() => {this.src=this.dataset.originalSrc; this.dataset.retry = Number(this.dataset.retry)+1;})()" data-istopthreeimage="false" alt="raw-image"></div><div></div></div><p class="lexical__paragraph" dir="ltr"><br></p><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">當你不小心誤刪到東西，你可以回到上一個步驟 :)</span></p><p class="lexical__paragraph" dir="ltr"><br></p><div class="lexical__image center"><div class="lexical__imageWrapper"><img src="https://resize-image.vocus.cc/resize?compression=6&amp;norotation=true&amp;url=https%3A%2F%2Fimages.vocus.cc%2Febb4755f-1d7d-4de1-96ce-dfee569f8c27.png&amp;width=740&amp;sign=JokTBt5gRBsLyNktJ7kri11i9B7PnDD-GZcPyOS1bPI" data-src="https://resize-image.vocus.cc/resize?compression=6&amp;norotation=true&amp;url=https%3A%2F%2Fimages.vocus.cc%2Febb4755f-1d7d-4de1-96ce-dfee569f8c27.png&amp;width=740&amp;sign=JokTBt5gRBsLyNktJ7kri11i9B7PnDD-GZcPyOS1bPI" class="lazy" data-loaded="false" data-original-src="https://images.vocus.cc/ebb4755f-1d7d-4de1-96ce-dfee569f8c27.png" data-lowquality="true" data-width="2000" data-height="1639" data-retry="0" onerror="Number(this.dataset.retry) > 4 ? this.src='/static/default-error-img.svg': (() => {this.src=this.dataset.originalSrc; this.dataset.retry = Number(this.dataset.retry)+1;})()" data-istopthreeimage="false" alt="Google Driver"></div><div class="captionTheme__wrapper"><p class="captionTheme__paragraph">Google Driver</p></div></div><p class="lexical__paragraph" dir="ltr"><br></p><h2 class="lexical__h2" dir="ltr"><span style="white-space: pre-wrap;">4.一致性與正規</span></h2><p class="lexical__paragraph" dir="ltr"><br></p><blockquote class="lexical__quote" dir="ltr"><span style="white-space: pre-wrap;">The rule of consistency and standards means that a user’s interaction with your product never confuses him. “Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen.” — Jakob Nielsen.</span></blockquote><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">Jakob 定義一致性的重要性，當使用者使用你的產品時，他們不會覺得困惑．</span></p><p class="lexical__paragraph" dir="ltr"><br></p><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">以下是大家熟悉的產品，是不是感覺很類似相同呢? </span></p><div class="lexical__image center"><div class="lexical__imageWrapper"><img src="https://resize-image.vocus.cc/resize?compression=6&amp;norotation=true&amp;url=https%3A%2F%2Fimages.vocus.cc%2F370dea4c-4992-47f9-8cbe-bd8520e18a24.png&amp;width=740&amp;sign=QbQLpnhw_uJPc5xGrde0gS8wsyXC5IGhnUCUVZVvPKg" data-src="https://resize-image.vocus.cc/resize?compression=6&amp;norotation=true&amp;url=https%3A%2F%2Fimages.vocus.cc%2F370dea4c-4992-47f9-8cbe-bd8520e18a24.png&amp;width=740&amp;sign=QbQLpnhw_uJPc5xGrde0gS8wsyXC5IGhnUCUVZVvPKg" class="lazy" data-loaded="false" data-original-src="https://images.vocus.cc/370dea4c-4992-47f9-8cbe-bd8520e18a24.png" data-lowquality="true" data-width="2000" data-height="1085" data-retry="0" onerror="Number(this.dataset.retry) > 4 ? this.src='/static/default-error-img.svg': (() => {this.src=this.dataset.originalSrc; this.dataset.retry = Number(this.dataset.retry)+1;})()" data-istopthreeimage="false" alt="Microsoft 軟體"></div><div class="captionTheme__wrapper"><p class="captionTheme__paragraph">Microsoft 軟體</p></div></div><p class="lexical__paragraph" dir="ltr"><b><strong class="lexical__textBold" style="white-space: pre-wrap;">優點:</strong></b></p><ul class="lexical__ul"><li value="1" class="lexical__listItem"><span style="white-space: pre-wrap;">相似的顏色和icon 再一起</span></li></ul><ul class="lexical__ul"><li value="1" class="lexical__listItem"><b><strong class="lexical__textBold" style="white-space: pre-wrap;">減少使用者學習時間跟認識</strong></b></li></ul><p class="lexical__paragraph" dir="ltr"><br></p><h3 class="lexical__h3" dir="ltr"><span style="white-space: pre-wrap;">文章討論:</span></h3><ul class="lexical__ul"><li value="1" class="lexical__listItem"><span style="white-space: pre-wrap;">系統告知使用者進度和回饋 </span></li><li value="2" class="lexical__listItem"><span style="white-space: pre-wrap;">使用者想要回到之前步驟或跳過 </span></li><li value="3" class="lexical__listItem"><span style="white-space: pre-wrap;">產品和特徵保持一至性 </span></li><li value="4" class="lexical__listItem"><span style="white-space: pre-wrap;">加快使用者熟悉產品和特徵 </span></li></ul><p class="lexical__paragraph" dir="ltr"><br></p><h2 class="lexical__h2" dir="ltr"><span style="white-space: pre-wrap;">影片教學和講解</span></h2><p class="lexical__paragraph"><br></p><div class="lexical__youtube"><iframe data-lexical-youtube="an1qNTiXqoA" width="600" height="340" src="https://www.youtube-nocookie.com/embed/an1qNTiXqoA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="true" title="YouTube video"></iframe></div><p class="lexical__paragraph"><br></p><h3 class="lexical__h3" dir="ltr"><span style="white-space: pre-wrap;">額外資源教學</span></h3><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">如何用FIgma製作個人作品集教學 -&nbsp;</span><a href="https://vocus.cc/article/645c733dfd89780001ffe890" target="_blank"><span style="white-space: pre-wrap;">https://vocus.cc/article/645c733dfd89780001ffe890</span></a></p><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">學習如何設計好產品 - 使用者經驗設計 | 易用性 | 通用設計 -&nbsp;</span><a href="https://vocus.cc/article/645a3bd9fd897800012e4ec4" target="_blank"><span style="white-space: pre-wrap;">https://vocus.cc/article/64637f74fd8978000175c0f8</span></a></p><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">前端教學架設TodoApp</span></p><p class="lexical__paragraph"><span style="white-space: pre-wrap;">-&nbsp;</span><a href="https://vocus.cc/article/64637f74fd8978000175c0f8" target="_blank"><span style="white-space: pre-wrap;">https://vocus.cc/article/64637f74fd8978000175c0f8</span></a></p><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">學習如何用HMTL5和CSS3，跟JayLin一起做一個NFT卡片完整課程 -&nbsp;</span><a href="https://vocus.cc/article/6461df9dfd89780001e266f5" target="_blank"><span style="white-space: pre-wrap;">https://vocus.cc/article/64637f74fd8978000175c0f8</span></a></p><p class="lexical__paragraph" dir="ltr"><br></p><h3 class="lexical__h3" dir="ltr"><span style="white-space: pre-wrap;">更多相關教學文章</span></h3><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">JayLinXR YT:&nbsp;</span><a href="https://www.youtube.com/@jaylinxr" target="_blank"><span style="white-space: pre-wrap;">https://www.youtube.com/@jaylinxr</span></a></p><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">JayLinXR IG:&nbsp;</span><a href="https://www.instagram.com/jaylin_xr/" target="_blank"><span style="white-space: pre-wrap;">https://www.instagram.com/jaylin_xr/</span></a></p><p class="lexical__paragraph" dir="ltr"><span style="white-space: pre-wrap;">JayLinXR FB:&nbsp;</span><a href="https://www.facebook.com/JayLinXR" target="_blank"><span style="white-space: pre-wrap;">https://www.facebook.com/JayLinXR</span></a></p><p class="lexical__paragraph" dir="ltr"><br></p><h3 class="lexical__h3" dir="ltr"><span style="white-space: pre-wrap;">資料來源</span></h3><p class="lexical__paragraph" dir="ltr"><br></p><ul class="lexical__ul"><li value="1" class="lexical__listItem"><span style="white-space: pre-wrap;">Heuristics #2: Match Between the System and the Real World-Simplified by the examples: </span><a href="https://" rel="noreferrer"><span style="white-space: pre-wrap;">https://uxplanet.org/heuristics-2-match-between-the-system-and-the-real-world-simplified-by-the-examples-754b62bdd552</span></a></li><li value="2" class="lexical__listItem"><span style="white-space: pre-wrap;">Visibility of system status:</span></li></ul><p class="lexical__paragraph" dir="ltr"><a href="https://" rel="noreferrer"><span style="white-space: pre-wrap;">https://bootcamp.uxdesign.cc/visibility-of-system-status-common-examples-7aab5e18b291</span></a></p><p class="lexical__paragraph" dir="ltr"><br></p>