《响应式Web设计全流程解析》一1.3 专家的入侵

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介:

本节书摘来异步社区《响应式Web设计全流程解析》一书中的第1章,第1.3节,作者: 【美】Stephen Hay 译者: 余果 , 等 责编: 赵轩,更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.3 专家的入侵
很久以前,每个公司只要一个人就可以完成绝大多数的网页设计,不包括项目管理、后台开发,只包括视觉设计、交互设计和常见的前端开发。

1998年,前端开发主要的工作就是写写HTML,也有些Flash要做。我最早的员工都不知道什么是CSS,还得我来给他们解释。那时候还有很多用CSS做不了的事情,而JavaScript还完全名不见经传。

那时候设计一个网站大概是这样的:在Photoshop里画好设计稿,切图,把它们放回HTML,用Photoshop渲染的内容替换对应的部分,不论这个网站是小的静态宣传站还是CMS的模板站。


1

当开始系统化、模块化地思考网站的视觉架构时,我们用最简单的线条,称为线框或者图表,来描绘网站。即使文档型网站也有交互方式,而这些特性都需要在设计流程中沟通清楚。


2

在我的记忆中,从2002年开始,事情有了转折。当项目足够大,网页上的工作量足够复杂时,我们会在一两个前端体验上专业化。许多设计师还在写HTML,而网站图表和线框是信息架构师的工作范畴。像“Jame Garrett的视觉词汇表”这样的工具给了我们一个方法,可以根据基础交互实时查看网站结构。随着交互形式的变化,从客户端和服务器的交互到更小而具体的客户端侧交互,专家们使用了大量细化的线框来展示。这些线框逐渐变成了没有颜色和图片的网页,有时在设计稿里为了客户可以点击,在线框里配上链接可以互相跳转。

不久之后我们意识到,继续做一个全面的网页设计师很难了。网页设计领域诞生了信息架构、交互设计、视觉设计、前端开发等细分子领域,几年后又相继出现了更多子领域,比如每个网站都有强需求的内容运营和时常含糊的用户体验设计。这时,作为交互设计师重要的产出之一,线框已经足够细化,而视觉设计师的职能也相应有略微改变。即使在笔者成文的今天,在很多网站设计和开发公司,许多视觉设计师仍遵循传统瀑布流程,跟随着交互设计师的脚步。这意味着,视觉设计师拿到手的是复杂的线框图,并且是由客户看过并且认可的,没办法改动。这让他们的工作简化成了令人尴尬的“根据编号涂颜色练习”。视觉设计师被要求在线框的基础上做设计——改改字体排版、按网格排整齐、上色并画出图像——基本可以概括为在线框的底子上做点小修饰。


3

在这种情况下,真正的设计工作是由交互设计师完成的,他们才是解决问题的人,而视觉设计师只是按照线条上色罢了。这看上去很不公平,因为不解决问题的设计师仅仅是在做装饰,而做装饰不是设计。

相关文章
|
2月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
165 3
|
2月前
|
运维 负载均衡 安全
深度解析:Python Web前后端分离架构中WebSocket的选型与实现策略
深度解析:Python Web前后端分离架构中WebSocket的选型与实现策略
124 0
|
1月前
|
JSON JavaScript 前端开发
蓝桥杯web组赛题解析和杯赛技巧
本文作者是一位自学前端两年半的大一学生,在第十五届蓝桥杯Web组比赛中获得省一和国三。文章详细解析了比赛题纲,涵盖HTML、CSS、JavaScript、Echarts和Vue等技术要点,并分享了备赛技巧和比赛经验。作者强调了多写代码和解题思路的重要性,同时提供了省赛和国赛的具体流程及注意事项。希望对参赛者有所帮助。
77 3
|
1月前
|
安全 前端开发 Java
Web安全进阶:XSS与CSRF攻击防御策略深度解析
【10月更文挑战第26天】Web安全是现代软件开发的重要领域,本文深入探讨了XSS和CSRF两种常见攻击的原理及防御策略。针对XSS,介绍了输入验证与转义、使用CSP、WAF、HTTP-only Cookie和代码审查等方法。对于CSRF,提出了启用CSRF保护、设置CSRF Token、使用HTTPS、二次验证和用户教育等措施。通过这些策略,开发者可以构建更安全的Web应用。
94 4
|
1月前
|
安全 Go PHP
Web安全进阶:XSS与CSRF攻击防御策略深度解析
【10月更文挑战第27天】本文深入解析了Web安全中的XSS和CSRF攻击防御策略。针对XSS,介绍了输入验证与净化、内容安全策略(CSP)和HTTP头部安全配置;针对CSRF,提出了使用CSRF令牌、验证HTTP请求头、限制同源策略和双重提交Cookie等方法,帮助开发者有效保护网站和用户数据安全。
76 2
|
2月前
|
前端开发 开发者 容器
构建响应式Web界面:Flexbox与Grid布局的深度解析
【10月更文挑战第11天】本文深入解析了CSS3中的Flexbox和Grid布局,探讨了它们的特点、应用场景及使用方法。Flexbox适用于一维布局,如导航栏;Grid布局则适用于二维布局,如复杂网格。通过示例代码和核心属性介绍,帮助开发者灵活构建响应式Web界面。
60 5
|
2月前
|
JSON API 开发者
深入解析Python网络编程与Web开发:urllib、requests和http模块的功能、用法及在构建现代网络应用中的关键作用
深入解析Python网络编程与Web开发:urllib、requests和http模块的功能、用法及在构建现代网络应用中的关键作用
22 0
|
1月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
175 45
|
18天前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南

推荐镜像

更多