亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁 > SEO動態(tài) > 網(wǎng)站技術(shù)從5個方面,深入分析如何學(xué)會借鑒參考!

從5個方面,深入分析如何學(xué)會借鑒參考!

從5個方面,深入分析如何學(xué)會借鑒參考!

學(xué)會借鑒參考圖,對于我們設(shè)計師來說是一項非常重要的技能。尤其對于一些經(jīng)驗不是那么充足的、剛?cè)胄袥]多久的設(shè)計師,參考圖能為我們做出更好看的設(shè)計鋪路。有了參考圖我們就不用自己悶著腦袋死想,各式各樣的解決方案也許早已擺在那里,只等我們?nèi)グl(fā)掘。

再往上一些,如果我們的訴求是為了做出更不一樣的設(shè)計,參考圖也能給你提供一些靈感。

日常參考圖的積累是多么多么的重要,這里我就不過多地贅述,希望大家都能去多看、多積累、多實踐,這是成為一個優(yōu)秀設(shè)計師必不可少的過程。

下面我就會從五個方向:排版、形狀、顏色、字體、創(chuàng)意,說說我在參考圖借鑒上面的一些心得體會,本篇不會落到某個具體很小的設(shè)計中,介紹的都是一些比較通用的設(shè)計辦法,話不多說,讓我們開始吧!

從5個方面,深入分析如何學(xué)會借鑒參考!

一、排版上

排版借鑒 1——破形

顧名思義,破形,就是用一個形狀去打破另一個形狀,它不再被框在一個區(qū)域內(nèi)

從5個方面,深入分析如何學(xué)會借鑒參考!

比較常見的用法是用在 banner 上、彈窗上,只要是涉及到卡片的地方,都可以用到破形。

從5個方面,深入分析如何學(xué)會借鑒參考!

破形是個非常好用的辦法,讓物體不再局限在某個區(qū)域內(nèi),就會不那么死板,排版上會看起來更具有沖擊力。

同時,如果這個物體又是個立體圖,我們加上投影,它又能和卡片的平面形成立體和平面的對比。設(shè)計排版層次上也會更加豐富。

從5個方面,深入分析如何學(xué)會借鑒參考!

排版借鑒 2——信息排版形式的多元化

做設(shè)計這么久了,我們無可避免地會遇到一張卡片上信息很多的情況,比如說下面這幾塊的商品信息都很多:

從5個方面,深入分析如何學(xué)會借鑒參考!

如果讓我們一些設(shè)計同學(xué)來做的話,排版上很有可能做出來就像是這樣的:

從5個方面,深入分析如何學(xué)會借鑒參考!

這種做法大概就是 有多少信息堆多少信息,這樣排出來的信息肯定會又多又雜,讓人看起來很累,不太想讀。

這個時候,就要學(xué)會將信息排版的形式處理得更多元化

比如這個設(shè)計稿的原作,它就是將「3 折,立省 30 元」這樣的信息排版處理成標(biāo)簽的形式,并且在這之上,又劃分了信息排版形式:

從5個方面,深入分析如何學(xué)會借鑒參考!

下面這個例子也是類似的做法,它將用戶信息處理的跟其他字段不一樣了一些。

從5個方面,深入分析如何學(xué)會借鑒參考!

說到這里,另外有個小知識點,也可以跟大家分享一下,就是大家看到這個地方,它其實可以將文字一排就放完,但是它選擇了折行,為什么?

從5個方面,深入分析如何學(xué)會借鑒參考!

這其實是增加設(shè)計排版層次的一種做法,我們將本來能夠一排放下的文字 折行處理,會讓排版上更加穩(wěn)重,不顯單薄。

從5個方面,深入分析如何學(xué)會借鑒參考!

從5個方面,深入分析如何學(xué)會借鑒參考!

排版借鑒 2——信息拆分

當(dāng)我們遇到一張卡片上信息較多的情況,除了上面說的將信息的排版形式多元化外,還可以將信息進(jìn)行拆分,比如下面這個例子

從5個方面,深入分析如何學(xué)會借鑒參考!

排版借鑒 3——實例運用

我們就將上述方法一頓運用,優(yōu)化了下面這張卡片的排版,是不是信息的設(shè)計就會更豐富一些?

從5個方面,深入分析如何學(xué)會借鑒參考!

二、形狀上的借鑒

形狀借鑒 1——在基礎(chǔ)形上做缺角

缺角的方式也是多種多樣的,一共可以有 3 種形式

從5個方面,深入分析如何學(xué)會借鑒參考!

圖形缺角:往往在矩形卡片右上角挖掉任意圖形,并且在挖掉后,再填充上其他修飾物,來讓排版更平衡

從5個方面,深入分析如何學(xué)會借鑒參考!

缺角不一:矩形卡片四個角圓角大小不一的缺角

從5個方面,深入分析如何學(xué)會借鑒參考!

