教學課件42 網(wǎng)頁視覺設(shè)計元素

1、網(wǎng)頁視覺設(shè)計元素授課教師：肖文婷【文字】目前較為典型的幾款中文屏幕字體包括方正蘭亭黑、微軟雅黑、蘋果麗黑、信體黑。四款不同的黑體在相同字號、字距下的比較1、字體分類襯線算是一種輔助線的小細節(jié)，左邊的是有襯線字體，在標注的地方多出一些裝飾，這樣就可以清晰地分辨字母和文字。在字體設(shè)置較小的時候，會受到襯線的影響，分辨不清晰。同時，它是中文系統(tǒng)默認字體是宋體，太大篇幅使用會引起審美疲勞，所有有襯線字體適合打印文字及正規(guī)文檔中使用，通常不適合使用在網(wǎng)頁中。而右邊的字體是無襯線字體，沒有邊角的裝飾，看起來比較整齊光滑，比較適合在網(wǎng)頁中使用，讓瀏覽者獲取大量文字信息的時候不會疲勞。有襯線字體與無襯線字體對

2、比2、字體系列字體之間的差異除了有襯線與無襯線的差異，同一類型里還有字體形體的差異。主要分為幾個系列。（1）襯線字體。times new roman 是默認的有襯線字體，中文字體是宋體、仿宋之類的字體；（2）無襯字體。arial 是默認的無襯字體，中文字體是微軟雅黑、黑體等這類字體；（3）等寬字體。courier 是默認的等寬字體，而中文漢字都是等寬的；（4）手寫字體。風格比較個性，通常用于標題、標志等。這個系列沒有默認字體，英文字體常用comic sans，中文的話，行書系列、草書系列的字體等，都可以算作手寫字體。（5）裝飾字體。極具個性，字體繁多。在網(wǎng)頁設(shè)計中很少用到，除非特殊創(chuàng)意性的設(shè)計

3、。中英文相同字體的不同特征3、字體的選擇（1）使用經(jīng)典通用字體不同操作系統(tǒng)都有不同的字體系統(tǒng)，但經(jīng)典老牌字體都會共同存在于各個系統(tǒng)。例如無襯線字體的arial，早期就被windows操作系統(tǒng)使用，直接在css中申明使用。css可以在一個網(wǎng)頁中，聲明指定多個字體，這樣當寫在前面的字體，在當前操作系統(tǒng)中沒有的話，就會使用后面字體頂替。（2）字體大小選擇在 css 中，最常用的描述字體大小的單位有兩個：em、px。通常認為 em 為相對大小單位，px 為絕對大小單位。注意：在字體單位中，一般都是偶會出現(xiàn)，如12px、14px、16px等，為什么不是單數(shù)的11px、15px？這涉及到顯示器處理文字的鋸

4、齒問題，所以默認的通常使用偶數(shù)大小。（3）字體顏色選擇在網(wǎng)頁中的文字通常使用黑色或灰色。不要隨意使用其他特殊顏色，如搜索引擎中搜索結(jié)果的色彩搭配很經(jīng)典，百度關(guān)鍵詞搜索如圖4-12所示。同時，在網(wǎng)頁設(shè)計中還要注意背景與字體之間的關(guān)系，除了常規(guī)白底黑字的對比顏色字體。有背景圖也要注意字體顏色與背景圖的顏色搭配?！緢D形圖像】網(wǎng)頁界面設(shè)計中的圖形圖像主要分為以下幾類：從呈現(xiàn)方式上看，可以分為靜態(tài)圖形圖像和動態(tài)圖形圖像。動態(tài)圖形圖像指具有畫面內(nèi)容具有動態(tài)效果，具有鏈接、交互功能的圖形圖像，反之則使靜態(tài)圖形圖像。從技術(shù)呈現(xiàn)來看，網(wǎng)頁界面中的圖形圖像可以分為位圖和矢量圖形。位圖和矢量圖形的技術(shù)實現(xiàn)手段不同對

