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

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

所以,為什么我繼續(xù)使用草圖? 錯誤或沒有bug,它已成為最好的UI設(shè)計的工具,包括響應(yīng)網(wǎng)頁設(shè)計。

案例研究:艦隊腳運動

讓我們看一個新推出的網(wǎng)站設(shè)計,我在工作了 艦隊的腳 ,運行存儲在美國與80多家特許經(jīng)營店。 與舊網(wǎng)站,新艦隊的腳有一個電子商務(wù)在線銷售產(chǎn)品組件,和它的響應(yīng)。 與超過15模板設(shè)計為多個設(shè)備和幾輪修改,這個項目是巨大的。

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

看一下基礎(chǔ)知識

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

和素描所缺乏的,它 插件 彌補。 素描插件是類似于Photoshop和覆蓋從一個簡單的工具,互換邊境和填充顏色完成內(nèi)容生成器。 我等了幾個月開始使用自己的插件,因為我想要完全熟悉程序。 大錯誤,這些插件是巨大的省時便利,已經(jīng)成為我工作流程的組成部分。

我首先推薦下載當(dāng)從草圖開始 素描工具箱 。 這個插件管理器允許您直接瀏覽和安裝插件和跟蹤你的使用。

第二個基本要注意的是,所有你創(chuàng)建草圖是矢量。 響應(yīng)時代的設(shè)計,創(chuàng)造一個設(shè)計向量是關(guān)鍵。 設(shè)計師經(jīng)常需要考慮高清與normal-definition顯示器,窄而寬屏幕等等。 建筑設(shè)計,重新調(diào)節(jié)所有這些格式是至關(guān)重要的,然而,創(chuàng)建一個單獨的模型為每個大小是乏味而耗時的。 草圖的能力自由調(diào)整對象節(jié)省時間和精力。

使素描有別于其他基于矢量的計劃,這也是pixel-aware。 你畫的形狀總是提前到最近的像素,這意味著你不再需要擔(dān)心half-pixels或模糊的線條。 這使得程序適合屏幕設(shè)計。

開始

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

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

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

讓我們穿過艦隊英尺的一個早期版本的模板 風(fēng)格的瓷磚 (一個方便 草圖模板 已經(jīng)可以下載)。 能夠創(chuàng)建排版元素非常有用,因為您可以創(chuàng)建 文本樣式 內(nèi)聯(lián)樣式如標(biāo)題和塊報價,然后運用這些風(fēng)格在其他文檔文本。 如果你的客戶覺得他們討厭 H1以后的字體在設(shè)計過程中,你所要做的就是更新風(fēng)格的一個實例,它將更新您的項目文件中的每個實例。 這個應(yīng)用程序也使用本地文本渲染文本(反鋸齒),以便在瀏覽器中看起來如何在設(shè)計文件,不再想知道你選擇的輕量級版本的字體標(biāo)題將可讀的屏幕。

顏色管理 也簡化了素描。 創(chuàng)建moodboard調(diào)色板,和最常見的顏色將會拿出最重要的色板快速使用后在設(shè)計過程。 除了常見的顏色,3.1更新允許您向文檔添加自定義顏色色板(根據(jù)3.3的beta指出,自定義調(diào)色板很快)。

最后,就像你可以滾動你的每一個文件在一個文檔,你也可以復(fù)制和粘貼對象和對象類型(如梯度和顏色填充)從一個文件到另一個地方。 這個特性在Photoshop是不可能的,但它是非常有用的。 能夠復(fù)制和粘貼元素從moodboard你的第一個模型,甚至從一個模型到下一個對象,是偉大的。

設(shè)計主頁

現(xiàn)在您已經(jīng)了解了如何創(chuàng)建文檔中一些基本的風(fēng)格,讓我們看看如何創(chuàng)建我的一些元素在主頁上。

我最喜歡的特性之一草圖是內(nèi)置的網(wǎng)格布局。 在Photoshop中,我不得不依賴插件,一系列的指導(dǎo)方針或單獨的層有一個臨時的網(wǎng)格,不會很容易編輯。 在素描中,您可以很容易地切換一個透明的布局指導(dǎo),并迅速改變列和地溝大小。 編輯網(wǎng)格布局,去“視圖”→“布局設(shè)置。 “我已經(jīng)創(chuàng)建了一個默認(rèn)的1080像素,12日的一篇專欄網(wǎng)格與由水槽,我只是根據(jù)需要改變項目。 每當(dāng)我想看到網(wǎng)格或關(guān)機,我只是打擊 控制+ L。

如前所述,任何可能在素描的CSS是可能的。 創(chuàng)建圓角操作按鈕上點擊側(cè)邊欄的對象和調(diào)整半徑。 漸變疊加在圖像只有一個點擊添加,不要只依賴的顏色色板,并呈現(xiàn)忠實瀏覽器將顯示。

