基于Web的产品协同设计场景的实现

Software Engineering and Applications 软件工程与应用, 2018, 7(3), 188-199

Published Online June 2018 in Hans. https://www.360docs.net/doc/566885397.html,/journal/sea

https://https://www.360docs.net/doc/566885397.html,/10.12677/sea.2018.73022

Realization of Collaborative Design Scene

Based on Web

Jingjun Wang1, Xiuli Shao2, Huichao Li2, Mengmeng Yao2

1Tianjin Baili Ertong Machinery Co., Ltd., Tianjin

2Department of Computer and Control Engineering, Nankai University, Tianjin

Received: Jun. 9th, 2018; accepted: Jun. 22nd, 2018; published: Jun. 29th, 2018

Abstract

Product design work often requires many people to participate in different places. Therefore, this article designs and implements a Web-based product collaborative design system, which realizes the construction and restoration of a design scenario for a collaborative product, the loading of parts libraries, and the addition and editing functions of part models in the scene, dialogs in the design process, various documents, and interactive design features for the product.

Keywords

Collaborative Design, Scene Creation, Scene Recovery, WebGL

基于Web的产品协同设计场景的实现

王景军1，邵秀丽2，李慧超2，姚萌萌2

1天津百利二通机械有限公司，天津

2南开大学，计算机与控制工程学院，天津

收稿日期：2018年6月9日；录用日期：2018年6月22日；发布日期：2018年6月29日

摘要

产品设计工作往往需要多人异地参与，因此，本文设计实现了基于Web的产品协同设计系统，实现了针对某一协同产品的设计场景的构建与恢复、零件库的加载、场景中零件模型的添加与编辑功能，设计过程中的对话、各种文件，以及在线对产品的交互设计功能。

王景军等

关键词

协同设计，场景创建，场景恢复，WebGL

This work is licensed under the Creative Commons Attribution International License (CC BY).

https://www.360docs.net/doc/566885397.html,/licenses/by/4.0/

1. 引言

智能制造需要协同设计的支持，这在目前已成为一个重要的研究热点和应用热点。协同设计技术在协同CAD，工业设计等制造设计中有着广泛的应用[1][2]。借助产品协同设计平台，异地人员可以参与产品的设计工作。其中，基于Web 3D的协同平台是其中重要的组成部分[3][4]。

基于Web 3D的计算机协同研究主要的研究点和难点有：1) 3D模型和场景在协同环境中的表示形式和传输方式；2) 实现不同用户多视角、多精度的灵活配置方式；3) 3D场景的保存与恢复。

为了能够实时展示3D图形并进行可视操纵，需要有合适的3D场景与模型展示与操纵界面，本文系统采用B/S结构，采用封装了Web GL [5][6]的Web 3D交互技术Three.js [7]，设计3D场景操作集合，实现了3D设计场景的整体保存与恢复以及零件拼装设计的功能。设计人员可将线下设计的STL格式的CAD模型直接导入3D场景中进行拼装；用户可以调整3D模型大小、位置、旋转角度，可以清空场景、删除选中物体，进行上下步操作回滚等。

2. 基于Web 3D的设计场景设计

参与设计者在设计界面进行零件选择或者上传线下做好的CAD零件模型，在3D场景中完成零件的基本编辑操作，同时支持场景中零件的移除、场景的清空、上下步操作的回滚[8]、设计过程中历史版本的保存和恢复以及“后来者”可同步之前设计结果等功能，以更好的支持用户在3D场景中的产品设计活动。最终，完成零件模型在场景中拼装成整车的个性化设计过程。

整个设计界面包含了在3D场景下进行产品拼装设计的所有操作集合，用户单步操作完成，操作数据交由服务器去进行操作的冲突判定或者同步控制，整个协同设计场景的界面设计图如图1所示。2.1. 拼装产品零件模型的来源

1) 平台后台进行零件库的维护，该零件模型应当是.obj模型文件结合.mtl材质文件格式；

2) 参与设计用户自行导入CAD模型文件，该文件一经导入可直接加载至3D场景中，即提供外来建模零件接收接口，格式限定为STL格式。

2.2. 零件模型在3D场景中的编辑操作

1) 零件颜色的更换，用户在3D场景中选中要进行颜色更换的零件模型，并选择要更换的颜色，进行零件模型颜色的更换；

2) 3D场景中零件的基本编辑，用户在3D场景中选中进行编辑的物体，并设置编辑模式，模式的设置提供UI形式切换和键盘快捷键式切换两种方式。编辑模式有：大小(scale)、位置(position)、旋转角度(rotation)，分别同键盘的R，W，E对应。在对应模型下，通过鼠标在对应方位上的拖拽完成对应编辑操作，或者直接通过设计界面零件对应坐标、大小、旋转角度参数去编辑模型零件。

王景军等

Figure 1.Collaborative design scenario interface design draft

图1.协同设计场景界面设计草稿

2.3. 3D场景中设计过程的操作

1) 场景基本操作：a) 场景的清空操作、b) 场景中某个零件模型的删除、c) 操作上一步动作的回滚、

d) 操作下一步动作的回滚等；

2) 历史记录的保存与恢复：对3D场景中的物体进行设计操作过程中，可随时对当前设计结果进行

保存，并以“对象名称+当前时间格式”命名规则在设计界面历史记录中显示，用户点击对应记录可恢复至历史设计状态。

3. 3D场景设计操作的实现

为实现用户Web 3D场景设计解决方案，为用户提供涵盖网页端的三维模型展示、设计场景交互、三维零件模型编辑等功能的在线网页端产品设计，下面分别从3D交互场景的构建、零件库的加载、零件模型的添加与编辑、设计过程支持基本操作等方面介绍3D场景设计的实现工作。

3.1. 3D交互场景构建

3D交互场景为参与设计的用户提供一个在浏览器中三维实时展示以及场景中进行交互设计的环境。

图2给出了本文3D交互场景的构建工作流程。首先，在网页端创建场景，并构建了支持场景中三维模型展示功能的基本组件，包括：相机、底部参照网格、光源、显示渲染器等组件的添加；其次，在基本组件的基础上，构建了支持场景中模型的鼠标选中交互、场景中物体的360度查看和模型大小、位置、旋转角度的编辑功能；最后，开启线程，实时监测场景状态变化并实时进行场景中组件的渲染显示。

实现中运用javascript网页端编程借助Three.js框架提供的类库展开对Web 3D交互场景的构建工作，其中，Three.js框架完成了WebGL (Web Graphics Library) [9][10]的封装，其中场景中组件的添加借助场景对象的add()方法完成。

交互场景构建工作的具体实现流程如下：

第一步：场景与场景的内部构件创建

1) 创建初始化场景，使用Three.js类库的THREE.Scene()方法创建初始化场景对象scene；

王景军等

创建3D场景

添加相机

为相机添加旋转控制

添加场景背景

添加环境光

添加平行光

创建渲染器

添加零件编辑事件

添加鼠标选中事件

添加键盘快捷键事件

进行场景的渲染

Figure 2.Scene construction flow chart

图2.场景构建流程图

2) 相机的添加，使用类库的THREE.PerspectiveCamera()方法创建场景中的远景相机，指定场景查看角度，设置相机摆放位置position，并通过lookAt()函数设置函数观察点，最后将其添加到1)场景对象中，即完成场景中模型的添加；

3) 参照网络的添加，使用类库的THREE.GridHelper()方法创建场景网格，通过传递参数设置网格的尺寸、两条线的间隔、中心线条以及其他非中心线条的颜色，并设置网格位置，本次设置场景的中心位置坐标(0,0,0)的位置，最后将其添加到场景中。

第二步：场景中的光源的设置

1) 环境光的添加，通类库的THREE.AmbientLight(0x444444)方法创建环境光对象，其中参数为实例化好的THREE.AmbientLight对象颜色(占位符1)，本次采用灰色环境光，创建完后将环境光添加到场景中；

2) 平行光的添加，通过类库的THREE.DirectionLight(0xffeed)创建平行光对象，其中参数为平行光颜色，并设置平行光方位，调用平行光对象的set(20,20,20).normalize()进行设置，最后将平行光对象添加到场景中。

第三步：场景的渲染显示

场景的渲染在整个交互场景的构建工作中有重要的作用，决定了场景中组件以及模型的显示。使用类库的THREE.WebGLRenderer()创建渲染器对象，使用render()方法设定参数场景对象scene和相机对象camera，对场景中的构件进行渲染显示，其后设置渲染清除颜色、设置场景显示大小、场景中物体是否排序等特性，最后将渲染器中的所有元素renderer.domElement添加到页面位置进行显示，即为页面显示的场景。

