德陽網站優化
您當前的位置 : 首 頁 > 新聞中心 > 公司新聞

網頁設計常見表現手法

2019-11-26


網頁設計常見表現手法


       不是什么新東西,也沒那么好為人師,最初本來就是寫給非設計部門的同事讓他們稍微了解。后期傳上來考慮受眾不同,更換了表述


這些理論很多大神都有分享過,只不過我是新瓶裝舊酒,多包裝了一下,加入了一些新的案例和自己的見解而已。水平有限,不代表就是真理。有什么不妥地方,也可以指出多探討。


193c585c794ba8012060c83e720d.jpg


設計的理論有很多,這只是其中個人覺得基礎中的基礎,最有代表性的四條而已,并未有以偏概全的意思,設計之域,豈可寥寥概括。未來,有機會我再進行補充與延展。
一,設計常見手法之對比

木有對比就木有傷害,木見過大海,不知海之闊,未見過蒼穹,不知空之廣。沒見過其他人做得好的,不知道自己做得有多齪……
對比作為設計最常見的手法,(本PPT也有用到)其實用性是很強的。
因為篇幅有限,(PS:飛來一腳把我踹飛:明明是你懶編不下去好么)暫且只描述下字體。
以下啪啦啪啦省略五千字……看圖就好
好了,我們繼續下個……

網頁設計,德陽網站優化德陽網站建設德陽網絡推廣德陽微信營銷德陽小程序開發

網頁設計,德陽網站優化,德陽網站建設,德陽網絡推廣, 德陽微信營銷,德陽小程序開發

網頁設計,德陽網站優化,德陽網站建設,德陽網絡推廣, 德陽微信營銷,德陽小程序開發

網頁設計,德陽網站優化,德陽網站建設,德陽網絡推廣, 德陽微信營銷,德陽小程序開發

什么!內誰說的只看圖看不懂的……
一定要我解釋么。。。
其實字體粗細對比太常見了。設計就是規則中加入一點變化,無非就只注意的一點是,若是要某段話有粗細對比,最恰當的手法還是使用同一種字體的粗細效果,但一般中文字體較少,英文的Amsipro,nexa(ps:我會告訴你這個就是ppt用的英文字體么),Zona Pro,Gotham就擁有2種或以上的不同效果。大標題我們為了顯眼通常都是加粗使用,小部分描述才使用纖細的。
這樣即保持字體上的統一,減少多余元素,又讓字體不至于太平淡缺乏變化。這樣看起來才更像是相親相愛的一家人……
另外,也不僅僅是只有字體才有大小對比,網頁上各個元素之間,也存在大小的對比,對比越夸張越強烈。其效果……嗯,這又是一個另外的故事了。
關于字型對比,其實這個也沒什么好說的,主要是在于不同場合怎么去使用這些不同的字體。
偏文藝范的畫面(明信片,攝影集排版組合)用手寫體, 各類電子產品(包含手機)適合標題用纖細字體,若是化妝品,婚紗影樓,女性用品一類的就是襯線體,中國風的,游戲專題,要做出氣勢的就是毛筆字體,嬰童少兒相關的才用到圓角字體(因為小孩子容易受傷神馬的,所以一切玩具和小孩子用的東西大多都是塑料的,圓圓鈍鈍的,所以引申到設計表現形式上,也是相應的感覺)
關于字體的疏密,其實是最不好拿捏的一環了, 大品牌官方banner上常有,如果沒有拉開距離有留白,整張圖都失去尿性。
但其實大眾能接受并且看得更多的還是相對緊密點的字體。為什么?很簡單,因為通常非高端品牌,給過來的slogan就沒有一個不是文字多且密集的。
在這種情況下。。。你拉開個毛線的距離……你以為人人都有這文采能想出簡短干練,而又讓人印象深刻的廣告語啊!
說的就是你,來自25世紀顛覆人類思想升華人類靈魂堪稱千年難得一現道德楷模精神品質規范并且技巧已入臻境的偉大設計師某某。
關于色彩,其實還是秉承設計的原理就是簡潔而不簡單,要和整體更加和諧搭配,同時顯簡潔的同時,還能讓人感覺有細節。你可以看到我選取的這個例子中,標題的顏色,裝飾的彩帶,頁面的logo和某個文字都是同樣的色系。增加了畫面色彩不單調的同時,其又統一簡練。
關于方向,在設計過程中,你要做這個效果不僅僅是因為看到其他人的作品里用過這樣的豎排形式覺得好看才使用,更多是為了讓你的構圖更加和諧恰當,可以看到左側就是一個豎長的衣架效果。在這種情況下,設計師才想到用豎排的效果去填補右側的空間。
當有一天,你能為你任意某一處細節的設計都找到一個合理的解釋的時候,你的設計才算真正入門。

