国模大胆无码私拍啪啪AV,日本胸大公妇被公侵犯中文字幕,天堂无码人妻精品一区二区三区,国产精品18禁污污网站

鄭州APP開(kāi)發(fā)
鄭州APP開(kāi)發(fā)電話(huà)
網(wǎng)頁(yè)設計應該掌握的分割布局
2013-06-06

鄭州網(wǎng)站建設開(kāi)拓者科技認為作為網(wǎng)頁(yè)設計師,我們可以參考的設計范例和布局原則有很多,比如說(shuō):柵格化、縱向一致性、F型布局、Z型布局、三分法則、黃金分割法等等。注重這些原則將會(huì )給你的設計帶來(lái)視覺(jué)吸引力和功能性——現在讓我們來(lái)看一種簡(jiǎn)單的方式,將頁(yè)面兩等分。

雖然在一開(kāi)始聽(tīng)起來(lái)有點(diǎn)傻,但是這種基本布局確實(shí)能起到非常好的效果。當我們通覽一個(gè)頁(yè)面時(shí),我們的視線(xiàn)常常會(huì )沿著(zhù)一個(gè)“之”字形移動(dòng)。而如果用戶(hù)的視線(xiàn)是沿著(zhù)一條水平線(xiàn)移動(dòng)時(shí)——就像在Z型布局里一樣,那么他/她就會(huì )很專(zhuān)注(或者說(shuō)嘗試著(zhù)專(zhuān)注)。但由于初來(lái)你網(wǎng)站90%的用戶(hù)都不會(huì )很仔細的去關(guān)注你的頁(yè)面,因此讓你的設計“瀏覽起來(lái)友好”肯定會(huì )獲得不錯回報哦!

\

(圖1)

眼動(dòng)和“之”字形

從雅虎的眼動(dòng)追蹤研究可以發(fā)現:

·人們通過(guò)掃視頁(yè)面的主要部分去判定這是個(gè)什么網(wǎng)站以及他們是否想在這多呆一會(huì )。

·用戶(hù)僅僅在三秒內就會(huì )對頁(yè)面做出決定

·如果用戶(hù)決定留在頁(yè)面,他們會(huì )最關(guān)注屏幕頂部的內容。

網(wǎng)站的用戶(hù)總是很匆忙,他們有其它的事情要做,你不要指望他們會(huì )停下來(lái)去欣賞你網(wǎng)站的美學(xué)。雖然良好的美學(xué)設計是非常重要的,但是這并不能完全激發(fā)訪(fǎng)問(wèn)者去采取行動(dòng)——去點(diǎn)擊“立即購買(mǎi)”或者“了解更多”按鈕。

我們不能去埋怨這些用戶(hù)。永遠記住,當你想查詢(xún)什么東西時(shí)?你會(huì )急著(zhù)打開(kāi)谷歌的第一個(gè)搜索結果并且火速看完,或者更確切的說(shuō),是粗略的瀏覽整個(gè)頁(yè)面。大多數時(shí)間,你甚至是毫不留意就將鼠標滾動(dòng)到了頁(yè)面底部。經(jīng)過(guò)這個(gè)階段后,如果你認為這個(gè)頁(yè)面值得你花時(shí)間,你就會(huì )又回到頁(yè)面頂端并且著(zhù)實(shí)花精力去閱讀和關(guān)注。

那么,用戶(hù)初始瀏覽的目的究竟是什么呢?就是在你最初掃視頁(yè)面時(shí),捕捉到盡可能多的信息。如果我們以某種方式“制定”這種瀏覽模式,應該就能夠得到更多訪(fǎng)問(wèn)者的關(guān)注。通過(guò)觀(guān)察大量網(wǎng)站的熱圖,我得出了一個(gè)共通的趨勢。

\

(圖2)鄭州網(wǎng)站建設

在上圖中你會(huì )發(fā)現,你毫不費勁就能看到那些紅點(diǎn)。奇怪的是,就經(jīng)驗看來(lái),相比于斜線(xiàn)而言,我們的視線(xiàn)能更輕易的跟隨水平線(xiàn)移動(dòng)——因為我們都是沿著(zhù)直線(xiàn)閱讀。但請注意,我討論的是在初始瀏覽階段,并不是你關(guān)注網(wǎng)站每個(gè)細節時(shí)的階段。

 