王景军等

第四步：设计场景用户交互事件的添加

1) 场景中物体的360度查看，查看角度随鼠标的拖拽而改变。通过THREE.OrbitControls(camera)方

法进行旋转控制设置，为场景相机对象添加旋转属性，相机的查看视角可随鼠标的拖动而改变。

2) 添加零件模型的编辑事件，通过THREE.TransformControls()方法创建编辑对象，设置参数camera、

renderer.domElement为场景中渲染的物体添加编辑事件，设有translate位置、rotate旋转、scale大小编辑模式，场景中的物体在该三种模式下，会根据鼠标在固定方位上的拖拽进行对应编辑，默认为translate 位置模式。

3) 添加场景中物体点击捕获事件，首先为渲染器设置mousemove事件和mousedown事件。其中

mousemove是事件设置鼠标捕获物体图标为手型(正常情况下为箭头)；mousedown事件通过transformControls编辑对象的attach()方法设置鼠标选中物体，选中的物体可进行场景中设计提供的所有编辑操作，通过transformControls.object获取选中物体。

其中，鼠标选中物体需要解决鼠标从二维坐标空间到三维极坐标空间的转变问题，引入类库的THREE.Raycaster()方法定义投射对象，使用类库的THREE.Vector3()设置鼠标投射向量对象，通过调用投射对象的setFromCamera(vector, camera)方法根据相机以及投射鼠标向量设置投射参数，并通过intersectObjects(objects, true)找寻投射角度与鼠标的交叉点物体，即为鼠标捕获场景中物体。

4) 添加键盘快捷键事件，为浏览器窗体对象添加键盘的“keydown”事件，并通过对应case选项，

对场景中transformControls编辑对象通过setMode方法更改焦点物体的编辑模式，其中，“W”、“E”、“R”键分别对应translate位置、rotate旋转、scale大小模式。

最后，建立线程实时对场景进行渲染

完成上述交互场景的创建后，调用animate()方法对场景中的编辑操作实时显示。该方法的主要工作有：调用requestAnimationFrame方法，设置线程循环执行场景的渲染工作，包括对场景中相机的旋转角度的空间的更新、编辑物体的更新，通过调用update()函数实现，并使用renderer对象的render(scene, camera)方法进行场景中所有组件的渲染。

3.2. 产品零件库的加载

参与设计人员进入设计界面，设计界面自动进行零件库的加载显示，供用户选择。在进行协作设计前，需平台后台或生产厂商进行零件库的维护。

1) 零件的存储

零件的存储分两部分：a) 零件模型、零件简图(为在页面显示做准备)存入服务器文件区，其中零件模型包括.obj文件以及其对应的默认.mtl材质文件；b) 零件记录，如零件名称、模型名称、简图名称、零件类型等信息存入数据库中，数据库中的表数据记录跟文件区存储的模型和零件简图一一对应。

2) 零件库的加载

参与设计用户进入设计界面，页面后台写好sql语句，调用数据库访问接口，读取数据库零件库信息，获取零件模型信息、零件简图url，并将零件简图采用后台的InnerHtml方法按零件类别分别填充至设计页面零件区的不同位置，同时为零件简图添加选中载入设计场景事件，供用户进行零件模型的选择。

3.3. 3D零件模型的添加与编辑

在3D场景中进行的产品模型的拼装设计过程，为方便记录当前设计结果，参与客户端定义本地设计对象副本结构变量，来记录当前编辑产品模型的设计状态[6]。同时协同成员之间通过维护设计对象副本的一致性，来维护场景中设计结果的一致性[7][11]。因此，用户单步操作操作完成，需要先进行本地

王景军等

设计对象副本的更新，然后进行协作的操作的冲突判定或同步控制。

本节零件模型的操作从场景中零件库模型的添加、STL零件模型的导入、零件模型颜色的更换三部分展开介绍。

3.3.1. 零件库模型的添加

图3给出了整个零件库模型的添加过程的具体过程。即用户点击零件区的某一零件模型，到服务器固定文件夹下读取对应.obj模型文件以及默认.mtl格式材质文件，并将合并材质后的模型文件载入到场景的随机位置中。其后，更新本地设计对象零件副本，新增信息发送到NodeJs服务器进行协作组内操作的冲突判断或是同步处理。

首先，材质的加载。通过Three.js类库的THREE.MTLLoader()方法定义材质加载对象，使用setPath(‘model/’)设置材质文件读取路径，调用材质对象方法mtlLoader.load(name,func)方法加载材质；

其次，场景中模型的载入。通过Three.js类库的THREE.OBJLoader()方法创建.obj模型文件加载对象，使用setMaterials方法为加载对象设定上一步加载材质，同样通过对象调用setPath(‘model/’)设置.obj文件的读取路径，通过调用objLoader.load(name,func,onProgress,onError)方法加载obj文件，并将加载的模型设置其在场景的位置(本次设定为场景x，y平面上的随机位置)，通过scene.add(obj)载入场景中；

选中零件区某一零件

创建材质mtlLoader对象

从指定路径加载指定名

称.mtl格式材质文件

创建模型objLoader对象

设置模型材质

从指定路径加载指定名

称.obj格式模型文件

设置模型在场景中的位置

将模型加入到场景中

修改本地设计对象副本

发送数据至NodeJs服务器

进行操作控制

Figure 3.The process of adding a part model

图3.零件库模型的添加流程

王景军等

最后，修改设计对象副本data ，定义新增零件结构newObjData 并将其添加到设计对象副本data 中，该结构包含零件名称、零件标志(零件库还是自行上传的STL 文件)、操作用户名、零件位置、旋转角度、大小等零件属性。更改后，将新增零件信息使用socket.io 即时通信类库中的socket.emit 方法将零件属性发送至NodeJs 服务器，供服务器进行操作冲突的判断或同步的处理。 3.3.2. STL 零件模型的导入

图4给出了STL 零件模型导入的具体实现过程，即设计参与者在协同进行产品设计过程中，可随时将外部零件模型导入场景中，为产品整车设计提供个性化零部件素材，并实现单用户导入协作组内客户端用户同步可现。其中，零件模型的格式限定为STL 格式，该格式为CAD 软件、3Dmaxs 软件、Three.js Web3D 接收的通用版本。

用户选择上传零件模型文件，系统先对零件格式进行验证，验证通过进行零件模型的导入工作。第一步：读取上传文件，并完成到STL 模型对象的转换。创建FileReader 对象，将上传文件file 传

用户上传STL 格式文件

是否是STL 格式？

创建FileReader 对象定义并触发模型对象加载事件，读取上传文件创建STLLoader 对象将fileReader 读取文件转换

为stlLoader 对象

是

创建默认标准材质将材质与stlLoader 对象模

型合并将模型载入场景

修改本地设计对象副本发送数据至NodeJs 服务器

进行操作的控制

设置模型在场景中的位置

设置合并后模型名称定义FormData()格式化数据对象，并将文件等信息

填充其中使用XMLHttpRequest 异步调用应用程序，格式化数据对象formData 作为参数文件存入对应服务器固定

目录下

Figure 4. The process of importing STL model 图4. STL 模型导入流程

王景军等

入对象的readAsArrayBuffer(file)方法中，触发对象的加载事件，将载入的文件通过Three.js Web3D类库的STLLoader类的parse(conetents)方法将文件转换为STL模型对象；

第二步：为模型对象添加默认材质。通过Three.js [7]类库提供方法MeshStandardMaterial()创建标准材质实例对象，然后调用类库中的THREE.Mesh()方法，以模型文件对象和材质对象作为参数，返回合并材质后的STL模型对象；

第三步：将合并材质后的STL模型对象载入场景。在载入场景前，先设置模型对象的名称name，在场景中显示的位置position (本次设定为场景中x，y平面上的随机位置)，并通过场景提供的scene.add(mesh)方法，以合并后的STL模型对象作为参数，将模型对象载入场景中；

第四步：将上传的模型文件存入服务器文件区。创建FormData格式化数据对象，将上传文件以及文件名称使用append()方法加入到formData对象中。创建XMLHttpRequest异步请求对象，并指定异步请求方式(本次为post方式)、异步请求地址。以formData格式化数据对象作为参数，传递到指定地址应用程序，应用程序定义HttpPostedFile对象来接收文件参数file及字符串对象接收文件名称filename，并使用该对象的SaveAs(‘../model/upload/’+filename)方法，传入文件保存地址，将文件保存到服务器的指定位置；

