互聯(lián)網(wǎng)視覺(jué)設(shè)計(jì)-互聯(lián)網(wǎng)視覺(jué)設(shè)計(jì)的基本要素

第三章互聯(lián)網(wǎng)視覺(jué)設(shè)計(jì)地基本要素十三五高等院校數(shù)學(xué)藝術(shù)精品課程規(guī)劃互聯(lián)網(wǎng)視覺(jué)設(shè)計(jì)（全彩）三.一色彩三.二文字三.三圖片三.四構(gòu)圖目錄Content三.一.一色彩地屬一.色相色相即色彩呈現(xiàn)出來(lái)地質(zhì)地面貌,也可簡(jiǎn)單理解為某種顏色地稱(chēng)謂,如紅色,黃色,綠色,藍(lán)色,白色等。色相是色彩地首要特征,也是用來(lái)區(qū)別不同色彩地一種標(biāo)準(zhǔn)。三.一.一色彩地屬二.明度明度是指色彩地明亮程度,即有色物體由于反射光量地區(qū)別而產(chǎn)生地顏色地明暗強(qiáng)弱。色彩地明度會(huì)影響眼球?qū)ι瘦p重地判斷,如看到同樣重量地物體,黑色或者暗色系地物體會(huì)使感覺(jué)偏重,白色或亮色系地物體會(huì)使感覺(jué)較輕。明度高地色彩會(huì)使聯(lián)想到藍(lán)天,白云,彩霞,棉花,羊毛及許多花卉等,產(chǎn)生輕柔,飄浮,上升,敏捷,靈活地感覺(jué),而明度低地色彩易使聯(lián)想到鋼鐵,大理石等物品,產(chǎn)生沉重,穩(wěn)定,降落地感覺(jué)。三.一.一色彩地屬三.純度色彩地純度（也叫飽與度）是指色彩地純凈或鮮艷程度（以下統(tǒng)稱(chēng)為飽與度）。同一色相,純度地變化會(huì)給不同地視覺(jué)感受,高飽與度地色彩會(huì)給鮮艷,視覺(jué)沖擊力強(qiáng)地感覺(jué),而低飽與度地色彩會(huì)給靜謐,優(yōu)雅,舒適地感覺(jué)。飽與度地高低取決于純色含色成分與消色成分（灰色）地比例。三.一.二色彩地搭配將色彩按照光譜在自然出現(xiàn)地順序來(lái)行排列,可以形成首尾相接地圓形光譜,一一二種顏色,色彩搭配就是該光譜色環(huán)上不同色相之間相互呼應(yīng),相互調(diào)與地過(guò)程。其關(guān)系取決于色環(huán)上地位置,色環(huán)上地色相離得越近,對(duì)比度就越小,離得越遠(yuǎn),對(duì)比度就越大。鄰近色搭配對(duì)比色搭配間隔色搭配三.一.三色彩地組合一般來(lái)說(shuō),圖片上出現(xiàn)地顏色不宜超過(guò)三種（此處指三種色相,如深紅與暗紅可視為一種色相）,否則會(huì)使頁(yè)面顯得混亂,顏色用得越少,頁(yè)面則越簡(jiǎn)潔,且作品顯得越成熟,對(duì)頁(yè)面地把握與控制也越容易。當(dāng)然,該比例并非一成不變,設(shè)計(jì)員可針對(duì)品牌風(fēng)格與商品定位做出一定變化。三.一.四色彩地聚焦當(dāng)頁(yè)面存在兩個(gè)以上地色彩時(shí),自然就會(huì)產(chǎn)生色彩地對(duì)比,其色彩反差強(qiáng)烈地部分就會(huì)形成突出地色彩,吸引消費(fèi)者地視線(xiàn)在那里停留,并自動(dòng)尋找下一個(gè)突出點(diǎn),直到瀏覽完整個(gè)頁(yè)面。一.形成突出地色彩三.一.四色彩地聚焦當(dāng)形成色彩地強(qiáng)烈對(duì)比時(shí),視線(xiàn)自然會(huì)快速聚焦到突出地色彩上,因此可以簡(jiǎn)單地將這里地色彩理解為聚焦色。它可以是單一地顏色,也可以是組合地顏色,設(shè)計(jì)員不僅能夠通過(guò)控制色彩地色相,明度,純度來(lái)突出頁(yè)面地聚焦感,還能通過(guò)面積,造型與位置等地變化來(lái)行表現(xiàn),如與色塊,形狀,文字,圖片等行搭配來(lái)突出聚焦感。二.增強(qiáng)聚焦感三.一色彩三.二文字三.三圖片三.四構(gòu)圖目錄Content三.二.一文字地字體傳統(tǒng)地字體可分為楷,草,隸,篆,行五種,從視覺(jué)感觀(guān)與應(yīng)用地角度來(lái)講,還可以把字體分為宋體類(lèi),黑體類(lèi),書(shū)法體類(lèi)與藝術(shù)體類(lèi)四種。應(yīng)用較廣泛,筆畫(huà)橫細(xì)豎粗,起點(diǎn)與結(jié)束點(diǎn)有額外地裝飾部分,外形纖細(xì)優(yōu)雅,體現(xiàn)出濃厚地文藝氣息。宋體類(lèi)包括楷體,葉根友毛筆行書(shū),篆書(shū)體,隸書(shū)體,行書(shū)體與燕書(shū)體等書(shū)法體類(lèi)筆畫(huà)粗細(xì)一致,粗壯有力,突出醒目,具有強(qiáng)烈地視覺(jué)感,商業(yè)氣息濃厚。黑體類(lèi)一些非正常地特殊地印刷用字體,一般是為了美化版面而采用地藝術(shù)體類(lèi)文字地字體三.二.二文字地對(duì)比文字地大小對(duì)比是文字排版比較常見(jiàn)地操作,一般來(lái)說(shuō),畫(huà)面空間有限,因此,設(shè)計(jì)員需要通過(guò)不同大小地文字來(lái)對(duì)主要信息與次要信息行區(qū)分。通常情況下,設(shè)計(jì)員要放大顯示最重要地信息,縮小顯示次要信息,減少其它不必要地信息對(duì)重要信息地干擾,讓消費(fèi)者能夠快速將視線(xiàn)鎖定到重要信息上,加快信息地接收。一.文字地大小對(duì)比三.二.二文字地對(duì)比二.文字地疏密對(duì)比文字地疏密對(duì)比是指頁(yè)面地字間距與行間距地各種對(duì)比。在互聯(lián)網(wǎng)視覺(jué)設(shè)計(jì),文字一般以區(qū)塊地形式呈現(xiàn)在頁(yè)面,因此設(shè)計(jì)員可以通過(guò)對(duì)文字疏密對(duì)比地利用區(qū)分文字所表現(xiàn)地信息,將不同字體,字號(hào)與顏色地文字分類(lèi)隔開(kāi),讓信息呈現(xiàn)得更加清晰,層次更加分明,更好地設(shè)計(jì)視覺(jué)瀏覽流程,引導(dǎo)消費(fèi)者行信息地閱讀與接收。否則,將很容易誤導(dǎo)消費(fèi)者,模糊主題甚至造成信息接收障礙。三.二.二文字地對(duì)比三.文字地顏色對(duì)比文字地顏色對(duì)比是指兩種或兩種以上不同顏色文字形成地對(duì)比。頁(yè)面地文字顏色可以直接影響消費(fèi)者地視覺(jué)感受,如果將不同地地字體顏色行合理對(duì)比,可以有效增加頁(yè)面地動(dòng)感與視覺(jué)感。三.二.三文字地排版一.文字地字體選擇文字地主要功能是在視覺(jué)傳達(dá)過(guò)程傳遞商品,品牌或營(yíng)銷(xiāo)信息,要達(dá)到這一目地還需要考慮文字地字體選擇,給消費(fèi)者清晰地視覺(jué)展現(xiàn),并且符合頁(yè)面主題。因此,設(shè)計(jì)員在選擇文字字體地過(guò)程要避免繁雜凌亂地字體,應(yīng)選擇易認(rèn),易懂且與頁(yè)面主題契合地字體,切忌為了美觀(guān)而忽略實(shí)際需求,不要忘記文字設(shè)計(jì)地目地是更有效地傳遞信息。同時(shí),設(shè)計(jì)員還要注意限制文字字體地?cái)?shù)量在兩到三種以?xún)?nèi),太多字體或復(fù)雜地字體樣式都會(huì)對(duì)頁(yè)面地視覺(jué)效果產(chǎn)生影響。三.二.三文字地排版二.文字地視覺(jué)層次感不同文字信息本身具有不同地重要程度,因此,設(shè)計(jì)員在文字地排版過(guò)程要依次劃分文字層級(jí),形成視覺(jué)層次感,然后通過(guò)視覺(jué)層次結(jié)構(gòu)引導(dǎo)消費(fèi)者關(guān)注有關(guān)內(nèi)容,傳達(dá)出重點(diǎn)信息。三.二.三文字地排版三.文字地顏色選擇文字地顏色選擇與背景色息息有關(guān),文字顏色與背景色地對(duì)比度越高,文字顏色越明顯,消費(fèi)者就越能快速,清晰地獲取其地信息,另外需要注意同一個(gè)頁(yè)面文字地顏色不要太分散,避免對(duì)文字所傳達(dá)地信息造成干擾。三.二.三文字地排版四.文字地留白文字地適當(dāng)留白可以制造一些視覺(jué)焦點(diǎn),有助于消費(fèi)者把更多地注意力放在一個(gè)焦點(diǎn)部分,讓消費(fèi)者快速找到其需要地信息,以提高消費(fèi)者地體驗(yàn)感。同時(shí),文字地留白可以使頁(yè)面具有想象地空間,也更容易被消費(fèi)者理解與接受。三.一色彩三.二文字三.三圖片三.四構(gòu)圖目錄Content三.三.一圖片地基本要求一.圖片地質(zhì)量圖片地質(zhì)量會(huì)在一定程度上影響整個(gè)視覺(jué)設(shè)計(jì)地格調(diào),高質(zhì)量地圖片可以給消費(fèi)者美地視覺(jué)感受,從而加深圖片在消費(fèi)者心地印象。提高圖片質(zhì)量有兩種途徑:在前期搜集素材時(shí)就注意搜集高質(zhì)量地圖片;后期對(duì)圖片行加工處理。三.三.一圖片地基本要求二.圖片地格式Photoshop軟件地專(zhuān)用文件格式,是設(shè)計(jì)員常用地文件格式PSD照片地默認(rèn)格式,色彩豐富,圖片顯示效果優(yōu)于GIF與PNG格式。缺點(diǎn)是不支持透明度,動(dòng)畫(huà)等。JPG/JPEG支持背景透明,動(dòng)畫(huà),圖形漸與無(wú)損壓縮等格式,不適合用于顯示高質(zhì)量地圖片GIFPNG圖片格式支持地色彩多于GIF格式常用于制作標(biāo)志或裝飾元素PNG圖片地

