編輯導(dǎo)語：按鈕應(yīng)該如何設(shè)計(jì)才更有效？頁面應(yīng)該如何布局才更合理？也許關(guān)于這些問題，前人已有相應(yīng)的普適觀點(diǎn)，但是在具體場(chǎng)景下，每個(gè)設(shè)計(jì)細(xì)節(jié)都有可能被改變。因此，產(chǎn)品設(shè)計(jì)不能落入慣性思維里。不妨看看本文的設(shè)計(jì)案例解析。

一、設(shè)計(jì)什么與如何設(shè)計(jì)

作為設(shè)計(jì)師，我們經(jīng)?？释窒碛嘘P(guān)產(chǎn)品設(shè)計(jì)的信息和技巧。這對(duì)我們行業(yè)和同行的發(fā)展很重要。我從經(jīng)驗(yàn)豐富的 UI 設(shè)計(jì)師、UX 設(shè)計(jì)師、開發(fā)人員和各種產(chǎn)品設(shè)計(jì)角色那里學(xué)到了很多東西。我仍然每天都在學(xué)習(xí)，這對(duì)我們的行業(yè)來說是很強(qiáng)大的。作為一個(gè)從業(yè)者，我們可以發(fā)現(xiàn)的東西真的沒有上限。

然而，我們也很容易陷入“設(shè)計(jì)什么”與“如何設(shè)計(jì)”的單一思維模式。以“這是設(shè)計(jì) ABC的方式”與“我們想要解決的業(yè)務(wù)目標(biāo)、客戶目標(biāo)、我們想要解決的問題、我們想要傳達(dá)的情感和品牌等”的錯(cuò)誤心態(tài)開始一個(gè)新項(xiàng)目。

下面是一些設(shè)計(jì)師分享“設(shè)計(jì)什么”和行業(yè)巨頭設(shè)計(jì)類似同一設(shè)計(jì)師的“不要這樣做”建議的例子。

二、背景和對(duì)比（可能有人告訴你不能這樣設(shè)計(jì)）

HBO Max 和 Hulu（但是他們這么做了）

HBO Max 和 Hulu 選擇了品牌背景。HBO 使用他們新的紫色/紫色漸變，而 Hulu 使用他們的深綠色。這可能會(huì)偶爾產(chǎn)生對(duì)比怪癖，但這似乎是一種極端情況，因?yàn)榇蠖鄶?shù)內(nèi)容海報(bào)看起來清晰易讀。

三、按鈕陰影（可能有人告訴你不能這樣設(shè)計(jì)）

谷歌的組件設(shè)計(jì)（但是他們這么做了）

谷歌龐大的設(shè)計(jì)師團(tuán)隊(duì)花費(fèi)數(shù)年時(shí)間創(chuàng)造和完善材料設(shè)計(jì)。下面是來自 Google 的Material Design組件庫的截圖。

您會(huì)看到 Google 使用黑色陰影的主要原因（與上面的圖片相反）是因?yàn)?Material Design 旨在模仿現(xiàn)實(shí)生活，因此不透明的對(duì)象不會(huì)產(chǎn)生彩色陰影。這在下面顯示的示例中表示。

四、界面布局（可能有人告訴你不能這樣設(shè)計(jì)）

蘋果音樂和推特（但是他們這么做了）

這是一個(gè)棘手的例子，因?yàn)椤肮δ堋辈⒉煌耆宄?。我認(rèn)為設(shè)計(jì)師的意思是主要的“目的/目標(biāo)”。

上面示例的挑戰(zhàn)在于，它意味著可以減少具有很多選項(xiàng)的視圖，而無需進(jìn)行一些權(quán)衡或妥協(xié)。在可能的情況下呈現(xiàn)更少的元素是很好的，但需要付出代價(jià)。

有很多帶有許多按鈕元素的視圖示例，但我選擇了 Apple Music 和 Twitter，因?yàn)樗鼈兏愃朴谏厦?Instagram 帖子中顯示的比較。在這種情況下，成本將是平臺(tái)為用戶制作定制內(nèi)容的力。

五、居中文本（可能有人告訴你不能這樣設(shè)計(jì)）

蘋果的網(wǎng)站（但是他們這么做了）

在幾乎任何網(wǎng)站上都可以很容易地找到居中文本主體的示例。上面的設(shè)計(jì)師說居中文本。

這并不是完全不正確的，因?yàn)殚L格式的內(nèi)容當(dāng)然不應(yīng)該居中，并且應(yīng)該評(píng)估每個(gè)副本實(shí)例。例如，我設(shè)計(jì)的一些標(biāo)題及文案在大型設(shè)備上左對(duì)齊，而在移動(dòng)/小型設(shè)備上居中。文本量可以在這些決定中發(fā)揮很大作用。

六、顏色的使用（可能有人告訴你不能這樣設(shè)計(jì)）

Spotify 和蘋果音樂（但是他們這么做了）

這位設(shè)計(jì)師建議使用較少的顏色。我知道他們可能指的是基礎(chǔ)品牌，而不是用太多顏色壓倒 UI。

但是，這里缺少的是具體情況。在沒有具體的情況下，此建議具有誤導(dǎo)性。

在正確的背景下，更少的顏色可能是正確的決定。但 Spotify 的整個(gè)品牌和用戶體驗(yàn)通常以一系列顏色為中心。

七、邊距和間距（可能有人告訴你不能這樣設(shè)計(jì)）

Netflix 和 Hulu（但是他們這樣做了）

留白和“呼吸空間”是視覺層次的關(guān)鍵，引導(dǎo)客戶采取行動(dòng)，并圍繞平衡設(shè)計(jì)。不幸的是，上面的例子并不適合展示空白的重要性。

眾所周知，Netflix 是最有效地根據(jù)客戶行為/行為評(píng)估和衡量其 UI 的公司之一。您可以在下面看到 Netflix（和 Hulu）在每條內(nèi)容之間利用了狹窄的邊距/排水溝。與上面相比，您可以注意到這兩個(gè)流媒體巨頭類似于上面的“不要”示例與右側(cè)的“做”示例。

結(jié)語

感謝您花時(shí)間閱讀這篇文章！在平臺(tái)上貶低設(shè)計(jì)帖子不是我的目標(biāo)。我的目標(biāo)是不斷推動(dòng)設(shè)計(jì)師為他們的帖子提供用戶使用情況。我每天都在學(xué)習(xí)我以前不知道的關(guān)于設(shè)計(jì)的新東西。這是因?yàn)槲覀儞碛幸粋€(gè)強(qiáng)大的社區(qū)，他們擁有不同的經(jīng)驗(yàn)、文化和觀點(diǎn)，他們都在分享有用的建議。

本文由 @收手的阿祖 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議