一款优秀APP的交互设计,怎样学习和借鉴

1，你解决了什么问题

我见过最普遍的作品集，也是最普遍的让我看了一眼就会选择不要这个candidate的作品集，通常有一个固定的格式：上来就说“我的流程”。UX是一门科学，请问你除了做用户研究做线框图做原型做测试做迭代，还能给我玩出什么花样来我不需要你把这些赘述一遍，我真正想看到的是，你如何用你的设计解决了一个具体的问题。

可能你会说我做的东西都是产品经理提的需求，我做的都是学生项目只是个大作业，但其实万变不离其宗，你之所以设计一个款产品或者产品中的一个功能，总是要解决一个问题吧。哪怕是个很小的例子，你做了朋友圈点赞的设计，这个设计存在也有他的理由吧，你是如何思考得到了你最终的解决方案的呢我在意的是这个。

2，你如何思考并解决问题

设计不是纯粹主观的，交互设计更不是。交互设计强调功能性，强调解决问题。作为一个每天审阅很多作品集的人，我很看重你的思考力，你如何解决问题。

接地气一点的说，就是你的“流程”。你可能很疑惑，刚才第一条里面不是说了如果上来就说流程我会立马Pass么。恩，此流程非比流程，如果你在这一步做的还是列出来你做的事情，告诉我我做了用户调研，然后做了线框图，然后做了高保真blahblah，那么不好意思，你还是out。大多数时候，我们需要的不是只会简单重复一个流程的人，而是能说明白为什么在某个特定场景需要使用特点流程的人，也就是事情背后的那个“为什么”。

3能展示结果，一定要展示结果

就像刚才说的，交互设计不是纯主观的，一个设计有没有起到他本来的作用，是可以被衡量的。比如一个交友网站，你做了让用户对其他用户点赞的功能，目的是为了增强用户间的交流，加强用户粘性，那么有没有做到这件事情，是可以衡量的。

4别在布局上创新，我能顺利的浏览你的作品集是重中之重，别搞出什么导航在左下角这种反人类设计。

六月的 WWDC 对於设计师来说，又是一个新的征程，因为，iOS 7 扁平化了。为了适应新的风格，很多app的icon都必须得回锅重新设计了。苹果用户体验工程师 Mike Stern 曾经做了一个名为《伟大 iOS 设计指南》的演讲，第一部分就是讲述该如何创造一个好的app icon。本文作者 Martin LeBlanc 是icon搜寻引擎 IconFinder 的创始人，他整理了 Mike 的想法，并且还给出了一些新见解和案例研究。为什麼app的 UI 和icon如此重要？用户不会从app中看出工程师设计师用了什麼代码，嵌入了什麼先进科技。他们第一眼只会看到icon，然後留下印象。大多数用户希望直观漂亮，有时候还会喜欢那种设计得不可思议的icon。下图中就是 App Store 中搜索「Camera」出现的结果，茫茫icon中，Path 脱颖而出，其他的icon大多采用了相机或镜头作为icon，以至於很多icon看起来都大同小异，而直观简洁漂亮的 Path 则正好凸显出来了。因而，花费大把的时间在icon设计上是不为过的，精致的icon很容易感染到人，好icon很容易让人联想到app内的体验也是很棒的。为了达到美观和直观这两个简单又困难的追求，Mike 给出了六点建议。独一无二的形状这四个icon非常特别，有些使用的单调的色彩，有的色彩多样层次分明，但是它们都有一个简单但特别的形状，仅需一瞥，就能记住。icon在 App Store 中显示得较大，但是在手机萤幕中的面积就小多了，更不用说有的还挤在资料夹中，所以，简单特别的图案有助於icon脱颖而出。慎重使用颜色不要打翻调色板，有时候甚至一两种颜色就已经足够了。是的，有很多优秀icon还是用到了很多色彩，但是那是大师作品，一般人驾驭不了。避免使用真实照片无论一个照片多麼惊豔，一旦用在了狭小的app icon上，效果绝对是毁灭性的。Sipp 这个app就是一个不错的例子，它可能源於照片，但是却比用照片做icon好不知多少个档次。葡萄酒倾倒而下形成的「S」和app名相对应，色调光感也重新调过，木纹背景让icon显得很有质感。避免使用文字，一个单词也不行如果能在设计中避免使用文字那就再好不过了。试著去只用一个标识或者字母去完成icon吧。 Ness，Pocket，Vine，Snapguide 和 Pinterest 都是成功的案例。适用材料，传递质感这点可能在 iOS 7 上有点冲突。获奖作品 Paper 就是很好的例子，水彩晕出的层次和色彩和其艺术app的特质非常吻合。One Password 也是如此，通过钥匙孔反映了资料的安全性。LifeKraze 就是真正的大师作品了，Mike 说这款icon是「不知道怎麼做出来的，简直是icon艺术巅峰之作」。保持创意创意是脱颖而出的好办法，Routesy，Hipstamatic，Evernote Food 和 Brewski Me 几款app都基本上都有不错的创意。通常来说，诀窍就是简单就好，有时候复杂的东西恰恰是通过简单的形状来呈现的。附赠的小提醒在完成了一个icon之後，不要忘了在各种颜色的桌布上测试icon的显示效果。另外也不要忘了将icon放在资料夹中测试一下显示效果。最後，在使用者的设备上，icon会以不同尺寸出现，设计者需要确保icon在所有尺寸下看上去都很舒服。优秀案例展示：Turnplay著名的icon设计机构 Ramotion设计了 Turnplay icon，这也展示了 Ramotion 的设计功力。Turnplay 是一个音乐播放机的app，其 UI 复刻了老式的黑胶唱片播放机。Ramotion 在最开始设计这个app的icon时，自然而然的想到了使用黑胶唱片播放机的款式。下面就是在设计初期阶段 Ramotion 的设计师们用铅笔手绘的icon草图，可以看出即使在这些草图中，也有著很多的细节。在这些草图中，很多都尝试将代表app名称的字母「T」放在icon设计当中，而细节方面，他们则试图在唱盤上勾勒出纹理。最终他们采取了以下的设计方案，简单的边框，中间是黑胶唱片。

