UED设计培训
美国上市UED设计培训机构

400-111-8989

热门课程

如何建立一个UE设计体系?

  • 时间:2018-01-19 14:17
  • 发布:UED培训
  • 来源:教程

这次为大家带来主要针对UE的设计干货,我们尽力每周保持自身原创文章的同时,分享高质量的设计好文给大家,希望大家会喜欢。

如何建立一个UE设计体系?

建立一套统一的用户体验系统,设计原则和模式。

在过去的几年里,我一直在设计应用程序的Web端和移动端,我学会了如何与不同的部门协作和如何利用他们的知识来创作更好的产品,建立规模更好,更高效的设计系统。

显然,您可以建立更多的元素来为您的设计标识创建一个核心基础。我将分享一些关于设计系统的见解,这些设计语言可以扩展并应用到跨部门和平台上。

设计语言或设计系统不仅仅只是UI风格指南,更是团队的工作方式,价值观和原则的体现。

系统

“设计人们喜爱的产品是好设计的基础。产品,一个好的设计系统为客户给用户带来良好的体验,每个人都需要创造高品质的产品来激励顾客。实现这一切需要一个强大的团队,包括基础业务,任何事情都是一小块一小块的拼图拼接而成的。”

从排版、布局,网格,颜色,图标,组件,编码惯例,语音和语调,风格指南,文档,一个设计系统是将所有这些结合到在一起,使你的整个团队学习,构建和成长…

未来

设计系统将给我们提供工作所需的灵活性,以处理未来未知的工具。这可能是一个过程的改变,但不应该与传统设计流程有特别大的不同。我们需要不断地进行实验和交流,特别是在设计领域,因为好的用户体验是我们产品是否成功的真正标志。

当我建立设计系统时,我不仅要看图书馆的资料,还要看我们今天是如何工作,用哪些工具,设计过程,文档以及整个生态系统,否则你只是清理灰尘,然后继续束之高阁。

只关注视觉是不够的,我们需要先调整基础,如文档,我们每天使用的工具,我们的设计过程中,所有的这些都是非常重要的建立一个强大的设计基础,以及如何组织你的文件,如何命名他们,每个人都使用哪些工具,做一个库存的分,开始清理和调整一切。

如何建立一个UE设计体系?

在开始您的设计系统进行任何工作之前,请与可能需要引用或更新系统的所有主要涉众进行讨论。确保你明白今天的工作是什么,什么挑战可以通过这个系统来解决,以及每个利益相关者是如何工作的。

在开始时让每个人都加入,并在整个过程中与他们合作,这对于你设计的语言的成功是至关重要的。

设计团队或“DLS团队”可能“拥有”设计系统,它的创建应该是一个团队的努力,一个共同的愿望:提供出色的用户体验,同时通过有效的文档和组件提升内部效率。

记得:构建设计系统是一个长期的过程,充满了试验和错误,测试,学习,失败…

如何建立一个UE设计体系?

在做视觉效果前要先架构好基础,这是非常重要的,因为这会有助于后期进程的进展。

第一步,我会检查:

1 - 我们目前使用的工具,

2 -命名我们使用的文件夹,文件,层,甚至包括sketch和styles里的名称系统。

3 - 文档里我写下的一切规则,等等。因此,这将是非常有用的,当你有任何疑虑只是去文件里确认即可。

4 - 风格指南。

在进行设计之前,你要准备好自己的工作区。假如你是一个酒保,在开始服务之前,你需要准备好瓶子,咖啡机,配料来制作鸡尾酒等。然后,当你打开酒吧营业时,一切都准备就绪,在这里道理也是一样的。

如何建立一个UE设计体系?

文件名,文件夹,使用工具

工具

不管你使用哪种工具,规范使用过程是非常重要的。

如何建立一个UE设计体系?

我使用的用来构建风格规范的工具

当我说工具是指,你在设计过程中使用的一切,从笔记类工具,协作类工具到设计类工具。

