文章作者从安全和认知两个角度探讨了金融类APP界面设计的规则，接下来这篇文章继续从效率、引导和体验三个方面展开讨论，与大家分享。
三、效率快：缩短到达目标的距离
某银行APP用户查看理财收益的小短片。
从梳理的用户旅程图中可以看到，用户在查看理财收益的时候心情有一个落点。这个情绪低点出现在查看完理财产品后，要继续查看基金收益时，需要重新返回首页，才能找到基金入口。
而对比同类型的京东金融，在其首页就可以看到所有财产的情况，这样的设计缩短了用户到达目标的距离，整个任务会比较流畅，也符合用户的心智模型。
在梳理用户旅程地图的过程中，围绕“效率·快”，我们总结出几条匹配用户心智模型的设计原则：
- 保持交互/视觉一致性
- 简化流程操作、拆分主次，优先完成主要流程
- 与用户心智模型匹配
- 解决用户端的记忆负担
- 稳定快速流畅
- 充分给予用户操作控制权
四、引导准
1. 精准引导用户决策
关于引导有很多相关的原则，这里主要讲一下如何通过引导设计提高用户转化率。金融行业的竞争压力巨大，留存用户，留住他们的资金才是王道。
福格行为发生模型是一个用来探寻用户行为原因的模型。它认为，要让一个行为发生，必须同时具备三个元素：动机、能力和触发器。图中的蓝色曲线代表事情刚刚发生的一个恰好的时机。
从曲线中可以看出，当一个人的动机非常强烈的时候，即使能力不足，仍然是有机会去触发产生行为。反过来，当一个人的动机不那么强烈的时候，用户的能力够强，对他来说“easy to do”，行为也是可能发生的。
所以，金融APP要想留存用户，让用户行动起来，可以从增强行为动机，提高用户能力，同时减少决策成本三个方面努力。
2. 增强行为动机
（1）场景刺激用户
不同的用户对于理财产品的需求可能对应着马斯洛需求的不同层级，用户研究可以深入挖掘不同类型用户的理财需求。
针对那些理财需求较弱的用户，我们可以通过洞察用户的生存需求（马斯洛需求中最基础的一层），挖掘用户痛点，通过设计符合用户生存需求和痛点的理财场景，去刺激、强化用户的动机。
（2）利益刺激用户
用户投资理财产品的目的基本上都是为了赚取利益。那么只要让用户可以明确地感知到收益，便能强化用户的动机。除了突出放大产品的高收益数值，我们还可以通过收益对比、制造稀缺感、体验收益来提高收益对用户的刺激。
例如：
- 收益对比：可将理财产品收益与用户已建立起收益认知的产品进行对比，例如与银行活期存款、与支付宝余额宝进行收益对比；
- 制造稀缺感：通过制造理财产品的稀缺感，如“限定剩余额度”、“95%的用户都购买了”等运营手段，刺激用户对该产品的关注和利益争夺。
- 体验收益：对于利益，用户如果不进行投资是感知不到的，但倘若我们可以通过给用户一笔体验金，让用户体验3-5天的收益增长，并承诺这期间的收益送给用户，用户在体验到实实在在的收益后，便能更大程度的增强投资动机。
3. 提高用户能力
（1）降低学习成本，增强知识输出
用户的理财知识水平参差不齐，我们做设计时必须保障对金融知识了解较少，甚至没有理财概念的小白用户。在“认知·易”一节中，已经阐述过如何帮助用户进行认知降维，其实就是在提高用户的行为能力。除此之外，还应该增加金融知识的输出，提高用户的知识水平，也能提高用户决策能力。
（2）降低行为成本
除了降低用户的学习成本，降低行动成本也是提高用户能力的一个方面。通过合理的交互设计，可以缩短产品购买流程、减少用户操作的次数。
（3）排列决策要素优先级
通过观察和研究用户如何使用产品，我们可以绘制出用户体验行为地图，来挖掘用户在每个决策节点所遇到的痛点和需求。将每个决策节点的决策要素进行排序，便可找到界面设计中，信息排序的优先级。将最可能影响用户决策的要素放在最前面，就可有效减少用户的决策成本。
（4）优化、简化决策流程
简化交易流程，并针对不同类型的理财产品交易流程进行优化和简化，找出共性点，进行统一的交互、视觉设计。用户在体验过一类理财产品的交易流程后，购买另外一种理财产品时，能感知到熟悉、相似的流程，且流程不长，可以大大推动用户进行决策交易。
五、体验新：新技术、新视觉
大热的5G技术
语音识别技术
VR增强技术
金融APP的用户是基于年轻化的用户，这个群体是比较崇尚创新的。创新对于相对传统的金融行业来说，就是在各个方面都要让用户感知得到创新的元素。比如现在很多界面设计都会使用一些动效，金融类APP也是完全可以用到的。还有智能AI、云客服和VR增强技术，都可以运用到金融场景里。
免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！
]]>我们常轻忽身边习以为常的事物，觉得没有必要为一些看似简单又可有可无的东西浪费时间——例如线框图。虽然没必要凡事都寻根问底，但当面对复杂问题时，脚踏实地回归基本面也许才是根本解法。本文深入介绍程序开发界面设计中，最简单也最容易被轻忽的线框图设计。
接下来用以下几个点进行说明：
- 什么是线框图？
- 常见误区
- 为什么要画线框图？
- 怎样画线框图？
- 组织团队一起画线框图
CB Insights 做过一份调研报告《创业公司失败的20大原因》，里面说17%的创业公司认为他们失败的原因在于用户体验不够友好。
毕竟设计出一个对用户友好的界面并不是一件容易事，特别是对于多维度、关系交错和要素众多的复杂产品来说。
要设计这类产品时，我们应该自上而下，从顶层理念到具体细节的方法，而线框图是最好的工具。
一、什么是线框图？
线框图（Wireframe）：它是展示Web或者App框架的视觉指南。
绘制线框图的过程中，我们需要考虑用户需求和使用流程，并在相应的页面上布置需要的内容和功能。
软件开发的初期阶段，产品在进入视觉设计和内容填充阶段之前，我们可以用线框图来搭建页面的基本框架和结构。
乍一看很简单，比较线框图已是日常工作的基本环节，交互设计师也不少见。但这就是本文开头提到的问题，我们往往对看似简单的事情缺乏重视。
线框图的最大意义，是帮我们定义产品或者服务的目标。
可以说，线框图设计的主要目的，就是向团队、领导、合作伙伴展示App等应用程序将拥有哪些页面和组件，以及这些元素将如何相互作用。
从这个层面来说，我们可以知道线框图对于开发过程和最终产品呈现的影响有多大。
二、线框图的常见误区
- 为了完成任务而画线框图
- 直接跳过线框图阶段
- 做完了视觉再开始准备线框图
- 不理解为什么要用线框图
线框图应该先于视觉设计阶段，而不是反过来。否则就像在敲完代码以后，再决定选择你App的技术栈一样。
好的线框图是设计质量的保证。我们越了解其使用目的，收益也就越大。因此我们才需要更深入探讨使用线框图的原因及其价值所在。
在现实中，一些缺少产品设计知识的公司可能会直接跳过线框图阶段，虽然这可以削减成本，但也会产生风险。
遇到这种情况，设计师可以尝试主动解释为什么要画线框图、它对我们的产品有什么好处、怎样节省开发成本？
三、为什么要画线框图？
1. 帮助团队确认工作内容
线框图允许设计师用可视化的方式快速创建产品原型，并向团队展示哪里需要修订，界面有哪些，上面有什么元素和控件，它们是怎么交互的。
同时，浏览可视化的线框图要比阅读说明书快得多，也能减少预期和最终成品之间的差异。
2. 让所有团队成员都能参与产品设计
我们肯定遇到过这样的情况，做出了一流的设计却苦于开发实现的限制。使用线框图能让我们拉上开发人员在早期阶段一起讨论设计，使他们能够在你进行视觉设计之前提供反馈和建议，这样能够加快设计流程从而避免浪费时间和金钱。
3. 为客户提供原型
从客户和上级领导那里得到快速反馈是设计中一个重要的部分。我们都经历过来自他们的改稿要求，这是正常的。有了线框图，我们可以让这个过程更有效率，而不是在开发原型上消耗更多的时间精力，同时它也能让设计师不会在改稿上浪费额外的时间。
4. 能执行用户测试
《精益创业》（Lean Startup）的作者Eric Ries曾说过，越早进行用户测试越好——没有人希望在推出一个应用程序以后才发现用户不知道如何使用它。线框图能帮助设计师从潜在用户那获得有价值的反馈，而不用花时间去开发复杂的可交互原型。
但UI/UX设计师们使用线框图并不意味着用得对用得好。
因此下面提供一些实践中的最佳做法以供参考。
四、怎样画线框图？
为了发挥最大效益，为后续工作流程提供基础，使用线框图应该遵循以下几个简单原则:
1. 减少颜色的使用
如果你在线框图中使用了丰富的配色，你应该提醒自己线框图的目标是什么（展示产品包含什么元素，以及他们如何相互作用），并思考多余的颜色是否有助于实现这个目标。
在某些情况下，配色确实会起作用。但一般线框图里的颜色可能会分散读者的注意力，使得后续调整变得更困难。
此外，并非所有客户对于用户体验工具都有所认识，这时候也可能需要使用彩色的线框图。
除了黑白两色，你也可以使用其他的颜色。有时候使用颜色突出显示特定的组件是合理的，例如可以用红色表示错误状态，用蓝色表示注释等。
2. 使用简单的组件设计
当你在线框图上添加组件时，选择基础的设计即可，不需要放置过于详细的组件。这些组件对团队来说，应该是易识别的、一目了然的。花费大量时间和精力去设计详细的线框图组件不一定有用。
3. 保持一致性
相似的组件在所有线框图上看起来应该是相同且一致的。如果相同的组件看起来不一样，开发人员会质疑其是否一致，影响他们的判断，甚至要为不同的设计增加额外的开发成本。在制作线框图的时候，请记住：保持一致，减少混乱。
4. 使用真实内容
我们有时候会看到UI/UX设计师不在线框图上添加真实内容，而是使用“loremipsum”一类的无意义文字。很少有设计师意识到这是不对的。你可能会说，内容在设计阶段反正不可用。确实，我们建议你使用内容草稿就可以了。
在真实情境中，内容会影响你的设计，使用草稿则能帮你做出更好的设计。如果你用的是无意义文字，界面就可能会丧失与真实环境的一致性和整体性，后续可能需要对用户界面进行大量调整，甚至是创造一个无法落地的设计并推倒重做。总之，真实的内容可以为线框图提升价值，串联上下文，提供更有说服力的解释。
5. 使用注释
有时候可能会出现一些设计方案无法用视觉来说明的情况，因此上级、客户或开发人员可能会对它们产生疑问。例如，某些控件背后的逻辑是什么。在这种情况下，你可以提供一定的注释来解释其背后的逻辑。一来团队能理解，二来你不需要再解释。
6. 低保真到高保真
没有严格规定说你应该使用低保真线框图还是高保真线框图，这取决于项目本身。
所以在特定情况下，当你需要为线框图添加更多的细节时，不需要纠结。
但是正如Eric Ries所说，如果这些细节不能带来价值，你就不要做多余的“无用功”。先从基础开始做起，再根据需要不断完善和添加细节。
例如：当你需要开发者关注到一些个性化的解决方案上来时，可以添加更多的细节，并在线框图中说明清楚。
7. 将线框图扩展到原型
作为设计师，我们需要和不同的产品打交道，有些产品交互简单而普通，有些则相当复杂。有时候线框图不足以说明其复杂性和典型性，你就可以将线框图升级扩展为可交互原型，而不是写冗长的笔记并花费大量时间来解释它。
现在市面上我们有一系列简单而强大的工具，比如Figma、Invision、AdobeXD、 UXPin、 Axure、Moqups等。只需要进行适度的评估就能选择最合适的工具来设计线框图，开发简单的原型。
用来做线框图的工具主要有以下两个目的与特性：
1. 简易性：门槛低，对于刚入行UI/UX的新人和缺乏使用复杂软件经验的人来说，它们再完美不过。
2. 协作性：强调协作性的工具一般都包含丰富的团队协作功能。协作是现代软件开发的支柱，因此最好的线框图工具不仅提供大量的功能，还允许参与设计过程的所有团队成员之间能进行高效简单的协作以下是绘制线框图的主流工具：
- Figma：一款基于云协作的工具，功能强大，支持 Windows 和 macOS 的Web端和桌面端。Figma为构建线框图、原型、UI绘制等提供了许多强大的功能。
- Sketch：在UI/UX设计师中使用广泛，还可安装插件来实现多种功能。与竞品不同，Sketch只能在macOS上使用，还需要用户依靠第三方来解决协作的问题。
有很多工具都能用来设计线框图，我们建议你不应该只是根据产品的功能和特性来进行选择。相反，我们建议你多尝试和探索，并决定哪个工具才是最适合你的。
为了展示现代设计工具的强大力量，这里我将分享个人的经历来展示我和我的团队如何使用上述工具来完成一个完整有效的线框图设计流程。
五、和团队一起画线框图（案例）
我工作的公司正在开发复杂的金融科技数字产品。除了设计团队，还有一个专业的业务分析师团队。他们准备了需求并创建了低保真度的线框图，然后传递给我们的设计团队。
线框图设计中的团队关系
1. 选择工具
我们需要为业务需求分析师（BA）和设计团队选择一个一体化的工具。由于大多数商业分析师的设计技能都相当低，我们希望找到一种既适用于他们又适用于设计师的强大工具。
此外，易于协作是我们团队的首要任务。基于这些标准，我们选择了Figma。
2. 创建组件库
为了简化产品设计过程，我们创建了BA团队可以使用的自定义组件库。这使我们能够加快线框图的绘制，因为业务分析人员可以快速地使用现成的组件，而不是自己绘制。
3. 训练团队
为了展示如何使用Figma和组件库，我们为BA团队办了一个小型的工作坊。在工作坊中我们还拓展了一些额外的关于原型设计的知识。
结果
在案例中，即使团队成员分布在乌克兰、澳大利亚和菲律宾，Figma 也被证明在线框图和协作方面是高效的。我们目前使用 Figma 作为沟通渠道的事实证明，通过邮件或信息在线框图上进行协作更为方便。
六、总结
很多设计师开始时不太重视线框图，无法通过线框图来为项目提供有效帮助，进而导致团队也感受不到线框图的意义。希望阅读完此文的你，无论是否是设计师，都能对线框图有更多的理解。尤其是在这样一个设计工具越来越便捷的时代，希望大家能够借助线框图，让自己产品的用户体验以及团队的工作效率更进一步。
原文作者：Anton Suprunenko
原文地址：ttps://medium.muz.li/how-to-succeed-in-wireframe-design-2ab3cd5c4bc9
免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！
]]>最近常听到一个话题，做设计很土，不知道如何提升。其实这种烦恼，我们每个人都会遇到，包括我自己在做方案时候，第一稿自己都看不顺眼，反复尝试多稿才得到满意的效果。
界面缺乏美感，其实都是我们的细节没有处理好。很多优秀的设计作品，都是细节处理很到位。今天就和大家分享一些小技巧，来提高设计美感。文末有惊喜~
使用投影
有时候我们在做设计时候，很容易忽略投影这个小细节。投影处理得当可以提升细节美感，处理投影时候需要注意的两点：
1.使用品牌色
用按钮来举例，可以看出左侧投影轻量且带有按钮颜色，看着舒服；右侧是黑色投影，显得有些脏，细节反而没了。
2.注意透明度
有时候我们投影是加进去了，设计感也有了一些，但透明度属性可千万别马虎，如上面右侧按钮，就是投影过重了，很多新人容易犯的错。
下面来看下其他案例，运用在卡片或者关键的功能模块。
运用在卡片上面，增加层次感，丰富设计细节
只关键功能上面使用，如选中状态
备注：使用投影时候，切勿满篇幅使用，可以在关键地方加上投影，给整个界面布起到画龙点睛作用。
图文叠加
可以使用文字作为背景来增强画面形式感和视觉冲击力。
很多时候我们构图，直接将元素图片放中心设计，然后就完事了，其实仔细思考，还可以去丰富下细节。
在人物背景后面添加与图相关的主体文字，作为背景修饰。看下案例：
巧妙将数字与前景图进行排版，画面有了纵深感
商品图和LOGO组合排版
平面海报图文叠加设计手法，也是屡见不鲜
融入圆形
圆形在设计中出现频次很高，原因其亲和力给人主观感受上要强于其他图形，因此可以借用圆形去设计。
如果单纯的将页面排版在画面中，会显得呆板，很常规。
如图，加上圆形背景，画面瞬间就活起来了，细节层次丰富，下面看看实际案例。
圆形和人物组合排版，这里圆形品牌图形
圆形作为修饰背景，强调主体人物
粗细有节奏
粗细对比虽然很常听说，但是很少有人注意到它在界面中使用细节，粗细文字排版增强对比的作用，提升品质感。
通常大部分伙伴第一次估计就想到上面这种设计，这样比较粗暴一些，比较常规。
如果将两个文字粗细调整下，再添加文字背景，设计感就上来了，下面看看案例。
粗细对比增加细节感
这张海报同样的在设计中使用粗细对比
写在最后
今天分析四个小技巧提升设计美感，在日常工作中需要多加以运用，才可孰能生巧，随机应变各种设计。
当然上面的方法并不是单一使用的，大家可以组合使用，会得到意想不到的视觉效果。
对了针对本篇文章，便于大家理解，我特意找了一些其他有延伸案例，包括UI和海报、杂志排版等，希望可以帮助大家更容易掌握。
免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！
]]>凭借对细分文化市场的敏锐把控，以“小众”+“社交”的标签挤入市场的网易云音乐，在红利期借势大环境获得了高质量的阶段增长。虽然进入到拼渠道、拼版权、拼资源的关键时期后，网易云音乐显然已有些力不从心，但网易云音乐APP设计无疑是国内主流音乐播放器设计的一股清流，兼具质感与内涵，配色和整体设计也有着自己的情怀和风格。对于产品的独到理解，让网易云音乐始终保持着自己独特的小众设计感。
接下来我们从层级结构、界面设计和交互设计三个方面来分析一下网易云音乐APP的设计亮点。
层级结构
网易云的产品定位是音乐社交，从功能结构可以看出，除了基础的播放功能、评论功能、收藏功能等，网易云音乐还有独立的社交模块，歌曲评论处有热评分享功能，除了普通用户之间的交流，同时加强了普通用户与音乐人之间的交流分享。
“发现”为网易云音乐的首屏，网易云音乐将歌单列表入口和推荐歌单放在发现页，用户可以更方便地发现新音乐，符合其发现与分享的产品定位。
“我的”页面导航逻辑十分清晰，在这一界面，用户可以对下载的音乐、最近播放以及创建和收藏的歌单等进行统一管理。
“云村”是网易云音乐独立的社交模块，主要用于查看和发布动态，用户可以在广场查看热门动态，也可以查看关注的动态。
网易云音乐针对视频设置了一个单独的模块，点击可查看不同的视频分类。可以看出网易云音乐比较注重音乐视频功能。
“菜单栏”则主要包含了相关设置功能和一些使用率相对较低的功能，包括“演出”和“商场”等。从这里也可以看出网易云音乐并不局限于音乐播放器的功能，而是想打造一个综合类的音乐社交平台。此外，在菜单栏可以切换“日间模式”和“夜间模式”。
对于功能点较多的APP来说，杂乱的信息及其容易让用户迷失其中，因此在设计上尤其需要重视层级结构。网易云音乐对于层级结构的处理较为妥帖，可以清晰地传达出主次信息。
界面设计
网易云音乐的配色以高亮红为主打色，与黑色和灰色搭配，比同类型APP配色更加细腻，设计感十足，营造出低调、个性、热情的产品氛围。
经过改版后的网易云音乐，去掉了原来大面积的红色背景，将整体背景颜色改为了纯白色，搭配亮红色图标，使整个页面更有呼吸感，显得更加清爽通透。
结构上采用了音乐播放类APP顶部一级Tab导航+底部播放器的结构，保证了产品页面利用率。各板块之间采用留白分割，使用户的操作更加顺畅。
此外，改版后的网易云音乐，将之前的矩形图片全部改为了圆角图片，结合大量使用的圆形图标，在视觉呈现上也更为柔和。
在歌单广场等页面，主要以“小图＋文字标题”的形式进行呈现，形成统一风格的同时，又突出了歌单页特色功能。除部分官方发布歌单外，其余歌单均为用户产出，歌单封面多为用户精心挑选。而网易云音乐提供了封面图下载的功能，因此，如果需要图片素材，也不妨来网易云音乐的歌单广场转转。
歌曲播放界面，随音乐缓缓转动的黑胶唱片，更好地呈现了音乐播放的氛围，也为网易云音乐圈粉无数。
点击歌曲播放界面右上角的分享按钮，可以生成极具设计感的分享卡片。在评论界面，也可以将当前页面快速转为图片分享。突出了网易云音乐极为重要的社交功能。
交互设计
网易云音乐在操作过程中，播放器始终位于页面底部，符合用户的操作习惯。此外，对于一些细节的交互处理也非常细致，可以让用户使用起来更加顺畅。
1.转场交互
网易云音乐在页面切换的过程中，增加了滑动、渐入等效果进行过渡，使用户切换页面的过程变得更加流畅。
2.刷新效果
在使用下拉手势刷新页面时，会呈现红色的动态图标，与网易云音乐主色调一致，具有整体性。此外，在刷新后，首页歌单会改变，来帮助用户确认当前页面已是最新状态。
3.加载符号
在打开歌单、打开评论或打开专辑等需要加载的环节，网易云音乐都采用了“音波符号”的动态效果，来增强用户体验。
4.正在播放效果
在音乐播放界面，除了标志性的黑胶唱片设计，网易云音乐还提供了多种随着音乐律动的动态效果，可以让用户在更好的视觉氛围中欣赏音乐。
5.滑动交互控制
除了页面切换时可以采用滑动交互效果，在歌单广场、签到等界面，也大量运用了左右滑动的交互来进行控制，增加了用户操作的趣味性。
6.hover状态
在动态列表等界面，点击或长按停留在其中一条动态时，会出现覆盖整条动态的热区，来提示用户此处是可以操作的。
7.图标点击动效
用户在App进行任何操作时都需要给予正确的反馈，如用户在为歌曲标记红心时，点击图标，图标会产生微交互动画。此类情感化的设计会让用户觉得有温度，从而收获好心情。
以上是小摹从层级结构、界面设计和交互设计三个方面对网易云音乐进行的大致分析，如果展开来讲，还有更多细节值得我们参考和学习。当然，对于一款音乐播放类产品来说，资源无疑是最重要的。如果解决了版权这一痛点，相信网易云音乐能进一步获得大众的喜爱。
免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！
]]>