产品和前端

由于性格里是个完美主义者,同时由于对前端有偏重,所以经常会忘记自己做产品的定位,表现在两个方面:

1、跑出界。扔掉手头工作去关注本应有其他人来操心的工作。或许公司没有这样的人在做,或许有人但他们做得不好,但是要谨记前端设计、开发、优化仅是我应关注的若干点之一,要评估作为我自身的定位现在去过分关注这个——是否符合产品节奏?是否有条件去做?是否是用户最紧急的需求?

2、不作为。没有完美的前端设计、开发来配合产品,产品就不做了吗?这种状况在小公司里会比较常见,我并不是每次总能有力量和机会去改变这个状况,要适应环境,并在这个环境里把产品做到最好!

谨记。

另:搜索引擎友好(营销)、前端优化,觉得是一个处于平缓发展期网站需要注意的两个点,产品要关注。

Napkee – Balsamiq Mockups原型导出为WEB页面

用Mockups做了一段时间的产品原型设计,非常帮的体验,尤其是在演示的时候。只是后期交付文档的时候,略有缺憾——如果只输出图片,则缺少互动的东西;如果输出MB自己的格式,又需要其他人都得安装MB。
有时候不得不用Axure再做一些重点页面,输出成html页面。无意间发现了Napkee,它是将Mockups文件直接导出成html/CSS/JS文件或者flex文件,真是太棒了。

只要导入Mockups项目,即可直接输出,如下图:



用浏览器打开导出的文件,如下图

How to get it?
下载地址:http://www.napkee.com/napkee/download/

恰到好处的Balsamiq Mockups

对于一个小的团队,文档很多时候是能省则省,而最不能省的可能就是原型。
1、白板+纸。很快,但是无法保存,也没法做后续更新和修改;
2、Word/visio。上手简单,但是得自己建立一套规则,容易产生误解,沟通成本很高;
3、PS/DW。需要产品设计之外的额外技能,比较费时,修改更新也不易;
4、Axure。强大,但容易陷入设计本身,而忘记了原型的目的,需要时刻保持对“度”的把握;

Balsamiq Mockups,恰到好处的出现了。它恰到好处,真正抓住了原型设计的平衡点,既能快速实现设计草图,又能无障碍的进入到团队工作的流程中。

79美刀,俺还是囊中羞涩。
对比官方网站上说的几种免费获得key的方法,写blog恐怕是于我最接近的方法,但很显然我的blog目前也还相当荒凉。
试试吧。

CSS filename and ID

1、CSS文件命名规范
全局样式 global.css/master.css
基本共用 base.css

版面布局 layout.css

模块 module.css
主题 themes.css
专栏 columns.css

文字 font.css
链接 link.css
表单 forms.css

补丁 mend.css/patch.css

打印 print.css

2、ID命名规范
(1)页面结构
页面外围控制整体布局宽度:wrapper
页头:header
页面主体:main
侧栏:sidebar
栏目:column
页尾:footer

(2)导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav

边导航:sidebar

菜单:menu
子菜单:submenu

标题: title
摘要: summary
内容:content/container

(3)功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright

visual designer or web designer ?

在apple4us上读到一篇译文《「风格」与「设计」》,道理虽然简单,但是把简单的道理讲得比较透彻却也是不容易的,译者李如一对原文的把握也是非常棒。此文值得所有web设计师一读。

今天很多年轻网页设计师看待自己这门手艺的视角,和我以前看待流行文化的视角是一样的。要么酷,要么烂。他们错把风格当成了设计,而其实两者是完全不一样的东西。

设计是发生于各个层面的沟通。它告诉你身在何处,你现在能做什么,并且让这个「做」的过程尽量方便。
风格意味着重复,它是关于「风格感」的沟通。用视觉语汇说,风格是设计的一个方面;用商业语汇说,风格是有关品牌特性的沟通。

风格是设计的一个方面——简单的一句话,说出了视觉设计师在web设计时候的困惑。

风格有时也会传达出设计师对设计主体的厌恶。……。在这个意义上,风格是一种地下语言,只能在同侪之间传递,和网站的访客或目的无关。的确,这种风格上的花样还有可能与站点的目的相悖。

