當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

sketch web组件_在Sketch中设计受VSCO启发的Web Journal

發(fā)布時(shí)間：2023/12/20 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 sketch web组件_在Sketch中设计受VSCO启发的Web Journal 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

sketch web組件

在本教程中，我將教您如何在Sketch中為移動(dòng)設(shè)備和臺(tái)式機(jī)設(shè)計(jì)一個(gè)簡(jiǎn)單而復(fù)雜的網(wǎng)絡(luò)日記應(yīng)用程序。我們將以VSCO美學(xué)為靈感，在本教程的最后，您將了解Sketch的許多最重要的功能。

除了這些特定于應(yīng)用程序的技能之外，您還將通過(guò)模塊化比例尺對(duì)設(shè)置字體和布局有更深入的了解。我們將在Sketch中使用一些基本和中間技術(shù)。讓我們開(kāi)始吧！

教程資產(chǎn)

您需要以下資產(chǎn)才能繼續(xù)進(jìn)行：

Unsplash中的圖片（對(duì)于英雄圖片，您可以下載我最近拍攝的一張）
Google字體中的Merriweather字體
Google字體的Montserrat字體
The Noun Project中的圖標(biāo)
Facebook徽標(biāo)
Twitter徽標(biāo)
Instagram徽標(biāo)
Google Plus徽標(biāo)

快速免責(zé)聲明

在打開(kāi)Sketch并創(chuàng)建一個(gè)新文檔之前，我應(yīng)該指出，這個(gè)概念完全是理論上的。在將其轉(zhuǎn)變?yōu)檎嬲目捎卯a(chǎn)品之前，需要進(jìn)行更深入的市場(chǎng)分析。我一直熱衷于使用精美的照片進(jìn)行在線(xiàn)故事講述，因此我創(chuàng)建了這個(gè)概念，以教會(huì)您如何從設(shè)計(jì)師的角度了解網(wǎng)絡(luò)趨勢(shì)。

版式

當(dāng)我開(kāi)始一個(gè)項(xiàng)目時(shí)，我總是從排版開(kāi)始，因?yàn)槲覉?jiān)信排版是通信設(shè)計(jì)師可以使用的最重要的工具。

對(duì)于正文和較大的標(biāo)題，我選擇了Merriweather，這是一種襯線(xiàn)字體，靈感來(lái)自舊書(shū)的面Kong，非常適合講述故事和旅途。在高分辨率顯示器上，它給人以真實(shí)，印刷的日記的感覺(jué)。

另一方面，對(duì)于常見(jiàn)的UI元素（例如按鈕和標(biāo)簽），我想要一些現(xiàn)代的東西，因此我選擇了Montserrat，這是一種干凈，簡(jiǎn)單的sans-serif字體。

設(shè)置畫(huà)板

首先，我想寫(xiě)一些關(guān)于如何處理布局和版式設(shè)置的信息。 Adobe Typekit的類(lèi)型管理器Tim Brown創(chuàng)建了一個(gè)名為Modular Scale的出色工具。這個(gè)工具很棒：我們定義了理想的文字大小并建議了一個(gè)重要數(shù)字后，會(huì)將這些數(shù)字除以并乘以數(shù)學(xué)上熟悉的值，例如黃金分割率或完美的五分之一。稍后，當(dāng)我們?cè)O(shè)置印刷層次結(jié)構(gòu)和布局的基本元素時(shí)，我將始終參考這些數(shù)字。

注意：顯然，在某些情況下，我們需要打破此規(guī)則，但這將使我們?cè)诓季趾桶媸街羞_(dá)到自然的平衡，這令人賞心悅目。

我將理想的文字大小設(shè)置為18px，并將670px定義為一個(gè)重要數(shù)字，因?yàn)檫@將是我們移動(dòng)版式的實(shí)際可用寬度。

第1步

打開(kāi)草圖后，讓我們?cè)凇?插入”菜單中選擇“ 畫(huà)板（A）”選項(xiàng)。

對(duì)于我們的移動(dòng)視圖，我建議您選擇iPhone 6尺寸，但是如果您使用其他型號(hào)的iPhone，則最好選擇該尺寸。使用Sketch具有一個(gè)巨大的優(yōu)勢(shì)，它使您可以使用Sketch Mirror將工作實(shí)時(shí)鏡像到iOS設(shè)備，而無(wú)需導(dǎo)出或傳輸圖像。 Mirror是設(shè)計(jì)工作流程的重要組成部分，因?yàn)橛辛怂?#xff0c;我可以立即看到手中的工作最終結(jié)果。

