UI設(shè)計(jì)優(yōu)秀可臨摹素材|網(wǎng)頁(yè)設(shè)計(jì)頭部技巧

時(shí)間：2023-09-09 07:42:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-09 07:42:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

UI設(shè)計(jì)優(yōu)秀可臨摹素材|網(wǎng)頁(yè)設(shè)計(jì)頭部技巧：頭部?jī)?nèi)容設(shè)計(jì)的一些技巧。

1. 關(guān)于尺寸

對(duì)于網(wǎng)頁(yè)頭部圖片的大小是沒(méi)有統(tǒng)一的答案。有時(shí)候設(shè)計(jì)師希望提供相對(duì)固定的數(shù)字，但網(wǎng)頁(yè)設(shè)計(jì)最大的難點(diǎn)之一是很難確保每個(gè)屏幕尺寸的有效性。即使兩個(gè)屏幕的尺寸相同，分辨率也可能不同，因此用戶看到的內(nèi)容也不一定完全一樣。

因此，我們不要拘泥于精確的像素概念，最好遵循經(jīng)驗(yàn)積累的常識(shí)規(guī)則。

舉幾個(gè)可以臨摹的例子，看看優(yōu)秀作品是如何操作的，更多網(wǎng)頁(yè)設(shè)計(jì) 到搜UI(SOOUI) www.sooui.com 根據(jù)關(guān)鍵詞搜索！




HMK Template

頭部的高度本著不干擾內(nèi)容感知的基本原則。對(duì)于一些展示信息資源的頁(yè)面，較小的頭部區(qū)域是一個(gè)不錯(cuò)的選擇，而對(duì)于落地頁(yè)或者企業(yè)客戶首頁(yè)，頭部區(qū)域可能會(huì)更大，而且多數(shù)大客戶會(huì)有主視覺(jué)單屏展示頁(yè)。

如果某些網(wǎng)頁(yè)，例如落地頁(yè)頭部?jī)?nèi)容較長(zhǎng)的情況下，最好在首屏給下一屏內(nèi)容露出一些空間，這樣用戶就可以意識(shí)到下一頁(yè)還有內(nèi)容，引導(dǎo)用戶滾動(dòng)。







單頁(yè)攝影模版

2. Logo展現(xiàn)

當(dāng)一個(gè)人發(fā)現(xiàn)自己在陌生網(wǎng)站上，總是習(xí)慣于從屏幕的左上角開始瀏覽網(wǎng)站。盡管設(shè)計(jì)師有時(shí)候認(rèn)為打破常規(guī)的布局也可以帶來(lái)不錯(cuò)的效果，但是多數(shù)用戶如果他們常規(guī)位置找不到預(yù)期的信息，將會(huì)不假思索地認(rèn)為這個(gè)頁(yè)面是難用的和不規(guī)范的，需要花費(fèi)很多的努力才能理解。這就要看你的設(shè)計(jì)目的和受眾群體能夠接受哪些程度的變化，我們今天主要說(shuō)大多數(shù)受眾。







個(gè)人投資組合的JAVEN HTML模板

Logo ——與居中或右側(cè)放置相比，用戶更容易記住那些 Logo 放在左邊的品牌。如果你使用的是圓形 Logo，那么可以把它居中放置，盡管它的有效性仍然比放在左側(cè)要低。







活套 - 免費(fèi)的figma模板

3. 吸頂導(dǎo)航欄

吸頂導(dǎo)航，換句話說(shuō)就是「粘性標(biāo)題」，當(dāng)你滾動(dòng)頁(yè)面時(shí)，導(dǎo)航區(qū)在頁(yè)面中跟隨，現(xiàn)在成為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)。如果不違反網(wǎng)站整體設(shè)計(jì)理念，請(qǐng)將導(dǎo)航欄吸頂固定。無(wú)論是PC端還是移動(dòng)端設(shè)計(jì)，這都是一個(gè)好的選擇：

• 例如長(zhǎng)頁(yè)面展示、瀏覽內(nèi)容同時(shí)客戶需要導(dǎo)航區(qū)總是在視線范圍內(nèi)。
• 如有滾動(dòng)信息，不斷提示客戶點(diǎn)擊，則可置頂或置底處理。

旅行登陸頁(yè)面

可根據(jù)頁(yè)面內(nèi)容展示要求，向下滾動(dòng)時(shí)調(diào)整導(dǎo)航背景透明度，盡量少的影響內(nèi)容展示同時(shí)使頁(yè)面看起來(lái)更生動(dòng)和通透。還可以在滾動(dòng)時(shí)簡(jiǎn)化導(dǎo)航欄樣式或高度，使用戶能找到但又不過(guò)于搶眼。

總之，固定導(dǎo)航欄有助于提升用戶體驗(yàn)，保持用戶導(dǎo)向并給予了他們更多控制權(quán)。




4. 關(guān)于圖片的應(yīng)用

頭部?jī)?nèi)容所用圖片可以選擇直接和要表達(dá)的業(yè)務(wù)相關(guān)性很強(qiáng)的，例如招聘類網(wǎng)站使用招聘場(chǎng)景圖片；也可以選擇中性感覺(jué)的例如辦公場(chǎng)景、城市風(fēng)景類圖片進(jìn)行虛化降低清晰度或明度來(lái)突出前景內(nèi)容；



節(jié)約用水-UI設(shè)計(jì)

高質(zhì)量圖片——攝影對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)是一個(gè)強(qiáng)大的工具。它可以講述一個(gè)故事，喚起用戶的情感，并鼓勵(lì)訪問(wèn)者進(jìn)一步滾動(dòng)。對(duì)于那些有強(qiáng)烈沖擊力的圖片的網(wǎng)站，試著做一個(gè)透明的標(biāo)題，它可以更好地顯示圖像，并保留了主要鏈接




經(jīng)典咖啡館小資生活時(shí)尚咖啡Cafetaria網(wǎng)頁(yè)設(shè)計(jì)PSD模板設(shè)計(jì)

輪播圖片——如果客戶給了幾張代表該企業(yè)業(yè)務(wù)的出色照片，這種方式就沒(méi)錯(cuò)！企業(yè)希望用戶可以滾動(dòng)瀏覽一組精美的高分辨率圖像。




平板視圖 - 沙龍WordPress主題

插畫——網(wǎng)站的頭部圖片必須能引起讀者的共鳴，建立起人與人之間的聯(lián)系。如果圖片是獨(dú)特的且易于辨認(rèn)，即使是從網(wǎng)站標(biāo)題中剪切出來(lái)，效果也會(huì)很好，可以利用當(dāng)今的插圖潮流來(lái)實(shí)現(xiàn)這一點(diǎn)。




網(wǎng)上銀行平登陸頁(yè)面模板

5. 視頻或動(dòng)畫

當(dāng)然我們也不能只關(guān)注靜態(tài)圖片，添加視頻也是最有效的網(wǎng)站頭部創(chuàng)意之一。如果可能的話，嘗試著在頭部?jī)?nèi)容中添加主題視頻材料，很多網(wǎng)站利用在背景中添加短視頻來(lái)吸引用戶，盡可能以最好的方式展示他們的公司或產(chǎn)品。

Greetmas - 免費(fèi)圣誕賀卡介紹HTML模板| Personlize和發(fā)送