avatarJhane Chou (⁎⁍̴̛ᴗ⁍̴̛⁎)

Free AI web copilot to create summaries, insights and extended knowledge, download it at here

2504

Abstract

e><h1 id="198b">物理約束(Physical Constraint)</h1><blockquote id="d739"><p>Limit the range of possible actions by redirecting physical motion in specific ways. <i>通過特定的方式,訂定物理運動方向,來限制可能行動的範圍。</i></p></blockquote><h2 id="3c2d">路徑(Path)</h2><p id="48af">如果控制的變數範圍較小且受限,很適合運用路徑來限制,以線性或曲線運動(A點至B點)</p><p id="8ce1">例如只能向左右移動,當超出了範圍後就無法繼續移動。</p><figure id="94d1"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*xsE0thZvaJ3W2B5ext_QIg.jpeg"><figcaption>橫向的拖曳控制</figcaption></figure><h2 id="8635">軸線(Axes)</h2><p id="0b51">如果控制的表面範圍有限,或者變數極大甚至是沒有限制時,可運用軸線(以旋轉為運動方向,甚至可無限旋轉)</p><p id="5fc4">例如以旋轉的方式使用,可以有限制,也可以無限制旋轉。</p><figure id="61cb"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*oVi1ql99xN-mTCc5lD3hgw.jpeg"><figcaption>常見於產品例如單眼相機、均衡器、音響等等</figcaption></figure><h2 id="80ff">障礙(Barrier)</h2><p id="9159">直接限制,或藉由其他方式來阻礙使用者。</p><p id="0a9d">例如生活中可見的減速丘,目的就是要<b>強制使行過的車輛減速</b>,除了在道路上之外,賣場內的停車場也很常見。</p><p id="d311">以及基於<b>用電安全性與穩定性</b>,將插頭與插座區別為不同型式(例如兩孔式、三孔式和T型)</p><figure id="c3fc"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*NIZorN3fp92r8UCRgOeJzw.jpeg"><figcaption>除了日常生活之外,介面上也有彈出的確認或警告視窗,阻斷使用者動作</figcaption></figure><figure id="32f9"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*k04_kkl21wSQ7IM3llU6-g.png"><figcaption></figcaption></figure><h1 id="93e1">心理約束(Psychological Constraint)</h1><blockquote id="3c42"><p>Limit the range of possible actions by leveraging the way people perceive and think about the world.<i> 通過人們對世界認知的想法,來限制可能的用戶行為。</i></p></blockquote><h2 id="e602">象徵(Symbol)</h2><p id="70f7">運用文字、圖標和聲音進行,例如:看到骷髏頭的圖案,就感受到危險。</p><figure id="1f09"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*YoGplboh7DwhUp18MpcXEw.jpeg"><figcaption>骷髏、黃、黑,讓人聯想危險、毒|Photo Credit : <a href="https://unsplash.com/@mikael_seegen">Mikael Seegen</a> on Unsplash</figcaption></figure><h2 id="0dfa">慣例(Convention)</h2><p id="ea2a">依據傳統或習慣,漸漸成為約定俗成的意象。使用大眾認知明確的圖案來發揮,依據受眾來確保他們能夠識別並理解。</p><div id="b851"><pre>反之也要小心使用已有既定印象的圖案,避免產生錯誤的聯想。尤其是面對不同的世界文化,要避免令人反感的設計,某些圖案在不同的地區可能會有負面含義的聯想。</pre></div><figure id="381f"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*lSNk_vF6ivvaf7NGEahi4w.jpeg"><figcaption>紅綠燈|Photo Credit : Zamirul Roslan on Unsplash</figcaption></figure><h2 id="e47e">映射(Mapping)</h2><p id="04b8">映射通常都是一組的,上下、增減,讓使用者易理解兩個元素之間的關係。</p><figure id="0aaa"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*_ZKsX_oM8nDAVF_l4HowhA.png"><figcaption>近期的介面專案,控制介面使用+、-按鈕讓使用者快

Options

