首页

数字金融产品的安全感设计探究

鹤鹤

当互联网不断的深入到我们的生活中,我们对安全感的需求也延续到了互联网使用中,特别体现于互联网金融产品。由于其具有风险性、收益性、流动性等特点,用户对于资产安全的掌控感更为关注,产品使用体验欠佳也直接影响客户安全感。


以下将基于自身工作总结和行业经验,聚焦互联网金融产品分享和总结如何向用户营造安全感。


目录:

一、需要什么样的安全感?

二、如何传达出安全感?

三、怎样体现出安全感?




需要什么样的安全感?


安全感是人类最底层的需求,但不同类用户群体需要的安全感也各有千秋,我们参考第一财经商业数据中心×蚂蚁财富的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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


复杂UI界面的8个核心设计法则

纯纯

复杂应用大多情况下是偏专业和B端的一些UI界面,它们大多出现在桌面端使用环境,并且终端用户类型多样,涉及流程、链条、业务也大多呈现出多变复杂的特征。这篇文章,来自UX设计领域的顶级存在NNGroup,作者为凯特·卡普兰。

到底什么是复杂应用?

我们之前将「复杂应用」界定为特定专业领域当中,需要经过广泛培训之后使用的,有着非结构化目标、非线性工作流程的任何应用程序。这个概念可能听起来有点抽象,不过这么说你可能会 更容易理解:从科学研究到专业人员,诸如金融分析师,它们常用的那些专业软件应用。这类应用通常有着这些特点:

  • 为有专业知识和训练有素的用户提供支持
  • 帮助用户浏览、管理大型数据库,并提供高级的数据分析和处理的功能
  • 通过可变和多样的基础任务功能来解决问题或者达成目标
  • 需要在多个角色、工具、平台之间进行协作或者切换
  • 可以用来减轻高影响力/高价值任务的风险,降低损失

尽管不同的复杂应用之间差异很大,但是他们的共同点是,专业的从业人员对于这类工具有着极强的依赖性。

考虑到设计师和开发者在面对这类工具的时候的挑战,我梳理总结了 8 个复杂应用的设计原则和指南。

1、采用边做边学的用户流程

很多研究表明,对于复杂的应用和工具,用户更加青睐可以立刻上手开始使用而不受它复杂度影响的那类工具。

与大量的教程、文档、帮助和设置说明相比,能够立刻开始的任务和项目,对于用户有着莫大的吸引力。这种现象被称为「活跃用户悖论」。

虽然在专业领域当中,倚靠摸索和试错学习是不恰当也不安全的,但是一定程度的边做边学是必须的,因为不可能在培训和手册当中涵盖所有的使用场景。

所以,在设计的时候应该提供「跳过教程」的直接上手的偏好设置,同时进行相应的安全性设置,避免新手的莽撞操作导致损失。比如可以限制这个阶段的用户执行长流程多任务的操作,让控制面板实时显示操作结果或者预览结果,这样用户无需执行全部操作就可以知道大概的结果。

顶级团队出品:复杂UI界面的8个核心设计法则

在 Salesforce 控制面板当中,就可以实时预览面板编辑的效果。

2、为用户提供有效的方法和建议

绝大多数用户都不是进阶的专家级用户,他们在绝大多数时候会使用基础但是效率没那么高的操作和执行方案。很多用户形成习惯之后,通常不会主动做出改变,而这在日积月累之后导致大量的时间浪费,效率低下。

值得一提的是,这个时候依赖冗长的文档和教程其实很难达成效果,更合理的方式是结合用户所处的上下文环境,通过界面工具提示的方式,适时地告知用户「有更高效方便的方法」。

通常,可以使用悬停提示,或者是弹出式工具提示来实现这一功能。

顶级团队出品:复杂UI界面的8个核心设计法则

ArcMap 是一款地理信息系统类工具,它通常会通过上下文环境下的信息引导,来帮助用户了解技巧。

3、提供灵活而流畅的功能路径

复杂的应用程序,通常会有很多功能是分散的而非线性的,不同的功能组合起来可以实现特定的功能。在这类工具当中,用户日常可能也不是很确切知道最终的目标是什么,而需要通过数据分析来逐步推进,同时,在知道确切目标的情况下,也应该可以遵循不同的路径灵活地达成目标。

