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

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


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

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

最近在做B2B的网站后台,B2B模式网站后台交互与网页版的企业级办公产品交互有很多共通之处,设计时可借鉴此类网页应用比较流行的模式。

SaaS,一种网页应用。(Software as a service,它是一种软件交付模式。在这种交付模式中云端集中式托管软件及其相关的数据,软件仅需透过互联网,而不须透过安装即可使用。用户通常使用精简客户端经由一个网页浏览器来访问软件服务。)

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

设计问题

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

  • 布局:考虑新的趋势、习惯、多平台多设备
  • 产品工作流程(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应用,提供新的交互及视觉设计

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

原因:

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

2、三栏布局

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

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

3、让表单更有趣味性

(1)让表单填写更加容易,交互更容易识别——设计自定义表单控件,以下是我们个性化设计的表单控件:

下拉搜索菜单、下拉菜单加入添加操作(直接在下拉菜单中添加选项,免去跳到其他页面编辑添加)、下拉菜单项分组;

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

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

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

(3)从视觉上提升可读性:

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

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

4、右侧栏

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

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

5、设计时考虑上下文操作

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

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

 

作者: jelumalai

原文来自Medium,题目《Modern UI/UX for SaaS applications in 2015 and Beyond》

原文地址:https://medium.com/hackerpreneur-magazine/modern-ui-ux-hacks-for-saas-applications-in-2015-and-beyond-f7b9a4f231dd#.v710e1is0

译者:木野蔡

译文地址:http://jdc.jd.com/archives/1812

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/28309/

(0)
CatherineCatherine
上一篇 2017-05-20 14:31
下一篇 2017-05-20 16:41

相关推荐

  • 微信Axure原型练习和资源分享

    “我根本没把你放在眼里。”“因为你一直在我心里。”▼这是咸冬日的第叁篇文章这两天业余时间学习了axure的基本功能,做了一个简单的微信原型练练手,教程分享给大家。首先需要准备基本素材,可以从我的源文件中获取。1.设置手机主页和home热键用例。2.拖入内联框架(w273*h482),设置从不显示和隐藏边框,并链接到主页。3.设置主页交互:1)主页内拖入动态面板“内容区”(273X396),并增加4个menu状态(微信、通讯录、发现、我;...

    2018-03-10
  • Axure RP 8.0 抽奖大转盘实例教程附.RP下载与视频演示

    原标题:【AxureRP8实现真正抽奖大转盘】 效果图: Demo地址:http://www.iaxure.com/share/luck/ (有广告) 视频: 实现过程: 1、生成一个0-360之间的随机数,保存至变量; 2、旋转转盘到达指定角度,案例中为3-…

    2015-08-24
  • 观点 | 交互设计在未来会多火?

    周一:AE动效 | 如何入手创作才能更加真实?周二:马克笔如何通过"叠加技法"精准调色周三:更快更好 | 手绘板也能比着尺子画!?周四:观点 | 交互设计在未来会有多火?周五:开拓视野 | 哪些用户体验很棒的APP设计好在哪里周六:如何看懂艾迪.斯理曼的Dior Homme周日:学珠宝设计我们推荐给你的必看书目交互设计是什么?对你而言,它可能还是未知数。让我们先看看大多数人如何看待交互设计这一专业:1.交互设计师是做APP的2.交互设计...

    2018-04-06
  • 认知设计论:关于认知最全面的一篇

    所谓的成长就是认知升级。——傅盛

    2017-05-03
  • 【素描Sketch】细节之处韵匠心

    ( 本宣传资料仅为要约邀请,部分图片源于网络,如有侵权请联系删除,所载全部内容仅供参考均不构成要约,一切以政府批准文件与开发商签订的《重庆市商品房买卖合同》及其附件约定为准。周边已规划及/或已建成及/或规划中及/或建设中的公共设施(包括但不限于变电站、加油站、明渠、高压线、轨道环线、商业中心、学校、公园、酒店、医院等)及规划用地,均以政府有关部门最终核准及审批文件为准。南岸区融侨半岛融侨城二期C区(营销推广名:金辉耀江府),开发商:重庆...

    2018-03-14
  • Word产品需求文档,已经过时了-快使用Axure制作产品需求文档

    说来有些惭愧,写这篇文章是用来教大家写需求文档的,但其实,我很少会写传统意义上的产品需求文档,甚至,我连word都很少用。用惯了Axure的任意布局方式,再用word感觉非常别扭,尤其是在添加图片时,简直感到捉急…

    2016-01-06
  • 线上广告更加吸引人的5个思路

    今天说讲述的5个思路是不同的,内容决定设计,留白,故事都和这种填鸭式的广告不是一个路子。而线上广告和传统广告最大的不同在于,它可以创造体验。

    2017-05-04
  • 卡片式设计,并不能支撑所有的设计需求

    卡片式设计一直是以强兼容性和“百搭”的形象出现在大众的面前,但是它同样有无法满足用户需求的时候,今天的文章我们就在实战中聊聊这件事。

    2017-05-13
  • Axure RP 8.0安装图解

    Axure RP 8.0下载链接:链接:https://pan.baidu.com/s/1jJFQwLK 密码:3d1yAxure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专门的原型设计工具,它比一般创建静态原型的工具如Visio、Omnigraffle、Illu...

    2018-03-24
  • 语音交互中的“等待体验”研究

    文 | 叨叨来自雷锋网(leiphone-sz)的报道雷锋网按:本文来自百度人工智能交互设计院,通过实验的方式,研究了语音交互中用户对于智能音箱的“等待体验”。雷锋网编辑在不改变原意的基础上做了精编。回顾人机交互发展史,人类先后经历了基于命令行的CLI 时代,基于鼠标键盘的GUI时代,基于触摸的初级NUI时代。后面每一个阶段比前一个阶段更自然,学习成本更低,综合效率更高。进入AI时代,人工智能给机器带来三种能力:感知能力、认知能力、自然...

    2018-01-30