這也是常常困擾我自己的問(wèn)題笆凌，如何在瀏覽器和Photoshop之間做選擇答捕，以及如何才能高效地在瀏覽器中進(jìn)行設(shè)計(jì)？

希望大家喜歡泻仙，能給大家提供一些幫助~~

在瀏覽器中設(shè)計(jì)

如果你是一名從事科技行業(yè)的設(shè)計(jì)師糕再，你可能曾經(jīng)聽(tīng)過(guò)或看過(guò)一個(gè)當(dāng)下設(shè)計(jì)領(lǐng)域很火的話題:在瀏覽器中設(shè)計(jì)。正如它的字面意義所說(shuō)饰豺，與其花數(shù)小時(shí)亿鲜、數(shù)日、數(shù)周冤吨、甚至數(shù)月的時(shí)間在Photoshop里設(shè)計(jì)出精確到每一個(gè)像素點(diǎn)的作品（自上而下的主流設(shè)計(jì)過(guò)程：由設(shè)計(jì)師設(shè)計(jì)視覺(jué)稿蒿柳，再由后臺(tái)程序員予以實(shí)現(xiàn)），在瀏覽器中直接設(shè)計(jì)使設(shè)計(jì)師可以拿著簡(jiǎn)單粗糙的草圖直接進(jìn)入編寫(xiě)代碼并實(shí)現(xiàn)的過(guò)程漩蟆。

但是如何才能在瀏覽器中高效地進(jìn)行設(shè)計(jì)呢垒探？

什么時(shí)候才是采用這個(gè)方法的最佳時(shí)機(jī)呢？

這篇文章將會(huì)告訴你什么時(shí)候應(yīng)該用瀏覽器而不選用傳統(tǒng)的Photoshop設(shè)計(jì)怠李，以及如何才能高效地在瀏覽器中進(jìn)行設(shè)計(jì)圾叼。

我認(rèn)為“在瀏覽器中設(shè)計(jì)”的概念更多是一種用瀏覽器得到你想要的效果而不是單純的設(shè)計(jì)。在我看來(lái)捺癞，設(shè)計(jì)的目的是為了給用戶解決問(wèn)題夷蚊，而在瀏覽器中設(shè)計(jì)可以讓你以最快的速度得到可以實(shí)現(xiàn)設(shè)計(jì)效果的代碼——僅需要幾次討論和幾張草圖。

何時(shí)選擇髓介？

在科技論壇里有很多文章都在歌頌在瀏覽器中設(shè)計(jì)的優(yōu)勢(shì)——說(shuō)它是網(wǎng)頁(yè)設(shè)計(jì)的未來(lái)惕鼓，或者說(shuō)Photoshop應(yīng)該被淘汰諸如此類。我承認(rèn)用瀏覽器設(shè)計(jì)可以成為你進(jìn)行項(xiàng)目設(shè)計(jì)時(shí)的第一選擇唐础，但有些情況下你并不可以這樣做——比如客戶有特殊要求箱歧，或者最終交付產(chǎn)品的屬性并不合適，又或者有時(shí)間限制等等一膨。

下面我列舉了一些你不應(yīng)該選擇用瀏覽器設(shè)計(jì)的可能情形：

客戶的需求并不合適在瀏覽器中實(shí)現(xiàn)呀邢。你可以說(shuō)“那就不要跟他們合作了”，但是我們都知道現(xiàn)實(shí)往往不是由你能決定的豹绪。也許當(dāng)下客戶的首要需求是通過(guò)呈現(xiàn)一個(gè)設(shè)計(jì)精美的網(wǎng)站而在競(jìng)爭(zhēng)者中脫穎而出或者是贏取投資者的青睞价淌；也許客戶對(duì)功能的需求一直在變；也許客戶現(xiàn)有的版本存在著許多根本問(wèn)題。在這些情況下输钩，傳統(tǒng)的先做線框圖再生成設(shè)計(jì)效果圖的方式也許可以更為有效的呈現(xiàn)他們所需要的原型豺型。

許多客戶將視覺(jué)效果圖視為成果仲智。有時(shí)候每周給客戶10-20張高保真效果圖比1-5張可以運(yùn)行但平淡無(wú)奇的網(wǎng)頁(yè)要來(lái)的有效的多买乃。

