细节至上——Splus微博设计之界面篇（转）

细节至上——Splus微博设计之界面篇（转）

http://blog.snaildesign.com/?p=41

 

Posted on September 26, 2010 by admin

首先，要感谢新浪微博，强大完善的开放API，让我们得以实现自己开发一款小互联网产品的梦想:)
我们的Splus微博是基于新浪微博API接口的AIR桌面客户端，目标是为了使用户获得更好的接受微博信息、传播微博信息的体验。
设计之初，Splus微博就想要做最优秀的微博客户端，并以此为目标，从用户层面开始设计，并且在上线后不断完善，不断追求，关注每个微小的细节，任何一点不满意的地方都会被反复重设计并测试。

一起来了解一下Splus微博UI设计方面一些背后的点点滴滴吧，开始咯~
———————————-时刻注意细节的分割线————————

0.原型设计
原型必不可少，我们先使用Axure画出了Splus的低保真原型，简单而粗糙，但它却奠定了我们UI的基础。

图-1 Splus微博axure原型

参考现有的客户端是开发必不可少的，因此，从AIR微博、SinaTair，到微波炉、wing微博，我们都一直在充分试用，吸收一些优秀的客户端 的经验。而且不仅仅是新浪微博的客户端，一些现有的IM的客户端，也是我们获取参考的重要途径，这些包括QQ、Gtalk、MSN等等。

图-2 各类客户端

我们从Splus微博的登录界面开始，来一点一点看看Splus的UI设计细节。

1.主程序背景样式

使用了单张PNG图片为背景，并设计了窗口边框的阴影和四周圆角，增强视觉效果。

图-3 主程序窗口样式

2.登录Logo设计

为了能充分使用应用样式，所有的图片均被设计成PNG格式，保留了图片的Alpha通道。Logo也遵循了PNG格式图片，保留了一些图片的透明部分，这样Logo和背景样式无缝地融合在一起。

图-4 动态更换的LOGO

注：为了能在特别的日子里设计特别的LOGO ，并没有固定死LOGO 图片，而是根据配置来动态更换LOGO ，这样在情人节、五一、中秋、国庆等等节日，或者一些纪念日里，都可以设计一些相关主题的LOGO 。

3.用户登录

用户名称和密码输入框使用了自定义的样式，以与客户端的整体主题风格一致，调整了输入框的大小。考虑到默认的字体并不是很好，因此“登录”按钮使用了定制的图片样式，包括文字是一张完整的图片，从大小到颜色都做了细心的设计。

图-5 用户登录输入框

4.Logo图标

这里的Logo图标是指显示在标题栏上的Splus图标-“S+新浪微博AIR”，登录前显示在标题栏位置，登录后则只在状态栏位置显示，标题栏的位置则用来显示用户的头像等用户信息。

图-6 标题栏Logo图标

图-7 移到状态栏的Logo

5.登录前与登录后

初版设计时，登录前仅仅显示LOGO、用户名称、密码和登录按钮，是一个较小的登录界面，如下图：

图-8 微型登录窗口

那么这种方式就类似QQ的经典登录方式。然而，我们想到可能会发布一些通知信息，例如一些宣传或者版本升级方面的信息，因此在登录界面的下方预留了 一部分空间，用以显示一些通知信息。因此最终的意见就是登录前的窗口大小和登录后的窗口大小保持一致，仅在登录后切换一下界面，见上图-3。

6.用户登录后的基本信息布局

用户的基本信息包括头像、用户昵称、所属地区、关注数、粉丝数、微博数等，需要显示的内容主要也是是这些，那么就看如何来布局这些元素，以及如何设 置它们的样式，让用户觉得更自然一些。按照阅读习惯性，头像和其它文字类的信息以左右布局。为了能稍微突出并个性化头像部分，将头像稍微突出窗口边缘。头 像与下方的Tab按钮组第一个按钮垂直方向对齐。

图-9 登录用户基本信息

因为头像是正方形，而窗口本身的样式为长矩形，且四周略有圆角。如果直接显示头像，必然使这部分看起来“不和谐”，需要找个方法让头像四个角也显示 成圆角的.我们使用了蒙板过滤的方法，画了个带圆角的正方形，然后作为头像的蒙板，并调整好位置，这样头像看起来就和窗口的其他四个角一样了。

图-10 带圆角的头像

7.用户微博消息列表面板

参考新浪微博的网页版，我们也将微博消息分成了我关注的人微博、提及到我的、评论、私信、我的收藏和我发的微博列表，另外加上一个随便看看的列表， 这样如果看到感兴趣的用户或者话题的话，可以加关注。根据分类，用户微博消息面板被分成了7种，7个个性图标用以区分。在分隔线旁边为今日推荐、搜索和刷 新按钮，便于操作。

图-11 用户微博消息列表面板

8.微博消息列表的设计

列表设计的基本原则要是易于阅读消息，消息之间的分隔要容易区分，如果有是经过转发的消息，则原始消息和转发消息之间的关系要能表达明确。对微博的常用转发、评论、收藏和删除等操作要方便，快捷。

