网页ui设计规范(合集)4篇

2024年网页ui设计规范 篇1

WEB端

必备元素:logo、menu(导航)、banner(动效【flash、H5】)、内容区(新闻、企业简介、产品展示...)、版权信息(版权所有、联系方式)

可选元素:搜索、电话、在线客服、流量统计...

用户体验习惯:左:浏览区域、列表区域

右:功能区域、内容区域

字体:最小12px,最黑#333333

字体12 px、14px、16px效果选择无,其他字号则用锐利、犀利、浑厚等

标题部分字体:14px~24px(尽可能采用雅黑)

正文部分字体:12px、14px(雅黑或者宋体),字行距一般为1.5~2倍之间。

尺寸规范:在分辨率1024px*768px的情况下,满屏宽度为1003px,通常定义可视范围为920px~1000px之间。常见:宽960px、980px、1000px,一屏高度650px。

UI方面

iOS

iphone字体、字号标准

字体:中文:苹方 ; 英文:旧金山

字号:正文最小24px ; 常驻栏icon20px

Andriod

字体:中文:思源黑体 ; 英文:roboto

字号:注释最小:24px ; 文本:28px ; 文章标题或图标名称:32px ; 导航标题:36px(在这里为720px*1280px的尺寸下设计规范,注:1sp=2px)

界面尺寸

图标尺寸

以上内容希望可以帮到你!

2024年网页ui设计规范 篇2

5分钟快速了解UI设计规范

每位UI设计师,想必都有一套属于自己的设计规范,今天我就来教大家在5分钟快速建立一套自己的设计规范。

我今天讲苹果版本的(尺寸:750*1334),因为现在很多的设计师就做一套UI图,安卓版本的基本就已经省略掉了,原因很简单,是的没错,就是节约时间哈。底部栏与顶部栏的规范

下面第一张图是底部栏的设计规范,第二张图是加图标展示,底部栏高度为49px,在我以往的设计工作经验中,常见的分为3种情况,3个图标、4个图标的、5个图标的,不管是那种我们应该按照规范来,这样前段在开发时就会比较方便,按照几等分(n/375),底部的图标我习惯用28*28px(尺寸:375*667,最后导两倍的图给前段开发),底部文字都用10px。

底部栏

接下来我们看第三张顶部栏的设计规范图,顶部栏的高度一般为64px,标题文字我喜欢使用18px,不过还是要看自己的设计风格。

顶部栏

字号与字色的规范

字号的大小使用也是非常的重要,之前我的一个客户,希望我能够把字体设计大些,他的原因是字号越大会体现一个企业的大气感,其实这样往往适得其反。

你们一般在进行设计时,会使用几号字体呢?正文我最喜欢用的是14号、16号,我已经把我经常用的字号整理出来了,大家可以看下面的图哦。

字号

字色

两侧间距及模块上下间距的规范

在设计时,我们有必要两侧留间距,常见的有14px、16px、24px,上下间距常用10px,在开始做UI图的时候,最好确定好一个值,在后面设计其他页面的时候,都可以用同一个值,保证自己设计的风格,不会让人误以为随便留的。

两侧间距

模块上下间距

按钮及模块高度

按钮是UI设计中最常用的一个元素,几乎每个项目都会有它的出现,在不同的UI设计中,Button本身会根据主体风格制作,不同大小的按钮样式会有所不同,下面是我画出来的几种常用的按钮大小。

按钮

模块高度

图标及辅助线的规范

在画图标的时候,务必将图标限制在正方形中并创建为组件,这样既方便以后修改也方便开发。图标

16*16:非可单独点击;22*22:最小可单独点击按钮;24*24:表单小图标;28*28:底部标签栏,其他的视情况而定。

辅助线

UI设计中我们看见的辅助线一般分为两种:投影型、画线,我个人认为投影型是非常实用的,看起来不会那么死板,而且有一个好处,可以确定文案的位置,保证了设计的规范性,细节可以让整体看起来更完美。

图片、视频大小的规范

图片常用的比例为1:1、2:1、4:3;视频常为16:9,这里我讲的是我平常经常会用着的尺寸,还有其他的情况就个人而定哦!

总结:我们在平常的设计中只要能够把握这些设计的规范,对你所做的产品足够了解,就能高效的设计好的作品啦,唯有坚持,方能不负所爱,加油!

打字不易,欢迎点赞及评论,说说你们在UI设计中常用的规范是什么?

点击头像关注我,私信回复007,免费获得UI设计相关规范源文件,谢谢支持!

2024年网页ui设计规范 篇3

我们的移动端的UI设计规范也层出不穷。很多APP设计师也要在年底给公司或者是团队做一个总结。那么一个像样的APP ui设计规范也是很有必要的作品回顾。

在创业公司做着一位独立设计师,说好听点是独立设计师,难听点,就是唯一的设计师。创业型公司,UI UE你要全包。但是我还是很有追求的在每个版本改版之后,更新设计规范。我的设计规范没有大公司那么高大上,只包含了字体选用,配色运用,ui kit这些东西。

很多设计师做这个设计规范,纯粹只有两个原因:

1、要设计的界面太多了,而且产品迭代很快,来不及一个个界面标注重复性的东西,于是我就出一个字体运用规范,让开发看一个文档就好了。有个设计文档和UI设计规范,可以减少很多设计与开发之间的沟通。

后来给开发团队引进了zeplin,安卓小伙伴持续用着,ios开发,一直看着我的sketch源文件,在我教会开发sketch后,我连字体规范都少写了很多。

