一、页面规则:
1、页面逻辑、层级要清晰。首先是进入后默认的、再是一步一步点击操作的状态页面。(页面——子页面)(一级页面——二级页面——三级页面等等)
2、不要上颜色(你不是ui,最好不要上颜色,以免让别人如UI对视觉元素产生误解,常规黑白灰就行)
3、设计统一(字体字号、功能布局、功能位置等)
4、信息真实。原型设计时数据文字等要求真实,比如一行标题一行文字有多少个、背景底色是否与背景图片融合等问题,按真实来。不要让其他人产生错觉。
5、禁止出现没有含义得图形,2种解决方法:一是使用占位符+文字替代,二是通过阿里矢量图库或easyicon官网下载矢量图。
6、规则显示(例如输入字数限制)
7、保存、命名习惯。每个icon或者模块,设计之后一定要命名,方便进行后期的交互设计。
二、模块规则:
1、使用场景:写两方面,一是用户通过什么操作进入了该页面。就是前置进入条件或者路径。二是对场景描述:该页面有什么功能。
有3种表达(模块底下第一步、页面标注、交互里面的全局说明)。具体如下图所示:
2、放置模块:放要进行交互说明的重要核心模块,对于产品有必要进行说明、操作之后有变化的模块,不是全部拖进来。(要么但对拿出来,要么框出来)
可以进行模块局部拆解:
也可以在页面中标记序号,然后对应序号进行交互说明。
三、交互说明:(3+1原则、易读性)
1、三个维度:
(1)按钮、图标等操作之后出现的状态变化;
(2)[endif]刷新加载、数字显示等页面规则;
(3)[endif]错误提醒、弹窗等操作规则;
2、一个基点
所有页面都有2种状态,一是进入看得见得状态,二是操作后的隐藏状态。
3、全局说明:使用场景、该页面规则。举例:数字规则,全部用阿
拉伯数字显示。具体举例如下图:
4、对应模块(用线连接的模块、标记序号对应的模块)的说明:
(1)需求描述(这个模块是干嘛的、显示规则)从上至下,从左至右,弹窗统一放右边,连接线按钮、图标变化统一放下面,内容(正常操作)
(2)操作规则(一般是蓝色字体),动作操作+对象+结果,点击什么(按钮/icon/图片等等),出现什么变化(跳转至什么页面/出现什么弹窗等等)
(3)错误提醒(一般是红色字体)
(4)重要内容可以对其加粗,但是不要全部加粗!给别人展示时,加粗部分增强视觉效果,一眼就明白这个功能有什么重要的。
(5)对隐藏状态进行描述,变化复杂的可以用图片+文字说明,对于变化简单的可以用文字说清楚。2种表达具体下图所示:
四、总结
1、尽可能考虑周全,尤其要注意不要遗漏一些特殊或者极端情况下的功能或者内容。
2、对每个模块的交互说明要具体到细节上,避免过于空泛。如果有必要,还可以对难以用文字/图片说明的功能和内容,加以必要的说明。
3、考虑页面流程优先级,模块说明的逻辑性、交互说明的易懂性。