1. 主页 > 网络营销 >

详解大厂的UI设计规范制作步骤

本文将为大家介绍如何敲定一个具体的设计原则,并展示了具体步骤——从公司战略层提取到核心一级关键词,到二级关键词,以及对应的设计手法,对应到形色字构质。

详解大厂的UI设计规范制作步骤

上篇文章讲了为什需要设计语言以及设计语言包含了哪些内容,《像苹果Google一样做设计语言,带你了解全流程》为什么需要设计语言?对内,保证设计团队的一致性,给用户体验一致性,提升设计效率;对外,统一的品牌符号,有助于加深产品在用户心中的印象,同时设计语言设定包含了,设计原则、色彩系统、颜色系统、栅格系统、图形、字体、投影等原则,今天来和大家分享,如何去敲定一个设计原则。

一、提取设计原则关键词 1. 提取一级关键词

详解大厂的UI设计规范制作步骤

第一步,先要去提取出关键词,这个关键词怎么来。

有几种方式获取,第一个从整个公司战略出发,任何一个产品一定有他的战略——品牌战略、商业战略。

举个例子,假设我们是ebay,公司今年战略是全球化、高品质、正品,那么这个就是一级核心关键词,所有的设计语言一定要和公司战略结合起来,可以理解为战略关键词是整个设计语言顶部金字塔。

2. 运用情绪板提取二级关键词

详解大厂的UI设计规范制作步骤

有了一级关键词后,需要去思考,那么什么样的设计能给人全球化的感受呢,什么样的感觉能有高品质,正品应该传递什么样的感觉呢?

此刻需要用到第二个方法就是情绪版,通过情绪版去把符合这些关键词感受的图形具体化。

二、高品质特征是什么?

下图是一组日本的花茶设计,那么在这组设计中,设计师是如何体现高品质呢?

详解大厂的UI设计规范制作步骤

▲首先包装很精美耐看,设计简约

详解大厂的UI设计规范制作步骤

▲做工精良,整个产品包装,都是在富士山脚下

详解大厂的UI设计规范制作步骤

▲采摘环境很透明,值得被信任

详解大厂的UI设计规范制作步骤

▲整个品茶的过程也特别让人向往,很有仪式感

详解大厂的UI设计规范制作步骤

▲整个的设计很完整,很有设计感在里面

详解大厂的UI设计规范制作步骤

通过以上案例拆解,我们能对这个高品质的关键词有更加进一步的理解,高品质原来在情感层面是一个这么抽象的感觉,但是很多同学会问,那么这二级词汇也很抽象,如何靠这个来做设计,很难去理解及表达,别着急,还有下一步。

2. 高品质设计表现形式?

关于高品质在视觉形式上如何来体现了,哪些设计感觉能代表高品质呢,这个时候就需要我们去寻找一些设计参考,这些案例要能代表高品质。

详解大厂的UI设计规范制作步骤

✅ 清晰的有品质的图片

详解大厂的UI设计规范制作步骤

❎ 牛皮癣,不精致不可取

详解大厂的UI设计规范制作步骤

✅ 优雅的排版和留白,文字清晰,杂志感受

详解大厂的UI设计规范制作步骤

❎ 图文密集,缺少版式不可取

详解大厂的UI设计规范制作步骤

✅ 精致的布局,栅格的体系,给人品质感

详解大厂的UI设计规范制作步骤

❎ 缺乏版式及设计感

详解大厂的UI设计规范制作步骤

✅ 有设计细节的

详解大厂的UI设计规范制作步骤

❎ 无细节不可取

详解大厂的UI设计规范制作步骤

✅合理的配色,简单清晰

详解大厂的UI设计规范制作步骤

❎山寨的配色不可取

详解大厂的UI设计规范制作步骤

详解大厂的UI设计规范制作步骤

详解大厂的UI设计规范制作步骤

详解大厂的UI设计规范制作步骤

详解大厂的UI设计规范制作步骤

✅设计的延续性和完整性

2. GOOD CASE

详解大厂的UI设计规范制作步骤

详解大厂的UI设计规范制作步骤

3. BAD CASE

详解大厂的UI设计规范制作步骤

三、设计分层

以上就是我们从一个战略关键词逐步推导到一级关键词,到二级关键词,到设计手法,以及对应设计表达,推导的一个全过程。

本能层:清晰的,有设计感的,做工精致

行为层:完善的,值得信任的,用心的

精神层:让人向往的,值得期待的

详解大厂的UI设计规范制作步骤

四、总结

本文由摸索网(http://www.lnmosuo.com)发布,不代表摸索网立场,转载联系作者并注明出处:

联系我们

工作日:9:30-18:30,节假日休息