- 相關(guān)推薦
新手學(xué)做網(wǎng)頁(yè)的20個(gè)技巧
導語(yǔ)：新手如何做好網(wǎng)頁(yè)設計?在這里小編整理了給新手學(xué)做網(wǎng)頁(yè)的20個(gè)技巧，每一個(gè)網(wǎng)頁(yè)設計新手在開(kāi)始一個(gè)項目之前都應該了解這些知識，在項目開(kāi)展中也應該注意。下面一起來(lái)看看吧!
01：將你的想法先在紙上畫(huà)出來(lái) 敢想敢做，有想法就應該畫(huà)下來(lái)
這是一幅世界各地不同年城市特色建筑的草圖這個(gè)想法看起來(lái)好像理所當然，似乎每個(gè)人開(kāi)始設計之前都會(huì )在紙上畫(huà)草圖。但是據我觀(guān)察很多設計師都跳過(guò)了這一步，從沒(méi)有考慮過(guò)他們將會(huì )面臨的問(wèn)題。設計就是要解決問(wèn)題，但是這些問(wèn)題通過(guò)漸變、陰影設置是解決不了的，只有通過(guò)調整布局和層次結構才能解決。所以在你開(kāi)始設計之前，一定要先想好布局。
02.描繪一個(gè)頂層框架
描繪一個(gè)基本的框架可以幫助你解決UX方面的問(wèn)題，同時(shí)規劃布局。當我接手一個(gè)項目的時(shí)候，做的第一件事就是建立一個(gè)頂級框架，這樣可以解決所有的設計問(wèn)題。這個(gè)框架是指環(huán)繞在內容周?chē)腢I，它可以幫助我們執行操作，更好的操縱頁(yè)面。它包括導航和組件，比如側邊欄和底部的按鈕。
如果你通過(guò)這種方式來(lái)做設計，在不看主頁(yè)的情況下，你也能清晰的知道應該怎樣布局。
03.給PSD添加網(wǎng)格
這是一個(gè)有978個(gè)網(wǎng)格的PSD文件，每條線(xiàn)的寬度為10PX。畫(huà)網(wǎng)格做起來(lái)就像聽(tīng)起來(lái)那么簡(jiǎn)單，雖然你不畫(huà)直接開(kāi)始設計完全可以，但是我相信設計出來(lái)的作品絕對沒(méi)有畫(huà)了網(wǎng)格好。網(wǎng)格的好處就是幫助你構建不同板塊的布局，起一個(gè)指導作用，幫助你制作響應式模板。
04.選擇你的字體
網(wǎng)頁(yè)設計中很重要的一個(gè)原則就是一個(gè)網(wǎng)頁(yè)中不要出現兩種以上的字體在一個(gè)項目中，尋找好看的字體也是很重要的一部分，但是我要提醒你，在同一個(gè)網(wǎng)頁(yè)中千萬(wàn)別使用兩種以上的字體。選擇字體的原則就是要易于用戶(hù)閱讀，尤其是文字很多的頁(yè)面，文章標題的字體可以有趣一些，這樣能吸引用戶(hù)的注意。在使用字體的時(shí)候不要畏首畏尾，個(gè)頭大不是問(wèn)題，只要整體看起來(lái)很和諧生動(dòng)就行了。
05.選擇合適的顏色主題
使用有限的顏色和色調，減輕用戶(hù)的視覺(jué)壓力。 在選擇字形的時(shí)候，你就應該想好用戶(hù)界面、背景、文字該用什么顏色。我建議你在顏色的原則方面一定要有節制，別想到哪個(gè)用哪個(gè)，最后五顏六色亂七八糟的，這也是大忌。
在這一步中，你要根據每個(gè)元素的功能選擇顏色，并且在用戶(hù)界面中，相同的元素顏色一定要一致。你可以觀(guān)察一下facebook、推特、quora、vimeo等等網(wǎng)站的頁(yè)面，在不干擾功能組件正常使用的情況下，除了用戶(hù)界面，它們的插畫(huà)和平面細節沒(méi)有任何顏色限制。
06.分開(kāi)布局
網(wǎng)頁(yè)結構越簡(jiǎn)單，用戶(hù)使用越容易在網(wǎng)站中，每個(gè)模塊都要有個(gè)故事，要給用戶(hù)一個(gè)瀏覽的理由和最終的結果。而設計的作用就是強調這個(gè)故事中最重要的那部分。在現實(shí)設計中，主頁(yè)面不能將所有的信息都顯示出來(lái)，所以你必須在主頁(yè)先告訴用戶(hù)“進(jìn)了這個(gè)網(wǎng)站你能做什么”。
發(fā)揮你的聰明才智思考一下你能想到的極簡(jiǎn)頁(yè)面，有最簡(jiǎn)單的目標和必要的構件。最后你會(huì )發(fā)現，原來(lái)保持簡(jiǎn)單這么困難。
07.重新思考
我們真的需要搜索按鈕嗎?在很多案例中，答案是否定。作為一名設計師，是我們一手決定了用戶(hù)瀏覽因特網(wǎng)的方式和界面，由你決定用戶(hù)進(jìn)一個(gè)頁(yè)面需要多少步驟、一個(gè)網(wǎng)頁(yè)效率有多高。在設計完之后，一定要多測試，發(fā)現漏洞，及時(shí)修改，這樣才能做到極致。
08.挑戰自我
我鼓勵每個(gè)設計師勇于創(chuàng )新，挑戰自我，盡管對一個(gè)項目來(lái)說(shuō)，創(chuàng )新并不是要求之一。挑戰包含什么?比如使用一個(gè)新格柵系統、開(kāi)發(fā)一個(gè)新的組件或者不使用混合模式、特殊顏色等等，這些都是挑戰。
09.關(guān)注細節
正在制作中的游戲，細節展示這句話(huà)你應該聽(tīng)過(guò)很多次也記住并實(shí)踐了，但是在最終的產(chǎn)品中卻看不到。細節可以是一個(gè)小互動(dòng)，一個(gè)出人意料的動(dòng)畫(huà)，或者是一個(gè)漂亮的漸變按鈕等。我相信如果你真的喜歡手頭的工作，那么小細節肯定會(huì )有的
10.每個(gè)組件都需要被溫柔善待
認真對待每一個(gè)組件，最終的結果一定比100分要多。這句話(huà)我聽(tīng)了不下一百遍，但每一次都被深深地震驚了。在你設計每個(gè)組件的時(shí)候，你要這樣想：爺設計的組件隨便拿一個(gè)出去都可以得設計界的奧斯卡。只有這樣，整個(gè)網(wǎng)頁(yè)出來(lái)后的效果才能驚艷眾人。
11. 讓你的作品更加精致
為了避免模糊，在背景和元素之間設置正確的對比度。除了考慮審美問(wèn)題，你還要保證作品的干凈整潔無(wú)毛邊。注意邊緣、字體渲染、漸變等問(wèn)題。
12.整理你的PSD文件
在用PS做設計的時(shí)候，整理PSD文件是一項很重要的工作。除了整理項目的大小和順序，你還要保持文件的整潔，這對前端工程師的工作是很有幫助的，能加快整個(gè)項目推進(jìn)的速度。
13.最好的設計，最壞的打算
在大腦中預想一下你做的東西在不同尺寸的屏幕上會(huì )是神馬樣子作為設計師，我們還有一個(gè)職責就是解決不同設備上的尺寸限制問(wèn)題。在網(wǎng)頁(yè)設計中，這個(gè)限制可以從概念一直排到技術(shù)，子子孫孫無(wú)窮盡也。在做網(wǎng)頁(yè)的時(shí)候，我們不僅要在理想的尺寸中試運行，還要考慮最差的尺寸，因為萬(wàn)一用戶(hù)的手機屏幕尺寸真的很小怎么辦?
14.多看你的設計直到厭倦為止
我相信如果你對設計一直都非常有激情，那么“看自己的作品直到想吐”這件事你一定經(jīng)歷過(guò)。初入設計這行，每當我完成一件作品，我都覺(jué)得非常驕傲，我感覺(jué)這個(gè)作品就是我生活的一部分，是我的孩子，我將它截圖保存，在不同設備上瀏覽它，把它做我手機電腦的桌面，甚至打印出來(lái)掛在墻上…后來(lái)我真的有點(diǎn)反感了，我開(kāi)始覺(jué)得它哪都有問(wèn)題，哪都不好看，最終我重新設計了它。開(kāi)始厭倦你先前的作品是成熟的表現，這意味著(zhù)你從錯誤中學(xué)到了新的知識。
15.不要糾纏于概念
當你和客戶(hù)交流的時(shí)候，確保你們倆在同一頻道，千萬(wàn)杜絕雞同鴨講這種情況。萬(wàn)一這種情況發(fā)生了，千萬(wàn)冷靜別拍案而起，你要知道你拍走的都是白花花的銀子啊~~~~如果你的顧客連你說(shuō)的第一個(gè)概念都不喜歡，那么你就該反思了，這時(shí)候你要收集客戶(hù)的反饋信息，為下次交流做準備。
16.與工程師做好盆友/好基友
在一個(gè)項目中，工程師不需要從頭跟到尾，他們只需按時(shí)做好自己的事情就OK了。你以為我說(shuō)的是真話(huà)嗎?呵呵，我要告訴你，這樣想的人是傻瓜。因為很多好主意都是由工程師提出來(lái)的，他們如此高貴冷艷才華橫溢，你怎么能不緊緊的抱住他們的大腿呢?!
17.把我當做你幼齡的孩子，給我講解你的方案
跟顧客講解產(chǎn)品的重要程度不亞于制作產(chǎn)品，如果你說(shuō)的不合適，那么你的設計就可能被忽略，說(shuō)清楚比讓別人看清楚更重要。
18.要喜歡你的每一個(gè)點(diǎn)子，但別太過(guò)看重
作為一個(gè)設計師，你要充分相信自己的才華，相信你的作品。但同時(shí)你也應該有心理準備，要能隨時(shí)從一個(gè)項目中抽身轉戰下一個(gè)。
19.在開(kāi)發(fā)過(guò)程中追蹤你的設計
在你交完P(guān)SD文件工作就結束了?圖樣圖森破，很傻很天真。如果你真的關(guān)心自己的設計是否被前端工程師溫柔善待，那就應該多和前端聊天，盡最大的努力幫助他們，哪怕只是一個(gè)像素的問(wèn)題。
20.展示尚未完成的作品
在社交工具中分享你的樣式表和未完工的組件。有時(shí)候一個(gè)項目中最好的部分因為種種原因被忽視，所以你也就忘了。一旦項目完成，就更沒(méi)有心思回頭審視了。所以，如果可能的話(huà)，多在社區和大家交流、分享，眾人拾柴火焰高，我們也會(huì )發(fā)動(dòng)大家的力量幫助你，讓你得到有價(jià)值的反饋。
【新手學(xué)做網(wǎng)頁(yè)的20個(gè)技巧】相關(guān)文章：
新手做淘寶技巧10-17
教新手學(xué)化妝小技巧08-30
新手如何學(xué)車(chē)-2017最新新手學(xué)車(chē)技巧大全「推薦」07-21
新手學(xué)化妝必知的化妝技巧10-20
新手學(xué)騎馬的技巧及注意事項05-28
新手化妝技巧10-21
攝影新手的技巧07-15
新手轉彎技巧06-25
新手美甲技巧08-05