速理解</figcaption></figure><figure id="591a"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*k04_kkl21wSQ7IM3llU6-g.png"><figcaption></figcaption></figure><h1 id="9fd1">最後的碎碎唸</h1><p id="49b0">物理約束雖然限制了使用者的行為,卻提供使用者「選擇與指引」,設計師也能專注完善這些有限的選項。</p><p id="30a1">心理約束能降低使用者犯錯的機率,讓使用者能更直覺地操作,減少學習的成本,有效提升使用的體驗。</p><figure id="ec85"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*Jv0Z9gktwDCeR8NDSHww_g.jpeg"><figcaption></figcaption></figure><p id="712a">回歸到一開始的漱口水瓶蓋,希望以後改包裝或增加新的設計時,可以明確點讓我們知道,不然有些可惜啦…(自己也要更細心點)</p><div id="2015"><pre>訂閱作者 ✶ 𝘚𝘜𝘉𝘚𝘊𝘙𝘐𝘗𝘛𝘐𝘖𝘕 透過連結訂閱我,新文章將同步發送通知至你的信箱,邀請你參與我的每一刻。 — — — — — — — — — — — — — — ➟ 推薦連結 ✶ 𝘙𝘌𝘍𝘌𝘙𝘙𝘈𝘓 讀者以我的推薦連結加入 𝘔𝘦𝘥𝘪𝘶𝘮 付費會員,我就能在每月收到分潤(讀者只需支付官方的會員方案,不須額外花費)如果你已是付費會員,想以行動支持我,需重新加入。 — — — — — — — — — — — — — — ➟ 支持鼓勵 ✶ 𝘌𝘕𝘊𝘖𝘜𝘙𝘈𝘎𝘌 如果你喜歡我的個人文章,可以多拍幾下 :) — — — — — — — — — — — — — — ➟ 𝘔𝘢𝘵𝘵𝘦𝘳𝘴|𝘋𝘦𝘦𝘳𝘭𝘪𝘨𝘩𝘵|𝘐𝘯𝘴𝘵𝘢𝘨𝘳𝘢𝘮|𝘍𝘢𝘤𝘦𝘣𝘰𝘰𝘬|𝘎𝘶𝘮𝘳𝘰𝘢𝘥</pre></div><p id="3ae1">感謝你的閱讀及支持,任何問題都歡迎來信交流|<a href="mailto:[email protected]">[email protected]</a></p><div id="d447"><pre>相關文章:#美感養成#設計指南</pre></div><p id="8abe">透過下方的 Like 拍手(<a href="https://liker.land/civic?from=jhane_chou"><b>註冊 Liker 完全免費</b></a>)讓創作者獲得額外收入 :)</p> <figure id="b6bf"> <div> <div> <img class="ratio" src="http://placehold.it/16x9"> <iframe class="" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fbutton.like.co%2Fin%2Fembed%2Fjhane_chou%2Fbutton&amp;display_name=LikeCoin&amp;url=https%3A%2F%2Fbutton.like.co%2Fjhane_chou&amp;image=https%3A%2F%2Fstorage.googleapis.com%2Flikecoin-foundation.appspot.com%2Flikecoin_store_user_jhane_chou_main%3FGoogleAccessId%3Dfirebase-adminsdk-eyzut%2540likecoin-foundation.iam.gserviceaccount.com%26Expires%3D2430432000%26Signature%3DBJgEhGMTqQRCn2Wbz20NrlI%252BI6zlPSm6ywhOUXor6hCHIfQ16VUfEDunUjbOW8TBmNOJqqhtqnNQL7Be27VbnfL1%252BS6Z9xDT1vUpKzFATieASBx3C5fW%252FggCss1XX1gS6S%252FJeuHc479nw7WzqN%252BZo4%252F%252BchiTfz3F0vYyLtgF27Ykcw%252BjMYHSFAoJM8D%252Bg8S%252BS3mAXBsAJePqRzmM83hL4P2Q14cSN6%252BGGf9sEL1lHZre5p6DLkzxQKZg34QchM6mpw%252BvTp3jTLxCvz8cJH6RDlGd4K1PbpgJNHMPXaslB9HxbjTzWXC%252BqKnuM%252FEuaUbHGNRSjr3iNAWRt5YMXCCHFg%253D%253D&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=like" allowfullscreen="" frameborder="0" height="212" width="485"> </div> </div> </figure></iframe></div></div></figure></article></body>

Design by Jhane Chou

#美感養成#設計指南

設計法則:約束 Constraint

約束使設計更易於使用,並降低出錯的可能性

非付費會員點我 👉 免費閱讀此文章

日常中有不少約束設計的例子,它在生活中佔有一席之地,舉凡紅綠燈、電梯上下行的限制等等。

大綱
1. 前言
2. 設計法則:約束 Constraint
3. 物理約束(Physical Constraint)
4. 心理約束(Psychological Constraint)
5. 最後的碎碎唸

前言

平常睡前刷牙有搭配漱口水的習慣,幾個月前,發現漱口水牌子換新包裝,蓋子上多了卡榫設計,我沒仔細閱讀說明,每一次轉開都很費力,還把蓋子的卡榫弄斷(是個不好好看說明的人)

使用完一瓶之後,第二瓶開始前,認真看了瓶子的說明,才恍然大悟…同時發現瓶蓋上有示意圖…

瓶身說明:
特有【兒童安全瓶蓋】設計,保障兒童安全
1. 按壓瓶蓋兩側同時扭轉
2. 扭轉至瓶蓋開啟
卡榫(紅圈處)、瓶蓋上的示意圖

