<![CDATA[Acelee]]>

<![CDATA[Acelee]]> http://176762908.qzone.qq.com Mon, 30 Nov 2009 05:25:24 GMT Qzone zh-cn Copyright (C), 2005-2008, Tencent Tech. Co., Ltd. Sun, 21 Jun 2009 02:02:15 GMT <![CDATA[来北京一周了]]> http://176762908.qzone.qq.com/blog/1245549735
北京给我的感觉就是很干、很大、很发达！呵呵！
这里有我的梦想，我要尽自己最大的努力去工作，因为我从骨子里热爱这份工作！
]]> http://176762908.qzone.qq.com/blog/1245549735#comment 134218258 Sun, 21 Jun 2009 02:02:15 GMT http://176762908.qzone.qq.com/blog/1245549735 <![CDATA[对交互设计师和UI设计师招聘的一些看法 (转)]]> http://176762908.qzone.qq.com/blog/1243404539 那么作为一个设计师来说，究竟是“证”重要，还是能力更重要……
我的观点是：学习能力和技能比学历更重要。
梵高受的是什么样的教育？可是丝毫不影响他对艺术的追求与造诣。他的色彩和构图是很多当时“学院派”艺术家所不屑的，但作品却有强的韵律在里面，也充满了想象力。
唐沐（用户研究与体验设计中心负责人）也并非科班出身，他大学学是会计的。可他对界面设计和产品用户体验的理解，又有谁所能及呢？我很欣赏他在接受视觉同盟采访的时说的一句话，他原话是这样的：“……后来考上了华南理工大学，专业是国际会计，现在很多人听到我的专业总会睁大了眼睛问“why？”或者“how？”，其实也并不奇怪，试问现在有多少大学生在大学里学习着他们并不喜欢的专业？而在毕业后又有多少人泯灭理想去做自己并不喜欢的工作？我只是其中比较有决心和毅力的一个……”
而且可以肯定的是第一批研究互联网交互设计的，肯定不是某某大学交互设计专业的本科学生，这就像爱迪生发明电灯时不是学物理学专业或化学专业一样。大家都是在黑暗中慢慢摸索，通过学习才了解UI设计和交互设计的一些理论依据和禁忌，尤其是交互设计是一个比较新的领域，所以在大的环境下我们都是学生，没有谁高谁底。
有很多非科班的设计师对我说“我大学不是学设计专业……也非本科…以后还做不做设计……”之类云云，我的回答是“有这种担心是正常的，但过于担心就说明你对自己没自信，或者说太考虑别人眼中的尺子，但如果连你自己都不自信，那别人又怎么能相信你呢？别人对于标准的衡量那是别人的尺子，你自己要客观的正视自己，勿自大，更别妄自菲薄。多考虑你为何要从事这个行业？你的兴趣爱好在这方面么？它是你梦寐以求想要从事的工作么？” 至于你是否能给企业创造价值，那是建立在前几点假设都成立的基础上的。
如果是？ok，那么你就去做；如果不是，也没兴趣，那想想你到底应该做什么。
就这么简单！
任何人都不是一出生就能当UI设计师或交互设计师的，这是需要后天努力习得的技能。所以在某些时候，劣势成优势，你非科班，就需要付出比别人多N倍的精力去学习知识，去证明自己，而正是这种学习能力会缩短你和科班的学生的差距。
所以我认为对于一个设计师来说，出身并不重要，重要的是他是否拥有良好的悟性以及学习能力。
没错，我也是一个非科班的设计师，我学的是会计，这也没什么丢人的（唐沐都这么坦诚了，我站在巨人的肩膀上跟着坦诚一下，是我的荣幸），更没有什么资本向别人炫耀。所以这种劣势给预我的压力的同时，也造就了我的学习能力，如果职业生涯是一场长跑的话，我们可以因种种原因输在起点上，但绝不能用“我不是科班”这个借口让自己输在终点上。
两扇门——我们得感谢上帝把"科班"的门给我们紧紧的关上，这就意味着我们只能从他打开的另一扇门——“学习”中要走得更持久，更艰辛，也更坚定！
其实大家的经历都一样，我曾也犯过很低级的设计错误，作品也被毙过N多次，甚至曾被打击得一点信心都没有（来北京的第一家公司，老板是奥美互动的前任大中华区总裁，对设计诉求提的相当苛刻）但别因此就灰心丧气，更别嫉恨他们，反而要感谢批评过你的人，给予你建议的人，甚至用恶毒语言中伤过你的人，3~5年之后你再回头看的时候，你会发现正是这些肥料，才让自己茁长的成长起来，才让自己的壳慢慢坚实，百毒不侵。“用感恩的心去工作”这不是作秀，更多的是感慨吧。
回过头来再说下招聘，企业招聘自然是想用更“专业”的人才，去做更专业的事，但问题是“专业”这两个字的衡量标准是什么？以学历为准会将很大一部分人卡死在起点上，而如果是以能力为标准，以经验和作品为准，既体现了企业海纳百川的胸襟，也会为企业招揽到各色各样的能人志士，试问现在有几家大型互联网公司能意识到学习能力比学历更重要呢… ]]> http://176762908.qzone.qq.com/blog/1243404539#comment 134218256 Wed, 27 May 2009 06:08:59 GMT http://176762908.qzone.qq.com/blog/1243404539 <![CDATA[手机GUI入门指南]]> http://176762908.qzone.qq.com/blog/1240093368 G(raphical) U(ser) I(nterface)

利用某种指示设备对计算机发出指令的一种界面，例如鼠标，键盘，触控等，可以操纵并启动屏幕上的视觉元素。GUI是一种结合计算机科学、美学、心理学、行为学及各商业领域需求分析的人机系统工程，强调人—机—环境三者作为一个系统进行总体设计。这种面向客户的系统工程设计其目的是优化产品的性能，使操作更人性化，减轻使用者的认知负担，使其更适合用户的操作需求，直接提升产品的市场竞争力。

