第五章 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

相关推荐

  • Axure官方教程中文版第3课:组件与母版-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(3).MP4 新建一个文件 1、添加一个按钮并设置鼠标悬停交互样式 2、复制并对齐按钮 3、将按钮转化为母版 4、将母版应用于每一页 5、在母版中为每个…

    2015-01-25
  • Justinmind 7.1.0 win&mac网盘下载

    自定义需求字段 如你所知,Justinmind企业版可以帮助你通过需求管理与所有设计团队打造智能商务解决方案。直到现在,你已经能够在你的原型中定义项目的要求。随着在Justinmind编辑的需求领域,用户已经可以定义需求…

    2016-04-13
  • Axure官方教程中文版第1课:开始-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/1_1280x720.MP4 新建文件 1、创建一个蓝色按钮 2、添加一个链接 3、发布我们的云托管服务,AXURE份额 4、在本地生成HTML文件

    2014-12-29
  • Axure新品AxShare App现已发布,快来下载!

    今天阿西收到axure官方的邮件: We're launching the AxShare App 意味着 axure终于朝着APP方向有了实质性的进展,大家今后的作品可以通过这款APP进行预览演示了。可以是Axure不上之前的短板,下面就看这个APP的体…

    2015-05-23
  • 清华大学官方网站的交互原型设计

    艾欧学堂视频教程   项目:清华大学官方网站的交互原型设计 原型设计 主讲人:@阿西-UED 使用Axure6.5工具,做一个Tinghua的官方网站的简单交互模型,在线演示为新手提供一些思路,仅限演示。 在线播放 [ckvid…

    原型设计教程 2014-09-13
  • 在熟练使用2B铅笔前,请不要打开Axure

    在互联网产品领域,Axure已成为产品经理、产品设计师以及交互设计师的必备工具,从某种程度讲,Axure帮助我们建立低保真模型,便于与用户的需求验证,也帮助我们构思交互细节,使前端和开发人员更容易理解我们的产品;但从另一方面讲,Axure绑架了我们的思维,让很多产品经理和设计师养成了“无Axure不设计”的恶习,忽略了用户故事、功能规格和信息架构,甚至走入“为了用Axure而用的误区”,导致了资源的大量浪费和产品的硬伤。因此,提醒为Axure着迷的产品经理:在熟练使用2B铅笔前,请不要打开Axure。

    2015-01-01
  • 023. axure制作项目符号列表样式

    像这样的在文字前面添加项目符合列表,不只是在word中可以实现,在axure中也可以很方便添加 l  Axure rp 6.5的软件安装、汉化与注册 l  认识Axure的软件界面 l  生成网页原型的三种方法 l  如何关闭IE浏览器在生成…

    2014-09-12
  • 用什么工具?做什么原型?给谁看?

    我们在日常的软件设计中经常会涉及到原型的设计。设计一个原型,无非就是三个目的:第一个目的是给自己看的,为了方便之后的下一步设计;第二个目的是给开发看,说服开发,完善软件;第三个目的是给客户看,让客户…

    2023-03-03
  • 无限滚动翻页的优点和缺点

    一张图告诉你无限滚动翻页的优点和缺点 什么是无限滚动翻页?你一定不会陌生。实在不清楚,刷一下微博就知道了。想不想知道你的网站适不适合使用无限滚动翻页,看看这篇文章应该会很有帮助! 无限滚动翻页是现在讨…

    2015-01-21
  • 交互设计师推荐APP产品原型设计工具 |UE网交互设计学堂

    最常用的才是最靠谱的,有些文章里说的很多但是我作为一个交互设计师几乎都没使用过原因很简单,用不到那么多。 1.Visio 2013 推荐指数  ✦✦✦✦✦ 原因:线框专业户,灵活,Office使用习惯接受程度较高。支持各种平台…

    2015-07-01