專(zhuān)業(yè)的網(wǎng)站制作和設(shè)計(jì)不可忽略的一些原則

石家莊網(wǎng)站制作可能看起來(lái)很難，因?yàn)樗婕暗綄?shí)現(xiàn)一個(gè)既有用又令人愉快的設(shè)計(jì)，傳遞信息和建立品牌，在技術(shù)上是合理的，在視覺(jué)上是連貫的。只有制作和設(shè)計(jì)出好的網(wǎng)站，才能提高客戶的滿意度，讓用戶更愿意瀏覽你的網(wǎng)站，更有利于提高流量和轉(zhuǎn)化率。那么專(zhuān)業(yè)的網(wǎng)站制作和設(shè)計(jì)不可忽略的一些原則都有什么？下面石家莊今傲科技來(lái)給大家詳細(xì)說(shuō)說(shuō)吧。

1、優(yōu)先(引導(dǎo)眼睛)

好的網(wǎng)頁(yè)設(shè)計(jì)，也許比其他類(lèi)型的設(shè)計(jì)更注重信息。你的武器庫(kù)中更大的工具之一是優(yōu)先。當(dāng)導(dǎo)航一個(gè)好的設(shè)計(jì)時(shí)，用戶應(yīng)該被設(shè)計(jì)者引導(dǎo)在屏幕周?chē)?。我稱之為優(yōu)先，這是關(guān)于你的設(shè)計(jì)的不同部分有多少視覺(jué)重量。

一個(gè)簡(jiǎn)單的例子是，在大多數(shù)網(wǎng)站中，你首先看到的是徽標(biāo)。這通常是因?yàn)樗艽螅⑶冶辉O(shè)置在研究顯示的人們一個(gè)看的地方(左上角)。這是一件好事，因?yàn)槟憧赡芟胱層脩袅⒓粗浪麄冊(cè)诳词裁淳W(wǎng)站。

但是優(yōu)先權(quán)應(yīng)該更進(jìn)一步。您應(yīng)該通過(guò)一系列步驟引導(dǎo)用戶的眼睛。例如，您可能希望您的用戶從徽標(biāo)/品牌轉(zhuǎn)到主要的定位聲明，緊挨著一個(gè)醒目的圖像(以賦予網(wǎng)站個(gè)性)，然后轉(zhuǎn)到主體文本，導(dǎo)航和側(cè)邊欄在序列中占據(jù)次要位置。

你的用戶應(yīng)該看什么，這取決于你，網(wǎng)頁(yè)設(shè)計(jì)師，去弄清楚。

為了獲得優(yōu)先權(quán)，您可以使用許多工具:

位置—頁(yè)面上某個(gè)東西的位置會(huì)明顯影響用戶看到它的順序。

顏色—使用大膽而微妙的顏色是告訴您的用戶在哪里尋找的簡(jiǎn)單方法。

對(duì)比—與眾不同會(huì)讓事情脫穎而出，而相同會(huì)讓事情變得次要。

大小—大優(yōu)先于小(除非一切都很大，在這種情況下，由于對(duì)比，小可能會(huì)突出)。

設(shè)計(jì)元素—如果有一個(gè)巨大的箭頭指向某個(gè)東西，猜猜用戶會(huì)看哪里？

2、間隔

當(dāng)初次開(kāi)始設(shè)計(jì)時(shí)，我想用東西填滿每一個(gè)可用的空間?？盏厮坪鹾芾速M(fèi)。事實(shí)上恰恰相反。間隔讓事情變得更清晰。在網(wǎng)頁(yè)設(shè)計(jì)中，你應(yīng)該考慮空間的三個(gè)方面：

行距

當(dāng)您布局文本時(shí)，行之間的間距會(huì)直接影響文本的可讀性。太小的空間讓你的眼睛很容易從一行溢出到下一行，太大的空間意味著當(dāng)你讀完一行文字，轉(zhuǎn)到下一行時(shí)，你的眼睛可能會(huì)迷路。所以你需要找到一個(gè)快樂(lè)的媒介。您可以使用“行高”選擇器來(lái)控制CSS中的行距。通常我發(fā)現(xiàn)默認(rèn)值通常是太小的間距。