　纵观国际相关产业在图形化用户界面设计方面的发展现状，许多国际知名公司早己意识到GUI在产品方面产生的强大增值功能，以及带动的巨大市场价值，因此在公司内部设立了相关部门专门从事GUI的研究与设计，同业间也成立了若干机构，以互相交流GUI设计理论与经验为目的。随着中国IT产业，移动通讯产业，家电产业的迅猛发展，在产品的人机交互界面设计水平发展上日显滞后，这对于提高产业综合素质，提升与国际同等业者的竞争能力等等方面无疑起了制约的作用。

-----------------------------------------------

GUI 准则
?减少用户的认知负担
?保持界面的一致性
?满足不同目标用户的创意需求
?用户界面友好性
?图标识别平衡性
?图标功能的一致性
?建立界面与用户的互动交流

GUI 应用领域
手机通讯移动产品 \ 电脑操作平台 \ 软件产品 \ PDA产品 \ 数码产品 \ 车载系统产品 \ 智能家电产品游戏产品 \ 产品的在线推广

-----------------------------------------------

对于新接触手机GUI设计的朋友，有空时候多看些手机评测的网站，里面有很多的资源可以供你参考和学习；平时多收集关于GUI设计的图片，有时间就拿出来临摹一下，多多练习；

手机GUI主要内容：
1.待机界面
2.主菜单界面(主菜单icon+主菜单界面)
3.二三级菜单以及应用界面 (延续主菜单的风格)
4.事件动画 (包括一些弹出框动画以及来电短信等)
5.开关机界面

要作好手机GUI不是件容易的事，技术方面要恨下功夫，还要多和程序员交流。

----------------------------------------------

下面简单介绍一下手机GUI设计前需要了解的基础知识：
01手机基本类别

国际上，通常将目前的手机分为三个基本类别：
顶级手机（High-end phones or smarter phones），或称为智能手机，拥有一个多家硬件生产商认可的“开放”的操作系统（Symbian, Palm OS, Microsoft等）。
?单手操作高端手机（single-hand operated）；
?触摸屏手写输入手机（pen-based）；
?键盘输入高端手机(keyboard entry)；
功能手机（Feature phones）
?在核心功能（芯片）的基础上，加入附加功能（芯片）：FM, MP3, 摄像头, 数据存贮卡，数码录音，可视电话，K-JAVA、小额账户银行业务，网络游戏，定位等等等各样的功能。
低端手机(value phone/vanilla voice）
?只具有基本的通话和数据功能（短信），没有MMS，MP3，FM，和弦，Java, Brew，数码相机等功能。随着市场的发展，可以包含彩屏；
?单芯片；
B.根据手机主要功能分类

基本功能
1. 彩屏
2. 和弦铃音
3. 彩信／彩ｅ
4. 中文输入：数字键盘输入；手写输入
5. 中文短信、短信群发
6. 通讯录
7. 通话记录
8. 闹钟
9. 计算器
10. 录音
11. 多方通话
12. 语音识别
13. 来电防火墙
14. IP拨号
15. 电子名片
16. 电话簿快速查询
17. 屏幕背光
18. 键盘背光
19. 键盘按键音
20. 免提接听
21. 来电指示
22. 语音拨号
23. 内置IP
娱乐类
1. FM 收音机
2. MP3播放
3. 数码照相
4. 数码录像
5. 数码录音（类似于录音笔）
6. JAVA
7. 内置小型手持游戏机功能
8. 动画屏保
9. 移动QQ
10. 七彩来电指示
11. 来电大头贴
12. 幻彩墙纸
13. 戒指耳机
14. 可旋转摄像头
15. 一键开功能
16. 星座配对
17. 幸运数字
18. 会跳舞的手机
19. 语音短信
20. 卡拉OK点唱机
21. 超长短信
22. 来电的图片显示
23. 和弦铃声下载、编辑
24. 铃声下载、编辑
25. 图片电话簿
科技工作类
1. 蓝牙
2. 无线局域网
3. 无线下载
4. 红外接口
5. 数据线接口
6. 数据交换(可以将PC和手机上的email、日历和日程安排等个人信息相互传送)
7. 数据交换(可以将PC和手机上的MP3, 图片和铃音等相互传送)
8. 数据存储卡（如SD卡，它可以使你在手机、PC机之间相互存储传输文件）
9. 动态内存
10. BREW
11. PDA
12. Linux操作系统
13. GPRS、WAP
14. UTK增值业务
15. 一键上网
16. 支持三频
17. 手写输入
生活类
1. GPS（全球定位系统）
2. 外屏时钟
3. 自动开、关机
4. 世界时钟
5. 货币换算
6. 阴阳历转换
7. STK服务（证券服务系统）
8. 区号查询
9. 万年历
10. 日程表
11. 记事本
12. 单位换算
13. 周历
14. 来电中文地名显示（固话）
性别类
1. 内置生理时钟、体脂肪、卡路里计算可供女性族群使用
2. 待机的镜面设计
3. 手机饰牌，镶钻设计
学习类
1. 电子词典（四、六级、TOFEL、GRE英语词典）
2. 电子图书
3. 阅读、编辑文档
C.图标格式
1．手机图标支持位图格式分为不透明和透明两种：
不透明：.bmp .jpg .gif (动态和非动态) .mjpg
透明：.ico .png
2．手机图标支持矢量图格式：.svg（Scalable Vector Graphics）
D.图标大小
10x10，14x14，16x16，32x32，64x64，128x128
（手机图标的大小要求不如软件图标那样要求严格，主要因为手机图标的格式较多）
E. 色彩级别
256色(即8位色)
4096色(即12位色)
65536色(即16位色)
262144色(即18位色)
16777216色(即24位色)
F.常见手机显示屏分辨率
96x65
96x96
128x96
128x128
160x128
160x160
176x144
220x176
240x176
320x240
640x480
G.手机界面制作工具

图标与图形类：Photoshop、Illustrator、Imageready、3Dmax、Iconxp、Iconworkshop
开关机动画类：After Effects、Premiere、Flashsh3D、Photoshop ]]> http://176762908.qzone.qq.com/blog/1240093368#comment 134218240 Sat, 18 Apr 2009 22:22:48 GMT http://176762908.qzone.qq.com/blog/1240093368 <![CDATA[ICON设计的7个实用原则]]> http://176762908.qzone.qq.com/blog/1238387530 在从事标志设计之前，有一些基本原则是需要掌握的。如果您想设计的图标更加实用，应该对一些问题有整体考虑，例如：图标的使用者、尺寸、简易性、光影、透视和风格。本篇文章会为您“设计出既统一又优秀的图标”指引方向。1. Approach Icon Design Holistically
1. 整体设计图标
Icons fit within graphic systems. Whether they are designed for desktop applications or websites, an icon is one of many graphic elements that need to work together harmoniously. Carry this logic across icon sets as well. Icons can be appreciated for their esthetic solutions individually, but they don't function alone. Evaluate your icon designs relative to the graphic system you're using them in. Make sure that each icon differs from surrounding icons, while still working together as a whole.
图标需要适合图像系统。无论是在软件还是网页中，每一个图标都是由许多统一的图形元素组成的，而对于一套图标也是同样道理。从审美角度来说，图标可以单独欣赏，但在功能上它们却是一个整体。评估您设计的图标，使它们与所在的图像系统相协调，并确保每一个图标在具有个性的同时，与其他图标能够统一。
In the articleDesigning an iconic language over at Turbo Milk the author Yegor Gilyov states, "If you need to draw several icons, you need to think over images for the whole set of icons before proceeding with illustrating activities." This is one of two major points made in this article on icon design. He goes on to explain how failing to plan how the whole set of icons will work together from the beginning will ensure a huge waste of time, as redesign will be inevitable.
TurboMilk 上的Yegor Gilyov 在他《设计一种标志语言》中说道：“如果需要画一些图标，在绘制前就要构思好整套图标的风格。”这篇文章阐述了图标设计两个关键，这是其中之一。接着他说，如果起初没有定好整套图标的风格，之后不可避免的再设计一定会浪费您许多时间。

