【交互设计】淘宝购便利交互设计心得
此文章已于12:53:19201*/2/7发布到良知塾【交互设计】淘宝购便利交互设计心得
类别
交互信息;全部
前段时间一直在做淘宝购便利网站的交互，算是本人第一次真正意义上的做前台项目吧（之前一直是做的后台系统的交互），其中有一些设计上的心得和大家分享一下。淘宝购便利是快消品销售的“生活平台”，让市民足不出户就可以买到超市生活用品，并可以享受24小时之内送货上门。一准备
1.现有的网上超市是什么样的？交互上有什么优缺点？
没有经验的情况下，最好的完成目标的方式就是借鉴。看国内外很多线上超市：mysupermarket：最下面的悬浮区是亮点，可以写便签，可以购物车，有物流说明。同时结构清晰，只是导航操作不是很直接，要划过才能看到内容。
山姆会员商店：每个地区有特定的商品，和我们的产品相同。首页、list、活动页都可以直接在橱窗选好想要商品的个数模拟真实场景。
leshop：清晰的导航，清晰的list的展示（标类商品用列表展示也是不错的选择）一号店：在大家有用漂亮的ui设计展示网站有多大牌时，一号店用了是让各个年龄层都能接受的纯文字，通俗易懂，怪不得大妈大婶都会上一号店买呢。
天猫超市：整个网站看起来很高端，但是detail页右边只有购物车，没有其他的关联营销，是否会导致购物的连续性降低呢？2.购便利要抓哪些特点来突破？我们的用户是20-40岁工薪阶层，喜欢潮流，对进口商品消费需求大。便利购在服务上要做到最后一公里的突破，商品品种开始的时候可能不多，但是特点是进口商品多且便宜，满80包邮，这些都是这个网站自身的优势，怎么样才能在页面上提现出来呢？除了的特色介绍页面，几乎不能提现交互上。再想想，既然以上看到的网站各有优劣为何不取他们的优势融合在一起，再加上一些变化呢?
迷你购物车：超市有别于网店，特别的地方在于迷你购物车。模拟实际场景：超市有别于商场，前者可以把东西放在购物车里最后一起结账。购便利的购物车做的和其他网上超市不一样，抓住购物车的核心功能和体验即可。
list：这是一个最实用的页面，能直接影响购买，尽量在这个页面让用户直接产生购买。用户怎么方便使用就怎么设计。
detail：一般用户能到这个页面几率不会太高，除非对这个商品犹豫不决。这时我们要挽留他，尽量多家关联销售的地方。3.交互设计师的价值在哪里？
交互的价值对于每个团队每个项目都是而异的。比如这次的项目，有项目时间，实现能力，淘宝框架的约束，同时交互又要赋予这个网站一些特色。这次项目我做的最难的事不是怎么把它设计出来，而是不停的舍弃自己的创意内容，留住最核心的。从而使整个项目能够顺利完成。二设计1.迷你购物车
购物车是我们要打造的最有亮点的区域。每个网上超市都有购物车，购物车可以让用户调节商品，快速结账。所以功能点一格都不能少。同时我们要把我们满80包10公斤邮费的利益点拿上去，文案要让用户易懂。
创意点看到左右的购物车都是纵向的列表模式的，然而列表模式和大图模式其实是不分伯仲的，只要操作手势轻松，大图模式用户是否也可以接受呢？虽然没有先例，但是不妨一试。于是横向的大图模式购物车诞生了。如图：列表模式，用户都是使用是最方便的，一目了然的。大图模式类似现在的淘宝橱窗、iphone主界面等，我们的用户是20-40之间的工薪阶层，喜欢潮流，对进口商品消费需求大，他们对区块模式也不会陌生。
我们的优势是满80包10公斤邮费，由于我们用的是淘宝的后台，购物车主界面没发展示重量。所以重量也要通过小小的购物车来承载，怎么做？我们想到了在价格后面加上了重量，同时跟着用户的每次购物车操作联动。下方加上邮费说明的链接，让喜欢精打细算的用户找到购物计算的乐趣。国内商超的迷你购物车大多是划过展开购物车，而点击之后又回到大购物车页面由于迷你购物车收起状态区域很小，用户容易造成误操作。我们采用的是点击购物车才能展开，防止用户误操作的同时充分展示我们的购物车特色。最后在将这些大图模块横向舒展开来，在网站右下角悬浮，对整个页面不会造成过多视觉干扰。2.list页和detail页
list和detail是个功能性的页面要做到如何让用户操作方便。我们对淘宝最大众化的两个页面做了针对商超的细小优化
为了保证786分辨率的情况下能看到完成一行商品橱窗+购物车展开+操作条我们将操作条从三行减少到了一行
为了保证进口商品能更加吸引用户，我们将detail扩大到460*460
在做好之后经常会漏掉很多报错页面等等，这些都是基础没打牢导致的，所以了解后台知识，前端知识，测试知识对交互设计师来说也是很重要的。三问题1.样or件or种
这个问题是讨论最激烈的，一度还邮件给天猫超市的设计师来进行讨论了。一号店等很多非淘宝系网站“件”表示一个商品（同一种商品买了两个，就是两件），而淘宝系网站“件”标识一种商品，（同一种商品买了两个，就是一件）虽然常识情况下，大家都认为前者是正确的，但是后者是为了优惠活动的逻辑统一（我寻找天猫设计师得到的答案：从当时的功能考虑因为我们的优惠有部分是按商品的件数来计算折扣的，比如5件内优惠，但实际是说五种商品就能优惠，你五种商品每个买几样我们不计算在数量里）。
我们的后台逻辑是淘宝统一的，所以只能用标识种类。我们要怎么处理呢？用“件”：容易产生误解；用“种”：太过于官方化，不亲切；用“样”：很亲切，但是各地方理解不同.....最后我们讨论了很长时间决定采用比较隐约的方式：省去单位。这种方法在一号店的list面包屑上面有体现。
2.大图or列表
list到底是用大图模式好呢还是用列表模式好呢？看了淘宝集市的list展示，你一定以为大图模式是大家最认可的。但是这点我和PD也产生了激烈的讨论，还和淘宝用研的同事了解了数据情况，收益匪浅。
淘宝中的商品有标类商品和非标类商品之分。淘宝集市由于主要是非标准类商品，这类商品大多都要进详情才能确定，大图的话可以是list一屏展示更多的商品所以非标类商品用大图模式比较好。而非标类商品用户对产品本身都是了解的，对详情不是特别关注，只要看看商品基本信息就能确定自己要不要买了，列表模式可以在list直接展示商品的基本信息，标类商品的话列表模式是比较好的。当然这些不是绝对的。后来我们觉得用ABtest，看数据来说话。A列表模式：
1.超市商品绝大多数为标类商品，用户对商品规格需求比较明显2.模拟用户在现实场景下逛超市的习惯：冲动型：看到商品→看到价格→购买
冷静型：看到商品→看到价格→看到规格→购买3.我们前期的商品不会很多B大图模式：
1.能在一页看到更多的商品
2.淘宝用户养成了进DETAIL进行购买商品的习惯
3.我们的商品前期可能少，后期会多主推商品少，其他商品也多的
最后由于项目时间紧没有采用ABtest，用了保险的大图模式。（列表模式不方便透露了。）
四思考
虽然个人认为交互设计师不是为了做出的作品与别人不同有新意而存在的（个人认为交互设计师是以怎样方便用户使用网站对网站产生好感而存在的），但是通过了这次项目，我对交互设计师这个职位有了更深的理解。本来我们设计师有很多的想法，但是由于很多因素：上线时间由老板来定（选良辰即日）时间压缩严重，受淘宝限制（我们本质上是个店铺）技术实现困难，没有很好的用研数据下很难做判断而最终没有得到实现。毕竟这个作品是大家的作品，单单一个交互设计师是无法做成这个网站的。大家沟通一起努力，让项目团队认可才是最基本的。用户可行性测试不是很方便的情况下，试着让项目团队的人都成为用户，很多交互方式大家可以一起来商量。当然交互设计师也很有必要了解前端，后台的一些基本知识，当了解了他们的处理方法之后或许会对你的交互方式判断有所帮助。
BY：良无限-UED
良知塾交互设计分享：【交互设计】苹果产品怎么做到身未动心已知的
扩展阅读：【交互设计】十个方法,让你的线框原型更具沟通能力
此文章已于22:21:47201*/2/17发布到良知塾【交互设计】十个方法，让你的线框原型更具沟通能力
类别
全部;交互信息
我(英文原文作者)参与过很多产品的线框原型设计，包括我自己独立完成的，还有与其他设计师、产品经理甚至是业务分析人员一起合作的。这很棒，因为在这个过程中我见识到了很多优秀的项目。不过慢慢的我也发现了一些问题，一些大家时常会在原型制作过程当中忽略掉的要素；如果能注意并解决掉这些问题，我们的交互设计产出物就可以发挥更大的实战价值。下图所展示的是一个很典型的例子，我们通常会将这种风格的线框稿交付给相关同事来跟进视觉设计或原型测试的工作。":[{"c":{"ix":0,"iy":0,"iw":655,"ih":1080},"p":{"h":1080,"w":655,"x":132,"y":108,"z":0},"ps":{"_drop":1,"_vector":1},"s":null,"t":"pic"},{"c":{"ix":0,"iy":1085,"iw":664,"ih":1081},"p":{"h":1081,"w":664,"x":127,"y":107,"z":1},"ps":{"_drop":1},"s":null,"t":"pic"},{"c":{"ix":0,"iy":2171,"iw":918,"ih":1080},"p":{"h":1080,"opacity":1,"w":917.999,"x":0,"y":108,"z":2},"ps":null,"s":{"pic_file":"/home/iknow/conv//data//bdef//144187517//144187517_2_2.png"},"t":"pic"}],"page":{"ph":1188,"pw":918,"iw":918,"ih":3251,"v":6,"t":"4","pptlike":false,"cx":0,"cy":103,"cw":917.999,"ch":1085}})这种线框稿确实能比较清晰的描述出页面元素的布局方式，但也仅此而已。它所缺少的是与其他设计师、开发人员以及被测用户之间的沟通能力。接下来，我们将一起看一看有哪些方法可以帮助我们提升线框原型在这方面的表现。
1.通过明暗对比来描述模块之间的视觉优先级
哪些内容是需要用户在页面上最先注意到的？他们的视线应该聚焦到什么位置？我们希望用户执行什么操作？这些问题不能简单的丢给视觉设计师来考虑，而上图所示的线框原型显然无法帮助交互设计师传达这方面的信息。
首先，根据产品需求及用研方面的实际情况，作为产品人员或交互设计师，我们自身应该对以上这些方面的信息了如指掌；在此基础上，为最原始的线框稿添加视觉优先级。具体实施起来其实很简单，将所有的深色“线框”移除掉，使用不同明度的灰色作为背景色来界定页面和模块的边缘，并籍此表达不同元素之间的视觉优先级。相比于之前纯粹线框风格的设计稿，我们可以在下图中明显的感受到元素与模块之间的优先级关系，例如酒店信息推荐及右侧预定表单当中的操作按钮都可以在很短的时间内抓住我们的目光。":[{"c":{"ix":0,"iy":0,"iw":628,"ih":1080},"p":{"h":1080,"w":628,"x":159,"y":108,"z":0},"ps":{"_drop":1,"_vector":1},"s":null,"t":"pic"},{"c":{"ix":0,"iy":1085,"iw":637,"ih":1081},"p":{"h":1081,"w":637,"x":154,"y":107,"z":1},"ps":{"_drop":1},"s":null,"t":"pic"},{"c":{"ix":0,"iy":2171,"iw":918,"ih":1080},"p":{"h":1080,"opacity":1,"w":917.999,"x":0,"y":108,"z":2},"ps":null,"s":{"pic_file":"/home/iknow/conv//data//bdef//144187517//144187517_4_2.png"},"t":"pic"}],"page":{"ph":1188,"pw":918,"iw":918,"ih":3251,"v":6,"t":"4","pptlike":false,"cx":0,"cy":103,"cw":917.999,"ch":1085}})这种方式并不意味着交互设计师正在扮演着视觉设计师的角色，我们并不是在表达“这个元素的背景色要比另外一个元素的更深一些”，这些明暗关系所要体现的只是哪些元素需要突出，哪些元素要相对弱化；而最终的视觉表现形式仍然应该由视觉设计师来掌控。
2.使用真实的数据内容
对于线框原型当中的范例内容，包括导航元素的标题、表单标签、介绍文案、图标等等，我们都应该尽量使用最贴近生产环境的真实数据。这种方式可以更有效的帮助我们规划界面元素的布局，并针对实际环境中有可能产生的极端数据情况制定预防性的方案，确保页面结构的坚固性。
更重要的是，使用真实数据作为范例内容的线框原型可以在接下来的可用性测试当中更具表现力和说服力，被测用户不需要依靠主持人的描述或自己的猜测就可以在原型当中获取到比较准确的信息。另外，真实数据也可以创造出一种更贴近实际产品的使用氛围，这可以使被测用户更加投入。对于测试人员来说(主持人、观察员)，我们可以设计出更具有针对性的任务或问题，可以在测试过程中对被测用户进行更加深入的观察；相应的，最终收集到的反馈信息也会更加真实有效。
仍以酒店的范例原型为例，诸如“你能找到这个酒店的特色服务信息吗？”这样的问题是欠妥的，因为这就相当于告诉被测用户，在页面当中的某个地方存在着这样的信息，他们接下来就只会根据这条线索去寻找。多数情况下必然能够找到，但这样的反馈对于我们是没有意义的。
如果在测试当中使用由真实数据构建起来的原型，那么情况就会好很多，我们可以问被测用户“你对这家酒店的感觉如何？”，这会使我们获取有效反馈的机会大大的增加。用户会根据这样的问题进行更加自主的信息浏览行为，他们有可能会回答“这个酒店看上去不错，不过他们提供家庭泳池，我真的不大喜欢小孩在酒店当中跑来跑去。”通过这类反馈，我们可以了解到用户不仅注意到了页面当中的重要元素，而且他们对其中的具体内容也做出了真实的思考。可以说，通过一套无真实数据内容的线框原型，我们能够测试产品的可用性，而使用了真实数据作为范例内容线框原型则可以更加全面的帮助我们测验产品的用户体验。要了解更多原型测试方面的实战方法，可以参考我们之前的文章“产品早期的原型设计与用户测试”。
3.确保细节的准确无误
将真实数据作为范例内容填充到原型当中后，我们要确保交互流程所涉及的信息的准确性。举个简单的例子，如果购物车的页面原型当中展示了两个单价为50元的商品，那么在结算环节中，总价应该是100元，而不是随便其他什么数字。错误的信息会阻碍沟通的有效进行，开发人员有可能在这里产生质疑，被测用户也会感到莫名其妙。
作为设计人员，长时间的将注意力放在原型的制作上面，很容易忽视掉这类问题的存在。如果有条件的话，可以在适当的时候请其他人来帮忙检查一下你的原型当中是否存在这类细节当中的错误。4.增加范例图片的自我描述能力
图片对于用户体验的提升起着重要的作用，当人们在网站中寻找商品或服务时，图片是引导他们制定决策的关键要素（怎样通过设计帮助用户制定决策）。另外，图片也能帮助用户对网站自身的形象和定位产生认知。不过在线框原型中，我们通常只会使用一些灰色的容器和线条来表现图片。
当然，我并不是要建议在线框原型中使用真正的图片或照片；我们需要做的是让代表图片的线框元素能够体现出在实际页面当中，这个位置应该放置怎样类型的图片。在制作线框原型之前，最好与相关的产品或业务人员就这方面的问题进行沟通，根据产品自身的特质及最终面向的用户群体，来判断图片一类的视觉元素应该具有怎样的整体风格。
举个例子，我曾经帮一家衬衣零售商做网站改版。在着手设计工作之前，我们首先使用旧版网站进行了一次用户测试，结果发现商品详情页当中的演示照片总会使用户产生迷惑。为了使衬衣更好看，他们在拍照的时候刻意搭配上了领带与袖扣，这使得用户认为每件衬衫都是包含领带与袖扣的套装。所以当我进行线框原型设计的时候，特意在商品照片的位置画了一张不包含领带与袖扣的衬衣草图，以确保视觉设计师及后续环节的人员能够理解，并避免在新版网站中重复错误。
我们不必通过非常精细的绘画来为线框原型中的图片元素增加描述性，通过简单的草图来陈述出用户希望在这里看到的图片类型即可。例如，在提供酒店预定服务的网站中，用户通常希望在详情页里看到怎样的图片？房间？卫生间？景观？这些问题都是值得花时间了解清楚并在线框原型中加以体现的。
5.使用色彩时保持谨慎
在线框原型中，彩色通常被用于注释。在必要的时候，我们也可以用特殊的颜色对那些特别需要用户注意的界面元素进行标注，或是用来表达出错信息一类的状态类内容。不过要记得，在进行原型测试的时候不要使用带有色彩注释的版本，原因是显而易见的，我们不希望被测用户被这些“突出”的元素引导或干扰。
5.确保交互元素明确易懂
交互元素的呈现方式应该符合它的用途，例如按钮看上去应该可以被点击。这些细节当中的视觉表现形式的正确与否，会直接影响视觉设计师及开发人员对原型的理解；不具备自解释性的交互元素所带来的潜在体验问题也会暴露在可用性测试当中。6.以实际像素为单位
如果你使用HTML配合样式代码来制作原型（[color=rgb(0,153,204)]使用前端开发框架快速创建页面原型），那么这个问题基本不存在，因为你通常需要以像素为单位为容器设置宽度或高度属性。不过在多数时候，我们创建的是纯粹的线框图。以实际像素为单位对页面布局及元素尺寸进行一定程度的规划和说明，这将帮助我们自己以及视觉设计师在接下来的工作当中省掉很多“猜测”与“估算”的过程。我曾经习惯于使用Powerpoint来制作线框原型，这种方式只能展示元素之间大致的尺寸和位置关系；当项目进入视觉设计流程，它无法有效的帮助我与设计师进行沟通，造成了不少的麻烦。
7.创建变更日志
随着迭代的不断进行，每一版线框原型当中的变更通常会越来越细化，从页面结构到模块、控件，这会使跟进后续工作的设计师或开发人员越来越难以发现所有的变化。作为交互设计师，我们有责任创建一份变更日志，并随着项目的发展对其进行持续的更新。日志中的每一条记录都要包含日期、版本号、执行者以及变更说明。这种信息交流的方式不需要花费太多的时间，但结果却是事半功倍的，无论产品人员还是设计师、开发者，大家都可以籍此来一目了然的跟踪原型的版本变化。":[{"c":{"ix":0,"iy":0,"iw":628,"ih":1080},"p":{"h":1080,"w":628,"x":159,"y":108,"z":0},"ps":{"_drop":1,"_vector":1},"s":null,"t":"pic"},{"c":{"ix":0,"iy":1085,"iw":637,"ih":1081},"p":{"h":1081,"w":637,"x":154,"y":107,"z":1},"ps":{"_drop":1},"s":null,"t":"pic"},{"c":{"ix":0,"iy":2171,"iw":918,"ih":1081},"p":{"h":1081,"opacity":1,"w":917.999,"x":0,"y":107.999,"z":2},"ps":null,"s":{"pic_file":"/home/iknow/conv//data//bdef//144187517//144187517_10_2.png"},"t":"pic"}],"page":{"ph":1188,"pw":918,"iw":918,"ih":3252,"v":6,"t":"4","pptlike":false,"cx":0,"cy":103,"cw":917.999,"ch":1085}})9.避免深色线框满页面的深色线框会使你的原型看上去缺乏层次、粗糙凌乱。正像我们在第一点当中所说的，试着使用不同明度的灰色作为背景色来界定页面和模块的边缘。这样不仅能表现出界面元素的视觉优先级，而且可以使整个原型看上去更加整洁。如果必须在某些地方使用线条，那么尽量使用纤细的灰色实线或点状线。我们固然不需要让线框原型看上去像视觉稿一样完美，但对这些细节的把握确实可以让它更加简洁精美；在实际工作中，这往往可以提升原型被接纳的程度。
10.保持跟进这一点更加偏向于交付流程，而非设计技巧。完成线框原型后，我们不能只是简单的把它扔给跟进后续工作的同事。花些时间去支援视觉设计师或开发人员的工作，只有他们才能将你的设计概念最终落实到实际当中。通常，交互原型当中所包含的想法、操作逻辑等方面的信息难以即全面又准确的被大家理解，而且其中隐含的问题有可能在后续阶段才能体现出来。我们有必要在交付原型之后保持跟进，与大家协同作战。以上就是关于提升线框原型沟通能力的十点建议。可以参考我们之前的文章“线框原型的本质及实践应用概述”，了解更多关于线框原型的基本理念及运用方法。BY：BeForWeb
良知塾交互设计分享：【交互设计】淘宝购便利交互设计心得
友情提示：本文中关于《【交互设计】淘宝购便利交互设计心得》给出的范例仅供您参考拓展思维使用，【交互设计】淘宝购便利交互设计心得：该篇文章建议您自主创作。
来源：网络整理 免责声明：本文仅限学习分享，如产生版权问题，请联系我们及时删除。
公文素材库友情提示：本网站所有内容为共享上传提供，不涉及任何商业利益，本站对此不承担任何保证责任！
Copyright © www.bsmz.net Corporation, All Rights Reserved 共享时代 共享你我他 版权所有