Posts Tagged ‘设计’

O my god, F my life

Monday, August 24th, 2009

在 WordCamp China 2009 的照片中,看到 thruth 所穿的 T恤,不知是谁的设计,将 Opera 标志的 O 字与“Oh my god”结合起来。

WordCamp China 2009/thruth's Tee (by iChada)

那么同样的创意可不可以也用在 Firefox 上面呢?我想到了一个很红的网站:FMyLife(即 Fuck My Life,收集和分享生活中的糟糕经历,说些不开心的事情让大家开心),于是试着设计了两件 Firefox T恤:

Photobucket

Photobucket

英文版和中文版的文字不一样,因为中文版有典故的这句话翻译成英文就不好玩了。

大图:
Photobucket

Photobucket

糟糕的图标

Tuesday, October 14th, 2008

据说看一个人的领子和袖口是否整洁干净,就能看出他的素养,如果这两个地方拾掇不好,会影响他人的第一印象,这或许就是“领袖”一词的来历?

对一个程序来说,对应于领子和袖口的应该算是图标了。一款简洁明晰、赏心悦目的图标,能够大大提升用户的好感度,比如不少 WinRAR 用户就因为7-Zip 的图标朴素过头而不想使用——虽然我觉得既然能够欣然接受界面那么土的 WinRAR,就没资格说这句话…

正所谓人生不如意者十之八九,总会有一些不那么简洁或明晰或美观的图标来告诉我们人生不是想象中的那么美好,下面试列举一二:

不够简洁的图标:

WinDVD
WinDVD
作为一个 DVD 播放软件,用光盘的形象就能够大致说明自己的身份了,顶多再增加几个字母以便和其他播放工具区别开来。但是 WinDVD 偏不,它的光盘图案一定要45度仰望天空,背景还奢侈地空出四成,下面码着一排貌似是电影胶片的东西。如果缩小成16×16的图标,这和涂鸦有什么区别?

Foxit Reader Uninstaller
Foxit PDF Uninstall
一般的卸载程序,其图标一般都是有醒目的红叉、禁止符号或废纸篓形象,反正卸载程序通常就使用一次,不需要做得多么有个性(也可以顺便不给胆敢卸载的用户好脸色)。
Foxit 的这个卸载程序倒是使用了大红叉,但,后面那一片灰中带白的不规则物体是什么?

好吧,我终于悟到了!那个东西原来是 Foxit Reader 图标去掉边框去色之后的形象,可为什么 Foxit 不像 Total Commander 一样,卸载程序的图标就是原图标直接加一把红叉呢?

自然码
ZRM
自然码作为老牌的拼音输入法,其程序的界面和网站的主页都还是上个世纪的风格,从这个图标的设计也可以窥见一斑。
一个小小的图标上,硬是挤进去了3个对象,握笔的手、2个“汉字”和3个“ZRM”的英文字母。
这三者不但各据一方,不利用重叠来争取空间,而且2个汉字还采用了不适合的字体,缩小了看如同风干的发菜,英文字母更加上了阴影效果,于是整个图标看上去就变得极为不自然了。

不够明晰的图标:

有一个未解之谜始终萦绕在我的心头,折磨着我那颗好奇的心,那就是局域网通信工具 IPMSG 的图标:
IPMSG
究竟是什么意思啊!

猜想之一:是一个扭曲的 X 在对着一个黄色的小球翩翩起舞吗?难道作者暗示局域网通信的用户都心态扭曲且热衷于黄色内容?
猜想之二:这是在对我国上古时代著名非主流异议人士夸父的一次惊世骇俗的行为艺术的致敬?看啊,那悬在天空的炽热的太阳,那脚下干旱灰暗的大地,和因为没有脑袋所以不辨方向且无法停止身体不断奔跑的夸父…
猜想之三:罗素在《西方哲学史》中提到,休谟曾经如此形容卢梭:“他好像这样一个人,这人不仅被剥掉了衣服,而且被剥掉了其肤,在这情况下被赶出去和猛烈的狂风暴雨进行搏斗。”哦,这是一枚多么血腥暴力的图标啊~
猜想之四:安迪同学挣扎着爬出了下水道,迎接他的是肖申克监狱的小太阳探照灯,一颗步枪子弹爆掉了他的头…哦,又一个提醒我们人生是一出悲剧的故事。

补充:感谢麦可的提醒:

根据IP Messenger作者白水啓章的描述,IPMSG的这个图标是他根据电影「Star Trek: Generations」中「Dr.Soran」等待「Nexus」的这个画面制作而成的。但是当图标设计出来之后,自己也弄不太明白它到底是什么了。
参考链接

