从零开始设计产品的 10 个 UI/UX 启示

2016 年的时候,我意识到一个很重要的问题:我一直都没有实现自己的目标:学习新技能、结识新朋友、保持身心健康,等等等等。这并不是因为我没有意愿和动力,而是因为我没有坚持下去。

Peter Drucker 说过:「量化才能管理。」这个格言后来成为了我的信条。我决定将我的目标量化,将它分解成为最基础的习惯来执行,并且以每天一定量的执行,来实现最终的目标。

最开始,我会使用一张网格纸来跟踪我每天的学习进度,健身以及心理健康状况。然后这个习惯持续了好几年,生活逐渐有所改观,并且养成了将每个不同的目标进行分解、逐步完成的习惯。

这种行为模式和方法在我自己身上得到了验证。不过我在纸上坚持追踪行为习惯多年后,我决定和 Wilson 一起创建一个程序,来升级这种「习惯追踪」的工具,我们先构建了一个免费的 Chrome 插件 Confetti ,这是一个能够帮你追踪日常习惯的工具,每次完成一个任务,都会有五彩缤纷的纸屑效果出现,祝贺你守住了习惯,达成目标。

在四年多的产品设计生涯当中,这是我从头到尾全是自己完成的产品,这个过程中,我有了很多启发。在这篇文章当中,我将会分享我的见解,希望对你也有所帮助。

1

一开始就要界定好产品特性

一开始,我和 Wilson 就决定使用3屏的主要功能,并构建了一个粗糙的原型。但是,我们没有足够的远见,无法设想我们的产品最终的方向,也没有对全部的想法进行深入的打磨。

最终,我们向后退了一步。我们回过头来,确定了最小可执行原型的发布日期,以及真正的核心功能。我们在 Notion 上创建了一个文档,并且开始梳理和管理哪些功能是「必需品」,哪些功能「如果有了会更好」。比如,登录、注册、新用户引导是必不可少的功能。但是,我们认为「重新排列习惯」是一个提升体验但是并不亟需的功能。

我们基于这一点,我们开始抓住核心功能,尽可能让它们足够易用,强化核心特性。通过确定核心功能的优先级,并且确定发布日期,借此缓解我们的精神压力,确定我们不会被成堆的功能所淹没。这也似地我们有足够的动力解决核心功能。

2

有很多流程和状态需要搞定

在设计产品的时候,我经常被提醒要处理好每一个边缘情况,填好每一个坑,确保体验的顺畅。从零开始构建产品是一把双刃剑:基于自己的构想来创造产品是令人兴奋的,但是相应的,我需要经常在舒适区以外处理问题。

我一直在 Skookum 从事产品设计的工作,而这些工作通常都是在一定的约束条件下进行的,但是现在所要处理的产品则不同。之前的产品都可以借助现成的设计系统,有早已搭建好的设计语言,有完整的组件,有明确的 UI 状态,有非常明确的基础架构,但是这次是我自己的产品,所有的这些都没有。而且,这个产品还可能会存在几种极端的情况、流程和状态。

比如,在注册流程中,按钮会有默认、禁用、激活、填充、错误、悬停等几种状态,但是除了这些之外,我还需要考虑诸如密码重置的流程和体验,这可能会涉及到 6 个高度相似的 UI 界面状态:

输入 Email

重新发送 Email

Email 通知设计

输入新的密码

错误界面

成功界面

这个过程中,有很多东西都令我一度感到迷惑,这也引发出我下一个要说的要点……

3

创建用户流程

项目开始之后,我很快就遭遇了组织架构问题。因为我是在工作之余来创建这个产品,这导致我犯了一个非常严重的错误:我没有按照传统的产品流程来创建产品,这随后导致了一系列的问题。

按照标准的产品设计流程,我需要从用户流程开始创建,定义用户可能会执行的流程,并且针对主要的流程界面进行必要的总结说明。

因为这个项目和之前的工作不一样,我一开始就忘记了遵循流程这件事情,我错误地将它视作为一个包含几个简单界面的简单项目(是不是听着特别耳熟?很多所谓的小项目翻车都是从这里开始的)。这样一来,当我开始处理诸多按钮的不同状态和界面变化的时候,整个用户流程变得混乱不堪,并且我很难确定其中的体验漏洞有哪些。

最终我停止了这种随性的设计方式,并且在 Whimsical 当中创建了完整的用户流程。于是我很快清楚了那些环节有所缺失,以及整个界面流程的走向。

按照用户流程来梳理界面的时候,可以对于整个产品的屏幕状态有所了解,并且随着产品的发展膨胀,用户流程的重要性会随之增长,成为至关重要的部分。

4

交互应该反馈到UI中

的确,在完成整个 UI 之前,不应该开始向着项目当中添加动画。但是,不添加并不意味着你无需考虑。

实际上,不同的微交互和动画对于实际的体验影响是巨大的。你在思考 UI 设计的时候,就应该考虑到微交互和动画的使用,避免在后续动效和交互落地的时候,进行不必要的修改。

比如,当我在设计「达成成就」这一体验的时候,我就考虑到了需要用到的微交互的效果,所以在我设计 UI 的时候可以顺着我自己的喜好来进行设计,并且将可能会用到的动效拖到某个角落暂时记下来,避免在设计 UI 的阶段,影响了整体的流程和效果。而后续加入动效的时候,就会方便很多。

我认为,将 UI 和交互结合起来考虑是非常重要的,因为两者共通塑造了体验。如果在设计 UI 的环节直接加动效,会让整个设计过程变得复杂臃肿。

5

尽早获得反馈

其实这也是我在这个项目中犯的一个大错:等了太长时间才获得反馈。

我通常是在晚上回家和周末才有空推进这个项目,在很长的一段时间内,我没有真正告诉任何人。