要激活此功能，您將需要App Store中的Sketch Mirror應(yīng)用程序。然后在Sketch中單擊“ 鏡像”圖標(biāo)（確保您的設(shè)備位于同一網(wǎng)絡(luò)或通過(guò)USB電纜連接）。

對(duì)于桌面視圖，我選擇了1440px寬的Desktop HD畫(huà)布。

提示：以后我們可以通過(guò)更改檢查器面板上的數(shù)字來(lái)修改畫(huà)板的高度。

第2步

有了合適的畫(huà)板之后，該設(shè)置一些參考線(xiàn)了，以便我們的布局具有足夠的空間并看上去平衡。要打開(kāi)標(biāo)尺和基本指南，請(qǐng)轉(zhuǎn)到查看>顯示標(biāo)尺（? R）。然后選擇移動(dòng)畫(huà)布的中間位置，該位置將為375px，并在第一個(gè)和最后一個(gè)40px處添加一個(gè)標(biāo)記，以便它可以與水平40px的填充一起使用。

要?jiǎng)?chuàng)建準(zhǔn)則，請(qǐng)?jiān)跇?biāo)尺上單擊40px，375px和710px點(diǎn)。

在桌面視圖的情況下，我們還設(shè)置了中間參考線(xiàn)（720px）和100px填充。

創(chuàng)建頂部導(dǎo)航區(qū)域

注意：如果您想使用原始的Safari菜單欄創(chuàng)建逼真的模型，則可以創(chuàng)建屏幕截圖并粘貼到裁剪的圖像中，也可以下載由（前）Teehan創(chuàng)建的iPhone 6 GUI模板（iOS 8） +松懈的團(tuán)隊(duì)。

提示：很高興知道Sketch也具有內(nèi)置的iOS模板，您可以在“ 文件”>“從模板中新建”>“ iOS UI設(shè)計(jì)”下找到該模板。

第1步

要?jiǎng)?chuàng)建頂部導(dǎo)航欄，請(qǐng)選擇“ 矩形（R）”工具。

提示：我真的建議您學(xué)習(xí)最重要的快捷方式，因?yàn)樗鼈円子谑褂谩?在大多數(shù)情況下，快捷鍵是我們工具的第一個(gè)字母，因此對(duì)于Rectangle，它是R ；對(duì)于橢圓形，它是O ；對(duì)于Line，它是L。

使用矩形工具創(chuàng)建一個(gè)750px寬，120px高的矩形，其背景顏色為#F9F9F9 。

提示：在顏色方面，我總是使用HSBA（色調(diào)，飽和度，亮度，Alpha）數(shù)字，因?yàn)樾薷乃鼈兒皖A(yù)先想象結(jié)果很容易。

第2步

讓我們選擇橢圓（O）工具，然后按Shift + Alt鍵，繪制一個(gè)完美的80px圓。在右側(cè)的“檢查器”面板中，單擊“ 填充”按鈕，然后在第四個(gè)選項(xiàng)卡下上傳個(gè)人資料圖片。

提示：如果按Alt鍵并移動(dòng)光標(biāo)，則可以看到所選元素之間的距離（以像素為單位）。

第三步

選擇文本工具（T） ，然后在配置文件圖片旁邊放置一個(gè)名稱(chēng)，并向左填充20px。將字體大小設(shè)置為22px，將字體顏色設(shè)置為#9E846E 。您可以在“ 類(lèi)型”>“大寫(xiě)”菜單中設(shè)置大寫(xiě)字母。

將具有相同設(shè)置的“新故事”文本放置在畫(huà)板的右側(cè)，并使用20px右填充。

第4步

現(xiàn)在，我們將創(chuàng)建我們的第一個(gè)圖標(biāo)，它將是一個(gè)“ +”圖標(biāo)。

讓我們用矩形（R）工具創(chuàng)建一個(gè)36x6px的矩形，它的顏色與文本相同。完成后，復(fù)制結(jié)果形狀。

選擇第二個(gè)，然后在檢查器面板（右側(cè)）上將其旋轉(zhuǎn)90度。