CSS3工具是漂亮的,其他幾個設(shè)計程序有這些工具。 草圖則更進一步,使設(shè)計師能夠準(zhǔn)確復(fù)制這些元素的CSS樣式。 右鍵單擊任何對象復(fù)制的樣式,包括層的名字正如上面注釋的代碼。 這使得更設(shè)計和開發(fā)之間的無縫體驗。

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

查看博客文章感覺腳的底部的主頁。 因為只有三個,修改都不會是一個巨大的交易,但它仍將是乏味的。 使用符號,我們可以在圖像的大小,文本和顏色三個同時,讓生活更容易一些。 符號甚至模板之間的工作,所以如果我們決定使用清單博客頁面上的相同的布局,所有我們要做的就是復(fù)制符號的一個實例,和他們之間的變化同步。 當(dāng)你準(zhǔn)備添加的內(nèi)容,就像一個圖像或一個標(biāo)題,你所要做的就是右鍵單擊并分離對象從原來的象征。

雖然我使用符號博客文章和產(chǎn)品清單,我喜歡使用 動態(tài)按鈕 插件頁面上的按鈕。 插件按鈕實際上創(chuàng)建了一個符號,但是 自動調(diào)整填充 在雙方根據(jù)文本的長度。 這是一個很好的節(jié)省時間與頁面有幾個按鈕,這樣的主頁。 簡單地創(chuàng)建一個文本與初始按鈕文字層,選擇插件,編輯層的名字反映了填充你的按鈕的背景(例如 10:20:10:20), 命令+ J和哈! 你現(xiàn)在已經(jīng)有了一個動態(tài)按鈕,您可以重復(fù)持續(xù)整個設(shè)計只是通過編輯按鈕的文本。

創(chuàng)建一個產(chǎn)品和團隊清單頁面

我觸碰短暫如何有用的符號可以在主頁上,但與大量的重復(fù)內(nèi)容頁面,產(chǎn)品和團隊清單頁面嗎? 在使用一個符號來創(chuàng)建一個個人項目清單會很有幫助,內(nèi)容最終將需要被添加到所有這些對象為了看現(xiàn)實的客戶端。

添加內(nèi)容到20 +的物品在一個模型將是一個巨大的痛苦。 另外,客戶很少設(shè)計批準(zhǔn)之前準(zhǔn)備好內(nèi)容。 值得慶幸的是,草圖有幾個插件自動生成內(nèi)容的設(shè)計。

類似產(chǎn)品清單頁面,我們不想花大量的時間尋找鞋白色背景的圖片之前第一輪修改;相反,我們只需要一個圖像占位符。 的 天的球員 插件是一個巨大的資源,填寫各圖像占位符服務(wù)。 我喜歡Placehold.it 因為這是我工作的開發(fā)人員使用,和我使用 Lorem像素 特定的圖像。 選擇插件和服務(wù)你想使用的圖片,編輯選項為您的占位符,比如尺寸和顏色,并插入它在產(chǎn)品對象組。 這是容易得多比谷歌上搜索圖片作為占位符!

為樣機,需要更多填充內(nèi)容,我喜歡 內(nèi)容生成器 插件。 團隊清單頁面,例如,需要一個男性或女性形象,一個名字,一個標(biāo)題和一些聯(lián)系信息。 使用插件,所有我要做的就是選擇圖像占位符框為每個團隊成員,去插件選項和選擇一個男性和女性的化身。 填寫姓名、電子郵件地址和電話號碼也同樣簡單。

素描的特點不僅僅是用于模擬與重復(fù)的內(nèi)容,但是對于標(biāo)準(zhǔn)的web頁面。 我們說我們需要添加一些文本團隊頁面的底部,在那里有一些文本解釋職業(yè)艦隊的腳。 占位符文本,我們可以再次使用方便 內(nèi)容生成器 插件填寫lorem ipsum文本,完全消除了需要找到一個在線服務(wù)來生成同樣的事情。 另外,你注意到文本的要點嗎? 素描的另一個很棒的特性是內(nèi)置的一代的編號和項目符號列表——這一特性一直是缺乏其他設(shè)計項目(包括全能者Photoshop和屏幕設(shè)計型煙花)和辛苦乏味的實現(xiàn)。 能夠格式文本如何會出現(xiàn)在瀏覽器中是偉大的,和素描可以幫助您做到!

手機和平板模型設(shè)計

我提到了如何創(chuàng)建幾個元素為一個標(biāo)準(zhǔn)的web頁面。 現(xiàn)在,讓我們進入響應(yīng)細(xì)節(jié)素描為何如此偉大的網(wǎng)頁設(shè)計。

