Web UI 網頁設計規範

Web UI 網頁設計規範

一、網頁尺寸

製作網頁時,我們選用的分辨率是72像素/英寸,使用的畫布尺寸1920px*1080px。

但是並不代表我們可以在整個畫布上作圖。

網頁的佈局主要有兩種,左右型佈局和居中型佈局。佈局的不一致,使得可設計的空間也不相同。

1、左右佈局

靈活性強, UI的限制小,左邊通欄為導航欄,寬度沒有具體的限制,可根據實際情況調整;

右側為內容版塊範圍,是網站內容的展示區域。

Web UI 網頁設計規範

2、居中佈局

中間的黃色部分為有效的顯示局域,用於網站內容的展示;換句話說,兩邊均為留白,沒有實際用途,只是為了適配而存在;

Web UI 網頁設計規範

3.主流電腦屏幕尺寸有以下幾種:

Web UI 網頁設計規範

Web UI 網頁設計規範

一般網站內容顯示的區域為996px;國內網站大部分還是以1000個像素為界限,因超過1000像素適合在大屏幕上瀏覽,小屏幕會顯得擁擠。所以網站寬度在1000像素以內可以保證大部分用戶舒適的瀏覽網頁。

二、網頁字體

字體設計的總原則是:可辨識性和易讀性。

網頁的中文字設計是系統默認的字體:宋體、微軟黑體、蘋果系統黑體

英文則建議使用Times New Roamn、Arial、Comis Sans MS等無襯線字體

常用的字號大小有以下幾種:

12px是應用於網頁的最小字體,適用於非突出性的日期,版權等註釋性內容。

14px 則適用於非突出性的普通正文內容。

16px、18px、20px、26px或者30px 適用於突出性的標題內容。注意都是偶數原則,奇數像素會出毛邊!

三、字體間距

相鄰兩個文字的間距,其實不需要太過介意,除了特殊的需求之外,都可以使用默認數值的間距。

行間距:推薦以字體大小的1.5—2倍作為參考;

段間距:推薦以字體大小的2—2.5倍作為參考。

例如,當選用14px 的字體時,行間距:21—28px;段間距:28px—35px。

四、字體顏色

Web UI 網頁設計規範

六種除了主色調以外都是場景色,需要在不同的場景中使用(例如危險色表示危險的場景)六種是文字排版色,通過文字的不同用色進行文字排版,以表現層次結構。

Web UI 網頁設計規範

主文字顏色,建議使用 公司品牌的VI顏色,可提高公司網站與公司VI之間的關聯,增加可辨識性和記憶性。

Web UI 網頁設計規範

正文字體顏色,保險起見,選用易讀性的深灰色,建議選用 #333333到#666666 之間的顏色。

五、首屏內容

做網頁設計時,你還要特別注意網頁的首屏內容,在構圖和內容呈現上,首屏模塊的設計至關重要。

除去任務欄,瀏覽器菜單欄以及狀態欄的高度,剩下的是首屏的高度。

Window XP的首屏高度平均值是580px

Window 7的首屏高度平均值是710px

綜合考慮到Window XP已經逐漸退出市場,在實際操作時,我們 以710px 作為依據。

如下圖所示,藍色區域則是我們設計時需要著重考慮的首屏範圍。

Web UI 網頁設計規範

另外,是關於圖片尺寸的問題。

需要全屏顯示的圖片,寬度尺寸嚴格設計為1920px

但是值得注意的是,圖片內容的有效範圍不能超過網頁內容的有效範圍,即控制在1200px以內。

避免遇到小屏幕設備時,內容顯示不全,而造成信息的遺漏的情況。

六、響應式佈局設計

響應式設計指的是不同設備、屏幕、分辨率、操作方式(鼠標、鍵盤、觸摸),保證信息在不同環境下表現一致,保證可交互可操作。

