Shark UI » 杂谈设计

我来做淘宝商城的首页设计

Shark — Wed, 05 May 2010 12:28:34 +0000

今天淘宝首页的导航又改版了，和上一次淘宝商城改版一样，微博上的朋友七嘴八舌给了不少意见，粗粗看来大多是负面的意见。我一向认为负面意见大家都会提，重要的是能提出有建设性的意见。刚好现在已经离开淘宝，反倒可以公开地说说我的意见，对错都请大家多指教了。

这两次改版，从交互上来说没有大的问题。大首页中规中矩，横向Tab为主导航、左侧纵向Tab为辅导航（非二级导航，如为二级，最好还是横的），把淘宝目前的“主业”、“辅业”说得非常清楚了。

商城首页交互更有“出彩”的地方，就是左上角的“所有商品分类”。这个交互在搜索结果页面可以体现出它的优势来，算是一个很好的借鉴（应该来自amazon )。

但是，从视觉设计上来讲，两个页面都有一些问题。特别是大首页的视觉设计，可以算得上是重大失误。

(...)
Read the rest of 我来做淘宝商城的首页设计 (31 words)

Feed enhanced by Better Feed from Ozh

三个大饼

Shark — Fri, 27 Nov 2009 13:18:29 +0000

记得07年给UED做培训的时候，讲过“三个大饼”的理论。
简单说来，也就是两句话：

1. 设计 = 解决问题

2. 好的设计 = 用户、技术、商业的交集（所谓的三个大饼）

今天在看HarryPotter时，考虑到为什么电影叫“创作”而网站叫“设计”？有点奇怪吧，其实它们都是为了取悦用户（观众），获得收益（票房）。

所以电影也应该是被设计出来的，要考虑观众（口味、喜好）、技术（3D、摄影、后期等）和商业（什么题材好卖、走什么渠道卖等等）。一部成功的电影，从一开始就应该是针对这三方面的交集来设计的。

书也是如此。也许这就是为什么这么久了，中国还没有特别成功的电影和文学，因为他们都认为这是一种创作，但事实上它们是要被设计出来的。

放大一点讲，这三个大饼其实是 —-

1. 人性。（用户的喜好、习惯）

2. 社会性。（商业是社会性的重要体现之一，还有政治、军事等。）

3. 自然性。（技术的基础就是自然、世界、宇宙、上帝，what ever…）

能在这三个层面找到交集，当然是非常不容易的一件事。

而前提是，我们在自己的心智中，对人性、对社会、对世界，都建立了比较准确的模型。

至于建立的办法，各有妙招了。可以看书、可以旅行、可以恋爱……各显神通吧。

Feed enhanced by Better Feed from Ozh

“恐怖谷”理论与在线销售

Shark — Thu, 15 Jan 2009 06:15:46 +0000

在最近一期《环球科学》上看到了恐怖谷（Canny Vally）理论，它描述了一个很有趣的现像，让我不禁联想到在线销售对商品——特别是服饰——展示方面的应用。

该理论的简单说法就是：如果一个机器人，造得越像人（只要还不是完全相同），就越不惹人爱，甚至会让人觉得恐怖。反倒是那些不太像人的机器人，比如毛绒玩具，非常惹人爱。

把这个情况画成到一张二维正交图上的时候，就形成了一个深深的波谷，也就是所谓的“恐怖谷”。

上图来源：http://zh.wikipedia.org/w/index.php?title=恐怖谷理论&variant=zh-cn

我们从日常生活的经验中，也能得出类似的结果。看下面这些图，请自我感觉一下：

最后这个人形机器人，不动还好，要是一动起来，那就恐怖得紧。如果在我家放一个，我肯定每次开门都被吓个半死……-_-

大家可能还记得八九十年代，百货公司里的那种塑料模特，是不是挺慌的。还不如现在常用的那些有些夸张的模特，比如没脸的，半个头的。听上去更恐怖，但视觉观感上，真的比那些更像人的要好多了。至少我知道它不是人。

