手机界面图标设计原则
作者:丁男 时慧娴
来源:《戏剧之家》2019年第21期
        【摘 要】在手机界面中图标是引导用户操作最重要的视觉符号,设计师在手机图标设计过程中,参考具有普遍指导意义的手机界面图标通用原则是设计出优秀图标的必要流程和规范。手机登陆界面设计
        【关键词】数字媒体艺术;图标设计;手机界面
        中图分类号:TB472 ; 文献标志码:A ;文章编号:1007-0125(2019)21-0140-02
        图标是手机界面最重要的视觉元素之一,是应用产品内涵最直接的传达。我们打开手机第一件事就是通过点击图标来进入想要使用的应用,进入应用后,往往也是通过图标来打开需要的功能界面。这就要求设计师在手机界面设计的过程中,始终要把图标设计放在重要位置,并建立具有普遍指导意义的手机界面图标通用原则。
        优秀的图标设计在视觉风格上各不相同,但一般来说会有一些相同点,即统一性原则、识别性原则、差异性原则。
        一、统一性原则
        评价图标设计优劣的重要标准就是图标的视觉风格是否统一。统一的图标视觉风格可以使手机界面布局整齐合理,降低用户的交互操作难度,增强界面产品易用性。将系统图标统一有很多种方法,如图标彩统一、图标图形风格统一、图标图形透视关系统一、图标视觉尺寸统一等。
        (一)彩统一。图标的彩统一需要在图形统一的基础上进行,只有统一的彩而没有统一的图形风格,无法达到图标的统一性,没有图形风格的图标看上去整体性较差,视觉混乱,对用户快速理解图标信息不利,是图标设计中的禁忌。实现图标彩的统一性原则一般有两种方法。一是彩绝对统一,将图标图形本身赋予相同的颜,或者将图标背景调整成相同颜,这种彩统一方法常用于扁平化图标中的线性图标或块图标,统一的彩会给人以整齐划一的秩序感与统一感,让用户尽可能忽略图标本身的视觉冲击,降低图标彩给用户带来的视觉干扰,强调图标本身的功能性。二是彩相对统一,将图标赋予不同的
彩,但每个图标会有一个彩基调,同时保证每个图标的调在纯度、明度、饱和度方面高度一致,使整套图标彩在一个和谐的彩调性系统中。此类彩统一方法常用在拟物化图标或轻拟物图标的彩表达,丰富的彩可以让图标呈现出真实的质感、厚重的体积感以及高精度的细节与渐变,让图标成为增强画面视觉效果的重要因素。
        (二)图形风格统一。图形风格的统一是图标统一性中最重要的视觉设计原则。图形风格的统一可以通过在各个图标中添加相同视觉元素来实现。如,为所有图标添加圆角,通过为图形所有的直角或斜角添加统一直径的外圆角和内圆角,可以使各个图标在视觉上有了联系因素,即使设计的是不同的事物也会呈现出统一的视觉风格。以相同粗细的线条表现图形也可以增强图形的统一性,当然在实际设计中可能还有更多的设计元素需要统一,只要遵循这个统一的原则就一定能设计出一套有品质保证的图标。图形视觉风格的统一带来良好的视觉体验。除了图形风格统一之外,我们还需要考虑图标系统置于整个界面中在视觉风格上是否统一,界面整体的视觉风格统一是衡量图形界面优劣的重要评价标准。
        (三)透视角度统一。图标设计的透视角度是设计师经常忽略的因素,一般来讲我们都会选择水平正视的角度进行图标的图形设计,这个角度的图标图形会呈现出事物最常见的轮
