UI设计中的字体设计规范

UI设计中的字体设计规范（通用10篇）

篇1：UI设计中的字体设计规范

去名企 拿高薪 到翡翠教育

UI设计中的字体设计规范

很多刚做APP界面的设计师，经常会因为字号，字体颜色，间距而困扰。拿到设计需求后，开始进行设计，不知道从何去调整界面的字号和行间距等。容易碰到的问题是页面和页面的字号调着调着就大小或颜色不统一了。并且容易导致设计稿反复得修改。设计出来的效果图文字左右间距层次不齐，导致与预期不符等。

在实践的过程中我们会慢慢发现一些规律或者经验规范。接下来翡翠教育柳州墨本校区的老师将和大家一起聊聊在界面设计中的那些常规字体的使用规范。

不明确而繁琐的字体搭配会导致整个画面失调。可以这样说，字体可以成就设计也可以毁掉设计。

问题的关键有：

1.字体样式太多，导致页面杂乱 2.使用的字体不易识别

3.字体样式和内容的气氛或规范不匹配 怎么避免这样的结果发生呢？

通过设计经验可以帮助你做出更好的版式,翡翠教育柳州墨本校区的老师都拥有丰富的从业经验，了解不同平台的常用字体设计规范，帮助学生快速的掌握规范。

在每个项目设计中只使用1-2个字体样式，而在品牌字有明确的规范的情况下，只需要一种字体贯穿全文，通过对字体放大来强调重点文案。字体用的太多，越显得不够专业。

不同的样式的字体，形状或系列最好相同，保证字体风格的一致性。字体与背景的层次要分明,确保字体样式与色调气氛相匹配

在不同平台的界面设计中规范的字体会有不同，像移动界面的设计就会有固定的字体样式。网页中会有常用的几个字体，在这我和大家分别介绍一下。

以下是在72像素/英寸下的规范 移动端常规字体

IOS:常选择华文黑体或者冬青黑体，尤其是冬青黑体效果最好。去名企 拿高薪 到翡翠教育

Android

英文字体：Roboto 中文字体：Noto 移动端常用的的字号有哪些呢？ 导航主标题字号：40-42px 在内文展示中字号大小又是多大呢？

大的正文字号32px,副文是26px，小字20px，在内文的使用中，根据不同

类型的App会有所区别。

像新闻类的APP或文字阅读类的APP更注重文本的阅读便捷性，正文字号36px，会选择性的加粗。

大家注意了，在选用字体大小的时候一定要选择偶数的字号，因为在开发界面的时候，字号大小换算是要除以二的。这个详细缘由大家可以网上查询，我就不在这一一的介绍了。大家感兴趣的欢迎前来翡翠教育柳州墨本校区咨询了解。

篇2：UI设计中的字体设计规范

一份详尽全面的UI设计字体与排版指南

无论你是做网页还是App设计，文字内容总是能占到整个版面将近80%的区域。因此理解字体与排版对UI设计师来说非常关键。你需要始终把内容的可读性放在首位去考虑和权衡你对字体与排版的选择。

字体的基础术语

了解字体设计的基础术语非常重要，这些术语在介绍字体设计的相关文章中经常出现。比如 x-height(X字高)指的是从字母的基准线开始往上到最矮字母的顶端的距离，当X字高的比例相对大一些的话就能增加易读性。

汉字字形

SEO排名 http:///

云客网 您网站的流量加油站

在大多数情况下我们都选择使用系统自带的字体，比如微软雅黑、宋体、黑体等来定义标题和内容，但有时，我们在做Logo，banner设计时也需要通过对字体进行改造，来达到更加理想的效果。这时我们就需要掌握汉字的字形结构以及一些最基本的设计原则。

衬线字与非衬线字

在西方国家的字母体系，分成两大字族：serif(衬线字体)及sans serif(无衬线字体)。衬线字(下图中的宋体、Times New Roman)是指在字的笔画开始及结束的地方有额外的装饰，而且笔画的粗细会因直横的不同而有所不同。相反的，无衬线字(下图中的思源黑体、Helvetica)就没有这些额外装饰，而且笔画粗细大致上是差不多。

衬线字的字体较易辨识，也因此具有较高的易读性。反之无衬线字则较醒目。通常来说，需要强调、突出的小篇幅文字一般使用无衬线字,而在长篇正文中，为了阅读的便利，一般使用衬线字。在实际应用中，因为中文的宋体和西文的衬线体，中文的黑体和西文的无衬线体，在风格和应用场景上相似，所以通常搭配使用。

SEO排名 http:///

云客网 您网站的流量加油站

字体排版建议

在你对字体排版技巧了如指掌之前，首先需要保证你的内容能够简单且清晰地展现出来。优秀的文字与排版使我们更愿意去阅读，所以最好先关注你所设定的字体和排版是否便于阅读，然后再考虑为了美观改进行修饰。我们可以参考这篇英文指南：优秀字体排版的5条原则 并且将文中的这些原则应用到我们的App和Web设计中去。

iOS中的系统字体

随着iOS 9系统以及EI Capitan系统的发布，现在的系统字体变为了Apple自己设计的 [San Francisco]。iOS仍然在其他地方使用SF UI，而在Apple Watch中使用SF Compact。

SEO排名 http:///

云客网 您网站的流量加油站

San Francisco 有两类尺寸: 文本模式(SF UI Text)和展示模式(SF UI Display)。文本模式适用于小于20 points的尺寸，展示模式则适用于大于20 points的尺寸。当你在你的app中使用San Francisco时，iOS会自动在适当的时机在文本模式和展示模式中切换。

注：如果你使用诸如Sketch或Photoshop的工具来进行设计，那么当你设置的字体大于等于20 points的时候，你需要切换到展示模式。iOS会根据字体大小为San Francisco自动调整字间距。

SEO排名 http:///

云客网 您网站的流量加油站

选择Body字体

为body text挑选合适的字体是最重要的。务必选择那些可读性强的，看上去干净易读的字体。我推荐的常用英文字体有：San Francisco, Helvetica Neue, Avenir Next, Open Sans, Museo Sans。中文字体则有，华文细黑，思源黑体。

SEO排名 http:///

云客网 您网站的流量加油站

字体的大小

在iPhone,iPad,iWatch 中设置的Body字体不应该小于11pt，这样才能被正常阅读。我们推荐的Body文本大小应该在15-18pt。

SEO排名 http:///

云客网 您网站的流量加油站

字体的字重

SEO排名 http:///

云客网 您网站的流量加油站

当我们设置更大的字体来获得更好的易读性的同时，我们也应相应地减小字体的字重(粗细)，考虑Light，Thin或者Ultra Thin。过重的字体会太过醒目，从而影响其他内容的显示效果。

当字体大小为12-18pt时，使用Regular，18-24pt时，使用Light，24-32pt,使用Thin，当字体大小超过32pt时，建议使用Ultralight。以上都是建议值，你应该根据不同字体的显示效果进行设定使文字内容看上去清晰和精致，从而保持良好阅读体验。

现代字体都有多种字重设置：Regular，Light，Thin和Ultralight

合理设置行高，让文字也能够呼吸

行间距(leading)应该设置为字体大小的120%到145%之间。

SEO排名 http:///

云客网 您网站的流量加油站

在右边的例子中，行高设为了与字体高度相同的100%，而在左边的例子中，我将它设为145%。它们的显示效果有着非常明显差异。当字数进一步增加时，你更会发现阅读行距设置过小的大段文字会非常累。合理设置行高，也是一种留白的技巧，能够增强用户的阅读体验。

每行45-90个字

行长指单行文字的长度，如果一行中包含的字数太多，文本内容将会很难阅读。英文字符一般在45-90字比较适宜，而中文35-60字为宜。合理的行长使用户在行间跳转时非常感到轻快和愉悦，反之则会使阅读成为一种负担。

SEO排名 http:///

云客网 您网站的流量加油站

字体样式

字体样式对易读性和快速浏览非常重要，一般的原则是，被修饰的文本不应超过整个文本的10%，如果所有文本都都通过修饰被强调的话，那反而就不是强调了。当然，一次不应该同时使超过三种的强调样式。换句话说，不要在同一段文本中同时使用，颜色，字体改变，大小，下划线，斜体，粗体。

SEO排名 http:///

云客网 您网站的流量加油站

寻找合适的字体

大部分商用字体都很贵，但也有很多优秀的字体是免费的。你只需要从中挑选你最喜欢的字体，并应用到你的设计中就可以了。下面就介绍几个非常优秀的字体网站。

Google Fonts(需梯子)

在Google Fonts，你可以免费下载你喜欢的字体，并且按照你的需要在项目中使用。由于在iOS中使用其他字体的唯一方法就是将字体文件导入到系统中，因此Google Fonts的下载功能非常有用。Google Fonts包含超过1400种不同的字体，其中包含最著名的：Open Sans和Roboto字体，他们是Android系统使用的默认字体。

SEO排名 http:///

云客网 您网站的流量加油站

你可以使用Mac上的SkyFonts来自动同步字体到你的桌面。

如果你需要在你的网站中直接使用Google Web Fonts，你可以选择360的代理来访问Google的免费字体库。下面是使用说明，非常简单。

SEO排名 http:///

云客网 您网站的流量加油站

Typekit

有非常多优秀的字体。这对于那些刚刚起步的人来说，非常有用。这其中就有我非常喜欢的Proxima Nova和Museo字体。它还将思源黑体等中文字体也收入其中了。

有字库

SEO排名 http:///