你知道吗？人类是世界上唯一一种，不渴也可以喝水的动物（如果记错了，欢迎提醒哦）。

记得在张春描写《各种普通食物最好吃的时刻》里曾提到过：“ 白开水要刚好烫嘴的温度，但是不会真的烫到人。微微感受到滚过嗓子的温度。最好是用力喝到满口，让烫嘴的开水轻轻烫到整个口腔。”

么么哒觉得，白开水大概是这个世界上最好喝和健康的饮料，不然为什么不论是感冒发烧胃疼还是大姨妈，熊爸爸都会说“快多喝点热水”呢。

只是一忙起来就会忘掉。相信很多人都跟么么哒一样，不记得规律喝水，或者不知道如何喝水。今天 指尖儿 ，么么哒为你分享三款关于喝水提醒的App。

1、喝水时间：考虑到你的个性化需求，为你定制

“每天八杯水”应该是《妈妈语录》里使用频次最高的一条。

8杯水应该怎么喝？可以找一些现成的答案。但如果你想对自己应该怎么喝水掌握主动权，不妨试试这款应用：喝水时间。

喝水时间可以根据用户的自身条件、作息时间和身体需求制定合理解决方案的应用。

在这款应用中，可以看出开发者在每个细节都有较为认真的思考。例如：

①用户可以选择是否在天气干燥炎热时自动增加喝水量；

②自行安排适合自己的喝水计划、避免多次提醒带来的干扰；

③详细列举了生活中常见的水杯容量。

什么！用脸盆喝也想到了？！这个，各位看官请自重，么么哒不建议牛饮。

由此，也可以感觉到，这款应用更适合对喝水的时间及容量要求比较严谨的同学。有控制欲的小伙伴可以试一试。

2、WaterIn：一款简单的喝水提醒工具

与喝水时间相比，WaterIn则简单了许多。主要体现在以下几个方面：

①页面简洁，直观感受。这是一款走极简风格的应用，页面配色以淡蓝为主，并直观体现用户需水量，每次喝水完成后会减少相应的水量面积。

