当前位置：公众IT > 技术文章 > 产品界面原型设计排版规则？

产品界面原型设计排版规则？

新闻来源：互联网资料整理发布时间：2023/4/7 3:31:03 共计：4621 浏览

01 字体：类型 & 字号
在原型页面的文字设计中，字体的选择方面建议使用苹方（macOS）或是微软雅黑（Windows），以便达到更好的显示效果。

字号我个人比较常用的是12、13、14、15、17，偶尔会用9、10、20。

02 配色：色彩 & 界面
在原型页面的色彩设计中，最好保持一致，无论是文本还是其他图形、图片不要使用太多非黑灰白以外的色值。

如果用于演示的产品原型稿件中需要配图标，则需要保持图片的一致性，大小及样式。但在实际的工作中，除了一些指示性比较强的图标，比如搜索、设置、分享等等，其他的尽量不要使用图标素材。

组成原型界面的素材也要尽可能的避免混搭，比如从成熟产品中截图然后应用到自己的产品原型当中。

在Axure9中新增了Adjust Color【颜色调整】，可对图片可以进行色值调整。

03 排版：对齐 & 间距 & 留白
在原型页面的结构设计中，要灵活的使用参考线、对齐、分布等功能，使页面内容具有良好的可读性。

从个人习惯来讲，无论是间隔还是留白，我会按照5像素的倍数进行设置。留白一般在Style样式面板中调整Padding值，很多时候，Padding值也能辅助我对组件进行对齐操作。文本之间的行间距偶尔会调整，但会以默认为主。

04 案例
以下是一些规范原型页面示意：

05 结束语
对于想要从事产品经理或是交互设计师的新人来讲，建议大家在熟悉工具的使用过程中有意识的培养自己的设计规范。在绘制线框图，或者临摹其他成熟产品创建高保真原型（实际工作中并不需要创建高保真原型，这边需要特别注意）的时候，一定要注意以下2点：

线框图：不建议完全按照苹果或是安卓，设计规范进行页面设计。
高保证：不建议像素级临摹。