亚博账号登录

几何

以下谌由摹客team翻译整理,仅供学习交流。摹客Mockplus是fast速的原型设计工具。摹客iDoc是高效的stay线协作设计平台。

现如今,企业productdepartment划分越来越多,分工越来越细,想要打造美观一致的product和界面设计,就需要各个department共同遵守统一的设计规范。

however,究竟how 才能从零startfast速搭建统一的设计规范系统呢?不用担心。本文take为everybody详细introduceUI设计系统搭建的6个main步骤, 供设计师们参考和借鉴:

 

紫龋瑆hat是UI设计系统?

UI设计系统是一整套Software设计和开发的标准,用以定义和统一界面上各个组件难胶凸娣叮紁roductteamfast速构建应用程序, 聚合并使用各类设计资源。所以,UI设计系统,既是设计team完成UI设计的说明书,So is it开发team编码和实现设计的重要资源库。

 

UI设计系统为what如此重要?

众所generally known,公司内部各个product以及界面要保持style样式一致,actually是verydifficulty的。但保持设计统一却又very关键,它不单单带来整齐和车氖泳醺惺埽鼓馨镏鷘ser形成一定使孟肮撸扌沃惺旒亲ㄊ粲诟公司product的设计语言,从而轻松提高其brand辨识度。

 

how 油穎ast速搭建UI设计系统?

从零start搭建UI设计系统,最简单的方法就是fast速创建一个包含All设计素材的资源库, 例如一个包含配色、文本样式、切家约皃age面模式等资源的库。and,this个资源库还需要清晰定义和呈现设计(例如网page或App设计)中All的组件。

总之,从this个角度来讲,stay没有使用任何工具帮助的情况下,设计系统构建是一条漫长的路。需要各个department和成员通力cooperation,共同完成。决不能轻易放弃。

下面We就黄鹄看看,how 一步步fast速搭建设计系统吧:

 

第一步,创建情绪板(Moodboard)和配色

为fast速统一product界面主体style,定义各个product外观,Wesure紫瘸⑹怨菇╮elevant情绪板和配色。例如,take日常设浦杏龅降母骼嘤胖蔝I、originality满满的product设计以及picture等拼贴到情绪板。如此,需要时,就可直接从情绪板中挑选合适的配色或寻求设计灵感。

此外,情绪板搭建过程中,也需详细列出各类颜色的原色、间色以及复色。报错和成功提示的配色、 色调明暗和灰阶等,也需囊括stay内。and,UI设计过程中,大都需要包含以下几种灰阶:

  • very车幕疑<诮缑姹尘吧杓
  • 稍暗的灰色,常用于边框、线条、笔画以及指羝魃杓
  • 中灰色,常见于副标题和次级文本设计
  • 深灰色,多用于界面主标题、正文捅尘吧杓

总之,We需要为每种颜色添加不同色调、明暗和灰阶,设计过程中,才能根据需要随时取用,丰富界面设计。

第二步,规范边框步呛鸵跤

设置好配色之后,We需要规范UI中边框的步呛鸵跤啊Mǔ#步怯虢缑婵片和图表之类组件设计密切relevant,影响着界面的整体外观和user的视觉体验。然而,边框步堑幕《染烤垢蒙栉啻蟛藕鲜誓兀

commonly而言,this取决于We想要带给user怎样的情感体验。步腔《仍酱螅呖蚓突嵩皆玻看起来就会More可爱、友好。相反,弧度越小,边框就会越方正,看起来就会More严肃、正式。 所以,边框的步巧杓频慕ㄒ槭牵呵刖量take其弧度设置stay2到8个像素之间。

阴影,main用于展现设浦凶榧暮穸群屯甘觘ffect。最近, 也时常用于区分界面的多个组件元素。 而设计系统搭建过程中,We尝试从下面四个类别定义UI中的All阴影设计:

  • 浅色阴影,用以突出交互组件,并provide一定视觉暗示,引导user点击交互
  • 稍微明显的阴影,用以设计交互悬停Special effects
  • 一目了然的阴影,为下拉菜单、弹出窗口以及其它类似组件打造透视effect。
  • 深色阴影,轻松打造界面布局类组件,呈现界面整体结构布局。

第三步,定义文本字体尺寸

拥有优质user体验的UI设计,大都have清晰的层级结梗绕涫墙缑娌慵斗置鞯谋晏饨峁埂6胍蛟焱骋坏纳杓葡低常痔宕笮『捅晏獠慵兑残枰型骋还娣丁

