浅谈“形式服从功能原则”在移动终端icon设计中的应用

孟旭　赵树繁

摘 要：当今时代是快速发展的互联网时代，人们使用并逐渐依赖各种移动互联网产品，对其界面设计及交互形式的要求也越来越高。互联网企业为满足用户越来越高的需求，不断加快产品迭代的速度，对产品设计标准有了新的要求。一款成功的产品设计，应具备良好的使用功能、极好的表现形式。色彩是移动互联网产品中最直观的表现形式，应在服从功能的基础上，体现时代韵味，满足人们的心理及情感需求。本文从色彩的角度分析icon设计应注重功能，从功能出发，多种形式服从功能，这样产品才能达到设计的目的。

关键词：形式；功能；手机UI；icon

1 定义及发展

“形式服从功能”法则在《通用设计法则》一书中包含两种诠释：一个是美感性诠释（设计注重功能，美感属次要考虑）；另一个是描述性诠释（美感来自于纯粹的功能，没有其他多余的装饰）。两种诠释都强调了功能的重要性，形式次之。

2 形式和功能之间的关系

正确处理好形式和功能之间的关系是手机icon设计中的首要任务，形式是产品的表现形态，包括造型、颜色、展现效果，功能是产品某种特定功效和性能。本文中的形式是手机icon色彩的呈现形式，功能为icon使用色彩的目的、作用以及所要达到的一种效果。功能和形式相互作用，相互影响，形式是功能的载体和外在表现。icon的形式来源于功能，会受到功能的影响和约束。功能对产品形式的约束非常松散，满足同一功能的形式多种多样，并且形式会随着时代的发展不断发生改变，以适应人们不断变化的审美需求。

人们认识和研究事物的过程都是从简单到复杂再到简单的过程，无论是简单还是复杂，都是事物的形式，都是为功能服务，设计作品也是一样。随着时代的变化和人们认知的增强，形式会改变，但所要表达的意思及达到的功效是相同的、固定的。如图1为毕加索画的牛的演变过程，随着对牛更深层次的理解及自己造诣的提高，绘牛从写实到抽象演变，但画面始终能够解读为牛，充分说明形式上的复杂简单最终的落脚点是在牛的表达上。

再如图2为闹钟的多种形式，设计者最初设计的闹钟是拟物化风格，写实为主，尽可能还原真实闹钟的形态。随着时代的发展以及人们认知的不断增强，开始向扁平化的设计风格转化，但闹钟展现时间的功能始终没变，用最简单的形式把时间信息更直观地表现出来，减少了认知障碍。

3 “形式服从功能”原则在icon中的应用

（1）色彩能够清楚表达icon的语义。色彩本身并不具有特定的语义，是人们长时间通过对事物的认知、学习、记忆、联想把颜色转化成了特定的指向，就像我们的名字一样，说出名字就能想到特指的人。icon通过形状、色彩两种形式表达语义。在众多APP软件中，很多icon色彩并不是随意赋形，而是具有特定的语义指向、产品的特殊定位，能够让用户潜意识地联想产品，在联想的过程中将色彩符号转化成特定的语义。在实际项目中，笔者也运用了色彩的语义表达，借鉴气象灾害中的四个等级的颜色，将其运用到监控系统的产品设计中去。监控系统分为正常、警告、危险、严重四个等级，与气象灾害的四个等级相吻合。正常相对容易理解，代表色彩为绿色。笔者选取蓝、橙、红三个等级颜色让用户更容易认知监控等级，减少学习成本，同时蓝橙、红绿为互补色，起到对比作用，加强表现效果。

（2）划分功能区。手机APP界面包含很多功能模块，各模块icon会填充不同的颜色，按功能区分类成组排布，使功能区划分更加直观明确，减少用户的学习成本和认知负荷，提高阅读效率。好的icon风格设计一定要保持一致，这样才能保证设计的统一性。页面功能区随着导航栏图标的切换不断发生变化，且同一类别的图标放在一起，使功能区划分更加直观。

（3）引导功能。icon发展至今分为两种形态：功能icon、软件icon。其交互的形式经历了多个阶段，从最初的点击无任何效果的切换跳转到现在很多设计产品的动效切换，最终目的是为了增强用户与产品的互动，达到很好的交互。从色彩的角度出发，icon的交互形态（点击前后反应）大致分为三种：线线之间切换、面面之间切换、线面之间切换。根据产品的形态和产品定位选择某种切换方式，其主要目的是进行视觉引导。形式上为负形icon，具有很好的设计感，轻表达；另外一种为正形icon，面积比较大，比负形的视觉注意力强，与负形在一起使用，能够很好地调动用户的视线流，提高学习效率，使其在最短的时间内获知最多的页面交互形式。

（4）强调功能。在icon设计中，重要的信息或者有意让用户观察到的信息，可以采用“万绿丛中一点红”方式去强调，吸引用户注意力，让用户很直观容易地获取信息。在色彩方面常用的方法为提高明度、增加对比度等。以微信为例，导航栏icon选中状态为绿色，有消息时采用互补色红色，增强对比效果，给用户产生强烈的视觉刺激，吸引用户视线，用户可以很直观地获取发现中的新项目，从而增加点击欲望。如果没有红色或者采用其他颜色，效果会大打折扣。

（5）协调功能。线型图标饱和度低，面型图标饱和度高，饱和度高的有前进感，饱和度低的有后退感，两者放在一起具有一定的层次感。在我们平常使用的微信界面，发现图标与其他三个图标颜色不同，饱和度高的绿色表现出当前页面为发现页面，达到了图标语义传达的功能。全部为绿色，会产生视觉疲劳，而灰色、银色为中性色，能够协调其他颜色，使图标更加统一。

4 结语

本文通过实例对手机APP中icon色彩的运用进行研究，分析出色彩在icon设计中的重要性，总结出色彩运用到icon中的几种功能。如果说icon颜色、形状、交互状态属于“形式”，那么用户需求就是最根本的“功能”。“形式服从功能”中的形式并不是一种，功能的表现可以为多种形式，但形式的展现一定要服从于功能，根据功能的需要，选择合适的形式。

参考文献：

[1] 立德威尔（美），霍顿（美），巴特勒（美）.通用设计法则[M].朱占星，薛江，译.北京：中央编译出版社，2013.

[2] 泰德维尔（美）.界面设计模式（第二版）[M].蒋芳，等，译.北京：电子工业出版社，2013.

[3] Smashing Magazine .众妙之门网站UI设计之道[M].贾云龙，王士强，译.人民邮电出版社，2012.

[4] 约瑟夫·阿尔伯斯.色彩构成[M].李敏敏，译.重庆：重庆大学出版社，2012：33-47.

作者简介：孟旭（1990—），男，山东枣庄人，北京邮电大学数字媒体与设计艺术学院设计艺术学专业2014级硕士研究生。