分享互联网 wenbin.me » 设计

网页设计师是怎样下地狱的？

Jerrywen — Tue, 22 Dec 2009 16:16:53 +0000

把这个送给曾经接过活的设计师，或者有过类似经历的设计师们。阿门。

刚开始的时候，一切都很棒。客户提出他们的需求，你也满怀期望。充满激情和兴奋感。

客户：新的网站一定会很棒。

设计师：岂止很棒？肯定会难以置信地棒。它会像遨游在外太空的雄鹰一般不可思议。

客户给你看他们现在的网站，你们一起嘲笑它是如此糟糕。

客户：哈哈，这都是什么烂玩意！我们上次请的设计师简直是个白痴。

设计师：是啊！怎么可能做成这样？！简直就是在对全人类犯罪。

于是，你重新设计了网站。新网站看上去美观，用起来也很好。这简直就是完美设计的最佳范例。

设计师：噔噔噔噔！看！

客户：我喜欢！看上去太棒了！我都想跟它做爱了！但是……

还需要做些“小”调整

客户（想）：这个设计很完美，但我作为CEO，有责任提点改正意见来让自己感觉自己的工作做到位了。同时，我得用“用户体验”，“转化导向”这样的术语来显得自己聪明些，尽管我几乎都不大会用电脑。

客户：你能设计得更“跳”一点么？它需要更“鲜明”些。看上去感觉好像不太对。

（作者注：客户确实跟我说过这样的话。直到今天，我还是不太理解在网页设计上“跳”和“鲜明”到底是什么意思。我也不知道怎样以他人的感受来设计网页）

所谓的小调整开始变多，很快就变成不那么小了。

客户：我想了一下，决定把字体调回Comic Sans. 另外，你能搞一个镜头光晕效果么？它们看上去非常Web2.0. 另外，这个网站绝对不能太“线条化”了。当我看这个网站的时候，我看到的都是一行一行的。你能处理一下么？

（作者注：确实有个客户这么对我说过。这个设计里绝对没有任何水平标尺或者线条之类的东西。事实上他说的是

啊

啊之类的代码生成的矩形区域）

客户让别的人参与了进来。

“看上去不错，不过我还想听到更多的意见，朋友，同事，叔叔甚至是我的宠物仓鼠”

客户：我让我母亲也加入讨论。她在1982年设计过一张面包促销宣传单，所以你可以说她也是有设计的眼光。

客户母亲：你排的这个设计需要点亮色，看上去太暗了。加点粉色怎样？再放上一只小猫。人人都爱小猫。

（作者注：我确实曾经遇到一个客户让他的母亲也参与到设计流程里，好让她提出批评和建议）

所有希望都破灭了。

你开始幻想别的职业，比如靠挖沟来生存或者给老人搓澡。

客户：好的。现在是这样，我的狗Miffles可是个关键人物。它可以说是我生命中最重要的部分。我希望你能加上狗的“意识流”，这样看上去就像是 Miffles在和来访的用户说话。我会给你几页Miffles可能会说的话，比如“我喜欢美食”，还有“嗨！欢迎访问我的网站，我是一只小狗，你可以和我握手^^”

(作者注：这绝对不是我编的。就有一个客户这样要求过。我还从来没有像那会一样那么想用车用蓄电池敲一个人的头)

你再也不是一名网页设计师。

你现在变成了一只绘图程序里的鼠标，而你的客户可以通过语音，email或者聊天软件来直接控制你。

（作者注：我曾经遇到一个客户拿走我的设计稿后，自己直接在Photoshop上进行修改，然后把改过后觉得是他们想要的效果再发给我。在我收到他的第13个修正版后，我炒掉了他。）

怨念就此诞生。

客户完全忘了，他们是雇佣了你，网页设计师，来帮他们设计一个好产品。想象一下，如果你是一个设计商业飞机涡轮的工程师，他们还敢掺和进来么？

客户：现在这个设计终于称得上是“跳”出来了！

设计师：饶了我吧……

来源：http://joydesign.coletree.com/2009/12/438

淘宝新版首页提前泄露预计元旦上线

Jerrywen — Wed, 16 Dec 2009 13:34:23 +0000

猛击图片看大图

