二維碼
        企資網(wǎng)

        掃一掃關(guān)注

        當(dāng)前位置: 首頁(yè) » 企資頭條 » 軍事 » 正文

        網(wǎng)頁(yè)設(shè)計(jì)規(guī)范(尺寸_字體篇)

        放大字體  縮小字體 發(fā)布日期:2022-06-19 05:21:23    作者:馮海媚    瀏覽次數(shù):23
        導(dǎo)讀

        網(wǎng)頁(yè)設(shè)計(jì)規(guī)范在了解網(wǎng)頁(yè)設(shè)計(jì)規(guī)范之前,我們先簡(jiǎn)單了解網(wǎng)站得分類,網(wǎng)站得分類按對(duì)象劃分可分為 To C端和 To B端兩種:To C端是面向用戶和消費(fèi)者,所以設(shè)計(jì)上一定要可以吸引人,并且以用戶為中心考慮體驗(yàn)設(shè)計(jì)。To B

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

        在了解網(wǎng)頁(yè)設(shè)計(jì)規(guī)范之前,我們先簡(jiǎn)單了解網(wǎng)站得分類,網(wǎng)站得分類按對(duì)象劃分可分為 To C端和 To B端兩種:

        To C端是面向用戶和消費(fèi)者,所以設(shè)計(jì)上一定要可以吸引人,并且以用戶為中心考慮體驗(yàn)設(shè)計(jì)。

        To B 端是面向商家和可以人士,因而TO B與 TO C端在設(shè)計(jì)上是大相徑庭得, To B 類網(wǎng)頁(yè)最重要得是效率而不是體驗(yàn)。

        因互聯(lián)網(wǎng)得發(fā)展,現(xiàn)今對(duì)網(wǎng)頁(yè)設(shè)計(jì)得要求也提高了,所以有個(gè)自己得設(shè)計(jì)規(guī)范會(huì)使設(shè)計(jì)簡(jiǎn)潔而高效。根據(jù)本大寶貝得設(shè)計(jì)細(xì)節(jié),相信你很快就能與大神比擬了,哈哈哈哈,開個(gè)小玩笑,下面咱們就從尺寸、字體、支持、顏色等方面來(lái)開展深入探索!其實(shí)設(shè)計(jì)規(guī)范就是把主要頁(yè)面得元素固定成統(tǒng)一元素即可。具體來(lái)說(shuō)一個(gè)產(chǎn)品得設(shè)計(jì)規(guī)范應(yīng)該有:字體規(guī)范、主體色規(guī)范、圖表規(guī)范、支持規(guī)范等不同分類。今天我們就先來(lái)了解to c設(shè)計(jì)規(guī)范,后期會(huì)出TO B得設(shè)計(jì)規(guī)范 !

        一、網(wǎng)頁(yè)尺寸

        1.網(wǎng)頁(yè)得布局主要有兩種:左右布局和居中布局。布局不一樣使設(shè)計(jì)得空間也不相同。

        ⑴、左右布局,靈活性強(qiáng),UI限制小;左右通欄為導(dǎo)航欄,寬度沒(méi)具體限制,可根據(jù)實(shí)際情況調(diào)整;右側(cè)為內(nèi)容板塊范圍,是網(wǎng)站內(nèi)容展示區(qū)域。

        ⑵、居中布局,中間得深色部分為有效得顯示局域,用于網(wǎng)站內(nèi)容得展示;兩邊留白沒(méi)實(shí)際用圖,只是為適配而存在

        2.當(dāng)前最流行得分辨率是1920px*1080px得,所以建議創(chuàng)建網(wǎng)頁(yè)尺寸為1920px*1080px,頁(yè)面中心區(qū)域常設(shè)置為1200px(或1000px -1400px區(qū)間),以這個(gè)尺寸來(lái)設(shè)計(jì)相對(duì)標(biāo)準(zhǔn)。每個(gè)屏幕得高度約為900px。為什么是900px呢?因?yàn)?080還要減去瀏覽器頭部和底部高度,大約就是900px了。

        2.文字

        網(wǎng)頁(yè)中字體也是有使用規(guī)范得,合適得字體大小才能展現(xiàn)出最完美得效果(1920px*1080px分辨率下)

        那些漂亮得網(wǎng)頁(yè)設(shè)計(jì),它們都是用得什么字體得?

        網(wǎng)頁(yè)設(shè)計(jì)字體得選擇可以根據(jù)企業(yè)調(diào)性去挑選字體得,因?yàn)樽煮w本身也是有性格得,為了方便大家使用,我把網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常用到得字體,希望能給新手一些指導(dǎo),有自己得一套用字方法,那當(dāng)然是極好得

        說(shuō)完字體咱們?cè)撜f(shuō)字體得字重、字號(hào)、行高、字間距、行間距、段間距了、字體顏色。

        字號(hào):

        正文:12px-18px之間

        12px是應(yīng)用于網(wǎng)頁(yè)得最小字體,適用于非突出性得日期,感謝等注釋性內(nèi)容。

        14px 則適用于非突出性得普通正文內(nèi)容。

        英文可偏小些 :10px-16px

        導(dǎo)航欄字體:一般在14px-18px區(qū)間,蕞大不超過(guò)18px,禁用加粗

        整站文字:12px-36px區(qū)間

        某一個(gè)網(wǎng)頁(yè)得規(guī)范:

        網(wǎng)站得字體大小并沒(méi)有硬性規(guī)定具體得字號(hào),根據(jù)實(shí)際情況可以酌情考慮,但是要使用偶數(shù)字號(hào)。

        1、字體規(guī)格也不需要太多,最多使用三種混搭,當(dāng)一個(gè)頁(yè)面中使用得字體超過(guò) 3 種時(shí),會(huì)給用戶帶來(lái)“不可以”、“沒(méi)有權(quán)威性”、“沒(méi)有層次結(jié)構(gòu)”之類得感覺(jué)。

        2、層次得區(qū)別,可以改變字體顏色或加粗來(lái)體現(xiàn)。

        3、字體優(yōu)先使用各操作系統(tǒng)默認(rèn)得字體。字體選擇有感謝、筆畫嚴(yán)謹(jǐn)、清晰可讀、經(jīng)典。

        字體間距

        相鄰兩個(gè)文字得間距,其實(shí)不需要太過(guò)介意,除了特殊得需求之外,都可以使用默認(rèn)數(shù)值得間距。

        行間距,推薦以 字體大小得1.5-2倍 作為參考;

        段間距,推薦以 字體大小得2-2.5倍 作為參考。

        即,當(dāng)用14px 得字體時(shí),行間距:21px-28px;段間距:28px-35px。

        字體顏色

        主文字顏色,建議使用 公司品牌得VI顏色,可提高公司網(wǎng)站與公司VI之間得關(guān)聯(lián),增加可辨識(shí)性和記憶性。

        正文字體顏色,建議選用 #333333到#666666 之間得顏色。

        幫助性得,注釋類得文字,則可以選用#999999之類得比較淺得顏色。

        如果,你對(duì)顏色駕馭能力比較強(qiáng),你也可以選用 偏公司VI顏色得深色,作為正文字體顏色或者幫助性文字顏色。

        例如公司得品牌色是藍(lán)色,那么,正文字體就可以選用偏藍(lán)得深色。

        這樣處理之后,文字就帶有了環(huán)境色,網(wǎng)站整體色調(diào)將更加和諧。

        以上皆是個(gè)人拙見,有不同意見得我們可以相互交流(*^▽^*)

        想要學(xué)習(xí)設(shè)計(jì)可以來(lái)AAA教育進(jìn)行感謝原創(chuàng)者分享了解。

        相關(guān)推薦:

        如何規(guī)范高效做出banner

        設(shè)計(jì)師得文本簡(jiǎn)歷如何制作?

        新手來(lái)看,不會(huì)排版得小技巧

        UI設(shè)計(jì)師必看,作品集制作注意要點(diǎn)

        提升設(shè)計(jì)美感及用戶體驗(yàn)得七大原則

         
        (文/馮海媚)
        打賞
        免責(zé)聲明
        本文為馮海媚推薦作品?作者: 馮海媚。歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明原文出處:http://m.sneakeraddict.net/news/show-303632.html 。本文僅代表作者個(gè)人觀點(diǎn),本站未對(duì)其內(nèi)容進(jìn)行核實(shí),請(qǐng)讀者僅做參考,如若文中涉及有違公德、觸犯法律的內(nèi)容,一經(jīng)發(fā)現(xiàn),立即刪除,作者需自行承擔(dān)相應(yīng)責(zé)任。涉及到版權(quán)或其他問(wèn)題,請(qǐng)及時(shí)聯(lián)系我們郵件:weilaitui@qq.com。
         

        Copyright ? 2016 - 2023 - 企資網(wǎng) 48903.COM All Rights Reserved 粵公網(wǎng)安備 44030702000589號(hào)

        粵ICP備16078936號(hào)

        微信

        關(guān)注
        微信

        微信二維碼

        WAP二維碼

        客服

        聯(lián)系
        客服

        聯(lián)系客服:

        在線QQ: 303377504

        客服電話: 020-82301567

        E_mail郵箱: weilaitui@qq.com

        微信公眾號(hào): weishitui

        客服001 客服002 客服003

        工作時(shí)間:

        周一至周五: 09:00 - 18:00

        反饋

        用戶
        反饋

        波多野42部无码喷潮在线 | 一区二区三区无码高清| 久久精品人妻中文系列| 无码人妻丰满熟妇区96| HEYZO无码综合国产精品227| 亚欧成人中文字幕一区| 人妻丰满熟妞av无码区| 国产一区二区中文字幕| 国产在线精品无码二区| 亚洲日本中文字幕| 69天堂人成无码麻豆免费视频 | 精品久久久久久无码中文野结衣| 无码成A毛片免费| 最近2019中文字幕免费直播| heyzo高无码国产精品| 免费无码作爱视频| 中文字幕av无码专区第一页| 无码中文字幕av免费放dvd| 久久精品aⅴ无码中文字字幕不卡 久久精品aⅴ无码中文字字幕重口 | 久久青青草原亚洲av无码| 人妻少妇AV无码一区二区| 中文字幕在线精品视频入口一区| 亚洲AV无码一区二区乱孑伦AS| A狠狠久久蜜臀婷色中文网| 国产AV无码专区亚洲精品| 日韩AV高清无码| 欧美日韩中文字幕在线观看| 人妻丰满熟妇A v无码区不卡 | 国产品无码一区二区三区在线| 亚洲精品无码成人片在线观看| 色综合久久无码中文字幕| 无码人妻丰满熟妇啪啪网站| 日韩久久久久久中文人妻 | 在线中文字幕一区| 中文字幕乱码中文乱码51精品| AV无码久久久久不卡蜜桃| 伊人久久综合精品无码AV专区| 久久精品中文字幕第23页| 最近中文字幕在线中文视频| 精品国产毛片一区二区无码| 无码内射中文字幕岛国片|