完整word版UI设计技术建议书.docx

1、完整word版UI设计技术建议书UI设计技术建议书1公司简介 XXXXXXXXXXX科技有限公司致力于为企业提供一流的设计服务、用户研究、交互设计、视觉设计以及前端开发等服务。公司坚持以用户为中心的设计思想，深入细致的研究与洞察，发现用户需求，并把需求转换为产品目标,每一个界面，每一处细节,我们都力求创新与卓越，为客户提供可持续的设计方案，实现产品的商业目标.经过多年的实践积累，公司拥有了一批经验丰富、实战能力过硬的核心人才。咨询顾问，核心团队均毕业于国内外知名学府，拥有硕士学历，且拥有国际专业背景和资深从业经验。团队成员拥有全方位学科背景，包括人机交互、心理学、信息工程、视觉设计、软件等专业

2、。在各行业有着多年的互联网产品设计经验,在工作中，接触各个领域，和他们成功合作,为用户需求而设计，为产品的商业目标，创造更大的价值。我们提供包括用户体验咨询、品牌定位和战略、市场研究和细分、用户研究和产品概念设计、交互设计、视觉设计、可用性评估、接受度测试、产品技术开发、上线后数据分析等全方位解决方案.2设计流程XXXXXXXXXXX科技有限公司在用户体验设计流程上拥有一套完善灵活的专业方法，每一步骤都有科学理论以及实践经验作为支撑。我们的流程可以最大限度地对用户在使用产品过程中的体验感受进行正确准确的评估、充分认识用户的真实期望和目的、对用户操作流程的预设设计进行修正和有效的改进,保证产品核

3、心功能及用户任务需求的平衡，促进人机界面的协调工作,提高产品易用性。2.1整体流程整体流程以业内流行的五层结构为基础框架体系，每一层的递进都是由抽象到具体的过程，时间上是顺序的。具体步骤之间彼此交叉，迭代开发。2.1.1战略层：对项目进行整体分析，明确商业目标和用户目标，重点是解决两者之间的冲突，找到平衡点.2.1.2范围层：参考现有产品或业内成熟竞品，收集相关信息，明确功能需求并确定功能范围和需求优先级。2.1.3结构层:对产品框架进行设计，并考虑框架中每一功能模块之间的交互关系。2.1.4框架层：对产品中每一个功能模块分别进行设计。2.1.5表现层：对目标产品进行评估总揽和内容优化。2.2

4、操作方式 将上述理论分解到实际操作步骤中，我们得到如下流程图：2.2.1第一阶段：分析调研阶段首先进行项目会议,双方明确项目需求,同时对市场环境进行讨论分析。寻找市场上的竞争产品进行剖析，整理竞争产品的功能，并分析每一功能所代表的用户需求,以及需求背后的潜在用户和用户目标.分析竞争产品的功能结构和交互设计，从产品设计的角度分析其优点、缺点及原因，成为我们产品设计的第一手参考资料.结合上述分析基础和资料,纵观领域竞争格局、市场状况，利用网络论坛、关键字搜索等手段获得更多用户反馈、观点、前瞻性需求。此阶段产出物：市场调研报告需求分析文档2.2.2第二阶段：产品分析阶段基于前一阶段的分析结果，对自身

5、产品进行明确定位,从软件提供者的角度分析产品推出的意义和重点关注的方面。通过实际考量、讨论修缮落实各方意见。结合竞争产品的分析资料,采用定性分析的方法，获得对产品目标用户在概念层面的认识。明确用户的典型特征，以及各类别用户的主要需求。将用户需求与关键功能进行一一映射，结合竞争产品的优劣特征，从逻辑上梳理需求规格列表，明确需求间的逻辑关系和层级关系。划定项目范围与用户体验要素,并根据不同类型定义的用户制定不同版本的用户体验模型。此阶段产出物:用户分析文档产品功能规格列表2.2.3第三阶段：数据分析与结构设计阶段模拟典型用户执行关键功能达到其目标的使用场景，并记录关键操作过程。将用户使用数据归纳整

