0-1-100
Edge case matters
在設計 UX 或前端畫面時，我們常常會遇到不同的使用者行為，這就讓我們必須去思考如何應對各種情境。針對這樣的問題，我設定了一種心法叫做 「0-1-100」。它的核心概念是，在設計每一個功能或畫面時，至少要考慮到三種狀態：「無」、「預期」和「超出預期」。這樣的思維方式幫助我們設計出更有彈性、能應對各種情況的介面。
接下來，我們以商品敘述為例，來看「0-1-100」理論如何幫助我們做出更好的設計。
什麼是 0-1-100？
0：沒有資料時該怎麼辦？
「0」代表沒有資料的狀況，也就是空值。對於商品敘述來說，這指的是使用者沒有提供任何描述。這是一種常見的情況，特別是當商品敘述是選填欄位時。我們不能讓畫面因此留白或變得不協調，所以我們需要設計一個替代方案來處理空敘述，這可以是預設的敘述、簡短的提示文字，或是用一些有趣的方式告知使用者「這個商品暫時沒有敘述」。
1：正常的情況應該是什麼樣？
「1」是指預期中的情況。在大多數情境下，商品敘述會是合理的內容，比如幾句簡單的介紹。這種情況是我們最熟悉的，我們可以為這段敘述設計適當的顯示空間，選用合適的字體和大小，讓它自然地融入商品卡片中。
100：當內容超出預期時該怎麼辦？
「100」代表超出預期的情況。假設使用者填入了過多的商品敘述，如果不加以限制，這麼長的敘述可能會破壞畫面布局，甚至影響使用者的閱讀體驗。這時我們需要設計一個解決方案，比如限制顯示的行數，並用「...」來截斷過長的內容，或是提供「顯示更多」的按鈕，讓使用者自行展開閱讀。以前端的角度來說，更要考慮到 RWD 的狀況，同樣的內容長度在不同裝置的寬度下就有可能會是「100」的存在。
案例模擬
以下是如何應用「0-1-100」來處理商品敘述的不同狀態：
- 0 狀態：
’’假設商品敘述是選填的，當使用者沒有提供任何描述時，我們不能讓卡片上的敘述區域留白，這樣會讓介面看起來不完整。此時，我們可以設計一個預設的文案來補位，比如「此商品目前沒有描述」，或者更有創意一些，寫上「這個商品的故事還沒開始呢！」這樣的處理能夠避免空白造成的視覺不平衡，並且給使用者一個明確的提示。 - 1 狀態：
'採用工作褲的細節設計'在大多數情況下，使用者會提供一個合理長度的商品敘述，這通常是幾句話的介紹，內容簡潔明了。我們可以針對這些正常長度的敘述，設計一個美觀的顯示方式，例如限制兩到三行的展示，並確保文字不會超出邊界。同時，我們還可以依據不同裝置的螢幕尺寸，調整文字大小和間距，讓內容保持清晰可讀。 - 100 狀態：
'棉質100%但觸感柔軟的牛仔布。縱向紗線使用低捻紗線，更加柔軟，橫向紗線則使用雙股線，保證強度，既舒適且不易在膝蓋部位變形。’如果使用者在描述欄位中輸入了大量文字，這時候我們就需要做一些額外的處理。過長的敘述可能會讓卡片變得不整潔，甚至讓其他內容無法正常顯示。因此，我們可以設計一個「限制字數」的機制，將敘述控制在幾行內，並且在內容超過時加上「...」，提供「閱讀更多」的按鈕供使用者選擇展開全部文字。這樣既能保證介面的整潔性，又能提供彈性，滿足使用者的需求。
為什麼 0-1-100 很重要？
在實際的產品開發中，使用者的行為往往不可預測。我們無法只針對「正常」的情況來設計，因為這樣的設計會在「非預期」的狀況下出現問題，無法提供完整的使用體驗。0-1-100 能夠幫助我們提前考慮各種情境，讓產品在面對資料缺失、資料正常或是資料過量時，都能保持一致且良好的表現。
這種思維方式還能避免一些潛在的設計錯誤。例如，當使用者輸入的商品敘述過長時，如果沒有加以控制，頁面可能變得混亂，使用者體驗也會因此變差。通過 0-1-100 的設計，我們可以確保無論情況如何，畫面都能保持整潔、易用。
結語
我常常在一個新功能開發初期，就要不斷地挑戰介面不同的可能性，但內心想的卻是為什麼在設計時沒有辦法預先有這些情境模擬？
其實不管是在設計 UX 或前端畫面，或是決策上的任何狀況，都應該考慮到除了「1」以外的極端狀態。這不僅能幫助我們創造出更穩定的產品，還能提升使用者的整體體驗。下次在設計商品敘述或其他可變資料時，除了理想中的完美情境之外，試著問自己：如果沒有資料該怎麼辦？如果資料過多，我們如何應對？
「0-1-100」說白了就是要時時考慮「極端狀況 (Edge case)」，幫助我們在不同狀況下做出正確的設計決策，讓介面更加靈活、全面，當然這只是一個基礎概念，甚至可以延伸出「在資料載入前，我該怎麼呈現畫面？」「如果卡片上可以加入購物車或加入最愛等 AJAX 操作，該怎麼設計 loading 狀態？」等，這些場景我認為前端都應該要比 UX 更能掌握，不管這個操作的響應時間有多快，他就是必須要控制一個加載狀態，因為你無法知道你的使用者在什麼樣的網路狀態下使用你的產品。
無論你是在設計什麼樣的產品介面，都可以運用這個方法來保持畫面的平衡與美觀，用可控的設計掌握不可控的使用行為。