通常,We需要定义以下级别的字体尺寸:

  • 默认字体尺寸(例如CSS心系淖痔宄叽纾1 em), 常作为营销类网page和界面的通用字体尺寸。而16 px则是各大浏览器默认的字体尺寸。设计规范搭建过程中,可直犹砑拥焦娣犊庵小
  • 稍大的字体尺寸,用以定义界面博客文字谌荨
  • 再大一些的字体尺寸,用以定义界面标题和奖晏狻
  • 较大的字体尺寸,用以定义region模块的标题。
  • 超大的字体尺寸, 例如用以定义定价page面上Price的文本字体尺寸。
  • 最后,还需添加更小的字体尺寸,用以定义界面次级谌荨⑹淙胩崾疽约捌渌我信息。

第四步,统一界面图标

设计规范系统,也需要统一图标,确保界面All图标都have相似或相同的style样式。而对于设计初学者而言,theysure尝试使用免费的图标素材包。如此,既能省掉制作设计图标的time,又能轻松确保各个界面的统一性。

第五步,规范界面按钮、滑块和进度条

按钮是UI设浦凶重要的组件之一。user点击即可实现购买和阅读details 等操作。为提升user点击率,按钮需要根据实际功能进行设计,易于user查找和识别,并能够清楚指明点击后可实现的操作。

and,UI设计过程中,包含很多种按钮。按钮的various状态设计也不可或缺。

而以下是UI设浦斜冉铣<陌磁ype:

  • 命令按钮
  • 单选按钮
  • 复选框
  • 导航按钮

设计系统中的滑块和加载进度relevant规范的添加,能够轻松定义UI设浦谢鹾徒忍之类组件难剑让product设计More美观统一。

第六步,定义下拉菜单、标签和弹窗(以及其他复杂组件)

到目前为梗琖e已经设置好了一套最基本的设计规范系统。利用此规范系统,We还能够定义其它More复杂的组件,例如菜单、标签和弹窗等。and,设计规范标准不同,所能打斓此类组件也会不同。

以上就是设计系统搭建的的基本步骤,hope能够对everybody有所帮助。of course, 实际设计案例中,根据不同设计需求,设计team也可添加more类别的设计规范,打造其专属的设计系统。总之,设计系统搭建,请尽量保证其结构清晰且简洁易懂,以奖愀鞲鰀epartment随时取用。

 

优质高效的设计系统构建和管理工具

如上所述,stay没有任何工具男飨拢词故公司All设计team都参与进来,整个设计系统搭建过程也并不简单。究梗琱ow 才能fast速、优质且高效的构建并管理设计系统呢?this里为everybody推荐一款very实用的工具——Mockplus DS设计系统。

Mockplus DS设计系统是一款stay线的设计规范定制和管理工具,市公司各个设计departmentstay线实时协作构建、分享、使用和管理统一的UI设计规范。support8种设计资源上传和管理,例如picture、Logo、字体、颜色、阴影、图标、组件等。support多种方式导出和应用。team各成员可轻松stay线编辑,一键分享同步。team步ǎ凳惫蚕砩杓谱试础

 

结语

统一的设计规范系统是企业打造专属product设计语言, 加fastproduct设计、test以及开发流程,提高product知名度捅媸抖鹊重要手段。无论是手动搭建,still利用工具stay线搭建,都需要各department和成员通力cooperation,各酒渲埃岢植恍浮

 

原文地址:

译文地址:

author:Rahul Goradia

译者:Mockplus

 

转载请注明:亚博账号登录 » 超实用!手把手教你油饭菇║I设计系统

登录收藏
 
你probablylike的:
苹果的设计牛stay哪儿苹果的设计牛stay哪儿
设计普惠,从this里start - 阿里云控制台的无障碍设计实践设计普惠,从this里start – 阿里云控制台的无障碍设计实践
user体验5要素你用粤寺穑user体验5要素你用粤寺穑
耍好控件 | Google userResearch何谋究蛏杓圃耍好控件 | Google userResearch何谋究蛏杓圃
从修改密码需求看「实现模型」与「心理模型」的差别从修改密码需求看「实现模型」与「心理模型」的差别
2020年最流行的插画style, 不得不看2020年最流行的插画style, 不得不看
保姆级UI界面版式设计实用小技巧,你知多少?保姆级UI界面版式设计实用小技巧,你知多少?
this样设计光影轻拟物,想不脱颖而出都难!this样设计光影轻拟物,想不脱颖而出都难!
B端设计指南04 —— 弹窗B端设计指南04 —— 弹窗
【要闻回顾】UI设浦猩适褂玫10个原则【要闻回顾】UI设浦猩适褂玫10个原则