与团队核对这些工具并决定你要使用的工具。

文件夹和命名

花半个小时去寻找一些文件或最新的版本会让人很烦恼,要用每个人都看得懂的命名法则来命名你的文件夹。

如何建立一个UE设计体系?

我的文件夹系统

这里是我的默认文件夹系统的屏幕截图,复制粘贴“文件夹系统”,并将其重命名为当前正在执行的项目。

我把所有的用户体验和视觉设计的文件放在一个文件夹里,所以如果你找线框图就在02_ux文件夹里,如果找最近的设计就在01_design文件夹里。

如何建立一个UE设计体系?

这里面是我可能需要的其他的资源

文件命名规则

等等,我很迷茫。我应该用 “NEWEST.sketch” 或者 “LATEST.sketch”? 要不叫“Final_v2.sketch”怎么样?

只要确保每个人都清楚知道使用什么就可以了,没有明确的命名规则,文件往往会被命名为homepage’, ‘homepage v1’, ‘homepage_v2’ ,等等。

举例:

1: name_version_date.sketch

2: ComponentName_YourName_Date.sketch

挑选一个规则。用连字符或下划线,但不要两者同时用,不要有空格。

我没有公式完美的命名格式,你需要尝试和坚持使用公式。

选择一个规则并坚持下去。

文档

记录设计系统对我来说是最大的挑战。

设计应包括解释或功能的例子。有许多方法提供文档的规范。

大致想清楚把设计系统放在同一个地方。直到现在,我在设计和协作过程中,都记录所有的东西,从文件夹的名称,文件名,到设计过程中使用的工具。

现在,我使用Google Docs,因为易被获取,可以线上评论,及时反馈很重要。

如何建立一个UE设计体系?

DesignBoard

如何建立一个UE设计体系?

UI清点

一个UI目录将帮助你容易地识别问题并发现您可能不知道的信息。最近我发现了一个按钮的八个变体,每个按钮都与另一个按钮有点不一样。关键是,没有人真正知道到底有多少问题,直到我们做了UI库存。这些问题导致了视觉上的不协调、不必要的标记和越积越多的CSS表。

“另外两个按钮的字体大小和风格略有不同。”

也许你可以从一个接口清单和一个简单的组件列表开始。专注于将被反复使用或至少有可能再次被使用的部分。

开始设计之前

组织你的……宝贵的时间,如果你不做一些准则老规范设计文件,在之后几个月的进程中,你会恨自己的。

素描的插件

给你的画板和层设置名称

创建网页

建立网格系统

选择类型规格

设置你的插件

安装你要使用的插件,添加它们到资源文件夹中,并记录它们是用来做什么,何时使用。

Craft by Invision Labs

一旦改变库中元素,将更新使用这些元素的所有图形文件。与Sketch symbols不同,Craft library中的元素不会绑定到单个草图文件中。

这允许创建一个共享资源库(托管在Dropbox或其他云上),团队可以使用,拖放他们的设计元素到上面。如果库被更新,就会对所有的团队成员自动更新!

有预设置的按钮、输入、样式等库,将会降低重复设计元素的风险并节省时间。

如何建立一个UE设计体系?

创建一个文档,并解释如何使用它们,以及在哪里得到它。这样,当你有新的设计师,你只要给他们的工具箱,他们就可以开始工作。

设置Sketch的名称约定

没有人想花几个小时试图了解你的混乱,所以要正确地给他们命名。

命名层:尽可能在每一层上尽可能地描述。“Layer 0 copy copy” 不要分割它。

图标:icons/interface/normal/instance_name(你输出的元素将被自动添加到文件夹中)。

其他:horizontal_divider

如何建立一个UE设计体系?

命名样式&符号

不要创建随机样式或符号,要一直遵循模式。

这里有一些例子,演示我通常如何命名,没有正确的公式,每个人找到适合自己的,并坚持下去。

“ icons/interface/state/name of instance”

