优秀设计联盟-SDC-优设网-设计师交流学习平台-听讲座，聊设计，找素材，尽在优设网
下一篇 继续涨姿势
阅读本文需 10 分钟
字体是界面设计中重要的构成要素之一，它能辅助信息的传递，是文字的外在表现形式；字体还可以通过其独有的艺术魅力，表达情感体验，并塑造品牌形象。
本文总结了字体设计的重要性、界面常用字体推荐以及国内外权威设计体系中对字号、行高、字重的选择和设置。如果你想对界面字体设计有更深一步地了解和运用，本文将会提供一些帮助。
1. 字体设计的重要性
辅助信息传递
文字是信息内容的载体，是记录思想、交流思想、承载语言的图像或符号，而字体则是文字的外在形式特征，是文字的视觉风格表现。合适的字体可以辅助文字，将信息清晰、准确地传递给用户。
表达情感体验
字体的艺术性体现在其完美的外在形式与丰富的内涵之中。在文字信息传递给用户之前，人们首先感受到的是字体带来的视觉魅力以及情感表达。
塑造品牌形象
不同字体有着不同的风格特征: 有的字体优美清新、线条流畅；有的字体造型规整、充满张力；还有的字体生动活泼、色彩明快……根据产品的属性选择正确的字体，便能有效地塑造品牌形象。
2. 界面常用字体推荐
字体的选择是由产品属性或品牌特性的关键词而决定。一般中文字体种类分为：黑体、宋体、仿宋、楷体等；英文字体种类分为：无衬线体、衬线体、意大利斜体、手写体、黑字体等。
中文字体推荐
线上中文字体推荐使用思源黑体、华文黑体、冬青黑体、微软雅黑、苹方-简、黑体-简、方正兰亭黑。其中 iOS 系统默认中文字体是「苹方PingFang」，Android 系统中文字体使用「思源黑体Noto Sans CJK」。
介绍下「思源黑体」这款字体，它是由 Google 和 Adobe 合作开发出来的，风格介于现代和传统之间，可以广泛用于多种途径，比如手机、平板、桌面的用户界面、网页浏览或者电子书阅读等。它为人们带来了愉悦和高效的信息阅读体验，并且是免费的。
英文字体推荐
线上英文字体推荐使用 San Francisco、Helvetica Neue、Roboto、Avenir Next、Open Sans。其中 iOS 系统默认英文字体为「San Francisco」，Android 系统默认英文字体为「Roboto」。
Helvetica 是一种被广泛使用的西文字体，1957年由瑞士字体设计师设计，微软常用的 Arial 字体也来自于它。
作为一款经典的无衬线字体，Helvetica 在平面设计和商业上非常普及和成功，被认为是现代主义设计理念的典范，其简洁朴素的线条风格非常受追捧。
数字字体推荐
线上数字字体推荐使用 DIN、Core Sans D、Helvetica Neue。
DIN 起源于1995年的德国，无衬线字体，易用耐看、字形开放，是设计师最爱的几类字体之一，适合显示比较长的大号数字，但是小字号的情况下识别度较低。
Core Sans D 是由韩国设计师设计的一款无衬线字体，支持 Thin、Light、Regular、Medium、Bold 等类型字重，对大号数字的显示效果不错，不过它是收费字体。
Helvetica Neue 除了上文介绍的简洁朴素、中性严谨、没有多余的修饰外，还是 Helvetica 的升级版，拥有了更多的字重，可以作为 iOS 和 Android 跨平台数字字体使用。
1. 关于字号
字号是界面设计中另一个重要的元素，字号大小决定了信息的层级和主次关系，合理有序的字号设置能让界面信息清晰易读、层次分明；相反，糟糕无序的字号使用会让界面混乱不堪，影响阅读体验。
2. 字号的选择
字号的选择，可以遵循 iOS 、Material Design、Ant Design 等国内外权威设计体系中的字号规则，也可以根据产品的特点自行定义。
iOS 字号规则
在 iOS11 系统中，使用 San Francisco 作为系统英文字体，包含了以下几种字号的文本样式：
11pt / 12pt Caption 说明文字
13pt Footnote 脚注
15pt Subhead 副标题
16pt Callout 标注
17pt Body / Headline 正文 / 模块标题
20pt / 22pt / 28pt Title 页面标题
34pt Large Title 页面大标题
需要注意的是，San Francisco 字体有两种模式：文本模式 SF Pro Text 和展示模式 SF Pro Display，文本模式适用于字号小于 20pt 的文字，展示模式适用于字号大于等于 20pt 的文字。
Material Design 字号规则
在 Material Design 设计体系中，使用 Roboto 作为英文字体，规定了以下文字排版的常用字号：
12sp 小字提示
14sp（桌面端 13sp）正文 / 按钮文字
16sp（桌面端 15sp）小标题
20sp Appbar 文字
24sp 大标题
34sp / 45sp / 56sp / 112sp 超大号文字
长篇幅正文，每行建议 60 字符左右，短文本建议每行 30 字符左右。
Ant Design 字号规则
Ant Design 受到5音阶以及自然律的启发定义了10种不同的字号，从小到大依次为: 12px、14px、16px、20px、24px、30px、38px、46px、56px、68px。
建议主要字号为 14px，其余字号的选择可根据具体情况进行自由的定义，尽量控制在3-5种之间，保持克制的原则。
Kiwi 字号规则
Kiwi 是饿了么的中后台设计语言，致力于打造出能够「了解、洞察、温暖、激励用户」的产品。
在 Kiwi Web 中，规定最小字号为 12px，主要文本字号为 14px，最大字号为 46px。
1. 关于行高
行高可以理解为一个包裹在字体外面的无形的框，字体距框的上下空隙为半行距。
参考 W3C 原理，眼睛到屏幕的距离 25cm 为最佳阅读距离。
西文的基本行高通常是字号的 1.2 倍左右。而中文因为字符密实且高度一致，没有西文的上伸部和下延部来创造行间空隙，所以一般行高需要更大，根据不同人群的特点（儿童、年轻人、老年人）以及使用环境，可达到1.5至2倍甚至更大。
2. 行高的设置
iOS 行高设置
Apple 官方的 iOS 字号与行高对应关系如下（@1x倍率）：
Fluent Design 行高设置
Microsoft 官方的 Fluent Design 字号与行高对应关系如下（使用字体 Segoe UI）：
Ant Design 行高设置
蚂蚁金服的 Ant Design 字号与行高对应关系如下（优先使用系统默认字体）：
行高计算公式：L = F + 8。其中 L 是行高（Line Height），F 是字号（Font Size），F ≥ 12。
1. 关于字重
字重是指字体的粗细，一般在字体家族名后面注明的 Thin、Light、Regular、Medium、Bold、Heavy 等都是字重名称。越来越多的产品界面需要通过字重来拉开信息层次，当下主流趋势 iOS11 大标题风格就是通过字重来拉开信息层级的。
不同的字重体现不同的层级关系和情绪感受，细的字体给人以细腻、轻盈的感觉，而粗体则给人庄重和严肃的感受，所以在定义字体规范时候需要考虑什么场景用什么字重，从而保持良好阅读体验。
2. 字重的设置
字重的设置同样基于秩序、稳定、克制的原则。为了统一整体效果，一般情况下使用两种字重为佳，例如只出现 Regular 以及 Medium 这两种字体粗细，特殊情况下可以使用更粗或更细的字重进一步拉开信息层级。
当字号大小为 12-18pt 时，使用 Regular；20-26pt 时，使用 Light；28-34pt 时，使用 Thin；当字号大小超过 34pt 时，建议使用 Ultralight。
以上是按字号与字重反比的规则设置，即字号越大，字重越轻。当然也可以按正比的规则或者自定义规则，具体还是要根据产品的定位和用户的特点来设置，以保证信息层级清晰明了为准。
本文到此就要告一段落了，如果对你有一点帮助就请点个赞吧。你也可以关注我的公众号彭彭设计笔记，我会不定期更新 UI/UX 设计类精品文章，感谢你的阅读。
欢迎关注作者的微信公众号：「彭彭设计笔记」
图片素材作者：Prateek Vatash
「超干货！打造优质APP的实用技巧」
您有一份200套的免费UI素材包未接收，请打开文章领取
今天干货福利给大家带来200套优秀的免费 UI设计素材包，这些 UI素材可以作为临摹学习和设计灵感参考，内容包括 APP用户界面、Mac 和 Wins系统、UI组...
评论还可以输入字
验证码加载中....
评论就这些咯，让大家也知道你的独特见解
以上留言仅代表用户个人观点，不代表优设立场
阅读 20973编者按：有同学问魔兽海报中的这种酷炫的立体字效果是怎么做出来的，其实临摹起来不难，今天刘远航同学就从头开始带大家做一遍，8个步骤轻松搞定。源文件已打包，学起...阅读 37637在说字体设计之前我不得不提一下“格式塔心理学”，这是我们省略与变化字体笔画的理论基础。 我们的眼睛和大脑在观察事物、接收影像刺激的时候，会有一些特别的倾向。...阅读 28798编者按：字体设计基础入门篇！今天阿里的同学把字体设计的嫁接技术分享给大家，不仅有超赞的实例演练，而且改造过程清晰明了，包学包会 &&& 想...阅读 8734编者按：今天的教程少女心满满啊，教程亮点是思路特别清晰，同学们可以很轻松地 get 到这类效果的绘制过程，附上源文件下载，不会的直接打开来看 &&gt...阅读 9479人们总希望能够通过规则让事情变得更容易理解。对于平面设计是如此，对于数字化的UI界面也同样是如此。经过仔细地组织和整理之后的UI界面，无论是APP还是网站，...一、功能逻辑梳理 在做框架设计与加减乘除合并同类项之前，梳理业务与产品逻辑对于复杂的流程界面来说是至关重要的。 我们举个例子来说明问题，举例的这个产品叫做「...阅读 21995讲座视频回顾 http://www.bilibili.com/video/av2746027/ 报名方式 在优设微信公众号回复”讲座&#8221...阅读 31814编者按：简单但效果超棒的PS教程！今天的教程只要12步，就能做出一个质感丰富的3D 荧光灯字体，附上动效教程，秒变高端大气。 这次做的是一个暗色背景，用的是...阅读 18356编者按：很多同学不知道怎么用PS 做这类酷炫的3D 效果，只要跟着今天的教程一步步完成，保证可以学会。还能学到如何运用渐变/纹理/图案等基础工具。 素材打包...
我们的团队
大家在关注
一扫"掌"握！
上周热门文章
把好文章收藏到微信
打开微信，扫码分享学设计 优设网 在这里拒绝访问 | www.yingjiesheng.com | 百度云加速
请打开cookies.
此网站 (www.yingjiesheng.com) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(e443dd-ua98).
重新安装浏览器，或使用别的浏览器品牌视觉设计的4个关键要素
我们知道一个公司的基础也是核心的需求是盈利，那么盈利需要通过各种销售手段来达成目标，而如何刺激消费者就是营销的手段之一。
营销手段可以分为很多种：例如，内容营销、视觉营销、互动营销、网络营销、新媒体营销、饥饿营销、口碑营销等等，那么这次我们就来谈一谈视觉营销。
不知道大家通常在购物的时候是怎样的一个心理活动，不可否认绝大部分人类都是视觉动物，第一眼或者第一印象都能够影响他们70%以上的最终决策行为。所以视觉营销的最重要的点就在于如何在第一眼吸引、打动用户。
举个例子：大家是否经常看电影预告，酷炫的打斗场面，精彩的爆破特效，惊心动魄的街头飞车。只可惜这些已经是80%的电影精彩内容了，而真实的影片大部分时间在讲男欢女爱，三角恋，父子相认等拖沓剧情，让人索然无味，但这时你tm已经付过钱了啊，能退吗？当然不能，下一次还是这样骗你。
好了，这是一波成功的视觉营销，而且你还会孜孜不倦的去看，因为看电影是某些人的刚需，也是一部分人的情怀，确实不看就会死。
我们下面来欣赏几张很有独特创意的海报：
1.百度云摄像头的几张大海报，几个关键词：随时、安心、放心、可靠，海报中的人物都是家喻户晓的superstar，并且整个页面有一定的故事性和想象空间，让人印象很深刻，并且调起了好奇心。
2.林大奋大神的插画，这几幅插画更是独树一帜的风格，夸张的表现手法，搞笑的场景图文，只为突出京东的：快！让人意犹未尽的同时让人觉得十分有趣。
3.下图是两张海报，一张是食物类一张是电影，主视觉的突出以及色彩鲜明的对比还有场景中人物的夸张表现，都让人眼前一亮，能迅速融入产品的场景中去。
再来看看几张大厂的app氛围设计：
看完了案例，那么我们接下去看看这些视觉设计究竟如何从无到有的将他落地
我们来看一下视觉营销的一个转化路径：第一步， 吸引眼球；第二步，激发兴趣；第三步，刺激想象；第四步，引导消费。
1.吸引眼球，一个好的视觉营销设计能够让人瞬间产生好奇感，让人产生好奇感的元素我觉得可能有这些：创意、情怀、故事感、配色、排版、更有质感的形状、人物、手绘，独特的表现手法及风格
2.激发兴趣，光一个好看的图片其实不难做到，难的是让人能够回味甚至能够激发用户继续了解的兴趣，所以一张有故事感、有情怀感的营销视觉图能够让人在反思层去思考，去想象。不知道大家会不会在电梯里看过几张海报图，有些海报很直白，一看就懂但是它无法刺激用户，所以对那些需求行为在休眠的人来说无法唤醒其需求休眠的状态。而一个好的营销视觉能够将这些隐藏在用户心里或者根本不是用户需求的心里充分刺激起来，让用户主动对产品感兴趣。
3.刺激想象，当用户想进一步了解产品的时候，说明他的钱已经快要离开他的口袋了，这时候他在寻找一个场景，一个想象出来并且使用我们产品的场景，一旦确认这个场景可以行，那离我们的目标也就不远了。
4.引导消费，真正的战场才刚开始，当用户在你的软件上购物时，依然要万分小心，你已经成功的把用户吸引到了平台上，这时候才是最关键的时刻，只要用户还没输入交易密码。如果主流程路径过长或者复杂，关键操作设计不明确，让用户使用起来很繁琐或者不好用，那之前的一切努力都前功尽弃了。
所以以上的转化路径可以概括为这么一个场景：一个宝妈看到了某个好看的单品banner，她点击进入了商品详情，心中想到了给自己的女儿买这件商品，于是便将它买了下来。
说了这么多，让我们来一次案例实战吧！
这次活动的主要设计者：沈忱、黄嘉诚、李倩、顾全、张爽、张凯佳、王华、茹亙余、留洋、朱诚、於旗琳、章彬、me，大家都很棒。
我司2周年庆典主题活动视觉设计（电商app）
将我司品牌通过周年庆活动视觉渗透用户，通过强烈活动氛围刺激用户消费，唤醒部分休眠用户。
我司周年庆专属logo及吉祥物展示，品牌定义视觉化表现，核心任务路径清晰。
转化率、活跃比、留存率、重复使用率
整一个品牌设计将围绕以下两个纬度去打造这次庆典：
1.独特，强化品牌特性
2.情怀，我们的态度，用户的共鸣
这里额外提一下设计情怀这件事，所有的视觉营销其实都想做情怀，真的很玄妙。然后可能大家对情怀的认知都是1000个哈姆雷特，情怀不是怀旧，也不是怀念经典，它是每个人都有的一种情感，它可能是诗和远方、也可能是一本书一支笔，更或者说是一种让人不去计较利益得失，发自内心喜爱的人或者事物。所以当产品能让用户产生出这样的共鸣之后无疑这是非常成功的。
好，继续：
我们将整一个品牌过程分为以下步骤：
1.探索 2.定义 3.提炼 4.执行 跟踪
回过头来看看我们的目标以及2个纬度，这是一个需要脑暴的过程，在经过十几位视觉设计的同事努力后，我们定义出了3个关键词：周年庆、品质、前卫风格。不过由于这次活动设计时间太紧，情怀的探索并不是太成功，无法去充足的获取用户情感共鸣的东西，但是我始终认为，设计是给心看的而非眼睛。
一个品质高端并且风格独特的周年庆典
我们寻找符合关键词的素材，在整个app中氛围的打造中将以这些元素体现在导航栏、标签栏以及页面的背景中和app icon之中。我们在图形和渐变还有3d拟物方面找到了一些符合这次活动的元素。
这次的执行其实有出现了比较多的问题，一是时间太紧，二是沟通衔接的问题，在氛围方面设计和当初预想的有些偏差，不过这时我第一次做电商活动类氛围设计让我获得了不少经验，特别是在视觉还原中碰到的一系列问题。
下面是推广设计同学的活动会场及其他活动设计
这次反馈通过用满意度调研的问卷获取了一些信息，通过埋点的转化率分析，在整个活动闭环中的核心任务的操作说明、活动提示、跳转引导还有待提高，首页氛围还有待加强。由于没有对比数据所以无法判断，在同一时间同一场景及任务下的部分数据之间的差异，但是活动当天的交易是平日的4倍。总体来说这一次周年庆的活动设计还是比较成功的。
其实我们每次做一个需求的时候都会有这样一个系统的过程，但是如何在过程中不断的改善和修正方向，以及跨部门的有效沟通都是促成一次需求成功上线的基本要素。特别是做电商设计的同学们经常会发现需求方的需求给的太晚，而要求交付的时间又太短，往往是只能够做到表象层的设计而无法作出让人产生共鸣的、有情怀的设计。说实话这确实比较难，即便时间充足但是业务、运营他们需要考虑一些特别设计带来的风险，比如说一些特别有情怀的设计可能受众比较小，而符合大众情怀的点是非常难get的。
所以总结了一下：1.储备好多种设计技能；2.提高沟通效率；3.设计准备充分（调研、探索）4.加班
老虎帮：laohubang.cn
欢迎加入学UI网25群：
老虎帮第9期6月1日开学，增加了8课新内容，报名前需要考核基础，请加QQ群:详细了解老虎帮高级课程。
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
今日搜狐热点第三方登录：饿了么高级设计师：界面视觉设计 5 要素
一款 App 或 Web 产品，从用户体验的角度包含了战略层、范围层、结构层、框架层、表现层。而作为 UI 设计师，如果连「表现层」的内容都还一知半解就去盲目地学习其他领域，这是不提倡的。
这里说的「表现层」是指视觉设计层面，在界面的视觉设计中同样也包含了5个视觉要素：色彩、文字、图标、图片、空间。一个出色的界面设计，必然是将这些要素做到了淋漓尽致。
本文结合大量优秀的案例，并以通俗简练的语言，系统地介绍了这5个视觉要素。篇幅略长，耐心读完你一定会有收获。
文章大纲如下：
1. 色彩基础概述
色彩三属性
色相（H）：即色彩的相貌、种类和名称，比如红、橙、黄、绿等颜色的种类就叫色相。
饱和度（S）：即色彩的鲜艳程度，也称纯度。
明度（B）：即色彩的明亮程度。
人眼看到的任一彩色光都是这三个属性的综合效果。
同一色相的不同明度和不同饱和度，也会对人产生不同的心理感受。我在这里归纳整理了各种色彩在通常情况下代表的不同寓意，仅供参考。
红色（Red）：热烈、喜庆、热情、浪漫、危险
橙色（Orange）：温暖、食物、友好、财富、警告
黄色（Yellow）：光辉、明亮、尊贵、权力
绿色（Green）：健康、自然、清新、希望、安全
青色（Cyan）：朝气、脱俗、真诚、清丽
蓝色（Blue）：平静、纯洁、清凉、科技、沉稳
紫色（Purple）：神秘、高贵、优雅、浪漫、妖艳
黑色（Black）：深沉、庄重、严肃、邪恶、死亡
白色（White）：纯洁、神圣、干净、高雅、冷淡
灰色（Gray）：平凡、随意、苍老、冷漠
2. 色彩搭配
色相对比：两种及两种以上色彩组合后，由于色相差别而形成的色彩对比效果称为色相对比。
色相对比的强弱程度，取决于色相之间在色环上的距离 （角度），距离 （角度） 越大对比越强，反之对比越弱。
一般界面的色彩搭配主要包括三种颜色：主色调、辅助色、点缀色，搭配比例分别为 6:3:1。
同类色搭配
色环上相距 0° 的颜色为同类色，一般常用同一种色相的不同明度或不同饱和度的组合方式，例如蓝与浅蓝，红与粉红等。同类色搭配对比效果统一、清新、含蓄，但也容易产生单调、乏味的感受。
邻近色搭配
色环上相距 30° 左右的颜色为邻近色 ，例如紫与蓝紫，蓝紫与蓝等。邻近色搭配对比效果柔和、文静、和谐，但也容易感觉单调、模糊，需调节明度来加强效果。
类似色搭配
色环上相距 60° 左右的颜色为类似色，例如橙与黄，黄橙与黄绿等。类似色搭配对比效果较丰富、活泼，同时又不失统一、和谐的感觉。
中差色搭配
色环上相距 90° 左右的颜色为中差色，例如红与黄橙，蓝绿与黄等。中差色搭配对比效果明快、活泼、饱满、使人兴奋，同时不失调和之感。
对比色搭配
色环上相距 120° 左右的颜色为对比色，例如红与黄，红紫与黄橙等。对比色搭配对比效果强烈、醒目、刺激、有力，但也容易造成视觉疲劳，一般需要采用多种调和手段来改善对比效果。
互补色搭配
色环上相距 180° 左右的颜色为互补色，例如红与绿，黄与紫等。互补色搭配表现出一种力量、气势与活力，具有非常强烈的视觉冲击力。
多色搭配顾名思义是由多种色彩组合而成的一种搭配方式，一般以不超过 4 种颜色为宜，规定一种作为主导色，其余作为辅助色使用。
多色搭配会让画面显得更加丰富、多彩，充满趣味性，但若控制不好，也容易让画面变花，失去平衡。搭配时须注意区分主次，按比例进行调和。
1. 字体简介
中文字体种类大致分为：宋体、黑体、仿宋、楷体、其它（变体字）。
西文字体种类大致分为：无衬线体、罗马正体或衬线体、意大利斜体、手写体、黑字体（哥特体）。
这次主要给大家介绍一下比较常用的衬线体和无衬线体。
衬线字体在笔画末端具有附加的装饰线条或者「韵脚」。衬线字体字母的横线较细、竖线较粗，如 Times New Roman、Georgia 等字体属于衬线体。
衬线体具有复古传统的曲线美、个性鲜明、张力十足，通常用在时尚奢侈品牌、复古海报等设计领域中。
无衬线体顾名思义，就是指「没有衬线的字体」。衬线指的是字母结构笔画之外的装饰性线条，无衬线字体字母的竖线和横线粗细基本相同，像经典的 Helvetica 和 Futula 等字体就属于无衬线体。
无衬线体通常比较简约、具有现代感，适用于 Web、App 等互联网科技领域的设计中。
2. 文字使用规则
不同平台的界面设计中规范的字体会有不同，像移动端界面的设计就会有固定的字体样式，网页中会有常用的几个字体。
移动端常规字体
在 iOS 设备上，系统默认的英文字体为 SanFrancisco，中文字体为 PingFang。值得注意的是，SanFrancisco 字体会随着字号的变化自动调整字母之间的间距，以确保任何情况下都能很清晰地阅读。
在 Android 设备上，原生系统英文字体使用 DroidSans 或 Roboto，但国内的 Rom 大都是第三方厂商定制而成，对原生系统字体有所变动。大家在设计时可以使用 Noto 作为中文字体来使用。
网页端常用字体
在 Windows 系统中，常用字体有微软雅黑、黑体、宋体等，最小字号推荐 12px，正文字号推荐 14px，标题字号推荐 18px、20px、24px、28px、32px 等，尽可能使用偶数。而行间距一般为字号的 1.5-1.8 倍。
在 Mac OS 系统中，常用中文字体有苹方、思源黑体 、华文细黑等，英文字体有 Helvetica、SanFrancisco 等。
值得一提的是：Helvetica 曾被评为是设计师最爱的字体，简洁现代的线条，非常受到追捧。在 Mac 下被认为是最佳的网页字体，在 Windows 下由于 Hinting 的原因显示很糟糕。
1. 图标功能
图标是 Web 和 App 设计中的点睛之笔，既能辅助文字信息的传达，也能作为信息载体被高效地识别，并且图标也有一定的装饰作用，可以提高界面设计的美观度。
2. 图标类型
关于图标的类型目前并没有很权威的分类，我根据图标的用途将其分为两大类：「功能型图标」和「展示型图标」。
功能型图标
一般来说，凡是 UI 界面中，用户可以点击的图标均可看成是功能型图标，该类图标往往代表某一功能或某一链接的跳转。这类图标的典型应用场景就是 iOS 系统中的底部标签栏，以及 Material Design 中侧滑菜单选项的左侧。
某些列表或卡片内的图标也属于功能型图标，但这类图标往往代表一个功能，而底部标签栏图标往往代表一个页面或板块。
展示型图标
相比功能型图标，展示型图标更加具有「设计感」，是独特的、有内涵的以及具备辨识度的。一般来说，展示型图标主要是应用程序的启动图标。该类图标代表了一款产品的属性、气质以及品牌形象等，也是用户首先看到的内容，设计时应尽可能让用户记住并感到愉悦。
该类图标在 iOS 系统中除了出现在 App Store 里，还出现在用户下载后的桌面上，以及 Spotlight 的搜索结果和设置等地方。
3. 图标风格
图标的设计风格有很多种，例如：线性图标、面性图标、线面结合图标、扁平图标、轻拟物图标、拟物图标、手绘型图标等，我对其中常见的几种作下简要的介绍。
线性图标是由直线、曲线、点等元素组合而成的图标样式。该类图标轻巧简练，具有一定的想象空间，且不会对界面产生太大的视觉干扰。
面性图标可以简单理解为对线性图标的填充，但面性比线性更加稳重和扎实，对色彩的传达也清晰明显。
线面结合图标
线面结合图标典型代表是「MBE风格」图标，其设计特点是采用了粗描边线和偏移的填充面相结合，灵动而鲜明。粗线条起到对画面的绝对分割，突显内容、表现清晰。
扁平图标去掉了透视、纹理、渐变等能做出 3D 效果的元素，让信息本身作为核心被凸显出来，并且在设计元素上强调抽象、极简、符号化。
轻拟物图标
轻拟物图标没有拟物图标那么写实，也不像扁平图标那么「平」，而是利用淡淡的渐变和一些光影来达到两者之间的平衡，识别性高又不失美感。
图片在 Web 和 App 界面设计中是非常常见的，图片的质量和展现方式都会影响着用户对产品的感官体验。
1. 图片比例
不同比例的图片所传递的主要信息各不相同，我们需要结合产品的特点，并根据不同的场景来选择合适的图片比例进行设计。
1:1 是比较常见的图片设计比例，相同的长宽将构图呈现得简单，突出了主体的存在感，常用于产品、头像、特写等展示场景。
4:3 的图片比例使图像更紧凑，更容易构图，便于开展设计，也是常用图片比例之一。
16:9 的图片比例可以呈现电影观影般的效果，是很多视频播放软件常用的尺寸，能带给用户一种视野开阔的体验。
16:10 的图片比例最接近黄金比，而黄金分割具有严格的比例性、艺术性、和谐性，蕴藏着丰富的美学价值，被认为是艺术设计中最理想的比例。
2. 图片排版
图片的排版类型有很多种，根据不同的场景和所需传递的主体信息来选择与之相符的展现方式，以下是常见的几种排版类型。
满版型是以图片作为主体或背景铺满整个画面，常搭配文字信息或 icon 修饰，视觉传达直观而强烈，给人大方、舒展的感觉。
通栏型是指图片与整体页面的宽度相同，而高度为其几分之一甚至更小的一种图片展现方式，最常见的就是轮播图（Banner）。通栏型图片宽阔大气，可以有效地强调和展示重要的商品、活动等运营内容。
并置型是将不同的图片作大小相同而位置不同的重复排列，可以是左右或上下排列，能给原本复杂喧闹的版面带来秩序、安静、调和与节奏感。
九宫格型是用四条线把画面上下左右分割成九个小块，可以把 1 个或者 2 个小块作为一个单位填充图像，这种构图给人严谨、规范、有序的感觉。
瀑布流型的图片会在页面上呈现参差不齐的多栏布局，降低了界面复杂度，节省了空间，使用户专注于浏览，去掉了繁琐的操作，体验更好。
1. 栅格系统
栅格系统简介
栅格系统英文为「Grid systems」，是一种平面设计的方法与风格，运用固定的格子设计版面空间布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。
如今栅格系统也已经被运用到网页设计中，它以规则的网格阵列来指导和规范网页中的空间布局。栅格系统的使用，可以让网页的信息呈现更加美观、易读、严谨和一致，同时也更具可用性。
「8像素」栅格规则
「8像素」栅格规则是一个以 8px 为单位，利用 8 的倍数来规定页面中元素（按钮、输入框、图片等）的尺寸及各自间距的一种通用的栅格规则。
为什么用 8 而不是 5 或 7 呢？因为 8 是一个偶数，在 UI 设计过程中，对于 Android 系统需要导出特殊的 @1.5x 的切图，如果图片尺寸为奇数，则会出现半像素和虚边的问题，而用偶数则可以避免这种情况。为什么用 8 而不是 6 或 10 呢？因为目前主流的屏幕尺寸大部分都是 8 的整数倍，比如 1920 ×
× 800、1024 × 768 等。即使某些屏幕边长像素不是 8 的倍数，在设计中仍然可以尽量做到自定义元素的长、宽、margin 以及 padding 都是 8 的整倍数来维持设计的一致性。
对于一些特殊的页面，例如：引导页、闪屏页、促销页等，可以不用严格按照栅格系统进行设计，但需要注意空间留白的运用。
留白四属性
层次感：留白可以使页面的层次感得到极大的增强，留白越大，模块、信息间的层次感越清晰。
焦点：元素越多，人的视觉注意力越容易分散；相反元素越少（即留白越大），注意力则会更有效地聚焦在重要的内容上。
韵味：留白具有「此时无物胜有物」的感觉，犹如中国的水墨画。留白运用于页面设计中，韵味也会出现。
呼吸：留白的呼吸属性可以想象成周围的空气，当空气中的颗粒物（元素）特别多时，人的呼吸也会觉得不通透；相反留白越多时，呼吸感越顺畅。
留白表现形式
轻度留白：轻度留白是我们常见的页面留白设计形式，在传递出雅致、高端、文艺等气质的同时，又能将信息表现得清晰直接，让页面更加简洁和实用。轻度留白融合了重度留白的优势，但不受品牌属性的影响，几乎任何产品都可以用这种表现形式。
重度留白：重度留白是把主体缩小到极致，其传递出的雅致、空灵、高端气质是最强的，但与此同时，其他的属性也近乎为零。「无印良品」品牌倡导简约、质朴的生活方式，原研哉赋予其设计理念就是「空」。所以，重度留白传递的不是产品，而是概念、气质和态度。
色相、明度、饱和度是色彩的三个属性，不同的色彩具有不同的心理寓意，选色时需考虑产品的调性和受众人群；色环上距离（角度）越大的颜色对比效果越强，反之对比效果越弱，设计时应采用合适的色彩搭配。
黑体、宋体等是常用的中文字体，而衬线体和无衬线体是常用的西文字体；不同平台的界面设计会有不同的字体使用规范；另外，设计时需注意字号、字重以及行间距的设置，以达到最佳的阅读体验。
图标可以辅助信息文字的传达，也可以对界面起到修饰作用；功能型和展示型是图标的两大类型；不同风格的图标传递出不同的视觉语言，根据场景的需要进行合适的选择，并保持风格的一致性。4. 图片
不同比例的图片所传递的主要信息各不相同，设计时需要结合产品的特点，并根据不同的要求来选择合适的图片比例；图片的排版类型有很多种，根据不同的场景和所需传递的主体信息来选择与之相符的展现方式。5. 空间
使用栅格系统，可以让界面的信息呈现更加美观、易读和规范，设计时可以采用「8像素」栅格规则来指导元素尺寸和间距的制定；层次感、焦点、韵味、呼吸是留白的四个属性，留白的表现形式需结合品牌的属性来选择。
在任何领域，如果想要有所成就，都需要超越极限的学习，都需要孜孜以求的探索，都需要殚精竭虑的思考，都需要无数次失败和成功的实践。没有人可以超越学习、思考和实践成为一个真正的高手。
编辑整理：千锋UI设计
作者：彭彭
来源：https://www.uisdc.com/interface-vision-design-5-elements
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
今日搜狐热点