6、理，并用科学算法进行量化分析。从功能逻辑入手,结合对常见软件的经验积累和竞争产品的认识,参考用户体验的数据支持，设计出尽量接近用户对产品运行方式理解的概念模型，成为产品设计的基础框架；理顺框架之间的结构关系，依据用户使用习惯和产品功能结构进行交互设计。此阶段产出物：产品设计文档低保真原型（信息架构与交互设计部分）2.2.4第四阶段：原型设计阶段依据信息框架和功能结构，制作界面列表并按类型分组,确定界面中包含的控件数量和类型、控件之间的逻辑和组织关系。以确保一致性为前提,进行界面风格设计,将所有界面设计组合成为一套完整的可模拟的产品原型。对于产品的重点结构部分(如导航界面、菜单界面）需添加额外说

7、明，帮助相关人员更好地理解产品。此阶段产出物:产品高保真原型界面图形设计文档2.2.5第五阶段:详细设计阶段完善设计细节、交互文本和信息设计.对界面控件、窗口的属性和行为进行标准化定义，梳理完整的交互逻辑，用状态迁移图或伪代码形式表示。以界面中所有节点和元素为单位，按照标准格式进行分解，保证使用灵活性。把产品中所有的交互文本整理成文档，为后续开发工作服务。跟踪进入开发阶段，负责为研发工程师解释设计方案、问题修改，并不断对使用文档进行完善。此阶段产出物:格式化的图形界面文件产品设计使用文档3调研方法卡片分类法(Card sorting）是一种规划和设计互联网产品或者软件产品的信息构架的方法。这种

8、方法也常常被应用到用户研究的过程中，用来比对网站设计者与使用者在对网站资讯分类上的认知差异，作为调整架构的信息依据。情境访谈（Contextual Interviews）:是指通过访员和受访人面对面地交谈来了解受访人的心理和行为的心理学基本研究方法.因研究问题的性质、目的或对象的不同,访谈法具有不同的形式。根据访谈进程的标准化程度，可将它分为结构型访谈和非结构型访谈.访谈法运用面广，能够简单而迅速地收集多方面的工作分析资料，因而深受人们的青睐。焦点小组(Focus Groups):是就某一产品、服务、概念、广告和设计，而通过询问和面谈的方式采访一个群体以获取其观点和评价.焦点小组的成员往往经过

9、实验者选择而定，并保证在实验过程中被试方能够充分分享其意见和主张.通过这一过程,更了解用户的理解、想法、态度和想要什么.启发式评估(Heuristic Evaluation)：可用性的检查方法，让一些行内专家对网站产品进行指导.大体上来说,仅让一个专家来做启发式评估是困难的.因为单独一个人永远也不可能找出界面中的所有可用性问题。幸运的是，从许多不同的项目得出的经验来看，不同的人会发现不同的可用性问题。因此，通过多个评估者，可能大大提高启发式评估的效果.单独访谈(Individual Interviews)：一对一的用户讨论，让你了解某个用户是如何工作，使你知道用户的感受,想要什么和他的经历。平

10、行设计（Parallel Design）：对于那些有多种方法可供选择的设计采用两到四个开发团队同时进行设计的方案,目的是在确定一个继续进行开发的方案之前比较和评估不同的想法.因为这个方法的目标是产生尽可能多的不同方法,所以每个设计小组必须独立工作，在他们生成设计草案并提交到设计工作室之前不允许与其他小组进行讨论。最终的设计可能是设计方案之一或吸取各个方案的优点而进行的组合.典型用户 。（Personas）：构建一个虚构的人来代表大部分用户，设计团队围绕这个虚拟人物设计开发产品。依据目标及用户条件，可有多种组合构建典型用户，方便规划者用来分析并设定其针对不同用户类型所开展的策略。简单的用户条件可

11、能仅具有年纪，职业和一段基本叙述，复杂者可能具有出生地，性格，喜好，渴望,习惯行为动作等具体描绘。制作原型（Prototyping):产品原型简单的说就是产品设计成形之前的一个简单框架,对网站来讲,就是将页面模块、元素进行粗放式的排版和布局，深入一些，还会加入一些交互性的元素,使其更加具体、形象和生动。利用简单网站(产品）原型进行相关的小规模测试,从而避免因开发过久、到后期才发现问题而造成的较高成本。问卷调查（Surveys）：是由一连串准备好的小问题组成,利用网页或纸张等载体，对用户进行发放填写,从而收集用户对产品的反馈意见、感受、反应及对知识的认识等。问卷调查是非常常见的一种调研方法，可以

12、在很短的时间，收集大样本的数据，以一个标准问题例表，顺序收取答案数据，日后作类比统计分析。但问卷调查其内容不可能得到跟百分之百真确的事实，尤其是当涉及个人隐私的时候。任务分析（Task Analysis)：通过任务分析了解用户使用网站(产品)时的目标和操作方式、习惯，以便于在实际测试中获得更好的针对性。可用性测试(Usability Testing):是一项通过用户的使用来评估产品的技术,请用户来试用目标产品，有任务性的完成测试，从而得到所想要的结果.可用性测试让用户使用产品（服务)的设计原型或者成品，通过观察，记录和分析用户的行为和感受，以改善产品（服务)可用性的一系列方法。它适用于产品(服

13、务）前期设计开发，中期改进和后期维护完善的各个阶段，是用户中心设计的思想的重要体现。用例（Use Cases）：描述某个用户使用产品时的情况，包括目标和行动，是一种产品与用户请求的描述，是一种通过用户的使用场景来获取需求的技术.每个用例提供了一个或多个场景，该场景说明了系统是如何同最终用户或其它系统交互的，也就是谁可以用系统做什么，从而获得一个明确的业务目标。编写用例时要避免使用技术术语，而应该用最终用户或者领域专家的语言.用例一般是由软件开发者和最终用户共同创作的.优化处理（Writing)：对你的网站（产品）进行内容上的整理、优化。让用户更清晰容易的了解你所表达的内容。4项目方案建议书4.

