拍卖出价流程浮窗设计小结交互设计（共14篇）由网友“已注消”投稿提供，下面是小编整理过的拍卖出价流程浮窗设计小结交互设计，欢迎大家阅读分享借鉴，欢迎大家分享。
篇1：拍卖出价流程浮窗设计小结交互设计
之前在交互周会上，作为项目分享了之前做过的拍卖线的出价流程，由于讲的比较匆忙，所以还是想整理成文字，累积下，做多了日常以后，常常觉得如果不多做字面的积累，很多看似瞬间的累积，很快就会被更多的项目淹没~~
之所以把这个项目分享出来，是因为觉得我们在工作中所做到的大小日常，99%的都不是“无中生有”的，都具有一定的历史，也一定有一定的痛点，一定也有新的业务变化在里面，如何在短时间内把握这些因素，迅速转化为一个合理的方案，是有一定方法的，虽说方法不一定完美，但希望给大家一些思路。
开始正题，大概介绍下这个出价流程的背景：拍卖线原来拍卖信息确认的页面是和普通购买产品是相同的，随着拍卖业务的发展，觉得有必要以更简单的形式来进行操作，所以浮窗的形式变随之成为新的出价流程形式。由于拍卖涉及到很多不同的概念和判断，而之前做的一版浮窗出价流程并没有交互设计完整的参与，导致了页面逻辑中有一些问题，所以需要交互再次参与进来将这个出价流程梳理好，但另一方面，之前尽管有问题的出价流程由于业务需要，却正在上线中……
首先，从项目的背景中，就可以总结出这个项目有几个特点：1，有大概的交互形式，且已经不能修改（尽管当时也有人觉得浮窗形式不是很好，但一切都在上线中，所以暂时也无法改变）2，发展中的业务和要求革新的心态（这在很多项目中都存在，我们通常不喜欢一成不变，但面对发展中业务，多变也是一个挑战）3，没有原始页面数据（这是最无奈的一点，因为看不到用户的反馈，让我们少了很多依据）
其次，这个项目从交互角度出发，这个项目有几个挑战：1，浮窗形式的界面（区别于一般也页面，对信息的分类和呈现要求更高）2，需要对流程做出完整的梳理（一般涉及到前后步骤的页面，最好有完整的流程图有助于检验页面） 3，之前的版本出自非专业人士（势必需要纠正一些浅显的问题，这也是之后开始着手的切入点）
总结了以上几点，确定了这次项目的主要核心点，即原有流程的提升和修正，修正原有出价流程中错误的地方，提升原有流程页面的交互体验。
由于接到这个任务的时候对拍卖业务还不是很熟悉，所以一方面与PD沟通了解拍卖业务，另一方面让QA把准备上线的拍卖浮窗的每个状态给到我（因为之前的版本没有完整的交互稿）如之前所说，先从纠正原有页面的浅显问题开始着手。于是我总结了原有页面中的一些问题，以此归纳出具有针对性的方法。
1， 文字引导与输入框距离太遥远
2， 同类信息被放置在不同的地方
是否设置成代理出价是和用户的出价有关的信息，应该归类显示。
1、2两点，实际上都牵涉到了信息归类显示的问题。在一个页面中，一些相关的信息（例如同类的，行为上可以连续操作的）尽量可以放在一起，但其中要避免相同形式表达的信息（例如都是数字的形式）则要分开展现，以免互相混淆。
3， 操作行为的起始和完成逻辑不通
在上图中有修改的点击操作但在接下来却没有“确定”或“修改完成”的操作，而是直接通过整个确认出价的动作作为结束，一定程度上并没有给于用户一个操作闭合，很容易让用户搞不清楚自己正处在修改资料还是出价哪种行为，
4， 浮窗文案提示并未从用户角度出发
在这个首先提示用户“出价成功”，但随即又告知用户其他用户的出价已经超过了他，然后让用户重新出价，这个充满矛盾的页面，就是因为没有站在用户的角度出发。这里所谓的“出价成功”仅仅只是后台有此次出价的记录，而对于用户来说实际应该是“出价失败”。
在浮窗的操作体验过程中，由于遇到的情况会很多，很有可能在页面跳转中流失一定的用户，所以，避免给予用户挫折感。并且，不论在哪一步文案的表达都应该站在用户的角度，更便于在整个拍卖过程中传达正确的信息。
5， 文案展现上主次不明
上图的浮窗中用非加粗的字体表达了一句比较重要的话，而下图的浮窗却用加粗的字体表达一句不是那么重要话。可能在大的页面中这些都不会这么凸显出来，但由于浮窗区域比较小，错误就显而易见了。
6， 文案上表达有欠缺
上图浮窗的“建议您设置一个更高的价格并重新出价”语义表达重复而累赘，下图浮窗中的话也是类似问题。而且同样都是让用户重新出价，使用的确是两种不同文字的button。
4、5、6点都是文案上表达的问题，对于浮窗中的文案，一方面可以通过视觉上不同层次的文案做区分，另一方面文案本身也要符合逻辑。
7， 一些必要信息的缺失
例如浮窗中的单位“元”不见了，这种常见的问题也很容易被我们忽视。
由于分别找出了原有页面中的一些问题，接下来的思路也显现出来，将浮窗页面的信息做大概的功能区隔，并对具体区块中的信息做规范表达。
将浮窗分为三大区域：橙色区域是有关出价的信息/最主要的信息提示；蓝色区域是保证金和客户信息/信息补充区域；绿色区域是判断区域/出价按钮或关闭窗口的位置。
橙色区域还细分成三个部分，第一行显示和数字相关的信息/表示当前最主要状态的信息 ；第二行为重新出价设置；第三行为设置代理价。第二和第三行的信息在一些状态中是没有的，所以相应会不做显示。
功能区域的分割只种维度上的，我还在视觉表达层次上做了规范，尽量让有用的信息更加凸显出来。通过这个方法即在交互的表现层面上有了一定的规范，在视觉进行的时候也可以有效减少对原有交互设计的误解。
做了以上两步的同时，在与PD的沟通下，也对整个增加拍的逻辑做了充分的梳理，当然过程中少补了的是Qa同学的辅助，因为QA更加了解业务逻辑中的一些细节，在此基础上做出了一份逻辑图。最后就是按照之前制定的规则，将相应的信息“填写”到相应区域即可。
上线的页面请大家有空参与淘宝拍卖会上拍品活动：www.paimai.taobao.com即可看到。如果有任何疑问都可以通过页面右侧的意见入口，给我们提宝贵的意见，相信这个拍卖产品的好的体验是大家一同参与下得出的结果，我们也会不断根据用户的反馈给予产品最及时和有效的改进！
琳韵 撰于.12.23
篇2：项目实例：淘宝拍卖出价流程浮窗设计小结
之前在交互周会上，作为项目分享了之前做过的拍卖线的出价流程，由于讲的比较匆忙，所以还是想整理成文字，累积下，做多了日常以后，常常觉得如果不多做字面的积累，很多看似瞬间的累积，很快就会被更多的项目淹没~~
之所以把这个项目分享出来，是因为觉得我们在工作中所做到的大小日常，99%的都不是“无中生有”的，都具有一定的历史，也一定有一定的痛点，一定也有新的业务变化在里面，如何在短时间内把握这些因素，迅速转化为一个合理的方案，是有一定方法的，虽说方法不一定完美，但希望给大家一些思路。
开始正题，大概介绍下这个出价流程的背景：拍卖线原来拍卖信息确认的页面是和普通购买产品是相同的，随着拍卖业务的发展，觉得有必要以更简单的形式来进行操作，所以浮窗的形式变随之成为新的出价流程形式。由于拍卖涉及到很多不同的概念和判断，而之前做的一版浮窗出价流程并没有交互设计完整的参与，导致了页面逻辑中有一些问题，所以需要交互再次参与进来将这个出价流程梳理好，但另一方面，之前尽管有问题的出价流程由于业务需要，却正在上线中……
首先，从项目的背景中，就可以总结出这个项目有几个特点：1，有大概的交互形式，且已经不能修改(尽管当时也有人觉得浮窗形式不是很好，但一切都在上线中，所以暂时也无法改变)2，发展中的业务和要求革新的心态(这在很多项目中都存在，我们通常不喜欢一成不变，但面对发展中业务，多变也是一个挑战)3，没有原始页面数据(这是最无奈的一点，因为看不到用户的反馈，让我们少了很多依据)
其次，这个项目从交互角度出发，这个项目有几个挑战：1，浮窗形式的界面(区别于一般也页面，对信息的分类和呈现要求更高)2，需要对流程做出完整的梳理(一般涉及到前后步骤的页面，最好有完整的流程图有助于检验页面) 3，之前的版本出自非专业人士(势必需要纠正一些浅显的问题，这也是之后开始着手的切入点)
总结了以上几点，确定了这次项目的主要核心点，即原有流程的提升和修正，修正原有出价流程中错误的地方，提升原有流程页面的交互体验，
由于接到这个任务的时候对拍卖业务还不是很熟悉，所以一方面与PD沟通了解拍卖业务，另一方面让QA把准备上线的拍卖浮窗的每个状态给到我(因为之前的版本没有完整的交互稿)如之前所说，先从纠正原有页面的浅显问题开始着手。于是我总结了原有页面中的一些问题，以此归纳出具有针对性的方法。
1， 文字引导与输入框距离太遥远
2， 同类信息被放置在不同的地方
是否设置成代理出价是和用户的出价有关的信息，应该归类显示。
1、2两点，实际上都牵涉到了信息归类显示的问题。在一个页面中，一些相关的信息(例如同类的，行为上可以连续操作的)尽量可以放在一起，但其中要避免相同形式表达的信息(例如都是数字的形式)则要分开展现，以免互相混淆。
篇3：UI设计流程探讨交互设计
确认目标用户
在软件设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需求，
用户交互要考虑到目标用户的不同引起的交互设计重点的不同。
例如：对于科学用户和对于电脑入门用户的设计重点就不同。
采集目标用户的习惯交互方式
不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。
当然还要在此基础上通过调研分析找到用户希望达到的交互效果，并且以流程确认下来。
提示和引导用户
软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。
对于用户交互的结果和反馈，提示用户结果和反馈信息，引导用户进行用户需要的下一步操作。
一致性原则
设计目标一致
软件中往往存在多个组成部分（组件、元素）。不同组成部分之间的交互设计目标需要一致。
例如：如果以电脑操作初级用户作为目标用户，以简化界面逻辑为设计目标，那么该目标需要贯彻软件（软件包）整体，而不是局部。
元素外观一致
交互元素的外观往往影响用户的交互效果。同一个（类）软件采用一致风格的外观，对于保持用户焦点，改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡量方法。因此需要对目标用户进行调查取得反馈。
交互行为一致
在交互模型中，不同类型的元素用户触发其对应的行为事件后，其交互行为需要一致。
例如：所有需要用户确认操作的对话框都至少包含确认和放弃两个按钮，
对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。但是我们可以看到这个理念虽然在大部分情况下正确，但是的确有相反的例子证明不按照这个理念设计，会更加简化用户操作流程。
可用性原则
可理解
软件要为用户使用，用户必须可以理解软件各元素对应的功能。
如果不能为用户理解，那么需要提供一种非破坏性的途径，使得用户可以通过对该元素的操作，理解其对应的功能。
例如：删除操作元素。用户可以点击删除操作按钮，提示用户如何删除操作或者是否确认删除操作，用户可以更加详细的理解该元素对应的功能，同时可以取消该操作。
可达到
用户是交互的中心，交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。
用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。
要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏（一般来说超过4层）那么用户达到该元素的几率就大大降低了。
可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。（参考简单导向原则）
可控制
软件的交互流程，用户可以控制。
功能的执行流程，用户可以控制。
如果确实无法提供控制，则用能为目标用户理解的方式提示用户。
上面的文章提到了UI设计的原则，并且对此做出了一些所谓的定义。大家要明白，本人对UI设计的研究时间不长，这些原则只是个人体会。
篇4：UCD 流程解析交互设计
细心的读客应该会发现，在昨天 Making Life Easy - 使生活更容易 里提到一个英国的Flow Interactive 交互设计咨询公司，今天继续阅读了他们的网站，发现了他一些对UCD（User-centred Design 以用户为中心设计）的实施流程， 觉得很有代表性，也很清晰，所以简单整理了一下，给自己和大家学习备份：
他们大概把UCD的流程分为了下面几个阶段：
Research stage 调查研究阶段
Concept stage 概念定义阶段
Iterative design stage 迭代的设计阶段
Implementation stage 执行阶段
Launch stage 发布阶段
图片来自Flow Interactive
下面是图片内容的解析，连接都有相应的安例解析，很有帮助，
Research (调查研究)
Context studies(背景研究)
Focus groups 关注群体
Competitor comparisons (竞争对手对比)
Depth interviews 深度面试
Questionnaires 问答
User personas and scenarios 用户角色与场景了解
User goals 用户目标
Usability goals 可用性目标
Concept (概念定义)
Concept models 概念模型
Usage scenarios 使用场景
Paper prototyping 简易原型
Usability testing 可用性测试
Expert evaluation 专家评估
Design (界面设计)
Product structure diagram 产品结构示意图
Process flows 程序流程
Wireframes 框架
Interactive prototypes 交互原型
Card sorting 卡片分类排序 － 就是把关键流程用卡片形式定义下来，然后不断组织，了解和挖掘最佳的排序模式
Usability testing 可用性测试
Accessibility evaluation 易用性评估
Expert evaluation 专家评估
Functional specifications 功能型详述
Implementation (执行测试)
Usability testing 可用性测试
Expert evaluation 专家评估
Accessibility evaluation 易用性评估
Launch (发布)
Usability testing 可用性测试
Expert evaluation 专家评估
Accessibility evaluation 易用性评估
Focus groups 关注群体
Competitor comparisons (竞争对手对比)
Metrics 测量
因为UCD或一些新兴的用户研究课题，对于大部分设计师或研究员来说总是觉得概念模糊，难于掌握或不知如何着手，所以，我想不断尝试用简单清晰的方式来定义这些概念，使我们未来的工作有律可依，并更有效的完成手上的项目，
如果有问题的请提出来一起讨论学习。
本文来自：www.moond.com/lab/?p=29
篇5：缩短流程的小设计交互设计
最近搬家了，住的地方在小区深处，从马路边的小区大门进去，要走过一片区域，穿过中间的另一个大门，来到另一个区域，才能走到那栋楼。这真是一段挺长的路程。
走了几天，有一个奇怪的感觉：进去时花的时间比出来时的时间要多。
同样的路程，为什么两个方向给我的感觉所花时间不一样呢？
我仔细回想，我在行进过程中，不自觉地把中间的一个大门当作了一个里程碑，当我到达那道门的时候，就觉得走了一半了。而实际上，那道门并不在整个路程的中间，而是更靠近所在的楼，离马路边的大门要更远一些。
那也许可以武断地得出一个结论：如果某一过程的前一阶段耗时比后一阶段耗时要少，那么就会让经历此过程的人感觉过程比较短，反之，前一阶段耗时多于后一阶段，则整个过程就会被感觉长，
在网站设计中，会有很多的过程，需要设计得尽量短，至少要让用户感觉短。比如一些优秀网站的注册过程，从开始注册到能够登录使用要经过两个阶段：
填写Email、密码等
到邮箱中点击确认链接
用户感觉到注册流程的短，就是因为完成第一阶段很快。而第二阶段耗费的时间虽然多一些，却一般会被用户忽视。
所以为了把流程设计的尽可能短，就应该把前一阶段设计得比后面的阶段更快更容易完成。
本文出自：chentao1006.cn/tech/little-design-for-shortened-process/
篇6：随身携带的设计手机浏览器手机小结交互设计
可以随身携带，是移动设备具备的优势，虽说“随身携带”跟设计本身并无太多关系，但想想我们的设计又的确是大家随身携带的，心里不禁有点暗自窃喜，同时，也因此对移动设备的产品设计的要求会更高，因为凡是大家随身携带的东东，必然是大家日常所必需、所钟爱、或者常用的，自然对这些东东的要求就会更高，希望它能够彰显自我的，所以，做随身携带的设计其实更难。
说到手机浏览器，从preview到 beta1版本发布，到目前即将出炉的beta2版本，已经做了近一年的时间，个人感觉麻雀虽小，五脏俱全，手机软件看起来很小，其实做起来复杂程度一点都不亚于pc端的软件产品，或者更甚，跟进期间遇到了不少问题，同时也积累了一部分经验，下面主要通过几个典型案例和设计过程中的几个环节的做一下简单的分享。
问题1：视觉表现与开发实现的平衡点
提起移动设备的设计，难免想起目前火热的iPhone，微软的windows mobile系统，以及很多时不时让你大饱眼球的新颖、时尚的产品，其整体的印象感觉是前卫、酷炫和充满科技感的。
多说无宜，相信大家随处都可以看到类似的惊艳设计，这里要强调的一点就是，手机软件需要兼顾到多个手机操作系统，而目前主流的智能手机操作系统有很多如诺基亚的Symbian、微软的Windows Mobile，PALM、Linux，还有Blackberry OS、iPhone OS，以及Java和MTK等等，况且每个系统会不断更新升级出多个版本，比如Symbian系统又根据不同的硬件特性分为S40、S60、S80、S90等不同版本，这些系统和版本都具有不同的特性，所支持的界面表现也都不尽相同。所以在进行视觉设计的时候，要对不同系统有所了解，不能一味强调视觉上的表现力，单纯追求酷炫的视觉效果而失去了兼容性。
同时，手机软件亦会受到硬件设备的限制。我们可以注意到不同的品牌占据了整个手机市场，其中占有率高的有诺基亚、索爱、三星、摩托罗拉，还有多普达、苹果等后起之秀。整个手机行业更新换代非常快，新的型号很快出来，旧的型号又不会马上被淘汰，所以手机软件开发还要细化到不同品牌的不同型号。
而且，要关注到产品开发的成本。目前QQ手机浏览器的开发还属于前期阶段，目标是快速打造简洁快速、轻便易用的手机浏览器，简约的设计是与当前目标相符的。我们不用刻意追求外在表现，而是设计一款实用为主、性能第一的浏览器。手机浏览器沿用了手机QQ的界面实现机制，同时也因为操作系统的原因，现在还不支持半透明的效果；在质感表现上，主要以单向渐变为主；另外对安装包的体积有严格的控制，尽量少的使用贴图元素和动态效果。
问题2：围绕核心价值进行设计
浏览器的核心功能是页面浏览和内容呈现，用户在使用浏览器上网的时候，浏览器的任务便是对用户查看网页进行解析并快速正确的呈现网页内容，而网页的样式及风格则是网站建设者需要考虑的事情。这里要提到在preview版本里曾设定的手机QQ风格的主题皮肤，其中对网页浏览窗口的背景色也进行了定义，即与起始页一致的深蓝色，在实现和测试的过程中，我们发现这个深色的背景影响到了部分网页的浏览。比如，CCTV的wap网站使用样式表将网页文字定义为深色，在明暗度很接近的背景色值下，基本无法看清文字。因此preview版本我们暂停了该主题的实现，在beta2版本中我们将该主题的浏览窗口背景色调整为浅色。
控件设计也遇到了类似的问题，开始控件样式是跟当前应用的主题风格统一的，默认蓝色主题的控件是蓝色的，粉色主题的控件就是粉色的，但这在通用性上就比较差，比如在一个蓝色风格的网页中，想区分出蓝色的输入框就有点困难，
因此，我们最终定义了一套通用的手机浏览器的标准控件，可以应用在各个主题里面。
站在巨人的肩膀上
公司已经有一些比较成熟的无线产品，如手机QQ项目就积累了丰富的移动设备设计的经验，在手机浏览器项目的前期我们与手机QQ项目的设计师进行了多次的交流和学习，在后期的设计过程中也非常感谢他们的经验分享和热心支持。其它还有手机QQ音乐、手机QQ影院等产品也有值得我们学习的地方，后续我们会增强各项目间的交流和技术分享，共同提高。
多渠道的学习移动设备相关的设计知识是很有必要的，特别推荐下诺基亚论坛(forum.nokia.com)，其中的Design and User Experience栏目中有大量的交互设计和视觉设计的文章，同时Library中的规范建设文档也十分的全面和完善，是很好的设计参考资料。比如其中几篇关于Vertical List、Horizontal List和Tabbed List的讨论文章，就对手机浏览器beta2版本的起始页的列表设计提供了很大的帮助。
还有目前比较流行的手机浏览器产品，如UCweb、Opera等，相对来讲已经比较成熟，对浏览器的整体体验已经有很好的把握，并且吸引了相当很多忠实用户，我们也可以通过吸取他们设计的优点来提升产品的体验。
另外，参考优秀的手持设备软件设计是一个很好的捷径，正如前面所说的手机软件会受到操作系统、硬件设备等的很多限制，而优秀的设计已经较好地避免了许多问题。
过程保证结果
手机屏幕的显示效果与电脑屏幕的差别非常大，不同型号的手机的色差也很大，我们在进行视觉设计的时候需要在不同手机上调试设计稿的色调和对比度，通过不断测试保证最终的显示效果。为了节省测试和调整效果图的时间，这里建议使用数据线连接，这样在pc和手机间传输图片的速度会快许多，并尽量多的在不同手机上查看效果，因为很多手机的颜色显示没有达到真彩色，有些色值会不被正常显示。
手机浏览器是多部门合作的项目，在设计过程中难免会出现各方面的意见分歧，通过严格的评审流程可以保证最终设计质量以及合理的解决意见分歧。设计稿首先要通过设计中心的专家评审，然后在项目组内进行二次多方评审并最终确认，最后提交开发实现。
为方便开发同事快速高质量的进行界面实现，以及后续功能模块的添加和维护等工作，我们制定了需要制定详细的规范。规范制作对后续的工作开展有着重要的意义，比如新主题的增加，界面实现的检查等。
其它的补充
手机软件的界面设计中要特别注意内容、结构的层次清晰，尽量能适合在不同场景下的表现，因为手持设备的特点就是很方便的在不同的场合使用。
手机和pc端的设计原则是共通的，关键是将不同设备的特性发挥出来。
手机字体相关规范还需要进一步完善补充。
最后的话
手机浏览器项目对于移动设备的设计来讲，仅仅是迈出了第一步，尚有很广阔的空间需要去拓展，对于手机软件设计的经验积累现在也还只是杯水车薪，要靠大家一起来补充，随身携带的设计，我们可以让你爱不释手。
本文来自：cdc.tencent.com/?p=1572
篇7：Alibaba国际站首页改版小结 交互设计
阿里巴巴国际站（Alibaba.com）是全球最大、最有影响力的B2B电子商务平台，是阿里巴巴集团的旗舰公司，长期以来，阿里巴巴国际站视觉风格并未随着业务的突飞猛进而有更富魅力的改变，呈现在用户面前的，依旧是稍显过时的设计风格。随着用户需求和公司业务的压力，对网站的视觉重构就成了迫在眉睫的事情，是时候来一次激动人心变革了！
一. 目前线上版本分析：
改版前Alibaba国际站首页
上图为目前线上版本，较的版本，总体设计风格和信息结构没有太多的变化：
首页没有传递出Alibaba.com的业务方向和核心价值；
随着业务方向发展，不能满足业务需求；
设计风格过时，设计风格不统一。
-
二. 用户需求分析：
分析用户需求之前，一起来看一下外贸B2B生意从工厂到发货的重要环节有哪些，Alibaba对应这些环节有哪些相关配套服务。
通过用户调研分析，目前网站用户对Alibaba.com提供的这几个核心服务的认知度较低，所以这次首页改版的首要目标就是要进行用户教育并传递网站的核心服务。
三. 信息推导——框架结构
大牛William Strunk和E. B. White的《The Elements of Style》里写到：”越精简的文字越有力。一句话里不应该有多余的词儿，一段话里不应该有多余的句子。同样，一幅画里不应该有多余的线条，一台机器也不应该有多余的零件。”对首页信息进行重新梳理，去掉长期没人运营的冗余信息；重新调整信息结构，核心位置传递网站核心价值信息；只专注那些用户最需要的功能，用20%的基本功能去满足80%用户的需求。
新首页最终线框图
Alibaba.com主要功能区，全站性买家主功能入口（顶部导航，类目，搜索）；
核心服务，网站服务以及用户教育，对新买家的初步教育以及价值展示，老买家的流程引导和网站服务介绍；
网站运营区域（次banner运营活动，Bargain Buys，GSD产品区域）；
推送热门产品，展示和买家浏览行为相关的产品；网站Site Map以及应用拓展。
-
四. 视觉推导——风格、色彩
新视觉风格探索主要从以下几个维度考虑
1. 色调，感受，明亮的，柔和的，还是暗沉的；
2. Icon，字体，统一性，传达的感觉，Icon和字体要有连续；
3. 松紧度，留白，行间距，字间距，宽松度；
4. 结构，整齐的，流式的，开放的，还是闭合的，
设计趋势
近几年来，随着Metro风格的简洁与直观、Goole全新的UI体验、Android 4.0系统的平面化，各大主流界面的风格都趋向于简洁，结构清晰，信息突出，减少噪音。
新首页视觉关键字
新首页视觉关键字
寻找新色彩
通过视觉关键字寻找新色域
确定配色
确定配色
蓝色是灵性知性兼具的色彩，在色彩心理学的测试中发现几乎没有人对蓝色反感。明亮的天空蓝，象征希望、理性、理想、独立等。ColourLovers.com公布了一项调查结果，美国前100大网站的Logo，主要使用12种颜色。其中，采用蓝色的网站最多，红色排在第二种。
五. 设计展示
我们把用户需求转化成信息结构，并在用户群体的生活空间里寻找到网站的颜色趋向，接下来，我们把理论转化为交互和视觉的表现方式，新的国际站设计风格从而顺利诞生了。
Alibaba国际站新首页
一致性和标准化
一致性意味着产品界面的不同模块要有相似的外观、感觉和行为。这次改版，我们对网站核心页面同时进行了优化，为用户提供无缝而舒服的浏览体验。
Alibaba国际站新首页_2
Icon重绘
老版本的Icon一是样式不统一；二是原来的Icon质感太重。在新版设计中，我们对新Icon全部采用扁平化处理，用实色填充新绘制的Icon更加能体现出新版本的简洁、清新。
Icon重绘
重新绘制UI组件
简单和统一是体验的关键。新绘制的UI组件，尽可能的去减低UI元素的强度；新绘制的Button采用CSS3实现圆角和渐变；每个组件有2-3个不同的尺寸，尽最大可能为用户带来统一的体验。
重新绘制UI组件
六. 效果反馈
由于考虑到时间和篇幅问题，这次小结还有很多细节没有分析到，比如首页为什么采用990px网格系统，布局上采用怎样的逻辑路径是合理而有效的等。后续会继续给大家分享。新首页发布后，做了A/B测试，做了针对新首页的用户调研，新的视觉风格也得到了多数用户的肯定。引用一位归国华侨对阿里巴巴国际站改版的评论。新首页改版只是我们跨出优化阿里巴巴国际站体验的第一步，后续还会对整站其他页面继续分期进行优化。
感谢大家长期以来对阿里巴巴国际站UED的关注和支持，有任何建议和意见欢迎在此跟帖回复，您的参与和支持将是阿里巴巴国际站UED进步的动力！
篇8：豆瓣FM产品体验小结交互设计
1 以目标为导向，为用户提供优雅的体验
豆瓣FM的用户使用目标是听音乐，当我们进入一个音乐网站，如一听音乐，一般用户的操作流程是搜索浏览-选歌-打开-听歌，如果想换歌还需要反复上面的操作，相对于其他竞争对手产品，豆瓣FM单纯地关注于音乐本身，用户不需要繁琐的操作流程，打开网站的瞬间就有音乐飘入耳朵中，最新版本的豆瓣FM为注册用户提供了私人频道、公共频道和DJ频道，用户可以根据自己喜好进行调频换台，整个完整的操作流程打开网站-听歌-调频体现了产品的收音机隐喻设计理念，更符合用户的心理操作模型，为用户提供了轻便而优雅的使用体验，
2 极简的界面设计，交互的及时响应性
豆瓣的界面设计极为简洁，界面设计只关注音乐本身，整个界面分为四大块，从左到右分别是三个频道、播放器、用户听歌信息及社交分享，去除了其他无关紧要的功能。豆瓣的交互设计多采用鼠标悬停时颜色有变化，提示用户可以操作，响应及时，让用户具有强烈的操作感，播放器设置面板上提供五个操作，右上角是暂停按钮，不过新版的暂停按钮有点小了，每次使用起来很不方便，要是我设计的话，我会把暂停按钮设计的大一点，至少是目前的两倍，
中间播放进度下面是调节声音按钮，这是一个亮点设计，这也是我最爱豆瓣产品的原因，追求极致的简洁，当鼠标悬停在调节声音处时，会自动弹出调节条，用户可以拖动至合适的音量，当鼠标离开时，页面中只剩下了声音的logo标志，保持了界面的简洁。最下面是红心、删除和下一曲按钮，主要是用户听音乐过程中的操作。
3 个性化音乐推送算法
豆瓣的亮点功能是根据用户的收听行为，为用户推送类似或者相近的音乐，这个过程不需要用户过多的参与，用户在听歌的过程中，只需每首歌进行标记诸如红心，删除，还有用户在豆瓣音乐上的社会化行为，比如有哪些音乐标签，喜欢哪些歌手，在听哪些，想听哪些，乐评等。
4 新功能不干扰用户，需要用户渐进式操作
豆瓣为用户提供了分享入口，可以将自己喜欢的音乐分享到豆瓣、微博、MSN、开心网、人人网，这些功能前提都是不干扰用户听音乐，需要用户渐进式的操作。
5 豆瓣的缺点
数据库曲目较少，歌曲重复播放率较高，推送算法还需要改进优化，同一首歌无法连续听一次。
篇9：电子商务，作什么样的流程交互设计
电子商务可以有很多模式
是在平时喜欢四处转转，到各个商铺去看一看，线下商铺的类型还真多，商业中心，大卖场，连锁店，小超市，精品屋，专卖店，批发市场，集贸中心，服务中心，二手市场，体验中心……，各类型的商铺满足不同人群的购物需求，也给人不同的体验，
在我的理解中，这些商店展示什么样的商品，展示多少，采用的购物流程都是经过设计的，并且各自有各自的优势，大卖场上东西比较齐全，价格上也有一定优势，但是比较难找，并且要拎着购物篮或推着购物车“四处乱转”，还有可能排长队结账。但是在小的便利店买东西，虽然东西并不是很多，但是却方便快捷。在大型的商业中心，你可以找到N多品牌的商品，并且可以再极大的程度上满足货比三家的比较感觉。但是在专卖店里面的快速选择，不担心产品的质量问题也是种不错的感受。
有很多人以为，线下的商业模式可以搬到线上来，我也认为至少有一些理论是共通的，但是到现在为止，线上还是只有B2C和C2C，B2B这样孤零零的几种模式，更可悲的是，三个模式的流程还是基本相同的。
但是现在国内的网站还在是B2C的模仿亚马逊，当当，卓越；C2C的模仿淘宝，易趣；一个只有几个商品的公司网站，还是要走首页-》列表页面-》单品页的流程，
一个大件商品服务的的网站，在还要走，购物车-》登录注册-》……的流程。
但是现在我们看到的是大部分电子商务的老板，以开口就是要作国内最大的***购物平台，甚至一个销售***类型商品的网站，要做到国内电子商务的销售量第一。
用户的需求和自身的资源决定购物流程
UCD所提到的方法中，user 的需求是最大的核心，在不同网站中，面对着不同的人群的不同需求，而这些需求就决定了一个互联网公司只能去完成某些需求，解决这些需求对应的流程也不一样。
而企业的资源也是决定流程的另一个重要因素，商品的数量，企业的定位……对购物的流程都是有影响的。例如：一个有着种商品的电子商务网站，必然是要产品列表的，而在一个只有不到20种商品的电子商务网站，是否要产品列表就成问题了。
和白鸦一样的观点，如果你去问用户的这样的流程和结构设计，用户一定告诉你是和淘宝、亚马逊等等网站一样的流程。这一点的上的设计20%看用户访谈的结果，80%看个人的分析。创新的东西是要靠个人的能力，用户不会替设计师创新。
本文来自：hi.baidu.com/koob/blog/item/edbd0cf33d5b2658342accc6.html
篇10：电子商务网站的购物流程设计（简述）交互设计
今天很高兴广东移动给我们提供了会场，同时也很高兴的认识到了上海易土的林汉城先生，同时也有机会邀请到淘宝ued的陈文锋（超群），你可能会问超群是什么意识，昵称？自己去想吧！这次的书友会还是按照之前的流程来走，不过今天大家很高兴参观了广东移动的用户体验实验室，非常专业有水准，让我们这些门外汉终于知道了一个专业的用户体验实验室的布局和设备是啥样，第一次看到了眼动仪，
开始正题，电子商务网站对于有过购物经历的人来说都不陌生，但你在网上有过购物经历不代表你对网购的模式和类型了解，所以这里我们的补充下业务知识，请看维基百科这里的介绍《电子商务经营模式》。
国内常规的网购代表性网站如下：
网络书店（当当、卓越、蔚蓝）
收藏和艺术品拍卖（孔夫子、赵涌）
综合销售平台（淘宝、eBay）
网络订餐（饭桶）
……
我们这次书友会针对以上类型的网购网站，拿出了当当、卓越、淘宝三个出来给现场的与会同学现场操作。由于网速的原因，这一流程进行不是很顺畅。不过给在场很多没有接触过和正在学习中的同学很深的体会，如果没有了网速，在好的产品也是摆设罢了。
购物流程探讨（以淘宝为例 c to c）
探讨淘宝的流程中大家更多的关注点在购物车、二次登录、支付方式、评价体系这四点，可以说这四点也是我们整个购物体验的生态支点。
1.购物车
大家可能注意到淘宝在原有的立即购买的功能上新推出了一个购物车，就是这样一个购物车带了了不少同学的关注。
我们来看看淘宝自己对购物车的说明：
淘宝购物车是淘宝新平台为广大用户提供的一种快捷购物工具。通过购物车，您可以在淘宝一次性批量购买多个宝贝，并可一次性通过支付宝完成付款。
通过购物车，您无须登录更无须下单，即可在您的电脑上随时保存或查看您想要购买的宝贝。淘宝购物车为广大的淘宝用户带来了一种全新的网络购物体验，使购物更加方便快捷！更多说明请看这里。
我们大概了解到这些情况：
优点：
a)淘宝购物车是对淘宝整个产品体系的一个补充，不仅仅是一个功能的加减。
b)购买物品更加快捷，支付可一次性，
缺点
a)支付方式计算的复杂度提高
b)对评价体系有所影响
c)支持的购物范围有限制（只支持一口价的商品）
意外情况
这次书友会上阿锋同学提到了购物车在推出以后被很多的用户当成收藏夹来使用，这是大家没想到的，而且这样的情形是好是坏还需要时间和数据来说明。
2.二次登录
我们在像当当、卓越这样的B TO C网站上买东西的时候都有二次登录的体验，大家普遍的感觉不适。如果要解决这样的问题，估计很难。不在多说，都是体制问题造成的。
3.支付方式
我们最常见的支付方式可以分为电子支付、货到付款、邮局汇款、其他。其中最常见的付款方式是货到付款和电子支付。
货到付款多见于B TO C方面的交易，例如在当当、卓越网上的购书。
电子支付多见于C TO C方面的交易，例如在淘宝、拍拍、有啊等等。电子支付种类方面，目前比例最大的是支付宝，第三方支付已经在电子支付方面占据主要地位。其次是网上银行支付。值得注意的是，除了第三方支付和网银支付外，手机支付已初露头角。
电子支付平台主要有如下一些：支付宝、网上开户银行直接支付、信用卡支付、财付通、百付宝、手机支付、安付通、贝宝、云网支付、环迅支付等等。
4.评价体系
网购的评价体系是个很突出的问题，对于卖家尤为重要。目前这样的评价体系对于C TO C模式下的网购平台显得更为重要。一套完整合理的评价体系建立是需要多方面的推动，来制定一个游戏规则。前些日子，马云来广州布道了，广东电视台有录播。在这次广州举行首届网商交易大会上马云说了不少敏感话题，什么最近要招一批一流的心理学家、社会学家、经济学家来研究其产品，什么痛斥传统行业的陋习，什么淘宝上假货横溢等等，这些最终归结起来就是一个信用问题。而信用的好坏转化出来的结果就是评价，也就是我们常说的“口碑”。希望淘宝上无假货的梦想能够实现。
最后不得不说下移动的用户体验实验室，我想这是每个做产品的人都所希望拥有的。拍了不少照片，鉴于不方便的原因不能公布出来。
书友会实录可以看看我们胡晓同学的BLOG：用户体验提议“看上去很美”（广州第八期回顾）
本文来自：www.xisoo.net//05/20/0517/
篇11：完美瞬间――QQ电脑管家6.0项目小结交互设计
5月31日，QQ电脑管家发布第一个4.0版本，一年来，我们欣喜地看到管家的用户量和口碑在逐渐提升，而随着功能和特性的不断增加，产品细节体验所暴露的问题也越来越多、越来越迫切。由此，产品、CDC设计团队在7、8、9月启动“QQ电脑管家用户体验季”，在界面视觉风格、界面布局、功能引导、智能贴心、信息呈现等方面，集中改进产品细节体验问题。在此期间，设计团队通过封闭设计，对管家目前的体验问题进行集中梳理，将目前管家的体验问题逐一解决。
从去年开始，QQ电脑管家团队每月定期举行用户体验会和专家体验会，对当月版本进行走查体验，同时通过论坛、微博等收集用户反馈，将这些发现的问题并梳理，并在下个版本中着手解决。
首页作为安全体检和其他功能模块的入口，也是用户看到管家的第一个界面，在这次体验优化中做了重点优化。
这次对于引导过程的优化，设计师和产品一起将每个功能的引导wording都进行了检查，之前的wording是简洁风格的，语言会较生硬。这次优化，我们在简洁的基础上，增强了引导的清晰性，同时将语言定位在偏重口语化的风格。
例，如下图所示，一个过程页面的引导wording，必须包含3个部分：
用户在使用管家时，会看到很多和电脑安全相关的信息，之前在内部体验时收到反馈，很多信息因为写的太专业，不理解是什么意思。那么这次针对信息展现优化以下2点：
1. 展现让用户看的懂的信息
将计算机方面的专业术语尽量的翻译成用户可以理解的语言。这次优化，将管家主tab上的功能的信息都做了优化，例如将木马查杀的“自定义扫描”优化为“指定位置扫描”。
2. 弱化非重要的操作按钮。
非重要、不常用的操作按钮在界面中重复出现，会使得界面不简洁。在这次优化中，将非重要操作按钮默认不显示，鼠标mouseover后才显示，
如下图：
反复体验之前的木马查杀，发现一个很小的瞬间：每次开始快速扫描后，在切换tab使用其他功能时，总是不知道扫描何时会完成，于是总是频繁切换tab查看。
怎么办呢？设计师在发现了这个小的细节后，和开发同学一起，将主tab的图标变成了可以动态展现的样式。当用户在进行木马扫描，切换tab后，木马查杀tab会有扫描的动画，告知用户正在扫描。在扫描结束后，同样会将扫描结果展现在图标上。这样，用户就不需要频繁切换tab就知道是否扫描完成了。
这个扫描过程实时反馈的交互方式正在申请专利中，目前国内其他的安全类软件都没有在这个细节点上有相同的表现。
用户会喜欢什么样的视觉风格呢？
管家皮肤改版之前，我们对4组约25名管家典型用户做了图片投射研究，以挖掘用户内心的视觉偏好及原因。图片投射所用50张图片由数位设计师从200张图片中精心挑选，每张图片由约10个视觉维度标签定义。
通过分析用户对各类图片的视觉偏好，得出了每类用户的代表图片及关键标签。
进一步分析用户对管家及偏好图片的认知和评价后，提取出视觉定位关键词。
最后，设计师分别从用户和专业角度上做了视觉定位分析。
经过前面的用户调研我们能够了解到用户心目中理想的QQ电脑管家的感觉，于是在整体风格上作出了定位：
1. 管家的整体风格定位为轻薄的半透明磨砂风格，满足用户希望轻盈安静的心理预期。
2. 图标定位为有一定透视角度的立体图标，满足用户希望管家是实实在在有立体感的心理预期。
3. 在皮肤的设定上我们根据冷色、暖色、明亮、暗淡 四个纬度上做了均衡和取舍，满足不同性别、和年龄层次用户对皮肤风格的要求，总有一款适合您！
QQ电脑管家6.0已经发布，这里感谢参与设计的同学们，在一个会议室里封闭设计的日子虽然辛苦，但确实开心快乐的。
“良好的用户体验，全在于那些完美的瞬间。”QQ电脑管家团队会将体验优化持续进行下去，让用户在使用过程中体验到更快、更安全的瞬间！
最后附上ken老师通宵几晚制作的QQ电脑管家6.0宣传视频:
篇12：不要再追求所^「完整的UCDO流程」交互设计
^去常常被到一似的}：「有]有UXO的SOP？ 我想要入一套像IDEO一樱那N完整的O流程」，每回到@拥拇笤，我都不太好意思直接Ψ嚼渌，竟提出@拥}，必定是於使用有一定的追求c憧憬。不^，很H的r是，大多倒司都不需要「完整的」O流程；相反地，大家真正需要的是，一「有效而且性的」O流程。
f，世界上K不是]有整套M的UCD (User-Centered Design)O流程，事上多得是，而且得超完整。下DUPA的Typical UCD Process就是一很好的例⒖ 。我得第一次看到@O流程D的r候，曾@@地l出啊的一，然後心e想著：怎N可能念^到尾，全部都跑^一次啊？是的，每案子都可以@优懿庞泄怼．各公司的UX team都在追求更多的rg、更多的Y源，K且f服公司老要入完整的O流程的同r，基本上我的战是：很y跑完所^完整的O流程，而且就算跑完了，通常@O0敢以失∈觥
失。空娴幔UCDO流程看起矶己芎侠矶且乐啊，怎N不成功呢？
UPA Typical UCD Process, 能蛘娴亩寂芡瓴庞泄
地球是A的，而且不停快速D
UCD流程其]有e，每一O0福基本上都必要睦斫馐褂谜唛_始，^user profile以及scenario的分析，找到在的}cCc，然後逐步l展概念、C，K且走向部O。@基本原t跟人需要吃喝水一幼匀唬不需要再多做解。
只不^，在I界根本]有那N多rg，可以等繁}精实难芯蟾妫世界上也]有那N乖巧的κ指消M者，右膊拥氐仍谀难e，你把市雎慢研究透兀然後再花6-12月的rg把a品OC到位。
e例，我曾v^好新a品的研l，研究Fe花了2-3月去做b密的使用者L、}j分析，最後a出了灼S地有的使用者研究蟾妫不Hc出了醉具w的使用者需求，而且也提供了好可能的O}j。在那下，研究蟾娴r值是很高的。不^S著rg^去，走L後，κ值男庐a品推出，一下子M足了其中醉O需求；月後，新技g的出F，又消除了}c；半年後，消M者於h}的岫乳_始明@降亍V链耍m然@些新a品已投入了大量Y源去O研l，走向量a，但是r值s已大p。
於是UX team陷入一o限圈，不嘀匮}辛苦地lF需求，看著κ指上，然後留下「我早在半年前就知道了」的z憾。
拿出UP跟白，化贤ǎ加快速度
被嫌速度太慢，花太多rg，缀跏敲恳有M、有流程、重品|的OF，被其他部T啾г沟墓餐}。不M言，我н^的每一F，在不同公司文化下，全都被嫌^@件事，哈哈。回^想想，UCDO的速度能否再快一c？我自己的Y果，很危只要把XP了，把UP跟白拿出恚就看到效果。
UP跟白，是最省X力，也是最有效的O工具
首先，UCD首重理解使用者、清}c需求。既然使用者不在Xe，把XP了，直接走到目俗迦旱鲇颍_始做[身Lrg地^察，必要r立刻做抽釉L。K且逐日z、修正L方向c架，直到找出}j即可。@N性速成的作法，K]有k法_到o可挑剔的可信度，但是可以在^短的rg龋找到大的O}j，那也就蛄恕
再恚把UP跟白拿出恚@有助於OW⒃诮Q「使用者的}」，而非解QLD工具的「操作}」。不要小看UP跟，好的概念O，用UP就可以勾勒出主要的架跟廓，藉此做快速的l散跟收，
如果一介面O用UP，用嘴巴贤ǎ在1分]有k法人感受到r值，那N八成就可以先放在旁，s快想新的。至於LDw，在概念A段能不用就不用吧。@N}s又M神的工具，光是用它l、填色，就耗去很多rg跟X力。^X的Y源很珍F，用问×Φ墓ぞ呔秃谩T僬f一次，我要解Q的是「使用者的}」，而非解QLD工具的「操作}」。
然後是化贤ā贤ǖ某杀臼呛芨叩模尤其是公司扔MIS部T，定期更新Exchange Server版本的大公司，贤ǔ杀靖是o法想像地高 (汗)。e例，我^去每天平均要收120-150封信件，_4-5小r的h，然後打5-10通。@些贤ㄓ写龠M我跟各部T的PS，有加快F的O速度跟品|幔]有，老f一c也]有。
要化贤ā⒓涌焖俣龋最快的方法就是把RD、PM一起抓M碛^察使用者，然後以O短的L期，不嗟刂匮}「lF}、解Q}」的流程，直到a品到位。@邮×穗、信件，也省掉了精美PowerPoint，以及一堆]有人看的各式文件。省掉形式，化贤ǎ把每一份力舛蓟ㄔ谟行У禺a出，@是Agile Development的精神，也呼了最近_始崛起的Lean UX。
然而，只有O可以加快速度幔慨然不是。如果你家的PM，拿著@篇文章砜勰忝弊樱他回^想清楚自己的工作e，有多少比例是粹鬟f息，≌意，跟催M度等行政工作。他也省c力庠o^的事情上，多花crg跟著研lF一起a品、解Q使用者的}。UCD是每一人的事，只有每人都在意，都J同，才有可能看到成果。
照著上面f的做，就天下太平了幔
a品_l有@N渭就好了，呵。
理想的UCDO流程，像是Bill Buxton在Sketching User Interfaces所提到的@D。淖蟮接沂且逐u收砍尚蔚倪^程，S著rg^去，母拍畈D，逐u形塑成O原型。中g有不嗟iteration，但是O方向逐u明_，O部T投入的Y源越碓缴佟
理想中的Product Development Process
(Bill Buxton, Sketching User Interfaces)
但是Hr比^像下D。Y架 (Information Architecture) 跟介面O (Design)除了在前半段投入大量心力外，在程式_l出第一版本，以及a品上市前，通常至少都有刹ǜ叨让β灯凇＿@段期g的Y源投入，理上是不需要的，因樵O架已_定，a品_l的狄呀降到最低。然而，天有不yL，人有旦夕福。a品_l中一定遇到各Nr，像是_l平台更新SDK、老要求加新功能、零M件供商倒了，什N事都有可能，突lr永h比你A想的多。
H上遇到的 Product Development Process
(goo.gl/4Z1pE)
所以，一定要自己的O流程更加「有效而且性」，K且常保一w酚^、有幽默感的心。F在就把XP了、拿出UP跟白，Q方式碜鲈O。f不定，你做的更愉快，更有成就感也f不定。
延伸籍：
Sketching User Interfaces
www.books.com.tw/exep/assp.php/handyui/exep/prod/booksfile.php?item=F011092596
餐巾的背後：一枝P＋一就可以解Q}＋f服老＆客
www.books.com.tw/exep/assp.php/handyui/exep/prod/booksfile.php?item=0010418902
篇13：淘宝非会员速拍的购买流程设计交互设计
Feir童鞋之前的一篇关于电子商务网站的非登陆用户处理写得不错，我之前也专门做了研究，今天也特别把电子商务网站里非注册用户购买这个设计的理解和案例记录一下。
这里有个最基本的逻辑：电子商务网站允许非注册用户购买。电子商务网站的购物流程设计将这个逻辑涵盖进去是完全合理的。对比现实的例子，我们逛商场通常是不会预先把自己的信息交给商场（这个过程可以理解为办理会员卡的过程，其实等同于电子商务网站的注册流程）再来购买。所以我认为电子商务网站首要保证的是用户购物顺畅，尽可能减少购物过程的干扰。而对用户信息的收集等方面的需求，其优先级应该降低。
淘宝对这个流程的设计异常巧妙。应用场景是这样的：假设某用户在淘宝上闲逛，看到一件中意的商品，然后直接点击了立即支付。接着是如下两种情形之一：
1. 验证cookie，发现了浏览器保存有之前使用的淘宝账户信息，于是提示登陆，
2. 验证cookie，没有发现任何淘宝账户信息，则弹出“非会员速拍”窗口：
这这二选一而言，如果你在淘宝有账户并且没有清空cookie的变态习惯，第二种设计对你是完全隐藏的，用户根本感觉不到设计的存在。而对于非会员速拍之后的设计也很巧妙，三项内容（用户、密码、邮箱）即帮你激活了2个账户：淘宝和支付宝。并且一直到支付环节也非常顺畅，基本不会被其他信息打断（包括支付密码这个环节也没有形成干扰）。我成功的使用非会员速拍完成了两次购物，均非常顺利。
最后讲一个细节：观察后两幅插图的tab设计，淘宝和支付宝（尤其是支付宝）非常有效地利用tab设计可以将多个流程并列在一个页面，减少了流程的步骤，提高了交易成功率。
本文来自：www.imguangyao.com/archives/665
篇14：主流互联网公司的产品项目流程，以及UE设计师的角色交互设计
偶然看到的阿里巴巴一张产品设计流程图，对比了一下目前mtime的产品流程设计，发现基本上是一模一样的，看来国内主流的互联网公司的产品研发流程基本一致。我也简单讲解一下，说不定可以帮助到有志成为互联网UED设计者的后来人。
点击看完整大图
这套流程不知道是不是从美国人民那引进而来的，记得好几年前看了一本书，叫 《用户体验的要素》，当年看完了可以说一头雾水，不知所云。作者说的“战略层、框架层……”云云，最后还画了一张类似楼房设计图的画，来解释整个UED的设计流程，现在回想，实际做下来，也不过就是上面这张图的流程而已。
首先，需求分析
需求来自于多方面，比如公司的战略目标，UV或是P/V；也可能是商业需求，比如放入购物车的转化率或是活动参与率；更有可能来自一些用户的呼声，某些活跃用户慨叹“有了XX功能就好了”之类的。但是最有可能的还是需求还是来自于历史数据的总结，比如某产品明显没人用，或是用户不活跃，那么这个产品就是需要优化的。有时候需求甚至来自于“XX网火了，它的模式是否能复制？”这样的理由。总之，作为一个产品设计者，不要幻想你就是在那想最牛的设计是什么样的，然后画个原型出来一鸣惊人一把，绝大多数的时候，新产品或是优化的需求都是跟着公司的大方向在走，有时候需求的收集甚至是挺痛苦的事情。当然也不尽然，如果有用户访谈的话会有趣不少，从中收集的需求也往往会让你很是吃惊，用户访谈的问卷设计也是一门很大的学问，有时间可以再详细的写写。
总而言之，经过需求分析，并且拿出历史数据来证明你的论点，你可以提交一个新产品或是产品优化的报告了，这个报告可以是PPT，也有可能是个流程图，拿着这个报告去跟团队PK吧。
原型设计
有了需求，就可以真正开始着手设计了。最开始的原型设计是低保真的，可以拿纸画，但是只能给你自己看看；大多数情况下还是使用visio、fireworks等，这些家伙有个缺点就是只能展示一下样子，没办法展示交互；最新的解决方案是Axure RP，一个可以实现链接、弹出层等交互功能的web原型设计软件，最大的缺点应该就是不好用，不方便。如果是重展示的产品，比如门户网站的频道页，还是使用fireworks这种高视觉仿真的；如果是人机交互性特别强的产品，比如“群组里发帖功能”，那最好还是Auxure RP，画的时候是费点力气，开会讨论的时候可以省不少口舌。
原型设计的方法和哲学，基本就可以讲一本书了，这篇文章只讨论流程，不追求细腻了，
画完了以后团队内部讨论，再跟领导PK，也就是所谓的专家意见，经过一番激烈的辩论和修修改改之后，终于拿出了一个产品部内部满意的高保真交互原型作品。这还没到松一口气的时候，比较重要的产品的话，还会要求你要拿着这个原型去跟用户开体验会，会上你需要观察用户，并向他们提问，提问的问题大致就是“第一感觉是什么？第一个想要点击的是哪？最让你感到迷惑的是哪？”，这个对一个UED设计师是一个比较大的挑战，你需要足够的洞察力和判断力。其中还有一个经验之谈，受访用户大都会根据自己的经验乱提一通建议，然后自己略感洋洋得意，这时候一定要记得体验会的目的是收集用户的体验，而不是专门去听取非专家们的意见。选择性的摘取了用户的反馈后，你需要提交一个用户体验测试报告，报告中会提到这个设计最大的问题，哪里是流畅使用的障碍。之后再按照此报告对症下药，对原型做出修改。
再经过一番PK和讨论，恭喜你终于拿出了大家都满意的作品，作为产品设计师的你，最大的任务就算完成了。
视觉设计
拿着沉甸甸的原型，交给UI设计师，确保他们领会了你的精神，并且嘱咐任何疑问随时来找你。这里又有一个经验之谈，就是GUI设计师往往会对你的产品加一些他认为比较美观的东西，这个时侯一定要毫不手软，坚决砍掉。一定要秉持的一个理念是，GUI设计师不应该在原型体验基础上，增加任何附加元素，这是对最初的用户体验的一种伤害。举个简单的例子，你写了一个栏目名叫“粉丝群”，他为了美观又在栏目title下加了一个英文的“fans club”，这个就是增加了不必要的附加信息。
视觉设计肯定也要经过一番讨论和PK，UE设计师在其中的角色就是把关者，一定要捍卫自己的体验设计，这时候对自己产品的深刻理解非常重要。
html切割
对UE设计师来说乏善可陈，这个时侯最好是开始着手为开发组书写需求文档。
开发
文档写好了就和开发组的同仁开需求确认会，把你要实现的功能讲清楚了。开发过程中，UE设计师要做的就是答疑。
内测版上线
测试组的同事测好了，就会交给你验收。你需要做的是看看开发的同事是不是真的按照你写的需求文档上那样，弹出窗口，或是向下展开。
注意这个环节中有可能再来一次用户体验会，你需要做的也和之前差不多，可能唯一多的一样就是真诚的祈祷，不要提出很致命的产品流程缺陷，那就前功尽弃了，虽然不至于推倒重来，但是需求变更确实是件麻烦事。
产品上线
终于上线啦，欣喜的看着用户讨论它的同时，你有可能需要配合业务部门组织一下新产品的推广，当然只能作为辅助啦。
然后再开始观察历史数据，收集用户需求，提出优化……循环啦。
本文来自：www.overpaper.com/?p=57
★ 初中心理教案
★ 心理教案
★ 小学音乐课教案
★ 文物拍卖管理规定
★ 沟通心理教案
【拍卖出价流程浮窗设计小结交互设计（共14篇）】相关文章：
网店的策划书2023-08-16
网店开店策划书2023-09-29
大一心理健康教学设计2022-12-22
上海拍车牌介绍信2024-01-23
机动车牌管理新政策规定2023-04-05
网店运营策划书2023-02-14
开毛绒玩具网店策划书2022-12-24
竞技健美操的专项竞技能力特征探析论文2022-05-07
商城策划书2022-11-01
箱包网店策划书范文2022-04-29