云客网 您网站的流量加油站

对于在需要大量使用中文字体的用户来说，有字库是一个不错的选择。它是国内目前比较优秀的Web Font服务平台，包含了大量优秀的中文字体。

其他资源

字体和排版是一门值得深入探索的艺术。每个字体的形成和发展过程都有着深远的历史可以追溯。当你设计的作品也能被称作艺术品时，那就是对你最大的肯定。

文字排版指南

这是一篇英文文字排版指南，但提到的内容和大部分意见对中文字体的选择和排版同样具有意义。非常值得阅读。

SEO排名 http:///

云客网 您网站的流量加油站

字体设计基础：字由心生

汉字怎么样发展而来的?我们现在用到 字体是通过什么字体演变过来的?当今字体又是沿用了先人的那些字体基础?… … 通过这篇文章，能够对汉字的这些基础知识有所了解。

哪种字体最适合快速阅读

SEO排名 http:///

云客网 您网站的流量加油站

这篇文章详细介绍了中英文字体的搭配建议，很有参考价值。

Type is Beautiful

是一个非常有名的关于字体的博客网站，提供了大量字体研究的文章，适合从初学者到资深设计师阅读。同时它还提供了一个播客，名叫“字谈字畅”

篇3：包装设计中的字体设计研究

面对各式各样的产品包装, 我们究竟应该用什么样的字体, 才能更好的表现商品的特性呢?首先从字体选择的角度入手, 面对方正字库、汉仪字库、文鼎字库、迷你字库、经典字库、超世纪字库、长城字库等等字体库时, 每个设计师可能都会困惑, 究竟每个字体的艺术风格是什么呢?该如何取舍呢?当接到一个包装设计的方案时, 首先要认真与客户沟通, 了解企业和商品的信息, 市场上竞争产品的状况, 消费者定位等。接下来做市场调查。最后对收集的资料进行分析总结, 确定包装字体的基本定位和风格特点。

下面我们把中文字体分类展开, 分析每种字体的书写特点和艺术风格。

1. 宋体体系

宋体是印刷字体中历史最悠久的字体。它规范易认、整齐划一, 很受人们喜爱, 一直是使用率最高和使用范围最广的印刷字体。为了满足设计的多层次需要, 宋体字体系也在不断增加一些新的字体。现在宋体体系大致包括老宋体、细宋体、粗宋体、长宋、报宋、仿宋等。

老宋体字是从北宋刻书体的基础上发展而来的, 是最原始的宋体字。当时官府的灯笼、衙牌、告示及祠堂里的牌位等多采用此字体。到了明代老宋体演变为横细竖粗、字形方正的印刷字体。老宋体的艺术风格为典雅、端庄、大方、秀丽, 可体现产品的民俗性、文化性等特征。

仿宋则笔画粗细相近, 点呈三角状, 右边略高。是早期中文打印机的专用字体, 由于那时打字机多用于国家机关, 因此仿宋体现在仍是红头文件的专用字体。仿宋给人一种权威的感觉, 适用于电子元件等的包装。长宋和扁宋是将老宋体结构伸长或压扁, 横、竖画粗细比例相对缩小。因此长宋挺拔、扁宋则宽博, 在包装设计时根据产品的特性选择使用。

2. 等线体体系

等线体是继宋体之后又一重要的印刷字体。它与宋体结构相同, 但抛弃了字脚, 且点画粗细一样、起止皆方、气象丰满。其艺术风格为严肃、雄壮、庄严、有力。

圆头体是改等线体的方头为圆头而形成的字体。圆头体的空心形体叫通圆体。圆头体较黑体增加了柔弱和文静之感。通圆体还增添了空灵和透亮的特色。圆头体在包装设计上使用较广, 是介于严肃和活泼之间的一种字体, 适用于很多产品。

琥珀体也称叠圆体, 是以圆头体为基础, 缩小笔画间距并使部分笔画叠压的字体。其艺术风格为浑厚、朴拙、较之叠黑体增添了圆柔之趣。彩云体就是空心琥珀体, 较琥珀体变实为虚、透亮、轻盈。如果我们把叠黑体看作男性的话, 那么琥珀体就像女性, 更适合于饮食和家居物品。

叠黑体是在黑体的基础上, 缩小点画间距, 并加宽笔画使部分叠压 (相叠之处留出白缝, 以使点画清晰) 。其艺术风格较之黑体更显厚重, 雄壮。

3. 书法体系

虽然高科技迅猛发展, 但书法体的艺术效果依然受到人们青睐。书法印刷体已经不再是某个人的书写风格, 而是集著名书体的优秀特点为一体的印刷书法。书法体系不仅弘扬了我们的中华文化, 而且方便使用, 深受设计师的喜爱。

隶书是综合汉隶的基本特点, 加以规范定形的印刷字体。其艺术风格古雅遒丽, 朴实又不失华贵。隶书不似其它书法体那般飞扬灵动, 它老沉持重, 显出与众不同的尊贵、典雅。

魏碑体是从北魏造像和碑志书法变化而来的, 以方笔点画和撇捺收笔及转折处外方内圆为主要特征的印刷字体, 称作新魏碑, 简称魏碑。其艺术风格为挺拔、方劲、有威武之象。是书法体系中最具有权威感的一种字体。在包装设计中用以突出有文化气息和的产品。

楷书是以唐楷书为基准, 以馆阁体的实用性为参照加工整理出来的应规入矩、比例适当、形体方正的印刷字体。其艺术风格为规范、秀美、带书卷味, 可用于包装设计中说明性文字的字体。

行书是介于楷书和草书之间的一种书体。字库中常见的主要有行楷、舒同体和任政体等。其艺术风格为活泼、轻松、自然、流美。

印篆体顾名思义取秦汉篆书的书写方式。这种印篆体, 点画粗细均一、头尾势圆、转角婉通、连接自然, 多回折转角、四周饱满。其艺术风格古色古香、装饰味浓, 犹如图画, 历史感强。但由于不易辨认, 所以不易做品牌字使用。可在包装的其他地方使用, 用以突出产品历史悠久的特征。

古印体和淡古相似, 是仿汉印章剥蚀效果的文字。其点画有断有连, 似断似连, 结构造型似在楷、隶之间。其艺术风格为干枯、老辣、古朴、悠久。

我们会发现书法体和宋体的性格特征很相似, 当要突出产品文化含量的时候, 这两种字体都可以用。

4. 宋黑结合体系

宋黑结合体系有美黑体、综艺体、黑变体和姚体等。

美黑体点画粗细相近, 横竖似黑体, 余画像宋体, 结构稍长的一种综合美术字体。其艺术风格具有黑体的庄重, 又具有宋体的文化意味, 风格朴实敛静。适用体现既传统又现代的产品包装。

综艺体是在黑体基础上, 对个别点画稍加变化, 结构非常饱满的一种字体。其艺术风格丰厚、大气、时尚, 适合于一些现代感较强的产品。

黑变体是以黑体为基本形象, 吸收了宋体横稍细的特点。圆新体与其几乎相同, 只是方框的外角无棱。

5. 变形体体系

变形体即不规范的自由体。因其风格独特、造型多变, 所以近年来使用的越来越多。由于这类字体的创造不是非常严谨, 所以一般造型活泼。 (如中特广告体、贱狗体、胡子体等)

中特广告体是一种随意书写的字体形象, 笔画粗细变化很大。横不平、竖不直, 结构也不规范。其艺术风格诙谐、刻意、俗野、怪异。适宜于儿童产品或娱乐性产品的包装。

柏青体结构上疏密结合, 讲究疏能走马但密不透风;斜正结合、错落有秩;笔画粗细对比强烈;拐角处有方有圆, 方圆结合;其民俗风味特别浓, 适合于表现农村的农副产品。

娃娃篆字形活泼可爱, 信手拈来充满童趣色彩, 颇具亲切感。在结构上追求变化, 笔画多弯曲, 或疏或密, 空白或大或小, 是一款比较自由的字体。适合于卡通书、儿童读物、儿童类的产品。

丫丫体的创作灵感源自儿童的书法, 虽然歪歪扭扭的但也质朴可爱。经过加工的丫丫体可读性和亲切感俱佳。此种字结构新颖、简洁有趣, 夸张变化适度, 笔画错落有致, 空白富于变化, 分布合理。

除了以上所述的选择字体外, 我们还会亲手设计一些字体, 以期能更满足产品包装所需。那么如何设计字体呢?首先要注意字体的识别性, 字体的基本结构是经过严格规定的, 不能随意改变。字体在进行设计时, 一般多在笔画上进行变化, 才能既保持良好的识别性又具有一定的设计感。其次是依据商品的属性, 选择某种字体作为设计的蓝本, 并根据产品的特性对其进行造型变化, 使之与商品结合得更紧密, 更加生动地传达商品信息。我们可以将文字与图形结合, 将文字融入图形之中, 或是将图形融入文字之中, 更能增加其趣味性。其三字体设计应具有艺术性, 在设计中运用美的形式法则, 使字体造型以其艺术魅力吸引消费者。

我们在设计包装上的字体时, 还可以把两种或多种字体组合在一个词语里。把重要的字用夸张的字体表现出来, 加强视觉吸引力。另外字体的排列方式也可以根据产品的特性任意调整, 以加强包装的活泼性和艺术性。

一个包装设计包括色彩、图形、字体三方面, 这三方面是相互联系、相互影响的。例如图形由很多卷曲的线条组成, 那么字体相应的也应有一些卷曲的线条;反之图形是由大量直线组合而成, 那么字体也应该选择直线类型的。图形的色彩和肌理也会影响到字体的色彩和肌理。这些都是在包装设计中要全面考虑到的。

