網(wǎng)頁設(shè)計(jì)有哪些技巧
來源：優(yōu)漫教育
發(fā)布人：UMAN
時(shí)間：2023-11-09 16:26:45
網(wǎng)站設(shè)計(jì)簡單又困難，一個(gè)成功的網(wǎng)站不僅僅需要引人注目的設(shè)計(jì)，還需要優(yōu)秀的內(nèi)容。它能成為一種獨(dú)有的風(fēng)格，可以讓用戶享受良好的用戶體驗(yàn)設(shè)計(jì)，并且一眼就能了解網(wǎng)站的主要信息內(nèi)容。本文整理了2018最佳的網(wǎng)站設(shè)計(jì)技巧，這些技巧能夠幫助新手設(shè)計(jì)師“少走彎路”，設(shè)計(jì)出一個(gè)屬于自己的優(yōu)質(zhì)網(wǎng)站。
一、頁面平鋪
把頁面平鋪開，主要的物件有:導(dǎo)航欄、LOGO、Banner、按鈕、文字
1導(dǎo)航欄
導(dǎo)航欄如果設(shè)計(jì)得恰到好處，是會(huì)給網(wǎng)頁本身增色很多。導(dǎo)航欄有一排、兩排、多排、導(dǎo)航和Frame框架快捷導(dǎo)航等等各種情況的設(shè)計(jì)。有時(shí)候是橫排，有時(shí)候則是豎排。另外還有一些動(dòng)態(tài)的導(dǎo)航欄，如很精彩的Flash導(dǎo)航。
2.LOGO
LOGO并不是每個(gè)網(wǎng)站多要有的，他是網(wǎng)站為了給大家一個(gè)比較直觀的信息的表達(dá)工具。LOGO的位置通常在頁面的左上角。這個(gè)地方最明顯和直觀，可以第一時(shí)間給人于默化的效果;網(wǎng)站的LOGO般以靜態(tài)的居多，也有動(dòng)態(tài)的，但是LOGO的特點(diǎn)都是在表達(dá)網(wǎng)站的信息，是一個(gè)網(wǎng)站的直接的表現(xiàn)窗口
3.BANNER(告條)類型
Banner設(shè)計(jì)注意點(diǎn):Banner有動(dòng)態(tài)和靜態(tài)兩種。在瀏覽網(wǎng)頁的過程中，雖然閃爍的圖案會(huì)產(chǎn)生瞬間記憶刺激，引起注意，但這種記憶往往為壓迫性的，久之易產(chǎn)生負(fù)面效應(yīng)，從而模糊記憶。而穩(wěn)定的畫面不易引發(fā)特殊的關(guān)注，但如果有良好的界面引導(dǎo)和內(nèi)容，可產(chǎn)生良性的記憶，持久而牢固。設(shè)計(jì)要點(diǎn):Banner的文字不能太多，用一兩句話來表達(dá)即可;廣告語要朗朗上口，可以第一時(shí)間的讓人捕獲表達(dá)的重點(diǎn):圖形無須太繁雜，文字盡量使用黑體等粗壯的字體，否則在視覺上很容易被網(wǎng)頁其他內(nèi)容奄?zèng)];圖形盡量選擇顏色數(shù)少，能夠說明問題的事物;如果選擇顏色很復(fù)雜的物體，要考慮一下在低顏色數(shù)情況下，是否會(huì)有明顯的色斑盡量不要使用彩虹色、星邊等復(fù)雜的特技圖形效果，這樣做會(huì)大大增加圖形所占據(jù)的顏色數(shù)，增大體積
4、按鈕
按鈕設(shè)計(jì)要點(diǎn):設(shè)計(jì)按鈕要同頁面的整體協(xié)調(diào)，不能太搶眼:有的頁面很單調(diào)，還要依靠花哨的按鈕來提一下;選用的字體，選用的插圖，或插圖及字體搭配，都要考慮字跡清楚，色彩簡單一些，不要超過四種;很長的按鈕可能就是框架的分界，盡量要纖細(xì)一些，否則頁面會(huì)顯臃腫
5、圖片
為了美化頁面，是任何一個(gè)頁面都要用到的，的運(yùn)用要合理。運(yùn)用要點(diǎn):圖形的主體最好清晰可見;圖形的含義最好簡單明了;內(nèi)所合文字應(yīng)該清晰容易辨認(rèn):背景與主體明度對比比例應(yīng)為3:1到5:1之間為宜;淡色系列的背景有助于整體和諧;淡色材質(zhì)背景最佳，能與主題分離之淺色標(biāo)志或文字背景亦可。
6.文字
文字也是設(shè)計(jì)的。設(shè)計(jì)要點(diǎn):每一行文字的長度最好20到30個(gè)中文字(40到60個(gè)英文字母);行距與字距已由軟件內(nèi)定。設(shè)計(jì)時(shí)注意段落與段落間空行及首行縮排方式以輔助閱讀;標(biāo)題以H1到H3字號(hào)為佳，內(nèi)文Fontsize=3到4級(jí)為佳;同版面字型最好在三種以內(nèi);文字的顏色最好也是三種以內(nèi);文字在顏色上要與背景區(qū)別;內(nèi)文的排列向左對齊并與左邊界保持適當(dāng)距離。可以用表格填入文字以達(dá)此效果;表格或清單內(nèi)的字運(yùn)用相同字型與字體大小，以利辨別。
二、整體規(guī)劃
有共性，才有統(tǒng)一，有細(xì)節(jié)區(qū)別，就有層次;防止設(shè)計(jì)與實(shí)現(xiàn)過程中的偏差;設(shè)計(jì)的各部分，要配合整體風(fēng)格:不僅頁面上各項(xiàng)設(shè)計(jì)要統(tǒng)一，而且網(wǎng)站的各級(jí)別頁面也要統(tǒng)一;信息不要太過集中，以免文字編排太緊密:不要有太多分散注意力的點(diǎn)。動(dòng)態(tài)閃爍要適中;頁面留白部分，要根據(jù)平面設(shè)計(jì)原理來設(shè)計(jì)，注意分欄式結(jié)構(gòu)不宜留白;還要考慮到瀏覽器上部占用的屏幕空間，防止截?cái)嗟仍斐梢曈X效果不好;首頁設(shè)計(jì)+導(dǎo)航，這是一種比較強(qiáng)的網(wǎng)站表達(dá)，可以根據(jù)時(shí)間的變化更改
三、功能易用性
導(dǎo)航欄應(yīng)最先調(diào)入，以便訪客快速前往所需信息空間;頁面長度要短，使得用戶在信息空間內(nèi)可迅速移動(dòng):導(dǎo)航設(shè)計(jì)方向要一致。支持導(dǎo)航的層次按鈕應(yīng)當(dāng)從上到下或從左到右，但不要兩者都用，不要混用方向。
廣州UI設(shè)計(jì)培訓(xùn)，系統(tǒng)學(xué)習(xí)，融會(huì)貫通，直奔主流技術(shù)，節(jié)省時(shí)間，老師督促指導(dǎo)，學(xué)習(xí)效率高，隨堂練習(xí)，及時(shí)解決問題，企業(yè)IT大牛指導(dǎo)實(shí)戰(zhàn)落地項(xiàng)目，與企業(yè)需求無縫連接，簽訂就業(yè)協(xié)議，諸多合作名企，4個(gè)月后直接走向工作崗位，避免工作后的水土不服。高薪名企有增加！
相關(guān)推薦
-
【UI培訓(xùn)】：關(guān)于UI設(shè)計(jì)新手常遇到的問題及解決方法
UI設(shè)計(jì)新手常遇到的問題有哪些？比如，請問UI設(shè)計(jì)師每天的工作內(nèi)容是什么樣的？除了做圖還要干什么？還需要哪些技能？個(gè)人職業(yè)規(guī)劃通常什么樣？做圖只是視覺設(shè)計(jì)師最基礎(chǔ)的工作，除了視覺執(zhí)行，還需要向上接入PD了解產(chǎn)品需求、在設(shè)計(jì)中驗(yàn)證交互流程，向下跟進(jìn)程序開發(fā)、數(shù)據(jù)收…行業(yè)資訊發(fā)布時(shí)間：2022/03/24 查看詳情 -
室內(nèi)設(shè)計(jì)應(yīng)體現(xiàn)文化元素的六大重要思維
無論是首都北京的故宮，還是西藏的布達(dá)拉宮，其精巧的室內(nèi)裝潢和環(huán)境藝術(shù)，都有誰能說出這并非出自頂級(jí)的專業(yè)室內(nèi)設(shè)計(jì)師和藝術(shù)大師之手，中國傳統(tǒng)室內(nèi)設(shè)計(jì)文化也正是傳統(tǒng)東方文化與古典建筑藝術(shù)的精華部分。行業(yè)資訊發(fā)布時(shí)間：2022/03/24 查看詳情 -
UI設(shè)計(jì)培訓(xùn)中有沒有學(xué)不會(huì)UI的人
UI設(shè)計(jì)培訓(xùn)中有沒有學(xué)不會(huì)UI的人？優(yōu)漫教育小編要說是真的有，就是那些根本不想學(xué)的，就像你永遠(yuǎn)叫不醒一個(gè)裝睡的人。如果你對ui有強(qiáng)烈的學(xué)習(xí)興趣，想在ui行業(yè)有所建樹，那么不論你是高中畢業(yè)、大學(xué)畢業(yè)，不論你是有計(jì)算機(jī)基礎(chǔ)、零基礎(chǔ)，不論你是男生、女生，不論你是20歲、30…行業(yè)資訊發(fā)布時(shí)間：2022/04/01 查看詳情
