一份超详细的UI设计规范全攻略

访客4年前关于黑客接单476

设计语言是一个很庞大的设计体系,包括字体、网格系统、颜色、图形等等,而笔者在本文中也分享了相关的设计原则与关键词,希望对你有所启发。

一份超详细的UI设计规范全攻略

前面两期我分享了,为什么需要设计语言,对内对外有哪些帮助,同时和大家分享了,在做设计语言之前我们先要建立设计原则,以及设计原则下面的设计关键词,通过设计关键词推导出对应的视觉表现手法,也就是通常我们所说的,形、色、字、构、质。

那么今天我们就直接进入正题,在前面我们定义好了,设计原则和关键词,那么接下来应该如何去做?

01 如何去做?

一份超详细的UI设计规范全攻略

根据原子定律(不懂原子定律同学可以搜索原子设计 *** )我们从页面中最细小的元素入手,也可以理解为页面中无法再拆分的元素开始,它是组成界面最基础的元素,从最基础的元素,开始做统一性,本次我将从颜色,字体,网格说起。

02 颜色

一份超详细的UI设计规范全攻略

从颜色开始,需要根据整个页面中场景进行颜色定义,同样色彩也需要根据我们定义的关键词去推导,在定义颜色过程中,可以参加色彩心理学原理,以及竞品分析:

高品质:深色配色,黑白,中性的配色

全球化:深邃紫色,科技蓝,自然绿

年轻化:渐变色,马卡龙撞色

在定义了上述大的色彩原理下,需要对界面中使用场景进行梳理得出下列大概色彩类型:

一份超详细的UI设计规范全攻略

当然也可以定义一些界面中常用渐变色板,现在很多网站也有很多很好看的渐变可以去尝试。

一份超详细的UI设计规范全攻略

也可以定义一些图片上放文字效果,叠加什么颜色,颜色的模式是什么样的,透明度是多大,这些都可以帮助我们定义好一套色彩体系。

当然还有一些很不错的色板,如果你不知道怎么配色,也不知道当下流行色是怎么样,也可以从这些色板里面选择一个配色,挑选一些符合你们产品的配色。

一份超详细的UI设计规范全攻略

▲https://www.materialui.co/

一份超详细的UI设计规范全攻略

▲https://coolors.co/

一份超详细的UI设计规范全攻略

03 字体

一份超详细的UI设计规范全攻略

字体是界面中用户看到最多的一些元素,除了定义界面中的字体,同时我们也要定义界面下的字体,包括线下物料宣传等,在字体选择上,需要注意:

信息传递是否足够清晰,字体也是有情感的,字体表达的情感是否和我们界面中需求是一致的。

个性上,有的字体很方正,笔直,有的字体笔划比较活泼,那么不同字体我们如何去选择,同样需要在前面大的设计关键词下面去设计。

一份超详细的UI设计规范全攻略

一份超详细的UI设计规范全攻略

对于字体选择,一定要根据产品关键词去定义,以上是界面中常用一些英文和中文字体,每种字体虽然大体看差不多,其实每个字体,细看其实有些笔画上的差异!

我个人建议苹方字体和Helvetica Neue比较通用性更强,中文字体包比较大,特殊产品如果需要有个性化中文字体,需要注意字体大小包处理!

04 字号

字号是界面中很重要元素,字号大小决定了信息的层次和层次,在扁平化设计中,字号越来越重要,好的字号设置能让界面更加清晰一致性强!相反差的字号会让界面看起来山寨,关于字号的选择,可以遵循iOS的规范大小,也可以根据自己产品个性去定义你的字号。

假如你是电商产品,那么你可能需要对价格字体单独设置字号,如果你是金融产品,那么对应的字号也需要定义好对应的大小层级!

一份超详细的UI设计规范全攻略

▲对于特殊字体的处理(375分辨率)

一份超详细的UI设计规范全攻略

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

一份超详细的UI设计规范全攻略

▲特殊数字或图形化字号(375分辨率)

05 行高

相关文章

10分钟带你了解动效设计

10分钟带你了解动效设计

编辑导语:用户在利用一款产物时,都但愿能有精采的利用体验。精彩的动效,可以使页面之间接洽越发细密,整体体验越发流通,减罕用户的负面情绪;同时,也可以增加产物的趣味性与品牌特色,让用户发生乐趣并提高品牌...

推荐系统分析:猜你喜欢是怎么产生的?

推荐系统分析:猜你喜欢是怎么产生的?

本文将从最简单的概念开始,逐步讲解推荐系统的发展历程和最新实践。以产品经理的视角,阐述推荐系统涉及的算法,技术和架构。本章是第一章,将先概括性介绍推荐系统。 推荐系统是迄今为止,人工智能,大数据和云...

设计法则: 4个步骤带你了解菲茨定律(费茨法则)

设计法则: 4个步骤带你了解菲茨定律(费茨法则)

编辑导读:各人有没有想过为什么按钮越大,越易于点击 ?为什么相关按钮需要彼此接近摆放 ?为什么 Win 系统要将「开始」按钮放在角落 ?这些设定的背后其实都有一个在人机交互中,很是重要的定律 —— 费...

产品汪的“野蛮生长”复盘(3):从自我评估到公司需求

产品汪的“野蛮生长”复盘(3):从自我评估到公司需求

编辑导语:对付产物司理来说,复盘是很重要步调。复盘既可以对自身的本领举办评估,还可以通过以往的事情经验得到新的思考。本文作者作为从业3年的产物司理,对自我评估以及公司需求举办了复盘,但愿可以或许引起列...

疫情之下,互联网+农批行业的发展机遇与挑战

疫情之下,互联网+农批行业的发展机遇与挑战

疫情之下,许多传统的线下实体经济遭受了重大打击,而互联网新经济则受到了追捧。对于农批行业来说,这场疫情又意味着什么呢?又有哪些机遇呢?笔者在文中给出了自己的思考。 一场突如其来的新型冠状病毒疫情给武...

社交电商的本质是什么?

社交电商的本质是什么?

在做任何工作的时候,我们都应该透过现象看本质,尤其在事情中对我们辅佐很大。本文作者基于自身的事情履历,对社交电商的本质展开阐明,但愿对你有辅佐。 我们做任何工作都应该多拷问一下本质问题,因为只有把本...