《UI視覺設(shè)計案例教程》PPT課件(共6章)第4章 網(wǎng)頁界面設(shè)計

第4章網(wǎng)頁界面設(shè)計Loremipsumdolorsitamet,consectetueradipiscingelit.AeneancommodoligulaegetdolorLoremipsumdolorsitametSummaryOfMacaronsColorMatchingWork章前導讀02

隨著互聯(lián)網(wǎng)的發(fā)展和普及，網(wǎng)絡(luò)已成為人們獲取信息的重要途徑，而網(wǎng)頁是直接向人們提供信息的新媒體，其界面設(shè)計的好壞也成為影響人們?yōu)g覽體驗的重要因素。

本章首先介紹網(wǎng)頁界面設(shè)計的基礎(chǔ)知識和設(shè)計規(guī)范，再實戰(zhàn)案例講解網(wǎng)頁界面的一般設(shè)計方法和技巧。學習目標ReviewOfWorkContent

·了解網(wǎng)頁界面的組成

·了解常見的網(wǎng)頁界面布局及版塊規(guī)劃技巧

·了解網(wǎng)頁界面設(shè)計的要點

·了解網(wǎng)頁界面設(shè)計的尺寸規(guī)范

·了解網(wǎng)頁界面設(shè)計中常用的字體和字號

·掌握網(wǎng)頁界面的一般制作方法4.2界面設(shè)計規(guī)范4.3案例實戰(zhàn)4.1基礎(chǔ)知識第4章網(wǎng)頁界面設(shè)計4.1基礎(chǔ)知識4.1.1網(wǎng)頁界面的組成

網(wǎng)頁界面一般由頁首、主體內(nèi)容和頁腳三部分組成（如圖所示），下面分別介紹。Logo導航欄Banner頁首主體內(nèi)容頁腳

位于網(wǎng)頁的頂部，由Logo和導航欄等組成，是網(wǎng)頁的重要功能區(qū)域，在整個網(wǎng)站中占重要地位。Logo是網(wǎng)站的標志，通常放在網(wǎng)站頁面的左上角，也可根據(jù)需要放在其他位置，如圖4-2所示。1．頁首圖4-2網(wǎng)站Logo2．主體內(nèi)容

網(wǎng)頁主體內(nèi)容主要由圖像和文字組成，圖像主要有網(wǎng)頁廣告、產(chǎn)品圖像、裝飾圖像、按鈕和圖標等，文字是網(wǎng)頁的主要內(nèi)容，可通過對文字的字體、字號、顏色、行距、對齊方式，底紋和邊框等進行設(shè)計。圖4-4網(wǎng)頁中的圖像3．頁腳

包括網(wǎng)站的版權(quán)信息、備案信息和聯(lián)系方式等，整體高度可依內(nèi)容而定，如圖4-6所示。圖4-6頁腳4.1.2常見網(wǎng)頁界面的布局12345工字型國字型POP型對稱型分割型

常見網(wǎng)頁界面的布局有工字型、國字型、POP型、對稱型和分割型等，下面簡要介紹這幾種布局類型。類

型特

點工字型網(wǎng)頁頁首和主體內(nèi)容中的Banner一般采用通欄形式，鋪滿網(wǎng)頁的首屏區(qū)域，頁腳與頁首呼應。給瀏覽者整齊、干凈的感覺。適用于購物類、服務(wù)類企業(yè)網(wǎng)頁。國字型國字型布局的基本形式是將網(wǎng)站的Logo、導航欄及Banner等置于頂部，下方安排網(wǎng)頁的主體內(nèi)容，，最后由頁尾組成“國”字的底部邊框，將主體內(nèi)容包圍。適用于門戶、購物類等內(nèi)容豐富的大型網(wǎng)站。POP型以一張精美的圖片作為頁面的設(shè)計中心，通過合并或調(diào)整字體顏色弱化或簡化導航項，突出主體內(nèi)容，頁面效果如同一張宣傳海報。頁面設(shè)計簡潔、優(yōu)美，具有極強的視覺沖擊力，缺點是網(wǎng)頁打開速度慢。對稱型采用左右或上下對稱的方式安排網(wǎng)頁內(nèi)容,頁面極具震撼力。分割型將網(wǎng)頁內(nèi)容安排在多個大小不同的版塊中，再像拼圖一樣，將版塊拼合為一個完整的頁面。常見的分割方式有斜線分割、塊面分割、主題分割、等距分割等。工字型國字型對稱型分割型POP型4.1.3網(wǎng)頁布局的技巧

網(wǎng)頁中版塊的位置、大小、間距及疊加關(guān)系等，是網(wǎng)頁布局中非常重要的內(nèi)容，如果處理不當很容易造成網(wǎng)頁界面效果呆板或混亂，降低瀏覽者的瀏覽體驗。下面介紹幾種常見的網(wǎng)頁布局技巧。1.延伸2.曲線3．過渡4．隱藏5．層疊6．錯位1．延伸

當兩個版塊的內(nèi)容有所關(guān)聯(lián)時，將較小的版塊延伸到較大的版塊上，使兩個版塊重疊一部分，則可以很好地打破兩個版塊之間的分界線。版塊的對齊與延伸2．曲線通過改變分割線的形狀（如將直線改為曲線、折線等）能有效地解決界面呆板問題。

