在這篇文章裡，我想從遵守設計規範的角度，在三個平臺（iOS，安卓，web）各選一個最具有代表性的產品來詳細分析此產品的頁面結構和設計模式，並分析這樣設計的優缺點～
所選取的產品分別為小紅書（iOS端）、支付寶（Android端）以及百度千千音樂（Web端），本文分析的頁面主要包括三個產品的一級頁面，二級及以上頁面暫沒有涉及
一、iOS產品選擇——小紅書
小紅書 V6.27
1. 首頁
首頁 詳情
iOS端的小紅書的頁眉部分是下劃線式的標籤導航，用戶能夠輕鬆進行點擊操作，進行不同子界面快速切換（1）
iOS端的小紅書也用到了iOS的經典搜索欄控件，給用戶提供了搜索的接口
首頁部分採用了瀑布流式的網格列表佈局，能同時顯示大量圖片、提升界面的內容魅力（2）
iOS端的小紅書底部是舵式標籤導航，標籤欄讓用戶在不同的界面和模式中進行切換（3）
2. 商城頁
商城頁 詳情
商城頁也集合了搜索框，便於用戶進行商品的搜索
商城頁的第一部分是輪播面板，使得用戶可以瀏覽體驗式推薦的產品，並且也給商品帶來了很好的宣傳（1）
商城頁的第二部分採用了模塊化的佈局，每個模塊下都採用宮格式的列表，羅列出活動包含的代表商品，並加上數據給予用戶明顯的優惠力度（2）
商城頁 詳情
當商城頁往下拖動時，界面上的下劃線標籤欄將會一直固定在頁眉位置，用戶能夠輕鬆進行點擊操作，進行不同子類型商品界面快速切換（1）
商城頁的主體部分為商品信息的網格列表，集合了圖片與價格等數據，能同時顯示大量圖片、提升界面魅力，能充分利用界面，並在有限空間內羅列大量商品信息（2）
3. 消息頁
消息頁 詳情
消息頁的第一部分為三個並列的宮格模塊，分別鏈接著三個不同的常用功能模塊，能夠充分的利用好頂部的區域，使得功能得以扁平化（1）
消息頁的主體部分消息垂直列表，給人以一種冷靜、清晰的感覺，簡單清晰、易於理解、冷靜高效、快速定位，並沒有顯示全部的消息內容，而是給予用戶收到消息的前半部分，方便用戶知道所收消息的整體狀況，也方便用戶的查看（2）
4. 個人頁
個人頁 詳情
個人頁中也包含著標籤式導航欄，將與用戶自身相關的信息進行劃分分類別，用戶通過點擊能夠輕鬆進行切換頁面工作（1）
個人頁中也整合了自己所發佈的圖文信息，採取網格列表的分佈方式，能同時顯示大量圖片、提升界面魅力，並且能充分利用界面（2）
二、Android產品選擇——支付寶
支付寶 V10.1
1. 首頁
首頁 詳情
Android端支付寶首頁的頂部是四個功能的宮格icon，鏈接至基本的功能頁面，提高了界面利用率與便捷度（1）
首頁第二部分也是由圖標組成的宮格列表，鏈接至不同的功能模塊，將功能扁平化，充分利用了整個界面（2）
首頁惠支付部分採用的也是模塊化的佈局，模塊內部是獨立的垂直列表，緊扣惠支付的主題（3）
Android端支付寶底部是底部佈局的標籤導航，標籤欄讓用戶在不同的界面和模式中進行切換（4）
首頁 詳情
當首頁頁面下滑時，第一部分的四個宮格icon以及搜索欄等會固定在頁面頂部，面積會相應地進行縮小，但是仍然能起到類似導航的作用（1）
首頁生活服務部分類似於惠支付部分，採用的也是模塊化的佈局，模塊內部是獨立的垂直列表加小圖的形式，緊扣生活服務的主題（2）
首頁的每日必搶部分採用的是宮格列表的排列方式，功能扁平化，顯示了每日優惠的商品信息，直觀且充分利用了頁面（3）
2. 財富頁
財富頁 詳情
財富頁的頂部也有一排由icon組成的導航，類似於標籤式導航欄，鏈接至相應的頁面，並且能清晰地告訴用戶此頁面下包含了哪些關於“財富”的項目（1）
財富頁的財富直通車部分採用了輪播面板的列表方式，橫向滑動，通過大圖為用戶推薦了豐富多彩的理財活動，吸引用戶的眼球（2）
財富頁的穩健理財部分是由多個網格列表組成的數據信息展示，向用戶詳細地展示了理財的收益數據，從而起到刺激消費的作用（3）
3. 口碑頁
口碑頁 詳情
口碑頁的上部分是由不同的類別icon組成的宮格，鏈接至不同的二級功能頁面，充分利用整個界面（1）
口碑頁的下一個部分是由不同模塊組成的活動及榜單跳轉部分，加上炫彩的圖片顯示，能夠強烈地吸引用戶的眼球，並且通過下方三個標籤模塊，也能給用戶起到導航作用（2）
口碑頁也包含著標籤導航，這個標籤導航更像是宮格列表，導航控件佔據面積較大，能夠輕鬆進行點擊操作，進行功能間快速切換（3）
口碑頁 詳情
口碑頁下拉後，頁面內的標籤導航會固定住界面頂部形成頂部滾動式標籤導航，方便用戶進行切換分類（1）
口碑頁的下一個部分是直播間專屬秒殺，是直接一張大圖顯示，點擊會自動跳轉至直播界面，這樣佈局的目的是為了吸引用戶點擊，推測口碑直播也是目前商家主推的一項活動方式（2）
口碑頁後半部分是口碑商品的介紹頁，大體是採用的垂直列表進行排列整理，列表內部也有多張圖片組成的網格，既簡單清晰，又形象地描繪了商品的信息（3）
4. 朋友頁
朋友頁 詳情
朋友頁的上半部分也是由一排由icon組成的導航，類似於標籤式導航欄，鏈接至相應的二級模塊，這些icon的佔比面積較大，緊扣生活與社交兩大主題（1）
朋友頁中的後半部分是消息列表，消息列表採用了垂直列表的佈局方式，簡單清晰，方便用戶知道所收消息的整體狀況，也方便用戶的查看，做到了條目詳細程度與頁面展示條目數量之間的平衡（2）
5. 個人頁
個人頁 詳情
個人頁的上半部分個人信息的展示，以及會員系統，個人信息展示表現為一條橫向列表，列表包含著用戶的頭像以及用戶的姓名、暱稱及綁定手機號（1）
個人頁的後半部分是由垂直列表組成的功能模塊，其中部分功能模塊在之前幾個頁面也出現過，此處對其進行了二次集成，易於理解、冷靜高效、快速定位（2）
千千靜聽
頁面詳情
Web端的千千靜聽的頂部是標籤導航欄與搜索欄及用戶頭像信息，鏈接著不同的板塊頁面（1）
第二行也是一個標籤導航欄，點擊不同的標籤會顯示不同的音樂動態信息，用戶能夠輕鬆進行點擊操作，進行模塊的間快速切換（2）
熱門歌單模塊採用了網格列表的模式，大圖羅列了推薦的歌單封面，給用戶一種直觀的感受，並且也能充分利用界面（3）
頁面詳情
分類聽歌模塊是將不同的標籤按照網格排列的方式進行分佈，通過這些文字，用戶能直觀地進行類別歌曲類別選擇（1）
推薦電臺模塊則是採用了宮格列表，將多個icon結合文字進行排列，模塊的區域被充分利用起來，直觀形象（2）
頁面詳情
宣傳板塊採用了輪播圖的形式，橫向滑動，通過大圖為用戶推薦了音樂作品與平臺活動，吸引用戶的眼球（1）
新歌首發板塊採用了網格列表的佈局形式，圖片統一裁剪為專輯的方形，排排羅列，給用戶一種整齊感，但相較歌單模塊而言，此版塊佔比較小（2）
頁面詳情
排行版模塊含有三個子模塊，且每一個模塊包含有一個垂直列表，此列表按照一定的算法順序記錄排序著歌曲，且每一個列表包含著歌曲圖片等相關信息，在冷靜清晰中告知用戶時下流行相關（1）
頁面詳情
熱門歌手模塊採用了網格列表的佈局形式，圖片統一裁剪為頭像的圓形，排排羅列，給用戶一種整齊感，用戶可以點擊相應歌手的頭像跳轉至相應的歌手作品頁面（1）
精選MV模塊採用的也是網格列表佈局的形式，所選圖片風格統一，排列整齊，同時與歌名相對，簡單明瞭（2）
頁面詳情
熱門活動模塊採用的也是網格列表佈局的形式，所選圖片風格統一，排列整齊，同時與活動名相對應，簡單明瞭（1）
網頁說明模塊也分為三個子模塊，每個模塊都採用網格排列的方式，充分利用了有限的界面，提供了客戶端的下載，同時也顯示了網站的相關信息（2）
四、思考與總結
對於移動APP而言，iOS與Android的整體設計趨於一致，有些iOS的基本控件也能在Android端見到，同樣地，有些Android的基本控件也能在iOS端見到
對於移動APP而言，因為都是豎屏顯示的原因，所以基本上所有的一級頁面的排列都是從上而下的模塊化排布，從整體上看都是垂直列表排布；在每一個模塊內部都採用了不同的排列模式
對於一些功能化導航模塊，其內部的排列大多為宮格列表；對於一些消息模塊，其內部的排列大多為垂直列表
大部分社交性質的產品更多地注重圖片，所以在首頁等頁面排布時會採用大圖的網格列表；大部分偏功能性質的產品更多地注重產品功能的運用，所以在相關頁面排布時會採用icon的宮格列表導航模式
Web類產品相較移動端界面更大，所以在頁面佈局上留白會更多，標籤類導航也大多采用圖片的形式，也不侷限於從上而下的模塊化排布，相反，Web端的模塊排布更加的自由
完稿時間：2020年1月5日
閱讀更多 SlowStep 的文章
