长城上的猫

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

 

前言

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

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

一、筛出组合组件

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

 

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

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

 

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

 

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

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

 

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

 

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

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

 

五、总结

还有一篇交互规范目录以及其他内容。这样整篇交互规范的实操整理方法就齐了。下篇更新吧,顺便说说第三期开源项目的事情。 
 
 
原文地址:站酷
作者:Sophia的玲珑阁  
 

转载请注明:学UI网 » 组合组件的交互规范整理方法

登录收藏
 
你可能喜欢的:
Material Design States 状态Material Design States 状态
Material Design Selection 选择Material Design Selection 选择
从「科学方法」到「设计实践」 – 云产品设计师会梦见服务器么?从「科学方法」到「设计实践」 – 云产品设计师会梦见服务器么?
异常场景怎么处理?异常场景怎么处理?
UI设计交接给开发之后看起来更糟的7个原因,以及为什么这可能是你的错UI设计交接给开发之后看起来更糟的7个原因,以及为什么这可能是你的错
从「物种起源」到「设计进化论」- 阿里云设计语言哲思从「物种起源」到「设计进化论」- 阿里云设计语言哲思
如何设计好一款APP的首页?如何设计好一款APP的首页?
B端品牌如何面向C端用户B端品牌如何面向C端用户
如何搭建一个易学性高可用性强的功能框架?如何搭建一个易学性高可用性强的功能框架?
盘点 | 4个成为标杆的超强体验设计盘点 | 4个成为标杆的超强体验设计