易捷网络专注企业网站建设
11年企业网站建设经验、响应式网站建设,兼容PC、手机、平板全
终端,给你更佳的浏览体验...

优秀网页设计师须了解的UI设计规范

来源:网站建设行业资讯网
添加时间:2021-12-08

一、图标规范

很多设计师以为UI设计就是设计图标。虽然事实并非如此,但图标的设计在整个UI设计中是比较基础的一个环节。

图标与品牌标志一样,在设计时都需要做适当的减法,应该尽量用简约的线条去表达其含义,应该尽量避免出现线条结构过于复杂的设计,而且整体的图标都需要保持风格一致,例如图标的线条粗细、边角弧度、图标高度宽度比例、风格等等。

特别是对于新人,所以大家一起来看看图标设计的规范吧:

1、像素对齐

需要严格的做到像素对齐,尤其是在做较小尺寸的图标时,如果不严格的遵循像素对齐,那zui终的显示效果就会出现问题。

2、多用布尔运算

在做网页设计图标的时候,能用基本图形进行布尔运算的时候,尽量不要使用钢笔,这样做的好处有如下几点:

让你的图标更加规范;

对图形结构理解更加深刻;

后期更改形状更加方便

3、独特的风格

在做系列网页图标设计的时候,一定要在前期给图标设定一个风格及原则,使之看起来与众不同。

在这里值得一提就是,我们在做线性图标时,一定要保证描边粗细相同、圆角相同,如果这些基础的规则都没有遵循,那也就谈不上风格的统一、创新了。

4、视觉大小统一

在进行网页图标设计的时候,我们会使用栅格辅助线来帮助我们更加严格谨慎,但一定不要被辅助线困住,学会灵活运用,保持视觉上的大小统一。

在如今的APP设计环境当中,一些APP设计大牛都一直强调,设计师要为有品牌意识。那么,在图标的设计中,我们也必须强调“品牌性”,简单的说就是把品牌中的抽象的概念变成具象化的图形,把品牌主副色调应用到图标设计中。同时建议大家每个星期完成一个主题的作品,提升自己的平面设计能力。

二、标注规范

如何把标注的思路整理清晰——结构化思维进行拆解,将大问题拆解成小问题,逐一击破!

标注主要是以下四种不同属性的内容:尺寸、文字、间距、颜色。

在进行标注时,首先去除导航栏和标签栏,因为这些控件通用性非常强,需要单独拿出来进行统一标注,这里我们只对内容区来进行标注示例。

1、尺 寸

我们要将页面上有所需要告知尺寸的内容进行标注,例如图标、图片、头像等等。关于尺寸维度的标注我们需要注意的是:

有圆角的地方,需要将圆角半径标出。

对于一些控件,如button、列表,一定要随时问自己有没有特殊状态,如按压状态、无效状态、选中状态等等,如果你不标明,开会就会默认没有这些效果。

一般情况下,图片的尺寸是需要告诉比例的,而不是固定的大小,这样开发才能更好的适配,常用的图片比例有4:3、16:9等。

很多没有经验的设计师不理解适配的原理,所以很容易将一些控件给出固定的尺寸大小,如果你将这个按钮的宽度和高度都标注出来,开发就会将这个按钮的大小写死,一旦遇到屏幕(白色区域)较宽的时候,按钮还是固定大小,就会影响视觉效果。所以正确的标注方法是给出按钮两边的间距,让整个按钮的宽度自适应(当然高度还是要固定的),这样不论遇到哪种分辨率的尺寸,都能够保持相同的视觉效果,扩展性极强。

2、文 字

文字,需要标注文字的大小、字体、颜色、透明度、行高等等,当然也可以和开发进行沟通,对一些内容进行删减。关于文字的标注需要注意的事项:文字有一个很特殊的属性,就在某些场景下,文字是动态的,所以这个时候,就需要将极限情况考虑清楚。

表面上我们将标题文字的大小、颜色这些内容标注清楚就可以了,但是如果标题文字过多的时候该怎么处理呢?所以必须要给出一个极限情况的规范,比如zui多显示多少个字符,字符超过极限值就用打点的方式处理。

3、间 距