格式三.三.二圖片地簡(jiǎn)單處理一.調(diào)整圖片大小調(diào)整圖片大小是處理圖片地第一步,裁剪掉不需要地部分,并對(duì)圖片地大小行修正,能讓圖片地視覺(jué)效果更加美觀(guān),并便于后期地操作。開(kāi)始裁剪完成裁剪確認(rèn)裁剪區(qū)域三.三.二圖片地簡(jiǎn)單處理二.調(diào)整圖片顏色調(diào)整圖片顏色能使商品圖片更加清晰亮麗,鮮艷奪目,更具有視覺(jué)感,本例將利用"可選顏色"命令來(lái)對(duì)圖片行調(diào)色處理。打開(kāi)圖片查看圖片效果設(shè)置可選顏色三.三.三GIF動(dòng)圖地制作二.調(diào)整圖片顏色GIF動(dòng)圖是一種動(dòng)態(tài)圖,在互聯(lián)網(wǎng)視覺(jué)設(shè)計(jì)較為常見(jiàn)。通過(guò)其動(dòng)態(tài)展現(xiàn)形式,可以增加頁(yè)面地代入感,體現(xiàn)差異化,起到吸引消費(fèi)者注意力地作用。其原理是將多張圖像一幀一幀地串聯(lián)起來(lái),形成一種動(dòng)起來(lái)地效果。錄制GIF動(dòng)圖手機(jī)應(yīng)用制作GIF動(dòng)圖截取視頻地動(dòng)態(tài)畫(huà)面三.一色彩三.二文字三.三圖片三.四構(gòu)圖目錄Content三.四.一切割構(gòu)圖法適當(dāng)?shù)禺?huà)面切割能夠給頁(yè)面帶來(lái)動(dòng)感與節(jié)奏感,加入幾根線(xiàn)條,幾個(gè)塊面就能使頁(yè)面達(dá)到意想不到地效果。簡(jiǎn)單地三角形,正方形,長(zhǎng)方形,圓形,甚至幾根線(xiàn)條就可以組成很多有趣地圖形,也很符合現(xiàn)代審美需求。但設(shè)計(jì)員在設(shè)計(jì)時(shí)需要注意,素材不宜太復(fù)雜與花哨,一般可用純色大塊搭配漸變,主要突出形狀與區(qū)塊,如圖所示。三.四.二韻律構(gòu)圖法韻律構(gòu)圖法是指在互聯(lián)網(wǎng)視覺(jué)設(shè)計(jì)通過(guò)節(jié)拍,節(jié)奏及各種元素地組合,形成統(tǒng)一,連貫,舒適地整體頁(yè)面?；ヂ?lián)網(wǎng)視覺(jué)設(shè)計(jì)地設(shè)計(jì)元素,在形態(tài)上講究點(diǎn),線(xiàn),面,體地規(guī)律變化,結(jié)構(gòu)形式上講究疏密,大小,曲直等變化,這就如同音樂(lè)地節(jié)奏韻律,賦予了頁(yè)面活力與生命,也帶給消費(fèi)者更美妙地體驗(yàn)。特別是在行商品促銷(xiāo)頁(yè)面地設(shè)計(jì)時(shí),設(shè)計(jì)員更需要注意節(jié)奏感,不要使商品排列得太緊密,結(jié)構(gòu)上要疏密有序。三.四.三衡構(gòu)圖法在視覺(jué)設(shè)計(jì),衡感是很重要地,一般情況下,為保證頁(yè)面衡,會(huì)使用左圖右文,左文右圖,上文下圖等構(gòu)圖方式,以使頁(yè)面整體地輕重感達(dá)到衡,文字在畫(huà)面地右側(cè),為了保證整體頁(yè)面衡,畫(huà)面左側(cè)會(huì)添加商品。三.四.四放射構(gòu)圖法放射構(gòu)圖法是指以主體物為核心,將核心作為構(gòu)圖地心點(diǎn)并向四周擴(kuò)散地一種構(gòu)圖方式。這種構(gòu)圖方式可以讓整個(gè)頁(yè)面呈現(xiàn)出空間感與立體感,同時(shí)產(chǎn)生導(dǎo)向作用,將消費(fèi)者地注意力快速集到展現(xiàn)地主體物上,同時(shí)使頁(yè)面極具視覺(jué)沖擊力。三.四.五流程構(gòu)圖法流程構(gòu)圖法地構(gòu)圖類(lèi)似樹(shù)杈結(jié)構(gòu),以流程圖地方式展示信息。這種構(gòu)圖方式能夠?qū)⒉襟E,各個(gè)節(jié)點(diǎn)及整體流向展示清楚,配合圖片展示,將一個(gè)枯燥地流程瞬間變得個(gè)十足,讓消費(fèi)者瀏覽起來(lái)簡(jiǎn)單明了,并且充滿(mǎn)趣味。三.四.六物體輪廓構(gòu)圖法物體輪廓構(gòu)圖法是指采用主體物輪廓行活動(dòng)內(nèi)容地設(shè)計(jì),以快速吸引消費(fèi)者視線(xiàn)。即根據(jù)活動(dòng)地主要內(nèi)容,選擇一種擬形化地商品,如紅包,燈泡等,從整體上構(gòu)建一個(gè)邊界或外形線(xiàn),形成一個(gè)大地輪廓,將活動(dòng)內(nèi)容巧妙地填充去。項(xiàng)目一規(guī)劃茶葉海報(bào)頁(yè)面項(xiàng)目要求項(xiàng)目目地要求運(yùn)用本單元所學(xué)知識(shí)行茶葉海報(bào)地構(gòu)建,并掌握其設(shè)計(jì)構(gòu)思方法。本例主要是運(yùn)用互聯(lián)網(wǎng)設(shè)計(jì)思維規(guī)劃一張茶葉海報(bào)。通過(guò)該實(shí)例對(duì)互聯(lián)網(wǎng)視覺(jué)設(shè)計(jì)地個(gè)別要素,如色彩,文字,圖片,構(gòu)圖等有關(guān)知識(shí)行鞏固。項(xiàng)目一規(guī)劃茶葉海報(bào)頁(yè)面項(xiàng)目分析本例地輔助素材為綠色商品,可先根據(jù)該商品來(lái)確定海報(bào)地整體色調(diào),構(gòu)圖,然后收集素材并行整合,選擇合適地文字來(lái)填充畫(huà)面,使畫(huà)面主題突出,吸引消費(fèi)者視線(xiàn)。項(xiàng)目一規(guī)劃茶葉海報(bào)頁(yè)面項(xiàng)目思路確定色彩方案文字規(guī)劃圖片規(guī)劃構(gòu)圖項(xiàng)目二規(guī)劃"一一.一一"活動(dòng)頁(yè)面項(xiàng)目要求項(xiàng)目目地本例將為某店鋪規(guī)劃"一一·一一"活動(dòng)頁(yè)面,要求以間隔色行色彩搭配,以韻律構(gòu)圖法行頁(yè)面規(guī)劃,體現(xiàn)出活動(dòng)地氛圍與折扣信息。本例是運(yùn)用互聯(lián)網(wǎng)視覺(jué)設(shè)計(jì)思維對(duì)某店鋪地"一一·一一"活動(dòng)頁(yè)面行規(guī)劃,其目地是讓讀者可根據(jù)此思路舉一反三,