2. Consider Your Audience
2. 考虑您的用户
You will have different considerations if you're designing an intranet for a small company, rather than for a product that may be sold internationally. When creating icons cultural considerations are important. Symbols may differ for common elements you may use for your designs.
给一家小公司设计内部网页，会与设计“畅销世界的产品”考虑不同的东西。设计图标时，文化是需要着重考虑的。在不同文化中，就算是常见元素，含义也可能会有所不同。
Turbo Milk has another great article; this one is called 10 Mistakes in Icon Design. In it, they point out some clear examples of where many icon designs go wrong. They discuss national and social characteristics in point seven of the article. "It is always necessary to take into account the conditions in which your icon is going to be used. An important aspect here is national characteristics. Cultural traditions, surroundings and gestures can differ radically from country to country." They go on to give an example of how mailboxes differ greatly between countries. Apple uses the same example in its Human Interface Guidelines.
TurboMilk上还有一篇精彩的文章《图标设计的10种错误》，里边例举了一些图标设计中的常见错误。文章在介绍第7种错误时，谈到了国家和社会特点的影响：“设计的图标在哪使用是需要提前考虑的，其中一个重要方面，就是要符合当地的民族特色。不同国家从文化传统到环境甚至手势，都会有很大区别。”接着文章又例举了“各国独自特色的邮箱”，巧的是Apple在它人性化界面指南中也使用了这个例子。

So, designing an international icon based on one country's rural mailbox design is a bad idea. Really specific example of what not to do. They point out how Apple's Mail icon is more recognizable as stamps have more cultural universality.
以某国农村里的邮箱为蓝本设计的图标，是无法在全球使用的，这是一个典型的反面例子。而像Apple以“邮票”图案象征“邮件”，在各国文化上都很普遍，就更容易被人接受了。

3. Design for the Size the Icon will be Used At
3. 为尺寸量身设计
If you go vector and make your icon in Illustrator, there is an inherent temptation to scale the design, and try to use it at any size. This doesn't work with icons. What looks good at 512px looks like a blurry smear at 16px. Icons should have a base design that is used as a starting point, but each output size needs to have its own optimized design.
如果用Illustrator画矢量图，由于支持任意拉伸，您在尺寸方面可以不受约束。但是在图标设计中这些却是不适用的，一个512像素下精美的图标，缩小到16像素便会变得一片模糊。图标在设计时都有一个初始尺寸，如果输出其他尺寸，之前都要优化一下。
Icon design is not a one design equals scalable solution medium though. This is one reason that Photoshop is just as good a solution as other programs. For designers that make icons in Illustrator they are still going to clean them up in Photoshop, or jump through some hoops to get their icons to look good at small sizes when being output directly from Illustrator. So, don't buy into the myth that icon design is a purely Vector based medium. We are outputting pixels here after all.
图标并不支持任意拉伸。设计师在Illustrator中完成设计后，需要在Photoshop中处理一下，否则在直接输出小尺寸时会出现模糊，这也是为什么Photoshop是一款出色软件的原因之一了。因此，不要误以为只在矢量软件中设计“中等尺寸”的图标就行了，毕竟最后我们输出的都是像素图。
There are also vector tools in Photoshop and masks that you can take advantage of that equal the scalable playing field between the programs. If you're equally versed with Illustrator and Photoshop you may find a workflow that goes well between the two programs. Consider using Smart Objects. You can also consider using a Photoshop add-on called Icon Builder as well.
Photoshop中的矢量工具和遮罩，能实现其他矢量软件具有的缩放功能。如果您同时精通Illustrator和Photoshop，就会发现它们前后配合默契。您还可以考虑使用一些智能化的软件，或者使用Photoshop的插件Icon Builder来设计图标。
The approach taken for small icons and large icon design is immensely different. Firewheel has a good article that covers the scaling subject called Icon Design: Bitmap vs Vector. Also, review this article on Icon Design Sizing over at Mezzoblue. It covers some inherent issues with designing icons for small sizes.
设计大图标和小图标的方法是截然不同的。Firewheel上有一篇出色的文章《图标设计：位图与矢量图》，详细介绍了图形的缩放。而Mezzoblue的《图标设计尺寸》则阐述了设计小图标时会遇到的固有问题。

