设计思维

2022年,B端设计的趋势有哪些?

seo达人

视觉趋势

1. 3D设计风格

虽然 3D化 的视觉风格早已到来,但是在B端市场上,3D风格在此之前依旧表现的十分克制。

随着 C4D、Blender 这些 3D 建模软件的不断普及,再加上互联网上关于 3D 建模教程的增多,你会发现 3D 风格的视觉表现,是一个 B端视觉设计师 的基本要求。

而3D风格用在B端软件当中,会有两个使用场景:

 

图标

因为在B端产品当中,图标本身就是非常难以去表现,比如“物联网,大数据”。

许多的抽象词汇,很难通过一个具象的事物进行表达,而在企业官网当中,在视觉表现上的要求又十分的高。因此你会发现,在视觉风格上的选择,往往只有 3D 图标 + 插画 这一条路。

图片

并且 3D 图标的使用场景不会太过于局限,也可以用于产品的工作台、运营营销工具箱 等页面,因此 3D 图标的出现,它的应用场景也会相比之前 要更加的广阔。

图片

 

可视化大屏

大屏设计 也在不断的“内卷”,因为传统的 2D 可视化大屏 所搭建出来的大屏已经满足不了企业的野心, 像DataV 腾讯云图 ,大家都在朝着 3D风格 炫酷的方向进行延展,因此也就会导致 3D 的视觉风格需求 激增,而 3D 建模仿佛就是大势所趋。

图片

 

2.新拟态

虽然新拟态是在前两年的产物。这个设计风格背后,遭到了很多设计师的质疑与排挤。

但是随着这个风格的不断成熟,感觉它在B端视觉领域(特指的是 官网 ),是非常受到欢迎的,因为整体的风格,与官网的设计形式趋同。

同时作为B端产品的官网,其实是更需要新拟态这种风格。因为电脑场景下鼠标光标对页面进行 Hover 操作 给出的真实反馈,而使用了新拟态的官网按钮,给你的反馈非常真实。

这里安利一下腾讯云的首页官网,大家就会发现在设计风格上,大量的采取了新拟态元素,并且配合 3D 风格的图标,以及毛玻璃材质的设计,让它的设计瞬间加分不少。

图片

 

3.开源的设计系统

在去年,设计系统迎来了一波发展的高峰期,随着字节、腾讯,三大设计系统(Arco Design、TDesign、Semi Design)的开源,其实是给我们很多B端设计初学者,有了更加完整仔细的B端入门教程。

比如 Arco Design 的组件用法 https://arco.design/docs/spec/link

图片

就清晰的讲清楚了每一个组件的使用方式,以及注意事项,仔细阅读这里面的内容,其实就是B端设计的入门学习。

而未来,国内的环境,开源的系统也会越来越多,大家可以针对这几大类不同的设计系统,进行对比,或许会有一番收获。

 

产品趋势

超级app

这里的 超级app 可能和大家潜意识里的 支付宝、微信 这些软件不太一样。

在B端行业,随着疫情的不断扩散、再加上了两年时间的发展,很多B端产品的功能架构都出现了一个现象,产品的功能开始变得非常拥挤。因为B端软件的核心价值其实就是靠着一个又一个功能去累积,也就意味着随着B端产品的发展,功能模块在不断的累积,导致在设计层面,这样的现象变得更加严峻。

你会发现左侧的导航菜单已经完全没有办法装下这些导航内容,而这一现象也反映在很多产品当中,比如我了解的 飞书管理后台、薪人薪事 等等诸多B端产品,它们在整个导航内容上,已经增加到一级导航 15+  、二级导航 40+ ,这无疑会开始对设计师的能力造成巨大考验。

图片

面对这一情况,许多导航菜单都将会迎来前所未有的挑战,最近也在深入研究导航菜单过多时的解决办法,发现了一些新的 导航菜单 设计方法,有机会咱们重新梳理一下 导航菜单 的内容,将B端设计指南 文章进行更新。

图片

 

低代码定制化

低代码一直是我关注的一个领域,先给不明白低代码的同学简单科普一下。

低代码,一种快速开发应用的软件,将通用、可重复利用的代码形成组件化的模块,通过图形化的界面来拖拽组件并形成应用。低代码能够实现只写少量代码或不写代码,类似用“乐高积木”的方式来开发。

在国外有很多著名的低代码成功案例。Outsystems(国外非常出名的低代码平台)帮助施耐德电气在20个月内推出了60款应用程序,开发过程加速了两倍,仅在第一年就节省了650人天的工作量;在2012年即将推出Model S之际,特斯拉放弃了SAP的ERP产品(可以思考一下为什么),改用低代码开发平台Mendix,用25个人四个月时间自建ERP系统。

去年,低代码平台,也有很多新产品面世,其中就包含:

图片

因此你会发现,其实低代码就是在解决一件事,围绕着某一个业务场景,通过平台的持续完善优化。

让所有的功能都能围绕这个业务展开,其中包括:权限、时间轴、流程、表单、公式等等,能够解决很多特殊的业务场景。

而低代码会涉及到设计思路上的转变,以及低代码编辑器的出现,如何去设计如此复杂的配置流程,如何能够让用户能够快速上手,如果你能够有比较完整的思路,这些都会成为我们设计的新机会。

 

行业细分

随着互联网市场的不断发展,用户会越来越关注产品在自己行业的应用,比如CRM,其实只是一个笼统的称呼,现在CRM市场又会分为 SCRM、运营CRM,等诸多产品。

PaaS类的平台也出现了 负责从虚拟主机和数据库层面入手的 iPaaS 以及 从应用和数据层面入手的 aPaaS。

即使是大家经常使用的 钉钉、企微、飞书,它们也在各自的领域有所擅长。

图片

因为B端产品,在底层逻辑上是不能允许趋同的产品出现,如果你和别人的产品一样,其实是没有办法在目前的市场上立足。

因此你会发现,虽然产品形式都会比较相同,但是B端市场十分广阔,大家都在去寻找自己产品的差异化。

当然市场是瞬息万变的,这里也只是简单聊聊我自己的看法,希望对你有所帮助。最近拖更确实比较厉害,准备之后几天给大家抽些书,可以多留意留意公众号的文章。


作者:CE青年

转载请注明:学UI网》2022年,B端设计的趋势有哪些?


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


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



11本值得一读的设计书

seo达人

 

01.

超越平凡的平面设计之
《版式设计原理与应用》

图片

这是一本很经典的版式设计书籍,内容主要包含排版、色彩搭配,通过这本书你可以学到如何选择合适的字体?如何裁剪图片?如何设计封面?如何排版?如何配色等知识。设计师在这本书里分享了很多案例的设计过程和优化过程,包括画册设计、折页设计、唱片设计、网页设计等等,清晰的展示了他的每一步都是怎么思考的,逻辑非常缜密。
虽然里面的案例已经有些历史,但是其设计的方法和理念在今天仍然受用。 
 

02.

《超越Logo设计》

图片

这是一本有超级多干货的logo设计书,作者在书里不仅分享了31条logo设计的实用秘诀,还分享了如何谈业务?如何与客户合作?怎样提高过稿率?如何做好前期的准备工作?如何构思?等问题,它能加深你对logo设计以及logo设计之外的知识的了解。
 
 

03.

《文字怡人》
图片
这本书由日本著名平面设计师高桥善丸所写,虽然设计的是日文,但由于日文中也有很多汉字,所以中国设计师也能从中学到很多东西,另外我推荐他的原因是,通常到达一定高度的设计大师,都不会放下身段去写一些设计技能、设计方法的书,大多都在讲理论,这也使得设计师们错过了很多向大师学习设计执行的机会。
而高桥善丸给了我们这样一个机会,这本书主要是通过分享他的各种字体设计案例,来讲述不同的字体设计技巧,并且这些字体设计案例并不是作为个人练习单独存在的,而是作为真实案例运用在书籍封面设计和海报设计中。
 
 

