浅谈App产品设计

移动互联网时代,突然流行起一句话,“最好的服务,是给你还不知道的好东西”,一个人如果真的能实现这种理想,也算以一己之力推动了人类文明的一小步吧。

怎么设计出这样的好东西呢?我觉得跟产品的价值、功能和气质密不可分。

价值

产品存在的意义,在于他能为用户提供什么价值,如果这个战略方向没有想清楚,基本上就很难谈理想了。

通常来说,一个产品的价值,与市场需求有关,与政府政策有关,与信息化带来的变革有关,也与当下的基础设施条件有关。

市场需求和政府政策好理解,信息化的变革和基础设施条件是什么意思呢?

信息化变革对价值的影响

从进入互联网时代起,我们就告别了鸿雁传书时代那种低效、昂贵、缓慢的信息复制与分发方式,每个人都可以近乎无限制无成本地获取信息(合法的),所以我们常说人类社会已经步入信息化社会,虽然我们往往只是说说而已,并不理解背后的真意。

信息化的意义在于,他会改变我们习以为常的思维习惯,打破很多司空见惯的商业模式,这种粉碎和创新,往往会打破社会运转的枷锁,提高资源运作效率,这就是信息化的价值所在。

举个例子,在信息闭塞的社会,极端情况下会发生什么事呢,有一个中国皇帝吃不起鸡蛋的故事,大意是在富有四海,万国来朝的中国皇帝眼里,鸡蛋是高端奢侈品,因为他的行政部门(御膳房)给他的成本报价是30两白银一枚鸡蛋,所以皇帝竟然连鸡蛋都不敢多吃,更不用说比鸡蛋更高端的清汤面了。

我们会拿这段儿过于久远的历史当笑话看,因为我们身在信息化时代,感觉这是不可能发生的事情。

那我再举一个没多久的例子:一贯文明绅士的大英帝国公务员们一度屡屡爆出腐败丑闻,曾爆出过大臣报销成人电视费、议员给儿子发高额补贴等“报销门”,每年不得不花一大笔开销请审计公司,请监督审计公司的监督公司,请管理监督审计公司的管理公司...叠床架屋的机构和支出与日俱增,还效果奇差,最后找到的办法是放弃政府审计,直接把所有公务报销账目公之于众,公众也很配合地充当了“眼睛雪亮的人民群众”,竟然揪出不少蛀虫,又省钱,效果又好。

信息化会带来变革的基础,但受限于我们的思想,这种变革的价值我们不一定马上能意识到,自进入信息化时代以来,这种变革已经进行了很多年,且将继续进行很多年,在以后的很多年里,我们还会持续的发掘出新的价值来。

基础设施条件对价值实现的影响

除了思想,现实环境在实现价值时,也是一种束缚,最典型束缚的莫过于基础设施条件。

以现在大势已成的网络约车(滴滴/Uber)为例,在移动互联网时代之前,社会上只有笨重的计算机和昂贵而缓慢的无线网络(2G),这迫使人们只能在有限的时间地点(办公室/家庭/网吧)和有线网络上使用软件,那时候的软件也大都是基于有线网络的办公/娱乐,网络约车这种没有固定使用地点的软件产品,没有生存的土壤,概念很好,但是做不了。

不是没有市场需求,不是没有政策支持,事实上那些年一直有人在尝试做约车服务,毕竟打车难的问题已经困扰我们几十年了,但是落后的基础设施不能支撑网络约车这种产品,因为当时既没有足够小巧的便携式计算设备(手机),也没有足够便宜高速的无线网络(4G),我们无法想象用户站在马路边,打着伞,扛着计算机,连着昂贵的2G网络刷着地图叫车,同时还觉得使用这种产品是一个轻松愉快的体验。

移动互联网时代的基础设施解决了这个问题,智能手机+4G网络为人们提供了随身计算资源和随时接入的高速无线网,这满足了网络约车所需的所有需求,网络约车这才得以大行其道。

