手把手教你學網(wǎng)站設計-網(wǎng)頁設計10大要訣（上）

時間：2023-10-05 21:54:01 | 來源：網(wǎng)站運營

時間：2023-10-05 21:54:01 來源：網(wǎng)站運營

手把手教你學網(wǎng)站設計-網(wǎng)頁設計10大要訣（上）：　　這篇文章想與大家分享的是：網(wǎng)頁設計10大實戰(zhàn)要訣，為了方便理解，今天以網(wǎng)頁設計中可能會用到的一種叫“著陸頁”的網(wǎng)頁為例。

　　當前，互聯(lián)網(wǎng)時代已經(jīng)相對比較成熟，對于設計行業(yè)來講，網(wǎng)站設計也變成企業(yè)的標配設計之一。官方網(wǎng)站設計好，是不是就到此為止了呢？不，我們要讓這個網(wǎng)站被人搜索到，就像傘兵著陸一樣，需要制作一個讓搜索引擎看到的頁面，這就是所謂的著陸頁。那么設計著陸頁有沒有什么講究的？和普通官網(wǎng)和電商主題頁設計有什么不同呢？現(xiàn)在，本人就帶各位朋友了解一下設計著陸頁需要留意的10個核心要點。

　　1.第一，尺寸設置

　　設計著陸頁，首當其沖的就是尺寸。尺寸，顧名思義，就是說的頁面的高度和寬度，而根據(jù)實際需要，又分為不同載體的尺寸需要適應。

　　普及一個小常識，尺寸我們用分辨率來表示，分辨率的單位是像素，也就是px，英文是pixel，在屏幕上展示的尺寸通常就用px表示。px值需要設置72px，多了和少了都不行，而印刷才需要設置300px分辨率，配合米和毫米等這樣的計量單位。

　　接著說，根據(jù)載體不同，尺寸也大致分為電腦版，手機版兩種。這兩種尺寸是有區(qū)別的。比如，電腦版?zhèn)戎卮笃聊徽故倔w驗，手機版?zhèn)戎卣∑聊伙@示體驗，因為在小屏幕手機去看大尺寸的頁面，字體會小的令人看不見，所以需要設計兩個尺寸，或者，如果想兩個尺寸可以通用，就要有意識的把電腦版的字號放大很多，設計區(qū)域也要居中緊湊的排布。

　　通常，設計頁面的寬度比較容易，因為電腦屏幕的寬度我們已知，而頁面內(nèi)容說不好，需要根據(jù)實際內(nèi)容調(diào)整，所以先確定頁面寬度。

　　頁面的寬度，取決于當前全球用戶所使用的電腦顯示器屏幕的尺寸。

　　一般來說，如果采用無自適應程序去制作的頁面，需要格外考慮用戶屏幕的可視范圍，特別是小屏幕的筆記本電腦的展示效果。

　　因為頁面沒有自適應能力，也就是沒有根據(jù)屏幕的大小來縮放頁面內(nèi)容的話，就會看不全核心設計區(qū)域的內(nèi)容。通常市面上筆記本電腦的寬度，最小在1200像素左右，所以，無自適應的頁面，文字設計區(qū)域要控制在1000px~1200px以內(nèi)，而旁邊的延伸寬度，是為了大屏幕而準備的，如果沒有左右延伸區(qū)域，大屏幕電腦看上去就很難看，頁面就顯得很小。

　　再說一下頁面高度的設置。頁面高度，由于是根據(jù)內(nèi)容多少而定，但不建議超過3屏，因為頁面如果太長，一是會導致客戶沒有耐心看完，二是會導致頁面質(zhì)量太重而加載速度慢，影響用戶體驗，所以高度在3000px以內(nèi)為佳。

　　2.第二，頁面程序

　　設計頁面再好，沒有好的程序支持同樣白搭。談網(wǎng)站設計，不論是官網(wǎng)設計、網(wǎng)頁設計還是電商頁面設計，設計人員都需要懂技術(shù)原理，不然很難將設計很好的完美落地。就像機器人，只有一副好看的皮囊，是無法運作的，需要程序去支持，才能動起來。那么先說一下，網(wǎng)站用的哪些程序做的。

