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

相关推荐

  • Web产品的交互说明文档应该怎么写?

    本文是作者的一篇随笔,适合交互设计师阅读,希望能给正在学习交互的朋友一些帮助。也希望朋友们,可以提出更多很好的建议。

    2017-05-23
  • Android和iOS平台交互方式的不同点

    本篇文章属于很初级的内容,之所以写下来,一是为了整理一下自己的思路,二是为了方便初学者们快速了解 Android和IOS在交互上的很多区别。可能有些地方不是完全正确,望多交流。

    2017-06-03
  • 实战分享:核桃App界面设计及视觉规范

    因为最近做公司项目的设计规范,所以决定把设核桃的计规范也整理一份。但由于是概念稿,所以规范做的不算全面;而且每个产品也有各自的规范思路和维度,没有绝对的定性方法。这里只是提供一个大体方向,疏漏之处,希望给予批评指正。

    2017-05-13
  • 产品交互阶段的用户心理密码解析

    作者:雪代巴(心理学硕士,PM/UR,来自迅时通信) 无论是产品、用研、设计、开发还是市场运营,都离不开“用户是怎么想的”这个话题,用户从认识产品到使用产品的一系列过程中,他们的“心路历程”是 怎样的,如何从心…

    2016-09-18
  • 【用户体验.春节特辑】客从何处来(总第266期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第266期我的家族,还算是一个比较大的家族。从我记事起,关于我的家族,关于那些已经逝去的,离我远去的那些家人的故事与人生经历,都是经由一个姑姑讲述给我听的。每逢节假日,尤其是寒暑假那些漫长的假期里,尚还年幼的我,都会安静地坐在她的身旁,在她的娓娓道来中,去遥想那些过往,那过往中我的那些平凡也却有些不凡的家人。我的祖辈的...

    2018-02-16
  • 从交互设计浅谈安卓开发有多痛苦,安卓程序员才最值得尊重

    导语:交互设计带来的痛苦和问题,总有种让我们安卓开发者恨铁不成钢的感觉,虽然想吐槽,又无力吐槽。如果你懂得微信交互的设计,那就勇敢的,尽情的去吐槽吧!微信的交互,Android和IOS都是按照各自的交互去展示的,去设计的。比如:列表的删除操作,Android中的微信它就严格遵循了长按删除功能,而IOS就一贯的按照自己的风格,滑动删除;又比如底层四个tab按钮,安卓中可以滑动变换界面,而苹果的只能点击操作;再比如顶层的标题栏安卓中微信的标题栏是不变动的,而IOS的是跟着界面变化的;再比如安卓的微信中点击退出是中间弹框,而苹果的则是底部弹出;再比如选择相册等等很多细节,你要注意去体验,去感受,你就会发现,微信的设计是按照Android和IOS各自的交互规范来设计和实施的。如果这样去设计和做就会大大降低开发者的难度。说到这里聪明的你们,估计想到我下面要说什么了?一个苹果手机用户手机破了,买不起了,一想要是再买个苹果手机,就得卖肾了,于是乎买了一款Android的坚果手机,之后打开微信后,看到好友给他发了一个优衣库的视频的公众号文章,感觉非常不错,直接就把这条链接收藏了,偷偷欣赏完之后,回到家怕被爱玩手机的儿子发现,就想删除这条收藏,哎呦喂,怎么滑动都没有滑动出删除按钮来,最后果真让自己的儿子看到了,听到声音的老婆过来就扇了他丈夫一嘴巴子!

    2017-05-28
  • 最新软件安装包目录【18年4月】

    悦台新媒体欢迎关注我们图文美编部关注软件导航电脑办公室内/外设计平面设计机械设计影视动画建筑设计地理信息网页设计屏幕录像编程类电子绘图数据库数据统计理科工具软件目录【电脑办公】电脑系统(U盘安装)PE制作WIN7WIN8WIN10XP电脑系统(直接安装)WIN7WIN8WIN10Officeoffice2003office2007office2010office2013office2016Projectproject2007projec...

    2018-04-09
  • 你天天挂嘴边的「用户体验」,到底是什么?

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

    2017-05-02
  • 信息与交互设计专业委员会走访北京服装学院艺术设计学院

    点击信息与交互设计关注我们!欢迎大家踊跃投稿哦!投稿邮箱:iidc@iidc.org.cn第四站——北京服装学院2017年11月3日上午,信息与交互设计专业委员会卞亚君秘书长及秘书处谢老师、王老师一行三人到北京服装学院艺术设计学院进行了走访。新媒体系主任丁肇辰教授热情地接待了我们,在交谈中丁教授向我们介绍了学院的基本情况以及带学生做的一些研究项目及活动。如《都会寝室》项目,面向20-35岁人群,致力于通过卧室环境控制、健康食物推荐等,改...

    2018-01-31