设计师这些应用的时候,设计师应该避免使用固定、唯一、 僵化的实现路径,迫使用户必循严格按照某一固定路径来做事情。一方面,允许用户跳过某个步骤,或者回滚到更早的路径,另一方面,允许用户遵循不同的方式和路径来达成目标。

顶级团队出品:复杂UI界面的8个核心设计法则

比如万事达卡的自助服务就可以通过交互式的图表来引导用户完成不同的任务。

4、 帮助用户跟踪行为和思考过程

复杂的任务,通常意味着它需要很多步骤,不同的环节,而在实际的应用场景中,某个分析步骤耗费几个小时甚至几天,都是有可能的。在高度复杂的现实生活中,某个步骤可能会换人接手,可能会因为硬件、 网络等问题而暂停甚至丢失,这也意味着「可追溯性」是很重要的。

所以,在这样的复杂应用当中,应该允许用户在使用过程中,可以便捷清晰地记录、保存、 导出内容和记录,允许用户中断,中断后可以恢复特定的任务。在任务进行过程中可以进行注释、保存相关的说明。

顶级团队出品:复杂UI界面的8个核心设计法则

在决策建模软件TreeAge 当中,用户可以在分析和建模过程中进行开放式的注释,可以后续在底部快速访问这些笔记。

5、可以协调多工具并且在工作空间之间转换

复杂的应用通常还会面临一个状况,就是工具本身的不足,用户需要在多个工作空间上使用工具和内容的时候,它需要具备切换的功能。对于不具备的功能,应用程序应该允许使用第三方的应用来作为补充。

比如当软件不支持某个操作的时候,应该允许用户从线上的其他数据库中获取并导出数据来使用,可以依托外部文档作为支持,允许用户在应用中做注释和评论。

减轻工作负担的一个要点,是尽量使用通用的API、接口和标准,尽量兼容行业标准软件,比如 Excel、Powerpoint ,尽量使用标准格式,等等。

顶级团队出品:复杂UI界面的8个核心设计法则

微软的商业分析软件 PowerBI 就提供了标准化的导出和复制功能,非常方便

6、减少混乱而不影响功能

复杂应用通常旨在保持泛用性。使用场景多样,多种不同的功能,一家汽车生产厂家,可能会和蜜蜂养殖机构采用同样的工具和软件来监测机器故障。但是,这种泛用性的另外一面,就是混乱性。复杂的应用可能会同时兼顾到基础型的小白用户和进阶型的专家用户,而后者用到的功能很小概率会被基础用户用到。

所以,设计者需要在不降低功能性的情况下,基于应用场景、 用户需求来进行简化和优化,在保持功能完整易用的前提之下,降低复杂度和混乱度。

分阶段和层级展现就是一种降低混乱度但是不影响功能性的一种常见策略。当用户进行到特定任务、特定阶段、特等级别之后,再呈现特定功能,是有效的设计方法。

顶级团队出品:复杂UI界面的8个核心设计法则

7、主次信息之间要能平稳过渡

即使降低了混乱度,在复杂应用当中,信息量可能依然是过载的。通常,对于这种情况可以通过区分信息层级的主次来进行快速的区分,不过,从交互上来说,这可能依然不够。

对于诸如控制面板一样的界面,用户可能需要时刻查看面板上的信息,需要了解次级信息但是又不能离开界面,这就体现出主次信息之间的过渡呈现的重要性了。

一般而言,使用类似与悬停显示的方式,能够比较柔和地将次级信息呈现出来,允许用户查看详细的定量数据。下面这个案例当中就是,悬停显示更多次级信息。

顶级团队出品:复杂UI界面的8个核心设计法则

8、在视觉上突出关键信息

复杂应用通常在界面上包含由大量的信息,而这个时候关键性的数据如果不在视觉上做突出显示,会被用户错过。通过视觉区分、提示警报的方式,让用户及时注意到,才有可能规避可能存在的问题。

值得注意的是,让关键信息和元素凸显的方式,并不一定非得是使用鲜艳的色彩和较粗的字体,简单的放大呈现,使用图形化的元素辅助提示,或者是提供足够的留白都可以达到目的,就像下面的案例一样:

顶级团队出品:复杂UI界面的8个核心设计法则

结论

