彩程团队BLOG » ued

iOS APP体验设计

yx.shawn — Thu, 16 Jun 2011 15:24:52 +0000

iOS APP体验设计不像互联网的体验设计那样，有一堆的方法论和可以“借鉴”的案例。目前除了苹果的和前Palm的外，没有找到更好的设计哲学和方法论。

事实上，即便认真地研读了HIG和Zen of Palm，甚至是Oolon Colluphid的哲学巨作你也无法严格按照Guideline设计出一款出色的APP。其原因，我得从程序猿和设计湿说起。

程序猿 vs 设计湿

最被思想处于上世纪初的人理解的软件设计开发是由 1. 美工 2. 程序员 3. 项目经理构成。我这里讲的设计湿不是美工！这是前提。因为美工只关心好不好看，他们几乎不关心（或者不懂）产品的易用性。

如何鉴别程序员和设计师呢？你无法用会不会写代码来区分他们（毕竟很多设计师是会写编程的，例如彩程设计的设计师们，反之亦然），但是你却可以用通过他们平时思考方式来区分他们。

程序员： “哇！这个功能好！我们能不能在我们的APP中加上呀？” 这种场景常发生在他们看到了一个很 “COOL” 很 “绚丽”的APP后常发出的感叹（或者心里的感叹）。

设计师答：“我们凭什么要加这个功能呢？”

程序员更倾向于关注功能本身，希望把所有好的东西都加到自己的作品中。例如，好的设计模式，高效的算法，看似绚丽的特效。一般程序员的作品有两类，第一类是功能比北京的车子还要多，你需要一本牛津字典一样厚的说明书才能搞懂如何使用。另一类有十分绚丽的特效，界面飞来飞去，一走神就以为自己在耍杂技了。

设计师更倾向于关注产品整体，他们通常都有产品的功能洁癖。他们通常会从摄影中找到共鸣：一张好的照片有三个要素 1.有一个鲜明的主题。 2. 画面中的元素可以快速地把观众的注意力转向这个主题。3. 只有一个主题，所有有主题不相关的重点通通砍掉。

不幸的是，很多iOS的开发者是从程序猿跳出来做的。泪流满面地用咆哮体高喊 “我们程序猿也终于可以赚钱了！！！有木有！！！有木有！！！” ，于是他们做出来的东西可以用下图简要地说明：

没错！问题不在于功能是不是足够的多，而是体验是否足够的好，是否能解决问题。而尤其在做iOS的APP设计的时候，由于设备的本身特点直接决定了设计完全不同于网站的体验设计。

我们认为，主要区别有以下三点：

1. 视觉焦点&操作焦点

所谓视觉焦点和操作焦点的问题，我们可以从传统的电脑使用说起。我们控制电脑通常是通过鼠标，手用鼠标控制屏幕的指针，移动到某个位置，点击、双击、拖动等完成操作。我们看到的是屏幕，操作的是鼠标。我们的视觉焦点是屏幕，操作焦点是鼠标。属于视觉焦点和操作焦点不同的类型。

而有触摸屏的设备和电脑最大的一个区别就是它们的视觉焦点和操作焦点是同一个点。因此，我们想打开一张图，只需要用手点一下图。

视觉焦点和操作焦点同一的最大好处就是十分容易学习使用这类设备。但是正是因为两点同一，当我们在操作的时候同时也会挡住焦点。

这一特性会影响到很多UI设计，例如：拿出你的iPhone，把手放在iPhone上，你会发现你的iPhone最大宽度也就4个手指的宽度。

我们用圆圈代表被挡住的区域，其中绿色区域是安全区域，代表我们心理上认为一定可以准确地点到的区域；而黄色区域代表我们心理上会有点忐忑，不能确定是否能点中的区域。例如某拍照软件的设计：

没错，问题不言而喻。从UI的设计上来看，如果是个网页的话，视觉的确没什么问题（当然，删除按钮放在修改的旁边本来就是愚蠢的做法，这一点就先不说了）。但是由于视觉焦点和操作焦点同一的原因，点击修改就变得十分困难与紧张，何况旁边还是一个删除按钮。

2. 空间感知

传统的互联网网页间的跳转，我们都熟知的是利用链接。链接可以在整个网站甚至是网站间任意跳转，点了链接后就进入了一个全新的空间。空间感知为网状的，没有头没有尾，在任意一个点通过网址都可以进入。

在移动设备的应用程序设计中，进入APP通常都是一个固定的点，每个操作就带入另一个空间，如果失去了空间感知，就像失去了地图，用户会很容易有迷失的感觉。

而由于屏幕的大小等因素，APP不能直接告诉用户空间是什么样的，但是可以通过各种手段来给用户以暗示。例如：

Camera+中，两个主要的场景，一个是拍照，一个是照片管理。两者之间空间是上下的关系，当用户在拍照场景下点击相册时，界面会向上推动显示照片管理的场景。反之亦然。此时向用户暗示的场景如图所示：

更复杂一些的空间暗示，如Reeder iPhone版。空间中的每个位置十分清晰，并且用动画的方式流畅地向用户暗示这种空间感。不仅如此，Reeder iPhone版的加星去星的空间感知不是上下左右，而是前后的关系。请自行购买后体验。

除此之外，Reeder iPad版本和Our Choice的空间感知也做得十分的棒。以Our Choice和Reeder iPad为例（视频）。Our Choice在选章节的场景进入章节内文时，选章节的场景会缩小，通过“近大远小”的常识在一个平面内暗示两个场景间的空间关系。 Reeder 也采用了类似的方式。

3. 体位化设计

以iPad为例子，通常我们使用iPad的时候有两种体位，第一种是把iPad放在桌面上进行操作，这种体位使用APP，无论按钮在哪里，点击都需要用一只手完成，两个步骤间的按钮距离远近也不会成为负担。而当手握着iPad的时，这种特殊体位，问题就出现了。

（如果你有手机，请现在拿在你的手上）倘若你只希望用一只手完成操作，你会发现，你用大拇指点击屏幕中所有点，却只有绿色区域是很易点击的。如下图所示，iPad的易操作区域也是分布在弧形区域内。