14、1项目背景在中国互联网发展过程中，新网民的不断增长,让互联网与经济社会深度融合的基础更加坚实.根据中国互联网络信息中心（CNNIC）2016年1月发布的第37次中国互联网络发展状况统计报告显示，截至2015年12月,中国网民规模达6.88亿；其中,中国手机网民规模达6.20亿，较2014年底增加6303万人。网民中使用手机上网人群占比由2014年的85。8提升至90。1 。随着网络环境的日益完善、移动互联网技术的发展,各类移动互联网应用的需求逐渐被激发。从基础的娱乐沟通、信息查询,到商务交易、网络金融，再到教育、医疗、交通等公共服务,移动互联网塑造了全新的社会生活形态，潜移默化的改变着移动网民

15、的日常生活。在手机用户激增的同时，我国近年来智能手机产业也迅猛发展,智能手机用户规模不断扩大。庞大的手机用户基数和持续增长的手机网民数预示手机客户端用户需求潜力巨大。在移动终端方面，相比非智能手机，智能手机为用户提供更好的手机使用体验，同时，智能手机软硬件性能提升如硬件功能更强、存储空间更大等有力提高手机客户端软件的支持能力。智能手机快速发展将刺激手机客户端软件快速发展。不论PC端和移动端之间有着怎样的竞争，移动端的快速发展都是不争的事实，各种客户端的开发和接入已经成为常态。用户对于自己喜欢的品牌和服务，总期待官方能推出更能满足自己需求的客户端，也正是在这种期待和需求之下，催生出越来越多的移动

16、应用。事实上，有移各类动应用分析机构的研究表明，用户每天耗费在手机和平板上的平均时长为158分钟，其中127分钟是耗费在客户端中，而仅有31分钟是花费在浏览网页之上.且不去深究这个数字是否适用于不同的国家和地区,但是总体的趋势大家都看的很明白.用户的需求越来越多，如果开发者和厂商无法为用户提供体验更好的客户端,用户流失是不可避免的。从智能手机到平板电脑,甚至一些相关的智能设备，我们可以明显观察到其中所涉及到的客户端在功能、设计和潜力上的快速增长.用户这边，除了对于用户体验的要求，还需要客户端提供足够足够的影响力，提升关注度，让用户逐步转化为真正意义上的“消费者”。所以，总结一些可以预见的设计趋

