在自己的实际工作中，有些项目是需要在短时间内产出设计方案供客户选择的，我们经常是几个设计师一起出方案，也就是比稿，待客户选择喜欢的方案后（布局与大的视觉感受），再深入细化设计方案。
为了助力自己能快速产出不错的设计方案，想通过平时对不同的app首页框架、风格进行研究，让自己的大脑储备大量的不同类型app首页布局结构（框架层）与设计风格（视觉层），让自己拥有一个“魔法口袋”，以后在出方案的时候希望自己能够从平时积累的“资源库”里获取源源不断的灵感，高效产出让客户满意的方案。
给自己列了一个行动清单，希望在今年完成至少20个app的研究，希望大家可以监督我呀，有想一起组队打卡学习的，也可以一起（后台回复 一起学习 ），我们一起学习呀～～～
第一个研究的app是腾讯动漫，把自己分析的一些设计要点分享给大家，由于每个人手机分辨率、以及设计经验的不同，另外app的开发效果也没有办法做到100%还原设计稿，所以我的分析也仅供大家学习参考，也欢迎大家一起交流呀。
腾讯动漫
腾讯动漫app是腾讯针对爱看漫画的年轻用户群体倾力打造的漫画阅读平台。腾讯动漫app是95、00后最爱的漫画平台。通过对腾讯动漫app的了解，我们可以猜想到因为是阅读类产品，app首页以漫画封面展示为主，腾讯动漫的整体视觉也是比较年轻化的。
一、基础布局
分析app时，首先会分析它的基础布局，也就是页边距与最小原子单位。通过分析发现腾讯动漫app发现其网格系统如下（1倍图下，375*667画板）：
页边距：16px
最小原子单位：8px；
列数：6；
在1倍图下，会出现奇数的情况，但都没有关系，我们只要记住我们的计算关系就行了。比如1排2卡片，中间卡片间的距离为9px，那是因为［375（画板大小）－16*2（页边距）-8（卡片间距离）］／2=167.5，取整后为167，卡片间的间距就不为8了，为9了。
二、版式
通过对腾讯动漫首页（包括首屏与向下滑动的所有页面）进行截屏分析，腾讯动漫由于它的分类与内容特别多，导致首页特别特别长，但是通过分析发现，腾讯动漫的首页布局是有大量重复样式的，能提高设计师的设计效率，同时版式的交替排列也能让用户感知到样式的变化不易产生视觉疲劳。
腾讯动漫app首页主要是由四种版式构成的：
第一种：1排2卡片
核心的一排2卡片布局主要是4个卡片一组，图片为竖长型。
一、基础布局
分析app时，首先会分析它的基础布局，也就是页边距与最小原子单位。通过分析发现腾讯动漫app发现其网格系统如下（1倍图下，375*667画板）：
页边距：16px
最小原子单位：8px；
列数：6；
在1倍图下，会出现奇数的情况，但都没有关系，我们只要记住我们的计算关系就行了。比如1排2卡片，中间卡片间的距离为9px，那是因为［375（画板大小）－16*2（页边距）-8（卡片间距离）］／2=167.5，取整后为167，卡片间的间距就不为8了，为9了。
二、版式
通过对腾讯动漫首页（包括首屏与向下滑动的所有页面）进行截屏分析，腾讯动漫由于它的分类与内容特别多，导致首页特别特别长，但是通过分析发现，腾讯动漫的首页布局是有大量重复样式的，能提高设计师的设计效率，同时版式的交替排列也能让用户感知到样式的变化不易产生视觉疲劳。
腾讯动漫app首页主要是由四种版式构成的：
第一种：1排2卡片
核心的一排2卡片布局主要是4个卡片一组，图片为竖长型。
▵1排2卡片主要框架
这种样式被应用到了很多模块，值得注意的是有的模块会有轻微改动，主要是图片比例与文案形式的变化，后面会具体讲解。
▵1排2卡片其它框架
第二种：1排3
核心的1排3，主要是6个卡片一组；次要是是3个卡片一组搭配一个大卡片使用。
第三种：突出强化模块
此模块内容会更加突出，被应用在分类模块、排行榜模块，让内容更聚合，节约空间显示更多的内容，同时也起着导流的作用。
第四种：列表式1排1卡片
左图右文的形式。图片与文案保持居中对齐。
三、图片比例
在图片大小的设置上，很多设计师都会凭感觉去设置，或者只要保持是偶数就行。其实在大厂的设计中，会让图片保持几种常用的比例，比如1:1、1:1.414（白银比例）、3:2、1:1.618（黄金比例）等。
给大家推荐一个黄金比例在线计算网站，一个计算金属比例的工具，包括黄金比（Golden Ratio）、白银比例（Silver Ratio）、铂金比例（Platinum Ratio）、青铜比例（Bronze Ratio）。可以选择不同等比例，快速帮你计算出数值，让你的图片比例瞬间高大上起来！
https://www.shejidaren.com/examples/tools/golden-ratio/index.html
通过分析发现，在腾讯漫画中图片比例有以下几种：
1:1
1:1比例的图片一般都是突出主体物、突出细节的。在腾讯动漫中我们可以发现1:1的图片都是画面局部放大、突出局部细节。
▵注：我是375x667画布下分析的
1:1.414（白银比例）
首页banner图片比例为白银比例。有的小伙伴可能会纳闷我量下来banner的大小是375*329。这不是白银比例呀！！！那是因为现腾讯动漫banner采用了沉浸式形式，占据了顶部状态栏与操作栏的高度，如果减去这两部分329-20-44=265px，那么375:265＝1:1.414就是白银比例啦。我们可以多去揣测、分析腾讯动漫的设计师在做这一部分的时候是怎么去设置这些参数的。
▵有的朋友会说自己数学不好，利用这个在线黄金比例计算神器就可以啦。
3:4
这里的图片横向长度是由页边距、卡片间距、卡片个数决定的；纵向高度是由横向高度决定的。以1排3卡片为例，图片横向高度为［375（画板大小）－16*2（页边距）－8*2（卡片间距）］／3（卡片高度）＝109；有了纵向高度后，我们按照3:4的比例就可以计算出纵向高度了。3:4图片在腾讯动漫app中主要用来放场景类、全身类的图片，不需要突出细节，而是展现更多的内容。
除了1排3卡片用了3:4比例，突出强化模块的图片也用了此比例。保持了这种竖长图使用同一比例。
四、间距规则
我自己觉得间距规则是最难分析的。因为有可能设计师在设计时没有完全按照某种倍数关系来，而是按照他常用的经验数值，另外就是开发还原度的问题，因为开发设置的高度大小与设计大小有一定的差别，比如padding、margin，不可能做到100%还原，所以这里对于间距规则的分析，我主要保留了常出现的一些数值。也欢迎大家赐教呀～
这四个间距对于纵向间距已经够用了，因为我们在设计中需要用到的差不多就是这几种间距。模块与模块之间(L)、模块内部元素之间（M）、组内图片与文案间距（S）、最小间距（XS）
视觉分析
因为腾讯动漫是针对喜欢看漫画的95后、00后群体，视觉风格比较年轻化，喜欢漫画的二次元用户多，这类用户群体都很可爱、单纯，腾讯动漫整个的视觉元素也是采用比较圆润可爱的图形。
一、图标
一款App的图标是最能代表此app气质的。用户能直观的感受到此app的风格走向。腾讯动漫app的图片是采用线性图标，1.5px的圆润线条，给人可爱、俏皮的感觉。腾讯动漫个人中心页面的图标在线型图标的基础上加入修饰线的橙色小色块，更加体现了可爱、俏皮的感觉。另外tab栏处图标的切换有微动效，带给用户乐趣与惊喜。
二、沉浸式banner处理
腾讯动漫banner的处理我觉得是比较有特色的，画面一般分为前中后三层，图片主要元素在白银比例的框架里，拥有很好的视觉感受，沉浸式体验，更能吸引用户。
三、保持图片视觉重量一致
腾讯动漫app主要以图片展示为主，然而这么多的图片、多种比例的图片并没有让我们觉得整个界面看起来很乱。有一个技巧就是保持图片的视觉重量一致。
写在最后的话
在学习腾讯动漫app首页时，我会不断去揣摩原设计师的设计思路，觉得是一件有趣且有挑战性的事情，在揣摩、验证出答案后自己会很有成就感，而且印象深刻，在工作项目自己才更有机会去真正使用这些设计。
我将自己学到的知识点与大家分享，希望大家也能从中学到一些有用的知识点，可能有的地方不一定对，欢迎指教，希望大家可以多多交流呀。好的设计永远不是光看就会的，还需要我们多临摹、多扒别人的设计稿，学习优秀设计师的设计思维，转化为自己的～这才是最重要的。愿大家一起做个“眼高手高”的设计师哈哈哈～
网友评论