国产精品一区电影_国产男女无遮挡猛进猛出_日本丰满熟妇videossex8k_中文字幕无码乱人伦,久久综合伊人77777麻豆,亚洲最大在线观看,无码人妻久久一区二区三区app

網(wǎng)頁設計規(guī)范

作者：龍 時間：2018-07-30 瀏覽：

終于，經(jīng)歷過長篇大論網(wǎng)站的原理與組成部分后，我們要談談網(wǎng)站設計的規(guī)范了。網(wǎng)站設計并無具體平臺限定的風格，也沒有必須要設計的系統(tǒng)級導航欄和工具欄。所以網(wǎng)站設計更加靈活，然而因為太靈活也會讓我們的設計師無從下手。那么接下來我將介紹網(wǎng)站設計的規(guī)范，在您工作的時候可以參考。注意，在設計之前一定要和前端溝通我們使用的尺寸、字體、交互等，這樣有助于后期不會有誤會。

1. 畫板尺寸

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

2. 文字規(guī)范

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

3. 圖片規(guī)范

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

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

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

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

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

4. 按鈕

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

5. 表單

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

6. 柵格

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

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

7. 適配Retina屏幕

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

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

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

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

自適應網(wǎng)站

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

響應式網(wǎng)站

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

適配的規(guī)范

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

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

總結

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

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

如果設計手機端的頁面，可以按照750X1334PX尺寸設計。字體使用蘋方24PX以上、銳利。英文字體使用SF UI。按鈕和點擊區(qū)域需要大于88PX方便手指點擊。并且頭部需要預留出微信或瀏覽器的導航區(qū)域。