近日网络上放出了淘宝网的新版首页(如上图)。从这张放出的首页可以看到在类目上精简了许多，顶部导航更加简洁美观，此外，很重要的一点改变是将主频道导航放置在了左侧，这一点与“淘宝商城”，“我的淘宝”，“淘江湖”等页的导航布局是一致的，应该是为了统一导航布局而做出的改变。

另外，可以看出淘宝的3C数码商城在突出位置，当然淘宝商城是首要的突出，整个第一屏比现在的页面更加的整洁和简洁，看起来很清爽，传达的内容也更加的直接。当然这只是设计稿，当正式上线加杂了很多广告后的效果可能仍然会大打折扣。

据说这一版本会在明年元旦推出，让我们一起拭目以待吧~

下图是淘宝现在的首页，仅作留档。

8个有效提高网站转换率的设计方法

Jerrywen — Thu, 12 Nov 2009 14:47:54 +0000

原文是一篇来自Smashing Magazine的优秀文章，详细叙述了8个可以提高电子商务网站转换率的方法（当然也适用于其他产品介绍类的网站）。基本上都是从网站设计的角度上分析了一些取得用户信任、改善整体品牌形象、提高用户体验的方法，很有启发意义。

1. 使用潜意识（Subliminal Suggestion）

简单来说就是在网站设计中更多地应用图片来间接传达一些信息。一些和产品无关的图片也可以改变用户对网站的印象，在潜意识中影响用户的消费欲。

2. 避免滥用产品比较（Prevent Choice Paralysis）

提供给用户选择权是好事，但如果强迫用户在过多的选项中作出选择时，可能会流失部分用户。如果必须要让用户作出选择，完全可以先推荐给用户一个默认选项，并且在视觉中强调出来。

3. 把真实产品展现出来（Show The Product）

用户经常会“以貌取人”，一定要让用户能够想象出他们将来使用的产品长什么样。

4. 提供给用户试用产品的机会（Let People Try It）

延续了上一点所说的，提供试用机会是进一步提高用户参与度的做法。在你的产品质量OK的前提下，每一个认真试用的用户都会在作出是否购买的决定前有足够依据，并且已经成为一个花了时间和精力使用你产品的潜在客户。

5. 注意力、兴趣、意愿和行动（AIDA）

用出色的设计吸引用户注意力，通过产品简介让用户产生兴趣，告诉他们你的产品能带来什么好处来让用户产生购买的意愿和冲动，最后用便捷和清晰的流程帮助用户将消费意愿转化为购买行为。

6. 引导用户的浏览方向（Guide Attention）

在视觉和排版设计中多运用一些如箭头之类的元素，人们常常好奇箭头所指处的内容，所以引导用户一步步完成上一点所说的几个步骤，并且最后指向“注册”、“购买”等链接。

7. 永远要让用户有东西可点（Always Provide Next Actions）

在所有主要的及用户可能访问到的地方都要明显地告知用户接下来可以做什么、怎么做，并且留下可点击的按钮或者链接让用户采取进一步的行动。

8. 古腾堡法则（The Gutenberg rule）

基本上就是从上到下、从左到有的浏览顺序（希伯来和阿拉伯语系除外）。用户的视觉中心往往在页面的左上方，而最后结束浏览时视线往往落在右下角，所以合理利用这个法则可以帮助用户更好地获取内容并且采取行动。

译文链接：http://www.jjying.cn/blog2/8-Useful-Tips-To-Help-Your-Website-Convert/

购物网站中应避免的12种结账错误

Jerrywen — Tue, 20 Oct 2009 16:55:24 +0000

原文链接：http://www.getelastic.com/12-checkout-blunders/

原文作者：Linda Bustos

我们都听过一句谚语，“你只是强如您最薄弱的环节”。对于许多电子零售商，无论大小，最薄弱的环节在于结帐过程。在这个关键时刻犯错误是昂贵和不必要的。下面，我已经收集了最常见的12种错误。

1. 不友好的信用卡信息错误

使用你的信用卡时遭到拒绝总是一个尴尬的局面，在网上也是如此。如何优雅地处理这些结账时的错误呢？不幸的是，网站的错误信息往往是由程序员编写，他们并不总是考虑客户的需求。

在处理这些错误时，提出一个可能的解决方案。如果错误是由于一个无效的信用卡安全码，可以显示图片告诉客户在哪里可以找到信用卡的安全码。如果错误但由于结算地址不匹配？可以提示客户检查他们的信用卡对帐单，以确保他们的帐单地址正确。最重要的是，显示您的客户服务联系信息，这样客户可以得到更多的帮助。

