惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Blog — PlanetScale
Blog — PlanetScale
Y
Y Combinator Blog
G
Google Developers Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
L
LangChain Blog
S
SegmentFault 最新的问题
J
Java Code Geeks
V
Visual Studio Blog
H
Help Net Security
Stack Overflow Blog
Stack Overflow Blog
aimingoo的专栏
aimingoo的专栏
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
T
Tailwind CSS Blog
Microsoft Azure Blog
Microsoft Azure Blog
博客园_首页
H
Hackread – Cybersecurity News, Data Breaches, AI and More
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
博客园 - Franky
B
Blog RSS Feed
The Cloudflare Blog
MyScale Blog
MyScale Blog
月光博客
月光博客
Microsoft Security Blog
Microsoft Security Blog
美团技术团队

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派
项目背景
2020-03-24 · via 少数派

undefined麻雀记是一款专注个人记录的优秀App。麻雀记可以帮助你整理各种信息,包括便签、清单、图片、倒数日、纪念日、心情、地址、链接等。你可以使用看板、标签以及四象限等功能来帮助你更好地归纳整理。


项目背景

麻雀记是我和朋友一起合作设计开发的聚合记录应用,可以记录不同类型的信息,它原本的名字叫卡片夹,只是单纯当作一个卡包应用,随着用户量越来越多,简单的功能不再满足用户,2.0-3.0版本名字改为麻雀笔记,这段时期也是用户增长的快速时期,随着用户再度达到一个量级,版本暴露的问题越来越明显,4.0版本重新改版设计,就是为了解决这些问题,同时为了不让我们局限于笔记记录,麻雀笔记也再度改名为麻雀记。

本次改版升级,从11月份开始着手进行调研并进行设计到元旦上线的4.0第一个版本,倾计了我和朋友的心血,由于我和朋友有各自的工作,留给项目开发的时间并不多,有很多界面和功能暂时还属于未开发状态,我们也会尽自己可能去优化完善这个app。

这次复盘也是为了给这个项目做一个总结,同时在整理的过程中,也发现了一些自己的问题,对于我来说,这更有助于自己的成长,同时使产品的交互思路更加清晰,本次复盘将按以下几个维度顺序进行:

给自己一个问号?为什么要进行麻雀记4.0升级?通过线上用户的调研,查找APP评论区所反馈的需求,以及自己反复的测试,找出产品本身所存在的问题,以及用户需要的功能进行整理并列举出来,将其分为两大类,并根据四象限管理法,进行排序,为之后的产品规划明确方向。

undefined

undefined

通过上面的需求以及问题,3.0现有框架很难在支持功能扩展,部分交互层级比较深,高级版用户转化率低,功能堆叠较多,急需梳理简化,分类笔记卡片样式简陋,缺乏一致性。

undefined

通过上诉的产品需求以及问题,确定产品方向以及设计规划,绘制流程图并且开始制定规范

根据记录好的改版思路,对产品框架进行搭建,以便加进用户所需要的功能,同时最大的侧重点还是可拓展性


整理好上面这些东西之后,我跟开发就开始着手商量设计4.0了,前期做了几稿首页,最后跟开发确定好一稿,并在这稿的基础上优化,同时开始整理设计规范,同时设计新logo,将logo的一些品牌基因代入到了设计稿中。

搭建规范,有利于界面的统一设计,同时,组件化的设计可以方便后续设计和对接开发更加方便快捷。

设计原则

我们的用户阶层从学生-职员-宝妈都有,由于年龄范围跨度大,设计方向不能做到讨好每个阶层,且为工具类应用,所以我们的设计方向就定位统一有序,简洁易用,严谨沉稳。

字体

中英文  PingFang SC          数字 Alibaba

这款字体是阿里出的可商用数字字体,字形我觉得很好看,所以就拿来用了,唯一的遗憾就是没有英文字体。

由于这款字体数字字号偏小,所以要比中文字号偏大2个字号

颜色

