網(wǎng)頁(yè)設(shè)計(jì)視覺(jué)字體規(guī)范

(一)網(wǎng)頁(yè)寬度及高度

建畫(huà)布一般1920px*1080px(高度建議可自定)建議視覺(jué)中心網(wǎng)站寬度1000px以內(nèi),推薦尺寸960px甚纲,如果超出1000px,推薦尺寸1200px。(兩邊需留白签杈,目的自適應(yīng))

建議網(wǎng)站高度控制在2-3屏內(nèi)常空,大概高度控制在2000px以內(nèi)為宜沽一。一般一屏高度在710px以內(nèi),否則需要下滑,不下滑會(huì)看不到下方內(nèi)容漓糙。

(二)字體字號(hào)

字體請(qǐng)使用系統(tǒng)自帶字體铣缠。例:微軟雅黑、黑體昆禽、宋體蝗蛙、Tahoma、Arial醉鳖、Verdana捡硅。

安卓中文常用微軟雅黑,英文常用HelveticalNeue

中文備選字體:方正蘭亭黑

英文備選字體Helvetica盗棵、Arial壮韭、DIN

IOS常用字體:蘋(píng)方

字號(hào)大斜狈ⅰ:

中文:最低12px起步,12喷屋、14……偶數(shù)遞增

H1標(biāo)題字36px,行間距60px,? H2副標(biāo)題字24px,行間距40px,? 正文14px,行間距24px,修飾提示性文字12px,行間距20px.

行間距=行高-字號(hào)(行高一般為20px)

2琳拨、英文:最低10px起步,10屯曹、12……偶數(shù)遞增

字體顏色:

常規(guī)顏色:#666666(常用大面積范圍文本子从绘,在列表中標(biāo)題字呈現(xiàn)加粗)

重要文字:#333333(常用于標(biāo)題和關(guān)鍵性文字)

警示文字:#ff0000(常用于提示性文字,警示文字)

次級(jí)文字:#999999(常用于幫助信息是牢,不需太在意的文字)

(三)頁(yè)面布局

1.整體視覺(jué)

盡量整齊僵井,視覺(jué)統(tǒng)一

2.網(wǎng)頁(yè)柵格頁(yè)面寬度:980px欄目間距:10px

3.產(chǎn)品柵格產(chǎn)品寬度:160px產(chǎn)品間距:40px/30px

一般為W=(A*n)-i? ? (W為網(wǎng)頁(yè)寬度,A為元素快+間隙驳棱,n為元素塊數(shù)批什,推薦柵格系統(tǒng)計(jì)算網(wǎng)站grid.guide/

4.表單

兩個(gè)輸入框間距一般為10px,提示框與本體的輸入框?yàn)?px,文本與文本的間距為18px

5.Bar

所有Bar運(yùn)用文字為宋體,12號(hào)字體Bar高度為25px社搅,14號(hào)Bar高度為30px

6.留白

版塊間距為10px版塊與內(nèi)容間距為10px內(nèi)容單元之間間距為10px內(nèi)容的間距均為10px

7.Button

運(yùn)用:交易驻债、購(gòu)買、購(gòu)物車形葬、后臺(tái)合呐、搜索、提交


合適的按鈕尺寸

1.導(dǎo)航(文本字號(hào)一般14px)站酷導(dǎo)航按鈕80*60px,東方頭條導(dǎo)航按鈕60*50px,寬度控制在50-100px左右,按鈕內(nèi)部左右留白一般20px左右,高度控制在30-50px左右,一般行高200-400%

2.注冊(cè)笙以、登錄

注冊(cè)淌实、登錄按鈕一般寬度與上方輸入表單寬度保持一致,一般表單文本對(duì)話框?qū)挾?00-400px左右

高度控制在30-50px左右(行高200-400%左右),由于單獨(dú)存在,尺寸大猖腕、字號(hào)大拆祈,一般字號(hào)14-18px

3.搜索框

由于搜索框一般位于頂部單獨(dú)存在,搜索框文本域尺寸較大,故按鈕亦大,一般寬度控制80-100px左右,高度控制在30-50px左右(行高200-400%左右)

icon搜索按鈕倘感,一般寬度縮小放坏,尺寸50px左右

4.購(gòu)買、關(guān)注

一般購(gòu)買按鈕在150-200px左右,高度控制在30-50px左右(行高200-400%左右),由于單獨(dú)存在老玛,尺寸大淤年、字號(hào)大,一般字號(hào)14-18px,關(guān)注等按鈕相對(duì)購(gòu)買寬度略小

(四)icon