04.

《设计中的设计》

图片

这本书很多设计师应该都熟悉,由日本当代平面设计大师原研哉所著,出版至今已经被加印了近二十次,足以证明这本书有多牛。
很多年轻的设计师认识原研哉可能是通过小米的logo和KURASHICOM的logo这两个案例,甚是还会因此对他的设计理念冷嘲热讽,如果你读了这本书,我相信你一定会对他有新的看法。在我看来,他对设计的认识已经超越了绝大多数人,也远远超出了技术层面,但他又不像很多大师把设计做成了艺术,而是始终围绕设计的本质:信息传达,来做研究和深化。
什么是设计?什么是视觉传达?设计的目的是什么?无印良品的地平线系列海报是怎么诞生的?等等问题,你都可以在这本书里面找到答案。
 
 

05.

《超级符号就是超级创意》
图片
该书由华与华的创始人华杉所写,华与华是一家知名的战略咨询公司,在设计圈里的争议很大,他们的设计作品可能不太受设计师的认可,但是华与华的方法确实影响了中国的整个策划圈和设计圈。
初读这本书时,其中的很多观点也给了我一种醍醐灌顶的感觉,作者在书中分享了什么是超级符号?如何打造超级符号?现代商业设计中有哪些问题?如何建立企业战略?等知识。
葱爷当时读的是左边黄色这本,现在最新的是右边蓝色这本,据介绍是新增了50页,包含华与华最新的案例和跨年演讲等内容。
 
 

06.

《香港新生代平面设计访谈》

图片

这本书是我去年才读的,书中收集了港澳地区共12位新生代知名设计师,他们来自平面设计、品牌设计、网页设计、字体设计、服装设计、IP设计等多个不同领域,年龄跨越了70后到90后,每个人都有许多经典的代表作,每个人都拿过很多荣誉,他们的故事和发展经历也很精彩。
 
 

07.

《设计工作室生存手册》

图片

几乎每一个设计师都有成为自由设计师,或者是创建设计工作室的梦想,所以这本书值得每一个设计师读一读。读完这本书你将会了解设计师的工作和职责是什么?如何获取客户、筛选客户?如何收费?如何与客户签订合同?如何管理团队?如何与人合作?等多个很实际、很实用的问题。
这一本薄薄的小书,原本是作者写给他儿子的,文风幽默风趣,言辞犀利,快人快语,读起来很带劲。看完以后记得要冷静冷静,别立马急匆匆跑去辞职创业。
 
 

08.

《田中一光自传》
图片
田中一光是日本平面设计领域国宝级的人物,也被誉为无印良品之父、日本设计中心之父,创作过很多经典的案例,获奖无数。这本书详细讲述了他从小到大的经历,以及怎样一步一步成为了享誉全球的设计大师。
老实说,读自传通常不能让你学到什么具体的技能,所以这不是一本教你怎么做设计的书,读名人自传的主要作用是让你对某些事情、某些行业产生兴趣,并可以把对方作为学习的榜样。读完田中一光自传这本书,我深深地“爱”上了他,他的人品和设计才华都深深的吸引了我,让我一度想去买他的其他书籍,并把它作为我人生的榜样。
 
 

09.

《日本版式设计原理》
图片
这本书的内容形式应该是很多设计师都会喜欢的,即:改稿,作者通过展示50个设计案例修改前和修改后的对比效果,从而向大家解释了如何正确的布局?如何正确地使用文字?如何进行正确的色彩搭配?如何正确地使用图片?这四大块内容。
另外,这本书里展示的案例也是非常接地气的商业作品,而不是自嗨稿,所以其中的设计思路和设计技巧可以很容易用到你的设计工作中去。
 
 

10.

《平面设计中的网格系统》
图片
这本书是瑞士知名设计师约瑟夫·米勒-布罗克曼所著,他是第一批把网格系统运用到平面设计中的设计师,网格系统是版式设计中很重要的一个工具,可以使排版更加有章可循、更严谨,在这本书中,作者不但介绍了网格的绘制、网格的分类、网格的使用,甚至还把网格延伸到了建筑设计中,想了解网格系统的人可以读一读。
 
 

11.

《design360杂志》
图片
图片 
 
 
这个年代还会看杂志的人应该已经不多了,看设计杂志的那就更少,然而这本2005年诞生于广州的《design360》却能够存活至今,并且有超过3万忠实的读者,可以说是亚洲最优秀的设计杂志之一了。你既可以购买它的某一期,也可以按年订阅,一年共6期,每一期的内容都不同,包含了平面设计、插画、产品设计、建筑设计、景观设计、设计组织、工作室访谈等内容,这本杂志除了可以拓宽你的知识面、加深你对设计的认知以外,你还可以从中认识到很多国内外的优秀设计师和设计工作室。  
 
图片
以上11本书是我个人觉得不错,值得一读的设计书,当然并不是设计师必读,也不是适合所有人,因为我觉得根本就不存在哪一本书是必读的,但如果你想对设计有更深入的了解,想提升自己的设计认知,选择一两本自己感兴趣的书读一读,肯定是有好处的。没必要买太多,不然肯定避免不了吃灰的命运。 
 

作者:葱爷

转载请注明:学UI网》11本值得一读的设计书

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


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



来了!解读2022年10种UI/UX设计趋势

seo达人


1.极简主义

越是领先的科技公司,你会发现,他们对简单大气、重点信息明确、精致的设计越有强烈的偏好。这种趋势逐年增多,覆盖范围也越来越广,品牌和各行各业的设计师也越来越多的偏好这种风格。

例如:英国金融科技公司Revolut

Meta(2021年10月28日,Facebook宣布,该平台的品牌将部分更名为“Meta”。)

Dribbble设计师:MoRas ✪ 的作品

小结:从心理学角度上说,极简主义也是在寻求一种安全感,纷杂的物品和内容生产者无时无刻都在绑架我们的眼睛,很容易让人沉沦其中,不能自拔。当越来越多的人开始明确自己的定位,明确这些购物和社交软件只是满足自己需求的一种工具,而拒绝做工具的奴隶。「觉醒」的人越多,极简主义的运用就会越来越普遍。

 

2.粗旷/粗野主义

粗旷主义包含强烈的轮廓、鲜明的对比色、大胆的排版和真实的生活摄影相结合。

 

去年我们还在说:“ 野蛮主义设计风格短期内应该不会深入到UI设计中去,更多的会在网站,或者杂志的设计运用此种设计思想。”

今年Spotify Wrapped(可以理解为国外的网易云年报)就给我们上了一课—野无止境。

贪吃蛇一样的形状配合各种高饱和颜色,穿插于各种界面和海报中,形成了巨大的视觉冲击,令人难以忘怀。

让我们来看看他们的设计:

 

3. 重回90年代

流行趋势总是轮回又轮回,但原因可能不是现在的人忽然意识到以前的回忆有多美好,而是当年的90后小孩成了行业的领头羊以后,将童年的美好回忆拿出来沉醉一番,找个机会释放内心的那份童真。

创意机构CPB London的设计总监June Frange将这波趋势称之为「年代怀旧」,短视频平台和明星效应的加持,以及使用者自发性的DIY内容,也使得它的影响力更加强大。

今年《王者荣耀》推出了两个新主题的游戏皮肤,其中一个以旧版西游记为原型打造的孙行者皮肤,一经上线在销售量上就远远超过了同时出现的安琪拉新皮肤。而原因却并不是皮肤的精美,因为从孙行者皮肤的精美程度而言,官方这一次就是出了一个“原皮”。