上網搜尋找到了一位設計師也發現這問題,他跟我的情形很類似,一開始也不知道該如何轉開,也是弄壞之後才知道(到底要弄壞多少個😂😂😂

過往的使用經驗就是直接轉開,所以當它的標示不夠明顯時,完全被舊有的使用者忽略。

為何設計這個限制呢? 通常會在清潔劑或家中常見的化學物採用,加上漱口水的味道甜,且顏色鮮艷,為了避免兒童誤食,故採用這樣的設計。

設計法則:約束 Constraint

有人稱它為障礙設計(我覺得這稱呼不夠精確),找到的原文是約束Constraint。

不論在生活日常可接觸,或者介面上的使用等,都可見約束的蹤影。約束使設計更易於使用,並降低出錯的可能性。

設計的法則》這本書將約束分為兩種:

物理約束(Physical Constraint)

心理約束(Psychological Constraint)

物理約束(Physical Constraint)

Limit the range of possible actions by redirecting physical motion in specific ways. 通過特定的方式,訂定物理運動方向,來限制可能行動的範圍。

路徑(Path)

如果控制的變數範圍較小且受限,很適合運用路徑來限制,以線性或曲線運動(A點至B點)

例如只能向左右移動,當超出了範圍後就無法繼續移動。

橫向的拖曳控制

軸線(Axes)

如果控制的表面範圍有限,或者變數極大甚至是沒有限制時,可運用軸線(以旋轉為運動方向,甚至可無限旋轉)

例如以旋轉的方式使用,可以有限制,也可以無限制旋轉。

常見於產品例如單眼相機、均衡器、音響等等

障礙(Barrier)

直接限制,或藉由其他方式來阻礙使用者。

例如生活中可見的減速丘,目的就是要強制使行過的車輛減速,除了在道路上之外,賣場內的停車場也很常見。

以及基於用電安全性與穩定性,將插頭與插座區別為不同型式(例如兩孔式、三孔式和T型)

除了日常生活之外,介面上也有彈出的確認或警告視窗,阻斷使用者動作

心理約束(Psychological Constraint)

Limit the range of possible actions by leveraging the way people perceive and think about the world. 通過人們對世界認知的想法,來限制可能的用戶行為。

象徵(Symbol)

運用文字、圖標和聲音進行,例如:看到骷髏頭的圖案,就感受到危險。

骷髏、黃、黑,讓人聯想危險、毒|Photo Credit : Mikael Seegen on Unsplash

慣例(Convention)

依據傳統或習慣,漸漸成為約定俗成的意象。使用大眾認知明確的圖案來發揮,依據受眾來確保他們能夠識別並理解。

反之也要小心使用已有既定印象的圖案,避免產生錯誤的聯想。尤其是面對不同的世界文化,要避免令人反感的設計,某些圖案在不同的地區可能會有負面含義的聯想。
紅綠燈|Photo Credit : Zamirul Roslan on Unsplash

映射(Mapping)

映射通常都是一組的,上下、增減,讓使用者易理解兩個元素之間的關係。

近期的介面專案,控制介面使用+、-按鈕讓使用者快速理解

最後的碎碎唸

物理約束雖然限制了使用者的行為,卻提供使用者「選擇與指引」,設計師也能專注完善這些有限的選項。

心理約束能降低使用者犯錯的機率,讓使用者能更直覺地操作,減少學習的成本,有效提升使用的體驗。

回歸到一開始的漱口水瓶蓋,希望以後改包裝或增加新的設計時,可以明確點讓我們知道,不然有些可惜啦…(自己也要更細心點)

訂閱作者 ✶ 𝘚𝘜𝘉𝘚𝘊𝘙𝘐𝘗𝘛𝘐𝘖𝘕
透過連結訂閱我,新文章將同步發送通知至你的信箱,邀請你參與我的每一刻。
 — — — — — — — — — — — — — — ➟
推薦連結 ✶ 𝘙𝘌𝘍𝘌𝘙𝘙𝘈𝘓
讀者以我的推薦連結加入 𝘔𝘦𝘥𝘪𝘶𝘮 付費會員,我就能在每月收到分潤(讀者只需支付官方的會員方案,不須額外花費)如果你已是付費會員,想以行動支持我,需重新加入。
 — — — — — — — — — — — — — — ➟
支持鼓勵 ✶ 𝘌𝘕𝘊𝘖𝘜𝘙𝘈𝘎𝘌
如果你喜歡我的個人文章,可以多拍幾下 :)
 — — — — — — — — — — — — — — ➟
𝘔𝘢𝘵𝘵𝘦𝘳𝘴|𝘋𝘦𝘦𝘳𝘭𝘪𝘨𝘩𝘵|𝘐𝘯𝘴𝘵𝘢𝘨𝘳𝘢𝘮|𝘍𝘢𝘤𝘦𝘣𝘰𝘰𝘬|𝘎𝘶𝘮𝘳𝘰𝘢𝘥

感謝你的閱讀及支持,任何問題都歡迎來信交流|[email protected]

相關文章:#美感養成#設計指南

透過下方的 Like 拍手(註冊 Liker 完全免費)讓創作者獲得額外收入 :)

Design
設計
Art
中文
Creativity
Recommended from ReadMedium