網(wǎng)頁(yè)設(shè)計(jì)中網(wǎng)頁(yè)界面的5種設(shè)計(jì)方法

平時(shí)的工作中，經(jīng)常會(huì)遇到一些不舒服，但又說(shuō)不上理由的網(wǎng)頁(yè)設(shè)計(jì)問(wèn)題。本文作者從設(shè)計(jì)理論出發(fā)，有理有據(jù)的闡述這些問(wèn)題，并通過(guò)實(shí)例進(jìn)行分析講解，希望能夠提供多一些設(shè)計(jì)思路。相信大家看完后能從作者的觀點(diǎn)中學(xué)到不少的干貨。

對(duì)可視網(wǎng)絡(luò)內(nèi)容的深入了解：通過(guò)大量的UI示例和演示，檢查用于使網(wǎng)頁(yè)設(shè)計(jì)美觀且用戶(hù)友好的不同類(lèi)型的圖形。

李?yuàn)W登說(shuō)過(guò)“內(nèi)容不是王者，而是王國(guó)，”。我完全同意：沒(méi)有的內(nèi)容設(shè)計(jì)只會(huì)是一個(gè)外表華麗的包裝。不應(yīng)該對(duì)更重要的東西，設(shè)計(jì)或內(nèi)容進(jìn)行斗爭(zhēng)，因?yàn)槿绻麤](méi)有其他東西，沒(méi)有一個(gè)可以完全運(yùn)作。今天，我們邀請(qǐng)您一起聊聊用戶(hù)每天都會(huì)遇到的網(wǎng)頁(yè)可視化設(shè)計(jì)的五種基本類(lèi)型，并探討每種類(lèi)型的優(yōu)勢(shì)。

什么是網(wǎng)絡(luò)內(nèi)容？

Web內(nèi)容基本上是填滿網(wǎng)站的所有內(nèi)容，也是用戶(hù)體驗(yàn)的一部分。這就是人們?cè)诰W(wǎng)站上閱讀，聆聽(tīng)，觀看，觀看和操縱的內(nèi)容?；诖耍琖eb內(nèi)容的核心類(lèi)型是：

• 文字
• 圖片
• 視頻
• 動(dòng)畫(huà)
• 音頻

今天，我們來(lái)討論一下這些圖片。

圖像不僅僅是美的一個(gè)因素：在用戶(hù)體驗(yàn)設(shè)計(jì)中，圖片在增強(qiáng)可用性方面起著重要作用。大多數(shù)網(wǎng)絡(luò)用戶(hù)都是視覺(jué)驅(qū)動(dòng)的，他們比文字更快地感知圖片。因此，圖像通常是首先看到和掃描的布局元素。更重要的是，它們具有信息性和情感吸引力，它們不僅傳遞信息，還傳遞特殊的美學(xué)。此外，網(wǎng)頁(yè)上使用的圖像對(duì)網(wǎng)站SEO排名產(chǎn)生積極影響。

根據(jù)網(wǎng)站設(shè)計(jì)背后的目標(biāo)，創(chuàng)意和營(yíng)銷(xiāo)團(tuán)隊(duì)可以選擇不同類(lèi)型的圖像。以下是網(wǎng)頁(yè)上最常見(jiàn)的內(nèi)容。

商標(biāo)

一個(gè)標(biāo)志是一個(gè)品牌，它的符號(hào)表示的一個(gè)關(guān)鍵要素。因此，它是大多數(shù)網(wǎng)站的明顯視覺(jué)元素，可以呈現(xiàn)公司，品牌，服務(wù)，社區(qū)和組織。如今，個(gè)人博客和投資組合網(wǎng)站通常都會(huì)提供原創(chuàng)徽標(biāo)。

在網(wǎng)頁(yè)設(shè)計(jì)方面，請(qǐng)考慮以下有關(guān)UI中徽標(biāo)使用的提示：

• 在標(biāo)題中放置一個(gè)徽標(biāo)- 它是網(wǎng)頁(yè)高度瀏覽的區(qū)域之一
• 不要打破經(jīng)過(guò)良好檢查的習(xí)慣：當(dāng)用戶(hù)點(diǎn)擊標(biāo)題中的徽標(biāo)時(shí)，它會(huì)將它們帶到瀏覽的起點(diǎn)。如果它是單頁(yè)網(wǎng)站，它可能是主頁(yè)或直到頁(yè)面的開(kāi)頭
• 想一想懸停時(shí)的徽標(biāo)動(dòng)畫(huà)：動(dòng)作會(huì)增加生命，并且會(huì)提示元素是可以交互的。