構(gòu)思中的網(wǎng)站功能與布局太過(guò)復(fù)雜，無(wú)法同時(shí)在視覺(jué)與代碼層面同時(shí)實(shí)現(xiàn)钓辆。作為人類剪验，我們大部分人的大腦無(wú)法支持我們?cè)趦蓚€(gè)維度同時(shí)思考。盡管有人會(huì)說(shuō)設(shè)計(jì)與代碼是密不可分的前联，但對(duì)我來(lái)說(shuō)在想象一個(gè)有許多變化的復(fù)雜布局的同時(shí)為這個(gè)布局寫(xiě)下相應(yīng)代碼是一件非常困難的事功戚。研究表明人類并不擅長(zhǎng)多線工作，用瀏覽器設(shè)計(jì)時(shí)就是如此似嗤。的確啸臀，長(zhǎng)時(shí)間的鍛煉可以讓你更快的在腦海中想象出復(fù)雜構(gòu)圖、寫(xiě)出更干凈的代碼烁落，所以請(qǐng)不要放棄乘粒。

<p class="em">有時(shí)候就是這樣。比如伤塌，納尼灯萍？！<p>

作品處于“改良”階段每聪。項(xiàng)目已經(jīng)經(jīng)過(guò)了初始的MVP階段旦棉，現(xiàn)在在你面前的是一個(gè)設(shè)計(jì)得體的成品網(wǎng)站，你要做的只是為其增加更多的功能药薯。如果用戶已經(jīng)表達(dá)過(guò)對(duì)瀏覽器中特定設(shè)計(jì)的不滿绑洛，比如行動(dòng)按鈕不夠清晰，或者他們不知道從頁(yè)面的何處開(kāi)始讀起童本。這個(gè)時(shí)候你就應(yīng)該回到Photoshop里仔細(xì)的重新審視一下這些設(shè)計(jì)真屯。

在我看來(lái)，在瀏覽器中設(shè)計(jì)的最大挑戰(zhàn)正如Andy Budd所說(shuō)的一般：

“最好的設(shè)計(jì)工具將設(shè)計(jì)者與設(shè)計(jì)作品之間的界限降到最低（鉛筆就是個(gè)很好的例子）巾陕，用瀏覽器設(shè)計(jì)為這個(gè)過(guò)程增添了一層不必要的阻隔讨跟。” ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ——Andy Budd

除此以外鄙煤，你也確實(shí)享受著在畫(huà)板上精心繪制每一個(gè)像素點(diǎn)的過(guò)程晾匠。許多網(wǎng)頁(yè)設(shè)計(jì)師的前身都是平面設(shè)計(jì)師。對(duì)細(xì)節(jié)精益求精的精神早已融入了我們的骨子里梯刚。

我們選擇用瀏覽器設(shè)計(jì)的理由各種各樣凉馆，根據(jù)項(xiàng)目的不同我們也會(huì)相應(yīng)采用不同的方法。當(dāng)需要用瀏覽器進(jìn)行設(shè)計(jì)的時(shí)候，以下就是我所用的方法澜共。

如何開(kāi)始向叉？

啟動(dòng)一個(gè)設(shè)計(jì)項(xiàng)目的方法有很多種。比如我寫(xiě)這篇文章的時(shí)候嗦董，我采用的是philosophie在為新成立公司設(shè)計(jì)產(chǎn)品時(shí)所通常使用的方法母谎。許多設(shè)計(jì)領(lǐng)域的領(lǐng)軍人物，比如Dan Mall京革，都曾詳盡闡述過(guò)使一個(gè)項(xiàng)目成功啟動(dòng)的方法奇唤，在此我就不加以贅述了。

在項(xiàng)目啟動(dòng)的過(guò)程中匹摇，如果我們已經(jīng)明確了用戶群咬扇、用戶對(duì)產(chǎn)品的意見(jiàn)、產(chǎn)品自身的定位以及初步想實(shí)現(xiàn)的目標(biāo)乃至基本的線框圖和功能列表廊勃，那么我們就對(duì)產(chǎn)品的用戶群以及客戶的理念有了初步的認(rèn)識(shí)懈贺。

我喜歡用情緒板開(kāi)始我的設(shè)計(jì)。情緒板可以幫助我省時(shí)省力地繪制出品牌形象坡垫。我通常去Pinterest梭灿、Dribble尋找適合客戶的視覺(jué)素材。

情緒板

在這里我挑選出可以讓我快速布局并且復(fù)制到UI的框架葛虐。如果是市場(chǎng)營(yíng)銷或者面向消費(fèi)者的網(wǎng)站胎源，我傾向于使用Foundation，因?yàn)镕oundation里所有的選項(xiàng)都直接體現(xiàn)代碼中屿脐。在我看來(lái)涕蚤，F(xiàn)oundation比Bootstrap更為基礎(chǔ)也更容易被覆蓋。Bootstrap是一個(gè)發(fā)展成熟的框架的诵，是以管理人員為用戶的應(yīng)用的理想選擇万栅。用Bootstrap上手很容易，但當(dāng)你需要覆蓋原有的CSS時(shí)將會(huì)十分痛苦西疤。

