題目：
從遵守設(shè)計規(guī)范的角度，請你在三個平臺（iOS茫因，安卓削咆，web）各選一個最具有代表性的產(chǎn)品牍疏。
1）請詳細(xì)分析此產(chǎn)品的頁面結(jié)構(gòu)和設(shè)計模式，
2）并分析這樣設(shè)計的優(yōu)缺點拨齐。
作業(yè)：
一鳞陨、Web端
1.產(chǎn)品：豆瓣電影
2.頁面結(jié)構(gòu)及設(shè)計模式
2.1豆瓣社區(qū)導(dǎo)航
2.2用戶中心
2.3 logo
2.4搜索欄
2.5豆瓣電影導(dǎo)航
2.6購票活動區(qū)（羅列式輪播面板）
2.7其他內(nèi)容區(qū)
2.8選片活動區(qū)（標(biāo)簽式導(dǎo)航+網(wǎng)格列表）
3.關(guān)于設(shè)計上的優(yōu)缺點
3.1豆瓣社區(qū)導(dǎo)航及用戶中心：豆瓣作為一個綜合類社區(qū)網(wǎng)站擁有許多產(chǎn)品，最上方的社區(qū)導(dǎo)航和用戶中心便于用戶去往豆瓣其他產(chǎn)品瞻惋。位置放在網(wǎng)頁最上方厦滤，并采用了深灰底色和淺灰字色產(chǎn)生低對比度，使其很好的與豆瓣電影導(dǎo)航產(chǎn)生區(qū)分歼狼，視覺上弱與網(wǎng)頁上其他主要元素掏导，既發(fā)揮了功能，又不搶眼蹂匹。用戶中心也沒有放到其他內(nèi)容區(qū)碘菜，也沒有顯示閱片量和發(fā)布影評數(shù)等內(nèi)容，甚至連頭像都沒有限寞，只有必要的用戶名、信箱和系統(tǒng)提示仰坦，都是為突出核心內(nèi)容區(qū)做的舍棄履植。
3.2搜索欄：位置靠上，面積較大悄晃，使有明確目的的用戶更快找到想找的內(nèi)容玫霎。淺灰色字標(biāo)注了搜索框能搜索的內(nèi)容，使用戶明確可以搜索的內(nèi)容妈橄，擺脫只能搜索影片名的刻板印象庶近。
3.3購票活動區(qū)：采用了羅列式輪播面板的設(shè)計方式。此區(qū)域作為豆瓣電影最主要的盈利手段（存疑眷蚓，也有可能是導(dǎo)流量）放在了黃金位置上鼻种，把所有近期上映影片的海報根據(jù)評分和熱度4個一組按順序橫向羅列。輪播面板式設(shè)計可以在不占用過多空間的情況下使影片海報的面積更大更美觀沙热，充分利用了界面外的空間叉钥，并在右上角輔以頁碼罢缸，讓用戶時刻知道自己在哪；字體明顯區(qū)別于選片活動區(qū)的字體投队，字號更大枫疆，對比度更高，視覺上更突出敷鸦，圖片和字體的設(shè)計使用戶更直觀就能找到想找的影片息楔。4個一組的模式很有效率，而且將熱度高評分高的影片排在前邊扒披，使大多數(shù)用戶不用翻太多頁就可以找到想看的影片钞螟，不必過多操作產(chǎn)生負(fù)反饋。
3.4選片活動區(qū)：此區(qū)域是為沒有明確目標(biāo)的用戶準(zhǔn)備的谎碍，采用了標(biāo)簽式導(dǎo)航的方法來將影片分類鳞滨，并且不單有影片類型分類，還有如“豆瓣猜”蟆淀、“豆瓣高分”等符合用戶期望的標(biāo)簽拯啦，比較全面。標(biāo)簽分類并沒有采用滾動式熔任，不用二次操作褒链，直觀便捷。因為相比于購票區(qū)疑苔，此處沒有過多的面積限制甫匹，所以采用了網(wǎng)格列表的模式。使用了和購票區(qū)相同尺寸的電影海報進(jìn)行平鋪惦费，讓網(wǎng)頁看起來更加規(guī)整兵迅，更有感染力；文字部分字號和對比度相比于購票區(qū)有一定弱化薪贫，避免喧賓奪主恍箭；但展示信息較少，只有影片海報瞧省、影片名和評分扯夭，沒有簡介、短評鞍匾、年份交洗、演職員等信息。
3.5其他內(nèi)容區(qū)：此區(qū)域基本沒有使用圖片橡淑，避免不同尺寸圖片太多顯得雜亂构拳，文字和背景也是對比度較低，只為突出兩個核心內(nèi)容的區(qū)域。
二隐圾、iOS端
1.產(chǎn)品：騰訊新聞iOS V5.1.6.36
2.頁面結(jié)構(gòu)及設(shè)計模式
2.1一級導(dǎo)航（標(biāo)簽式導(dǎo)航）
2.2二級導(dǎo)航（滾動式標(biāo)簽導(dǎo)航）
2.3搜索欄
2.4內(nèi)容區(qū)（垂直列表）
3.關(guān)于設(shè)計上的優(yōu)缺點
3.1一級導(dǎo)航：采用標(biāo)簽式導(dǎo)航的設(shè)計伍掀，icon加文字的設(shè)計更易識別，入口較為扁平暇藏，控件占據(jù)的面積較大蜜笤，易于點擊操作和進(jìn)行功能鍵的快速切換。
3.2二級導(dǎo)航：此處用于給新聞分類盐碱，因為標(biāo)簽較多把兔，所以采用滾動式的標(biāo)簽導(dǎo)航，并且給出了提示瓮顽，讓用戶知道在頁面外也有標(biāo)簽存在县好。筆者以為，此處標(biāo)簽中的視頻暖混，并不平行于其他二級導(dǎo)航中的標(biāo)簽缕贡，其他標(biāo)簽都是作為文字新聞的分類存在，視頻標(biāo)簽應(yīng)與文字標(biāo)簽（也就是一級導(dǎo)航中的新聞）并列拣播，建議二級導(dǎo)航中的視頻標(biāo)簽和一級導(dǎo)航中的直播標(biāo)簽合并為視頻標(biāo)簽加入一級導(dǎo)航晾咪，并在該頁面中用分段式導(dǎo)航的形式對兩者進(jìn)行區(qū)分（如下圖）。這樣做也更符合應(yīng)用場景贮配，文字類新聞集中在一起谍倦，可以在流量環(huán)境中閱讀，視頻類新聞集中在一起泪勒，可以在wifi環(huán)境下查看昼蛀。
3.3搜索欄：進(jìn)入APP時搜索欄是隱藏的，只有下拉內(nèi)容區(qū)域的時候搜索欄才會顯示出來圆存。默認(rèn)隱藏搜索欄可以避免雙標(biāo)簽欄占用太多面積帶來的問題叼旋，但是用戶初次使用難以尋找，學(xué)習(xí)成本較高辽剧，并且在iOS中下拉內(nèi)容區(qū)是刷新功能送淆，和搜索功能不發(fā)生關(guān)系，不符合應(yīng)用場景和用戶習(xí)慣怕轿。此APP中一級導(dǎo)航的推薦頁面是和其他APP中的發(fā)現(xiàn)頁面是一樣的內(nèi)容，文案上寫成“推薦”意味著讓用戶被動接受信息辟拷，而不同于“發(fā)現(xiàn)”一樣主動尋找信息撞羽，雖然內(nèi)容功能一樣，但是給用戶的心理感受有很大區(qū)別衫冻，而且不符合用戶的使用習(xí)慣诀紊，可能會產(chǎn)生讓用戶既找不到搜索又找不到發(fā)現(xiàn)的情況，所以建議將一級導(dǎo)航中的“推薦”文字改成“發(fā)現(xiàn)”隅俘。
3.4內(nèi)容區(qū)：采用垂直列表的方式邻奠，內(nèi)容干凈清晰笤喳。將廣告以相同的格式夾雜在內(nèi)容中，會使頁面更佳整潔碌宴，但有可能讓用戶使用時產(chǎn)生誤操操作杀狡，帶來負(fù)面情緒。
三贰镣、Android端
1.產(chǎn)品：知乎Android 4.10.1（443）
2.頁面結(jié)構(gòu)及設(shè)計模式
2.1一級導(dǎo)航（標(biāo)簽式導(dǎo)航）
2.2常用功能快捷菜單（浮動操作按鈕）
2.3搜索欄
2.4內(nèi)容區(qū)（垂直列表）
2.5活動推廣區(qū)（羅列式輪播面板）
3.關(guān)于設(shè)計上的優(yōu)缺點
3.1一級導(dǎo)航：采用標(biāo)簽式導(dǎo)航呜象，入口較為扁平，控件占據(jù)的面積較大碑隆，易于點擊操作和進(jìn)行功能鍵的快速切換恭陡。導(dǎo)航上的標(biāo)簽上只有icon沒有文字，可能使新用戶使用時產(chǎn)生困擾上煤。
3.2常用功能快捷菜單：采用了Material Design中的浮動操作按鈕休玩，將“寫文章”、“回答”劫狠、“提問”三個常用功能集合在此按鈕中（如下圖）拴疤，相比于iOS版知乎將這三個標(biāo)簽平行置于搜索欄下，這樣設(shè)計不但更加美觀嘉熊，還能給內(nèi)容區(qū)騰出少量的空間遥赚。
點開浮動操作按鈕后的三個標(biāo)簽
3.3搜索欄：采用常規(guī)設(shè)計置于屏幕最上方并用低對比度字提示用戶可搜索的內(nèi)容，降低了用戶使用時的學(xué)習(xí)成本阐肤。
3.4內(nèi)容區(qū)：采用了垂直列表的方式展示社區(qū)的內(nèi)容凫佛，通過字號、粗細(xì)孕惜、對比度的差別展現(xiàn)內(nèi)容的主次愧薛，讓用戶短時間內(nèi)看到關(guān)鍵信息，提升效率衫画。
3.5活動推廣區(qū)：此處用于推廣知乎自己的活動（知乎Live）毫炉，因為內(nèi)容區(qū)是采用Timeline的順序展示內(nèi)容，活動推廣區(qū)始終默認(rèn)在第一條內(nèi)容下邊削罩，說明在知乎看來瞄勾，最重要的內(nèi)容還是問答和文章，說明知乎的本質(zhì)還是以問答為主弥激。把活動推廣區(qū)始終放在Timeline第二條的位置能保證活動推廣區(qū)始終在之后首頁的第一屏进陡，活動標(biāo)題的文字和參與活動的按鈕做的相對于其他元素都要更大，體現(xiàn)了知乎對知乎Live這項活動的大力支持微服，畢竟這是目前為止知乎嘗試的各種盈利模式中最有前景的一個趾疚。