最后，更新设计对象副本data，修改后向服务器发送新增零件信息，服务器进行操作冲突的判断或同步的处理(本部分同零件库模型的加载)。

3.3.3. 零件模型颜色的更换

首先，获取页面颜色插件选中颜色rgb值，采用transformControls.object获取场景中当前操作物体；其次，采用Three.js类库中的THREE.MeshPhongMaterial()方法通过传递color颜色参数，创建颜色材质对象；最后，将object物体的material属性，设置为该颜色材质对象。颜色更换结束，更新本地设计对象数据副本，并将模型颜色以及模型名称进行封装，发送至NodeJs服务器，供服务器进行操作冲突的判断或同步的处理。

3.3.

4. 场景中的零件清除

为给参与设计提供一个灵活、可回溯的设计过程，本次在3D场景中完成的产品拼装设计操作，除对产品零件模型提供载入、大小、位置、旋转角度、颜色等的设计操作外，还提供了设计场景中零件的删除、场景的清空、场景中上下步操作的回滚等功能。

1) 删除选中零件

通过transformControls对象的object属性获取场景中当前操作物体，采用场景对象的scene.remove(object)方法将选中物体从场景中移除，同时移除本地设计对象数据副本对应零件信息，将移除零件模型封装后发送至NodeJs服务器，供其进行冲突的判断或同步操作的处理。

2) 清空场景

获取本地设计对象数据副本，逐条遍历副本数据的零件信息，取出零件名称data.modelSign，通过scene.getObjectByName(data.modelSign)方法获取场景中名称对应物体，并使用scene.remove(obj)方法，以获取物体作为参数，将该物体从场景中移除。最后，清空本地设计对象副本，向NodeJs服务器发送清空场景信息，供服务器进行同步用户操作的处理工作。

4. 3D场景的恢复问题的解决

4.1. 历史记录的保存与恢复

在协作设计过程中，拥有设计界面操作控制权的用户可随时对当前设计结果进行保存，并随时将场

王景军等

景中当前设计状态恢复至某一历史保存结果状态。

1) 历史记录的保存

前置条件：用户在场景中进行拼装设计过程中，需要对当前场景中的设计状态进行保存，点击“保存”保存当前设计成果。

应用程序解决方案：本次该过程充分使用本地设计对象副本数据，获取当前设计副本结果数据data.modelObjs并将其转化为结果字符串dataStr，将结果字符串采用Ajax异步请求方式在数据库中间结果表中进行永久存储(为中间结果的查询以及“后来者”同步设计状态做准备)，存储成功后在设计界面历史记录列表中添加以“结果名称+日期格式”命名的结果记录，并将结果字符串dataStr隐式存入记录中，然后为该条记录添加点击进行场景的恢复事件，为历史记录的恢复做准备。最后设置保存命令标识，将保存数据发送至NodeJs服务器端供其进行同步控制。

2) 历史记录的恢复

前置条件：用户在场景中进行拼装设计，需要对将场景恢复至某一历史记录结果状态，在此基础上进行再设计，在设计界面历史记录区点击要恢复的历史记录，进行场景中历史结果的恢复。

应用程序解决方案：获取记录中隐藏结果字符串dataStr，先根据当前设计对象副本数据逐个将设计场景中的零件模型移除，即清空场景。然后，将结果字符串转换为JSON数据对象，逐条遍历对象中的零件数据，根据零件的属性值进行零件在场景中的恢复。最后设置恢复命令标识，将恢复结果数据发送至NodeJs服务器端供其进行同步控制。

4.2.“后来者”同步问题的解决

基于协作活动的特点，协作设计活动的一次创建可进行多次迭代设计，直到组织者结束该活动为止。

由此，在协作成员进行非第一次协作设计的迭代时，需要同步获取之前活动的交互信息；或者一个用户加入一个已经存在的协作设计过程、再或者当系统的软、硬件、网络发生故障时，程序被迫退出后的重新进入，都会引发该同步问题。为此，给出解决方案。首先，在用户进行设计过程中，单步操作完成或进行文字、文件交流通信时，采用异步请求的方式实时将结果数据在数据库中进持久化存储；其次，用户进入协作设计页面，后台会自动从数据库获取设计活动当前结果数据，若结果不为空，则根据数据信息，进行文字、文件交互信息以及设计界面设计状态的恢复。具体的实现过程分交互结果的实时存储和及时恢复两部分进行介绍。

1) 交互结果的实时存储

设计界面需要存储的信息包括：3D场景设计状态信息、文字文件交流信息、中间历史记录信息，其中，中间历史记录信息的存储在上一节历史记录的保存中已经介绍。3D场景设计状态信息的实时存储，具体实现流程图入下图5所示。

页面驱动程序捕获用户设计操作，单步操作完成将本地设计对象副本data.modelObjs更新，将更新后的data.modelObjs转化为字符串格式，采用Jquery的$.ajax异步post请求的形式进行结果字符串数据的永久存储。

具体实现过程如下：完成本地设计对象副本data.modelObjs更新后，调用JSON.stringify(data.modelObjs)方法，以对象副本作为参数将其转换为字符串格式，记为结果字符串；然后使用$.ajax异步post调用.ashx应用程序形式，将结果字符串结合协作活动id作为参数传递到应用程序，后台应用程序书写sql语句并调用数据库存储接口将结果字符串填入协作活动id对应协作活动的表记录中，进行活动当前设计结果的持久化存储。存储结果通过Response.Write(sign)方法[12]将信息写入HTTP 响应输出流反馈至前台调用处，其后解析存储结果，失败对用户进行提示。

王景军等

用户进行设计操作

页面驱动程序捕获用户

设计操作

单步操作完成？

更新本地设计对象副本

data.modelObjs

存入成功？

Figure 5.3D scene design status real-time storage

图5.3D场景设计状态实时存储流程

2) 交互信息的及时恢复

进行历史交互信息的恢复分别对3D场景设计状态的恢复、文字文件交互信息的恢复、历史中间结果的恢复三部分。

用户进入设计界面，后台应用程序分别按照协作活动id，以及信息的存储状态作为过滤条件进行信息数据库的读取工作，读取的数据信息按照信息类别逐条进行交互状态的恢复。其中，3D设计场景状态的恢复，以后台应用程序读取数据库的当前设计状态为结果字符串，进行场景设计状态的恢复，恢复过程同上一节历史记录的恢复过程。

4.3. 3D场景中上下步操作的回滚

设计参与者在3D场景中进行设计操作过程中，可随时进行上下步操作的回滚。且当单用户完成操作的回滚，协作组内其他客户端同步进行回滚操作，内部工作示意图如下图6所示。

由图6可知，操作回滚的范围为产品设计的整个操作集合，在此基础上借助上一步和下一步栈空间进行上下步操作日志的存储。具体过程为：

王景军等

颜色更换

零件载入

……

上一步栈空间下一步栈空间

颜色更换

零件载入

STL零件载入

位置更改

旋转角度更改

大小更改

删除选中物体

清除场景

恢复历史

自

行

车

设

计

操

作

集

合

Figure 6.Step up and down to roll back the internal working diagram

图6.3D场景设计状态实时存储流程

1) 用户单步操作完成将对应操作日志压入上一步栈空间，点击设计界面“恢复到上一步”按钮，进行上一步操作结果的回滚，具体是将上一步栈空间进行出栈，根据出栈日志去进行对应操作的回滚，同时将该回滚操作日志压入下一步栈空间，以供进行下一步操作的恢复；

2) 用户点击设计界面“恢复到下一步”按钮，进行上一步回滚操作的恢复，具体是将下一步空间进行出栈，根据出栈日志进行对应操作的恢复，同时将该操作日志再次压入上一步栈空间，以供用户进行设计操作的反复。

5. 结束语

本文主要在协同设计系统中引入3D场景的设计，设计实现了基于Web的产品协同设计系统，实现了针对某一协同产品的设计场景的构建与恢复、零件库的加载、场景中零件模型的添加与编辑功能。但仍有需要改进与研究的问题，例如：模型的标准化与语义管理，以及平台需要进一步应用验证，以及设计上应考虑一定的通用性等。

基金项目

天津市互联网先进制造专项(15ZXHLGX00360，15ZXHLGX00380)天津市重大科技专项(16ZXHLGX00250，15ZXDSGX00090)。