二,設計常見手法之重復

高手是怎么來的?把一件事情重復一萬遍就好了。
一口氣吃不成一個胖子,黃裳就算發明練成九陰神功,等到天下無敵也要在山洞里修煉個幾十年不是? 
重復不僅僅是一個手法更多是一種精神。反復去推敲,反復去打磨,反反復復去調整直至更好一點點。下圖你看人家手法是很簡單,看一眼就懂個大概,一個形式左邊右邊重復去使用,一個在左邊一個在右邊。但是要把細節做到這樣的程度。其實更多是在電腦屏幕面前反復修改的效果。 
我們看到的很多成套系的廣告,也大部分都是一個idea換一個不同人物或者場景或文案去進行合成不同畫面 。


其中最經典的也是點線面的重復(形狀版式的重復之前有講述過,這次就不復述了)網頁設計,德陽網站優化,德陽網站建設,德陽網絡推廣, 德陽微信營銷,德陽小程序開發

點的重復常見于自然界當中,在設計手法中,除了下圖的制作成背景,也有作為頁面上一些風沙,雨雪,飄飛,火花去增加畫面中的細節和質感。很多抽絲的效果也是可以通過在圖案里設置小點而制作出來,這也是很多點重復的效果。網頁設計,德陽網站優化,德陽網站建設,德陽網絡推廣, 德陽微信營銷,德陽小程序開發

線在設計中大部分是以圖案底紋而存在,VI整套設計當中,一個有逼格的由幾條線組成的圖形+背景色,就足以撐起整個設計的氣場。網頁設計,德陽網站優化,德陽網站建設,德陽網絡推廣, 德陽微信營銷,德陽小程序開發

點和線集合重復起來,都可以構成面。狹義中的點線面是我們所看到的這些圖案,線條,但廣義的點線面可以引申到一個畫面中的方方面面。網頁設計,德陽網站優化,德陽網站建設,德陽網絡推廣, 德陽微信營銷,德陽小程序開發

以下圖片最基本的構成就是點線面,但卻是幾個基礎元素不同形式的反復使用與演變。但這個功夫是我沒辦法總結出規律來的……你知道原理和執行做出來是兩回事,要耍出來是真要有藝術細胞和突出起來的靈感的……在這個領域我做出來的點線面設計相對而言是比較初級的效果。所以只能初略提提,還望諒解。

網頁設計,德陽網站優化,德陽網站建設,德陽網絡推廣, 德陽微信營銷,德陽小程序開發

62a6585be215a8012060c83e3691.jpg

在設計常見手法當中,其實最值得一提的就是排列,這也是大部分非科班設計不多能把控了解理論后只要花點時間就能輕松掌握的了。

關于字體的排列也是老生常談了。但不可否認,凡是出色的設計,在這個最基礎的運用過程中,幾乎不會出錯。
只是文字越多的情況越考驗一個設計師的文字駕馭能力。當你不會排版的時候,把所有東西都規規矩矩排列在這或左或中或右幾個位置而不去想著做多少標新立異的排版總不會錯。雖然原理是簡單了點,但是實際要能做到能hold住這么多元素并且做大氣也是不簡單的事情。

網頁設計,德陽網站優化,德陽網站建設,德陽網絡推廣, 德陽微信營銷,德陽小程序開發

網頁設計,德陽網站優化,德陽網站建設,德陽網絡推廣, 德陽微信營銷,德陽小程序開發

