最近在網盤里找到幾篇舊文，可能有些圖片已經是舊版的了，分析也比較淺顯。但是不重要，重要的是對我的啟發，同時也督促自己養成研究和總結的習慣~
選擇理由：新浪微博頁眉頁腳部分是經典的ios風格，在復雜的結構里也穿插著標簽式導航的變體等其他形式，還有復雜多樣的列表模式，在社交類APP里比較典型。
使用平臺：iphone7
1.首頁
1.1.頁眉
下圖（左圖）是新浪微博的首頁，頁眉是ios典型的導航欄，標題在中間，按鈕分布在左右兩邊，因為是首頁，不需要返回按鈕。微博在這里放置了一個叫做“好友關注動態”的頁面入口，用更多元的方式為用戶推薦好友。
1.2.頁腳
用的是舵式導航，置于中間突出位置的是發布按鈕，點擊后從底部飛出6個按鈕，用戶可以選擇需要的發布方式。而原來的發布按鈕“+”號，順時針旋轉變成了X號，點擊X號又逆時針變回“+”號，同時頁面回到動態列表。在這個用戶最順手的位置做了這樣的交互，方便用戶快速地在發布和瀏覽之間快速切換。這兩個行為方式在社交類APP里是最核心的行為。
1.3.內嵌式的搜索框
如上圖所示的首頁，有一個ios風格的內嵌式搜索框。剛進入首頁時候是沒有的，當頁面刷新或下拉之后就會出現。因為用戶無論是刷新或者下拉之后再返回，都是因為沒有找到或者錯過了自己想要的內容，這個時候提供搜索給用戶，可以讓用戶自己檢索想要的內容。
1.4.下拉框
左邊這個是經典的ios風格下拉框——帶小三角的圓角矩形。右邊這個做了一些改變：(1)當分組很多的時候，下拉框可以上下滾動，顯示更多的內容。如果用tab導航的話，由于分組的名字是由用戶起的，字段長度差異可能會比較大，會顯得比較凌亂，而且首頁的元素已經夠多了，再用tab導航的話內容區域就更小了。下拉框則可以在不需要時候收起，節約空間。(2)在下拉框的底部有一個“編輯我的分組”按鈕。這樣做的優點在于不需要頻繁地跳轉到另一個頁面，可以直接快速的切換分組，只有在要對分組進行編輯時，才會跳轉到新的頁面，在新的頁面用戶可以更專注于編輯分組，而不用擔心誤操作，畢竟下拉框空間有限，不方便直接編輯。再說回左圖，有個小問題，就是圖標用了雷達的圖標。用戶點開會發現除了雷達還有其他的2個功能，所以用雷達的圖標代表所有的功能會有歧義，它正確的意思不是“雷達”而是“雷達等功能”。不喜歡用“雷達”的用戶，也會比較難發現“掃一掃”和“打車”的功能。（現在最新版本的微博里右上角只有“掃一掃”和“打車”，并且默認顯示掃一掃這個比較常用的功能）
1.5.刷新方式
微博中，下拉刷新和頁面加載用的都是這樣的菊花形加載，這種加載方式只表示狀態，沒有進度顯示，如果用戶長時間的等待的話，會感到不耐煩，不知何時才會加載完。但下拉刷新和頁面加載都屬于短時間的加載。在網絡正常的情況下幾秒之內就能完成加載。所以不需要顯示進度，只需讓用戶明白正在加載即可。
1.6.微博列表
微博的列表從整體的結構來說是以垂直列表為主，穿插著小圖輪播式的“好友關注”和“相關文章”。但是往細了說，根據微博內容的不同，呈現的結構也稍有區別，這些設計模式同樣也出現在其他社交類應用里：
1）純文字微博
下圖左圖這是一個標準的列表單元格，但是在微博里不常見，因為在快節奏的讀圖時代比較沒有吸引力。但是從它可以看出微博的基本結構：如下圖右圖所示，由于大多數中國網民的閱讀習慣是從上到下，從左到右，所以左上是最重要的地方，放置用戶頭像。這是社交APP，發布者還是比較重要的。頭像右側是用戶名，如果有VIP之類的身份標識的話，會顯示在用戶名后。下面是小字顯示的發布時間和發布客戶端，用來顯示發布當時的狀態。再往下是內容正文區，這部分面積最大，微博的話最多可顯示7行，超過的話用“全文”來收納超出的內容，點開可以進詳情頁看全文。最下方是互動操作區，用戶從上到下瀏覽完后就可以選擇互動的方式——轉載或評論或點個贊，它放置在這里也是因瀏覽順序而決定的，用戶不可能光看到誰發的就去評論。但這三個要比其他的互動方式要重要，因為作為一個社交類的APP，它需要引導用戶去互動、發布。而右上角的向下小箭頭里收納的是對該用戶或正文的一些其他操作，如收藏、舉報等個人角度的操作。從使用頻率和業務需求的角度來說，都弱于底下的三個互動操作，因此將它們收納起來，用戶需要時可以自己去展開。
除此以外微博還有很多類型的單元格，都是在文字后插入其他的內容，例如圖片、視頻、鏈接等。
2）圖片微博
文字后插入圖片的形式是微博乃至大部分的社交APP里最常見的一種模式。如下圖所示的是插有圖片的微博。根據圖片的數量不同，布局上會有些變化。只有一張圖片時，按實際比例展示成縮略圖，優點是展示出圖片最真實的比例效果，缺點是當圖片是豎圖的時候布局不是特別好看。圖片大于一張時會變成網格的布局，優點是在有限的空間里羅列盡可能多的內容，尺寸統一的方形圖片和較小的間距，看起來比較有品質。有些愛玩的網友會利用這個特點進行自定義的設計，例如把9張局部的圖拼成一張大圖，更有趣味性和視覺沖擊力。
值得一提的是，當圖片為4張時，正好形成一個四宮格。這樣就不會導致第二行只有一張圖片了。不過在有些app里還做了更好的處理，就是把4宮格單張縮略圖的尺寸比9宮格的單張尺寸做得略大一點。這樣排版上會看起來更飽滿。
3）視頻微博
除了圖片以外，插入視頻也是非常常見的一種模式。如下圖左圖所示，微博的視頻用一個相同的大圖比例呈現，圖片上會有一個播放按鈕。但其實當視頻拖動到頁面中間時，視頻會自動以無聲的方式播放并顯示進度。優點是可以讓用戶實時地看到視頻內容，比較生動。
4）文章微博
上圖右圖所示的是發布文章所生成的微博，會以一張較大的封面圖加上一行標題（圖下方）的形式呈現。這種形式在一些電商的社區也是常常會看到，例如淘寶微淘里的“熱文”。單張大圖以統一的比例呈現，與單圖微博（左上圖）不同的是，它更有感染力，看起來更有檔次，讓人產生一種內容很專業的感覺。因為在信息量如此之大的微博（包括其他社區），用戶往往是匆匆的瀏覽，如果不增強感染力，很難讓用戶駐足，甚至去瀏覽較長的內容。標題都在圖片之下，可見圖片才是吸引用戶的首要元素。不過微博這里的設計，標題的存在感似乎太弱了一些。和圖片的整體性有點欠缺，這樣容易讓用戶產生只有一張大圖的錯覺而錯過文章。
5）其他鏈接
除了以上所述的幾種主流的單元格模式以外，有些微博在文末也會插入如下圖所示的其他鏈接，可以是文章，也可以是商品、音樂等其他內容。以圖片+標題等內容的形式呈現。比起純文字來更生動，還可以知道鏈接的屬性，例如音樂的話上面會有一個播放的圖標之類的，缺點是感染力不夠，優點是不會占太多空間，在有限的空間里給用途提供足夠多的信息。
6）小圖輪播的推薦列表
下圖是微信的好友關注，其實不止是好友關注，還有推薦的文章等，都會以這種形式穿插在微博列表里，目的是向用戶推薦好友或文章，以促進活躍度及強化社交。同時又不能影響用戶正常瀏覽微博，所以用這種形式可以在有限的空間里推薦足夠多的好友或文章，或其他信息給用戶。缺點是在用戶快速瀏覽時容易忽略。
2.“消息”和“我”——垂直列表
1）下圖左圖是微博一級導航下的第二個tab——消息。同首頁一樣，標準的ios風格導航欄和內嵌式搜索，一進來的時候搜索是隱藏的，下拉才會顯示。
頁面內是標準的垂直列表。這種形式的優點是簡潔清晰，冷靜高效。用戶到這里來往往是主動尋找一些內容，不像在首頁常常是瀏覽的。所以這里不需要像首頁那么復雜詳細的列表，只需要簡潔清晰的列表即可。根據用戶從左至右、從上至下的閱讀習慣，左邊一排呈現的是圖標或頭像，用戶可以一目了然。而“@我的”、“評論”、“贊”三個核心的社交功能圖標置頂，之后的內容按時間由近及遠排序，讓用戶可以隨時見到最新的消息。
上圖消息列表有2種單元格。一種是帶箭頭的二級列表，進去以后是子列表。這種形式的列表缺點是中間空白太多，有點浪費空間，而且不適用于層級太深，容易造成用戶的厭倦。所以微博在這里只用作二級列表，再進去就是最后一層列表——微博列表，層級很淺。
另一種是沒有箭頭的列表，進去以后是對話框列表。優點是顯示了一部分內容信息，用戶可以快速的做出判斷是否有興趣查看，提高了使用效率。根據ios的操作習慣，左滑可以進行刪除。缺點是呈現的內容太多不能再放置其他操作，比如箭頭、控件等。所以這種形式最適合用于這種消息列表。
2）上圖（右圖）是“我”的界面。“我”與“消息”的界面一樣，是一個標準的垂直列表頁。由于這里只是功能的陳列，不像消息列表所要顯示時間等信息，所以這里每個單元格的高度都不高，剛剛好容納一行標題。“新的好友”、“我的相冊”、“草稿箱”這些原始的功能層級都不深，而“微博錢包”、“微博運動”、“粉絲服務”、“粉絲頭條”這些擴展的功能進去以后都是一個獨立功能的首頁。所以這里的內容層級都比較淺，適合這種帶箭頭的列表，可以直達目標頁面；四個擴展功能后面還有灰色的小字用來引導用戶；根據具體頁面的類型還進行了分隔。所以整個頁面看起來簡潔清晰，冷靜高效。
最后，這兩個頁面時都有一個共通的缺點，就是只有標題的單元格和有補充信息的單元格放在一起，布局上疏密明顯，只有標題的單元格看起來很單薄，標題右邊空蕩蕩的。而與其他信息的單元格對比之下就覺得密密麻麻的。
3.發現
3.1.頁面內的標簽式導航與分段導航的切換
下圖（左起第一張）是微博的“發現”頁面。頭部是ios經典的導航欄搜索。下面是輪播banner，這里用了輪播是為了在有限的空間里多呈現一些廣告內容。再往下有兩行入口圖標，然后是微博列表。
微博列表模塊的開頭部分有個導航標簽式的導航。如果頁面上滑到了微博列表頭部的位置，或者點擊某個標簽，這條標簽式導航就會吸到頁面頂部，變成標簽式導航樣式的分段式導航，見縫插針插進了導航欄。這是因為每個標簽下面的內容信息量很大，還要分出第二層級，也就是吸到頂部以后
該導航下面出現的一行標簽(見右圖)。但是分段式導航的標簽不宜太多，最好2-3個，微博用了4個，但所幸都是2個字的，看起來不算太擁擠，因為還有返回按鈕，如果太擁擠的話，第一個標簽離返回太近也會有歧議。布局上也會顯得頭部太重。
3.2.滾動式標簽和“更多”
如右上圖所示，“熱門”、“榜單”、“視頻”這三個板塊都是微博內容，標簽多于5個，所以做成了滾動式標簽。
這個設計的優點在于靈活的運用了標簽式導航的變化，讓用戶在沒有明顯的跳轉的情況下，順利的切換，不影響用戶閱讀的同時，承載了更大的內容量。缺點在于標簽不宜太多，例如“熱門”下的標簽
有三十多個，后面的標簽點擊率會很低。并且如果不是根據用戶的偏好進行排序的話，很有可能用戶并不喜歡前面的內容，而喜歡在最后面，但他未必知道后面會有，也未必有耐心瀏覽到最后。
而最后的“頭條”是用戶可以自己定制的新聞內容，所以只放了4個優先級最高的，最后一個“更多”點擊后進入“全部頻道”（見上圖右圖），可以調整優先級，或者選擇想去的頻道。與底部導航欄一樣的是，關閉按鈕還是在底部，這樣方便用戶快速地回到頭條頁面。缺點同樣也是標簽過多容易造成用戶的困惑。還有，不是在原標簽下直接展開的，而是滑出一個浮層，所以可能會有點跳出感。但比起滾動式標簽還是好一點，因為這種網格式布局的標簽列表，把每一個標簽都平等清晰的呈現給用戶，便于用戶快速的選擇，而不用反復操作滑動去找不確定是否會有的標簽。
4.標準的標簽式導航和“更多”
1）下圖是“我”里的“我的贊”。頁眉也是典型的ios風格。標題在中間，右邊是ios風格的“更多”（安卓是豎著的，之后分析安卓的app時候會有圖），左側是返回，并且帶有上一級的標簽，即“我”。這頁的標簽式導航是一個典型的標簽式導航，并且一直置頂。無論頁面如何滾動，它一直都在，用戶可以便捷的再不同類目之間切換。
2）點擊三個點的“更多”按鈕從底部浮現選項，可以選擇“刷新”或“返回首頁”。這里只有2項，其實也可以做成2個按鈕放在右上角。之所以這樣做，好處首先是給用戶更大的點擊空間，避免誤操作。還有就是頁眉的布局不至于太擠。缺點就是需要多點一步。并且在上面點擊后從底部浮出浮層的話用戶的操作幅度有點大。但這和首頁的下拉框是有區別的，下拉框主要是同級頁面間的切換或者功能的切換。而這里是顯示更多操作，所以也不適合用下拉框。
