本文将以「产品与用户之间的信任」为出发点，从产品体验的角度，对比产品体验层面的差异化，为大家提供设计思路，助力产品数据的增长，设计出既好看又好用的产品界面。
在千禧年来临之前，我们首先开始在单一视图屏幕中进行UI设计，这类屏幕在当时最流行的尺寸是640x480。大多数时候，我们甚至没有考虑让屏幕滚动，而是在特定区域或文本局部区块中设置了内部滚动条。毋庸置疑，当时的大部分网页也是用Flash或HTML创建的，并带有用于布局的表格。那是在智能手机出现之前，随着事物的发展，我们经历了第一个向“响应式”设计的根本转变。我们已经走了很长一段路，CSS已得到长足的发展，“响应式”网页设计从2010年开始才真正获得了专有工具。
图表来源: https://www.webdesignmuseum.org/web-design-history
随着CSS3的发布，我们获得了对“媒体查询”（Media Queries）的访问权限（译者注：随着移动互联网的兴起,我们需要适配多种移动端设备,这就需要用到Media Queries，即“媒体查询”），此后不久，Ethan Marcotte在2009年底创造了“响应式设计”一词。十多年来，我们一直使用“响应式网页设计” (RWD) 创建网页布局，作为一种网页设计方法，仅需基于一种屏幕尺寸进行设计，“响应式”使我们的设计能够适配各种设备和屏幕尺寸。
在早期，当移动电话还不兼容媒体查询或JavaScript时，“移动优先”和”渐进式增强”的概念就成为了非常流行的方法，当时有很多CSS完全不受支持。
用我们今天的话来说响应式设计，我们认为页面的布局要适配整个浏览器、屏幕大小和那些需要投射到整个布局上的限制。当需要设计从桌面端调整为移动设备屏幕所需的尺寸时，我们使用“媒体查询”来更改整个页面布局。
很快，使用这种“响应式”设计方法可能会被认为与使用表格进行页面布局一样过时—就像我们在90年代所做的那样。
我们通过基于viewport（视口）的“媒体查询”获得了许多强大的工具，但我们也缺乏很多适配的可能性，因为“媒体查询”是一个适用于整个页面的通用解决方案，并且对每个用户来说都一样。我们缺乏响应“用户需求”的能力，也缺乏将“响应式”样式注入“组件”本身的能力。
当我们谈到组件时，这里指的是页面上的“元素”，这些元素可以由其它“元素”的集合组成。例如卡片、横划卡或推荐模块之类的UI内容，每个“块”都由各种更小的“构建块”组成。这些组件拼凑在一起构成我们的网页。我们可以使用 global viewport information（全局视口信息）来设置这些组件，但它们仍然无法拥有自己的风格。当我们的设计系统是基于“组件”的而不是基于“页面”的时，这使得它变得更加困难。
好消息是这个生态系统正在发生变化，而且它正在迅速变化，这需要我们进行一些思维转变：考虑如何设计和定义组件样式以及它们如何适应周围环境。
CSS正在不断发展，“响应式”网页设计的新时代即将到来。从目前的情况来看，自从我们第一次引入 “响应式网页设计” (RWD) 以来，仅仅10多年的时间，这个生态系统已经准备好迎接CSS发生一些相当大的改变。
让我们深入研究一下可以期待哪些类型的变化，这会如何改变我们的设计方法，以及我们如何考虑界面设计。
简单来说，我们可以期待新的基于偏好的“媒体查询”来帮助我们更好地“响应”用户。它们将使我们能够根据用户自己的特定偏好或需求来设定网页样式。这将使我们能够根据用户的体验偏好来调整用户体验。
这绝不是一个完整的列表，但能给你一些想法，这些基于偏好的“媒体查询”可能包括：
这些将帮助我们构建更具活力和个性化的网页体验，专门满足我们用户的专属需求，尤其是那些希望网站易于访问的用户。更进一步说，这些基于偏好的“媒体查询“尊重任何用户已经在操作系统设置的偏好。举个例子，当用户的操作系统偏好设定为“减少动效”时，他们很可能不喜欢你页面上的超级华丽的介绍、加载或飞入的动画动效。我们应先尊重他们的偏好，并为其他人提供“动效增强”的体验。
另一个流行的媒体查询是@prefers-color-scheme（配色偏好设定），它允许我们根据用户的偏好和操作系统中的设置将我们的设计更改为“亮色模式”或“暗色模式”。这不依赖于用户需要手动来更改“暗色模式”，它会自动发生。
CSS 中最令人兴奋的新兴领域之一是“容器查询”（container queries），通常也称为“元素查询”。从基于“页面”的“响应式”设计到基于“容器”的“响应式”设计的转变对发展“设计系统”的作用价值不容低估，尽管今天使用它并不安全，但重要的是要了解其发展方向。
简而言之，“容器查询”将允许我们基于“父级容器”而不是整个页面来设置规则。这意味着任何组件都更加独立，与现代设计系统保持一致，真正成为“即插即用”模块，可以转移到任何页面或布局，而且无需根据新环境重新考虑所有内容。
“容器查询”为我们如何规划、设计和构建特定组件提供了一种更加动态的方法，因为组件本身拥有它的响应信息。
甚至Ethan Marcotte自己也表达了为什么“容器查询”如此重要，我们应该研究一下。
由于各种“形态因素”（form factors）的变化和扩展，例如新的屏幕类型，可折叠屏，我们需要“媒体查询”来考虑这些场景。在这里提到的所有内容中，请记住，这是最具实验性的，并且只是一项正在进行的工作，仍在尝试解决我们可能遇到的任何复杂问题，同时考虑未来“形体因素”可能会如何发展。
在可折叠屏场景中，原型中有一些“媒体查询”可以让你定位屏幕跨度以及我们如何让内容根据新环境进行适配。例如，你可以在一个屏幕上放置一个收起的侧边栏（或菜单），并允许内容在另一个屏幕上展开并随页面滚动。
我知道你在想什么，我们已经从事网页设计并使用“响应式”来进行网页设计10余年了。我们对其相当满意，那么为什么要改变呢？如果我们真的以终局视角来看响应式设计，那么它就是关于个人用户的用户体验设计。我们正朝着一个与每一位个体用户高度相关的时代迈进。我们的网页体验应该去适应用户的需求偏好。随着设计系统的发展以及我们如何创建更便携的网页，诸如“容器查询”之类的工具将变得非常有意义。
配图：CSS 将基于各个层级来确定用户的最佳体验
考虑到这一点，这意味着我们现在可以使用基于页面的媒体查（包括跨越屏幕的细微差别）来设计宏观布局；使用容器查询的组件设计微观布局；使用基于用户偏好的媒体查询，根据用户独特的偏好和需求定制用户体验。
对于新的响应式设计，有许多新概念正在被原型化和概念化-请看下面的延伸阅读。所有这些协同工作的方式需要我们从根本上转变我们对设计和用户独特体验的看法。我们需要更加适应这样一个事实：即我们的设计不是静态的，不仅在布局上，还有在用户可获得的体验中，我们需要学会在这种模糊性中做出计划。网页和设计的未来变得越来越复杂，我们需要适应和挑战自己，理解“新响应式”体验的意义。
文章来源：站酷 作者:MEUX
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
伴随短视频平台的崛起，移动互联网的主流内容消费形态向短视频视听语言转变，视频信息流广告的时代已经来临。如何通过设计提升转化，是视频信息流广告所面临的挑战。
为了提升广告转化效果，我们结合实际项目，通过大量的实验与思考，梳理并总结了一套适用于视频信息流广告的转化组件呈现原则，我们将其命名为“延迟增强”。涵盖了沉浸式竖视频流、图文混合信息流、横视频列表流等各类常见信息流场景。
///
延迟增强是什么？
视频信息流广告有三要素：内容、框架、转化组件。其中广告内容来源于广告主投放的物料，基础框架需对齐宿主保持一致性，所以仅有承载转化信息和行为的转化组件，是可设计部分。
而“延迟增强”就是针对“转化组件”的一种伴随视频内容分阶段/渐进式的呈现方式。它由消费者决策时的理想心理动线，结合广告行为推导得出，并经过实验验证了其对于转化提升的有效性。
“延迟增强”包括两个阶段：1.广告展现初始阶段，延迟展现广告意图，通过内容吸引潜在用户；2.广告内容逐步呈现阶段，转化组件渐进式增强，辅以增益信息，不断强化，引导转化行为。
它指导了转化组件从“呈现”到“增强”的全流程，从时机（出现&增强时机）/引导（动效&互动引导）/前置（信息&转化前置）三个部分，帮助提升广告转化效果。
///
时机-延迟增强如何呈现？
转化组件的呈现时机包含“何时展现”与“何时增强”两个部分，前者帮助增加广告接收率，后者提升广告转化率。
01/ 出现时机：
延迟展现广告意图，可以提升广告卖点的展现机率
互联网的快速发展使得受众被动卷入爆炸式增长的资讯信息体中，广告借助这一媒介迅速发展，但也因为部分商业广告的过度宣传与其降低用户信息获取便捷性的本质，不可避免的使受众产生了心理上的逆反与抵触情绪，从源头拒绝了广告信息。
所以对广告来说，在广告展现初始，延迟展现广告意图，融入内容，可以缓解受众的抵触情绪，提升广告卖点的展现机率。
02/ 增强时机：
通过用户行为和视频特征动态决定增强时机，可以有效提升转化
对广告来说，搭配广告内容进行增强，通过内容积累购买欲/信任感，然后通过阶段性的增强来提示操作，对比一成不变能起到更好的转化效果。
我们首先尝试了程序化的增强时机，在不增加技术成本的前提下，根据历史经验，面向不同的广告均采用固定时段的阶段性增强。
但不同的广告物料内容不同，不同的用户偏好也不同，固定的增强时机并不能很好的满足所有广告需求。所以在技术能力可以承载的时候，我们采用了动态时机策略，通过用户行为和视频特征动态决定增强时机，在程序化增强时机之后，再次实现了转化提升。
///
引导-延迟增强如何引导转化行为？
转化组件如何引导转化，则可分为基础的视觉引导与进阶的互动引导，前者帮助抢夺视觉注意力，后者则能够在互动体验中植入部分帮助决策的“小心思”。
01/ 视觉引导：
适当增加视觉吸引点，可以有效引导点击
延迟增强需要通过阶段性的增强来提示操作，而如何增强能有效吸引注意则需要琢磨，已有实验表明转化按钮增加扫光动效与智能取色，能有效吸引注意，引导点击，对转化提升有良好效果。
02/ 互动引导：
让用户主动选择，可以增加广告曝光，辅助转化决策
互联网产品设计对于用户交互体验的追求越发极致，如影视行业走向可交互网剧，本质上是从用户接收转变为用户主动参与，用户本身对于获得优质体验的意识逐渐觉醒。商业化产品也需要紧跟“体验”与“互动”，将广告变为互动体验或具备使用价值的信息，让用户从被动浏览到主动参与，掌握对广告的选择权。
以互动投票为例，我们通过用户与用户之间的观点表达，以投票选择的形式诱发群体性选择，引起好奇心与同侪压力。
若用户选择符合群体选择，则带来群体性背书，增强信任感；若用户选择不符合群体选择，基于从众心理，用户极有可能对群体选择产生好奇，从而浏览两种选项的内容，有效的增加了品牌曝光。
///
前置-延迟增强如何帮助转化达成？
转化组件的前置主要包含信息前置与转化前置，前者辅助转化决策，后者帮助便捷操作，更好更快的完成转化。
01/ 信息前置：
增加增益信息或前置落地页信息，可以辅助转化决策
购买/转化一定是需要足够的信息积累信任感才能达成的，在前卡适当的增加卖点信息能够更好的帮助用户决策。针对下载类广告可增加评分与星级，二电类广告可以增加价格信息，甚至可以前置优惠劵、图片banner等信息，均能实现转化的正向提升。
02/ 转化前置：
缩短转化路径，可以帮助转化行为更便捷的达成
在信任感积累与阶段性的增强都达成的时候，在当前转化对比跳转落地页再进行转化，链路更短，用户流失概率更小。比起实验尝试，更像是延迟增强的基础能力配置。
首先，我们针对表单/咨询/电话/安卓下载都进行了转化前置，具有用户明确意向的按钮点击会直接在当前进行反馈。
除了直接将操作前置外，针对不同细分场景的需求，还可以通过交互形态的优化在感官上缩短路径。
这里以百度的视频MAX广告为例，我们针对重落地页的商家，将MAX首屏（视频页）与H5落地页的关系变拼接结构为双层结构，通过浮层面板承载落地页，延时自动弹出，强引导下方内容，激发用户上滑浏览兴趣，解决了落地页隐藏较深，转化链路过长的问题，同时增加了落地页曝光从而提升转化。
在视频信息流领域中，延迟增强仍然可以继续深挖，作为“基础建设”承载未来更多细分场景下的互动化、个性化的“精神需求”。
同时延迟增强设计方法也可以横向复用于广告前卡、落地页、IM工具等各种需要在合适时机抓取用户注意的场景中，去追求点击或者转化的提升。甚至在未来可以尝试其在长视频或图文场景中的应用。
文章来源：站酷 作者:MEUX
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
虽然，三类互联网老年人用户模型之间各有差异，但我们发现他们最大的共性的特点在于具有开放的心态积极地接受更多理财新可能，因此我们也应该尽可能从交互视觉的角度或从产品功能的角度为老年群体提供更多样化的互联网理财参与方式，并且降低参与的门槛。因此我们得到以下适老化改造的策略方向：
（1）产品内容功能上充分考虑老年人对理财产品的认知以及期待
（2）交互视觉上充分考虑老年人感官、心理、认知上的特性
（3）技术规范上充分考虑如何利用技术便利用户操作以及产品体验设计的最大化落地
根据过往产品设计经验，我们提出线上金融服务设计的三大原则：
操控感：所见的是什么，刚刚干了什么，现在在干什么，接下来怎么做，可达成什么目标。
无障碍：适用于任何人群
安全感：资产保障安全感、使用体验安全感
基于以上设计原则，结合本次适老化改造的策略方向，我们得到以下具体改进方向。
能懂会用，可以有效减少老年人在使用线上产品时焦虑感和挫败感。让老年人知道看到的是什么，正在做什么，接下来要这么做，可以达成什么目标，这是在使用线上产品进行一切操作的基础条件。
（1）简洁的界面
大字体、大图标、界面简洁；老年人因其生理结构特征，很难轻易识别一些较小的文字、图形；因此在界面设计的适老化改进上，需要简化信息布局、放大图形文字；
（2）清晰的导航
产品中的导航可以帮助用户快速定位当前所在位置，刚刚在哪里，未来会到哪里去。清晰的导航有以下三大特点：
连贯性：页面跳转前后需有继承关系，不光是文字，字体、颜色等视觉元素也可以加强关系
扁平化：尽量减少跳转避免出现多层级，除了操作复杂之外，客户使用时的记忆成本也较高
易记忆：无论导航的位置、描述、视觉元素，都应在用户心智中稳定固化，凭借记忆可以快速定位；
图11：支付宝（关怀版）
（3）明确的语义
所有描述、状态、操作尽量唯一且易于理解，符合老年人的基础认知；
（4）及时地反馈
任何用户操作行为都应有相应结果，对于极其敏感易焦虑的老年人群体来说更为重要，如加载、成功、失败、异常情况等，且反馈内容应明确可被理解，即在各项流程结束后应给出含有明确反馈的流程结果页面；对于学习和理解能力较弱的老年人而言，及时地反馈显得更为重要；
（5）顺畅的流程
复杂业务流程的任务对于老年人来说挑战最大，失败率也最高。除了与本身流程复杂，以及上述的语义不清、反馈不及时等可用性问题有关之外，流程体验的闭环对于老年人群体而言也是极其重要。
（1）辅助性功能
由于老年人的视力与协调能力开始下降，很难进行很复杂的交互动作。在线下场景中，老年人办理业务时会有银行工作人员在身边进行辅助。同样，在老年人使用APP时，产品也应起到辅助作用。常见做法有，线上客服、语音输入辅助、使用说明和操作示范等；文本输入提示，语音输入等无障碍功能，用于提升方言识别能力，方便不会普通话的老年人使用智能设备；对智能客服入口的设置也不仅仅放在首页，应辐射到尽可能多的页面。
图12：工商银行（幸福生活版）、平安银行（大字版）、中信银行（幸福+版）人工客服页
（2）低密度信息
对于老年人而言，即便是页面内信息的层级非常清晰，高密度的信息仍会增加记忆负荷。因此在针对老年人的产品设计中，不应过度追求页面效率，适当去掉形容性、专业性、技术性、营销性、装饰性的信息，将有助于信息降噪。
（3）简化操作
降低老年人的输入成本，例如合理规划验证码出现机制，身份证信息、银行卡号的图像识别、自动保存常用联系人等。
（4）产品适用性
市场上某些头部的金融相关APP已经推出老年版本，如支付宝的关怀版，该版本不仅是字体、按钮更大，更重要的是通过不同的信息功能架构，将不同年龄层的用户客群做了产品注意力的重点区分，强调不同类型用户的使用的场景不同，有助于将用户的注意力锁定在与其相关的业务上，提升用户完成任务的效率。
（1）资产保障安全感
近些年有关老年人的金融诈骗层出不穷、人人自危，除了实际保障资产安全的措施之外，在服务设计层面上也需要保障和增强用户安全感受。如在某些特定场景中，转账、汇款时，及时告知用户可能存在的风险，大额时需要子女辅助验证等；
（2）使用体验安全感
在产品设计中需要考虑防错和容错机制，这有助于减少问题的发生，消除老年人使用产品时的恐惧感，让用户放心安全的使用产品。例如输入金额时明确显示单位，金融产品页面强化显示风险与收益，大额需要二次确认。
根据以上改进方向和原则，下面对目前产品的部分功能模块和非功能模块分别进行梳理和优化，产出初步优化方案和建议，并对其中部分具体功能的实现做技术分析和方案要求。
2.1 基金账户类
涉及开户流程、风险测评问卷、资料变更等板块。需要适配改进的地方包括以下几个方面：
（1）证件上传
开户证件OCR识别和上传，对二代身份证的支持较为完备，对一代身份证和其他证件类型的支持不到位。老年人群体存在持一代身份证的可能性；
（2）开户绑卡
开户绑定银行卡，基金公司支付渠道仅支持银联标志的银行借记卡，对存折等非借记卡不支持；
（3）预留信息
央行反洗钱、CRS等合规要求对开户资料预留信息字段作出了明确规定，其中部分字段不容易让人理解和获取，如账户实控人、电子邮箱等；
（4）风评问卷
关于风评问卷，目前题目数量较多，建议减少至5道题左右；
（5）密码找回
增加多种找回密码的途径，如手机号、电子邮箱、手机短信。
2.2 基金交易类
涉及申购、赎回、专户、分红方式、定投等功能，需要适配改进的地方包括以下几个方面：
（1）数字输入
交易密码金额等数字输入场景，建议尽量调起九宫格数字键盘，字号较大且清晰；
（2）风险提示
购买环节，按销售适当性要求，醒目提示基金风险；
（3）限额
基金申购支付方式，适当提高支付限额，或引导汇款转账的方式，满足大额申购场景。
2.3 查询类
（1）在线客服
建议增加语音输入和播报功能，同时醒目提示人工客服点击按钮；
（2）图表查看
基金列表和详情页等页面中包含图表的，建议增加竖屏和横屏切换按钮，增加图表易读性；
（3）版本更新
新版本发布时，建议增加新功能示意遮罩，指引客户如何使用新功能。
（1）色彩
用色简洁干净、对比柔和。减少复杂颜色、渐变颜色、极端饱和度颜色的使用，尽量使用纯色、基础渐变、稍微明亮的颜色作为图标用色，关键互动界面避免使用蓝色。
图12：工商银行（幸福生活版）、平安银行（大字版）、中信银行（幸福+版）功能列表页
（2）文字
字体应使用黑体类型字体，且允许用户自行调节或匹配手机系统字号，但最小字号不宜低于16px，多行文字显示时行间距应为1.5倍字号大小，减少大量文字内容带来的压抑感；文字颜色使用不同透明度的黑色进行信息层级的区分，重要内容使用1～2种辅助性彩色作突出；
（3）图标
图标设计简洁清晰，且需要有文字说明，避免使用过于抽象表意不明确的复杂图标；
（4）布局
结合对老年人的认知及操作习惯，通过信息类型、展示频率、重要性等方式进行归类，形成合理的布局结构，通过这种行为塑造方式，让用户快速摸清产品形态；
如下图两家银行首页布局由资产查看、常用功能金刚区、轮播图、服务渠道、理财产品构成；在底部导航栏上只选择展示两个一级页面以及突出显示的语音助手入口。
图13：工商银行（幸福生活版）、中信银行（幸福+版）首页
（5）动效
有效的动画可以给页面带来生命感，但如果滥用动效不仅会分散用户注意力，严重的话对某些用户来说可能是致命的（光敏性癫痫的临床诱因之一就是闪光图像的刺激）；
为了避免给特殊人群造成困扰，设计师考虑加入动效时应注意禁止使用高频闪动、运动夸张、视差较大的动效，并且在同一界面也应控制运动元素数量，避免对用户的阅览和判断产生困扰。
（6）无广告
由于老年人对事物的认知和理解能力较慢，过多的广告会严重分散用户注意力，甚至导致误操作造成经济损失，尤其一些具有强误导性的开屏广告、营销活动广告等；建议减少广告数量、杜绝恶意引导广告，并针对广告投放需设立专门的审查人员进行合规审查。
（1）按钮热区
对于文字按钮需要保留较大的间距作为按钮热区，避免老年人用户操作时误触；
（2）版本切换
新增版本切换功能，建议将按钮直接展示于首页右上角，且要有文字进行图形说明，便于老年人用户理解且能直接进行操作；
现有APP采用架构为hybird app，基本的开发模式为：原生壳子+H5(vue)，因此针对版本切换功能需要对APP架构进行调整，解决方案为对各项版本进行独立开发或对原版本进行内置模块开发。
其中，独立版本开发优点为各版本独立、UI独立、历史包袱少；相应地，也提高了开发和维护成本；一些情况下多版本入口也会使用户在使用上产生困惑；
内置模块开发，以模块形式嵌入原生系统中。其优点为成本相对较低，使用入口统一，缺点为历史包袱过多、开发自由度较低、改造过程也受老系统所制约。
（3）语音识别
考虑到用户群体对于文字输入和阅读的能力欠佳，针对查询功能、键盘（数字）输入、智能助手等功能，嵌入语音识别、语音输入、语音播报等技术，优化老年人用户操作体验。
在互联网日渐发达、金融逐步数字化的今天，越来越多的老年人群体尝试着加入我们的步伐，他们构成了快速增长且日益富裕的目标受众，但现实是，一些不恰当的设计让他们望而却步，无法享受科技能够带给人类的利益；为此，我们需要关注和反省，我们所创造的、服务于人类的产品，也应该有能力来适应人类衰老的过程，而创造这项能力，也已经成为了肩负在我们身上的责任。
文章来源：站酷 作者:陈皮红豆沙
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
失败的网页设计各不相同，但是优秀的网页设计则有着共通的特点。你需要思考人们想要的是什么，什么东西能够触动他们，让他们欲罢不能，无法忘怀。
听起来似乎很简单，不是吗？取悦用户的关键在于像用户一样思考。并不是每一次创新、每一次重塑、每一种新技术都能让用户愉悦，那些真正易于理解、便于使用、降低难度的技术、设计手法和抓人的视觉元素，才是一切的关键。下面总结的7项秘诀，会让你的网页脱颖而出的。
定制化，或者说个性化，是今天网页设计中最典型的趋势之一。用户希望浏览网页的时候获得更加私人的浏览体验，无论是玩页游还是购物。
看看世界上最著名的那些网站是怎么做的吧。Amazon 为用户提供基于购买历史的产品推荐，Netflix 则会推荐相关的作品、有待观看的下一部，并且基于用户 Twitter 上的内容来进行推荐。
每一个微小的自定义设计，都能让用户感觉这些用户体验设计是为他们而做的。同时，这种设计也会给用户一种参与感和沟通的体验，从而加深用户的忠诚度。如此一来，用户会更好地融入整个网站的用户群或者社区。
另外一个大热的流行趋势，就是动效设计。它不仅能为用户带来惊喜，而且具备强大的引导性。
动效设计的精髓在于简单。令人头晕或者不知所措的动效，应该不是你要的东西吧？动效应该是有目的性的，和其他所有的设计元素一样，有针对性，达成目标是它存在的意义。
对动效或者说动画最熟悉的，无疑是迪士尼。Frank Thomas 的《生命的错觉：迪士尼动画》中，就详细总结了创造今天动画的12个原则：
·挤压和拉伸
·预期
·登台
·连续动作和姿态对应
·缓进缓出
·弧形运动
·次要动作
·时序
·夸张
·立体刻画
·吸引力
对于常见的问题，设计模式就是可靠且可复用的解决方案。简而言之，最常见的信息和交互方式被整合到一个界面当中，比如点击按钮，滚动页面，滑动解锁，它们都是设计师模式。
你需要熟悉这些常见的设计模式，并且在设计界面和交互的时候将它们用进去。这符合用户在体验上的诉求，也是易用性的最基本构成。
同时你也要在自己的设计中创造设计模式，在不同的页面中使用相同、相似或者规则化的设计，让用户习惯。比如，不同页面中的CTA按钮的色彩保持一致，卡片式的元素使用相同的样式，等等等等。
没人会喜欢单调无聊的设计。你的网站应当同你的品牌保持一致的性格，拥有独特的气息。
要做到这一点，通常需要用到微妙走心的文案和亲切自然的语调如果你真的不知道怎么做，可以看看MailChimp 是怎么做的。（请注意他们的文本和图片是如何无缝地连接到一起的）
用户同网站交互都是在屏幕内进行的，无论是桌面端还是移动端，整个体验都是围绕着屏幕进行的。
这并不是一句废话。屏幕是一个区域，它界定范畴，赋予概念，创造隐喻。这也解释了为什么视差滚动和卡片式界面是如此的流行。这两种概念将一定量的信息合理地放置到屏幕这个容器中，让用户随之同下一个元素进行互动。
如何运用好这个概念其实并不是那么容易。一个屏幕内应当承载多少信息，需要仔细考虑。一个桌面端页面所能承载的信息量在移动端屏幕上，可能需要划分到几个页面当中去。
从屏幕的角度来考虑问题，可能会让你的计划更加庞大复杂，但是这种考量是有价值的，这种基于屏幕或者基于设备的考虑能让用户感觉更加便捷贴心。
视频、游戏、测试都争取让用户能与之进行互动，这种互动的目的在于驱动用户参与到设计中来。用户与界面交互的越多，用户所获得的体验就越好。
不过，有趣的元素能让这一切截然不同。
让交互内容尽量简单，不要牵扯太多，让用户可以一目了然，让他们轻松获得反馈的信息，不用在冗杂的体验中沦陷。这其实和美剧的5分钟原则有着异曲同工之妙。
最后一个秘诀并非不重要，它甚至可以说是最基础的原则：让你的设计保持干净、整洁和有序。使用栅格可以让每一个页面元素都有准确的位置。将响应式设计落实到每一个元素，能让页面能从一个设备兼容到另一个设备。
简约风和极简风能成为设计趋势是有道理的。用户可以更轻松理解这一切。简约的视觉设计更容易交互。没有复杂信息并且被精心设计的界面能更好地运作，赋予更好的体验。
苹果的官方App Store 和Google Play 都推荐过的游戏 Two Dots 就是个典型案例。谁都可以拿起手机毫无障碍地开始玩儿，它设计简单干净，容易互动，视觉元素周围有足够的空间，无需担心误触。同时，其他游戏所具备的东西它也有——有趣好玩，可以共享得分，能分享到社交媒体。
界定一个网站的体验与否有的时候并不是单一的标准，而今天所推荐的7条秘诀本身也更接近于基本的Guideline，了解用户，熟悉趋势才能提供优秀的体验。
文章来源：优设 作者:陈子木
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
首先，为什么要动？可能你会想到以下几条理由：
呵呵，你要这么想就完了。
那么该如何衡量一个动效是否应该出现呢，我们认为有几个考核标准：
1. 这个动效是否会影响性能？
首先，这个动效是否会影响性能？这个是最重要的，添加任何动效前都要考虑是否会影响产品的性能，如果一个很酷炫的动效会拖累性能，使体验变得卡顿不流畅，那么必须毫不犹豫的砍掉或简化。
例子：化身间谍
比如这个例子，这是一个穿越情景的过场动画，随着年份的倒转背景出现各个历史大事件，给人以历历在目的感觉，设计师考虑到了多张图片会出现卡顿的可能性，所以特意降低了每张图的清晰度，因为内容本身就是老照片的风格，所以这种降低画质的手法反而增强了画面的真实感。
2. 这个动效是否会提高产品的可用性？
任何动效的出现都必须带有明确的目的性，能够解决用户在使用过程中的困惑，而不是炫技。单纯的炫技只会分散用户的注意力，弱化内容，变得适得其反。
例子：翻页提示
比如这个上滑提示。不用解释，用户一看知道该做什么。动效增加了产品的可用性，所以这样的动效是非常有意义的！
3. 这个动效是否会给你的产品带来独特气质？
这里所说的气质是动效本身会有助于增强用户对于产品的认知和情绪带入。一个相得益彰的动效会为你的产品锦上添花，深化你的主题和功能，注意，一定是与主题相关的，牵强的搭配只会叫人觉得莫名其妙，毫无意义。
例子：人生四时
再看这个例子，人生四时，四根火柴依次燃烧，慢慢燃尽，这种油尽灯枯的感觉很切合的体现了产品生老病死的主题。
4. 重新审视第一条，看你的动效是否影响性能
所以，合理的动效不应是花拳绣腿，而应该是解决问题的手段。
好，我们再看看哪里需要动效，这里举几个例子：
1. 加载
首先是出现在加载环境，不管是网页还是H5都不可避免的会出现让用户等待的情况，在等待的过程中为了让用户知道他的手机没有死机以及网络是通畅的，我们应该在这个时候加入一些与主题相关的动效来提醒他内容正在加载中。
例子：化身间谍H5 loading
这是一个穿越类的H5，所以设计师在设计loading的时候选用了虫洞的理念，与内容本身紧密贴合。
2. 转场
第二个情景是转场。具有意义的转场会降低产品割裂感，我们看两个例子就明白了。
例子：QQ会员观影特权
这个例子里元素在默认状态下会做上下浮动的效果，当我们滑动时候，元素很自然的做了一个出场入场的效果。很自然，没有割裂感。对吧？
3. 页面元素的互动
也可以为网页元素增加一些必要的动效。
例子：好声音第四季首页：
看下好声音的专题页面，在网页上的能够点击的按钮或者文字链，在鼠标经过时都有点变化，这个十分必要。因为表面上的变化会给用户一种心理暗示，那就是点击后也会有变化。
4. 心理需要
这里所说的心理需求是指气氛和情景的营造，例如节日，游戏活动等产品，是需要一些动效去满足用户心理需求的。大家都知道在微信里输入“生日快乐”是会掉下生日蛋糕的，这个动效就比干巴巴的文字有趣多了。
例子：一封家书
一封家书，注意看，背景有飘落的雪花，漫天大雪勾起思乡情，对吧，合情合理，有情有义！
好，说完哪里动，我们现在看看怎么动。
1. 基于真实形态的模拟
基于真实的动画会叫人看起来自然流畅，符合规律，比如物体运动时的加速度现象。
例子：Look
注意看这个笔画的动势，是有快有慢的，模拟了写字时起笔收笔的那种节奏感，所以看起来是自然真实的。
2. 人物动作夸张化
在H5的设计中，经常会出现各种各样的人物形象，夸张的人物动作会生动你的形象，增加趣味性，给用户以惊喜。
例子：巴菲特这一年
巴菲特老爷爷，动作很亲切。
3. 给元素赋予弹性
有弹性的物体会叫用户觉得具有生命感和真实性，弹的程度取决于你对元素软硬度的设定。
例子：拍个大头鬼
三个小鬼一跳一跳，弹性赋予了他们顽强的生命力。
4. 蒙太奇
这是一种类似蒙太奇的手法，通过快速切换的画面来形成一种奇妙后现代感觉。
例子：传奇硬箱
炫酷了，节奏很快，提气！
好，以上只是一些基本的动效手法，在实际的应用中其实有很多手段，在这里我建议大家可以去看看迪士尼和皮克斯的动画，应为动画本身是一种对于动作行为高度概括的手段。虽然这些都是电影，但是他们使用的手段和遵循的理念是非常值得我们去学习和借鉴的。注意观察这些大牛们的作品，你会发现他们的作品中充满了走心的细节。
简单来说，当用户打开一个界面，注意力首先会被动态的物体吸引，然后才会把注意力转向颜色对比强的部分，最后才是形状。这一过程是人在进化过程中形成的本能反应，基本适用所有用户。同时一个非常重要且容易被忽略的原则：用户的注意力是有限的，而且越来越少。很可能在用户注意到一段动效之后，注意力和耐心已经用尽，无法看到其他内容就着急去下一个界面了。
所以，对于动效这样一个非常强势的工具，一定要用在希望用户注意的部分，并且认真打磨。真正做到“不为动而动”。
文章来源：优设 作者:程远
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
文字和排版可以追溯到五千年前，而图形化界面仅仅只有40年的历史。最关键的转折点出现在1973年的施乐，最早的图形化界面出现在了他们的Alto电脑上，而这个设计就是现如今图形化界面设计的基础。在Alto 的界面诞生后的10年里，几乎是它一家独大，并且它也被大家视作为数字技术的未来。
早期的Alto 在80年代进化为著名的施乐之星，而施乐的这个设计方案也成为了第一个商用的操作系统图形化界面。
不过不论是Alto 还是施乐之星，都没能真正意义上崛起。不过施乐的图形化界面最终深深的影响了苹果和微软的道路，比尔盖茨和乔布斯先后在施乐的研发中心观摩了施乐之星的运作，而乔布斯更是在1984年先人一步发布了著名的Macintosh 系统，也就是后来我们所熟知的Mac OS。
Macintosh 的发布不仅仅意味着相对成熟的GUI的出现，而且它为大众带来了真正意义上的自定义字体的功能。这款系统内置了许多以著名城市命名的字体，也正是在此之后才有越来越多的著名字体的数字版本在数字平台上发布并应用。
仔细观察这些早期的字体，我们能够发现，虽然已经是图形化的界面，但是其中绝大多数的界面元素都还是以纯文本的形式而存在，它们以一种奇妙的方式被整合到一个界面当中。循着界面的发展历程沿路看过来，不难发现，文本和排版几乎是贯穿始终的主线，它是一个不容忽视的核心类别。
界面中的每一个文字、每一个字符都很重要。好的文本是好的设计。文本是最根本的界面，是我们设计师来塑造和打磨这些信息。
看看下面的天气界面的设计，想象一下将所有界面元素都摆在桌上会是什么样的效果：无非就是两张图，几个图标和一大堆文本。
作为设计师，工作并不是将一堆随机的内容和元素排布在屏幕上，让它们看起来够漂亮就行了。真实的情况是，我们要从最核心的内容和文本开始着手，然后从这里着手细化，并完善出其他的部分。这就是我们工作的核心。
文本的清晰度同样扮演着关键性的角色。如果我们的大脑花费一两秒钟单纯只是分辨一个字形，那么清晰度上的微小差异是无伤大雅的。可是当它们组合成为大段的文本，不同的字母组合构成不同的词汇、段落的时候，清晰度的影响就更大了，排版的重要性也显得更加明显了。
当然，影响界面设计的文本属性还有很多，比如平衡性，定位和层次结构，但是好的文案和排版的影响至少占据整体影响的95%。
在伟大的设计师眼里，文本不仅承载内容，而且可以构成界面。
– Oliver Reichenstein
既然屏幕上的文本显示是如此的重要，那么我们应当先了解人们是如何阅读的，而文本显示又是如何影响我们设计决策的。
读过Billy Whited 的文章《Setting Type for User Interface》之后，让我对于文本阅读的效率有了更深的认知。一个少于20个字母的独立单词放在句子中会更快被理解，而单独放置的时候我们需要耗费更长的时间来识别。
其实这个研究结果也表明我们阅读较长句子的时候，并非是逐个单词地阅读，而是跳跃着阅读功能性的词汇，我们将这种阅读方式称为离散跳跃式阅读，俗称扫视。
扫视让我们的阅读能力更强，我们甚至会跳过短的功能性词汇。
我们应当记住这一关键特征，因为我们的界面中所承载的词汇大多是孤立的单词。简单说来，界面是无法利用扫视这种方式来获取信息的。
总的来说，单词在阅读中发挥着无比重要的作用，无论是作为内容还是作为界面元素，均是如此。无疑，选择合适的字体就相当重要了。
过去，人们常常认为眼睛和大脑是通过单词的外轮廓（Bouma Shape）来识别单词，当然，后来的研究证明这个想法是错的，单词的可读性和易读性的影响因素不止是外轮廓，字母本身的形态、细节和清晰度同样深入的影响着它的识别度。
其实这个问题一开始并不是那么好回答。阅读很大程度上依赖于我们的习惯，越常见的内容对我们而言越容易识别。这样一来，我们就不那么容易判断让字母清晰易读的影响因素了。为了了解这一点，我们需要将句子分割为单词，分解单词为字母，在字母中查看细节。
早在2008年，维多利亚大学心理学系根据测试结果得出结论，大写和小写的拉丁文字母是最容易识别的，也最易于阅读。
这项研究有趣的地方在于，它揭示了一个事实：每个字母延伸出来的线性端点是最易于识别的地方，也是每个字母的特点所在。
上面的图片标识出了这些最易于识别的部分。每一款字体在这些部分应当设计为最通用、最为人所熟悉的样式，同样的，它们也应该强调每个字母的差异。
在2010年的时候，另一项由 Sofie Beier 和 Kevin Larson 开启了一个新的研究项目，这项研究专注于测试经常被误读的字母和字符的识别度。
这项研究表明，在相同的字体和相同的尺寸、相同字重的情况下，有些字体或者变体的细节确实比其他的更加清晰、更易于识别。这项研究的结果说明，纤细的字体加粗之后识别度效果会明显会增强，而字母的X高度如果能够占据上伸区或者下探区的空间，识别度会更好。
为了更好的理解字体的清晰度的概念，你可以下载我所开发的这款工具 Legibility APP 来测试不同字体在模糊、炫光等多种不同情况下的清晰度和辨识度。这是一款处于测试阶段的工具，可以在Chrmoe、Opera和Safari 中运行。
理解了用户阅读的方式和字体可读性的影响因素之后，我们应当开始了解UI中的字体的几个关键因素。下面是UI中字体使用的10个关键因素。
可读性是UI中字体所需考虑的首要因素。字母字形必须清晰可辨，作为UI元素，其中不同的字母必须可以被用户轻松辨别出差异。许多经典的字体，甚至包括 Helvetica ，都没办法清晰分辨 字母 i 的大写形态 I，和大写字母 L的小写形态 l，这在界面设计中无疑是有影响的。
上图中，左边的字体为 Source Sans Pro , 右边为 Helvetica，无疑对于 Illiterate 这个词Helvetica 字体下前三个字母完全无法分辨。有部分用户也同意Helvetica 并不适合作为UI界面的显示字体而存在，因为这款字体终究是为平面印刷显示而设计的，并非为屏幕而生。
在iOS 7 时代，苹果短暂地将 Helvetica 作为系统的主要显示字体的时候，曾对特定的用户群体造成过信息识别的困扰。这也最终催生了我们现在所看到的苹果官方字体 San Francisco。旧金山是为UI界面而生的字体，它的x高度比Helvetica 更高，字母间距更宽，字母间的识别度更高。
一款理想的UI界面所用的字体，不应当过于“显眼”，而该是悄无声息，“隐型”的。当用户在试图完成某项任务的时候，字体不应当给用户以“出戏”或者“显眼”的感觉，也就是说，字体不应当超出用户的认知负荷，而内容和信息才应该成为真正的关注点。
给UI界面使用的字体应当具有灵活性。我们曾经为 Medium 做过用户体验设计，作为一个网页博客平台，我们很难去控制用户的能力、内容、浏览器、屏幕尺寸、网络带宽和连接速度，包括输入法。
所以我们最终为它所选取的字体应当支持大量不同的内容，在不同的尺寸下拥有良好的识别度，能够兼容不同的设备，尤其是在小屏幕上。Sans serifs 字体就是专门为小尺寸低分辨率屏幕而定制的。
x高度的参考标准是小写字母x的高度，同等尺寸下，x高度更大的字体更易于识别。不过x高度也不是越大越好，当x高度超过一定限度的时候，小写字母n和小写字母h就很难分辨了，这一点应当注意。
字母的宽度和高度的比例也是相当重要的一个属性。宽度和高度比例越高，字母在小屏幕上的识别度就越高。
字母之间的间距和字母内部的空间同样是影响字母可读的因素。字母间距太小同样会影响整体的可读性，而好的显示字体会更好的控制字母间距，确保单词在视觉上的“透气性”，甚至可以营造出一种韵律感。
不过字间距不是越宽松越好，太过宽松会让整个单词看起来过于松散。有一个值得参考的标准，就是字母之间的间距应当比字母内的开口缝隙略小一点。
许多字体不同的笔画粗细不同，而对于UI界面而言，笔触间的对比度越小识别度越好。较大的笔触对比度下，字体在小尺寸屏幕上，较细的笔画会难于分辨。
OpenType 功能对于字体而言是相当重要的。支持OpenType的字体拥有更大的灵活性，对于不同的语言和特殊的字符有着更为优良的兼容性。
接下来要说的情况可能大家多少都碰到过。网页在完全加载出来之前，部分内容因为字体没有加载而无法显示。
其实这可以通过先加载本地字体，显示内容，等网页字体加载好了之后再行替换，以达到无阻塞显示。这种方法的缺陷是需要预先设定一个可调用的本地备用字体。
Hinting 指的是为了字体为了保证最大的可读性而针对显示器状况进行调整的过程。Hinting 可以通过匹配显示器的像素栅格让字体显示更加清晰，降低误读的可能性。
这项技术最初是由苹果公司所提出的，不过因为TrueType 字体技术的出现，Hinting 正在消失。
随着新的UI标准、排版技术的提升，字体技术也在不断的进步，在不远的未来，字体会从传感器获得信息，更好的兼容不同的环境、随着亮度、设备、距离而进行智能化的调整，甚至复杂而庞大的中文字体，也可能作为灵活的网页字体而存在。
字体会让我们的工作更加便捷
让界面交互更快，更加触手可及
让UI更加易用
更加便捷
也更加清晰而高效
文章来源：优设 作者:陈子木
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
当互联网不断的深入到我们的生活中，我们对安全感的需求也延续到了互联网使用中，特别体现于互联网金融产品。由于其具有风险性、收益性、流动性等特点，用户对于资产安全的掌控感更为关注，产品使用体验欠佳也直接影响客户安全感。
以下将基于自身工作总结和行业经验，聚焦互联网金融产品分享和总结如何向用户营造安全感。
目录：
一、需要什么样的安全感？
二、如何传达出安全感？
三、怎样体现出安全感？
安全感是人类最底层的需求，但不同类用户群体需要的安全感也各有千秋，我们参考第一财经商业数据中心×蚂蚁财富的2019线上理财人群报告，将线上理财的人群分为四类：
分别是初入职场的95后、职场新兴力量的90后、理财中坚力量的80后和经历风雨的70后。其中近一年的新增移动互联网基民中超五层为90后、95后，成为金融移动互联网的中坚力量。
这类型的投资者由于具有碎片化处理事务的习惯和金融知识不足、理财经验不丰富、资金的抗风险能力不高的特点，当市场普遍行情下跌时，更容易产生焦虑的情绪而导致“割韭菜”，进而可能会影响到卸载APP的行为。根据Mob研究院的数据显示，在2021年3月天天基金日均卸载用户规模为前两个月的6倍，而当时对应的市场行情正为基金普遍大跌。
因此从安全感的需求上他们更侧重高效的信息降维、足够的理财产品的风险提示、合理的预期收益宣传以及投后亏损及时的内容陪伴。
而根据腾讯理财通×国家金融与发展实验室出品的2021年互联网理财行为与安全研究报告显示，理财知识更充足，理财经验更丰富的80后、70后在安全感的维护上则更关注理财产品的信息披露风险、信息不透明风险、市场政策风险、个人信息泄露风险此类问题。
安全感是一种感性的心理感受，而人类的情感由本能、行为、反思三个层面共同决定的。
这三个层次作为人类大脑的运作的规律，映射到设计当中，同样是可供遵循、值得探究的。
先于意识和思维，它是外观要素和第一印象形成的基础，着重于产品的外观、触感等。“美观即实用原则”人们会潜意识里认为好看的东西也是好用的，所以在界面设计当中，主要设计对象是视觉设计。
而金融产品中，常用蓝、绿等冷色调的色彩，给人以冷静，稳定的感觉，表现金融产品的科技感和可靠性；常用红、黄、橙等暖色调，代表着热情、温暖与责任。
是人类身体日常行为的运作，行为层的设计与产品使用过程中的愉悦感和效率有关。好的行为层设计对应产品功能传达、易学性与易用性，以及正面的心情感受。在界面设计当中，主要设计对象是交互设计。（将在下文通过投资场景详细分析）
超越了本能层和行为层，存在意识和更高级的感觉、情绪及知觉。对应的是产品的情感温度，主要的设计对象是正向情感的结果反馈以及品牌信任。
良好的企业品牌形象和口碑很大程度上会给用户带来认知上的安全感。用户在初次选择购买金融产品时，往往强大的品牌背书起到了关键作用，即使是同一只基金，用户也会选择在自己信赖的平台里购买。
我们可以通过在页面设计中加入更多的品牌元素，如品牌主题色、LOGO、品牌IP形象、品牌slogan等，来潜移默化地让用户感受企业的价值：
另一种常见于一些平台利用强大的背书以及所获的成就，清晰地向用户展示可以提供的保障权益，责任条款及资质介绍等来传达企业对用户负责的态度，提升用户对产品乃至对企业的信任感：
我们将金融的生命周期分为三个阶段，分别可以概括为：投资前（产品选择）、投资中（产品交易）、投资后（产品管理），不同阶段的关注点不同，而对于安全感需求各不相同：
结合文章一开始对人群的分析，由于投前的行为特点更多聚焦于产品的选择，因此从理财小白的角度对于安全感的缺乏更集中于“买了会不会亏钱？”、“产品买对了吗”、“看不懂规则”、“这个适合我吗”等，尤其存在于一些新形式的理财组合产品和策略智能投产品中。
在这个阶段的安全感维护，除了相关页面的信息降维、必要的投教启蒙以外，还需要考虑用户疑问的快速解答、合理的预期收益宣传等。另外投钱的启蒙教育更可以考虑结合一些运营活动，让小白用户通过更有趣的方法了解产品，了解自己适合的产品。
而对于较有经验的理财“老司机”而言，安全感的缺乏更集中于“过往表现怎么样，如最大回撤率等”、“市场行情、政策是否利好”、“基金经理的资历”等，而更需要考虑信息的多维度展示、信息披露、行情资讯的展示、甚至是产品的对比等来表达产品的未来盈收能力可期。
当投资者已经选择好信任的理财产品时，在产品交易的各个界面也需要关注交易流程中安全感的反馈。
其中包括正向反馈和负向反馈。正向反馈是指用户跟产品发生正确的交互时，系统给予用户的正确引导，可以帮助用户打消顾虑，建立信心，让用户感受到一切都在顺利地进行着，这对那些在设备操作方面缺乏信心的用户来说尤为重要，用户不会对自己的操作或对平台产生质疑，如：专属的密码输入键盘、正向反馈如金额输入时的金额提示、特别提出易误解的交易规则等
而反向反馈是指用户在操作过程中出现或疑似出现误操作时，系统向用户展示提示或二次确认以促进错误的纠正或确保此操作无误。它能确保在第一时间告知用户出现了不正确操作，及时更改，使流程顺利进行，尤其是对于一些理财小白而言，合理的容错设计更促进有效投资，提高未来的盈利体验。如撤销操作二次确认、购买超出风险承受能力的产品、输入错误金额时的反馈。
引起思考：
虽然天天基金的撤单确认展示了退回帐户，但是此弹窗的取消按钮引导性过强，首次操作仅通过银行卡的列表的箭头较难联想到是确认撤单的下一步操作（还以为是可选择退的帐户）。
产品交易成功后，投资者的关注会更集中于自己的资产的变化，产品的未来走势等，因此在安全感的提供上，需要向投资者传达准确的交易状态、资产状态、资产的保护等，甚至可以在产品购买的完成页设置快捷加入自选和涨跌提醒等
引起思考：
在支付宝的基金总金额中，存在交易进行中的提示文案为“买入待确认*元”，但不少小白会产生疑问，当前展示的基金总金额是否包含提示的待确认金额，此时是否可将文案改为“含买入待确认*元”（毕竟也有部分直销app并不会将待确认金额包含进产品的总金额中）
另一方面的更需要考虑当基金产品存在亏损时，及时向投资者传达情感陪伴和合理的投资交易，以促进投资者优化持仓或保持中长期持有，避免频繁的短期交易而导致不良的盈利体验。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
为大家概括性地介绍5种流行移动应用中常见的界面设计模式以供大家在自己的项目中参考。这些设计模式有助于大家提高设计的可用性，让界面变得更加直观。文章将侧重介绍能够帮助大家进行下列各方面设计的模式：
在这个社交网络盛行的时代，我们是不是真的还需要用这种陈旧的方式提交个人资料？社交登陆这一设计模式完全可以让用户轻松快捷的登陆，从而取代注册、填写表单之类的麻烦工作。
用户可以直接登陆自己的社交网络账号（Facebook、Twitter或者Google等），无需另外创建一个以后不太可能继续使用的账户，这样可以大大提高注册效率。除此之外，这一设计模式还有下列好处：
注：在国内这一设计演变成了：您可以使用QQ/微博合作帐号登录，然后给你绑定，继续回到注册界面 – –
通知功能可突出显示近期的活动和操作。我们每天要接触大量的信息，但百忙之中却没有时间（或者不愿意把时间）花费在手机上。我们都喜欢在尽可能短的时间内完成要做的事，然后马上知道是否有新的活动或者情况能够引起自己的关注。因此，对于通知设计模式的透彻理解和妥当实施非常重要。
很多知名公司的移动应用采用了下列几种不同的方法实施其通知设计：
你可以模仿一下你最喜欢的解决办法，试试这个办法是否适合于你和你的用户。
通知栏该怎么设计，具体方法右戳学习：《怕打扰用户？来看看怎样设计通知栏不会讨人厌》
弹窗（也叫层叠窗口）是一种常用于互联网广告的方法。弹窗会在不创建新窗口的情况下遮盖住主要内容，无法使用拦阻软件进行拦截，因此用户非看不可。一般来说这种情况很让用户讨厌，但在有些情况下，弹窗打断用户的使用反而能给用户带来帮助。例如，用户可能会希望在不丢失当前用户界面的情况下查看某些信息。
下面是一些弹窗设计模式帮助解决问题的案例：
在习惯了使用Facebook、Twitter或Google等社交网站后，我们都会很自然的使用下拉手势进行内容更新。第一个使用这个设计模式的公司是Apple，在此之后这一设计就广为流行开来了。
当用户需要显示一列非静态，但不能自动刷新的内容时，就可以适用下拉刷新模式。下拉刷新时，屏幕会滚动到顶部，刷新完成后新内容将从顶部开始显示。这种设计模式可以节约空间（不需要使用按钮）而且简单易懂。这种方式还不仅局限于更新内容，其还可以用于在一系列短信、图片或资料更新中加载早先的内容。
除了下拉刷新手势外，滑动也是智能手机上最为常用的手势之一。很多应用都允许用户在文章上左右滑动来了解详细信息或执行其他操作。与依赖于点击鼠标的传统web应用相比，这一方法充满创新意义。
在Android和iOS上有大量采用了滑动、点击及其他特定用户交互方式的移动应用，你可以在自己的项目过程中予以参考。每个应用对于自己的用户来说都有不同的意义和价值。你应当在画线框图的过程中做好规划再投入设计或开发流程。在测试过程中花点时间思考用户的反馈、建议和批评。
文章来源：优设 作者:程远
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
iPhone X 在 2017 年上市以来，全面屏手机就开始逐渐普及。iPhone 8 的 4.7 寸屏幕到目前最新机型 iPhone 11 的 6.1 寸屏幕，以及 Pro Max 系列的 6.5 寸，各种各样的刘海屏、水滴屏、挖孔屏、折叠屏等等屏幕方式随之出现，物理 Home 键都被舍弃改成虚拟按键，甚至是没有虚拟按键的手势滑动操作。
而这些手机都有一个共同的特点，就是屏幕尺寸越来越大。屏幕尺寸变大后，手握手机的方式和界面交互操作方式也随之改变，那对于设计而言，是否也应该随之进行改变呢？
想单手点击屏幕的操作，需要手足够灵活进行一轮操作才能够到屏幕上方，过程中稍有不慎，手机随时会砸地上。作者的手机屏幕已经修了几次，差不多赶上一台二手机的价格了。
在 2013 年，国外设计师 Steven Hoober 发表了一篇《手机界面设计》的研究报告中，对一千三百名手机使用者进行量化研究数据：
据当时研究的数据可以看出，有近半的用户是单手使用手机（现在肯定不止）。当用户单手操作的时候，实际拇指可以触摸到的区域是如下图这样的。绿色区域是拇指的正常操作区域，黄色区域是拇指能触碰到的最大限度范围，红色区域是触摸比较困难的区域。
然而这份研究报告的数据是在 2013 年发布，当时还没有全面屏的出现，如果把上面研究结论的区域，套用到如今的手机屏幕尺寸上，顶部的红色区域会占更大比例。以 iPhone 11 尺寸比例作为参考，如下图：
拇指可操作范围大约在 3 分之 2 的区域，可见想要触碰到红色区域是有一定难度的。也正是因为这份报告只适合当时的手机市场情况，在当今已经不适用了，因此需要重新去考虑如何为大屏幕手机进行界面设计。
根据 2020 年手机UX设计趋势，大屏幕设计将会成为热点。根据数据报告中有说明，2018 年 10 月使用大屏手机的用户比例是16.3%，到 2019 年 12 月，该数据已经上升到 41%，并且会在未来更多新机型的出现中持续上涨。
那随着大屏幕手机的普及，就意味着设计师在设计界面的时候，要为大屏幕手机的使用场景进行界面调整，避免用户难以使用的体验问题。以下是我整理的一些设计建议方案：
1. 头部区域设计更高
通过将标题栏的信息区域放大，尽量把主要操作内容向拇指区域靠近。
2. 常用导航与操作居于底部
比起导航栏放在顶部，更适合大屏幕手机的方式是将导航和重要操作尽量往屏幕底部放置。
3. 手势操作页面切换与返回
抖音和 Instagram story 等短视频应用界面都是通过手势滑动屏幕的方式，对页面进行切换，操作的学习成本很低，而且主要操作也在屏幕底部。这种操作方式也会在今年越来越多地被使用。
4. 提示弹窗从底部升起
常用的弹窗，很多是设计在屏幕中间弹出，为了适配大屏幕，不妨尝试从底部弹出，关键选项都能轻松选择，提高转化率。
5. 使用大卡片
屏幕尺寸变大以后，使用整张大卡片可以让用户浏览内容更专注，大面积的配图和留白，也能提高用户的点击欲望。
除此以外，作为手机厂商，在发布大屏幕手机的时候，就有对界面操作做了一些对应系统级的设计调整，比如界面下拉悬停，键盘单手模式，屏幕边缘滑动返回等等。
大屏幕尺寸已经是趋势，屏幕大意味着内容可以更大限度地得到展示，有利于产品提供更多的服务，不再纠结首屏无法展示完主要内容。在这个信息爆炸的时代，用户也不再满足于小屏幕的浏览方式。可以说，大屏幕已经是无法改变的趋势。与其担心问题到来，设计师更应该思考如何去适应产品的快速迭代，不断更新自己的设计思维模型，更全面思考问题，产出更合理、体验更好的设计方案。
文章来源：优设 作者:布莱恩臣
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com