摘要：在包装设计中字体是重要的组成部分, 它不仅是信息传达的途径, 也是构成艺术感染力的重要因素。如何创造和选择字体, 让其发挥独特的魅力, 是设计过程中的重要环节。大量好的包装都十分重视字体的设计, 甚至完全由字体构成画面, 虽不需任何其它元素, 但也突出了商品的特征和用途等。

关键词：包装,字体,设计

参考文献

[1]林国胜著《字体设计教程》.浙江人民美术出版社, 2006.

篇4：浅析UI设计中字体设计

文字是人类表达情感最好的体现，在UI设计中文字的美感对UI设计的成功与否有着很大的关系，文章主要就UI设计中的文字设计展开分析。

关键词：UI；界面设计；字体设计

文字是人类生活表达的一种方式，也是人们表达情感的一种直接体现。事实上，无论在那种视觉媒体中，文字和图片是最好的传达媒介。在设计的过程中，文字排列组合的好坏直接关系到所表达的视觉效果，因此在UI设计中，文字的字体设计占据很大的比重，它能够赋予设计的美感，提高设计作品的传达力，是版面审美价值的一种体现。

一、UI设计中的文字意义

（一）文字的可读性

文字最基本的功能是向大众传播各种信息与情感，所以在UI设计中，文字的最基本功能必须保证整体信息的传达，给大众一种清晰的认知。在设计中，文字要适当的简单易懂，避免过于文字过于凌乱，忘记文字的基本功能，当然以最精炼的文字传达作者的设计意图是需要考虑的。

（二）文字位子的整体性

文字的布局应该考虑到整体效果，也就是不能够让视觉感受到文字布局的冲突，这样会感觉不到画面布局的主次感。好的文字整体布局可以使设计作品在含义与气氛上达到和谐境界，事实上人都有着一种自然审美的观念，这是一个较为微妙的感觉，需要仔细的去体会。电脑在这方面所能帮到你的很少，有时还需要自己去注意细节。

（三）视觉美感

文字最为画面传感的要素之一，是视觉情感传播的主要媒介，因此它必须有着强烈的美感，，这样在能够人们感受到美。字型设计、字体的组合都能够让大众感受到愉悦，在心底留下美好的印象。如果文字不能够产生视觉美感，难以让大众在心理接受，甚至都对其不屑一顾，作者也就无法向他们传达自己的意图构想。

（四）文字设计的创造性

在进行UI作品设计时，需要保证作品的主体个性突出，这可以在文字的设计上有所突破，突出文字的个性化色彩，创造独特的字体，这样给予大众一种别开生面的感觉，对作者所展现的意图会有很大的帮助。在设计时，可以根据字体的形态特征在组合上进行探索，实现个性化的文体设计，从文字形象唤起大众心中的愉悦感受。

二、字体图形化设计

对于快速发展的互联网而言，单纯的文字美感设计是无法应对用户们的审美需求的，因此在单调的字体设计需要得到突破。字体图形化就是一种很好的突破化设计思路，更加能够满足电脑用户对个性化审美的需求。字体的图形化设计能够营造良好的页面范围，更好的传递设计意图。例如在进行页面设计时，我们需要对标题文案，包括整个活动的专题商业需求都要经过特殊的设计处理，这样才能够保证与内容文案形成对比性，能够吸引用户的眼球，帮助用户充分的了解页面信息。

（一）字体的变形设计

字体的变形常被运用到UI字体的设计中，它是在电脑字体的基本形态上做出稍微的变形，这样使得整体画面的线条显得更加圆滑，也是字体字型变得更有活力，当然这种变形调整需要依照具体的情况进行操作。当然字体的设计最终目的是让用户能够快速的获取信息，过于的字体变形会让字体变得模糊，使设计舍本求末，失去原有的意义。

（二）字体的组合设计

我们应该明白，字体不会是孤立存在的，这不仅是字体的来源可以追溯到图像，也就是说文字的本身来源是人类生活情感的象形。在某种程度上来讲，文字来源于图形，因此图形与文字是同源的，只是文字更加抽象。

图 字体组合设计

例如上图，字体与图片的相互相互融合，就能够更加清晰的理解和传达设计信息内容，并且取得良好的效果，在设计的时候需考虑与周围的其他页面元素的协调一致，强化页面的整体氛围的营造。需要把握它们之间的融合点，使其更加和谐。

（三） 3D字体设计

人们生活在三维的立体生活中，对空间的感觉很为情切，因此在平面中营造一种具有空间感与层次感的字体设计，可能会让用户觉得更加真实，更加有冲击力。3D设计需要借助相关的电脑工具来完成，不管是3D软件辅助设计还是PS/AI，都能够使文字根据光感实现层次空间的变化。

（四）字体颜色大小设计

文字的颜色要同图像的颜色保持一致并注意色彩搭配的和谐。一个站点通常只使用一到两种标准色，为了保持颜色上的一致性，标准色一致或相近。比如，站点的主题色彩如果为红色，可能就需要将链接的色彩也改为红色。

三、结语

在UI界面设计中，不单单是需要美术绘画，同样需要根据设计所要表达的意义对字体、字型的设计做出艺术性设计。判定一个界面设计的美感不是单纯的项目领导的肯定就可以了，而是应该以用户对于界面设计的满意度作为评价界面设计是否完美的标准，这需要最终用户对设计的感受，所以只有在设计中不断的与用户的视觉体验相连，才能够保证设计的完美。

【参考文献】

[1]郭丽莉，王文彬，费英.现代平面设计领域中文字的探究[J].商业文化（下半月），2011（02）

[2]李卉.图形化文字在信息传达中的应用[J].运城学院学报，2010（05）

[3]王晓丹.以人为本 创新感受——浅谈网页设计中UI设计的用户体验[J].中国艺术，2012（01）

篇5：UI设计规范（流程、界面）

一：UI设计基本概念与流程

1.1

目的规范公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设计的流程规范化，保证UI设计流程的可操作性。

1.2范围

l

界面设计

l

此文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。

1.3

概述

UI设计包括交互设计，用户研究，与界面设计三个部分。基于这三部分的UI设计流程是从一个产品立项开始，UI设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。UI设计师应全面负责产品以用户体验为中心的UI设计，并根据客户（市场）要求不断提升产品可用性。本规范明确规定了UI设计在各个环节的职责和要求，以保证每个环节的工作质量。

1.4

基本介绍

A、需求阶段

软件产品依然属于工业产品的范畴。依然离不开3W的考虑（Who,where,why.）也就是使用者，使用环境，使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄，性别，爱好，收入，教育程度等)。什么地方用（在办公室/家庭/厂房车间/公共场所）。如何用（鼠标键盘/遥控器/触摸屏）。上面的任何一个元素改变结果都会有相应的改变。

除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世，我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。

B、分析设计阶段

通过分析上面的需求，我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界面用于被选。

C、调研验证阶段

几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。

测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。

调研阶段需要从以下几个问题出发：

用户对各套方案的第一印象

用户对各套方案的综合印象

用户对各套方案的单独评价

选出最喜欢的选出其次喜欢的对各方案的色彩，文字，图形等分别打分。

结论出来以后请所有用户说出最受欢迎方案的优缺点。

所有这些都需要用图形表达出来，直观科学。

D、方案改进阶段

经过用户调研，我们得到目标用户最喜欢的方案。而且了解到用户为什么喜欢，还有什么遗憾等，这样我们就可以进行下一步修改了。这时候我们可以把精力投入到一个方案上，将方案做到细致精美。

E、用户验证阶段

改正以后的方案，我们可以将他推向市场。但是设计并没有结束。我们还需要用户反馈，好的设计师应该在产品上市以后去站柜台。零距离接触最终用户，看看用户真正使用时的感想。为以后的升级版本积累经验资料。

经过上面设计过程的描述，大家可以清楚的发现，界面UI设计是一个非常科学的推导公式，他有设计师对艺术的理解感悟，但绝对不是仅仅表现设计师个人的绘画。所以我们一再强调这个工作过程是设计过程。UI界面设计不存在美工。

2.UI设计流程

2.1

概述

根据上述原则，分析公司产品的特点，制定符合软件产品（或项目）生命周期的UI设计流程。每个产品（或项目）的生命周期中，UI设计师应该严格按照流程，完成每个环节的职责，确保流程准确有效的得到执行，从而提高产品的可用性，提升产品质量。

二：UI界面用户体验设计原则与规范

1：应该遵循的基本原则

无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。

这样得到的好处：

1：使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解

2：降低培训、支持成本，支持人员不会行费力逐个指导。

3：给用户统一感觉，不觉得混乱，心情愉快，支持度增加

做法：

项目组有经验人士，确立UI规范：

美工提供色调配色方案，提供整体配色表

界面控制程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用规范：

控件功能遵循行业标准，windows平台参见《Microsoft

用户体验》

控件样式在允许的范围内可以统一修改其样式、色调

参考其他软件先进操作，提取对本项目有用的功能，以使用，绝对不能盲从，漫无目的。

根据需要，设计特殊操作控件，准则为：简化操作、达到一定功能目的界面实施人员与美工商榷控件可实现性,(如不实行此步骤，将会导致各自对对方工作不满意，也会产生不一致的混乱)。重复叠代上述工作。

