第五章 PC软件首页交互设计

交互设计思想页面

互联网产品的第一印象就是首页,重要性毋庸置疑,首页可突出设计值或决策者希望第一时间重点表达的内容。现在市场上的WEB产品,APP产品,PC产品等没有完全相同的首页,几乎所有的团队都根据自家的需求与侧重点进行首页设计

产品步入交互设计的阶段后首先需要确定的是这款产品的需求,主要包含以下需求

  • 需求说明书(如果没有需要和产品负责人逐项确认清楚功能模块)
  • 产品功能功能模块图(层次结构图)
  • 产品的流程图(核心需求交互设计主要突出的就是交互步骤)

      PC软件产品的首页交互设计

PC软件的首页设计往往基于鼠标+键盘的人机交互方式进行的,所以最基本的交互动作往往是“单击”、“快捷键”。

PC软件的首页在进行交互设计时,有很多要素要注意,第一点就是界面要简洁,功能入口要摆放合理。

下图是思维导图Mindjet 14的首页,大家可以看到首页上部的功能栏设计是否和win平台的office系列软件相似呢?为什么要这么设计一款画图首页的界面?

交互设计师的角度,一款新的软件产品在设计之初就要考虑用户的学习成本,所以在设计之初我们需要做的事情是避免设计过于难学的交互动作(即使是创新也要考虑用户学习成本),我们来看看Mindjet 14和OFFICE有哪些交互能扯上关系吧

图:Mindjet 14 首页

1

图:Office2013 Word首页

2

对比Mindjet 14和Word2013发现上面部分的编辑功能区几乎很相似,保存按钮,粘贴按钮,文件主菜单,开始(tab)都是直接沿用了Office。

那么,这么做会不会被说抄袭?没有创新?

其实,这种设计思路是为了延续用户使用习惯,减少用户操作学习成本,对一款软件的推广是有至关重要的作用的。试想我们是先接触到PC,从office03到现在office13很多人都是先接触到的Office,他们这些人在使用编辑器的时候有些形成的固定的使用习惯,比如Ctrl+S快捷键是保存,比如进来软件首页给用户一种似曾相识燕归来的感觉,他不用怎么学习就玩的飞起,这就达到了我们的目的。

关于创新,要是都全部一样那就是2个Word了没有Mindjet的存在理由了,之所以交互动作相似,Mindjet还是有自己方向,因为两款软件定位不一样,Mindjet是用来画图,Office系列的Visio也是画图软件,那么Mindjet做出了什么亮点在首页上就应该第一时间告诉新用户

这时候需要考验设计师怎么向新用户引导使用自家软件的特别功能交互

Mindjet首页在左侧有个视频播放窗口,一些简单的功能介绍和使用特色。

在界面的中央部分由个思维导图的案例,用户可以选择查看学习在这个案例基础之上直接修改得到自己第一个作品,也可以新建一个新的。

首页突出亮点,首页部分的引导案例上有很细节的部分一个节点可以放图片+文字,还有不同样式可以换,这更大限度的给了视觉需要较强的用户一个贴心的提示。

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

(0)
iouedioued
上一篇 2014-10-12 10:41
下一篇 2014-10-13 22:09

相关推荐

  • 你应该知道的24种新兴交互设计

    文字原文:一淘UX原文:http://ux.etao.com/posts/570   在互联网这个领域,每天都有不计其数的产品诞生,有些产品只是灵光一现,有的却存活了下来,但是不论存活与否,这些产品上总有一些设计细节让我们眼前…

    2014-12-18
  • Mockplus原型交互跟我做之1-30秒做一个自动消失的消息框(Toast)

    从现在做,跟我一起来认识Mockplus的交互。 Mockplus的交互,非常简单、直观、容易上手。你所需要做的,只是拖一拖鼠标,然后几步设置而已。 当然,只要你愿意,还可以实现强大的交互效果。 不废话,先来做一个,试…

    2016-01-18
  • 为什么要做艾欧交互学堂网站-@阿西-UED

    我是阿西,艾欧交互学堂的管理员,自己想了很久,做这个项目究竟是为了神马? 可能目前大家还没关注到我们,但是等将来你们关注到后,肯定也有这个疑问,就是这个人为什么要做一件看似不靠谱的事情呢? 这里就要解…

    原型设计教程 2014-09-14
  • Web首页交互设计

    关于首页,每天处在互联网的生活中访问的网站首先映入眼帘的,都是网站向你展示的该网站的首页 我们还是来分析下“著名”的百度首页。说起首页设计分析百度就像编程开发第一堂课要讲Hello World!一样..... ^_^。 先…

    2014-09-27
  • 003. 生成网页原型的三种方法

    方法一:菜单生成法   路径: 生成——原型——弹出框  如图:   方法二:工具栏,快速按钮生成法   方法三:快捷键生成法:直接按键盘F5,即可生成网页原型 弹出框:无论使用上面哪一种方法生成原型,最终都…

    2014-09-12
  • 【译】Axure RP 8 Beta 官方教程 - 钢笔工具

    From: Learn Axure RP 8 Beta: Pen Tool(http://www.axure.com/c/blog/160-learn-axure-rp-8-beta-pen-tool.html)   Axure RP 8 引入了一个新的钢笔工具功能用来绘制自定义形状。自定义形状是基于矢量的,这…

    2015-09-08
  • axure官方原版教材(英文)

    AxureCoreTraining axure rp 官方教程,PDF免费下载 推荐阅读英文版,翻译的毕竟有些差异的。   点我下载AxureCoreTraining 

    2015-06-11
  • 这些工具你会用吗?常见设计工具视频教程集锦

    在产品开发过程中,最常用的展现构思的方式一般来说是纸笔原型,最简单也最迅速,寥寥一画,一个大致的线框图就呈现出来了。但是如果想要把线框图表现得更完美,你还是有很多工作要做哒~YouTube上一位大牛在他的视…

    2023-03-03
  • UX的设计灵感从哪里来?——看看Megan Wilson的采访

    Megan Wilson是一位资深的用户体验师和UX Motel的专业编辑。同时她是ux.walkme.com网站UX专栏作家,在Facebook、领英有大量粉丝。和一般介绍性的文章不同,她喜欢用访谈的方式来发表UX方面的文章,这样的文章,有很…

    2023-03-03
  • 在手机上演示axure原型

    AXSHARE APP发布啦,以后大家的原型可以通过这款APP进行预览演示咯。小编迫不及待的体验了一下这款APP。 要使用这款APP,首先需要有axshare的账号。账号注册地址:https://share.axure.com/ 然后在手机上下载AxShar…

    2015-05-28