在创业公司工作的这几年中,很多工作都要涉及到视觉设计,但一般公司不会那么细,在我脑海中分为三种:
1.平面设计师: 限于2d广告设计,比如名片、海报、宣传画册、单页等等,做出来的UI可执行性很低,很多和原生系统相斥,工程师会很头疼。无规范可言。
2.UI设计师:限于软件UI的设计,一般的工程师拿到设计文件执行起来没有很大难度,但是做出来的平面没有创意,从技术上来看一般,想要让人眼前一亮或是加上营销的想法很难。无规范可言。
3.视觉设计师:有很好的审美观念,有平面设计大作,针对不同场所,不同功能的设计有自己独特的见解与经验;有3D设计经验,一般都有家居、建筑设计经验;对于不同系统的软件UI与UE都有研究,并针对不同功能的应用规划其功能流程让UI的不仅美观并且易于上手。 对于每一个公司或项目群都有其规范文档。
然而我就遇到过第一种,请不起第二种和第三种,平面压力很大导致辞职的较多,交接工作时我是来一个又要和他重新说一遍,一直觉得应该出个文档,看完之后能够马上上手的那种,现在才知道原来是叫做视觉设计规范文档
前言:
注明使用版本、设计操作系统、与开发时要说明的
作用:
1.指导分工协作
2.避免重复工作
3.视觉统一 ,形象加分
4.让思路更加清晰,工作更加高效
协调人员:
视觉设计师、平面设计师、交互设计师、产品经理、程序员、市场运营人员、前端开发、软件测试
内容:
色调:确认主题色、组件色
字号:根据实际用途与场景适配,以实际效果良好为准,确定一个适合值即可。
通用组件样式:将整个UI设计中能够通用的组件统一风格,比如:对话框,提示框,确认信息框等
不同状态下组件样式:不同状态下的组件样式一般为相同的,针对使用场景以实际效果为准
间距:框架中的间距、元素与元素之间的间距
图片规范:不同页面、位置、图片的尺寸、颜色等等参数要求
不同适用版本:平板、手机、电脑等不同版本
整体框架修饰:将整体框架固定,作为模板往里填,有利于掌控整体风格
不同级别子页面风格:不同子界面的设计可以完全放给下个设计师,有需要也可以进行限制
示例:
第一步确定清晰的流程与思路
流程图第二步:
适配尺寸:android、ios不同系统、不同设备 表格或结构图表现
可参考 android尺寸等规范参考
要注意的是:
anrdoid 要切图,将图标和图片元素切为hdpi、xhdpi、xxhdpi三套,放入三个文件夹中打包
ios要切图,将图标和图片元素切为@2x,@3x两套,放入两个文件夹中打包
第三步:
确认主题色与元素色
在appstyle系统统一默认配色中设置为主题色
在其他元素比如:分割线颜色、卡片阴影颜色深度、重要颜色文字深度等等
第四步:
文字
苹果常用字体点这里!
不同地方、用途中文字的字体、字号
第五步:
图标
统一的尺寸,特殊用途的注明、不同状态的请附加
第六步:
按钮
按钮的样式与不同状态的样式、尺寸
悬浮按钮56dp,普通按钮48dp
第七步:
公共控件
比如对话框
第八步:
模块
确定某个模块的风格
列表模块第九步:
布局
确定大致布局风格
一次性不能将规范全都覆盖到位,可以不断的添加并注明添加人和时间,经过设计部审核才能生效发布。
网友评论