4. Keep Icons Simple and Iconic
4. 保持图标的简洁和象征性
With operating systems now having icons that scale to large sizes (512px by 512px is gigantic for an icon) the temptation grows to get illustrative with your icon designs. While a level of realism can add interest to an icon design, it should not supersede its ability to function simply and effectively.
如今采用大图标（512*512像素对于一个图标来说就很大了）的操作系统下，大家都想把图标设计得很真实。诚然，某种程度的真实感可以增加图标的趣味性，但不应以“抛弃简洁有效”为前提。
Smashing Magazine has a great summary of the Apple Human Interface guidelines on Icon Design. The section on Realism in Aqua makes some good points about the limitations of realism in icon design and points out when symbolism is necessary. This section discusses the issues at odds between realism and simplicity in icon design.
SmashingMagazine上有一篇很精彩的文章《Apple人性化界面方针在图标设计中的体现》。文中《Aqua图标的真实感》这一章节指出了写实性图标的局限性，并告诉我们什么时候象征性是必需的，同时还探讨了写实性图标和简洁图标的差别。

Try not to overcomplicate icon designs. Be wary of placing too many items into an icon design, or overly illustrating an icon. I'm sure everyone is familiar with the common symbol for RSS icons. View the example below from Smashing Magazine. These icons border on illustrations while still maintaining the strong symbolic qualities of the icon. Overly illustrating and dressing up icons results in lower recognition though, especially at small sizes. So, be careful with putting to much into an icon design.
请不要将图标过度复杂化。注意不要将过多的元素放到一个图标内，也不要过度修饰一个图标。我敢肯定大家都对RSS图标都象征什么很熟悉。看看下面Smashing Magazine 中的一个例子，这些图标偏向写实风格的同时，还保留着明显的象征性。过度的修饰图标反而使它难以识别，尤其是在很小的时候，所以请大家注意不要在一个图标内放入过多元素了。
There are times when the aesthetic interest of the icon may be worth loosing some of its iconic impact; it's always a judgement call, and needs will vary with each design. Compare one of the icon sets below to a simpler RSS icon design, like the one here on PSDTUTS. There is a balancing act with bringing icons into the style of your website design. You want to add interest, and compliment the design, but not loose the iconic impact of the icon.
“为了使图标更具有审美感，有时候可以适当降低象征性”的说法是需要具体分析的，这是因为图标的设计需求各不相同。将下边的一个图标，和PSDTUTS上那种简单的RSS图标对比，就会看到它配合网站做出的一些调整。当您想给图标添加趣味性时，请不要降低它的象征性。
The icons below look really cool. It requires a judgement though as to whether the loss of some of the quick recognition of the symbol is worth the added design around the symbol. At a large size it works just fine, as they function similar to illustrations. At smaller sizes though, a less dressed solution may be preferable.
下边的图标的确很酷，但是这些“使图标失去快速识别功能”的元素是否值得添加，却是值得讨论的。在大尺寸下，它们像插图那样摆着没什么问题，但小尺寸时，较少的修饰会更好些。

5. Cast Consistent Lighting, Reflections, and Shadows
5. 采用一致的灯光、反射和阴影

It's important that the realism you add to your designs all function coherently. If you utilize a light source coming from one direction then stick with it. Or else you risk loosing the integrated design of your icons. Also, consider the light source of the design your icons will be placed in. If the light source of the icons is at odds with the website or application design your using them in then the design will appear amateurish.
您对图标的真实化处理一定要统一。如果您使用了某个方向的光源，其他图标也要使用这个光源，否则就会降低整套图标的统一性。同时也要考虑图标所处的光源，如果它和网站或软件设计风格不协调，则会显得整个设计很业余。
In the Windows Vista User Experience Guide there is a section on icon lighting and shading. The guidebook gives really specific rules for the Vista Icon set. This gives more exacting standards for icon designers and insures a unified icon system. Following is a specific rule to see an example, "Use shadows to lift objects visually from the background, and to make 3D objects appear grounded, rather than awkwardly floating in space." There are many more rules in this guide.
《Windows Vista 用户体验指南》中有一段写的是图标的光影，它给Vista图标下了明确的定义。图标设计师需要遵守严格的设计标准，从而确保了整套图标的统一。从下边的例子，您可以看到其中的一条：“通过阴影使3D图标能够立在起来，而不是傻傻的飘在屏幕上。”指南中还有更多这样的标准。

6. Utilize a Limited Perspective
6. 使用一致的透视角度
The range of perspective within your icon design set should work together. If you have icons being looked at from straight ahead then stick with that. If you place one at a specific angle, then make sure all the icons function that way. Imagine a camera being placed from a specific vantage point and looking at all the objects from the same perspective. This helps to maintain consistency in your icon designs.
整套图标应采用统一的透视角度。有的图标是正视角度，那么其他图标也应如此。如果一个图标具有特殊角度，要将所有图标都统一成这样。想象一下将摄像机摆在一个特殊的位置，透过镜头会看到相同透视的物体。这有助于使您的图标保持一致。
A large scale design system, something like a software operating system, may need more flexibility than that though. Apple covers Icon Perspective in its Human Interface Guidelines. They have a more flexible use of perspective. "The various perspectives are achieved by changing the position of an imaginary camera capturing the icon." The image below shows the difference in perspective between an Application Icon (Top) and a Toolbar Icon (Bottom).
大规模的设计系统，比如软件操作系统，图标设计需要更具灵活性。Apple的《人性化界面指南》涵盖了图标透视问题，他们使用了更灵活的透视方法。“通过改变想象中的摄像机的位置，来获得图标的各种透视角度。”从下图可以看出应用程序图标（上排）和工具栏图标（下排）透视上的区别。

