关于「触动人心」的设计理念

很长时间没有在站酷发表文章了，希望这份早期经验之谈能给各位一点帮助。

一、精心设计应用的目标

1.要为用户用户解决的问题

这个应用与众不同地为用户解决了什么问题？用户为什么要使用这个产品？ 

2.移动应用和计算机的区别

移动应用是帮助用户去完成计算机力所不能及的事情。 

3.本书的五要素

人物：框定了应用的受众； 
事件：框定了受众会做的事情； 
时间、地点：讲清了情境如何； 
起因：描述了受众的动机和目的； 

4.移动用户的三种心态

（1、我有个微任务要做 
     
     移动应用的使用场景跟计算机是有区别的，因此用户在使用移动应用时，更适合于使用短时间就能完成的任务，或是短时间就能轻松娱乐的游戏等等；在这样的应用中，首要任务就是优化设计和操作流程，加速任务完成，简化任务难度。 
其实这里还可以包括打车应用，比如滴滴、Uber等APP，都是移动应用中区别于计算机的APP。这些APP是计算机没办法做到的，总不可能拿着一台电脑去定位打车吧？这种事情我是没法想象的。 

（2、我想看看附近的情况 

     利用iPhone等手机的传感器，来帮助用户在PC端不能完成的事情。例如微信查看附近的人，或者摇一摇，脑补下电脑有了定位功能后，然后拿着电脑在甩的画面（真是无法想象）。 

（3、我有些无聊 
      
     用户会利用休闲时间来玩游戏或一些娱乐应用以便来打发，这时候就要研究用户需要的功能，如何让用户在无聊的时候能够对你的产品有兴趣去探索。 
     在我们使用游戏或娱乐类的APP时，经常会遇到一些问题，就是时间。有时候其实就是等公交、等外卖等等等等等...就是想玩一把轻松又不费脑的小游戏放松下，或者是刷下微博看下朋友圈。而这些都是用户乐于去使用的，因为它们简单且花费的时间短。 
     有时候用户就是这么无聊，然而就这种无聊的心态，也是一种学问（就像我之前说的，做人真烦）。 

5.理清方向

友好易用的用户体验要设计师合理斟酌每一条触动人心的功能点；并在设计过程中要想得多，做得少。意为功能可以列出很多，但是真正用上的却很少。而且要挑选大部分用户大多数时间都会使用的功能，摒弃小众群体的边缘需求。 

在我们平时的产品迭代工作中，产品经理收到商户的需求总是一股脑的就扔过来，我有时候真是想说：你特么，真帅（其实我怕）。 

6.iPhone应用相比H5页面的优势

其实这块书上说的是在手机浏览器里面浏览网页与APP做比较，但是我因为个人的工作原因，所以把这里替换成H5，修改了一点内容，毕竟书看来是给自己用的嘛~哈哈哈。 

（1.高效 
同样是移动端展示，App的速度要比H5要快上很多，方便用户去使用。 
（其实这里不能以偏概全，有时候H5界面反而会更方便，这里只能说相比于H5界面，App的使用在多功能的目的性下确实会...会怎么样呢？自己去YY） 

（2.更好的展示 
虽然内容可以完全一致，但是在展示上，App可以使用更多的空间来更好的展示，这是H5界面不具备的，优美且动感。 

（3.本地缓存 
很多新闻类或书籍类的应用，可以在手机上缓存或下载，以备在没网络的状态下阅读。但是H5界面需要实时利用网络来浏览，这方面会对在动车上或地铁上的用户带来不便。毕竟出门没流量，谁会去下载一些文章或音乐。

7.总结

1.利用“五要素”，发掘应用触动人心的先决条件； 
2.使用移动设备要考虑三种移动用户的心态； 
3.不断更新内容和打造社区； 
4.想得多，做的精，提倡够用就好的思想； 
5.做网站的附属应用时，要考虑在原有的基础上做改进，而不是照搬。 

二、为尺寸和触摸设计

1.尺寸与触摸

