怎樣才能讓自己的作品有設計感?編輯導語:設計需要一定的技術,但如果缺少了審美,作品可能會因為缺乏設計感而被忽略那如何才能夠提升作品的設計感呢?在本篇文章中,作者講述了十個設計的技巧,不妨一起來看看吧,我來為大家講解一下關于怎樣才能讓自己的作品有設計感?跟着小編一起來看一看吧!
編輯導語:設計需要一定的技術,但如果缺少了審美,作品可能會因為缺乏設計感而被忽略。那如何才能夠提升作品的設計感呢?在本篇文章中,作者講述了十個設計的技巧,不妨一起來看看吧!
Hi,我是彩雲。
每個人都是以新手的身份入行設計,沒有人天生就有很好的審美,它也必須像其他事物一樣得到訓練。每天看 Dribbble 上的設計作品可能是非常有幫助的,但很多時候你可能隻是在欣賞設計,卻不明白為什麼。
沒有想法,隻會用素材,不知道該設計什麼,所有這些都可能是你進步路上的阻力并給你帶來挫敗感。在今天的這篇文章中我将教你 10 個非常簡單的設計技巧,這些技巧不需要任何特殊的技能,隻要用上就能大大提升你作品的設計感。
當然,這些不是公式定理,而是大多數情況下行之有效的技巧。
一、善用黑白沒有想法?沒有好的配圖?那麼就隻需要用到萬能的黑色和白色,就可以迅速獲得一個具有正确構圖的“抽象主義設計”。在作品中善用黑白将幫助你理解平衡、留白以及如何使用文字和幾何圖形。
讓我們快速看一個例子,黑白的運用對作品的展示簡單而有效,看起來就很高級。
二、保持畫面平衡我喜歡用我自己發明的“東西”來測試我的設計,我稱之為“平衡方案”。這是一個黑白的内容塊方法,我會用簡單的幾何圖形來代替内容。
我的這個方法是讓黑色塊蓋住元素,然後計算左右的黑色面積,大緻相等的話,就視為平衡。如果把這個原理應用到界面中,會得到這樣的結果:
用黑色矩形替代主要内容,灰色是次要内容。顯然你必須靠眼睛觀察,但其實我們也可以直接計算。左側區域的黑色矩形面積之和為(236×138) (934×132) (674×44) (313×69) = 207109px,右邊的大矩形面積為(446×446) = 198916px。他們之間的差别很小,誤差隻有 3.9558%
我現在在設計之前不用去計算,經過多年的練習,這種意識就變成了自然而然的事情,因為你的眼睛會感覺到不平衡。
(彩雲注:關于視覺平衡,這裡其實講的是視覺面積要大緻相同,人眼才會感知到平衡。正好彩雲在上一篇文章《為什麼你的設計總感覺不舒服?很可能是視覺平衡沒有做好》中有分享更全面的畫面平衡知識,一定要讀一讀了。)
三、給作品增加背景我在前面那個例子中是用了一個灰色的背景來展示設計作品,但其實可以嘗試不同的元素,這有助于增加畫面空間感和背景效果。
但要注意,在一個真實的網站中,頁面周圍可能沒有有這麼多多餘空間,所以這隻是一個作品展示技巧。
在上面這個作品展示中,咖啡豆給人的感覺是有深度和有品質的。
四、使用規範字體大小不用浪費時間整天去測試尺寸。我建議段落文字尺寸大約是 14-18pt,副标題是 24-36pt,标題可以用更大一些的字号(我個人是習慣用 96-144pt)。Figma 的默認大小非常适合排版。
上面的尺寸看起來太小,這也正常,因為你在手機上看到的圖,在電腦上全屏看就是正常的。
注意:有些字體比其他字體大或小得多。你應該使用像 Roboto 這樣的标準字體,如果字體大小跟 14-18pt 的 Roboto 差不多,那麼它是完美的正文字體。
段落 18,導航 24,标題 96
彩雲注:我建議剛入行不久的小夥伴,比如不知道網頁規範,移動端規範,一個比較快且行之有效學習規範的方法就是去截圖大廠的應用,網頁和 APP 都可以。然後,對着截圖直接量就好了,記住人家在做界面的時候,字體用多大,什麼顔色,間距,字号等等。
記住這些參數,至少不容易出錯了。之後,在自己項目中自定義規範,關于設計規範如何制定我之前也專門寫過文章,想了解這塊知識的一定要去看看《原來設計規範要這樣理解,早知道就好了!》
五、增加 z 軸如果你有一些透明的圖片,可以利用它們來設計一些 3D 圖層。如果你沒有,你可以使用網頁版 AI 自動摳圖神器!
當今的在線去背工具多半會整合 AI 人工智能技術,以機器學習方式去建構出可準确辨識前景和背景的模型,使用機器自動化去除背景的好處是快速、精确而且無需額外編輯,即使沒有專業繪圖軟件一樣可以在浏覽器進行,remove.bg 是在線去背服務最早出現、而且最強大的選擇,後來也有 FocoClip。
作為 CSS 中的 Z-index,你可以将透明圖片放在其他項目的後面或前面,給人一種三維的錯覺。這對增強設計感來說,是非常有效的。
讓我們看看我使用這種技術的一個簡單設計。
鳥嘴巴從綠色背景中出界到黃色背景中,強化了整體的視覺沖擊力。
六、使用高級淺色明亮的顔色很棒,但沒用好的話,往往會導緻激進的設計和糟糕的畫面。此外,淺色設計(性冷淡設計)如今非常流行,所以讓我們開始嘗試顔色選擇器的一個新區域。
在這個紅框範圍内可以快速選到一些比較好的顔色
兩種配色都沒有啥問題,這是一個審美的問題,但如果你想要表達一些更高級的設計感覺,可以嘗試淺色。
七、打造呼吸感在我看來,大的留白比太少的留白要好。雜亂滿檔的設計很糟糕, 呼吸感可以通過多種方式獲得:
讓背景大面積保持可見
善用間距,避免出現文字牆效果
使用不會引起太多關注的圖片
精簡文字,保留朗朗上口的短語
更大的留白(在上圖中指的是黑色區域)會顯得更加高級。
八、加入噪點通常當我們思考設計時,我們想到的是幹淨、流暢、清晰的概念。但太幹淨的畫面會讓人感到不真實,缺乏質感。
在設計中,噪點是一個很好的朋友,尤其是當你想給你的網站有一個優雅或藝術的外觀時。此外,應用一個微妙的噪點讓畫面能有一個電影級的外觀,這種處理手法非常适合用在視頻和動态網站中。
你可以使用 Photoshop 在白色背景上創建 2-4K 大小的雜色-高斯分布的紋理,然後将它放到頁面的最上層。
整個網頁中都增加了一些噪點,這讓畫面整體擁有更強的質感。(這裡噪點的效果比較微妙,小圖可能看不清,點看大圖可以看到噪點效果)
九、使用漂亮的字體有很多不同的字族和風格,但總的來說,我把它們分為三大類:
常用的襯線字體,如 Abril Fatface, Playfair Display, Volux, Chalga 等。
無襯線字體包括 Metropolis、ITC Avant Garde、Redwing、Takota、Gotham….
十、使用幾何圖形這可能是最難使用的技巧,但如果使用正确,它定會大放光彩。
使用幾何圖形有助于加強概念和布局中的順序,甚至不需要配圖。找到合适的幾何形狀是困難的,我至今仍然不能很好地掌握它。
一個好用的技巧是将文案中的字母、數字和标題作為幾何形狀:讓它們變得巨大而巧妙,或者使用一些特殊的字母作為形狀(A 很管用)。(這個技巧非常實用,彩雲經常在一些視覺内容較少的頁面,用一個大的幾何圖形比如大寫的字母作為底部背景,用很淺的顔色,看起來視覺上就能更豐富了。)
彩雲sky,騰訊高級視覺設計師;公衆号:彩雲譯設計
本文原創發布于人人都是産品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!