建立合理化文档《UI标准》描述上述规范，强行界面设计者理解之，并作为开发准则，SQA人员进行监控开发人员是否遵循，及时告诫开发人员。

2：(Color)颜色使用恰当，遵循对比原则：

1：统一色调，针对软件类型以及用户工作环境选择恰当色调：

如：安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等

2：如果没有自己的系列界面，采用标准界面则可以少考虑此方面，做到与操作系统统一，读取系统标准色表

3：色盲、色弱用户，即使使用了特殊颜色表示重点或者特别的东西，也应该使用特殊指示符，?quot;!，?着重号，以及图标等

4：颜色方案也需要测试，常常由于显示器、显卡的问题，色彩表现每台机器都不一样，应该经过严格测试，不同机器进行颜色测试

5：遵循对比原则：在浅色背景上使用深色文字，深色背景上使用浅色文字，蓝色文字以白色背景容易识别，而在红色背景则不易分辨，原因是红色和蓝色没有足够反差，而蓝色和白色反差很大。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。

6：整个界面色彩尽量少的使用类别不同的颜色

itop色表

具体标准参考美术学统计学术标准。

色表的建设，对于美工在图案设计、包装设计上起着标准参考作用，对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。

3：(Resource)资源

一个多姿多彩的人机交互界面，少不了精美的鼠标光标、图标以及指示图片、底图等。

1：也需要遵循统一的规则，包括上述颜色表的建立，图标的建立步骤也应该尽可能的形成标准，参考itop的outlookbar图标设计标准

2：有标准的图标风格设计，有统一的构图布局，有统一的色调、对比度、色阶，以及图片风格

3：底图应该融于底图，使用浅色,低对比，尽量少的使用颜色。

4：图标、图像应该很清晰的表达出意思，遵循常用标准，或者用户机器容易联想的到物件，绝对不允许画出莫名奇妙的图案。

5：鼠标光标样式统一，尽量使用系统标准，杜绝出现重复的情况，例如某些软件中一个手的形状就有4钟不同的样子。

4：(Font)字体

使用统一字体，字体标准的选择依据操作系统类型决定。

中文采用标准字体，“宋体”，英文采用标准

Microsoft

Sans

Serif

不考虑特殊字体(隶书、草书等,特殊情况可以使用图片取代),保证每个用户使用起来显示都很正常。

字体大小根据系统标准字体来，例如

MSS字体8磅，宋体的小五号字(9磅）五号字（10.5磅)。

所有控件尽量使用大小统一的字体属性，除了特殊提示信息、加强显示等例外情况

ITop采用BCB，所有控件默认使用

parent

font，不允许修改，这样有利于统一调整。

·系统大小字体属性改变的处理。

Windows系统有个桌面设置，设置大字体属性，很多界面设计者常常为这个恼火，如果设计时遵循微软的标准，全部使用相对大小作为控件的大小设置，当切换大小字体的时候，相对不会有什么特殊问题。

但是由于常常方便使用点阵作为窗口设计单位，导致改变大字体后，出现版面混乱的问题。

这个情况下，应该做相应处理：

1：写程序自动调节大小，点阵值乘以一个相应比例

2：全部采用点阵作为单位，不理会系统字体的调节，这样可以减少调节大字体带来的麻烦。BCB/DELPHI中多采用这种方法，但是必然结果是和系统不统一。

5：(Text)文字表达

提示信息、帮助文档文字表达遵循以下准则：

1：口语化、客气、多用您、请，不要用或少用专业术语，杜绝错别字

2：断句逗号句号顿号分号的用法，提示信息比较多的话，应该分段，3：警告、信息、错误

使用对应的表示方法

4：使用统一的语言描述，例如一个关闭功能按钮，可以描述为退出、返回、关闭，则应该统一规定。

5:

根据用户不同采用相应的词语语气语调，如专用软件，可以出现很多专业属于，用户为儿童：这可以语气亲切和蔼，老年用户则应该成熟稳重。制定标准遵循之。

6：(STYLE)控件风格，不要使用错误控件，控件功能要专一

有设计好的同一风格的控件，如果没有能力设计出一套控件，则使用标准控件，绝对不能不伦不类，杂乱无章

·不要错误使用控件，例如：

使用Button样式做TTable的功能，拿主菜单条显示版权信息，·统一类型的控件操作方式相同，例如一个控件双击可以执行某些动作，而同样控件，双击却没有任何反映

·一个控件只做单一功能，不复用

很多人为了写程序方便，喜欢把一个控件在不同情况下做不同功能用，这些对用户初次理解增加难度，只有用户熟悉后才能理解。

例如

改变红色选项，左边的参数代表不同的设置，可能由于为了节省控件或者编程量，但是只有熟练用户才回使用，这种情况下解决方法：

1:分组，使用双份控件

2：使用TABLE页，给用户很明显的视觉变化

==========================================================================

总结起来就是：

1.产品制作人，写产品计划书。

2.用户体验研究员，作调查分析。

3.信息建构师，设计产品架构。

4.互动设计师，作出互动流程。

5.视觉设计师和用户界面设计师，作出页面视觉设计。

6.前台工程师，前台开发。

7.后台工程师，后台开发。

8.用户体验研究员，做用户测试确保质量。

1.确认目标用户

在软件设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需求。用户交互要考虑到目标用户的不同引起的交互设计重点的不同。例如：对于科学用户和对于电脑入门用户的设计重点就不同。

2.设计目标一致

软件中往往存在多个组成部分（组件、元素）。不同组成部分之间的交互设计目标需要一致。例如：如果以电脑操作初级用户作为目标用户，以简化界面逻辑为设计目标，那么该目标需要贯彻软件（软件包）整体，而不是局部。

3.元素外观一致

交互元素的外观往往影响用户的交互效果。同一个（类）软件采用一致风格的外观，对于保持用户焦点，改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡量方法。因此需要对目标用户进行调查取得反馈。

7.可用性原则

7.1可理解

软件要为用户使用，用户必须可以理解软件各元素对应的功能。如果不能为用户理解，那么需要提供一种非破坏性的途径，使得用户可以通过对该元素的操作，理解其对应的功能。例如：删除操作元素。用户可以点击删除操作按钮，提示用户如何删除操作或者是否确认删除操作，用户可以更加详细的理解该元素对应的功能，同时可以取消该操作。

7.2可达到

用户是交互的中心，交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏（一般来说超过4层）那么用户达到该元素的几率就大大降低了。可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。（参考简单导向原则）

Quote

[阶段一：分析]

1、用户需求分析

2、用户交互场景分析

3、竞争产品分析这两者可以说是相辅相成的。

对于一个较为正规的项目而言，必然有对用户需求的分析内容。其中用户UI需求是重要的组成部分。如果说UI设计原则是所有UI设计的出发点的话，那么用户UI需求就是本次设计的出发点。好的UI设计建立在对用户深刻了解之上。因此用户交互场景分析就很重要。对于大部分项目组来说也许没有时间和精力去实际勘查用户的现有交互、制作完善的交互模型考察，但是UI设计人员在分析的时候一定要站在用户角度思考：如果我是用户，这里我会需要什么。竞争产品能够上市并且被UI设计者知道，必然有其长处。这就是所谓三人行必有我师的意思。每个设计者的思维都有局限性，看到别人的设计会有触类旁通的好处。当然有的时候可以参考的并不一定是竞争产品。

[阶段二：设计]

采用面向场景、面向事件驱动和面向对象的设计方法。

UI设计着重于交互，因此必然要对最终用户的交互场景进行设计。软件是交互产品，用户所作的就是对软件事件的响应以及触发软件内置的事件。因此要面向事件设计。现在的程序开发主流采用的是面向对象设计。面向对象设计可以有效的体现面向场景和面向事件的特点。设计的四个要素：交互对象,数据对象,事件（交互事件和异常）,动作

[阶段三：开发]

通过：用户交互case图（说明用户和系统之间的联系）用户交互流程图（说明交互和事件之间的联系）交互功能设计图（说明功能和交互的对应关系）

最终得到UI的设计产品。

[阶段四：验证]

正如UI交互设计原则探讨文中提到的，对于UI产品的验证主要从下面几个方面入手：

1、功能性对照UI设计的再好，和需求不一致也不可以。

2、实用性内部测试UI设计的最重要点就是实用性。

3、用户焦点小组UI设计是否优秀的重要衡量依据。最后，说一点其他的问题。现在往往认为交互式设计和最终的UI效果设计可以截然分开。这就好比说需求可以和设计截然分开，是不可能的。

Quote

UI设计流程以及设计师参与的环节

最近的工作中总结出一条结论：拥有一个完善规范的流程，是决定着一个项目走向成功或失败的关键。

对于UI设计的工作流程，我觉得可以根据“市场分析－用户分析－架构－原型－界面－输出－完善”这条主线制定，每个环节UI设计师都应参与其中。

1.产品定位与市场分析

这一类工作大多都是由新产品研发部门以及市场需求完成的，但UI设计师应了解产品的市场定位、产品定义、客户群体、运营方式等。

2.用户研究与分析

这个过程是非常重要的，设计师应该找到合适的方法来完成此环节。你可以搜集相关资料分析目标用户的使用特征、情感、习惯、心里、需求等，提出用户研究报告和可用性设计建议。这部分工作也可和团队配合完成。时间与项目需求允许的情况下，更可以制定实景用户分析。

3.架构设计

这里涉及到比较多的界面交互与流程的设计，根据可用性分析结果制定交互方式、操作与跳转流程、结构、布局、信息和其他元素。

4.原型设计

