艺术设计课程论文论文题目网站中 U I 设计的开发过程引言网站 UI 设计的开发过程是经过系列严密的策划，结合市场和产品----网站 本身而进行的一向活动。

每个环节的工作都决定着产品今后能否有效实施，开发 工作能否有效的进行。

在开发过程中，不同环节都是为下一个阶段铺垫，直到最 终产品的上线。

在整个过中，UI 设计的开发是决定网站成败的关键。

关键词：市场定位、人机交互、文化理念、 网站个性、一个网站的 UI 设计是影响这个网站成败的主要因素之一。

好的 UI 设计不仅 是让网站变得有个性、有品味，还要让网站的操作变得舒适、简单、自由、充分 体现网站的定位和特点，突出网站的文化理念。

UI 设计则运用了心理学、设计学、美学、社会文化学等一系列的学科知识 交叉相溶而进行。

对于网站 UI 设计是经过对产品精确的定位，针对市场分析， 从而设计出符合产品本身和市场的 UI。

目前，随着信息化、数字化的快速到来，传统的媒介已经不能供应人们对信 息的大量需求，取而代之的“互联网”进入人们的生活中，逐渐成为人们生活中 的主流媒介。

“互联网”庞大的信息将通过大大小小、形同各异的载体--网站呈 现在人们眼中，而对于现上线的网站都是一个模版，十分混乱。

对于这一问题， 如何进行 UI 设计将是一个大的挑战。

要使一个网站与其它网站有所不同，就必 须设计出符合自己理念的 UI，从而使网站能从视觉传达出的信息有属于自己的 特点，具有很强的附着力。

这样才能让消费者在潜意识中留下印象。

从而提升产 品的品牌形象。

1、市场分析与产品的定位阶段1.1、市场分析 市场分析是对市场规模、位置、性质、特点、市场容量及吸引范围等调查资 料所进行的经济分析。

它是指通过市场调查和供求预测，根据项目产品的市场环 境、竞争力和竞争者，分析、判断项目投产后所生产的产品在限定时间内是否有 市场，以及采取怎样的营销战略来实现销售目标。

通过对市场的分析了解客户群体，得出运行方式，最终确定客户群体。

对分析后 的数据统计和分析对出一个准确的市场定位。

得出了一准确的市场定位后，UI设计师才能有一个准确的设计方向，才具有针对行的进行设计。

有了明确的方向， 才能在开发中设计出符合产品----网站的 UI，使产品与其他的产品拉开差距，赋 予产品有力的竞争力。

1．1 ①市场分析的方法，一般可按统计分析法进行趋势和相关分析。

从估计市场销售潜力的角度讲，也可以根据已有的市场调查资料，采取直接资料法， 必然结果法和复合因素法等进行市场分析。

对任何事物的认识是有一个从抽象到具体的过程，对市场进行系统分析时，市场 是一个非常复杂的现象，对它的分析研究也必须遵循这一认识规律。

市场分析在对市 场这一对象进行研究时，首先对市场问题进行了概括的阐述继而又以基础理论、微观 市场、宏观市场对市场进行了较为详尽的分析，最后又对市场的各种类型进行了具体 的解剖，从而使人们对移个市场的状况和运行规律既有了概括的了解，又有了具体的 认识。

1.2、产品定位 产品定位是在足够的市场调查和分析数据后得出的符合消费需求的结果。

对用什 么样的产品来满足目标消费者或目标消费市场的需求。

对目标市场的选择与产品结合 的过程，也即是将市场定位企业化、产品化的工作。

同时，在这个过程中，赋予产品 的文化和理念也在无形中产生，变得明确。

UI 设计师以产品的定位为基础，针对最终用户群即他们的特征进行分析和设计。

2、用户研究与分析阶段经过初步的市场定位和产品定位，明确了产品的方向，这个阶段将是 UI 设计师进 行详细的更有针对性的研究和分析。

在这个阶段作用，是为后面的工作做更系统的、 更详细的分析。

例如：用户特征、用户习惯、界面的作用、设计过程中需要什么技术、 需要什么软件、开发的大体时间等都是在这个阶段做出报告。

UI 设计师将收集相关资料分析目标用户的使用特征、情感、习惯、心理、需求等， 提出用户研究报告和可用性设计建议。

用户研究也是人群细分化的研究，在目标人群 中，每个人的生活方式、习惯、情感都是不同的，而对于 UI 设计而言就必须对用户 进行研究和分析得出他们的共性。

只有了解了用户的需求，才能使设计出的 UI 适合 用户。

对于技术的分析，也是 UI 设计者迫于考虑的问题。

在一项开发的项目中，工作者 会用到很多种技术和各种各样的软件来辅助设计工作（例如：后台的开源技术、编程 技术、前台的各种软件等），而这决不是一个人能完成的工作，它需要一个团队共同 进行、相互协助来完成，所以对技术的分析也是对有限资源的整合和分配，对资源的有效利用。

对产品理念的提炼，使在设计过程中把这种理念注入到可视的 UI 中，而这个过程需要对产品有十分详细的分析和了解。

UI 视觉设计具体分析的：logo、标准色、主色调及配色、排版布局、导航、按钮、表单、icon、布局模块、tab、列表前端代码相关包括 css 样式规范和 html 代码结构规范，具体有： 文字样式（链接、字符串、文本段落）  框架样式  模块样式（包括各类边距等细节、 写一个规范代码）  链接样式  图片样式  标签样式  表单样式3、架构设计阶段在这个阶段，UI 进行风格设计出界面，和需求部门拿出定稿；UE 对原型进 行优化，整理出交互及用户体验方面意见，反馈给 UI 及需求部门；UID 等待效 果图，开始代码编制。