接下来用一个视频还说明坏的体位化设计和好的体位化设计的区别。

前半部分坏的体位化设计，是因为设计没有考虑到操作姿势，以至于左边一排不常用的功能占据了最重要的黄金区域，而常操作的区域却远离易操作的区域。操作起来就比吃掉一只死苍蝇还难受。而后者，好的体位化设计，所有的常用功能，一只手，不需要太多移动就可以全部完成：上篇文章，下篇文章，标记未读，标记加星。

当然，如果你是我们《牛壹周》的忠实读者，那你一定记得我们的风火轮（详见牛壹周1.2之无敌风火轮）和一阳指(牛壹周1.1更新手记)？没错，我们坚决地去掉了一阳指，因为这是一个漂亮却难用的设计（至少不是一个好的体位化设计）。我们在架构上保留了风火轮（当然，只是在程序中保留，但并未启用），因为这是一个很好的体位化设计案例。例如，在阅读杂志的时候，我们常要翻下一篇文章，传统的操作是先进目录，然后再找到要看的文章，再跳转。而使用风火轮，如视频所示，你的手完全不用离开屏幕，无论你的手有多大多少，无论你是左撇子还是右撇子。

在即将发布的iOS5中，iPad的键盘设计也很好地体现了所谓体位化设计的精髓：

结束语

iOS设备，甚至是包括Android在内的所有移动设备，他们都因为独特的使用场景，似的设计不同于网页设计。很多“美工”，甚至程序员从网页设计转变角色来设计移动设备APP时常忽视这些隐形的因素，最终导致产品设计水平难以提高。如果说近年来交互设计师在网站设计中的地位越来越高，那在移动设备的设计中，他们的地位会更为重要。视觉焦点/操作焦点、空间感知和体位化设计这三个iOS设备的特点事实可以类比到Android甚至更多的设备中，当然也不局限这三个特点。

当然，也正是因为这些原因，当我们听到别人兴奋地告诉我们：“哇！HTML5可以做到所有设备自适应ye~”的时候，我们通常是不屑，心里默想“程序员！”。当然，这里并非贬低之意。只是，有一点不得不承认，不同尺寸的设备，不同的分辨率，若想获得最好的体验，“自适应”让机器适应了却让人难以适应。例如一个按钮本来有1厘米高宽的，一个自适应，在iPhone上就只有原来的1/3时，你叫人怎么点击？当然这样的例子很多。大多数这种不花功夫还大赚的宣传，就犹如电线杆贴满的小广告，通常都是缺少优质应用的病入膏肓的硬件厂商为了快速解决痛楚而买肾的做法。当然，对技术敏感的工程师就不自觉地帮着一起吆喝罢了～

我们彩程设计对移动设备还会持续观察思考。更多的设计方法和哲学会持续和大家分享。敬请关注。

2011·UCD书友会（成都）·我们新地方见

老妖 — Sat, 08 Jan 2011 15:41:14 +0000

UCD书友会（成都）的朋友你们好，我是给你们打杂的老妖。

尽管过去一年里我头发长了又短，但你们应该还记得这头胖子吧

感谢这一年多来，你们对书友会的参与和支持——尽管作为一个个性散淡而且带点情绪化的人，在过去的一年里，我有时候组织得挺好，有时候又很糟（刚开始通知、照片、分享什么的都做得挺好，后来精力实在顾不过来，有些虎头蛇尾了就）。

现在我依然还清晰地记得，2009年12月21号，UCD书友会成都分会在新亚天府苹果体验中心的第一次亮相。

UCD成都书友会处子Show

那天来的人很多，Fish给大家讲了生活中的UED，Stan给大家分享了他们公司开发iPhone上的Mobile Rss的一些心得，新亚苹果的培训师黄颖佳先生则给我们分享了很多苹果历史上的经典广告，聊了不少苹果的文化。

希望你们还记得我们的第一场讲座《生活中的UED》

后来，我们陆续邀请了欧阳丹、Jole、Kevin、Allen、Simon、千鸟、多发、Manfred、耿强、韦坤、喻康奇、Ryana、wayne、JexChan、小汐、吉祥、董铭⋯⋯等等演讲嘉宾和互动嘉宾，嗯，也有两场实在请不到合适的嘉宾，是我自己凑合着干喷下来的。：）

希望你们记得那些可爱的嘉宾们

我们制作了书友会的名片，戴上了笑脸徽标，买了书柜，书友们也捐了一些书，尽管基本上没人借，也没人看（笑⋯⋯）。

希望你还记得我们的名片和胸牌

我们设计并开发了很酷的签到程序和Twitter墙，为了方便以后的联系和现场的交流。

希望你们还记得我们的Twitter墙、酷酷的签到机以及跑在上面，同样酷酷的签到程序

一年多过去了，我们一共聚会11次，一共有接近200位的书友到过我们的现场，你们一直很给力，我们也一直很欢醒。

也希望你们记得那个没有嘉宾的时候独自干喷的傻逼

过去的一年多时间里，我们真切地看到并深入地感受到，UCD/UED的概念在成都本土已经从神秘陌生变得人人皆知、深入人心。

感谢我的搭档古灵，基本上场场必到，也一直给予书友会、给予我个人很多的支持。

感谢帅哥古灵

感谢Shawn、MakLu、Fish、多发、碧海蓝天等兄弟姐妹为书友会作出的阶段性贡献。

感谢各个不同阶段无偿帮忙过的打杂们

感谢新亚苹果过去一年多来为我们的活动所提供免费的场地、咖啡和无线网。

想买苹果产品的话，就去新亚吧

新的一年来到了，在这里说说自己的想法和决定吧。

我不是周立波，没打算把现场主持办成个人脱口秀；而且，我也不是老罗，没打算把UCD书友会办成老妖UCD培训学校。

过去的一年里，不管我们承不承认，UCD书友会的形式和内容，都象是在培训，在布道。就算这真的需要，那么这种形式也该淘汰了。

今年，我希望我们的UCD书友会更重视交流形式上的平等和交流内容上的质量——我们不需要锣鼓喧天鞭炮齐鸣红旗招展人山人海，我们需要的是说出我们每个人，每个设计师内心真切的理想、感受、痛苦、困惑、理解、经验、挫败和尝试。

