- 網(wǎng)站視覺(jué)設(shè)計(jì)規(guī)范
- 網(wǎng)站風(fēng)格與配色
- banner設(shè)計(jì)實(shí)戰(zhàn)
- 網(wǎng)站視覺(jué)案例實(shí)戰(zhàn)
顏色
色不過(guò)三
- 舉例：
- 正文顏色：#33333 深灰
- 長(zhǎng)連接顏色：#3B639F 藍(lán)色
- 強(qiáng)調(diào)顏色：#FF7F00 橙色
字體
- 文本使用常規(guī)字體（微軟雅黑、宋體）
- 微軟雅黑蒙袍，無(wú)襯線字體拓萌，現(xiàn)代化簡(jiǎn)潔字體，無(wú)過(guò)多裝飾，粗細(xì)一樣的
- 宋體，襯線字體，粗細(xì)不一致有變化
- 特殊字體做成圖片
- 比如logo
-
字體類(lèi)型三種以內(nèi)
C5DB1634-883D-4C0D-97BC-73656399ECE0.png
字號(hào)
- 12px（中文最小文本）中文用偶數(shù)
- 廣告內(nèi)容撮竿、輔助信息或介紹性文字等多使用12號(hào)字體
- 英文里面可以小于12px，最小可以到px笔呀，英文的筆畫(huà)少倚聚，易鑒別
- 14-16px（正文）
- 正文內(nèi)容部分
- 16-18px（標(biāo)題）
- 標(biāo)語(yǔ)部分
- 更大20、24凿可、28、32.....
- 比如：廣告語(yǔ)以及特別情況
- 統(tǒng)一層級(jí)的字號(hào)搭配應(yīng)該保持一致
- 比如：同一層級(jí)的板塊中標(biāo)題和內(nèi)容大小的一致性
行距
文本行高一般為140%~180%授账，一般不超過(guò)2倍枯跑。
7A2A99A4-8B40-4450-8F5F-F19F6B31CD06.png
- 開(kāi)頭空兩格，也可以區(qū)分段與段之間的內(nèi)容白热，但是如果每一個(gè)段內(nèi)容少敛助，總是空兩格會(huì)顯得參差不齊。
572D7A6A-85A4-4E3F-9572-47DAF73E2986.png
- 所以現(xiàn)在基本上都是屋确，增大段落與段落之間的距離來(lái)區(qū)分纳击，不再開(kāi)頭空格续扔。
文字對(duì)齊
默認(rèn)：左對(duì)齊
按鈕、標(biāo)簽：居中對(duì)齊
-
文字標(biāo)簽：右對(duì)齊
591EB024-824C-4838-99CC-8F62470540C1.png 文件對(duì)比的時(shí)候
特殊：兩端對(duì)齊
圖片格式
- JPG 背景圖片焕数、照片 文件小纱昧。
- 品質(zhì)在60-80，60以下最好不用
- 一些大圖片堡赔，banner建議用這種格式
- GIF 小于256色 圖標(biāo)识脆、圖表等 支持透明和動(dòng)畫(huà)。
- PNG 推薦使用善已、尤其是移動(dòng)端 支持透明灼捂、半透明。
圖片常見(jiàn)問(wèn)題
- 圖片壓縮變形
- 方法1：整體縮放换团，放在banner中間悉稠，或者旁邊，添加一些元素
- 方法2：切開(kāi)一條艘包，翻轉(zhuǎn)的猛，剛好合住適當(dāng)延伸
- 圖片變虛
- 圖片過(guò)于復(fù)雜
命名規(guī)范
命名規(guī)范-常用命名規(guī)范
- 頁(yè)頭：header
- 登錄條：loginbar
- 標(biāo)志：logo
- 側(cè)欄：sidebar
- 廣告條：banner
- 子導(dǎo)航：subNav
- 菜單：menu
- 下拉菜單：dropMenu
- 工具條：toolbar
- 表單：form
- 欄目：column
- 箭頭：arrow
- 搜索：search
- 搜索按鈕：btn_search
- 內(nèi)容：content
- 滾動(dòng)條：scroll
- 標(biāo)簽頁(yè)：tab
- 文字列表：list
- 提示信息：msg
- 小技巧：tips
命名規(guī)范-組合命名規(guī)則：
- 組合命名規(guī)則：
- 元素類(lèi)型-元素作用/內(nèi)容
- 如：搜索按鈕：
- 登錄表單：form_login
- 新聞列表：list_news
- 交互行文的元素命名：
- 凡涉及交互行為的元素通常會(huì)有正常、懸停
網(wǎng)站適合什么樣的風(fēng)格辑甜？
- 扁平化風(fēng)格
- 手繪風(fēng)格
- 活潑琅束，藝術(shù)
- 擬物風(fēng)格
- 綜合性風(fēng)格
總結(jié)影響網(wǎng)站風(fēng)格的因素
- 網(wǎng)站類(lèi)型
- 所屬行業(yè)
- 用戶人群
網(wǎng)站配色
- 色不過(guò)三
- 主色（鄰近色）
- 輔色
- 突出顯示的顏色（強(qiáng)調(diào)色）
- 考慮行業(yè)
- 用戶人群募狂，配色技巧
配色小技巧
- 鋪
- 大面積鋪底色或者鋪模糊化的大背景圖
- 學(xué)
- 借鑒出色的網(wǎng)頁(yè)設(shè)計(jì)方案
- 吸
- 從照片中西區(qū)顏色
- 如果不知道怎么選顏色：濾鏡----像素化——馬賽克
冷暖以及中性色的區(qū)分
圖片.png