我觉得这里应该是一个小的阶段标志，要对前面所有工作加以设计方面的实施，根据进度与成本，可以把原型控制在“手绘－图形－FLASH-视频”几个质量范围。原型的本质更倾向与一个DEMO，它不需要有全部的功能，但要体现出设计对象的基本特性。

5.界面设计

如果很倾向于图形界面设计，这儿是你最喜欢的部分。但一定要结合循环讨论过的分析结果做设计，否则你的作品很难被人信服。色调、风格、界面、窗口、图标、皮肤的表现是本环节的关键。

6.界面输出

作为设计师，在这一部分的工作就是配合好开发人员完成相关的界面结合。

7.完善工作

这个环节是很多部门共同参与的，包括可用性的循环研究、用户体验回馈、测试回馈。同时，UI人员也应该把一些可行性建议进行完善。很多设计师做了东西不喜欢改，这是一个大忌。

篇6：iOS平台UI设计基础规范

一、UI的控件概述：

1、框架UI的元素分为4类：

A：栏：状态栏目和导航栏的结合体;

B：内容视图：应用显示的内容信息，包括相关的交互行为，例如滚屏、插入、删除等操作进行排序;

C：控制元素：产品行为或显示的信息;

D：临时视图：临时向用户提供重要的信息，或提供额外的功能和选项。

2、框架UI的尺寸：

3、图标icon的尺寸：

二、UI的布局概述：

1、可点击对象的区域：尺寸不要小于44*44px;

2、将重要的内容和功能放在权重高的位置，将重要的元素放在前半屏比较好，对于阅读习惯从 左到右的用户来说，更贴近屏幕左侧位置容易引起关注的;

3、利用视觉表现形式的权重和平衡，尺寸较大的元素具有更高的权重，对于尺寸较小的元素来 说，更能吸引目光，看上去更加重要;

三、UI的模态情景概述：

1、模态：一种用来承载特定内容、功能或体验的模式，有其自身的优缺点。它可以帮助用户完 成某些任务，或在不受干扰的情况下获取信息，但会暂时性的强迫用户停止与应用其他部分 的互动;

2、保持模态任务的简单、简短、易聚焦：不要将模态视图打造的好像是嵌在应用当中的迷你应用;

3、始终提供一种明显而安全的退出方式：要确保用户在退出模态视图时，能够对接下来要发生的 事情有明确的认知;

4、使用警告框来传递那些必不可少的重要信息，通常还要提供可执行的功能选项。

四、UI的手势交互概述：

A：通过点击(tap)：按压或选择一个对象;

B：通过拖拽：滚屏或移动对象(将从界面的一边移动到另一边);

C：通过滑动(flick)：快速滚屏或移动对象;

D：通过一个手指轻扫(swipe)：可展现更多内容，例如：列表的删除按钮，从界面顶端展开通知中心;

E：通过双击(double tap)：可将内容放大置于屏幕中间，主要是放大和缩小的转换;

F：通过双指涨开(pinch open)或闭合(pinch close)：对内容进行放大或缩小;

G：通过长按(touch and hold)：在可编辑或可选择的文字上显示放大镜，用来定位光标;

H：通过摇晃(shake)机身可执行撤销或重做的操作，

五、UI的动画概述：

1、漂亮而精致的动画效果遍布于ios各处，它们使应用体验更具动态性，更加吸引人，精细而恰 当的动画效果可以：

A：传达状态

B：增强用户对于直接操作的感知

C：通过视觉化的 方式向用户呈现操作结果

2、尽可能与ios内置的应用的动画模式保持一致：人们已经习惯内置应用当中各种精妙的动 画效果，实际上，用户往往会将内置应用当中的动效看作一种体验的标准，例如切换视图时的平滑过渡效果，切换横竖屏时的流畅反馈，或是能表现出各种物理效果的滚屏动画等等，这些 都逐渐成为了人们预期当中的一部分。

六、UI的字体概述：

1、字体是ios7设计的关键，大多数操作都是点击文字或点击图标，按钮也会有，但是占的比重很小;

2、苹果的默认字体是Helvetica Nenu，一种纤细简单的文字，但那不是你唯一的选择;

3、Ios7的字号稍微加大了，主要由于它的用途，而且文字之间的层级关系至关重要，利用颜色 和不同的粗细，来保持文字的布局和UI元素的清晰易懂。

4、苹果字体规格说明：

A：导航栏标题：medium 34px;

B：按钮和表头：light 34px

C：表格标签：Regular 28px;

篇7：标识字体设计中的细节

Donald Young是一位职业的字体设计师，专注于公司和企业的专用字体以及字体标志设计，可以说1926年出生的他是世界上仍然健在的最杰出的字母标识大师，曾为多个著名的企业公司设计过标识字体，年过八旬的他仍然致力与字体设计与设计教育，从1955到1978年，从至今，Donald已在Art Centre College任教46载…

一些很小的改变成就了从传统到现代的文化传承，我们今天看到的字母和五百年前的几乎相同，这种相对的稳定性对于一个整个童年都处在颠沛流离和寻找安定环境的Donald来说是一种慰藉。可能是在字母中他找回了一种可以把自己寄托的安定感，所以他说，每当他手握铅笔时，他都幸福得像一个小孩。

大多数的时候，精心挑选出一套字体，对于一个需要标准化应用的产品来说是一个很好的选择， 因为如今一个字体类型中，可能会有500种以上的字体可供选择，不过对于标志字体，那几个固定的字母组合就必须要针对不同的项目进行全新的设计。

当创新变得非常必要的时候，创新本身所代表的意义就显得更加重要。有时候我们太热衷与创新把字母重新设计得曼妙纤细华丽优美，任由这个趋势发展的话这些文字很有变成不易识别的异类信息，保持着清醒的思路通过细节的调整让它们的组合变成更易识别和更具有某种特质和倾向性的视觉符号，大概这是设计之所以存在的理由吧。

无数细微之处的创新，在已有的字体基础上创造出一个更好的更优化的，更容易被识别的字体相对于我们今天为之努力的互联网产品，有着某种相同的特性：

每个字母，每个交互的细节都存在着可以被优化的机会点，我们在设计的过程中不断地体悟、分析和权衡这些细小的点，一个人或一个团队对每个细微的点都有着不同的理解，不同的人会有不同的处理方式，每个点的不同处理方式都会在一定的程度影响到整个产品的性格。再加上一个时间维度来看，每个细微点出现的时间不同，或者是领悟到这个细微点的时间不同，这样，设计似乎就变成了一个千头万绪而且没有终点的工作。这时的我们大可不必烦躁，不要烦恼，平静地来看看这个的老头用铅笔在纸上描绘出来的那一股股隽永的线条，体味一种带着执著的优雅吧。

首先介绍他的三款字体：Home Run，Young Gallant和Young Finesse。

Donald这样描述他专注标识设计的原因：“学好如何画出漂亮的字母是件需要花费很多时间的事情，我从1948年就开始学习它，现在我仍然在学习。画出一套好的字体让我很享受，这可能和我喜欢细节的特质有关。”虽然人人都说Donald Young是一个标识设计师，教育家，他自己倒很乐意说他其实毕生都醉心于重复地描绘字母，他就是那么热爱一遍又一遍地描绘它们。

Donald为很多知名的企业机构设计过标识，以下是我搜集到的一部分。

细节中的再设计

已经有了那么多好看的字体，如何要有新的设计?新的设计有何存在的理由?

简单的回答这个问题可以归结为2个字“定制”，经过设计的字母会针对不同的品位，不同的性格，不同的状态，是一个独一无二的标识，

所有的公司都需要与行业中的其他公司区别开，需要去契合某个人群的独特品味。字号、间距、结构……有时这些细微的差别就会造就完全不同的印象。设计一个Logo有很丰富的视觉语言，然而就算如此要表达一个抽象的概念都需要付出非常大的努力。要单单通过字体的细微变化来给人一种更友好的视觉和认知体验的难度就可想而知了。

这需要非常多的草图的反复描绘来想清楚所有的细节。Donald自认为最值得骄傲的一个标识Prudential保险公司的标识，设计它的过程中产生了 1500张草图。

*这是Prudential之前的标识。他们现在的需求是要重新设计一个友好的标识字体。

*铅笔手绘字母组合用以透彻理解字母的细微差别。

*多种字体组合标识，选出最理想的基本字体。Century字体是美国学校教科书常用的一种字体，美国人觉得它很友好，不是字体本身有什么魔力，而是很多很多人的童年都是看着它度过，这产生了一种亲切感。

*人们识别单词的注意焦点在字母组合的头部。而对于字母的脚则不那么关注，所以需要优化和重新设计的地方应该是字母组合的头部。

*字母a的变化，去掉了尾巴，减少字母占用的空间。增加了“肚子”，增强可识别性。

*字母t的变化，尾巴拉长，字母头拉长。可在字母组合中更容易被识别。

*字母间距整体微调。

*段落文本的整体测试。

积累与传承

作为一名老师，Donald总是这样对他的学生说：“我不关心规则是什么，我知道有许多规则，然而我的标准就是它看起来究竟怎么样，必须一遍遍的打磨，直至看起来无可挑剔。”

“我们没必要的创新，除非这个改变相比之前解决方式足够的好。”

后记

定制服务正越来越为趋势，量身定制就需要有更充分的细节设计，发现这些细节并且做好这些细节，需要长期积累处理细节的能力。