颜色方面,我们选择黑色为品牌色,同时选色的时候加入蓝色调,文章显示更为和谐舒服,有提高助于用户的阅读体验。

同时我们也发现了大多数黑白色调的APP在设计方面都是极为冷淡的,有点偏离了我们的想法,所以加入了一些点缀色,来提亮整个页面,达到沉稳中带着一股活泼的目的。

点缀色主要用于,图标,按钮,选中文字,卡片背景等..

主点缀色用绿色的原因是,有些用户用我们的产品记录一些隐私的笔记,但是又怕我们产品安全性不足,导致泄漏之类的事情发生。而绿色在我们的潜意识中,默认就是代表安全的,有保障的。所以以这个深沉的绿色作为我们的主点缀色。

LOGO设计

旧logo是朋友不知道从哪里下载的图片,然后扣下来当作logo,想着4.0大改版,我就把logo进行了重新绘制。

取名麻雀记的寓意是因为:麻雀虽小,五脏俱全;这个成语很适合我们目前产品的定位,所以叫做麻雀记。所以我们以麻雀为原型,绘制了新的logo,我们的初衷是,简单易记,看到图标就能想起我们的麻雀记。

是的,我做了个两个logo的图标,3.0最后的几个版本可以让用户自行选择使用哪个图标,4.0更新的时候,我们留下了使用率最高的那个版本

刚开始画的时候,我们就给自己定了方向,以麻雀为主,画出麻雀的形,我画了接近20稿,从中选中两个大概的框架进行细致优化,也忘记了多少版,最后才出到我们满意的这个版本


字体设计

对麻雀记这三个进行设计,由于我是第一次接触字体设计,只能凭着自己的感觉来。对一些笔画进行简化,同时我们的app方向偏向沉稳,所以字体设计便稳。

图标设计

一个好看的界面,少不了精致的图标,清晰易懂的图形可以降低用户的阅读成本,所以,我对所有图标进行了统一的规范设计,来提升界面的美观,提高用户的使用体验。

线性图标

对所有的线性图标进行规范化设计,设计的原则是:简单,精致,易懂。

同时为了体现品牌的统一性,将字体的一些特点代入到图标,比如端点去掉全圆角,而是用半圆角,这样做出来的图标,圆润中又带着一股沉稳。

当界面图标以图标为辅助提示的时候,描边为3px,达到平衡界面的目的。

当界面以图标为主要说明的时候,描边为4px,强化图标的主导位置。

同一图标不同状态就不展示了

undefined

分类图标

创建笔记界面,用轻拟物和不同颜色来区分笔记类型。

天气图标

因为日记类型的笔记需要天气,就画了多种天气图标

心情图标

画了各种状态的表情。

营销图标

高级功能营销页面的图标

插画设计

插画框架是是由erics大佬分享的可商用插画,在征得他的同意后,对其框架进行我二次调整修改,使其更加符合麻雀记的基调。

插画的融入,更加贴近用户,让用户感受到温度。

笔记卡片

3.0版本中,笔记卡片样式简陋,区分不开每种类型的笔记,4.0对卡片进行了统一的设计绘制,不同类型的笔记,尽量在排版上区分开来,虽然卡片样式不一致,但是界面看着更加统一。

整个卡片设计,字体和间距都以4的倍数来设计,有规则的数字,可以使界面更加的整洁有规律

全部卡片

每个类似的笔记都有不同的显示样式,通过排版,对不同信息进行统一布局展示。

流程简化

简化时间线操作流程,使其操作更加明朗。

undefined

自定义

用户希望时间线不显示所有类型的笔记,我们就根据用户的意愿,加入了自定义显示笔记类型,同时时间格式有天·周·月·年四个选项让用户选择。

笔记显示方式也支持卡片显示和宫格显示。


笔记操作

通过长按或者点击操作图标,从底部呼出操作功能,可以对笔记进行置顶,移动,删除,添加标签等操作

支持批量操作

undefined

跟时间线界面一样,,简化了操作的流程。

undefined

切换

通过左右滑动进行分类切换,选中对tab保持在中间

