網(wǎng)頁設(shè)計(jì),簡(jiǎn)約風(fēng)格網(wǎng)頁設(shè)計(jì)的小技巧!

來源:tgideas.qq 作者:莫 學(xué)習(xí):3388人次

隨著網(wǎng)頁技術(shù)的不斷發(fā)展,網(wǎng)頁設(shè)計(jì)的趨勢(shì)在改變,扁平化、響應(yīng)式、視覺差滾動(dòng)、卡片式等給設(shè)計(jì)師帶來了更多的發(fā)揮空間。簡(jiǎn)約的設(shè)計(jì),也以其簡(jiǎn)潔直觀、輕薄美觀等特點(diǎn),越來越受到設(shè)計(jì)師的追捧和大眾的喜愛。

那么什么是簡(jiǎn)約設(shè)計(jì)?

簡(jiǎn)約設(shè)計(jì)是將設(shè)計(jì)回歸本質(zhì)的一種設(shè)計(jì)理念。簡(jiǎn)約并是對(duì)內(nèi)容的簡(jiǎn)單刪減,而是提煉設(shè)計(jì)精華,滿足美觀實(shí)用的本質(zhì)訴求。在網(wǎng)頁中,簡(jiǎn)約的設(shè)計(jì),往往具清晰的頁面結(jié)構(gòu)、簡(jiǎn)單的交互操作等特征,在滿足傳遞信息的同時(shí),從視覺體驗(yàn)的角度,為用戶帶來輕松、愉悅的美感。

那么在網(wǎng)頁中,怎樣做到簡(jiǎn)約呢?

下面是一些最常見的方式:

一、大標(biāo)題

將大標(biāo)題作為網(wǎng)頁的視覺中心,簡(jiǎn)潔圖片作為大標(biāo)題的背景,這樣很容易將視覺聚焦,讓人一眼就能看出這個(gè)網(wǎng)頁是做什么的。另外,大標(biāo)題在字體和色彩上,也盡量選擇一些簡(jiǎn)單的、顏色單一的效果,這樣視覺會(huì)更純粹。

例如:“最職業(yè)DNF”主題站,為打造最具豐富并個(gè)性差異職業(yè)體系,采用精致的大標(biāo)題設(shè)計(jì),結(jié)合簡(jiǎn)單的背景,重點(diǎn)突出又不失美觀。

DNF.QQ

網(wǎng)頁設(shè)計(jì),簡(jiǎn)約風(fēng)格網(wǎng)頁設(shè)計(jì)的小技巧!

例如:Nike為打造舒適的購物體驗(yàn),每一頁用簡(jiǎn)單的大標(biāo)題和背景相結(jié)合,讓女人能很輕松的找到她們的SIZE,即簡(jiǎn)潔又直白;

NIKE

網(wǎng)頁設(shè)計(jì),簡(jiǎn)約風(fēng)格網(wǎng)頁設(shè)計(jì)的小技巧!

二、大背景

大圖片背景,是目前應(yīng)用最多的一種網(wǎng)頁呈現(xiàn)方式。將整張大圖片作為背景,不僅能產(chǎn)生強(qiáng)烈的視覺沖擊力,還可以對(duì)網(wǎng)頁內(nèi)容起到一個(gè)很好的補(bǔ)充,有效的突出品牌形象。

例如:QQ飛車“夢(mèng)想再出發(fā)“預(yù)熱站,將大背景鋪滿整個(gè)頁面,每個(gè)畫面都含不同的寓意,增加了游戲的代入感,給人輕松、愉悅的感覺。

Speed

網(wǎng)頁設(shè)計(jì),簡(jiǎn)約風(fēng)格網(wǎng)頁設(shè)計(jì)的小技巧!

例如,Quechua山地運(yùn)動(dòng)品牌,通過幾張照片和簡(jiǎn)單文字的說明,將Quechua帳篷的特點(diǎn)及所處環(huán)境真實(shí)體現(xiàn),仿佛一場(chǎng)美妙之旅讓人心動(dòng)。

Quechua

