Rush - 如何确定视觉风格

每一个小改动,都会产生奇妙的变化,带来不一样的感受。

Rush 目前已上架 App Store 和 Google Play、豌豆荚等安卓平台。您可以在 App Store 搜索“Rush mail”下载。


到公司的前一天,就让 Adams (CEO) 给我装上了 Rush,看了下整体界面,问题很多,确定要换一套 UI 后,最重要的事情就是赋予产品一个鲜明的视觉风格。找准产品的基调,找出目前版本的问题,一个一个改。

产品基调

首先我作为设计师分享一些我喜欢的 app,并从我的角度指出现在产品的问题,与产品组其他同事交换意见。向老板征询,他眼中的 Rush 是什么样的,他想让 Rush 传递怎样的价值观,听听他对竞品的视觉和交互有何看法?

经过两天调研,产品小组确定了 Rush 的基调是:轻松、简洁、愉悦。

  1. “轻松”:用户在使用 Rush 的时候可以在清晰的界面中很快理解产品,准确的了解每处交互的意义并上手使用,不会产生疑惑甚至焦虑。
  2. “简洁”:在视觉层面没有冗余元素干扰,按优先级高低给用户展示信息,尊重需求本身,不做过度设计;在交互层面能预判每处交互能产生的效果,不会超出预期而产生心理负担。
  3. “愉悦”:Rush 的使用场景是在工作中,我们希望从功能上体现专业性,从视觉上给人明快、活泼、放松、有趣的感觉,而非工具型 app 常见的冰冷的感觉。

问题在哪,怎么改?

按具体页面讲下老界面有什么问题,以及改完后的样子。

Mail

老界面

交互问题

  1. 搜索框里右侧的筛选器在功能上与搜索没关系,放在框里有歧义;
  2. 页面网上滑后发现,navigation bar 、搜索栏、日期栏都置顶了,再加上 tab bar 也是固定底部,导致中间的邮件列表显示高度特别小,产品说搜索是一个刚性需求必须一致出现;
  3. 星标出现就把时间给覆盖掉了,逻辑不顺,整个 mail list 就是一条 timeline,时间是唯一的排序依据,而且邮件的时间是很重要的信息;
  4. 邮件标题和正文的截断位置很突然,后面明明还有很多空间;
  5. 新邮件只加粗字体,用户注意不到这是一封新邮件,提醒太弱;

视觉问题

  1. 整体色调灰暗,主题色显得黯淡,背景色偏深,尤其灰上用蓝,蓝灰上用深灰,都显得不协调;
  2. Icon 绘制粗糙,tab bar 上的 icon 显得特别小;
  3. 头像偏小;
  4. 用了除系统字体以外的字体,乍一看很不协调;
  5. 邮件列表里的字都太小了,极不适合阅读;
天气、邮件集合、露出附件这些需求后来都被拿掉了;

改完后:

修改后

交互修改点:

  1. 把筛选器从搜索框中拿出来,搜索框不fix在顶部,上滑后 navigation bar 上出现搜索 icon 保证一直有搜索入口的这一需求;
  2. 将星标、附件的位置放到正文那一行,保证时间露出,并在视觉稿里给出同时出现星标和附件的情况下怎么排版;
  3. 邮件标题和正文的截断位置往后延伸至屏幕边缘,让内容显示得更多,并给出标题遇到右侧星标或附件 icon 的情况下如何截断;
  4. 新邮件给一个蓝点加重提醒;

视觉修改点:

  1. 上下两个 bar 的颜色都改成白色,底部 bar 透明度97%,微微露出 mail list 的后续内容增加通透感,不用毛玻璃(毛玻璃不太干净),索性把底部 bar 的文字也拿掉,不影响使用的前提下;
  2. 重绘 app 内所有 icon ,保证造型端正、风格统一;
  3. 背景色改淡,定下两个原则,不在灰底上使用主题蓝,不在蓝灰底上使用纯灰;
  4. 这个界面元素非常多,尽可能在尊重需求的前提下简化元素,除了拿掉底部 bar 上的说明文字外,我还拿掉了顶部左上角的邮箱的圆形底板,搜索框里的搜索 icon;
  5. 邮件列表中,列表上面的线条拿掉,因为列表内容与上面的时间(today, yesterday)是关联的,不需要区隔,中间的线条改为不打通的,让列表更整体;
  6. 重中之重:大改邮件列表的排版。由于我们的视觉稿和默认文档都是英文版,所以 iOS 端使用 San Francisco - UI Display,Android 端使用 Roboto 为默认字体,反复尝试最合适的文字大小和粗细,我每改一版都会截图到手机里一张张看,最后光这一个列表就做了超过60张,才确定下我认为最层次分明、适合阅读的排版,和最主流的一些邮件客户端对比,我觉得这页邮件列表还是很耐看的;
  7. 为什么要给界面加圆角?这个我没有特别强的理由说明,也是很纠结要不要这么做,本来知乎和 Pintrest 的界面都有圆角,但后来他们都改掉了。最后还是在 iOS 端用了圆角,可以简单看一下加不加圆角的对比,我个人是觉得加了圆角更好看;
左边是没有圆角的情况,右边有圆角
一样的主题色,在不同的背景下,明显右边要更明亮,所以定下了“不能在灰底上使用主题蓝”的原则
左边是老背景色,右边是新背景色,可以对比下色表中点的位置
探索聊天 icon 的过程
上下两个bar的修改很关键,这张图里的通讯录 icon 是改版初期的,现在改掉了
规范化间距(文字一般都使用默认行高)

Android 端的 mail 界面:

Android 端 Mail 界面

Chat

老的 Chat 界面

问题与解决办法:

  1. 与 Mail 统一用搜索框,拿掉 top bar 上的搜索入口;
  2. 红色气泡占用了时间的位置,且气泡尺寸太小;
  3. 聊天列表里的正文、时间、icon都太小了,排版需要打磨;
  4. 禁止提醒后收到新消息,在铃铛上加红点的提示方式太别扭;
  5. 正文截断位置不对;

来看改完后的 Chat:

修改后的 Chat

Contacts

老的 Contacts 界面

问题与解决办法:

  1. 通讯录 icon 的画法不对,重新想创意;
  2. 乍一看全是线条,我把列表上下的线条全部拿掉了;
  3. 上面三个 icon 平淡无奇,很死板;
  4. 同样统一搜索入口,改成搜索框;
  5. 征询产品后拿掉了列表里的邮件地址,因为这个地址不是找人的依据;
  6. 右侧的字母索引不好看,很挤;
  7. 右上角的添加好友按钮可以更形象的表示加“人”;

改完后:

改完后的 Contacts 界面

下一篇讲控件。