这样一个简单的皮肤,却让无数玩家纷纷掏钱买账,这就是怀旧的魅力。这种使用传统神话故事元素结合官方的创新设计,让无数玩家用一种全新的方式感受到了传统文化的魅力所在。

虽然我玩游戏不多,但是也半夜爬起来买了个孙猴子~

 

4.排版变得更生动有趣

10 年前,行业对排版比现在要严格得多,有明确的排版和字体使用规范。

不过现在,设计师们可以对标题和段落做任何想做的事情——完全取决于想象力。将字体与形状、照片和表情符号混合,在其上添加纹理,或者选择一种形式非常复杂的字体做装饰。

这种设计会产生一种有趣、引人注目的效果,但它也必须要美观和谐——我们仍需在设计时首先牢记:用户的舒适度永远是第一原则。

字体设计在2022年仍将占有一席之地,设计排版中融入夸张的、富有个性的字体,比如:同时拥有流畅的线条与锐利的棱角。

《鱿鱼游戏》的韩文片名标题,是由几何图形重新排列组合而成,挑战了抽象形状和文字之间的区别,借此突破字体必须易于阅读的局限,创作出具有表现力的形式。

Design Bridge London的高级设计师 Chris Algar认为:「  2022 年将是字体的重要一年」。

他预测:“我们将看到排版风格融入真正夸张的个性字体,在流畅的线条和锐利的棱角形状之间形成对比。”

Chris 认为,颜色和活力也将在 2022 年的排版趋势中发挥重要作用。

 

5.Glassmorphism 和玻璃元素

玻璃态已经无处不在——这是事实。有背景模糊、半透明物体,如卡片、水彩、玻璃球等等。从 Mac OS Big Sur 和 Windows 11 ,玻璃拟态已经存在了很长时间。

在去年,Glassmorphism(玻璃拟态)经过一整年的风靡也算站稳了脚跟,并未像新拟态风(Neumorphism)一样火速崛起又火速沉寂。越来越多的设计师将这种风格融入设计中去。

  

 

6.极光背景

不知大家是否可能还记得前一年的这个趋势——「模糊的彩色背景」。

它在2021变得非常流行,甚至有了一个专有名词——极光背景。

微妙、多彩、模糊的颜色看起来非常友好和有机——且更具视觉吸引力。这些飞溅和高斯模糊可以用作整个背景或置于一些重要的 UI 元素下。

  

 

7.全息/霓虹灯

这种网络全息/霓虹灯效果很适合虚拟现实和全息界面的时代。虚拟世界提供的新可能性激发了设计师的灵感。充满活力的、发光的颜色、抽象的圆形、全息图纹理是这一趋势的典型特征。

 

它也被广泛用于许多加密空间,以展示这些接口的未来性。

 

8.环保风

我们大多数人还是愿意选择环保的生活方式的,投射到设计中——可以将「生态外观」和感觉融入设计中。

越来越多的品牌在追逐这种「纸质感」的趋势——背景通常是灰色的,类似于可回收的纸板。排版风格极简。对比度很高。颜色非常克制,看起来稍显「暗淡」,这种风格包含现实生活中的摄影、纹理、和涂鸦。

 

 

9.粘土形态3D

3D 作为一种艺术风格正在变成设计趋势和大众流行

