草圖在響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的運(yùn)用(案例研究)

如果你是一個(gè)網(wǎng)站建設(shè)設(shè)計(jì)師, 在過去的一年你難以避免談?wù)撍孛琛?推出這個(gè)設(shè)計(jì)應(yīng)用人事行業(yè)由Adobe二十多年,它引起了一場(chǎng)爭(zhēng)論是否素描比Photoshop和Illustrator(好 煙花 )。

長(zhǎng)期Photoshop用戶自己,我切換到素描在2014年初,沒有回頭。 我愛程序的某些特性,如簡(jiǎn)單的接口,文件自動(dòng)保存和無限的畫布。 然而,很多其他程序也有類似的功能,直到最近的更新(3.2草圖),用戶與應(yīng)用大量的bug。

所以,為什么我繼續(xù)使用草圖? 錯(cuò)誤或沒有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)。 與超過15模板設(shè)計(jì)為多個(gè)設(shè)備和幾輪修改,這個(gè)項(xiàng)目是巨大的。

在Photoshop中,堅(jiān)持組織中所有的文檔和輪修正將是艱巨的和耗時(shí)。 然而,素描的工具,我能通過這個(gè)項(xiàng)目從開始到結(jié)束工作更順利,輕松快速地比我使用另一個(gè)程序可以做。 讓我們看看如何創(chuàng)建一個(gè)網(wǎng)站草圖設(shè)計(jì)大大提高了響應(yīng)過程。

看一下基礎(chǔ)知識(shí)

激發(fā)草圖,您將立即通知一個(gè)干凈、unbloated接口。 是的,素描工具集肯定是比一些其他設(shè)計(jì)項(xiàng)目減少。 然而,它只包括可以重新創(chuàng)建HTML和CSS3。 所以,沒有不必要的照片濾鏡,3 d工具或其他工具,就能慢下來。 應(yīng)用程序只提供了必要做網(wǎng)絡(luò)和用戶界面的工作,使設(shè)計(jì)過程快得多。

和素描所缺乏的,它 插件 彌補(bǔ)。 素描插件是類似于Photoshop和覆蓋從一個(gè)簡(jiǎn)單的工具,互換邊境和填充顏色完成內(nèi)容生成器。 我等了幾個(gè)月開始使用自己的插件,因?yàn)槲蚁胍耆煜こ绦颉?大錯(cuò)誤,這些插件是巨大的省時(shí)便利,已經(jīng)成為我工作流程的組成部分。

我首先推薦下載當(dāng)從草圖開始 素描工具箱 。 這個(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ì)。

開始

現(xiàn)在,讓我們走進(jìn)我如何使用草圖設(shè)計(jì)艦隊(duì)腳的新網(wǎng)站。 響應(yīng)時(shí)代的設(shè)計(jì),能夠直接跳轉(zhuǎn)到設(shè)計(jì)一個(gè)模型是相當(dāng)罕見的。

因?yàn)榕炾?duì)的腳將網(wǎng)站添加新組件,首先是內(nèi)容策略。 我坐在在早期幾次會(huì)議討論如何制定新的網(wǎng)站。 我喜歡用一個(gè)方便的素描插件 AEFlowchart 為網(wǎng)站創(chuàng)建站點(diǎn)樹我在工作。 尤其是艦隊(duì)的腳,這是有用的跟蹤網(wǎng)站的新組織和我能與我的團(tuán)隊(duì)。 這是這樣一個(gè)有用的參考援助在設(shè)計(jì)過程中,我不會(huì)花時(shí)間創(chuàng)建它在另一個(gè)程序,因?yàn)樗馁M(fèi)時(shí)間。

草圖也使得moodboards簡(jiǎn)單創(chuàng)建和一個(gè)更好的項(xiàng)目資源。 首先,注意你的所有文件 生活在一個(gè)文檔 。 草圖包含一個(gè)頁(yè)面的抽屜artboard側(cè)邊欄,允許您快速滾動(dòng)文件之間。 對(duì)于這樣的大型項(xiàng)目來說,這是特別高興能夠很快網(wǎng)站樹之間來回跳,moodboard和樣機(jī)我設(shè)計(jì)或更改。

讓我們穿過艦隊(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)格在其他文檔文本。 如果你的客戶覺得他們討厭 H1以后的字體在設(shè)計(jì)過程中,你所要做的就是更新風(fēng)格的一個(gè)實(shí)例,它將更新您的項(xiàng)目文件中的每個(gè)實(shí)例。 這個(gè)應(yīng)用程序也使用本地文本渲染文本(反鋸齒),以便在瀏覽器中看起來如何在設(shè)計(jì)文件,不再想知道你選擇的輕量級(jí)版本的字體標(biāo)題將可讀的屏幕。

顏色管理 也簡(jiǎn)化了素描。 創(chuàng)建moodboard調(diào)色板,和最常見的顏色將會(huì)拿出最重要的色板快速使用后在設(shè)計(jì)過程。 除了常見的顏色,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è)上。

我最喜歡的特性之一草圖是內(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。

如前所述,任何可能在素描的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ì)和開發(fā)之間的無縫體驗(yàn)。

除了創(chuàng)建和復(fù)制的CSS樣式,設(shè)計(jì)復(fù)制的內(nèi)容是一件容易的事。 素描允許你將一組對(duì)象轉(zhuǎn)變?yōu)橐粋€(gè) 象征 可以復(fù)制和重復(fù),任何更改該對(duì)象會(huì)自動(dòng)同步到所有實(shí)例!

查看博客文章感覺腳的底部的主頁(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ì)象從原來的象征。

