1.3 未来方向
令我兴奋不已的是,建筑师在尝试克服自古以来的限制。然而,网页设计师正面对日新月异的设备和环境,故被迫要克服自设的限制(网页本应非常灵活)。
我们需要放开限制。
不同版本的网页,设计不应断续,不应只配合指定设备或浏览器,不同版本应当成同一体验的不同表面。换句话说,设计的网站不只要更灵活,还需配合使用媒介。
概括说来,我们需要“响应式网页设计”。网页本来就是灵活的,应好好加以利用,无需依赖设计师所需的限制。实现响应式设计,只需要在我们的作品中嵌入基于标准的技术,并稍微改变网页的设计哲学即可。
因素
到底创造响应式设计需要什么?只针对前台界面,设计需要3种核心因素。
- 灵活的网格界面。
- 灵活的图像和媒体。
- 媒体查询,CSS3设定中的组件。
接下来我们会逐项探讨灵活网格、灵活图像和媒体,以及CSS3媒体查询,创造更灵活、更好的响应方法来设计网页。在此期间,创作的设计能配合浏览器或设备的限制,响应用户需要。
不过,在这这前,看来我应事先声明:我也算是科幻小说迷,喜欢雷射枪、机器人、飞行车以及这类型的电影和电视节目。老实说,我不太在意这些电影和电视节目的质量。无论是由斯坦利·库布里克执导,还是小成本电影,我都会看。只要里面至少有一只火箭飞船,我就满意了。
看过那么多科幻故事,不论好坏,有一种东西,众多作似品乎都情有独钟,那就是秘密机器人。开始时,永远都是有一群探险家,志向坚定,决心要击败那些妖魔鬼怪。带队的都是那些可敬的英雄。船队某处会埋伏着秘密机器人。(播悬疑音乐。)这部机器人心狠手辣、凶狠邪恶、冷血无比、机关算尽。纵使看似人类,奸诈目标只有一个:从内部击倒这群英雄。
故事最紧张的情节就是发现秘密机器人。当然,观众知道谁是英雄,谁是机器人内奸。然而,观众会继续不断地思索:其他角色中,谁是机器人,谁不是机器人?
个人而言,从来都不明白为何如此难猜。我很挂念Johnny 5和C-3PO,因为一看就知道是机器人,它们都不会“披着合成皮肤掩饰自己”,如此荒谬。因此我着手解决这个问题。为了理清混淆因素,我设计了简短的网站,名为“Robot or Not”(见图1.7),用以协助认定究竟谁是机器人,谁不是机器人,协助辨别有血有肉的朋友和铁皮坏蛋。
好吧,或许我是唯一一个有此疑惑的人。
不论网站是否真的有用,这个实而不华的设计会用作例子以示范如何构建响应式网页。接下来的章节会带领大家一起,利用灵活网格、灵活图像和媒体、媒体查询,开发“Robot or Not”。
好了,或许你不喜欢紧张,更有可能你已经听腻了我的连篇废话,只想看到完成品。如果没错,请浏览http://responsivewebdesign.com/robot/ ,尽情尝试。
你还在这里?太好了。我们开始吧。