所以,当基础设施变好了,很多之前做不了的东西能做了,机会就来了,因为你可以为更多新释放出来的需求去提供价值了,这就是常说的风口,移动互联网也因此成就了大批的新贵。

所幸,我们身处一个高速发展的时代,基础设施会越来越好的,可挖掘的潜在价值也会越来越多。

价值的筛选——没有天上掉馅饼的好事

根据前文所述,似乎我们身在一个遍地金矿的时代,好像人人都可以灵光一闪,挖到潜在价值,推动文明进步,走上人生巅峰了——哪有天上掉馅饼的好事。

拿刚刚过去的2016年来说,在媒体笔下,2016是很多产品的元年,什么VR元年,无人机元年,互联网电动汽车元年,好像这都是2016年才发明的新概念一样,好像没有人在意1995年任天堂推出的Virtual Boy虚拟现实游戏机,1982年以色列军队在贝卡谷地空战使用的无人机,乃至1873年英国人制造的载货电动汽车。

经常有人说,超前半步是先驱,超前一步是先烈,这是社会认可了你提出的价值。如果没有得到认可,那你没机会做先驱先烈,你就是普通的先生。

这世上没有天上掉馅饼的好事,你以为的价值真空,说不定早就有人做过,且没有得到认可。面对任何潜在的价值金矿,我们应该先想想清楚,“为什么以前没有人做成功过”,一般来说无非三种:

1.以前环境不允许,但是现在条件达到了——恭喜你,再造一个市值千亿的超级公司指日可待。

2.一个旷古未有的新模式,只有聪明的你想到了——尽情开拓吧,成功就是先驱,失败也是先烈。

3.概念太蠢或收益太低,别人不屑于去做——先生,绝大部分所谓的价值金矿,都属于这个行列。

慎重,慎重,慎重,在出发之前,先确定真的找到了好的方向。

功能

App产品的价值是一个非常宽泛的抽象概念,价值要落到实处,还是需要通过功能来体现。例如:微信的价值在于沟通,具体的功能就是多媒体聊天和朋友圈分享;支付宝的功能在于管钱,具体的功能就是收/付款和资金管理;滴滴的价值在于打车,具体的功能就是叫车和导航。

具体功能是需要精心设计,再三打磨,认真维护,精益求精的。

功能设计的5个步骤

一提到App的功能设计,很多人第一个想到的就是界面,不要急于画界面,要先定功能,做出可靠的逻辑架构,再做好页面布局排版,最后才是界面细节设计。不要过快进入界面,那会让你的视野变窄,是不利于功能设计的。

�在功能设计上,一般需要遵循从顶层到细节,从抽象到具体的方向,依次分为战略层、范围层、结构层、框架层、表现层。

功能设计的5个步骤

·从战略层面来说,一个App产品每次推出的大功能不宜超过3个,最好每次主推1个功能,这有益于聚焦资源做好推广,并准确评估市场反响。

·从范围层面来说,App的功能要简洁干净,隐藏不重要的内容(如:默认勾选同意软件用户协议),推迟不急需的步骤(如:先免登录使用,在支付时才要求注册),剔除不必要的功能(如:导航界面中的拍照功能——敢开车玩手机,要不要再来瓶白酒?)。总之,一切以用户感觉简单舒服流畅为准。

·从结构层面来说,确定功能范围后,不要急于陷入细节,要先设计功能地图,做抽象的功能分布和关联跳转关系,如果功能堆积在产品一角,关联跳转复杂无序,那说明结构设计就有问题,不能做后续开发;如果功能分布均衡,关联结构简洁,产品就算打好了基础。在此基础上,可以粗略的构思UI,手绘即可,以表现功能和结构为主,可以产出纸质版的手绘原型,让市场和测试人员介入,进行多轮迭代,验证产品概念,查补业务漏洞。

·到了框架层,功能结构已经确定,重点就是关于排版的艺术了,这时侧重的是信息的表达,依据栅格化设计、黄金分割比例等原则,通过调整界面元素的比例,位置,对齐,间隙,关联,大小,深浅和字体等,让用户舒服自然地接收到产品传递的信息,甚至调用用户的情绪。这里需要制作出简洁的线框图,通过几轮交互反馈,反复优化。