参考文献

[1]殷国富, 陈永华. 计算机辅助设计技术及应用[M]. 北京: 科学出版社, 2000.

[2]王新光. 基于模型驱动的实时交互式三维场景构建方法及其在水利上的应用研究[D]: [硕士学位论文]. 南京: 河

海大学, 2002.

[3]孔庆复. 计算机辅助设计与制造[M]. 哈尔滨: 哈尔滨工业出版社, 1999.

王景军等[4]潘康华. 基于MBD的机械产品三维设计标准关键技术与应用研究[D]: [硕士学位论文]. 北京: 机械科学研究总

院, 2012.

[5]Rego, N. and Koes, D. (2015) 3Dmol.js: Molecular Visualization with WebGL. Bioinformatics, 31, 1322.

https://https://www.360docs.net/doc/566885397.html,/10.1093/bioinformatics/btu829

[6]Hanson, R.M., et al. (2013) JSmol and the Next-Generation Web-Based Representation of 3D Molecular Structure as

Applied to Proteopedia. Israel Journal of Chemistry, 53, 207-216. https://https://www.360docs.net/doc/566885397.html,/10.1002/ijch.201300024

[7]https://www.360docs.net/doc/566885397.html,/blog/threejs/2018-02-12/26.html

[8]Klein, M. (1989) Supporting Conflict Resolution in Cooperative Design Systems. Artificial Intelligence in Engineering,

21, 1379-1390.

[9]Congote, J., Segura, A., Kabongo, L., et al.(2011) Interactive Visualization of Volumetric Data with WebGL in

Real-Time. Proceedings of the International Conference on Web 3D Technology, Paris, 20-22 June 2011, 137-146.

https://https://www.360docs.net/doc/566885397.html,/10.1145/2010425.2010449

[10]https://https://www.360docs.net/doc/566885397.html,/webgl/

[11]https://www.360docs.net/doc/566885397.html,/article/articledir/1

[12]https://https://www.360docs.net/doc/566885397.html,/zh-cn/library/system.web.httpresponse.write.aspx

1. 打开知网页面https://www.360docs.net/doc/566885397.html,/kns/brief/result.aspx?dbPrefix=WWJD

下拉列表框选择：[ISSN]，输入期刊ISSN：2325-2286，即可查询

2. 打开知网首页https://www.360docs.net/doc/566885397.html,/

左侧“国际文献总库”进入，输入文章标题，即可查询

投稿请点击：https://www.360docs.net/doc/566885397.html,/Submission.aspx

期刊邮箱：sea@https://www.360docs.net/doc/566885397.html,

人机交互技术Web界面设计

人机交互技术 Web界面设计学号: 姓名:

一、Web界面设计的基本概况 Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。 Web界面设计与站点外观直接相关，站点的界面外观是否友好直接关系到是否能吸引人的关注。人性化的设计是Web界面设计的核心，如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。用来解释Web的人机界面性质的一个模型，它提出网页是用户和知识之间的界面。对于信息提供者来说包括信息的表达，对于使用者来说则是信息的获取。信息的表达与获取分别受到两者认知结构的制约。模型涉及到信息的三种类型 1)数据：当一条信息被反复、简单的提供时称为数据，比如机票价格。 2)复杂信息：而用来叙述事件时称为复杂信息，如多媒体信息。 3)过程性信息：在信息有明确目标，并相互作用时称为过程性信息，如在线练习、在线测试等。模型涉及到信息的两种特性：1)动态性：信息在不断的变化，具有动态性； 2)一致性：信息元素的组织方式具有一致性 (2)Web信息设计模型是解释Web人机界面性质的另一个模型，是一种研究网页的信息设计模型。设计模型中要考虑到信息的两个方面： 1)第一是应该呈现或略去什么信息。 2)第二个方面指的是信息该如何被表现。二、Web界面设计要求及目的 Web应用的成功与否，除了受其所采用的技术和所能够提供的功能的限制还受Web网页的外观的影响。Web网页的外观经常是最先被用户注意到的。用户对网站的第一印象与界面外观是否友好、吸引人密切相关。所以对于设计人员来说，Web界面设计至关重要。Web界面设计的人性化、易用性是Web界面设计的核心。 Web界面设计要素 a)Web界面布局

产品设计基本流程

产品设计流程产品开发流程和项目管理流程时常被大家关注，合理的过程是团队协作的基础。在大家把产品的功能和特性放在第一位的时候，开发和项目的管理至关重要，而产品的设计却往往被忽视，开发团队会为了那些晦涩难懂、令人费解的功能而夸夸其谈，复杂的产品特性通常会迫使产品团队放弃优雅简洁的设计，用户体验永远是可能是项目过程中最不重要的环节。如果你和你的团队希望重视产品的设计，就应该首先从团队架构和项目流程上来进行改造，我们的目标是设计优先、用户至上。当然技术团队和产品开发还是至关重要的环节，你需要将设计和开发的流程无缝的整合起来。下面的团队架构和流程应该适用于各种产品、软件和网站的设计（如果您有好的建议或者不同的看法，可以直接留言或者邮件给我）产品设计团队的六种逻辑角色你也许不需要六个人来组成团队，但每个人的职能必须清晰。《》中关于“团队组织”的建议值得参考，他告诉你了在这个快速的软件开发时代如何去组建一个高效的产品团队。业务负责人（）通常是你的、产品最初的策划人或者是整个产品的业务主管，他们会分析产品的市场、定位客户、定义品牌、提出想法，同时拿定主意，产品团队里面的万金油产品经理（）对产品负责的人，产品主管，他们会提出概念、收集确定需求、制定计划、控制进度并保障产品质量。在很多团队里面“业务负责人”和“产品经理”通常是同一个人。产品设计（）（人机界面设计）, （工业设计）（信息架构设计）。将这三种职能混合起来，因为他们并不能孤立存在，我们统称为产品设计。他们决定产品的所有功能细节，配合产品经理制作产品原型，与视觉设计师和用户研究人员共同完成产品的详细设计。产品设计过程中最重要的产品功能说明文档将由他们来跟踪完善。视觉设计（）产品团队中最有艺术细胞的人，他们完成产品的外观和界面设计，是否好看由他们说了算，他们作为产品团队的艺术设计权威指导。用户研究（）最接近用户并了解用户的人（不需要技术高手或者是逻辑人），他们从产品的原型阶段就介入，配合产品设计师们做典型用户分析和用户目标分析，并对原型进行可用性测试，并制定最终的可用性测试计划。在很多产品团队里面，产品设计、视觉设计和用户研究通常会由一到两个人来担任，设计师会做用户研究，视觉设计是会做信息架构分析。产品开发（）产品团队中的技术开发人员，网页制作或者程序开发，他们是产品的最终实现者，他们开发并进行单元测试，控制产品的最终品质。产品从设计到发布的六个阶段产品开发的过程可以看作是整个产品设计环节的最终实现部分，对于非技术人员来说它是一个把理想变成现实的神秘阶段

新产品开发的基本流程步骤

产品开发的过程是一系列活动的整合。这一整合包括了从最初的产品外观构想，到市场分析定位、市场开发、技术实现、研发生产计划以及确保各项计划有效落实的设计管理等诸多方面的内容。成功的产品开发离不开团队合作精神。为此，团队应有一份设计任务说明书。作为一个整体,所有团队成员更应进一步找出与任务说明书有关的全部问题。只有这样，一个团队才能建立起任务说明书所反映的共同目标。编制产品任务书时，应占有大量的技术资料，并通过分析对比，确定先进、合理、完整的结构。其资料来源有产品样本、说明书、图样、技术报告、图书、期刊及经验等。此外，设计者还可以到生产现场调研取得第一手材料。有时用户也能提供一些有用的资料。因为用户是产品的使用者，最熟悉产品的优、缺点，所以，认真听取用户对产品在使用性能上的意见，设计者就能够对现有的同类型产品进行正确的分析、比较和必要的实验，从而获得最佳参数，为编制技术任务书做好准备。一.设计任务书有以下几个项目组成： ①产品的用途及适用范围产品的用途是指主要用途及其他用途;使用范围应说明使用地区、使用部门、工作条件和其他特殊要求等。 ②制造该产品的理由包括说明以前有无其他同类产品，如果已有这类产品，为什么满足不了用户要求，存在什么缺点，现在是否继续生产。此外，还要说明设计的新产品在国民经济中的作用、重要性及有无发展前途。 ③详细分析国内外较好的同类产品的结构特性。这是技术任务书的主要内容。必须说明对这类产品应作哪些分析比较,包括这类产品的结构和部件可能有哪些不同的方案，应采用何种方案，为什么采用这种方案等。在比较分析时应注意：①比较对象必须是类型相同、规格相似的产品,即用途和使用范围相同或相似;②应选择先进产品比较;③对产品结构和性能优、缺点的分析,应从使用、制造、维修等方面全面考虑;④对比的数据、资料应全面、可靠，先从整体比较，再到部件比较;⑤应计算比较重要的技术经济指标，作为分析的依据。经过分析比较后,选择并确定产品的结构。 ④详细说明产品的各种特征并附初步总图除说明产品特征外,还应说明应用了哪些新的科学技术成就和合理化建议，这类产品的发展趋向、使用部门、在技术上有何新的发展和要求等。

