关键词：
图标是具有指代意义的图形，也是一种标识。通过使用图标表达命令，强调状态，表示产品或类别。为了系统及跨平台之间图形认知保持一致， 图标在设计和使用时有以下两个原则点需要注意：
简单的图形语言以及高辨识度。清晰、直观的图标更能明确指代含义便于识别记忆；
保持图标之间一致的风格和表现方式。界面中的所有图标都应该在细节设计、透视和笔画权重上保持一致。
一、系统图标
系统图标通常用来表示常用的操作，比如：删除、保存、编辑。也可以用来表示一个文件或者状态。
2、关键轮廓线
根据不同的图标形状类型使用不同的轮廓线，可以使图标之间保持一致的视觉效果。
请将所有图标在 1024×1024（16×16 的 64 倍）的画板中制作。
3、细节
a）笔画
一致的笔画权重是保持整个图标系统视觉统一的关键，如系统图标的线条统一为 72px 宽度。
b）边角
一致的角度半径也是保持整个图标系统视觉统一的重要元素
外轮廓线统一半径为 72px 的圆角，icon 内部空间的边角保持直角，笔画的终端为圆角。
c）视觉修正
在一些特殊情况下（比如，icon 的形状比较复杂紧凑），可以通过调整线条的粗细或圆角的大小等微妙的变化来增加图标的易读性。
d)透视角度
始终保持简洁、平面的风格,不要让图标具有多维度空间感，或者充满了细节。保持平面、简洁的风格
e)命名规则
统一的命名方式有助于管理图标，也能更快速的找到需要的图标。例如，环绕型的图标统一以「-o」后缀。
f)图标尺寸
应用于页面时请使用规范尺寸，与字体搭配时和字体的尺寸保持一致。
例如：和 12pt 字体搭配时，图标使用 12px，图标与文字的间距为 8px。
g)颜色
图标的颜色需要与搭配文案的色值保持一致（表示状态的除外）。
二、业务图标
业务图标不同于系统图标，本身不带有功能性的操作，而是辅助配合文案的一个抽象化图形。相较于系统图标，业务图标在设计的细节上更为丰富，使用的尺寸也比较大。
注：业务图标的设计原则与系统图标基本一致，在细节处理上（如笔画权重、圆角大小等）可视具体场景而定。
a)图标尺寸
在常规使用中，有 32px（最小尺寸）、48px 和 64px（最大尺寸）三种选择。
b)颜色
业务图标有单色（中性色）和双色（中性色+主色）两种，主色的面积不超过整个 icon 的 40%。
前端的ui设计与交互之字体篇
跨平台的字体设定，力求在各个操作系统下都有最佳展示效果。字体是界面设计中最重要的基本构成之一，用户通过文本来消化内容和完成工作，优雅的字体将大大提升用户的阅读体验及工作效率。在满足不同终端始终保持良好... 查看详情
前端的ui设计与交互之反馈示篇
为了帮助用户了解应用当前要做什么，也给用户的下一步行为做参考，以及了解操作后所产生的结果，当用户和系统需要交互时，使用不同的模式来反馈信息或结果。当设计者使用反馈或者自定义一些反馈时，请注意：为用... 查看详情
web前端之javascript高级程序设计六：事件
web前端之JavaScript高级程序设计六：事件JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。这... 查看详情
ui设计培训课程是哪些?
...、简约风格网站设计制作。项目实训：展示类型企业站3.前端开发制作+响应式WEB开发：HTML简介及文档结构CSS选择器讲解、浮动定位与布局、CSS3酷炫效果制作、HTML5新标签、相应式布局原理、Bootstrap模板。项目实训:响应式网站设... 查看详情
app开发之进阶完善篇题小满appmui+flask+mongodb+h5(代码片段)
...记不太清楚了，大体的记录一下。二，增加签到模块2.1，前端设计前端设计比较简单，我充当UI设计了一张一般般的图片，之后设计了一个登录按钮。写了应该js监控点击事件，作用于前后端的交互。先来一个效果图吧：document.ge... 查看详情
prism+materialdesign+entityframeworkcore+postgresqlwpf开发总结之中级篇(代码片段)
...C#常用知识点；中级篇主要争对WPF布局与MaterialDesign美化设计，在减轻代码量的情况做出漂亮的应用；终极篇为框架应用实战，包含MVVM框架Prism，ORM框架EntityFrameworkCore，开源数据库Postgresql。目录Prism+MaterialDesign+EntityFrameworkCore+Post... 查看详情
转：用品牌基因法做图标设计，高级ui设计师才会的手法！（升级篇）
转自：http://www.uisdc.com/brand-gene-icon-design-pro 图标设计如何具有品牌性？这可能是设计师工作中经常会遇到的问题。但很多新人也许并不了解什么是品牌性，更不知道如何将品牌性融入到图标当中，不过没关系，看了这篇文章... 查看详情
前端设计之灰度值利用
在前端设计中，图片的灰度与彩色交互变化是十分有用且必须掌握的。 充分的利用色差的变化可以给浏览者带去别致的体验。 实例代码如下：<imgclass="filter"src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=155969907,18... 查看详情
源码分析mycat专栏
...通信协议篇之存储过程调用4、源码研读Mycat1.6之网络篇---前端线程模型（应用程序与mycat交互篇）上篇5、源码分析mycat1.6之网络篇---前端线程模型下篇（读写事件篇）6、源码分析mycat1.6之网络篇----前后端连接交互... 查看详情
javascript课程大纲
...些千锋武汉5的学习主要包括以下几个阶段：第一阶段：前端页面重构：PC端网站布局、HTML5+CSS3基础项目、WebAPP页面布局；第二阶段：Javascript高级程序设计：原生Javascript交互功能开发、面向对象开发与ES5/ES6、Javascript工具库自主... 查看详情
前端学习
UI:userinterface 用户界面不止是手机，还包括，PC,电视等有屏幕可操作的平台。项目团队角色确定：产品经理：梳理项目需求，制定产品开发更新计划，协调团队交流。、交互设计师：用户使用流程。交互流程。... 查看详情
零基础学ui小白锐变之路全能ui/ue设计师
...告创意设计网页版式设计与配色技巧移动端UI界面设计Web前端制作Javascript+jQuery+HTML5+CSS3UI交互动画设计课程目录:第1部分：PS基础第2部分：AI第3部分：平面实战第4部分：实用美术第5部分 查看详情
客户端热更新框架之ui热更框架设计(下)
...的重点是热更新如何与UI框架进行结合？ 现在笔者把设计“UI热更新框架”的整体设计与构建过程表述如下，最后附带源码工程的下载链接，供广大学员参考研究。如果大家有什么不明白的地方，欢迎大家在评论区进行... 查看详情
敏捷开发之理论概述篇
一、敏捷实践 1.敏捷宣言 个体与交互 胜过 过程和工具 可以工作的软件 胜过 面面俱到的文档 客户合作 胜过 合同谈判 响应变化 胜... 查看详情
ui设计基础概念（十）之ui设计术语中英文对照
参考技术AUI设计术语中英文对照说到英文，我就有一种淡淡的忧桑。。。宝宝从来没有进过啥大公司，在小公司沟通也是能多简单就多简单啊。但是最近跟大公司出来的技术狗们沟通的时候他们都是飙英文的。我真是蛋疼。。。... 查看详情
前端项目的开发流程
参考技术A 前端开发流程概述前端开发流程可分为需求分析、开发阶段、测试阶段、维护阶段，下面分别进行叙述。2.1需求分析这个环节中，首先是和客户进行交流，了解客户的需求，然后分析项目的可行性，撰写项目需求... 查看详情
ued视觉交互设计与流程介绍
...作用,您可能感兴趣的文章:项目管理－习惯发生范围变更前端性能核对表Checklist-2018大型电商互联网性能优化案例国际化环境下系统架构演化微服务架构设计视频直播平台的系统架构演化微服务与Docker介绍Docker与CI持续集成/CD互联... 查看详情
做ui设计的，需要学习哪些知识？
做UI设计的，需要学习哪些知识？很多初学者对UI设计师从事的工作不太了解，就陷入不知道自己能否学会，怎么学才好的困境，下面就带大家一探究竟，传说中的UI设计师职业大揭秘，希望帮你理清思路。1、工作内容UI设计从工... 查看详情