见微知著 | 招行手机银行4.0图标系统的进化 | TANG 

见微知著 | 招行手机银行4.0图标系统的进化



作为招商银行的长期合作伙伴,唐硕与招行一道完成了手机银行的最新改版,共同实现3.0到4.0的跨越。迭代后,招行手机银行从一款工具应用转变成为金融服务平台,更注重内容运营,也呈现更多针对不同用户的产品。这次我们聊聊视觉识别系统的设计,见微知著,从特别具体的图标谈谈对产品的思考。





因应趋势的原则



3.0的图标,承载着页面的信息主体,意味着不同的功能层次。4.0的图标,伴随内容的整合重置,图标不再是用户的体验重心,而是操作的载体入口。



手机银行3.0



结合项目特性与过去唐硕在图标设计的经验,我们认为,更因应未来趋势的新一代招行手机银行Icon System,需符合以下三个原则:


识别效率为先(Efficiency)早期的移动端产品,图标更多的是实物与多元素的混合体。如今,用户对图标有相应的了解。因此,我们认为应提取图标中核心识别的造型,唤醒用户,形成更有效率的视觉识别系统。


结合使用场景(Harmony)在工具型产品中,图标是内容的主体,也是页面的视觉重心。当产品定位发生变化,内容运营成为了页面的核心,图标转化为一个实用型的入口。所以,新的图标应更趋向于辅助内容,清晰、客观、不喧宾夺主。


适度体现情感(Emotional)图标是“死”的,如不赋予情感,只能是孤立的存在。图标应是体现情感化的服务载体,而不是偏于理性的工具。在图标中融入产品情感,能够适应未来产品的服务化转变。


这三个原则,使4.0图标的设计向线条方案倾斜。线条图标与文字相似,使界面更精简,也更优雅。更重要的是,线条图标的特殊性,让它具备高识别性。如果再对线条、造型与笔触加以控制,还可以营造出情感化的感受。



手机银行4.0






由核心业务展开视觉区分



重构拥有142个图标的银行视觉识别系统,这是巨大的挑战。特别在招商银行,还有一些“创新功能”与“兄弟产品”。因此,设计的图标,在业务上既要有视觉相关性,又需要有足够的区分度。过于相似,用户看不出差别,完全不相似,用户便不能了解它们在业务上的联系。



但在研究后我们发现,银行业务虽多,很多衍生业务都是从核心业务扩展出来,而核心业务的数量不超过20个。




比如银行卡,每个衍生的图标都根据卡片的造型设计,同时留有足够大的视觉区分度。当用户浏览时,就能下意识地理解每个图标的含义,又明确了解它们都属于卡片类业务。





线条粗细营造空间感



招行业务的特性,使图标设计常需要用到两个以上的元素。但线条图标与块状图标不同,无法承载过多的元素。所以我们选择用线条粗细营造空间感,从而使每个元素的位置与造型都更加清晰,让图标的整体识别度再度提高。



因为始终觉得线条用2px与3px才是最合适的,所以又把@3x的图标线条重画了一遍,分别做成3px与5px。两倍的工作量,换来的是图标在不同平台上相同的细腻度。





对称处理,整齐划一



为了使图标在不同结构(网格、列表、链接)处出现时保持整齐统一,我们对绝大多数图标进行了对称处理,确保图标群的高度统一。






回归服务,赋予情感



在处理非常抽象的图标时,我们抛弃了过去直接拆分汉字画图标的模式,而是从本质出发,重新体现这类图标的服务属性。一方面建立起图标的视觉符号,另一方面为贯穿全局的视觉体验增添活力。银行给人的感觉不再是冷冰冰,而是“因你而变”的服务。

                                                                                                                                       


移动互联网金融体验设计的核心是场景思维,打磨场景每个细节加强代入感,才有可能留住用户。图标与其说是标识,不如说是场景代入感的承载,这种承载需要进化不止。






Icon System 4.0 一览









项目组成员









其他案例


唐硕用户体验设计地址

上海(总部) 北京 台北 深圳

上海市杨浦区政学路77号INNOSPACE+二层

北京市朝阳区光华路9号 SOHO2 3Q

台北市中正区北平东路30-2号4楼

深圳市南山区南海大道花样年美年广场3栋10楼100X

唐硕服务设计电话

电话+86-21-60746536

传真+86-21-60746500

唐硕邮件地址

商务合作info@tangux.com

公关联络pr@tangux.com

简历投递hr@tangux.com