UI部规范化作业.docx

UI部规范化作业.docx

《UI部规范化作业.docx》由会员分享，可在线阅读，更多相关《UI部规范化作业.docx（15页珍藏版）》请在冰豆网上搜索。

UI部规范化作业

UI部规范化作业

目的：

·更好的发挥团队之间的协作力量

·更明晰的团队配合

·更有效的工作

规范化作业

古人云：

没有规矩不成方圆。

这句话适合我们公司的团队的现阶段。

目前的问题最主要的原因是没有规范：

不清楚如何有效的配合，如何有效

的作业。

服务客户的过程中的工作节点，同事之间需要配合和负责的工作内容，相互之间的节点都要求清晰。

因此，为减少状况发生，我们需要规范化作业。

1.1UI界面总体设计原则

1、简易性

界面的简洁是要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。

2、用户语言

界面中要使用能反应用户本身的语言，而不是游戏设计者的语言。

3、记忆负担最小化

人脑不是电脑，在设计界面时必须要考虑人类大脑处理信息的限度。

人类的短期记忆极不稳定、有限，24小时内存在25%的遗忘率。

所以对用户来说，浏览信息要比记忆更容易。

4、一致性

是每一个优秀界面都具备的特点。

界面的结构必须清晰且一致，风格必须与产品内容相一致。

5、清楚

在视觉效果上便于理解和使用。

6、用户的熟悉程度

用户可通过已掌握的知识来使用界面，但不应超出一般常识。

7、从用户的观点考虑

想用户所想，做用户所做。

用户总是按照他们自己的方法理解和使用。

通过比较两个不同世界（真实与虚拟）的事物，完成更好的设计。

如：

书籍对比竹简。

8、排列

一个有序的界面能让用户轻松的使用。

9、安全性

用户能自由的作出选择，且所有选择都是可逆的。

在用户作出危险的选择时有信息介入系统的提示。

10、灵活性

简单来说就是要让用户方便的使用，但不同于上述。

即互动多重性，不局限于单一的工具（包括鼠标、键盘或手柄）。

11、人性化

高效率和用户满意度是人性化的体现。

应具备专家级和初级玩家系统，即用户可依据自己的习惯定制界面，并能保存设置。

一、注意事项

1．注意屏幕元素布局平衡，功能区域划分合理。

避免控件与数据的过分集中而导致的视觉疲劳和判断错误。

2．功能明确，安排合理，让用户通过最少的判断和最少的操作达到目的。

3．保持界面的一致性原则。

一致性既包括使用统一的界面元素、标准的控件，也包括使用相同的信息表现方法：

如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。

4．窗体大小与长宽比例合理，空间充分利用，避免过大的灰色空白区域，也不要过于局促。

5．主要功能和点击频率高的按钮应排放在醒目的位置。

6．界面关闭或退出按钮应排放在不易点击的位置，避免因错误点击而引起的退出

7．屏蔽与当前操作无关的按钮。

8．按钮文字简洁明了，尽量控制在4字以内。

二．终端开发图片格式规范

1．原则上图片都使用png格式。

2．动画则使用多张png格式图片，使用程序进行轮换显示。

3．对于需要进行适配的图片（要进行拉伸的）。

提供一张最小尺寸的图片，由开发人员制作成png格式的。

4．对于同一个区域在不同状态下有不同显示的情况下，需要提供不同状态下，大小一致的多个图片，图片数由状态数来决定（例如按钮的几种状态）。

5．对于比较大的图片，为了减少图片的文件大小，可以使用jpg或者其他格式，这个需要和开发人员确认。

三.移动设备的UI界面尺寸

1、IOS部分

>>>尺寸及分辨率

iPhone界面尺寸：

320x480、640x960、640x1136

iPad界面尺寸：

1024x768、2048x1536

（单位：

像素一般用640x960或者640x1136的尺寸设计）

例：

640x960的尺寸设计，在这个尺寸下这些元素的尺寸：

状态栏：

就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：

40px

导航栏：

显示当前界面的名称，包含相应的功能或者页面间跳转的按钮，其高度为：

88px

主菜单栏：

类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：

98px

内容区域：

展示应用提供的相应内容，整个应用中布局变更最为频繁的，其高度为：

734px

iPhone5/5s的640x11136的尺寸，中间的内容区域高度增加到910px

>>>界面基本组成元素

iPhone/iPodTouch第一代、第二代、第三代

iPhone4/iPhone4s

iPhone5/iPhone5C/iPhone5s

>>>字体大小

iPhone上的字体英文为：

HelveticaNeue

中文：

Mac下用的是黑体-简

Win：

华文黑体。

2、Android部分

>>>尺寸及分辨率

Android界面尺寸：

480x800、720x1280、1080x1920（单位：

像素）

