UI设计流程和规范-从0到1的UI设计工作方式（ui设计基本流程）

最近带几个学生一起做UI，初学者对于工作流程和设计规范有所疑惑，就整理了自己日常工作方式进行分享，希望对新入门的UI有所帮助

一、获取原型图

从产品经理处获取项目原型图，当获取到原型图后不要盲目的去进行设计，要先分析了解整个项目的功能、特性、用户群体、项目的定位等等，特别是对功能的疑惑处一定要找产品经理沟通，只有做到对项目了然于胸才能做出优秀的设计。

二、竞品分析

当我们对项目的功能、特性、用户群体、项目的定位都有所了解后，还是不能马上进入设计环节。我们需要先对市面上同类型的产品进行分析和对比，包括设计风格、配色、排版、功能样式等等，了解其优劣势，做到取长补短，思考如何让我们的产品更加的完善，这时候我们的脑海里面基本上对自己要设计的东西已经有了一个大概的雏形。

三、设计UI界面

1、界面设计规范

这篇文章内所有的数值均以2倍图为例，使用1倍图的同学请自行除以2。

现在UI设计通常使用的是全面屏的设计规范，全面屏的设计稿更加美观，且做作品集的时候搭配全面屏样机视觉效果也更加突出。通常只设计一套苹果全面屏的设计稿，不需要另外设计安卓端设计稿，安卓端由安卓工程师自行适配。

界面尺寸：

界面：750px1624px

状态栏：750x88px

导航栏：750x88px

菜单栏：750x98px

指示器：750x68px

左右边距：32px或24px

*其中状态栏和指示器不需要进行额外的设计，是系统默认控件，除颜色外不可改变。

常规界面尺寸

常用图标尺寸：

顶部功能：48x48px

导航栏图标

底部菜单栏（有文字）：48x48px

菜单栏图标（有字）

菜底部菜单栏（无文字）：64x64px

菜单栏图标（无字）

文字：

尺寸：36px、32px、28px、24px

常用文字尺寸

颜色：正常（#333333）、辅助（#999999）、未输入提示（#CCCCCC）

常用文字颜色

*利用文字尺寸对比和颜色对比可以得到不错的效果。也可以给文字颜色添加少量的蓝色，让颜色不那么呆板。

2、组件控件系统

组建控件系统可以让我们的设计稿更加的规范，也便于修改，可以极大的提高我们的工作效率。

所有的图标都需要做成控件，方便我们切图。然后就是会重复使用的状态栏、导航栏、菜单栏、指示器、列表、弹框、按钮等控件。

常用控件

除了我们常用的控件以外，颜色、投影等特殊效果、文字大小都可以保存样式，把项目的配色、特殊效果、文字尺寸都保存下来，不同的设计工具有不同的保存方式，大家可以根据自己使用的设计工具进行设置。

3、设计风格

我们需要让项目保持一个统一的设计风格，让项目更加的整体、统一、协调。不同的风格有不同的优势，选对与项目属性相符的设计风格可以让项目更加的出彩。

传统UI风格：

这种风格没找到合适的名称，我个人一般叫它传统风格。这种设计风格使用分割线分割小的模块，用背景色块分割大的模块，特别适合列表信息。虽然给人感觉没有特别强烈的设计感，但简单实用、朴实无华，层级划分清晰明了。

传统UI风格

卡片式风格：

卡片式风格是借用现实世界中卡片的特征和概念，将一个模块或同类型元素放到一个卡片容器类，可以增加内容的独立性，让模块划分关系变得非常的清晰，是现在非常常用的一种设计方式。

常用做法是采用浅灰的背景 白色卡片的方式，卡片都带有一定的圆角，类似于将扑克牌一张张的放在桌子上，桌面是灰色背景，每一张扑克牌就是一个卡片。也不排除暗夜模式的卡片式设计，背景会更暗一些，卡片略亮。

卡片色风格（亮）

卡片式风格（暗）

大标题去线段化：

在传统UI风格的基础上去除背景色块和分割线，单以间距来区分模块和元素，对亲密性的应用有较高的要求。有时候单以间距来区分模块和元素时，可能会导致模块层级不分明，所以会使用将标题加大的形式，让模块与模块之间的区分更加明显。因为去除了分割线，留白就更多，会显得界面更加的干净、清爽。

大标题去线段化

新拟态设计风格：

新拟态是19年底在追波开始出现的一种设计风格，特点是使用统一的光源做出立体的浮雕效果，元素有厚度但没有纹理和材质的轻拟物风。

常规做法是假设一个统一的左上方光源，给元素分别添加一个左上角和右下角的投影，左上角（被光源照射的一侧）投影使用亮色，右下角投影使用暗色，让元素可以浮起来。而在按下或选中状态时则使用两个内阴影，左上角暗色右下角亮色让元素凹下去。需要注意的是界面模块和背景色一般是同一个颜色，所以颜色不能使用纯白或纯黑，否则有一侧的投影就会看不见，通常是使用蓝灰色或深灰色背景。

新拟态风格视觉效果新颖、柔和，对比度低，看得久了会产生一定的视觉疲劳，研发成本也较高，所以现在更多的还是处于概念稿，实际项目中应用较少。可以作为一种练习或部分功能的使用。

