中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

作者曾在香港雅虎就職，本文梳理了新聞?lì)惥W(wǎng)站用戶(hù)體驗(yàn)的五個(gè)維度，從各方面闡述如何設(shè)計(jì)新聞?lì)惥W(wǎng)站。

新聞?lì)惥W(wǎng)站設(shè)計(jì)主要為以下五方面:

1. 戰(zhàn)略層設(shè)計(jì)。體現(xiàn)在兩方面：一是用戶(hù)核心需求分析，二是網(wǎng)站商業(yè)目標(biāo)等。
2. 范圍層設(shè)計(jì)。體現(xiàn)在內(nèi)容需求和實(shí)現(xiàn)內(nèi)容的功能方式上。具體講是指從新聞事件的核心信息，周邊信息以及輻射信息三個(gè)層次深度挖掘內(nèi)容，從中組織相關(guān)文字，圖片以及音頻視頻資料。并確定內(nèi)容信息呈現(xiàn)的優(yōu)先級(jí)， 即欄目設(shè)定及層次。
3. 結(jié)構(gòu)層設(shè)計(jì)。新聞網(wǎng)站的結(jié)構(gòu)層設(shè)計(jì)包含信息結(jié)構(gòu)和信息交互設(shè)計(jì)。
4. 框架層設(shè)計(jì)?？蚣軐影ń缑嬖O(shè)計(jì)、信息設(shè)計(jì)等。
5. 表現(xiàn)層設(shè)計(jì)。表現(xiàn)層設(shè)計(jì)主要指視覺(jué)設(shè)計(jì)。

其中戰(zhàn)略層和范圍層由于每個(gè)新聞網(wǎng)站的定位不同，自然不同。在這里全面梳理結(jié)構(gòu)層設(shè)計(jì)，框架層設(shè)計(jì)和視覺(jué)設(shè)計(jì)。從各方面闡述如何設(shè)計(jì)新聞?lì)惥W(wǎng)站。

一 結(jié)構(gòu)層設(shè)計(jì)

新聞網(wǎng)站的結(jié)構(gòu)層體現(xiàn)在網(wǎng)頁(yè)的組織分類(lèi)和導(dǎo)航設(shè)計(jì)上。目標(biāo)是要有足夠清晰的結(jié)構(gòu)來(lái)包含不同類(lèi)別的新聞信息，讓受眾進(jìn)入網(wǎng)頁(yè)時(shí)就能明確地了解網(wǎng)站內(nèi)容，并輕松地選擇自己需要瀏覽的新聞?lì)悇e。

下面從七方面一一細(xì)致剖析。

1 內(nèi)容類(lèi)別導(dǎo)航展示形式

即是否能引起用戶(hù)進(jìn)一步瀏覽網(wǎng)頁(yè)的欲望？

(1) 全局導(dǎo)航之 一 —— 文字單元導(dǎo)航

大部分傳統(tǒng)新聞網(wǎng)站使用這種形式。在網(wǎng)頁(yè)上方有分類(lèi)十分廣泛的單元導(dǎo)航模塊，通過(guò)譬如國(guó)內(nèi)新聞/國(guó)際新聞/軍事/娛樂(lè)/財(cái)經(jīng)等諸多關(guān)鍵詞將網(wǎng)站信息進(jìn)行分類(lèi)，在點(diǎn)擊任意單元后立即載入相關(guān)獨(dú)立網(wǎng)頁(yè)。

范例：

這類(lèi)的導(dǎo)航分類(lèi)設(shè)計(jì)能區(qū)分出不同類(lèi)別，結(jié)構(gòu)相對(duì)清晰，但當(dāng)欄目過(guò)多時(shí)，較考驗(yàn)設(shè)計(jì)師水平。如容易因?yàn)樘珦頂D的文字讓用戶(hù)產(chǎn)生視覺(jué)疲勞，導(dǎo)致無(wú)法從導(dǎo)航中獲得繼續(xù)瀏覽網(wǎng)站的興趣。

采用這類(lèi)導(dǎo)航形式的國(guó)內(nèi)外網(wǎng)站參考：

• 華爾街日?qǐng)?bào)：http://www.wsj.com
• 衛(wèi)報(bào)：https://www.theguardian.com/international
• 鳳凰網(wǎng)：http://www.ifeng.com
• 香港新聞網(wǎng)站：http://www.hk01.com/
• 一傳媒：http://hk.nextmedia.com

