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