Android比iPhone的尺寸多了很多套，建议取用720x1280这个尺寸，这个尺寸720x1280中显示完美，在1080x1920中看起来也比较清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。

>>>界面基本组成元素

Android的APP界面和iPhone的基本相同：

状态栏，导航栏、导航栏、主菜单栏以及中间的内容区域。

Android例720x1280的尺寸设计

状态栏高度为：

50px

导航栏高度为：

96px

主菜单栏高度为：

96px

内容区域高度为：

1038px（1280-50-96-96=1038）

Android最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是和菜单栏一样的：

96px

>>>字体大小

Android上的字体为：

Droidsansfallback

1.2制图及命名规范

1、单个设计作业规范：

建议使用A4大小制作方案，设计文件左侧页眉有公司标志和名称。

（统一的尺寸和排列方式）

2、方案设计作业规范：

整套方案，必须要以PPT形式提交，做成可演示版的方案。

（目录是否需要根据实际项目多少而定）

3、文件夹命名规范：

4、设计文件命名规范：

设计文件名称+制作日期

5、定稿文件命名规范：

分为预览文件（150ppi）、链接图片、已转曲文件、源文件（未转曲）

1.3项目周期预估

考虑到实现界面设计的技术难度,人员水平,过去的经验值,以及项目实施过程中的未知因素，进行以下时间预估：

1、UI界面设计时间预估

方案初期根据项目复杂程度，分类为两种（难、易）

人数

设计图

初稿周期

修改及版式定稿

项目总周期

UI部总人数

易

1人

5—6张

1周（6日）

2日

1月（30日）

3人

难

1人

7张及以上

10日

3日

45日

3人

（注：

在UI设计初期，部门内所有成员在接受设计需要后，进行讨论每个人出1种方案，并在初稿周期内制作主要界面5-6张，因部门人数共3人，因此共计3种方案，筛选后确定其中一种，原作者进行修改，按照最终既定的版本，全体成员进行模板嵌套式界面制作，项目总周期为1个月。

）

2、标志LOGO设计时间预估

人数

LOGO方案

初稿周期

修改及版式定稿

项目总周期

UI部总人数

易

1人

2种

3日

2日

1周（6日）

3人

难

1人

3种及以上

4日

3日

8日

3人

（注：

在LOGO设计初期，部门内所有成员在接受设计需要后，进行讨论每个人出2种方案，并在初稿周期内制作LOGO设计图2-4张，因部门人数共3人，因此共计3种方案，筛选后确定其中一种，原作者进行修改，其余成员完成本部门其它工作。

）

3、VI设计时间预估（LOGO已定后的VI详情页面）

人数

设计图

初稿周期

修改及版式定稿

项目总周期

UI部总人数

易

1人

3-6张

2日

2日

1周（6日）

3人

难

1人

7张及以上

3日

3日

2周（12日）

3人

（注：

在VI设计初期，部门内所有成员在接受设计需要后，进行讨论每个人出1种方案，并在初稿周期内制作设计图3-6张，因部门人数共3人，因此共计3种方案，筛选后确定其中一种，原作者进行修改，其余成员完成本部门其它工作。

）

4、网站设计时间预估

人数

设计图

初稿周期

修改及版式定稿

项目总周期

UI部总人数

易

1人

3-5张

4日

2日

1月（30日）

3人

难

1人

7张及以上

一周（6日）

3日

45日

3人

（注：

在网站设计初期，部门内所有成员在接受设计需要后，进行讨论每个人出1种方案，并在初稿周期内制作主要页面5张，因部门人数共3人，因此共计3种方案，筛选后确定其中一种，原作者进行修改，按照最终既定的版本，全体成员进行模板嵌套式页面制作，项目总周期为1个月。

）

5、画册设计时间预估

人数

设计图

初稿周期

修改及版式定稿

项目总周期

UI部总人数

易

1人

4-6张

2日

1日

1周（6日）

3人

难

1人

8张及以上

1周（6日）

2日

1月（30日）

3人

（注：

在画册设计初期，部门内所有成员在接受设计需要后，进行讨论每个人出1种方案，并在初稿周期内制作主要页面4-6张（包括封面封底），因部门人数共3人，因此共计3种方案，筛选后确定其中一种，原作者进行修改，按照最终既定的版本，全体成员进行模板嵌套式画册内页制作，项目总周期为1周。

）

6、海报/单页设计时间预估

人数

设计图

初稿周期

修改及版式定稿

项目总周期

UI部总人数

海报

1

1张

2日

1日

3日

3

（注：

在海报/单页设计初期，部门内所有成员在接受设计需要后，进行讨论每个人出1种方案，并在初稿周期内制作设计图1张，因部门人数共3人，因此共计3种方案，筛选后确定其中一种，原作者进行修改，其余成员完成本部门其它工作。