注:雖然兩個版塊在效果上呈現(xiàn)出曲線過渡，但實際上版塊的形狀依然是矩形，只是上方版塊底部填充了白色的曲線形狀。采用曲線分割的版塊布局3．過渡

對稱型是比較流行的網(wǎng)頁布局方式之一。界面簡潔大氣，有效避免因圖片與文字疊加造成的混亂，避免版塊間過渡生硬可將與版塊內(nèi)容相關(guān)的元素置于兩個版塊之間，對版塊進行過渡處理。采用產(chǎn)品圖片過渡的對稱布局4．隱藏對于POP型界面布局來說，提煉信息內(nèi)容，保留主要信息，隱藏次要信息，適當放大信息內(nèi)容，則能使頁面顯得簡潔、大氣。隱藏次要信息的POP型頁面

5．層疊將圖片、文字等信息進行層疊，打破傳統(tǒng)的左右、上下布局，則能增加畫面的層次感，使枯燥的圖文說明方式更具設(shè)計感。采用圖文版塊層疊布局的效果6．錯位當遇到級別相同的多個版塊，如果稍加改變，將同級別的版塊錯位排列，則可提升頁面的親和力并增加動感。4.1.4網(wǎng)頁界面設(shè)計的要點1．風格定位：體現(xiàn)了網(wǎng)站的思想傾向和文化內(nèi)涵3．重視瀏覽體驗4．強調(diào)重點4.1.4網(wǎng)頁界面設(shè)計的要點2．整體統(tǒng)一4.2

界面設(shè)計的規(guī)范4.2.1尺寸規(guī)范1．網(wǎng)頁尺寸設(shè)置網(wǎng)頁尺寸是網(wǎng)頁設(shè)計的第一步。高度一般沒有限制，寬度主要分定寬和自適應兩種模式。當前占比最高的是分辨率為1920像素×1080像素的顯示器（如圖4-26所示）,可為依據(jù)設(shè)置網(wǎng)頁寬度。2．首屏高度用戶打開網(wǎng)頁后第一眼看到的畫面，最重要的內(nèi)容會安排在首屏。在設(shè)計時，需要預設(shè)一個安全高度，首屏高度可設(shè)為720像素，核心內(nèi)容高度可設(shè)為580像素。4.2.2字體和字號網(wǎng)頁界面中常用的字體有微軟雅黑、宋體等，英文和數(shù)字字體有Helvetica等。網(wǎng)頁中的大段文字建議用默認字體（如宋體、黑體）。1．常用字體2．字號大小

常規(guī)文字的字號可設(shè)置為12像素、14像素、16像素、18像素等；

標題、導航文字可設(shè)置為20像素、22像素、24像素等；

大標題、橫幅等可設(shè)置為30像素、36像素等。4.3案例實戰(zhàn)——設(shè)計愛家網(wǎng)站頁面

本案例通過制作首頁和商品詳情頁，介紹家居類購物網(wǎng)站頁面的一般制作方法作品展示

【操作步驟觀看視頻】設(shè)計頁首區(qū)和Banner制作其他內(nèi)容區(qū)和頁腳區(qū)設(shè)計網(wǎng)站商品詳情頁本章總結(jié)1.常見的網(wǎng)頁界面布局有工字型、國字型、POP型、對稱型和分割型等。

2.常見的網(wǎng)頁布局技巧有延伸、曲線、過渡、隱藏、層疊和錯位。3.設(shè)計網(wǎng)頁界面時，先確定網(wǎng)站的風格、配色，然后設(shè)計各頁面，在設(shè)計中考慮瀏覽體驗，通過排版技巧或一定的設(shè)計手法，適當強調(diào)重點，突出主要內(nèi)容。4.對于一般網(wǎng)頁，可以1920像素為依據(jù)設(shè)置網(wǎng)頁寬度，而高度一般沒有限制，可根據(jù)網(wǎng)頁內(nèi)容靈活設(shè)置。網(wǎng)頁的安全寬度可根據(jù)需要設(shè)置為1200像素、990像素、950像素等，首屏高度可設(shè)置為720像素，核心內(nèi)容的安全高度可設(shè)置為580像素。5.網(wǎng)頁界面中常用的中文字體有微軟雅黑、宋體等，英文和數(shù)字字體有Helvetica等。常規(guī)文字的字號可設(shè)為12像素、14像素、16像素、18像素；標題、導航文字可設(shè)為20像素、22像素、24像素；大標題、橫幅等可設(shè)為30像素、36像素等。本章實訓——設(shè)計電子商城網(wǎng)站頁面設(shè)計思路1.分析基本結(jié)構(gòu)圖。2.確定配色。選擇象征簡潔、科技、高端的黑色、白色和灰色作為頁面主要顏色。3.頁面布局。首頁可采用卡片式布局，將商品內(nèi)容安排在一張張卡片上，從而使頁面效果看起來整齊大方，便于瀏覽。案例提示難點在于如何清晰工整地排列多行文案。當多行文字重要程度不同時，可通過顏色、字號進行區(qū)分，如商品標題、價格和詳細介紹，可將標題字號設(shè)置得大一些，將價格以醒目的顏色突出顯示，而詳細