“再一次，改变世界”的背后是无数细微点的创新汇聚成的全新集合，做出好的产品需要良好的传承和坚持不懈的积累。如同一套标识一般，产品要保持一个统一的产品个性，给人以安定感，也通过不断的迭代完善才会被打磨得越来越优秀。不同的产品的点滴的积累中，一种信念会得到用户的认可，一个企业就得到了用户的尊敬。

篇8：视觉传达设计中的创意字体设计

1、创意文字的理解

文字是一种代表性的符号, 有着记录与传达语言的功能, 不仅是现代社会信息交流沟通的载体, 它用其本身特有的行来传递。在阅读、浏览文字、获取所需的信息时, 阅读者首先是观察到它的“外形”, 然后在对它的“形”的理解基础上, 深入到文字的“音”和“意”的层面。阅读者不仅会注意文字内在的涵义, 在视觉上传达的形式也同样影响着阅读者的心理, 所以文字的视觉传达形式也举足轻重。

视觉传达中的创意字体设计在日常生活中也就越发重要。创意字体设计是在标准的美术字体——楷体、宋体、黑体等字体的基础上赋予其更多美感, 设计意味。创意字体设计在一定程度上摆脱了原本字形和笔画的枷锁, 依据文字的涵义, 合理结合设计手法, 发挥想象力, 艺术地重新组织结构, 再创新的字体形式, 创造视觉差异, 加深阅读者对其的印象。

2、建立创意字体的设计新规则

创意字体设计以创新为目标, 独具设计韵味的字体会给阅读者留下深刻的印象, 有助于字体传播功能的展现。字体的创意设计也应与时俱进。

字体间的差异是由笔画和结构等视觉规则不同所引起的。例如宋体字里的“横细竖粗、撇如刀、点如瓜子、捺如扫”、而其他的黑体字, 楷体字则不能这样概括了。基本字体有“横平竖直、四边顶格、靠边直笔往里让”这样的规则, 但在创意字体设计中就不必非得恪守这样的原则。字体创意设计就是在创造一种新的视觉规则。比如在汉字设计中, 就要对点、横、竖、撇、捺等等基本笔画的视觉外在形态作出规定, 对笔画的组合方式即字体的结构作出规定。新视觉规则的贯彻, 必然引领着新风格, 新规则既可以是创意字体设计整体的变革, 也可以是局部的改良。不能要求一种创意字体设计里所有的笔画和结构都要重新确立规则, 一点一画的有规律的、小范围的的新变化也可以体现出一种新的创意。基本文字通过创意型的艺术化设计后, 可以让文字形象变得情景化、视觉化、强化语言效果, 对提升创意字体设计作品的设计品质和视觉表现力发挥了极大性的作用。

二、视觉传达中创意字体设计

1、字形特点的设计

基本字体的字形除了从自身的含义上来理解外, 没法从字形上更形象, 更生动的明白其内含。通过艺术化的创意设计会赋予字体情景化、视觉化, 同时加强了语言效果, 更加善于阅读者理解的视觉符号。在创意字体设计中, 要合理把握字形变化的个性特点。例如撞击、猛烈、坚实、硬朗等这类字体的涵义视觉冲击强, 节奏明显, 容易给阅读者视觉上的震撼。这类字体因其自身字形富有张力, 所以在表现紧张、惊险时刻常用。在字形变化中特点:软, 例如:温婉、轻柔、绵密等, 这类字体情感上比较细腻, 常用在情感类设计主题或关于女性设计主题等方面, 容易使阅读者阅读时产生情感共鸣。

2、字体变形的几种方法与技巧

对设计师来说, 文字永远是不成熟与不定型的。创意文字设计就是要重构文字的形式。在创作文字类作品时, 就要对文字的形态敢于和善于加工。在此例举几个字体变形的方法和技巧。

结合法, 把不同的事物结合在一块, 在文字设计中融入其他的视觉形象, 给阅读者的感觉是非常规的拼凑, 而是一个完整且独特的视觉新体验。设计中, 不要只按事物的逻辑或原本的内容去思考形象, 比如需要设计“雨”就添加雨滴、雨伞等;设计“雪”时, 就添加雪花等, 这样的结合显得十分苍白, 缺少新鲜感。这类型的创意文字设计在生活中十分常见。想要吸引阅读者的眼球, 就要寻找非逻辑的组合, 将风马牛不相及的形象有机地结合在一起, 形成一个新的文字形式。替代法, 在形态统一的文字元素加入另类不同的图形元素或文字元素。其本质是根据文字的内容意思, 用某一形象替代字体的某个部分或某一笔画, 这些形象或写实或夸张。将文字的局部替换, 是文字的内含外露, 在形象和感官上都增加了一定的艺术感染力。粗糙法, 在如今高质量的印刷时代, 字模磨损后的缺棱少角, 古印章的斑驳, 手工书写的随意等, 这些以往岁月里司空见惯的视觉效果, 今天竟变得极有味道, 让人备感亲切。文字设计当中, 主动制造一些粗糙的效果。对粗糙的文字原型要精心整理细节, 强化整体特征, 增强形式美感;对精致的文字原型要善于添加疵点, 稍加破坏, 使之从单调的完美变为有魅力的不完美。裁剪法, 可以把它概括为敢裁敢剪。这样, 连断之间就有了重组, 裁剪之际就有了取舍。把一些封合包围的字, 适当的断开一口出来, 或把左边断一截, 或右边去一截, 重点:要在能识别的情况下适当断肢, 从而反射他的与众不同的特点来。譬如裁缝, 不进行加工, 怎么能把一块布料做成一件时装呢?文字的基本形态就像一块布料, 设计师应像裁缝。著名设计师靳棣强先生就曾经做过10年裁缝, 有人觉得不可思议, 其实这二者之间有着共同的渊源。

三、创意字体设计中应该注意的问题

1、注意创意字体设计的可阅读性, 避免设计中形式、内容不相符合

在设计创意文字时都需要严谨仔细的构思, 设计者必须去认真的推敲尝试每一个笔画的变化方式, 要找到最合适的表现方式, 同时结合文字内在要传达的含义。这样才能让每一个笔画都契合这个字体, 符合整组字体的空间规则。在做设计时, 设计者应尽可能地保证文字的可阅读性, 终归是要面对大众的设计, 要考虑到大多数阅读者的文化背景和图形识别能力。设计者的作品应准确表达信息, 避免产生歧异, 使阅读者误解。

2、注意创意字体设计的风格统一性, 避免字体结构等变化过于繁杂等问题

当设计作品外在形式的表现力超越了内容所能承受的负荷, 没有把握好字体的肩胛结构, 就可能会导致字体设计大小不一、分布不均、笔画不均、缺乏统一风格, 杂乱繁琐。字体创意设计虽然比较自由, 但应保持字与字之间的统一性。一组字体设计中, 应保持一种统一的变化规则, 不然会造成杂乱感。因此在设计创意字体时, 可以参考下类似的优秀字体的间架结构, 调节好每个字的笔划分布和重心均衡。在选定字体的风格趋势后, 给字体做相应的视觉梳理。要注意把握字体上下, 左右的比例关系, 注意笔画之间的穿插和文字的结构处理, 统一应用笔划、倾斜等规则。鉴于字体形态的趣味性, 可以选择了图形元素来丰富字体本身。同时兼具不同尺寸下的显示效果, 做笔划的删减和间距调整。在细节的表现上, 要自始自终考虑到整体的效果, 保持一致的设计风格。

四、结语

创意字体设计实在基本字体基础上的附加设计性的创新和突破, 应抓住其特点, 遵循一定的视觉规律, 选取富有美感的表现形式, 跟紧时代步伐, 不断找到新的角度, 创作更多各式的创意字体设计作品, 为视觉传达设计服务, 为大众视觉盛宴再填添精彩。

参考文献

[1]闫飞.浅谈汉字创意中字体设计原则于应用探析[J].青春岁月, 2015, 17.

[2]代福平.字体创意[M].南昌:江西美术出版社出版, 2006.

篇9：字体设计在平面设计中的应用论文

书的封面就好比是人的“脸面”一样，给予大众最初始、也是最直观的印象。所以，封面的设计至关重要，字体设计的装帧可以起到对封面画龙点睛的重要作用。一个精美的书籍设计，可以起到提纲挈领、吸引大众注意力的作用。所以，应该开拓创新性思维，通过文字的排列组合、设计整理，体现出书籍的整体风格。设计者不能分割书籍的内容与主旨，一味地考虑画面的美感，要结合书籍内容，设计出适合这本书风格的封面设计。比如，如果是少儿类的图书，在版面设计时要考虑到儿童活泼好动、天真烂漫的个性，设计出儿童喜欢的纯真、可爱的风格;如果是法律文史类的图书，就要考虑到法律类书籍的严谨，画面设计力求稳重、简单、有条理一点;如果是时尚类的图书，在封面设计时，要考虑到个性与时尚的完美结合，尽可能地体现时尚元素，与时代接轨。所以，在字体设计时，要充分考虑文字的具体内容，力求给读者提供不一样的视觉盛宴。

4.2平面广告设计中的应用

通过实际的广告设计不难发现，字体在平面广告中占据着极大的构成比例。往往在进行广告设计中，设计师要正确划分标题、正文及广告语的行间距、字号、文字的排列组合次序，通过点、线、面等各个领域和形态开展设计，通过强烈的视觉对比，强化设计者所要表达的文字主题内容。

4.3标志设计中的应用

