由關注按鈕想到的

一種做法視覺上強調關注後的正在關注狀態：

兩種方式代表了兩個思路，各有利弊。第一種在沒有關注用戶時，按鈕的視覺樣式不過分突顯，在譬如推薦用戶列表的地方，適用性較強；缺點在於關注按鈕的可發現性較差，可能對關注率有一定影響。第二種方式剛好相反，對關注行為強引導，視覺突出，但有時在頁面適用性上會存在一些局限，尤其是在列表中的表現。

產品設計者當然希望用戶之間更多地建立社交關係，對關注按鈕的視覺強化看似是理所當然的。那為什麼像 Medium、Instagram 這樣的社交產品，沒有把關注按鈕設計得更加明顯，反而是強調關注後的狀態？

發了封私信給 Medium 的前設計總監 Dustin Senos，問了這個問題：當初設計 Medium 時為什麼 Follow 使用了 ghost button，而 Following 用 solid button？為什麼不是反過來的？這個決策和數據有關嗎？

意外地收到了 Dustin 的回復：

Its a great question, and Im not sure theres one correct answer. I believe we sometimes use ghost buttons to indicate something that has not been clicked on yet, so that when you do click on it, you "fill it up" and it looks active. I also imagine if you were quickly scrolling through a list of people and you saw a button filled in solid, you would feel like youre following that user as that row now has more visual weight—that is probably based on my experience with the button styles we use.

Im not sure on the data, but I would guess people would be more likely to click on solid buttons, as theyre heavier on a screen, but Im not sure if it would correctly match with their mental model.

大致意思是：

這是個很棒的問題，我也不確定是否有一個正確答案。我認為我們有時會用 ghost button 來暗示沒有被按下的東西，所以當你按下時，你「填充」了它，它看起來是被激活的。假設你快速地滾動一個用戶列表，看到一個被填充的實心按鈕，你會意識到你正在關注這個用戶，因為那一行的視覺更突出——這一點可能是基於我們使用的按鈕樣式的經驗。

雖然我不確定數據是怎麼樣的，但我猜想人們更有可能去點擊實心按鈕，因為實心按鈕在屏幕上更顯眼，但我不確定這種做法是否與人們的心理模型相符。

心理模型的角度是我之前沒有想到的。「點亮」是正向操作，「熄滅」是負向的。當你在冗長的用戶列表中看到亮起的「正在關注」時，你會覺得這個人與你有關。這樣想來確實不無道理。假設反過來，用顯眼的亮色吸引人們去點擊關注按鈕，站在功能性的角度，好像也沒有什麼問題，數據還可能會更好看，可這是否與人們的思維模式相契合呢？

還有不可忽視的一點是，關注按鈕也是按鈕的一種，在系統級的語境中，一個產品中同類按鈕的行為不應該是互相矛盾的。Instagram 的 Like、Follow 這類存在兩種正反狀態的按鈕，都採用了同一種模型，用戶能在一致的體驗里形成自然的反射迴路。尤其在較複雜的 Web 產品中，同一頁面上分布著不同功能的按鈕，哪種設計方式更能簡化用戶的識別和決策過程，哪種方式就是更優的。

如果你也在思考按鈕的設計，或許能從中得到些不一樣的思路。

推薦閱讀：