复杂的应用多种多样,支持的服务和功能也千差万别,但是无论如何呈现,此类复杂应用的设计都是非常挑战设计师的设计功底的,需要设计师了解业务,了解用户,并且能够通过设计更好地提供服务。

文章来源:优设(陈子木)   作者:Kate Kaplan

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


科学的 UI 配色方法

涛涛

各行各业的设计师每天都在和颜色打交道,UI 设计师设计用户界面也不例外。

用户界面是一个设计师用理性思维解决用户感性需求的窗口。如果对色彩的运用不加以克制,界面可能会显得花哨而没有主次;但过于拘谨又容易使界面保守,难以激发用户情绪。所以如何让色彩的搭配平衡,是 UI 设计师需要修炼的一课。

但色彩毕竟是感性的元素,我们总是仰慕一些对色彩天赋异禀的设计师,总能不拘绳墨给作品带来惊艳的视觉效果。我们难以偷习他们的天赋,但或许你有没有想过,干脆我们另辟蹊径,用理性推导来制定一套色彩系统?

那么今天我用我的项目示例,教给大家一个科学推导颜色搭配的方法。也许能够带你发现一些色彩背后的数学秘密。

区分颜色模式

在此之前我们需要先熟悉一下颜色模式。

在 PS 菜单栏的「图像-模式」下可以看到非常多的颜色模式:RGB、CMYK、Lab 等等。那是因为 PS 是一个需要满足设计行业水平领域的软件,要解决各类设计师需求,所以涵盖的颜色模式非常丰富。

但 UI 大多数时候需要关注的是线上场景,成果的展示渠道一般是自发光设备。所以弄明白垂直领域软件 Sketch 中的几种颜色模式,其实就足够了,分别是 RGB、HSB 和 HSL。

RGB 是指通过 R(Red:红)、G(Green:绿)、B(Blue:蓝)三个颜色通道的变化以及它们相互之间的叠加得到各式各样的颜色。三个通道分别有「0-255」这 256 个值,这些值分别代表着各通道的亮度层级。

虽然 RGB 在机器表现上很友好,但并不够人性化。因为人们判断颜色,往往是通过「这是什么颜色?是不是太鲜艳了?亮了还是暗了?」这样的感官维度,而很难通过红绿蓝的亮度层级去判断。所以人们后来基于 RGB 衍生出了 HSB 模式和 HSL 模式。

HSB 是指通过 H(Hue:色相)、S(Saturation:饱和度)、B(Brightness:明度)来控制颜色。Hue(色相)的取值范围是色环上 0-360° 的圆心角度;而 Saturation(饱和度)与 Brightness(明度)是在 0-100% 的量占比。

HSL 中的 H、S 与 HSB 相同,都是指 Hue(色相)、Saturation(饱和度)。但 L 所指的则是 Lightness(亮度)。

HSL 和 HSB 稍微有一些不同,我们在两个颜色模式下输入相同的数值,会发现颜色实际是不一样的。虽然 H、S 指代的都是色相和饱和度,但 L(Lightness:亮度)与 B(Brightness:明度)分别被认为是「颜色中白色的量」和「颜色中光线的量」。

Lightness 和 Brightness 的概念要深度研究下去的话其实是计算机算法领域的问题了,感兴趣的朋友可以查阅更多资料,但我个人认为对于 UI 来说没有太大必要。

关于 HSB、HSL 的使用场景,记住以下两点即可:

  • 前端 CSS 代码里支持的是 HSL,而不是 HSB。如果和前端对接时,UI 给到的是 HSB 的色值,那么最终落地的颜色效果会与设计稿有出入。
  • 我们接下来讲到的配色推导,是基于 HSB 颜色模式的,因为它更容易理解,数值变化在色系坐标中的产生的结果更加直观。

配色推导

支付宝 Alipay Design 团队提出过一个配色原则:

以同色系配色为主导,多色搭配为辅。

同色系为统一的色相,使用中可以加深品牌色的感知,可以让界面更有层次,同时可以让界面保持色彩上的一致性;由于业务的多样化,我们需要多色搭配为辅;多色的辅助颜色,也可称之为功能色,可设定不同的任务属性和情感表达;再搭配中性色黑白灰,赋予更多的变化和层次。两种配色通过主次、使用比例,可灵活运用在业务的各个场景中,具有非常好的延展性。