web界面设计

一、实验目的和要求 1) 熟悉Web站点的信息交互模型和结构 2) 熟悉Web界面设计的基本思想和原则 3) 掌握Web界面设计的工具和技术二、实验内容与原理 (一) 实验内容: 要求根据Web界面设计的原则(简洁、一致性、对比度)，进行Web界面规划、概要设计和设计要素的选择，利用一种界面设计工具(Dreamweaver / Frontpage)完成网页设计。 (二)实验步骤： 1)选择一种界面设计工具，并熟悉它； 2）针对一个具体的网站（学校、个人、公司）设计应用，进行Web界面规划和概要设计； 3）选择WEB界面设计要素，设计出网页三、设计方案 1）使用的数据库是MySQL，数据库表如图所示： news表: news_user表:

2)该网站为新闻发布系统，该网站有浏览新闻、添加新闻、修改新闻、删除新闻功能。用户权限分为管理员、普通用户权限。 a)网站主页 b）单击标题，检测如果未登陆，进入登陆页面

c)如果没有登陆账号，则进行注册

d)如果登陆成功则进入新闻浏览界面。如果是普通用户，浏览界面如图所示：如果是权限用户，浏览界面如图所示： e)详细内容：

f) 如果是管理员用户，则有更新新闻权限,如下图所示： f) 如果是管理员用户，则有添加新闻权限,如下图所示：

我使用的开发工具是VS2012,工程类型为https://www.360docs.net/doc/566885397.html, Web Forms Application.VS2012集成了https://www.360docs.net/doc/566885397.html, MVC 4，全面支持移动和HTML5，WF 4.5相比WF 4，更加成熟。该版本中包含了新的Metro应用程序模板，增加了JavaScript功能、一个新的动画库，并提升了使用XAML的Metro应用程序的性能。 3）网站业务流图

产品设计主要工作流程图

标准的产品设计工作流程每个产品团队都会有自己的工作流程，无论这个工作流程是否最高效、是否体现最大价值，但是我认为只要这个流程能够为实现工作目标提供过程的保障就可以算是好的流程。对于流程本身而言，可以因团队不同或工作任务不同而有差异。一个成熟度的产品团队可以在保证工作质量的前提下轻松适应任务的变化，也就是说能够依据不同的工作要求调整对应工作的流程。也只有这种团队才能正真体现最大的价值，称得上是一个敏捷的、能快速响应变化的团队。那么，我们先来看看以前做产品设计时的团队工作流程。我总结为是一个相对normal的流程。大多时候，一个PM，一个美工，一两个写Html的工程师就足够了。如下图所示：工作流程包括： ? 当产品经理做好了产品的需求分析和功能实现批次计划后，开始计划产品迭代过程。? PM做好产品的线框设计，交给前端工程师（Front-End）； ? 前端工程师开始依照产品经理的线框做HTML开发，同时要肩负一些交互设计工作，比如，导航，搜索，查询，弹出页面或层设计，menu等； ? 同时，美工开始依照线框，做页面的视觉设计，比如，色彩，按钮，logo，icon等；

? 当HTML和美工设计都ok了，就可以交给Javaer、PHPer等做前后台整合了； ? 然后是产品的一系列测试，包括可用性测试，功能性测试，性能压力测试，产品集成测试，发布测试等。然而，随着产品精细化设计的要求，特别是web2.0的一些标准逐步引入到产品设计畴。以注重用户体验，注重以人与系统的交互为设计重点，崇尚简约和适度的设计理念被提出来，并逐渐引领了产品设计的主流思想。在新的产品设计过程中，为了体现web2.0的UE设计元素，实现产品设计的工作精细化，我们逐步优化了新的产品标准工作流程，并定义了产品工作流程的标准输出成果。如下图所示：新的产品设计团队标准工作流程被划分为两个领域： 1、产品功能设计领域； 2、产品视觉交互设计领域；这种划分的意义在于把产品不再仅仅看作一个由代码构成的系统，而更是一组由用户行为构成的服务集合。从系统角度来看设计更看重的是功能，而从服务角度来看设计更看重的是体验，所以，我们在产品设计的过程中，一条线去关注产品的功能设计，一条线去关注产品的体验设计。

一个Web系统的界面设计和开发

一个Web系统的界面设计和开发1.工作流程（下图，是整个开发过程中与界面设计相关的主要流程工作）从最初需求分析开始，我就加入项目，自始自终参加整个开发过程。在需求分析阶段，参与了对客户的访问和调研；在概要设计阶段，参与了部分系统设计分析工作；在详细设计阶段，完成了整个系统界面设计和Demo制作，并提交用户反馈；在代码开发阶段，参与了系统表现层的设计开发。

2.需求分析在需求分析阶段，主要针对界面交互相关问题，对用户进行若干调研。主要包括以下内容 ·受众用户群调查 ·系统使用环境调查 ·受众用户使用习惯调查 ·用户对旧版本软件使用情况调查这一阶段，由于成本原因，我并没有直接访问客户进行调查。工作主要是提出某些具体问题，由需求调研人员，以问卷或口头问答方式，对客户进行调研。另外，公司经验丰富的客服人员和市场人员，也是非常重要的需求来源之一。本系统的客户群主要为国家省市下属质检单位，最终受众年龄从年轻到较高龄都有。对于普通国家机关人员，一般对计算机系统和网络不够熟悉，计算机环境一般，甚至比较差，少有配置优良的环境。在这种环境下，用户对计算机使用一般没有使用倾向，大多更适应手工操作。对本系统的前代使用，最主要意见是使用困难，不方便。还有其他具体调查反馈，如用户基本不使用鼠标右键，年龄较大的用户难以看清密集的较小文字等等。 3.界面设计原则在概要设计阶段，根据需求阶段的调研结果，我整理了系统界面设计的基本原则。因为在代码开发阶段，很多时候界面的具体制作是由开发人员直接写代码，因此必须确定一定的原则和规范，以保证系统界面的统一。一般适用原则 ·简单明了原则：用户的操作要尽可能以最直接最形象最易于理解的方式呈现在用户面前。对操作接口，直接点击高于右键操作，文字表示高于图标示意，尽可能的符合用户对类似系统的识别习惯。 ·方便使用原则：符合用户习惯为方便使用的第一原则。其它还包括，实现目标功能的最少操作数原则，鼠标最短距离移动原则等。 ·用户导向原则：为了方便用户尽快熟悉系统，简化操作，应该尽可能的提供向导性质的操作流程。 ·实时帮助原则：用户需要能随时响应问题的用户帮助。 ·提供高级自定义功能：为熟悉计算机及软件系统的高级用户设置自定义功能，可以对已经确定的常规操作以及系统的方方面面进行符合自身习惯的自定义设置。包括常规操作、界面排版、界面样式等种种自定义。 ·界面色彩要求：计算机屏幕的发光成像和普通视觉成像有很大的不同，应该注意这种差别作出恰当的色彩搭配。对于需用户长时间使用的系统，应当使用户在较长时间使用后不至于过于感到视觉疲劳为宜。例

产品设计部工作流程规范

产品设计部门工作规范及流程一．产品部角色及责任产品总监：负责产品部门业务，推进项目落地，配合公司战略，协调解决产品业务难题。产品经理：负责做出产品规划和项目开发计划，提出产品建议书和项目建议书，对规划产品的需求分析、设计、开发和测试阶段性过程进行指导和监控，保证产品满足市场需要，获得良好的收益。产品助理：作为产品经理的协助人员，在产品经理的工作智能之内，进行产品相关的市场调研、产品策划、部门沟通等相关工作。 UI设计师：负责界面的设计、编辑、美化等工作，提高用户体验。二．部门职责 1.产品规划产品部负责汇总公司高层及各个部门的需求及数据，结合产品、人群、业务特点，输出相应的产品策划文档。 2.产品研发管理（项目管理）产品转开发后，产品经理需对其负责的产品（项目）负责，推动和跟进设计、开发、测试、运维、发布、运营等部门的工作，并统筹各个部门不同阶段介入配合，使得各个环节无缝对接。 3. 产品功能特性培训产品部（产品经理）应按版本迭代对相关部门开展产品培训，培训内容需包括产品特性、产品新特性、产品使用方法等。