风格先行的设计师如果有幸能只选那些符合他们的风格偏好的活儿来接的话,也不是不能成功,可惜大部分网页设计师没有这种待遇。

每个成熟的设计师都会有自己的风格,或者叫做个人偏好导致的一种“风格”,不管是否对设计主体有厌恶情绪,但这种风格大多数时候会影响到当前的设计事务中。

万维网曾经像一本电话簿。现在它更像一张设计作品大全。更准确地说,像是二十位知名设计师的作品大全。年轻设计师以他们的弟子自居,反复拷贝他们的风格。视觉设计「以沟通为目的的设计」之间的界线在这些设计师身上荡然无存。同样,他们也没搞清真正的风格和山寨风格之间的区别:前者源自项目的本质,后者则像是硬接在项目上的义肢。

视觉设计和以沟通为目的的设计,web设计大多数时候都是以沟通为目的的设计,当然,有时候web设计也有那种纯视觉传达的需要。

说回到我现在为公司招聘设计师,Visual Designer?Web Designer?淘宝ued、腾讯cdc招聘的时候都是写视觉设计师,英文也都是Visual Designer。在我写招聘启事及实际工作中,我习惯按照工作重点的不同,把视觉设计师和web设计师通称为美术设计师。说到这里也不是说要抠这个字眼,往细了说我这样的说法也未必就有什么科学依据,但我希望我能通过这个小的说法去影响那些美术设计师,让他们对自己的职业发展和专业发展有个相对明确的认识。呵呵。

纯瞎扯,mark一下。

notes of “don’t make me think”

导读
1、某个东西越是需要投入大量时间(或者看起来会这样),它将来用到的可能性越小。
2、我们不需要面面俱到。
3、设计网站是一个复杂的过程,我们需要“视情况而定”(It depends)。
4、如果某个东西很难用,我就不会经常用它。

指导原则
(一)别让我思考(Krug可用性第一定律)
1、我们的目标应该是让每一页都不言而喻,如果你不能做到让一个页面不言而喻,那么至少应该让它自我解释。
2、大多数人会花比我们想象中少得多的时间来浏览网页。

(二)我们实际上是如何使用WEB的(扫描,满意即可,勉强应付)
1、我们不是阅读,而是扫描
2、我们不作最佳选择,而是满意即可
3、我们不是追根究底,而是勉强应付

(三)广告牌设计101法制(为扫描设计,不为阅读设计)
1、在每个页面上建立清楚的视觉层次
2、尽量利用习惯用法
3、把页面划分成明确定义的区域
4、明显标识可以点击的地方
5、最大限度降低干扰

(四)动物、植物、无机物(为什么用户喜欢无须思考的选择)
1、点击多少次都没有关系,只要每次点击都是无须思考、明确无误的选择。
2、三次无须思考、明确无误的点击相当于一次需要思考的点击。
3、以下情况点击次数更少会更有价值:我们不得不经常深入到站点的某一部分;在一个WEB应用上重复一系列的点击;页面载入数独较慢。

(五)省略不必要的文字(不要在WEB上写作的艺术)
1、去掉每个页面上一半的文字,然后把剩下的文字再去掉一半。(欢迎词happy talk和指示性说明instruction)

必须正确处理的几个方面
(六)街头指示牌和面包屑(设计导航)
1、如果在网站上找不到方向,人们不会使用你的网站。
2、网络导航101法则:寻找目标、先询问还是先浏览、选择浏览通过标志引导在层次结构中穿行、找不到就会离开。
3、WEB世界的特殊之处:感觉不到大小、方向、位置。
4、导航的用途:帮助我们找到想要的任何东西、告诉我们现在身在何处、给用户踏实的感觉、表现站点、告诉用户如何使用网站、给用户对网站建造者的信心。
5、全局导航通常包括:站点ID(Logo)、栏目(Primary Navigation)、实用工具(Utility)、回主页(Home)、搜索(Search)等五个元素,主页和表单页可以例外。
6、页面名称需要注意:每个页面都需要一个名称、页面名称要出现在合适的位置、名称要引人注目、名称要和点击的链接一致。
7、“你在这里”指示器要突出、突出、再突出。
8、“面包屑”需要注意:把它们放在最顶端、使用“>”对层级进行分隔、使用小字体、使用了文字“你在这里”、将最后一个元素加粗、不要把它当作页面的名称。
9、标签的妙处:不言而喻、很难错过、很灵活、暗示了一个物理的空间。
10、标签需要注意:正确绘制、颜色编码、默认有一个标签已经选中。