当我终于同我的家人、朋友、用户以及网上乐于尝鲜的用户公布了这一产品之后,他们在使用过程中,开始注意到了很多细节上显而易见、但是我并没有发现的问题。我意识到我作为产品的设计者,是很容易陷入并沉迷用户体验当中比较孤立的一部分,反而会忽略很多显著的问题。

回想一下,如果我能尽早向用户和朋友展示设计和原型,那么我会在更早的时候发现问题,并且在获得反馈之后才进入开发阶段,弥补大量的损失。

6

在别处获得启发很重要

很多设计师会认为,所有的想法都必须是原创的才行,否则就是欺诈。但是稍微想想,其实彻底的原创其实很少的。

当你看到一个优秀的产品,它优秀的配色和恰到好处的交互可能会让你觉得:「已经有人做出来了,我的想法在它面前完全没法比拟。」

这种思维方式其实有着极大的缺陷,并且抑制了你的创造力。

当我发现我的设计有缺陷的时候,我会竭尽全力去搜索和了解更多网上已有的设计。我会观察和思考别的公司和产品是如何设计新用户引导流程的,如何管理用户个人信息的。我从来都没有复制别人的体验,但是会隔三差五去钻研别人所创造出来的优秀细节,然后将这些细节借鉴到我的设计当中。

我最喜欢的一个范例,是从模态状态下,旋转退出的效果。这是我偶然在一个网站上看到的效果,因此我决定将它添加到 Confetti 当中,我还在着陆页的按钮中加入了类似的特效。

事实上,一切设计都是混搭创造出来的。你借鉴细节并不意味着抄袭,不要害怕去发掘和学习别人的优势和亮点,你要学会有机地拆解和借鉴,灵活地运用到自己的设计当中,它就像调制鸡尾酒一样有趣。

7

勇敢面对身份的变换

当我们开始设计的产品的时候,我和 Wilson 头顶上的身份就一直在变。我们是 UI设计师,要负责UX,要做交互,也制作动效,要进行平面设计,还要考虑市场营销,要管理产品,我们也要扮演其他的角色。

职责如此之多,以至于我们不可避免地遇到我们能力范围之外各种新问题。我们必须承认自己陷入了困境,寻求外部帮助成了必要的选择。

专注于自己专业的领域,其他不专业的方面来寻求外部帮助是非常合理的。比如在一个项目当中,一位艺术家负责了绝大多数的风景插画,另一位艺术家则完成了肖像画的部分,这很正常。

我希望产品的外观和功能能够保持高度的一致性,并且我确实做到了。但是不要误会我的意思,我并非是不敢走出舒适区去学习代码开发,而是在这样的项目当中,我并不适合从UI和UX领域延伸出去,毕竟完成项目的开发优先级比学习代码更高。

8

保持简单更重要

尽管给 MVP 安排好了发布时间,可以防止这个项目被无限膨胀的功能特性和工作量所淹没,但是这样依然无法防止我们基于已有的功能进行改进。

很多人都喜欢 Reid Hoffman 的一句话:「如果你对于产品的第一版感觉不尴尬,那你一定是发布晚了。」不过,我们正式发布的第一版的产品,并不会显得太尴尬,但是目前来看,当时那种简单直观的状态,比起再花费好几个月时间反复打磨之后再发布,来得更好。

在发布新产品之前,我们必须考虑2个问题:

我们是否相信我们所构建的产品,能够为用户带来价值?

我们是否竭尽全力了?

这些问题让我们最终能够达成目标,且按时发布,避免分心。专注交付最核心的功能,而不是被一堆冗余的次要特性所压倒。

9

良好的交接更加省事省时

从项目一开始我就一直在做项目的管理和组织设计素材,以便后面进行开发。不过,由于我一开始就使用了 Zeplin 这样的协同工具,确保了我可以轻松地将所有的素材都顺畅地交给负责开发的 Wilson。作为一款设计系统工具,Zeplin 让我无需浪费时间对素材进行分类,非常便捷。

在交接的过程中,我还做了一些优化:

将所有的界面都组织到了 Zeplin 当中,并且进行了处理

我给所有的画板进行了针对性的命名,方便检索

我在 XD 中标注了需要导出的素材

我保留了旧有的界面存档,并且确保交付的新版界面是最新的

10

一次写明所有的UX文案

在设计 UI 的时候,界面中的文案部分是临时编写的,这促使了一次设计完成之后,整体的文案是不一致、不协调的。

我很希望一开始就创建了一个单独的文档,一次性将文案部分全部重写,包括提醒、注释、标签、弹出框提醒等等。而实际上,我的文案都是在设计 UI 的时候附带着写下来的,导致整体的一致性严重缺乏。

这种文案本身在调性上的缺乏,导致了整个产品在语气和用词上是混搭式的,一致性很差。

所以,在产品上线发布之后,一直在对文案进行修修补补。

写在最后

我相信,如果很多错误不能一开始就解决或者尽早修改,最终产品的潜力是无法完全发挥出来的。正如同 Giacomo Casanova 说过的那样:「一个不会犯错的人同样也无法成事」。

所以我们要在错误中总结经验,希望你不要在设计项目中,陷入与我相同的困境。

好了,这里是「写给设计」-我们一起做一个有福气的设计师,安~ 

参考来源:

01.https://www.uisdc.com/10-ui-ux-design-lessons

02.https://uxdesign.cc/10-ui-ux-design-lessons-from-designing-my-own-product-2f8518d5f0a1

··················END··················

「推荐阅读 」 

108张美哭的高清电脑壁纸

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,425评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,058评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,186评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,848评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,249评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,554评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,830评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,536评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,239评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,346评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,999评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2 267