4. 日常运营督导通过用户体验、数据反向推动运营部门的运营策略，如商店更新机制、推荐机制等。三．工作规范 1.自律与自觉上班时间禁止做与工作无关的事情，接外包干私活是公司红线！接到工作任务应快速响应，高质量推进和完成任务。工作空档期应利用工作时间进行技能学习，部门主管有义务安排可验收的学习任务。 2. 会议制度发起会议前要求产品经理先梳理清楚问题或需求，产品经理与开发部或设计部会议交流的应该是提出产品要求，或讲解要求，而非在会议上一起发散性探讨需求。非需求评审会，要求在30 分钟内结束会议，无结论的会议更应提前结束，因此，要求产品经理提前将会议议题提前发给与会人，以便与会人做相应准备。 3. 工作汇报产品汇报制度：周报、月报汇报重点：部门流程建议、学习计划及总结、个人心得总结项目汇报制度：周报、月报汇报重点：项目进度、存在的问题、解决方案 4.其他请按公司相关规章制度严格要求自己。

Web界面设计规范方案

Web应用界面设计规范（Design Specific ation for Web UI）主讲人：ARay 目录：一、软件界面规范的重要性及其目的二、用户体验为何如此重要三、Web规范体系介绍四、界面设计开发流程五、应该遵循的基本原则六、界面设计规范一、软件界面规范的重要性及其目的 ①使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。 ②产品设计通过规范的方式来达到以用户为中心的目的。二、用户体验为何如此重要 ①日常生活中的遭遇 X员工悲惨的一天：早晨起来，发现闹钟没有按原先设定响起来。一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开。到了地铁站，发现公交卡没有钱了。无奈之下只能去排队买票。排了3趟地铁，终于到公司了，但是你却迟到了。结果：尽管你已经非常努力，但是你还是迟到了。那么，让我们看看这一连串的倒霉事，是什么让我们如此狼狈？ ②什么是用户体验

用户体验（user experience）是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。糟糕的用户界面表现：表现一：过分使用各种奇形怪状、五颜六色的控件。表现二：界面元素比例失调。比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。表现三：界面元素凌乱。比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。表现四：违背使用习惯。你按F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。表现五：消息框信息含糊、混乱。比如软件弹出一个消息框。把原本“确定”和“取消”写成为“是”和“否”，让用户不知道什么意思。表现六：还有一种糟糕的用户界面，乍一看很厉害，实际上完全是缺乏规划的结果。这种

产品部工作规范及流程图

产品部工作规及工作流程一、产品团队组成二、产品周期流程三、产品设计流程 3.1 产品立项产品小组开会讨论产品立项： 3.1.1 讨论产品需求并分析产品主要功能点。 3.1.2 讨论并拟定产品交互体验与产品视觉体验。 3.1.3 工作周期计划。 3.2 产品设计使用Axure RP 对产品实现高保真的原型设计。产品界面、功能不出现遗漏。产品立项原型设计原型确认 UI 设计 UI 确认前端开发前端确认设计周期开发周期测试周期 PRD 编写产品经理前端开发 UI 设计测试产品上线阶段跟踪

原型交互体验应满足贴近真实产品90%的效果。 3.3 产品原型确认 3.3.1产品原型是否满足需求功能。 3.3.2产品原型交互体验评测。 3.3.3产品原型交互体验改进措施。 3.3.4讨论对产品UI设计。 3.4 产品UI设计与确认 3.4.1UI与产品原型是否相符 3.4.2视觉效果是否满意 3.5 产品前端设计与确认 3.5.1前端与原型保持一致性。。 3.5.2前端与UI保持一致性。 3.5.3前端不足改进措施。 3.6 产品PRD编写通过产品原型图例对产品进行功能性描述。四、产品开发进度跟踪流程 4.1产品开发沟通会议 4.1.1讲演产品：使用产品原型与PRD文档对产品进行讲演。 4.1.2需求沟通：对需求进行讨论。 4.2提交资料准备开发产品部与技术部开完产品开发沟通会后，将前端文件（HTML），原型（Axure RP），开发需求文档（PRD）等文件提交到技术部。 4.3产品开发追踪五、产品测试流程（参照产品测试规） 5.1产品测试根据产品PRD文档与产品测试用例对产品进行功能点测试。使用压力测试、兼容性测试等手段对产品进行性能测试。 5.2产品验收产品通过功能测试及性能测试，测试人员给出总结报告，对该产品能否

产品设计流程系列：如何进行原型设计(上)

之间的交互流程，它是产品功能与内容的示意图。直接上几个原型图，可能会更加清晰明了，如下图：原型设计稿产品设计原型按照精细程度来分，可分为低保真产品原型和高保真产品原型、设计成品低保真产品原型所谓低保真原型，其实是对产品较简单的模拟，它只是简单的表述了下产品的外部特征和基本功能构架，很多时候都是用简单的设计工具迅速制作出来，用来表示最初的设计概念和思路。比如用纸和笔进行的手绘，用画图软件做出的简单线框图，都算是低保真产品原型。这样的原型图有几个好处：可以快速产出：有时候一个需求的开发周期很短，低保真原型可以快速满足同事的时间要求。修改成本低：一个产品策划很可能会被修改很多次，低保真的原型修改起来很方便。当然，低保真原型也会有几个问题，比如交互细节不清楚，容易造成误解等。通常来说，一般只有时间比较紧迫，需求也比较简单的时候，我们才会去产出低保真产品原型。高保真产品原型

高保真产品原型，则是高功能性、高互动性的原型设计，是忠实展示产品功能、界面元素、功能流程的一种表现手段。原型图中无论是功能模块的大小，还是文案设计甚至是所用的图标、图例、交互动作，都使用真实素材，或者说和最终UI设计师的产出非常接近，就算是高保真产品原型了。高保真的好处：便于梳理产品细节：制作高保真原型的过程中可以让产品经理提前发现产品潜藏的各种问题，提前处理风险。更容易让其他成员了解产品设计：有时候简单的线框图无法让别人想象出你要做的事情，也不清楚你要放的是哪几个字段，而高保真原型就可以。相对而言，劣势就是制作周期比较漫长，涉及到产品流程的修改，那基本原型就得回炉重造一遍。对于刚入门的产品经理，我一直建议有时间的话，还是尽可能多的画高保真原型。因为在一开始产品设计经验不多的情况下，通过设计一些高保真原型，对梳理自己的产品思维、了解产品设计是很有帮助的。对于已经入门很久的同学来说，则看需求的复杂程度和时间安排，比如产品的关键页面是必然要用高保真原型去设计和梳理的。设计成品设计成品在这里，你也可以理解为是视觉设计师产出的UI设计稿，也就是设计师对你的产品原型进行美化之后得出的作品。设计师会运用一定的设计规范，来将你的原型变成可以让开发进行实现的作品。在设计成品出来的那一刻，产品经理需要做的就是和设计师进行PK就好了，我们在这里就不再过多来描述了。放上一张图来比较下三种原型的区别：

UI设计工作流程

UI设计工作流程很多没有在正规的大公司工作过的设计师同学问过我面试时如果面试官问项目开发的工作流程是什么？其实，我觉得每个公司可能有自己的工作流程，有些些公司可能需要设计师从前期立项到中间开发到后期产品测试和项目上线的跟进要全程参与而有些公司可能只需要设计师在产品研发阶段进行参与，但不管那种方式，我觉得设计师有必要知道一个产品从立项到完成的所有步骤。现在我大概介绍一种工作流程给大家。一、产品设计阶段首先在一个项目开始之前会是立项，领导或者相关部门提出想法给产品经理，产品经理拿到项目之后，会对整个项目进行分析，这中间产品经理需要做很多工作。 1、首先产品经理配合市场部门进行市场分析，来搞清楚目标市场和产品定位，如果时间充足的话，尽可能的也要做用户调研来确定产品的用户需求的挖掘和分析。 2、竞品分析也是产品经理和设计师都要做的功课。 3、这些前期工作完成之后，剩下的要做原型设计，预算产品周期，疏通整个产品流程，出原型图交给交互设计师当然产品经理在做这些工作时是要保持时刻跟其他部门的同事密切共同的，例如产品的市场定位需要找市场部门的同事进行沟通，产品设计规范，界面布局等需要找UI设计师来沟通。而开发环境和项目周期可能要找到技术开发的同事来进行协调。有些公司还有专门的交互设计师，需要产品经理在前期制作原型图和交互设计师充分配合完成交互说明，以方便

