审美、效用与情感——关于icon和Logo设计的一些想法

转载 2015年07月07日 10:47:03


虽然Pages和Keynote拥有非常精致的造型和拟真效果,但是就icon设计而言,Numbers要超过它们。 Numbers脱胎于现实中的物体但又不是完全模拟它们,形象更简洁有力。

 

从表意性上,Numbers 对图表工具的概念进行了成功的提取和抽象,相信任何人第一次见到这个icon的时候都能认出它是一种什么工具,但墨水瓶(Pages)的象征性太模糊,演讲台(Keynote)是一个人们不熟悉的且特征不明显的事物。人们在通过icon形象识别出工具用途时要更困难。

 

从辨识度上,透视和视角的选用形成了很强的立体感,配色也非常鲜明。这些都提高了你从dock条上把它辨识出来的几率。它的小尺寸表现也好于其它两者。

 

Icon的成功更多取决于它是否能有效表意(功能、用途或者非常鲜明的个性特征)并且具有很强区分度,容易认出并建立关联。而不是在于它是否材质更漂亮或更拟真。

 

为什么iOS UI上所有的icon都限制为圆角矩形?

 


有一些设备的UI上的icon允许透明通道,也就是允许icon是各种形状的。这显然让设计师有更大的发挥余地,能够创作出更漂亮的作品。

 

但是iPhone的桌面是一个访问频率非常高、空间有限、icon放置密度非常高的环境。icon之间的间距没法很大,如果不统一上面几十个icon的形状,会导致一个非常杂乱的界面,icon之间也会彼此干扰。(虽然LaunchPad也是这种罗列icon的方式,但拥有较大的空间和间距,情况会好一点。)所以规整统一的形状可以带来良好的节奏和协调的感官,同时也可以和设备的整体外形相呼应。

 

此外,设定这一“游戏规则”也平均了icon们的风格和水准。目前app stone上已经上架了10W个应用,也就有10W个icon,设计水平参差不齐。但统一的形状和iOS官方icon设计所引导的风格,让最差的设计师也不会做出烂得超过底线,影响整个设备UI的icon来。即使你啥都不会,选一个背景色,在上面放一个字母,也能成为你的icon,而且效果也不太坏。所以在iOS设备上你不会看到那种一堆icon里突然冒出一个特别土带着粗大的锯齿边和蹩脚阴影的刺眼玩意。

 

从iOS的开发定位来看,Apple一直都选用的是一个平均化但是最能保证整体效果的方案。让一个工程师,仅仅利用默认控件,也能做出可用可看的App。

 

设计和艺术的区别之一正是“设计是带着镣铐跳舞”。

 

游戏规则的设定,就是为了保障整个游戏的可玩性和所有玩家的利益,我想对所有icon外形的限制(包括HIG中对许多控件及交互方式的限制)就是整个平台设计策略的一环。

 

为什么Adobe套装里的icon都做成那个样子?

 

CS2在04年发布,CS3在07年发布。这3年间Adobe做了很多重要的战略调整,事件之一是收购了Marcomedia,并且更强调工具之间的兼容性,并提供一些平台化工具。Adobe需要推出更多套装,并在里面包含更多应用。从提供工具变成了提供工具箱。

 

CS3刚出来的时候,对icon设计进行了重大的改变,当然获得了大量恶评,理由都是一个丑。就单个icon来看,CS3的PS图标比CS2差几个级别,Adobe不是找不到好设计师,为什么要这么做。

 

看完这张图就明白了。Adobe的设计工具都比较难以根据功能来提取出一个具象概念,只好用羽毛,花朵,树叶这种很“精神层面”的的物体来表示。当套装变得更大,设计师桌面上需要放下更多Adobe应用的icon时会出现什么状况,他的鼠标会在几个icon之间遊移。当然假以时日,反射弧会被建立,也会通过摆放位置来进行记忆,但对于新用户而言,这无疑是一个悲剧。

 

展示这张图不是为了说明Adobe的新icon们在色相环上的分布,而是为了说明有它们工具数量的庞大。

 

CS3系列后的新icon虽然不好看,但无疑极为直观,无需建立对象及其象征物之间的关联,这不是表意而是直接对着你喊出来,“我是PS”。文字带来最快速的反应。

 

风格强烈,你可以轻易识别出它们是属于一个Adobe的。

 

此外它最大化利用了系统中icon的尺寸限制,一整个大色块。所以你会发现它们无论是在dock条还是windows桌面上,都是抢眼的。

 

设计过程中如何做决策,美的标准是什么,我借用一下《data visualization》一书中的观点:novel (创新), informative (这里可以理解为否实现设计的功能,传达出需要传达的信息), efficient (能否有效地达成设计诉求), aesthetic (是否有视觉魅力)。受众、目标和情境是设计开始之前必须回答的问题,一个不能保障可用性(有效达成目标,满足需求,适配于使用情境)的设计,再好看再创新也是失败的。Adobe的选择也正是基于这一点。

 

相关文章推荐

【读书札记】《怦然心动——情感化交互设计指南》

最近频频有以前的同学,朋友的朋友托我帮忙给他们做一个网站,我想一个网站嘛,他们要求的也不高,就是简简单单给他们布个局,搞点动态效果,炫一点就行了。可是随着不断的构思,我越发的感到做一个好的网站,用户友...

杂谈对抽象事物的审美——繁体字与简体字,孰美?

春眠不觉晓,处处闻啼鸟。春眠不覺曉,處處聞啼鳥。上面两句诗,那一句看起来更美?一个大陆人很可能选择前一句,认为前者简洁清爽,后者繁琐臃肿;一个台湾人则会选择后一句,觉得后者端正有韵味,前者简陋残缺。汉...
  • starrow
  • starrow
  • 2014年11月17日 14:44
  • 3770

零审美Web前端系列——(00)导语

我主要从事地理信息系统(GIS)的开发工作。个人审美水平一般,最近一年却经常来做网页前端,我也百思不得其解。但是毕竟有钱拿,还是接下了这些活,在做的过程中,也学习到了很多知识,了解到很多前端框架。因此...

【Android 应用开发】 ActionBar 样式详解 -- 样式 主题 简介 Actionbar 的 icon logo 标题 菜单样式修改

a. 样式 和 主题详解 ; . b. Actionbar 主题详解 . c. ActionBar 样式修改

ActionBar 样式详解 -- 样式 主题 简介 Actionbar 的 icon logo 标题 菜单样式修改

一. 样式 和 主题 资源 1. 样式资源解析 (1) 样式简介 样式解析 : 样式是设置给 View 组件的多个属性的集合;  -- 样式的好处 : 给一个 TextView 设置 文字大小...

解决Toolbar的Icon、logo、title间距问题

1.修改title 边距 修改边距使用系统的app属性来引入使用,即: xmlns:app="http://schemas.android.com/apk/res-auto"11 比如: an...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:审美、效用与情感——关于icon和Logo设计的一些想法
举报原因:
原因补充:

(最多只允许输入30个字)