中國70周年大慶馬上就到了，每逢國慶、春節等重要節日，一些街道路燈桿、店鋪門口都會不約而同地自發懸掛國旗，以示慶祝，那隨風飄揚的五星紅旗也成了節慶期間一道靚麗的風景。關于懸掛國旗，有哪些規定呢？

國旗是國家的標志，代表國家的主權和尊嚴。世界各國國旗的樣式、圖案、色彩和使用辦法，均由憲法和專門法律規定。為了維護國家的主權和尊嚴，增強公民的國家觀念和愛國意識，加強愛國主義教育，我國1990年6月28日第七屆全國人民代表大會常務委員會第十四次會議通過了《中華人民共和國國旗法》，自1990年10月1日施行，共二十條。其中，第三條中華人民共和國國旗是中華人民共和國的象征和標志。每個公民和組織，都應當尊重和愛護國旗。第四條地方各級人民政府對本行政區域內國旗的升掛和使用，實施監督管理。第七條國慶節、國際勞動節、元旦和春節，各級國家機關和各人民團體應當升掛國旗；企業事業組織，村民委員會、居民委員會，城鎮居民院（樓）以及廣場、公園等公共活動場所，有條件的可以升掛國旗。第八條舉行重大慶祝、紀念活動，大型文化、體育活動，大型展覽會，可以升掛國旗。第十五條升掛國旗，應當將國旗置于顯著的位置。第十七條不得升掛破損、污損、褪色或者不合規格的國旗。第十八條國旗及其圖案不得用作商標和廣告，不得用于私人喪事活動。

目前在街道路燈桿上懸掛國旗，《中華人民共和國國旗法》沒有明確統一的規范標準。國家層面還沒有出臺對街巷路燈桿國旗懸掛的具體規范要求。經過查詢政務公開網站，目前，在街道路燈桿豎掛國旗時普遍采用的方式有兩種：一種是以上海等城市為代表的懸掛方式，一種是“南京標準”。上海等城市的懸掛方式為“五星”圖案在燈桿外側的方式。南京市政府官方網站于2018年元旦前向社會公布了《關于利用路燈設施營造節日氛圍設置相關內容的管理規范》?！兑幏丁分幸?，國旗懸掛時不得影響路燈現有桿件設施及遮擋標識、標牌等，懸掛高度不得影響交通行車及行人安全。在懸掛國旗時，要求國旗“五星”圖案沖向內側燈桿方向。經咨詢南京市執法局有關負責同志答復，《規定》是依照國旗法和國際慣例，在街道路燈桿懸掛國旗時，主圖案應沖向燈桿內側方向的規則出臺的地方性規范標準文件，具體原則是莊重、規范、統一和安全。“南京標準”是目前唯一在官方網站公開發表并以正式文件進行規范的國旗懸掛方式。

中華人民共和國國旗法 https://baike.so.com/doc/5411350-5649451.html

南京為路燈桿懸掛國旗、紅燈籠、中國結定了規范http://mini.eastday.com/mobile/171229181231931.html?spm=zm5004-001.0.0.1.lYmb2x&from=singlemessage&isappinstalled=0

來源：中國唐堯網

來源：網信高碑店

上一篇文章中小白已經講解了文字標注，詳情見什么樣的設計標注稿更易于前端實現？-（文字篇）。

以下內容針對于web設計的標注基礎知識，前端專業人士與設計高手可忽略此文。

一、關于圖片

在網頁設計中常見的有圖標、不規則圖形、圖片、GIF動圖。

1.格式

在網頁設計中，圖標與不規則圖形通常用png格式，圖片通常用jpg格式。以下是各種格式的特性說明：

圖片來自網絡

2.控制圖片的體積

對于軟件而言，圖片越多，體積越大，可能就會造成多次網絡請求、占用較大的寬帶資源與數據空間。對于用戶來講，可能會明顯感知到圖片加載的等待過程，我們需要在圖片質量與體積之間尋找平衡點，尤其是分辨率較高、色彩較為豐富的高質量攝影素材，我們在導出成web可用的素材時應該在圖片的精細度不降低的前提下縮小圖片體積。但是即便怎么優化，我們也難以預料各種網絡因素，所以通常我們除了提供圖片素材本身，也會提供加載狀態時的設計。除此，存放在服務器里的圖片也可能被刪除、或者找不到。總之，我們要考慮圖片加載失敗或者丟失的設計。

舉個例子，我們在淘寶網站中看到的banner圖，如下，像素尺寸1130×500，實際的文件大小只有幾十KB。如果你的網站圖片素材較多，請一定別忘了壓縮體積這件事。

3.減少圖片的使用

如果前端可以用代碼實現的簡單幾何圖形，圓角、漸變、陰影等。我們就無需提供圖片素材了，除非實現出來的效果丑爆了、非常影響用戶體驗。舉個例子，前端css樣式里有跟photoshop對應的投影效果、如投影顏色、不透明度、投影角度、投影的偏移大小、投影的模糊大小等（請注意就不要使用各種圖層疊加效果了哦，否則前端按照你的標注實現出現的投影效果跟預期偏差很大哦），有責任心的前端小伙伴一定能實現一般的投影需求。

除此，同一圖標素材的不同狀態：默認、懸停、按下（網頁通常不需要按下效果）、禁用，我們往常需要提供4張素材。但是，通過透明度（opacity）（請注意photoshop圖層里效果里的是不透明度值，建議標注的時候轉換成透明度值哦，）的處理，且在不影響用戶體驗和設計的目的情況下，我們便可以只使用一張圖片就能搞定控件的多種狀態，從而減少圖片的使用和網絡請求。