“Primary-Accent/(colourname) ”

Symbols:

Buttons/Btn50px/teal/icon-right/hover

网格系统,8pt网格

设置你的网格系统将使布局和定位非常可控;你甚至不会去想元素应该间隔相距多远,因为你知道你的网格系统的增量网格可让您的设计精度不变。确保你使用一致的尺寸和定位,不管是网站,移动应用程序,或图标,都要使用网格。

我喜欢用8pt网格系统:

8pt网格系统,使用8的倍数的大小和空间来布置页面上的元素。对我来说,这意味着任何定义的高度或宽度,边距或填充都将是增8的倍数。

什么是点?

点(PT)是一个依赖于屏幕分辨率的空间度量。最简单的解释是,在“1X”的分辨率(或“1X),1pt = 1px。

在一个“2X”的分辨率(@2x),1pt = 4px因为分辨率双打在X和Y轴使它高宽均为2px。

在“3X”分辨率下(@ 3X),1pt = 9px(3px x 3px),以此类推。

类型规格和模块规格

一旦选择了一个漂亮的字体,使您的文字更容易阅读。现在你可能想知道在什么尺寸下使用。嗯,一个模块化的规模是决定你的字体大小,甚至你的整个布局比例的最好方式。

你先选一个比例,然后你选择你的文字,以基础尺寸为例,16px。之后,你将得到的序列号:16px,26px,42px,68px,110px。

字体与文字风格

使用不同类型的大小和重量来传达视觉和节奏。

我喜欢给自己尽可能广泛的文本大小和样式,所以我的字体表看起来像这样,我也创造了一个深色底的版本。

如何建立一个UE设计体系?

设计是动态的,适应性是关键。功能,特点和美学往往会改变。在第一阶段定义文本格式,这会对你很有帮助。

如何建立一个UE设计体系?

在你的文字样式名中使用斜线(见上图)将创造你的样式下拉子菜单:

模块化尺度是一个相互关联的有意义的数字序列。例如,使用黄金比率,我们可以确定一个模块化尺度的值乘以1.618,以得到下一个最高的数字,或除以1.618,以达到下一个数字。

探索

对双方来说都重要的是了解你所设计产品的目标。我们倾向于直接跳转到像素,并迅速制作出用户的界面。如果它是一个全新的网站,或一个新的功能,一定要有你想实现的明确的目标。

我收集所有图像放到我的灵感文件夹。我使用情绪板来与同事讨论我的想法和描述一些视觉的想法。在我开始进入到像素的过程中,收集尽可能多的信息。

如何建立一个UE设计体系?

色彩/字体探索

第一稿

设计总是一个持续的过程。你会在一个伟大的结果上迭代很多。第一稿也是第一次反馈的集合。您不必追求像素级完美的设计,而要接收从您的队友,客户或潜在用户得到的反馈。

我通常进行2个草案版本的融合设计,所以我混合颜色按钮,排版风格等来建立基础风格。

如何建立一个UE设计体系?

初稿,字体颜色,风格,按钮

有了初稿之后我有了设计方向,颜色和整体风格。

我一直在努力设计漂亮的表头,而其余的画布是白色的。在设计中我学会了把内容放在第一位 ——排版和印刷是附属。在内容到位,概念完整的前提下,设计漂亮的细节是非常容易的。

现在所有都已经完成了,我知道用什么颜色和字体,有一个风格指南。在这个阶段,在我知道下一步怎么进行之前,我不安排自己怎么做。

感谢大家阅读由UED教程栏目分享的“如何建立一个UE设计系统”希望对大家有所帮助,更多精彩内容请关注UED培训官网

免责声明:本文由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除

上一篇:拍摄淘宝透明产品的6种布光技巧
下一篇:写给策划看的简版UE入门

对话式交互设计流程

APP设计模式之—导航设计

设计干货 | 苏宁金融初体验

用户体验设计大师的14个好习惯

选择城市和中心
贵州省

广西省

海南省