UI设计师必学的设计规范要点总结

   什么是设计规范?设计规范哪些要点值得关注?今天分享一篇台湾设计师@Akane_Lee 老师的好文,列出了她对设计规范的要点总结,能帮助设计师们变得更加专业,有志于UI设计的同学,现在就该行动咯。

  @Akane_Lee :要做设计规范前,先来了解什么是设计规范,不是把所有组件都摆在同一张图上排排站吃果果就好,设计规范(Design Code / Design Specifications) 一文中提到: 设计规范是指对设计的具体技术要求,是设计工作的规则。一般包括总体目标的技术描述、功能的技术描述、技术指标的技术描述,以及限制条件的技术描述等。

  设计规范的层次

  粗分成 3 个层面:公司、产品线、单一产品。包含视觉、品牌、用户体验等。

  设计规范的目的

  量化指标

  确定一般可用性原则和审美常识下的避免犯错的方法,以及一旦出现错误后的补救方案。

  确认设计关键点

  获得该设计规范针对范围内的关键点,包括设计方向和设计元素,以通过项目设计的过程,达到团队成员的更加密切的配合效果。它是一份检验文件,记录过程中的错误,留作以后的经验。并在此可以做出项目和产品设计的里程碑。

  规范设计原则

  这个原则有可能是针对单个项目的,也有可能是整个设计团队的指导原则,这个原则要被反复强调,反复实施,团队人员要共同为这个原则负责。

  简单来说就是:告诉你这些组件可以怎么用、用在哪里、有什么样的限制、怎么验收。

  以上取自 设计规范(Design Code / Design Specifications)

  产品组成

  产品的组成大约可以拆分成 页面 > 组件 > 元素 > 图(影片)、文字、icon、窗体、互动 等。

  各元素都可能需要制定 色彩、透明度、尺寸、间距、文件格式、质量、风格 等。

  互动包含 手势操作、过场动画、特效、音效、震动 等。

  先将各个产品拆到最小单位,再进行分类整理,通常就是那几种分类方式。参考现有的设计规范会更容易理解。

  别人家的设计规范

  我又把 Google design guidelines (自备梯子)掏出来了,这份应该是目前最流行、写得详细的一份设计规范。可以从里面分析设计规范要包含哪些内容。


  从左方的选单中可以看到这份文件包含:总览、动画、风格、布局、组合组件、图片、易用性、资源。点开后还有更详细的分类,之后才会是内文部份。

  每一个组件或元素都会包含

  元素意义

  使用规则、限制

  运用场合、时机,与其原因

  和同质元素间的一制性(新制规则)

  组合运用

  各种状态

  平台差异性

  正确示范、错误示范

  元素意义

  这个元素有什么的功能、对用户来说有什么帮助、呈现什么信息等等。

  使用规则、限制,与其原因

  要怎么使用这项元素、使用这项元素需要注意什么事情?为什么?

  运用场合、时机

  什么情况下会使用到这项元素?它会出现在什么地方?

  和同质元素间的一致性(新制规则)

  若现有同质元素不敷使用、需另制新款时,必须符合哪些规定以求风格一致?(如icon)

  组合运用

  当元素和其他组件混合使用,会有什么限制?是否有特例情况?

  各种状态

  若元素会因操作或其他原因呈现不同样貌状况时,规则为何?

  平台差异性

  若产品发布于各种平台上,该元素是否会有不同的情况?

  正确示范、错误示范

  除了正确示范外,将常见的错误一并标示可以降低出错虑、节省来回修改的时间。不仅只有文字之外,最好附上图片甚至动画说明。

  制作文件的规范

  只要是「文件」都有它的规范存在,即使是 Style Guideline。制作这份文件也有它的规则存在。

  阶层

  分类

  顺序

  视觉

  维护人员

  阶层

  你的产品可拆分成几个阶层?阶层的规则是什么?如果不懂的话先套用 Google Design 的分类,之后就知道怎么创健自己产品的阶层。

  分类

  即使分了阶层,也会有各式各样的元素待整理,比如按钮。同性质的放在一起或是同个区块才会用到的方在一起,要看你的产品适合套用什么样的分类规则。

  顺序

  最重要信息的放最醒目的地方,这次改版才加入的新规则也可放在最醒目的地方。这份文件要用什么规则排序目录需要好好思考。

  视觉

  这份文件的排版、色彩、字体字型、内容一致性、档案发布的格式等等,都会影响到使用者是否能快速找到他想看的章节。

  维护人员

  规范不是做好了就算,每过一段时间就需要检查改版。需要明确订定编修人员,并建立改版审核机制「要在什么情况下才能变动此文件的内容」,确保此文件的稳定和可信。

  结论

  Style Guideline 是份指南,将所有的规则系统整理后条列化,必需要做到「不管是谁只要看了这份文件都能产出一样的成品」。不光是设计师需要常常阅读,同时也会影响到 PM、企划、RD 在产品上的设计与开发。绝对不能今天做了什么好看的设计、就去改一下设计规范。而且所有的设计都要照这份文件开发,要改动规范就必须提出申请,并通知所有公司成员,确实传达改动内容与原因,否则这份文件形同虚设。

时间: 2025-01-27 04:00:34

UI设计师必学的设计规范要点总结的相关文章

读后有感 - UI设计师必知:线框图、原型和视觉稿

读后有感 - UI设计师必知:线框图.原型和视觉稿 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 线框图:草图,重点在交互的目标上,即业务如何交互完成,是不依赖于平台的,如同数据库设计中的概念

