Echarts:着手产品设计

着手产品设计

制定MRD之后通常是原型设计和视觉设计，也就是产品的交互设计和界面样式设计，即思考产品与用户如何交互？产品的界面如何设计？

产品在与用户交互时，要保证产品的可用性、易用性和兼容性等，进而保证能够提供较好的用户体验。

• 可用性考虑的是用户能否通过产品满足自己的相关需求。
• 易用性指的是用户能够快速上手，熟练使用该产品。以导航栏为例，直观的导航栏更容易上手，它能够让用户迅速确定某步操作后的大致结果或者操作后的下一个步骤，如产品上的头像图标，点击后会大概率跳转到用户的个人信息页面。
• 在实际场景中，用户体验除了会受到产品可用性和易用性的影响，也会受到产品使用流畅程度和兼容性的影响。如果在操作时，产品反应迅速，使用流畅，用户就会获得较好的体验。同时，产品应当尽量支持不同系统、不同型号的设备，提高兼容性。例如用户经常在电脑上使用某产品，并成为该产品的活跃用户，那我们当然希望在用户不方便使用电脑的时候，也能通过其他移动设备使用该产品，如手机、平板等，这就会对产品的兼容性提出更高的要求。

产品的界面设计通常需要考虑功能模块划分、色彩搭配等。

在划分产品模块功能时，要着重关注设计布局，且要符合用户的一般使用习惯。例如在设计App产品时，通常会在屏幕的下端设置多个菜单栏，而在上部设置搜索框和页面方向键。试想一下，如果把这两部分上下对调，用户一般会感觉奇怪，因为大部分App的设计是与之相反的。

在具体的功能模块层级设计上，可以将大模块拆解，将小模块整合，例如“用户信息”模块下包括“账号信息”“用户名称”等细化模块，这部分功能模块层级设计可以参考已有的产品，使用思维导图的方式对其进行拆解和汇总，使其符合用户对产品的一般使用习惯。

仍以股票信息可视化为例，前文提到该设计需求是在页面待查询股票代码输入框输入相关股票代码后，点击查询按钮后展示该股票的相关可视化信息。在确定产品布局后，就是撰写产品需求文档（Product Requirement Document，PRD），这部分工作主要由产品经理负责，用于细化产品功能。假设本产品需要展示的可视化包括“近30交易日涨跌次数”（环形图）“近30交易日净值变化”（折线图）“近30交易日成交量”（柱状图）“近30交易日收盘价”（折线图）的信息，并且要求在折线图中标识出最高和最低点，产品界面如图9-1所示。