移动端产品再设计经验分享

移动端产品再设计经验分享

FrozenTeethFrozenTeeth
最近有打算尝试对现有产品进行重新设计,来看看来自 Jingxi Li 的方法论罗。

设立再设计目标

在对已有产品再设计之前,最好能跟利益相关各方进行讨论,以了解各方的考虑和需求。包括产品经理,设计师,开发人员等。但如果你不是在这个团队里面工作,那你也可以在网上搜集一些该产品相关资料,对产品有更多了解。

为发行做计划

一开始,我们发现需要为我们的产品 sing!做导航栏的再设计,从而提高产品功能的可发现性。也就是说,从传统的工业汉堡式导航到底部导航栏。这是个巨大的改变,所以我们只能回到画板上重新考虑:什么是最主要的功能,怎样才是合理的、功能性的、层级化的导航栏。最首要的问题是,我们是应该为导航栏单独重新设计,还是融入再设计这个过程中。一般来说,在引入新的功能的时候,我们的流程是这样的:

  1. 建立假设
  2. 设计和创建新功能
  3. 给用户展示新功能
  4. 衡量和分析新功能的表现
  5. 评估该功能是否达到了预期的假设
  6. 验证最初的假设

这个过程可以让我们从用户角度了解每一个步骤质的影响。

选择平台 锁定资源

主要的决定做好之后,下一个问题是在安卓还是 iOS 平台发布的问题,我们面临的条件是:1)所有的改动都有很高风险;

2)我们没有资源去支撑一个 A/B testing 来验证哪个更好;

3) 我们的设计和开发资源都很有限。

在这个情况下,考虑到我们安卓版本的产品比 iOS 产品的功能更少,留存率也更差,我们决定在安卓版本进行这个更新实验。这样就可以锁定我们有限的资源(1个设计 4个开发)到安卓版本。这样风险也更小。

开始设计吧!

在再设计项目开始之前,需要留出足够的时间研究设计方案,整个过程应该是简洁且敏捷式的。再设计包含两个步骤:

  • 建立一个新的导航原型,但不改变现有的视觉设计
  • 创建新的设计来推出新的 UX/UI 原则,包括新的色彩,字体和图标。

第二步尤其需要研究来得出什么是产品的主色调,什么新字体最合适,怎样的设计原则能适配两个平台。

进行新的导航设计

  1. 找到适合你产品目标的导航结构

主要问题在于,需要解决不同尺寸上显示的问题,包括笔记本,台式,手机。而手机的各种不同尺寸又让问题更复杂。在 2014年 的时候,我们发现市面上有三种基础标准:

1)iOS 标准(主屏幕导航)

2)安卓标准 (汉堡式导航)

3)个性化的、按照开发者需求来

我们发现导航的设计不应该按照屏幕尺寸来决定,而应该看产品要满足什么需要。比如像创造型的应用,比如 instagram,就适合主屏幕导航。而且如果一个产品是浏览型的,比如邮件应用或是新闻类应用,那么用汉堡式导航就是不错的选择。

而如果一个产品只满足一个关键需求,比如 Uber 或是 Snapchat, 那么设计一种个性化的导航来满足这单一的需求更好。
而如果一个产品只满足一个关键需求,比如 Uber 或是 Snapchat, 那么设计一种个性化的导航来满足这单一的需求更好。

2. 围绕主题组织功能

我们的产品是一款用音乐连接用户的应用,也就是说,创建音乐和社交是两个核心主题,其他功能应该围绕该核心主题展开。

按照这个思路设计导航,我们把所有的功能重新排列了一遍。适应「音乐 」功能的,就归入「音乐 」类,适应「社交 」的,就归入「社交 」类,而像「注册 」这种两者都不适合的功能,我们创建了一个「其他 」。而在分类内部,我们根据用户调研数据和产品目标等把这些功能进行排列,来最大化用户体验。

3. 为导航建立清晰的层级结构

传统的导航设计有三种类型:全局导航,局部导航以及情景导航。我们根据以前的经验挑选出了五个使用频率最高的功能组成了一个全局导航,剩下的则成为了局部导航的一部分。最后,由于手机屏幕没法让用户像在电脑上一样从一个屏幕跳到另一个屏幕,对于叠加屏幕的设计(什么时候叠加、什么时候清理)就应该有个清晰的规则,以防给用户造成困惑。

这样做的结果是,我们安卓新版的产品获得了更好的用户留存率。

开始产品再设计

设计策略

手机再设计平台的选择很重要。两个平台都有自己的设计规范。有些公司喜欢先设计好 iOS 的产品 UI 风格,再把 iOS 设计风格迁移到安卓平台;有些公司则喜欢直接用两种语言分别设计两个平台的产品,这样可以分别符合 iOS 的扁平化设计和安卓的材料设计。

对于这两种做法,都是有利有弊。第一种做法节约时间,第二种做法用户体验更好。

而我们最终打算自己创建一个融合材料设计和扁平化设计的设计规范来做一个折中方案。

颜色的选择

1. 找到一个代表品牌调性的主色调

我们首先考虑了未来的用户会是谁。因为我们的产品是一款有趣的社区应用,强调用户热情好客的属性,并想要吸引乐观、自信的用户,所以我们参考了颜色情绪板来选择了一个主色调。

2. 从主色出发,创建一个品牌色板

创建色板有很多方法,我们采用的方法是混合两种颜色来取色:从主色出发到白色混合,以及从主色出发到黑色。然后在这两个区域之间,我们区分了 8 个色度,这样我们就一共有了包含 19 种颜色的品牌色板。这样,我们就可以从中选出强调色,字体色,图标色,分割色和背景色了。

对于字体颜色,一般用黑白是最保险的。但是因为我们的产品是面向具有创造力的用户,只有黑白可能有点单调了。所以在基于好几轮的研究和探索的基础上,我们选出了几款标题,主体内容和 CTA 的字体颜色。

另外,背景色,分割色和导航色都要比字体颜色浅,才能突出字体,增强可读性。

3. 建立一个设计原则和规范

有一个统一的指导原则才可以让整体设计风格统一,同时还可以节省开发很多时间。

其他一些注意事项

  • 再设计过程中与开发保持沟通协作
  • 设计新的屏幕来给出全新的体验
  • 对设计进行质量监管,以保证最终开发出来的产品与设计最大可能保持一致

感谢阅读!
感谢阅读!

原文参考:Yeah, redesign

个人专栏:盒子以外 全是设计、产品和科技。

欢迎关注:知乎专栏「极光日报」,每天为 Makers 导读三篇优质英文文章。
「随意」
还没有人赞赏,快来当第一个赞赏的人吧!
文章被以下专栏收录
7 条评论
推荐阅读