UI设计师非学不可的十大易用性原则

  编者按:为什么说「非学不可」呢?@Akane_Lee :这篇文虽然说是「十大易用性原则」,也可以说得上是:「教工程师如何捅 UI 」,看完整篇文章,简直是刀刀必中-UI设计师们赶紧学起来,记得不要给身边的工程师同学看到呦. @Akane_Lee :身为 RD 的你受过太多 UI 的气吗?老是发现逻辑不通需要打掉重练被延误时程吗?常被 UI 嫌念理工的没有美感都不懂吗?报仇的时间到了.这篇文虽然说是「十大易用性原则」,也可以说得上是:「教你如何捅 UI 」.RD 最擅长讲理,就来跟 UI 讲理

WEB工程师和设计师必学的10个IOS 8新鲜改变

  @罗罗磊磊 :喜大普奔,喜极而泣,随着iPhone 6和iPhone 6 plus的上市,ios 8终于在上周推送更新了.新的设备,新的分辨率.接下来这篇文章介绍下 iOS 8有哪些变化,全都是为工程师和设计师量身打造写的呦. 概述 简介 iOS 8 上的 Safari 的更新 iPhone 6 和 iPhone 6 Plus 新 Api 支持 Safari 新功能和支持 iOS 8 原生优化 Safari 插件 新的设计 视频增强 iOS 8上的JS Bug 和问题 已经习惯了苹果官方的高

UI设计师有哪些应该会写的文件?

  身为 UI 设计师,工作内容不是只有做 PSD 和切图,只会这两样的叫美工.基本一位合格的UI设计师必须要具备撰写文件的能力,文件最低限度需包含:企划书.规格书.Wireframe.Mockup.切图.标示文件.UI Kit.UI Pattern.Guideline >>> 小学时的作文「我的志愿」想当作家,当作家好啊不用出门就有钱赚,看这思想多单纯多懒惰-结果现在变成设计师,只能把写作当兴趣了. 设计师在工作流程上会需要产出各种文件,请当成存证信函在写,反正文件基本功能就是存证和沟

iOS程序员必须知道的Android要点

iOS程序员必须知道的Android要点 2014/05/06 | 分类: ANDROID, 开发 | 0 条评论 | 标签: ANDROID 本文由 伯乐在线 - chris 翻译自 objc.欢迎加入Android小组.转载请参见文章末尾处的要求. 本博客英文原文副本 http://blog.csdn.net/opengl_es/article/details/25243257 在移动应用飞速发展的今天,APP只针对IOS平台进行开发已经不够了,如今Android在移动设备占有近80%的市场

从车间工厂妹子到华为中级UI设计师的自学之路

  本人94年的妹子,家里穷,没上高中,上了个中专,学了专业是服装设计与工艺,学历这么低,知识浅薄,出来工作后也就是在工厂里做车间工人,当初剪线头流水线做衣服等等都做过. 工厂很累的,时间长又辛苦,而且大部分都是大妈,日复一日,没有出路,看不到未来 那时我才17岁(2011年),骨子里还是不甘的,然后做了一年多的工厂流水线,毅然的辞职了. 离职后,我什么都不会,我爸让我回家种地,对于一个女孩子,种地太苦了,而且更没有出路,我拒绝了. 后来我爸通过关系找了我表嫂,让我去她开的美容店里去做美容,我不

PS小白必学抠图技巧

  抠图,就是从背景中分离出一个特定对象,而抠图的前提是我们要有一个完全清晰的图像.在图片处理过程中,抠图是非常常用的,尤其是对于网页设计.海报设计和封面设计来说.抠图提取的前景可能是人.物或景,或者是这三项因素的组合. 本期国外精品翻译教程就同大家介绍一下知名UI设计师Jake Rocheleau是如何用PS钢笔工具来完成抠图的.笔者认为,以目前Photoshop CC的功能来说,抠图工具有许多种,但在长时间的图片处理过程中,PS钢笔工具是最精确且最有效的抠图工具.当然,对于不少PS小白而言,

UI设计师容易忽略的四个现实

  我遇到非常多这样子的设计师,他们从不考虑「这样设计稿交出去,工程师做不做得出来」的问题,也不愿意去了解什么叫「限制」和「规则」.如果你也想从画图标的变成UI设计师,这篇干货千万要收藏. 「这样做比较漂亮啊!」 「这样做比较美啊!」 「使用者喜欢这样子啊!」 (设计师指 UI 设计师,我懒得打这么多字.) 可行性 轮胎为什么不可以做成三角型?三角型比较帅啊! 想了解 UI/UX,就一定要了解这张图,这是 Jesse James Garrett 在 2000 年发表的用户经验元素一书中所提出:使

工作五年以上的UI设计师都在干什么?

  @EDC尤原庆 (华为首席设计师) 用户体验设计是一个相对新的行业,好处是行业新.发展快.年轻人机会多,坏处是职业发展道路不会足够有迹可循,有时需要自己去思考,去找路. 设计这行,做得越久,发现厉害的人越多,需要学习的地方越多,自己懂得太少,所以默默努力就好,哈哈哈哈 设计发展路线很多,各有精彩,我的简单发展路线是: 基本技能:学校上课.项目经验.实习. 找到兴趣:实习,去不同的地方实习. 正式职业:第一份工作,从菜鸟到初级设计师,配合团队做设计项目. 职业晋升:从初级设计师到高级设计师,主