將網頁中的圖標與圖形整合在一張圖片文件中（俗稱雪碧圖），前端小伙伴會定位到對應的位置上。這樣做的好處是減少了網頁的http的請求次數，也減少了圖片的總體積（單獨一張雪碧圖比很多張小圖的總大小還要小，降低了服務器存儲壓力）。直觀點說，如果每張圖單獨提供，你可能會發現圖片出現的比文字晚一些，會不那么流暢（一閃一下，這樣做法的網頁很多，大家可以自行去觀察）。這樣做的缺點是如果圖片有改動，設計師需要花精力更新、維護好圖片文件哦。

為了方便前端的小伙伴精準定位，我們需要把小圖片排整齊了，并標注出圖片之間的間距。如果網站涉及到的圖標與圖形比較多，可以按照內容或者交互模塊拆分為幾張圖。大家看下網易云音樂里的素材。

來自網易云音樂

來自網易云音樂

4.圖標字體iconfont與SVG格式圖標

現在較為流行的方式是使用圖標字體化iconfont，顧名思義，就是把圖標處理成字體來顯示在屏幕上。使用字體圖標可以不受屏幕分辨率的限制，因為前端可以控制、調整圖標的大小、顏色和更多的樣式效果，并且不會變模糊哦。所以很多網頁開發都在嘗試這種方法了。

那設計師如何制作字體文件呢？首先用AI制作矢量圖標（直接黑或白單色就可以啦），做好后另存為SVG格式（一種圖標字體文件啦），SVG格式可以使用瀏覽器打開預覽效果；然后打開制作圖標字體網站 https://icomoon.io/，導入自己SVG文件，就能生成一個字體文件壓縮包，把這個包包丟給前端就可以了。

給大家百度了一個該網站生成圖標字體的教程。

當然icomoon這個網站還可以找到一些免費可供使用的SVG圖標，除此，大家也可以使用阿里的iconfont網站上傳維護自己的SVG圖標。

但是iconfont有幾個缺點：

• 跟文字一樣，只能支持單色哦。
• 字體文件體積較大，影響頁面的加載速度，尤其是包含數百圖標的字體，卻使用了其中幾個，豈不是很浪費？
• 既然是字體文件，不同瀏覽器渲染出來的效果就會有差異，說白了，樣式可調整的空間越大，就越難控制最后顯示出來的效果。同樣瀏覽器也會將其視為字體進行抗鋸齒處理，有時效果并沒有想象中的那么清晰銳利（相對與純圖片效果還是有優勢的）。

那既然圖標字體有這么多的問題，那么為什么不直接使用SVG格式呢？畢竟圖標字體也是通過SVG封裝形成的，這樣我們就可以避免字體帶來的一些缺點，同時可以保留矢量圖形的優點。對于前端來講，可以直接調用SVG格式的圖片，跟調用png、jpg圖片一樣的。既然只是提供SVG格式，那么在AI中制作圖標時候，可以多嘗試幾種顏色了。以后提供一張SVG圖片，就可以適用在不同尺寸需要的地方。 如何去發現網頁中圖標是否使用了SVG格式呢？你可以右擊圖標，點擊“審查元素”。如果看不懂，最笨最直接的方法就是使勁的放大，看看有沒有發生模糊。

所以呢，還是要根據具體情況采用具體的策略的，例如淘寶網站里很多單色圖標都是使用圖標字體實現的。

二、如何標注

1.圖標與圖形

（1）不規則圖形的標注

前端能寫出來的圖形，我們直接標注尺寸就行，如果是不規則圖形，我們需要把不規則的部分切圖提供給前端。如果規則部分的圖形尺寸是隨內容擴展的，那我們還要說明規則。舉個例子，如下

（2）圖標與文字組合的標注

圖標與文字的組合通常是標題或者按鈕。需要標注出圖標與文字的間據，圖標與其他盒子的間距。如果圖標充當了背景，盡量提供與所在盒子一樣的尺寸，減少前端不停位移對位置的工作。

2.圖片素材

（1）固定尺寸的圖片標注

比較常規，直接標注出長與寬，與其他盒子的間距即可。

（2）需要縮放、裁切的圖片說明

在做圖片懸掛效果時，可以會稍微的縮放圖片的尺寸，在制作素材的時候我們需要提高最大尺寸的那張圖，然后需要標注出另外一張圖的縮放比例。如圖：

（3）背景圖片

在網頁設計中較為流行的是采用背景大圖，直接鋪滿的那種。如果是可拼接的圖形還好，你只需提供一個單元的素材即可。如果是高品質素材，如上文所述，我們需要控制圖片的體積大小，根據不同的屏幕分辨率提供不同尺寸的素材?；蛘呖刂茍D片體積的基礎上，直接提供一張1920px寬度的背景圖片。例如唯品會頁面的banner圖片處理，當屏幕分辨率變小時，背景圖片邊上的部分就被裁切。

下面是淘寶一網店首頁banner圖，當屏幕分辨率變小時，背景圖片長寬會等比例縮小。

你已經看完了嗎？希望對你或多或少有些幫助。

作者：小白，微信公眾號：小白的交互設計。

本文由 @小白 原創發布于人人都是產品經理。未經許可，禁止轉載。