有關(guān)網(wǎng)頁(yè)設(shè)計(jì)的那些事兒
相較于設(shè)計(jì)教程,這樣的問答對(duì)于個(gè)人來(lái)說更有針對(duì)性,離我們?nèi)粘5脑O(shè)計(jì)工作更近一些。我個(gè)人也有這樣的體會(huì),有時(shí)會(huì)有一兩個(gè)問題長(zhǎng)期停留在腦子里,得不到解決,偶然的碰到剛好涉及到這方面的文章,會(huì)有一下子豁然開朗的感覺。所以這樣的形式也是非常有價(jià)值的。以下就是第1周的所有問題和答復(fù),希望在設(shè)計(jì)對(duì)大家有所幫助。
一、質(zhì)感的表現(xiàn)、作品好壞的評(píng)價(jià)
網(wǎng)站里怎么表現(xiàn)質(zhì)感啊,很干凈,很震撼的感覺。?望群主給解答,最好具體些,比如導(dǎo)航光亮的感覺有幾種表現(xiàn)方式,布局應(yīng)該怎么布局,請(qǐng)問怎么知道自己做的作品是好還是不好,比如海報(bào)超市的海報(bào)。怎么才能改進(jìn)覺得自己的問題寬泛了,也可能是我沒說清楚。總之希望群主能聽到我的心聲,我遇到瓶頸了,不知道什么是好作品,對(duì)于海報(bào)。
答復(fù): 光亮感覺的設(shè)計(jì)看上去樣式很多,其實(shí)主要在于細(xì)節(jié)方面的變化,如果要問具體有多少種設(shè)計(jì)樣式的話,可以說多到無(wú)窮盡。關(guān)鍵是看元素的結(jié)構(gòu)以及高光和陰影的變化。不同的元素結(jié)構(gòu)和光線效果就能產(chǎn)生不同的元素樣式。隨便舉幾個(gè)例子來(lái)說明:
上面這四個(gè)元素,由于結(jié)構(gòu)和光線的不同,差異應(yīng)該說還是非常明顯的。具體在你的設(shè)計(jì)中應(yīng)該使用哪種風(fēng)格,哪種色彩,要和設(shè)計(jì)的信息內(nèi)容相關(guān)聯(lián),要能產(chǎn)生視覺上的聯(lián)想。舉個(gè)例子,如果你要設(shè)計(jì)一個(gè)關(guān)于汽車?yán)惖脑O(shè)計(jì),很顯然,這種干凈而光亮的風(fēng)格是不合適的,而更應(yīng)該考慮粗糙、原始、自然的視覺感受,可能你需要用到的更多的某種粗糙的筆刷的效果,而不是上面的這些設(shè)計(jì)風(fēng)格。
回答你的第二個(gè)問題,關(guān)于如何評(píng)價(jià)作品的好壞的問題。有人說這完全是仁者見仁,智者見智,完全沒有標(biāo)準(zhǔn)。我個(gè)人感覺這種說法只說對(duì)了某一部分,不能說概括了全部。好的設(shè)計(jì)應(yīng)該是有他的某些標(biāo)準(zhǔn)的,例如,要展示的產(chǎn)品的特性或者表達(dá)的某種概念是否在設(shè)計(jì)中得到了較好的體現(xiàn)?重要的信息在視覺上得到了重要的體現(xiàn)而次要的信息做了次要的處理?色彩方案和產(chǎn)品是否契合?整個(gè)的設(shè)計(jì)氣氛夠不夠?我想對(duì)于這些問題,應(yīng)該還是有一些比較一致的看法的。
二、資源分類、遇到瓶頸再提高(Weison于2012年8月27日星期一)
飛魚哥,您好!聽過你的幾次講座和看了你的BLOG,感覺你很專業(yè)。我是一名畢業(yè)兩個(gè)多月的設(shè)計(jì)專業(yè)類的學(xué)生,打算從事網(wǎng)頁(yè)設(shè)計(jì)相關(guān)的工作(界面設(shè)計(jì)), 現(xiàn)在我想請(qǐng)教你幾個(gè)問題:
1.在日常生活中,我會(huì)搜集一些我覺得有意思的、很有質(zhì)感的圖片和網(wǎng)站,但一多就不方便查找和管理,我想請(qǐng)教一下該如何分門別類呢?
2.我的PS技術(shù)已經(jīng)很熟練了,但感覺設(shè)計(jì)出來(lái)的作品還不夠高質(zhì)量,還不能給人一種心靈的攝服力,就是一種看完后會(huì)覺得”哇,真好”的感覺,我想請(qǐng)教一下,我該如何做才能這種效果呢?
3.我覺得我的設(shè)計(jì)思維還不夠開闊,雖然看過很多別人的設(shè)計(jì),但一到了實(shí)際工作中,想來(lái)想去都只有加點(diǎn)漸變、投影、高光等,我該怎么做才能做到有創(chuàng)意呢? 附上我的作品,期待你的指點(diǎn),謝謝!
答復(fù) :我來(lái)逐條回答。
1、我個(gè)人經(jīng)驗(yàn)最好的分類方法是按照設(shè)計(jì)涉及的行業(yè)來(lái)分類,例如酒店、教育、設(shè)計(jì)工作室等,按照這些名字創(chuàng)建文件夾,將相關(guān)的設(shè)計(jì)作品分類放入。之前我還按照風(fēng)格分過類,比如中國(guó)風(fēng)、web2.0風(fēng)格等等,但發(fā)現(xiàn)需要的時(shí)候不容易找到,因?yàn)槲覀兿胍獏⒖冀梃b別的的作品的時(shí)候的想法通常是”讓我看看別人做過的有關(guān)酒店的網(wǎng)站是什么樣的?”所以這時(shí)我們只需要找到酒店的那個(gè)文件夾就行了,非常便捷。
2、其實(shí)這是所有設(shè)計(jì)師追求的目標(biāo),看過你給我發(fā)的個(gè)人作品后,我建議你在下面兩點(diǎn)上下功夫。首先是設(shè)計(jì)的細(xì)節(jié)。我們可以觀察到,所有讓我們?cè)趦?nèi)心不由自主喊出”哇,真好!”的作品可以說在細(xì)節(jié)方面是無(wú)可挑剔的。拿你的作品來(lái)說,我個(gè)人覺得還需要在細(xì)節(jié)上有所提高,簡(jiǎn)單 的舉兩個(gè)例子,比如:
中國(guó)海軍網(wǎng)中,項(xiàng)目列表和頁(yè)面左側(cè)的距離太小,讓頁(yè)面看上去滿滿當(dāng)當(dāng),有些擁擠。文字的黑色和背景白色對(duì)比度太大,文字很多就會(huì)讓整個(gè)頁(yè)面顯得臟,建議在保證可閱讀性的前提下調(diào)成灰色。虛線分割線相較于文字來(lái)說明顯是次要的元素,所以不要做的這么顯眼,再低調(diào)處理一下應(yīng)該更好。
標(biāo)題多樣化軍事任務(wù)左側(cè)的海浪圖標(biāo)和標(biāo)題內(nèi)容契合度不夠,圖標(biāo)本身也不夠明晰,打眼一看不知道是什么東西,風(fēng)格和整個(gè)頁(yè)面的風(fēng)格也不太搭,所以你可以看到,單單一個(gè)圖標(biāo)的使用就要考慮非常多的東西,而這些可以說都是細(xì)節(jié),什么時(shí)候這些問題都考慮到了,設(shè)計(jì)的水平也就提高了。另外,理論研究的背景色綠色和直擊前沿的背景色藍(lán)色接觸的地方看上去很模糊,讓人感覺設(shè)計(jì)上還不夠用心,在網(wǎng)頁(yè)設(shè)計(jì)中,像這些1像素的地方往往正是設(shè)計(jì)美感體現(xiàn)出來(lái)的地方。
節(jié)考慮到了以后,接下來(lái)就是設(shè)計(jì)的氣氛了。氣氛是個(gè)很難說明白的東西,我個(gè)人的理解是,網(wǎng)頁(yè)設(shè)計(jì)整體的氣氛是靠各個(gè)元素視覺風(fēng)格上的統(tǒng)一來(lái)營(yíng)造的,要保證整體的氣氛足夠,必須要有設(shè)計(jì)方向上的統(tǒng)一。舉個(gè)例子,看下圖:
這是大家都很熟悉的荒野求生的主持人貝爾的一個(gè)專題頁(yè)面,大家可以觀察到,無(wú)論頁(yè)面上的哪個(gè)元素,寫在石頭上的導(dǎo)航、破舊磨損過的文字kv、粗糙筆觸畫出的內(nèi)容分割線以及撕裂的紙張構(gòu)成的內(nèi)容背景在視覺風(fēng)格上都是既有差別而方向上統(tǒng)一的。所以打開這個(gè)頁(yè)面,撲面而來(lái)的就是原始、自然、充滿野性的氣息了,這是我們?cè)谧鲈O(shè)計(jì)中營(yíng)造令人深入情景的值得注意的一個(gè)方面。
3、這個(gè)問題說明你做的、看的還不夠多,表現(xiàn)手法欠缺和不足。再拿上面的頁(yè)面來(lái)說,假如讓你做這個(gè)頁(yè)面,你能想到用寫在石頭上的導(dǎo)航、破舊磨損過的文字kv、粗糙筆觸畫出的內(nèi)容分割線以及撕裂的紙張來(lái)去完成每一部分的信息內(nèi)容,既讓他們發(fā)揮原有的功能性,還能保證視覺上的感受嗎?這是多多練習(xí)以后才能達(dá)到的水準(zhǔn),所以還是老話,多學(xué)、多做總沒錯(cuò)。關(guān)于你說的加漸變、高光等手法、只是代表了一種類型的設(shè)計(jì)風(fēng)格,看到上面充滿野性的設(shè)計(jì)頁(yè)面,我想我們一下就能明白自己的局限了。
三、利用css框架快速布局
您好!老師。我想請(qǐng)教下老師,我div+css排版 框架如何才能搭的快一些,排版頁(yè)面也能迅速一些,您有沒有成熟的div+css的框架體系,為我們分享一些您的結(jié)構(gòu)。同時(shí)有沒有好的建議可以給我!
答復(fù):我自己對(duì)于用css排版沒有速度上的迫切要求,所以一直使用EditPlus手寫。如果你需要某種現(xiàn)成的框架來(lái)提升排版效率的話,可以試試960網(wǎng)格系統(tǒng),960網(wǎng)格系統(tǒng)不僅提供了設(shè)計(jì)時(shí)所需要的psd模板文件,而且對(duì)于前期的代碼也是支持的。使用框架雖然能夠提高前期設(shè)計(jì)和排版的效率,但是前提是要熟悉框架的結(jié)構(gòu)和預(yù)設(shè)值。960網(wǎng)格系統(tǒng)基本的排版代碼如下:
<div class=”container_12″> /*表示960像素內(nèi)總共有12欄*/
<div class=”grid_7 prefix_1″> /*共占7欄,前面預(yù)留1欄 */
<div class=”grid_2 alpha”> /*共占2欄,第一行的第一個(gè)類選擇器需要添加alpha類 */
</div>
<div class=”grid_3″>
</div>
<div class=”grid_2 omega”> /*共占2欄,第一行的最后一個(gè)類選擇器需要添加omega類*/
</div>
</div>
<div class=”grid_3 suffix_1″> /*共占7欄,后面留出1欄*/
</div>
</div>
四、有沒有所謂的設(shè)計(jì)行業(yè)規(guī)范?
想請(qǐng)教一下大家,在網(wǎng)頁(yè)設(shè)計(jì)中,有沒有所謂的設(shè)計(jì)行業(yè)規(guī)范呢?比如字體一般默認(rèn)用宋體 雙數(shù)的字號(hào),或者過去很多網(wǎng)站的logo設(shè)計(jì)都是包括圖標(biāo)+中文+域名這樣的。而像下面的導(dǎo)航中選中狀態(tài)一般如何設(shè)計(jì)是符合行業(yè)規(guī)范的?像花瓣這樣 導(dǎo)航條中選中狀態(tài)用紅色 那如果我的標(biāo)志色是藍(lán)色 用藍(lán)色是合適的嗎?
答復(fù):我個(gè)人認(rèn)為,不存在所謂的行業(yè)標(biāo)準(zhǔn),怎么設(shè)計(jì)都行,關(guān)鍵考量的點(diǎn)在于信息表達(dá)的是否清晰、用戶的體驗(yàn)是否良好以及視覺上舒服不舒服。所謂的設(shè)計(jì)規(guī)范,也只能說是大家常用,時(shí)間久了似乎就成了設(shè)計(jì)的規(guī)矩了,實(shí)際上這些所謂的設(shè)計(jì)規(guī)矩隨時(shí)能夠打破,比如大家在使用中文字體時(shí),用12像素和14像素的文字,原因是這兩個(gè)字體大小既保證了可讀性看上去還很美觀,但是如果作為標(biāo)題來(lái)說,14像素大小的文字有時(shí)也顯得過于小了,這時(shí)候22或者24像素的大小也許更為適合。再比如黑體相較于宋體很少用在正文中,原因也是一般正文14像素大小的黑體可讀性不如宋體好,但是如果放在設(shè)計(jì)某些宣傳口號(hào)中,黑體也許更為合適。所以要視情況來(lái)定,既沒必要刻意的去打破這些習(xí)慣,更不要被這些習(xí)慣所束縛。對(duì)于英文來(lái)說,網(wǎng)頁(yè)設(shè)計(jì)中常會(huì)涉及到非襯線字體中的Arial,Tahoma,Verdana以及襯線字體中的Georgia字體,這些都是會(huì)經(jīng)常用到的字體。
五、網(wǎng)站信賴感、調(diào)整設(shè)計(jì)中焦躁情緒
1、在設(shè)計(jì)中怎么樣給人安全感?比如:網(wǎng)銀/支付寶支付頁(yè)面?色彩搭配還是構(gòu)圖堅(jiān)固?
2、怎么引導(dǎo)用戶更有繼續(xù)觀看的欲望?或者說怎么在構(gòu)圖中設(shè)置懸念?
3、怎么調(diào)節(jié)關(guān)于設(shè)計(jì)倦怠的情緒?處在這種時(shí)期總會(huì)莫名狂躁…
答復(fù):第一個(gè)問題。你想說的問題應(yīng)該是一個(gè)網(wǎng)站如何給訪問者以信賴感?讓訪問者放心的在其上填寫個(gè)人信息、進(jìn)行資金方面的敏感信息的操作?這的確是個(gè)問題。但是影響到訪問者對(duì)一個(gè)網(wǎng)站的信賴感的因素非常多,你說的視覺方面因素例如色彩搭配、構(gòu)圖等因素只是其中的一個(gè)方面,而且可能還一個(gè)小的方面。但這并不是說視覺方面不重要,想想一個(gè)面目猙獰、飄滿廣告的網(wǎng)站能讓人在上面進(jìn)行敏感信息的操作嗎?但是下面的因素也許能讓我們產(chǎn)生更多的信賴感:
1、品牌的知名度。我個(gè)人的網(wǎng)上賬戶操作基本上都是用支付寶來(lái)完成,但是哪天蘋果或者微軟推出本地的第三方支付服務(wù),我想我是會(huì)放心的嘗試一下的。
2、優(yōu)質(zhì)的服務(wù)??旖轃o(wú)障礙的支付體驗(yàn),快速的提現(xiàn)、轉(zhuǎn)賬、信用卡還款等功能。
3、良好的用戶體驗(yàn)。這體現(xiàn)在網(wǎng)站的每一個(gè)細(xì)節(jié),比如,在填寫信用卡號(hào)時(shí),將信用卡號(hào)以四位一組自動(dòng)斷開,或者是清晰簡(jiǎn)潔的表單說明文字等等,往往是網(wǎng)站的細(xì)節(jié)最能留住人。
4、舒服的視覺感受。這就是你上面提到的色彩搭配、構(gòu)圖等等要素。
一個(gè)好的網(wǎng)站要做的東西很多,視覺方面的東西是我們最直觀感受到的,但相較于網(wǎng)站的信息以及功能來(lái)講,卻不是最重要的方面,而這些東西才是我們最應(yīng)該關(guān)注的地方。
第二個(gè)問題。我個(gè)人覺得沒有那么玄,我做東西從沒有在構(gòu)圖中設(shè)置懸念的意識(shí),呵呵,可能水平還不夠,我覺得東西做好了用戶自然有觀看的欲望。
第三個(gè)問題。這應(yīng)該是一個(gè)比較普遍的問題,大家在做設(shè)計(jì)的過程中應(yīng)該都有這種感受,尤其是任務(wù)重、時(shí)間緊的情況下,更是焦躁不堪,表現(xiàn)在設(shè)計(jì)上就是考慮不充分,東抓一把,西抓一把,剛冒出一個(gè)想法,趕緊就去實(shí)施,沒做兩步,只要一遇到需要耐心慢慢去做的地方,馬上改換另外一套方案,做兩步,又感覺不行,越做越焦躁、越焦躁越做不好,成了惡性循環(huán)。為避免這種情況,我個(gè)人覺得在無(wú)論時(shí)間多緊,還是不要急于動(dòng)手,前期的考慮、草圖絕對(duì)是必要的,一定要克制自己打開PS的欲望,一點(diǎn)一點(diǎn)做并且按照考慮好的方向堅(jiān)決執(zhí)行,我想這樣既能保證作品的質(zhì)量,也能讓設(shè)計(jì)過程沒那么煎熬,真的焦躁了,歇一歇,干點(diǎn)別的也是一個(gè)好方法。
來(lái)源:優(yōu)艾網(wǎng)
- 目前還沒評(píng)論,等你發(fā)揮!