现在一种特殊的风格越来越受欢迎,3D最新的流行风格是粘土形态——类似于由粘土制成的对象(形状简单,由圆柱形/椭圆形组成,由内阴影和外阴影创造深度,但采用更「松软」的 3D呈现方式,通常与其他极简设计结合在一起。粘土3D有种可以按出一个坑的质感。

 

 

10. Metaverse

元宇宙(英语:Metaverse),又称形上宇宙,此一科技词汇由前缀“meta”(意思是超越)和词干“verse”(通过逆向构词法从“宇宙(universe)”得来)组成,可简称为MVS。这个词通常用来描述未来互联网虚拟环境的概念,于共享、持久的3D 虚拟空间组成一个可感知的虚拟宇宙,此合成环境包含对象、常驻用户与其交互关系,并存在于虚拟定义的时间中。旨在提供连接用户长时间登录和交互。广义上的元宇宙概念不仅指虚拟合成世界,还指整个互联网,也包括增强现实的范围。

Metaverse描述的是一种趋势:越来越多的技术和媒介,都在不停地缩短虚拟和现实的距离。

人类的大量活动和时间在往数字世界进行迁移。我们的社交活动、经济活动都是在数字世界(或者叫虚拟世界)里面,玩游戏也好,购物也好,社交也好,所以元宇宙(Metaverse)就是顺应这样的趋势产生的,元宇宙就是个数字世界。

感兴趣的朋友可以自行搜集详细资料。

  

用户体验设计,设计师的出发点是人,让人的使用体验感加强,趣味性加强,使用更加方便。在此角度,设计师不仅应当对设计趋势进行学习和分析,也要促成设计趋势落地的执行。学习拥有国际化的全局视野,增强面对复杂的中国本土市场的应对能力和洞察力,把学习和研究成果转化为产品设计的能力。

文献:Diana Malewicz (UX Collective)  素材来源dribbble,侵权删。

 

原文地址:站酷

作者:一个辛普森

转载请注明:学UI网》来了!解读2022年10种UI/UX设计趋势

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


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


韩国顶尖设计团队PlUS X,5年前的作品集包装套路,今天依然好用!

seo达人


一、项目背景及推导

在开头先放获得IF大奖作为证据,佐证作品质量,让读者有一个比较好的心理印象。我们在作品中展示作品时,也可以把自己获得的荣誉放在最前面,有一个霸气的开场。

图片

项目目标。关键词的推导,这部分的推导一定要简洁合理,太多人喜欢在这部分写很多文字,然后又没有把关键词可视化,容易被忽略。

图片

品牌愿景。说明产品最终想要达到什么样的状态,通过平台作为桥梁满足用户的诉求。

图片

品牌特色。介绍这个产品主要的特点。

图片

品牌设计原则。从品牌特色中提炼核心原则,并通过这些最核心的关键词,指导接下来的所有视觉设计。

图片

全局概览。把品牌设计过程稿和结果都放在一起,展示工作量以及全局概念。

图片

最终结果。动态展示最终的Logo。

 

二、规范体系

介绍完项目整体情况后,这一步开始介绍整个设计体系。

Logo系统。讲这个logo是如何设计出来的,会发现它的每一个词用的都挺准确的,很有代入感。

图片

主要应用形式

图片

颜色系统。给颜色一些解释说明。

图片

在Logo上的应用

图片

视觉主题系统。品牌的超级符号延展出的风格调性。

图片

A、倾斜式设计

图片

图片

B、折纸符号

图片

异化的叠纸符号

图片

图片

图标体系。图标这里的风格很容易看出是品牌风格的延续,也是品牌特征常用的做法,利用品牌超级符号中的某个特征应用到其他各个视觉触点上。

图片

图片

字体规范。通过排版将故事传递给用户。一致使用适当的字体可以建立强烈的品牌个性。合适的排版,例如使用各种不同字重和信息层次结构,将 KakaoPage 变成一个友好、体贴和值得信赖的品牌。

图片

动效系统。它也有2个不同的动态形式,动态的背景切割方式,能看出来都与品牌有高度一致性。

图片

图片

 

三、品牌应用

品牌应用图标。会根据Android和iOS系统要求,用不同的规范背板设计应用图标。

图片

APP设计,能看出来APP的设计其实也是品牌的一种延续应用,品牌是一个可以包揽全局的概念,几乎无处不在。

这也是高级UI设计师常用到的技法,抽象出品牌的超级符号,比如这里就是品牌颜色和斜角的运用,用在角标、背景图案、选项卡和图标等元素中。使得整个设计与品牌保持高度的一致性。

图片

图片

在一些媒体平台,都会尽可能地让品牌图形进行露出,并且保持品牌风格的一致性。

图片

图片

在名片、信封、卡片、包装袋、书籍、易拉宝、广告牌、运用广告等各种不同场景下的运用,也都会用到品牌符号,使得品牌更加具备识别度和统一性。

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

最后再次展示Logo,通过动效,品牌符号等给用户加深印象。

图片

到这里,一套非常完整优秀的设计作品展示就做完了。以上包装思路是该团队5年前的作品,到今天依然是各大品牌方案的包装套路,堪称经典!

你学会了吗?欢迎分享到你的朋友圈~


作者:彩云Sky

转载请注明:学UI网》韩国顶尖设计团队PlUS X,5年前的作品集包装套路,今天依然好用!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


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


字体篇 | 处理好这些,让信息的传达效率翻倍

博博

前言

文字是设计中的重要组成部分,就像我们平时看到的海报,里面各种被精心设计过的字体经常会成为视觉焦点,以醒目且个性化方式传达出内容的精髓,最后达到的效果事半功倍。
虽然在UI设计中不需要对文字过分设计,但图文作为主要的传播途径,字体的使用是否规范合理将直接影响着信息传播的优先级、重要程度以及用户的接收质量和效率。所以不管是平面设计还是UI设计,字体都是不可忽视的核心元素,做好对文字信息层级的处理,对用户的视觉体验有着至关重要的作用。
互联网经过多年的发展,也积累的很多的专业字体知识,设计师应该去了解字体的性格及特征并将其合理运用,才能将信息更清晰的传达给用户。本文将围绕着字型、字号、字距、字重等几个属性,针对各方面深度解析,希望能够帮到大家。

分享目录

一、字体的基本特征
二、字体的基本属性
三、不同场景下的属性参考
四、字体使用基本原则
五、UI设计需注意的问题
六、结语

一、字体的基本特征

1、使用前的思考

文字是信息内容的载体,能最直接的将信息清晰的表达出来,字体则表现了文字的外在特征,合理的使用这些属性特征不仅能清晰准确的传递信息、用于特定场景还能赋予情感表达,展现出独特的魅力,例如:健身、器械类的产品使用的字体通常会给人一种力量、刚硬、壮实的感觉,而女性专用产品字体则显的纤细、苗条。


2.为什么要使用黑体

不同类型的字体传达出不同的气质,综合来讲,字体可分为黑体、宋体、圆体、书法体这四类,平时大家看到的各种形形色色的其他字体,基本是通过这几类延伸而来。
在UI设计中,绝大多数的文字排版用的是黑体,诸如思源黑体、阿里巴巴普惠体、苹方(ios)、微软雅黑(PC web)等都是标准的黑体。另外,特定场景如瓷片区、卡片、banner、专题头图、引导页、闪屏等,对于用什么字体不会有太大的限制,在避免商用侵权的前提下符合产品气质即可。
黑体字的笔画横平竖直、粗细均匀且字面呈正方形,一般来说,没有衬线的字体都可以称作黑体。黑体结构清晰、简洁有力,能让界面显得庄重还附有现代感,虽然气质上没有太大的个性化、但可塑性很强,这也是在UI设计中、黑体一直很受青睐的原因,无论是标题、正文、提示等使用场景都可以作为首选,对老设计师能多一个选择、新手设计师也不易犯错。


3.iOS与Android的区别

iOS与Android是移动设备的两大系统,虽然很多设计师用一稿适配两端、遇到特殊页面也只是单独拎出来微调即可,但对于中、大型的互联网公司则很难满足优质用户体验中的部分细微差别,例如:iOS的苹方字体在Android设备中无法高度还原、预留的文字数量上限位置无法显示完整等,都会影响用户体验。
此外,iOS和Android都有自己独立的设计规范,大家有时间的可自行查看,本文只对字体规范作基本了解。
iOS使用的是「苹方」字体,提供了6个字重,英文字体为「San Francisco」;Android使用的是Google联合Adobe发布的「思源黑体」,为充分满足设计要求,提供了7个字重,英文字体为「Roboto」。


此外,如果界面中涉及的数据较多,数字使用DIN字体也是不错的选择,字体外形较长,易用且耐看,很适合数据统计展示,不过这款字体商用的话需要收费的。


二、字体的基本属性

1.字体大小

字号的大小决定信息的层次和权重,不规律的使用字号会让页面信息杂乱,不利于用户阅读。在设定字号规范时,需特别注意最小值和递增值。
最小值决定信息的可读性,以2倍图为例,iOS11系统将最小字号规范为11pt(22px),但很多产品依然将最小字号设定为20px,甚至部分产品将18px的数字加粗运用在标签中,所以最小字号的设定并没有固定数值,原则上不影响用户的浏览就行。笔者建议最小字号不要低于20px,在设计过程中,可以通过设备实时预览,因为同样的字号在不同的环境、色值、背景下,其视觉效果都有所区别。
其次,递增值决定着信息层级区分的明显程度,遵循字号越大、递增值越大的原则,常用字号数量控制在6种左右。iOS和Android都是采用的2倍数栅格系统,为了让字号的层级区分更明显,字号设定要避开奇数且最小递增值不要低于4px,下面举几个常见的例子:
①:20、24、28、32、40、48、64...
②:20、24、30、36、42、48、64...
③:22、26、30、34、40、48、60...
...


规范好的字号该如何使用,还得根据界面中的实际场景来决定,如下图:


2.字符间距

字间距是指两个字符之间的横向间隔距离,在界面排版中,除了西文的字间距调整需求较大外,中文通常只保持默认,只有少数场景才会手动调整,且没有固定的规律,保持视觉舒适状态即可。例如:banner、界面大标题、重要数字(取件码)显示等。 

3.行高

行高是指包围在字体之外的隐形边框,一个字体元素的的行高等于文字上边框+下边框+字号的高度之和。
西文字体因高度的参差不齐,本身就能制造出视觉上的上下空间,通常行高为字号的1.2倍,而中文字体没有上下间隙的延伸,行高则较大,一般在1.5倍左右,如果字号较小且折行较多,行高甚至能达到字号的2倍。


4.字重

字重指的是字体的粗细,不同的字重能体现出不同的层级关系,给用户的视觉感受也截然不同。
像苹方、思源、阿里巴巴普惠这些家族字体一般都会有极细体、细体、常规体、黑体、粗体等多个字重,在UI设计中,实用的就常规体、加粗两个字重,再通过色彩、字号使其成为对立关系,明显的拉开文字内容层级后,方能保持良好的浏览体验。


5.全角与半角

这种主要针对标点符号,以英文字母为标准,半角是指一个符号占用一个标准字符(英文)的位置,全角则是占用两个字符位置。
众所周知,中文使用都是全角、英文使用半角,并且会随着中/英文的切换而自动改变,但有时候难免会操作失误让页面中的某处信息看着怪怪的却不明所以、另外中文信息中的时间/日期也大多会使用半角符号,所以设计师对此有一定的了解时候、,在处理这些细枝末节就能做到收放自如。


三、不同场景下的属性参考

在色彩规范中,除主/辅助色之外,设计师还会提供3~4个等级的配色,如通用的#333(标题)、#666(正文)、#999(提示)、#ccc(占位符),这也是UI通用的文字色用色规范,不同的字号需用色规律。


如果想进一步延展,可以增加一点品牌色,也可以使用#000(纯黑)调整不透明度来体现文字色彩层级,深色模式中很常见,下面我们一起来了解几个常见的使用场景。

1.标题

标题的主要作用是让用户以最快的速度了解界面主要信息,需要时刻吸引用户的注意力,例如APP中的导航栏、模块标题、内容标题、数据统计等。需要简单明了且有冲击力,字号一般会控制在30px以上并加粗显示,直接使用一级色值(#333)即可。
在特殊场景下,标题也可以使用主体色值,但一定要注意容器背景与其他信息色彩的协调,不然花里胡哨的还不如用回一级色值。


2.正文

正文并不需要吸引用户注意力,它主要是提供标题的注释或内容的详细说明。
当白色背景文本内容过多、在需要用户仔细阅读的情况下,一定要注意颜色不能太深,不然显的主次不分,还有些刺眼,这里推荐26~30px字号使用二级文字(#666)色值。


3.提示语

提示类文字使用场景就相对较多,它除了给用户展示当前状态,还能给予合理的引导,促进用户进行下一步操作。常见使用色值为三级(#999)、四级色值(#ccc),例如界面中的操作注意事项、表单占位符等。字号一般为24px,因使用场景不同,也会有特殊的存在,例如表单中占位符的字号会跟随输入后的字号统一。


4.超链接

超链接在字号、色值上没有一定的限制,但需要一个特定的辅助元素/属性来提示用户这是可点击的。
例如APP登录页面,找回密码、注册、获取验证码等,大部分都是用主体色、图标(右箭头)等方式强化可操作入口,而PC端网页中超链接的表现方式,下划线、蓝色字体、>>这三种方式几乎能涵盖所有。


5.其他

规范并非不可更改,它只能帮助设计师在大部分使用场景中减少设计出入并提高产出效率,但总有一些使用场景需特殊对待,字体也不例外,如以下场景:

◇ APP金刚区入口字体大多使用24px,一级色值(#333);

◇ 底部Tab栏字体未激活使用浅色,激活后切换为一级色值(#333)或主体色;

◇ 重量级的提示语用红色色值;

◇ 按钮中的文字跟随按钮的等级权重变化;

◇ 深色容器标签的文字反白;

◇ ......


四、字体使用基本原则

1.符合产品气质

虽说黑体(苹方、思源、阿里巴巴普惠)是UI设计中的首选字体,但这也仅仅只是建立在不出错的的情况下、满足基本条件而选择,如果想表达出产品的类型、情感、气质等品牌属性,在不影响用户识别的前提下,可选择一款符合产品气质的字体,打造出差异化的浏览体验,对于追求完美的APP来时是一个不错的解决方案。
例如,部分艺术、女性类的APP会选择使用宋体,整体看起来有一种高端、时尚且优雅的感觉。


整体界面使用特殊字体还是相对较少,为了更好的体现出产品属性/风格,将其融入不同的模块及使用场景,会让产品更有特色,例如banner、瓷片区、大标题、头图等,对用户的视觉吸引力能得到很大提升。 


2.使用同一家族字体

在一个APP中,坚持使用同一个家族的字体,对标题、正文等文字信息有一个统一的视觉规划,这样有助于建立起体系化的设计思路,避免在开发落地时存在一致性问题,减少开发与设计的出入。
笔者曾见过这样的设计师,界面中原本用了「苹方」字体,在一个特殊场景下,「苹方」的粗体字重无法满足大标题的使用需求,于是将大标题单独改为「阿里巴巴普惠体」的最大字重。
从表面上看,上述的设计需求是满足了,但稍有不慎就会成为没有价值的艺术品,首先,单独一处使用不同家族的字体,会影响整体视觉的一致性;其次,若程序没有嵌入另外的字体,产品落地后其视觉效果毫无改观,且更没有必要为了某个场景的使用要单独嵌入几十到几百兆的家族字体,让应用安装包无故加大。在设计中,有时候在解决某个问题时,解决方案并非无可替代,加粗字体亦是如此。
另外,在可用性、实用性强且必要的情况下,并非不能再增加一个家族字体,例如所有标题系列使用「阿里巴巴普惠体」、数字系列都使用「DIN」,前提是一定要形成体系化,并非某一处的使用。


3.明确的信息层级

在同一个界面中,字体色值、字号、字重等,都是用于区分信息层级,尽量不要使用过多的层级,避免层级混乱影响信息浏览。
在信息层级处理方式的四个基本原则中,「对比」就是将复杂的信息通过元素的各种属性以不同的视觉效果呈现,来体现信息节奏感,并非是为了好看而随意给文字赋予各种属性及样式效果。


五、UI设计需注意的问题

1.避头尾的使用

避头尾使用在文字内容较多的折行场景中,主要处理标点符号刚好出现在一行文字的开头或结尾时,通过自动调整单行的字符间距、在视觉上将标点符号前移或后移。
在新闻资讯类应用的详情页中,避头尾使用的较多,用以避免头/尾存在标点符号造成视觉重量不一、信息参差不齐的问题出现。


2.反差体现层级

很多时候,为了区分信息层级,首先想到的是利用不同的字号、字重来体现,这当然没有问题,但如果结合字体的明暗关系(灰度色值等级)则效果更佳。
如下图:标题一级色值(#333)、正文二级色值(#666)、时间日期三级色值(#999)。


3.备用字体

备用字体只会运用在web页面中,如果网站需要一款特殊的字体才能彰显其独特的气质、同时又担心用户在某些设备中因为没有这个字体而无法浏览其效果,则会另外再选择一款相近的通用字体作为备选,以弥补视觉体验上的损失。
如果字体包不大,也可以让开发将其放在服务器端,这样能让所有用户都能看到相同的效果,省去了不少麻烦。

4.确保可读性

可读性应该是选择字体的首要元素,虽说很多文字我们都可以从前后字义、联想词等角度将自己的理解补充完整,但完全没有必要。
UI设计不像海报那样融入较多的艺术成分,更需要的是内容清晰、表意明确、高效率的传达,任何增加用户阅读、理解成本的做法都应该规避掉,例如过于变形的可爱风格、书法手写体等都尽量少用。


六、结语

文本内容是UI界面中占比较多的元素之一,设计师需要对其基本属性及使用场景有一个清晰的了解,使用的是否恰当取决于我们对字体的选择。虽说在UI领域,字体模块类的文章比较少(更多是文字、字库的设计),但它在设计规范中的地位是举足轻重,选好一款字体对设计来说是锦上添花。
关于UI界面中的字体,其实没有太多的讲究,也没必要整得花里胡哨,重点在于排版过重中注意信息层级的划分以及有足够的视觉舒适度即可。



作者:大漠飞鹰CYSJ      来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



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

一个按钮让我扣了3天细节!!!

博博

按钮设计是我们经常会遇到的一个类型,一个好的按钮其最重要的就是激起点击欲,让人忍不住去戳戳戳。

我们来看看下面这个按钮:

很普通,处处都很常见的一种按钮,没有任何点击欲。

那我们应该怎么做出她的点击欲呢?

其实就是要让按钮更有立体感,话不多说直接上干货!

1.层次

可以用不同的颜色,放大一圈,形成对比:

上下错开一些让按钮的造型饱满立体一些,从原来的单一一层变为两层:

2.层次

为了让按钮更立体我们可以把这两层个复制一层,往下移动几个像素:

这样按钮是不是就已经立体多了?别急,还有呢!

3.光影

这里细节就比较多,想把按钮做到晶莹剔透可不容易,给大家好好讲一下。

先给图形加上一个内发光:

使用剪切蒙版,涂颜色或者再来一层内发光,加强这个效果:

复制一层,选用更深的颜色,向下移动,剪切蒙版到里面去,把按钮有一个明显的明暗分割线,形成这种光的层次和厚度:

沿着造型刻画高光,和边缘有些间隔:

在白色的底座上加入按钮的投影:

这样一个剔透,立体感强的按钮造型就完成啦!

那还能不能让点击欲更强一些呢?

4.表像图形

放上文案看看:

就还是有点单对吧。

这种时候我们就可以从按钮的文案出发,加入一些图案,让它更生动!

比如这里的文案是“发射”,就联想到了火箭,我们可以绘制一个火箭出来。

把它加入到按钮上:

这样一个丰富且有点击欲的按钮就完成了!

并可以用同样的逻辑去延展别的按钮,让他们保持统一性:

总结

增强按钮的点击欲的方式,其实就是让它变得立体且丰富。

1.层次:单独的一个色块,会很单薄,增加层次增加其在造型上的丰富度。

2.厚度:厚度可以让按钮变得更立体。

3.光影:让按钮富有变化,更立体和吸引人。

4.表像图形:一个关联文案信息的点缀图案,可以让人更有食欲。



作者:菜心轻量文      来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



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

Instagram的视觉体验分析

博博

国外社交软件Instagram体验分析

今天和大家分享用了几年的一个社交软件Instagram。发现这款软件整体的设计与体验有值得学习的地方,从10个维度分享分享,希望大家喜欢啦~~

1.logo的变化

下图是关于Instagram的从2010-2022整个图标变化的过程,从中能发现:
1.图标从拟物的风格慢慢变成扁平的风格。
2.从具象的相机变成更加简约线形的相机图标。
3.颜色越来越艳丽、明亮,给人年轻、炫彩、简约的设计感受。
4.从logo的变化中能看出页面将从拟物的时代跨进了扁平时代,也能折射Instagram界面必将是往极简、炫彩的方向走。


2.图标设计

我重新临摹Instagram启动图标,发现里面有许多的设计小知识点值得学习。

例如:图标背景颜色有黄色、红色、紫红色、紫色,相邻的两个颜色互为邻近色,使得绘制出的背景自然而炫彩,非常不错的设计,渐变的融入也很自然。

当我们自己做渐变的图标背景时可以用两两相邻的颜色,让渐变融入的更自然。


3.颜色的规律

明显的发现Instagram颜色跟色谱的规律一致,颜色从左到右色相的变化值在50度左右,4种颜色都是用的高饱和度、高明度的色彩,非常艳丽、明亮,利用渐变附在英文上做出英文版的logo。

iPhone 14的字体渐变也是用的这种方法,利用两两相邻的颜色来做渐变。连苹果、Instagram都在用,赶紧学起来吧,你也可以的~~


4.圆角的设计

1.通过自己仔细的观察发现Instagram摄像头图标圆角是带有平滑过度的圆角,和普通的圆角不一样。

2.平滑圆角给用户的感受会更舒适、平滑、有活力,而普通的圆角显得更加生硬、不自然。

3.苹果的主题图标都是带有平滑过度的圆角而不是一个普通圆角,使得图标显得更加自然。

4.可以去看看之前原研哉帮小米设计的logo,会发现他们的logo给人干净会更加有活力、生命力,而不是使用这种普通圆角,而是一种平滑过度的圆角~


5.主界面的分析

1.从Instagram的启动页面看出,Instagram追求的是简约、突出品牌色的方向。

2.主界面主要以用户发的图片为主而不是文字,往往图片比文字更容易产生阅读与反馈

3.整体的界面简约、素白,图标都是统一用黑色线条的描边。

4.当自己关注的用户,发了一些视频,头像上附带Instagram的品牌色的圆形,在白色的界面用品牌色进行了点缀,让单调的界面更具有识别性。


6.界面布局分析 

Instagram的发现页面做的很不错,我重新绘制了这个页面,发现系统想推送给你的图片或者视频会做等比放大2倍处理,一屏显示图片或者视频至少有一个最大显示,给用户的感受是有主次。同时开发也能很好实现这种布局,具有一定的规律性。


7.轮播点的设计体验

在Instagram界面当用户发的图片超出5张时,图片下方的轮播点会出现变化,有大有小。

我重新绘制了一个用户发的7张图片的示例,当用户在左右滑动图片时,轮播的点会跟着动,同时会有大小的显示,暗示用户后面或者前面还有多张图片,有近大远小的感觉,非常细节的设计~(可以利用在自己的一些设计上)


8.设计的细节

1.在Instagram的用户界面,视频、多张图片、单张图片和置顶4种状态右上角有个图标的标识,让用户清晰知道图片的内容状态,提前给用户有个心理预期与区分。

2.当用户点击进去类似抖音的布局,可以进行上下滑动切换视频内容,双击可给该视频点赞,整体的体验很丝滑,没有任何的卡顿与拖沓。同时界面图标用线性的形式,布局统一、和谐。



9.图标风格 

Instagram整体的图标设计是线性的图标,线性图标给人的感觉是可点击、可操作的,同时感觉简洁明快的气质。图标的统一让每一个界面的视觉感受都是一致的。



10.经典界面 

这个界面放在你面前可能都会知道是Instagram这个应用,这个界面框架已经形成品牌意识。 Instagram几年一直没有更改这个布局,非常经典的设计,没有太多花里胡哨的图标与信息,只有简约的线性图标与用户发布的图片,克制的设计。也有很多相机应用、户外广告都借鉴了Instagram布局,已经在用户的心智里面了~



总结

1.越来越多的企业的品牌色往鲜艳的方向走,突出品牌形象。
2.图片的排版不一定是同样大小的,可以有大有小,取决于更想给用户传达什么。
3.图标的统一性很重要,当整个app的图标风格都一致时,给用户的体验的感受也是一致的。
4.不断重复一个设计框架、设计组件时,会形成品牌意识,让用户记得你的产品。


作者:黄小伟      来源:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系01063334945。 

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

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

如何把控设计的画面整体?这个六个视觉语言一定要了解

博博

不管是一部电影,还是一张视觉创意,想要消费者或者老板买单,从形、意、色、字、构、质等一系列视觉语言,都需要很好的掌握。

作者:Peng蓬的芝士追光      来源:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系01063334945。 

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

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

千万级小说产品,会员全链路设计复盘

博博

本文通过强化会员品牌、全链路精细化运营和提升会员服务的设计手段阐释如何为用户提供更好的服务。

百度小说是百度APP内的垂直频道,拥有过亿月活和行业最全的正版书籍。随着著作权保护意识逐步上升,越来越多的用户愿意为优质的资源和阅读体验付费。2019年底,为了满足用户消费升级所产生的一系列需求,百度小说初步建立了会员体系。经过两年多的打磨,我们不断提升会员的服务体验,并进行了多次优化升级,现在将我们的设计经验分享给大家。

一、设计背景

2021年我国数字阅读用户规模达到5.06亿,同比增长2.43%,半数以上用户愿意为电子阅读付费,占比最重的人群为19~25岁用户,达到44.63%(数据来源《中国数字阅读报告》),“Z世代”已经成为我国数字阅读的主要群体。随着消费升级,用户对服务的需求不断提升,更看重信息之上的附加价值,如认同感、归属感和仪式感。

二、改版原因

2019年,由于时间紧、任务重,我们完成了小说会员从无到有、从0-1的基础场景搭建。但随着设计趋势的变化,当时小说会员的设计风格与主流用户的喜好不完全匹配,在使用场景中也存在易用性不足、内容缺乏吸引力等问题。下图是2019年小说会员的界面。

同时,我们对小说用户进行了视频访谈,搜集了用户在使用会员服务中遇到的问题,如会员福利少、找不到会员专属内容、购买过程有卡顿等,最终梳理为的三大核心问题:身份感知弱、购买路径长和资源内容少。

三、设计目标


在小说会员亟待改版的背景下,我们结合业务目标、旧版核心问题和用户诉求,推导出了本次改版的设计目标—品牌化、链路化和服务化。

1、品牌化—强化会员品牌

小说会员作为百度APP众多会员之一,设计团队希望能带给阅读用户一些不同的品牌记忆点。

1)设计关键词

基于会员的主流用户、产品属性和用户诉求,我们衍生出以下关键词:年轻、品质、尊贵、超值。年轻用户群体的占比越来越高,新版的设计风格力求更好满足年轻用户的审美需求。

2)会员符号

符号是最直观的视觉元素之一,能够以最快的方式传递产品记忆点。在会员品牌符号设计的草图阶段,我们从字母V、VIP、钻石、王冠和小说IP白嘟嘟等多个方向进行了方案发散。最终采用了白嘟嘟图形与尊贵感的V形符号相结合的形式。该方案既延续了小说的视觉符号,又与竞品的会员标识形成差异,从而加深用户的品牌感知和视觉记忆。

3)会员色彩

为了确定更加独特的品牌色,设计团队搜集了大量的尊贵氛围图片,提炼出了玫瑰金,牙金,赤墨等8个具有品质感的颜色。在视觉初稿阶段,我们选择了玫瑰金和黄金两种主色进行了方案尝试。最终根据整体效果确定主色为明亮、高贵的玫瑰金,辅色为黑茶棕,深支子和漆黑的配色方案。新的配色方案让用户感受到新颖、现代,焕然一新。

4)会员图标

在图形元素上,为了增强亲和感,我们选择了圆润的面形图标样式,通过大圆弧和小圆角的细节处理,传递给用户一种年轻、品质的品牌印记。

5)信息传达

我们对会员购买页和权益详情页进行了布局重构,采用深色的背景衬托卡片信息,使得产品框架层和内容信息层更加明确,突出核心内容。

在各类场景中,我们通过会员品牌色彩、图形、符号和IP形象的渗透,强化会员品牌印记。

经过分析研究和实践,我们完成了主场景的设计升级。

2、链路化—精细化运营

就会员体验而言,我们需要关注用户在各种时间和各类场合下的需求,因此我们将会员的全链路状态分为时机、场景和人群三个维度。

1)时机

在不同的时机状态下,我们需要传递给用户不同的信息。只有深入剖析不同状态下的用户诉求,才能为其提供更好的服务。接下来我们从购买前、购买中、购买后和即将过期四个阶段阐述:

①购买前—权益/优惠信息引导

在用户购买前,我们强化了低价和省钱信息,让用户直观感受到购买会员后的价格福利。为此我们从三个方向上进行优化,在开通购买页,外露省钱金额,帮助用户了解开通会员可享受的收益;在会员频道页,采用外露多项权益,让用户快速了解会员权益;在章节购买页,采用突出会员折扣和会员优惠价,让用户感受到开通会员的折扣福利。

②购买中—优化路径流程

在用户购买中,我们在会员购买链路环节进行简化,采用当前页弹出半层面板替代跳转至会员聚合页的方式,缩短等待加载时间;在章节付费链路环节,将商品选择区信息结构进行优化,减少多章购买的页面跳转,使得用户能够更流畅完成支付,提升付费体验。

③购买后—强化权益感知

在用户购买后,鉴于付费用户对商品和服务品质有着更高追求,为此我们通过在各类重要入口展示会员权益,包括省钱金额、去广告次数以及各类场景VIP状态提示等方法,以达到强化用户的权益感知。

④即将过期—轻引导续费

在即将过期前,为了避免对用户造成强付费的不友好感知。过期前3天,我们采用了轻量化的形式告知用户续费,通过各类引导信息的提示,让用户知晓会员服务期限届满。

2)场景