）

5、微信服务号维护时间预估

微信按服务号周期定时更新一次，更新内容根据客户的活动的具体情况而定，若客户有活动，当日服务号内容可与客户保持一致，若客户无活动时期，服务号内容需要编写文字内容、设计图等工作，可由各部门员工轮流完成。

（设计时间均为提前一日编辑好次日所要发布的内容。

）

1.4设计项目流程规范

1、公司规划设计操作流程

1、项目承接

2、工作计划

3、资料调研及汇编

5、头脑风暴讨论及任务制定

6、初步方案

7、 前期汇报

8、方案调整

9、完成成果

10、设计总结和归档

1.项目承接

目的：

了解规划设计市场，针对公司技术及特长，最大限度的储备设计项目，选择优良项目。

提高公司设计市场占有能力，提升公司设计品质和信誉。

建立市场网络，保持长久联系。

形成多方共赢的良好结局。

内容：

掌握市场信息、摸清项目规模、进行商务谈判、确定设计时间、安排设计计划。

程序：

a、接洽：

经营部门多渠道获得设计市场项目情况，制定设计项目清单，建立公司项目储备；

b、汇报：

定期向公司汇报项目情况（包括：

项目规模、设计阶段、设计周期、可能合同金额、业主资金情况、项目风险分析等）；

c、决策：

公司批准后，与客户沟通，深入了解项目情况和业主设计意图；

d、制定项目初步工作大纲和设计要点，项目工作时间表，项目经费报价；

e、甲、乙双方对项目发展、设计要求、涉及经费、设计时间认可后，签订合同。

责任人及职责：

责任人：

公司经理及经营部经理人；

责任人职责：

保证设计项目可行、资金可靠，确保公司设计项目充足，任务饱满。

所有承接的项目及签订的设计合同必须以公司利益为第一位，不得以任何方式和理由损失公司形象，降低公司利益。

自我对项目运作进行总结，总结包括：

项目接洽时间、次数、商业谈判的焦点和困难点、经验教训和指导意义；公司办公会对项目运作、时间、资金保障等工作评价。

2.工作计划

目的：

按项目情况及具体要求，制度项目整体设计时间，控制设计进度、掌握设计进程时间、合理分配人员、提高设计效率；

内容：

项目名称、设计周期、合同鉴定情况、项目负责人、技术负责人、项目组成人员、开始工作时间，现场调研起始时间、头脑风暴时间、现场经费预算、资料搜集，整理时间、方案初稿时间（重要时间节点）、内部讨论及定案时间、初期成果完成及汇报时间、成果编制及成果汇报时间（重要时间节点）、完成成果及交付成果时间（项目效益及控制时间节点）。

程序：

首先，项目组了解项目情况，根据项目内容和合同时间，项目负责人编制《项目设计工作计划》后，经项目组讨论确定后，制定设计计划及任务分配。

其次，公司生产负责或生产计划部门按合同等规定审查，签批同意后交项目组执行；

最后，项目组按签批的《项目设计工作计划》进行项目设计操作，各个时间节点，项目负责人要按《项目设计工作计划》进度向公司主管进行书面汇报，不能按工作进度完成或调整工作进度的，要有书面说明原因、修改意见和可能造成的后果以及补救措施，经项目负责人同意后，进行修改原工作计划。

责任人及职责：

责任人：

项目负责人；

负责人职责：

负责编写并负责执行。

项目负责人进行项目进度、项目组人员组织，阶段成果设计深度控制，汇报和审评的沟通和时间安排。

外协项目的各项协调和沟通，进度控制。

3、调研及汇编

目的：

1、现状调研：

掌握项目第一手资料，掌握客户对设计的要求和想法，熟悉设计规范和常规做法，初步形成设计技术想法和思路。

2、背景资料调研：

同类项目技术发展情况，前沿技术、科技的利用，案例解读和对我们项目设计指导意义。

3、汇编：

形成系统的资料，为项目设计提供有力的数据支持和案例分析依据，为项目设计创新和顺利通过提供保障。

内容：

背景资料调研内容：

根据项目情况，需要对一些项目进行考察调研，调研项目规模，运行情况，核心创意，收益分析，地理位置，项目设计经验、教训和可借鉴的先进技术、理念和方法。

资料汇编内容：

完整的规划现状资料目录及汇编。

程序：

首先，项目组编写调研提纲

提纲主要内容：

1、项目名称、基本情况等；

2、项目设计阶段；

3、项目调研所需时间、条件和必要的工具；

4、项目调研需要的文件、表格；

5、项目设计阶段（详细设计规划、设计概念规划等）；

6、项目完成的具体时间；

7、项目设计类型；

8、项目上一级设计文本、图纸及相关的批复文件；

9、本次调研目的