html 代码结构规范的原则是：尽量少的代码量规范且规 律的写法实现设计效果，标签使用上尽量保持页面元素其原本涵义（如该用 h、 p、table、hr 等标签的地方用相应标签，不能用 div 用上瘾了），及照顾到 seo 的写法。

UI 主要职责：根据可以性分析结果制定交互方式、操作与跳转流程、结构、 布局、信息和其他元素。

界面设计、图标设计、风格设计。

这时候 UI 是与产品及公司高层的详尽沟通下，尽可能的了解他们的愿望及暂 时可用的质料对产品进行定位，比如是做行业门户、新闻资讯、 企业形象、社 区、电子商务、功能服务等等，各种类型的网站在 UI 设计的思想上都不同，进 而在后面细节上都有非常大的区别和取向。

美工在脑中初步对设计风格、色彩有 个把握。

有了这些酝酿和准备，再根据提供的产品原型设计出平面稿，待产品和 高层审稿修改确认后制作 demo，如果有 UE 人员，将对 demo 进行评审。

4、原型设计阶段对前面所有工作在设计方面的实施，根据进度与成本，可以把原型控制在“手 绘-图形-Flash-视频几个质量范围，原型的本质更倾向与一个 DEMO，它不需要有全部的功能，但要体现出设计对象的基本特性。

下列角色使用用户界面原型：  用例阐释者，用来了解用例的用户界面。

 系统分析员，用来了解用户界面如何影响系统分析。

设计员，用来了解用户界面如何施加影响及它对系统“内部”的要求。

类测试人员，用来制定测试计划活动。

 在原型设计中，可建立三种基本原型：图纸（在纸上）、位图（绘图工具）、可执行文件（交互式） 。

用户界面原型必须在先启阶段的初期或在精化阶段一开始建立。

整个系统（包括 它的“实际”用户界面）的分析、设计和实施必须在原型建立后进行。

创建用户界面 原型的主要目的是在实际设计与开发开始之前揭示和测试系统的功能与可用性。

这 样，您可以在将太多时间与资源投入开发活动之前，确保所构建的系统是正确的。

为了成功进行该初期测试，开发原型的开支必须远远低于开发实际系统的开支，同 时这个原型应具备足够的功能，可以进行有意义的使用测试。

用户界面设计员负责维护用户界面原型的完整性，并确保按照用例示意板和边界对 象的要求，使用原型构建一个可用的用户界面。

5、界面设计和输出阶段根据原型设计阶段的界面原型，对界面原型进行视觉效果的处理。

该阶段确定整 个界面的色调、风格、界面、窗口、图标、皮肤的表现。

同时配合好开发人员完成相 关的界面结合，对界面设计阶段的最后结果配合技术部门实现界面设计的实际效果。

UI 的色彩、风格、皮肤的的设计是对产品最直观的表现。

一套好的 UI 设计，不 仅仅是从形式上来传达，还应该是把形与视觉效果结合来表达产品，突出每一个界面 的功能。

从视觉上传达出可靠地信息，使用户在使用中不被误导。

例如人人界面，每一个地方都用不同的图形和颜色传达出信息，用户一目了然。

在这个过程中，基本上是实际设计操作而没有太多的分析，因为在前面的阶段中，分析都 已经很明确。

在这里，要做的就是团队人员把自己的那份工作做好。

组后是美工把设计好的 UI 界面进过程序员加入代码，最后输出。

在这个过程中，需要相互紧密的沟通， 把界面的效果和人机交互要的动态进行详细的阐述，最后达到最终效果。

其实这 一点在上面的原型设计中都已经有了一定的模型，这里是进一步的使程序人员明 确，确保无误。

6、可用性测试阶段测试是产品能成功运行的重要环节，是确保网站在上线后能顺利进行的必要 环节。

测试过程中，是对整个网站从外到里、在各个节点出测试网站。

例如：能 否运行；网站 UI 是否是与前期策划相同；整个 UI 的界面，图标等是否适合用户 的使用；UI 的图标的交互功能是否实现等都是在测试中。

测试阶段主要有针对一致性测试；界面简洁性测试；界面美观度测试；用户 动作性测试；行业标准测试。

6、1 一致性测试 一致性使软件人机界面的一个基本要求。

目的是使用户在使用时，很快熟悉 软件的操作环境，同时避免对相关软件操作发生理解歧义。

这要求我们在进行测 试时，需要判断软件的人机界面是否可以作为一个整体而存在。

在一致性测试中常见的测试： 提示的格式是否一致。

 菜单的格式是否一致。

 帮助的格式是否一致。

 提示、菜单、帮助中的术语是否一致。

 各个控件之间的对齐方式是否一致。

 输入界面和输出界面在外观、布局、交互方式上是否一致。

 命令语言的语法是否一致。

 功能类似的相关界面是否在在外观、布局、交互方式上是否一致（比 如商品代码检索和商品名称检索）。

 存在同一产品族的时候，是否与其他产品在外观、布局、交互方式 上是否一致（例：Office 产品族）。

 同一层次的文字在同一种提示场合（一般情况、突显、警告等）在 文字大小、字体、颜色、对齐方式方面是否一致多个连续界面依次出现的情况下，界面的外观、操作方式是否一致（当然可能会有例外，比如操作结束 的界面）。

6、2 信息反馈测试 假设系统的使用者是一个初出茅庐的生手，你能指望她（他）在进行操作不出 吗？但这还不是问题的所在，问题的所在在于我们都会犯错误，我们都有自己不了 解的东西。

如何避免，这要求我们的人机界面有足够的输入检查和错误提示功能。

通过信息反馈，用户得到出错提示或是任务完成的赞许之语。