我怎么做产品设计?

本文包含了我个人进行独立产品设计时的流程和工作心得,非科班、非大公司流程、非一定正确,欢迎大家批评指正,如果有帮助,也希望得到你的鼓励。

产品经理或产品设计是一个在不同环境中差别很大的岗位,大公司和创业公司、大团队和小团队、人员配备情况等都会影响我们工作的内容和合作方式,而每个人相信在一定的工作磨练之后,都建立并积累了属于自己的工作方法。

作为一个混迹于小团队甚至个人独立设计开发应用的学生,我是这么工作的:

idea的产生

我主要的设计工作都来源于自己的意愿,一般是我加入的某些小团队,或者是我想要满足的某种需求,甚至也可能是我个人的产品设计练习。之前有很多朋友问我为什么去创业,或者参加这么多的项目,我回答的是『只是对于不好用或者不方便的东西,想要去改进它罢了』。

我是一个比较敏感和细致的人,有比较强的共情能力,因此总会在自己或身边的人身上发现一些需求,那么需求很多,idea 也会有很多,我们怎么选择呢?

脑补

一般一个想法出现,我会从两个方面去论证它。

第一,这个需求是否在用户中普遍存在。普遍的意义不是说要所有人都需要,但是至少某个需求应该有一定数量的用户群,这样才有解决的价值。结合自己的日常观察以及生活经验,首先虑掉那些明显不典型的需求,而对于难以确认的,则在下一个『用户调研』的环节搜集信息。

举个例子,之前和朋友讨论一个功能,是开发一个 App,一键将整个手机系统和所安装的所有(或常用的)其他 App 都变为夜间模式,并且可以和正常模式进行切换。这个需求乍一听很新奇,因为阅读类产品都会设计夜间模式方便在黑暗环境下的阅读,所以是否需要一个手机整体大切换的产品呢?我个人认为这个需求并不真实存在的,首先我询问了身边喜欢看小说的朋友,他们大部分甚至不使用夜间模式来读信息,而是选择在有光的条件下阅读;其次,整体替换手机阅读模式会带来不确定性、权限问题、夜间模式匹配设计问题等一系列状况,因此这并不是一个好的选择。

(如果有朋友觉得这个想法不错,欢迎讨论)

第二,这个需求的技术难度和实现可能性。当一个需求有比较明显的用户群时,就可以从技术以及设计角度来进行分析,看是否能够实现。

举个例子,我早上上班经常要乘坐地铁,在早高峰是总是苦于如何快速找到座位。我相信这个需求很多人都有,选择站位和观察乘客都是一种技巧(写过一个知乎答案:地铁如何判断哪个位置的人会早下车?)。但是仔细考虑一下这个需求的解决方案:首先,乘客需要贡献自己的上下车地点(隐私问题,激励问题);其次,需要精确到某一个车厢甚至具体的某一个座位(定位精度问题、网络通畅问题);很快会发现,在一个信号时有时无、乘客摩肩接踵、隐私敏感的环境下,这个需求实现难度非常高。

用户调研

用户调研环节,我个人比较喜欢采取访谈的形式——事先准备好一些问题和我关心的要素,在网上聊天、面对面沟通、实际情景模拟等场景下,进行调研。调研的主要目的,一方面是确认需求的普遍程度,另一方面则是调查需求解决方案中的一些用户细节。比如 O2O 产品中的单价、社交产品中的兴趣点等等。

关于调查问卷,我之前针对不同的项目做过很多次调研,多的时候可以回收上千份有效答卷。设计调查问卷时应该注意,这种形式更适合整理数据性质的信息(价格、使用时间、用户分类占比等),而对于一些比较感性的问题不太容易得到准确的答案;另一方面,投放人群也需要提前针对你所要调研的信息做好设计。

核心页面绘制

前面几个环节,着重从用户需求分析等产品角度讨论。而从这一阶段开始,更多的涉及设计方面的工作。有的人在设计产品时会先绘制流程图和结构图,或者先画线框图来说明产品逻辑,最后再绘制界面。这个地方我的习惯和大家有些不一样,也不一定是正确的做法。

当开始进行设计时,我会首先根据之前脑补+调研的内容,绘制3-5页高视觉保真的界面图。这么做的第一个原因,是我想先确立产品的基调(颜色、布局等),更重要的是,我打算把最核心的功能先确定下来。

某产品的核心界面

