美文网首页视觉艺术
网页设计视觉字体规范

网页设计视觉字体规范

作者: Design你的设计 | 来源:发表于2020-03-20 11:11 被阅读0次

    (一)网页宽度及高度

    建画布一般1920px*1080px(高度建议可自定)建议视觉中心网站宽度1000px以内,推荐尺寸960px,如果超出1000px,推荐尺寸1200px。(两边需留白,目的自适应)

    建议网站高度控制在2-3屏内,大概高度控制在2000px以内为宜。一般一屏高度在710px以内,否则需要下滑,不下滑会看不到下方内容。

    (二)字体字号

    字体请使用系统自带字体。例:微软雅黑、黑体、宋体、Tahoma、Arial、Verdana。

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

    中文备选字体:方正兰亭黑

    英文备选字体Helvetica、Arial、DIN

    IOS常用字体:苹方

    字号大小:

    中文:最低12px起步,12、14……偶数递增

    H1标题字36px,行间距60px,  H2副标题字24px,行间距40px,  正文14px,行间距24px,修饰提示性文字12px,行间距20px.

    行间距=行高-字号(行高一般为20px)

    2、英文:最低10px起步,10、12……偶数递增

    字体颜色:

    常规颜色:#666666(常用大面积范围文本子,在列表中标题字呈现加粗)

    重要文字:#333333(常用于标题和关键性文字)

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

    次级文字:#999999(常用于帮助信息,不需太在意的文字)

    (三)页面布局

    1.整体视觉

    尽量整齐,视觉统一

    2.网页栅格页面宽度:980px栏目间距:10px

    3.产品栅格产品宽度:160px产品间距:40px/30px

    一般为W=(A*n)-i    (W为网页宽度,A为元素快+间隙,n为元素块数,推荐栅格系统计算网站grid.guide/

    4.表单

    两个输入框间距一般为10px,提示框与本体的输入框为5px,文本与文本的间距为18px

    5.Bar

    所有Bar运用文字为宋体,12号字体Bar高度为25px,14号Bar高度为30px

    6.留白

    版块间距为10px版块与内容间距为10px内容单元之间间距为10px内容的间距均为10px

    7.Button

    运用:交易、购买、购物车、后台、搜索、提交

    合适的按钮尺寸

    1.导航(文本字号一般14px)站酷导航按钮80*60px,东方头条导航按钮60*50px,宽度控制在50-100px左右,按钮内部左右留白一般20px左右,高度控制在30-50px左右,一般行高200-400%

    2.注册、登录

    注册、登录按钮一般宽度与上方输入表单宽度保持一致,一般表单文本对话框宽度300-400px左右

    高度控制在30-50px左右(行高200-400%左右),由于单独存在,尺寸大、字号大,一般字号14-18px

    3.搜索框

    由于搜索框一般位于顶部单独存在,搜索框文本域尺寸较大,故按钮亦大,一般宽度控制80-100px左右,高度控制在30-50px左右(行高200-400%左右)

    icon搜索按钮,一般宽度缩小,尺寸50px左右

    4.购买、关注

    一般购买按钮在150-200px左右,高度控制在30-50px左右(行高200-400%左右),由于单独存在,尺寸大、字号大,一般字号14-18px,关注等按钮相对购买宽度略小

    (四)icon

    制作规格:统一的视角、倒角、材质、尺寸,颜色数量尽量不要超过三种

    制作要求:图标必须会意直观,这是它区别于文字的价值

    icon尺寸正方形常见一般尺寸30*30  32px*32px 50*50 100*100px视大小自定

    (五)命名

    图片命名规范:建立良好文档规范,养成图片命名习惯,有利于源文件的移交、继承和重用,能有效提高工作效率,利于合作

    (六)图片输出

    切图时要贴合图形区,避免空白区域占用文件大小

    相关文章

      网友评论

        本文标题:网页设计视觉字体规范

        本文链接:https://www.haomeiwen.com/subject/qsmdyhtx.html