欧美成人永久免费_欧美日本五月天_A级毛片免看在线_国产69无码,亚洲无线观看,精品人妻少妇无码视频,777无码专区,色大片免费网站大全,麻豆国产成人AV网,91视频网络,亚洲色无码自慰

當前位置:網(wǎng)站首頁 >> 作文 >> 網(wǎng)頁首屏設(shè)計分辨率分析怎么做優(yōu)質(zhì)

網(wǎng)頁首屏設(shè)計分辨率分析怎么做優(yōu)質(zhì)

格式:DOC 上傳日期:2023-04-28 20:21:24
網(wǎng)頁首屏設(shè)計分辨率分析怎么做優(yōu)質(zhì)
時間:2023-04-28 20:21:24     小編:zdfb

范文為教學中作為模范的文章,,也常常用來指寫作的模板。常常用于文秘寫作的參考,,也可以作為演講材料編寫前的參考,。大家想知道怎么樣才能寫一篇比較優(yōu)質(zhì)的范文嗎?下面是小編幫大家整理的優(yōu)質(zhì)范文,,僅供參考,,大家一起來看看吧。

網(wǎng)頁首屏設(shè)計分辨率分析怎么做篇一

網(wǎng)頁設(shè)計的心得體會

推薦度:

網(wǎng)頁設(shè)計課程設(shè)計報告心得體會

推薦度:

html網(wǎng)頁設(shè)計的心得體會

推薦度:

學校疫情防控標語電子屏

推薦度:

喬遷之喜電子屏祝福語

推薦度:

相關(guān)推薦

每個從事互聯(lián)網(wǎng)行業(yè)網(wǎng)站設(shè)計的人,,對于網(wǎng)頁分辨率大小和首屏尺寸的確定都不陌生,,因為幾乎每天我們都在跟網(wǎng)頁打交道,。下面是小編為大家整理的網(wǎng)頁首屏設(shè)計分辨率分析,歡迎參考~

首屏的英文是above the fold,,fold有折疊之意,,above the fold是指在折疊之后能看到的內(nèi)容。為什么首屏的英文翻譯會跟折疊有關(guān)系呢,?原因很簡單,,這個概念最早用于出版領(lǐng)域,可以簡單的理解為“頭版”,。因為報紙的運輸和分發(fā)過程是折疊起來的,,所以報紙的折疊后暴露在讀者面前的那一部分內(nèi)容就顯得尤其重要,讀者會根據(jù)頭版的內(nèi)容決定是否購買,。因此處于頭版的內(nèi)容意味著編輯認為它們是最重要的,,頭版的內(nèi)容也決定了出版物的立場和定位。所以“above the fold”也用來表示所有優(yōu)先顯示或或優(yōu)先級最高的內(nèi)容,。

“above the fold(頭版)”的概念延伸到互聯(lián)網(wǎng)領(lǐng)域,。用來指代web網(wǎng)頁中不用滾動屏幕看到的信息。與出版業(yè)的“頭版”不同的是互聯(lián)網(wǎng)的首屏區(qū)域是動態(tài)的,,由于互聯(lián)網(wǎng)用戶復(fù)雜的屏幕分辨率環(huán)境,,導(dǎo)致他們看到的首屏內(nèi)容有很大差距。很多店鋪設(shè)計就是因為對首屏的忽視導(dǎo)致很嚴重的體驗問題,。

設(shè)計師應(yīng)該認真思考下自己做過的一些網(wǎng)頁首屏設(shè)計分辨率是多大的,?為什么要定成這么大?有什么理由或是數(shù)據(jù)可以支撐自己的設(shè)計嗎,?帶著這樣的疑問,,我們來看一下一些典型的首屏體驗問題(在1024*768的分辨率下查看的頁面效果)。

問題1:出現(xiàn)橫向滾動條

由于網(wǎng)頁在設(shè)計時沒有充分考慮到寬度的適配問題,,導(dǎo)致了在分辨率比較低的時候,,適配沒有做好,所以寬度方向的內(nèi)容放不下出現(xiàn)了橫向滾動條,,影響了用戶體驗,。

問題2:首屏的完整性

banner的內(nèi)容呈現(xiàn)不完整,傳達出來無效的信息,。如下如的banner產(chǎn)品信息不完整,,也沒有呈現(xiàn)出主題的信息,相當于是浪費了首屏這么重要的位置,。