5、網(wǎng)頁界面設(shè)計的有一定的影響。從運用方式看，最常運用的圖形圖像形式有：內(nèi)容展示性圖形圖像，如產(chǎn)品圖片；功能性圖形圖像，如導航、圖標、logo等；裝飾性圖形圖像，如網(wǎng)頁背景圖片等。讀者如何選擇符合氣質(zhì)的圖片放到你的網(wǎng)頁界面中去呢？以企業(yè)品牌和產(chǎn)品介紹類網(wǎng)站來介紹兩個選圖原則：1、提煉關(guān)鍵詞尋找圖片 通過提煉產(chǎn)品特性關(guān)鍵詞，以關(guān)鍵詞的形式來尋找合適的圖片作為背景圖。聯(lián)想官網(wǎng)2、圖片品牌化 通過關(guān)鍵詞尋找到一系列的圖片進行深度加工和處理，整套圖片要色調(diào)、飽和度和風格統(tǒng)一。美國高通中國官網(wǎng)【色彩】 色彩是人類視覺所能感知的、客觀存在的物象，是人類認識事物的重要媒介之一，也是表述情感的媒介之一，不同的色彩

6、配置組合所呈現(xiàn)的色彩效果，具有直觀的感染力。網(wǎng)頁ui設(shè)計師也可以利用這種色彩情感的特征，強化網(wǎng)站的視覺形象，體現(xiàn)企業(yè)內(nèi)涵，反映產(chǎn)品氣質(zhì)。 在色彩應(yīng)用中有很多專業(yè)術(shù)語，通常把顏色分為幾種不同模式：位圖模式（bitmap）、灰度模式（grayscale）、雙色調(diào)模式（doutone）、索引顏色模式（indexcolor）、rgb模式、cmyk模式、lab模式、多通道。在網(wǎng)頁設(shè)計時，主要使用的rgb模式，在屏幕上重新生成多達1670萬種顏色。要實現(xiàn)有效的網(wǎng)頁配色方案，ui設(shè)計師必須要有一些基本的理論方法，掌握通過顏色互補、色彩對比和色彩的活躍度來使網(wǎng)頁的色彩搭配來達到和諧和準確。有時候，產(chǎn)品和服務(wù)將

7、有助于確定基調(diào)或主要顏色，但如何更好傳遞信息，通常由ui設(shè)計師的想象力和設(shè)計靈感來決定?！静季帧?網(wǎng)頁的布局設(shè)計是根據(jù)網(wǎng)站的內(nèi)容和建站目的，運用版式設(shè)計原理，將頁面上的視覺元素進行合理配置與表現(xiàn)的過程。布局的過程不是簡單地擺放網(wǎng)頁元素，而是為網(wǎng)頁建立秩序的過程，設(shè)計師要綜合考慮頁面信息傳遞的清晰性、合理性，同時還要考慮視覺形態(tài)的美化，便于用戶瀏覽。1、圖版率圖版率是指占據(jù)版面的圖片與整個頁面的面積比。這個比例在布局樣式中很重要，如果一個頁面中全是文字，沒有圖片，那么圖版率就是0%；如果一個頁面全是圖，沒有文字，那么圖版率就是100%。圖版率高的頁面生動，有吸引力，有視覺沖擊力，反之則容易導致瀏