新拟态（亮）

新拟态（暗）

四、交付

1、切图

设计稿完成之后我们需要将图标等元素切图导出交付给开发，IOS和安卓需要根据要求导出不同倍数的png格式切图文件。

切图套数

IOS：现在通常是输出2套，以@2x、@3X为后缀，也就是2倍图、3倍图；

Android：现在通常是输出3套，xhdpi（超清，对应IOS的2倍图）、xxhdpi（超超清，对应IOS的3倍图）、xxxhdpi（超超超清），安卓切图不需要将倍数加到切图命名内，而是每种尺寸单独建立一个文件夹。

切图套数

输出格式

png：最常用的切图文件格式，背景无底透明，所以在导出切图文件时需要先去掉背景色（figma将画板填充色隐藏，sketch画板不要勾选“包含于导出项”）；

svg：矢量切图，需要背景无底透明，部分网页端项目可能需要svg格式的切图文件；

bmp：部分硬件机器的项目需要使用的图片格式，需要注意的是bmp无法实现背景透明，如果背景是透明的会自动带上白色，需要切图文件把背景带上一起切，而且figma和sketch等UI设计软件无法直接导出bmp格式，需要先导出为png或jpg格式，再使用ps或其他工具转换一次。

切图命名

只能使用英文、下划线、数字进行命名，不要使用中文和特殊字符。命名方式一般是类别_位置_功能_状态（有些切图没有多种状态则不需要添加状态命名）。

以苹果端举例：如底部菜单栏的首页图标命名则是ico_bottom_home_nor@2x（图标_底部_首页_未选中状态）和ico_bottom_home_sel@2x（图标_底部_首页_选中状态）。

菜单栏图标命名

顶部的搜索图标没有多个状态，命名是ico_nav_search@2x（图标_顶部_搜索）。

导航栏图标命名

类别一般只有3种：图标（icon）、图片（image）、按钮（button），我们通常会简写为ico、img、btn。

图标类别

状态一般只有4种：正常（normal）、按下（press）选中（selected）、禁用（disabled），我们通常会简写为nor、pre、sel、dis。pc端会多一种状态：悬停（hover）。

图标状态

Sketch和figma等UI设计软件可以同时导出多个尺寸的切图文件和前缀/后缀，所以我们只需要设置图标本身的命名如ico_bottom_home_sel，而不需要每个切图都去手动的添加IOS后缀的@2x和@3X，以及安卓的前缀xhdpi等，在导出设置中设置好每个尺寸的文件夹名称和后缀，再统一导出即可。

切图输出

软件内部导出：sketch和figma等UI设计软件可以同时导出多个尺寸的切图文件和前缀/后缀，所以我们只需要设置图标本身的命名如ico_bottom_home_sel，而不需要每个切图都去手动的添加IOS后缀的@2x和@3X，以及安卓的前缀xhdpi等，在导出设置中设置好每个尺寸的文件夹名称和后缀，再统一导出即可。

软件内部导出切图文件

上传第三方：最常用的就是将设计文件上传至蓝湖，研发人员可以在蓝湖上下载自己需要的切图文件，但在上传蓝湖之前需要把设计稿中需要切图的元素设置为切片。

2、标注

和切图文件一起交付给开发的还有设计稿的标注文件，让研发人员可以清楚地知道界面内元素的颜色、尺寸、对齐方式、距离、透明度，文字的字体、字号、行高等。

输出到蓝湖

很多设计文件都可以安装蓝湖插件，再通过插件将设计稿导出到蓝湖，研发人员就可以便捷的查看界面的标注。

软件内部标注

Figma、Mastergo等在线设计软件都可以切换为开发者模式，只需要将研发人员邀请到自己的设计文件所在团队内，研发人就可以查看到界面的标注；

插件导出

有部分公司有一定的保密措施，会禁止设计师使用第三方平台或是联网操作，这种情况设计也无法使用Figma、Mastergo等在线设计软件，只能使用Sketch等客户端，输出标注就需要使用相应的插件，Sketch可以使用Sketch Measure导出HTML格式的标注文件。

五、上线

在项目上线的阶段UI设计需要辅助研发提供上线应用商店需要的项目预览图、启动LOGO，也需要设计补充出APP的启动页、闪屏页等。

1、项目预览页

上线应用商店需要的预览图，通常是使用项目中比较有特色的几个UI界面加以设计。

2、启动LOGO

上线应用商店必须提供的LOGO，手机中启动APP的入口，但不同的应用商店有不同的尺寸，华为、苹果、小米、三星、应用宝等所需要的启动LOGO都有所不同，所以输出多个尺寸。以苹果App Store为例，需要以下尺寸：

启动LOGO输出

3、启动页、引导页

启动页和引导页一般是和UI界面一起设计，不过需要项目上线后才会有其价值，所以可以先设计完项目的界面，在研发开发的过程中再去设计启动页和引导页，只要在项目上线前提供给研发就可以。

六、持续跟进和优化

当一个项目上线后，只能代表我们的现阶段的工作已经全部完成。每个项目上线后都会收集用户反馈，根据用户反馈的信息优化功能和界面设计，通过持续不断的优化、迭代让我们的产品越来越好，这个过程中也需要我们UI设计不断的去进行调整和优化。