网页
资讯
视频
图片
知道
文库
贴吧
地图
采购
进入贴吧
全吧搜索
吧内搜索
搜贴
搜人
进吧
搜标签
日
一
二
三
四
五
六
签到排名:今日本吧第
个签到,
本吧因你更精彩,明天继续来努力!
本吧签到人数:0
一键签到
可签
7
级以上的吧
50
个
一键签到
本月漏签
0
次!
0
成为超级会员,赠送8张补签卡
如何使用?
点击日历上漏签日期,即可进行
补签
。
连续签到:
天 累计签到:
天
0
超级会员单次开通12个月以上,赠送连续签到卡3张
使用连续签到卡
06月05日
漏签
0
天
ideadata大数据视界吧
关注:
17
贴子:
334
看贴
图片
吧主推荐
游戏
8
回复贴,共
1
页
<返回ideadata大...吧
>0< 加载中...
网页设计参考标准
只看楼主
收藏
回复
i大数据专家
铁杆吧友
8
该楼层疑似违规已被系统折叠
隐藏此楼
查看此楼
UI设计规范,对于刚入行的新人,可能觉得是一件很高大上又很让人头疼的事情。本文从新人的角度出发,总结一些设计规范要点,算是一次温故总结的分享。
我本身是一名UI设计师,所以我站在设计师的角度去把自己所学所了解的东西告诉大家。可能公司不同,大家设计习惯不尽相同,但是终究还是能有些帮助。依旧声明:这里写的只是我个人的使用习惯,只是一种工作方法,大家在具体工作中,一定要灵活运用。另外,技术的更新是非常快的,我写的这些可能某些东西和你们的工程师搭档所用的方法不一样了,所以,还是要灵活运用。
送TA礼物
1楼
2017-11-02 12:07
回复
i大数据专家
铁杆吧友
8
该楼层疑似违规已被系统折叠
隐藏此楼
查看此楼
首先带领大家先了解一下本文大致分为哪几个模块:网页设计尺寸、常用字体、字体间距舒适范围、字体颜色设计技巧、其他注意事项。
2楼
2017-11-02 12:08
回复
收起回复
2025-06-05 00:23:15
广告
i大数据专家
铁杆吧友
8
该楼层疑似违规已被系统折叠
隐藏此楼
查看此楼
一、网页设计尺寸
制作网页时我们选用的分辨率是72像素/英寸,使用的画布尺寸1920px*1080px。但并不代表我们可以在整个画布上作图。
网页的布局主要有两种:左右型布局和居中型布局。布局的不一致,使可设计的空间也不相同。
3楼
2017-11-02 12:08
回复
收起回复
i大数据专家
铁杆吧友
8
该楼层疑似违规已被系统折叠
隐藏此楼
查看此楼
1、左右布局,灵活性强,UI的限制小;
2、左边通栏为导航栏,宽度没有具体的限时,可以根据实际情况进行调整;
3、右侧为内容板块范围,是网站内容展示区域。
4楼
2017-11-02 12:08
回复
收起回复
i大数据专家
铁杆吧友
8
该楼层疑似违规已被系统折叠
隐藏此楼
查看此楼
居中型
4、居中布局,中间的黄色部分为有效的显示区域,用于网站内容的展示。
5、换句话说,两边均为留白,没有实际用途,只是为了适配而存在。
6、内容限时区域在好控制在1000px-1200px。
5楼
2017-11-02 12:08
回复
收起回复
i大数据专家
铁杆吧友
8
该楼层疑似违规已被系统折叠
隐藏此楼
查看此楼
二、常用字体
现在网页的布局我们已经了解了,那么接下来就是网页中常用到的字体。
字体设计的总原则是:可辨识性和易读性。
中文建议使用微软雅黑字体,英文则建议使用arial 字体。常用的字体大小号有以下几种:
1、12px是用于网页的最小字体,适用于突出性的日期,版权等注释性内容。
2、14px则适用于非突出性的普通正文内容。
3、16px或18px适用于突出性的标题内容。
4、网站的字体大小并没有硬性规定具体的字号,根据实际情况可以酌情考虑,但是要有限适用偶数字号。
5、字体规格也不需要太多,最好适用三种混搭。如果需要更多
6、层次的区别,可以改变字体颜色或加粗来体现。
6楼
2017-11-02 12:09
回复
收起回复
i大数据专家
铁杆吧友
8
该楼层疑似违规已被系统折叠
隐藏此楼
查看此楼
三、字体间距舒适范围
相邻两个文字的间距,其实不需要太过介意,除了特殊的需求之外,都可以使用默认数值的间距。
1、行间距,推荐以字体大小的1.5-2倍作为参考;
2、段间距,推荐以字体大小的2-2.5倍作为参考。
3、当选用14px字体时,行间距:21-28px; 段间距:8px-35px
四 、字体颜色设计技巧
1、主文字的颜色,建议使用公司品牌的VI颜色,可提高公司网站与公司VI之间的关联,增加可辨识性和记忆性。
2、正文字体颜色,保险起见,选用易读性的深灰色,建议选用
#333到#
666之前的颜色。
3、辅助性的,注释类的文字,则可以选用#999999之类的比较浅的颜色。
如果,你对颜色驾驭能力比较强,你也可以选择偏公司VI颜色的深色,作为正文字体颜色或者辅助性文字的颜色。
例如公司的品牌是蓝色,那么正文就可以选用偏蓝色的深色。这样处理之后,文字就有了环境色,网站整体将更加和谐。
深灰色 偏蓝色
7楼
2017-11-02 12:09
回复
收起回复
i大数据专家
铁杆吧友
8
该楼层疑似违规已被系统折叠
隐藏此楼
查看此楼
五、其他需要注意的事项
做网页设计时,你还要特别注意网页的首屏内容,在构图和内容呈现上,首屏模块的设计至关重要。
1、除去任务栏,浏览器菜单栏以及状态栏的高度,剩下的是首屏高度。
2、Window XP 的首屏高度平均值为580px, window 7 的首屏高度平均值是710px。
3、综合考虑到 Window XP 已经退出市场,在实际操作时,我们以710px作为依据。
如下图,黄色区域是我们设计时要着重考虑的首屏范围
另外,是关于图片尺寸问题。需要全屏显示的图片,宽度尺寸严格设计为1920px。但是值得注意的是,图片内容的有效范围不能超过网页内容的有效范围,控制在1200px以内,以免遇到小屏设备时显示不全,而造成信息遗漏。
8楼
2017-11-02 12:09
回复
收起回复
2025-06-05 00:17:15
广告
i大数据专家
铁杆吧友
8
该楼层疑似违规已被系统折叠
隐藏此楼
查看此楼
说到这里,网站设计规范部分的内容就算是讲完了,当然上面的所有规范也只是规范,不要因为这些规范去限制自己的想法,规范是用来打破的,设计最重要的还是设计得美观,设计的时候具体要给多大的数值,取决于设计师,规范是用来参考的。
Ps:如果想做一个好的UI设计师,一定要从规范入手。很多都是细节的东西,在于积累。
9楼
2017-11-02 12:10
回复
收起回复
登录百度账号
扫二维码下载贴吧客户端
下载贴吧APP
看高清直播、视频!
贴吧热议榜
1
国足本场生死战能否拿下印尼
2112210
2
三亚女游客究竟是被什么蛇咬了
1561650
3
IG3:2FPX 评价下Theshy的剑魔
1166704
4
高考倒计时
1143477
5
乌克兰袭击克里米亚大桥
866528
6
大家的显卡和主板都几年换一次?
745525
7
郑钦文赛后哭了
714840
8
李在明当选后中韩关系会有改善吗?
625301
9
“海棠文”有文学价值吗?
508904
10
小米YU7定价会是多少
435372
贴吧页面意见反馈
违规贴吧举报反馈通道
贴吧违规信息处理公示