現(xiàn)在,越來越多的人想要建立自己的網(wǎng)站。這無疑是一件好事,但是,很多設(shè)計(jì)師,尤其是新手設(shè)計(jì)師或者壓根兒就不是設(shè)計(jì)師的小白,都在網(wǎng)頁設(shè)計(jì)上走過不少?gòu)澛贰?/p>
網(wǎng)頁制作中網(wǎng)頁布局相當(dāng)重要,先布局,后細(xì)節(jié),只有在選擇了合適的網(wǎng)站布局以后,才可以順利的進(jìn)行接下來的工作。版面設(shè)計(jì)是在有限的屏幕空間界面對(duì)所有多媒體元素進(jìn)行有機(jī)整合,使整體頁面布局合理得到,感官效果好,便于受眾接受。今天我們來談?wù)動(dòng)螒蛴螒蚓W(wǎng)站頁面布局關(guān)鍵有哪些。
1.網(wǎng)頁結(jié)構(gòu)越簡(jiǎn)單,用戶使用越容易在網(wǎng)站中,每個(gè)模塊都要有個(gè)故事,要給用戶一個(gè)瀏覽的理由和最終的結(jié)果。而設(shè)計(jì)的作用就是強(qiáng)調(diào)這個(gè)故事中最重要的那部分。在現(xiàn)實(shí)設(shè)計(jì)中,主頁面不能將所有的信息都顯示出來,所以你必須在主頁先告訴用戶“進(jìn)了這個(gè)網(wǎng)站你能做什么”。
發(fā)揮你的聰明才智思考一下你能想到的極簡(jiǎn)頁面,有最簡(jiǎn)單的目標(biāo)和必要的構(gòu)件。最后你會(huì)發(fā)現(xiàn),原來保持簡(jiǎn)單這么困難。
2.網(wǎng)站具有清晰的導(dǎo)航
根據(jù)網(wǎng)站的導(dǎo)航去制定需求。一個(gè)清晰明了的用戶導(dǎo)航可以讓游客在網(wǎng)站中自由的訪問,并且根據(jù)需要選擇合適的內(nèi)容,而網(wǎng)站導(dǎo)航的加入也可以加大網(wǎng)友的訪問深度。
3.同類別的信息盡量放在同一區(qū)域。如,交易功能界面金錢數(shù)在右上,就不要在拍賣功能界面金錢數(shù)放在左下了。同樣的,比如商店界面,充值界面選擇,那么這兩個(gè)界面,就可以同時(shí)進(jìn)行布局。如在商店購(gòu)買界面顯示充值入口,購(gòu)買時(shí)金錢數(shù)不足,直接彈出充值窗口等。
4.使用分屏布局,這種布局可以同時(shí)展示兩個(gè)同等重要的內(nèi)容信息。此外,設(shè)計(jì)師將兩種信息相互對(duì)立,創(chuàng)造出完美的對(duì)比,以吸引更多訪客的目光。分屏布局,再加上呼應(yīng)的動(dòng)畫,該網(wǎng)站創(chuàng)建出更加精致的體驗(yàn)。
如果你的網(wǎng)站需要提供兩種截然不同的用戶旅程變體,那么使用拆分屏幕的布局吧。但是要避免在拆分部分添加太多內(nèi)容。如果內(nèi)容過長(zhǎng)過多,分屏設(shè)計(jì)不能很好地?cái)U(kuò)展,會(huì)影響體驗(yàn)。因此,如果你需要在拆分部分提供大量文本或視覺信息,則不適合這種布局。
5.使用一個(gè)固定的側(cè)邊欄導(dǎo)航來顯示整個(gè)布局。導(dǎo)航無疑是任何網(wǎng)站的關(guān)鍵部分,主菜單是大多數(shù)用戶在導(dǎo)航時(shí)首先要查找的內(nèi)容。除了頂部水平導(dǎo)航外,你還可以通過將菜單選項(xiàng)放在固定的側(cè)邊欄中來布局。側(cè)邊欄應(yīng)該選擇頁面左側(cè)或右側(cè)的垂直列。對(duì)于此布局,側(cè)邊欄保持靜止并始終保持可見,而其余頁面隨著用戶向下滾動(dòng)頁面而更改。還要確保這種導(dǎo)航具有可訪問性。
此布局適用于導(dǎo)航選項(xiàng)數(shù)量相對(duì)有限的網(wǎng)站。當(dāng)用戶進(jìn)入頁面時(shí),所有選項(xiàng)最好都在視線范圍內(nèi)。側(cè)邊欄還可以包含菜單以外的內(nèi)容,例如社交媒體鏈接,聯(lián)系信息或你希望訪問者輕松查找的任何內(nèi)容。
在版面的視覺處理上,需要把握好主題與素材、整體與個(gè)體之間的關(guān)系,在統(tǒng)一之中尋求變化,在不對(duì)稱中尋找均衡點(diǎn),促成頁面整體的和諧效果。