這是一個(gè)加密貨幣服務(wù)的登陸頁(yè)面，帶有交互式徽標(biāo)，可以增添一些樂(lè)趣，讓體驗(yàn)更加生動(dòng)。

相片

照片可能被稱(chēng)為網(wǎng)頁(yè)設(shè)計(jì)圖像的經(jīng)典。它們用于各種目標(biāo)，例如：

• 主題照片
• 演示照片
• 項(xiàng)目的照片（例如，在電子商務(wù)網(wǎng)站上）
• 博客文章的標(biāo)題照片
• 英雄橫幅照片等

照片的大優(yōu)點(diǎn)是能夠?qū)⒂脩?hù)在網(wǎng)頁(yè)上看到的內(nèi)容與物理事物和現(xiàn)場(chǎng)人員的真實(shí)世界聯(lián)系起來(lái)。幾十年來(lái)，照片已經(jīng)成為人類(lèi)現(xiàn)實(shí)的一部分，遠(yuǎn)在互聯(lián)網(wǎng)問(wèn)世之前，所以這種視覺(jué)效果對(duì)我們來(lái)說(shuō)是原生的，接近和清晰的。更重要的是，隨著所有這些設(shè)備讓我們?nèi)魏稳嗽谝幻腌妰?nèi)捕捉到的東西，攝影真的是許多人日常生活的一部分。因此，在網(wǎng)站上使用它，它建立了強(qiáng)大的聯(lián)系。

舞蹈學(xué)院登陸頁(yè)面

博物館著陸頁(yè)

更重要的是，攝影也是一種藝術(shù)。通過(guò)它們，您可以在Web用戶(hù)界面中設(shè)置真實(shí)性和美學(xué)的平衡。您可以保持必要的風(fēng)格吸引目標(biāo)受眾并創(chuàng)建必要的情感背景。這是選擇照片以支持博客和媒體網(wǎng)站中的文章的原因之一。

新聞媒體網(wǎng)站

毫無(wú)疑問(wèn)，照片是電子商務(wù)網(wǎng)站上視覺(jué)呈現(xiàn)商品的主要工具，其中“你得到你所看到的”這一原則是成功的重要組成部分。

家庭工藝網(wǎng)站

設(shè)計(jì)師在哪里拍照？有幾種方法：

• 為特定項(xiàng)目拍攝和處理的原始照片：這是最昂貴的選擇，但照片將具有高級(jí)別的性;
• 付費(fèi)照片：您可以從提供各種照片的照片庫(kù)中購(gòu)買(mǎi)所需照片。這可能比自定義照片拍攝便宜，但您可能會(huì)花費(fèi)大量時(shí)間搜索與您的任務(wù)相對(duì)應(yīng)的照片;
• 免費(fèi)照片：您可以免費(fèi)分享來(lái)自社區(qū)或團(tuán)隊(duì)的照片。這是最便宜的選擇，但你必須準(zhǔn)備其他人也可以這樣做，所以你必須好好考慮如何在這些條件下使你的設(shè)計(jì)原創(chuàng)。

因此，很容易看出您選擇的方式取決于具體項(xiàng)目，預(yù)算和目標(biāo)。

無(wú)論如何，即使你是一個(gè)沒(méi)有視覺(jué)預(yù)算的公司或個(gè)人，或者如果你正在為你的投資組合創(chuàng)建一個(gè)設(shè)計(jì)概念，免費(fèi)照片網(wǎng)站現(xiàn)在提供了大量高質(zhì)量的內(nèi)容。其中，以下資源通常用于良好的照片內(nèi)容：

• Unsplash：這是一個(gè)來(lái)自世界各地的攝影師社區(qū)，免費(fèi)分享他們的照片。照片以徹底的策展為特色，因此您不會(huì)在那里找到垃圾
• Pexels：關(guān)于各種主題的大量免費(fèi)照片
• Moose Photos：專(zhuān)業(yè)制作的照片，它們協(xié)同工作，并且對(duì)于廣泛的內(nèi)容策略非常靈活
• Pixabay：大量的免費(fèi)圖像，不僅是照片，還有插圖和矢量圖形。

Gourmet網(wǎng)站是 一家銷(xiāo)售草藥，油和香料的電子商務(wù)商店，用于展示商品的照片內(nèi)容。

