注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

My Dream

我的“艺术动漫库”

 
 
 

日志

 
 
关于我

双鱼座的我,多愁善感又爱做梦,只有在艺术的海洋里才能自由呼吸,并努力寻找着属于自己的那片绚丽空间~

 
 

UI设计的种种—软件界面设计  

2011-02-11 17:31:16|  分类: 艺术理论 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Nov 08 , 2010 中文日志, 理论教程 Comment (1)

4,206 views

Loading Picture...

很多朋友经常问起,什么是UI设计 ,UI设计是不是就是画图标?UI设计师一般都做些什么呢?等等一些问题。之前也跟一些朋友讨论过,今天,我以一款早前做的AVC公司的产品ADC(简称)界面作为例子结合之前学习过的一些方法来说说ui设计中软件应用方面的内容,希望对想加入这个行业的朋友和设计爱好者有所帮助。当然,这些都只代表一方观点,欢迎一起讨论。

注:这里有必要先向大家介绍一下这款软件的基本情况,为方便下面的内容便于理解。
ADC是一款视频格式转换软件,也是最早几家开发这类软件的公司产品之一。拥有搜索引擎世界排名第一的绝对SEO 强势。全球下载量接近1亿。这类型的软件现在遍地都是,功能也大相径庭。总而言之,是一款适用于家庭的小型工具类软件。

如果你有SEO 或者网站推广方面的专长,你也可以通过代理销售 的方式,跟这类型的公司取得合作,晕,跑题了。

 


图标的表意—先加法,再减法。

图标设计在整个界面来说,占有举足轻重的地位,准确的表意,无疑是这枚图标所要承担的主要“责任”。比如,一枚要表达“添加DVD”的按钮,这里头就会有两种意思的传达,第一是“添加”,第二是“DVD”,那么就画一个”DVD光盘”加上一个“加号”不就完美表达了这枚图标的意思吗?不错,这样做确实没有太大的问题,的确看上去很“恰当”,但是,难道我们需要一排的“加号”来表达添加这个,或添加那个?能不能再简化一点呢?

在用户使用这款软件之前,就已经很明确的知道了这款软件的功能,打开程序以后,第一时间要获取的信息就是赶紧找到那个可以开始工作的按钮,是DVD或者是一般的视频文件,OK,找到那个”DVD”吧,尽快工作起来吧。

剪掉那个似乎“很有必要”的“加号”吧。

Loading Picture...


小图标的优化

在做图标的时候,碰到需要使用小图标的时候,对大图标直接缩小,往往会造成图标质量的下降,根据不同图标的式样,采用不同的修饰方式,使小图标的显示质量最大化。

在这里,需要一枚20×20的图标,首先,我将原图标缩小到20px的尺寸,缩小后的图标质量发生了很大的变化(如事例1),很模糊,形边不清楚,将图标放大(如事例2),光盘的内圈几乎压缩没了,高光也变灰了,颜色也变得脏了。对此,我将这些被压损的地方进行了调整,根据光源方向,做了相应的素描和色彩关系的调整(如事例3)。

Loading Picture...

Loading Picture...

其它的图标也是一样,大图标缩小后都需要重新进行调整,甚至重新设计。

Loading Picture...

项目中往往会碰到很多形状不同复杂的图标,在它们缩小后,质量效果颜色修饰等都会不同程度的压缩,处理这些问题的时候,一般都有以下几种办法。


当大图标是一种带透视的,在小图标的修改中就可以将透视舍去,采用平视的角度来使元素最大化充满仅有的几十个像素空间。
元素复杂,比如元素为人物等,可以截取最能表现该图标含义的局部。这个主要见于程序的主LOGO上。
另外,大图标空间比较大,可以修饰的元素相对来说比较“自由“比较多,这些修饰元素在小图标里面就可以舍去,只保留有用的信息即可。

Loading Picture...


图标的创意应以用户的意识习惯为基础

Loading Picture...

一些特定的图标概念,在很长时间里已经广泛被人们所接受和认同,并已经作为人们判断的一种习惯。

我们在设计图标创意的时候,应遵循用户的这种基本的判断习惯。比如“回收站”图标,人们已经习惯了一个废纸回收桶为原型,如果你只顾追求图标的创意不顾及用户的判断习惯,弄成一个碎纸机,表面上没什么问题,隐喻也恰当,造型也不错,但是当用户在使用的时候,他就会产生出一个以前他完全没有做出过的顾虑,“这是不是回收站呢?我能实现删除文件的操作吗?哦,这个是的,它是回收站!”相反,一开始,“我将我需要删除的文件拉入回收站,暂时删除了吧!”


根据用户使用环境的设计

Loading Picture...

用户的使用环境千差万别,你用的可能是27 英寸的宽屏液晶 iMac,那显示效果,显示比例堪称完美,但用iMac的毕竟不多。如果你以前没有涉及过这方面的内容,或许你会问,用户用什么型号的机器,我从何得知呢,其实有很多种简单的方法,比如用最基本的google分析工具 awstats 便能得到基本的一些信息。当然还有很多收费的分析工具,它能够帮你找到很多你都想不到的用户使用环境数据。不过,你如果是在大公司,通常这些数据都会有专门的UE 部门负责。这里有篇文章“UE平民化测试”

通过数据了解到,该款产品的用户群中使用1024×768分辨率的用户是最多的,占到了26%。

得到这组数据后,你就要考虑,从产品的主站开始就要依循这个用户使用习惯。带着这个“要求”来做设计,面对用户,你才能有“理由”。


UI设计不要只停留在做做图改改图上

也许你刚刚加入UI设计行业,还并不了解这行业的一些基本信息,平常的工作可能就停留在图片图标的美化上。别人评价你工作的称谓可能就是美工。虽然怎样称呼并不重要(如果你很在意这种称呼上的名词,那请暂时放下这个无关的称谓。),但你要知道,为什么会被这样称呼。

当你只沉浸在美化图片或图标上,而不关心开发运营这个产品的各个环节的要素,那叫你美工你也只能认。因为在别人看来,你所做的就只是美化界面。一款产品从开发到运营,每个环节都是紧密联系的,而你所做的工作可能就是开发和运营之间那个看似非常孤立的环节。

设计和美化的区别,在你进入这个行业开始的那天就要明确

  评论这张
 
阅读(84)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018