我们在入口和功能场景中也进行了精细化设计,让用户更便捷地使用会员服务。为了突出会员优质内容和服务,我们设置了会员专属的频道和书库,方便用户选择。

在各类功能场景中,为了方便用户在使用功能的过程中随时购买,我们设置了多个功能场景的会员开通入口。让用户快捷享受会员服务。

3)人群

通过小说用户数据分析,我们将用户人群分为会员用户、潜在用户、新用户和过期用户。

为了让会员用户能够体验到区分于普通用户的尊贵感,我们在付费页、批量离线、TTS播放页和签到页等场景均采用了会员定制化的配色方案和引导提示,这样使得会员用户在体验服务的各类场景中有更强的身份专属性。

所谓潜在用户,是指仍在犹豫是否购买会员的用户。我们通过限时优惠券、激励视频试用15分钟、书架省钱提示、挽留弹窗和降级版免广告权益等方式,让潜在用户不仅可以先试后买了解会员权益,而且可以通过各类信息提示通晓会员体验,更好地判断是否通过会员服务减少付费金额和提升阅读体验。

我们针对新用户建立了新人见面礼活动,用户在新手福利活动期内可享受超值折扣开通会员,低价体验会员权益。而针对已过期的用户,我们通过下发优惠券、强化特权等形式唤醒用户,以免错过各类福利和特权。