(七)首先要承认,主页不由你控制(设计主页)
1、主页的任务:站点的标识和使命、站点层次、搜索、导读(Content Promos/Feature Promos)、内容更新、友情链接(广告、交叉广告、合作品牌等)、快捷方式、注册,其他抽象的还有:让我看到自己正在寻找的东西、……还有我没有寻找的、告诉我从哪里开始、建立可信度和信任感。
2、主页的困难:每个人都想占一席之地、想要参与的人太多、一个尺寸要适合所有人。
3、主页的真正意义:传达整体形象。
4、主页如何传达整体形象:口号(Tagline)、欢迎广告。
5、传达信息的指导原则:需要多大空间就使用多大空间、但也不要使用过多的空间、不要把使命陈述当作欢迎广告、最重要的是进行测试。
6、口号要清楚、言之有物,不要含混不清,要长度适中,要能表述出网站特点及显而易见的好处,不要太笼统,不要把宗旨当口号,要有个性、生动、有时候还很俏皮。当然有些网站太著名了就不需要口号了。
7、主页导航可以不一样:增加栏目描述、使用不同的方向、用于标识的空间更多。

确定你没有做错的几件事
(八)农场主和牧牛人应该是朋友(为什么WEB设计团队讨论可用性是在浪费时间,如何避免这种情况)
1、CEO vs 开发人员 vs 设计师 vs 业务拓展人员。哈哈哈哈。。。还是来测试吧。

(九)一天10美分的可用性测试(让测试简单——这样你能进行充分的测试)

(to be continue)

ie6的小bug让我郁闷

这两天在做一个站点的时候发现ie6一个小bug的表现,具体成因是啥还没搞明白。代码如下:

  1. #a {
  2. width: 200px;
  3. padding:50px;
  4. margin: 0px;
  5. background-color: #006600;
  6. }
  7. #b {
  8. border-top: 0px;
  9. border-bottom: 0px;
  10. border-right: 3px solid #CC0000;
  11. border-left: 7px solid #CC0000;
  12. padding:50px 30px;
  13. background-color: #00CCFF;
  14. }
  15.  
  16. #c {
  17. width: 200px;
  18. background-color: #FF0000;
  19. }
  20. #d {
  21. background-color: #00CC33;
  22. }
  1. <div id="a">
  2. <div id="b">
  3. <div id="d">1</div>
  4. </div>
  5. <div id="c">2</div>
  6. </div>

这个bug的形成原因应该是和ie的盒模型有关。只是在调试过程中发现出现问题和id=”b” 的div的上下padding有关,也和他的内容有关。到底原因是啥呐?郁闷中。

闲说产品管理

我不知道大家有没有查过产品管理的来历。

产品管理根据企业业务的不同,大体可以分为两种:生产型企业产品管理、服务型企业产品管理。

根据产品管理部门在行政上的设置又可以分为:隶属市场部门、独立设置。

根据产品管理的范围可分为:全面管理型、市场导向型、生产导向型。

产品管理部门工作应该是放射状的而不应该是纺锤状的。

放射状工作方式效率更高,且权责明确。能够调动各部门的主管能动性,发挥各部门的作用。

在这种方式下,产品部门需要的是协调沟通,出计划、规划。
跟踪工作进度,并就各种突发情况进行计划调整。

纺锤状工作方式效率低下。容易导致各部门消极工作,推脱责任,同时引起产品部门人员膨胀。

在这种方式下,产品部门貌似管理范围扩大了,但是失去了大局管理和掌控,陷入了琐碎工作,疲于应付各方面接踵而至的问题、刁难。

产品部门应该是精英型、集约型、中心型的部门,不应该陷入具体事务的泥淖。

如果产品部门需要很多人才能完成工作,那么不是产品部门自身定位有问题,就是其他部门的工作出了问题。

———举个简单例子———

正确的管理:

问题甲需要解决,产品部门会同相关的部门A、部门B商定解决方案。

