搜尋
首頁web前端html教學如何用 Sketch 进行网页设计_html/css_WEB-ITnose

如果你是一名网页设计师,相信你一定对 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!

##题外

  • 希望 Dribbble 的设计师大牛可以给个邀请码让我也有机会发布作品,非常感谢。
  • 本人打算今年暑假去那里实习 interaction design 或者 user experience design, 希望在 Silicon Valley Uber 总部上班的朋友能提供个内推机会。
  • 有在美国这个暑假打算在加州找实习的小伙伴么,求组队,个人微信在简书首页,求加。
  • 来自: http://joeyqiang.me/design/2016/01/06/如何用 Sketch 进行网页设计/

    陳述
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    < datalist>的目的是什麼。 元素?< datalist>的目的是什麼。 元素?Mar 21, 2025 pm 12:33 PM

    本文討論了html< datalist>元素,通過提供自動完整建議,改善用戶體驗並減少錯誤來增強表格。Character計數:159

    > gt;的目的是什麼 元素?> gt;的目的是什麼 元素?Mar 21, 2025 pm 12:34 PM

    本文討論了HTML< Progress>元素,其目的,樣式和與< meter>元素。主要重點是使用< progress>為了完成任務和LT;儀表>對於stati

    < meter>的目的是什麼。 元素?< meter>的目的是什麼。 元素?Mar 21, 2025 pm 12:35 PM

    本文討論了HTML< meter>元素,用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了< meter>從< progress>和前

    視口元標籤是什麼?為什麼對響應式設計很重要?視口元標籤是什麼?為什麼對響應式設計很重要?Mar 20, 2025 pm 05:56 PM

    本文討論了視口元標籤,這對於移動設備上的響應式Web設計至關重要。它解釋瞭如何正確使用確保最佳的內容縮放和用戶交互,而濫用可能會導致設計和可訪問性問題。

    < iframe>的目的是什麼。 標籤?使用時的安全考慮是什麼?< iframe>的目的是什麼。 標籤?使用時的安全考慮是什麼?Mar 20, 2025 pm 06:05 PM

    本文討論了< iframe>將外部內容嵌入網頁,其常見用途,安全風險以及諸如對象標籤和API等替代方案的目的。

    如何使用HTML5表單驗證屬性來驗證用戶輸入?如何使用HTML5表單驗證屬性來驗證用戶輸入?Mar 17, 2025 pm 12:27 PM

    本文討論了使用HTML5表單驗證屬性,例如必需的,圖案,最小,最大和長度限制,以直接在瀏覽器中驗證用戶輸入。

    我如何使用html5< time> 元素以語義表示日期和時間?我如何使用html5< time> 元素以語義表示日期和時間?Mar 12, 2025 pm 04:05 PM

    本文解釋了HTML5< time>語義日期/時間表示的元素。 它強調了DateTime屬性對機器可讀性(ISO 8601格式)的重要性,並在人類可讀文本旁邊,增強Accessibilit

    HTML5中跨瀏覽器兼容性的最佳實踐是什麼?HTML5中跨瀏覽器兼容性的最佳實踐是什麼?Mar 17, 2025 pm 12:20 PM

    文章討論了確保HTML5跨瀏覽器兼容性的最佳實踐,重點是特徵檢測,進行性增強和測試方法。

    See all articles

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

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

    AI Clothes Remover

    AI Clothes Remover

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

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    AI Hentai Generator

    AI Hentai Generator

    免費產生 AI 無盡。

    熱門文章

    R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
    3 週前By尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.最佳圖形設置
    3 週前By尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.如果您聽不到任何人,如何修復音頻
    3 週前By尊渡假赌尊渡假赌尊渡假赌

    熱工具

    MinGW - Minimalist GNU for Windows

    MinGW - Minimalist GNU for Windows

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

    ZendStudio 13.5.1 Mac

    ZendStudio 13.5.1 Mac

    強大的PHP整合開發環境

    VSCode Windows 64位元 下載

    VSCode Windows 64位元 下載

    微軟推出的免費、功能強大的一款IDE編輯器

    DVWA

    DVWA

    Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

    mPDF

    mPDF

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