• <tbody id="9brb1"><pre id="9brb1"></pre></tbody>

    <em id="9brb1"></em>

  • <th id="9brb1"></th>

  • <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
  • <button id="9brb1"><acronym id="9brb1"><input id="9brb1"></input></acronym></button>
      <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
        更多課程 選擇中心


        UI培訓

        400-111-8989

        UI教程:網頁頂部導航欄設計總結

        • 發布:UI培訓
        • 來源:UI教程
        • 時間:2017-08-11 13:41

        文章導讀

        頂部欄中常見的元素

        漢堡包按鈕和雙層菜單

        頂部欄的文字和配色

        ......

        本文ui培訓班帶你探究頂部欄設計的學問。

        網頁中的header,一般我們稱之為頂部導航欄,這里為了行文方便,以下都簡稱頂部欄。頂部欄對于一個網站的用戶體驗來說是至關重要的,因為根據用戶的瀏覽習慣(從左到右,從上到下),當他們進入一個新的網站,頂部欄通常是他們最先看到的地方。我們都知道用戶對于你產品的第一印象是很重要的,因為它會一直伴隨接下來的使用過程,而且第一印象無法更改。

        【網頁頂部導航欄設計總結】

        但是頂部欄卻是我們設計的一個盲區,我們很少花心思的去研究它。因為我們覺得頂部欄無非是一個logo,幾個文字鏈接堆砌起來作為菜單,著實沒有什么需要注意的地方。但是事實上頂部欄設計的學問遠不止這些。

        頂部欄的內容

        在進行頂部欄設計前,首先我們要確定的是應該要展示哪些內容。一般來說,頂部欄有以下一些內容:

        1 品牌logo

        2 菜單

        3 搜索框

        4 提示消息

        5 登錄/注冊

        6 聯系方式

        7 語言切換

        8 其他產品或者移動端app的下載鏈接

        9 行為召喚鏈接(我要投稿,我要發博)

        以上這些都是頂部欄中常見的元素,在設計的時候我們要根據產品自身的實際情況進行取舍,畢竟這些信息全部放上去也不太現實。信息過度加載會增加用戶的使用負擔,注意力會被分散。

        漢堡包按鈕

        取舍當然意味著既有“保留”也有“舍棄”,但是UI設計中的“舍棄”更多的是指“隱藏”——隱藏一些次要的功能。

        在隱藏的同時,我們也希望當用戶需要的時候,這些隱藏的功能可以隨時隨地的呈現出來。漢堡按鈕可以幫助我們實現這一點。常見的漢堡按鈕是由三條水平線條構成的,很像兩層面包一層肉的漢堡包,所以我們形象的稱之為漢堡按鈕。

        (ps:漢堡按鈕最初是由國外設計師最先使用并命名,如果是中國設計師發明了它,沒準就叫肉夾饃按鈕了。)

        【網頁頂部導航欄設計總結】

        漢堡按鈕可以通過將一些次要的信息隱藏來釋放頁面的空間,這樣使頂部欄更加的清爽簡潔,用戶的注意力可以更好的集中在那些重要的信息上。

        【網頁頂部導航欄設計總結】

        漢堡按鈕在頁面導航設計中使用的很頻繁,用戶對此很熟悉,所以不會額外增加用戶的學習成本。漢堡按鈕設計最需要注意的地方就是它很容易被用戶忽視,所以我們在設計的時候要通過配色,尺寸,留白的使用來將其適當的凸顯出來。一句話來說,漢堡按鈕既要做到清晰展示,又不能占據太大的空間。

        雙層菜單

        雙層菜單的樣式在近來的頂部欄設計中也愈發受到設計師的青睞。因為現在隨著產品功能的不斷增加與完善,漸漸出現了一些單層菜單無法解決的情況,那就是頂部欄需要展示的內容過多,而且某些特定功能不屬于同一層級。為了更好的應對這類情況,設計師們創造性的使用雙層菜單這種樣式。

        【網頁頂部導航欄設計總結】

        以上面的網站為例,上層的菜單有社交網絡的鏈接(Facebook,Instagram和Twitter),企業logo,搜索框,購物車和漢堡按鈕。下層的菜單有產品種類,營業網點地址,新聞,關于我們和聯系我們。在這種情況下,如果將這些信息以傳統的單行菜單展示,勢必會放不下,造成頂部欄的過度擁擠。

        此外雙層菜單這種設計樣式很新潮,可以給用戶耳目一新的感覺。

        文字和配色

        我們在確定頂部欄上內容和展示方式后要考慮的是設計風格。產品的設計風格要立足于產品自身的定位,這個就意味著設計師的工作不應該僅限于視覺呈現還要懂產品。這里我就不展開來說,因為我其實也不是太懂。

        一般來說,頂部欄的設計風格由配色、文字和圖標來構成。因為這是頂部欄欄上最主要的三個元素,圖標的使用相對較少,最常見的是下拉箭頭和放大鏡圖標。

        【網頁頂部導航欄設計總結】

        首先來說配色,配色主要是指背景色。通常來說,不要給頂部欄添加過重的背景色,選擇淺色或者直接白色。因為顏色過重會造成用戶注意力的分散。此外頂部欄下方是banner,我們在進行banner設計時候會考慮banner配色和頁面整體風格是否搭配。如果頂部欄的顏色過重會制約banner的設計,如果是白色和淺色就沒有這種顧慮了。當然這也不是絕對的,有些網站頂部欄采用深色同樣很好看,有些網站的頂部欄直接是透明,跟頁面內容融為一體。

        【網頁頂部導航欄設計總結】

        再說文字,大部分用戶不會一個字一個字去讀頁面中的信息,他們是“掃描”式閱讀。所以頂部欄上的文字設計首要考慮的是可讀性,要讓用戶在短時間內就可以獲取這些信息。所以我們的文字要做到能夠從背景中凸顯出來,必要的時候可以加粗字體樣式。

        【網頁頂部導航欄設計總結】

        固定型頂部欄

        固定頂部欄代表著另一種設計思路:無論用戶進行何種操作,頂部欄對用戶來說都是可見的。這類的頂部欄適用于頁面內容比較多需要用戶不斷下拉滑動的網站。

        【網頁頂部導航欄設計總結】

        這種交互模式可以很好的提升頂部欄的易用性,但是這是建立在犧牲一部分頁面空間的基礎上換來的,所以我們在使用的時候一定要謹慎。

        極簡風格

        在上面我一直強調頂部欄設計要簡潔明了,要讓用戶一眼就能看明白。因為頂部欄屬于導航體系的一部分,是為了避免用戶迷路,幫助他們更好的使用產品。歸根結底用戶使用你的產品是為了你提供的內容或服務,而不是來看狂拽酷炫的頂部欄。所以我們不能本末倒置,將頂部欄做的過于花哨,進而分散用戶的注意力。

        【網頁頂部導航欄設計總結】

        此外極簡風格很適合響應式設計,可以在多設備上追求一致的用戶體驗。

        【網頁頂部導航欄設計總結】

        簡約設計的另一大優點就是,設計師會經常遇到臨時的迭代需求,領導突然讓你在這里講一個按鈕那里加一個文字標簽,簡約設計為這種突然的迭代需求提供了操作空間。

        總結

        設計師的工作不應該僅限于視覺呈現,還應該考慮交互原則,注重產品的用戶體驗。一款產品的功能性和美觀性是相輔相成的,光做視覺的設計師的作品也無法令用戶的眼睛滿意。希望這篇文章可以給你帶來收獲。

        感謝大家閱讀由ui培訓班分享的“網頁頂部導航欄設計總結”希望對大家有所幫助,更多精彩內容請關注UI培訓官網

        免責聲明:本文來源自網絡,旨在分享提供閱讀,版權歸原作者所有,如有侵權請聯系我們進行刪除

        預約申請免費試聽課

        填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

        上一篇:移動端扁平化2.0設計布局解析
        下一篇:如何七步打造漸變色人物
        • 掃碼領取資料

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        貴州省

        廣西省

        海南省

        2019最新在线国产自拍,2019最新国产在线观看_久久爱久久高清视频 百度 好搜 搜狗
        <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>