而服饰在线销售一直都在向着“在线试穿”努力，但从这个理论看起来，只要技术上没有重大突破，只要我们越努力，就陷入谷中越深。

所以，比较现实可行的方式，就是站在谷两边。要不用不太像人的模特（或者压根儿不用人），或者直接用真人模特儿。

无论上述理论是否成立，但有一条一定成立，那就是——

美女谁不爱呢？

所以，最最保险的，就是用真人模特儿啦。哈哈

最后再给三张淘宝上找的图片作比较：

Feed enhanced by Better Feed from Ozh

看图说话

Shark — Mon, 18 Aug 2008 01:51:34 +0000

事实证明，用户界面和文学艺术一样，随时可能被文化和政治的“需求”XX。

Feed enhanced by Better Feed from Ozh

关于设计品质保证（DQA）的几点想法

Shark — Fri, 16 Nov 2007 08:20:25 +0000

出差到了中国雅虎，这里的风格和淘宝很不一样。和雅虎一比，淘宝的办公环境就是个菜市场，闹哄哄，到处是人，在走道里狂奔乱窜，在每个会议室争得面红耳赤……

感觉确实不一样，这里很技术，很工程师风格。在这种安静的环境下，刚好给我一些时间记录下最近一直在思考的问题：DQA（Design Quality Assurance）。

如果现在搜索DQA，是可以搜出不少的，但似乎只局限在传统制造行业。比如这家台湾的硬件制造公司介绍了他们的DQA：

DQA - Design Quality Assurance starts at the conceptual stage of a project and covers the product development stage to ensure quality is designed-in by quality engineers for reliability. All AAEON products must pass safety and environmental testing by a laboratory to ensure the product meets the requirements of CE/UL/FCC/CCC standards. Moreover, it also is required to go through an extensive and comprehensive test plan for compatibility, function, performance and usability.

注意几个关键词：test、requirement、standard、compatibility、function、performance、usability。

仅从这家公司看的话，他们主要是用测试的手段，根据需求与标准，来评价产品的兼容性、功能、性能与可用性。

看上去似乎可以直接延用至保证Web产品设计品质的活动中，那事实是否如此呢？让我们来作个简单的分析。

(...)
Read the rest of 关于设计品质保证（DQA）的几点想法 (41 words)

Feed enhanced by Better Feed from Ozh

Mashup！让搜索引擎显示缩略图

Shark — Thu, 25 Oct 2007 14:44:25 +0000

刚好青云讲了些“007功能”，好像还挺有争议。有争议是好事，有争议才说明这些想法既不是人人皆知的常识，也不是明显没有价值的谬论，而是一个值得讨论、值得让我们换个角度看一些常见问题的机会。

文中也提到了搜索引擎，我个人倒不是很关注它们的首页怎么设计，我挺看中结果页面的设计和创新。之前我们中国雅虎的同事搞了个非常有新意的一搜。它的创新除了亲切的手绘风格外，最重要的就是所谓的“Mashup”。我认为这是目前互联网技术发展中最重要的两个趋势之一（另一个就是类似facebook的平台化），通过一些简单（但强大）的技术手段，把各种信息资源智能地整合起来展示。到后来中国雅虎又推出了全能搜索，它融合了网页搜索、音乐搜索、图片搜索、人际关系搜索等等，算是一个Mashup的成功案例。

(...)
Read the rest of Mashup！让搜索引擎显示缩略图 (25 words)

© Shark for Shark UI, 2007. | Permalink | 6 comments | Add to del.icio.us
Post tags: firefox, GreaseMonkey, JavaScript, Mashup

Feed enhanced by Better Feed from Ozh

小谈分辨率

Shark — Wed, 10 Oct 2007 02:18:28 +0000

