Cnscorpio

{夫君子之所取者远,则必有所待;所就者大,则必有所忍!}

UI设计中的语义化

写在最先:(百度百科)语义可以简单地看作是数据所对应的现实世界中的事物所代表的概念的含义,以及这些含义之间的关系,是数据在某个领域上的解释和逻辑表示。

在开发中我的看法是:语义化就是还原它的本质,它本来用来表达什么,就应该根据它的本质来使用。(好像跟没解释一样)

在web开发中大家都难免会使用到标签来进行格式化数据,加上表现和行为控制,最后输出页面文档。既然使用了标签,那么根据w3c标准,就必须要“语义 化”的使用它,举个例子,你不能使用div来输出段落文字,而应该使用P标签。有意义的,语义化的标签使得浏览器在底层就将它调整为它本应该表现的样式, 不需要添加其他标记符,减少冗余和无意义表达。

个人认为,在UI设计中也同样可以语义化。怎么说呢,先举个例子:又一个页面效果设计图,在一个搜索框的旁边有一个按钮,就是大家经常见的search按 钮,点击后打开搜索,这个是它本质的需求,也就是说这个按钮的“本职工作”就是执行搜索,那么设计师在输出这个设计图给页面开发人员的时候,通常是使用 ps来切图输出,而切出的图可能会是这样的(index_02_9.gif),页面开发人员就刚开始看这个图的时候就纳闷了,这个02_09是啥玩意呢?

也许你会说:就一个search按钮而已啊,看缩略图不就知道了?是的,在这种情况没错,但如果有两个,或三个呢?并且是在页面结构不同的模块呢?并且只是有些小区别呢?

如果语义化输出切图,就能避免这些困惑了,这个search按钮既然是在index的文章搜索框旁边,那我就将它命名为 (indexArticleSearch.gif),这样就明了了。皆大欢喜,维护的时候也能减少搜索的时间,对于大型项目,个人认为能提高大家的效率不 少。

  1. yu says:

    恩,是个新的角度。不错。。。。

说两句吧:
(*)
(*绝对不给酒吧女)