7. Create Consistent Icon Set Styles
7. 建立一致的图标风格
Lighting and Perspective certainly contribute to the style of an icon. Though, there are many other factors that can contribute to the style as well. If you're trying to fit your icon into a grunge style website design, you'll likely be adding texture to the style of the icon's design.
灯光和透视无疑有助于图标风格的建立，同时还有许多其他因素在起作用。如果想使自己设计的图标与“车库摇滚”风格的网页相协调，您需要给它们加入一些纹理。
Icon sets have unique features that make them stand out. In the Echo Icon Guidelines the set is describes as, "Echo is currently a new set of icons proposed for inclusion in Fedora. Designed with a dynamic perspective, Echo icons aim to appear more realistic while still maintaining a clean and simple design by utilizing high contrast and spots of vibrant colors." Another way that this set stands out is through the consistent use of outlines. See the image below for an example.
图标需要独特的造型使自己与众不同。《Echo图标指南》是这样描述的："Echo是当前最新的一套图标，为Fedora操作系统所设计。由于Echo图标在动态空间使用，它需要兼具真实性及简洁性，同时它还有很高的对比度以及鲜明的色彩。这套图标另一个与众不同的地方，就是它使用一致的轮廓线，下图就是一个例子。

Get Started with Icon Design
开始图标设计
Designing icons for websites is a good way to get started with icon design. Often, there are only a few icons needed for a site design. Start simple with a small website design project where you are required to design only a handful of icons, or less. This is a good way to gain some experience with icon design.
为网站设计图标是从事图标设计的一个绝佳起点。通常一个网站只需要一部分图标，给这样的网站设计图标，可以为以后的设计积累一些经验。
Start the icon design process with research. Consider the common symbolic metaphor used to describe the icon your looking to make. Sketch as much as necessary to lock down the concept. Compliment the style of the icon designs with the website design you'll be using them on. Consider the color, perspective, and graphic look of the site.
以做研究的心态开始图标设计。图标中使用通用的象征，尽量的多画草图来掌握这个原理。设计时考虑网站的颜色，透视以及图像等方面，通过网站的视觉设计将图标衬托得更精彩。
Hicks design has a quick SlideShare presentation on Icon Design. One section of the presentation covers his design process. It gives some great visual examples. Below is an example of the sketching step.
Hicks在SlideShare写了一篇《图标设计》，其中一节概述了他的设计流程，文章里有他做的精彩图标，下图是就是在草图阶段中的一部分。

]]> http://176762908.qzone.qq.com/blog/1238387530#comment 134218243 Mon, 30 Mar 2009 04:32:10 GMT http://176762908.qzone.qq.com/blog/1238387530 <![CDATA[什么是UI设计]]> http://176762908.qzone.qq.com/blog/1238119244 UI的本意是用户界面( user interface ) ，概括成一句话就是——人和工具之间的界面,或者称是用户与界面的关系。这个界面实际上是体现在我们生活中的每一个环节的，例如我们切菜的时候刀把手就是这个界面，开车时候方向盘和仪表盘就是这个界面，看电视的时候遥控器和屏幕就是这个界面，用电脑的时候键盘和显示器就是这个界面。潜在需求，为技术创新提供另外一条思路和方法（consumer insight）。所以有：Usability is all about making things easier to use so people can focus more on the work and less on the tools that help them do the work.
于是我们可以把UI可以分成两大类：硬件界面和软件界面。本文所关注的UI设计特指软件界面，我们也可以称为特殊的或者狭义的UI设计。
软件界面设计包括交互设计，用户研究，与界面设计三个部分。
1用户研究。用户研究包含两个方面：一是可用性工程学（usability Engineering），研究如何提高产品的可用性，使得系统的设计更容易被人使用、学习和记忆；二是通过可用性工程学的研究，发掘用户的
用户研究是一个跨学科的专业，涉及可用性工程学、人类功效学、心理学、市场研究学、教育学、设计学等等学科。用户研究技术是站在人文学科的角度来研究产品，站在用户的角度介入到产品的开发和设计中。
用户研究通过对于用户的工作环境、产品的使用习惯等研究，使得在产品开发的前期能够把用户对于产品功能的期望、对设计和外观方面的要求融入到产品的开发过程中去，从而帮助企业完善产品设计或者探索一个新产品概念。
他是得到用户需求和反馈的途径，也是检验界面与交互设计是否合理的重要标准。
2交互设计。这部分指人与机之间的交互工程，在过去交互设计也由程序员来做，其实程序员擅长编码，而不善于与最终用户交互。所以，很多的软件虽然功能比较齐全，但是交互方面设计很粗糙，繁琐难用，学习困难。使用这样的软件后，不是使人聪明与进步而是让人感到愚弄与羞辱。许多人因为不能操作电脑软件而下岗失业，这样的交互使电脑成为让人恐惧的科技怪兽。于是我们把交互设计从程序员的工作中分离出来单独成为一个学科，也就是人机交互设计。他的目的在于加强软件的易用、易学、易理解，使计算机真正成为方便地为人类服务的工具。
3 界面设计。在漫长的软件发展中，界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。
从心理学意义来分，界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性。
用户界面设计在工作流程上分为结构设计、交互设计、视觉设计三个部分。
· 结构设计　Structure Design
结构设计也成概念设计（Conceptual Design），是界面设计的骨架。通过对用户研究和任务分析，制定出产品的整体架构。基于纸质的的低保真原型（Paper Prototype）可提供用户测试并进行完善。在结构设计中，目录体系的逻辑分类和语词定义是用户易于理解和操作的重要前提。如西门子手机的设置闹钟的词条是"重要记事"，让用户很难找到。
· 交互设计 Interactive Design
交互设计的目的是使产品让用户能简单使用。任何产品功能的实现都是通过人和机器的交互来完成的。因此，人的因素应作为设计的核心被体现出来。交互设计的原则如下：
1)　有清楚的错误提示。误操作后，系统提供有针对性的提示。
2) 让用户控制界面。"下一步"、"完成"，面对不同层次提供多种选择，给不同层次的用户提供多种可能性。
3) 允许兼用鼠标和键盘。同一种功能，同时可以用鼠标和键盘。提供多种可能性。
4) 允许工作中断。例如用手机写新短信的时候，收到短信或电话，完成后回来仍能够找到刚才正写的新短信。
5) 使用用户的语言，而非技术的语言。
6) 提供快速反馈。给用户心理上的暗示，避免用户焦急。
7) 方便退出。如手机的退出，是按一个键完全退出，还是一层一层的退出。提供两种可能性。
8）导航功能。随时转移功能，很容易从一个功能跳到另外一个功能。
9）让用户知道自己当前的位置，使其做出下一步行动的决定。
· 视觉设计　Visual Design
在结构设计的基础上，参照目标群体的心智模型和任务达成进行视觉设计。包括色彩、字体、页面等。视觉设计要达到用户愉悦使用的目的。视觉设计的原则如下：
1）界面清晰明了。允许用户定制界面。
2）减少短期记忆的负担。让计算机帮助记忆，例：User Name,、Password、IE进入界面地址可以让机器记住。
3）依赖认知而非记忆。如打印图标的记忆、下拉菜单列表中的选择
4）提供视觉线索。图形符号的视觉的刺激；GUI（图形界面设计）：Where, What, Next Step
5）提供默认（default）、撤销（undo）、恢复（redo）的功能
6）提供界面的快捷方式
7）尽量使用真实世界的比喻。如：电话、打印机的图标设计，尊重用户以往的使用经验。
8）完善视觉的清晰度。条理清晰；图片、文字的布局和隐喻不要让用户去猜。
9）界面的协调一致。如手机界面按钮排放，左键肯定；右键否定；或按内容摆放。
10）同样功能用同样的图形。
11）色彩与内容。整体软件不超过5个色系，尽量少用红色、绿色。近似的颜色表示近似的意思。
注:以上内容参考网络上的各种定义,各种信息的定义归原作者所有,奇遇只是为了UI概念的全面而编辑
]]> http://176762908.qzone.qq.com/blog/1238119244#comment 134218258 Fri, 27 Mar 2009 02:00:44 GMT http://176762908.qzone.qq.com/blog/1238119244 <![CDATA[用户界面浅析--[GUI]图形用户界面]]> http://176762908.qzone.qq.com/blog/1237147078 作者：cuckoo