②简单设置，方便 *** 作。WaterIn 的设置页面仅提供需水量、是否提醒以及杯、大杯、瓶三种规格容器的大致容量，如需提醒，设置第一杯水和最后一杯水的时间就好，每次喝水后也只需根据容器进行选择即可。

这款应用虽无法制定更加科学的喝水计划，但对于“我就是需要个软件提醒喝水嘛”这个简单的需求来讲，么么哒觉得已经足够，甚至还是有些“重”了。

3、Plant Nanny:把每天喝水变成种植物

在介绍日记应用时，么么哒曾说过“每天一个问题，不如每年做一件事”（传送门： 《每个人都应该有一个日记类应用，但要怎样才能说服他们使用？这里有几个例子……》 ）。

Plant Nanny便是将“每天喝好几次水”这个复杂无聊的任务变成“种一棵植物”的养成类游戏，而你是她的保姆。而且，么么哒才不会告诉你们，第一次知道这个应用就是因为想起了小时候玩的电子宠物才在App Store里搜到的。

想想看，系统将植物成长所需的水分设定成你的饮水量。每喝一次水，她就获得一次灌溉，待你喝水越来越规律、越来越健康时，她也会因此而变得更茁壮，更漂亮。这是多么有爱的一件事情！

在 *** 作上，只需在开始使用时设置你的常用水杯容量，之后每次喝水长按即可。并且，每次喝水都会从植物的角度发出提醒，想不喝都不行~

么么哒有话说：

优秀的APP应该是怎样的？

答案一定多种多样。在 指尖儿 吉祥物么么哒看来，优秀的APP应该做到： ①满足需求，② *** 作简单，③有益、且无违和感（能够融入情景模式，增加效率解决问题的同时，不添乱）。

此外，就如么么哒一直说的那样，好的APP不仅能用，而且 ④要“美” 。我们大多数APP确实能用甚至好用，但真的没有美感。即便是中国大热的微信、支付宝和百度，真的美吗？恐怕不见得。

我们用上述标准来回顾一下这三款APP产品。

1、满足需求

喝水是不是需要管理？对于大多数来讲，是的。不要等到口渴时再喝水，但大家对自己的喝水时间和频率并不了解。整体来看，喝水应用是有需求的。

这三个应用应该都能做到这一点。

2、 *** 作简单

虽然需要喝水提醒，但总体来看，我们对自己的了解显然不够。“喝水时间”把选择权交给不知道怎么喝水的人，这种设置对于普通人来讲只能乱设一气，或者设置了反而对自己造成打扰。

WaterIn简化了这个流程。但是每次 *** 作都需要进入页面，然后再选择量杯， *** 作起来并不简单。当一个提醒过来，你还要多次 *** 作的时候，就难免会觉得麻烦大于收获。

Plant Nanny是么么哒最喜欢的喝水应用。它并没有那么繁琐的程序，只要你设置了常用水杯的量，然后提醒你（的植物）要喝水。点击进入后，你还可以完成一个植物的养成。让一个简单的喝水动作变成了游戏，而且还更简单。

3、有益，且无违和感

没有谁因为你对我好，我就必须要接纳。现在，连教育都要强调调动孩子的积极性。在么么哒看来，虽然是对用户好，“喝水时间”让用户可以自定义喝水，WaterIn提供了简单界面和 *** 作，但总体上，还是对用户造成了一定的打扰：每次喝完水，还要去那里“签到”。

Plant Nanny则用一个养成游戏化解了频繁提醒的焦虑，而不必计算总量则避免了用户“签到”的打扰。至于具体喝水的量和时间，每个用户可以自行掌握吧。因此，它的提醒不仅是告诉你喝水（如果你喝过了也没关系），而且可以去养植物。

么么哒认为，喝水需求并非场景需求。 未来属于情景模式，即在场景下的动作，或者动作的连接。 想想看，你更愿意推荐哪款应用呢？

4、美。

美需要满足核心需求。即设计服务内容。如果脱离了核心的解决方案，单纯的形式价值不大。这一点，相信很多人都有赶脚了对不对？

好，今天的指尖儿就写到这儿，么么哒要去浇灌我的黄金葛了。