经过在QQ群（97091847）里对大家意见的征询以及对成都各处咖啡馆的实地考察，我宣布：

2011年每个月第三个星期天下午两点半，我们UCD成都书友会改在民土咖啡馆（春熙路小科甲巷1号第一城B座6楼，电话028-86730998）聚会。

几个小时前，我已经来实地踩点过了

如果来的人比较多，我们在交流室1，投影、分享；如果来的人少，我们在大厅或无烟区，咖啡、私聊。

2011，我们新地方见吧，亲爱的设计师们。

PS：这个地方的基本消费是30左右，嗯，和去年的免费场地免费咖啡相比，也算是个门槛——也许会有朋友会对此安排感觉不爽，这我能理解，但不想解释，如果非要个解释，我会跟你说哥们，不如分享一篇文章给你看看吧，写得挺好的，叫《免费的终结》，顺祝新年快乐。

UCD2010年会回顾之“全民体验”

老妖 — Sat, 27 Nov 2010 07:31:15 +0000

2010年10月30日，杭州浙江大学，UCD2010年会——“全民体验”。

2010年11月21日，成都新亚苹果天府旗舰店，UCD成都11月聚会，分享年会的一些内容。

两次会议，都是和搭档刘思远一起，一次是学习，一次是分享，两个时间节点之间，也一直在思考。差不多一个月过去了，现在写篇回顾也许有点晚，但都是自己消化和思考后的一点东西，期望能给大家提供多一个视角。

纵贯当今国内的UCD/UED界，支付宝首席设计师白鸦无疑是最大的明星，无论是能力、经验、眼光还是个人魅力，都首屈一指。而他也借助UCD这个平台，成功地把支付宝在UED方面的探索、案例乃至理念，做成了引领这个行业的事件。然后，其他公司和团队的精英也都借UCD这个平台云集一堂，引领各行业潮流与风气之先。

UCD是个有意思的组织，一方面草根气质浓郁，没有官方背景，没有领导讲话，没有繁冗拖沓的流程和加入的门槛；另外一方面也有点学院派的孤高比如，完全不鸟各种媒体，自己就组织了全国500多号在杭州开会，貌似要谋反；年会后的资料也不对外分享，倡导面对面交流，分享观点，赤裸裸地喊要资料可以，麻烦拿干货来换。

500人的会场，座无虚席

白鸦的主题演讲是《全民体验》，这个提法大胆，前卫，而且跟鸦总去年在支付宝的一个惊人举动有关——他解散了自己一手搭建的支付宝的UED部门。作为一个性情中人，讲到这个部分的时候，他也一度哽咽。

而如此激进的做法，无非为了把体验做成一种文化，深入到全公司的每个人当中去。一方面把设计部门的人遣散到业务部门去，让每个人成为理解业务才做设计的多面手；另外一方面把用户请到公司来，让用户的需求和体验来决定产品的成败。

强化意识之后，开始打造工具，弄清楚以下问题：

1、通过数据挖掘来对用户作多维度分析，弄清楚用户是谁，有什么特征，又有哪些潜力可以挖掘；

2、通过对点击线程的追踪，弄清楚典型用户的典型路径，遇到了什么样的困惑和障碍，分析他们到底想做什么，然后对症下药的解决问题

3、联系数据背后真实的人，给他们打电话，进行问卷调查、搜集意见反馈，问为什么，为什么失败，为什么未尝试，为什么感觉不好。

有了工具和平台之后，在公司内部则要提供一套相应的绩效考核体系，以确保工作到位，并且对作出贡献的各位员工，各个部门的贡献有公平的评估。

支付宝在这方面做的评估指标有平衡积分卡（包括客户、财务、核心运维能力、创新和学习几个方面），体验度量（包括整体、可用性、功能、差异性等方面）以及体验排行榜（包括流程成功率、客服电话量、用户投诉率等通用指标，出错率、操作时长、等产品的个性化指标等），个人感觉这个部分跟不同公司的考核方法甚至文化相关，可借鉴价值不大。

鸦总演讲最后的结语是：全民体验，任重道远⋯

最后放上鸦总PPT里面的那张开场图来作个总结回顾吧。

用户与界面、产品和市场之间的关系

如果把用户比作太阳，产品比作树，那么用户能感知和接触的其实只是产品的界面，也就是树冠的部分，绿叶的部分。对于一颗树而言，产品的设计起到了决定性的支撑作用，而决定这颗树长多高，长多大，则取决于你产品的市场规划能做多细，用户的价值定位又能找得有多准。用户只看到了绿叶，只通过绿叶来判断这颗树的健康程度和决定自己喜欢还是不喜欢，但决定绿叶的，却不仅仅是树冠（UED部门），所以需要“全民体验”，需要产品的每一个部门都明白用户体验的重要性并为之努力。

－－－－－－－－－分割线下个人观点－－－－－－－－－－

作为一家只有11个核心成员，而且专注于用户体验设计的我们来说，“全民体验”的意义不言自明而且得到了坚定地执行；但对于其他很多公司而言，“全民体验”只能是个美好的愿景。

鸦总解散UED团队的做法，个人认为象征意义大过实际意义，营销价值大过实用价值，这种做法跟他的性情有关，也跟他所在的环境有关，那就是他所在的公司，是创新精神强到神经质的阿里巴巴，马云的阿里巴巴。

我认为支付宝的UED团队在业界有这么大的话事权，跟白鸦和他的团队所作出的努力和贡献有关，更和他背后的阿里巴巴整个商业帝国有关。支付宝贝的成功，首先是商业上模式的成功，其次才是用户体验上的“成功”。我在后面这个“成功”上打一个引号，是因为在我心目中，支付宝的支付体验其实并没有我们想像中的那么好，直到目前，它依旧臃肿繁杂，有诸多不尽人意之处，不光我，我周围的朋友也有诸多抱怨。不过但也正如鸦总所言，人们接触和使用“支付宝”接触的是它的界面，而能影响到支付宝体验的，却不仅仅是一个UED部门。支付宝的关联复杂度，也许注定了它不会成为一个轻应用。