在網(wǎng)頁(yè)設(shè)計(jì)中使用照片，請(qǐng)考慮以下提示：

• 下載高分辨率照片
• 為網(wǎng)絡(luò)優(yōu)化它們，以便太大的圖像不會(huì)使頁(yè)面過(guò)載 - 加載速度是積極的用戶(hù)體驗(yàn)的關(guān)鍵因素
• 給圖像足夠的空氣呼吸 - 保持負(fù)空間的平衡
• 記住響應(yīng)性并測(cè)試圖像在不同屏幕和設(shè)備上的外觀
• 不要將照片用作裝飾 - 讓他們與用戶(hù)交談，傳遞信息并支持所有其他布局。

其中一個(gè)流行的設(shè)計(jì)趨勢(shì)，最近幾年的使用照片作為背景圖像。這種方法使屏幕在視覺(jué)上和情感上都很吸引人。此外，它支持所有布局元素的完整性的感覺(jué)。另一方面，它需要對(duì)所有元素的對(duì)比度和易讀性給予高度關(guān)注，這些元素在單色背景的情況下可能難以實(shí)現(xiàn)。

大城市指南登陸頁(yè)面

插圖

今年另一個(gè)重要的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)是使用自定義插圖滿足各種網(wǎng)站需求。自定義圖形以各種風(fēng)格制作，有效支持頁(yè)面或屏幕上信息的快速感知。它們還為視覺(jué)創(chuàng)意奠定了堅(jiān)實(shí)的基礎(chǔ)。它為我們經(jīng)常閱讀的博客和網(wǎng)站增添了美學(xué)和美感，并拓寬了藝術(shù)家的創(chuàng)作視野。

這是一個(gè)會(huì)議的登陸頁(yè)面，插圖畫(huà)家和數(shù)字藝術(shù)家分享他們的經(jīng)驗(yàn)。自定義英雄插圖和它的動(dòng)畫(huà)使網(wǎng)頁(yè)設(shè)計(jì)吸引人和原創(chuàng)。

你可能經(jīng)?？吹降牟鍒D

• 英雄形象
• 主題圖片
• 與用戶(hù)溝通的角色
• 博客文章圖片
• 獎(jiǎng)勵(lì)和其他 游戲化 圖形
• 通知和系統(tǒng)消息
• 貼紙（這些特別適用于Messenger應(yīng)用程序）
• 評(píng)書(shū)
• 信息圖表
• 營(yíng)銷(xiāo)的東西和廣告橫幅
• 內(nèi)容類(lèi)別的可視標(biāo)記。

我們來(lái)看看一些例子。

這是一個(gè)設(shè)計(jì)師的投資組合網(wǎng)站的概念，專(zhuān)門(mén)為名人，娛樂(lè)，音樂(lè)和電影制作項(xiàng)目。 深色背景與自定義英雄插圖相結(jié)合，看起來(lái)更生動(dòng)，并與音樂(lè)會(huì)舞臺(tái)的氛圍相關(guān)聯(lián)。

這是數(shù)字代理商的登陸頁(yè)面，可以為高的業(yè)務(wù)挑戰(zhàn)和目標(biāo)做好準(zhǔn)備。標(biāo)語(yǔ)和明亮的英雄插圖顯示的籃球運(yùn)動(dòng)員之間的強(qiáng)大聯(lián)系很快傳遞了這個(gè)信息。

這是為佛羅倫薩設(shè)計(jì)的插圖集，佛羅倫薩是一個(gè)在線市場(chǎng)，自雇護(hù)士可以在英國(guó)找到高薪班次。原始角色迅速吸引用戶(hù)的注意力，顯示故事，設(shè)置氛圍，發(fā)送消息并以與平臺(tái)的語(yǔ)氣和語(yǔ)音相對(duì)應(yīng)相得益彰。

這是該公司的登陸頁(yè)面，為營(yíng)銷(xiāo)和促銷(xiāo)提供完整的服務(wù)周期。自定義數(shù)字插圖可以通過(guò)快速視覺(jué)提示講述所提供服務(wù)的性質(zhì)，通過(guò)鮮艷的調(diào)色板設(shè)置心情并支持頁(yè)面所有部分的完整性。

吉祥物

一個(gè)吉祥物是一個(gè)字符，一個(gè)擬人化的形象，成為一個(gè)品牌，公司，服務(wù)，甚至公眾人物的符號(hào)表示。