不知道“算盘”算不算最早的用户界面，用户界面走到今天真是千锤百炼，要做到易用就更是难上加难，目前我想做得是普及用户界面的基本知识，以便更多的设计师接受它、发扬它。我希望用户界面在我们手中可以展现出更多的光彩。

分别有以下几个讨论方向
[GUI]图形用户界面
[WUI]网页用户界面
[HUI]手持设备用户界面
UI在项目中的实现

先从图形用户界面[GUI]开始吧！

图形用户界面有时被称为WIMP，表现了它的四种特有属性，即窗口（Window）、图标（Icon）、菜单(Menu)、鼠标指针(Pointing Device)。它的特点是操作直观、提供指针支持及界面图形化。目前图形户界面虽然不能达到较好的易用性，但是针对特定任务我们精心设计，在效果和满意度上绝对优于非图形界面。

窗口，是交互的基础区域，主要包括标提栏、支持移动和大小缩放、菜单栏、工具栏以及操作区。通常是矩形，但是现在很多软件都把它做成不规则形，例如一些音乐的播放器，看上去会更有活力和个性。

图标，是用于标是一个对象的图形标志，使一个标题或功能可以有更直观的操作。我们制作的图标有很大一部分来源于术语符号，例如最小化、关闭等，初次接触的用户可能并不理解其含义，需要区记忆；另一部分图标则是来源于生活，比较象形的，比如喇叭就是调节音量，房子表示HOME，信封表示邮件等。我们在设计时应尽量避免创造新的符号，尽量使用象形的图形。

菜单，是供用户选择的动作命令。在一个软件中，所有的用户命令都应包含在菜单中。菜单通常要通过窗口来显示，常见类型有工具栏（包括图形工具栏）、下拉式、弹出式（右键菜单）和级联式（多层次的菜单）。

指针，是一个图形，用以对指点设备（鼠标或轨迹球）输入到系统的位置进行可是化描述。图形界面的指针常用的有系统的箭头、十字、文本输入I、等待沙漏等。

由于鼠标的发明为人机交互注入了新的活力，我们一直都在研究更为恰当和易用的交互方法，其中还会包括很多人为的和环境的因素，欢迎大家各抒己见，归纳一些自己在交互设计中的经验或问题易大家分享。

[WUI]网页用户界面

网页用户界面非常类似图形用户界面，它的特点主要体现在导航、链接和信息。

窗口，通常位于浏览器窗口内，拥有个性的浏览及操作方式。

菜单，比较不容易操作，实现起来也需要额外的编程工作，不如链接来的直接明了。

图标，除房子表示首页外几乎没有约定俗成的图标。

指针，手形的指针出现于柯点击的链接，鼠标双击的使用被忽略，右键的行为通常是受限制的。

基于网页的软件拉进了网页用户界和图形用户界面间的距离，常见的有C/S结构，即Client/Server(客户机/服务器)结构和B/S结构，即Browser/Server(浏览器/服务器)结构。

