這也是常常困擾我自己的問(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)域很火的話(huà)題:在瀏覽器中設(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ì)的目的是為了給用戶(hù)解決問(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)該被淘汰諸如此類(lèi)。我承認(rèn)用瀏覽器設(shè)計(jì)可以成為你進(jìn)行項(xiàng)目設(shè)計(jì)時(shí)的第一選擇，但有些情況下你并不可以這樣做——比如客戶(hù)有特殊要求，或者最終交付產(chǎn)品的屬性并不合適，又或者有時(shí)間限制等等。

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

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

許多客戶(hù)將視覺(jué)效果圖視為成果。有時(shí)候每周給客戶(hù)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)。作為人類(lèi)，我們大部分人的大腦無(wú)法支持我們?cè)趦蓚€(gè)維度同時(shí)思考。盡管有人會(huì)說(shuō)設(shè)計(jì)與代碼是密不可分的，但對(duì)我來(lái)說(shuō)在想象一個(gè)有許多變化的復(fù)雜布局的同時(shí)為這個(gè)布局寫(xiě)下相應(yīng)代碼是一件非常困難的事。研究表明人類(lèi)并不擅長(zhǎng)多線(xiàn)工作，用瀏覽器設(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)站，你要做的只是為其增加更多的功能。如果用戶(hù)已經(jīng)表達(dá)過(guò)對(duì)瀏覽器中特定設(shè)計(jì)的不滿(mǎn)，比如行動(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)明確了用戶(hù)群、用戶(hù)對(duì)產(chǎn)品的意見(jiàn)、產(chǎn)品自身的定位以及初步想實(shí)現(xiàn)的目標(biāo)乃至基本的線(xiàn)框圖和功能列表，那么我們就對(duì)產(chǎn)品的用戶(hù)群以及客戶(hù)的理念有了初步的認(rèn)識(shí)。

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

情緒板

在這里我挑選出可以讓我快速布局并且復(fù)制到UI的框架。如果是市場(chǎng)營(yíng)銷(xiāo)或者面向消費(fèi)者的網(wǎng)站，我傾向于使用Foundation，因?yàn)镕oundation里所有的選項(xiàng)都直接體現(xiàn)代碼中。在我看來(lái)，F(xiàn)oundation比Bootstrap更為基礎(chǔ)也更容易被覆蓋。Bootstrap是一個(gè)發(fā)展成熟的框架，是以管理人員為用戶(hù)的應(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法甚至類(lèi)似于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í)候和客戶(hù)一起檢查它了。接下來(lái)就是奇跡發(fā)生的時(shí)刻：你將在一次會(huì)議中解決絕大部分對(duì)設(shè)計(jì)的反饋，而不用進(jìn)行無(wú)數(shù)次的反復(fù)更改。

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

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

客戶(hù)想要改變文本

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ì)決策以及展示給客戶(hù)的取巧之道。但是通過(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)將用戶(hù)需求分為前端任務(wù)和后段任務(wù)兩部分是最有效的管理方式。這樣你可以讓設(shè)計(jì)跑在開(kāi)發(fā)前頭，或者讓工程師先開(kāi)發(fā)模型和控制器再讓設(shè)計(jì)師進(jìn)行外觀(guā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)目中期，客戶(hù)想要探討一下新的首頁(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

譯者：華劍侃

審校：華劍侃