全世界的企業(yè)家都在瘋狂的將錢投向各種web2.0、社會(huì)網(wǎng)絡(luò)、用戶提供內(nèi)容型創(chuàng)業(yè)團(tuán)隊(duì)。這如牛菇（bull-shiitake，不知道怎么翻）般的創(chuàng)業(yè)大潮淹沒了我對(duì)外界的感覺，腦子里時(shí)不時(shí)有東西鳴叫，而且有時(shí)還會(huì)突然暈過去。在這個(gè)世界（再次）爆炸之前，我在這里列出11條關(guān)于“如何在這個(gè)web2.0的時(shí)代去創(chuàng)造一個(gè)現(xiàn)實(shí)點(diǎn)的預(yù)算表”的建議。
1.少說多做。
我從沒見過一個(gè)公司達(dá)到或超越他們的預(yù)期計(jì)劃。企業(yè)家們只給投資者看他們想要的數(shù)字，一切就從這里開始變?cè)懔?。根?jù)本人的經(jīng)驗(yàn)來說，對(duì)于那些沒有自己產(chǎn)品原型的團(tuán)隊(duì)，將銷售預(yù)期除以100，然后在產(chǎn)品預(yù)計(jì)面市時(shí)間上加一年是比較合適的一個(gè)算法。哦，當(dāng)然，如果是一個(gè)有產(chǎn)品原型的團(tuán)隊(duì)，那么合適的數(shù)字應(yīng)是將銷售預(yù)期除以10，面市時(shí)間加上6個(gè)月。
2.從底層開始策劃
想一想你一周能開幾次業(yè)務(wù)及銷售會(huì)議，大概也就4，5次吧。再乘以這其中能成功進(jìn)行的百分比。最后再加上6個(gè)月來完成這個(gè)計(jì)劃。按這樣的方法預(yù)測(cè)，會(huì)產(chǎn)生一個(gè)比“保守”的方法更小的數(shù)字，通常按照“保守”的預(yù)測(cè)，你會(huì)至少擁有1%的市場(chǎng)份額。 一旦你的計(jì)劃完成了，將它拿給其他的管理層人員討論，并期望從中得到最真誠(chéng)的反饋。這是讓一個(gè)底層計(jì)劃真正底層的方法。千萬不要讓任何人——例如一個(gè)自戀的經(jīng)理——給公司簽署一個(gè)沒有80%以上成功保證的計(jì)劃。
3.不要計(jì)劃得太遠(yuǎn)：12到18個(gè)月已經(jīng)是極限了。
任何超過此時(shí)間的計(jì)劃，對(duì)于整個(gè)團(tuán)隊(duì)來說都是浪費(fèi)，因?yàn)檫B你自己都不清楚什么時(shí)候能推出產(chǎn)品，因此你只能去幻想用戶對(duì)你產(chǎn)品的接受度。如果你做了一個(gè)5年計(jì)劃，那么你最好去一家禮物包裝公司好了，那兒的計(jì)劃通常是以50年計(jì)算的。
4.準(zhǔn)備好每3個(gè)月的重新規(guī)劃。
從某種意義來說，計(jì)劃就是一個(gè)笑話：你可以通過一個(gè)預(yù)算案，然后在下一次董事會(huì)時(shí)又將之推翻。所以最好是做好每季度都重新規(guī)劃的準(zhǔn)備，而不要總是假裝“你看，上次我們預(yù)算對(duì)了吧?！薄 ∪欢?，在這種動(dòng)蕩的季度預(yù)算中還是存在一個(gè)威脅的：團(tuán)隊(duì)成員會(huì)開始相信：“投資者并不在意”這些正常的預(yù)算差額（我希望你不要有這種愚蠢的想法）。在一個(gè)創(chuàng)業(yè)團(tuán)隊(duì)里，任何事都是“近期計(jì)劃”，“長(zhǎng)期計(jì)劃”對(duì)于創(chuàng)業(yè)團(tuán)隊(duì)來講最多就是一年–習(xí)慣這種思維吧。
5.不要讓支出超越營(yíng)收。
我知道，我知道：你的創(chuàng)業(yè)團(tuán)隊(duì)會(huì)將是歷史上增長(zhǎng)最快的公司，所以你需要建設(shè)一個(gè)很好的基礎(chǔ)環(huán)境來應(yīng)付大量的用戶。繼續(xù)做夢(mèng)吧。你應(yīng)盡量消減各種預(yù)算，因?yàn)槟忝鎸?duì)的挑戰(zhàn)是創(chuàng)造需求而不是填滿現(xiàn)有需求。 特別要注意的是，保持你的網(wǎng)絡(luò)運(yùn)作費(fèi)用在每月250000美元以下。也許你要問，我是怎么憑空編造這么個(gè)數(shù)字的？你沒必要相信我，但是每月250000美元對(duì)VC來說是一個(gè)魔法般的數(shù)字。任何超過此數(shù)字的預(yù)算，都是在為并不存在的用戶做基礎(chǔ)準(zhǔn)備。就我的職業(yè)生涯來說，雖然“預(yù)算太單薄了，影響了我們的發(fā)展速度”這樣的話不好聽，但好過讓我聽到“支出已經(jīng)超過營(yíng)收了，我們應(yīng)該消減預(yù)算。但是我覺得你最好不要這樣做，因?yàn)闀?huì)打擊保持士氣”這樣的話。
如果你覺得250000這個(gè)指導(dǎo)線并不適合你，那么至少仔細(xì)檢查下你的預(yù)算表。剔除那些如“成為歷史上增長(zhǎng)最快的公司，一個(gè)月內(nèi)將銷售翻一番”之類的幻想。在做預(yù)算限額時(shí)要像街上的售貨員那樣思考，在填充團(tuán)隊(duì)職位時(shí)要像一個(gè)人力資源經(jīng)理那樣思考。這是很實(shí)用的，因?yàn)檫@些工作在excel里都很簡(jiǎn)單，不過在現(xiàn)實(shí)中卻……
6.與你的投資者合作
在董事會(huì)上給投資者做你的計(jì)劃處女秀是一件很蠢的事。你應(yīng)該提前就讓他們知道你的想法，而不要總是猜測(cè)他們想看到什么。因?yàn)楹献魇呛苤匾?，特別是你有一些不好的消息時(shí)。當(dāng)然用好消息來刺激投資者從來都不會(huì)是一個(gè)問題。
7.思考每個(gè)單位的收益性
有時(shí)候，每個(gè)單位都會(huì)虧損，這是能接受的。但是大多數(shù)時(shí)候，你得考慮如何讓每個(gè)單位盈利。記住，不要考慮什么google會(huì)收購(gòu)你，因?yàn)椤笆謿獠诲e(cuò)”不會(huì)是一個(gè)可行的策略。當(dāng)然，你還必須時(shí)刻了解你的每個(gè)單位的消耗，以此來計(jì)算在你通往盈利的路上，還有多遠(yuǎn)。
8.計(jì)劃好市場(chǎng)推廣支出
不要幻想市場(chǎng)推廣就是靠virality，buzz，TechCrunch，Demo這些站點(diǎn)報(bào)道一下就行了。當(dāng)然有的公司靠這種方法成功了，但是為什么我們會(huì)知道他們呢？因?yàn)檫@種例子實(shí)在是太稀少了。用體育界的觀點(diǎn)來看，我們都知道麥克喬丹是誰，是因?yàn)樗窍∮械某晒又?，而不是因?yàn)樗慕?jīng)歷是很普遍的。
你需要像一個(gè)商人而不是一個(gè)浪漫詩(shī)人般去創(chuàng)造你的市場(chǎng)需求。你應(yīng)該考慮廣告費(fèi)用，點(diǎn)擊率，每月獨(dú)立訪問量，交換訪問量，每用戶獲利程度，等等。總的來說，在你的市場(chǎng)模型中應(yīng)該最優(yōu)先考慮獲得投資及產(chǎn)品的生存能力。“我們的產(chǎn)品會(huì)被TechCrunch報(bào)道，所以市場(chǎng)推廣會(huì)很容易的，因?yàn)槲覀冇幸粋€(gè)口碑如此好的產(chǎn)品！”這樣的話可不會(huì)減少你的市場(chǎng)推廣支出。
9. 財(cái)政報(bào)告報(bào)告寧缺毋濫
大多數(shù)時(shí)候，在董事會(huì)你都要花上30分鐘來闡述你的新一期財(cái)政報(bào)告。你覺得你可以簡(jiǎn)單的用幾個(gè)數(shù)字來顯示你們團(tuán)隊(duì)的發(fā)展?fàn)顩r，并能看出整體財(cái)政的歷史走勢(shì)。對(duì)，你顯然可以這樣做，但如果你每月都換一種報(bào)告方式，我想你就很難實(shí)現(xiàn)這個(gè)夢(mèng)想了。我想了一個(gè)或許能解決這個(gè)問題的方法，那就是每次CEO或CFO改變他們的財(cái)政報(bào)告形式時(shí)，就扣他10%的股份。
如果你每月都用同樣的形式來展示你們的預(yù)算表和總結(jié)報(bào)表，這會(huì)讓投資者對(duì)你的計(jì)劃加深印象。比如說，如果你使用Quickbooks來做賬簿，那么你最好也用它來做其他事。這樣做的好處是：你得出的數(shù)字更能讓人理解；當(dāng)然壞處就是：你的工作量或許會(huì)有點(diǎn)提升。
最后，如果你能在投資者面前拿出你做的“瀑布式分析預(yù)測(cè)圖”（一種展示你對(duì)市場(chǎng)的預(yù)測(cè)是如何根據(jù)時(shí)間而改變的圖）來，這肯定能讓他們大吃一驚的。（Josh Kopelman對(duì)此分析法擁有版權(quán)）我希望在這個(gè)模型再加入一點(diǎn)：展示出你的計(jì)劃與現(xiàn)實(shí)的不同處，這樣你與你的夢(mèng)想的距離會(huì)更容易看清。
10.不要遺漏支出預(yù)算表
如果有某次的收入預(yù)算表忘了做，在一個(gè)創(chuàng)業(yè)團(tuán)隊(duì)里還是可以原諒的，因?yàn)闉橐粋€(gè)創(chuàng)業(yè)中的團(tuán)隊(duì)預(yù)算收入實(shí)在是一件風(fēng)險(xiǎn)很大的事。但如果你遺漏了支出預(yù)算表，那么你就實(shí)在是太蠢了！這根本毫無借口可言，哪怕是供給你原材料的廠家被火給燒了。因?yàn)榫退氵@樣，你也應(yīng)該立即找出后備資源來。讓我來列出你應(yīng)該準(zhǔn)備好的數(shù)字：20%的工資稅；每月$500的員工福利支出；每員工$3000的設(shè)備消耗費(fèi)用；當(dāng)然還有每平方$25的年租金。
11.想法要大
首先得取得一些小成功，但如果你在考慮5年后的事，那么想辦法將銷售提到1億美元去吧。如果你在沒high粉的狀況下無法想象這樣大的銷售額，那么很不幸，你不得不面對(duì)一個(gè)現(xiàn)實(shí)：你的公司并不是一個(gè)“風(fēng)險(xiǎn)公司”。也許你們?cè)谏虡I(yè)盈利上很成功，但你們絕不是一家符合風(fēng)險(xiǎn)投資口味的公司。唯一一個(gè)能讓你們撐到5年的方法就是一開始就用90天報(bào)表與vc死纏，展示出你的龐大計(jì)劃來。最后，大家都應(yīng)該相信，收獲總在辛苦后。
在寫這篇blog的時(shí)候，我參考Bob Prosen 的一本叫做《Kiss Theory Goodbye: Five Proven Ways to Get Extraordinary Results In Any Company》的書，這書對(duì)我的幫助很大。
November 10th, 2006 hidecloud
原文鏈接：five ways to optimize your design
原文作者：Neil Patel
每天有成千上萬的網(wǎng)站被創(chuàng)造出來，這些新網(wǎng)站不是基于瀏覽者的需要而是基于網(wǎng)站所有者的需要。瀏覽者被忽視，是大多數(shù)網(wǎng)站不成功的最大原因。這里將給出5種方法來優(yōu)化您的設(shè)計(jì)。
1. 成為瀏覽者中的一員把自己放在瀏覽者的地位。瀏覽者到您的網(wǎng)站來，他想要什么？您的網(wǎng)站的目標(biāo)不僅僅需要滿足您的需求，更重要的是需要滿足瀏覽者的需求。要得出瀏覽者想要的，有一種好的方法就是，對(duì)對(duì)您開發(fā)的產(chǎn)品和服務(wù)感興趣的人做個(gè)調(diào)查，并調(diào)整您的設(shè)計(jì)以滿足他們的需求和您自己的需求。這并不需要花多少錢，比如您可以問問身邊的朋友們。
2. 簡(jiǎn)約是最終的目標(biāo) 假如您看了比較成功的網(wǎng)站，比如 Google、Flickr 和 Blogger，他們都是簡(jiǎn)約的。為什么要加上臃腫的內(nèi)容呢？尤其是當(dāng)只有80%的瀏覽者使用了20%的上述的內(nèi)容。當(dāng)加入每一個(gè)特征時(shí)，請(qǐng)考慮瀏覽者的需要！把它當(dāng)做您的目標(biāo)吧。
3. 內(nèi)容為王確保網(wǎng)站的內(nèi)容以一種有效的方式排列。如果您僅僅將注意力集中于網(wǎng)站的視覺及其引起的感受，而忽視了內(nèi)容，那么由瀏覽者轉(zhuǎn)化為忠實(shí)的會(huì)員的比值，您認(rèn)為會(huì)很高嗎？如果您想瀏覽者購(gòu)買您的產(chǎn)品或服務(wù)，就需要一種簡(jiǎn)潔的、令人心悅誠(chéng)服的內(nèi)容和立體化的信息結(jié)構(gòu)。同時(shí)最重要的是，內(nèi)容要通俗易懂。
4. 細(xì)節(jié)是大的區(qū)別網(wǎng)站的每一個(gè)方面的細(xì)節(jié)都需要仔細(xì)考慮。有一些元素，比如顏色、形狀甚至梯度改變后，在整體上就有可能給瀏覽者很大的沖擊。使用藍(lán)色、綠色、青綠色和銀白色，能給人一種平靜的氛圍。在您的設(shè)計(jì)中，使用圓角比使用尖角更能給人一種柔和的、個(gè)性化的感受。通過適當(dāng)?shù)幕旌项伾?、圖形、圖片，您可以創(chuàng)造出強(qiáng)烈的氛圍和感受，這將對(duì)瀏覽者產(chǎn)生深刻的映像。
5. 指導(dǎo)瀏覽者 您并不想要瀏覽者為了尋找一個(gè)產(chǎn)品而點(diǎn)遍您的網(wǎng)站。避免混亂，通過鏈接、導(dǎo)航菜單指導(dǎo)瀏覽者，是可行的。在頁(yè)面上”告訴”瀏覽者，以便他們僅通過幾次點(diǎn)擊就可以買到產(chǎn)品和服務(wù)。通過降低瀏覽者點(diǎn)擊的次數(shù)，可有效的降低瀏覽者的挫折感，提高從瀏覽者到會(huì)員的轉(zhuǎn)化率。
這些優(yōu)化您的設(shè)計(jì)的方法可能看起來很簡(jiǎn)單，但是大多數(shù)情況下，他們被忽視了。試著用用，他們所起的作用，通過優(yōu)化您的設(shè)計(jì)就能節(jié)約很多廣告費(fèi)用，這些將震撼您！
penguin 投稿翻譯 - 歡迎訪問他的BLOG(qianjin@Health)
October 31st, 2006 indigo
這幾天看了MS兩位前輩(John Pruitt & Jonathan Grudin)寫的論文《Persona: Practice andTheory》，雖然成文很早，但還是受益匪淺。論文前關(guān)部分是他們對(duì)實(shí)踐的總結(jié)和分析，現(xiàn)簡(jiǎn)要翻譯摘抄下來，和大家分享。（如果你不知道啥是角色模型，到這里看掃盲帖。^_^）
項(xiàng)目情況
MSN Explorer
開發(fā)項(xiàng)目組成員：數(shù)百人
角色模型項(xiàng)目組：共4人。可用性工程師3人(其中兩人兼職),產(chǎn)品設(shè)計(jì)師1人(兼職)
角色模型項(xiàng)目時(shí)間：從2001年1月起，持續(xù)大約10個(gè)月
Microsoft Windows
開發(fā)項(xiàng)目組成員：數(shù)百人至數(shù)千人(隨時(shí)間變化)
角色模型項(xiàng)目組：共22人。包括幾個(gè)技術(shù)文案、幾個(gè)可用性工程師、4個(gè)產(chǎn)品策劃人、2個(gè)市場(chǎng)調(diào)研
角色模型項(xiàng)目時(shí)間：從2001年3月起，持續(xù)大約2年時(shí)間（到作者發(fā)稿時(shí)還沒有結(jié)束）
碰到的問題
- 角色不可信。明顯是由項(xiàng)目成員人為設(shè)計(jì)（并不是基于數(shù)據(jù)），或者與數(shù)據(jù)之間的關(guān)系不那么清晰。
- 角色的傳達(dá)溝通沒做好（譯者注：應(yīng)該是指把角色向整個(gè)項(xiàng)目組的成員傳達(dá)）。通常的手段就是把做得像簡(jiǎn)歷一樣的文檔打印到很大一張紙上，然后四處張貼。
- 沒有真正認(rèn)識(shí)到要怎么去使用角色模型。尤其是在整個(gè)項(xiàng)目過程中沒有向所有的人一直不停地講述模型。
- 沒有足夠的資源支持。包括高層的支持、人力資源和預(yù)算等。
引出的思考
- 怎么提取用戶抽象是最好的辦法？
- 可以虛構(gòu)到什么程度？那些內(nèi)容必須以數(shù)據(jù)為基礎(chǔ)？
- 哪些數(shù)據(jù)是最合適的？
- 怎樣才能把不同類型的數(shù)據(jù)整合起來？
- 幾個(gè)相關(guān)的產(chǎn)品開發(fā)小組能不能共享一組通用的用戶抽象？
- 怎么評(píng)價(jià)這些努力是值得的？
- 結(jié)果我們的產(chǎn)品變得更好了嗎？等等
實(shí)踐中的細(xì)節(jié)
- 利用已有的數(shù)據(jù)，特別是用戶研究的數(shù)據(jù)。包括行業(yè)調(diào)研、焦點(diǎn)組、用戶訪談和市場(chǎng)趨勢(shì)研究等。
- 角度數(shù)量控制在一個(gè)比較可控范圍：3-6個(gè)。
- 收集大量相關(guān)的市場(chǎng)調(diào)研和用戶研究數(shù)據(jù)（從網(wǎng)上或者一些外部資源）。
- 創(chuàng)建一個(gè)“反面角色”，盡可能表現(xiàn)出那些沒有被考慮到的用戶。
- Windows項(xiàng)目中人員較多，所以拆分到兩三個(gè)人的多個(gè)小組中，每組負(fù)責(zé)一個(gè)角色。
- 關(guān)于角色的每一句描述都盡可能地和數(shù)據(jù)相關(guān)聯(lián)。
- 創(chuàng)建一個(gè)“基礎(chǔ)文檔”，所有的角色都在這個(gè)基礎(chǔ)上創(chuàng)建。它包括數(shù)據(jù)、關(guān)鍵屬性、照片、相關(guān)材料等）。
- 當(dāng)一個(gè)角色基本上被創(chuàng)建出來之后，就近找一個(gè)人來當(dāng)模特，為他拍上一到兩小時(shí)的照片，用作后面的視覺材料。避免使用圖庫(kù)的圖片，因?yàn)閳D庫(kù)中的同一個(gè)人常常只有一兩張照片（譯者注：我們現(xiàn)在可以利用一下flickr，那上面有好多喜歡把自己24小時(shí)生活都展示出來的人）。
- 角色完成之后，為它建一個(gè)網(wǎng)站。找那些總體上匹配的用戶來看看在細(xì)節(jié)上是不是和他們匹配。
- 角色和文檔都搞定之后，開一個(gè)啟動(dòng)會(huì)議來向大家介紹。
- 用多種方法讓大家時(shí)刻都記得角色模型。比如做一些角色模型（真的模型，玩具）、印有角色的鼠標(biāo)墊、啤酒杯、其他多種形式的電子材料等等。
- 花大量的精力保證產(chǎn)品和功能文檔中包含使用角色模型來創(chuàng)建的情景流程。
- 視覺設(shè)計(jì)師在角色模型的基礎(chǔ)上來創(chuàng)作視覺表現(xiàn)。
- ……
更多的自己看吧，點(diǎn)擊下載：Personas practice and theory.pdf
感謝承志的投稿，來自淘寶UI團(tuán)隊(duì)的辛勤翻譯，歡迎訂閱他們的blog
October 29th, 2006 mimiqiao
這篇文章翻譯至：http://www.webdesignfromscratch.com/current-style.cfm
它總結(jié)了一些當(dāng)前網(wǎng)站設(shè)計(jì)風(fēng)格的發(fā)展趨勢(shì)。但是我得先提一句，它說的都是西方網(wǎng)站，未必適合我們中國(guó)網(wǎng)站的情況和中國(guó)網(wǎng)民的審美觀。如果能給你一點(diǎn)點(diǎn)參考和借鑒的價(jià)值，就足夠了。
————–Enjoy！————–
我很高興看到2006年的網(wǎng)站設(shè)計(jì)比以往任何時(shí)候都要好。這并不僅僅是因?yàn)楝F(xiàn)在有更多的網(wǎng)站，因而可以找到更多長(zhǎng)得不錯(cuò)的。事實(shí)上還是有很多長(zhǎng)得抱歉的。我想是因?yàn)橛性絹碓蕉嗟木W(wǎng)頁(yè)設(shè)計(jì)師比以往更懂得該如何做設(shè)計(jì)。
下面的這些例子顯示了現(xiàn)代圖形設(shè)計(jì)技術(shù)的精彩。它們看起都很漂亮、干凈而且容易使用。
最熱門的
我并不是說下面這些就是最好的，但它們是典型：
? The Alternative Energy Store? Gr0w collective
? Forecast Advisor
? emaginacion.com.ar
? iconbuffet.com
? Save Longstone Edge
? iomega.com
? linkedin.com
? mozilla.org
? Rapid Mortgages
? plaxo.com
? Prolotize共同的特點(diǎn)
以上這些網(wǎng)站都有下面的特征：
- 布局簡(jiǎn)單
- 中心定位
- 3D效果
- 柔和,自然的背景色
- 顏色鮮亮（要謹(jǐn)慎使用）
- 可愛的圖標(biāo)（也要謹(jǐn)慎使用）
- 有許多留白
- 大字體
我們一個(gè)一個(gè)來說。
布局簡(jiǎn)單
和幾年前相比，設(shè)計(jì)師們似乎正在尋找更加簡(jiǎn)單的單欄或雙欄布局。總的感覺就是設(shè)計(jì)師們普遍認(rèn)同簡(jiǎn)單的頁(yè)面表現(xiàn)更好。閱讀這類頁(yè)面只需要從上看到下即可，你的眼睛不用在頁(yè)面上轉(zhuǎn)來轉(zhuǎn)去拼命尋找想要的東西。同時(shí)在瀏覽過程中它也提供更加平和、穩(wěn)定的瀏覽體驗(yàn)。
中心定位
從上面的這些網(wǎng)站還可以發(fā)現(xiàn)第二個(gè)特點(diǎn)，它們的內(nèi)容都分布在中軸線附近。
大概兩年前，你可以找到很多“流動(dòng)布局”和“左對(duì)齊并固定寬度”的布局，現(xiàn)在內(nèi)容開始在出現(xiàn)在屏幕的中央。
左對(duì)齊的布局方式已經(jīng)不如以前常見了，流動(dòng)布局（全屏）也沒有這么流行了。
盡可能在“一屏”以內(nèi)顯示更多的信息似乎是一直以來的至理名言（也就是盡可能不要滾屏）。而流動(dòng)布局可以達(dá)到這一點(diǎn)。然而，現(xiàn)在我們似乎不太介意滾屏了，而且我們更樂意發(fā)揮由滾屏帶來的優(yōu)勢(shì)，比如更多的留白和行高。
有節(jié)制地使用3D效果
上面所有的網(wǎng)站都使用了一些很細(xì)致的斜面、給分隔條的邊緣來個(gè)輕微的倒角、給背景一點(diǎn)點(diǎn)空間感、或者使用一些很“跳”的帶著浮雕和陰影的圖標(biāo)。倒影和漸變非常普遍，陰影也還在使用，不過非常小心。
到處都是帶著閃光圖案的商標(biāo)：
柔和,自然的背景色
上面這些網(wǎng)站都有一個(gè)樸素的背景，最流行的就是白色和灰調(diào)漸變。這樣的背景提供了一個(gè)又酷又柔和又中立的環(huán)境，讓那些搶眼的顏色可以引導(dǎo)用戶的目光。
顏色鮮亮（要謹(jǐn)慎使用）
柔和、時(shí)髦的背景色為添加吸引眼球的特性提供了極好的基礎(chǔ)，而強(qiáng)色調(diào)高對(duì)比度非常適合頁(yè)面上的其他重要元素。
Iomega比其他幾個(gè)網(wǎng)站用了更重的顏色，它的推廣區(qū)域使用了濃烈的暗紅色。然而這并沒有淹沒頁(yè)面上的其它部分，因?yàn)樗捎昧艘恢碌纳{(diào)和簡(jiǎn)單的形狀。
可愛的圖標(biāo)（也要謹(jǐn)慎使用）
有一個(gè)“規(guī)則”：不要在同一個(gè)頁(yè)面上使用太多好看的元素（這樣會(huì)影響用戶的注意力）。（譯者注：所謂適可而止）
搶眼的顏色、3D效果、漂亮的圖標(biāo)和按鈕可以給頁(yè)面增加一些閃光點(diǎn)，給人一種高品質(zhì)的感受。但是，如果用濫了，就會(huì)產(chǎn)生一種疊加效應(yīng)，使頁(yè)面變得混亂，用戶變得迷惑。
有許多留白
今天的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格非常之清新，仿佛剛剛經(jīng)歷了深呼吸一般
有時(shí)候我甚至想把一些非常擁擠的網(wǎng)頁(yè)粘到氣球上，然后一直吹氣直到頁(yè)面上所有東西之前都有足夠的空隙。
我們的眼睛需要被注視物的周圍有一定的空間，這樣才能看清楚它是個(gè)什么玩意兒。
一般來說，留白越多越好。我極少看到一個(gè)頁(yè)面，然后會(huì)想：“唉，他們一定要再加點(diǎn)內(nèi)容上去才行！”。
很高興地看到現(xiàn)在有很多設(shè)計(jì)都使用了合適大小留白，頁(yè)面上的元素之間有足夠的空隙。同時(shí)為了屏幕閱讀也設(shè)定了額外的行間距。
看看這些讓人舒服的留白吧！
大字體
我并不是說你網(wǎng)站上的所有文字都要大得讓人吃驚。事實(shí)上，在某些情境下，小字體也不錯(cuò)。
真正優(yōu)秀的設(shè)計(jì)應(yīng)該是這樣：
讓重要的文字比一般的文字更大
就像我們?cè)谏厦嫣岬降脑O(shè)計(jì)方法一樣，它只有在一定的模式下使用才能起作用。如果所有的文字都很大，那就沒有一個(gè)是大的了。
用大字體讓你的訪客迅速地了解這個(gè)頁(yè)面是關(guān)于什么的，什么是重要的，并且指出接下來他們可以在哪里找到想要的東西。
感謝承志的投稿，來自淘寶UI團(tuán)隊(duì)的辛勤翻譯，歡迎訂閱他們的blog
October 29th, 2006 mimiqiao
原文： User Interface Design - Taking the Good with the Bad
成功的婚姻之關(guān)鍵在于折衷。當(dāng)事情沿著你不希望的方向發(fā)展，在最后，形成的爭(zhēng)論卻可以為你帶來極大的好處。這條定理同樣適用于用戶界面設(shè)計(jì)。畢竟，如果婚姻不是形式和儀式又是什么呢？
設(shè)計(jì)用戶界面的過程從根本上就是折衷的訓(xùn)練。這個(gè)訓(xùn)練并非指設(shè)計(jì)者和項(xiàng)目負(fù)責(zé)人之間的折衷（可用性從來沒被辦公室政治利用過），而是指設(shè)計(jì)方案的倒退和前進(jìn)之間的折衷。每一個(gè)有關(guān)用戶界面的決定，從一像素的精確定位到整個(gè)網(wǎng)站的信息架構(gòu)都需要深思熟慮。對(duì)每一個(gè)設(shè)計(jì)方案給用戶帶來的好處與花費(fèi)兩者之間的仔細(xì)權(quán)衡才是本質(zhì)。人們常常忽略有時(shí)是很小的代價(jià)，但每一個(gè)用戶界面設(shè)計(jì)都要付出的代價(jià)。經(jīng)過考慮的折衷原則其實(shí)貫穿了所有的用戶界面設(shè)計(jì)，但在設(shè)計(jì)最佳的用戶界面時(shí)，具有諷刺的是，它還要求你避免設(shè)計(jì)折衷的界面。
你不能吃了蛋糕還想擁有它
在創(chuàng)作用戶界面的時(shí)候，你必須處理兩個(gè)主要且沖突的局限：在僅有的一個(gè)顯示器上傳達(dá)海量的信息；用戶在一定時(shí)間內(nèi)接受海量的信息。在一個(gè)顯示器上顯示太多的內(nèi)容，用戶不得不從混沌中“艱難跋涉”了；顯示太少的信息，用戶為了找到他們的目標(biāo)，又不得不靠猜測(cè)了。好的設(shè)計(jì)應(yīng)該在程序和用戶之間找到平衡點(diǎn)，既有效利用屏幕，又能考慮用戶理解信息的能力。
你的舞臺(tái)（顯示器）是有局限的——畢竟有x像素的寬和y像素的高。這意味著資源很重要，你利用的每個(gè)象素都可看作是有價(jià)格的。當(dāng)你試圖去創(chuàng)建一個(gè)用戶界面的時(shí)候，保持信息密度的平衡是項(xiàng)挑戰(zhàn)。每個(gè)設(shè)計(jì)方案都要經(jīng)過深思，因?yàn)樵谄聊簧厦吭黾右粔K內(nèi)容就加大了信息密度，這對(duì)用戶有限的精力和認(rèn)知過程是個(gè)挑戰(zhàn)，使得用戶更難弄明白了。
好的設(shè)計(jì)代替不好的
無論何時(shí)，花費(fèi)只要能帶來好處，采取折衷原則也是可以的。理論上，你可以最大化好處和最小化壞處，但本質(zhì)問題是，所帶來的好處能否超過其花費(fèi)？不僅僅是超過，在所有可選的設(shè)計(jì)方案中，它能否帶來最大利潤(rùn)？果真如此，它才是最佳方案。
花費(fèi)/好處的折衷考慮穿越了用戶界面開發(fā)的所有層次，從導(dǎo)航設(shè)計(jì)到字體大小。越是重要的設(shè)計(jì)方案，越是體現(xiàn)出用戶界面巨大而潛在的影響。小的設(shè)計(jì)方案看起來似乎無關(guān)緊要，但積少成多，也會(huì)對(duì)用戶界面產(chǎn)生潛在影響。無論大小，每一個(gè)設(shè)計(jì)方案都應(yīng)該在可用性評(píng)估和考慮網(wǎng)絡(luò)用戶界面好處之后再?zèng)Q定。
一些對(duì)比的設(shè)計(jì)方案
| 設(shè)計(jì) | 好處 | 花費(fèi) |
|---|
| 減少信息構(gòu)架的層次 | 找到信息時(shí)減少了點(diǎn)擊 | 更混亂 |
| 深層信息架構(gòu) | 清晰，減少混亂 | 找信息時(shí)點(diǎn)擊多 |
| 小字體 | 一屏上顯示更多信息 | 某些用戶太難閱讀了 |
| 大字體 | 閱讀起來容易 | 每屏信息少了 |
| 下拉框 | 在有限空間里容下了更多選項(xiàng) | 隱藏了選項(xiàng) |
| 單選框 | 同一時(shí)間看到更多選項(xiàng) | 需要更多空間，易混淆 |
| 圖標(biāo) | 一旦記住就容易辨認(rèn)了；視覺愉悅 | M要學(xué)習(xí)識(shí)別 |
| 文字鏈接 | 總是易懂的 | 一旦不理解，可能必須閱讀更多的資料 |
| 縮寫 | 節(jié)約空間 | 需要學(xué)習(xí)和識(shí)別 |
| 非縮寫 | 易懂 | 需要額外空間 |
| 鍵盤快捷鍵 | 數(shù)據(jù)高速輸入 | 需要學(xué)習(xí) |
| 鼠標(biāo)指向和點(diǎn)擊 | 直覺的 | 交互增加了額外的時(shí)間，需要更多的經(jīng)驗(yàn) |
瘋狂背后的模式
事實(shí)上，你無法刻意評(píng)估每項(xiàng)設(shè)計(jì)方案的優(yōu)劣。此過程就像天性一樣，你可以憑直覺判斷哪里該用下拉菜單還是單選按鈕，或者此設(shè)計(jì)是不是比另一個(gè)略勝一籌。但直覺是建立在相關(guān)經(jīng)驗(yàn)和努力之上的。設(shè)計(jì)的折衷評(píng)估仍舊可能發(fā)生，它在潛意識(shí)中形成了。這種潛意識(shí)行為可能讓你沒意識(shí)到為什么選擇了此項(xiàng)，而非另一項(xiàng)方案。但如果你拆開了這個(gè)過程，其核心就是基于可用性原則的判斷。
在設(shè)計(jì)過程中描述這個(gè)潛在法則可能并非必須，它很自然就發(fā)生了，但是你必須清楚，并在邏輯上意識(shí)到你的設(shè)計(jì)。如果你和別人一起工作，他們的建議可能降低了可用性，你意識(shí)到自己的決定是如何產(chǎn)生的就很重要了。通過將用戶界面設(shè)計(jì)中潛意識(shí)的行為化作語言，你可以為堅(jiān)持自己的決定增加了砝碼。但如果你讓每個(gè)人都對(duì)界面設(shè)計(jì)提出一種意見（就像恐怖的會(huì)議討論），界面可能會(huì)像過去那樣難看了。
好 – 壞 = 網(wǎng)絡(luò)可用性
你是否注意到你可以立刻指出各種界面設(shè)計(jì)的不足？這是因?yàn)樵诮缑嬖O(shè)計(jì)時(shí)的折衷原則使然。甚至最好的設(shè)計(jì)解決方案都可能有些倒退，一些成員可能會(huì)嘗試改變?cè)O(shè)計(jì)。但任何設(shè)計(jì)都有不足之處，每一個(gè)無不如此。這樣的不足還不至于損害設(shè)計(jì)。一個(gè)設(shè)計(jì)比另一個(gè)設(shè)計(jì)更好的地方在于無時(shí)無刻不照顧到網(wǎng)絡(luò)可用性。所以，好-壞=網(wǎng)絡(luò)可用性。最后測(cè)量的標(biāo)準(zhǔn)就是網(wǎng)絡(luò)的可用性價(jià)值。
批評(píng)開始滿天飛了。字體太小了、圖標(biāo)含義不清、縮寫詞意不明。也許最初只是臉紅一下，然后就紅到耳根了，仿佛這些批評(píng)都是對(duì)的一樣。事實(shí)上，這類宣言單獨(dú)來看都是正確的，但它太過正確，也應(yīng)該被挑戰(zhàn)。來決定它值不值，就要既考慮花費(fèi)，又要考慮好處了。后臺(tái)設(shè)計(jì)者能立刻識(shí)別一個(gè)特殊設(shè)計(jì)的花費(fèi)，但是他們看不到好處。你需要客觀的評(píng)估每個(gè)建議對(duì)可用性的影響，從而決定哪個(gè)是最可取的。
除了要懂得界面設(shè)計(jì)中的折衷性，你也應(yīng)該鼓勵(lì)那種有缺陷的設(shè)計(jì)建議。為了有效評(píng)估那些作用于界面設(shè)計(jì)的花費(fèi)和好處，你需要涉獵多種領(lǐng)域：從認(rèn)知學(xué)到人因?qū)W到圖形設(shè)計(jì)。只有對(duì)人們?nèi)绾闻c應(yīng)用程序交互建立了巨大的知識(shí)儲(chǔ)備，你才能更有效地評(píng)估用戶界面設(shè)計(jì)。這不僅僅是個(gè)非對(duì)即錯(cuò)的事情，因?yàn)榛ㄙM(fèi)總是與帶來的好處相關(guān)。
舉例來說，你的頁(yè)面字體可能小了，對(duì)一些老年人相當(dāng)難以閱讀。這就是花費(fèi)。但這在一屏上提供了更多的信息，也意味著更少的滾動(dòng)，減少滾動(dòng)可以降低物理操作和認(rèn)知輸入?，F(xiàn)在假設(shè)統(tǒng)計(jì)出你的用戶年齡90%在21至30歲之間，因此比較其他解決方案，這時(shí)字體更小一些會(huì)更好，網(wǎng)絡(luò)的可用性也更高。
所選的方案并非完美，但它提供了更好的可用性。你也可以提出異議，用好的替代壞的設(shè)計(jì)，但對(duì)于你特定的應(yīng)用，選擇這種方案無非是最明智的。你必須在完整的程序使用中加以衡量，才能選出最合適的方案。
懂得在界面設(shè)計(jì)中無所不在的折衷原則，并應(yīng)該灌輸給整個(gè)項(xiàng)目組，甚至每個(gè)普通員工都要知曉。對(duì)用戶界面的爭(zhēng)論應(yīng)該被鼓勵(lì)。在每一個(gè)設(shè)計(jì)方案中通過理解、評(píng)估和解釋折衷原則，你可以設(shè)計(jì)可用性更高和更有說服力的界面。
對(duì)成功的評(píng)估
當(dāng)評(píng)估一個(gè)設(shè)計(jì)是否更好時(shí)，又需要一個(gè)用戶界面準(zhǔn)則去評(píng)估，以下是幾個(gè)用戶界面質(zhì)量的元素：
- 容易學(xué)習(xí)并容易記住
- 使用的有效性
- 出錯(cuò)率，可伸縮性和可恢復(fù)性
- 個(gè)人滿意度
以應(yīng)用程序的最后使用效果評(píng)定，每一個(gè)因素都可能是重要的。舉例來說，使用的有效性也許對(duì)高端的用戶程序有用，而對(duì)小冊(cè)子市場(chǎng)就不一定那么有效了。雖然這種轉(zhuǎn)變可能會(huì)提高個(gè)人滿意度。但每一個(gè)設(shè)計(jì)決定都應(yīng)該接受上面四個(gè)因素的考驗(yàn)。
廣泛折衷原則
折衷也不應(yīng)該以屏幕設(shè)計(jì)為終點(diǎn)。在用戶界面設(shè)計(jì)中占據(jù)了很大分量的包括：網(wǎng)絡(luò)信息統(tǒng)計(jì)（比如什么瀏覽器、平臺(tái)、顯示效果尺寸等）、瘦/胖/富客戶端體系、開發(fā)時(shí)間和花費(fèi)的資源等。在評(píng)估折衷時(shí)，可用性占據(jù)了極大的分量，但真實(shí)使用環(huán)境中的一些問題也日趨重要。比如說，如果一個(gè)設(shè)計(jì)方案比另一個(gè)好得多，是否值得用1萬美元開發(fā)它？這部分功能的提升值得嗎？反過來想，節(jié)約的這些錢是否削弱了可用性？這類討論是如此現(xiàn)實(shí)，需要被謹(jǐn)慎評(píng)估。
只要認(rèn)識(shí)到用戶界面設(shè)計(jì)是建立在折衷上的，會(huì)幫助我們清楚地認(rèn)識(shí)到為什么如此設(shè)計(jì)。這樣做會(huì)減少優(yōu)秀界面設(shè)計(jì)出軌的風(fēng)險(xiǎn)，尤其對(duì)那些只看到事物一個(gè)方面的人有用。通過清晰地列出花費(fèi)、好處和相互交流設(shè)計(jì)的意義，你可以更好地說明別人、得到更多的支持?？傊?，如果我們能依照折衷的原則，我們就能正確地看待好處和壞處。只是希望別帶給我們丑陋的事物。（完）
感謝qinghou投稿，隆重推薦Taobao UI團(tuán)隊(duì)的blog，他們的blog既記錄了taobao的點(diǎn)滴，又著眼于用戶體驗(yàn)的方向
October 29th, 2006 mimiqiao
最近對(duì)Web前端有很多想法，剛好看到這篇文章，跟我想法不謀而合，所以翻譯出來與大家分享。許久沒翻譯了，里面多少還是有些我沒能完全理解，意譯過來，如果錯(cuò)誤，請(qǐng)務(wù)必指出和修改，謝謝。
原文The Time is Now for Front-End Architects， 來自：Garrett Dimon，感謝作者的許可。
去年，我在YTS發(fā)表了前端架構(gòu)師的想法，之后花更多時(shí)間來思考，現(xiàn)在更堅(jiān)信這是一個(gè)不可或缺的角色。
當(dāng)后端技術(shù)伴隨.Net, Rails和Java之類的框架發(fā)展得越來越抽象和強(qiáng)大，前端技術(shù)的潛在發(fā)展也日益復(fù)雜。在束縛前端技術(shù)潛在好處的差勁實(shí)現(xiàn)之前， Web需要更多的前端架構(gòu)師。
多虧了諸如跨瀏覽器支持的先進(jìn)技術(shù)的發(fā)展，用戶體驗(yàn)、更多有意義的主題比如無障礙都撥云見日，這個(gè)世界再也不僅僅就HTML和CSS如此簡(jiǎn)單，因此，絕大部分的團(tuán)隊(duì)都需要一個(gè)真正理解和實(shí)踐涉及到前端的一切的人。
角色
這并不是一個(gè)扼要和簡(jiǎn)單的清單，對(duì)于下面的主題／技術(shù)，前端架構(gòu)師也不能僅僅滿足于了解一下里里外外而已，而是需要足夠的深入研究，并有自己出色的見解。
- XHTML
- CSS(1, 2, 3)
- 跨瀏覽器和跨平臺(tái)
- DOM腳本編程
- AJAX
- Flash
- 漸進(jìn)增強(qiáng)和適度降級(jí)
- 無障礙
- 可用性
- 信息架構(gòu)
- 界面設(shè)計(jì)
- 視覺設(shè)計(jì)
- 表現(xiàn)層邏輯（ASPX, Rails視圖等）
- 商業(yè)規(guī)則和邏輯
作為一個(gè)前端架構(gòu)師，必須擁有這些領(lǐng)域的絕對(duì)執(zhí)行力。例如，前端架構(gòu)師能夠決定某個(gè)特性是使用AJAX還是傳統(tǒng)的頁(yè)面刷新。哪個(gè)更便于使用？對(duì)無障礙的影響如何？改用Flash有意義嗎？
撥亂反正
表現(xiàn)，結(jié)構(gòu)，行為和商業(yè)邏輯的混雜，導(dǎo)致不必要的復(fù)雜，導(dǎo)致難以維護(hù)的怪胎解決方案。就如后端需要正確地劃分為數(shù)據(jù)層，商業(yè)邏輯，表現(xiàn)邏輯等，前端開發(fā)復(fù)雜到是時(shí)候調(diào)整其架構(gòu)了。
編寫良好結(jié)構(gòu)或者說避免使用表格布局是遠(yuǎn)遠(yuǎn)不夠的。這是第一步，前端架構(gòu)的哆咧咪而已。現(xiàn)在是時(shí)候關(guān)注DOM腳本編程，AJAX, 無障礙等，該升級(jí)了。
非編程不可
我主張前端架構(gòu)師必須懂得真正的編程知識(shí)，而這正是很多自封為前端架構(gòu)師的人所缺乏的。我的意思不是能夠剪切粘貼改進(jìn)代碼就行了，而是能夠跟老練的工程師商討如何能夠最好地結(jié)合前端。
這就是說，前端架構(gòu)師需要真正理解結(jié)構(gòu)遭遇商業(yè)邏輯的問題。如果工程師說某些東西使用ASP.NetDataGrid是不可能實(shí)現(xiàn)的，前端架構(gòu)師必須能夠解釋如何與為何要使用DataList或Repeater取代，解釋為何DataGrid在該情景下是個(gè)錯(cuò)誤的選擇……
這只是個(gè)例子，問題還在于僅知道客戶端編程也是不夠的。能夠使用與工程師相同的術(shù)語，能夠討論（前后端）關(guān)鍵集成的最佳解決方案，這是絕對(duì)必須的。
斷線的風(fēng)箏
我們今天正處在一個(gè)不妙的處境中，原因在于幾乎沒有人能夠?yàn)榍昂蠖说臏羡执顦颉Ｒ话愎こ處煵粫?huì)有興趣或?qū)嵺`標(biāo)記，CSS,或DOM腳本編程，大部分客戶端開發(fā)者也沒有與后端技術(shù)協(xié)作的經(jīng)驗(yàn)。幾周入門PHP不會(huì)成為程序員，幾周入門XHTML也不會(huì)成為真正的客戶端開發(fā)者。
罪魁禍?zhǔn)?/h3>
我首先想到的十足例子是，ASP.Net完全漠視Web標(biāo)準(zhǔn)，同樣地，web氛圍（我們指表格和占位gif）讓W(xué)eb標(biāo)準(zhǔn)郁悶。企業(yè)項(xiàng)目的大多數(shù)框架輸出的標(biāo)記，即使使用1999年的標(biāo)準(zhǔn)來衡量，都是糟糕無比的。
如此巨大和“專業(yè)”的產(chǎn)品怎么能才夠不忽視，按理說是整個(gè)項(xiàng)目最簡(jiǎn)單的方面？只有靜態(tài)代碼。理由是，基于技術(shù)的立場(chǎng)衡量產(chǎn)品，結(jié)構(gòu)，CSS和其他客戶端技術(shù)都是“事后諸葛亮”。表現(xiàn)邏輯，結(jié)構(gòu)和行為混雜，壓根無助于無障礙，Web標(biāo)準(zhǔn)，或者前端技術(shù)干凈的分離。抬起你的頭來，就在2006，這些都成受歡迎的慣例了。
總結(jié)
如果這個(gè)世界上姿態(tài)最鮮明的產(chǎn)品和項(xiàng)目都如此低劣的方式來處理事情，其他的還有什么好說？毫無疑問，我們需要前端架構(gòu)師，而且就在昨天。
歸結(jié)于歸結(jié)，我們有一堆相互關(guān)聯(lián)的技術(shù)，很少人能夠埋頭鉆研它們之間的關(guān)系，這很不幸。正確做事的真正價(jià)值在于容易的維護(hù)和長(zhǎng)期的適應(yīng)性。雖然在關(guān)鍵時(shí)刻，有些方式更容易選擇其他的方法和拼湊起另外的東西。對(duì)某些人來說，這可能是可接受的做事方式。但是，對(duì)我們大部分人來說，這是拙劣的抉擇，也非常不專業(yè)。
我交給你去想了。我假設(shè)你把車交給技工修理，修好了時(shí)候，瞧瞧引擎罩內(nèi)大量的輸送管，我不知道你對(duì)技工作何感想？
