我们是如何提升产品设计和开发效率的

2025-6-18    涛涛 设计管理与成长

image.png

一、命名理论与规范

（一）命名理论

  • 家庭理论：采用层级化命名方式，类似 “爷爷 - 爸爸 - 儿子 - 孙子” 的家族关系，明确元素间的层级归属。image.png

（二）命名规范

  • 命名顺序：位置_功能_辅助描述（可选）_状态。
  • 示例
    • 标签栏选中状态：tabbar_home_normal（底部标签栏_首页_默认状态）。
    • 微信底部导航示例：可按 “tabbar_contacts”“tabbar_discover”“tabbar_me” 等命名。

image.png

（三）Sketch 组件化命名

  • 命名顺序：位置 / 功能 / 辅助描述（可选）/ 状态，以 “/” 分隔，在 Symbol 控件列表中呈现层级结构。
  • 示例
    • 导航栏组件：Navigation/Navigation Bar。
    • 标签栏组件：tab_bar/home/selected（首页标签栏_选中状态）。

二、模块、类别、功能及状态命名对照表

模块（UI mode） 类别 功能 状态
导航栏（nav） 标志（logo） 搜索（search） 选中（sel/selected）
菜单栏（tab） 图标（icon） 收藏（collect） 不可点（dis/disabled）
背景（bg） 按钮（btn） 时间（time） 默认（nor/normal）
左侧导航（leftbar） 进度条（progress bar） 音频（audio） 按下（pressed/focused）
启动页面（default） 默认图片（def） 视频（video） 高亮显示（hig/highlighted）
工具栏（tool） 分隔图片（seg） 用户（user）  
主页面（home） 图片（img） 排名（ranked）  
列表（list） 评论（comment） 关闭（close）  
个人资料（profile） 广告（ad） 返回（back）  
登陆（login） 提示信息（msg） 编辑（edit）  
注册（register） 弹出（pop） 删除（delete）  
标题（title） 输入框（input） 链接（link）  
菜单（menu）      

三、Sketch 组件化设计实例演示

（一）准备工作

  1. 新建 Sketch 文件，置入两组完整 Banner，整理图层结构并命名，创建不同尺寸画板备用（如大尺寸、小尺寸）。
  2. 图层命名示例
    • 主体 1 相关：主体/1/字1、主体/1/装饰1、主体/1/主体物1、主体/1/背景1。
    • 主体 2 相关：主体/2/文字2、主体/2/主体物2、主体/2/装饰2、主体/2/背景2。

（二）创建组件步骤

  1. 选择 Banner 组件：选中其中一个 Banner，右键点击或通过上方菜单栏选择 “Create Symbol” 新建为组件。
  2. 嵌套组件创建
    • 进入组件库（PAGES 下的 Symbols），打开 “主体 1” 组件，选择 “主体 / 1 / 背景 1”，按上述方法创建子组件。
    • 复制组件并修改命名：选中 “主体 / 1 / 背景 1” 组件，按command+D复制，重命名为 “主体 / 2 / 背景 2”，删除原组件内容，复制另一个 Banner 的背景文件粘贴至新组件。
  3. 重复组件创建流程：将 “主体 1” 内的 “主体物 1”“字 1”“装饰 1” 等图层依次创建为组件，复制后替换为另一个 Banner 的对应元素。

（三）组件应用与尺寸扩展

  1. 组件替换：从组件库拖出 “主体 1”，在右侧 “Overrides” 面板中调整参数，替换为 “主体 2” 的元素（如背景 2、主体物 2 等）。
  2. 尺寸扩展方法
    • 在组件库中选择 Banner 的组成部分（如背景、主体物、文字），拖动至新尺寸画板。
    • 使用 “缩放” 工具调整组件尺寸，注意主尺寸与扩展尺寸的比例及位置关系，确保构图协调。

（四）关键注意事项

  • 组件命名需遵循 “位置 / 功能 / 状态” 规则，确保层级清晰。
  • 尺寸扩展时提前规划比例和位置，避免替换后布局错乱。
  • 利用 Sketch 的 “Overrides” 功能快速切换组件内容，提高设计效率。

« 我们如何把竞品分析做的更好？ Kiss My Keto 如何将购物车放弃率降低 20% »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档