2. 登录

许多客户不喜欢记住一个用户名和密码的这种方式。除此之外，您的回头客在后续购买时也存在记不住他的登录信息的风险。当然，你可能有一个密码查询功能，但如果他们的电子邮件不工作或暂时无法进入？由于这些原因，提供给您的客户结帐选项而不需要建立帐户的服务。在此之后，您可以随时询问他们是否想为下次购买而创造一个帐户。

3. 默认的信用卡类型选项

这是我最大的眼中钉之一。现在，我认为自己对于网上订单已经比较有经验了，因为我在电子商务行业工作。但我不知道有多少次，我在预设选项为Visa卡的选项中填写了我的万事达卡号码，导致我的卡被拒绝。当他们急于完成任务，人们往往会忽略那些已经用数据填充的字段。为此，需要你的客户选择他们的信用卡类型。更好的是，根据卡片的数字自动检测的信用卡类型（见的例子PayPal的结算本）。

4. 取消按钮

当我看到一个“取消”按钮并列旁边的“提交订单”按钮时，我总是暗笑。不要让你的客户太容易放弃自己的订单。取消按钮相当于在问：“难道你真的确定要购买它？”

5. 向上销售或者交叉销售

有一个时间和地点交叉销售，但存在结算风险。太多的选择会把客户置于选择的悖论中，导致废弃了购物车。一般来说，一旦有人已经去了购物车，现在是时候该停止销售并关闭销售了。

6. 免责声明，解释和警告

最近，我审查了网上礼品店的电子商务网站。在“完成订单”操作时，会顺便提示说“出于安全目的，您的IP地址已经记录。”很诚实，但真的有必要声明？虽然它可能阻止骗子，（尽管我对此表示怀疑），这种不必要的信息，只会让客户在隐私意识方面竖起红旗。其他不必要的免责条款，包括“订单按钮被多次点击会导致重复下单”（也许你应该解决此问题，而不是解释！）或“产品有货”（或许你应该在线显示出准确的库存数量！？）作为一般情况下，如果需要客户知情则要保留免责声明或解释。如果它会导致游客揣摩他们的购买决定，则将其删除。

7. 不安全的网络页面错误

这是最应避免的错误之一，结帐时如果在一个使用https链接的安全页面中，包含了非安全因素（网址为http://www.igsd.gov.hk图像，JavaScript文件等）。当发生这种情况，如IE一些浏览器，客户喜欢警告说：“此页包含不安全因素。”当你即将进入您的个人支付信息，这不是一个好消息。为了避免这种情况，要确保你能经常贯穿你的结账流程，使用可以显示这些警告的浏览器。

8. 单一的支付手段

当你没有现金而商店不收信用卡的时候，你难道不会感到沮丧？而当网站只提供一种支付手段时，很多客户会有类似的沮丧。使用其他支付形式已成为期望：贝宝，电子支票，BillMeLater，和谷歌Checkout。增加一个额外的付款方式，对于防止被遗弃的购物车有很大的帮助。

9. 死掉的订单成功页

这是一个耻辱，这么多购物流程在订单成功页面上结束。在此展示“感谢您的订货订单确认页面！”这样的结论并无太大意义，为什么不继续经营你的客户呢？可以考虑增加一个分享告诉给朋友的表单，显示客户服务的常见问题，或要求用户填写调查问卷。

10. 隐藏的附加费用

没有人喜欢在最后一刻看到一些意外的费用。确保所有与航运有关的收费和收税显示越早越好。

11. 客服热线不明显

人们喜欢从真实的人那里进行购买，让客户始终知道如果他们有问题，提供帮助的人会立即到达。虽然并非每一个客户看到您的客服热线都会拨打，仅仅是有一个便创造了信任感。

12. 产品缺货

顺便说一下哦，缺货！如果产品缺货了，需要在商品页及购物车中就及时提示客户。可购买的产品应在该产品的网页和购物车中始终可见。任何迟到，你都会激怒客户。避免在结帐的错误是电子商务101。不要光听我的话虽然，测试自己的这些建议。如谷歌的网站优化工具，进行的A / B测试，您的结帐是出奇的容易和便宜。

译文链接：http://www.wenbin.me/ued/12-checkout-blunders12-checkout-blunders.html

