web界面设计思路

　　在不同的时期对页面前端的看法似乎是多变的。在互联网早期的时候，小车还是比房子贵的，烧饼和粉丝还只是用来吃的，菊花还只是用来泡茶的。那时的页面设计风格相对单一，对应的页面需求比较简单，并且当时的浏览器也基本是IE6的天下，javascript也只是网页特效的代名词，HTML页面本身没有引起太多人的关注，似乎只要能用div甚至table加css辅助把图片定好位，把页面内容预留好就OK了，并且这种观念存在了很长一段时间。随着页面内容的丰富，设计风格的发展，交互复杂性的增加，AJAX的应用，浏览器的更新换代，又让大家重新对最基本的页面本身重视起来。以下就是赢在威客网小编为您整理的web界面设计思路。

　　实现效果图是最基本的工作


　　把视觉稿通过页面代码的方式表现出来包含了两个基本诉求：1.能够真实反映视觉稿；2.能够通过浏览器的兼容。这两个诉求的达成需要我们有追求细节的态度和一定的页面功底，能完成这两个内容就可以初步进入页面前端的从业者行列了，但这就代表着我们可以胜任页面开发的工作了？不，才刚刚开始！

　　与设计师的沟通和项目的参与

　　沟通很重要。先抛出几个问题：我们有没有和设计师探讨过某些效果对低端浏览器渲染效率影响比较大？有没有探讨过部分效果可以用CSS3实现从而使得结构更加简洁清晰？有没有在代码和视觉中寻追求过平衡？页面前端的开发向基本用户，编写的代码也直接作用在浏览器上，我们有义务对页面的稳定性和渲染效率负责。我们也经常碰到项目在总体进度压力下导致的设计与页面前端开发同步进行，这时更有必要尽量多地获取项目信息，了解我们还要做些什么，这些可以帮助我们充分考虑重用和框架拓展。

　　良好的页面结构

　　页面结构的编写好比盖房的地基建设，其好坏会直接影响到CSS代码的质量、js开发、后台开发还会影响到以后的页面拓展、迭代和页面调整。拿到视觉稿后，不要忙着动手开始，多观察思考。先分析布局，划分框架，然后规划结构，编写代码。特别在大型项目中，合理使用模块化的开发不论从整体进行还是拓展维护都有相当大的好处。

　　关于hack

　　很多同学在页面开发时上网搜索最多的就是hack了，是否我们完全要依赖hack来实现页面兼容性，答案是否定的。大家经常比喻IE6向我们撒了一个谎，结果我们要再撒一百个谎来圆这个谎。不否认IE6经常让我们口吐鲜血，但不代表我们用更多的“谎言”来弥补就可以心安理得。大部分情况下可以通过变换思路调整HTML结构，或使用一些虽然无法解释但相对安全的css来干掉hack。谁都无法预计使用hack什么时候会让我们栽一个大跟头。比如触发layout或position:relative就可以帮助解决很多IE6的问题。

　　优美的代码

　　现在很多web项目功能复杂，代码规模也会变得很庞大，如何更好地进行协同开发和维护是我们面临的一个问题。需要考虑完善统一的规划，还有要养成良好的代码开发习惯才会在面临各种情况时游刃有余。翻阅页面代码，看到合理的标签使用、良好的注释、清晰的代码结构、用意准确的css不仅犹如欣赏一个艺术品，更为下游开发和协同开发降低了不小的沟通成本，我们有什么理由不去这么做呢？举个反面例子：div滥用是现在比较典型的一个问题。数数看自己使用的标签有多少个呢？不同的语义都该使用对应的标签代码，特别是HTML5提供了更丰富的语义化标签，它们都苦苦地在等待战场上的冲锋号，让我们去解放它们吧！