最终产品部门给出了解决方案甲,解决方案甲中,要求部门A、部门B需要配合的工作内容。

部门A、部门B直接相互沟通,各自发挥自己的能动性,创造性的完成自己该完成工作。

产品部门跟踪进度并不断修正方案。

在这整个过程中,各部门的权责是明确的。

错误的管理:

问题甲需要解决,产品部门决定了解决方案。

解决方案甲中,要求部门A的工作任务、时间、要求等。部门A按照产品部门要求进行工作。

解决方案甲中,要求部门B的工作任务、时间、要求等。部门B按照产品部门要求进行工作。

在这个过程中产品部门割断了各部门之间的直接联系,并参与了具体事务性工作。

会导致各部门无积极性——因为失去了权力,所以也就会推脱责任。

CSS阴影

先把素材搞进来。

cat

上面是四张基本素材哦。哈哈。看到了么?

然后来一个效果看看吧。哈哈

update:因为换了blog,所以这个以后再整理一下,现在是什么都没有哦。呵呵

[转]如何做一名优秀的UI设计师

作者:soqi

说起产品UI设计通常的认识就是“图形界面的设计”而产品的交互设计往往被忽略!一个好的交互设计对产品的成功起着很关键的作用。UI所做的就是用户最先接触到的东西,也是一般性的用户唯一接触到的东西。用户对于界面视觉效果和软件操作方式的易用性的关心,要远远大于他对底层到底用什么样的代码去实现的关心。如果说程序是一个人的肌肉和骨骼,那么UI设计就是人的外貌和品格!都是一个成功软件产品必不可少的重要组成部分!对我而言程序懂得不多所以只是从UI设计与软件产品整体的关系和如何才能使软件产品得到最佳的UI设计角度来谈。

现在我们的软件产品存在的一些问题有技术方面的问题,但是更多的问题来源于各个部门、各个项目小组的之间的配合。我们现有的开发流程一般都是由市场部门提出客户需求,产品设计人员提出产品设计报告,开发部门设计开发计划,由各个小组分别开发一个模块,最后整合成为一个完整的软件产品。在这些流程之间UI设计应该参与那一个部分,每一个部分应该做到什么地步才可以使产品得到最好的UI设计效果呢?下面我们会在每一个部分具体分析。

首先分析一下现在的问题所在,在一些软件业比较发达的国家软件产品的UI设计过程贯穿了软件开发的自始至终,而且是必不可少的。而在中国产品UI设计并没有被广泛接受,就算是已经有了UI设计师的一些企业也没有对产品的UI有着足够的重视,一般来讲他们大都会把重点放在如何使用代码实现所需要的功能,在我看来这只是一个成功软件产品的一个部分。一个优秀软件产品的开发过程应该是由四个部分组成:
1.软件产品的设计(业务建模)
2.系统的设计(技术建模)
3.分单元的开发(把软件各个部分拆分分单元编写代码)
4.测试(分为单元测试、系统集成测试和产品功能测试),这些是由软件研发部门做的工作。

除去以上软件开发过程的四个部分还有用户需求和用户验收测试,这两个过程是由市场部门和产品用户一起完成。所以说用代码实现产品功能(coding过程)只是软件开发的一个步骤。现在我们回到UI设计的角度来看,作为UI设计人员我们需要全程参与到软件开发过程中,而不只是在某一个步骤参与,现在在大多数软件企业里UI设计师只是在产品的coding过程的时候才实质性的参与到软件开发过程里,而在其它几个步骤里只是参加甚至根本没有参加(在这里我要强调“参与”和“参加”是两个词的不同概念,“参与”指的是完全加入到开发行列开始进入设计阶段,而“参加”指的只是旁听会议或者提出一些简单的意见并没有开始进入设计阶段),这样就会大大降低软件产品的开发效率使开发成本成倍上升甚至导致整个产品的不成功!这并不是危言耸听,下面我们分析一下在一个软件产品的开发过程中UI设计应该怎么做、做到什么地步才能避免上边提到的那些问题?

下面我会根据软件开发的过程解释上边的问题,刚才我提过软件开发过程的几个步骤:
1.产品建模
2.技术建模
3.分模块开发
4.测试,那么我们也分为这四个部分进行讨论:

一.产品建模时期:

我们首先来了解一下“输入”和“输出”,在UI设计里是很重要的两个概念,经常会有人过来对我说“我们有一个软件产品需要美化一下”然后再也没有什么深入的解释了,仅仅这句话我的工作就要开始了,然而这个软件是给谁用的?是干什么的?我们却一无所知!成功的UI设计首先要有完整的“输入”,怎么才能叫做完整的“输入”呢?也就需要UI设计师从整个软件产品的策划阶段就开始介入,在产品用户(也就是客户)向市场部门或者产品部门提出产品需求的时候就要开始参与到产品策划开发过程中来,这一部分对于UI设计师而言就是第一个输入阶段,并且在这个阶段里UI设计师也需要提出一些对产品交互设计的意见,以便产品部门在做产品设计的时候更多的考虑到产品的交互性和功能的简单表现原则,有很多软件在设计阶段就被加入了许多并不是用的附加功能,其实一个好的软件设计就是要用最简单的结构实现用户的想法,一些可有可无的功能看上去很花哨往往会影响用户的判断能力,这些就是产品优化的一些概念了在此我需要简单的提一下如果想要深入研究可以看一些有关于产品优化的书籍甚至是心理学的书籍,有很多人认为软件的优化就是代码的优化(用最少的代码实现产品功能),在我看来这只是程序的优化是针对程序员而言的而不是整个软件产品的优化,产品优化包含了交互设计在现在的多数软件企业没有专门做这一部分的交互设计师所以往往这一部分被忽略,我认为这一部分应该又UI设计师承担起来,从文章的开头我就说过UI设计不只是图形界面的设计,就算是有企业里边有这样的优化人员或者交互设计师他们也要和UI设计师一起配合完成产品交互设计,作为UI设计师产品的交互性和易用性是在做设计的时候必须考虑的!

言归正传,产品设计人员经常不会过多考虑简单易用原理也就是产品出来用什么样的组合形式体现给用户,这也是UI设计师考虑最多的事情,所以UI设计师一定要在产品建模期间参与设计,给产品设计师一些意见。作为一名优秀的UI设计师我们还要在了解了产品的需求之后更深入了解这个产品的使用环境和用户群体的使用习惯。我们还需要了解市场上的同类软件产品的设计方案,研究他们的优缺点,以便在我们设计的时候吸取它们的长处避免它们的错误。在产品建模之后一般的都会由产品设计人员给客户做一次功能设计讲解,往往这样的讲解只是文字性质的需要让客户想象着理解,这就会造成很大的隐患有的客户根本无法理解你的讲解甚至对这样的讲解根本不认真听,因为他们根本不懂,在讨论过程中他们经常会同意产品设计人员的一切设计想法但是产品测试的时候他们又会提出种种不满意,我想这是一般的软件公司都会遇到的也是最最头疼的事情,但这并不能怪客户我说过客户只会关心视觉效果和软件的操作而并不会去关心我们是怎么实现这一切的。这种情况带来的直接后果就是产品的反复修改开发成本成倍上升,怎么避免呢?这就要靠UI设计师了,俗话说“眼见为实,耳听为虚”,所以需要UI设计师做出一个产品整体效果的demo。这个demo用图片的形式表现就可以,我们只需要将要体现的产品界面做一个拼凑就可以了,因为这并不是产品的最后样子,只是协助产品设计人员给客户讲解产品设计。产品建模时期UI设计师要了解客户的要求想法和产品设计人员对产品功能的要求深入了解产品,采集用户的使用需求、使用环境和使用习惯,了解市场同类产品的设计分析它们的优缺点。协助产品设计人员完成产品建模过程并制作产品展示demo模拟用户对主要功能的操作过程和界面呈现,生成交互原型(基本上产品的交互性和易用性问题都需要在产品建模的时期解决)。如果时间允许我们甚至可以提出一份“UI设计分析报告”,这份报告可以附在产品设计说明后,更有效的帮助客户了解我们的产品设计并且帮助开发人员更好的遵循UI的整体要求来完成开发工作。这个时期的关键是“交互设计”。

二.技术建模时期:

