如果你是一個(gè)網(wǎng)站建設(shè)設(shè)計(jì)師,?在過(guò)去的一年你難以避免談?wù)撍孛琛?推出這個(gè)設(shè)計(jì)應(yīng)用人事行業(yè)由Adobe二十多年,它引起了一場(chǎng)爭(zhēng)論是否素描比Photoshop和Illustrator(好?煙花?)。
長(zhǎng)期Photoshop用戶自己,我切換到素描在2014年初,沒(méi)有回頭。 我愛(ài)程序的某些特性,如簡(jiǎn)單的接口,文件自動(dòng)保存和無(wú)限的畫布。 然而,很多其他程序也有類似的功能,直到最近的更新(3.2草圖),用戶與應(yīng)用大量的bug。
所以,為什么我繼續(xù)使用草圖? 錯(cuò)誤或沒(méi)有bug,它已成為最好的UI設(shè)計(jì)的工具,包括響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)。
案例研究:艦隊(duì)腳運(yùn)動(dòng)
讓我們看一個(gè)新推出的網(wǎng)站設(shè)計(jì),我在工作了?艦隊(duì)的腳?,運(yùn)行存儲(chǔ)在美國(guó)與80多家特許經(jīng)營(yíng)店。 與舊網(wǎng)站,新艦隊(duì)的腳有一個(gè)電子商務(wù)在線銷售產(chǎn)品組件,和它的響應(yīng)。 與超過(guò)15模板設(shè)計(jì)為多個(gè)設(shè)備和幾輪修改,這個(gè)項(xiàng)目是巨大的。
在Photoshop中,堅(jiān)持組織中所有的文檔和輪修正將是艱巨的和耗時(shí)。 然而,素描的工具,我能通過(guò)這個(gè)項(xiàng)目從開(kāi)始到結(jié)束工作更順利,輕松快速地比我使用另一個(gè)程序可以做。 讓我們看看如何創(chuàng)建一個(gè)網(wǎng)站草圖設(shè)計(jì)大大提高了響應(yīng)過(guò)程。
看一下基礎(chǔ)知識(shí)
激發(fā)草圖,您將立即通知一個(gè)干凈、unbloated接口。 是的,素描工具集肯定是比一些其他設(shè)計(jì)項(xiàng)目減少。 然而,它只包括可以重新創(chuàng)建HTML和CSS3。 所以,沒(méi)有不必要的照片濾鏡,3 d工具或其他工具,就能慢下來(lái)。 應(yīng)用程序只提供了必要做網(wǎng)絡(luò)和用戶界面的工作,使設(shè)計(jì)過(guò)程快得多。
和素描所缺乏的,它?插件?彌補(bǔ)。 素描插件是類似于Photoshop和覆蓋從一個(gè)簡(jiǎn)單的工具,互換邊境和填充顏色完成內(nèi)容生成器。 我等了幾個(gè)月開(kāi)始使用自己的插件,因?yàn)槲蚁胍耆煜こ绦颉?大錯(cuò)誤,這些插件是巨大的省時(shí)便利,已經(jīng)成為我工作流程的組成部分。
我首先推薦下載當(dāng)從草圖開(kāi)始?素描工具箱?。 這個(gè)插件管理器允許您直接瀏覽和安裝插件和跟蹤你的使用。
素描工具箱。 (?查看大版本?)
第二個(gè)基本要注意的是,所有你創(chuàng)建草圖是矢量。 響應(yīng)時(shí)代的設(shè)計(jì),創(chuàng)造一個(gè)設(shè)計(jì)向量是關(guān)鍵。 設(shè)計(jì)師經(jīng)常需要考慮高清與normal-definition顯示器,窄而寬屏幕等等。 建筑設(shè)計(jì),重新調(diào)節(jié)所有這些格式是至關(guān)重要的,然而,創(chuàng)建一個(gè)單獨(dú)的模型為每個(gè)大小是乏味而耗時(shí)的。 草圖的能力自由調(diào)整對(duì)象節(jié)省時(shí)間和精力。
使素描有別于其他基于矢量的計(jì)劃,這也是pixel-aware。 你畫的形狀總是提前到最近的像素,這意味著你不再需要擔(dān)心half-pixels或模糊的線條。 這使得程序適合屏幕設(shè)計(jì)。
開(kāi)始
現(xiàn)在,讓我們走進(jìn)我如何使用草圖設(shè)計(jì)艦隊(duì)腳的新網(wǎng)站。 響應(yīng)時(shí)代的設(shè)計(jì),能夠直接跳轉(zhuǎn)到設(shè)計(jì)一個(gè)模型是相當(dāng)罕見(jiàn)的。
因?yàn)榕炾?duì)的腳將網(wǎng)站添加新組件,首先是內(nèi)容策略。 我坐在在早期幾次會(huì)議討論如何制定新的網(wǎng)站。 我喜歡用一個(gè)方便的素描插件?AEFlowchart?為網(wǎng)站創(chuàng)建站點(diǎn)樹(shù)我在工作。 尤其是艦隊(duì)的腳,這是有用的跟蹤網(wǎng)站的新組織和我能與我的團(tuán)隊(duì)。 這是這樣一個(gè)有用的參考援助在設(shè)計(jì)過(guò)程中,我不會(huì)花時(shí)間創(chuàng)建它在另一個(gè)程序,因?yàn)樗馁M(fèi)時(shí)間。
AEFlowchart插件。 (?查看大版本?)
草圖也使得moodboards簡(jiǎn)單創(chuàng)建和一個(gè)更好的項(xiàng)目資源。 首先,注意你的所有文件?生活在一個(gè)文檔?。 草圖包含一個(gè)頁(yè)面的抽屜artboard側(cè)邊欄,允許您快速滾動(dòng)文件之間。 對(duì)于這樣的大型項(xiàng)目來(lái)說(shuō),這是特別高興能夠很快網(wǎng)站樹(shù)之間來(lái)回跳,moodboard和樣機(jī)我設(shè)計(jì)或更改。
讓我們穿過(guò)艦隊(duì)英尺的一個(gè)早期版本的模板?風(fēng)格的瓷磚?(一個(gè)方便?草圖模板?已經(jīng)可以下載)。 能夠創(chuàng)建排版元素非常有用,因?yàn)槟梢詣?chuàng)建?文本樣式?內(nèi)聯(lián)樣式如標(biāo)題和塊報(bào)價(jià),然后運(yùn)用這些風(fēng)格在其他文檔文本。 如果你的客戶覺(jué)得他們討厭?H1以后的字體在設(shè)計(jì)過(guò)程中,你所要做的就是更新風(fēng)格的一個(gè)實(shí)例,它將更新您的項(xiàng)目文件中的每個(gè)實(shí)例。 這個(gè)應(yīng)用程序也使用本地文本渲染文本(反鋸齒),以便在瀏覽器中看起來(lái)如何在設(shè)計(jì)文件,不再想知道你選擇的輕量級(jí)版本的字體標(biāo)題將可讀的屏幕。
文本樣式草圖程序。?查看大版本?)
顏色管理?也簡(jiǎn)化了素描。 創(chuàng)建moodboard調(diào)色板,和最常見(jiàn)的顏色將會(huì)拿出最重要的色板快速使用后在設(shè)計(jì)過(guò)程。 除了常見(jiàn)的顏色,3.1更新允許您向文檔添加自定義顏色色板(根據(jù)3.3的beta指出,自定義調(diào)色板很快)。
最后,就像你可以滾動(dòng)你的每一個(gè)文件在一個(gè)文檔,你也可以復(fù)制和粘貼對(duì)象和對(duì)象類型(如梯度和顏色填充)從一個(gè)文件到另一個(gè)地方。 這個(gè)特性在Photoshop是不可能的,但它是非常有用的。 能夠復(fù)制和粘貼元素從moodboard你的第一個(gè)模型,甚至從一個(gè)模型到下一個(gè)對(duì)象,是偉大的。
設(shè)計(jì)主頁(yè)
現(xiàn)在您已經(jīng)了解了如何創(chuàng)建文檔中一些基本的風(fēng)格,讓我們看看如何創(chuàng)建我的一些元素在主頁(yè)上。
艦隊(duì)的腳的主頁(yè)。 (?查看大版本?)
我最喜歡的特性之一草圖是內(nèi)置的網(wǎng)格布局。 在Photoshop中,我不得不依賴插件,一系列的指導(dǎo)方針或單獨(dú)的層有一個(gè)臨時(shí)的網(wǎng)格,不會(huì)很容易編輯。 在素描中,您可以很容易地切換一個(gè)透明的布局指導(dǎo),并迅速改變列和地溝大小。 編輯網(wǎng)格布局,去“視圖”→“布局設(shè)置。 “我已經(jīng)創(chuàng)建了一個(gè)默認(rèn)的1080像素,12日的一篇專欄網(wǎng)格與由水槽,我只是根據(jù)需要改變項(xiàng)目。 每當(dāng)我想看到網(wǎng)格或關(guān)機(jī),我只是打擊?控制+ L。
使用網(wǎng)格示意圖:簡(jiǎn)單! (?查看大版本?)
如前所述,任何可能在素描的CSS是可能的。 創(chuàng)建圓角操作按鈕上點(diǎn)擊側(cè)邊欄的對(duì)象和調(diào)整半徑。 漸變疊加在圖像只有一個(gè)點(diǎn)擊添加,不要只依賴的顏色色板,并呈現(xiàn)忠實(shí)瀏覽器將顯示。
CSS3工具是漂亮的,其他幾個(gè)設(shè)計(jì)程序有這些工具。 草圖則更進(jìn)一步,使設(shè)計(jì)師能夠準(zhǔn)確復(fù)制這些元素的CSS樣式。 右鍵單擊任何對(duì)象復(fù)制的樣式,包括層的名字正如上面注釋的代碼。 這使得更設(shè)計(jì)和開(kāi)發(fā)之間的無(wú)縫體驗(yàn)。
除了創(chuàng)建和復(fù)制的CSS樣式,設(shè)計(jì)復(fù)制的內(nèi)容是一件容易的事。 素描允許你將一組對(duì)象轉(zhuǎn)變?yōu)橐粋€(gè)?象征?可以復(fù)制和重復(fù),任何更改該對(duì)象會(huì)自動(dòng)同步到所有實(shí)例!
查看博客文章感覺(jué)腳的底部的主頁(yè)。 因?yàn)橹挥腥齻€(gè),修改都不會(huì)是一個(gè)巨大的交易,但它仍將是乏味的。 使用符號(hào),我們可以在圖像的大小,文本和顏色三個(gè)同時(shí),讓生活更容易一些。 符號(hào)甚至模板之間的工作,所以如果我們決定使用清單博客頁(yè)面上的相同的布局,所有我們要做的就是復(fù)制符號(hào)的一個(gè)實(shí)例,和他們之間的變化同步。 當(dāng)你準(zhǔn)備添加的內(nèi)容,就像一個(gè)圖像或一個(gè)標(biāo)題,你所要做的就是右鍵單擊并分離對(duì)象從原來(lái)的象征。
符號(hào)可以簡(jiǎn)化工作流程,節(jié)省你的時(shí)間。 (?查看大版本?)
雖然我使用符號(hào)博客文章和產(chǎn)品清單,我喜歡使用?動(dòng)態(tài)按鈕?插件頁(yè)面上的按鈕。 插件按鈕實(shí)際上創(chuàng)建了一個(gè)符號(hào),但是?自動(dòng)調(diào)整填充?在雙方根據(jù)文本的長(zhǎng)度。 這是一個(gè)很好的節(jié)省時(shí)間與頁(yè)面有幾個(gè)按鈕,這樣的主頁(yè)。 簡(jiǎn)單地創(chuàng)建一個(gè)文本與初始按鈕文字層,選擇插件,編輯層的名字反映了填充你的按鈕的背景(例如?10:20:10:20),?命令+ J和哈! 你現(xiàn)在已經(jīng)有了一個(gè)動(dòng)態(tài)按鈕,您可以重復(fù)持續(xù)整個(gè)設(shè)計(jì)只是通過(guò)編輯按鈕的文本。
動(dòng)態(tài)速寫的按鈕。 (?查看大版本?)
創(chuàng)建一個(gè)產(chǎn)品和團(tuán)隊(duì)清單頁(yè)面
我觸碰短暫如何有用的符號(hào)可以在主頁(yè)上,但與大量的重復(fù)內(nèi)容頁(yè)面,產(chǎn)品和團(tuán)隊(duì)清單頁(yè)面嗎? 在使用一個(gè)符號(hào)來(lái)創(chuàng)建一個(gè)個(gè)人項(xiàng)目清單會(huì)很有幫助,內(nèi)容最終將需要被添加到所有這些對(duì)象為了看現(xiàn)實(shí)的客戶端。
添加內(nèi)容到20 +的物品在一個(gè)模型將是一個(gè)巨大的痛苦。 另外,客戶很少設(shè)計(jì)批準(zhǔn)之前準(zhǔn)備好內(nèi)容。 值得慶幸的是,草圖有幾個(gè)插件自動(dòng)生成內(nèi)容的設(shè)計(jì)。
類似產(chǎn)品清單頁(yè)面,我們不想花大量的時(shí)間尋找鞋白色背景的圖片之前第一輪修改;相反,我們只需要一個(gè)圖像占位符。 的?天的球員?插件是一個(gè)巨大的資源,填寫各圖像占位符服務(wù)。 我喜歡Placehold.it?因?yàn)檫@是我工作的開(kāi)發(fā)人員使用,和我使用?Lorem像素?特定的圖像。 選擇插件和服務(wù)你想使用的圖片,編輯選項(xiàng)為您的占位符,比如尺寸和顏色,并插入它在產(chǎn)品對(duì)象組。 這是容易得多比谷歌上搜索圖片作為占位符!
天播放器插件。 (?查看大版本?)
為樣機(jī),需要更多填充內(nèi)容,我喜歡?內(nèi)容生成器?插件。 團(tuán)隊(duì)清單頁(yè)面,例如,需要一個(gè)男性或女性形象,一個(gè)名字,一個(gè)標(biāo)題和一些聯(lián)系信息。 使用插件,所有我要做的就是選擇圖像占位符框?yàn)槊總€(gè)團(tuán)隊(duì)成員,去插件選項(xiàng)和選擇一個(gè)男性和女性的化身。 填寫姓名、電子郵件地址和電話號(hào)碼也同樣簡(jiǎn)單。
素描的特點(diǎn)不僅僅是用于模擬與重復(fù)的內(nèi)容,但是對(duì)于標(biāo)準(zhǔn)的web頁(yè)面。 我們說(shuō)我們需要添加一些文本團(tuán)隊(duì)頁(yè)面的底部,在那里有一些文本解釋職業(yè)艦隊(duì)的腳。 占位符文本,我們可以再次使用方便?內(nèi)容生成器?插件填寫lorem ipsum文本,完全消除了需要找到一個(gè)在線服務(wù)來(lái)生成同樣的事情。 另外,你注意到文本的要點(diǎn)嗎? 素描的另一個(gè)很棒的特性是內(nèi)置的一代的編號(hào)和項(xiàng)目符號(hào)列表——這一特性一直是缺乏其他設(shè)計(jì)項(xiàng)目(包括全能者Photoshop和屏幕設(shè)計(jì)型煙花)和辛苦乏味的實(shí)現(xiàn)。 能夠格式文本如何會(huì)出現(xiàn)在瀏覽器中是偉大的,和素描可以幫助您做到!
項(xiàng)目符號(hào)列表在素描嗎? 簡(jiǎn)單! (?查看大版本?)
手機(jī)和平板模型設(shè)計(jì)
我提到了如何創(chuàng)建幾個(gè)元素為一個(gè)標(biāo)準(zhǔn)的web頁(yè)面。 現(xiàn)在,讓我們進(jìn)入響應(yīng)細(xì)節(jié)素描為何如此偉大的網(wǎng)頁(yè)設(shè)計(jì)。
素描的我最喜歡的一個(gè)特性是支持多種artboards畫布。 Photoshop迫使你創(chuàng)建多個(gè)PSD文件,然后在窗口之間切換各種原型。 這個(gè)過(guò)程是一個(gè)麻煩,我只會(huì)造成手機(jī)和平板模型的大項(xiàng)目。
在素描中,您可以看到桌面,平板電腦和移動(dòng)模型?在一個(gè)視圖?同時(shí),允許你的工作模型。 艦隊(duì)的腳,尤其是多個(gè)artboards被證明是特別有用,因?yàn)榇罅康哪０濉?在編輯符號(hào)、文本風(fēng)格和顏色,我可以看到的變化是如何影響所有的模型。 看到這也有助于設(shè)計(jì)師保持意識(shí)的內(nèi)容從桌面到移動(dòng)流和交互。
多個(gè)artboads草圖讓你工作輕松桌面,平板電腦和移動(dòng)模型在同一時(shí)間。 (?查看大版本?)
在草圖創(chuàng)建這些多個(gè)artboards也容易。 簡(jiǎn)單的新聞?一個(gè)創(chuàng)建一個(gè)artboard和草圖將提供一個(gè)列表顯示28常見(jiàn)的屏幕和圖標(biāo)大小可供選擇,包括“視網(wǎng)膜”大小。 這是響應(yīng)設(shè)計(jì)中特別有用,因?yàn)槟悴恍枰獡?dān)心得到正確的尺寸在創(chuàng)建模型。
素描的另一個(gè)整潔的特性是您可以預(yù)覽設(shè)計(jì)在設(shè)備上他們是認(rèn)為。 雖然不是技術(shù)上一個(gè)內(nèi)置的特性,?素描的鏡子?應(yīng)用同步開(kāi)放文檔,讓你看看你的設(shè)計(jì)會(huì)在iPhone或者iPad和即時(shí)預(yù)覽更改。 這個(gè)程序已經(jīng)被證明是適合做最后的調(diào)整和向客戶展示設(shè)計(jì)。
在創(chuàng)建草圖中的靜態(tài)模型在不同的斷點(diǎn)可以成為一個(gè)偉大的方式來(lái)顯示客戶端或開(kāi)發(fā)人員如何應(yīng)該出現(xiàn)的東西,這并不總是最有效的(或有效)。 給更多的流體和現(xiàn)實(shí)的預(yù)覽如何響應(yīng)設(shè)計(jì)實(shí)際上會(huì)通過(guò)交互式原型正在迅速成為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師的必要性。 雖然素描沒(méi)有內(nèi)置的原型特征,值得慶幸的是其他程序集成素描的工作流模型。 著名的交互式原型應(yīng)用程序等?InVision?,?UXPin和?奇跡?現(xiàn)在可以直接使用草圖文件。 甚至原型插件看起來(lái)也在上升。?素描籌劃者?使用FramerJS?幫助您創(chuàng)建交互式原型直接從畫布,和目前工作草圖的最新測(cè)試版(3.3)。
移動(dòng)開(kāi)發(fā)
一旦艦隊(duì)腳設(shè)計(jì)已經(jīng)準(zhǔn)備好開(kāi)發(fā),是時(shí)候出口的資產(chǎn)。 當(dāng)我第一次開(kāi)始使用素描,我曾工作過(guò)的所有的開(kāi)發(fā)人員,有這個(gè)應(yīng)用程序,我不會(huì)強(qiáng)迫他們購(gòu)買東西我只是測(cè)試。 因此,它是我項(xiàng)目的所有資產(chǎn)。
值得慶幸的是,素描使出口超寬松的所有文件。 把我們使用的圖標(biāo)移動(dòng)導(dǎo)航,例如。 只需單擊組圖層,然后點(diǎn)擊“導(dǎo)出”按鈕在右下角,我可以保存圖標(biāo)在SVG web或PNG格式或PNG @2x視網(wǎng)膜顯示。 這涵蓋了所有的各種設(shè)備上顯示資產(chǎn)的基礎(chǔ)。
出口在素描的資產(chǎn)。 (?查看大版本?)
所以,我圖形資產(chǎn)交付給開(kāi)發(fā)人員,但不知道如何將他們所有的顏色,字體和字體大小? 使這個(gè)簡(jiǎn)單的草圖。 使用?素描風(fēng)格庫(kù)存?插件,您可以創(chuàng)建一個(gè)點(diǎn)擊所有的庫(kù)存顏色的色板和十六進(jìn)制代碼在頁(yè)面上使用。 字體以同樣的方式工作。 我喜歡使用插件創(chuàng)建一個(gè)文本風(fēng)格庫(kù)存作為開(kāi)發(fā)人員的參考指南。 還記得我提到的,您可以復(fù)制任何元素的CSS樣式文件嗎? 讓這些文本樣式可用的形式對(duì)于開(kāi)發(fā)人員來(lái)說(shuō),你所要做的是選擇所有圖層的類型庫(kù)存,將CSS樣式和粘貼復(fù)制成一個(gè)樣式表。 使用草圖,可以讓開(kāi)發(fā)人員的所有資產(chǎn)和風(fēng)格,他們需要開(kāi)始沒(méi)有他們?cè)?jīng)觸摸應(yīng)用程序!
缺失的是什么?
在本文中我說(shuō)了很多關(guān)于偉大的素描一直為我設(shè)計(jì)的工作流,但缺點(diǎn)呢? 應(yīng)用程序仍然不能?只有設(shè)計(jì)方案在你的工具箱。 bitmap-editing工具素描還有很多不足之處,也不為我工作的大部分時(shí)間,使得我在Photoshop作物或刪除普通背景。 雖然密集的插圖工作可以通過(guò)素描,它經(jīng)常減慢了應(yīng)用程序。
素描的另一個(gè)缺點(diǎn)是它的插件。 雖然我已經(jīng)沉迷于他們中的許多人在這篇文章中,我希望這些特性是直接內(nèi)置草圖。 因?yàn)檫@些插件是由第三方,一個(gè)簡(jiǎn)單的草圖或更新插件本身能使人癱瘓。 這意味著你永遠(yuǎn)無(wú)法完全依靠他們?cè)谀墓ぷ髁鳌?/p>
最后,這個(gè)程序仍然局限于Mac OS X用戶。 這不僅排除設(shè)計(jì)師使用Windows,但它很可能,你可以分享一個(gè)本地文件與一名開(kāi)發(fā)人員,項(xiàng)目經(jīng)理或客戶。
結(jié)論
雖然它仍然絕對(duì)是一項(xiàng)正在進(jìn)行中的工作,素描繼續(xù)是我最大網(wǎng)絡(luò)設(shè)計(jì)方案。 它的web工具和界面優(yōu)化設(shè)計(jì)。 半成品artboard模板、符號(hào)和簡(jiǎn)單的導(dǎo)出功能已經(jīng)大大加快我的工作流程,使設(shè)計(jì)過(guò)程更加容易。 草圖也提高了我的整個(gè)工作流程,從moodboards到開(kāi)發(fā)的早期階段,使其快速響應(yīng)設(shè)計(jì)的最佳工具。
文章整理來(lái)自網(wǎng)絡(luò)，轉(zhuǎn)載請(qǐng)注明北京網(wǎng)站建設(shè)公司-北京傳誠(chéng)信，翻譯不好，請(qǐng)見(jiàn)諒！
