标签归档:产品设计

Axure动态面板的使用

1、什么是Axure的动态面板
按照
Axure官方网站的解释 :动态面板控件(Dynamic Panel)可以让你实现高级的交互功能,实现原型的高保真度。动态面板包含有多个状态(states),每个状态可包含一系列控件(你可以把一个状态理 解成一个独立的页面)。任何时候都只有一个状态(页面)是可见的,或整个动态面板可以被隐藏。结合交互动作,可以让动态面板的状态进行隐藏、显示和改变。 像添加其它控件一样,可以在控件面板中拖放动态面板控件到线框图中。
简单的说,动态面板就是展示在页面不跳转的情况下所能实现的交互状态。而动态面板的每一个状态都可以看作是产生的一个新的交互结果。

2、Axure的动态面板可以用来做什么
1)tab式页签的切换效果:Axure的官方给出的实例就是这个,AlipayUED的同学 按照官方给出的做法制作了一个3tab的原型,不愿看英文说明的同学可以直接参照这篇博客。
2)鼠标触发式和点击触发式的下拉菜单效果:这个可以结合Axure的默认组件中的“垂直菜单”、“水平菜单”来实现,常用于导航的原型制作。
3)鼠标触发式的浮窗效果:类似“Alt”的效果,常用于浏览提示和触发式广告。
4)JS的鼠标点击弹层效果:这个是目前使用被广泛使用的效果之一。
5)注册表单中的根据焦点判断提示的效果:当焦点在输入框内的时候提示该表单栏目填写规范,当焦点离开输入框的时候根据填写的结果提示正确或者错误原因,这个需要动用高级设计交互编辑功能结合Axure的逻辑条件和设置变量功能来实现。
….and so on…

3、如何使用Axure的动态面板
1)动态面板属于Axure的一个组件,在组件栏中选中它,直接拖到你希望它出现的位置。不用担心,即使在添加完状态之后它的位置也是可以随时改变的。
2)在动态面板上点击右键——编辑动态面板——管理动态面板状态。在弹出的窗口里输入动态面板的标签名称(默认是Unlabeled)、添加新的状态。当然,也可以在界面的右下角找到“动态面板管理”模块来对动态面板进行操作。
友情提示:
a)默认的动态面板的状态是显示(蓝色),我们可以把他设置成隐藏(黄色)。
b)状态页面中的蓝色虚线外框表示动态面板的边界范围,超过这个边界范围外的内容在最终生成原型时将不可见。
c)为了不影响其他交互的制作,可以点击“动态面板管理”模块右侧的淡蓝色小方块在隐藏或显示之间切换。或者,你可以在顶部的页面名称(如Home)上点击鼠标右键,选择右键菜单全部隐藏或全部显示,可以隐藏或显示页面中所有的动态面板。

3)双击添加完的动态面板状态(State1、2、…),会在Axure的工作区打开一个新标签。现在,把这个新标签当作是一个全新的页面来设计就OK了,不过,记住不要超过蓝色虚线外框。
4)给动态面板添加交互。Axure5.5中常用在动态面板上的交互行为包括:Set Panel state to State(设置动态面板的状态切换)、Show Panel(显示动态面板)、Hide Panel(隐藏动态面板)、Toggle Visibility for Panel(切换动态面板可见属性)、Move Panel(移动动态面板到一个设定的位置(x*y))、Bring Panel to Front(将动态面板置于最前)。交互行为的添加与添加其他组件的交互一样,没有什么好解释和介绍的。
5)生成HTML发布到web上、生成CHM分发给其他团队成员、建立Axure协作共享、….
友情提示:
a)使用
Axure汉化版本 会让你使用更轻松,虽然汉化的还不是非常完全,但是对于英文不好的同学来说已经是莫大的帮助了,向汉化的平生一笑 同学致敬!
b)如果看Axure官方的使用说明很费劲,可以参考目前陈良泳同学翻译的
快速原型设计 ,翻译质量很不错!
c)从Axure5开始,可以创建自己的组建库和导入别人做好的组建库了,官方提供了一套
雅虎的组件 ,个人觉得已经完全够用了。
d)模块和组件是2个完全不同的概念,模块的后缀是.rp而组件的后缀是.rplib。模块和组件之间是可以相互转化的,你可以利用组件去创建一些自己常用的模块如网站头部、底部等;你也可以把模块里的内容分拆成组件单个使用。
e)在生成chm格式的时候页面名称不要使用中文,中文名称的页面在chm里会显示成乱码。

