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

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

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

　　2、網(wǎng)頁(yè)界面設(shè)計(jì)中，最小字號(hào)是?

　　答：中文12px，英文10px

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

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

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

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

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

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

　　版心1200px

　　顏色模式：RGB

　　分辨率：72PPI

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

　　保持雙數(shù)原則

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

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

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

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

　　4、門(mén)戶網(wǎng)站：早些年信息資源整合類(lèi)網(wǎng)站

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

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

　　1、畫(huà)圖形時(shí)不要畫(huà)到外面，影響計(jì)算

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

　　3、單位用像素

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

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

　　6、盡量不用純黑純白

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

　　1、頂部大圖Banner+簡(jiǎn)單的柵格

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

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

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

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

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

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

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

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

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

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

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

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

　　4、極簡(jiǎn)分層

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

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

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