　　做頁面，過去通常使用的是靜態(tài)HTML格式語言編寫，動態(tài)效果會用到JAVA，以及C+語言，不過那些都已經(jīng)過時了，如果但凡想做動態(tài)頁面，有的人會說使用FLASH制作網(wǎng)頁，但是FLASH有許多硬傷，同樣已經(jīng)沒人用FLASH做頁面，而是專注用FLASH做動畫視頻了。那么現(xiàn)在通常做網(wǎng)頁都用什么程序?qū)懩?？答案是HTML5。

　　這個HTML5簡稱H5，是大概3年前由微軟發(fā)起，后來飛速發(fā)展了幾年，到2014年才被廣泛應用。H5的興起，無疑對網(wǎng)站開發(fā)起到了推波助瀾的作用，網(wǎng)頁的設計大量的引用H5動態(tài)設計，那么H5有哪些好處呢？H5首先是解決了動態(tài)的問題，讓頁面活起來了。過去，要實現(xiàn)動態(tài)，簡單的可以用JAVA實現(xiàn)，復雜的動態(tài)則需要用FLASH去搭配完成，再嵌入到頁面之中。那樣做的缺點很明顯，一個是FLASH占的質(zhì)量比較大，容易導致用戶打開頁面卡頓，從而關閉網(wǎng)頁，二是因為FLASH是寫死的，因此搜索引擎無法抓取FLASH中的關鍵詞，進而導致網(wǎng)站很難被搜索引擎檢索到，這是FLASH站點的核心痛點。

　　所以，很多客戶會忍痛選擇了全靜態(tài)頁面作為網(wǎng)站的官網(wǎng)，雖然那樣會缺乏活力。所以，設計人員會考慮加入GIF動畫和簡單的導航JAVA點擊動態(tài)效果，當然，那只是簡單的動態(tài)，根本沒有革命性的動態(tài)去發(fā)揮余地。

　　隨著互聯(lián)網(wǎng)化的新數(shù)碼時代的到來，智能手機已經(jīng)越來越普遍，每個人都用用N個移動設備，已經(jīng)不僅擁有笨重的臺式機，而更愿意將各種終端移動辦公娛樂。比如手機、平板、PC和TV，需要無線互聯(lián)，因而出現(xiàn)了云技術(shù)，連接了所有的移動終端設備，讓人和設備永遠分不開。說這些的用意，在于強調(diào)各終端作為載體的界面，對設計人員和程序人員的開發(fā)影響。

　　拿到一個網(wǎng)頁設計需求后，首先看這個頁面的實現(xiàn)形式，是單一JPG圖片嵌入，還是復合HTML圖文程序，這兩種設計起來是兩個思路。如果是JPG形式，那么側(cè)重考慮的就是頁面的單張圖片質(zhì)量問題，如果是HTML形式，就要側(cè)重考慮動態(tài)實現(xiàn)和圖文精準定位問題。

　　當一個JPG頁面做好之后，接下來就是需要考慮切圖問題，哪些圖是一定要切出來的？按鈕、注冊表、動態(tài)區(qū)域的底圖，是需要單獨切出來的。如果是一個HTML頁面，如果區(qū)域劃分功能比較多，就都需要切圖切出來，在PS中分為一個個模塊，切成PNG圖片之后，再用HTML工具寫入語言，把切片嵌入網(wǎng)頁，再調(diào)試，調(diào)試過程中，會出現(xiàn)各種諸如對齊這樣的問題。HTML的制作時間和精力，都比純JPG頁面要大很多。如果要用到動態(tài)，比如動畫效果，需要單獨對動態(tài)對象寫語言，讓它動起來，然后不斷調(diào)試，更復雜一些。因此，現(xiàn)在最常用的頁面設計還是JPG圖片的形式做的。那么，具體要用哪種程序做呢？我認為，持續(xù)用時間比較久的頁面通常用HTML或H5設計，一次性的或者短期活動推廣頁面通常用JPG形式，因為相對來說更快。

　　3.第三，頁面邏輯

