當(dāng)設(shè)計(jì)網(wǎng)頁(yè)版面的主題時(shí),我想到了在設(shè)計(jì)中經(jīng)常遇到的錯(cuò)誤,為了能更好地改正這些錯(cuò)誤,我總結(jié)了一些方法。其設(shè)計(jì)原則不僅涉及設(shè)計(jì)方面,如著陸頁(yè)設(shè)計(jì),而且還包括總體工作流問(wèn)題,這將使工作更好地進(jìn)行。在這里,你將很快開(kāi)始創(chuàng)建專業(yè)的站點(diǎn)布局。
把你的想法寫(xiě)在紙上。
看起來(lái)很明顯,但是我發(fā)現(xiàn)很多設(shè)計(jì)師都跳過(guò)了這個(gè)步驟,直接使用Photoshop。通過(guò)正確的布局和清晰的層次感,把你的想法畫(huà)在紙上,就能解決問(wèn)題。先考慮內(nèi)容、布局和功能,然后再開(kāi)始渲染。
開(kāi)始畫(huà)一個(gè)頂層框架。
草圖基本線材將幫助您解決UX問(wèn)題和構(gòu)建布局。在我被要求為一個(gè)項(xiàng)目創(chuàng)建外觀時(shí),我做的第一件事就是設(shè)計(jì)一個(gè)可以解決所有設(shè)計(jì)問(wèn)題的頂層框架。Framework是一個(gè)內(nèi)容UI,可以幫助執(zhí)行操作和通過(guò)它進(jìn)行導(dǎo)航。該工具包含導(dǎo)航和像邊欄和底欄這樣的組件。
為你的PSD添加一個(gè)網(wǎng)格吧。
這聽(tīng)起來(lái)很簡(jiǎn)單。Photoshop設(shè)計(jì)任何東西之前,你需要有一個(gè)合適的格子。Grid會(huì)幫助你建立不同部分的布局;它會(huì)引導(dǎo)你達(dá)到特定的屏幕尺寸要求,并幫助你創(chuàng)建響應(yīng)式模板,使你的空間間隔和許多其他設(shè)計(jì)問(wèn)題保持一致。
鄭州網(wǎng)站設(shè)計(jì)公司選擇網(wǎng)站的版面顏色。
限制色彩和色調(diào)以防止視覺(jué)超載。當(dāng)選擇一組字體時(shí),您應(yīng)該開(kāi)始探索您將在UI、背景和文本中使用的顏色。關(guān)于色彩,我推薦有限的一組顏色和色調(diào)的通用用戶界面。
取決于元素的功能,這些一致性應(yīng)用于UI非常重要。想想Facebook、Twitter、Quora和Vimeo這樣的網(wǎng)站。除UI外,不應(yīng)對(duì)插圖或圖形細(xì)節(jié)進(jìn)行顏色限制,只要它們不影響組件的功能。
五是分區(qū)布局。
網(wǎng)站結(jié)構(gòu)越簡(jiǎn)單,用戶導(dǎo)航越容易。你站點(diǎn)的每一部分都需要講述一個(gè)故事。版式需要幫助內(nèi)容突出說(shuō)明故事中最重要的部分。事實(shí)上,頁(yè)面上不應(yīng)該有很多呼叫,所以所有的東西都應(yīng)該放到最后一個(gè)“我能在這里做什么”。
注意每一個(gè)細(xì)節(jié)。
這可以是一次小小的互動(dòng),一次意想不到的動(dòng)畫(huà)或美學(xué)觸感,或者是一個(gè)按鈕中的小梯度,或者是背景中圍繞盒子的細(xì)微筆畫(huà)。但是總的說(shuō)來(lái),如果你真正喜歡你所做的事情,這種接觸是必要和自然的。如您對(duì)網(wǎng)站設(shè)計(jì)/開(kāi)發(fā)、印刷服務(wù)、品牌設(shè)計(jì)、市場(chǎng)推廣、APP/微信開(kāi)發(fā)、數(shù)據(jù)運(yùn)營(yíng)等方面有更多的需求,請(qǐng)登陸摩恩網(wǎng)站官網(wǎng)進(jìn)行咨詢。