最近在網(wǎng)盤里找到幾篇舊文疚沐，可能有些圖片已經(jīng)是舊版的了暂氯，分析也比較淺顯。但是不重要亮蛔，重要的是對我的啟發(fā)痴施，同時也督促自己養(yǎng)成研究和總結(jié)的習慣~
選擇理由：新浪微博頁眉頁腳部分是經(jīng)典的ios風格，在復雜的結(jié)構(gòu)里也穿插著標簽式導航的變體等其他形式，還有復雜多樣的列表模式辣吃，在社交類APP里比較典型锉矢。
使用平臺：iphone7
1.首頁
1.1.頁眉
下圖（左圖）是新浪微博的首頁，頁眉是ios典型的導航欄齿尽，標題在中間沽损，按鈕分布在左右兩邊，因為是首頁循头，不需要返回按鈕绵估。微博在這里放置了一個叫做“好友關注動態(tài)”的頁面入口，用更多元的方式為用戶推薦好友卡骂。
1.2.頁腳
用的是舵式導航国裳，置于中間突出位置的是發(fā)布按鈕，點擊后從底部飛出6個按鈕全跨，用戶可以選擇需要的發(fā)布方式缝左。而原來的發(fā)布按鈕“+”號，順時針旋轉(zhuǎn)變成了X號浓若，點擊X號又逆時針變回“+”號渺杉，同時頁面回到動態(tài)列表。在這個用戶最順手的位置做了這樣的交互挪钓，方便用戶快速地在發(fā)布和瀏覽之間快速切換是越。這兩個行為方式在社交類APP里是最核心的行為。
1.3.內(nèi)嵌式的搜索框
如上圖所示的首頁碌上，有一個ios風格的內(nèi)嵌式搜索框倚评。剛進入首頁時候是沒有的，當頁面刷新或下拉之后就會出現(xiàn)馏予。因為用戶無論是刷新或者下拉之后再返回天梧，都是因為沒有找到或者錯過了自己想要的內(nèi)容，這個時候提供搜索給用戶霞丧，可以讓用戶自己檢索想要的內(nèi)容呢岗。
1.4.下拉框
左邊這個是經(jīng)典的ios風格下拉框——帶小三角的圓角矩形。右邊這個做了一些改變：(1)當分組很多的時候蚯妇，下拉框可以上下滾動敷燎，顯示更多的內(nèi)容。如果用tab導航的話箩言，由于分組的名字是由用戶起的硬贯，字段長度差異可能會比較大，會顯得比較凌亂陨收，而且首頁的元素已經(jīng)夠多了饭豹，再用tab導航的話內(nèi)容區(qū)域就更小了鸵赖。下拉框則可以在不需要時候收起，節(jié)約空間拄衰。(2)在下拉框的底部有一個“編輯我的分組”按鈕它褪。這樣做的優(yōu)點在于不需要頻繁地跳轉(zhuǎn)到另一個頁面，可以直接快速的切換分組翘悉，只有在要對分組進行編輯時，才會跳轉(zhuǎn)到新的頁面妖混，在新的頁面用戶可以更專注于編輯分組，而不用擔心誤操作抬旺，畢竟下拉框空間有限，不方便直接編輯祥楣。再說回左圖，有個小問題误褪，就是圖標用了雷達的圖標。用戶點開會發(fā)現(xiàn)除了雷達還有其他的2個功能振坚，所以用雷達的圖標代表所有的功能會有歧義薇搁，它正確的意思不是“雷達”而是“雷達等功能”斋扰。不喜歡用“雷達”的用戶，也會比較難發(fā)現(xiàn)“掃一掃”和“打車”的功能屎鳍。（現(xiàn)在最新版本的微博里右上角只有“掃一掃”和“打車”问裕，并且默認顯示掃一掃這個比較常用的功能）
1.5.刷新方式
微博中粮宛，下拉刷新和頁面加載用的都是這樣的菊花形加載，這種加載方式只表示狀態(tài)忧饭，沒有進度顯示筷畦，如果用戶長時間的等待的話，會感到不耐煩吼砂，不知何時才會加載完渔肩。但下拉刷新和頁面加載都屬于短時間的加載。在網(wǎng)絡正常的情況下幾秒之內(nèi)就能完成加載女揭。所以不需要顯示進度栏饮，只需讓用戶明白正在加載即可袍嬉。
1.6.微博列表
微博的列表從整體的結(jié)構(gòu)來說是以垂直列表為主，穿插著小圖輪播式的“好友關注”和“相關文章”箍土。但是往細了說罐监，根據(jù)微博內(nèi)容的不同弓柱，呈現(xiàn)的結(jié)構(gòu)也稍有區(qū)別，這些設計模式同樣也出現(xiàn)在其他社交類應用里：
1）純文字微博
下圖左圖這是一個標準的列表單元格航罗，但是在微博里不常見屁药，因為在快節(jié)奏的讀圖時代比較沒有吸引力酿箭。但是從它可以看出微博的基本結(jié)構(gòu)：如下圖右圖所示，由于大多數(shù)中國網(wǎng)民的閱讀習慣是從上到下缔御，從左到右械巡，所以左上是最重要的地方，放置用戶頭像有勾。這是社交APP蔼卡，發(fā)布者還是比較重要的。頭像右側(cè)是用戶名荤懂，如果有VIP之類的身份標識的話节仿，會顯示在用戶名后掉蔬。下面是小字顯示的發(fā)布時間和發(fā)布客戶端，用來顯示發(fā)布當時的狀態(tài)箭启。再往下是內(nèi)容正文區(qū)傅寡，這部分面積最大北救，微博的話最多可顯示7行扭倾，超過的話用“全文”來收納超出的內(nèi)容，點開可以進詳情頁看全文。最下方是互動操作區(qū)唉堪，用戶從上到下瀏覽完后就可以選擇互動的方式——轉(zhuǎn)載或評論或點個贊唠亚，它放置在這里也是因瀏覽順序而決定的，用戶不可能光看到誰發(fā)的就去評論祟蚀。但這三個要比其他的互動方式要重要前酿，因為作為一個社交類的APP，它需要引導用戶去互動淹仑、發(fā)布肺孵。而右上角的向下小箭頭里收納的是對該用戶或正文的一些其他操作平窘，如收藏、舉報等個人角度的操作蓬坡。從使用頻率和業(yè)務需求的角度來說屑咳，都弱于底下的三個互動操作弊琴，因此將它們收納起來敲董，用戶需要時可以自己去展開。
除此以外微博還有很多類型的單元格聪铺，都是在文字后插入其他的內(nèi)容铃剔，例如圖片查刻、視頻穗泵、鏈接等。
2）圖片微博
文字后插入圖片的形式是微博乃至大部分的社交APP里最常見的一種模式现诀。如下圖所示的是插有圖片的微博。根據(jù)圖片的數(shù)量不同坐桩，布局上會有些變化撕攒。只有一張圖片時烘浦，按實際比例展示成縮略圖闷叉，優(yōu)點是展示出圖片最真實的比例效果，缺點是當圖片是豎圖的時候布局不是特別好看蚯瞧。圖片大于一張時會變成網(wǎng)格的布局埋合，優(yōu)點是在有限的空間里羅列盡可能多的內(nèi)容萄传，尺寸統(tǒng)一的方形圖片和較小的間距秀菱，看起來比較有品質(zhì)。有些愛玩的網(wǎng)友會利用這個特點進行自定義的設計赶么，例如把9張局部的圖拼成一張大圖辫呻，更有趣味性和視覺沖擊力洪规。
值得一提的是斩例，當圖片為4張時念赶，正好形成一個四宮格。這樣就不會導致第二行只有一張圖片了旗吁。不過在有些app里還做了更好的處理很钓，就是把4宮格單張縮略圖的尺寸比9宮格的單張尺寸做得略大一點董栽。這樣排版上會看起來更飽滿锭碳。
3）視頻微博
除了圖片以外，插入視頻也是非常常見的一種模式推汽。如下圖左圖所示歹撒，微博的視頻用一個相同的大圖比例呈現(xiàn)诊胞，圖片上會有一個播放按鈕厢钧。但其實當視頻拖動到頁面中間時，視頻會自動以無聲的方式播放并顯示進度寥假。優(yōu)點是可以讓用戶實時地看到視頻內(nèi)容糕韧，比較生動喻圃。
4）文章微博
上圖右圖所示的是發(fā)布文章所生成的微博斧拍，會以一張較大的封面圖加上一行標題（圖下方）的形式呈現(xiàn)。這種形式在一些電商的社區(qū)也是常常會看到予权，例如淘寶微淘里的“熱文”浪册。單張大圖以統(tǒng)一的比例呈現(xiàn)村象，與單圖微博（左上圖）不同的是厚者，它更有感染力，看起來更有檔次习绢，讓人產(chǎn)生一種內(nèi)容很專業(yè)的感覺蝙昙。因為在信息量如此之大的微博（包括其他社區(qū)）奇颠，用戶往往是匆匆的瀏覽烈拒，如果不增強感染力，很難讓用戶駐足吓妆，甚至去瀏覽較長的內(nèi)容行拢。標題都在圖片之下诞吱，可見圖片才是吸引用戶的首要元素房维。不過微博這里的設計咙俩，標題的存在感似乎太弱了一些。和圖片的整體性有點欠缺溅话，這樣容易讓用戶產(chǎn)生只有一張大圖的錯覺而錯過文章飞几。
5）其他鏈接
除了以上所述的幾種主流的單元格模式以外独撇，有些微博在文末也會插入如下圖所示的其他鏈接纷铣，可以是文章搜立，也可以是商品、音樂等其他內(nèi)容忧设。以圖片+標題等內(nèi)容的形式呈現(xiàn)址晕。比起純文字來更生動顿锰，還可以知道鏈接的屬性硼控，例如音樂的話上面會有一個播放的圖標之類的牢撼，缺點是感染力不夠，優(yōu)點是不會占太多空間牡直，在有限的空間里給用途提供足夠多的信息碰逸。
6）小圖輪播的推薦列表
下圖是微信的好友關注饵史，其實不止是好友關注胳喷，還有推薦的文章等，都會以這種形式穿插在微博列表里吠撮，目的是向用戶推薦好友或文章泥兰，以促進活躍度及強化社交题禀。同時又不能影響用戶正常瀏覽微博迈嘹，所以用這種形式可以在有限的空間里推薦足夠多的好友或文章秀仲，或其他信息給用戶啄育。缺點是在用戶快速瀏覽時容易忽略。
2.“消息”和“我”——垂直列表
1）下圖左圖是微博一級導航下的第二個tab——消息。同首頁一樣侯勉，標準的ios風格導航欄和內(nèi)嵌式搜索铝阐，一進來的時候搜索是隱藏的徘键，下拉才會顯示吹害。
頁面內(nèi)是標準的垂直列表。這種形式的優(yōu)點是簡潔清晰螺男，冷靜高效下隧。用戶到這里來往往是主動尋找一些內(nèi)容淆院，不像在首頁常常是瀏覽的迫筑。所以這里不需要像首頁那么復雜詳細的列表，只需要簡潔清晰的列表即可。根據(jù)用戶從左至右辕棚、從上至下的閱讀習慣逝嚎，左邊一排呈現(xiàn)的是圖標或頭像补君，用戶可以一目了然昧互。而“@我的”敞掘、“評論”玖雁、“贊”三個核心的社交功能圖標置頂赫冬，之后的內(nèi)容按時間由近及遠排序，讓用戶可以隨時見到最新的消息劲厌。
上圖消息列表有2種單元格膛薛。一種是帶箭頭的二級列表，進去以后是子列表脊僚。這種形式的列表缺點是中間空白太多相叁，有點浪費空間遵绰，而且不適用于層級太深，容易造成用戶的厭倦增淹。所以微博在這里只用作二級列表椿访，再進去就是最后一層列表——微博列表，層級很淺成玫。
另一種是沒有箭頭的列表，進去以后是對話框列表拳喻。優(yōu)點是顯示了一部分內(nèi)容信息哭当，用戶可以快速的做出判斷是否有興趣查看，提高了使用效率冗澈。根據(jù)ios的操作習慣钦勘，左滑可以進行刪除。缺點是呈現(xiàn)的內(nèi)容太多不能再放置其他操作亚亲，比如箭頭彻采、控件等。所以這種形式最適合用于這種消息列表捌归。
2）上圖（右圖）是“我”的界面肛响。“我”與“消息”的界面一樣惜索，是一個標準的垂直列表頁特笋。由于這里只是功能的陳列，不像消息列表所要顯示時間等信息巾兆，所以這里每個單元格的高度都不高猎物，剛剛好容納一行標題【始模“新的好友”霸奕、“我的相冊”、“草稿箱”這些原始的功能層級都不深吉拳，而“微博錢包”质帅、“微博運動”、“粉絲服務”留攒、“粉絲頭條”這些擴展的功能進去以后都是一個獨立功能的首頁煤惩。所以這里的內(nèi)容層級都比較淺，適合這種帶箭頭的列表炼邀，可以直達目標頁面魄揉；四個擴展功能后面還有灰色的小字用來引導用戶；根據(jù)具體頁面的類型還進行了分隔拭宁。所以整個頁面看起來簡潔清晰洛退，冷靜高效瓣俯。
最后，這兩個頁面時都有一個共通的缺點兵怯，就是只有標題的單元格和有補充信息的單元格放在一起彩匕，布局上疏密明顯，只有標題的單元格看起來很單薄媒区，標題右邊空蕩蕩的驼仪。而與其他信息的單元格對比之下就覺得密密麻麻的。
3.發(fā)現(xiàn)
3.1.頁面內(nèi)的標簽式導航與分段導航的切換
下圖（左起第一張）是微博的“發(fā)現(xiàn)”頁面袜漩。頭部是ios經(jīng)典的導航欄搜索绪爸。下面是輪播banner，這里用了輪播是為了在有限的空間里多呈現(xiàn)一些廣告內(nèi)容宙攻。再往下有兩行入口圖標奠货，然后是微博列表。
微博列表模塊的開頭部分有個導航標簽式的導航粘优。如果頁面上滑到了微博列表頭部的位置仇味，或者點擊某個標簽，這條標簽式導航就會吸到頁面頂部雹顺，變成標簽式導航樣式的分段式導航，見縫插針插進了導航欄廊遍。這是因為每個標簽下面的內(nèi)容信息量很大嬉愧，還要分出第二層級，也就是吸到頂部以后
該導航下面出現(xiàn)的一行標簽(見右圖)喉前。但是分段式導航的標簽不宜太多没酣，最好2-3個，微博用了4個卵迂，但所幸都是2個字的裕便，看起來不算太擁擠，因為還有返回按鈕见咒，如果太擁擠的話偿衰，第一個標簽離返回太近也會有歧議。布局上也會顯得頭部太重改览。
3.2.滾動式標簽和“更多”
如右上圖所示下翎，“熱門”、“榜單”宝当、“視頻”這三個板塊都是微博內(nèi)容视事，標簽多于5個，所以做成了滾動式標簽庆揩。
這個設計的優(yōu)點在于靈活的運用了標簽式導航的變化俐东，讓用戶在沒有明顯的跳轉(zhuǎn)的情況下跌穗，順利的切換，不影響用戶閱讀的同時虏辫，承載了更大的內(nèi)容量蚌吸。缺點在于標簽不宜太多，例如“熱門”下的標簽
有三十多個乒裆，后面的標簽點擊率會很低套利。并且如果不是根據(jù)用戶的偏好進行排序的話，很有可能用戶并不喜歡前面的內(nèi)容鹤耍，而喜歡在最后面肉迫，但他未必知道后面會有，也未必有耐心瀏覽到最后稿黄。
而最后的“頭條”是用戶可以自己定制的新聞內(nèi)容喊衫，所以只放了4個優(yōu)先級最高的，最后一個“更多”點擊后進入“全部頻道”（見上圖右圖）杆怕，可以調(diào)整優(yōu)先級族购，或者選擇想去的頻道。與底部導航欄一樣的是陵珍，關閉按鈕還是在底部寝杖，這樣方便用戶快速地回到頭條頁面。缺點同樣也是標簽過多容易造成用戶的困惑互纯。還有瑟幕，不是在原標簽下直接展開的，而是滑出一個浮層留潦，所以可能會有點跳出感觅廓。但比起滾動式標簽還是好一點质礼，因為這種網(wǎng)格式布局的標簽列表权埠，把每一個標簽都平等清晰的呈現(xiàn)給用戶谆吴，便于用戶快速的選擇，而不用反復操作滑動去找不確定是否會有的標簽坊萝。
4.標準的標簽式導航和“更多”
1）下圖是“我”里的“我的贊”孵稽。頁眉也是典型的ios風格。標題在中間屹堰，右邊是ios風格的“更多”（安卓是豎著的肛冶，之后分析安卓的app時候會有圖），左側(cè)是返回扯键，并且?guī)в猩弦患壍臉撕災佬洌础拔摇薄＿@頁的標簽式導航是一個典型的標簽式導航荣刑，并且一直置頂馅笙。無論頁面如何滾動伦乔，它一直都在，用戶可以便捷的再不同類目之間切換董习。
2）點擊三個點的“更多”按鈕從底部浮現(xiàn)選項烈和，可以選擇“刷新”或“返回首頁”。這里只有2項皿淋，其實也可以做成2個按鈕放在右上角招刹。之所以這樣做，好處首先是給用戶更大的點擊空間窝趣，避免誤操作疯暑。還有就是頁眉的布局不至于太擠。缺點就是需要多點一步哑舒。并且在上面點擊后從底部浮出浮層的話用戶的操作幅度有點大妇拯。但這和首頁的下拉框是有區(qū)別的，下拉框主要是同級頁面間的切換或者功能的切換洗鸵。而這里是顯示更多操作越锈，所以也不適合用下拉框。
