赞助商
立即赞助

掌握这6个关键点,你也能制作出系统而专业的设计指南

UI设计3年前 (2021)更新 流光
2.1K 0 0

设计指南是最大程度提升设计团输出效率和确品牌一致的核心工具,成功的设计规范并蹴而,需要注意问题并不少。

对一个网站甚至一个品牌而言,设计指不仅仅是一份规范文档么简单。优的设计指身就同艺术品一样令人赏心悦目,在际的设计工中,它还有着不替代的重要功能。它展示出你的产品应有的样式和形态,并且以一种管理、易使用和易理的方式将整个设计系统合到一。

制作设指南的时候,下面6关键点一不能忽视。

1、品牌标识示例

首先,的设指南中应该包含可视化的品牌标识展示案例,以这样的方式呈品牌标识应的样子。

最好的案例,其实是就是贴真实应用景的案例,而这的实战案例也正贴了计指南的真实存在图。

这些设计案例,通是牌页、移端页面、APP的截图,这些案例展示牌标识的正确使方法,及相应的他元素的展示样式。

下图是 Love to Ride 品设计指南。他们设计指南页都设计如网页样,本身呈现出了足够致性。设计指南甚至讲些常见小元素到起予以说明,比如不地APP图标应该以什么样样来呈现。

在设计指中采用案例,最大的优势在,你不用创建额外的应用场和模拟说明,而是用最的案例直接说明,对团其他成而言,也是最为有效的展示。

掌握这6个关键点,你也能制作出系统而专业的设计指南

2、完整的设计说明

从配色案到排版布局,从图形运用到具体控件出现位,都要有详细说明。

在整个设计当中,样式和功能要遵循哪规律,背的设计哲学是什么,应当予以说明。

这些完整的解释明,能够帮整设发团队尽可能不同的媒体准确一致采用统一的设风格。相同的元素内核高度一致的设,能让用户查看网页平面广告的时候感知到品牌的独特性统一性,让不同置的内呈出明显的关联关系。举例子,线的网页常常会因用户所用设备呈出不同的字体,设师会限度借Google Fonts  Typekit 调用尽可能接近品牌默认字体的第三方字体,达到尽可能一致的体验。

所以,如果字体是你的品牌策略中不可替代的一部,那你应该在整体计规范中考虑好这一点。

对于需要注意的点,一定要予清晰的说明,如H1标签的字体尺寸一定是88点,而缩略图的尺寸始终是200×200像素,过对于非键点就没有必要全都进行限定。将设计的精神和格与这些键点结合起来,才够你的团队在规定范围进行有效的设计,如果将有的细节都限定死,那么整个规范就沦为一词典了,有人都只靠停的查阅规范来成设计。

掌握这6个关键点,你也能制作出系统而专业的设计指南

3、风格和调性

在计指南中针对各个计素来描述和规范风格可能并不那有趣,但是足够重要。

对于格的描述案同样会影响到视觉的设计。这些描述的本会影响到设计人员对于格体验的把控和图片类的取,甚至连色彩和字体的控制会被影响到。有的这些东西共同组成了牌整体的个性。

更要是,它们决定了界如何识你品和品。

强大的风和是视识别的核心之一。设计元素应该有属品牌的独特个,样才能确用户即使看不到LOGO读不到文,也能清晰地判断出它们是属谁的。看看口乐的红和迪士尼的字吧,它们就是典型。

掌握这6个关键点,你也能制作出系统而专业的设计指南

4、SEO 关键词

搜索引擎优化要性日渐突出。在网页设计,关键词优化可能是讨论最多是最趣组成部分。是,你需要尽早考虑关键词优化这件事情。

你应该将你的品牌相关的关键词用设计的语言表述出来,在设计指中清晰的指出来。

Urban Outfitters 它的品牌设指南当中,精到列举出它们相关的关键词。虽然作服装品牌,列举出的关键词非常多,但其中核的关键词,使用不同的色彩突出展示,让可以瞬间知道哪些应该重突出。

这的关键词列表对于负责网站文案的营销策划和计人员而言,无疑是非常有用的。对于文案写作者而言,凭空去想和回忆往往容易卡住,而这的列表的存在,则不会让这的情况发生。

容创作和键词系统统一起来,在名上的优势会更明显,距离目标户就更一步了。

掌握这6个关键点,你也能制作出系统而专业的设计指南

5、元素的样式的控制

现如今网上各种各的图案和计素材层出不穷,素材的滥用已经成为非常常见的计问题了。所以,在规范计的候,应当控制图案和相关素的使用范围。

这包括LOGO和 图标的使限定范围,配色的限制,表单和导航的掌控,及静态和态元素的控制。你可在设计指南之外创一个在线的风格指南,便于计人员快速的复制和粘贴这些素。

掌握这6个关键点,你也能制作出系统而专业的设计指南

6、代码片段

如今许多网站的设指南当中,已包含了许多常用的码片段了。从按钮的小动效到滑动效果,这些码片段许多细节的体验相互关联,关键的它们降低手动输入码的本,确保了码的复用率。

对于网站的文本和媒体内容而言,相关的常用代码片段是提升效率的关键之一。

Firefox 在它的最的设计指南当中就囊括了元素使相的代码。即使你从来没有供整的代码片库,尽量包含一些基本的、的代码,设计师和相的开发人员够更为统一效地成日的编辑工作。

掌握这6个关键点,你也能制作出系统而专业的设计指南

结语

计指南这种西并不一定要做成静的图书或者简的PDF文档,它所涵盖的素类型可以多种多,可以借助工创造在线的多功能的计指南和风格指南,让计事半功倍。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

@Fornever :光涧实验室 Do It Today 第12期活动,尝试了用 Design Workshop 产品设计的方法来解决困扰创业公司的招聘问题,...
产品设计方法
一、字体设计的价值 文字是图像记忆的一种衍生方式,人们为了简明地表达事情、物品、人物等情景画面,而演变出的简明的记载方...
产品设计规范
在上篇的分享《Banner设计宝典系列!玩转9种最常见的设计风格》中有提到一个名词:情绪板(Mood Board)。有不少小伙伴来问:...
情绪板
编者按:iPhone 设计规范是每个设计师都应该学会的基础知识,无论你是新手老手,看完本文一定能彻底理解iPhone 设计规范! 一...
iPhone 设计规
本文针对的是从 UX 角度出发的标签系统设计,不同于数据库的标签系统设计。「标签系统」的概念来源于《信息架构:超越 web 设...
一致性原则
编者按:最新一期的设计圈干货来了!这次的干货是来自 prototypr.io 的整理。 对于设计师而言,这是一个越来越好的时代,每...
前端干货
无论是在上市 BAT 还是创业小公司,都随时可能接手从0开始的新项目,那么作为负责新项目的主设 OR 独立设计师,我们应该从何...
产品设计流程
今天我们来聊一聊特斯拉最新的车型 Model 3的中控大屏,这是一块具有标志性意义的中控设计。Model 3 的HMI堪称是对汽车行业的...
交互设计