將矩形完美地放置在一起之后，將第一個(gè)矩形拖放到圖層面板上的第二個(gè)矩形中。為此，我們將兩個(gè)單獨(dú)的圖層合并為一個(gè)36x36px圖標(biāo)。

第5步

對(duì)于我們的桌面視圖，我們還具有相同的全寬導(dǎo)航矩形，高度為70px，不透明度為80％。

菜單按鈕的文本大小略小； 14像素，內(nèi)邊距為40 #CCCCCC并使用#CCCCCC分隔線(xiàn)。

設(shè)計(jì)固定底部導(dǎo)航

對(duì)于移動(dòng)視圖，我們將創(chuàng)建一個(gè)固定的底部導(dǎo)航欄，用戶(hù)可以在其中選擇網(wǎng)格，收藏夾位置，搜索和配置文件頁(yè)面。

第1步

就像頂部導(dǎo)航一樣，我們將以100％高的全幅#FFFFFF矩形（不透明度為90％）開(kāi)始。讓我們?cè)诖司匦蔚捻敳糠胖靡粭l1px #E6E6E6線(xiàn)，并將其分成四個(gè)相等的列。

我們所有的圖標(biāo)都高50像素，顏色為#666666 。

提示：您可以通過(guò)排列9個(gè)14x14px矩形（填充4px）來(lái)創(chuàng)建自己的“網(wǎng)格”圖標(biāo)。

創(chuàng)建標(biāo)題

第1步

對(duì)于英雄圖像，讓我們創(chuàng)建一個(gè)全幅，850px高的矩形，并用照片填充它，就像個(gè)人資料照片一樣。為了確保文本仍然可讀，我在圖像上放置了黑色層，不透明度為20％。

如果是桌面英雄圖像，建議高度為1000px。另外，請(qǐng)確保圖像在導(dǎo)航欄下方。

第2步

對(duì)于標(biāo)題和副標(biāo)題，字體大小分別為60px和24px。標(biāo)題字體為Merriweather Bold，字幕字體為Montserrat Regular。

第三步

我們的英雄圖片上的最后一個(gè)元素是“獲取靈感”按鈕，其中字體大小為24px，字母間距為1.33px。按鈕本身為338x89px，帶有3px的白色邊框。讓我們將按鈕放置在圖片底部70px處。

對(duì)于桌面視圖，我建議使用較小的18px字體。

創(chuàng)建商品卡

第1步

在這一步中，我們將為最受歡迎的故事創(chuàng)建一個(gè)特殊的地方。為此，請(qǐng)以670x480px的圖像填充矩形開(kāi)始，該矩形的右上角帶有一個(gè)特殊圖標(biāo)。每個(gè)人都可以使用此圖標(biāo)在網(wǎng)站上標(biāo)記自己喜歡的旅程。

此圖標(biāo)有一個(gè)80x80px的白色圓圈，內(nèi)部厚度為2px。 “圖釘”圖標(biāo)的寬度為12像素，我們使用18像素的蒙特塞拉特常規(guī)編號(hào)。整個(gè)圖標(biāo)的不透明度為70％，頂部和右側(cè)填充為15px。

在桌面視圖中，此圖片為1240x750px，“收藏夾位置”圖標(biāo)為50x50px。

第2步

現(xiàn)在我們可以創(chuàng)建我們的第一張卡。第一步，制作一個(gè)670x522px的圖像填充矩形，然后制作另一個(gè)670x435px #FFFFFF矩形。將第二個(gè)矩形放在第一個(gè)矩形的頂部。

創(chuàng)建第三個(gè)670x744px矩形，并用前兩個(gè)矩形覆蓋。將此層放置在先前的層之下。給該層陰影一點(diǎn)，使其彈出一點(diǎn)。

邊框半徑在我們的卡片設(shè)計(jì)中至關(guān)重要，因此請(qǐng)將其設(shè)置為5px。為了在每個(gè)圖層上看到此半徑，請(qǐng)單擊此陰影圖層并將其用作遮罩。

由于在移動(dòng)設(shè)備上我們沒(méi)有懸停狀態(tài)，因此我們將懸停視圖用作標(biāo)準(zhǔn)視圖，因此所有信息都將立即可見(jiàn)。

后，我們選擇連接到該卡的設(shè)計(jì)每一層，我們可以集團(tuán)（?-G）在一起，那么我們可以很容易地復(fù)制它們的同時(shí)按下Alt鍵和移動(dòng)所述原始組向下（或者我們可以與?-C和重復(fù)? -V方法。）