3、服务化—提升会员服务

在内容为王的时代背景下,为了增加会员产品的核心竞争力,我们持续扩充会员书库的数量和类目、拓展会员权益,让用户阅读到更加丰富的小说内容和体验到更多权益的会员服务。小说书库的付费和免费书数量大幅扩充,且书籍类型新增了有声书和短篇故事,增添了小说资源的多样性。

在权益上,对内我们持续拓展会员特权,从最初的4项扩展为10项,新增了有声免费听、免费读故事、整本离线、专属字体、签到1.5倍书币等权益;对外我们联合其他产品,推出了会员赠礼和联合会员服务,用户可以根据自己的需求进行购买,享受组合购买的优惠。

通过多个版本的迭代,我们完成了会员体系的设计升级和落地,用户体验得到了显著提升。

四、未来规划

提升付费产品的用户体验是一个体系化的研究课题,需要各个角色通力合作,合力同行,开拓革新。将来我们还会不断探索,通过不断优化体验细节,不断增加用户权益感知,不断尝试方案创新,形成设计组合拳,为用户提供更好的服务。






作者:百度MEUX      来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



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

用这三步流程,打造百度酒店比价认知

博博

百度酒店以比价及低价感知传达、高效预订低价为设计目标,实现划分为了“提升感知、建立认知、强化记忆”三个阶段建立用户认知。