在设计过程中，iPhone在4的时代里，44像素是标准的控件尺寸，但是发展到5和6的时候，两倍像素更符合当下的设计，所以88会成为更标准的尺寸；但是在正常情况下，我已经看到很多人直接用100像素来设计，也很合适。 

在设计的过程中，不要让界面显得太拥挤，标签栏最多放下5个Icon，是为了避免用户有误操作，从而产生挫败感。就好像我们平时使用的App，其实5个也是很少见，大多数情况下都是四个，比如支付宝、微信、QQ等。 

2.优秀的iPhone应用，包含以下特点（总结）

· 将重要信息放在顶部，重要操作放在底部； 

· 基于一倍尺寸下的44像素的设计韵律来设计； 

· 屏幕尽量不要有滚动，在一屏之内展示完（一般适用于实用工具类软件）； 

· 不要在屏幕上摆放太多的元素 

· 应用尽量要简单，将高级工具隐藏；

三、导航模型

1.iPhone 的三种导航模式

（1.平铺页面：类似于卡片翻转页面，它没有信息层级，也没有组织结构； 
     · 在平铺页面中，可以用单页面前后翻转的形式定义一种交互，即前面是展示，点击之后翻转到背面用来设置； 
     · 平铺模式能更好的让页面进行编辑，如果页面数量随时都会变化，且当中的导航和顺序都固定，那么平铺非常实用； 
     · 在平铺页面中，更加不能使用屏幕滚动； 

—— 平铺页面的分页控件，也就是小圆点，在页面数量非常多的情况下，要如何展示？因此需要控制数量。 

—— 页面非常多的情况还有出现的一个问题，即如何快速跳转至想要去的页面？点击编辑按钮，将页面缩小去浏览。 

（2.标签栏：在屏幕底部有几个按钮控件用来点击，现在的大部分App都会有这个栏，这块前面已经说到过。 
     · 一次点击就可到达想要去的界面； 
     · 清晰表现目前所在页面的功能； 

——标签栏的功能不能超过5个，否则会显示为更多，增加了用户的认知负担； 

（3.树形结构：有明显的层级关系； 
     · 对大量的功能和项目能很好的划分； 
     · 对用户来说容易理解； 
     · 在交互上而言，直观且舒适； 

——如果要回到主功能，而现在处于子子子...功能，就要连续返回，操作上不直观；不过对于微信来说，层级比较浅，就还好。

2.总结

1.遵循普通原则，有时候别人看起来不一定就很普通； 
2.理解三种模式的优缺点，进行相应的选择或组合使用； 
3.在动手之前，先在板上或纸上画出流程草图，暂时先别考虑细节，而是考虑大局； 
4.原型丑点没关系，只要能理清思路就行。 

四、iPhone的标准控件

1.导航栏

导航栏的左边唯一只能放后退或返回按钮，其他一律禁止（此为用户习惯）； 
注意：导航功能必须清晰，不要放多余的控件，保持干净； 

两种特殊导航： 

（1.在导航栏同时显示提示文字及标题，用户对标题不了解时，可对标题进行诠释，或者对一种状态的解释。 

比如QQ聊天窗口：这里在名字下方显示了好友的登录状态。 

（这聊天记录是我的隐私）

（2.对于长篇内容的界面，隐藏导航栏，通过某操作来显示，或对导航进行半透明处理可以更好的显示内容。 

比如 pinterest：不仅隐藏了导航栏，还对标签栏做了半透明设置，让用户更好的查看图片和标题。 

2.工具栏

工具栏是对一个页面进行相应操作的一种属性，跟标签栏有本质的区别，标签栏是不同种类之间的切换。 

工具栏的图标和导航的栏的图标可以一致，但是跟标签栏的图标不能一致。 

这类修图的软件，就是很典型的把工具栏作为重点，来设计。 

3.搜索栏

对于一般的App来说，搜索栏是必须存在的，它该和工具栏以及标签栏保持一致的色调或风格； 

