美文网首页
设计规范的二三事

设计规范的二三事

作者: 格子喵sama | 来源:发表于2017-11-08 11:33 被阅读0次

很早之前就想整理一下关于设计规范的那些事了,从业至今遇到各种各样的问题,每次画原型时都要重新画控件,甚至有时会过于关注控件细节本身而忽略了用户体验,而设计规范不仅是设计师对产品全局的一种把控,也是设计师成熟设计思想的一种体现。

本篇文章作为此类文章开题,首先从两个方面讲述设计规范的基本概念。

 一、 为什么要做设计规范

想当初刚开始接触UI时充满了好奇心理和对这个行业的敬畏,而新手对于设计的确定也很明显,设计不规范,icon大小不统一,整体颜色过多或者颜色偏差过多,字体大小过于随意等,随着个人成长和做过越来越多的设计,我也越来越明白设计规范的重要性。

1 维护平台统一性

- 统一性是设计的一个基本原则

- 维护统一的品牌视觉,对于公司品牌形象来说,一个统一的品牌视觉,可以极大地减少设计语言的干扰,保证品牌视觉的简洁、美观、大气,设计师需要在集成和统一的前提下逐步优化,在范围内创新.

2 建立设计秩序,流程化通用设计

- 建立设计秩序,有参考有秩序,不随意

- 通用的样式,模块不需要每次都创新设计

- 通用设计可以大量复用,只需适当调整个别页面

- 形成统一的视觉语言,便于团队内部沟通,避免个人审美误差造成的设计混乱

3 简化设计工作量,提升团队工作效率

- 通用设计可以大量复用,只需适当调整适配或者个别页面

- 极大减少了设计工作量

- 使团队成员更注重用户体验,将设计重心放在用户目标以及产品目标等

- 减少和产品开发的沟通成本

- 便于新手或者新成员快速上手

二、如何制定设计规范标准

1 规范制定的时机

规范制定的过早或过晚都不太好,过早会限定设计的思路和方向,过晚则需要大量的修改和维护时间,比较合理的时机实在基本的页面风格定好之后在开始设计规范的制定。

2 设计规范的标准一般包括哪些

做之前先明确我们需要整理哪些内容,这些内容的分类是怎样的,下图是腾讯云规范时列的内容及分类,初始时可能做得不全,不过后续慢慢添加即可。

设计规范一般包含:

- 设计原则

- 设计风格

- 框架布局

- 文案

- 组件

- 数据录入

- 数据展示

- 控件

- 反馈

- 场景

- 动效


3 确定优先级,制定规范

由上图可以看出,一整套规范包含的内容非常的多,所以内容和分类整理好后,还需要确定每块内容的优先级和分工。从大的模块上说,首先应当确定整体的设计风格和框架,整体确定后才好确定细节的风格;其次的优先级最好是控件、组件、场景,因为控件组成组件,控件和组件组成场景,所以先确定小的控件后,组件和场景更容易确定。

规范并不是一天两天做完的,需要不断的积累、更新,和团队内部讨论,整理规范可以锻炼设计师的基本能力,对整体的把握和对细节的最求,慢慢积累会越变越强。

相关文章

  • 设计规范的二三事

    很早之前就想整理一下关于设计规范的那些事了,从业至今遇到各种各样的问题,每次画原型时都要重新画控件,甚至有时会过于...

  • 《暖心二三事》目录

    【记录生活中的点滴暖心事】 第一篇:暖心二三事① 第二篇:暖心二三事② 第三篇:暖心二三事③ 第四篇:暖心二三事④...

  • 华为PCB设计规范和上海贝尔pcb设计规范

    华为PCB设计规范和上海贝尔pcb设计规范:华为PCB设计规范:

  • 二三事二三字

    1. 寄居黑夜的微光暗暗生长 2.绿色的诺言铺天盖地林子里的冰雪再无旧人重温 3.春水的哀愁撩不倒胡杨林永恒的站姿...

  • 二三人,二三事

    人生在世,不同的时期和环境里,我们总会遇到不同的人。志趣相投,能与之无话不谈,是以为友,因为朋友这一角色的存在,使...

  • 教学二三事

    教学二三事

  • MySQL数据库开发规范知识点速查

    数据库设计规范 命名规范 基本设计规范 索引设计规范 字段设计规范 SQL开发规范 操作行为规范 命名规范 对象名...

  • 二三事

    日子过了太久,故事的轮廓就开始模糊。每个人都有故事,倾泻在酒后不明的夜里,或者在浓妆艳抹的女郎身旁,或者在空廖的一...

  • 二三事

    今天,我们一家三口一起参加徒步活动。徒步的固定集合时间是早上9点,过时不候。 由于这次的徒步集合地点离家有点远,大...

  • 二三事

    不记得哪一年的儿童节了,印象中这是唯一一次三兄妹一起没有和父母一同进城的经历。可能是父母的叮嘱,一定要照张合照,如...

网友评论

      本文标题:设计规范的二三事

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