Web網(wǎng)頁產(chǎn)品原型規(guī)范 - 產(chǎn)品經(jīng)理
時間：2023-10-14 19:12:01 | 來源：網(wǎng)站運(yùn)營
時間：2023-10-14 19:12:01 來源：網(wǎng)站運(yùn)營
Web網(wǎng)頁產(chǎn)品原型規(guī)范 - 產(chǎn)品經(jīng)理：
一、Web網(wǎng)頁尺寸使用畫布尺寸大?。?/b>
大多數(shù)人使用的畫布尺寸為1440px*900px。
內(nèi)容展示區(qū)域大小
國內(nèi)網(wǎng)站內(nèi)容展示區(qū)域大部分是以1000個像素為界限，一般網(wǎng)站內(nèi)容顯示區(qū)域?yàn)?96px，因?yàn)槌^1000px適合在大屏幕上瀏覽，小屏幕會顯得比較擁擠。
目前主要的顯示器擁有
1、主流的兩類電腦顯示器分辨率如下：16:9比例的23與22（21.5）英寸寬屏液晶顯示器的最佳分辨率是：1920×1080（1080p FullHD全高清分辨率）；
2、16:10比例的28、27與26（25.5）、24英寸寬屏液晶顯示器的最佳分辨率是：1920×1200；
3、16:10比例的22（21.6）與20（20.1）英寸寬屏液晶顯示器的最佳分辨率是：1680×1050；
4、16:10比例的19（18.5）與17英寸寬屏液晶顯示器的最佳分辨率是：1440×900；
5、16:10比例的14、13、12（12.1）英寸寬屏液晶顯示器（多為筆記本電腦屏幕）的最佳分辨率是：1280×800；
二、Web網(wǎng)頁字體
字體設(shè)計(jì)的總原則是：可辨識性和易讀性。
網(wǎng)頁的中文字設(shè)計(jì)是系統(tǒng)默認(rèn)的字體：宋體、微軟黑體、蘋果系統(tǒng)黑體
英文則建議使用Times New Roamn、Arial、Comis Sans MS等無襯線字體
常用的字號大小有以下幾種：
12px是應(yīng)用于網(wǎng)頁的最小字體，適用于非突出性的日期，版權(quán)等注釋性內(nèi)容。
14px 則適用于非突出性的普通正文內(nèi)容。
16px、18px、20px、26px或者30px 適用于突出性的標(biāo)題內(nèi)容。注意都是偶數(shù)原則，奇數(shù)像素會出毛邊！
三、字體間距
字體間距，除了特殊的需求之外，都可以使用默認(rèn)數(shù)值的間距。
行間距：推薦以字體大小的1.5—2倍作為參考；
段間距：推薦以字體大小的2—2.5倍作為參考。
例如，當(dāng)選用14px 的字體時，行間距：21—28px；段間距：28px—35px。
四、字體顏色
六種除了主色調(diào)以外都是場景色，需要在不同的場景中使用（例如危險(xiǎn)色表示危險(xiǎn)的場景）六種是文字排版色，通過文字的不同用色進(jìn)行文字排版，以表現(xiàn)層次結(jié)構(gòu)。
主文字顏色，建議使用公司品牌的VI顏色，可提高公司網(wǎng)站與公司VI之間的關(guān)聯(lián)，增加可辨識性和記憶性。
正文字體顏色，保險(xiǎn)起見，選用易讀性的深灰色，建議選用 #333333到#666666 之間的顏色。
五、首屏內(nèi)容
做網(wǎng)頁設(shè)計(jì)時，你還要特別注意網(wǎng)頁的首屏內(nèi)容，在構(gòu)圖和內(nèi)容呈現(xiàn)上，首屏模塊的設(shè)計(jì)至關(guān)重要。
除去任務(wù)欄，瀏覽器菜單欄以及狀態(tài)欄的高度，剩下的是首屏的高度。
Window XP的首屏高度平均值是580px
Window 7的首屏高度平均值是710px
綜合考慮到Window XP已經(jīng)逐漸退出市場，在實(shí)際操作時，我們 以710px 作為依據(jù)。
如下圖所示，藍(lán)色區(qū)域則是我們設(shè)計(jì)時需要著重考慮的首屏范圍。
另外，是關(guān)于圖片尺寸的問題。
需要全屏顯示的圖片，寬度尺寸嚴(yán)格設(shè)計(jì)為1920px。
但是值得注意的是，圖片內(nèi)容的有效范圍不能超過網(wǎng)頁內(nèi)容的有效范圍，即控制在1200px以內(nèi)。
避免遇到小屏幕設(shè)備時，內(nèi)容顯示不全，而造成信息的遺漏的情況。
六、響應(yīng)式布局設(shè)計(jì)
響應(yīng)式設(shè)計(jì)指的是不同設(shè)備、屏幕、分辨率、操作方式（鼠標(biāo)、鍵盤、觸摸），保證信息在不同環(huán)境下表現(xiàn)一致，保證可交互可操作。
由于頁面的寬度發(fā)生了變化，進(jìn)而信息展現(xiàn)也改變了就是響應(yīng)式設(shè)計(jì)。直到最后在手機(jī)屏幕上的顯示圖片信息變成了一列。
對頁面進(jìn)行響應(yīng)式的設(shè)計(jì)實(shí)現(xiàn)，需要對相同內(nèi)容進(jìn)行不同寬度的布局設(shè)計(jì)，有兩種方式：桌面優(yōu)先（從桌面端開始向下設(shè)計(jì)）；移動優(yōu)先（從移動端向上設(shè)計(jì)）
無論基于哪種模式的設(shè)計(jì)，要兼容所有設(shè)備，布局響應(yīng)時不可避免地需要對模塊布局做一些變化（當(dāng)頁面寬度發(fā)生變化的尺寸范圍就是臨界點(diǎn)的概念。所以做響應(yīng)式設(shè)計(jì)時我們需要知道每一個尺寸的寬度范圍在多少時我們就可以制定出相對應(yīng)清晰的一個臨界點(diǎn)，制定了臨界點(diǎn)之后就知道，當(dāng)屏幕的寬度范圍位于哪一個點(diǎn)的時候，我們的頁面信息該如何展示。）
我們通過JS獲取設(shè)備的屏幕寬度，來改變網(wǎng)頁的布局，這一過程我們可以稱之為布局響應(yīng)屏幕。
常見的主要有如下幾種方式：
1、布局不變，即頁面中整體模塊布局不發(fā)生變化，主要有：
2、布局改變，即頁面中的整體模塊布局發(fā)生變化，主要有：
很多時候，單一方式的布局響應(yīng)無法滿足理想效果，需要結(jié)合多種組合方式，但原則上盡可能時保持簡單輕巧，而且同一臨界點(diǎn)內(nèi)（發(fā)生布局改變的臨界點(diǎn)稱之為臨界點(diǎn)）保持統(tǒng)一邏輯。否則頁面實(shí)現(xiàn)得太過復(fù)雜，也會影響整體體驗(yàn)和頁面性能。
八、網(wǎng)頁柵格
網(wǎng)上有些關(guān)于柵格化系統(tǒng)的文章講的非常理論化，又是算法又是模塊，而且和響應(yīng)式布局混在一起，讓新晉的網(wǎng)頁設(shè)計(jì)師們簡直無從下手，所以這里以案例來說明何時采用以及怎么最快的建立柵格化系統(tǒng)。在所有關(guān)于UI的文章中，我會反復(fù)強(qiáng)調(diào)和前端開發(fā)人員的溝通，因?yàn)樗麄兪悄阍O(shè)計(jì)方案的執(zhí)行者，這一點(diǎn)非常重要。
1.把柵格化設(shè)計(jì)和柵格化布局分開
強(qiáng)調(diào)柵格化設(shè)計(jì)（grid-design）和柵格化布局（css grid）分開描述，是個人理解這完全屬于兩個不同的工作，前者針對網(wǎng)頁設(shè)計(jì)師，而后者針對前端開發(fā)人員。柵格化設(shè)計(jì)是不需考慮頁面的響應(yīng)的基于柵格系統(tǒng)的設(shè)計(jì)，主要是為了提高網(wǎng)頁的規(guī)范性。對于一些中規(guī)中矩的網(wǎng)站，或者說一般創(chuàng)意型的網(wǎng)站，柵格化設(shè)計(jì)還是非常推薦的，尤其是一些規(guī)模大周期長，后期需要不斷迭代的項(xiàng)目，柵格化設(shè)計(jì)讓網(wǎng)頁呈現(xiàn)出專業(yè)可信賴感，并有助于后期的維護(hù)。而柵格化布局，特指前端攻城獅使用的css框架，來實(shí)現(xiàn)頁面的響應(yīng)式布局。
響應(yīng)式設(shè)計(jì)只是網(wǎng)頁設(shè)計(jì)的一個折中方案，依賴于項(xiàng)目實(shí)際情況進(jìn)行選擇。對于設(shè)計(jì)師來說，如果沒有必須的要求，可選擇廣義的柵格系統(tǒng)，并在此基礎(chǔ)上自由發(fā)揮創(chuàng)意。
2.絕不萬能的柵格化系統(tǒng)
對于是否采用柵格化設(shè)計(jì)，采用下面幾個案例說明一下：
（企業(yè)站之類-以介紹幾種單一產(chǎn)品為主）
（功能型網(wǎng)站）
（不拘泥形式的設(shè)計(jì)形式）
針對這三個具有代表性的案例，柵格化設(shè)計(jì)是沒有必要的。理由很簡單，柵格的優(yōu)點(diǎn)也是缺點(diǎn)，規(guī)范意味著統(tǒng)一也意味著限制，在以上的案例中，無需用柵格來限制設(shè)計(jì)師的靈感，畢竟這個社會，還是需要設(shè)計(jì)感的。
但絕大多數(shù)情況下，推薦柵格化設(shè)計(jì)。尤其是圖文混排、版塊很多的網(wǎng)站，柵格化設(shè)計(jì)會讓內(nèi)容雜亂無章的頁面呈現(xiàn)清爽感。
關(guān)于柵格化布局，方案非常多，來看下面幾個案例，我們都稱之為柵格化設(shè)計(jì)。
（廣義的柵格化系統(tǒng)-無間距的單元格）
（廣義的柵格化系統(tǒng)-有間距的單元格）
（廣義的柵格化系統(tǒng)-有間距的單元格）
對于不需要考慮頁面響應(yīng)（換句話說，和框架無關(guān)）的網(wǎng)頁設(shè)計(jì)，原則可以簡化成一句話：“由設(shè)計(jì)師自由決定”。
3.柵格化設(shè)計(jì)的參數(shù)
網(wǎng)上搜索結(jié)果最熱的960 gird柵格系統(tǒng)從2009年就開始正式推出，但至今，仍然有很多設(shè)計(jì)師在使用，除了考慮到顯示設(shè)備的分辨率，還依賴于960 gird的靈活性。所以，對于新晉web ui來說，采用960 grid 仍然是最佳的方案，不會出彩但也不會出錯。如果是考慮到寬屏的設(shè)計(jì)（需要舍棄一部分分辨率不高的用戶），可以把柵格化系統(tǒng)的寬度建為980甚至以上。但沒有柵格化設(shè)計(jì)經(jīng)驗(yàn)的設(shè)計(jì)師需要注意，這里說的960是含邊距部分，換句話說，在psd文檔中，你的內(nèi)容部分是950px，柵格化版面可以借助一些非常好用的在線工具，比如知名的Grid.Guide，這是12列柵格在內(nèi)容寬度950下的三種版式規(guī)范，你也可以使用24列，靈活度更高。
Grid-Guide自動生成的柵格系統(tǒng)（寬950-12列）
從圖中可以看出，這三種方案列寬column width和間距gutter不同，剩下的工作對于ui設(shè)計(jì)師來說就簡單了很多，你可以把版式規(guī)范的png格式下載下來，作為你網(wǎng)頁設(shè)計(jì)的基礎(chǔ)版塊，在此基礎(chǔ)上進(jìn)行列的劃分?；蛘咧皇且赃@個參數(shù)為基礎(chǔ)，重新建立參考線（我更推薦這種方式，尤其photoshop cc2017的新建參考線版面，裝訂線對應(yīng)Gutter，列寬對應(yīng)column width）。我簡單的拿版式規(guī)范做了個頁面設(shè)計(jì)示意圖，這就是基于柵格系統(tǒng)設(shè)計(jì)的優(yōu)點(diǎn)，在劃分列時，有理可依，有據(jù)可循。
【基于960grid系統(tǒng)的版塊劃分示意】
當(dāng)然，既然是設(shè)計(jì)師，就可以感性的元素再多一些。比如，你希望更多的留白，就可以采用間距值較大的柵格版式，只要整個網(wǎng)站保持一個統(tǒng)一的版式即可。下圖是當(dāng)內(nèi)容寬度為1200時生成的柵格系統(tǒng)，你還可以嘗試很多方案，但Max Width的設(shè)定并不是那么隨意，這個取決于網(wǎng)站的定位。
Grid-Guide自動生成的寬1180的柵格系統(tǒng)（24列）
至于高度和垂直間距，柵格化系統(tǒng)并沒有統(tǒng)一的準(zhǔn)則，設(shè)計(jì)師可以采用一些黃金分割之類滿滿的都是設(shè)計(jì)感之類的值，或者垂直間距與柵格系統(tǒng)的間距相同或是整倍，總之，也需要一個規(guī)范指導(dǎo)全站設(shè)計(jì)。
柵格系統(tǒng)的參數(shù)根據(jù)項(xiàng)目的實(shí)際情況，盡量建立10的倍數(shù)或8的倍數(shù)（google material design推薦）。
4.柵格化布局的參數(shù)
在前面提到過，如果網(wǎng)站的需求是響應(yīng)式的設(shè)計(jì)，這時，設(shè)計(jì)師們一定一定先問一下前端他們準(zhǔn)備如何實(shí)現(xiàn)響應(yīng)式布局，而不是把設(shè)計(jì)稿完成后交給他們后YY他們能百分百給你復(fù)現(xiàn)你的設(shè)計(jì)稿。
關(guān)于響應(yīng)式的柵格系統(tǒng)，首先聲明一點(diǎn)，當(dāng)前端樂意并了解CSS原理和框架的構(gòu)建方式時，可以構(gòu)建其他樣式的網(wǎng)格，比如7、9、11、13等等，甚至各種異形網(wǎng)格，但在絕大多數(shù)情況下，更多的前端攻城獅青睞于高（tou）效(lan)，而他們常用的css框架除了Bootstrap(寬480/768/992/1200,12列)，還有一堆叫不出名字的輕量css框架（畢竟柵格系統(tǒng)只是Bootstrap的一部分，如果只是需要一個響應(yīng)式的css的話，可選的非常多，比如960.gis），除此之外，有可能你那可愛的前端攻城獅用的是flexbox實(shí)現(xiàn)響應(yīng)式彈性布局，所以在一切未知確定下來之前，請放下架子，請教一下開發(fā)人員，因?yàn)殡m然不想承認(rèn)，但這種情況下是前端來指導(dǎo)設(shè)計(jì)。值得慶幸的是，這種情況在現(xiàn)實(shí)中非常少的，（但不排除你接手的是一個二次開發(fā)的項(xiàng)目等等之類），確定他們使用哪種框架之后，設(shè)計(jì)師可以開始自己的工作了。
下面也舉個例子，是960gis的。
【960-grid-system柵格化布局】
看完你也許會明白為什么涉及到柵格化布局需要前端來確定了，960gis的css框架給出了三種方案，24列16列12列，設(shè)計(jì)師要在這個基礎(chǔ)上進(jìn)行設(shè)計(jì)。一旦需要柵格化布局，意味著設(shè)計(jì)師自由發(fā)揮的空間再次縮減，只有在這三個方案上選一種。這些方案從何而來呢？很簡單，你只要向前端索取他使用的框架的psd模板即可，里面參考線都是建好的。而前端一定會非常樂意幫你這個忙，理由很簡單，你按照他使用的框架規(guī)范進(jìn)行設(shè)計(jì)也是在一定程度上縮減他的工作量，皆大歡喜。比如下面這張，就是目前最新的Bootstrap4的psd文件的截圖。
【Bootstrap4】
設(shè)計(jì)師也可以自給自足，一般這些css框架庫都會提供下載途徑。尤其是Bootstrap，作為成熟的框架，很多模板文件可以套用。柵格化布局以使用的css框架庫為準(zhǔn)則，讓前端開發(fā)提供給設(shè)計(jì)師再好不過。
九、命名規(guī)范
1、網(wǎng)站設(shè)計(jì)及基本框架結(jié)構(gòu)
1.1 Container
“container“ 就是將頁面中的所有元素包在一起的部分，這部分還可以命名為: “wrapper“, “wrap“, “page“.
1.2 Header
“header” 是網(wǎng)站頁面的頭部區(qū)域，一般來講，它包含網(wǎng)站的logo和一些其他元素。這部分還可以命名為:“page-header” (或 pageHeader).
1.3 Navbar
“navbar“等同于橫向的導(dǎo)航欄，是最典型的網(wǎng)頁元素。這部分還可以命名為:“nav”, “navigation”, “nav-wrapper”.
1.4 Menu
“Menu”區(qū)域包含一般的鏈接和菜單，這部分還可以命名為: “subNav “, “l(fā)inks“，“sidebar-main”.
1.5 Main
“Main”是網(wǎng)站的主要區(qū)域，如果是博客的話它將包含的日志。這部分還可以命名為: “content“, “main-content” (或“mainContent”)。
1.6 Sidebar
“Sidebar” 部分可以包含網(wǎng)站的次要內(nèi)容，比如最近更新內(nèi)容列表、關(guān)于網(wǎng)站的介紹或廣告元素等…這部分還可以命名為: “subNav “, “side-panel“, “secondary-content“.
1.7 Footer
“Footer”包含網(wǎng)站的一些附加信息，這部分還可以命名為: “copyright“.
2、需要注意的幾點(diǎn):
2.1盡量考慮為元素命名其本身的作用或”用意”，達(dá)到語義化。
不要使用表面形式的命名.
如:red/left/big等。
2.2組合命名規(guī)則:
[元素類型]-[元素作用/內(nèi)容]
如:搜索按鈕: btn-search
登錄表單:form-login
新聞列表:list-news
2.3 涉及到交互行為的元素命名
凡涉及交互行為的元素通常會有正常、懸停、點(diǎn)擊和已瀏覽等不同樣式，命名可參考以下規(guī)則:
鼠標(biāo)懸停:：hover 點(diǎn)擊：click 已瀏覽：visited
如:搜索按鈕: btn-search、btn-search-hover、btn-search-visited
3、常用命名匯總:
頁頭:header
登錄條:loginbar
標(biāo)志:logo
側(cè)欄:sidebar
廣告條:banner
導(dǎo)航:nav
子導(dǎo)航:subNav
菜單:menu
子菜單:subMenu
下拉菜單:dropMenu
工具條: toolbar
表單:form
欄目:column
箭頭:arrow
搜索:search
搜索按鈕:btn-search
滾動條:scroll
內(nèi)容:content
標(biāo)簽頁:tab
文章列表:list
提示信息:msg
小技巧:tips
欄目標(biāo)題:title
鏈接:links
頁腳:footer
服務(wù):service
熱點(diǎn):hot
新聞:news
下載:download
注冊:regsiter
狀態(tài):status
按鈕:btn
投票:vote
合作伙伴:partner
版權(quán):copyright
網(wǎng)站地圖: sitemap
以上命名規(guī)范僅供參考
關(guān)鍵詞：產(chǎn)品,規(guī)范,經(jīng)理,原型
在線咨詢