译文作者：http://www.wenbin.me/about

互联网上的虚拟建筑—19楼7号楼发布上线

Jerrywen — Tue, 01 Sep 2009 12:03:36 +0000

把现实世界的生活搬到网上，一直是以来都是IT精英们乐于玩弄的概念，概念归概念，现实归现实，概念是美好的梦想，现实就是要吃饱肚子。产品有了用户变成钱不是难事，有了钱提供更好的产品给用户，这就是传说中的可持续发展。

网上早有一幢由全球像素艺术家集体创作400层的像素大楼，我们仰天叹息“疯子画的……”，UED这回挑战的不光是像素艺术家，还要考虑商业。世界上有想法抛概念的人很多很多很多，但能够把想法变成现实的人太少太少，UED人的精神，不光要敢想，还要有执行力，能把想法变成现实。

皓云当时只是提出一个想法，能不能把7号楼改版做成就像楼一样，UED主创力量章牛牛毫不犹豫的说：“这个可以搞”，就这么简单的两个字成就了新版的7号楼。

此“楼”已经在今天下午正式和网友见面（http://family.19lou.com/），这将是19楼里的第一幢像楼的“楼”，用户在浏览页面时将得到更加愉悦的体验，这也是网络推广模式的大胆尝新。

以上内容来自19楼的UED-blog。毋庸置疑这个点子是一个很有趣的创新，并且因此在网络推广方面有其独到的优势，容易招引来更多“看热闹”的用户来此围观，而其中的一部分必将转化为19楼的用户。而在体验上，如19楼UED所讲，将会让用户更加愉悦，我想很多初次看到这幢“楼”的用户都会很愉悦，因为具有新鲜感的事物通常容易让人产生愉悦感。

但就其后长期使用体验上来讲恐怕就不好讲了。页面上为了追求“楼”的这种特殊的图形化设计，大量区域实际是被“楼”的像素所占，因此导致页面长达5屏，但其中只不过就是一些品牌店面的链接而已。过多的面积用于渲染创新，而实际内容部分相对则少了许多。并且这些品牌店面的链接也是散落在“大楼”的各个楼层中，并非有利于阅读。

所以，我倒是觉得这次创新是一次很有意思的尝试，对推广19楼是一个不错的创意点，但如果从长期来看，究其实际的使用体验上恐怕是形式意义大于实际意义。怕是达到一定的推广目的后，还要再进行非创新的甚至重返传统的改版。

环形插座

Jerrywen — Sun, 21 Jun 2009 15:38:08 +0000

Jerrywen：生活无处不设计，插座也可以有好的用户体验。

日常生活中有不少东西都可以重新设计来提升用户体验, 比如这个环形插座, 可以同时插多个插头, 中间的方形大按钮也可以同时开关上面的所有电器, 配有设计概念草图, metaphys 出品:

原文出自：疯狂的设计

Twitter翻页的优化设计

Jerrywen — Fri, 20 Mar 2009 15:15:21 +0000

最近Twitter在界面和产品的优化更新比较频繁，而在今天Twitter调整了新的翻页方法。

原来的Twitter翻页很普通只是用“前一页”“后一页”的链接，通过刷新页面，进行翻页浏览。

如上图所示，今天Twitter修改的版本则是在页尾提供了一个“more”的超大按钮。

点击这个按钮后，则会在本页加载下20条的内容，直接接续展示在下方。如此类推，每次点击“more”会获得20条数据。

总觉得这个这里有两个小问题：

1. 这个“more”采用了一个很长的bar，并不是很直观地表达出它是一个按钮，或者说这并不是我们熟悉的按钮样式。我想不少人都还是要想一下，才可能去点。

2. 每次看更多的加载内容还是需要有1次点击，虽然无刷新页面已经改善了体验，但是否能再简化一些呢？比如Google-Reader中直接滚动到下方自动加载，无需任何点击即可从头看到尾。

看看那些名牌LOGO的成长史

Jerrywen — Tue, 17 Mar 2009 14:04:59 +0000

今天看看那些知名的Logo，可能你没注意过，它们也是一直在变化，有的还挺雷人的！

先从时尚的苹果开始吧，苹果也有土的时候。1976年那第一个Logo，是一棵苹果树吗？