以下工具可帮你创建超棒的应用截图并且可最小化你的投入和困难
Screenshot Maker Pro (iOS – Free to Try)
Promotee (OSX – $499 USD)
PlaceIt (Website – Free/Paid)
Adobe Photoshop CC (OSX/PC – Free Trial/$999-$1999 per month)
前三个是简单的拖放 *** 作工具但灵活性不足。Photoshop是最灵活的工具但是也是最耗时间的。
在这篇文章中我们将快速浏览下前三个工具然后再一步步介绍如何使用Photoshop重现上边列出的漂亮的截图。
Screenshot Maker Pro
Screenshot Maker Pro是一款免费的iOS应用可帮你把应用截图放置在iOS设备中。你每天最多保存两张截图或者你也可以以299美元的价格购买不限数量保存的 功能。
Screenshot Maker Pro的主旨是用户友好型另外你还可以选择在iOS、Android、Windows以及Blackberry上展示截图甚至在Mac OSX上也可以。
该工具的界面非常简单像选择你想要展示的那么简单然后选择设备类型、映射以及阴影等选项分分钟就能创建类似Flappy Felipe和Weather App那样精美的截图。
你有没有注意到以适当的角度展示运行在设备上的应用可以让应用更吸引人也更有趣味性。
不幸的是Screenshot Maker Pro并不支持这个功能它不允许你在截图上叠加图层或者文本。如果需要你可以在Photoshop或者其他应用软件中处理。
此外截图并不是为某个应用商店量身定做的所以你依然需要其他应用来适当地调整截图的大小。不过在你需要针对各种设备快速创建截图的时候Screenshot Maker Pro仍是一款比较有用的工具。
Promotee
Promotee是款OS X平台上的应用非常类似Screenshot Maker Pro。
该款工具同样是拖放界面可帮你快速把放入不同的设备中。不过与Screenshot Maker Pro不一样的是它并适用于Windows和Blackberry设备。
使用Promotee的过程非常简单把拖入你想的目标设备中并点击保存按钮。
Promotee非常易于使用但是它缺少自定义选项。它和Screenshot Maker Pro有点相似不能针对某个特定应用商店输出你需要在其他软件中调整。
整体上讲它依然是款快速且易于使用的工具。不过如果你想要更多自定义选项那么你就需要寄希望于其他软件了。
PlaceIt
PlaceIt是一个网站你可以用它把拖入目标设备中这一点与Screenshot Maker Pro和Promotee一样。不过PlaceIt因为其它原因而出众即众多的设备数量和可用场景。
PlaceIt的优秀之处并不仅限于把放入设备中它还在不同的情景中展示设备比如在平板电脑上或者在某人手中。你甚至可以创建动画来展示用户如何 *** 作这款应用。
PlaceIt收费为每张照片0-100美元或者你也可以进行订阅--12美元-250美元/月价格依据你的项目或者计划而定。
注意如果你要使用你用PlaceIt制作的每张那么你需要遵循公司网站上的服务条款。它包括免费下载但需要遵守他们的免费使用协议。
如果你想使用大量静态和动态那么PlaceIt值得一试。至于价格方面它基本上满足每个人的预算最主要的是看起来非常好。
PlaceIt没有为附加图层、文本提供原生支持也没有针对特定应用商店的正确尺寸这一点类似Screenshot Maker和Promotee如果你还需要其他选项那么你还需要额外的软件。