对于目前国内的一般性的IT企业而言，“全民体验”的意义仅在于理念宣讲，为UED部门争取更大的话事空间，如果实际操作起来，估计和毛主席号召知识青年下乡去一样，结果未必不会是两败俱伤乃至自取灭亡。

其实这跟行业的发展现状有关，现在一个IT企业应该有一个UED部门的意识，应该和早期的一个软件部门应该有个美工一样普及了吧？

在一个企业中专业的人做专业的事，通过一套具有扩展能力的流程和方法来协同才是王道，而UED部门是重要但并不一定是最总要的一环，甚至用户体验也不是。每个企业都有自己的传统优势资源和文化基因，虽然用户体验怎么强调都不过份，但并非强调用户体验就能解决一个企业的生存和发展问题——实在想不通这个道理的话，就你想想这是在中国吧，也许你就能想通了。

记得上午的半场后面有个大佬访谈，用研界的老大Angela大姐问腾讯CDC的唐沐，“鸦总已经把自己的UED部门解散了，请问你什么时候解散腾讯CDC”。我承认，这个问法相当具有侵略性，所以大家马上就High了，等着看好戏。唐沐的回答比较温婉，说大家虽然做法不同，但理念一致。

唐沐的演讲四平八稳，有详有略，有宣讲有分享，堪称范本。

一直觉得腾讯作为一家伟大的鸡贼公司，和芮成刚一样属于我们这个民族成功人士的典型代表，呃⋯⋯好吧，跑题了，暂且按下不表，继续聊UCD，UED。

当天上午，腾讯CDC的头儿唐沐带来的演讲是《腾讯的全民用户体验》。我认为他分享的最有价值的观点是UED部门和产品部门的关系——让产品部门感觉“被帮助”，而非“被监察”。而最让我欣赏的，则是在他们在公司内部进行理念宣讲阶段所制作的视频“Tips来袭”，幽默、包容、理念阐述到位、批评点到即止，和他宣传的理念吻合得非常好。

两个人的演讲基本上都是从宏观到微观，从概念到细节，都是思路启发价值大，实战经验价值小——对于小的创业团队而言是这样。就好象大户人家的管家在跟你谈银钱应该如何摆放，仆人应该如何管理的时候，你作为一个普通人家，是不会觉得这些经验对你有太多帮助的——彼此的痛处其实不太一样。

毕竟众口难调，作为理念的部分能统一成这样已经很不错了，毕竟有不同口味和体味喜好的，还可以参加下午的各种工作坊。这篇先写到这里，改天抽时间再来写写下午参加周陟周董的《移动设备的高效能产品设计》的一些感受好了。

UCD2009年会相关博文：

UCDChina彩程系列报道之（一）从用户出发

UCDChina彩程系列报道之（二）为什么UCDChina那么火

UED/UCD设计资源汇总 3#

yx.shawn — Tue, 20 Apr 2010 02:37:10 +0000

一个月没有把@ucdcn的推汇总出来了。实在惭愧，一来是因为当时写的存储推的数据库出现了一些问题，导致部分推不能被在汇总中显示，二来是因为有朋友反应推的频率太高会被洪水淹没，因此现在减小了推的频率。下面的关于UCD/UED的自3月初的总结。为了大家的检索方便，接下来空余时间我做一个搜索推库的功能，敬请期待^_^

@ 2010-3-3 11:25
创新的简历可能会帮助你找到更好的工作。甚至有的人把 #infographic 的展现方式都运用其中。http://is.gd/9zBQQ
@ 2010-3-3 11:27
#iphone #code #web #ued 十分十分有用的代码片段有助于你为iPhone设计更友好的界面。http://is.gd/9zCkP
@ 2010-3-3 11:31
#os #jquery “谁在你的网站上？” 有人写了一个开源的"who is online" 的小插件，功能蛮齐的。http://is.gd/9zD11