由於頁面的寬度發生了變化,進而信息展現也改變了就是響應式設計。直到最後在手機屏幕上的顯示圖片信息變成了一列。

Web UI 網頁設計規範

對頁面進行響應式的設計實現,需要對相同內容進行不同寬度的佈局設計,有兩種方式:桌面優先(從桌面端開始向下設計);移動優先(從移動端向上設計)

無論基於哪種模式的設計,要兼容所有設備,佈局響應時不可避免地需要對模塊佈局做一些變化(當頁面寬度發生變化的尺寸範圍就是臨界點的概念。所以做響應式設計時我們需要知道每一個尺寸的寬度範圍在多少時我們就可以制定出相對應清晰的一個臨界點,制定了臨界點之後就知道,當屏幕的寬度範圍位於哪一個點的時候,我們的頁面信息該如何展示。)

我們通過JS獲取設備的屏幕寬度,來改變網頁的佈局,這一過程我們可以稱之為佈局響應屏幕。

常見的主要有如下幾種方式:

1、佈局不變,即頁面中整體模塊佈局不發生變化,主要有:

Web UI 網頁設計規範

Web UI 網頁設計規範

Web UI 網頁設計規範

2、佈局改變,即頁面中的整體模塊佈局發生變化,主要有:

Web UI 網頁設計規範

Web UI 網頁設計規範

很多時候,單一方式的佈局響應無法滿足理想效果,需要結合多種組合方式,但原則上儘可能時保持簡單輕巧,而且同一臨界點內(發生佈局改變的臨界點稱之為臨界點)保持統一邏輯。否則頁面實現得太過複雜,也會影響整體體驗和頁面性能。

八、網頁柵格

網上有些關於柵格化系統的文章講的非常理論化,又是算法又是模塊,而且和響應式佈局混在一起,讓新晉的網頁設計師們簡直無從下手,所以這裡以案例來說明何時採用以及怎麼最快的建立柵格化系統。在所有關於UI的文章中,我會反覆強調和前端開發人員的溝通,因為他們是你設計方案的執行者,這一點非常重要。

1.把柵格化設計和柵格化佈局分開

強調柵格化設計(grid-design)和柵格化佈局(css grid)分開描述,是個人理解這完全屬於兩個不同的工作,前者針對網頁設計師,而後者針對前端開發人員。柵格化設計是不需考慮頁面的響應的基於柵格系統的設計,主要是為了提高網頁的規範性。對於一些中規中矩的網站,或者說一般創意型的網站,柵格化設計還是非常推薦的,尤其是一些規模大週期長,後期需要不斷迭代的項目,柵格化設計讓網頁呈現出專業可信賴感,並有助於後期的維護。而柵格化佈局,特指前端攻城獅使用的css框架,來實現頁面的響應式佈局。

響應式設計只是網頁設計的一個折中方案,依賴於項目實際情況進行選擇。對於設計師來說,如果沒有必須的要求,可選擇廣義的柵格系統,並在此基礎上自由發揮創意。

2.絕不萬能的柵格化系統

對於是否採用柵格化設計,採用下面幾個案例說明一下:

Web UI 網頁設計規範

(企業站之類-以介紹幾種單一產品為主)

Web UI 網頁設計規範

(功能型網站)

Web UI 網頁設計規範

(不拘泥形式的設計形式)

針對這三個具有代表性的案例,柵格化設計是沒有必要的。理由很簡單,柵格的優點也是缺點,規範意味著統一也意味著限制,在以上的案例中,無需用柵格來限制設計師的靈感,畢竟這個社會,還是需要設計感的。

但絕大多數情況下,推薦柵格化設計。尤其是圖文混排、版塊很多的網站,柵格化設計會讓內容雜亂無章的頁面呈現清爽感。

關於柵格化佈局,方案非常多,來看下面幾個案例,我們都稱之為柵格化設計。

Web UI 網頁設計規範

(廣義的柵格化系統-無間距的單元格)

