題目：
從遵守設(shè)計(jì)規(guī)范的角度，請你在三個(gè)平臺（iOS，安卓，web）各選一個(gè)最具有代表性的產(chǎn)品。
1）請?jiān)敿?xì)分析此產(chǎn)品的頁面結(jié)構(gòu)和設(shè)計(jì)模式，
2）并分析這樣設(shè)計(jì)的優(yōu)缺點(diǎn)。
作業(yè)：
一、Web端
1.產(chǎn)品：豆瓣電影
2.頁面結(jié)構(gòu)及設(shè)計(jì)模式
2.1豆瓣社區(qū)導(dǎo)航
2.2用戶中心
2.3 logo
2.4搜索欄
2.5豆瓣電影導(dǎo)航
2.6購票活動(dòng)區(qū)（羅列式輪播面板）
2.7其他內(nèi)容區(qū)
2.8選片活動(dòng)區(qū)（標(biāo)簽式導(dǎo)航+網(wǎng)格列表）
3.關(guān)于設(shè)計(jì)上的優(yōu)缺點(diǎn)
3.1豆瓣社區(qū)導(dǎo)航及用戶中心：豆瓣作為一個(gè)綜合類社區(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購票活動(dòng)區(qū)：采用了羅列式輪播面板的設(shè)計(jì)方式。此區(qū)域作為豆瓣電影最主要的盈利手段（存疑，也有可能是導(dǎo)流量）放在了黃金位置上，把所有近期上映影片的海報(bào)根據(jù)評分和熱度4個(gè)一組按順序橫向羅列。輪播面板式設(shè)計(jì)可以在不占用過多空間的情況下使影片海報(bào)的面積更大更美觀，充分利用了界面外的空間，并在右上角輔以頁碼，讓用戶時(shí)刻知道自己在哪；字體明顯區(qū)別于選片活動(dòng)區(qū)的字體，字號更大，對比度更高，視覺上更突出，圖片和字體的設(shè)計(jì)使用戶更直觀就能找到想找的影片。4個(gè)一組的模式很有效率，而且將熱度高評分高的影片排在前邊，使大多數(shù)用戶不用翻太多頁就可以找到想看的影片，不必過多操作產(chǎn)生負(fù)反饋。
3.4選片活動(dòng)區(qū)：此區(qū)域是為沒有明確目標(biāo)的用戶準(zhǔn)備的，采用了標(biāo)簽式導(dǎo)航的方法來將影片分類，并且不單有影片類型分類，還有如“豆瓣猜”、“豆瓣高分”等符合用戶期望的標(biāo)簽，比較全面。標(biāo)簽分類并沒有采用滾動(dòng)式，不用二次操作，直觀便捷。因?yàn)橄啾扔谫徠眳^(qū)，此處沒有過多的面積限制，所以采用了網(wǎng)格列表的模式。使用了和購票區(qū)相同尺寸的電影海報(bào)進(jìn)行平鋪，讓網(wǎng)頁看起來更加規(guī)整，更有感染力；文字部分字號和對比度相比于購票區(qū)有一定弱化，避免喧賓奪主；但展示信息較少，只有影片海報(bào)、影片名和評分，沒有簡介、短評、年份、演職員等信息。
3.5其他內(nèi)容區(qū)：此區(qū)域基本沒有使用圖片，避免不同尺寸圖片太多顯得雜亂，文字和背景也是對比度較低，只為突出兩個(gè)核心內(nèi)容的區(qū)域。
二、iOS端
1.產(chǎn)品：騰訊新聞iOS V5.1.6.36
2.頁面結(jié)構(gòu)及設(shè)計(jì)模式
2.1一級導(dǎo)航（標(biāo)簽式導(dǎo)航）
2.2二級導(dǎo)航（滾動(dòng)式標(biāo)簽導(dǎo)航）
2.3搜索欄
2.4內(nèi)容區(qū)（垂直列表）
3.關(guān)于設(shè)計(jì)上的優(yōu)缺點(diǎn)
3.1一級導(dǎo)航：采用標(biāo)簽式導(dǎo)航的設(shè)計(jì)，icon加文字的設(shè)計(jì)更易識別，入口較為扁平，控件占據(jù)的面積較大，易于點(diǎn)擊操作和進(jìn)行功能鍵的快速切換。
3.2二級導(dǎo)航：此處用于給新聞分類，因?yàn)闃?biāo)簽較多，所以采用滾動(dòng)式的標(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時(shí)搜索欄是隱藏的，只有下拉內(nèi)容區(qū)域的時(shí)候搜索欄才會顯示出來。默認(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)容，文案上寫成“推薦”意味著讓用戶被動(dòng)接受信息，而不同于“發(fā)現(xiàn)”一樣主動(dòng)尋找信息，雖然內(nèi)容功能一樣，但是給用戶的心理感受有很大區(qū)別，而且不符合用戶的使用習(xí)慣，可能會產(chǎn)生讓用戶既找不到搜索又找不到發(fā)現(xiàn)的情況，所以建議將一級導(dǎo)航中的“推薦”文字改成“發(fā)現(xiàn)”。
3.4內(nèi)容區(qū)：采用垂直列表的方式，內(nèi)容干凈清晰。將廣告以相同的格式夾雜在內(nèi)容中，會使頁面更佳整潔，但有可能讓用戶使用時(shí)產(chǎn)生誤操操作，帶來負(fù)面情緒。
三、Android端
1.產(chǎn)品：知乎Android 4.10.1（443）
2.頁面結(jié)構(gòu)及設(shè)計(jì)模式
2.1一級導(dǎo)航（標(biāo)簽式導(dǎo)航）
2.2常用功能快捷菜單（浮動(dòng)操作按鈕）
2.3搜索欄
2.4內(nèi)容區(qū)（垂直列表）
2.5活動(dòng)推廣區(qū)（羅列式輪播面板）
3.關(guān)于設(shè)計(jì)上的優(yōu)缺點(diǎn)
3.1一級導(dǎo)航：采用標(biāo)簽式導(dǎo)航，入口較為扁平，控件占據(jù)的面積較大，易于點(diǎn)擊操作和進(jìn)行功能鍵的快速切換。導(dǎo)航上的標(biāo)簽上只有icon沒有文字，可能使新用戶使用時(shí)產(chǎn)生困擾。
3.2常用功能快捷菜單：采用了Material Design中的浮動(dòng)操作按鈕，將“寫文章”、“回答”、“提問”三個(gè)常用功能集合在此按鈕中（如下圖），相比于iOS版知乎將這三個(gè)標(biāo)簽平行置于搜索欄下，這樣設(shè)計(jì)不但更加美觀，還能給內(nèi)容區(qū)騰出少量的空間。
點(diǎn)開浮動(dòng)操作按鈕后的三個(gè)標(biāo)簽
3.3搜索欄：采用常規(guī)設(shè)計(jì)置于屏幕最上方并用低對比度字提示用戶可搜索的內(nèi)容，降低了用戶使用時(shí)的學(xué)習(xí)成本。
3.4內(nèi)容區(qū)：采用了垂直列表的方式展示社區(qū)的內(nèi)容，通過字號、粗細(xì)、對比度的差別展現(xiàn)內(nèi)容的主次，讓用戶短時(shí)間內(nèi)看到關(guān)鍵信息，提升效率。
3.5活動(dòng)推廣區(qū)：此處用于推廣知乎自己的活動(dòng)（知乎Live），因?yàn)閮?nèi)容區(qū)是采用Timeline的順序展示內(nèi)容，活動(dòng)推廣區(qū)始終默認(rèn)在第一條內(nèi)容下邊，說明在知乎看來，最重要的內(nèi)容還是問答和文章，說明知乎的本質(zhì)還是以問答為主。把活動(dòng)推廣區(qū)始終放在Timeline第二條的位置能保證活動(dòng)推廣區(qū)始終在之后首頁的第一屏，活動(dòng)標(biāo)題的文字和參與活動(dòng)的按鈕做的相對于其他元素都要更大，體現(xiàn)了知乎對知乎Live這項(xiàng)活動(dòng)的大力支持，畢竟這是目前為止知乎嘗試的各種盈利模式中最有前景的一個(gè)。