@ 2010-3-4 10:1
#design #ued Web设计中的颜色理论http://is.gd/aaHRE
@ 2010-3-4 11:38
#ued #ucd #web 50个十分漂亮简洁的网站设计欣赏。颜色越是用得简单，设计的时候就越需要考虑布局排版。大家可以围观 http://is.gd/ab0nI
@ 2010-3-4 12:18
#design #ued #web 2010年网页设计趋势预测。 http://is.gd/ab7XZ
@ 2010-3-4 12:34
#jquery #ued 未被众人所知的一些jQuery的隐藏技能 http://is.gd/abaU0
@ 2010-3-5 10:7
#ued #tool 十个有用的网站分析工具http://is.gd/ahjT9
@ 2010-3-1 9:24
#design #case 国外设计师本周搜集的一些很棒的设计 http://is.gd/aEByt
@ 2010-3-1 9:36
#wallpaper wow~简直是太漂亮了，这里有80+地球上最漂亮的地方的照片。其中部分做了HDR的处理 http://is.gd/aEFmy
@ 2010-3-1 9:45
#ucd #ucdchina 社区上出现一篇文章，说到安慰用户的一些情感设计。http://is.gd/aEHSL 这让我想到了前些时间看到的纽约十字路口人行道的按钮其实是不会让红绿灯改变的，但是没有取消的原因完全是为了安慰行人。http://is.gd/aEHSL
@ 2010-3-1 9:51
#ued #jquery #js 45个有用的jQuery技巧及工具 http://is.gd/aEJEU
@ 2010-3-2 13:3
#jquery 这个世界什么奇怪的人都有，例如这个，像书的翻页角一样的jQuery插件，虽然不实用，但是的确很sexy http://is.gd/aJj7E
@ 2010-3-2 13:5
#web #webapp #ued 如果你想设计一个Web Application，这里有20个很棒的20个We APP的接口设计供你参考。http://is.gd/aJjeo
@ 2010-3-2 13:9
#flash #jquery #chart #ued 如果你要设计一个带有图表的网站，首先想到的是图表用flash/flex来展现。但是若在不支持flash的环境中怎么办？这里有5个顶级JS的包帮助你 http://is.gd/aJjqB
@ 2010-3-2 13:25
#web #ued 50个设计很漂亮的黄色网站也许能给你不少灵感 http://is.gd/aJkbS
@ 2010-3-2 13:43
#bizcard 设计名片？背面总是一件痛苦的事儿。这里有一些双面的名片设计的案例供给你参考 http://is.gd/aJl3z
@ 2010-3-3 12:26
#ucd #ued #web 无论你是图像设计和体验设计的高手还是菜鸟，这篇文章总结的12个标准屏幕设计模板都会帮助你把经验固化。文中还包含了大量的最侍实践 http://is.gd/aLnIH
@ 2010-3-2 9:38
#ucd #flash 请饶恕我的推中不常包含中文网站。的确是我实在不知道哪些是值得拿出来推的，直到我发现这个：http://www.iloveg3.com/ 中国移动的G3宣传概念网站，值得一看
@ 2010-3-2 9:40
#china #design 上一推推了一条中国设计的概念网站，其实SM在前些天刚做了一个关于中国从操到创造的设计大收罗： http://is.gd/aTDAA
@ 2010-4-4 9:18
#visual #design 一个黑色骚包的设计网站http://is.gd/b91HZ
@ 2010-4-4 9:22
#design #ad 我也不记得过去是在哪个推上推过一些很有创意的广告牌设计，没有关系，今天补上更多的。这些广告都突破了传统广告牌的设计http://is.gd/b91WN
@ 2010-4-4 9:25
#ads 我终于找到这个广告了，很早前看到的，这应该是BBC推出的一组广告中的一个，我过去看到的不是这个。广告很巧妙地利用了街口转角处的特点设计了这组广告以传达广告的意义http://is.gd/b9299
@ 2010-4-4 10:5
#ad 我把刚刚推的那组BBC的户外广告集结在一起了，有兴趣可以看一下 http://is.gd/b94gs
@ 2010-4-4 16:18
#jquery #ued 很漂亮的图片注释显示器插件
@ 2010-4-4 16:19
#jquery #ued 很漂亮的图片注释显示器。http://is.gd/b9ngn
@ 2010-4-2 17:0
#jquery #js #design 一个很实用的Notify插件http://is.gd/bgMAp
@ 2010-4-2 17:4
#jquery #js #web 一个动态Tab的插件，蛮有意思的http://is.gd/bgMOb
@ 2010-4-2 17:8
#jquery #js #web 很囧的jquery动态插件http://is.gd/bgN3f
@ 2010-4-2 17:15
#jquery #js 现在蛮流行大图片在网站的背景上的使用，这里有一个现成的jquery插件 http://is.gd/bgNvn
@ 2010-4-2 20:5
#grid #css #web 15个有用的css表格系统供你设计选用http://is.gd/bqRUa
@ 2010-4-2 20:7
#webapp #photo 30个照片在线编辑网站 http://is.gd/bqS5l
@ 2010-4-5 9:31
#design #ipad 用色蛮漂亮的ipad天气预报设计 http://is.gd/buMyG
@ 2010-4-5 9:33
#photo 30张很漂亮的中国主题宽屏幕墙纸。 http://is.gd/buMFn
@ 2010-4-5 16:22
#infographics #design 太棒了，找到一个infographics的大集合： http://is.gd/bvcy2
@ 2010-4-5 16:32
#ucd #ued #web 50个漂亮的导航条设计 http://is.gd/bvdct
@ 2010-4-5 17:26
#js #jquery #extjs EXTJS的最大优点就是做数据展示，但是EXTJS对于jQuery而言，过于臃肿，如果我们使用的框架是jQ，同时希望做很好的数据展示，这40个jQ插件也许可以帮上忙http://is.gd/bvgPu

我们的原型设计方法

farthinker — Mon, 22 Mar 2010 09:40:35 +0000

根据Standish Group的“Chaos Chronicles Report ”，大约 66% 的软件开发项目不是失败，就是超出预算、超出项目时间，或是交付缩水的功能。

项目失败或亏损的前三大原因为：

缺乏使用者的参与
需求或规格不完整
需求或规格变更

白大哥在上一回的《我们的UED设计流程及方法》中也提到，一些需求管理工具或者上百页的文档已经不合时宜，不能作为我们跟客户讨论交流的介质和核心。所以我们需要制作原型，用来提高与客户沟通的效率、让客户参与到设计中来并且帮助他们找到核心需求。

传说哥经常说，使用工具是人和动物的根本区别。有很多工具可以帮助我们完成原型设计：

纸和笔

纸和笔是最简单也是最常见的原型设计工具。与客户、与同事沟通的过程中，不用打断思路，随手拿起纸和笔，就能表达出我们的心中所想。很撇托、很强大……

Visio

在Axure进入人们的视野之前，Visio是产品原型设计的一个常见选择。Visio的适用性非常之广，从网站界面、数据库模型，到平面布置图到工艺流程图，Visio都提供了相应的元件库和模板来进行快速创建。

Fireworks/Photoshop

视觉设计师出身的项目经理，很多时候喜欢直接使用图形处理软件制作产品的原型。

Balsamiq Mockups

一个基于Adobe Air的手绘风格原型制作工具，控件库很丰富，而且可以自定义控件外观。导出格式为pdf和png。

Mockflow以及其他在线原型工具

与Balsamiq Mockups相似，各有各的特色，例如Mockflow的原型模板是它的一大特色。这些工具的导出格式也是pdf和png。

前面我提到了，原型需要帮我达到的目标有两个：

提高与客户沟通的效率，降低迭代周期
引导客户参与设计，找到他们的核心需求

刚才介绍的原型制作的工具大多都能实现第一个目标，但是这些工具的输出物通常是一张png图片，对客户来说，它也就是一张图片而已，大多数客户很难透过这张图片去思考其中的逻辑。这个时候我们的主角Axure RP就该出场了。

Axure RP Pro是美国Axure Software Solution公司的出品一款原型制作软件。Axure的发音是“Ack-sure”，RP则是“Rapid Prototyping”（快速原型设计）的缩写。顾名思义，Axure RP能够帮你快速而有效的建立产品的prototype。

