第一篇:企业网络营销浅谈之UI交互设计流程
UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。那么,企业网络营销浅谈之UI交互设计流程具体有哪些?
一、确定目标人群,即这个应用是做给谁用的。比如年轻人、老年人、商业用户、等等。针对每种不同的人交互设计重点不同。比如年轻的潮人,可能更在乎视觉效果的绚丽,而老年人则更喜欢简单明了指导性明确的东西。比如发信息,年轻人可能很容易理解一个“信封”的icon就是发信息的意思,那么岁数大点的人可能更喜欢button上写上“发信息”三个字,那样更容易理解。
二、调研目标人群的交互习惯,包括这类人群喜欢文字或是图片;喜欢减少操作步骤或是无所谓;喜欢简单明了的操作方式或是另类的操作方式等等。
三、确定目标人群的交互习惯后就要建立交互模型,其中包括操作方式统一(同类型功能的操作方式一样)、交互行为统一(同一类型的操作,得到的反馈是一样的),控件风格统一(tab页要么在上要么在下,toolbar要有就都有,要没有就都没有)等等。
四、对应用的功能进行分类,同时对相应的操作进行提炼。哪些放在面上,哪些放在么Menu里,这条GUI设计师必须要参与。个人认为GUI对逻辑架构的敏感性在某些层面上讲要超过UI设计师。
五、最后由GUI设计师按照交互细节来设计视觉效果,同时检查视觉设计和交互设计之间的冲突。比如UI设计师在列表中设计了3个button,但是在GUI设计师设计时发现使用24sp的字号时是放不下3个button的时候,就要反馈给UI设计师,从新进行规划。
第二篇:UI设计流程
UI设计流程
阶段一:分析
1用户需求分析 2用户交互场景分析 3竞争产品分析
这两者可以说是相辅相成的。对于一个较为正规的项目而言,必然有对用户需求的分析内容。Tanjurd瑭锦资深UI设计师表示其中用户UI需求是重要的组成部分。如果说UI设计原则是所有UI设计的出发点的话,那么用户UI需求就是本次设计的出发是好的UI设计建立在对用户深刻了解之上。因此用户交互场景分析就很重要。对于大部分项目组来说也许没有时间和精力去实际勘查用户的现有交互、制作完善的交互模型考察,但是UI设计人员在分析的时候一定要站在用户角度思考:如果我是用户,这里我会需要什么。竞争产品能够上市并且被UI设计者知道,必然有其长处。这就是所谓三人行必有我师的意思。每个设计者的思维都有局限性,看到别人的设计会有触类旁通的好处。当然有的时候可以参考的并不一定是竞争产品。
阶段二 设计需求:(叶面设计前需提给UI页面组)
1.系统设计需求文档。2.系统结构文档(例如栏目划分,目录结构,导航方式等)。3.较复杂页面表现形式草图(手绘或相关软件绘制)。4.较复杂业务流程文档。5.如有可能提供参考和示例站点。6.与程序员沟通部分页面实现方法。
段三:页面制作:
1.经过确认的美术设计的方案图7.系统设计需求文档等,较复杂务流程文档。2.所需页面脚本需求,与程序员沟通部分页面实现方法。3提交给程序
用户交互case图(说明用户和系统之间的联系)用户交互流程图(说明交互和事件之间的联系)交互功能设计图(说明功能和交互的对应关系)最终得到UI的设计产品。
阶段四:验证
界面测试:(页面组提交给测试组包括:1.经确认的设计方案图。2.静态模板页面。以上二项均为便于查看嵌入程序后的叶面情况。3.常出现的界面错误:图片错误,页面不美观,布局不合理,与原先设计不符,文字 错误HTML代码错误,页面程序错误。4.界面bug测试报告:
正如Tanjurd瑭锦国际UI交互设计原则文中提到的,对于UI产品的验证主要从下面几个方面入手:
1、功能性对照UI设计的再好,和需求不一致也不可以。
2、实用性内部测试UI设计的最重要点就是实用性。
3、用户焦点小组UI设计是否优秀的重要衡量依据。最后,瑭锦Tanjurd说一点其他的问题。现在往往认为交互式设计和最终的UI效果设计可以截然分开。这就好比说需求可以和设计截然分开,是不可能的。
总结:
1.产品定位与市场分析这一类工作大多都是由新产品研发部门以及市场需求完成的,但UI设计师应了解产品的市场定位、产品定义、客户群体、运营方式等。
2.用户研究与分析这个过程是非常重要的,设计师应该找到合适的方法来完成此环节。你可以搜集相关资料分析目标用户的使用特征、情感、习惯、心里、需求等,提出用户研究报告和可用性设计建议。这部分工作也可和团队配合完成。时间与项目需求允许的情况下,更可以制定实景用户分析。
3.架构设计这里涉及到比较多的界面交互与流程的设计,根据可用性分析结果制定交互方式、操作与跳转流程、结构、布局、信息和其他元素。
4.原型设计我觉得这里应该是一个小的阶段标志,要对前面所有工作加以设计方面的实施,根据进度与成本,可以把原型控制在“手绘-图形-FLASH-视频”几个质量范围。原型的本质更倾向与一个DEMO,它不需要有全部的功能,但要体现出设计对象的基本特性。
5.界面设计如果很倾向于图形界面设计,这儿是你最喜欢的部分。但一定要结合循环讨论过的分析结果做设计,否则你的作品很难被人信服。色调、风格、界面、窗口、图标、皮肤的表现是本环节的关键。
6.界面输出作为设计师,在这一部分的工作就是配合好开发人员完成相关的界面结合。7.完善工作这个环节是很多部门共同参与的,包括可用性的循环研究、用户体验回馈、测试回馈。同时,UI人员也应该把一些可行性建议进行完善。Tanjurd瑭锦表示很多设计师做了东西不喜欢改,这是一个大忌。
如上的流程,可能会有很多部门共同参与完成,UI设计师如何与团队配合并发挥自己应有的作用非常重要。一名合格的UI设计师,应该能贯穿整个UI流程进行工作,而并非是单纯的图形界面设计。
第三篇:UI设计流程
UI设计流程
分析、设计、配合、验证
确认目标用户
在软件设计过程中,需求设计角色会确定软件的目标用户,获取最终用户和直接用户的需求。
用户交互要考虑到目标用户的不同引起的交互设计重点的不同。
例如:对于科学用户和对于电脑入门用户的设计重点就不同。
采集目标用户的习惯交互方式
不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。
当然还要在此基础上通过调研分析找到用户希望达到的交互效果,并且以流程确认下来。
提示和引导用户
软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。
对于用户交互的结果和反馈,提示用户结果和反馈信息,引导用户进行用户需要的下一步操作。
一致性原则
设计目标一致
软件中往往存在多个组成部分(组件、元素)。不同组成部分之间的交互设计目标需要一致。
例如:如果以电脑操作初级用户作为目标用户,以简化界面逻辑为设计目标,那么该目标需要贯彻软件(软件包)整体,而不是局部。
元素外观一致
交互元素的外观往往影响用户的交互效果。同一个(类)软件采用一致风格的外观,对于保持用户焦点,改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡量方法。因此需要对目标用户进行调查取得反馈。
交互行为一致
在交互模型中,不同类型的元素用户触发其对应的行为事件后,其交互行为需要一致。
例如:所有需要用户确认操作的对话框都至少包含确认和放弃两个按钮。
对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。但是我们可以看到这个理念虽然在大部分情况下正确,但是的确有相反的例子证明不按照这个理念设计,会更加简化用户操作流程。
可用性原则
可理解
软件要为用户使用,用户必须可以理解软件各元素对应的功能。
如果不能为用户理解,那么需要提供一种非破坏性的途径,使得用户可以通过对该元素的操作,理解其对应的功能。
例如:删除操作元素。用户可以点击删除操作按钮,提示用户如何删除操作或者是否确认删除操作,用户可以更加详细的理解该元素对应的功能,同时可以取消该操作。
可达到
用户是交互的中心,交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。
用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。
要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏(一般来说超过4层)那么用户达到该元素的几率就大大降低了。
可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。(参考简单导向原则)
可控制
软件的交互流程,用户可以控制。
功能的执行流程,用户可以控制。
如果确实无法提供控制,则用能为目标用户理解的方式提示用户
1、分析阶段
需求分析、用户场景模拟、竞品分析(聆听用户心声)。
需求分析:对于一个产品来说,必然有对用户需求的分析内容,更多的是从MRD与PRD获得,或者从产品需求评审会议上得到需求分析的内容,当然可以直接与产品经理交流获得相关产品需求。如果说设计原则是所有设计的出发点的话,那么用户需求就是本次设计的出发点。用户场景模拟:好的设计建立在对用户深刻了解之上。因此用户使用场景分析就很重要,了解产品的现有交互以及用户使用产品习惯等,但是设计人员在分析的时候一定要站在用户角度思考:如果我是用户,这里我会需要什么。
竞品分析(聆听用户心声):竞争产品能够上市并且被UI设计者知道,必然有其长处。这就是所谓三人行必有我师的意思。每个设计者的思维都有局限性,看到别人的设计会有触类旁通的好处。当市场上存在竞品时,去听听用户的评论,哪怕是骂声都好,别沉迷于自己的设计中,让真正的用户说话。
输入物:MRD、PRD、市场需求文档、市场调查报告、竞品分析文档(或其一或全部)
输出物:设计初稿(或许只是几个简单的界面)
2、设计阶段
设计方法采用面向场景、面向事件驱动和面向对象的设计方法。面向场景是针对该产品使用场所等模拟,模拟用户在多种情况下产品使用的模拟。面向事件驱动则是对产品响应与触发事件的设计,一个提示框,一个提交按钮……这类都是对事件驱动的设计。面向对象,产品面向的用户不同对于产品的设计要求不同,不同年龄层的用户对于产品的要求不同,产品的用户定位将对UI设计师影响因素。输入物:交互文档(高保真原型)输出物:设计终稿(所有的设计稿)
3、配合
UI设计师交出产品设计图时,更多的配合开发人员、测试人员进行截图配合。配合开发人员对于PSD格式的图片切图操作,对于不同的开发人员的要求,切图方式也有不同,UI设计师需配合相关的开发人员进行最适合的切图配合。输入物:设计终稿
输出物:设计修改稿(设计稿切片)
4、验证
产品出来后,UI设计师需对产品的效果进行验证,与当初设计产品时的想法是否一致,是否可用,用户是否接受,以及与需求是否一致。都需要UI设计师验证,UI设计师是将产品需求用图片展现给用户最直接的经手人,对于产品的理解会更加深刻。输入物:产品
输出物:产品(面向用户最终版本)
产品UI设计中夹杂着许多设计原则要求,统一公司UI设计流程,使UI设计师参与到产品设计整个环节中来,对产品的易用性进行全流程负责,使UI设计的流程规范化,保证UI设计流程的可操作性。UI设计师应该分析公司产品的特点,制定符合产品生命周期的UI设计流程。每个产品的生命周期中,UI设计师应该严格按照流程,完成每个环节的职责,确保流程准确有效的得到执行,从而提高产品的可用性,提升产品质量。GUI设计详细流程定义:
1.项目开始GUI设计时间点之前,明确客户的GUI需求,了解机器外形硬件和软件的特性。
2.概念设计【提供GUI设计方案几套,参考产品组人员和领导层的建议,但最多3套,精心设计各套方案;项目组和产品组共同进行方案评审会,决策方案;并且需要项目组提供真机,展开界面的真机效果和环境测评,优化界面颜色、亮度等细节)】; 3.详细设计【需要明确界面研发的细节;建议项目提出强烈建议优化的几项产品设计点(用户调查)】;对界面有变化的界面进行统计,整理出文档提交给UI层面技术工程师,做好相关的界面准备工作。4.原型设计时间【目前国内研发软件的现状通常此环节被忽略,但时间充足,建议按计划进行】 5.与UI层面的技术工程师共同展开界面实现(界面实现和界面优化的时间点控制在项目时间的百分之几点,需要明确)
6.界面工程师制作好Demo,提交给项目负责人、决策人和UI用户界面测试工程师(需要指定负责人),展开用户体验反馈建议汇总,提出用户界面体验的反馈意见表(需要项目负责人支持)。
7.测试评估,尽早发现存在的交互设计和视觉设计的不足之处,进行软件界面的改善设计。
UI设计流程以及设计师参与的环节
最近的工作中总结出一条结论:拥有一个完善规范的流程,是决定着一个项目走向成功或失败的关键。
对于UI设计的工作流程,我觉得可以根据“市场分析-用户分析-架构-原型-界面-输出-完善”这条主线制定,每个环节UI设计师都应参与其中。
1.产品定位与市场分析
这一类工作大多都是由新产品研发部门以及市场需求完成的,但UI设计师应了解产品的市场定位、产品定义、客户群体、运营方式等。
2.用户研究与分析
这个过程是非常重要的,设计师应该找到合适的方法来完成此环节。你可以搜集相关资料分析目标用户的使用特征、情感、习惯、心里、需求等,提出用户研究报告和可用性设计建议。这部分工作也可和团队配合完成。时间与项目需求允许的情况下,更可以制定实景用户分析。
3.架构设计
这里涉及到比较多的界面交互与流程的设计,根据可用性分析结果制定交互方式、操作与跳转流程、结构、布局、信息和其他元素。
4.原型设计
我觉得这里应该是一个小的阶段标志,要对前面所有工作加以设计方面的实施,根据进度与成本,可以把原型控制在“手绘-图形-FLASH-视频”几个质量范围。原型的本质更倾向与一个DEMO,它不需要有全部的功能,但要体现出设计对象的基本特性。
5.界面设计
如果很倾向于图形界面设计,这儿是你最喜欢的部分。但一定要结合循环讨论过的分析结果做设计,否则你的作品很难被人信服。色调、风格、界面、窗口、图标、皮肤的表现是本环节的关键。
6.界面输出
作为设计师,在这一部分的工作就是配合好开发人员完成相关的界面结合。
7.完善工作
这个环节是很多部门共同参与的,包括可用性的循环研究、用户体验回馈、测试回馈。同时,UI人员也应该把一些可行性建议进行完善。很多设计师做了东西不喜欢改,这是一个大忌。
如上的流程,可能会有很多部门共同参与完成,UI设计师如何与团队配合并发挥自己应有的作用非常重要。一名合格的UI设计师,应该能贯穿整个UI流程进行工作,而并非是单纯的图形界面设计。
确认目标用户
在软件设计过程中,需求设计角色会确定软件的目标用户,获取最终用户和直接用户的需求。
用户交互要考虑到目标用户的不同引起的交互设计重点的不同。
例如:对于科学用户和对于电脑入门用户的设计重点就不同。采集目标用户的习惯交互方式
不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。
当然还要在此基础上通过调研分析找到用户希望达到的交互效果,并且以流程确认下来。
提示和引导用户
软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。
对于用户交互的结果和反馈,提示用户结果和反馈信息,引导用户进行用户需要的下一步操作。一致性原则
设计目标一致
软件中往往存在多个组成部分(组件、元素)。不同组成部分之间的交互设计目标需要一致。
例如:如果以电脑操作初级用户作为目标用户,以简化界面逻辑为设计目标,那么该目标需要贯彻软件(软件包)整体,而不是局部。
元素外观一致
交互元素的外观往往影响用户的交互效果。同一个(类)软件采用一致风格的外观,对于保持用户焦点,改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡量方法。因此需要对目标用户进行调查取得反馈。
交互行为一致
在交互模型中,不同类型的元素用户触发其对应的行为事件后,其交互行为需要一致。
例如:所有需要用户确认操作的对话框都至少包含确认和放弃两个按钮。
对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。但是我们可以看到这个理念虽然在大部分情况下正确,但是的确有相反的例子证明不按照这个理念设计,会更加简化用户操作流程。可用性原则
可理解
软件要为用户使用,用户必须可以理解软件各元素对应的功能。
如果不能为用户理解,那么需要提供一种非破坏性的途径,使得用户可以通过对该元素的操作,理解其对应的功能。
例如:删除操作元素。用户可以点击删除操作按钮,提示用户如何删除操作或者是否确认删除操作,用户可以更加详细的理解该元素对应的功能,同时可以取消该操作。
可达到
用户是交互的中心,交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。
用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。
要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏(一般来说超过4层)那么用户达到该元素的几率就大大降低了。
可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。(参考简单导向原则)可控制
软件的交互流程,用户可以控制。
功能的执行流程,用户可以控制。
如果确实无法提供控制,则用能为目标用户理解的方式提示用户。
上面的文章提到了UI设计的原则,并且对此做出了一些所谓的定义。大家要明白,本人对UI设计的研究时间不长,这些原则只是个人体会。
因此就有人提出问题:有了原则固然好,那么如何付诸实施呢?个人理解达到目标是需要方法的,因此在UI设计原则里面东西拷贝了一些方法和模式。而能够让方法持续实施,达到目标就需要流程-或者说过程来保证。
所以这里就对流程进行一下总结和探讨。以付茶资吧!
我们把UI设计的流程分为一个出发点,4个阶段。
[出发点]
1、了解UI设计的原则。
没有原则,就丧失了设计的立足点。
2、了解UI交互模式
正如同编程不了解模式就会事半功倍一样,UI设计不了解模式就会对设计原则的实施造成困惑。
3、了解UI交互元素及其功能
如果对于UI的基本交互元素和功能都不了解,如何设计UI呢? [阶段一:分析]
1、用户需求分析
2、用户交互场景分析
3、竞争产品分析
这两者可以说是相辅相成的。对于一个较为正规的项目而言,必然有对用户需求的分析内容。其中用户UI需求是重要的组成部分。如果说UI设计原则是所有UI设计的出发点的话,那么用户UI需求就是本次设计的出发点。
好的UI设计建立在对用户深刻了解之上。因此用户交互场景分析就很重要。对于大部分项目组来说也许没有时间和精力去实际勘查用户的现有交互、制作完善的交互模型考察,但是UI设计人员在分析的时候一定要站在用户角度思考:如果我是用户,这里我会需要什么。
竞争产品能够上市并且被UI设计者知道,必然有其长处。这就是所谓三人行必有我师的意思。每个设计者的思维都有局限性,看到别人的设计会有触类旁通的好处。
当然有的时候可以参考的并不一定是竞争产品。[阶段二:设计]
采用面向场景、面向事件驱动和面向对象的设计方法。
UI设计着重于交互,因此必然要对最终用户的交互场景进行设计。
软件是交互产品,用户所作的就是对软件事件的响应以及触发软件内置的事件。因此要面向事件设计。
现在的程序开发主流采用的是面向对象设计。面向对象设计可以有效的体现面向场景和面向事件的特点。
设计的四个要素: 交互对象 数据对象
事件(交互事件和异常)动作
[阶段三:开发] 通过:
用户交互case图(说明用户和系统之间的联系)用户交互流程图(说明交互和事件之间的联系)交互功能设计图(说明功能和交互的对应关系)最终得到UI的设计产品。[阶段四:验证]
正如UI交互设计原则探讨文中提到的,对于UI产品的验证主要从下面几个方面入手:
1、功能性对照
UI设计的再好,和需求不一致也不可以。
2、实用性内部测试
UI设计的最重要点就是实用性。
3、用户焦点小组
UI设计是否优秀的重要衡量依据。
第四篇:UI设计工作流程
UI界面设计流程
UI的本意是user interface也就是用户与界面的关系。他包括交互设计,用户研究,与界面设计 三个部分。本文主要讲述用户研究与界面设计的过程。
一个通用消费类软件界面的设计大体可分为五个步骤:
需求阶段
分析设计阶段
调研验证阶段
方案改进阶段
用户验证反馈阶段
需求阶段
软件产品依然属于工业产品的范畴。依然离不开3W的考虑(Who,where,why.)也就是使用者,使用环境,使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄,性别,爱好,收入,教育程度等)。什么地方用(在办公室/家庭/厂房车间/公共场所)。如何用(鼠标键盘/遥控器/触摸屏)。上面的任何一个元素改变结果都会有相应的改变。
除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世,我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适,更合适于我们的最终用户的就是最好的。如何判定最合适于用户呢,后面我会介绍用户调研。
分析设计阶段
通过分析上面的需求,我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界面用于被选。首先我们应该制作一个体现用户定位的词语坐标。例如我们为25岁左右的白领男性制作家居娱乐软件。对于这类用户我们分析得到的词汇有:品质,精美,高档,高雅,男性,时尚,cool,,个性,亲和,放松等。分析这些词汇的时候我们会发现有些词是绝对必须体现的,例如:品质,精美,高档,时尚。但有些词是相互矛盾的,必须放弃一些,例如:亲和,放松与 cool,个性与等。所以我们画出一个坐标,上面是我们必须用的品质,精美,高档,时尚。左边是贴近用户心理的词汇:亲和,放松,人性化。右边是体现用户外在形象的词汇:cool,个性,工业化。然后我们开始搜集相呼应的图片,放在坐标的不同点上。这样根据不同作标点的风格,我们设计出数套不同风格的界面。
调研验证阶段
几套风格必须保证在同等的设计制作水平上,不能明显看出差异,这样才能得到用户客观的反馈。测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。
例如:
数据收集方式:厅堂测试/模拟家居/办公室。
测试时间:X年X月X日X日。
测试区域:北京、广州、天津。
测试对象。某消费软件界定市场用户。主要特征为:
对电脑的硬件配置以及相关的性能指标比较了解,电脑应用水平较高;
电脑使用经历一年以上;
家庭购买电脑时品牌和机型的主要决策者
年龄:X-X岁;
年龄在X岁以上的被访者文化程度为大专及以上;
个人月收入X以上或家庭月收入X元及以上;
样品
五套软件界面
样本量:X个,实际完成X个。
调研阶段需要从以下几个问题出发:
用户对各套方案的第一印象
用户对各套方案的综合印象
用户对各套方案的单独评价
选出最喜欢的选出其次喜欢的对各方案的色彩,文字,图形等分别打分。
结论出来以后请所有用户说出最受欢迎方案的优缺点。
所有这些都需要用图形表达出来,直观科学。
方案改进阶段
经过用户调研,我们得到目标用户最喜欢的方案。而且了解到用户为什么喜欢,还有什么遗憾等,这样我们就可以进行下一步修改了。这时候我们可以把精力投入到一个方案上(这里指不能换皮肤的应用软件或游戏的界面)将方案做到细致精美。
用户验证阶段
改正以后的方案,我们可以将他推向市场。但是设计并没有结束。我们还需要用户反馈,好的设计师应该在产品上市以后去站柜台。零距离接触最终用户,看看用户真正使用时的感想。为以后的升级版本积累经验资料。
经过上面设计过程的描述,大家可以清楚的发现,界面UI设计是一个非常科学的推导公式,他有设计师对艺术的理解感悟,但绝对不是仅仅表现设计师个人的绘画。所以我们一再强调这个工作过程是设计过程。UI界面设计不存在美工。
五、UI设计的一般工作流程
(取自某UI设计服务公司)
1)熟悉行业(熟悉您的软件所涉及的行业,以便制作出适合行业特征的界面风格)
2)了解软件(了解您软件的工程进度,做出针对您进度的工作计划)。
3)与软件开发工程师和市场人员讨论界面风格(广泛听取研发和市场人员的意见,做出 最适合市场的软件)。
4)人机分析(对您的软件进行人机分析,增强您软件的易用性)。
5)做方案(做出设计方案,并明确细节思想)。
6)审定方案(与技术和市场人员一起审定方案,并听取修改意见)。
7)修改——审定(将有几次重复)
8)细化、制作界面(开始制作软件界面)。
9)与软件开发工程师合作把界面加入到程序中。
10)细部修改,完成。
11)进行软件包装盒、光盘盘面、盘套等的设计工作。
12)后期跟踪服务(在完成项目后,对您的软件进行跟踪服务,即对您软件从发布到推出新版本之间的小规模修改进行调整,包括对帮
软件界面设计要素
界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化优化规范化的设计分支。具体包括软件启动封面设计,软件框架设计,按钮设计,面板设计,菜单设计,标签设计,图标设计,滚动条及状态栏设计,安装过程设计,包装及商品化。
在设计的过程中有较多注意的关键问题,以下列出几点:
(1)软件启动封面设计
应使软件启动封面最终为高清晰度的图像,如软件启动封面需在不同的平台、操作系统上使用将考虑转换不同的格式,并且对选用的色彩不宜超过256色,最好为216色安全色。软件启动封面大小多为主流显示器分辨率的1/6大。如果是系列软件将考虑整体设计的统一和延续性。在上面应该醒目的标注制作或支持的公司标志、产品商标,软件名称,版本号,网址,版权声明,序列号等信息,以树立软件形象,方便使用者或购买者在软件启动的时候得到提示。插图宜使用具有独立版权的,象征性强的,识别性高的,视觉传达效果好的图形,若使用摄影也应该进行数位处理,以形成该软件的个性化特征。
(2)软件框架设计
软件的框架设计就复杂得多,因为涉及软件的使用功能,应该对该软件产品的程序和使用比较了解,这就需要设计师有一定的软件跟进经验,能够快速的学习软件产品,并且在和软件产品的程序开发员及程序使用对象进行共同沟通,以设计出友好的,独特的,符合程序开发原则的软件框架。软件框架设计应该简洁明快,尽量少用无谓的装饰,应该考虑节省屏幕空间,各种分辨率的大小,缩放时的状态和原则,并且为将来设计的按钮,菜单,标签,滚动条及状态栏预留位置。设计中将整体色彩组合进行合理搭配,将软件商标放在显著位置,主菜单应放在左边或上边,滚动条放在右边,状态栏放在下边,以符合视觉流程和用户使用心理。
(3)软件按钮设计
软件按钮设计应该具有交互性,即应该有3到6种状态效果:点击时状态;鼠标放在上面但未点击的状态;点击前鼠标未放在上面时的状态;点击后鼠标未放在上面时的状态;不能点击时状态;独立自动变化的状态。按钮应具备简洁的图示效果,应能够让使用者产生功能关联反应,群组内按钮应该风格统一,功能差异大的按钮应该有所区别。
(4)软件面板设计
软件面板设计应该具有缩放功能,面板应该对功能区间划分清晰,应该和对话框,弹出框等风格匹配,尽量节省空间,切换方便。
(5)菜单设计
菜单设计一般有选中状态和未选中状态,左边应为名称,右边应为快捷键,如果有下级菜单应该有下级箭头符号,不同功能区间应该用线条分割。
(6)标签设计
标签设计应该注意转角部分的变化,状态可参考按钮。
(7)图标设计
图标设计色彩不宜超过64色,大小为16x16、32x32两种,图标设计是方寸艺术,应该加以着重考虑视
觉冲击力,它需要在很小的范围表现出软件的内涵,所以很多图标设计师在设计图标时使用简单的颜色,利用眼睛对色彩和网点的空间混合效果,做出了许多精彩图标。
(8)滚动条及状态栏设计
滚动条主要是为了对区域性空间的固定大小中内容量的变换进行设计,应该有上下箭头,滚动标等,有些还有翻页标。状态栏是为了对软件当前状态的显示和提示。
(9)安装过程设计
安装过程设计主要是将软件安装的过程进行美化,包括对软件功能进行图示化。
(10)包装及商品化
最后软件产品的包装应该考虑保护好软件产品,功能的宣传融合于美观中,可以印刷部分产品介绍,产品界面设计
第五篇:浅谈UI设计之企业工作管理系统
近几年来UI设计已经不再陌生,它无处不在的存在人们的生活中,远点有银行的ATM机,地铁的自动售票机,小区物业的自动交费机,贴身的就有智能手机,电脑里的Word及Excel文档等等,它们的用户界面及操作平台都是UI设计师通过对软件的人机交互、操作逻辑、界面美观做出的最合理判断而设计出来的,不仅是让界面变得有个性有品味,还要让用户的操作使用变得舒适、简单、自由。
在这里通过近年来对“企业工作管理系统”的充分接触与深刻理解,总结一下个人在UI设计方面的一些心得和领悟,也希望对刚刚踏入该行业的新人们有所启发与帮助,如有与各位思想冲突的地方望谅解,仅代表个人的思想与设计风格。
一个好的工作管理系统软件,除了要拥有突出的编码设计,更需要拥有美观的、人性化的用户操作界面。UI设计除了要从用户与界面2个方面考虑外,更多的是要专注于研究用户与界面之间的交互关系,当然再怎么炫酷或者平凡的工作界面,都不能忘记站在功能角度考虑:美观的背后占据了多么庞大的数据读取时间……在使用者看来,工作管理系统的效率位居第一,其次是操作方便,最后才是美观。也正因为此,UI设计在软件开发过程中一直没有被重视起来,如果工作管理系统相当于一辆高档跑车,系统的程序相当于跑车的发动机,那么界面就相当于跑车的外观,两者在市场上占据同等重要的位置。一个好的界面是将效率、操作方便及美观合为一体,在给人带来舒适的视觉享受的同时,也带来简单方便的操作功能及流畅高效的工作环境,企业工作管理系统的界面风格也迎来了定制时代,符合企业文化,吸纳时下潮流,之前的美工也被美其名曰UI设计师。
以下图1至图3是比较传统的企业工作管理系统的界面风格,横平竖直,一般的编程工程师就可以实现的界面美化效果,保证了可用性原则。
图1
图2
图3 基本上类似以上3种的界面风格可以适用于所有的企业,即使每个企业的需求不同及特殊性,也只是在功能上作了加减法,界面设计还是一成不变。由于企业品牌化的不断提升,后期应运而生的“界面定制时代”来临,企业可以根据需求更改界面风格,简单说就是替换image文件夹里的每个图形及图标,满足界面的颜色及图标得到更新,以适应不同的企业需求。
图4 图4是根据企业需求设计的工作管理系统界面,UI设计师们提出的自定义功能在和编成工程师一轮又一轮的唇枪舌战下不得不妥协,毕竟这个看起来像QQ空间的方案不适用于企业工作管理平台,企业的高层远远踏不进80后的门槛,试想他有时间有兴趣自定义他经常操作的相关功能吗?它出现的最大问题就是结构:工作管理系统的桌面无法将公告、新闻、内部邮件一次性展现给用户,增加了用户点击菜单的频率,最终夭折告终。
图5 相比较图4而言,图5框架布局的设计更加全面性,是最可取之处,桌面尽可能的展示必须的功能,精简繁琐的点击次数,增强了一步直达目的地,大大提高了工作效率。但在色彩上过于浓重,长时间工作会视觉疲劳;灰色渐变背景的使用,即使是1px的拼贴,也很大程度上增加了数据读取时间,企业成千上百的用户,再加上多种分辨率,直接影响了使用效率,还是会被Fail掉。
企业工作管理系统界面的最大需求就是:框架内容一目了然,用户明确自己要去的地方;长时间使用下不会感觉视觉疲劳;操作时速度一定要快。能做到以上几点基本上可以算是一个成功的界面,再深入下去就是如何美化界面,一定要掌握以下几点:
1.明确企业的功能需求
在UI设计开始前深刻了解软件要实现的所有功能及细节,所有可能会出现的界面。整合需求及界面,为你后期的工作量可以减轻不少的负担,比如通讯录及邮件里用户的选择都可以使同一风格或者界面,极大程度上减少的设计时间。
2.目标用户的习惯交互方式
只有掌握的目标用户的习惯交互方式,那么你的框架设计将实现一半,除非你新的设计更合理,千万别轻易改变目标用户的习性,否则你会死得很惨。比如企业之前的通讯录位置在界面的左侧,方便随时搜索查询要联系的同事的电话信息,如果你把位置移到右侧、顶部或者底部,不合逻辑的同时也强加于难度和不认知度各用户,合理情况下,左侧是重要信息及常用功能区,右侧是工作区,几千年来的从左到右,从上到下定律也不要忽视了。
3.指示和引导用户
用户可以在无任何培训下可以自如的运用工作管理系统,就说明这个系统界面的指示和引导作用是成功的。在这里图标起到了最大的作用,不管是图标、按钮、还是文字都是有特别讲究的。
拿图标来说,一个图标除了指示和引导用户外的功能外,充其量就只是为了美化界面,它的统一性至关紧要。比如向左的图标图形是色块面的形式,向右就不能是线的形式;可点击是蓝色,不能点击为灰色,删除是红色;尺寸配比也都要一致,装饰性图标小,可操作性图标大一些;能快速、合理、明确的给用户传达初定的想法,以便用户很快认识到红色是删除,不能随意点击,灰色是不可点击,不用闹出把管理员叫来说“这个按钮怎么点不到下一页”的笑话,当然所以的用户都是聪明的精英不至于出此洋相。所以在图标能够足以表达出它想要展示的信息时,再加以文字的描述用户就更加明确要点击什么,再满足设计需求只想用图标来展示内容时,千万别忘了和jss技术人员说一声,你要鼠标经过该图标时出现小标签注解的功能,那么就大功告成了。
4.一致性原则
风格、色调、图标、按钮、文字以及每一条线都必须做到统一。如下图6和图7在一致性原则上就有着明显的对比。
图6
图7
1)风格:平面的、立体的,还是中规中矩的横平竖直,是大色块分割区域,点、线来丰富画面,还是光影水晶效果,在一开始设计之前就已经明确客户的需求及界面的主方向,当然不忘后期的技术难度以及数据的读取量。
2)色彩:界面最多不要超过4种颜色,一般配比为80%主色调为背景色或者界面风格色调,15%副色调用来主导界面风格或者辅助界面风格色彩,也可以是中性色黑、白、灰,视设计风格而定;4%界面装饰色或者功能需求色;1%跳色用来做提醒功能或者点缀界面功能,这些再着手设计每个界面之前一定要明确。
3)图标:保持风格的一致,第3项“指示和引导用户里”已经做了说明,在这就不再以解释。
4)文字:字体、大小以及颜色也是需要注重的部分。字体要特别注意,在用PS或者其他软件设计界面时,一般用宋体,当与web的字体比较时,你会发现web的宋体更加犀利,因为都是像素字体,而且web里的宋体已经不再是PS里的宋体,所以在PS里设计时,字体一定要用黑体,这样和Web里通用的总体外形才得以相似,也不至于让客户看了设计稿和web上线后的效果落差太大。
一般正文用12px大小字体,这是标准尺寸也是看起来比较舒服的大小,那么标签、菜单、导航等字体大小是根据设计需求而定,在企业工作平台一般均为12px,最大也不至于超过14px,当然有些老爷们喜欢大,那就给他16px,再大可以用你的专业镇压他无知。
文字颜色也是可以起到画龙点睛的作用,可以根据状态功能把文字用不同颜色来区分,比如用黑色表示确认、审核中用蓝色、已超时用红色提醒等,就不需要花大把时间在图标、图形上作文章,吃力不讨好还占用系统资源。文字颜色还可以用来区分菜单的级别、区分标题和内容,比如标题用蓝色,正文用黑色等。
5.可用性原则
在满足美观之前一定要保证工作平台的可用性原则,否则再华丽的外衣也只是皇帝的新装,一无是处。
最后补充,界面的尺寸和分布是必须首要考虑的问题。特别鄙视那些不负责任的说法:设计时只是觉着好看,就没有想得那么细,尺寸啊、对齐啊、间距啊之类再考虑……这句话就像建筑商说没想要盖14楼,我的地基是按照6楼的标准打的,实在可恶!工作管理系统的Web界面也一样,前期的尺寸、布局不精确,要怎么继续往下施工呢?
界面的尺寸
目前多以1280x1024的分辨率,据前几年的数据调查80%以上用户的分辨率为1024x768,近几年逐渐向更大的分辨率迈进,所以在考虑分辨率上一定要全面、详尽。有点题外话,和开放的Web页面比,企业工作管理平台在这一点上是十分好控制的,一个屏幕的宽度一定要减去下拉条占用的17px;高度一定要减去浏览器工具栏占用的高度,一般1024的剩857px的高度,768的剩628的高度,保险起见高度尽可能控制再少一点,当然我这只是基于工作管理系统不需要出现下拉条的情况下而拟定的,如图5。宽度是可以很好解决的,以100%满足不同屏幕宽度即可,但高度只能根据需求及合理性而定,如果你就是要把工作管理系统的页面设计到2-3屏高的内容,也不是不可以的,只要合理,如图4就会出现小部分下拉条。
界面的分布 工作管理系统的界面还涉及了内容的分布,哪些是要一直显示在界面的,哪些是肯以隐藏需要时打开的,哪些界面是需要展开或者新开窗口全频显示的,都是需要确定的。比如公告新闻置于左侧一直显示,还是应该分布于中区桌面页展示,点击进去后就隐藏呢?这些是否确定还是会有所变更会直接影响你的设计进度。