常常聽到一句話，UI 設計師要有產品思維。但真的問下去，很多人說不清楚那是什麼，甚至以為那只是產品經理寫需求的能力。
這篇整理自優設網作者酸梅乾超人的一篇改版拆解。他拿街貓 App 的首頁，加上一位學員交的改版初稿，一步一步示範產品思維怎麼用在畫面上。
我覺得最有用的，是他做決定的順序。
改版第一步：先看業務，不是先看畫面
原文的主張很直接。不管是工作上的改版、作品集，還是自己練習，第一步都是從業務和產品端分析，接著才是使用者與體驗，最後才輪到互動與視覺。
業務和產品端要看什麼？他用一句話收掉：這個產品的業務目標是什麼，它用了什麼樣的產品形式去達成。
街貓的業務，是在戶外投放智慧貓箱餵流浪貓。使用者可以遠端看貓咪吃飯的直播，也可以儲值之後，自己操作貓箱投餵。
App 裡還有社群、領養、商城等次要服務。核心看起來很有公益味道，但它終究是商業產品，不可能只靠愛心撐下去，一定要有一套賺錢的方式。
作者拆出來的模式是這樣的：用貓箱和直播吸引關注，靠使用者的愛心付費投餵，等使用者變多，再加上其他加值服務，把營收做大。
街貓首頁為什麼長得不像首頁
這套模式裡，最關鍵的一環是吸引使用者。因為只有被內容打動，才會有後面的儲值和付費。
難的地方在於，這件事對大部分人不是必需。除了少數非常愛貓的人，一般養貓的人不會特地準備食物去餵流浪貓。
所以打開街貓，第一個看到的不是首頁，而是直播頁，而且會自動配對到正好有貓在吃飯的頻道。想進首頁，還得自己點過去。
首頁本身也很特別。上面是個人累積資料，接著是一排貓屋直播間、五個快速入口，最後是申請貓屋、協助結紮、鼓勵領養的宣傳區塊。
作者形容它是一個很不像首頁的首頁，比較像一頁資訊型的活動頁，大部分是預先寫好的說明內容。
他從這裡推回去，產品端應該是刻意不在首頁塞太多商業元素，避免使用者反感，把首頁當成引導大家關心流浪貓各種公益事務的入口。
先理解業務形式，再從產品形態找出兩者之間的關係，這個關係就是產品原本的設計意圖。作者覺得，改版時這個意圖要被正視、也要被遵守，後面所有體驗、互動、視覺的調整，都要繞著它走。
學員的改版初稿卡在哪裡
頂部放了個人累積資料和簽到，雖然能增加黏著度，但佔掉不少版面。剛註冊的人根本沒有資料可看，而他們恰好是最需要爭取轉換的對象。
下方新增的貓箱地圖，拉近了和使用者所在位置的關係。但如果只是地標圖釘，要使用者自己點進去才看得到東西，吸引力就很弱，點擊和轉換的效率一定不高。
再往下是強化過的快速入口，這本身沒問題。但如果首頁到這裡就結束，等於沒把首頁用好，因為那些次要服務只靠一個小圖示，使用者不太會去點。
把這幾點整理起來，作者的結論是：不管後面視覺做得多漂亮，這次改版都已經離開原本的目標了。除非產品在策略上有調整，否則這樣改沒有太大意義。
他也提到，分析業務和產品，等於先替設計訂好目標，也是一種思考上的約束，避免後面越做越發散，最後連自己都解釋不了。真實專案裡過不了評審，面試時也說服不了面試官。
用產品思維重排首頁的四個步驟
根據前面的分析，作者把首頁的任務定成三件事：打通用直播吸引人的路徑、讓大家注意到其他服務、商業入口要有但不能太搶眼。他也決定保留學員加上的地圖模組，再往下調整。
步驟一：一打開先看到什麼
原本直接進直播間，要剛好配到使用者想看的畫面，機率其實不高，有時候畫面是空的。首頁的造訪次數也被壓低，發揮不了作用。
所以他讓使用者打開 App 還是進首頁，但首頁一開就跳出直播小視窗，讓人看內容決定要進直播間，還是關掉繼續逛。之後還能用下拉「二樓」的方式換直播間，增加趣味。
步驟二：讓地圖真的有吸引力
地圖要留，就要把貓箱和使用者綁得更緊。對愛貓的人來說，看看、餵餵自己家附近的流浪貓，比看陌生地方的貓更有動力。
做法是讓使用者自己定位、加上人物形象，周圍的圖釘放上記錄過的流浪貓頭像，標出現在有沒有貓在鏡頭前。作者覺得看直播和投餵本來就帶著「雲端擼貓」的味道，這幾個環節都還有很多有趣的設計空間。
步驟三：宣傳區塊不必長得像公益廣告
快速入口用常見的做法就好。申請貓屋、結紮、領養這三塊，可以換成簡單的磁貼區組合起來，或拆成三個獨立的元件，更直覺地呈現，不用硬做成公益廣告的樣子。
步驟四：在最下面接上資訊流
街貓本身有不少原創內容，直播間、曬貓動態、求助問題、領養資訊、結紮案例都有，用資訊流讓使用者發現感興趣的東西，阻力不大。
作者還說，如果由他決定產品結構，他會直接拿掉底部分頁的貓友圈，合併到首頁下方，一次處理貓友圈沒人看、首頁沒內容的兩個問題。
到這裡首頁調整就算完成了。每一個改動都能對回前面的產品分析，才進到視覺設計。如果前後互相矛盾還硬做下去，面試時就要有講不出理由的心理準備。
最後留下的那個問題
作者在結尾提到，產品思維是中大型公司招 UI 設計師時最看重的能力，比視覺和規範還重要，更勝過會用 AI 工具。因為實際工作裡，設計方案的評審幾乎都繞著產品層面在討論。
他也留了一個問題給讀者。地圖模組成立的前提，是你附近真的有貓箱。如果你住的城市一個都沒有，甚至方圓幾百公里都沒有，這個元件還有存在的價值嗎？有的話，又該用什麼形式呈現？
他的看法是，能用合理的思路把這個漏洞補起來，它就是合理的設計，補不起來，就是錯的設計。原文沒有給答案，我也還沒想到很好的解法，也許這正是這個練習想留給我們的。
回頭看整個案例，我想產品思維說穿了就是一個順序：先搞懂這個產品靠什麼活下去，再決定畫面要長怎樣。
如果你對「畫圖之前先想清楚要回答什麼」這件事有興趣，可以接著看這篇：儀表板設計怎麼做？畫圖之前先問的三個問題。
下次接到改版需求，先別急著開 Figma，把業務目標和產品形式寫下來，產品思維就是從這一步開始練的。
產品思維的常見問題
UI 設計師的產品思維是什麼？
簡單說，就是在動畫面之前，先弄清楚產品的業務目標，以及它用什麼產品形式去達成，讓每個設計決定都能對回這個目標。
改版時要先做什麼？
先分析業務與產品，再看使用者與體驗，最後才是互動與視覺。順序反過來，很容易做出漂亮卻解釋不了的畫面。
作品集裡怎麼展現產品思維？
把改版前的分析寫清楚，說明原本的設計意圖是什麼、你的每個改動怎麼對應這個意圖。評審和面試官最在意的就是這段理由。
