专注设计细节:好的web设计更能体现产品的品质感

工作中遇到一个很棘手的问题,交互设计师和视觉设计师在做出高保真原型后提交给前端开发工程师,最后得到的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设计更能够提现产品的品质感,我们要升级体验就必须把基础做好,把这些细节都处理好,我们才有可能有精力去做创新,去做体验。

时间: 2024-08-03 21:57:45

专注设计细节:好的web设计更能体现产品的品质感的相关文章

Web设计核心问题2:Web设计进程(3)

web|进程|设计|问题  2.9 分割的设计阶段 原型设计阶段对大多数Web设计人员来说是最有趣的,因为它开始让项目成型.在这个阶段,应该同时开发外观和技术上的原型系统.无论如何,在建立原型系统之前,应该尽可能收集更多的内容.内容本身会影响站点并帮助指导它的形成.如果内容的基调非常严肃而外观却非常有趣和随意,站点对用户来说会非常奇怪.预先看内容有助于统一技术和内容.同时,也应该考虑到收集内容是站点设计中最慢的一个方面.Web项目的参与者很积极地参与集体会议,但一旦需要他们在内容方面上做工作时,

Web设计核心问题2:Web设计进程(2)

web|进程|设计|问题  2.4 Web站点项目的途径 理论上,Web站点工程很有道理,但在实践中,它是否奏效呢?答案是完全奏效.然而,由于Web是一个新兴的领域,站点开发很少一致,如显著的时间限制以及项目不断改变的特性.开发者应该小心地继续.为了指导开发,在项目之初,就应该采用某个进程模型.如果站点是崭新的或增加起来非常困难,就应该采用瀑布模型或带有涡旋的修正瀑布模型.如果项目是有关维护的,比较简单并有很多未知的因素,那么联合应用开发方法就比较适合.不考虑项目本身,第一步通常都是相同的:那就

交互设计中响应式Web设计的优势和设计流程

在设计中经常遇到这几个问题: 1.想要网站兼容手机.平板电脑.pc,就得为不同的设备定制不同的版本. 2.想要网站的某些页面在宽屏显示器下一行显示更多的内容,又得为宽屏定制一个版本. 3.很多人并不是在全屏的情况下浏览我们的页面,如果让页面随着浏览器宽度改变而相应的调整会不会比较好? 有没有办法能有效解决这些问题呢? 响应式Web设计(Responsive Web design)的理念是页面的设计与开发应当根据设备环境(屏幕尺寸.屏幕定向.系统平台等)以及用户行为(改变窗口大小等)进行相应的响应

Web设计核心问题2:Web设计进程(1)

web|进程|设计|问题 创建一个好的Web站点极具挑战性,从外观设计到数据库集成,那么多不同的部分都会留下很多犯错误的空间.为了减少Web项目失败的风险,我们需要有一个进程模型来指导开发过程.不幸的是,很多Web设计者采用了一种可能被称为N I K E的开发方法-他们只是做,而很少考虑前景和计划.这种建设网站的过程是不符合方法学的:站点的目标定义得很松散,整个进程依靠的是直觉,没有严格的过程定义而缺乏可预见性.以这种方法开发的站点像植物一样,它们自然地生长,偶尔会变成美丽的花卉,但更多的情况却

iPhone优秀应用设计细节:保证品质的设计

文章描述:不拘规范的iPhone优秀应用设计细节.  作为一个刚入行的交互苦逼女,最烦恼的事情是如何解决"iPhone原生的界面控件无法满足产品日益增长的功能需要"这个大矛盾.一方面,如果保守地采用传统的iPhone控件,不能给产品带来太多的创新价值:另一方面,如果过于突破,又害怕不能通过APP Store的审核,开发同学辛苦之后却竹篮打水一场空.纠结通过的时候,看到APP Store上有一些创新的设计,并从中获得启发的时候就特别开心.这里分享一些特别有新意的APP,看看它们是怎么突破

网站设计的8个Web设计趋势 苹果单页面

本文译自网站设计公司weavora.com,介绍了在他们眼里 8 个 Web 设计趋势:单页面.用照片做背景.色块设计.超大号的图片.聚焦简洁.响应式设计.视差滚动.强调字体,每个趋势后面都附了数个案例,相信对网站设计师会有一定的参考价值. 像苹果网站的单页面 单个长页面的设计一度不受人待见(无论是客户还是设计师),但现在整个网络随处可见.一个合理的解释是,用户现在早已习惯于使用鼠标滚轮了,比起在多个页面间来回查看,用滚轮上下浏览要省事得多. 包括苹果在内的一些知名大公司也使用了相当长的页面来展

网页表单交互设计细节:表单校验设计的思考

文章描述:表单交互设计之二--校验思考. 你是否经常碰到在填写表单时,提交无数次却还是无法通过校验的情况:或者你是否在为不知道填写中哪里出现错误而抓狂:再或者你是否碰到过当你填写了一大堆信息,之后点击按钮提交时,校验报错的同时,你发现你所填写的所有的信息都被清空:或者你还碰到过很多很多校验当中出现的问题,那么我们现在就开始进行表单校验设计的思考. 那校验有哪些情况呢? 1. READY? 提到校验,我们往往会联系到提交表单后出现的错误提示类信息,但是其实在填写表单前的提示信息与表单填写校验有着莫

Web app设计细节:web app互动设计技巧

文章描述:Web app设计浅谈 . HTML5技术的强势发展,为互联网带来的最大改变就是: web从"已死"的预言中回过头来给Native app一记沉重的回马枪,web app成为举世瞩目的明星开始走在各大公司研发的时刻表中.Google .微软.苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的"云"服务平台,企图在web app时代到来的时候充当霸主.本文将围绕web app的设计,与大家讨论几点设计技巧. 什么是web

电商网站Web设计提高用户体验度的九个要点

无论是传统商业时代还是互联网电商时代,提高用户的极致体验都是达成营销盈利目标的重要行动.而对于电商而言,Web设计的核心与目标就是以用户为中心,追求极致的用户体验,并完成其本身所承载的商业或用户诉求等目标. 互联网时代,电商网站Web设计提高用户体验度有以下九个要点: 一.网站定位 首先,你应该确定你的网站的用户群有哪些,是否承载电子商务功能单位,是否满足在线购物需求等等.传统的电商网站页面颜色过于单调.布局太过传统且整体缺乏活力,只是满足官网的定位,但是却无法满足电子商务的网站需求.因此,这时