宜家的用户体验

离家3分钟路程就是宜家,所以经常去逛而不买东西,偶尔去逛加吃东西而不买东西。去逛因为宜家还有宜家的产品的设计都堪称典范,从工业设计到web设计有许多共通的地方,由宜家可以借鉴很多东西到web设计上来;不买是因为宜家的东西确实是很大很贵但是又很巧。

1、地方很大、东西很贵、设计很巧。
宜家的官网上赫然写着“低价格是宜家理想、商业理念和概念的基石。所有的宜家产品背后基本的思想就是低价格会使种类繁多、美观实用的家居用品为人人所有”,但是现实中按 照我家附近那宜家的标价来看,我显然还属于没有过温饱线的尚不被称作于“大众”的那一类人。不过,宜家一块钱一个的面包圈味道确实很不赖,还有花一块钱买个杯子之后自助的饮料。抓住了顾客的胃同时也抓住了下一代,宜家的儿童区域很是人性化,类似的设计在肯德基和麦当劳里也有出现,进一步增强了用户的黏性。

2、单向通道 商品非线性重复
单向道设计的好处是可以把顾客的行程固定在一个设计好的路线里,使顾客按照既定的方式被引导,可以最大程度的浏览店里的产品,从而达到商业目的。宜家的单向通道S型购物路线设计又是一个经典的引导设计,但是与之前介绍的“
小便池里的苍蝇”不同之处在于,宜家的这种引导设计属于限制性引导。
太多的自由和选择往往会令人们不知所从,在某些时候这就成了一件坏事,比如一进超市发现中间是空的,四周都是口,反倒不知道怎么开始转悠了。在这些情况下,通过有意识地加入一些限制因素,反倒能使人们在进行某些活动或使用产品时感到容易。有意设计的限制因素可以用来帮助人们减少在使用时的操作错误,一般分为物理的、逻辑的、文化的三种类型。在宜家的购物路线设计中运用了物理的和逻辑的2种限制。建筑物内的墙或隔断就是物理性的限制,因为就算是你想随意走动,你也会被墙挡住的。而地面上的箭头则是一种逻辑上的限制,它只是利用了人们知道箭头能表示正确的方向这一知识来向人们提示正确的行走方向,它无法强制你非得按这个方向走。在宜家商场中,不仅是每层内是这样的设计, 它从整体上来看也是这样的。当你来到商场入口处登上电梯后,你就会被一直送到最高的第三层。尽管中间有一次停留,不过那仅仅是个休息平台,你从那里是无法 到达第二层的。当你逛完第三层并从它的出口步行下到第二层后,你来到的是第二层的入口。你必须从这里一路走到其出口,然后才能下到第一层。

但是,这类的限制设计也是有弊病的:如果我已经知道我要购买的产品在什么位置,我显然不愿意再在限制中随着人流慢慢转悠,我需要以最快的途径去到我的目的地;如果我是一个不喜欢听话的用户我可能会逆着人流来走,这样你会发现,我靠,我走不出去了!
在对这2个问题的解决上,宜家采取了利用捷径横贯S型之间和明确醒目的指示牌的方法。不过,大家容易迷路也正是因为这些快速通道。快速通道的开口大小和明显程度就成为了很重要的因素,开口大小过大就会被误认为是主要购物路线(S弯),明显程度过低就会难以被发现使用。我想更好的利用地面指示标志来标识,还有利用在快速通道开口来用路牌标识也会有较好的效果。但这样效果太强的话会给人以指令感,会破坏购物的随意性心情。

