译文|为未来的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

相关推荐

  • 快来感受一下美帝的体验创新之旅

    追逐着2014年最后一天的时光尾巴,MUX五位同学加入了IXDC美国体验创新之旅,从北京跨国太平洋来到旧金山(San Francisco),深入参访硅谷多家互联网创新企业,交流和感悟体验创新。 8 ▲先来张大合照,三十多人,我…

    2015-01-20
  • 你天天挂嘴边的「用户体验」,到底是什么?

    用户体验到底是什么?这个每天都挂在嘴边的词,你真的懂吗?

    2017-05-02
  • 用户体验设计影响力,引起两会代表关注

    现今,用户体验设计已成为社会广泛关注的话题,在今年两会上,用户体验设计的影响力也引起了两会代表关注。设计创新与科技创新互为表里,需要协同发展;从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。叶友达委员在接受《人民政协报》采访时指出,据国家知识产权局发布的报告显示,2017年发明专利申请量138.2万件,同...

    2018-03-16
  • 【to 交互新人】交互小白别踩这4个坑

    作者: 负如来不负卿   交互设计小白刚踏入这个领域时总会走进一些误区,为了防患于未然一起看看过来人的经验分享吧。   一些经验分享前言 作为一个交互新人,难免会踩到几个坑,即使现在不踩以后还会踩,只有踩过…

    交互专题 2017-08-07
  • Stack自动布局:Sketch中的Flexbox

    Skacks会彻底改变你对Sketch布局方式的理解。Sketch用户终于可以在不用CSS的情况下,直接使用Flexbox的排版技术。小提示:

    – Stacks能产生一致性。

    – 一致性使设计清晰。

    – Stacks能使设计清晰。我们Anima的使命是让设计师能掌控自己的设计。我们正在打造一款设计工具,让设计师定义和构建UI与UX设计中所有零零碎碎的元素,并且最终能自动生成本地代码,1:1还原设计。这就使设计师不依赖团队的其他部分,比如开发人员的优先关注点就与设计团队不同。

    2017-05-06
  • 多款智能手表的对比

    终于 Apple Watch 将要在下个月上市了。在目前还不知道这款产品售价的情况下,相信设计会成为不少消费者朋友选择产品的重要标准之一。Apple Watch 已经获得了 iF 设计金奖,不过可能有人觉得这无法令他们信服,他们…

    交互设计 2015-03-10
  • Axure实践第二讲

    Axure实践第二讲---如何有效的在工作中引入原型·页面枝干·添枝加叶·画龙点睛在近期的产品需求开发过程中,我们产品小组正式且大量的将原型开发工作投入常规的需求分析工作中,原型的开发对于我们在产品初期的调研、构建都提供了很好的指导。接下来就让本文带你领略:产品与原型的一节课。一、功能结构图(页面枝干)1.切入点是功能结构图(自顶向下)从大的方向上去划分几个大的模块类型,适用于业务功能较为单一且业务逻辑处理流程较为简单,如在做市商系统构...

    2018-03-16
  • 产品经理、交互设计、UI设计师工作内容到底是什么?

    |沙龙精选自公众号交互笔记后台经常会有人留言问我一些问题,有的我回复了,有的没有回复,不是我故意无视,而是因为探讨那些问题需要需要些时间,而我当时正好比较忙,等闲下来的时候,这些留言已经被后台定期清空…

    2017-08-02
  • 设计规范 | 详解组件控件结构体系:引导类

    本文是系列文章之详解组件控件结构体系的第三篇——引导类。enjoy~

    2017-08-04
  • 做好用户体验是赢得口碑营销的关键

    点击上方蓝色字体关注-商业洞察与您一起把脉商业未来趋势,洞见企业未来成功之道文/陈楠华:中国管理科学研究院特聘研究员,2015年度新三板十大新锐人物,2015年度中国创新经济领军人物,中国富爱产业链控股集团董事长,富爱科技产业发展有限公司董事长。本文由商业洞察战略合作伙伴竹石文化授权发布转载请标明作者、来源和ID用户体验:口碑的源头“用户体验”在近几年被热炒的“互联网思维”中是一个重要的关键词。现在的商业评论在点评各大公司最新推出的品牌...

    2018-03-26