一、产品原型
继梳理需求和规划版本之后，具体到产品设计上，具体产出物就是产品原型。
总结实际在用的一些原则。
1、业务流程
捋顺业务流程
2、选择框架
脑子里要装一些常见产品结构（尤其PC端），帮助很大
3、拆分页面
不要一味认为页面越少越好，前提是保证用户能顺畅完成的操作
4、原型设计
- 1:1原则，PC&M都以实际大小的尺寸进行设计，便于观察实际效果。
- PC端tab切换用户通常很少点击，要慎用。
- 不要让用户选择，主流程清晰。一个页面不要出现2页按钮，如果非常有必要，那么请区分出主要操作和次要操作，上下摆放按钮，左右摆放容易给用户造成困扰（视觉上也不好处理）
- 设计的丑没关系，关键要符合产品定位能更好的服务用户。如果是要展示的，需要一目了然，胜过为美观而隐藏等设计
- 全局考虑数据、图片展现。避免创建时候用横项logo，展示时候纵向，各处设计要一致
- 能用富文本框就用富文本框。很多时候需要支持各种样式
- 面包屑导航很重要，Loading、内容为空的提示能很好改善体验
- 不同状态的修改页面不一定所有元素都能改，列表上操作项也会不同
- 打破思维局限。你看到的XX列表，不一定非要用这种方式展现，他只是一种数据展现方式，你可以有适合自身产品的创新
- 全部设计完成后，带入场景模拟一遍用户操作，思考是否是最佳路径，是否有异常情况，隔一天再看看操作一遍可能发现新的不合理地方
- 不要担心技术无法实现，放开按照最完美的方案进行设计，因为需求
5、设计工具
用界面原型（可以是纸上的草图，也可是visio等画的，还可以是可执行原型——多为抛弃型的——效果更好）收集用户对界面的需求，在设计阶段结合用户的功能需求作交互设计。
需求至上。根据需求设计出界面上要展示的功能界面有哪些，以及界面之间的联系，或者功能之间的逻辑关系。
这个阶段，可以使用processon.com来画出UML图（就是操作流程）鱼骨图（XMind也可以画）
具体的功能出来了，就可以设计页面了。
推荐画草图，直接画也可以。
打印出来的线框原型图（https://uiprint.co/）
UIPrint 是一组非常实用的设备线框图外框，适合将其打印出来用笔来绘制 UI 草图。目前这个合集当中，已经包含有 10 种不同的设备外框线框图。
也可以使用Visio
至此，就产出产品原型了。
二、设计原则
1：易用性：
按钮名称应该易懂，用词准确，屏弃没楞两可的字眼，要与同一界面上的其他按钮易于区分， 能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确 操作。
易用性细则：
- 完成相同或相近功能的按钮用 Frame 框起来
- 完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。
- 按功能将界面划分局域块，用 Frame 框括起来,并要有功能说明或标题。
- 界面上首先应输入的和重要信息的控件在 Tab 顺序中应当靠前,位置也应放在窗口上较醒目的位置。
- 同一界面上的控件数最好不要超过 10 个，多于 10 个时可以考虑使用分页界面或者滚动条显示。
- 分页界面要支持在页面间的快捷切换，常用组合快捷键 Ctrl+Tab
- 默认按钮要支持 Enter 及选操作，即按 Enter 后自动执行默认按钮对应操作。
- 可写控件检测到非法输入后应给出说明并能自动获得焦点。
- Tab 键的顺序与控件排列顺序要一直，目前流行总体从上到下，同时行间从左到右的方式。
- 复选框和选项框按选择几率的高底而先后排列。
- 复选框和选项框要有默认选项，并支持 Tab 选择。
- 选项数相同时多用选项框而不用下拉列表框。
- 界面空间较小时使用下拉框而不用选项框。
- 选项数少时使用选项框，相反使用下拉列表框。
- 专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。
2： 规范性：
通常界面设计都按 Windows 界面的规范来设计，即包含“菜单条、工具栏、工具箱、状态栏、 滚动条、右键快捷菜单”的标准格式，可以说：界面遵循规范化的程度越高，则易用性相应的就越好。小型软件一般不提供工具箱。
规范性细则：
- 完成相同或相近功能的菜单用横线隔开放在同一位置。
- 菜单前的图标能直观的代表要完成的操作。
- 菜单深度一般要求最多控制在三层以内。
- 工具栏要求可以根据用户的要求自己选择定制。
- 相同或相近功能的工具栏放在一起。
- 工具栏中的每一个按钮要有及时提示信息。
- 一条工具栏的长度最长不能超出屏幕宽度。
- 工具栏的图标能直观的代表要完成的操作。
- 系统常用的工具栏设置默认放置位置。
- 工具栏太多时可以考虑使用工具箱。
- 工具箱要具有可增减性，由用户自己根据需求定制。
- 工具箱的默认总宽度不要超过屏幕宽度的 1/5。
- 状态条要能显示用户切实需要的信息，常用的有：目前的操作、系统状态、用户位置、 用户信息、提示信息、错误信息等，如果某一操作需要的时间较长，还应该显示进度条和进 程提示。
- 滚动条的长度要根据显示信息的长度或宽度能及时变换，以利于用户了解显示信息的位置和百分比。
- 状态条的高度以放置五好字为宜，滚动条的宽度比状态条的略窄。
- 菜单和工具条要有清楚的界限;菜单要求凸出显示，这样在移走工具条时仍有立体感。
- 菜单和状态条中通常使用 5 号字体。工具条一般比菜单要宽，但不要宽的太多，否则 看起来很不协调。
- 右键快捷菜单采用与菜单相同的准则。
3：帮助设施：
系统应该提供详尽而可靠的帮助文档，在用户使用产生迷惑时可以自己寻求解决方法。
帮助设施细则：
- 帮助文档中的性能介绍与说明要与系统性能配套一致。
- 打包新系统时，对作了修改的地方在帮助文档中要做相应的修改。
- 在帮助中应该提供我们的技术支持方式，一旦用户难以自己解决可以方便的寻求新的帮助方式。
4：合理性：
屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置。要注意利用这两个位置。
合理性细则：
- 重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。
- 错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。横排开头或最后与竖排最后为易点位置。
- 与正在进行的操作无关的按钮应该加以屏蔽。
- 对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。
- 非法的输入或操作应有足够的提示说明。
- 对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，避免形成无限期的等待。