直接绘制流程图会有一个小问题,就是不容易抓住重点,有的时候会陷在某一个细节里。《体验·度》中提到一个例子:

我们用百度新闻客户端来举例。在做新闻客户端的时候都会思考哪个信息是用户每天都想看到的,调研结果是『天气』,既然是天气我们是否要将天气做得更炫酷呢,甚至点击后显示一周的天气呢,如果你问用户,答案是肯定的;既然是如此绚丽的 UI,我们是不是要进行微博分享呢?用户依然认为是的;那么既然分享我们是否要增加查看评论功能呢?这时候你会发现我们讨论的点已经和新闻客户端完全无关了。

所以,先画几页核心页面,把最重要的功能确定下来,并且在后面的流程中时刻提醒自己,不要跑偏了。

流程图与结构图

一般不会在操作流程上百分百绘制流程图,而是针对需要着重设计的功能来绘制。下面的例子是一个O2O 外卖配送产品的泳道图(部分)

某产品泳道图

而结构图就需要把产品可能涉及到的每一个页面表达出来,这无论是在产品讨论还是开发沟通,甚至是用户调研阶段都是很有用的。注意,结构图主要表达的是层级关系,直接相关的就是产品的导航结构以及页面层次,可以使用颜色、树状图等进行区分和强调,而至于页面之间的跳转关系,则可以在交互设计中再着重表达。如下图,是某习惯养成产品的信息结构图:

某产品信息结构图

视觉设计

视觉设计阶段,根据前面定下来的基调确定 VI (视觉系统),根据信息结构图来明确导航结构(虽然大部分时间这属于交互设计的工作),最后把每一个页面的真实视觉设计稿绘制出来。

如果可以的话,最好使用可以投影到手机上的软件实时查看设计效果。比如 Sketch 的 mirror 功能,还有 Skala Preview 都是比较常用的软件。

视觉设计的另一个工作,就是切图和标注。把所使用的控件按照最小单元导出,并且单独复制一份视觉稿,在上面对形状大小、尺寸距离、字体和颜色等信息都进行标注,方便开发工程师的工作。注意,对于某些通用的控件,可以单独标注,就不需要重复标注了。

某产品标注图

交互设计与文档补完

然后呢,我需要设计每一个页面的每一个状态所呈现的视觉。比如打卡类应用根据当天的打卡次数,打卡按钮会有不同的文案;比如输入框输入了不合理的信息,应当反馈给用户;比如信息呈现页面如果内容为空,需要增加文字或图片说明;再比如网络不通畅或者刷新、发送失败,又需要通知提醒。总之,在这个阶段,需要考虑很多用户使用上的细节,多用极限思考的方法模拟用户的极限操作,往往会有新的发现。

一般,我会使用视觉图+文字注释+引导线的方法来做交互设计。

某产品交互稿

完成了这些内容之后,如果有需要,还可以进行动效设计,使用一些原型设计软件可以呈现出比较好的真实模拟效果,用以用户实际测试或者项目演示。原型设计软件主要考量的是这样几个因素,不分先后,分别是上手难度、效果复杂度、可否进行代发复用等,这里我推荐几个软件:

Axure,是人都知道,就不细说了,操作简单,效果一流,比较适合制作相对完整的产品原型。但是,不能制作比较复杂的动态效果,另外原型设计工作导出文件为 html 格式,对于原生应用开发难以复用。

Quartz Composer,俗称 QC,结合 origami 插件能够降低使用难度,但是依然有陡峭的学习曲线。效果出众,几乎可以实现你想到的任何动态效果,并且使用 pop 引擎能够实现代码复用(仅iOS),值得注意的是,QC 比较适合去制作某一个特定的效果,而不适合描绘整体。还有一个类似的软件叫做 Form,被 google 收购后免费了,在手机上浏览效果不错,和 QC 非常类似。

Xcode storyboard,故事版,其实就是直接开发只有页面结构的 App 了,使用 Swift 语言大大降低了难度,不过因为需要开发和编程,总体还是有一定上手难度的。优点不用多说,效果好,代码无缝复用。

当然,真正的工作中也绝不仅仅只包含这些内容,还有很多细节、工具和文档都是根据实际情况来选择的。不知道大家一般怎么工作和练习呢,如果不介意的话,可以留言或者联系我一起交流,互相学习,一起进步。

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

推荐阅读更多精彩内容