- 动静有法 Sketch+Principle UI设计基础教程
- 张怡琪(张小碗儿)编著
- 1085字
- 2025-02-16 00:37:45
2.1.2 Sketch在UI设计中的优势
在众多设计软件中,Sketch对于UI设计有独特的优势,下面具体分析。
1.为用户提供UI设计模板
UI设计师在绘制作品之前,首先要创建画布。Sektch提供了主流机型尺寸,在检查器面板里,只需单击相应机型的模板,就可以直接创建以该机型为模板的画布,包括iPhone、Android等平台主流机型尺寸的画布,不需要手动输入数值。


在UI设计中,icon(图标)的设计也要遵循规范,Sketch提供了iPhone、Android等主流平台icon的规范尺寸。下图所示就是SketcH(高)为设计师们提供的iOS App icon尺寸模板。

(iOS App icon尺寸模板)
2.强大的Symbols(元件库)
当设计师将App整体界面做好之后,通过Sketch中的Link功能实现简化的可操作模拟案例。在设计师或整个项目组体验产品的过程中,难免会遇到App存在某些问题需要修改的情况。例如,项目组体验App后,决定将按钮统一由直角风格改为圆角风格,那么一般的设计软件需要进入每一个界面,逐个修改按钮。但是在Sketch中,有一个功能可以快速修改——Create Symbol。将按钮绘制好之后,通过Creat Symbol功能将按钮存储到元件库中,这样在修改所有按钮时,只需修改元件库里面的按钮,界面中所有的按钮都被瞬间修改完成。
Sketch提供了强大的Symbois(元件库),不仅可以辅助设计师的工作,还可以辅助整个团队的设计制作。共享元件库可以帮助团队快速更新产品中的所有设计元素,加快整体团队的设计进度。

3.灵活的样式
在设计界面时,UI 设计师会遵循统一的视觉风格、形状样式、文字样式等。例如确定某个界面使用的字体、文字颜色、字号之后,可以快速地将该字体样式存储到样式库中,进入下一个界面。创建一段文字,可以直接在样式库中选择存储好的样式,节省了大量调整字体的时间。

4.方便的测量工具
UI设计要遵循一定的尺寸规范。比如,顶部栏尺寸是多少、底部栏尺寸是多少。在设计的时候,下方的大标题和左上角的返回按钮在任何界面中与底部的距离都应该保持一致,Sketch中的测量工具有助于设计师观察各个设计元素与底部的距离。

5.快捷的导出功能
整个App界面设计完成后,需要将设计稿按照不同的机型尺寸适配,并导出效果图。Sketch是非常了解设计师需求的软件,它的导出功能可以快速地帮助设计师生成需要的尺寸。以iOS设计稿为例,在导出界面能选择各种类型的导出尺寸,真正做到一键导出。

6.视觉预览
整个App界面设计完成后,设计师一般只能通过一张一张的图片来预览整套设计,Sketch提供了Preview(预览)工具,能快速简单地将按钮及其他可点按区域进行快速链接,让人在预览图片的同时,还能体验产品的交互性,做到一举两得。

以上只是简单地介绍了Sketch在UI设计中的优势,Sketch还有很多功能能够快速地帮助UI设计师解决烦恼,比如剪刀工具、图层样式等。当然,还有很多插件,可以让UI设计师在使用Sketch进行设计的时候如虎添翼。