美文网首页
开发需要懂的设计小知识

开发需要懂的设计小知识

作者: 简悦书摘 | 来源:发表于2020-03-20 22:02 被阅读0次

    设计师 vs. 开发者

    虽然我们常常开玩笑,开发者和设计师是两个星球的人,我们还是因为同样的愿景来到了这个产业中:那就是为这个世界上的人们创造出伟大的应用和产品。这是我们不可忘记的初心。

    设计师需要邀请开发者参与设计。越早在项目中这样做,你受益越大。开发者们会从设计决定中理解背后的原因,然后他们会学习到这些原则。不要只给开发者一个设计的初稿然后让他们去实现,这样的话,开发者并不知道设计背后的原因和进程。

    好的设计发生在开发者和设计师的交界处,开发者越早介入设计越好。如果他们参与了设计讨论,他们就能够理解设计是怎么发生的。当设计师和开发者协同工作的时候,他们就会互相理解。他们会一起克服困难,理解他们需要解决什么样的问题。


    设计原则

    准确

    从数据转化到可视表达时不歪曲,不误导,不遗漏,忠实反映数据里包含的信息。

    有效

    信息传达有重点,克制不冗余,避免信息过载,用最适量的数据-油墨比(Data-ink Ratio)表达对用户最有用的信息。

    清晰

    表现方式清楚易读,具条理性,可以帮助用户快速达成目标,在最少的时间内获取更多的信息。

    对数据的完美表达,合理利用视觉元素进行艺术创作,不过度修饰,给用户优雅的体验。


    在做设计语言之前我们先要建立设计原则,以及设计原则下面的设计关键词,通过设计关键词推导出对应的视觉表现手法,也就是通常我们所说的,形、色、字、构、质。

    形:大面积区域的形状,控件尺寸比例,图形形状的统一性

    色:颜色风格,页面色相,彩度,明度整体风格统一性

    字:字体的样式,字体,字号,衬线,内容识别性

    构:版和栅格系统,版式间距会直接影响到页面的张力及空间感

    质:页面风格,肌理维度,整个产品视觉调性

    决定着整个产品线的调性,能直接将产品所蕴含的情感文化通过视觉表现传达给用户。无论是按钮的圆角数值,还是图标的统一性,都是形的重要组成部分。

    统一icon风格,在图标设计中,首先要把控好icon视觉语言的核心,包括描边线宽、圆角、断点方式、点缀、颜色填充类型、图标重心。

    统一品牌元素,在界面设计中使用品牌图形能让用户牢记品牌形象,让产品快速抢占市场,提高用户比,如天猫、京东、QQ、美团等。

    品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时,需要先明确品牌色在界面中的使用场景及范围。

    功能色代表了明确的信息以及状态,比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。我们建议在一套产品体系下,功能色尽量保持一致,不要有过多的自定义干扰用户的认知体验。

    中性色主要被大量的应用在界面的文字部分,此外背景、边框、分割线、等场景中也非常常见。

    字体是体系化界面设计中最基本的构成之一。字号大小决定了信息的层次和层次,在扁平化设计中,字号越来越重要,好的字号设置能让界面更加清晰一致性强!

    一、字阶与行高

    字阶和行高决定着一套字体系统的动态与秩序之美。字阶是指一系列有规律的不同尺寸的字体。行高可以理解为一个包裹在字体外面的无形的盒子。

    常用的5种字体节奏(375分辨率)

    二、字重

    字重的选择同样基于秩序、稳定、克制的原则。多数情况下,只出现 regular 以及 medium 的两种字体重量,分别对应代码中的 400 和 500。在英文字体加粗的情况下会采用 semibold 的字体重量,对应代码中的 600。

    三、字体颜色

    注意标题、正文、日期、提示行文字的区别

    建议

    字体系统的构建,是「动态秩序之美」的第一步。在实际的设计中,我们还有三点建议:

    建立体系化的设计思路:在同一个系统的 UI 设计中先建立体系化的设计思路,对主、次、辅助、标题、展示等类别的字体做统一的规划,再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性,提高字体应用的性价比,减少不必要的样式浪费。

    少即是多:在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。

    尝试让字体像音符一样跳跃:在需要拉开差距的时候可以尝试在字阶表中跳跃的选择字体大小,会令字阶之间产生一种微妙的韵律感。

    一、亲密性

    如果信息之间关联性越高,它们之间的距离就应该越接近,也越像一个视觉单元;反之,则它们的距离就应该越远,也越像多个视觉单元。亲密性的根本目的是实现组织性,让用户对页面结构和信息层次一目了然。

    在同一个页面中,间距的样式不要太多,间距尽量使用倍数,比如1x,2x,3x,4x。如果以12为基准,间距就是12,24,36,48。如果以8为基准,间距就是8,16,24,32。不过这也不是绝对的,具体情况还要根据项目需要。需要注意的是,最好不要出现奇数,也不要奇偶数交叉,比如15,7。

    二、对齐

    1.文案类对齐

    2.表单类对齐

    冒号对齐(右对齐)能让内容锁定在一定范围内,让用户眼球顺着冒号的视觉流,就能找到所有填写项,从而提高填写效率。

    3.数字类对齐

    为了快速对比数值大小,建议所有数值取相同有效位数,并且右对齐。

    结构、图形、颜色、留白共同构成了界面的质感。所谓品质感其实就是产品给人的一种严谨、专心对待的态度。产品的质地风格应当与产品的整体形象保持一致。同样一本书的封面,粗糙纸的封面和细心打磨的小羊皮封面就是不同的概念。

    小结

    一致性特别重要,这意味着视觉的一致性和体验的一致性。

    你可以很简单地问自己,“这个颜色和我前一屏的颜色一样吗?”,“这两个元素有同样的留白吗?”,或者“这些输入框对齐了吗?”你要养成一种习惯,当你发现有一个图标没有和其他的图标对齐,当你能看出这些事情的时候,你不能装作没看见。

    不要为了编写代码容易而设计,导致的后果就是可能会在视觉或体验上有损失。除非开发完成不了。

    设计师需要引领而不是跟随着设计些东西。在设计决定中,听听开发者的意见。说明你做出这样的解决方案的原因和过程,而不是仅仅给他们一个规范和一些资源。如果你做可用性的测试,也请邀请你的开发人员。开发者们是非常聪明的,他们很快就能学习到什么是好的设计什么不是。如果你是引领者,开发者会在你不在的时候继续你的好设计,然后慢慢地会越来越好。

    纯净的 UI 和纯净的代码一样。它是组织好的、一致的而且进无止境。

    相关文章

      网友评论

          本文标题:开发需要懂的设计小知识

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