雖然我使用符號(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ì)只是通過編輯按鈕的文本。

創(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)來創(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)檫@是我工作的開發(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è)面。 我們說我們需要添加一些文本團(tuán)隊(duì)頁(yè)面的底部,在那里有一些文本解釋職業(yè)艦隊(duì)的腳。 占位符文本,我們可以再次使用方便 內(nèi)容生成器 插件填寫lorem ipsum文本,完全消除了需要找到一個(gè)在線服務(wù)來生成同樣的事情。 另外,你注意到文本的要點(diǎn)嗎? 素描的另一個(gè)很棒的特性是內(nèi)置的一代的編號(hào)和項(xiàng)目符號(hào)列表——這一特性一直是缺乏其他設(shè)計(jì)項(xiàng)目(包括全能者Photoshop和屏幕設(shè)計(jì)型煙花)和辛苦乏味的實(shí)現(xiàn)。 能夠格式文本如何會(huì)出現(xià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è)過程是一個(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)流和交互。

在草圖創(chuàng)建這些多個(gè)artboards也容易。 簡(jiǎn)單的新聞 一個(gè)創(chuàng)建一個(gè)artboard和草圖將提供一個(gè)列表顯示28常見的屏幕和圖標(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)用同步開放文檔,讓你看看你的設(shè)計(jì)會(huì)在iPhone或者iPad和即時(shí)預(yù)覽更改。 這個(gè)程序已經(jīng)被證明是適合做最后的調(diào)整和向客戶展示設(shè)計(jì)。

在創(chuàng)建草圖中的靜態(tài)模型在不同的斷點(diǎn)可以成為一個(gè)偉大的方式來顯示客戶端或開發(fā)人員如何應(yīng)該出現(xiàn)的東西,這并不總是最有效的(或有效)。 給更多的流體和現(xiàn)實(shí)的預(yù)覽如何響應(yīng)設(shè)計(jì)實(shí)際上會(huì)通過交互式原型正在迅速成為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師的必要性。 雖然素描沒有內(nèi)置的原型特征,值得慶幸的是其他程序集成素描的工作流模型。 著名的交互式原型應(yīng)用程序等 InVision , UXPin和 奇跡 現(xiàn)在可以直接使用草圖文件。 甚至原型插件看起來也在上升。 素描籌劃者 使用FramerJS 幫助您創(chuàng)建交互式原型直接從畫布,和目前工作草圖的最新測(cè)試版(3.3)。

移動(dòng)開發(fā)

一旦艦隊(duì)腳設(shè)計(jì)已經(jīng)準(zhǔn)備好開發(fā),是時(shí)候出口的資產(chǎn)。 當(dāng)我第一次開始使用素描,我曾工作過的所有的開發(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)交付給開發(fā)人員,但不知道如何將他們所有的顏色,字體和字體大小? 使這個(gè)簡(jiǎn)單的草圖。 使用 素描風(fēng)格庫(kù)存 插件,您可以創(chuàng)建一個(gè)點(diǎn)擊所有的庫(kù)存顏色的色板和十六進(jìn)制代碼在頁(yè)面上使用。 字體以同樣的方式工作。 我喜歡使用插件創(chuàng)建一個(gè)文本風(fēng)格庫(kù)存作為開發(fā)人員的參考指南。 還記得我提到的,您可以復(fù)制任何元素的CSS樣式文件嗎? 讓這些文本樣式可用的形式對(duì)于開發(fā)人員來說,你所要做的是選擇所有圖層的類型庫(kù)存,將CSS樣式和粘貼復(fù)制成一個(gè)樣式表。 使用草圖,可以讓開發(fā)人員的所有資產(chǎn)和風(fēng)格,他們需要開始沒有他們?cè)?jīng)觸摸應(yīng)用程序!

缺失的是什么?

在本文中我說了很多關(guān)于偉大的素描一直為我設(shè)計(jì)的工作流,但缺點(diǎn)呢? 應(yīng)用程序仍然不能 只有設(shè)計(jì)方案在你的工具箱。 bitmap-editing工具素描還有很多不足之處,也不為我工作的大部分時(shí)間,使得我在Photoshop作物或刪除普通背景。 雖然密集的插圖工作可以通過素描,它經(jīng)常減慢了應(yīng)用程序。

素描的另一個(gè)缺點(diǎn)是它的插件。 雖然我已經(jīng)沉迷于他們中的許多人在這篇文章中,我希望這些特性是直接內(nèi)置草圖。 因?yàn)檫@些插件是由第三方,一個(gè)簡(jiǎn)單的草圖或更新插件本身能使人癱瘓。 這意味著你永遠(yuǎn)無法完全依靠他們?cè)谀墓ぷ髁鳌?/p>

最后,這個(gè)程序仍然局限于Mac OS X用戶。 這不僅排除設(shè)計(jì)師使用Windows,但它很可能,你可以分享一個(gè)本地文件與一名開發(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ì)過程更加容易。 草圖也提高了我的整個(gè)工作流程,從moodboards到開發(fā)的早期階段,使其快速響應(yīng)設(shè)計(jì)的好工具。

文章整理來自網(wǎng)絡(luò)，轉(zhuǎn)載請(qǐng)注明北京網(wǎng)站建設(shè)公司-創(chuàng)新互聯(lián)，翻譯不好，請(qǐng)見諒！

新聞標(biāo)題：草圖在響應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的運(yùn)用(案例研究)
當(dāng)前URL：http://www.bm7419.com/news29/80429.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、自適應(yīng)網(wǎng)站、用戶體驗(yàn)、品牌網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)