GIF功能的交互设计：经历了三个阶段、五个版本.doc

《GIF功能的交互设计：经历了三个阶段、五个版本.doc》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、GIF功能的交互设计：经历了三个阶段、五个版本　　在设计过程中，不断否定自己、推翻原有方案的过程也充分证明了一个事实———永远都有更好的方案等着你去发现！这样，才能真正让自己的产品在迭代过程中沿着“有用”、“可用”、“易用”到“好用”的过程不断变得更好！　　　　功能介绍：GIF功能通过将播放器播放的内容片段生成连续的Gif动画来满足用户对视频片段的分享需求。　　这一功能的交互设计前后经历了三个阶段、五个版本的设计，最终得到了一个目前阶段相对满意的设计。　　第一阶段　　方案一　　这一阶段的主要设计工作基本是通

2、过对分析竞品并收集功能，然后将这些一定的布局原则进行排布：　　（1）控件形式的合理性　　控件应当与业务相吻合、方便使用，如：　　对开始位置的调节、对截取时长的调节，截取间隔的设置使用滑块形式易于操作；　　保存路径使用了Windows下通用的方式；　　触发下一动作的入口“预览”、“保存”使用了按钮形式等等。　　元素位置和布局合理：如使用对角线原则——重要界面元素应当在从左上至右下的纵贯线上，如将“预览”、“保存到电脑”、“分享到微博”、“下载到手机”置于界面右下角。　　布局美观性：界面元素大小不一，通过排版保

3、证布局整齐、错落有致。　　　　但很快我便觉得这一设计并不理想，原因主要是，界面元素太多，用户使用起来会感觉非常复杂，学习成本比较高。所以便开始了第二阶段的设计优化。　　第二阶段　　在第二阶段，重新设计以简化界面元素方便用户使用为目标，以优化控件形式、删除多余控件和隐藏界面元素为手段来进行的，这一阶段前后设计了两版大同小异的方案：　　方案二　　　　　　将不常用的功能隐藏到高级功能中——隐藏修改保存路径、修改截取间隔、修改截图尺寸　　将类似功能以下拉菜单组合在一起——保存、预览、分享到微博、下载到手机。　　这里

4、之所以说四项功能类似，是因为这四项功能都是截图过程的最终操作。　　但思来想去，觉得这个方案仍然不够理想，原因在于：　　首先，即便是在隐藏高级设置的状态下，用户需要面对的设置项仍然比较多——开始位置的设置及微调，结束位置的设置及微调；　　其次，开始位置的控件，圆点后方的蓝线结束位置不可调节，可能会给用户理解和使用控件造成障碍。　　那么，是不是还能有进一步精简的空间呢？　　方案三　　　　于是，基于方案二，我对隐藏高级选项状态下的控件做进一步优化的尝试：　　将开始位置和结束位置在一条时间轴上显示，但这样一来这条时

5、间轴两侧的微调按钮便出现了歧异，用户微调时到底是微调开始位置还是微调结束位置呢？　　于是，我又给了小圆点一个选中状态，开始位置或结束位置始终有一个处于选中状态，微调对处于选中的那个圆点生效。　　这样便得到了一个极为少见的、用户可能从未使用过的控件，这也存在问题，用户使用这个控件同样需要学习成本，而且，用户在一半的情况下做微调操作前需要首先选择他要微调的项目，操作过程略显繁琐，这个方案同样并不理想。　　继续思考，是不是可以不把功能做的这么“重”呢，用户真的需要那么多的设置吗？如果我把功能进一步精简又如何呢，于

6、是有了以“删除”为主的方案四。　　方案四　　　　这个方案我对功能做了比较大删减，仅保留生成Gif造作比较基本的功能：　　删除开始位置（开始位置仅可在进入截图模式前调整）　　删除截取时长（生成GIF时长固定）　　不支持微调功能　　删除预览功能　　提供一套可以满足大多需求的默认设置　　这样得到了方案四，这个方案看来也仍然有很多让人不满意的地方，过多删除掉的功能让可能损失高级用户，没有预览用户根本不知道生成的gif将包含哪些画面，界面虽然得以简化，但功能受到了很大的限制、易用性也变差了。总体来讲，这个设计甚至还不

7、如之前的方案二和三。　　第一、二阶段的三个方案同时还面临这一个我尚未提及的问题，如果用这三套方案支持在线视频的GIF截取，那么在在线视频数据未完全加载时，数据的加载策略会很复杂，需要切换开始位置（切换开始位置时预览画面需要随之切换）、生成GIF过程中考虑对数据加载的处理。　　第三阶段　　在第一、第二阶段设计了四套方案，但始终没有得到令我满意的结果，那么是否还有更好的方案呢？突然想到前段期间正好在读《简约至上——交互设计四策略》这本书，书中描述了简约设计的四个策略，即：删除、组织、隐藏和转移四个策略，前面的三

8、套方案的设计虽然也得到了部分应用，但肯定还存其它办法可以尝试。随机拿起书来随意翻看，终于有了灵感，隐藏策略中有一种方式叫做“阶段展示”，可以在这个思路上试一试。　　方案五　　　　首先，我保播放器控制栏增加一个明显的易于在播放过程中点击的”GIF”按钮，点击这个按钮后边直接从视频的这一位置开始截取过程。　　　　接着，用户点击后弹出截图小窗口，小窗口从点击“GIF”按钮的视频位置继续播放视频作为对即将生成GIF内容的