shell 最早还真是个贝壳，逐渐由黑白转为彩色。最终在Logo中去掉了“Shell”字样。

宝马的变化其实并不大，只是七八十年代尝试革新了一阵，便又改了回来。现在的Logo更有质感。

Nike让我们知道当品牌起来以后只要一个符号就可以了。

你肯定看不出早期的IBM是什么吧，那是因为IBM早期是叫International Time Recording Company，生产mechanical time recorders的。

看得出是个挣扎的过程，演变过程也是由繁入简。

Google，不会以为它一直一个样吧，短短十年也能感觉到早期有点土气呢！

柯达由简单变复杂，最后又回到简单。

微软在最初”微”和”软”是分开的。

不要怪大众早期设计者，这个蜘蛛网的Logo 和胡子元首希特勒有关，想想纳粹标志啥样子就知道其中的渊源了。

万事达，第一个怎么感觉是咨询中心。

百事三个进化历程，40以前增肥阶段，40到91瓶盖滚成了个球，91到现在，上蹿下跳的球。最新的版本据说是有微笑的含义，你看出来了吗？

火狐怎么原来怎么是只火鸟，那是因为早期叫Phoenix，不过也太丑了！

Life’s Good，过去怎么是黑瓶子？曾经的高士达。不同时期变化好大啊～

奔驰是没什么雷人的，恒久不变的经典标志，三个箭头星代表奔驰车是海陆空三栖地一个美好愿望，不过至少陆上是没问题地，海里天上大家就看看剑慕斯棒得吧！

诺基亚在芬兰语里是指一种灭绝的黑皮黄鼠狼的意思，但是早期的Logo却是一只鱼，但是早期的诺基亚既不是卖黄鼠狼皮的，也不是卖鱼的。而是卖橡胶制品的……转行了

最开始的福特Logo很像哪里拆下来的破旧的灯箱广告，你要是知道福特先生给爱迪生工作过就明白为什么了！

沃尔玛也是玩了次复杂又回来了，不过带回来个星星。

原文出自：http://www.u148.net/article/3923.html

搜索引擎广告创意

Jerrywen — Wed, 18 Feb 2009 13:44:06 +0000

分享一下今天看到的一些搜索引擎的产品广告创意

同样是来自谷歌的创意，但下面这个总觉得创意上有点点“邪”。

下面这个是早年间民间山寨版的创意

再看几个Yahoo搜索的广告创意

最后是百度有啊的乡村版刷墙广告，其实在广大农村地区，刷墙怕仍然是最有效的推广手段

2009年不良可用性日历

Jerrywen — Sat, 17 Jan 2009 12:01:39 +0000

Netlife的研究提供了2009年的不良可用性日历。

您可以从bad usability calendar的官方主页上下载最新的2009年版本。同时也可以查看从2005年以来历年的不良可用性日历。去年的版本下载量超过10万次。

点击这里访问bad usability calendar的官方主页下载2009年不良可用性日历

点击这里查看下载2005-2008年的不良可用性日历

谷歌(Google)更换Favicon(ico)小图标

Jerrywen — Mon, 12 Jan 2009 05:13:18 +0000

1月9日，谷歌(Google)更换了Favicon(ico)小图标。

据谷歌官方博客介绍，最新的Favicon小图标是根据巴西一所大学（University of Campinas）计算机专业的本科生André Resende提交的作品演变而来的。谷歌对这个作品的评价是：高度可识别的和吸引人的，而且抓住了谷歌的精神（His placement of a white ‘g’ on a color-blocked background was highly recognizable and attractive, while seeming to capture the essence of Google.）。由四周不同的颜色围成的白色小写字母g就直接代表着Google，而谷歌四色正好是红、黄、绿和蓝（red, yellow, green, and blue）。谷歌由此演绎的新版本，注意看，小图标里面的g不如这个明显，不过谷歌四色表达更分明。

根据以上的精神，谷歌还列举了其他几件不错的作品，如下所示：

by Hadi Onur Demirsoy

by Lucian E. Marin

by Yusuf Sevgen

Google之前使用的图标：

谷歌2008年5月以前使用的Favicon小图标

谷歌2008年5月-2009年1月9日使用的Favicon小图标

谷歌还说了，没准哪天还会更换，不过设计的根本标准是要符合形状独特，价值久远等要求（original criteria: distinctive in shape, noticeable, colorful, timeless, and scalable to other sizes.）。因此，谷歌爱好者们期待的是下一个惊喜。

