麵包屑、餅乾，關於那些有趣的網頁與設計用詞｜便當盒設計｜Bento Design
前言
在上次寫到漢堡選單時，就覺得有些用詞還挺有趣的，想記錄下來。
這些用詞的命名原因對一般人來說，可能不是很重要的知識，但能夠讓討論的對話有更具像的描述方式，為某些東西、概念有個共同的名詞認知。
一、麵包屑 (Breadcrumb Navigation)
麵包屑是網站的路徑導航(頁面層級)，通常顯示在頁面頂部。
能幫助使用者了解自己在網站中的位置，因為這個功能主要是指引使用者「一步步回到上一層級或首頁」，就像糖果屋童話中，指引兄妹倆回家的麵包屑，因此得名。
MOMO購物網的麵包屑位置如紅框標示
麵包屑對SEO有正面影響，所以在設計時不管如何，都必須考量把它加進去後的畫面，有些設計師會將它當作網站的裝飾，點綴在某個不起眼的位置，也有人會把它設計得像是一個明顯的書籤，讓它發揮該有的引導效果。
◆ 延伸閱讀
二、餅乾 (Cookie)
「我們將使用Cookie等資訊來優化您的體驗，繼續瀏覽即表示您同意我們的使用。欲瞭解詳細內容，請詳閱隱私權保護政策......」
這樣的小提醒視窗，你可能在第一次打開某個網站時會見過。
Cookie到底是什麼？當我們瀏覽網站時，這些小型的資訊檔案會自動生成，記錄使用者與網站之間的互動資訊，例如使用者偏好、登錄資訊或其他狀態，以便網站之後能提供更好的使用者體驗。比如你搜尋了保溫瓶，接下來可能會看到與保溫瓶相關的推薦廣告。
若不想在瀏覽網站時「掉落這些餅乾屑」，可以使用無痕模式來瀏覽網頁。
無痕模式會避免瀏覽器保存Cookie和瀏覽紀錄，就無法在之後的瀏覽行為中追蹤到這些餅乾屑屑般的資訊。
三、甜甜圈圖表 (Donut Chart)
在Canva搜尋圖表的截圖
甜甜圈圖應該是最常見的圓形圖表設計了，它和圓餅圖經常被應用於簡報當中。
這種處理數據的方式，在網站應用時會比圓餅圖更好用，可以加上數字後在列表做出類似下圖的呈現，若再加上稍微轉圈的動態效果，看起來會更有設計感。
在Canva搜尋圖表的截圖
四、便當盒設計(Bento Design)
這個設計方式的命名靈感，來自日本便當盒的設計。
將介面中要展現的內容，用不同大小的矩形區塊做展示，讓不同類型的主題能依照內容多寡得到良好的呈現，這樣的設計方式讓區塊調整時很靈活，且能夠用有一致性的外觀展示多樣的訊息，會有種將四面八方的資訊整理清楚的感覺。
◆ 更多Bento Design應用和專業的設計知識，推薦Kyle Lei的這篇文章
◆ 查看更多的便當盒設計案例—— Bento grids
這個網站整理了很多設計師的便當盒設計作品，會是一個很好的靈感資源。
在欣賞的時候，可以多看看別人區塊的運用方式、使用圖片時怎麼取景，深色和淺色的設計細節差別。
五、卡片式設計(Cards Layout)
這是在模組網站裡很常見的表現方式。
將列表分割成像一張張「卡片」的形式呈現，每張卡片通常包含圖片、標題、簡述文本和按鈕，這些「卡片」可以獨立存在，也能成為一個列表，方便整個區塊的移動、排序。
在處理這種設計時，會要留意卡片與卡片之間的間距，列表中的卡片樣式要保持一致，讓整個介面具有整體性。
在這樣的列表設計當中，若能將照片的條件整理好，看起來就會很舒適且具有整體性。
可以整理哪些條件呢？
- 圖片的尺寸 - 將每張圖片都用相同尺寸，才不會出現缺角。
- 圖片的角度 - 盡量擺放同一角度或構圖的圖片，會因為整齊帶來完整感。
- 圖片的色調 - 盡量將每張圖片色調整理過，才不會因雜亂感影響網站停留時間。
結尾
以上，是一些常見的用詞，每個命名背後都有著意象或者功能性質的原因。
希望這些能在設計工作中帶來靈感與良好的對話溝通，讓過程變得更有樂趣 : )
你可能也想看