接下來(lái)是設(shè)計(jì)指南烦粒。在設(shè)計(jì)之初準(zhǔn)備好一份（或一系列）設(shè)計(jì)指南對(duì)于統(tǒng)一并簡(jiǎn)化所有的設(shè)計(jì)元素是非常重要的。由于前人已詳細(xì)的闡述了設(shè)計(jì)指南的重要性代赁，我并不會(huì)再加以贅述扰她。不過(guò)我想說(shuō)的是，一份設(shè)計(jì)指南可以使未來(lái)大幅改動(dòng)設(shè)計(jì)稿的過(guò)程變得極為簡(jiǎn)單芭碍，這也是我們一開(kāi)始就應(yīng)該用瀏覽器設(shè)計(jì)的原因之一徒役。我習(xí)慣根據(jù)需要手動(dòng)創(chuàng)建UI元素的設(shè)計(jì)指南，但是你也可以使用KSS法甚至類似于Hologram的軟件來(lái)幫助你自動(dòng)生成設(shè)計(jì)指南窖壕。

設(shè)計(jì)指南

最后忧勿，讓我們來(lái)談?wù)剺?gòu)圖杉女。我總是提醒自己不要忘記那些設(shè)計(jì)原則，比如眼球運(yùn)動(dòng)鸳吸、層級(jí)結(jié)構(gòu)和對(duì)比熏挎。在設(shè)計(jì)的過(guò)程中，這些很容易被人遺忘晌砾。當(dāng)我全部的設(shè)計(jì)都由Photoshop來(lái)完成時(shí)坎拐，我可以考慮更多的設(shè)計(jì)理念問(wèn)題與設(shè)計(jì)中的細(xì)節(jié)，我會(huì)測(cè)試不同的行動(dòng)按鈕贡羔、布局排版或是引人入勝的動(dòng)畫(huà)效果廉白。從這個(gè)角度來(lái)說(shuō)，用瀏覽器設(shè)計(jì)從根本上妨礙了我們跳出固有思維對(duì)設(shè)計(jì)進(jìn)行審視乖寒。對(duì)我來(lái)說(shuō)最簡(jiǎn)單的方法就是從最低層級(jí)往上疊加：先放純文本，包裹上HTML語(yǔ)言院溺，之后放入框架中布局楣嘁，再加上設(shè)計(jì)樣式標(biāo)記并在CSS中定義它們。

構(gòu)圖原則

使用瀏覽器工具

現(xiàn)在你已經(jīng)在瀏覽器中創(chuàng)建了你第一代網(wǎng)站的原型珍逸，是時(shí)候和客戶一起檢查它了逐虚。接下來(lái)就是奇跡發(fā)生的時(shí)刻：你將在一次會(huì)議中解決絕大部分對(duì)設(shè)計(jì)的反饋，而不用進(jìn)行無(wú)數(shù)次的反復(fù)更改谆膳。

下面告訴你我是如何通過(guò)Chrome的審查元素功能實(shí)現(xiàn)這一切的：

1.客戶想要改變文本叭爱。打開(kāi)審查元素點(diǎn)擊“編輯文本”，將改變后的效果截圖漱病。

客戶想要改變文本

2. 我們想要在頁(yè)面的某一部分新增加一列买雾。打開(kāi)審查元素點(diǎn)擊“編輯HTML”，復(fù)制粘貼入新的一列杨帽，同樣將改變后的效果截圖漓穿。

我們想要在頁(yè)面的某一部分新增加一列

3. 我們想要增加表格中單選按鈕的大小。點(diǎn)擊放大鏡后右擊按鈕注盈。放大鏡可以展示母元素中的子元素屬性晃危。改變樣式代碼并截圖。

我們想要增加表格中單選按鈕的大小

4. 我們想要改變顏色老客、大小僚饭、或者任何樣式，右擊審查元素胧砰，開(kāi)始編輯鳍鸵。記得截圖，截圖朴则，再截圖权纤。

我們想要改變顏色钓简、大小、或者任何樣式

比起用Chrome自帶工具保存代碼我更傾向于截圖汹想。這是因?yàn)槭褂脤彶樵夭⒉荒艿玫阶罡蓛羝恋拇a外邓。審查元素只是一個(gè)用來(lái)測(cè)試設(shè)計(jì)決策以及展示給客戶的取巧之道。但是通過(guò)截圖可以讓你記錄下所有做過(guò)的改變古掏，在你稍后需要編輯代碼時(shí)給予你參照损话。

