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

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

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

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

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

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

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

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

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

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

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

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

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

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

這是一個棘手的例子，因為“功能”并不完全清楚。我認(rèn)為設(shè)計師的意思是主要的“目的/目標(biāo)”。

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

有很多帶有許多按鈕元素的視圖示例，但我選擇了 Apple Music 和 Twitter，因為它們更類似于上面 Instagram 帖子中顯示的比較。在這種情況下，成本將是平臺為用戶制作定制內(nèi)容的力。

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)語

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

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

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