(2)全局導(dǎo)航之二 —— 二級(jí)菜單形式導(dǎo)航(推薦)

?級(jí)菜單形式。即首頁(yè)導(dǎo)航模塊數(shù)量盡可能少，設(shè)置為當(dāng)鼠標(biāo)移動(dòng)到某個(gè)導(dǎo)航目錄時(shí)，自動(dòng)出現(xiàn)二級(jí)菜單，將目錄進(jìn)行更具體的分類(lèi)。這樣在視覺(jué)上更簡(jiǎn)潔清晰，在視覺(jué)符號(hào)間有足夠的留白，能有效杜絕受眾產(chǎn)生生視覺(jué)疲勞。

參考例子：

• 澎湃 http://www.thepaper.cn

(3) 全局導(dǎo)航之三 —— 網(wǎng)頁(yè)地圖式導(dǎo)航

網(wǎng)頁(yè)地圖式導(dǎo)航可有可無(wú)，一般在網(wǎng)頁(yè)底部展示，目的是讓新用戶(hù)立即對(duì)網(wǎng)站全部布局有直觀認(rèn)識(shí)，且方便用戶(hù)瀏覽感興趣內(nèi)容。

參考例子：

• http://www.ap.org/
• http://www.163.com

2 導(dǎo)航位置

(1)通常導(dǎo)航放在頂部

導(dǎo)航通常放于頁(yè)?頂部，因?yàn)槿藗儠?huì)最先注意到這里?導(dǎo)航在上方的形式具體分為三種。

第?種，固定在頁(yè)?位置不動(dòng)，隨頁(yè)面下拉，導(dǎo)航模塊消失在視野范圍內(nèi)。

第二種，導(dǎo)航標(biāo)簽懸浮在上方。

參考例子：

• http://std.stheadline.com
• http://www.thepaper.cn

第三種，導(dǎo)航中的搜索/分享等始終懸浮在上方，但所有關(guān)鍵詞文本搜索聚焦到一處按鈕。

參考例子:

• http://www.theonion.com

(2)垂直導(dǎo)航

最早的網(wǎng)站也采用垂直導(dǎo)航。如設(shè)計(jì)師在綜合考慮后，采?用垂直導(dǎo)航的話，建議放在左邊，更符合視覺(jué)規(guī)律。

(3) 地圖導(dǎo)航通常放在網(wǎng)站底部。

3 廣告位置

廣告不能隨便放在網(wǎng)頁(yè)上，一定要有固定位置?一般來(lái)說(shuō)可放在左邊或右邊，頁(yè)眉和頁(yè)腳也是不錯(cuò)的選擇。也有一些Banner放在文章中間，但這樣做是把雙刃劍 : 它可以讓網(wǎng)站的廣告效果更好，但也會(huì)打斷閱讀體驗(yàn)，引起用戶(hù)反感。

4 局部導(dǎo)航 ， 即分類(lèi)頁(yè)面導(dǎo)航

分類(lèi)頁(yè)面導(dǎo)航指面包屑路徑，即當(dāng)用戶(hù)進(jìn)入子頁(yè)面時(shí) ， 給予用戶(hù)提示，讓用?明?自己當(dāng)前所處位置。例如通常網(wǎng)站會(huì)顯示：

5 語(yǔ)境導(dǎo)航

語(yǔ)境導(dǎo)航指當(dāng)用戶(hù)到達(dá)某個(gè)深層頁(yè)面時(shí)，根據(jù)該頁(yè)面語(yǔ)境給予用戶(hù)導(dǎo)航，例如“精彩推薦”“相關(guān)新聞”等。

共有三種形式。

第一種，純文字鏈接。

第?種 ， 圖片+下方文字:

參考例子：

http://www.vox.com/policy-and-politics/2016/10/6/13163220/trump-hotels-and-casino-resorts

第三種，圖片+圖片右邊文字

第四種，圖片+圖片上文字

推薦采用“圖片+圖片下方簡(jiǎn)短文字”的卡片式布局推薦。原因?yàn)?/p>

第一，圖片在吸引用戶(hù)眼球和信息理解方面超過(guò)文字(下方框架設(shè)計(jì)時(shí)會(huì)講到）

第?，卡片式小布局比“圖片+圖片右方文字”的列表式形式更節(jié)省空間，也更易于用戶(hù)短時(shí)間內(nèi)接受整體信息，可在有限空間內(nèi)清晰地把所有推薦內(nèi)容展示出。

6 “分享 ”

“分享”是新聞?lì)惥W(wǎng)站的重要需求。很多研究都證明“，分享”按鈕只要在界?上引導(dǎo)得當(dāng)，會(huì)大大提高用戶(hù)的分享概率?！胺窒怼?有兩種形式：