那么知道了这个原则,我们又该如何科学、合理地得出产品的色彩系统呢?接下来我就用我的一个项目示例给大家做讲解。

步骤一:找到符合产品调性的品牌色

我负责的该项目主要业务与高校支付、缴费相关,所以希望整个产品视觉风格首先要给用户带来安全感。又因为主要用户群体是高校师生居多,新潮、年轻化是主要用户的一大标签,所以我们选择了用饱和度较高的蓝色来作为品牌色。

最终选择品牌色的 Hex 值为 #1585FF ,HSB = (211,92,100)。

步骤二:提取24色

选定了品牌色之后,以品牌色的 H(色相)为基础,不断地递增、递减 15,在 0-360 之间可以得出 24 个颜色,也就是将 360° 色环分割为 24 份,可以得到 24 色。

为什么要提取 24 色,并且以 15 为公差呢?

我们知道,想得到邻近色、类似色、互补色这一系列的颜色,我们就会使用到色环。

  • 邻近色:色相差值 15° 以内的颜色为邻近色;
  • 类似色:色相差值 30° 以内的颜色为类似色;
  • 互补色:色相差值 180° 的颜色为互补色。

而 24 色色板是帮助我们提取辅助色的便捷工具。

步骤三:找到同色系配色

同色系是指与品牌色 H(色相)一致,通过改变 S(饱和度)与 B(明度)变化产生的色组。同色系色组的推导需要借助拾色板坐标。

我们建立一个基于 S(饱和度)与 B(明度)的平面坐标系,设定当前品牌色为色值为(S₀,B₀),连接品牌色色值点与右上纯白点(0,100)、右下纯黑点(100,0),得到两条线段。

我们各在两条线段上均分取得 5 个点坐标(包含首位两点)。这样两条线段一共就会产生 11 个(S,B)坐标值,对应着 11 个同色系色组。

经过上图的计算,我们可以得到基于品牌色的同色系色阶。

步骤四:多色搭配

用于搭配的辅助色应满足以下两个条件:

  • 和品牌色有明显区分:尽量避免所选辅助色感官上给用户视觉区别与品牌色差距不大,传递的调性太过一致;
  • 不能过于突兀:根据色彩原理来说,互补色是最能与品牌色本色产生视觉感官对比的颜色,但可能会有些突兀。为了让颜色的辅助起到丰富画面的作用,而不是反而让整个版面显得不和谐,所以我们选择互补色的邻近色作为辅助色,而不要直接使用互补色。

于是根据以上条件,基于品牌色可衍生出 3 个辅助色:一个与品牌色传递调性有明显区分的类似色;两个互补色的邻近色。

步骤五:感官明度校准

经过计算后,我们已经得出了品牌色和三个辅助色。

可以看出,虽然我们提取出的辅助色明度色值都一致,但因为颜色本身自带的感官明度属性有所区别。为了让辅助色和品牌色的感官明度尽量一致,我们要对第一次提取出的辅助色进行感官明度校准。

校准方式是:依次在辅助色上叠加一层纯黑图层,将该纯黑图层颜色模式调整为 Hue(色相),就可以通过无彩色系下的明度色值,进行对比。

这样我们终于得到以品牌色为基准的 3 个辅助色了。

步骤六:全色系输出

将得到的辅助色依次进行步骤三的计算,可以得到辅助色的同色系色阶。

但因为明度过低时,颜色已经非常接近于黑色,色相在肉眼上几乎已经趋于一致。所以删除最左边的三种同色系颜色。最后得到基于品牌色推导出的全色系色阶色板。

总结

完成了以上的工作,当然还不算结束。一套标准的色彩系统还会包含中性色规范、颜色的使用规范等等。但相信解决了大部分的需求,剩下的工作也难不倒大家了。毕竟以上的方式只是给大家提供了一个理性科学的方法,色彩的使用最终还是要融合设计师个人的共情能力。

比如许多产品有了一套自己的色彩方案后,设计师还会根据具体的业务场景去赋予 icon、卡片背景等元素不一样的色彩方案。

希望这个方法能够带你发现一些色彩背后的数学秘密。

文章来源:优设    作者:UCD耍家