　　談到頁面頁面邏輯，我想打個比方。比如你有很好看的外表，很好看的衣服，很好看的身材，但是，如果頭和身體的比例搞錯了，嚴重嗎？其實，頁面也是有“身材比例”的。頁面的邏輯，通俗來講，其實就是說的，頁面上放啥，放多少，先放啥后放啥，讓人先看啥后看啥，諸如這些問題。

　　一個好的頁面邏輯，是貫穿文案、圖片的主脈絡，沒有這條主線，就像大樓沒有根基，不知道為什么要蓋樓，會導致最后蓋出來的樓歪歪扭扭，不知是什么東西，當然也不會好看，所以，頁面邏輯何其重要不言而喻。

　　那么好，現(xiàn)在來講一下如何來策劃頁面邏輯。你需要知道這個頁面想要表達什么，想要傳達給客戶什么核心要素，分清楚一二三，級別不要太多，也不要試圖表達太多，要知道，太多也沒人看的完。思考過后，再將你的思路列到一個文檔之中，再次梳理，刪減掉那些客戶不想看的，也不需要客戶看的信息點，切記不要表達太多信息量，要精練總結(jié)，層次感要規(guī)劃出來。

　　4.第四，文案策劃

　　當頁面邏輯搞清楚之后，就可以進入到文案撰寫的步驟了。通常，文案是有專人負責的，但有時候是由策劃師或設計師來撰寫的。關于文案，我的個人建議是，文案撰寫，需要順承頁面表達的邏輯性，兼顧設計排版的美觀性，最好有全局眼光，這樣再往下執(zhí)行的時候，才不會導致反復修改文案。一個好的文案，就像一個謀士，一個好的設計，就像一個將軍，一個好的策略，就像一個元帥，在出兵打仗之前，這三種職能的團隊成員，最好能碰一碰，一起進行討論，提高工作效率。

　　在文案的撰寫過程中，需要注意的是，言簡意賅，主次分明，渲染主題，謹慎描述。

　　5.第五，設計布局

　　當以上步驟做好，設計師就準備出馬了。設計著陸頁前，拿到文案和要求后，設計師要先將頁面合理的布局。建議拿出一張白紙，畫出頁面的寬度和預期高度，再打開文案，對照文案，在紙上用筆勾勒一個布局圖。就像排兵布陣，火槍手排在哪，弓弩手排在哪，騎手排在哪，文字排在哪，圖片排在哪，首先要在大腦中有一個印象，做到胸有成竹心不亂。

　　在布局頁面時，要注意頁面的“骨骼”。也就是說，分幾大塊，大致可分為，頭部、軀干和底部。在頭部和底部的設計中，大致我們應該有“模板”，就是根據(jù)官網(wǎng)頁面的頭尾來設置，通常做法是做的一摸一樣，但有時候需要精簡內(nèi)容，畢竟是著陸頁，更突出的是活動主題。頁面的“軀干”部分，是要再細分的，比如有三個活動，那么設計師就要分為三塊來設計圖文組合。

　　“軀干”的上部分，一般是采用一個大的主畫面來表達，做過電商頁面的都知道，這一塊是畫面的臉面，一定要做的炫酷，做出活動味道來。中部，也是主體部分，主要是將軀干的四肢合理的擺上去，有條不紊，切忌雜亂無主次關系。下部分，通常是對本活動的細節(jié)描述和介紹，這部分不建議過于搶鏡，讓這部分處在配角的位置比較合理。

　　關于頭、軀干、尾巴的關系分出來，再分軀干中的上中下，都分出來后，將文字大標題單獨摘出來，占位，再把活動描述與大標題做一個組合，然后再把要配的相應圖片區(qū)域規(guī)劃出來，基本上框架圖就搭好了。搭好框架，再反復對照策略邏輯進行檢測，如果有不符合用戶視覺習慣的結(jié)構(gòu)，隨時修改。

　　要留意的是，頁面最好不要超過三屏，避免結(jié)構(gòu)太長和細節(jié)太繁瑣。

　　后面5大實戰(zhàn)要訣會在下期講述，想要了解的小伙伴請繼續(xù)關注！