搜索栏的存在会导致在浏览某些页面时非常的不方便，可以通过进入页面时，搜索栏存在，而滑动页面搜索栏即上滑消失，跟随屏幕的滚动； 

搜索栏的作用非常重要，因此会有很多关于搜索栏的交互： 
用户在搜索时，会出现范围选择栏，可以让用户选择搜索结果范围； 
同时，搜索栏可以有实时搜索状态，在用户没输完关键字时，就更新关键词让用户选择，当然，也有很多用户对这块并不会多虑，他们也接受输入完成的关键词。 

这类APP还是比较多的，比如某宝，这里就不截图了，相信大家对这块还是比较了解的。 
（路人甲：谁说的，我特么就不了解。   呆总：你真棒！） 

4.表格

表格分为两类： 

（1.索引列表 
索引列表将列表的内容以类别来区分，标题用一条粗线来作为每个类别的开始，并跟随屏幕滑动黏在顶部，直到滑动到另一个类别； 

通讯录的字幕排序分组，是索引列表中最成功的应用。或者一些App中的城市定位，在选择城市的时候也有这类分组。 

（2.分组列表 
分组列表不像索引列表这么轻松的就能到达指定组，所以不适合展示冗长内容的列表； 
它可添加页头页脚（当然也可以不加）来作为组的说明；（可能我手机里面的App太少的缘故，没找到这类界面） 

表格编辑可删除表格中的某些内容，iPhone官方的步骤是，点击编辑->选择->删除，而另一种滑动，可以少一个步骤，更快的删除你想要删除的内容，微信就是采用这种方式。 

但是这种方式不适合删除多条内容的应用，这里可以选择使用复选框来做。像这种云盘的复选框，可以批量操作。 

5.总结

1.在设计过程中，多用标准控件，一致性将增加可靠性； 
2.屏幕上除了导航栏和标签栏或导航栏外，不要放其他栏，搜索栏不要固定在屏幕上； 
3.多用表格视图，表格视图是iPhone最好用的的控件； 
4.认真为文本输入框选择键盘； 
6.减少设置中的配置项，最好不要将配置项放入设置； 

五、APP的第一印象

1.icon 的设计

（1.Icon的设计要清晰，容易理解。在用户看到的第一眼，就应该能了解你的应用的作用，千万不要在icon上面加一些奇怪且多余的文字来说明APP的作用，这样做不仅多余，而且会降低用户对APP的好感。 

（2.取名字对于一个icon而言，虽然也是必要的，但并不是最重要的。在取名字的过程中必须要精简，且让用户容易记住，虽然它不像图标一样可以带给用户强烈的感官刺激。 

（3.对于图标的尺寸来说，在设计图标的时候要严格遵守。icon上面的投影等等不需要在设计的时候加上，因为App Store上会自动生成。 

2.启动图像

启动图像的运用，如果不恰当的话，会让用户反感，并不喜欢使用你的产品。而通过一些技巧使启动页面和产品融合，不让用户感觉到你为了品牌的宣传而设计，会更好的减少用户的感知时间。或者真的减少启动页的时间，QQ在这方面做得还是很好的，即美观又不失风度。 

近期有很多APP都开始在启动页加上跳过按钮，用户可以根据自己的意愿去点击是否要跳过，这种设计既能加入广告对得起广告商，又可以保证用户不被打扰。唯一的不足就是用户需要操作，但是这算是合理操作。

并在启动图像结束之后，为首次使用产品的用户提供指示说明，也就是引导。对于首次进入App的用户来说，引导如果做得好，也并不是多余的，懂我意思么~哈哈。

3.总结

1.应用的图标要清晰明了，描述应用的功能、界面、名称或品牌。 
2.名称短才好。 
3.把启动图像做出假的应用背景，这样可以减少启动的感知时间。 

六、手势操作

1.总结

这章其实就是在说iPhone的手势，但是本书的年代比价久，不像现在6S有这么多手势，包括touch功能在当时也不存在，因此讲的都很浅。这里就做几个总结就过了。 