Axure RP上手容易，操作简单，不需要任何技术背景，大多数人都能在一天之内掌握它的使
用方法，所以它能很好的实现上面提到的第一个目标；另外，Axure RP的事件机制能够模拟大多数Web应用中出现的交互行为，并且它的输出物是html，客户能够直观的通过“使用”原型，来想象产品的最终形态，思考原型是否反映了自己的真实需求，这样客户能够自然的参与到设计之中，从而实现了原型的第二个目标。

通常我们将原型设计分为两个阶段，“低保真原型”和“高保真原型”。“低保真原型”的作用是跟客户确认产品的需求和业务逻辑，所以低保真原型通常会很简陋，甚至我们会故意做的很简陋，比如我们会使用一些手绘风格的控件库，这样可以避免客户提出一些不合时宜的问题；而“高保真原型”会高度仿真产品的最终形态，是用于给客户验收的最终产物，另一方面也可以作为产品开发的标准。使用Axure制作高保真原型的时候，几乎能做到跟开发后最后形态一摸一样，包括视觉和交互行为，这一点是其他原型工具很难做到的。

使用Axure RP制作高保真原型

当我们启动一个用户体验设计项目的时候，我们第一项工作并不是原型设计，在之前还需要很多准备工作：在现场跟客户讨论，了解产品的业务逻辑，有条件的话还会对产品的直接用户进行一些访谈，了解用户的日常工作。紧接着回到公司内部，针对产品的信息架构进行团队头脑风暴，然后项目经理会整理出信息架构的脑图，脑图会作为成果物交给客户确认……在这一系列的准备工作之后，我们才会开始制作产品的原型。

按照我个人的习惯，在低保真设计之前我会用纸笔画一些草图，然后再根据草图制作原型。这样做的好处是，我能够最快的表达并验证自己的想法。

另外，我会使用一些Axure控件库来提高制作原型的效率，例如：Better Defaults和Sketchy Axure Widget Library针对一些周期较长的项目，我们会整理一些Axure RP的视觉规范库，提高维护以及二次设计时的效率,并且使用shared project功能通过SVN来管理Axure RP的源文件，方便多人协作设计以及源代码的备份和版本控制。

UED/UCD设计资源汇总 2#

yx.shawn — Mon, 01 Mar 2010 11:38:12 +0000

以下为2010年第十一周的设计资源汇总索引。

随时跟进最新的设计资源分享。请越过长城follow UED UCD设计资源汇总推 http://www.twitter.com/ucdcn/或者访问国内镜像：http://www.digu.com/ucdcn/

@ 2010-2-4 15:44
让大家久等了，今天更新了一下发送分享的工具，继续向大家分享互联网上发现的关于 #UCD #UED 等前端技术的讯息。

@ 2010-2-4 16:5
#ucd #ued 网页表单的提示和验证的最佳实践。推荐阅读。 http://is.gd/98BOY
@ 2010-2-4 16:11
#ucd #ued #css #js #jquery #css3 50个十分有用的网页的视效参考及技术 http://is.gd/98D9z
@ 2010-2-4 16:21
#code #ued #ucd 一个很不错的像Twitter登录框一样的 #jquery 代码，可以用于设计的时候参考 http://is.gd/98EXH
@ 2010-2-4 16:30
#mobile #tool 根据网站声称，84%的美国人（也许中国更多）现在拥有自己的移动电话，但是不幸的是这些电话并不能很好地兼容现在的网页，如果你想让这些用户很好地用手机访问你的网站，也许http://is.gd/98Gcs 提供的10个工具可以帮上忙
@ 2010-2-4 16:38
#tool #mac #designer 如果你是一个图像设计师，那http://is.gd/98HJi 里分享的MAC和WEB上的小工具可以帮助你更好的工作或生活：）
@ 2010-2-4 17:11
#ued #ucd 有一天，你上了一个网站，看到天花乱坠的介绍却永远找不到下载按钮是一件很尴尬的事。如何设计Call-To-Action按钮？http://is.gd/98Nq9 会给你25个例子启迪你：）
@ 2010-2-5 11:21
http://is.gd/9cJOM #mobile 移动互联网上未来的应用大战，到底什么平台的收费还是免费软件最受欢迎？可以看一下这个报告
@ 2010-2-5 14:32
#design #presentation #inspire这里有各种极具创意的，漂亮的，独一无二并且最富有灵感的设计，我们的目的不是希望单纯跟随某种趋势，而是激发出你的想象力，从而创造出属于自己的独特设计，毕竟，你的网站代表了你个人的品牌。http://is.gd/9dkyu
@ 2010-2-5 15:17
#photo #BW 这里有31张很不错的黑白照片，很不错 http://is.gd/9ds3N
@ 2010-2-5 15:35
#OS #tools 开源的 #subversion 在线浏览器 http://is.gd/9dv9E
@ 2010-2-5 23:40
#design #blue #website Color wheel pro说: 蓝色是天空和海洋的色彩。它象征着信任、忠诚、才智、信心、智慧、信仰、真理与天堂。这里推荐一些蓝色系列的优秀网站，看其中蕴藏着怎样的宁静、稳重或是柔软。http://is.gd/9fcD6
@ 2010-2-0 16:30
#iphone #design #ucd 35个漂亮的iPhone应的网站设计。有在做iPhone应用的朋友可以看一下 http://is.gd/9mVaJ
@ 2010-2-0 16:36
#ucd #design 有时候你的网站想改版，如果直接来个500错误或者404错误一定会让你的Fans很尴尬。就像店面要来一个敬请期待一样，网站有时候也需要。这里展现了25个漂亮的Coming Soon的例子 http://is.gd/9mVVR
@ 2010-3-1 16:50
#wallpaper 最新SM社区发出2010年3月日历壁纸，好看好看！大家快去抢吧http://is.gd/9r9tK
@ 2010-3-1 16:56
#ucd #ued #design 很多国内的设计师事实上都在拷贝粘贴国外的很多设计，或者拼凑素材，这大大地影响了一个网站设计的元素一致性，这里有篇文章对网站的设计一致性作了一些评论http://is.gd/9ram5
@ 2010-3-1 17:2
#wordpress 如何把PSD直接转换成Wordpress的主题？切图？额~ 现在网上有一个免费的项目，用于让你在不编码的情况下，从PSD生成WordPress的主题http://is.gd/9rbou
@ 2010-3-1 17:20
#wireframe #ued #ucd 免费的WebUI的草图包，有兴趣的同学可以下回去做草图的时候玩 http://is.gd/9reg6
@ 2010-3-1 17:24
#job #it 哪些技术你需要补充了？这里有篇文章统计了一下技术的趋势，这对于无论找工作还是自我完善都是很有帮助的 http://is.gd/9reLP
@ 2010-3-1 17:54
#logo #design 简洁的logo并不代表简单。这里有30个设计超级简单的LOGO以事实证明这一点：http://is.gd/9rjwd