17、势对于客户端的产品设计师是有非同寻常的意义的.4.2项目描述 集团目前展示的是一种超前开放姿态,通过资本与数据业务开发企业关联，达到资源整合的目的。拥有丰富资源介入互联网增值服务，无疑将为群龙无首的互联网增值服务企业树立新的行业标杆。拥有庞大的资源体系,诸如：渠道、终端、计费能力、手机用户等等，这些都是促使集团取得更高目标的珍贵资源。本项目是针对2016年集团门户产品进行的升级改版工作。项目基于用户体验的一系列系统方法研究,通过分析用户需求、充分考虑用户应用环境并根据客户使用习惯，得出的用户对项目的需求和定位,为用户打造一个更精美易用、便于理解、交互流畅的网上平台。4.3设计思路 2016年客

18、户端UI设计运营支撑项目包括：“集团统一门户Android版客户端用户体验全流程设计”、“ 集团统一门户客户端（IOS版、Pad版）和WAP厅产品界面设计和最终页面文件”、“ 集团统一门户客户端（Android版、IOS版、Pad版）小版本迭代过程中界面设计和最终页面文件”和“集团统一门户网厅和客户端营销活动界面设计和最终页面文件”四大类内容。在整体的设计过程中各类别、各平台之间在“流程设计”、“交互设计与“原型设计方面具有很多共通要素。考虑到项目这一特性,以及为提高整体工作效率，我们将“敏捷开发这一概念引入到此次项目设计中。 敏捷开发是一种以小组为核心、迭代、循序渐进的开发方法.在敏捷开发中

19、，项目的构建被切分成多个子项目,各个子项目的成果都经过测试，具备集成和可运行的特征。换言之，就是把一个大项目分为多个相互联系,但也可独立运行的小项目，并分别完成，在此过程中开发成果一直处于可共享状态。 敏捷方法很多，包括 Scrum、统一过程（RUP)等多种法,这些方法本质实际上是一样的,敏捷开发小组主要的工作方式可以归纳为：作为一个整体工作； 按短迭代周期工作； 每次迭代交付一些成果; 关注业务优先级； 检查与调整。下面将简要介绍一下，针对2016年客户端UI设计运营支撑项目的项目组分配方法：敏捷小组作为一个整体工作项目取得成功的关键在于，所有项目参与者都把自己看成朝向一个共同目标前进的团队

20、的一员。“扔过去不管”的心理不是属于敏捷开发。一个成功的敏捷开发小组应该具有“我们一起参与其中的思想”， “帮助他人完成目标这个理念是敏捷开发的根本管理文化.当然，尽管强调一个整体，小组中应该有一定的角色分配，各种敏捷开发方法角色的起名方案可能不同，但愿则基本上是一样的。第一个角色是产品所有者，他的主要职责包括：确认小组成员都在追求一个共同的目标前景;确定功能的优先等级，以便总是处理最有价值的功能;作出可以使项目的投入产生良好回报的决定。产品所有者通常是公司的市场部门或者产品管理部门的人员,在开发内部使用的软件的时候,产品所有者可能是用户、用户的上级、分析师，也可能是为项目提供资金的人.敏捷小

21、组按短迭代周期工作 在敏捷项目中，总体上并没有什么上游阶段、下游阶段，你可以根据需要定义开发过程在初始阶段可以有一个简短的分析、建模、设计，但只要项目真正开始，每次迭代都会做同样的工作（分析、设计、测试。等等）。迭代是受时间框限制的,也就是说即使放弃一些功能，也必须结束迭代。时间框一般很短，大部分是 24周,在 Scrum中采用的是 30个日历天,也就是 4 周。迭代的时间长度一般是固定的。敏捷小组每次迭代交付一些成果 比选择特定迭代长度更重要的，是开发小组在一次迭代中要把一个以上的不太精确的需求声明,经过分析、设计、测试，变成可交付的软件,此方法称之为功能增量。当然并不需要把每次迭代的结果交