制作規(guī)格:統(tǒng)一的視角蜡豹、倒角麸粮、材質(zhì)、尺寸余素,顏色數(shù)量盡量不要超過(guò)三種

制作要求:圖標(biāo)必須會(huì)意直觀豹休,這是它區(qū)別于文字的價(jià)值

icon尺寸正方形常見(jiàn)一般尺寸30*30? 32px*32px 50*50 100*100px視大小自定

(五)命名

圖片命名規(guī)范:建立良好文檔規(guī)范炊昆,養(yǎng)成圖片命名習(xí)慣桨吊,有利于源文件的移交威根、繼承和重用,能有效提高工作效率视乐,利于合作

(六)圖片輸出

切圖時(shí)要貼合圖形區(qū)洛搀,避免空白區(qū)域占用文件大小
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市佑淀,隨后出現(xiàn)的幾起案子留美,更是在濱河造成了極大的恐慌,老刑警劉巖伸刃,帶你破解...
    沈念sama閱讀 221,888評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件谎砾,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡捧颅,警方通過(guò)查閱死者的電腦和手機(jī)景图,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,677評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)碉哑,“玉大人挚币,你說(shuō)我怎么就攤上這事】鄣洌” “怎么了妆毕?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,386評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)贮尖。 經(jīng)常有香客問(wèn)我笛粘,道長(zhǎng),這世上最難降的妖魔是什么湿硝? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,726評(píng)論 1 297
  • 正文 為了忘掉前任闰蛔,我火速辦了婚禮,結(jié)果婚禮上图柏,老公的妹妹穿的比我還像新娘序六。我一直安慰自己,他們只是感情好蚤吹,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,729評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布例诀。 她就那樣靜靜地躺著,像睡著了一般裁着。 火紅的嫁衣襯著肌膚如雪繁涂。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,337評(píng)論 1 310
  • 那天二驰,我揣著相機(jī)與錄音扔罪,去河邊找鬼。 笑死桶雀,一個(gè)胖子當(dāng)著我的面吹牛矿酵,可吹牛的內(nèi)容都是我干的唬复。 我是一名探鬼主播,決...
    沈念sama閱讀 40,902評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼全肮,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼敞咧!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起辜腺,我...
    開(kāi)封第一講書(shū)人閱讀 39,807評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤休建,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后评疗,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體测砂,經(jīng)...
    沈念sama閱讀 46,349評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,439評(píng)論 3 340
  • 正文 我和宋清朗相戀三年百匆,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了邑彪。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,567評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡胧华,死狀恐怖寄症,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情矩动,我是刑警寧澤有巧,帶...
    沈念sama閱讀 36,242評(píng)論 5 350
  • 正文 年R本政府宣布,位于F島的核電站悲没,受9級(jí)特大地震影響篮迎,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜示姿,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,933評(píng)論 3 334
  • 文/蒙蒙 一甜橱、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧栈戳,春花似錦岂傲、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,420評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至褂痰,卻和暖如春亩进,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背缩歪。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,531評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工归薛, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,995評(píng)論 3 377
  • 正文 我出身青樓主籍,卻偏偏與公主長(zhǎng)得像习贫,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子崇猫,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,585評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • 看懂書(shū)法 一诅炉、 書(shū)法的重要性:隨著社會(huì)快速發(fā)展、電腦的應(yīng)用屋厘,很多人認(rèn)為不用學(xué)書(shū)法了涕烧,錯(cuò)...
    寒食敬閱讀 2,455評(píng)論 6 18
  • 很喜歡這本書(shū),作者提供了滿滿的干貨汗洒,梳理了副業(yè)的類型和模式议纯,以及如果挖掘發(fā)現(xiàn)自己的優(yōu)勢(shì),并如何把優(yōu)勢(shì)發(fā)展成副業(yè)溢谤。每...
    馬嬌_e439閱讀 862評(píng)論 0 3
  • 論文紙片盒子 03FRACTURE FLOW RATE ESTIMATION USING MACHINE LEAR...
    亻令仃忝鉂閱讀 641評(píng)論 0 0
  • (三)文學(xué)類文本閱讀(本題共3小題瞻凤,15分) 閱讀下面的文字,完成7~9 題世杀。 秋唱 ...
    傲氣沖天925閱讀 1,405評(píng)論 0 0
  • 人阀参,一生最擅長(zhǎng)的便是做錯(cuò)事 不去犯錯(cuò),怎會(huì)成長(zhǎng) 去犯錯(cuò)瞻坝,代表已經(jīng)有勇氣面對(duì)真實(shí)人生 人生蛛壳,就是錯(cuò)誤與正確交雜 錯(cuò)誤...
    竹星柒閱讀 123評(píng)論 0 2