1. <dd id="mhwbf"><track id="mhwbf"></track></dd>

  2. <em id="mhwbf"></em><dd id="mhwbf"></dd>
  3. <rp id="mhwbf"><object id="mhwbf"></object></rp>

    1. <em id="mhwbf"><ruby id="mhwbf"></ruby></em>
      <button id="mhwbf"><acronym id="mhwbf"></acronym></button>

          <dd id="mhwbf"></dd>

          一套理論,一個方法,網頁首屏輕松做!

          來源:優設網
          2021-03-25
          8784
          導語:用一個靈活發散的思維去思考網頁設計,你會發現,一種設計方法的相互組合就可以創造出數不清的新形式。大大的提升網頁設計時的效率和效果。
          閱讀本文大概需要10分鐘

          網頁的第一印象至關重要,它在很大程度上決定用戶是否有興趣瀏覽下去。而這個第一印象則是由網頁的首屏部分所決定,它是最直接傳遞出網頁的功能與印象的媒介。

          一個好的首屏,也能讓你在同質化嚴重的情況下,脫穎而出實現彎道超車。好的,今天就讓我們一起來研究一下,網頁首屏部分的組成、方式以及設計手法吧。

          一套理論,一個方法,網頁首屏輕松做!

          說到首屏大家肯定第一反應是這樣的一個形式,有小伙伴可能會說,這個不就是個 Banner 嗎?那也是很多設計師的誤區,網頁首屏中存在著大量的交互元素在其中。

          一套理論,一個方法,網頁首屏輕松做!

          我們現在來看第一個網頁,這里就包括了五個互動的按鈕在其中,這個是 Banner 所不具備的功能,接下來我們快速的瀏覽一下,這個區域的主要組成模塊。

          一套理論,一個方法,網頁首屏輕松做!
          這個網頁,是一個簡單的組合形式,我們可以劃分為全局導航欄和形象部分。

          一套理論,一個方法,網頁首屏輕松做!

          這兩個網頁是類似的形式,我們稱之為大尺寸頁眉,即這整個區域都是頁眉的區域。

          一套理論,一個方法,網頁首屏輕松做!

          這其中我們又可以細分為:全局導航欄、全屏圖片和形象文案部分。

          一套理論,一個方法,網頁首屏輕松做!
          我們順著這個思路繼續分下去,看到這個網頁的首屏部分,包括了全局導航欄、形象文案和社交鏈接。

          一套理論,一個方法,網頁首屏輕松做!

          但具體我們的首屏高度要設計多少呢?這里我們可以參考 w3school 網站的數據。其他的尺寸我們直接忽略掉,剩下的我們看到 1366×768 像素的尺寸是一個最常見的尺寸。

          一套理論,一個方法,網頁首屏輕松做!

          這里我建立了一個 1920X1080 高度的畫板,點擊標記區域的 “視口高度” 將數值改為 768 像素,即可。

          右面的畫板上就出現了一個虛線標記的地方,這個就是我們的視口高度。

          一套理論,一個方法,網頁首屏輕松做!

          更多的網頁中的基礎內容,大家可以閱讀這篇:

          一套理論,一個方法,網頁首屏輕松做!

          有很多小伙伴問我,老師什么是主頁?什么是著陸頁?它們是相同類型的東西嗎?答案肯定是否定的。

          一套理論,一個方法,網頁首屏輕松做!

          我們以這個網頁為例,它是一個游戲的專題頁面,并不是這個網頁的主頁。

          而是這個網頁的著陸頁,用戶點擊搜索推廣、信息流或其他形式的廣告打開的第一個頁面。著陸頁可以是網站上的一個頁面,也有直接把主頁當作著陸頁使用的情況。

          一套理論,一個方法,網頁首屏輕松做!

          進入的才是這個網頁真正的主頁部分。

          一套理論,一個方法,網頁首屏輕松做!

          如果還不理解,我們可以一本書籍為例。這個書籍的封面可以理解為首頁。而它內部的每一個頁面都可以理解為著陸頁。每個頁面都有自己專門的關鍵詞,這樣就不需要用戶,每次都是從首頁進入了,方便用戶使用。

          一套理論,一個方法,網頁首屏輕松做!

          著陸頁可以著重用來介紹專題活動或者產品。

          一套理論,一個方法,網頁首屏輕松做!

          這個著陸頁作為整個這個網站的介紹專題頁出現。用戶在搜索時,可以根據關鍵詞直接搜索到這個網頁。

          一套理論,一個方法,網頁首屏輕松做!

          這個著陸頁也同樣是起著介紹專題的作用。

          一套理論,一個方法,網頁首屏輕松做!

          著陸頁也常被用介紹產品,這樣我們在搜索這個產品的時候,就可以更快的找到了。

          很多情況下,網頁首屏的形式不斷地被強調,而首屏的功能性卻總是被忽略。這樣就會出現影響用戶使用的情況,因為網頁最重要的作用就是傳遞和收集信息。

          所以設計師在設計一個網頁的首屏部分時,應該更多的去考慮這個網頁想要的提供的功能是什么,而不是一味的追求形式感。當然不同的行業,所要求的網頁的功能也是不同的。接下來的部分我們主要來探討一下這個問題。

          一套理論,一個方法,網頁首屏輕松做!

          一個網頁主要受到三個因素的影響。行業、功能和形式。這三個元素又在互相影響。

          一套理論,一個方法,網頁首屏輕松做!

          一套理論,一個方法,網頁首屏輕松做!

          首先,行業決定了功能性。我們用醫療這個大行業下的,醫院類型、保健類型和醫學院類型的網頁來說明。

          一套理論,一個方法,網頁首屏輕松做!

          首先我們來看醫院類型的網頁,這種特定的行業類型,要求的網頁功能就會比較全面。

          一套理論,一個方法,網頁首屏輕松做!

          首先就是為了方便用戶提供的預約功能。

          一套理論,一個方法,網頁首屏輕松做!

          在這個基礎上,網頁中還會加入導航功能,這是為了讓用戶更容易去找到這家醫院。

          一套理論,一個方法,網頁首屏輕松做!

          網頁設計者還會添加問診功能來方便用戶直接進行查詢。

          一套理論,一個方法,網頁首屏輕松做!

          這個網頁我們就看得更加詳細了,同樣是添加了一個問診功能。

          一套理論,一個方法,網頁首屏輕松做!

          我們來總結一下,除了最基本的形象功能外,醫院類型的網頁還添加了預約功能、客服功能、導航功能和問診功能,其本質都是為了可以更好的服務客戶。

          一套理論,一個方法,網頁首屏輕松做!

          到了保健類型的網頁時,這個功能就會相應的發生變化,由于是保健的性質,更多是從招攬客戶這個點而出發的。

          一套理論,一個方法,網頁首屏輕松做!

          所以這類的網頁,雖然同屬醫療行業,卻有了不同的功能,這里更多的是發揮著這個網頁的形象功能,增加信賴感。

          一套理論,一個方法,網頁首屏輕松做!

          這個網頁則是直接把服務流程放在了首屏部分,可以讓用戶最容易地理解整個服務流程。

          一套理論,一個方法,網頁首屏輕松做!

          這個網頁也是同樣的設計邏輯,通過展示形象來吸引用戶。

          一套理論,一個方法,網頁首屏輕松做!

          保健行業的網頁,幾乎都存在著預約功能,這樣主要是提供了一個用戶和商家互動的渠道,也是契合這類型行業的實際需求。

          一套理論,一個方法,網頁首屏輕松做!

          最后我們來看一下,醫療學校類型的網頁。

          一套理論,一個方法,網頁首屏輕松做!

          因為是屬于教育行業,所以更多是一個形象功能的展示。

          一套理論,一個方法,網頁首屏輕松做!

          這個網頁是一個護士的招聘網站,他就用過輪播視頻的方式,讓用戶能最直觀地感受到護士這個職業的內容和價值。

          一套理論,一個方法,網頁首屏輕松做!

          教育行業的網頁,則更多的是一個形象功能,向客戶傳遞自己的價值觀。

          一套理論,一個方法,網頁首屏輕松做!

          前面說了行業決定功能,以此類推,功能確定著形式,我們主要以旅行行業的網頁進行說明。

          一套理論,一個方法,網頁首屏輕松做!

          這個網頁主要是向用戶展示環境以及服務,也就是我們前面說的形象功能,所以在設計的時候直接做了一個全屏的形式,最好地向用戶展示自己的信息。

          一套理論,一個方法,網頁首屏輕松做!

          這個網頁也是同樣的功能,展示自己的形象,將自己的景色展示出來,這樣可以讓用戶最直觀的看到。

          一套理論,一個方法,網頁首屏輕松做!

          這里則是在展示形象功能的基礎上,添加了一個預定的功能,網頁的形式也發生了一定的改變。

          相關標簽

          免費獲取專屬 《策劃方案 》及報價
          免費體驗我們的業務系統、OA系統、在線教育、電商系統、智慧辦公等產品定制化方案,助力您的信息化發展之路
          即時交流
          在線咨詢 電話咨詢
          在線咨詢
          產品經理

          一對一產品經理

          180 8812 7777
          電話咨詢

          電話咨詢

          0871-6718 6978
          到訪面聊
          返回頂部
          欧美人妻久久精品,久久国产色av免费看,女人国产香蕉久久精品,伊人久久综在合线亚洲