精致的web设计
来源:折折熊de交互论 发布时间:2009-12-04 19:07:00
工作中遇到一个很棘手的问题,交互设计师和视觉设计师在做出高保真原型后提交给前端开发工程师,最后得到的web产物从细节上和布局上都和高保真原型有所差距,比如应该有鼠标手型的地方没有鼠标手型,导致用户不知道这个可点,又或者一行文字上下高低参差不齐,看起来就很廉价没有品质感。导致交互和视觉不得不放下手中的工作去一一核对这些问题,并指出给前端开发工程师让其改正,最后发现其实这些问题都可以迅速的做好,那为什么前端开发却不愿意在一开始的时候就做好这些工作?
从几方面来看待这个问题:
1.过细的专业消磨掉“默契”。相信大部分有一定互联网经验的人都是做过前端开发工程师,在那个年代从设计到开发都是同一个人,所以完成的东西往往和预期的符合度比较高。因为在做前端开发的时候自己心里知道哪些地方应该加粗,哪些地方应该有间距,哪些地方应该让用户更突出地看到。但是现在大家分工越来越细,每个工种的能力也越来越专业化,所以导致了原来的那种“默契”也越来越消失掉。前端想要做的就是写出牛B的代码,最好是能够超越google产品的技术水平。但是往往越专业就越偏离真正做产品的目的。之前一次讨论中,一位前端同事说对他们来讲,代码的整齐比用户看到的页面整齐更加重要。我不反对代码整齐的确体现了前端的专业性,但是换句话讲代码整齐是前端的基础,对前端的要求是不管用户看到的页面有多复杂,有多绚丽,你们的代码还是依然要那么整齐,这才是最牛B的。
2.等待中的沟通。项目中为了能够保证质量,通常都会用产物传递的方式来帮助每个角色的沟通。我也一直“致力于”制定和update各式各样的规范,但是我发现,无论你的产物多详尽,总会在传递过程中消耗一部分,导致后端的角色无法完整真正理解你的初衷。幸好在传递的过程中增加了会议沟通的形式,但是一个会议让所有人能够理解并且提出建议是不大可能的。那除了产物传递和会议以外,我们还能做什么?我们需要的是主动沟通。工作中有句话,能够用IM的,绝不用邮件,能够用电话的,绝不用IM,能够当面沟通的,绝不用电话。这就是最好的沟通方式,当然经验告诉我们,每次沟通完之后,必须用邮件抄送所有人来做个沟通记录,以免大家事情太多最后忘掉。但是沟通又会引发一个问题,前端、视觉往往是等着交互和需求方去找他们沟通,也就是后置角色一直都是等着前置角色来找他们沟通,其实这个是错的。所谓的沟通是相互的,不要等!当后置角色发现问题时应该主动及时地找到对应的前置角色去把问题解决了,这样的方式一定可以把那些疑惑和不确定都弥补掉。
3.不够统一的产品思想。在每个专业角色的领域大家都在说往前走,意思就是不要停留在技术层面,要往前往远看。从后台一直到产品规划,大家都有往前进的趋势。当然这和社会的现状有关,往往代码工程师会羡慕前面的设计师甚至是需求方,只要口头说说,他们就要做很多工作,谁都希望做上游。我不反对往前走,但是我希望大家能够摆清定位,所谓的往前走是希望每个角色的思想是统一的,不仅能够有出色的专业能力,而且能够站在更高的角度去看产品,并把自己的专业能力反应在产品上。现在大多数人都在嚷着说我们要往前走,要去挑战上游的专业能力,但是我想问问这些人,你们自己的专业能力够出色了么?如果连最基本的web可用性都没注意起来(例如鼠标手型表示可点击,元素间的对齐,大区域指示有助于用户找到目标等),你们怎么可能往前走,怎么可能把自己的专业能力应用地更出色。
4.没有规划的技术。所谓规划,大家都会想到产品前期的市场调研,其实每个角色都应该对自己的工作进行规划。我经常遇到问题是,当前端开发工程师完成的产物没有达到设计师的要求时,前端开发总会说这个什么dom结构、什么js本身都不支持等等,甚至有时候需要优化和升级的时候才发现,前端把代码写死了,根本不可能有优化,只能重写。面对这些问题时,应该两个解决办法,一个是在做之前主动找上游沟通整个产品的方向和目标,并把它落实在技术中,预留好接口和开放结构,从而使升级优化成为可能。另外一个是认真仔细读懂交付产物说明,看清每种状态和分支情况,当发现问题时应该在做之前向别人提出,从而大家可以一起来找到新的解决方案,不要等到完成时再说什么都做不了。
5.细节决定成败,要体现专业能力必须以细节为基础。一开始说的前端开发做的产品细节上的不完善,有个前端的同事说,要做他们感兴趣的东西,他们才能注意起这些问题。的确在前端的领域写js比写css更令人兴奋和有动力。那我只能觉得,产品不是儿戏,更不是因为你感兴趣而去做的。创新的东西人人喜欢,但并不是每个人都可以创新,你一味等着上游的角色给你令人激动的工作,那只能说明你本身并不适合这份工作,所谓的创新就是在专业领域做比别人更专业的事。另外,我不否认写css比js更枯燥,但是这并不意味着css就不重要,其实更多时候css比js重要很多,很多web2.0的网站用的就是css去引导用户,描述产品等。并不是交互和视觉一直关注这些布局和细节的问题,换句话讲,这个都是基础的东西,应该前端开发工程师本身的意识提高,才能让大家关注更多体验的问题。我也希望不要再这些基础的领域绕来绕去,好好做产品,做好自己的角色,做到完美!
最后我想说的是不要认为web设计就是粗糙低劣的,好的web设计更能够提现产品的品质感,我们要升级体验就必须把基础做好,把这些细节都处理好,我们才有可能有精力去做创新,去做体验。