1.手势来源于经验，人们都会根据日常在现实生活中或鼠标点击的过程中所获得的认知来对移动设备做相同操作。 
2.在设计的过程中，要非常的细心观察用户在操作界面时所做的相应操作，哪些是失败或耗时的，这就是需要改进的地方。 
3.如果设计的应用中存在隐藏性很强的手势，就应该有介绍或引导来告诉用户怎么使用。 
4.本章中说了摇动手势的几个问题，除了某些娱乐的新奇用法或撤销的手始中，尽量不要使用摇动手势。 
5.给某些手势加点难度，避免误操作，如解锁的滑动，避免用户放在口袋里自动就解锁误拨号了。 
6.手势需要有视觉或生效的反馈。 

七、警告、打断和更新

1.警告框

相信不止一次的出现过关于警告框的问题了，看过很多相关文章，每个人都有自己的看法，就算写明是相关机构考证的一些例子都不足以说明一些问题，因为都说的太浅显了。而对于这章，作者还是很详细的说了关于他对警告框的看法以及应用方式。 

警告框出现的场景： 

（1.应用不能继续进行下去了。 
     当你在使用一个App完成某个任务的过程中，应用突然不能进行了，即可弹出。 

（2.能帮个忙么？ 
     在飞行模式下，正要下载一个数据，警告框就会弹出，告诉你是否关闭飞行模式。这样的设计不仅起到了作为警告框的作用，还帮助用户去做选择，这种设计才是好的交互模式。 

（3.请授权 
     有些操作可能会令用户犹豫或后悔，因此警告框的出现会让他们慎重。很多时候在一些反馈过程中，为了达到用户的满意，应该询问用户的意见，而不是擅做主张。当然，这里说的是相对重要的信息。 

警告框不该出现的场景： 

（1.弹出欢迎消息 
     再好的警告框，它的潜台词都是“有错误发生”。因此无论你有什么新奇的想法，引导提示和帮助都不要用这种方式来做，免得用户误会。 

（2.App Store打分 
     相信大家经常看到这种弹框，真是让我烦的想删了它。这里作者在很多年以前就说了，不要弹出这种破东西让用户打分。不要只关注自己的应用，也要考虑用户的心情。如果实在想要人打分，就在关于我们里面设置个链接，愿意打分的人自然就会去，不愿意的，你怎么弹都没用，因为用户已经把你删了。 

（3.小问题 
     不要轻易的弹出警告框，用户看多了，就会出现“狼来了”的故事重演。相信我，你是最棒的（这句话我乱加的）。 

2.通知框

和警告框一样，通知框也会在用户完成任务的时候突然弹出打断用户的工作流。所以在设计时，应对其进行相应的控制。 

（1.提空详细的内容控制 
     让大家可以详细设置他们想收到的消息。社交类的让用户订阅部分推送通知。体育类的让用户选择喜欢球队的消息推动。 

（2.确保要有安静状态 
     有些应用半夜在用户睡觉的时候突然来个推送，声音还特别响（是你你爽么）。因此在特定时间应关闭推送。 

（3.让声音可选 
     天气类应用Umbrella在推送消息时，会根据天气来推送相对应声音。当然也可以选择关闭声音。 

3.菊花和进度条

这里还简单介绍了菊花（不是你想的那个）和进度条。他们都代表了时间，所以要把它们运用好是非常重要的。比如它们可以替代进程结束的提示框等。不需要用户去再看烦人的弹框。 

4.总结

1.在应用不能进行的紧急情况下，或者应用需要授权的时候，才能使用警告框。 
2.在警告框中，淡定的把事情说清楚，别乱以及别乱来。 
3.推送通知发出的消息总是喜欢用“喊”的，其实应该确切地让用户选择哪些是他们想要的。 
4.不要随便使用计数的标记。（这里没细说，书中也是简单介绍下，但是我这里写出来，感兴趣的自己去了解下为什么） 
5.用菊花转和进度条来告诉用户，应用正在运行。

谢谢你的阅读：）