为未来的SaaS应用提供新的交互及视觉设计

云端软件即服务已代替传统笨重的桌面软件，打造优异的用户使用界面让你的应用脱颖而出已是势在必行之事，然而这也意味着诸多的挑战。

本文介绍给大家一些基本需要关注的点，以及我们设计团队通过在相当长的时间内的试验和学习，如何为在线办公应用Zoho设计更好的用户体验。

在说如改何良设计之前，有一些设计问题需要先提出来：

布局：考虑新的趋势、习惯、多平台多设备

产品工作流程（workflow）：The less time it takes, the more UX points we win 一个好的产品用户体验是它能花更少的时间让用户完成任务

视觉设计：毫无疑问，需要漂亮的界面

表单（forms）：表单是枯燥的，没有人喜欢填写表单。但是我们又离不开表单，所以它必须被设计得易填写

我们是如何重新设计的？

从旧的过时的界面到新的时尚的界面，ZoHo Books经历了数年的改进。每次改进我们都进行了大范围的用户可用性测试，可用性测试对了解哪些改进设计能产生更好的结果相当重要。

可以先将同事作为测试的主体“Your employee experience is where your customer experience begins”——Jennifer Winter

1. 导航：顶部靠右的标签卡式导航改为左侧导航

如果你经常使用SaaS应用，你会发现越来越多的产品在使用左侧导航了！

原因：

• 宽屏趋势下，更多的横向空间，有放置左侧导航的位置，且容易触控；
• 节省垂直空间，以便主体内容更好的利用
• 在侧边栏可以放置更多的菜单项（可上下滑动）

1. 三栏布局

三栏的布局是目前侧边导航的扩展，在第二栏展示项目列表，在右侧内容区展示在第二栏中选中的列表项的详细内容

1. 让表单更有趣味性

• 让表单填写更加容易，交互更容易识别——设计自定义表单控件，以下是我们个性化设计的表单控件：

下拉搜索菜单、下拉菜单加入添加操作（直接在下拉菜单中添加选项，免去跳到其他页面编辑添加）、下拉菜单项分组；

• 把不同表单项规组到不同标签卡下——不要把所有表单都平铺在一个页面中，可以根据使用情况进行分类；

• 从视觉上提升可读性：

可读性是表单易填写的重要因素。我们通过调整表单区的色彩和焦点，呈现更加舒适的视觉体验。

1. 右侧栏

利用屏幕右侧多出的空间放置与正文内容相关的操作

1. 设计时考虑上下文操作

把所有支线的任务融进主任务页面中，而不是把它们分别放在不同的页面去操作（当下的网页技术及网页响应速度，可以在页面不跳转的情况下完成多项任务）。比如下图展示了当用户在Zoho Books为商品/服务创建发票时，我们是如何依据情景提供商品/服务所需的设置项。