網(wǎng)站建設既要符合行業(yè)規(guī)范也要滿足客戶定制需求
網(wǎng)站建設要按照特定行業(yè)和客戶的定制需求來做,是一項嚴謹?shù)墓こ?,我們在進行網(wǎng)站建設制作的時候有些規(guī)范需要了解。下面天水網(wǎng)站建設小士就來談談這方面應該注意的事項。
一、網(wǎng)頁尺寸與布局
制作網(wǎng)頁時,我們選用的分辨率是72像素/英寸,使用的畫布尺寸1920px*1080px。但是并不代表我們可以在整個畫布上作圖。
網(wǎng)頁的布局主要有兩種,左右型布局和居中型布局。布局的不一致,使得可設計的空間也不相同。
1、左右布局,靈活性強, UI的限制小;
左邊通欄為導航欄,寬度沒有具體的限制,可根據(jù)實際情況調(diào)整;右側為內(nèi)容版塊范圍,是網(wǎng)站內(nèi)容的展示區(qū)域。
2、居中布局,中間的藍色部分為有效的顯示局域,用于網(wǎng)站內(nèi)容的展示;換句話說,兩邊均為留白,沒有實際用途,只是為了適配而存在。
一般網(wǎng)站內(nèi)容顯示的區(qū)域為1200px;以前國內(nèi)網(wǎng)站大部分還是以1000個像素為界限,因超過1000像素適合在大屏幕上瀏覽,小屏幕會顯得擁擠。目前由于用戶電腦顯示器分辨率的提高,現(xiàn)在的的界限以1200px標準,所以網(wǎng)站寬度在1200像素以內(nèi)可以保證大部分用戶舒適的瀏覽網(wǎng)頁。
二、網(wǎng)頁字體設置標準
字體設計的總原則是:可辨識性和易讀性。
網(wǎng)頁的文字設計是系統(tǒng)默認的字體:宋體、微軟黑體、蘋果系統(tǒng)黑體,英文則建議使用arial無襯線字體
常用的字號大小有以下幾種:
12px是應用于網(wǎng)頁的最小字體,適用于非突出性的日期,版權等注釋性內(nèi)容。
14px 則適用于非突出性的普通正文內(nèi)容。
16px、18px或者20px 適用于突出性的標題內(nèi)容。
相鄰兩個文字的間距,其實不需要太過介意,除了特殊的需求之外,都可以使用默認數(shù)值的間距。
行間距,推薦以 字體大小的1.5—2倍 作為參考;段間距,推薦以 字體大小的2—2.5倍 作為參考。即,當選用14px 的字體時,行間距:21—28px;段間距:28px—35px。
主文字顏色,建議使用 公司品牌的VI顏色,可提高公司網(wǎng)站與公司VI之間的關聯(lián),增加可辨識性和記憶性。
正文字體顏色,保險起見,選用易讀性的深灰色,建議選用 #333333到#666666 之間的顏色。
輔助性的,注釋類的文字,則可以選用#999999之類的比較淺的顏色。
如果,你對顏色駕馭能力比較強,你也可以選用 偏公司VI顏色的深色,作為正文字體顏色或者輔助性文字顏色。
例如公司的品牌色是藍色,那么,正文字體就可以選用偏藍的深色。這樣處理之后,文字就帶有了環(huán)境色,網(wǎng)站整體色調(diào)將更加和諧。
三、響應式布局設計
響應式設計指的是不同設備、屏幕、分辨率、操作方式(鼠標、鍵盤、觸摸),保證信息在不同環(huán)境下表現(xiàn)一致,保證可交互可操作。
由于頁面的寬度發(fā)生了變化,進而信息展現(xiàn)也改變了就是響應式設計。直到最后在手機屏幕上的顯示圖片信息變成了一列。
對頁面進行響應式的設計實現(xiàn),需要對相同內(nèi)容進行不同寬度的布局設計,有兩種方式:桌面優(yōu)先(從桌面端開始向下設計);移動優(yōu)先(從移動端向上設計);
無論基于哪種模式的設計,要兼容所有設備,布局響應時不可避免地需要對模塊布局做一些變化(當頁面寬度發(fā)生變化的尺寸范圍就是臨界點的概念。所以做響應式設計時我們需要知道每一個尺寸的寬度范圍在多少時我們就可以制定出相對應清晰的一個臨界點,制定了臨界點之后就知道,當屏幕的寬度范圍位于哪一個點的時候,我們的頁面信息該如何展示。)
我們通過JS獲取設備的屏幕寬度,來改變網(wǎng)頁的布局,這一過程我們可以稱之為布局響應屏幕。
另外,在不同設備上采用相似的設計,用戶可以通過不同類型的設備訪問你的網(wǎng)站,這些設備包括:電腦、平板、手機、音樂播放器、甚至是智能手表等。無論用戶使用什么設備訪問你的網(wǎng)頁,確保他們具有類似的體驗,這是用戶體驗設計中的一條重要標準。
四、文件命名規(guī)則與目錄結構規(guī)則
首頁面必須以“index.html、index.htm、index.php index.jsp、index.aspx等命名的文件。
HTML文件擴展文件名一律用 .htm或.html
在根目錄中原則上應該按照首頁的欄目結構,給每一個欄目開設一個目錄,根據(jù)需要在每一個欄目的目錄中開設一個image 的子目錄用以放置此欄目專有的圖片和多媒體文件,如果這個欄目的內(nèi)容特別多,又分出很多下級欄目,可以相應的再開設其他目錄。
除非有特殊情況,目錄、文件的名稱全部用小寫英文字母、數(shù)字、下劃線的組合,其中不得包含漢字、空格和特殊字符;目錄名應以英文、拼音為主。盡量用一些大家都能看懂的詞匯。使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義。
共用的模板文件應放在根目錄的Templates文件夾下(此為dreamweaver的默認路徑,如用其它軟件開發(fā)者也需遵守此規(guī)則)。
五、導航的設計要求
導航設計是網(wǎng)頁可用性的基石。記住,如果用戶在你的網(wǎng)站里找不到導航,那么無論你的網(wǎng)站有多少都沒用用。這也是導航設計要遵循以下原則的原因:
簡單。每個網(wǎng)站都應該有盡可能簡單的結構。
清晰。導航的每項對用戶而言,都應該是清楚的。
一致。系統(tǒng)的導航頁在每一頁中都應該是相同的。
用戶以最少的點擊次數(shù),最快地到達他們想要瀏覽的網(wǎng)頁。這才是導航設計的目的。
按照以上的基本規(guī)范來建設網(wǎng)站是網(wǎng)站建設取得成功的重要保障。不管你設計什么類型的網(wǎng)站,企業(yè)營銷型網(wǎng)站也好,高端品牌網(wǎng)站建設也好,都不能脫離以上的基本規(guī)范。同時也要照顧到客戶的個性需求,使你制作的網(wǎng)站既符合行業(yè)規(guī)范標準,又能突出自己個性。
相關熱詞搜索: 網(wǎng)站建設,行業(yè)規(guī)范,客戶定制需求