·表现层是最终呈现的效果,侧重的是用户感受,需要运用各种心理学原理,精心选择产品的主题色调、图片、文字和动画效果等,默默地取悦用户、引导用户,并尽可能的弱化产品的固有缺点。

在设计App功能时,容易陷入一个误区,就是只关注理想状态,忽略了中间状态,一个设计完善的App,要从原型设计阶段就考虑到中间状态的,要全面细致地考虑,每一个屏幕下要如何引导用户抵达最终目标。

App产品界面的5种状态

App产品界面分中间状态页和理想页两种,理想页面承载我们业务功能设计的页面,中间状态页是达到理想状态之前的页面,中间状态页是不可避免的,对中间状态页的感受,会很大程度影响到我们App产品的存留率,中间状态做的不好,用户会弃我们而去,中间状态做得好,用户会更加喜爱我们。

App页面从加载到完成,会依次经历5种界面状态:空白页->加载页->局部页->错误页->理想页,前面的4个页面都是中间状态页。

5种界面状态

空白页

空白页分这么几种情况:

1.用户初次看到产品时(如:第一次加载),这时不要给一个干巴巴的空界面,太浪费了,这是用户对产品的第一印象,是介绍产品,抓住用户的好机会。此时可以给出理想状态界面截图、提示用户第一次操作、展示产品可以呈现的功能,或者直接采用免登录的设计手段,先让用户体验App的最有竞争力的功能,直到产生交易行为时,才去提醒用户注册登录。

陌陌的空界面

2.清除所有数据时(如:清空后的收件箱),这是奖励用户,博取用户好感,或激发他们进一步操作的好机会,我们不要提示没有内容了,而应该提示用户达成了任务目标,给他显示下一业务流程,或者作为一个成就让用户去分享给小伙伴们。

网易邮箱的空界面

3.没有找到操作结果时(如:未找到查询结果),这是推送信息或提供智能搜索结果的大好机会,不要让用户觉得无路可走,给他们提示或建议,给出智能纠正拼写错误,查找相近结果,提示用户“您要找的是不是XXX”。

智能纠正错误,返回推荐结果

加载页

受限于物理条件,App的加载速度是个无法回避的问题,需要注意这么几种情况。

1.单纯的空白界面或者进度条是不好的,会让用户感觉加载过程特别漫长。

2.采用先加载模糊图片的方式,先显示一个模糊但是完整的图像,再慢慢变清晰。

3.在使用进度条时,故意加快前75%的进度,令用户感觉离完成更近,更有耐心等待。

4.使用局部加载方式,先载入页面基础结构,再逐渐下载其中缺失的部分,这样的话,用户焦点天然会聚焦在已显示的内容上,会感觉加载更快。

局部页

局部状态利用好了可以起到培训用户,推广功能的作用。

1.界面已有少量内容时,要提示可以达到的效果,促使用户继续使用,例如在加载网页时,页面一般是边加载边显示的,已显示的那部分页面,用户是可以使用的。

2.在多步骤流程导致的局部页中,要提示操作完成度,或为鼓励完善信息提供奖励,可以显示一个数字进度条,或者用勾选列表来刺激用户的完成欲。

错误页

在软件报错时,要准确地提示信息,同时避免刺激用户。

1.不要损坏用户输入的任何信息,用明确的位置指示和颜色指示,说明哪里出错,如何修改。

2.表达方式要简明友善,不要使用晦涩的错误代码。

帮助用户思考

一个好的App,会减少用户的操作,帮助他找到最适合自己的选择,甚至帮助用户思考。

要减少用户操作,就需要业务主路径保持干净简洁,例如,在使用密码保护用户信息时,要避免影响主流程,在主页面不需要密码,在常规操作不需要密码,保存本地可能也不需要密码,只在提交数据或查询个人私密信息时需要输入密码。

要帮助用户找到适合自己的选择,就需要强大的后台支持,无论是智能自动纠错,还是推荐搜索结果,都需要记录和分析用户个人习惯,并主动去猜测用户的选择。