后期的视觉设计和技术开发。二、UI视觉设计产品原型（包括前期交互稿）完成之后需要交付给UI设计师进行视觉设计，这里指的UI设计其实严格来说是属于GUI，因为UI的本意为user interface（用户界面）涵盖了交互设计，用户体验设计和视觉设计。而交互设计和用户体验是在产品开始之时就已经同时展开的，所以这里说的设计通常指的GUI界面视觉设计。 1、在UI设计师开始之前，要充分了解产品定位，通过目标用户的喜好风格分析开确定视觉设计的大概调性。 2、进行竞品分析，找出竞品优劣， 3、搜索素材灵感，多找优秀设计作为自己设计灵感的来源是一个非常有效的方法（参考学习而不是让你去抄袭）。 1）确定配色，布局和设计风格。 2）进行界面设计。 3）完稿后进行可用性测试，修改修改修改直至最重定稿。在整个视觉设计中，设计师除了把控好整体的视觉设计风格，更要有耐心设计好各个细节，例如icon，字体，元素之间的间距等这些不起眼的地方往往代表了整个app的质量，细节之处做好，会给用户在视觉上带来一种安全可靠的感觉，所以细节非常重要。这里有必要说一下视觉设计规范。有些公司的视觉规范是在视觉设计开始之前就要订下来的，而有些公司是整个视觉设计完成之后再来制定视觉规范。为什么可以这样呢，视觉规范是为了方便整个设计团队在设计时更容易进行沟通来进行的，而设计工作在进行中可能会随时进行变更视觉风格，所以设计前期来确定设计规范的话，可能会对后期的设计带来一定的限制，所以设计师内部可能会有一个简单的设计文档来进行交流。等设计稿定下来之后，再来制作标准的设计视觉规范，方便后期开发和之后设计工作继续跟进。整个设计稿确定之后，设计师要出高保真视觉稿，交给技术来进行沟通，同时还需要对

Web界面设计规范

Web应用界面设计规范（Design Spe cification for Web UI）主讲人：ARay 目录：一、软件界面规范的重要性及其目的二、用户体验为何如此重要三、Web规范体系介绍四、界面设计开发流程五、应该遵循的基本原则六、界面设计规范一、软件界面规范的重要性及其目的 ①使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。 ②产品设计通过规范的方式来达到以用户为中心的目的。二、用户体验为何如此重要 ①日常生活中的遭遇 X员工悲惨的一天：早晨起来，发现闹钟没有按原先设定响起来。一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开。到了地铁站，发现公交卡没有钱了。无奈之下只能去排队买票。排了3趟地铁，终于到公司了，但是你却迟到了。结果：尽管你已经非常努力，但是你还是迟到了。那么，让我们看看这一连串的倒霉事，是什么让我们如此狼狈？ ②什么是用户体验用户体验（user experience）是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。糟糕的用户界面表现：表现一：过分使用各种奇形怪状、五颜六色的控件。表现二：界面元素比例失调。比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。

表现三：界面元素凌乱。比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。表现四：违背使用习惯。你按F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。表现五：消息框信息含糊、混乱。比如软件弹出一个消息框。把原本“确定”和“取消”写成为“是”和“否”，让用户不知道什么意思。表现六：还有一种糟糕的用户界面，乍一看很厉害，实际上完全是缺乏规划的结果。这种软件本身的确提供了比较复杂的功能，但对于哪些是常用功能，哪些是很少用到的高级功能，缺乏评估。什么功能都往界面上挤，占地方不说，用户会厌烦，弄不好还会被吓跑。

新产品开发部门工作流程图

新产品开发部门工作流程图新产品开发策略主要方式呈报新产品样品开发产品开发过程

附件一：内部管理制度新产品开发工作，是指运用国内外在基础研究与应用研究中所发现的科学知识及其成果，转变为新产品、新材料、新生产过程等一切非常规性质的技术工作。新产品开发是企业在激励的技术竞争中赖以生存和发展的命脉，是实现“生产一代，试制一代，研究一代和构思一代”的产品升级换代宗旨的重要阶段，它对企业产品发展方向，产品优势，开拓新市场，提高经济效益等方面起着决定性的作用。因此，新产品开发必须严格遵循产品开发的科学管理程序，即选题（构思。调研和方案论证）样（模）试批试正式投产前的准备这些重要步骤。一、调查研究与分析决策新产品的可行性分析是新产品开发中不可缺少的前期工作，必须在进行充分的技术和市场调查后，对产品的社会需求、市场占有率、技术现状和发展趋势以及资源效益等五个方面进行科学预测及技术经济的分析论证。（一）调查研究： 1、调查国内市场和重要用户以及国际重点市场同类产品的技术现状和改进要求； 2、以国内同类产品市场占有率的前三名以及国际名牌产品为对象，调查同类产品的质量、价格、市场及

使用情况； 3、广泛收集国内部外有关情报和专刊，然后进行可行性分析研究。（二）可行性分析： 1、论证该类产品的技术发展方向和动向。 2、论证市场动态及发展该产品具备的技术优势。 3、论证发展该产品的资源条件的可行性。（含物资、设备、能源及外购外协件配套等）。（三）决策： 1、制定产品发展规划：（1）企业根据国家和地方经济发展的需要、从企业产吕发展方向、发展规模，发展水平和技术改造方向、赶超目标以及企业现有条件进行综合调查研究和可行性分析，制定企业产品发展规划。（2）由研究所提出草拟规划，经厂总师办初步审查，由总工程师组织有关部门人员进行慎密的研究定稿后，报厂长批准，由计划科下达执行。 2、瞄准世界先进水平和赶超目标，为提高产品质量进行新技术、新材料、新工艺、新装备方面的应用研究：（1）开展产品寿命周期的研究，促进产品的升级换代，预测企业的盈亏和生存，为企业提供产品

Web界面设计

1100310120 潘飞达 Web界面设计一实验目的和要求 1) 熟悉Web站点的信息交互模型和结构 2)熟悉Web界面设计的基本思想和原则 3)掌握Web界面设计的工具和技术二预备知识 Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。Web界面设计与站点外观直接相关，站点的界面外观是否友好直接关系到是否能吸引人的关注。人性化的设计是Web界面设计的核心，如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。(1)Web信息交互模型模型涉及到信息的三种类型 1)数据：当一条信息被反复、简单的提供时称为数据，比如机票价格。 2)复杂信息：而用来叙述事件时称为复杂信息，如多媒体信息。 3)过程性信息：在信息有明确目标，并相互作用时称为过程性信息，如在线练习、在线测试等。模型涉及到信息的两种特性： 1)动态性：信息在不断的变化，具有动态性； 2)一致性：信息元素的组织方式具有一致性 (2)Web信息设计模型设计模型中要考虑到信息的两个方面： 1)第一是应该呈现或略去什么信息。 2)第二个方面指的是信息该如何被表现。 (3)Web界面设计基本原则

1)了解浏览者的心理状态 2)内容与形式的统一 3)减少浏览层次 4)特点明确 5)统一整体的形象 6)Web界面设计的3C原则 (4)Web界面概要设计 1)Web界面框架设计：Web网站规划、建立原型系统、详细设计、正式实施 2)Web界面的内容与风格的设计:网站内容设计的原则、Web界面的风格 3)Web界面设计的语言与文化：网站应设置多语言选择，在网站设计和建设中进行跨文化研究 (5)Web界面设计要素 ?Web界面布局 ?Web界面的色彩 ?Web界面的字体 ?Web界面的动画与多媒体 ?Web界面的导航 (6)Web界面设计技术与工具主要的技术包括超文本标记语言HTML、客户端脚本语言JavaScript、JavaApplet、服务器端脚本语言。三、实验内容 1、选择界面设计工具：Dreamweaver ，辅助工具Photoshop 2、设计内容：糗事百科网页本网站内容充实，在主页的设计上运用了模板，框架等。分页面上运用了导航条。专业机构的研究表明，彩色的记忆效果是黑白的3.5倍，所以网站要色彩丰富。本网站的底色为浅棕色，配以白色和棕色的文字，色彩搭配非常适宜。在导航条中，链接处显得简单明确，分类合理，让人一目了然。整个界面简单大气，毫无冗余和凌乱之感，十分赏心悦目。

