一、網(wǎng)站的尺寸和規(guī)范?

　　1、網(wǎng)頁界面設(shè)計中，一般使用的分辨率的顯示密度是多少ppi?

　　答：72像素(屏幕級別72、印刷級別300、噴繪30-45)

　　2、網(wǎng)頁界面設(shè)計中，最小字號是?

　　答：中文12px，英文10px

　　3、網(wǎng)頁界面設(shè)計中，使用什么字體?

　　答：微軟雅黑、思源黑體，宋體、Arial

　　4、網(wǎng)頁界面設(shè)計寬度和安全區(qū)分別是多少?

　　答：網(wǎng)頁寬度1920，安全區(qū)1200

　　5、網(wǎng)頁界面設(shè)計規(guī)范?

　　答：畫布尺寸：1920*1080(高度不限)

　　版心1200px

　　顏色模式：RGB

　　分辨率：72PPI

　　中文最小文字：12px,英文10px

　　保持雙數(shù)原則

　　二、網(wǎng)站的分類有哪些?

　　1、電商網(wǎng)站：B2B商家對商家 B2C商家對用戶 C2C用戶對用戶

　　2、企業(yè)網(wǎng)站：企業(yè)介紹

　　3、個人網(wǎng)站：個人性質(zhì)，如博客

　　4、門戶網(wǎng)站：早些年信息資源整合類網(wǎng)站

　　5、專題網(wǎng)站：特定熱點(diǎn)，時效性

　　三、網(wǎng)站設(shè)計注意事項(xiàng)?

　　1、畫圖形時不要畫到外面，影響計算

　　2、圖形長寬用整數(shù)，偶數(shù)

　　3、單位用像素

　　4、元素距離用偶數(shù)

　　5、文字大小用偶數(shù)(互聯(lián)網(wǎng)產(chǎn)品字體最小中文12px，英文10px )

　　6、盡量不用純黑純白

　　四、網(wǎng)頁布局方式?

　　1、頂部大圖Banner+簡單的柵格

　　特點(diǎn)，導(dǎo)航欄，頂部大圖圖片上疊有文字標(biāo)題，2-4個分欄承載不同類別的信息有的會有圖標(biāo)，主要內(nèi)容區(qū)域，頁腳

　　優(yōu)點(diǎn)，布局設(shè)計干凈清爽，有足夠強(qiáng)的視覺表現(xiàn)力，并且常常采用的響應(yīng)式設(shè)計，斷點(diǎn)也很好控制。頂部大面積的輪播圖或者Banner 也有許多插件或者應(yīng)用來幫你實(shí)現(xiàn)。

　　原理：這種布局中，每個元素都各司其職，并且整個流程是富有邏輯的，頂部大圖足以營造氛圍，給予用戶特定的體驗(yàn)，下面的次一級元素能夠做的很好的支撐。

　　2、單頁設(shè)計、單欄布局

　　特點(diǎn)，導(dǎo)航，主要內(nèi)容區(qū)域文字+圖片為主，頁腳

　　單頁式設(shè)計這幾年非?；?，它非常適宜于展現(xiàn)極簡的內(nèi)容，或者專注呈現(xiàn)一個主題。當(dāng)網(wǎng)站的主題集中，內(nèi)容也比較固定的時候，無需復(fù)雜的布局來呈現(xiàn)，單頁單列式的布局足以應(yīng)付一切。

　　采用這種布局模式的時候，空間的控制至關(guān)重要，相當(dāng)考驗(yàn)設(shè)計師設(shè)計留白和布局平衡的功力。元素和元素之間的疏密關(guān)系是需要設(shè)計師反復(fù)推敲的，如果空間控制不合理會給用戶一種混亂的感覺，如果過于緊密則會產(chǎn)生局促感。

　　原理：單頁式設(shè)計適合于小網(wǎng)站或者小型項(xiàng)目的展示，它可以用來制造一個簡單的介紹頁面，讓簡單的內(nèi)容顯得不那么單調(diào)，強(qiáng)化內(nèi)容的形式感和重量感。對于內(nèi)容簡單的博客網(wǎng)站而言，單頁式設(shè)計也是不錯的選擇。

　　3、F式布局(如：后臺管理系統(tǒng))

　　特點(diǎn)，頁頭喝導(dǎo)航，靠左的一欄相對較寬展示主要的內(nèi)容，靠右常為側(cè)邊欄展示相關(guān)鏈接等內(nèi)容，頁腳

　　這種F式的閱讀模式對應(yīng)的網(wǎng)頁布局就是F式布局，最關(guān)鍵的信息靠左顯示，從上到下盡量保持在一條線上。

　　原理：人的行為很容易受到習(xí)慣的影響，而研究也證實(shí)了人思考、行為確實(shí)是模式化的。從左到右，自上而下，人們大多習(xí)慣了這種行為模式。F式的布局模式擁有良好的適用性，便于用戶理解和交互。

　　4、極簡分層

　　原理：極簡化的頁面中加入簡單的幾個分層，讓頁面有了視覺焦點(diǎn)，尤其是當(dāng)設(shè)計者想要引導(dǎo)用戶關(guān)注到某個關(guān)鍵的內(nèi)容的時候，這種頁面布局很很容易實(shí)現(xiàn)這一點(diǎn)。

　　相關(guān)趨勢：微妙的陰影和漸變常常被用在這樣的頁面當(dāng)中，強(qiáng)化元素之間的層次感。雖然這些設(shè)計手法一度“過時”，但是現(xiàn)在大有卷土重來之勢，而Material Design 這樣的設(shè)計風(fēng)格就是它們的沖鋒號。

　　更多關(guān)于“UI培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。