8、覽者注意力下降。高圖版率的網(wǎng)頁界面設(shè)計也是目前流行的設(shè)計風格，配合少量文字，提升界面的設(shè)計感與品質(zhì)感。2、網(wǎng)格的約束率 網(wǎng)格是網(wǎng)頁版面劃分有效的方法，可以實現(xiàn)信息的清晰化，易于閱讀。網(wǎng)格系統(tǒng)為設(shè)計師提供了一個邏輯嚴謹?shù)哪０?，通常在排版時會依賴操作軟件中的網(wǎng)格輔助。網(wǎng)格的約束率是指網(wǎng)頁上的圖文信息在排版時依賴網(wǎng)格的程度，嚴格遵循網(wǎng)格的約束率高，反之則約束率低。約束率高的網(wǎng)頁嚴謹、理性，約束率低的網(wǎng)頁自由、感性。網(wǎng)頁的約束率的程度與網(wǎng)站本身的類型、功能及規(guī)模有較大關(guān)系，通常門戶類、新聞類、資訊類網(wǎng)站一般受網(wǎng)格的約束率高。設(shè)計師可以根據(jù)項目的實際情況從視覺和情感的角度利用網(wǎng)格的約束率，從而幫助網(wǎng)頁界

9、面形成強烈的秩序感。3、跳躍率 跳躍率就是大小比例，它受到網(wǎng)站的類型和功能的影響較大，它包含文字跳躍率與圖片跳躍率兩個方面。文字的跳躍率是指以正文為基準，同一版面文字之間的字號大小比率。而圖片的跳躍率是以最小面積為標準，與最大面積圖片的比率。在網(wǎng)頁的界面設(shè)計中包含了導航欄文字、板塊標題文字、文章標題、正文等，不同功能與類型的界面在進行版面設(shè)計時會有不同字號大小所造成文字的跳躍率。通常高文字跳躍率的頁面會顯得活躍，而文字跳躍率低的頁面會顯得沉悶。4、布局樣式（1）頂部大圖+簡單柵格這種布局設(shè)計干凈利落，有足夠的視覺沖擊力，常常采用響應(yīng)式的設(shè)計。頂部大面積的輪播圖。在這種布局中，每個元素都各司其職

10、，整個流程邏輯性強，頂部大圖有足夠空間渲染氣氛。（2）單頁設(shè)計/單欄布局這種布局形式非常適合展示極簡內(nèi)容，或者專注呈現(xiàn)一個主題，一般應(yīng)用于小型網(wǎng)站或者小型項目的展示。采用這種布局模式的時候，空間的控制至關(guān)重要，這對網(wǎng)頁設(shè)計師對頁面留白與布局平衡的功力，同時配合合適的動態(tài)效果設(shè)計與時差滾動，可以讓單頁設(shè)計更加有趣生動，賦予頁面更強的生命力。（3）自定義柵格柵格具有組織性的優(yōu)勢，對于用戶來說，它具有規(guī)律性和可預(yù)期性。一個漂亮干凈的柵格系統(tǒng)不進可以同時呈現(xiàn)大量的視覺化內(nèi)容，同時用戶也可以更快地找到所需內(nèi)容。柵格系統(tǒng)容易讓人視為卡片元素，加入翻轉(zhuǎn)等各式動態(tài)效果，能呈現(xiàn)出更多信息和視覺層次。（4）f式布

11、局研究表明，用戶在瀏覽網(wǎng)頁的時候，習慣于沿著f式的閱讀軌跡來瀏覽信息，也就是說，用戶喜歡從左到右閱讀，然后向下移動，再繼續(xù)從左到右閱讀。這種f式的閱讀模式對應(yīng)的網(wǎng)頁布局就是f式布局，最關(guān)鍵的信息靠左顯示，從上到下盡量保持在一條線上。 （5）極簡分層 極簡化的頁面因其開放輕松的版式風格，給用戶輕便放松的感覺，所以一直成為網(wǎng)頁界面設(shè)計的流行風格。如果極簡化的頁面中可以加入幾個并列的內(nèi)容層，或者采用微陰影、微漸變的效果處理，能讓信息更有層次，強化元素的層次感。5、動態(tài)效果網(wǎng)頁中的動態(tài)元素是展示信息的另一個層面，是用動態(tài)的方式實現(xiàn)信息傳遞的手段。從早期的gif動畫到風靡一時的flash動畫，到j(luò)ava script動態(tài)，再現(xiàn)在