推薦：網(wǎng)頁(yè)制作,改變你的思維方式
“重構(gòu)”的春風(fēng)吹遍大江南北，互聯(lián)網(wǎng)一時(shí)間風(fēng)聲鶴唳，“divCSS”儼然已成為一種“時(shí)尚”，難以盡數(shù)的網(wǎng)站都不約而同地開(kāi)始了自己的“重構(gòu)”。然而打開(kāi)這形形色

一般情況下我鼓勵(lì)視覺(jué)設(shè)計(jì)師在設(shè)計(jì)之前一定更加深刻的了解設(shè)計(jì)需求：

1. 這個(gè)產(chǎn)品需要給什么樣的一群人用，他們需要什么樣的視覺(jué)感受。
   比如，你在給一幫老干部做一套軟件，就別搞的像qq那樣熱鬧。（曾經(jīng)介紹過(guò)一次 “通過(guò)收集典型用戶身上的視覺(jué)元素確定視覺(jué)風(fēng)格”的方法）
2. 這是一個(gè)什么樣的產(chǎn)品，它需要展現(xiàn)給用戶什么樣的”氣質(zhì)”和情感感受。
   上次說(shuō)維信 的視覺(jué)設(shè)計(jì)感覺(jué)很好，其實(shí)很大一部分是在說(shuō)它對(duì)于那些ajax動(dòng)畫(huà)效果的應(yīng)用符合該產(chǎn)品”靈巧、迅速”的定位。它讓我在感官上認(rèn)為”這個(gè)產(chǎn)品很輕便、快捷，不會(huì)占據(jù)我手機(jī)的大量空間也大量的上網(wǎng)流量”。
3. 我有多少的創(chuàng)意空間可以發(fā)揮，是否需要遵循一些熟悉上的”定式”。
   比如，你做的一個(gè)產(chǎn)品在行業(yè)中已經(jīng)有了很多同樣的，他們已經(jīng)把這樣產(chǎn)品的定義上了某種感官的形態(tài)，那么是否需要遵循？ 假如更改自己的創(chuàng)意有多大風(fēng)險(xiǎn)？ 你有把握做到更好嗎？
   （抱歉，這里沒(méi)有典型的例子。我認(rèn)為絕大多數(shù)時(shí)候視覺(jué)設(shè)計(jì)還是需要體現(xiàn)自我特色的）

視覺(jué)設(shè)計(jì)中的加法和減法：

1. 一個(gè)產(chǎn)品的視覺(jué)設(shè)計(jì)需求下來(lái)時(shí)，你不能馬上就有很多的想法，這是一個(gè)非常普遍的現(xiàn)象。但，很多時(shí)候市場(chǎng)不等人，你的老板會(huì)要求你必須快速完成設(shè)計(jì)方案。
2. 那么，開(kāi)始動(dòng)手吧。 先從”減法”開(kāi)始做起，用最簡(jiǎn)單的風(fēng)格初步完成你的設(shè)計(jì)。也許他沒(méi)有什么色彩和風(fēng)格，也沒(méi)有很絢緩的視覺(jué)展示效果。
   等你完成這個(gè)減法設(shè)計(jì)的時(shí)候，再后頭看看想想，大部分時(shí)候你已經(jīng)有了一個(gè)好的創(chuàng)意可以優(yōu)化進(jìn)去。
   就算沒(méi)有，你只要在這個(gè)設(shè)計(jì)上做一些點(diǎn)晶式的修飾就可以完成這個(gè)設(shè)計(jì)了。
3. 當(dāng)然，有些時(shí)候設(shè)計(jì)需求一下來(lái)你就會(huì)有很多的創(chuàng)意想法。
   那么，千萬(wàn)不要壓制自己也不要躡手躡腳不敢去按照”創(chuàng)意”做。 把他們都給做出來(lái)。然后，把這些創(chuàng)意放在一起對(duì)比，結(jié)合起來(lái)，形成你的風(fēng)格。
   但，最后一定要去做足夠的”減法”。”把多余的都去掉”是一個(gè)必須認(rèn)真作的工作。我們現(xiàn)在幾乎成天都能看到很多為了視覺(jué)而視覺(jué)的多余設(shè)計(jì)。
