編輯導(dǎo)語：產(chǎn)品設(shè)計師可以借用哪些法則做出更完善的設(shè)計，以提升用戶的產(chǎn)品使用體驗？在具體工作中，又可以如何將基礎(chǔ)的設(shè)計知識應(yīng)用自如呢？本篇文章里，作者總結(jié)了10個設(shè)計法則，也許會對產(chǎn)品設(shè)計崗位上的你有所幫助。

對于即將開始或者剛開始設(shè)計工作的小伙伴來說，如何將學(xué)習(xí)到的設(shè)計知識運用到實際工作中，始終是一個難解決的問題。

學(xué)了很多方法，如何學(xué)以致用呢？在我看來最好的辦法就是長時間實踐，將這些方法轉(zhuǎn)變?yōu)?strong>設(shè)計本能，這樣每次開始設(shè)計時就會本能地想起并運用這些知識。

一起來回顧如何將基本的設(shè)計知識應(yīng)用到工作中，學(xué)會了基礎(chǔ)才能慢慢進階。

一、線條和描邊

在文章《原子設(shè)計方法論！值得一學(xué)的設(shè)計思維模式》中，講到原子是構(gòu)成設(shè)計的最基礎(chǔ)的元素，在設(shè)計構(gòu)成中，點也是最基本的元素。

通過連接兩個點，我們可以創(chuàng)建直線、曲線或者形成角度，再組合這些線條和筆觸，就能夠形成設(shè)計元素。

線條和描邊有三個主要的用途：引導(dǎo)用戶視線；創(chuàng)建重點并突出顯示；給人一種運動感。

在網(wǎng)頁頂部，對角線樣式的拼貼背景很好地襯托出logo效果，同時也增加了網(wǎng)站標(biāo)題的動態(tài)感。

二、比例和大小

要看一個產(chǎn)品的設(shè)計是否讓人舒服，一個重要的點就是呈現(xiàn)給用戶的的比例關(guān)系是否合理。確定恰當(dāng)?shù)谋壤P(guān)系有助于引起用戶對某些元素的注意，同時創(chuàng)造重點或?qū)Ρ取?/p>

▲ 頁面中比例最大的球體以及左上角的Jupiter標(biāo)題能首先引起我們的關(guān)注。球體的大小從其他元素中脫穎而出，為整體設(shè)計增添了很亮眼的效果。

三、配色方案

顏色的重要性不言而喻。在選擇和創(chuàng)建調(diào)色板時必須盡可能謹慎，不要忘記顏色基本的使用原理和意義，例如綠色代表成功、藍色代表處理中、黃色代表警告、紅色代表錯誤。

▲ 在這個頁面中，中間的餅圖選擇了足夠鮮艷的顏色來區(qū)分不同的信息類型，同時這些顏色合在一起也很協(xié)調(diào)一致。?

餅圖之外的設(shè)計，比如背景色、圖標(biāo)、字體則選擇了中性色，這樣能夠快速用戶將注意力集中到餅圖上。

四、重復(fù)

重復(fù)最明顯的優(yōu)勢是可以始終如一地展示品牌元素，從而在觀眾心中留下了印記。

另外，使用重復(fù)還可以有效連接各個組件，避免設(shè)計過程過于繁瑣。

▲ 這個頁面中有多個重復(fù)的紅色、黃色和藍色的小圓圈作為裝飾，既可以豐富畫面，又與頂部頭圖的插畫風(fēng)格保持一致。

五、負空間

負空間是一個區(qū)域，是設(shè)計元素之間的距離。很多l(xiāng)ogo設(shè)計師擅長使用負面空間設(shè)計成具有隱喻的品牌logo。UI設(shè)計中通常利用負空間來調(diào)整頁面的呼吸節(jié)奏并加深主題印象。

▲ 主體形狀采用蜂鳥的兩種狀態(tài)，真實圖片代表設(shè)計，標(biāo)志則代表編程，兩者通過左右滑動巧妙地結(jié)合在了一起。

六、對稱性

對稱創(chuàng)造出一種平衡的感覺。在設(shè)計中對稱布局通常是一個安全的選擇，但過分使用對稱會人覺得無聊，缺少亮點。

▲ 這個頁面采用了對稱式的布局，每個卡片上都展示了不同樣式的信息，在對稱的同時帶來一些差異性，這樣的布局看起來很美觀而且用戶也能輕松了解內(nèi)容。

七、透明度

透明度使元素間能夠相互影響，能產(chǎn)生特別吸引人的視覺效果。在同一方向上使用帶有透明蒙版的分層圖像，可以在頁面中創(chuàng)造出動感。

▲ 頁面左側(cè)背景的設(shè)計沒有直接使用單一的顏色，而是復(fù)制了背景圖，并故意和背景圖的位置錯開，再加上帶有透明度的顏色蒙版，營造出一種視差感。

八、紋理圖案

紋理的運用要始終控制一個度。在頁面中過度使用紋理不僅會讓頁面內(nèi)容顯得混亂，還影響重要或重點的內(nèi)容的突顯。合理使用紋理能讓頁面更有深度，更有質(zhì)感。

▲ 在這個旅游產(chǎn)品的登錄頁面上，頂部的紅色和黃色色塊中都嵌入了地圖紋理，這樣的設(shè)計不僅與主題內(nèi)涵深度契合，還讓整個頁面層次看起來更加豐富。

九、平衡

對稱就是一種具有相同的屬性，如大小、長度、形狀的平衡。

要創(chuàng)造視覺平衡，不僅可以使用對稱，還可以根據(jù)元素的視覺重量，合理安排位置，做到畫面的平衡。

▲ 在這個頁面中，延伸的線條使用了不同的長度、轉(zhuǎn)折彎曲度以及遠近的距離和位置，一起構(gòu)成畫面的視覺平衡。

十、對比

提到平衡，當(dāng)然就不能忽略對比。簡單來說，對比就是在布局設(shè)計元素時，不同元素之間的顏色、形狀、比例之間的差異。此外，對比關(guān)系會影響元素的易讀性，增加設(shè)計的重點并讓重點脫穎而出。

▲ 在設(shè)計深色模式的UI頁面時，要注意文本與背景的對比度，以便于閱讀。還要對不同類型的信息進行合理的區(qū)域劃分，方便用戶第一時間找到需要的信息。

最后

經(jīng)過長時間的實踐運用，這些原則終變?yōu)楸灸艽嬖谟谖覀兊拇竽X中，一起來期待這個轉(zhuǎn)變過程吧！

#專欄作家#

作者：Clippp，微信公眾號：Clip設(shè)計夾。每周精選設(shè)計文章，專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計思考。

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

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