填料

一般來(lái)說(shuō)，文本不應(yīng)該觸及其他元素。例如，圖像不應(yīng)該接觸文本，邊框或表格也不應(yīng)該。

填充是元素和文本之間的空間。這里的簡(jiǎn)單規(guī)則是你應(yīng)該總是那里有空間。但一般來(lái)說(shuō)，在文本和世界的其他部分之間留出空間會(huì)讓它變得更加易讀和令人愉快。

空格

首先，空白不需要是白色的。該術(shù)語(yǔ)僅指頁(yè)面上的空白(或有時(shí)稱為負(fù)空間)?？瞻子脕?lái)給頁(yè)面平衡、比例和對(duì)比度。大量的空白會(huì)讓東西看起來(lái)更優(yōu)雅、更高檔，例如，如果你去一個(gè)昂貴的建筑工地，你幾乎總能看到很大的空間。如果你想學(xué)會(huì)有效地使用空白，瀏覽一下雜志，看看廣告是如何布局的。手表和汽車(chē)等大品牌的廣告往往有大量的空白空間作為設(shè)計(jì)元素。

3、導(dǎo)航

在網(wǎng)站上令人沮喪的經(jīng)歷之一就是不知道去哪里或者你在哪里。我認(rèn)為對(duì)于大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)，導(dǎo)航是一個(gè)我們已經(jīng)設(shè)法掌握的概念，但是我仍然發(fā)現(xiàn)一些相當(dāng)糟糕的例子。導(dǎo)航有兩個(gè)方面需要記?。?/p>

導(dǎo)航——你能去哪里？ 

這里有一些常識(shí)性的規(guī)則需要記住。在一個(gè)網(wǎng)站上瀏覽的按鈕應(yīng)該很容易找到——在頁(yè)面的頂端并且容易識(shí)別。它們應(yīng)該看起來(lái)像導(dǎo)航按鈕，并且被很好地描述。一個(gè)按鈕的文本應(yīng)該非常清楚它會(huì)把你帶到哪里。除了常識(shí)，讓導(dǎo)航可用也很重要。例如，如果您有一個(gè)滾動(dòng)子菜單，確保一個(gè)人可以在不丟失滾動(dòng)的情況下訪問(wèn)子菜單項(xiàng)是很重要的。類(lèi)似地，在翻轉(zhuǎn)時(shí)改變顏色或圖像對(duì)用戶來(lái)說(shuō)是極好的反饋。

定位——你現(xiàn)在在哪里？

有很多方法可以讓用戶定位，所以沒(méi)有理由不這樣做。在小網(wǎng)站中，它可能只是一個(gè)大標(biāo)題或菜單中相應(yīng)按鈕的“向下”版本。在更大的站點(diǎn)中，您可以利用面包屑小徑，小標(biāo)題和一個(gè)真正丟失的網(wǎng)站地圖。

4、設(shè)計(jì)建造

自從石家莊網(wǎng)站設(shè)計(jì)者過(guò)渡到CSS布局后，生活變得簡(jiǎn)單多了，但是即使現(xiàn)在，當(dāng)你還在Photoshop中的時(shí)候，考慮如何建立一個(gè)網(wǎng)站還是很重要的?？紤]以下情況：

這真的能做到嗎？

你可能已經(jīng)為你的正文選擇了一個(gè)驚人的字體，但是它實(shí)際上是一個(gè)標(biāo)準(zhǔn)的超文本標(biāo)記語(yǔ)言字體嗎？你可能有一個(gè)看起來(lái)很漂亮但是1100像素寬的設(shè)計(jì)，這將導(dǎo)致大多數(shù)用戶使用水平滾動(dòng)條。知道什么可以做，什么不可以做是很重要的，這就是為什么我認(rèn)為所有的網(wǎng)頁(yè)設(shè)計(jì)師都應(yīng)該建立網(wǎng)站，至少有時(shí)候是這樣。

當(dāng)屏幕調(diào)整大小時(shí)會(huì)發(fā)生什么？ 