有人可能会觉得间距和尺寸有些相似,但其实它们有着很大的不同,我们可以这样理解:尺寸是形容容器的大小,而间距是形容容器之间的距离。间距相对比较简单,只要标注清晰就不会有太大问题。

4、颜 色

需要标注颜色的内容有分割线颜色、背景色、按钮颜色等等。关于颜色的标注需要注意的事项:切记文字的颜色已经归类到文字属性里面,不用重复标注,思路一定要保持清晰。

网站建设计最新案例赏析:


广州捷伦达实验室设备网站制作首页设计效果图
广州捷伦达实验室设备
深圳朝华车身广告网站制作首页设计效果图
深圳朝华车身广告
深圳华力兴新材料股份网站制作首页设计效果图
深圳华力兴新材料股份
上海科宁会展服务网站制作首页设计效果图
上海科宁会展服务
深圳尚青文化创意网站制作首页设计效果图
深圳尚青文化创意
东莞莲泉净水设备网站制作首页设计效果图
东莞莲泉净水设备
千瑞文化信息有限公司网站制作首页设计效果图
千瑞文化信息有限公司
佛山市共宏纺织机械网站制作首页设计效果图
佛山市共宏纺织机械
青岛沃柏斯智能实验网站制作首页设计效果图
青岛沃柏斯智能实验
深圳趣团建文化传播网站制作首页设计效果图
深圳趣团建文化传播
 

网站建设行业资讯推荐阅读:


案例实战!聊聊交互细节设计的四个小技巧扁平化的网页设计与色彩趋势企业网站建设需求从这些方面来分析易捷网站建设公司告诉你网络推广是什么企业网站建设需要考虑哪些问题2022年网页设计有哪些新的趋势 网站设计公司有哪些特点要怎么跟客户有效沟通企业对于APP定制软件的开发,需要了解什么内容企业网站SEO优化的几个关键点加油吧,前端!整个互联网行业都缺前端工程师!深圳外贸网站建设中需要避开的16个雷区(一)怎么做好自媒体运营第一步完全免费企业网站建设要留意什么难题网站的基本标签深圳网站建设后期优化流量上不去的原因网站建设改版时需要注意什么选取域名都有哪些简易方式网站设计有那些步骤深圳网站设计公司哪家好网站建设全类型的有点及缺点解析,看看哪个网站适合您的企业网页设计的存在是为了支持和传递内容重新制作一个网站的重要性在深圳网站建设的价格差异大的原因!中小型企业为什么要做网站建设有什么好处网站设计的布局有什么方法为什么我发信时说553,服务器拒绝发送我的邮件地址东莞网站建设-最大程度减小的搜索引擎优化(SEO)预算的方法。怎样的网站建设设计最有利于优化中小企业网站制作有哪些要求一个不成功的品牌名会对网站有哪些影响 有实力的网站设计公司定做 网站建设时简介内容的要点经验之谈!在网站建设前看完这四点建议网站建设好不好,立马告诉你网站优化必需方法事倍功半深圳福田企业网站建设方案,网站建设的流程是什么网页制作方法及常见特点浅谈黑帽SEO优化的原因什么是响应式网站响应式网站是什么样的网站建设怎样提高客户信任度小企业网站降权了,有哪些原因造成的呢网站建设-如何让你的网站与众不同如何设计出更加完美的网站简洁的深圳网站建设设计技巧深圳网站建设的汉字几号较合适网站定期改版可以提高推广效果建站时要考虑哪些因素网站设计的风格如何确定 专业的企业网页设计哪家不错为什么软件定制项目难做软件外包公司该怎么发展怎么能使搜索引擎收录我们的网站网站制作需要考虑哪些问题搜狗诉360不正当竞争案开庭双方愿意调解网站建设无难事,小技巧来助攻广州网站关键词优化攻略有哪些网站内容入手是提升一个网站品质的基础科技告诉你企业网站建设设计类型有一种网站开发制作公司如何应对瑞丽算法做网站公司和做网站排名公司的区别深圳网站建设教您网站seo软件定制
企业网站建设行业信息服务发布平台!
(www.fantodo.com)版权所有
QQ在线咨询