前⾔:⼩编是个重度的阅读产品使⽤者(做编辑这⾏不读书怎么⾏),⼏乎⽤遍了⽹上的各种阅读产品,最近在⽹上发现了⼀款⾮常低调的产品上线了,⼀查竟然是百度出品的,因为经常接触百度系产品,这个产品的设计体验和以往的都不同,然后就在⽹上搜索资料,查到了⼀位资深设计师对这个产品的评价,写的⾮常诚恳(⼩编可以偷懒了),照搬过来如下:
从“形⾊字构质动”来评价“百度阅读pro”的视觉设计
By李天真(视觉设计师):注:本次测评采⽤的⼿机为iPhone8,软件版本为V1.0.1
“百度阅读pro”app⾸页
写在前⾯
“形⾊字构质”是组成⼀个app视觉语⾔最基本的五个维度,⽽动效设计是UI设计的新趋势,所以笔者将从形、⾊、字、构、质、动六个维度对“百度阅读pro”的视觉设计进⾏分析和评价。
在此之前,我们需要对这六个维度进⾏简单的介绍,明确“百度阅读pro”app的产品定位与⽬标⽤户。
由《你的阅读专属⼿册》可知,“百度阅读pro”的产品定位是“在百度阅读app上提炼出来的以全场免费读为主线,提供舒适的沉浸式阅读体验,为⽤户推荐最为合适的书籍、到所求,建⽴⾃⼰的私⼈图书馆”的app。
由“百度阅读”app在2016年发布的“⽤户画像数据报告”推测,“百度阅读pro”的⽤户年龄集中分布在25-30岁区间,多为学⽣和⽩领。
《你的阅读专属⼿册》
⼀、形
“百度阅读pro”有线型和MBE两种风格的icon。其中TabBar中的四个导航icon采⽤了MBE风格,丰富了界⾯细节的同时也与其他icon有效地区分开来,简约⽽不简单,符合⽬标⽤户的主流审美倾向。剩余的icon均采⽤了线型风格,⽐起存在感较强的⾯型风格icon,对⽤户的⼲扰较⼩,更有利于沉浸式阅读体验的打造。
icon的⼀致性做得很好,描边控制在两种尺⼨,对描边的端⼝、转折都进⾏了圆⾓处理,同⼀区域各个icon的视觉尺⼨统⼀和谐。这体现了“百度阅读pro”的专业性,传达了品牌形象。
⼆、⾊
“百度阅读pro”的⾊彩运⽤⼗分克制、有序。醒⽬的品牌蓝⾊作为点睛⾊突出重点信息,其余信息根据优先级分别采⽤不同饱和度的⿊灰⾊。这⼀⾊彩体系提⾼了信息的传递效率,符合“提供舒适的沉浸式阅读体验”的产品⽬标。过于丰富的⾊彩体系会分散⽤户的注意⼒,⽽该app避开了这⼀陷阱。并且,⽤户的阅读场景既可能是安静的室内,也可能是喧嚣的地铁,所以简洁的配⾊能够帮助⽤户在不确定的阅读环境下提⾼阅读效率。
此外,这个app还有⼀个贴⼼的⼩细节。众所周知,长时间⽤⼿机阅读会引起眼睛不适,为了减轻⽤户的压⼒,“百度阅读pro”在阅读界⾯采⽤了⾊值为#f8f8f8的背景⾊,避免⽂字与背景对⽐过于强烈,更适于长时间阅读。
该app的字体颜⾊不是常见的#333333、#666666、#999999搭配,⽽是带有蓝⾊的⿊灰⾊,把品牌DNA融⼊界⾯设计中,在不⼲扰⽤户的前提下提⾼品牌认知度。
三、字
“百度阅读pro”采⽤了苹⽅字体、⽅正中粗雅宋简体、⽅正细雅宋简体、Source Serif Pro Semibold四种字体。其中标题使⽤⽅正中粗雅宋简体,阅读界⾯正⽂⽤⽅正细雅宋简体、重要数字⽤Source Serif Pro Semibold,其余⽂字⽤苹⽅字体。
“百度阅读pro”所⽤字体
江铃驭胜宋体和衬线体为其增添了⼈⽂⽓息,让⼈联想起传统的纸质阅读,为⽤户营造⼀种阅读氛围,⽽且也提⾼了“百度阅读pro”的品质感。当然,对于⼿机屏幕⾥长篇的正⽂采⽤⿊体更好还是宋体更好,⽬前还没有定论,但同样是阅读类app,“读书”、“⽹易蜗⽜读书”、“轻芒”、“⾖瓣阅读”、“QQ阅读”、“⽹易云阅读”⽤的都是⿊体,⽽我个⼈的体验也是在屏幕上⿊体更适于长时间阅读。
界⾯⾥不同层级的信息字号对⽐也⽐较清晰明确,⽤户能够快速获取⾃⼰想要的信息。
四、构
“百度阅读pro”采⽤了⼤⾯积留⽩、去灰底、去分割线的布局⽅式,利⽤舒适的间距划分信息,去掉⼀切不必要的元素,使⽤户浏览尽可能的流畅⽆阻。这种布局⽅式⽐较新颖独特,给⼈留下深刻印象,贴合⽬标⽤户的审美趋势。并且栏⽬内容排版也⽐较简洁⼤⽓,内容层次分明,浏览节奏舒适。与“QQ阅读”密集多变的布局风格相⽐,“百度阅读pro”显然更有呼吸感、通透感,⽽没有压迫感。
五、质
“百度阅读pro”在扁平风格的基础上加⼊了微投影。和“⾖瓣阅读”的投影⽐起来,“百度阅读pro”的投影⾃然舒适,过渡流畅,突出重要内容、增强空间感的同时,⼜避免过于抢眼。并且微投影仅⽤于突出书籍封⾯,使⽤原则明确,易于掌握。除此之外并⽆更多材质,图标、组件都是⼲净清爽的扁平风格。
捷达2012款这样能最⼤限度地减少界⾯元素对⽤户的⼲扰,让其注意⼒集中在内容本⾝,体现了“提供舒适的沉浸式阅读体验”的初⼼。
当然然,像“读书”⼀样再特⾊页⾯添加⼀点微材质,可以给⽤户更多惊喜。
六、动
动效设计应该是“百度阅读pro”最明显的视觉瑕疵。平⼼⽽论,设计师在动效上花费的⼼思也不少,在过渡、加载等⽅⾯都设计了动效,但是还是有让⼈遗憾的地⽅。
⽐如,⾸页书籍切换时有明显的卡顿现象,个⼈认为是因为被切换的书籍是在最后⼀刻突然转换状态,⽽不是逐渐改变不透明度;⼜⽐如,TabBar的图标点击动效只是简单的缩放,实际上可以像QQ⼀样增加⼀点趣味性;还有,阅读界⾯的时间动效⾮常抢眼,对我的阅读和操作造成了⼲扰。
当然,还是有不错的动效,⽐如进⼊阅读界⾯时的翻书加载动效。可见设计师还是⾮常注重细节的,刚刚提到的瑕疵可能是技术、时间、产品需求的原因。相信在以后的版本⾥会逐步完善。跛行回家
结论:
4008标致综上所述,“百度阅读pro”实现了“提供舒适的沉浸式阅读体验”这⼀产品⽬标,也符合⽬标⽤户的审美
情趣,是⼀款在视觉设计上⾮常出⾊的app。对于普通⽤户,可以去畅游书海,对于设计师,可以去欣赏和学习其视觉细节。总⽽⾔之⾮常推荐!
⼩编⽐较好奇的是什么样的⼀个UX团队做的这个产品,⼩编作为设计圈的⼩达⼈,进⾏了多⽅打听,最后到了这个团队的负责⼈:狄涛⽼师。
经过狄涛⽼师介绍,原来这个是⼀个⾮常低调的团队,团队名称:百度教育UE团队,简称:EDUX。
油价调整5月30日开启团队是在2017年才成⽴不久的,是百度⾮常专业的UX团队之⼀,旗下拥有多款优秀的产品,常年在Apple Store教育类,图书类排名前⼏,每⽇服务的⽤户也多达千万级别,狄涛⽼师说:“我们做的设计是⼀个体系,有灵魂的设计(产品思维),有感官温度的设计(体验为先),注重细节的设计(设计本质),这些是我们团队设计体系的基础构成,然后加以⽤户精准⼈分析,需求场景再现,数据论证验证,延伸触达共鸣,来不断的完善这个体系,打造成功的产品。”
汽油价百度EDUX团队的作品视频:
作品视频的展⽰很震撼,后续⼩编也会继续关注这个低调的设计团队哦,欢迎⼤家继续关注。
发布评论