廓状态,同时在设计时因为没有透视因素,可以提高设计师的工作效率,更加简洁概括的设计图标图形。有些情况下,我们会选取一定透视角度下的物体形态作为图表设计的参照,此时就需要我们注意多个图标透视角度的统一性设计,避免多个图标呈现出各个不同视角下的错乱的透视关系,这样的图标设计会给人空间关系不清晰,看着别扭难受的视觉感受。同时,在扁平化设计趋势下,我们也应当尽量避免非常规透视角度的图标图形设计,也当避免不同透视角度图标在同一个界面中出现。
        (四)视觉尺寸统一。图标之间的大小统一需要通过视觉尺寸的统一性完成。这个视觉尺寸与我们通常意义上的物理尺寸有一定区别。如,正方形的长宽与圆形的直径相等,在物理尺寸上它们应该具有统一性,但是显然正方形要比圆形看上去更大。一方面因为它们的面积不相等,导致方形的视觉重量感更重,使画面向左倾斜。所以在手机图标设计中,我们通常将圆形图标增加一部分的直径,使圆形图标和正方形图标在视觉上达到平衡和统一。界面和图标始终是给人使用的,多个图标最终要实现视觉尺寸的统一而非物理尺寸的统一。
        二、识别性原则
        设计师在图标设计的过程中经常会过度装饰或者过于注重视觉形式而忽略了图标本身的
功能指代,最终导致图标难以被识别,这种做法无疑是本末倒置,也打破了图标最重要的功能属性,即传达信息并指代功能的意义,这样的图标视觉效果再好也无济于事。图标是功能的视觉呈现,如果用户无法通过理解图标指代操作,图标就立刻失去了价值,还会成为界面中的视觉干扰因素。这就要求我们在图标设计过程中,时刻谨记图标存在的最重要的意义——识别性。图标的识别性可以通过以下几种方式进行强化,达到让用户快速识别并指引交互操作的作用。
        (一)保持简单而直接的传递信息。图标设计的本质是快速识别指代性,这就要求我们将隐喻事物图形概括到最简单最直接传达信息的形状和轮廓,降低用户的学习成本。图标设计更应确保其可读性和清晰度,所以优秀的图标设计是能够被快速辨认。抛弃简单有效的信息传达方法可能会对用户体验产生一定的负面影响。
        (二)提供清晰的文字释义。减少用户思考的时间可以有效增强用户体验。优秀图标设计最重要的特征就是让用户对图标的指代性一目了然。各个图标应该快速指引用户理解每个图标是要做什么,怎样去操作。但是毕竟图标的隐喻有一定的局限性,尤其对于那些抽象的概念,设计师更是束手无策,为避免用户对此类图标可能会产生的误解,我们应当在图标下
方设计一个可以不显著的文本标签,用于清晰传达图标的指代信息。为用户提供最基础的信息功能显眼的图标图形与不显眼的释义文本的结合是图标现阶段最优的设计方案。
        (三)对图标进行可用性测试。UI设计师相对普通人而言,是视觉设计和交互行为的专家,他们有对图形的深刻理解,对图形有着一般人难以企及的识别能力,所以,在图标图形设计的过程中,设计师认为的“易识别”有可能成为普通人眼中的“难以识别”,这就要求设计师必须对完成的图标进行可用性测试,尤其是设计师已经熟悉了正在设计的图标系统,很难再用陌生的眼光审视整个图标系统时,需要测试并记录一定数量的新用户对图标的识别与理解,这些用户的反馈才是对界面优劣最真实的反映,图标的可用性测试可以帮助我们判断图标识别性是否达到易用标准。在测试过程中通常以识别性测试和可记忆性测试为主,可识别性方面,主要测试用户对图标的第一时间的指代反应。可记忆性方面,需要按時多次测试用户对同一个图标指代性的记忆程度。
        三、差异性原则
        图标设计的统一性和差异性原则常常引起初学者的误解。统一是图标设计风格统一,而差异是图标之间的指代含义要明确。图标的差异性原则与图标的统一性原则并不相悖。图标
的统一性是图标设计过程中图形设计风格、彩调性、视觉尺寸、透视角度应保持统一的关系。而图标的差异性是同一界面中的图标应在图形轮廓,图形指代性方面存在明显差异,避免干扰用户选择。这是图标设计的重要原则,如果一个界面上有多个图标,而这些图标在轮廓或指代含义有很高的相似度,用户就容易受到干扰,无法快速从中辨识出需要的图标。这一点经常被设计师忽略。设计师在图标统一风格设计时,为达到视觉风格的高度统一,常常不自觉地将不同图标的图形混淆,导致设计的图标互相干扰,难以快速辨识。这就要求我们在做好图标视觉风格统一的基础上,尽可能的拉大图标之间轮廓形态与指代含义上的差异。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。