打开一家券商的手机APP时,你是否认为这只是最寻常的交易工具,你是否只关注最常用的几个功能,你是否从未注意过,在你眼前的这个界面上小到每一个图标的设计都隐藏着更丰富的内涵?你又是否注意过其实APP的UI设计(即User Interface,用户界面)的简称,也在不经意吸引你。
在传统证券业务同质化的形势下,越来越多的券商开始重视用户体验,建立自己的产品设计语言。从主色调的选择,到如何布局功能入口,再到更精细化、个性化的金融操作界面设计等等,都是各家券商为提升用户体验的良苦用心。
券商中国搜集了三十多家券商UI(用户界面)设计理念,快来看看你用的APP背后都藏了哪些小心思。
华泰证券:涨乐财富通APP
涨乐财富通APP的UI设计及每次迭代优化均基于线上NPS(用户体验评价系统)及满意度调研+线下分支机构的用户深度访谈,定性定量相结合,对用户需求痛点进行挖掘,同时结合对现有页面埋点数据的分析,对UI进行迭代优化,使其更贴合用户的使用习惯,缩减操作时间及步骤,极大方便用户的交易及投资理财需求。
同时,根据用户的个人画像进行标签化管理,运用人工智能及大数据实现UI的“千人千面”。此外,涨乐财富通还构建起了一套用户接触机制与体验式设计,能较好分析影响用户感知的关键点,为版本规划及UI创新优化提供了机制保障。
国泰君安:君弘APP
君弘APP提出了“温度·品质”这一核心设计理念,并在个性化和场景化方面有诸多体现。
君弘APP有2500万注册用户,这些用户在投资经验、资产量级、理财偏好等方面存在很大差异,为了满足不同用户群体的使用需求,我们从个性化角度出发,通过数据分析,为不同类型的用户提供针对性的信息和服务,力求做到千人千面。
同时,我们从场景化入手,仔细分析了投资前中后、以及交易时间等多种状态,总结了一系列典型场景,并针对各个场景做出信息架构、界面内容的调整,以此为用户提供当下最有价值的信息和服务,让用户在任何时候都能得到帮助。
海通证券:e海通财APP
首页始终贯彻“以客户为中心”的设计理念。APP首屏内容经历多次优化,最终定为两个要点,一是核心业务的展现,包括:产品商城、资讯等,二是围绕投资为中心的各种智能应用工具,e海通财从行情、资讯、账户等六大维度升级工具与服务,帮助客户更快更精准地做出投资决策。
APP首页头部设置了各项功能的快捷进入按钮,页面上方的banner区域,属于点击量比较高的位置,通常用来推荐重大活动、重大资讯要闻,新功能上线通知以及互动话题等。在页面的底部设计了活动、学堂、吐槽三个入口,活动是为了加强与用户的互动,吐槽是为了收益反馈意见,提高产品用户体验,学堂是投资者教育,包括投资相关的知识和APP中的功能使用教程等。
中泰证券:齐富通APP
齐富通APP首页的设计思路,旨在帮助用户更快捷、更直接地找到特色功能和服务。
一方面,将深藏在APP二级甚至三级界面中的功能以显著的方式展现于首页,例如智能投顾服务、增值行情产品。另一方面,直接展示内容主体,例如牛人的观点、直播、投资组合收益情况,比起相对晦涩难懂的功能入口,可以更好地提升首页信息对用户的吸引力。
此外,我们希望能够在醒目的位置将好的活动、好的内容、好的产品推荐给用户,结合齐富通智能画像系统,实现个性化精准营销和服务——将合适的产品和服务推荐给适合的人。
平安证券:平安证券APP
平安证券APP 对首页信息进行梳理,将较少人关注、运营情况较差的冗余信息和模块重新调整,为用户提供清晰明显的业务入口。关注用户需要的功能,并对业务模块都做了可配置的处理,根据用户的需求和习惯来调整业务布局。
视觉方面遵循了传统证券行业的红色,在形式上采用了近两年非常流行的渐变色,使整个App更加年轻有活力。Icon和页面视觉样式简化统一。此外,首页新增节日营销版,增强营销氛围,满足运营的营销要求。
中信建投:中信建投证券APP
中信建投证券app首页具有创新视角和极简扁平化风格的设计,以橘红色为主色调,蓝色、黄色、红色为辅助色,热闹但简洁,给予用户大量精致靓丽的icon设计,界面保持简洁、创新、火力、高端、专业的视觉效果,巧妙运用元素的布局、图标的设计、动画元素的点缀、颜色的搭配,给用户整齐划一的美感,大大提升用户体验舒适感。
申万宏源:申万宏源大赢家APP
申万宏源通过对目标人群的了解及自身业务的积累,产品目标人群定位于为成熟投资者提供“互联网财富管理”服务为主要调性。第一眼进入用户视野的首页焦点导航以黑色为主,通过红色icon图标搭配给人带来理性与财富上涨的象征;丰富优质的内容呈现提供种类丰富的理财和决策产品,满足用户个性化的需求,突出了“互联网财富管理”作为申万宏源的产品核心地位。
采用视频直播的“赢家Live模块”,与传统文字直播相比更“赶潮流”和有效。资讯丰富,分类众多,块状化展示,提供海量信息;产品努力在筛选信息组成不同的新闻类别来满足拥有不同阅读用户需求。通过数据中心模块,为用户提供更多投资参考数据,用户可以根据自己的喜欢选择不同的数据特点参考。
广发证券:易淘金APP
我们基于现有的产品定位、人群分析、设计趋势,来升级我们产品的品牌 : 高端 、品质 、轻量。通过这些抽象的词语给予的灵感,将这些灵感变成一组可视化的符号传达给用户,从而改变用户以往的认知。
朝气蓬勃的广发蓝象征着斗志激昂的广发人。重点区域使用此蓝色突出了广发证券的品牌调性,也加深了用户认知。简洁的图形化设计,让整体风格衬托突出主要信息层级,引导用户轻松获取关键信息。
东方证券:东方赢家APP
东方赢家APP布局上将核心功能入口布局在用户目光聚集地最多的第一条横线区域,意在起到分流的基础目的。页面上方的banner区域,定位有两点:用户快速“薅羊毛”的重要阵地和视觉活跃的快餐地(活跃整体页面风格),当前方案上线后,从页面点击埋点数据看,也是点击量较多的一个位置,尤其是在非交易日,达到预期目的。
首页首屏内容经历多次方案优化,最终基于用户定性研究结果,将用户最多关注的盘中直击功能展示在页面第一屏,方便用户快速查看行情动态,同时快捷展示“智讯”等入口,将APP特色功能-智能资讯-着重展现,从上线后数据看,18%的用户在浏览首页时会点击该区域,较好达到预期效果。
光大证券:金阳光APP
金阳光APP是为用户提供综合性金融服务的移动端产品。首页需要满足两类用户的需求,一是满足目标清晰的用户快速找到自己想要的质量高的内容,即效率和质量;二是满足目标模糊的用户,首页有逻辑框架的内容可以对他们进行高效的引导和转化,提高这部分用户的忠诚度。
金阳光首页从严密的设计思维出发,从了解用户行为、整理信息架构、考虑操作的多样性到呈现产品的视觉美感,每一环节都是紧密相扣,使得金阳光app首页给用户提供了优质的体验。
方正证券:小方APP
小方APP在交互体验和UI设计始终聚焦在以下理念:功能实现路径的清晰简洁、界面足够清晰统一和重点明确并充分符合移动设备的操作特点、与设备原生体验的匹配度、迎合金融客户的既有习惯与偏好甚至潜意识的倾向等等方面。
具体到不同业务,小方在颜色、布局、交互会有一定的侧重,比如交易页面,主功能区“大字版”按钮,层次鲜明结构清晰,核心理念就是方便客户快捷操作;而到了比如积分频道,页面则会刻意选择与交易页面不同的颜色,多选择明黄,粉红等鲜艳活泼的颜色,吸引客户的兴趣。
国金证券:佣金宝APP
佣金宝APP突出便利性和个性化,最终提升投资者效率,这一点在首页的设计上表现尤甚。
1.便利性:将新股申购、理财商城、咨询功能、滚动资讯等日常常用的功能设置在最突出的位置,方便客户快速进入,提高效率。
2.个性化:体现在佣金宝首页的咨询服务功能可以“定制”。客户点击“全部”进入“我的菜单”,点击右上角“定制”后根据需求添加、删减或更换“我的菜单”中的功能,将自己常用、喜欢用的功能放在首页,提升效率。
兴业证券:优理宝APP
打开优理宝,交易时段快速直达自选股/行情,非交易时段进入首页浏览更多投资理财咨询。
在交易时间,我们引入呼吸灯的展现方式,以最清晰的红绿渐变来提示用户个股实时涨跌幅情况;二级导航栏可一键切换至资讯、选股、历史等功能;自选列表支持横屏切换,数据展示更多更清晰。
推荐首页突出重要推荐资讯,用大幅板块配有报道相关的一张大图,突出重大新闻作为视觉重点,会让用户集中精力放在重要的新闻上;也利于引导用户跳转到相关的详情界面。在细节方面,文字区域下层有增加黑色渐变蒙版,使文字与主题背景更加融合。
东吴证券:东吴秀财APP
东吴秀财APP,以墨蓝色为基调,秉承简约 + 底蕴的设计理念,将实用性与浓浓的水墨人文情怀融合。不仅如此,于细节之处,更显匠心。首页,“铜钱锁”、水波纹寓意“财富”;理财板块的,“至尊宝”、“如意宝”的设计别出心裁;吉祥物“小秀财”也会跟你不经意的相遇,给您带个好彩头。
东兴证券:东兴198
东兴198的视觉主色调选择了红色,这不仅是热情、活力、火焰与力量隐喻,也是中国股市上涨的体现。明亮的色彩,营造轻快的感觉,更容易吸引用户注意力;渐变风格,提高色彩明度,让产品看起来更加轻盈。首页选择用色块图标,凸显视觉效果;更可以完美适配运营活动需求,定制化设计和变化。
我们希望传递给用户智能、快捷、方便的体验。当用户在浏览时,体验到沉浸式的感受,如同在阅读生活消费杂志一样轻松愉悦。在这里,能获取到各种最智能助手消息,最新动态资讯,最全的热门数据,快速方便地获取到相关信息,从而轻而易举买到最好的股票,不知不觉让选股游刃有余。
安信证券:安信手机证券APP
安信手机证券首页的UI设计遵循清晰、简单、自然、好用的原则,展现用户关心的、想看到的内容,满足用户关于投资、理财相关的核心需求,让服务精准触达每个用户,圆用户一个财富之梦,所以首页的设计就从这3点出发。
主要以蓝色为主,以橙色为辅色,去延展整个App的设计风格。加上红绿涨跌色需要在不同的场景中使用,以及常用界面和字体的中性灰色。提供“白”与“黑”两种皮肤模式,用户可根据自己的喜好才切换整体App的颜色风格。
国信证券:金太阳APP
国信证券一直都很重视官方APP“金太阳”的颜值。国信证券“金太阳”具有统一的视觉设计规范,对每一个细节点的设计都存在几套不同场景的设计元素方案,这些方案包括交互控件、图标、字体、色彩运用等等,这些方案汇集在一起形成了包含上千个要素的“金太阳”视觉设计资源库。
“智能化”是目前券商APP发展的趋势之一,产品中的AI模块与设计的“动态化”结合将更加凸显科技感。比如,“智能理财”模块的banner图其实是动画模式,其中“智”字的右上角会像“护目镜”一样自动旋转,背景界面中会有“流星”划过深蓝色的夜空,图中的文字也会有蓝色的微光不时掠过,设计的科技感很强。
华宝证券:华宝智投APP
华宝智投首页框架设计,以用户场景需求为基础,结合华宝智投业务发展,有效进行功能场景入口的集成;产品特征重点的展现;优质内容精准的推送等。
在首页的整体体验设计上,采用扁平化视觉语言,轻量化设计,同时适当赋予一定的色彩展现,以凸显场景与业务。
东北证券:融e通APP
东北证券注重以体验为核心的设计。无论扁平、渐变还是微立体,风格潮流一直在变,但是通过视觉传达,让用户清晰、快速、便捷地在app上获取优质的服务、产品、和信息这一设计宗旨永远不变。
在UI设计上,融e通APP采用统一的UI标准,在APP整体风格上保持一致。每次改版,都以用户交互更友善、页面更简洁为目标。
上海证券:指e通APP
指e通APP的功能区根据大数据客户信息采集统计,按用户点击率较高的功能进行排序分布,方便用户使用;同时支持用户“定制化”,打造个性化首页,提升使用效率。
理财区着重凸显年化收益,需凸显用户最需感知的数据,弱化显示其他同质信息;根据产品热门度将各类理财产品进行排序,减少用户点击,让用户一目了然,放心选购;资讯区把三类点击率高的资讯栏目放在首页,更好地帮助用户决策。
南京证券:金罗盘APP
首页不仅是金罗盘的入口,也是一个综合性的页面,集中展示了大多数功能的入口。每天的非交易时间,用户打开金罗盘会直接进入首页。
功能菜单区是金罗盘首页的一大亮点,用户可以进入“更多”页面进行管理,根据自己的喜好,自定义首页的功能菜单,随心所欲调整它们的位置,当然也可以根据颜色自己搭配啦。我们也会根据用户的点击次数统计,来适时更换这里的菜单布局。
长城证券:长城易APP
长城易通过客户的使用日志,动态给客户展示不同的首页,首页支持营业层面的百人百面,同时结合数据挖掘技术,在客户层面给客户 展示有价值的、个性化,合规的信息。
首页设有长盈宝、理财商城、业务办理、股票期权、我的客服、港股通、融资融券、股转交易、沪深交易、场内基金、容易融、新股申购、投顾产品、综合资讯等快捷入口,用户操作便捷,能快速的找到所需要的服务。
英雄榜则是全市场高管增持,业绩预增,主力净流入,融资余额增加等指标的数据汇总。
财通证券:财通证券APP
使用财通证券App的用户中,95%是股民。为了延续股民的操作习惯,我们在首页保留了导航为主的布局,方便用户一键直达。此外,我们也逐步在首页展示更多的特色功能与业务,为客户提供差异化、定制化的资讯与功能。在icon和banner的设计上,我们在不影响辨识度的条件下,也在不断尝试年轻化设计,吸引更的年轻用户。
第一创业证券:一创智富通APP
1. 卡片式设计,层次清晰的内容展示,视觉逻辑更加有条理。
2. 首页头部通屏放置banner(首页轮播图)以展示最新的金融咨询和活动,有效利用空间,视觉饱满。
3. 结合“科技让投资更轻松”,重点展示智富通特色功能—智能模块。
4. 主要icon以渐变色块结合线条的形式体现AI智能的科技感。
5. 智能模块面线结合的设计方式以和其他面面结合的icon相区分。
6. 整体界面以金色为主色调更加符合自身的金融属性,也会给用户带来充满活力与向上的氛围感。同时搭配小面积辅助色,让界面不至于单调乏味。
国海证券:金探号APP
设计色调采用品牌标识色,红色和灰色,配合白色形成清晰明快的整体风格。红色是热烈、冲动、强有力的色彩,除了具有较佳的明视效果之外,更能表达有活力、积极、热诚、温暖、前进的企业形象与精神,是国海证券金探号品牌LOGO形象的诠释,代表奋进、向上、财富和自由。APP首页集中表现了上述特点,让用户能够立刻感受到金探号APP设计的用心之处。
华林证券:华林证券APP
1、 UI设计:明快的渐变色是和简洁的线性icon是当下主流设计趋势,“林证券APP” UI设计正是紧跟了这个潮流趋势,充分灵活运用于icon和图片设计上,传递出清新明快的风格,也更符合当下大家碎片化阅读和客户高黏性使用的视觉传达效果。
2、 页面设计:按照业务权重合理进行页面布局设计,同时保留快捷入口位,便于用户快速进入具体业务功能模块。采用十字交互的智能投顾部分与丰富的新闻展示排布设计,通过交互设计引导用户滑动操作,提高浏览的便捷性。因首页整体高度增加,合理添加Banner图片,使页面富于变化,让阅读更有趣。
联储证券:储宝宝APP
首页分为“共储时刻”和“金融商城”,“共储时刻”全部是低风险、保本型产品,有我们的现金宝、收益凭证、国债逆回购、场内申赎型货币基金、场外货币基金,也是突出储蓄这个核心思想;“金融商城”则是一些中高风险类型产品的推荐,包括非货币性基金以及资管类产品等。
联讯证券:联讯金融APP
联讯金融4.0版本UI设计以简洁流畅为主,界面减去不必要的装饰,保证无视觉噪音,便于用户沉浸式浏览。首页功能设计以“便于操作”为主,常用功能入口包括立即开户、投顾社区、账户分析、新股申购、资讯中心、智能选股、联讯学堂等,满足客户股票交易、资产配置需求。
此外,APP首页设置多个快速栏目入口,如理财推荐“更多”引导用户快速到达理财商城。
民生证券:民生财富汇APP
民生财富汇首页,财富管理转型的导向十分显著,在从首页第一屏开始,就给用户推荐场景化理财工具,包括抵御通胀的黄金宝产品;长期投资的定投宝产品;日常储蓄的工资宝产品;新用户理财的新客宝产品;资产配置的组合宝产品。
民生证券在积极向财富管理业务转型,金融产品库越来越丰富,民生财富汇在APP上打造理财专区和金融产品超市,涵盖收益凭证、银行理财、公募基金、活期定期理财等各类品种,并在首页以较大篇幅进行呈现。对于产品的起购金额、投资期限、业绩比较基准、风险等级等产品要素都有完整的呈现,并对当期产品的销售进度用进度条来显示,能给客户在进行理财产品的选购和抢购中提供很好的辅助作用。
民生财富汇在APP上早已实现OTC线上开户,开户后的客户在首页选购产品,一键进行购买,整个流程十分通畅,虽然民生证券还有相当规模的客户是使用PC端和同花顺进行股票交易的,但民生证券金融产品销售量的80%以上都在民生财富汇这款APP上产生,这是民生财富汇以财富管理为特色的首页取得成绩的有力佐证。
湘财证券:百宝湘APP
百宝湘APP首页秉承“千人千面,自主定义”的设计理念,旨在打造客户的专属金融中心。
我们尝试打造一个开放式的“应用市场”,建立在提供综合服务的基础上,通过各种应用来提供大量的服务产品,丰富投资服务场景,以匹配并满足不同用户的投资需求。同时,充分整合了用户碎片化时间的关注点,将资讯、功能及服务内容筛选整合成一个个的应用卡片作为APP的内容组织形式,提供个性化的资讯定制和推送服务。
申港证券:申港证券APP
申港证券新版APP整体以蓝白为主基调,其三大设计方向如下:
1)路牌标题栏:路牌标题栏的核心是让内容信息成为页面的重心。其最大的特点就是放大了标题的字号,像在首页这种聚合了很多内容的长页面,大标题能让用户在快速定位所处的位置,让用户在最短的时间理解页面,把握内容核心。 另外采用路牌式的标题栏也能快速抓住用户注意力,区别于传统的信息无核堆放页面;
2)提升文字设计层次:首先是利用先后位置建立层次,以路牌标题为第一层次,副标题为第二层次作为补充介绍,同时作为该模块内容的主要入口。其次是利用颜色/字号建立层次,比如首页的申港资讯,若用户已点击阅览后,则该条资讯标题字号颜色减弱以区分未读资讯;
3)增强对比效果:整个首页中,热门活动与申申小课堂以鲜明的色块进行区分,模块分明的基础上用户上下滑动阅览时不显单调。
太平洋证券:太平洋证券太牛APP
首页设计说明:原首页使用较为单一的颜色风格,功能内容也不丰富,随着现今券商APP的不断发展,也随着太牛功能越来越庞大,慢慢券商APP也在向丰富多彩的设计流行趋势靠拢。新版首页解决了原本广告混乱复杂的问题,将原来的广告缩小,以大文字来突出重点,统一广告风格,使版面看起来更加统一整齐。
万联证券:万联e万通APP
首页精简大气,以红色为主色调,视觉焦点以最新运营活动、主要功能按钮和消息热点为主,让广大股民第一时间了解万联活动和股市动态,快速引导用户找到功能操作按钮。
西部证券:信天游APP
西部证券信天游的UI设计采用了极简的表现手法,重点突出了以下几个方面:
1. 轻量化和有效化:使用大数据进行跟踪分析,充分了解客户的使用习惯和需求,针对性的对APP结构和快捷入口进行了重新规划,由注重形式向注重互交体验、使用效率转变。
2. 简化首页布局:使页面简洁而艺术,用户更容易找到焦点和最需要的功能。
3. 统一色调:配色统一为红色和深蓝色,与西部证券企业标准色保持一致,在兼顾用户视觉感受的同时达到企业识别的目的。
4. 按钮简洁化:APP中所有icon图标采用最简洁的线条形式。
5. 突出智能化功能:使用动图、H5动画、页面切换效果等多种动态元素,将智能的概念以绚烂方式呈现出来,吸引并引导客户使用。
中投证券:掌中投APP
掌中投APP首页增设了banner广告位,让用户第一时间了解到重要资讯及活动。另外把常用的功能作为快捷入口放在首页明显的位置,同时保留所有功能的入口在顶部栏右上角“导航”中,方便用户快速找到所需功能,提高软件操作效率。而快捷入口下方的内容板块就根据主次层级排列,使用垂直的视线引导用户阅读内容信息,使用户更聚焦于主要操作。
掌中投APP的图标大多采用扁平风格。所有的图标根据不同位置和数量等因素,设计也会有所不同。例如重要的常见的地方使用的图标元素多为实心背景带点折射影的风格(首页快捷入口),页面图标过多的页面(如账户下面的列表)为了营造视觉轻松感则采用线框类型单色图标。