斜切角:將矩形卡片斜切,變成平行四邊形,會比規(guī)整的矩形更特殊一些

從5個方面,深入分析如何學(xué)會借鑒參考!

形狀借鑒 2——融入品牌形狀

除了上面我們將卡片缺角處理,能做出更不一樣的卡片形狀之外,嘗試在形狀上融入品牌形狀,也是非常不錯的做法!

從5個方面,深入分析如何學(xué)會借鑒參考!

三、顏色上的借鑒

我們要對好看的、流行的顏色有敏銳度,看到好看的顏色,一定要毫不猶豫的收集下來,方便我們設(shè)計時能快速上色。

從5個方面,深入分析如何學(xué)會借鑒參考!

像我在做頁面的顏色搭配時,就想到有這樣一張參考圖,它的用色讓我印象十分深刻,也特別符合年輕化潮流化的頁面

從5個方面,深入分析如何學(xué)會借鑒參考!

我們就可以提取它的顏色運用到頁面中,這樣年輕化潮流感 不就立馬來感覺了嗎

從5個方面,深入分析如何學(xué)會借鑒參考!

顏色借鑒 2:(年輕潮流化的)頁面顏色要怎么搭配,不會踩雷

最關(guān)鍵的一點,就是我們頁面亮色里一定要融入黑色!

首先來看看暗色系的頁面,它是怎么去用亮色的。

可以是亮色與黑色的大面積碰撞,亮色與暗色的用色比例大概是 1:1

從5個方面,深入分析如何學(xué)會借鑒參考!

也可以是小面積的亮色,點綴在暗色系的頁面中,亮色與暗色的用色比例大概是 3:7

從5個方面,深入分析如何學(xué)會借鑒參考!

如果是在淺色系的頁面中去用亮色,會讓頁面中很大面積都是亮色,切記一定要用黑色去把整個頁面壓下來,要不然頁面整體用色會顯得很油膩、輕浮。

從5個方面,深入分析如何學(xué)會借鑒參考!

從5個方面,深入分析如何學(xué)會借鑒參考!

四、字體的借鑒

這里給大家推薦幾款字體,都是無版權(quán),又能打造風(fēng)格化頁面的字體!

全網(wǎng)最全的免費可商用字體看這里 ? https://hao.uisdc.com/font/

從5個方面,深入分析如何學(xué)會借鑒參考!

拿到了字體包,我們也要知道怎么用,我們可以去學(xué)習(xí)借鑒一下別人的用法。

字體的用法借鑒

像這種特殊的字體,一般不會大面積的去用,都是運用在需要強(qiáng)調(diào)的文字上、字號比較大的數(shù)字上,如頁面大標(biāo)題、主按鈕文字。其他都是常規(guī)字體

從5個方面,深入分析如何學(xué)會借鑒參考!

字體的修飾形式借鑒

有時候一個頁面不需要多么花哨,像在字體處就可以增加一些細(xì)節(jié)修飾,字體處的修飾大概有三大種

從5個方面,深入分析如何學(xué)會借鑒參考!

加線:在字體上增加線條裝飾,且線條的粗細(xì)會比字體細(xì)

從5個方面,深入分析如何學(xué)會借鑒參考!

加圖形:類似于畫高亮

從5個方面,深入分析如何學(xué)會借鑒參考!

加字母:在文字上加添加字母的紋理修飾

從5個方面,深入分析如何學(xué)會借鑒參考!

這些用法大家都可以學(xué)起來,用在頁面中增加設(shè)計感。

五、設(shè)計創(chuàng)意的借鑒

1. 場景具像化

將一段音頻設(shè)計成音箱、唱片

將濾鏡設(shè)計成膠卷的形式

將書信做出紙質(zhì)感

......

這些都是在模擬我們真實的生活場景,當(dāng)我們在做設(shè)計時,也可以去思考能不能將它擬物化。

從5個方面,深入分析如何學(xué)會借鑒參考!

交互:我們從用戶的交互的選中態(tài)、未選中態(tài)的形式上也可以做出創(chuàng)意,比如說把它想象成氣球,選中后氣球「加氣」變大,如果取消選中,氣球「漏氣」縮小。

從5個方面,深入分析如何學(xué)會借鑒參考!

成就完成、未完成:對于情侶來說,一起做的事有誓言的意義,按手印就變得有趣。

從5個方面,深入分析如何學(xué)會借鑒參考!

總結(jié)

以上就是一些關(guān)于借鑒參考的技巧和思路,我們可以把這些技巧運用起來。好了今天的分享就到這里了,我們下期再見!

作者:菜心設(shè)計鋪

想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)

本文來源:http://www.sonygallery.com.cn/seodongtai/20073.html

免責(zé)聲明:部分文章信息來源于網(wǎng)絡(luò)以及網(wǎng)友投稿,本網(wǎng)站只負(fù)責(zé)對文章進(jìn)行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點或證實其內(nèi)容的真實性,不承擔(dān)任何法律責(zé)任。