在Web用戶(hù)界面中，吉祥物可以作為通信和交互的有效元素。改變其外觀（例如，情緒，裝備，活動(dòng)等），您可以快速向用戶(hù)傳達(dá)明確的信息。吉祥物可以直接與語(yǔ)音泡沫通信，提供各種面部表情的視覺(jué)提示，用不同的圖形變化反映用戶(hù)的情緒，在教程中給出有用的指示并祝賀成就。所有提到的內(nèi)容使得與系統(tǒng)的交互更像人類(lèi)，從而增強(qiáng)了一般用戶(hù)體驗(yàn)。

可愛(ài)和友好的吉祥物用作銷(xiāo)售兒童書(shū)籍的電子商務(wù)網(wǎng)站的英雄形象。

最初創(chuàng)建的角色用作嬰兒用品的吉祥物

3D渲染

今年增加其存在的另一種類(lèi)型的網(wǎng)絡(luò)視覺(jué)效果是3D渲染。這些是通過(guò)將3D線框模型轉(zhuǎn)換為2D圖像而創(chuàng)建的計(jì)算機(jī)圖形。許多圖像都具有照片級(jí)真實(shí)效果，這是網(wǎng)頁(yè)設(shè)計(jì)的大優(yōu)勢(shì)。如果您需要的照片內(nèi)容無(wú)法獲得或非常昂貴，3D渲染可能會(huì)很好。

請(qǐng)記住，這種圖形需要特定的技能以及藝術(shù)眼光和品味。此外，它非常昂貴且耗時(shí)。然而，做得好的3D圖形極具吸引力且令人信服，因此它們可以對(duì)網(wǎng)頁(yè)設(shè)計(jì)外觀和轉(zhuǎn)換率產(chǎn)生巨大影響。

這是一家公司的網(wǎng)站，利用太陽(yáng)能設(shè)計(jì)和建造可持續(xù)發(fā)展的住宅，以獲得所需的能源。房屋的3D渲染模型允許用戶(hù)查看所提供服務(wù)的逼真圖像，甚至操縱它以在白天和夜晚模式中查看視圖。

這是設(shè)計(jì)工作室的網(wǎng)站，專(zhuān)門(mén)從事室內(nèi)外設(shè)計(jì)可視化。為頁(yè)面呈現(xiàn)的高質(zhì)量3D圖形占據(jù)了所有背景區(qū)域：這樣，圖像立即設(shè)置主題并呈現(xiàn)公司服務(wù)。

這個(gè)預(yù)訂服務(wù)網(wǎng)站使用3D圖形作為一個(gè)大的主題圖像，它占據(jù)了頁(yè)面的左側(cè)部分并立即引起用戶(hù)的注意。藝術(shù)品不僅設(shè)定了主題，而且使界面美觀。

為什么圖像應(yīng)該成為您的Web內(nèi)容的一部分

這是一堆令人信服的事實(shí)：

• Web檔案Wayback Machine共享的研究表明，人們感知圖像的速度比文本快60,000倍
• 心理學(xué)家聲稱(chēng)人們需要大約1/10秒來(lái)獲得視覺(jué)場(chǎng)景或元素的一般感知（文本項(xiàng)目的速度確實(shí)不可能）
• 重要的信息片段通常由大腦固定為視覺(jué)圖像，即使它們是通過(guò)文本感知獲得的
• 圖像不易與背景和周?chē)叵嘟Y(jié)合，而文本高度依賴(lài)于可讀性方面
• 圖像傾向于在長(zhǎng)期記憶中更好地保留，這意味著處理界面的用戶(hù)不需要處理和記住比實(shí)際需要更多的數(shù)據(jù)，因此交互變得更快
• 界面中的視覺(jué)效果可以使其在來(lái)自不同國(guó)家/地區(qū)的人使用應(yīng)用或網(wǎng)站時(shí)更加通用
• 圖片突出了具有文本識(shí)別自然問(wèn)題的用戶(hù)的感知極限，例如閱讀障礙或非閱讀學(xué)齡前兒童。

分享題目：網(wǎng)頁(yè)設(shè)計(jì)中網(wǎng)頁(yè)界面的5種設(shè)計(jì)方法
鏈接URL：http://www.muchs.cn/news46/103296.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、響應(yīng)式網(wǎng)站、動(dòng)態(tài)網(wǎng)站、網(wǎng)站建設(shè)、企業(yè)建站、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)