10、需要的文字资料内容、目录及项目人员分工；

责任人及职责：

负责人：

项目负责人（技术负责人）；

责任人职责：

（1）调研准备，人员分工和时间把握，分析图的目录、要求和作用；

（2）负责现场调研人员工作分工及资料整理、汇编，形成项目设计资料目录的验收和满足不了项目要求的资料补充、修改；

（3）最终资料要满足项目设计所需资料的要求，满足项目设计规范等要求。

4、头脑风暴

目的：

针对项目内容及已掌握的项目情况，利用公司人才资源和与公司有关系的社会技术资源，对项目进行广泛讨论和点子收集，开拓项目设计人员视野，形成高水平设计路线和设计起点。

内容：

项目组介绍项目情况及对项目的解读，进行项目头脑风暴的会议准备，包括：

项目情况，设计内容、要求，基本思路；

与会人员讨论主要包括：

设计概念、定位、规模、设计亮点、核心问题和解决方法；头脑风暴会议可以是任何形式，人人发言，不受约束，没有责任，不作结论，但要有记录和整理，供项目组形成设计方案参考。

负责人及职责：

负责人：

公司技术部全体员工

负责人职责：

负责会议参加人员、时间，地点的确定，负责会议启发和主题方向的把握及时间的控制；确定会议记录人及头脑风暴的整理。

5、初步方案

目的：

好的设计是从想法到纸上，好的方案开始于方案设计的最初设计阶段，初步方案决定着项目发展成败。

落实到纸上的才可指导其可行性，多方案选优是确定初步方案的目的，为客户提供初步汇报也是初步方案的目的；

内容：

按技术路线要求，将项目分析所需要的文字、数字和图纸内容编辑，整理完成，应达到成果要求；

根据项目的情况初步方案，设计进度应达到项目该完成工作量的30%以上。

 最后，形成完整、科学和可行的汇报成果。

负责人及职责：

负责人：

项目负责人

负责人职责：

方案编制，多方案技术和发展方向的把握，方案人员组织，掌握设计进度、深度，把握时间节点，控制项目经费，提高和促进项目设计效率。

6、前期汇报

目的：

通过向客户、相关部门负责人和领导进行阶段成果汇报，获得客户对方案设计的认可和意见，获取客户、相关部门负责人和领导的意见，行程书面修改意见。

内容：

项目组编制的汇报方案：

以PPT文件为主要汇报方式。

汇报人要有充分准备，控制汇报时间和内容，保证核心不丢，时间不超，主题突出，有理有据。

负责人及职责：

负责人：

项目负责人（项目技术负责人）。

负责人职责：

负责设计方案内容和前期设计进度的汇报。

7、方案调整

目的：

根据前期汇报会议与沟通，对项目的再次解读及新的概念和理念的产生，项目组组织调整、深化、补充和完善设计方案，提高项目设计质量，满足要求，形成科学合理的设计汇报、审批成果。

内容：

对会议纪要或修改意见和建议的解读：

项目负责人或技术负责人组织项目成员对项目会议纪要进行深入解读，理解，按其要求对方案调整和修改，满足会议纪要要求的同时，对设计工作进行进一步深化、提高。

为设计方案的确定与最后设计成果准备更完善，更准确的中间成果或直接制作设计成果；

完成项目设计整体工作量的40%以上；

8、方案确定

目的：

根据各方（经理、负责人及公司）意见，公司技术总工及项目组针对前段项目设计的多方案，进行比选，经广泛协商研究，确定一个中选方案，在此方案基础上项目组进行项目设计深化、完善，相应的专业设计和汇报成果的编制。

内容：

根据汇报形式和要求编制相应的汇报文件和汇报资料。

确定方案，确定版式设计制作的内容，文案内容的最终确定。

负责人及职责：

负责人：

项目负责人

组织项目组人员，安排设计时间和深度，确保项目设计按时、按质完成。

完成项目设计整体工作量的60%以上

9、完成成果

目的：

完成设计成果

内容：

完成完整的设计文本、设计图的成果。

程序：

履行设计文字、设计图的复查。

负责人及职责：

执行人：

项目负责人和技术负责人；

负责人职责：

分配设计任务，设计成果完成时间，质量和数量。

完成项目设计整体工作量的100%。

10、项目总结和归档

目的：

为使我公司设计水平和人员设计素养不断提高，项目设计能力和项目管理能力不断加强，同时保证公司技术资料的完整和后期技术服务的可查，保证项目能够不断拓展。

建立公司技术档案也是公司正常发展和持续发展的必要。

内容：

每个设计项目成果完成后都要进行项目技术总结和管理总结（书面的），总结以总结问题和经验为主，突出的设计技术、设计特点和优点也可总结。

并与项目完整的资料交公司档案管理人员备案。