網(wǎng)頁設(shè)計(jì),簡(jiǎn)約風(fēng)格網(wǎng)頁設(shè)計(jì)的小技巧!

三、留白

留白,是頁面構(gòu)圖的重要組成部分,適當(dāng)?shù)募尤肓舭,能讓文字便于閱讀,讓頁面各元素得到很好的區(qū)分,這樣的設(shè)計(jì)通俗易懂,有得于提升一個(gè)頁面的品質(zhì)感。

例如:“獸人必須死”首發(fā)引導(dǎo)頁面,周圍大面積留白,并結(jié)合簡(jiǎn)潔的排版,讓頁面模塊之間區(qū)分明顯,視覺集中,很好的給用戶引導(dǎo),給人一種精致和輕松感。

網(wǎng)頁設(shè)計(jì),簡(jiǎn)約風(fēng)格網(wǎng)頁設(shè)計(jì)的小技巧!

例如:BRAUN博朗,整個(gè)頁面,簡(jiǎn)潔的圖片與文字的排版,讓視線非常集中,這樣用戶快速的將注意力集中到內(nèi)容上去,非常符合他們的主題“Less,but better”,給人留下回味、想象的空間。

網(wǎng)頁設(shè)計(jì),簡(jiǎn)約風(fēng)格網(wǎng)頁設(shè)計(jì)的小技巧!

四、單純色彩

一個(gè)頁面,給人帶來第一印象的往往是它的色彩。不同的顏色帶給人不同的心理感受。當(dāng)我們看慣色彩絢麗、對(duì)比鮮明的網(wǎng)頁之后,靜下來,回歸最自然的狀態(tài),運(yùn)用單純的色彩,會(huì)有不一樣的體會(huì)和感悟。

如:刀鋒鐵騎品牌站,采用黑金兩色,將這款冷戰(zhàn)爭(zhēng)網(wǎng)游,用最簡(jiǎn)單的方式表現(xiàn)最純粹的視覺,更加有感染力。

T7

網(wǎng)頁設(shè)計(jì),簡(jiǎn)約風(fēng)格網(wǎng)頁設(shè)計(jì)的小技巧!

例如:LINCOLN電影網(wǎng)站,運(yùn)用最常用的黑白兩種顏色搭配,讓網(wǎng)頁如此簡(jiǎn)約大方,給人留下無限想象空間。

Thelincolnmovie

網(wǎng)頁設(shè)計(jì),簡(jiǎn)約風(fēng)格網(wǎng)頁設(shè)計(jì)的小技巧!

五、“纖薄”文本框和銨鈕

在頁面中,將文本框或者銨鈕做得輕薄簡(jiǎn)潔,或?yàn)榧兩蛘邲]有紋理的一層薄線框。這種設(shè)計(jì)在確保功能性的同時(shí),給人一種纖細(xì)的視覺美感。

例如:“sylviaspitzbart”化妝工作室,利用纖細(xì)線框,將內(nèi)容很好的分割,頁面簡(jiǎn)潔而大方又不失品質(zhì)。

Sylviaspitzbart

網(wǎng)頁設(shè)計(jì),簡(jiǎn)約風(fēng)格網(wǎng)頁設(shè)計(jì)的小技巧!

網(wǎng)頁中的簡(jiǎn)約,表現(xiàn)形式還很多,通常多種結(jié)合起來使用,這里就不一一說明了。想要做到簡(jiǎn)約,也并不是一件簡(jiǎn)單的事情,它需要我們用心去發(fā)現(xiàn)、感受、割舍、提煉,從視覺體驗(yàn)的角度去感受網(wǎng)頁的簡(jiǎn)約之美,把信息更合理、有效的傳遞給用戶,給用戶帶來輕松、實(shí)用、愉悅的體驗(yàn)。

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
噢不2019-01-27 06:38
非常好
小螞蟻_Redmi 4X2018-06-11 09:03
32個(gè)贊
qq9297318122018-01-09 02:49
網(wǎng)友求助請(qǐng)回答
僾星願(yuàn)2017-05-28 09:08
好東西啊啊啊啊啊
霧軒琳琪2017-05-28 01:00
收益

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!