為了幫助我快速制作出壹個好的設計方案，我想在平時研究不同app首頁的框架和風格，讓大腦儲備大量不同類型的app首頁布局結構(框架層)和設計風格(視覺層)，讓自己有壹個“魔法口袋”，希望在做方案的時候能從平時積累的“資源庫”中獲得源源不斷的靈感，高效地制作出讓客戶滿意的方案。
我給自己列了壹個行動清單。我希望今年完成至少20個應用的研究。希望大家監督我。想團隊合作的也可以壹起學習(後臺回復)。壹起學習吧~ ~ ~
第壹個研究的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。
第二，格式
通過對騰訊動漫首頁(包括首屏和所有向下滑動的頁面)的截屏分析，發現騰訊動漫的首頁因為分類和內容特殊，所以特別長。但通過分析發現，騰訊動漫的首頁布局存在大量重復的風格，可以提高設計師的設計效率，同時布局的交替排列也可以讓用戶感覺到風格的變化不容易產生視覺疲勞。
騰訊動漫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。
第二，格式
通過對騰訊動漫首頁(包括首屏和所有向下滑動的頁面)的截屏分析，發現騰訊動漫的首頁因為分類和內容特殊，所以特別長。但通過分析發現，騰訊動漫的首頁布局存在大量重復的風格，可以提高設計師的設計效率，同時布局的交替排列也可以讓用戶感覺到風格的變化不容易產生視覺疲勞。
騰訊動漫app的首頁主要由四種格式組成:
第壹種:1排2卡
壹排2張牌的核心布局主要是壹組4張牌，畫面是豎排的。
這種風格已經應用到了很多模塊中，值得註意的是有些模塊會稍有改動，主要是圖片比例和文案形式的變化，後面會詳細講解。
類型二:1第3行
核心1排3，主要是壹組6張牌；其次，壹組3張牌搭配壹張大牌使用。
第三種:突出強化模塊。
這個模塊的內容會更加突出，應用到分類模塊和排行榜模塊，讓內容更加聚合，節省空間，展示更多內容，也起到了導流的作用。
第四種:列表型1行1卡。
左圖右文的形式。將圖片放在副本的中間。
第三，圖片比例
在圖片大小的設定上，很多設計師會憑感覺來設定，或者只是保持均勻。其實在大廠的設計中，會保留幾個常用的刻度，比如1:1:1.414(銀比)，3:2，1: 1.665438+。
我推薦壹個計算黃金比例的在線網站，壹個計算金屬比例的工具，包括黃金比例，白銀比例，鉑金比例，青銅比例。可以選擇不同的等比例，快速幫妳計算數值，讓妳的圖片比例瞬間高起來！
/examples/tools/golden-ratio/index . html
通過分析發現，騰訊漫畫中的圖片比例如下:
1:1
比例為1:1的圖片壹般會突出主體和細節。在騰訊動漫中，我們可以發現1:1的圖片都是放大的，突出局部細節。
1:1.414(銀比)
主頁上的橫幅圖片是銀色的。有些朋友可能會疑惑，我測的banner尺寸是375*329。這不是銀比！！！那是因為騰訊的動畫橫幅采用了沈浸式的形式，占據了頂部狀態欄和操作欄的高度。如果用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的比例，突出增強模塊的圖片也使用這個比例。此垂直圖和垂直圖保持相同的比例。
第四，間距規則
我個人認為間距規則是最難分析的。因為有可能設計者在設計的時候沒有完全遵循某個倍數關系，而是遵循了他平時的經驗值，另外就是開發還原的問題。因為開發設置的高度和設計尺寸不壹樣，比如填充、邊距等，不可能做到100%的縮減，所以我這裏主要保留壹些常用值，用於間距規則的分析。也歡迎大家給我們提意見~
這四個間距對於縱向間距來說已經足夠了，因為這些間距幾乎是我們在設計中需要用到的。模塊到模塊(L)、模塊內部元素(M)、組圖片和副本間距(S)、最小間距(XS)
視覺分析
因為騰訊動漫針對的是喜歡看漫畫的95後、00後群體，視覺風格比較年輕，喜歡漫畫的二次元用戶也比較多。這些用戶群體可愛而簡單，騰訊動漫的整個視覺元素也是圓潤可愛的圖形。
壹.圖標
壹個app的圖標最能代表這個App的氣質。用戶可以直觀感受到這款app的風格走向。騰訊動漫app的圖片都是1.5px的線條圓潤的線性圖標，給人壹種可愛俏皮的感覺。騰訊動漫個人中心頁面的圖標在線性圖標的基礎上，增加了線條裝飾的橙色小色塊，進壹步體現了可愛俏皮的感覺。此外，標簽欄中圖標的切換具有微動效果，給用戶帶來樂趣和驚喜。
第二，浸入式橫幅處理
我覺得騰訊動漫banner的處理還是挺有特色的。畫面壹般分為前中後三層。畫面主要元素在銀色比例的框架內，有很好的視覺體驗和沈浸式體驗，對用戶更有吸引力。
第三，保持畫面的視覺重量壹致
騰訊動漫app主要展示圖片。但是這麽多的圖片，各種比例的圖片，並沒有讓我們覺得整個界面看起來很亂。壹個技巧是保持圖片的視覺重量壹致。
寫在句子的末尾
在研究騰訊動漫app首頁的時候，我會不斷揣摩原設計師的設計思路，我覺得很有意思，也很有挑戰性。在揣摩和驗證答案之後，我會很有成就感，會被打動，會有更好的機會在工作項目中真正用到這些設計。
我會把我學到的知識分享給妳。希望妳也能從中學習到壹些有用的知識。有些地方可能不對。請給我妳的建議。希望大家多多交流。好的設計永遠不是光看就能做到的，還需要我們去復制、抄襲別人的設計稿，借鑒優秀設計師的設計思維，並轉化為自己的~這才是最重要的。希望大家壹起做壹個“高大上”的設計師，哈哈哈~