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

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

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

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

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

• 文字
• 圖片
• 視頻
• 動畫
• 音頻

今天，我們來討論一下這些圖片。

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

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

商標(biāo)

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

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

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

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

相片

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

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

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

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

博物館著陸頁

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

新聞媒體網(wǎng)站

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

家庭工藝網(wǎng)站

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

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

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

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

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

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

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

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

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

大城市指南登陸頁面

插圖

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

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

你可能經(jīng)常看到的插圖

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

我們來看看一些例子。

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

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

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

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

吉祥物

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

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

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

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

3D渲染

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

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

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

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

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

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

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

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

標(biāo)題名稱：網(wǎng)頁設(shè)計(jì)中網(wǎng)頁界面的5種設(shè)計(jì)方法
文章轉(zhuǎn)載：http://jinyejixie.com/news/103296.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、靜態(tài)網(wǎng)站、標(biāo)簽優(yōu)化、企業(yè)網(wǎng)站制作、網(wǎng)站收錄、虛擬主機(jī)

廣告

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