3、做到极致的导航系统
每隔一段的醒目的黄色指示箱和下面的指示牌、S型的路线图、穿插S型之间的捷径、触手可及的铅笔和购物清单记录单页、纸质量尺、就连服务员的服装上都印有“我能提供帮助”…宜家绝对算是把导航系统做到了极致。

4、商品构造模块化
宜家的家具基本都是组合的,可拆装,映射到web设计上就是使用“模块化”设计。模块化设计的好处就是可以组合,相对独立,需要的时候就加上,不需要的时候可以部分下线,机动灵活。在产品设计的初期,我们把需求分解成各个模块,然后通过需求讨论会来确定哪些是主要模块,哪些是目前我没法实现的模块,哪些是 开发周期很长的模块,然后整个产品的层次和进度就出来了。

最后,宜家的设计理念“Design is making function beautiful”,设计就是美化功能?对于这个说法一时还没搞明白,因为好的设计应该平衡功能和美观,且强大的功能很多时候自身就非常有美感

使用用户的语言满足用户

场景回放:
做一个CRM系统,产品设计师在整理完销售部门提出的需求之后,开始制定CRM系统的默认字段,产品设计师把这份默认的字段邮件给销售部门征求意见。
销售部门同事看到邮件一头雾水,于是产品设计师解释 “所谓的字段就是拿来判定系统中的某些元素是否就是这些元素的一种手段,在技术的眼里这些就叫做字段,当然我们也可以把他叫做属性 ”;销售人员依旧一头雾水的回答,“我们就是想实现资源和日程共享”;产品设计师觉得自己没有讲明白,于是补充到,“这么说吧,在商店中有很多产品都叫牙膏,那么,你怎么去判断哪种牙膏是你需要的那种呢?你可以从商标、外观等几个维度来限定这个牙膏,于是得到你自己想要的那种”;销售人员还是茫然,于是,产品设计气急败坏,销售人员无奈,整个征求意见陷入僵局…….
在这个场景中,作为产品设计人员一直没有对他的用户(销售人员)使用属于销售人员(用户)的语言,于是整个沟通显得非常失败。

《可用性工程》等以用户为中心的设计书中“使用用户的语言”是被反复提到的一条。“作为以用户为中心的设计的一部分,用户界面中的词汇应当使用用户的语言而不是面向系统的 术语”。对话要尽可能地使用用户的母语而不是外语,当然,对用户“语言”的考虑应当不仅仅局限与界面中的文字,也要包括一些非语言元素如图标等。
同时,使用用户的语言并不意味着必须将界面中的词汇限于一个小的常用词汇集,恰恰相反,当用户群使用应用领域的专门词汇时,界面中也应该使用这些专门词汇。在一个专业性的行业网站的界面中也应该使用该行业的专门词汇,针对该网站的受众,使用特色词汇要好于使用普通词汇。

tony曾经写过一篇文章并创造了一个词汇“技术性击倒”,讲产品设计如何和其他人抬杠。之前我牢骚过一回:“某个领域的从业人员如果每天拿着专业术语跟一个外行讲话,你直接不用听下去就可以判断,丫其实是个菜瓜!首先用外行的话把内行的事情讲明白才能算上是个合格的内行人”和tony说的大抵是一个道理。
使用对方领域内的语言驳倒用户,实质就是一个转化的过程,把自己领域内的知识转化成对方领域内的语言,然后去驳倒对方,这才是真正的内行。利用高分贝和拽生词引用专业的概念来抬杠就类似与兽斗之猫狗。“譬如虎之出击,必贴地、俯身,形似奄奄一息。譬如鹰之将猎,必收翅躬身,作瘦弱将死状。唯独狗猫,稍有动作即张牙舞爪,声嘶力竭,作叱咤状。然一喝则溃之。(via)”

使用用户的语言也涉及到从用户的角度看交互。比如在一个公园的指示图上标注“你在这里”而不应该是“我在这里”;比如提示用户是否激活某系统而不是提示“无效模式”。
同时,系统不应该强制用户按照系统定义的命名规则给用户取名。应当允许用户使用任意长度的用户名,如果系统因为某种原因无法处理或者不不愿意处理长用户名的时候应该提供友好的错误信息,并允许用户重新编辑用户名等。