在这个时期作为UI设计师我们已经了解了软件产品的功能需求并且拿到了一份产品设计人员的产品设计说明,可以进入界面样式的设计过程了。这个时候我们应该考虑更多的应该是产品的整体风格和界面的设计,通常我们也会做出几份方案给客户选择。有些客户会要求产品遵循一个整体的VI设计标准,那么我们就需要按照一个整体的已定的风格去设计软件的界面,要与客户公司的企业形象吻合。在这个时期软件的UI设计进入到了美术设计阶段,我们需要制定整个软件的风格,塑造软件的整体形象,并且具体的描述每一个界面中的元素和布局、文字字体等信息。在这个阶段我也不应过多的说什么,主要是每个UI设计师各自发挥你们的艺术专长用最简洁、最漂亮的界面表现软件产品。需要注意的就是在我们设计整体风格的时候一定要深入了解这个产品的理念,看看它是干什么用的。不同的产品要有不同的风格,这里边有很多的细节注意,不同的产品、同类的产品不同的内容、不同的传播介质,这些都会决定UI设计的风格。1.不同的产品:比如一个游戏产品就需要将界面做的花哨一些或者用大的图片充斥;如果要是一个应用软件就需要突出使用方便和强大的功能设计要简洁。2.同类不同的内容:比如一个可爱的游戏产品(像是卡通类游戏)就需要将界面做的活泼生动可爱一点;如果是一个角色扮演的战斗类游戏(像是枪战闯关类游戏)就要做的酷一点深沉一些。3.不同的传播介质:我们要做的软件产品有的需要在网络上传播那么就需要我们考虑到网络速度的问题;有的就是利用光盘当作介质那么这样的软件就可以做一些比较花哨的效果。所以说不同的产品还需要单独考虑,这也需要UI设计师多多了解产品,保持与客户交流。还需要重点注意的就是我们在做图形化设计的过程中千万要贯彻在前一个阶段做好的交互设计,始终注意产品的交互性和易用性。在设计过程中我们一定要做出每种结构每一个步骤的效果图,不能只提供图标、按钮、背景图等图片,这样的话程序员根本不知道往那放这些东西,在这个时期我们就要最终确定软件界面的呈现形式。技术建模一般是由高级程序员完成的,他们会将整个软件开发分为一个一个功能模块,分配给一个一个的开发小组。但是这些负责技术建模的高级程序员考虑更多的往往是如何将整个设计用代码实现、怎么才能更有效的复用以前已有的模块等等,而不是软件是什么模样会有什么样的风格,所以作为UI设计师我们必须主动出击,多多和他们交流以保证我们的想法能够完整的实现,如果有技术实现的问题我们还要及时做出修改。有时候我们还需要根据客户或者产品的特定需求做一些延伸性的设计(也叫UI产品设计的外延),包括:软件的安装导航界面、产品的演示宣传动画、一些附带的桌面壁纸或者屏幕保护、代表软件的卡通小精灵、有时还会被要求设计软件的logo和广告banner等等。技术建模时期的关键是“风格和界面设计”。

三.分模块开发时期:

