编程和UI设计有什么内在的联系吗?

html-css024

编程和UI设计有什么内在的联系吗?,第1张

 编程和UI设计有什么内在的联系吗?

和UI设计最能扯得上关系的编程,就是Web前端编程了。

在一款App产品的开发流程中,Web前端编程,就处在U设计的下游,所以UI设计师与前端工程师会有密切沟通。因为U设计师做好的视觉稿,通常是静态的.PNG图片或者动态的Demo,无法实现真正的击滑动、长按的功能交互,所以接下来就需要前端工程师来完成。

具体协作就是,UI设计师用PS、Sketch或其他设计软件, 做好视觉稿,然后切图、标注、抱好以后,移交给前端工程师。前端工程师,收到这些图片资源,以及标注规范后,就借助HTML、CSS、JS等前端编程语言,来还原UI设计师的视觉稿,这个过程就称之为[重构]。重构后的文档能够在浏览器,或者其它宿主环境中被访问,拥有完整的交互功能。

前端重构UI界面,主要目的在于对APP、网页功能的实现。同时还需要调用后端数据接口,以实现软件App界面中的图片、文本等信息,能够实时的更新,实现真正的可用。这个环节往往需要后端工程师提供支持来共通完成,这个过程就称之为[研发]。

所以,整个流程下来,和Ul扯得上关系的主要是前端编程。因此他们还会时常沟通一些设计 方案的可行性,以节约开发时间成本,更快推动项目的进程。

解决方法有很多,如果可以对html改动的话,就给你需要细化的页面元素加多一个class或者ID就行了,当然这种方法应该不是你想要的。那么接下来是不改变HTML的情况下,直接用css的方法来实现你想要的效果——

方法一 细化选择符

假如全局是这样来定义一个元素的样式的:.abc {background:#000},同时这个class为abc的元素是隶属于某个元素的,比如下面这样的html代码结构

<div class="container">

<div class="abc"></div>

</div>

那么在细化css里面,只需要在.abc前面加多一个父元素的选择符就行了:

.container .abc {background:#fff}

这样.container .abc的优先级就大于了.abc,自然细化css里面的background设置也就不会被全局CSS覆盖了~~

方法二 提升样式的优先级

这种方法个人不太推荐,相对而言会简单粗暴一些。同样是上面的例子,在细化CSS里面,只要在样式后面加一个!important,例如这样:

.abc {background:#fff !improtant}

这个样式的优先级就会默认提升到顶级,全局样式就无法影响到它了。

方法三 改变两个样式的加载顺序

这种方法比较简单,就是只要把细化css加载在全局css之后就行了,这样后面的样式就会自动覆盖前面的样式。不过如果你的html里面这两个样式表的加载顺序是先细化后全局的话,就要稍微调整一下代码才行。

其实没什么关系,css是web中的一种控制内容的表现形式,就是控制的html标签的位置,大小,颜色等,ui就是用户界面,就是画图,在web中ui的图画好后,经过切割,然后写css,就可以制作一个html的页面了,有的公司这个工作是一个人做的,叫美工,有的公司就分开,美工负责css,UI只负责画图