对于UI设计初学者来说,了解清楚设计规范是必须要做的,为了帮助大家提升工作效率,合肥学码思小编给大家整理了标注规范和图标规范,希望能给大家带来一些参考:

  一、标注规范

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

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

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

  1、尺寸

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

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

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

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

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

  2、文字

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

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

  3、间距

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

  4、颜色

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

  二、图标设计规范

  1、像素对齐

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

  2、多用布尔运算

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

  让你的图标更加规范

  对图形结构理解更加深刻

  后期更改形状更加方便

  3、独特的风格

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

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

  4、视觉大小统一

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

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

转载于:https://blog.51cto.com/14296616/2404930

UI设计入门:解析设计标注规范和图标规范相关推荐

  1. UI设计入门知识有哪些 怎么掌握图标设计原则

    UI设计入门知识有哪些?怎么掌握图标设计原则?随着用户体验及审美度的变化,产品界面也在相应的改变,图标作为UI设计师的吸粉利器,被看做是世界上最通用的图形语言.如何才能快速准确地把握图标,掌握图标设计 ...

  2. 怎么学UI设计入门知识 图标设计要遵守哪些原则

    怎么学UI设计入门知识?图标设计要遵守哪些原则?随着用户体验及审美度的变化,产品界面也在相应的改变,图标作为UI设计师的吸粉利器,被看做是世界上最通用的图形语言.如何才能快速准确地把握图标,掌握图标设 ...

  3. UI设计入门:五种基本APP界面类型【萧蕊冰】

    今天这篇是一个UI设计入门:五种基本APP界面类型的欣赏.随着互联网的发展和智能手机的普及,移动应用成了大家最热爱的宠儿,许多移动APP也会根据用户的需求来随时替换本身的UI设计.本篇UI设计入门分享 ...

  4. UI设计系列——线性,面性图标制作day1-2

    UI设计系列--线性,面性图标制作 前言 制作一个用户图标 分析 技巧 制作一个下雨天的面性图标 确定大小层次结构 复制一层 绘制内部图标 绘制一个多角星 修改弯曲度 用椭圆添加弯曲形成雨点 修改颜色 ...

  5. UI设计入门知识大全!零基础小白必看

    很多零基础入门UI设计的朋友们,可能对于学习UI有很多疑问,今天我就来简单回复一些大家常问的问题吧~ 1.UI设计是什么? UI即User Interface(用户界面),简称UI,是指对软件的人机交 ...

  6. 麓言信息UI设计中的动效设计标准与规范

      现如今,优秀的界面动效很能让人产生深刻印象,甚至是带来惊喜.它一方面表达了界面之间的交互过程,解释说明如何使用应用,另一方面也能正确引导用户的注意力.本文将界面动效的主要原则和规范做一个收集归纳, ...

  7. UI设计超干货素材!小图标里的大学问!

    UI最重要组建之一就是图标,随着扁平化设计的发展趋势,越来越注重图标的简洁与寓意表达,平面图标已占主导地位. 图标在视觉化表达上有着非常重要的作用,在工作型PPT中,更是提升商务感的神器之一.为 什么 ...

  8. 怎么学ui设计入门?怎样才能少走弯路?

    很多人错误地将工具作为学习UI设计的入门课,其实入门UI设计最好是选择美术基础.设计理论.很多自学UI设计的小伙伴,都会出现这样一种现象,会使用工具但是在了解真实的需求后却完全动不了手. 这里给想要入 ...

  9. android ui 切图工具,APP切图标注教程:UI设计切图标注的小工具实用技巧

    分享关于一篇UI设计师必须要懂的切图标注的小工具实用技巧,让你在跟开发工程师协作的时候更加得心应手. 设计师必备的UI切图小工具如下3大常用工具: 1.切图工具 Assistor PS 也是一款PS的 ...

最新文章

  1. 动力节点的课堂笔记_男孩把历史笔记画成“漫画”,同学成小粉丝,网友:别人家的孩子...
  2. Android程序为什么没有退出设计?
  3. 对C语言 结构体 和 结构变量
  4. 第二十四期:揭秘:为什么电脑越用越卡 大型破案现场
  5. 将 Palo Alto Networks 连接到 Azure Sentinel
  6. 操作系统之内存管理:2、内存管理的功能(内存分配回收、扩充、地址转化、存储保护)
  7. 详解数据科学与数理统计的基本概念
  8. log4j的使用 ideal java 114812280
  9. mysql有热备设置_Mysql数据热备配置与操作方法
  10. 代码运行错误及解决方法
  11. 异常处理·psftp·local unable to open
  12. 经典的股票/期货量化交易策略,拿来即用的Python策略源码
  13. MSN QQ在线聊天代码
  14. java打开jnlp_如何打开jnlp
  15. 你办培训机构还不知道教育培训管理系统?
  16. css实现立体感按钮
  17. 【MySql】windows下重置数据库密码
  18. ABP EF Core多数据库支持
  19. php开源 rss订阅_5个开源RSS feed阅读器
  20. 泰克示波器校准显示无校准文件怎么办?

热门文章

  1. 别人的Linux私房菜(19)认识与分析日志文件
  2. 【Linux】解决用vi修改文件,保存文件时,提示“readonly option is set”
  3. gentoo Portage使用
  4. stl之map容器的原理及应用
  5. c语言输出合法的出栈算法,c语言栈的实现以及操作
  6. php 7 xhprof,php7中使用xhprof解析
  7. android沉浸模式代码,Android沉浸式的两种方法
  8. php 判断是否是16进制,如何求解16进制字符串的验证
  9. 百度竞价排名曝光_企业入驻百度爱采购必须选好本地运营服务商
  10. android字体等宽,Android等宽字体大小