提示：在這樣的大型項(xiàng)目中，將各層組織成組非常有用。

在桌面視圖中，我們可以使用相同的卡。對(duì)于更復(fù)雜的結(jié)果，我建議稍微調(diào)整比例和字體大小。

別忘了我們?cè)谧烂嫔嫌幸粋€(gè)懸停視圖，因此我們可以默認(rèn)創(chuàng)建一個(gè)更簡(jiǎn)單的卡版本，當(dāng)用戶(hù)將光標(biāo)懸停在卡上方時(shí)，會(huì)顯示更復(fù)雜的版本。

使用旅程集合設(shè)計(jì)地圖部分

借助此地圖部分，可以按位置過(guò)濾和搜索旅程。結(jié)果將顯示為多位作者撰寫(xiě)的合集。

第1步

創(chuàng)建一個(gè)750x850px的矩形，并用簡(jiǎn)單的Google Maps屏幕截圖填充。對(duì)于搜索欄，在該矩形的頂部放置另一個(gè)具有80％不透明度的矩形。

提示：為便于對(duì)齊，請(qǐng)?jiān)谒阉鳈诘淖髠?cè)創(chuàng)建一個(gè)正方形。之后，我們可以將搜索圖標(biāo)放置在正確的位置。

我選擇#B3483E作為我的地圖UI的主要顏色。此顏色的靈感來(lái)自Pantone Marsala （2015年P(guān)antone色彩）。

第2步

當(dāng)某人搜索特定位置時(shí)，結(jié)果將顯示為小型日記本。每本日記本都是一個(gè)320x414px的圖片填充矩形，上面帶有陰影。

第三步

在桌面視圖中，幾乎所有內(nèi)容都是相同的，只是我們將日志放置在地圖旁邊而不是地圖下方。

設(shè)計(jì)小型商品卡

第1步

設(shè)計(jì)小商品卡類(lèi)似于創(chuàng)建較大的商品卡，只是我們刪除了故事的描述和摘要部分。這樣，我們可以在同一空間中顯示更多信息，因此用戶(hù)可以同時(shí)瀏覽更多內(nèi)容。

在桌面視圖中，除了減小卡的大小外，我們還將它們按三列網(wǎng)格排序。我相信這將為我們提供一種方便快捷的發(fā)現(xiàn)和探索新內(nèi)容的方法。

呼吁采取行動(dòng)

在用頁(yè)腳完成項(xiàng)目之前，不可避免地要提供一個(gè)號(hào)召性用語(yǔ)部分。

第1步

與往常一樣，我們需要一個(gè)750x1000px的圖片填充矩形。為了使文本可讀，我們?cè)趫D片中添加了白色漸變層。我們的漸變是從#FFFFFF不透明度30％到#FFFFFF不透明度70％ ，因此我們只需要修改不透明度的數(shù)量即可。

提示：提高文字清晰度的一個(gè)小技巧，但有時(shí)還是很重要的技巧是在其上添加陰影。在這種情況下，我在標(biāo)題和段落文本上應(yīng)用了柔和的陰影。

創(chuàng)建頁(yè)腳區(qū)域

對(duì)于頁(yè)腳區(qū)域，我們將結(jié)合使用社交媒體圖標(biāo)和文本按鈕。

確保我們的社交媒體圖標(biāo)在小型手機(jī)屏幕上保持可觸摸的狀態(tài)。讓我們使它們至少高或?qū)?4像素。

對(duì)于桌面視圖，我們可以再創(chuàng)建一種導(dǎo)航樣式，但是我們必須對(duì)此謹(jǐn)慎，并且只能在1440px寬度以上使用。它等效于移動(dòng)視圖中的固定底部導(dǎo)航。

恭喜你！

我們已經(jīng)完成了漂亮的期刊Web應(yīng)用程序設(shè)計(jì)。遵循了本教程，我希望您對(duì)在大型項(xiàng)目中使用Sketch更有信心。讓我們看一下最終產(chǎn)品的混搭：

我很想知道您是如何找到該過(guò)程的，所以請(qǐng)不要在評(píng)論中留下反饋和問(wèn)題。

翻譯自: https://webdesign.tutsplus.com/tutorials/designing-a-vsco-inspired-web-journal-in-sketch--cms-23146