产品设计

1 axure设计规范

1.1 分辨率

一般来说,1024×768或1200×800的分辨率是比较常见的选择，这两种分辨率能够适应大部分的显示设备。如果需要更高分辨率的预览，可以选择1920×1080或者更高的分辨率。此外，RP还支持自适应视图，可以根据不同的设备和屏幕大小自动调整分辨率和布局，提高用户体验。

左菜单栏和顶部菜单栏尺寸
左菜单栏和顶部菜单栏的尺寸可以根据实际需要来确定。一般来说，左菜单栏的宽度可以在100-200像素之间，顶部菜单栏的宽度则可以根据实际需要来调整。在高度方面，左菜单栏的高度可以根据内容多少来确定，一般不宜太高，以免影响用户体验。顶部菜单栏的高度则一般在30-50像素之间。
建议：1920x1080左菜单栏180px，顶部菜单栏50px，子页面分辨率1740×1030

1.2 网格和格栅

在我们开始做产品设计之前，需要先定义产品适用的设备，并且你需要了解产品的基本尺寸比例，然后据此设置好它的格栅和网格。这样我们就能将界面中的各要素按照既定的规则摆放，呈现一个整洁、美观的效果，减少在产品设计过程中对元件位置和大小的临时调整，以及便于开发团队和UI设计的阅读，也为能做出高质量的高保真原型打下坚实的基础
例二：适于web端的产品设计，以常见的1920x1080为例：

尺寸比例（注意是比例）：1920px×1080px；

网格：24px=1920/80；用作元件尺寸和间距最小单位；

有间距格栅：（格栅48px+间距24px）×26；边距各24px；这样就分出来基本的格栅，元件摆放时即按格栅对齐即可；如图：

​
打开Axure
RP软件（PR9为例），右键【标尺.网格.辅助线】，创建辅助线（也可在导航【视图】中找到）

​

所以根据上面这个格栅设计，我们就可以得到下面这个示例：它的尺寸、间距都是和网格和格栅定义出来的
注意Axure中只能使用px作为度量单位。红线为全局辅助线，背景的方格即为网格。格栅有很多种设计方法，主要是UI设计时应用，我们做原型一般只用概略地格栅即可，只是为了规范产品设计。本图仅为一个网格设置的示例，请读者根据需要去设计格栅和网格。

1.3 颜色规范

颜色查询网址

1.3.1 基本原则

1. 一个产品体系中遵循一套配色规则；
2. 避免使用纯黑色（#000000）；
3. 用于区别展示的相邻颜色要具备高对比度（色相/明度/饱和度）；
4. 遵循"六三一"法则，即：60%的地方使用主色调，30%的地方采用辅助色，剩下10%使用点睛色进行突出显示；

1.3.2 品牌色/主色

品牌色：是体现产品特性和传播设计理念最直观的视觉元素之一；
主色：是页面中除中性色外使用面积最大、视觉最重的颜色；
选取色彩时，需要先明确品牌色在界面中的使用场景及范围（包括：关键行动点、操作状态、重要信息高亮、图形化等场景），然后在基础色板中选择主色（建议选择基础色板中从浅至深的第六个颜色作为主色）。

1.3.3 功能色

用于至代明确的信息及状态，比如：链接、成功、警示、失败/错误等
选取功能色时需要遵循用户对色彩的基本认知
​
​

1.3.4 中性色

被大量应用在文字部分，此外背景、边框、分割线等场景中也非常常见
​
​

1.3.5 其他配色

被大量应用在环形图配色
​
​

1.3.6 颜色交互规则

在鼠标移入，悬停时给予用户反馈的交互；
一般在原有颜色的基础上透明度降低20%，为原色的80%即可
​
​

1.4 字体

1.4.1 基本原则

字号：一个系统设计中（展示型页面除外），字号的选择尽量控制在 3-5
种之间。为保证页面可读性，主要字体字号为 14px，与之对应的行高为
22px，如下图：
行高：一般为字号的1.3-1.7倍，具体根据实际使用场景来选择。

字重：基于秩序、稳定、克制的原则，一般为 Regular
和Bold两种规格，分别对应代码中的400和500。
颜色：一般为中性色，个别时候需要用到有彩色，例如：链接文字、表示状态的文字。
表格数字：有些字体下的单个数字所占的面积不一样，导致数字间的纵向对比不直观，因此使用时我们需将其设置成等宽字体，如下图（两个均是万级数字的对比）
在视觉展现上用尽量少的样式去实现设计目的，避免毫无意义地使用大量字阶、颜色、字重来强调视觉重点或对比关系。
​
​

1.4.2 使用规范

在同一产品体系中，对标题、正文、辅助文字做统一规划，落地到具体场景中会进行微调。

​​

​

1.5 元件尺寸与文字

元件尺寸与网格和格栅有直接关系，元件的尺寸最好是网格的倍数关系，但不一定是整数倍。例如：
元件中的文字不需要插入，大部分基础元件都可以直接在元件中直接输入文字，选中元件用鼠标双击，或敲回车，都可以在元件中输入文字。元件的文字最小字号只能用12，因为即使你选择了更小的字号，虽然在编辑文件中看起来正常，但是预览时，会被还原到12，这样你的元件表现就会出问题。例如：

​​

所以你的元件尺寸不能太小，否则文字显示会受到很大的限制。我们不需要过多的去考虑这个问题，因为我们的原型不是设计图，表达正确的意图即可。

1.6 原型大纲

一个完整项目的产品原型需要有"大纲"，包含内容如下：

1.6.1 产品的版本概况

a、 版本记录
需明确记录原型的增删改内容及日期，\

​
b、功能点列表
列出该原型图的功能点，明确开发任务及优先级。对于分期开发，但原型已经出完的，标注不同功能开发的阶段，"1期"、"2期"等。

​​

​​

1.6.2 功能结构图

a、使用xmind绘制，让开发人员了解整个功能框架、信息架构，利于估算开发时间。
b、 功能结构图中使用的功能及页面名称要和"功能清单列表"保持一致，
示例：\

​​

‍