每當你不是很專(zhuān)注時(shí),你的視覺(jué)流向很自然的就會(huì )呈現為“之”字形。除非有對比度更高或者更重要的元素“召喚”你,不然你的視線(xiàn)就將會(huì )遵循上圖的模式。你還會(huì )發(fā)現,這種模式看起來(lái)和F型布局非常相似,并且用戶(hù)會(huì )在紅色端點(diǎn)有短暫的停留。

你的大腦會(huì )在這些“暫停點(diǎn)”生成快照。在之字形布局里,在這些“暫停點(diǎn)”布置一些包含重要信息的元素,用戶(hù)的大腦就會(huì )很自然的吸收更多的細節,并將這些作為獨立實(shí)體存在的“之”形端點(diǎn)聯(lián)結起來(lái)。

\

(圖3)

“設計不僅僅是它的外觀(guān)怎樣或者感覺(jué)如何,而是它是如何工作的。——史蒂夫·喬布斯”

舉例來(lái)說(shuō),你可以利用半分割布局的這一特點(diǎn)去有效的布置你作品集的預覽、你的產(chǎn)品或服務(wù)的重要特性,這樣很快就能引起網(wǎng)站訪(fǎng)問(wèn)者的注意。最終會(huì )激勵用戶(hù)在您的網(wǎng)站停留更久,并說(shuō)服他們采取行動(dòng)。這樣的話(huà),結果會(huì )是怎樣呢?將給您的網(wǎng)站帶來(lái)更高的轉換率,同時(shí)給訪(fǎng)問(wèn)者帶來(lái)更好的用戶(hù)體驗。

將分割布局應用到設計中

\

(圖4)鄭州網(wǎng)站建設

讓你的設計和布局兼容“之”字形非常簡(jiǎn)單。實(shí)際上,這和將你的頁(yè)面分為兩等份一樣簡(jiǎn)單!兩等分的效果很好,因為“之”字形的端點(diǎn)或多或少能對齊到這兩等分的中心。疊加使用,它們能很好的相互呼應。將重要元素放置在你網(wǎng)頁(yè)中“之”字形的紅色端點(diǎn)處,這就是分割布局或者說(shuō)1/2布局包含的基本理念。

 

最近,我致力于設計一個(gè)“即將來(lái)臨”的登陸頁(yè)面。我嘗試了多種布局,但是沒(méi)有一種效果讓我滿(mǎn)意。我幾乎試了每一種——比如柵格化,黃金分割比,F型布局等。但是僅當我將頁(yè)面兩等分時(shí),那一刻有一種強烈的“我找到了!”的感覺(jué)。解決的辦法竟如此簡(jiǎn)單!它看起來(lái)優(yōu)雅而整潔,并且提醒了我一個(gè)重要的事實(shí):簡(jiǎn)單不一定是壞事。你看到微軟的新標志了嗎?

\

(圖5)

“簡(jiǎn)潔是終極的復雜.——萊昂納多·達·芬奇”

\

(圖6,http://www.futfolle.com/

你能看到兩等分如何體現出一種良好的視覺(jué)層次。首先,頂部的“即將來(lái)臨”的紅色緞帶很引人注目。其次,標志也很鮮明?,F在,跟隨我之前提到的“之”字形,訪(fǎng)問(wèn)者看到右半部分的圖片滑塊,最后,到達電子郵件提交表格。

現在讓我們來(lái)看一下,分割布局在一個(gè)網(wǎng)頁(yè)設計師的作品集頁(yè)面中能起到多大作用?設計作品集頁(yè)面的目的是為了向潛在顧客快速展示你作品的主體部分。隨著(zhù)現在這個(gè)產(chǎn)業(yè)如此飽和,顧客的選擇有很多很多,為什么他們要付錢(qián)給你呢?因此,一個(gè)很棒的第一印象將會(huì )在你的事業(yè)方向中起到?jīng)Q定性作用。讓我們看看,我們可以做些什么?

