亚洲一区二区三区无码少年_日韩亚洲欧美综合一区二区三区_国产精品成人69xxx_被主人狠狠调教打屁股_国产女厕所偷窥系列在线视频_老头猛挺进王进霞的体内视频_日本女同伦理片_一级毛片特黄视频免费观看_国产成人无码免费看视频软件

網(wǎng)頁(yè)設(shè)計(jì)規(guī)范

作者：龍 時(shí)間：2018-07-30 瀏覽：

終于，經(jīng)歷過(guò)長(zhǎng)篇大論網(wǎng)站的原理與組成部分后，我們要談?wù)?a href="http://www.ahtchina.net">網(wǎng)站設(shè)計(jì)的規(guī)范了。網(wǎng)站設(shè)計(jì)并無(wú)具體平臺(tái)限定的風(fēng)格，也沒(méi)有必須要設(shè)計(jì)的系統(tǒng)級(jí)導(dǎo)航欄和工具欄。所以網(wǎng)站設(shè)計(jì)更加靈活，然而因?yàn)樘`活也會(huì)讓我們的設(shè)計(jì)師無(wú)從下手。那么接下來(lái)我將介紹網(wǎng)站設(shè)計(jì)的規(guī)范，在您工作的時(shí)候可以參考。注意，在設(shè)計(jì)之前一定要和前端溝通我們使用的尺寸、字體、交互等，這樣有助于后期不會(huì)有誤會(huì)。

1. 畫(huà)板尺寸

因?yàn)榫W(wǎng)頁(yè)尺寸與用戶(hù)屏幕相關(guān)，而用戶(hù)屏幕的種類(lèi)難以統(tǒng)計(jì)。所以我們的設(shè)計(jì)稿只能主要顧及主流用戶(hù)的分辨率，其他分辨率用適配的方式來(lái)解決。在最新版 Photoshop 網(wǎng)站 Web 預(yù)設(shè)尺寸給了我們一些啟示：常見(jiàn)尺寸（1366x768px）、大網(wǎng)頁(yè)（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13 （2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等。這些是主流尺寸，而我們?nèi)绻鼍W(wǎng)站時(shí)建議按主流的分辨率1920x1080px來(lái)設(shè)計(jì)。所以我們通常設(shè)計(jì)網(wǎng)站時(shí)的網(wǎng)站寬度為1920px，每個(gè)屏幕的高度約為900px。為什么是900px呢？因?yàn)?080還要減去瀏覽器頭部和底部高度，大約就是900px了。內(nèi)容安全區(qū)域?yàn)?200px （或1000px / 1400px）。以這個(gè)尺寸來(lái)設(shè)計(jì)相對(duì)標(biāo)準(zhǔn)。當(dāng)然在設(shè)計(jì)網(wǎng)頁(yè)前需要知會(huì)前端設(shè)計(jì)尺寸，因?yàn)閷?duì)于適配的方式和后續(xù)配合他們更有發(fā)言權(quán)。

2. 文字規(guī)范

我們現(xiàn)在都知道了網(wǎng)站上面的文字是通過(guò)前端工程師重新寫(xiě)在代碼里的。那這種文字在瀏覽器上的渲染與系統(tǒng)和瀏覽器有關(guān)。比如在蘋(píng)果電腦上看到的文字效果和 Windows 系統(tǒng)電腦上看到的文字效果就有所不同：蘋(píng)果會(huì)對(duì)文字進(jìn)行渲染，而 windows 的文字幾乎充滿(mǎn)了像素顆粒。按照用戶(hù)占比來(lái)說(shuō)無(wú)疑 Windows 的用戶(hù)是主流，所以盡管我們可能使用蘋(píng)果電腦設(shè)計(jì)網(wǎng)頁(yè)，但是設(shè)計(jì)出來(lái)的網(wǎng)頁(yè)效果也應(yīng)該和 Windows 顯示一致。否則我們?cè)O(shè)計(jì)完漂亮的設(shè)計(jì)稿，程序員無(wú)法還原成我們?cè)O(shè)計(jì)的樣子。另外，字號(hào)的大小也非常重要。網(wǎng)頁(yè)的顯示區(qū)域決定了文字不可以過(guò)大，在網(wǎng)站設(shè)計(jì)中我們的文字大小一般來(lái)說(shuō)是12-20像素。為什么不能比12px更??？因?yàn)槿绻?2像素更小的中文無(wú)法放得下復(fù)雜的筆畫(huà)了。而且奇數(shù)的文字表現(xiàn)和適配都不好做，也就是說(shuō)我們必須使用偶數(shù)的字號(hào)來(lái)設(shè)計(jì)。那么總結(jié)一下：文字使用宋體、大小為12px、渲染方式選擇無(wú)。稍大一些的字體使用微軟雅黑、大小為14-20px、渲染方式選擇 Windows Lcd 或銳利。另外，英文和數(shù)字需使用 Arial字體，渲染方式選擇無(wú)。

3. 圖片規(guī)范

網(wǎng)站設(shè)計(jì)中的圖片常用4（寬）：3（高）、16（寬）：9（高）、1:1等比例。具體圖片大小沒(méi)有固定要求，但整數(shù)和偶數(shù)為佳。主要是考慮到一些適配的問(wèn)題。作為內(nèi)容出現(xiàn)的圖片一定需要有介紹信息和排序信息。圖片的格式有很多，比如支持多級(jí)透明的 png 格式、圖片文件很小的 jpg 格式、支持透明/不透明并且支持動(dòng)畫(huà)的 gif 格式等。在保證圖像清晰度地情況下文件大小越小越好，如何讓網(wǎng)頁(yè)使用的圖片更小呢？

第一種方法，給程序員切圖的時(shí)候我們可以適當(dāng)縮小圖片文件的大小。比如 Photoshop 中存儲(chǔ)為 web 所用格式就會(huì)比快速存儲(chǔ)文件更小。

第二種方法，可以嘗試使用例如 Tinypng、智圖等工具再次壓縮圖片。這些工具會(huì)把圖片中的多余信息刪除并且壓縮，而圖像質(zhì)量不受損失。

第三種方法，Google 研發(fā)了一種 Webp 格式，它的圖片壓縮體積大約只有 JPEG 的2/3，能節(jié)省大量的服務(wù)器寬帶資源。比如 Facebook、Ebay 還有我們?cè)O(shè)計(jì)師常用的站酷圖片存儲(chǔ)都是使用了 Webp 圖片格式。

第四種方法，瀏覽器和服務(wù)器握手時(shí)需要下載網(wǎng)頁(yè)所調(diào)用的圖片資源，那么如果一個(gè)網(wǎng)站有一百?gòu)垐D片的話(huà)，瀏覽器和服務(wù)器就得握一百次。第一會(huì)耗費(fèi)服務(wù)器資源，第二訪(fǎng)問(wèn)速度就會(huì)慢一些。所以前端工程師們有一種做法，就是把網(wǎng)頁(yè)中所使用的圖片拼成一大張 png。然后每個(gè)調(diào)用圖片的元素都調(diào)用這張圖片然后分別位移一點(diǎn)兒，顯示的那塊區(qū)域移動(dòng)到一大張圖片中所需要的那個(gè)圖像。

4. 按鈕

按鈕的風(fēng)格在過(guò)去的十幾年發(fā)生了很大的變化，由一開(kāi)始的「斜面與浮雕」風(fēng)格過(guò)渡到后面的「擬物風(fēng)格」，現(xiàn)在更流行的是扁平風(fēng)格。如果按鈕在一張圖片中，為了不影響圖片的美觀性，會(huì)去掉填充只保留邊框，這種設(shè)計(jì)方式叫做幽靈按鈕。注意在設(shè)計(jì)按鈕時(shí)記得同時(shí)設(shè)計(jì)好按鈕的鼠標(biāo)懸停、按下?tīng)顟B(tài)。

5. 表單

在網(wǎng)站設(shè)計(jì)中我們經(jīng)常需要使用一些輸入框、下拉菜單、彈窗、單選框、復(fù)選框、編輯器等。這些都是系統(tǒng)級(jí)的控件，一般是直接調(diào)用系統(tǒng)設(shè)計(jì)的。但是系統(tǒng)設(shè)計(jì)有時(shí)不能滿(mǎn)足我們的要求：系統(tǒng)內(nèi)置的表單高度不夠，點(diǎn)擊起來(lái)不舒服；不符合網(wǎng)站整體設(shè)計(jì)的品牌感等。那么我們可以通過(guò) CSS 給這些表單增加樣式，包括顏色、大小、內(nèi)外邊距等。所以我們遇到涉及到表單的需求時(shí)也可以進(jìn)行自定義設(shè)計(jì)。

6. 柵格

我們把整體寬度定義為 W。然后整個(gè)寬度分成多個(gè)等分單元 A。每個(gè)單元 A 中有元素 a 和間距 i。所以他們之間的關(guān)系就是 (A×n)-i=W。當(dāng)然每個(gè)應(yīng)用的尺寸不止可以整除成一種柵格，這就要看我們內(nèi)容排版的疏密程度了。之后，我們將過(guò)多內(nèi)容的柵格和另一個(gè)柵格相加得到更大的排版空間；其他元素都須老老實(shí)實(shí)呆在自己的柵格內(nèi)，這樣就完成了一個(gè)布局非常科學(xué)的設(shè)計(jì)了。 比如：

柵格系統(tǒng)具體有以下優(yōu)勢(shì)：能大大提高網(wǎng)頁(yè)的規(guī)范性。在柵格系統(tǒng)下，頁(yè)面中所有組件的尺寸都是有規(guī)律的。另外，基于柵格進(jìn)行設(shè)計(jì)，可以讓整個(gè)網(wǎng)站各個(gè)頁(yè)面的布局保持一致。這能增加頁(yè)面的相似度，提升用戶(hù)體驗(yàn)。

7. 適配Retina屏幕

2012年蘋(píng)果發(fā)布了 Retina Macbook Pro，Retina 屏幕的電腦占有量越來(lái)越高了。Retina 屏幕簡(jiǎn)單地說(shuō)就是屏幕密度是傳統(tǒng)屏幕的兩倍，擁有更大地清晰度。甚至可以滿(mǎn)足我們視網(wǎng)膜最高的識(shí)別度，所以也叫視網(wǎng)膜屏幕。這種屏幕下我們?cè)O(shè)計(jì)的安全距離大約為1000像素的網(wǎng)站就顯得非常粗糙了。所以如果我們現(xiàn)在 Retina 屏幕下顯示一個(gè)400X300PX的區(qū)域，實(shí)際上我們需要提供給前端一張800X600PX的切圖才行，因?yàn)?Retina 屏幕一個(gè)點(diǎn)頂過(guò)去兩個(gè)像素。那么我們的用戶(hù)是視網(wǎng)膜屏占比更多的用戶(hù)，比如設(shè)計(jì)師群體，那怎么兼顧高清屏幕和普通屏幕呢？

首先我們需要以視網(wǎng)膜屏幕大小完成設(shè)計(jì)稿，建議是傳統(tǒng)設(shè)計(jì)稿的兩倍。之后切出兩套切圖（非 Retina 屏幕用戶(hù)如果也加載雙倍大小的資源會(huì)很慢），普通的切圖命名為如logo.jpg，Retina切圖命名為[email protected]。前端用代碼來(lái)識(shí)別，如果屏幕是 Retina 就加載雙倍尺寸，不是則加載普通尺寸。前端可以使用 Retina.js提供的技術(shù)進(jìn)行識(shí)別。

8. 自適應(yīng)與響應(yīng)式網(wǎng)站

我們看到有些網(wǎng)站使用電腦端或者手機(jī)端甚至 iPad 去瀏覽時(shí)體驗(yàn)都非常好。這就需要我們?yōu)榱擞脩?hù)體驗(yàn)而進(jìn)行網(wǎng)站的自適應(yīng)或響應(yīng)式布局了。響應(yīng)式與自適應(yīng)的原理是相似的，都是通過(guò)代碼檢測(cè)設(shè)備屏幕寬度，根據(jù)不同的設(shè)備加載不同的 css。

自適應(yīng)網(wǎng)站

自適應(yīng)網(wǎng)站的設(shè)計(jì)稿是一致的，但是設(shè)計(jì)稿需要考慮屏幕變小時(shí)的變化方式。比如一個(gè)網(wǎng)站的內(nèi)容有5個(gè)區(qū)塊和4個(gè)間距，那么如果寬度縮小成900時(shí)需要如何變化，這就是自適應(yīng)布局。比如站酷網(wǎng)、Dribbble 等網(wǎng)站都采用了自適應(yīng)布局。

響應(yīng)式網(wǎng)站

響應(yīng)式網(wǎng)站則需要設(shè)計(jì)不同版本的設(shè)計(jì)稿，然后根據(jù)不同的設(shè)備提供不同的 CSS 樣式。比如判定你設(shè)備的寬度是750px，那么網(wǎng)站就知道你使用了手機(jī)來(lái)訪(fǎng)問(wèn)，就會(huì)給你導(dǎo)入一份手機(jī)才有的樣式；如果是電腦的寬度就給你導(dǎo)入電腦的 CSS 樣式。對(duì)于設(shè)計(jì)師來(lái)說(shuō)，自適應(yīng)需要考慮網(wǎng)站在不同設(shè)備寬度下的整除與排版；響應(yīng)式則需要設(shè)計(jì)電腦、平板、手機(jī)等至少三套設(shè)計(jì)稿（但這三套設(shè)計(jì)稿的內(nèi)容是一致的）?？傊赃m應(yīng)和響應(yīng)式都是網(wǎng)站為了用戶(hù)體驗(yàn)所適應(yīng)瀏覽設(shè)備而做出的努力。

適配的規(guī)范

手機(jī)方面：適配手機(jī)頁(yè)面時(shí)，我們一般以 iPhone 為畫(huà)布標(biāo)準(zhǔn)。原因是 iPhone 相對(duì)顯示比較清晰，并且要求較高。而且用戶(hù)占有量也很高。在適配時(shí)我們一般以750x1334px尺寸為主，然后將網(wǎng)站導(dǎo)航改變?yōu)槭謾C(jī) APP 常常使用的漢堡包+抽屜式導(dǎo)航的形式。同時(shí)網(wǎng)站里的按鈕也需要變?yōu)槭謾C(jī) APP 中我們看到的左右?guī)缀鯘M(mǎn)屏的按鈕，并且每個(gè)按鈕要大于88PX，方便手指的點(diǎn)擊。字體方面，我們要把網(wǎng)站的字體全部改為蘋(píng)方字體，并且字號(hào)設(shè)置為24PX以上，渲染方式設(shè)置成銳利。英文則需要使用 SF-UI 代替。也就是將網(wǎng)站改變成一個(gè)類(lèi) APP 的手機(jī)網(wǎng)頁(yè)，這樣才可以保證手機(jī)用戶(hù)體驗(yàn)良好。如果用戶(hù)使用安卓手機(jī)，那么前端代碼則會(huì)基于設(shè)計(jì)稿的設(shè)計(jì)適度加大圖片與間距來(lái)適應(yīng)安卓屏幕。

iPad：iPad的尺寸為1024×768、2048x1536px等，無(wú)論怎么變基本與電腦屏幕尺寸類(lèi)似。所以在 iPad 上瀏覽網(wǎng)頁(yè)是基本舒適的。因此，很多網(wǎng)站并沒(méi)有專(zhuān)門(mén)為 iPad 做適配，如果我們希望 iPad 用戶(hù)用的更爽，可以從文字大?。?4PX以上）、按鈕大?。?8PX左右以及以上）、交互形式（抽屜式導(dǎo)航、導(dǎo)航不隨屏幕滾動(dòng)）等方式入手。

總結(jié)

無(wú)論您面對(duì)的項(xiàng)目是 To C 的還是 To B 的網(wǎng)站產(chǎn)品，我們都應(yīng)該首先確立設(shè)計(jì)風(fēng)格 > 尋找設(shè)計(jì)素材 > 建立情緒板 > 完成視覺(jué)稿 > 切圖標(biāo)注 > 建立視覺(jué)規(guī)范 > 進(jìn)行項(xiàng)目走查。

如果設(shè)計(jì)一般網(wǎng)站的頁(yè)面，可以按照1920 X 1080px尺寸設(shè)計(jì)。每屏高度900px，字體使用宋體12px、無(wú)和微軟雅黑 14-20、Windows LCD。Banner 盡量滿(mǎn)屏，但是圖片需要按照4:3或16:9等比例來(lái)設(shè)計(jì)。做網(wǎng)站時(shí)可以建立柵格以更好地進(jìn)行自適應(yīng)和響應(yīng)式布局，我們也要為超鏈接和按鈕設(shè)計(jì)不同的相應(yīng)鼠標(biāo)的狀態(tài)；另外我們也可以多多嘗試在網(wǎng)站設(shè)計(jì)中加入視差滾動(dòng)、雪碧圖動(dòng)畫(huà)等好玩的交互。

如果設(shè)計(jì)手機(jī)端的頁(yè)面，可以按照750X1334PX尺寸設(shè)計(jì)。字體使用蘋(píng)方24PX以上、銳利。英文字體使用SF UI。按鈕和點(diǎn)擊區(qū)域需要大于88PX方便手指點(diǎn)擊。并且頭部需要預(yù)留出微信或?yàn)g覽器的導(dǎo)航區(qū)域。