看来原图就是这个了:
Nexus

仅次于 IMPSG 的谜语的,是 Foxit Reader 汉化版老版本的图标:
Foxit PDF Reader
那4个方格子里面的绿色絮状物体究竟是什么啊?
答案可能是(可能!我到现在还不能完全确定)在玻璃窗户中看到的绿色针叶林…

好吧,这和一款 PDF 阅读工具有什么关系呢?难道 PDF 的全称应该是 Pine in Deep Forest?救命~

不够赏心悦目的图标:

简单的说,如果你想让大部分的用户觉得不舒服,最好的办法就是把图标和爬行/两栖动物的形象联系起来。
比如由于大部分天生不害怕蛇的人类祖先在远古时代的树林里面都被咬死了咬死了咬死了,所以相当一部分的人对蛇有天生的恐惧感(但奇怪的是,蜘蛛和毛虫应该是祖先们的美餐才对,为何还有那么多人畏惧呢?难道饮食的品味也可以是自然选择的动力?);比如说我们通常会形容长相丑陋的男女为青蛙和恐龙,童话里面设置了很高的门槛要美女们鼓起勇气去亲吻的也是一只青蛙,而不是整天卖萌的 Hello Kitty。
对爬行动物的天然抵触也许来自于白垩纪大资产阶级大地主恐龙灭绝之前哺乳动物们普遍形成的心理阴影,而对两栖类动物的反感可能纯粹是因为它们有变态期…

让我们来看看在这方面勇敢而无畏的程序吧,例如 Notepad++ 的老版本图标是一只彩色的避役:
NPP
好在作者回头是岸,新版本中终于把长舌妇请走了。

而 K-Meleon 则是死性不改,一如既往的使用绿色的蜥蜴/蝾螈头像图标:
K-Meleon

图标的设计者应该注意,远离低等脊椎动物不表示万事大吉,即使你选择人类的好朋友作为图标形象,也可能把事情搞砸。
比如备受批评的 Irfanview,它的图标是一只四仰八叉装可怜的红色小狗:
Irfanview
图标放大了倒还可以让人接受,问题是如果把 Irfanview 当作默认看图软件而你又选择了小图标模式浏览时,占领你眼帘的将是整屏幕的红叉——在小图标那个级别的时候谁还能领略到天皇巨狗的风范?

还有一个需要提到的就是 Crimson Editor 的图标:
Crimson
尽管狗也可以用来卖萌,但这粗糙的灰狗头像实在和软件的强大功能匹配不上,更重要的是,软件名称中的 Crimson(深红)和灰狗到底有什么暧昧关系啊?!完全不能理解啊啊啊啊啊啊~

最后,《Don’t Make Me Think》的作者说,他的书甚少直接批评那些明显糟糕的设计,因为要设计制造出优秀的产品并不容易。这样的境界多么让人汗颜啊,但是如果真是这样,人生会少了多少乐趣啊~

标签页的细节

Monday, October 6th, 2008

发现一个奇怪的现象:使用 Foxit PDF Reader 时,经常误操作把一批文档全部都关掉,而使用其他软件的时候,例如 Firefox、WPS,却很少出现这种乌龙,这是为什么呢?

于是我看了一下这几个软件的标签栏:

Foxit PDF Reader 的标签栏:
Photobucket

WPS 表格的标签栏:
Photobucket

可以发现存在这样的区别:
当前标签页的标题是否加粗;
当前标签的背景颜色是否与众不同,如加亮、变色;
标签页是否有醒目的图标。

如果标签页缺少存在感,自然容易在执行关闭操作的时候被无视。记得在《Don’t Make Me Think》中有以 Amazon 为例专门阐述标签页设计的章节,如果你开发的软件或者网页有标签页/标签栏的设计,建议要读一读。

人品界面的糟糕典范

Tuesday, July 1st, 2008

在今天早上的一次乌龙事件之后,我终于对手头的这个山寨机忍无可忍了!之前说过要揭批它可耻的人品界面,那么今天就是最好的时候!这回把上次提到的问题一起列出来,让大家好好看看人品设计可以糟糕到什么程度:

1、如果用户写完短信准备保存草稿或发送的时候,发现短信空间已经用完了,作为一个负责任的手机应该怎么处理?是不是应该提示:是否删除最老的信息腾出空间呢?没有,它只会提示一句:空间已满,然后等待你对一个悲剧按下“确认”按钮,然后你就会发现之前所写的草稿就从这个世界消失了;

2、电话簿没有快速定位功能!要么你就老老实实的一路翻下去,要么效率很低的输入汉字进行查找。这一招的目的是让用户对不够大的电话簿空间感到庆幸而不是抱怨吗?好吧,你赢了!

