课程论文

艺术设计课程论文论文题目 网站中U I设计的开发过程 引 言网站UI设计的开发过程是经过系列严密的策划，结合市场和产品-网站本身而进行的一向活动。每个环节的工作都决定着产品今后能否有效实施，开发工作能否有效的进行。在开发过程中，不同环节都是为下一个阶段铺垫，直到最终产品的上线。在整个过中，UI设计的开发是决定网站成败的关键。关键词：市场定位、人机交互、文化理念、 网站个性、一个网站的UI设计是影响这个网站成败的主要因素之一。好的UI设计不仅是让网站变得有个性、有品味，还要让网站的操作变得舒适、简单、自由、充分体现网站的定位和特点，突出网站的文化理念。UI设计则运用了心理学、设计学、美学、社会文化学等一系列的学科知识交叉相溶而进行。对于网站UI设计是经过对产品精确的定位，针对市场分析，从而设计出符合产品本身和市场的UI。目前，随着信息化、数字化的快速到来，传统的媒介已经不能供应人们对信息的大量需求，取而代之的“互联网”进入人们的生活中，逐渐成为人们生活中的主流媒介。“互联网”庞大的信息将通过大大小小、形同各异的载体-网站呈现在人们眼中，而对于现上线的网站都是一个模版，十分混乱。对于这一问题，如何进行UI设计将是一个大的挑战。要使一个网站与其它网站有所不同，就必须设计出符合自己理念的UI，从而使网站能从视觉传达出的信息有属于自己的特点，具有很强的附着力。这样才能让消费者在潜意识中留下印象。从而提升产品的品牌形象。1、市场分析与产品的定位阶段1.1、市场分析 市场分析是对市场规模、位置、性质、特点、市场容量及吸引范围等调查资料所进行的经济分析。它是指通过市场调查和供求预测，根据项目产品的市场环境、竞争力和竞争者，分析、判断项目投产后所生产的产品在限定时间内是否有市场，以及采取怎样的营销战略来实现销售目标。通过对市场的分析了解客户群体，得出运行方式，最终确定客户群体。对分析后的数据统计和分析对出一个准确的市场定位。得出了一准确的市场定位后，UI设计师才能有一个准确的设计方向，才具有针对行的进行设计。有了明确的方向，才能在开发中设计出符合产品-网站的UI，使产品与其他的产品拉开差距，赋予产品有力的竞争力。11 市场分析的方法，一般可按统计分析法进行趋势和相关分析。 从估计市场销售潜力的角度讲，也可以根据已有的市场调查资料，采取直接资料法，必然结果法和复合因素法等进行市场分析。 对任何事物的认识是有一个从抽象到具体的过程，对市场进行系统分析时，市场是一个非常复杂的现象，对它的分析研究也必须遵循这一认识规律。市场分析在对市场这一对象进行研究时，首先对市场问题进行了概括的阐述继而又以基础理论、微观市场、宏观市场对市场进行了较为详尽的分析，最后又对市场的各种类型进行了具体的解剖，从而使人们对移个市场的状况和运行规律既有了概括的了解，又有了具体的认识。1.2、产品定位产品定位是在足够的市场调查和分析数据后得出的符合消费需求的结果。对用什么样的产品来满足目标消费者或目标消费市场的需求。对目标市场的选择与产品结合的过程，也即是将市场定位企业化、产品化的工作。同时，在这个过程中，赋予产品的文化和理念也在无形中产生，变得明确。UI设计师以产品的定位为基础，针对最终用户群即他们的特征进行分析和设计。 2、用户研究与分析阶段经过初步的市场定位和产品定位，明确了产品的方向，这个阶段将是UI设计师进行详细的更有针对性的研究和分析。在这个阶段作用，是为后面的工作做更系统的、更详细的分析。例如：用户特征、用户习惯、界面的作用、设计过程中需要什么技术、需要什么软件、开发的大体时间等都是在这个阶段做出报告。UI设计师将收集相关资料分析目标用户的使用特征、情感、习惯、心理、需求等，提出用户研究报告和可用性设计建议。用户研究也是人群细分化的研究，在目标人群中，每个人的生活方式、习惯、情感都是不同的，而对于UI设计而言就必须对用户进行研究和分析得出他们的共性。只有了解了用户的需求，才能使设计出的UI适合用户。对于技术的分析，也是UI设计者迫于考虑的问题。在一项开发的项目中，工作者会用到很多种技术和各种各样的软件来辅助设计工作（例如：后台的开源技术、编程技术、前台的各种软件等），而这决不是一个人能完成的工作，它需要一个团队共同进行、相互协助来完成，所以对技术的分析也是对有限资源的整合和分配，对资源的有效利用。对产品理念的提炼，使在设计过程中把这种理念注入到可视的UI中，而这个过程需要对产品有十分详细的分析和了解。 UI视觉设计具体分析的：logo、标准色、主色调及配色、排版布局、导航、按钮、表单、icon、布局模块、tab、列表前端代码相关包括 css样式规范和html代码结构规范，具体有：n 文字样式（链接、字符串、文本段落）n 框架样式n 模块样式（包括各类边距等细节、 写一个规范代码）n 链接样式n 图片样式n 标签样式n 表单样式 3、架构设计阶段在这个阶段，UI进行风格设计出界面，和需求部门拿出定稿；UE对原型进行优化，整理出交互及用户体验方面意见，反馈给UI及需求部门；UID等待效果图，开始代码编制。html代码结构规范的原则是：尽量少的代码量规范且规律的写法实现设计效果，标签使用上尽量保持页面元素其原本涵义（如该用h、p、table、hr等标签的地方用相应标签，不能用div用上瘾了），及照顾到seo的写法。UI主要职责：根据可以性分析结果制定交互方式、操作与跳转流程、结构、布局、信息和其他元素。界面设计、图标设计、风格设计。这时候UI是与产品及公司高层的详尽沟通下，尽可能的了解他们的愿望及暂时可用的质料对产品进行定位，比如是做行业门户、新闻资讯、 企业形象、社区、电子商务、功能服务等等，各种类型的网站在UI设计的思想上都不同，进而在后面细节上都有非常大的区别和取向。美工在脑中初步对设计风格、色彩有个把握。有了这些酝酿和准备，再根据提供的产品原型设计出平面稿，待产品和高层审稿修改确认后制作demo，如果有UE人员，将对demo进行评审。 4、原型设计阶段对前面所有工作在设计方面的实施，根据进度与成本，可以把原型控制在“手绘-图形-Flash-视频几个质量范围，原型的本质更倾向与一个DEMO，它不需要有全部的功能，但要体现出设计对象的基本特性。下列角色使用用户界面原型：n 用例阐释者，用来了解用例的用户界面。n 系统分析员，用来了解用户界面如何影响系统分析。设计员，用来了解用户界面如何施加影响及它对系统“内部”的要求。 类测试人员，用来制定测试计划活动。 n 在原型设计中，可建立三种基本原型：图纸（在纸上）、位图（绘图工具）、可执行文件（交互式） 。 用户界面原型必须在先启阶段的初期或在精化阶段一开始建立。整个系统（包括它的“实际”用户界面）的分析、设计和实施必须在原型建立后进行。创建用户界面原型的主要目的是在实际设计与开发开始之前揭示和测试系统的功能与可用性。这样，您可以在将太多时间与资源投入开发活动之前，确保所构建的系统是正确的。为了成功进行该初期测试，开发原型的开支必须远远低于开发实际系统的开支，同时这个原型应具备足够的功能，可以进行有意义的使用测试。用户界面设计员负责维护用户界面原型的完整性，并确保按照用例示意板和边界对象的要求，使用原型构建一个可用的用户界面。5、界面设计和输出阶段根据原型设计阶段的界面原型，对界面原型进行视觉效果的处理。该阶段确定整个界面的色调、风格、界面、窗口、图标、皮肤的表现。同时配合好开发人员完成相关的界面结合，对界面设计阶段的最后结果配合技术部门实现界面设计的实际效果。UI的色彩、风格、皮肤的的设计是对产品最直观的表现。一套好的UI设计，不仅仅是从形式上来传达，还应该是把形与视觉效果结合来表达产品，突出每一个界面的功能。从视觉上传达出可靠地信息，使用户在使用中不被误导。例如人人界面，每一个地方都用不同的图形和颜色传达出信息，用户一目了然。在这个过程中，基本上是实际设计操作而没有太多的分析，因为在前面的阶段中，分析都 已经很明确。 在这里，要做的就是团队人员把自己的那份工作做好。组后是美工把设计好的UI界面进过程序员加入代码，最后输出。在这个过程中，需要相互紧密的沟通，把界面的效果和人机交互要的动态进行详细的阐述，最后达到最终效果。其实这一点在上面的原型设计中都已经有了一定的模型，这里是进一步的使程序人员明确，确保无误。6、可用性测试阶段 测试是产品能成功运行的重要环节，是确保网站在上线后能顺利进行的必要环节。测试过程中，是对整个网站从外到里、在各个节点出测试网站。例如：能否运行；网站UI是否是与前期策划相同；整个UI的界面，图标等是否适合用户的使用；UI的图标的交互功能是否实现等都是在测试中。测试阶段主要有针对一致性测试；界面简洁性测试；界面美观度测试；用户动作性测试；行业标准测试。 6、1一致性测试一致性使软件人机界面的一个基本要求。目的是使用户在使用时，很快熟悉软件的操作环境，同时避免对相关软件操作发生理解歧义。这要求我们在进行测试时，需要判断软件的人机界面是否可以作为一个整体而存在。在一致性测试中常见的测试：n 提示的格式是否一致。n 菜单的格式是否一致。n 帮助的格式是否一致。n 提示、菜单、帮助中的术语是否一致。n 各个控件之间的对齐方式是否一致。n 输入界面和输出界面在外观、布局、交互方式上是否一致。n 命令语言的语法是否一致。n 功能类似的相关界面是否在在外观、布局、交互方式上是否一致（比 如商品代码检索和商品名称检索）。n 存在同一产品族的时候，是否与其他产品在外观、布局、交互方式上是否一致（例：Office产品族）。n 同一层次的文字在同一种提示场合（一般情况、突显、警告等）在文字大小、字体、颜色、对齐方式方面是否一致多个连续界面依次出现的情况下，界面的外观、操作方式是否一致（当然可能会有例外，比如操作结束的界面）。6、2信息反馈测试假设系统的使用者是一个初出茅庐的生手，你能指望她（他）在进行操作不出吗？但这还不是问题的所在，问题的所在在于我们都会犯错误，我们都有自己不了解的东西。如何避免，这要求我们的人机界面有足够的输入检查和错误提示功能。通过信息反馈，用户得到出错提示或是任务完成的赞许之语。但有些不幸的是，我们很多系统都在此方面做的不尽人意。n 系统是否接受客户的正确输入并做出提示（例：鼠标焦点跳转）。n 系统是否拒绝客户的错误输入并做出提示（例：弹出警告框，声响）。n 系统显示用户的错误输入的提示是否正确，浅显易懂（例：“ERR004”这样的提示让人不知所云）。n 系统是否在用户输入前给出用户具体输入方式的提示（例：网站注册程序）。n 系统提示所用的图标或图形是否具有代表性和警示性。n 系统提示用语是否按警告级别和完成程度进行分级（若非某些破坏性操作，请对用户温和一些）。n 系统在界面（主要是菜单、工具条）上是否提供突显功能（比如鼠标移动到控件时，控件图标变大或颜色变化至与背景有较大反差，当移动开后恢复原状）。n 系统是否在用户完成操作时给出操作成功的提示（很多系统都缺少这一步，使用户毫无成就感）。6、3界面简洁性测试你的人机界面像你的脸一样对称、干净吗？我们往往看到的使很多系统在人机界面设计上就像长了天花的病人。因此我们不得不对其进行美容前的检查，n 各个控件之间的间隔是否一致。n 各个控件在垂直和水平方向上是否对齐。n 菜单深度是否在三层以内（建议不要超出三层，大家可以参考微软的例子）。n 界面控件分布是否按照功能分组（菜单、工具栏、单选框组、复选框组、Frame 等）。n 界面控件本身是否需要通过滑动条的滑动来显示数据（建议采用分页显示并提供数据排序显示功能）。6、4界面美观度测试美是对比的产物。在网站UI界面的美观度测试上，我们不得不注意下面的一些建议。n 前景与背景色搭配是否反差过大。n 前景与背景色是否采用较为清淡的色调而不是深色（比如用天蓝色而不 用深蓝色和墨绿色）。n 网站系统界面是否采用了超过三种的基本色（一般情况下不要超过三种）。n 字体大小是否与UI界面的大小比例协调（一般中文采用宋体9-12，英文采用Arial或Times New Roman，日文采用SimSun或明朝）。n 按钮较多的界面是否禁止缩放（一般情况下不宜缩放，最好禁止最大、 最小化按钮）。n 网站系统是否提供用UI户界面风格自定义功能，满足用户个人偏好。6、5用户动作性测试“科学是懒人的哲学”，我们的计算机系统也不例外。我们的系统能让用户尽可能地偷懒吗（少动手肘，少记命令等），从这个角度出发，相信你会对用户动作性测试的本质有较深的体会。我相信没有一个测试员愿意做的多而收获的少。此外用户从某种角度上是心怀不测的挑衅者和肇事者。他们很少有太多的耐心来对待他们寄以很大期望的系统。下面是一些判断用户是否能够“偷懒”和“发泄防止”的测试建议。n 是否存在用户频繁操作的快捷键。n 是否允许动作的可逆性（Undo，Redo）。n UI界面是否有对用户的记忆要求。n 是否存在更便捷、直观的方式来取代当前的UI界面的显示方式；（比如用菜单界面代替命令语言界面）。6、6行业标准测试每个行业都有自己的一套标识体系。请尽可能不要与其“撞车”。这就需要我们的人机界面测试人员对软件行业的符号体系有所了解，否则将很难担此大任。n UI界面使用的图符、声音是否符合软件所面向领域的行业符号体系标准；n UI界面说使用的术语是否符合软件所面向领域的行业命名标准；n UI界面的颜色是否与行业代表色彩较为相近；n UI界面的背景是否能够反映行业相关主题（比如：反映环保的背景一般采用自然风光作为背景）；n UI界面的设计是否反映行业最新的理念和大众趋势；当然、每一个软件也应当具有自己的一些个性，这些个性是体现网站开发者和所面向的用户领域的特定需要的。比如微软的启动UI界面和苹果的启动UI界面就完全是两码事。一个不失个性的软件，其本身就是软件制作商的“广告代言人”。既要突出制作商，又不能喧宾夺主。下面我们给出一些常见的软件个性测试原则。7、产品上线在前期的所有过程中都是为了最后的这个环节，产品上线也就以为这网站要真正进入应用在，所有的UI界面开始为用户群体提供它的作用。 总结：UI设不仅仅是形式上的图像设计，也不仅仅只是视觉上的简单冲击力。UI的界面设计是一个网站不可缺少的必要内容，它是为了为用户而服务，帮助企业和用户解决问题的不要元素，同时也是企业和产品理念的有形载体。在此过程中，UI的设计不简单的工作，每个元素都不是凭空而出，而是根据严格的调查和分析，跟随市场的定位、产品的定位得出。在开发过程中，也不只是一个个体而能出做来的工作。开发过程是一个团队紧密的接触和沟通，经过各个严禁的阶段一步步的完成而来。参考书：产品设计与开发（第三版 翻译版）美）Karl T.UIrich,（美）Steven D.Eppinger著，詹涵菁译/07月/高等教育出版社高性能网站建设进阶指南：Web开发者性能优化最佳实践（美）桑德斯 著，口碑网前端团队 译/04月/电子工业出版社