美文网首页产品交互设计
组合组件的交互规范整理方法

组合组件的交互规范整理方法

作者: 阁主的叨叨 | 来源:发表于2020-04-01 12:59 被阅读0次

“ 嗯,方便实操的方法就是好方法!”

上篇讲到为什么有了iOS、Android规范,我们还是要整理自己的规范。有位童鞋说的很在理,是共性与个性之间的区分。我们之所以创建规范,是表达我们个体的差异性,做出适合自己的产品规范来。废话不多说,来看看怎么做交互规范。

首先整理交互规范,时间节点上,更倾向于选择项目所有视觉稿页面都已经输出完毕,进入开发阶段之后开始。这样以免因为需求更改或者设计遗漏了一些页面,进行二次返工,从而提高工作效率。(大家各位的成品sketch项目页面阁主就不展示了)

一、筛出组合组件

什么是组合组件?就是在单个控件中集成了一个或多个控件组成的。简单的区分方法,以ant design为例来说就是,在像ant design这样的标准规范中找不到的组件的,可以先提出来。初步提出来之后。可以看到的现象如下图

二、将组合组件进行内容分类

在sketch画板上,组件的内容可以大体分为如下几类,大家也可以根据自己APP的内容进行归类。

每条纵列为一个分类,如果一个分类的内容太多,也可以分为2个纵列,分类好之后大概看到页面如下图,每一纵列是一个分类。

三、抽象同一组组件的共同之处

相似的组件,见得最多的应该就是各种卡片样式了,他们会有各种状态。比方说如下图,就是单个卡片的不同状态。

如果要抽象的话可以抽象出如下的组件

四、配上每个组件的说明文字,以及举例说明

然后针对每个组件进行文案说明,文案包括每个部分的名称、使用方式、可能出现的内容展示。如下图

五、总结

还有一篇交互规范目录以及其他内容。这样整篇交互规范的实操整理方法就齐了。下篇更新吧,顺便说说第三期开源项目的事情。

往期精彩文章
《既然已经有了iOS、Android规范了,为什么我们还是要整理规范》
《以Ant Design为例来说说B端设计的基本套路》
《交互设计知识体系》
《关于交互设计的思维抽象》
《3步设计思维助力职业成长》

相关文章

  • 组合组件的交互规范整理方法

    “ 嗯,方便实操的方法就是好方法!” 上篇讲到为什么有了iOS、Android规范,我们还是要整理自己的规范。有位...

  • 工作中的一些规范总结

    Web前端页面规范化和交互规范 1.组件划分:组件分为公共组件、页面组件 1.1公共组件 公共组件一般是页面公用...

  • Vue 组件化开发

    组件化开发思想 现实中的组件化思想体现(1)标准(2)分治(3)重用(4)组合 编程中的组件化思想体现 组件化规范...

  • 组件化开发

    组件化开发思想 标准 分治 重用 组合组件开发规范:Web Components通过封装好功能的定制元素(自定义标...

  • 网页类产品的基本交互方式

    基本交互 字体:对字体进行统一的规范 边框:对边框进行统一额规范,可用于按钮、卡片、弹窗等组件里 边框:实线、虚线...

  • 3.React 基础- 定义组件

    *如何定义组件 新建一个继承Component的组件,实现render方法 如何组合组件 将CommentList...

  • [特斯拉组件]iOS 高性能 PageController无标题

    1.组件介绍 Page是企鹅FM研发的分页组件,包括支持分页非交互切换(通过方法调用导航切换)和交互切换(屏幕的手...

  • 交互组件「弹窗」设计规范

    一、说明 弹窗常用于中断用户当前操作对其作出补充,或中断用户当前操作对其作出反馈;其价值在于提示重点内容,完成业务...

  • React 学习笔记1——基础概念篇

    1.1React 简介 React 把用户界面抽象成一个个组件,开发者通过组合这些组件,最终得到功能丰富、可交互的...

  • NT 技术周刊-1028

    React-Native 组件开发方法[原创] 摘要 �React Native的开发思路是通过组合各种组件来组织...

网友评论

    本文标题:组合组件的交互规范整理方法

    本文链接:https://www.haomeiwen.com/subject/fqwouhtx.html