百度酒店以比价为核心特色,经历多次设计探索,初步建立了用户认知。

设计中通过“核心流程分析-明确用户关注信息-探索比价价值”的方式去制定设计策略,并在方案探索与落地阶段,通过思路发散、多轮数据验证与方案迭代,验证了“氛围感知强化、价值信息传达、聚合比价”等设计手段的作用,希望给服务和电商等比价类产品的设计师一些启发和参考。

一、项目背景

酒店住宿在线预订市场中,各个平台基于用户权益、运营补贴等差异进行着激烈的价格竞争,导致行业存在天然的价差。而在我们进行的一次酒店预订访谈中发现,超过半数的用户在预订酒店时会进行比价,而比价的用户中多数会使用2个以上的酒店APP。因此,在市场存在价差且用户有比价诉求的背景下,百度酒店通过接入多家供给及会员低价,旨在建立酒店聚合比价平台,为用户提供性价比最高的酒店搜索服务。

二、设计策略与落地触点

1.目标和策略制定

在上述背景下,我们与产品侧对齐业务目标,结合对用户诉求的分析,确定了设计目标。


为了达成设计目标,需要明确比价在酒店预订的各个触点下对用户的价值是什么,以探索比价如何发挥作用。下图列出了酒店预订的核心流程、核心模块及用户关注信息,由于用户在各个环节关注的信息不同,比价所能发挥的价值也就不同,因此基于比价是否影响用户进行选择和决策,我们又将核心流程分成服务报价选择前、服务报价选择时、服务报价选择后。