有道新年首页！

Jerrywen — Fri, 02 Jan 2009 04:29:32 +0000

前两天，总结了一篇《2009新年各大网站贺年LOGO》，总结时“有道搜索”的首页及LOGO还没有更换，今天再次访问时，看到有道不仅更换了2009新年LOGO，而且还默认使用2009了新年皮肤。

有道这次不单单如百度，Google一样更换LOGO，而且还更换了寓意辞旧迎新的2009新年皮肤。总结了2008年我们所经历的重大事件，也是2008年最热门的搜索，采用了类似Tag云的方式展示。只是稍有遗憾的是，这个类似Tag云的设计还仅仅是一个背景而已，如果每个2008热点关键词都是可以点击产生一次搜索行为，可能会更有回顾2008的效果吧。

2009新年各大网站贺年LOGO—Happy 牛 Year!

Jerrywen — Wed, 31 Dec 2008 15:08:58 +0000

今天是08年的最后一天，各大网站均换上了2009贺年logo，在岁末的最后1个小时，汇总一下：

中国用户没有F扫描习惯

Jerrywen — Mon, 22 Dec 2008 14:28:54 +0000

UCD翻译小组最近拿到一份颇有份量的可用性测试报告──《Chinese Search Engine Engagement》，对中美用户的搜索习惯做了有趣的分析。

“用户不一定非要读列表，而是会扫视列表，同时利用语意映像和信息线索，抓住一些特别的关键词。反过来说，用户也倾向于依据这些关键词，进行相关性的判断。”

这意味着，页面上契合用户期望的关键词，是决定用户是否点击进入下一页的重要线索。

“在传统的北美的方式中，用户从左上角开始扫描搜索结果页；接着垂直扫描，建立1～2个备选条目（consideration sets），然后再水平扫描每一个列表。整个的扫描模式最后看起来就类似于一个F，因而被称为F-scan。”

上图：北美用户的F扫描模式

“一个百度用户花费在搜索结果页上的时间是北美用户的5倍，而Google中国用户则是北美Google的3倍。而且，在北美调研中均有发现的、广告位置和其可视性（点击浏览率）之间的相关性假设，在中国似乎并不成立。”

中国用户在搜索时会看到更多的信息。这份报告指出，中国用户在Baidu搜索结果中查看第7到第9条的结果所花费的时间，和他们查看北美搜索结果页面顶部的关键词广告的时间一样多。

最重要的是，这次研究“没有发现任何与北美用户的F形扫描模式相近的证据。事实上，我们看见了一个更加离散的模式，而不是一个完整的模式。扫描点几乎出现在结果列表的每一个位置，而且前进（progress）速率比北美用户更加的快。”

上图：中国用户的盒扫描模式

造成这种现象的原因可能有两个：

1. “（似乎）中国用户并不只看前3条，而这却是北美用户的典型交互方式。”，因为“（中国）用户假设前5、6个搜索结果都是关键词广告，所以他们很快的扫过。这是Baidu通常的模式，即页面上哪些是广告、哪些是真正的搜索结果，并没有区别。”

2. 用键盘输入中文并不容易，“很多用户只输入几个汉字而不是短语。然后使用页面下面的‘相关搜索’来提炼他们的查询条件。这种方式比传统键盘方式快很多。”

报告中将这种在中国用户身上表现出来的特有扫描形状称为“盒扫描”（box scanning）。这种独特的扫描方式，也许是中西文化真正的差异所在。

原文来自：Angela

Jerry：在互联网的很多使用习惯上中国用户与欧美用户都是大相径庭，这就使得国外不少研究成果在中国很难有参考意义。用户行为不同，喜好不同，互联网商业模式也很不相同。中西方在文化和社会形态上的巨大差异，同样表现在互联网界。所以，我们还是要更加聚焦关注我们自己的用户。

百度有啊有趣的图标

Jerrywen — Tue, 16 Dec 2008 13:38:17 +0000

百度有啊的一套图标，设计的还是很不错的。赞一个～

CCTV.com的友情提示

Jerrywen — Mon, 15 Dec 2008 15:17:34 +0000

CCTV.com的首页进行了改版，在访问时你可能会遇到如上图的友情提示。