分类排序

同时支持用户自定义排序分类,打开设置页面,拖动分类进行排序。

这是麻雀记4.0的新功能,也是用户最想要的功能之一。

通俗来讲,他是类似一个文件夹一样,可以将不同类型

的笔记整理归纳在一起

用的是大卡片的设计,更视觉冲击力,同时对滑动手势进行了充分的利用,左右滑动切换卡片,向上滑动进入整理界面,下滑进入操作界面。

将看板的图片作为看板内部的封面,同时将遮罩层延升到整个界面,令用户有沉浸式的体验。

向左滑动呼出操作,可以进行删除和编辑,便签颜色可以通过编辑进行更换。

长按拖动可以对标签进行排序

四象限法则是管理理论的一个重要观念,用户可以将笔记分为:重要且紧急,重要不紧急,不重要紧急,不紧急不重要四个等级,从而有效地管理笔记。

每个等级只显示最新的笔记,同时以堆叠的设计可以让界面设计有立体感,增加用户点击到欲望

品牌融入

顶部以logo和宣传语显示,将品牌融入到界面,同时将不同功能进行重新整理分类。

同时提高麻雀vip入口的权重。

无账号

因为我们本身是一个工具类软件,并且只有我一个朋友在开发,账号体系开发时间成本较高,同时为了方便后期维护,我们考虑再三还是舍弃了账号体系。

麻雀VIP

人终归是要恰饭的,但是这并不是我们主要的收入来源,纯粹是为了app的运作所做的一些策略,毕竟普通版的功能已经能够应付日常使用了,所以在设计这个界面,并没有用很营销的色彩,而是用相对比较沉稳的蓝黑色,让我们的用户理性开通。

备份

我们没有用账号体系的原因大部分是因为用户并不愿意将他们的一些笔记记录上传到我们的服务器,因为他们怕我们会窃取他们的私密信息。

所以我们这个备份的功能就支持他们自己的搭建网盘备份,通过开通坚果云等支持云同步的网盘,填入对应的资料,就可以实现自动云备份了。换手机或者多人使用同个笔记,都可自动同步信息。

同时我们也支持本地备份。并且本地备份不会因为软件的卸载而丢失。

因为是个聚合记录应用,所以有很多记录的类型,采用轻拟物微渐变去设计icon,使每种类型的icon都能清晰识别。

通过体验市面上所有的笔记类应用,我们发现到他们的布局样式大致分为这两种方案。

方案一是通过左右滑动来选择字体样式的,而方案二则是通过收起输入法,来选择字体样式。


方案选择

我们分别选择了几个用户,给两个布局让他们使用一段时间。收到的反馈结果是,方案一的使用感觉比方案二要好很多,方案二因为反复的收起输入法,调用输入法,没有方案一打字的畅快凌厉的感觉,给人的体验没有方案一好。最后我们选择了方案一的布局来进行设计。

undefined

undefined

夜间模式下,提高文字对比度,降低明度,同时去掉了大部分的点缀色。打造夜间浏览的最佳界面

由于我们只有一个我朋友一个开发,所以我们决定分批把界面功能更新上去,自19年12月31号上线了4.0的第一个版本(只更新了几个主要界面和功能)到现在已经过去了三个月,收到了大量用户的好评,单酷安这一平台,我们2019一整年就10W下载量,今年以三个月的时间就突破到17W下载量。

用户评论

翻阅评论区是我们调研的一种方式,记录用户的需求,跟用户互动,挖掘更多的使用方法,这次更新受到了大量用户的好评,纷纷入正高级版本支持我们,我们也会尽力去优化好这款产品(以下评论均为真实用户反馈)

同时也收到了各个平台的推广

交互思考

其实一接手麻雀记设计的时候,我就在思考,如何让用户更加快速的记录灵感?体验了很多个应用,查找了各种开源库,做了很多个尝试,最终做了四个方案出来,也是我比较满意的点,目前已经上线的有三个方案(只针对安卓手机)。