每个公司为了展现企业的品牌文化，彰显企业的代表产品，往往都会有自己独特的LOGO设计。字体设计在公司的标志设计中起到了至关重要的作用。在如今的LOGO设计中，汉字往往被赋予不一样的装饰方法，比如加粗、放大、变化、旋转、空心，等等。通过字体的美化，阐述不一样的含义，这样的装帧设计可以加深大众对设计者用意的理解。

4.4包装设计中的应用

生活中，所有事物都是由包装而成的，一个好的包装会很快夺取大众的眼球。比如，在超市购物时，在没有品尝到食物时，决定购买力的第一要素就是视觉，一种感官上的判断。一种包装精美、设计精良的零食会很快获得人们的“芳心”，促使人们掏钱去购买。所以，包装设计的好与坏对于大众消费者而言，可以起到事半功倍的效果。在包装设计上，应该遵循一个原则，就是要简单、一目了然，要让大众在第一时间知道你所要表达的信息，一个简单、直白的介绍往往要比花哨的介绍更加深入人心。简单的画面设计也会给大众一种愉悦的感觉，过多的元素反倒会让大众眼花缭乱，不知道该如何选择。

5结语

综上所述，要大力发展字体设计在平面设计中的应用研究，促进平面设计的推广与发展。在信息化的时代背景下，要利用科技化的元素，将其与字体设计进行有机结合。另外，利用创新性、发散性思维，开拓视野，用崭新的视角开展有创意的设计，力求呈现出中国文字的博大精深与独特魅力，促进平面设计的不断深化与发展。

参考文献:

[1]王龙兵.浅谈平面设计中的字体设计[J].商业文化(学术版)，，(12):329-330.

[2]黄岩，纪晓燕，李炯.字体设计[M].上海:上海人民美术出版社，.

[3]张友明.文字在平面设计中的妙用Ⅲ[J].上海艺术家，，(04):128-130.

[4]沈雁冬.探索字体设计课教学的新思路———关于字体设计中空间、时间、材料的思考[J].大众文艺，，(10):255.

[5]王蕾.字体设计在平面设计中的应用[J].科教文汇(下旬刊)，，(12):261.

[6]于迎.试论字体设计在平面设计中的重要作用[J].今日南国(中旬刊)，2013，(05):81.

篇10：材料设计在UI界面中的体现

题 目：探析材料设计在UI界面中的体现

学 生： 王梦琦 学号： 201106010224

系 别： 设计艺术系 专业： 艺术设计 入学时间： 2011 年 9 月 13 指导教师： 王淼 职称： 讲师 完成日期： 2015 年 5 月 12 日

诚 信 承 诺

我谨在此承诺：本人所写的毕业论文《探析材料设计在UI界面中的体现》均系本人独立完成，没有抄袭行为，凡涉及其他作者的观点和材料，均作了注释，若有不实，后果由本人承担。

承诺人（签名）：

年 月 日

探析材料设计在UI界面中的体现

姓名：王梦琦

学号：201106010224

指导老师：王淼

摘要：随着UI设计的不断发展，近期出现了一种新的界面设计方向，它就是材料设计。论文以材料设计在UI界面中的体现为题，分析了材料设计的艺术特征，认为材料设计不仅有丰富的视觉空间，还有统一的视觉动效。进而着重从界面风格、布局、图标、按钮四个方面，探讨了材料设计在UI界面中的应用，为UI界面提供了新的设计思路，同时开拓了视觉设计视野。

关键词：材料设计、UI界面、系统动效、界面风格

Theory of material design in the UI

Name:WangMengqi Student Number:201106010224

Advisor:WangMiao

Abstract: With the continuous development of UI design, recently there is a new interface design direction, it is the material design.Thesis topic, reflected in the UI interface design are analyzed the art features of material design, think material design not only has the rich visual space, and unified visual effect.And emphatically from the interface style, layout, ICONS, buttons, four aspects, this paper discusses the application of material design in the UI interface, for UI interface provides a new design idea, develop the visual design view at the same time.Key word: Material design, UI interface, system dynamic effect, interface style

目 录

引言

1.材料设计与UI界面 1.1材料设计的含义 1.2 UI界面的含义 2．材料设计的艺术特征 2.1丰富的视觉空间 2.1.1大胆的色彩对比 2.1.2鲜明的视觉层级 2.2统一的视觉动效 2.2.1卡片式渐变 2.2.2交互性设计

3.材料设计在UI界面中的应用 3.1材料设计在界面风格中的体现 3.2材料设计在界面布局中的体现 3.3材料设计在界面图标中的体现 3.4材料设计在界面按钮中的体现 结语 参考文献

引 言

移动设备的崛起带来了用户界面设计的变革，材料设计是近期出现的一种新的界面设计方向。材料设计通过视觉空间和视觉动效来展现它的艺术魅力，其中的色彩搭配使得界面看起来非常的大胆，充满色彩感，凸显内容。微妙的动画、阴影也使得用户与材料设计的互动更加有趣。在UI界面中，材料设计的界面风格和布局都有了很大的改变，在图标和按钮上也进行了改进，有很多令人愉悦的小细节，给用户提供了一种新的体验模式。材料设计不仅仅是一种视觉风格的转变，而是一种设计语言和思维方式的演变，它将引领UI设计的潮流趋势。1.材料设计与UI界面 1.1 材料设计

Google今年推出了新的移动设计方向“Material Design”，我把它翻译成“材料设计”。“材料”是种隐喻，即空间的合理化及系统动效的统一。2014年, 扁平化设计是最流行的UI设计趋势，而它的“过于平”也引起了一番热论，但材料设计在扁平化上作了微妙的渐变，层次感和动画，保留了意义上的有形世界。所以，我们可以形象的理解材料设计是“向拟物回跳一下的扁平化设计”，但材料设计本身又是独立的。

材料设计的中心思想，便是把物理世界的体验带进屏幕。将现实世界中纸张的特性挪到电子屏幕里，在“纸”上呈现信息内容，给用户一种贴近真实的体验，让整个界面看起来简洁、直观，让人眼前一亮。当前，Android 7的WPS就是基于材料设计的全新设计，业内专家表明:材料设计或将成为将来ＵＩ界面设计的趋向，这类设计理念让安卓界面在体验上更加新颖和简洁。1.2 UI界面

UI的意思就是用户界面，用一句话概括就是人和工具之间的界面。在我们生活中，界面同样体现在某一些方面，比如看电视的时候遥控器和屏幕就相当于这个界面。它不仅仅是由用户与界面两个部分组成，同时还包含着用户与界面之间的交互关系。

JefRaskin在《人本界面，交互式系统设计》一书中指出“就消费而言，界面就是产品。”在这里，界面包括产品外观和产品的交互行为。一个美观而不失实用的界面会给人带来轻松舒适的视觉享受，它会吸引用户去探索，去发现有趣之处，拉近人与电子设备之间的距离，让用户乐于使用。界面设计并不是仅仅为了美观，他需要为用户而设计，需要考虑用户的使用环境与使用方式，它是考虑用户主观情感的科学性的艺术设计。2.材料设计的艺术特征

2.1 丰富的视觉空间 2.1.1 大胆的色彩对比

用户第一次看到一个UI界面时，会对色彩留下最深刻的映象，因此色彩是UI界面设计中不可缺少的视觉元素。如图1，材料设计崇尚多彩，但它并不使用那种很艳丽的颜色，大多采用清新靓丽的色彩，清爽的页面通常都离不开白色背景的映衬。为过于艳丽让人感觉到俗气。

在材料设计中，界面一般采用不同的色调来区分各个栏目的主题，而部分细节的处理则喜欢用靓丽分明的色条或色块。如图2，工具栏大块区域采用了蓝色为主色，而状态栏采用了比主色稍深的蓝色。如图

3、图4用靓丽的色条来强调标题，同时强调色可被用来当做按钮和控件或开关和滑块。

2.1.2 鲜明的视觉层级

假如某篇文章的标题比内容概述更重要，标题就应该有更多视觉主导力。主导元素是所叙述故事的起点，是用户接触设计的入口，能够将用户注意力第一时间吸引到设计师希望用户注意的地方。为了最快的吸引用户注意，可以通过对比、强调、图5

图6 图 2

图3

图4 图 1 同时将本来靓丽的色彩加入一点点的灰色，不但让图案变得生动起来，又不会因和相对的视觉重量建立主导地位元素。如图5,是材料设计在Feedly阅读器里的应用，图中的主导元素是顶部的图片，占据了最大的面积，深色图片底下大面积白色区域与图片形成对比，打造出鲜明的用户界面，吸引用户关注。图片上的“Food”字样可能是页面最重要的信息，清晰阐述此页面的主题。在一个设计中，首先突出主导元素，其次就应该强调焦点。如图6，此页面主导元素是人物图片，与周围的字体形成本质对比，而它的焦点是图上加粗的黄色字体“GIRL”，旁边 的播放按钮也是焦点之一，从而构建出视觉层级、视觉意义以及视觉聚焦。2.2 统一的视觉动效 2.2.1 卡片式渐变

在材料设计上，动效的理念有着相通的原理。动效连接于整个应用的程序流程，表达了设计的先后关系，尤其是关于产品的连续性来讲，用户根本没有中断的感觉，在材料设计中，使用了渐变的方式让界面流畅、舒适。UI界面的渐变是通过画面基本形象有序地、渐进地变动而形成如梦如幻的、似音乐旋律般的视觉效果，这样使画面具有极强的观赏性和秩序感。如图7，在主页浏览视图里包含一列卡片，当你点击一个卡片时，卡片将不再是一张卡片的大小，而是将延展到全屏幕。因此，“魔法纸片” 是材料设计中最重要的信息载体。纸片层叠、合并、分离，具有现实中的厚度、惯性和反馈，也具有液体的某些特性，可以自由伸展变形。如图8，它同时运用了材料和动效，卡片就是所谓的材料，当用户与其交互时，通过动效卡片延展来显示更多内容。这样给用户带来的视觉效果是连续的，告诉用户他们如何使用，如何让他们的操作影响到界面。

