整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          網頁頂部導航欄設計總結

          頁中頂部導航欄往往是用戶進入網站后最先看到的地方,決定著用戶對網頁的第一印象,其重要性不言而喻。

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

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

          頂部欄的內容

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

          1. 品牌logo
          2. 菜單
          3. 搜索框
          4. 提示消息
          5. 登錄/注冊
          6. 聯系方式
          7. 語言切換
          8. 其他產品或者移動端app的下載鏈接
          9. 行為召喚鏈接(我要投稿,我要發博)

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

          漢堡包按鈕

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

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

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

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

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

          雙層菜單

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

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

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

          文字和配色

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

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

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

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

          固定型頂部欄

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

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

          極簡風格

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

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

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

          總結

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

          #專欄作家#

          王M爭,人人都是經理專欄作家,資深互聯網人。

          本文由 @王M爭 翻譯發布于人人都是產品經理。未經許可,禁止轉載。

          單而有效的導航菜單對用戶體驗及搜索效率有著明顯的幫助。今天,我們將演示一些讓人印象深刻導航方案,包括有趣的,原創的,甚至十分超前的設計。這些方案中,部分比你平常對導航的認識要復雜的多。

          我們不只是出于設計的原創性才列出了這份清單。清單中的多數示例對技術有著大膽的使用,使我們的清單更加有啟發性、教育性。

          JOVA

          Jova // Home

          Jova的導航菜單干凈、純粹,并且在菜單結構上也很恰當,感覺相當和諧。

          細而直的線條,網格布局,黑與白的配色,干脆而鋒利的排版,幾何風格的文本,這些導航元素的組合使網站給人以精致的感覺,在淡化過的圖片背景下效果更為突出。

          Beloesuhoe

          注:翻譯者最愛,整個網站都炫酷到沒朋友。

          Beloesuhoe Production

          這支團隊的設計巧妙并且獨具一格,在打開網站后你就會感受到強烈的視覺沖擊。乍一眼看上去,首頁就只有一張背景圖片,但在菜單title旁像脈搏一樣跳動的紅點暗示著這一切并不是那么簡單。準確的說,這些菜單不是無趣的平鋪直敘,而是本身就具有交互效果,引導你點擊前往你所需要的頁面。

          這項與實物圖片結合的設計其實帶有一絲虛擬現實的味道。

          First Person

          First Person

          First Person創造了一個復雜而超現實的立方體,認真嚴謹的透視效果相當有趣,立方體還有白天和黑夜兩種狀態。但這種方式還是難以作為主導航來使用,吸引用戶的作用更加明顯。無論怎樣,這種使用動效技術,展示一個物體深入細節的創意簡直可以用天馬行空來形容。

          Mint Design Company

          Mint Design Company : Melding Art With Technology

          Mint Design有種讓人難以置信(譯者:為什么英文寫作好愛用incredible,別這么dramatic好嗎...)的設計。網站使用了手繪的插圖,并且配合合理的動效,讓該網站充滿了生氣。得益于是藝術項目的原因,所有元素,包括導航風格都相當統一。每個菜單項都有黑白和彩色兩種狀態,通過這種設定,狀態之間的不停切換帶來了活潑的感覺。

          Vive Latino

          Vive Latino 2015

          這只團隊試圖用涂鴉的方式讓自己的首頁更加突出。干凈的單色方案、手繪排版設計、動態的小人物,這些元素不僅為了渲染一種節日氛圍,也使得菜單導航看起來非常動感。

          Pete Nottage

          Pete Nottage

          對色彩的放縱、肆意的使用使得網站新奇而跳動。網頁上的城市由充滿生氣的扁平化元素組成,整個城市好像一個游樂場,而主導航也融入其中。

          開發者不僅對諸如轎車和快艇的一些細節添加了動效,通過點擊還可以使一些元素以有趣的方式消失。這些設計細節相當逗比又迷人。

          Moira Young

          Home

          Moira Young自然又略帶夢幻的主題使網頁變得高雅而精致。導航不像平常一樣顯眼,每個鏈接都隱藏在大樹旁跳動的微光里。

          Mathilde Jacon

          www.mathildejacon.com/

          Mathilde Jaco的首頁只有一個主體——一個可交互的、圓形的菜單導航,出乎尋常而又有趣。最重要的是,每個不同想小分塊代表了不同的鏈接,通過組合的方式實現了風格獨特的導航設計。

          Bancolombia

          Bancolombia

          和上訴部分例子很像,主頁在風景畫融入了動態元素。不過要特別提到的是該網頁需要flash,這些亮點在H5的情況下將不復存。

          Nat-Ant

          Nat-Ant

          對極簡主義有所體現的設計一向值得關注,該網站的設計和結構恰是如此。整個網頁從整體看上去非常簡潔與純粹,并有大量的留白,僅有的一些元素也是精致的分散在頁面上。他們用一種不平庸的方式展現了菜單導航。

          總結:

          非傳統的、不陳腐的導航方式總能引起用戶關注,激發他們的興趣。好的導航設計能夠使一個原本普通的頁面得到升華。

          無論怎樣,知道什么時候提醒自己別再讓網頁變得喧鬧和擁擠是至關重要的,因為在多數情況下這對用戶非常關鍵,即使你的網頁看起來是多么有趣或不平常。

          本文節選自http://designmodo.com/,原作者為Nataly Birch

          作者:Park不是韓國人

          來源:簡書

          來源:http://www.jianshu.com/p/22598accbe3b

          注:相關網站建設技巧閱讀請移步到建站教程頻道。

          頁導航設計


          一、什么是導航系統

          回憶一下,黃金周你去某個不熟悉的國家度假,有沒有找不到路的情況?

          回憶一下,你去逛盧浮宮,里邊的道路很多,你很難到哪一條是你來時的路

          很多時候我們需要生活中的這些導視系統,或者導航才能找到正確的方向

          在國外的朋友突然給我發來一條鏈接,讓我幫他看看買哪款手機比較合適

          我在哪個頁面?我怎么查看其他的手機在哪?回到主頁后怎么再找到這個頁面?

          導航系統

          是如何通過導航信息來瀏覽或者操作網站的系統

          是讓用戶知道自己在哪、可以去哪的系統

          組織系統和導航系統的關系是什么?

          我收藏了這首歌,我想去“我的音樂“看看是否成功

          導航讓信息跨越組織結構,人們可以在整個網站中自由穿梭

          導航設計需要兼顧靈活性和避免混亂


          二、網頁導航

          1.全局導航

          網頁中的導航 每一頁都會顯示全域導航系統

          2.局部導航

          局部導航系統和其內容 被稱為“子網站”或“網站中的網站”

          3.全局導航+局部導航

          很多網站會把全局導航和局部導航 結合使用 ——巨型菜單

          4.情景導航

          有節制地使?情景式導航可以增加靈活性來彌補現有導航系統的不足

          它提供了了交叉銷售、提升銷售、打造品牌和提供顧客價值的真正機會

          5.輔助導航

          不屬于網站的層級結構,但是可以提供查找內容和完成任務的輔助方法

          1.站點地圖

          https://www.adidas-group.com/en/service/sitemap/

          • 顯示信息結構的前幾層
          • 對于只有2-3層的產品來說,站點地圖是多余的
          • 它適用于大型內容的網站

          2.索引

          聯合國的?站,全網關鍵信息頁面的字?索引,幫助?標清晰的用戶找到所要的信息。

          http://www.un.org/en/sections/about-website/z-site-index/index.html

          lynda的網站,所有課程的的字母索引,幫助?標清晰的用戶找到所要的信息。

          https://www.lynda.com/subject/all

          6.其他導航

          1.指南

          導游、教程、針對特定用戶、主題或任務走查;

          為新手介紹有關網站內容和功能的工具

          2.個性化

          我們才用戶想要什么

          3.有好導航

          提供用戶不常用的鏈接,以便在需要的時候提供便利,比如法律信息、反饋等

          4.自定義

          用戶告訴我們他們想要什么


          三、如何設計網頁導航?

          蘋果官網的組織系統

          用站點地圖的方式來組織內容信息

          工具網址:https://slickplan.com/

          頁面的組織方式一:

          頁面的組織方式二:

          命題

          我們要為城市白領設計一個音樂APP

          用用戶故事檢查功能是否完成

          用信息框架靈活設計頁面


          四、幾種組織架構和導航設計

          1.單頁面 FlatSingle page

          所有內容信息的頁面站點都放在同一個頁面,一個頁面分成好幾個部分

          網址:https://getobachan.com/

          2.線性層級 sequence site

          一般是任務型的網站,以完成任務為目標

          網址:www.teambition.com

          3.扁平層級 Flat

          十個?面以內,?個?面都是可以相互交叉訪問的,只有一層導航,?般是個人或小型機構的網站,

          這類?站需要保證內容不會有?幅度增長

          網址:http://www.momentomultimedia.com/

          網址:https://www.superduper.wtf/#stuff_we_did

          4.絕對層級 Strict hierarchy

          每個?網站的?面只能通過?級網頁訪問,不能交叉訪問

          5.多維層級 Multidimensional hierarchy

          打破父子級關系,任何兩個界面之間都有可能有交集,一個頁面也可以和多個頁面有交集

          推薦

          推薦書籍

          《信息架構-超越web設計》《?用戶體驗設計要素》

          推薦線框圖工具

          Balsamiq:

          https://balsamiq.com/

          超快速原型繪制工具,里面有很多組件可以直接使用,但是靈活度不夠

          Axure:

          https://www.axure.com/

          是一個專業的快速原型設計工具, 讓負責定義需求和規格、設計功能 和界面的專家能夠快速創建應用軟 件或Web網站的線框圖、流程圖、 原型和規格說明文檔

          Omnigraffle:

          https://www.omnigroup.com/omnigraffle

          OmniGraffle可以用來繪制圖表, 流程圖,組織結構圖以及插圖, 也可以用來來組織頭腦中思考的 信息,組織頭腦風暴的結果,繪 制心智圖,作為樣式管理器,或 設計網頁或PDF文檔的原型

          推薦線框圖工具

          Sketch

          https://www.sketchapp.com/

          專業的界面設計軟件,功能強大,插件更新速度快,操作體驗不錯


          主站蜘蛛池模板: 亚洲色精品VR一区区三区| 亚洲av午夜福利精品一区人妖| 亚洲国产一区二区视频网站| 久久久久人妻精品一区蜜桃| 国产一区二区草草影院| 亚洲毛片αv无线播放一区| 色综合久久一区二区三区| 亚洲国产日韩一区高清在线 | 亚洲国产日韩在线一区| 国产一区二区三区在线影院| 国产一区在线视频观看| 在线精品一区二区三区电影 | 久久一区二区三区免费| 精品在线一区二区三区| 日本一区中文字幕日本一二三区视频| 一区二区三区午夜视频| 人妻夜夜爽天天爽爽一区| 少妇精品无码一区二区三区| 国产成人一区二区三区在线| 国产免费伦精品一区二区三区| 风流老熟女一区二区三区| 国产一区二区三区美女| 午夜在线视频一区二区三区| 亚洲乱码av中文一区二区| 四虎在线观看一区二区| 福利在线一区二区| 国产AV一区二区精品凹凸| 无码精品人妻一区二区三区免费| 香蕉久久ac一区二区三区| 国产一区二区福利久久| 精品无码成人片一区二区| 日韩一区二区三区在线观看| 久久精品国产一区二区| 精品福利一区二区三| 精品视频一区二区三区免费| 亚洲国产精品一区二区第一页| 久久精品黄AA片一区二区三区| 亚洲精品一区二区三区四区乱码| 国产一区二区三区乱码在线观看| 日本中文字幕在线视频一区| 国产亚洲一区二区三区在线|