如何得到用户的语言?
最行而有效的方法莫过于数据说话,询问用户,用户投票等。让用户对一组可能用到的名字清单进行投票,然后让用户选出自己的语言,这样将会使用户在使用系统时的错误降到最低。或者也可以使用某特定领域内的用户词库等。

把搜索框还给搜索

1、搜索框的意义
用户总是和你想的不一样,用户很多时候是不会按照你设定的导航走的,他们更多的时候是上来就直接输入关键字进行搜索。对于购物者而言,如果清楚的知道想要什么,他们会很明确的使用搜索框,这种情况下购物者显示出了明确的购物意图,因此搜索框能够把该意图转变为真实的购买行为。来自Fast Search的数据显示,30%的购物者进入电子商务网站后会立刻使用搜索框,超过30%的人通过导航没有找到需要的物品后转而使用搜索框。
如果一个网站没有足够合理的信息架构体系,那么搜索引擎不仅仅是有帮助性的,甚至是至关重要的设计功能。有可能比网站的导航更对用户有帮助。事实上,搜索是用户了解在一些综合性网站内容最直接有效的方式。最好的搜索设计就是给用户提供一个简简单单的搜索框在页面显眼固定的位置上,但却有强力搜索的能力和范围宽 广的功能。
所以,如果你的网站没有足够清晰的信息架构体系,那么,请把你的搜索框还给搜索,不要再试图去绑架你的搜索框!

2、被绑架的搜索框

http://www.zghzp.com/
不可否认,右侧的背景很美,但是我是来搜索的不是来欣赏图片的,这个背景搞的我都不知道这个搜索还有上面的频道切换是不是可以点击了(我试图去点击新版上线,未果)。这个设计的用户体验差及了。
http://www.shtimber.com/
搜索跟留言板有什么关系?搞个留言板的按钮跟搜索放在一起是什么逻辑?这让我在想搜索的时候很不爽
http://cn.china.cn/
这个很让我无语,在搜索按钮后面补个按钮就罢了,居然还来个比搜索按钮还大2倍多的按钮……
http://b2b.hc360.com
这个大概是我见过的最无语的搜索框了。想不清楚为什么现在还有设计师会把“设为首页”、“收藏本页”这样的功能摆出来,而且是摆在搜索框上。
http://www.8035.com/
对于这个,首先视觉完全被放在了那2个“新”、“热”上去了,压根没有想着点前面的东西了;不知道为什么要把这2个东西摆在搜索按钮的后面,还有,这么长的搜索框是否是在告诉我,你们网站的东西很难找,需要很长的关键词呢?

现在很多网站都倾向于搞一个这样会闪的gif图片来突出某些内容,我习惯把这些东西叫小蚂蚁。有的网站搞的很夸张,这小蚂蚁长的胖的出奇,用户的吸引力完全都放在了那只胖蚂蚁上,根本没有想着胖蚂蚁前面的东西;有的网站觉得每个栏目都需要突出于是每个栏目上都搞个“新”、“热点”,最后的结果就是整个网站看着就像个蚂蚁窝。个人觉得要想用这个小玩意赢得好的用户体验,至少要保证3点:小、简、少。小,不至于让我感觉感觉突兀;简,能表达意思就可以了;少,不至于搞的我想点了不知道点哪里。

3、把搜索框还给搜索
把搜索框还给搜索!搜索就是搜索,不要给搜索背上太多的东西。一个搜索频道、一个搜索输入框、一个搜索按钮这样就已经足够多了,再多一点搜索框都会受不了!当然,你也可以让你的搜索框更精简,精简到只有一个搜索框。
把搜索叫搜索!搜索的位置要明显到用户第一眼就能看到且随时能够找到;输入框应该让用户感觉可以输入;搜索按钮看上去应该更像是个按钮;不要把无关的东西在搜索按钮边上,它就应该一个人待着!

再说说厕所里那点事