當你自覺已經超脫常規排版的限制,也不妨試試這樣的。
1.把文字圖像圖形化,如左圖一,感覺像碗里飄出來的煙氣
2.讓文字沿著某個畫面邊緣輪廓排列,如左下圖
3.讓文字形成傾斜角度,如中間圖
4.讓文字形成3D立體效果排列,如右下圖

說到排列,就不得不提起柵格,這里有兩種形式,當你要做圖像之間有間隙的設計就類似左圖,留下中間隔開圖片的空間,若是不需要,其實是可以更為簡化形成更簡單的柵格。具體內容因為很久前已經提到過就不詳敘了。

 uehtml就是柵格化設計后的效果,網頁中的板塊設置都是經過計算后的整數。一般柵格多用于平臺型網站,或者需要自適應效果的頁面。

在合成圖當中,畫面中每一個合成的元素的位置也其實是根據現實中真實的方位來進行排列的。比例都是正常的比例,畫面中的有些元素稍微做過了,或者位置不對,其實都會或多或少讓人感覺不自然。
但其實這也是很多設計師剛開始接觸設計一兩年常做不到位的地方,抓不準正確的位置與角度。具體怎么做到。。。不用問我,問杰克……

好了,以上講了很多大路貨,接下來說點特別的。
設計常見手法之親近
其實很多設計并非你表面上看到的那樣簡單,之所以呈現在你的視角里是自然而然的,其中和設計師對規則的掌握密不可分。 
有時候,要做出好設計全憑的就是一種習慣。強制性讓自己去做符合這些規則的設計。
不僅要靠平時大量去看去收藏好的東西,去實踐去利用,日積月累。自己也要懂得去分析去判斷。他人的哪里有亮點,好,好在哪里,不足之處又在哪里,多思考多總結。
在下圖的設計中,作圖如博弈,高手落子,一筆一畫都是蘊藏著這些規律的。當然,并非說不能做出突破,超越常規的東西。但在與很多人還未到能沉淀到能獨創出處于自己的大招的地步。那么所做的東西其實都是略散,缺乏完整度的,那還不如一般的套路。
但你看人家無論是左側排也好右側排也好,一樣玩很6,你說他難道就不是創新?難到就做得不好?只是他把一個簡單的原理做到了。
當你察覺到這些設計背后的東西,那可能就是你設計之路新的開始。
親近從字面上的意思非常好理解,兩個人興趣愛好相同,喜歡的東西差不多,有很多東西不謀而合比較接近,雖然距離遙遠,雖然從前形同陌路,但如今卻一見如故,這就是親近的感覺。
因為類似,因為志同道合,所以不論天涯海角,都有著似有似無的聯系,如那天上的風箏,不管飛多高,那手中都有一根線在牽引。如那花果山的孫猴子,不論你怎么上床下跳,都逃不出如來佛祖的手心。
當你理解了這一步,不是你去進行設計,而是不知不覺有個東西在牽引著你,呼喚著你,你會發現,原來最正確最恰當的那條路,就在那里,就看你來得早,還是來得遲。所謂文章本天成,妙手偶得之。就是如此。

很多人都知道扁平化的好,都接觸過扁平化的設計。
但其實所有扁平化設計都建立在一個基礎之上,若是缺乏這個基礎,盲目去做,那效果~
喜愛扁平化設計的你,可曾問過自己,你的圖標都是統一像素的么?
你對字體的選用,大小間距的把控都到位了么?
你選用的圖片能支撐起整個畫面么?能讓你的設計更加有亮點還是因為過于放大暴露出更多不足?你的排版布局是具有創造力的還是規整的?
是的,扁平化設計不需要你做太多的光效質感,但是更需要你在其他細節上下功夫。
如下圖,
看上去舒適美觀的背后,是對圖片色彩的嚴格把控。每一個板塊,你都能從下一個板塊找到相對應的色彩。
例:屏男一身上的衣服與最下邊一屏的女子褲子色調般配,男一的褲子與中間一屏男二衣服顏色是般配的,同時也接近女子身上蓋的毯子的顏色。更不用提畫面中都是有顏色相接近的木質家具或地板。 
因為色彩,選圖的親近,讓你更容易感覺到這些都是一致的,是同一個品牌所傳遞的東西。因為減少了其他無關的色彩,只有在畫面中出現過的色彩,簡潔而不簡單的效果就這么出來了。

