sketch web組件

在本教程中，我將教您如何在Sketch中為移動設備和臺式機設計一個簡單而復雜的網絡日記應用程序。 我們將以VSCO美學為靈感，在本教程的最后，您將了解Sketch的許多最重要的功能。

除了這些特定于應用程序的技能之外，您還將通過模塊化比例尺對設置字體和布局有更深入的了解。 我們將在Sketch中使用一些基本和中間技術。 讓我們開始吧！

教程資產

您需要以下資產才能繼續進行：

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

快速免責聲明

在打開Sketch并創建一個新文檔之前，我應該指出，這個概念完全是理論上的。 在將其轉變為真正的可用產品之前，需要進行更深入的市場分析。 我一直熱衷于使用精美的照片進行在線故事講述，因此我創建了這個概念，以教會您如何從設計師的角度了解網絡趨勢。

版式

當我開始一個項目時，我總是從排版開始，因為我堅信排版是通信設計師可以使用的最重要的工具。

對于正文和較大的標題，我選擇了Merriweather，這是一種襯線字體，靈感來自舊書的面Kong，非常適合講述故事和旅途。 在高分辨率顯示器上，它給人以真實，印刷的日記的感覺。

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

設置畫板

首先，我想寫一些關于如何處理布局和版式設置的信息。 Adobe Typekit的類型管理器Tim Brown創建了一個名為Modular Scale的出色工具。 這個工具很棒：我們定義了理想的文字大小并建議了一個重要數字后，會將這些數字除以并乘以數學上熟悉的值，例如黃金分割率或完美的五分之一。 稍后，當我們設置印刷層次結構和布局的基本元素時，我將始終參考這些數字。

注意 ：顯然，在某些情況下，我們需要打破此規則，但這將使我們在布局和版式中達到自然的平衡，這令人賞心悅目。

我將理想的文字大小設置為18px，并將670px定義為一個重要數字，因為這將是我們移動版式的實際可用寬度。

第1步

打開草圖后，讓我們在“ 插入”菜單中選擇“ 畫板（A）”選項。

對于我們的移動視圖，我建議您選擇iPhone 6尺寸，但是如果您使用其他型號的iPhone，則最好選擇該尺寸。 使用Sketch具有一個巨大的優勢，它使您可以使用Sketch Mirror將工作實時鏡像到iOS設備，而無需導出或傳輸圖像。 Mirror是設計工作流程的重要組成部分，因為有了它，我可以立即看到手中的工作最終結果。

要激活此功能，您將需要App Store中的Sketch Mirror應用程序。 然后在Sketch中單擊“ 鏡像”圖標（確保您的設備位于同一網絡或通過USB電纜連接）。

對于桌面視圖，我選擇了1440px寬的Desktop HD畫布。

提示：以后我們可以通過更改檢查器面板上的數字來修改畫板的高度。

第2步

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

要創建準則，請在標尺上單擊40px，375px和710px點。

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

創建頂部導航區域

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

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

第1步

要創建頂部導航欄，請選擇“ 矩形（R）”工具。

提示：我真的建議您學習最重要的快捷方式，因為它們易于使用。 在大多數情況下，快捷鍵是我們工具的第一個字母，因此對于Rectangle，它是R ；對于橢圓形，它是O ；對于Line，它是L。

使用矩形工具創建一個750px寬，120px高的矩形，其背景顏色為#F9F9F9 。

提示：在顏色方面，我總是使用HSBA（色調，飽和度，亮度，Alpha）數字，因為修改它們和預先想象結果很容易。

第2步

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

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

第三步

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

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

第4步

現在，我們將創建我們的第一個圖標，它將是一個“ +”圖標。

讓我們用矩形（R）工具創建一個36x6px的矩形，它的顏色與文本相同。 完成后，復制結果形狀。

選擇第二個，然后在檢查器面板（右側）上將其旋轉90度。

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

第5步

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

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

設計固定底部導航

對于移動視圖，我們將創建一個固定的底部導航欄，用戶可以在其中選擇網格，收藏夾位置，搜索和配置文件頁面。