上次,我截了张劲松好乐迪厕所的小便池的图,我问“这个小便池的设计是不是有问题?是不是会造成体验上的不舒服?”得到的答案是:这个烟灰缸是为左撇子设计的,有人提议把烟灰缸的位置挪到中间,这样就解决了左右手的问题。

今天,刚好看到另外一个关于厕所的故事,贴2张图上来先:

仔细看,这个厕所的小便池里是脏着的。不要以为是清洁工工作不尽职的问题,事实上,这个脏东西是设计师故意设计上去的。

在男士的洗手间,每个小便池里,都印着一个苍蝇的图案。它在排水口附近,偏左一点地方。设计者的意图在于,有意刺激男士只对准一个方向 ”射击”,”将苍蝇活活冲死”,从而避免尿液四处横流。据研究发现,由于这只蚀刻苍蝇,飞溅出来的小便减少了80%。

用户不会100%的按照你的设计意图走的,用户是需要引导的,用户体验的真正价值所在不单是让用户用得舒服,更重要的反而是引导。按照某种定义,网站的价值是“帮助用户完成某项任务并得到某种体验”,所以网站从头到尾做的事情都是在做引导(导航),然后最终带领用户找到确切的“内容”。
引导用户就是要想方设法让用户多多的使用你的产品、很简单方便地使用你的产品、甚至喜欢使用你的产品。小便池里的苍蝇就是一则成功的引导用户的案例,而且这种做法比那些大标语写“上前一小步,文明一大步”这样空洞的宣传奏效的多了。

小心,别让你的产品出轨了

让产品设计人员最郁闷的事情莫过于眼睁睁的看着自己的产品出轨而无能为力。在产品讨论会上你激情的描述完你规划的产品蓝图,但是执行中各个部门经常不断跟你抱怨按照你这么做有困难,他们希望偷工减料或者走“捷径”,最后,你刻画的小乔被做成了芙蓉姐姐……总结一下最近产品设计中遇到的问题,觉得产品设计应该具有以下5种感觉:

框架感
从构思一个产品开始,在产品设计人员的脑海里你的产品就应该是一个完整的小乔。她的秀发、俏脸、粉颈、香肩、酥胸、楚腰、翘臀、美腿、玉足,这一切都应该是完整的。眼光要放长远,不仅要看到幼年小乔娇小的身段更应该想到老去的小乔应该如何粉饰才能让她美艳不衰。
就一个产品人员而言必须具备良好的系统观念,你现在开发的产品和你目前的产品线应该是配套的,眼光要放长远一点,不仅仅看到目前只有数百付费会员数千信息时候的样子,更应该想到当发展到数十万会员数百万条信息时候如何管理,如何规范,如何运作的样子。贪图目前的方便,随意对信息不加分类的录入到最后只能让系统混乱不堪。

重点感
我觉得做产品应该往最多功能里想,然后再往最少的功能上做。头脑风暴列出这个产品可以具备的所有功能,甚至是某个很边缘的功能也应该列举出来。然后我们来一个个的考量,这个是否是被需要最多的?这个是否是跟我们现有的产品线最匹配的,找出我们最应该做的功能,OK,这就是产品需要具备的最核心的功能。
接下来需要做的就是
偏执的执行和坚守住这个最核心的功能,不管遇到什么困难我们都不应该放弃掉这个功能,一定要保证这个最核心功能不能被破坏,这样产品才不会轻易就出轨。小乔的头发可以稍微黄一点,但是俏丽的脸庞一点不能出现粉刺!

节奏感
懂运营的人不一定能做好产品,但是,不懂运营的人一定做不好产品!产品人员应该试着每周去做2天的客服,这样才能知道我们的用户最需要什么,才能知道我们现在最需要上哪一部分产品。
只有数百会员的时候就冒然的上社区,网站的内容质量还没有上去就先想着收费,这样只能是吓跑用户。上去就捉住小乔的手说“愿与吾同床共枕否?”,排除小乔被下了迷药等因素,你得到的应该只有一巴掌……