几乎没有人不清楚这个提示其背后所想要表达的意思：首页布局改版，您是要保留新的界面还是恢复成原来的样子。但这个事情却被这样一个提示框给说得很糊涂，明明是中国字，但你就是无法在第一时间很明确地知道自己到底要点哪个按钮。

这里产品人员在文案上用了“恢复”这个词。我想是源于，用户在看到提示的时候其默认已经是新版的界面了，因此从这个角度讲，实际上是替用户变过界面了，所以向用户提问是“暂不恢复”还是“恢复初始”。而通过提示文字将这样的思考过程加给用户未免有些复杂，我们实际要让用户选择的，也是用户或许最关心的就是用“新界面”还是“老界面”。

其实我觉得不如两个按钮就叫【使用新版】【保持老版】来得简单清楚。

你觉得呢？

60个创意404页面赏析

Jerrywen — Sat, 06 Dec 2008 05:59:28 +0000

看图不说话……

选择原型设计工具

Jerrywen — Mon, 01 Dec 2008 15:50:58 +0000

在程序、网页被实现之前，一定需要把界面给“画”出来，成为原型设计，就像动画片要画分镜头、手稿一样。原型设计能起到有效沟通的作用，漂亮，直观的原型图更是让人赏心悦目。

1. Microsoft Visio

我最常用的原型设计工具，几乎是Windows平台下惟一的“最佳”选择。有很多的模板可以选择，可以制作包括流程图、平面布置图、工程绘图、日程图、软件界面、UML、灵感脑图……

Visio的优点很明显，上手很快，能比较快的画出不同种类的图，但缺点也非常明显，由于要支持不同的“模板”，Visio的外观功能不够强大，而且Visio2007和Visio2003相比，并没有很大的改变，实在对Visio有些失望，不过在Windows下还有其他的选择吗？

2. Microsoft PowerPoint 2007

Office2007最值得称道的是对颜色和形状的快速样式，PowerPoint同样是，这个特点能够帮助用户很快的制作一套UI规范；同时，在展示原型设计是PowerPoint的老本行。

但是毕竟PowerPoint不是专门的原型设计工具，所以一些配套的功能不够，比如界面的文档管理，界面的上下文标识等等。另外有人提供了一套PowerPoint的原型模板，还是不错的。

3. Axure

可以说Axure是Windows上最出色的原型设计软件，原因是：够快，够简单，比Visio更加快，既然是原型设计，当然是低保真的。Axure提供的几个形状能满足基本的需求，但是形状的定制功能太弱，比如大尺寸的圆角框，Axure就不能很好的处理，需要用4个形状拼接起来。

Axure除了提供低保真的形状外，还提供了注释，界面上下文的实现，等等。其中界面上下文非常有用，如果要演示一些界面效果的话，Axure提供的界面上下文是非常直观的。

另外Axure能够导出HTML和DOC的文件，能很方便的将其文档化。

当然低保真的界面效果总有一天会成为高保真的界面效果图，这个时候，你同样能够利用Axure来满足：即拥有高保真界面，又拥有界面上下文的功能。

Axure的模板功能很有特点，Axure拥有两种模板的类型，一个是传统意义上的模板，随着模板的改变，应用这个模板的页面，也会得到改变；二是小部件（Widget）类型，当应用这种类型的模板的时候，这个模板中的所有控件，都成为应用该模板的页面的独立控件，改变这种类型的模板后，其相关字页面是不会发生变化的。简单的说，就是Widget类型是一个控件包，你可以在新的页面中把这个包解开，把里面的东西仍在新的页面中，此后，这些东西就和Widget没有关系了。

4. OmniGraffle

能画出很漂亮的流程图、原型设计，可以说是最好的原型设计软件了，但只限在Mac OS上，不能说是一种遗憾，在Windows上的用户没有办法享受到这款软件。自己也没有用过，对于它的介绍也是从它的官方网站和心弦的博客中获得的。

最后

温伯格曾经在他的一本书中讲到（具体哪一本实在想不起来）：“我工作只用笔和纸，力图对复杂现象做出简单的解释。”有时候离开电脑屏幕，你会发现你的思考力会上升。

字母冰模

Jerrywen — Sat, 29 Nov 2008 14:47:36 +0000

字母冰模(Alphabet Ice)，其实这个idea真的很简单，你可以用这些字母组合出你想要的词语，无论是传情，还是自己的名字，绝对很有趣，很cool的事情。这个冰模可以在这里买到，价钱是$30。