UED/UCD设计资源汇总 1#

yx.shawn — Tue, 09 Feb 2010 07:05:19 +0000

以下为2010年第六周的设计资源汇总索引。

随时跟进最新的设计资源分享。请越过长城follow UED UCD设计资源汇总推 http://www.twitter.com/ucdcn/或者访问国内镜像：http://www.digu.com/ucdcn/

UED/UCD设计资源汇总第一辑

2010-02-05 04:24:33

UCDCN: #ucd #ued #en 昨天分享了怎么画草图，今天来个视频教程：http://is.gd/7JxCq

2010-02-05 03:50:39

UCDCN: #ued #ucd #mobile 最近，互联网在向移动终端转化的趋势日益凸显。但是移动设备在很多方面设计是和网站设计大不一样的。那我们如何设计下一代移动设备的应用呢？http://is.gd/7Js7J可能会给你一些灵感

2010-02-05 03:45:33

UCDCN: #ued #ucd #css 是不是为#IE 不能支持“现代浏览器”的方法而苦恼？这里有篇文章，大量示例教你如何把IE“装”成现代浏览器。CSS Hack的同学值得一看：http://is.gd/7Jrkb

2010-02-05 03:42:18

UCDCN: #ued #ucd #js #svg 简直太强大了，在线SVG编辑器 http://is.gd/7Jr06

2010-02-05 02:46:15

UCDCN: #ued #en 鱼与熊掌不能兼得。有时候你在设计产品的时候是不是什么都想放进去？于是设计出来的不是网站，而是一个瑞士军刀。也许你正因此事烦恼，或者未来可能遇到这样的烦恼，建议看一下这篇文章：移除你的功能 http://is.gd/7JhrA*

2010-02-05 02:43:53

UCDCN: #ucd #ued #en 7个你应该用于网站设计的工具 http://is.gd/7JhdM 不是简单的工具，里面有大量易用性测试的在线工具

2010-02-04 09:05:45

UCDCN: #ucd #ued #en 10个关于设计网站footer的技术 http://is.gd/7FK6e

2010-02-04 08:58:59

UCDCN: #graphic 让这个推活跃起来吧，来个幽默点的。 #MIT 的一个家伙用Windows的画笔画出来的一个网站： http://www.squicky.org/

2010-02-04 08:54:01

UCDCN: #ucd #ued 如果你想设计纸制风格的网站？这里搜集了大量的关于这方面的素材和方法： http://is.gd/7FHUZ

2010-02-04 08:51:03

UCDCN: #ued #ucd #ui 有人说，创新就是把睡过一个月的床单，翻过来，抖抖，铺上，再睡。我很喜欢这种观点，例如这里就有25个UI设计的模板可以供你参考，很实用。http://is.gd/7FHxf

2010-02-04 08:46:50

UCDCN: #ued #wordpress #css CSS Sprites用得好是很好用的，例如这里就有一个例子：http://is.gd/7FGWI把CSS Sprites用于显示日志的发表时间。

2010-02-04 08:31:58

UCDCN: #ued #css3 #css #animation 简直太酷了，47个超强CSS3的动画示例帮助你设计21世纪网站^_^ http://is.gd/7FEOE

2010-02-04 08:28:45

UCDCN: #ued 昨天，我们说到了色彩理论在网页设计里的应用。今天专门搜罗了“黄色” 网站给大家qio一下http://is.gd/7FEqx

2010-02-04 08:27:50

UCDCN: #graphic #design #wallpaper 太安逸了，49张高清宽屏桌面 http://is.gd/7FEfG

2010-02-04 08:24:44

UCDCN: #ued #ajax #js 来来来，十分有用的js库大搜罗 http://is.gd/7FDQk

2010-02-04 08:18:48

UCDCN: #ued #en 我们很常见到的是选择日期的控件，但是你有常见过选择时间的控件吗？发现了一个好东西，虽然颜色设计不怎么样，但是这种创新的输入时间的方法，的确可以帮我们打开思路 http://is.gd/7FCOa

2010-02-04 08:14:19

UCDCN: #ued #en 如果你是交互设计的入门级的选手，或者正在处于高速成长阶段的童鞋。 http://is.gd/7FC2Y这篇文章收集了大量关于网站草图设计的指南、工具和资源。

2010-02-04 08:12:16

UCDCN: #ued #en 我们说最可悲的事情就是上一个网站，看介绍看得热血澎湃，却无论怎么都找不到注册按钮。预防这种事情发生在你设计的网站上，可以首先参考一下这些网站的注册按钮设计： http://is.gd/7FBBH

2010-02-04 07:58:06

UCDCN: #ued #jquery #en 网站上使用slider可以在同一个区域获得更多的显示空间。例如门户网站的滚动新闻，或者公司网站上的最新案例，这里搜罗了25个十分棒的基于jQuery技术的Slider http://is.gd/7Fzis

2010-02-04 07:56:16

UCDCN: #ued #design #en 一张图片的色彩元素之间，不仅仅有颜色间的搭配，还需要考虑颜色间的对比度。由于网站很多时候还要考虑读者的阅读，对比度在网站设计比一般设计更需要专门考究。 http://is.gd/7FyOn这里讲了很多关于网页设计中的对比度设计原理。

2010-02-03 03:13:56

