Mac QQ Redesign 心得

11/4/2015 ☼ UI学习RedesignSketch

前一段时间一直都在学习 javascript,也为了能够在前端的方向上能够走的稍微远那么一点点。然而正是因为编程是一向的软肋,所以在日常的学习提高中往往不经意之间再比较薄弱的方面倾注了更多的时间和精力。这也就导致了,除了工作项目上的设计类工作外。业余时间反而不再怎么做设计的具体工作了,这也是我一段时间以来一直纠结的。

正所谓拳不离手,曲不离口。要是设计的具体工作不能尽可能多的融入我的生活,就总让我没有安全感。让我担心自己失去设计思维,或者也可以说是设计师角度的惯性思维。尽管在有时候,这种惯性思维会带来一些不好的影响。但是凡事都要从多方面来看,失去惯性思维的弊病就是会影响具体工作的效率。

优秀的设计师我认为是能够在产品 - 设计 - 开发这三者角色之间快速无缝转换的。如果说把这三个角色的能力或是职责看作是一个圆圈的话,那我们努力做的就是将这三个圈尽可能的重合在一起,交际变得更大。在从事其中一个角色的时候也能经常性的换位到另外两个角色的角度去看问题,去思考。这也是我对于自己的一个理想中的定位。

好了,话题扯远了。还是回到这次做的这个 Mac QQ Redesign 吧。之所以选定Mac 版的 QQ 主要的原因还是出于对 Mac 版 QQ 的丑陋忍无可忍。当然,可能有人觉得我做的 redesign 更烂吧,哈哈。在这次做完后,我意识到。自己或许应该把这次设计过程中遇到的问题以及一些思路写下来,整理一下。这么做的意义不管对于别人开拓思路或是自己整理工作流程都能是一份宝贵的资料吧。

以下就是我在这次设计中遇到的问题,以及解决思路。还有就是不满意的地方,也都记录下来。或许将来会有一天将之完善,尽管这种可能性微乎其微。

  1. 首先就是左侧的对话、联系人、群组的标签栏与对话、联系人列表以及邮件、空间等功能如何分布的问题。原来的设计最让我难受的就是左上角的关闭最小化全屏三个按钮的间距,总觉得太小了。好像要从面板上掉下去的感觉,特别没有安全感。而且和周边元素的间距居然不一样。虽然我不是处女座,是最大条的射手座,可居然连我都忍不了。所以在这次我的设计中我首先想到的就是避免这种情况的发生,上面的标题栏工具栏采用更为常规的设计。
  2. 这样一来标签栏我当时想的就是不能再放在左侧一个竖条了。主要的考虑是觉得头像和联系人列表中的头像并排放在一起有些拥挤,就好像本来拍成一排的队伍,在最前端排第一的边上又站了一个人一样。可后来我在使用 Mac 版微信的时候觉得 Mac 版微信的处理方法也还好。并没有那么的难受,并且换来的好处也很明显,我会在后面提到。
  3. 对话、联系人和群组的标签图标我认为原版设计的更好,我在设计过程当中直接从 icon-font 里选用了对应的。但是看起来似乎有点瘦长,在颜色选用上也有待商榷,还可以再做出进一步的调整。现在的失去了原来的轻盈之感。在布局上我总是不免在想,如果我按照 Mac 版微信的布局来做调整会不会更好呢?这是我做完之后心里不甘心的一个想法。当然我之所以把标签放在下面的目的也是为了能够左侧占用的水平空间更小,看起来更简洁而已。至于是否真的达到了这个目的,也是仁者见仁智者见智了。
  4. 很明显的,邮件、空间等按钮我是采用了常规的 osx 应用的工具栏设计。左上角对于我而言是个经常容易被忽视的位置,平时在使用其他应用的时候动不动就忘记了这里的按钮。我想的是邮件和空间都是有红点提醒的图标,所以放在这个不起眼的位置正合适,当出现提醒的红点时正好能够从不显眼的位置跳出来提醒人注意。而没有提醒时,又能实实在在的“隐身”,从界面上“消失”。因为我个人是很少用到这三个按钮的,大部分时候的设计我都会优先从自己使用的角度出发。我觉得这也是我一个很不好的习惯,毕竟我的个人习惯并不能代表大多数用户。只能代表和我同类的用户罢了,由此可以看出用户模型的建立与调查研究对于产品设计是有多么的至关重要。而在这里我较不满意的就是空间的图标。我因为懒惰选用的 icon-font 里 star 的图标,这种尖角的五角星太容易让人与收藏混淆了。而且里面没有了z,更降低了区别度。或许会有人认为这个是收藏对话的按钮也说不定,但是点击之后发现打开了空间。没能得到预期的结果,让人产生使用上的误会,这是不好的体验,今后要极力避免。还有就是这一组图标距离上面的边距也有问题,现在看起来有点小了。点击起来没有安全感,总担心点到面板外面去。
  5. 工具栏中间的对话人名称我一开始是绝对居中于窗口的。后来发现这里是会和下面右侧的对话窗口看作是一体的。今天恰巧看了格式塔的文章,细想一下对话人名称和对话窗口正是一个极好的例子。所以对话人的名称是应当相对于对话内容部分居中的。
  6. 右上角的功能按钮,是使用小按钮还是大按钮也还是一个难以说清的选择。毕竟是常用功能,大一点清晰明了,而且似乎反而会更干净。这在我完成设计后,是有点后悔的。即使真的是要放在上面的工具条里使用小图标,也应该加上按钮框,增大间距才是。不然小按钮,没有边框,间距又不够。很容易产生点击的模糊区。有些位置让你不能够足够肯定点下去,会点到哪个功能。归根结底还是我常说的,操作中的安全感问题。界面的响应和符合心里预期都是为了这个目的,让用户时刻能够体会到“一切都在我的控制之中”。迷惑是不应该出现的。
  7. 对话的文字颜色这一版有些深了,看得多了可能会有些累。而背景色我纠结了很久,是不是应该采用饱和度更高更醒目的颜色。那样或许看起来更提神,更清新。但我又担心太过刺眼,我事后思考了一下使用场景,得出的结论是纯度更高的背景色配以不管是黑色或是反白的文字都是合适的。毕竟对话聊天不同于写作,需要的更多的是活跃的思维。我之前认为的安静的书写场景在聊天应用中还是不常见的。醒目和让人眼前一亮的感觉才是聊天应用所需要的。
  8. 表情截图等功能图标,我认为无论是颜色还是设计原版的都很好,就没再做出改动,很简洁干净。当然我理想中还是只保留表情图标,其他的都放到一个更多的图标按钮中。只不过这种处理方式在实际的使用中造成很大的不便,而我在设计时,还是会从使用体验上给与一定的考虑的,不会一味的追求自己心目中理想的极简炫酷设计。毕竟 UI 是拿来用的。
  9. 但是原来的语音按钮是我不能忍的。像一个黑痣,我觉得明明可以用一个点亮的按钮来表示就 ok 了。却非要用一个拨动的开关来表示,总之这里给我一种为了使用这种按钮形式而设计的感觉。一种为了设计而设计的过度设计之感,所以我在这里做了简化。当然在提示上面应该再做出更丰富的提示细节以弥补界面上的弱化。

以上就是我在做这个设计时遇到的一些问题和解决思路以及一些后续的不足与反思。我觉得用这种评论性的眼光总结自己的作品往往能够得到新的收获。我希望今后能多多写这种文章,也欢迎大家把自己的作品分享出来,一起讨论交流。

谢谢!


All Rights © Justin Bibi, 2018. Please do not use without permission.