第一，固定在文章底部或(和)開(kāi)頭

參考例子：

• http://www.theonion.com

第二 “分享”按鈕懸浮在?頁(yè)?面左側(cè)

參考例子：

• https://www.statnews.com/2016/10/05/one-brave-idea- heart-research/?s_campaign=bostonglobe%3Asocialfl?ow%3Afacebook

? 框架層設(shè)計(jì)

框架層具體表現(xiàn)為網(wǎng)站頁(yè)面的整體布局，包括各個(gè)板塊在頁(yè)?上的布局，文本、圖?片等新聞信息的網(wǎng)頁(yè)區(qū)域安排等。

1 首頁(yè)信息布局。

首頁(yè)的整體版塊布局所承載的信息構(gòu)架十分重要。

以下是已有研究成果確定需要遵循的原則：

• 新聞網(wǎng)站首頁(yè)界面的視覺(jué)傳達(dá)設(shè)計(jì)及整體信息架構(gòu)中，每屏的架構(gòu)變化不能太多，主次內(nèi)容信息位置需保持一致，否則用戶(hù)每瀏覽到下面的頁(yè)面都需要重新理解架構(gòu)，很不友好。
• 將圖片作為主要視覺(jué)元素， 這是未來(lái)網(wǎng)站設(shè)計(jì)的發(fā)展?向之一，?目前為止已有很多信息類(lèi)網(wǎng)站首頁(yè)采用圖片作為主要視覺(jué)元素。所以建議在圖片不會(huì)加重帶寬負(fù)荷的前提下，采用以圖片為主要視覺(jué)元素的設(shè)計(jì)。
• 新聞?lì)惥W(wǎng)站需要在首頁(yè)用大幅板塊突出重大新聞，引起視覺(jué)注意。
• 一些研究表明，現(xiàn)代設(shè)計(jì)風(fēng)格更受用戶(hù)歡迎，具體體現(xiàn)在同樣的新聞標(biāo)題和內(nèi)容，如果設(shè)計(jì)是現(xiàn)代設(shè)計(jì)風(fēng)格，網(wǎng)站點(diǎn)擊率更高。

?前大部分網(wǎng)站采用以下幾種設(shè)計(jì)方式：

(1)整體布局 之一 —— 最為傳統(tǒng)的兩欄/三欄布局

例子：

• http://www.bostonglobe.com
• http://www.theonion.com
• time magazine
• the wall street journal

(2 )整體布局之二——混合設(shè)計(jì)

三欄縮小成兩欄，然后一欄。這樣設(shè)計(jì)更有利于加載速度，閱讀體驗(yàn)更流暢。但設(shè)計(jì)風(fēng)格不統(tǒng)一，造成認(rèn)知負(fù)荷。

例子:

• the Boston Globe

(3) 內(nèi)部元素布局 —— 把新聞標(biāo)題、導(dǎo)語(yǔ)融入新聞圖片的卡片式布局。

這也是現(xiàn)在非常流行的設(shè)計(jì)手段，是一種將新聞信息加以視覺(jué)化的現(xiàn)代發(fā)展趨向，目前體現(xiàn)為三種方式。

第一，列表形式

第二，卡片形式 ：圖片+圖片下方文字

參考例子：

• 衛(wèi)報(bào)：https://www.theguardian.com/international
• 紐約時(shí)代：http://nytimes.comApple daily

第三，卡片形式 ： 圖片+圖片上標(biāo)題

參考例子:

• USA today

總結(jié)：以圖片為主要視覺(jué)元素的新聞首頁(yè)能獲得更高點(diǎn)擊率，因此建議采用圖片卡形式。而具體采用哪種類(lèi)型的圖片卡形式和下?第四點(diǎn)的選擇相關(guān)聯(lián)。

(4)分類(lèi)如何布局/標(biāo)簽如何打 —— 目前有以下幾種形式：

第一：瀑布流。

相似但不同的分欄布局可以有不同的寬度，但應(yīng)注意內(nèi)容的?度，更寬的分欄可容納更多文字。網(wǎng)頁(yè)滑動(dòng)到底后自動(dòng)加載新內(nèi)容，且無(wú)明顯標(biāo)線分隔，如要打標(biāo)簽，只能采用打在“卡片”內(nèi)的形式。移動(dòng)端更適合瀑布流。