设计开发流程

设计开发流程（初稿）根据开发的各阶段进程，将开发过程规划为如下五个阶段： ●开发策划阶段 ●开发设计阶段 ●制样验证阶段 ●试产定型阶段 ●衍生拓展阶段为了对开发的各阶段进行有效的系统控制，各开发阶段工作完成后，开发部应填写《产品开发进度报告》 1、开发策划： 1.1市场调研：引用后附的《市场调研告报》 1.2开发立项建议：根据各项反馈和收集的信息，必要时可填写《立项建议书》，提出新品开发意向和建议，统一上报至总经办，由总经办备案保存。 1.3立项审核：对于提报的立项建议，总经办可甄选处理，可协调相关部门进行可行性论证和审核。 1.4编制《设计任务书》：应包括内容 *依《立项建议书》上的相关要求和意向，包括功能和性能上的原则要求等。 *顾客对产品的设计要求，包括合同、样品、图纸等 *类似或相近产品所提供的参考信息，包括各种性能参数，外型结构等。 *各项国家/行业/企业内部标准等。 *相关法律/法规的要求等。 *过往类似产品所提供的适用信息 *设计开发所必须的其他适用信息 * 编制可实施性的具体开发设计方案，明确相关人员的工作任务和责任，并依实际情况拟定日程计划表，以有效控制开发进度。 1.5《设计任务书》进行可行性论证和审核。审核/审批通过后以ISO文件形式予以保存，以待开发。 2、开发设计：开发设计阶段一般可分为几个大的方面：如软件设计/电路设计/结构设计/工艺设计/试样确认/文件存档等方面，实际运作时可依据各个过程间的有序性和相关性采取并行工作或单线工作。如：软件设计、电路设计和结构设计可安排不同人员，齐头并进地开展工作，但工艺设计一般在上述设计完成的情况下才能开展。 2.1软件设计： 2.1.1编制程序：如程序流程图，编程等 2.1.2 仿真调试：

WEBUI设计要求规范

内蒙古万德系统集成有限公司 WEB UI设计(流程/界面)规范目录一：UI设计基本概念与流程...................................................................................................... - 3 - 1.1 目的.................................................................................................................. - 3 - 1.2范围 .................................................................................................................. - 3 - 1.3 概述.................................................................................................................. - 3 - 二：UI界面用户体验设计原则与规范.............................................................................................. - 4 - 1：应该遵循的基本原则..................................................................................................... - 4 - 2：页面外观规范........................................................................................................... - 4 - ②宽带页面........................................................................................................... - 5 - ③自适应............................................................................................................. - 5 - ④其他页面........................................................................................................... - 5 - 基本结构.............................................................................................................. - 6 - 页面版式：............................................................................................................ - 6 - 版块基本元素：所谓基本元素就是将其中任意几块元素拼接起来形成所需网页版块。............................................ - 6 - 版块组合形式.......................................................................................................... - 7 - 3：色彩规范............................................................................................................... - 8 - 4：字体规范.............................................................................................................. - 10 - ①文字格式......................................................................................................... - 10 - ②标题类............................................................................................................ - 12 -

产品部工作规范及流程【内容详细】

产品部工作规范及工作流程一、产品团队组成二、产品周期流程三、产品设计流程

3.1产品立项产品小组开会讨论产品立项： 3.1.1讨论产品需求并分析产品主要功能点。 3.1.2讨论并拟定产品交互体验与产品视觉体验。 3.1.3工作周期计划。 3.2产品设计使用Axure RP 对产品实现高保真的原型设计。产品界面、功能不出现遗漏。原型交互体验应满足贴近真实产品90%的效果。 3.3产品原型确认 3.3.1产品原型是否满足需求功能。 3.3.2产品原型交互体验评测。 3.3.3产品原型交互体验改进措施。 3.3.4讨论对产品UI设计。 3.4产品UI设计与确认 3.4.1UI与产品原型是否相符 3.4.2视觉效果是否满意

3.5产品前端设计与确认 3.5.1前端与原型保持一致性。。 3.5.2前端与UI保持一致性。 3.5.3前端不足改进措施。 3.6产品PRD编写通过产品原型图例对产品进行功能性描述。四、产品开发进度跟踪流程 4.1产品开发沟通会议 4.1.1讲演产品：使用产品原型与PRD文档对产品进行讲演。 4.1.2需求沟通：对需求进行讨论。 4.2提交资料准备开发产品部与技术部开完产品开发沟通会后，将前端文件（HTML），原型（Axure RP），开发需求文档（PRD）等文件提交到技术部。 4.3产品开发追踪产品部每周对产品开发进度进行追踪。

五、产品测试流程（参照产品测试规范） 5.1 产品测试根据产品PRD 文档与产品测试用例对产品进行功能点测试。使用压力测试、兼容性测试等手段对产品进行性能测试。 5.2 产品验收产品通过功能测试及性能测试，测试人员给出总结报告，对该产品能否验收上线进行标示。六、产品改进流程插入新需求插入新需求加入新需求，重新设计收集新需求将新需求放到下一版本中

生产流程设计与选择

生产流程设计与选择一、生产流程的类型生产流程一般有三种基本类型：按产品进行的生产流程、按加工路线进行的生产流程和按项目组织的生产流程。（一）按产品进行的生产流程按产品进行的生产流程就是以产品或提供的服务为对象，按照生产产品或提供服务的生产要求，组织相应的生产设备或设施，形成流水般的连续生产，有时又称为流水线生产。例如汽车装配线、电视机装配线等就是典型的流水式生产。连续型企业的生产一般都是按产品组织的生产流程。由于是以产品为对象组织的生产流程，又叫对象专业化形式。这种形式适用于大批量生产。（二）按加工路线进行的生产流程对于多品种生产或服务情况，每一种产品的工艺路线都可能不同，因而不能象流水作业那样以产品为对象组织生产流程，只能以所要完成的加工工艺内容为依据来构成生产流程，而不管是何种产品或服务对象。设备与人力按工艺内容组织成一个生产单位，每一个生产单位只能完成相同或相似工艺内容的加工任务。不同的产品有不同的加工路线，它们流经的生产单位取决于产品本身的工艺过程，又叫工艺专业化形式。这种形式适用于多品种小批量或单件生产。（三）按项目组织的生产流程对有些任务，如拍一部电影、组织一场音乐会、生产一件产品和盖一座大楼等，每一项任务都没有重复，所有的工序或作业环节都按一定秩序依次进行，有些工序可以并行作业，有些工序又必须顺序作业。三种生产流程的特征比较列于表3—3中。表3—3 不同生产流程特征比较

二、生产流程设计的基本内容生产流程设计所需要的信息包括产品信息、运作系统信息和运作战略，在设计过程中应考虑选择生产流程、垂直一体化研究、生产流程研究、设备研究和设施布局研究等方面的基本问题，慎重思考，合理选择，根据企业现状、产品要求合理配置企业资源，高效、优质和低耗地进行生产，有效满足市场需求。

Web应用界面设计规范

Web应用界面设计规范主讲人：ARay 目录：一、软件界面规范的重要性及其目的二、用户体验为何如此重要三、Web规范体系介绍四、界面设计开发流程五、应该遵循的基本原则六、界面设计规范一、软件界面规范的重要性及其目的①使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。 ②产品设计通过规范的方式来达到以用户为中心的目的。二、用户体验为何如此重要

①日常生活中的遭遇 X员工悲惨的一天：早晨起来，发现闹钟没有按原先设定响起来。一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开。到了地铁站，发现公交卡没有钱了。无奈之下只能去排队买票。排了3趟地铁，终于到公司了，但是你却迟到了。结果：尽管你已经非常努力，但是你还是迟到了。那么，让我们看看这一连串的倒霉事，是什么让我们如此狼狈？

②什么是用户体验用户体验（user experience）是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。糟糕的用户界面表现：表现一：过分使用各种奇形怪状、五颜六色的控件。表现二：界面元素比例失调。比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。表现三：界面元素凌乱。比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。表现四：违背使用习惯。你按F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。表现五：消息框信息含糊、混乱。比如软件弹出一个消息