你需要重復(fù)的背景嗎？它們將如何工作？設(shè)計(jì)是居中還是左對(duì)齊？

你在做技術(shù)上困難的事情嗎？

即使使用CSS定位，像垂直對(duì)齊這樣的事情仍然有點(diǎn)痛苦，有時(shí)更好避免。

您的設(shè)計(jì)中的小變化能極大地簡(jiǎn)化您構(gòu)建它的方式嗎？ 

有時(shí)候，在設(shè)計(jì)中移動(dòng)一個(gè)對(duì)象會(huì)對(duì)以后如何編寫(xiě)CSS產(chǎn)生很大的影響。特別是，當(dāng)一個(gè)設(shè)計(jì)的元素相互交叉時(shí)，它給構(gòu)建增加了一點(diǎn)復(fù)雜性。所以，如果你的設(shè)計(jì)有，比如說(shuō)三個(gè)元素，并且每個(gè)元素都是完全獨(dú)立的，那么它就很容易構(gòu)建。另一方面，如果三者相互重疊，這可能仍然很容易，但可能會(huì)更復(fù)雜一點(diǎn)。你應(yīng)該在看起來(lái)好的和可以簡(jiǎn)化你的構(gòu)建的小變化之間找到一個(gè)平衡。

特別是對(duì)于大型網(wǎng)站，你能簡(jiǎn)化事情嗎？

5、排版

文字是石家莊網(wǎng)站設(shè)計(jì)中常見(jiàn)的元素，所以很多人都在思考它，這并不奇怪。重要的是要考慮以下因素:

字體選擇-不同類(lèi)型的字體對(duì)設(shè)計(jì)有不同的說(shuō)法。有些看起來(lái)很現(xiàn)代，有些看起來(lái)很復(fù)古。確保你在工作中使用了正確的工具。

字體大小—幾年前，擁有非常小的文本是一種時(shí)尚。令人高興的是，這些天來(lái)人們開(kāi)始意識(shí)到文本是用來(lái)閱讀的，而不僅僅是用來(lái)看的。確保你的文本大小一致，足夠大以便閱讀，并且比例適當(dāng)，以便標(biāo)題和副標(biāo)題突出。

間距—如上所述，線與線之間的間距以及與其他物體的距離是需要考慮的重要因素。你也應(yīng)該考慮字母之間的間距，雖然在網(wǎng)上這并不重要，因?yàn)槟銢](méi)有太多的控制權(quán)。

線路長(zhǎng)度—沒(méi)有硬性規(guī)定，但一般來(lái)說(shuō)，你的文本行不應(yīng)該太長(zhǎng)。它們?cè)介L(zhǎng)，越難閱讀。小的文本欄效果更好(想想報(bào)紙是如何編排文本的)。

顏色—我糟糕的習(xí)慣之一是制作低對(duì)比度的文本。很遺憾，它看起來(lái)不錯(cuò)，但讀起來(lái)不太好。盡管如此，我似乎對(duì)我做過(guò)的每一個(gè)網(wǎng)站設(shè)計(jì)都這么做。

段落-在我開(kāi)始設(shè)計(jì)之前，我喜歡在每件事情上證明文字的正確性。這使得我的段落兩邊都有很好的邊緣。不幸的是，對(duì)齊的文本往往會(huì)在自動(dòng)間隔的單詞之間產(chǎn)生奇怪的間隙。閱讀時(shí)這對(duì)你的眼睛不好，所以要保持左對(duì)齊，除非你碰巧有一個(gè)神奇的文本體，恰好有完美的空間。

6、可用性

網(wǎng)頁(yè)設(shè)計(jì)不僅僅是漂亮的圖片。在一個(gè)網(wǎng)站上有如此多的信息和交互，重要的是你，設(shè)計(jì)師，提供所有這些。這意味著讓你的網(wǎng)站設(shè)計(jì)變得可用。

我們已經(jīng)討論了可用性的一些方面——導(dǎo)航、優(yōu)先級(jí)和文本。這里有三個(gè)更重要的問(wèn)題:

堅(jiān)持標(biāo)準(zhǔn)

有些東西是人們所期望的，不給予它們會(huì)引起混亂。例如，如果文本有下劃線，您希望它是一個(gè)鏈接。否則不是好的可用性實(shí)踐。當(dāng)然，你可以打破一些常規(guī)，但是你的大多數(shù)網(wǎng)站應(yīng)該做人們期望它做的事情。

想想用戶實(shí)際會(huì)做什么

樣機(jī)研究是石家莊網(wǎng)站制作中用于實(shí)際“嘗試”設(shè)計(jì)的常用工具。之所以這樣做，是因?yàn)楫?dāng)你實(shí)際使用一個(gè)設(shè)計(jì)時(shí)，你經(jīng)常會(huì)注意到一些小事情會(huì)產(chǎn)生很大的不同。

考慮用戶任務(wù)

當(dāng)用戶來(lái)到你的網(wǎng)站時(shí)，他們實(shí)際上想做什么？列出人們?cè)谝粋€(gè)網(wǎng)站上可能做的不同類(lèi)型的任務(wù)，他們將如何完成這些任務(wù)，以及你想讓他們做起來(lái)有多容易。這可能意味著在你的主頁(yè)上有真正共同的任務(wù)或者這可能意味著確保搜索框總是易于訪問(wèn)。歸根結(jié)底，你的網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)供人們使用的工具，人們不喜歡使用煩人的工具！

7、對(duì)齊

在網(wǎng)頁(yè)設(shè)計(jì)和平面設(shè)計(jì)中，保持東西整齊是同樣重要的。這并不是說(shuō)一切應(yīng)該是在一條直線上，而是說(shuō)你應(yīng)該從頭到尾，并努力保持東西一致地放在一頁(yè)上。對(duì)齊讓你的設(shè)計(jì)更有序、更容易理解，也讓它看起來(lái)更精致。

8.清晰度

保持你的設(shè)計(jì)簡(jiǎn)潔明了是非常重要的網(wǎng)頁(yè)設(shè)計(jì)。當(dāng)談到清晰度時(shí)，它是關(guān)于像素的。

在你的CSS中，一切都像像素一樣完美，所以沒(méi)什么好擔(dān)心的，但在Photoshop中就不是這樣了。要實(shí)現(xiàn)鮮明的設(shè)計(jì)，您必須：

保持形狀邊緣對(duì)齊像素。如果您在Photoshop中創(chuàng)建形狀、線條和方框，這可能需要手動(dòng)清理它們。

確保使用適當(dāng)?shù)目逛忼X設(shè)置創(chuàng)建任何文本。

確保對(duì)比度高，以便邊界清晰。

過(guò)分強(qiáng)調(diào)邊界只是稍微夸大對(duì)比。

9、一致性

一致性意味著一切都匹配。標(biāo)題大小、字體選擇、顏色、按鈕樣式、間距、設(shè)計(jì)元素、插圖樣式、照片選擇等。一切都應(yīng)該以主題為主題，使你的設(shè)計(jì)在頁(yè)面之間和同一頁(yè)面上連貫一致。

保持你的設(shè)計(jì)一致是為了專(zhuān)業(yè)。設(shè)計(jì)中的不一致就像文章中的拼寫(xiě)錯(cuò)誤。他們只是降低了對(duì)質(zhì)量的認(rèn)知。不管你的設(shè)計(jì)是什么樣的，保持它的一致性總會(huì)讓它更上一層樓。即使這是一個(gè)糟糕的設(shè)計(jì)，至少讓它成為一個(gè)一致的、糟糕的設(shè)計(jì)。

保持一致性簡(jiǎn)單的方法就是盡早做出決定并堅(jiān)持下去。然而，對(duì)于一個(gè)非常大的網(wǎng)站，在設(shè)計(jì)過(guò)程中事情會(huì)發(fā)生變化。

擁有一套好的CSS樣式表也有助于做出一致的設(shè)計(jì)。試著定義像<h1>和<p>這樣的核心標(biāo)簽，以使你的缺省值正確匹配，并避免總是記住特定的類(lèi)名。