这不是EDM,这只是邮件回执。

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 回执单的界面设计;

 微信图片_20190228174510.gif微信图片_20190228174528.gif微信图片_20190228174537.jpg微信图片_20190228174540.jpg微信图片_20190228174544.jpg微信图片_20190228174548.jpg微信图片_20190228174551.jpg微信图片_20190228174554.jpg微信图片_20190228174557.jpg微信图片_20190228174600.jpg微信图片_20190228174607.jpg微信图片_20190228174613.jpg微信图片_20190228174617.jpg微信图片_20190228174620.jpg微信图片_20190228174623.jpg微信图片_20190228174626.jpg微信图片_20190228174629.jpg微信图片_20190228174632.jpg微信图片_20190228174635.jpg微信图片_20190228174637.jpg

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

你知道设计风格里的“等距风格”是啥怎么画不?

博博

你知道设计风格里的“等距风格”是啥怎么画不?

UI巴巴 2018-08-16 20:26:18

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

1.等距是什么?

等距视图是指,绘制物体时每一边的长度都按绘图比例缩放,而物体上所有平行线在绘制时仍保持平行的一种显示方法。

最早是出现在电脑应用程式的图像,以及早期的8位元电子游戏,近几年来的被广泛的使用在因特网、GUI(Graphic User Interface)以及行动游戏等等。

2.等距视图游戏的历史

虽然计算机游戏的历史一直在20世纪70年代初期就看到了一些真正的3D游戏,但是第一个使用上述意义上的等距投影的不同视觉风格的视频游戏是20世纪80年代初的街机游戏。

1)20世纪80年代 

你知道设计风格里的“等距风格”是啥怎么画不?

高速公路遇袭(1985年)

等距视图是一种把2D游戏伪装为3D游戏的显示方法。使用这种方法的游戏有时候会被称作伪3D或2.5D

你知道设计风格里的“等距风格”是啥怎么画不?

蝙蝠侠(1986年)

执行等距视图的方法有很多,但为了简化,最有效最常用的一种——贴图法。从上面两张图可以看出,其上覆盖的菱形网格把地形划分贴图。

2)20世纪90年代 

你知道设计风格里的“等距风格”是啥怎么画不?

最终幻想III(1997)

你知道设计风格里的“等距风格”是啥怎么画不?

文明六世(2016)

在贴图法中,各个视觉元素都被切分为更小的部件,称为“贴图”,都是标准尺寸的。根据预先确定的平面数据——通常是2D数组,这些贴图被组织成游戏世界。

3)目前,2000

你知道设计风格里的“等距风格”是啥怎么画不?

SOCIOBALL(2015)

你知道设计风格里的“等距风格”是啥怎么画不?

纪念碑谷 (2016)

3.等距风格的图标、插画及应用范围

这种插画有一个专门的名字叫“isometric”。

应用范围很广,比如:icon、界面、启动页、插画、游戏、动画视频等等。

你知道设计风格里的“等距风格”是啥怎么画不?

图标

你知道设计风格里的“等距风格”是啥怎么画不?

字体

你知道设计风格里的“等距风格”是啥怎么画不?

插画

你知道设计风格里的“等距风格”是啥怎么画不?

海报

你知道设计风格里的“等距风格”是啥怎么画不?

启动页

4.常用绘制软件

目前常用的软件有PS、AI、C4D。

5.干货来啦~

虽然PS/AI都能画出等距图标,但是现在有一个软件Affinity Designer 比它们画等距图更加轻松。

你知道设计风格里的“等距风格”是啥怎么画不?

首先画等距我们需要画参考线,PS/AI都能画出来,但是方法还是稍稍显得复杂了一点,一些基本功不到位的同学会很头疼这个参考线的画法。Affinity Designer 的网格和轴管理器十分人性化的解决了这个问题。

不但对于新手来说是个不错的选择,而且它完美的融合了Adobe和sketch两个原本不相融的软件。

你知道设计风格里的“等距风格”是啥怎么画不?
你知道设计风格里的“等距风格”是啥怎么画不?
你知道设计风格里的“等距风格”是啥怎么画不?

网格类型选择等轴测,这样网格就会自动生成等距所需要的斜线。

并且它的网格还可以设置吸附功能,也就是画的每个元素都可以自动吸附在网格边缘。