素描的我最喜歡的一個特性是支持多種artboards畫布。 Photoshop迫使你創(chuàng)建多個PSD文件,然后在窗口之間切換各種原型。 這個過程是一個麻煩,我只會造成手機和平板模型的大項目。

在素描中,您可以看到桌面,平板電腦和移動模型 在一個視圖 同時,允許你的工作模型。 艦隊的腳,尤其是多個artboards被證明是特別有用,因為大量的模板。 在編輯符號、文本風(fēng)格和顏色,我可以看到的變化是如何影響所有的模型。 看到這也有助于設(shè)計師保持意識的內(nèi)容從桌面到移動流和交互。

在草圖創(chuàng)建這些多個artboards也容易。 簡單的新聞 一個創(chuàng)建一個artboard和草圖將提供一個列表顯示28常見的屏幕和圖標(biāo)大小可供選擇,包括“視網(wǎng)膜”大小。 這是響應(yīng)設(shè)計中特別有用,因為你不需要擔(dān)心得到正確的尺寸在創(chuàng)建模型。

素描的另一個整潔的特性是您可以預(yù)覽設(shè)計在設(shè)備上他們是認(rèn)為。 雖然不是技術(shù)上一個內(nèi)置的特性, 素描的鏡子 應(yīng)用同步開放文檔,讓你看看你的設(shè)計會在iPhone或者iPad和即時預(yù)覽更改。 這個程序已經(jīng)被證明是適合做最后的調(diào)整和向客戶展示設(shè)計。

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

移動開發(fā)

一旦艦隊腳設(shè)計已經(jīng)準(zhǔn)備好開發(fā),是時候出口的資產(chǎn)。 當(dāng)我第一次開始使用素描,我曾工作過的所有的開發(fā)人員,有這個應(yīng)用程序,我不會強迫他們購買東西我只是測試。 因此,它是我項目的所有資產(chǎn)。

值得慶幸的是,素描使出口超寬松的所有文件。 把我們使用的圖標(biāo)移動導(dǎo)航,例如。 只需單擊組圖層,然后點擊“導(dǎo)出”按鈕在右下角,我可以保存圖標(biāo)在SVG web或PNG格式或PNG @2x視網(wǎng)膜顯示。 這涵蓋了所有的各種設(shè)備上顯示資產(chǎn)的基礎(chǔ)。

所以,我圖形資產(chǎn)交付給開發(fā)人員,但不知道如何將他們所有的顏色,字體和字體大小? 使這個簡單的草圖。 使用 素描風(fēng)格庫存 插件,您可以創(chuàng)建一個點擊所有的庫存顏色的色板和十六進制代碼在頁面上使用。 字體以同樣的方式工作。 我喜歡使用插件創(chuàng)建一個文本風(fēng)格庫存作為開發(fā)人員的參考指南。 還記得我提到的,您可以復(fù)制任何元素的CSS樣式文件嗎? 讓這些文本樣式可用的形式對于開發(fā)人員來說,你所要做的是選擇所有圖層的類型庫存,將CSS樣式和粘貼復(fù)制成一個樣式表。 使用草圖,可以讓開發(fā)人員的所有資產(chǎn)和風(fēng)格,他們需要開始沒有他們曾經(jīng)觸摸應(yīng)用程序!

缺失的是什么?

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

素描的另一個缺點是它的插件。 雖然我已經(jīng)沉迷于他們中的許多人在這篇文章中,我希望這些特性是直接內(nèi)置草圖。 因為這些插件是由第三方,一個簡單的草圖或更新插件本身能使人癱瘓。 這意味著你永遠無法完全依靠他們在您的工作流。

最后,這個程序仍然局限于Mac OS X用戶。 這不僅排除設(shè)計師使用Windows,但它很可能,你可以分享一個本地文件與一名開發(fā)人員,項目經(jīng)理或客戶。

結(jié)論

雖然它仍然絕對是一項正在進行中的工作,素描繼續(xù)是我大網(wǎng)絡(luò)設(shè)計方案。 它的web工具和界面優(yōu)化設(shè)計。 半成品artboard模板、符號和簡單的導(dǎo)出功能已經(jīng)大大加快我的工作流程,使設(shè)計過程更加容易。 草圖也提高了我的整個工作流程,從moodboards到開發(fā)的早期階段,使其快速響應(yīng)設(shè)計的好工具。

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

網(wǎng)站欄目：草圖在響應(yīng)網(wǎng)頁設(shè)計的運用(案例研究)
瀏覽路徑：http://www.rwnh.cn/news/80429.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站制作、搜索引擎優(yōu)化、響應(yīng)式網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站策劃

廣告

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