WEB2.0应用与网站集锦

Jerrywen — Sat, 29 Nov 2008 01:52:22 +0000

现今的互联网已经进入到一个以应用为基础的多元时代，因此，保持足够的观察力，洞察那些新兴的互联网应用成为决胜市场的关键，产品应用成为现在的流行因素，这个站可以让我们发现好多新的点子。

URL:http://www.netwebapp.com/

新设计：触摸式开关

Jerrywen — Fri, 28 Nov 2008 15:17:38 +0000

严格来说这个应该不算一个开关，因为操作方式和我们平常见到的”开关”有很大的不同。用惯了iPhone这样的触摸屏的人应该找到和它相似的感觉。在这个方形的触摸板上做出不同的动作，就会实现对灯光的不同控制功能。跳转见详细图示。

比如在上图这个例子里面，在触摸板上分别向不同的方向滑动手指，就会点亮/关闭相应位置上的灯。

而对于背对操作者的位置上的灯，可以通过下面的方式来操控，或者，划一个圈，控制所有的灯。当然了，还可以根据开关所在的位置和灯所在的相对位置，自己定义。看起来真的是不错的想法。

内置型办公桌

Jerrywen — Thu, 27 Nov 2008 13:32:50 +0000

内置型办公桌，电源插座、USB插口、键盘鼠标、各类文具等都隐藏于桌面之中，Manuelsa 设计。感觉很方便实用，把乱乱的东西都归纳起来了。

创意的楼梯设计

Jerrywen — Wed, 26 Nov 2008 12:18:35 +0000

悬浮的楼梯

属于格雷酒店（the Gray Hotel），它位于米兰中心区，楼梯与内部的设计由建筑师 Guido Ciompi 完成。

滑板楼梯

吊箱楼梯

消失的楼梯

抽屉楼梯

上楼之前先换鞋。

玻璃楼梯

扭曲的楼梯

位于纽约 Longchamp 商行。

攀爬楼梯

额，也不怕摔下来。设计师 Gabriella Gustafson 和 Mattias Ståhlbom 为私人住宅设计。

可存储的楼梯

家里的空间太小，让楼梯帮忙吧，放书籍，放装饰物等等。

书山有路梯为径！！

聪明的设计，一步一步，节省了所需要消耗的木材。

非正常楼梯

分享互联网 wenbin.me » 设计

网页设计师是怎样下地狱的？

相关文章推荐

淘宝新版首页提前泄露 预计元旦上线

相关文章推荐

8个有效提高网站转换率的设计方法

1. 使用潜意识（Subliminal Suggestion）

2. 避免滥用产品比较（Prevent Choice Paralysis）

3. 把真实产品展现出来（Show The Product）

4. 提供给用户试用产品的机会（Let People Try It）

5. 注意力、兴趣、意愿和行动（AIDA）

6. 引导用户的浏览方向（Guide Attention）

7. 永远要让用户有东西可点（Always Provide Next Actions）

8. 古腾堡法则（The Gutenberg rule）

相关文章推荐

购物网站中应避免的12种结账错误

相关文章推荐

互联网上的虚拟建筑—19楼7号楼发布上线

相关文章推荐

环形插座

相关文章推荐

Twitter翻页的优化设计

相关文章推荐

看看那些名牌LOGO的成长史

相关文章推荐

搜索引擎广告创意

相关文章推荐

2009年不良可用性日历

相关文章推荐

谷歌(Google)更换Favicon(ico)小图标

相关文章推荐

有道新年首页！

相关文章推荐

2009新年各大网站贺年LOGO—Happy 牛 Year!

相关文章推荐

中国用户没有F扫描习惯

相关文章推荐

百度有啊有趣的图标

相关文章推荐

CCTV.com的友情提示

相关文章推荐

60个创意404页面赏析

相关文章推荐

选择原型设计工具

1. Microsoft Visio

2. Microsoft PowerPoint 2007

3. Axure

4. OmniGraffle

最后

相关文章推荐

字母冰模

相关文章推荐

WEB2.0应用与网站集锦

相关文章推荐

新设计：触摸式开关

相关文章推荐

内置型办公桌

相关文章推荐

创意的楼梯设计

相关文章推荐

淘宝新版首页提前泄露预计元旦上线