互聯(lián)網(wǎng)發(fā)展快速,網(wǎng)頁的設(shè)計方式必須不斷更新,
網(wǎng)頁設(shè)計中有許多設(shè)計元素會影響使用者操作,其中選單是引導消費者到達產(chǎn)品頁面很重要的媒介,今天要先從選單設(shè)計談起,現(xiàn)今選單的設(shè)計趨勢,并透過幾個知名
品牌網(wǎng)站與大家分享,這些品牌他們是怎么讓消費者更容易找到想要的產(chǎn)品,一起來看看吧!
為什么網(wǎng)頁設(shè)計方式必須一直求新?由于互聯(lián)網(wǎng)發(fā)展快速,
網(wǎng)頁設(shè)計與開發(fā)又與這些息息相關(guān),我們就需要依照趨勢與需求,去學習與改變我們的設(shè)計方式,例如2007-2010年時期智能手機的普及,衍生了手機版網(wǎng)頁與平版網(wǎng)頁的設(shè)計需求,也改變了制作軟件發(fā)展,進而產(chǎn)生
響應(yīng)式設(shè)計的方式,在2015年手機屏幕尺寸趨向大屏幕的改變,也再次重新調(diào)整了手機版網(wǎng)頁的配置,
網(wǎng)頁設(shè)計師要不斷因應(yīng)科技趨勢與市場需求,學習新的設(shè)計方式。
現(xiàn)今消費者的使用趨勢2014年與2015年相較,民眾使用行動裝置購物從五成提高至八成,手機與平版的消費人數(shù)上升3倍,而電腦版人數(shù)卻減少了22%,我們合理推測有幾個原因:
一、裝置的改變大屏幕手機銷售量占比將達 46%,超越中型手機兩成行動裝置之冠!小屏幕要呈現(xiàn)購物流程等復雜的介面,據(jù)有相當大的難度,屏幕尺寸與解析度的提升,擴大了可視范圍,對于使用者瀏覽更為容易。
二、消費者使用習慣改變,消費者經(jīng)常接觸手機,習慣使用手機上網(wǎng)與操作,對于手機信賴度提高。
三、網(wǎng)頁設(shè)計更為容易操作,手機版購物網(wǎng)頁越來越容易操作,甚至簡化過后介面會來的比電腦版簡單許多。方便性與使用習慣改變,讓消費者愿意選擇使用手機來上網(wǎng)購物。
透過以上的介紹我們可以了解到手機版購物
網(wǎng)頁設(shè)計的趨勢與重要性,
網(wǎng)頁設(shè)計有很多需要注意的地方,今天創(chuàng)新互聯(lián)就先來談?wù)勈謾C版購物網(wǎng)站的選單設(shè)計。
手機版網(wǎng)頁選單需著重導航設(shè)計選單是引導使用者進入產(chǎn)品頁面的媒介,不論是電腦版或行動版網(wǎng)頁,都要著重導航設(shè)計,特別在于手機的畫面有限情況下,應(yīng)以導航為主,將選單舍棄多余的美編圖片、效果及非必要功能。過去在手機版網(wǎng)頁中,對于手機的小屏幕,我們會采用一欄式設(shè)計并加大字級等,但現(xiàn)今手機屏幕尺寸以及解析度的提升,在產(chǎn)品目錄頁中普遍改采用兩欄式呈現(xiàn),接下來透過幾個案例讓大家看看他們是怎么設(shè)計選單的。
案例分析
案例一:Lativ 來源網(wǎng)址:m.lativ.com.tw
Lativ在選單設(shè)計上沒有主選單的圖,直接列出產(chǎn)品的大分類,將其他的會員、購物車放在下方,減少了展開選單的步驟,并營造簡潔風格。
案例二:Uniqlo 來源網(wǎng)址:www.uniqlo.com/tw
Uniqlo選單透過不同顏色來區(qū)分產(chǎn)品大分類,點擊選單圖后直接列出第二層選單,直得關(guān)注的是,可能由于服飾業(yè)中女性網(wǎng)購族群相較于男性來的高,不論是首頁的選單排序,或是點擊主選單后所展開的畫面,都以女裝為優(yōu)先,這是一個了解自己客群后,所做出的良好設(shè)計方式。在第三層的選單中使用產(chǎn)品類別的圖、文呈現(xiàn),并使用兩欄排列,類別示意圖能夠幫助使用者快速分辯產(chǎn)品類別,也增加選單活潑性。
案例三:A Common Space 來源網(wǎng)址:www.acommonspace.com
A Common Space不同于他在電腦版的設(shè)計,將最底層分類直接作為手機版選單,由兩層選單變成一層,讓使用者在選擇產(chǎn)品類別時更為輕松,也將不會一直使用到的功能,如社群、幣別等,收合在選單中,盡可能的保持畫面干凈。
案例四:H&M 來源網(wǎng)址:m2.hm.com/m/en_gb/hm-com.genericdevice.html
H&M的選單使用跳頁方式,在進入第二層時加入該類別的視覺圖像作搭配,并使用不同的畫面,讓使用者清楚知道自己進入了不同頁面。在首頁區(qū)塊中使用產(chǎn)品大分類,讓使用者也可以從首頁區(qū)塊進入產(chǎn)品類別。
案例五:Apple 來源網(wǎng)址:www.apple.com/
Apple選單使用跳頁方式呈現(xiàn),在選擇產(chǎn)品大分類后,進入該類別的專頁,不使用相同的選單樣式,而選擇使用橫式滑塊,并使用分類圖做搭配,在第三層產(chǎn)品介紹項目頁面中,使用第二階層下拉選單。他將每一層做區(qū)分,并針對每一層的不同需求,而對應(yīng)不同的選擇方式。
案例六:PlayStation 來源網(wǎng)址:www.playstation.com/en-us
PlayStation在第一層選單點擊后,左側(cè)保留原本第一層分類圖,右側(cè)顯示第二層分類,清楚讓使用者知道現(xiàn)在在哪一個類別之下,使用者在做上一個類別切換時,不需回到上一層做選擇。
網(wǎng)站欄目:購物網(wǎng)站設(shè)計趨勢:手機網(wǎng)頁選單設(shè)計
文章路徑:http://m.rwnh.cn/news/142670.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有網(wǎng)站設(shè)計等
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)