你知道设计风格里的“等距风格”是啥怎么画不?
你知道设计风格里的“等距风格”是啥怎么画不?

另外它还有一个十分便捷的功能,它的图形变形功能也十分强大。鼠标移动到矩形中间节点的会出现上下重叠的箭头(→),如下图:

你知道设计风格里的“等距风格”是啥怎么画不?

这样可以十分轻松的倾斜矩形到任意角度,并且还自动吸附到网格上了。

你知道设计风格里的“等距风格”是啥怎么画不?

拖拽矩形长宽的时候也是根据网格的路径来,不会影响矩形倾斜的角度。

你知道设计风格里的“等距风格”是啥怎么画不?

轻轻松松画一个小icon。

Affinity Designer这个软件目前只适用于苹果操作系统,在App Store商店里有售卖。

案例鉴赏:

你知道设计风格里的“等距风格”是啥怎么画不?
你知道设计风格里的“等距风格”是啥怎么画不?

↑软件:C4D、3D-MAX、MAYA等大部分3D软件

你知道设计风格里的“等距风格”是啥怎么画不?
你知道设计风格里的“等距风格”是啥怎么画不?
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


浅谈地铁列车室内lcd显示屏的基本设计原理

蓝蓝设计的小编

蓝蓝设计,2013年为加拿大庞巴迪(Bombardier)设计列车监控系统界面设计。 2015-至今,为中车集团旗下若干公司提供HMI列车监控系统界面设计,综合考虑中车特点、城轨车、动车组的不同需求以及HMI硬键屏和触摸 屏的不同操作方式,重构框架设计、交互设计、设计通用的、具有显著特色的、美观友好的HMI界面,并分别使用 fltk 、Codesys、Qt 三种开发语言搭建技术框架、留出接口,实现图形界面。

在这个过程中,我们不断的在学习和理解,以求更好的设计及开发实现。

以下为转载的资料文章:

室内lcd显示屏在地铁中作为一种面向公众的信息显示终端,有着非常广泛的民用和商用价值。

目前在国内运行的地铁车辆普遍都配备了室内lcd显示屏,但附加功能较少,屏幕显示内容单一。为了配合新型地铁旅客信息系统的使用,我们设计了一种全新的多总线式LCD显示动态屏。

创新UI交互页面 山水X6土豪金效果图赏

蓝蓝设计的小编

山水X6八核版投影机内置了安卓4.2智能系统,独家专属的UI界面设计,全新感官体验,操作更加人性化,所有操作通过遥控器都可完成。在安卓智能系统平台上可进行应用软件的下载,更加智能化。

千元4G也有好体验 酷派8705 UI界面赏析

蓝蓝设计的小编

千元机和4G网络是目前智能手机领域中的两个热门关键词。千元机拥有着亲民般的售价,支持4G网络的手机更是成为流行。国产手机品牌酷派则将这两个热门关键词合二为一,发布了一款售价仅为799元的移动4G手机—酷派8705。虽然售价仅为799元,但是该机在操作体验上仍有不错表现。接下来我们就一同看看这款酷派8705 UI界面赏析。


天气遇上情感化设计—–折纸天气的诞生

蓝蓝设计的小编

715-198(1)
“hi,小米,明天一起去园博会哇?”
场景1:“好阿,等等…我查下天气。… 见鬼!明天下雨,只能改天了。”
“….(好失落)”
场景2:“好阿,等等…我查下天气。… 太好了!明天阳光灿烂,走着!”
“走着!!”
不要误会,这里不是社交平台,也不是约会场合,以上两种不同场景所带来的不同心情,在你查看天气情况时是否也遇到过?为什么越来越多的产品都融入了情感化的设计,其实产品的使用者,也就是我们都是情感化的动物(高级动物),在使用任何产品时我们都会有相应的心理诉求,如果你没发现的话,那只是你还不善于观察自己。

趣味创意大比拼

蓝蓝设计的小编

趣味创意大比拼

我们做的每个项目都有各自独特的游戏风格和设计要求,但是所做的每一个设计都希望他们能给人留下深刻的印象。令用户难忘的体验之一是要让设计有趣。在这次分享中,我们将探讨如何利用“有趣”的创意帮助我们的设计更吸引人,成为更优秀的网站。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档