因为成为产品经理，能学到非常多的知识，在不同的层面
产品经理软技能：
个人魅力：包括沟通能力，领导能力，愿景能力，感染能力，审美能力等等；
产品修养：产品修养包括混迹产品社区，运营社区，优秀产品群；
互联网修养：了解互联网现状，跟踪互联网热点，跟踪互联网前沿，混迹互联网社区。
项目管理
产品经理的一个重要角色是项目经理，产品经理需要对整个项目的结果负责，包括按时交付，合格交付，成本控制。
项目经理需要熟练项目的5大过程组和10大工作领域，对于互联网产品经理来说，主要内容包括：
项目沟通：沟通是互联网开发中产品经理最重要的工作，包括和上级，开发人员，运营人员等等；
总体进度计划：项目的总体进度，例如产品设计，UI设计，各个模块开发，测试进度，部署等等，产品经理必须把握整体的进度，针对节点进行审核；
开发详细计划：开发详细计划是总体进度计划的一部分，一般来说开发计划是技术经理维护，但是产品经理必须进行整体把控；
项目控制：项目干系人，风险，进度，质量等等控制。
协助推广
产品开发出来必须推广到市场，否则产品就是一个实验品。产品经理不需要完全负责运营推广，但是必须对运营人员提供必备的支持。
基本工作如下：
基础运营数据：获取产品的基础运营数据，例如下载量，用户量，支付金额，留存；
埋点：埋点的一种获取产品运营数据的重要方法，他可以分析页面点击，页面转化等等；
业务数据：业务数据例如订单情况，售后订单，销量等等；
竞品分析：和市面上相似产品对比分析；
Swot分析：了解本产品的优势、弱势、机遇、挑战。
迭代开发
第一个版本做出来后，产品进入迭代开发阶段，一般迭代周期是2个星期；迭代开发就是将从产品规划到运营过程进行浓缩，每个迭代周期开发少量的功能。
基本的工作如下：
收集需求：收集产品的需求，哪些需求进行迭代开发；
需求排序：针对需求进行排序，高优先级的尽快开发，优先级低的稍晚开发；
细节功能设计：第一个版本的功能进行细化，例如效果细化，交互细化等等；
迭代计划：维护整个迭代过程的项目计划。
根植行业
产品都有很强的行业属性，必须熟悉本行业才能设计本行业需要的产品，否则就是空想。
我们需要了解行业现状，熟悉行业痛点，熟悉行业热点，并且还得了解相关行业，此外需要熟悉相关的法规，道德，加入行业圈子，多逛行业论坛。
个人魅力
上述讲的是产品经理硬技能，下面介绍一下软技能，软技能更多的是个人的修养问题，但是这些会影响到产品经理的整个职业生涯。
个人魅力包括个人领导能力，沟通能力，愿景能力，洞察能力，审美能力，感染能力。拥有强大个人魅力的产品经理才能成为整个产品的领导者，才能激励整个项目成员，提高团队效率。
产品修养
产品经理需要提高产品修养能力。
产品修养包括：
与高人为伍：有时高人的一句指点胜过你苦思冥想一个月，产品经理需要向前辈，向领导，同级组织成员请教，请教他们你不熟悉的内容；
与实践者为伍：不要和空想者为伍，而是和实践者为伍，产品的使用对象均是实践者，实践者的想法将会提高你整个产品的境界；
产品社区：例如产品壹佰，pmcaff，多看一下帖子提高自身修养，此外多加入一些QQ群；
运营工具：例如应用雷达，酷传，APP annie，ASO 100，百度指数等，运营工具可以用来分析产品的运营数据。
互联网修养
一个互联网人，必须熟悉互联网，有一定的互联网修养，多看新闻，多参加一些沙龙，提高自身的互联网修养。
了解互联网现状：熟悉当前中国和世界上优秀的互联网公司，多了解互联网当前现状，例如阿里巴巴，腾讯，百度，小米，华为，360等；
跟踪互联网热点：当前互联网热点，例如项目热点，投资热点这些，可以查看36kr，虎嗅，这些社区提高了互联网热点现状；
跟踪互联网前沿：例如vr/ar，物联网，智能设备等等；
大数据平台：常见的例如易观数据，talkingdata，这些互联网大数据平台会提供部分免费的行业分析报告，了解互联网大数据对产品整体把控有一定的帮助。
如果需要学习，可以看下这几个软件：
1脑图工具：百度脑图
2文档共享：蓝湖、Axure等软件
3项目管理：jira

虽然我并不是一个专业的app的设计师，但是看过这么多app的话，也是能够总结出很多怎么样才能把app界面设计的很好的体验的。

首先的话，现在确实很多app，现在app的市场是十分的大的。

基本上每个人的手机上都要下载几十个app的。每天的话我花在打开浏览每个app的时间上，都要花费将近两三个小时。而app的一些界面的设计，就决定了我是否会长久的把它保留在我的手机里，不会把给卸载。

