如果你是一名网页设计师,相信你一定对 Sketch 这个软件不陌生了。作为一个交互设计师,UI设计乃一核心内容。以前常使用 Photoshop 进行 P 图,但总觉的其实在是比较冗余。于是转而运用 Sketch 进行 UI 设计。该文将通过一个完整案例来介绍如何运用 Sketch 进行网页设计的,同时也会分享笔者的一些 tricks.
这次的网站设计主题是 An eCommerce Website,教程地址 tuts+ ,笔者最终版本可见笔者 Behance .
基本设置
画布按住键盘 A 快捷键,可以创建画布。 Sketch 已经良心的为你默认设置了各种设备尺寸,你想要的全都有,如下图。
栅栏通过 Layout settings 设置栅栏[布局参考线],这个功能好的真是不要不要的[下文回介绍其实际用处],可以根据需要自主选择每列宽度,间隔宽度以及最外侧 margin 宽度,见下图。
这时画布上就出现了栅栏参考线,文字段落的宽度,按钮的宽度,图片的宽度都可以根据栅栏进行合理设置。通过栅栏布局可以极大的统一页面的布局设置,给人一种和谐美[Ctrl + L 可以快捷键显示/隐藏栅栏],效果如下。
字体注重对比和统一。对比是指在需要突出区别的地方用不同字号,粗细和字体突出不同。统一是指对于网站同一元素,使用相同的字体设置,比如 H1, Body Text. 英文字体建议两种即可, 一个 sans-serif 字体作为标题,显眼;一个 serif 字体作为正文,易读。可以提前设计好各个字体的数值,利用 Sketch 的 Style Text 功能进行保存,方便以后频繁使用。也可以再设计的时候,边做边保存[前者适合在经验用户,后者更适合初学者],如下图。
对字体另外一个重点是确定 line height [行高],确定行高的作用是方便确定控件上下 margin, 左右 margin 可以通过栅栏进行确定。比如你确定默认字体大小为 20px, 行距为 1.5,则行高 = 20px * 1.5 = 30. 那么控件之间的上下间距则可以设为 30px 的倍数,比如 30px, 60px, 90px, 以此类推。间距和行高相同可以使页面看起来更加和谐美观。
调色板一个好的配色对界面美观的重要性不言而喻。Sketch 也贴心的为用户提供了颜色版用于记录颜色,方便你重复使用,见下图。
最主要的是一下几个颜色,背景色,默认字体颜色,减淡字体颜色,强调色,边框颜色,和适当数量的辅助色[Material Design鼓励用多种颜色,用鲜明大胆颜色]。这里再说一下阴影颜色,Material Design 建议使用 #000 全黑,然后减弱 opacity 不透明度,而不是直接设置灰度颜色。因为这样可以保证阴影不论在亮色还是暗色背景下都有一个良好的视觉效果。
##操作
页面Sketch 的左侧提供了页面导航列表。用户可以创建不同页面,同一页面中又可以创建不同画布。这样一来,用户便可以将网站的所有页面有条理的保存在一个 Sketch File 中[见下图],it is amazing!
间距Sketch 对于排版可谓是考虑的极其周到。学习 CSS 的朋友应该知道在排版时,对于 margin 的四个数值往往纠结不以,往往凭感觉设置。而 Sketch 可以在设计时就解决这个问题,鼠标选中指定元素,按下 Alt 键,界面自动现实该元素的 margin top, right, bottom, left. 精确到 1px 的设计,让设计稿和实现稿无缝对接,见下图。
SymbolSketch 还提供了保存组件的功能。如果某些元素在设计中会重复出现,则可以利用 Symbol 功能进行保存,需要时直接插入即可。一次设计,循环使用。
结构一个好的交互设计师需要对网站结构有一个非常清楚的认知。这个网站的目的是什么,用户群是谁,为了实现目的需要有哪些功能,这些功能如何组织成页面,页面之间如何跳转,功能如何实现等。比如该网站是销售网站模板的购物网站,导航栏有如下几项:主页,联系页,支持页,购物页,个人账户,购物车,如下图。
先设置主页,然后由主页发散延展到其他界面。当然,这一切应该在 UI 设计之前的交互稿就考虑清楚。UI 更加强调美观性,如何利用美观更好的引导用户实现既定目标。
交互设计时需要考虑用户使用网站时的交互场景。 界面的交互状态,比如登陆和未登录时界面的不同状态,如下图。
元素的交互状态,Hover 和未 Hover,Click 和未 Click,是否 Disabled等。细节产生美!
##插件 Sketch 的插件是独立与 Sketch 本身,可以第三方开发的。在这里像那些默默奉献的伟大程序员们表示无比的敬意。强推插件下载软件 Sketch Toolbox [见下图]。可以一键下载/卸载插件,再也不用从 GitHub 上下载然后拖到指定文件夹了,节省了大量时间。
Sketch 用了快三个月了,插件也尝试过20多个,现在把我喜欢的插件分享如下,希望能够帮到朋友们。
- Artboardzoom : Cmd + 4 一键 zoom in 画布到适当大小。
- Sketch Arrange Artboards :可以将多个画布整齐排列。
- Content Generator Sketch Plugin :添加伪元素必备。
- Generate Gif Sketch 也可以做 Gif 动图。
- Magicmirror :透视变形图让你的作品集看起来更酷。
- Sketch User Fontawesome :一键添加字体图标。
##总结
尽管 Sketch 相比 PS 而言缺乏很多操作位图的功能,插件稳定性不足,同时限定了只能 Mac 用户使用。但作为一个初学者,个人确实觉的使用 Sketch 比 Photoshop 更加适合 UI 设计。它的各项工具都是专门为 UI 流程进行设计的,比如画布尺寸,控件,指定尺寸导出等。相信使用 Sketch 可以极大的提升你的工作流程,从项目初期设计阶段到项目最终实施阶段。还没有尝试过 Sketch 吗?更多功能等待你去探索呢。如果你有其他的 tricks,let me know in the comments!
##题外
来自: http://joeyqiang.me/design/2016/01/06/如何用 Sketch 进行网页设计/

在Bootstrap4中實現多項目輪播的解決方案在Bootstrap4中實現多項目輪播並不是一件簡單的事情。雖然Bootstrap...

如何實現鼠標滾動事件穿透效果?在我們瀏覽網頁時,經常會遇到一些特別的交互設計。比如在deepseek官網上,�...

無法直接通過CSS修改HTML視頻的默認播放控件樣式。 1.使用JavaScript創建自定義控件。 2.通過CSS美化這些控件。 3.考慮兼容性、用戶體驗和性能,使用庫如Video.js或Plyr可簡化過程。

在手機上使用原生select的潛在問題在開發移動端應用時,我們常常會遇到選擇框的需求。通常情況下,開發者傾...

在手機上使用原生select的弊端是什麼?在移動設備上開發應用時,選擇合適的UI組件是非常重要的。許多開發者�...

使用Three.js和Octree優化房間內第三人稱漫遊的碰撞處理在Three.js中使用Octree實現房間內的第三人稱漫遊並添加碰�...

使用原生select在手機上的問題在移動設備上開發應用時,我們經常會遇到需要用戶進行選擇的場景。雖然原生sel...

探究鼠標滾動事件的實現原理在瀏覽一些網站時,你可能注意到某些頁面元素在鼠標懸停時仍然允許滾動整個頁...


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

ZendStudio 13.5.1 Mac
強大的PHP整合開發環境

mPDF
mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。

MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。