2.2.2 交互性设计

动效的快速反馈，可以让用户感到信任和快乐。当用户与应用交互时所反馈的动效不仅要实现美感，符合物理逻辑，而且能够给用户带来乐趣。反馈动态效果的设计必须深思熟虑且具有针对性，而不能随性设计，反馈动效应温和，不让用户分心，鼓励用户进一步探索应用。

材料设计具备快速反馈动态效果的特性，它让用户充满期待，触摸、语言、键盘及鼠标是首要考虑的输入模式。虽然UI元素是可见的，但是在物理上被限制在了设备屏幕之内。视觉线索和动态效果可以为用户和设备之间建立沟通的桥梁提供线索，让用户确认自己的输入有用，继而引导用户操作。动效的加入，让用户与应用之间的沟通真实、有效，将应用带到了新的高度。如图9和图10，是材料设计应用于Feedly阅读器。在Feedly阅读器中，最重要的转场是打开文章和关闭文章。过程当中，用户在文章的列表和文章内容中切换。如图9，当用 图7

图8

户点击文章预览时，应用会出现点击涟漪效应来提供即时反馈，然后整个效果会扩大充满整个文章预览元素。同样，当用户关闭文章时，这种效果也会在顶栏中出现。这是表面的反馈,涟漪效应使用户知道他的操作有用，给予用户带入感，让用户的注意力不分散，同时感受到小趣味，继而引导用户进行下一步操作。当用户在杂志视图中预览图片时，点击图片后，文章会在转场过程中逐渐放大，内容会渐显过来，而图片会用渐隐来过渡，它们会

图9 移动到相应的位置。有时在预览图中没有出现在第一屏，然后在转场时渐显文章的内容，缩略图也渐隐来过渡。整个切换过程流畅、自然，不会让用户感到突兀，提高了用户体验的整体美感。如图10，当用户点击了列表中的文章预览区域时，模块将会向上升起，形成属于这篇文章的一个新的平面，考虑到视觉上的连续性，这个新平面会被放大，它成为最主要的一个面，同时文章的内容也渐渐显现出来。整个移动过程有意义、有秩序，引导着用户的关注力，将最要的信息内容传递给用户。

3.材料设计在UI界面中的应用 3.1 材料设计在界面风格中的体现

图10 视觉设计风格是指界面所具有的特有的气质。后现代主义这种风格在UI界面的设计中占很大的比例，主要表现为波普风格和抽象风格。波普风格主要是以明朗亮眼的色彩、新奇的搭配图案和强烈的色彩对比来刺激用户的注意力。而抽象风格会给用户带来很大的联想的空

图11 间，通过点、线、色彩、面块、形体、构图来传达。材料设计的界面风格总的来

说是“鲜明、形象、深思熟虑”的。如图11，页面运用了留白，移除了所有可有可无的元素，搜索框吸引了用户全部的注意力，引导用户去搜索。留白是抽象风格中常见的一个运用手法，它们的存在并不是单独的，而是为了烘托主体元素，它们和主体元素是相互依托的关系。这样给用户一种简洁、明了、清新的感觉。而在颜色选择上材料设计的原则是“大胆、图形化、有意义”，提倡一种主色，一种互补色，运用巧妙的色彩搭配、点、线、面块等使得整个界面看起来非常大胆、充满色彩感，凸显内容。如图12，分别是具有波普风格的图画和材料设计的界面风格，从色彩上看，主要以红、黄、蓝三原色为主，色彩明快，色块层次分明，让人眼前一亮。而白色的适当点缀，又平衡了空间的色彩关系，给用户一种舒适的感觉。从搭配的图案上看，单色与拼接图案的结合，充满趣味，吸引用户眼球的同时，也治愈了用户的“审美疲劳”。

3.2 材料设计在界面布局中的体现

界面设计中的布局就是在有限的空间里对屏幕中的元素依据规律排列组合，而一个漂亮、易读的排版离不开基本骨骼系统。骨骼设计系统在界面排版中要遵循一些基本原则，其中包括对齐原则、比例适度、留白、秩序美等。从图13中可以看出，材料设计运用了“基线”对齐原则，同时利用骨骼线把文字、图形、线条按照一定的比例整体组合，使整个界面具有清晰明了的视觉秩序美，让用户得以快速阅

图13

图12 读信息，并有一种轻松、舒适的感觉。同时，视觉流程在界面布局中也尤为重要。当我们浏览界面时，用户首先会快速粗略地浏览页面，大致形成第一印象，接着视线就会从最吸引注意力的一点开始依次浏览，最后完成信息的传递。这就是视觉流程。如图14，用户第一眼会看到闹钟，接着视线会移到右侧，右侧卡片利用线条的分割、视觉元素的排列，带动用户根据设计的引导流程进行有效的视觉交互和信息传递。在材料设计中，布局上注意文字以及图片分量相当，在使用元素的同时注意元素在整个布局上面的呼应，在布局节奏感的把握上，注重疏密搭

配。界面的编排是为了突出主要信息为目标，让用户可以关注到重要的点，同时组织页面的设计元素，合理引导视觉。如图15，是材料设计对页面的编排，它将构成要素进行了巧妙合理的安排，是整个界面具有层次感和条理性。其中恰如其分的采用余白，使文字更加突出，具有更强烈的视觉感染力，使画面富有韵律。

3.3 材料设计在界面图标中的体现

图标是一种可视性很强的图像语言。它相对于UI界面就好像公共系统中的标志，虽然它只是界面中一个极小的点，却可以引导访问者最方便、快捷的方式浏览和使用整个界面。图标是具有标志意义的视觉符号，所以在材料设计中需要着重考虑图标的视觉感觉和视觉冲击力。如图16，图标具有很强的视觉表现力，有丰富的色彩和简单明了的几何图形组成，线条分明，和谐的明暗关系使图标立体起来，富有韵律感。同时色彩艳丽的图形由白

图16

图14

图15 色来衬托美丽，整体简洁大方，但又不失活泼跳跃，提高了整个“颜值”。

UI界面图标主要分为入口功能和操作功能，导航性图标具有入口功能，它是UI界面的方向标志，它能指引用户如何进入界面的不同区域，当你点击它时，就会出现一个子页面。如图17。而操作命令图标图标具有操作功能，它所指示的内容是各种交互功能、步骤等，界面工具条中包括的小图标都属于操作命令，它们可以帮助用户实现一些操作，引导用户去使用，如图18。操作功能的图标在完成点击操作之后，通常会转为对应的另一种形态。如“返回”与“菜单”，“收藏”与“已收藏”的状态之间切换，这样的设计里，在两种状态之间切换图标经常让用户感觉到生硬，而点击图标动画后用户会得到更佳强烈的反馈，使用户感到有趣，并且让界面生动，活泼起来。

图17

图18

3.4 材料设计在界面按钮中的体现

按钮能够提示观众，引起用户注意，好的按钮设计可以将界面主题化、形象化、生动化，引导更多是用户浏览页面、接受信息的传达。按钮一般较小，往往采用与背景对比较强烈的色彩以引起注意，同时与整个界面协调。

浮动按钮是材料设计中比较重要的一个体现，如图18，浮动按钮通过圆形元素与分割线、卡片、各种直线形成鲜明对比，并使用色彩设定中鲜艳的辅色，给用户带来更具突破性的视觉效果。浮动按钮的大小分为默认大小和迷你两种。当需要和屏幕上的其余元素产生视觉上的延续性时，一般使用迷你版的浮动按钮。如图19，Today是一款日历应用程序，是材料设计应用于其中的一个应用，美丽的悬浮响应按钮将日历和日程分开，灵动的同时又不失使用，色彩鲜艳的按钮，与背景颜色互补，吸引用户的眼球并引导用户去使用它。而且主题的颜色可以更改，用户通过点击相应的浮动按钮根据自己的喜好更换背景的颜色，使其保持新鲜感，满足个性化需求。

图18

图19

结 语

随着UI设计的日益发展，设计的重点从仅仅关注平面的表现，转移到了人与设计之间的交互。材料设计是对于这种潮流的适应，它的出现让用户眼前一跳。有设计师表明材料或将成为引领UI设计新的流行趋势，会给用户带来更多惊喜的东西。

参考文献

[1] 焦万鹏.新兴专业—“UI”设计初探[J].2007，8（2）：34-36.[2] Windy.什么是交互设计[J].2004，（11）：55-57.[3] 舒畅.浅析UI设计中的图形语言[J].2009,（17）：50-50.[4] 聂璐.论网页界面设计中的人性化因素[D].湖南师范大学.2010.[5] 李四达.交互设计的域与界.[J].装饰.第201期2010.01.[6] 孙娇、宗明明.网页设计中视觉流程筹划与应用.[J].2010,(7):169-171.[7] 程璐.网站的导航标—网页界面图标的设计研究.[J].2009,(2):182-182.[8] 汪大伟.现代主义风格的UI设计之兴起.[J].现代装饰.2012（09）：182-184.[9] 张涛.图标认知因素分析及其应用研究.[D].2007年