网页用户界面组件，浏览器提供了“前进”“后退”等基本导航功能，但作为独立软件链接、按钮和导航栏是必不可少的，另外别忘了title部分的标题，搜索功能业是相当必要的。

影响基于网页的软件的关键因素是：在复杂的信息结构中导航，使用户方便并快速的找到所需要的结果或方便快速的维护信息。其实也就是易用性因素。

[HUI]手持设备用户界面

手持设备（个人数字助理）用户界面主要分两大类，一种是真正的图形界面风格的外观和行为（现在比较通用，多个应用程序并存），另一种是图形界面子集（在没有窗口的情况下，同时只能显示一个对象，类似手机操作）。

手写笔在某种程度上比鼠标和键盘更好用。

手持设备用户界面的设计难点在于:

1.要求更加简化用户需求，更便于输入和交互操作

2.克服显示区域过小的困难。

3.方便随时查阅机器内的信息，特别是通讯录，记事本等软件的设计更要求良好的易用性。

4.个人电脑和个人数字助理之间信息同步。

UI在项目中的实现

无论是那种类型的用户界面，在半小时内即可让用户掌握主要功能和软件特色的都属于优秀的用户界面，我们在设计时要注意简约、美观、高效和可指定性。

在某种程度上简约和高效是相互作用的，首先对任务要清晰明确，然后把步骤简至最少，多一些单选和多选，少一些填空，最后可以把主要功能做成向导，一步步引导用户完成。

美观就不用多说了，可指定性是不可忽略的一点，一定保证你的软件对用户来讲是可调整的。最初提供的是软件入门级特性，随着用户的使用它会发现很多新的设置，可以满足用户的好奇心和喜爱个性的心理，例如更换皮肤，可以编辑屏保或者给电话簿软件加一个封皮，给每个人加头像等等

补充：

实物操作界面简介(TUI)

定义(TangibleUserInterface)

例如：虚拟现实

直接将人们在现实生活中和物体、环境的交互

动作映射为和信息空间的交互过程的用户界面。

特点:充分利用生活体验，易学习，自然

目标:尽可能的把生活体验用到人机交互中，降低计算机技术的学习门槛，增加交互的自然性。

实物操作界面通过使得数字信息可触摸而达到无缝集成物理世界和信息世界的目的。

三个关键的概念：

交互式表面

信息和物体的链接

环境反馈

]]> http://176762908.qzone.qq.com/blog/1237147078#comment 134218258 Sun, 15 Mar 2009 19:57:58 GMT http://176762908.qzone.qq.com/blog/1237147078 <![CDATA[图标设计规范]]> http://176762908.qzone.qq.com/blog/1236173927 图标样式应该有趣、色彩丰富且充满活力，因为现在的系统支持图标是32位图标，并且边缘非常平滑。在矢量程序中绘制完每个图标后，再用Adobe Photoshop进行处理可使图像更加完美。本规范是专为设计者编写的。在创建图像时，建议您与高水平的图形设计者一起工作，尤其是具有丰富的矢量和3D软件经验的图形设计者。
图标设计概述的目的是让您熟悉WindowsXP的新样式，为创建图标做好准备。
图标样式特性
(1) 色彩丰富，是对WindowsXP外观的补充。
(2) 不同的角度和透视特性为图像增添了动态活力。
(3) 元素的边角十分柔和，并略微有些圆滑。
(4) 光源位于图标的左上角，同时有环绕光照亮图标的其它部分。
(5) 渐变效果使图标具有立体感，进而使图标的外观更加丰满。
(6) 投影使图标更具对比度和立体感。
(7) 添加轮廓可使图像更清晰。
(8) 日常对象(如计算机和设备)具有更现代化的个人外观。
图标尺寸
Windows XP图标有四种尺寸，建议使用以下四种尺寸：
(1) 48×48像素
(2) 32×32像素
(3) 24×24像素
(4) 16×16像素
图标色彩深度支持
WindowsXP支持32位图标。32位图标为24位图像加上8位alpha通道。使图标边缘非常平滑，且与背景相融合。
每个WindowsXP图标应包含以下三种色彩深度，以支持不同的显示器显示设置：
24位图像加上8位alpha通道(32位)
8位图像(256色)，加上1位透明色
4位图像(16色)，加上1位透明色
调色板
图标中使用的主要颜色。
对象的角度和分组
WindowsXP样式图标使用的透视网格：并非所有对象使用16×16的复杂图像都能获得较好效果。某些对象通常以直观图像显示：文档图标、符号图标(如警告或信息图标)、单一对象图标(如放大镜)
除非创建重叠辅助对象可以更清楚地表达图标的含义，否则就可读性和完整性而言，还是应使用直观图像。还应考虑如何按组查看图标，以便确定如何将对象分组。
投影
使用投影后，WindowsXP图标将更清晰且更具立体感。可在Photoshop中实现这种效果，本指南的后面部分将对此进行描述。若要为图像添加投影，请在 Photoshop中双击图像的图层，并选择Drop Shadow。然后将Angle更改为135，Distance更改为 2，Size更改为2。此时投影为75%不透明黑色。
轮廓
绘制XP样式图标时，为图像添加轮廓可使之更清晰，并可保证图像在不同背景色上都具有较好效果。
概念
设计图标时，请考虑以下因素：
使用已有概念以确保真实表达了用户的想法。考虑图标在用户界面环境中以何种形式出现，以及如何作为图标集的一部分使用。考虑图形的文化背景。避免在图标中使用字母、单词、手或脸。必须用图标表示人或用户时，请尽可能使其大众化。如果图标中的图像由多个对象组成，应考虑如何使图像尺寸更小。建议在图标中使用的对象不超过三个。对于 16×16的尺寸大小，还可考虑删除某些对象或简化图像使之更容易辨认。
透明工具
将Gif Movie Gear(GMG)打开一个对话框，其中显示您的图标。使用吸管工具单击图标的背景色。此颜色将更改为暗黄绿色(或在 GMG中选作透明背景色的颜色)。重复所有4位和8位帧。若要保存图标，请选择 File->Save Icon As...。
创建工具栏
Windows工具栏图标除不使用投影之外，使用的样式与其它图标相同。由于工具栏图标非常小，建议您使用简单的图像。如果以直观方式显示图像即可清晰地表达图标的含义，则不必使用其它复杂方式。
创建AVI
WindowsXP使用8位AVI。创建.avi文件的过程与创建图标的过程相同-在Photoshop中准备图像，然后将其拖动到GMG 中。请按以下指导创建8位图标。若要使用GMG保存AVI，请转至File->Export As->AVI file。
创建.avi文件时，请考虑以下因素：使用品红(R255 G0 B255)作为背景透明色。在Photoshop中，重要的一点是不要出现杂散像素。请将填充能力设置为0，并确认未选中取消锯齿. ]]> http://176762908.qzone.qq.com/blog/1236173927#comment 134218242 Wed, 04 Mar 2009 13:38:47 GMT http://176762908.qzone.qq.com/blog/1236173927 <![CDATA[手机界面设计]]> http://176762908.qzone.qq.com/blog/1236173472 1. 蓝牙
2. 无线局域网
3. 无线下载
4. 红外接口
5. 数据线接口
6. 数据交换(可以将PC和手机上的email、日历和日程安排等个人信息相互传送)
7. 数据交换(可以将PC和手机上的MP3, 图片和铃音等相互传送)
8. 数据存储卡（如SD卡，它可以使你在手机、PC机之间相互存储传输文件）
9. 动态内存
10. BREW
11. PDA
12. Linux操作系统
13. GPRS、WAP
14. UTK增值业务
15. 一键上网
16. 支持三频
17. 手写输入
生活类
1. GPS（全球定位系统）
2. 外屏时钟
3. 自动开、关机
4. 世界时钟
5. 货币换算
6. 阴阳历转换
7. STK服务（证券服务系统）
8. 区号查询
9. 万年历
10. 日程表
11. 记事本
12. 单位换算
13. 周历
14. 来电中文地名显示（固话）
性别类
1. 内置生理时钟、体脂肪、卡路里计算可供女性族群使用
2. 待机的镜面设计
3. 手机饰牌，镶钻设计
学习类
1. 电子词典（四、六级、TOFEL、GRE英语词典）
2. 电子图书
3. 阅读、编辑文档