设计目标的实现也对应上述3个环节如下图:

  • 在服务报价选择前,比价还未对用户决策、预订体验产生直接的影响,此时要去传达比价的概念和价值,并尽可能的强化这种氛围感知,让用户清晰地认识到百度酒店可以比价,以吸引用户使用比价。
  • 在服务报价选择时,用户会利用比价进行选择和预订,此时要突出低价、辅助用户进行高效的对比和预订。
  • 在服务报价选择后的下单环节,可以进一步强化比价的感知和价值,以加深用户对百度酒店比价的印象。

2.明确落地触点

为了找到一些好的比价概念和价值的传达方式,以及提升比价体验的方式,我们进行了竞品调研,竞品包含酒店、商品等不同行业,调研结论归纳如下:

  • 利用流程中的主要模块,传达比价概念以及“享低价”、“省钱”等比价价值认知;
  • 结合“产品缝隙”渗透比价概念,具体指“当前内容”到“下一个阅读内容”的停顿时间,包括跳转时的过渡页、阅读完结的结束过程等,在用户不排斥的状况下,给用户带来一些基础的认知教育;
  • “聚合比价”模式,将针对同一商品或服务的报价由低到高排列,以便用户快速对比和选择低价。


结合竞品调研结论,我们根据百度酒店的核心流程和触点进行了设计策略的拆解,建立了策略和落地的映射关系。



三、方案探索与落地

1.提升感知-让用户知道百度酒店可以比价

这一环节的设计目标是要让用户知道百度酒店可以比价,以吸引用户在百度酒店完成下单行为,因此清晰、有吸引力的比价元素设计十分重要。基于竞品调研内容,我们进行了设计探索。

1)酒店列表-氛围感知强化及价值信息传达

下图所示为酒店列表比价设计的探索过程,最初的方案,为了保证酒店信息的获取体验,采用了与传统酒店预订平台采用一致的结构和信息优先级,仅结合图片区域和价格做了比价信息的结合,但这种设计与传统酒店预订平台差异很小,比价感知和价值的传达效果并不好。因此设计侧转变思路,在酒店列表中通过更强化的模块来突出比价的感知,同时结合“比某平台低xx”的文案说明比价结果,传达“比价获得更低价”的感知


酒店列表覆盖多个场景,为了建立百度酒店一致的体验和认知,我们将列表的设计覆盖到了搜索结果页和小程序的多个页面,如图所示。


2)房型及服务报价-基于低价推荐去强化比价

房型及服务报价模块对应酒店精准需求和酒店详情页,与酒店列表思路一致,方案在逐渐与传统酒店预订平台产生差异化,去强化比价、低价的感知,形成记忆点。

下图为搜索结果页的方案,最初外露了多个房型,以满足用户的选择诉求,但从用户行为数据来看,百度酒店的绝大多数用户会选择酒店的最低价房型及报价,因此我们调整设计方案,结合最低报价,用模块式的对比方式去强化比价,并通过“低价立省xx”的信息去传达低价感知。另外,这一部分的设计也和聚合比价有所结合,后面会进行详细的说明。


详情页的主要模块设计与搜索结果页基本一致,如下图所示,详情页中将最低报价作为低价房型推荐,以建立一致的比价认知同时便于用户快捷预订低价。另外,在常规的报价列表中,为了提升用户查找报价的效率,相比于最低价房型,采用了弱化的形式。最终方案上线后,数据上也取得了正向的效果,报价展现到预订点击的转化得到了提升。


3)“产品缝隙”中的比价概念渗透

“产品缝隙”并不像上述列表模块那样感知强烈,设计的目的是为了进一步加深“百度酒店可以比价”的用户印象。结合百度酒店的核心页面,我们重新设计了酒店列表和房型报价列表的加载态,利用“多资源方交替动效+文案说明”的方式,构建动态的比价感知,在用户进入页面或者进行筛选等场景时会出现。另外,我们也利用了小程序首页和详情页的页尾,在阅读结束时去传达全网比价的概念。


2.建立认知-聚合比价模式的构建

在竞品调研部分,我们提到了聚合比价模式,百度酒店由于报价复杂,也适合用这种方式去简化报价。

如图所示,常规酒店预订平台,同一房型(如标准大床房)会存在不同服务政策(早餐服务、取消规则、支付方式)的报价,而在百度酒店中,由于又加入了预订平台的差异,报价会更加复杂,数量更多且同质化严重,即服务政策相同,仅预订平台不同的报价多次出现,这就导致了报价列表的查看和选择效率较低。



聚合比价模式就是要将这些服务政策相同的报价聚合在一起进行比价,以简化报价列表提升选择效率,同时在服务相同的情况下,绝大部分用户会更倾向于低价,在报价聚合后,可以突出低价以便用户预订

我们也在探索如何让聚合比价更简单,初始方案采用点击展开的形式,用户可以保持滑动浏览的交互体验,整个过程的交互体验比较流畅,但页面的层级关系较为复杂,用户认知成本高。因此我们又尝试了调起面板展示比价详情,让用户聚焦在当前报价的对比,并通过模块式的设计,清晰罗列了每个平台的服务、优惠明细等差异信息,让信息的对比更高效,同时强化低价平台,与前面的比价模块保持认知一致


聚合比价模式下,存在了两种用户路径,如图所示。用户可以直接选择最低价资源方完成预订,也可以通过比价详情弹,查看针对同一服务的所有平台报价,对比平台的详细服务、优惠差异后再选择预订。

这种预订模式的目的,一方面在教育用户建立百度酒店可以比价、可以买到低价的认知,另一方面也提升了用户选择低价平台的效率。另外,聚合比价要具有清晰的规则才能被理解和信任,在比价详情中,为了进一步降低认知成本,我们通过标题突出了聚合项,并增加了比价说明入口,让聚合规则更明确。聚合比价的方案上线后,报价的预订点击到成单转化也得到了提升。


另外,前文提到的精准需求搜索结果页和详情页的低价房型推荐也利用了这种模式,不过在比价感知上做了更强化的处理。用户可以在详情页直接点击各个平台报价完成预订,也可以点击文字部分查看房型详情,在页面底部的比价详情中完成报价的对比和预订。



3.强化记忆-比价价值感的再次强化

填单场景是在预订完成后,这个环节我们可以将比价的概念和价值再次展示给用户,以加深用户对比价的认知。这里的设计手段与“提升感知”阶段类似,如图所示为一些方案探索,在用户选择低价平台预订,点击跳转至填单页后,我们会强化用户“预订到最低价”以及“为用户节省xx元”的感知。另外,在用户提交订单时,会存在一定的加载时间,我们也利用了这里的“产品缝隙”,结合加载态继续传递低价、省钱的认知。


四、结语

回顾百度酒店的比价设计过程,我们以比价及低价感知传达、高效预订低价为设计目标,基于百度酒店的核心预订流程,探索比价在各个环节如何发挥作用,进而将设计目标的实现划分为了“提升感知、建立认知、强化记忆”三个阶段,并为业务带来转化提升。

提升感知过程结合流程中的主要模块,通过模块式对比形式、传达比价价值感、基于低价推荐强化比价、以及利用“产品缝隙”等手段,去吸引用户了解和使用比价;建立认知过程利用“聚合比价”模式去精简报价,同时结合对低价报价、低价平台的强化,让用户更便捷的预订低价;最后强化记忆的环节,我们进行了一些方案尝试,再次强调比价的价值。另外,为了建立一致的比价认知,整体的设计中也坚持一致性的原则。百度酒店的比价设计也在不断地尝试和优化中,希望能给用户创造更好的使用体验。




作者:百度MEUX      来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档