團(tuán)隊(duì)協(xié)作

聲明： Philosophie選擇Pivotal Tracker作為其項(xiàng)目管理工具，Ruby On Rails進(jìn)行堆棧運(yùn)算槽唾。

比起我早先提到的傳統(tǒng)自上而下的設(shè)計(jì)加工過(guò)程丧枪，用瀏覽器設(shè)計(jì)可以讓你和你的小伙伴們同時(shí)工作。第一稿可能充斥著基本的模板或者Bootstrap樣式庞萍，這遠(yuǎn)遠(yuǎn)達(dá)不到MVP設(shè)計(jì)的標(biāo)準(zhǔn)拧烦。在這一稿之上，我們可以放慢腳步進(jìn)行諸般改進(jìn)比如品牌形象钝计、字體恋博、內(nèi)容層級(jí)關(guān)系等等。你甚至可以進(jìn)入上文提到的“改良”階段并使用Photoshop進(jìn)行精細(xì)修改私恬。

我們是如何將設(shè)計(jì)流程放入PivotalTracker里的债沮？我發(fā)現(xiàn)將用戶需求分為前端任務(wù)和后段任務(wù)兩部分是最有效的管理方式。這樣你可以讓設(shè)計(jì)跑在開(kāi)發(fā)前頭本鸣，或者讓工程師先開(kāi)發(fā)模型和控制器再讓設(shè)計(jì)師進(jìn)行外觀設(shè)計(jì)疫衩，二者可以交替進(jìn)行。

舉例來(lái)說(shuō)：當(dāng)前端設(shè)計(jì)師在設(shè)計(jì)靜態(tài)頁(yè)面諸如首頁(yè)荣德、聯(lián)系表格闷煤、內(nèi)容頁(yè)的同時(shí)，后臺(tái)程序員可以生成登陸系統(tǒng)的輸入框和視圖命爬。前端設(shè)計(jì)師可以隨后介入進(jìn)行樣式的設(shè)計(jì)曹傀。

前端任務(wù)和后段任務(wù)

在實(shí)際項(xiàng)目中是如何運(yùn)作的？

我們選擇用瀏覽器設(shè)計(jì)的方法處理我們最近接的一個(gè)項(xiàng)目饲宛，因?yàn)槲覀冋J(rèn)為這可以幫助我們?cè)诘玫揭粋€(gè)干凈清新的設(shè)計(jì)同時(shí)將花費(fèi)控制在預(yù)算內(nèi)皆愉。我使用Bootstrap模板和Sublime Text代碼編輯器快速的草擬出了頁(yè)面布局，并在重要的地方進(jìn)行一些簡(jiǎn)單的改進(jìn)艇抠。此外幕庐，就像我前文描述的一樣，我與后臺(tái)開(kāi)發(fā)者同時(shí)工作家淤，在他們?cè)诤笈_(tái)工作的同時(shí)處理一些前端問(wèn)題异剥。

在項(xiàng)目中期，客戶想要探討一下新的首頁(yè)的設(shè)計(jì)方向絮重。為了不局限自己的設(shè)計(jì)冤寿，我決定使用Photoshop來(lái)展示一些精美合成的首頁(yè)迭代歹苦。這樣僅對(duì)單獨(dú)頁(yè)面反復(fù)修改就沒(méi)有那么痛苦了。

有了Photoshop里合成的新樣式以及設(shè)計(jì)好的UI元素督怜，我僅僅需要在一個(gè)地方修改下樣式殴瘦，整個(gè)網(wǎng)站的樣式就會(huì)變得與新的首頁(yè)一樣了。

小結(jié)

設(shè)計(jì)網(wǎng)頁(yè)的方法并沒(méi)有優(yōu)劣之分号杠。就算你經(jīng)常用瀏覽器設(shè)計(jì)也并不意味著你應(yīng)該放棄Photoshop蚪腋。

對(duì)我來(lái)說(shuō)，用瀏覽器設(shè)計(jì)最有價(jià)值的地方在于它可以減少傳統(tǒng)設(shè)計(jì)流程帶來(lái)的痛苦姨蟋，讓你在不需要犧牲自己設(shè)計(jì)原則的前提下與你的團(tuán)隊(duì)高效合作屉凯。

原文鏈接：https://medium.com/philosophie-is-thinking/the-when-why-and-how-of-designing-in-browser-3c7fa2ebcb94

原文作者：Brooke Kao

譯者：華劍侃

審校：華劍侃