C. 图标格式：
1．手机图标支持位图格式分为不透明和透明两种：
不透明：*.bmp *.jpg *.gif(动态和非动态) *.mjpg
透明：*.ico *.png
2．手机图标支持矢量图格式：*.svg（Scalable Vector Graphics）
D. 图标大小：
10x10，14x14，16x16，32x32，64x64，128x128
（手机图标的大小要求不如软件图标那样要求严格，主要因为手机图标的格式较多）
E. 色彩级别
256色(即8位色)
4096色(即12位色)
65536色(即16位色)
262144色(即18位色)
16777216色(即24位色)
]]> http://176762908.qzone.qq.com/blog/1236173472#comment 134218242 Wed, 04 Mar 2009 13:31:12 GMT http://176762908.qzone.qq.com/blog/1236173472 <![CDATA[因本人最近手头紧，特此将本人爱车忍痛出售]]> http://176762908.qzone.qq.com/blog/1235794524 因本人最近手头紧，特此将本人爱车忍痛出售，请各位朋友谨慎出价。。现附照片：

全景天窗,百公里油耗为0,无极变速,正时链条,真皮座椅,转弯半径小,通过能力强,改装潜力极大,适合城市郊区和山地各种道路，无重特大事故发生过，可过户，正牌正户，过户费自理 "前脸造型也是采用古典设计，保证了整车风格的统一，其中车篮状钢丝网状气囊是首次运用于该品牌的车。”

“开车自然要安全第一，现在看看该车的最强安全设备——车篮气囊，此气囊永远呈打开状，就少了能不能在事故中及时打开的问题，最大限度的节省了空间，而且一篮多用，还能装装东西放放菜，超大的容积可装下一台N寸的电脑显示器。”

“采用铅丝扎结，适合普通大众手动安装”

特别设计的方向控制系统，呈八字分开状，可以使驾驶者手臂充分展开，胸腔打开，利于呼吸，从而改善动力供应

“特制的全天候扁平无气胎，适合各种恶劣路况，少去了补胎、保养的麻烦”

“又一项十分必须的改装，将三角档改为女式档，从而避免从坐位上高速跌落而造成的小鸡鸡挤伤事故

“做工精致的动力传递系统，虽然采用传统的链条传动，但只要踩下去，绝对能动”

“尾部车架经过压低改装，在高速行驶时可以减少风阻”

符合人体工程学的座位，特制的灰尘可以吸收屁股在剧烈运动时流出的汗液，防止滑落，使您尽情享受驾驶的乐趣……”

“制动灵敏的双刹车片刹车系统，高速行驶也无后顾之忧，一刹到底决不含糊。而略带锈迹的挡泥板，更添本车的复古风格，充分显示出车主卓尔不凡的品味。

改装过的刹车信号传递线路，保证反应时间不超过3秒

贵族血统，系出名门，令您身份倍增........

鉴于有人抢我生意

！本人也豁出去了！

特免费赠送丁字形名牌内裤一条！功能能够在行车过程中保护你的小JJ！并且让你的

小JJ在内裤里茁长成长！

]]> http://176762908.qzone.qq.com/blog/1235794524#comment 134218323 Sat, 28 Feb 2009 04:15:24 GMT http://176762908.qzone.qq.com/blog/1235794524 <![CDATA[质感按钮小教程]]> http://176762908.qzone.qq.com/blog/1235219590

]]> http://176762908.qzone.qq.com/blog/1235219590#comment 134218259 Sat, 21 Feb 2009 12:33:10 GMT http://176762908.qzone.qq.com/blog/1235219590