立即注册 登录
 找回密码
 立即注册
搜索

解读!APP界面图标设计

2018-6-10 10:30| 发布者: cocoo| 查看: 118| 评论: 0|原作者: 文/刘迪 陈新华

摘要: 图标以图形符号的形式来规划并整理信息内容,方便人们的记录和交流。
 

手机界面作为用户与手机交流和互动的直接媒介,其设计的好坏关系到用户对手机使用的持久度和信赖度,而在整个界面中最重要的元素则是简单直观的应用图标。通过对图标的设计可以形成手机与人以及其他数码产品、环境和文化等之间的相互关系。


界面图标的特征

图标以图形符号的形式来规划并整理信息内容,方便人们的记录和交流。随着手机应用领域和需求用户的无限扩大,增强手机图形界面的视觉设计是很重要的。图标作为手机用户界面中重要的表现元素,承载大量信息量的同时还必须达到简洁表意的作用。


在这么小的界面里要用简单的造型准确表达含义是比较复杂,有时对于简单的图形,不同用户的理解也不一样。如果手机图标的设计只是将着眼点放在表面视觉因素的“好看”上,就失去了最初用图标代替文字的目的。因为较文字而言,图标的优势在于:概括性和可认知性强,大大提高了界面的易用性;形象生动、醒目,提升界面的视觉效果。


但唯一不足的是不如文字表达准确,大量手机图标的设计常常使得用户存在误解,导致错误的操作和不便的使用。而图标的最主要作用是功能性,其次才是美观性。若片面的追求高精细和质感,则会忽视图标的可用性和易用性。图标的可用性与精细度的变化可形成一个峰状的曲线。可用性会随着提高精细度而上升,当达到一定精细度后,图标的可用性往往会随着图标的精细度而下降。


图标的基本功能

图标的符号特征之所以得以辨认和理解,是依赖于用户在长期的生活经验中形成了对图形的联想感受和心理感受。图标的美观不仅要体现艺术形式的美,更多的是在人机交互中带给用户的愉悦体验。手机图标需要尽量的简单化、整体化,并注意图形与背景的关系。同样的场,当它是图形时要比当它是背景时,看上去更加色彩鲜明一点。


现在越来越多手机的界面都采用深色背景和鲜亮图标的对比,在深色背景下的图标会显得更为突出和活泼,方便用户即使在昏暗的环境中也能清晰的辨认各个程序图标,减少错误点击的可能性。如今手机的消费除了实用性,用户还在意手机的品牌价值和情感归属性。因此图标作为视觉符号所形成的传递性和交互性也就显现的尤为重要。手机通过增强界面图标所带来的交互体验方式,使用户的操作更具趣味性。


图标的视觉设计

图标的视觉设计包括其形态(form)、色彩(colour)、材质(material)、布局(1ayout),为便于表述与记忆可提取各英文单词首字母而缩写为“F.C.M.l。


①形态。手机界面图标的形态丰富又具有概括性,在界面中形成了对称与均衡、统一与变化、动态与静止的综合体现。因此图标的形态要尽量简洁现代,避免过度使用象征性的隐喻符号,用简单的图形作为整体象征性的代表。随着手机技术的发展和用户情感需求的提升,手机图标的造型也出现了一系列的变化。其设计由最初的理性直线形态逐渐变为现在温和圆润的造型,这种富有情感的图标符合用户的情感认知和使用习惯。


②色彩。用户对物品感受最为直接和敏感的元素是色彩。色彩产生的是情感经验,例如红色可代表危险和停止;黄色和黑色一起使用时,表示警告、注意;绿色代表安全和通行等。手机界面的图标色彩中也应具有相似的表达,才能符合用户日常的生活习惯和经历。根据功能性来看,具有一定提示和备忘作用的应用图标常采用的是暖色,比如橙色、红色;天气和GPRS等较为客观、有科技含量的应用图标多用蓝色、绿色和灰色等。


③材质。从视觉传达的角度来看,手机界面图标所体现的材质感是指其体现的感觉和给人的印象。各种不同的材质感为图标的设计提供了更多丰富的视觉效果,同时也提高了图标的可视性。如今,半透明性晶体的图标正以主角的形式塑造着界面的体积感和质感,其材质表现出高档、圆润、科技和易亲近,也使整个手机界面的设计更加趋于人性化。


④布局。手机界面内空间的布局除了影响到整体界面的视觉效果之外,更重要的是能否可以准确快速的进行识别和操作。整体界面的视觉布局,首先是指桌面背景和主要图标的集合以某种特定的主题方式加以展现,这种展现不仅涉及虚拟空间中符号的视觉,也涉及符号与符号、符号与背景之间的联系方式。因此单个图标的大小、与其他图标之间的比例关系以及整体图标排列的布局都是设计图标时应该考虑到的问题。


从可用性的角度讲,并不是越花哨越精致的图标越被用户所接受,图标的可用性最终要回到它的基本功能去思考。而它的基本功能应遵循以用户为中心的原则,建立起一种手机界面与真实世界的隐喻或者映射关系,将符号信息迅速、准确地传达给用户,并使用户轻松地理解图标所象征的意义。因此,一套设计合理的图标应是可用性原则和美学原则达到统一的结果。

注:本文为 设计智造编辑整理,转载请注明 来源:设计智造 http://cocoo.top

    本文版权归原作者所有,如有侵权请来信告知(cocootop@163.com),可合作,我们愿意支付稿费。

相关阅读

  • 解析汉字设计技巧!重构法
  • 优秀Logo设计的基本表现技法!
  • 广告图形的巧妙运用!别具一格!
  • 版式对比!有哪些表现形式?
  • 汉字图形化设计技法!形与意的表现

免责声明|小黑屋|COCOO.TOP 设计智造 ( 冀ICP备16009769号 )

GMT+8, 2019-3-21 05:23 , Processed in 0.033409 second(s), 17 queries .

Powered by CO2! X3.2

© 998866 Comsenz Inc.

返回顶部