網(wǎng)頁(yè)設(shè)計(jì)!聊聊兩種最常見(jiàn)的網(wǎng)頁(yè)布局設(shè)計(jì)模式
從今天開(kāi)始,我們也來(lái)聊聊UI設(shè)計(jì)。當(dāng)我們談?wù)揢I設(shè)計(jì)時(shí),其實(shí)我的知識(shí)貢獻(xiàn)范圍也只能是WEB端,當(dāng)然WEB端和軟件端大同小異。但不管是設(shè)計(jì)網(wǎng)頁(yè)界面還是軟件界面,作為設(shè)計(jì)師,那就絕對(duì)不會(huì)否認(rèn)這一點(diǎn):比例、顏色、大小等微妙的元素間的平衡不是一項(xiàng)輕松的工作。
網(wǎng)頁(yè)UI設(shè)計(jì)也是一樣,一個(gè)網(wǎng)站就像和其他傳統(tǒng)的藝術(shù)創(chuàng)作一樣遵循同樣的規(guī)律,最終達(dá)到視覺(jué)的藝術(shù)效果。這是美學(xué)的范疇,同時(shí)隱含著現(xiàn)代商業(yè)的法則。一個(gè)優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)必定是讓人輕松又足夠吸引的。
視覺(jué)的創(chuàng)作組合讓我們先談?wù)劊W(wǎng)站界面的三個(gè)功能。
引導(dǎo)用戶
網(wǎng)站對(duì)用戶的引導(dǎo),就像暗中一只無(wú)形的手,會(huì)指引用戶通過(guò)點(diǎn)擊等操作按鈕瀏覽網(wǎng)站,了解信息,而不會(huì)帶給用戶壓迫感。比如Square這個(gè)網(wǎng)站,當(dāng)你不斷下拉的時(shí)候,會(huì)出現(xiàn)相應(yīng)的文字提示你接下來(lái)繼續(xù)到哪里。
Squareup呈現(xiàn)內(nèi)容間的關(guān)系
按照一定的布局去展示網(wǎng)站的主次內(nèi)容優(yōu)先級(jí),比如abduzeedo這個(gè)網(wǎng)站,就將主推的內(nèi)容放在了最大的頂部三個(gè)卡片展示上,其他的普通內(nèi)容則在下方以列表的方式展示,底部則是一些標(biāo)簽分類的鏈接。
Abduzeedo建立情感聯(lián)系
人們?nèi)ゲ蛷d用餐,其實(shí)不會(huì)只把餐廳當(dāng)做一個(gè)解決食欲的地方。他們會(huì)關(guān)注到餐廳的場(chǎng)地、氛圍、菜式甚至是其中的一些特別的情調(diào),他們?cè)谶@里交談、交易。同樣道理,用戶會(huì)因?yàn)楹湍愕木W(wǎng)站內(nèi)容產(chǎn)生的情感聯(lián)系而接受網(wǎng)頁(yè)界面或交互的小小瑕疵。
瀏覽模式:人眼焦點(diǎn)預(yù)測(cè)
就像你的眼睛會(huì)更快關(guān)注到快速移動(dòng)的物體,或當(dāng)你在街邊被高冷美好的模特吸引一樣。人眼會(huì)在看這一行為中自動(dòng)啟發(fā)對(duì)眼界中出現(xiàn)的某個(gè)物體的特別注意力,我們這里可以稱之為焦點(diǎn)。大部分的人都會(huì)被頁(yè)面中的焦點(diǎn)所吸引。
例如一篇文章的展示,也會(huì)遵循相同的瀏覽模式。99Designs的設(shè)計(jì)作者Alex就提到了兩種主要的瀏覽模式。
F模式這主要在一些以文字為主的網(wǎng)站出現(xiàn),例如博客。F模式就是指,用戶通常會(huì)沿著左側(cè)垂直瀏覽而下,先去尋找文章中每個(gè)段落開(kāi)頭的興趣點(diǎn),這時(shí),如果用戶發(fā)現(xiàn)了他喜歡的,他就會(huì)從這里開(kāi)始水平線方向的閱讀。最終結(jié)果就是用戶的視線呈F型或者E型進(jìn)行瀏覽。
The Nielsen Norman機(jī)構(gòu)曾對(duì)232名用戶對(duì)上千個(gè)網(wǎng)站的瀏覽習(xí)慣進(jìn)行觀察,總結(jié)出F模式的特點(diǎn):
用戶極少逐字閱讀文字。每個(gè)段落的開(kāi)始兩個(gè)字最為重要,這將決定內(nèi)容是否能留住用戶。初始段落,副標(biāo)題和要點(diǎn)都要保持醒目。下圖里的頁(yè)面可以看到,重要的內(nèi)容很清晰的展示出來(lái),并且不會(huì)讓用戶花很多時(shí)間去瀏覽,而次要的內(nèi)容也能快速盡收眼底。F模式對(duì)于那些嵌入廣告的網(wǎng)站也是極為有用的,即使有了廣告,也不會(huì)影響到內(nèi)容。只要記住,內(nèi)容為王,導(dǎo)航可以讓用戶更深入地瀏覽下去。
在所有瀏覽模式中,F(xiàn)模式就是一個(gè)引導(dǎo)路線圖,而不僅僅是一個(gè)頁(yè)面。因?yàn),F(xiàn)模式的網(wǎng)站除了頂部展示區(qū)外,其他的內(nèi)容會(huì)顯得更平淡。就像下圖所示,頂部1000像素后,網(wǎng)站就在水平方向加入了一些卡片式的內(nèi)容組件,讓網(wǎng)頁(yè)內(nèi)容更有趣。
Z模式Z模式的瀏覽模式在于網(wǎng)頁(yè)內(nèi)容主要不是文字的頁(yè)面。不論是否因?yàn)檫@里有個(gè)菜單欄,還是就僅僅因?yàn)閺淖蟮接易陨隙碌拈喿x習(xí)慣,用戶首先關(guān)注的頁(yè)頭水平方向上的內(nèi)容。當(dāng)視線抵達(dá)底部時(shí),又遵循著從左到右的習(xí)慣模式,重復(fù)再水平掃視頁(yè)尾的最底部的內(nèi)容。
Z模式幾乎可以適用到任何的網(wǎng)頁(yè)交互,Z模式的優(yōu)點(diǎn)就是簡(jiǎn)單。如果你的網(wǎng)站內(nèi)容很多并且很復(fù)雜的話,那么用這個(gè)模式,效果就會(huì)稍差。當(dāng)然,這些都不是絕對(duì)的。當(dāng)Z模式簡(jiǎn)化布局,就可以增加轉(zhuǎn)化率,下面這些是可以去簡(jiǎn)化的地方:
背景——運(yùn)用獨(dú)立的背景能將用戶的視線范圍鎖定在你的框架內(nèi)容里。要點(diǎn)1——你的LOGO放置的首要位置。要點(diǎn)2——增加一個(gè)顏色鮮明的輔助操作指令,幫助用戶遵循Z路線瀏覽模式。頁(yè)面中心——頁(yè)面的中心獨(dú)立于頁(yè)頭和頁(yè)尾的部分,引導(dǎo)用戶Z路線瀏覽視線。要點(diǎn)3——增加可以從正在瀏覽的位置移動(dòng)去到底部的圖標(biāo),也就是可以隨時(shí)抵達(dá)最終目標(biāo)。要點(diǎn)4——Z模式最底部的水平線上的內(nèi)容,這將是提供給用戶首要操作的最佳位置。預(yù)測(cè)用戶的視線將會(huì)占有極大的優(yōu)勢(shì)。在布局你的頁(yè)面元素時(shí)前,你就可以知道優(yōu)先的該擺放在什么位置。一旦你知道你想要用戶先看到什么,你就能可以通過(guò)視線的規(guī)律,將你的重點(diǎn)內(nèi)容放在用戶的“熱點(diǎn)”里。
你可以在整個(gè)頁(yè)面不斷重復(fù)Z模式的規(guī)律,就像你在下圖中看到的那樣,一開(kāi)始這個(gè)頁(yè)面就有一個(gè)注冊(cè)按鈕,通過(guò)水平位置的瀏覽,用戶已經(jīng)獲悉了這一信息,下拉會(huì)出現(xiàn)產(chǎn)品的賣(mài)點(diǎn),這些賣(mài)點(diǎn)的展示就是遵循重復(fù)著Z模式的最佳例子,直到最下方的支付選項(xiàng)就抵達(dá)了Z模式的最尾部那個(gè)水平線。
后記:在設(shè)計(jì)中,我們所思考的總是比我們呈現(xiàn)出來(lái)的更多。不管怎樣,這兩種模式只是一個(gè)小結(jié),實(shí)際創(chuàng)作過(guò)程全是花樣百出,絕不是兩種模式就能輕松完成的。但是,在規(guī)律面前,多多益善總不會(huì)錯(cuò)。靈活運(yùn)用規(guī)律才是關(guān)鍵。
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- ps知識(shí)
- ps基礎(chǔ)教程
- 飛屋睿UIdesign
- ps技巧
- 理論教程
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- 圖片畫(huà)冊(cè)平面設(shè)計(jì)排版ps理論教程
- UI知識(shí),尺寸對(duì)UI設(shè)計(jì)的影響
- 色彩知識(shí),講解顏色基礎(chǔ)知識(shí)和配色理論
- 用戶體驗(yàn),如何讓用戶心動(dòng)?
- 移動(dòng)設(shè)計(jì),移動(dòng)應(yīng)用導(dǎo)航模式設(shè)計(jì)方法
- 設(shè)計(jì)界面最常用最舒服的12種顏色(含色
- Photoshop初級(jí)教程-命令的技巧
- 調(diào)色知識(shí),簡(jiǎn)單實(shí)用的調(diào)色原理
- 用戶體驗(yàn),分享20個(gè)有影響力的包裝設(shè)計(jì)
- 顏色管理,讓自己的照片在網(wǎng)上正確地顯示