新浪博客

细节！细节！细节！WPS2012新界面诞生侧记

2011-11-04 16:04阅读：

http://blog.sina.cn/dpool/blog/u/1298306070

　　作者：陈鹏 金山软件 · 珠海
　　时间回溯到半年前，最初的WPS2012新界面是长啥样的呢？
细节！细节！细节！WPS2012新界面诞生侧记
　　上图就是早期版本的WPS 2012新界面。对产品界面做优化和改进之前，我们需要考虑：
　　1、如何让用户第一眼就能找到自己最关注的功能和信息；
　　2、如何保持界面的一致性，尽可能降低用户的认知成本；
　　3、是否有影响用户判断，干扰用户操作的视觉噪声；
　　4、是否存在各种隐晦、不明确的信息，让用户陷入猜测、迷惑之中；
　　5、不要去违背大多数用户已具备的常识以及各种约定俗成的操作和习惯；
　　6、不要为了增添新的功能特性而牺牲产品的可用性和用户体验；
　　…………
　　按这些思路分析图中三个部分，我们发现以下问题：
　　1、菜单栏
细节！细节！细节！WPS2012新界面诞生侧记
　　1）软件标示“WPS 文字 2012”为不可点击文本，用类似超链接文本的蓝色会让用户误认为可点击；
　　2）下拉菜单按钮（小箭头）不明显且点击区域太小，易被用户忽略。
　　2、快速访问工具栏（QAT）
细节！细节！细节！WPS2012新界面诞生侧记

　　1）QAT放置于主菜单选项卡之后并不理想，不在视觉热区，且用起来很不顺手；
　　2）此位置也有随主菜单长度变化（如出现上下文选项卡）而前后移位，导致位置不固定的隐患（不管是在单一产品中还是在WPS文字、表格、演示三套产品中）。而用户更习惯在界面左上的固定区域中寻找和使用QAT；
　　3）QAT前面的弧形分隔图较为突兀，与整体界面不协调，样式也不够耐看。
　　3、文档标签栏
细节！细节！细节！WPS2012新界面诞生侧记
　　1）文档标签页选中项与非选中项状态区分不明显；
　　2）文档标签页选中项与文档工作区体现不出包含和归属关系；
　　3）标签页后面的方形按钮无标识，用户不进行尝试的话看不出意义。
　　针对上述问题我们理出了以下方案：
　　1、改进WPS标示文字颜色与主选项卡文字颜色；
　　2、考虑去除原经典下拉菜单，并将WPS标示与“文件”选项卡整合，以新下拉菜单方式展现；
　　3、将快速访问工具栏移到功能区之下，文档标签页的前面，这样“粘贴、保存、复制、撤销、加粗”这5个最常用的功能按钮将集中在界面的左上区域且固定不变，很容易被用户识别及记住。
　　4、重新设计文档标签样式，包括状态；
　　5、在标签页文档标题前加上文档类型（包含文档状态）图标；
　　6、美化方形按钮，让用户望而知义；并将“新建空白文档”图标与方形按钮整合；
　　7、上述设计的交互细节与业务逻辑（略去）.........
　　按照以上方案得出两套原型图:
　　原型图一：
细节！细节！细节！WPS2012新界面诞生侧记
　　原型图二：
细节！细节！细节！WPS2012新界面诞生侧记
　　经过A/B测试和讨论调查，大家更喜欢图二。原因如下：软件标示更鲜明，产品形象更突出；界面更为简洁美观，层次结构更为清晰；按钮及新菜单也更为易用。
　　因此，有了2012封测版的界面，如下：
细节！细节！细节！WPS2012新界面诞生侧记
　　在封测和内测中，根据用户的反馈，我们又调整了快速访问工具栏，新增了“打印”按钮等，因此，界面就成了大家现在看到的这个样子：
细节！细节！细节！WPS2012新界面诞生侧记
　　后记：
　　在设计过程中我们主要把握两个设计原则，一个是目标导向，即让用户很容易的找到和使用产品的功能，从而达到他们的目标，满足初始动机（能超越用户期望当然更好）；另一个是简约设计，界面元素简洁清爽，将尽可能的不会对用户的工作造成干扰及障碍。
　　新界面优化与改进还在持续进行中，文中三处细节仅是冰山一角，改进的点点滴滴还有很多。但毕竟，交互的好坏，只能由用户来评判，还请大家多多提出意见、建议。用得爽或不爽都请告诉我们，我们会持续改进^_^

我的更多文章

下载客户端阅读体验更佳

APP专享