幫助設計能力快速進階的思維框架

嗨,

最近這段時間好嗎？

一年多前剛開始做 YT 的時候，老實說我有一點痛苦 痛苦的主要原因有兩個

1. 不知道大家想要看什麼，因為我沒有足夠的數據支持

2. 如何把我的經驗轉換成可以被理解和運用的知識

第一點要解決並不難，慢慢觀眾多了，就會有回饋數據
加上我也一直在接設計師的諮詢（互相瞭解的過程）

第二點有點棘手，從我的瞭解也是知識型創作者都可能遇到的難題

就拿設計來說好了
自己會做其實並不代表會教，很多時候都是潛意識在工作
靠的是過去的經驗長出來的肌肉

我一開始並不擅長輸出內容，和團隊培訓還是有很大差別
（團隊內部聚焦在特定產品和流程）

透過做自媒體這段時間，慢慢學會了如何提煉過去的經驗
幫助不同經驗和背景的人理解吸收

和你分享這些是因為今天的私房菜內容
是一套非常重要的思維框架

說重塑你對 UIUX 設計的理解可能都不誇張

我過去一直在思考，最直接影響介面設計好壞的因素是什麼？
這裡指所有類型的產品，包括企業內部工具

看了那麼多好的壞的設計，他們之間的差異是什麼？
一定不是簡單的因為顏色、字體、佈局

我開始回想自己從零到一設計介面時，會如何決定每一步
一定是有某種流程框架的，並不是隨性發揮

最後誕生了這套 B.B.R 系統框架
可惜從來沒有人整理出這個框架，不然我可以少走 10 年彎路

很多人學 UIUX 設計都會從「Figma 使用、顏色、字體、元件」開始
花了很多時間結果還是感覺和高手有距離
覺得是因為自己年資不夠

真正原因是，那些東西只能觸及到表層
永遠無法解決真正的問題，我經常說 “不要成為 Figma 操作員”

你可能也常會在網路上看到分享說
“介面設計好看不代表好用”
“設計需要理由，要能解釋為什麼”

道理都懂，但是 why?
其實設計思考都是在圍繞三個層面

資訊層級 Block

空間秩序 Box

視覺節奏 Rhythm

也就是我的 B.B.R 框架
順序不可以改變，一定是 B → B → R

為了方便大家理解（每個人經驗不同）
我會用蓋房子來做比喻，貫穿整個架構

什麼是 Block

你現在要準備蓋一個大房子，面前只有空地
第一步你會怎麼做？

是不是先規劃要多少房間，每個房間的功能
有客廳、餐廳、影音室、遊戲室、辦公區…

這就是 Block 建立資訊層級
產品介面中所有的資訊都需要一個層級結構

想像一個 App 首頁：

• Hero section 像是客廳，要開闊、醒目

• 導覽列像玄關，引導進來的方向

• CTA 像房間的門，要容易找到

每一個區塊內的資訊都有不同的作用
有重要的、次要的

如果這些區域沒有明確規劃出來，
整個介面就像一間沒有隔間的房子

亂！

所以這是 BBR 框架的最底層，決定了介面的穩定性
這也解釋了 UX 階段為什麼要做User flow、 IA…

都是為了釐清
房子的使用者需要多少房間？ 每間房間的功能？重要性？

什麼是 Box

現在你有了房子的主體規劃圖，接下來要做什麼？

開始細化內部空間的佈局
每個房間要佔用多少面積？ 牆體結構是什麼，房間形狀是什麼？

這就是 Box 建立空間秩序
它決定了不同的資訊模組，如何合理的進行組合

這解釋了 UX 階段為什麼要做 Wireframes、Prototype…

你可以理解為：

• Box 是每一個不同功能的房間

• Padding 是傢俱到牆的距離

• Margin 是房與房之間的距離

• Grid 是整棟建築的骨架，讓施工方便

如果房間佈局不合理，你上洗手間要跑很遠
如果臥室做太小了，結果床放不進去
如果房間之間的牆太薄，隔音就會變很差

這些對應到介面中也是一樣的
使用者會感覺很不舒服

這時候再漂亮的裝修都沒有意義
研究再多裝修方法都是浪費時間

如果說 Block 決定要蓋幾間房，那 Box 決定了房子能不能用

什麼是 Rhythm

現在你的房子整體結構、房間佈局已經規劃好了
接下來要做什麼？

是不是要想細節了
想想如何讓自己住起來舒服？

回家或者出門時，外套是不是很容易收納？
在客廳的沙發上看電視，是不是距離剛剛好？
餐桌放在哪裡才不會擋到去廚房的路？
浴室和衣帽間的距離方便嗎？洗完澡就可以換衣服

這些細節都會決定住起來的感受
房間雖然是固定的，但人會在裡面走動

好的細節佈置可以讓這個空間「住起來方便、舒適」
如果追求更高，還要「有品質、有檔次」

這一切都需要控制好流動性
也就是 Rhythm 節奏

在介面設計中，你可以理解為

• 視覺起點：使用者的眼睛該從哪裡開始？

• 視覺動線：使用者視線接下來會往哪走？

• 視覺節奏：哪裡的資訊展示該強、哪裡該弱？

• 視覺終點：使用者最後應該要去哪？

一個節奏設計得好的介面

使用者一眼就看到主標題（起點）
自然往下滑到關鍵資訊（動線）
在留白區稍作停頓（休息）
最後被 CTA 吸引去轉換成行動（終點）

B.B.R 系統框架的本質

Block / Box / Rhythm 的共同協作讓一個介面具備了

• 正確的資訊呈現，幫助使用者理解

• 正確的內容佈局，幫助穩定介面的結構

• 正確的視線引導，幫助使用者輕鬆完成目標

你可能會想，遵循固定結構是不是會缺乏創意？

其實 BBR 的作用並不是要你畫出千篇一律的介面
而是在做設計決策時，思考的脈絡

先從總體規劃開始，慢慢推進到細節
有了正確的結構，你想怎麼玩配色、字體、排版都可以

因為再怎麼變，你的「地基不會崩」

當你沒有耐心先搭好結構，就會陷入「亂改」的無限循環

到這裡你有沒有發現，UI 設計都是基於 UX 的基礎之上
UX 要做的事情，就是去瞭解「要住進這個房子的人」

他們有什麼需求？ 他們最在乎什麼？

在最終交付之前，不斷透過測試來驗證是否有達到預期
並作出調整

避免直接交房，結果客戶氣到不想住
浪費了所有人的時間、成本

有了 B.B.R 系統框架，就再也不用擔心自己是
「只想著裝修漂亮」的設計師啦

希望這套框架可以幫助你更好的理解 UIUX 設計
在資訊爆炸的時代，降低學習的成本

我也堅信掌握好這套框架可以快速提升設計能力
因為我自己就是這樣突破瓶頸的（只是那時候並沒有提煉出系統方法）

謝謝你願意花時間聽我聊了這麼多
如果覺得有幫助，也可以分享給更多人喔 ☺️

期待下次和你見面～

Have a good week!

Taony