产品原型的设计规范

话不多说,写一些对原型设计的经验见解

1. 产品原型内容规范

根据每个公司或者每个产品的不同需求,原型文件中的内容也不相同。

1.1. 功能设计

产品功能的原型设计,须较全面的展示产品各版块、界面、元素等内容,能够表达产品的设计理念和功能的执行逻辑。

尤其针对带有异常情况或分支流程的,需全面清楚的展示出来。

1.2. 注释说明

对于产品功能逻辑的需求说明,可以在原型文件中做标注,也可以仅在需求文档中做详细说明,但个人认为,在原型文件中的设计说明更容易被人看见和记忆。

我们这里说的“注释说明”,主要是提供给UI设计师、研发工程师、测试工程师的,可以帮助他们更好的理解产品需求。

1.2.1.    内容

1、       全局说明:针对整个产品的需求内容,如设计要求、研发要求、产品对接说明等;

2、       页面说明:针对产品的每个页面的内容说明、功能说明、交互说明等;

1.2.2.    形式

在注释说明的形式上,同一产品应该保持一致,这里说几个形式的例子,比如:

针对不同的元件,使用Axure自带的说明;

在不同的元件附近,放自己设计的说明样式;

每个页面使用一张注释说明的表格,进行统一说明;

……

形式多种多样,能表达清楚需求就可以。

1.3. 其他内容

根据实际情况可在原型中增加功能清单、UI设计图、流程图、需要相关人员提供的资料等内容;

2. 产品原型样式规范

2.1. 页面命名

l 页面/文件夹名称的命名不宜过长,最多不超过10个字为宜;

l 页面/文件夹名称的命名须清晰易懂,与页面/文件夹内容须相符;

l 不宜使用“1/2/3”来区分同一功能的不同状态或步骤等情况,命名须标明状态的具体内容,如:

[导出-成功]、[导出-失败]         √

[导出1]、[导出2]                ×

2.2. 页面层级结构

页面层级结构需清晰,同属一个功能模块下的设计页面需在一起,必要时可通过文件夹的形式进行层级和功能区分,如下图:

产品原型的设计规范

2.3. 尺寸

原型页面内容的尺寸不宜过大(网页预览不能直观查看内容)或过小(内容放不下或看不清),适宜参照设计标准来设置,如:

l 移动端的:375 × 667 或 320 × 568;

l Web端的:宽1200 或 宽1000。

2.4.  文字

l 一个原型文件中的文字应统一,最好不超过三种字体;

l 使用常用的文字字体,如:Arial、微软雅黑、宋体、等线;

l 字号最小一般不小于10号,可以参考UI设计的标准;

l 文字段落的行间距,一般遵循的规则为“行间距=字号+10”是比较合适的,如字号为14,则行间距设置为24;

l 表示不同功能的文字通过颜色或大小做区分

2.5. 配色

在没有特殊需要的情况下,建议主要使用黑白灰来设计原型,这样可以避免对UI设计师造成干扰,为什么说是“主要”,因为有些元素如果不使用特殊颜色,可能不会清晰的表达原本的含义,所以在主体黑白灰的原则下,适当的使用其他颜色也是可以的,需要注意的是,尽量使用常规、柔和的颜色。

2.6. 布局

在进行内容布局时,要考虑:

l 内容的相关性

l 内容的对比性;

l 页面的美观性。

产品原型的设计规范
产品原型的设计规范

2.7. 组件

一套规范的组件是非常有用的,导入后直接拖出来用,省时省力,这样最后的原型效果还很好,熟练灵活的运用组件很有必要。

3. 最后

当有了一定的规范后,原型的质量和工作的效率都会有一定的提高,每个人都可以根据经验总结出适合自己的规范,祝你早日成功!

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
axure商城
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论