問題3:切換標簽無變化

由于首屏呈現(xiàn)的內(nèi)容很少,,然后標簽切換的時候,變化區(qū)域在首屏一下,,用戶是看不見的,。導(dǎo)致了用戶會以為切換后沒有反應(yīng),,影響用戶的體驗最終導(dǎo)致流失。(ps:一種可能的解決方法,,用戶切換后,網(wǎng)頁可以稍微向下滑動20%的距離,,讓用戶感覺到操作有變化和反饋)

問題4:鏈接跳轉(zhuǎn)頁面無變化

首頁的大banner在點擊后進入對應(yīng)的推廣頁面,,但是點擊過后只是將菜單收起來,其他的內(nèi)容大小顏色狀態(tài)什么的都沒有發(fā)生變化,。引發(fā)用戶的疑問,,疑問沒反應(yīng)。實際上在首屏以下的內(nèi)容是不一樣的,。只是同樣的首屏banner誤導(dǎo)了用戶,。

看了上面這些首屏設(shè)計不當可能會引起的問題,有些設(shè)計師可能會認為,,首屏并沒有那么重要,,用戶是會滾動屏幕最終看到我們期望他們看到的內(nèi)容。如果你有這樣樂觀的想法,,建議你看一下這份尼爾森的研究報告:(雅各布尼爾森(jakob nielsen),,著名網(wǎng)頁易用性專家。被譽為可用性測試鼻祖,。jakob nielson是尼爾森—諾曼集團的主要負責人之一,,他被《美國新聞與世界報道》雜志譽為“web可用性方面的世界頂尖專家”。他在

根據(jù)這份報告得出的結(jié)論,,即使是在用戶滾動屏幕的前提下,,用戶的注意力分部占比任然是相當懸殊的:用戶會花80%的注意力在首屏以上的內(nèi)容,即使用戶會滑動屏幕,,但也只會花20的注意力在首屏以下的內(nèi)容,。

通過上面分析出來可能出現(xiàn)的問題和列舉的一些經(jīng)過實踐研究的原則,我們了解到首屏設(shè)計的重要性,。那么要從哪些方面來考慮首屏的設(shè)計才能避免了這些問題,,讓我們的網(wǎng)頁在統(tǒng)一各端風格的同時保證用戶體驗?是不是可以從以下方面考慮(因為我們使用網(wǎng)頁必須通過終端,,再通過瀏覽器來查看,,所以可以從這兩方面來考慮問題)

根據(jù)百度統(tǒng)計的數(shù)據(jù),收集了所負責產(chǎn)品的真實用戶終端訪問數(shù)據(jù)(占據(jù)超過90%的分辨率),,然后進行分析,。首先說明一個問題,可能有些人會懷疑百度統(tǒng)計數(shù)據(jù)的真實性,,所以這些數(shù)據(jù)我們僅僅作為參考,,這些數(shù)據(jù)可能會有點差異,,但是靠前的也能說明問題。每個公司都應(yīng)該具備這樣的大數(shù)據(jù)部門來分析這些數(shù)據(jù),,這樣就更有說服力,。縱觀靠前這些分辨率的最小寬度是1024*768,,并且這個分辨率也占據(jù)了第四的位置,,屬于比較重要的我們必須兼顧考慮的'范圍。同時在高度分辨率上選擇768也能滿足90%以上的終端分辨率,。所以最終選擇1024*768的分辨率來進行設(shè)計適配是比較合理的,。當然有些產(chǎn)品根據(jù)數(shù)據(jù)結(jié)果顯示1024*768的分辨率占比很小,那他們設(shè)計師可能就可以忽略不計,,并選擇其他兼顧90%以上的分辨率來進行考慮,。

考慮了終端的問題后,再來看看瀏覽器的問題,。同樣也是根據(jù)百度統(tǒng)一的數(shù)據(jù)列舉了占比比較多的瀏覽器,。分析這些可以獲得的信息就是,充分了解到各瀏覽器的參數(shù),,方便后續(xù)確定首屏的寬度和高度,。有了以上的終端分辨率和瀏覽器數(shù)據(jù)后,可以選取有代表性的數(shù)據(jù)作為依據(jù)推理首屏合理設(shè)計尺寸范圍,。

寬度:1024-15*2=994

高度:768-160-40-120-30=418

根據(jù)實際的情況來進行計算,,減掉對應(yīng)的參數(shù)得到合理的范圍。這樣的思維方式可以應(yīng)用到一切網(wǎng)頁的設(shè)計,,因為只要是網(wǎng)頁設(shè)計就必須考慮這樣的問題,。

可能會有設(shè)計師認為994*418的分辨率在高分辨率的情況下有點浪費空間,那么我們可以從另一種方式來考慮,。那就是根據(jù)實際的數(shù)據(jù)分成兩種以上的分辨率來進行設(shè)計適配,,保證高分辨率和低分辨率用戶的體驗達到很好的統(tǒng)一。下圖知識打個比方,,列舉兩個分辨率進行適配,。

總的來說,994*418的有效設(shè)計范圍可以用來檢測目前的網(wǎng)頁設(shè)計是否合理,。本篇文章只是提供了這樣的一種思路,,如果對于百度統(tǒng)計數(shù)據(jù)有疑問的,可以從所負責的產(chǎn)品本身分析出更準確的數(shù)據(jù)然后進行替換分析,,得出最后的結(jié)果,。

舉個栗子,京東商城就是在寬度大于1024以上的終端顯示器上采用一種分辨率,,然后在小于1024分辨率上做了微調(diào)進行設(shè)配,。在保證整體結(jié)構(gòu)統(tǒng)一的前提下,,優(yōu)化不同終端頁面的體驗。

總的來說,,以網(wǎng)頁首屏分辨率設(shè)計分析的例子提供一種思路,,來使設(shè)計師的設(shè)計都有理可依。同樣的可以延伸到手機端wap,,應(yīng)用,、游戲的分辨率適配。與此同時,,提供的一些思維方式就是在平時的設(shè)計中,,設(shè)計師要多問為什么,!不斷的思考質(zhì)疑自己的方案,,幫忙尋找到更好的支撐。為什么設(shè)計成這個大???圖標樣式為什么要設(shè)計成這樣?在不斷發(fā)問的同時,,設(shè)計師慢慢的可以找到些依據(jù)作為支撐,。

在這個過程中,有幾個明顯的好處就是設(shè)計師會強迫自己學習更多的知識,,讓自己的設(shè)計有理可依后,,在向產(chǎn)品經(jīng)理賣稿的時候,可以更有說服力,,成功率自然也會更高,。在尋找依據(jù)的時候可以從以下幾個方面考慮:首先最有說服力的肯定就是后臺用戶實際的使用數(shù)據(jù)結(jié)果分析,抽取對自己方案設(shè)計有用的部分,;其次,,可以從一些設(shè)計定律原則方面入手,因為這些定律法則都是經(jīng)過很長時間的實踐得出的確實可行的方法,,也可以有很高的說服力,;如果條件允許的話,也可進行用戶調(diào)研或是測試等得出一些結(jié)果做支撐,,等等,。如果能從這幾個方面考慮,都能大大提高自己的分析能力和方案的可信度,。

s("content_relate");

【網(wǎng)頁首屏設(shè)計分辨率分析】相關(guān)文章:

網(wǎng)頁首屏設(shè)計圖文混排的十大技巧

09-14

網(wǎng)頁設(shè)計色系案例分析

11-16

關(guān)于網(wǎng)頁設(shè)計布局的分析

11-14

如何打造優(yōu)秀小屏網(wǎng)頁

09-16

網(wǎng)頁首圖如何設(shè)計才抓住用戶

09-09

網(wǎng)頁設(shè)計技巧

10-02

網(wǎng)頁設(shè)計中的設(shè)計

09-27

網(wǎng)頁設(shè)計的設(shè)計技巧

09-11

網(wǎng)頁設(shè)計求職簡歷

11-20

全文閱讀已結(jié)束,,如果需要下載本文請點擊

下載此文檔
a.付費復(fù)制
付費獲得該文章復(fù)制權(quán)限
特價:5.99元 10元
微信掃碼支付
已付款請點這里
b.包月復(fù)制
付費后30天內(nèi)不限量復(fù)制
特價:9.99元 10元
微信掃碼支付
已付款請點這里 聯(lián)系客服