\

(圖7)

上圖的布局被劃分為兩等分,但是并不遵循我之前提到的“之”字形原則。

雖然它看起來(lái)是個(gè)不錯的布局并且易于觀(guān)看,但是在看完前兩塊元素后就會(huì )讓人感到非常沉悶死板。打破這樣的視覺(jué)流向并且增添視覺(jué)趣味性將會(huì )讓之有所改變。不僅如此,當你試著(zhù)去瀏覽上面這種布局時(shí),你的眼睛會(huì )最先看到第一張圖片,然后跳轉到第二塊的文本上。然而你的訪(fǎng)問(wèn)者并沒(méi)有打算在這個(gè)階段閱讀,因此,他們會(huì )跳轉到其它的點(diǎn),或者徹底離開(kāi)你的頁(yè)面!

但是如果你做了這樣一個(gè)簡(jiǎn)單的調整呢?

\

(圖8)

變得更生動(dòng)有趣了,對吧?簡(jiǎn)單的互換每個(gè)項目里文本和圖片的位置來(lái)增加視覺(jué)上的生動(dòng)性,這樣,這種一致性就不會(huì )讓你的用戶(hù)感覺(jué)到無(wú)聊了。同時(shí),你還能在“之”字模型后放置一個(gè)行為召喚按鈕。

\

(圖9)

這個(gè)“聯(lián)系我”按鈕將會(huì )有更大的機會(huì )被注意到,并且被你更多的用戶(hù)點(diǎn)擊(為什么不進(jìn)行一個(gè)A/B測試去再次驗證一下?)

\

(圖10)

“設計是一項計劃,它將所有元素以最好的方式組織起來(lái)去完成一個(gè)特定的目標。——查爾斯·埃姆斯”

有效的分割布局的例子

隨著(zhù)Facebook新的時(shí)間軸的設計,分割式布局受到了眾人的注目。留意一下,你的視線(xiàn)多輕易就從一個(gè)帖子流向了另一個(gè)。

\

(圖11,鄭州網(wǎng)站建設 

 

Apple公司也采用了分割式布局。這里是iPad mini的頁(yè)面,看看它是多么輕易地將每個(gè)展示iPad mini不同特征的圖片聯(lián)系起來(lái)的。感覺(jué)不錯吧!

\

(圖12,http://www.apple.com/ipad-mini/overview/

很多人認為,微軟為它最近的品牌重塑鋪設了很多新方式,下圖就是他們Surface的信息頁(yè),這個(gè)頁(yè)面也采用了分割式布局。

\

(圖13,http://www.microsoft.com/Surface/en-GB/surface-with-windows-rt/home

Stacey是1/2型布局的極簡(jiǎn)寫(xiě)照

\

(圖14,http://www.staceyapp.com/鄭州網(wǎng)站建設
我很喜歡Quora的主頁(yè),分割式布局能被示范的更簡(jiǎn)單一些么?

 

\

(圖15,https://www.quora.com/

Consumerbarometer.com 利用動(dòng)畫(huà)將“之”字形提升到了一個(gè)新的等級,并且對之進(jìn)行了三角形變異。

\

(圖16,http://www.consumerbarometer.com/#?app=home&viewMode=0

總結:

那么,我們學(xué)到了什么呢?

·用戶(hù)僅在三秒內就能對你的頁(yè)面做出判定

·為了吸引訪(fǎng)問(wèn)者的注意力并且降低頁(yè)面跳出率,我們應該試著(zhù)讓我們的頁(yè)面布局“瀏覽起來(lái)友好”

·就在中心位置劃分你的布局,并且將重要元素調整到“之”字形的端點(diǎn)上,以確保你的訪(fǎng)問(wèn)者在瀏覽后記住更多的細節

本文僅僅是一個(gè)善意的提醒,我們在設計網(wǎng)頁(yè)時(shí),不應忘記使用基本布局和基本設計方法。實(shí)際上,如果應用合適的話(huà),這將會(huì )提高你的轉換率。鄭州網(wǎng)站建設

訪(fǎng)問(wèn)手機端更方便