UCDCN: #design #ps 大量PS的资源。包括高分背景图，psd源文件，教程，模板，等等 http://www.psdgraphics.com

2010-02-03 02:55:04

UCDCN: #ued #en #design 颜色理论，SM出品的，必是精品。不会配色？或者不知道颜色背后的故事，推荐阅读。http://is.gd/7AFzT

2010-02-03 02:47:37

UCDCN: #ued #icon #design 漂亮图标怎么设计？这里有5个十分棒的icon设计教程。http://is.gd/7ADWB

2010-02-03 02:39:49

UCDCN: #design #en 又是一个好网站，上面有大量简洁设计的桌面#wallpaper 。很清爽很漂亮。http://simpledesktops.com/

2010-02-03 02:38:21

UCDCN: #ued #en 好嘛，再来一个#css3 的资源，用CSS3做的进度条，效果不错。http://is.gd/7ACWt

2010-02-03 02:32:06

UCDCN: #ued 如果你要向你的客户发送带#CSS 的电子邮件，但是由于不同的客户端软件对CSS的支持是不一样的，那这篇文章一定可以帮上你的忙 http://is.gd/7ABoe

2010-02-03 02:26:40

UCDCN: #tool #en 用#Android 并且同时使用Wordpress写博的童鞋们终于有福音了。Android上管理Wordpress的工具发布：http://is.gd/7AAVE

2010-02-03 02:22:44

UCDCN: 八个Logo的设计创意，点亮你的创意。额~ http://is.gd/7AAlR#design #en

2010-02-02 11:34:03

UCDCN: 做图表展示？最好的办法是使用 #flex #flash 技术，因为FP的runtime在图形表现方面的确很棒。但是总有一些人不愿意使用，也许他们考虑设计的程序在#ipad 上运行吧。总之，http://is.gd/7xzPp这里搜罗了一些用JS写的图表程序 #ucd #js

2010-02-02 11:19:00

UCDCN: 一堆漂亮的Mac APP设计网站，看一下 http://is.gd/7xxwt很容易发现2009-2010的网站设计风格，大图在中间^_^ #ucd #mac #design

2010-02-02 11:12:42

UCDCN: 这个好这个好，又发现一个好东西： http://is.gd/7xwCO网页版本的RichText Editor大搜罗，根据不同的时候选择不同量级的Editor。FCKEditor不是唯一选择了:) #ucd #js

2010-02-02 09:42:05

UCDCN: 这个效果不错：http://is.gd/7xhKC在不用flash技术的情况下实现鼠标移动上去自动放大的展示图片。建议童鞋看下里面的Demo，很不错 #ucd #js #jquery

2010-02-02 09:29:58

UCDCN: 网站选色搞不定？ 25个超级好用的工具帮你选色^_^ http://is.gd/7xhg6#ucd #en #design

2010-02-02 09:27:32

UCDCN: #CSS3 好玩的东西不断，网上就是存在这些无聊的先驱者，不怕别人说他们无聊，把CSS3 当玩具，不过不可否认的是，他们玩出了来少有趣的东西： http://is.gd/7xgP3#ucd #en

2010-02-02 09:24:45

UCDCN: 好嘛，让我们科学一下。关于如何增加购买转化率的文献是相当稀少的，很多文章，包括Alibaba UED团队的童鞋们发表的文章，大多都是根据他们自己的观点。而这里： http://is.gd/7xgfY就是真正的罕见的这方面的文献（论文） #ucd #en

2010-02-02 09:19:14

UCDCN: 好嘛，我晓得你们就是喜欢免费的东西。送上iPad的GUI PS 分层设计源文件。 http://is.gd/7xfzb #iphone #design #en

2010-02-02 09:08:36

UCDCN: Google 在09年1月29日宣布放弃ie6等过时浏览器了 http://googleenterprise.blogspot.com/2010/01/modern-browsers-for-modern-applications.html

2010-02-02 09:06:01

UCDCN: 刚刚说到简洁设计，于此同时，你还可以看到这40个很漂亮的企业网站：http://is.gd/7xdAs他们不一样的是，大多使用了很绚很大的图片。 #ucd #en

2010-02-02 09:04:23

UCDCN: 现在的网站越来越倾向于酷炫的设计。但是其实简介的风格从来不过时。下面是36个结构超级简单的网站设计： http://is.gd/7xdoO#ucd #en

2010-02-02 08:59:57

UCDCN: 国内很多网站都滥用图片素材，例如是提到网络，总是会放出一张外国老拿着电话的照片。而事实上，使用照片是十分有利于影响用户体验的，这里有文章说明10种你可以使用图片以影响用户体验的例子：http://is.gd/7xcwl#ucd #en

2010-02-02 08:56:16

UCDCN: 设计iPhone上看的网站，建议可以先看一下这篇文章 http://is.gd/7xc9a里面有大量关于iPhone所支持的html, CSS, js的情况 #iphone #ucd #en

2010-02-02 08:54:34

UCDCN: 简洁的Ajax框架？虽然你有jQuery, ExtJS, YUI 但是毕竟这个世界上总有人喜欢不一样的： http://is.gd/7xbK3Check it out:) #ajax #en

2010-02-02 08:50:21

UCDCN: 为找工作做一个在线简历？但是不知道怎么设计比较酷？也许这5个漂亮的在线简历模板会帮上忙 http://is.gd/7xbfy#design #en

2010-02-02 08:48:04

UCDCN: jQuery 1.4.1 的中文翻译 http://is.gd/7xaWI#ucd #jquery #zh

2010-02-02 08:47:19

UCDCN: 用jQuery 做电子表格？这是jQuery Sheet http://is.gd/7xaQp#ucd #jquery #en

2010-02-02 08:46:04

UCDCN: 15个有关对比表格的设计的技巧 http://is.gd/7xaDq#ucd #cn

2010-02-02 08:34:36

UCDCN: 用Ps画出更好更真实的照片阴影 http://is.gd/7×8T6#ucd #en

2010-02-02 08:33:22

UCDCN: 25个创意的页面Footer设计 http://is.gd/7×8HA#ucd #en

2010-02-02 08:19:36

UCDCN: CSS3简介 http://is.gd/7×6B7