第1步

就像頂部導航一樣，我們將以100％高的全幅#FFFFFF矩形（不透明度為90％）開始。 讓我們在此矩形的頂部放置一條1px #E6E6E6線，并將其分成四個相等的列。

我們所有的圖標都高50像素，顏色為#666666 。

提示：您可以通過排列9個14x14px矩形（填充4px）來創建自己的“網格”圖標。

創建標題

第1步

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

如果是桌面英雄圖像，建議高度為1000px。 另外，請確保圖像在導航欄下方。

第2步

對于標題和副標題，字體大小分別為60px和24px。 標題字體為Merriweather Bold，字幕字體為Montserrat Regular。

第三步

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

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

創建商品卡

第1步

在這一步中，我們將為最受歡迎的故事創建一個特殊的地方。 為此，請以670x480px的圖像填充矩形開始，該矩形的右上角帶有一個特殊圖標。 每個人都可以使用此圖標在網站上標記自己喜歡的旅程。

此圖標有一個80x80px的白色圓圈，內部厚度為2px。 “圖釘”圖標的寬度為12像素，我們使用18像素的蒙特塞拉特常規編號。 整個圖標的不透明度為70％，頂部和右側填充為15px。

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

第2步

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

創建第三個670x744px矩形，并用前兩個矩形覆蓋。 將此層放置在先前的層之下。 給該層陰影一點，使其彈出一點。

邊框半徑在我們的卡片設計中至關重要，因此請將其設置為5px。 為了在每個圖層上看到此半徑，請單擊此陰影圖層并將其用作遮罩。

由于在移動設備上我們沒有懸停狀態，因此我們將懸停視圖用作標準視圖，因此所有信息都將立即可見。

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

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

在桌面視圖中，我們可以使用相同的卡。 對于更復雜的結果，我建議稍微調整比例和字體大小。

別忘了我們在桌面上有一個懸停視圖，因此我們可以默認創建一個更簡單的卡版本，當用戶將光標懸停在卡上方時，會顯示更復雜的版本。

使用旅程集合設計地圖部分

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

第1步

創建一個750x850px的矩形，并用簡單的Google Maps屏幕截圖填充。 對于搜索欄，在該矩形的頂部放置另一個具有80％不透明度的矩形。

提示：為便于對齊，請在搜索欄的左側創建一個正方形。 之后，我們可以將搜索圖標放置在正確的位置。

我選擇#B3483E作為我的地圖UI的主要顏色。 此顏色的靈感來自Pantone Marsala （2015年Pantone色彩）。

第2步

當某人搜索特定位置時，結果將顯示為小型日記本。 每本日記本都是一個320x414px的圖片填充矩形，上面帶有陰影。

第三步

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

設計小型商品卡

第1步

設計小商品卡類似于創建較大的商品卡，只是我們刪除了故事的描述和摘要部分。 這樣，我們可以在同一空間中顯示更多信息，因此用戶可以同時瀏覽更多內容。

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

呼吁采取行動

在用頁腳完成項目之前，不可避免地要提供一個號召性用語部分。

第1步

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

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

創建頁腳區域

對于頁腳區域，我們將結合使用社交媒體圖標和文本按鈕。

確保我們的社交媒體圖標在小型手機屏幕上保持可觸摸的狀態。 讓我們使它們至少高或寬44像素。

對于桌面視圖，我們可以再創建一種導航樣式，但是我們必須對此謹慎，并且只能在1440px寬度以上使用。 它等效于移動視圖中的固定底部導航。

恭喜你！

我們已經完成了漂亮的期刊Web應用程序設計。 遵循了本教程，我希望您對在大型項目中使用Sketch更有信心。 讓我們看一下最終產品的混搭：

我很想知道您是如何找到該過程的，所以請不要在評論中留下反饋和問題。

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

sketch web組件

總結

以上是生活随笔為你收集整理的sketch web组件_在Sketch中设计受VSCO启发的Web Journal的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。