图-12 微博消息列表

图-13 列表设计细节描述

微博消息之间的分隔符使用线条来区分，为了能更容易识别，分隔线中间添加了高亮线条，以3个像素的高度为分隔符。鼠标经过消息(ROLL_OVER)时高亮显示背景色，以标识当前正在阅读的微博。

图-14 微博消息分隔线

9.单条微博消息的显示与操作：转发、评论、收藏、@和私信

微博消息，根据它的消息实体，可获取的信息有用户信息和微博消息，显示的内容就包括当前微博发布者的头像、用户昵称、是否认证用户、微博消息内容、转发微博的内容。

对于单条微博消息的操作主要有转发、评论、收藏和抢沙发的功能，这四个功能的图标在设计上以单色为主，转发和评论配合显示数量的标签，用以了解当前的微博的“热”度。因为转发的微博里，原始微博和转发的都是微博，因此按钮使用了相同的图标。

图-15 单条微博消息

10.转发、评论和私信窗口

转发、评论和私信窗口使用了统一的窗口，为了突出转发、评论和私信的不同，最初版的设计是使用比较大的红色圆形图标浮动在文字部分的右下方，像一个印章一样。如下图显示：

图-16 带印章的转发窗口

但是使用时发现一个问题，那就是文字较少时，这些“图章”显示时比较占用空间，不能较好地统一。

因此还是采用较小的“转”、“评”和“私”图标，16*16大小，显示在用户昵称的最前面部分。

图-17 转发、评论和私信回复窗口

11.翻页工具栏

随着关注者越来越多，那么消息也会越来越多，就会有要看历史微博，几小时前的，甚至几天前的，或者更久的，这样，翻页工具栏必不可少。但是，这个翻 页工具栏也不是使用频率非常高的，也仅仅是偶尔使用。因此它所在的位置不能太显眼，不能占据太大的空间，另外要能容易找到。浮动在微博列表右下方是目前较 为妥当的位置，并且降低了透明度，这样阅读消息时不至于“抢”用户的视线。鼠标在经过翻页工具栏时，以淡入的方式显示出工具栏，移出工具栏时，再以淡出的 方式降低透明度。

图-18 翻页工具栏

12.查看指定用户的信息

Splus微博在查看用户信息时，最初的方式是先显示一个简单的用户信息窗口，包括用户头像，昵称，关注、粉丝和微博数，而没有显示用户的微博列表。

图-19 初版用户信息窗口

经过讨论，我们还是直接在列表里显示用户基本信息，和用户已经发的微博列表，这样操作比较方便，用户信息和微博的关联会比较“紧密”，最终的样式就是目前版本的样式，整合了用户信息和微博列表，用户文本信息之间以虚线分隔。

图-20 用户信息面板

图-21 用户信息和微博列表设计全图

13.搜索用户

目前新浪微博没有对开发者开放搜索功能，因此搜索目前只能精确地根据用户昵称来查找用户，搜索输入框在设计上就显得比较简单，一个文本框，一个图标按钮，搜索框以半透明方式显示，为了体现当前浮动窗口对应的功能，在右上方以箭头指示。

图-22 用户搜索

14.微博消息弹出窗口

Google的产品一直以它优秀的设计博得众多用户的喜欢，它的每一个改进都能给人带来惊喜。

Splus的微博消息弹出窗口借鉴了Gtalk的邮件提醒方式，对于有多条微博的以翻页的方式显示。我们做了进一步的改进，用户反映在全屏看视频时经常因为弹出窗口打断了视频观看，如果关闭提醒需要打开设置窗口，因此我们直接在弹出窗口里添加了“不再显示”的快捷按钮。

图-23 微博消息弹出窗口

15. 提示信息

提示信息的位置设计在窗口在列表下方的位置，黑色半透明样式，白字，上下边缘带有高亮效果。提示信息在一定时间后，自动 淡出消失。

图-24 提示信息

16.一些通用组件的样式：按钮、滚动条和复选框

我们给按钮和滚动条设置了统一的样式，并设置了样式的九宫格属性，这样不管按钮或者滚动条宽度和高度如何发生变化，样式所使用的图片都不会产生变形，会自动适应组件的大小。

几个特殊的按钮直接使用了图片的方式，并固定了大小，例如“登录”、“发布”按钮，其它仅仅是使用了borderSkin，并配合文字标签。

对于滚动条，做了特别的处理，默认的滚动条比较宽，因此我们在设计时减少了两个像素，看起来更精致轻盈一些。

图-25 通用组件样式

OK，有关Splus微博的界面方面的介绍基本到这里就结束了，主要的界面设计均包含在内。
如果恰好你也是新浪微博的用户，一定要试一下我们的Splus微博哦~这里下载
或者你有好的建议要告诉我们，赶快@我们 吧~

欢迎继续围观《Splus微博设计之交互设计篇》，coming soon…