Web UI 網頁設計規範

(廣義的柵格化系統-有間距的單元格)

Web UI 網頁設計規範

(廣義的柵格化系統-有間距的單元格)

對於不需要考慮頁面響應(換句話說,和框架無關)的網頁設計,原則可以簡化成一句話:“由設計師自由決定”。

3.柵格化設計的參數

網上搜索結果最熱的960 gird柵格系統從2009年就開始正式推出,但至今,仍然有很多設計師在使用,除了考慮到顯示設備的分辨率,還依賴於960 gird的靈活性。所以,對於新晉web ui來說,採用960 grid 仍然是最佳的方案,不會出彩但也不會出錯。如果是考慮到寬屏的設計(需要捨棄一部分分辨率不高的用戶),可以把柵格化系統的寬度建為980甚至以上。但沒有柵格化設計經驗的設計師需要注意,這裡說的960是含邊距部分,換句話說,在psd文檔中,你的內容部分是950px,柵格化版面可以藉助一些非常好用的在線工具,比如知名的Grid.Guide,這是12列柵格在內容寬度950下的三種版式規範,你也可以使用24列,靈活度更高。

Web UI 網頁設計規範

Grid-Guide自動生成的柵格系統(寬950-12列)

從圖中可以看出,這三種方案列寬column width和間距gutter不同,剩下的工作對於ui設計師來說就簡單了很多,你可以把版式規範的png格式下載下來,作為你網頁設計的基礎版塊,在此基礎上進行列的劃分。或者只是以這個參數為基礎,重新建立參考線(我更推薦這種方式,尤其photoshop cc2017的新建參考線版面,裝訂線對應Gutter,列寬對應column width)。我簡單的拿版式規範做了個頁面設計示意圖,這就是基於柵格系統設計的優點,在劃分列時,有理可依,有據可循。

Web UI 網頁設計規範

【基於960grid系統的版塊劃分示意】

當然,既然是設計師,就可以感性的元素再多一些。比如,你希望更多的留白,就可以採用間距值較大的柵格版式,只要整個網站保持一個統一的版式即可。下圖是當內容寬度為1200時生成的柵格系統,你還可以嘗試很多方案,但Max Width的設定並不是那麼隨意,這個取決於網站的定位。

Web UI 網頁設計規範

Grid-Guide自動生成的寬1180的柵格系統(24列)

至於高度和垂直間距,柵格化系統並沒有統一的準則,設計師可以採用一些黃金分割之類滿滿的都是設計感之類的值,或者垂直間距與柵格系統的間距相同或是整倍,總之,也需要一個規範指導全站設計。

柵格系統的參數根據項目的實際情況,儘量建立10的倍數或8的倍數(google material design推薦)。

4.柵格化佈局的參數

在前面提到過,如果網站的需求是響應式的設計,這時,設計師們一定一定先問一下前端他們準備如何實現響應式佈局,而不是把設計稿完成後交給他們後YY他們能百分百給你復現你的設計稿。

關於響應式的柵格系統,首先聲明一點,當前端樂意並瞭解CSS原理和框架的構建方式時,可以構建其他樣式的網格,比如7、9、11、13等等,甚至各種異形網格,但在絕大多數情況下,更多的前端攻城獅青睞於高(tou)效(lan),而他們常用的css框架除了Bootstrap(寬480/768/992/1200,12列),還有一堆叫不出名字的輕量css框架(畢竟柵格系統只是Bootstrap的一部分,如果只是需要一個響應式的css的話,可選的非常多,比如960.gis),除此之外,有可能你那可愛的前端攻城獅用的是flexbox實現響應式彈性佈局,所以在一切未知確定下來之前,請放下架子,請教一下開發人員,因為雖然不想承認,但這種情況下是前端來指導設計。值得慶幸的是,這種情況在現實中非常少的,(但不排除你接手的是一個二次開發的項目等等之類),確定他們使用哪種框架之後,設計師可以開始自己的工作了。

