Sketch用它做UI，真香！2.0

一. 导航栏

• 导航背景：创建一个矩形设置它的样式，并创建一个外观，以便相同的样式使用它。

  
  

  
  

• 导航栏目：创建一个矩形和文字，并设置好它们的外观，分别创建背景和文字的外观。并把它们创建成一个组件。

  

  
  

  
  

• 复制二个刚刚创建的组件，并修改文字。

  
  

  
  

• 首页改为选中状态：选中组件，更改背景和文字的外观。（它们的外观用以上方法创建哦〜）

  

  
  

  
  

• 我一般会把整个导航创建为一个组件，几乎每个页面都会使用，所在的栏目更换一下该栏目的外观就好。要更改导航栏也不用每个页面都修改。

二. 表单

• 输入框：创建矩形和文字，并创建为组件。

  
  

  
  

  外观会选择靠左侧和顶部固定。能做到以下。

  

  
  

  其他状态，更改背景和文字的外观就好。

  

  
  

• 下拉框：可切换组件，变成时间选择框。

  
  

三. 图标

制作一个图标，栅格化组成一个形状，设置它的外观。用同样的方法表示不同状态下的图标。也可以切换其他图标。一个组件就搞定。

四. 数据图表

数据图表，我一般会设置好配色，应用中无论是折线图、柱状图、饼图还是雷达图等等这些配色就统一了。

五. 分组

无论是组件、形状或文字等都做好分组，sketch中命名时加”组名/名称”就可以完成分组，比如“导航栏/样式一”和“导航栏/样式二”组件，应用时就可以选择在导航栏分组下的样式一or样式二。一个项目的页面众多要想保持统一的设计就需要设计师条理清晰，用好工具而不是依靠自己大脑来记忆。比如以下是我在一个项目中用到的所有系统图标，系统图标是随着页面的累积不断增加的，把它们放到一组一个地方提醒自己保持一个风格。

总结

• 条理清晰：之前的做法是每个状态都是一个组件，整个项目下来组件众多，自己都会混乱导致整个设计不统一。现在这样做的好处是整个项目组件变少，一种类型组件只有一个，各个状态展现用切换外观就可以搞定。设计师可以轻松掌控全局。

• 风格统一：前期做几个页面设置好外观，后面的页面直接使用，要修改的话改一下外观所有使用这个外观的全部改掉，搞定设计师的选择恐惧。UI界面因为内容众多，颜色和样式不宜使用过多，这样会让设计师养成好的设计习惯哦〜

• 复用性强：按这种习惯积累几个项目，之后的项目大部份都能复用，改一下外观就好，效率有木有！

• 完成度高：这种做法更有利于前端实现，前端直接使用这种方式设置CSS样式即精简复用性又高。

ps：最后展示一下一个项目组件、形状外观、文字外观：