3、无法更改默认输入法,也无法记忆上一次选用的输入法,即使是在同一个屏幕中,切换到下一个输入框,输入法也会自动跳回到默认状态。如果你是一个手机上的笔画输入法爱好者,维护电话簿绝对会让你对人生失去信心;

4、浏览电话簿的时候,人名下方会自动出现对应的默认号码,但是在浏览通话记录的时候,为什么没有这个功能?要想看联系人的号码,必须点击两次看详细信息;

5、通话记录中的图标让人迷茫。呼入和呼出的图标差别只在于箭头的方向,但好死不死呼入通话图标的箭头是指向联系人名字的,呼出通话的图标箭头则相反。

6、在短信编辑界面要发送短信应该按哪个键?左键是调出选项菜单,但其中没有发送操作的选项,右键是清除,正确答案是呼叫键。是的,很多手机都是用呼叫键直接发送短信,但在选项菜单中就不能增加一个让菜鸟用户明白的项目吗?

7、玩游戏的时候,按下右键是返回上级菜单。可是它既不会询问你是否真的要退出,也不会为你保留游戏状态,直接就中断了,返回之后一切归零,成功的营造出了一种恍然如隔世的感觉。退出游戏不能保存上次游戏状态倒也罢了,为什么没有任何确认提示就退出?覆水难收的教训我在现实生活中已经学到太多,不需要俄罗斯方块来教我好不好?

8、可以建立联系人群组,但只能够在群组管理界面向指定的群组群发短信。而在短信编辑界面,你能够做的只有向单个联系人发短信,顶多一个个添加联系人。
这样做到也不是没有好处:一、你可以趁此机会重温一下那些在电话簿中沉睡万年的曾经熟悉的名字,从而让你们之间的友谊之光重新发出璀璨的光芒;二,很快你就会厌倦这样的群发短信操作,于是在肉价与油价齐飞的今天,你又可以节省一点支出了;唯一的坏处是确实会产生在现实中把联系人统统都干掉以便精简操作的念头;

9、日期时间设置为什么会在个性化设置菜单里面啊?!难道使用火星或火奴鲁鲁时间会显得我很有个性?而且这款山寨机连电容都吝啬,每次更换电池和 SIM 卡――甚至只是把背壳取下来――都要重新设置日期时间;

10、快速符号表中,初始位置的符号是空格,距离初始位置最近的8个符号是:\@&#(|^`
而输入“,”要移动4次,“.”要6次。这个世界真是太悲哀了;

11、号码簿选项菜单支持数字快捷键,如调出选项菜单后点击6可以开始查找,但是输入要寻找的文字后,既不是按确定键也不是按拨号键开始查找,而是必须按左软键调出又一个选项菜单。而这个菜单只有两个选项:
1、输入法;
2、确定(开始查找)。
在输入要查找文字的界面上有切换输入法快捷键的情况下,有多少用户会调出菜单切换输入法?
又为什么要把几乎每个用户都会按到的“确定”选项放在第二的位置?而且这一次连数字快捷键也不提供了?
我要确认开始搜索还需要按3个按键,设计者是不是觉得有的按键的质量和使用寿命超出了预期?

12、如果将联系人信息复制到 SIM 卡,那么在号码簿中手机和卡上的联系人都可以看到,但如果拔出卡并清空手机上的号码簿,再插回卡的时候,便看不到卡上的联系人信息了。这个时候你只能选择将卡上的联系人复制到手机号码簿――对,你是看不到卡中的信息,但它就是可以看得到,而且就是不让你看到;

13、“使用‘确定’键加亮空格,使用0键标记该空格。”
这是手机上扫雷游戏的说明文字。我想问的只有一句:设计者知道“确定”键和“0”键距离有多远吗?

14、你相信吗?设定每日闹钟时,你能够选择的只有闹铃的时间和铃音,而且只有一组闹铃。
懒人模式重复响铃?你够本找不到开关在哪里!更不用说调整间隔时间和响铃次数了。
于是早上的时候每隔一分钟(!)我就被闹铃骚扰一次,而且至今不知如果不手动终止,它会响铃到什么时候…
除了右键用于暂停之外,按下其他键都会导致退出懒人模式。也就是说如果你在迷迷糊糊中没有正确的按中那唯一的按键,就等着睡过头吧。

