Kevin Blog

聊一聊 50 音起源的再设计

在春节期间 50音起源 发布了重新设计的 1.1 版本。

这里也一并拿出老版本的设计对比一下。

重新设计的起因,是因为之前的版本是作为「最小可用」的产品去设计的,因此当希望进行功能拓展时,并不能适应新的需求。考虑到这也是一个尝试一些新设计,突破自我的时候,我喝了杯咖啡便开动了。

「起源」再设计

很显然,随着用户的重度使用,起源相关的内容会逐渐被掌握,这个页面的查看几率也会逐步下降,直到用户几乎忽略这部分功能。

恰好,在新版中,我有几个想要实现的功能

  • 根据用户的学习情况,动态提示用户学习和复习的内容
  • 特训功能,帮助用户针对自己的弱项高强度学习
  • 提供一些和人文相关的日常信息,比如星期几,月份的传统讲法

为了融合这两部分,我尝试在原版的风格上进行拓展,及其艰难的,我设计出了下图的状况

在起身观看这半截设计的时候,我觉得是无法接受的,这是一个毫无美感,甚至比之前更差,难以协调的设计。抱着对自己怀疑和羞耻之情,我重新开了一个 Sketch 文档,和过去彻底做一个了断。

所幸的是,这种了断真的减轻了我的思想包袱,我得以很轻松的去尝试新的设计。在新的设计中,我希望给用户一种愉悦,宁静的心情,所以色彩成了我首先考虑的元素。

基于 iOS 的 Large Title 去简化了界面元素,删除分割线,再按照功能去划分了不同的 Section. 每个 Section 按照对应的功能特色去进行「形式」的设计。

最终「起源」就完成了它的再设计,成为了「今天」

「学习」的再设计

在旧版的设计中,学习的部分在现在来看,是简单过头了

更让我介意的是,配合这样的白色主题,学习过程会显得比较乏味。我希望在新的设计中,通过色彩的变化,给用户新鲜感。每个不同的学习项目,都配合了不同的颜色主题,这个主题和「今天」中的卡片颜色是对应一致的。

同时,选择题的圆形会很大程度上限制内容的长度,因此也做了对应的修改。

最终得到的结果还是让我满意的,抛弃了 iOS 的系统主题框架,新的进度条和课程提示信息也显得更加赏心悦目。

「速查」与「课程」的再设计

这部分的改动其实不多,主要是对主题色彩进行了统一

修改了会让气氛显得严肃的衬线体,从而在整体上能够保持让用户感到轻松的心情。

后记

这次再设计,整体上已经能够承担未来 1 年多的功能演化,在这个过程中,及时与旧设计说再见想来是我做的非常正确的一个决定,如果一个设计已经不能够给你灵感,那么确实也是时候去做些改变了。