好习惯
尊重用户的习惯,遵守设计规范,保持整个产品的一致性。
不要试图去用挑战用户的习惯来标新立异,用户也是很固执的!可能仅仅因为你把登陆入口从右上角移动了一下,他们就会说他们找不到登录入口,于是离开。

细节观
从大局观念到上线节奏最后落脚会是在细节上。细节之处见真功夫,看看目前以用户自居的同学批评各个网站的文章你就知道了,他们通常都是抓住某一个小东西就开始一顿劈头痛骂的!
脸上长着粉刺的小乔的美艳肯定会骤减的,同样的,如果你在产品的文案上发现很多错别字或者图标都切的不标准你的产品的用户体验肯定会很差。

产品人员的目光应该再放远一点,偏执再多一些,变通再灵活一些,不要让技术和市场的几句抱怨就让你的产品出轨了!有框架感才能有大方向,抓住重点才能掌好舵,把握节奏才能走的平稳,养成好习惯才能不违章,注重细节才能走的又快又稳。

笔记:产品设计十条原则

1、技术是很重要的,但用户体验更为重要,通常也更难做好。

2、工程师通常都不是好的用户体验设计师,他们喜欢考虑一个事情如何实施,但用户会考虑用起来怎么样。

3、用户体验设计包括交互设计和视觉设计两部分。

4、产品的功能性和用户体验总是纠结在一起的。

5、为了创造良好的用户体验,产品方案必须为目标用户量身打造。

6、在文档交付开发人员之前,我们要反复检验产品的可用性、合意性和可行性。

7、一个高度真实准确的原型体系是快捷测试产品可用性的保障。

8、“高保真”的原型体系是和整个产品团队布道用户体验的最有力的工具。

9、产品经理的工作就是用尽可能少的产品功能,满足用户的需求和对体验的渴望。

10、成功的产品就是为满足某需求不能继续被拆分的最小的功能的集合。

原文地址:http://www.svpg.com/blog/files/great_products_by_design.html

不能说服别人接受,只能是个烂设计

1、作为一个Designer,往往你有优秀的想法,绝好的创新,但是,当你展示你的Design的时候,你不能说服别人去接受,团队里其他人告诉你“连这个都不知道,这个用户不是傻子是什么?”、销售团队告诉你“这个要表达给客户的话,有点….”、老大说,我们目前不需要这个,你的这个不行,需要按我的走….最后,你被枪毙了,其实,你想反驳,用书本知识,用预测,有数据,但是,很遗憾,你无法说法他们,所以,最后,你的Design只能是个烂设计!
不能说服别人接受你的Design,不能顺利的把Design转化成真正的产品,所有的Design只能是个烂设计!作为一个Designer,需要具备优秀的演讲能力。
不要在这里试图拿Jobs做例子说mac的产品。Jobs是个天才的演讲家和偏执狂,如果你看过Jobs的演讲,如果你真正的使用过哪怕一款mac的产品。
不要告诉我说,共鸣的东西才是好的东西,而不是说服的东西。好吧,你总是做一些能够共鸣的产品,那么你永远只能做出二流的产品!去问问那些初次接触iphone的用户,初次使用mac的用户,他们能第一次就接受吗?一大票的人会告诉你“难用”,但是,他们慢慢的会离不开他,因为mac有自己的产品特质!

2、千万不要试图说气话,千万不要甩犟脾气,可以抬杠,但是,记得,拿证据给他们看。跟他们抬硬杠只能让你的Design在他们心目中死的更快!“懒得跟你争”这样的话说出来只能说明你对自己的Design都没有把握!
OK,你可以说你不屑给这样的老板打工,但是,找一个你屑的老板就那么容易吗?一次次的离开只能让你的Dsign越来越不被人信任。

3、如果,你无法说服领导,那么好吧,先按照他的想法走,然后,把他的问题暴露出来,慢慢转型,最后,让他发现,其实,这就是你之前的Design。但是,你觉得不能跟他说“看,我说的对吧”,这样只能让你更快的丢掉饭碗。

4、准备重新再读一遍《只有偏执狂才能生存》 专注、独特是一个Desiger必备素质!

PS:首发5G,本文结合下面的评论补充了一些问题。