这个时期软件开发过程进入实现阶段,也是需要人力最多的时期,这样就会分散UI设计师的精力。软件会被切分为若干个小的模块进行代码编写,最后整合成一个完整的软件产品。对于一个程序员来讲他们大多根本不会考虑到产品应该是什么样子应该有什么整体风格,他们所考虑的只是如何用代码实现设计的要求,而且在现在的软件企业多都实现了模块的复用,这样会大大节约人力成本,那么程序员只是对原有模板进行修改使之适应新的软件产品,这样就会对UI设计的最终贯彻和实现带来很大的麻烦。做出的每一个模块虽然已经能够使用但是都是“各自为政”没有统一,因此我们也需要主动的协助和监督程序员完整的实现UI设计的要求,如果有技术无法实现的问题需要及时沟通改正设计方案。有的时候有些模块需要有单独的风格,比如一些已有的软件产品需要集合到某一个新的产品中去,这样就会加大了设计师的设计难度,我们必须要在保证产品整体风格不变的情况下将原有产品的设计风格集合进去,使之更加适合新的产品表现形式。如果我们仍旧保持原有产品的风格那么当各个模块集合起来之后往往会使新的产品感觉很松散,进入每一个功能都会觉得是另外一个软件,使人对软件的印象不深刻。在这个阶段我们还是要主动一些,跟进各个模块界面的实现。现在很多软件企业都存在很多UI设计师和程序员的协作问题,不是程序员做不到UI设计的要求,就是UI设计师坚持一些自己的想法不能改动,还有的时候经常会有人过来没头没尾的说帮我做点东西吧!当软件集成到一起再一看,就是很多不同风格的东西堆砌到一起,从头到尾都不舒服,领导或者客户看了以后极度不满狂批一阵,最后得出结果UI设计做的不到位。有人说UI设计师就要背着软件不成功的黑锅,因为人们根本看不见代码怎么写的,功能是怎么实现的,他们只知道对软件的样子和使用进行评论。让一个用户评论一个软件他们只会说这个软件好用看上去也不错挺漂亮的,但是做为一个普通用户决不会有人说这个软件程序写的不错。这么一看我们会联想到现在软件开发之中主要的冲突在UI设计师和程序员之间,其实这只是表面的表现形式。实质上这个现象体现了现在软件企业的一个通病就是这个开发组之间的协作关系混乱,程序员和UI设计师之间是平级协作关系,程序员是不会对产品负责的,这样看来UI设计师只应该听项目经理的,无论对设计做什么样的改动或者增添什么样的东西,都应该由开发项目经理和产品经理协商之后决定,只有他们可以对最终的产品负责。这样也可以避免很多程序员和UI设计师之间的争执和矛盾。但是现在大多说软件企业的产品经理和开发项目经理没有做到这一点,他们也根本不了解UI设计师和程序员的工作,也无法把握他们的工作量,这样无序的管理会造成很麻烦的后果。其实可以建立一些合理的流程管理制度,就算企业没有作为UI设计师也可以自己起草一份适合自己和企业的“UI设计需求申请单”,里边应该列出我们需要的“输入”内容、工作时间、最终的“输出”结果等等栏目(可以自己根据要求灵活决定)。这样形成一个有参与人、有依据、有存底的工作流程,出现问题或者争执的时候我们有据可依,这只是一个习惯性的东西因不同的企业而议不一定都要建立需求单。在分模块开发时期UI设计师应该做的是,在模块开发的前期做出产品每个模块的效果demo(可以用图片的形式表现)要求程序员按照demo的样式进行模块开发,协助和监督程序员严格按照UI设计要求生成最终产品,把握各个模块的统一,经常了解程序员的工作进展及时对不合理或者难以实现的设计进行讨论设计出新的方案。分模块开发时期的关键是“协助和监督程序员生成最终产品”。

四.测试时期的输入和输出:

软件产品的测试会分为三个测试阶段,第一个是分模块开发完成之后每一个模块进行的单元测试;第二个是将各个单元集成为一个整体的产品进行集成测试;第三个就是整个产品在交付使用前进行的整体测试。在测试过程中UI设计师的任务相对会轻松一些,我们只需要跟着测试人员走几遍流程,如果在其中发现没有按照UI设计要求的部分及时要求改正就好了。我们还会经常遇到客户在测试过程中突然觉得那里不合适需要修改,这也是最最头疼的事情了,有的时候他们说的并不一定对,只要我们设计的每一个步骤都有一定的道理能够说服他们就一切ok了。如果他们执意要修改设计方案,那么我们没办法只能按照客户需求修改。但是如果前边按照本文的流程走下来我想这样的可能性不大就算是修改也不会是大动干戈。在修改过程中我们还是需要先做出效果图,让客户确定再具体实施,这样也会避免很多麻烦的。测试时期的关键是“检查整个产品发现问题及时改正”。

如今软件的越来越多的考虑到人的因素,“以人为本”的设计理念贯穿了整个软件产品开发的始终,因此软件产品的UI设计过程最重要的两个部分就是行为和构造,也就是交互设计和界面设计。上面我们按照软件开发的四个阶段,逐个的分析了每个时期UI设计的任务。由此我们可以看出UI设计并不完全是一个美术设计的过程,还有很重要的一个部分就是交互性和易用性的设计。我们要时刻把自己放在软件的用户角度来考虑,设计出最简单易用,界面友好的软件产品。