參考例子：

• http://www.thepaper.cn
• mijlo blog

第二， 圖片卡設(shè)計(jì)+縱向排版

參考例子：

• http://edition.cnn.com/
• http://www.usatoday.com/
• http://www.xinhuanet.com

第三，圖片卡設(shè)計(jì)+橫向排版

參考例子:

• https://www.theguardian.com/international
• www.hko1.com

5)首頁(yè)突出重要新聞 —— 目前有以下幾種形式。

網(wǎng)站的首頁(yè)上要有個(gè)大版頭，用于放置當(dāng)天最重要新聞，可能是一個(gè)，也可能是兩個(gè)。這片區(qū)域通常會(huì)配有報(bào)道相關(guān)的一張大圖。其他內(nèi)容的占地面積?定比這部分小，且基于網(wǎng)格分布在網(wǎng)頁(yè)的其他地方。這讓人會(huì)把很多精力集中在重要的新聞上，這些新聞也要引導(dǎo)用戶(hù)分享到SNS網(wǎng)站。

此部分有以下幾種形式：

第一， 主要視覺(jué)區(qū)域（大圖）在左邊，右邊是和大圖報(bào)導(dǎo)相關(guān)連的一系列報(bào)導(dǎo)的文字導(dǎo)航。

第二，主要視覺(jué)區(qū)域（大圖）位于中間

例子 ：衛(wèi)報(bào)

第三，主要視覺(jué)區(qū)域（大圖）在左邊，右邊是熱門(mén)文章列表(帶小圖片)

第四，主要視覺(jué)區(qū)域（大圖）在左邊，右邊是相關(guān)標(biāo)題和導(dǎo)語(yǔ)。

第五，主要視覺(jué)區(qū)域（大圖）在左邊，右邊是登錄注冊(cè)和廣告，以圖片的形式呈現(xiàn)。

二 子頁(yè)面信息布局

新聞?lì)惥W(wǎng)站的子頁(yè)面要注意以下四點(diǎn)：

1 子頁(yè)面應(yīng)有面包屑導(dǎo)航，讓用戶(hù)知道目前所在位置。

2 新聞網(wǎng)站的“分享”是個(gè)重要需求，并且內(nèi)容帶有自傳播屬性，有利于產(chǎn)品推廣。所以在設(shè)計(jì)上應(yīng)強(qiáng)化“分享”，可考慮在文章開(kāi)頭和結(jié)尾都放置“分享”按鈕或?qū)ⅰ胺窒怼卑粹o懸浮在網(wǎng)頁(yè)上的固定位置。

3 “評(píng)論”也是新聞?lì)惥W(wǎng)站子頁(yè)?的常見(jiàn)需求。設(shè)計(jì)方式上應(yīng)引導(dǎo)用戶(hù)主動(dòng)評(píng)論。

4 子頁(yè)面布局

新聞?lì)惥W(wǎng)站的子頁(yè)面會(huì)根據(jù)產(chǎn)品定位和內(nèi)容的不同而不同，由此有很大的發(fā)揮和創(chuàng)新空間。

下面以新聞專(zhuān)題類(lèi)內(nèi)容為例，舉例說(shuō)明可采用的子頁(yè)面布局。

新聞專(zhuān)題類(lèi)報(bào)道，指網(wǎng)站就某一個(gè)新聞話題，采集一系列相關(guān)文章。這種內(nèi)容布局很適合卡片設(shè)計(jì)。卡片模式可在某種程度上窮盡某一新聞話題的所有細(xì)節(jié)，通過(guò)新聞卡片的運(yùn)用，還可將新聞信息精煉為讀者容易接受和閱讀的內(nèi)容。另外，卡片庫(kù)里每張卡片的標(biāo)題內(nèi)容都可在新聞網(wǎng)頁(yè)中看到，這就很方便用戶(hù)隨意查看他們所關(guān)注的這一話題的某個(gè)具體內(nèi)容。這種設(shè)計(jì)方式有較個(gè)性化的閱讀體驗(yàn)，同時(shí)卡?化設(shè)計(jì)也更適合在移動(dòng)媒體中推廣。