要帮助用户思考,就需要更多额手段支持,用户数据的积累和分析,界面功能的巧妙设计,业务流程上的自动选择,让App像一个强力专业人士一样辅助用户,把价值发挥到最大。

最后,在设计App功能的时候,不要舍本逐末,偏离了App的价值,多问自己,为什么要设计这个功能,这个功能对用户到底有什么价值。

气质

在这个竞争激烈的App红海中,产品的气质就像明星的颜值,固然可以靠才华吃饭,但人们总是更偏好颜值最佳的那款呢。

优秀的产品气质能带来良好用户体验,我们可以参考一下App感官设计原则和App排版原则。

App感官设计原则

App感官设计原则可归类为5项:清晰、易理解、熟悉、信任、愉悦。

清晰:体现产品的的真正价值,不要让弹框和密码等不急需不必要的动作扰乱用户的行为。

易理解:排版上突出重点,通过字号、颜色、图标、对齐、间距等排出层级,突出要表达的信息。

熟悉:使用用户简洁、熟悉、统一的模式、图标和呈现风格,减少学习成本,增加用户亲近感。

信任:帮用户理解为什么需要这项操作,诚实明白地做出说明,坦诚会赢得信任,含糊其辞的提示只能放大用户的疑惑,让他们卸掉感觉可疑的App。

愉悦:用简单的操作去解决复杂的问题,让App作为一个用户喜爱的工具出现。

App排版原则

App排版,可以利用栅格化,黄金分割等工具,用大小去强调或弱化,用对齐、留白、形状和色系去建立关联关系,个人积累的一些排版原则包括:

留白和分隔线

通栏分隔线>分隔线>留白,所以少用通栏分割线,尽量先使用留白和小标题。

当左侧图片右侧文字时,不建议使用通栏分隔线,分隔线应与文字左对齐。

图片不需要分隔线。

列表、卡片和网格

如果列表中单项的文字超过3行,建议用卡片。

如果列表中主要表现图片,建议用网格。

布局的大小和间隙

顶部状态栏高度:24dp

Appbar最小高度:56dp

底部导航栏高度:48dp

悬浮按钮尺寸:56x56dp/40x40dp

用户头像尺寸:64x64dp/40x40dp

小图标点击区域:48x48dp

侧边抽屉到屏幕右边的距离:56dp

卡片间距:8dp

分隔线上下留白:8dp

大多元素的留白距离:16dp

屏幕左右对齐基线:16dp

文字左侧对齐基线:72dp

都是8的倍数

输入框

在右下角显示字数统计,如果有字数限制,建议在接近上限时再显示,超限可更改输入框颜色和字数统计的颜色。

错误提示显示在输入框的左下方。

同时有多个错误提示时,屏幕顶部可以有一个全局错误提示。

输入框最好带有自动补全功能。

颜色

颜色不要过多,选定一种主色调,一种辅助色调(非必须),通过调整颜色的饱和度和明暗度,构成配色方案。

在大面积的区域和背景色中使用主色调,在小面积和需要强调的地方使用辅助色调。

文字

文字的排版常用字号:

12sp 小字提示

14sp(桌面端13sp) 正文/按钮文字

16sp(桌面端15sp) 小标题

20sp Appbar文字

24sp 大标题

34sp/45sp/56sp/112sp 超大号文字

长篇幅正文,每行建议60字符(英文)左右。短文本,建议每行30字符(英文)左右。

覆盖在图片上的文字,需要有淡淡的遮罩和文字阴影确保其可读性,深色遮罩透明度在20%~40%,浅色遮罩透明度在40%~60%

结语

在移动互联网时代,出现了很多“我们还不知道的好东西”,事实上,智能手机本身,或者说移动互联网时代本身,就是“我们还不知道的好东西”,感谢这个时代,让我们每个人的人生都有了无限的可能。

最后,不要拘泥于已有的套路或者准则,借微信之父张小龙的一句话:“我说的都是错的”。

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

推荐阅读更多精彩内容