去年淘宝做了个“胖子”项目，就是把网页的默认宽度从780提升到了950。也就是说，基本放弃了800×600的用户（没有完全放弃，如果你仔细研究一下淘宝的布局，我们还是为800用户做了些优化的）。后来又有很多网站变胖了，当然他们不是跟着淘宝做的，而是显示器市场上，大分辨率显示器占有率持续上升迫使大家做了改变。

说“迫使”也许有点过了，我相信大多数设计师在做“胖子”项目的时候，都是非常哈屁的：“爽！终于不用管800了！”至少我是这样的。从97年开始做网页，一直在640和800、640/800和1024、800和1024之间不断地痛苦决择。能够在一个单一稳定地环境下做设计是一种真心的期望，除了伟大的浏览器们，分辨率是另一个让无数设计师头痛的设计约束。

不过这种期望注定是一种奢望，看看下面的“甜甜圈”吧（来自于ued.taobao.com 2007年10月9日的数据）。

着实有一种“五代十国”、“群雄逐鹿”之感。1280及以上分辨率正在迅速上升，而且由于液晶面板和CRT显像管在工艺和成本控制上的差别，以及宽屏的流行，液晶显示器呈现出“分辨率混乱”的情况。可以预见几年之内，Web设计师将要面对的怎样的复杂局面（说到这里，又让我不由地再次想到伟大的浏览器们）。

除去PC，手机等移动平台在3G的催动之下，也一定会慢慢扩大它们的领地。虽然对大多数设计师来说，这还是件比较遥远的事情，但是早晚有一天，每个单子的需求上都会写着“（包括适用于移动设备的Mini Site）”。手机上的情况就更复杂了，目前几大智能手机系列，都有着各不相同的分辨率，我大致地把它们整理如下：

真实的情况要比上面复杂得多，我只是挑了一些比较典型的系统和机型。总而言之，言而总之，以后的日子更不好过了（我又一次又一次地想到，伟大的浏览器们，特别是伟大的手机浏览器们）。

噢，别忘了，还有IPTV，如果三网合一搞起来了。咱还得考虑电视机，那可是一个从640×480到1920×1080，让人无比敬畏的市场呀！：）

© Shark for Shark UI, 2007. | Permalink | One comment | Add to del.icio.us
Post tags: iptv, layout, mobile, resolution, 杂谈设计

Feed enhanced by Better Feed from Ozh

在杭州WUD上的演讲

Shark — Mon, 04 Dec 2006 09:47:00 +0000