22、付给用户,但目标是可以交付，这就意味着每次迭代都会增加一些小功能,但增加的每个功能都要达到发布质量。每次迭代结束的时候让产品达到可交付状态十分重要，但这并不意味着要完成发布的全部工作，因为迭代的结果并不是真正发布产品.敏捷小组关注业务优先级敏捷开发小组从两个方面显示出他们对业务优先级的关注。首先，他们按照产品所有者制定的顺序交付功能，而产品所有者一般会按照组织在项目上的效率最大化的方式来确定优先级，并且把它组织到产品发布中去。要达到这个目的,需要综合考虑开发小组的能力，以及所需功能的优先级来建立发布计划。在编写功能的时候,需要使工能的依赖性最小化。 上述所有敏捷设计的量化原则，都是基于用户体验

23、要素的.具体包括：用户体验信息收集及分析，用户体验概念模型设计及设计规范制定,网站用户体验交互结构设计，用户体验框架层设计及低保真度原型设计及初步评估,用户体验表现层设计、最终开发实现,评估回访及最终呈现效果评估。具体实施步骤为：第一阶段 用户体验信息收集及分析阶段1)企业内部信息-企业商业目标、网站市场定位建立高层概念模型,对交互产品的目标、功能和优势做简单定义；明确网站产品商业目标,战略宏观角度定位建立初衷和运营目标；确定并划分用户群体；设定网站服务的范围；通用设计风格原理罗列；明确技术支持和环境定义；制定人员计划、时间进度表及预算；2）企业外部信息用户需求调研及分析用户信息需求收集；用户

24、需求信息分析；用户信息整合建模;把工作划分为单元任务；通过设定的场景以及参与设计进行需求分析;拟定任务序列流程；确定主要对象并设定界面中可能出现的对象；第二阶段 用户体验概念模型设计及功能设定在用户需求的基础上设定详细的服务内容及功能范围；概念模型进设计：主要的工作流程、功能任务和设计风格简单设定；设定网站整体通用设计风格及统一指导文档；第三阶段 用户体验交互结构原型设计确定交互结构原型设计;利用快速原型开发工具开发出低保真原型；前期评估和可用性测试、改进方案;第四阶段 用户体验框架层设计及低保真度原型设计及初步评估确定导航设计等细化交互环节；确定关键页面，基本交互工具框架结构；由关键页面原型

25、拓展到这个网站系统页面；启发式评估和专家评估；可用性测试；提交原型和详细说明文档；第五阶段 用户体验表现层设计、最终开发实现按标准具体细化实现，用户体验表现层设计；根据后期阶段出现的变化进行一定调整；评估回访 最终呈现效果评估。4.4调研方法针对集团门户用户的特点，调研工作将分为前期调研和后期调研两个阶段.前期阶段的用户调研方法主要包括以下：（1）用户研究（User Research）（2）需求分析（Requirement Analysis)（3）建立信息架构层（Information Abstraction）（4）数据收集（Data Collecting)（5）建立人物角色模型(Person

26、a) （6）方案的模拟（Scenario Simulation）（7）用户数据的跟踪（User DataTracking）（8）数据分析（Data Analysis） （9）用户模型(User Model）（10）循环测试、评估（TestEvaluation Circle)后期阶段的用户调研方法主要包括以下：（11）交互设计（Interaction Design）（12）用户模型呈现（User Model Understanding）（13）用户习惯的设置（UserBehavior Settings）（14）逻辑的制定（Logic Establishment)（15）功能与架构的设计（Func