2、把这些东西一个版本的整理迭代好了,哪天来一场说走就走的旅行,没有交接成本,即使公司找不到设计师,开发哥哥直接用这个规范,就可以分分钟上岗党设计师了。直接甩这个规范的sketch源文件就可以了。

移动端一套完整的UI设计师也就是包含8个方面:

1、标准色

2、标准字

3、图标

4、 按钮

5、公共控件

6、模块

7、布局

8、APP效果展示图

换句话说就是

配色 字体 排版 布局 按钮 表单 提示框、标记、标签

弹窗、提示框 图片尺寸(banner、模块图片、头像图片)等元素进行规范整理。

也就是每一位APP设计师都会经历的一个过程。也是APP设计师学习和进步的过程

2024年网页ui设计规范 篇4

希望正在为自己未来职业规划迷茫,或者因为种种原因在纠结是否要从事UI设计的大学生能够花五分钟看完这篇文章,也许你会有收获。

认清社会,认清自己:

整日无所事事,萎靡不振,打起精神想看书,十分钟后却酣然入睡。相信这是目前很多在校大学生的常态。

大学这四年,被念叨最多的词是【迷茫】,【浮躁】则是我们一贯的气质~

迷茫是因为,本不打算从事本专业,可是跳出专业发觉自己没有特别擅长的事。

想找份实习工作,又搞不清楚往哪个方向发展。

抬头望望毕业季就要到了,即将步入社会却不知何去何从。

没有清晰而精准的求职目标,海投简历回复寥寥,对未来提不起劲。

不清楚行业对人才的实际要求是什么,也不知道大学哪些经历对于求职最加分。

而浮躁则是因为选择太多,感觉自己做什么都行,做什么又都不行.在这样反复中,大学四年早已结束.

每年6月的报纸都写着今年是应届生求职最难的一年。

不少在校大学生认为只有走出校园,开始工作了,才需要职业规划。

其实最早的职业规划应该是高考选择专业甚至文理分班时就确定了。否则的话,选择了自己不适合的专业,在学校里或者进入职场后,需要付出比别人多几倍的时间精力以及财力成本。

而已经进入大学校园,虽然晚了一步,但是比起已经踏入职场的职业人来说又是早很多步,把握时间,确保了自己少走弯路。

大学生求职专业相关工作困难,表现在一方面是不清楚自己适合切入哪个起点有发展;另外一方面是不知道自己能力在什么位置,能找到什么样的工作。

现在大学教育注重专业知识的教导,以应试教育为主,学生缺乏实际操作能力,对职场要求以及背景内容不能系统化的了解,和市场需求脱离实际,当然这个是学生自己无法改变的。

那么无力改变大环境的背景下,自己就必须行动起来,做好相关准备工作,否则毕业后需要走更多的弯路,浪费更多的的时间精力。

我为什么要学习UI设计呢?

360行,行行出状元!我一个大学生选择这么多,为什么非要做UI设计这行呢?

我想说的是大学生就业制度的改革,大学生自主择业已是大势所趋,除非你在某个行业有过人的天赋,否则选择从事任何行业你都是需要”回炉重造”,既然如此为什么不选择一个”高薪””发展前景无限光明”的职业呢?

目前移动端互联网的发展趋势已无法阻挡,人们的生活已经离不开手机,作为移动端界面设计的UI设计师,已成为众多企业争抢的对象。受高薪的诱惑,大量的人开始奔涌进入这个行业,对于就业困难的大学生来说,也不失为良好的选择。同时,中国的UI设计行业刚刚起步不久,专业人才非常紧缺,如果现在入行,一定能尝到最大的甜头。

我没有设计基础怎么学UI设计啊?

从零开始是每个人都要经历的阶段,只要你想学,对UI设计有足够的兴趣, 兴趣对成功有很大的推动作用,即使你没有美术基础,没有设计天赋,你照样可以做得很好。况且我个人认为如此高的薪资是值得我们拼搏一把的! 那我要怎么学习呢?

自学?

通过在网上收集资料或是自己买资料,自己学,当然零基础的同学,我非常不建议通过这种途径学习UI设计,毕竟不系统,走的弯路多,费时长。

边工作边学习?

很多同学都想着等到了非实习不可的时候再找一家公司边工作边学习,但要知道一家盈利的公司为什么要免费教你东西呢?你认为你有什么过人之处吗?那些公司只是需要廉价劳动力而已,拿着每个人几百块钱的餐补干着又苦又累的活,几个月下来什么也没学到,不是浪费青春是什么?

培训?

目前社会的教育体系及课程设置导致了,没有设计基础的零基础小白想成为UI设计师拿10K+的高月薪,除了参加培训没有别的出路.但是选择什么样的培训机构是我们可以选择的.

UI设计培训班,一般分了二种一种为线下一种为线上。

线下的培训费用一般是1-2万左右,一般学习周期是4-6个月,适合不工作不上学,经济条件不错的人。全天学习,不过零基础学的话,难度比较高,因为时间只有4个月,所以压力是非常大的,还有就是有地区限制,比如北京的线下培训就必须去北京学习,还不包吃住的。所以算下来4个月差不多最少也需要30000左右的资金投入。太高了。要是没有学会,或者说学不下去。就太浪费了。

第二种就是线上培训,一般学习周期也是4-6个月。第一期还有没有学懂的,第二期可以再学习。(但心学不会的,也可以放心了。怎么磨也磨出来了)有白天课程也有晚上课程,比较方便。适合边上班边学习的人,也适合经济条件不是好的人,同时更适合想转行又但心转行失败的人。可以边学边转,学会了就转,没有学会前又有自己的工作。

猜你喜欢

热门内容