下面也舉個例子,是960gis的。


Web UI 網頁設計規範

【960-grid-system柵格化佈局】

看完你也許會明白為什麼涉及到柵格化佈局需要前端來確定了,960gis的css框架給出了三種方案,24列16列12列,設計師要在這個基礎上進行設計。一旦需要柵格化佈局,意味著設計師自由發揮的空間再次縮減,只有在這三個方案上選一種。這些方案從何而來呢?很簡單,你只要向前端索取他使用的框架的psd模板即可,裡面參考線都是建好的。而前端一定會非常樂意幫你這個忙,理由很簡單,你按照他使用的框架規範進行設計也是在一定程度上縮減他的工作量,皆大歡喜。比如下面這張,就是目前最新的Bootstrap4的psd文件的截圖。

Web UI 網頁設計規範

【Bootstrap4】

設計師也可以自給自足,一般這些css框架庫都會提供下載途徑。尤其是Bootstrap,作為成熟的框架,很多模板文件可以套用。柵格化佈局以使用的css框架庫為準則,讓前端開發提供給設計師再好不過。

九、命名規範

1、網站設計及基本框架結構

Web UI 網頁設計規範

1.1 Container

“container“ 就是將頁面中的所有元素包在一起的部分,這部分還可以命名為: “wrapper“, “wrap“, “page“.

1.2 Header

“header” 是網站頁面的頭部區域,一般來講,它包含網站的logo和一些其他元素。這部分還可以命名為:“page-header” (或 pageHeader).

1.3 Navbar

“navbar“等同於橫向的導航欄,是最典型的網頁元素。這部分還可以命名為:“nav”, “navigation”, “nav-wrapper”.

1.4 Menu

“Menu”區域包含一般的鏈接和菜單,這部分還可以命名為: “subNav “, “links“,“sidebar-main”.

1.5 Main

“Main”是網站的主要區域,如果是博客的話它將包含的日誌。這部分還可以命名為: “content“, “main-content” (或“mainContent”)。

1.6 Sidebar

“Sidebar” 部分可以包含網站的次要內容,比如最近更新內容列表、關於網站的介紹或廣告元素等…這部分還可以命名為: “subNav “, “side-panel“, “secondary-content“.

1.7 Footer

“Footer”包含網站的一些附加信息,這部分還可以命名為: “copyright“.

2、需要注意的幾點:

2.1儘量考慮為元素命名其本身的作用或”用意”,達到語義化。

不要使用表面形式的命名.

如:red/left/big等。

2.2組合命名規則:

[元素類型]-[元素作用/內容]

如:搜索按鈕: btn-search

登錄表單:form-login

新聞列表:list-news

2.3 涉及到交互行為的元素命名

凡涉及交互行為的元素通常會有正常、懸停、點擊和已瀏覽等不同樣式,命名可參考以下規則:

鼠標懸停::hover 點擊:click 已瀏覽:visited

如:搜索按鈕: btn-search、btn-search-hover、btn-search-visited

3、常用命名彙總:

頁頭:header

登錄條:loginbar

標誌:logo

側欄:sidebar

廣告條:banner

導航:nav

子導航:subNav

菜單:menu

子菜單:subMenu

下拉菜單:dropMenu

工具條: toolbar

表單:form

欄目:column

箭頭:arrow

搜索:search

搜索按鈕:btn-search

滾動條:scroll

內容:content

標籤頁:tab

文章列表:list

提示信息:msg

小技巧:tips

欄目標題:title

鏈接:links

頁腳:footer

服務:service

熱點:hot

新聞:news

下載:download

註冊:regsiter

狀態:status

按鈕:btn

投票:vote

合作伙伴:partner

網站地圖: sitemap


聲明:部分文字和圖片來自互聯網;如有侵權,請聯繫本號!


分享到:


相關文章: