美文网首页从小白到产品经理
视觉设计(APP UI)规范文档怎么写?

视觉设计(APP UI)规范文档怎么写?

作者: switch_王思维 | 来源:发表于2017-10-19 16:23 被阅读0次

    在创业公司工作的这几年中,很多工作都要涉及到视觉设计,但一般公司不会那么细,在我脑海中分为三种:

    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


    第七步:

    公共控件

    比如对话框

    第八步:

    模块

    确定某个模块的风格

    列表模块

    第九步:

    布局

    确定大致布局风格

    一次性不能将规范全都覆盖到位,可以不断的添加并注明添加人和时间,经过设计部审核才能生效发布。

    相关文章

      网友评论

        本文标题:视觉设计(APP UI)规范文档怎么写?

        本文链接:https://www.haomeiwen.com/subject/ffpuuxtx.html