猜你喜欢
- 背景接口域名没有写死,而是动态获取。具体实现就是 通过读取一个静态json文件,来设置真实的接口域名。好处是原域名有可能被封,这样可以直接后
- 如何制作一个股票滚屏显示面板?<html> <head> <script
- 代码如下:<script type=text/javascript src=http://fw.qq.com/ipaddress>
- (一)问题遗传算法求解正方形拼图游戏(二)代码#!/usr/bin/env python# -*- coding: utf-8 -*-fro
- 笔主在做一个项目要生成一组随机有序的整型数字,并按行输出到文本文件使用,恰好开始学习Python3,遂决定直接使用Python3解决思路:与
- 函数使用单下划线_开头使用单下划线(_)开头的函数_func不能被模块外部以: from module import *形式导入。但可以用:
- 前言常见的通知方式有:邮件,电话,短信,微信。短信和电话:通常是收费的,较少使用;邮件:适合带文件类型的通知,较正式,存档使用;微信:适合告
- 我们都知道Django rest framework这个库,默认只支持批量查看,不支持批量更新(局部或整体)和批量删除。下面我们来讨论这个问
- 事务全部是关于原子性的。原子性的概念是指可以把一些事情当做一个单元来看待。从数据库的角度看,它是指应全部执行或全部都不执行的一条或多条语句的
- 本文实例讲述了Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作。分享给大家供大家参考,具体如下:实现一个功能: &n
- 本文参考文章,出于学习目的,写本文。开发项目时,为了维护一些经常需要变更的数据,比如数据库的连接信息、请求的url、测试数据等,需要将这些数
- 在做NLP(自然语言处理)相关任务时,经常会遇到需要识别并提取省、城市、行政区的需求。虽然我们自己通过关键词表一个个查找也能实现提取目的,但
- 在这可以用join()函数'x'.join(y),x可以是任意分割字符,y是列表或元组。以列表为例,可以将列表中的每一个元素
- 本文实例为大家分享了js canvas随机粒子特效的具体代码,供大家参考,具体内容如下前言canvas实现前端的特效美术结果展示代码html
- 概念django自带一套信号机制来帮助我们在框架的不同位置之间传递信息。也就是说,当某一事件发生时,信号系统可以允许一个或多个发送者(sen
- 其实最近看了不少Golang接口以及方法的阐述都有一个地方没说得特别明白。就是在Golang编译隐式转换传递给方法使用的时候,和调用函数时的
- 最近因工作需要,要学习PHP的基础编程,于是学习架设PHP工作环境。但按照教材上介绍的那样,安装了WMAP后,一直无法运行成功。后发现Apa
- 以读取VOC2012语义分割数据集为例,具体见代码注释:VocDataset.pyfrom PIL import Imageimport t
- 本文介绍了通过Cursor 工具使用GPT-4的方法。Cursor 是集成了 GPT-4 的 IDE 工具,目前免费并且无需 API Key
- 原始值->基本类型Number String Boolean undefined null存储在栈(stack)中的简单数据段,也就是