ui设计的流程

从事UI工作有一段时间了，对UI设计工作有了一定的了解，通过最近软件界面UI设计

来说说对软件UI设计之浅见

界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化优

化规范化的设计。具体包括软件启动封面设计，软件框架设计，按钮设计，面板设计，菜单

设计，标签设计，图标设计，滚动条及状态栏设计，安装过程设计，包装及商品化 在设计的过程中有较多注意的关键问题，以下列出几点:

软件启动封面设计

应使软件启动封面最终为高清晰度的图像，如软件启动封面需在不同的平台、操作系

统上使用将考虑转换不同的格式，并且对选用的色彩不宜超过256色，最好为216色安全

色。软件启动封面大小多为主流显示器分辨率的1/6大。如果是系列软件将考虑整体设计的

统一和延续性。在上面应该醒目的标注制作或支持的公司标志、产品商标，软件名称，版本

号，网址，版权声明，序列号等信息，以树立软件形象，方便使用者或购买者在软件启动的时候得到提示。插图宜使用具有独立版权的，象征性强的，识别性高的，视觉传达效果好的

图形，若使用摄影也应该进行数位处理，以形成该软件的个性化特征

软件框架设计 软件的框架设计就复杂得多，因为涉及软件的使用功能，应该对该软件产品的程序和

使用比较了解，这就需要设计师有一定的软件跟进经验，能够快速的学习软件产品，并且在

和软件产品的程序开发员及程序使用对象进行共同沟通，以设计出友好的，独特的，符合程

序开发原则的软件框架。软件框架设计应该简洁明快，尽量少用无谓的装饰，应该考虑节省

屏幕空间，各种分辨率的大小，缩放时的状态和原则，并且为将来设计的按钮，菜单，标签，滚动条及状态栏预留位置。设计中将整体色彩组合进行合理搭配，将软件商标放在显著位置，

主菜单应放在左边或上边，滚动条放在右边，状态栏放在下边，以符合视觉流程和用户使用

心理

软件按钮设计 软件按钮设计应该具有交互性，即应该有3到6种状态效果：点击时状态；鼠标放在上

面但未点击的状态；点击前鼠标未放在上面时的状态；点击后鼠标未放在上面时的状态；不

UI设计工作流程

很多没有在正规的大公司工作过的设计师同学问过我面试时如果面试官问项目开发的工作流程是什么？其实，我觉得每个公司可能有自己的工作流程，有些些公司可能需要设计师从前期立项到中间开发到后期产品测试和项目上线的跟进要全程参与而有些公司可能只需要设计师在产品研发阶段进行参与，但不管那种方式，我觉得设计师有必要知道一个产品从立项到完成的所有步骤。现在我大概介绍一种工作流程给大家。

一、产品设计阶段

首先在一个项目开始之前会是立项，领导或者相关部门提出想法给产品经理，产品经理拿到项目之后，会对整个项目进行分析，这中间产品经理需要做很多工作。

1、 首先产品经理配合市场部门进行市场分析，来搞清楚目标市场和产品定位，如果时间充足的话，尽可能的也要做用户调研来确定产品的用户需求的挖掘和分析。

2、竞品分析也是产品经理和设计师都要做的功课。

3、这些前期工作完成之后，剩下的要做原型设计，预算产品周期，疏通整个产品流程，出原型图交给交互设计师

当然产品经理在做这些工作时是要保持时刻跟其他部门的同事密切共同的，例如产品的市场定位需要找市场部门的同事进行沟通，产品设计规范，界面布局等需要找UI设计师来沟通。而开发环境和项目周期可能要找到技术开发的同事来进行协调。有些公司还有专门的交互设计师，需要产品经理在前期制作原型图和交互设计师充分配合完成交互说明，以方便

后期的视觉设计和技术开发。

二、UI视觉设计

产品原型（包括前期交互稿）完成之后需要交付给UI设计师进行视觉设计，这里指的UI设计其实严格来说是属于GUI，因为UI的本意为user interface（用户界面）涵盖了交互设计，用户体验设计和视觉设计。而交互设计和用户体验是在产品开始之时就已经同时展开的，所以这里说的设计通常指的GUI界面视觉设计。

1、在UI设计师开始之前，要充分了解产品定位，通过目标用户的喜好风格分析开确定视觉设计的大概调性。

页面组的工作流程：

需求 → 设计方案 → 确认 → 页面制作 → 程序开发 →测试

一．设计需求：（叶面设计前需提交给UI页面组）

1. 系统设计需求文档。

2. 系统结构文档（例如栏目划分，目录结构，导航方式等）。

3. 较复杂页面表现形式草图（手绘或相关软件绘制）。

4. 较复杂业务流程文档。

5. 如有可能提供参考和示例站点。

6. 与程序员沟通部分页面实现方法。

二．页面制作需求：

1. 经过确认的美术设计的方案图。

7. 系统设计需求文档等，较复杂业务流程文档。

2. 所需页面脚本需求，与程序员沟通部分页面实现方法。

三．提交给程序的内容包括：

1. 静态模板页：首页以及二级页面htm文件 、css样式单、以及相关页面JavaScript代码，可用于直接嵌入代码。栏目的命名规则与程序协商，建立统一的规范。

2. 所有统一的按钮图标。

3. 部分容易混淆颜色的色值。

4. 图片统一放在《images》目录下，如果二级栏目内容较多，可在放在二级栏目的《images》下。命名规则：栏目英文名称_在页面位置_编号.gif。

例如sys_top_01.gif

界面测试：（页面组提交给测试组包括：）

1. 经确认的设计方案图。

2. 静态模板页面。以上二项均为便于查看嵌入程序后的叶面情况。

3. 常出现的界面错误：图片错误，页面不美观，布局不合理，与原先设计不符，文字错误，HTML代码错误，页面程序错误。

4. 界面bug测试报告：

附表：

BUG描述 备注

对应模块

错误现象、错误页面

设计样图

重现性 是

错误原因 图片错误/页面不美观/布局不合理/与原先设计不符/文字错误/HTML代码错误/页面程序错误

测试环境 服务器：CPU P4 1.7G 内存256Mb 硬盘40G网卡10/100Mb自适应网卡

win2000 server jdk1.4 tomcat 4.0.6 SQL server 2000

UI设计尺寸规范UI设计规范

GE GROUP system office room 【GEIHUA16H-GEIHUA GEIHUA8Q8-iPhone界面尺寸

设备 分辨率 PPI 状态栏高度 导航栏高度 标签栏高度

iPhone6P、6SP、7P 1242×2208 px 401PPI 60px 132px 146px

iPhone6 - 6S - 7 750×1334 px 326PPI 40px 88px 98px

iPhone5 - 5C - 5S 640×1136 px 326PPI 40px 88px 98px

iPhone4 - 4S 640×960 px 326PPI 40px 88px 98px

iPhone & iPod Touch

第一代、第二代、第三代 320×480 px 163PPI 20px 44px 49px

UI设计规范：IOS、Android系统主流尺寸整理 iPhone图标尺寸：

设备 App Store 程序应用 主屏幕 Spotlight搜索 标签栏 工具栏和导航栏

iPhone6P - 6SP - 7(@3×) 1024×1024

px 180×180

px 114×114

px 87×87 px 75×75

px 66×66 px

iPhone6 - 6S - 7 (@2×) 1024×1024

px 120×120

px 114×114

px 58×58 px 75×75

px 44×44 px

iPhone5 - 5C - 5S (@2×) 1024×1024

px 120×120

px 114×114

px 58×58 px 75×75

px 44×44 px

iPhone4 - 4S (@2×) 1024×1024

px 120×120

px 114×114