2006年11月14日在第五大道咖啡厅（刚好在淘宝楼下）举办了WUD(World Usability Day/世界可用性日）的杭州站活动，受举办方UPA的邀请，又厚着脸皮上去做了个演讲。不巧的是那几天公司的事扎成堆，连续几天都加班到很晚，实在没有时间好好地准备一个PPT。

开始之前把提纲拿出来和蓝色理想的朋友简单地交流了一下，她当即就提出一些问题，认为初涉这个行业的朋友可能会有理解偏差。演讲时我临时改掉了一些比较“激进”的说法，但是下来之后还是觉得不放心，生怕听的朋友没有理解我说的意思或是误解成其他意思。幸好青云花了不少时间帮我把那天的演讲重新整理了一遍（非常感谢！），今日看到UPA的Blog上已经刊出，那在这边也放一次，希望能“抛砖引玉”引出一些有意思的讨论。

———————

现在无论是做软件还是做网站的从业人员，在设计的时候都会经常的提起“用户体验”、“可用性”等等的概念，而且在设计的时候也越来越重视其产品的可用性。
UI,UE,UX,Usability,Accessability,交互设计,视觉设计,用户研究…等等一些概念已经越来越多的出现在一些网站和书籍中，不过这些概念大多是从国外引进的。而国内中小企业的设计师，不仅仅满足于只停留在“玩概念”、“搞理论”的层面上，而是要在实际的工作中，应用一些有效的方法来让自己的设计具有良好的用户体验。
那么，如何让你的设计具有可用性？如何让你的设计有更好的用户体验呢？下面谈谈我们的一些经验：

1.不择手段

你正在设计一个网站，而面临的最大问题就是不知道该如何去做，这个时候，你该怎么办？
你可能会找一个类似的并且是成功的网站，然后“抄”过来。是的，这个办法也许就是一个最管用的方法。因为面对同样的用户，人家走在你的前面，而且也是成功的，那么“抄”过来如果不成功，起码也不会出现大的失误。这里说的“抄”不等同于“照搬”、“抄袭”，我们“抄”的是它先进的经验、先进的设计和方法，然后快速的转变成自己的东西，缩短自己的学习、研究成本，这对于一些中小企业要求快速占领市场的策略是相辅相成的。其实就是“学习”他人已有的经验，让自己站到巨人的肩上。要注意的是“抄/学习”都是要以自己的用户为基础，清楚用户的情况，了解自己的发展阶段，不要盲从。
如果你做的设计是别人没有涉及过的领域，而你也非常的迷茫，那么在你的设计中可能就会经常出现一个人或几个人“拍脑袋”的情况。有些成功的设计，就是一个人拍着脑袋做出来的。很多情况下，我们是设计师，同时也是用户。靠自己长期积累的经验去摸索，在经历了失败或是成功之后，对什么样的设计符合你的用户会有更好的把握能力。
在资源不足的情况下，对网站这样可以快速得到反馈的产品，可以尝试“边做边改”的方法。当然也并不是说可以随意做一个产品就发布上线，“救火”和“改进”是不同的。这种做法同样要以自已的用户为基础。只有充分了解用户、了解用户的需求，才可能保证自己的行动是有目的性和一定的可靠性，而不至于把自己的产品当成测试品。
这里的“不择手段”是相对于西方的理性方法（比如大量的调研、可用性测试等）来说的。理性的方法也非常好，我们一定要学习。同时对于中国大多数处于起步阶段的公司来说，这样的方法成本很高，所以经常会采用上面说的这些“感性”方法。我们觉得这些“感性”的方法并不是完全不可取的，只要注意：无论怎么“不择手段”地去设计你的产品，一切都要以用户的需求和习惯为基础，同时在操作时兼顾商业需求和技术约束。这样你的设计才会得到用户的赞同和市场的承认。

2.不要放弃好看

目前业内非常流行“可用性”、“用户体验”、“标准”等等“新”概念，这是非常好的一个趋势，至少它让我们认识到还有这么大的一处领域我们未去开垦。但是同时我们也想提醒大家，在关注“好用”的同时，也不要放弃我们之前一直关注的“好看”。
小公司在发展的初期，由于老板、高层常常会直接参与到设计过程中，而他们又不是这方面的专家，只能对“好看”来发表自己的看法。对这样的情况设计师们大可不必反感，老板关心是件好事，如何帮助老板实现他的想法也是设计中非常重要的内容。随着公司和环境的发展， “好用”一定会被放上桌面，这时设计师也不要因此忽略了“好看”。
现在大家对“UE,UX,Usability,Accessability”这些概念感到很“深奥”。其实，它们说的是同一件事：就是“以用户为中心的设计”。所以，大家不要被这些概念所迷惑，我们现在做的事情无非就是这样：让用户觉得好看，让用户觉得好用。
设计一定要考虑三方面的内容：商业需求、技术约束、设计约束。如何在这三方面之间取得平衡是设计师的重要能力。在不同的行业环境下、不同的公司类型、不同的用户群，会造成我们被驱向这一方面或那一方面。设计师要清醒地了解自己要做的是“平衡”这些方面，而不是简单地支持某一方。

3.采用合适的方法

前面已经提到一些设计的方法，可能大家觉得没有什么技术含量，并不实用。甚至很可能大家也正是这样做的。那么，如何了解更多的方法？了解过后，如何应用在你的设计当中呢？
首先，我们要做的是了解这些工具。“可用性测试、AB Test、问卷调查、座谈、小组讨论”等等都是很好的工具（包括我们上面说的“拍脑袋”这样的工具）。然而，针对不同的项目、产品，我们可能会应用不同的方法。这就需要你充分的了解这些工具，了解它们能做什么，不能做什么，适合什么情况，不适合什么情况。
其次，了解了这些工具以后，就需要我们合理的使用了。不同的项目、不同的用户需求、不同的资源……每一次新的设计都需要你来选择不同的方法来达到最终的目标。有的时候，为达到某个设计目的，我们也许会自己创造一种方法、工具。虽然可能是很“土”的方法，只要实用就好。现在很多从业人员，一味的想得到一些大公司的研究方法、设计流程，并且将这些方法强加于自己的设计当中。这是一种本末倒置的做法，也许这些方法根本就不适合你公司来使用。
其实应用什么方法并不是最重要的，而重要的是你在设计中是否始终以用户为中心。只要围绕用户来设计产品，那么你就会“不择手段”的应用不同的方法来达到目的，这一点对于一个设计师来说是最重要的。
最后再强调一次，如果你做的是“商业设计（非艺术）”。那么一定要“以用户为基础”，平衡好“商业需求、技术约束和设计约束”。只有这样，才能设计出用户满意，市场叫好的产品。

Feed enhanced by Better Feed from Ozh

有生命的角色模型

Shark — Thu, 30 Nov 2006 09:45:00 +0000

引子——本文的行文方式完全学自白鸦这个懒鬼，如有不爽，找他算帐……

最近在做新的角色模型（Persona），发现还有不少公司也都在这个时节做。我用脚趾想了一分钟之后认定不是圣诞的原因，要不就是因为大家刚好都在这时候学到要做Persona，或者大家都是每年换一套Persona？
今天看到的一篇文章还挺有意思，摘记一些要点在这里。（原文地址如下：http://www.boxesandarrows.com/view/bring_your_pers）
虽然大家都喊UCD，但要真的做到，还是得时刻提醒自己：U U U U U U……以免做完的Persona只能证明你完成了工作。
罗伯特.德.尼罗在拍《出租车司机》之前，并没有找几个出租车司机，听他们关于怎么演出租车司机的建议。而是花了几个月的时间去直接观察、研究，甚至自己当“出租车司机”。
上述方法有一个专门的名字：Method Acting/方法式演出（老外真能命名）。
我注：上述电影IMDB评分8.5，主演同学至少演得确实像司机了，方法式演出确实有用。
“方法式演出”的实际上就是指演员引导自己的情绪、记忆和体验来表演角色。
在使用Persona时，“方法式演出”就是要考虑角色的心理动机、人物个性和当时情况下的心情状态等。要了解这些，最好的办法就是和需求的目标用户呆一段时间。
如果做不到，至少要想象你自己就是那个人（所谓同理心），想象这个人会怎么使用你设计的软件和系统。
我再注：同理心很重要，很多时候要做到和目标用户呆一段时间显然有点困难，更别说观察和研究了……假如我做淘宝Persona的时候企图把宋嘉宝mm定义为其中一个的话显然会被其他同事mm群殴而亡最后导致Persona项目失败……有太多这样梦幻和理想的情况不能实现，所以Persona的创建者一定要有一些表演的天赋哈^_^。这就是为什么每次BT表演都有我们UI设计师的重要原因，Boss们太伟大了，娱乐的时候都在锻炼我们咯。
我再再注：抢到沙发的同学可以向我要BT表演的照片 \(^o^)/
再提一次：重要的是用户怎么做，而不是怎么说（It’s what users do, not what they say，见第四点）。

以下是一些使用这种方法时的提示：

每一个项目组都是一个戏班子。
如果项目组人比较多，项目经理就是导演，其他人可以视作演员。
主角色模型可以视作“主角”，其他的是“配角”。
主角可以分配给主设计师，其他的分配合项目成员。
每个设计会议召开时，各“演员”要考虑每一个决定会如何影响他所扮演的角色。
显然演员会有好差，但是这样一来至少Persona就有了生命，比写在纸上要强太多了。一个再差的演员也会比写在纸上的文字要好。
时间长了之后，“演员”们会对每个Persona了如指掌，就像他们的习惯一样。
这种方法只是一种加强UCD的方法，而不是其他方法的替代（如可用性测试）。但是他们可以一起协作得很好。
你永远也不会演得比真实的角色更像，但是演员们常常都演得不错（我倒不这么认为……）。

注：本文尝试使用了Windows Live Writer来发布。

Feed enhanced by Better Feed from Ozh

角色模型：来自MS的实践总结

Shark — Fri, 27 Oct 2006 09:30:00 +0000

这几天看了MS两位前辈(John Pruitt & Jonathan Grudin)写的论文《Persona: Practice and Theory》，虽然成文很早，但还是受益匪浅。论文前半部分是他们对实践的总结和分析，现简要翻译摘抄下来，和大家分享。（如果你不知道啥是角色模型，到这里看扫盲帖。^_^）

项目情况

MSN Explorer
开发项目组成员：数百人
角色模型项目组：共4人。可用性工程师3人(其中两人兼职),产品设计师1人(兼职)
角色模型项目时间：从2001年1月起，持续大约10个月
Microsoft Windows
开发项目组成员：数百人至数千人(随时间变化)
角色模型项目组：共22人。包括几个技术文案、几个可用性工程师、4个产品策划人、2个市场调研
角色模型项目时间：从2001年3月起，持续大约2年时间（到作者发稿时还没有结束）

碰到的问题

角色不可信。明显是由项目成员人为设计（并不是基于数据），或者与数据之间的关系不那么清晰。
角色的传达沟通没做好（译者注：应该是指把角色向整个项目组的成员传达）。通常的手段就是把做得像简历一样的文档打印到很大一张纸上，然后四处张贴。
没有真正认识到要怎么去使用角色模型。尤其是在整个项目过程中没有向所有的人一直不停地讲述模型。
没有足够的资源支持。包括高层的支持、人力资源和预算等。

引出的思考

怎么提取用户抽象是最好的办法？
可以虚构到什么程度？那些内容必须以数据为基础？
哪些数据是最合适的？
怎样才能把不同类型的数据整合起来？
几个相关的产品开发小组能不能共享一组通用的用户抽象？
怎么评价这些努力是值得的？
结果我们的产品变得更好了吗？等等

实践中的细节

利用已有的数据，特别是用户研究的数据。包括行业调研、焦点组、用户访谈和市场趋势研究等。
角色数量控制在一个比较可控范围：3-6个。
收集大量相关的市场调研和用户研究数据（从网上或者一些外部资源）。
创建一个“反面角色”，尽可能表现出那些没有被考虑到的用户。
Windows项目中人员较多，所以拆分到两三个人的多个小组中，每组负责一个角色。
关于角色的每一句描述都尽可能地和数据相关联。
创建一个“基础文档”，所有的角色都在这个基础上创建。它包括数据、关键属性、照片、相关材料等）。
当一个角色基本上被创建出来之后，就近找一个人来当模特，为他拍上一到两小时的照片，用作后面的视觉材料。避免使用图库的图片，因为图库中的同一个人常常只有一两张照片（译者注：我们现在可以利用一下flickr，那上面有好多喜欢把自己24小时生活都展示出来的人）。
角色完成之后，为它建一个网站。找那些总体上匹配的用户来看看在细节上是不是和他们匹配。
角色和文档都搞定之后，开一个启动会议来向大家介绍。
用多种方法让大家时刻都记得角色模型。比如做一些角色模型（真的模型，玩具）、印有角色的鼠标垫、啤酒杯、其他多种形式的电子材料等等。
花大量的精力保证产品和功能文档中包含使用角色模型来创建的情景流程。
视觉设计师在角色模型的基础上来创作视觉表现。
……

更多的自己看吧，点击下载：Personas practice and theory.pdf

Feed enhanced by Better Feed from Ozh