4d1b585c7962a801219c77e01ba2.jpg

這里我多說兩句。在國外,網頁設計是一整套系的設計思路的延展。在前期產品拍攝這個環節,大概就已經具備照片所要表達的風格與修圖后的色調了。(甚至攝影師的薪資,公司在攝影上的投入還超越設計)
在這樣的環境下交給設計制作才能一氣呵成。從制作的結果來看,其設計感與調性,品質感遠勝于國內大多數設計。
當然這也并非完全是技能不如。
在國內的話。。。客戶提供的圖片本身low或者根本就是各路攝影圖片的拼湊而并非一套系,在產品素材上并未花費多少錢。客戶寄希望于設計去解決這個素材不足的問題。
當然,我說的是大部分,現在部分電商商家已經重視起攝影這個環節了,但是更多的企業家卻不夠了解。
在這種情況下去做扁平……就像人家用飛機坦克你用彈弓。。。是有能用一些素材網上圖片來提升檔次的。。。但圖片效果的真實性與合理度嘛……所以你對設計的追求就只是把東西做得美不需要太貼切就好了么?
當然。能在一切限制條件下發揮出來把設計做好的,那是真愛。
上面幾張圖若是國外設計師,從攝影師給的素材庫里拖拖,稍微修下就好了。而國內設計要做接近的效果。就這3張圖,要色調一致,都是差不多人物膚質的,服裝也接近的效果,一天還未必能找到。 (當然,只限于有追求的,普通設計不會想幾張選圖我還搞這么嚴密,有病)所以,人家花費一天時間鍛煉到的“設計”的技巧,可能你要近2天時間。(因為大半天花費在找圖上了)
回到正題,除了色彩之外,最常見的還是各個元素,位置之間的親近。設計的有趣之處就在于此。你設定了很多小的東西,很多人看不大出,等到揭曉答案的環節,才有人恍然大悟,原來如此。當你看到以下兩個例子的時候,你看著排得很大氣,但是你知道是怎么才能排出來的么?

網頁設計,德陽網站優化,德陽網站建設,德陽網絡推廣, 德陽微信營銷,德陽小程序開發

ad70585cd66ca801219c77efd132.jpg

再來一個更加貼近網頁的案例吧。來自內啥……然后你會感慨,尼瑪,這滿滿都是套路丫。。。當然,要你去原創,你確定你行?因為設計這門學問,不止我今天講述的這些,除了以上這些定律外,作品的高度,是無數個因素成就的結果。并非你單獨掌控某一種定律就能完全做出來的。如果沒有遠超你動手能力的審美水平,沒有日積月累培養起來的設計意識,沒有對圖片素材的嚴格挑選,不選到適合的圖片不罷手的精神,對細節的執著追求,沒有大毅力,沒有夢想,我今天說再多的規則,就算你能理解,也是做不出來這樣的設計來的。

最后這個算是我給內部同事的作業。聽完我以上的分析,再來看看下圖,你能找到它其中用了我今天說的多少種手法么?它們又是在哪里呢?


END

其實一直想做這么一件事情,就是將設計語言平實化,通俗化,推廣傳播給普通人,消除與客戶之間的代溝。也為自己未來做設計使用的一些手法提供依據。因為大部分自己一直都在用,真的不想一遍又一遍去向客戶去解釋,我為什么要這樣去設計。
希望每個人也不要都小瞧了這些最基礎的定律, 知道容易,行很難。有多少人還停留在知道,但是沒養成習慣,總是做不到位的程度呢?
其實就拿我來說,也是總戒不掉少用一些字體。因為感覺都好的情況下難取舍。所以共勉之。


標簽

下一篇:了解5種常見UI導航設計2019-11-26

最近瀏覽:

急速赛车在线观看