我觉得app首先他一定要能够简洁大方。
我承认确实有许多app的话，她其实是非常的复杂，同时也会让人感觉到很好看的。但是我觉得大多数人的话，如果看到这样复杂的界面设计的话，其实会觉得疲劳的审美。我觉得app的界面设计还是要简单清爽一点，很多带有小清新范儿的界面的话，我就是特别喜欢的，因为这样子眼睛看上去又不酸，又不累，同时又感觉到很舒服。

同时app界面的功能的放置的话，一定要能够合理。
当我使用app的时候，有时候想知道app当中有什么功能的时候，这个时候就会在当中到处的找。有些app他们设置的不太合理的时候，我就会很难找到它的使用的方法，我觉得这个是app界面设置当中的一个非常重要的一个方面。一定要能够把你的界面清楚明了的展现给你用户，否则的话，你会因为你的界面太乱，而失去很多的用户的。

第一点：了解你的目标客户群的心态

1、做微任务的目标客户群(如随时随地看看新闻，听听歌，看看**，聊聊八卦之类)：

这类的解决方案是设计的app最好是小而准，不要大而全。越全的功能应用，只能代表着这个应用在各方面的都很平庸

2、喜欢当工具来使用的目标客户群：比如找地图，看天气，查数据等。

这类的解决方案是我们尽最大努力的去满足用户的情景需求。做到极致和简单。

3、无聊的客户群，用来打发消磨时间的：无需求，漫无目的的

这类的解决方案是尽可能展示用户感兴趣的东西，帮助客户来打发消磨时光。

第二点：APP原型图的制作和设计讨论

这个环节是必不可少的。需要根据设计需求认认真真的来画画原型图。

常用的APP原型图工具：移动APP原型设计神器POP、axure、Foreui等

第三点：APP视觉设计与设计要点

（1）大概设计板块有APP启动页面设计，APP界面设计的尺寸规范，app图标设计等

一般来说，手机屏幕是从上往下布局的，重要的信息会放在上方。但是在 *** 作上，大部分人都是单手拿手机，常用的 *** 作，要放在界面的下方。

另外还有一个原则，最小的触摸单位，一般是44个像素。如果再小，你的拇指难以触碰，或者容易引发误 *** 作。同时，也不要让界面太拥挤。

所以，设计师必须用减法设计，这个过程需要花时间思考、简化元素。

你必须记住：（1）隐藏设计或者减法设计（2）分区或分类（3）帮用户做决策（4）提高交互创新设计（5）让人有爽快感和新奇感（6）在设计中浸入情感，把握用户的心理。（谈谈如何进行产品设计以及产品情感化设计）

一位大师这样说过“真正的简约设计是：作品必须不断的被简化，一改再改，直到设计最终成形。”

2014年APP设计风格趋向扁平化和卡片化。卡片，扁平化都会是移动app设计的趋势！认为卡片设计确实同时兼具了“拟物”和“极简”2种优势！

第四点：APP界面设计流程

（1）设计APP界面时，学会从优秀APP界面设计作品中寻求灵感，以前的艺术大师，用少量的资源做了大量的设计。

（2）放下工作，休息一下很有帮助。扁平和简约设计的一切均关乎到细节的差异。因此小憩片刻后再回到工作，带着全新的眼光工作，比长时间冥思苦想更有

（3）并排比较各个版式同样有帮助。哪怕花20分钟前将一个线条下移各5个像素分别保存，对比两个版式就能很快分清孰好孰坏。

（4）由于实物展示的相对比例至关重要，所以要及早在不同的目标设备上测试。

（5）整个设计过程中不断问自己“真的需要吗？”。支撑项目时候，找一些讨巧的办法，例如，添加一些有趣的元素、样式会这样会很容易也会很吸引人，

但必须始终注意剔除不必要的元素，不断精简。甩掉你费尽心血的部分总是难以割舍，但修改过程必须挑剔。

第五点：APP界面设计测试与预览修正

设计完成之后，我们可以把设计图导入手机测试或者是校正。之前发布的在线测试工具：快速在移动终端上预览APP界面设计效果图的方法最后：好的APP界面设计作品必然是要经过不断升级、重复迭代的。一般用axure把appui/ue原型完成了，就交给设计和前端完成了高保真了，具体什么软件，着实不知道。

---