27、tion Design）（16）需求技术文档撰写（Technique Documents）（17）设计提议等（Design Proposal）4.5执行方案4.5.1用户调研的前期阶段用户研究先从受众用户群体特点分析开始,使用卡片分类法将用户行为及特性进行分类和对比，接下来组织焦点小组进行用户访谈或用户测试.测试的方法可跟据不同产品使用不同的方法，要主有:观察法、影随法、日志分析法等。在测试阶段可以使用低保真原型，也可以使用高保真原型。接下来进行专家启发式评估，最后撰写研究成果报告。4.5.2用户需求分析阶段的输出物主要有：用户特征的研究分析报告，市场上成功产品特性及分析（ 竞品分析 ）。4.

28、5.3产品的可用性测试阶段输出交付物主要有：撰写用户测试问卷、设置阶段性目标测试任务、用户访谈心理报告等.4.5.4功能定义和信息架构阶段的输出物主要有： 产品思维脑图、产品结构功能框架图、交互设计结构文档、设计任务流程、产品需求文档等.4.5.5交互设计阶段的输出物主要为:低保真原型设计界面、高保真原型设计界面、交互文档规范。基于产品的信息架构和交互逻辑，低保真的原型将会被制作提供用于内部评估和外部测试，高保真原型用于技术研发及功能测试致产品上线正式使用.交互文档规范撰写主要包括：导航架构的设计、功能及产品要素、反馈、引导、任务中止、交互设计原则等范畴。4.5.6制作交互原型之一的软件Axu

29、re，在交互文档中主要涉及的内容有：（1）自定义控件组（2）交互事件命令（3）任意条件满足时执行交互事件（4）同时满足几项条件时执行交互事件 （5）下拉列表为某值时执行交互事件（6）选项被选中时执行交互事件（7）设置输入框等诸多组件的文本内容（8）设置下拉列表和列表框为某个值（9）给一个变量赋值并在文本中显示出来（10）Axure中变量的介绍和管理入口（11）如果变量等于某一数值，则执行某交互事件（12）设置单选和复选按钮为选中状态4.5.7UI视觉界面设计完成信息交互设计及低保真原型后，通过技术评审接下来进行图形用户界面的设计，包括界面风格、似物化或平板化,图标、共公元素的确定,设计环节的顺

30、序分别为:（1）页面风格定位（2）页面布局架构（3）功能信息的整理 （4）图标、图形的设计（5）演示设计（6）审查、测试、评估 在界面设计的同时，除了完成功能和任务的实现，我们还会考虑到目前设计流行的趋势,如:跨平台设计、滚动视差、拟物化设计等，另外还应考虑到图标的情感化设计,阅读类的产品要考虑为用户而设计的良好的阅读体验.4.5.8用户任务测试阶段概述产品原型及设计稿完成后就可以招募用户进行产品可行性任务测试了。根据用户的反馈意见和测试过程，发现产品问题并修正。如果发现后续用户需求，则进一步考虑产品更新等功能点。测试阶段的主要交付物为：制作低保真或高保真原型、撰写用户任务测试调查问卷、招募测

31、试用户、进行用户任务测试 、撰写产品任务测试报告 、优化完善和后续支持。可用性测试划分独立空间，建立专属环境，邀请真实用户或潜在用户使用产品或设计原型,对其在使用过程中的行为进行观察、记录、测量和访谈，进而了解用户对产品的要求和需要，并以此作为改进产品设计的出发点、提高产品的可用性。可用性测试根据测试地点可分为实验室测试和现场测试，包括三方面的内容：可用性测试前期准备可用性测试可用性测试后数据整理参与测试人员包括：-产品经理 -用户体验设计师-交互设计师 -视觉设计师-受邀用户由产品经理提出需求并填写产品可用性测试需求表,提交给负责该项目的用户体验设计师寻求意见,反馈时间为1天.由产品经理和需求方进行会议讨论，明确需求各项内容，会议时间1天.由用户体验设计师和需求方共同制订测试计划，用时2天。由产品经理审核测试计划，用时1天。由用户体验设计师准备测试用问卷、访谈提纲等文档、测试环境及邀请用户，由产品经理准备原型，用时3天。受邀用户到场，实验正式开始,由用户体验设计师进行可用性测试，