這10個設計實戰法則,學會了可以幫你跨過很多坑

0 評論 5475 瀏覽 9 收藏 10 分鐘

編輯導語:產品設計師可以借用哪些法則做出更完善的設計,以提升用戶的產品使用體驗?在具體工作中,又可以如何將基礎的設計知識應用自如呢?本篇文章里,作者總結了10個設計法則,也許會對產品設計崗位上的你有所幫助。

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

學了很多方法,如何學以致用呢?在我看來最好的辦法就是長時間實踐,將這些方法轉變為設計本能,這樣每次開始設計時就會本能地想起并運用這些知識。

一起來回顧如何將基本的設計知識應用到工作中,學會了基礎才能慢慢進階。

一、線條和描邊

在文章《原子設計方法論!值得一學的設計思維模式》中,講到原子是構成設計的最基礎的元素,在設計構成中,點也是最基本的元素。

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

這10個設計實戰法則,學會了可以幫你跨過很多坑

線條和描邊有三個主要的用途:引導用戶視線;創建重點并突出顯示;給人一種運動感。

這10個設計實戰法則,學會了可以幫你跨過很多坑

在網頁頂部,對角線樣式的拼貼背景很好地襯托出logo效果,同時也增加了網站標題的動態感。

二、比例和大小

要看一個產品的設計是否讓人舒服,一個重要的點就是呈現給用戶的的比例關系是否合理。確定恰當的比例關系有助于引起用戶對某些元素的注意,同時創造重點或對比。

這10個設計實戰法則,學會了可以幫你跨過很多坑

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

三、配色方案

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

這10個設計實戰法則,學會了可以幫你跨過很多坑

▲ 在這個頁面中,中間的餅圖選擇了足夠鮮艷的顏色來區分不同的信息類型,同時這些顏色合在一起也很協調一致。?

這10個設計實戰法則,學會了可以幫你跨過很多坑

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

四、重復

重復最明顯的優勢是可以始終如一地展示品牌元素,從而在觀眾心中留下了印記。

另外,使用重復還可以有效連接各個組件,避免設計過程過于繁瑣。

這10個設計實戰法則,學會了可以幫你跨過很多坑

這10個設計實戰法則,學會了可以幫你跨過很多坑

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

五、負空間

負空間是一個區域,是設計元素之間的距離。很多logo設計師擅長使用負面空間設計成具有隱喻的品牌logo。UI設計中通常利用負空間來調整頁面的呼吸節奏并加深主題印象。

這10個設計實戰法則,學會了可以幫你跨過很多坑

這10個設計實戰法則,學會了可以幫你跨過很多坑

▲ 主體形狀采用蜂鳥的兩種狀態,真實圖片代表設計,標志則代表編程,兩者通過左右滑動巧妙地結合在了一起。

六、對稱性

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

這10個設計實戰法則,學會了可以幫你跨過很多坑

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

七、透明度

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

這10個設計實戰法則,學會了可以幫你跨過很多坑

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

八、紋理圖案

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

這10個設計實戰法則,學會了可以幫你跨過很多坑

這10個設計實戰法則,學會了可以幫你跨過很多坑

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

九、平衡

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

要創造視覺平衡,不僅可以使用對稱,還可以根據元素的視覺重量,合理安排位置,做到畫面的平衡。

這10個設計實戰法則,學會了可以幫你跨過很多坑

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

十、對比

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

這10個設計實戰法則,學會了可以幫你跨過很多坑

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

最后

經過長時間的實踐運用,這些原則終變為本能存在于我們的大腦中,一起來期待這個轉變過程吧!

#專欄作家#

作者:Clippp,微信公眾號:Clip設計夾。每周精選設計文章,專注分享關于產品、交互、UI視覺上的設計思考。

本文原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!