当前位置 > 主页 > 万和大讲堂 >


南京UI培训说说关于UI标注的那些事儿!

2016-05-31 11:46

  细节无小事!标注在设计中是很重要的一环,所以,南京万和UI培训今天和大家说说关于UI标注的那些事儿!


  之前大家做标注用的标注神器Markman,确实给大家带很多的方便,可是在标注很多元素比较多的界面时,估计大家偶尔也会不好意思吧!整个界面都是Markman标志性的红色和各种标注元素,看起来很是费力,到把标注文件给到我们可爱的攻城师的时候,他们都呆了。会不会感觉他们像是被无数蚂蚁叮咬的感觉。



  上面的标注做的也很细致所有元素都是有标注的,而且所有的标注都有知识性的箭头,但是,就是看起来很是费力,因为上面的元素太多了,根本看不过来。从南京万和UI培训上面说的的例子,想说其实标注在设计师眼中也应该当设计来做,在一个产品中也是设计的一部分,更是帮助设计稿高度还原的重要手段。


  可能大家会问,难道在设计之前都不讨论的吗?


  肯定是经过讨论的,并且统一了意见,之所以会出现这样的问题,是因为我们高度依赖所谓的标注神器(Markman)在当时我们没有更好的办法去解决。而且还有一个重要问题被忽略了,我们在标注的时候还要考虑工程师在开发产品时的开发逻辑。他们在产品开发时首先是得先搭建整体的架构布局,分区分块的把内容分好,然后是完善界面各区域的内容,最后再进行视觉精细化的调整。


  那既然我们工作和工程师是分不开的,那么我们是不是把他们的开发逻辑用到我们的标注图上,也分步骤分区分块进行分别标注?这样就符合他们的思维惯性,而且也会提高整个开发效率和降低二次沟通的成本。我们就先标注每个模块间的间距、标注模块与模块的间距、模块与设备屏幕间的间距(考虑适配问题可能好多间距都要采用百分比进行标注)然后再告诉他们字体和颜色值。


  那我们就按照之前梳理的逻辑来制作标注图:


  1.横向间距:


  我们横向标注元素的左右的外边间距、元素之间的间距和元素的实际横向宽度。(南京万和UI培训提醒大家注意:还要考虑各种宽度的屏幕,所以有的地方要百分比标注)


  


  2.纵向间距:


  标注元素的上下间距、行高和元素实际的纵向。


  


  3.视觉样式


  色值、字体、字号、透明度、圆角。


  


  最终我们会给到前段工程师的效果图:


  


  总结一下,南京万和UI培训上面做的是数字化过程,那我们把标注做好后,就像我之前说的把标注当成设计,还可以更进一步趋完善标注比如用颜色去区分标注的不同类型,提高标注本身的识别度。

最近开班 more>
  • Python基础班
  • Java全栈开发
  • 前端基础班
  • 软件测试
  • 云原生精英班
  • 云网预科班
  • CISP
  • HCIE-Datacom(HCIA,HCIP基础)
  • HCIP-Datacom(HCIA基础)
  • HCIA-Datacom(0基础)
  • HCIE-Datacom(HCIA,HCIP基础)
  • HCIP-Datacom(HCIA基础)
  • HCIA-Datacom(0基础)
  • OCM 12C
  • OCP 19C
  • RHCE 9.0
  • 随时开课
  • 12月26日
  • 随时开课
  • 12月4日
  • 12月16日
  • 12月9日
  • 12月21日
  • 1月6日
  • 12月30日
  • 12月16日
  • 12月21日
  • 12月7日
  • 12月7日
  • ——
  • 随时开课
  • 12月16日
    • 姓 名 :
    • 电 话 :
    • 课 程 :

技术交流群

  • Java大数据交流群560819979加入
  • Python技术交流群595083299加入
  • Oracle技术交流群595119011加入
  • Web前端技术交流群604697610加入
  • Huawei技术交流群482919361加入
  • Redhat技术交流群587875348加入
  • UI设计技术交流群511649801加入
  • Cisco技术交流群596886705加入
  • IT运维技术交流群605888381加入