15、增值服务中有腾讯 QQ 之类的子项目,如缘分交友、快捷菜单等等,但是无任何说明,恕我鲁钝,我无法光从名字就理解其全部服务的深刻内涵。
尝试着点击,出来的信息只有“提交成功!”
可但是,但可是,
提交了什么?
提交给谁了?
提交了又怎样?
为什么要提交?
这项服务究竟是什么东西?
没有人回答你。
除了几分钟后发过来的一条要你确认交钱的短信…
根本就是在对你的理解能力进行嘲笑之后最终来一个附加伤害;

16、数据线的一头是不规范的专用接口,另一头虽然是标准 USB 口,但不能被电脑识别,只能和专用插头连起来充电,可是这个唯一的功能是用来充电的 USB 口有时候会松脱,导致充电失败——也就是说,它成功的使用户以为可以导入导出数据,却连基本的本职工作都会搞砸…我觉得手机的设计者如此设计纯粹就是为了丧心病狂的报复 USB 标准提出者的;

17、如果你的联系人是全部存放在 SIM 卡上的,那么你将永远也看不到群组操作的选项。嘿,杰克,这真是太神奇了!
没有人在你找不到群组设置方法的时候给个提示,毕竟旁人不可能一直帮助你;
也没有人告诉你为什么,毕竟宇宙的终极奥秘始终都需要你自己去探索。

18、在号码簿中新增号码之后会直接返回最上级主界面,要想录入之后马上打电话?听刘欢高唱一曲“从头再来”吧。

注册登录界面的八大错误

Saturday, January 5th, 2008

Cisco 在网页上向用户销售带有其标志的小玩意,但用户要看到打上标志的效果图,必须先注册,而注册流程共有4个页面、45个问题,其中询问职业1次、职位2次、语言3次,还全是英文界面。
Jared M. Spool 以此为例提到了注册和登录界面中的一些糟糕设计,主要存在以下8个常见错误

错误1:万事以登录为先
用户不喜欢被与直接目的无关的活动打断,如果发起操作与呈现内容不和用户的身份挂钩,就不要强制用户注册和登录。简言之即,如无必要,毋须登录。

错误2:太早要求登录
如果登录之后,用户并未得到及时的足够的激励,觉得和不登录没多大区别,就会觉得登录操作本身没什么价值,久而久之就会反感。不如首先让用户进行活动,等到他觉得值得登录完成操作,再适时地跳出登录界面(之前的操作可以由小甜饼记录)。简言之即,如无必要,推迟登录。

错误3:要求注册却不提好处
面对注册的要求,用户不得不打断思路,想一个用户名和密码,还得担心自己的电子邮箱地址和其他个人信息给泄漏到互联网黑暗的深处,而这一切和自己正在浏览的内容、想要获得的东西没什么关系,如果不告诉他们好处引诱其上钩就冷冰冰地要求注册,会给他们脆弱的心灵带来巨大打击的。简言之即,注册登录,先谈好处。

错误4:不起眼的登录按钮
有明显的注册按钮,登录链接却毫不起眼,用户会掉大把头发的,和举办了盛大婚礼却在蜜月玩失踪一样恶劣。简言之即,门户大开,再要我来。

错误5:看不到注册新账号或找回密码的渠道
在反面例子中,设计者是把这些链接放在了下拉菜单中,看上去不像是链接,用户很难找到,也不易理解。简言之即,左转右转,都要显眼。

错误6:关键的地方不提供登录界面
在一系列的操作中,当用户急需用到与账号关联的信息时,界面上却不能够方便的登录,无疑是一种与排长龙的银行不提供公共厕所相当的卑鄙行为,或者是和神木林的猴子拦住问你要一支很久很久以前就已经丢掉的香蕉(我不在受害人之列)相提并论的抓狂设置,用户不得不回退或新开窗口,无疑又是对流畅体验的影响和对积极性的挫伤。简言之即,关键时候,不离左右。

错误7:注册时需要填写的信息太多
用户注册不是上户口写档案向组织交代情况,填那么多大家都不感兴趣八辈子用不到的信息干什么?用户总是希望注册时提的问题越少越好。简言之即,如无必要,勿增问题。

错误8:不告诉用户怎么使用他们的信息
如果非要询问用户名、密码之外的信息,特别是真实姓名、住址、电话号码等重要信息,要么把问题设计得风趣可爱一点(有时并不起作用),要么明确告诉用户这些信息的用处,而且要有说服力,最好马上给他们看到实实在在的好处。简言之即,欲先取之,必先语之。

因为时间有限,又是部分翻译加自己胡诌,所以具体的正反两面例子就不多说了,请大家脑内自行补完。 :023:




Buy Cialis Online Cheap viagra online Discount viagra Generic viagra Buying Cialis Buy Valium Buy Meridia Buy Xanax Buy Vicodin Buy Propecia