4. 產(chǎn)品的存在是為了幫助用戶完成某項(xiàng)任務(wù)。第一眼的”視覺(jué)感官”固然重要，但因?yàn)檫^(guò)多的多余修飾而影響了用戶完成任務(wù)的過(guò)程就很不值得了。所以，警惕某些視覺(jué)效果會(huì)成為”多余的設(shè)計(jì)”，讓你的視覺(jué)效果的應(yīng)用應(yīng)該適當(dāng)其所，是設(shè)計(jì)師必備的素質(zhì)。

這幾年”用戶體驗(yàn)設(shè)計(jì)”逐漸成熟，反到很多”視覺(jué)設(shè)計(jì)師”紛紛轉(zhuǎn)行做”交互設(shè)計(jì)”或者”可用性工程師”。這是一個(gè)比較可怕的現(xiàn)象。歸結(jié)這個(gè)現(xiàn)象，我認(rèn)為主要原因大概有：

1. 視覺(jué)設(shè)計(jì)師的職能范圍很小，導(dǎo)致很多有想法的設(shè)計(jì)師沒(méi)有發(fā)揮的空間，經(jīng)常在工作中受挫，能力得不到發(fā)揮和認(rèn)可。
   他們的工作往往都具體于”顏色”"造型”等純粹的”圖形表現(xiàn)”上，連一個(gè)按鈕的大小都很難有話語(yǔ)權(quán)。更有甚者：在很多對(duì)于設(shè)計(jì)不夠重視的企業(yè)，視覺(jué)設(shè)計(jì)師只是作為一個(gè)”執(zhí)行的工具”，視覺(jué)設(shè)計(jì)師連”用什么顏色”"按鈕用圓形還是方形”都必須聽(tīng)命與治理者。
2. 比如，做電子商務(wù)網(wǎng)站的時(shí)候有一個(gè)”商品列表”的頁(yè)面，pm告訴你”商品的名字要用14號(hào)的加粗藍(lán)色字，商品描述用12號(hào)的黑色字”，這個(gè)時(shí)候大多數(shù)設(shè)計(jì)師會(huì)很不爽，往往甚至?xí)�開(kāi)始鬧情緒：”視覺(jué)上的事情你就不管了，你們丫根本不懂設(shè)計(jì)，這里用14號(hào)的加粗字太難看了。”，然后改成了一個(gè)自己認(rèn)為更加”好看”的設(shè)計(jì)，往往這個(gè)時(shí)候pm也會(huì)較勁：”叫你用14號(hào)你不用，你看現(xiàn)在列表密密麻麻的用戶根本不能一眼就明了的看到商品名…”。
   其實(shí)原因很簡(jiǎn)單：假如一開(kāi)始pm就告訴設(shè)計(jì)師”這個(gè)列表一定需要用戶很清楚的一眼就能看到商品名，其他商品描述不用那么突出搶眼”，根本不用具體說(shuō)用什么字體之類的要求，設(shè)計(jì)師就明白了；假如設(shè)計(jì)師可以主動(dòng)思考pm提出需求的原因，然后在保證設(shè)計(jì)需求的基礎(chǔ)上讓界面更”好看”一切都解決了。所以，問(wèn)題應(yīng)該是雙方的。
   通過(guò)這個(gè)例子我們能看到：視覺(jué)設(shè)計(jì)師沒(méi)有”理解產(chǎn)品思想”的機(jī)會(huì)，對(duì)自己應(yīng)該表現(xiàn)什么樣的產(chǎn)品形象和氣質(zhì)沒(méi)有概念。很多時(shí)候不要說(shuō)他們能提出來(lái)對(duì)于產(chǎn)品視覺(jué)傳達(dá)的合理見(jiàn)解了，就算提出來(lái)也是會(huì)被否定。
