- 相關(guān)推薦
什么叫網(wǎng)頁(yè)設計
導語(yǔ)：網(wǎng)頁(yè)設計(web design，又稱(chēng)為Web UI design，WUI design，WUI)，是根據企業(yè)希望向瀏覽者傳遞的信息(包括產(chǎn)品、服務(wù)、理念、文化)，進(jìn)行網(wǎng)站功能策劃，然后進(jìn)行的頁(yè)面設計美化工作。作為企業(yè)對外宣傳物料的其中一種，精美的網(wǎng)頁(yè)設計，對于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。
網(wǎng)頁(yè)美術(shù)設計(也稱(chēng)網(wǎng)站美術(shù)、美工設計)從某種意義上來(lái)說(shuō)可以稱(chēng)為“eye ball work”，網(wǎng)頁(yè)的美術(shù)創(chuàng )作要能充分吸引訪(fǎng)問(wèn)者的注意力，讓訪(fǎng)問(wèn)者產(chǎn)生視覺(jué)上的愉悅感。因此在網(wǎng)頁(yè)創(chuàng )作的時(shí)候就必須將網(wǎng)站的整體設計與網(wǎng)頁(yè)設計的相關(guān)原理緊密結合起來(lái)。在某種意義上，網(wǎng)站美術(shù)設計是網(wǎng)站成功的主要因素。
網(wǎng)頁(yè)美術(shù)設計與網(wǎng)站整體形象一致，符合藝術(shù)規范和網(wǎng)站標準，著(zhù)重注意網(wǎng)頁(yè)色彩(主色調和次色調)、圖片的應用及版面規劃，保持網(wǎng)頁(yè)的整體一致性。
網(wǎng)頁(yè)設計要點(diǎn)
1、網(wǎng)頁(yè)是客戶(hù)游覽網(wǎng)站獲取信息的主要窗口。為此，頁(yè)面下載速度快、游覽頁(yè)面方便快捷、無(wú)錯誤鏈接是設計網(wǎng)頁(yè)最重要的要求。
2、網(wǎng)站是企業(yè)的門(mén)戶(hù)。為此，網(wǎng)頁(yè)美術(shù)設計一般要與企業(yè)整體形象一致，要符合CI規范。要注意網(wǎng)頁(yè)色彩、圖片的應用及版面規劃，保持網(wǎng)頁(yè)的整體一致性。
3、在新技術(shù)的采用上要考慮主要目標訪(fǎng)問(wèn)群體的.分布地域、年齡階層、網(wǎng)絡(luò )速度、閱讀習慣等。
4、網(wǎng)頁(yè)設計要體現企業(yè)文化和經(jīng)營(yíng)管理。
5、制定網(wǎng)頁(yè)改版計劃，如半年到一年時(shí)間進(jìn)行較大規模改版等。
6、主頁(yè)是客戶(hù)登錄企業(yè)網(wǎng)站，首先看到的一個(gè)頁(yè)面，也是獲取信息的開(kāi)始，為此，主頁(yè)的設計除具體有以上特點(diǎn)外，還要求清晰的導航系統和獨特的創(chuàng )意設計
相關(guān)也讀》》自適應網(wǎng)頁(yè)設計與響應式網(wǎng)頁(yè)設計
在現代網(wǎng)站開(kāi)發(fā)使用中有兩種主要辦法,即自適應和響應式,這兩者都使用斷點(diǎn)的概念,這個(gè)概念是通過(guò)媒體查詢(xún)所創(chuàng )建的限制,在這些斷點(diǎn)上,網(wǎng)站的而已被強制更改.
自適應方法和響應式方法之間的差異可以歸結為,網(wǎng)站在斷點(diǎn)間變化,自適應配制上是一系列寬度固定的布局而響應式使用的尺寸則很靈活,所以即使在斷點(diǎn)之間,網(wǎng)站仍有具有一定的流動(dòng)性.
介于不同設備屏幕尺寸的巨大差異,試圖令一系列寬度固定的頁(yè)面適應即使是最覺(jué)的配置都是一種不明智的做法,更好的做法是使用流動(dòng)設計,它包括使用長(cháng)度值的百分比以令頁(yè)面元素的尺寸適應窗口的大小 ,這種做法也是構建響應的關(guān)鍵.
大多數用戶(hù)所使用的臺式機或筆記本電腦的顯示器寬度大于或等于1024,那么制作一個(gè)寬度固定為960的`頁(yè)面是可以被打官腔的,但這種情況已成為歷史,如果現在還按照上述方式設計,那將意味著(zhù)使用移動(dòng)設備的用戶(hù)看到是一個(gè)按比例縮小的屏幕,他們只有通過(guò)放大,縮小和左右滾動(dòng)才能完全瀏覽頁(yè)面.這種結果并不是不能接受,但也并不理想.
使用百分比而非固定值意味著(zhù)頁(yè)面元素可以隨著(zhù)窗口的尺寸進(jìn)行綻放,從而使內容流進(jìn)屏幕邊界內,這就是為什么這種方法被稱(chēng)為滾動(dòng)設計,將這個(gè)方法與內容或設備的媒體查詢(xún)相結合,就得到是響應式設計的核心,這為用戶(hù)提供量身定制的稱(chēng)心體驗,卻無(wú)需考慮用戶(hù)設備的情況.
響應式網(wǎng)頁(yè)設計排版需要注意什么
1. 精心挑選字體將為你贏(yíng)得靈活而高效的排版
自從客戶(hù)端字體(Font Face)被引入網(wǎng)頁(yè)設計中之后，網(wǎng)頁(yè)設計師們便擁有了將不同字體用于自己設計中的自由。此前，他們只能使用特定的，與網(wǎng)頁(yè)安全兼容的字體。
但面對這些可以自由使用的字體，設計師們還需要知道如何正確地使用它們。響應式網(wǎng)頁(yè)設計已經(jīng)成為多數網(wǎng)站的標準設計模式，不過(guò)由于要顧及不同尺寸的設備屏幕，它對網(wǎng)頁(yè)排版也提出了一些限制。所以網(wǎng)頁(yè)設計師在一個(gè)響應式網(wǎng)頁(yè)系統中使用多種字體時(shí)，必須十分審慎。在同一個(gè)網(wǎng)站中不要使用太多種字體，最好不要超過(guò)三種。同時(shí)也不要使用極為流行的字體，這并不能讓你的網(wǎng)頁(yè)看起來(lái)比別的網(wǎng)頁(yè)更有優(yōu)勢。
2. 突出顯示標題
網(wǎng)頁(yè)排版的一個(gè)特點(diǎn)就是標題在版式中占據突出位置。別致的標題能吸引用戶(hù)在你的網(wǎng)站停留更久。為了實(shí)現這一點(diǎn)，你可以利用字形(glyphs)和連字(ligatures)技巧創(chuàng )造外觀(guān)更獨特的標題。
連字指的是看起來(lái)似乎是連接在一起的字母。例如，單詞“fish”中的f和i在某種字體里可能聯(lián)成一體(fi)。通過(guò)瀏覽器的字體設置功能或借助“文本渲染——優(yōu)化清晰度”(Text Rendering- OptimiseLegibility)特性， 你可以輕松地實(shí)現連字效果�；鸷鼮g覽器已經(jīng)設置了默認的連字符。在某些字體中使用特定的'連字組合效果能為你的網(wǎng)頁(yè)版式增加美感和風(fēng)格。在網(wǎng)頁(yè)排版軟件的Text, Type 或Open Type目錄中，一般都可以開(kāi)啟或關(guān)閉連字效果。當合適的字母相鄰出現時(shí)，這些軟件會(huì )自動(dòng)為它們設置連字效果。
3. 合理搭配不同大小和顏色的字體
正如上面的圖片所傳遞的信息一樣，我們在網(wǎng)頁(yè)設計中必須選擇能在桌面端和移動(dòng)設備屏幕上都清晰顯示的字體。一款字體在印刷品中與在數碼設備中顯示的效果是不同的。因此我們必須理解font family屬性，風(fēng)格和效果。根據W3C對于CSS字體的規定，Serif, Sans-Serif, Monospace, Fantasy 和Cursive等字體都具有font family屬性。
第二，應根據網(wǎng)站的主題或分類(lèi)來(lái)選擇字體。這樣才能確保你的網(wǎng)頁(yè)能引起目標受眾的共鳴，達到想要的效果。襯線(xiàn)字體同樣能用于提升文本的閱讀效果，強化要傳達的信息。這里的問(wèn)題是，襯線(xiàn)字體的特性決定了它只能在高解析度的屏幕上正常顯示，在低解析度的屏幕上可能會(huì )導致糟糕的結果。因此建議你在短標題中使用藝術(shù)字體，在正文中采用更簡(jiǎn)潔的字體。
4. 在響應式排版中，調節行寬十分重要
必須對網(wǎng)頁(yè)中的行寬(line length )進(jìn)行調節，因為字體的行寬與排版的響應程度息息相關(guān)。響應式設計也包括在不同尺寸的屏幕上字體所發(fā)生的自適應式改變。所以調整字體的行寬是必須的。
理想的行寬為每行文本中字符數量在45-47之間，包含空格和標點(diǎn)。最長(cháng)的限度我45-85個(gè)字符。這是對人們的閱讀習慣和眼動(dòng)規律做出研究后得出的結論。根據這一結論，有專(zhuān)家建議網(wǎng)頁(yè)內容采用左對齊的排版方式，因為人的視線(xiàn)在閱讀時(shí)一般會(huì )按照從左至右的方式在水平方向上運動(dòng)。
5.當用戶(hù)與屏幕的距離不同時(shí)，使用不同大小的字體能改善可讀性。在響應式排版設計中，必須考慮這一點(diǎn)。
字體的大小要能保證字體在設備上可見(jiàn)，可讀。而要做到這一點(diǎn)，可能會(huì )與前面所說(shuō)的保持“理想行寬”發(fā)生沖突。因為“理想行寬”意味著(zhù)要調小或調大字體尺寸，而這兩者都可能導致文本不可讀。這里的底線(xiàn)是要保證瀏覽者能舒服地閱讀網(wǎng)頁(yè)內容。響應式設計非常關(guān)鍵的一點(diǎn)就在于，根據用戶(hù)與設備屏幕距離的不同，應用于設備屏幕的字體大小也應該不同。對于字體大小與閱讀距離的關(guān)系，已經(jīng)有計算的方法。
6. 響應式排版要求瀏覽器支持不同大小的字體
如果你設計的網(wǎng)頁(yè)中需要用到某些自定義字體，你必須確保瀏覽器支持加載和顯示這些字體。即便你的字體本身清晰，沒(méi)有錯誤，但瀏覽器兼容問(wèn)題可能會(huì )使你前功盡棄。你還必須檢查你保存的字體文件格式與你想應用于網(wǎng)頁(yè)中的字體是否兼容。不兼容的字體無(wú)法正常加載，最終會(huì )影響網(wǎng)頁(yè)的顯示。
案例分析：從上面的示例中我們可以發(fā)現，我們需要使用標準字體或“字體庫”。第一步是通過(guò)“字體測試”來(lái)確定一款字體是否適用于網(wǎng)頁(yè)中。瀏覽器對于每個(gè)系列的字體都有“第一選項”，“第二選項”，“第三選項”……的區分。如果瀏覽器在這個(gè)系列中趙愛(ài)不到任何合適的字體，它會(huì )自動(dòng)選擇默認的無(wú)襯線(xiàn)字體，襯線(xiàn)字體或Monospace字體。
舉例來(lái)說(shuō)，很多瀏覽器都自帶 Century Gothic字體。你可以創(chuàng )建一個(gè)字體庫，將Century Gothic字體視為你的第一選項，之后是Arial, Helvetica，最后是一款無(wú)襯線(xiàn)類(lèi)的字體。注意，在CSS中，標題中含有多個(gè)單詞的字體需要加上引號。例如： font-family:“Century Gothic”, Arial, Helvetica, Sans-Serif.
這樣一來(lái)，瀏覽器會(huì )首先采用Century Gothic字體。由于很多瀏覽器都自帶這款字體，多數用戶(hù)在瀏覽網(wǎng)頁(yè)時(shí)看到的也會(huì )是Century Gothic字體。對于沒(méi)有配置 Century Gothic的瀏覽器，瀏覽器會(huì )按照Arial, Helvetica,事前設置的無(wú)襯線(xiàn)字體的順序尋找替代。
7.與字體的物理屬性相關(guān)的因素會(huì )影響字體在設計中的靈活度
響應式排版可能會(huì )受制于影響字形的因素。這些因素包括字重，字寬，筆畫(huà)對比，字體高度，光學(xué)尺寸等等。這些因素的些微變化都會(huì )影響站點(diǎn)的觀(guān)感。當然，現在已經(jīng)有了不少的工具可以讓設計師部分地修正這些限制。
Superpolator 和FlowType.js就是此類(lèi)工具中有代表性的兩款。當屏幕尺寸減小時(shí)，不同比例的網(wǎng)頁(yè)間的差異就會(huì )更為凸顯。因此就需要在網(wǎng)頁(yè)尺寸與縮放比例間找到平衡點(diǎn)。例如，用于標題的字體比用于正文的字體大/小多少倍，這就涉及比例問(wèn)題。這也就是我們?yōu)楹涡枰憫脚虐娴睦碛�。我們需要在斷點(diǎn)中能自行縮小的字體，因為設計師們無(wú)法為網(wǎng)頁(yè)內的所有字體元素一一調整基線(xiàn)風(fēng)格。
【什么叫網(wǎng)頁(yè)設計】相關(guān)文章：
《什么叫機械》教學(xué)設計04-11
網(wǎng)頁(yè)設計需注意什么07-12
網(wǎng)頁(yè)設計需注意什么08-07
網(wǎng)頁(yè)設計有什么技巧08-14
網(wǎng)頁(yè)設計有什么禁忌07-21
網(wǎng)頁(yè)設計要點(diǎn)是什么05-09
什么是自適應網(wǎng)頁(yè)設計07-26
網(wǎng)頁(yè)設計的原則是什么11-28