Skip to content
Mr.HopeMr.Hope
主页
  • UI 设计
    • 图标

      • 图标
        • 图标介绍
          • 图标的基本认识
            • 总结
            • 图标种类
              • 图标设计指南
                • 学习图标所需的软件
                  • 图标绘制流程
                    • 线性图标设计
                      • 面性图标设计
                        • 装饰性图标设计
                          • 启动图标设计指南
                            • 图标设计技巧
                              • 图标应用
                              • 导航

                                • 导航设计介绍
                                  • 导航栏设计
                                    • 导航栏设计技巧
                                      • 侧边栏导航
                                        • 标签导航设计
                                          • 标签导航设计技巧
                                          • 交互

                                            • 交互设计
                                              • 搜索框设计
                                                • 文本框设计
                                                • 文章

                                                  • 设计文章
                                                    • 格式塔原则
                                                      • 布局中的左和右
                                                        • 信息流介绍
                                                        • APP 组件设计规范

                                                          图标介绍

                                                          Mr.Hope2020年9月13日
                                                          • 设计
                                                          • Icon
                                                          大约 2 分钟

                                                          此页内容
                                                          • 图标的基本认识
                                                          • 总结

                                                          # 图标的基本认识

                                                          图标,是一种图形化的标识,它有广义和狭义两种概念,广义指的是所有现实中有明确指向含义的图形符号,狭义主要指在计算机设备界面中的图形符号,有非常大的覆盖范围。

                                                          对于 UI 设计师而言,主要针对的就是狭义的概念,它是 UI 界面视觉组成的关键元素之一。

                                                          在当下最常见的扁平化设计风格中,界面的实际视觉组成只有 4 种元素,图片、文字、几何图形、图标。

                                                          由图片、文字、几何、图标组成的界面

                                                          可以说,图片、文字、几何图形的运用,都只用到排版的技巧,而图标,是 UI 设计中除了插画元素以外唯一需要「绘制」、「创作」的元素,一涉及到这两件事,难度就直线上升了。

                                                          本来往界面里丢一些方方圆圆、贴几张图、填一些字,就可以把界面做出来了,比如 Clear APP,不仅工作量少,而且还符合极简原则,为什么还要吃力不讨好的设计图标?

                                                          Clear APP 的截图

                                                          这就涉及图标作用的探讨了,本文就不长篇大论从上古时期人类与图形符号的纠葛开始写了,就谈对于图形界面本身,为什么图标有这么重要的地位,没它不行?

                                                          有两个原因,第一文字虽然也是一种图形符号,但相对于图标而言,文字实在太复杂了,在识别效率上有先天的劣势。再者,不同的语言,文字的长度也不同,如果换成阿拉伯语或者俄罗斯语,或许一行还装不下所有文字。图标可以以一种更高效的方式,将想要传递的信息进行浓缩,不仅易于识别,也能让界面更简洁,利于排版,比如下方案例。

                                                          应用文字替换了图标的对比

                                                          第二点,就是关于视觉的观赏性。有些页面中,如果把图标去掉了,也丝毫不会影响操作效率,以及对内容的理解。但没有图标,缺少这些点缀,这个页面看起来就会太枯燥,最好的例子就是应用的设置页了,见下方案例。

                                                          设置页有图标和没有图标的对比

                                                          # 总结

                                                          在 UI 的界面中,图标的主要作用是用来高效地传递信息,以及起到美化界面的作用。

                                                          编辑此页open in new window
                                                          上次编辑于: 2022/2/6 16:46:58
                                                          贡献者: Mr.Hope
                                                          上一页
                                                          图标
                                                          下一页
                                                          图标种类

                                                          预览:

                                                          0  字
                                                          评论
                                                          Powered by Waline v2.5.1
                                                          Copyright © 2019-present Mr.Hope