另外，當(dāng)某一專(zhuān)題的文章特別多時(shí)，卡片設(shè)計(jì)也可以解決問(wèn)題。如某個(gè)專(zhuān)題，有200條相關(guān)信息，依照傳統(tǒng)?式，將信息?條條羅列出，那網(wǎng)站下方內(nèi)容很容易被用戶(hù)忽視， 但卡?可以全面?直接地呈現(xiàn)給讀者有趣內(nèi)容。此外，對(duì)于?型長(zhǎng)篇報(bào)道計(jì)劃?言，讀者不可能?次性看完所有卡?，通過(guò)設(shè)計(jì)，讀者已閱讀過(guò)的卡片可變?yōu)榛?，這樣就很容易分辨出讀者讀過(guò)的內(nèi)容。

這里推薦兩個(gè)新聞?lì)悓?zhuān)題頁(yè)面：

• vox ：http://www.vox.com/cards/ukraine-everything-you-need-to-know/what-is-the-ukraine-crisis
• 華爾街日?qǐng)?bào)：http://online.wsj.com/ww1/

三 表現(xiàn)層設(shè)計(jì)

表現(xiàn)層是指用?點(diǎn)開(kāi)網(wǎng)頁(yè)后呈現(xiàn)在屏幕上的網(wǎng)頁(yè)樣貌，是以上四個(gè)層級(jí)之于視覺(jué)呈現(xiàn)的最終效果。包括色彩，標(biāo)題，圖像(圖片與視頻) 等多個(gè)元素。

(1)整體設(shè)計(jì)風(fēng)格

整體設(shè)計(jì)風(fēng)格?定要和產(chǎn)品的定位相符合。比如，定位是針對(duì)中產(chǎn)階級(jí)的嚴(yán)肅媒體，則在選擇版式，交互方式，顏色等時(shí)都可傾向于更沉穩(wěn)；而如定位是針對(duì)年輕?的新聞網(wǎng)站，則可設(shè)計(jì)為活潑，互動(dòng)性強(qiáng)。另外，注意新聞?lì)惥W(wǎng)頁(yè)的設(shè)計(jì)最好要有留白。在分欄與分欄間，側(cè)邊和底部都需要留白，這樣讀者才會(huì)感覺(jué)有思考的空間留給自己，而不是通篇?眼望不到頭的文字。此外，還要注意文本行與行，字與字之間的空白以及內(nèi)容周?chē)目瞻?。適當(dāng)留白可讓網(wǎng)站看起來(lái)更簡(jiǎn)潔，更易閱讀。

在整體設(shè)計(jì)風(fēng)格的創(chuàng)新上，水墨設(shè)計(jì)風(fēng)格較適合中國(guó)新聞網(wǎng)站，有興趣的設(shè)計(jì)師不妨試試。

(2)顏色和文字

根據(jù)網(wǎng)站定位不同，色調(diào)選擇也不同。另外注意細(xì)節(jié)色調(diào)，譬如選中button的顏色色調(diào)等。

另外，新聞?lì)惥W(wǎng)站的文字需要注意文字顏色和底色對(duì)比度。 白色或略帶灰色的紙張上印刷著黑色的文字，對(duì)人類(lèi)眼睛來(lái)說(shuō)這樣的組合很舒適，可讀性很高，這也是為什么傳統(tǒng)媒體采用用這樣配色方案的原因。

另可以選擇紋理底色來(lái)增強(qiáng)網(wǎng)站個(gè)性，但紋理有可能分散讀者的注意力，要謹(jǐn)慎使用，例如紋理可出現(xiàn)在背景，按鈕處，不一定要大面積使?在內(nèi)容區(qū)。

(3)導(dǎo)航

導(dǎo)航菜單有時(shí)需用陰影或發(fā)光特效來(lái)裝飾，但裝飾的顏色與主色調(diào)對(duì)比度不要太?。這樣可讓導(dǎo)航更明確，給用戶(hù)更好的視覺(jué)體驗(yàn)。

參考網(wǎng)站：

https://www.thesun.co.uk/

但天氣是次要信息，導(dǎo)航是主要信息，這個(gè)頁(yè)面十分突出天氣，這點(diǎn)上不值得借鑒

http://www.reuters.com/

此網(wǎng)站排列布局清晰，重點(diǎn)層次突出

在實(shí)際應(yīng)用中，應(yīng)根據(jù)新聞網(wǎng)站的不同定位，采取不同的方案。

作者：宋林恒。曾于香港雅虎，國(guó)際聯(lián)合出版集團(tuán)等公司就職

本文由 @小林子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。