3. 當(dāng)我們把”視覺(jué)設(shè)計(jì)”只定位成”圖形設(shè)計(jì)”的時(shí)候，”視覺(jué)設(shè)計(jì)師”的門(mén)檻越來(lái)越低，導(dǎo)致所有”視覺(jué)設(shè)計(jì)師”的待遇一致下降，更導(dǎo)致整個(gè)行業(yè)對(duì)于”視覺(jué)設(shè)計(jì)”的價(jià)值和能力產(chǎn)生比較的質(zhì)疑，不愿意再在其中投入過(guò)多的成本。
4. 很多視覺(jué)設(shè)計(jì)師發(fā)現(xiàn)和他在一起的所謂”交互設(shè)計(jì)師”比自己的待遇好，而且他們做的那些”交互設(shè)計(jì)”（其實(shí)這只是”視覺(jué)交互展現(xiàn)的設(shè)”計(jì)而已，真正的交互設(shè)計(jì)pm都給合在”產(chǎn)品架構(gòu)和業(yè)務(wù)流程設(shè)計(jì)”的時(shí)候給一起做了）自己也能做。
5. 很多視覺(jué)設(shè)計(jì)師覺(jué)得：做圖形越來(lái)越?jīng)]有空間，改做交互設(shè)計(jì)將來(lái)可以轉(zhuǎn)行做pm，最后說(shuō)不定還可以成為產(chǎn)品治理者。他們給了自己一個(gè)”被錯(cuò)誤現(xiàn)實(shí)誤導(dǎo)”的職業(yè)規(guī)劃。（推薦：ued的職業(yè)規(guī)劃應(yīng)該是什么）

我必須馬上解釋一下關(guān)于”交互設(shè)計(jì)”的誤區(qū)：

如，我們?cè)谠O(shè)計(jì)一個(gè)im軟件其中涉及到這樣的一個(gè)功能：當(dāng)有新的好友信息時(shí)在右下角彈出一個(gè)提示的”氣泡” 窗口。那么，這個(gè)”氣泡”是”從下往上緩緩?fù)瞥觥薄ⅰ睆挠彝�左緩緩�(fù)瞥觥薄ⅰ睆挠医峭�左角緩緩�(fù)瞥觥薄ⅰ敝苯釉诠潭ㄎ恢脧棾觥薄ⅰ庇蓽\變深由大變小在一個(gè)固定位置緩緩出現(xiàn)”、”…”？？？
這個(gè)工作本不應(yīng)該是由”交互設(shè)計(jì)”來(lái)完成了，所謂的”交互設(shè)計(jì)”指”用更加合理的信息展現(xiàn)方式更加高效的表現(xiàn)用戶使用過(guò)程”，而非上例中說(shuō)到的”視覺(jué)上如何動(dòng)態(tài)展現(xiàn)”。

好的交互設(shè)計(jì)師在產(chǎn)品設(shè)計(jì)過(guò)程中應(yīng)該完成的任務(wù)是：用合理的信息架構(gòu)準(zhǔn)確的將”產(chǎn)品結(jié)構(gòu)”表現(xiàn)在”界面”上，并保證其充分的延展性；將”產(chǎn)品的業(yè)務(wù)及數(shù)據(jù)流程”準(zhǔn)確的轉(zhuǎn)換為最終展現(xiàn)給用戶的(更加高效易用的)”使用流程”。

所以，各位交互設(shè)計(jì)師：把”視覺(jué)互動(dòng)”的工作交給你的視覺(jué)設(shè)計(jì)師吧！在視覺(jué)上他們比你專業(yè)。你們應(yīng)該更加關(guān)注”信息架構(gòu)”和”用戶使用流程”。

這個(gè)提到了 視覺(jué)設(shè)計(jì)占據(jù)整個(gè)體驗(yàn)46％的報(bào)告 被我多次提及，最后在這里再提一次。很多人反對(duì)這個(gè)報(bào)告的結(jié)論，但某種程度上我是持贊成態(tài)度的。因?yàn)槲艺J(rèn)為這里占據(jù)46％體驗(yàn)的視覺(jué)設(shè)計(jì)不只是圖形，它應(yīng)該包括一切和”視覺(jué)”相關(guān)的東西。對(duì)于任何一個(gè)產(chǎn)品來(lái)說(shuō)，視覺(jué)設(shè)計(jì)不應(yīng)該僅僅只是”用什么顏色、圓角還是直角、什么樣的造型”等純粹的靜態(tài)”圖形界面”。

分享：首次完整小型站點(diǎn)架構(gòu)的心得體會(huì)
http://www.jzfestival.com/你現(xiàn)在看到的是我對(duì)近學(xué)習(xí)標(biāo)準(zhǔn)化網(wǎng)頁(yè)設(shè)計(jì)幾個(gè)月的一個(gè)測(cè)試結(jié)果。這次我力爭(zhēng)將內(nèi)容與樣式分離及考慮到盡可能多的重用性，在圖片壓